/* ==========================================================================
   DESIGN SYSTEM & TYPOGRAPHY TOKENS
   ========================================================================== */

@font-face {
  font-family: 'Canela Trial';
  src: local('Canela Trial'), local('Canela-Trial');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Canela Trial';
  src: local('Canela Trial Light'), local('Canela Trial-Light');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'harmony-numbers';
  src: local('Canela Trial'), local('Canela-Trial');
  unicode-range: U+0030-0039;
}

@font-face {
  font-family: 'harmony-numbers';
  src: local('Canela Trial Light'), local('Canela Trial-Light');
  font-weight: 300;
  unicode-range: U+0030-0039;
}

@font-face {
  font-family: 'Apercu Mono';
  src: local('Apercu Mono'), local('Apercu-Mono'), local('ApercuMono');
  font-weight: normal;
  font-style: normal;
}

:root {
  /* Colors */
  --color-font-primary: #EEE9E4;
  --color-font-muted: rgba(238, 233, 228, 0.75);
  --color-bg-dark: #0B0C0E;

  /* Typography Families */
  --font-canela-trial: 'harmony-numbers', 'Canela Trial', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-apercu: 'harmony-numbers', 'Apercu Mono', 'Space Mono', 'JetBrains Mono', 'Courier New', monospace;

  /* Easing */
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Reset & Base Settings */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background-color: var(--color-bg-dark);
  color: var(--color-font-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis-stopped {
  overflow: hidden;
}

.lenis-scrolling iframe {
  pointer-events: none;
}


body {
  width: 100%;
  font-family: var(--font-canela-trial);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* ==========================================================================
   SCROLL TRACK & STICKY VIEWPORT (3-in-1 Frame-by-Frame Video Scrubbing)
   ========================================================================== */

.scroll-container {
  position: relative;
  width: 100%;
  height: 450vh;
  /* Provides 450vh scroll distance for smooth 4-stage transitions */
}

.sticky-viewport {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 36px 170px;
}

/* Background Scrubbing Canvas */
.hero-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}

/* Dark Overlay */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,
      rgba(11, 12, 14, 0.7) 0%,
      rgba(11, 12, 14, 0.5) 40%,
      rgba(11, 12, 14, 0.9) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Header Navigation Bar */
.hero-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.nav-left,
.nav-right {
  flex: 1;
}

.nav-right {
  display: flex;
  justify-content: flex-end;
}

.nav-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-logo {
  height: 20px;
  width: auto;
}

.menu-btn {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  color: var(--color-font-primary);
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.menu-btn:hover {
  opacity: 1;
}

.menu-icon {
  display: block;
  width: 28px;
  height: 10px;
  position: relative;
}

.menu-icon::before,
.menu-icon::after {
  content: '';
  position: absolute;
  left: 0;
  height: 2px;
  background-color: var(--color-font-primary);
  transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease;
}

.menu-icon::before {
  top: 0;
  width: 100%;
}

.menu-icon::after {
  bottom: 0;
  width: 70%;
}

.menu-btn:hover .menu-icon::after {
  width: 100%;
}

.menu-btn:hover .menu-icon::before {
  width: 70%;
}

.menu-text {
  font-family: var(--font-apercu);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.sales-info {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-apercu);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-font-primary);
  opacity: 0.9;
}

.sales-divider {
  width: 1px;
  height: 14px;
  background-color: var(--color-font-primary);
  opacity: 0.3;
}

/* Light background navigation override */
.light-bg .menu-btn {
  color: #1A1917 !important;
}

.light-bg .menu-icon::before,
.light-bg .menu-icon::after {
  background-color: #1A1917 !important;
}

.light-bg .nav-logo {
  filter: invert(1) brightness(0.1) !important;
}

.light-bg .sales-info {
  color: #1A1917 !important;
}

.light-bg .sales-divider {
  background-color: #1A1917 !important;
  opacity: 0.25 !important;
}



/* ==========================================================================
   HERO STAGE OVERLAYS & ANIMATED STAGES
   ========================================================================== */

.hero-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 36px 170px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out-cubic), transform 0.7s var(--ease-out-cubic);
}

.hero-stage.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   STAGE 1: INITIAL HERO
   -------------------------------------------------------------------------- */

.stage-1 .hero-center {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1;
}

.stage-1 .hero-logo-img {
  width: 86%;
  max-width: 1150px;
  height: auto;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.4));
}

.stage-1 .hero-bottom {
  display: grid;
  grid-template-columns: 1.1fr 0.4fr 1.2fr;
  align-items: flex-end;
  gap: 40px;
  width: 100%;
  padding-bottom: 20px;
}

.stage-1 .hero-left {
  max-width: 480px;
}

.stage-1 .canela-trial-text {
  font-family: var(--font-canela-trial);
  font-size: 36px;
  font-weight: 300;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: var(--color-font-primary);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.stage-1 .hero-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  justify-self: center;
  cursor: pointer;
}

.stage-1 .scroll-text {
  font-family: var(--font-apercu);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-font-primary);
  opacity: 0.9;
}

.stage-1 .scroll-arrow {
  animation: bounceDown 2s infinite var(--ease-in-out);
}

@keyframes bounceDown {

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

  50% {
    transform: translateY(6px);
  }
}

.stage-1 .hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 480px;
  justify-self: end;
}

.stage-1 .apercu-text {
  font-family: var(--font-apercu);
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.04em;
  color: var(--color-font-primary);
  text-align: left;
  margin-bottom: 18px;
}

.stage-1 .btn-contact {
  display: inline-block;
  text-decoration: none;
  background-color: #F7F5F0;
  color: #1A1917;
  font-family: var(--font-apercu);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  padding: 12px 24px;
  border: 1px solid #F7F5F0;
  border-radius: 0;
  cursor: pointer;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.stage-1 .btn-contact:hover {
  background-color: transparent;
  color: #F7F5F0;
  border-color: #F7F5F0;
}

/* --------------------------------------------------------------------------
   STAGE 2: CENTERED POETIC STATEMENT (Matching Image 1)
   -------------------------------------------------------------------------- */

.stage-2 {
  align-items: center;
  justify-content: center;
}

.stage-2-content {
  max-width: 960px;
  text-align: center;
  padding: 0 20px;
}

.stage-2-text {
  font-family: var(--font-canela-trial);
  font-size: clamp(1.4rem, 2.5vw, 2.5rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--color-font-primary);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}



/* --------------------------------------------------------------------------
   STAGE 3: MEET THE HARMONY & CIRCULAR BUTTONS (Matching Image 2)
   -------------------------------------------------------------------------- */

.stage-3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage-3-center {
  text-align: center;
  z-index: 15;
}

.title-meet {
  font-family: var(--font-canela-trial);
  font-size: clamp(28px, 6.5vw, 52px);
  font-weight: 300;
  line-height: normal;
  letter-spacing: 0.02em;
  color: var(--color-font-primary);
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.6);
  display: block;
}

.title-harmony {
  font-family: var(--font-canela-trial);
  font-size: clamp(38px, 9vw, 70px);
  font-weight: 300;
  line-height: normal;
  letter-spacing: 0.02em;
  color: var(--color-font-primary);
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.6);
  display: block;
}

/* Interactive Action Circles with Concentric Ring Animations */
.interactive-circle-wrapper {
  position: absolute;
  z-index: 20;
}

.left-wrapper {
  left: 11vw;
  top: 48%;
  transform: translateY(-50%);
}

.right-wrapper {
  right: 14vw;
  top: 65%;
  transform: translateY(-50%);
}

.action-circle-btn {
  position: relative;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: var(--color-font-primary);
  border: none;
  color: #121212;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s var(--ease-out-cubic), background-color 0.3s ease;
}

.action-circle-btn:hover {
  transform: scale(1.08);
  background: #ffffff;
}

.circle-label {
  font-family: var(--font-apercu);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #121212;
  pointer-events: none;
}

/* Thin Concentric Ring around buttons */
.action-circle-btn::before,
.action-circle-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  border: 1px solid rgba(238, 233, 228, 0.5);
  pointer-events: none;
  animation: rippleRing 2.5s infinite cubic-bezier(0.25, 1, 0.5, 1);
}

.action-circle-btn::after {
  animation-delay: 1.25s;
}

.whatsapp-float {
  position: fixed;
  bottom: 36px;
  right: 36px;
  z-index: 100;
  text-decoration: none;
}


.whatsapp-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-font-primary);
  color: #121212;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.whatsapp-circle::before,
.whatsapp-circle::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  border: 1px solid rgba(238, 233, 228, 0.5);
  pointer-events: none;
  animation: rippleRing 2.5s infinite cubic-bezier(0.25, 1, 0.5, 1);
}

.whatsapp-circle::after {
  animation-delay: 1.25s;
}

@keyframes rippleRing {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

.whatsapp-float:hover .whatsapp-circle {
  transform: scale(1.1);
  background: #ffffff;
}

/* ==========================================================================
   MODAL WINDOW FOR GALLERY / MASTER PLAN / CONTACT
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  background: #141518;
  border: 1px solid rgba(238, 233, 228, 0.2);
  padding: 40px;
  max-width: 600px;
  width: 90%;
  border-radius: 4px;
  position: relative;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: var(--color-font-primary);
  font-size: 1.8rem;
  cursor: pointer;
}

.modal-tag {
  font-family: var(--font-apercu);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--color-font-muted);
  display: block;
}

.modal-title {
  font-family: var(--font-canela-trial);
  font-size: 2rem;
  margin: 10px 0 20px;
  color: var(--color-font-primary);
}

.modal-body img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-top: 10px;
}

/* Responsive Styles */
@media (max-width: 992px) {

  .sticky-viewport,
  .hero-stage {
    padding: 24px;
  }



  .whatsapp-float {
    right: 24px;
    left: auto;
    bottom: 96px;
  }

  .nav-links {
    display: none;
  }

  .stage-1 .hero-bottom {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .stage-1 .hero-scroll {
    display: none;
  }

  .left-wrapper {
    left: 5vw;
    top: 75%;
  }

  .right-wrapper {
    right: 5vw;
    top: 75%;
  }

  .action-circle-btn {
    width: 105px;
    height: 105px;
  }

  .circle-label {
    font-size: 0.65rem;
  }
}

/* ==========================================================================
   IMMERSIVE STAGE 4 SLIDER SECTION
   ========================================================================== */

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), visibility 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}

.slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* Background image with scaling premium transition */
.slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 1.6s cubic-bezier(0.25, 1, 0.5, 1);
  transform: scale(1.08);
  z-index: -1;
}

.slide.active .slide-bg {
  transform: scale(1);
}

/* Vignette overlay */
.slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,
      rgba(11, 12, 14, 0.2) 0%,
      rgba(11, 12, 14, 0) 50%,
      rgba(11, 12, 14, 0.55) 100%);
  z-index: 0;
  pointer-events: none;
}

/* Inner content area */
.slide-content {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  padding: 36px 170px;
}

/* Glassmorphic Tags */
.slide-tags {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

.slide-tag {
  font-family: var(--font-apercu);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--color-font-primary);
  background: rgba(238, 233, 228, 0.08);
  border: 1px solid rgba(238, 233, 228, 0.2);
  padding: 8px 18px;
  border-radius: 20px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.slide-tag:hover {
  background: rgba(238, 233, 228, 0.2);
  border-color: rgba(238, 233, 228, 0.4);
}

/* Info and description block */
.slide-info {
  pointer-events: auto;
  max-width: 580px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

/* Typography styles matching guidelines */
.slide-title {
  font-family: var(--font-canela-trial);
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--color-font-primary);
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: 0.2s;
}

.slide.active .slide-title {
  opacity: 1;
  transform: translateY(0);
}

.slide-desc {
  font-family: var(--font-apercu);
  font-size: 0.78rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--color-font-muted);
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: 0.4s;
}

.slide.active .slide-desc {
  opacity: 1;
  transform: translateY(0);
}

/* Button style matching the request */
.slide-btn {
  background-color: #F7F5F0;
  color: #1A1917;
  border: 1px solid #F7F5F0;
  padding: 12px 24px;
  font-family: var(--font-apercu);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  border-radius: 0;
  cursor: pointer;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.3s ease, opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: 0.6s;
}

.slide.active .slide-btn {
  opacity: 1;
  transform: translateY(0);
}

.slide-btn:hover {
  background-color: transparent;
  color: #F7F5F0;
  border-color: #F7F5F0;
}

/* Slider Arrow Controls */
.slider-controls {
  position: absolute;
  bottom: 50px;
  right: 170px;
  display: flex;
  gap: 16px;
  z-index: 10;
}

.slider-arrow {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-font-primary);
  border: none;
  color: #121212;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.slider-arrow:hover {
  transform: scale(1.1);
  background-color: #ffffff;
}

.slider-arrow svg {
  width: 20px;
  height: 20px;
  stroke: #121212;
}

/* Responsive Overrides */
@media (max-width: 992px) {
  .slide-content {
    padding: 24px;
  }

  .slide-tags {
    margin-top: 80px;
  }

  .slider-controls {
    bottom: 24px;
    right: 24px;
  }
}

/* ==========================================================================
   ABOUT THE PROJECT SECTION
   ========================================================================== */

.about-project-section {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-image: url('BG about project.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: color-burn;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 170px;
  background-color: #F7F5F0;
  /* Soft warm beige fallback matching the drawing background */
}

.about-project-content {
  max-width: 1400px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.project-tag {
  font-family: var(--font-apercu);
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.04em;
  color: #386B5A;
  /* Forest green */
  text-transform: uppercase;
}

.project-main-text {
  font-family: var(--font-canela-trial);
  font-size: clamp(1.8rem, 2.5vw, 42px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #1A1917;
  /* Deep charcoal warm brown */
  text-shadow: none;
  /* No shadow for clean light theme look */
}

@media (max-width: 992px) {
  .about-project-section {
    padding: 24px;
  }
}

/* ==========================================================================
   STRUCTURAL EXCELLENCE SECTION (SAME TO SAME FIGMA)
   ========================================================================== */

.structural-excellence-section {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--color-bg-dark);
}

/* Slides container (Full screen!) */
.excellence-slides {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  overflow: hidden;
}

/* Grid Lines Overlay (Positioned on top of slides but below text controls) */
.arch-grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 15;
}

.line-h-top {
  position: absolute;
  top: 100px;
  /* Exact 100px padding from top */
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
}

.line-h-bottom {
  position: absolute;
  bottom: 100px;
  /* Exact 100px padding from bottom */
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
}

/* Continuous vertical lines (Exact 100px padding from sides, clean white line) */
.line-v-left {
  position: absolute;
  left: 100px;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.2);
}

.line-v-right {
  position: absolute;
  right: 100px;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.2);
}

/* Individual slides */
.excellence-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), visibility 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.excellence-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.slide-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 1.6s cubic-bezier(0.25, 1, 0.5, 1);
  transform: scale(1.08);
}

.excellence-slide.active .slide-bg-img {
  transform: scale(1);
}

.excellence-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,
      rgba(11, 12, 14, 0.5) 0%,
      rgba(11, 12, 14, 0.25) 50%,
      rgba(11, 12, 14, 0.65) 100%);
  pointer-events: none;
}

.excellence-content {
  display: none;
  /* Raw metadata */
}

/* Eyebrow tag overlay - Placed inside the top-left grid boundaries */
.fixed-eyebrow-container {
  position: absolute;
  top: 130px;
  /* 100px top line + 30px spacing */
  left: 130px;
  /* 100px left line + 30px spacing */
  z-index: 20;
}

.fixed-eyebrow {
  font-family: var(--font-apercu);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--color-font-primary);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 8px 18px;
  border-radius: 20px;
  text-transform: uppercase;
}

/* Bypass flex/grid centering of footer to allow explicit absolute positioning of children */
.excellence-footer {
  display: contents;
}

/* Slide Counter (Inside the grid boundaries, to the right of the left vertical line) */
.excellence-counter-box {
  position: absolute;
  left: 130px;
  /* 100px left line + 30px spacing */
  bottom: 130px;
  /* 100px bottom line + 30px spacing */
  z-index: 20;
  display: flex;
  align-items: baseline;
}

.current-slide-num {
  font-family: var(--font-apercu);
  font-size: clamp(2rem, 4vw, 54px);
  font-weight: 400;
  color: var(--color-font-primary);
  line-height: 1;
  letter-spacing: 0.02em;
}

.total-slides-num {
  font-family: var(--font-apercu);
  font-size: clamp(1.2rem, 2.5vw, 36px);
  font-weight: 400;
  color: var(--color-font-primary);
  line-height: 1;
  letter-spacing: 0.02em;
  margin-left: 2px;
}

/* Description Display (Inside the grid boundaries, centered but shifted slightly to the right) */
.excellence-desc-box {
  position: absolute;
  left: 53%;
  transform: translateX(-50%);
  bottom: 140px;
  /* Aligned to counter text baseline */
  max-width: 600px;
  z-index: 20;
  text-align: left;
}

.excellence-desc-display {
  font-family: var(--font-apercu);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--color-font-primary);
  text-transform: uppercase;
}

/* Controls Box (Inside the grid boundaries, to the left of the right vertical line) */
.excellence-controls {
  position: absolute;
  right: 130px;
  /* 100px right line + 30px spacing */
  bottom: 130px;
  /* 100px bottom line + 30px spacing */
  z-index: 20;
  display: flex;
  gap: 12px;
}

.excellence-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-font-primary);
  border: none;
  color: #121212;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.excellence-arrow:hover {
  transform: scale(1.1);
  background-color: #ffffff;
}

.excellence-arrow svg {
  width: 18px;
  height: 18px;
  stroke: #121212;
}

@media (max-width: 992px) {
  .line-v-left {
    display: block;
    left: 24px;
  }

  .line-v-right {
    display: block;
    right: 24px;
  }

  .line-h-top {
    top: 40px;
  }

  .line-h-bottom {
    bottom: 40px;
  }

  .fixed-eyebrow-container {
    top: 60px;
    left: 40px;
  }

  .excellence-counter-box {
    left: 40px;
    bottom: 60px;
  }

  .excellence-desc-box {
    left: 40px;
    right: 40px;
    bottom: 120px;
    max-width: none;
    transform: none;
  }

  .excellence-controls {
    right: 40px;
    transform: none;
    bottom: 56px;
  }
}

/* ==========================================================================
   ARCHITECTURE SECTION
   ========================================================================== */

.architecture-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 70px 0 120px 0;
  display: flex;
  align-items: center;
  background-color: #F7F5F0;
  /* Cream background matching Figma design */
  background-image: url('BG architecture.jpg');
  background-size: cover;
  background-position: center right;
  /* Keeps building sketch layout on the right */
  background-repeat: no-repeat;
  overflow: hidden;
}

.architecture-content {
  width: 100%;
  padding: 0 170px;
  /* Standard 170px alignment grid padding */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.architecture-tag {
  font-family: var(--font-apercu);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #386B5A;
  /* Forest green */
  border: 1.5px solid rgba(56, 107, 90, 0.4);
  padding: 8px 18px;
  border-radius: 20px;
  text-transform: uppercase;
  display: inline-block;
}

.architecture-main-text {
  font-family: var(--font-canela-trial);
  font-size: clamp(1.8rem, 2.5vw, 42px);
  /* Responsive sizing matching Figma layout */
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #1A1917;
  /* Charcoal warm brown */
  max-width: 1050px;
  /* Wraps text exactly on 4 lines as shown in Figma */
  text-align: left;
  margin-top: 400px;
  /* Large margin between eyebrow tag and title */
  margin-bottom: 10px;
  /* Margin between title quote and paragraph */
}

.architecture-sub-text {
  font-family: var(--font-apercu);
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #686461;
  /* Rich dark warm text color */
  max-width: 950px;
  /* Wraps paragraph exactly on 3 lines as shown in Figma */
  text-transform: uppercase;
  text-align: left;
}

/* Responsive Overrides */
@media (max-width: 992px) {
  .desktop-br {
    display: none;
  }

  .architecture-section {
    padding: 80px 24px;
    background-position: center;
    /* Center background sketch on mobile devices */
  }

  .architecture-content {
    padding: 0;
    gap: 28px;
    /* Flex gap is active on mobile */
  }

  .architecture-main-text {
    max-width: 100%;
    margin-top: 24px;
    /* Reduced vertical spacing on mobile screen widths */
    margin-bottom: 0;
  }

  .architecture-sub-text {
    max-width: 100%;
  }
}

/* ==========================================================================
   INTERACTIVE ROOM SHOWCASE SECTION
   ========================================================================== */

.room-interactive-section {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: #121212;
}

.room-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.room-bg-layer.active {
  opacity: 1;
  z-index: 2;
}

.room-interactive-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      rgba(18, 18, 18, 0.8) 0%,
      rgba(18, 18, 18, 0.3) 50%,
      rgba(18, 18, 18, 0.8) 100%);
  z-index: 3;
  pointer-events: none;
}

.room-interactive-content {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  padding: 80px 170px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  /* Align bottom row horizontally */
}

.room-tabs-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 20px;
}

.room-tab {
  background: none;
  border: none;
  font-family: var(--font-canela-trial);
  font-size: clamp(2.5rem, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
  text-transform: uppercase;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.1);
  transition: color 0.4s ease, border-color 0.4s ease;
}

.room-tab:hover {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.5);
}

.room-tab.active {
  color: #ffffff;
  border-color: #ffffff;
}

.room-desc-container {
  max-width: 500px;
  margin-bottom: 30px;
}

.room-desc {
  font-family: var(--font-apercu);
  font-size: clamp(12px, 1.2vw, 13px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #ffffff;
  text-transform: uppercase;
  text-align: left;
}

/* Responsive Overrides */
@media (max-width: 992px) {
  .room-interactive-content {
    padding: 60px 24px 48px 24px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 40px;
  }

  .room-tabs-container {
    margin-bottom: 0;
    width: 100%;
  }

  .room-tab {
    font-size: 28px;
    width: 100%;
  }

  .room-desc-container {
    margin-bottom: 0;
    max-width: 100%;
  }
}

/* ==========================================================================
   LIFESTYLE AMENITIES SECTION
   ========================================================================== */

.amenities-scroll-container {
  position: relative;
  width: 100%;
  height: 300vh;
  /* Scroll track length */
  background-color: #F7F5F0;
}

.amenities-section {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: 0;
  /* Clear static padding to center vertically */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Centered all content vertically */
  gap: 40px;
  /* Precise vertical gap */
  background-color: #F7F5F0;
  background-image: url('BG lifestyle amenities.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: color-burn;
  overflow: hidden;
}

.amenities-header-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0 170px;
  margin-bottom: 24px;
  column-gap: 500px;
  /* Added spacious horizontal gap */
}

.amenities-tag-container {
  grid-column: 1 / 2;
}

.amenities-tag {
  font-family: var(--font-apercu);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #386B5A;
  border: 1px solid rgba(56, 107, 90, 0.4);
  padding: 8px 18px;
  border-radius: 20px;
  text-transform: uppercase;
  display: inline-block;
  white-space: nowrap;
  /* Keep tag text strictly on one line */
}

.amenities-title-container {
  grid-column: 2 / 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.amenities-title {
  font-family: var(--font-canela-trial);
  font-size: clamp(42px, 2.5vw, 38px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #1A1917;
  text-align: left;
  margin: 0;
}

.amenities-sub-text {
  font-family: var(--font-apercu);
  font-size: clamp(14px, 1.1vw, 12px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #686461;
  max-width: 750px;
  text-transform: uppercase;
  text-align: left;
  margin: 0;
}

.amenities-grid-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.amenities-grid {
  display: flex;
  flex-direction: row;
  width: max-content;
  padding: 0 170px;
  border-top: 1px solid rgba(26, 25, 23, 0.15);
  border-bottom: 1px solid rgba(26, 25, 23, 0.15);
  will-change: transform;
}

.amenity-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: calc((100vw - 170px) / 3.5);
  /* Shows exactly 3 full cards and 1/2 of the 4th card */
  min-width: 280px;
  flex-shrink: 0;
  padding: 24px 20px;
  border-right: 1px solid rgba(26, 25, 23, 0.15);
  background-color: transparent;
  transition: background-color 0.4s ease;
}

.amenity-card:first-child {
  border-left: 1px solid rgba(26, 25, 23, 0.15);
}

.amenity-card:hover {
  background-color: rgba(26, 25, 23, 0.02);
}

.amenity-img-box {
  width: 100%;
  aspect-ratio: 4 / 5;
  /* Vertical portrait aspect ratio */
  max-height: 46vh;
  /* Safe vertical height limit scaled up for centering */
  overflow: hidden;
  margin-bottom: 12px;
  /* Decreased margin */
  background-color: #e5dec9;
}

.amenity-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(10%) contrast(95%);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.amenity-card:hover .amenity-img-box img {
  transform: scale(1.05);
}

.amenity-card-title {
  font-family: var(--font-canela-trial);
  font-size: clamp(24px, 2vw, 30px);
  /* Increased card header font size */
  font-weight: 500;
  color: #1A1917;
  text-align: left;
  margin-top: 0;
  /* Removed top margin */
}

/* Responsive Overrides */
@media (max-width: 992px) {
  .amenities-scroll-container {
    height: auto;
  }

  .amenities-section {
    position: relative;
    height: auto;
    min-height: auto;
    padding: 80px 0;
  }

  .amenities-header-grid {
    grid-template-columns: 1fr;
    padding: 0 24px;
    gap: 24px;
    margin-bottom: 40px;
  }

  .amenities-tag-container,
  .amenities-title-container {
    grid-column: 1 / -1;
  }

  .amenities-grid-viewport {
    overflow: visible;
  }

  .amenities-grid {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    padding: 0 24px;
    border-bottom: none;
    transform: none !important;
  }

  .amenity-card {
    width: 100%;
    min-width: 100%;
    padding: 30px 0;
    border-right: none;
    border-bottom: 1px solid rgba(26, 25, 23, 0.15);
  }

  .amenity-card:first-child {
    border-left: none;
    border-top: 1px solid rgba(26, 25, 23, 0.15);
  }
}

/* ==========================================================================
   PROJECT OVERVIEW SECTION (SECTION 8)
   ========================================================================== */

.overview-section {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-image: url('BG section 8.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Base style for Hotspots */
.overview-hotspot {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  color: #1A1917;
  font-family: var(--font-apercu);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

/* Desktop: number span inside the circle */
.hotspot-num {
  line-height: 1;
  pointer-events: none;
}

/* Show More button hidden on desktop */
.overview-show-more {
  display: none;
}

.overview-hotspot:hover {
  background: #1A1917;
  color: #ffffff;
  transform: translate(-50%, -50%) scale(1.1);
}

/* Pulsing radar effect */
.overview-hotspot::before,
.overview-hotspot::after {
  content: '';
  position: absolute;
  top: -12px;
  left: -12px;
  right: -12px;
  bottom: -12px;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: hotspot-pulse 2s infinite ease-out;
  pointer-events: none;
  transition: border-color 0.3s ease;
}

.overview-hotspot::after {
  animation-delay: 1s;
}

.overview-hotspot:hover::before,
.overview-hotspot:hover::after {
  border-color: rgba(26, 25, 23, 0.4);
}

@keyframes hotspot-pulse {
  0% {
    transform: scale(0.7);
    opacity: 1;
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* Elegant Popups */
.hotspot-popup {
  position: absolute;
  left: 60px;
  top: 50%;
  transform: translateY(-50%) scale(0.95);
  width: 250px;
  background-color: rgba(247, 245, 240, 0.96);
  /* Elegant Harmony Cream bg */
  border: 1px solid rgba(26, 25, 23, 0.15);
  padding: 18px 22px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 25;
}

/* Pointer arrows for speech bubble shape */
.hotspot-popup::before {
  content: '';
  position: absolute;
  left: -13px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 13px solid rgba(26, 25, 23, 0.15);
  /* Arrow border */
  z-index: 24;
}

.hotspot-popup::after {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 12px solid rgba(247, 245, 240, 0.96);
  /* Arrow fill */
  z-index: 25;
}

.overview-hotspot:hover .hotspot-popup {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1) translateX(4px);
}

/* Reverse popup placement for right-aligned hotspots */
.overview-hotspot.popup-left .hotspot-popup {
  left: auto;
  right: 60px;
}

/* Reverse pointer direction for right-aligned hotspots */
.overview-hotspot.popup-left .hotspot-popup::before {
  left: auto;
  right: -13px;
  border-right: none;
  border-left: 13px solid rgba(26, 25, 23, 0.15);
}

.overview-hotspot.popup-left .hotspot-popup::after {
  left: auto;
  right: -12px;
  border-right: none;
  border-left: 12px solid rgba(247, 245, 240, 0.96);
}

.overview-hotspot.popup-left:hover .hotspot-popup {
  transform: translateY(-50%) scale(1) translateX(-4px);
}

/* Text styles inside popup */
.popup-title {
  font-family: var(--font-canela-trial);
  font-size: 30px;
  font-weight: 500;
  /* Light weight from Figma */
  color: #1A1917;
  letter-spacing: -0.02em;
  /* -2% letter spacing from Figma */
  margin: 0 0 20px 0;
  /* Increased margin between title and description */
  line-height: normal;
  /* Auto line height from Figma */
}

.popup-desc {
  font-family: var(--font-canela-trial);
  font-size: 22px;
  /* 18px from Figma */
  font-weight: 500;
  /* Light weight from Figma */
  color: #686461;
  letter-spacing: -0.02em;
  /* -2% letter spacing from Figma */
  text-transform: none;
  margin: 4px 0 0 0;
  line-height: normal;
  /* Auto line height from Figma */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* Title Overlay */
.project-overview-title {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  font-family: var(--font-canela-trial);
  font-size: clamp(2.5rem, 5vw, 64px);
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 10;
  pointer-events: none;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.project-overview-title.reveal-text-mask {
  transform: translate3d(-50%, 45px, 0) skewY(2deg);
}

.project-overview-title.reveal-text-mask.revealed {
  transform: translate3d(-50%, 0, 0) skewY(0deg);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .overview-section {
    height: auto;
    padding: 80px 0 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .overview-hotspot {
    position: relative;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 90%;
    max-width: 420px;
    height: auto;
    border-radius: 12px;
    background-color: #F7F5F0;
    padding: 18px 20px;
    /* Flex-row: number + popup content side by side */
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
  }

  .overview-hotspot::before,
  .overview-hotspot::after {
    display: none;
  }

  /* Number badge on mobile */
  .hotspot-num {
    flex-shrink: 0;
    font-family: var(--font-apercu);
    font-size: 12px;
    font-weight: 700;
    color: #686461;
    letter-spacing: 0.04em;
    padding-top: 6px;
    min-width: 18px;
    text-align: left;
  }

  .hotspot-popup {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none !important;
    width: 100%;
    opacity: 1;
    pointer-events: auto;
    padding: 0;
    background-color: transparent;
    border: none;
    box-shadow: none;
    margin-top: 0;
  }

  /* Reset popup-left overrides on mobile so cards don't get clipped */
  .overview-hotspot.popup-left .hotspot-popup {
    left: auto;
    right: auto;
  }

  .overview-hotspot.popup-left .hotspot-popup::before,
  .overview-hotspot.popup-left .hotspot-popup::after {
    display: none;
  }

  /* Hotspots 6–10 hidden on mobile by default */
  .hotspot-extra {
    display: none;
  }

  /* Revealed when user clicks Show More */
  .hotspot-extra.hotspot-revealed {
    display: flex;
  }

  /* Show More Button – only visible on mobile */
  .overview-show-more {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    color: #ffffff;
    font-family: var(--font-apercu);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 12px 24px;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    order: 99;
  }

  .overview-show-more:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.85);
  }


  .show-more-icon {
    font-size: 18px;
    line-height: 1;
    display: inline-block;
    transition: transform 0.4s ease;
  }

  .show-more-icon.rotated {
    transform: rotate(180deg);
  }

  /* Tighter title spacing inside mobile card */
  .hotspot-popup .popup-title {
    font-size: 22px;
    margin-bottom: 6px;
  }

  .hotspot-popup .popup-desc {
    font-size: 16px;
    margin-top: 2px;
  }

  .project-overview-title {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none !important;
    width: 100%;
    text-align: center;
    order: -1;
    margin-bottom: 20px;
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  }

  /* Cancel JS-added reveal-text-mask transforms on mobile */
  .project-overview-title.reveal-text-mask,
  .project-overview-title.reveal-text-mask.revealed {
    transform: none !important;
    left: auto !important;
  }
}

/* ==========================================================================
   HARMONY FOOTER SECTION
   ========================================================================== */

.harmony-footer {
  position: relative;
  width: 100%;
  background-image: url('footer%20image.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: clamp(60px, 6vw, 100px) 170px clamp(40px, 4vw, 60px) 170px;
  box-sizing: border-box;
  color: #ffffff;
}

.footer-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(0px, 6vh, 0px);
}

/* Row 1: Top header contact details */
.footer-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-office-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-office-tag {
  font-family: var(--font-apercu);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: #EEE9E4;
  text-transform: uppercase;
}

.footer-office-sub {
  font-family: var(--font-apercu);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
}

.footer-contact-details {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.footer-phone {
  font-family: var(--font-canela-trial);
  font-size: clamp(2rem, 3.5vw, 42px);
  font-weight: 300;
  color: #ffffff;
  text-decoration: none;
  line-height: 1.1;
  transition: opacity 0.3s ease;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

.footer-phone:hover {
  opacity: 0.8;
}

.footer-email {
  font-family: var(--font-canela-trial);
  font-size: clamp(1.1rem, 1.8vw, 20px);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-email:hover {
  color: #ffffff;
}

/* Row 2: Central Logo */
.footer-center-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}

.footer-logo {
  width: 260px;
  height: auto;
  opacity: 0.95;
}

/* Row 3: Bottom info & socials */
.footer-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 16px;
}

.footer-location {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.footer-address {
  font-family: var(--font-canela-trial);
  font-size: clamp(1.2rem, 2vw, 24px);
  font-weight: 300;
  color: #ffffff;
}

.footer-contact-btn {
  display: inline-block;
  background-color: #F7F5F0;
  color: #1A1917;
  border: 1px solid #F7F5F0;
  padding: 12px 24px;
  font-family: var(--font-apercu);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.footer-contact-btn:hover {
  background-color: transparent;
  color: #F7F5F0;
  border-color: #F7F5F0;
}


.modal-submit-btn {
  display: inline-block;
  background-color: #F7F5F0;
  color: #1A1917;
  border: 1px solid #F7F5F0;
  padding: 12px 24px;
  font-family: var(--font-apercu);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  text-align: center;
  width: 100%;
}

.modal-submit-btn:hover {
  background-color: transparent;
  color: #F7F5F0;
  border-color: #F7F5F0;
}

/* Social Icon Circles */
.footer-socials {
  display: flex;
  gap: 12px;
}

.social-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.2s ease;
  text-decoration: none;
}

.social-circle img {
  width: 18px;
  height: 18px;
  /* SVG icons are already light #EEE9E4, no invert filter needed */
  transition: transform 0.3s ease;
}

.social-circle:hover {
  border-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
}

.social-circle:hover img {
  transform: scale(1.1);
}

/* Row 4: Sub footer legal notes */
.footer-legal-row {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-copyright {
  font-family: var(--font-apercu);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
}

.footer-legal-links {
  display: flex;
  gap: 24px;
}

.footer-legal-link {
  font-family: var(--font-apercu);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.footer-legal-link:hover {
  color: #ffffff;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .harmony-footer {
    padding: 60px 40px 30px 40px;
  }
}

@media (max-width: 768px) {
  .harmony-footer {
    padding: 60px 24px 30px 24px;
  }

  .footer-top-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  .footer-contact-details {
    align-items: flex-start;
  }

  .footer-logo {
    width: 180px;
  }

  .footer-bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  .footer-socials {
    align-self: flex-start;
  }

  .footer-legal-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .footer-legal-links {
    flex-wrap: wrap;
    gap: 16px;
  }
}

/* ==========================================================================
   MENU DRAWER SYSTEM
   ========================================================================== */

.menu-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: rgba(11, 12, 14, 0.98);
  z-index: 999;
  transform: translateY(-100%);
  transition: transform 0.6s cubic-bezier(0.85, 0, 0.15, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 36px 170px;
  box-sizing: border-box;
  color: #ffffff;
  pointer-events: auto;
}

.menu-drawer.active {
  transform: translateY(0);
}

.drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.drawer-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.drawer-logo {
  height: 18px;
  width: auto;
}

.drawer-close {
  background: none;
  border: none;
  color: #EEE9E4;
  font-size: 36px;
  cursor: pointer;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.3s ease, transform 0.3s ease;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  margin: auto 0;
}

.drawer-link {
  font-family: var(--font-canela-trial);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 300;
  color: rgba(238, 233, 228, 0.7);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: color 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
  transform-origin: right;
  text-align: right;
  line-height: 1.1;
}

.drawer-nav:hover .drawer-link {
  opacity: 0.3;
}

.drawer-nav .drawer-link:hover {
  opacity: 1;
  color: #ffffff;
  transform: scale(1.05);
}

.drawer-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid rgba(238, 233, 228, 0.1);
  padding-top: 36px;
  margin-top: 40px;
  width: 100%;
}

.drawer-footer-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drawer-footer-label {
  font-family: var(--font-apercu);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: rgba(238, 233, 228, 0.4);
  text-transform: uppercase;
}

.drawer-footer-value {
  font-family: var(--font-canela-trial);
  font-size: 18px;
  font-weight: 300;
  color: #EEE9E4;
  text-decoration: none;
  transition: color 0.3s ease;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

a.drawer-footer-value:hover {
  color: #ffffff;
}

/* Full-Screen Drawer Responsive Queries */
@media (max-width: 992px) {
  .menu-drawer {
    padding: 24px 40px;
  }

  .drawer-nav {
    gap: 12px;
  }

  .drawer-link {
    font-size: clamp(32px, 5vw, 56px);
  }
}

@media (max-width: 768px) {
  .menu-drawer {
    padding: 24px;
  }

  .drawer-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 24px;
    margin-top: 24px;
  }

  .drawer-footer-col {
    gap: 4px;
  }

  .drawer-footer-value {
    font-size: 15px;
  }
}

/* ==========================================================================
   CUSTOM CURSOR SYSTEM
   ========================================================================== */

/* Hide default cursor on desktop pointers */
@media (pointer: fine) {

  body,
  a,
  button,
  .menu-btn,
  .room-tab,
  .overview-hotspot,
  .excellence-arrow,
  .slider-arrow,
  .footer-phone,
  .footer-email,
  .footer-contact-btn,
  .modal-submit-btn,
  .social-circle,
  .drawer-link,
  .drawer-close {
    cursor: none !important;
  }

  .custom-cursor-dot,
  .custom-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate3d(-100px, -100px, 0);
    will-change: transform;
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      height 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      background-color 0.3s ease,
      border-color 0.3s ease;
  }

  .custom-cursor-dot {
    width: 8px;
    height: 8px;
    background-color: #ffffff;
    mix-blend-mode: difference;
    transition: width 0.35s cubic-bezier(0.25, 1, 0.5, 1),
      height 0.35s cubic-bezier(0.25, 1, 0.5, 1),
      background-color 0.35s ease;
  }

  .custom-cursor-dot.hovered {
    width: 50px;
    height: 50px;
    background-color: #ffffff;
  }

  .custom-cursor-ring {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    mix-blend-mode: difference;
    transition: width 0.35s cubic-bezier(0.25, 1, 0.5, 1),
      height 0.35s cubic-bezier(0.25, 1, 0.5, 1),
      opacity 0.35s ease,
      border-color 0.35s ease;
  }

  .custom-cursor-ring.hovered {
    width: 0px;
    height: 0px;
    opacity: 0;
    border-color: transparent;
  }
}

/* Force hiding on mobile touch screens */
@media (pointer: coarse) {

  .custom-cursor-dot,
  .custom-cursor-ring {
    display: none !important;
  }
}

/* ==========================================================================
   ABOUT US PAGE STYLING
   ========================================================================== */

.about-page {
  background-color: var(--color-bg-dark);
  color: var(--color-font-primary);
  overflow-x: hidden;
}

/* Fixed Header Wrapper for About Page */
.about-header-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 36px 170px;
  z-index: 100;
  box-sizing: border-box;
  pointer-events: none;
}

.about-header-wrapper .hero-header {
  pointer-events: auto;
}

@media (max-width: 992px) {
  .about-header-wrapper {
    padding: 24px;
  }
}

/* Full-Screen About Hero */
.about-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('BG about hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

.about-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,
      rgba(11, 12, 14, 0.6) 0%,
      rgba(11, 12, 14, 0.4) 50%,
      rgba(11, 12, 14, 0.75) 100%);
  z-index: 2;
  pointer-events: none;
}

.about-hero-content {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1400px;
  padding: 0 40px;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.about-hero-title {
  font-family: var(--font-canela-trial);
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-font-primary);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
  max-width: 1200px;
  margin: 0;
}

.about-hero-title .italic-lowercase {
  font-family: var(--font-canela-trial);
  font-style: italic;
  text-transform: lowercase;
  font-weight: 300;
  font-size: 0.9em;
  opacity: 0.95;
}

/* Scroll Down Indicator */
.about-hero-scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.about-hero-scroll:hover {
  opacity: 1;
}

.about-hero-scroll .scroll-text {
  font-family: var(--font-apercu);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--color-font-primary);
}

.about-hero-scroll .scroll-arrow-icon {
  animation: bounceArrow 2s infinite;
}

@keyframes bounceArrow {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-6px);
  }

  60% {
    transform: translateY(-3px);
  }
}

/* ==========================================================================
   ABOUT US - OUR PHILOSOPHY SECTION
   ========================================================================== */

.about-philosophy-section {
  background-color: #F7F5F0;
  color: #1A1917;
  padding: 120px 170px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.philosophy-header {
  text-align: center;
  max-width: 850px;
  margin-bottom: clamp(30px, 4vw, 45px);
}

.philosophy-eyebrow {
  font-family: var(--font-apercu);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: #386B5A;
  text-transform: uppercase;
  display: block;
  margin-bottom: 24px;
}

.philosophy-title {
  font-family: var(--font-canela-trial);
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 400;
  line-height: 1.35;
  color: #1A1917;
  margin: 0;
}

/* 3-Column Content Grid with Overlap */
.philosophy-content-grid {
  display: grid;
  grid-template-columns: 1.1fr 2fr 1.1fr;
  align-items: center;
  width: 100%;
  max-width: 1400px;
  position: relative;
}

.philosophy-text-left {
  position: relative;
  text-align: right;
  z-index: 1;
  margin-right: -70px;
  pointer-events: none;
  align-self: end;
}

.philosophy-text-right {
  position: relative;
  text-align: left;
  z-index: 1;
  margin-left: -70px;
  pointer-events: none;
  align-self: end;
}

.philosophy-side-title {
  font-family: var(--font-canela-trial);
  font-size: clamp(40px, 6vw, 96px);
  font-weight: 600;
  line-height: 0.92;
  color: #1A1917;
  text-transform: uppercase;
  margin: 0;
}

.philosophy-image-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  z-index: 3;
}

.philosophy-white-text-left,
.philosophy-white-text-right {
  position: absolute;
  bottom: 0;
  z-index: 6;
  pointer-events: none;
  white-space: nowrap;
  display: none;
}

@media (min-width: 993px) {

  .philosophy-white-text-left,
  .philosophy-white-text-right {
    display: block;
  }

  .philosophy-white-text-left {
    right: calc(100% - 70px);
    text-align: right;
  }

  .philosophy-white-text-right {
    left: calc(100% - 70px);
    text-align: left;
  }
}

@media (min-width: 993px) and (max-width: 1200px) {
  .philosophy-white-text-left {
    right: calc(100% - 40px);
  }

  .philosophy-white-text-right {
    left: calc(100% - 40px);
  }
}

.philosophy-side-title.white-text {
  color: #ffffff !important;
}

.philosophy-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

/* Responsive Queries for Philosophy Section */
@media (max-width: 1200px) {
  .about-philosophy-section {
    padding: 100px 80px;
  }

  .philosophy-text-left {
    margin-right: -40px;
  }

  .philosophy-text-right {
    margin-left: -40px;
  }
}

@media (max-width: 992px) {
  .about-philosophy-section {
    padding: 80px 40px;
  }

  .philosophy-content-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .philosophy-text-left,
  .philosophy-text-right {
    text-align: center;
    margin: 0;
  }

  .philosophy-side-title {
    font-size: clamp(32px, 6vw, 64px);
    line-height: 1.1;
  }

  .philosophy-image-wrapper {
    max-width: 600px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .about-philosophy-section {
    padding: 60px 24px;
  }

  .philosophy-header {
    margin-bottom: 40px;
  }

  .philosophy-eyebrow {
    margin-bottom: 16px;
  }
}

/* ==========================================================================
   ABOUT US - PROJECT IN FIGURES SECTION
   ========================================================================== */

.about-figures-section {
  background-color: #F7F5F0;
  color: #1A1917;
  padding: 120px 170px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.figures-header {
  width: 100%;
  max-width: 1400px;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 30px;
}

.figures-eyebrow {
  font-family: var(--font-apercu);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: #386B5A;
  border: 1px solid #386B5A;
  padding: 8px 20px;
  border-radius: 20px;
  text-transform: uppercase;
  display: inline-block;
}

.figures-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(26, 25, 23, 0.15);
  width: 100%;
  max-width: 1400px;
  box-sizing: border-box;
}

.figures-cell {
  border-right: 1px solid rgba(26, 25, 23, 0.15);
  border-bottom: 1px solid rgba(26, 25, 23, 0.15);
  padding: 60px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

/* Remove right borders on last column cells */
.figures-cell:nth-child(3n) {
  border-right: none;
}

/* Remove bottom borders on last row cells */
.figures-cell:nth-child(n+4) {
  border-bottom: none;
}

.figures-number {
  font-family: var(--font-canela-trial);
  font-size: clamp(60px, 8.5vw, 120px);
  font-weight: 300;
  line-height: 100%;
  letter-spacing: -0.02em;
  color: #1A1917;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

.figures-label {
  font-family: var(--font-canela-trial);
  font-size: clamp(20px, 3vw, 40px);
  font-weight: 300;
  line-height: 100%;
  letter-spacing: -0.02em;
  color: #686461;
}

/* Responsive Queries for Figures Section */
@media (max-width: 1200px) {
  .about-figures-section {
    padding: 100px 80px;
  }

  .figures-cell {
    padding: 48px 36px;
  }
}

@media (max-width: 992px) {
  .about-figures-section {
    padding: 80px 40px;
  }

  .figures-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .figures-cell {
    border-right: 1px solid rgba(26, 25, 23, 0.15);
    border-bottom: 1px solid rgba(26, 25, 23, 0.15);
  }

  .figures-cell:nth-child(2n) {
    border-right: none;
  }

  .figures-cell:nth-child(n+5) {
    border-bottom: none;
  }
}

@media (max-width: 768px) {
  .about-figures-section {
    padding: 60px 24px;
  }

  .figures-grid {
    grid-template-columns: 1fr;
  }

  .figures-cell {
    border-right: none;
    border-bottom: 1px solid rgba(26, 25, 23, 0.15);
    padding: 40px 20px;
  }

  /* Reset desktop nth-child rules that remove borders */
  .figures-cell:nth-child(3n),
  .figures-cell:nth-child(2n),
  .figures-cell:nth-child(n+4),
  .figures-cell:nth-child(n+5) {
    border-right: none;
    border-bottom: 1px solid rgba(26, 25, 23, 0.15);
  }

  /* Only remove bottom border on the very last card */
  .figures-cell:last-child {
    border-bottom: none;
  }

  .figures-number {
    font-size: 60px;
  }
}

/* ==========================================================================
   ABOUT US - PARTNERS SHOWCASE SECTION
   ========================================================================== */

.about-partners-section {
  background-color: #F7F5F0;
  color: #1A1917;
  padding: 120px 0;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.partners-header {
  text-align: center;
  max-width: 1000px;
  padding: 0 40px;
  margin-bottom: 70px;
  box-sizing: border-box;
}

.partners-title {
  font-family: var(--font-canela-trial);
  font-size: clamp(40px, 6vw, 90px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #1A1917;
  text-transform: uppercase;
  margin: 0 0 16px 0;
}

.partners-subtitle {
  font-family: var(--font-apercu);
  font-size: clamp(12px, 1.5vw, 16px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #686461;
  text-transform: uppercase;
  margin: 0;
}

/* Infinite Scrolling Marquee Layout */
.partners-marquee-row {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  white-space: nowrap;
}

.partners-marquee-row.row-1 {
  border-top: 1px solid rgba(26, 25, 23, 0.15);
  border-bottom: 1px solid rgba(26, 25, 23, 0.15);
}

.partners-marquee-row.row-2 {
  border-bottom: 1px solid rgba(26, 25, 23, 0.15);
}

.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

/* Disabled CSS auto-scroll marquee in favor of JS scroll-bound translations */
.row-1 .marquee-track,
.row-2 .marquee-track {
  animation: none !important;
}

@keyframes marqueeLeft {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-33.333%, 0, 0);
  }
}

@keyframes marqueeRight {
  0% {
    transform: translate3d(-33.333%, 0, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 105px;
  height: 160px;
  box-sizing: border-box;
  border-right: 1px solid rgba(26, 25, 23, 0.15);
  flex-shrink: 0;
}

.logo-item svg {
  transform: scale(1.85);
  transform-origin: center;
  will-change: transform;
}

/* Responsive Queries for Partners Section */
@media (max-width: 992px) {
  .about-partners-section {
    padding: 80px 0;
  }

  .partners-header {
    margin-bottom: 50px;
  }

  .logo-item {
    padding: 30px 75px;
    height: 120px;
  }

  .logo-item svg {
    transform: scale(1.45);
  }
}

@media (max-width: 768px) {
  .about-partners-section {
    padding: 60px 0;
  }

  .partners-header {
    margin-bottom: 40px;
  }

  .logo-item {
    padding: 24px 50px;
    height: 90px;
  }

  .logo-item svg {
    transform: scale(1.15);
  }
}

/* ==========================================================================
   CONTACT US - MAIN SPLIT LAYOUT & CARD STYLING
   ========================================================================== */

.light-header-wrapper,
.about-header-wrapper {
  width: 100%;
  padding: 20px 170px;
  background-color: #F7F5F0;
  border-bottom: 1px solid rgba(26, 25, 23, 0.15);
  box-sizing: border-box;
  position: relative;
  z-index: 100;
}

.contact-split-section {
  width: 100%;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background-color: #F7F5F0;
  height: calc(100vh - 61px);
  min-height: calc(100vh - 61px);
  max-height: calc(100vh - 61px);
  box-sizing: border-box;
  position: relative;
  border-bottom: 1px solid rgba(26, 25, 23, 0.15);
  overflow: hidden;
}

.contact-left-col {
  padding: 40px 100px 40px 170px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid rgba(26, 25, 23, 0.15);
  box-sizing: border-box;
}

.contact-right-col {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 600px;
  overflow: hidden;
  box-sizing: border-box;
}

.contact-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.contact-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,
      rgba(11, 12, 14, 0.1) 0%,
      rgba(11, 12, 14, 0.05) 60%,
      rgba(11, 12, 14, 0.65) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 60px;
  box-sizing: border-box;
}

.contact-card-address {
  font-family: var(--font-canela-trial);
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 300;
  color: #ffffff;
  margin-bottom: 24px;
}

.contact-card-btn {
  display: inline-block;
  background-color: #ffffff;
  color: #1A1917;
  border: 1px solid #ffffff;
  padding: 14px 28px;
  font-family: var(--font-apercu);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}

.contact-card-btn:hover {
  background-color: transparent;
  color: #ffffff;
  border-color: #ffffff;
}

.contact-left-content {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 6vh, 75px);
}

.contact-group {
  display: flex;
  flex-direction: column;
}

.group-details {
  gap: clamp(24px, 3vh, 36px);
}

.group-schedule {
  gap: clamp(24px, 3vh, 36px);
}

.contact-category {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-tag {
  font-family: var(--font-apercu);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #1A1917;
  text-transform: uppercase;
}

.contact-sub {
  font-family: var(--font-apercu);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: rgba(26, 25, 23, 0.4);
  text-transform: uppercase;
}

.contact-info-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.info-label {
  font-family: var(--font-canela-trial);
  font-size: clamp(22px, 1.5vw, 18px);
  font-weight: 400;
  color: #1A1917;
  text-transform: capitalize;
}

.info-value {
  font-family: var(--font-canela-trial);
  font-size: clamp(32px, 4.2vw, 68px);
  font-weight: 400;
  color: #1A1917;
  text-decoration: none;
  line-height: 1.1;
  transition: opacity 0.3s ease;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

.info-value:hover {
  opacity: 0.8;
}

.contact-hours-row {
  display: flex;
  gap: 36px;
}

.hours-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hours-day {
  font-family: var(--font-apercu);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: #2E5D4E;
  text-transform: uppercase;
}

.hours-time {
  font-family: var(--font-apercu);
  font-size: 12px;
  color: #1A1917;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

.contact-socials {
  display: flex;
  gap: 12px;
}

.contact-social-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(26, 25, 23, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.2s ease;
  text-decoration: none;
}

.contact-social-circle img {
  width: 18px;
  height: 18px;
  filter: invert(1) brightness(0.1);
  transition: transform 0.3s ease;
}

.contact-social-circle:hover {
  border-color: #1A1917;
  background-color: rgba(26, 25, 23, 0.05);
  transform: translateY(-2px);
}

.contact-social-circle:hover img {
  transform: scale(1.1);
}

/* Responsive Queries for Contact Us Page */
@media (max-width: 1200px) {

  .light-header-wrapper,
  .about-header-wrapper {
    padding: 36px 80px;
  }

  .contact-left-col {
    padding: 60px 60px 60px 80px;
  }
}

@media (max-width: 992px) {

  .light-header-wrapper,
  .about-header-wrapper {
    padding: 24px 40px;
  }

  .contact-split-section {
    grid-template-columns: 1fr;
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
  }

  .contact-left-col {
    padding: 48px 40px;
    border-right: none;
    border-bottom: 1px solid rgba(26, 25, 23, 0.15);
  }

  .contact-right-col {
    min-height: 500px;
  }

  .about-project-section {
    height: auto;
    min-height: 100vh;
    padding: 100px 24px;
  }

  .room-interactive-section {
    height: auto;
    min-height: 100vh;
    align-items: flex-end;
  }
}

@media (max-width: 768px) {

  .light-header-wrapper,
  .about-header-wrapper {
    padding: 24px;
  }

  .contact-left-col {
    padding: 36px 24px;
  }

  .contact-hours-row {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 35px;
  }

  .contact-right-col {
    min-height: 400px;
  }

  .contact-card-overlay {
    padding: 30px;
  }

  .sales-info {
    display: none;
  }
}

@media (max-width: 576px) {
  .modal-box {
    padding: 24px;
  }
}

/* Contact Page specific border overrides */
.contact-page .contact-split-section {
  border-bottom: none;
}

/* ==========================================================================
   CINEMATIC SCROLL REVEAL ANIMATIONS
   ========================================================================== */

/* Hardware accelerated initial states */
/* ==========================================================================
   SCROLL REVEAL ANIMATION SYSTEM
   ========================================================================== */

/* --- Fade Up (default) --- */
.reveal-fade-up {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  will-change: opacity, transform;
}
.reveal-fade-up.revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Skew Text Mask --- */
.reveal-text-mask {
  opacity: 0;
  transform: translate3d(0, 50px, 0) skewY(2.5deg);
  transform-origin: left top;
  will-change: opacity, transform;
}
.reveal-text-mask.revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) skewY(0deg);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Image Scale Zoom --- */
.reveal-image-scale { overflow: hidden; }
.reveal-image-scale img,
img.reveal-image-scale {
  opacity: 0;
  transform: scale(1.08);
  will-change: opacity, transform;
  transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-image-scale.revealed img,
img.reveal-image-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* --- Slide from Left --- */
.reveal-slide-left {
  opacity: 0;
  transform: translate3d(-50px, 0, 0);
  will-change: opacity, transform;
}
.reveal-slide-left.revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Slide from Right --- */
.reveal-slide-right {
  opacity: 0;
  transform: translate3d(50px, 0, 0);
  will-change: opacity, transform;
}
.reveal-slide-right.revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Scale Up (cards, tags) --- */
.reveal-scale-up {
  opacity: 0;
  transform: scale(0.94) translate3d(0, 20px, 0);
  will-change: opacity, transform;
}
.reveal-scale-up.revealed {
  opacity: 1;
  transform: scale(1) translate3d(0, 0, 0);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Stagger delay support for all types --- */
.reveal-fade-up.revealed[style*="--stagger-delay"],
.reveal-scale-up.revealed[style*="--stagger-delay"],
.reveal-slide-left.revealed[style*="--stagger-delay"],
.reveal-slide-right.revealed[style*="--stagger-delay"] {
  transition-delay: var(--stagger-delay) !important;
}
.reveal-image-scale.revealed img[style*="--stagger-delay"],
img.reveal-image-scale.revealed[style*="--stagger-delay"],
.revealed[style*="--stagger-delay"],
.revealed img[style*="--stagger-delay"] {
  transition-delay: var(--stagger-delay) !important;
}
}