: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-face {
  font-family: "JioType";
  src: url("../fonts/JioTypeW05-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

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

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

:root {
  --font-main: "JioType", sans-serif;
}

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

/* -----------------------------------------------------------------------------
 * @layer components — composite UI (header, sections, cards, hero)
 * ----------------------------------------------------------------------------- */

@layer components {
  .page-max {
    max-width: 1440px;
    padding-inline: 64px;
    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:
      background-color 220ms ease,
      box-shadow 220ms ease;
  }

  .site-header.scrolled {
    background: #2E0011;
    /* 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%);
  }


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

  /* Research carousel nav buttons — disabled state */
  #research-prev:disabled,
  #research-next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  #research-prev:disabled:hover,
  #research-next:disabled:hover {
    color: #333;
    border-color: #ccc;
  }

  /* 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: 2;
    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: 3;
    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;
  }

  /* Re-show the overlay when the playing video is paused / ends. */
  .impact-video-thumb.is-playing.video-paused .impact-video-overlay {
    display: flex;
    opacity: 1;
  }

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

  /* Stretched link — entire research card is clickable (heading, desc, image).
     Play button + playing video keep higher z-index so they intercept clicks. */
  .impact-video-card,
  .research-swiper-mobile .swiper-slide {
    position: relative;
  }

  .stretched-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  /* Translating Vision into Impact — desktop carousel bleeds to viewport's right edge.
     The heading + arrows stay aligned within .page-max; only the cards track extends
     full-bleed to the right so cards run end-to-end off-screen (matches Figma). */
  @media (min-width: 768px) {
    section:has(#research-track) {
      overflow-x: clip;
    }

    #research-track {
      margin-right: calc(50% - 50vw);
    }
  }

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

  .story-author span,
  .story-desc span {
    display: inline;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: 0 100%;
    transition: background-size 0.5s ease;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .article-sec:hover .story-author span,
  .article-sec:hover .story-desc span {
    background-size: 100% 1px;
  }


  /* 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: 768px) {
    .page-max {
      padding-inline: 16px;
    }
  }

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


    .leader:nth-of-type(1) .guided-mobile-responsive img {
       object-position: right !important;
    }
  }

  @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;
  }
}

/* Ambani Photo Wrap */
.ambani-photo-wrap {
  position: relative;
  height: 282px;
  overflow: hidden;
  margin-left: auto;
  margin-right: 0;
  width: 100%;
}

/* md (≥768px) */
@media (min-width: 768px) {
  .ambani-photo-wrap {
    position: absolute;
    right: 0;
    width: 310px;
    bottom: 0px;
    scale: 1.1;
  }
}

/* lg (≥1024px) */
@media (min-width: 1024px) {
  .ambani-photo-wrap {
    height: 500px;
    margin-top: -100px;
  }
  .leader:nth-of-type(1) .guided-mobile-responsive {
    width: 421px;
    margin-top: -80px;
  }
    
  .leader:last-of-type .guided-mobile-responsive {
    width: 100%;
    margin-top: -100px;
  }
}

/* xl (≥1280px) */
@media (min-width: 1280px) {
  .ambani-photo-wrap {
    position: relative;
    right: 0;
    width: 510px;
  }
}

.footer-bg {
  background: linear-gradient(180deg, #5D0023 0%, #CA0E1F 202.83%), #5D0023;
}
/* Footer bottom row — pins logo|copyright|social to fixed grid tracks by content, so an empty Customizer field can't shift the others (was: justify-between + conditional markup). */
@media (min-width:768px){.footer-bg>div:last-child>div:last-child{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.footer-bg>div:last-child>div:last-child>div:has(>img){grid-column:1;justify-self:start}.footer-bg>div:last-child>div:last-child>div:has(>span){grid-column:2;justify-self:center}.footer-bg>div:last-child>div:last-child>div:has(>a){grid-column:3;justify-self:end}}


.story-title-link span {
  display: inline;
  text-decoration: none;
  background-image: linear-gradient(#E30513, #E30513);
  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;
}

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

/* Translating Vision card: heading underline grows when hovering the image,
   title, or description — not on whole-card hover, so the CTA stays isolated. */
.impact-video-card:has(.impact-video-thumb:hover, .story-title:hover, .story-desc:hover) .story-title span {
  background-size: 100% 2px;
}

/* Image zoom uses the same triggers as the heading underline, so hovering
   the CTA does not zoom the image. */
.impact-video-card:has(.impact-video-thumb:hover, .story-title:hover, .story-desc:hover) .impact-video-poster {
  transform: scale(1.05);
}

.footer-title-link span {
  display: inline;
  text-decoration: none;
  background-image: linear-gradient(white, white);
  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;
}

.footer-title-link:hover span {
  background-size: 100% 2px;
}

.looking-gradient {
  background: linear-gradient(to right,
        rgba(0, 0, 0, 0.75) 0%,
        transparent 65%);
}
    @media (max-width: 767px) {
     .looking-gradient {
           background: linear-gradient(to bottom,
                       rgba(0, 0, 0, 0.75) 0%,
                        transparent 65%);
           }
    }