/* -------------------------------------------------------------
   Nishika Elysium - Mobile-Optimized Stylesheet
   Designed based on Figma specification (Dev File Node 344-61)
   ------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600&family=Zalando+Sans:wght@400;500;600&family=Zalando+Sans+Expanded:wght@500;600&display=swap');

/* Client Custom Typeface: Canela Thin (Commercial Type) */
@font-face {
  font-family: 'Canela';
  src: url('assets/fonts/Canela-Thin-Web.woff2') format('woff2'),
       url('assets/fonts/Canela-Thin.otf') format('opentype');
  font-weight: 100 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Canela Web';
  src: url('assets/fonts/Canela-Thin-Web.woff2') format('woff2'),
       url('assets/fonts/Canela-Thin.otf') format('opentype');
  font-weight: 100 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color Palette - Figma Specified & Extracted */
  --bg-hero-overlay: linear-gradient(180deg, rgba(25, 22, 19, 0.5) 0%, rgba(15, 13, 11, 0.7) 100%);
  --bg-cream: #f8f4e7;
  --bg-cream-card: #f9f7f2;
  --bg-dark-brown: #514237;
  --bg-dark-espresso: #2e2621;

  /* Button Warm Taupe color from Figma screenshot */
  --btn-header-bg: #aa9d91;
  --btn-header-hover: #998c80;

  --text-primary-dark: #514237;
  --text-secondary-dark: #514237;
  --text-muted: #8c857b;
  --text-light: #ffffff;
  --text-light-cream: #f6f3eb;
  --text-light-muted: #c9c3b8;

  --border-light: #dcd5c9;
  --border-dark: #534840;
  --border-header: rgba(246, 243, 235, 0.35);

  --accent-gold: #c3a478;

  /* Typography */
  --font-serif: 'Canela', 'Canela Web', 'Cormorant Garamond', Georgia, serif;
  --font-display-caps: 'Zalando Sans Expanded', 'Inter', sans-serif;
  --font-body: 'Zalando Sans', 'Plus Jakarta Sans', sans-serif;

  /* Transitions */
  --transition-fast: 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

body {
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}

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

button, input, select, textarea {
  font-family: inherit;
}

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

/* HEADER & NAVIGATION */
.header-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 1.25rem 4% 0;
  transition: all var(--transition-smooth);
}

.header-nav.scrolled-light {
  background: rgba(246, 243, 235, 0.98);
  backdrop-filter: blur(14px);
  padding: 0.75rem 4%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.header-nav-container {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--border-header);
  padding-bottom: 1rem;
  transition: border-color var(--transition-fast);
}

.header-nav.scrolled-light .header-nav-container {
  border-color: var(--border-light);
}

.header-left-links, .header-right-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.header-right-links {
  justify-content: flex-end;
}

.nav-link {
  font-family: var(--font-display-caps);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-light-cream);
  transition: color var(--transition-fast);
  position: relative;
}

.header-nav.scrolled-light .nav-link {
  color: var(--text-primary-dark);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width var(--transition-fast);
}

.nav-link:hover::after {
  width: 100%;
}

.header-logo-wrap {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1rem;
}

.logo-img {
  height: 68px;
  width: auto;
  transition: filter var(--transition-fast);
}

.header-nav.scrolled-light .logo-img {
  filter: brightness(0) saturate(100%);
}

.logo-wordmark {
  display: none;
}

/* Shown only on phones (Figma mobile frame) */
.planning-feature-mobile-only {
  display: none;
}

/* Phone footer pattern (Figma mobile frame), hidden on larger screens */
.motif-svg-phone {
  display: none;
}

/* Header Request Preview Button */
.btn-header-preview {
  font-family: var(--font-display-caps);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  border-radius: 9999px;
  background-color: var(--btn-header-bg);
  color: #ffffff;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}

.btn-header-preview:hover {
  background-color: var(--btn-header-hover);
  transform: translateY(-1px);
}

/* Mobile Hamburger Toggle */
.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 101;
  order: -1;
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--text-light-cream);
  margin: 5px 0;
  transition: all 0.3s ease;
}

.header-nav.scrolled-light .hamburger-line {
  background-color: var(--text-primary-dark);
}

/* Mobile Slide-Out Drawer Menu */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-color: var(--bg-dark-brown);
  color: var(--text-light);
  z-index: 200;
  padding: 0 2rem 3rem;
  display: flex;
  flex-direction: column;
  transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-nav-drawer.active {
  left: 0;
}

.mobile-drawer-close {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: none;
  color: var(--text-primary-dark);
  font-family: var(--font-display-caps);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 1.25rem 0;
  background-color: var(--bg-cream);
  margin: 0 -2rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.mobile-drawer-close span {
  font-size: 1.1rem;
  line-height: 1;
}

.mobile-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2.5rem;
}

.mobile-drawer-link {
  font-family: var(--font-display-caps);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1.25rem 0;
}

.btn-pill-drawer {
  background: var(--bg-cream);
  color: var(--text-primary-dark);
  border-color: var(--bg-cream);
  width: 100%;
  text-align: center;
}

/* SECTION 1: HERO SECTION WITH BUILDING BACKGROUND */
.hero-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: 8.5rem 1.5rem 3rem;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0 -10% -15%;
  background-image: var(--bg-hero-overlay), url('assets/hero_building_bg.jpg');
  background-size: cover;
  background-position: center 5%;
  background-repeat: no-repeat;
  z-index: 0;
}

.hero-content {
  max-width: 900px;
  margin: auto;
  z-index: 1;
  position: relative;
  width: 100%;
}

.heading-display-hero {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.35rem, 7vw, 5.25rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.hero-subtitle-bottom {
  font-family: var(--font-display-caps);
  font-size: clamp(0.65rem, 2.5vw, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 1rem;
  z-index: 1;
  position: relative;
  padding: 0 1rem;
}

.mobile-only-br {
  display: none;
}

/* Typography & Badges */
.caps-badge {
  font-family: var(--font-display-caps);
  font-size: 0.725rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 1.25rem;
}

.caps-badge-light {
  color: var(--text-light-muted);
}

.heading-display {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.15rem, 5.5vw, 4.25rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary-dark);
}

.btn-pill {
  font-family: var(--font-display-caps);
  font-size: 0.725rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.85rem 1.85rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn-pill-solid-dark {
  background: var(--bg-dark-brown);
  color: #ffffff;
  border-color: var(--bg-dark-brown);
}

.btn-pill-solid-dark:hover {
  background: var(--bg-dark-espresso);
  border-color: var(--bg-dark-espresso);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(46, 38, 33, 0.25);
}

.btn-pill-light {
  background: var(--bg-cream);
  color: var(--text-primary-dark);
  border-color: var(--bg-cream);
}

.btn-pill-light:hover {
  background: #ffffff;
  transform: translateY(-1px);
}

/* SECTION 2: THE NISHIKA CONCEPT */
.concept-section {
  background-color: var(--bg-cream);
  padding: 5rem 4% 5.5rem;
}

.container-max {
  max-width: 1360px;
  margin: 0 auto;
}

.concept-header-block {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 3.5rem;
}

.concept-description-body {
  font-size: 1rem;
  color: var(--text-secondary-dark);
  margin-top: 1.25rem;
  line-height: 1.7;
}

/* Carousel Grid */
.cards-slider-wrapper {
  position: relative;
  border-top: 1px solid var(--border-light);
  padding-top: 3rem;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  transition: opacity 0.3s ease;
}

.concept-card {
  background: var(--bg-cream);
  display: flex;
  flex-direction: column;
  padding: 0 1.5rem;
  border-right: 1px solid var(--border-light);
}

.concept-card:first-child {
  border-left: 1px solid var(--border-light);
}

.concept-card-img-wrap {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
  margin-bottom: 1.5rem;
}

.concept-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.concept-card:hover .concept-card-img-wrap img {
  transform: scale(1.04);
}

.concept-card-title {
  font-family: var(--font-display-caps);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  color: var(--text-primary-dark);
}

.concept-card-desc {
  font-size: 0.9rem;
  color: var(--text-secondary-dark);
  line-height: 1.65;
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 3rem;
}

.carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #b5ae9e;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-primary-dark);
  transition: all var(--transition-fast);
}

.carousel-btn:hover {
  background: var(--bg-dark-brown);
  color: #ffffff;
  border-color: var(--bg-dark-brown);
}

.carousel-btn-dark {
  background: #8e8376;
  color: #ffffff;
  border-color: #8e8376;
}

.carousel-indicator {
  font-family: var(--font-display-caps);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--text-muted);
}

.carousel-indicator span.active {
  color: var(--text-primary-dark);
}

/* SECTION 3: HERO BUILDING BANNER */
.hero-building-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #f7e6ca;
}

.hero-building-banner img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-building-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 7%;
  background: linear-gradient(90deg, rgba(246, 237, 218, 0.65) 0%, rgba(246, 237, 218, 0.1) 75%);
}

.hero-building-title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5.5vw, 5.25rem);
  font-weight: 300;
  color: #5E4E43;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.4);
}

/* SECTION 4: THE RESIDENCES */
.residences-section {
  background-color: var(--bg-cream);
  padding: 5rem 4% 5.5rem;
}

.residences-intro {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 3.5rem;
}

.residences-bold-line {
  font-family: var(--font-display-caps);
  font-size: 0.825rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-primary-dark);
  margin: 1.5rem 0 1rem;
}

.residence-gallery-frame {
  margin-top: 3rem;
  position: relative;
}

.residence-gallery-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1rem;
  height: 500px;
}

.residence-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--transition-fast);
}

/* SECTION 5: THE PLANNING */
.planning-hero-banner {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 380px;
  overflow: hidden;
}

.planning-hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.planning-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
}

.planning-detail-section {
  background-color: var(--bg-cream);
  padding: 3rem 4% 3.5rem;
}

.planning-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.planning-img-wrap {
  aspect-ratio: 4 / 3.75;
  overflow: hidden;
}

.planning-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.planning-features-list {
  margin: 2rem 0 2.5rem;
  border-top: 1px solid var(--border-light);
}

.planning-feature-item {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--border-light);
  font-family: var(--font-display-caps);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-primary-dark);
}

/* SECTION 6: THE AMENITIES */
.amenities-section {
  background-color: var(--bg-cream);
  padding: 5rem 4% 5.5rem;
  border-top: 1px solid var(--border-light);
}

.amenities-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3.5rem;
}

.amenities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.amenities-card {
  display: flex;
  flex-direction: column;
}

.amenities-img-wrap {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.amenities-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.artistic-tag {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  font-size: 0.6rem;
  padding: 3px 8px;
  letter-spacing: 0.05em;
  border-radius: 2px;
}

.amenities-card-title {
  font-family: var(--font-display-caps);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.amenities-card-desc {
  font-size: 0.9rem;
  color: var(--text-secondary-dark);
}

/* SECTION 7: THE LOCATION & DYNAMIC MAP */
.location-section {
  background-color: var(--bg-cream);
  padding: 5rem 4% 5.5rem;
  border-top: 1px solid var(--border-light);
}

.location-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 3.5rem;
}

.location-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 3rem;
  align-items: start;
  margin-top: 1.5rem;
}

.map-container-wrap {
  width: 100%;
  height: 520px;
  background: #e6e3da;
  border: 1px solid var(--border-light);
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

#leaflet-map {
  width: 100%;
  height: 100%;
  z-index: 1;
}

.custom-map-pin {
  background: var(--bg-dark-brown);
  color: #ffffff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display-caps);
  font-size: 0.75rem;
  font-weight: 700;
  border: 2px solid #ffffff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}

.custom-map-pin.main-pin {
  background: var(--accent-gold);
  width: 42px;
  height: 42px;
  font-size: 1.15rem;
  z-index: 999;
  box-shadow: 0 0 0 4px rgba(195, 164, 120, 0.35), 0 4px 12px rgba(0, 0, 0, 0.35);
}

.location-accordions {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-light);
}

.accordion-item {
  border-bottom: 1px solid var(--border-light);
}

.accordion-header {
  width: 100%;
  padding: 1.15rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: none;
  font-family: var(--font-display-caps);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-primary-dark);
  cursor: pointer;
  text-align: left;
}

.accordion-icon {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  transition: transform var(--transition-fast);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-item.active .accordion-content {
  max-height: 300px;
  padding-bottom: 1.25rem;
}

.accordion-item.active .accordion-icon {
  transform: none;
}

.place-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.place-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--text-secondary-dark);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
  transition: background var(--transition-fast);
}

.place-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.place-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-dark-brown);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display-caps);
  font-size: 0.7rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* SECTION 8: THE DEVELOPER & STATS */
.developer-section {
  background-color: var(--bg-cream);
  padding: 5rem 4% 5.5rem;
  border-top: 1px solid var(--border-light);
}

.developer-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: center;
  margin-bottom: 4rem;
}

.developer-img-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.developer-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.developer-info p {
  font-size: 0.95rem;
  color: var(--text-secondary-dark);
  line-height: 1.7;
  margin-top: 1.25rem;
}

.stats-counter-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-top: 2.5rem;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 2.5rem;
}

.stat-item {
  padding: 0 1.5rem;
  border-right: 1px solid var(--border-light);
  font-family: var(--font-display-caps);
  font-size: 0.775rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary-dark);
}

.stat-item:last-child {
  border-right: none;
}

.stat-num {
  font-size: 1.4rem;
  font-weight: 700;
  display: block;
  margin-bottom: 0.25rem;
}

/* Pattern Motif Strip */
.motif-pattern-strip {
  background-color: var(--bg-dark-brown);
  overflow: hidden;
  line-height: 0;
}

.motif-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* SECTION 9: FOOTER & CONTACT FORM */
.footer-contact-section {
  background-color: var(--bg-dark-brown);
  color: #ffffff;
  padding: 5rem 4% 4rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
}

.contact-form-block h3 {
  font-family: var(--font-display-caps);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  color: #ffffff;
}

.form-group {
  margin-bottom: 1.5rem;
  position: relative;
}

.form-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-dark);
  padding: 0.85rem 0;
  color: #ffffff;
  font-size: 0.925rem;
  outline: none;
  transition: border-color var(--transition-fast);
}

.form-input::placeholder {
  color: var(--text-light-muted);
}

.form-input:focus {
  border-color: #ffffff;
}

.phone-input-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.country-select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-dark);
  padding: 0.85rem 0;
  color: #ffffff;
  font-size: 0.925rem;
  outline: none;
  cursor: pointer;
}

.country-select option {
  background: var(--bg-dark-brown);
  color: #ffffff;
}

.form-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 1.75rem 0;
}

.form-checkbox {
  accent-color: var(--accent-gold);
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
}

.form-checkbox-label {
  font-size: 0.8rem;
  color: var(--text-light-muted);
  line-height: 1.5;
}

.form-checkbox-label a {
  text-decoration: underline;
  color: #ffffff;
}

.footer-info-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.address-text {
  font-family: var(--font-display-caps);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.8;
  color: var(--text-light-muted);
  text-transform: uppercase;
}

.contact-details {
  margin-top: 3rem;
  font-family: var(--font-display-caps);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.contact-link {
  display: block;
  margin-bottom: 0.75rem;
  color: #ffffff;
  border-bottom: 1px solid transparent;
  width: fit-content;
  transition: border-color var(--transition-fast);
}

.contact-link:hover {
  border-color: #ffffff;
}

.footer-bottom-copy {
  margin-top: 4rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--text-light-muted);
}

/* Modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-card {
  background: var(--bg-cream);
  padding: 2.5rem 2rem;
  border-radius: 6px;
  max-width: 460px;
  width: 90%;
  position: relative;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.modal-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-primary-dark);
}

/* =============================================================
   RESPONSIVE MEDIA QUERIES (FULL MOBILE & TABLET OPTIMIZATIONS)
   ============================================================= */

@media (max-width: 992px) {
  .header-nav-container {
    display: flex;
    align-items: center;
  }
  .header-left-links {
    display: none;
  }
  .header-right-links {
    display: none;
  }
  .mobile-menu-toggle {
    display: block;
  }
  .header-logo-wrap {
    flex: 1;
    justify-content: center;
  }
  .planning-grid, .location-grid, .developer-grid, .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .stats-counter-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
  .stat-item {
    border-right: none;
    padding: 0;
  }
}

@media (max-width: 768px) {
  .header-nav {
    padding: 0.85rem 4% 0;
  }
  .header-nav-container {
    padding-bottom: 0.65rem;
  }
  .logo-img {
    height: 52px;
  }
  .mobile-only-br {
    display: inline;
  }
  .hero-section {
    padding: 7.5rem 1.25rem 2.5rem;
  }
  .heading-display-hero {
    font-size: clamp(2.1rem, 7.5vw, 3rem);
  }
  .cards-grid {
    grid-template-columns: 1fr;
  }
  .concept-card {
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-light);
    padding: 1.5rem 0;
  }
  .concept-card:last-child {
    border-bottom: none;
  }
  .amenities-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .residence-gallery-grid {
    grid-template-columns: 1fr;
    height: auto;
  }
  .residence-gallery-img {
    aspect-ratio: 16 / 9;
    height: auto;
  }
  .hero-building-banner {
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .hero-building-banner img {
    width: 100%;
    height: auto;
    order: 2;
  }
  .hero-building-overlay {
    position: relative;
    inset: auto;
    order: 1;
    background: var(--bg-cream);
    padding: 2.5rem 6% 1.5rem;
    align-items: flex-start;
  }
  .hero-building-title {
    font-size: clamp(2.5rem, 9vw, 3.5rem);
  }
  .map-container-wrap {
    height: 360px;
  }
  .footer-bottom-copy {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
  .phone-input-row {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .planning-detail-section {
    padding: 2.5rem 4% 3rem;
  }
}

/* =============================================================
   DESKTOP (993px+) - aligned to Figma Dev File, nodes 344-61 / 344-62 (1440px canvas)
   Mobile and tablet rules above are untouched.
   ============================================================= */

@media (min-width: 993px) {
  :root {
    /* Figma: all text fills on light backgrounds are #514237 */
    --text-primary-dark: #514237;
    --text-secondary-dark: #514237;

    /* Figma: page background #F8F4E7; footer and pattern band #514237 */
    --bg-cream: #f8f4e7;
    --bg-dark-brown: #514237;

    /* Figma: caps labels and body are Zalando Sans Expanded / Zalando Sans */
    --font-display-caps: 'Zalando Sans Expanded', 'Inter', sans-serif;
    --font-body: 'Zalando Sans', 'Plus Jakarta Sans', sans-serif;

    /* Figma: hero photo under a flat black overlay at 60% opacity */
    --bg-hero-overlay: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
  }

  /* HEADER - Figma nav row (1440 canvas): links and button centred at y52,
     logo frame 166x120 at y16, divider at y104 with a 248px gap for the logo */
  .header-nav {
    height: 105px;
    padding: 0 2rem;
  }

  .header-nav::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
      #ffffff calc(50% - 124px),
      transparent calc(50% - 124px),
      transparent calc(50% + 124px),
      #ffffff calc(50% + 124px));
  }

  .header-nav-container {
    height: 100%;
    padding: 0;
    border-bottom: none;
    align-items: start;
  }

  .header-left-links,
  .header-right-links {
    gap: 3.5rem;
    height: 50px;
    margin-top: 27px;
  }

  .header-logo-wrap {
    padding: 0;
    margin-top: 16px;
  }

  .logo-img {
    height: 120px;
  }

  /* Header nav links - Figma: 14px, 500 weight, 0.08em tracking */
  .nav-link {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
  }

  /* Header button - Figma: 286x50, 16px radius, fill #9F8C80, 14px label */
  .btn-header-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 286px;
    height: 50px;
    padding: 0 1rem;
    border-radius: 16px;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    background-color: #9f8c80;
  }

  .btn-header-preview:hover {
    background-color: #9f8c80;
  }

  /* Scrolled header - not in Figma; shorter bar, divider in border colour */
  .header-nav.scrolled-light {
    height: auto;
    padding: 0.75rem 2rem;
    background: rgba(248, 244, 231, 0.98);
  }

  .header-nav.scrolled-light::after {
    background: linear-gradient(90deg,
      var(--border-light) calc(50% - 124px),
      transparent calc(50% - 124px),
      transparent calc(50% + 124px),
      var(--border-light) calc(50% + 124px));
  }

  .header-nav.scrolled-light .header-nav-container {
    height: auto;
    align-items: center;
  }

  .header-nav.scrolled-light .header-left-links,
  .header-nav.scrolled-light .header-right-links {
    height: auto;
    margin-top: 0;
  }

  .header-nav.scrolled-light .header-logo-wrap {
    margin-top: 0;
  }

  .header-nav.scrolled-light .logo-img {
    height: 72px;
  }

  /* CONCEPT - Figma: eyebrow y1080 (section starts at hero bottom, y960), 56px gaps between
     eyebrow / heading / body, 120px from body to a full-bleed dark rule, 80px from rule to cards */
  .concept-section {
    padding-top: 7.5rem;
  }

  .concept-header-block {
    margin-bottom: 7.5rem;
  }

  .concept-header-block .caps-badge {
    margin-bottom: 3.5rem;
  }

  .concept-header-block .heading-display {
    margin-bottom: 0;
  }

  .concept-description-body {
    margin-top: 3.5rem;
  }

  /* Full-bleed dark rule (Figma: 1px #514237 across 0-1440) */
  .cards-slider-wrapper {
    border-top: none;
    padding-top: 5rem;
  }

  .cards-slider-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 1px;
    transform: translateX(-50%);
    background: #514237;
  }

  /* Cards - Figma: 446px cells, 17px inner padding, 412x252 image, dark-brown dividers */
  .concept-card {
    padding: 0 17px;
    border-color: #514237;
  }

  .concept-card:first-child {
    border-color: #514237;
  }

  .concept-card-img-wrap {
    aspect-ratio: 412 / 252;
    margin-bottom: 2.75rem;
  }

  .concept-card-title {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.12em;
  }

  /* Carousel - Figma: 40px controls, 80px apart, bordered 01|02 counter */
  .carousel-controls {
    gap: 5rem;
  }

  .carousel-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border-color: #9f8c80;
  }

  .carousel-btn-dark {
    background: #9f8c80;
    border-color: #9f8c80;
  }

  .carousel-indicator {
    display: flex;
    align-items: stretch;
    border-left: 1px solid #514237;
    border-right: 1px solid #514237;
    font-size: 0.875rem;
  }

  .carousel-indicator span {
    padding: 0 0.75rem;
    line-height: 28px;
  }

  .carousel-indicator span + span {
    border-left: 1px solid #514237;
  }

  /* 12 RESIDENCES BANNER - Figma: full-bleed 1440x810 photo, no cream wash,
     72px heading at x32, vertically centred, #514237 */
  .hero-building-banner img {
    height: 810px;
    object-fit: cover;
  }

  .hero-building-overlay {
    background: none;
    padding: 0 2rem;
  }

  .hero-building-title {
    color: #514237;
    text-shadow: none;
    font-size: 4.5rem;
    line-height: 1.2;
    letter-spacing: 0;
  }

  /* THE RESIDENCES - Figma: 120px below banner, 56px gaps, 682px text column,
     bold spec line 18px / 600, 288x60 dark button at 56px below the body */
  .residences-section {
    padding-top: 7.5rem;
  }

  .residences-intro {
    max-width: 760px;
  }

  .residences-intro .heading-display {
    margin-bottom: 0;
  }

  .residences-bold-line {
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.55;
    margin: 3.5rem 0 1.5rem;
    color: #514237;
  }

  .residences-intro .concept-description-body {
    max-width: 682px;
    margin: 0 auto;
    margin-top: 1.5rem;
  }

  .residences-intro .btn-pill-solid-dark {
    width: 288px;
    padding: 0 1rem;
    background: #514237;
    border-color: #514237;
  }

  .residences-cta {
    margin-top: 3.5rem;
  }

  /* RESIDENCE GALLERY - Figma: one 1376x831 image at 32px side margins,
     120px below the button, controls 40px below the image, four slides */
  .residences-section {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .residences-section .container-max {
    max-width: none;
  }

  .residences-intro {
    margin-bottom: 0;
  }

  .residence-gallery-frame {
    margin-top: 7.5rem;
  }

  .residence-gallery-grid {
    display: block;
    height: 831px;
  }

  .gallery-controls {
    margin-top: 2.5rem;
  }

  .carousel-indicator {
    color: #9f8c80;
  }

  /* THE PLANNING - Figma: 1376x831 banner at 32px side margins, no overlay,
     centred eyebrow + 72px white heading; detail row 68px below, 564x646 image,
     562px text column starting at x728, features 18px/600 with 61px rows */
  .planning-hero-banner {
    height: 831px;
    min-height: 0;
    margin: 0 2rem;
    width: auto;
  }

  .planning-hero-overlay {
    background: none;
    padding: 2rem;
  }

  .planning-hero-overlay .caps-badge-light {
    color: #ffffff;
    margin-bottom: 3.5rem;
  }

  .planning-hero-overlay .heading-display {
    font-size: 4.5rem;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .planning-detail-section {
    padding: 4.25rem 2rem 117px;
  }

  .planning-detail-section .container-max {
    max-width: none;
  }

  .planning-grid {
    grid-template-columns: 564px 562px;
    gap: 132px;
    justify-content: start;
  }

  .planning-img-wrap {
    aspect-ratio: 564 / 646;
  }

  .planning-features-list {
    margin: 2rem 0 0;
    border-top: none;
    border-color: #514237;
  }

  .planning-feature-item {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 28px;
    padding: 1rem 0;
    border-bottom-color: #514237;
  }

  .planning-text-block .btn-pill-solid-dark {
    width: 288px;
    padding: 0 1rem;
    margin-top: 205px;
    background: #514237;
    border-color: #514237;
  }

  /* THE AMENITIES - Figma: 120px above eyebrow and below the cards, 104px from heading
     to images, cards 383 / 565 / 383 wide with 23px gaps, 463px tall images,
     titles 48px below images, "Artistic Impression" tag bare (no box) in 11px */
  .amenities-section {
    padding: 7.5rem 2rem 110px;
  }

  .amenities-section .container-max {
    max-width: none;
  }

  .amenities-header {
    margin-bottom: 79px;
  }

  .amenities-grid {
    grid-template-columns: 383fr 565fr 383fr;
    gap: 23px;
  }

  .amenities-img-wrap {
    aspect-ratio: 383 / 463;
    margin-bottom: 3rem;
  }

  .amenities-card:nth-child(2) .amenities-img-wrap {
    aspect-ratio: 565 / 463;
  }

  .artistic-tag {
    bottom: 12px;
    right: 12px;
    background: none;
    color: #f8f4e7;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    padding: 0;
    border-radius: 0;
  }

  .amenities-card-title {
    margin-bottom: 9px;
  }

  /* THE LOCATION - Figma: eyebrow 89px below the amenities rule, 22px body gap,
     dark rule 94px below the body, map 912x522 at 32px margins, 400px accordion
     column 64px to the right; accordion rows 56px with dark rules; place rows 42px apart */
  .location-section {
    padding: 89px 2rem 7.5rem;
  }

  .location-section .container-max {
    max-width: none;
  }

  .location-header {
    margin-bottom: 0;
  }

  .location-header .concept-description-body {
    max-width: 680px;
    margin: 22px auto 0;
  }

  .location-grid {
    grid-template-columns: 1fr 400px;
    align-items: start;
    gap: 64px;
    margin-top: 94px;
    padding-top: 21px;
    border-top: 1px solid #514237;
  }

  /* Figma: map 912x735 starting 4px below the column top; the column itself is 522 tall */
  .map-container-wrap {
    position: relative;
    height: 735px;
    margin-top: 4px;
    border: none;
    border-radius: 0;
  }

  #leaflet-map {
    position: absolute;
    inset: 0;
  }

  .location-accordions {
    border-top: none;
  }

  /* Rules come from each row's top edge; the first row sits under the section rule */
  .accordion-item {
    border-top: 1px solid #514237;
    border-bottom: none;
  }

  .accordion-item:first-child {
    border-top: none;
  }

  .accordion-item:last-child {
    border-bottom: 1px solid #514237;
  }

  .accordion-header {
    padding: 1rem 0;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.12em;
  }

  .accordion-item:first-child .accordion-header {
    padding-top: 0;
  }

  .accordion-item.active .accordion-content {
    padding: 24px 0;
  }

  .place-list {
    gap: 18px;
  }

  .place-item {
    gap: 30px;
    font-size: 1rem;
    padding: 0;
    color: #514237;
  }

  .place-item:hover {
    background: none;
  }

  .place-num {
    width: 24px;
    height: 24px;
    background: #514237;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
  }

  /* THE DEVELOPER - Figma: 120px below the rule, photo 680x486 and text column at x844 (132px gap),
     22px from heading to body, 63px to the stats rule; stats are one line of 20px / 28px text
     with 38px either side of each divider */
  .developer-section {
    padding: 7.5rem 2rem 60px;
  }

  .developer-section .container-max {
    max-width: none;
  }

  .developer-grid {
    grid-template-columns: 680fr 564fr;
    gap: 132px;
    align-items: start;
    margin-bottom: 63px;
  }

  .developer-img-wrap {
    aspect-ratio: 680 / 486;
  }

  .developer-info p {
    margin-top: 22px;
  }

  .stats-counter-bar {
    display: flex;
    justify-content: space-between;
    padding: 63px 0 56px;
    border-top: 1px solid #514237;
    border-bottom: 1px solid #514237;
  }

  .stat-item {
    position: relative;
    width: 286px;
    padding: 0;
    border-right: none;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: 0;
  }

  .stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    right: -38px;
    width: 1px;
    height: 56px;
    background: #514237;
  }

  .stat-num {
    display: inline;
    font-size: inherit;
    font-weight: 500;
    margin-bottom: 0;
  }

  /* FOOTER - Figma: dark band from y9941; pattern 35px below its top; form and address
     columns 448px wide at x148 and x919; title 56px above the first field; fields 56px tall
     with 24px between them; submit 111x50 at 48px below the checkbox; contacts underlined */
  .motif-pattern-strip {
    padding-top: 35px;
  }

  .footer-contact-section {
    padding: 70px 0 87px;
  }

  .footer-contact-section .container-max {
    max-width: none;
    padding-left: 148px;
    padding-right: 73px;
  }

  .footer-grid {
    grid-template-columns: 448px 448px;
    column-gap: 323px;
    row-gap: 0;
    justify-content: start;
  }

  /* Pattern spans the page with a small margin on each side */
  .motif-svg {
    width: calc(100% - 4rem);
    max-width: none;
    margin: 0 auto;
  }

  .contact-form-block h3 {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    margin-bottom: 56px;
  }

  .form-group {
    margin-bottom: 24px;
  }

  .form-input,
  .country-select {
    font-size: 1rem;
    padding: 17px 0;
    color: #ffffff;
    border-bottom: 1px solid #9f8c80;
  }

  .form-input::placeholder {
    color: #ffffff;
  }

  .phone-input-row {
    gap: 0;
    border-bottom: 1px solid #9f8c80;
  }

  .phone-input-row .country-select,
  .phone-input-row .form-input {
    border-bottom: none;
  }

  .phone-input-row .form-input {
    padding-left: 12px;
    border-left: 1px solid #ffffff;
    margin-left: 12px;
  }

  .country-select {
    padding-right: 0;
  }

  .form-checkbox-row {
    margin: 48px 0;
  }

  .form-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    margin-top: 0;
    border: 1px solid #9f8c80;
    background: transparent;
    accent-color: auto;
    cursor: pointer;
  }

  .form-checkbox-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #ffffff;
  }

  .form-submit {
    width: 111px;
    height: 50px;
    padding: 0 1rem;
    border-radius: 16px;
    background: #9f8c80;
    border-color: #9f8c80;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
  }

  .address-text {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 1.4;
    color: #ffffff;
  }

  .footer-info-block {
    justify-content: flex-start;
  }

  .contact-details {
    margin-top: 138px;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.12em;
  }

  .contact-link {
    margin-bottom: 30px;
    text-decoration: underline;
    text-underline-offset: 6px;
    border-bottom: none;
  }

  /* HERO - Figma: 1440x960 frame, heading box 914px wide and centred vertically,
     subtitle 14px / 600 Zalando Sans Expanded, 0.12em tracking, ~57px above the bottom edge */
  .hero-section {
    min-height: 960px;
    padding-bottom: 2.5rem;
  }

  .hero-content {
    max-width: 914px;
  }

  .hero-subtitle-bottom {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
  }

  /* Headings - Figma: hero 64px / 76.8 lh, section titles 72px / 86.4 lh, no tracking */
  .heading-display-hero {
    font-size: 4rem;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .heading-display,
  .hero-building-title {
    font-size: 4.5rem;
    line-height: 1.2;
    letter-spacing: 0;
  }

  /* Buttons - Figma primary button: 288x60, 16px radius, 14px label, 0.08em tracking */
  .btn-pill {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    min-height: 60px;
    padding: 0 2.5rem;
    border-radius: 16px;
  }

  /* Eyebrow / section labels - Figma: 14px, 0.12em tracking */
  .accordion-header {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
  }

  /* Body copy - Figma: 18px / 28px */
  .concept-description-body,
  .developer-info p,
  .amenities-card-desc,
  .concept-card-desc,
  .planning-detail-section p {
    font-size: 1.125rem;
    line-height: 1.55;
  }

  /* Card titles - Figma: 16px, 500 weight, 0.12em tracking */
  .concept-card-title,
  .amenities-card-title {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.12em;
  }

  /* Stats labels - Figma: 20px / 28px, 500 weight */
  .stat-item {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
  }

  /* Footer - Figma: address and contact lines 16px / 22.4px, 0.12em tracking */
  .address-text,
  .contact-details {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 1.4;
  }

  /* Form - Figma: checkbox label Montserrat 13px / 18.2px, submit 14px */
  .form-checkbox-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .form-input,
  .country-select {
    font-size: 1rem;
  }
}

/* =============================================================
   PHONE (Figma mobile frame, 390px wide)
   ============================================================= */

@media (max-width: 480px) {
  /* Header - Figma: 71px bar, hamburger at x24, wordmark centred, white rule at y71 */
  .header-nav {
    padding: 0;
    height: 71px;
  }

  .header-nav::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: #ffffff;
  }

  .header-nav.scrolled-light::after {
    background: var(--border-light);
  }

  .header-nav-container {
    height: 100%;
    padding: 0;
    border-bottom: none;
    align-items: center;
  }

  /* Figma MenuAlt2 icon: equal 5px pitch (y31 / y36 / y41). 2px lines render evenly at any pixel density */
  .mobile-menu-toggle {
    position: absolute;
    left: 27px;
    top: 31px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 0;
  }

  .hamburger-line {
    display: block;
    width: 14px;
    height: 2px;
    margin: 0;
  }

  .hamburger-line:nth-child(3) {
    width: 11px;
  }

  .header-logo-wrap {
    margin: 0 auto;
    padding: 0;
  }

  .logo-img {
    display: none;
  }

  .logo-wordmark {
    display: block;
    width: 170px;
    height: 13px;
  }

  /* Hero - Figma: 752px tall, heading 48px / 57.6 at y296, subtitle 12px with 0.15em tracking,
     51px from the subtitle to the bottom edge */
  .hero-section {
    min-height: 752px;
    padding: 0 24px 35px;
  }

  .heading-display-hero {
    font-size: 3rem;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .hero-subtitle-bottom {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    line-height: 1.7;
    padding: 0;
    margin-bottom: 16px;
  }
}

/* CONCEPT (phone) - Figma: 120px below the hero, 40px eyebrow-to-heading, 40px / 48 heading,
   29px to a 16px / 24 body, 120px to the carousel, one card per slide with a 308px image,
   40px image-to-title, 72px to the controls; six slides */
@media (max-width: 480px) {
  .concept-section {
    padding: 120px 0 96px;
  }

  .concept-header-block {
    margin-bottom: 0;
    padding: 0 24px;
  }

  .concept-header-block .caps-badge {
    margin-bottom: 40px;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
  }

  .concept-header-block .heading-display {
    font-size: 2.5rem;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .concept-description-body {
    margin-top: 29px;
    font-size: 1rem;
    line-height: 1.5;
  }

  .cards-slider-wrapper {
    border-top: none;
    padding-top: 120px;
  }

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

  /* Thin frame around each card; !important overrides the inline first-card border */
  .concept-card,
  .concept-card:first-child,
  .concept-card:last-child {
    padding: 16px;
    border-top: 1px solid #9f8c80 !important;
    border-right: 1px solid #9f8c80 !important;
    border-bottom: 1px solid #9f8c80 !important;
    border-left: 1px solid #9f8c80 !important;
  }

  .concept-card-img-wrap {
    aspect-ratio: 308 / 252;
    margin-bottom: 40px;
  }

  .concept-card-title {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    margin-bottom: 9px;
  }

  .concept-card-desc {
    font-size: 1rem;
    line-height: 1.5;
  }

  .carousel-controls {
    gap: 24px;
    margin-top: 72px;
  }

  .carousel-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border-color: #9f8c80;
  }

  .carousel-btn-dark {
    background: #9f8c80;
    border-color: #9f8c80;
  }

  .carousel-indicator {
    display: flex;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: #9f8c80;
  }

  .carousel-indicator span {
    padding: 0 6px;
    line-height: 16px;
  }

  .carousel-indicator span.active {
    color: #514237;
  }
}

/* Concept cards: reserve the height of the longest title (2 lines) and description (3 lines)
   so the carousel does not change height between slides */
@media (min-width: 993px) {
  .concept-card-title {
    min-height: 44.8px;
  }

  .concept-card-desc {
    min-height: 84px;
  }
}

@media (max-width: 480px) {
  .concept-card-title {
    min-height: 44.8px;
  }

  .concept-card-desc {
    min-height: 96px;
  }
}

/* Carousel images: fixed heights so a new photo never changes the component height */
@media (min-width: 993px) {
  .concept-card-img-wrap {
    aspect-ratio: auto;
    height: 252px;
  }
}

@media (max-width: 480px) {
  .concept-card-img-wrap {
    aspect-ratio: auto;
    height: 252px;
  }

  .residence-gallery-img {
    aspect-ratio: auto;
    height: 342px;
  }
}

/* 12 RESIDENCES BANNER (phone) - Figma: full-bleed 752px photo, heading 40px / 48 left-aligned
   at x24 and 48px from the top, 120px below the concept carousel */
@media (max-width: 480px) {
  .concept-section {
    padding-bottom: 120px;
  }

  .hero-building-banner {
    display: block;
    position: relative;
    height: 752px;
    overflow: hidden;
  }

  /* Photo framed as in Figma: image is 518.7vw wide (390px frame), bottom-aligned, left offset -266.9vw */
  .hero-building-banner img {
    display: none;
  }

  .hero-building-banner {
    background-image: url('assets/residences_banner_phone.jpg');
    background-repeat: no-repeat;
    background-size: 518.7vw auto;
    background-position: -266.9vw 100%;
  }

  .hero-building-overlay {
    position: absolute;
    inset: 0;
    background: none;
    padding: 48px 24px 0;
    align-items: flex-start;
  }

  .hero-building-title {
    font-size: 2.5rem;
    line-height: 1.2;
    letter-spacing: 0;
    color: #514237;
    text-shadow: none;
  }
}

/* THE RESIDENCES (phone) - Figma: 120px below the banner, 40px eyebrow-to-heading, 40px / 48
   heading (3 lines), 29px to a 16px / 600 spec line, 24px to the body, 48px to a 262px button,
   80px to a square 342px gallery image */
@media (max-width: 480px) {
  .residences-section {
    padding: 120px 24px 120px;
  }

  .residences-section .container-max {
    max-width: none;
  }

  .residences-intro {
    margin-bottom: 0;
  }

  .residences-intro .caps-badge {
    margin-bottom: 40px;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
  }

  .residences-intro .heading-display {
    font-size: 2.5rem;
    line-height: 1.2;
    letter-spacing: 0;
    padding: 0 12px;
  }

  .residences-bold-line {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
    margin: 29px 0 0;
  }

  .residences-intro .concept-description-body {
    margin-top: 24px;
    font-size: 1rem;
    line-height: 1.5;
  }

  .residences-cta {
    margin-top: 48px;
  }

  .residences-intro .btn-pill-solid-dark {
    width: 262px;
    height: 59px;
    padding: 0 1rem;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    border-radius: 16px;
    background: #514237;
    border-color: #514237;
  }

  .residence-gallery-frame {
    margin-top: 80px;
  }

  .gallery-controls {
    margin-top: 40px;
  }
}

/* THE PLANNING (phone) - Figma: full-bleed 390px square photo, title below it on cream
   (54px gap, 40px eyebrow-to-heading, 40px / 48), 80px to a 342px detail image, 53px to 16px text,
   48px to four 18px / 600 features (61px rows), 54px to a 262px button */
@media (max-width: 480px) {
  .planning-hero-banner {
    height: auto;
    margin: 0;
  }

  .planning-hero-banner img {
    height: 390px;
  }

  .planning-hero-overlay {
    position: static;
    background: none;
    padding: 54px 24px 0;
    justify-content: flex-start;
  }

  .planning-hero-overlay .caps-badge-light {
    color: #514237;
    margin-bottom: 40px;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
  }

  .planning-hero-overlay .heading-display {
    color: #514237 !important;
    font-size: 2.5rem;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .planning-detail-section {
    padding: 61px 24px 120px;
  }

  .planning-grid {
    grid-template-columns: 1fr;
    gap: 0;
    justify-content: stretch;
  }

  .planning-img-wrap {
    aspect-ratio: 342 / 392;
  }

  .planning-text-block .concept-description-body {
    margin-top: 53px !important;
    font-size: 1rem;
    line-height: 1.5;
  }

  .planning-features-list {
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
    border-top: none;
  }

  .planning-feature-item {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 0;
    padding: 16px 0;
    border-bottom: 1px solid #514237;
  }

  .planning-feature-item:first-child {
    padding-top: 0;
  }

  .planning-feature-mobile-only {
    display: block;
  }

  .planning-text-block .btn-pill-solid-dark {
    margin-top: 54px;
    width: 262px;
    height: 59px;
    border-radius: 16px;
  }
}

/* THE AMENITIES (phone) - Figma: 120px below the planning button, 40px eyebrow-to-heading,
   40px / 48 heading, 61px to three stacked 342px square images, 40px image-to-title,
   5px title-to-description, 54px between cards */
@media (max-width: 480px) {
  .amenities-section {
    padding: 120px 24px 120px;
  }

  .amenities-section .container-max {
    max-width: none;
  }

  .amenities-header {
    margin-bottom: 61px;
  }

  .amenities-header .caps-badge {
    margin-bottom: 40px;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
  }

  .amenities-header .heading-display {
    font-size: 2.5rem;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .amenities-grid {
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .amenities-img-wrap,
  .amenities-card:nth-child(2) .amenities-img-wrap {
    aspect-ratio: 1 / 1;
    margin-bottom: 40px;
  }

  .amenities-card-title {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    margin-bottom: 5px;
  }

  .amenities-card-desc {
    font-size: 1rem;
    line-height: 1.5;
  }

  .artistic-tag {
    bottom: 12px;
    right: 12px;
    background: none;
    color: #f8f4e7;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    padding: 0;
    border-radius: 0;
  }
}

/* THE LOCATION (phone) - Figma: 120px below the rule, 40px eyebrow-to-heading, 40px / 48 heading
   (4 lines), 29px to a 16px / 24 body (6 lines), 144px to a 342x328 map, 65px to the accordion,
   accordion rows 52px with 1px rules, place rows 30px with 12px gaps and a 24px number-to-name gap */
@media (max-width: 480px) {
  .location-section {
    padding: 120px 24px 120px;
  }

  .location-section .container-max {
    max-width: none;
  }

  .location-header .caps-badge {
    margin-bottom: 40px;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
  }

  .location-header .heading-display {
    font-size: 2.5rem;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .location-header .concept-description-body {
    margin-top: 29px;
    max-width: none;
    font-size: 1rem;
    line-height: 1.5;
  }

  .location-grid {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 144px;
    padding-top: 0;
    border-top: none;
  }

  .map-container-wrap {
    position: relative;
    height: 328px;
    margin: 0 0 65px;
    border: none;
    border-radius: 0;
  }

  #leaflet-map {
    position: absolute;
    inset: 0;
  }

  .location-accordions {
    border-top: none;
  }

  .accordion-item {
    border-top: 1px solid #514237;
    border-bottom: none;
  }

  .accordion-item:first-child {
    border-top: none;
  }

  .accordion-item:last-child {
    border-bottom: 1px solid #514237;
  }

  .accordion-header {
    padding: 16px 0 15px;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 20px;
  }

  .accordion-item:first-child .accordion-header {
    padding-top: 0;
  }

  .accordion-item.active .accordion-content {
    padding: 24px 0;
  }

  .place-list {
    gap: 12px;
  }

  .place-item {
    gap: 24px;
    font-size: 1rem;
    line-height: 24px;
    padding: 0;
    color: #514237;
  }

  .place-num {
    width: 30px;
    height: 30px;
    background: #514237;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    flex-shrink: 0;
  }
}

/* THE DEVELOPER (phone) - Figma: 120px below the location rule, full-bleed 390x554 photo,
   64px to a centred eyebrow, 40px to a 40px / 48 heading (2 lines), 29px to a 16px / 24 body
   (6 lines), 80px to the stats: 63px inside the top rule, four stacked 20px / 28 stats with
   24px-gap 50px dividers and 37px between items, 49px to the bottom rule */
@media (max-width: 480px) {
  .developer-section {
    padding: 120px 0 60px;
  }

  .developer-section .container-max {
    max-width: none;
  }

  .developer-grid {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 80px;
  }

  .developer-img-wrap {
    aspect-ratio: auto;
    height: 554px;
  }

  .developer-info {
    padding: 64px 24px 0;
    text-align: center;
  }

  .developer-info .caps-badge {
    margin-bottom: 40px;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
  }

  .developer-info .heading-display {
    font-size: 2.5rem;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .developer-info p {
    margin-top: 29px;
    font-size: 1rem;
    line-height: 1.5;
  }

  .stats-counter-bar {
    display: block;
    padding: 63px 24px 49px;
    border-top: 1px solid #514237;
    border-bottom: 1px solid #514237;
  }

  .stat-item {
    position: relative;
    width: 286px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    border-right: none;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: 0;
    text-align: center;
  }

  .stat-item + .stat-item {
    margin-top: 37px;
  }

  .stat-item:not(:last-child)::after {
    content: '';
    display: block;
    position: static;
    width: 50px;
    height: 1px;
    margin: 24px auto 0;
    background: #514237;
  }

  .stat-num {
    display: inline;
    font-size: inherit;
    font-weight: 500;
    margin-bottom: 0;
  }
}

/* FOOTER (phone) - Figma: dark band 120px below the stats, pattern 35px inside the band top,
   title 70px below the pattern, 48px to fields (56px tall, 24px apart), 85px to the checkbox
   (13px label, 16px gap), 48px to a 105x51 submit, 80px to the address (14px, 28px to contacts) */
@media (max-width: 480px) {
  .developer-section {
    padding-bottom: 120px;
  }

  .motif-pattern-strip {
    padding-top: 35px;
  }

  .footer-contact-section {
    padding: 70px 24px 67px;
  }

  .footer-contact-section .container-max {
    max-width: none;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 80px;
  }

  .contact-form-block h3 {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    margin-bottom: 48px;
  }

  .form-group {
    margin-bottom: 24px;
  }

  .form-input,
  .country-select {
    font-size: 1rem;
    line-height: 24px;
    padding: 16px 0;
    color: #ffffff;
    border-bottom: 1px solid #9f8c80;
  }

  .form-input::placeholder {
    color: #ffffff;
  }

  .phone-input-row {
    gap: 0;
    border-bottom: 1px solid #9f8c80;
  }

  .phone-input-row .country-select,
  .phone-input-row .form-input {
    border-bottom: none;
  }

  .phone-input-row .form-input {
    padding-left: 12px;
    border-left: 1px solid #ffffff;
    margin-left: 12px;
  }

  .form-checkbox-row {
    gap: 16px;
    margin: 85px 0 48px;
  }

  .form-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    margin-top: 0;
    border: 1px solid #9f8c80;
    background: transparent;
    cursor: pointer;
  }

  .form-checkbox-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #ffffff;
  }

  .form-submit {
    width: 105px;
    height: 51px;
    padding: 0 1rem;
    border-radius: 16px;
    background: #9f8c80;
    border-color: #9f8c80;
    color: #f8f4e7;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
  }

  .footer-info-block {
    justify-content: flex-start;
  }

  .address-text {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 1.4;
    color: #ffffff;
  }

  .contact-details {
    margin-top: 28px;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
  }

  .contact-link {
    margin-bottom: 28px;
    text-decoration: underline;
    text-underline-offset: 6px;
    border-bottom: none;
  }
}

/* Phone footer pattern: the mobile Figma export replaces the desktop one */
@media (max-width: 480px) {
  .motif-svg {
    display: none;
  }

  .motif-svg-phone {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* Phone form row and checkbox: keep the country code and mobile field on one line,
   and stop the checkbox from shrinking so it stays square */
@media (max-width: 480px) {
  .phone-input-row {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }

  .phone-input-row .country-select {
    flex-shrink: 0;
    width: auto;
    padding-right: 16px;
  }

  .phone-input-row .form-input {
    flex: 1;
    min-width: 0;
    margin-left: 12px;
  }

  .form-checkbox-row .form-checkbox {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    aspect-ratio: 1 / 1;
  }
}

/* Phone wordmark turns dark once the header is scrolled (matches the desktop logo) */
@media (max-width: 480px) {
  .header-nav.scrolled-light .logo-wordmark {
    filter: brightness(0) saturate(100%);
  }
}

/* RESPONSIVE FALLBACKS (desktop 993px and up) - the fixed 1440px layouts stay exactly as they are.
   Below their needed widths the columns become fluid so nothing runs off the page. */
@media (min-width: 993px) {
  .stat-item {
    width: clamp(180px, 20.8vw, 286px);
  }
}

@media (min-width: 993px) and (max-width: 1439px) {
  .planning-grid {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }

  .footer-contact-section .container-max {
    padding-left: 64px;
    padding-right: 32px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
  }
}