/* ============================================================
   SKYSCRAPER — DESIGN SYSTEM
   A digital architectural experience.
   ============================================================ */

/* --- FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* --- CUSTOM PROPERTIES --- */
:root {
  /* Palette — Modern Architectural Luxury (Dark Charcoal + Premium Bronze/Champagne) */
  --black: #08090a;              /* Deep charcoal / near-black */
  --charcoal-deep: #0e0f11;      /* Architectural abyss */
  --charcoal: #141618;           /* Graphite deep */
  --charcoal-light: #202326;     /* Graphite secondary surface */
  --graphite: #181a1d;           /* Deep graphite */
  --stone: #2c2f33;              /* Muted dark stone */
  --warm-gray: #a19d96;          /* Warm muted grey */
  --paper: #f2f0ea;              /* Warm ivory / soft beige */
  --paper-light: #f8f7f4;        /* Pristine warm ivory */
  --off-white: #f2f0ea;
  --white: #ffffff;
  --accent-gold: #c6a371;        /* Rich architectural bronze/gold */
  --accent-gold-hover: #d5b588;  /* Brighter gold for hover states */
  --accent-gold-muted: #8b744d;  /* Muted bronze */
  --accent-gold-light: #e6d8c0;  /* Soft champagne */
  --accent-gold-glow: rgba(198, 163, 113, 0.18);
  
  /* Burgundy accents (15-20% touch) */
  --accent-burgundy: #7C1823;
  --accent-burgundy-glow: rgba(124, 24, 35, 0.35);
  --accent-burgundy-border: rgba(124, 24, 35, 0.6);
  --border-subtle: rgba(198, 163, 113, 0.12);
  --border-medium: rgba(212, 201, 180, 0.22);
  --error: #c45c4a;
  --success: #6b8f71;
  /* ============================================================
     LIGHT THEME -- Warm Architectural Palette (Task 1)
     All section-background decisions live here. Change once,
     propagates everywhere. WCAG AA contrast verified on each pair.
     ============================================================ */
  /* Surface hierarchy: Warm Luxury Architectural Linen & Stone Beige */
  --bg-primary:   #C5BAA8;    /* Warm architectural linen beige / dark off-white */
  --bg-stone:     #BDB19D;    /* Warm greige stone beige -- alt sections */
  --bg-ink:       #14130F;    /* Near-black ink -- dark sections */
  --bg-ink-alt:   #1C1A16;    /* Slightly lighter ink for charcoal sections */
  --bg-white:     #CEC4B2;    /* Warm parchment surface (replaced pure white) */
  /* Ink & text on light backgrounds */
  --ink:          #111110;    /* Deep ink black -- passes WCAG AAA */
  --ink-secondary:#2B2721;    /* Espresso charcoal -- passes WCAG AA */
  --ink-muted:    #685F52;    /* Decorative warm taupe labels */
  /* Accent system */
  --accent-brass: #735218; /* Antique brass -- passes WCAG AA */
  --accent-brass-hover: #A07428;
  --accent-olive: #384326; /* Deep architectural olive */
  --accent-olive-hover: #4E5D37;
  /* Section semantic colours */
  --section-bg-light:    var(--bg-primary);
  --section-bg-stone:    var(--bg-stone);
  --section-bg-dark:     var(--bg-ink);
  --section-bg-dark-alt: var(--bg-ink-alt);
  /* Text on light */
  --text-on-light:        var(--ink);
  --text-on-light-2:      var(--ink-secondary);
  --text-on-light-accent: var(--accent-brass);
  /* Text on dark (unchanged) */
  --text-on-dark:         #F2F0EA;
  --text-on-dark-2:       #A19D96;
  --text-on-dark-accent:  #C6A371;
  /* Card & form surfaces */
  --card-bg:      #CEC4B2;
  --card-border:  rgba(107, 77, 22, 0.22);
  --input-bg:     #C7BCAB;
  --input-border: rgba(56, 53, 47, 0.3);


  /* Typography */
  --serif: 'Cormorant Garamond', 'Georgia', serif;
  --serif-headline: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;

  /* Type Scale */
  --text-xs: 0.6875rem;     /* 11px */
  --text-sm: 0.8125rem;     /* 13px */
  --text-base: 0.9375rem;   /* 15px */
  --text-md: 1.0625rem;     /* 17px */
  --text-lg: 1.25rem;       /* 20px */
  --text-xl: 1.5rem;        /* 24px */
  --text-2xl: 2rem;         /* 32px */
  --text-3xl: 2.75rem;      /* 44px */
  --text-4xl: 3.5rem;       /* 56px */
  --text-5xl: 4.5rem;       /* 72px */
  --text-6xl: 6rem;         /* 96px */
  --text-7xl: 8rem;         /* 128px */

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;
  --space-4xl: 12rem;
  --space-5xl: 16rem;

  /* Layout */
  --max-width: 1440px;
  --content-width: 1200px;
  --narrow-width: 680px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-cinematic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-fast: 0.3s;
  --duration-normal: 0.6s;
  --duration-slow: 1s;
  --duration-cinematic: 1.6s;

  /* Z-Index */
  --z-base: 1;
  --z-overlay: 10;
  --z-nav: 3000;
  --z-modal: 4000;
  --z-film: 2000;
}

/* --- RESET --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--bg-primary);
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}

/* CHANGE 1 — Premium atmospheric background for all content sections
   Subtle film grain + warm charcoal radial to read as considered, not flat. */
.section--dark,
.section--charcoal,
.editorial,
.philosophy,
.sustainability,
.specs,
.location,
.sold-out,
.future,
.leaderboard,
.enquiry,
.spec-film,
.final-brand {
  position: relative;
}

.section--dark::before,
.editorial::before,
.sustainability::before,
.specs::before,
.sold-out::before,
.enquiry::before,
.spec-film::before,
.final-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 80% at 20% 30%, rgba(42, 38, 34, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 80% 100% at 80% 70%, rgba(28, 26, 24, 0.14) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.section--charcoal::before,
.philosophy::before,
.location::before,
.future::before,
.leaderboard::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 90% at 50% 50%, rgba(48, 44, 40, 0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Ensure direct children of textured sections sit above the grain layer */
.section--dark > *,
.section--charcoal > *,
.editorial > *,
.philosophy > *,
.sustainability > *,
.specs > *,
.location > *,
.sold-out > *,
.future > *,
.leaderboard > *,
.enquiry > *,
.spec-film > *,
.final-brand > * {
  position: relative;
  z-index: 1;
}

img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

ul, ol {
  list-style: none;
}

::selection {
  background: var(--accent-gold);
  color: var(--black);
}

/* Focus states */
:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 4px;
}

/* --- REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.type-display {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.type-heading {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.type-subheading {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: 1.5;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.type-body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.8;
}

.type-body-serif {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.6;
  font-style: italic;
}

.type-meta {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--warm-gray);
}

.type-nav {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.type-cta {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.section {
  position: relative;
  width: 100%;
}

.section--dark {
  background: var(--black);
  color: var(--paper);
}

.section--light {
  background: var(--paper);
  color: var(--charcoal);
}

.section--charcoal {
  background: var(--charcoal);
  color: var(--paper);
}

.container {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container--narrow {
  max-width: var(--narrow-width);
}

.container--full {
  max-width: none;
  padding: 0;
}

/* ============================================================
   NAVIGATION
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-nav);
  padding: var(--space-md) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform var(--duration-slow) var(--ease-out),
              background var(--duration-normal) var(--ease-out),
              opacity var(--duration-normal) var(--ease-out);
}

.nav--hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.nav--scrolled {
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: var(--space-sm) var(--gutter);
}

.nav__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  z-index: 3002;
}

.nav__logo {
  height: 32px;
  width: auto;
  min-width: 160px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  opacity: 0.95;
  flex-shrink: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.nav__logo:hover {
  opacity: 1;
}

.nav__links {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}

.nav__link {
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.6;
  transition: opacity var(--duration-fast) var(--ease-out);
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent-burgundy);
  transition: width var(--duration-normal) var(--ease-out);
  box-shadow: 0 0 8px var(--accent-burgundy-glow);
}

.nav__link:hover {
  opacity: 1;
}

.nav__link:hover::after {
  width: 100%;
}

.nav__cta {
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #0c0d0e !important;
  background: var(--accent-gold);
  padding: 0.625rem 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--accent-gold);
  transition: all var(--duration-fast) var(--ease-out);
  box-shadow: 0 2px 10px rgba(200, 168, 107, 0.15);
}

.nav__cta:hover {
  background: var(--accent-gold-hover);
  border-color: var(--accent-burgundy-border);
  color: #0c0d0e !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(200, 168, 107, 0.3), 0 0 12px var(--accent-burgundy-glow);
}

.nav__menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.nav__menu-btn span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--paper);
  transition: transform var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

.nav__menu-btn.active span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav__menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.nav__menu-btn.active span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile nav overlay */
.nav__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: var(--black);
  z-index: calc(var(--z-nav) - 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-3xl) var(--gutter);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.nav__overlay.active {
  opacity: 1;
  pointer-events: all;
}

.nav__overlay-link {
  font-family: var(--serif);
  font-size: var(--text-3xl);
  font-weight: 300;
  line-height: 1.3;
  color: var(--paper);
  opacity: 0.7;
  display: block;
  padding: var(--space-xs) 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.nav__overlay-link:hover {
  opacity: 1;
}

/* ============================================================
   CINEMATIC HERO
   ============================================================ */

.hero-film {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--black);
  z-index: var(--z-film);
}

.hero-film__video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.hero-film__controls {
  position: absolute;
  bottom: var(--space-lg);
  right: var(--gutter);
  display: flex;
  gap: var(--space-sm);
  z-index: 10;
  opacity: 0.95;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.hero-film__controls:hover {
  opacity: 1;
}

.hero-film__btn {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--paper);
  padding: 0.6rem 0.95rem;
  background: rgba(10, 11, 13, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 201, 180, 0.28);
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.72);
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.hero-film__btn:hover {
  background: rgba(18, 20, 24, 0.98);
  border-color: var(--accent-gold);
  color: #ffffff;
  transform: translateY(-1px);
}

.hero-film__overlay {
  position: absolute;
  inset: 0;
  background: var(--black);
  opacity: 0;
  transition: opacity var(--duration-cinematic) var(--ease-cinematic);
  pointer-events: none;
}

.hero-film__overlay.active {
  opacity: 1;
}

.hero-film__loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  z-index: 20;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.hero-film__loader.hidden {
  opacity: 0;
  pointer-events: none;
}

.hero-film__loader-bar {
  width: 48px;
  height: 1px;
  background: var(--charcoal-light);
  position: relative;
  overflow: hidden;
}

.hero-film__loader-bar::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--paper);
  animation: loader-slide 1.4s var(--ease-in-out) infinite;
}

@keyframes loader-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* ============================================================
   PHASE 05.5 - PROJECT IDENTITY TRANSITION
   ============================================================ */
.identity-transition {
  position: relative;
  width: 100%;
  height: 35vh;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 5;
}

.identity-transition__inner {
  width: 100%;
  max-width: var(--max-width);
  padding: 0 var(--gutter);
  display: flex;
  justify-content: center;
}

.identity-transition__logo {
  width: 100%;
  max-width: 320px;
  height: auto;
  opacity: 0;
  transform: translateY(15px);
  filter: blur(8px);
  transition: opacity 1.8s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 1.8s cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 1.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform, filter;
}

.identity-transition__logo.is-revealed {
  opacity: 1; 
  transform: translateY(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .identity-transition__logo {
    transform: none;
    filter: none;
    transition: opacity 1.2s ease;
  }
}

@media (max-width: 768px) {
  .identity-transition {
    height: 30vh;
  }
  .identity-transition__logo {
    max-width: 220px; 
  }
}

/* ============================================================
   BRAND RESOLUTION & HERO SECTION
   Full-width 16:9 Architectural Render Anchor (skyscraper-hero-bg-dark-16x9)
   ============================================================ */

.brand-resolve {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: var(--black);
  background-image: url('assets/skyscraper-hero-bg-dark-16x9.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right center;
  padding: clamp(5rem, 12vh, 8rem) var(--gutter);
  overflow: hidden;
  box-sizing: border-box;
}

/* Subtle dark charcoal-to-black gradient overlay:
   Darker & higher opacity on left/upper-left for crystal-clear logo & text readability,
   softly fading to transparent on the right to keep the architectural building,
   illuminated arch, landscaping, and reflections completely vivid and prominent. */
.brand-resolve::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(90deg, 
      rgba(12, 13, 14, 0.94) 0%, 
      rgba(12, 13, 14, 0.88) 28%, 
      rgba(12, 13, 14, 0.65) 52%, 
      rgba(12, 13, 14, 0.25) 75%, 
      rgba(12, 13, 14, 0.05) 100%
    ),
    linear-gradient(180deg, 
      rgba(12, 13, 14, 0.8) 0%, 
      transparent 30%, 
      transparent 70%, 
      rgba(12, 13, 14, 0.95) 100%
    );
  pointer-events: none;
  z-index: 1;
}

/* Faint warm gold ambient light reflection from the arch onto the atmosphere */
.brand-resolve::after {
  content: '';
  position: absolute;
  top: 15%;
  right: 25%;
  width: 50vw;
  height: 50vw;
  max-width: 600px;
  max-height: 600px;
  background: radial-gradient(circle, rgba(200, 168, 107, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.brand-resolve__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.brand-resolve__content {
  max-width: 580px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.brand-resolve__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  background: rgba(200, 168, 107, 0.08);
  border: 1px solid rgba(200, 168, 107, 0.25);
  border-radius: 12px;
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-gold-light);
  margin-bottom: var(--space-md);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.brand-resolve__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-gold);
  box-shadow: 0 0 8px var(--accent-gold);
}

.brand-resolve__logo {
  width: clamp(220px, 32vw, 360px);
  height: auto;
  opacity: 1;
  transform: none;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.8));
  margin-bottom: var(--space-sm);
}

.brand-resolve__tagline {
  font-family: var(--serif);
  font-size: clamp(var(--text-xl), 2.8vw, var(--text-3xl));
  font-weight: 400;
  font-style: italic;
  color: var(--paper);
  letter-spacing: 0.01em;
  margin-top: 0.5rem;
  opacity: 1;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
}

.brand-resolve__desc {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(var(--text-sm), 1.2vw, var(--text-base));
  line-height: 1.8;
  color: var(--warm-gray);
  margin-top: var(--space-md);
  max-width: 520px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.brand-resolve__line {
  width: 60px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--accent-gold) 0%, transparent 100%);
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
  opacity: 0.8;
}

.brand-resolve__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.brand-resolve__meta-strip {
  display: flex;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(212, 201, 180, 0.12);
  width: 100%;
  max-width: 520px;
}

.brand-resolve__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.brand-resolve__meta-item .meta-label {
  font-family: var(--sans);
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-gold);
}

.brand-resolve__meta-item .meta-value {
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--paper);
  letter-spacing: 0.04em;
}

/* ============================================================
   EDITORIAL SECTION — WHAT IS SKYSCRAPER
   ============================================================ */

.editorial {
  position: relative;
  padding: var(--space-4xl) 0;
}

.editorial__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  align-items: start;
}

.editorial__grid--reverse {
  direction: rtl;
}

.editorial__grid--reverse > * {
  direction: ltr;
}

.editorial__meta {
  margin-bottom: var(--space-md);
}

.editorial__title {
  font-family: var(--serif);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-lg);
}

.editorial__text {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.85;
  color: var(--warm-gray);
  max-width: 520px;
}

.editorial__text p + p {
  margin-top: var(--space-md);
}

.editorial__image {
  position: relative;
  overflow: hidden;
}

.editorial__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.editorial__image--tall {
  aspect-ratio: 3/4;
}

.editorial__image--wide {
  aspect-ratio: 16/9;
}

.editorial__image--square {
  aspect-ratio: 1/1;
}

/* ============================================================
   THE SKYSCRAPER WAY — PHILOSOPHY
   ============================================================ */

.philosophy {
  position: relative;
  padding: var(--space-4xl) 0;
  overflow: hidden;
}

.philosophy__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 80vh;
  align-items: center;
}

.philosophy__item:nth-child(even) {
  direction: rtl;
}

.philosophy__item:nth-child(even) > * {
  direction: ltr;
}

.philosophy__visual {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 60vh;
  overflow: hidden;
}

.philosophy__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.philosophy__content {
  padding: var(--space-3xl) var(--space-2xl);
}

.philosophy__word {
  font-family: var(--serif);
  font-size: clamp(var(--text-4xl), 7vw, var(--text-6xl));
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-lg);
  color: var(--paper);
}

.philosophy__desc {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.85;
  color: var(--warm-gray);
  max-width: 420px;
}

/* ============================================================
   ARCHITECTURAL SCROLL SEQUENCE
   ============================================================ */

.arch-scroll {
  position: relative;
  background: var(--black);
}

.arch-scroll__sticky {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #151515 0%, #080808 100%);
  padding: clamp(1.5rem, 4vh, 3.5rem) clamp(1.5rem, 5vw, 4rem);
}

.arch-scroll__canvas {
  position: relative;
  width: min(84vw, 1220px);
  height: min(76vh, 680px);
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(214, 182, 107, 0.22);
  border-radius: 8px;
  box-shadow: 
    0 16px 36px rgba(0, 0, 0, 0.8),
    0 0 24px rgba(214, 182, 107, 0.05);
  overflow: hidden;
  background: #0d0d0d;
}

#scrollCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  border-radius: inherit;
}

.arch-scroll__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.60) 0%,
    rgba(10, 10, 10, 0.25) 30%,
    transparent 60%
  );
  z-index: 2;
}

.arch-scroll__frame {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: opacity;
}

.arch-scroll__text {
  position: absolute;
  left: clamp(1.75rem, 4vw, 3rem);
  bottom: clamp(1.75rem, 4vh, 2.75rem);
  right: auto;
  max-width: min(540px, 85%);
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.12s linear, transform 0.18s ease-out;
}

.arch-scroll__label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #D6B66B;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.arch-scroll__label-bullet {
  width: 18px;
  height: 1.5px;
  background: #D6B66B;
  display: inline-block;
  flex-shrink: 0;
}

.arch-scroll__headline {
  font-family: var(--serif-headline);
  font-size: clamp(1.85rem, 2.8vw, 2.85rem);
  font-weight: 500;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem 0;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95), 0 6px 36px rgba(0, 0, 0, 0.8);
}

.arch-scroll__subline {
  font-family: var(--sans);
  font-size: clamp(0.8125rem, 1vw, 0.95rem);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(240, 236, 228, 0.9);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
  margin: 0;
}

.arch-scroll__counter-wrap,
.arch-scroll__counter {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.arch-scroll__progress {
  position: absolute;
  right: clamp(1.5rem, 3vw, 2.5rem);
  bottom: clamp(1.75rem, 4vh, 2.75rem);
  width: 2px;
  height: 64px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  overflow: hidden;
  z-index: 5;
}

.arch-scroll__progress-fill {
  width: 100%;
  background: var(--accent-gold-muted);
  transform-origin: top;
  transition: height 0.1s linear;
}

/* ============================================================
   PROJECT HERO — DEONARAYAN
   ============================================================ */

.project-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--black);
}

.project-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.project-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

.project-hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--black) 0%,
    rgba(10, 10, 10, 0.7) 40%,
    rgba(10, 10, 10, 0.3) 70%,
    transparent 100%
  );
  z-index: 2;
}

.project-hero__content {
  position: relative;
  z-index: 3;
  padding: var(--space-3xl) var(--gutter);
  max-width: var(--content-width);
  margin: 0 auto;
  width: 100%;
}

.project-hero__status {
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: var(--space-md);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.project-hero__status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-gold);
  animation: pulse-dot 2s var(--ease-in-out) infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.project-hero__name {
  font-family: var(--serif);
  font-size: clamp(var(--text-4xl), 8vw, var(--text-6xl));
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}

.project-hero__tagline {
  font-family: var(--serif);
  font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
  font-weight: 300;
  font-style: italic;
  color: var(--accent-gold-light);
  opacity: 0.7;
}

.project-hero__details {
  display: flex;
  gap: var(--space-2xl);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(240, 236, 228, 0.1);
}

.project-hero__detail-label {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--warm-gray);
  margin-bottom: 0.25rem;
}

.project-hero__detail-value {
  font-family: var(--sans);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--paper);
}

/* ============================================================
   FLOOR PLAN VIEWER
   ============================================================ */

.floor-plans {
  padding: var(--space-4xl) 0;
}

.floor-plans__tabs {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
  flex-wrap: wrap;
  padding: 0 var(--gutter);
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

.floor-plans__tab {
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--warm-gray);
  padding: 0.625rem 1.25rem;
  border: 1px solid var(--charcoal-light);
  transition: all var(--duration-fast) var(--ease-out);
}

.floor-plans__tab:hover,
.floor-plans__tab.active {
  color: var(--paper);
  border-color: var(--accent-gold-muted);
  background: rgba(184, 168, 138, 0.08);
}

.floor-plans__viewer {
  position: relative;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: grab;
}

.floor-plans__viewer:active {
  cursor: grabbing;
}

.floor-plans__img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  transition: transform 0.2s var(--ease-out);
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}

.floor-plans__controls {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-lg);
}

.floor-plans__control-btn {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--warm-gray);
  padding: 0.5rem 1rem;
  border: 1px solid var(--charcoal-light);
  transition: all var(--duration-fast) var(--ease-out);
}

.floor-plans__control-btn:hover {
  color: var(--paper);
  border-color: var(--paper);
}

/* ============================================================
   SPECIFICATIONS
   ============================================================ */

.specs {
  padding: var(--space-4xl) 0;
}

.spec-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  border-top: 1px solid var(--charcoal-light);
}

.spec-item:last-child {
  border-bottom: 1px solid var(--charcoal-light);
}

.spec-item__header {
  padding: var(--space-xl) 0;
  padding-right: var(--space-2xl);
}

.spec-item__category {
  font-family: var(--serif);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
  font-weight: 300;
  line-height: 1.1;
  color: var(--paper);
}

.spec-item__body {
  padding: var(--space-xl) 0;
  display: flex;
  align-items: start;
  gap: var(--space-lg);
}

.spec-item__text {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.85;
  color: var(--warm-gray);
  max-width: 480px;
}

.spec-item__image {
  width: clamp(200px, 28vw, 280px);
  height: clamp(150px, 20vw, 200px);
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.spec-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-normal) var(--ease-out);
}

.spec-item:hover .spec-item__image img {
  transform: scale(1.03);
}

/* ============================================================
   LOCATION
   ============================================================ */

.location {
  padding: var(--space-4xl) 0;
}

.location__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  align-items: start;
}

.location__info {
  padding-top: var(--space-lg);
}

.location__address {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--text-md);
  line-height: 1.85;
  color: var(--paper);
  margin-bottom: var(--space-lg);
}

.location__map {
  background: var(--charcoal);
  overflow: hidden;
  position: relative;
  display: block;
}

.location__map-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
}

.location__map-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--accent-gold);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  display: block;
}

.location__map-label {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: var(--black);
  color: var(--accent-gold);
  border: 1px solid var(--accent-gold);
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  pointer-events: none;
  transition: all var(--duration-normal) var(--ease-out);
}

.location__map-link:hover .location__map-label {
  background: var(--accent-gold);
  color: var(--black);
}

/* ============================================================
   SOLD OUT MODULE — ANIMA SKY
   ============================================================ */

.sold-out {
  position: relative;
  padding: var(--space-4xl) 0;
}

.sold-out__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  align-items: center;
}

.sold-out__image {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
}

.sold-out__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.3);
}

.sold-out__badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(10, 10, 10, 0.7);
  padding: 0.4rem 0.8rem;
  backdrop-filter: blur(8px);
}

.sold-out__content {
  max-width: 480px;
}

.sold-out__name {
  font-family: var(--serif);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: 300;
  line-height: 1.05;
  margin-bottom: var(--space-md);
}

.sold-out__desc {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.85;
  color: var(--warm-gray);
  margin-bottom: var(--space-lg);
}

/* ============================================================
   FUTURE SECTION
   ============================================================ */

.future {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4xl) var(--gutter);
  background: var(--charcoal);
  overflow: hidden;
}

.future__content {
  max-width: 600px;
}

.future__title {
  font-family: var(--serif);
  font-size: clamp(var(--text-4xl), 6vw, var(--text-5xl));
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-lg);
}

.future__text {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.85;
  color: var(--warm-gray);
}

/* ============================================================
   ENQUIRY FLOW
   ============================================================ */

.enquiry {
  padding: var(--space-4xl) 0;
}

.enquiry__container {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.enquiry__step {
  display: none;
}

.enquiry__step.active {
  display: block;
}

.enquiry__question {
  font-family: var(--serif);
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-3xl));
  font-weight: 300;
  line-height: 1.15;
  margin-bottom: var(--space-2xl);
}

.enquiry__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.enquiry__option {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  font-size: var(--text-md);
  font-weight: 300;
  color: var(--paper);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--charcoal-light);
  transition: all var(--duration-fast) var(--ease-out);
}

.enquiry__option:hover,
.enquiry__option.selected {
  border-color: var(--accent-gold-muted);
  background: rgba(184, 168, 138, 0.06);
  color: var(--accent-gold-light);
}

.enquiry__field {
  margin-bottom: var(--space-lg);
}

.enquiry__label {
  display: block;
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--warm-gray);
  margin-bottom: var(--space-xs);
}

.enquiry__input {
  display: block;
  width: 100%;
  font-family: var(--sans);
  font-size: var(--text-md);
  font-weight: 300;
  color: var(--paper);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--charcoal-light);
  background: transparent;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.enquiry__input:focus {
  border-color: var(--accent-gold-muted);
  outline: none;
}

.enquiry__input.error {
  border-color: var(--error);
}

.enquiry__error {
  font-family: var(--sans);
  font-size: var(--text-xs);
  color: var(--error);
  margin-top: var(--space-xs);
  display: none;
}

.enquiry__error.visible {
  display: block;
}

.enquiry__submit {
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #0c0d0e !important;
  background: var(--accent-gold);
  padding: 1rem 2.5rem;
  margin-top: var(--space-lg);
  border-radius: 12px;
  border: 1px solid var(--accent-gold);
  transition: all var(--duration-fast) var(--ease-out);
  box-shadow: 0 4px 14px rgba(200, 168, 107, 0.2);
}

.enquiry__submit:hover {
  background: var(--accent-gold-hover);
  border-color: var(--accent-burgundy-border);
  color: #0c0d0e !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(200, 168, 107, 0.35), 0 0 15px var(--accent-burgundy-glow);
}

.enquiry__submit:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.enquiry__back {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--warm-gray);
  margin-top: var(--space-md);
  display: inline-block;
  transition: color var(--duration-fast) var(--ease-out);
}

.enquiry__back:hover {
  color: var(--paper);
}

/* Confirmation */
.enquiry__confirmation {
  text-align: center;
  padding: var(--space-2xl) 0;
}

.enquiry__confirmation-title {
  font-family: var(--serif);
  font-size: var(--text-3xl);
  font-weight: 300;
  margin-bottom: var(--space-md);
}

.enquiry__confirmation-text {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--warm-gray);
  line-height: 1.85;
}

/* ============================================================
   CTA (Quiet Contextual)
   ============================================================ */

.cta-link {
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-gold-light);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  transition: gap var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.cta-link:hover {
  gap: 1.25rem;
  color: var(--paper);
}

.cta-link__arrow {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
  position: relative;
}

.cta-link__arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}

/* ============================================================
   SECTION TITLE PATTERN
   ============================================================ */

.section-header {
  padding: var(--space-3xl) var(--gutter) var(--space-2xl);
  max-width: var(--content-width);
  margin: 0 auto;
}

.section-header__meta {
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--warm-gray);
  margin-bottom: var(--space-md);
}

.section-header__title {
  font-family: var(--serif);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.02em;
}

/* ============================================================
   FOOTER / FINAL BRAND FRAME
   ============================================================ */

.final-brand {
  min-height: 60vh;
  padding: var(--space-4xl) var(--gutter);
  background: var(--black);
  position: relative;
}

.final-brand__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.final-brand__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: var(--closing-bg-opacity, 0.35);
  max-width: 1920px;
  margin: 0 auto;
  display: block;
}

.final-brand__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.25));
  z-index: 1;
}

.final-brand__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
}

.final-brand__logo {
  width: clamp(160px, 25vw, 320px);
  height: auto;
  margin-bottom: var(--space-lg);
  opacity: 0.8;
}

.final-brand__tagline {
  font-family: var(--serif);
  font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
  font-weight: 300;
  font-style: italic;
  color: var(--accent-gold-light);
  opacity: 0.6;
  margin-bottom: var(--space-3xl);
}

.footer {
  padding: var(--space-2xl) var(--gutter) var(--space-xl);
  max-width: var(--content-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-lg);
  border-top: 1px solid var(--charcoal-light);
}

.footer__col-title {
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--warm-gray);
  margin-bottom: var(--space-sm);
}

.footer__text {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: 1.85;
  color: var(--warm-gray);
}

.footer__text a {
  transition: color var(--duration-fast) var(--ease-out);
}

.footer__text a:hover {
  color: var(--paper);
}

.footer__bottom {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--gutter) var(--space-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer__copyright {
  font-family: var(--sans);
  font-size: var(--text-xs);
  color: var(--stone);
}

.footer__rera {
  font-family: var(--sans);
  font-size: var(--text-xs);
  color: var(--stone);
}

/* ============================================================
   PERSISTENT CTA BAR
   ============================================================ */

.persistent-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 90;
  background: rgba(12, 12, 12, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.75rem var(--gutter);
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  transform: translateY(100%);
  transition: transform var(--duration-normal) var(--ease-out), opacity var(--duration-normal) var(--ease-out);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45);
}

.persistent-cta.visible {
  transform: translateY(0);
}

.persistent-cta.suppressed {
  transform: translateY(100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.persistent-cta__btn {
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #0c0d0e !important;
  background: var(--accent-gold);
  padding: 0.65rem 1.6rem;
  border-radius: 12px;
  border: 1px solid var(--accent-gold);
  transition: all var(--duration-fast) var(--ease-out);
  box-shadow: 0 4px 14px rgba(200, 168, 107, 0.2);
}

.persistent-cta__btn:hover {
  background: var(--accent-gold-hover);
  border-color: var(--accent-burgundy-border);
  color: #0c0d0e !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(200, 168, 107, 0.35), 0 0 15px var(--accent-burgundy-glow);
}

/* ============================================================
   REVEAL & CINEMATIC SECTION TRANSITIONS
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(32px) scale(0.985);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }

.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.reveal--fade {
  transform: none;
}

.reveal--up {
  transform: translateY(48px);
}

.reveal--scale {
  transform: scale(0.95);
}

.reveal--mask {
  clip-path: inset(0 0 100% 0);
  transform: none;
  transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal--mask.visible {
  clip-path: inset(0 0 0 0);
}

/* ============================================================
   SPATIAL & KINETIC ENHANCEMENT SUITE (THREEUI CODEX INSPIRED)
   Subtle, restrained, architectural interaction layer
   ============================================================ */

/* Spatial Canvases (Background 3D Moments) */
.brand-spatial-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.42;
  mix-blend-mode: screen;
  transition: opacity 1.2s var(--ease-out);
}

.future-spatial-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  mix-blend-mode: screen;
  transition: opacity 1.4s var(--ease-out);
}

/* Kinetic Typography Elements */
.kinetic-line-wrap {
  display: block;
  overflow: hidden;
  line-height: inherit;
  padding-bottom: 0.08em;
}

.kinetic-line {
  display: block;
  transform: translateY(112%);
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.kinetic-line.revealed {
  transform: translateY(0);
  opacity: 1;
}

/* Editorial Title Kinetic Stagger */
.editorial__title .kinetic-line:nth-child(1) { transition-delay: 0.04s; }
.editorial__title .kinetic-line:nth-child(2) { transition-delay: 0.16s; }
.editorial__title .kinetic-line:nth-child(3) { transition-delay: 0.28s; }

/* Philosophy Words: Monumental Architectural Kinetic Depth */
.philosophy__word {
  position: relative;
  display: inline-block;
  letter-spacing: 0.03em;
  will-change: transform, letter-spacing;
  transition: letter-spacing 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The Work Continues: Cinematic Expansive Letter-Spacing */
.future__title {
  letter-spacing: 0.08em;
  transition: letter-spacing 1.8s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.8s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: letter-spacing, opacity;
}

.future__title.revealed {
  letter-spacing: 0.22em;
}

/* Continuous Section Transition Edge Scrims */
.section-edge-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(50px, 10vh, 120px);
  background: linear-gradient(180deg, rgba(12, 13, 14, 0.75) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.section-edge-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: clamp(50px, 10vh, 120px);
  background: linear-gradient(0deg, rgba(12, 13, 14, 0.75) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* Smooth Multi-Plane Image Parallax */
.editorial__image {
  overflow: hidden;
}

.editorial__image img {
  will-change: transform;
  transform: translate3d(0, 0, 0) scale(1.05);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Canvas transform handled directly by requestAnimationFrame */

/* Project Hero: Deonarayan Estate Depth & 3D Interactive Card Lift */
.project-hero__bg {
  position: absolute;
  inset: -6% 0 -6% 0;
  overflow: hidden;
  z-index: 1;
}

.project-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.62;
  transform: translate3d(0, 0, 0) scale(1.06);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.project-hero__details {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(240, 236, 228, 0.12);
  flex-wrap: wrap;
}

.project-hero__details > div {
  padding: 0.85rem 1.25rem;
  border-radius: 12px;
  border: 1px solid rgba(212, 201, 180, 0.1);
  background: rgba(18, 20, 22, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.project-hero__details > div:hover {
  border-color: rgba(200, 168, 107, 0.45);
  background: rgba(26, 28, 32, 0.85);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}

/* Anima Sky Residency: Subtle Image Depth & Reveal */
.sold-out__image {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
  border-radius: 12px;
  border: 1px solid rgba(212, 201, 180, 0.12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

.sold-out__image img {
  will-change: transform;
  transform: scale(1.04);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sold-out:hover .sold-out__image img {
  transform: scale(1.07);
  filter: grayscale(0.15);
}

/* Floor Plans Mobile Touch Usability & Responsive Controls */
.floor-plans__viewer {
  touch-action: pan-y pinch-zoom;
}

.floor-plans__controls {
  flex-wrap: wrap;
  padding: 0 var(--gutter);
}

.floor-plans__control-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   SUSTAINABLE GROWTH & 4-DECADE LEGACY (ORIGINAL SKYSCRAPER)
   ============================================================ */
.sustainability {
  padding: var(--space-4xl) 0;
  position: relative;
  background-color: var(--black);
  background-image: 
    linear-gradient(180deg, rgba(12, 13, 14, 0.88) 0%, rgba(12, 13, 14, 0.72) 40%, rgba(12, 13, 14, 0.85) 75%, rgba(12, 13, 14, 0.96) 100%),
    linear-gradient(90deg, rgba(12, 13, 14, 0.92) 0%, rgba(12, 13, 14, 0.75) 50%, rgba(12, 13, 14, 0.88) 100%),
    url('assets/backgroundimagernc.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-top: 1px solid var(--charcoal-light);
}

.sustainability__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-3xl);
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  align-items: start;
}

.sustainability__motto {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl));
  color: var(--accent-gold-light);
  margin-bottom: var(--space-md);
}

.sustainability__quote {
  border-left: 2px solid var(--accent-gold);
  padding-left: var(--space-md);
  margin: var(--space-xl) 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--accent-gold-light);
  line-height: 1.6;
}

.sustainability__pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.sustainability__card {
  padding: var(--space-lg);
  background: linear-gradient(165deg, #181a1d 0%, #121315 100%);
  border: 1px solid rgba(212, 201, 180, 0.12);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.sustainability__card:hover {
  border-color: var(--accent-burgundy-border);
  transform: translateY(-3px);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.6), 0 0 20px var(--accent-burgundy-glow);
}

.sustainability__num {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  color: var(--accent-gold);
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.sustainability__card-title {
  font-family: var(--serif);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--paper);
  margin-bottom: var(--space-xs);
}

.sustainability__card-desc {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--warm-gray);
  line-height: 1.7;
}

/* ============================================================
   SPECIFICATION CINEMATIC FILM (SPECIFICATION.MP4)
   ============================================================ */
.spec-film {
  padding: 0 0 var(--space-4xl) 0;
  background: var(--black);
}

.spec-film__container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.spec-film__wrapper {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  max-height: 560px;
  background: var(--charcoal);
  border: 1px solid rgba(212, 201, 180, 0.24);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 
    0 0 0 1px rgba(0, 0, 0, 0.85),
    0 16px 40px rgba(0, 0, 0, 0.65),
    0 32px 72px rgba(0, 0, 0, 0.45);
}

.spec-film__wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
}

.spec-film__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.spec-film__badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(10px);
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 2;
  pointer-events: none;
}

.spec-film__controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-md);
  flex-wrap: wrap;
  gap: var(--space-md);
}

.spec-film__caption {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--warm-gray);
}

/* ============================================================
   LEADERBOARD — EXECUTIVE LEADERSHIP (RESTORED)
   ============================================================ */
.leaderboard {
  padding: var(--space-4xl) 0;
  background: var(--charcoal);
  position: relative;
  border-top: 1px solid var(--charcoal-light);
}

.leaderboard__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.leaderboard__card {
  background: linear-gradient(165deg, #181a1d 0%, #121315 100%);
  border: 1px solid rgba(212, 201, 180, 0.12);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.leaderboard__card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-burgundy-border);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.6), 0 0 24px var(--accent-burgundy-glow);
}

.leaderboard__portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 4.75;
  background: #141414;
  overflow: hidden;
}

.leaderboard__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(0.2) contrast(1.05);
  transition: transform var(--duration-slow) var(--ease-out), filter var(--duration-fast) var(--ease-out);
}

.leaderboard__card:hover .leaderboard__portrait img {
  transform: scale(1.03);
  filter: grayscale(0);
}

.leaderboard__meta {
  padding: var(--space-lg);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.leaderboard__role {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: var(--space-xs);
}

.leaderboard__name {
  font-family: var(--serif);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.15;
  color: var(--paper);
  margin-bottom: var(--space-sm);
}

.leaderboard__bio {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--warm-gray);
  margin-top: auto;
}

.leaderboard__cta-banner {
  max-width: var(--content-width);
  margin: var(--space-3xl) auto 0;
  padding: var(--space-2xl) var(--gutter) 0;
  text-align: center;
  border-top: 1px solid var(--charcoal-light);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.leaderboard__cta-title {
  font-family: var(--serif);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  font-weight: 300;
  color: var(--paper);
  margin-bottom: var(--space-sm);
}

.leaderboard__cta-desc {
  font-family: var(--sans);
  font-size: var(--text-base);
  color: var(--warm-gray);
  max-width: 600px;
  margin-bottom: var(--space-lg);
}

/* CHANGE 8 — WhatsApp CTA: Dark charcoal fill, warm paper outline, zero green tint */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--charcoal-dark, #161616);
  color: var(--paper) !important;
  border: 1px solid rgba(212, 201, 180, 0.25);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.7rem 1.6rem;
  border-radius: 12px;
  transition: transform var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.btn-whatsapp:hover {
  background: rgba(212, 201, 180, 0.12);
  border-color: var(--accent-gold-light);
  color: var(--paper) !important;
  transform: translateY(-1px);
}

.btn-whatsapp svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

/* CHANGE 2 — Button Restyle: Refined champagne gold pill with dark charcoal text */
.btn-luxury {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--accent-gold);
  color: #0c0d0e !important;
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.75rem 1.75rem;
  border-radius: 12px;
  border: 1px solid var(--accent-gold);
  transition: all var(--duration-fast) var(--ease-out);
  box-shadow: 0 4px 14px rgba(200, 168, 107, 0.2);
}

.btn-luxury:hover {
  background: var(--accent-gold-hover);
  border-color: var(--accent-burgundy-border);
  color: #0c0d0e !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(200, 168, 107, 0.35), 0 0 15px var(--accent-burgundy-glow);
}

.btn-luxury-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(12, 13, 14, 0.4);
  color: var(--accent-gold-light) !important;
  border: 1px solid rgba(200, 168, 107, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.75rem 1.75rem;
  border-radius: 12px;
  transition: all var(--duration-fast) var(--ease-out);
}

.btn-luxury-outline:hover {
  border-color: var(--accent-burgundy-border);
  color: #ffffff !important;
  background: rgba(200, 168, 107, 0.12);
  transform: translateY(-1px);
  box-shadow: 0 0 15px var(--accent-burgundy-glow);
}

/* Floor Plan Download Button */

.floor-plans__download-btn {
  display: inline-flex;
  align-items: center;
  color: var(--paper);
  text-decoration: none;
  border: 1px solid rgba(214, 182, 107, 0.3);
  transition: all var(--duration-fast) var(--ease-out);
}

.floor-plans__download-btn:hover {
  background: var(--paper);
  color: var(--black);
  border-color: var(--paper);
}

/* CHANGE 8 — Floating WhatsApp: Dark charcoal fill, warm paper outline, zero green tint */
.floating-whatsapp {
  position: fixed;
  bottom: calc(56px + 1.25rem + env(safe-area-inset-bottom, 0px));
  right: var(--gutter);
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(18, 18, 18, 0.95);
  border: 1px solid rgba(212, 201, 180, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--paper);
  padding: 0.65rem 1.25rem 0.65rem 0.85rem;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              bottom var(--duration-fast) var(--ease-out);
}

.floating-whatsapp.visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.floating-whatsapp.suppressed {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(20px) !important;
}

.floating-whatsapp:hover {
  border-color: var(--accent-gold-light);
  background: rgba(30, 30, 30, 0.98);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
}

.floating-whatsapp__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  flex-shrink: 0;
}

.floating-whatsapp__icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.floating-whatsapp__text {
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
}

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 1024px) {
  .brand-resolve {
    background-position: 70% center;
    padding: clamp(4rem, 10vh, 6rem) var(--gutter);
  }

  .brand-resolve::before {
    background: 
      linear-gradient(90deg, 
        rgba(12, 13, 14, 0.95) 0%, 
        rgba(12, 13, 14, 0.9) 45%, 
        rgba(12, 13, 14, 0.55) 78%, 
        rgba(12, 13, 14, 0.15) 100%
      ),
      linear-gradient(180deg, rgba(12, 13, 14, 0.8) 0%, transparent 30%, rgba(12, 13, 14, 0.95) 100%);
  }

  .editorial__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }

  .editorial__grid--reverse {
    direction: ltr;
  }

  .philosophy__item {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
  }

  .philosophy__item:nth-child(even) {
    direction: ltr;
  }

  .philosophy__visual {
    min-height: 50vh;
  }

  .philosophy__content {
    padding: var(--space-2xl) var(--gutter);
  }

  .sustainability__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .leaderboard__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .spec-item {
    grid-template-columns: 1fr;
  }

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

  .sold-out__grid {
    grid-template-columns: 1fr;
  }

  .footer {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .project-hero__details {
    flex-wrap: wrap;
    gap: var(--space-lg);
  }

  .arch-scroll__canvas {
    width: min(88vw, 860px);
    height: min(72vh, 600px);
  }
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

/* ============================================================
   RESPONSIVE — MOBILE (<= 768px)
   Intentionally recomposed architectural mobile experience.
   Desktop remains 100% identical.
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --text-xs: 0.6875rem;    /* 11px */
    --text-sm: 0.8125rem;    /* 13px */
    --text-base: 0.9375rem;  /* 15px */
    --text-md: 1rem;         /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.35rem;      /* 21.6px */
    --text-2xl: 1.65rem;     /* 26.4px */
    --text-3xl: 2rem;        /* 32px */
    --text-4xl: 2.35rem;     /* 37.6px */
    --text-5xl: 2.85rem;     /* 45.6px */
    --text-6xl: 3.25rem;     /* 52px */
    --text-7xl: 3.75rem;     /* 60px */

    --gutter: clamp(1rem, 4vw, 1.5rem);
    --space-xl: 2.75rem;
    --space-2xl: 3.75rem;
    --space-3xl: 4.75rem;
    --space-4xl: 5.5rem;
    --space-5xl: 6.5rem;
  }

  /* --- GLOBAL SECTION SPACING ON MOBILE --- */
  .section,
  .section--dark,
  .section--charcoal,
  .editorial,
  .philosophy,
  .sustainability,
  .specs,
  .location,
  .sold-out,
  .leaderboard,
  .enquiry,
  .spec-film {
    padding-top: var(--space-3xl) !important;
    padding-bottom: var(--space-3xl) !important;
  }

  /* --- HEADER & NAVIGATION --- */
  .nav {
    padding: 0.85rem var(--gutter);
    padding-top: calc(0.85rem + env(safe-area-inset-top, 0px));
  }

  .nav--scrolled {
    padding: 0.65rem var(--gutter);
    padding-top: calc(0.65rem + env(safe-area-inset-top, 0px));
  }

  .nav__logo {
    height: 28px; /* Properly visible without being squished on mobile */
    width: auto;
    min-width: 150px;
    object-fit: contain;
    object-position: left center;
  }

  .nav__links {
    display: none !important;
  }

  .nav__menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 10px 8px;
    margin-right: -8px;
    position: relative;
    z-index: 3001;
  }

  .nav__menu-btn span {
    width: 24px;
    height: 1.5px;
  }

  /* Mobile Fullscreen Overlay Navigation */
  .nav__overlay {
    z-index: 2999 !important;
    justify-content: flex-start;
    padding: calc(72px + env(safe-area-inset-top, 0px)) var(--gutter) calc(2.5rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(12, 13, 14, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }

  .nav__overlay-link {
    font-size: clamp(1.2rem, 5.2vw, 1.55rem);
    font-weight: 300;
    line-height: 1.25;
    padding: 0.5rem 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(214, 201, 180, 0.08);
  }

  /* --- PHASE 05: CINEMATIC OPENING HERO (RULE 4, 5, 6, 8) ---
     Wide 16:9 presentation, proportional to viewport width, zero cropping of architecture or embedded text. */
  .hero-film {
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: auto !important;
    padding-top: calc(64px + env(safe-area-inset-top, 0px));
    padding-bottom: 1.5rem;
    background: var(--black);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .hero-film__video {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8);
  }

  .hero-film__controls {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    margin-top: 1.25rem;
    padding: 0 var(--gutter);
    opacity: 1 !important;
  }

  .hero-film__btn {
    min-height: 44px;
    padding: 0.7rem 1.35rem;
    font-size: var(--text-xs);
    flex: 1;
    max-width: 180px;
    text-align: center;
  }

  /* --- PHASE 06: BRAND RESOLUTION SECTION --- */
  .brand-resolve {
    background-position: center center;
    background-size: cover;
    min-height: auto !important;
    padding: var(--space-3xl) var(--gutter) var(--space-2xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }

  .brand-resolve::before {
    background: 
      linear-gradient(180deg, 
        rgba(12, 13, 14, 0.94) 0%, 
        rgba(12, 13, 14, 0.88) 40%, 
        rgba(12, 13, 14, 0.92) 80%,
        rgba(12, 13, 14, 0.98) 100%
      );
  }

  .brand-resolve__content {
    max-width: 100%;
  }

  .brand-resolve__badge {
    margin-bottom: 1.25rem;
    max-width: 100%;
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    padding: 0.35rem 0.75rem;
  }

  .brand-resolve__logo {
    width: clamp(190px, 62vw, 250px);
    margin-bottom: 0.75rem;
  }

  .brand-resolve__tagline {
    font-size: var(--text-xl);
    margin-bottom: 1.25rem;
  }

  .brand-resolve__desc {
    font-size: var(--text-base);
    line-height: 1.75;
    margin-bottom: 1.75rem;
  }

  .brand-resolve__actions {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
    gap: 0.75rem;
  }

  .brand-resolve__actions a,
  .brand-resolve__actions button {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    text-align: center;
    padding: 0.85rem 1.5rem;
  }

  .brand-resolve__meta-strip {
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(212, 201, 180, 0.12);
    width: 100%;
  }

  .brand-resolve__meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  /* --- PHASE 07: EDITORIAL INTRODUCTION --- */
  .editorial__grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--space-xl) !important;
  }

  .editorial__title {
    font-size: clamp(1.85rem, 7vw, 2.5rem);
    line-height: 1.1;
    margin-bottom: 1.25rem;
  }

  .editorial__text {
    max-width: 100%;
    font-size: var(--text-base);
    line-height: 1.75;
  }

  /* Preserve landscape architectural composition on mobile */
  .editorial__image {
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
  }

  .editorial__image img {
    transform: none !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .editorial__image--tall {
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
  }

  .editorial__image--wide {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }

  .editorial__image--square {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }

  /* --- PHASE 08: PHILOSOPHY --- */
  .philosophy__item {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: auto !important;
    margin-bottom: var(--space-2xl);
  }

  .philosophy__visual {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 12px;
    overflow: hidden;
  }

  .philosophy__visual img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .philosophy__content {
    padding: var(--space-lg) var(--gutter) !important;
  }

  .philosophy__word {
    font-size: clamp(2rem, 7.5vw, 2.75rem);
    margin-bottom: 0.75rem;
  }

  .philosophy__desc {
    max-width: 100%;
    font-size: var(--text-base);
    line-height: 1.75;
  }

  /* --- PHASE 09: SUSTAINABILITY & HERITAGE --- */
  .sustainability__grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-xl) !important;
  }

  .sustainability__pillars {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-top: 1.5rem !important;
  }

  .sustainability__card {
    padding: 1.35rem !important;
  }

  /* --- PHASE 10: 35-SECOND ARCHITECTURAL SCROLL WALKTHROUGH --- */
  .arch-scroll__sticky {
    padding: 0.75rem !important;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .arch-scroll__canvas {
    width: 100% !important;
    max-width: calc(100vw - 1.5rem) !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    max-height: min(56vh, 420px) !important;
    border-radius: 6px;
  }

  .arch-scroll__text {
    right: 0.75rem !important;
    left: 0.75rem !important;
    bottom: 0.75rem !important;
    max-width: calc(100% - 1.5rem) !important;
  }

  .arch-scroll__headline {
    font-size: clamp(1.15rem, 4.4vw, 1.45rem) !important;
    line-height: 1.18;
  }

  .arch-scroll__subline {
    font-size: 0.72rem !important;
    margin-top: 0.25rem;
  }

  .arch-scroll__progress {
    right: 0.75rem !important;
    bottom: 0.75rem !important;
    height: 40px !important;
  }

  /* --- PHASE 11: DEONARAYAN ESTATE PROJECT HERO --- */
  .project-hero {
    min-height: 85vh;
    min-height: 85dvh;
    display: flex;
    align-items: flex-end;
  }

  .project-hero__content {
    padding: var(--space-2xl) var(--gutter) var(--space-xl) !important;
  }

  .project-hero__status {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 0.4rem 0.6rem !important;
    letter-spacing: 0.14em !important;
    font-size: 0.65rem !important;
    max-width: 100% !important;
    line-height: 1.4;
  }

  .project-hero__name {
    font-size: clamp(2rem, 7.5vw, 3rem) !important;
    line-height: 1.02;
    margin-bottom: 0.75rem;
    word-break: break-word;
  }

  .project-hero__tagline {
    font-size: clamp(0.95rem, 3.5vw, 1.15rem) !important;
    line-height: 1.45;
  }

  .project-hero__details {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem 1rem !important;
    margin-top: var(--space-lg) !important;
    padding-top: var(--space-md) !important;
  }

  .project-hero__detail-label {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    margin-bottom: 0.2rem;
  }

  .project-hero__detail-value {
    font-size: 0.9rem;
    line-height: 1.35;
  }

  /* --- PHASE 12: CURATED MOMENTS GALLERY GRID --- */
  .curated-moments__grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--space-lg) !important;
  }

  .curated-moments__grid > div,
  .editorial__grid > div {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* --- PHASE 13: ORIGINAL ARCHITECTURAL FLOOR PLANS --- */
  .floor-plans {
    padding: var(--space-3xl) 0 !important;
  }

  .floor-plans__tabs {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    padding: 0 var(--gutter) !important;
    margin-bottom: var(--space-lg) !important;
    width: 100%;
  }

  .floor-plans__tab {
    padding: 0.65rem 0.5rem !important;
    font-size: 0.6875rem !important;
    text-align: center;
    letter-spacing: 0.1em !important;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .floor-plans__viewer {
    min-height: 45vh !important;
    padding: 0 var(--gutter) !important;
  }

  .floor-plans__img {
    max-height: 52vh !important;
  }

  .floor-plans__controls {
    gap: 0.5rem !important;
    margin-top: var(--space-md) !important;
    flex-wrap: wrap;
  }

  .floor-plans__control-btn {
    min-height: 44px;
    padding: 0.6rem 1rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* --- PHASE 14: SPECIFICATIONS (RULE 14: NO CRAMMED TWO-COLUMNS) --- */
  .specs {
    padding: var(--space-3xl) 0 !important;
  }

  .spec-item {
    grid-template-columns: 1fr !important;
    padding: 0 var(--gutter) !important;
  }

  .spec-item__header {
    padding: var(--space-lg) 0 var(--space-xs) 0 !important;
    padding-right: 0 !important;
  }

  .spec-item__category {
    font-size: clamp(1.35rem, 5vw, 1.85rem) !important;
  }

  .spec-item__body {
    padding: var(--space-xs) 0 var(--space-lg) 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-md) !important;
  }

  .spec-item__text {
    max-width: 100% !important;
    font-size: var(--text-base) !important;
    line-height: 1.75;
  }

  .spec-item__image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 12px;
    margin-top: 0.25rem;
  }

  .spec-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* --- PHASE 15: SPECIFICATION IN MOTION FILM (RULE 4, 5, 6, 7) --- */
  .spec-film {
    padding: 0 0 var(--space-3xl) 0 !important;
  }

  .spec-film__wrapper {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    border-radius: 12px;
  }

  .spec-film__video {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: contain !important;
    display: block;
  }

  .spec-film__badge {
    font-size: 0.6rem !important;
    letter-spacing: 0.12em !important;
    padding: 0.3rem 0.6rem !important;
    top: 0.5rem !important;
    left: 0.5rem !important;
  }

  .spec-film__controls-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
  }

  .spec-film__controls-bar > div {
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.65rem !important;
  }

  .spec-film__controls-bar .btn-luxury,
  .spec-film__controls-bar .btn-whatsapp {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
    text-align: center !important;
  }

  /* --- PHASE 16: LOCATION & OFFICE --- */
  .location__grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-xl) !important;
  }

  .location__info {
    padding-top: 0 !important;
  }

  .location__map-img {
    aspect-ratio: 16 / 10 !important;
    border-radius: 12px;
  }

  /* --- PHASE 17: SOLD OUT / ANIMA SKY --- */
  .sold-out__grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-xl) !important;
  }

  .sold-out__image {
    aspect-ratio: 16 / 10 !important;
    border-radius: 12px;
  }

  /* --- PHASE 18: EXECUTIVE LEADERSHIP (RULE 14: BALANCED CARDS) --- */
  .leaderboard__grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .leaderboard__card {
    border-radius: 12px;
  }

  .leaderboard__portrait {
    aspect-ratio: 16 / 11 !important;
  }

  .leaderboard__portrait img {
    object-position: center 25% !important;
  }

  .leaderboard__meta {
    padding: 1.25rem !important;
  }

  .leaderboard__cta-banner {
    padding: var(--space-xl) var(--gutter) !important;
    margin-top: var(--space-2xl) !important;
  }

  .leaderboard__cta-banner > div {
    flex-direction: column !important;
    width: 100%;
    gap: 0.75rem !important;
  }

  .leaderboard__cta-banner .btn-luxury,
  .leaderboard__cta-banner .btn-whatsapp {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* --- PHASE 19: CONCIERGE ENQUIRY FLOW --- */
  .enquiry__container {
    padding: 0 var(--gutter) !important;
  }

  .enquiry__question {
    font-size: clamp(1.4rem, 5.5vw, 1.85rem) !important;
    margin-bottom: 1.5rem !important;
  }

  .enquiry__option {
    padding: 1rem 1.15rem !important;
    font-size: 0.9375rem !important;
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  .enquiry__submit {
    width: 100% !important;
    min-height: 48px !important;
    padding: 0.85rem 1.5rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* --- PHASE 20: FOOTER & PERSISTENT BARS --- */
  .final-brand {
    min-height: 45vh !important;
    padding: var(--space-3xl) var(--gutter) !important;
  }
  .final-brand__bg img {
    object-position: center center !important;
    object-fit: contain !important;
  }

  .footer {
    grid-template-columns: 1fr !important;
    gap: var(--space-lg) !important;
    padding-bottom: calc(var(--space-xl) + 70px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .footer__bottom {
    flex-direction: column !important;
    gap: var(--space-sm) !important;
    text-align: center !important;
    padding-bottom: calc(var(--space-2xl) + 70px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Persistent CTA bottom bar */
  .persistent-cta {
    justify-content: center !important;
    padding: 0.65rem 1rem !important;
    padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .persistent-cta__btn {
    width: 100% !important;
    max-width: 360px;
    text-align: center !important;
    justify-content: center !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Floating WhatsApp */
  .floating-whatsapp {
    padding: 0 !important;
    width: 44px !important;
    height: 44px !important;
    justify-content: center !important;
    bottom: calc(54px + 0.75rem + env(safe-area-inset-bottom, 0px)) !important;
    right: 1rem !important;
    border-radius: 50% !important;
  }

  .floating-whatsapp__text {
    display: none !important;
  }
}

/* ============================================================
   RESPONSIVE — EXTRA COMPACT MOBILE (<= 480px)
   ============================================================ */
@media (max-width: 480px) {
  :root {
    --text-3xl: 1.75rem;
    --text-4xl: 2.15rem;
    --text-5xl: 2.5rem;
    --text-6xl: 2.85rem;
  }

  .brand-resolve__logo {
    width: clamp(180px, 58vw, 220px);
  }

  .brand-resolve__tagline {
    font-size: var(--text-lg);
  }

  .editorial__title {
    font-size: 1.75rem;
  }

  .floor-plans__tab {
    font-size: 0.625rem !important;
    letter-spacing: 0.06em !important;
    padding: 0.5rem 0.25rem !important;
  }
}

/* ============================================================
   LENIS SMOOTH SCROLL STYLES
   ============================================================ */
html.lenis, html.lenis body {
  height: auto;
}

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

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

.lenis.lenis-stopped {
  overflow: hidden;
}

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

/* ============================================================
   COMPLIANCE SUITE: DISCLAIMER NOTICE, COOKIE BAR, FORM CONSENT
   Calm, understated architectural luxury style.
   ============================================================ */

/* A. Disclaimer Notice (Accessible Centered Dialog) */
.disclaimer-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out);
}

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

.disclaimer-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 13, 14, 0.84);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.disclaimer-modal__card {
  position: relative;
  z-index: 1;
  background: var(--charcoal);
  border: 1px solid var(--border-medium);
  border-radius: 12px;
  max-width: 500px;
  width: 100%;
  padding: 2.25rem;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75);
}

.disclaimer-modal__title {
  font-family: var(--serif);
  font-size: 1.625rem;
  color: var(--paper);
  font-weight: 400;
  margin: 0 0 0.85rem 0;
  letter-spacing: 0.02em;
}

.disclaimer-modal__body {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--warm-gray);
  line-height: 1.65;
  margin: 0 0 1.75rem 0;
}

.disclaimer-modal__link {
  color: var(--accent-gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
  display: inline-block;
  margin-top: 0.35rem;
  transition: color var(--duration-fast) var(--ease-out);
}

.disclaimer-modal__link:hover {
  color: var(--paper);
}

.disclaimer-modal__actions {
  display: flex;
  justify-content: flex-end;
}

.disclaimer-modal__btn {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--border-medium);
  font-family: var(--sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.75rem 1.75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.disclaimer-modal__btn:hover,
.disclaimer-modal__btn:focus-visible {
  background: rgba(245, 242, 235, 0.08);
  border-color: var(--paper);
  outline: none;
}

/* B. Cookie Consent Bar (Slim bottom bar) */
.cookie-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  background: var(--charcoal);
  border-top: 1px solid var(--border-subtle);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
}

.cookie-bar.active {
  transform: translateY(0);
}

.cookie-bar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.85rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.cookie-bar__text {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--warm-gray);
  margin: 0;
  line-height: 1.4;
}

.cookie-bar__actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.cookie-bar__btn {
  font-family: var(--sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.45rem 1.15rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.cookie-bar__btn--decline {
  background: transparent;
  color: var(--warm-gray);
  border: 1px solid var(--border-subtle);
}

.cookie-bar__btn--decline:hover,
.cookie-bar__btn--decline:focus-visible {
  color: var(--paper);
  border-color: var(--border-medium);
  outline: none;
}

.cookie-bar__btn--accept {
  background: rgba(245, 242, 235, 0.08);
  color: var(--paper);
  border: 1px solid var(--border-medium);
}

.cookie-bar__btn--accept:hover,
.cookie-bar__btn--accept:focus-visible {
  background: rgba(245, 242, 235, 0.16);
  border-color: var(--paper);
  outline: none;
}

/* C. Captions & Form Microcopy */
.project-illustrative-caption {
  font-family: var(--sans);
  font-size: var(--text-xs);
  color: var(--warm-gray);
  opacity: 0.72;
  letter-spacing: 0.02em;
  margin-top: 0.65rem;
  text-align: center;
}

.footer__disclaimer-note {
  font-family: var(--sans);
  font-size: var(--text-xs);
  color: var(--warm-gray);
  opacity: 0.85;
  margin-top: 0.75rem;
  line-height: 1.5;
}

.footer__disclaimer-link {
  color: var(--accent-gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 0.35rem;
}

.footer__disclaimer-link:hover {
  color: var(--paper);
}

.footer__admin-link {
  font-family: var(--sans);
  font-size: var(--text-xs);
  color: var(--warm-gray);
  opacity: 0.75;
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.footer__admin-link:hover,
.footer__admin-link:focus-visible {
  opacity: 1;
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.enquiry__consent-text {
  font-family: var(--sans);
  font-size: var(--text-xs);
  color: var(--warm-gray);
  opacity: 0.82;
  margin-top: 0.85rem;
  line-height: 1.45;
  text-align: left;
}

/* Accessibility: Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .disclaimer-modal,
  .cookie-bar {
    transition: none !important;
  }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .disclaimer-modal__card {
    padding: 1.5rem;
  }
  .cookie-bar__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .cookie-bar__actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ============================================================
   REFINED ARCHITECTURAL OFF-WHITE THEME & ZERO-CLIPPING HEADER
   ============================================================ */

/* --- 1. HEADER & LOGO: RESTORED ORIGINAL FLOATING LUXURY DESIGN ---
   No dark chip box, no hard rock borders. Pure, clean floating brand. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-nav);
  padding: 1.1rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(8, 9, 10, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform var(--duration-slow) var(--ease-out),
              background var(--duration-normal) var(--ease-out),
              padding var(--duration-fast) var(--ease-out);
}

.nav--scrolled {
  background: rgba(10, 10, 10, 0.94) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: 0.8rem var(--gutter) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Original floating logo - no container box/chip */
.nav__brand {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  z-index: 3002 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.nav__logo {
  height: 32px !important;
  width: auto !important;
  min-width: 150px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  opacity: 0.95;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.nav__logo:hover {
  opacity: 1;
}

/* --- 2. HEADER NAV LINKS: ZERO CLIPPING ON ALL SCREEN SIZES --- */
.nav__links {
  display: flex !important;
  gap: clamp(0.5rem, 1.2vw, 1.5rem) !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  flex-shrink: 1 !important;
}

.nav__link {
  font-family: var(--sans) !important;
  font-size: clamp(0.625rem, 0.75vw, 0.75rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--paper) !important;
  white-space: nowrap !important;
  opacity: 0.75 !important;
  transition: opacity var(--duration-fast) ease, color var(--duration-fast) ease !important;
}

.nav__link:hover {
  opacity: 1 !important;
  color: var(--accent-gold) !important;
}

.nav__cta {
  font-family: var(--sans) !important;
  font-size: clamp(0.625rem, 0.75vw, 0.75rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #0c0d0e !important;
  background: var(--accent-gold) !important;
  padding: 0.55rem 1.25rem !important;
  border-radius: 2px !important;
  white-space: nowrap !important;
  transition: all var(--duration-fast) ease !important;
}
.nav__cta:hover {
  background: var(--accent-gold-hover) !important;
  box-shadow: 0 4px 16px rgba(200, 168, 107, 0.3) !important;
}

.nav__menu-btn span {
  background: var(--paper) !important;
}

/* Responsive threshold: Switch to hamburger menu at 1180px so 11 links never clip */
@media (max-width: 1180px) {
  .nav__links {
    display: none !important;
  }
  .nav__menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 10px 8px;
    position: relative;
    z-index: 3001;
  }
}

/* Mobile Nav Overlay */
.nav__overlay {
  background: rgba(12, 13, 14, 0.98) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

.nav__overlay-link {
  color: var(--paper) !important;
  border-bottom: 1px solid rgba(214, 201, 180, 0.1) !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  font-size: clamp(1.1rem, 4.5vw, 1.35rem) !important;
  padding: 0.75rem 0 !important;
  opacity: 0.85;
}
.nav__overlay-link:hover,
.nav__overlay-link:active {
  opacity: 1;
  color: var(--accent-gold) !important;
}

.nav__overlay-link--cta {
  background: var(--accent-gold) !important;
  color: #0c0d0e !important;
  border-radius: 2px !important;
  padding: 1rem 1.5rem !important;
  justify-content: center !important;
  min-height: 52px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  margin-top: 1.5rem !important;
  border-bottom: none !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}
.nav__overlay-link--cta:hover {
  background: var(--accent-gold-hover) !important;
}

/* --- 3. WARM ARCHITECTURAL BEIGE & DARK OFF-WHITE PALETTE (SEAMLESS TEXTURED DEPTH) ---
   Replaced harsh glaring bright whites with tactile linen beige & warm greige stone.
   Seamless gradient feathered transitions and 1px gold hairline borders at all section transitions. */

.editorial,
.specs,
.sold-out,
.enquiry {
  background-color: var(--bg-primary) !important;
  color: #111110 !important;
  position: relative;
}

.philosophy,
.floor-plans,
.location,
.future,
.leaderboard {
  background-color: var(--bg-stone) !important;
  color: #111110 !important;
  position: relative;
}

/* Sustainability warm architectural overlay with organic topography */
.sustainability {
  background-color: var(--bg-primary) !important;
  background-image: 
    linear-gradient(180deg, rgba(197, 186, 168, 0.94) 0%, rgba(189, 177, 157, 0.88) 45%, rgba(197, 186, 168, 0.95) 100%),
    url("assets/backgroundimagernc.png") !important;
  background-size: cover !important;
  background-position: center !important;
  color: #111110 !important;
  position: relative;
}

/* ============================================================
   SEAMLESS TRANSITIONS & BORDER DEPTH BLENDS
   Smoothly merges dark cinematic sections and warm beige sections
   Strictly excludes #archScrollSection (canvas/container untouched)
   ============================================================ */

/* 1. Dark -> Beige: Top of Editorial (#about) seamlessly dissolves from #brandResolution (#14130F) */
.editorial#about {
  border-top: 1px solid transparent !important;
  border-image: linear-gradient(90deg, transparent 0%, rgba(212, 175, 85, 0.45) 50%, transparent 100%) 1 !important;
}
.editorial#about::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(20, 19, 15, 0.95) 0%, rgba(20, 19, 15, 0.5) 50px, rgba(197, 186, 168, 0) 150px),
    radial-gradient(ellipse 85% 60% at 50% 25%, rgba(244, 217, 160, 0.10) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23grain)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%, 200px 200px;
}

/* 2. Adjacent beige sections: subtle fading gold hairline dividers */
.philosophy {
  border-top: 1px solid transparent !important;
  border-image: linear-gradient(90deg, transparent 0%, rgba(139, 102, 36, 0.25) 50%, transparent 100%) 1 !important;
}
.sustainability {
  border-top: 1px solid transparent !important;
  border-image: linear-gradient(90deg, transparent 0%, rgba(139, 102, 36, 0.25) 50%, transparent 100%) 1 !important;
}

/* 3. Beige -> Dark: Bottom of Sustainability seamlessly dissolves into #archScrollSection (#0C0D0E) */
/* NOTE: #archScrollSection is byte-for-byte untouched; transition blend is strictly on sustainability */
.sustainability {
  border-bottom: 1px solid transparent !important;
  border-image: linear-gradient(90deg, transparent 0%, rgba(212, 175, 85, 0.40) 50%, transparent 100%) 1 !important;
}
.sustainability::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(0deg, rgba(12, 13, 14, 0.95) 0%, rgba(12, 13, 14, 0.55) 50px, rgba(197, 186, 168, 0) 150px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23grain)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 100% 100%, 200px 200px;
}

/* 4. Dark -> Beige: Top of Floor Plans (#plans) seamlessly dissolves from Curated Moments (#14130F) */
.floor-plans#plans {
  border-top: 1px solid transparent !important;
  border-image: linear-gradient(90deg, transparent 0%, rgba(212, 175, 85, 0.45) 50%, transparent 100%) 1 !important;
}
.floor-plans#plans::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(20, 19, 15, 0.92) 0%, rgba(20, 19, 15, 0.45) 45px, rgba(189, 177, 157, 0) 130px),
    linear-gradient(rgba(107, 77, 22, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 77, 22, 0.08) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23grain)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 100% 100%, 80px 80px, 80px 80px, 200px 200px;
}

/* 5. Adjacent divider: Floor plans into Specs */
.specs#specifications {
  border-top: 1px solid transparent !important;
  border-image: linear-gradient(90deg, transparent 0%, rgba(139, 102, 36, 0.25) 50%, transparent 100%) 1 !important;
}

/* 6. Beige -> Dark: Bottom of Specs seamlessly dissolves into #specFilm (#0C0D0E) */
.specs#specifications {
  border-bottom: 1px solid transparent !important;
  border-image: linear-gradient(90deg, transparent 0%, rgba(212, 175, 85, 0.45) 50%, transparent 100%) 1 !important;
}
.specs#specifications::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(0deg, rgba(12, 13, 14, 0.95) 0%, rgba(12, 13, 14, 0.5) 50px, rgba(197, 186, 168, 0) 150px),
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(244, 217, 160, 0.09) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23grain)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%, 200px 200px;
}

/* 7. Dark -> Beige: Top of Location seamlessly dissolves from #specFilm */
.location#location {
  border-top: 1px solid transparent !important;
  border-image: linear-gradient(90deg, transparent 0%, rgba(212, 175, 85, 0.45) 50%, transparent 100%) 1 !important;
}
.location#location::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(12, 13, 14, 0.95) 0%, rgba(12, 13, 14, 0.5) 50px, rgba(189, 177, 157, 0) 140px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23grain)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 100% 100%, 200px 200px;
}

/* Adjacent dividers across lower sections */
.sold-out#anima,
.future#future,
.leaderboard#leaderboard,
.enquiry#enquiry {
  border-top: 1px solid transparent !important;
  border-image: linear-gradient(90deg, transparent 0%, rgba(139, 102, 36, 0.22) 50%, transparent 100%) 1 !important;
}

/* 8. Beige -> Dark: Bottom of Enquiry seamlessly dissolves into #final-brand */
.enquiry#enquiry {
  border-bottom: 1px solid transparent !important;
  border-image: linear-gradient(90deg, transparent 0%, rgba(212, 175, 85, 0.45) 50%, transparent 100%) 1 !important;
}
.enquiry#enquiry::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(0deg, rgba(12, 13, 14, 0.95) 0%, rgba(12, 13, 14, 0.5) 50px, rgba(197, 186, 168, 0) 150px),
    radial-gradient(ellipse 70% 50% at 50% 25%, rgba(244, 217, 160, 0.09) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23grain)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%, 200px 200px;
}

/* Tactile Micro-Texture & Blueprint Grids on remaining sections */
.philosophy::before,
.sold-out::before,
.future::before,
.leaderboard::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23grain)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.philosophy,
.leaderboard {
  background-image:
    linear-gradient(rgba(107, 77, 22, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 77, 22, 0.08) 1px, transparent 1px) !important;
  background-size: 80px 80px !important;
}

/* --- 4. HIGH-CONTRAST TEXT & VISIBILITY FIXES (SCOPED TO BEIGE SECTIONS) --- */
.editorial h1, .editorial h2, .editorial h3, .editorial h4, .editorial h5,
.philosophy h1, .philosophy h2, .philosophy h3, .philosophy h4, .philosophy h5,
.sustainability h1, .sustainability h2, .sustainability h3, .sustainability h4,
.specs h1, .specs h2, .specs h3, .specs h4,
.floor-plans h1, .floor-plans h2, .floor-plans h3, .floor-plans h4,
.location h1, .location h2, .location h3, .location h4,
.sold-out h1, .sold-out h2, .sold-out h3, .sold-out h4,
.leaderboard h1, .leaderboard h2, .leaderboard h3, .leaderboard h4,
.enquiry h1, .enquiry h2, .enquiry h3, .enquiry h4,
.editorial .section-header__title,
.philosophy .section-header__title,
.sustainability .section-header__title,
.floor-plans .section-header__title,
.specs .section-header__title,
.location .section-header__title,
.sold-out .section-header__title,
.leaderboard .section-header__title,
.enquiry .section-header__title,
.editorial__title,
.philosophy__word,
.sustainability__motto,
.specs__title,
.sold-out__title,
.enquiry__question {
  color: #111110 !important;
  letter-spacing: -0.02em;
}

/* Body & secondary paragraphs in beige sections: dark espresso charcoal */
.editorial p,
.editorial span:not([class*="meta"]),
.philosophy p,
.philosophy__desc,
.sustainability p,
.sustainability__quote,
.sustainability__card-desc,
.specs p,
.spec-item__text,
.spec-item__desc,
.location p,
.location__address,
.location__text,
.sold-out p,
.sold-out__text,
.leaderboard p,
.leaderboard__bio,
.enquiry p,
.enquiry__label {
  color: #2B2721 !important;
}

/* High-contrast Antique Brass for metadata labels in beige sections */
.editorial .type-meta,
.philosophy .type-meta,
.sustainability .type-meta,
.floor-plans .type-meta,
.specs .type-meta,
.location .type-meta,
.sold-out .type-meta,
.leaderboard .type-meta,
.enquiry .type-meta,
.editorial__meta,
.editorial .section-header__meta,
.philosophy .section-header__meta,
.sustainability .section-header__meta,
.floor-plans .section-header__meta,
.specs .section-header__meta,
.location .section-header__meta,
.sold-out .section-header__meta,
.leaderboard .section-header__meta,
.enquiry .section-header__meta,
.spec-item__number,
.sustainability__num,
.leaderboard__title,
.location__meta {
  color: #735218 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* ============================================================
   DARK CINEMATIC SECTIONS: RADIANT CHAMPAGNE & GOLD TYPOGRAPHY
   Fixes "Curated Architectural Moments", "Form dictated by light...",
   and "Specification in Motion" text visibility in dark sections.
   Strictly excludes #archScrollSection.
   ============================================================ */

/* Titles & Display Headings in Dark Sections */
.section--dark:not(.editorial):not(.specs):not(.sold-out):not(.enquiry):not(.sustainability):not(#archScrollSection) .section-header__title,
.spec-film .section-header__title,
.section--dark:not(.editorial):not(.specs):not(.sold-out):not(.enquiry):not(.sustainability):not(#archScrollSection) h1,
.section--dark:not(.editorial):not(.specs):not(.sold-out):not(.enquiry):not(.sustainability):not(#archScrollSection) h2,
.section--dark:not(.editorial):not(.specs):not(.sold-out):not(.enquiry):not(.sustainability):not(#archScrollSection) h3,
.section--dark:not(.editorial):not(.specs):not(.sold-out):not(.enquiry):not(.sustainability):not(#archScrollSection) h4,
.spec-film h1,
.spec-film h2,
.spec-film h3,
.spec-film h4,
.project-hero__name,
.brand-resolve__tagline,
.final-brand__tagline {
  color: #F4D9A0 !important;
  text-shadow: 0 0 28px rgba(200, 121, 44, 0.35) !important;
  letter-spacing: -0.01em;
}

/* Metadata & Badges in Dark Sections */
.section--dark:not(.editorial):not(.specs):not(.sold-out):not(.enquiry):not(.sustainability):not(#archScrollSection) .section-header__meta,
.spec-film .section-header__meta,
.section--dark:not(.editorial):not(.specs):not(.sold-out):not(.enquiry):not(.sustainability):not(#archScrollSection) .type-meta,
.spec-film .type-meta,
.spec-film__badge,
.spec-film__caption,
.project-hero__detail-label {
  color: #E5C378 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* Body & Descriptions in Dark Sections */
.section--dark:not(.editorial):not(.specs):not(.sold-out):not(.enquiry):not(.sustainability):not(#archScrollSection) p,
.section--dark:not(.editorial):not(.specs):not(.sold-out):not(.enquiry):not(.sustainability):not(#archScrollSection) .type-body,
.spec-film p,
.spec-film .type-body,
.project-hero__tagline,
.project-hero__detail-value,
.project-illustrative-caption,
.brand-resolve__desc {
  color: #D4CBBF !important;
}

/* ============================================================
   MULTI-PLANE SLIDING DEPTH EFFECT ACROSS SECTIONS
   Spatial elevation, concave room shading, and smooth sliding transitions
   Strictly excludes #archScrollSection
   ============================================================ */

/* Spatial elevation depth on dark sections */
.section--dark:not(.editorial):not(.specs):not(.sold-out):not(.enquiry):not(.sustainability):not(#archScrollSection),
.spec-film,
.project-hero,
.brand-resolve,
.final-brand {
  box-shadow: inset 0 28px 48px -16px rgba(0, 0, 0, 0.55), inset 0 -28px 48px -16px rgba(0, 0, 0, 0.55) !important;
}

/* Warm concave room depth on linen/stone beige sections */
.editorial,
.philosophy,
.sustainability,
.floor-plans,
.specs,
.location,
.sold-out,
.future,
.leaderboard,
.enquiry {
  box-shadow: inset 0 24px 44px -16px rgba(35, 27, 19, 0.18), inset 0 -24px 44px -16px rgba(35, 27, 19, 0.18) !important;
}

/* Subtle sliding border divider between consecutive sections */
section:not(#archScrollSection) + section:not(#archScrollSection) {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent 0%, rgba(212, 175, 85, 0.35) 50%, transparent 100%) 1;
}

/* Override inline styles in off-white sections that caused washed-out text */
.editorial [style*="color: var(--accent-gold-light)"],
.editorial [style*="color: var(--warm-gray)"],
.philosophy [style*="color: var(--warm-gray)"],
.sustainability [style*="color: var(--warm-gray)"],
.sustainability [style*="color: var(--accent-gold-light)"],
.specs [style*="color: var(--warm-gray)"],
.specs [style*="color: var(--accent-gold-light)"],
.location [style*="color: var(--warm-gray)"],
.sold-out [style*="color: var(--warm-gray)"],
.leaderboard [style*="color: var(--warm-gray)"],
.enquiry [style*="color: var(--warm-gray)"] {
  color: #2B2721 !important;
}

.editorial [style*="color: var(--accent-gold)"],
.specs [style*="color: var(--accent-gold)"],
.location [style*="color: var(--accent-gold)"] {
  color: #735218 !important;
}

/* Cards & UI Components on Warm Architectural Beige */
.sustainability__card,
.leaderboard__card {
  background: #CEC4B2 !important;
  border: 1px solid rgba(107, 77, 22, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 24px -8px rgba(35, 27, 19, 0.12) !important;
  border-radius: 4px;
}
.leaderboard__meta {
  background: #CEC4B2 !important;
}
.leaderboard__name,
.sustainability__card-title {
  color: #111110 !important;
}

.sustainability__quote {
  border-left: 2px solid #735218 !important;
}

/* Floor Plans Viewer */
.floor-plans__tab {
  background: #CEC4B2 !important;
  border: 1px solid rgba(107, 77, 22, 0.22) !important;
  color: #2B2721 !important;
}
.floor-plans__tab.active,
.floor-plans__tab:hover {
  background: var(--accent-olive) !important;
  color: #FFFFFF !important;
  border-color: var(--accent-olive) !important;
}
.floor-plans__viewer {
  background: #C7BCA9 !important;
  border: 1px solid rgba(107, 77, 22, 0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 12px 32px -10px rgba(35, 27, 19, 0.15) !important;
}
.floor-plans__control-btn {
  background: #CEC4B2 !important;
  border: 1px solid rgba(107, 77, 22, 0.22) !important;
  color: #2B2721 !important;
}
.floor-plans__control-btn:hover {
  background: rgba(139, 102, 36, 0.15) !important;
  border-color: #735218 !important;
  color: #735218 !important;
}

/* Location Map Container */
.location__map-container {
  border: 1px solid rgba(107, 77, 22, 0.25) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 12px 30px -10px rgba(35, 27, 19, 0.14) !important;
}

/* Sold-Out Badge */
.sold-out__badge {
  background: #CEC4B2 !important;
  border: 1px solid rgba(107, 77, 22, 0.24) !important;
  color: var(--accent-olive) !important;
}

/* Enquiry Form Components */
.enquiry__option {
  background: #CEC4B2 !important;
  border: 1px solid rgba(56, 53, 47, 0.28) !important;
  color: #2B2721 !important;
}
.enquiry__option:hover,
.enquiry__option.selected {
  border-color: #735218 !important;
  color: #111110 !important;
  background: rgba(139, 102, 36, 0.15) !important;
}
.enquiry__input {
  background: #C7BCA9 !important;
  border: 1px solid rgba(56, 53, 47, 0.3) !important;
  color: #111110 !important;
}
.enquiry__input:focus {
  border-color: #735218 !important;
  background: #D4CAB8 !important;
}

/* Buttons in Content */
.btn-luxury,
.enquiry__submit {
  background: var(--accent-olive) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-radius: 2px !important;
  transition: all var(--duration-fast) ease !important;
}
.btn-luxury:hover,
.enquiry__submit:hover {
  background: #4E5D37 !important;
  box-shadow: 0 4px 16px rgba(56, 67, 38, 0.3) !important;
}

/* Persistent CTA Bar */
.persistent-cta {
  background: rgba(12, 13, 14, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(200, 168, 107, 0.2) !important;
}
.persistent-cta__btn {
  background: var(--accent-gold) !important;
  color: #0c0d0e !important;
  font-weight: 600 !important;
}

/* Cookie Bar */
.cookie-bar {
  background: #141618 !important;
  border-top: 1px solid rgba(200, 168, 107, 0.2) !important;
  color: var(--paper) !important;
}
.cookie-bar__text {
  color: var(--paper) !important;
}
.cookie-bar__btn--accept {
  background: var(--accent-gold) !important;
  color: #0c0d0e !important;
}
.cookie-bar__btn--decline {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: var(--paper) !important;
}

/* --- 5. TASK 2 & 3: MOBILE PADDING & SCROLL GATE --- */
@media (max-width: 900px) {
  section {
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)) !important;
    overflow-x: clip;
  }

  .philosophy__content {
    padding: var(--space-lg) var(--gutter) !important;
  }

  h1, h2, h3, h4, h5 {
    overflow-wrap: anywhere;
  }
}

.arch-scroll__mobile-fallback {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .arch-scroll {
    height: auto !important;
    min-height: unset !important;
  }
  .arch-scroll__sticky {
    display: none !important;
  }
  .arch-scroll__mobile-fallback {
    display: flex !important;
  }
}


/* ============================================================
   AMBIENT LIGHT DEPTH SYSTEM (STATIC CSS)
   Tokens, Edge Highlights, Soft Warm Depth, Corner Catch & Hairline Dividers
   Strictly excludes #archScrollSection (canvas, sticky wrapper, container)
   ============================================================ */

:root {
  --glow-amber: 200 121 44;     /* #C8792C */
  --glow-gold: 212 175 85;      /* Warm Architectural Gold */
  --glow-champagne: 244 217 160;/* #F4D9A0 */
}

/* 1. Images, Pictures, Video Frames, Cards: 1px inner edge highlight & soft warm depth */
.glow-media,
.glow-card,
.editorial__image:not(#archScrollSection *),
.sold-out__image:not(#archScrollSection *),
.spec-film__wrapper:not(#archScrollSection *),
.leaderboard__card:not(#archScrollSection *),
.sustainability__card:not(#archScrollSection *),
.floor-plans__viewer:not(#archScrollSection *),
.project-hero__details > div:not(#archScrollSection *),
.location__map-container:not(#archScrollSection *) {
  box-shadow: inset 0 0 0 1px rgb(var(--glow-champagne) / 0.10), 0 10px 30px -12px rgb(var(--glow-amber) / 0.14) !important;
  position: relative;
}

/* Corner Light: Subtle warm radial gradient in top-left corner, no filters */
.glow-corner::before,
.glow-media::before,
.glow-card::before,
.editorial__image:not(#archScrollSection *)::before,
.sold-out__image:not(#archScrollSection *)::before,
.spec-film__wrapper:not(#archScrollSection *)::before,
.leaderboard__card:not(#archScrollSection *)::before,
.sustainability__card:not(#archScrollSection *)::before,
.floor-plans__viewer:not(#archScrollSection *)::before,
.project-hero__details > div:not(#archScrollSection *)::before,
.location__map-container:not(#archScrollSection *)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, rgb(var(--glow-champagne) / 0.08) 0%, transparent 40%);
  pointer-events: none;
  z-index: 1;
}

/* 2. Borders and Dividers: Thin gradient line fading at both ends, 1px, no glow */
.glow-rule,
hr:not(#archScrollSection *),
.divider:not(#archScrollSection *) {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgb(var(--glow-gold) / 0.35) 50%, transparent 100%) !important;
}

.specs__list > .spec-item:not(#archScrollSection *) {
  border-top: 1px solid transparent !important;
  border-image: linear-gradient(90deg, transparent 0%, rgb(var(--glow-gold) / 0.35) 50%, transparent 100%) 1 !important;
}

.specs__list > .spec-item:last-child:not(#archScrollSection *) {
  border-bottom: 1px solid transparent !important;
  border-image: linear-gradient(90deg, transparent 0%, rgb(var(--glow-gold) / 0.35) 50%, transparent 100%) 1 !important;
}

/* 3. Headings (h1-h3, large display text): Barely visible text-shadow (not body/labels) */
.glow-heading,
h1:not(#archScrollSection *),
h2:not(#archScrollSection *),
h3:not(#archScrollSection *),
.project-hero__name:not(#archScrollSection *),
.editorial__title:not(#archScrollSection *),
.sold-out__name:not(#archScrollSection *),
.future__title:not(#archScrollSection *) {
  text-shadow: 0 0 24px rgb(var(--glow-amber) / 0.10);
}

/* 4. Section Edges: Alternating corner ambient light source, pointer-events: none, behind content */
.brand-resolve::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 600px at 90% 10%, rgb(var(--glow-amber) / 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.editorial#about::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 600px at 10% 15%, rgb(var(--glow-amber) / 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.philosophy::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 600px at 85% 85%, rgb(var(--glow-amber) / 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.sustainability::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 600px at 90% 15%, rgb(var(--glow-amber) / 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* NOTE: #archScrollSection is intentionally excluded. Zero pseudo-elements, zero effects. */

.project-hero#deonarayan::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 600px at 10% 20%, rgb(var(--glow-amber) / 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.floor-plans#plans::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 600px at 85% 15%, rgb(var(--glow-amber) / 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.specs#specifications::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 600px at 10% 15%, rgb(var(--glow-amber) / 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.spec-film#specFilm::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 600px at 85% 85%, rgb(var(--glow-amber) / 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.location#location::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 600px at 90% 15%, rgb(var(--glow-amber) / 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.sold-out#anima::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 600px at 10% 20%, rgb(var(--glow-amber) / 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.future#future::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 600px at 15% 85%, rgb(var(--glow-amber) / 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.leaderboard#leaderboard::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 600px at 85% 15%, rgb(var(--glow-amber) / 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.enquiry#enquiry::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 600px at 10% 20%, rgb(var(--glow-amber) / 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.final-brand::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 600px at 85% 85%, rgb(var(--glow-amber) / 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

footer.footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 500px at 15% 20%, rgb(var(--glow-amber) / 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* 5. Buttons and CTAs: 1px champagne border (0.25 alpha) & faint shadow */
.btn-luxury:not(#archScrollSection *),
.btn-luxury-outline:not(#archScrollSection *),
.nav__cta:not(#archScrollSection *),
.enquiry__submit:not(#archScrollSection *),
.persistent-cta__btn:not(#archScrollSection *),
.floor-plans__control-btn:not(#archScrollSection *),
.disclaimer-modal__btn:not(#archScrollSection *),
.cookie-bar__btn--accept:not(#archScrollSection *),
.btn-whatsapp:not(#archScrollSection *) {
  border: 1px solid rgb(var(--glow-champagne) / 0.25) !important;
  box-shadow: 0 6px 20px -10px rgb(var(--glow-amber) / 0.18) !important;
  transition: border-color 200ms ease, box-shadow 200ms ease, opacity 200ms ease, background-color 200ms ease !important;
}

.btn-luxury:not(#archScrollSection *):hover,
.btn-luxury-outline:not(#archScrollSection *):hover,
.nav__cta:not(#archScrollSection *):hover,
.enquiry__submit:not(#archScrollSection *):hover,
.persistent-cta__btn:not(#archScrollSection *):hover,
.floor-plans__control-btn:not(#archScrollSection *):hover,
.disclaimer-modal__btn:not(#archScrollSection *):hover,
.cookie-bar__btn--accept:not(#archScrollSection *):hover,
.btn-whatsapp:not(#archScrollSection *):hover {
  border-color: rgb(var(--glow-champagne) / 0.30) !important;
  box-shadow: 0 6px 20px -10px rgb(var(--glow-amber) / 0.23) !important;
}

/* Light / Cream sections: amber at half alpha for warm subtlety and WCAG AA preservation */
.section--light,
.section--cream {
  --glow-amber-alpha: 0.05;
}
.section--light .glow-heading,
.section--light h1,
.section--light h2,
.section--light h3,
.section--cream .glow-heading,
.section--cream h1,
.section--cream h2,
.section--cream h3 {
  text-shadow: 0 0 24px rgb(var(--glow-amber) / 0.05);
}
.section--light .glow-card,
.section--light .glow-media,
.section--cream .glow-card,
.section--cream .glow-media {
  box-shadow: inset 0 0 0 1px rgb(var(--glow-champagne) / 0.12), 0 10px 24px -12px rgb(var(--glow-amber) / 0.07) !important;
}


/* ============================================================
   ARCHITECTURAL WALKTHROUGH CANVAS LOADER (GOLD ON CHARCOAL)
   ============================================================ */
.arch-scroll__loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #141414;
  z-index: 10;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  pointer-events: none;
}

.arch-scroll__loader.is-loaded {
  opacity: 0;
  visibility: hidden;
}

.arch-scroll__loader-bar {
  width: 140px;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
}

.arch-scroll__loader-fill {
  height: 100%;
  background: var(--accent-gold, #C7A86D);
  width: 0%;
  transition: width 0.1s ease-out;
}

.arch-scroll__loader-text {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--accent-gold, #C7A86D);
  text-transform: uppercase;
}

/* ============================================================
   ABOUT SKYSCRAPER SECTION
   ============================================================ */
.about-section {
  padding: var(--space-4xl) 0;
  background: var(--charcoal);
  position: relative;
  border-top: 1px solid var(--charcoal-light);
}

.about-section__container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.about-section__header {
  margin-bottom: var(--space-2xl);
}

.about-section__intro {
  font-family: var(--sans);
  font-size: var(--text-lg);
  line-height: 1.8;
  color: var(--warm-gray);
  max-width: 920px;
  margin-bottom: var(--space-3xl);
}

.about-section__intro p + p {
  margin-top: var(--space-md);
}

.about-section__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
  border-top: 1px solid rgba(212, 201, 180, 0.12);
  padding-top: var(--space-2xl);
}

@media (max-width: 900px) {
  .about-section__pillars {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

.about-pillar__title {
  font-family: var(--serif);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--accent-gold);
  margin-bottom: var(--space-sm);
}

.about-pillar__body {
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--warm-gray);
  font-weight: 300;
}

/* ============================================================
   SERVICES SECTION
   ============================================================ */
.services-section {
  padding: var(--space-4xl) 0;
  background: var(--charcoal);
  position: relative;
  border-top: 1px solid var(--charcoal-light);
}

.services-section__container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.services-section__header {
  margin-bottom: var(--space-3xl);
  max-width: 860px;
}

.services-section__title {
  font-family: var(--serif);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: 300;
  line-height: 1.1;
  color: var(--paper);
  margin-bottom: var(--space-md);
}

.services-section__intro {
  font-family: var(--sans);
  font-size: var(--text-lg);
  line-height: 1.8;
  color: var(--warm-gray);
  font-weight: 300;
}

.services-section__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  margin-bottom: var(--space-3xl);
}

@media (max-width: 800px) {
  .services-section__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

.service-card {
  background: linear-gradient(165deg, #181a1d 0%, #121315 100%);
  border: 1px solid rgba(212, 201, 180, 0.12);
  border-radius: 12px;
  padding: var(--space-xl);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(214, 182, 107, 0.35);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.5), 0 0 20px rgba(214, 182, 107, 0.08);
}

.service-card__num {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--accent-gold);
  margin-bottom: var(--space-sm);
  display: block;
}

.service-card__title {
  font-family: var(--serif);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.2;
  color: var(--paper);
  margin-bottom: var(--space-sm);
}

.service-card__body {
  font-family: var(--sans);
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--warm-gray);
  font-weight: 300;
}

.services-section__closing {
  border-top: 1px solid rgba(212, 201, 180, 0.12);
  padding-top: var(--space-2xl);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  max-width: 860px;
}

.services-section__closing p {
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--warm-gray);
  font-weight: 300;
}