/* ============================================================
   Ooty Genuine Realtors — Brand Stylesheet
   Palette drawn from the brand mark: deep tea-estate green,
   antique gold, misty cream. Typography pairs a heritage serif
   (bungalow / colonial-era real estate) with a clean utility
   sans, plus the brand's own script for the tagline voice.
   ============================================================ */

:root{
  --green-deep:   #0a2b1e;   /* darkest panels / footer */
  --green:        #0f3d2b;   /* primary brand green */
  --green-mid:    #14513a;   /* hover / secondary panels */
  --gold:         #c9a227;   /* primary accent */
  --gold-light:   #e6c766;   /* highlight / hover accent */
  --cream:        #f8f6ee;   /* page background */
  --cream-deep:   #efeadb;   /* card / section background */
  --ink:          #1a2b22;   /* body text on cream */
  --ink-soft:     #4b5a51;   /* secondary text */
  --line:         #d9d2bd;   /* hairline borders on cream */
}

@font-face{ /* fallback safety - system stack used below, no external font-face needed */ }

html{ scroll-behavior:smooth; }

body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Work Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

h1,h2,h3,h4,.font-display{
  font-family:'Playfair Display', Georgia, 'Times New Roman', serif;
}

.font-script{
  font-family:'Dancing Script', cursive;
}

.text-gold{ color:var(--gold); }
.bg-gold{ background:var(--gold); }
.bg-green{ background:var(--green); }
.bg-green-deep{ background:var(--green-deep); }
.text-green{ color:var(--green); }
.border-gold{ border-color:var(--gold); }

/* Eyebrow label style — small caps, gold, wide tracking. Used to
   name the section's role, not to decorate it. */
.eyebrow{
  font-family:'Work Sans', sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.75rem;
  font-weight:600;
  color:var(--gold);
}

/* ---------- Signature element: Contour Lines -----------------
   The Nilgiris are defined by elevation — Ooty, Coonoor and
   Kotagiri sit at three different altitudes on the same range.
   These wavy hairline "contour" dividers stand in for the
   generic straight rule, and the same contour motif reappears
   as an elevation badge on every property card. */
.contour-divider{
  width:100%;
  line-height:0;
  display:block;
}
.contour-divider svg{ width:100%; height:auto; display:block; }

.elevation-badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:var(--green-deep);
  color:var(--gold-light);
  border:1px solid rgba(201,162,39,.4);
  border-radius:999px;
  padding:.25rem .7rem;
  font-size:.72rem;
  letter-spacing:.04em;
  font-weight:600;
}

/* Navigation underline reveal */
.nav-link{
  position:relative;
  padding-bottom:2px;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  width:0; height:1px;
  background:var(--gold);
  transition:width .25s ease;
}
.nav-link:hover::after,
.nav-link.active::after{ width:100%; }
.nav-link.active{ color:var(--gold-light); }

/* Buttons */
.btn-gold{
  background:var(--gold);
  color:var(--green-deep);
  font-weight:600;
  transition:background .2s ease, transform .2s ease;
}
.btn-gold:hover{ background:var(--gold-light); transform:translateY(-1px); }

.btn-outline{
  border:1px solid var(--gold);
  color:var(--gold-light);
  transition:background .2s ease, color .2s ease;
}
.btn-outline:hover{ background:var(--gold); color:var(--green-deep); }

/* Property cards */
.property-card{
  background:#fff;
  border:1px solid var(--line);
  transition:transform .25s ease, box-shadow .25s ease;
}
.property-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px -18px rgba(10,43,30,.35);
}

/* WhatsApp floating button */
.whatsapp-float{
  position:fixed;
  right:1.25rem;
  bottom:1.25rem;
  z-index:50;
  box-shadow:0 10px 25px -8px rgba(0,0,0,.4);
  animation:wa-pulse 2.6s ease-in-out infinite;
}
@keyframes wa-pulse{
  0%,100%{ box-shadow:0 10px 25px -8px rgba(0,0,0,.4); }
  50%{ box-shadow:0 10px 30px -6px rgba(37,211,102,.55); }
}

@media (prefers-reduced-motion: reduce){
  .whatsapp-float{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* Skip link for keyboard users */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--gold); color:var(--green-deep);
  padding:.6rem 1rem; z-index:100; border-radius:0 0 .4rem 0;
}
.skip-link:focus{ left:0; top:0; }

/* Visible focus states */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

/* Utility: hero image scrim for legibility over photography */
.hero-scrim{
  background:linear-gradient(180deg, rgba(10,30,20,.55) 0%, rgba(10,30,20,.72) 55%, rgba(10,30,20,.92) 100%);
}

.mobile-menu{ transition:max-height .3s ease; overflow:hidden; }