/* ══════════════════════════════════════════════════════════════
   Nambiar District 25 — static site stylesheet
   Base design system (ported from the original globals.css)
   ══════════════════════════════════════════════════════════════ */

:root {
  --forest: #1e2440;
  --forest-light: #2f3760;
  --forest-dark: #0d1120;
  --ivory: #f7f9fc;
  --ivory-muted: #e9eff7;
  --stone: #d8e1ee;
  --stone-dark: #8c97a9;
  --warm-grey: #66707f;
  --bronze: #cea144;
  --bronze-light: #d3a94e;
  --champagne: #e9ce7c;
  --olive: #4b5570;
  --slate: #333c52;
  --gold: #c18933;
  --gold-light: #d0a549;
  --gold-muted: #b37129;
  --charcoal: #111726;
  --grey-100: #f5f8fc;
  --grey-200: #e3eaf3;
  --grey-400: #99a3b4;
  --grey-600: #5a6478;
  --grey-800: #242c3d;

  /* Font stacks (Google Fonts) */
  --font-montserrat: "Montserrat", system-ui, sans-serif;
  --font-proza: "Proza Libre", Georgia, serif;
  --font-script: "Pinyon Script", cursive;

  /* Typography scale */
  --text-hero: clamp(5.5rem, 12vw, 7.5rem);
  --text-display: clamp(3.25rem, 9vw, 8rem);
  --text-headline: clamp(2.25rem, 5.5vw, 5rem);
  --text-section: clamp(3.5rem, 6vw, 4.5rem);
  --text-title: clamp(1.75rem, 3.2vw, 2.25rem);
  --text-subtitle: clamp(1.75rem, 2.8vw, 2.25rem);
  --text-body: clamp(1.125rem, 1.4vw, 1.25rem);
  --text-caption: 0.8125rem;
  --text-masthead: clamp(2.5rem, 6vw, 5.5rem);

  /* Spacing rhythm */
  --space-micro-xs: 8px;
  --space-micro-sm: 12px;
  --space-micro-md: 16px;
  --space-micro-lg: 24px;
  --space-paragraph: clamp(24px, 3vw, 32px);
  --space-heading: clamp(56px, 8vw, 80px);
  --space-section: clamp(56px, 7vw, 104px);
  --space-hero-breath: clamp(120px, 14vw, 180px);
  --space-anticipation: clamp(240px, 24vw, 320px);
  --gutter: clamp(1.75rem, 5vw, 4rem);

  /* Surfaces */
  --surface-stone: linear-gradient(165deg, var(--ivory) 0%, var(--stone) 120%);
  --surface-matte: color-mix(in srgb, var(--ivory) 96%, var(--stone) 4%);
  --surface-glass: rgba(248, 250, 252, 0.72);

  /* Shadows — interior lighting */
  --shadow-lift: 0 4px 24px rgba(13, 17, 32, 0.08);
  --shadow-soft: 0 2px 12px rgba(13, 17, 32, 0.05);
  --shadow-depth: 0 8px 40px rgba(13, 17, 32, 0.12);

  --radius-button: 2px;
  --radius-card: 20px;
  --radius-card-lg: 28px;
  --radius-pill: 9999px;

  /* Elevated depth system */
  --shadow-card: 0 1px 2px rgba(13, 17, 32, 0.04), 0 8px 24px rgba(13, 17, 32, 0.06), 0 24px 60px rgba(13, 17, 32, 0.08);
  --shadow-card-hover: 0 2px 4px rgba(13, 17, 32, 0.06), 0 16px 40px rgba(13, 17, 32, 0.1), 0 40px 90px rgba(13, 17, 32, 0.14);
  --shadow-float: 0 30px 80px -20px rgba(13, 17, 32, 0.35);

  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --background: var(--ivory);
  --foreground: var(--charcoal);

  /* Bootstrap bridge */
  --bs-body-font-family: var(--font-montserrat);
  --bs-body-bg: var(--forest-dark);
  --bs-body-color: var(--charcoal);
}

html {
  font-family: var(--font-montserrat);
  /* Deep base so the closing footer never bleeds into a white overscroll gap */
  background: var(--forest-dark);
  overscroll-behavior-y: none;
}

* {
  box-sizing: border-box;
}

/* Lenis smooth-scroll plumbing */
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;
}

body {
  /* Deep base (matches the closing footer) so no cream strip bleeds through at the page end */
  background: var(--forest-dark);
  color: var(--foreground);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  /* clip keeps sticky scroll-stacks working (hidden breaks position:sticky on mobile) */
  overflow-x: clip;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-montserrat);
  font-weight: 400;
  margin-top: 0;
}

button, input, textarea, select {
  font-family: var(--font-montserrat);
}

img, video {
  max-width: 100%;
}

/* Film grain overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}

::selection {
  background: var(--gold);
  color: var(--forest-dark);
}

/* ── Typography utilities ── */

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

.text-headline {
  font-family: var(--font-montserrat);
  font-size: var(--text-headline);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 400;
}

.text-title {
  font-family: var(--font-montserrat);
  font-size: var(--text-title);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.text-body {
  font-family: var(--font-montserrat);
  font-size: var(--text-body);
  line-height: 1.82;
  letter-spacing: 0.012em;
  max-width: 42em;
}

.text-masthead {
  font-family: var(--font-montserrat);
  font-size: var(--text-masthead);
  line-height: 0.92;
  letter-spacing: -0.025em;
  font-weight: 300;
}

.text-subtitle {
  font-family: var(--font-script);
  font-size: clamp(1.375rem, 2.2vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 400;
}

.text-colophon {
  font-family: var(--font-montserrat);
  font-size: var(--text-caption);
  line-height: 1.6;
  letter-spacing: 0.22em;
  font-weight: 400;
  text-transform: none;
}

.text-caption {
  font-family: var(--font-montserrat);
  font-size: var(--text-caption);
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
}

.text-editorial {
  font-family: var(--font-montserrat);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.2;
  font-weight: 300;
  font-style: italic;
}

.text-pullquote {
  font-family: var(--font-montserrat);
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 300;
  font-style: italic;
}

.prose-measure {
  max-width: 36em;
  letter-spacing: -0.01em;
}

.font-display,
.font-proza {
  font-family: var(--font-proza);
}

.font-script {
  font-family: var(--font-script);
}

/* ── Section rhythm ── */

.section-padding {
  padding-block: var(--space-section);
  padding-inline: clamp(1.75rem, 7vw, 6rem);
}

.section-breath {
  margin-block: var(--space-section);
}

.hero-breath {
  margin-block-start: var(--space-hero-breath);
}

.section-silence {
  margin-block: clamp(4rem, 10vw, 8rem);
}

.section-anticipation {
  margin-block: var(--space-anticipation);
}

.experience-dark {
  background: var(--forest-dark);
  color: var(--ivory);
}

.experience-light {
  background: var(--ivory);
  color: var(--charcoal);
}

section[id]:not(#home) {
  scroll-margin-top: 72px;
}

@media (min-width: 768px) {
  main {
    padding-bottom: 2rem;
  }
}

/* ── Lines & dividers ── */

.gold-line {
  width: 48px;
  height: 1px;
  background: var(--bronze);
  opacity: 0.55;
}

.bronze-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bronze) 20%, var(--bronze) 80%, transparent);
  opacity: 0.65;
}

.fade-divider {
  height: clamp(3rem, 8vw, 6rem);
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--stone) 30%, transparent) 50%, transparent);
}

/* Editorial 12-column grid */
.editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}

.btn-luxury {
  font-family: var(--font-montserrat);
  border-radius: var(--radius-button);
}

.shadow-lift { box-shadow: var(--shadow-lift); }
.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-depth { box-shadow: var(--shadow-depth); }

/* Refined cursor — hide default pointer except on form fields */
body.cursor-refined,
body.cursor-refined *:not(input):not(textarea):not(select):not([contenteditable="true"]) {
  cursor: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body.cursor-refined,
  body.cursor-refined * {
    cursor: auto !important;
  }
}

.documentary {
  isolation: isolate;
}

.scene-transition-breath {
  height: clamp(7rem, 16vw, 12rem);
}

.scene-transition-dissolve {
  height: clamp(8rem, 18vw, 14rem);
}

/* Publication imagery — no cards, images dominate */
.pub-image {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.pub-image-inner {
  width: 100%;
  height: 100%;
}

.pub-image-media {
  transition: transform 2.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  .pub-image:hover .pub-image-media {
    transform: scale(1.02);
  }
}

/* Editorial statistics — not a grid */
.stat-editorial {
  list-style: none;
  padding: 0;
  margin: 0;
}

.stat-editorial li {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-block: clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid rgba(27, 33, 56, 0.1);
  transition: padding-left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  .stat-editorial li:hover {
    padding-left: 0.75rem;
  }
}

.stat-editorial li:last-child {
  border-bottom: none;
}

.stat-editorial-light li {
  border-bottom-color: rgba(248, 250, 252, 0.12);
}

.stat-editorial-label {
  font-family: var(--font-montserrat);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 300;
  color: var(--grey-600);
  letter-spacing: -0.01em;
}

.stat-editorial-value {
  font-family: var(--font-montserrat);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--forest);
  flex-shrink: 0;
}

.stat-editorial-light .stat-editorial-label {
  color: rgba(248, 250, 252, 0.55);
}

.stat-editorial-light .stat-editorial-value {
  color: var(--gold-light);
}

.scene-dissolve-to-forest {
  background: linear-gradient(to bottom, var(--ivory) 0%, color-mix(in srgb, var(--ivory) 40%, var(--forest-dark)) 50%, var(--forest-dark) 100%);
}

.scene-dissolve-to-charcoal {
  background: linear-gradient(to bottom, var(--forest-dark) 0%, color-mix(in srgb, var(--forest-dark) 30%, var(--charcoal)) 50%, var(--charcoal) 100%);
}

.scene-dissolve-to-ivory {
  background: linear-gradient(to bottom, var(--charcoal) 0%, color-mix(in srgb, var(--charcoal) 25%, var(--ivory)) 50%, var(--ivory) 100%);
}

.scene-feature {
  border: 1px solid rgba(248, 250, 252, 0.12);
  background: rgba(12, 16, 30, 0.35);
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--ivory);
}

::-webkit-scrollbar-thumb {
  background: var(--gold-muted);
  border-radius: 3px;
}

:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 4px;
}

.img-luxury {
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.horizontal-scroll {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.horizontal-scroll::-webkit-scrollbar {
  display: none;
}

.horizontal-scroll > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* ── Luxury motion & editorial ── */

.marquee-mask {
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(12, 16, 30, 0.45) 100%);
}

.editorial-list,
.editorial-list-2col {
  list-style: none;
  padding: 0;
  margin: 0;
}

.editorial-list-2col {
  columns: 1;
  column-gap: clamp(2rem, 6vw, 5rem);
}

@media (min-width: 768px) {
  .editorial-list-2col {
    columns: 2;
  }
}

.editorial-list-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.35rem 0.25rem 1.35rem 0;
  border-bottom: 1px solid rgba(27, 33, 56, 0.08);
  break-inside: avoid;
  transition: padding-left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Bronze base-line that draws in on hover */
.editorial-list-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.editorial-list-item-light {
  border-bottom-color: rgba(248, 250, 252, 0.08);
}

.editorial-list-index {
  font-family: var(--font-montserrat);
  font-size: 0.875rem;
  color: var(--gold-muted);
  letter-spacing: 0.1em;
  flex-shrink: 0;
  width: 2rem;
  transition: color 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.editorial-list-text {
  font-family: var(--font-montserrat);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 300;
  line-height: 1.35;
  color: var(--forest);
  letter-spacing: -0.01em;
  transition: color 0.5s ease;
}

@media (hover: hover) {
  .editorial-list-item:hover {
    padding-left: 1rem;
  }
  .editorial-list-item:hover::after {
    transform: scaleX(1);
  }
  .editorial-list-item:hover .editorial-list-index {
    color: var(--bronze);
    transform: translateY(-2px);
  }
  .editorial-list-item:hover .editorial-list-text {
    color: var(--charcoal);
  }
  .editorial-list-item-light:hover .editorial-list-text {
    color: #fff;
  }
  .editorial-list-item-light:hover .editorial-list-index {
    color: var(--gold-light);
  }
}

.editorial-list-item-light .editorial-list-text {
  color: var(--ivory);
}

.editorial-list-item-light .editorial-list-index {
  color: var(--gold);
}

.film-strip {
  display: flex;
  gap: clamp(1rem, 3vw, 2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
}

.film-strip::-webkit-scrollbar {
  display: none;
}

.film-strip > * {
  scroll-snap-align: center;
  flex-shrink: 0;
}

.stats-cinematic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid rgba(248, 250, 252, 0.1);
}

@media (min-width: 768px) {
  .stats-cinematic {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stats-cinematic > * {
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem);
  border-right: 1px solid rgba(248, 250, 252, 0.08);
  border-bottom: 1px solid rgba(248, 250, 252, 0.08);
}

@media (min-width: 768px) {
  .stats-cinematic > *:nth-child(4n) {
    border-right: none;
  }
}

/* Hero cinematic grain */
.hero-grain {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px;
  pointer-events: none;
}

#overview {
  position: relative;
  z-index: 1;
  margin-top: 0;
}

.narrative-film {
  overflow-x: hidden;
}

.museum-plaque {
  letter-spacing: 0.18em;
  font-size: 0.75rem;
}

.building-breathe {
  animation: building-breathe 12s ease-in-out infinite;
}

@keyframes building-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

@media (prefers-reduced-motion: reduce) {
  .building-breathe {
    animation: none;
  }
}

.night-lights {
  background:
    radial-gradient(circle at 72% 38%, rgba(208, 165, 73, 0.15) 0%, transparent 8%),
    radial-gradient(circle at 45% 52%, rgba(239, 217, 137, 0.12) 0%, transparent 6%),
    radial-gradient(circle at 28% 65%, rgba(233, 206, 124, 0.1) 0%, transparent 5%);
}

.architectural-text {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}

.cinematic-time {
  font-variant-numeric: tabular-nums;
}

/* Laser cursor — architect pointer */
.laser-cursor {
  transform: translate(-50%, -50%);
  will-change: transform;
}

.laser-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--champagne);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(233, 206, 124, 0.6);
}

.laser-crosshair-h,
.laser-crosshair-v {
  position: absolute;
  background: rgba(233, 206, 124, 0.35);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.laser-crosshair-h {
  width: 20px;
  height: 1px;
}

.laser-crosshair-v {
  width: 1px;
  height: 20px;
}

/* ── Inquiry form — compact, no scroll ── */

.inquiry-panel {
  position: relative;
  background: linear-gradient(168deg, #fdfeff 0%, var(--ivory) 48%, #e8eef7 100%);
  border: 1px solid color-mix(in srgb, var(--bronze) 22%, var(--stone) 78%);
  border-radius: 1.375rem;
  box-shadow: 0 4px 16px rgba(13, 17, 32, 0.06), 0 24px 56px rgba(13, 17, 32, 0.14);
  overflow: hidden;
}

.inquiry-panel-body {
  padding: 1.625rem 1.75rem 1.5rem;
}

@media (min-width: 640px) {
  .inquiry-panel-body {
    padding: 1.875rem 2rem 1.625rem;
  }
}

.inquiry-thanks {
  padding-block: 2.5rem;
  text-align: center;
}

.inquiry-close {
  position: absolute;
  top: 1.125rem;
  right: 1.125rem;
  z-index: 2;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.32;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.inquiry-close:hover {
  opacity: 0.75;
  transform: rotate(90deg);
}

.inquiry-close-line {
  position: absolute;
  width: 12px;
  height: 1px;
  background: var(--charcoal);
}

.inquiry-close-line--a { transform: rotate(45deg); }
.inquiry-close-line--b { transform: rotate(-45deg); }

.inquiry-logo {
  display: flex;
  align-items: center;
}

.inquiry-eyebrow {
  font-family: var(--font-montserrat);
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--stone-dark);
  margin-bottom: 0.75rem;
}

.inquiry-headline {
  font-family: var(--font-montserrat);
  font-size: clamp(1.375rem, 4.5vw, 1.625rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--forest);
  margin-bottom: 0.625rem;
}

.inquiry-copy {
  font-family: var(--font-montserrat);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--grey-600);
  margin-bottom: 1.25rem;
  max-width: 36ch;
}

@media (max-width: 767px) {
  .inquiry-headline {
    font-size: 1.35rem;
    margin-bottom: 0.4rem;
  }
  .inquiry-copy {
    font-size: 0.8125rem;
    margin-bottom: 1rem;
  }
}

.inquiry-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.inquiry-submit {
  margin-top: 0.375rem;
  border-radius: 9999px !important;
}

.inquiry-footer {
  margin-top: 1.125rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--bronze) 12%, transparent);
  text-align: center;
  font-family: var(--font-montserrat);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--grey-400);
}

.inquiry-footer-link {
  margin-top: 0.875rem;
  text-align: center;
  font-family: var(--font-montserrat);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form-label {
  font-family: var(--font-montserrat);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-dark);
}

.form-input {
  width: 100%;
  padding: 0.375rem 0 0.5rem;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--stone) 65%, var(--grey-200) 35%);
  background: transparent;
  color: var(--charcoal);
  font-family: var(--font-montserrat);
  font-size: 0.9375rem;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.35s ease;
  border-radius: 0;
}

.form-input:focus {
  border-bottom-color: var(--bronze);
  box-shadow: none;
}

/* Bootstrap validation, restyled for the underline fields.
   Bootstrap reveals `.invalid-feedback` on its own (the `.is-invalid ~` and
   `.was-validated :invalid ~` selectors are element-agnostic), but its border
   and colour states are scoped to `.form-control`, so `.form-input` needs its
   own — flat underlines, no background icons. */
.invalid-feedback {
  margin-top: 0.375rem;
  font-family: var(--font-montserrat);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: #dc2626;
}

.form-input.is-invalid,
.was-validated .form-input:invalid {
  border-bottom-color: #dc2626;
}

.form-input.is-invalid:focus,
.was-validated .form-input:invalid:focus {
  border-bottom-color: #dc2626;
}

/* Valid fields stay on-brand rather than turning Bootstrap green */
.form-input.is-valid,
.was-validated .form-input:valid {
  border-bottom-color: var(--bronze);
}

/* Submitting overlay — fades in over the whole page (above Bootstrap modals
   at 1055 and the film grain at 9998) so the lead POST can't be fired twice. */
.lead-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.125rem;
  background: color-mix(in srgb, var(--ivory) 86%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.lead-loader.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease, visibility 0s;
}

.lead-loader-ring {
  width: 46px;
  height: 46px;
  border: 1px solid color-mix(in srgb, var(--bronze) 22%, transparent);
  border-top-color: var(--bronze);
  border-radius: 50%;
  animation: lead-loader-spin 0.9s linear infinite;
}

.lead-loader-text {
  margin: 0;
  font-family: var(--font-montserrat);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-dark);
}

@keyframes lead-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lead-loader,
  .lead-loader.is-active {
    transition-duration: 0.01ms;
  }

  .lead-loader-ring {
    animation-duration: 2.4s;
  }
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM SYSTEM — confident, layered, cohesive
   ═══════════════════════════════════════════════════════════ */

.px-container {
  padding-inline: clamp(1.5rem, 6vw, 6rem);
}

.mx-frame {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
}

/* Eyebrow / kicker — small confident label with a bronze tick */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-montserrat);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bronze);
}

.kicker::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.kicker-center::after {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

/* Display headings — bold confident statements */
.h-hero {
  font-family: var(--font-montserrat);
  font-weight: 300;
  font-size: clamp(2.75rem, 8vw, 7rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.h-section {
  font-family: var(--font-montserrat);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.h-card {
  font-family: var(--font-montserrat);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.lede {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.7;
  font-weight: 300;
  color: var(--grey-600);
}

/* Premium card surface */
.p-card {
  position: relative;
  border-radius: var(--radius-card);
  background: #fff;
  border: 1px solid rgba(27, 33, 56, 0.07);
  box-shadow: var(--shadow-card);
  transition: transform 0.6s var(--ease-cinematic), box-shadow 0.6s var(--ease-cinematic);
  overflow: hidden;
}

@media (hover: hover) {
  .p-card-interactive:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
  }
}

.p-card-dark {
  background: var(--forest-dark);
  border-color: rgba(248, 250, 252, 0.08);
  color: var(--ivory);
}

.p-card-media {
  transition: transform 1.2s var(--ease-cinematic);
}

@media (hover: hover) {
  .p-card-interactive:hover .p-card-media {
    transform: scale(1.05);
  }
}

/* Pill buttons */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border-radius: var(--radius-pill);
  border: 0;
  font-family: var(--font-montserrat);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.95rem 1.9rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.4s var(--ease-cinematic), background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  will-change: transform;
}

.btn-pill:active {
  transform: scale(0.97);
}

.btn-solid {
  background: var(--forest);
  color: var(--ivory);
  box-shadow: 0 10px 30px -10px rgba(27, 33, 56, 0.5);
}

@media (hover: hover) {
  .btn-solid:hover {
    background: var(--forest-dark);
    color: var(--ivory);
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -12px rgba(27, 33, 56, 0.6);
  }
}

.btn-gold {
  background: var(--bronze);
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(206, 161, 68, 0.6);
}

@media (hover: hover) {
  .btn-gold:hover {
    background: var(--bronze-light);
    color: #fff;
    transform: translateY(-2px);
  }
}

.btn-outline {
  background: transparent;
  border: 1px solid rgba(27, 33, 56, 0.25);
  color: var(--forest);
}

@media (hover: hover) {
  .btn-outline:hover {
    border-color: var(--forest);
    background: var(--forest);
    color: var(--ivory);
    transform: translateY(-2px);
  }
}

.btn-ghost-light {
  background: rgba(248, 250, 252, 0.1);
  border: 1px solid rgba(248, 250, 252, 0.3);
  color: var(--ivory);
  backdrop-filter: blur(8px);
}

@media (hover: hover) {
  .btn-ghost-light:hover {
    background: var(--ivory);
    color: var(--forest);
    transform: translateY(-2px);
  }
}

/* Soft ambient section backgrounds */
.bg-canvas {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(206, 161, 68, 0.06), transparent 45%),
    radial-gradient(100% 70% at 0% 100%, rgba(75, 85, 112, 0.05), transparent 45%),
    var(--ivory);
}

.bg-canvas-deep {
  background: var(--forest-dark);
}

/* Chip — small rounded tag */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(27, 33, 56, 0.12);
  background: rgba(255, 255, 255, 0.6);
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--grey-600);
  transition: all 0.4s var(--ease-cinematic);
}

@media (hover: hover) {
  .chip:hover {
    border-color: var(--bronze);
    color: var(--forest);
    background: #fff;
  }
}

.chip-dark {
  border-color: rgba(248, 250, 252, 0.14);
  background: rgba(248, 250, 252, 0.05);
  color: rgba(248, 250, 252, 0.75);
}

/* ── Amenities marquee ── */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 1.5rem;
  animation: marquee-scroll var(--marquee-duration, 48s) linear infinite;
  will-change: transform;
}

.marquee-track.is-reverse {
  animation-direction: reverse;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
  .marquee {
    overflow-x: auto;
  }
}

/* ── Static-site chrome (scroll progress, lightbox, inquiry modal shell) ── */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1100;
  pointer-events: none;
  background: transparent;
}

.scroll-progress__bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--bronze), var(--gold-light));
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.modal-luxury .modal-content {
  background: var(--ivory);
  border: 1px solid color-mix(in srgb, var(--bronze) 20%, var(--stone) 80%);
  border-radius: 1.5rem;
  box-shadow: 0 30px 80px rgba(13, 17, 32, 0.4);
  overflow: hidden;
}

.modal-backdrop.show {
  opacity: 0.6;
  background-color: var(--charcoal);
}

.lightbox-modal .modal-content {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.lightbox-modal img {
  width: 100%;
  height: auto;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.lightbox-modal .lightbox-caption {
  color: rgba(248, 250, 252, 0.8);
  text-align: center;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

.lightbox-close {
  position: absolute;
  top: -2.5rem;
  right: 0;
  z-index: 5;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  color: var(--ivory);
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.lightbox-close:hover {
  opacity: 1;
}


/* ═══ 05-nav ═══ */

/* ══ 05 · Fixed site navigation ══ */

/* Header shell — default (JS-less / scrolled) is the ivory glass bar;
   .is-on-hero switches to the transparent-over-hero treatment */
.sitenav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  isolation: isolate;
  background: rgba(248, 250, 252, 0.8);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(17, 23, 38, 0.1);
  box-shadow: 0 2px 20px rgba(13, 17, 32, 0.06);
  transition:
    background-color 0.7s var(--ease-cinematic),
    border-color 0.7s var(--ease-cinematic),
    box-shadow 0.7s var(--ease-cinematic),
    backdrop-filter 0.7s var(--ease-cinematic);
}

.sitenav.is-on-hero {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Readability scrim over the bright hero banner */
.sitenav-scrim {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 160%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgba(13, 17, 32, 0.55) 0%, rgba(13, 17, 32, 0.28) 45%, transparent 100%);
  transition: opacity 0.7s var(--ease-cinematic);
}

.sitenav.is-on-hero .sitenav-scrim {
  opacity: 1;
}

/* Bar grid: logo · links · CTA (toggle right-aligns on mobile) */
.sitenav-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  height: 68px;
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: 1.25rem;
  transition: height 0.7s var(--ease-cinematic);
}

@media (min-width: 768px) {
  .sitenav-bar { height: 72px; padding-inline: 2.5rem; }
}

@media (min-width: 992px) {
  .sitenav-bar { padding-inline: 3.5rem; }
}

.sitenav.is-on-hero .sitenav-bar { height: 80px; }

@media (min-width: 768px) {
  .sitenav.is-on-hero .sitenav-bar { height: 88px; }
}

/* Logo — knocked to white while over the hero */
.sitenav-logo {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-shrink: 0;
}

.sitenav-logo-img {
  width: auto;
  height: 2.25rem;
  object-fit: contain;
  transition:
    height 0.7s var(--ease-cinematic),
    filter 0.7s var(--ease-cinematic),
    opacity 0.7s var(--ease-cinematic);
}

@media (min-width: 576px) {
  .sitenav-logo-img { height: 2.5rem; }
}

@media (min-width: 768px) {
  .sitenav-logo-img { height: 2.75rem; }
}

.sitenav.is-on-hero .sitenav-logo-img {
  height: 2.75rem;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

@media (min-width: 576px) {
  .sitenav.is-on-hero .sitenav-logo-img { height: 3rem; }
}

@media (min-width: 768px) {
  .sitenav.is-on-hero .sitenav-logo-img { height: 3.25rem; }
}

@media (min-width: 992px) {
  .sitenav.is-on-hero .sitenav-logo-img { height: 3.5rem; }
}

/* Desktop links */
.sitenav-links {
  position: relative;
  z-index: 1;
  gap: 2rem;
}

@media (min-width: 1200px) {
  .sitenav-links { gap: 2.5rem; }
}

.sitenav-link {
  position: relative;
  padding-block: 0.5rem;
  font-family: var(--font-montserrat);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(17, 23, 38, 0.7);
  transition: color 0.5s ease;
}

.sitenav-link:hover { color: var(--charcoal); }
.sitenav-link.is-active { color: var(--bronze); }

.sitenav.is-on-hero .sitenav-link {
  color: rgba(248, 250, 252, 0.9);
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.4));
}

.sitenav.is-on-hero .sitenav-link:hover { color: var(--ivory); }
.sitenav.is-on-hero .sitenav-link.is-active { color: var(--champagne); }

.sitenav-link-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.5s var(--ease-cinematic);
}

.sitenav-link.is-active .sitenav-link-line { transform: scaleX(1); }

/* Brochure CTA — ghost glass over hero, solid forest once scrolled */
.sitenav-brochure {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0.625rem 1.5rem;
  font-family: var(--font-montserrat);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  background: var(--forest);
  color: var(--ivory);
  box-shadow: 0 10px 30px -10px rgba(27, 33, 56, 0.5);
  transition: all 0.5s var(--ease-cinematic);
}

.sitenav-brochure:hover {
  background: var(--forest-dark);
  transform: translateY(-2px);
}

.sitenav.is-on-hero .sitenav-brochure {
  background: rgba(248, 250, 252, 0.1);
  border-color: rgba(248, 250, 252, 0.3);
  color: var(--ivory);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: none;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.35));
}

.sitenav.is-on-hero .sitenav-brochure:hover {
  background: var(--ivory);
  color: var(--forest);
  transform: translateY(-2px);
}

/* Mobile toggle */
.sitenav-toggle {
  position: relative;
  z-index: 1;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  cursor: pointer;
  color: var(--charcoal);
}

.sitenav.is-on-hero .sitenav-toggle { color: var(--ivory); }

.sitenav-burger {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sitenav-burger span {
  display: block;
  width: 1.5rem;
  height: 1px;
  background: currentColor;
}

.sitenav-close { display: none; }
.sitenav.is-menu-open .sitenav-burger { display: none; }
.sitenav.is-menu-open .sitenav-close { display: block; }

/* Body scroll lock while the mobile menu is open — a class (not an inline
   style) so Bootstrap's modal ScrollBarHelper saved inline value stays empty */
body.sitenav-menu-open {
  overflow: hidden;
}

/* Mobile full-screen menu — above the floating CTA (1040), below Bootstrap's
   modal backdrop (1050) */
.sitenav-menu {
  position: fixed;
  inset: 0;
  z-index: 1041;
  background: var(--forest-dark);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-cinematic), visibility 0s linear 0.5s;
}

/* d-lg-none sets display:none at lg; below lg keep the flex layout */
@media (max-width: 991.98px) {
  .sitenav-menu { display: flex; }
}

.sitenav-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.5s var(--ease-cinematic);
}

.sitenav-menu-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.sitenav-menu-link {
  font-weight: 300;
  letter-spacing: 0.025em;
  text-decoration: none;
  color: rgba(248, 250, 252, 0.8);
  opacity: 0;
  transform: translateY(20px);
  transition:
    color 0.4s ease,
    opacity 0.6s var(--ease-cinematic),
    transform 0.6s var(--ease-cinematic);
}

.sitenav-menu-link:hover { color: var(--gold); }
.sitenav-menu-link.is-active { color: var(--gold); }

.sitenav-menu.is-open .sitenav-menu-link {
  opacity: 1;
  transform: none;
}

/* Staggered entrance (delay maps to: color, opacity, transform) */
.sitenav-menu.is-open .sitenav-menu-link:nth-child(1) { transition-delay: 0s, 0s, 0s; }
.sitenav-menu.is-open .sitenav-menu-link:nth-child(2) { transition-delay: 0s, 0.07s, 0.07s; }
.sitenav-menu.is-open .sitenav-menu-link:nth-child(3) { transition-delay: 0s, 0.14s, 0.14s; }
.sitenav-menu.is-open .sitenav-menu-link:nth-child(4) { transition-delay: 0s, 0.21s, 0.21s; }
.sitenav-menu.is-open .sitenav-menu-link:nth-child(5) { transition-delay: 0s, 0.28s, 0.28s; }
.sitenav-menu.is-open .sitenav-menu-link:nth-child(6) { transition-delay: 0s, 0.35s, 0.35s; }

@media (prefers-reduced-motion: reduce) {
  .sitenav,
  .sitenav-bar,
  .sitenav-logo-img,
  .sitenav-link,
  .sitenav-link-line,
  .sitenav-brochure,
  .sitenav-menu,
  .sitenav-menu-link {
    transition: none;
  }

  .sitenav-menu-link {
    opacity: 1;
    transform: none;
  }
}


/* ═══ 10-arrival ═══ */

/* ═══════════ 10 · Arrival — hero banner slider (#home) ═══════════ */

.arrival {
  isolation: isolate;
  z-index: 0;
  background: #101626;
}

/* Banner frames — fixed creative aspect ratios, as in source */
.arrival-banner--mobile {
  width: 100%;
  aspect-ratio: 500 / 800;
  background: #f4f7fb;
}

.arrival-banner--desktop {
  width: 100%;
  aspect-ratio: 2000 / 900;
  max-height: 100vh;
  max-height: 100dvh;
  background: #101626;
}

.arrival-banner .carousel-inner,
.arrival-banner .carousel-item {
  height: 100%;
}

/* Direction-aware horizontal slide, cinematic easing (framer replacement) */
.arrival-banner .carousel-item {
  transition: transform 0.65s var(--ease-cinematic);
}

/* Mobile: contain, pinned top — full creative (incl. awards) always visible */
.arrival-banner--mobile .arrival-slide-img {
  object-fit: contain;
  object-position: top center;
}

.arrival-banner--desktop .arrival-slide-img {
  object-fit: cover;
  object-position: center;
}

/* ── First-viewport entrance — CSS keyframes, not AOS ── */
@keyframes arrival-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.arrival-banner--mobile {
  animation: arrival-reveal 0.9s var(--ease-cinematic) both;
}

.arrival-banner--desktop {
  animation: arrival-reveal 1.2s var(--ease-cinematic) 0.1s both;
}

/* ── Prev / next — circular glass buttons ── */
.arrival-nav {
  position: absolute;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
}

.arrival-banner--mobile .arrival-nav {
  top: 42%;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(17, 23, 38, 0.15);
  background: rgba(248, 250, 252, 0.8);
  color: var(--charcoal);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.arrival-banner--desktop .arrival-nav {
  top: 50%;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(248, 250, 252, 0.25);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ivory);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color 0.3s ease;
}

@media (hover: hover) {
  .arrival-banner--desktop .arrival-nav:hover {
    background: rgba(0, 0, 0, 0.6);
  }
}

.arrival-banner--mobile .arrival-nav--prev { left: 0.5rem; }
.arrival-banner--mobile .arrival-nav--next { right: 0.5rem; }
.arrival-banner--desktop .arrival-nav--prev { left: 1rem; }
.arrival-banner--desktop .arrival-nav--next { right: 1rem; }

/* ── Slide dots — restyle Bootstrap indicators ── */
.arrival-banner .arrival-dots {
  position: absolute;
  z-index: 20;
  display: flex;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
}

.arrival-banner .arrival-dots [data-bs-target] {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 0.375rem;
  height: 0.375rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  opacity: 1;
  overflow: hidden;
  text-indent: -999px;
  cursor: pointer;
  transition: width 0.3s ease, background-color 0.3s ease;
}

/* Mobile — centered above the award trophies */
.arrival-dots--mobile {
  bottom: 14%;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.arrival-banner .arrival-dots--mobile [data-bs-target] {
  background-color: rgba(17, 23, 38, 0.25);
}

.arrival-banner .arrival-dots--mobile [data-bs-target].active {
  width: 1.25rem;
  background-color: var(--bronze);
}

/* Desktop — bottom-left */
.arrival-dots--desktop {
  bottom: 1.5rem;
  left: 2rem;
  right: auto;
  justify-content: flex-start;
  transform: none;
}

.arrival-banner .arrival-dots--desktop [data-bs-target] {
  background-color: rgba(248, 250, 252, 0.45);
}

.arrival-banner .arrival-dots--desktop [data-bs-target].active {
  width: 1.5rem;
  background-color: var(--ivory);
}

@media (prefers-reduced-motion: reduce) {
  .arrival-banner--mobile,
  .arrival-banner--desktop {
    animation: none;
  }
  .arrival-banner .carousel-item {
    transition: none;
  }
}


/* ═══ 15-philosophy ═══ */

/* ── 15 · Philosophy / Overview ── */

.philosophy-section {
  overflow-x: clip;
}

/* Section padding override (source: !pb-14 md:!pb-16) */
.philosophy-pad {
  padding-bottom: 3.5rem !important;
}

@media (min-width: 768px) {
  .philosophy-pad {
    padding-bottom: 4rem !important;
  }
}

/* Intro row gutters (gap-8 lg:gap-16) */
.philosophy-intro {
  --bs-gutter-x: 2rem;
  --bs-gutter-y: 2rem;
}

@media (min-width: 992px) {
  .philosophy-intro {
    --bs-gutter-x: 4rem;
  }
}

/* Inline enquiry card — warm cream panel */
.philosophy-form {
  border-radius: var(--radius-card-lg);
  border: 1px solid rgba(206, 161, 68, 0.2);
  background: #f3f6fb;
  box-shadow: var(--shadow-float);
  padding: 1.75rem;
}

@media (min-width: 576px) {
  .philosophy-form {
    padding: 2.25rem;
  }
}

.philosophy-form-topline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(206, 161, 68, 0.7), transparent);
}

.philosophy-form-copy {
  font-size: 0.95rem;
  line-height: 1.625;
  color: var(--grey-600);
  margin-bottom: 0;
}

.philosophy-form-fields {
  margin-top: 1.75rem;
}

/* Overview copy */
.philosophy-headline {
  color: var(--forest);
}

.philosophy-accent {
  color: var(--bronze);
}

.philosophy-lede {
  margin-top: 1.5rem;
  margin-bottom: 0;
  max-width: 54ch;
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  line-height: 1.75;
  color: #1f2937;
}

/* Media + statement row (mt-12 md:mt-16) */
.philosophy-media-row {
  margin-top: calc(3rem - var(--bs-gutter-y));
}

@media (min-width: 768px) {
  .philosophy-media-row {
    margin-top: calc(4rem - var(--bs-gutter-y));
  }
}

.philosophy-media-card {
  height: 52vh;
  min-height: 380px;
}

@media (min-width: 768px) {
  .philosophy-media-card {
    height: 64vh;
  }
}

.philosophy-media-scrim {
  background: linear-gradient(180deg, transparent 48%, rgba(6, 9, 18, 0.62) 82%, rgba(6, 9, 18, 0.92) 100%);
  pointer-events: none;
}

.philosophy-media-caption {
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .philosophy-media-caption {
    padding: 2rem;
  }
}

.philosophy-journal-row {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.philosophy-media-logo {
  opacity: 0.9;
}

.philosophy-journal-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: rgba(233, 206, 124, 0.85);
}

.philosophy-media-quote {
  max-width: 36ch;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ivory);
}

/* Dark statement card */
.philosophy-statement-card {
  padding: 2rem;
}

@media (min-width: 768px) {
  .philosophy-statement-card {
    padding: 2.25rem;
  }
}

.philosophy-kicker-champagne {
  color: var(--champagne);
}

.philosophy-statement {
  font-size: clamp(1.55rem, 2.2vw, 2.1rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ivory);
}

.philosophy-statement-body {
  margin-top: 2rem;
  font-size: 0.98rem;
  line-height: 1.75;
  color: rgba(248, 250, 252, 0.7);
}

/* Stat cards (mt-6) */
.philosophy-stats {
  margin-top: calc(1.5rem - var(--bs-gutter-y));
}

.philosophy-stat-card {
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .philosophy-stat-card {
    padding: 1.75rem;
  }
}

.philosophy-stat-value {
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--forest);
  font-variant-numeric: tabular-nums;
}

.philosophy-stat-label {
  margin-top: 0.75rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--grey-600);
}


/* ═══ 20-residences ═══ */

/* ═══ 20 · Residences / Configurations ═══ */

.residences-section {
  color: var(--ivory);
}

/* Header — section-padding with the bottom stripped (source: !pb-0) */
.residences-head {
  padding-bottom: 0 !important;
}

.residences-head-main {
  max-width: 48rem;
}

.residences-kicker {
  color: var(--champagne);
  margin-bottom: 1.25rem;
}

.residences-headline {
  color: var(--ivory);
}

.residences-lede {
  color: rgba(248, 250, 252, 0.95);
  max-width: 24rem;
}

/* ── Sticky stack — each slide pins, next slides over ── */
.residences-slide {
  position: sticky;
  top: 68px;
  padding-block: 2rem;
}

@media (min-width: 768px) {
  .residences-slide {
    top: 72px;
    padding-block: 3rem;
  }
}

@media (min-width: 992px) {
  .residences-slide {
    top: 0;
    padding-block: 4rem;
  }
}

/* Grid gutters — 2rem mobile, 5rem desktop (source gap-8 / lg:gap-20) */
.residences-grid {
  --bs-gutter-x: 2rem;
  --bs-gutter-y: 2rem;
}

@media (min-width: 992px) {
  .residences-grid {
    --bs-gutter-x: 5rem;
  }
}

/* ── Detail column ── */
.residences-detail {
  position: relative;
  padding: 1rem 0.5rem;
}

@media (min-width: 992px) {
  .residences-detail {
    min-height: 24rem;
    padding-block: 2rem;
  }
}

.residences-detail-inner {
  max-width: 28rem;
}

/* Giant ghost index behind the detail */
.residences-ghost {
  pointer-events: none;
  user-select: none;
  font-size: clamp(7rem, 28vw, 20rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.025em;
  color: rgba(248, 250, 252, 0.04);
}

@media (min-width: 992px) {
  .residences-ghost {
    font-size: clamp(11rem, 26vw, 20rem);
  }
}

/* "01 / 05" counter */
.residences-count {
  letter-spacing: 0.24em;
  color: rgba(248, 250, 252, 0.35);
  margin-bottom: 1rem;
}

@media (min-width: 992px) {
  .residences-count {
    margin-bottom: 1.5rem;
  }
}

.residences-count-current {
  color: rgba(193, 137, 51, 0.8);
}

.residences-count-sep {
  margin-inline: 0.375rem;
}

.residences-logo {
  height: 2.25rem;
  width: auto;
  object-fit: contain;
}

@media (min-width: 992px) {
  .residences-logo {
    height: 2.75rem;
  }
}

.residences-divider {
  display: block;
  height: 1px;
  width: 3.5rem;
  margin-block: 1.25rem;
  background: linear-gradient(90deg, transparent, rgba(233, 206, 124, 0.6), transparent);
}

@media (min-width: 992px) {
  .residences-divider {
    margin-block: 1.75rem;
  }
}

.residences-title {
  font-size: clamp(1.65rem, 5.5vw, 2.75rem);
  font-weight: 300;
  text-transform: capitalize;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ivory);
}

@media (min-width: 992px) {
  .residences-title {
    font-size: clamp(1.9rem, 3vw, 2.75rem);
  }
}

/* Check Price pill */
.residences-price-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 1.5rem;
  padding: 0.75rem 1.75rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(248, 250, 252, 0.1);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: rgba(248, 250, 252, 0.85);
  cursor: pointer;
  transition: all 0.5s var(--ease-cinematic);
}

@media (min-width: 992px) {
  .residences-price-btn {
    margin-top: 2rem;
  }
}

.residences-price-arrow {
  display: inline-block;
  transition: transform 0.5s var(--ease-cinematic);
}

@media (hover: hover) {
  .residences-price-btn:hover {
    transform: translateY(-2px);
    background: var(--gold);
    color: var(--forest-dark);
  }
  .residences-price-btn:hover .residences-price-arrow {
    transform: translateX(4px);
  }
}

/* ── Media column ── */
.residences-media-wrap {
  margin-bottom: 2rem;
}

@media (min-width: 992px) {
  .residences-media-wrap {
    margin-bottom: 3rem;
  }
}

/* Offset outline frame behind the image (desktop) */
.residences-media-frame {
  position: absolute;
  bottom: -1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-card-lg);
  border: 1px solid rgba(233, 206, 124, 0.25);
  pointer-events: none;
}

.residences-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card-lg);
  background: rgba(13, 17, 32, 0.4);
  box-shadow: var(--shadow-float);
}

.residences-media-img {
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  .residences-media:hover .residences-media-img {
    transform: scale(1.05);
  }
}

.residences-media-overlay {
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 11, 22, 0.25) 0%, transparent 35%, rgba(8, 11, 22, 0.55) 100%);
}

.residences-type-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(248, 250, 252, 0.25);
  background: rgba(13, 17, 32, 0.4);
  letter-spacing: 0.14em;
  color: rgba(248, 250, 252, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (min-width: 992px) {
  .residences-type-badge {
    top: 1.25rem;
    left: 1.25rem;
    padding-inline: 1rem;
  }
}

.residences-artistic {
  position: absolute;
  bottom: 1.25rem;
  left: 1.5rem;
  letter-spacing: 0.14em;
  color: rgba(248, 250, 252, 0.55);
}

/* Floating area chip */
.residences-area-chip {
  position: absolute;
  bottom: -1.25rem;
  left: 1rem;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-card);
  border: 1px solid rgba(233, 206, 124, 0.25);
  background: rgba(13, 17, 32, 0.9);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (min-width: 992px) {
  .residences-area-chip {
    bottom: -1.5rem;
    left: 1.5rem;
    padding: 1rem 1.5rem;
  }
}

.residences-area-value {
  font-size: clamp(1.35rem, 4.5vw, 2.1rem);
  font-weight: 300;
  line-height: 1;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}

.residences-area-unit {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(248, 250, 252, 0.5);
}

@media (min-width: 992px) {
  .residences-area-unit {
    font-size: 0.7rem;
  }
}


/* ═══ 25-vision ═══ */

/* ── 25 · Vision / Phase 3 Details ── */

.vision-section {
  color: var(--ivory);
}

.vision-header {
  max-width: 840px;
}

.vision-kicker {
  color: var(--champagne);
}

.vision-lede {
  margin-top: 1.75rem;
  margin-bottom: 0;
  max-width: 54ch;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  font-weight: 300;
  line-height: 1.8;
  color: rgba(248, 250, 252, 0.65);
}

/* Split layout — 1fr / 1.05fr on desktop */
.vision-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
  margin-top: 3.5rem;
}

@media (min-width: 768px) {
  .vision-grid {
    margin-top: 5rem;
  }
}

@media (min-width: 992px) {
  .vision-grid {
    grid-template-columns: 1fr 1.05fr;
    gap: 5rem;
  }
}

/* Tower render — 3:2 to match the landscape lift-lobby photo, so it
   sits inside the frame uncropped instead of being cut to a portrait */
.vision-image {
  border-radius: var(--radius-card-lg);
  aspect-ratio: 3 / 2;
  box-shadow: var(--shadow-float);
}

.vision-image-scrim {
  background: linear-gradient(180deg, transparent 55%, rgba(8, 11, 22, 0.55) 100%);
  pointer-events: none;
}

.vision-image-note {
  bottom: 1.25rem;
  left: 1.5rem;
  letter-spacing: 0.14em;
  color: rgba(248, 250, 252, 0.55);
}

/* Headline stats */
.vision-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  border-bottom: 1px solid rgba(248, 250, 252, 0.12);
  padding-bottom: 2.5rem;
}

.vision-stat-value {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}

.vision-stat-label {
  margin-top: 0.75rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(248, 250, 252, 0.5);
}

.vision-stat-sub {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: rgba(248, 250, 252, 0.4);
}

/* Tower breakdown cards */
.vision-tower-list {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vision-tower-card {
  gap: 1.5rem;
  padding: 1.5rem;
  border-radius: var(--radius-card);
  border: 1px solid rgba(248, 250, 252, 0.1);
  background: rgba(248, 250, 252, 0.03);
  transition: border-color 0.5s ease, background-color 0.5s ease;
}

@media (hover: hover) {
  .vision-tower-card:hover {
    border-color: rgba(233, 206, 124, 0.3);
    background: rgba(248, 250, 252, 0.05);
  }
}

.vision-tower-floors {
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  font-weight: 300;
  line-height: 1;
  color: var(--ivory);
}

.vision-tower-floors-label {
  margin-top: 0.25rem;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(248, 250, 252, 0.45);
}

.vision-tower-divider {
  height: 3.5rem;
  width: 1px;
  background: rgba(248, 250, 252, 0.12);
  flex-shrink: 0;
}

.vision-tower-count {
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--ivory);
}

.vision-tower-parking {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: rgba(233, 206, 124, 0.9);
}

.vision-tower-sub {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(248, 250, 252, 0.4);
}


/* ═══ 30-lifeinside ═══ */

/* ═══ 30 · Life Inside — SOHO Life highlights ring ═══ */

.lifeinside-section {
  color: var(--ivory);
}

.lifeinside-heading {
  max-width: 900px;
}

.lifeinside-kicker {
  color: var(--champagne);
  margin-bottom: 1.5rem;
}

.lifeinside-headline {
  color: var(--ivory);
}

/* Ring layout: single column on mobile, 1fr | minmax(280px,400px) | 1fr on desktop */
.lifeinside-ring {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-top: 3.5rem;
}

@media (min-width: 768px) {
  .lifeinside-ring {
    margin-top: 5rem;
  }
}

@media (min-width: 992px) {
  .lifeinside-ring {
    grid-template-columns: 1fr minmax(280px, 400px) 1fr;
    gap: 4rem;
  }
}

.lifeinside-col {
  gap: 2.5rem;
}

.lifeinside-center {
  gap: 2rem;
}

.lifeinside-highlight {
  gap: 1rem;
}

.lifeinside-icon {
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid rgba(233, 206, 124, 0.25);
  background: rgba(233, 206, 124, 0.06);
}

.lifeinside-icon-img {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
}

.lifeinside-highlight-text {
  max-width: 20ch;
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  font-weight: 300;
  line-height: 1.35;
  color: rgba(248, 250, 252, 0.85);
}

/* Circular hero image */
.lifeinside-orb {
  aspect-ratio: 1 / 1;
  max-width: 400px;
  border: 1px solid rgba(233, 206, 124, 0.2);
  box-shadow: var(--shadow-float);
}


/* ═══ 35-modelhomes ═══ */

/* ── Model Homes (#model-homes) ─────────────────────────────── */

.modelhomes {
  color: var(--ivory);
}

/* Kicker — champagne override of the bronze default */
.modelhomes .modelhomes-kicker {
  color: var(--champagne);
  margin-bottom: 1.5rem;
}

.modelhomes-header {
  max-width: 820px;
  margin-inline: auto;
}

.modelhomes-heading {
  color: var(--ivory);
}

.modelhomes-lede {
  margin: 1.75rem auto 0;
  max-width: 56ch;
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  font-weight: 300;
  line-height: 1.8;
  color: rgba(248, 250, 252, 0.65);
}

/* Video pair grid — 1 col, 2 cols at lg; gap 1.5rem → 2rem at md */
.modelhomes-grid {
  margin-top: 3.5rem;
}

@media (min-width: 768px) {
  .modelhomes-grid {
    margin-top: 4rem;
    --bs-gutter-x: 2rem;
    --bs-gutter-y: 2rem;
  }
}

/* Card — 16:9, large radius, floating shadow */
.modelhomes-card {
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-float);
}

/* Click-to-play overlay (whole card is the play button) */
.modelhomes-overlay {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.modelhomes-card.is-playing .modelhomes-overlay {
  display: none;
}

.modelhomes-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 11, 22, 0.15) 0%, transparent 35%, rgba(8, 11, 22, 0.72) 100%);
}

/* Tag chip — top-left */
.modelhomes-overlay .modelhomes-chip {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(248, 250, 252, 0.25);
  background: rgba(0, 0, 0, 0.3);
  letter-spacing: 0.16em;
  color: rgba(248, 250, 252, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Center play button */
.modelhomes-overlay .modelhomes-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 68px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(248, 250, 252, 0.95);
  color: var(--forest);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  transition: transform 0.5s var(--ease-cinematic), background 0.5s ease, color 0.5s ease;
}

.modelhomes-play-icon {
  display: inline-flex;
  margin-left: 2px;
}

@media (hover: hover) {
  .modelhomes-card:hover .modelhomes-play {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--bronze);
    color: var(--ivory);
  }
}

/* Bottom caption */
.modelhomes-overlay .modelhomes-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  height: auto;
  padding: 1.5rem;
  text-align: left;
}

.modelhomes-title {
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  font-weight: 300;
  line-height: 1.25;
  color: var(--ivory);
}

.modelhomes-sub {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: rgba(248, 250, 252, 0.65);
}


/* ═══ 40-experiences ═══ */

/* ── Experiences / Amenities (#amenities) ── */

.exp-ambient {
  background: radial-gradient(70% 50% at 78% 18%, rgba(179, 113, 41, 0.08), transparent 60%);
  pointer-events: none;
}

.exp-content {
  z-index: 1;
}

.exp-masthead {
  max-width: 640px;
}

.exp-heading {
  color: var(--forest);
}

/* How-to affordance */
.exp-hint {
  margin-top: 1.75rem;
  gap: 0.625rem;
}

.exp-hint-line {
  width: 2rem;
  height: 1px;
  flex-shrink: 0;
  background: rgba(206, 161, 68, 0.4);
}

.exp-hint-text {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--grey-600);
  white-space: nowrap;
}

.exp-hint-arrow {
  color: var(--bronze);
  animation: exp-arrow-nudge 1.6s ease-in-out infinite;
}

@keyframes exp-arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

/* Mobile collection switcher */
.exp-switch {
  margin-top: 2.5rem;
}

.exp-pills {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.exp-pills::-webkit-scrollbar {
  display: none;
}

.exp-pill {
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(206, 161, 68, 0.25);
  background: transparent;
  color: var(--grey-600);
  padding: 0.5rem 1rem;
  font-family: var(--font-montserrat);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.exp-pill.is-active {
  border-color: var(--bronze);
  background: var(--bronze);
  color: var(--ivory);
}

.exp-dots {
  gap: 0.375rem;
}

.exp-dot {
  width: 0.375rem;
  height: 0.375rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(206, 161, 68, 0.3);
  transition: width 0.3s ease, background 0.3s ease;
}

.exp-dot.is-active {
  width: 1.25rem;
  background: var(--bronze);
}

.exp-count {
  margin-left: 0.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--charcoal);
}

/* Triptych grid rhythm */
.exp-triptych {
  margin-top: 2rem;
  --bs-gutter-y: 2rem;
}

@media (min-width: 992px) {
  .exp-triptych {
    margin-top: 4rem;
    --bs-gutter-x: 2.5rem;
    --bs-gutter-y: 2.5rem;
  }
}

/* 01 — Index */
.exp-index-btn {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 1rem;
  border: 0;
  border-bottom: 1px solid rgba(27, 33, 56, 0.1);
  background: transparent;
  padding: 1.25rem 0 1.25rem 1.25rem;
  text-align: left;
  cursor: pointer;
}

.exp-index-bar {
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  background: var(--bronze);
  transform: translateY(-50%) scaleY(0);
  opacity: 0;
  transition: transform 0.45s var(--ease-cinematic), opacity 0.3s ease;
}

.exp-index-btn.is-active .exp-index-bar,
.exp-index-bar.is-static {
  transform: translateY(-50%) scaleY(1);
  opacity: 1;
}

.exp-index-num {
  width: 1.75rem;
  flex-shrink: 0;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  color: rgba(90, 100, 120, 0.5);
  transition: color 0.3s ease;
}

.exp-index-btn.is-active .exp-index-num {
  color: var(--bronze);
}

.exp-index-title {
  flex: 1;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: rgba(90, 100, 120, 0.7);
  transition: color 0.3s ease, transform 0.45s var(--ease-cinematic);
}

.exp-index-btn:hover .exp-index-title {
  color: var(--forest);
}

.exp-index-btn.is-active .exp-index-title {
  color: var(--forest);
  transform: translateX(6px);
}

.exp-index-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.exp-index-count {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: rgba(90, 100, 120, 0.4);
  transition: color 0.3s ease;
}

.exp-index-btn.is-active .exp-index-count {
  color: var(--bronze);
}

.exp-index-arrow {
  color: var(--bronze);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.exp-index-btn.is-active .exp-index-arrow {
  opacity: 1;
  transform: translateX(0);
}

.exp-index-more {
  position: relative;
  border-bottom: 1px solid rgba(27, 33, 56, 0.1);
  padding: 1.25rem 0 1.25rem 1.25rem;
}

.exp-index-more-text {
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--bronze);
}

/* 02 — Cinematic stage */
.exp-stage {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-float);
}

.exp-stage-media {
  position: absolute;
  inset: 0;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  z-index: 1;
}

.exp-stage-media.is-active {
  opacity: 1;
  clip-path: inset(0 0 0% 0);
  z-index: 2;
  transition: clip-path 0.7s var(--ease-cinematic);
}

.exp-stage-media.is-prev {
  opacity: 1;
  clip-path: inset(0 0 0% 0);
}

.exp-stage-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 2.4s var(--ease-cinematic);
}

@media (hover: hover) {
  .exp-stage:hover .exp-stage-media.is-active img {
    transform: scale(1.03);
  }
}

.exp-stage-shade {
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 17, 32, 0.05) 0%, transparent 35%, rgba(13, 17, 32, 0.72) 100%);
}

.exp-stage-caption {
  z-index: 4;
  padding: 1.75rem;
}

.exp-caption {
  display: none;
}

.exp-caption.is-active {
  display: block;
  animation: exp-rise-in 0.45s var(--ease-cinematic) both;
}

.exp-caption-count {
  color: rgba(248, 250, 252, 0.6);
  letter-spacing: 0.16em;
}

.exp-caption-title {
  margin: 0.5rem 0 0;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ivory);
}

.exp-caption-tagline {
  margin: 0.25rem 0 0;
  font-size: 0.92rem;
  font-style: italic;
  color: rgba(248, 250, 252, 0.7);
}

@keyframes exp-rise-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 03 — Living list */
.exp-list {
  display: none;
}

.exp-list.is-active {
  display: block;
}

.exp-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid rgba(27, 33, 56, 0.1);
  padding: 0.875rem 0;
}

.exp-list.is-active .exp-item {
  animation: exp-item-in 0.5s var(--ease-cinematic) both;
}

.exp-list.is-active .exp-item:nth-child(1) { animation-delay: 0.12s; }
.exp-list.is-active .exp-item:nth-child(2) { animation-delay: 0.17s; }
.exp-list.is-active .exp-item:nth-child(3) { animation-delay: 0.22s; }
.exp-list.is-active .exp-item:nth-child(4) { animation-delay: 0.27s; }
.exp-list.is-active .exp-item:nth-child(5) { animation-delay: 0.32s; }
.exp-list.is-active .exp-item:nth-child(6) { animation-delay: 0.37s; }
.exp-list.is-active .exp-item:nth-child(7) { animation-delay: 0.42s; }

@keyframes exp-item-in {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.exp-item-icon {
  display: flex;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(206, 161, 68, 0.25);
  background: #fff;
  color: var(--forest);
  transition: transform 0.5s var(--ease-cinematic), border-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}

.exp-item:hover .exp-item-icon {
  transform: translateY(-2px);
  border-color: rgba(206, 161, 68, 0.7);
  color: var(--bronze);
  box-shadow: 0 10px 24px rgba(179, 113, 41, 0.16);
}

.exp-item-label {
  font-size: 0.95rem;
  line-height: 1.375;
  color: var(--grey-600);
  transition: color 0.3s ease;
}

.exp-item:hover .exp-item-label {
  color: var(--forest);
}

@media (prefers-reduced-motion: reduce) {
  .exp-hint-arrow,
  .exp-caption.is-active,
  .exp-list.is-active .exp-item {
    animation: none;
  }
  .exp-stage-media.is-active {
    transition: none;
  }
  .exp-index-bar,
  .exp-index-title {
    transition: none;
  }
}


/* ═══ 45-masterplan ═══ */

/* ── Master Plan (#master-plan) ── */

.masterplan {
  background: var(--charcoal);
  color: var(--ivory);
}

/* SectionShell innerClassName !pb-10 md:!pb-12 — tightened bottom padding */
.masterplan-inner {
  padding-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .masterplan-inner {
    padding-bottom: 3rem;
  }
}

.masterplan-frame {
  max-width: 1500px;
  margin-inline: auto;
}

.masterplan-chapter {
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .masterplan-chapter {
    margin-bottom: 1.75rem;
  }
}

.masterplan-kicker {
  color: var(--champagne);
}

.masterplan-header {
  max-width: 48rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .masterplan-header {
    margin-bottom: 2.5rem;
  }
}

.masterplan-heading {
  color: var(--ivory);
  margin-bottom: 0;
}

.masterplan-sub {
  margin: 1rem 0 0;
  color: var(--champagne);
}

/* Preview frame — black canvas, floating shadow, large card radius */
.masterplan-preview {
  padding: 0;
  border: 1px solid rgba(248, 250, 252, 0.1);
  border-radius: var(--radius-card-lg);
  background: #000;
  box-shadow: var(--shadow-float);
  cursor: pointer;
  text-align: inherit;
}

.masterplan-canvas {
  aspect-ratio: 16 / 10;
}

@media (min-width: 576px) {
  .masterplan-canvas {
    aspect-ratio: 16 / 9;
  }
}

.masterplan-img {
  object-fit: contain;
  object-position: center;
  padding: 0.5rem;
}

@media (min-width: 768px) {
  .masterplan-img {
    padding: 0.75rem;
  }
}

/* Locked overlay — lock icon + invite caption over the preview (black/45 + blur) */
.masterplan-lock {
  gap: 0.75rem;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background-color 0.4s ease;
}

@media (hover: hover) {
  .masterplan-preview:hover .masterplan-lock {
    background: rgba(0, 0, 0, 0.55);
  }
}

.masterplan-lock-icon {
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid rgba(248, 250, 252, 0.3);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: var(--ivory);
}

.masterplan-lock-caption {
  letter-spacing: 0.12em;
  color: rgba(248, 250, 252, 0.9);
  text-align: center;
  padding-inline: 1rem;
}

/* "Unlock to explore" / "Tap to expand & zoom" pill badge */
.masterplan-preview .masterplan-badge {
  bottom: 1rem;
  right: 1rem;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(248, 250, 252, 0.15);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.6);
  color: rgba(248, 250, 252, 0.9);
  letter-spacing: 0.08em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
  transition: border-color 0.4s ease, color 0.4s ease;
}

@media (hover: hover) {
  .masterplan-preview:hover .masterplan-badge {
    border-color: rgba(233, 206, 124, 0.5);
    color: var(--ivory);
  }
}

/* Master-plan gate modal — compact centered card (max-w 440px in the source) */
@media (min-width: 576px) {
  .masterplan-gate-dialog {
    max-width: 440px;
  }
}

.masterplan-gate-body {
  padding: 1.75rem;
}

@media (min-width: 640px) {
  .masterplan-gate-body {
    padding: 2rem;
  }
}

.masterplan-gate-kicker {
  margin-bottom: 0.75rem;
}


/* ═══ 50-gallery ═══ */

/* ── Gallery (#gallery) ── */

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

/* SectionShell innerClassName !pt-10 md:!pt-12 — tightened top padding
   (flows on from the charcoal Master Plan section above) */
.gallery-inner {
  padding-top: 2.5rem;
}

@media (min-width: 768px) {
  .gallery-inner {
    padding-top: 3rem;
  }
}

.gallery-frame {
  max-width: 1500px;
  margin-inline: auto;
}

.gallery-chapter {
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .gallery-chapter {
    margin-bottom: 1.75rem;
  }
}

.gallery-kicker {
  color: var(--champagne);
}

.gallery-essence {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: rgba(248, 250, 252, 0.4);
}

.gallery-header {
  max-width: 56rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .gallery-header {
    margin-bottom: 2.5rem;
  }
}

.gallery-heading {
  color: var(--ivory);
  margin-bottom: 0;
}

.gallery-subrow {
  margin-top: 1rem;
  column-gap: 1.25rem;
  row-gap: 0.75rem;
}

.gallery-sub {
  color: var(--champagne);
}

/* ── Strip ── */

.gallery-stripwrap {
  margin-top: 1rem;
}

/* Bleed the strip into the section's inline padding like the source (-mx-6 / md:-mx-12) */
.gallery-strip {
  margin-inline: -1.5rem;
  padding-inline: 1.5rem;
}

@media (min-width: 768px) {
  .gallery-strip {
    margin-inline: -3rem;
    padding-inline: 3rem;
  }
}

.gallery-item {
  width: 70vw;
  padding: 0;
  border: 0;
  background: var(--forest-dark);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

@media (min-width: 768px) {
  .gallery-item {
    width: 36vw;
  }
}

@media (min-width: 992px) {
  .gallery-item {
    width: 26vw;
  }
}

.gallery-a34 {
  aspect-ratio: 3 / 4;
}

.gallery-a1610 {
  aspect-ratio: 16 / 10;
}

.gallery-a45 {
  aspect-ratio: 4 / 5;
}

.gallery-img {
  transition: transform 2.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  .gallery-item:hover .gallery-img {
    transform: scale(1.02);
  }
}

/* ── "Shot on Location" badge — marks these as real photography, not renders ── */

.gallery-badge {
  position: absolute;
  top: clamp(0.75rem, 1.6vw, 1.15rem);
  left: clamp(0.75rem, 1.6vw, 1.15rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(233, 206, 124, 0.3);
  background: rgba(17, 23, 38, 0.55);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  font-family: var(--font-montserrat);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--gold-light);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: border-color 0.5s var(--ease-cinematic), background 0.5s var(--ease-cinematic);
  pointer-events: none;
}

.gallery-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

@media (hover: hover) {
  .gallery-item:hover .gallery-badge {
    border-color: rgba(233, 206, 124, 0.6);
    background: rgba(17, 23, 38, 0.72);
  }
}

/* ── Scroll arrows — appear on strip hover, only when scrollable that way ── */

.gallery-arrow {
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(248, 250, 252, 0.2);
  background: rgba(17, 23, 38, 0.85);
  color: rgba(248, 250, 252, 0.8);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.3s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.gallery-arrow--left {
  left: 0.75rem;
}

.gallery-arrow--right {
  right: 0.75rem;
}

@media (min-width: 768px) {
  .gallery-arrow--left {
    left: 1.25rem;
  }

  .gallery-arrow--right {
    right: 1.25rem;
  }
}

.gallery-arrow.is-active {
  pointer-events: auto;
}

.gallery-arrow.is-active:focus-visible {
  opacity: 1;
}

@media (hover: hover) {
  .gallery-stripwrap:hover .gallery-arrow.is-active {
    opacity: 1;
  }

  .gallery-arrow.is-active:hover {
    border-color: var(--bronze);
    background: var(--charcoal);
    color: var(--ivory);
  }
}

/* ── "Scroll to explore" hint ── */

.gallery-hint {
  margin-top: 1.25rem;
  gap: 0.5rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(248, 250, 252, 0.45);
}

.gallery-hint-arrow {
  display: inline-block;
  animation: gallery-hint-nudge 1.6s ease-in-out infinite;
}

@keyframes gallery-hint-nudge {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-hint-arrow {
    animation: none;
  }
}


/* ═══ 55-testimonials ═══ */

/* ═══ 55 · Testimonials — resident video voices ═══ */

/* SectionShell innerClassName "!pb-6 md:!pb-8" — tightened bottom padding */
.testimonials-inner {
  padding-bottom: 1.5rem !important;
}

@media (min-width: 768px) {
  .testimonials-inner {
    padding-bottom: 2rem !important;
  }
}

/* SectionShell inner frame — max-w-[1500px] mx-auto */
.testimonials-frame {
  max-width: 1500px;
  margin-inline: auto;
}

/* Chapter kicker (mb-5 md:mb-7 + essence line) */
.testimonials-chapter {
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .testimonials-chapter {
    margin-bottom: 1.75rem;
  }
}

.testimonials-essence {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--grey-400);
}

/* Header row — headline + italic subhead */
.testimonials-header {
  max-width: 56rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .testimonials-header {
    margin-bottom: 2.5rem;
  }
}

.testimonials-headline {
  color: var(--forest);
}

.testimonials-subhead {
  color: inherit;
}

@media (min-width: 576px) {
  .testimonials-subhead {
    padding-bottom: 0.375rem;
  }
}

/* Film strip — edge bleed matching -mx-6 px-6 md:-mx-12 md:px-12 */
.testimonials-strip {
  margin-inline: -1.5rem;
  padding-inline: 1.5rem;
}

@media (min-width: 768px) {
  .testimonials-strip {
    margin-inline: -3rem;
    padding-inline: 3rem;
  }
}

/* Video card — 78vw / 44vw / 32vw, 4:3, rounded, elevated, black behind iframe */
.testimonials-card {
  width: 78vw;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  background: #000;
}

@media (min-width: 768px) {
  .testimonials-card {
    width: 44vw;
  }
}

@media (min-width: 992px) {
  .testimonials-card {
    width: 32vw;
  }
}

.testimonials-play-btn {
  background: transparent;
  cursor: pointer;
}

.testimonials-thumb {
  transition: transform 2.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonials-scrim {
  background: linear-gradient(180deg, rgba(8, 11, 22, 0.1) 0%, transparent 40%, rgba(8, 11, 22, 0.35) 100%);
  transition: opacity 0.5s ease;
}

.testimonials-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(248, 250, 252, 0.95);
  color: var(--forest);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.35);
  transition: transform 0.5s ease, background 0.5s ease, color 0.5s ease;
}

.testimonials-play-icon {
  display: inline-flex;
  margin-left: 2px;
}

@media (hover: hover) {
  .testimonials-card:hover .testimonials-thumb {
    transform: scale(1.03);
  }
  .testimonials-card:hover .testimonials-scrim {
    opacity: 0.7;
  }
  .testimonials-card:hover .testimonials-play {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--bronze);
    color: var(--ivory);
  }
}

.testimonials-iframe {
  border: 0;
}


/* ═══ 60-location ═══ */

/* ═══ 60 · Location — advantage carousel & map ═══ */

/* SectionShell innerClassName "!pt-6 md:!pt-8" — tightened top padding */
.location-inner {
  padding-top: 1.5rem !important;
}

@media (min-width: 768px) {
  .location-inner {
    padding-top: 2rem !important;
  }
}

/* SectionShell inner frame — max-w-[1500px] mx-auto */
.location-frame {
  max-width: 1500px;
  margin-inline: auto;
}

/* Chapter kicker (mb-5 md:mb-7 + essence line) */
.location-chapter {
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .location-chapter {
    margin-bottom: 1.75rem;
  }
}

.location-essence {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--grey-400);
}

/* Two-column grid — gap-10 lg:gap-14 */
.location-grid {
  --bs-gutter-x: 2.5rem;
  --bs-gutter-y: 2.5rem;
}

@media (min-width: 992px) {
  .location-grid {
    --bs-gutter-x: 3.5rem;
    --bs-gutter-y: 3.5rem;
  }
}

.location-left {
  row-gap: 2.5rem;
}

.location-headline {
  max-width: 16ch;
  color: var(--forest);
}

.location-advantage-kicker {
  margin-bottom: 1.5rem;
}

/* ── Image stage — 16:10, large radius, floating shadow ── */
.location-stage {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-float);
  background: var(--forest-dark);
}

.location-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.location-slide.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
  animation: location-wipe 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes location-wipe {
  from {
    clip-path: inset(0 0 0 100%);
    opacity: 0.4;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

.location-slide-scrim {
  background: linear-gradient(180deg, transparent 45%, rgba(8, 11, 22, 0.72) 100%);
  pointer-events: none;
}

.location-slide-caption {
  padding: 1.75rem;
}

.location-slide.is-active .location-slide-caption {
  animation: location-caption 0.5s ease-out 0.2s both;
}

@keyframes location-caption {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.location-slide-title {
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 300;
  line-height: 1.25;
  color: var(--ivory);
}

.location-slide-desc {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: rgba(248, 250, 252, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .location-slide.is-active,
  .location-slide.is-active .location-slide-caption {
    animation: none;
  }
}

/* ── Controls ── */
.location-controls {
  gap: 1.25rem;
}

.location-nav-group {
  gap: 0.75rem;
}

.location-nav {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(27, 33, 56, 0.25);
  color: var(--forest);
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}

@media (hover: hover) {
  .location-nav:hover {
    border-color: var(--bronze);
    background: var(--bronze);
    color: var(--ivory);
  }
}

.location-counter {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
  color: inherit;
}

.location-counter-total {
  color: var(--grey-400);
}

.location-ticks {
  gap: 0.375rem;
}

.location-tick {
  width: 0.5rem;
  height: 0.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(27, 33, 56, 0.2);
  cursor: pointer;
  transition: width 0.5s var(--ease-cinematic), background 0.5s ease;
}

@media (hover: hover) {
  .location-tick:hover {
    background: rgba(27, 33, 56, 0.4);
  }
}

.location-tick.is-active {
  width: 1.75rem;
  background: var(--bronze);
}

/* ── Map ── */
.location-map {
  min-height: 360px;
  border: 1px solid rgba(27, 33, 56, 0.1);
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-float);
}

.location-map-iframe {
  filter: grayscale(0.15);
}


/* ═══ 65-finale ═══ */

/* ═══════════ 65 · Finale — avenue close + site footer ═══════════
   The avenue scene is position:sticky; the footer that follows in flow
   scrolls up and covers it — the static equivalent of the React
   scroll-choreographed "footer slides over the avenue" finale. */

.finale-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ── Sticky avenue scene ── */

.finale-avenue {
  height: 100vh;
  height: 100svh;
  z-index: 1;
}

/* Settled mid-state of the source's 1.1 → 1.02 scroll-linked zoom */
.finale-avenue-media {
  transform: scale(1.06);
}

.finale-avenue-shade {
  background: linear-gradient(180deg, rgba(8, 11, 22, 0.42) 0%, rgba(8, 11, 22, 0.24) 45%, rgba(8, 11, 22, 0.7) 100%);
}

.finale-avenue-title {
  z-index: 2;
  margin: 0;
  padding-inline: 1.5rem;
  color: var(--ivory);
}

/* ── Footer shell ── */

.finale-footer {
  z-index: 2;
}

.finale-footer-inner {
  padding: 3rem 1.5rem calc(5.5rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
  .finale-footer-inner {
    padding: 4rem 3.5rem calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* The floating CTA pills are fixed at bottom:22px in the left and right
   corners on desktop — hold the social/copyright bar clear of them. */
@media (min-width: 861px) {
  .finale-footer-inner {
    padding-bottom: 7.5rem;
  }
}

.finale-frame {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  color: var(--ivory);
}

/* ── Brand mark ── */

.finale-brandmark {
  display: block;
  height: auto;
}

.finale-brandmark--m { width: 88px; }
.finale-brandmark--d { width: 220px; }

/* ── Mobile footer ── */

.finale-m {
  max-width: 28rem;
}

.finale-m-divider {
  margin-top: 1.25rem;
  width: 2.5rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233, 206, 124, 0.5), transparent);
}

.finale-m-nav {
  margin-top: 1.25rem;
  column-gap: 0.25rem;
  row-gap: 0.5rem;
}

.finale-m-link {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(248, 250, 252, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
}

.finale-m-link:hover {
  color: var(--gold);
}

.finale-m-dot {
  margin-inline: 0.5rem;
  color: rgba(248, 250, 252, 0.25);
}

.finale-m-block {
  margin-top: 2rem;
  border-top: 1px solid rgba(248, 250, 252, 0.1);
  padding-top: 1.75rem;
}

.finale-m-logo {
  height: 34px;
  width: auto;
}

.finale-m-addr {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 576px) {
  .finale-m-addr {
    grid-template-columns: 1fr 1fr;
  }
}

.finale-label {
  margin: 0;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(233, 206, 124, 0.8);
}

.finale-m-text {
  margin: 0.375rem 0 0;
  font-size: 0.78rem;
  line-height: 1.375;
  color: rgba(248, 250, 252, 0.55);
}

.finale-m-rera {
  margin-top: 1.25rem;
}

.finale-rera-list {
  margin: 0.375rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.finale-rera-list li {
  font-size: 0.7rem;
  line-height: 1.375;
  color: rgba(248, 250, 252, 0.45);
  overflow-wrap: break-word;
}

.finale-rera-phase { color: rgba(248, 250, 252, 0.65); }
.finale-rera-sep { color: rgba(248, 250, 252, 0.25); }

.finale-m-bottom {
  margin-top: 1.5rem;
  border-top: 1px solid rgba(248, 250, 252, 0.1);
  padding-top: 1.25rem;
  gap: 0.75rem;
}

.finale-m-phone {
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.025em;
  color: var(--gold-light);
  text-decoration: none;
  transition: color 0.3s ease;
}

.finale-m-phone:hover {
  color: var(--gold);
}

.finale-m-copy {
  margin: 0;
  font-size: 0.62rem;
  text-transform: uppercase;
  line-height: 1.625;
  letter-spacing: 0.08em;
  color: rgba(248, 250, 252, 0.4);
}

/* ── Desktop footer ── */

.finale-d-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 0.55fr;
  align-items: center;
  gap: 2.5rem;
  width: 100%;
}

.finale-d-col {
  gap: 2rem;
}

.finale-d-logo {
  height: 52px;
  width: auto;
}

.finale-d-items {
  gap: 1.5rem;
}

.finale-item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.finale-item-label {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ivory);
}

.finale-item-value {
  max-width: 24rem;
  font-size: 0.85rem;
  line-height: 1.625;
  color: rgba(248, 250, 252, 0.6);
  overflow-wrap: break-word;
}

.finale-rera-stack {
  gap: 0.25rem;
}

.finale-item-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.finale-item-link:hover {
  color: var(--gold);
}

.finale-d-copy {
  margin: 0.25rem 0 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(248, 250, 252, 0.4);
}

.finale-d-nav {
  gap: 1rem;
}

.finale-d-link {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(248, 250, 252, 0.75);
  text-decoration: none;
  transition: color 0.3s ease;
}

.finale-d-link:hover {
  color: var(--gold);
}


/* ═══ 70-floating-cta ═══ */

/* Floating CTA — two fixed pills at the foot of the viewport on desktop; on
   mobile they collapse into a full-width split bar with a round call button
   floating just above it. */
.floating-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 22px;
  z-index: 1040; /* above content/nav, below Bootstrap modal backdrop (1050) */
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: clamp(1rem, 3vw, 28px);
  pointer-events: none; /* only the pills catch clicks; the gap stays inert */
  animation: floating-cta-in 0.55s var(--ease-cinematic) 0.35s both;
}

@keyframes floating-cta-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.floating-cta-btn {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 1vw, 14px) clamp(18px, 1.8vw, 30px);
  border: 1px solid rgba(233, 206, 124, 0.55);
  border-radius: var(--radius-button);
  background: linear-gradient(90deg, var(--gold-muted) 0%, var(--gold) 25%, var(--gold-light) 50%, var(--bronze) 78%, var(--gold-muted) 100%);
  color: #fff;
  font-family: var(--font-montserrat);
  font-size: clamp(10px, 0.85vw, 13px);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(27, 33, 56, 0.45);
}

.floating-cta-btn:hover,
.floating-cta-btn:focus-visible {
  color: #fff;
}

/* Light sweeping across the face of each pill */
.floating-cta-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 38%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  animation: floating-cta-shine 3.4s ease-in-out infinite;
  pointer-events: none;
}

.floating-cta-brochure::after {
  animation-delay: 1.2s;
}

.floating-cta-enquire {
  animation: floating-cta-pulse 2.4s ease-in-out infinite;
}

@keyframes floating-cta-shine {
  0% { left: -60%; }
  55%, 100% { left: 130%; }
}

@keyframes floating-cta-pulse {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 8px 22px rgba(27, 33, 56, 0.35);
  }
  50% {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(179, 113, 41, 0.5);
  }
}

/* Call button — mobile only (see the media query below) */
.floating-cta-call {
  display: none;
}

@keyframes floating-cta-ring {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70%, 100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

@media (max-width: 860px) {
  .floating-cta {
    bottom: 0;
    gap: 0;
    padding-inline: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    pointer-events: auto;
    background: var(--forest-dark); /* fills the safe-area strip below the bar */
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.35);
  }

  .floating-cta-btn {
    flex: 1 1 50%;
    padding: 15px 6px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 12px;
    letter-spacing: 0.06em;
  }

  .floating-cta-btn + .floating-cta-btn {
    border-left: 1px solid rgba(255, 255, 255, 0.35);
  }

  .floating-cta-enquire {
    animation: none; /* the lift reads as a seam on a full-width bar */
  }

  .floating-cta-call {
    position: fixed;
    right: 15px;
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-muted) 0%, var(--gold) 55%, var(--gold-light) 100%);
    box-shadow: 0 8px 22px rgba(27, 33, 56, 0.5);
    color: #fff;
  }

  .floating-cta-call svg {
    position: relative;
    z-index: 1;
  }

  .floating-cta-call::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(233, 206, 124, 0.65);
    animation: floating-cta-ring 2s ease-out infinite;
    pointer-events: none;
  }

  body {
    padding-bottom: 52px; /* the bar never covers the last of the page */
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-cta,
  .floating-cta-enquire,
  .floating-cta-btn::after,
  .floating-cta-call::before {
    animation: none;
  }
}


/* ═══ 75-overlays ═══ */

/* Overlays — inquiry modal + timed lead-capture (shared two-panel layout) */

.overlays-dialog {
  max-width: 860px;
}

/* Keep the tall two-panel card on-screen on short viewports */
.overlays-dialog .modal-content {
  max-height: min(920px, 100dvh - 2rem);
  overflow-y: auto;
  overflow-x: hidden;
}

.overlays-grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .overlays-grid {
    grid-template-columns: 0.85fr 1fr;
  }
  .overlays-visual-tall {
    min-height: 420px;
  }
}

.overlays-scrim {
  background: linear-gradient(160deg, rgba(16, 21, 40, 0.55) 0%, rgba(16, 21, 40, 0.35) 45%, rgba(16, 21, 40, 0.85) 100%);
}

.overlays-visual-content {
  padding: 2rem;
}

.overlays-logo {
  height: 5.25rem;
  width: auto;
  max-width: 95%;
  object-fit: contain;
  object-position: left;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.overlays-line {
  width: 2.5rem;
  margin-bottom: 1.25rem;
}

.overlays-tagline {
  font-family: var(--font-montserrat);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ivory);
}

.overlays-tagline-sub {
  margin-top: 1rem;
  font-size: 0.8rem;
  line-height: 1.625;
  color: rgba(248, 250, 252, 0.7);
}

.overlays-form-pane {
  padding: 1.75rem;
}

@media (min-width: 576px) {
  .overlays-form-pane {
    padding: 2.25rem;
  }
}

/* Submit — React Button variant="invitation":
   bg-forest text-ivory border-forest/80 shadow-lift, hover: forest-light + shadow-depth + -1px lift */
.inquiry-submit {
  background: var(--forest);
  color: var(--ivory);
  border: 1px solid rgba(27, 33, 56, 0.8);
  box-shadow: var(--shadow-lift);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
}

@media (hover: hover) {
  .inquiry-submit:hover {
    background: var(--forest-light);
    color: var(--ivory);
    box-shadow: var(--shadow-depth);
    transform: translateY(-1px);
  }
}

/* Backdrop — React overlays use bg-charcoal/60 + backdrop-blur-md */
.modal-backdrop.show {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}


/* ═══ 99-thankyou-body ═══ */

/* Thank-you page — dark canvas, centered composition */

/* min-height (not height) + real padding: the block grows past the viewport on
   short screens instead of centring its overflow off the top where it can't be
   scrolled back into view. */
.thankyou-main {
  min-height: 100vh;
  min-height: 100svh;
  padding-inline: 1.5rem;
  padding-block: clamp(3rem, 9vh, 5.5rem);
  color: var(--ivory);
}

.thankyou-glow {
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(60% 50% at 50% 20%, rgba(179, 113, 41, 0.12), transparent 65%);
}

.thankyou-content {
  z-index: 1;
  animation: thankyou-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

@keyframes thankyou-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .thankyou-content {
    animation: none;
  }
}

.thankyou-logo {
  height: 3rem;
  width: auto;
  object-fit: contain;
  opacity: 0.95;
  filter: brightness(0) invert(1);
  margin-bottom: 2.75rem;
}

@media (min-width: 768px) {
  .thankyou-logo {
    height: 3.5rem;
  }
}

/* Confirmation seal — thin bronze ring, drawn check */
.thankyou-seal {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(206, 161, 68, 0.45);
  background: rgba(206, 161, 68, 0.08);
  color: var(--bronze-light);
  margin-bottom: 1.75rem;
}

.thankyou-seal svg {
  width: 1.5rem;
  height: 1.5rem;
}

.thankyou-seal svg path {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: thankyou-check 0.7s var(--ease-cinematic) 0.55s forwards;
}

@keyframes thankyou-check {
  to { stroke-dashoffset: 0; }
}

.thankyou-kicker {
  color: var(--bronze-light);
  margin-bottom: 1.25rem;
}

.thankyou-headline {
  max-width: 18ch;
  color: var(--ivory);
}

.thankyou-line {
  width: 3rem;
  margin-top: 1.75rem;
}

.thankyou-copy {
  margin-top: 1.75rem;
  margin-bottom: 0;
  max-width: 46ch;
  font-family: var(--font-montserrat);
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(248, 250, 252, 0.62);
}

/* "Your Brochure is Ready." carries .thankyou-copy for its type, and only needs
   the paragraph gap removed so it reads as the next line of the same block. */
.thankyou-brochure-note {
  margin-top: 0;
}

/* Walkthrough hand-off line */
.thankyou-video-note {
  margin-top: 1.25rem;
  margin-bottom: 0;
  font-family: var(--font-montserrat);
  font-size: 1rem;
  color: rgba(248, 250, 252, 0.62);
}

.thankyou-actions {
  margin-top: 2.25rem;
  gap: 0.875rem;
}

.thankyou-meta {
  margin-top: 2.25rem;
  margin-bottom: 0;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: rgba(248, 250, 252, 0.42);
}

.thankyou-phone {
  color: var(--ivory);
  text-decoration: none;
  border-bottom: 1px solid rgba(206, 161, 68, 0.5);
  padding-bottom: 1px;
  margin-left: 0.35rem;
  transition: color 0.4s ease, border-color 0.4s ease;
}

@media (hover: hover) {
  .thankyou-phone:hover {
    color: var(--bronze-light);
    border-color: var(--bronze-light);
  }
}

@media (prefers-reduced-motion: reduce) {
  .thankyou-seal svg path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   ATTALIKA — brand overrides & components added for this site
   (appended; nothing above is edited so the base system is intact)
   ══════════════════════════════════════════════════════════════ */

/* ── Palette: swap the forest-green surfaces for Attalika's graphite,
      and warm the metallics toward the brochure's copper-gold ── */
:root {
  --forest: #1b2138;
  --forest-light: #2b3350;
  --forest-dark: #0d1120;
  --olive: #4b5570;
  --bronze: #cea144;
  --bronze-light: #d3a94e;
  --champagne: #e9ce7c;
  --gold: #c18933;
  --gold-light: #d0a549;
  --gold-muted: #b37129;
  --ivory: #f8fafc;
  --ivory-muted: #eaf0f7;
  --stone: #dae2ee;
}

/* ── Brand lockups ── */
/* The Attalika lockup is wider than the mark it replaced, so give it more room
   and keep it gold on light, white over the hero. */
.sitenav-logo-img { height: 2.4rem; }

@media (min-width: 768px) {
  .sitenav-logo-img { height: 2.9rem; }
}

.sitenav.is-on-hero .sitenav-logo-img {
  height: 2.9rem;
  filter: none;                 /* keep the gold gradient over the hero */
  opacity: 1;
}

@media (min-width: 576px) { .sitenav.is-on-hero .sitenav-logo-img { height: 3.2rem; } }
@media (min-width: 768px) { .sitenav.is-on-hero .sitenav-logo-img { height: 3.5rem; } }
@media (min-width: 992px) { .sitenav.is-on-hero .sitenav-logo-img { height: 3.8rem; } }

/* Prakalp lockup ships white already — cancel the template's invert */
.finale-m-logo,
.finale-d-logo { filter: none; }

.finale-m-logo { height: 42px; }
.finale-d-logo { height: 60px; }

/* Modal + thank-you lockups keep the gold gradient */
.overlays-logo,
.thankyou-logo { filter: none; }

/* Inline SVG amenity/highlight icons inherit colour, so give them one */
.lifeinside-icon-img { color: var(--gold-light); }

.residences-lede-note {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: rgba(248, 250, 252, 0.6);
}

/* ══ Testimonial quote cards ══ */
.quote-grid { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* Below lg the quote cards become a swipeable, snapping slider instead of a stack */
@media (max-width: 991.98px) {
  .quote-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    margin: clamp(2rem, 5vw, 2.5rem) calc(var(--gutter) * -1) 0 0;
    padding: 0 var(--gutter) 0.25rem 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .quote-grid::-webkit-scrollbar { display: none; }

  .quote-grid > .col {
    flex: 0 0 auto;
    width: min(88%, 20rem);
    scroll-snap-align: start;
    padding: 0;                 /* the flex gap handles spacing */
  }

  /* Tighter card so a quote fits without a tall, half-empty box */
  .quote-card {
    padding: 1.5rem 1.4rem 1.4rem;
    gap: 0.9rem;
  }

  .quote-mark {
    font-size: 2.5rem;
    line-height: 0.5;
  }

  .quote-body p {
    font-size: 1rem;
    line-height: 1.6;
  }

  .quote-name { font-size: 0.76rem; }
  .quote-role { font-size: 0.74rem; }
}

.quote-hint {
  gap: 0.6rem;
  margin-top: 1rem;
  font-family: var(--font-montserrat);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey-400);
}

.quote-hint-arrow {
  animation: quote-hint-nudge 1.8s var(--ease-luxury) infinite;
}

@keyframes quote-hint-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .quote-hint-arrow { animation: none; }
}

.quote-card {
  padding: clamp(1.75rem, 2.6vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.quote-mark {
  font-family: var(--font-proza);
  font-size: 3.5rem;
  line-height: 0.6;
  color: var(--gold-light);
}

.quote-body p {
  font-family: var(--font-proza);
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  line-height: 1.65;
  color: var(--grey-800);
}

.quote-author { margin-top: auto; }

.quote-name {
  font-family: var(--font-montserrat);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
}

.quote-role {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--grey-600);
}

/* ══ Neighbourhood lists (location section) ══ */
.nearby-block { margin-top: clamp(3rem, 6vw, 4.5rem); }

.nearby-head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.nearby-sub { color: var(--grey-600); max-width: 60ch; }

/* Below lg the nearby lists become a swipeable, snapping carousel */
@media (max-width: 991.98px) {
  .nearby-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    margin: 0 calc(var(--gutter) * -1) 0 0;
    padding: 0 var(--gutter) 0.25rem 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .nearby-grid::-webkit-scrollbar { display: none; }

  .nearby-grid > .col {
    flex: 0 0 auto;
    width: min(72%, 17rem);
    scroll-snap-align: start;
    padding: 0;
  }
}

.nearby-card {
  padding: 1.35rem 1.25rem;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(17, 23, 38, 0.08);
}

.nearby-title {
  font-family: var(--font-proza);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.85rem;
  color: var(--charcoal);
}

.nearby-list li {
  position: relative;
  padding-left: 0.9rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--grey-600);
}

.nearby-list li + li { margin-top: 0.45rem; }

.nearby-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

/* ══ About Us — Prakalp Group (#about) ══ */
.about-section { isolation: isolate; }

.about-glow {
  position: absolute;
  inset: auto -10% -30% auto;
  width: 60vw;
  height: 60vw;
  max-width: 720px;
  max-height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(193, 137, 51, 0.14), transparent 62%);
  pointer-events: none;
  z-index: 0;
}

.about-grid { --bs-gutter-y: clamp(2.5rem, 5vw, 3.5rem); }

.about-kicker { color: var(--champagne); }
.about-heading { color: var(--ivory); }

.about-lede {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  max-width: 56ch;
  font-family: var(--font-proza);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.65;
  color: rgba(248, 250, 252, 0.9);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto; /* keeps the word gaps even on narrow measures */
}

.about-copy {
  margin-top: 1.25rem;
  max-width: 62ch;
  font-size: clamp(0.98rem, 1.15vw, 1.05rem);
  line-height: 1.8;
  color: rgba(248, 250, 252, 0.62);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* Ragged right below the tablet breakpoint — justified text opens rivers
   once the line drops under roughly 45 characters. */
@media (max-width: 575.98px) {
  .about-lede,
  .about-copy {
    text-align: left;
    hyphens: manual;
  }
}

.about-panel {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--radius-card-lg);
  background: rgba(248, 250, 252, 0.04);
  border: 1px solid rgba(248, 250, 252, 0.1);
  backdrop-filter: blur(4px);
}

@media (min-width: 992px) {
  .about-panel { margin-left: auto; max-width: 26rem; }
}

.about-logo {
  height: 46px;
  width: auto;
  filter: none;
  opacity: 0.9;
}

.about-rule { margin: clamp(1.5rem, 2.5vw, 2rem) 0; }

.about-stat + .about-stat {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(248, 250, 252, 0.09);
}

.about-stat-value {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-proza);
  font-size: clamp(2.25rem, 3.6vw, 2.9rem);
  font-weight: 400;
  line-height: 1;
  color: var(--gold-light);
}

.about-stat-unit {
  font-family: var(--font-montserrat);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--champagne);
}

.about-stat-label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(248, 250, 252, 0.6);
}

/* ═══ 64-apf ═══ */

/* ══ Home Loan APF — bank logo marquee (#home-loan) ══
   Reuses the shared .marquee / .marquee-track engine; the track carries two
   identical halves so the -50% keyframe wraps without a visible seam. ══ */
.apf-section {
  /* pure white, not --ivory: the bank logos ship on white plates and any
     off-white ground would frame each one in a visible rectangle */
  background: #fff;
}

.apf-headline {
  color: var(--charcoal);
}

.apf-rule {
  width: min(340px, 60%);
  margin-block: clamp(1.5rem, 3vw, 2.25rem) clamp(2rem, 4vw, 3rem);
}

.apf-marquee {
  --marquee-duration: 42s;
}

.apf-track {
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.apf-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* reserves the slot before the (lazy, intrinsic-size-less) image lands */
  min-width: clamp(150px, 16vw, 210px);
}

.apf-logo img {
  width: auto;
  height: clamp(46px, 5vw, 64px);
  object-fit: contain;
  filter: saturate(0.92);
  opacity: 0.85;
  transition: opacity 0.4s ease, filter 0.4s ease;
}

.apf-logo img:hover {
  opacity: 1;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .apf-track {
    justify-content: flex-start;
  }
}

/* ══ Bootstrap's .text-body utility ships with !important and forces a dark
      colour, so copy on the charcoal sections was rendering near-invisible.
      Restore the intended tones. ══ */
.masterplan-sub,
.gallery-sub {
  color: var(--champagne) !important;
}

.masterplan-sub em,
.gallery-sub em {
  color: rgba(233, 206, 124, 0.65) !important;
}

/* ══════════════════════════════════════════════════════════════
   Footer — simple: contact + RERA, fine print, social/copyright bar
   ══════════════════════════════════════════════════════════════ */
.ftr-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 768px) {
  .ftr-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3rem;
  }
}

.ftr-block + .ftr-block { margin-top: 1.25rem; }

.ftr-label {
  display: block;
  font-family: var(--font-montserrat);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.45);
}

.ftr-value {
  display: block;
  margin-top: 0.3rem;
  max-width: 42ch;
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(248, 250, 252, 0.8);
}

.ftr-link {
  color: rgba(248, 250, 252, 0.8);
  text-decoration: none;
  transition: color 0.4s ease;
}

.ftr-link:hover { color: var(--gold-light); }

/* ── MahaRERA ── */

.ftr-rera {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ftr-rera-seal {
  flex: none;
  width: 68px;
  height: auto;
}

.ftr-rera-no {
  font-family: var(--font-montserrat);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: rgba(248, 250, 252, 0.8);
}

.ftr-rera-link {
  margin-top: 0.25rem;
  font-size: 0.82rem;
  line-height: 1.5;
}

.ftr-rera-link a {
  color: var(--gold-light);
  text-decoration: none;
  word-break: break-word;
}

.ftr-rera-link a:hover { text-decoration: underline; }

/* ── Fine print ── */

.ftr-disclaimer {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(248, 250, 252, 0.08);
}

.ftr-disclaimer-text {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.8;
  color: rgba(248, 250, 252, 0.35);
}

.ftr-disclaimer-text + .ftr-disclaimer-text { margin-top: 0.9rem; }
.ftr-disclaimer-more .ftr-disclaimer-text:first-child { margin-top: 0.9rem; }

.ftr-disclaimer-toggle {
  margin-top: 0.75rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-montserrat);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.5);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.4s ease;
}

.ftr-disclaimer-toggle:hover { color: var(--gold-light); }

/* ── Bottom bar ── */

.ftr-bar {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(248, 250, 252, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

@media (min-width: 768px) {
  .ftr-bar {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.ftr-social { gap: 1.25rem; }

.ftr-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(248, 250, 252, 0.55);
  text-decoration: none;
  transition: color 0.4s ease;
}

.ftr-social-link:hover { color: var(--gold-light); }

.ftr-copy {
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: rgba(248, 250, 252, 0.4);
}

/* ══════════════════════════════════════════════════════════════
   Horizontal-overflow guard
   AOS's fade-left / fade-right start their elements translated 100px
   sideways and only reset once scrolled into view. Any such element in a
   section that does not clip (the Location map is the main one) widened
   the document and gave the page a horizontal scrollbar on phones.
   Clip locally, and keep a viewport-level guard as a safety net.
   ══════════════════════════════════════════════════════════════ */
body {
  overflow-x: hidden;          /* propagates to the viewport; sticky still works */
}

/* overflow-x: clip does not create a scroll container, so it cannot swallow
   sticky positioning inside these sections. */
.location-section,
.testimonials-section,
.masterplan,
.gallery-section,
.philosophy-section,
.residences-section,
.modelhomes,
.finale {
  overflow-x: clip;
}

/* Nothing inside a section may out-run its own width */
.location-map,
.location-stage,
.nearby-grid,
.exp-stage,
.p-card,
.quote-card {
  max-width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   NAV — dark blue bar when scrolled off the hero
   The Attalika lockup is a copper→gold gradient, which washed out
   against the light glass bar. Flipping the scrolled state to the
   ink-navy surface gives the mark the contrast it needs, and pulls
   the links/CTA to their on-dark treatment to match.
   ══════════════════════════════════════════════════════════════ */

.sitenav {
  background: rgba(23, 29, 51, 0.92);
  border-bottom-color: rgba(206, 161, 68, 0.18);
  box-shadow: 0 2px 24px rgba(8, 11, 22, 0.35);
}

/* Hero state is untouched — still fully transparent over the banner */
.sitenav.is-on-hero {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Lockup: full strength on the navy bar, same as over the hero */
.sitenav-logo-img {
  filter: none;
  opacity: 1;
}

/* Links read light on navy; the active item stays gold */
.sitenav-link { color: rgba(248, 250, 252, 0.78); }
.sitenav-link:hover { color: var(--ivory); }
.sitenav-link.is-active { color: var(--gold-light); }

/* CTA was ink-on-light, which vanishes on navy — make it the gold pill */
.sitenav-brochure {
  background: var(--bronze);
  color: #10182b;
  border-color: transparent;
  box-shadow: 0 10px 30px -12px rgba(179, 113, 41, 0.6);
}

.sitenav-brochure:hover {
  background: var(--gold-light);
  color: #10182b;
}

/* Mobile burger */
.sitenav-toggle { color: var(--ivory); }

/* ══════════════════════════════════════════════════════════════
   WALKTHROUGH — a single vertical film
   The walkthrough is a YouTube Short (9:16), so the two-up 16:9
   grid is replaced by one centred portrait card. YouTube draws its
   own play control, so the custom .modelhomes-overlay is not used
   here — the JS in main.js no-ops when a card has no <video>.
   ══════════════════════════════════════════════════════════════ */

.modelhomes-grid--single {
  display: flex;
  justify-content: center;
  margin-top: 3.5rem;
}

@media (min-width: 768px) {
  .modelhomes-grid--single { margin-top: 4rem; }
}

.modelhomes-card--vertical {
  --bs-aspect-ratio: 177.78%;   /* 9 : 16 */
  width: 100%;
  max-width: 420px;
}

.modelhomes-card--vertical iframe {
  border: 0;
  border-radius: inherit;
}

/* ══════════════════════════════════════════════════════════════
   NAV — Prakalp lockup on the right
   Mirrors attalikaresidences.com, where the header is the project
   mark on the left and the developer mark on the right. Sized to
   sit level with the Attalika lockup opposite it.
   ══════════════════════════════════════════════════════════════ */

.sitenav-partner-logo {
  height: 2.2rem;
  width: auto;
  display: block;
}

@media (min-width: 1200px) {
  .sitenav-partner-logo { height: 2.5rem; }
}

/* Over the hero the bar is transparent, so the mark needs the same
   lift the nav links get to stay legible against the banner. */
.sitenav.is-on-hero .sitenav-partner-logo {
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45));
}

/* ══════════════════════════════════════════════════════════════
   NAV — close button reachable while the mobile menu is open

   .sitenav-menu is a fixed, full-viewport overlay at z-index 1041,
   but .sitenav — which holds the toggle that becomes the cross —
   sits at 1030. The overlay therefore painted straight over the
   close button, leaving no way out of the menu but the browser
   back gesture. Lift the header above the overlay while it is
   open, and drop the bar's own surface so only the lockup and the
   cross float over the menu.

   1042 stays under Bootstrap's modal backdrop (1050), so a modal
   still covers the header as before.
   ══════════════════════════════════════════════════════════════ */

.sitenav.is-menu-open {
  z-index: 1042;
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Give the cross a comfortable tap target over the overlay */
.sitenav.is-menu-open .sitenav-toggle {
  color: var(--ivory);
}


/* ═══ Client revisions — credit badges + form branding ═══ */

/* Amenities stage — "Shot on Location" credit sits above the shade/caption */
.exp-stage-badge {
  z-index: 5;
}

/* Location advantage slides — "Artistic Impression" credit */
.location-slide-badge {
  z-index: 3;
}

@media (max-width: 575.98px) {
  .exp-stage-badge,
  .location-slide-badge {
    font-size: 0.55rem;
    padding: 0.35rem 0.7rem;
    letter-spacing: 0.14em;
  }
}

/* Attalika lockup above the enquiry forms */
.form-brand-logo {
  display: block;
  height: 3.25rem;
  width: auto;
  max-width: 70%;
  object-fit: contain;
  object-position: left;
  margin-bottom: 1.25rem;
}

@media (min-width: 576px) {
  .form-brand-logo {
    height: 3.75rem;
  }
}