/* ==========================================================================
   Adhiraj Realty — Global Stylesheet
   ========================================================================== */

:root {
  --forest: #1F3B2C;
  --forest-hover: #14261C;
  --terracotta: var(--forest);
  --terracotta-dark: var(--forest-hover);
  --sand: #F7F3EA;
  --sand-deep: #ECE1CC;
  --light-blue: #E8F1F2;
  --teal: #3E7C82;
  --gold: #C5A059;
  --gold-dark: #A07F43;
  --charcoal: #3D3A35;
  --white: #FFFFFF;

  --font-head: "Cormorant Garamond", serif;
  --font-body: "Manrope", sans-serif;

  --radius-card: 12px;
  --radius-btn: 8px;

  --shadow-soft: 0 10px 30px rgba(90, 62, 40, 0.12);
  --shadow-lift: 0 18px 40px rgba(90, 62, 40, 0.20);

  /* Fallback only — script.js measures the real header and overwrites this,
     so page-hero clearance is always correct even if header height changes
     (font metrics, wrapped nav, browser zoom, etc). */
  --nav-height: 88px;
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

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

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

ul { list-style: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--forest);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h2, .section-heading {
  font-family: var(--font-head);
  font-weight: 600; /* SemiBold */
  font-size: clamp(2.2rem, 4.2vw, 3.5rem); /* 48px - 56px */
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}

h3 {
  font-family: var(--font-head);
  font-weight: 500; /* Medium */
  font-size: clamp(1.6rem, 2.5vw, 2.375rem); /* 32px - 38px */
  line-height: 1.3;
}

p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.5vw, 1.25rem); /* 18px - 20px */
  color: var(--charcoal);
  line-height: 1.65;
}

.section-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 0.9rem;
}

.section-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.6vw, 1.2rem); /* Keep default sub section heading size, hero sub is styled separately */
  color: var(--charcoal);
  max-width: 640px;
  opacity: 0.9;
}

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3.2rem;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.6rem;
}

section { padding: 7.5rem 0; }

@media (max-width: 768px) {
  section { padding: 4.5rem 0; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 2.1rem;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1rem, 1.2vw, 1.125rem); /* 16px - 18px */
  letter-spacing: 0.01em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--terracotta);
  color: var(--white);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover {
  background: var(--terracotta-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-2px);
}

.btn-outline-forest {
  background: transparent;
  color: var(--forest);
  border: 1.5px solid var(--forest);
}
.btn-outline-forest:hover {
  background: var(--forest);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-whatsapp {
  background: #25D366;
  color: var(--white);
  box-shadow: var(--shadow-soft);
}
.btn-whatsapp:hover {
  background: #1EBE5A;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.btn-block { width: 100%; }

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 12px 0;
  background: #FDFDFD !important;
  box-shadow: 0 2px 16px rgba(31, 59, 44, 0.06);
  border-bottom: 1px solid rgba(31, 59, 44, 0.06);
  transition: background-color 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}

.site-header.scrolled {
  background: #FDFDFD !important;
  box-shadow: 0 4px 20px rgba(31, 59, 44, 0.08);
  /* Padding intentionally matches the base rule (12px) — a header that
     changes height on scroll is what caused the earlier hero-text/nav
     overlap bug, since anything below it (see --nav-height / .page-hero)
     is only measured once at load. */
}

/* Pages without a dark hero start solid immediately */
.site-header.solid-default {
  background: #FDFDFD !important;
  box-shadow: 0 2px 16px rgba(31, 59, 44, 0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.6rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.brand:hover {
  transform: translateY(-1px);
}

.site-logo {
  height: 40px !important;
  width: auto !important;
  max-width: 170px !important;
  display: block;
  object-fit: contain;
  transition: height 0.35s ease;
}

.footer-brand .site-logo {
  height: 40px !important;
  width: auto !important;
  max-width: 170px !important;
  background: #FDFDFD;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: nowrap;
}

.nav-links a {
  position: relative;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.9rem, 1.05vw, 0.96rem); /* ~14.5px - 15.5px */
  color: var(--forest);
  padding: 8px 0;
  transition: color 0.3s ease;
}

.site-header.scrolled .nav-links a,
.site-header.solid-default .nav-links a { color: var(--forest); }

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-links a.active { font-weight: 600; }

.nav-links a.nav-cta {
  background: var(--forest);
  color: var(--white) !important;
  padding: 0.55rem 1.3rem !important;
  border-radius: 22px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(31, 59, 44, 0.12);
  transition: all 0.3s ease;
}
.nav-links a.nav-cta::after { display: none; }
.nav-links a.nav-cta:hover {
  background: var(--forest-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(31, 59, 44, 0.2);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 32px;
  z-index: 1100;
}
.nav-toggle span {
  height: 2px;
  width: 100%;
  /* Header is always solid (#FDFDFD) now, never transparent-over-hero, so
     the toggle bars must always be dark — a white default (meant for a
     transparent header state that no longer exists) was invisible. */
  background: var(--forest);
  transition: all 0.3s ease;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1140px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(78vw, 340px);
    background: var(--sand);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 2.4rem;
    gap: 1.6rem;
    transform: translateX(100%);
    transition: transform 0.4s ease;
    box-shadow: -8px 0 30px rgba(0,0,0,0.15);
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { color: var(--forest) !important; font-size: 1.05rem; }
  .nav-links a::after { background: var(--terracotta); }
  .nav-cta {
    margin-top: 1.2rem;
    padding: 0.8rem 2rem !important;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   Hero (parallax)
   ========================================================================== */
.hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  padding-top: calc(var(--nav-height) + 2rem);
  box-sizing: border-box;
  margin-bottom: 4rem;
}

.hero-bg-container {
  position: absolute;
  inset: -10% 0 -10% 0;
  height: 120%;
  z-index: -2;
  will-change: transform;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  /* Slower, calmer crossfade (was 1.5s) — paired with the 8000ms hold in
     script.js so each photo lingers longer before the next slowly appears. */
  transition: opacity 1.8s ease-in-out;
}

.hero-bg.active {
  opacity: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 35, 26, 0.35) 0%, rgba(18, 30, 22, 0.45) 40%, rgba(14, 24, 18, 0.88) 100%);
  z-index: -1;
}

.hero-content {
  /* Wide enough that .hero-tags (an ordinary 100%-width child, no vw
     tricks) can stretch out — see the note on .hero-tags for why the
     old viewport-width breakout was dropped. The heading/subheading
     keep their own tighter max-widths below, so this only changes how
     much room the tags row gets, not their layout. */
  max-width: 1180px;
  padding: 0 1.6rem min(11vh, 7.5rem);
  margin: 0 auto;
  text-align: center;
  width: 100%;
  color: var(--white);
}

.hero .section-eyebrow { color: var(--terracotta); }

.hero h1 {
  font-family: var(--font-head);
  font-weight: 700; /* Bold */
  font-size: clamp(2.8rem, 6.5vw, 5.5rem); /* 72px - 88px */
  color: var(--white);
  margin-bottom: 1.2rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.9);
}

body.lang-mr .hero-mr-headline {
  font-family: 'Rozha One', 'Noto Serif Devanagari', serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.015em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.hero-sub {
  font-family: var(--font-body);
  font-weight: 400; /* Regular */
  font-size: clamp(1.25rem, 2vw, 1.5rem); /* 20px - 24px */
  color: rgba(255, 255, 255, 0.92);
  max-width: 620px;
  margin: 0 auto 0.6rem;
  line-height: 1.6;
}

.hero-tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
  max-width: 560px;
  margin: 0 auto 2.4rem;
  line-height: 1.6;
}

.hero-tags {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.7;
  /* Just an ordinary 100%-wide block inside .hero-content (which is now
     1180px max) — NOT a calc(50% - 50vw) viewport-width breakout. That
     trick assumes .hero-content's midpoint sits exactly on the viewport's
     midpoint, which a regular (non-overlay) scrollbar quietly breaks:
     100vw includes the scrollbar's width but .hero-content's own % width
     doesn't, so the row ends up shifted off-center — more gap on one
     side than the other. Widening the shared parent instead keeps
     everything on plain percentage math, so it can't drift. */
  width: 100%;
  margin-top: -1.6rem;
  margin-bottom: 2.2rem;
}

.hero-tags-row {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 0.4rem;
  width: 100%;
}

.hero-tags-row.lang-en-text { display: flex; }
body.lang-mr .hero-tags-row.lang-mr-text { display: flex; }

.tag-item { position: relative; white-space: nowrap; }

/* Single source of horizontal spacing (margins around the "|" glyph) —
   no column-gap on the row too, otherwise the two stack and the row wraps
   a line early on laptop-width viewports. */
.tag-item:not(:last-child)::after {
  content: "|";
  margin: 0 0.7rem;
  color: rgba(255, 255, 255, 0.3);
}

/* Phones: 8 tags can't fit on one readable line, so let them wrap —
   just keep it to a tidy 2 centered lines instead of a tall 3-4 line
   stack, via a slightly smaller font and tighter gaps than desktop. */
@media (max-width: 768px) {
  .hero-tags {
    font-size: 0.85rem;
    padding: 0 1.2rem;
    margin-top: -0.8rem;
    margin-bottom: 1.6rem;
  }
  .hero-tags-row { row-gap: 0.5rem; }
  .tag-item:not(:last-child)::after { margin: 0 0.5rem; }
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 20px;
  z-index: 2;
}
.scroll-cue::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 8px;
  background: var(--white);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollCue 2s infinite;
}
@keyframes scrollCue {
  0% { opacity: 1; top: 8px; }
  70% { opacity: 0; top: 20px; }
  100% { opacity: 0; top: 8px; }
}

@media (max-width: 768px) {
  /* Centered (not bottom-anchored) — on phones the heading/tagline should
     sit in the upper half with the buttons landing around the vertical
     middle of the hero, not clustered at the very bottom. The explicit
     top padding equal to the real nav height guarantees the content's
     box can never start above/behind it even while centering. */
  .hero { height: auto; min-height: 100vh; padding-top: var(--nav-height); box-sizing: border-box; align-items: center; }
  .hero-content { padding-top: 1rem; padding-bottom: 1rem; }
  /* Also trim the mobile type scale a bit — at the old sizes, the heading
     + subheading + tags + buttons added up to more content height than
     fits one phone screen even with the fix above, making the hero
     unusually tall/scrolly. Smaller here keeps it closer to one screen. */
  .hero h1 { font-size: clamp(2rem, 8vw, 2.6rem); margin-bottom: 1rem; }
  .hero-sub { font-size: 0.95rem; margin-bottom: 1.6rem; }
  /* Parallax JS is disabled below 769px (see script.js); .hero-bg stays
     position: absolute here so mobile gets a simple static background
     instead of the transform-driven parallax. */
}

/* Laptop-height screens (short viewport, wide enough to skip the mobile
   rules above): the longer hero heading/subheading wrap onto enough lines
   at the desktop font sizes that the bottom-anchored .hero-content pushes
   above the padding-top reserved for the fixed header, overlapping it.
   Widen the text columns (fewer wrapped lines) and trim the font sizes so
   the whole block fits under the header again. */
@media (min-width: 769px) and (max-height: 900px) {
  /* .hero-content's max-width stays at the base 1180px here (not capped
     narrower) — .hero-tags needs the full width to keep its 8 items on
     one line, and a wider box only means fewer/shorter wrapped heading
     lines anyway, so it doesn't reopen the header-overlap issue. */
  .hero h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); margin-bottom: 1rem; }
  .hero-sub { font-size: clamp(1.15rem, 1.75vw, 1.35rem); max-width: 780px; margin-bottom: 1.8rem; }
}

/* Inner page hero (shorter, for sub-pages) */
.page-hero {
  position: relative;
  padding: calc(var(--nav-height) + 6rem) 0 5rem;
  background: linear-gradient(160deg, var(--forest) 0%, #14261b 100%);
  color: var(--white);
  text-align: center;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(196, 105, 74, 0.18), transparent 55%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { font-family: var(--font-head); font-weight: 700; color: var(--white); font-size: clamp(2.8rem, 6.5vw, 5.5rem); margin-bottom: 1rem; line-height: 1.1; }
.page-hero .section-sub { font-family: var(--font-body); font-weight: 400; color: rgba(255,255,255,0.85); font-size: clamp(1.25rem, 2vw, 1.5rem); margin: 0 auto; line-height: 1.6; }
.page-hero .section-eyebrow { color: var(--terracotta); }

/* ==========================================================================
   What Konkan Offers — clean split layout: photo card + short copy.
   The image box uses aspect-ratio matched to the actual source photo
   (portrait, ~4:5) so object-fit: cover never has to crop anything — the
   whole picture is always visible, not just a slice of it.
   ========================================================================== */
.offers {
  padding: 6rem 0;
  background: var(--sand);
}

.offers-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 2.5rem;
  align-items: center;
}
.offers-grid + .offers-grid { margin-top: 3rem; }

/* Second (and any alternating) row: markup order is text-then-image, so
   columns are just mirrored (wide column first) to put text on the left
   and the photo on the right — alternates with the row above. Text sits in
   the wider column now, so without this it hugs the far-left edge, leaving
   dead space before the actual gap/image — push it flush against the gap
   (right edge of its column) instead so it visually sits close to the photo. */
.offers-grid-reverse { grid-template-columns: 1.15fr 0.85fr; }
.offers-grid-reverse .offers-text { margin-left: auto; }

.offers-img {
  aspect-ratio: 1123 / 1401;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.offers-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.offers-text { max-width: 520px; }
.offers-text p {
  margin-top: 1.2rem;
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--charcoal);
}

@media (max-width: 900px) {
  .offers-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .offers-grid-reverse .offers-text { margin-left: 0; }
  /* Same aspect-ratio as desktop (matches the source photo exactly) so the
     whole image stays visible on mobile too — just narrower and centered,
     not re-cropped to a different shape. */
  .offers-img { max-width: 420px; margin: 0 auto; }
}

/* Shared image-wrap utility (used by about.html's story image / fallback) */
.img-wrap {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.img-wrap:hover img { transform: scale(1.08); }

/* ==========================================================================
   Stats bar — deep radial-glow background, serif gold numerals, thin
   dividers between stats instead of plain grid gaps (reads as a single
   continuous credibility strip rather than four disconnected boxes).
   ========================================================================== */
.stats {
  position: relative;
  background: radial-gradient(ellipse at top center, #24462F 0%, var(--forest) 50%, #0e1c14 100%);
  color: var(--white);
  padding: 5.5rem 0;
  overflow: hidden;
}
.stats::before {
  /* faint gold vignette for depth, not a hard shape */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(197, 160, 89, 0.16), transparent 60%);
  pointer-events: none;
}

.stats-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}

.stat {
  padding: 0 2rem;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}
.stat:last-child { border-right: none; }

.stat-number {
  font-family: var(--font-body);
  font-style: normal;
  font-size: clamp(2.75rem, 5.5vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.7rem;
}

.stat-label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 768px) {
  .stats { padding: 4rem 0; }
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }
  .stat {
    padding: 0 0 2.2rem;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
  .stat:last-child { border-bottom: none; padding-bottom: 0; }
}

/* ==========================================================================
   Featured Locations — full-photo destination cards.
   Each card is the real place, not a plain text box: a photo, a Roman
   numeral index (editorial touch), and the copy sitting in a gradient at
   the bottom.
   ========================================================================== */
.locations { background: var(--white); }

.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.8rem;
}

.location-card {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  border-radius: var(--radius-card);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-soft);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease;
}
.location-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 24, 18, 0.05) 0%, rgba(12, 20, 15, 0.55) 60%, rgba(10, 17, 13, 0.94) 100%);
}
.location-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift);
}

.location-index {
  position: absolute;
  top: 1.4rem;
  left: 1.6rem;
  z-index: 1;
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 600;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.04em;
}

.location-card-body {
  position: relative;
  z-index: 1;
  padding: 2.2rem 1.8rem;
  color: var(--white);
}
.location-card-body h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.7rem, 2.4vw, 2.1rem);
  color: var(--white);
  margin-bottom: 0.6rem;
}
.location-card-body p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   Vertical overview cards
   ========================================================================== */
.verticals { background: var(--sand-deep); }

.verticals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.vertical-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  padding: 2.6rem;
  color: var(--white);
  box-shadow: var(--shadow-soft);
  transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
  background-size: cover;
  background-position: center;
  /* Slightly dimmed/softened — image is fully visible */
  filter: brightness(0.82);
}

.vertical-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift);
  filter: brightness(1);
}

/* Gradient overlay at the bottom so text is readable */
.vertical-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,28,20,0.10) 0%, rgba(18,28,20,0.68) 100%);
  z-index: 0;
}

.vertical-card-content { position: relative; z-index: 1; }

.vertical-card h3 {
  font-family: var(--font-body);
  font-weight: 600; /* SemiBold */
  font-size: clamp(1.375rem, 1.8vw, 1.5rem); /* 22px - 24px */
  color: var(--white);
  margin-bottom: 0.7rem;
}

.vertical-card p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.5vw, 1.25rem); /* 18px - 20px */
  color: rgba(255,255,255,0.88);
  margin-bottom: 1.4rem;
  max-width: 420px;
}

/* Remove old bg-div styles if any */
.vertical-card-bg { display: none; }

/* "Our Core Services" cards — photo backgrounds removed, replaced with a
   slow-shifting animated gradient per card (distinct color pairing each)
   so they still feel alive without a photo. Large background-size + a
   position keyframe is the standard "moving gradient" trick. */
.vertical-card-animated {
  background-size: 300% 300% !important;
  animation: gradientDrift 16s ease-in-out infinite;
}
.vertical-card-1 { background-image: linear-gradient(135deg, #14261C 0%, var(--forest) 45%, var(--teal) 100%) !important; }
.vertical-card-2 {
  background-image: linear-gradient(135deg, #14261C 0%, var(--forest) 45%, var(--gold-dark) 100%) !important;
  animation-duration: 19s;
}
.vertical-card-3 {
  background-image: linear-gradient(135deg, var(--teal) 0%, var(--forest) 55%, #14261C 100%) !important;
  animation-duration: 22s;
}

@keyframes gradientDrift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .vertical-card-animated { animation: none; }
}

@media (max-width: 900px) {
  .verticals-grid { grid-template-columns: 1fr; }
}

/* "Why Invest in Konkan" — background photo effect fully removed per
   request (totally clear/plain section again). Text colors reverted to
   normal dark charcoal to match, since white text needs the photo behind
   it for contrast and would be unreadable on this plain background.
   Collage photo shadow kept — it's a nice touch regardless of background. */
.why-konkan { position: relative; margin-top: 4rem; }
.why-konkan-collage > div { box-shadow: 0 22px 46px rgba(0, 0, 0, 0.4) !important; }

/* "Why Invest in Konkan" section uses inline grid styles with no responsive
   fallback of its own — override them here so it stacks on smaller screens
   instead of squeezing text and a 3-image collage into two tight columns. */
@media (max-width: 900px) {
  .why-konkan-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .why-konkan-collage { height: 420px !important; }
}
@media (max-width: 480px) {
  .why-konkan-collage { height: 340px !important; grid-template-columns: 1fr 1fr !important; }
}

/* ==========================================================================
   Gallery / Lightbox
   ========================================================================== */
.gallery { background: var(--sand); overflow: hidden; }

/* ---------- 3D coverflow slider ----------
   One active slide centered; previous/next slides peek from behind it at
   an angle; further slides are invisible. Auto-advances, with prev/next
   arrows and dots for manual control. All positioning is class-driven
   (is-active / is-prev / is-next / is-far-*) — script.js recomputes those
   classes on every step and the transition below animates between them. */
.gallery-slider {
  position: relative;
  height: 520px;
  max-width: 1100px;
  margin: 0 auto;
  perspective: 1600px;
}

.gallery-slider-track {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.gallery-slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(420px, 72vw);
  height: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(20, 30, 22, 0.35);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;
  transform: translate(-50%, 0) translateZ(-500px);
}

.gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-slide.is-active {
  transform: translate(-50%, 0) translateX(0) translateZ(0) rotateY(0deg) scale(1);
  opacity: 1;
  z-index: 5;
  pointer-events: auto;
}
.gallery-slide.is-prev {
  transform: translate(-50%, 0) translateX(-58%) translateZ(-180px) rotateY(32deg) scale(0.8);
  opacity: 0.7;
  z-index: 4;
  pointer-events: auto;
}
.gallery-slide.is-next {
  transform: translate(-50%, 0) translateX(58%) translateZ(-180px) rotateY(-32deg) scale(0.8);
  opacity: 0.7;
  z-index: 4;
  pointer-events: auto;
}
.gallery-slide.is-far-prev {
  transform: translate(-50%, 0) translateX(-98%) translateZ(-420px) rotateY(42deg) scale(0.6);
  opacity: 0;
  z-index: 3;
}
.gallery-slide.is-far-next {
  transform: translate(-50%, 0) translateX(98%) translateZ(-420px) rotateY(-42deg) scale(0.6);
  opacity: 0;
  z-index: 3;
}
.gallery-slide.is-hidden {
  opacity: 0;
  z-index: 1;
  transform: translate(-50%, 0) translateZ(-500px) scale(0.5);
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  color: var(--forest);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  z-index: 6;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.gallery-nav:hover { background: var(--forest); color: var(--white); transform: translateY(-50%) scale(1.08); box-shadow: var(--shadow-lift); }
.gallery-nav-prev { left: 0; }
.gallery-nav-next { right: 0; }

.gallery-dots {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.8rem;
}
.gallery-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sand-deep);
  transition: all 0.3s ease;
}
.gallery-dots button.active {
  background: var(--terracotta);
  width: 22px;
  border-radius: 5px;
}

.gallery-note {
  text-align: center;
  margin-top: 0.6rem;
  font-size: 0.88rem;
  color: var(--charcoal);
  opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-slide { transition-duration: 0.3s; }
}

@media (max-width: 768px) {
  .gallery-slider { height: 400px; perspective: 1000px; }
  .gallery-slide { width: min(300px, 78vw); }
  .gallery-slide.is-prev { transform: translate(-50%, 0) translateX(-46%) translateZ(-140px) rotateY(28deg) scale(0.78); }
  .gallery-slide.is-next { transform: translate(-50%, 0) translateX(46%) translateZ(-140px) rotateY(-28deg) scale(0.78); }
  .gallery-nav { width: 40px; height: 40px; }
}

/* Simple vanilla lightbox */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 20, 16, 0.94);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  padding: 2rem;
}
.lightbox-overlay.active { opacity: 1; visibility: visible; }

.lightbox-overlay img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  transform: scale(0.94);
  transition: transform 0.3s ease;
}
.lightbox-overlay.active img { transform: scale(1); }

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(255,255,255,0.1);
  color: var(--white);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  transition: background 0.25s ease;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(255,255,255,0.25); }

.lightbox-close { top: 1.6rem; right: 1.6rem; }
.lightbox-prev { left: 1.6rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1.6rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 600px) {
  .lightbox-prev, .lightbox-next { width: 40px; height: 40px; font-size: 1.1rem; }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials { background: var(--forest); color: var(--white); }
.testimonials .section-eyebrow { color: var(--terracotta); }
.testimonials .section-heading { color: var(--white); }
.testimonials .section-sub { color: rgba(255,255,255,0.8); margin-left: auto; margin-right: auto; }

/* ---------- Calm fade card ----------
   One review visible at a time; the card softly fades and drifts out, swaps
   the image at the midpoint (handled in script.js), then eases back in —
   a quiet, unhurried transition rather than a showy 3D turn. */
.testimonial-flip-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  max-width: 620px;
  margin: 0 auto;
}

.testimonial-flip-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  /* Fixed height (not min-height) — the 6 screenshots have quite different
     aspect ratios, so a height that changed per-review caused the card to
     visibly resize/jump right as each new one appeared, which read as lag
     even though the transition itself was running fine. */
  height: 480px;
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 0.7rem;
  box-shadow: 0 30px 60px rgba(10, 17, 13, 0.4);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  transform: translateY(0) scale(1);
}
.testimonial-flip-card.is-flipping {
  opacity: 0;
  transform: translateY(14px) scale(0.98);
}
.testimonial-flip-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: calc(var(--radius-card) - 4px);
}

.testimonial-nav {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--white);
  color: var(--forest);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.testimonial-nav:hover { background: var(--terracotta); color: var(--white); transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .testimonial-flip-card { transition-duration: 0.25s; }
}

@media (max-width: 640px) {
  .testimonial-flip-wrap { gap: 0.7rem; }
  .testimonial-nav { width: 38px; height: 38px; }
  .testimonial-flip-card { height: 380px; }
}

.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2.4rem;
}
.testimonial-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transition: all 0.3s ease;
}
.testimonial-dots button.active {
  background: var(--terracotta);
  width: 24px;
  border-radius: 5px;
}

.testimonial-placeholder-note {
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  margin-top: 1.5rem;
}

/* ==========================================================================
   Why Choose Us
   ========================================================================== */
.why-us { background: var(--sand); }

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

.why-card {
  text-align: center;
  padding: 2.2rem 1.4rem;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }

.why-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  background: var(--sand-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--terracotta);
}
.why-icon svg { width: 26px; height: 26px; }

.why-card h3 {
  font-family: var(--font-body);
  font-weight: 600; /* SemiBold */
  font-size: clamp(1.375rem, 1.8vw, 1.5rem); /* 22px - 24px */
  margin-bottom: 0.5rem;
}
.why-card p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem; /* 16px */
  color: var(--charcoal);
}

section.locations.container {
  padding-top: 7.5rem;
}

@media (max-width: 900px) {
  .why-grid, .locations-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .why-grid, .locations-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Final CTA band
   ========================================================================== */
.cta-band {
  position: relative;
  background-image: url("../images/cta-band-bg.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 6rem 0;
  text-align: center;
  color: var(--white);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,26,19,0.75) 0%, rgba(12,20,15,0.92) 100%);
}
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 {
  font-family: var(--font-head);
  font-weight: 600; /* Section Heading */
  font-size: clamp(2.2rem, 4.2vw, 3.5rem); /* 48px - 56px */
  color: var(--white);
  margin-bottom: 2rem;
}
.cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .cta-band { background-attachment: scroll; }
}


/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: #16281D;
  color: rgba(255,255,255,0.75);
  padding: 4rem 0 1.6rem;
  font-family: var(--font-body);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.4rem;
  margin-bottom: 2.6rem;
}

.footer-brand .brand {
  color: var(--white);
  margin-bottom: 0.8rem;
}
.footer-brand p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.9375rem, 1.1vw, 1rem); /* 15px - 16px */
  color: rgba(255,255,255,0.6);
  max-width: 280px;
}

.footer-col h4 {
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 500; /* Footer Headings */
  font-size: 1.5rem; /* 24px */
  margin-bottom: 1.1rem;
}

.footer-col ul li { margin-bottom: 0.7rem; }
.footer-col a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.9375rem, 1.1vw, 1rem); /* 15px - 16px */
  color: rgba(255,255,255,0.65);
  transition: color 0.25s ease;
}
.footer-col a:hover { color: var(--terracotta); }

.footer-col address {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.9375rem, 1.1vw, 1rem); /* 15px - 16px */
  font-style: normal;
  color: rgba(255,255,255,0.65);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 1.6rem;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.9375rem, 1.1vw, 1rem); /* 15px - 16px */
  color: rgba(255,255,255,0.5);
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   WhatsApp Floating Button
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  bottom: 26px;
  right: 26px;
  width: 58px;
  height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 2000;
  animation: waPulse 5s ease-in-out infinite;
}
.whatsapp-float svg { width: 30px; height: 30px; fill: var(--white); }

@keyframes waPulse {
  0%, 92%, 100% { transform: scale(1); }
  95% { transform: scale(1.08); }
}

@media (max-width: 480px) {
  .whatsapp-float { width: 52px; height: 52px; bottom: 18px; right: 18px; }
  .whatsapp-float svg { width: 26px; height: 26px; }
}

/* ==========================================================================
   Shared: card grids used on legal / real-estate pages
   ========================================================================== */
.service-block { background: var(--white); }
.service-block:nth-of-type(even) { background: var(--sand); }

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem 2.4rem;
}

.service-list-card {
  background: var(--sand);
  border-radius: var(--radius-card);
  padding: 2.2rem;
  box-shadow: var(--shadow-soft);
}
.service-block:nth-of-type(even) .service-list-card { background: var(--white); }

.service-list-card h3 {
  font-family: var(--font-body);
  font-weight: 600; /* SemiBold */
  font-size: clamp(1.375rem, 1.8vw, 1.5rem); /* 22px - 24px */
  margin-bottom: 1.2rem;
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--terracotta);
  display: inline-block;
}

.service-list-card ul li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.7rem;
  font-family: var(--font-body);
  font-weight: 500; /* Medium */
  font-size: clamp(0.9375rem, 1.1vw, 1rem); /* 15px - 16px */
  color: var(--charcoal);
}
/* Core Services cards (real-estate.html "Buy/Sell/Rent" trio) — icons and
   the descriptive paragraph were dropped, leaving just a title + button,
   so a couple of soft glowing gradient blobs fill the card visually and
   drift outward smoothly on hover instead of sitting static/empty. */
.core-service-card {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.core-service-card::before,
.core-service-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease;
}
.core-service-card::before {
  top: -35%;
  right: -20%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(196, 105, 74, 0.16) 0%, rgba(196, 105, 74, 0) 70%);
}
.core-service-card::after {
  bottom: -40%;
  left: -15%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(31, 59, 44, 0.12) 0%, rgba(31, 59, 44, 0) 70%);
}
.core-service-card:hover::before {
  transform: scale(1.25) translate(-8%, 8%);
}
.core-service-card:hover::after {
  transform: scale(1.25) translate(8%, -8%);
}
.core-service-card > * {
  position: relative;
  z-index: 1;
}

/* Buy/Sell/Rent trio specifically — dark forest-green gradient with gold
   accents, matching the site's other "premium" dark sections (hero, CTA
   band) instead of the generic white service-card look. (The Property
   Categories cards below used to share .core-service-card too, but now
   use their own photo-led .photo-category-card style instead — see
   below — so this stays scoped to .core-services-grid only.) */
.core-services-grid .core-service-card {
  background: linear-gradient(160deg, var(--forest) 0%, var(--forest-hover) 100%) !important;
  border-color: rgba(197, 160, 89, 0.25) !important;
}
.core-services-grid .core-service-card h3 {
  color: var(--white);
  border-bottom-color: var(--gold);
}
.core-services-grid .core-service-card:hover {
  border-color: var(--gold) !important;
}
.core-services-grid .core-service-card::before {
  background: radial-gradient(circle, rgba(197, 160, 89, 0.28) 0%, rgba(197, 160, 89, 0) 70%);
}
.core-services-grid .core-service-card::after {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
}

/* Property Categories cards — photo on top, name below. The card itself
   still gets the shared .service-list-card shadow/hover-lift, just with
   padding zeroed out so the photo can run edge-to-edge to the rounded
   corners; the title keeps its own padded strip underneath. */
.photo-category-card {
  /* real-estate.html's own inline <style> sets .service-list-card to
     display: flex with h3 { align-self: flex-start }, which loads after
     this file and wins ties — override display so h3 falls back to
     normal block flow and centers via text-align below. */
  display: block !important;
  padding: 0 !important;
  overflow: hidden;
  text-align: center;
}
.photo-category-card .photo-category-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.photo-category-card .photo-category-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.photo-category-card:hover .photo-category-img img {
  transform: scale(1.07);
}
.photo-category-card h3 {
  margin: 1.4rem 1.6rem 1.6rem;
}

.service-list-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
}

@media (max-width: 700px) {
  .service-grid { grid-template-columns: 1fr; }
}

.services-full-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.6rem;
}

/* Fixed 2-up layout (used on facility-services.html now that it's down
   to 4 cards) — auto-fit would happily pack 3-per-row on wide screens
   instead of the intended 2-over-2. */
.services-grid-2col {
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
  margin: 0 auto;
}
@media (max-width: 700px) {
  .services-grid-2col { grid-template-columns: 1fr; max-width: 420px; }
}

/* Process strip */
.process-strip {
  background: var(--sand-deep);
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  counter-reset: step;
}
.process-step {
  text-align: center;
  position: relative;
  padding: 1.8rem 1.2rem;
}
.process-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.process-step h4 {
  font-family: var(--font-body);
  font-weight: 600; /* SemiBold */
  font-size: 1.125rem; /* 18px */
  margin-bottom: 0.4rem;
}
.process-step p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem; /* 16px */
  color: var(--charcoal);
}

.process-arrow {
  display: none;
}

@media (min-width: 769px) {
  .process-grid { position: relative; }
}
@media (max-width: 768px) {
  .process-grid { grid-template-columns: 1fr; gap: 0.8rem; }
}

.mid-cta {
  text-align: center;
  background: var(--forest);
  color: var(--white);
  padding: 4.5rem 0;
}
.mid-cta h2 {
  font-family: var(--font-head);
  font-weight: 600; /* H2 Section Heading */
  font-size: clamp(2.2rem, 4.2vw, 3.5rem); /* 48px - 56px */
  color: var(--white);
  margin-bottom: 1.8rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Rental / facility management page bits */
.icon-list-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 1.6rem;
  box-shadow: var(--shadow-soft);
}
.icon-list-card .dot {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sand-deep);
  color: var(--terracotta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-body);
}
.icon-list-card p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem; /* 16px Small Description */
}
.icon-list-card h4 {
  font-family: var(--font-body);
  font-weight: 600; /* Card Title */
  font-size: clamp(1.375rem, 1.8vw, 1.5rem); /* 22px - 24px */
  margin-bottom: 0.3rem;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
@media (max-width: 700px) {
  .two-col { grid-template-columns: 1fr; }
}

.facility-panel {
  background: var(--teal);
  color: var(--white);
  border-radius: var(--radius-card);
  padding: 3rem;
  box-shadow: var(--shadow-soft);
}
.facility-panel h3 {
  font-family: var(--font-head);
  font-weight: 500; /* H3 Sub Heading */
  font-size: clamp(1.6rem, 2.5vw, 2.375rem); /* 32px - 38px */
  color: var(--white);
  margin-bottom: 0.6rem;
}
.facility-panel .lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.5vw, 1.25rem); /* 18px - 20px Body Paragraph */
  color: rgba(255,255,255,0.9);
  max-width: 640px;
  margin-bottom: 1.8rem;
}
.facility-panel ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem 2rem;
}
.facility-panel ul li {
  position: relative;
  padding-left: 1.3rem;
  font-family: var(--font-body);
  font-weight: 500; /* Property Features */
  font-size: clamp(0.9375rem, 1.1vw, 1rem); /* 15px - 16px */
}
.facility-panel ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white);
}
@media (max-width: 600px) {
  .facility-panel { padding: 2rem 1.4rem; }
  .facility-panel ul { grid-template-columns: 1fr; }
}

/* Property listing cards */
.property-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.8rem;
}
.property-card {
  background: var(--white);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.property-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.property-card .prop-img { height: 220px; overflow: hidden; }
.property-card .prop-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.property-card:hover .prop-img img { transform: scale(1.08); }
.property-card-body { padding: 1.5rem; }
.property-card-body h4 {
  font-family: var(--font-body);
  font-weight: 600; /* Card Title */
  font-size: clamp(1.375rem, 1.8vw, 1.5rem); /* 22px - 24px */
  margin-bottom: 0.9rem;
}

.properties-empty {
  text-align: center;
  padding: 3rem 1.6rem;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  max-width: 620px;
  margin: 0 auto;
}
.properties-empty p {
  margin-top: 0.6rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem; /* 16px Small Description */
}

/* Image fallback placeholder (used when a named photo is missing) */
.img-fallback {
  width: 100%;
  height: 100%;
  min-height: 320px;
  background: linear-gradient(135deg, var(--forest) 0%, var(--teal) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(255,255,255,0.85);
  border-radius: var(--radius-card);
  padding: 2rem;
}
.img-fallback span {
  font-family: var(--font-head);
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   About page
   ========================================================================== */
.about-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.about-story .img-wrap { min-height: 460px; }
.about-story .img-wrap img { object-fit: cover; }
.about-story h1 {
  font-family: var(--font-head);
  font-weight: 700; /* Hero Title */
  font-size: clamp(2.8rem, 6.5vw, 5.5rem); /* 72px - 88px */
  margin-bottom: 1.4rem;
  line-height: 1.1;
}
.about-story p { margin-bottom: 1.1rem; }
.mission-line {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-style: italic;
  color: var(--teal);
  border-left: 3px solid var(--terracotta);
  padding-left: 1.2rem;
  margin-top: 1.6rem;
}
@media (max-width: 900px) {
  .about-story { grid-template-columns: 1fr; }
  .about-story .img-wrap { order: -1; min-height: 320px; }
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
}
.value-card {
  text-align: center;
  padding: 2rem 1.2rem;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}
.value-card h3 {
  font-family: var(--font-body);
  font-weight: 600; /* Card Title */
  font-size: clamp(1.375rem, 1.8vw, 1.5rem); /* 22px - 24px */
  margin-bottom: 0.5rem;
}
.value-card p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem; /* 16px Small Description */
}
@media (max-width: 900px) {
  .values-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .values-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: stretch;
}

.contact-form {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 2.4rem;
  box-shadow: var(--shadow-soft);
}

.form-group { margin-bottom: 1.3rem; }
.form-group label {
  display: block;
  font-family: var(--font-body);
  font-size: 1rem; /* 16px Forms */
  font-weight: 600;
  color: var(--forest);
  margin-bottom: 0.45rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid #DDD3C0;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 1rem; /* 16px Forms */
  font-weight: 400; /* Regular */
  background: var(--sand);
  color: var(--charcoal);
  transition: border-color 0.25s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--terracotta);
}
.form-group textarea { resize: vertical; min-height: 120px; }

.contact-side {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.contact-card {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 1.8rem;
  box-shadow: var(--shadow-soft);
}
.contact-card h3 {
  font-family: var(--font-body);
  font-weight: 600; /* Card Title */
  font-size: clamp(1.375rem, 1.8vw, 1.5rem); /* 22px - 24px */
  margin-bottom: 0.9rem;
}
.contact-card address, .contact-card p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem; /* 16px Small Description */
  font-style: normal;
  margin-bottom: 0.5rem;
}
.contact-card a.phone-link { color: var(--terracotta); font-weight: 600; }

.whatsapp-panel {
  background: #1EBE5A;
  background: linear-gradient(135deg, #25D366, #1a9e52);
  border-radius: var(--radius-card);
  padding: 2rem;
  color: var(--white);
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.whatsapp-panel h3 {
  font-family: var(--font-body);
  font-weight: 600; /* Card Title */
  font-size: clamp(1.375rem, 1.8vw, 1.5rem); /* 22px - 24px */
  color: var(--white);
  margin-bottom: 0.6rem;
}
.whatsapp-panel p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem; /* 16px Small Description */
  margin-bottom: 1.3rem;
  color: rgba(255,255,255,0.92);
}
.whatsapp-panel .btn {
  background: var(--white);
  color: #1EBE5A;
}
.whatsapp-panel .btn:hover { background: rgba(255,255,255,0.9); transform: translateY(-2px); }

.map-wrap {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  margin-top: 3.5rem;
}
.map-wrap iframe { width: 100%; height: 420px; border: 0; display: block; }

@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (max-width: 600px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   AOS override tuning (kept subtle, per brief 150-300ms baseline feel)
   ========================================================================== */
[data-aos] { transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !important; }

/* ==========================================================================
   Responsive base type scale & customizations
   ========================================================================== */
@media (max-width: 480px) {
  .verticals-grid, .offers-grid { gap: 1.6rem; }
}

/* ---------- Premium Listing Card Tags ---------- */
.prop-tag {
  position: absolute;
  padding: 0.4rem 0.9rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px;
  color: var(--white);
  backdrop-filter: blur(8px);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.price-tag {
  top: 14px;
  left: 14px;
  background: rgba(196, 105, 74, 0.92); /* Terracotta */
  border-left: 3px solid var(--white);
}
.size-tag {
  bottom: 14px;
  right: 14px;
  background: rgba(31, 59, 44, 0.88); /* Forest */
}

/* ---------- Interactive Toast Notifications ---------- */
.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 380px;
  width: calc(100vw - 48px);
}

.toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-left: 4px solid var(--teal);
  box-shadow: 0 10px 30px rgba(31, 59, 44, 0.15), 0 1px 3px rgba(0,0,0,0.02);
  padding: 1rem 1.4rem;
  border-radius: var(--radius-btn);
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1), opacity 0.4s ease;
}

.toast.toast-success {
  border-left-color: #25D366;
}

.toast.show {
  transform: translateX(0);
  opacity: 1;
}

.toast.hide {
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.3s ease;
}

.toast-message {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--forest);
  line-height: 1.4;
}

.toast-close {
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--charcoal);
  opacity: 0.6;
  transition: opacity 0.2s;
  line-height: 1;
  padding: 0 4px;
}

.toast-close:hover {
  opacity: 1;
  color: var(--terracotta);
}

/* ---------- Premium Hero Entrance Animations ---------- */
@keyframes scaleBgIn {
  from {
    transform: scale(1.15);
    opacity: 0.9;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fadeInEyebrow {
  from {
    opacity: 0;
    letter-spacing: 0.3em;
    transform: translateY(-15px);
  }
  to {
    opacity: 1;
    letter-spacing: 0.18em;
    transform: translateY(0);
  }
}

@keyframes fadeInUpReveal {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-animate-bg {
  animation: scaleBgIn 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-animate-eyebrow {
  opacity: 0;
  animation: fadeInEyebrow 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.hero-animate-title {
  opacity: 0;
  transform: scale(0.96) translateY(18px);
  filter: blur(6px);
  animation: heroTitleReveal 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

/* Smooth first-load reveal for the whole headline as one unit — a gentle
   rise + scale-up + sharpen, no bounce/overshoot. (The recurring word swap
   between Coast/Hills/Heritage keeps its own separate "burst" pop — see
   .hero-fade-word below — this is only the once-per-page-load entrance.) */
@keyframes heroTitleReveal {
  0%   { opacity: 0; transform: scale(0.96) translateY(18px); filter: blur(6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

.hero-animate-sub {
  opacity: 0;
  animation: fadeInUpReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
}

.hero-animate-actions {
  opacity: 0;
  animation: fadeInUpReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}

/* ---------- Ultra Premium Card Customizations ---------- */
/* .location-card intentionally excluded — it's now a full-photo card
   (see "Featured Locations" above) and these white-background/border
   rules would fight that design. */
.why-card,
.value-card,
.service-list-card,
.icon-list-card {
  background: var(--white) !important;
  border: 1px solid rgba(196, 105, 74, 0.08) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease !important;
  box-shadow: 0 8px 30px rgba(90, 62, 40, 0.05) !important;
}

.why-card:hover,
.value-card:hover,
.service-list-card:hover,
.icon-list-card:hover {
  transform: translateY(-8px) !important;
  border-color: var(--terracotta) !important;
  box-shadow: 0 20px 40px rgba(31, 59, 44, 0.08) !important;
}

/* Primary Button Premium Polish */
.btn-primary {
  background: linear-gradient(135deg, var(--terracotta) 0%, var(--terracotta-dark) 100%) !important;
  border: none !important;
}

/* ---------- Hero word fade (Coast / Hills / Heritage) ----------
   Swapped from a typewriter (type/delete per letter) to a slow crossfade,
   synced with the hero background slideshow's 5000ms interval in script.js.
   --hero-word-fade must match HERO_WORD_FADE_MS there. */
:root { --hero-word-fade: 900ms; }
.hero-fade-word {
  display: inline-block;
  /* Plain crossfade — no scale/shift/blur, just a clean smooth appearance. */
  transition: opacity var(--hero-word-fade) ease;
}
.hero-fade-word.is-fading {
  opacity: 0;
}

#roots-typewriter:empty::before {
  content: "\00a0";
}

/* ==========================================================================
   Language Translation & Toggle
   ========================================================================== */
/* Hide Marathi elements by default in English mode */
body:not(.lang-mr) .lang-mr {
  display: none !important;
}

/* Hide English elements when Marathi mode is active */
body.lang-mr .lang-en {
  display: none !important;
}

body.lang-mr {
  font-family: 'Hind', var(--font-body) !important;
  letter-spacing: 0;
  line-height: 1.75;
}

body.lang-mr h1,
body.lang-mr h2,
body.lang-mr h3,
body.lang-mr h4,
body.lang-mr .brand {
  font-family: 'Noto Serif Devanagari', var(--font-head) !important;
  font-weight: 600 !important;
  letter-spacing: 0;
}

body.lang-mr .brand .brand-sub {
  font-family: 'Hind', var(--font-body) !important;
  font-weight: 500 !important;
}

/* Language Switch component */
.lang-switch {
  display: inline-flex;
  position: relative;
  background: rgba(31, 59, 44, 0.1);
  border-radius: 20px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  align-items: center;
  width: 76px;
  height: 32px;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}

.site-header.scrolled .lang-switch,
.site-header.solid-default .lang-switch {
  background: rgba(92, 88, 80, 0.08);
  border-color: rgba(31, 59, 44, 0.15);
}

.lang-switch .lang-btn {
  flex: 1;
  background: transparent;
  border: none;
  font-family: 'Hind', var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  transition: color 0.3s ease;
  line-height: 28px;
}

.site-header.scrolled .lang-switch .lang-btn,
.site-header.solid-default .lang-switch .lang-btn {
  color: var(--forest);
}

/* sliding pill bg */
.lang-switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  background: var(--terracotta);
  border-radius: 18px;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 1;
}

body.lang-mr .lang-switch::before {
  transform: translateX(100%);
}

.lang-switch .lang-btn.active {
  color: var(--white) !important;
}

@media (max-width: 1140px) {
  .nav-links .lang-switch {
    margin-top: 1rem;
    align-self: flex-start;
    background: rgba(92, 88, 80, 0.08);
    border-color: rgba(31, 59, 44, 0.15);
  }
  .nav-links .lang-switch .lang-btn {
    color: var(--forest);
  }
  .nav-links .lang-switch .lang-btn.active {
    color: var(--white) !important;
  }
}

/* ==========================================================================
   Global Bilingual (EN / MR) Visibility Rules
   ========================================================================== */

/* By default show English, hide Marathi */
.lang-mr-text { display: none; }
.lang-en-text { display: inline; }

/* When body has lang-mr class, flip visibility */
body.lang-mr .lang-en-text { display: none; }
body.lang-mr .lang-mr-text { display: inline; }

/* Block-level variants for headings, paragraphs, divs */
.lang-mr-block { display: none; }
.lang-en-block { display: block; }

body.lang-mr .lang-en-block { display: none; }
body.lang-mr .lang-mr-block { display: block; }

/* Logo / Brand — always stays in English, never changes */
.brand { display: flex !important; }

/* Page Language Selection Bar */
.page-lang-toggle-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 0;
  background: var(--sand-deep);
  border-bottom: 1px solid rgba(31, 59, 44, 0.08);
}

.page-lang-toggle-bar .lang-label {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--forest);
}

.page-lang-toggle-bar .lang-switch {
  background: rgba(31, 59, 44, 0.08);
  border-color: rgba(31, 59, 44, 0.15);
}

.page-lang-toggle-bar .lang-switch .lang-btn {
  color: var(--forest);
}

.page-lang-toggle-bar .lang-switch .lang-btn.active {
  color: var(--white) !important;
}


/* ==========================================================================
   Blog Styles (Placeholders)
   ========================================================================== */
.blog-title,
.blog-post h2 {
  font-family: var(--font-head);
  font-weight: 600; /* SemiBold */
  font-size: clamp(2.125rem, 3.5vw, 2.625rem); /* 34px - 42px */
  line-height: 1.25;
}
.blog-content,
.blog-post-content {
  font-family: var(--font-body);
  font-weight: 400; /* Regular */
  font-size: 1.125rem; /* 18px */
  line-height: 1.7;
}