/* ============================================================
   ✅ ABOUT PAGE — HERITAGE + PREMIUM
   ✅ Updated: Floating blobs/stars animation-ready (GSAP) + Parallax safe
   ============================================================ */

:root{
  --heritageNavy:#071a33;
  --heritageGold:#c7a04a;
  --heritageGoldSoft: rgba(199,160,74,0.25);
  --heritageText: rgba(255,255,255,0.88);
  --heritageMuted: rgba(255,255,255,0.65);
  --heritageLine: rgba(255,255,255,0.12);
}

body{
  font-family: "Open Sans", system-ui, sans-serif;
}

h1,h2,h3,h4,h5,h6{
  font-family: "Montserrat", system-ui, sans-serif;
  letter-spacing: -0.02em;
}

h1,h2,h3{
  font-weight: 900;
  line-height: 1.1;
}

p{
  line-height: 1.75;
  font-weight: 600;
}

.btn, button, .navcta, .mobilecta{
  font-family: "Montserrat", system-ui, sans-serif;
}

.aboutPage{
  background: #fff;
}

/* ============================================================
   ✅ HERO SECTION
   ============================================================ */

.aboutHero{
  position: relative;
  background: var(--heritageNavy);
  padding: 105px 0 95px;
  overflow: hidden;
}

.aboutHero::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 25% 25%, rgba(199,160,74,0.20), transparent 55%),
    radial-gradient(circle at 80% 35%, rgba(255,255,255,0.08), transparent 55%);
  pointer-events:none;
}
/* ============================================================
   ✅ Hero Spotlight Glow (Animated)
   ============================================================ */

.aboutHeroSpotlight{
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 40% 30%, rgba(199,160,74,0.18), transparent 55%),
    radial-gradient(circle at 70% 50%, rgba(255,255,255,0.06), transparent 62%);
  pointer-events:none;
  z-index: 1;
  filter: blur(10px);
  opacity: 0.9;
  transform: translate3d(0,0,0);
}

/* ============================================================
   ✅ Gold/Silver Shimmer Title (Animated)
   ============================================================ */

.aboutHeroTitle span:not(.goldShimmer){
  background-size: 220% auto;
  background-position: 0% center;
  animation: heroShimmer 6s linear infinite;
}

@keyframes heroShimmer{
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.aboutHeroWrap{
  position: relative;
  z-index: 2;
  text-align: center;
}

.aboutHeroTag{
  display: inline-block;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 0.85rem;
  color: var(--heritageGold);
}

.aboutHeroTitle{
  margin-top: 20px;
  font-size: clamp(2.4rem, 4vw, 4.3rem);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -0.04em;
  color: #fff;
}

/* ✅ Gold + silver premium gradient */
.aboutHeroTitle span:not(.goldShimmer){
  background: linear-gradient(90deg, #c7a04a 0%, #f3f3f3 45%, #c7a04a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.aboutHeroText{
  margin: 18px auto 0;
  max-width: 70ch;
  font-size: 1.05rem;
  line-height: 1.75;
  font-weight: 600;
  color: var(--heritageMuted);
}

/* ============================================================
   ✅ FLOATING BLOBS / STARS (Animation-ready)
   - GSAP will animate transform/opacity
   - keep GPU-friendly transforms
   ============================================================ */

.aboutFloatStar{
  position:absolute;
  width: 170px;
  height: 170px;
  opacity: 0.16;
  pointer-events:none;
  border-radius: 999px;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
  background: radial-gradient(circle at 30% 30%,
    rgba(199,160,74,0.90),
    rgba(11,74,162,0.10),
    rgba(0,0,0,0) 72%
  );
  mix-blend-mode: screen;
  filter: blur(1px);
}

/* positions */
.aboutFloatStar.star1{ top: 30px; left: 5%; }
.aboutFloatStar.star2{ top: 140px; right: 7%; width: 140px; height: 140px; opacity: 0.14; }
.aboutFloatStar.star3{ bottom: 40px; left: 42%; width: 220px; height: 220px; opacity:0.10; }

/* mobile tuning */
@media(max-width:640px){
  .aboutFloatStar.star1{ left: -8%; top: 20px; opacity: 0.12; }
  .aboutFloatStar.star2{ right: -10%; top: 120px; opacity: 0.10; }
  .aboutFloatStar.star3{ left: 36%; bottom: 10px; opacity: 0.08; }
}

/* ============================================================
   ✅ LEGACY STRIP
   ============================================================ */

.aboutLegacyStrip{
  background: #fdfaf2;
  border-top: 1px solid rgba(199,160,74,0.18);
  border-bottom: 1px solid rgba(199,160,74,0.18);
  padding: 28px 0;
}

.aboutLegacyGrid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  text-align:center;
}

.legacyStat{
  font-weight: 900;
  font-size: 1.35rem;
  color: #071a33;
}

.legacyStat span{
  display:block;
  font-size: 0.9rem;
  font-weight: 800;
  color: rgba(7,26,51,0.65);
  margin-top: 6px;
}

@media(max-width:850px){
  .aboutLegacyGrid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ============================================================
   ✅ BASE SECTION STYLE
   ============================================================ */

.aboutSection{
  padding: 90px 0;
  background: #fff;
}

.aboutSection.altBg{
  background: #f6f8fc;
}

.aboutSectionWrap{
  max-width: 980px;
}

.aboutSectionTitle{
  font-size: clamp(2rem, 2.6vw, 3rem);
  font-weight: 900;
  color: #071a33;
  letter-spacing: -0.03em;
}

.aboutSectionText{
  margin-top: 14px;
  font-size: 1.05rem;
  line-height: 1.75;
  font-weight: 600;
  color: rgba(7,26,51,0.72);
}

/* ============================================================
   ✅ REVEALS (fade up)
   ============================================================ */

.aboutReveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.aboutReveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   ✅ OUR HERITAGE — MUSEUM EXHIBIT REVAMP (Premium)
============================================================ */

.heritageExhibitSection{
  padding: 110px 0;
  background: #071a33;
  position: relative;
  overflow: hidden;
}

/* grain overlay */
.heritageExhibitSection::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E");
  opacity:0.16;
  pointer-events:none;
  mix-blend-mode: overlay;
}

/* ============================================================
   ✅ Header
============================================================ */

.heritageExhibitHeader{
  text-align:center;
  max-width: 920px;
  margin: 0 auto 60px;
  position: relative;
  z-index: 2;
}

.heritageExhibitTag{
  display:inline-block;
  font-weight:900;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  font-size: 0.85rem;
  color: rgba(199,160,74,0.95);
}

.heritageExhibitTitle{
  margin-top: 18px;
  font-size: clamp(2.3rem, 3.5vw, 3.8rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #fff;
}

.heritageExhibitTitle span{
  background: linear-gradient(90deg,#c7a04a 0%,#f3f3f3 45%,#c7a04a 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-size: 200% 100%;
}

.heritageExhibitSub{
  margin-top: 16px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.8;
  color: rgba(255,255,255,0.70);
}

/* ============================================================
   ✅ Exhibit Frame (luxury card)
============================================================ */

.heritageExhibitFrame{
  position: relative;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 30px;
  padding: 48px;
  max-width: 1120px;
  margin: 0 auto;
  box-shadow: 0 45px 140px rgba(0,0,0,0.40);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.heritageExhibitFrame::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  border: 2px solid rgba(199,160,74,0.22);
  pointer-events:none;
}

/* film edge vignette */
.heritageExhibitFrame::after{
  content:"";
  position:absolute;
  inset:-20%;
  background: radial-gradient(circle at 50% 20%, rgba(255,255,255,0.10), transparent 70%);
  opacity:0.9;
  pointer-events:none;
}

/* ============================================================
   ✅ Spotlight Cone
============================================================ */
.heritageSpotlightCone{
  position:absolute;
  top:-160px;
  left:50%;
  width: 540px;
  height: 600px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 0%, rgba(199,160,74,0.22), transparent 70%);
  filter: blur(2px);
  opacity:0.65;
  pointer-events:none;
}

/* ============================================================
   ✅ Floating Dust Orbs
============================================================ */

.heritageDust{
  position:absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199,160,74,0.22), transparent 70%);
  opacity:0.55;
  pointer-events:none;
  filter: blur(4px);
}

.heritageDust.dust1{ top: 40px; left:-120px; }
.heritageDust.dust2{ bottom:-140px; right:-140px; opacity:0.35; }

/* ============================================================
   ✅ Content Grid
============================================================ */

.heritageExhibitInner{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 34px;
  position: relative;
  z-index: 2;
}

/* ============================================================
   ✅ Left Museum Plaque Panel
============================================================ */

.heritagePlaquePanel{
  position: relative;
  border-radius: 26px;
  padding: 32px 30px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(199,160,74,0.30);
  box-shadow: 0 30px 90px rgba(0,0,0,0.18);
  overflow:hidden;
}

/* parchment texture */
.heritagePlaquePanel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 25% 30%, rgba(199,160,74,0.14), transparent 60%),
    radial-gradient(circle at 80% 60%, rgba(7,26,51,0.08), transparent 70%);
  opacity:0.7;
  pointer-events:none;
}

.museumLabel{
  display:inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(7,26,51,0.88);
  color: rgba(7,26,51,0.88);
  border: 1px solid rgba(199,160,74,0.35);
  margin-bottom: 16px;
}

.heritagePlaqueText{
  font-size: 1.05rem;
  line-height: 1.85;
  font-weight: 600;
  color: rgba(7,26,51,0.80);
  position: relative;
  z-index:2;
}

/* signature */
.heritageSignatureRow{
  margin-top: 24px;
  display:flex;
  align-items:center;
  gap: 12px;
  opacity:0.85;
}

.heritageSignatureRow .sigLine{
  width: 58px;
  height: 2px;
  background: rgba(199,160,74,0.70);
  border-radius: 999px;
}

.heritageSignatureRow .sigName{
  font-weight: 900;
  color: rgba(7,26,51,0.72);
}

/* ============================================================
   ✅ Right Side: Mini Exhibit Cards
============================================================ */

.heritageHighlightStack{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.heritageMiniCard{
  padding: 18px 18px;
  border-radius: 22px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 20px 60px rgba(0,0,0,0.20);
  transition: 0.3s ease;
}

.heritageMiniCard:hover{
  transform: translateY(-5px);
  border-color: rgba(199,160,74,0.36);
  box-shadow: 0 30px 90px rgba(0,0,0,0.28);
}

.heritageMiniCard h4{
  font-size: 1rem;
  font-weight: 900;
  color: rgba(255,255,255,0.92);
}

.heritageMiniCard p{
  margin-top: 9px;
  font-size: 0.96rem;
  line-height: 1.7;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
}

/* ============================================================
   ✅ Responsive
============================================================ */

@media(max-width: 980px){
  .heritageExhibitInner{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .heritageExhibitFrame{
    padding: 28px;
  }
}

@media(max-width: 520px){
  .heritageExhibitSection{
    padding: 85px 0;
  }

  .heritagePlaqueText{
    font-size: 1rem;
  }

  .heritageExhibitFrame{
    border-radius: 22px;
    padding: 22px;
  }
}

/* ============================================================
   ✅ CHAIRPERSON MESSAGE SECTION — PREMIUM STYLE
============================================================ */

.chairMessageSection{
  padding: 100px 0;
  background: #fffaf1;
  position: relative;
  overflow: hidden;
}

/* Premium floating ornaments */
.chairGlowOrb{
  position:absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  top: -160px;
  left: -160px;
  background: radial-gradient(circle, rgba(199,160,74,0.22), transparent 65%);
  filter: blur(10px);
  opacity: 0.9;
  pointer-events: none;
}

.chairGoldDust{
  position:absolute;
  width: 640px;
  height: 640px;
  right: -260px;
  bottom: -340px;
  border-radius: 50%;
  border: 1px dashed rgba(199,160,74,0.22);
  opacity: 0.65;
  pointer-events: none;
}

.chairMessageGrid{
  display:grid;
  grid-template-columns: 0.9fr 1.2fr;
  gap: 44px;
  align-items: start;
  position: relative;
  z-index: 2;
}

/* ============================================================
   ✅ Left portrait
============================================================ */

.chairPortrait{
  position: sticky;
  top: 120px;
}

.chairPortraitFrame{
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(199,160,74,0.35);
  border-radius: 26px;
  padding: 14px;
  box-shadow: 0 35px 110px rgba(7,26,51,0.10);
}

.chairPortraitFrame img{
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 20px;
  display:block;
}

.chairMeta{
  text-align:center;
  margin-top: 18px;
}

.chairName{
  font-size: 1.1rem;
  font-weight: 900;
  color: #071a33;
}

.chairRole{
  margin-top: 6px;
  font-size: 0.92rem;
  font-weight: 700;
  color: rgba(7,26,51,0.65);
}

/* ============================================================
   ✅ Right content
============================================================ */

.chairTag{
  display:inline-block;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--heritageGold);
}

.chairTitle{
  margin-top: 16px;
  font-size: clamp(2rem, 3vw, 3.1rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #071a33;
}

.chairTitle span{
  background: linear-gradient(90deg,#c7a04a 0%,#f0f0f0 45%,#c7a04a 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ✅ message layout */
.chairMessageBody{
  margin-top: 22px;
  padding: 26px 26px;
  border-radius: 26px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(199,160,74,0.25);
  box-shadow: 0 24px 80px rgba(7,26,51,0.08);
  max-height: 520px;
  overflow: auto;
  position: relative;
}

/* ✅ luxury scroll */
.chairMessageBody::-webkit-scrollbar{
  width: 6px;
}
.chairMessageBody::-webkit-scrollbar-thumb{
  background: rgba(199,160,74,0.45);
  border-radius: 20px;
}

/* paragraph styling */
.chairMessageBody p{
  margin-bottom: 16px;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.8;
  color: rgba(7,26,51,0.78);
}

/* ✅ Quote highlight inside message */
.chairQuote{
  margin: 24px 0;
  padding: 18px 18px;
  border-radius: 18px;
  background: rgba(199,160,74,0.12);
  border: 1px solid rgba(199,160,74,0.22);
}

.chairQuote p{
  margin:0;
  font-weight: 900;
  color: rgba(7,26,51,0.86);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* signature row */
.chairSignatureRow{
  margin-top: 26px;
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.chairSignature{
  display:flex;
  align-items:center;
  gap: 12px;
}

.sigLine{
  width: 52px;
  height: 2px;
  background: rgba(199,160,74,0.65);
  border-radius: 999px;
}

.sigName{
  font-weight: 900;
  color: rgba(7,26,51,0.76);
}

/* CTA */
.chairBtn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 14px;
  background: #071a33;
  color:white;
  font-weight: 900;
  font-size: 0.95rem;
  text-decoration:none;
  transition: 0.25s ease;
}

.chairBtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(7,26,51,0.22);
}

/* ============================================================
   ✅ Responsive
============================================================ */

@media(max-width: 980px){
  .chairMessageGrid{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .chairPortrait{
    position: relative;
    top:auto;
  }

  .chairPortraitFrame img{
    height: 380px;
  }

  .chairMessageBody{
    max-height: 420px;             /* you can increase/decrease */
    overflow-y: auto;             /* scroll works */
    padding: 20px;
    -webkit-overflow-scrolling: touch;
  }

  .chairMessageBody::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:60px;
    pointer-events:none;
    background: linear-gradient(
      to bottom,
      rgba(255,250,241,0),
      rgba(255,250,241,0.95)
    );
  }
}

/* ============================================================
   ✅ INSTITUTIONS & FOCUS AREAS (Option C)
   Premium card grid — Heritage spotlight vibe
============================================================ */

.instSection{
  padding: 105px 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

/* floating orbs */
.instOrb{
  position:absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199,160,74,0.16), transparent 65%);
  pointer-events:none;
  opacity: 0.75;
  filter: blur(8px);
}
.instOrb.orb1{ top:-220px; right:-180px; }
.instOrb.orb2{ bottom:-260px; left:-220px; opacity:0.55; }

.instHeader{
  text-align:center;
  max-width: 900px;
  margin: 0 auto 52px;
  position: relative;
  z-index: 2;
}

.instTag{
  display:inline-block;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.85rem;
  color: var(--heritageGold);
}

.instTitle{
  margin-top: 18px;
  font-size: clamp(2.1rem, 3.2vw, 3.4rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #071a33;
}

.instTitle span{
  background: linear-gradient(90deg, #c7a04a 0%, #f0f0f0 45%, #c7a04a 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.instSub{
  margin-top: 14px;
  font-size: 1.05rem;
  line-height: 1.75;
  font-weight: 600;
  color: rgba(7,26,51,0.70);
}

/* ============================================================
   ✅ Grid
============================================================ */

.instGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  position: relative;
  z-index: 2;
}

/* ============================================================
   ✅ Card
============================================================ */

.instCard{
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 28px 26px 26px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(7,26,51,0.10);
  box-shadow: 0 24px 80px rgba(7,26,51,0.08);
  backdrop-filter: blur(10px);
  transition: 0.28s ease;
  transform: translateY(0);
  cursor: default;
}

/* hover */
.instCard:hover{
  transform: translateY(-6px);
  border-color: rgba(199,160,74,0.35);
  box-shadow: 0 34px 100px rgba(7,26,51,0.12);
}

/* glow inside card */
.instGlow{
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 25% 25%, rgba(199,160,74,0.22), transparent 62%);
  opacity: 0;
  transition: 0.28s ease;
  pointer-events:none;
}
.instCard:hover .instGlow{
  opacity: 1;
}

/* Icon */
.instIcon{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 1.55rem;
  font-weight: 900;
  margin-bottom: 18px;
  background: rgba(199,160,74,0.12);
  border: 1px solid rgba(199,160,74,0.20);
}

/* Title */
.instCardTitle{
  font-size: 1.18rem;
  font-weight: 900;
  color: #071a33;
  letter-spacing: -0.02em;
}

/* Text */
.instCardText{
  margin-top: 10px;
  font-size: 0.98rem;
  line-height: 1.7;
  font-weight: 600;
  color: rgba(7,26,51,0.72);
}

/* Chips */
.instMetaRow{
  margin-top: 18px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.instChip{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(7,26,51,0.06);
  border: 1px solid rgba(7,26,51,0.10);
  font-size: 0.85rem;
  font-weight: 800;
  color: rgba(7,26,51,0.75);
}

/* Divider */
.instDivider{
  margin-top: 60px;
  height: 1px;
  background: linear-gradient(to right,
    rgba(199,160,74,0),
    rgba(199,160,74,0.55),
    rgba(199,160,74,0)
  );
}

/* ============================================================
   ✅ Responsive
============================================================ */

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

@media(max-width: 650px){
  .instSection{
    padding: 80px 0;
  }

  .instGrid{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .instCard{
    padding: 22px 20px;
    border-radius: 20px;
  }

  .instIcon{
    width: 50px;
    height: 50px;
    border-radius: 14px;
  }
}
/* ============================================================
✅ LEADERSHIP BOARD — Premium Horizontal Scroll
============================================================ */

.leadershipSection{
  position: relative;
  background: #fffaf1;
  padding: 100px 0;
  overflow: hidden;
}

.leadershipSection::before{
  content:"";
  position:absolute;
  inset:-45%;
  background:
    radial-gradient(circle at 20% 20%, rgba(199,160,74,0.15), transparent 55%),
    radial-gradient(circle at 80% 65%, rgba(11,134,211,0.10), transparent 60%);
  pointer-events:none;
  z-index:0;
}

/* film grain overlay */
.leadershipSection::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0.06;
  mix-blend-mode:overlay;
  background-image:url("https://grainy-gradients.vercel.app/noise.svg");
  background-size:240px;
  z-index:1;
}

.leadershipHeader{
  text-align:center;
  max-width:900px;
  margin:0 auto 44px;
  position:relative;
  z-index:2;
}

.leadershipTitle{
  font-size: clamp(2.4rem, 3.4vw, 3.8rem);
  font-weight:900;
  letter-spacing:-0.03em;
  color:#071a33;
  margin-top:18px;
}

.leadershipTitle span{
  background: linear-gradient(90deg,#c7a04a 0%,#f0f0f0 45%,#c7a04a 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.leadershipSub{
  margin-top:14px;
  font-size:1.05rem;
  font-weight:700;
  line-height:1.7;
  color: rgba(7,26,51,0.70);
}

/* tabs */
.leadershipTabs{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}

.leadTab{
  border:1px dashed rgba(7,26,51,0.35);
  background:transparent;
  padding:12px 22px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
  transition:0.25s ease;
}

.leadTab.is-active{
  background: #071a33;
  color:white;
  border-color: rgba(199,160,74,0.50);
  box-shadow: 0 18px 45px rgba(7,26,51,0.25);
}

/* panels */
.leadershipPanel{ display:none; }
.leadershipPanel.is-active{ display:block; }

/* slider wrapper + fades */
.leadershipSliderWrap{
  position:relative;
  z-index:2;
}

.leadershipFade{
  position:absolute;
  top:0;
  bottom:0;
  width: 90px;
  z-index:5;
  pointer-events:none;
}

.leadershipFade.left{
  left:0;
  background: linear-gradient(to right, #fffaf1 0%, rgba(255,250,241,0) 100%);
}

.leadershipFade.right{
  right:0;
  background: linear-gradient(to left, #fffaf1 0%, rgba(255,250,241,0) 100%);
}

.leadershipSlider{
  display:flex;
  gap:18px;
  overflow-x:auto;
  padding: 12px 10px 30px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}

.leadershipSlider::-webkit-scrollbar{ height:7px; }
.leadershipSlider::-webkit-scrollbar-thumb{
  background: rgba(199,160,74,0.45);
  border-radius: 999px;
}

/* cards */
.leadCard{
  scroll-snap-align:start;
  flex: 0 0 280px;
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(199,160,74,0.22);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 25px 75px rgba(7,26,51,0.10);
  cursor:pointer;
  transition:0.25s ease;
  position:relative;
  overflow:hidden;
  transform-style:preserve-3d;
}

.leadCard:hover{
  transform: translateY(-6px);
  box-shadow: 0 32px 90px rgba(7,26,51,0.14);
  border-color: rgba(199,160,74,0.40);
}

/* subtle grain inside each card */
.leadCard::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0.06;
  mix-blend-mode:overlay;
  background-image:url("https://grainy-gradients.vercel.app/noise.svg");
  background-size:200px;
}

.leadImg{
  border-radius: 18px;
  overflow:hidden;
  height: 250px;
  background: #f1f1f1;
}

.leadImg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:0.25s ease;
}

.leadInfo{
  text-align:left;
  padding: 14px 4px 6px;
}

.leadInfo h3{
  font-size: 1.03rem;
  font-weight:900;
  color:#071a33;
  line-height:1.25;
}

.leadInfo p{
  margin-top:6px;
  font-size:0.93rem;
  font-weight:800;
  color: rgba(7,26,51,0.62);
}

/* responsive */
@media(max-width:620px){
  .leadCard{ flex: 0 0 78vw; }
  .leadershipFade{ width: 55px; }
}

/* ============================================================
✅ MODAL
============================================================ */

.leadModal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}

.leadModal.open{ display:block; }

.leadModalBackdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
}

.leadModalBox{
  position:relative;
  width:min(920px, 92vw);
  background: rgba(255,255,255,0.95);
  margin: 7vh auto;
  border-radius: 26px;
  padding: 22px;
  border: 1px solid rgba(199,160,74,0.30);
  box-shadow: 0 45px 140px rgba(0,0,0,0.35);
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 22px;
  overflow:hidden;
}

.leadModalClose{
  position:absolute;
  top:14px;
  right:14px;
  width:40px;
  height:40px;
  border-radius: 999px;
  border: none;
  cursor:pointer;
  font-weight:900;
  background: rgba(7,26,51,0.10);
}

.leadModalImg img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:18px;
}

.leadModalInfo h3{
  font-size: 1.5rem;
  font-weight:900;
  color:#071a33;
}

.leadModalInfo p{
  margin-top: 8px;
  font-weight:800;
  color: rgba(7,26,51,0.70);
}

.leadModalBio{
  margin-top: 16px;
  font-size: 1rem;
  font-weight:700;
  line-height: 1.75;
  color: rgba(7,26,51,0.75);
}

@media(max-width:880px){
  .leadModalBox{
    grid-template-columns: 1fr;
  }
  .leadModalImg img{
    height: 320px;
  }
}

/* ============================================================
   ✅ TIMELINE SECTION — VINTAGE + MUSEUM PREMIUM
============================================================ */

.aboutTimelineSection{
  padding: 110px 0;
  background: #071a33;
  position: relative;
  overflow: hidden;
}

/* subtle grain overlay */
.aboutTimelineSection::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
  opacity:0.14;
  pointer-events:none;
  mix-blend-mode: overlay;
}

.aboutTimelineHeader{
  text-align:center;
  max-width: 920px;
  margin: 0 auto 70px;
  position: relative;
  z-index: 2;
}

.aboutTimelineTag{
  display:inline-block;
  font-weight:900;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.85rem;
  color: rgba(199,160,74,0.95);
}

.aboutTimelineTitle{
  margin-top: 16px;
  font-size: clamp(2.3rem, 3.3vw, 3.6rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #fff;
}

.aboutTimelineTitle span:not(.goldShimmer){
  background: linear-gradient(90deg,#c7a04a 0%,#f0f0f0 45%,#c7a04a 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.aboutTimelineSub{
  margin-top: 14px;
  font-size: 1.05rem;
  font-weight: 600;
  color: rgba(255,255,255,0.68);
  line-height: 1.75;
}

/* ============================================================
   ✅ Timeline Wrap
============================================================ */

.timelineWrap{
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 0 40px;
  z-index: 2;
}

/* ✅ Main connector line */
.timelineLine{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  background: linear-gradient(to bottom,
    rgba(199,160,74,0.12),
    rgba(199,160,74,0.55),
    rgba(199,160,74,0.12)
  );
  opacity:0.9;
}

/* ✅ Gold shimmer trail layer */
.timelineShimmer{
  position:absolute;
  left:50%;
  top:-60px;
  width:10px;
  height:120px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,255,255,0.85), rgba(199,160,74,0.0) 70%);
  filter: blur(0.2px);
  opacity: 0;
  pointer-events:none;
  z-index:3;
}

/* ============================================================
   ✅ Timeline Item base
============================================================ */

.timelineItem{
  position: relative;
  display:flex;
  justify-content: flex-start;
  gap: 20px;
  padding: 18px 0;
}

.timelineItem.left{
  justify-content:flex-end;
}

.timelineItem.right{
  justify-content:flex-start;
}

/* ✅ DOT */
.timelineDot{
  position:absolute;
  left:50%;
  top: 32px;
  width:14px;
  height:14px;
  transform:translateX(-50%);
  border-radius:50%;
  background: rgba(199,160,74,0.95);
  box-shadow: 0 0 22px rgba(199,160,74,0.45);
  z-index:6;
}

.timelineDot::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  border:1px solid rgba(199,160,74,0.40);
  opacity:0;
  transform: scale(0.6);
}

.timelineDot.pulse::after{
  opacity:1;
  animation: dotPing 0.8s ease forwards;
}

@keyframes dotPing{
  0%{ transform: scale(0.6); opacity:0; }
  35%{ opacity:0.55; }
  100%{ transform: scale(1.7); opacity:0; }
}

/* ✅ YEAR opposite card */
.timelineYear{
  position:absolute;
  top: 20px;
  font-weight:900;
  font-size:0.95rem;
  color: rgba(255,255,255,0.78);
  letter-spacing:0.16em;
  text-transform:uppercase;
  z-index:6;
  white-space:nowrap;
}

/* left side card => year goes right side */
.timelineItem.left .timelineYear{
  right:calc(50% + 32px);
  text-align:right;
}

/* right card => year goes left side */
.timelineItem.right .timelineYear{
  left:calc(50% + 32px);
  text-align:left;
}

/* ============================================================
   ✅ Timeline Card — Vintage museum
============================================================ */

.timelineCard{
  width: min(430px, 100%);
  padding: 22px 22px;
  border-radius: 22px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 30px 90px rgba(0,0,0,0.30);
  backdrop-filter: blur(10px);
  position: relative;
  overflow:hidden;
}

/* film edge fade overlay */
.timelineCard::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.10), transparent 65%);
  opacity:0.8;
  pointer-events:none;
}

.timelineCard::after{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 30% 20%, rgba(199,160,74,0.14), transparent 60%),
    radial-gradient(circle at 80% 40%, rgba(255,255,255,0.08), transparent 65%);
  opacity:0.6;
  pointer-events:none;
}

.timelineCard h3{
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
}

.timelineCard p{
  margin-top: 10px;
  font-size: 0.98rem;
  line-height: 1.75;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
}

/* ============================================================
   ✅ Photo preview inside card
============================================================ */

.timelinePhoto{
  margin-top: 14px;
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  overflow:hidden;
  background: rgba(0,0,0,0.18);
  position: relative;
  cursor:pointer;
}

.timelinePhoto img{
  width:100%;
  height: 260px;
  object-fit:cover;
  display:block;
  filter: sepia(0.18) contrast(1.05) brightness(0.95);
  transition: transform 0.5s ease;
}

.timelinePhoto:hover img{
  transform: scale(1.05);
}

.timelineTap{
  position:absolute;
  bottom: 10px;
  right: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(7,26,51,0.75);
  border: 1px solid rgba(199,160,74,0.35);
  color: rgba(255,255,255,0.90);
  font-weight:900;
  font-size:0.78rem;
}

/* ============================================================
   ✅ Modal
============================================================ */
.timelineModal{
  position: fixed;
  inset:0;
  display:none;
  z-index: 9999;
}

.timelineModal.is-open{
  display:block;
}

.timelineModalBackdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(10px);
}

.timelineModalInner{
  position: relative;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  max-width: 920px;
  width: 92%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 22px;
  overflow:hidden;
  box-shadow: 0 35px 120px rgba(0,0,0,0.40);
}

.timelineModalImg{
  width:100%;
  display:block;
  max-height: 78vh;
  object-fit: contain;
  background: rgba(0,0,0,0.25);
}

.timelineModalClose{
  position:absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(7,26,51,0.65);
  color: white;
  font-weight:900;
  cursor:pointer;
  z-index: 3;
}

/* ============================================================
   ✅ Responsive: mobile keeps left-line
============================================================ */

@media(max-width:900px){

  .timelineLine,
  .timelineShimmer,
  .timelineDot{
    left: 22px;
    transform: scaleY(0);
  }

  .timelineDot{
    transform:none;
  }

  .timelineShimmer{
    transform:none;
  }

  .timelineItem{
    justify-content:flex-start !important;
    padding-left: 44px;
  }

  .timelineYear{
    position:relative;
    top:0;
    left:0 !important;
    right:auto !important;
    margin-bottom:10px;
    text-align:left !important;
    letter-spacing: 0.12em;
  }

  .timelineCard{
    width:100%;
  }
}

/* ============================================================
   ✅ Chairman Legacy Timeline (SIET About Style)
   ============================================================ */

.chairLegacySection{
  padding: 90px 0;
  background: #ffffff;
}

.chairLegacyTitle{
  text-align: center;
  font-size: clamp(2.1rem, 3vw, 3.2rem);
  font-weight: 900;
  color: #071a33;
  margin-bottom: 48px;
}

.chairLegacyTitle span{
  color: #0ba5ff;
  font-family: "Georgia", serif;
  font-style: italic;
  font-weight: 700;
}

/* ✅ Track (scrollable) */
.chairLegacyTrack{
  position: relative;
  display: flex;
  gap: 28px;
  overflow-x: auto;
  padding: 34px 18px 54px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.chairLegacyTrack::-webkit-scrollbar{
  height: 6px;
}
.chairLegacyTrack::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.18);
  border-radius: 99px;
}

/* ✅ Center dotted line */
.chairLegacyTrack::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 72px;
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    rgba(255,255,255,0.18),
    rgba(255,255,255,0.18) 8px,
    transparent 8px,
    transparent 16px
  );
  opacity: 0.9;
}

/* ✅ Each item */
.chairLegacyItem{
  min-width: 240px;
  max-width: 260px;
  scroll-snap-align: center;
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  transition: 0.35s ease;
}

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

/* ✅ Pill */
.chairLegacyPill{
  width: fit-content;
  margin: 0 auto;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--heritageGold);
  color: white;
  font-weight: 900;
  font-size: 0.95rem;
  box-shadow: 0 12px 28px rgba(199,160,74,0.28);
}

/* ✅ Dot */
.chairLegacyDot{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--heritageGold);
  margin: 28px auto 0;
  box-shadow: 0 0 18px rgba(199,160,74,0.65);
  position: relative;
}

.chairLegacyDot::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius: 50%;
  border: 2px solid rgba(11,165,255,0.22);
}

/* ✅ Name box */
.chairLegacyName{
  margin: 28px auto 0;
  text-align: center;
  padding: 12px 14px;
  border-radius: 10px;
  background: #ffffff;
  font-weight: 800;
  font-size: 0.96rem;
  color: #071a33;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

/* ✅ Active highlight */
.chairLegacyItem.is-active{
  transform: scale(1.04);
}

.chairLegacyItem.is-active .chairLegacyName{
  background: #071a33;
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(199,160,74,0.40);
}

/* improve desktop feel + drag */
.chairLegacyTrack{
  cursor: grab;
  user-select: none;               /* prevent text selection while dragging */
  scroll-behavior: smooth;         /* nice wheel snap */
  overscroll-behavior-x: contain;  /* stop page bounce horizontally */
  touch-action: pan-y;             /* allow vertical page scroll, keep horizontal drag */
}

.chairLegacyTrack.is-dragging{
  cursor: grabbing;
  scroll-behavior: auto;           /* smoother while dragging */
}

.chairLegacyTrack.is-dragging .chairLegacyItem{
  pointer-events: none;            /* avoid accidental button clicks during drag */
}

/* ✅ Mobile */
@media(max-width: 640px){
  .chairLegacyTrack{
    gap: 18px;
    padding: 28px 10px 52px;
  }

  .chairLegacyItem{
    min-width: 210px;
  }

  .chairLegacyName{
    font-size: 0.9rem;
  }
}
/* ============================================================
   ✅ FOUNDING VISIONARIES — Museum Premium Section
============================================================ */

.foundersMuseumSection{
  position: relative;
  padding: 110px 0;
  background: #071a33;
  overflow: hidden;
  border-radius: 28px;
}

.foundersMuseumWrap{
  position: relative;
  z-index: 5;
}

/* ============================================================
   ✅ Spotlight Cones
============================================================ */

.museumSpotlight{
  position:absolute;
  width: 520px;
  height: 820px;
  top: -160px;
  pointer-events:none;
  opacity: 0.75;
  filter: blur(14px);
  mix-blend-mode: screen;
  transform-origin: top center;
}

.museumSpotlight.cone1{
  left: 8%;
  background: radial-gradient(circle at 50% 0%,
    rgba(255,255,255,0.14),
    rgba(199,160,74,0.05),
    transparent 70%);
  transform: rotate(-8deg);
}

.museumSpotlight.cone2{
  right: 7%;
  background: radial-gradient(circle at 50% 0%,
    rgba(255,255,255,0.12),
    rgba(199,160,74,0.04),
    transparent 70%);
  transform: rotate(9deg);
}

/* ============================================================
   ✅ Floating Museum Dust (tiny glow)
============================================================ */
.museumDust{
  position:absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  filter: blur(1px);
  opacity: 0.6;
  pointer-events:none;
  z-index: 2;
}

.museumDust.d1{ top: 38%; left: 20%; }
.museumDust.d2{ top: 62%; right: 24%; width: 10px; height:10px; opacity:0.45;}
.museumDust.d3{ top: 72%; left: 52%; width: 18px; height:18px; opacity:0.25;}

/* ============================================================
   ✅ Header
============================================================ */
.foundersHeader{
  text-align: center;
  max-width: 850px;
  margin: 0 auto 70px;
}

.foundersTitle{
  font-size: clamp(2.4rem, 3.8vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
}

.foundersTitle span:not(.goldShimmer){
  background: linear-gradient(90deg,#c7a04a 0%,#f0f0f0 45%,#c7a04a 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.foundersSub{
  margin-top: 14px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
  max-width: 70ch;
  margin-inline:auto;
}

/* ============================================================
   ✅ Layout Grid
============================================================ */
.foundersMuseumGrid{
  display:flex;
  flex-direction: column;
  gap: 85px;
}

/* each founder block */
.founderBlock{
  display:grid;
  grid-template-columns: 0.9fr 1.2fr;
  gap: 60px;
  align-items: center;
}

.founderBlock.founderTwo{
  grid-template-columns: 1.2fr 0.9fr;
}

/* ============================================================
   ✅ Founder Cards
============================================================ */
.founderCard{
  position: relative;
  max-width: 420px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 40px 90px rgba(0,0,0,0.35);
}


.founderCard img{
  width:100%;
  aspect-ratio: 4 / 3;
  height: 380px;
  object-fit: cover;
  display:block;
}


/* plaque at bottom */
.founderPlaque{
  position:absolute;
  bottom:0;
  inset-inline:0;
  padding: 16px 18px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.88), rgba(0,0,0,0.10));
  text-align:center;
  z-index: 3;
}

.founderPlaque small{
  display:block;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255,255,255,0.72);
  margin-bottom: 6px;
}

.founderPlaque h3{
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.25;
}

.founderPlaque span{
  display:block;
  margin-top: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(199,160,74,0.95);
}

/* ============================================================
   ✅ Film Edge Fade (Vintage border overlay)
============================================================ */
.founderCard .filmEdge{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
  background:
    radial-gradient(circle at 10% 20%, rgba(0,0,0,0.55), transparent 55%),
    radial-gradient(circle at 90% 30%, rgba(0,0,0,0.42), transparent 55%),
    radial-gradient(circle at 30% 95%, rgba(0,0,0,0.55), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,0.35), transparent 25%, transparent 75%, rgba(0,0,0,0.40));
  mix-blend-mode: multiply;
  opacity: 0.7;
}

.founderCard .filmEdge::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 0% 0%, rgba(199,160,74,0.12), transparent 55%),
    radial-gradient(circle at 100% 0%, rgba(199,160,74,0.08), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(199,160,74,0.12), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(199,160,74,0.08), transparent 55%);
  opacity: 0.45;
  filter: blur(8px);
}

/* ============================================================
   ✅ Text
============================================================ */
.founderText p{
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.85;
  color: rgba(255,255,255,0.78);
}

/* ============================================================
   ✅ Museum Label
============================================================ */
.museumLabel{
  margin-top: 22px;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 55px rgba(0,0,0,0.25);
}

.museumDot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(90deg,#c7a04a,#f0f0f0,#c7a04a);
  box-shadow: 0 0 16px rgba(199,160,74,0.45);
  flex-shrink:0;
}

.museumLabel p{
  margin:0;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  line-height: 1.6;
}

.museumLabel strong{
  font-weight: 900;
  color: rgba(255,255,255,0.92);
}

/* ============================================================
   ✅ Hover Tilt (Premium)
============================================================ */
.tiltCard{
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tiltCard:hover{
  transform: translateY(-6px) rotate(-0.2deg);
  box-shadow: 0 55px 120px rgba(0,0,0,0.45);
}

/* ============================================================
   ✅ Responsive
============================================================ */
@media(max-width: 980px){
  .foundersMuseumSection{
    padding: 85px 0;
    border-radius: 0;
  }

  .founderBlock{
    grid-template-columns: 1fr;
    gap: 34px;
    text-align:center;
  }

  .founderCard{
    margin: 0 auto;
    width: min(420px, 100%);
  }

  /* ✅ ensure both founder blocks show CARD first on mobile 
  .founderBlock.founderTwo .founderCard{
    order: -1;
  }*/
  
  /* ✅ Mobile fix: make each founder block stack with Card first */
@media (max-width: 980px){

  .founderBlock{
    display: flex;              /* switch from grid to flex */
    flex-direction: column;     /* stack */
    gap: 34px;
    text-align: center;
  }

  /* Card first for BOTH blocks */
  .founderBlock .founderCard{
    order: -1;
    margin: 0 auto;
    width: min(420px, 100%);
  }

  /* Text second */
  .founderBlock .founderText{
    order: 0;
  }

  .museumLabel{
    justify-content: center;
  }
}


  .museumLabel{
    justify-content:center;
  }
}
/* ============================================================
   ✅ GLOBAL SECTION TAG*.
.sectionTag{
  display:inline-block;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:0.85rem;
  color: var(--heritageGold);
}

/* ============================================================
   ✅ GLOBAL GOLD SHIMMER TEXT (Premium)
============================================================ */

.goldShimmer{
  background: linear-gradient(90deg,#c7a04a 0%,#f3f3f3 45%,#c7a04a 100%);
  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
  color: transparent;

  background-size: 220% 100%;
  background-position: 0% center;

  display: inline-block;
  animation: goldShimmerMove 5.8s linear infinite;
}

@keyframes goldShimmerMove{
  0%{ background-position: 0% center; }
  100%{ background-position: 220% center; }
}


.momentsTitle span{
  background: linear-gradient(90deg,#f3d26a 0%,#f0f0f0 45%,#f3d26a 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}