/* ==========================================================================
   Shades of Green — Komu Infra
   Palette from the project's own materials: fired brick façade, teak louvres,
   the brochure's bottle green, warm lime-washed stone.
   Type: Fraunces (display) / Inter (body) / IBM Plex Mono (measurements).
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  /* forest — the dominant ground */
  --forest-950: #071510;
  --forest-900: #0E2419;
  --forest-800: #16352A;
  --forest-700: #1E4534;
  --forest-500: #2F5B48;
  --forest-400: #5E8874;  /* 4.7:1 on forest-950 — lowest safe tint for text */
  --forest-300: #86AC98;
  --forest-200: #B4CDBE;

  /* kiln — fired brick, the accent */
  --kiln-700: #7E351C;
  --kiln-600: #9A4426;
  --kiln-500: #B4552F;
  --kiln-300: #D98B63;
  --kiln-100: #EFD3C1;

  /* stone — the relief */
  --stone-50:  #FBF8F3;
  --stone-100: #F3EEE4;
  --stone-200: #E7DFD0;
  --stone-300: #D6CBB6;
  --stone-500: #A99D86;  /* decorative only — too light for text on stone */
  --stone-600: #7A6F5C;  /* 4.7:1 on stone-50 — use for small print */

  --ink:      #1B1915;
  --ink-soft: #4E4739;

  --ff-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --ff-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 78rem;
  --gut: clamp(1.15rem, 4.5vw, 3.5rem);
  --sec-y: clamp(4.5rem, 9vw, 9rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --head-h: 4.75rem;

  /* corner radii — softened throughout, never fully pill except on chips */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;

  --whatsapp: #0F7C3A;       /* 5.3:1 with white — brand #1FA855 was 3.1:1 */
  --whatsapp-dark: #0B5F2C;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
  font-family: var(--ff-body);
  font-size: 1rem;
  font-weight: 350;
  line-height: 1.72;
  color: var(--ink);
  background: var(--stone-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--kiln-500);
  outline-offset: 3px;
  border-radius: 2px;
}
.section-forest :focus-visible,
.exclusivity :focus-visible,
.site-foot :focus-visible,
.lightbox :focus-visible { outline-color: var(--kiln-300); }

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -110%);
  z-index: 200; background: var(--forest-900); color: var(--stone-50);
  padding: .7rem 1.2rem; font-size: .85rem; letter-spacing: .04em;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }
.seo-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- shared type ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.mono {
  font-family: var(--ff-mono);
  font-weight: 400;
  font-variant-ligatures: none;
  font-size: .82em;
  letter-spacing: 0;
}

.eyebrow {
  font-family: var(--ff-mono);
  font-size: .7rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--kiln-600);
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1.5rem;
}
.eyebrow::before {
  content: ""; width: 2rem; height: 1px; flex: none;
  background: currentColor; opacity: .5;
}
.eyebrow-light { color: var(--kiln-300); }

.sec-title {
  font-family: var(--ff-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(2rem, 1.25rem + 3.1vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
}
.sec-title em { font-style: italic; font-weight: 300; }

.sec-lead {
  font-size: clamp(1.02rem, .97rem + .3vw, 1.2rem);
  line-height: 1.68;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-top: 1.4rem;
}

.sec-head { max-width: 60rem; margin-bottom: clamp(2.75rem, 5vw, 4.5rem); }
.sec-head-row {
  max-width: none;
  display: grid;
  gap: clamp(1.4rem, 3vw, 4rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
}
.sec-head-row .sec-lead { margin-top: 0; }

.note {
  font-family: var(--ff-mono);
  font-size: .74rem;
  letter-spacing: .02em;
  color: var(--stone-600);
  margin-top: 1.6rem;
}
.note-light { color: var(--forest-300); }
.ph { font-style: normal; opacity: .62; }

.ic { width: 1.15rem; height: 1.15rem; flex: none; }
.ic-lg { width: 1.6rem; height: 1.6rem; }

/* ---------- sections ---------- */
.section { padding-block: var(--sec-y); }
.section-stone { background: var(--stone-50); color: var(--ink); }
.section-forest {
  background: var(--forest-900);
  color: var(--stone-100);
  background-image:
    radial-gradient(120% 80% at 85% -10%, rgba(47,91,72,.55), transparent 60%);
}
.section-forest .sec-lead { color: var(--forest-200); }
.section-forest .sec-title { color: var(--stone-50); }

/* ---------- buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-size: .88rem; font-weight: 500; letter-spacing: .02em;
  padding: .95rem 1.7rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color .24s var(--ease), color .24s var(--ease),
              border-color .24s var(--ease), transform .18s var(--ease),
              box-shadow .24s var(--ease);
}
.btn .ic { width: 1rem; height: 1rem; transition: transform .3s var(--ease); }
.btn:hover .ic { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(.99); }

.btn-solid {
  background: var(--kiln-600); color: #fff;
  box-shadow: 0 6px 18px -8px rgba(122,45,20,.85);
}
.btn-solid:hover {
  background: var(--kiln-500);
  box-shadow: 0 10px 26px -10px rgba(122,45,20,.95);
  transform: translateY(-1px);
}
.btn-solid:active { box-shadow: 0 4px 12px -8px rgba(122,45,20,.9); }

.btn-ghost { border-color: currentColor; color: inherit; }
.btn-ghost:hover { background: rgba(255,255,255,.12); transform: translateY(-1px); }

.btn-line {
  border-color: var(--stone-300); color: var(--ink); background: #fff;
}
.btn-line:hover { border-color: var(--kiln-500); color: var(--kiln-700); transform: translateY(-1px); }

.btn-call {
  background: var(--forest-700); color: #fff;
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.8);
}
.btn-call:hover { background: var(--forest-500); transform: translateY(-1px); }

.btn-wa {
  background: var(--whatsapp); color: #fff;
  box-shadow: 0 6px 18px -9px rgba(23,130,63,.9);
}
.btn-wa:hover { background: var(--whatsapp-dark); transform: translateY(-1px); }
.btn-wa .ic, .btn-call .ic { transition: transform .3s var(--ease); }
.btn-wa:hover .ic, .btn-call:hover .ic { transform: scale(1.08); }

.btn-sm { padding: .62rem 1.2rem; font-size: .8rem; }
.btn-block { width: 100%; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-head {
  position: fixed; top: .8rem; left: 50%; z-index: 100;
  width: min(calc(100% - (var(--gut) * 2)), var(--wrap));
  transform: translateX(-50%);
  background: rgba(11, 30, 22, .9);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  backdrop-filter: saturate(1.3) blur(14px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-pill);
  box-shadow: 0 16px 42px -30px rgba(0,0,0,.72), inset 0 1px rgba(255,255,255,.08);
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease),
              backdrop-filter .35s var(--ease);
}
.head-inner {
  max-width: none; margin-inline: auto; padding-inline: clamp(1.1rem, 2.2vw, 1.6rem);
  height: 3.85rem;
  display: grid; align-items: center; gap: clamp(.75rem, 1.5vw, 1.5rem);
  grid-template-columns: auto 1fr auto;
  transition: height .35s var(--ease);
}
.site-head.is-stuck {
  background: rgba(11, 30, 22, .9);
  backdrop-filter: saturate(1.3) blur(14px);
  box-shadow: 0 16px 42px -30px rgba(0,0,0,.72), inset 0 1px rgba(255,255,255,.08);
}
.site-head.is-stuck .head-inner { height: 3.85rem; }

.wordmark {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; color: var(--stone-50);
  min-width: 0;
}
.wordmark-mark {
  width: 2.4rem; height: 1.64rem; flex: none;
  transition: transform .4s var(--ease);
}
.wordmark:hover .wordmark-mark { transform: translateX(2px) scale(1.05); }
.wordmark-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.wordmark-name {
  font-family: var(--ff-display); font-weight: 400;
  font-size: 1.12rem; letter-spacing: 0;
}
.wordmark-sub {
  font-family: var(--ff-mono); font-size: .58rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: #D8E4DC;
}

.head-nav { display: flex; gap: clamp(.65rem, 1.35vw, 1.35rem); justify-self: center; align-items: center; }
.head-nav a {
  font-size: .84rem; font-weight: 400; letter-spacing: .015em; text-decoration: none;
  color: var(--stone-100); opacity: .9; padding: .35rem 0;
  position: relative; transition: opacity .2s var(--ease);
}
.head-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--kiln-300); transition: width .3s var(--ease);
}
.head-nav a:hover { opacity: 1; }
.head-nav a:hover::after,
.head-nav a.is-active::after { width: 100%; }
.head-nav a.is-active { opacity: 1; }

.head-actions { display: flex; align-items: center; gap: .6rem; justify-self: end; }
.head-phone {
  display: inline-flex; align-items: center; gap: .42rem;
  color: var(--stone-50); text-decoration: none;
  font-family: var(--ff-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .02em;
  padding: .52rem .85rem;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.08);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.head-phone:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(217,139,99,.6);
}
.head-phone .ic { width: .9rem; height: .9rem; color: var(--kiln-300); }
.head-actions .btn-solid {
  background: var(--kiln-600); color: #fff;
  box-shadow: 0 6px 18px -8px rgba(122,45,20,.85);
  text-transform: none;
  letter-spacing: .02em;
}
.head-actions .btn-solid:hover { background: var(--kiln-500); }
.nav-toggle { display: none; color: var(--stone-50); padding: .5rem; }
.mobile-head-actions,
.mobile-head-phone,
.mobile-head-enquire { display: none; }

@media (max-width: 62rem) {
  .site-head { top: .65rem; border-radius: 20px; }
  .head-inner { display: flex; }
  .nav-toggle { display: block; }
  .head-nav {
    position: fixed; inset: 0 0 auto; top: 0;
    flex-direction: column; gap: 0;
    background: var(--forest-950);
    padding: calc(var(--head-h) + 1rem) var(--gut) 2rem;
    transform: translateY(-100%);
    transition: transform .45s var(--ease);
    box-shadow: 0 20px 40px rgba(0,0,0,.35);
  }
  .head-nav a {
    font-family: var(--ff-display); font-size: 1.5rem;
    padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.09);
    opacity: 1;
  }
  .head-nav a::after { display: none; }
  .head-nav.is-open { transform: translateY(0); }
  .site-head:has(.head-nav.is-open) { background: var(--forest-950); }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--head-h) + 1.5rem) var(--gut) 1.5rem;
  color: var(--stone-50);
  overflow: hidden;
  background: #f5efe3;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%;
  filter: brightness(1.18) saturate(1.08) contrast(1.02);
  filter: brightness(1.02) saturate(1.04) contrast(1.02);
  animation: heroIn 2.4s var(--ease) both;
}
/* Luminous left gradient wash ensures all hero text is crisp and readable against background */
/* Clean, natural photo presentation with zero white glare */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(251,248,243,.92) 0%, rgba(251,248,243,.84) 38%, rgba(251,248,243,.42) 60%, rgba(251,248,243,0) 82%),
    linear-gradient(to bottom, rgba(251,248,243,.5) 0%, rgba(251,248,243,0) 25%, rgba(13,38,27,.22) 100%);
  background: linear-gradient(to bottom, transparent 80%, rgba(7,21,16,.28) 100%);
  pointer-events: none;
}
@keyframes heroIn { from { transform: scale(1.07); } to { transform: scale(1); } }

.hero-grid {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23rem;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
  padding-block: 1.5rem 2.75rem;
}
.hero-body {
  min-width: 0; position: relative;
  transform: translateY(-3.75rem);
}
.hero-body::before { display: none; }
.hero-body {
  color: #0E2419;
  text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 10px 24px rgba(255,246,232,.45);
  text-shadow: none;
}
.hero-rera { text-shadow: 0 1px 2px rgba(7,21,16,.72), 0 2px 10px rgba(7,21,16,.52); }
.hero-eyebrow {
  display: inline-block;
  color: #7E351C;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .16em;
  margin-bottom: 1.1rem;
  animation: fadeUp .9s .35s var(--ease) both;
}

.hero-title {
  font-family: var(--ff-display);
  font-optical-sizing: auto;
  font-weight: 430;
  font-size: clamp(2.1rem, 1.25rem + 2.7vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: 0;
  max-width: 18ch;
  color: #0E2419;
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-title .line > span {
  display: block;
  animation: lineUp 1.15s var(--ease) both;
}
.hero-title .line:nth-child(1) > span { animation-delay: .12s; }
.hero-title .line:nth-child(2) > span { animation-delay: .26s; }
.hero-title em { font-style: italic; font-weight: 420; color: var(--kiln-700); }
@keyframes lineUp { from { transform: translateY(105%); } to { transform: translateY(0); } }

.hero-sub {
  width: fit-content;
  max-width: 52ch;
  margin-top: 1rem;
  padding: .75rem 1.15rem .82rem;
  background: rgba(251, 248, 243, 0.96);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid rgba(126, 53, 28, 0.28);
  border-left: 3.5px solid #7E351C;
  border-radius: 8px;
  box-shadow: 0 10px 28px -16px rgba(0,0,0,0.3);
  animation: fadeUp .9s .55s var(--ease) both;
}
.hero-sub-credit {
  display: block;
  font-family: var(--ff-mono);
  font-size: clamp(.72rem, .66rem + .2vw, .82rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7E351C;
  margin-bottom: .28rem;
}
.hero-sub-tagline {
  display: block;
  font-size: clamp(1.02rem, .95rem + .25vw, 1.18rem);
  font-weight: 650;
  line-height: 1.45;
  color: #0E2419;
}

.hero-facts-panel {
  width: fit-content; max-width: 100%;
  margin-top: .7rem; padding: .7rem .95rem .76rem;
  background: rgba(251,248,243,.86);
  -webkit-backdrop-filter: blur(7px) saturate(1.05);
  backdrop-filter: blur(7px) saturate(1.05);
  border: 1px solid rgba(126,53,28,.28);
  border-radius: 8px;
  box-shadow: 0 14px 34px -26px rgba(0,0,0,.78), inset 0 1px rgba(255,255,255,.12);
}

.hero-corner {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--wrap); margin: -1.2rem auto 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .58rem 1rem;
  color: rgba(255,255,255,.94);
  text-shadow: 0 1px 8px rgba(7,21,16,.82);
  animation: fadeUp .9s 1s var(--ease) both;
}
.hero-price {
  display: inline-flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  width: fit-content; max-width: 100%;
  margin-top: 1.15rem;
  padding: .52rem .72rem .58rem;
  border-radius: 8px;
  color: #fffaf1;
  background:
    linear-gradient(90deg, rgba(126,53,28,.94), rgba(30,69,52,.86)),
    linear-gradient(135deg, rgba(255,255,255,.2), transparent 42%);
  border: 1px solid rgba(239,211,193,.58);
  box-shadow: 0 14px 34px -24px rgba(0,0,0,.95);
  animation: fadeUp .9s .68s var(--ease) both;
}
.hero-price-label {
  font-family: var(--ff-mono); font-size: .6rem;
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #FFE3BE;
}
.hero-price-figure {
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(1.32rem, 1.08rem + .82vw, 1.78rem);
  letter-spacing: 0; color: #FFF9EF;
}
.hero-price-figure sup { font-size: .45em; top: -.9em; }

.hero-stats {
  display: flex; flex-wrap: wrap; gap: .5rem 1.75rem;
  width: fit-content; max-width: 100%; margin-top: 0;
  font-size: .82rem; font-weight: 650; color: var(--forest-900);
  text-shadow: none;
  animation: fadeUp .9s .8s var(--ease) both;
}
.hero-stats li {
  display: flex; align-items: baseline; gap: .4rem;
  padding-right: 1.25rem;
  border-right: 1px solid rgba(126,53,28,.28);
}
.hero-stats li:last-child { padding-right: 0; border-right: 0; }
.hero-stats .mono {
  font-size: .98rem; font-weight: 650; color: var(--kiln-700); letter-spacing: 0;
}

.hero-rera {
  order: 1;
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1.1rem;
  font-family: var(--ff-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .07em; color: #183126;
  margin: 0;
  padding: .44rem .72rem .48rem;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(255,246,232,.96), rgba(244,201,149,.88));
  border: 1px solid rgba(255,227,190,.78);
  box-shadow: 0 14px 34px -24px rgba(0,0,0,.92);
  text-shadow: none;
}
.hero-rera > span {
  color: #183126;
  text-shadow: none;
}
.hero-rera-label {
  color: var(--kiln-700);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero-brochure {
  order: 2;
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .45rem;
  width: fit-content; text-decoration: none;
  color: #F4C995; font-family: var(--ff-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 1px solid rgba(239,211,193,.56);
  padding-bottom: .15rem;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.hero-brochure .ic { width: .85rem; height: .85rem; }
.hero-brochure:hover { color: #fff; border-bottom-color: var(--kiln-300); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   LEAD CARD — frosted glass, so the villa render reads straight through it
   ========================================================================== */
.lead {
  position: relative;
  padding: 1.3rem 1.35rem 1.15rem;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(255,250,241,.96) 0%, rgba(239,247,241,.92) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
  backdrop-filter: blur(12px) saturate(1.12);
  border: 1px solid rgba(255,255,255,.86);
  box-shadow:
    0 1px 0 rgba(255,255,255,.28) inset,
    0 24px 58px -30px rgba(0,0,0,.68);
  color: var(--forest-900);
  text-shadow: none;
  transition:
    background .42s var(--ease),
    border-color .42s var(--ease),
    box-shadow .42s var(--ease),
    -webkit-backdrop-filter .42s var(--ease),
    backdrop-filter .42s var(--ease);
  animation: cardIn 1s .5s var(--ease) both;
}
.lead:hover,
.lead:focus-within {
  background: linear-gradient(165deg, rgba(255,250,241,.98) 0%, rgba(239,247,241,.95) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.14);
  backdrop-filter: blur(14px) saturate(1.14);
  border-color: rgba(217,139,99,.5);
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 0 34px rgba(180,85,47,.12),
    0 30px 72px -24px rgba(0,0,0,.42);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(26px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.lead-top { margin-bottom: .95rem; }
.lead-kicker {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--ff-mono); font-size: .6rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--kiln-700);
  background: rgba(244,201,149,.42);
  border: 1px solid rgba(180,85,47,.2);
  border-radius: var(--r-pill);
  padding: .3rem .75rem;
}
.lead-title {
  font-family: var(--ff-display); font-weight: 520;
  font-size: 1.55rem; line-height: 1.1; letter-spacing: 0;
  color: var(--forest-900); margin-top: .55rem;
  text-shadow: none;
}
.lead-sub {
  font-size: .86rem; line-height: 1.5;
  color: var(--forest-200); margin-top: .4rem;
}

.lead-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.lead-field { margin-bottom: .6rem; }
.lead-row .lead-field { margin-bottom: 0; }
.lead-row + .lead-field { margin-top: .6rem; }

.lead-field label {
  display: block;
  font-family: var(--ff-mono); font-size: .58rem;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--forest-700); margin-bottom: .35rem;
}
.lead-field .opt { letter-spacing: .06em; text-transform: none; opacity: .75; }

.lead-field input,
.lead-field textarea {
  width: 100%;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(14,36,25,.18);
  border-radius: var(--r-sm);
  padding: .62rem .8rem;
  font-size: .92rem; color: var(--forest-900);
  transition: background-color .22s var(--ease), border-color .22s var(--ease),
              box-shadow .22s var(--ease);
}
.lead-field textarea { resize: vertical; min-height: 3.4rem; line-height: 1.55; }
.lead-field input::placeholder,
.lead-field textarea::placeholder { color: rgba(78,71,57,.56); }
.lead-field input:hover,
.lead-field textarea:hover { background: rgba(255,255,255,.9); }
.lead-field input:focus,
.lead-field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--kiln-300);
  box-shadow: 0 0 0 3px rgba(217,139,99,.24);
}
.lead-field.has-err input,
.lead-field.has-err textarea {
  border-color: #E8825F;
  box-shadow: 0 0 0 3px rgba(232,130,95,.2);
}
.lead-field .err { font-size: .72rem; color: #F0A88C; margin-top: .3rem; }

/* optional message, hidden until asked for — keeps the card short */
.msg-toggle {
  display: inline-flex; align-items: center; gap: .45rem;
  margin: .15rem 0 .1rem; padding: .3rem 0;
  font-family: var(--ff-mono); font-size: .62rem;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--forest-300);
  transition: color .2s var(--ease);
}
.msg-toggle:hover { color: var(--kiln-300); }
.msg-plus {
  position: relative; width: .72rem; height: .72rem; flex: none;
}
.msg-plus::before, .msg-plus::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: currentColor;
}
.msg-plus::before { width: 100%; height: 1px; }
.msg-plus::after  { width: 1px; height: 100%; transition: transform .25s var(--ease); }
.msg-toggle[aria-expanded="true"] .msg-plus::after { transform: scaleY(0); }
.msg-field { margin-top: .5rem; }
.msg-field[hidden] { display: none; }

.lead-submit { margin-top: .85rem; padding-block: .92rem; font-size: .9rem; }
/* divider with a label, separating the form from the instant-contact row */
.lead-or {
  display: flex; align-items: center; gap: .8rem;
  margin: .9rem 0 .7rem;
  font-family: var(--ff-mono); font-size: .58rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--forest-700);
}
.lead-or::before, .lead-or::after {
  content: ""; height: 1px; flex: 1; background: rgba(14,36,25,.16);
}

.lead-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.lead-actions .btn { padding-block: .72rem; }

.lead-trust {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin-top: .9rem;
}
.lead-trust li {
  display: flex; align-items: center; gap: .25rem;
  font-family: var(--ff-mono); font-size: .55rem;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--forest-800);
  background: rgba(255,255,255,.48);
  border: 1px solid rgba(14,36,25,.12);
  border-radius: var(--r-pill);
  padding: .26rem .5rem;
}
.lead-trust .ic { width: .78rem; height: .78rem; color: var(--kiln-300); }

.form-done {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  gap: .55rem; padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--stone-50);
  border-radius: var(--r-xl);
  animation: fadeUp .5s var(--ease) both;
}
.form-done[hidden] { display: none; }
.form-done-title {
  font-family: var(--ff-display); font-weight: 500; font-size: 1.45rem;
  letter-spacing: 0;
}
.form-done p { font-size: .92rem; color: var(--ink-soft); max-width: 32ch; }
.form-done .btn { margin-top: .8rem; }

.lead .form-done {
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, rgba(12,32,24,.95), rgba(7,21,16,.97));
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
  color: var(--stone-50);
}
.lead .form-done p { color: var(--forest-200); }
.lead .form-done-title { color: #fff; }
.done-mark {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; margin-bottom: .45rem;
  border: 1px solid var(--kiln-300); color: var(--kiln-300);
  border-radius: 50%;
}

/* ==========================================================================
   PROOF STRIP — quick legitimacy signals before the long-scroll story
   ========================================================================== */
.proof-strip {
  background: var(--stone-50);
  border-bottom: 1px solid var(--stone-200);
  padding-block: clamp(1rem, 2.5vw, 1.55rem);
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
}
.proof-item {
  min-width: 0;
  padding: .9rem 1rem;
  border: 1px solid var(--stone-200);
  border-radius: var(--r-sm);
  background: #fff;
  box-shadow: 0 12px 32px -28px rgba(27,25,21,.48);
}
.proof-kicker {
  display: block;
  font-size: .6rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--kiln-700);
  margin-bottom: .24rem;
}
.proof-item strong {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(1rem, .9rem + .35vw, 1.18rem);
  font-weight: 500;
  line-height: 1.18;
  color: var(--forest-900);
}
.proof-item span:last-child {
  display: block;
  margin-top: .32rem;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.proof-rera {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: clamp(.66rem, .59rem + .28vw, .78rem);
  line-height: 1.55;
  letter-spacing: 0;
}

/* ==========================================================================
   EXCLUSIVITY — the signature: 83 villas as a running-bond brick course
   ========================================================================== */
.exclusivity {
  background: var(--forest-950);
  color: var(--stone-100);
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  border-top: 1px solid rgba(255,255,255,.07);
}
.exclusivity .eyebrow { margin-bottom: 1.9rem; }
.excl-grid {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(2rem, 5vw, 4.5rem);
}
.excl-media { border-radius: var(--r-xl); overflow: hidden; }
.excl-media img {
  width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.excl-media:hover img { transform: scale(1.04); }
.excl-note {
  margin-top: 1.5rem; max-width: 42ch;
  font-size: .95rem; line-height: 1.68; color: var(--forest-200);
}

.course {
  --bw: clamp(19px, 3.3vw, 34px);
  --bh: clamp(9px, 1.5vw, 15px);
  --bg: 4px;
  display: flex; flex-direction: column; gap: var(--bg);
  max-width: 42rem;
  margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}
.course-row { display: flex; gap: var(--bg); }
.course-row.is-offset { margin-left: calc((var(--bw) + var(--bg)) / 2); }
.brick {
  width: var(--bw); height: var(--bh); flex: none;
  border-radius: 2px;
  background: rgba(180, 85, 47, .58);
  border: 1px solid rgba(226, 156, 120, .8);
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
}
/* Bricks are visible by default; the hidden state only applies before the
   course scrolls in, so a dropped animation can never leave the wall blank. */
.course:not(.is-in) .brick { opacity: 0; transform: translateY(-5px); }
.course.is-in .brick {
  animation: brickIn .45s var(--ease) both;
  animation-delay: calc(var(--d) * 7ms);
}
@keyframes brickIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

.excl-title {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 1.05rem + 2.7vw, 3.35rem);
  line-height: 1.14;
  letter-spacing: 0;
  max-width: 24ch;
}
.excl-title em { font-style: italic; color: var(--forest-200); }
.excl-num {
  font-style: normal;
  color: var(--kiln-300);
}

/* ==========================================================================
   OVERVIEW + FACTS
   ========================================================================== */
.ov-head {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.ov-copy { margin-bottom: 0; max-width: none; }
.ov-media {
  border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--stone-200);
  background: #fff; padding: .9rem .9rem .3rem;
  box-shadow: 0 18px 45px -28px rgba(27,25,21,.5);
}
.ov-media img { width: 100%; border-radius: var(--r-md); }
.ov-media figcaption {
  padding: .7rem .25rem .55rem; font-size: .68rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--stone-600);
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.7rem, 1.4vw, 1.1rem);
}
.fact {
  border: 1px solid var(--stone-200);
  border-radius: var(--r-lg);
  background: #fff;
  padding: clamp(1.4rem, 2.4vw, 2.1rem);
  transition: border-color .3s var(--ease), transform .3s var(--ease),
              box-shadow .3s var(--ease);
}
.fact:hover {
  border-color: var(--kiln-300);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -24px rgba(122,45,20,.55);
}
.fact .ic-lg { color: var(--kiln-600); margin-bottom: 1.5rem; stroke-width: 1.25; }
.fact-figure {
  font-family: var(--ff-mono);
  font-size: clamp(1.7rem, 1.35rem + 1.3vw, 2.5rem);
  font-weight: 400; line-height: 1; letter-spacing: 0;
  color: var(--forest-800);
}
.fact-figure span {
  font-size: .38em; letter-spacing: .06em;
  color: var(--stone-600); margin-left: .3em;
}
.fact-title {
  font-family: var(--ff-display); font-weight: 500;
  font-size: 1.02rem; letter-spacing: .005em;
  margin-top: .85rem;
}
.fact-note {
  font-size: .875rem; line-height: 1.6;
  color: var(--ink-soft); margin-top: .35rem;
}

/* ==========================================================================
   BUYER INTENT
   ========================================================================== */
.intent-section {
  border-top: 1px solid var(--stone-200);
  border-bottom: 1px solid var(--stone-200);
}
.intent-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 28rem);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.intent-copy { margin-bottom: 0; max-width: 44rem; }
.intent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.6rem;
}
.intent-card {
  background: var(--forest-900);
  color: var(--stone-50);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 2.5vw, 2rem);
  box-shadow: 0 22px 48px -34px rgba(7,21,16,.75);
}
.intent-card dl {
  display: grid;
  gap: .85rem;
}
.intent-card div {
  display: grid;
  gap: .18rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.intent-card div:last-child { padding-bottom: 0; border-bottom: 0; }
.intent-card dt {
  font-family: var(--ff-mono);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--kiln-300);
}
.intent-card dd {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--stone-100);
}

.intent-table-wrap {
  margin-top: 2.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-md, 8px);
  box-shadow: 0 10px 30px -18px rgba(14,36,25,.18);
}
.intent-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(14,36,25,0.12);
  border-radius: var(--r-md, 8px);
  font-size: .92rem;
  text-align: left;
}
.intent-table th {
  padding: .9rem 1.1rem;
  font-family: var(--ff-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--forest-900);
  background: rgba(14,36,25,0.06);
  border-bottom: 1px solid rgba(14,36,25,0.15);
}
.intent-table td {
  padding: .95rem 1.1rem;
  vertical-align: middle;
  border-bottom: 1px solid rgba(14,36,25,0.08);
}
.intent-table tbody tr:last-child td {
  border-bottom: 0;
}
.intent-table-note {
  margin-top: .75rem;
  font-size: .82rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ==========================================================================
   ABOUT THE VILLAS
   ========================================================================== */
.split {
  display: grid; gap: clamp(2.25rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.split-media { position: relative; }
.split-media img {
  width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover;
  border-radius: var(--r-xl);
}
.split-media figcaption {
  margin-top: .85rem; font-size: .7rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--forest-300);
}
.split-body > p {
  color: var(--forest-200); margin-top: 1.3rem; max-width: 48ch;
}
.split-body .sec-title { margin-bottom: .4rem; }

.spec-list {
  display: grid;
  margin-top: 2.25rem;
  border-top: 1px solid rgba(255,255,255,.13);
  grid-template-columns: 9.5rem minmax(0, 1fr);
}
.spec-list dt,
.spec-list dd {
  padding: .85rem 0;
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.spec-list dt {
  font-family: var(--ff-mono); font-size: .68rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--forest-300);
  padding-top: 1.03rem;
  padding-right: 1.5rem;
}
.spec-list dd { margin: 0; font-size: .9rem; color: var(--stone-100); }
.spec-list dd span { color: var(--forest-300); }

.pull {
  margin-top: 2.5rem; padding-left: 1.5rem;
  border-left: 2px solid var(--kiln-500);
  font-family: var(--ff-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.2rem, 1rem + .8vw, 1.65rem);
  line-height: 1.35; color: var(--kiln-100);
  max-width: 30ch;
}

/* ==========================================================================
   AMENITIES
   ========================================================================== */
.tablist {
  display: flex; gap: .45rem; flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.tab {
  font-family: var(--ff-mono); font-size: .72rem;
  letter-spacing: .13em; text-transform: uppercase;
  padding: .62rem 1.1rem; color: var(--stone-600);
  border: 1px solid transparent; border-radius: var(--r-pill);
  transition: color .25s var(--ease), background-color .25s var(--ease),
              border-color .25s var(--ease);
}
.tab:hover { color: var(--kiln-700); background: var(--stone-100); }
.tab[aria-selected="true"] {
  color: #fff; background: var(--kiln-600); border-color: var(--kiln-600);
}

.tabpanel { animation: fadeUp .5s var(--ease) both; }

.amen-grid {
  display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
}
.amen {
  position: relative; overflow: hidden;
  background: var(--forest-900);
  border-radius: var(--r-lg);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.amen:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -26px rgba(7,21,16,.85); }
.amen img {
  width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover;
  transition: transform .8s var(--ease), opacity .4s var(--ease);
}
.amen:hover img { transform: scale(1.05); opacity: .82; }
.amen span {
  position: absolute; inset: auto 0 0; z-index: 1;
  padding: 2.5rem .95rem .85rem;
  font-family: var(--ff-mono); font-size: .72rem;
  letter-spacing: .08em; color: #fff;
  background: linear-gradient(to top, rgba(7,21,16,.9), transparent);
}

.spec-grid {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  border-top: 1px solid var(--stone-200);
}
.spec-grid li {
  padding: 1.05rem .25rem;
  border-bottom: 1px solid var(--stone-200);
  font-size: .92rem;
  display: flex; align-items: center; gap: .8rem;
}
.spec-grid li::before {
  content: ""; width: .45rem; height: .45rem; flex: none;
  border-radius: var(--r-pill);
  background: var(--kiln-500);
}

/* ==========================================================================
   LOCATION
   ========================================================================== */
.loc-layout {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: start;
}
.loc-aside { position: sticky; top: 6.5rem; }
.loc-map img {
  width: 100%; border: 1px solid rgba(255,255,255,.12);
  background: var(--forest-800);
  border-radius: var(--r-lg);
}
.loc-map figcaption {
  margin-top: .8rem; font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--forest-300);
}

.loc-why { margin-top: 2.5rem; border-top: 1px solid rgba(255,255,255,.13); }
.why-item { padding: 1.35rem 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.why-item h3 {
  font-family: var(--ff-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--kiln-300); margin-bottom: .6rem;
}
.why-item p { font-size: .92rem; line-height: 1.62; color: var(--forest-200); }

.loc-block + .loc-block { margin-top: 2.1rem; }
.loc-block h3 {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--ff-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--kiln-300); margin-bottom: .55rem;
}
.loc-block h3 .ic { width: 1rem; height: 1rem; }
.dist li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1.25rem; padding: .6rem 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: .92rem;
}
.dist li .mono { color: var(--forest-200); white-space: nowrap; font-size: .76rem; letter-spacing: .01em; }

.pillars {
  display: grid; gap: clamp(.7rem, 1.4vw, 1rem);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.pillars li {
  padding: 1.15rem 1.05rem 1.25rem;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-lg);
  background: rgba(7,21,16,.3);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.pillars li:hover { border-color: var(--kiln-500); transform: translateY(-3px); }
.pillars .ic { color: var(--kiln-300); margin-bottom: .8rem; }
.pillars h3 {
  font-family: var(--ff-display); font-weight: 500;
  font-size: .98rem; letter-spacing: 0; color: var(--stone-50);
}
.pillars p {
  font-size: .8rem; line-height: 1.5;
  color: var(--forest-300); margin-top: .3rem;
}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery {
  display: grid; gap: clamp(.6rem, 1.2vw, 1rem);
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(9rem, 15vw, 14rem);
  grid-auto-flow: dense;
}
.ga-wide { grid-column: span 2; }
.ga-tall { grid-row: span 2; }
.ga-btn {
  display: block; position: relative; width: 100%; height: 100%;
  overflow: hidden; background: var(--forest-900); padding: 0;
  border-radius: var(--r-lg);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.ga-btn:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -26px rgba(27,25,21,.6); }
.ga-btn img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .85s var(--ease), filter .5s var(--ease);
}
.ga-btn:hover img { transform: scale(1.055); filter: brightness(.85); }
.ga-cap {
  position: absolute; inset: auto 0 0; z-index: 1;
  padding: 2.5rem .9rem .8rem; text-align: left;
  font-size: .68rem; letter-spacing: .1em; color: #fff;
  background: linear-gradient(to top, rgba(7,21,16,.88), transparent);
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
  .ga-btn:hover .ga-cap,
  .ga-btn:focus-visible .ga-cap { opacity: 1; transform: none; }
  
  @media (max-width: 48rem) {
    .gallery { grid-template-columns: repeat(2, 1fr); }
    .ga-cap { opacity: 1; transform: none; }
  }
  
  /* ==========================================================================
     FAQ
     ========================================================================== */
  .faq-section { border-top: 1px solid var(--stone-200); }
  .faq-list {
    display: grid;
    gap: .7rem;
    max-width: 58rem;
  }
  .faq-list details {
    border: 1px solid var(--stone-200);
    border-radius: var(--r-lg);
    background: #fff;
    overflow: hidden;
  }
  .faq-list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.9rem;
    padding: 1rem 1.15rem;
    cursor: pointer;
    color: var(--forest-900);
    font-family: var(--ff-display);
    font-size: clamp(1.02rem, .96rem + .22vw, 1.18rem);
    line-height: 1.25;
    letter-spacing: 0;
    list-style: none;
  }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary::after {
    content: "+";
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--stone-100);
    color: var(--kiln-600);
    font-family: var(--ff-mono);
    font-size: 1rem;
  }
  .faq-list details[open] summary::after { content: "-"; }
  .faq-list p {
    padding: 0 1.15rem 1.1rem;
    color: var(--ink-soft);
    max-width: 68ch;
    line-height: 1.65;
  }
  
  /* ==========================================================================
     TRUST STRIP
     ========================================================================== */
.trust { background: var(--stone-50); padding-block: clamp(2rem, 4vw, 3rem); }
.trust-inner {
  background: var(--stone-100);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
}
.trust-inner {
  display: grid; gap: 1.35rem clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}
.trust-ic { color: var(--kiln-600); stroke-width: 1.25; }
.trust-title {
  font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(1.1rem, .95rem + .65vw, 1.5rem);
  line-height: 1.3; letter-spacing: 0;
  max-width: 34ch;
}
.trust-num {
  font-size: .74rem; letter-spacing: .04em;
  color: var(--ink-soft); margin-top: .45rem;
}
.trust-tags { display: flex; flex-wrap: wrap; gap: .5rem 1.35rem; }
.trust-tags li {
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--ff-mono); font-size: .69rem;
  letter-spacing: .11em; text-transform: uppercase; color: var(--forest-500);
}
.trust-tags .ic { width: .85rem; height: .85rem; color: var(--kiln-600); }

/* ==========================================================================
   THANK YOU PAGE
   ========================================================================== */
.thanks-page {
  min-height: 100svh;
  background: var(--forest-950);
}
.thanks-main { min-height: 100svh; }
.thanks-hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(20rem, 1.05fr);
  align-items: stretch;
}
.thanks-media {
  min-height: 100%;
  background: var(--forest-900);
}
.thanks-media img {
  width: 100%;
  height: 100%;
  min-height: 100svh;
  object-fit: cover;
}
.thanks-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 6vw, 6rem);
  background: var(--stone-50);
}
.thanks-kicker {
  color: var(--kiln-700);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.thanks-card h1 {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 1.2rem + 3vw, 4rem);
  font-weight: 430;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--forest-950);
  max-width: 11ch;
}
.thanks-card p {
  margin-top: 1.2rem;
  max-width: 42ch;
  color: var(--ink-soft);
}
.thanks-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}
.thanks-back {
  width: fit-content;
  margin-top: 1.6rem;
  color: var(--kiln-700);
  font-family: var(--ff-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(126,53,28,.34);
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-layout {
  display: grid; gap: clamp(2.5rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
  align-items: start;
}
.contact-copy > p { color: var(--forest-200); margin-top: 1.5rem; max-width: 42ch; }
.contact-copy .sec-title { margin-bottom: .3rem; }

.contact-direct { margin-top: 2.5rem; }
.contact-direct li {
  display: flex; align-items: flex-start; gap: .9rem;
  padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.12);
  font-size: .95rem;
}
.contact-direct .ic { color: var(--kiln-300); margin-top: .3rem; }
.contact-direct a { text-decoration: none; border-bottom: 1px solid rgba(217,139,99,.4); }
.contact-direct a:hover { border-bottom-color: var(--kiln-300); color: var(--kiln-100); }

.contact-cta {
  display: flex; flex-wrap: wrap; gap: .65rem;
  margin-top: 2.25rem;
}

/* builder credentials panel — replaces the second form */
.builder {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(7,21,16,.35);
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 3vw, 2.35rem);
}
.builder-eyebrow {
  font-size: .62rem; letter-spacing: .21em; text-transform: uppercase;
  color: var(--kiln-300);
}
.builder-name {
  font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem);
  letter-spacing: 0; color: var(--stone-50); margin-top: .5rem;
}
.builder-copy {
  font-size: .93rem; line-height: 1.66;
  color: var(--forest-200); margin-top: .9rem;
}
.builder-stats { margin-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.13); }
.builder-stats li {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.13);
  font-size: .88rem; color: var(--forest-200);
}
.builder-stats .mono {
  font-size: 1.15rem; letter-spacing: 0;
  color: var(--kiln-100); min-width: 4.5rem;
}

.done-mark {
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; margin-bottom: .35rem;
  border: 1px solid var(--kiln-600); color: var(--kiln-600);
  border-radius: 50%;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-foot {
  background: var(--forest-950); color: var(--stone-200);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  font-size: .875rem;
}
.foot-top {
  display: grid; gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  padding-bottom: 2.75rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.foot-brand .wordmark-mark { margin-bottom: 1rem; }
.foot-name {
  font-family: var(--ff-display); font-size: 1.4rem;
  color: var(--stone-50); letter-spacing: 0;
}
.foot-tag { color: var(--forest-300); margin-top: .5rem; max-width: 26ch; }
.foot-h {
  font-family: var(--ff-mono); font-size: .64rem;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--kiln-300); margin-bottom: 1rem;
}
.foot-nav { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.foot-nav a, .foot-col a { text-decoration: none; color: var(--stone-200); transition: color .2s var(--ease); }
.foot-nav a:hover, .foot-col a:hover { color: var(--kiln-300); }
.foot-col p + p { margin-top: .55rem; }
.foot-col .foot-lbl {
  display: block; font-family: var(--ff-mono); font-size: .6rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--forest-400);
}

.foot-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 1.75rem;
}
.foot-rera { font-size: .68rem; letter-spacing: .06em; color: var(--forest-300); }
.foot-legal { font-size: .7rem; color: var(--forest-400); width: 100%; }

/* ==========================================================================
   TOUCH TARGETS — everything tappable clears 44px on a finger
   ========================================================================== */
@media (hover: none), (max-width: 62rem) {
  .btn-sm, .nav-toggle, .tab, .hero-brochure,
  .dock-btn { min-height: 44px; }
  .btn-sm { padding-block: .8rem; }
  .nav-toggle { display: grid; place-items: center; padding: .6rem; min-width: 44px; }
  .tab { display: inline-flex; align-items: center; padding-block: .8rem; }
  .hero-brochure { padding-block: .7rem; }
  .socials a { width: 2.75rem; height: 2.75rem; }
  /* text links in lists get their hit area from padding, not font size */
  .contact-direct li { padding-block: 1rem; }
  .contact-direct a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-nav a, .foot-col a { display: inline-flex; align-items: center; min-height: 44px; }
  .dist li { padding-block: .8rem; }
}

/* ==========================================================================
   STICKY MOBILE ACTION DOCK
   ========================================================================== */
.dock { display: none; }

@media (max-width: 52rem) {
  .dock {
    position: fixed; z-index: 90;
    left: .75rem; right: .75rem; bottom: max(.55rem, env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem;
    padding: .32rem;
    background: rgba(9, 26, 19, .74);
    -webkit-backdrop-filter: blur(16px) saturate(1.16);
    backdrop-filter: blur(16px) saturate(1.16);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    box-shadow: 0 16px 40px -14px rgba(0,0,0,.75);
  }
  .dock-btn {
    display: flex; flex-direction: column; align-items: center; gap: .18rem;
    padding: .48rem .3rem;
    border-radius: 14px;
    text-decoration: none; color: var(--stone-50);
    font-family: var(--ff-mono); font-size: .6rem;
    letter-spacing: .1em; text-transform: uppercase;
    transition: background-color .2s var(--ease), transform .15s var(--ease);
  }
  .dock-btn .ic { width: 1.15rem; height: 1.15rem; }
  .dock-btn:active { transform: scale(.96); }
  .dock-call { background: var(--forest-700); }
  .dock-wa { background: var(--whatsapp); }
  .dock-enquire { background: var(--kiln-600); }
  /* keep the footer clear of the dock */
  .site-foot { padding-bottom: 6rem; }
}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(7, 21, 16, .96);
  display: grid; place-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: clamp(1rem, 4vw, 3rem);
  animation: lbIn .3s var(--ease) both;
}
.lightbox[hidden] { display: none; }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lb-figure { max-width: 100%; text-align: center; }
.lb-figure img {
  max-width: 100%; max-height: 78svh; width: auto; margin-inline: auto;
  object-fit: contain; border-radius: var(--r-md);
}
.lb-figure figcaption {
  margin-top: 1rem; font-size: .72rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--forest-300);
}
.lb-close {
  position: absolute; top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem);
  color: var(--stone-100); padding: .6rem; z-index: 1;
  border-radius: var(--r-pill); background: rgba(255,255,255,.08);
  transition: background-color .2s var(--ease);
}
.lb-close:hover { background: rgba(255,255,255,.18); }
.lb-nav {
  color: var(--stone-100); padding: .8rem; opacity: .75;
  border-radius: var(--r-pill); background: rgba(255,255,255,.07);
  transition: opacity .2s var(--ease), background-color .2s var(--ease);
}
.lb-nav:hover { opacity: 1; background: rgba(255,255,255,.16); }
.lb-nav .ic { width: 1.6rem; height: 1.6rem; }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
/* Progressive enhancement: content is visible by default. Only once the
   inline head script confirms JS is running do we hide it for the reveal —
   so a failed, slow or blocked main.js can never leave the page blank. */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 72rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 21rem; }
}

@media (max-width: 62rem) {
  .site-head {
    top: .45rem;
    width: calc(100% - .85rem);
    border-radius: 24px;
  }
  .head-inner {
    height: 5.05rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: .5rem;
    padding: .7rem .8rem .75rem;
  }
  .wordmark {
    align-self: flex-start;
    max-width: 100%;
    gap: .58rem;
    overflow: hidden;
  }
  .wordmark-mark { width: 2.65rem; height: 1.82rem; }
  .wordmark-name {
    font-size: 1.24rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wordmark-sub {
    display: block;
    font-size: .53rem;
    letter-spacing: .07em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .head-actions {
    display: flex !important;
    align-items: center;
    gap: .35rem;
    width: calc(100% - 1.6rem);
    justify-content: stretch;
    margin-left: 0;
  }
  .head-phone {
    display: inline-flex;
    flex: 1 1 0;
    width: auto;
    padding: .5rem .62rem;
    font-size: .64rem;
    letter-spacing: 0;
    white-space: nowrap;
    min-width: 0;
    justify-content: center;
  }
  .head-actions .btn-sm {
    display: none !important;
    flex: 0 0 5.8rem;
    width: auto;
    justify-content: center;
    padding: .5rem .62rem;
    font-size: .64rem;
    min-height: 0;
    min-width: 0;
    white-space: nowrap;
  }
  .head-phone svg.ic,
  .head-actions .nav-toggle { display: none !important; }
  /* MOBILE HERO
     Use a tall, screen-filling frame on phones while keeping the villa facade
     centered enough to avoid an awkward crop. */
  .hero {
    min-height: 0;
    justify-content: flex-start;
    padding: var(--head-h) 0 1.4rem;
    background: var(--forest-950);
  }
  .hero-media {
    position: relative; inset: auto;
    height: clamp(25rem, 92svh, 36rem);
    margin-bottom: 1.35rem;
    background:
      linear-gradient(180deg, rgba(251,247,238,.92) 0%, rgba(219,231,216,.78) 100%),
      var(--sage-200);
  }
  .hero-media img {
    animation: none;
    object-fit: cover;
    object-position: 48% 50%;
    filter: brightness(1.02) saturate(.88) contrast(1.04);
  }
  .hero-grid { padding-block: 0; padding-inline: var(--gut); }
  .hero-corner { padding-inline: var(--gut); margin-top: .35rem; transform: none; }
  .hero-body, .hero-rera, .hero-corner { text-shadow: none; }
  .hero-body::before { display: none; }
  .hero-body { color: var(--stone-50); }
  .hero-title { color: var(--stone-50); }
  .hero-title em { color: var(--kiln-300); }
  .hero-eyebrow {
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--kiln-300);
  }
  .hero-sub {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.15);
    border-left-color: var(--kiln-300);
    box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    color: var(--stone-200);
  }
  .hero-sub-credit { color: var(--kiln-300); }
  .hero-sub-tagline { color: #FFFFFF; }
  .hero-rera { color: #183126; }
  .hero-rera > span { color: #183126; }
  .hero-rera .mono { color: #183126; }
  .hero-brochure { color: var(--kiln-100); border-bottom-color: rgba(239,211,193,.45); }
  .hero-title { font-weight: 400; }
  .hero-title em { font-weight: 400; }
  .hero-stats { animation: none; }
  .hero-stats, .hero-stats .mono { color: var(--stone-50); opacity: 1; }
  .hero-stats { text-shadow: 0 1px 2px rgba(0,0,0,.72); }
  /* the glass panel only existed to lift the stats off the photo */
  .hero-facts-panel {
    background: rgba(255,255,255,.055);
    border-color: rgba(255,255,255,.14);
    box-shadow: inset 0 1px rgba(255,255,255,.06);
    padding: .72rem .78rem .76rem;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    margin-top: 1.1rem;
  }

  .excl-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intent-grid { grid-template-columns: 1fr; }
  .thanks-hero { grid-template-columns: 1fr; }
  .thanks-media img { min-height: 42svh; max-height: 48svh; }
  .thanks-card { min-height: 52svh; }
  .excl-media img { aspect-ratio: 16 / 10; }
  .ov-head { grid-template-columns: 1fr; }
  /* Card drops below the headline; the hero grows past one screen so the
     form is the first thing reached on the way down. */
  .hero { min-height: 0; justify-content: flex-start; }
  .hero-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .hero-body { transform: translateY(-.75rem); }
  .lead { max-width: 30rem; }
  .sec-head-row { grid-template-columns: 1fr; align-items: start; }
  .split { grid-template-columns: 1fr; }
  .split-media { order: -1; }
  .split-media img { aspect-ratio: 4 / 3; }
  .loc-layout { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .loc-aside { position: static; }
  .contact-layout { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-inner { grid-template-columns: auto minmax(0, 1fr); }
  .trust-tags { grid-column: 1 / -1; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 52rem) {
  .hero-media::after {
    background: linear-gradient(to bottom,
      rgba(255,246,232,.02) 0%, rgba(7,21,16,0) 28%,
      rgba(7,21,16,0) 72%, rgba(13,38,27,.16) 100%);
      transparent 0%, transparent 72%, rgba(13,38,27,.16) 100%);
  }
}

@media (hover: none) {
  .lead {
    background: linear-gradient(165deg, rgba(255,250,241,.97) 0%, rgba(239,247,241,.94) 100%);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    backdrop-filter: blur(10px) saturate(1.1);
    border-color: rgba(255,255,255,.86);
  }
}

@media (max-width: 40rem) {
  :root { --head-h: 5.7rem; }
  .site-head { top: .45rem; width: calc(100% - .85rem); border-radius: 24px; }
  .head-inner {
    display: grid;
    position: relative;
    gap: .5rem;
    height: 5.05rem;
    padding: .7rem .8rem .75rem;
    grid-template-columns: 1fr;
    justify-items: start;
    align-content: center;
  }
  .wordmark { grid-column: auto; max-width: calc(100% - 8.2rem); gap: .58rem; overflow: hidden; align-self: center; }
  .wordmark-mark { width: 2.65rem; height: 1.82rem; }
  .wordmark-name { font-size: 1.24rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wordmark-sub {
    display: block;
    font-size: .53rem;
    letter-spacing: .07em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .head-nav { display: none; }
  .head-actions { display: block !important; position: static; width: auto; margin-left: 0; }
  .head-phone {
    position: fixed !important;
    right: 1.08rem;
    top: 1.52rem;
    z-index: 160;
    transform: none;
    display: inline-flex;
    flex: 0 0 auto !important;
    width: auto;
    padding: .62rem .74rem;
    font-size: .68rem;
    letter-spacing: 0;
    white-space: nowrap;
    min-width: 0;
    justify-content: center;
  }
  .head-actions .btn-sm {
    display: none !important;
    flex: 0 0 5.8rem;
    width: auto;
    justify-content: center;
    padding: .5rem .62rem;
    font-size: .64rem;
    min-height: 0;
    min-width: 0;
    white-space: nowrap;
  }
  .head-phone svg.ic { display: none !important; }
  .head-actions .nav-toggle { display: none !important; }
  .nav-toggle { display: none; }
  .head-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .head-actions {
    position: static !important;
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }
  .head-phone {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .head-actions .btn-sm,
  .head-actions .nav-toggle { display: none !important; }
  .hero-media {
    height: clamp(21rem, 66svh, 30rem);
    aspect-ratio: auto;
  }
  .hero-media img { object-fit: cover; object-position: 45% 48%; }
  .hero-eyebrow { font-size: .6rem; letter-spacing: .12em; gap: .6rem; }
  .hero-eyebrow::before { width: 1.4rem; }
  .hero-stats { gap: .45rem 1rem; font-size: .78rem; }
  .hero-stats li { flex: none; padding-right: .85rem; }
  .hero-facts-panel { width: 100%; padding: .72rem .78rem .76rem; }
  .lead { max-width: none; padding: 1.25rem 1.15rem 1.15rem; }
  .lead-row { grid-template-columns: 1fr; gap: 0; }
  .lead-row .lead-field { margin-bottom: .7rem; }
  .proof-grid { grid-template-columns: 1fr; }
  .intent-actions .btn,
  .thanks-actions .btn { flex: 1 1 100%; }
  .contact-cta .btn { flex: 1 1 100%; }
  .facts { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery { grid-auto-rows: 9rem; }
  .ga-tall { grid-row: span 1; }
  .spec-list { grid-template-columns: 1fr; }
  .spec-list dt { padding-bottom: 0; border-bottom: 0; }
  .spec-list dd { padding-top: .15rem; }
  .foot-top { grid-template-columns: 1fr; }
  .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; padding-bottom: 4.5rem; }
  .lb-nav { position: absolute; bottom: 1rem; }
  .lb-prev { left: 22%; }
  .lb-next { right: 22%; }
}

@media (max-width: 26rem) {
  .wordmark-text { display: flex; }
  .head-inner { padding-inline: .62rem; gap: .42rem; }
  .wordmark { gap: .42rem; max-width: 100%; }
  .wordmark-name { font-size: 1rem; }
  .wordmark-sub { font-size: .42rem; letter-spacing: .035em; }
  .wordmark-mark { width: 2rem; height: 1.36rem; }
  .head-actions { width: auto; }
  .head-phone { font-size: .56rem; padding-inline: .44rem; justify-content: center; }
  .head-phone { right: .9rem; top: 1.58rem; }
  .head-actions .btn-sm { display: none !important; }
  .head-actions { position: static !important; width: auto !important; }
}

@media (max-width: 62rem) {
  .site-head .head-actions { display: none !important; }
  .mobile-head-actions {
    position: fixed;
    z-index: 160;
    top: 1.48rem;
    left: auto;
    right: .55rem;
    display: grid;
    grid-template-columns: 4.7rem 4rem;
    align-items: center;
    gap: .32rem;
    width: 8.95rem;
  }
  .mobile-head-phone,
  .mobile-head-enquire {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .58rem .48rem;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: var(--r-pill);
    color: var(--stone-50);
    background: rgba(255,255,255,.08);
    font-family: var(--ff-mono);
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
  }
  .mobile-head-phone {
    width: 100%;
    min-width: 0;
  }
  .mobile-head-enquire {
    width: 100%;
    padding-inline: .42rem;
    background: var(--kiln-600);
    border-color: rgba(217,139,99,.78);
    font-family: var(--ff-body);
    font-size: .6rem;
    font-weight: 650;
  }
}

@media (max-width: 26rem) {
  .mobile-head-actions {
    top: 1.54rem;
    left: auto;
    right: .45rem;
    gap: .22rem;
    width: 8.9rem;
    grid-template-columns: 4.75rem 3.93rem;
  }
  .mobile-head-phone,
  .mobile-head-enquire {
    padding: .56rem .58rem;
    font-size: .56rem;
  }
  .mobile-head-enquire {
    padding-inline: .46rem;
    font-size: .52rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .course .brick { opacity: 1; transform: none; }
  .lead { opacity: 1; transform: none; }
}


/* ==========================================================================
   TIMED LEAD POPUP
   ========================================================================== */
.pop { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
  padding: clamp(.9rem, 4vw, 2rem); }
.pop[hidden] { display: none; }
.pop-backdrop { position: absolute; inset: 0; background: rgba(5,14,10,.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: popFade .3s var(--ease) both; }
.pop-card {
  position: relative; width: min(27rem, 100%);
  max-height: calc(100svh - 2rem); overflow-y: auto;
  padding: clamp(1.4rem, 4vw, 1.9rem);
  border-radius: var(--r-xl);
  background: linear-gradient(168deg, #12291F 0%, #08170F 100%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 40px 90px -30px rgba(0,0,0,.9);
  color: var(--stone-50);
  animation: popIn .42s var(--ease) both;
}
@keyframes popFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes popIn { from { opacity: 0; transform: translateY(20px) scale(.97) } to { opacity: 1; transform: none } }
.pop-x { position: absolute; top: .7rem; right: .7rem; display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: var(--r-pill); color: var(--forest-200);
  background: rgba(255,255,255,.07); transition: background-color .2s var(--ease), color .2s var(--ease); }
.pop-x:hover { background: rgba(255,255,255,.16); color: #fff; }
.pop-kicker { display: inline-flex; font-family: var(--ff-mono); font-size: .6rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--kiln-100);
  background: rgba(180,85,47,.3); border: 1px solid rgba(217,139,99,.45);
  border-radius: var(--r-pill); padding: .3rem .75rem; }
.pop-title { font-family: var(--ff-display); font-weight: 400; font-size: 1.5rem;
  line-height: 1.14; letter-spacing: -.025em; color: #fff; margin-top: .75rem; }
.pop-sub { font-size: .88rem; line-height: 1.55; color: var(--forest-200); margin-top: .5rem; }
.pop-form { margin-top: 1.1rem; }
.pop-field { margin-bottom: .65rem; }
.pop-field label { display: block; font-family: var(--ff-mono); font-size: .58rem;
  letter-spacing: .17em; text-transform: uppercase; color: var(--forest-300); margin-bottom: .3rem; }
.pop-field input { width: 100%; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-sm);
  padding: .68rem .85rem; font-size: .95rem; color: #fff;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease); }
.pop-field input::placeholder { color: rgba(228,238,232,.55); }
.pop-field input:focus { outline: none; background: rgba(255,255,255,.13);
  border-color: var(--kiln-300); box-shadow: 0 0 0 3px rgba(217,139,99,.25); }
.pop-field.has-err input { border-color: #E8825F; box-shadow: 0 0 0 3px rgba(232,130,95,.2); }
.pop-field .err { font-size: .74rem; color: #F0A88C; margin-top: .28rem; }
.pop-form .btn-block { margin-top: .9rem; }
.pop-fine { font-size: .68rem; text-align: center; color: var(--forest-300); margin-top: .55rem; }
.pop-or { display: flex; align-items: center; gap: .8rem; margin: 1rem 0 .7rem;
  font-family: var(--ff-mono); font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--forest-300); }
.pop-or::before, .pop-or::after { content: ""; height: 1px; flex: 1; background: rgba(255,255,255,.16); }
.pop-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pop-done { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; gap: .5rem;
  padding: clamp(1.4rem, 4vw, 1.9rem); border-radius: var(--r-xl);
  background: linear-gradient(168deg, #12291F 0%, #08170F 100%);
  animation: popFade .3s var(--ease) both; }
.pop-done[hidden] { display: none; }
.pop-done-title { font-family: var(--ff-display); font-weight: 500; font-size: 1.45rem; color: #fff; }
.pop-done p { font-size: .92rem; color: var(--forest-200); max-width: 30ch; }
.pop-done .btn { margin-top: .8rem; }

@media (prefers-reduced-motion: reduce) {
  .pop-card, .pop-backdrop, .pop-done { animation: none; }
}

/* ==========================================================================
   PROJECT REVIEW & ANALYSIS
   ========================================================================== */
.review-section {
  position: relative;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(30,69,52,.4) 0%, transparent 70%),
    var(--forest-950);
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.85rem);
  margin-top: 3rem;
}
.review-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-xl, 14px);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 0 16px 40px -28px rgba(0, 0, 0, 0.6);
  transition: transform .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.review-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(217, 139, 99, 0.5);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.8);
}
.review-num {
  font-family: var(--ff-mono);
  font-size: .76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--kiln-300);
  margin-bottom: .65rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.review-card h3 {
  font-family: var(--ff-display);
  font-size: 1.32rem;
  font-weight: 500;
  color: #FFFFFF;
  margin-bottom: .85rem;
  line-height: 1.25;
}
.review-card p {
  font-size: .95rem;
  line-height: 1.65;
  color: rgba(244, 240, 234, 0.9);
  flex: 1;
}

/* ==========================================================================
   BLOG & BUYER GUIDES — LUXURY EDITORIAL SYSTEM
   ========================================================================== */

/* Breadcrumbs */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  font-family: var(--ff-mono);
  font-size: .75rem;
  color: var(--stone-300);
  margin-bottom: 1.5rem;
}
.breadcrumbs a {
  color: rgba(244, 240, 234, 0.75);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.breadcrumbs a:hover {
  color: #FFFFFF;
}
.breadcrumbs .sep {
  color: var(--kiln-300);
  opacity: .7;
}
.breadcrumbs .current {
  color: var(--stone-100);
}

/* Category & Topic Badges */
.article-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--ff-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #FFE3BE;
  background: linear-gradient(135deg, rgba(154,68,38,.45) 0%, rgba(126,53,28,.35) 100%);
  border: 1px solid rgba(217,139,99,.5);
  border-radius: var(--r-pill, 9999px);
  padding: .35rem .95rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.5);
}

/* Article Hero Header */
.article-header {
  position: relative;
  padding: calc(var(--head-h) + 2.8rem) var(--gut) 3.5rem;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30,69,52,.45) 0%, transparent 80%),
    linear-gradient(180deg, #071510 0%, #0E2419 60%, #16352A 100%);
  color: var(--stone-50);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.article-header-inner {
  max-width: 52rem;
  margin: 0 auto;
  text-align: left;
}
.article-header-inner .breadcrumbs {
  justify-content: flex-start;
}
.article-header-inner .article-title {
  font-family: var(--ff-display);
  font-size: clamp(2.1rem, 1.4rem + 2.5vw, 3.4rem);
  font-weight: 420;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: #FFFFFF;
  margin: 0 0 1.35rem 0;
  text-wrap: balance;
}
.article-header-inner .article-lead {
  font-size: clamp(1.05rem, .98rem + .28vw, 1.2rem);
  line-height: 1.68;
  color: rgba(244, 240, 234, 0.92);
  margin-bottom: 2rem;
  border-left: 3px solid var(--kiln-300);
  padding-left: 1.25rem;
  max-width: 48rem;
}

/* Author & Meta Bar */
.article-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-family: var(--ff-mono);
  font-size: .76rem;
  color: var(--stone-300);
}
.article-author-info {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.article-avatar {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--r-pill);
  background: var(--kiln-600);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: .8rem;
  box-shadow: 0 4px 12px -4px rgba(126,53,28,.8);
}
.article-author-name {
  font-weight: 500;
  color: #FFFFFF;
  display: block;
}
.article-author-role {
  font-size: .68rem;
  color: rgba(244,240,234,.7);
  display: block;
}
.article-meta-tags {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--stone-300);
}

/* Article Body Content */
.article-content {
  background: #FBF8F3;
  color: #1A2820;
  padding: 3.5rem 0 5.5rem;
}
.article-wrap {
  max-width: 52rem;
  margin: 0 auto;
  padding: 0 var(--gut);
}
.article-wrap p {
  font-size: 1.05rem;
  line-height: 1.82;
  color: #24352C;
  margin-bottom: 1.6rem;
}
.article-wrap h2 {
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
  font-weight: 480;
  color: #0E2419;
  margin: 3.25rem 0 1.1rem;
  line-height: 1.24;
  letter-spacing: -.015em;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(14,36,25,.1);
}
.article-wrap h3 {
  font-family: var(--ff-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: #16352A;
  margin: 2.2rem 0 .8rem;
}
.article-wrap ul, .article-wrap ol {
  margin: 0 0 1.8rem 0;
  padding-left: 1.4rem;
}
.article-wrap li {
  font-size: 1.02rem;
  line-height: 1.75;
  color: #24352C;
  margin-bottom: .65rem;
}
.article-callout {
  background: #FFFFFF;
  border: 1px solid rgba(14,36,25,.1);
  border-left: 4px solid var(--kiln-600);
  border-radius: var(--r-md, 8px);
  padding: 1.5rem 1.8rem;
  margin: 2.4rem 0;
  font-size: 1.02rem;
  line-height: 1.72;
  color: #1A2820;
  box-shadow: 0 14px 34px -22px rgba(14,36,25,.12);
}
.article-callout strong {
  color: var(--kiln-700);
}

/* Article CTA Conversion Banner */
.article-cta-box {
  background:
    linear-gradient(145deg, #071510 0%, #0E2419 60%, #16352A 100%);
  color: #FFFFFF;
  border-radius: var(--r-xl, 16px);
  padding: clamp(2rem, 5vw, 3.2rem);
  text-align: center;
  margin: 4.5rem 0 1.5rem;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 60px -25px rgba(7,21,16,.75);
}
.article-cta-box h3 {
  font-family: var(--ff-display);
  color: #FFFFFF;
  font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2.1rem);
  font-weight: 450;
  margin-bottom: .85rem;
}
.article-cta-box p {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(244,240,234,.88);
  max-width: 44ch;
  margin: 0 auto 1.8rem;
}
.article-cta-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Blog Hub Page */
.blog-hero {
  padding: calc(var(--head-h) + 2.8rem) var(--gut) 3.5rem;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30,69,52,.45) 0%, transparent 80%),
    linear-gradient(180deg, #071510 0%, #0E2419 60%, #16352A 100%);
  color: var(--stone-50);
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.blog-hero-inner {
  max-width: 50rem;
  margin: 0 auto;
}
.blog-hero .breadcrumbs {
  justify-content: center;
}
.blog-hero .sec-title {
  color: #FFFFFF;
  font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.4rem);
  font-weight: 420;
  line-height: 1.15;
  margin: .8rem auto 1.25rem;
  text-wrap: balance;
}
.blog-hero .sec-lead {
  max-width: 44rem;
  margin: 0 auto;
  font-size: 1.08rem;
  line-height: 1.68;
  color: rgba(244,240,234,.92);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr));
  gap: clamp(1.75rem, 3vw, 2.75rem);
  margin-top: 3.25rem;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid rgba(14,36,25,.12);
  border-radius: var(--r-xl, 16px);
  overflow: hidden;
  box-shadow: 0 16px 40px -28px rgba(14,36,25,.22);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  text-decoration: none;
  color: inherit;
}
.blog-card:hover {
  transform: translateY(-6px);
  border-color: rgba(180,85,47,.4);
  box-shadow: 0 28px 56px -24px rgba(14,36,25,.3);
}
.blog-card-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--forest-900);
}
.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.blog-card:hover .blog-card-media img {
  transform: scale(1.05);
}
.blog-card-body {
  padding: 1.75rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog-card-tag {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kiln-600);
  margin-bottom: .6rem;
}
.blog-card-title {
  font-family: var(--ff-display);
  font-size: 1.38rem;
  font-weight: 500;
  line-height: 1.3;
  color: #0E2419;
  margin-bottom: .85rem;
}
.blog-card-desc {
  font-size: .95rem;
  line-height: 1.62;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
  flex: 1;
}
.blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: .78rem;
  font-weight: 600;
  color: var(--kiln-600);
  padding-top: 1.1rem;
  border-top: 1px solid rgba(14,36,25,.08);
}