/* ==========================================================================
   Estate Skyvue Custom Stylesheet
   Designed for: Luxury Residential Branding (Teal, Gold, Charcoal Palette)
   ========================================================================== */
:root {
  --color-bg-darker: #060a08;
  --color-bg-dark: #0d1510;
  --color-bg-card: #121c18;
  --color-bg-glass: rgba(12, 18, 15, 0.82);
  --color-primary: #0a3d34;
  --color-primary-light: #12574c;
  --color-primary-dark: #04221c;
  --color-gold: #c5a059;
  --color-gold-light: #e0c07e;
  --color-gold-dark: #9f7d3a;
  --color-gold-gradient: linear-gradient(
    135deg,
    #e0c07e 0%,
    #c5a059 50%,
    #9f7d3a 100%
  );
  --color-text-light: #f5f8f6;
  --color-text-muted: #b8cec3;
  --color-text-body: #ccddd5;
  --color-text-dark: #121c17;
  --border-gold: 1px solid rgba(197, 160, 89, 0.35);
  --border-gold-focus: 1px solid rgba(197, 160, 89, 0.85);
  --border-glass: 1px solid rgba(255, 255, 255, 0.07);
  --shadow-luxury: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-gold: 0 4px 18px rgba(197, 160, 89, 0.18);
  --font-headings: "Cinzel", serif;
  --font-body: "Outfit", sans-serif;
  --transition-smooth: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --border-radius-lg: 16px;
  /* Height of the fixed navbar once scrolled (logo + padding). Used by full-bleed
     sections so their content never slides under the menu. */
  --nav-h: 64px;
}
@media (min-width: 1920px) {
  :root {
    --nav-h: 72px;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  font-size: clamp(14px, 0.55vw + 9.46px, 22px);
  background-color: var(--color-bg-darker);
  color: var(--color-text-light);
  font-family: var(--font-body);
}
body {
  overflow-x: hidden;
  width: 100%;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* buttons and fields use the site's font, not the browser's system font (the 3 BHK / 4 BHK choice was in Arial) */
button, input, select, textarea {
  font-family: inherit;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-darker);
}
::-webkit-scrollbar-thumb {
  background: var(--color-primary-dark);
  border: 2px solid var(--color-bg-darker);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold);
}
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-headings);
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1.3;
}
a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-smooth);
}
.section {
  padding: clamp(60px, 6vw, 140px) 0;
  position: relative;
}
.alt-bg {
  background-color: var(--color-bg-dark);
}
.container {
  width: 92%;
  max-width: clamp(1240px, 72vw, 1800px);
  margin: 0 auto;
}
.grid {
  display: grid;
  gap: 24px;
}
.grid-2-col {
  grid-template-columns: 1fr;
}
.grid-3-col {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .grid-2-col {
    grid-template-columns: 1fr 1fr;
  }
  .grid-3-col {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .grid-3-col {
    grid-template-columns: repeat(3, 1fr);
  }
}
.gap-md {
  gap: 24px;
}
.gap-lg {
  gap: 40px;
}
.text-center {
  text-align: center;
}
.section-header {
  text-align: center;
  margin-bottom: clamp(35px, 3.5vw, 70px);
}
.section-subtitle {
  font-size: clamp(0.68rem, 0.3vw + 0.4rem, 0.95rem);
  text-transform: uppercase;
  color: var(--color-gold);
  letter-spacing: clamp(4px, 0.35vw, 7px);
  font-weight: 600;
  display: block;
  margin-bottom: 10px;
}
.section-title {
  font-size: clamp(1.8rem, 1.5vw + 0.6rem, 3rem);
  font-weight: 700;
  color: var(--color-text-light);
  letter-spacing: 1.5px;
  line-height: 1.25;
}
.header-divider {
  width: 50px;
  height: 2px;
  background: var(--color-gold-gradient);
  margin: 12px auto 0;
  border-radius: 2px;
}
.lead-text {
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--color-text-light);
  margin-bottom: 18px;
  line-height: 1.75;
}
p {
  color: var(--color-text-body);
  font-weight: 400;
  margin-bottom: 16px;
  font-size: 0.94rem;
  line-height: 1.7;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 28px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: var(--transition-smooth);
  border: 1px solid transparent;
  line-height: 1.4;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-gold-gradient);
  color: var(--color-bg-darker);
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(197, 160, 89, 0.3);
  filter: brightness(1.08);
}
.btn-outline {
  background: transparent;
  color: var(--color-gold-light);
  border: 1px solid rgba(197, 160, 89, 0.45);
}
.btn-outline:hover {
  background: rgba(197, 160, 89, 0.08);
  border-color: var(--color-gold-light);
  color: #fff;
  transform: translateY(-1px);
}
.btn-full {
  width: 100%;
  text-align: center;
  justify-content: center;
}
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  padding: 18px 0;
  transition: var(--transition-smooth);
}
.navbar.scrolled {
  padding: 12px 0;
  background: var(--color-bg-glass);
  border-bottom: var(--border-glass);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  will-change: transform, backdrop-filter;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}
.nav-container {
  width: 90%;
  max-width: clamp(1200px, 70vw, 1760px);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.brand-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.25s ease;
}
.brand-logo:hover {
  transform: translateY(-1px);
}
.brand-logo:active {
  transform: scale(0.98);
}
.brand-logo-img {
  height: 46px;
  width: auto;
  max-width: 156px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.75));
  transition: height 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
              filter 0.35s ease,
              transform 0.35s ease;
  will-change: height, filter;
}
.brand-logo:hover .brand-logo-img {
  filter: drop-shadow(0 3px 14px rgba(197, 160, 89, 0.32))
          drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8))
          brightness(1.06);
}
.navbar.scrolled .brand-logo-img {
  height: 38px;
}
@media (max-width: 1023px) {
  .brand-logo-img {
    height: 40px;
    max-width: 136px;
  }
  .navbar.scrolled .brand-logo-img {
    height: 34px;
  }
}
/* Large monitors: the logo was fixed at 46px while the text around it scales up, so it
   looked undersized on a 32" screen. */
@media (min-width: 1920px) {
  .brand-logo-img {
    height: 54px;
    max-width: 184px;
  }
  .navbar.scrolled .brand-logo-img {
    height: 46px;
  }
}
@media (max-width: 480px) {
  .brand-logo-img {
    height: 35px;
    max-width: 120px;
  }
  .navbar.scrolled .brand-logo-img {
    height: 30px;
  }
}
.logo-serif {
  font-family: var(--font-headings);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 3px;
  color: var(--color-text-light);
}
.logo-accent {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 5px;
  color: var(--color-gold);
  margin-top: 2px;
}
.nav-links {
  display: none;
}
.nav-link {
  font-size: 0.76rem;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 2px;
  padding: 4px 0;
  position: relative;
  color: var(--color-text-muted);
}
.nav-link:hover,
.nav-link.active {
  color: var(--color-gold-light);
}
.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-gold);
  transition: var(--transition-smooth);
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}
.nav-cta {
  display: none;
}
@media (min-width: 1024px) {
  .nav-links {
    display: flex;
    gap: clamp(14px, 1.4vw, 30px);
  }
  .nav-cta {
    display: inline-flex;
    padding: 8px 18px;
    font-size: 0.74rem;
    letter-spacing: 2px;
  }
}
/* 1024–1199px (small laptops / iPad landscape): the menu collided with the CTA button.
   "Inquiry" is already in the menu, so the duplicate CTA is hidden at this width. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav-link {
    letter-spacing: 1.2px;
  }
  .nav-cta {
    display: none;
  }
}
.mobile-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 30px;
  height: 24px;
  justify-content: center;
}
.mobile-toggle .bar {
  width: 100%;
  height: 2px;
  background: var(--color-text-light);
  transition: var(--transition-smooth);
  border-radius: 2px;
}
@media (min-width: 1024px) {
  .mobile-toggle {
    display: none;
  }
}
.navbar.menu-open {
  background: var(--color-bg-darker) !important;
}
.navbar.menu-open .nav-links {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--color-bg-dark);
  padding: 40px 5%;
  gap: 25px;
  border-bottom: var(--border-glass);
  animation: slideDown 0.3s ease forwards;
}
.navbar.menu-open .mobile-toggle .bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 6px);
}
.navbar.menu-open .mobile-toggle .bar:nth-child(2) {
  opacity: 0;
}
.navbar.menu-open .mobile-toggle .bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -6px);
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-section {
  min-height: 100vh;
  height: auto;
  padding: clamp(70px, 10vh, 120px) 0 clamp(50px, 8vh, 90px);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-darker);
}
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  background-color: #060a08;
}
.hero-video-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.65;
  background-color: #060a08;
  transform: translateZ(0);
  will-change: transform;
}
.hero-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(12, 18, 15, 0.1) 0%,
    rgba(6, 10, 8, 0.95) 90%
  );
  z-index: 3;
}
.hero-content {
  position: relative;
  z-index: 4;
  width: 90%;
  max-width: clamp(900px, 55vw, 1300px);
}
.brand-title-holder {
  padding: 20px;
}
.hero-title {
  font-size: clamp(3rem, 2.5vw + 1rem, 6rem);
  font-weight: 700;
  letter-spacing: clamp(5px, 0.6vw, 14px);
  color: var(--color-text-light);
  text-transform: uppercase;
  font-family: var(--font-headings);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
  margin-bottom: 5px;
}
.gold-text {
  color: var(--color-gold-light);
  background: var(--color-gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.title-underline {
  width: 80px;
  height: 2px;
  background: var(--color-gold-gradient);
  margin: 12px auto 20px;
  border-radius: 2px;
  box-shadow: var(--shadow-gold);
}
.hero-tagline {
  font-family: var(--font-headings);
  font-size: clamp(0.85rem, 0.4vw + 0.55rem, 1.5rem);
  letter-spacing: clamp(4px, 0.5vw, 10px);
  color: var(--color-text-muted);
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
@media (min-width: 768px) {
  .title-underline {
    width: 120px;
  }
}
.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.7;
}
.scroll-indicator .mouse {
  width: 24px;
  height: 40px;
  border: 2px solid var(--color-text-muted);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.scroll-indicator .wheel {
  width: 4px;
  height: 8px;
  background: var(--color-gold);
  border-radius: 2px;
  animation: scrollMouse 1.5s infinite;
}
.scroll-indicator .arrow-down {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
  animation: scrollArrow 1.5s infinite;
}
@keyframes scrollMouse {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(10px);
    opacity: 0;
  }
}
@keyframes scrollArrow {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
.overview-section .relative-z {
  position: relative;
  z-index: 2;
}
.text-left-divider {
  margin-left: 0 !important;
}
.metric-number {
  display: block;
  font-family: var(--font-headings);
  font-size: clamp(1.4rem, 1vw + 0.8rem, 2.4rem);
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: 4px;
}
.metric-label {
  font-size: clamp(0.65rem, 0.25vw + 0.4rem, 0.88rem);
  text-transform: uppercase;
  letter-spacing: clamp(1px, 0.1vw, 2px);
  color: var(--color-text-muted);
  line-height: 1.3;
}
.gold-border {
  border: var(--border-gold);
  padding: 10px;
  background: rgba(197, 160, 89, 0.03);
}
.residence-card {
  background: linear-gradient(180deg, #111a15 0%, #0c120f 100%);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-luxury);
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
}
.gold-border-hover {
  border: 1px solid rgba(197, 160, 89, 0.16);
}
.gold-border-hover:hover {
  border-color: rgba(197, 160, 89, 0.45);
  box-shadow: var(--shadow-gold), var(--shadow-luxury);
  transform: translateY(-4px);
}
.residence-img-holder {
  height: clamp(220px, 18vw, 380px);
  overflow: hidden;
  position: relative;
}
.residence-img-holder::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(
    to top,
    rgba(12, 18, 15, 0.55) 0%,
    transparent 100%
  );
  pointer-events: none;
}
.residence-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.residence-card:hover .residence-img {
  transform: scale(1.05);
}
.residence-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  background: var(--color-gold-gradient);
  color: var(--color-bg-darker);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  padding: 6px 14px;
  border-radius: var(--border-radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  z-index: 2;
}
.residence-details {
  padding: 24px 28px 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.residence-details h3 {
  font-size: 1.35rem;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  color: var(--color-text-light);
}
.residence-desc {
  margin-bottom: 18px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(220, 226, 222, 0.75);
}
.residence-specs {
  list-style: none;
  margin-bottom: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.residence-specs li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  margin-bottom: 0;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--color-text-body);
  gap: 8px;
}
.residence-specs li:last-child {
  border-bottom: none;
}
.residence-specs li strong {
  color: var(--color-gold-light);
  font-weight: 500;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.residence-specs li span {
  color: #f2f5f3;
  font-weight: 500;
}
.amenities-section {
  position: relative;
  background-color: #060a08;
  overflow: hidden;
  /* top padding never smaller than the fixed navbar, so the title isn't hidden
     when you arrive from the "Amenities" menu link */
  padding: max(calc(var(--nav-h) + 16px), clamp(40px, 4vw, 90px)) 0 clamp(50px, 5vw, 120px);
}
.amenities-section .relative-z {
  position: relative;
  z-index: 10;
}
.amenities-section .section-header {
  margin-bottom: 22px;
}
.amenities-sparkles-banner {
  position: relative;
  width: 100%;
  max-width: clamp(480px, 38vw, 780px);
  height: 40px;
  margin: 10px auto 16px;
  overflow: hidden;
  pointer-events: none;
}
.amenities-sparkles-banner .sparkles-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.sparkles-line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.line-main-blur {
  width: 80%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #c5a059 50%,
    transparent 100%
  );
  filter: blur(4px);
  opacity: 0.85;
}
.line-main {
  width: 80%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #e0c07e 50%,
    transparent 100%
  );
  opacity: 0.95;
}
.line-sub-blur {
  width: 40%;
  height: 4px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #ffffff 50%,
    transparent 100%
  );
  filter: blur(5px);
  opacity: 0.7;
}
.line-sub {
  width: 40%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #ffffff 50%,
    transparent 100%
  );
  opacity: 0.95;
}
.sparkles-radial-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at top, transparent 20%, #060a08 88%);
  pointer-events: none;
}
.sparkles-side-flank {
  position: absolute;
  top: 60px;
  bottom: 60px;
  width: 120px;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.sparkles-left {
  left: 0;
}
.sparkles-right {
  right: 0;
}
.sparkles-side-flank .sparkles-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.sparkles-side-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(197, 160, 89, 0.4) 30%,
    rgba(224, 192, 126, 0.6) 50%,
    rgba(197, 160, 89, 0.4) 70%,
    transparent 100%
  );
}
.sparkles-left .sparkles-side-line {
  right: 0;
}
.sparkles-right .sparkles-side-line {
  left: 0;
}
@media (max-width: 1280px) {
  .sparkles-side-flank {
    display: none;
  }
}
.amenity-card {
  background: rgb(18, 28, 24);
  border: 1px solid rgba(197, 160, 89, 0.35);
  border-radius: var(--border-radius-lg);
  transition:
    transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
    border-color 0.35s ease;
  text-align: left;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Uniform grid (Sep 2026): card height is no longer fixed. Every photo gets the same
     16:9 frame and the caption area stretches, so photos, titles and card edges all
     line up across each row no matter how many badges a card has. */
  height: 100%;
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.65),
    0 0 25px rgba(197, 160, 89, 0.1);
  will-change: transform;
  cursor: pointer;
}
.lookbook-img-gradient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.02) 0%,
    rgba(0, 0, 0, 0.15) 55%,
    rgba(10, 18, 14, 0.85) 100%
  );
  z-index: 1;
}
.amenity-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  transition: var(--transition-smooth);
  z-index: 10;
}
.amenity-card:hover {
  border-color: rgba(197, 160, 89, 0.35);
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6);
  z-index: 5;
}
.amenity-card:hover::before {
  background: var(--color-gold-gradient);
}
.amenity-img-holder {
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  background-color: rgba(12, 18, 15, 0.85);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(197, 160, 89, 0.12) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: imageSkeletonShimmer 1.6s ease-in-out infinite;
}
.residence-img-holder,
.gallery-item {
  background-color: rgba(12, 18, 15, 0.85);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(197, 160, 89, 0.12) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: imageSkeletonShimmer 1.6s ease-in-out infinite;
}
.amenity-img-holder.loaded-container,
.residence-img-holder.loaded-container,
.gallery-item.loaded-container {
  animation: none;
  background-image: none;
  background-color: transparent;
}
@keyframes imageSkeletonShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.amenity-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  filter: blur(6px);
  will-change: opacity, transform, filter;
  transition:
    opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.residence-img,
.gallery-img,
.interactive-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  filter: blur(6px);
  will-change: opacity, transform, filter;
  transition:
    opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.amenity-img.loaded {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}
.residence-img.loaded,
.gallery-img.loaded,
.interactive-img.loaded {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}
.amenity-card:hover .amenity-img.loaded {
  transform: scale(1.07);
}
.amenity-content {
  padding: clamp(12px, 0.9vw, 20px) clamp(14px, 1vw, 22px) clamp(14px, 1.05vw, 22px);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  background: rgba(10, 15, 12, 0.96);
  border-top: 1px solid rgba(197, 160, 89, 0.15);
}
.amenity-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.amenity-header-row h4 {
  font-family: var(--font-heading, "Cinzel", serif);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-gold-light);
  letter-spacing: 0.3px;
  line-height: 1.25;
  text-wrap: balance;   /* a title that needs two lines breaks into two even lines */
}
.lookbook-explore-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-gold, #c5a059);
  background: rgba(197, 160, 89, 0.08);
  border: 1px solid rgba(197, 160, 89, 0.3);
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.amenity-card:hover .lookbook-explore-btn {
  background: rgba(197, 160, 89, 0.22);
  border-color: var(--color-gold, #c5a059);
  color: #fff;
}
.amenity-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}
.amenity-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(197, 160, 89, 0.08);
  border: 1px solid rgba(197, 160, 89, 0.24);
  color: #e5c98d;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.2px;
  line-height: 1.25;
  transition: all 0.2s ease;
}
.amenity-card:hover .amenity-badge {
  background: rgba(197, 160, 89, 0.16);
  border-color: rgba(197, 160, 89, 0.45);
  color: #ffffff;
}
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* 12 photos (Oct 2026): rows are wide+narrow, narrow+wide, the courtyard/lawn/garden trio,
     the terrace aerial (wide) + lobby, then the living room/bedroom/kitchen trio */
  .gallery-item:nth-child(1),
  .gallery-item:nth-child(4),
  .gallery-item:nth-child(8) {
    grid-column: span 2;
  }
}
@media (min-width: 640px) and (max-width: 899px) {
  /* two columns: an odd last photo takes the full row instead of leaving a hole */
  .gallery-item:last-child:nth-child(odd) {
    grid-column: span 2;
  }
}
.gallery-item {
  position: relative;
  height: clamp(200px, 16vw, 340px);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-luxury);
  cursor: pointer;
  border: var(--border-glass);
}
.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(6, 10, 8, 0.9) 0%,
    rgba(6, 10, 8, 0.3) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  display: flex;
  align-items: flex-end;
  padding: 25px;
  opacity: 0.85;
  transition: var(--transition-smooth);
}
.gallery-overlay span {
  font-family: var(--font-headings);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--color-text-light);
  border-left: 2px solid var(--color-gold);
  padding-left: 15px;
  transition: var(--transition-smooth);
}
.gallery-item:hover .gallery-img {
  transform: scale(1.06);
}
.gallery-item:hover .gallery-overlay {
  background: linear-gradient(
    to top,
    rgba(10, 61, 52, 0.9) 0%,
    rgba(6, 10, 8, 0.2) 60%,
    rgba(0, 0, 0, 0) 100%
  );
  opacity: 1;
}
.gallery-item:hover .gallery-overlay span {
  color: var(--color-gold-light);
  padding-left: 20px;
}
/* Walkthrough section (the still behind the player is set in the 7C block further down) */
#walkthrough {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  z-index: 1;
}
#walkthrough::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(12, 18, 15, 0.4);
  z-index: -1;
  border-radius: 0;
  animation: none;
}
/* Liquid-glass player (Sep 2026): restored the original translucent glass (it had been
   replaced by an opaque rgba(25,25,25,.95) slab). Size now scales with the screen and
   always fits inside one viewport together with the section heading. */
.video-container-wrapper {
  max-width: none;
  width: min(100%, 58vw, calc((100vh - 18rem) * 1.7778));
  min-width: min(100%, 640px);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  padding: 0;
  position: relative;
  border-radius: clamp(16px, 1.1vw, 28px);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 30px 60px -12px rgba(0, 0, 0, 0.55),
    inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.6),
    inset 0 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 0 40px rgba(255, 255, 255, 0.05);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 38%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.04) 100%),
    rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(clamp(3px, 0.24vw, 7px)) saturate(160%) brightness(105%);
  -webkit-backdrop-filter: blur(clamp(3px, 0.24vw, 7px)) saturate(160%) brightness(105%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-top: 1.5px solid rgba(255, 255, 255, 0.55);
  transition: var(--transition-smooth);
}
.video-container-wrapper.playing {
  background: #000;
}
.video-container-wrapper:hover {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.75);
  box-shadow:
    0 35px 70px -12px rgba(0, 0, 0, 0.65),
    inset 0 2px 3px 0 rgba(255, 255, 255, 0.8),
    inset 0 0 2px 1px rgba(255, 255, 255, 0.35);
}
.liquid-edge-refraction {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  padding: 1.5px;
  background: conic-gradient(
    from var(--refract-angle, 60deg) at 50% 50%,
    rgba(255, 255, 255, 0.95) 0deg,
    rgba(175, 220, 255, 0.75) 45deg,
    rgba(255, 255, 255, 0.15) 120deg,
    rgba(255, 225, 170, 0.65) 190deg,
    rgba(255, 255, 255, 0.2) 260deg,
    rgba(175, 220, 255, 0.75) 315deg,
    rgba(255, 255, 255, 0.95) 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, 0.22),
    inset 0 0 4px rgba(175, 220, 255, 0.35);
  transition: opacity 0.5s ease;
}
.liquid-glass-glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    var(--glare-angle, 125deg),
    rgba(255, 255, 255, 0.24) 0%,
    rgba(255, 255, 255, 0.02) 35%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.5s ease;
  mix-blend-mode: overlay;
}
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.video-overlay:hover {
  background: rgba(255, 255, 255, 0.03);
}
.play-btn-circle {
  --pb: clamp(72px, calc(3.4vw + 36px), 140px);
  width: var(--pb);
  height: var(--pb);
  background: var(--color-gold-gradient);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  box-shadow: 0 0 30px rgba(197, 160, 89, 0.4);
  transition: var(--transition-smooth);
}
.video-overlay:hover .play-btn-circle {
  transform: scale(1.1);
  box-shadow: 0 0 40px rgba(197, 160, 89, 0.6);
}
.play-triangle {
  width: 0;
  height: 0;
  border-top: calc(var(--pb, 80px) * 0.15) solid transparent;
  border-bottom: calc(var(--pb, 80px) * 0.15) solid transparent;
  border-left: calc(var(--pb, 80px) * 0.25) solid var(--color-bg-darker);
  margin-left: calc(var(--pb, 80px) * 0.075);
}
.video-overlay-text {
  font-family: var(--font-headings);
  font-size: 0.9rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-light);
}
.walkthrough-video-player {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  border-radius: var(--border-radius-md);
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 5;
}
.video-container-wrapper.playing .walkthrough-video-player {
  opacity: 1;
  pointer-events: auto;
}
.video-container-wrapper.playing .video-overlay,
.video-container-wrapper.playing .liquid-glass-glare,
.video-container-wrapper.playing .liquid-edge-refraction {
  opacity: 0;
  pointer-events: none;
}
.inquiry-form h3 {
  font-size: 1.25rem;
  margin-bottom: 6px;
  color: var(--color-text-light);
}
.form-group {
  position: relative;
  margin-bottom: 18px;
}
.input-with-icon {
  position: relative;
}
.input-with-icon .input-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  pointer-events: none;
  z-index: 2;
}
.input-with-icon input {
  padding-left: 42px !important;
}
.form-group.input-with-icon label {
  left: 42px;
}
.form-group.input-with-icon input:focus ~ label,
.form-group.input-with-icon input:not(:placeholder-shown) ~ label {
  top: -9px;
  left: 12px;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 14px;
  background: rgba(6, 10, 8, 0.85);
  border: 1px solid rgba(197, 160, 89, 0.28);
  border-radius: var(--border-radius-sm);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  outline: none;
  transition: var(--transition-smooth);
}
.form-group textarea {
  resize: none;
  min-height: 72px;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--color-gold);
  background: rgba(8, 14, 11, 0.95);
  box-shadow: 0 0 10px rgba(197, 160, 89, 0.2);
}
.form-group label {
  position: absolute;
  top: 12px;
  left: 14px;
  color: var(--color-text-muted);
  font-size: 0.86rem;
  font-weight: 400;
  pointer-events: none;
  transition: var(--transition-smooth);
}
.form-group input:focus ~ label,
.form-group input:not(:placeholder-shown) ~ label,
.form-group textarea:focus ~ label,
.form-group textarea:not(:placeholder-shown) ~ label {
  top: -9px;
  left: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-gold-light);
  background: #0f1a15;
  padding: 0 6px;
  letter-spacing: 0.5px;
  border-radius: 2px;
}
/* Front-facing 3 BHK / 4 BHK configuration pills */
.config-form-group {
  margin-bottom: 20px;
}
.form-group .form-label-static {
  position: static !important;
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: 10px;
  pointer-events: auto;
}
.form-label-static .req {
  color: #e74c3c;
}
.config-pills-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.config-pills-selector .config-pill:nth-child(3) {
  grid-column: span 2;
}
.config-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: rgba(10, 16, 13, 0.85);
  border: 1px solid rgba(197, 160, 89, 0.28);
  border-radius: var(--border-radius-sm);
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
  transition: all 0.22s ease;
  outline: none;
}
.config-pill:hover {
  border-color: rgba(197, 160, 89, 0.6);
  background: rgba(197, 160, 89, 0.08);
}
.config-pill.active {
  background: linear-gradient(
    90deg,
    rgba(197, 160, 89, 0.22) 0%,
    rgba(26, 92, 79, 0.28) 100%
  );
  border: 1.5px solid var(--color-gold);
  box-shadow: 0 2px 12px rgba(197, 160, 89, 0.25);
}
.pill-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(197, 160, 89, 0.35);
  color: transparent;
  font-size: 0.72rem;
  font-weight: 700;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.config-pill.active .pill-check {
  background: var(--color-gold);
  border-color: var(--color-gold-light);
  color: #060a08;
}
.pill-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pill-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff;
}
.config-pill.active .pill-title {
  color: var(--color-gold-light);
}
.pill-sub {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}
.config-pill.active .pill-sub {
  color: rgba(255, 255, 255, 0.85);
}
.btn-submit-request {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  cursor: pointer;
}
.btn-submit-request .btn-arrow {
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}
.btn-submit-request:hover .btn-arrow {
  transform: translateX(4px);
}
.form-feedback {
  margin-top: 15px;
  font-size: 0.85rem;
  text-align: center;
  min-height: 20px;
  opacity: 0;
  transition: var(--transition-smooth);
}
.form-feedback.success {
  color: #55b986;
  opacity: 1;
}
.form-feedback.error {
  color: #e06c75;
  opacity: 1;
}
.footer {
  background: var(--color-bg-darker);
  border-top: var(--border-glass);
  /* the bottom is tall enough for the disclaimer to end above the Ask EVA button (Oct 2026) */
  padding: clamp(48px, 4.5vw, 100px) 0 112px;
  font-size: 0.88rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 48px;
}
@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 2fr;
  }
}
.footer-brand .brand-logo {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.footer-desc {
  max-width: clamp(280px, 22vw, 440px);
  font-size: 0.85rem;
}
.footer-links-col h4,
.footer-brand h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-light);
  margin-bottom: 25px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.footer-links-col a {
  display: block;
  color: var(--color-text-muted);
  font-weight: 300;
  margin-bottom: 12px;
  font-size: 0.85rem;
}
.footer-links-col a:hover {
  color: var(--color-gold-light);
  transform: translateX(3px);
}
.footer-links-col .dev-name {
  font-weight: 500;
  color: var(--color-gold);
  margin-bottom: 5px;
}
.footer-links-col .dev-lic {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-align: center;
}
.footer-bottom p {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}
.footer-bottom .disclaimer {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.2);
  text-align: justify;
  line-height: 1.5;
}
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(6, 10, 8, 0.98);
  z-index: 2000;
  display: none;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.lightbox.open {
  display: flex;
  opacity: 1;
}
.lightbox-close {
  position: absolute;
  top: 30px;
  right: 40px;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 3rem;
  font-weight: 300;
  cursor: pointer;
  transition: var(--transition-smooth);
  z-index: 2010;
}
.lightbox-close:hover {
  color: #fff;
  transform: rotate(90deg);
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--color-text-muted);
  font-size: 1.8rem;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: var(--transition-smooth);
  z-index: 2010;
}
.lightbox-nav:hover {
  background: var(--color-gold-gradient);
  color: var(--color-bg-darker);
  border-color: transparent;
}
.lightbox-nav.prev {
  left: 40px;
}
.lightbox-nav.next {
  right: 40px;
}
.lightbox-content {
  max-width: clamp(860px, 50vw, 1200px);
  width: 90%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow-y: auto;
}
.lightbox-img {
  max-width: 100%;
  max-height: 52vh;
  object-fit: contain;
  border-radius: var(--border-radius-md);
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8);
  border: var(--border-gold);
}
.lightbox-img-loaded {
  animation: fadeInImg 0.4s ease;
}
@keyframes fadeInImg {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
.lightbox-caption {
  width: 100%;
  max-width: 720px;
  margin-top: 14px;
  text-align: center;
  padding: 0 16px 14px;
}
.lightbox-kicker-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.lightbox-kicker-icon {
  display: inline-flex;
  color: var(--color-gold);
}
.lightbox-kicker-icon .line-ico {
  width: 0.95rem;
  height: 0.95rem;
}
.lightbox-kicker-text {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-gold);
}
.lightbox-caption h4 {
  font-size: 1.35rem;
  font-family: var(--font-heading);
  color: var(--color-gold-light);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.lightbox-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 14px;
}
.lightbox-badges .amenity-badge {
  background: rgba(197, 160, 89, 0.12);
  border: 1px solid rgba(197, 160, 89, 0.35);
  color: #f7edd6;
  font-size: 0.76rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}
.lightbox-caption p {
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: 0;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .lightbox-nav {
    width: 45px;
    height: 45px;
    font-size: 1.2rem;
  }
  .lightbox-nav.prev {
    left: 15px;
  }
  .lightbox-nav.next {
    right: 15px;
  }
  .lightbox-close {
    top: 15px;
    right: 20px;
    font-size: 2.2rem;
  }
  .lightbox-content {
    max-width: 90%;
  }
}
.explorer-tabs-container {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
  width: 100%;
}
.explorer-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 5px;
  gap: 4px;
  max-width: 100%;
}
.explorer-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 7px;
  cursor: pointer;
  transition: var(--transition-smooth);
  white-space: nowrap;
  line-height: 1.3;
  text-align: center;
}
.explorer-tab-btn:hover {
  color: var(--color-gold-light);
  background: rgba(197, 160, 89, 0.07);
  border-color: rgba(197, 160, 89, 0.2);
}
.explorer-tab-btn.active {
  background: var(--color-gold-gradient);
  color: var(--color-bg-darker);
  font-weight: 700;
  box-shadow: 0 3px 14px rgba(197, 160, 89, 0.22);
  border-color: transparent;
}
.explorer-content-card {
  background: var(--color-bg-card);
  border-radius: var(--border-radius-lg);
  padding: clamp(24px, 2.5vw, 48px) clamp(28px, 2.8vw, 56px);
  min-height: clamp(350px, 28vw, 550px);
  position: relative;
}
@keyframes fadeInPane {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.flat-selector-layout {
  display: grid;
  grid-template-columns: 1.2fr 1.6fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 860px) {
  .flat-selector-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
.sizing-instruction-text {
  font-size: 0.9rem;
  color: var(--color-text-body);
  margin-bottom: 20px;
  line-height: 1.5;
  text-align: center;
}
.selector-controls {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.selector-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.selector-group label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-gold-light);
  font-weight: 700;
}
.btn-group-toggle {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.selector-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.82rem;
  padding: 9px 16px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: var(--transition-smooth);
  line-height: 1.3;
}
.selector-btn:hover {
  border-color: rgba(197, 160, 89, 0.45);
  color: var(--color-gold-light);
  background: rgba(197, 160, 89, 0.04);
}
.selector-btn.active {
  background: rgba(197, 160, 89, 0.14);
  border-color: var(--color-gold);
  color: var(--color-gold-light);
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(197, 160, 89, 0.1);
}
.btn-grid-toggle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.flat-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--border-radius-sm);
  text-align: center;
  cursor: pointer;
  transition: var(--transition-smooth);
  min-height: 36px;
  line-height: 1.3;
}
.flat-btn:hover {
  border-color: rgba(197, 160, 89, 0.4);
  color: var(--color-gold-light);
  background: rgba(197, 160, 89, 0.04);
}
.flat-btn.active {
  background: var(--color-gold-gradient);
  color: var(--color-bg-darker);
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(197, 160, 89, 0.18);
}
.flat-details-display {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}
.specs-table-container {
  margin-bottom: 15px;
  width: 100%;
  min-height: 140px;
}
.specs-styled-table tr:last-child td {
  border-bottom: none;
}
.isometric-image-container {
  width: 100%;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}
.isometric-img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.6));
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.isometric-img:hover {
  transform: scale(1.02);
}
.past-project-card {
  background: rgba(197, 160, 89, 0.04);
  border: 1px dashed rgba(197, 160, 89, 0.3);
  border-radius: var(--border-radius-md);
  padding: 24px 28px;
  margin-top: 28px;
  position: relative;
}
.past-proj-badge {
  display: inline-block;
  background: var(--color-gold-gradient);
  color: var(--color-bg-darker);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 10px;
  margin-bottom: 12px;
}
.past-proj-bullets {
  list-style: none;
  padding-left: 0;
  margin-top: 12px;
  margin-bottom: 0;
}
.past-proj-bullets li {
  font-size: 0.86rem;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  position: relative;
  padding: 0.3em 0 0.3em 2.5em;
  min-height: 1.9em;
}
@media (max-width: 992px) {
  .flat-selector-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
@media (max-width: 768px) {
  .explorer-content-card {
    padding: 24px 16px;
  }
  .section-title {
    font-size: 1.9rem;
  }
}
@media (max-width: 576px) {
  .explorer-tabs {
    flex-direction: column;
    border-radius: 9px;
    align-items: stretch;
  }
  .explorer-tab-btn {
    padding: 10px 14px;
    font-size: 0.8rem;
    text-align: left;
    border-radius: 6px;
  }
  .explorer-tab-btn.active {
    text-align: center;
  }
}
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.fade-in-up.appear {
  opacity: 1;
  transform: translateY(0);
}
.amenity-card.fade-in-up.appear:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(197, 160, 89, 0.35) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6) !important;
  z-index: 5;
}
.chatbot-widget {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 1500;
  font-family: var(--font-body);
}
.chatbot-toggle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a5c4f 0%, #0a3d34 60%, #c5a059 100%);
  border: 1.5px solid rgba(197, 160, 89, 0.45);
  cursor: pointer;
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.5),
    0 0 0 0 rgba(197, 160, 89, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease;
}
.chatbot-toggle:hover {
  transform: scale(1.1);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.6),
    0 0 0 8px rgba(197, 160, 89, 0.1);
}
.chat-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(197, 160, 89, 0.6);
  animation: chatPulseRing 2.2s ease-out infinite;
  pointer-events: none;
}
.chatbot-box {
  position: absolute;
  bottom: 80px;
  right: 0;
  width: clamp(360px, 22vw, 460px);
  height: clamp(500px, 38vw, 640px);
  background: rgba(9, 15, 12, 0.96);
  border: 1px solid rgba(197, 160, 89, 0.2);
  border-radius: 20px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px) scale(0.94);
  pointer-events: none;
  transition:
    opacity 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
    transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1);
  z-index: 10;
}
.chatbot-box.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.chat-header {
  background: linear-gradient(
    135deg,
    rgba(10, 61, 52, 0.85) 0%,
    rgba(9, 15, 12, 0.95) 100%
  );
  border-bottom: 1px solid rgba(197, 160, 89, 0.15);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-gold-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.3);
}
.avatar-status-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  background: #22c55e;
  border: 2px solid rgba(9, 15, 12, 0.96);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}
.chat-header-text h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1px;
  letter-spacing: 0.2px;
}
.chat-status {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  gap: 5px;
}
.mode-toggle-pill {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  padding: 3px;
  gap: 2px;
}
.mode-pill-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 20px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.mode-pill-btn svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}
.mode-pill-btn.active {
  background: var(--color-gold-gradient);
  color: #000;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(197, 160, 89, 0.35);
}
.mode-pill-btn:not(.active):hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.07);
}
.chat-close-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.chat-close-btn svg {
  width: 18px;
  height: 18px;
  fill: rgba(255, 255, 255, 0.35);
  transition: fill 0.2s;
}
.chat-close-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.chat-close-btn:hover svg {
  fill: #fff;
}
.chat-mode-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
.chat-mode-panel.active {
  display: flex;
}
.chat-messages {
  flex: 1;
  padding: 18px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar {
  width: 3px;
}
.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(197, 160, 89, 0.25);
  border-radius: 3px;
}
.chat-bubble {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  animation: bubbleIn 0.3s ease;
}
@keyframes bubbleIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.chat-bubble.bot {
  align-self: flex-start;
  flex-direction: row;
}
.chat-bubble.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.bubble-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-gold-gradient);
  flex-shrink: 0;
  margin-bottom: 2px;
  box-shadow: 0 2px 8px rgba(197, 160, 89, 0.3);
}
.bubble-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 78%;
}
.bubble-sender {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-gold-light);
  letter-spacing: 0.3px;
  margin-bottom: 2px;
  display: block;
}
.chat-bubble.user .bubble-sender {
  text-align: right;
  color: rgba(255, 255, 255, 0.5);
}
.bubble-content p,
.bubble-content > span:not(.bubble-sender):not(.bubble-time) {
  background: rgba(20, 35, 28, 0.9);
  border: 1px solid rgba(197, 160, 89, 0.12);
  border-radius: 14px 14px 14px 2px;
  padding: 10px 14px;
  font-size: 0.87rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}
.chat-bubble.user .bubble-content p,
.chat-bubble.user .bubble-content > span:not(.bubble-sender):not(.bubble-time) {
  background: linear-gradient(
    135deg,
    rgba(10, 61, 52, 0.95) 0%,
    rgba(5, 35, 28, 0.95) 100%
  );
  border: 1px solid rgba(10, 80, 65, 0.5);
  border-radius: 14px 14px 2px 14px;
  color: #fff;
}
.chat-bubble.bot:not(:has(.bubble-content)) {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}
.bubble-time {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 2px;
  display: block;
  padding: 0 2px;
}
.typing-indicator {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  align-self: flex-start;
  animation: bubbleIn 0.3s ease;
}
.typing-dots {
  background: rgba(20, 35, 28, 0.9);
  border: 1px solid rgba(197, 160, 89, 0.12);
  border-radius: 14px 14px 14px 2px;
  padding: 12px 16px;
  display: flex;
  gap: 5px;
  align-items: center;
}
.typing-dots span {
  width: 7px;
  height: 7px;
  background: rgba(197, 160, 89, 0.6);
  border-radius: 50%;
  animation: typingBounce 1.2s infinite;
}
.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes typingBounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  40% {
    transform: translateY(-6px);
    opacity: 1;
  }
}
.chat-suggested-chips {
  padding: 10px 14px;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}
.chat-suggested-chips::-webkit-scrollbar {
  height: 0;
}
.chat-chip {
  background: rgba(197, 160, 89, 0.06);
  border: 1px solid rgba(197, 160, 89, 0.2);
  color: var(--color-gold-light);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.73rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.chat-chip:hover {
  background: var(--color-gold-gradient);
  color: #000;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(197, 160, 89, 0.3);
}
.chat-input-area {
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.chat-input-area input {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 25px;
  padding: 10px 18px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.88rem;
  outline: none;
  transition: all 0.25s ease;
}
.chat-input-area input:focus {
  border-color: rgba(197, 160, 89, 0.5);
  background: rgba(255, 255, 255, 0.07);
}
.chat-input-area input::placeholder {
  color: rgba(255, 255, 255, 0.28);
}
.chat-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-gold-gradient);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(197, 160, 89, 0.3);
}
.chat-send-btn svg {
  width: 18px;
  height: 18px;
  fill: #000;
  margin-left: 2px;
}
.chat-send-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(197, 160, 89, 0.5);
}
.chat-send-btn:active {
  transform: scale(0.95);
}
.voice-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 20px;
  overflow-y: auto;
}
.voice-orb-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
  flex-shrink: 0;
}
.voice-orb-rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.vor {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(197, 160, 89, 0.25);
  inset: 0;
  animation: orbRing 3s ease-in-out infinite;
  opacity: 0;
}
.vor1 {
  animation-delay: 0s;
}
.vor2 {
  animation-delay: 1s;
}
.vor3 {
  animation-delay: 2s;
}
@keyframes orbRing {
  0% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}
.voice-orb-container.listening .vor {
  border-color: rgba(34, 197, 94, 0.4);
  animation-duration: 1.2s;
}
.voice-orb-container.speaking .vor {
  border-color: rgba(197, 160, 89, 0.5);
  animation-duration: 0.8s;
}
.voice-orb-btn {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, #12574c 0%, #0a3d34 60%, #c5a059 100%);
  border: 2px solid rgba(197, 160, 89, 0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 0 0 rgba(197, 160, 89, 0.3);
}
.voice-orb-btn svg {
  width: 34px;
  height: 34px;
  fill: #fff;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
}
.voice-orb-btn:hover {
  transform: scale(1.07);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.6),
    0 0 0 10px rgba(197, 160, 89, 0.1);
}
.voice-orb-btn.listening {
  background: linear-gradient(135deg, #166534 0%, #15803d 100%);
  border-color: rgba(34, 197, 94, 0.5);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(34, 197, 94, 0.3);
  animation: orbPulse 1.5s ease-in-out infinite;
}
.voice-orb-btn.speaking {
  background: linear-gradient(135deg, #7c3d0e 0%, #c5a059 100%);
  border-color: rgba(197, 160, 89, 0.6);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(197, 160, 89, 0.4);
}
@keyframes orbPulse {
  0%,
  100% {
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.5),
      0 0 20px rgba(34, 197, 94, 0.3);
  }
  50% {
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.5),
      0 0 35px rgba(34, 197, 94, 0.5);
  }
}
.voice-waveform {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
}
.voice-waveform span {
  display: block;
  width: 4px;
  border-radius: 3px;
  background: rgba(197, 160, 89, 0.3);
  height: 8px;
  transition: height 0.1s ease;
}
.voice-waveform.active span {
  background: var(--color-gold);
  animation: waveBar 0.8s ease-in-out infinite alternate;
}
.voice-waveform.active span:nth-child(1) {
  animation-delay: 0s;
}
.voice-waveform.active span:nth-child(2) {
  animation-delay: 0.1s;
}
.voice-waveform.active span:nth-child(3) {
  animation-delay: 0.2s;
}
.voice-waveform.active span:nth-child(4) {
  animation-delay: 0.15s;
}
.voice-waveform.active span:nth-child(5) {
  animation-delay: 0.05s;
}
.voice-waveform.active span:nth-child(6) {
  animation-delay: 0.25s;
}
.voice-waveform.active span:nth-child(7) {
  animation-delay: 0.1s;
}
.voice-waveform.active span:nth-child(8) {
  animation-delay: 0.2s;
}
@keyframes waveBar {
  from {
    height: 6px;
    opacity: 0.5;
  }
  to {
    height: 28px;
    opacity: 1;
  }
}
.voice-hint-text {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  margin: 0;
  letter-spacing: 0.3px;
  transition: color 0.3s;
}
.voice-hint-text.listening {
  color: #22c55e;
}
.voice-hint-text.speaking {
  color: var(--color-gold-light);
}
.voice-transcript {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  font-style: italic;
  min-height: 20px;
  padding: 0 12px;
  transition: opacity 0.3s;
}
.voice-reply-card {
  background: rgba(10, 61, 52, 0.3);
  border: 1px solid rgba(197, 160, 89, 0.2);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
  display: none;
  animation: bubbleIn 0.3s ease;
}
.voice-reply-card.visible {
  display: block;
}
.voice-reply-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.voice-reply-text {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}
.voice-footer {
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.voice-interrupt-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.3);
  color: #f87171;
  padding: 9px 22px;
  border-radius: 25px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.2px;
}
.voice-interrupt-btn svg {
  width: 14px;
  height: 14px;
  fill: #f87171;
}
.voice-interrupt-btn:hover {
  background: rgba(220, 38, 38, 0.25);
  border-color: rgba(220, 38, 38, 0.5);
  box-shadow: 0 0 16px rgba(220, 38, 38, 0.2);
}
.voice-interrupt-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
@media (max-width: 480px) {
  .chatbot-box {
    width: calc(100vw - 40px);
    right: -10px;
    height: calc(100vh - 120px);
    max-height: 580px;
  }
}
/* ==========================================================================
   SOPHISTICATED ANIMATION SYSTEM — Estate Sky Vue
   ========================================================================== */
.anim-fade-up,
.anim-slide-right,
.anim-slide-left,
.anim-pop {
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-duration: 0.9s;
  transition-delay: var(--anim-delay, 0s);
}
.anim-fade-up {
  transform: translateY(48px);
}
.anim-slide-right {
  transform: translateX(-60px);
}
.anim-slide-left {
  transform: translateX(60px);
}
.anim-pop {
  transform: scale(0.88) translateY(20px);
}
.anim-fade-up.in-view,
.anim-slide-right.in-view,
.anim-slide-left.in-view,
.anim-pop.in-view {
  opacity: 1;
  transform: none;
}
.title-reveal {
  position: relative;
  overflow: hidden;
}
.divider-animate {
  transform-origin: center;
  transform: scaleX(0);
  transition: transform 0.8s 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.divider-animate.in-view {
  transform: scaleX(1);
  animation: dividerPulse 3s 1.2s ease-in-out infinite;
}
@keyframes dividerPulse {
  0% {
    box-shadow: none;
  }
  50% {
    box-shadow:
      0 0 12px rgba(197, 160, 89, 0.55),
      0 0 22px rgba(197, 160, 89, 0.2);
  }
  100% {
    box-shadow: none;
  }
}
.metric-number.counting {
  animation: countBounce 0.18s ease-in-out;
}
@keyframes countBounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
    color: var(--color-gold-light);
  }
  100% {
    transform: scale(1);
  }
}
.btn-primary,
.btn-outline {
  position: relative;
  overflow: hidden;
}
.btn-primary::before,
.btn-outline::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition:
    width 0.5s ease,
    height 0.5s ease,
    opacity 0.5s ease;
  opacity: 0;
  pointer-events: none;
}
.btn-primary:hover::before,
.btn-outline:hover::before {
  width: 260px;
  height: 260px;
  opacity: 1;
}
.amenity-card:nth-child(1) {
  --anim-delay: 0s;
}
.amenity-card:nth-child(2) {
  --anim-delay: 0.06s;
}
.amenity-card:nth-child(3) {
  --anim-delay: 0.12s;
}
.amenity-card:nth-child(4) {
  --anim-delay: 0.18s;
}
.amenity-card:nth-child(5) {
  --anim-delay: 0.24s;
}
.amenity-card:nth-child(6) {
  --anim-delay: 0.3s;
}
.amenity-card:nth-child(7) {
  --anim-delay: 0.06s;
}
.amenity-card:nth-child(8) {
  --anim-delay: 0.12s;
}
.amenity-card:nth-child(9) {
  --anim-delay: 0.18s;
}
.amenity-card:nth-child(10) {
  --anim-delay: 0.24s;
}
.amenity-card:nth-child(11) {
  --anim-delay: 0.3s;
}
.amenity-card:nth-child(12) {
  --anim-delay: 0.36s;
}
.section::before {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(197, 160, 89, 0.04) 0%,
    transparent 70%
  );
  top: -80px;
  right: -100px;
  pointer-events: none;
  animation: orbFloat 12s ease-in-out infinite;
  z-index: 0;
}
/* nth-of-type keeps the same sections as before the chapter markers were added */
.section:nth-of-type(odd)::before {
  left: -120px;
  right: auto;
  top: auto;
  bottom: -80px;
  animation-delay: -5s;
  animation-duration: 15s;
}
@keyframes orbFloat {
  0% {
    transform: translateY(0) scale(1);
  }
  33% {
    transform: translateY(-22px) scale(1.05);
  }
  66% {
    transform: translateY(14px) scale(0.96);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
.brand-title-holder {
  animation: heroEntrance 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes heroEntrance {
  from {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
.hero-title {
  animation: heroTitleGlow 4s 1.5s ease-in-out infinite;
}
@keyframes heroTitleGlow {
  0% {
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
  }
  50% {
    text-shadow:
      0 4px 20px rgba(0, 0, 0, 0.9),
      0 0 60px rgba(197, 160, 89, 0.2);
  }
  100% {
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
  }
}
.gallery-item {
  --anim-delay: 0s;
}
.gallery-item:nth-child(1) {
  --anim-delay: 0.05s;
}
.gallery-item:nth-child(2) {
  --anim-delay: 0.12s;
}
.gallery-item:nth-child(3) {
  --anim-delay: 0.19s;
}
.gallery-item:nth-child(4) {
  --anim-delay: 0.26s;
}
.gallery-item:nth-child(5) {
  --anim-delay: 0.33s;
}
.gallery-item:nth-child(6) {
  --anim-delay: 0.4s;
}
.nav-link::after {
  transition:
    width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.3s ease;
  opacity: 0;
}
.nav-link:hover::after,
.nav-link.active::after {
  opacity: 1;
}
@keyframes chatPulseRing {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  80% {
    transform: scale(1.9);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.chat-pulse {
  animation: chatPulseRing 2.2s ease-out infinite !important;
}
.scroll-indicator {
  animation: fadeInDown 1s 2s both;
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-16px);
  }
  to {
    opacity: 0.7;
    transform: translateX(-50%) translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.overview-hero-slide {
  padding: 0;
  width: 100%;
  min-height: clamp(900px, 145vh, 1500px);
  background: var(--color-bg-darker);
  position: relative;
  overflow: hidden;
}
.overview-full-wrapper {
  position: relative;
  width: 100%;
  min-height: clamp(900px, 145vh, 1500px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.overview-full-render {
  width: 100%;
  height: 100%;
  min-height: clamp(900px, 145vh, 1500px);
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: contrast(1.05) brightness(1.02);
  transition: transform 1.2s ease;
}
.overview-render-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 10, 16, 0.88) 0%,
    rgba(6, 10, 16, 0.45) 30%,
    rgba(6, 10, 16, 0.1) 60%,
    rgba(6, 10, 16, 0.8) 100%
  );
  pointer-events: none;
}
.overview-overlay-content {
  position: absolute !important;
  top: calc(var(--nav-h) + clamp(16px, 2.5vh, 40px)) !important; /* was 30px: poetic badge hid under the navbar */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 90% !important;
  max-width: clamp(1240px, 72vw, 1800px) !important;
  padding: 0 !important;
  z-index: 10 !important;
}
.overview-floating-hero {
  max-width: clamp(900px, 55vw, 1300px);
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  opacity: 1 !important;
  transform: none !important;
}
#overview .anim-fade-down,
#overview .anim-fade-up,
#overview .anim-pop,
#overview .title-reveal {
  opacity: 1 !important;
  transform: none !important;
}
.slide2-poetic-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(197, 160, 89, 0.15);
  border: 1px solid rgba(197, 160, 89, 0.45);
  padding: 8px 22px;
  border-radius: 30px;
  margin-bottom: 22px;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.5),
    0 0 15px rgba(197, 160, 89, 0.2);
}
.slide2-poetic-badge .poetry-line {
  font-family: var(--font-headings);
  font-size: 0.76rem;
  letter-spacing: 3px;
  color: var(--color-gold-light);
  text-transform: uppercase;
  font-weight: 600;
}
.slide2-poetic-badge .poetry-dot {
  color: var(--color-gold);
  font-size: 0.85rem;
}
.slide2-poetic-heading {
  font-family: var(--font-headings);
  font-size: clamp(2.2rem, 1.8vw + 0.8rem, 4rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  letter-spacing: 1.5px;
  text-shadow:
    0 4px 25px rgba(0, 0, 0, 0.95),
    0 0 35px rgba(197, 160, 89, 0.4);
  margin-bottom: 16px;
}
.overview-floating-hero .lead-text {
  font-size: 1.15rem;
  line-height: 1.85;
  color: #f5f8f6;
  text-shadow:
    0 3px 14px rgba(0, 0, 0, 0.95),
    0 1px 4px rgba(0, 0, 0, 0.9);
  max-width: clamp(700px, 48vw, 1000px);
  border-left: 3px solid var(--color-gold);
  padding-left: 22px;
  margin-top: 22px;
  margin-bottom: 35px;
}
.floating-metrics-bottom-right {
  position: absolute !important;
  bottom: 50px !important;
  right: 5% !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  max-width: 100% !important;
  z-index: 10 !important;
  pointer-events: auto;
}
.floating-metrics-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}
.floating-metric-pill {
  background: rgba(6, 10, 16, 0.85);
  border: 1px solid rgba(197, 160, 89, 0.45);
  padding: 16px 28px;
  border-radius: var(--border-radius-md);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.75),
    0 0 24px rgba(197, 160, 89, 0.2);
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 170px;
  opacity: 1 !important;
  transform: none !important;
}
.floating-metric-pill:hover {
  transform: translateY(-5px) scale(1.02) !important;
  border-color: var(--color-gold-light);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.85),
    0 0 32px rgba(197, 160, 89, 0.4);
}
.floating-metric-pill .metric-number {
  font-family: var(--font-headings);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-gold-light);
  text-shadow: 0 0 18px rgba(197, 160, 89, 0.6);
}
.floating-metric-pill .metric-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #d2e4db;
}
@media (max-width: 900px) {
  .overview-hero-slide,
  .overview-full-wrapper,
  .overview-full-render {
    min-height: auto;
    padding-bottom: 2rem;
  }
  .slide2-poetic-heading {
    font-size: 2.1rem;
  }
  .slide2-poetic-badge {
    flex-wrap: wrap;
    padding: 6px 14px;
    gap: 8px;
  }
  .slide2-poetic-badge .poetry-dot {
    display: none;
  }
  .slide2-poetic-badge .poetry-line {
    font-size: 0.68rem;
  }
  .floating-metrics-bottom-right {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    padding: 0 5% 3rem 5% !important;
    margin-top: 2rem !important;
  }
  .floating-metrics-row {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
  }
  .floating-metric-pill {
    min-width: 130px;
    padding: 12px 18px;
  }
}
/* ==========================================================================
   Hardware Acceleration & Scroll Performance Optimization
   ========================================================================== */
/* Performance: Only promote layers for elements that actively animate.
   Removed blanket will-change from 9 selectors — was creating hundreds of
   unnecessary GPU layers causing memory bloat and scroll jank. */
.tilt-card,
.overview-full-wrapper {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* Promote cards to GPU layer only on hover when they animate */
.amenity-card:hover,
.residence-card:hover,
.gallery-item:hover,
.consultant-card:hover,
.eco-card:hover,
.spec-item-box:hover,
.green-pillar-card:hover {
  will-change: transform;
}
.green-cert-video-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 1;
  filter: none;
}
/* Background blur restored (Sep 2026) — it had been removed in the desktop optimisation
   pass (the mobile stylesheet still had it). The radius scales with the screen so the
   look is the same on a 13" laptop and a 32" monitor; it also hides the 1280px video's
   pixelation and burned-in captions when stretched to 2560px+. */
.green-cert-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(clamp(8px, 0.6vw, 22px)) saturate(115%);
  -webkit-backdrop-filter: blur(clamp(8px, 0.6vw, 22px)) saturate(115%);
  background: linear-gradient(
    180deg,
    rgba(6, 10, 8, 0.82) 0%,
    rgba(6, 10, 8, 0.08) 25%,
    rgba(6, 10, 8, 0.08) 75%,
    rgba(6, 10, 8, 0.88) 100%
  );
  z-index: 3;
  pointer-events: none;
}
.relative-z {
  position: relative;
  z-index: 4;
}
.cert-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(18, 87, 76, 0.95);
  border: 1px solid rgba(224, 192, 126, 0.5);
  border-radius: 30px;
  padding: 8px 20px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--color-gold-light);
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.cert-status-badge .leaf-icon {
  display: inline-flex;
  color: #86efac;
}
.cert-status-badge .leaf-icon .line-ico {
  width: 1.15em;
  height: 1.15em;
}
.section-tagline {
  max-width: clamp(700px, 50vw, 1000px);
  margin: 18px auto 0;
  font-style: italic;
  color: #e2ede7;
  font-size: 1.05rem;
  line-height: 1.7;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
.cert-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(4, 10, 7, 0.98);
  z-index: 3000;
  display: none;
  justify-content: center;
  align-items: center;
  padding: clamp(16px, 3vw, 40px);
  cursor: zoom-out;
}
.cert-modal.open {
  display: flex;
}
.cert-modal .cert-modal-img {
  max-width: min(94vw, 1260px);
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  background: #ffffff;
  border-radius: 12px;
  cursor: default;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.95),
    0 0 0 2px rgba(197, 160, 89, 0.5),
    0 0 50px rgba(197, 160, 89, 0.2);
  animation: certModalZoomIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes certModalZoomIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.cert-modal .lightbox-close {
  position: absolute;
  top: 24px;
  right: 28px;
  z-index: 3010;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease,
    color 0.2s ease;
}
.cert-modal .lightbox-close:hover {
  background: rgba(197, 160, 89, 0.3);
  border-color: rgba(197, 160, 89, 0.8);
  color: #e8d7ad;
  transform: scale(1.08);
}
/* ==========================================================================
   Universal Aspect Ratio & Multi-Device Compatibility System
   ========================================================================== */
/* Container width is already set with fluid clamp() at the top of the file */
img,
video,
iframe {
  max-width: 100%;
  height: auto;
}
.residence-img-holder img,
.gallery-item img {
  width: 100%;
  object-fit: cover;
}
@media (max-width: 576px) {
  .hero-title {
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
    letter-spacing: 4px !important;
  }
  .hero-tagline {
    font-size: clamp(0.75rem, 3.2vw, 0.95rem) !important;
    letter-spacing: 3px !important;
  }
  .section-title {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }
  .section {
    padding: clamp(40px, 7vw, 70px) 0 !important;
  }
  .metric-number {
    font-size: 1.35rem !important;
  }
  .metric-label {
    font-size: 0.62rem !important;
  }
  .chatbot-widget {
    bottom: max(16px, env(safe-area-inset-bottom));
    right: max(16px, env(safe-area-inset-right));
  }
  .chatbot-toggle {
    width: 52px !important;
    height: 52px !important;
  }
    .chatbot-box {
    width: calc(100vw - 32px) !important;
    right: -8px !important;
    bottom: 68px !important;
    height: min(480px, 72vh) !important;
  }
}
@media (max-height: 560px) and (orientation: landscape) {
  .navbar {
    padding: 8px 4% !important;
  }
  .navbar.menu-open .nav-links {
    padding: 20px 5% !important;
    gap: 12px !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
  }
  .hero-section {
    min-height: 100vh !important;
    padding: 70px 0 30px !important;
  }
  .hero-title {
    font-size: 2.2rem !important;
    letter-spacing: 5px !important;
  }
  .hero-tagline {
    font-size: 0.85rem !important;
    letter-spacing: 3px !important;
  }
  .scroll-indicator {
    display: none !important;
  }
  .section {
    padding: 45px 0 !important;
  }
  .lightbox-content {
    max-height: 88vh !important;
    overflow-y: auto !important;
  }
  .lightbox-img {
    max-height: 55vh !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .container {
    width: 94%;
  }
  .residence-card {
    margin-bottom: 0;
  }
}
@media (min-width: 1600px) {
  /* Expand amenities grid to 4 columns on wide screens */
  .amenities-section .grid-3-col {
    grid-template-columns: repeat(4, 1fr);
  }
  /* Wider gallery items on big screens */
  .gallery-grid {
    gap: 20px;
  }
}
@media (min-width: 2200px) {
  /* Ultra-wide: expand grids further */
  .specs-grid,
  .eco-dashboard {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* ==========================================================================
   GREEN CERTIFICATION — 4-COLUMN SIDE-BY-SIDE LAYOUT SYSTEM
   ========================================================================== */
.green-certification-section {
  /* top padding now clears the fixed navbar so the "IGBC Pre-Certified Platinum" badge
     is never hidden underneath it (it used to sit at top:-33px) */
  padding: calc(var(--nav-h) + clamp(10px, 1.6vh, 28px)) 0 clamp(28px, 3.5vh, 56px);
  scroll-margin-top: 0;
  position: relative;
  z-index: 10;
  overflow: visible;
  background-color: var(--color-bg-darker);
}
.green-certification-section .video-background {
  overflow: hidden;
}
.green-certification-section .section-header {
  margin-bottom: clamp(14px, 2vh, 32px);
  position: relative;
  z-index: 20;
}
.green-certification-section .section-title {
  font-size: clamp(1.4rem, 2.2vw, 2.1rem);
  margin-bottom: 2px;
}
.green-certification-section .cert-status-badge {
  padding: 3px 12px;
  margin-bottom: 6px;
  font-size: 0.72rem;
}
.green-certification-section .header-divider {
  margin: 4px auto 6px;
}
.green-certification-section .section-tagline {
  font-size: clamp(0.76rem, 0.9vw, 0.86rem);
  line-height: 1.35;
  margin-bottom: clamp(6px, 0.8vh, 10px);
  max-width: clamp(750px, 55vw, 1100px);
}
.gc-main-row {
  display: flex;
  gap: clamp(18px, 2vw, 32px);
  align-items: stretch;
  margin-top: 0;
  margin-bottom: clamp(8px, 1vh, 14px);
}
.gc-left-zone {
  flex: 0 0 54%;
  max-width: 54%;
  display: flex;
  flex-direction: column;
}
.gc-metrics-zone {
  flex: 0 0 44%;
  max-width: 44%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 0;
}
.gc-pillars-fullwidth {
  width: 100%;
  margin-top: clamp(14px, 2.2vh, 24px);   /* the room the old "Core Environmental Pillars" heading took */
}
.gc-pillars-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1vw, 14px);
  width: 100%;
}
.gc-pillar-compact {
  background: linear-gradient(
    135deg,
    rgba(14, 72, 60, 0.3) 0%,
    rgba(8, 48, 40, 0.42) 50%,
    rgba(4, 28, 22, 0.55) 100%
  );
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-top: 1.5px solid rgba(255, 255, 255, 0.38);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 14px 16px;
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  box-shadow:
    inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.42),
    inset 0 -2px 4px 0 rgba(0, 0, 0, 0.5),
    inset 1.5px 0 3px 0 rgba(255, 255, 255, 0.18),
    inset -1.5px 0 3px 0 rgba(0, 0, 0, 0.3),
    0 14px 40px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(16, 120, 95, 0.22);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.gc-pillar-header-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 10px 0;
  background: transparent;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  margin-bottom: 10px;
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.gc-pillar-header-line h4 {
  font-size: clamp(0.75rem, 0.84vw, 0.88rem);
  color: #e2ede7;
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gc-pillar-icon {
  font-size: 0.95rem;
  flex-shrink: 0;
  width: 1.8em;
  height: 1.8em;
}
.gc-pillar-strong-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gc-pillar-strong-list li {
  font-size: clamp(0.68rem, 0.76vw, 0.78rem);
  color: var(--color-text-light);
  padding-left: 10px;
  position: relative;
  line-height: 1.3;
}
.gc-pillar-strong-list li::before {
  content: "\2022";
  position: absolute;
  left: 1px;
  color: var(--color-gold);
  font-weight: bold;
}
.gc-pillar-compact:hover {
  background: linear-gradient(
    135deg,
    rgba(18, 92, 78, 0.42) 0%,
    rgba(10, 62, 52, 0.55) 50%,
    rgba(5, 36, 28, 0.68) 100%
  );
  border-top-color: rgba(255, 255, 255, 0.55);
  border-left-color: rgba(255, 255, 255, 0.25);
  border-right-color: rgba(255, 255, 255, 0.22);
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 2px 3px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 5px 0 rgba(0, 0, 0, 0.5),
    inset 2px 0 4px 0 rgba(255, 255, 255, 0.25),
    inset -2px 0 4px 0 rgba(0, 0, 0, 0.35),
    0 16px 48px rgba(0, 0, 0, 0.8),
    0 0 24px rgba(16, 120, 95, 0.4);
  transform: translateY(-5px);
}
.gc-metrics-vertical {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.8vh, 22px);
  width: 100%;
}
.gc-metric-row {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 2.4vh, 28px) clamp(16px, 1.5vw, 22px);
  min-height: clamp(115px, 13vh, 140px);
  background: rgba(8, 20, 15, 0.82);
  border: 1px solid rgba(197, 160, 89, 0.28);
  border-left: 4px solid var(--color-gold);
  border-radius: 12px;
  backdrop-filter: blur(16px);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transform: translateY(35px) scale(0.92);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.gc-metric-row .gc-metric-num,
.gc-metric-row .gc-metric-label {
  position: relative;
  z-index: 3;
}
.gc-metric-row.gc-row-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gc-metric-row:hover {
  background: rgba(12, 32, 22, 0.95);
  border-left-color: #52c41a;
  border-color: rgba(197, 160, 89, 0.6);
  transform: translateY(-6px) scale(1.03) !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.6),
    0 0 24px rgba(197, 160, 89, 0.35),
    inset 0 0 12px rgba(82, 196, 26, 0.15);
}
.gc-metric-water {
  background: linear-gradient(
    135deg,
    rgba(6, 38, 62, 0.92) 0%,
    rgba(2, 22, 38, 0.98) 100%
  );
  border-left-color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.45);
  border-left-width: 4px;
  box-shadow:
    0 6px 26px rgba(0, 0, 0, 0.55),
    0 0 20px rgba(14, 165, 233, 0.25),
    inset 0 1.5px 3px rgba(255, 255, 255, 0.35),
    inset 0 0 25px rgba(2, 132, 199, 0.3);
}
.gc-metric-water:hover {
  background: linear-gradient(
    135deg,
    rgba(8, 48, 78, 0.96) 0%,
    rgba(3, 28, 48, 0.99) 100%
  );
  border-color: rgba(56, 189, 248, 0.85);
  border-left-color: #7dd3fc;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.7),
    0 0 32px rgba(56, 189, 248, 0.45),
    inset 0 2px 4px rgba(255, 255, 255, 0.5),
    inset 0 0 35px rgba(14, 165, 233, 0.4);
}
.gc-metric-water .gc-metric-num {
  background: linear-gradient(
    135deg,
    #f0f9ff 0%,
    #7dd3fc 40%,
    #38bdf8 70%,
    #0284c7 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(56, 189, 248, 0.5));
}
.water-effects-wrap {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.water-full-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.water-body-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(56, 189, 248, 0.28) 0%,
    rgba(14, 165, 233, 0.42) 18%,
    rgba(2, 132, 199, 0.58) 55%,
    rgba(7, 48, 76, 0.82) 100%
  );
  mix-blend-mode: hard-light;
}
.water-light-shafts {
  position: absolute;
  inset: -30%;
  background: repeating-linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.08) 0px,
    rgba(255, 255, 255, 0.08) 14px,
    transparent 14px,
    transparent 36px
  );
  opacity: 0.85;
  animation: waterSunRays 8s ease-in-out infinite alternate;
}
@keyframes waterSunRays {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 0.45;
  }
  50% {
    transform: rotate(4deg) scale(1.05) translate(2%, 2%);
    opacity: 0.85;
  }
  100% {
    transform: rotate(-3deg) scale(0.98) translate(-2%, -2%);
    opacity: 0.55;
  }
}
.water-caustics {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(186, 230, 253, 0.3) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 80%,
      rgba(56, 189, 248, 0.25) 0%,
      transparent 65%
    );
  animation: waterCausticPulse 6s ease-in-out infinite alternate;
}
@keyframes waterCausticPulse {
  0% {
    transform: scale(0.98) rotate(0deg);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.1) rotate(6deg) translate(2%, -3%);
    opacity: 0.85;
  }
  100% {
    transform: scale(1.02) rotate(-4deg) translate(-2%, 2%);
    opacity: 0.6;
  }
}
.water-surface-waves {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 38px;
  overflow: hidden;
  z-index: 2;
}
.water-wave-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 100%;
  background-repeat: repeat-x;
}
.water-wave-layer.wave-top-back {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 50' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L600,0 L600,20 C450,-5 250,35 0,15 Z' fill='%2338bdf8' fill-opacity='0.45'/%3E%3C/svg%3E");
  background-size: 300px 38px;
  animation: waveFlowBack 5.5s linear infinite;
  opacity: 0.85;
}
.water-wave-layer.wave-top-front {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 50' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L600,0 L600,28 C420,8 200,42 0,22 Z' fill='%23bae6fd' fill-opacity='0.55'/%3E%3C/svg%3E");
  background-size: 300px 38px;
  animation: waveFlowFront 3.4s linear infinite;
  opacity: 0.95;
}
.water-submerged-flow {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 55px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60' preserveAspectRatio='none'%3E%3Cpath d='M0,35 C150,15 350,55 600,35 L600,60 L0,60 Z' fill='%230284c7' fill-opacity='0.35'/%3E%3C/svg%3E");
  background-size: 300px 55px;
  animation: waveFlowBack 7s linear infinite;
}
.water-surface-rim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 15%,
    rgba(186, 230, 253, 0.95) 50%,
    rgba(255, 255, 255, 0.4) 85%,
    transparent 100%
  );
  box-shadow:
    0 1px 8px rgba(56, 189, 248, 0.8),
    0 0 15px rgba(255, 255, 255, 0.6);
  z-index: 3;
}
@keyframes waveFlowBack {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-300px);
  }
}
@keyframes waveFlowFront {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-300px);
  }
}
.water-bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    #ffffff 0%,
    rgba(186, 230, 253, 0.9) 45%,
    rgba(2, 132, 199, 0.3) 100%
  );
  box-shadow:
    0 0 8px rgba(56, 189, 248, 0.75),
    inset 0 0 2px #fff;
  pointer-events: none;
  z-index: 2;
}
.water-bubble.b1 {
  width: 6px;
  height: 6px;
  left: 16%;
  bottom: -8px;
  animation: bubbleRiseFull 3.8s ease-in infinite 0.2s;
}
.water-bubble.b2 {
  width: 9px;
  height: 9px;
  left: 62%;
  bottom: -8px;
  animation: bubbleRiseFull 4.6s ease-in infinite 1s;
}
.water-bubble.b3 {
  width: 5px;
  height: 5px;
  left: 38%;
  bottom: -8px;
  animation: bubbleRiseFull 3.2s ease-in infinite 1.8s;
}
.water-bubble.b4 {
  width: 8px;
  height: 8px;
  left: 82%;
  bottom: -8px;
  animation: bubbleRiseFull 5s ease-in infinite 0.5s;
}
.water-bubble.b5 {
  width: 6px;
  height: 6px;
  left: 28%;
  bottom: -8px;
  animation: bubbleRiseFull 4.1s ease-in infinite 2.3s;
}
.water-bubble.b6 {
  width: 10px;
  height: 10px;
  left: 74%;
  bottom: -8px;
  animation: bubbleRiseFull 4.9s ease-in infinite 1.5s;
}
@keyframes bubbleRiseFull {
  0% {
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  85% {
    opacity: 0.9;
    transform: translateY(-115px) translateX(8px) scale(1);
  }
  100% {
    transform: translateY(-145px) translateX(-4px) scale(1.3);
    opacity: 0;
  }
}
.water-svg-accent {
  position: absolute;
  top: 10px;
  right: 12px;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 2px 8px rgba(56, 189, 248, 0.7));
  animation: dropPulse 3.5s ease-in-out infinite alternate;
}
@keyframes dropPulse {
  0% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 2px 6px rgba(56, 189, 248, 0.6));
  }
  100% {
    transform: translateY(-3px) scale(1.1);
    filter: drop-shadow(0 3px 12px rgba(186, 230, 253, 0.95));
  }
}
.gc-metric-forest {
  background: linear-gradient(
    135deg,
    rgba(6, 32, 18, 0.92) 0%,
    rgba(3, 18, 9, 0.98) 100%
  );
  border-left-color: #4ade80;
  border-color: rgba(74, 222, 128, 0.4);
  border-left-width: 4px;
  box-shadow:
    0 6px 26px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(34, 197, 94, 0.22),
    inset 0 1.5px 3px rgba(224, 192, 126, 0.25),
    inset 0 0 20px rgba(5, 46, 22, 0.4);
}
.gc-metric-forest:hover {
  background: linear-gradient(
    135deg,
    rgba(10, 48, 26, 0.96) 0%,
    rgba(4, 24, 12, 0.99) 100%
  );
  border-color: rgba(74, 222, 128, 0.85);
  border-left-color: #86efac;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.7),
    0 0 32px rgba(74, 222, 128, 0.45),
    inset 0 2px 4px rgba(224, 192, 126, 0.4),
    inset 0 0 30px rgba(34, 197, 94, 0.35);
}
.gc-metric-forest .gc-metric-num {
  background: linear-gradient(
    135deg,
    #f0fdf4 0%,
    #bbf7d0 35%,
    #4ade80 70%,
    #16a34a 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(74, 222, 128, 0.4));
}
.forest-effects-wrap {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.gc-metric-platinum {
  border-color: rgba(226, 232, 240, 0.35);
  border-left-width: 4px;
  border-left-color: #d4af37;
  background: rgba(18, 14, 4, 0.95);
  box-shadow: 0 0 24px rgba(197, 160, 89, 0.18);
}
.gc-metric-platinum:hover {
  border-color: rgba(226, 232, 240, 0.7);
  border-left-color: #f5e6b4;
  box-shadow:
    0 12px 36px rgba(197, 160, 89, 0.4),
    0 0 24px rgba(212, 175, 55, 0.45);
}
.gc-metric-platinum .gc-metric-num {
  background: linear-gradient(
    135deg,
    #f8fafc 0%,
    #cbd5e1 40%,
    #94a3b8 60%,
    #f1f5f9 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gc-metric-clean {
  background: linear-gradient(
    135deg,
    rgba(220, 240, 255, 0.08) 0%,
    rgba(180, 220, 255, 0.03) 100%
  );
  border-left-color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
  border-left-width: 4px;
  backdrop-filter: blur(24px) saturate(120%);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.25);
}
.gc-metric-clean:hover {
  background: linear-gradient(
    135deg,
    rgba(220, 240, 255, 0.15) 0%,
    rgba(180, 220, 255, 0.08) 100%
  );
  border-color: rgba(255, 255, 255, 0.5);
  border-left-color: #ffffff;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(255, 255, 255, 0.2),
    inset 0 0 12px rgba(255, 255, 255, 0.4);
}
.gc-metric-clean .gc-metric-num {
  background: linear-gradient(135deg, #ffffff 0%, #e0f2fe 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gc-metric-label {
  font-size: clamp(0.72rem, 0.85vw, 0.95rem);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 0;
  white-space: nowrap;
}
.gc-metric-num {
  font-family: var(--font-headings);
  font-size: clamp(2rem, 2.6vw, 3.2rem);
  font-weight: 700;
  background: var(--color-gold-gradient);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  min-width: auto;
  text-align: center;
  line-height: 1.05;
  margin-bottom: 8px;
  display: block;
  animation: goldTextShimmer 4s linear infinite;
}
@keyframes goldTextShimmer {
  0% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
  100% {
    background-position: 0% center;
  }
}
.gc-metric-zero {
  background: linear-gradient(135deg, #52c41a, #87e82d);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gc-platinum-word {
  font-size: clamp(1.6rem, 2.1vw, 2.6rem) !important;
  background: linear-gradient(
    90deg,
    #9f7d3a 0%,
    #c5a059 20%,
    #f5e6b4 40%,
    #e0c07e 50%,
    #f5e6b4 60%,
    #c5a059 80%,
    #9f7d3a 100%
  ) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: platinumShine 3.5s linear infinite;
  letter-spacing: 1px;
  min-width: auto !important;
  text-align: center;
  margin-bottom: 8px;
}
@keyframes platinumShine {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}
@keyframes metricPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.18);
  }
  75% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
.gc-metric-num.counting-done {
  animation: metricPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@media (max-width: 992px) {
  .gc-main-row {
    flex-direction: column;
  }
  .gc-left-zone,
  .gc-metrics-zone {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .gc-pillars-4col {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .gc-pillars-4col {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   PREMIUM BEVELED CERTIFICATE PLAQUE (Museum-Grade Modern Presentation)
   ========================================================================== */
.premium-cert-container {
  position: relative;
  width: 100%;
  max-width: clamp(550px, 38vw, 800px);
  margin: 0 auto;
  border-radius: 12px;
  background: #ffffff;
  cursor: zoom-in;
  overflow: hidden;
  padding: 5px;
  border: 1px solid transparent;
  box-shadow:
    0 6px 16px -3px rgba(0, 0, 0, 0.35),
    0 14px 32px -5px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1),
    box-shadow 0.28s cubic-bezier(0.2, 0.9, 0.3, 1),
    border-color 0.28s ease;
  will-change: transform;
}
.premium-cert-container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.premium-cert-container::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 220%;
  height: 200%;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    120deg,
    transparent 40%,
    rgba(255, 255, 255, 0.1) 48%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.1) 52%,
    transparent 60%
  );
  transform: translateX(-100%) rotate(25deg);
  transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.premium-cert-container:hover,
.premium-cert-container:focus-visible {
  transform: translateY(-4px) scale(1.01);
  border: 1px solid rgba(52, 168, 83, 0.22);
  border-top-color: rgba(255, 255, 255, 0.85);
  border-left-color: rgba(255, 255, 255, 0.65);
  border-right-color: rgba(34, 130, 78, 0.25);
  border-bottom-color: rgba(20, 95, 55, 0.28);
  box-shadow:
    0 10px 22px -3px rgba(0, 0, 0, 0.45),
    0 20px 40px -6px rgba(0, 0, 0, 0.35);
  outline: none;
}
.premium-cert-container:hover::before,
.premium-cert-container:focus-visible::before {
  opacity: 1;
  box-shadow:
    inset 1px 1px 0px rgba(255, 255, 255, 0.8),
    inset -1px -1px 0px rgba(15, 60, 35, 0.18),
    inset 0 0 0 3.5px rgba(34, 150, 90, 0.14),
    inset 0 0 0 4.5px rgba(167, 243, 208, 0.25),
    inset 0 0 0 5px rgba(255, 255, 255, 0.8);
}
.premium-cert-container:hover::after,
.premium-cert-container:focus-visible::after {
  transform: translateX(65%) rotate(25deg);
}
.premium-cert-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 7px;
  background: #ffffff;
}
.premium-cert-container:hover .premium-cert-img,
.premium-cert-container:focus-visible .premium-cert-img {
  transform: none;
}
.specs-styled-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(197, 160, 89, 0.15);
  border-radius: var(--border-radius-md, 8px);
  overflow: hidden;
}
.specs-styled-table th {
  color: var(--color-gold-light);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 6px 6px;
  white-space: nowrap;
  text-align: center;
  font-weight: 700;
  background: rgba(197, 160, 89, 0.05);
  border-bottom: 1px solid rgba(197, 160, 89, 0.3);
}
.specs-styled-table td {
  padding: 5px 6px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.75rem;
  text-align: center;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.3s ease;
}
.specs-styled-table tbody tr:last-child td {
  border-bottom: none;
}
.specs-styled-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
}
/* Specifications Grid */
.specs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.spec-item-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 16px;
  border-radius: var(--border-radius-sm, 8px);
  transition: var(--transition-smooth);
}
.spec-item-box:hover {
  border-color: rgba(197, 160, 89, 0.3);
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.spec-icon {
  width: 2.3rem;
  height: 2.3rem;
  margin-bottom: 10px;
  line-height: 1;
}
.spec-item-box h4 {
  font-size: 0.85rem;
  color: var(--color-gold-light);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.spec-item-box p {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin-bottom: 0;
}
/* Eco Green Dashboard */
.eco-dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.eco-card {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 16px;
  border-radius: var(--border-radius-sm, 8px);
  transition: var(--transition-smooth);
}
.eco-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 200, 100, 0.05);
}
.eco-card.green-glow {
  border-top: 2px solid rgba(0, 200, 100, 0.4);
}
.eco-card h4 {
  color: var(--color-gold-light);
  font-size: 0.85rem;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}
.eco-card ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.eco-card ul li {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: 8px;
  line-height: 1.3;
  padding-left: 12px;
  position: relative;
}
.eco-card ul li::before {
  content: "\2022";
  color: rgba(0, 200, 100, 0.8);
  position: absolute;
  left: 0;
  font-size: 1rem;
  line-height: 1.3;
  top: -1px;
}
.eco-card ul li strong {
  color: #fff;
  font-weight: 500;
}
/* Consultants Flex Section */
.consultants-flex {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.consultant-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 12px;
  border-radius: var(--border-radius-sm, 8px);
  transition: var(--transition-smooth);
}
.consultant-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(197, 160, 89, 0.3);
}
.cons-role {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-gold-dark);
  display: block;
  margin-bottom: 4px;
}
.consultant-card h4 {
  font-size: 0.9rem;
  color: #fff;
  margin-bottom: 4px;
  font-weight: 600;
}
.cons-names {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: 6px;
  line-height: 1.3;
}
.cons-loc {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 6px;
  border-radius: 4px;
  display: inline-block;
}
/* Tab Pane Overrides */
.tab-pane {
  display: none;
  width: 100%;
}
.tab-pane.active {
  display: block;
  animation: fadeIn 0.4s ease forwards;
}
/* (Oct 2026) The Specifications, Green Features and Consultants tabs show in full: they used to scroll inside
   a 520px box, which hid their last row and caught the mouse wheel */
.tab-pane-header {
  margin-bottom: 20px;
}
.tab-pane-header h3 {
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 6px;
}
.tab-pane-header p {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Pure 4K Raytraced Master Showcase Section (NO whole-page gradient/overlay)
   --------------------------------------------------------------------------
   Responsive rebuild (Sep 2026)
   The section was hand-tuned on a 32" 2560x1440 screen with fixed pixel offsets
   (logo at 50% + 60px, coordinates dock at 310-340px from the top, 450px form...).
   The background image scales with the screen but those offsets did not, so on any
   other screen the logo drifted off the sky gap and the cards covered the pool.

   It now works like an art-directed "stage":
   - The background render is 4096 x 1858 (letterbox bars trimmed). --cs is the size
     of one image pixel on screen; --cox/--coy are where the image's top-left lands.
     index.js keeps them exact (ResizeObserver); the values below are CSS fallbacks.
   - The ESV monogram is pinned to the centre of the sky between the two towers,
     the form sits on the left tower and the dock starts at the right tower's edge,
     exactly like the original 32" layout — on every screen size.
   - All UI sizes are in em. On most screens 1em = 1rem (same fluid type scale as the
     rest of the site); above 2560px wide they grow with the image so a 4K screen
     shows the same composition instead of tiny cards.
   - When a screen is too narrow for that composition (tablet/4:3), index.js adds
     .cs-stacked and the cards stack under the logo instead.
   ========================================================================== */
.new-contact-hero-section {
  /* image metrics (trimmed render) */
  --img-w: 4096;
  --img-h: 1858;
  /* stage scale + offsets (overwritten with exact values by index.js) */
  --cs: max(100vw / 4096, 100vh / 1858);
  --cox: calc((100vw - 4096 * var(--cs)) / 2);
  --coy: calc((100vh - 1858 * var(--cs)) / 2);
  /* architecture anchors, in image pixels -> screen pixels */
  --gap-l: calc(var(--cox) + 1515 * var(--cs)); /* left tower edge  */
  --gap-r: calc(var(--cox) + 2676 * var(--cs)); /* right tower edge */
  --gap-c: calc(var(--cox) + 2095 * var(--cs)); /* centre of the sky gap */
  /* UI scale: 1rem normally, grows with the image beyond 2560px (22px @ 2560x1440) */
  --cfs: max(1rem, max(100vw / 4096, 100vh / 1858) * 28.35);
  --c-pad: clamp(20px, 3.5vw, 2.95em);

  position: relative;
  display: block;
  min-height: 100vh;
  padding: 0;
  overflow: hidden; /* clips the right-bleed dock cleanly at the viewport edge */
  font-size: var(--cfs);
  background-color: #1a1420;
  /* v2 (Sep 2026): sky, palms and tree line rebuilt from the clean 4K walkthrough frame (no seams,
     halos or AI-sharpening crunch); AVIF where supported, WebP otherwise */
  background-image: url('assets/contact_bg_v2_2560.webp');
  background-image: image-set(url('assets/contact_bg_v2_2560.avif') type('image/avif'), url('assets/contact_bg_v2_2560.webp') type('image/webp'));
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* Strictly NO whole-page gradient, filter, or dimming overlay */
}
@media (max-width: 1440px) and (max-resolution: 1.49dppx) {
  .new-contact-hero-section {
    background-image: url('assets/contact_bg_v2_1920.webp');
    background-image: image-set(url('assets/contact_bg_v2_1920.avif') type('image/avif'), url('assets/contact_bg_v2_1920.webp') type('image/webp'));
  }
}
@media (min-width: 2000px), (min-width: 1300px) and (min-resolution: 1.5dppx) {
  .new-contact-hero-section {
    background-image: url('assets/contact_bg_v2_4096.webp');
    background-image: image-set(url('assets/contact_bg_v2_4096.avif') type('image/avif'), url('assets/contact_bg_v2_4096.webp') type('image/webp'));
  }
}
/* the generic section "orb" decoration is not wanted on this full-bleed render */
.new-contact-hero-section::before {
  display: none;
}

.new-contact-container {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: calc(var(--nav-h) + 1.9em) var(--c-pad) 2.2em;
}

/* --------------------------------------------------------------------------
   Glassmorphic Vertical Rectangular Form Card (left tower)
   -------------------------------------------------------------------------- */
.glass-form-card {
  width: 20.5em; /* = the original 450px on the 32" screen */
  max-width: 100%;
  background: rgba(8, 14, 11, 0.44); /* Reduced opacity for true frosted glass */
  backdrop-filter: blur(28px) saturate(200%) brightness(1.06);
  -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.06);
  border: 1px solid rgba(224, 192, 126, 0.35);
  border-radius: 0.75em;
  padding: 1.55em 1.6em 1.45em;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 4px 20px rgba(0, 0, 0, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.22),
    inset 0 -1px 1px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 2;
}

.glass-form-card::before,
.glass-coords-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 192, 126, 0.7), transparent);
}

.glass-form-header {
  margin-bottom: 1.05em;
}

.glass-form-header .section-subtitle {
  margin-bottom: 0.45em;
  font-size: 0.75em;
  letter-spacing: 0.26em;
}

.glass-form-title {
  font-size: 1.75em;
  font-family: var(--font-headings);
  color: var(--color-text-light);
  margin-bottom: 0.2em;
  line-height: 1.2;
}

.glass-form-desc {
  font-size: 0.85em;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 0;
}

/* Glass form input fields (em-based so they scale with the card) */
.new-contact-hero-section .glass-form .form-group {
  margin-bottom: 0.7em;
}

.new-contact-hero-section .glass-form .form-group input,
.new-contact-hero-section .glass-form .form-group textarea {
  font-size: 0.9em;
  padding: 0.78em 0.9em;
  border-radius: 0.4em;
  background: rgba(0, 0, 0, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.new-contact-hero-section .glass-form .input-with-icon input {
  padding-left: 2.85em !important;
}

.new-contact-hero-section .glass-form .form-group textarea {
  min-height: 4.4em;
}

.new-contact-hero-section .glass-form .form-group input:focus,
.new-contact-hero-section .glass-form .form-group textarea:focus {
  border-color: var(--color-gold-light) !important;
  background: rgba(0, 0, 0, 0.5) !important;
  box-shadow: 0 0 16px rgba(197, 160, 89, 0.35) !important;
}

.new-contact-hero-section .glass-form .input-with-icon .input-icon {
  left: 0.62em;
  font-size: 0.92em;
  width: 1.62em;
  height: 1.62em;
}

.new-contact-hero-section .glass-form .form-group label {
  font-size: 0.86em;
  top: 0.82em;
  left: 0.95em;
  color: rgba(220, 230, 225, 0.75);
}

.new-contact-hero-section .glass-form .form-group.input-with-icon label {
  left: 2.95em;
}

.new-contact-hero-section .glass-form .form-group input:focus ~ label,
.new-contact-hero-section .glass-form .form-group input:not(:placeholder-shown) ~ label,
.new-contact-hero-section .glass-form .form-group textarea:focus ~ label,
.new-contact-hero-section .glass-form .form-group textarea:not(:placeholder-shown) ~ label {
  top: -0.75em;
  left: 0.75em;
  font-size: 0.7em;
  background: rgba(14, 22, 18, 0.92);
}

.glass-label {
  color: var(--color-text-light) !important;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 8px;
}

.new-contact-hero-section .form-group .form-label-static {
  font-size: 0.74em;
  margin-bottom: 0.65em;
}

.new-contact-hero-section .config-form-group {
  margin-bottom: 0.85em;
}

/* Config pills inside vertical rectangular glass card */
.glass-pills-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4em;
}

.glass-pills-selector .config-pill:nth-child(3) {
  grid-column: span 2;
}

.glass-pills-selector .config-pill {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(224, 192, 126, 0.28);
  border-radius: 0.4em;
  padding: 0.32em 0.45em;
  gap: 0.36em;
  font-size: 1em;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.glass-pills-selector .config-pill:hover {
  background: rgba(197, 160, 89, 0.15);
  border-color: rgba(197, 160, 89, 0.6);
  transform: translateY(-1px);
}

.glass-pills-selector .config-pill.active {
  background: linear-gradient(
    90deg,
    rgba(197, 160, 89, 0.32) 0%,
    rgba(26, 92, 79, 0.4) 100%
  );
  border: 1.5px solid var(--color-gold);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 12px rgba(197, 160, 89, 0.2);
}

.glass-pills-selector .pill-check {
  font-size: 0.62em;
  width: 1.25em;
  height: 1.25em;
}

.glass-pills-selector .pill-title {
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: #ffffff;
  transition: color 0.2s ease;
}

.glass-pills-selector .config-pill.active .pill-title {
  color: #fff4d6;
  text-shadow: 0 0 8px rgba(224, 192, 126, 0.4);
}

.glass-pills-selector .config-pill:nth-child(3) .pill-title {
  font-size: 0.73em;
  letter-spacing: 0.8px;
  font-weight: 600;
}

.glass-pills-selector .pill-sub {
  white-space: nowrap;
  font-size: 0.63em;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.65);
}

.glass-pills-selector .config-pill.active .pill-sub {
  color: rgba(255, 248, 230, 0.88);
}

.new-contact-hero-section .btn-submit-request {
  font-size: 0.95em;
  padding: 0.85em 1.2em;
  margin-top: 0.2em;
}

.new-contact-hero-section .btn-submit-request .btn-arrow {
  font-size: 1.15em;
}

.new-contact-hero-section .form-feedback {
  margin-top: 0.6em;
  min-height: 1.2em;
  font-size: 0.85em;
}

/* --------------------------------------------------------------------------
   Architectural Coordinates Dock (starts at the right tower, bleeds to the edge)
   Default = compact single column. .cs-dock-wide = the original 3-column 32" dock.
   -------------------------------------------------------------------------- */
.glass-coords-horizontal {
  position: absolute;
  z-index: 2;
  left: var(--gap-r);
  right: 0;
  top: var(--dock-top, max(calc(var(--nav-h) + 1em), calc(var(--coy) + 580 * var(--cs))));
  width: auto;
  max-width: none;
  margin: 0;
  background: rgba(8, 14, 11, 0.45);
  backdrop-filter: blur(32px) saturate(220%) brightness(1.08);
  -webkit-backdrop-filter: blur(32px) saturate(220%) brightness(1.08);
  border: 1px solid rgba(224, 192, 126, 0.35);
  border-right: none;
  border-radius: 0.64em 0 0 0.64em;
  padding: 0.75em 1.2em 0.85em;
  box-shadow:
    0 24px 55px rgba(0, 0, 0, 0.65),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.22),
    inset 0 -1px 1px rgba(0, 0, 0, 0.3);
}

/* narrow docks (small laptops/tablets): stack the two hotline numbers */
.glass-coords-horizontal {
  container: coords / inline-size;
}
@container coords (max-width: 19em) {
  .coords-segmented-hotline {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .coords-segment-divider {
    width: 100%;
    height: 1px;
  }
}

/* The old ::after "right bleed" panel is no longer needed: the dock itself now runs
   to the viewport edge (right: 0). */
.glass-coords-horizontal::after {
  content: none;
}

/* Central Architectural Sky Monogram Logo (High-Definition Sculpted Gold) */
.showcase-sky-logo {
  --logo-w: max(118px, calc(257 * var(--cs)));  /* 195px on the 32" screen */
  position: absolute;
  top: var(--logo-top, max(calc(var(--nav-h) + 0.35em), calc(var(--coy) + 95 * var(--cs))));
  left: var(--gap-c);
  width: var(--logo-w);
  /* the ESV letters sit at 38% of the monogram image (the leaf is on the right) */
  transform: translateX(-38%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  cursor: default;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.showcase-sky-logo:hover {
  transform: translateX(-38%) translateY(-3px) scale(1.03);
}

/* Ambient Sunset Radiance */
.sky-logo-aura-glow {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--logo-w) * 2.26);
  height: calc(var(--logo-w) * 1.64);
  background: radial-gradient(
    ellipse at center,
    rgba(224, 192, 126, 0.45) 0%,
    rgba(197, 160, 89, 0.22) 35%,
    rgba(26, 92, 79, 0.1) 60%,
    transparent 75%
  );
  filter: blur(calc(var(--logo-w) * 0.164));
  pointer-events: none;
  z-index: 1;
}

.sky-logo-monogram-container {
  position: relative;
  display: block;
  width: 100%;
  z-index: 2;
}

/* High-Definition 24k Gold & Glossy Emerald Enamel */
.sky-logo-img-refined {
  width: 100%;
  height: auto;
  display: block;
  filter:
    brightness(1.22)
    contrast(1.15)
    saturate(1.35)
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.85))
    drop-shadow(0 0 14px rgba(224, 192, 126, 0.7))
    drop-shadow(0 0 30px rgba(197, 160, 89, 0.35))
    drop-shadow(0 14px 28px rgba(0, 0, 0, 0.88));
  transition: filter 0.3s ease;
}

.showcase-sky-logo:hover .sky-logo-img-refined {
  filter:
    brightness(1.28)
    contrast(1.18)
    saturate(1.4)
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 22px rgba(224, 192, 126, 0.9))
    drop-shadow(0 0 38px rgba(197, 160, 89, 0.55))
    drop-shadow(0 16px 32px rgba(0, 0, 0, 0.95));
}

/* Masked Metallic Sheen (Only glints across the letters themselves, NO box artifact!) */
.sky-logo-metallic-sheen {
  position: absolute;
  inset: 0;
  -webkit-mask-image: url('assets/esv_monogram_gold.png');
  mask-image: url('assets/esv_monogram_gold.png');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.sky-logo-metallic-sheen::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 35%,
    rgba(255, 250, 230, 0.75) 50%,
    rgba(255, 255, 255, 0.15) 65%,
    transparent 100%
  );
  transform: rotate(25deg);
  animation: logoMetallicGleam 6.5s infinite ease-in-out;
}

@keyframes logoMetallicGleam {
  0%, 60% { transform: translateX(-180%) rotate(25deg); opacity: 0; }
  65% { opacity: 1; }
  80% { transform: translateX(380%) rotate(25deg); opacity: 1; }
  85%, 100% { opacity: 0; }
}

/* Architectural Gold Pedestal — centred under the letters (not the leaf) */
.sky-logo-pedestal {
  display: flex;
  align-items: center;
  gap: calc(var(--logo-w) * 0.05);
  margin-top: calc(var(--logo-w) * 0.05);
  z-index: 2;
  width: calc(var(--logo-w) * 0.72);
  opacity: 0.92;
  transform: translateX(calc(var(--logo-w) * -0.113));
}

.sky-pedestal-line {
  flex: 1;
  height: 1px;
}

.sky-pedestal-line.left {
  background: linear-gradient(90deg, transparent, rgba(224, 192, 126, 0.8));
}

.sky-pedestal-line.right {
  background: linear-gradient(90deg, rgba(224, 192, 126, 0.8), transparent);
}

.sky-pedestal-pip {
  font-size: max(8px, calc(var(--logo-w) * 0.062));
  color: var(--color-gold-light);
  text-shadow: 0 0 6px rgba(224, 192, 126, 0.85);
  line-height: 1;
}

/* Subtitle Wordmark in Gold */
.sky-logo-wordmark {
  margin-top: calc(var(--logo-w) * 0.03);
  font-family: var(--font-headings);
  font-size: max(10px, calc(var(--logo-w) * 0.077));
  font-weight: 600;
  letter-spacing: 0.33em;
  white-space: nowrap;
  text-transform: uppercase;
  color: #f7e7c4;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.95),
    0 0 12px rgba(197, 160, 89, 0.5);
  z-index: 2;
  opacity: 0.95;
  transform: translateX(calc(var(--logo-w) * -0.113));
}

/* --------------------------------------------------------------------------
   Dock contents
   -------------------------------------------------------------------------- */
.coords-h-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75em;
  border-bottom: 1px solid rgba(197, 160, 89, 0.22);
  padding-bottom: 0.35em;
  margin-bottom: 0.55em;
}

.coords-h-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.coords-h-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-gold-light);
  box-shadow: 0 0 8px var(--color-gold-light);
}

.coords-h-title {
  font-family: var(--font-headings);
  font-size: 0.82em;
  letter-spacing: 0.12em;
  color: var(--color-gold-light);
  font-weight: 600;
  text-transform: uppercase;
}

.coords-h-loc {
  font-size: 0.68em;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  white-space: nowrap;
}

/* compact (default): one column, no divider */
.coords-h-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75em;
  align-items: start;
}

.coords-h-divider {
  display: none;
  width: 1px;
  height: 100%;
  min-height: 75px;
  background: linear-gradient(180deg, transparent, rgba(224, 192, 126, 0.35), transparent);
}

.coords-h-col {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  min-width: 0;
}

.coords-h-item {
  display: flex;
  gap: 0.5em;
  align-items: flex-start;
}

.coords-h-text-wrap {
  flex-grow: 1;
  min-width: 0;
}

.coords-icon {
  width: 0.64em;
  height: 0.64em;
  color: var(--color-gold);
  flex-shrink: 0;
  margin-top: 0.12em;
}

.coords-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.1em;
}

.coords-label {
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  font-weight: 600;
}

.coords-map-link {
  font-size: 0.67em;
  color: #ffffff;
  opacity: 0.75;
  text-decoration: underline;
  letter-spacing: 0.5px;
  white-space: nowrap;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.coords-map-link:hover {
  opacity: 1;
  color: var(--color-gold-light);
}

.coords-text {
  font-size: 0.78em;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.35;
  margin-bottom: 0;
}

/* Single-Line Segmented Hotline Capsule */
.coords-segmented-hotline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  background: transparent;
  border: 1px solid rgba(224, 192, 126, 0.35);
  border-radius: 0.36em;
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12);
}

.coords-segment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.38em 0.8em;
  font-size: 0.78em;
  font-weight: 500;
  color: var(--color-gold-light);
  text-decoration: none;
  background: transparent;
  transition: all 0.22s ease;
  white-space: nowrap;
}

.coords-segment-btn:hover {
  background: rgba(197, 160, 89, 0.18);
  color: #ffffff;
  box-shadow: inset 0 0 12px rgba(197, 160, 89, 0.2);
}

.coords-segment-btn:hover .coords-box-icon {
  color: #ffffff;
  transform: scale(1.1) rotate(-8deg);
}

.coords-segment-divider {
  width: 1px;
  height: 1.1em;
  background: rgba(224, 192, 126, 0.3);
}

/* Transparent Email Badge */
.coords-email-box {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.38em 0.85em;
  background: transparent;
  border: 1px solid rgba(224, 192, 126, 0.35);
  border-radius: 0.36em;
  font-size: 0.8em;
  font-weight: 500;
  color: var(--color-gold-light);
  text-decoration: none;
  transition: all 0.22s ease;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12);
}

.coords-email-box:hover {
  background: rgba(197, 160, 89, 0.18);
  color: #ffffff;
  box-shadow: inset 0 0 12px rgba(197, 160, 89, 0.2);
}

.coords-email-box:hover .coords-box-icon {
  color: #ffffff;
  transform: scale(1.1);
}

.coords-box-icon {
  width: 1.15em;
  height: 1.15em;
  color: var(--color-gold);
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.2s ease;
}

/* inline "Sales Inquiry Hotlines" / "Email" labels had a hard-coded 5px margin */
.glass-coords-horizontal .coords-label[style] {
  margin-bottom: 0.35em !important;
}

/* Wide dock = the original 3-column layout designed on the 32" monitor */
.new-contact-hero-section.cs-dock-wide .glass-coords-horizontal {
  padding: 0.75em 1.2em 0.85em;
}
.new-contact-hero-section.cs-dock-wide .coords-h-grid {
  grid-template-columns: minmax(0, 1fr) auto max-content;
  gap: 1.2em;
  align-items: center;
  max-width: 35em;
}
.new-contact-hero-section.cs-dock-wide .coords-h-header {
  max-width: 35em;
}
.new-contact-hero-section.cs-dock-wide .coords-h-divider {
  display: block;
}
.new-contact-hero-section.cs-dock-wide .coords-segmented-hotline {
  flex-wrap: nowrap;
}

/* compact dock keeps its content column readable when the tower edge is far left */
.new-contact-hero-section:not(.cs-dock-wide) .glass-coords-horizontal > * {
  max-width: 26em;
}
.new-contact-hero-section:not(.cs-dock-wide) .coords-h-header {
  flex-wrap: wrap;
  row-gap: 0.2em;
}
.coords-text {
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Short laptop screens (e.g. 1280x720, 1366x768): tighten vertical rhythm so the
   whole form fits in one screen.
   -------------------------------------------------------------------------- */
@media (max-height: 820px) {
  .new-contact-container {
    padding-top: calc(var(--nav-h) + 0.9em);
    padding-bottom: 1.2em;
  }
  .glass-form-card {
    padding: 1.15em 1.35em 1.05em;
  }
  .glass-form-header {
    margin-bottom: 0.75em;
  }
  .glass-form-title {
    font-size: 1.55em;
  }
  .new-contact-hero-section .glass-form .form-group {
    margin-bottom: 0.55em;
  }
  .new-contact-hero-section .glass-form .form-group input {
    padding-top: 0.66em;
    padding-bottom: 0.66em;
  }
  .new-contact-hero-section .glass-form .form-group textarea {
    min-height: 3.2em;
    padding-top: 0.6em;
    padding-bottom: 0.6em;
  }
  .new-contact-hero-section .config-form-group {
    margin-bottom: 0.65em;
  }
  .new-contact-hero-section .btn-submit-request {
    padding-top: 0.72em;
    padding-bottom: 0.72em;
  }
  .new-contact-hero-section .form-feedback {
    margin-top: 0.3em;
    min-height: 0.9em;
  }
}

/* --------------------------------------------------------------------------
   Stacked layout (added by index.js when the screen is too narrow/tall for the
   stage composition, e.g. 1024x768 or a narrow browser window)
   -------------------------------------------------------------------------- */
.new-contact-hero-section.cs-stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: auto;
  padding: calc(var(--nav-h) + 1.4em) var(--c-pad) 2.5em;
  background-position: center top;
}

.new-contact-hero-section.cs-stacked .showcase-sky-logo {
  position: relative;
  top: auto;
  left: auto;
  transform: translateX(11%);
  margin-bottom: 1.6em;
  --logo-w: clamp(118px, 13vw, 170px);
}

.new-contact-hero-section.cs-stacked .showcase-sky-logo:hover {
  transform: translateX(11%) translateY(-3px) scale(1.03);
}

.new-contact-hero-section.cs-stacked .new-contact-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19em), 1fr));
  align-items: start;
  gap: 1.4em;
  width: 100%;
  max-width: 50em;
  min-height: 0;
  padding: 0;
}

.new-contact-hero-section.cs-stacked .glass-form-card {
  width: auto;
}

.new-contact-hero-section.cs-stacked .glass-coords-horizontal {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  border-right: 1px solid rgba(224, 192, 126, 0.35);
  border-radius: 0.75em;
}

.new-contact-hero-section.cs-stacked .glass-coords-horizontal > * {
  max-width: none;
}

@media (max-width: 680px) {
  .coords-segmented-hotline {
    flex-direction: column;
    width: 100%;
  }

  .coords-segment-divider {
    width: 100%;
    height: 1px;
  }

  .coords-segment-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Line icons in tinted glass chips (design option 2B, Sep 2026)
   Replaces the emoji icons. Each chip takes its colour from --c (an "r, g, b"
   triple) so it can match the heading next to it.
   ========================================================================== */
.line-ico {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.ico-chip {
  --c: 224, 192, 126;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  color: rgb(var(--c));
  background: rgba(var(--c), 0.1);
  border: 1px solid rgba(var(--c), 0.42);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.22), 0 0 10px rgba(var(--c), 0.12);
  line-height: 1;
}
.ico-chip .line-ico {
  width: 55%;
  height: 55%;
}
.tint-gold   { --c: 240, 217, 164; }
.tint-yellow { --c: 250, 204, 21; }
.tint-blue   { --c: 56, 189, 248; }
.tint-green  { --c: 74, 222, 128; }
.tint-mint   { --c: 134, 239, 172; }
.ico-inline {
  width: 1.9em;
  height: 1.9em;
  margin-right: 0.55em;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.ico-bullet {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.9em;
  height: 1.9em;
}

/* ==========================================================================
   Pill buttons & corner system (design option 3B, Sep 2026)
   Buttons, tabs, selectors, tags and contact capsules are full pills (like
   the hero walkthrough button); fields 12px; cards 22px; glass panels ~20px.
   ========================================================================== */
:root {
  --border-radius-lg: 22px;
}
.btn,
.explorer-tabs,
.explorer-tab-btn,
.selector-btn,
.flat-btn,
.lookbook-explore-btn,
.amenity-badge,
.lightbox-badges .amenity-badge,
.residence-tag,
.past-proj-badge,
.cons-loc,
.coords-segmented-hotline,
.coords-email-box {
  border-radius: 999px;
}
.flat-btn {
  min-width: 42px;
}
.form-group input,
.form-group textarea,
.form-group select,
.config-pill {
  border-radius: 12px;
}
.new-contact-hero-section .glass-form .form-group input,
.new-contact-hero-section .glass-form .form-group textarea,
.glass-pills-selector .config-pill {
  border-radius: max(12px, 0.55em);
}
.spec-item-box,
.eco-card,
.consultant-card,
.past-project-card {
  border-radius: 14px;
}
.glass-form-card {
  border-radius: max(18px, 0.95em);
}
.glass-coords-horizontal {
  border-radius: max(18px, 0.95em) 0 0 max(18px, 0.95em);
}
.new-contact-hero-section.cs-stacked .glass-coords-horizontal {
  border-radius: max(18px, 0.95em);
}
@container coords (max-width: 19em) {
  .coords-segmented-hotline {
    border-radius: 0.7em;
  }
}
@media (max-width: 576px) {
  .explorer-tabs { border-radius: 18px; }
  .explorer-tab-btn { border-radius: 14px; }
}

/* ==========================================================================
   Soft section transitions (design option 5A, Sep 2026)
   Soft fades replace the hard cuts between sections.
   ========================================================================== */
:root {
  --fade-lg: clamp(110px, 15vh, 240px);
  --fade-md: clamp(80px, 11vh, 170px);
  --fade-sm: clamp(56px, 8vh, 130px);
}
/* Hero → Overview: settle the final frame into the dark joint */
.hero-bg-overlay {
  background:
    linear-gradient(0deg, #060a08 0%, rgba(6, 10, 8, 0.6) calc(var(--fade-md) * 0.35), rgba(6, 10, 8, 0) var(--fade-md)),
    radial-gradient(circle at center, rgba(12, 18, 15, 0.1) 0%, rgba(6, 10, 8, 0.95) 90%);
}
/* Green certification → Residences */
.residences-section {
  background:
    linear-gradient(180deg, #060a08 0%, rgba(13, 21, 16, 0) var(--fade-md)),
    var(--color-bg-dark);
}
/* Residences → Amenities (kept short so the sparkles banner sits on pure black) */
.amenities-section {
  background:
    linear-gradient(180deg, var(--color-bg-dark) 0%, rgba(6, 10, 8, 0) var(--fade-sm)),
    #060a08;
}
/* Amenities → Gallery */
.gallery-section {
  background:
    linear-gradient(180deg, #060a08 0%, rgba(13, 21, 16, 0) var(--fade-md)),
    var(--color-bg-dark);
}
/* Gallery → Walkthrough → Contact (fades live on the section's own overlay) */
#walkthrough::before {
  background:
    linear-gradient(180deg, var(--color-bg-dark) 0%, rgba(13, 21, 16, 0.75) calc(var(--fade-lg) * 0.35), rgba(13, 21, 16, 0) var(--fade-lg)),
    linear-gradient(0deg, #060a08 0%, rgba(6, 10, 8, 0.7) calc(var(--fade-lg) * 0.4), rgba(6, 10, 8, 0) var(--fade-lg)),
    rgba(12, 18, 15, 0.4);
}
/* Contact: short fade at the top joint and into the footer only —
   the render itself stays undimmed */
.new-contact-hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, #060a08 0%, rgba(6, 10, 8, 0.55) calc(var(--fade-sm) * 0.35), rgba(6, 10, 8, 0) var(--fade-sm)),
    linear-gradient(0deg, #060a08 0%, rgba(6, 10, 8, 0) var(--fade-sm));
}

/* ==========================================================================
   Trees-to-be-planted tile · "Forest light" (design option 4E, Sep 2026)
   Tree trunks and canopy silhouettes, drifting sun rays and falling leaves.
   ========================================================================== */
.gc-metric-forest {
  background: linear-gradient(180deg, #2a5a3c 0%, #1a4128 55%, #0e2617 100%);
  border-color: rgba(163, 207, 160, 0.38);
  border-left-color: #8fbf7f;
  box-shadow:
    0 6px 26px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(94, 140, 80, 0.2),
    inset 0 1.5px 3px rgba(220, 240, 210, 0.2);
}
.gc-metric-forest:hover {
  background: linear-gradient(180deg, #316643 0%, #1e4a2e 55%, #102b1a 100%);
  border-color: rgba(185, 216, 168, 0.75);
  border-left-color: #b9d8a8;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(143, 191, 127, 0.4),
    inset 0 2px 4px rgba(220, 240, 210, 0.3);
}
.gc-metric-forest .gc-metric-num {
  background: linear-gradient(135deg, #fbfbef 0%, #e6f1d8 40%, #b9d8a8 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
}
.gc-metric-forest .gc-metric-label {
  color: #eef5f0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
.woods-trees {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.woods-rays {
  position: absolute;
  inset: -20%;
  background: repeating-linear-gradient(112deg, rgba(255, 244, 205, 0.1) 0 9px, transparent 9px 30px);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 55% 20%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 55% 20%, #000 0%, transparent 75%);
  animation: woodsRays 9s ease-in-out infinite alternate;
}
@keyframes woodsRays {
  from { transform: translateX(-4%); opacity: 0.7; }
  to { transform: translateX(4%); opacity: 1; }
}
.woods-leaf {
  position: absolute;
  z-index: 2;
  width: clamp(6px, 0.45vw, 10px);
  height: clamp(6px, 0.45vw, 10px);
  border-radius: 0 70% 0 70%;
  background: #b9d8a8;
  opacity: 0;
  animation: woodsFall 7s linear infinite;
}
@keyframes woodsFall {
  0% { transform: translate(0, -10px) rotate(0); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.7; }
  100% { transform: translate(-30px, 150px) rotate(300deg); opacity: 0; }
}
.gc-metric-forest:hover .woods-rays {
  animation-duration: 5s;
}
@media (prefers-reduced-motion: reduce) {
  .woods-leaf { display: none; }
}

/* ==========================================================================
   Amenities: 16 cards (Chhath Puja Terrace Pool added after the Mandir, Oct 2026)
   4 columns (from 1600px) = 4 even rows; 2 columns = 8 rows.
   3 columns = 5 rows + 1: the last card sits in the middle column.
   ========================================================================== */
.amenity-card:nth-child(13) { --anim-delay: 0.06s; }
.amenity-card:nth-child(14) { --anim-delay: 0.12s; }
.amenity-card:nth-child(15) { --anim-delay: 0.18s; }
.amenity-card:nth-child(16) { --anim-delay: 0.24s; }
@media (min-width: 1024px) and (max-width: 1599px) {
  .amenities-section .grid-3-col > .amenity-card:nth-child(16):last-child {
    grid-column: 2;
  }
}
@media (min-width: 1600px) {
  .amenities-section .grid-3-col {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ==========================================================================
   4K walkthrough, used three ways (design options 7A · 7B · 7C, Sep 2026)
   ========================================================================== */

/* ---- 7C · Live backdrop -------------------------------------------------
   The still behind the player is now the first frame of the loop, so the
   switch from still to video is invisible. The video is position:fixed like
   the old background-attachment:fixed image, clipped to this section. */
#walkthrough {
  background-image: url("assets/video/walkthrough-dusk-poster-1920.webp");
}
@media (min-width: 1921px), (min-width: 1400px) and (min-resolution: 1.5dppx) {
  #walkthrough {
    background-image: url("assets/video/walkthrough-dusk-poster-2560.webp");
  }
}
.wt-live-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  /* 2px inside the section: the browser rounds a clipped fixed layer outwards, which
     otherwise shows a 1px bright line of video at the section's top edge */
  clip-path: inset(2px 0 2px 0);
  pointer-events: none;
}
.wt-live-bg video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.wt-live-bg.on video { opacity: 1; }
.wt-live-bg.off video { visibility: hidden; }

/* ---- 7B · Player + chapters layout --------------------------------------- */
.wt-stage {
  --wt-panel: clamp(300px, 17vw, 440px);
  --wt-gap: clamp(18px, 1.5vw, 36px);
  --wt-edge: clamp(20px, 2.4vw, 64px);
  /* player stays centred on the page; the chapter list sits at the far right edge.
     When the screen is too narrow for both, the player slides left just enough. */
  display: grid;
  grid-template-columns:
    minmax(var(--wt-edge), 1fr)
    auto
    minmax(calc(var(--wt-panel) + var(--wt-gap) + var(--wt-edge)), 1fr);
  align-items: stretch;
  position: relative;
  z-index: 1;
}
.wt-main {
  grid-column: 2;
  min-width: 0;
  width: min(58vw, calc((100vh - 20rem) * 1.7778), calc(100vw - 2 * var(--wt-edge) - var(--wt-panel) - var(--wt-gap) - 20px));
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 0.8vw, 18px);
}
.wt-main .video-container-wrapper {
  width: 100%;
  min-width: 0;
  margin: 0;
}

/* Timeline under the player */
.wt-timeline {
  position: relative;
  height: clamp(18px, 1.2vw, 26px);
}
.wt-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.wt-progress {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9f7d3a, #e0c07e);
  box-shadow: 0 0 10px rgba(224, 192, 126, 0.55);
  transition: width 0.4s linear;
}
.wt-tick {
  --d: clamp(10px, 0.62vw, 14px);
  position: absolute;
  top: 50%;
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(6, 10, 8, 0.85);
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.wt-tick:first-of-type { margin-left: 0; }
.wt-tick:hover,
.wt-tick:focus-visible,
.wt-tick.on {
  background: #e0c07e;
  box-shadow: 0 0 12px rgba(224, 192, 126, 0.9);
  transform: scale(1.25);
  outline: none;
}
.wt-tick::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(8, 14, 11, 0.82);
  border: 1px solid rgba(224, 192, 126, 0.45);
  color: #f3dfae;
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.wt-tick:hover::after,
.wt-tick:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Chapter panel: dark liquid glass so the text stays readable over the moving backdrop */
.wt-chapters {
  position: relative;
  contain: size;            /* never taller than the player: its height comes from the row */
  grid-column: 3;
  justify-self: end;
  margin-right: var(--wt-edge);
  width: var(--wt-panel);
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: clamp(10px, 0.8vw, 18px) clamp(8px, 0.6vw, 14px);
  border-radius: max(18px, 0.95em);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.01) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.03) 100%),
    rgba(8, 14, 11, 0.46);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(224, 192, 126, 0.32);
  border-top-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.18);
}
.wt-chapters::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 192, 126, 0.7), transparent);
}
.wt-chapters-kicker {
  display: block;
  margin: 0.15em 0 0.55em 0.55em;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-gold, #c5a059);
}
.wt-chapter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(10, minmax(0, 1fr));
  gap: 2px;
}
.wt-chapter-list li { min-height: 0; display: flex; }
.wt-chapter {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.6vw, 14px);
  padding: 3px 10px 3px 4px;
  border: 1px solid transparent;
  border-radius: max(12px, 0.7em);
  background: transparent;
  color: var(--color-text-light, #f5f8f6);
  font-family: var(--font-body, 'Outfit', sans-serif);
  text-align: left;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.wt-chapter:hover,
.wt-chapter:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  outline: none;
}
.wt-chapter.on {
  background: linear-gradient(90deg, rgba(197, 160, 89, 0.26), rgba(26, 92, 79, 0.28));
  border-color: rgba(224, 192, 126, 0.6);
}
.wt-chapter img {
  height: min(100%, 2.2rem);
  max-height: 100%;
  width: auto;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.wt-ch-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wt-ch-time {
  flex-shrink: 0;
  font-size: 0.74rem;
  font-weight: 600;
  color: #e0c07e;
  font-variant-numeric: tabular-nums;
}

/* Narrower desktop windows: chapters sit under the player as a scrollable strip */
@media (max-width: 1199px) {
  .wt-stage { display: flex; flex-direction: column; align-items: center; gap: var(--wt-gap); padding: 0 4%; }
  .wt-main { width: min(100%, calc((100vh - 22rem) * 1.7778)); min-width: min(100%, 640px); }
  .wt-chapters { width: min(100%, 980px); flex: 0 0 auto; contain: none; margin-right: 0; justify-self: auto; }
  .wt-chapter-list {
    display: flex;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .wt-chapter-list li { flex: 0 0 auto; }
  .wt-chapter { flex-direction: column; align-items: flex-start; gap: 6px; width: 150px; padding: 6px; }
  .wt-chapter img { width: 100%; height: auto; }
}

/* ---- 7A · Living amenity cards ------------------------------------------ */
.amenity-live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.amenity-img-holder .lookbook-img-gradient { z-index: 2; }
.amenity-card.is-live .amenity-live { opacity: 1; }
.amenity-live-hint {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.35s ease;
}
.amenity-live-hint {
  right: 10px;
  bottom: 10px;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(8, 14, 11, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.28);
  opacity: 0.9;
}
.amenity-live-hint svg { width: 12px; height: 12px; fill: #f3dfae; margin-left: 2px; }
.amenity-card.is-live .amenity-live-hint { opacity: 0; }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .amenity-live-hint { display: none; }
}

/* Responsive photos are <picture> (AVIF with WebP fallback); keep layout exactly as before */
.amenity-img-holder > picture,
.residence-img-holder > picture,
.gallery-item > picture,
.overview-full-wrapper > picture {
  display: contents;
}

/* ==========================================================================
   Green certification background (Sep 2026): the blur is baked into the video files
   (green-bg-soft-a/-b.mp4). Every frame was pushed through this exact browser blur
   (blur + saturate 115%) and captured, so it looks the same as the live effect, but the
   browser no longer re-blurs every frame. index.js picks a/b by screen size. The
   gradient overlay stays.
   ========================================================================== */
.green-cert-bg-overlay {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Enquiry form spam trap (Sep 2026): invisible to people, filled in by bots. */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Walkthrough (Sep 2026): "Virtual Tour" is the section's only heading. It is an <h2> for screen
   readers but keeps the gold kicker look it had as a <span>. */
.section-header h2.wt-heading {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: clamp(4px, 0.35vw, 7px);
  line-height: normal;
  color: var(--color-gold);
}

/* ==========================================================================
   Aria concierge v2 (Sep 2026): action buttons under answers, links in replies
   ========================================================================== */
.chat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.chat-actions .chat-chip,
a.chat-chip {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 1;
  white-space: normal;
  text-align: left;
  line-height: 1.25;
}
.chat-action {
  background: rgba(197, 160, 89, 0.1);
  border-color: rgba(197, 160, 89, 0.38);
}
.bubble-content p a,
.voice-reply-text a {
  color: var(--color-gold-light);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.voice-reply-card .chat-actions {
  justify-content: center;
  margin-top: 10px;
}

/* ==========================================================================
   Walkthrough fills the screen like the hero (Sep 2026)
   The section is exactly one screen tall: the heading sits just under the navbar, and the
   player grows until it meets either the chapter list (width) or the timeline (height).
   Nav links land on the section's top edge, so it shows full-screen with nothing peeking.
   ========================================================================== */
#walkthrough {
  --wt-top: calc(var(--nav-h) + clamp(10px, 2vh, 28px));
  /* keeps the chapter list clear of the round chat button (62px, 32px from the bottom) */
  --wt-bottom: 106px;
  /* everything in the column that is not the player: padding, heading block, timeline */
  --wt-chrome: calc(var(--wt-top) + var(--wt-bottom) + 2.4rem + clamp(26px, 2.6vw, 56px)
                    + clamp(18px, 1.2vw, 26px) + clamp(10px, 0.8vw, 18px) + 10px);
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--wt-top) 0 var(--wt-bottom);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#walkthrough > .container { flex: 0 0 auto; }
#walkthrough .section-header { margin-bottom: clamp(26px, 2.6vw, 56px); }
#walkthrough > .wt-stage { flex: 0 0 auto; width: 100%; }
#walkthrough .wt-main {
  width: min(
    calc(100vw - 2 * var(--wt-edge) - var(--wt-panel) - var(--wt-gap) - 20px),
    calc((100vh - var(--wt-chrome)) * 1.7778)
  );
  width: min(
    calc(100vw - 2 * var(--wt-edge) - var(--wt-panel) - var(--wt-gap) - 20px),
    calc((100svh - var(--wt-chrome)) * 1.7778)
  );
}
#walkthrough .wt-main .video-container-wrapper { min-width: 0; }
/* Narrower windows: the chapter strip sits under the player, so the player leaves room for it */
@media (max-width: 1199px) {
  #walkthrough .wt-main {
    width: min(100%, calc((100vh - var(--wt-chrome) - 12.5rem) * 1.7778));
    width: min(100%, calc((100svh - var(--wt-chrome) - 12.5rem) * 1.7778));
    min-width: min(100%, 520px);
  }
}

/* ==========================================================================
   Aria, the concierge: premium look (Sep 2026, owner's pick: a mix of options 9A, 9B and 9C)
   - 9C: a full-height glass side panel that always fits the screen (13" laptops included)
   - 9B: a small dusk-photo header with a time-of-day greeting; the gold-ringed ESV monogram
   - 9A: liquid glass like the walkthrough panels, gold message bubbles, the "Ask Aria" pill
   ========================================================================== */
.chatbot-widget {
  --aria-glass: linear-gradient(160deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.015) 40%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.035) 100%), rgba(8, 14, 11, 0.74);
  --aria-gold: linear-gradient(135deg, #f0d69a 0%, #c5a059 55%, #9c7a3c 100%);
  --aria-ring: conic-gradient(from 210deg, #8a6a30, #f3dfae, #c5a059, #6b5024, #e0c07e, #8a6a30);
  --aria-mono: url("assets/aria/esv-mono-96.webp");
  bottom: 32px;
  right: 32px;
}

/* ---- the button: gold-ringed monogram + "Ask Aria" ---- */
.chatbot-widget .chatbot-toggle {
  width: auto;
  height: 58px;
  padding: 0 22px 0 6px;
  gap: 12px;
  border-radius: 999px;
  background: var(--aria-glass);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(224, 192, 126, 0.5);
  border-top-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 14px 34px -8px rgba(0, 0, 0, 0.65), 0 0 24px rgba(224, 192, 126, 0.18);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, opacity 0.25s ease;
}
.chatbot-widget .chatbot-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -8px rgba(0, 0, 0, 0.7), 0 0 34px rgba(224, 192, 126, 0.3);
}
.chatbot-widget .chatbot-toggle:focus-visible { outline: 2px solid #e0c07e; outline-offset: 3px; }
.chatbot-widget .chat-pulse { display: none; }
.aria-trig-mono,
.chatbot-box .chat-avatar {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  padding: 2px;
  background: var(--aria-ring);
  box-shadow: 0 0 16px rgba(224, 192, 126, 0.28);
}
.aria-trig-mono::before,
.chatbot-box .chat-avatar::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--aria-mono) 52% 52% / 70% auto no-repeat, radial-gradient(circle at 40% 30%, #174035, #081a15 72%);
}
.aria-trig-dot,
.chatbot-box .avatar-status-dot {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #3ddc84;
  border: 2px solid #0b1511;
  box-shadow: 0 0 8px rgba(61, 220, 132, 0.6);
}
.aria-trig-text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.15; }
.aria-trig-text b {
  font-family: var(--font-headings);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #f3dfae;
  white-space: nowrap;
}
.aria-trig-text small {
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  color: rgba(238, 242, 239, 0.62);
  white-space: nowrap;
}
/* the panel has its own close button, so the pill steps aside while it is open */
.chatbot-widget:has(.chatbot-box.open) .chatbot-toggle {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

/* ---- the panel: full height at the right edge, liquid glass ---- */
.chatbot-widget .chatbot-box {
  position: fixed;
  top: 14px;
  right: 14px;
  bottom: 14px;
  width: clamp(360px, 27vw, 420px);
  height: auto;
  max-height: none;
  border-radius: 26px;
  background: var(--aria-glass);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid rgba(224, 192, 126, 0.34);
  border-top-color: rgba(255, 255, 255, 0.4);
  box-shadow: -30px 0 80px -20px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.14);
  transform: translateX(28px) scale(0.98);
  transform-origin: right center;
  z-index: 1600;
}
.chatbot-widget .chatbot-box.open { transform: none; }

/* header: a small dusk photo with the greeting */
.chatbot-box .chat-header.aria-hero {
  position: relative;
  gap: 12px;
  justify-content: flex-start;
  padding: 16px 14px 16px 16px;
  min-height: 86px;
  background:
    linear-gradient(180deg, rgba(6, 10, 8, 0.25) 0%, rgba(6, 10, 8, 0.35) 45%, rgba(8, 14, 11, 0.94) 100%),
    url("assets/aria/aria-header-900.webp") 60% 42% / cover;
  border-bottom: 1px solid rgba(224, 192, 126, 0.18);
}
.chatbot-box .chat-header.aria-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 30px;
  right: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 192, 126, 0.85), transparent);
}
.chatbot-box .chat-avatar { width: 44px; height: 44px; }
.chatbot-box .chat-header-text { flex: 1; min-width: 0; }
.chatbot-box .chat-header-text h4 {
  margin: 0;
  font-family: var(--font-headings);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
.chatbot-box .chat-status {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: rgba(243, 223, 174, 0.88);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.chatbot-box .chat-close-btn {
  flex-shrink: 0;
  align-self: flex-start;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(6, 10, 8, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.chatbot-box .chat-close-btn svg { fill: rgba(255, 255, 255, 0.85); }

/* Chat / Voice switch */
.aria-modes { padding: 12px 16px 4px; flex-shrink: 0; }
.aria-modes .mode-toggle-pill {
  display: flex;
  width: 100%;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.aria-modes .mode-pill-btn {
  flex: 1;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
}
.aria-modes .mode-pill-btn.active {
  color: #1a1408;
  background: var(--aria-gold);
  box-shadow: 0 2px 12px rgba(197, 160, 89, 0.35);
}
.aria-modes .mode-pill-btn.active svg { fill: #1a1408; }

/* messages */
.chatbot-box .chat-messages { padding: 14px 16px 10px; gap: 12px; }
.chatbot-box .bubble-avatar { display: none; }
.chatbot-box .bubble-content { max-width: 88%; }
.chatbot-box .bubble-sender {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.chatbot-box .chat-bubble.user .bubble-sender { display: none; }
.chatbot-box .bubble-content p,
.chatbot-box .bubble-content > span:not(.bubble-sender):not(.bubble-time),
.chatbot-box .typing-dots {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-left: 2px solid rgba(224, 192, 126, 0.75);
  border-radius: 6px 18px 18px 18px;
  padding: 11px 14px;
  font-size: 0.86rem;
}
.chatbot-box .chat-bubble.user .bubble-content p,
.chatbot-box .chat-bubble.user .bubble-content > span:not(.bubble-sender):not(.bubble-time) {
  background: var(--aria-gold);
  border: none;
  border-radius: 18px 18px 6px 18px;
  color: #1a1408;
  font-weight: 500;
}
.chatbot-box .chat-bubble.user .bubble-time { text-align: right; }
.chatbot-box .bubble-time { color: rgba(255, 255, 255, 0.32); }
.chatbot-box .chat-actions .chat-chip,
.chatbot-box a.chat-chip {
  border-radius: 999px;
  color: #f3dfae;
  border-color: rgba(224, 192, 126, 0.45);
  background: rgba(224, 192, 126, 0.08);
}

/* quick chips + input */
.chatbot-box .chat-suggested-chips {
  padding: 8px 16px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
}
.chatbot-box .chat-suggested-chips .chat-chip {
  border-radius: 999px;
  color: #e5c98d;
  border: 1px solid rgba(197, 160, 89, 0.3);
  background: rgba(197, 160, 89, 0.07);
}
.chatbot-box .chat-suggested-chips .chat-chip:hover { background: rgba(197, 160, 89, 0.18); color: #fff; }
.chatbot-box .chat-input-area {
  gap: 10px;
  padding: 8px 14px 16px;
  background: transparent;
  border-top: none;
}
.chatbot-box .chat-input-area input {
  height: 46px;
  border-radius: 999px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(224, 192, 126, 0.28);
}
.chatbot-box .chat-input-area input:focus { border-color: rgba(224, 192, 126, 0.7); box-shadow: 0 0 0 3px rgba(224, 192, 126, 0.12); }
.chatbot-box .chat-send-btn {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  background: var(--aria-gold);
  box-shadow: 0 6px 18px rgba(197, 160, 89, 0.35);
}
.chatbot-box .chat-send-btn svg { fill: #1a1408; }

/* voice mode */
.chatbot-box .voice-body {
  justify-content: center;
  justify-content: safe center;
}
.chatbot-box .voice-orb-btn {
  background: radial-gradient(circle at 35% 30%, #2a7a66, #0c3d33 60%, #082a23);
  border: 1.5px solid rgba(224, 192, 126, 0.6);
  box-shadow: 0 0 0 6px rgba(224, 192, 126, 0.07), 0 0 40px rgba(224, 192, 126, 0.26);
}
.chatbot-box .vor { border-color: rgba(224, 192, 126, 0.3); }
.chatbot-box .voice-hint-text { color: rgba(243, 223, 174, 0.75); letter-spacing: 0.08em; }
.chatbot-box .voice-reply-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(224, 192, 126, 0.22);
  border-left: 2px solid rgba(224, 192, 126, 0.75);
  border-radius: 6px 16px 16px 16px;
}
.chatbot-box .voice-reply-label { color: #e0c07e; letter-spacing: 0.22em; }
.chatbot-box .voice-footer { background: transparent; }

/* short screens: tighter spacing, smaller orb (the panel itself always fits) */
@media (max-height: 700px) {
  .chatbot-widget { bottom: 20px; right: 20px; }
  .chatbot-widget .chatbot-toggle { height: 52px; padding-right: 18px; }
  .aria-trig-mono { width: 42px; height: 42px; }
  .chatbot-widget .chatbot-box { top: 10px; bottom: 10px; right: 10px; }
  .chatbot-box .chat-header.aria-hero { min-height: 72px; padding: 12px 12px 12px 14px; }
  .chatbot-box .chat-avatar { width: 40px; height: 40px; }
  .chatbot-box .chat-header-text h4 { font-size: 1.02rem; }
  .aria-modes { padding-top: 8px; }
  .chatbot-box .chat-messages { padding: 10px 14px 8px; gap: 10px; }
  .chatbot-box .voice-body { gap: 10px; padding: 14px 16px; }
  .chatbot-box .voice-orb-container { width: 104px; height: 104px; }
  .chatbot-box .voice-orb-btn { width: 72px; height: 72px; }
  .chatbot-box .voice-orb-btn svg { width: 28px; height: 28px; }
}
/* narrow windows (desktop page forced onto a small screen) */
@media (max-width: 576px) {
  .chatbot-widget .chatbot-box {
    left: 8px !important;
    right: 8px !important;
    top: 8px !important;
    bottom: 8px !important;
    width: auto !important;
    height: auto !important;
  }
  .chatbot-widget .chatbot-toggle { width: auto !important; height: 52px !important; }
  .aria-trig-text small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chatbot-widget .chatbot-box,
  .chatbot-widget .chatbot-toggle { transition: opacity 0.2s ease; transform: none; }
}

/* ==========================================================================
   Round 18 · 10A "Flat gold, no glow" (owner's pick, 29 Sep 2026)
   Removes what read as "AI-made": metallic gradient fills, gradient text,
   gold glows and endlessly looping shimmers. Same colours, same layout.
   To undo, delete this block.
   ========================================================================== */

/* 1. One flat gold instead of the 3-stop metallic gradient.
      Every button, tag, divider and gold word that used the gradient goes flat. */
:root {
  --color-gold-gradient: linear-gradient(#c5a059, #c5a059);
  --shadow-gold: none;
}
.chatbot-widget {
  --aria-gold: linear-gradient(#c5a059, #c5a059);
  --aria-ring: linear-gradient(#c5a059, #c5a059);
}

/* 2. Buttons: flat fill, a plain shadow for depth, no gold halo */
.btn-primary,
.explorer-tab-btn.active,
.flat-btn.active,
.mode-pill-btn.active,
.aria-modes .mode-pill-btn.active,
.chat-send-btn,
.chatbot-box .chat-send-btn { box-shadow: none !important; }
.btn-primary:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important; filter: none; background: #d1ae6c; }
.play-btn-circle { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important; }
.video-overlay:hover .play-btn-circle { box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5) !important; }
.config-pill.active,
.glass-pills-selector .config-pill.active {
  background: rgba(197, 160, 89, 0.16) !important;
  box-shadow: none !important;
}
.selector-btn.active { box-shadow: none !important; }

/* 3. Gradient text becomes solid colour */
.gold-text { background: none !important; -webkit-text-fill-color: currentColor !important; color: #c9a760 !important; }
.gc-metric-num,
.gc-platinum-word,
.gc-metric-zero {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  animation: none !important;
}
.gc-metric-water .gc-metric-num { color: #ffffff !important; }
.gc-metric-forest .gc-metric-num { color: #f3f7ee !important; }
.gc-metric-clean .gc-metric-num { color: #ffffff !important; }
.gc-metric-platinum .gc-metric-num,
.gc-platinum-word { color: #e3cc93 !important; }

/* 4. No glows: gold halos on text and boxes are removed; dark legibility shadows stay */
.hero-title { animation: none !important; }
.slide2-poetic-heading { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55) !important; }
.floating-metric-pill { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6) !important; }
.metric-number { text-shadow: none !important; }
.slide2-poetic-badge { box-shadow: none !important; }
.gc-metric-platinum { box-shadow: none !important; }
.amenity-card { box-shadow: 0 12px 35px rgba(0, 0, 0, 0.65); }
.glass-pills-selector .config-pill.active .pill-title,
.pill-title { text-shadow: none !important; }
.sky-pedestal-pip, .sky-logo-wordmark { text-shadow: none !important; }
.sky-logo-aura-glow { display: none !important; }
.chatbot-widget .chatbot-toggle { box-shadow: 0 14px 34px -8px rgba(0, 0, 0, 0.65) !important; }
.aria-trig-mono, .chatbot-box .chat-avatar { box-shadow: none !important; padding: 1.5px !important; }
.aria-trig-dot, .chatbot-box .avatar-status-dot { box-shadow: none !important; }

/* 5. Stop the endless shimmer / pulse loops (one-time entrance animations stay) */
.divider-animate.in-view { animation: none !important; }
.sky-logo-metallic-sheen::after { display: none !important; }

/* 6. The green pillar cards: a flat tint instead of a 3-stop gradient */
.gc-pillar-compact { background: rgba(8, 44, 36, 0.45) !important; }
.gc-pillar-compact:hover { background: rgba(10, 58, 48, 0.58) !important; }

/* ==========================================================================
   Round 20 · 12A "Capitals only for the big titles" + 13.5 (owner's picks, 29 Sep 2026)
   Cinzel stays for the section titles, the hero and the logo. Card names,
   captions, the menu and small labels use the body font in normal case.
   To undo, delete this block.
   ========================================================================== */
.amenity-header-row h4,
.gc-pillar-compact h4,
.residence-details h3,
.tab-pane-header h3,
.spec-item-box h4,
.eco-card h4,
.gallery-overlay span,
.glass-form-title,
.coords-h-title {
  font-family: var(--font-body) !important;
  text-transform: none !important;
  letter-spacing: 0.005em !important;
  font-weight: 500 !important;
}
.amenity-header-row h4 { font-size: 1.08rem !important; color: #efe6d2 !important; }
.gc-pillar-compact h4 { font-size: 0.98rem !important; }
.residence-details h3 { font-size: 1.5rem !important; }
.gallery-overlay span { font-size: 1.15rem !important; }
.glass-form-title { font-size: 1.9em !important; font-weight: 400 !important; }
.coords-h-title { font-size: 1.02rem !important; }
.nav-link { text-transform: none !important; letter-spacing: 0.02em !important; font-size: 0.86rem !important; }
.lookbook-explore-btn { text-transform: none !important; letter-spacing: 0.01em !important; font-size: 0.74rem !important; }
.metric-label,
.floating-metric-pill .metric-label,
.gc-metric-label { text-transform: none !important; letter-spacing: 0.02em !important; }
.video-overlay-text { font-family: var(--font-body) !important; text-transform: none !important; letter-spacing: 0.02em !important; font-size: 1.05rem !important; }
.footer-links-col h4 { text-transform: none !important; letter-spacing: 0.02em !important; font-family: var(--font-body) !important; font-weight: 500 !important; }
.form-label-static, label.glass-label { text-transform: none !important; letter-spacing: 0.01em !important; }

/* 13.5 · the four overview lines as plain small capitals, without the glass pill */
.slide2-poetic-badge {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Round 23 (30 Sep 2026): lightbox photos slide instead of swapping abruptly (js/lightbox-motion.js) */
.lightbox-content { overflow-x: hidden; touch-action: pan-y; }
.lightbox-img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }

/* Round 24 (30 Sep 2026): chat mic, as on the phone. Tap, ask one question, and Aria answers in writing and aloud. */
.chatbot-box .chat-mic-btn {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(224, 192, 126, 0.35);
  background: rgba(197, 160, 89, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.chatbot-box .chat-mic-btn[hidden] { display: none; }
.chatbot-box .chat-mic-btn svg { width: 19px; height: 19px; fill: #e0c07e; }
.chatbot-box .chat-mic-btn:hover { background: rgba(197, 160, 89, 0.18); border-color: rgba(224, 192, 126, 0.65); }
.chatbot-box .chat-mic-btn:focus-visible { outline: 2px solid #e0c07e; outline-offset: 2px; }
.chatbot-box .chat-mic-btn.listening { background: #c5a059; border-color: #c5a059; animation: ariaMicPulse 1.2s ease-in-out infinite; }
.chatbot-box .chat-mic-btn.listening svg { fill: #1a1408; }
.chatbot-box .chat-mic-btn.speaking { border-color: rgba(224, 192, 126, 0.8); background: rgba(197, 160, 89, 0.2); }
@keyframes ariaMicPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.45); } 50% { box-shadow: 0 0 0 7px rgba(197, 160, 89, 0); } }
@media (prefers-reduced-motion: reduce) { .chatbot-box .chat-mic-btn.listening { animation: none; } }
.chatbot-box .chat-input-area input { min-width: 0; }

/* ==========================================================================
   Request form: "Request Submitted" (Oct 2026)
   After a successful send the card's header and form give way to this panel,
   at the same card size, with the brochure download below.
   ========================================================================== */
.glass-form-card.is-done > .glass-form-header,
.glass-form-card.is-done > .glass-form { display: none; }
.glass-form-card.is-done { display: flex; flex-direction: column; justify-content: center; }
.request-done[hidden] { display: none; }
.request-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.6em 0.2em;
  animation: requestDoneIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes requestDoneIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.request-done-seal {
  width: 3.6em;
  height: 3.6em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 1.1em;
  border: 1px solid rgba(224, 192, 126, 0.75);
  background: radial-gradient(circle at 50% 35%, rgba(224, 192, 126, 0.28), rgba(224, 192, 126, 0.06) 70%);
  box-shadow: 0 0 0 0.45em rgba(224, 192, 126, 0.08), 0 0 28px rgba(224, 192, 126, 0.28);
}
.request-done-seal svg {
  width: 1.7em;
  height: 1.7em;
  fill: none;
  stroke: #f3dfae;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  animation: requestTick 0.6s 0.25s ease-out forwards;
}
@keyframes requestTick { to { stroke-dashoffset: 0; } }
.request-done-kicker {
  margin-bottom: 0.45em;
  font-size: 0.75em;
  letter-spacing: 0.26em;
}
.request-done-title { outline: none; margin-bottom: 0.35em; }
.request-done-desc { max-width: 19.5em; margin: 0 auto 1.4em; }
.request-brochure-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-size: 0.95em;
  padding: 0.85em 1.2em;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-decoration: none;
}
.request-dl-ico {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.request-brochure-note {
  margin: 0.8em 0 0;
  font-size: 0.82em;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.request-done-again {
  margin-top: 1em;
  background: none;
  border: 0;
  padding: 0.3em 0.4em;
  font: inherit;
  font-size: 0.8em;
  letter-spacing: 0.04em;
  color: rgba(224, 192, 126, 0.85);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}
.request-done-again:hover { color: #f3dfae; }
@media (prefers-reduced-motion: reduce) {
  .request-done, .request-done-seal svg { animation: none; stroke-dashoffset: 0; }
}

/* About the Developer (contact card, Oct 2026). data-pending = shown but not clickable (no address yet) */
.coords-dev-arrow { font-size: 0.95em; opacity: 0.75; margin-left: 0.1em; }
.coords-dev-link[data-pending] { pointer-events: none; cursor: default; }

/* Developer logo under the footer's Developer column (Oct 2026): opens the Estate Buildcon website */
.footer-links-col a.dev-logo-link {
  display: block;
  width: clamp(120px, 9vw, 200px);
  margin: 22px 0 0;
  border-radius: 4px;
  line-height: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease;
}
.footer-links-col a.dev-logo-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(224, 192, 126, 0.55);
}
.dev-logo-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}
@media (max-width: 767px) {
  .footer-links-col a.dev-logo-link { width: 160px; }
}

/* Enquiry form checks (Oct 2026, js/contact-checks.js): a field with a mistake, and the "Did you mean …?" buttons */
.glass-form input[aria-invalid="true"],
.glass-form textarea[aria-invalid="true"],
.new-contact-hero-section .glass-form .form-group input[aria-invalid="true"],
.new-contact-hero-section .glass-form .form-group textarea[aria-invalid="true"] {
  border-color: rgba(224, 108, 117, 0.9) !important;
  box-shadow: 0 0 0 1px rgba(224, 108, 117, 0.45) !important;
}
.form-feedback.notice {
  color: var(--color-gold-light, #e0c07e);
  opacity: 1;
}
.form-feedback-btn {
  display: inline-block;
  margin: 6px 3px 0;
  padding: 0.3em 0.9em;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.95em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.form-feedback-btn:hover,
.form-feedback-btn:focus-visible {
  background: rgba(224, 192, 126, 0.16);
  outline: none;
}

/* ==========================================================================
   Request form: "couldn't send" panel (Oct 2026)
   Shown in place of the form when a request can't be sent (no connection,
   server or email trouble): our phone numbers and email, the brochure, and
   "Try again". Same look as "Request Submitted".
   ========================================================================== */
.request-failed-seal { width: 3.2em; height: 3.2em; margin-bottom: 0.95em; }
.request-failed-seal svg {
  width: 1.45em;
  height: 1.45em;
  stroke-width: 1.7;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: none;
}
.request-failed .request-done-title { text-wrap: balance; }
.request-failed .request-done-desc { max-width: 20em; margin-bottom: 1.1em; }
.request-contacts {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  width: 100%;
  margin: 0 0 1.1em;
}
.request-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.62em 0.9em;
  border: 1px solid rgba(224, 192, 126, 0.45);
  border-radius: var(--border-radius-sm);
  background: rgba(255, 255, 255, 0.04);
  color: #f3dfae;
  font-size: 0.9em;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.request-contact:hover,
.request-contact:focus-visible { background: rgba(224, 192, 126, 0.12); border-color: rgba(224, 192, 126, 0.85); color: #fff3d6; }
.request-contact svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.request-brochure-size {
  margin: 0.55em 0 0;
  font-size: 0.78em;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.request-brochure-size[hidden],
.request-brochure-note[hidden] { display: none; }

/* "*Isometric view shown for EVEN floors." under the floor plan (Oct 2026): the same small italic
   as "*All areas in Sq. Ft." under the table */
.iso-figure { width: 100%; }
.iso-floor-note {
  margin: 6px 0 0;
  text-align: right;
  font-size: 0.6rem;
  font-style: italic;
  line-height: 1.4;
  text-wrap: balance;
  color: var(--color-text-muted);
}

/* Backgrounds further down the page wait until the reader gets near them or the background loader reaches
   them (js/desktop.js adds .bg-ready), so the hero film has the connection to itself at the start (Oct 2026) */
#walkthrough:not(.bg-ready),
.new-contact-hero-section:not(.bg-ready) { background-image: none; }
.new-contact-hero-section:not(.bg-ready) .sky-logo-metallic-sheen { display: none; }