:root {
  --sticky-card-top: 14dvh;
  --sticky-card-height: 82dvh;
  --sticky-card-radius: 12px;
  --ntp-card-top: 14dvh;
  --ntp-card-height: 82dvh;
  --ntp-card-radius: 12px;
  --ntp-stack-overlap-fudge: 2px;
}

/* JioTypeVar — variable font, covers full weight range 100–900 */
@font-face {
  font-family: 'JioType';
  src: url('../fonts/JioTypeW05-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JioType';
  src: url('../fonts/JioTypeW05-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JioType';
  src: url('../fonts/JioTypeW05-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JioType';
  src: url('../fonts/JioTypeW05-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-main: "JioType", sans-serif;
}
html {
  overflow-x: hidden;
}

/* -----------------------------------------------------------------------------
 * @layer base — element defaults (Tailwind Preflight runs first from CDN)
 * ----------------------------------------------------------------------------- */

@layer base {

  /* Use Tailwind theme font token with project fallback stack. */
  html,
  body {
    font-family: var(--font-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* overflow-x: hidden; */
  }

  *,
  *::before,
  *::after {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/*  */

.tracking-design {
  letter-spacing: -0.04em;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Ghost watermark text */
.watermark {
  opacity: 0.06;
}

/* Accordion */
#faqs .faq-answer {
  max-height: 0;
  overflow: hidden;
  padding-bottom: 0;
  transition: max-height 0.4s ease, padding-bottom 0.4s ease, margin-top 0.4s ease;
}

#faqs .faq-answer.open {
  padding-bottom: 1.5rem;
  margin-top: -8px;
}

.faq-btn[aria-expanded="true"] .faq-chevron {
  transform: rotate(180deg);
}

/* Career tab */
.career-tab {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Reserve width for the bold (active) state so switching tabs doesn't reflow */
.career-tab::after {
  content: attr(data-label);
  font-weight: 500;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.career-tab.active {
  font-weight: 500;
  color: #0D0D0D;
}

.career-tab-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: #E30614;
  transition:
    left 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
    width 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
  z-index: 1;
}

/* Curriculum tabs */
.curr-tabs-list {
  position: relative;
}

.curr-tab-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--curr-ind-w, 0px);
  height: var(--curr-ind-h, 0px);
  transform: translate3d(var(--curr-ind-x, 0px), var(--curr-ind-y, 0px), 0);
  background: #FAD5D7;
  box-shadow: inset 4px 0 0 0 #E30513;
  transition:
    transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1),
    width 400ms cubic-bezier(0.22, 0.61, 0.36, 1),
    height 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
  z-index: 0;
}

.curr-tab {
  position: relative;
  z-index: 1;
  cursor: pointer;
  background: transparent;
  transition: color 200ms ease;
}

.curr-tab span {
  color: #4D4D4D;
}

.curr-tab:not(.active):hover {
  background: #F5F5F5;
}

.curr-tab.active span {
  color: #E30513;
}

.curr-tab.active span:last-child {
  font-weight: 500;
}

/* Curriculum panel: no enter animation — active-tab movement on the left
   is the only animation on tab switch. */
.curr-panel.curr-panel-animate {
  animation: none;
}

/* Accordion content for curriculum/admissions */
.acc-body {
  display: none;
}

.acc-body.open {
  display: flex;
  flex-direction: column;
}

.acc-chevron {
  transition: transform 200ms ease;
}

.acc-open .acc-chevron {
  transform: rotate(180deg);
}

/* Legacy selector kept for old pages/sections */
.curr-item.active {
  background: #FAD5D7;
  border-left: 4px solid #E30513;
  color: #E30513;
  font-weight: 500;
}

.curr-item {
  cursor: pointer;
  border-left: 4px solid transparent;
}

/* Logo ticker */
@keyframes ticker {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-33.3333%);
  }
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 20s linear infinite;
}

.ticker-track:hover {
  animation-play-state: paused;
}

/* Section nav active */
.sec-nav-item.active {
  color: #E30513;
  font-weight: 500;
}

/* Pill tag */
.pill-badge {
  background: #E30513;
}

/* Header Menu Admissions */
@keyframes admissions-swap {

  0%,
  30% {
    transform: translateY(0);
  }

  50%,
  80% {
    transform: translateY(-44px);
  }

  100% {
    transform: translateY(0);
  }
}

.animate-admissions-swap {
  animation: admissions-swap 4s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

/* Custom Site Container */
.site-container {
  max-width: 1440px;
  padding-inline: 64px;
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 1279px) {
  .curr-tab-indicator {
    box-shadow: inset 0 -4px 0 0 #E30513;
  }
}

@media (max-width: 767px) {
  .site-container {
    padding-inline: 16px;
  }

  .curr-item.active {
    border-bottom: 4px solid #E30513;
    border-left: 0;
  }
    .tracking-design {
      letter-spacing: -1.12px;
    }
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 7px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #7A7A7A;
  border-radius: 9999px;
}

@layer components {
  /* .page-max {
    max-width: 1366px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  } */

  .site-header {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.2) 65%,
      rgba(0, 0, 0, 0) 100%
    );
    transition:
      transform 220ms ease-in-out,
      background-color 220ms ease,
      box-shadow 220ms ease;
    will-change: transform;
  }

  .site-header.nav-up {
    transform: translateY(-100%);
  }

  /* .site-header.scrolled {
    background: #000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  } */

  /* Header breakpoint: mobile until 1049px, desktop from 1050px */
  .header-desktop-shell {
    display: none;
  }

  .header-mobile-shell {
    display: flex;
  }

  .mobile-only-1024 {
    display: block;
  }

  @media (min-width: 1050px) {
    .header-desktop-shell {
      display: flex;
    }

    .header-mobile-shell {
      display: none;
    }

    .mobile-only-1024 {
      display: none;
    }
  }

    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 1050px) and (max-device-width: 1365px){
        .header-desktop-shell {
     padding-inline: 64px;
    }
    }

  /* Accordion (footer mobile) */
  .accordion-btn[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
  }

  .accordion-content {
    display: none;
  }

  .accordion-content.open {
    display: flex;
  }

  /* Desktop nav: Admissions ↔ OPEN FOR 2027 */
  .admissions-slot {
    position: relative;
    width: 155px;
    height: 44px;
    overflow: hidden;
  }

  .admissions-label,
  .admissions-pill-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }

  .admissions-label {
    animation: admissions-label-loop 4s ease-in-out 0.4s infinite;
  }

  .admissions-pill-wrap {
    animation: admissions-pill-loop 4s ease-in-out 0.4s infinite;
  }

  .admissions-open-pill {
    background: linear-gradient(90deg, #782a47 0%, #ca0e1f 162.38%);
  }

  /* Voices section: layered maroon-to-red gradient wash */
  .voices-section-bg {
    background:
      radial-gradient(
        78% 130% at 100% -10%,
        rgba(227, 5, 19, 0.42) 0%,
        rgba(227, 5, 19, 0) 66%
      ),
      radial-gradient(
        95% 150% at -8% 108%,
        rgba(120, 0, 42, 0.55) 0%,
        rgba(120, 0, 42, 0) 62%
      ),
      linear-gradient(132deg, #59001d 0%, #760028 52%, #9e0038 100%);
  }

  /* Voices section horizontal padding:
     keep until 1336px viewport, remove after that */
  .voices-academic-shell {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Stories grid (tablet): align images when titles are 1 vs 2 lines */
  @media (min-width: 768px) {
    .stories-grid-mobile article > h3:first-of-type {
      min-height: 3.5rem;
    }
  }

  /* Translating Vision — in-card video (clipped to thumb) */
  .impact-video-thumb {
    position: relative;
    overflow: hidden;
  }

  .impact-video-poster {
    position: relative;
    z-index: 0;
  }

  .impact-video-element {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    background: #000;
  }

  .impact-video-thumb.is-playing .impact-video-element {
    display: block;
  }

  .impact-video-thumb.is-playing .impact-video-poster {
    opacity: 0;
    pointer-events: none;
  }

  .impact-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.28);
    opacity: 0;
    border: 0;
    cursor: pointer;
    transition: opacity 240ms ease;
  }

  .impact-video-card:hover .impact-video-overlay,
  .impact-video-card:focus-within .impact-video-overlay {
    opacity: 1;
  }

  .impact-video-thumb.is-playing .impact-video-overlay {
    display: none;
  }

  .impact-video-button {
    width: 80px;
    max-width: 28%;
    height: auto;
    display: block;
  }

  /* Stories — desktop hover underline */
  /* Stories — desktop hover underline */
  .story-title span {
    color: #000000;
    line-height: 1.2;
    display: inline;
    text-decoration: none;
    background-image: linear-gradient(#000, #000);
    background-repeat: no-repeat;

    /* hover animation */
    background-size: 0% 2px;
    background-position: 0 100%;
    transition: background-size 0.5s ease;

    /* multi-line support */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .article-sec:hover .story-title span {
    background-size: 100% 2px;
  }

  /* Hero — looping media carousel (video / image / HTML5 video) */
  .hero-media-carousel {
    position: absolute;
    inset: 0;
  }

  .hero-media-slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 0;
  }

  .hero-media-slide.is-active {
    opacity: 1;
    z-index: 1;
  }

  /* Full-bleed media: fill each slide (fixes mobile “thin strip” with old 16:9 centering math) */
  .hero-media-object {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
  }

  /* Hero headline: keep first line upright; second line uses Inter italic */
  .hero-home h1 > span:first-of-type {
    font-style: normal;
    font-synthesis: none;
  }

  /* Mobile: exact 100vh hero so image / video layer matches viewport height */
  .hero-home {
    width: 100%;
  }

  @media (max-width: 767px) {
    .hero-home {
      height: 100vh;
      min-height: 100vh;
    }
  }

  @media (min-width: 768px) {
    .hero-home {
      min-height: 812px;
      min-height: 100vh;
      height: 100vh;
    }
  }

  /* Mobile: fill the 100vh slide; img uses inset + cover; video/iframe use centered cover (mobile-safe) */
  @media (max-width: 767px) {
    .hero-media-carousel,
    .hero-media-slide {
      min-height: 100%;
    }

    img.hero-media-object {
      object-fit: cover;
      object-position: center top;
      width: 100%;
      height: 100%;
      min-height: 100%;
    }

    /*
     * Native video + YouTube: object-fit on <video> is flaky on iOS; iframe ignores it.
     * Scale from center until both axes cover 100% × 100vh of the slide.
     */
    video.hero-media-object,
    iframe.hero-media-object {
      inset: auto;
      left: 50%;
      top: 50%;
      width: auto;
      height: auto;
      min-width: 100%;
      min-height: 100vh;
      transform: translate(-50%, -50%);
      max-width: none;
    }

    video.hero-media-object {
      display: block;
      object-fit: cover;
      object-position: center;
    }
  }

  @media (min-width: 768px) {
    img.hero-media-object,
    video.hero-media-object {
      object-fit: cover;
      object-position: center;
    }
  }
}

/* -----------------------------------------------------------------------------
 * @layer utilities — single-purpose helpers
 * ----------------------------------------------------------------------------- */

@layer utilities {
  .tracking-design {
    letter-spacing: -0.04em;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* -----------------------------------------------------------------------------
 * Keyframes (referenced by @layer components)
 * ----------------------------------------------------------------------------- */

@keyframes admissions-label-loop {
  0%,
  40% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(-110%);
    opacity: 0;
  }
  50.01%,
  90% {
    transform: translateY(110%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes admissions-pill-loop {
  0%,
  40% {
    transform: translateY(110%);
    opacity: 0;
  }
  50%,
  90% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-110%);
    opacity: 0;
  }
}

/* Arrow CTAs (hero + join) — fly out top-right on hover, reverse on leave */
.hero-home a,
.join-cta a {
  overflow: hidden;
}

.hero-home a svg,
.join-cta a svg {
  will-change: transform, opacity;
}

.hero-home a.arrow-in svg,
.join-cta a.arrow-in svg {
  animation: hero-arrow-diagonal 0.6s ease-in-out 1 forwards;
}

.hero-home a.arrow-out svg,
.join-cta a.arrow-out svg {
  animation: hero-arrow-diagonal 0.6s ease-in-out 1 reverse forwards;
}

@keyframes hero-arrow-diagonal {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  45% {
    transform: translate(14px, -14px);
    opacity: 0;
  }
  46% {
    transform: translate(-14px, 14px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

/* Guided by Visionary Leaders — tablet only: push content up so image bottom-aligns in the row */
@media (min-width: 768px) and (max-width: 1279px) {
  .leader > .flex.flex-col.relative.z-10 {
    margin-bottom: 40px;
  }

  .leader .guided-mobile-responsive img {
    object-fit: contain;
  }
}

.pills-extras-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .4s ease, opacity .3s ease;
}

.pills-extras-wrap.is-collapsed {
  display: none;
}

@media (min-width: 768px) {

  .pills-extras-wrap,
  .pills-extras-wrap.is-collapsed {
    display: contents;
  }
}

/* Programme overview "Read More" smooth open/close (mobile only) */
.overview-extra {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .4s ease, opacity .3s ease;
}

.overview-readmore {
  transition: margin-top .4s ease;
}

.overview-readmore.is-up {
  margin-top: -2rem;
}

@media (min-width: 1024px) {

  .overview-extra,
  .overview-extra.is-collapsed {
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible;
  }

  .overview-readmore,
  .overview-readmore.is-up {
    margin-top: 0;
  }
}

/* ACCORDION STYLE (AI/DS): Quarter ->Term accordion ->Module triggers ->Modal */
 .acc-body {
   display: none;
 }

 .acc-body.open {
   display: flex;
 }

 /* Smooth open/close for curriculum term accordions (admissions accordion keeps display toggle) */
 #curriculum .acc-body {
   display: flex;
   max-height: 0;
   overflow: hidden;
   border-top-color: transparent;
   transition: max-height 0.4s ease;
 }

 #curriculum .acc-body.open {
   max-height: 2000px;
   border-top-color: #CCCCCC !important;
 }

 .adm-acc-body p b, .adm-acc-body span b{
  color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 124%;
    letter-spacing: 0.32px;
 }

 .adm-acc-body ul li,
 .adm-acc-body ol li {
   position: relative;
   padding-left: 26px;
   margin-bottom: 16px;
   list-style: none;
 }

 .adm-acc-body ul li:last-child,
 .adm-acc-body ol li:last-child {
   margin-bottom: 0;
 }

 .adm-acc-body ul li::before,
 .adm-acc-body ol li::before {
   content: "";
   position: absolute;
   left: 4px;
   top: 5px;
   width: 8px;
   height: 8px;
   background: #E30513;
 }

 .adm-acc-body ul,
 .adm-acc-body ol {
   list-style: none;
   padding-left: 0;
   margin: 0;
 }

 @media (max-width: 767px) {
    .adm-acc-body ul li::before{
      width: 8px;
      height: 8px;
      top: 4px;
    }
 }