/* ═══════════════════════════════════════
   RAJUL ICONIC GROUP — DARK LUXURY THEME
   Classic Gold #C9A84C on Deep Dark
   Works perfectly on file:// (no server)
═══════════════════════════════════════ */
:root {
  --gold:        #C9A84C;
  --gold-light:  #E8C97A;
  --gold-dim:    rgba(201,168,76,0.18);
  --gold-hover:  #B8960C;
  --dark:        #090909;
  --dark-2:      #111111;
  --dark-3:      #181818;
  --dark-4:      #1E1E1E;
  --dark-card:   #141414;
  --text:        #F5F0E8;
  --text-mid:    rgba(245,240,232,0.62);
  --text-low:    rgba(245,240,232,0.35);
  --white:       #FFFFFF;
  --serif:       'Cormorant Garamond', Georgia, serif;
  --sans:        'DM Sans', system-ui, sans-serif;
  --ease:        cubic-bezier(0.16,1,0.3,1);
  --nav-h:       90px;
  --shadow:      0 2px 30px rgba(0,0,0,0.4);
  --shadow-gold: 0 8px 32px rgba(201,168,76,0.2);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--dark);color:var(--text);font-family:var(--sans);font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:var(--sans)}

/* UTILITIES */
.eyebrow{font-size:10px;letter-spacing:5px;text-transform:uppercase;color:var(--gold);font-weight:500}
.gold-rule{width:48px;height:1px;background:var(--gold);margin:16px 0 22px}
.section-title{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.5vw,50px);line-height:1.12;color:var(--text)}
.body-text{font-size:15px;line-height:1.95;color:var(--text-mid);max-width:560px}
.btn-gold{display:inline-block;background:var(--gold);color:var(--dark);border:none;padding:14px 36px;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:600;transition:background .3s,transform .3s,box-shadow .3s}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:var(--shadow-gold)}
.btn-outline{display:inline-block;background:transparent;color:var(--text);border:1px solid rgba(245,240,232,0.3);padding:13px 36px;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;transition:all .3s}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.btn-outline-gold{display:inline-block;background:transparent;color:var(--gold);border:1px solid var(--gold);padding:13px 36px;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;transition:all .3s}
.btn-outline-gold:hover{background:var(--gold);color:var(--dark);transform:translateY(-2px)}

/* SCROLL ANIMATIONS */
.anim-up{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease}
.anim-left{opacity:0;transform:translateX(-36px);transition:opacity .85s ease,transform .85s ease}
.anim-right{opacity:0;transform:translateX(36px);transition:opacity .85s ease,transform .85s ease}
.anim-scale{opacity:0;transform:scale(0.94);transition:opacity .7s ease,transform .7s ease}
.anim-up.visible,.anim-left.visible,.anim-right.visible,.anim-scale.visible{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.15s}.d3{transition-delay:.23s}
.d4{transition-delay:.31s}.d5{transition-delay:.39s}.d6{transition-delay:.47s}

/* ═══ NAVBAR ═══ */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  height: var(--nav-h);
  background: rgba(9,9,9,0.97);
  border-bottom: 1px solid var(--gold-dim);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  transition: background .45s var(--ease),
              border-color .45s,
              box-shadow .45s,
              height .4s var(--ease);
  /* Critical fix — prevent overflow */
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}
#nav.scrolled {
  background: rgba(9,9,9,.97);
  border-bottom-color: var(--gold-dim);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  height: 70px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  /* Prevent logo from pushing hamburger off screen */
  min-width: 0;
}
/* Logo — big by default, shrinks on scroll */
.nav-logo img {
  height: 70px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: height .4s var(--ease);
  display: block;
  flex-shrink: 0;
}
/* Shrinks when navbar scrolled */
#nav.scrolled .nav-logo img {
  height: 44px;
}
/* Logo text next to image */
.nav-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  min-width: 0;
}
.nav-logo-text .proj {
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--text);
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-logo-text .tag {
  font-size: 7px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 3px;
  white-space: nowrap;
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
.nav-menu>li {
  position: relative;
}
.nav-menu>li>a,
.nav-menu>li>span {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text);
  transition: color .3s;
  cursor: pointer;
  white-space: nowrap;
}
.nav-menu>li>a:hover,
.nav-menu>li>span:hover,
.nav-menu>li.active>a {
  color: var(--gold);
}
.nav-arrow {
  font-size: 8px;
  transition: transform .3s;
}
.nav-menu>li:hover .nav-arrow {
  transform: rotate(180deg);
}
.nav-cta {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 9px 20px;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  transition: all .3s;
  margin-left: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-cta:hover {
  background: var(--gold);
  color: var(--dark);
}
/* Hamburger — hidden on desktop */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  flex-shrink: 0;
  /* Always stays visible */
  z-index: 10;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--text);
  transition: all .3s;
  border-radius: 2px;
}

/* ═══ MOBILE NAV FIXES ═══ */
@media (max-width: 768px) {
  #nav {
    /* Tighter padding on mobile */
    padding: 0 4vw;
    height: 70px;
  }
  #nav.scrolled {
    height: 64px;
  }
  .nav-logo img {
    /* Smaller logo on mobile */
    height: 48px;
  }
  #nav.scrolled .nav-logo img {
    height: 40px;
  }
  .nav-logo-text {
    /* Hide text on very small screens if needed */
    display: none;
  }
  .nav-menu,
  .nav-cta {
    display: none;
  }
  .nav-hamburger {
    /* Always visible on mobile */
    display: flex;
  }
}

@media (max-width: 380px) {
  #nav {
    padding: 0 3vw;
  }
  .nav-logo img {
    height: 40px;
  }
}
/* AFTER — gap fixed, smooth hover */
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--dark-2);
  border: 0.5px solid var(--gold-dim);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  min-width: 180px;
  z-index: 100;
  /* Transparent top padding acts as invisible bridge */
  padding-top: 8px;
}
/* Invisible bridge above dropdown catches cursor */
.dropdown::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
  background: transparent;
}
.nav-menu>li:hover .dropdown {
  display: block;
}
.dropdown a{display:block;padding:12px 20px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-mid);border-bottom:0.5px solid rgba(245,240,232,.05);transition:background .2s,color .2s}
.dropdown a:last-child{border-bottom:none}
.dropdown a:hover{background:rgba(201,168,76,.07);color:var(--gold)}
/* ── Mobile fullscreen nav overlay ── */
.nav-mobile {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--dark-2);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.nav-mobile.open {
  display: flex;
}
.nav-mobile a {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--text);
  letter-spacing: 2px;
  transition: color .3s;
}
.nav-mobile a:hover {
  color: var(--gold);
}
.nav-mobile-close {
  position: absolute;
  top: 24px;
  right: 5vw;
  background: none;
  border: none;
  font-size: 26px;
  color: var(--text);
  cursor: pointer;
  z-index: 1000;
  line-height: 1;
}

/* ═══ SECTION 1: HERO VIDEO ═══ */
#hero{position:relative;width:100%;height:100vh;min-height:640px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(9,9,9,.35) 0%,rgba(9,9,9,.15) 35%,rgba(9,9,9,.65) 78%,rgba(9,9,9,.97) 100%)}
.hero-content{position:relative;z-index:2;text-align:center;padding:0 20px}
.hero-eyebrow{font-size:10px;letter-spacing:6px;text-transform:uppercase;color:var(--gold);font-weight:500;display:block;margin-bottom:18px;animation:fadeUp .9s ease both;animation-delay:.1s}
.hero-title{font-family:var(--serif);font-size:clamp(52px,9vw,114px);font-weight:400;letter-spacing:8px;color:var(--text);line-height:1;margin-bottom:14px;animation:titleIn 1.2s var(--ease) both;animation-delay:.3s}
.hero-title span{color:var(--gold)}
.hero-sub{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--text-low);display:block;margin-bottom:28px;animation:fadeUp .9s ease both;animation-delay:.65s}
.hero-rule{width:60px;height:1px;background:var(--gold);margin:0 auto 28px;animation:ruleIn .8s ease both;animation-delay:.85s}
.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;animation:fadeUp .8s ease both;animation-delay:1.05s}
.hero-scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;animation:fadeUp .7s ease both;animation-delay:1.3s}
.hero-scroll-line{width:1px;height:44px;background:linear-gradient(to bottom,var(--gold),transparent);animation:scrollPulse 2s ease-in-out infinite}
.hero-scroll span{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--text-low)}
@keyframes titleIn{from{opacity:0;transform:translateY(30px);letter-spacing:16px}to{opacity:1;transform:translateY(0);letter-spacing:8px}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes ruleIn{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes scrollPulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ═══ SECTION 2: INFOGRAPHICS + IMAGE ═══ */
#section2 {
  display: flex;
  min-height: 100vh;
  height: 1080px;
  max-height: 1080px;
}
.s2-left {
  width: 50%;
  background: var(--dark-2);
  padding: 80px 60px 80px 8vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.anim-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 2.1s ease, transform 2.1s var(--ease);
}
.s2-right {
  width: 50%;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.s2-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.s2-right::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 100px;
  background: linear-gradient(to right, var(--dark-2), transparent);
  z-index: 1;
  pointer-events: none;
}

/* ── Infographics grid — matching Omara ── */
.infographics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 32px;
}
.infographic-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 12px;
  padding: 22px 24px 22px 0;
}

/* ── THE FIX — solid warm circle like Omara ── */
.infographic-icon-wrap {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: rgba(201, 168, 76, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.3s;
}
.infographic-item:hover .infographic-icon-wrap {
  background: rgba(201, 168, 76, 0.35);
}
.infographic-icon {
  width: 110px;
  height: 110px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.infographic-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.infographic-text .ig-title {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}
.infographic-text .ig-desc {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.7;
  margin: 0;
  max-width: 220px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  #section2 {
    height: auto;
    max-height: none;
    min-height: unset;
    flex-direction: column;
  }
  .s2-left {
    width: 100%;
    padding: 60px 6vw;
  }
  .s2-right {
    width: 100%;
    min-height: 320px;
  }
  .infographics-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══ SECTION 3: THREE CLICKABLE IMAGES + POPUP ═══ */
#section3{background:var(--dark-3);padding:80px 60px 80px 8vw;display:flex;flex-direction:column;justify-content:center}
.s3-header{text-align:center;margin-bottom:60px;padding:0 8vw}
.s3-header .gold-rule{margin:14px auto 20px}
.s3-images{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0}
.s3-img-card{position:relative;overflow:hidden;cursor:pointer}
.s3-img-card img{width:300px;height:300px;object-fit:cover;transition:transform .7s var(--ease)}
.s3-img-card:hover img{transform:scale(1.03)}
.s3-img-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(9,9,9,.85) 0%,rgba(9,9,9,.2) 55%,transparent 100%);transition:opacity .4s}
.s3-img-card:hover .s3-img-overlay{background:linear-gradient(to top,rgba(9,9,9,.92) 0%,rgba(9,9,9,.4) 55%,rgba(9,9,9,.1) 100%)}
.s3-img-bottom{position:absolute;bottom:0;left:0;right:0;padding:28px 32px;z-index:2}
.s3-img-title{font-family:var(--serif);font-size:20px;color:var(--text);letter-spacing:1px;margin-bottom:8px}
.s3-img-text{font-size:12px;color:rgba(245,240,232,.6);line-height:1.6;display:none;margin-bottom:6px}
.s3-img-card:hover .s3-img-text{display:block}
.s3-plus{width:38px;height:38px;border:1px solid rgba(201,168,76,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:10px;color:var(--gold);font-size:18px;transition:all .3s}
.s3-img-card:hover .s3-plus{border-color:var(--gold);background:var(--gold);color:var(--dark)}
/* POPUP */
/* ═══ POPUP — Full width, image left, infographics right ═══ */
.s3-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
  backdrop-filter: blur(6px);
}
.s3-popup-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.s3-popup-overlay.open .s3-popup {
  transform: translateX(0);
}
.s3-popup {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 100%;
  max-width: 100%;
  background: var(--dark-2);
  z-index: 2001;
  transform: translateX(-100%);
  transition: transform .55s var(--ease);
  display: flex;
  overflow: hidden;
}
/* LEFT — background image 40% */
.s3-popup-img {
  width: 40%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.s3-popup-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Gradient fade from image into content */
.s3-popup-img::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 100px;
  background: linear-gradient(to right, transparent, var(--dark-2));
  z-index: 1;
  pointer-events: none;
}
/* RIGHT — infographics content 60% */
.s3-popup-content {
  width: 60%;
  flex-shrink: 0;
  padding: 52px 6vw 52px 48px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--dark-2);
}
/* Close button */
.s3-popup-close {
  position: fixed;
  top: 24px;
  right: 32px;
  width: 42px;
  height: 42px;
  background: var(--gold);
  color: var(--dark);
  border: none;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2010;
  cursor: pointer;
  transition: background .3s;
}
.s3-popup-close:hover {
  background: var(--gold-light);
}
.s3-popup-title {
  font-family: var(--serif);
  font-size: clamp(24px, 2.8vw, 40px);
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.2;
}
.s3-popup-sub {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.75;
  margin-bottom: 36px;
  max-width: 480px;
}
/* 3x2 grid for 6 infographic cards */
.popup-infographics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.popup-ig-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 20px 12px;
  border: 0.5px solid var(--gold-dim);
  transition: border-color .3s, background .3s;
}
.popup-ig-item:hover {
  border-color: var(--gold);
  background: rgba(201,168,76,.05);
}
/* Gold circular background on icons — matching section 2 */
.popup-ig-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform .3s;
  border: 1px solid rgba(201,168,76,0.2);
}
.popup-ig-item:hover .popup-ig-icon-wrap {
  transform: scale(1.08);
}
.popup-ig-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.popup-ig-title {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  line-height: 1.4;
}
.popup-ig-desc {
  font-size: 12px;
  color: var(--text-mid);
  line-height: 1.65;
}
/* Mobile */
@media (max-width: 768px) {
  .s3-popup {
    flex-direction: column;
  }
  .s3-popup-img {
    width: 100%;
    height: 200px;
    flex-shrink: 0;
  }
  .s3-popup-img::after { display: none; }
  .s3-popup-content {
    width: 100%;
    padding: 36px 5vw;
  }
  .popup-infographics {
    grid-template-columns: 1fr 1fr;
  }
}
/* ═══ SECTION 4: FULL WIDTH AMENITIES ═══ */
.s4-header{text-align:center;margin-bottom:60px;margin-top:60px;padding:0 8vw}
#section4 {
  width: 100%; padding: 20px;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  display: block;
  line-height: 0;
}
#section4 img,
#section4 video {
  width: 100%;
  height: 100vh;
  display: block;
  object-fit: cover;
  object-position: center;
  margin: 0;
  padding: 0;
}
.s4-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(9,9,9,.22);
}
.s4-label {
  font-family: var(--serif);
  font-size: clamp(32px,4vw,64px);
  color: var(--text);
  letter-spacing: 6px;
  text-align: center;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}

/* ═══ NEW: USP / WHY CHOOSE RIG ═══ */
#why-rig {
  background: var(--dark);
  padding: 100px 4vw;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--gold-dim);
  /* Remove any margin that breaks alignment */
  margin: 0;
  width: 100%;
}
.why-header{text-align:center;margin-bottom:70px}
.why-header .gold-rule{margin:14px auto 22px}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--gold-dim)}
.why-card{background:var(--dark-card);padding:48px 32px;display:flex;flex-direction:column;align-items:flex-start;transition:background .35s}
.why-card:hover{background:#161208}
.why-number{font-family:var(--serif);font-size:56px;color:var(--gold-dim);line-height:1;margin-bottom:20px;transition:color .3s}
.why-card:hover .why-number{color:rgba(201,168,76,.4)}
.why-icon{font-size:28px;margin-bottom:18px}
/* New SVG icon style */
.why-icon-svg {
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  flex-shrink: 0;
  display: block;
}
.why-icon-svg svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: stroke .3s;
}
.why-card:hover .why-icon-svg svg {
  stroke: var(--gold-light);
}

/* ═══ NEW: CINEMATIC VIDEO STRIP ═══ */
#cinematic-video{width:100%;position:relative;overflow:hidden;background:var(--dark-3)}
.video-wrapper{position:relative;width:100%}
.video-wrapper img,.video-wrapper video{width:100%;display:block;height:70vh;min-height:480px;object-fit:cover}
.video-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(9,9,9,.75) 0%,rgba(9,9,9,.2) 50%,rgba(9,9,9,.5) 100%)}
.video-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0 8vw;z-index:2}
.video-tag{font-size:9px;letter-spacing:5px;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:16px}
.video-title{font-family:var(--serif);font-size:clamp(36px,5vw,72px);color:var(--text);line-height:1.1;font-weight:400;margin-bottom:20px;max-width:600px}
.video-title span{color:var(--gold)}
.video-text{font-size:14px;color:var(--text-mid);line-height:1.8;max-width:480px;margin-bottom:36px}
.video-stats{display:flex;gap:40px;flex-wrap:wrap}
.v-stat{display:flex;flex-direction:column;gap:4px}
.v-stat-num{font-family:var(--serif);font-size:36px;color:var(--gold);line-height:1}
.v-stat-label{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--text-low)}

/* ═══ NEW: TESTIMONIALS ═══ */
#testimonials{background:var(--dark-2);padding:100px 8vw;overflow:hidden}
.testimonials-header{text-align:center;margin-bottom:64px}
.testimonials-header .gold-rule{margin:14px auto 22px}
.testimonials-track{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--gold-dim)}
.testimonial-card{background:var(--dark-card);padding:44px 32px;display:flex;flex-direction:column;gap:20px;transition:background .35s}
.testimonial-card:hover{background:#161208}
.t-quote{font-size:42px;color:var(--gold);font-family:var(--serif);line-height:1;margin-bottom:4px;opacity:.6}
.t-text{font-family:var(--serif);font-size:17px;color:var(--text);line-height:1.7;font-weight:400;font-style:italic;flex:1}
.t-rule{width:32px;height:1px;background:var(--gold-dim)}
.t-name{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--text);font-weight:500}
.t-detail{font-size:12px;color:var(--text-low);margin-top:3px}
.t-stars{color:var(--gold);font-size:12px;letter-spacing:2px}
/* Slider dots */
.t-dots{display:flex;justify-content:center;gap:8px;margin-top:48px}
.t-dot{width:6px;height:6px;border-radius:50%;background:var(--gold-dim);cursor:pointer;transition:all .3s;border:none;padding:0}
.t-dot.active{background:var(--gold);width:24px;border-radius:3px}

/* ═══ PROJECT PAGES ═══ */
/* ═══ GALAXIA FEATURE SECTION — About Us ═══ */
#galaxia-feature {
  background: var(--dark-2);
  padding: 0;
}
.galaxia-feature-inner {
  display: flex;
  min-height: 560px;
}
.galaxia-img-wrap {
  width: 55%;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.galaxia-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .8s var(--ease);
}
.galaxia-img-wrap:hover img {
  transform: scale(1.04);
}
/* Gold gradient fade from image into content */
.galaxia-img-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 120px;
  background: linear-gradient(to right, transparent, var(--dark-2));
  z-index: 1;
  pointer-events: none;
}
.galaxia-content {
  width: 45%;
  padding: 80px 8vw 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--dark-2);
}

/* Responsive */
@media (max-width: 768px) {
  .galaxia-feature-inner {
    flex-direction: column;
  }
  .galaxia-img-wrap {
    width: 100%;
    height: 280px;
  }
  .galaxia-img-wrap::after {
    display: none;
  }
  .galaxia-content {
    width: 100%;
    padding: 60px 6vw;
  }
}
.page-hero{padding:calc(var(--nav-h) + 60px) 8vw 80px;background:var(--dark-2);text-align:center;border-bottom:1px solid var(--gold-dim)}
.page-title{font-family:var(--serif);font-size:clamp(36px,5vw,68px);font-weight:400;letter-spacing:2px;color:var(--text)}
.about-story{padding:100px 8vw;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;background:var(--dark)}
.about-values{padding:80px 8vw;background:var(--dark-3)}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--gold-dim);border:1px solid var(--gold-dim);margin-top:48px}
.value-card{background:var(--dark-card);padding:40px 28px;transition:background .3s}
.value-card:hover{background:#161208}
.value-icon{font-size:28px;margin-bottom:16px}
.value-title{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--text);font-weight:500;margin-bottom:8px}
.value-desc{font-size:13px;color:var(--text-mid);line-height:1.7}
.project-hero{position:relative;height:70vh;min-height:500px;overflow:hidden;display:flex;align-items:flex-end;padding-bottom:60px}
.project-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.project-hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 0%,rgba(9,9,9,.88) 100%)}
.project-hero-content{position:relative;z-index:2;padding:0 8vw}
.project-name{font-family:var(--serif);font-size:clamp(42px,6vw,80px);color:var(--text);letter-spacing:4px}
.project-tag{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--text-low);margin-top:6px}
.project-overview{padding:80px 8vw;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;background:var(--dark)}
.project-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--gold-dim);margin-top:32px}
.p-stat{background:var(--dark-card);padding:24px 20px;text-align:center;border:0.5px solid transparent;transition:border-color .3s}
.p-stat:hover{border-color:var(--gold-dim)}
.p-stat-num{font-family:var(--serif);font-size:32px;color:var(--gold)}
.p-stat-label{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--text-low);margin-top:5px}
.project-gallery{padding:0 8vw 100px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.project-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s,opacity .3s}
.project-gallery img:hover{transform:scale(1.03);opacity:.85}
.gallery-grid{padding:calc(var(--nav-h) + 60px) 5vw 80px;columns:3;column-gap:6px}
.gallery-grid img{width:100%;margin-bottom:6px;break-inside:avoid;transition:opacity .3s}
.gallery-grid img:hover{opacity:.75}
full width map below */
.contact-section {
  background: var(--dark);
}
.contact-info-wrap {
  padding: calc(var(--nav-h) + 80px) 8vw 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.contact-map {
  width: 100%;
  border: none;
  border-top: 1px solid var(--gold-dim);
  overflow: hidden;
}
.contact-map iframe {
  width: 100%;
  height: 500px;
  border: none;
  filter: grayscale(80%) invert(92%) hue-rotate(180deg);
  display: block;
}

/* Responsive */
@media (max-width: 768px) {
  .contact-info-wrap {
    grid-template-columns: 1fr;
    gap: 50px;
    padding: calc(var(--nav-h) + 60px) 6vw 60px;
  }
  .contact-map iframe {
    height: 320px;
  }
}
.contact-detail{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}
.contact-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);margin-top:7px;flex-shrink:0}
.contact-label{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);font-weight:500;display:block;margin-bottom:3px}
.contact-val{font-size:14px;color:var(--text-mid);line-height:1.6}
.contact-val a{color:var(--text-mid);transition:color .3s}
.contact-val a:hover{color:var(--gold)}
.contact-map{aspect-ratio:1;border:1px solid var(--gold-dim);overflow:hidden;margin-top:32px}
.contact-map iframe{width:100%;height:100%;border:none;filter:grayscale(80%) invert(92%) hue-rotate(180deg)}
.inquiry-section{padding:calc(var(--nav-h) + 80px) 8vw 100px;background:var(--dark)}
.inquiry-inner{max-width:800px;margin:0 auto}
/* Shared form styles */
.dark-form{background:var(--gold-dim);display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:8px}
.dark-form .form-field{background:var(--dark-2)}
.dark-form .form-field.full{grid-column:1/-1}
.dark-form .form-field input,.dark-form .form-field select,.dark-form .form-field textarea{width:100%;background:transparent;border:none;outline:none;padding:18px 20px;font-size:13px;color:var(--text);font-family:var(--sans);font-weight:300}
.dark-form .form-field input::placeholder,.dark-form .form-field textarea::placeholder{color:var(--text-low)}
.dark-form .form-field select{color:var(--text-low)}
.dark-form .form-field select option{background:var(--dark-3);color:var(--text)}
.dark-form .form-field textarea{height:120px;resize:none}
.dark-form-submit{grid-column:1/-1;background:var(--gold);border:none;padding:18px;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--dark);font-weight:700;transition:background .3s;cursor:pointer;font-family:var(--sans)}
.dark-form-submit:hover{background:var(--gold-light)}
.form-success-dark{display:none;padding:18px 20px;background:rgba(201,168,76,.08);border:1px solid var(--gold-dim);color:var(--gold);font-size:13px;margin-top:12px;letter-spacing:.5px}
/* ═══ FOOTER ═══ */
footer{background:#050505;padding:56px 8vw 24px;border-top:1px solid var(--gold-dim)}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;padding-bottom:40px;border-bottom:1px solid rgba(245,240,232,.05)}
.footer-logo{height:100px;width:auto;margin-bottom:14px;filter:brightness(0) invert(1)}
.footer-tagline{font-size:8px;letter-spacing:3px;text-transform:uppercase;color:rgba(201,168,76,.8);margin-bottom:12px}
.footer-brand p{font-size:12px;color:rgba(245,240,232,.35);line-height:1.8;max-width:240px}
.footer-col h4{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(201,168,76,.85);margin-bottom:16px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col ul li a{font-size:13px;color:rgba(245,240,232,.38);transition:color .3s}
.footer-col ul li a:hover{color:rgba(245,240,232,.85)}
.footer-col address{font-style:normal;font-size:13px;color:rgba(245,240,232,.38);line-height:1.85}
.footer-col address a{color:rgba(245,240,232,.38);transition:color .3s}
.footer-col address a:hover{color:rgba(201,168,76,.9)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:22px;flex-wrap:wrap;gap:10px}
.footer-copy{font-size:11px;color:#ffffff}
.footer-other{font-size:11px;color:#ffffff}
.footer-other a{color:rgba(201,168,76,.75)}
footer a,
footer a:visited,
footer a:hover,
footer a:active {
    color: #ffffff !important;
    text-decoration: none;
}

footer a:hover {
    color: #D4AF37 !important;
}
.rera-bar{background:#030303;padding:10px 8vw;font-size:10px;color:rgba(245,240,232,.65);text-align:center;border-top:1px solid rgba(245,240,232,.03)}
/* WA FLOAT */
.wa-float{position:fixed;bottom:28px;right:28px;z-index:900;width:52px;height:52px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.4);transition:transform .3s}
.wa-float:hover{transform:scale(1.1)}
.wa-float svg{width:26px;height:26px;fill:white}
/* RESPONSIVE */
@media(max-width:1100px){.why-grid{grid-template-columns:1fr 1fr}.testimonials-track{grid-template-columns:1fr 1fr}.footer-top{grid-template-columns:1fr 1fr}.popup-infographics{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.project-overview{grid-template-columns:1fr}.contact-section{grid-template-columns:1fr;gap:50px}.about-story{grid-template-columns:1fr;gap:40px}.video-stats{gap:24px}}
@media(max-width:768px){
  .nav-menu,.nav-cta{display:none}.nav-hamburger{display:flex}
  #section2{flex-direction:column}.s2-left,.s2-right{width:100%}.s2-right{min-height:320px}.s2-left{padding:60px 6vw}
  .infographics-grid{grid-template-columns:1fr}
  .s3-images{grid-template-columns:1fr}.s3-img-card img{height:300px}
  .s3-popup{width:100%}.s3-popup-img{display:none}.popup-infographics{grid-template-columns:1fr 1fr}
  .why-grid{grid-template-columns:1fr}.testimonials-track{grid-template-columns:1fr}
  .values-grid{grid-template-columns:1fr 1fr}.project-gallery{grid-template-columns:1fr 1fr}
  .gallery-grid{columns:2}.dark-form{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr;gap:32px}.footer-bottom{flex-direction:column;text-align:center}
  .video-content{padding:0 6vw}.video-title{font-size:clamp(28px,6vw,48px)}
}
@media(max-width:480px){.why-grid{grid-template-columns:1fr}.values-grid{grid-template-columns:1fr}.gallery-grid{columns:1}.hero-btns{flex-direction:column;align-items:center}.hero-title{letter-spacing:4px}}
/* ═══ SECTION 4 — Title above, clean image ═══ */
/* ── section4 duplicate removed — correct rules at line 647 ── */
/* ═══ STARLIGHT AMENITIES 6 CARDS ═══ */
#starlight-amenities {
  background: var(--dark);
  padding: 100px 8vw;
}
.sta-header {
  text-align: center;
  margin-bottom: 64px;
}
.sta-header .gold-rule {
  margin: 14px auto 22px;
}
.sta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--gold-dim);
  border: 1px solid var(--gold-dim);
}
.sta-card {
  background: var(--dark-card);
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  transition: background .35s;
}
.sta-card:hover {
  background: #161208;
}
.sta-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 22px;
  flex-shrink: 0;
}
.sta-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: stroke .3s;
}
.sta-card:hover .sta-icon svg {
  stroke: var(--gold-light);
}
.sta-title {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 12px;
}
.sta-desc {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.8;
}

/* Responsive */
@media (max-width: 1024px) {
  .sta-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .sta-grid {
    grid-template-columns: 1fr;
  }
  .sta-card {
    padding: 36px 24px;
  }
}
/* ═══ LIGHTBOX ═══ */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: #000000eb;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
  backdrop-filter: blur(8px);
  padding: 20px;
}
.lightbox-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.lightbox-img-wrap {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border: 1px solid var(--gold-dim);
  box-shadow: 0 20px 80px rgba(0,0,0,.8);
  transform: scale(0.92);
  transition: transform .4s var(--ease);
  display: block;
}
.lightbox-overlay.open img {
  transform: scale(1);
}
/* Close button */
.lightbox-close {
  position: absolute;  /* changed from fixed to absolute */
  top: 24px;
  right: 28px;
  width: 44px;
  height: 44px;
  background: var(--gold);
  color: var(--dark);
  border: none;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3010;
  transition: background .3s, transform .3s;
}
/* Prev / Next arrows */
.lightbox-prev,
.lightbox-next {
  position: absolute;  /* changed from fixed to absolute */
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(201,168,76,0.15);
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3010;
  transition: background .3s, border-color .3s;
}
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
/* Caption */
.lightbox-caption {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-low);
  z-index: 3010;
  white-space: nowrap;
}
/* Cursor pointer on gallery images */
.project-gallery img {
  cursor: zoom-in;
}
/* ═══ VISIBILITY FIXES — brighten text globally ═══ */

/* Page hero titles — all inner pages */
.page-hero .page-title,
.page-hero .eyebrow,
.page-hero p {
  color: var(--text) !important;
}

/* Section titles — ensure always bright */
.section-title {
  color: var(--text);
}

/* Body text — slightly brighter */
.body-text {
  color: #f5f0e8bf;
}

/* Buttons — ensure text always visible */
.btn-gold {
  color: #f5f0e8bf !important;
  font-weight: 600;
}
.btn-outline,
.btn-outline-gold {
  color: var(--text) !important;
}

/* Nav CTA button */
.nav-cta {
  color: var(--gold) !important;
}

/* Why card titles */
.why-title {
  color: var(--text);
}
.why-desc {
  color: rgba(245,240,232,0.72);
}

/* Testimonial text */
.t-text {
  color: var(--text);
}
.t-name {
  color: var(--text);
}

/* Footer text */
.footer-brand p {
  color: hwb(37 91% 4% / 0.55);
}
.footer-col ul li a {
  color: rgba(245,240,232,0.55);
}
.footer-col address {
  color: rgba(245,240,232,0.55);
}

/* Contact page labels and values */
.contact-label {
  color: var(--gold);
}
.contact-val,
.contact-val a {
  color: rgba(245,240,232,0.75);
}

/* Inquiry and contact form placeholders */
.dark-form .form-field input,
.dark-form .form-field select,
.dark-form .form-field textarea {
  color: var(--text);
}
.dark-form .form-field input::placeholder,
.dark-form .form-field textarea::placeholder {
  color: rgba(245,240,232,0.45);
}

/* About page values */
.value-title {
  color: var(--text);
}
.value-desc {
  color: rgba(245,240,232,0.72);
}

/* Starlight amenities */
.sta-title {
  color: var(--text);
}
.sta-desc {
  color: rgba(245,240,232,0.72);
}

/* Project page stats */
.p-stat-label {
  color: rgba(245,240,232,0.55);
}

/* Video strip text */
.video-text {
  color: rgba(245,240,232,0.75);
}
.video-tag {
  color: var(--gold);
}

/* Eyebrow text — always gold */
.eyebrow {
  color: var(--gold);
}

/* General paragraph text in dark sections */
#why-rig p,
#testimonials p,
#cinematic-video p,
footer p {
  color: rgba(245,240,232,0.65);
}
/* ═══ CAREERS PAGE ═══ */
.job-card {
  background: var(--dark-card);
  border: 0.5px solid var(--gold-dim);
  margin-bottom: 2px;
  transition: border-color .3s;
}
.job-card:hover {
  border-color: rgba(201,168,76,0.4);
}
.job-card-top {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 32px;
  cursor: pointer;
}
.job-icon-wrap {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  background: rgba(201,168,76,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201,168,76,0.2);
}
.job-icon-wrap svg { width: 26px; height: 26px; }
.job-info { flex: 1; min-width: 0; }
.job-title {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--text);
  font-weight: 400;
  margin-bottom: 10px;
}
.job-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.job-tag {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(201,168,76,0.1);
  border: 0.5px solid rgba(201,168,76,0.25);
  padding: 3px 10px;
  border-radius: 2px;
}
.job-toggle {
  background: transparent;
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  padding: 9px 20px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .3s;
  font-family: var(--sans);
}
.job-toggle:hover, .job-toggle.active {
  background: var(--gold);
  color: var(--dark);
  border-color: var(--gold);
}
.job-details {
  display: none;
  padding: 0 32px 36px;
  border-top: 0.5px solid var(--gold-dim);
}
.job-details.open {
  display: block;
  animation: fadeDown .35s ease;
}
@keyframes fadeDown {
  from { opacity:0; transform:translateY(-8px) }
  to   { opacity:1; transform:translateY(0) }
}
.job-section { margin-top: 28px; }
.job-section-title {
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 12px;
}
.job-text { font-size: 14px; color: var(--text-mid); line-height: 1.8; }
.job-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.job-list li {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.7;
  padding-left: 16px;
  position: relative;
}
.job-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 11px;
}
@media (max-width: 768px) {
  .job-card-top { flex-wrap: wrap; padding: 20px; gap: 14px; }
  .job-toggle { width: 100%; text-align: center; }
  .job-details { padding: 0 20px 28px; }
}
/* ═══ TEAM SECTION ═══ */
#our-team {
  background: var(--dark);
      padding: 90px;

/* ── Director's Message ── */
.team-directors-msg {
  display: flex;
  min-height: 600px;
  border-bottom: 1px solid var(--gold-dim);
}
.team-dm-img {
  width: 38%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.team-dm-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .8s var(--ease);
}
.team-dm-img:hover img {
  transform: scale(1.04);
}
/* Name card overlay on director image */
.team-dm-name-card {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 28px;
  background: linear-gradient(
    to top,
    rgba(9,9,9,0.95) 0%,
    rgba(9,9,9,0.5) 60%,
    transparent 100%
  );
  z-index: 2;
}
.team-dm-name {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--text);
  font-weight: 400;
  letter-spacing: 1px;
}
.team-dm-role {
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 5px;
}
/* Director message content */
.team-dm-content {
  flex: 1;
  padding: 80px 8vw 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--dark-2);
}
.team-dm-content .gold-rule {
  margin: 14px 0 22px;
}
.team-dm-quote {
  font-family: var(--serif);
  font-size: 72px;
  color: var(--gold);
  line-height: 0.6;
  margin: 28px 0 16px;
  opacity: 0.5;
}
.team-dm-text {
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.95;
  max-width: 540px;
}
.team-dm-signature {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--gold-dim);
}
.team-dm-sig-name {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--text);
  font-weight: 400;
  letter-spacing: 1px;
}
.team-dm-sig-role {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 6px;
}

/* ── Team Members Grid ── */
.team-members-wrap {
  padding: 100px 8vw;
  background: var(--dark);
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--gold-dim);
  border: 1px solid var(--gold-dim);
}
.team-card {
  background: var(--dark-card);
  display: flex;
  flex-direction: column;
  transition: background .35s;
}
.team-card:hover {
  background: #161208;
}
.team-card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1;
}
.team-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .6s var(--ease);
  filter: grayscale(20%);
}
.team-card:hover .team-card-img img {
  transform: scale(1.05);
  filter: grayscale(0%);
}
.team-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(9,9,9,0.6) 0%,
    transparent 50%
  );
  transition: opacity .4s;
}
.team-card:hover .team-card-overlay {
  opacity: 0.5;
}
.team-card-info {
  padding: 24px 28px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.team-card-name {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--text);
  font-weight: 400;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.team-card-role {
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.team-card-rule {
  width: 28px;
  height: 1px;
  background: var(--gold);
  margin: 14px 0;
  transition: width .4s;
}
.team-card:hover .team-card-rule {
  width: 48px;
}
.team-card-desc {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.75;
  flex: 1;
}

/* Responsive */
@media (max-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .team-directors-msg {
    flex-direction: column;
  }
  .team-dm-img {
    width: 100%;
    height: 400px;
  }
  .team-dm-content {
    padding: 60px 6vw;
  }
  .team-dm-quote {
    font-size: 52px;
  }
  .team-members-wrap {
    padding: 60px 6vw;
  }
  .team-grid {
    grid-template-columns: 1fr;
  }
}
}