/* ==========================================================================
   GLOBAL MAHANSHI BUILDERS — CURATED ARCHITECTURAL LIGHT PALETTE
   Tailored exclusively for index.html (First Page / Homepage)
   Light Color Combo: Warm Cashmere Sand, Mineral Sage, & Artisan Terracotta:
   - Primary Canvas: #F6F3EC (Warm Cashmere Sandstone — soft, organic, zero glare)
   - Accent Canvas: #EDF3EF (Pale Mineral Sage Tint — refreshing architectural mist)
   - Sub-Canvas: #FAF8F2 (Soft Alabaster Silk)
   - Deep Primary Headings: #142822 (Deep Botanical Forest Charcoal)
   - Body Copy: #32443E (Crisp Earthy Slate — 7:1+ contrast)
   - Muted Labels & Dates: #62746D (Subtle Sage Slate)
   - Brand Accent: #B85D26 / #C4682E (Artisan Terracotta & Warm Bronze)
   - Evergreen Accent: #1E4D40 / #10B981 (Botanical Sage Green)
   - Card Surfaces: #FFFFFF (Crisp Warm Milk White with Organic Elevation)
   - Hairline Dividers: #E2DBD0 / #D5E2D9 (Oat & Sage Borders)
   ========================================================================== */

:root {
  --color-canvas-cream: #F6F3EC;
  --color-canvas-sage: #EDF3EF;
  --color-canvas-alabaster: #FAF8F2;
  --color-canvas-card: #FFFFFF;
  --color-text-deep: #142822;
  --color-text-body: #32443E;
  --color-text-muted: #62746D;
  --color-brand-terracotta: #B85D26;
  --color-brand-bronze: #C4682E;
  --color-brand-sage: #1E4D40;
  --color-border-oat: #E2DBD0;
  --color-border-sage: #D5E2D9;
}

html {
  font-size: 17px !important; /* Base typography calibration: +2px boost across entire site */
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

/* Base Body with Soft Organic Warmth (Not stark clinical white) */
body {
  background-color: #F6F3EC !important;
  color: #32443E !important;
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 1rem !important; /* 18px */
  line-height: 1.68 !important;
  zoom: 1 !important; /* Standard native 100% display scale */
  overflow-x: hidden !important;
}

/* Selection Color */
::selection {
  background-color: #fed7aa !important; /* Warm Apricot */
  color: #7c2d12 !important;
}

/* ==========================================================================
   1. GLOBAL HEADER — FULL-WIDTH TRANSPARENT NAVIGATION BAR
   The navigation bar retains the exact same standard full-width layout,
   with the background kept purely transparent over the hero villa photo.
   ========================================================================== */
header.sticky,
header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

header nav {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.brand-top-logo {
  height: 66px !important;
  width: auto !important;
  max-height: 70px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4)) contrast(1.08) brightness(1.04) !important;
  image-rendering: auto !important;
  transform: translateZ(0) !important;
}

header a .font-display {
  color: #FFFFFF !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55) !important;
}

header a span.brand-subtitle,
header a span.tracking-\[0\.22em\],
header a span.tracking-\[0\.42em\],
.brand-subtitle {
  color: #FCD34D !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
  letter-spacing: 0.42em !important;
  text-indent: 0.42em !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  display: block !important;
  width: 100% !important;
  margin-top: 3px !important;
}

/* Header Navigation Links */
header nav a {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
  padding: 6px 12px !important;
  border-radius: 9999px !important;
  transition: all 0.2s ease !important;
}

header nav a:hover {
  color: #FCD34D !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* ==========================================================================
   NAVIGATION OPTIONS: CLEAN TRANSPARENT PLAIN PILLS (NO IMAGES)
   Every option is a refined, transparent glassmorphism pill with NO image inside
   ========================================================================== */
header nav a.nav-option-pill {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.015em !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  text-decoration: none !important;
}

@media (min-width: 1024px) and (max-width: 1535px) {
  header > div {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    gap: 0.5rem !important;
  }
  header nav {
    gap: 0.3rem !important;
  }
  header nav a.nav-option-pill {
    padding: 5px 9px !important;
    font-size: 0.84rem !important;
  }
  header a.sweep {
    padding: 7px 14px !important;
    font-size: 0.86rem !important;
  }
  .brand-top-logo {
    height: 56px !important;
  }
  header a .font-display {
    font-size: 1.35rem !important;
  }
}
@media (min-width: 1536px) {
  header nav {
    gap: 0.6rem !important;
  }
  header nav a.nav-option-pill {
    padding: 6px 15px !important;
    font-size: 0.94rem !important;
  }
}

header nav a.nav-option-pill::before,
header nav a.nav-option-pill::after,
#mobile-nav-drawer nav a.nav-option-pill::before,
#mobile-nav-drawer nav a.nav-option-pill::after {
  display: none !important;
  content: none !important;
  background-image: none !important;
}

header nav a.nav-option-pill span {
  position: relative !important;
  z-index: 2 !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: #FFFFFF !important;
  transition: color 0.2s ease !important;
}

/* Hover State - Elegant Gold Outline and Glow */
header nav a.nav-option-pill:hover {
  background-color: rgba(255, 255, 255, 0.18) !important;
  border-color: #FCD34D !important;
  color: #FCD34D !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 10px rgba(252, 211, 77, 0.3) !important;
}

header nav a.nav-option-pill:hover span {
  color: #FCD34D !important;
}

/* Active Page Nav Indicator for Option Pills */
body.page-home header nav a.nav-opt-home,
body.page-about header nav a.nav-opt-about,
body.page-services header nav a.nav-opt-services,
body.page-projects header nav a.nav-opt-projects,
body.page-packages header nav a.nav-opt-packages,
body.page-leadership header nav a.nav-opt-leadership,
body.page-gallery header nav a.nav-opt-gallery,
body.page-contact header nav a.nav-opt-contact {
  color: #FCD34D !important;
  font-weight: 700 !important;
  border: 1.5px solid #FCD34D !important;
  border-radius: 9999px !important;
  background-color: rgba(252, 211, 77, 0.18) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 12px rgba(252, 211, 77, 0.35) !important;
}

body.page-home header nav a.nav-opt-home span,
body.page-about header nav a.nav-opt-about span,
body.page-services header nav a.nav-opt-services span,
body.page-projects header nav a.nav-opt-projects span,
body.page-packages header nav a.nav-opt-packages span,
body.page-leadership header nav a.nav-opt-leadership span,
body.page-gallery header nav a.nav-opt-gallery span,
body.page-contact header nav a.nav-opt-contact span {
  color: #FCD34D !important;
}

/* Mobile Nav Drawer Option Pills - Clean Transparent */
#mobile-nav-drawer nav a.nav-option-pill {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding: 10px 18px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  margin-bottom: 6px !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
#mobile-nav-drawer nav a.nav-option-pill:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: #FCD34D !important;
  color: #FCD34D !important;
}
#mobile-nav-drawer nav a.nav-option-pill span {
  color: #FFFFFF !important;
}

/* Client Login Completely Removed */
.open-login-modal-btn,
#login-portal-modal {
  display: none !important;
}

/* Header WhatsApp Button */
header a.sweep.bg-clay,
.bg-clay {
  background-color: #B85D26 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
  white-space: nowrap !important;
}

.hover\:bg-\[\#b84a24\]:hover,
.hover\:bg-terracotta:hover {
  background-color: #9E4D1D !important;
}

/* Mobile Toggle & Drawer */
#mobile-menu-toggle {
  background: transparent !important;
  background-color: transparent !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

#mobile-nav-drawer {
  background-color: rgba(18, 32, 27, 0.96) !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(20px) !important;
}

#mobile-nav-drawer a {
  color: rgba(255, 255, 255, 0.9) !important;
}

#mobile-nav-drawer a:hover,
#mobile-nav-drawer a[href="index.html"] {
  color: #FCD34D !important;
}

/* ==========================================================================
   2. HERO SECTION — SOFT TRANSLUCENT BACKGROUND (NOT HARSH / OVERWHELMING IMAGE)
   Background is softly transparent with an elegant atmospheric veil, so the
   villa architecture is visible without overpowering the typography.
   ========================================================================== */
section.bg-\[\#1F3630\],
section.bg-\[\#F8F6F0\],
main > section:first-of-type,
section.bg-\[\#0e221c\],
section.bg-transparent {
  background-color: #0e221c !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
  min-height: 920px !important;
}

@media (min-width: 1024px) {
  main > section:first-of-type {
    min-height: 100vh !important;
  }
}

/* Hero Background Images: Bright and vibrant while keeping text strongly highlighted */
main > section:first-of-type .absolute.inset-0 img,
#hero-background-img {
  opacity: 0.84 !important;
  filter: brightness(103%) contrast(105%) !important;
  transition: opacity 0.5s ease, filter 0.5s ease !important;
}

/* Atmospheric soft veil: Protective on the left for text legibility, clear and radiant on the villa right */
.hero-plain-backdrop {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to right,
    rgba(6, 16, 12, 0.65) 0%,
    rgba(6, 16, 12, 0.44) 36%,
    rgba(6, 16, 12, 0.14) 62%,
    rgba(6, 16, 12, 0.00) 100%
  ) !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

@media (max-width: 1023px) {
  .hero-plain-backdrop {
    display: block !important;
    background: linear-gradient(
      to bottom,
      rgba(6, 16, 12, 0.72) 0%,
      rgba(6, 16, 12, 0.45) 48%,
      rgba(6, 16, 12, 0.16) 80%,
      rgba(6, 16, 12, 0.00) 100%
    ) !important;
    opacity: 1 !important;
  }
}

/* Hero Typography: Strongly highlighted text above the bright transparent background */
main > section:first-of-type h1,
section.bg-\[\#1F3630\] h1,
section.bg-\[\#F8F6F0\] h1 {
  color: #FFFFFF !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.98), 0 4px 16px rgba(0, 0, 0, 0.92), 0 8px 32px rgba(0, 0, 0, 0.8) !important;
  letter-spacing: -0.01em !important;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.75));
}

main > section:first-of-type h1 span,
section.bg-\[\#1F3630\] h1 span.text-amber-200,
section.bg-\[\#F8F6F0\] h1 span.text-amber-700,
main > section:first-of-type h1 span.text-amber-300 {
  color: #FCD34D !important; /* Luminous Golden Amber */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.98), 0 4px 16px rgba(0, 0, 0, 0.92), 0 0 25px rgba(252, 211, 77, 0.55) !important;
}

main > section:first-of-type p.tracking-\[0\.25em\],
section.bg-\[\#1F3630\] p.tracking-\[0\.25em\],
section.bg-\[\#F8F6F0\] p.tracking-\[0\.25em\] {
  color: #FCD34D !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 4px 14px rgba(0, 0, 0, 0.85) !important;
}

main > section:first-of-type p.font-serif,
section.bg-\[\#1F3630\] p.font-serif,
section.bg-\[\#F8F6F0\] p.font-serif {
  color: #FEF3C7 !important; /* Warm Champagne */
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.98), 0 4px 16px rgba(0, 0, 0, 0.9) !important;
  font-weight: 600 !important;
}

main > section:first-of-type p.leading-relaxed,
section.bg-\[\#1F3630\] p.text-linen\/90,
section.bg-\[\#F8F6F0\] p.text-slate-600 {
  color: #FFFFFF !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.98), 0 4px 14px rgba(0, 0, 0, 0.9) !important;
  font-weight: 500 !important;
}

/* Category Badge Pills - Subtle dark glass backdrop so badge text pops clearly */
main > section:first-of-type .inline-flex.rounded-full {
  background-color: rgba(8, 22, 17, 0.6) !important;
  backdrop-filter: blur(6px) !important;
  border-color: rgba(252, 211, 77, 0.4) !important;
  color: #FCD34D !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
}

/* Hero Secondary WhatsApp Button */
main > section:first-of-type a.border-white\/40,
section.bg-\[\#1F3630\] a.border-white\/30,
section.bg-\[\#F8F6F0\] a.border-slate-300 {
  background-color: rgba(255, 255, 255, 0.18) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

main > section:first-of-type a.border-white\/40:hover,
section.bg-\[\#1F3630\] a.border-white\/30:hover,
section.bg-\[\#F8F6F0\] a.border-slate-300:hover {
  background-color: rgba(255, 255, 255, 0.28) !important;
  border-color: #FCD34D !important;
  color: #FCD34D !important;
  transform: translateY(-2px) scale(1.02) !important;
}

/* Hero Bottom Metric Bar — Translucent Glass with Warm Highlights */
.glass-panel {
  background: rgba(14, 26, 22, 0.48) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.glass-panel .divide-slate-200,
.glass-panel .divide-white\/15,
.glass-panel .divide-white\/20,
.glass-panel div.divide-x > * {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.glass-panel .text-slate-900,
.glass-panel .text-linen,
.glass-panel p.text-white {
  color: #FFFFFF !important;
}

.glass-panel .text-amber-700,
.glass-panel .text-terracotta,
.glass-panel p.text-amber-300 {
  color: #FCD34D !important;
}

.glass-panel .text-slate-600,
.glass-panel .text-linen\/95,
.glass-panel p.text-white\/90 {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ==========================================================================
   3. CURATED ARCHITECTURAL LIGHT PALETTE FOR EVERY PAGE ACROSS THE WEBSITE
   Each page features its own distinct, tailored light color that harmonizes
   with the website's deep botanical pine (#142822) and artisan terracotta (#B85D26).
   ========================================================================== */

/* Default Canvas */
.bg-linen-canvas {
  background-color: #F6F3EC !important;
  color: #32443E !important;
  border-color: #E2DBD0 !important;
}

/* --------------------------------------------------------------------------
   PAGE 1: HOMEPAGE (index.html) — Warm Cashmere Sandstone & Mineral Sage Rhythm
   Base: #F6F3EC with alternating #FAF8F2 (Alabaster) and #EDF3EF (Sage Mist)
   -------------------------------------------------------------------------- */
body.page-home {
  background-color: #F6F3EC !important;
}
body.page-home .bg-linen-canvas {
  background-color: #F6F3EC !important;
  color: #32443E !important;
  border-color: #E2DBD0 !important;
}
body.page-home #about { background-color: #FAF8F2 !important; border-bottom: 1px solid #E2DBD0 !important; }
body.page-home #services { background-color: #EDF3EF !important; border-bottom: 1px solid #D5E2D9 !important; }
body.page-home #projects { background-color: #F5F1E8 !important; border-bottom: 1px solid #E2DBD0 !important; }
body.page-home #master-plan { background-color: #FAF8F2 !important; border-bottom: 1px solid #E2DBD0 !important; }
body.page-home #pricing { background-color: #EDF3EF !important; border-bottom: 1px solid #D5E2D9 !important; }
body.page-home #leadership { background-color: #F5F1E8 !important; border-bottom: 1px solid #E2DBD0 !important; }
body.page-home #journey { background-color: #FAF8F2 !important; border-bottom: 1px solid #E2DBD0 !important; }
body.page-home #office { background-color: #EDF3EF !important; border-bottom: 1px solid #D5E2D9 !important; }
body.page-home #gallery { background-color: #F5F1E8 !important; border-bottom: 1px solid #E2DBD0 !important; }
body.page-home #faq { background-color: #FAF8F2 !important; border-bottom: 1px solid #E2DBD0 !important; }
body.page-home #contact { background-color: #F6F3EC !important; border-bottom: 1px solid #E2DBD0 !important; }

/* --------------------------------------------------------------------------
   PAGE 2: ABOUT US (about.html) — Tuscan Alabaster & Warm Limestone Heritage
   Base: #FAF7F0 (Soft Alabaster) with #F4EFE6 (Warm Heritage Limestone)
   -------------------------------------------------------------------------- */
body.page-about {
  background-color: #FAF7F0 !important;
}
body.page-about .bg-linen-canvas {
  background-color: #FAF7F0 !important;
  color: #32443E !important;
  border-color: #E4DDD2 !important;
}
body.page-about section:nth-of-type(2) {
  background-color: #FAF7F0 !important;
  border-bottom: 1px solid #E4DDD2 !important;
}
body.page-about section:nth-of-type(3) {
  background-color: #F4EFE6 !important;
  border-bottom: 1px solid #E4DDD2 !important;
}
body.page-about section:nth-of-type(4) {
  background-color: #FAF7F0 !important;
  border-bottom: 1px solid #E4DDD2 !important;
}
body.page-about .card-linen-white {
  background-color: #FFFFFF !important;
  border: 1.5px solid #E4DDD2 !important;
  box-shadow: 0 4px 18px -2px rgba(35, 45, 40, 0.05) !important;
}
body.page-about .card-linen-soft {
  background-color: #F5EFE4 !important;
  border: 1.5px solid #E4DDD2 !important;
}

/* --------------------------------------------------------------------------
   PAGE 3: SERVICES (services.html) — Architectural Celadon & Mineral Sage Mist
   Base: #EDF4F0 (Pale Celadon Sage) with #E4EFEB (Soft Mineral Sage)
   -------------------------------------------------------------------------- */
body.page-services {
  background-color: #EDF4F0 !important;
}
body.page-services .bg-linen-canvas {
  background-color: #EDF4F0 !important;
  color: #32443E !important;
  border-color: #D3E2DA !important;
}
body.page-services section:nth-of-type(2) {
  background-color: #EDF4F0 !important;
  border-bottom: 1px solid #D3E2DA !important;
}
body.page-services section:nth-of-type(3) {
  background-color: #E4EFEB !important;
  border-bottom: 1px solid #D3E2DA !important;
}
body.page-services section:nth-of-type(4) {
  background-color: #EDF4F0 !important;
  border-bottom: 1px solid #D3E2DA !important;
}
body.page-services .card-linen-white {
  background-color: #FFFFFF !important;
  border: 1.5px solid #D3E2DA !important;
  box-shadow: 0 4px 18px -2px rgba(20, 45, 35, 0.05) !important;
}
body.page-services .card-linen-soft {
  background-color: #E3EDE7 !important;
  border: 1.5px solid #D3E2DA !important;
}

/* --------------------------------------------------------------------------
   PAGE 4: PROJECTS (projects.html) — Natural Travertine & Desert Sand Silk
   Base: #F7F3EB (Warm Travertine Stone) with #EFE8DB (Desert Sand Silk)
   -------------------------------------------------------------------------- */
body.page-projects {
  background-color: #F7F3EB !important;
}
body.page-projects .bg-linen-canvas {
  background-color: #F7F3EB !important;
  color: #32443E !important;
  border-color: #D6C7B4 !important;
}
body.page-projects .card-linen-white {
  background-color: #FFFFFF !important;
  border: 1.5px solid #D6C7B4 !important;
  box-shadow: 0 4px 18px -2px rgba(45, 38, 25, 0.05) !important;
}
body.page-projects .card-linen-soft {
  background-color: #F1E9DB !important;
  border: 1.5px solid #D6C7B4 !important;
}

/* --------------------------------------------------------------------------
   PAGE 5: PACKAGES & PRICING (packages.html) — Pearl White Linen & Mint Opal
   Base: #EEF3F0 (Clean Pearl Mint Linen) with #E4ECE8 (Soft Mineral Tint)
   -------------------------------------------------------------------------- */
body.page-packages {
  background-color: #EEF3F0 !important;
}
body.page-packages .bg-linen-canvas {
  background-color: #EEF3F0 !important;
  color: #32443E !important;
  border-color: #D5E2D9 !important;
}
body.page-packages .card-linen-white {
  background-color: #FFFFFF !important;
  border: 1.5px solid #D5E2D9 !important;
  box-shadow: 0 4px 18px -2px rgba(25, 45, 38, 0.05) !important;
}
body.page-packages .card-linen-soft {
  background-color: #E6EFEA !important;
  border: 1.5px solid #D5E2D9 !important;
}

/* --------------------------------------------------------------------------
   PAGE 6: LEADERSHIP (leadership.html) — Executive Warm Ivory & Sandstone Champagne
   Base: #FAF6ED (Warm Ivory Silk) with #F2ECE0 (Sandstone Champagne)
   -------------------------------------------------------------------------- */
body.page-leadership {
  background-color: #FAF6ED !important;
}
body.page-leadership .bg-linen-canvas {
  background-color: #FAF6ED !important;
  color: #32443E !important;
  border-color: #D8CAB8 !important;
}
body.page-leadership #founder {
  background-color: #FAF6ED !important;
  border-bottom: 1px solid #D8CAB8 !important;
}
body.page-leadership section:nth-of-type(3) {
  background-color: #F2ECE0 !important;
  border-bottom: 1px solid #D8CAB8 !important;
}
body.page-leadership section:nth-of-type(4) {
  background-color: #FAF6ED !important;
  border-bottom: 1px solid #D8CAB8 !important;
}
body.page-leadership section:nth-of-type(5) {
  background-color: #F2ECE0 !important;
  border-bottom: 1px solid #D8CAB8 !important;
}
body.page-leadership .card-linen-white {
  background-color: #FFFFFF !important;
  border: 1.5px solid #D8CAB8 !important;
  box-shadow: 0 4px 18px -2px rgba(45, 35, 20, 0.05) !important;
}
body.page-leadership .card-linen-soft {
  background-color: #EFE7DA !important;
  border: 1.5px solid #D8CAB8 !important;
}

/* --------------------------------------------------------------------------
   PAGE 7: GALLERY (gallery.html) — Sunlight Wheat & Warm Golden Linen Tint
   Base: #FAF5EA (Sunlight Linen Cream) with #F3EDE0 (Warm Golden Sand)
   -------------------------------------------------------------------------- */
body.page-gallery {
  background-color: #FAF5EA !important;
}
body.page-gallery .bg-linen-canvas {
  background-color: #FAF5EA !important;
  color: #32443E !important;
  border-color: #E4D9C8 !important;
}
body.page-gallery #gallery-grid {
  background-color: #FAF5EA !important;
}
body.page-gallery .sticky {
  background-color: rgba(250, 245, 234, 0.95) !important;
  border-bottom-color: #E4D9C8 !important;
}
body.page-gallery #section-construction { background-color: #FAF5EA !important; }
body.page-gallery #section-funactivities,
body.page-gallery #section-officeactivities { background-color: #F3EDE0 !important; }
body.page-gallery #section-layouts { background-color: #FAF5EA !important; }
body.page-gallery #section-infrastructure { background-color: #F3EDE0 !important; }
body.page-gallery #section-blueprints { background-color: #FAF5EA !important; }
body.page-gallery #section-villas { background-color: #F3EDE0 !important; }
body.page-gallery .card-linen-white,
body.page-gallery .gallery-item {
  background-color: #FFFFFF !important;
  border: 1.5px solid #E4D9C8 !important;
  box-shadow: 0 4px 18px -2px rgba(45, 40, 25, 0.05) !important;
}
body.page-gallery .section-filter-btn {
  background-color: #FFFFFF !important;
  color: #142822 !important;
  border: 1.5px solid #E4D9C8 !important;
}
body.page-gallery .section-filter-btn.active {
  background-color: #B85D26 !important;
  color: #FFFFFF !important;
  border-color: #B85D26 !important;
}

/* --------------------------------------------------------------------------
   PAGE 8: CONTACT US (contact.html) — Pale Eucalyptus & Morning Dew Sage
   Base: #EAF2EE (Pale Eucalyptus Mist) with #E0EAE5 (Morning Dew Sage)
   -------------------------------------------------------------------------- */
body.page-contact {
  background-color: #EAF2EE !important;
}
body.page-contact .bg-linen-canvas {
  background-color: #EAF2EE !important;
  color: #32443E !important;
  border-color: #CDE0D6 !important;
}
body.page-contact section:nth-of-type(2) {
  background-color: #EAF2EE !important;
  border-bottom: 1px solid #CDE0D6 !important;
}
body.page-contact section:nth-of-type(3) {
  background-color: #E0EAE5 !important;
  border-bottom: 1px solid #CDE0D6 !important;
}
body.page-contact #enquiry-section {
  background-color: #EAF2EE !important;
  border-bottom: 1px solid #CDE0D6 !important;
}
body.page-contact section:nth-of-type(5) {
  background-color: #E0EAE5 !important;
  border-bottom: 1px solid #CDE0D6 !important;
}
body.page-contact .card-linen-white {
  background-color: #FFFFFF !important;
  border: 1.5px solid #CDE0D6 !important;
  box-shadow: 0 4px 18px -2px rgba(25, 45, 35, 0.05) !important;
}
body.page-contact input,
body.page-contact select,
body.page-contact textarea {
  background-color: #FFFFFF !important;
  border: 1.5px solid #CDE0D6 !important;
  color: #142822 !important;
}
body.page-contact input:focus,
body.page-contact select:focus,
body.page-contact textarea:focus {
  border-color: #B85D26 !important;
  box-shadow: 0 0 0 3px rgba(184, 93, 38, 0.18) !important;
  outline: none !important;
}

/* Headings & Typography */
.text-pine-heading,
.font-display {
  color: #142822 !important;
}

.text-pine {
  color: #142822 !important;
}

.text-pine-copy {
  color: #32443E !important;
  line-height: 1.7 !important;
}

.text-pine-muted,
.text-pine-subtle {
  color: #62746D !important;
}

/* Eyebrows, Badges & Highlights */
.bg-\[\#9E3F1C\]\/10,
.bg-clay\/10 {
  background-color: rgba(184, 93, 38, 0.09) !important;
}

.text-clay,
.text-terracotta-tag {
  color: #B85D26 !important;
}

.border-\[\#9E3F1C\]\/25 {
  border-color: rgba(184, 93, 38, 0.25) !important;
}

/* Card Surfaces (Warm Milk White on Sand & Sage) */
.card-linen-white {
  background-color: #FFFFFF !important;
  border: 1.5px solid #DFD8CB !important;
  box-shadow: 0 4px 18px -2px rgba(20, 40, 34, 0.05), 0 2px 6px -1px rgba(20, 40, 34, 0.02) !important;
  color: #142822 !important;
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1) !important;
}

.card-linen-white:hover {
  border-color: #B85D26 !important;
  box-shadow: 0 16px 36px -6px rgba(20, 40, 34, 0.09), 0 4px 12px -2px rgba(20, 40, 34, 0.03) !important;
  transform: translateY(-2px) !important;
}

.card-linen-soft {
  background-color: #FAF8F2 !important;
  border: 1.5px solid #DFD8CB !important;
  box-shadow: 0 4px 16px -2px rgba(20, 40, 34, 0.03) !important;
}

/* Light Travertine Accent Card */
.card-pine-accent {
  background: linear-gradient(135deg, #F8F6F0 0%, #FFFFFF 100%) !important;
  border: 1.5px solid #DFD8CB !important;
  box-shadow: 0 14px 32px -6px rgba(20, 40, 34, 0.07) !important;
  color: #142822 !important;
}

.card-pine-accent h3,
.card-pine-accent h4,
.card-pine-accent .font-display {
  color: #142822 !important;
}

.card-pine-accent p {
  color: #32443E !important;
}

/* ==========================================================================
   4. BUTTONS, TABS & INTERACTION
   ========================================================================== */
.btn-terracotta-primary {
  background-color: #B85D26 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(184, 93, 38, 0.3) !important;
  transition: all 0.25s ease !important;
}

.btn-terracotta-primary:hover {
  background-color: #142822 !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 20px rgba(20, 40, 34, 0.22) !important;
  transform: translateY(-1px) !important;
}

.btn-pine-outline {
  border: 1.5px solid #142822 !important;
  color: #142822 !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(20, 40, 34, 0.04) !important;
}

.btn-pine-outline:hover {
  background-color: #142822 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
}

/* Section 2 Interactive Theme Tabs */
.theme-tab {
  border: 1.5px solid #DFD8CB !important;
  background-color: #FFFFFF !important;
  color: #142822 !important;
}

.theme-tab:hover {
  background-color: #FAF8F2 !important;
  border-color: #B85D26 !important;
}

.theme-tab.active {
  background-color: #142822 !important;
  color: #FFFFFF !important;
  border-color: #142822 !important;
  box-shadow: 0 12px 28px -6px rgba(20, 40, 34, 0.25) !important;
}

.theme-tab.active .tab-num {
  color: #f3ac85 !important;
}

.theme-tab.active .tab-sub {
  color: #E2DBD0 !important;
}

/* Form Inputs on Warm Sand */
.linen-input {
  background-color: #FFFFFF !important;
  border: 1.5px solid #D4CCC0 !important;
  color: #142822 !important;
  box-shadow: 0 1px 3px rgba(20, 40, 34, 0.03) !important;
}

.linen-input:focus {
  border-color: #B85D26 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(184, 93, 38, 0.16) !important;
}

.linen-input::placeholder {
  color: #8E9E97 !important;
}

/* Borders & Dividers */
.border-linen-edge {
  border-color: #E2DBD0 !important;
}

.border-linen-light {
  border-color: rgba(226, 219, 208, 0.8) !important;
}

/* ==========================================================================
   5. GLOBAL FOOTER (PAGE-SPECIFIC ARCHITECTURAL STONE FINISH)
   ========================================================================== */
footer.bg-linen-canvas {
  background-color: #ECE7DC !important;
  border-top: 1.5px solid #DDD6C8 !important;
  color: #3A4C45 !important;
}

body.page-home footer.bg-linen-canvas { background-color: #ECE7DC !important; border-top: 1.5px solid #DDD6C8 !important; }
body.page-about footer.bg-linen-canvas { background-color: #F4EFE6 !important; border-top: 1.5px solid #E4DDD2 !important; }
body.page-services footer.bg-linen-canvas { background-color: #E4EFEB !important; border-top: 1.5px solid #D3E2DA !important; }
body.page-projects footer.bg-linen-canvas { background-color: #EFE8DB !important; border-top: 1.5px solid #D6C7B4 !important; }
body.page-packages footer.bg-linen-canvas { background-color: #E4ECE8 !important; border-top: 1.5px solid #D5E2D9 !important; }
body.page-leadership footer.bg-linen-canvas { background-color: #F2ECE0 !important; border-top: 1.5px solid #D8CAB8 !important; }
body.page-gallery footer.bg-linen-canvas { background-color: #F3EDE0 !important; border-top: 1.5px solid #E4D9C8 !important; }
body.page-contact footer.bg-linen-canvas { background-color: #E0EAE5 !important; border-top: 1.5px solid #CDE0D6 !important; }

footer .border-linen-edge {
  border-color: #DDD6C8 !important;
}

footer .font-display {
  color: #142822 !important;
}

footer a {
  color: #4C5F58 !important;
  transition: color 0.2s ease !important;
}

footer a:hover {
  color: #B85D26 !important;
}

footer .text-pine-muted {
  color: #6C7F78 !important;
}

/* ==========================================================================
   6. INTERACTIVE HOME EMI CALCULATOR — ARCHITECTURAL LIGHT PALETTE
   ========================================================================== */
#calculator,
.card-calculator-warm {
  background: linear-gradient(145deg, #FAF4EB 0%, #F1E5D6 100%) !important;
  background-color: #FAF4EB !important;
  border: 2px solid #D6C2AB !important;
  box-shadow: 0 16px 36px -8px rgba(184, 93, 38, 0.10), 0 6px 18px -3px rgba(20, 40, 34, 0.05) !important;
  color: #142822 !important;
}

#calculator h3,
#calculator h4 {
  color: #142822 !important;
}

#calculator h3 span {
  color: #B85D26 !important;
}

#calculator p {
  color: #32443E !important;
}

#calculator .bg-white,
#calculator .card-linen-soft,
#calculator .card-result-secondary {
  background-color: #FFFFFF !important;
  border: 1.5px solid #E6DCD0 !important;
  box-shadow: 0 2px 8px rgba(20, 40, 34, 0.04) !important;
}

#calculator label {
  color: #142822 !important;
}

#calculator input,
#calculator select {
  background-color: #FFFFFF !important;
  border: 1.5px solid #D8CBB9 !important;
  color: #142822 !important;
}

#calculator input:focus,
#calculator select:focus {
  border-color: #B85D26 !important;
  box-shadow: 0 0 0 3px rgba(184, 93, 38, 0.18) !important;
  outline: none !important;
}

#calculator #emi-calc-btn,
#calculator .btn-terracotta-primary {
  background-color: #B85D26 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(184, 93, 38, 0.3) !important;
}

#calculator #emi-calc-btn:hover,
#calculator .btn-terracotta-primary:hover {
  background-color: #142822 !important;
}

#calculator #emi-reset-btn {
  background-color: #FFFFFF !important;
  border: 1.5px solid #D8CBB9 !important;
  color: #142822 !important;
}

#calculator #emi-reset-btn:hover {
  background-color: #FAF4EB !important;
  border-color: #B85D26 !important;
}

#calculator .card-result-emi {
  background: linear-gradient(135deg, #FFFDF8 0%, #FAEDE0 100%) !important;
  border: 2px solid #B85D26 !important;
  box-shadow: 0 4px 14px rgba(184, 93, 38, 0.12) !important;
}

#calculator #emi-monthly-result {
  color: #B85D26 !important;
}

#calculator #emi-interest-result,
#calculator #emi-total-result {
  color: #142822 !important;
}

/* ==========================================================================
   7. MASTER BLUEPRINT & PLOT AVAILABILITY TRACKER — LIGHT PALETTE
   ========================================================================== */
.card-calculator-warm {
  background: linear-gradient(145deg, #FAF4EB 0%, #F1E5D6 100%) !important;
  background-color: #FAF4EB !important;
  border: 2px solid #D6C2AB !important;
  box-shadow: 0 16px 36px -8px rgba(184, 93, 38, 0.10), 0 6px 18px -3px rgba(20, 40, 34, 0.05) !important;
  color: #142822 !important;
}

.bracket-frame {
  position: relative;
}

.bracket-frame::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 14px;
  height: 14px;
  border-top: 2px solid #B85D26 !important;
  border-left: 2px solid #B85D26 !important;
  pointer-events: none;
  z-index: 5;
}

.bracket-frame::after {
  content: "";
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 14px;
  height: 14px;
  border-bottom: 2px solid #B85D26 !important;
  border-right: 2px solid #B85D26 !important;
  pointer-events: none;
  z-index: 5;
}

/* Plot Tile Styles */
.plot-tile {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.plot-tile.available {
  background-color: #E8F8F0 !important;
  border: 1.5px solid #10B981 !important;
  color: #046A47 !important;
}

.plot-tile.available:hover,
.plot-tile.selected {
  background-color: #10B981 !important;
  color: #FFFFFF !important;
  border-color: #059669 !important;
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
  z-index: 10;
}

.plot-tile.booked {
  background-color: #FEF6E6 !important;
  border: 1.5px solid #F59E0B !important;
  color: #92400E !important;
}

.plot-tile.booked:hover {
  background-color: #F59E0B !important;
  color: #FFFFFF !important;
  border-color: #D97706 !important;
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4) !important;
  z-index: 10;
}

.plot-tile.sold {
  background-color: #F1F4F3 !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #94A3B8 !important;
  cursor: not-allowed;
  opacity: 0.75 !important;
}

/* ==========================================================================
   8. SAI ROOTS SPOTLIGHT CARD (SECTION 6) - COMPACT BOX SIZE LIKE BEFORE
   ========================================================================== */
.sai-roots-card {
  position: relative !important;
  background-color: #0A1E38 !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 20px 50px -10px rgba(10, 30, 56, 0.6) !important;
  overflow: hidden !important;
  padding: 3.5rem 1.5rem !important;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 640px) {
  .sai-roots-card {
    padding: 4rem 2.5rem !important;
    border-radius: 32px !important;
  }
}

@media (min-width: 1024px) {
  .sai-roots-card {
    padding: 4.25rem 3.5rem !important;
  }
}

/* Transparent Architectural Sketch Background (Complete Image) */
.sai-roots-card .sketch-backdrop-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 0.22 !important;
  filter: brightness(1.1) contrast(1.15) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.sai-roots-card .sketch-gradient-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at center, rgba(10, 30, 56, 0.70) 0%, rgba(10, 30, 56, 0.92) 85%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.sai-roots-card .sketch-watermark-text {
  position: absolute !important;
  right: 2% !important;
  bottom: -15px !important;
  font-family: 'Fraunces', serif !important;
  font-weight: 900 !important;
  font-size: clamp(70px, 14vw, 190px) !important;
  color: rgba(255, 255, 255, 0.04) !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  pointer-events: none !important;
  user-select: none !important;
  text-transform: uppercase !important;
  z-index: 2 !important;
}

.sai-roots-card .card-content {
  position: relative !important;
  z-index: 10 !important;
}

/* Title & Subtitle - Clean, Medium Proportions */
.sai-roots-card .card-title {
  font-family: 'Fraunces', 'Syne', serif !important;
  font-size: clamp(2rem, 3.2vw, 2.75rem) !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.6) !important;
  margin: 0 !important;
}

.sai-roots-card .card-subtitle {
  font-size: clamp(1rem, 1.4vw, 1.25rem) !important;
  font-weight: 500 !important;
  color: #C59B63 !important;
  letter-spacing: 0.02em !important;
  margin-top: 0.6rem !important;
  margin-bottom: 0 !important;
}

/* Feature Pills Container & Row Styling */
.sai-roots-card .pills-row-1 {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

@media (min-width: 1024px) {
  .sai-roots-card .pills-row-1 {
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }
}

.sai-roots-card .pills-row-2 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 10px !important;
}

/* Feature Pills - Sized to Keep 5 Pills in Row 1 without wrapping */
.sai-roots-card .feature-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9999px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  padding: 8px 18px !important;
  font-size: clamp(0.88rem, 1.05vw, 1.05rem) !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

@media (min-width: 640px) {
  .sai-roots-card .feature-pill {
    padding: 9px 22px !important;
  }
}

@media (min-width: 1280px) {
  .sai-roots-card .feature-pill {
    padding: 10px 24px !important;
    font-size: 1.08rem !important;
  }
}

.sai-roots-card .feature-pill:hover {
  border-color: #C59B63 !important;
  background: rgba(197, 155, 99, 0.2) !important;
  transform: translateY(-1.5px) !important;
}

/* Location Text - Compact */
.sai-roots-card .location-text {
  font-size: clamp(1.1rem, 1.4vw, 1.35rem) !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  letter-spacing: 0.02em !important;
  margin-top: 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
}

/* View Project Button - Clean & Compact like before */
.sai-roots-card .btn-view-project {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  background-color: #C59B63 !important;
  padding: 13px 44px !important;
  font-size: 1.10rem !important;
  font-weight: 700 !important;
  color: #0A1E38 !important;
  box-shadow: 0 8px 22px rgba(197, 155, 99, 0.4) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.sai-roots-card .btn-view-project:hover {
  background-color: #d8af75 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(197, 155, 99, 0.55) !important;
}

/* ==========================================================================
   MOBILE & HIGH-SPEED TOUCH OPTIMIZATIONS
   ========================================================================== */
html {
  scroll-behavior: smooth !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden !important;
  padding-bottom: 4.5rem !important; /* Spacing for mobile bottom action bar */
}

@media (min-width: 1024px) {
  body {
    padding-bottom: 0 !important;
  }
}

/* Eliminate 300ms mobile touch delay */
button, a, input, select, textarea, label {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Snappy instant click response micro-animation */
button:active,
a.btn:active,
.btn-terracotta-primary:active,
.sweep:active,
.nav-option-pill:active,
.theme-tab-btn:active,
.sp-thumb-btn:active {
  transform: scale(0.97) !important;
  transition: transform 0.08s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Sticky Mobile Bottom Quick Action Bar */
.mobile-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 45;
  background: rgba(18, 38, 33, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
  padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1024px) {
  .mobile-bottom-bar {
    display: none !important;
  }
}

/* Breadcrumb Styling */
.page-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(253, 252, 238, 0.8);
  margin-bottom: 0.75rem;
}
.page-breadcrumb a {
  color: rgba(253, 252, 238, 0.8);
  text-decoration: none;
  transition: color 0.15s ease;
}
.page-breadcrumb a:hover {
  color: #F5C344;
}
.page-breadcrumb .crumb-separator {
  color: rgba(245, 195, 68, 0.5);
  font-size: 0.75rem;
}
.page-breadcrumb .crumb-active {
  color: #F5C344;
}

/* ==========================================================================
   GLOBAL OPTIMIZED TYPOGRAPHY SYSTEM (+2PX SCALE ACROSS ALL DEVICES)
   Calibrated for Global Mahanshi Builders to deliver premium architectural
   legibility, crystal-clear hierarchy, and zero layout overflow.
   ========================================================================== */

/* Headings & Display Titles (+2px calibrated scale) */
h1, .text-4xl, .text-5xl, .text-6xl {
  letter-spacing: -0.02em;
}

h2, .text-3xl {
  letter-spacing: -0.015em;
  line-height: 1.25;
}

h3, .text-2xl {
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* Body Copy & Paragraphs */
p {
  line-height: 1.68;
}

/* Section Explanations, Lead Quotes & Descriptions */
.heading-explanation,
.card-explanation,
.card-desc,
.hero-explanation {
  font-size: 1.02rem !important; /* ~19px (+2.5px boost over 16.5px) */
  line-height: 1.68 !important;
}

.story-lead-copy,
.story-quote-copy {
  font-size: 1.10rem !important; /* ~20.7px (+2.7px boost) */
  line-height: 1.72 !important;
}

/* Buttons, Calls-to-Action & Interactive Badges */
.btn-terracotta-primary,
.sweep,
.theme-tab-btn,
button.btn,
a.btn {
  font-size: 1rem !important; /* 18px (+2px boost) */
  font-weight: 700 !important;
  letter-spacing: 0.025em !important;
}

/* Form Controls & Labels */
label,
.form-label {
  font-size: 0.95rem !important; /* ~17.1px (+2px boost) */
  font-weight: 600 !important;
}

input,
select,
textarea,
.portal-input,
.linen-input {
  font-size: 1rem !important; /* 18px (+2px boost, prevents unwanted iOS zoom) */
}

/* Breadcrumbs, Micro-Labels & Badges */
.page-breadcrumb,
.page-breadcrumb a,
.page-breadcrumb span {
  font-size: 0.92rem !important; /* ~16.5px (+2px boost) */
}

.crumb-separator {
  font-size: 0.82rem !important;
}

.mobile-bottom-bar a span {
  font-size: 13px !important; /* +2px boost for mobile bar (was 11px) */
}

/* Hero Bottom Metric Bar */
.hero-bottom-metric-bar,
div[class*="bottom-5 sm:bottom-6 lg:bottom-7"] {
  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.glass-panel .grid p.font-display {
  font-size: 1.35rem !important; /* ~26px */
}

.glass-panel .grid p.uppercase {
  font-size: 0.82rem !important; /* ~14.8px (+2.5px boost) */
  letter-spacing: 0.05em !important;
}

/* ==========================================================================
   MOBILE HEADING OPTIMIZATION (PHONES ONLY <= 768px)
   Laptop/Desktop is 100% untouched. Scales headings to a sleek, compact,
   proportional size so titles fit neatly on smartphone screens.
   ========================================================================== */
@media (max-width: 768px) {
  /* Main Hero H1 Headings */
  h1,
  .hero-heading,
  main > section:first-of-type h1,
  section.hero-section h1,
  .font-display.text-3xl,
  .font-display.text-4xl,
  .font-display.text-5xl,
  .font-display.text-6xl,
  .font-display.text-\[68px\] {
    font-size: 1.55rem !important; /* ~24.8px - clean, compact, non-overwhelming */
    line-height: 1.18 !important;
    letter-spacing: -0.015em !important;
  }

  /* Hero Italic Subtitle */
  .font-serif.italic.text-xl,
  .font-serif.italic.text-2xl,
  .font-serif.italic.text-\[26px\],
  .hero-subtitle {
    font-size: 1.05rem !important; /* ~16.8px */
    line-height: 1.35 !important;
  }

  /* Section Headings (H2) */
  h2,
  .section-heading,
  .section-title,
  h2.font-display,
  section h2 {
    font-size: 1.35rem !important; /* ~21.6px - neat & balanced */
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
  }

  /* Subheadings & Main Card Titles (H3) */
  h3,
  .card-heading,
  .card-title,
  h3.font-display,
  .font-display.text-2xl,
  .font-display.text-\[26px\] {
    font-size: 1.15rem !important; /* ~18.4px - refined for mobile cards */
    line-height: 1.3 !important;
  }

  /* Sub-feature & Secondary Titles (H4) */
  h4,
  h4.font-display,
  .font-display.text-xl,
  .font-display.text-\[22px\] {
    font-size: 1.02rem !important; /* ~16.3px */
    line-height: 1.32 !important;
  }

  /* Micro-headings / Eyebrow Badges */
  .section-eyebrow,
  .tag-eyebrow {
    font-size: 0.78rem !important;
    letter-spacing: 0.08em !important;
  }

  p {
    word-break: normal;
    overflow-wrap: break-word;
  }
}

/* Extra Compact Phones (<= 480px) */
@media (max-width: 480px) {
  h1,
  .hero-heading,
  main > section:first-of-type h1,
  .font-display.text-3xl {
    font-size: 1.45rem !important; /* ~23.2px */
    line-height: 1.16 !important;
  }

  h2,
  .section-heading,
  h2.font-display {
    font-size: 1.28rem !important; /* ~20.5px */
    line-height: 1.22 !important;
  }

  h3,
  .card-heading,
  h3.font-display {
    font-size: 1.10rem !important; /* ~17.6px */
  }

  h4,
  h4.font-display {
    font-size: 0.98rem !important; /* ~15.7px */
  }
}