/* ==========================================================================
   CostaLands - High-End Luxury Master Stylesheet
   Desktop: Faithful to C L web.pdf
   Mobile: Perfectly Centered, Impeccable & Aesthetic
   ========================================================================== */

:root {
  --color-green-dark: #2a422a;
  --color-green-accent: #5f895f;
  --color-green-light: #f2f2f2;
  
  --color-blue-dark: #162336;
  --color-blue-accent: #244d7f;
  --color-blue-light: #244d7f;
  
  --color-sand-light: #f8f3d6;
  --color-sand-bg: #f2f2f2;
  --color-sand-card: #f8f3d6;
  
  --color-orange-accent: #5f895f;
  
  --color-dark: #121513;
  --color-text-white: #F3F3F3;
  --color-text-dark: #2a422a;
  --color-text-body: #2C3530;
  --color-text-muted: #7A877E;
  
  --font-main: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-headings: 'Swell', sans-serif;
  --font-accent: 'The Randi', cursive;
  --header-height: 76px;
  
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 9999px;
  
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  font-family: var(--font-main);
  background-color: #FFFFFF;
  color: var(--color-text-body);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  width: 100%;
}

body {
  width: 100%;
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.55;
  background-color: #FFFFFF;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.container {
  width: 100%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1.25rem, 4vw, 4.5rem);
  padding-right: clamp(1.25rem, 4vw, 4.5rem);
}

/* Typography Helpers */
.font-thin { font-weight: 200; }
.font-light { font-weight: 300; }
.font-regular { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  z-index: 1000;
  display: flex;
  align-items: center;
  transition: background-color var(--transition-smooth), backdrop-filter var(--transition-smooth), border-color var(--transition-smooth);
}

.site-header.on-dark {
  background: rgba(18, 21, 19, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #FFFFFF;
}

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  color: var(--color-green-dark);
}

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

.header-logo-wrap img {
  height: 32px;
  width: auto;
  object-fit: contain;
}

.site-header.on-dark .logo-dark-mode { display: block; }
.site-header.on-dark .logo-light-mode { display: none; }
.site-header.scrolled .logo-dark-mode { display: none; }
.site-header.scrolled .logo-light-mode { display: block; }

.header-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 2.25rem);
}

.nav-item {
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
}

.nav-item:hover {
  opacity: 0.75;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  color: inherit;
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 0.35rem;
  display: none;
  flex-direction: column;
  gap: 0.2rem;
  z-index: 1002;
}

.lang-dropdown.show { display: flex; }

.lang-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-green-dark);
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  width: 100%;
  text-align: left;
}

.lang-option:hover {
  background: var(--color-green-light);
}

/* Buttons */
.btn-book-now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.6rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: var(--radius-pill);
  background: var(--color-green-dark);
  color: #FFFFFF;
  border: 1px solid var(--color-green-dark);
  transition: all var(--transition-fast);
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}

.btn-book-now:hover {
  background: var(--color-green-accent);
  border-color: var(--color-green-accent);
  transform: translateY(-1px);
}

.btn-book-now.light {
  background: var(--color-sand-light);
  color: var(--color-green-dark);
  border-color: var(--color-sand-light);
}

.btn-book-now.light:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
}

/* Hero Section */
.hero-wrapper {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: calc(var(--header-height) + 3rem);
  padding-bottom: 3.5rem;
  color: #FFFFFF;
  overflow: hidden;
  width: 100%;
}

.hero-bg-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.hero-bg-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hero-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(18, 21, 19, 0.4) 0%,
    rgba(18, 21, 19, 0.15) 30%,
    rgba(18, 21, 19, 0.65) 75%,
    rgba(18, 21, 19, 0.9) 100%
  );
  z-index: 2;
}

.hero-content-top {
  position: relative;
  z-index: 3;
  text-align: center;
}

.hero-philosophy-statement {
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  font-weight: 300;
  line-height: 1.45;
  color: #F3F3F3;
  max-width: 860px;
  margin: 0 auto;
}

.hero-content-bottom {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}

.hero-title-group h2 {
  font-size: clamp(0.9375rem, 1.4vw, 1.1875rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.5rem;
  color: rgba(255, 255, 255, 0.9);
}

.hero-title-group h1 {
  font-size: clamp(3.5rem, 7.5vw, 6.5rem);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 0.95;
  color: #FFFFFF;
}

.hero-booking-strip {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.75rem 0.5rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  color: var(--color-green-dark);
  box-shadow: 0 12px 36px rgba(0,0,0,0.25);
}

.booking-field {
  display: flex;
  flex-direction: column;
}

.booking-field label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.booking-field select,
.booking-field input {
  border: none;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-green-dark);
  outline: none;
  cursor: pointer;
}

/* ==========================================================================
   Split Colors Section: Green (Hermosa Hills) & Blue (Dos Vistas)
   ========================================================================== */
.split-estates-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.estate-split-column {
  padding: clamp(3.5rem, 6vw, 6rem) clamp(1.5rem, 4vw, 4.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}

.estate-split-column.green-theme {
  background-color: var(--color-green-dark);
  color: #F3F3F3;
}

.estate-split-column.blue-theme {
  background-color: var(--color-blue-dark);
  color: #F3F3F3;
}

.estate-header-block {
  margin-bottom: 1.5rem;
}

.estate-rental-label {
  font-size: 0.9375rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  text-transform: lowercase;
  margin-bottom: 0.2rem;
}

.estate-main-title {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.015em;
  line-height: 1.05;
}

.estate-body-copy {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.125rem;
}

/* Villa Selector Chips */
.villa-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.villa-chip-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: #FFFFFF;
}

.villa-chip-btn span:first-child {
  font-size: 0.6875rem;
  font-weight: 300;
  line-height: 1;
}

.villa-chip-btn span:last-child {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
}

.villa-chip-btn.active,
.villa-chip-btn:hover {
  background: var(--color-sand-light);
  color: var(--color-green-dark);
  border-color: var(--color-sand-light);
}

.villa-chip-btn.active span,
.villa-chip-btn:hover span {
  color: var(--color-green-dark);
}

/* 2x2 Photo Cards Grid */
.split-gallery-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.75rem;
}

.split-photo-card {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  cursor: pointer;
}

.split-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-smooth);
}

.split-photo-card:hover img {
  transform: scale(1.05);
}

.split-photo-card-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%);
  color: #FFFFFF;
  font-size: 0.9375rem;
  font-weight: 600;
}

.estate-quote-line {
  font-size: clamp(1.5rem, 2.2vw, 2.125rem);
  font-weight: 200;
  line-height: 1.2;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.estate-quote-line.green-accent {
  color: var(--color-green-accent);
}

.estate-quote-line.blue-accent {
  color: var(--color-blue-light);
}

/* ==========================================================================
   Middle Statement ("Everything flows here." from PDF)
   ========================================================================== */
.middle-statement-block {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6rem 0;
  color: #FFFFFF;
  background-color: var(--color-blue-dark);
  overflow: hidden;
  width: 100%;
}

.middle-statement-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.middle-statement-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.middle-statement-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(22, 35, 54,0.85) 0%, rgba(22, 35, 54,0.3) 50%, rgba(22, 35, 54,0.9) 100%);
  z-index: 2;
}

.middle-statement-content {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.middle-giant-text {
  font-size: clamp(3.5rem, 9.5vw, 9rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.015em;
  text-shadow: 0 4px 30px rgba(0,0,0,0.5);
  color: #FFFFFF;
}

.middle-side-card {
  background: rgba(42, 66, 42, 0.9);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  max-width: 440px;
}

.middle-side-card h3 {
  font-size: 1.625rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.middle-side-card p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   Land Connections Section (Deep Ocean Blue with Full Wave Band)
   ========================================================================== */
.land-connections-block {
  padding: 6.5rem 0;
  background-color: var(--color-blue-dark);
  color: #FFFFFF;
  position: relative;
  width: 100%;
}

.land-grid-layout {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.land-inquiry-box {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}

.land-inquiry-box h3 {
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--color-sand-light);
  margin-bottom: 1.25rem;
}

.land-inquiry-box p {
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.65;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.9);
}

.land-main-col h2 {
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: 0.015em;
  margin-bottom: 1.5rem;
  color: var(--color-blue-light);
}

.land-slogans-stack {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 2.5rem;
}

.land-slogan-line {
  font-size: clamp(1.75rem, 3.5vw, 3.75rem);
  font-weight: 200;
  color: #F3F3F3;
  line-height: 1.05;
}

.land-editorial-body {
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.85);
}

/* Full-span Repeating Waves */
.wave-extended-blue {
  width: 100%;
  height: 30px;
  background-image: url('../images/waves_blue_tile.png');
  background-repeat: repeat-x;
  background-position: left center;
  background-size: auto 30px;
  margin: 1.5rem 0 2.25rem 0;
  opacity: 0.95;
}

.wave-extended-green {
  width: 100%;
  height: 32px;
  background-image: url('../images/waves_green_tile.png');
  background-repeat: repeat-x;
  background-position: left center;
  background-size: auto 32px;
  margin-top: 1.25rem;
  margin-bottom: 2.5rem;
  opacity: 0.95;
}

/* ==========================================================================
   Local Amenities Section (Light Sand with Full Wave Graphic & 12 Logos)
   ========================================================================== */
.amenities-section {
  padding: 6.5rem 0;
  background-color: var(--color-sand-bg);
  color: var(--color-green-dark);
  width: 100%;
}

.amenities-header {
  margin-bottom: 3.5rem;
}

.amenities-title {
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 0.95;
  color: var(--color-green-dark);
}

.amenities-split-layout {
  display: grid;
  grid-template-columns: 1fr 1.65fr;
  gap: clamp(2rem, 5vw, 5rem);
}

.distances-bullet-list {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.distance-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-weight: 700;
  color: var(--color-green-dark);
}

.distance-row::before {
  content: '•';
  color: var(--color-green-accent);
  font-size: 1.5rem;
}

/* 3-Column Amenities Grid with Unclipped Vector Logos */
.amenities-3col-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.25rem 2rem;
}

.amenity-card-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.amenity-icon-box {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.amenity-icon-box img {
  max-height: 52px;
  width: auto;
  object-fit: contain;
}

.amenity-card-item h4 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-green-dark);
  line-height: 1.25;
}

.amenity-card-item p {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Estate Management Dedicated Section (From Master Content DOCX)
   ========================================================================== */
.estate-mgmt-section {
  padding: 6.5rem 0;
  background-color: #FFFFFF;
  color: var(--color-text-body);
  border-top: 1px solid rgba(0,0,0,0.06);
  width: 100%;
}

.mgmt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 3.5rem;
}

.mgmt-card-box {
  background: var(--color-sand-bg);
  border: 1px solid var(--color-sand-card);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.mgmt-card-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}

.mgmt-card-num {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-green-accent);
  margin-bottom: 0.75rem;
}

.mgmt-card-box h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-green-dark);
  margin-bottom: 0.75rem;
}

.mgmt-card-box p {
  font-size: 0.9375rem;
  color: var(--color-text-body);
  line-height: 1.6;
}

/* ==========================================================================
   Regenerative Care & FAQ Accordion (From Master Content DOCX)
   ========================================================================== */
.regen-faq-section {
  padding: 6.5rem 0;
  background-color: var(--color-sand-bg);
  color: var(--color-green-dark);
  width: 100%;
}

.regen-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(2rem, 5vw, 5rem);
}

.faq-accordion-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

.faq-accordion-item {
  background: #FFFFFF;
  border-radius: var(--radius-md);
  border: 1px solid rgba(42, 66, 42, 0.1);
  overflow: hidden;
}

.faq-accordion-btn {
  width: 100%;
  padding: 1.25rem 1.5rem;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-green-dark);
  border: none;
  background: none;
  cursor: pointer;
}

.faq-accordion-btn svg {
  width: 18px;
  height: 18px;
  transition: transform var(--transition-fast);
}

.faq-accordion-item.open .faq-accordion-btn svg {
  transform: rotate(180deg);
}

.faq-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-smooth), padding var(--transition-smooth);
}

.faq-accordion-item.open .faq-accordion-body {
  max-height: 400px;
  padding: 0 1.5rem 1.5rem 1.5rem;
}

.faq-accordion-body p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-body);
}

/* ==========================================================================
   Reservations & Contact (Deep Forest Green with Waves)
   ========================================================================== */
.reservations-contact-section {
  padding: 6.5rem 0;
  background-color: var(--color-green-dark);
  color: #FFFFFF;
  width: 100%;
}

.res-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
}

.res-col h2, .contact-col h2 {
  font-size: clamp(2.5rem, 4.5vw, 4.25rem);
  font-weight: 700;
  color: var(--color-green-accent);
  line-height: 1;
  margin-bottom: 2rem;
}

.res-policy-body {
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.75;
  margin-bottom: 2.25rem;
}

.contact-fields-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-field-underline {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.contact-field-underline label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #FFFFFF;
}

.contact-field-underline input,
.contact-field-underline select,
.contact-field-underline textarea {
  width: 100%;
  border: none;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  padding: 0.6rem 0;
  font-size: 1rem;
  font-family: inherit;
  color: #FFFFFF;
  outline: none;
  transition: border-color var(--transition-fast);
}

.contact-field-underline select option {
  background: var(--color-green-dark);
  color: #FFFFFF;
}

.contact-field-underline input:focus,
.contact-field-underline select:focus,
.contact-field-underline textarea:focus {
  border-bottom-color: var(--color-green-accent);
}

/* Mobile Toggle */
.mobile-toggle-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 1001;
}

.mobile-toggle-btn span {
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: all var(--transition-fast);
}

/* ==========================================================================
   Responsive Breakpoints
   Desktop (> 1024px) remains pristine.
   Tablet & Mobile: Refined, perfectly centered & balanced.
   ========================================================================== */

@media (max-width: 1024px) {
  .header-nav { display: none; }
  .mobile-toggle-btn { display: flex; }
  
  .split-estates-wrapper { grid-template-columns: 1fr; }
  .land-grid-layout { grid-template-columns: 1fr; }
  .amenities-split-layout { grid-template-columns: 1fr; }
  .res-contact-grid { grid-template-columns: 1fr; }
  .regen-faq-grid { grid-template-columns: 1fr; }
  
  .amenities-3col-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-booking-strip { flex-wrap: wrap; border-radius: var(--radius-lg); }
}

@media (max-width: 768px) {
  /* Containers */
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* Hero */
  .hero-wrapper {
    min-height: 85vh;
    padding-top: calc(var(--header-height) + 1.5rem);
    padding-bottom: 2.5rem;
    text-align: center;
  }
  .hero-content-top {
    text-align: center;
  }
  .hero-philosophy-statement {
    font-size: 1rem;
    line-height: 1.5;
  }
  .hero-content-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    gap: 1.5rem;
  }
  .hero-title-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }
  .hero-title-group h1 {
    font-size: clamp(3rem, 11vw, 4.25rem);
  }
  .hero-title-group .btn-book-now {
    margin: 1.25rem auto 0 auto;
    display: inline-flex;
  }
  .hero-booking-strip {
    display: none;
  }
  .header-actions .btn-book-now {
    display: none;
  }

  /* Stays Split Columns */
  .estate-split-column {
    padding: 3.5rem 1.5rem;
    text-align: center;
  }
  .estate-header-block {
    text-align: center;
  }
  .estate-main-title {
    font-size: 2.25rem;
  }
  .estate-body-copy {
    text-align: center;
  }
  .villa-chips-row {
    justify-content: center;
  }
  .split-photo-card {
    border-radius: var(--radius-md);
  }
  .split-photo-card-caption {
    text-align: center;
  }
  .estate-quote-line {
    text-align: center;
    font-size: 1.375rem;
  }

  /* Middle Statement */
  .middle-statement-block {
    min-height: auto;
    padding: 4.5rem 0;
  }
  .middle-statement-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2.5rem;
  }
  .middle-side-card {
    max-width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .middle-side-card .btn-book-now {
    margin: 0 auto;
    display: inline-flex;
  }
  .middle-giant-text {
    text-align: center;
    font-size: clamp(3rem, 13vw, 4.5rem);
  }

  /* Land Connections */
  .land-connections-block {
    padding: 4.5rem 0;
    text-align: center;
  }
  .land-grid-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .land-inquiry-box {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .land-inquiry-box .btn-book-now {
    margin: 0 auto;
    display: inline-flex;
  }
  .land-main-col {
    text-align: center;
  }
  .land-main-col h2 {
    font-size: 2.5rem;
    text-align: center;
  }
  .land-slogans-stack {
    align-items: center;
    text-align: center;
  }
  .land-slogan-line {
    font-size: 1.625rem;
    text-align: center;
  }
  .land-editorial-body {
    text-align: center;
  }
  .land-main-col h3 {
    text-align: center;
    font-size: 1.75rem;
  }

  /* Local Amenities Centering */
  .amenities-section {
    padding: 4.5rem 0;
    text-align: center;
  }
  .amenities-header {
    text-align: center;
    margin-bottom: 2rem;
  }
  .amenities-title {
    text-align: center;
    font-size: 2.5rem;
  }
  .amenities-split-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .distances-bullet-list {
    align-items: center;
    text-align: center;
    gap: 1.25rem;
  }
  .distance-row {
    justify-content: center;
    text-align: center;
    font-size: 1.125rem;
  }
  .amenities-3col-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.25rem;
  }
  .amenity-card-item {
    align-items: center;
    text-align: center;
  }
  .amenity-icon-box {
    justify-content: center;
    width: 100%;
  }
  .amenity-card-item h4 {
    text-align: center;
  }
  .amenity-card-item p {
    text-align: center;
  }

  /* Estate Management */
  .estate-mgmt-section {
    padding: 4.5rem 0;
    text-align: center;
  }
  .estate-mgmt-section h2 {
    font-size: 2.25rem;
  }
  .estate-mgmt-section p {
    margin-left: auto;
    margin-right: auto;
  }
  .mgmt-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .mgmt-card-box {
    text-align: center;
  }

  /* Regenerative Care & FAQ */
  .regen-faq-section {
    padding: 4.5rem 0;
  }
  .regen-faq-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .regen-faq-grid > div:first-child {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .regen-faq-grid > div:first-child h2 {
    font-size: 2.25rem;
    text-align: center;
  }
  .regen-faq-grid .btn-book-now {
    margin: 0 auto;
    display: inline-flex;
  }
  .faq-accordion-group {
    margin-top: 1.5rem;
  }
  .faq-accordion-btn {
    font-size: 0.9375rem;
    padding: 1rem 1.25rem;
  }

  /* Reservations & Contact */
  .reservations-contact-section {
    padding: 4.5rem 0;
  }
  .res-contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .res-col {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .res-col .btn-book-now {
    margin: 0 auto;
    display: inline-flex;
  }
  .res-col h2, .contact-col h2 {
    font-size: 2.25rem;
    text-align: center;
  }
  .contact-col {
    text-align: left;
  }
  .contact-fields-stack button[type="submit"] {
    display: block;
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* About */
  #about {
    padding: 4rem 0 !important;
  }
  #about h2 {
    font-size: 2.25rem !important;
  }

  /* Footer */
  footer .container > div:first-child {
    justify-content: center;
    text-align: center;
  }
  footer .container > div:last-child {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .amenities-3col-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .split-gallery-2x2 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   CostaLands Deep Visual Redesign Utilities (PDF Alignment)
   ========================================================================== */
/* Secondary section titles across all pages - refined & balanced */
.font-massive {
  font-size: clamp(2rem, 3.2vw, 2.75rem) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  letter-spacing: 0.045em !important;
  line-height: 1.2 !important;
}

.font-editorial-quote {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem) !important;
  font-weight: 200 !important;
  line-height: 1.3 !important;
}

/* Secondary section statement subtitles */
.font-thin-statement {
  font-size: clamp(1.2rem, 2vw, 1.6rem) !important;
  font-weight: 300 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.045em !important;
}

/* First banners / Hero sections of each page - Keep large & monumental */
.page-hero-banner .font-massive,
.page-hero-banner h1,
.page-hero-content .font-massive,
.page-hero-content h1,
.hero-section .font-massive,
.hero-section h1,
.hero-section .hero-title,
.hero-content .font-massive,
.hero-content h1,
h1.font-massive {
  font-size: clamp(3.5rem, 8vw, 7.5rem) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  letter-spacing: 0.045em !important;
  line-height: 0.92 !important;
}

.page-hero-banner .font-thin-statement,
.hero-section .font-thin-statement {
  font-size: clamp(1.75rem, 3.5vw, 3.75rem) !important;
  font-weight: 200 !important;
  line-height: 1.1 !important;
}

/* Anti-Widow / Anti-Orphan Layout & Text Wrap Rules */
h1, h2, h3, h4, .font-massive, .font-thin-statement, .section-title, .font-section-title, .editorial-headline {
  text-wrap: balance;
}

p, .body-text, .body-lead, .editorial-body p, .page-hero-card-text {
  text-wrap: pretty;
}

.section-header-centered {
  text-align: center;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.section-header-centered p {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-wrap: pretty;
}

/* Pill Buttons */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: lowercase;
  transition: all var(--transition-fast);
  cursor: pointer;
  white-space: nowrap;
}

.btn-pill-green {
  background: var(--color-green-dark);
  color: #FFFFFF;
  border: 1px solid var(--color-green-dark);
}
.btn-pill-green:hover {
  background: #FFFFFF;
  color: var(--color-green-dark);
}

.btn-pill-light {
  background: var(--color-sand-light);
  color: var(--color-green-dark);
  border: 1px solid var(--color-sand-light);
}
.btn-pill-light:hover {
  background: transparent;
  color: var(--color-sand-light);
}

.btn-pill-outline {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.btn-pill-outline:hover {
  background: #FFFFFF;
  color: var(--color-green-dark);
}

.btn-pill-outline-blue {
  background: transparent;
  color: #162336;
  border: 1px solid rgba(22, 35, 54, 0.45);
}
.btn-pill-outline-blue:hover {
  background: #162336;
  color: #FFFFFF !important;
  border-color: #162336;
}

.btn-pill-accent {
  background: #244d7f;
  color: #FFFFFF !important;
  border: 1px solid #244d7f;
  box-shadow: 0 4px 15px rgba(36, 77, 127, 0.35);
}
.btn-pill-accent:hover {
  background: #244d7f;
  color: #162336 !important;
  border-color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(95, 137, 95, 0.45);
}

.service-block .btn-pill-outline,
.btn-pill-outline-dark {
  background: transparent;
  color: var(--color-green-dark, #2a422a);
  border: 1px solid rgba(42, 66, 42, 0.35);
  font-weight: 600;
}
.service-block .btn-pill-outline:hover,
.btn-pill-outline-dark:hover {
  background: var(--color-green-dark, #2a422a);
  color: #FFFFFF;
  border-color: var(--color-green-dark, #2a422a);
}

/* Color Block Sections */
.bg-ocean-blue { background-color: var(--color-blue-dark) !important; color: #FFFFFF; }
.bg-forest-green { background-color: var(--color-green-dark) !important; color: #FFFFFF; }
.bg-sand-beige { background-color: var(--color-sand-bg) !important; color: var(--color-green-dark); }

/* Split 50/50 Screen */
.split-50-50 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 992px) {
  .split-50-50 {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
  }
}
@media (min-width: 1200px) {
  .split-50-50 {
    gap: 6rem;
  }
}

.editorial-body {
  font-size: 1.05rem;
  line-height: 1.75;
}
.editorial-body p {
  margin-bottom: 1.25rem;
}
.editorial-body p:last-child {
  margin-bottom: 0;
}

.split-panel {
  padding: clamp(4rem, 6vw, 7rem) clamp(2rem, 5vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Photo 2x2 Grid */
.photo-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}
.photo-grid-2x2 img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Amenities PDF Grid */
.pdf-amenities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
}
.pdf-amenity-card {
  border: 1px solid var(--color-green-dark);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: transparent;
}
.pdf-amenity-card img {
  height: 48px;
  margin-bottom: 1rem;
  object-fit: contain;
}
.pdf-amenity-card h4 {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
}
.pdf-amenity-card p {
  font-size: 0.8rem;
  margin-top: 0.25rem;
  opacity: 0.8;
}

/* Distance List PDF */
.pdf-distance-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pdf-distance-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.pdf-distance-list li::before {
  content: "—";
  font-size: 1.25rem;
  color: var(--color-green-accent, #5f895f);
  font-weight: 700;
}


/* ==========================================================================
   UX/UI Perfection Overrides (Mobile-First, Spacing, Touch Targets)
   ========================================================================== */

/* Prevent horizontal overflow globally */
html, body {
  overflow-x: hidden;
  width: 100%;
}

/* Ensure container has safe padding on mobile */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 640px) {
  .container { max-width: 640px; }
}
@media (min-width: 768px) {
  .container { max-width: 768px; }
}
@media (min-width: 1024px) {
  .container { max-width: 1024px; padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 1280px) {
  .container { max-width: 1200px; }
}

/* Touch Targets for Mobile */
button, 
a.btn-pill, 
.faq-accordion-btn {
  min-height: 48px; /* Touch target minimum */
}

/* Microinteractions: Scale on hover for cards */
.service-block {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.service-block:hover {
  transform: translateY(-4px);
}

/* Image microinteractions */
.object-cover {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.overflow-hidden:hover .object-cover {
  transform: scale(1.03);
}

/* Typography fluid clamp adjustments for mobile readability */
.font-massive {
  font-size: clamp(2.5rem, 8vw, 6rem) !important; /* Slightly reduced min for mobile */
  line-height: 1 !important;
}
.font-thin-statement {
  font-size: clamp(1.5rem, 4vw, 3rem) !important;
}

/* ==========================================================================
   Wave Divider Alignment Polish & Seamless Vector Waves
   ========================================================================== */
.wave-divider {
  width: 100%;
  height: 24px;
  background-repeat: repeat-x;
  background-position: left center;
  background-size: 72px 24px;
  opacity: 0.95;
  display: block;
}

.wave-divider.wave-light-blue,
.wave-divider.wave-accent {
  background-image: url('/assets/images/wave_seamless_light_blue.svg');
}
.wave-divider.wave-blue {
  background-image: url('/assets/images/wave_seamless_blue.svg');
}
.wave-divider.wave-green {
  background-image: url('/assets/images/wave_seamless_green.svg');
}
.wave-divider.wave-white {
  background-image: url('/assets/images/wave_seamless_white.svg');
}

.title-wave-group {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
  text-align: left;
}
.title-wave-group > :first-child {
  margin-bottom: 0 !important;
}
.title-wave-group .wave-divider {
  width: 100% !important;
  margin-top: 1.5rem !important;
  margin-bottom: 2rem !important;
}

/* ==========================================================================
   Page Hero Banner (Full height with translucent card like Index Hero)
   ========================================================================== */
.page-hero-banner {
  position: relative;
  min-height: 85vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding-top: 8rem;
  padding-bottom: 5rem;
  width: 100%;
}
@media (min-width: 992px) {
  .page-hero-banner {
    min-height: 92vh;
  }
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 21, 19, 0.55) 0%, rgba(18, 21, 19, 0.85) 100%);
}
.page-hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  width: 100%;
  align-items: center;
}
@media (min-width: 992px) {
  .page-hero-content {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 3.5rem;
  }
}
.page-hero-card {
  color: #FFFFFF;
  background: rgba(42, 66, 42, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 2.2rem 2rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.page-hero-card-text {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 1rem;
}
.page-hero-card-subtext {
  font-size: clamp(0.9rem, 1.05vw, 1.02rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   Panoramic Estate Section with Dual Translucent Floating Cards
   ========================================================================== */
.estate-panoramic-section {
  position: relative;
  min-height: 90vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  padding: 6rem 0;
  width: 100%;
}
.estate-panoramic-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 21, 19, 0.55) 0%, rgba(18, 21, 19, 0.85) 100%);
  pointer-events: none;
}
.estate-cards-dual-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  width: 100%;
  align-items: stretch;
}
@media (min-width: 992px) {
  .estate-cards-dual-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2.5rem;
  }
}
.estate-glass-card {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 16px;
  padding: 3rem 2.5rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.estate-card-tag {
  display: inline-block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--color-green-accent, #5f895f);
  margin-bottom: 0.75rem;
}
.estate-card-title {
  font-size: clamp(1.85rem, 2.8vw, 2.4rem);
  line-height: 1.18;
  color: var(--color-green-dark, #2a422a);
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.estate-card-text {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #243028;
  margin-bottom: 0.85rem;
}
.estate-card-text:last-of-type {
  margin-bottom: 0;
}
.estate-features-heading {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-green-dark, #2a422a);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(42, 66, 42, 0.15);
}
.estate-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
@media (min-width: 576px) {
  .estate-features-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1.25rem;
  }
}
.estate-feature-item {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #1F2A22;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.estate-check-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--color-green-accent, #5f895f);
}

@media (max-width: 991px) {
  .estate-panoramic-section {
    padding: 4rem 0;
  }
  .estate-glass-card {
    padding: 2.25rem 1.75rem;
    border-radius: 12px;
  }
}

/* ==========================================================================
   Balanced Grids (Zero Orphans / Full Single-Line Harmony)
   ========================================================================== */
.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 1.25rem !important;
  text-align: center;
  align-items: center;
  width: 100%;
}
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem 1rem !important;
  }
}
@media (max-width: 575px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem 0.75rem !important;
  }
}

.villas-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
  width: 100%;
}
.single-villa-grid {
  display: flex !important;
  justify-content: center !important;
}
.single-villa-grid .villa-card {
  max-width: 780px !important;
  width: 100% !important;
}
@media (max-width: 1100px) {
  .villas-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
}
@media (max-width: 640px) {
  .villas-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
}

/* ==========================================================================
   Luxury Service Cards with Icons & Prominent Typography
   ========================================================================== */
.service-block {
  background: #f2f2f2;
  padding: 3rem 2.5rem;
  border-radius: 16px;
  border: 1px solid rgba(42, 66, 42, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.service-block:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(42, 66, 42, 0.08);
}
.service-icon-box {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: rgba(42, 66, 42, 0.08);
  border: 1px solid rgba(42, 66, 42, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-green-dark, #2a422a);
  margin-bottom: 1.5rem;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-block:hover .service-icon-box {
  background: var(--color-green-dark, #2a422a);
  color: #f8f3d6;
  border-color: var(--color-green-dark, #2a422a);
  transform: translateY(-2px) scale(1.04);
}
.service-title {
  font-size: clamp(1.85rem, 2.4vw, 2.35rem) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  letter-spacing: 0.045em !important;
  color: var(--color-green-dark, #2a422a) !important;
  line-height: 1.15 !important;
  margin-bottom: 1rem !important;
}
.service-tagline {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--color-green-dark, #2a422a);
  line-height: 1.45;
  margin-bottom: 0.75rem;
  display: block;
}
.service-desc {
  font-size: 1rem;
  line-height: 1.68;
  color: #3C4A42;
  margin-bottom: 1.5rem;
}
.service-inclusions-label {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-green-accent, #5f895f);
  margin-bottom: 0.85rem;
  display: block;
}
.service-features-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.service-features-list li {
  font-size: 0.98rem;
  color: #2D3A32;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  line-height: 1.45;
}
.service-features-list li::before {
  content: "—";
  color: var(--color-green-accent, #5f895f);
  font-weight: 700;
  flex-shrink: 0;
}

/* ==========================================================================
   High-Contrast Card Readability on Dark Backgrounds
   ========================================================================== */
.service-card,
.bg-forest-green .service-card,
.bg-ocean-blue .service-card {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 16px !important;
  padding: 2.75rem 2.25rem !important;
  color: #FFFFFF !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
}

.service-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255, 255, 255, 0.38) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.25) !important;
}

.service-card h4,
.service-card .font-thin-statement {
  color: #FFFFFF !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.045em !important;
  margin-bottom: 0.5rem !important;
}

.service-card .service-tagline {
  color: #5f895f !important; /* Elegant light sage accent */
  font-size: 1.08rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-top: 0.35rem !important;
  margin-bottom: 1.25rem !important;
  display: block !important;
}

.service-card .service-desc {
  color: #FFFFFF !important; /* 100% pure bright readable white */
  opacity: 0.95 !important;
  font-size: 1.02rem !important;
  line-height: 1.7 !important;
  margin-bottom: 2rem !important;
  flex-grow: 1 !important;
}

.service-card .btn-pill-outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0.65rem 1.4rem !important;
  border-radius: 9999px !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  background: transparent !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
}

.service-card .btn-pill-outline:hover {
  background: #FFFFFF !important;
  color: #2a422a !important;
  border-color: #FFFFFF !important;
}

/* Also ensure outline buttons on light backgrounds contrast perfectly */
.bg-sand-beige .btn-pill-outline,
.bg-sand-bg .btn-pill-outline,
.service-block .btn-pill-outline {
  background: transparent !important;
  color: #2a422a !important;
  border: 1px solid rgba(42, 66, 42, 0.4) !important;
  font-weight: 600 !important;
}

.bg-sand-beige .btn-pill-outline:hover,
.bg-sand-bg .btn-pill-outline:hover,
.service-block .btn-pill-outline:hover {
  background: #2a422a !important;
  color: #FFFFFF !important;
  border-color: #2a422a !important;
}

/* ==========================================================================
   Mobile-First Quality Assurance & Touch-Target Safeguards
   ========================================================================== */
@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
    position: relative;
  }
  
  /* Touch Targets Accessibility: Minimum 44px height */
  .btn, .btn-primary, .btn-secondary, .btn-pill, .btn-pill-dark, .btn-pill-light,
  .form-submit-btn, .btn-lang-choice, .mobile-lang-quick, .mobile-menu-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .form-input, .form-select, .form-textarea {
    min-height: 44px;
    font-size: 16px !important; /* Prevents auto-zoom on iOS */
  }

  /* Container padding comfort on small screens */
  .container {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Two-card and split sections responsive stacking */
  .service-block {
    padding: 2.25rem 1.75rem !important;
  }
}

@media (max-width: 480px) {
  .service-block {
    padding: 1.75rem 1.25rem !important;
  }
  .service-title {
    font-size: 1.65rem !important;
  }
  .btn-pill, .btn-primary {
    width: 100% !important;
    text-align: center;
  }
}

/* ==========================================================================
   Global Utility Classes & Legibility Helpers
   ========================================================================== */
.text-white {
  color: #FFFFFF !important;
}

.text-green-dark {
  color: #2a422a !important;
}

.text-green-accent {
  color: #5f895f !important;
}

.text-sand-light {
  color: #f8f3d6 !important;
}

.text-sand-card {
  color: #f8f3d6 !important;
}

.text-sand-muted {
  color: #5f895f !important;
}

.text-body-muted {
  color: #5A6B60 !important;
}

.text-blue-light {
  color: #244d7f !important;
}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.bg-white {
  background-color: #FFFFFF !important;
}

.bg-sand-beige,
.bg-sand {
  background-color: #f2f2f2 !important;
}

.bg-green-dark {
  background-color: #2a422a !important;
  color: #FFFFFF;
}

.bg-green-accent {
  background-color: #5f895f !important;
  color: #FFFFFF;
}

.font-serif {
  font-family: 'The Randi', cursive !important;
  letter-spacing: 0.02em;
}

.italic {
  font-style: italic !important;
}

/* Hero text clarity and contrast safeguards */
.hero-title-group h1,
.pdf-hero-section h1,
.hero-left h1,
.hero-title {
  color: #FFFFFF !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================================================
   Luxury Beach House Redesign Extensions (C L web.pdf & Airbnb Luxe)
   ========================================================================== */

/* 1. Extended Palette & Alternating Background Classes */
:root {
  --color-blue-dark: #162336;
  --color-blue-accent: #244d7f;
  --color-blue-light: #244d7f;
  --color-coastal-mist: #f2f2f2;
  --color-coastal-wash: #f2f2f2;
  --color-sand-soft: #f2f2f2;
}

.bg-coastal-mist {
  background-color: #f2f2f2 !important;
}

.bg-coastal-wash {
  background-color: #f2f2f2 !important;
}

.bg-blue-dark {
  background-color: #162336 !important;
  color: #FFFFFF !important;
}

.bg-blue-accent {
  background-color: #162336 !important;
  color: #FFFFFF !important;
}

.bg-sand-soft {
  background-color: #f2f2f2 !important;
}

.text-blue-dark {
  color: #162336 !important;
}

.text-blue-accent {
  color: #244d7f !important;
}

.border-coastal {
  border-color: rgba(36, 77, 127, 0.25) !important;
}

/* 2. Container Breadth & Horizontal Utilization */
.container {
  max-width: 1560px !important;
  width: 100% !important;
  padding-left: clamp(1.5rem, 4vw, 4rem) !important;
  padding-right: clamp(1.5rem, 4vw, 4rem) !important;
}

.container-wide {
  max-width: 1680px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(1.5rem, 4vw, 4rem) !important;
  padding-right: clamp(1.5rem, 4vw, 4rem) !important;
}

/* 3. Balanced, Orphan-Free Grid Systems */

/* 5 Elements: 5-column single row on desktop, 3+2 on tablet, never 4+1 */
.grid-5-balanced {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}

@media (max-width: 1200px) {
  .grid-5-balanced {
    grid-template-columns: repeat(6, 1fr);
  }
  .grid-5-balanced > :nth-child(1),
  .grid-5-balanced > :nth-child(2),
  .grid-5-balanced > :nth-child(3) {
    grid-column: span 2;
  }
  .grid-5-balanced > :nth-child(4),
  .grid-5-balanced > :nth-child(5) {
    grid-column: span 3;
  }
}

@media (max-width: 768px) {
  .grid-5-balanced {
    grid-template-columns: 1fr;
  }
  .grid-5-balanced > * {
    grid-column: span 1 !important;
  }
}

/* 7 Elements: 4 on row 1 + 3 balanced on row 2 */
.grid-7-balanced {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

.grid-7-balanced > :nth-child(1),
.grid-7-balanced > :nth-child(2),
.grid-7-balanced > :nth-child(3),
.grid-7-balanced > :nth-child(4) {
  grid-column: span 3;
}

.grid-7-balanced > :nth-child(5),
.grid-7-balanced > :nth-child(6),
.grid-7-balanced > :nth-child(7) {
  grid-column: span 4;
}

@media (max-width: 991px) {
  .grid-7-balanced {
    grid-template-columns: repeat(6, 1fr);
  }
  .grid-7-balanced > :nth-child(1),
  .grid-7-balanced > :nth-child(2),
  .grid-7-balanced > :nth-child(3),
  .grid-7-balanced > :nth-child(4),
  .grid-7-balanced > :nth-child(5),
  .grid-7-balanced > :nth-child(6) {
    grid-column: span 3;
  }
  .grid-7-balanced > :nth-child(7) {
    grid-column: 2 / span 4;
  }
}

@media (max-width: 640px) {
  .grid-7-balanced {
    grid-template-columns: 1fr;
  }
  .grid-7-balanced > * {
    grid-column: span 1 !important;
  }
}

/* 8 Elements: Balanced 4x2 on Desktop, 2x4 on Tablet */
.grid-8-balanced {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}

@media (max-width: 1024px) {
  .grid-8-balanced {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grid-8-balanced {
    grid-template-columns: 1fr;
  }
}

/* 11 Elements: 1 Full-width Showcase Hero + 10 Balanced Cards (5x2) */
.grid-11-balanced {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}

.grid-11-balanced > :first-child {
  grid-column: 1 / -1;
}

@media (max-width: 1024px) {
  .grid-11-balanced {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grid-11-balanced {
    grid-template-columns: 1fr;
  }
}

/* 4. Strict 1:1 Column Proportions (No floating small photos beside long text) */
.col-proportional-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: stretch;
}

.col-proportional-2.reverse {
  direction: rtl;
}

.col-proportional-2.reverse > * {
  direction: ltr;
}

.col-media-match {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 480px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px -10px rgba(22, 35, 54, 0.15);
}

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

.col-media-match:hover img {
  transform: scale(1.035);
}

@media (max-width: 991px) {
  .col-proportional-2 {
    grid-template-columns: 1fr;
  }
  .col-media-match {
    min-height: 360px;
  }
}

/* 5. Parallax Scenic Windows with Blue/Green Contrast Overlays */
.parallax-section {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: clamp(6rem, 10vw, 9rem) 0;
  color: #FFFFFF;
}

.parallax-overlay-blue {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 35, 54, 0.72) 0%, rgba(22, 35, 54, 0.88) 100%);
  z-index: 1;
}

.parallax-overlay-green {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(42, 66, 42, 0.68) 0%, rgba(14, 40, 24, 0.88) 100%);
  z-index: 1;
}

.parallax-content {
  position: relative;
  z-index: 2;
}

@media (max-width: 1024px) {
  .parallax-section {
    background-attachment: scroll; /* Mobile smooth fallback */
  }
}

/* 6. Stacking Cards for Villas & Steps */
.stacking-cards-container {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  position: relative;
}

.stacking-card {
  position: sticky;
  top: 100px;
  background: #FFFFFF;
  border-radius: 20px;
  border: 1px solid rgba(22, 35, 54, 0.08);
  box-shadow: 0 12px 35px -8px rgba(22, 35, 54, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stacking-card.dark {
  background: #162336;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 45px -10px rgba(0, 0, 0, 0.35);
}

/* 7. Icon Badge & List Item Styling */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f2f2f2;
  color: #244d7f;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.icon-badge.green {
  background: #f2f2f2;
  color: #2a422a;
}

.icon-badge.white-ghost {
  background: rgba(255, 255, 255, 0.12);
  color: #5f895f;
}

.icon-list-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.icon-list-item .costa-icon {
  margin-top: 3px;
  color: #244d7f;
}

.icon-list-item.green .costa-icon {
  color: #5f895f;
}

.icon-list-item.light .costa-icon {
  color: #5f895f;
}





/* Primary Brand Headings (Swell Regular) - Authentic Unmodified Light/Regular Weight */
h1, .hero-title, .font-massive, .editorial-headline, .middle-giant-text, .page-hero-banner h1, .pdf-hero-section h1, .hero-left h1, .service-title, .footer-slogan {
  font-family: 'Swell', 'Swell Regular', 'Onest', sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "kern" 1 !important;
  letter-spacing: 0.045em !important;
  line-height: 1.15 !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Secondary Headings and Balance */
h2, h3, .section-title, .font-thin-statement {
  letter-spacing: 0.035em !important;
  line-height: 1.25 !important;
  text-rendering: optimizeLegibility !important;
}

/* Stylized Subtitles & Editorial Accents (The Randi Regular) - Scaled 160%-200% for Optimum Visual Legibility */
.font-serif,
.hero-tagline,
.font-editorial-quote,
.editorial-quote,
.editorial-eyebrow,
.property-tagline,
.estate-tagline-closing,
.estate-closing-statement,
.action-subtitle,
.stays-card-footer,
.exp-quote,
.hero-desc.font-serif {
  font-family: 'The Randi', cursive !important;
  font-size: clamp(1.6rem, 2.5vw, 2.4rem) !important;
  line-height: 1.35 !important;
  letter-spacing: 0.025em !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Specific scale adjustments for smaller eyebrow/badge accents */
.editorial-eyebrow,
p.font-serif.italic.text-sand.text-sm,
p.font-serif.italic.text-sm {
  font-size: clamp(1.4rem, 2vw, 1.85rem) !important;
  line-height: 1.3 !important;
}

/* Hero tagline ('Stay easy.') prominent brand signature accent */
.hero-tagline,
.pdf-hero-section .hero-tagline,
.footer-slogan {
  font-size: clamp(2rem, 3.8vw, 3.2rem) !important;
  line-height: 1.2 !important;
}


/* ==========================================================================
   Site-Wide Eyebrows & Subtitles Typography Standardization
   (Reference: Onest Bold, Uppercase, Tracking 0.14em, Clean & High-Contrast)
   ========================================================================== */

/* Base Eyebrow System */
.section-tag,
.section-tag-eyebrow,
.editorial-eyebrow,
.card-top-badge,
.estate-card-tag,
.service-num-badge,
.stat-label,
.caption-tag {
  font-family: var(--font-main, 'Onest', sans-serif) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-size: 0.8125rem !important; /* 13px */
  line-height: 1.3 !important;
}

/* Eyebrows on Light Backgrounds */
.section-tag,
.section-tag-eyebrow,
.estate-card-tag {
  color: #5f895f;
}

/* Strict High Contrast for Eyebrows on Dark Backgrounds or Scenic Banners */
.bg-blue-dark .section-tag,
.bg-blue-dark .section-tag-eyebrow,
.bg-blue-dark .editorial-eyebrow,
.bg-blue-dark .stat-label,
.bg-forest-green .section-tag,
.bg-forest-green .section-tag-eyebrow,
.bg-forest-green .editorial-eyebrow,
.bg-forest-green .stat-label,
.bg-ocean-blue .section-tag,
.bg-ocean-blue .section-tag-eyebrow,
.bg-ocean-blue .editorial-eyebrow,
.bg-ocean-blue .stat-label,
.principles-banner-section .section-tag,
.principles-banner-section .section-tag-eyebrow,
.principles-banner-section .editorial-eyebrow,
.editorial-block-section .section-tag,
.editorial-block-section .section-tag-eyebrow,
.editorial-block-section .editorial-eyebrow,
.page-hero-banner .section-tag,
.page-hero-banner .section-tag-eyebrow,
.parallax-section .section-tag,
.parallax-section .section-tag-eyebrow,
.hero-section .section-tag,
.hero-section .section-tag-eyebrow {
  color: #FFFFFF !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

/* Subtitles under headers in dark sections */
.bg-blue-dark .section-header-centered p,
.bg-blue-dark p.text-blue-light,
.bg-forest-green .section-header-centered p,
.principles-banner-section p {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Card numbers in dark cards (01, 02, 03...) - Pure luminous high-contrast white */
.principle-num,
.action-num,
.step-number,
.service-num-badge {
  font-family: var(--font-main, 'Onest', sans-serif) !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

.principle-card .principle-num,
.principles-banner-section .principle-num,
.bg-blue-dark .principle-num,
.bg-blue-dark .action-num,
.bg-blue-dark .step-number,
.bg-forest-green .principle-num,
.bg-forest-green .action-num,
.bg-forest-green .step-number {
  color: #FFFFFF !important;
  opacity: 0.95 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Icons in dark card wrappers & CTA grids */
.cta-quad-card .cta-card-icon-wrap svg,
.cta-quad-card .cta-card-icon-wrap .costa-icon,
.cta-quad-card .costa-icon {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

.cta-card-icon-wrap {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 12px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  transition: all 0.3s ease;
}

.cta-quad-card:hover .cta-card-icon-wrap {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: #FFFFFF !important;
  transform: translateY(-2px);
}

/* General dark section icons safeguard */
.bg-blue-dark .costa-icon svg,
.bg-ocean-blue .costa-icon svg,
.bg-forest-green .costa-icon svg,
.editorial-block-section .costa-icon svg {
  stroke: #FFFFFF !important;
}

/* ==========================================================================
   Brand Slogan Strict Lowercase & Footer Logo Sizing
   ========================================================================== */
.hero-tagline,
.stay-easy-title,
.footer-slogan,
.section-tag:has-text,
[data-slogan] {
  text-transform: lowercase !important;
}

/* Ensure footer logo maintains strong presence */
.footer-logo {
  height: 58px !important;
  max-width: 220px !important;
  width: auto !important;
  object-fit: contain !important;
}


/* Standardize stay-easy-title sizing */
.stay-easy-title {
  font-family: 'The Randi', cursive !important;
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  line-height: 1.1 !important;
  font-weight: 400 !important;
  color: inherit;
}