/* ==========================================================================
   GLOBAL MAHANSHI BUILDERS — ARCHITECTURAL LINEN THEME (#e6e2d3)
   Exact restored theme from estate-1-chi.vercel.app with #e6e2d3 linen palette:
   - Canvas: #e6e2d3 (Warm Architectural Sand / Linen)
   - Deep Primary / Headings: #1F3630 / #152622 (Rich Forest Pine)
   - Body Copy: #384641 (Deep Olive Charcoal — crisp 7.5:1+ contrast)
   - Accent & Eyebrows: #9E3F1C / #B84A24 (Warm Terracotta / Clay)
   - Card Surfaces: #FFFFFF / #F8F6EF (Elevated Chalk & Warm Ivory)
   - Borders: #D4CEBF / rgba(31, 54, 48, 0.14)
   ========================================================================== */

:root {
  --color-linen-base: #e6e2d3;
  --color-linen-subtle: #eeebe1;
  --color-linen-border: #d4cebf;
  --color-pine-deep: #1F3630;
  --color-pine-darkest: #152622;
  --color-pine-body: #384641;
  --color-pine-muted: #5e6d67;
  --color-terracotta-accent: #9E3F1C;
  --color-terracotta-hover: #b84a24;
  --color-clay-btn: #ff7738;
}

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

html {
  font-size: 17px !important;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

/* ==========================================================================
   UNIVERSAL DISPLAY SCALE (CROSS-DEVICE CALIBRATION)
   ========================================================================== */
body {
  margin: 0;
  padding: 0;
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  color: #384641;
  background-color: #1F3630;
  font-size: 1rem !important;
  line-height: 1.68 !important;
  overflow-x: hidden;
  zoom: 1 !important;
}

.font-display {
  font-family: 'Fraunces', 'Syne', Georgia, serif !important;
}

.font-serif {
  font-family: 'Fraunces', Georgia, serif !important;
}

/* Base Linen Canvas for Section 2 through Footer */
.bg-linen-canvas {
  background-color: #e6e2d3 !important;
  color: #384641 !important;
}

/* Card surfaces */
.card-linen-white {
  background-color: #ffffff !important;
  border: 1px solid #d6cfbe !important;
  box-shadow: 0 10px 25px -5px rgba(31, 54, 48, 0.06), 0 4px 10px -2px rgba(31, 54, 48, 0.03);
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.card-linen-white:hover {
  border-color: #9E3F1C !important;
  box-shadow: 0 16px 36px -6px rgba(31, 54, 48, 0.12), 0 6px 14px -3px rgba(31, 54, 48, 0.05);
  transform: translateY(-2px);
}

.card-linen-soft {
  background-color: #f7f5ed !important;
  border: 1px solid #d6cfbe !important;
  box-shadow: 0 4px 16px -2px rgba(31, 54, 48, 0.04);
}

/* Dark Pine Accent Card on Linen */
.card-pine-accent {
  background-color: #1F3630 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 20px 45px -10px rgba(31, 54, 48, 0.35);
  color: #fdfcee;
}

/* Headings & Text */
.text-pine-heading {
  color: #1F3630 !important;
}

.text-pine-copy {
  color: #384641 !important;
  line-height: 1.68;
}

/* Card & Section Heading Explanation Copy - Refined, Proportional Elegance */
.heading-explanation,
.card-explanation,
.card-desc {
  font-size: 1.02rem !important;
  line-height: 1.68 !important;
}

@media (min-width: 640px) {
  .heading-explanation,
  .card-explanation,
  .card-desc {
    font-size: 1.08rem !important;
    line-height: 1.7 !important;
  }
}

/* Featured Story Lead Paragraph & Quote (Pasted Image Section) */
.story-lead-copy,
.story-quote-copy {
  font-size: 1.125rem !important; /* 18px */
  line-height: 1.7 !important;
}

@media (min-width: 640px) {
  .story-lead-copy,
  .story-quote-copy {
    font-size: 1.2rem !important; /* ~19.2px */
    line-height: 1.72 !important;
  }
}

.text-pine-subtle {
  color: #5c6c66 !important;
}

.text-terracotta-tag {
  color: #9E3F1C !important;
}

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

.border-linen-light {
  border-color: rgba(31, 54, 48, 0.12) !important;
}

/* Buttons */
.btn-terracotta-primary {
  background-color: #9E3F1C !important;
  color: #ffffff !important;
  transition: all 0.3s ease;
  font-weight: 600;
}

.btn-terracotta-primary:hover {
  background-color: #1F3630 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.btn-pine-outline {
  border: 1.5px solid #1F3630 !important;
  color: #1F3630 !important;
  background-color: transparent !important;
  transition: all 0.3s ease;
  font-weight: 600;
}

.btn-pine-outline:hover {
  background-color: #1F3630 !important;
  color: #ffffff !important;
}

/* Brand Top Logo - Pure Emblem, Crisp, Clear & Beautiful */
.brand-top-logo {
  height: 66px !important;
  width: auto !important;
  max-height: 70px !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4)) contrast(1.08) brightness(1.04) !important;
  image-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  transform: translateZ(0) !important;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), filter 0.25s ease !important;
}

.brand-top-logo:hover {
  transform: scale(1.05) translateZ(0) !important;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.5)) contrast(1.1) brightness(1.08) !important;
}

.brand-subtitle {
  color: #FCD34D !important;
  letter-spacing: 0.42em !important;
  text-indent: 0.42em !important;
  text-align: center !important;
  font-weight: 700 !important;
  display: block !important;
  width: 100% !important;
  margin-top: 2px !important;
}

/* Interactive Tabs for Section 2 Themes */
.theme-tab {
  transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
  border: 1.5px solid #d4cebf;
  background-color: #f7f5ed;
  color: #1F3630;
  cursor: pointer;
}

.theme-tab:hover {
  background-color: #ffffff;
  border-color: #9E3F1C;
  transform: translateX(4px);
}

.theme-tab.active {
  background-color: #1F3630 !important;
  color: #ffffff !important;
  border-color: #9E3F1C !important;
  box-shadow: 0 12px 28px -6px rgba(31, 54, 48, 0.3);
  transform: translateX(6px) scale(1.01);
}

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

.theme-tab.active .tab-badge {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #ff7738 !important;
}

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

/* Range input styling for Calculator */
input[type="range"].linen-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: #d4cebf;
  border-radius: 9999px;
  outline: none;
}

input[type="range"].linen-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #9E3F1C;
  border: 3px solid #ffffff;
  box-shadow: 0 2px 8px rgba(31, 54, 48, 0.35);
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

input[type="range"].linen-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  background: #1F3630;
}

/* Form input fields on Linen */
.linen-input {
  background-color: #ffffff !important;
  border: 1.5px solid #d4cebf !important;
  color: #1F3630 !important;
  transition: all 0.2s ease;
}

.linen-input:focus {
  border-color: #9E3F1C !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(158, 63, 28, 0.15);
}

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

/* Glass panel adjustments */
.glass-panel {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(31, 54, 48, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass-panel-linen {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(212, 206, 191, 0.8);
  box-shadow: 0 16px 40px rgba(31, 54, 48, 0.08);
}

/* Micro-animations */
.sweep {
  position: relative;
  overflow: hidden;
}

.zoom img {
  transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1);
}

.zoom:hover img {
  transform: scale(1.05);
}

/* Bracket Frame Architectural Accents */
.bracket-frame {
  position: relative;
}
.bracket-frame::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 14px;
  height: 14px;
  border-top: 2px solid #B85D26;
  border-left: 2px solid #B85D26;
  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;
  border-right: 2px solid #B85D26;
  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;
  border: 1.5px solid #10B981;
  color: #046A47;
}
.plot-tile.available:hover, .plot-tile.selected {
  background-color: #10B981;
  color: #FFFFFF;
  border-color: #059669;
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
  z-index: 10;
}
.plot-tile.booked {
  background-color: #FEF6E6;
  border: 1.5px solid #F59E0B;
  color: #92400E;
}
.plot-tile.booked:hover {
  background-color: #F59E0B;
  color: #FFFFFF;
  border-color: #D97706;
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
  z-index: 10;
}
.plot-tile.sold {
  background-color: #F1F4F3;
  border: 1.5px solid #CBD5E1;
  color: #94A3B8;
  cursor: not-allowed;
  opacity: 0.75;
}

/* Hero Backdrop with Soft Atmospheric Semi-Transparency (Bright with Protective Left Text Zone) */
.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;
  opacity: 1 !important;
  pointer-events: none !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;
  }
}

/* ==========================================================================
   CLIENT LOGIN PORTAL POPUP MODAL STYLES
   ========================================================================== */
.portal-modal-backdrop {
  background-color: rgba(10, 20, 17, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.portal-modal-card {
  background: linear-gradient(150deg, #182e27 0%, #10211c 100%);
  border: 1px solid rgba(245, 195, 68, 0.4);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.95), 0 0 50px rgba(245, 195, 68, 0.16);
  animation: portalModalEntrance 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes portalModalEntrance {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Unique Architectural Drafting Corner Brackets */
.vault-bracket-tl {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 14px;
  height: 14px;
  border-top: 2px solid #f5c344;
  border-left: 2px solid #f5c344;
  pointer-events: none;
}
.vault-bracket-tr {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 14px;
  height: 14px;
  border-top: 2px solid #f5c344;
  border-right: 2px solid #f5c344;
  pointer-events: none;
}
.vault-bracket-bl {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 14px;
  height: 14px;
  border-bottom: 2px solid #f5c344;
  border-left: 2px solid #f5c344;
  pointer-events: none;
}
.vault-bracket-br {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 14px;
  height: 14px;
  border-bottom: 2px solid #f5c344;
  border-right: 2px solid #f5c344;
  pointer-events: none;
}

/* Unique VIP Access Keycard Widget */
.vip-keycard {
  background: linear-gradient(135deg, #1a332a 0%, #0c1a15 55%, #162b23 100%);
  border: 1px solid rgba(245, 195, 68, 0.45);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(245, 195, 68, 0.25);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.vip-keycard::before {
  content: '';
  position: absolute;
  top: -60%;
  left: -60%;
  width: 220%;
  height: 220%;
  background: radial-gradient(circle, rgba(245, 195, 68, 0.08) 0%, transparent 65%);
  pointer-events: none;
}
.vip-keycard:hover {
  border-color: #f5c344;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.85), 0 0 25px rgba(245, 195, 68, 0.25);
}
.vip-keycard.card-activated {
  border-color: #10B981 !important;
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.4) !important;
  animation: keycardPulse 0.6s ease-out;
}
@keyframes keycardPulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 195, 68, 0.8); }
  70% { box-shadow: 0 0 0 14px rgba(245, 195, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 195, 68, 0); }
}

.portal-input {
  background-color: rgba(14, 30, 25, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fdfcee;
  transition: all 0.2s ease;
}

.portal-input:focus {
  outline: none;
  border-color: #f5c344;
  box-shadow: 0 0 0 3px rgba(245, 195, 68, 0.22);
  background-color: rgba(14, 30, 25, 1);
}

.portal-input::placeholder {
  color: rgba(253, 252, 238, 0.4);
}

/* ==========================================================================
   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(158, 63, 28, 0.10), 0 6px 18px -3px rgba(31, 54, 48, 0.05) !important;
  color: #1F3630 !important;
}

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

#calculator h3 span {
  color: #9E3F1C !important;
}

#calculator p {
  color: #384641 !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(31, 54, 48, 0.04) !important;
}

#calculator label {
  color: #1F3630 !important;
}

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

#calculator input:focus,
#calculator select:focus {
  border-color: #9E3F1C !important;
  box-shadow: 0 0 0 3px rgba(158, 63, 28, 0.18) !important;
  outline: none !important;
}

#calculator #emi-calc-btn,
#calculator .btn-terracotta-primary {
  background-color: #9E3F1C !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(158, 63, 28, 0.3) !important;
}

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

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

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

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

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

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

/* ==========================================================================
   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 */
  }
}