@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Urbanist:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600;1,700;1,800;1,900&display=swap');

 :root {
   --crimson: #c81e3a;
   --crimson-dark: #8f0f26;
   --ink: #0b0b10;
   --ink-2: #151319;
   --paper: #ffffff;
   --gold: #d9a94a;
   --muted: #c9c6d2;
   /* height the fixed header reserves at the top of the hero */
   --nav-h: 92px;
   /* shared hero + about backdrop — starts and ends on the same maroon
      so the two sections meet on an identical colour, with no seam */
   --about-bg: linear-gradient(160deg,
       #87002e 0%,
       #87002e 14%,
       #060606 38%,
       #010101 55%,
       #161616 72%,
       #87002e 86%,
       #87002e 100%);
 }

 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 html {
   scroll-behavior: smooth;
 }

 body {
   font-family: 'Inter', sans-serif;
   background: var(--ink);
   color: var(--paper);
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

 /* ===== TYPE SYSTEM: Inter for body, Urbanist for headings =====
    bootstrap.min.css loads AFTER this file, and its Reboot targets bare
    `body` and `h1..h6` at the same specificity as the rules above — so it
    was winning on source order and rendering the page in Bootstrap's system
    stack at weight 500. Re-point Bootstrap's own variables, then restate the
    rules one level higher (`html:root` / `html body` / `html h1`) so they win. */
 html:root {
   --bs-font-sans-serif: 'Inter', sans-serif;
   --bs-body-font-family: 'Inter', sans-serif;
   --bs-body-color: var(--paper);
   --bs-body-bg: var(--ink);
 }

 html body {
   font-family: 'Inter', sans-serif;
   background-color: var(--ink);
   color: var(--paper);
 }

 html h1,
 html h2,
 html h3,
 html h4,
 html h5,
 html h6 {
   font-family: 'Urbanist', sans-serif;
   font-weight: 800;
   letter-spacing: -0.01em;
 }

 /* ===== HERO BACKGROUND ===== */
 /* hero + about share ONE painted gradient across their combined height,
    so the diagonal runs continuously and there is no seam between them */
 .hero-about {
   position: relative;
   background: var(--about-bg);
 }

 .hero {
   position: relative;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   background: transparent;
   overflow: hidden;
 }

 /* the video dissolves into the shared backdrop toward the bottom,
    so the hero flows straight into the about section */
 .bg-video,
 .bg-video-overlay {
   -webkit-mask-image: linear-gradient(180deg,
       #000 0%,
       #000 64%,
       rgba(0, 0, 0, 0.55) 82%,
       rgba(0, 0, 0, 0.18) 93%,
       transparent 100%);
   mask-image: linear-gradient(180deg,
       #000 0%,
       #000 64%,
       rgba(0, 0, 0, 0.55) 82%,
       rgba(0, 0, 0, 0.18) 93%,
       transparent 100%);
 }

 .bg-video {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 0;
   filter: saturate(1.05) contrast(1.03);
 }

 .bg-video-overlay {
   position: absolute;
   inset: 0;
   z-index: 1;
   background:
     linear-gradient(100deg, rgba(8, 6, 10, 0.92) 0%, rgba(20, 6, 12, 0.72) 30%, rgba(60, 10, 25, 0.35) 55%, rgba(8, 6, 10, 0.55) 100%),
     linear-gradient(0deg, rgba(6, 5, 9, 0.55) 0%, rgba(6, 5, 9, 0) 45%);
   pointer-events: none;
 }

 /* .hero::after {
   content: "CYBER";
   position: absolute;
   top: -3vw;
   left: 0;
   right: 0;
   text-align: center;
   font-family: 'Urbanist', sans-serif;
   font-weight: 800;
   font-size: min(16vw, 220px);
   color: rgba(255, 255, 255, 0.045);
   letter-spacing: 4px;
   white-space: nowrap;
   pointer-events: none;
   z-index: 1;
 } */

 /* ===== NAVBAR ===== */
 /* On the homepage the header floats over the hero with no background,
    and only gains one once the page is scrolled. Scoped to `.hero .navbar`
    so the form pages (no hero, own black header) keep their current look. */
 .hero .navbar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 30;
   background: transparent;
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
   border-bottom-color: transparent;
   box-shadow: none;
   transition:
     background 0.35s ease,
     -webkit-backdrop-filter 0.35s ease,
     backdrop-filter 0.35s ease,
     border-color 0.35s ease,
     box-shadow 0.35s ease,
     padding 0.35s ease;
 }

 .hero .navbar.scrolled {
   background: rgba(6, 6, 10, 0.82);
   -webkit-backdrop-filter: blur(14px) saturate(1.2);
   backdrop-filter: blur(14px) saturate(1.2);
   border-bottom-color: rgba(255, 255, 255, 0.08);
   box-shadow: 0 12px 34px -20px rgba(0, 0, 0, 0.95);
   padding-top: 13px;
   padding-bottom: 13px;
 }

 /* the header is out of flow now — reserve the space it used to occupy */
 .hero {
   padding-top: var(--nav-h);
 }

 @media (max-width: 640px) {
   :root {
     --nav-h: 80px;
   }
 }

 /* Typed as `nav.navbar` (0,1,1) on purpose: Bootstrap ships its own
    `.navbar { flex-wrap: wrap }` at (0,1,0) and loads after this file, so a
    plain `.navbar` rule here loses the tie and the row keeps wrapping. */
 nav.navbar {
   position: relative;
   z-index: 20;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 22px clamp(20px, 3vw, 56px);
   background: rgba(6, 6, 10, 0.55);
   backdrop-filter: blur(6px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   /* one unbroken row — brand, menu and CTA stay on the same line.
      Below the drawer breakpoint the menu becomes a panel, so this
      never has to squeeze the full link list into a narrow viewport. */
   flex-wrap: nowrap;
   gap: clamp(12px, 1.4vw, 20px);
 }

 .brand {
   display: flex;
   align-items: center;
   flex-shrink: 0;
   gap: 14px;
 }

 .brand-mark {
   width: 38px;
   height: 38px;
   background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   box-shadow: 0 4px 14px rgba(200, 30, 58, 0.4);
 }

 .brand-mark svg {
   width: 20px;
   height: 20px;
 }

 .brand-name {
   font-family: 'Urbanist', sans-serif;
   font-weight: 800;
   font-size: 22px;
   letter-spacing: 0.5px;
 }

 .brand-name span {
   color: var(--crimson);
 }

 .brand-name img {
   width: 100px;
   height: auto;
 }

 .brand-date img {
   width: 30px;
   height: auto;
 }

 /* menu-only "Express Interest": on phones the header CTA is hidden to make
    room for the logos + hamburger, so it moves into the drawer instead */
 .nav-links li.nav-drawer-cta {
   display: none;
 }

 .brand-date {
   display: flex;
   align-items: center;
   gap: 10px;
   padding-left: 16px;
   border-left: 1px solid rgba(255, 255, 255, 0.2);
   font-size: 12px;
   line-height: 1.25;
   color: var(--muted);
   font-weight: 600;
 }

 .brand-date b {
   font-size: 22px;
   color: var(--paper);
   font-family: 'Urbanist', sans-serif;
   font-weight: 800;
 }

 .brand-date sup {
   font-size: 11px;
 }

 .nav-links {
   display: flex;
   align-items: center;
   /* push the menu over to the right so it sits beside the CTA,
      leaving the brand alone on the left */
   margin-left: auto;
   gap: clamp(14px, 1.4vw, 24px);
   list-style: none;
   font-family: 'Inter', sans-serif;
   font-size: 13.5px;
   font-weight: 700;
   letter-spacing: 0.4px;
   text-transform: uppercase;
   white-space: nowrap;
   margin-bottom: 0;
 }

 .nav-links>li {
   display: flex;
   align-items: center;
   white-space: nowrap;
 }

 .nav-links a {
   color: var(--paper);
   text-decoration: none;
   opacity: 0.9;
   transition: opacity 0.2s, color 0.2s;
   position: relative;
 }

 .nav-links a:hover {
   color: var(--crimson);
   opacity: 1;
 }

 /* the trigger row: label + chevron share one optical baseline */
 .nav-links li.dropdown>a {
   display: inline-flex;
   align-items: center;
   gap: 7px;
 }

 /* masked SVG chevron — inherits the link colour (incl. crimson on hover)
    and rotates about its true centre, which the old "›" glyph could not */
 .nav-links .chev {
   flex: 0 0 auto;
   width: 10px;
   height: 7px;
   margin-left: 0;
   font-size: 0;
   line-height: 0;
   background-color: currentColor;
   -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
   mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
 }

 .nav-right {
   display: flex;
   align-items: center;
   flex-shrink: 0;
   gap: 14px;
 }

 .welcome {
   font-size: 13px;
   color: var(--muted);
   font-weight: 600;
 }

 .divider-v {
   width: 1px;
   height: 22px;
   background: rgba(255, 255, 255, 0.25);
 }

 .th-badge {
   display: flex;
   align-items: center;
   gap: 6px;
   font-family: 'Urbanist', sans-serif;
   font-weight: 800;
   font-size: 12px;
 }

 .th-badge .flagdot {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: linear-gradient(180deg, #c81e3a 0%, #c81e3a 33%, #fff 33%, #fff 66%, #0d1b4c 66%);
   flex-shrink: 0;
   border: 1px solid rgba(255, 255, 255, 0.4);
 }

 .th-badge .th-text {
   display: flex;
   flex-direction: column;
   line-height: 1.05;
 }

 .th-badge .th-text .top {
   color: var(--crimson);
   font-style: italic;
   font-size: 15px;
 }

 .th-badge .th-text .bottom {
   font-size: 9px;
   letter-spacing: 1px;
   color: var(--muted);
   font-weight: 500;
 }

 /* ===== HAMBURGER (mobile menu toggle) ===== */
 .nav-toggle {
   display: none;
   width: 42px;
   height: 42px;
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.25);
   border-radius: 6px;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 30;
   flex-shrink: 0;
 }

 .nav-toggle span {
   position: relative;
   width: 20px;
   height: 2px;
   background: #fff;
   display: block;
   transition: background 0.2s ease 0.1s;
 }

 .nav-toggle span::before,
 .nav-toggle span::after {
   content: "";
   position: absolute;
   left: 0;
   width: 20px;
   height: 2px;
   background: #fff;
   transition: transform 0.25s ease, top 0.25s ease;
 }

 .nav-toggle span::before {
   top: -6px;
 }

 .nav-toggle span::after {
   top: 6px;
 }

 .nav-toggle.active span {
   background: transparent;
 }

 .nav-toggle.active span::before {
   top: 0;
   transform: rotate(45deg);
 }

 .nav-toggle.active span::after {
   top: 0;
   transform: rotate(-45deg);
 }

 /* ===== RESPONSIVE ===== */
 @media (max-width: 1200px) {
   .badges {
     display: none;
   }

   .navbar {
     position: relative;
   }

   .nav-toggle {
     display: flex;
     order: 3;
   }

   /* On the form pages the header is an in-flow bar, and its backdrop-filter
      turns it into the containing block for the position:fixed drawer — so
      the closed drawer hung off the header's right edge (pages rendered
      ~320px too wide on phones) and opened at the header, not the viewport.
      Those headers are solid black anyway, so the blur buys nothing.
      The z-index lifts the header (and the drawer inside its stacking
      context) above .nav-scrim, which otherwise dimmed the open drawer and
      swallowed taps on its links. */
   body>nav.navbar {
     z-index: 30;
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
   }

   .nav-links {
     display: flex;
     position: fixed;
     margin-left: 0;
     top: 0;
     right: 0;
     height: 100vh;
     width: min(78vw, 320px);
     background: #0b0b10;
     border-left: 1px solid rgba(255, 255, 255, 0.08);
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-start;
     gap: 0;
     padding: 96px 28px 40px;
     transform: translateX(100%);
     transition: transform 0.3s ease;
     z-index: 25;
     overflow-y: auto;
   }

   .nav-links.open {
     transform: translateX(0);
   }

   .nav-links li {
     width: 100%;
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   }

   .nav-links a {
     display: block;
     padding: 16px 0;
     font-size: 15px;
   }

   .nav-scrim {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.55);
     z-index: 22;
   }

   .nav-scrim.open {
     display: block;
   }

   .nav-right {
     order: 2;
     margin-left: auto;
     margin-right: 8px;
   }

   .welcome {
     display: none;
   }

   /* in the drawer the chevron sits at the far right of its row */
   .nav-links li.dropdown>a {
     display: flex;
     justify-content: space-between;
     width: 100%;
     padding: 16px 0;
   }

   .nav-links li.dropdown>a .chev {
     width: 12px;
     height: 8px;
   }

   /* inside the drawer the submenu stacks inline instead of floating,
      and opens on tap (.open) rather than hover, which touch has no way to fire */
   .nav-links li.dropdown::after {
     display: none !important;
   }

   .nav-links .submenu {
     position: static;
     min-width: 0;
     width: 100%;
     max-height: 0;
     padding: 0;
     border: 0;
     border-radius: 0;
     box-shadow: none;
     background-color: rgba(255, 255, 255, 0.04);
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
     overflow: hidden;
     visibility: visible;
     opacity: 1;
     transform: none;
     pointer-events: auto;
     transition: max-height 0.32s ease, padding 0.32s ease;
   }

   .nav-links li.dropdown:hover > .submenu,
   .nav-links li.dropdown:focus-within > .submenu {
     max-height: 0;
     padding: 0;
   }

   .nav-links li.dropdown.open > .submenu {
     max-height: 52vh;
     padding: 4px 0;
     overflow-y: auto;
   }

   .nav-links .submenu li a {
     padding: 12px 0 12px 16px;
     font-size: 13.5px;
     white-space: normal;
   }
 }

 @media (max-width: 640px) {
   nav.navbar {
     padding: 14px 16px;
   }

   .brand {
     gap: 10px;
   }

   .brand-name img {
     width: 78px;
   }

   .brand-date img {
     width: 24px;
   }

   .brand-date {
     padding-left: 10px;
   }

   .nav-right {
     display: none;
   }

   .nav-toggle {
     margin-left: auto;
   }

   .nav-links li.nav-drawer-cta {
     display: block;
     margin-top: 24px;
     border-bottom: 0;
   }

   .nav-links li.nav-drawer-cta a {
     padding: 14px 20px;
     border-radius: 999px;
     text-align: center;
     font-size: 14px;
     letter-spacing: 0.08em;
     color: #fff;
     opacity: 1;
     background: linear-gradient(135deg, #e42a4d 0%, var(--crimson) 50%, var(--crimson-dark) 100%);
     box-shadow: 0 12px 26px -12px rgba(200, 30, 58, 0.9);
   }

   .brand-name {
     font-size: 18px;
   }

   .hero-content {
     padding: 40px 20px 60px;
   }

   .tagline {
     gap: 16px;
     font-size: 16px;
   }

   .th-badge .th-text .top {
     font-size: 12px;
   }

   .th-badge .th-text .bottom {
     display: none;
   }
 }

 /* ===== HERO CONTENT ===== */
 .hero-content {
   position: relative;
   z-index: 15;
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 56px clamp(20px, 4vw, 64px) 80px;
   max-width: 1000px;
 }

 .patronage-row {
   display: flex;
   align-items: center;
   gap: 0;
   margin-bottom: 22px;
   flex-wrap: wrap;
 }

 .patronage-tag {
   background: var(--crimson);
   color: #fff;
   font-size: 12px;
   font-weight: 800;
   letter-spacing: 0.8px;
   padding: 9px 16px;
   text-transform: uppercase;
 }

 .ncsa-box {
   background: #fff;
   padding: 10px 18px;
   display: flex;
   align-items: center;
   gap: 10px;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
 }

 .ncsa-mark {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background: linear-gradient(135deg, #1f3a8a, #c81e3a);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-family: 'Urbanist', sans-serif;
   font-weight: 800;
   font-size: 13px;
   flex-shrink: 0;
 }

 .ncsa-text {
   color: #111;
   line-height: 1.15;
 }

 .ncsa-text .en {
   font-weight: 800;
   font-size: 14px;
   letter-spacing: 0.5px;
 }

 .ncsa-text .th {
   font-size: 9px;
   color: #666;
   font-weight: 500;
 }

 .event-meta {
   font-size: 15px;
   font-weight: 800;
   letter-spacing: 0.4px;
   color: var(--paper);
   margin-bottom: 18px;
   text-transform: uppercase;
 }

 .event-meta sup {
   font-size: 10px;
 }

 h1.headline {
   font-family: 'Urbanist', sans-serif;
   font-weight: 800;
   font-size: clamp(30px, 4.2vw, 54px);
   line-height: 1.06;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   margin-bottom: 40px;
   text-wrap: balance;
   filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.55));
 }

 .wrp-journeyimg img {
   width: 100%;
 }

 /* ===== JOURNEY STRIP — full-bleed, edge to edge =====
   The section sits inside a bootstrap .container/.row, which caps it at the
   grid width and adds gutters. Overridden here by ID so it spans the viewport. */
 section#mumbaijounery .container {
   width: 100%;
   max-width: 100%;
   padding-left: 0;
   padding-right: 0;
 }

 section#mumbaijounery .row {
   --bs-gutter-x: 0;
   margin-left: 0;
   margin-right: 0;
 }

 section#mumbaijounery .wrp-journeyimg {
   padding: 0px;
   width: 100%;
   flex: 0 0 100%;
   max-width: 100%;
 }

 section#mumbaijounery .wrp-journeyimg img {
   display: block;
   width: 100%;
   height: auto;
 }

 /* the timeline's captions are too small to read squeezed to phone width —
    keep the artwork legible and let it pan sideways instead */
 @media (max-width: 767px) {
   section#mumbaijounery .wrp-journeyimg {
     overflow-x: auto;
     overscroll-behavior-x: contain;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: thin;
   }

   section#mumbaijounery .wrp-journeyimg img {
     width: 820px;
     max-width: none;
   }
 }

 h1.headline .outline {
   display: inline-block;
   font-weight: 500;
   font-size: clamp(18px, 2.1vw, 28px);
   letter-spacing: 0.14em;
   color: rgba(255, 255, 255, 0.92);
 }

 h1.headline .solid {
   display: inline-block;
   margin-top: 10px;
   color: #fff;
   font-size: clamp(32px, 5.6vw, 68px);
   font-weight: 900;
   line-height: 1.12;
   letter-spacing: -0.005em;
   padding: 0.04em 0.06em 0.04em 0;
 }

 /* white → champagne → gold gradient across "NBFC CONGREGATION".
   Guarded: browsers without background-clip:text keep the solid white above. */
 @supports (-webkit-background-clip: text) or (background-clip: text) {
   h1.headline .solid {
     background-image: linear-gradient(96deg,
         #ffffff 0%,
         #ffffff 14%,
         #ffeac4 38%,
         #d9a94a 60%,
         #f3d698 78%,
         #ffffff 100%);
     background-size: 200% 100%;
     background-position: 0% 50%;
     background-repeat: no-repeat;
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     color: transparent;
   }
 }

 /* keep the kicker + its accent tick on one line on small screens */
 @media (max-width: 640px) {
   h1.headline .outline {
     font-size: 15px;
     letter-spacing: 0.08em;
   }

   h1.headline .outline::before {
     width: 22px;
     margin-right: 10px;
   }

   h1.headline .solid {
     font-size: clamp(30px, 8.4vw, 42px);
   }
 }

 .subline {
   font-size: clamp(16px, 2vw, 16px);
   font-weight: 700;
   text-transform: uppercase;
   line-height: 1.4;
   margin-bottom: 26px;
   color: white;
 }

 .subline .accent {
   color: var(--crimson);
 }

 .tagline {
   display: flex;
   gap: 28px;
   font-family: 'Urbanist', sans-serif;
   font-weight: 800;
   font-size: clamp(16px, 2.2vw, 24px);
   letter-spacing: 1px;
   margin-bottom: 38px;
   flex-wrap: wrap;
   color: white;
 }

 .cta-row {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
   align-items: center;
 }

 /* =====================================================================
   BUTTON SYSTEM — pill + arrow chip, arc-rise fill on hover
   NOTE: bootstrap.min.css loads AFTER this file and ships its own `.btn`,
   so the base rules are typed as a.btn / button.btn to outrank it.
   ===================================================================== */
 a.btn,
 button.btn {
   --btn-chip: 38px;
   --btn-icon: 15px;
   --btn-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h14.5M12.5 5.8l6.5 6.2-6.5 6.2' fill='none' stroke='%23c81e3a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   position: relative;
   isolation: isolate;
   overflow: hidden;
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   min-height: 52px;
   font-family: 'Inter', sans-serif;
   font-weight: 800;
   font-size: 12.5px;
   letter-spacing: 0.12em;
   line-height: 1.2;
   text-transform: uppercase;
   text-align: left;
   text-decoration: none;
   padding: 7px 7px 7px 26px;
   border: 1.5px solid transparent;
   border-radius: 999px;
   cursor: pointer;
   transition:
     transform 0.38s cubic-bezier(0.22, 0.8, 0.28, 1),
     box-shadow 0.38s cubic-bezier(0.22, 0.8, 0.28, 1),
     border-color 0.3s ease,
     color 0.3s ease;
 }

 /* the fill that swells up from the bottom on hover */
 a.btn::before,
 button.btn::before {
   content: "";
   position: absolute;
   left: -6%;
   bottom: 0;
   width: 112%;
   height: 160%;
   z-index: -1;
   border-radius: 50% 50% 0 0;
   transform: translateY(100%);
   transition:
     transform 0.55s cubic-bezier(0.62, 0.05, 0.3, 1),
     border-radius 0.55s cubic-bezier(0.62, 0.05, 0.3, 1);
   pointer-events: none;
 }

 a.btn:hover::before,
 a.btn:focus-visible::before,
 button.btn:hover::before,
 button.btn:focus-visible::before {
   transform: translateY(0);
   border-radius: 0;
 }

 /* circular arrow chip — two arrows swap places on hover */
 a.btn::after,
 button.btn::after {
   content: "";
   flex: 0 0 auto;
   width: var(--btn-chip);
   height: var(--btn-chip);
   border-radius: 50%;
   background-color: #fff;
   background-image: var(--btn-arrow), var(--btn-arrow);
   background-repeat: no-repeat, no-repeat;
   background-size: var(--btn-icon) var(--btn-icon), var(--btn-icon) var(--btn-icon);
   background-position: 50% 50%, -100% 50%;
   transition:
     background-position 0.5s cubic-bezier(0.62, 0.05, 0.3, 1),
     transform 0.4s cubic-bezier(0.22, 0.8, 0.28, 1),
     box-shadow 0.4s ease;
 }

 a.btn:hover::after,
 a.btn:focus-visible::after,
 button.btn:hover::after,
 button.btn:focus-visible::after {
   background-position: 200% 50%, 50% 50%;
   transform: scale(1.07);
   box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.6);
 }

 a.btn:focus-visible,
 button.btn:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px rgba(11, 11, 16, 0.9), 0 0 0 5px var(--crimson);
 }

 .btn:active,
 .btn.btn-fill:active,
 .btn.btn-outline:active {
   transform: translateY(-1px) scale(0.985);
 }

 /* --- filled: crimson at rest, ink on hover --- */
 .btn.btn-fill {
   background:
     linear-gradient(135deg, #e42a4d 0%, var(--crimson) 46%, var(--crimson-dark) 100%);
   color: #fff;
   border-color: rgba(255, 255, 255, 0.14);
   box-shadow:
     0 12px 30px -14px rgba(200, 30, 58, 0.9),
     inset 0 1px 0 rgba(255, 255, 255, 0.28);
 }

 .btn.btn-fill::before {
   background: linear-gradient(135deg, #3a1420 0%, #140a11 100%);
 }

 .btn.btn-fill:hover {
   transform: translateY(-3px);
   border-color: rgba(200, 30, 58, 0.9);
   box-shadow:
     0 20px 40px -16px rgba(200, 30, 58, 0.8),
     0 0 0 1px rgba(200, 30, 58, 0.35),
     inset 0 1px 0 rgba(255, 255, 255, 0.16);
 }

 /* --- outline / glass: hairline at rest, crimson on hover --- */
 .btn.btn-outline {
   background: rgba(255, 255, 255, 0.05);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   color: #fff;
   border-color: rgba(200, 30, 58, 0.85);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.14),
     0 6px 18px -12px rgba(0, 0, 0, 0.8);
 }

 .btn.btn-outline::before {
   background: linear-gradient(135deg, #e42a4d 0%, var(--crimson-dark) 100%);
 }

 .btn.btn-outline:hover {
   transform: translateY(-3px);
   border-color: var(--crimson);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.2),
     0 18px 34px -16px rgba(200, 30, 58, 0.85);
 }

 /* Bootstrap loads after this file and ships `.btn:hover { color: var(--bs-btn-hover-color) }`,
    which resolves to near-black and ties our `.btn.btn-fill` on specificity — so on hover it
    won on source order and the label went dark-on-dark. Pin label + surface for every state. */
 a.btn.btn-fill,
 a.btn.btn-fill:hover,
 a.btn.btn-fill:focus,
 a.btn.btn-fill:focus-visible,
 a.btn.btn-fill:active,
 button.btn.btn-fill,
 button.btn.btn-fill:hover,
 button.btn.btn-fill:focus,
 button.btn.btn-fill:focus-visible,
 button.btn.btn-fill:active {
   color: #fff;
   background-color: transparent;
   background-image: linear-gradient(135deg, #e42a4d 0%, var(--crimson) 46%, var(--crimson-dark) 100%);
 }

 a.btn.btn-outline,
 a.btn.btn-outline:hover,
 a.btn.btn-outline:focus,
 a.btn.btn-outline:focus-visible,
 a.btn.btn-outline:active,
 button.btn.btn-outline,
 button.btn.btn-outline:hover,
 button.btn.btn-outline:focus,
 button.btn.btn-outline:focus-visible,
 button.btn.btn-outline:active {
   color: #fff;
   background-color: rgba(255, 255, 255, 0.05);
   background-image: none;
 }

 /* --- navbar size --- */
 .nav-right .btn {
   --btn-chip: 30px;
   --btn-icon: 12px;
   min-height: 42px;
   padding: 6px 6px 6px 20px;
   gap: 14px;
   font-size: 11.5px;
   letter-spacing: 0.1em;
 }

 @media (max-width: 560px) {

   a.btn,
   button.btn {
     --btn-chip: 32px;
     --btn-icon: 13px;
     min-height: 46px;
     padding: 6px 6px 6px 20px;
     gap: 14px;
     font-size: 11.5px;
     letter-spacing: 0.08em;
   }

   .nav-right .btn {
     --btn-chip: 28px;
     --btn-icon: 11px;
     min-height: 40px;
     font-size: 11px;
   }
 }

 @media (prefers-reduced-motion: reduce) {

   a.btn,
   a.btn::before,
   a.btn::after,
   button.btn,
   button.btn::before,
   button.btn::after {
     transition: none;
   }

   .btn:hover {
     transform: none;
   }

   .btn:hover::after,
   .btn:focus-visible::after {
     transform: none;
   }
 }

 /* ===== RIGHT BADGES ===== */
 .badges {
   position: absolute;
   top: 130px;
   right: clamp(20px, 5vw, 70px);
   z-index: 16;
   display: flex;
   align-items: flex-start;
   gap: 22px;
 }

 .medal {
   width: 120px;
   height: 150px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
 }

 .medal svg {
   width: 100%;
   height: 100%;
 }

 .awards-text {
   font-family: 'Brush Script MT', cursive;
   color: var(--gold);
   font-size: 26px;
   line-height: 1.15;
   text-align: center;
   font-style: italic;
   max-width: 110px;
 }

 /* ===== WHATSAPP FAB ===== */
 .fab {
   position: fixed;
   bottom: 26px;
   right: 26px;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: #25D366;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
   z-index: 50;
   cursor: pointer;
 }

 .fab svg {
   width: 28px;
   height: 28px;
   fill: #fff;
 }

 .patronage-row img {
   width: 54%;
 }


 /* ---------- SPEAKER CARD: photo on top, name/role/company beneath.
    No hover state — the old flip-to-bio panel and typewriter are gone. ---------- */
 .speaker-card {
   position: relative;
   width: 100%;
   display: flex;
   flex-direction: column;
   border-radius: 18px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.1);
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 30%),
     linear-gradient(165deg, #1a0f13 0%, #0d0709 100%);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.14),
     0 22px 44px -26px rgba(0, 0, 0, 0.95);
 }

 .speaker-photo-wrap {
   position: relative;
   aspect-ratio: 1 / 1.06;
   overflow: hidden;
   background: #f2ece6;
 }

 .speaker-photo {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top center;
 }

 /* soft seam so the photo settles into the panel instead of ending on a hard edge */
 .speaker-photo-wrap::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 26%;
   background: linear-gradient(180deg, rgba(13, 7, 9, 0) 0%, rgba(13, 7, 9, 0.55) 100%);
   pointer-events: none;
 }

 .speaker-meta {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 4px;
   padding: 16px 18px 18px;
   border-top: 1px solid rgba(255, 255, 255, 0.06);
 }

 .speaker-name {
   font-family: 'Urbanist', sans-serif;
   font-size: 18px;
   font-weight: 800;
   line-height: 1.2;
   color: #ffffff;
   margin: 0;
 }

 .speaker-role {
   font-family: 'Inter', sans-serif;
   font-size: 12.5px;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.66);
   line-height: 1.4;
   margin: 0 0 8px;
 }

 .speaker-company-badge {
   display: inline-block;
   max-width: 100%;
   font-family: 'Inter', sans-serif;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.2px;
   line-height: 1.35;
   color: #ff7a92;
   background: rgba(200, 30, 58, 0.14);
   border: 1px solid rgba(200, 30, 58, 0.4);
   padding: 4px 10px;
   border-radius: 999px;
 }


 .section-heading {
   text-align: center;
   max-width: 720px;
   margin: 0 auto 40px;
 }

 .section-eyebrow {
   font-family: 'JetBrains Mono', 'Courier New', monospace;
   font-size: 12.5px;
   font-weight: 600;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: #e8542f;
   margin: 0 0 10px;
 }

 .section-title {
   font-size: 34px;
   font-weight: 800;
   color: #f4ede3;
   margin: 0 0 12px;
   line-height: 1.2;
 }

 .section-title span {
   color: #c81e3a;
 }

 /* =====================================================================
    PREVIOUS EDITION SPEAKERS — photo backdrop + carousel
    ===================================================================== */
 section#speakers {
   position: relative;
   isolation: isolate;
   background: #050304;
   padding: 84px 54px 72px;
   overflow: hidden;
 }

 /* stage photo, heavily darkened + slightly blurred so it reads as atmosphere
    and never competes with the portraits sitting on top of it */
 .spk-bg {
   position: absolute;
   inset: -24px;
   /* the inset overshoot hides the blur's soft edges */
   z-index: -1;
   background-image: url('https://events.eletsonline.com/nbfc100/21st-edition/assets/images/gall/img-11.webp');
   background-size: cover;
   background-position: center 30%;
   filter: blur(3px) saturate(0.7) brightness(0.55);
   pointer-events: none;
 }

 .spk-bg::after {
   content: "";
   position: absolute;
   inset: 0;
   background:
     linear-gradient(180deg, rgba(5, 3, 4, 0.94) 0%, rgba(5, 3, 4, 0.72) 30%, rgba(5, 3, 4, 0.74) 70%, rgba(5, 3, 4, 0.96) 100%),
     radial-gradient(70% 60% at 50% 50%, rgba(135, 0, 46, 0.32) 0%, rgba(135, 0, 46, 0) 70%);
 }

 section#speakers .section-heading {
   position: relative;
   z-index: 1;
 }

 /* --- carousel shell --- */
 .spk-carousel {
   --spk-per-view: 4;
   --spk-gutter: 11px;
   position: relative;
   z-index: 1;
   max-width: 1440px;
   margin: 0 auto;
   padding: 0 62px;
 }

 .spk-viewport {
   overflow: hidden;
   /* room for the card lift + shadow so hover isn't clipped */
   padding: 14px 0 22px;
   margin: -14px 0 -22px;
 }

 .spk-track {
   display: flex;
   margin: 0 calc(var(--spk-gutter) * -1);
   transition: transform .6s cubic-bezier(.22, .8, .28, 1);
   will-change: transform;
 }

 .spk-slide {
   flex: 0 0 calc(100% / var(--spk-per-view));
   max-width: calc(100% / var(--spk-per-view));
   padding: 0 var(--spk-gutter);
   box-sizing: border-box;
 }

 /* --- prev / next --- */
 .spk-nav {
   position: absolute;
   top: 50%;
   z-index: 3;
   width: 48px;
   height: 48px;
   margin-top: -24px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, 0.22);
   background: rgba(255, 255, 255, 0.06);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   color: #fff;
   font-size: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.16),
     0 8px 20px -12px rgba(0, 0, 0, 0.9);
   transition:
     background .3s ease,
     border-color .3s ease,
     transform .3s cubic-bezier(.22, .8, .28, 1),
     box-shadow .3s ease,
     opacity .3s ease;
 }

 .spk-prev {
   left: 0;
 }

 .spk-next {
   right: 0;
 }

 .spk-nav:hover {
   background: linear-gradient(135deg, #e42a4d 0%, var(--crimson) 50%, var(--crimson-dark) 100%);
   border-color: rgba(255, 255, 255, 0.3);
   transform: scale(1.09);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.35),
     0 14px 28px -12px rgba(200, 30, 58, 0.95);
 }

 .spk-nav:active {
   transform: scale(1.02);
 }

 .spk-nav:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px #050304, 0 0 0 5px var(--crimson);
 }

 .spk-nav[disabled] {
   opacity: .28;
   cursor: default;
   pointer-events: none;
 }

 /* --- dots --- */
 .spk-dots {
   display: flex;
   justify-content: center;
   gap: 8px;
   margin-top: 30px;
 }

 .spk-dot {
   width: 8px;
   height: 8px;
   padding: 0;
   border: 0;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.22);
   cursor: pointer;
   transition: width .35s cubic-bezier(.22, .8, .28, 1), background .3s ease;
 }

 .spk-dot:hover {
   background: rgba(255, 255, 255, 0.5);
 }

 .spk-dot.is-active {
   width: 26px;
   background: linear-gradient(90deg, var(--crimson), #ff6d86);
   box-shadow: 0 0 10px rgba(200, 30, 58, 0.6);
 }

 .spk-dot:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px #050304, 0 0 0 5px var(--crimson);
 }

 @media (max-width: 1199px) {
   .spk-carousel {
     --spk-per-view: 3;
   }
 }

 @media (max-width: 899px) {
   .spk-carousel {
     --spk-per-view: 2;
     padding: 0 52px;
   }
 }

 @media (max-width: 599px) {
   .spk-carousel {
     --spk-per-view: 1;
     padding: 0;
   }

   /* arrows would sit on the card at this width — dots + swipe do the job */
   .spk-nav {
     display: none;
   }
 }

 @media (prefers-reduced-motion: reduce) {

   .spk-track,
   .spk-nav,
   .spk-dot {
     transition: none;
   }
 }

 .section-subtitle {
   font-size: 14.5px;
   color: #b8afa4;
   line-height: 1.6;
   margin: 0;
 }

 /* =====================================================================
    TESTIMONIALS — "What did the leaders say?"
    Horizontal card carousel (2 per view, 1 on phones). Same shell and controls
    as the speakers carousel; per-view is read from --testi-per-view.
    ===================================================================== */
 .testi-section {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   /* clip-path (unlike overflow) also clips position:fixed descendants, so the
      fixed backdrop below only shows through this section's own box */
   clip-path: inset(0);
   padding: 96px 54px 88px;
   color: #f4ede3;
   background: #050304;
 }

 /* Mumbai sea front, pinned to the viewport while the section scrolls past.
    A fixed layer instead of background-attachment: fixed, which iOS Safari
    ignores (it renders the photo scrolling and heavily zoomed). */
 .testi-bg {
   position: fixed;
   inset: 0;
   z-index: -2;
   background: url('https://events.eletsonline.com/nbfc100/21st-edition/assets/images/mumbai2.webp') center 60% / cover no-repeat;
   pointer-events: none;
 }

 /* darkening + brand tint over the photo so the heading and quotes stay legible */
 .testi-section::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background:
     radial-gradient(55% 60% at 8% 0%, rgba(135, 0, 46, 0.45) 0%, rgba(135, 0, 46, 0) 70%),
     radial-gradient(45% 55% at 100% 100%, rgba(200, 30, 58, 0.24) 0%, rgba(200, 30, 58, 0) 70%),
     linear-gradient(180deg, rgba(5, 3, 4, 0.84) 0%, rgba(5, 3, 4, 0.48) 42%, rgba(5, 3, 4, 0.52) 72%, rgba(5, 3, 4, 0.9) 100%);
   pointer-events: none;
 }

 .testi-head {
   max-width: 720px;
   margin: 0 auto 48px;
   text-align: center;
 }

 .testi-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 14px;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.24em;
   text-transform: uppercase;
   color: var(--gold);
 }

 .testi-eyebrow::before,
 .testi-eyebrow::after {
   content: "";
   width: 26px;
   height: 1px;
   background: currentColor;
   opacity: 0.6;
 }

 .testi-head .mumbai-feature-heading {
   margin-bottom: 14px;
   text-wrap: balance;
 }

 .testi-sub {
   margin: 0 auto;
   max-width: 52ch;
   font-size: 16px;
   line-height: 1.65;
   color: rgba(255, 255, 255, 0.66);
 }

 /* --- carousel shell --- */
 .testi-carousel {
   --testi-per-view: 2;
   --testi-gutter: 14px;
   max-width: 1180px;
   margin: 0 auto;
 }

 .testi-viewport {
   overflow: hidden;
   /* room for the hover lift + shadow so neither is clipped */
   padding: 12px 0 28px;
   margin: -12px 0 -28px;
 }

 .testi-track {
   display: flex;
   margin: 0 calc(var(--testi-gutter) * -1);
   transition: transform .6s cubic-bezier(.22, .8, .28, 1);
   will-change: transform;
 }

 .testi-slide {
   display: flex;
   flex: 0 0 calc(100% / var(--testi-per-view));
   max-width: calc(100% / var(--testi-per-view));
   padding: 0 var(--testi-gutter);
 }

 /* --- card --- */
 .testi-card {
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
   margin: 0;
   padding: 40px 42px 34px;
   border-radius: 24px;
   /* white frosted glass over the sea-front photo. brightness() in the
      backdrop-filter dims what shows through, so white copy keeps its
      contrast even where the spray behind the card is bright. */
   border: 1px solid rgba(255, 255, 255, 0.42);
   background:
     linear-gradient(135deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.16) 55%, rgba(255, 255, 255, 0.22) 100%);
   -webkit-backdrop-filter: blur(22px) saturate(1.5) brightness(0.8);
   backdrop-filter: blur(22px) saturate(1.5) brightness(0.8);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.5),
     inset 0 -1px 0 rgba(255, 255, 255, 0.08),
     0 30px 60px -32px rgba(0, 0, 0, 0.85);
   transition:
     transform .45s cubic-bezier(.22, .8, .28, 1),
     border-color .35s ease,
     box-shadow .35s ease;
 }

 /* crimson hairline along the top edge */
 .testi-card::before {
   content: "";
   position: absolute;
   top: -1px;
   left: 42px;
   width: 64px;
   height: 2px;
   border-radius: 999px;
   background: linear-gradient(90deg, var(--crimson), var(--gold));
 }

 .testi-card:hover {
   transform: translateY(-6px);
   border-color: rgba(255, 255, 255, 0.5);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.6),
     inset 0 -1px 0 rgba(255, 255, 255, 0.1),
     0 36px 64px -30px rgba(0, 0, 0, 0.9);
 }

 .testi-mark {
   width: 40px;
   height: auto;
   margin-bottom: 22px;
   fill: #ff4d6d;
   filter: drop-shadow(0 4px 10px rgba(200, 30, 58, 0.45));
 }

 .testi-quote {
   flex: 1;
   margin: 0 0 26px;
 }

 .testi-quote p {
   margin: 0;
   font-size: 17.5px;
   line-height: 1.72;
   color: #ffffff;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
 }

 .testi-person {
   display: flex;
   align-items: center;
   gap: 14px;
   padding-top: 22px;
   border-top: 1px solid rgba(255, 255, 255, 0.22);
 }

 .testi-avatar {
   flex: 0 0 auto;
   width: 54px;
   height: 54px;
   border-radius: 50%;
   object-fit: cover;
   object-position: top center;
   background: #f2ece6;
   border: 2px solid rgba(255, 255, 255, 0.9);
   box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16);
 }

 .testi-meta {
   display: flex;
   flex-direction: column;
   min-width: 0;
   gap: 2px;
 }

 .testi-name {
   font-family: 'Urbanist', sans-serif;
   font-size: 17px;
   font-weight: 800;
   line-height: 1.25;
   color: #ffffff;
 }

 .testi-role {
   font-size: 13px;
   line-height: 1.4;
   color: rgba(255, 255, 255, 0.8);
 }

 .testi-company {
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: #ffc2cd;
 }

 /* --- controls: prev · dots · next, one row under the cards --- */
 .testi-controls {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 22px;
   margin-top: 40px;
 }

 .testi-controls.is-static {
   display: none;
 }

 .testi-nav {
   width: 46px;
   height: 46px;
   flex: 0 0 auto;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, 0.22);
   background: rgba(255, 255, 255, 0.06);
   color: #fff;
   font-size: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.16),
     0 8px 20px -12px rgba(0, 0, 0, 0.9);
   transition:
     background .3s ease,
     border-color .3s ease,
     transform .3s cubic-bezier(.22, .8, .28, 1),
     box-shadow .3s ease;
 }

 .testi-nav:hover {
   background: linear-gradient(135deg, #e42a4d 0%, var(--crimson) 50%, var(--crimson-dark) 100%);
   border-color: rgba(255, 255, 255, 0.3);
   transform: scale(1.08);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.35),
     0 14px 28px -12px rgba(200, 30, 58, 0.95);
 }

 .testi-nav:active {
   transform: scale(1.02);
 }

 .testi-nav:focus-visible,
 .testi-dot:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px #050304, 0 0 0 5px var(--crimson);
 }

 .testi-dots {
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .testi-dot {
   width: 8px;
   height: 8px;
   padding: 0;
   border: 0;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.22);
   cursor: pointer;
   transition: width .35s cubic-bezier(.22, .8, .28, 1), background .3s ease;
 }

 .testi-dot:hover {
   background: rgba(255, 255, 255, 0.5);
 }

 .testi-dot.is-active {
   width: 26px;
   background: linear-gradient(90deg, var(--crimson), #ff6d86);
   box-shadow: 0 0 10px rgba(200, 30, 58, 0.6);
 }

 @media (max-width: 991px) {
   .testi-section {
     padding: 80px 32px 72px;
   }
 }

 @media (max-width: 699px) {
   .testi-section {
     padding: 64px 16px 60px;
   }

   .testi-head {
     margin-bottom: 32px;
   }

   .testi-sub {
     font-size: 15px;
   }

   .testi-carousel {
     --testi-per-view: 1;
     --testi-gutter: 8px;
   }

   .testi-card {
     padding: 28px 22px 22px;
     border-radius: 20px;
   }

   .testi-card::before {
     left: 22px;
   }

   .testi-card:hover {
     transform: none;
   }

   .testi-mark {
     width: 32px;
     margin-bottom: 16px;
   }

   .testi-quote p {
     font-size: 15.5px;
     line-height: 1.68;
   }

   .testi-controls {
     margin-top: 28px;
     gap: 16px;
   }

   .testi-nav {
     width: 42px;
     height: 42px;
     font-size: 16px;
   }
 }

 @media (prefers-reduced-motion: reduce) {

   .testi-track,
   .testi-card,
   .testi-nav,
   .testi-dot {
     transition: none;
   }

   .testi-card:hover {
     transform: none;
   }
 }

 @media (max-width: 967px) {
   .medal img {
     width: 100%;
     display: none !important;
   }

   .patronage-row img {
     width: 100% !important;
   }

   .leader-card {
     width: 250px !important;
   }

   .wa-desc {
     flex: 1 1 196px !important;
   }

   .leader-info {
     bottom: 32px !important;
     padding: 20px 16px 22px !important;
   }

   .leader-card {
     width: 227px;
     height: 260px;
   }

   .leader-name {
     color: #fff;
     font-size: 44px !important;
   }

   .leader-card {
     width: 240px;
   }

   .leader-info {
     bottom: 13px;
   }

   .wa-section {
     padding: 69px 24px 18px !important;

   }

   .wa-desc {
     flex: 1 1 161px;
   }

   /* per-view count is handled by the .spk-carousel breakpoints; the old
      .col-lg-3 width override is gone with the grid */
   section#speakers {
     padding: 64px 19px 56px;
   }

   .leader-name {
     font-size: 35px;
   }

   section#highlights {
     padding: 51px 0px !important;
   }
 }


 .fs-poster * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 .fs-wrap {
   font-family: 'Inter', sans-serif;
   display: flex;
   justify-content: center;
   background: #0a0a0c;
 }

 .fs-poster {
   width: 100%;
   min-height: 518px;
   text-align: center;
   position: relative;
   overflow: hidden;
   background: linear-gradient(160deg, #87002e 0%, #87002e 14%, #1c1c1f 38%, #17171a 55%, #080809 72%, #87002e 86%, #87002e 100%);
   padding: 34px 32px 26px;
   display: flex;
   flex-direction: column;
   font-family: 'Inter', sans-serif;
 }

 /* faint watermark texture */
 .fs-poster::before {
   content: "";
   position: absolute;
   inset: 0;
   background:
     repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 6px);
   pointer-events: none;
 }

 .fs-brand {
   display: flex;
   align-items: center;
   gap: 8px;
   z-index: 2;
 }

 .fs-brand-mark {
   width: 26px;
   height: 26px;
   border-radius: 6px;
   background: linear-gradient(135deg, var(--fs-blue2), var(--fs-purple1));
   flex: none;
 }

 .fs-brand-name {
   font-size: 14px;
   font-weight: 800;
   color: #fff;
   letter-spacing: 0.3px;
   line-height: 1.1;
 }

 .fs-brand-sub {
   display: block;
   font-size: 8px;
   font-weight: 600;
   letter-spacing: 2px;
   color: rgba(255, 255, 255, 0.55);
 }

 .fs-headline-top {
   font-family: 'Urbanist', sans-serif;
   font-weight: 800;
   font-style: italic;
   font-size: 118px;
   line-height: 0.85;
   color: #fff;
   letter-spacing: -2px;
   text-align: center;
   margin: 6px 0 18px -2px;
   z-index: 2;
   text-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
 }

 :root {
   --fs-blue1: #1e6fe0;
   --fs-blue2: #4fa3f7;
   --fs-orange1: #e0791e;
   --fs-orange2: #f2a03d;
   --fs-black1: #111214;
   --fs-black2: #2b2c30;
   --fs-purple1: #5a2ea6;
   --fs-purple2: #2540c9;
 }

 .fs-subhead {
   color: rgba(255, 255, 255, 0.85);
   font-size: 13.5px;
   font-weight: 600;
   line-height: 1.5;
   max-width: 100%;
   margin: -6px 0 20px 2px;
   z-index: 2;
   text-align: center;
 }

 .fs-cards {
   display: flex;
   flex-direction: column;
   gap: 16px;
   z-index: 2;
   flex: 1;
 }

 .fs-card {
   /* display: flex; */
   /* align-items: stretch; */
   border-radius: 20px;
   overflow: hidden;
   min-height: 268px;
   text-align: left;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
 }

 .fs-card-label {
   /* flex: 0 0 118px; */
   /* display: flex; */
   /* align-items: center; */
   /* justify-content: center; */
   text-align: center;
   font-family: 'Urbanist', sans-serif;
   font-weight: 800;
   font-size: 19px;
   line-height: 1.05;
   color: #fff;
   letter-spacing: 0.5px;
   /* padding: 13px 60px; */
   text-align: left;
 }

 .fs-card-icon {
   flex: 0 0 90px;
   /* display: flex; */
   /* align-items: center; */
   /* justify-content: center; */
   padding-top: 19px;
   padding-bottom: 40px;
 }

 .fs-card-icon svg {
   width: 44px;
   height: 44px;
 }

 .fs-card-body {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 14px 18px 14px 6px;
 }

 .fs-card-eyebrow {
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 2px;
   color: rgba(255, 255, 255, 0.65);
   margin-bottom: 4px;
 }

 .fs-card-title {
   font-size: 16px;
   font-weight: 800;
   color: #fff;
   margin-bottom: 4px;
   letter-spacing: 0.2px;
 }

 .fs-card-desc {
   font-size: 17px;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.88);
   line-height: 1.4;

   text-align: left;
 }

 .fs-card--leadership {
   background-size: cover, cover;
   background-position: center, center;
   padding: 32px;
   background: #000000b8;
 }

 .fs-card--innovation {
   background-color: #c81e3a78;
   /* background-image: linear-gradient(100deg, rgb(26 23 24 / 87%), #FF5722), url(https://nbfc100.eletsonline.com/nbfcmailer/bgwrapleng.webp); */
   background-size: cover, cover;
   background-position: center, center;
   padding: 32px;
 }

 .fs-card--collaboration {
   background-color: #08080957;
   /* background-image: linear-gradient(100deg, rgb(26 23 24 / 87%), #18001c), url(https://nbfc100.eletsonline.com/nbfcmailer/bgwrapleng.webp); */
   background-size: cover, cover;
   background-position: center, center;
   padding: 32px;
 }

 .fs-card--insight {
   background-color: #c81e3a78;
   /* background-image: linear-gradient(100deg, rgb(26 23 24 / 87%), #FF5722), url(https://nbfc100.eletsonline.com/nbfcmailer/bgwrapleng.webp); */
   background-size: cover, cover;
   background-position: center, center;
   padding: 32px;
 }

 /* =====================================================================
    "WHY OUR PLATFORMS ARE DIFFERENT" — card redesign
    Scoped under .fs-grid (0,2,0) so it outranks the older .fs-card rules
    above, which are left in place for the commented-out section that
    still references them.
    ===================================================================== */
 .fs-grid {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 18px;
   width: 100%;
   max-width: 1400px;
   margin: 34px auto 0;
 }

 .fs-grid .fs-card {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 20px;
   min-height: 196px;
   padding: 28px 18px 26px;
   border-radius: 20px;
   text-align: center;
   overflow: hidden;
   /* more translucent than before so the section's maroon shows through —
      the old .92/.96 alphas made the cards read as flat black cut-outs */
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 38%),
     radial-gradient(90% 70% at 50% 110%, rgba(200, 30, 58, 0.22) 0%, rgba(200, 30, 58, 0) 70%),
     linear-gradient(165deg, rgba(28, 16, 21, 0.78) 0%, rgba(10, 6, 9, 0.86) 100%);
   border: 1px solid rgba(255, 255, 255, 0.11);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.18),
     0 26px 46px -28px rgba(0, 0, 0, 0.95);
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   transition:
     transform .38s cubic-bezier(.22, .8, .28, 1),
     box-shadow .38s ease,
     border-color .38s ease;
 }

 /* crimson bloom in the top-right corner, revealed on hover */
 .fs-grid .fs-card::before {
   content: "";
   position: absolute;
   top: -40%;
   right: -30%;
   width: 80%;
   aspect-ratio: 1;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(200, 30, 58, 0.55) 0%, rgba(200, 30, 58, 0) 68%);
   opacity: 0;
   transition: opacity .45s ease;
   pointer-events: none;
 }

 /* accent bar along the bottom edge, grows out from the left on hover */
 .fs-grid .fs-card::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--crimson), #ff6d86 60%, var(--gold));
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .5s cubic-bezier(.22, .8, .28, 1);
 }

 .fs-grid .fs-card:hover {
   transform: translateY(-7px);
   border-color: rgba(200, 30, 58, 0.55);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.22),
     0 34px 56px -26px rgba(0, 0, 0, 0.95),
     0 0 40px -14px rgba(200, 30, 58, 0.6);
 }

 .fs-grid .fs-card:hover::before {
   opacity: 1;
 }

 .fs-grid .fs-card:hover::after {
   transform: scaleX(1);
 }

 .fs-grid .fs-card-top {
   display: flex;
   justify-content: center;
   position: relative;
   z-index: 1;
 }

 /* icon tile — the PNGs are white glyphs on transparent, so they sit on crimson */
 .fs-grid .fs-card-icon {
   flex: 0 0 auto;
   width: 66px;
   height: 66px;
   padding: 0;
   border-radius: 19px;
   display: grid;
   place-items: center;
   background: linear-gradient(145deg, #e42a4d 0%, var(--crimson) 52%, var(--crimson-dark) 100%);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.34),
     inset 0 -2px 0 rgba(0, 0, 0, 0.3),
     0 10px 22px -10px rgba(200, 30, 58, 0.9);
   transition: transform .38s cubic-bezier(.34, 1.4, .64, 1);
 }

 .fs-grid .fs-card-icon img {
   width: 32px;
   height: 32px;
   display: block;
   filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
 }

 .fs-grid .fs-card:hover .fs-card-icon {
   transform: translateY(-2px) scale(1.06) rotate(-4deg);
 }

 .fs-grid .fs-card-label {
   position: relative;
   z-index: 1;
   /* the legacy `.fs-card-label { flex-basis: 92px }` at <=760px would
      otherwise stretch the label and leave dead space under it */
   flex: 0 0 auto;
   margin-top: 0;
   padding-top: 0;
   max-width: 14ch;
   font-family: 'Urbanist', sans-serif;
   font-weight: 800;
   font-size: 17.5px;
   line-height: 1.25;
   letter-spacing: -0.005em;
   color: #fff;
   text-transform: none;
   text-align: center;
   text-wrap: balance;
 }

 /* --- entrance: fade-up stagger, gated so a JS failure leaves cards visible ---
    JS adds .fs-anim to the poster first (this is what hides them), then .fs-in
    on scroll. If JS never runs, .fs-anim is never present and nothing is hidden. */
 .fs-poster.fs-anim .fs-card {
   opacity: 0;
   transform: translateY(22px);
 }

 .fs-poster.fs-anim.fs-in .fs-card {
   opacity: 1;
   transform: none;
   transition:
     opacity .65s cubic-bezier(.22, .8, .28, 1),
     transform .65s cubic-bezier(.22, .8, .28, 1);
 }

 .fs-poster.fs-anim.fs-in .fs-card:nth-child(1) { transition-delay: .05s; }
 .fs-poster.fs-anim.fs-in .fs-card:nth-child(2) { transition-delay: .13s; }
 .fs-poster.fs-anim.fs-in .fs-card:nth-child(3) { transition-delay: .21s; }
 .fs-poster.fs-anim.fs-in .fs-card:nth-child(4) { transition-delay: .29s; }
 .fs-poster.fs-anim.fs-in .fs-card:nth-child(5) { transition-delay: .37s; }
 .fs-poster.fs-anim.fs-in .fs-card:nth-child(6) { transition-delay: .45s; }

 /* once in, hand transform back to the hover lift (no entrance delay on it) */
 .fs-poster.fs-anim.fs-in .fs-card:hover {
   transition-delay: 0s;
 }

 @media (max-width: 1199px) {
   .fs-grid {
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 16px;
   }

   .fs-grid .fs-card {
     min-height: 210px;
   }
 }

 @media (max-width: 700px) {
   .fs-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 14px;
     margin-top: 26px;
   }

   .fs-grid .fs-card {
     min-height: 168px;
     gap: 16px;
     padding: 22px 14px 20px;
   }

   .fs-grid .fs-card-icon {
     width: 56px;
     height: 56px;
     border-radius: 16px;
   }

   .fs-grid .fs-card-icon img {
     width: 27px;
     height: 27px;
   }

   .fs-grid .fs-card-label {
     font-size: 15.5px;
   }
 }

 /* stays two-up on small phones — one per row turned six short labels into
    six full-width, mostly empty cards */
 @media (max-width: 420px) {
   .fs-grid {
     gap: 12px;
   }

   .fs-grid .fs-card {
     min-height: 150px;
     gap: 12px;
     padding: 20px 10px 18px;
   }

   .fs-grid .fs-card-label {
     font-size: 14px;
   }
 }

 @media (prefers-reduced-motion: reduce) {

   .fs-poster.fs-anim .fs-card,
   .fs-poster.fs-anim.fs-in .fs-card {
     opacity: 1;
     transform: none;
     transition: none;
   }

   .fs-grid .fs-card,
   .fs-grid .fs-card::after,
   .fs-grid .fs-card-icon {
     transition: none;
   }
 }

 .fs-headline-bottom {
   font-family: 'Urbanist', sans-serif;
   font-weight: 800;
   font-style: italic;
   font-size: 118px;
   line-height: 0.85;
   color: #fff;
   letter-spacing: -2px;
   text-align: right;
   margin: 22px -4px 0 0;
   z-index: 2;
   text-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
 }

 .fs-date {
   text-align: right;
   color: rgba(255, 255, 255, 0.75);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1.5px;
   margin-top: 4px;
   z-index: 2;
 }

 @media (max-width:760px) {
   .fs-poster {
     width: 100%;
     padding: 24px 20px 20px;
   }

   .fs-headline-top,
   .fs-headline-bottom {
     font-size: 15vw;
   }

   .fs-card-label {
     flex-basis: 92px;
     font-size: 15px;
   }

   .fs-card-icon {
     flex-basis: 64px;
   }

   .fs-card-icon svg {
     width: 32px;
     height: 32px;
   }
 }

 .mw-section * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 .mw-wrap {
   display: flex;
   justify-content: center;
   background: #e9e9e7;
   font-family: 'Inter', sans-serif;
 }

 .mw-section {
   width: 100%;
   min-height: 600px;
   background: #f2f2f0;
   padding: 44px 48px 50px;
   position: relative;
 }

 .mw-heading {
   font-size: 104px;
   font-weight: 700;
   letter-spacing: -3px;
   color: #181818;
   line-height: 0.9;
   margin-bottom: 22px;
 }

 .mw-badge {
   display: inline-block;
   border: 1.5px solid #181818;
   border-radius: 20px;
   padding: 5px 16px;
   font-size: 11px;
   font-weight: 600;
   color: #181818;
   letter-spacing: 0.3px;
   margin-bottom: 18px;
 }

 .mw-header-row {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 46px;
   gap: 24px;
 }

 .mw-subhead {
   font-size: 26px;
   font-weight: 600;
   color: #181818;
   line-height: 1.25;
   max-width: 420px;
 }

 .mw-callout {
   font-size: 12px;
   font-weight: 500;
   color: #8a8a86;
   text-align: right;
   max-width: 220px;
   line-height: 1.5;
 }

 .mw-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   column-gap: 26px;
   row-gap: 44px;
   align-items: start;
 }

 .mw-stat--offset {
   margin-top: 76px;
 }

 .mw-stat-number {
   font-size: 52px;
   font-weight: 700;
   color: #181818;
   letter-spacing: -1px;
   margin-bottom: 10px;
   line-height: 1;
 }

 .mw-stat-tag {
   display: inline-block;
   font-size: 11px;
   font-weight: 600;
   color: #181818;
   padding: 2px 8px;
   border-radius: 3px;
   margin-bottom: 8px;
 }

 .mw-tag--green {
   background: #c9e6a8;
 }

 .mw-tag--lavender {
   background: #d6d0f5;
 }

 .mw-tag--yellow {
   background: #f0e98a;
 }

 .mw-tag--peach {
   background: #f5cfc4;
 }

 .mw-stat-desc {
   font-size: 11.5px;
   font-weight: 400;
   color: #6f6f6b;
   line-height: 1.5;
   max-width: 150px;
 }

 @media (max-width:780px) {
   .mw-section {
     width: 100%;
     padding: 28px 22px 32px;
   }

   .mw-heading {
     font-size: 16vw;
   }

   .mw-grid {
     grid-template-columns: repeat(2, 1fr);
     row-gap: 32px;
   }

   .mw-header-row {
     flex-direction: column;
     align-items: flex-start;
   }

   .mw-callout {
     text-align: left;
     max-width: 100%;
   }
 }

 /* 
 what awaits css  */

 /* ===== LIGHT SECTION =====
    Deliberate light band between the dark sections. `--wac-ink` /
    `--wac-panel` are the local tokens everything below reads from. */
 .wac-section {
   --wac-ink: #16101a;
   --wac-panel: #fbf8f5;

   margin: 0;
   padding: 0;
   box-sizing: border-box;
   position: relative;
   background: #ffffff;
   padding: 84px 0 76px;
   overflow: hidden;
   font-family: 'Inter', sans-serif;
   -webkit-font-smoothing: antialiased;
 }

 .wac-section * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 .wac-corner-mark {
   position: absolute;
   top: 36px;
   left: 36px;
   width: 70px;
   height: 70px;
   opacity: .35;
 }

 /* the inline stroke="#555" was set for the old dark background */
 .wac-corner-mark path {
   stroke: var(--crimson);
 }

 .wac-heading-wrap {
   text-align: center;
   padding: 0 60px 20px;
   max-width: 100%;
   margin: 0 auto;
 }

 /* Dropdown container */
 .nav-links li.dropdown {
   position: relative;
 }

 /* Submenu hidden by default.
    Anchored to the item's RIGHT edge — it is the last nav item, so opening
    leftward keeps the 300px panel inside the viewport on narrow desktops. */
 .nav-links .submenu {
   position: absolute;
   top: calc(100% + 10px);
   right: 0;
   left: auto;
   background-color: rgba(18, 16, 20, 0.97);
   -webkit-backdrop-filter: blur(14px);
   backdrop-filter: blur(14px);
   border: 1px solid rgba(255, 255, 255, 0.09);
   min-width: 300px;
   max-height: min(58vh, 420px);
   overflow-y: auto;
   overscroll-behavior: contain;
   padding: 8px 0;
   margin: 0;
   list-style: none;
   z-index: 999;
   box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.95);
   border-radius: 12px;
   visibility: hidden;
   opacity: 0;
   transform: translateY(8px);
   pointer-events: none;
   transition:
     opacity 0.22s ease,
     transform 0.22s ease,
     visibility 0.22s;
 }

 /* invisible bridge so the panel survives the gap on the way down */
 .nav-links li.dropdown::after {
   content: "";
   position: absolute;
   top: 100%;
   right: 0;
   width: 300px;
   height: 14px;
   display: none;
 }

 .nav-links li.dropdown:hover::after {
   display: block;
 }

 .nav-links .submenu::-webkit-scrollbar {
   width: 8px;
 }

 .nav-links .submenu::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.16);
   border-radius: 99px;
 }

 /* Open on hover (desktop) or via the .open class (tap / keyboard) */
 .nav-links li.dropdown:hover > .submenu,
 .nav-links li.dropdown:focus-within > .submenu,
 .nav-links li.dropdown.open > .submenu {
   visibility: visible;
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
 }

 /* Submenu items styling */
 .nav-links .submenu li {
   width: 100%;
 }

 /* hairline divider between editions — `li + li` so the last row
    has no trailing line against the panel edge */
 .nav-links .submenu li+li {
   border-top: 1px solid rgba(255, 255, 255, 0.08);
 }

 .nav-links .submenu li a {
   display: block;
   padding: 10px 20px;
   white-space: nowrap;
   color: rgba(255, 255, 255, 0.82);
   font-family: 'Inter', sans-serif;
   font-size: 13.5px;
   font-weight: 500;
   letter-spacing: 0.2px;
   text-transform: none;
   border-left: 2px solid transparent;
   transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
 }

 .nav-links .submenu li a:hover {
   background-color: rgba(200, 30, 58, 0.16);
   color: #fff;
   border-left-color: var(--crimson);
 }

 .chev {
   display: inline-block;
   transition: transform 0.28s cubic-bezier(0.22, 0.8, 0.28, 1);
 }

 .nav-links li.dropdown:hover > a .chev,
 .nav-links li.dropdown:focus-within > a .chev,
 .nav-links li.dropdown.open > a .chev {
   transform: rotate(180deg);
 }

 /* Single line: `white-space: nowrap` with a viewport-scaled size, so it
    shrinks to fit rather than breaking. The <br> in the markup is gone. */
 .wac-heading-wrap h2 {
   font-family: 'Urbanist', sans-serif;
   font-size: clamp(22px, 4.4vw, 56px);
   line-height: 1.08;
   letter-spacing: -0.015em;
   color: var(--wac-ink);
   font-weight: 800;
   text-transform: none;
   white-space: nowrap;
 }

 /* gold reads too pale on a light surface — run crimson into the dark crimson */
 .wac-heading-wrap .wac-accent {
   color: transparent;
   background: linear-gradient(100deg, #e0294a 0%, var(--crimson) 48%, var(--crimson-dark) 100%);
   -webkit-background-clip: text;
   background-clip: text;
 }

 .wac-heading-wrap p {
   margin: 16px auto 0;
   color: rgba(22, 16, 26, 0.68);
   font-family: 'Inter', sans-serif;
   font-weight: 400;
   font-size: 16.5px;
   line-height: 1.7;
   max-width: 62ch;
   text-wrap: pretty;
 }

 /* below this the headline would have to get too small to read on one line */
 @media (max-width: 640px) {
   .wac-heading-wrap h2 {
     white-space: normal;
     font-size: clamp(26px, 7.4vw, 34px);
   }
 }

 .wac-carousel-outer {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0;
   padding: 36px 20px 0;
 }

 .wac-nav-btn {
   flex: 0 0 auto;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   border: 1px solid rgba(22, 16, 26, 0.12);
   background: #ffffff;
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
   color: var(--wac-ink);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 18px;
   z-index: 5;
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.9),
     0 10px 22px -12px rgba(22, 16, 26, 0.5);
   transition:
     background 0.3s ease,
     border-color 0.3s ease,
     transform 0.3s cubic-bezier(0.22, 0.8, 0.28, 1),
     box-shadow 0.3s ease;
   margin: 0 -24px;
 }

 .wac-nav-btn:hover {
   background: linear-gradient(135deg, #e42a4d 0%, var(--crimson) 50%, var(--crimson-dark) 100%);
   border-color: rgba(200, 30, 58, 0.5);
   color: #fff;
   transform: scale(1.09);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.35),
     0 16px 30px -12px rgba(200, 30, 58, 0.7);
 }

 .wac-nav-btn:active {
   transform: scale(1.02);
 }

 .wac-nav-btn:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px #fbf8f5, 0 0 0 5px var(--crimson);
 }

 .wac-peek {
   flex: 0 0 210px;
   height: 300px;
   border-radius: 18px;
   display: flex;
   align-items: flex-end;
   padding: 22px;
   color: rgba(255, 255, 255, 0.82);
   font-family: 'Inter', sans-serif;
   font-size: 13.5px;
   font-weight: 600;
   letter-spacing: .2px;
   position: relative;
   overflow: hidden;
   opacity: .58;
   filter: grayscale(55%);
   border: 1px solid rgba(22, 16, 26, 0.08);
   background-size: cover;
   background-position: center;
   transform: scale(0.94);
   transition:
     opacity .45s ease,
     filter .45s ease,
     transform .45s cubic-bezier(0.22, 0.8, 0.28, 1),
     box-shadow .45s ease;
   cursor: pointer;
 }

 .wac-peek:hover {
   opacity: .95;
   filter: grayscale(10%);
   transform: scale(0.99);
   box-shadow: 0 26px 46px -24px rgba(22, 16, 26, 0.55);
 }

 .wac-peek::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(6, 3, 5, .92), rgba(6, 3, 5, .18) 62%);
 }

 .wac-peek span {
   position: relative;
   z-index: 1;
   max-width: 160px;
   line-height: 1.35;
 }

 @media (max-width:900px) {
   .wac-peek {
     display: none;
   }
 }

 .wac-card-active {
   flex: 0 1 940px;
   height: 420px;
   display: flex;
   border-radius: 22px;
   overflow: hidden;
   border: 1px solid rgba(22, 16, 26, 0.08);
   box-shadow:
     0 2px 4px -2px rgba(22, 16, 26, 0.12),
     0 40px 70px -32px rgba(22, 16, 26, 0.45),
     0 0 46px -20px rgba(200, 30, 58, 0.3);
   perspective: 1000px;
 }

 .wac-card-active.wac-slide-next {
   animation: wacPopInNext .65s cubic-bezier(.22, 1.4, .4, 1);
 }

 .wac-card-active.wac-slide-prev {
   animation: wacPopInPrev .65s cubic-bezier(.22, 1.4, .4, 1);
 }

 @keyframes wacPopInNext {
   0% {
     opacity: 0;
     transform: translateX(90px) scale(.82) rotateY(-8deg);
     box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
   }

   55% {
     opacity: 1;
     transform: translateX(-10px) scale(1.03) rotateY(1deg);
   }

   100% {
     opacity: 1;
     transform: translateX(0) scale(1) rotateY(0deg);
     box-shadow: 0 30px 60px rgba(0, 0, 0, .55);
   }
 }

 @keyframes wacPopInPrev {
   0% {
     opacity: 0;
     transform: translateX(-90px) scale(.82) rotateY(8deg);
     box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
   }

   55% {
     opacity: 1;
     transform: translateX(10px) scale(1.03) rotateY(-1deg);
   }

   100% {
     opacity: 1;
     transform: translateX(0) scale(1) rotateY(0deg);
     box-shadow: 0 30px 60px rgba(0, 0, 0, .55);
   }
 }

 .wac-card-visual {
   flex: 1 1 55%;
   position: relative;
   background-size: cover;
   background-position: center;
   overflow: hidden;
 }

 /* photo edge feathered into the panel — now fading to the LIGHT panel colour */
 .wac-card-visual::after {
   content: '';
   position: absolute;
   inset: 0;
   background:
     linear-gradient(90deg, rgba(251, 248, 245, 0) 64%, rgba(251, 248, 245, 0.92) 100%),
     linear-gradient(120deg, rgba(200, 30, 58, 0.14), rgba(0, 0, 0, 0) 58%);
 }

 .wac-card-text {
   flex: 1 1 45%;
   background:
     linear-gradient(165deg, #ffffff 0%, var(--wac-panel) 52%, #f3ece6 100%);
   padding: 46px 44px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   position: relative;
 }

 .wac-card-text .wac-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   color: var(--crimson);
   font-family: 'Inter', sans-serif;
   font-size: 12px;
   letter-spacing: 0.2em;
   font-weight: 700;
   margin-bottom: 16px;
   text-transform: uppercase;
 }

 .wac-card-text .wac-eyebrow::before {
   content: "";
   width: 26px;
   height: 2px;
   border-radius: 999px;
   background: linear-gradient(90deg, var(--crimson), var(--gold));
 }

 .wac-card-text h3 {
   color: var(--wac-ink);
   font-family: 'Urbanist', sans-serif;
   font-size: clamp(22px, 2vw, 30px);
   line-height: 1.22;
   letter-spacing: -0.01em;
   font-weight: 800;
   max-width: 15ch;
   text-transform: none;
   text-wrap: balance;
 }

 /* text rises in slightly after the card pop, for layered depth */
 .wac-card-text h3,
 .wac-card-text .wac-eyebrow {
   animation: wacTextRiseIn .5s cubic-bezier(.2, 1, .3, 1) .18s both;
 }

 @keyframes wacTextRiseIn {
   from {
     opacity: 0;
     transform: translateY(14px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .wac-peek.wac-pulse {
   animation: wacPeekPulse .5s ease;
 }

 @keyframes wacPeekPulse {
   0% {
     transform: scale(1);
   }

   40% {
     transform: scale(1.04);
   }

   100% {
     transform: scale(1);
   }
 }

 .wac-progress-track {
   max-width: 320px;
   margin: 34px auto 0;
   height: 3px;
   background: transparent;
   border-radius: 999px;
   display: flex;
   overflow: visible;
   gap: 5px;
 }

 .wac-progress-seg {
   flex: 1;
   background: rgba(22, 16, 26, 0.13);
   position: relative;
   border-radius: 999px;
   overflow: hidden;
 }

 .wac-progress-seg .wac-fill {
   position: absolute;
   inset: 0;
   border-radius: 999px;
   background: linear-gradient(90deg, var(--crimson-dark), var(--crimson) 60%, #e0294a);
   box-shadow: 0 0 7px rgba(200, 30, 58, 0.4);
   transform: scaleX(0);
   transform-origin: left;
 }

 .wac-progress-seg.wac-filled .wac-fill {
   transform: scaleX(1);
 }

 .wac-progress-seg.wac-active .wac-fill {
   animation: wacGrowFill 6s linear forwards;
 }

 @keyframes wacGrowFill {
   from {
     transform: scaleX(0);
   }

   to {
     transform: scaleX(1);
   }
 }

 @media (max-width:640px) {
   .wac-heading-wrap {
     text-align: center;
     padding: 0 20px 20px;
     margin-inline: auto;
   }

   .wac-heading-wrap p {
     margin-inline: auto;
   }

   .wac-card-active {
     flex-direction: column;
     height: auto;
     flex-basis: auto;
     width: 88vw;
     border-radius: 18px;
   }

   .wac-card-visual,
   .wac-card-text {
     flex-basis: auto;
   }

   .wac-card-visual {
     height: 210px;
   }

   /* stacked now — feather the photo downward into the panel, not sideways */
   .wac-card-visual::after {
     background:
       linear-gradient(180deg, rgba(251, 248, 245, 0) 58%, rgba(251, 248, 245, 0.92) 100%),
       linear-gradient(120deg, rgba(200, 30, 58, 0.14), rgba(0, 0, 0, 0) 58%);
   }

   .wac-card-text {
     padding: 28px 24px 32px;
   }

   .wac-card-text p {
     max-width: none;
   }

   .wac-nav-btn {
     display: none;
   }
 }

 .wac-card-text p {
   margin-top: 16px;
   color: rgba(22, 16, 26, 0.7);
   font-family: 'Inter', sans-serif;
   font-weight: 400;
   font-size: 15.5px;
   line-height: 1.72;
   max-width: 38ch;
   animation: wacTextRiseIn .5s cubic-bezier(.2, 1, .3, 1) .28s both;
 }

 /* why attends csss */

 .wa-section {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   position: relative;
   background: #0d0d0d;
   padding: 90px 24px 100px;
   overflow: hidden;
   font-family: 'Inter', sans-serif;
   -webkit-font-smoothing: antialiased;
 }

 .wa-section * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 .wa-bg-image {
   position: absolute;
   inset: 0;
   background-image: url(../images/whyateendsbgnew.webp);
   background-size: cover;
   background-position: center;
   opacity: .28;
   filter: grayscale(60%);
   z-index: 0;
 }

 .wa-bg-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(13, 13, 13, .75) 0%, rgba(13, 13, 13, .55) 40%, rgba(13, 13, 13, .92) 100%);
   z-index: 1;
 }

 .wa-inner {
   position: relative;
   z-index: 2;
   max-width: 1180px;
   margin: 0 auto;
 }

 .wa-heading {
   text-align: center;
   font-size: clamp(42px, 6vw, 74px);
   font-weight: 400;
   color: #ffffff;
   letter-spacing: .5px;
   font-weight: 900;
   text-transform: uppercase;
 }

 .wa-subheading {
   text-align: center;
   margin-top: 14px;
   font-size: 16px;
   font-weight: 700;
   letter-spacing: .5px;
   color: #b8b8b8;
 }

 .wa-tabs {
   display: flex;
   justify-content: center;
   gap: 44px;
   margin: 48px auto 0;
   flex-wrap: wrap;
   border-bottom: 1px solid #333;
   padding-bottom: 14px;
 }

 .wa-tab {
   background: none;
   border: none;
   color: #b8b8b8;
   font-size: 17px;
   font-weight: 500;
   cursor: pointer;
   padding: 0 0 12px;
   position: relative;
   transition: color .25s ease;
 }

 .wa-tab:hover {
   color: #ffffff;
 }

 .wa-tab.wa-active {
   color: #ffffff;
   font-weight: 700;
 }

 .wa-tab.wa-active::after {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   bottom: -15px;
   height: 3px;
   background: #e8382c;
   border-radius: 2px;
 }

 .wa-content {
   display: flex;
   align-items: center;
   gap: 60px;
   margin-top: 80px;
   min-height: 340px;
 }

 .wa-label {
   flex: 0 0 auto;
   max-width: 380px;
 }

 .wa-label h3 {
   color: #db0e20;
   font-size: clamp(34px, 4.5vw, 47px);
   font-weight: 700;
   line-height: 1.1;
   animation: waFadeUp .5s ease both;
 }

 .wa-visual {
   flex: 0 0 auto;
   position: relative;
   width: 260px;
   height: 260px;
 }

 .wa-circle {
   position: absolute;
   /* border-radius: 50%; */
   overflow: hidden;
   background-size: cover;
   background-position: center;
   /* border: 4px solid #0d0d0d; */
   box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
   animation: waPopCircle .55s cubic-bezier(.22, 1.4, .4, 1) both;
 }

 .wa-circle.wa-c1 {
   width: 265px;
   height: 255px;
   top: 0;
   left: 0px;
   z-index: 1;
   animation-delay: 0s;
 }

 .wa-circle.wa-c2 {
   width: 150px;
   height: 150px;
   top: 30px;
   right: 0;
   z-index: 2;
   animation-delay: .08s;
 }

 .wa-circle.wa-c3 {
   width: 150px;
   height: 150px;
   bottom: 0;
   left: 70px;
   z-index: 2;
   animation-delay: .16s;
 }

 @keyframes waPopCircle {
   from {
     opacity: 0;
     transform: scale(.6);
   }

   to {
     opacity: 1;
     transform: scale(1);
   }
 }

 @keyframes waFadeUp {
   from {
     opacity: 0;
     transform: translateY(16px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .wa-desc {
   flex: 1 1 320px;
   color: #ffffff;
   font-size: 19px;
   line-height: 1.6;
   font-weight: 400;
   animation: waFadeUp .5s ease .1s both;
 }

 @media (max-width:900px) {
   .wa-content {
     flex-direction: column;
     text-align: center;
     gap: 32px;
   }

   .wa-label {
     max-width: 100%;
   }

   .wa-visual {
     margin: 0 auto;
   }

   .wa-tabs {
     gap: 22px;
   }
 }

 .room-section {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   background: #0d0d0d;
   padding: 90px 0 100px;
   overflow: hidden;
   font-family: 'Inter', sans-serif;
   -webkit-font-smoothing: antialiased;
 }

 .room-section * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 .room-heading {
   text-align: center;
   font-size: clamp(34px, 5vw, 58px);
   font-weight: 900;
   letter-spacing: .5px;
   color: #ffffff;
   text-transform: uppercase;
   padding: 0 20px;
 }

 .room-heading .room-heading-accent {
   color: #e8382c;
 }

 .room-subheading {
   text-align: center;
   margin-top: 16px;
   font-size: 16px;
   font-weight: 400;
   color: #9a9a9a;
   padding: 0 20px;
 }

 .room-marquee-wrap {
   margin-top: 64px;
   display: flex;
   flex-direction: column;
   gap: 24px;
 }

 .room-row {
   position: relative;
   width: 100%;
   overflow: hidden;
   -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
   mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
 }

 .room-track {
   display: flex;
   width: max-content;
   gap: 20px;
   animation: roomScrollLeft 38s linear infinite;
 }

 .room-row.room-row-reverse .room-track {
   animation-name: roomScrollRight;
   animation-duration: 34s;
 }

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

 @keyframes roomScrollLeft {
   from {
     transform: translateX(0);
   }

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

 @keyframes roomScrollRight {
   from {
     transform: translateX(-50%);
   }

   to {
     transform: translateX(0);
   }
 }

 .room-pill {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   gap: 12px;
   background: #1a1a1a;
   border: 1px solid #2c2c2c;
   border-radius: 50px;
   padding: 16px 28px;
   white-space: nowrap;
   transition: border-color .25s ease, transform .25s ease, background .25s ease;
 }

 .room-pill:hover {
   border-color: #e8382c;
   background: #1f1414;
   transform: translateY(-3px);
 }

 .room-pill .room-pill-dot {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: #e8382c;
   flex: 0 0 auto;
 }

 .room-pill .room-pill-label {
   color: #ffffff;
   font-size: 16px;
   font-weight: 600;
   letter-spacing: .2px;
 }

 @media (max-width:640px) {
   .room-pill {
     padding: 13px 20px;
   }

   .room-pill .room-pill-label {
     font-size: 14px;
   }

   .room-marquee-wrap {
     margin-top: 44px;
     gap: 16px;
   }
 }

 section#aboutus {
   position: relative;
   background: transparent;
   padding: 90px 0;
 }

 .wrap-aboutcontent p {
   font-family: 'Inter', sans-serif;
   font-weight: 400;
   font-size: 16px;
   line-height: 1.75;
   letter-spacing: 0.1px;
   color: #fff;
   margin-bottom: 16px;
 }

 .wrap-aboutcontent p:last-child {
   margin-bottom: 0;
 }

 .wrap-aboutcontent .boldcolor {
   font-weight: 700;
   color: #e2b864;
 }

 .wrap-aboutcontent h2 {
   font-family: 'Urbanist', sans-serif;
   font-weight: 800;
   font-size: clamp(30px, 3.4vw, 44px);
   line-height: 1.12;
   letter-spacing: -0.01em;
   color: white;
   margin-bottom: 22px;
 }

 /* ===== ABOUT: column spacing ===== */
 section#aboutus .row {
   --bs-gutter-x: 3.5rem;
   align-items: center;
   row-gap: 48px;
 }

 /* Stacked, the wide gutter only adds negative row margins that the 12px
    container padding can't absorb — the row poked 16px past both screen
    edges and phones rendered the whole page zoomed out. */
 @media (max-width: 991.98px) {
   section#aboutus .row {
     --bs-gutter-x: 1.5rem;
     row-gap: 40px;
   }

   section#aboutus {
     padding: 64px 0 72px;
   }
 }

 /* the video's glow + ring decor deliberately bleeds past its column; keep
    that bleed from widening the page (clip, unlike hidden, keeps sticky/y intact) */
 .hero-about {
   overflow-x: clip;
 }

 @media (min-width: 992px) {
   section#aboutus .wrap-aboutcontent {
     padding-right: 28px;
   }

   section#aboutus .wrap-videos {
     padding-left: 28px;
   }
 }

 /* ===== ABOUT: abstract decor on the video side ===== */
 .wrap-videos {
   position: relative;
   z-index: 0;
 }

 /* soft crimson + gold light blooms */
 .wrap-videos::before {
   content: "";
   position: absolute;
   inset: -18% -14%;
   z-index: 0;
   background:
     radial-gradient(38% 42% at 82% 14%, rgba(200, 30, 58, 0.55) 0%, rgba(200, 30, 58, 0) 70%),
     radial-gradient(34% 38% at 12% 88%, rgba(217, 169, 74, 0.28) 0%, rgba(217, 169, 74, 0) 72%);
   filter: blur(26px);
   pointer-events: none;
 }

 /* dotted grid patch, offset behind the top-right corner */
 .wrap-videos::after {
   content: "";
   position: absolute;
   top: -26px;
   right: -26px;
   width: 168px;
   height: 168px;
   z-index: 0;
   background-image: radial-gradient(rgba(255, 255, 255, 0.34) 1.4px, transparent 1.4px);
   background-size: 15px 15px;
   -webkit-mask-image: linear-gradient(215deg, #000 8%, transparent 72%);
   mask-image: linear-gradient(215deg, #000 8%, transparent 72%);
   pointer-events: none;
 }

 .video-card {
   position: relative;
   z-index: 2;
   border-radius: 38px;
   padding: 1.5px;
   background: linear-gradient(150deg,
       rgba(255, 255, 255, 0.34) 0%,
       rgba(255, 255, 255, 0.05) 32%,
       rgba(200, 30, 58, 0.45) 68%,
       rgba(217, 169, 74, 0.38) 100%);
   box-shadow:
     0 34px 70px -34px rgba(0, 0, 0, 0.95),
     0 0 0 1px rgba(255, 255, 255, 0.04);
 }

 /* thin outlined ring peeking from the bottom-left */
 .video-card::after {
   content: "";
   position: absolute;
   left: -46px;
   bottom: -46px;
   width: 132px;
   height: 132px;
   border-radius: 50%;
   border: 1px solid rgba(217, 169, 74, 0.45);
   z-index: -1;
   pointer-events: none;
 }

 .video-card.reveal.d2.in video {
   width: 100%;
   display: block;
   border-radius: 36.5px;
 }

 @media (max-width: 991.98px) {
   .wrap-videos::after {
     width: 118px;
     height: 118px;
     top: -18px;
     right: -12px;
   }

   .video-card::after {
     left: -26px;
     bottom: -26px;
     width: 96px;
     height: 96px;
   }
 }

 .finance-stage {
   position: relative;
   width: 100%;
   max-width: 100%;
   height: 470px;
   display: flex;
   align-items: center;
   justify-content: center;
   perspective: 1400px;
 }

 .leader-card {
   position: absolute;
   width: 21%;
   height: 368px;
   border-radius: 22px;
   overflow: hidden;
   background-size: cover;
   background-position: center;
   box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
   transition: transform 0.6s cubic-bezier(.22, 1, .36, 1), opacity 0.6s ease, filter 0.6s ease;
   cursor: pointer;
   border: 1px solid rgba(255, 255, 255, 0.06);
 }

 .leader-card::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 30%, rgba(0, 0, 0, 0.05) 60%, transparent 75%);
 }

 .leader-tint {
   position: absolute;
   inset: 0;
   mix-blend-mode: multiply;
   opacity: 0.8;
 }

 /* per-card tint colors — edit these to change each card's color wash */
 .leader-card[data-slot="1"] .leader-tint {
   background: #87002e;
 }

 .leader-card[data-slot="2"] .leader-tint {
   background: #110f11;
 }

 .leader-card[data-slot="3"] .leader-tint {
   background: #87002e;
 }

 .leader-card[data-slot="4"] .leader-tint {
   background: #110f11;
 }

 .leader-card[data-slot="5"] .leader-tint {
   background: #87002e;
 }

 .leader-info {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 96px;
   padding: 20px 16px 22px;
   z-index: 2;
   text-align: center;
 }

 .leader-name {
   color: #fff;
   font-size: 48px;
   font-weight: 700;
   letter-spacing: 0.2px;
   margin-bottom: 3px;
   text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
 }

 .leader-role {
   color: rgb(255 255 255);
   font-size: 14px;
   font-weight: 400;
   margin-bottom: 12px;
   letter-spacing: 0px;
 }

 .wrp-sumiinerc {
   color: white;
 }

 .leader-cta {
   display: inline-block;
   background: #ffffff;
   color: #111;
   font-size: 11px;
   font-weight: 600;
   padding: 8px 20px;
   border-radius: 999px;
   letter-spacing: 0.2px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
 }

 .finance-dots {
   position: absolute;
   bottom: -6px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 8px;
 }

 .finance-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.25);
   cursor: pointer;
   transition: background 0.3s, transform 0.3s;
 }

 .finance-dot.active {
   background: #fff;
   transform: scale(1.3);
 }

 .finance-nav {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.14);
   color: #fff;
   font-size: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 10;
   backdrop-filter: blur(6px);
   transition: background 0.25s, transform 0.2s;
 }

 .finance-nav:hover {
   background: rgba(255, 255, 255, 0.16);
 }

 .finance-nav:active {
   transform: translateY(-50%) scale(0.92);
 }

 .finance-nav-prev {
   left: 8px;
 }

 .finance-nav-next {
   right: 8px;
 }

 @media (max-width: 640px) {
   .finance-stage {
     height: 380px;
   }

   .leader-card {
     width: 140px;
     height: 260px;
   }

   .finance-nav {
     width: 36px;
     height: 36px;
     font-size: 15px;
   }
 }

 section#highlights {
   background: #000000;
   text-align: center;
   padding: 76px;
 }

 .glance {
   color: #c81e3a;
   font-weight: 600;
 }

 .wrap-row-high h2 {
   color: white;
   font-size: 42px;
 }






 /* the stats section above ends on #050505 — start here on the same colour
    and square off the corners so the two read as one continuous panel */
 section#keyfocus {
   background: #050505;
 }

 /* Top fade from the shared #050505. z-index 2 puts it over the tint and grid
    (both z 1) but, as ::before, it paints before the connector (also z 2), and
    the heading/hub/tiles sit at z 3 — so only the backdrop is faded. */
 .kfa-poster::before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   height: 150px;
   z-index: 2;
   pointer-events: none;
   background: linear-gradient(180deg,
       #050505 0%,
       rgba(5, 5, 5, 0.85) 24%,
       rgba(5, 5, 5, 0.4) 58%,
       rgba(5, 5, 5, 0) 100%);
 }

 section#keyfocus .container-fluid,
 section#keyfocus .row {
   --bs-gutter-x: 0;
   margin-left: 0;
   margin-right: 0;
   padding-left: 0;
   padding-right: 0;
 }

 .kfa-poster {
   position: relative;
   width: 100% !important;
   height: 640px;
   max-width: 100%;
   background: #050505;
   border-radius: 0;
   overflow: hidden;
 }

 /* Cool near-black base with a single crimson bloom behind the hub. The old
    orange wash (#140806 + rgba(255,86,34)) is what made this read muddy brown
    rather than part of the crimson palette. */
 .kfa-poster-bgtint {
   position: absolute;
   inset: 0;
   background:
     radial-gradient(64% 46% at 50% 14%, rgba(200, 30, 58, 0.26) 0%, rgba(200, 30, 58, 0) 66%),
     radial-gradient(46% 34% at 50% 66%, rgba(200, 30, 58, 0.12) 0%, rgba(200, 30, 58, 0) 72%),
     radial-gradient(120% 90% at 50% 45%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.75) 100%),
     linear-gradient(180deg, #050505 0%, #0b0709 42%, #080506 72%, #040303 100%);
   z-index: 1;
 }

 /* A quiet technical grid. It was #c81e3a at 60% alpha on a 64px pitch, which
    dominated the panel; now a hairline white at ~4% on a wider pitch. */
 .kfa-poster-grid {
   position: absolute;
   inset: 0;
   background-image:
     repeating-linear-gradient(to right, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 86px),
     repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 86px);
   -webkit-mask-image: radial-gradient(82% 66% at 50% 34%, #000 8%, rgba(0, 0, 0, 0.35) 58%, transparent 100%);
   mask-image: radial-gradient(82% 66% at 50% 34%, #000 8%, rgba(0, 0, 0, 0.35) 58%, transparent 100%);
   z-index: 1;
 }

 .kfa-poster-chart {
   position: absolute;
   top: 60px;
   right: -40px;
   width: 560px;
   height: 420px;
   opacity: 0.35;
   z-index: 1;
 }

 .kfa-poster-logo {
   position: absolute;
   top: 46px;
   left: 52px;
   z-index: 3;
 }

 .kfa-poster-logo svg {
   width: 56px;
   height: 56px;
 }

 .kfa-poster-cta {
   position: absolute;
   top: 54px;
   right: 52px;
   z-index: 3;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: linear-gradient(135deg, #ff6a2c 0%, #ff3d1f 100%);
   color: #ffffff;
   font-size: 15px;
   font-weight: 700;
   padding: 12px 22px;
   border-radius: 999px;
   box-shadow: 0 8px 20px rgba(255, 61, 31, 0.35);
 }

 .kfa-poster-cta svg {
   width: 15px;
   height: 15px;
   stroke: #ffffff;
   fill: none;
   stroke-width: 2.4;
 }

 .kfa-poster-headwrap {
   position: absolute;
   top: 48px;
   left: 0;
   width: 100%;
   padding: 0 24px;
   text-align: center;
   z-index: 3;
 }

 /* tightened so the block clears the connector trunk, which starts at 135px */
 .kfa-poster-headwrap .mumbai-feature-heading {
   margin-bottom: 10px;
   text-wrap: balance;
 }

 .kfa-poster-sub {
   margin: 0;
   color: #ffffff;
   font-family: 'Inter', sans-serif;
   font-size: 15px;
   font-weight: 500;
   letter-spacing: 0.3px;
   line-height: 1.4;
 }

 .kfa-poster-head-top {
   color: #f4f2f0;
   font-size: 52px;
   font-weight: 800;
   letter-spacing: -0.5px;
   margin-bottom: 20px;
 }

 .kfa-poster-head-badge {
   display: inline-block;
   border: 2px solid rgba(255, 255, 255, 0.16);
   border-radius: 20px;
   padding: 16px 40px;
   background: rgba(20, 10, 8, 0.4);
 }

 .kfa-poster-head-badge span {
   color: #c81e3a;
   font-size: 46px;
   font-weight: 800;
   letter-spacing: -0.5px;
 }

 .kfa-defs {
   position: absolute;
   width: 0;
   height: 0;
   overflow: hidden;
 }

 /* ===== CONNECTOR + STEPS SHARE ONE BOX =====
    Previously the steps were a centred fixed-width flex group (7x138 + 6x60 =
    1326px) while the connector stretched 0..1200 across the FULL container.
    The two only agreed at the centre and drifted further apart the wider the
    screen got. Both now use the same padded, max-width box, and the steps are
    7 equal columns — so branch x = 1200*(i+0.5)/7 lands dead on each column. */
 .kfa-poster-connector,
 .kfa-poster-steps {
   position: absolute;
   left: 0;
   right: 0;
   width: auto;
   max-width: 1400px;
   margin-inline: auto;
   padding: 0 52px;
 }

 .kfa-poster-connector {
   top: 135px;
   height: 220px;
   z-index: 2;
 }

 .kfa-poster-connector svg {
   display: block;
   width: 100%;
   height: 100%;
 }

 .kfa-poster-steps {
   top: 353px;
   z-index: 3;
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   column-gap: 0;
   row-gap: 29px;
 }

 .kfa-step {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
 }

 /* ===== 3D-SHADED STEP TILE ===== */
 .kfa-step-box {
   width: 100%;
   max-width: 152px;
   /* the label lives inside the tile now, so this grows to hold both */
   min-height: 176px;
   padding: 24px 12px 20px;
   flex-direction: column;
   gap: 14px;
   border-radius: 18px;
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 42%),
     linear-gradient(165deg, #241012 0%, #120a0b 55%, #070404 100%);
   border: 1.5px solid #c81e3ab0;
   box-shadow:
     inset 0 1.5px 0 rgba(255, 255, 255, 0.22),
     inset 0 -10px 18px -10px rgba(0, 0, 0, 0.95),
     inset 0 0 22px rgba(255, 74, 29, 0.09),
     0 0 0 1px rgba(255, 90, 40, 0.15),
     0 14px 26px -12px rgba(0, 0, 0, 0.95),
     0 0 30px rgba(255, 74, 29, 0.3);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 0;
   transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.28, 1), box-shadow 0.35s ease;
 }

 .kfa-step:hover .kfa-step-box {
   transform: translateY(-5px);
   box-shadow:
     inset 0 1.5px 0 rgba(255, 255, 255, 0.3),
     inset 0 -10px 18px -10px rgba(0, 0, 0, 0.95),
     inset 0 0 22px rgba(255, 74, 29, 0.14),
     0 0 0 1px rgba(255, 90, 40, 0.25),
     0 22px 34px -14px rgba(0, 0, 0, 0.95),
     0 0 44px rgba(255, 74, 29, 0.5);
 }

 /* Stroke colour comes from a `stroke="url(#kfaIconGrad)"` attribute on each
    icon, NOT from here — a fragment url() in an external stylesheet resolves
    against the stylesheet in some browsers and the gradient is lost.
    The paired light/dark 1px shadows below are what read as extrusion. */
 .kfa-step-box svg {
   width: 46px;
   height: 46px;
   /* column flex would otherwise squash it to fit the label */
   flex: 0 0 auto;
   fill: none;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
   filter:
     drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.45)) drop-shadow(0 1.5px 0 rgba(0, 0, 0, 0.9)) drop-shadow(0 5px 7px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 12px rgba(232, 60, 90, 0.55));
   transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.28, 1);
 }

 .kfa-step:hover .kfa-step-box svg {
   transform: translateY(-2px) scale(1.06);
 }

 /* =====================================================================
    AGENDA — entrance choreography + ambient signal pulse
    Trigger: JS adds .kfa-in to .kfa-poster once it scrolls into view.
    Timeline (s): heading 0 · hub .55 · trunk .35 · branches .70–.94
    (centre-out) · drops 1.45–1.69 · tiles 1.75–2.05 · pulses loop from 2.6.
    Draw-on uses `animation` (not transition) so the base lines keep a free
    `transition` for the hover highlight without inheriting entrance delays.
    ===================================================================== */

 /* --- heading + subtitle rise in --- */
 .kfa-poster-headwrap .mumbai-feature-heading,
 .kfa-poster-sub {
   opacity: 0;
   transform: translateY(18px);
   transition:
     opacity .7s cubic-bezier(.22, .8, .28, 1),
     transform .7s cubic-bezier(.22, .8, .28, 1);
 }

 .kfa-poster-sub {
   transition-delay: .15s;
 }

 .kfa-poster.kfa-in .kfa-poster-headwrap .mumbai-feature-heading,
 .kfa-poster.kfa-in .kfa-poster-sub {
   opacity: 1;
   transform: none;
 }

 /* --- hub node at the fork, with an expanding ring --- */
 .kfa-hub {
   position: absolute;
   left: 50%;
   top: 205px;
   width: 12px;
   height: 12px;
   margin: -6px 0 0 -6px;
   border-radius: 50%;
   background: #ffffff;
   z-index: 3;
   pointer-events: none;
   box-shadow:
     0 0 0 3px rgba(200, 30, 58, .55),
     0 0 18px 4px rgba(255, 109, 134, .8);
   opacity: 0;
   transform: scale(.4);
   transition:
     opacity .4s ease .55s,
     transform .55s cubic-bezier(.34, 1.5, .64, 1) .55s;
 }

 .kfa-hub::before {
   content: "";
   position: absolute;
   inset: -4px;
   border-radius: 50%;
   border: 1.5px solid rgba(255, 109, 134, .9);
   opacity: 0;
 }

 .kfa-poster.kfa-in .kfa-hub {
   opacity: 1;
   transform: scale(1);
 }

 .kfa-poster.kfa-in .kfa-hub::before {
   animation: kfaHubRing 2.6s ease-out 1.2s infinite;
 }

 @keyframes kfaHubRing {
   0% {
     transform: scale(.6);
     opacity: .9;
   }

   70%,
   100% {
     transform: scale(2.6);
     opacity: 0;
   }
 }

 /* --- tree draws on: trunk, then branches centre-out, then the drops --- */
 .kfa-trunk,
 .kfa-branches path,
 .kfa-drops line {
   stroke-dasharray: 1;
   stroke-dashoffset: 1;
   transition: stroke .25s ease, opacity .25s ease, filter .25s ease;
 }

 @keyframes kfaDraw {
   to {
     stroke-dashoffset: 0;
   }
 }

 .kfa-poster.kfa-in .kfa-trunk {
   animation: kfaDraw .4s ease-out .35s both;
 }

 .kfa-poster.kfa-in .kfa-branches path {
   animation: kfaDraw .75s cubic-bezier(.4, 0, .2, 1) both;
 }

 .kfa-poster.kfa-in .kfa-branches path:nth-child(4) {
   animation-delay: .7s;
 }

 .kfa-poster.kfa-in .kfa-branches path:nth-child(3),
 .kfa-poster.kfa-in .kfa-branches path:nth-child(5) {
   animation-delay: .78s;
 }

 .kfa-poster.kfa-in .kfa-branches path:nth-child(2),
 .kfa-poster.kfa-in .kfa-branches path:nth-child(6) {
   animation-delay: .86s;
 }

 .kfa-poster.kfa-in .kfa-branches path:nth-child(1),
 .kfa-poster.kfa-in .kfa-branches path:nth-child(7) {
   animation-delay: .94s;
 }

 .kfa-poster.kfa-in .kfa-drops line {
   animation: kfaDraw .35s ease-out both;
 }

 .kfa-poster.kfa-in .kfa-drops line:nth-child(4) {
   animation-delay: 1.45s;
 }

 .kfa-poster.kfa-in .kfa-drops line:nth-child(3),
 .kfa-poster.kfa-in .kfa-drops line:nth-child(5) {
   animation-delay: 1.53s;
 }

 .kfa-poster.kfa-in .kfa-drops line:nth-child(2),
 .kfa-poster.kfa-in .kfa-drops line:nth-child(6) {
   animation-delay: 1.61s;
 }

 .kfa-poster.kfa-in .kfa-drops line:nth-child(1),
 .kfa-poster.kfa-in .kfa-drops line:nth-child(7) {
   animation-delay: 1.69s;
 }

 /* hovering a tile lights its own branch + drop (class set by JS) */
 .kfa-branches path.kfa-hot,
 .kfa-drops line.kfa-hot {
   stroke: #ff7a92;
   opacity: 1;
   filter: drop-shadow(0 0 4px rgba(255, 122, 146, .85));
 }

 /* --- tiles pop in, centre-out, each just after its drop lands --- */
 .kfa-step {
   opacity: 0;
   transform: translateY(26px) scale(.9);
   transition:
     opacity .6s cubic-bezier(.22, .8, .28, 1),
     transform .65s cubic-bezier(.34, 1.4, .64, 1);
 }

 .kfa-poster.kfa-in .kfa-step {
   opacity: 1;
   transform: none;
 }

 .kfa-poster.kfa-in .kfa-step:nth-child(4) {
   transition-delay: 1.75s;
 }

 .kfa-poster.kfa-in .kfa-step:nth-child(3),
 .kfa-poster.kfa-in .kfa-step:nth-child(5) {
   transition-delay: 1.85s;
 }

 .kfa-poster.kfa-in .kfa-step:nth-child(2),
 .kfa-poster.kfa-in .kfa-step:nth-child(6) {
   transition-delay: 1.95s;
 }

 .kfa-poster.kfa-in .kfa-step:nth-child(1),
 .kfa-poster.kfa-in .kfa-step:nth-child(7) {
   transition-delay: 2.05s;
 }

 /* --- ambient: a signal leaves the hub and arrives at each tile on a loop.
    The dash is 7% of its path; offset runs .07 → -1 so it enters from before
    the start and exits past the end with no second dash appearing. The
    tile's ::after flashes at 26–27%, exactly when the dash reaches it. --- */
 .kfa-pulse {
   fill: none;
   stroke: #ff7a92;
   stroke-width: 3;
   stroke-linecap: round;
   stroke-dasharray: .07 2;
   stroke-dashoffset: .07;
   opacity: 0;
   filter: drop-shadow(0 0 5px rgba(255, 122, 146, .95));
 }

 .kfa-step-box {
   position: relative;
 }

 .kfa-step-box::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   pointer-events: none;
   background: radial-gradient(70% 62% at 50% 0%, rgba(255, 109, 134, .5), rgba(255, 109, 134, 0) 72%);
   opacity: 0;
 }

 .kfa-poster.kfa-in .kfa-pulse {
   animation: kfaPulseTravel 6.4s linear infinite;
 }

 .kfa-poster.kfa-in .kfa-step-box::after {
   animation: kfaTileFlash 6.4s ease-out infinite;
 }

 .kfa-poster.kfa-in .kfa-pulse:nth-child(1),
 .kfa-poster.kfa-in .kfa-step:nth-child(1) .kfa-step-box::after {
   animation-delay: 2.6s;
 }

 .kfa-poster.kfa-in .kfa-pulse:nth-child(2),
 .kfa-poster.kfa-in .kfa-step:nth-child(2) .kfa-step-box::after {
   animation-delay: 2.76s;
 }

 .kfa-poster.kfa-in .kfa-pulse:nth-child(3),
 .kfa-poster.kfa-in .kfa-step:nth-child(3) .kfa-step-box::after {
   animation-delay: 2.92s;
 }

 .kfa-poster.kfa-in .kfa-pulse:nth-child(4),
 .kfa-poster.kfa-in .kfa-step:nth-child(4) .kfa-step-box::after {
   animation-delay: 3.08s;
 }

 .kfa-poster.kfa-in .kfa-pulse:nth-child(5),
 .kfa-poster.kfa-in .kfa-step:nth-child(5) .kfa-step-box::after {
   animation-delay: 3.24s;
 }

 .kfa-poster.kfa-in .kfa-pulse:nth-child(6),
 .kfa-poster.kfa-in .kfa-step:nth-child(6) .kfa-step-box::after {
   animation-delay: 3.4s;
 }

 .kfa-poster.kfa-in .kfa-pulse:nth-child(7),
 .kfa-poster.kfa-in .kfa-step:nth-child(7) .kfa-step-box::after {
   animation-delay: 3.56s;
 }

 @keyframes kfaPulseTravel {
   0% {
     stroke-dashoffset: .07;
     opacity: 0;
   }

   2% {
     opacity: 1;
   }

   26% {
     stroke-dashoffset: -1;
     opacity: 1;
   }

   27%,
   100% {
     stroke-dashoffset: -1;
     opacity: 0;
   }
 }

 @keyframes kfaTileFlash {

   0%,
   24% {
     opacity: 0;
   }

   27% {
     opacity: 1;
   }

   42%,
   100% {
     opacity: 0;
   }
 }

 /* --- motion-safe: everything visible, nothing moves --- */
 @media (prefers-reduced-motion: reduce) {

   .kfa-poster-headwrap .mumbai-feature-heading,
   .kfa-poster-sub,
   .kfa-hub,
   .kfa-step {
     opacity: 1;
     transform: none;
     transition: none;
   }

   .kfa-trunk,
   .kfa-branches path,
   .kfa-drops line {
     stroke-dashoffset: 0;
     animation: none !important;
   }

   .kfa-pulse,
   .kfa-hub::before,
   .kfa-step-box::after {
     animation: none !important;
     opacity: 0;
   }
 }

 .kfa-step-label {
   color: #f4f2f0;
   font-family: 'Inter', sans-serif;
   font-size: 13.5px;
   font-weight: 600;
   text-align: center;
   text-transform: none;
   letter-spacing: 0.1px;
   line-height: 1.4;
 }

 .kfa-poster-bottombar {
   position: absolute;
   bottom: 60px;
   left: 52px;
   right: 52px;
   z-index: 3;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border: 1.5px solid rgba(255, 90, 40, 0.55);
   border-radius: 999px;
   padding: 18px 34px;
   background: rgba(10, 5, 5, 0.5);
   box-shadow: 0 0 26px rgba(255, 74, 29, 0.18);
 }

 .kfa-bottombar-left {
   display: flex;
   align-items: center;
   gap: 22px;
 }

 .kfa-bottombar-left svg {
   width: 26px;
   height: 26px;
 }

 .kfa-bottombar-right {
   display: flex;
   align-items: center;
   gap: 14px;
 }

 .kfa-bottombar-right svg {
   width: 30px;
   height: 30px;
 }

 .kfa-bottombar-handle {
   color: #f4f2f0;
   font-size: 19px;
   font-weight: 600;
   margin-left: 4px;
 }


 .mumbai-feature-section {
   position: relative;
   background: linear-gradient(115deg, #060606 0%, #0a0608 45%, #2b0810 78%, #3a0a12 100%);
   padding: 90px 60px;
   overflow: hidden;
   min-height: 900px;
 }

 .mumbai-feature-shape-circle {
   position: absolute;
   top: 70px;
   left: -70px;
   width: 220px;
   height: 220px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, 0.14);
   z-index: 1;
 }

 .mumbai-feature-shape-circle::before {
   content: "";
   position: absolute;
   inset: 14px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, 0.08);
 }

 .mumbai-feature-shape-diamond {
   position: absolute;
   bottom: 60px;
   left: 10px;
   width: 130px;
   height: 130px;
   border: 1px solid rgba(255, 255, 255, 0.10);
   transform: rotate(45deg);
   z-index: 1;
 }

 .mumbai-feature-shape-diamond::before {
   content: "";
   position: absolute;
   inset: 22px;
   border: 1px solid rgba(255, 255, 255, 0.16);
 }

 .mumbai-feature-shape-diamond::after {
   content: "";
   position: absolute;
   inset: 44px;
   border: 1px solid rgba(255, 255, 255, 0.22);
 }

 .mumbai-feature-grid {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: start;
   max-width: 1400px;
   margin: 0 auto;
 }

 .mumbai-feature-eyebrow {
   display: flex;
   align-items: center;
   gap: 12px;
   color: #ff3b5c;
   font-size: 15px;
   font-weight: 700;
   font-style: italic;
   letter-spacing: 0.3px;
   margin-bottom: 22px;
 }

 .mumbai-feature-eyebrow::before {
   content: "";
   display: inline-block;
   width: 34px;
   height: 2px;
   background: #ff3b5c;
 }

 .mumbai-feature-heading {
   color: #ffffff;
   font-size: 46px;
   font-weight: 700;
   letter-spacing: 0.5px;
   line-height: 1.15;
   margin-bottom: 26px;
   text-transform: uppercase;
 }

 .mumbai-feature-desc {
   color: rgba(255, 255, 255, 0.68);
   font-size: 16px;
   line-height: 1.7;
   max-width: 480px;
   margin-bottom: 50px;
 }

 .mumbai-feature-stats {
   display: grid;
   grid-template-columns: 1fr 1fr;
   row-gap: 40px;
   column-gap: 60px;
   max-width: 560px;
 }

 .mumbai-feature-stat-value {
   color: #ffffff;
   font-size: 34px;
   font-weight: 800;
   margin-bottom: 4px;
 }

 .mumbai-feature-stat-unit {
   color: #ffffff;
   font-size: 16px;
   font-weight: 500;
   font-style: italic;
   margin-left: 4px;
 }

 .mumbai-feature-stat-label {
   color: rgba(255, 255, 255, 0.72);
   font-size: 15px;
   line-height: 1.4;
   margin-bottom: 14px;
 }

 .mumbai-feature-divider {
   width: 100%;
   height: 1px;
   background: rgba(255, 255, 255, 0.22);
 }

 .mumbai-feature-gallery {
   position: relative;
   display: grid;
   grid-template-columns: 1.1fr 1fr;
   gap: 22px;
   z-index: 2;
 }

 .mumbai-feature-photo {
   width: 100%;
   border-radius: 10px;
   object-fit: cover;
   display: block;
   border: 1.5px solid #ff3b5c;
 }

 .mumbai-feature-photo--tall {
   height: 300px;
 }

 .mumbai-feature-photo--short {
   height: 260px;
 }

 .mumbai-feature-col {
   display: flex;
   flex-direction: column;
   gap: 22px;
 }

 .mumbai-feature-col--offset {
   margin-top: 60px;
 }

 .mumbai-feature-badge {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 132px;
   height: 132px;
   border-radius: 50%;
   background: #050505;
   border: 5px solid #ff3b5c;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 3;
   box-shadow: 0 0 0 6px #050505, 0 10px 30px rgba(0, 0, 0, 0.55);
 }

 .mumbai-feature-badge-inner {
   width: 92px;
   height: 92px;
   border-radius: 50%;
   background: #0d0d0d;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #ffffff;
   font-size: 14px;
   font-weight: 800;
   letter-spacing: 0.3px;
   text-align: center;
 }

 @media (max-width: 1080px) {
   .mumbai-feature-grid {
     grid-template-columns: 1fr;
   }

   .mumbai-feature-heading {
     font-size: 34px;
   }

   .mumbai-feature-gallery {
     margin-top: 20px;
   }
 }

 @media (max-width: 640px) {
   .mumbai-feature-section {
     padding: 60px 24px;
   }

   .mumbai-feature-stats {
     grid-template-columns: 1fr;
   }

   .mumbai-feature-heading {
     font-size: 26px;
   }
 }


 .sp-partners {
   position: relative;
   background: linear-gradient(160deg, #87002e 0%, #87002e 14%, #1c1c1f 38%, #17171a 55%, #080809 72%, #87002e 86%, #87002e 100%);
   padding: 88px 6% 96px;
   overflow: hidden;
   /* background: url(../images/redbg.png); */
 }

 .sp-partners::before {
   content: "";
   position: absolute;
   inset: 0;
   background-image:
     linear-gradient(rgba(201, 162, 39, 0.06) 1px, transparent 1px),
     linear-gradient(90deg, rgba(201, 162, 39, 0.06) 1px, transparent 1px);
   background-size: 64px 64px;
   mask-image: radial-gradient(60% 60% at 50% 20%, black, transparent);
   pointer-events: none;
 }

 .sp-head {
   position: relative;
   max-width: 100%;
   margin: 0 auto 56px;
   text-align: center;
 }

 .sp-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 12px;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: #e6cf87;
   font-weight: 600;
   margin-bottom: 18px;
 }

 .sp-eyebrow::before,
 .sp-eyebrow::after {
   content: "";
   width: 28px;
   height: 1px;
   background: linear-gradient(90deg, transparent, #c9a227);
 }

 .sp-eyebrow::after {
   transform: scaleX(-1);
 }

 .sp-head h2 {
   font-family: 'Fraunces', serif;
   font-weight: 600;
   font-style: normal;
   font-size: clamp(30px, 4vw, 44px);
   color: #f4efe2;
   margin: 0 0 14px;
   line-height: 1.15;
   letter-spacing: -0.01em;
 }

 .sp-head h2 em {
   color: #c9a227;
   font-style: normal;
 }

 .sp-head p {
   color: #a9b3c8;
   font-size: 15.5px;
   line-height: 1.65;
   margin: 0 auto;
   max-width: 560px;
 }

 .sp-grid {
   position: relative;
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 1px;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 14px;
   overflow: hidden;
 }

 .sp-tile {
   background: #ffffff;
   aspect-ratio: 5 / 3;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 22px 20px;
   position: relative;
   transition: background .35s ease;
 }

 .sp-tile img {
   max-width: 100%;
   max-height: 36px;
   width: auto;
   height: auto;
   /* filter: grayscale(100%) brightness(0) invert(1) opacity(0.55); */
   transition: filter .35s ease, transform .35s ease;
 }

 .sp-tile:hover {
   background: #f4efe2;
 }

 .sp-tile:hover img {
   filter: grayscale(0%) opacity(1);
   transform: scale(1.06);
 }

 .sp-tile .sp-name {
   position: absolute;
   bottom: 8px;
   left: 0;
   right: 0;
   text-align: center;
   font-size: 10px;
   letter-spacing: .04em;
   color: #e6cf87;
   opacity: 0;
   transition: opacity .3s ease;
   pointer-events: none;
 }

 .sp-tile:hover .sp-name {
   opacity: 0;
 }

 .sp-more-row {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 14px;
   margin-top: 40px;
 }

 .sp-more-row .sp-line {
   height: 1px;
   width: 64px;
   background: linear-gradient(90deg, transparent, rgba(201, 162, 39, .6));
 }

 .sp-more-row .sp-line.sp-right {
   transform: scaleX(-1);
 }

 .sp-more-pill {
   font-family: 'Fraunces', serif;
   font-size: 14px;
   color: #e6cf87;
   letter-spacing: .03em;
 }

 .sp-count-strip {
   display: flex;
   justify-content: center;
   gap: 48px;
   margin-top: 52px;
   flex-wrap: wrap;
 }

 .sp-count {
   text-align: center;
 }

 .sp-count .sp-num {
   font-family: 'Fraunces', serif;
   font-size: 26px;
   color: #f4efe2;
   font-weight: 600;
 }

 .sp-count .sp-lbl {
   font-size: 11.5px;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: #7c8698;
   margin-top: 4px;
 }

 @media (max-width:900px) {
   .sp-grid {
     grid-template-columns: repeat(3, 1fr);
   }
 }

 @media (max-width:520px) {
   .sp-grid {
     grid-template-columns: repeat(2, 1fr);
   }

   .sp-partners {
     padding: 64px 5% 72px;
   }
 }

 .ftr-wrap {
   /* starts on the venue section's solid #060405 so there is no seam, then
      eases into a dark scrim that keeps the white text legible over the skyline */
   background:
     linear-gradient(180deg, #060405 0%, rgba(6, 4, 5, .45) 140px, rgba(6, 4, 5, .55) 100%),
     url(../images/Mumbai-Footer.png) center bottom / cover no-repeat fixed;
   padding: 56px 6% 40px;
   text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
 }

 /* Top brand row */
 .ftr-brand-row {
   text-align: center;
   padding-bottom: 36px;
 }

 .ftr-logo {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   margin-bottom: 22px;
 }

 .ftr-logo-mark {
   width: 26px;
   height: 26px;
   background: #ffffff;
   border-radius: 6px 6px 6px 0;
   display: inline-block;
 }

 .ftr-logo-text {
   font-size: 22px;
   font-weight: 700;
   letter-spacing: .06em;
   color: #ffffff;
 }

 .ftr-tags {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 34px;
   flex-wrap: wrap;
   font-size: 12.5px;
   letter-spacing: .04em;
   color: #a6acb8;
 }

 .ftr-tags span {
   display: inline-flex;
   align-items: center;
   gap: 8px;
 }

 .ftr-dot {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: #6b7280;
   display: inline-block;
 }

 .ftr-divider {
   height: 1px;
   background: rgba(255, 255, 255, .18);
   margin: 0 0 40px;
 }

 /* Nav links row */
 .ftr-nav {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 56px;
   flex-wrap: wrap;
   margin-bottom: 38px;
 }

 .ftr-nav a {
   color: #ffffff;
   font-size: 15px;
   text-decoration: none;
   font-weight: 600;
   letter-spacing: .02em;
   text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 12px rgba(0, 0, 0, .6);
   transition: color .2s ease;
 }

 .ftr-nav a:hover {
   color: #ff4d5e;
 }

 /* Social row — "Follow us" + Elets BFSI handles (links from the gamechanger site) */
 .ftr-social {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 14px;
   margin-bottom: 40px;
 }

 .ftr-social-label {
   margin: 0;
   font-family: 'Inter', sans-serif;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.22em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.72);
 }

 .ftr-social-icons {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
 }

 /* glass tile so the glyph stays legible over the skyline photo; on hover the
    tile takes the platform's own colour so each handle is recognisable */
 .ftr-social-icon {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #ffffff;
   text-decoration: none;
   text-shadow: none;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.2);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.14),
     0 8px 18px -10px rgba(0, 0, 0, 0.9);
   transition:
     background .3s ease,
     border-color .3s ease,
     transform .3s cubic-bezier(.22, .8, .28, 1),
     box-shadow .3s ease;
 }

 .ftr-social-icon svg {
   width: 18px;
   height: 18px;
   display: block;
   fill: currentColor;
   stroke: none;
 }

 .ftr-social-icon:hover,
 .ftr-social-icon:focus-visible {
   transform: translateY(-3px);
   border-color: transparent;
   outline: none;
 }

 .ftr-social-icon--fb:hover,
 .ftr-social-icon--fb:focus-visible {
   background: #1877f2;
   box-shadow: 0 12px 24px -10px rgba(24, 119, 242, 0.85);
 }

 .ftr-social-icon--li:hover,
 .ftr-social-icon--li:focus-visible {
   background: #0a66c2;
   box-shadow: 0 12px 24px -10px rgba(10, 102, 194, 0.85);
 }

 .ftr-social-icon--ig:hover,
 .ftr-social-icon--ig:focus-visible {
   background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
   box-shadow: 0 12px 24px -10px rgba(214, 36, 159, 0.85);
 }

 .ftr-social-icon--yt:hover,
 .ftr-social-icon--yt:focus-visible {
   background: #ff0000;
   box-shadow: 0 12px 24px -10px rgba(255, 0, 0, 0.8);
 }

 /* keyboard focus also gets a visible ring, not just the colour change */
 .ftr-social-icon:focus-visible {
   box-shadow: 0 0 0 3px #060405, 0 0 0 5px #ffffff;
 }

 @media (prefers-reduced-motion: reduce) {
   .ftr-social-icon {
     transition: none;
   }

   .ftr-social-icon:hover,
   .ftr-social-icon:focus-visible {
     transform: none;
   }
 }

 /* Legal row */
 .ftr-legal {
   text-align: center;
   margin-bottom: 18px;
 }

 .ftr-legal a {
   color: #c7cad1;
   font-size: 12.5px;
   text-decoration: none;
   margin: 0 4px;
 }

 .ftr-legal a:hover {
   color: #ffffff;
 }

 .ftr-legal .ftr-sep {
   color: rgba(255, 255, 255, .45);
   margin: 0 10px;
 }

 .ftr-copyright {
   text-align: center;
   color: rgba(255, 255, 255, .75);
   font-size: 12px;
 }

 @media (max-width:640px) {
   .ftr-nav {
     gap: 22px 32px;
   }

   .ftr-tags {
     gap: 14px 22px;
   }
 }

 span.ftr-logo-text img {
   width: 20%;
 }

 /* fixed backgrounds are ignored or blow up to page height on touch browsers (iOS Safari) */
 @media (max-width: 991px), (hover: none) {
   .ftr-wrap {
     background-attachment: scroll;
   }
 }

 @media (max-width: 640px) {
   .ftr-wrap {
     padding: 48px 16px 32px;
   }

   /* 20% of a phone-width row rendered the event logo as a ~70px speck */
   span.ftr-logo-text img {
     width: 170px;
   }

   .ftr-nav {
     gap: 14px 26px;
     margin-bottom: 30px;
   }

   .ftr-legal {
     line-height: 2;
   }

   .ftr-legal .ftr-sep {
     margin: 0 6px;
   }
 }

 .medal img {
   width: 100%;
 }

 .contact-card {
   /* sized to its content so name, phone and email sit on one line */
   width: fit-content;
   max-width: 100%;
   margin: 24px auto;
   padding: 20px 24px;
   background: #fff5f0;
   border: 1px solid #f3d9cc;
   border-left: 4px solid #d62b2b;
   border-radius: 8px;
   text-align: center;
   /* the footer's text-shadow is for text over the photo; not on this light card */
   text-shadow: none;
 }

 .contact-card__name,
 .contact-card__phone,
 .contact-card__email {
   display: inline-flex;
   align-items: center;
   gap: 6px;
 }

 .contact-card__icon {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
 }

 .contact-card__heading {
   font-size: 15px;
   font-weight: 600;
   color: #333333;
   margin: 0 0 10px;
 }

 .contact-card__details {
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: center;
   gap: 8px;
   font-size: 14px;
   white-space: nowrap;
 }

 .contact-card__name {
   font-weight: 700;
   color: #1a1a1a;
 }

 .contact-card__phone {
   color: #d62b2b;
   font-weight: 600;
   text-decoration: none;
 }

 .contact-card__phone:hover {
   text-decoration: underline;
 }

 .contact-card__email {
   color: #1a5fb4;
   font-weight: 600;
   text-decoration: none;
 }

 .contact-card__email:hover {
   text-decoration: underline;
 }

 .contact-card__divider {
   color: #cccccc;
   font-weight: 400;
 }

 /* Mobile: the single line is ~520px wide, so stack below that */
 @media (max-width: 600px) {
   .contact-card {
     padding: 16px;
   }

   .contact-card__details {
     flex-direction: column;
     gap: 6px;
   }

   .contact-card__divider {
     display: none;
   }
 }

 /* =====================================================================
    EVENT VENUE — full-bleed hotel photo, location card + map over it.
    Sized to one screen: the section is a viewport tall and the card is
    kept compact enough to fit inside it below the fixed header.
    ===================================================================== */
 section.venue-section {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   display: flex;
   align-items: center;
   min-height: 100vh;
   min-height: 100svh;
   padding: calc(var(--nav-h) + 12px) 0 28px;
   background: #060405;
 }

 /* 1920px facade shot; the Aurika sign sits left of centre, so the copy
    goes on the right and the scrim darkens that side only */
 .venue-bg {
   position: absolute;
   inset: 0;
   z-index: -2;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: 35% 45%;
 }

 section.venue-section::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   /* the vertical layer starts on Past Glimpses' solid #000 and ends on the
      footer's #060405, so the photo dissolves in and out with no hard edge */
   background:
     linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 90px, rgba(6, 4, 5, 0) 200px, rgba(6, 4, 5, 0) calc(100% - 200px), rgba(6, 4, 5, 0.65) calc(100% - 90px), #060405 100%),
     linear-gradient(270deg, rgba(6, 4, 5, 0.94) 0%, rgba(6, 4, 5, 0.86) 34%, rgba(6, 4, 5, 0.3) 60%, rgba(6, 4, 5, 0.05) 100%);
   pointer-events: none;
 }

 /* no panel — copy, map and button sit straight on the scrimmed photo */
 .venue-card {
   max-width: 500px;
   margin-left: auto;
   color: #fff;
   text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
 }

 .venue-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 10px;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.24em;
   text-transform: uppercase;
   color: var(--gold);
 }

 .venue-eyebrow::before {
   content: "";
   width: 28px;
   height: 2px;
   border-radius: 999px;
   background: linear-gradient(90deg, var(--crimson), var(--gold));
 }

 h2.venue-title {
   margin: 0 0 4px;
   font-size: clamp(26px, 2.4vw, 34px);
   line-height: 1.12;
   color: #fff;
   text-wrap: balance;
 }

 .venue-sub {
   margin: 0 0 16px;
   font-size: 16px;
   font-weight: 600;
   color: #ff8fa3;
 }

 .venue-info {
   list-style: none;
   margin: 0 0 18px;
   padding: 0;
   display: grid;
   gap: 8px;
 }

 .venue-info li {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   font-size: 14px;
   line-height: 1.5;
   color: rgba(255, 255, 255, 0.9);
 }

 .venue-info svg {
   flex: 0 0 auto;
   width: 19px;
   height: 19px;
   margin-top: 1px;
   fill: none;
   stroke: #ff8fa3;
   stroke-width: 1.8;
   stroke-linecap: round;
   stroke-linejoin: round;
 }

 .venue-map {
   overflow: hidden;
   margin-bottom: 18px;
   border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.9);
 }

 .venue-map iframe {
   display: block;
   width: 100%;
   height: clamp(170px, 26vh, 240px);
   border: 0;
 }

 @media (max-width: 991px) {
   .venue-card {
     margin: 0 auto;
   }

   .venue-bg {
     object-position: 30% 40%;
   }

   /* copy spans the width here, so darken the whole photo */
   section.venue-section::before {
     background: linear-gradient(180deg, #000 0%, rgba(6, 4, 5, 0.72) 120px, rgba(6, 4, 5, 0.68) 40%, rgba(6, 4, 5, 0.88) calc(100% - 120px), #060405 100%);
   }
 }

 @media (max-width: 640px) {
   section.venue-section {
     padding: calc(var(--nav-h) + 4px) 4px 20px;
   }

   .venue-eyebrow {
     margin-bottom: 8px;
     font-size: 11px;
   }

   h2.venue-title {
     font-size: 24px;
   }

   .venue-sub {
     margin-bottom: 12px;
     font-size: 14.5px;
   }

   .venue-info li {
     font-size: 13px;
   }

   .venue-map {
     margin-bottom: 14px;
   }

   .venue-map iframe {
     height: clamp(150px, 22vh, 200px);
   }

   .venue-directions {
     width: 100%;
     justify-content: center;
   }
 }


 .stats-page-body-v2 {
   margin: 0;
   padding: 0;
   background: #050505;
   font-family: 'Inter', sans-serif;
 }

 /* ===== SECTION ===== */
 .stats-section-v2 {
   position: relative;
   overflow: hidden;
   background: #050505;
   padding: 60px 0;
 }

 /* --- decorative backdrop: dot grid --- */
 .stats-section-v2::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.2px, transparent 1.2px);
   background-size: 26px 26px;
   -webkit-mask-image: radial-gradient(76% 80% at 50% 46%, #000 18%, transparent 100%);
   mask-image: radial-gradient(76% 80% at 50% 46%, #000 18%, transparent 100%);
 }

 /* --- crimson + gold light blooms, so it is not a flat black field --- */
 .stats-section-v2::after {
   content: "";
   position: absolute;
   inset: -12% -6%;
   z-index: 0;
   pointer-events: none;
   background:
     radial-gradient(40% 46% at 50% 44%, rgba(200, 30, 58, 0.46) 0%, rgba(200, 30, 58, 0) 72%),
     radial-gradient(30% 36% at 8% 76%, rgba(217, 169, 74, 0.26) 0%, rgba(217, 169, 74, 0) 74%),
     radial-gradient(30% 36% at 92% 14%, rgba(200, 30, 58, 0.32) 0%, rgba(200, 30, 58, 0) 74%);
   filter: blur(12px);
 }

 /* --- vector layer: Mumbai skyline, concentric rings, sparks --- */
 .stats-decor-v2 {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 78%;
   z-index: 1;
   pointer-events: none;
 }

 /* NOTE: the skyline fill is a presentation attribute on the <path>, not set
    here — a fragment-only url(#id) in an external stylesheet resolves against
    the stylesheet URL in some browsers and the gradient would not be found. */

 .stats-decor-rings-v2 circle {
   fill: none;
   stroke: rgba(255, 255, 255, 0.075);
   stroke-width: 1;
 }

 .stats-decor-spark-v2 circle {
   fill: rgba(217, 169, 74, 0.55);
 }

 /* Bottom fade into the shared #050505. Sits at z-index 1 after the decor SVG
    in the DOM, so it paints over the skyline, rings and the ::before/::after
    grid and blooms (z 0), but under the heading and arc stage (z 2). */
 .stats-fade-v2 {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 220px;
   z-index: 1;
   pointer-events: none;
   background: linear-gradient(180deg,
       rgba(5, 5, 5, 0) 0%,
       rgba(5, 5, 5, 0.55) 45%,
       rgba(5, 5, 5, 0.92) 78%,
       #050505 100%);
 }

 /* keep the real content above the decor */
 .stats-heading-v2,
 .stats-arc-stage-v2 {
   position: relative;
   z-index: 2;
 }

 /* ===== ARC SEQUENCE =====
    No longer scroll-pinned: the section flows normally and every stat appears
    together (with the arc drawing in) once it scrolls into view. */
 .stats-pin-track-v2 {
   position: relative;
   background: #050505;
 }

 .stats-pin-track-v2>.stats-section-v2 {
   padding: 90px 0 100px;
 }

 /* the glowing trail drawn along the arc, in one pass */
 .stats-arc-trace-v2 {
   fill: none;
   stroke: #ff4d6d;
   stroke-width: 3;
   stroke-linecap: round;
   filter: drop-shadow(0 0 7px rgba(255, 77, 109, 0.95));
   transition: stroke-dashoffset 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
 }

 .stats-glow-halo-v2,
 .stats-glow-core-v2 {
   opacity: 0;
   transition: opacity 0.3s ease;
   pointer-events: none;
 }

 .stats-glow-core-v2 {
   fill: #fff;
   filter: drop-shadow(0 0 9px rgba(255, 123, 148, 1));
 }

 .stats-heading-v2 {
   text-align: center;
   /* was 700px, which forced "WHY DOES THIS ROOM MATTER?" onto two lines */
   max-width: min(1100px, 92vw);
   margin: 0 auto 32px;
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.8s ease, transform 0.8s ease;
 }

 /* keep the headline on a single line at every width — the size scales
    with the viewport instead of wrapping. Scoped to this section so the
    other `.mumbai-feature-heading` uses are untouched, and at (0,2,0) it
    outranks the plain font-size overrides in the breakpoints below. */
 .stats-heading-v2 .mumbai-feature-heading {
   white-space: nowrap;
   font-size: clamp(18px, 4.6vw, 52px);
   margin-bottom: 0;
 }

 .stats-heading-v2.stats-in-view-v2 {
   opacity: 1;
   transform: translateY(0);
 }

 .stats-eyebrow-v2 {
   color: #9AE63E;
   font-size: 13px;
   letter-spacing: 4px;
   text-transform: uppercase;
   font-weight: 700;
   margin: 0 0 12px;
 }

 .stats-title-v2 {
   color: #F5F5F0;
   font-size: 34px;
   font-weight: 800;
   margin: 0;
 }

 /* ===== ARC STAGE (desktop, matches reference image proportions) ===== */
 .stats-arc-stage-v2 {
   position: relative;
   max-width: 1300px;
   /* The viewBox is 1830x580, but with the lower arc removed nothing is drawn
      below ~70% of that height. The aspect-ratio has to stay 1830/580 or the
      stretched SVG would squash the glow circles into ellipses — so instead of
      cropping it, pull the empty band back with a negative bottom margin.
      Percentage margins resolve against the container WIDTH, and the dead band
      is ~30% of a height that is itself 0.317x the width, hence ~9%. */
   margin: 0 auto -8%;
   width: 100%;
   aspect-ratio: 1830 / 580;
 }

 .stats-arc-svg-v2 {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
 }

 .stats-arc-line-main-v2 {
   fill: none;
   stroke: #FFFFFF;
   stroke-width: 2;
   stroke-dasharray: 1900;
   stroke-dashoffset: 1900;
   transition: stroke-dashoffset 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
 }

 .stats-arc-stage-v2.stats-in-view-v2 .stats-arc-line-main-v2 {
   stroke-dashoffset: 0;
 }

 /* ===== DOT MARKERS positioned on the arc (absolute %, matching image) ===== */
 .stats-dot-v2 {
   position: absolute;
   width: 5.6%;
   aspect-ratio: 1 / 1;
   transform: translate(-50%, -50%) scale(0.4);
   border-radius: 50%;
   background: #87002e5c;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
 }

 .stats-dot-v2.stats-in-view-v2 {
   opacity: 1;
   transform: translate(-50%, -50%) scale(1);
 }

 .stats-dot-inner-v2 {
   width: 40%;
   height: 40%;
   border-radius: 50%;
   background: #87002e;
 }

 .stats-dot-v2.stats-in-view-v2 .stats-dot-inner-v2 {
   animation: stats-pulse-v2 2.4s ease-out infinite;
 }

 @keyframes stats-pulse-v2 {
   0% {
     box-shadow: 0 0 0 0 rgba(154, 230, 62, 0.55);
   }

   70% {
     box-shadow: 0 0 0 14px rgba(154, 230, 62, 0);
   }

   100% {
     box-shadow: 0 0 0 0 rgba(154, 230, 62, 0);
   }
 }

 .stats-dot-1-v2 {
   left: 14.7%;
   top: 58.39%;
 }

 .stats-dot-2-v2 {
   left: 33.2%;
   top: 49.90%;
 }

 .stats-dot-3-v2 {
   left: 51.9%;
   top: 47.45%;
 }

 .stats-dot-4-v2 {
   left: 70.5%;
   top: 51.12%;
 }

 .stats-dot-5-v2 {
   left: 89.2%;
   top: 60.96%;
 }

 /* ===== TEXT BLOCKS positioned above each dot (absolute %, matching image) ===== */
 .stats-text-v2 {
   position: absolute;
   transform: translate(-50%, 0);
   text-align: center;
   white-space: nowrap;
   opacity: 0;
   transition: opacity 0.7s ease, transform 0.7s ease;
 }

 .stats-text-v2.stats-in-view-v2 {
   opacity: 1;
 }

 .stats-text-1-v2 {
   left: 14.7%;
   top: 23.19%;
   transform: translate(-50%, 14px);
 }

 .stats-text-2-v2 {
   left: 33.2%;
   top: 16.40%;
   transform: translate(-50%, 14px);
 }

 .stats-text-3-v2 {
   left: 51.9%;
   top: 11.15%;
   transform: translate(-50%, 14px);
 }

 .stats-text-4-v2 {
   left: 70.5%;
   top: 17.32%;
   transform: translate(-50%, 14px);
 }

 .stats-text-5-v2 {
   left: 89.2%;
   top: 25.96%;
   transform: translate(-50%, 14px);
 }

 .stats-text-v2.stats-in-view-v2 {
   transform: translate(-50%, 0);
 }

 .stats-number-v2 {
   color: #FFFFFF;
   font-size: clamp(20px, 2.3vw, 40px);
   font-weight: 800;
   margin: 0 0 4px;
   letter-spacing: -0.5px;
 }

 .stats-label-v2 {
   color: #C9C9C2;
   font-size: clamp(9px, 0.85vw, 13px);
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
   margin: 0;
 }

 /* descriptions shown only on mobile stacked layout */
 .stats-desc-v2 {
   display: none;
 }

 /* ===== MOBILE: switch to stacked vertical layout (arc doesn't scale well) ===== */
 @media (max-width: 820px) {

   .stats-pin-track-v2>.stats-section-v2,
   .stats-section-v2 {
     padding: 60px 16px 50px;
   }

   .stats-title-v2 {
     font-size: 24px;
   }

   .stats-heading-v2 {
     margin-bottom: 44px;
   }

   .stats-arc-stage-v2 {
     aspect-ratio: auto;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 34px;
     /* stacked layout has no empty arc band to reclaim */
     margin-bottom: 0;
   }

   .stats-arc-svg-v2 {
     display: none;
   }

   .stats-dot-v2 {
     position: static;
     transform: scale(0.4);
     width: 46px;
     height: 46px;
     order: 1;
   }


   .stats-dot-v2.stats-in-view-v2 {
     transform: scale(1);
   }

   .stats-text-v2 {
     position: static;
     transform: translateY(14px);
     white-space: normal;
     order: 2;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 6px;
   }

   .stats-text-v2.stats-in-view-v2 {
     transform: translateY(0);
   }

   .stats-text-1-v2,
   .stats-text-2-v2,
   .stats-text-3-v2,
   .stats-text-4-v2,
   .stats-text-5-v2 {
     left: auto;
     top: auto;
   }

   .stats-item-group-v2 {
     display: flex;
     flex-direction: column;
     align-items: center;
   }

   .stats-desc-v2 {
     display: block;
     color: #8C8C86;
     font-size: 13.5px;
     line-height: 1.5;
     max-width: 280px;
     margin: 4px 0 0;
   }
 }

 @media (min-width: 1116px) and (max-width: 1416px) {

   /* row-gap only — a column-gap would make the 7 columns stop being exact
      sevenths of the box and the connector branches would no longer land on
      the tiles. Spacing here comes from the 1fr columns instead. */
   .kfa-poster-steps {
     row-gap: 33px !important;
   }
 }

 /* Below the 7-across layout the connector cannot line up with a wrapped
    grid, so restore the original flex-wrap behaviour and drop the tree. */
 @media (max-width: 1115px) {

   /* no tree to line up with, so the poster stops being a fixed-height
      canvas of absolutely placed layers and just flows: heading, then tiles.
      (It used to be pinned at 1900px tall, leaving a screen of empty black.)
      Scoped by ID: the poster is a .row child, and Bootstrap's later-loading
      `.row > *` padding would win a plain class selector. */
   section#keyfocus .kfa-poster {
     height: auto;
     padding: 72px 32px 80px;
   }

   .kfa-poster-headwrap,
   .kfa-poster-steps {
     position: relative;
     top: auto;
   }

   .kfa-poster-headwrap {
     padding: 0;
   }

   .kfa-poster-steps {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 24px;
     max-width: 760px;
     margin-top: 44px;
     padding: 0;
   }

   .kfa-step {
     width: 152px;
   }

   .kfa-poster-connector,
   .kfa-hub {
     display: none;
   }

   /* the entrance delays wait for the tree to draw, which is hidden here */
   .kfa-poster.kfa-in .kfa-step:nth-child(n) {
     transition-delay: 0s;
   }
 }

 @media (max-width: 560px) {
   section#keyfocus .kfa-poster {
     padding: 56px 16px 64px;
   }

   .kfa-poster-steps {
     gap: 14px;
     margin-top: 32px;
   }

   /* two per row; the odd seventh tile centres on its own row */
   .kfa-step {
     width: calc(50% - 7px);
   }

   .kfa-step-box {
     max-width: none;
     min-height: 150px;
     padding: 22px 12px 18px;
     gap: 12px;
   }

   .kfa-step-box svg {
     width: 40px;
     height: 40px;
   }

   .kfa-step-label {
     font-size: 13px;
   }
 }

 /* =====================================================================
    SERIES PARTNERS — static logo grid on white (was a 4-row marquee on black)
    ===================================================================== */
 .ptnrSection {
   width: 100%;
   padding: 84px 24px 88px;
   background: #ffffff;
 }

 /* the global heading rule is white-on-dark; this section is light */
 .ptnrSection .mumbai-feature-heading {
   color: #16101a;
   margin-bottom: 40px;
 }

 /* Ruled grid: 1px "gap" over a line-coloured background reads as hairlines
    between cells, vertical and horizontal. No padding, so nothing shows at
    the outer edge — internal lines only. Column counts are chosen so 42
    logos always fill the last row (42 = 7·6 = 6·7 = 3·14 = 2·21); otherwise
    empty cells would show the line colour as a solid block. */
 .ptnrGrid {
   --ptnr-line: rgba(22, 16, 26, 0.13);
   display: grid;
   grid-template-columns: repeat(7, minmax(0, 1fr));
   gap: 1px;
   padding: 0;
   width: 100%;
   max-width: 1240px;
   margin: 0 auto;
   background: var(--ptnr-line);
 }

 .ptnrLogoCard {
   height: 96px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 18px 22px;
   background: #ffffff;
   transition: background-color .25s ease;
 }

 .ptnrLogoCard:hover {
   background-color: #fbf7f8;
 }

 .ptnrLogoCard img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
   display: block;
 }

 @media (max-width: 1099px) {
   .ptnrGrid {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }

   .ptnrLogoCard {
     height: 88px;
     padding: 16px 18px;
   }
 }

 @media (max-width: 799px) {
   .ptnrGrid {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }

 @media (max-width: 600px) {
   .ptnrSection {
     padding: 60px 16px 64px;
   }
 }

 @media (max-width: 519px) {
   .ptnrGrid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .ptnrLogoCard {
     height: 74px;
     padding: 12px 14px;
   }
 }

 @media (prefers-reduced-motion: reduce) {
   .ptnrLogoCard {
     transition: none;
   }
 }

 .magazine_wrapper_txt {
   font-size: 40px;
   text-align: center;
   font-weight: 700;
   color: #000;
   /* font-family: "Special Gothic Condensed One", sans-serif; */
 }

 .magazines_wrapper {
   padding: 240px 0px 50px;
   background: #070707;
   z-index: 1;
   overflow: hidden;
   position: relative;
 }

 section.magazine {
   padding-top: 45px;
 }

 .home-banner-demo-ul-wrapper {
   position: relative;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
 }

 .home-banner-demo-ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 }

 .home-banner-demo-ul>.tall {
   display: inline-block;
   position: relative;
   margin: 0 31px;
   margin-top: -166px;
   margin-bottom: 80px;
 }

 .home-banner-demo-img-container {
   overflow: hidden;
 }

 .home-banner-demo-thum {
   position: relative;
   display: block;
   width: 160px;
   height: auto;
   max-width: 100%;
 }

 /* pulled up into the covers' bottom margin on desktop */
 .magazine-subscribe {
   position: relative;
   z-index: 2;
   margin-top: -50px;
 }

 .magazine-subscribe a {
   display: inline-block;
   color: #fff;
   text-decoration: none;
   border: 1px solid #c81e3a;
   padding: 10px 14px;
   background-color: #c81e3a;
   border-radius: 5px;
 }

 /* Phones: the covers each carried a -166px top margin, so once they
    stacked one per row they slid up over each other. Two-up grid instead. */
 @media (max-width: 767px) {
   section.magazine {
     padding-top: 56px;
   }

   .magazine_wrapper_txt {
     font-size: 28px;
     padding: 0 16px;
   }

   .magazines_wrapper {
     padding: 28px 0 56px;
   }

   .home-banner-demo-ul {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 20px;
     width: 100%;
     max-width: 380px;
     margin: 0 auto;
   }

   .home-banner-demo-ul>.tall {
     display: block;
     margin: 0;
   }

   .home-banner-demo-thum {
     width: 100%;
     box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.9);
   }

   .magazine-subscribe {
     margin-top: 32px;
   }
 }


 /* ===== Who Attends — two open columns over an Elets NBFC event photo =====
    Layering (bottom → top):
      ::before  the NBFC100 stage photo, desaturated so the brand maroon leads
      ::after   the blend — starts on the same #fff as .wac-section above, fades
                into a maroon tint over the photo, then settles on #0a0a0c to
                meet .fs-wrap below with no seam
      .container  the content, kept above both layers via isolation + z-index */
 .leaders-section {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   background-color: #0a0a0c;
   padding: 180px 0 110px;
 }

 .leaders-section::before {
   content: "";
   position: absolute;
   inset: 0;
   background: url(../images/whyateendsbgnew.webp) center 32% / cover no-repeat;
   filter: saturate(.7) brightness(.85);
   z-index: -2;
 }

 .leaders-section::after {
   content: "";
   position: absolute;
   inset: 0;
   background:
     /* white haze bleeding down from the section above (px stops so the fade
        depth stays the same at every viewport height) */
     linear-gradient(180deg,
       #ffffff 0,
       rgba(255, 255, 255, .9) 30px,
       rgba(255, 255, 255, .5) 90px,
       rgba(255, 255, 255, 0) 170px),
     /* maroon tint → dark base so the cards read and the bottom edge matches .fs-wrap */
     linear-gradient(180deg,
       rgba(10, 10, 12, .3) 0%,
       rgba(48, 7, 22, .68) 45%,
       rgba(10, 10, 12, .92) 82%,
       #0a0a0c 100%);
   z-index: -1;
 }

 .leaders-section .container {
   position: relative;
   z-index: 1;
 }

 /* small centred label — matches the "Who Attends" nav item */
 /* type matches .mumbai-feature-heading ("WHY OUR PLATFORMS ARE DIFFERENT") */
 .ls-eyebrow {
   text-align: center;
   font-family: 'Urbanist', sans-serif;
   font-size: 46px;
   font-weight: 700;
   letter-spacing: 0.5px;
   line-height: 1.15;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 44px;
 }

 @media (max-width: 1080px) {
   .ls-eyebrow {
     font-size: 34px;
   }
 }

 @media (max-width: 640px) {
   .ls-eyebrow {
     font-size: 26px;
   }
 }

 .ls-eyebrow::before,
 .ls-eyebrow::after {
   content: "";
   display: inline-block;
   width: 48px;
   height: 1px;
   background: rgba(217, 169, 74, .6);
   vertical-align: middle;
   margin: 0 14px;
 }

 /* ===== Two open columns, split by a hairline — no card containers ===== */
 .ls-grid {
   position: relative;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0 64px;
 }

 /* soft, edge-less scrim behind the text so it reads over the bright stage
    backdrop in the photo — a vignette, not a box */
 .ls-grid::before {
   content: "";
   position: absolute;
   inset: -48px -72px;
   background: radial-gradient(ellipse 62% 72% at 50% 50%,
       rgba(8, 5, 10, .8) 0%,
       rgba(8, 5, 10, .5) 55%,
       rgba(8, 5, 10, 0) 100%);
   z-index: -1;
   pointer-events: none;
 }

 /* each column shares the parent's two rows, so the titles bottom-align and
    both lists start on the same line even when one title wraps */
 .ls-col {
   display: grid;
   grid-template-rows: subgrid;
   grid-row: span 2;
 }

 .ls-col--eco {
   position: relative;
   padding-left: 64px;
 }

 /* the column divider is a pseudo-element (not a border) so it can be drawn
    in during the entrance */
 .ls-col--eco::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 1px;
   background: rgba(255, 255, 255, .14);
 }

 .ls-col-title {
   align-self: end;
   font-family: 'Urbanist', sans-serif;
   font-size: clamp(22px, 2vw, 27px);
   font-weight: 800;
   line-height: 1.2;
   letter-spacing: -0.01em;
   color: #ffffff;
   margin: 0 0 14px;
   text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
 }

 /* short gold rule under each column title */
 .ls-col-title::after {
   content: "";
   display: block;
   width: 44px;
   height: 2px;
   margin-top: 16px;
   background: linear-gradient(90deg, var(--gold), rgba(217, 169, 74, 0));
 }

 .ls-list,
 .ls-eco {
   list-style: none;
   margin: 0;
   padding: 0;
 }

 /* ----- Leaders list: hairline rows with a gold diamond marker ----- */
 .ls-list li {
   position: relative;
   padding: 15px 0 15px 30px;
   color: #f3efe9;
   font-size: 1rem;
   line-height: 1.5;
   text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
 }

 /* row hairlines are pseudo-elements so the entrance can draw them */
 .ls-list li::after,
 .ls-eco li::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 1px;
   background: rgba(255, 255, 255, .12);
 }

 .ls-list li:last-child::after,
 .ls-eco li:last-child::after {
   display: none;
 }

 /* the diamond echoes the corner mark used in the section above */
 .ls-list li::before {
   content: "";
   position: absolute;
   left: 4px;
   top: 24px;
   width: 8px;
   height: 8px;
   background: var(--gold);
   transform: rotate(45deg);
   box-shadow: 0 0 0 3px rgba(217, 169, 74, .18);
 }

 /* ----- Ecosystem list: outlined gold numerals, white labels ----- */
 .ls-eco li {
   position: relative;
   display: grid;
   grid-template-columns: 62px 1fr;
   align-items: center;
   padding: 12px 0;
   color: #ffffff;
   font-size: 1.04rem;
   font-weight: 600;
   line-height: 1.4;
   text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
 }

 .ls-num {
   font-family: 'Urbanist', sans-serif;
   font-size: 34px;
   font-weight: 900;
   line-height: 1;
   letter-spacing: .02em;
   color: transparent;
   -webkit-text-stroke: 1.2px var(--gold);
   text-shadow: none;
 }

 /* ===== Entrance =====
    JS adds .ls-anim to the section first (this is what hides things), then
    .ls-in once it scrolls into view. If JS never runs, .ls-anim is never
    present and the section simply renders in its final state.

    Order:  photo settles from a soft zoom → eyebrow lines grow out from the
    centre → titles rise, gold rules draw → divider draws → rows stagger in
    from the left, each hairline drawing under it, diamonds popping and the
    numerals landing solid gold before draining to outline. */
 .leaders-section.ls-anim::before {
   opacity: 0;
   transform: scale(1.08);
 }

 .leaders-section.ls-anim.ls-in::before {
   opacity: 1;
   transform: scale(1);
   transition:
     opacity 1.3s ease-out,
     transform 2.4s cubic-bezier(.16, .7, .2, 1);
 }

 .ls-anim .ls-grid::before {
   opacity: 0;
 }

 .ls-anim.ls-in .ls-grid::before {
   opacity: 1;
   transition: opacity 1.2s ease .25s;
 }

 /* eyebrow: text fades in as its tracking tightens, lines grow from the middle */
 .ls-anim .ls-eyebrow {
   opacity: 0;
   letter-spacing: .12em;
 }

 .ls-anim .ls-eyebrow::before,
 .ls-anim .ls-eyebrow::after {
   transform: scaleX(0);
 }

 .ls-anim .ls-eyebrow::before {
   transform-origin: right center;
 }

 .ls-anim .ls-eyebrow::after {
   transform-origin: left center;
 }

 .ls-anim.ls-in .ls-eyebrow {
   opacity: 1;
   letter-spacing: 0.5px;
   transition:
     opacity .8s ease .1s,
     letter-spacing 1s cubic-bezier(.22, .8, .28, 1) .1s;
 }

 .ls-anim.ls-in .ls-eyebrow::before,
 .ls-anim.ls-in .ls-eyebrow::after {
   transform: scaleX(1);
   transition: transform .7s cubic-bezier(.22, .8, .28, 1) .4s;
 }

 /* titles rise; the gold rule draws left → right after they land */
 .ls-anim .ls-col-title {
   opacity: 0;
   transform: translateY(18px);
 }

 .ls-anim .ls-col-title::after {
   transform: scaleX(0);
   transform-origin: left center;
 }

 .ls-anim.ls-in .ls-col-title {
   opacity: 1;
   transform: none;
   transition:
     opacity .7s cubic-bezier(.22, .8, .28, 1) .3s,
     transform .7s cubic-bezier(.22, .8, .28, 1) .3s;
 }

 .ls-anim.ls-in .ls-col--eco .ls-col-title {
   transition-delay: .42s;
 }

 .ls-anim.ls-in .ls-col-title::after {
   transform: scaleX(1);
   transition: transform .6s cubic-bezier(.22, .8, .28, 1) .75s;
 }

 /* column divider draws top → bottom */
 .ls-anim .ls-col--eco::before {
   transform: scaleY(0);
   transform-origin: center top;
 }

 .ls-anim.ls-in .ls-col--eco::before {
   transform: scaleY(1);
   transition: transform 1.1s cubic-bezier(.22, .8, .28, 1) .5s;
 }

 /* rows: --d is each row's slot in the stagger, --o shifts the right column a
    beat later; the pseudo-elements read them through inheritance */
 .ls-list li:nth-child(1), .ls-eco li:nth-child(1) { --d: .55s; }
 .ls-list li:nth-child(2), .ls-eco li:nth-child(2) { --d: .63s; }
 .ls-list li:nth-child(3), .ls-eco li:nth-child(3) { --d: .71s; }
 .ls-list li:nth-child(4), .ls-eco li:nth-child(4) { --d: .79s; }
 .ls-list li:nth-child(5), .ls-eco li:nth-child(5) { --d: .87s; }
 .ls-list li:nth-child(6), .ls-eco li:nth-child(6) { --d: .95s; }
 .ls-list li:nth-child(7), .ls-eco li:nth-child(7) { --d: 1.03s; }
 .ls-eco li { --o: .08s; }

 .ls-anim .ls-list li,
 .ls-anim .ls-eco li {
   opacity: 0;
   transform: translateX(-18px);
 }

 .ls-anim .ls-list li::after,
 .ls-anim .ls-eco li::after {
   transform: scaleX(0);
   transform-origin: left center;
 }

 .ls-anim .ls-list li::before {
   transform: rotate(45deg) scale(0);
 }

 .ls-anim .ls-num {
   color: var(--gold);
 }

 .ls-anim.ls-in .ls-list li,
 .ls-anim.ls-in .ls-eco li {
   opacity: 1;
   transform: none;
   transition:
     opacity .6s cubic-bezier(.22, .8, .28, 1),
     transform .6s cubic-bezier(.22, .8, .28, 1);
   transition-delay: calc(var(--d) + var(--o, 0s));
 }

 .ls-anim.ls-in .ls-list li::after,
 .ls-anim.ls-in .ls-eco li::after {
   transform: scaleX(1);
   transition: transform .8s cubic-bezier(.22, .8, .28, 1);
   transition-delay: calc(var(--d) + var(--o, 0s) + .12s);
 }

 /* diamond pops with a little overshoot once its row has landed */
 .ls-anim.ls-in .ls-list li::before {
   transform: rotate(45deg) scale(1);
   transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
   transition-delay: calc(var(--d) + .22s);
 }

 /* numeral lands solid gold, then the ink drains to the outline */
 .ls-anim.ls-in .ls-num {
   color: transparent;
   transition: color .7s ease;
   transition-delay: calc(var(--d) + var(--o, 0s) + .5s);
 }

 @media (prefers-reduced-motion: reduce) {

   .leaders-section.ls-anim::before,
   .ls-anim .ls-grid::before,
   .ls-anim .ls-eyebrow,
   .ls-anim .ls-eyebrow::before,
   .ls-anim .ls-eyebrow::after,
   .ls-anim .ls-col-title,
   .ls-anim .ls-col-title::after,
   .ls-anim .ls-col--eco::before,
   .ls-anim .ls-list li,
   .ls-anim .ls-eco li,
   .ls-anim .ls-list li::after,
   .ls-anim .ls-eco li::after,
   .ls-anim.ls-in .ls-list li,
   .ls-anim.ls-in .ls-eco li {
     opacity: 1;
     transform: none;
     transition: none;
   }

   .ls-anim .ls-eyebrow {
     letter-spacing: 0.5px;
   }

   .ls-anim .ls-list li::before {
     transform: rotate(45deg);
     transition: none;
   }

   .ls-anim .ls-num,
   .ls-anim.ls-in .ls-num {
     color: transparent;
     transition: none;
   }
 }

 @media (max-width: 991px) {
   .leaders-section {
     padding: 160px 0 90px;
   }

   .ls-grid {
     grid-template-columns: 1fr;
     gap: 0;
   }

   /* single column: back to normal flow, otherwise the subgrid would inherit
      a row-gap between each title and its list */
   .ls-col {
     display: block;
   }

   .ls-col--eco {
     padding-left: 0;
     padding-top: 40px;
     margin-top: 44px;
   }

   /* divider turns horizontal and draws left → right */
   .ls-col--eco::before {
     top: 0;
     bottom: auto;
     left: 0;
     right: 0;
     width: auto;
     height: 1px;
   }

   .ls-anim .ls-col--eco::before {
     transform: scaleX(0);
     transform-origin: left center;
   }

   .ls-anim.ls-in .ls-col--eco::before {
     transform: scaleX(1);
   }
 }

 @media (max-width: 767px) {
   .leaders-section {
     padding: 165px 0 70px;
   }

   .leaders-section::before {
     background-position: center top;
   }

   .ls-grid::before {
     inset: -24px -16px;
   }

   .ls-eyebrow {
     margin-bottom: 32px;
   }

   .ls-eyebrow::before,
   .ls-eyebrow::after {
     width: 20px;
     margin: 0 10px;
   }

   .ls-col-title {
     font-size: 22px;
   }

   .ls-list li {
     font-size: .96rem;
     padding: 13px 0 13px 26px;
   }

   .ls-list li::before {
     top: 21px;
   }

   .ls-eco li {
     grid-template-columns: 50px 1fr;
     font-size: .98rem;
   }

   .ls-num {
     font-size: 28px;
   }
 }

 /* =====================================================================
    PAST GLIMPSES — two continuous photo rows, opposite directions
    Each track holds its 12 photos twice; translating by exactly -50% and
    looping lands on an identical frame, so the seam is invisible.
    ===================================================================== */
 .pg-gallery-section {
   background: #000000;
   padding: 80px 0;
   overflow: hidden;
   font-family: 'Inter', sans-serif;
 }

 /* --- heading sits above the rows, which run edge to edge --- */
 .pg-head {
   text-align: center;
   padding: 0 16px;
   margin-bottom: 36px;
 }

 .pg-head .mumbai-feature-heading {
   margin-bottom: 0;
 }

 .pg-rows {
   display: flex;
   flex-direction: column;
   gap: 6px;
 }

 .pg-marquee {
   position: relative;
   width: 100%;
   overflow: hidden;
   padding: 8px 0;
 }

 .pg-marquee+.pg-marquee {
   margin-top: 10px;
 }

 .pg-track {
   display: flex;
   align-items: center;
   gap: 16px;
   width: max-content;
   will-change: transform;
 }

 /* the gap after the last item must equal the gap between items, or the
    loop point shows a slightly wider space once per cycle */
 .pg-track::after {
   content: "";
   flex: 0 0 0;
 }

 .pg-track--ltr {
   animation: pgScrollLTR 64s linear infinite;
 }

 .pg-track--rtl {
   animation: pgScrollRTL 64s linear infinite;
 }

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

 @keyframes pgScrollLTR {
   from { transform: translateX(-50%); }
   to   { transform: translateX(0); }
 }

 @keyframes pgScrollRTL {
   from { transform: translateX(0); }
   to   { transform: translateX(-50%); }
 }

 .pg-item {
   flex: 0 0 auto;
   width: 340px;
   aspect-ratio: 3 / 2;
   border-radius: 14px;
   overflow: hidden;
   background: #111;
   border: 1px solid rgba(255, 255, 255, 0.08);
   box-shadow: 0 18px 36px -24px rgba(0, 0, 0, 0.95);
 }

 .pg-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .6s cubic-bezier(.22, .8, .28, 1), filter .4s ease;
   filter: saturate(0.92);
 }

 .pg-item:hover .pg-img {
   transform: scale(1.06);
   filter: saturate(1);
 }

 /* tablet: the 38% feature column gets too narrow for its copy — stack it
    above the rows as a banner instead */
 @media (max-width: 991px) {
   .pg-split {
     grid-template-columns: 1fr;
     min-height: 0;
   }

   .pg-feature {
     min-height: 400px;
     padding: 48px 32px 44px;
   }

   .pg-feature::after {
     border-right: 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   }

   .pg-rows {
     padding: 32px 0 40px;
   }
 }

 @media (max-width: 900px) {
   .pg-item {
     width: 270px;
   }

   .pg-track {
     gap: 12px;
   }

   .pg-track--ltr,
   .pg-track--rtl {
     animation-duration: 50s;
   }
 }

 @media (max-width: 520px) {
   .pg-feature {
     min-height: 340px;
     padding: 40px 20px 36px;
   }

   .pg-item {
     width: 220px;
     border-radius: 10px;
   }
 }

 @media (prefers-reduced-motion: reduce) {

   .pg-track--ltr,
   .pg-track--rtl {
     animation: none;
   }

   .pg-img {
     transition: none;
   }
 }

 .wrp-gllery {
   padding-bottom: 39px;
 }

 /* =====================================================================
   HERO MOTION — entrance choreography + ambient animation
   ===================================================================== */

 /* --- ambient light wash drifting behind the copy --- */
 .hero::before {
   content: "";
   position: absolute;
   inset: -20%;
   z-index: 2;
   pointer-events: none;
   background:
     radial-gradient(42% 42% at 18% 42%, rgba(200, 30, 58, 0.30) 0%, rgba(200, 30, 58, 0) 70%),
     radial-gradient(38% 38% at 72% 28%, rgba(217, 169, 74, 0.16) 0%, rgba(217, 169, 74, 0) 70%);
   opacity: 0.9;
   will-change: transform;
   animation: heroAurora 18s ease-in-out infinite alternate;
 }

 @keyframes heroAurora {
   0% {
     transform: translate3d(-3%, -2%, 0) scale(1);
   }

   50% {
     transform: translate3d(3%, 2%, 0) scale(1.08);
   }

   100% {
     transform: translate3d(-2%, 3%, 0) scale(1.02);
   }
 }

 /* --- slow ken-burns on the background video --- */
 .hero .bg-video {
   animation: heroKenBurns 28s ease-in-out infinite alternate;
   will-change: transform;
 }

 @keyframes heroKenBurns {
   from {
     transform: scale(1);
   }

   to {
     transform: scale(1.09);
   }
 }

 /* --- shared entrance keyframes --- */
 @keyframes heroRiseIn {
   from {
     opacity: 0;
     transform: translate3d(0, 34px, 0);
   }

   to {
     opacity: 1;
     transform: translate3d(0, 0, 0);
   }
 }

 /* buttons animate `translate` (not `transform`) so :hover transforms still work */
 @keyframes heroBtnIn {
   from {
     opacity: 0;
     translate: 0 22px;
   }

   to {
     opacity: 1;
     translate: 0 0;
   }
 }

 @keyframes heroWipeIn {
   from {
     opacity: 0;
     transform: translate3d(0, 26px, 0);
     clip-path: inset(0 100% 0 0);
   }

   to {
     opacity: 1;
     transform: translate3d(0, 0, 0);
     clip-path: inset(0 -4% 0 0);
   }
 }

 /* --- the choreography --- */
 .hero-content .patronage-row {
   animation: heroRiseIn 0.9s cubic-bezier(0.22, 0.8, 0.28, 1) 0.1s both;
 }

 h1.headline .outline {
   animation: heroRiseIn 0.9s cubic-bezier(0.22, 0.8, 0.28, 1) 0.3s both;
 }

 h1.headline .solid {
   position: relative;
   animation:
     heroWipeIn 1.05s cubic-bezier(0.22, 0.8, 0.28, 1) 0.5s both,
     heroGoldShift 9s ease-in-out 1.6s infinite alternate;
 }

 /* the gold in the gradient drifts slowly across the words */
 @keyframes heroGoldShift {
   from {
     background-position: 0% 50%;
   }

   to {
     background-position: 100% 50%;
   }
 }

 /* --- CTA buttons, staggered --- */
 .cta-row .btn {
   animation: heroBtnIn 0.75s cubic-bezier(0.22, 0.8, 0.28, 1) both;
 }

 .cta-row .btn:nth-child(1) {
   animation-delay: 1.15s;
 }

 .cta-row .btn:nth-child(2) {
   animation-delay: 1.28s;
 }

 .cta-row .btn:nth-child(3) {
   animation-delay: 1.41s;
 }

 /* --- right-hand medal: fades in, then floats --- */
 .badges .medal {
   animation: heroRiseIn 1s cubic-bezier(0.22, 0.8, 0.28, 1) 0.9s both;
 }

 .badges .medal img {
   animation: heroFloat 6s ease-in-out 2s infinite;
 }

 @keyframes heroFloat {

   0%,
   100% {
     transform: translateY(0) rotate(0deg);
   }

   50% {
     transform: translateY(-12px) rotate(-1.5deg);
   }
 }

 /* --- motion-safe fallback --- */
 @media (prefers-reduced-motion: reduce) {

   .hero::before,
   .hero .bg-video,
   .hero-content .patronage-row,
   h1.headline .outline,
   h1.headline .solid,
   .cta-row .btn,
   .badges .medal,
   .badges .medal img {
     animation: none !important;
     opacity: 1;
     transform: none;
     translate: none;
     clip-path: none;
   }

   /* animation off, but keep the gold visible in the gradient */
   h1.headline .solid {
     background-position: 50% 50%;
   }
 }