/* ─────────────────────────────────────────────
   PANTHERA BERTAM, site styles
   System: cream + terracotta + warm ink
   ───────────────────────────────────────────── */

:root{
  --cream:     #F2E9DF;
  --cream-2:   #EBDFD1;
  --cream-3:   #E5D7C4;
  --ink:       #4A413E;
  --ink-deep:  #2E2825;
  --ink-soft:  #3A2F28;
  --text:      #1C1714;
  --text-mute: rgba(28,23,20,0.62);
  --terra:     #B17664;
  --terra-2:   #8A4638;
  --clay:      #C88A76;
  --sand:      #D9C6B3;
  --green:     #6F7F58;     /* used for green/courtyard accents */
  --green-deep:#4A5A3A;
  --rule:      rgba(28,23,20,0.18);
  --rule-soft: rgba(28,23,20,0.10);
  --rule-cream: rgba(242,233,223,0.20);

  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans:  "Inter Tight", -apple-system, system-ui, "Helvetica Neue", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --display: "Montserrat", var(--sans);

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body{
  background: var(--cream);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Animated topo backdrop, slow drift + gentle breathing + scroll parallax.
   The base drift keyframes give the contours their "alive" feel; the JS-fed
   --scroll-parallax variable shifts the background slowly as the user scrolls,
   creating depth without distracting from the content. */
body::before{
  content: ""; position: fixed; inset: -8% -8%;
  background-image: url("assets/topo.svg");
  background-size: 2800px auto;
  background-position: center 0px;
  background-position-y: calc(0px + var(--scroll-parallax, 0px));
  background-repeat: no-repeat;
  z-index: -1; pointer-events: none;
  opacity: 0.55;
  will-change: transform, background-position;
  animation: topoDrift 64s ease-in-out infinite alternate;
  transition: background-position-y .05s linear;
}
@keyframes topoDrift {
  0%   { transform: translate3d(-2.0%, -1.2%, 0) scale(1.00); }
  50%  { transform: translate3d( 1.4%,  1.0%, 0) scale(1.03); }
  100% { transform: translate3d( 2.4%, -0.6%, 0) scale(1.015); }
}
@media (prefers-reduced-motion: reduce){
  body::before{ animation: none; transition: none; }
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }

/* ── Typography utilities ────────────────────── */
.eyebrow{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terra-2);
  font-weight: 500;
}
.eyebrow.muted{ color: var(--text-mute); }
.eyebrow.cream{ color: rgba(242,233,223,0.78); }

.display{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.8vw, 86px);
  line-height: 1.0;
  letter-spacing: -0.018em;
}
.title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.subtitle{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.lede{
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 58ch;
}
.body{ font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 64ch; }
.it{ font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--terra-2); }
.mono{ font-family: var(--mono); }
.num{ font-variant-numeric: tabular-nums; }

/* ── Layout primitives ───────────────────────── */
.wrap{
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
section{ position: relative; }
.section{
  padding: clamp(80px, 10vw, 160px) 0;
  border-top: 1px solid var(--rule-soft);
}

/* ─────────────────────────────────────────────
   Calm scroll reveal
   Content drifts up and fades in slowly as it
   enters view (the .in class is added by the
   IntersectionObserver in app.js). Long, gentle
   easing gives the page an unhurried, sanctuary
   feel rather than snapping into place.
   ───────────────────────────────────────────── */
/* Additive reveal: content is ALWAYS visible by default (opacity 1, no
   transform). The .in class, added by the observer when the element scrolls
   into view, triggers a one-time gentle fade-up. Because the resting state is
   fully visible, a missed observer or disabled JS can never blank content,
   it simply skips the animation. */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-reveal].in{
  animation: revealUp 1.0s cubic-bezier(.22,.7,.2,1) both;
}
@media (prefers-reduced-motion: reduce){
  [data-reveal].in{ animation: none; }
}
.section.dark{ background: var(--ink); color: var(--cream); border-top-color: rgba(242,233,223,0.10); position: relative; overflow: hidden; }
.section.dark::before{
  content: ""; position: absolute; inset: -10%; pointer-events: none;
  background-image: url("assets/topo.svg");
  background-size: 1800px auto; background-position: center; background-repeat: no-repeat;
  opacity: 0.18; filter: invert(1) brightness(2.6);
  mix-blend-mode: normal;
  will-change: transform;
  animation: topoFloat 78s ease-in-out infinite alternate;
}
.section.dark > *{ position: relative; }
.section.terra{ background: var(--terra); color: var(--cream); border-top-color: rgba(242,233,223,0.18); position: relative; overflow: hidden; }
.section.terra::before{
  content: ""; position: absolute; inset: -10%; pointer-events: none;
  background-image: url("assets/topo.svg");
  background-size: 1800px auto; background-position: center; background-repeat: no-repeat;
  opacity: 0.20; filter: invert(1) brightness(2.4);
  will-change: transform;
  animation: topoFloat 66s ease-in-out infinite alternate-reverse;
}
.section.terra > *{ position: relative; }
/* Slow contour float for the coloured bands, gives the backgrounds quiet life */
@keyframes topoFloat {
  0%   { transform: translate3d(-2.4%, -1.4%, 0) scale(1.05) rotate(-0.4deg); }
  50%  { transform: translate3d( 1.6%,  1.0%, 0) scale(1.09) rotate(0.3deg); }
  100% { transform: translate3d( 2.6%, -0.8%, 0) scale(1.05) rotate(-0.2deg); }
}
@media (prefers-reduced-motion: reduce){
  .section.dark::before, .section.terra::before{ animation: none; }
}
.section.dark .body, .section.dark .lede{ color: rgba(242,233,223,0.80); }
.section.terra .body, .section.terra .lede{ color: rgba(242,233,223,0.86); }
.section.dark .eyebrow.muted{ color: rgba(242,233,223,0.70); }

.hd{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; margin-bottom: clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 18px;
  flex-wrap: wrap;
}
.section.dark .hd, .section.terra .hd{ border-bottom-color: rgba(242,233,223,0.18); }

/* ── OLD nav (hidden, replaced by topbar + dock) ──── */
.nav{ display: none; }

/* ── Top ribbon (logo center, language right, optional WA left) ── */
.topbar{
  position: sticky; top: 0; z-index: 1100;
  background: var(--cream);
  border-bottom: 1px solid var(--rule-soft);
  box-shadow: 0 4px 14px -10px rgba(28,23,20,0.18);
}
.topbar-inner{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 0;
  gap: 16px;
}
.topbar-side{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-mute);
  transition: color .15s ease;
}
.topbar-side:hover{ color: var(--ink); }
.topbar-side.left{ justify-self: start; white-space: nowrap; }
.topbar-side.right{ justify-self: end; }
.topbar-side .dot{
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.4; }
}

.topbar .brand-mark{
  justify-self: center;
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--ink);
}
.topbar .brand-mark .wordmark-img{
  height: 26px;
  width: auto;
  display: block;
  object-fit: contain;
}
.topbar .brand-mark .sub{
  font-family: var(--mono);
  font-size: 20px; letter-spacing: 0.18em; color: var(--text-mute);
  padding-left: 14px; border-left: 1px solid var(--rule-soft);
  text-transform: uppercase;
  line-height: 1;
}

.topbar .lang{
  display: inline-flex; align-items: center; gap: 2px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 3px 3px;
}
.topbar .lang button{
  padding: 4px 9px; border-radius: 999px; color: var(--ink-soft);
}
.topbar .lang button[aria-pressed="true"]{ background: var(--ink); color: var(--cream); }

@media (max-width: 600px){
  .topbar-side.left{ display: none; }
  .topbar-inner{ grid-template-columns: 1fr auto; }
  .topbar .brand-mark{ justify-self: start; gap: 8px; }
  .topbar .brand-mark .wordmark-img{ height: 20px; }
  .topbar .brand-mark .sub{ display: none; }
}

/* ── Bottom dock (app-style floating menu) ── */
.dock{
  position: fixed;
  left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 90;
  background: rgba(28,23,20,0.94);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-radius: 999px;
  padding: 5px;
  display: inline-flex; align-items: center; gap: 2px;
  box-shadow: 0 10px 40px rgba(28,23,20,0.28), 0 2px 6px rgba(28,23,20,0.14);
  max-width: calc(100vw - 24px);
}
.dock a{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(242,233,223,0.72);
  border-radius: 999px;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
  position: relative;
}
.dock a:hover{
  background: rgba(242,233,223,0.10);
  color: var(--cream);
}
.dock a.active{
  background: rgba(242,233,223,0.14);
  color: var(--cream);
}
.dock a.active::before{
  content: ""; position: absolute; left: 50%; bottom: 2px;
  width: 14px; height: 2px; background: var(--terra); border-radius: 999px;
  transform: translateX(-50%);
}
.dock a.cta{
  background: var(--cream); color: var(--ink);
  padding: 11px 20px;
  margin-left: 4px;
  font-weight: 500;
}
.dock a.cta:hover{ background: white; color: var(--ink); }
.dock a.cta.active::before{ background: var(--terra-2); }

/* Mobile: full-width dock */
@media (max-width: 720px){
  .dock{
    left: 10px; right: 10px; transform: none; bottom: 10px;
    padding: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 14px;
    justify-content: center;
  }
  .dock::-webkit-scrollbar{ display: none; }
  .dock a{ padding: 10px 14px; font-size: 10px; letter-spacing: 0.14em; flex-shrink: 0; }
  .dock a.cta{ margin-left: 2px; padding: 10px 16px; }
}
/* Tighter dock for small phones to avoid horizontal scroll */
@media (max-width: 480px){
  .dock{ gap: 0; padding: 3px; }
  .dock a{ padding: 9px 9px; font-size: 9.5px; letter-spacing: 0.08em; }
  .dock a.cta{ margin-left: 1px; padding: 9px 11px; }
}
@media (max-width: 360px){
  .dock a{ padding: 8px 7px; font-size: 9px; letter-spacing: 0.04em; }
  .dock a.cta{ padding: 8px 9px; }
}

/* push site content above the dock */
body{ padding-bottom: 90px; }
@media (max-width: 720px){ body{ padding-bottom: 78px; } }
footer{ padding-bottom: 60px; }

/* hide dock when print */
@media print{ .topbar, .dock{ display: none !important; } }
.nav{
  position: sticky; top: 0; z-index: 50;
  background: rgba(242,233,223,0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}
.nav-inner{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; gap: 16px;
}
.brand{
  display: flex; align-items: center; gap: 12px;
  font-family: var(--display); font-weight: 300;
  font-size: 20px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink);
  flex-shrink: 0;
}
.brand .mk{
  width: 48px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
}
.brand .mk img{ width: 120%; height: 120%; object-fit: contain; }
.brand .sub{
  font-size: 10px; letter-spacing: 0.26em; color: var(--text-mute);
  margin-left: 2px; font-weight: 400;
  padding-left: 10px; border-left: 1px solid var(--rule-soft);
}

.nav-links{
  display: flex; gap: clamp(14px, 2vw, 32px);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  flex: 1; justify-content: center;
  min-width: 0;
}
@media (max-width: 1100px){ .nav-links{ display: none; } }
.nav-links a{ color: var(--ink-soft); transition: color .15s ease; }
.nav-links a:hover{ color: var(--terra-2); }

.nav-cta{ display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-cta .btn-primary .label-short{ display: none; }
@media (max-width: 720px){
  .nav-cta .btn-primary .label-long{ display: none; }
  .nav-cta .btn-primary .label-short{ display: inline; }
  .nav-cta .btn-primary{ padding: 10px 14px; }
  .lang{ display: none; }
}

.lang{
  display: inline-flex; align-items: center; gap: 2px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 4px 4px;
}
.lang button{
  padding: 4px 10px; border-radius: 999px; color: var(--ink-soft);
}
.lang button[aria-pressed="true"]{ background: var(--ink); color: var(--cream); }

.btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  border-radius: 999px;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn .arrow{ display:inline-block; transition: transform .2s ease; }
.btn:hover .arrow{ transform: translateX(3px); }
.btn-primary{ background: var(--ink); color: var(--cream); }
.btn-primary:hover{ background: var(--terra-2); }
.btn-ghost{ background: transparent; border: 1px solid var(--rule); color: var(--ink-soft); }
.btn-ghost:hover{ border-color: var(--ink); color: var(--ink); }
.btn-wa{ background: var(--green); color: var(--cream); }
.btn-wa:hover{ background: var(--green-deep); }
.btn-cream{ background: var(--cream); color: var(--ink); }
.btn-cream:hover{ background: white; }

/* ── Hero ────────────────────────────────────── */
.hero{
  padding: clamp(48px, 7vw, 120px) 0 clamp(64px, 8vw, 140px);
  position: relative; overflow: hidden;
}
.hero-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  max-width: 880px;
}

.hero h1{ margin: 18px 0 24px; }
.hero .terra-mark{ color: var(--terra-2); font-family: var(--serif); font-style: italic; font-weight: 400; }

.hero-meta{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; margin-top: 44px;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
@media (max-width: 700px){ .hero-meta{ grid-template-columns: repeat(2, 1fr); } }
.hero-meta > div{
  padding: 18px 18px 18px 0;
  border-right: 1px solid var(--rule-soft);
}
.hero-meta > div:last-child{ border-right: 0; }
.hero-meta .k{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-mute);
}
.hero-meta .v{
  font-family: var(--serif); font-size: 28px; line-height: 1; margin-top: 6px; letter-spacing: -0.01em;
}
.hero-meta .v .unit{ font-size: 14px; font-family: var(--sans); color: var(--text-mute); margin-left: 4px; }

.hero-cta{ display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }

/* Hero diagram, abstract top-down site plan */
.hero-art{
  aspect-ratio: 600 / 680;
  width: 100%;
  background: var(--cream-2);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule-soft);
}
.hero-art svg{ width: 100%; height: 100%; display: block; }

/* Hero rework, real photograph */
.hero-art--photo{
  border: none;
  border-radius: 10px;
  box-shadow:
    0 28px 60px -30px rgba(28,23,20,0.45),
    0 8px 20px -10px rgba(28,23,20,0.20);
}
.hero-art--photo .hero-photo{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.hero-art--photo:hover .hero-photo{ transform: scale(1.025); }
.hero-photo-overlay{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(28,23,20,0.10) 0%,
      rgba(28,23,20,0.00) 28%,
      rgba(28,23,20,0.00) 60%,
      rgba(28,23,20,0.45) 100%);
  pointer-events: none;
}
.hero-stamps{
  position: absolute; top: 18px; left: 18px; right: 18px;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; flex-wrap: wrap;
  pointer-events: none;
}
.hero-stamp{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 7px 11px;
  border-radius: 999px;
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}
.hero-stamp--launch{
  background: rgba(28,23,20,0.62);
  color: var(--cream);
  display: inline-flex; align-items: center; gap: 8px;
}
.hero-stamp--launch .dot{
  width: 7px; height: 7px; border-radius: 50%; background: #25D366;
  box-shadow: 0 0 0 0 rgba(37,211,102,.7);
  animation: livePulse 1.8s ease-out infinite;
}
.hero-stamp--type{
  background: rgba(242,233,223,0.85);
  color: var(--ink);
}
.hero-siteplan{
  position: absolute; left: 14px; bottom: 14px; right: 14px;
  pointer-events: auto;
}
.hero-siteplan > summary{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(242,233,223,0.92);
  color: var(--ink);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  user-select: none;
  list-style: none;
  box-shadow: 0 4px 14px -6px rgba(28,23,20,0.35);
}
.hero-siteplan > summary::-webkit-details-marker{ display: none; }
.hero-siteplan > summary::after{
  content: "↑";
  display: inline-block;
  font-size: 12px;
  opacity: 0.7;
  transition: transform .2s ease;
  transform: rotate(180deg);
}
.hero-siteplan[open] > summary{ background: var(--ink); color: var(--cream); }
.hero-siteplan[open] > summary::after{ transform: rotate(0deg); }
.hero-siteplan-body{
  position: absolute; left: 0; right: 0; bottom: 48px;
  background: var(--cream);
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 24px 60px -20px rgba(28,23,20,0.5);
  border: 1px solid var(--rule-soft);
  max-width: 460px;
  max-height: min(58vh, 460px);
  overflow: hidden;
}
.hero-siteplan-body svg{
  width: 100%; height: auto; display: block;
}
@media (max-width: 600px){
  .hero-stamps{ top: 12px; left: 12px; right: 12px; }
  .hero-stamp{ font-size: 9.5px; padding: 6px 9px; }
  .hero-siteplan-body{ bottom: 44px; max-height: 50vh; }
}

/* ── Section: Idea ───────────────────────────── */
.idea-grid{
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
@media (max-width: 900px){ .idea-grid{ grid-template-columns: 1fr; } }
.idea-grid .quote{
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(28px, 3.4vw, 48px); line-height: 1.18; letter-spacing: -0.01em;
  color: var(--ink);
}
.idea-grid .quote .accent{ color: var(--terra-2); }

.idea-points{ margin-top: 36px; display: grid; gap: 28px; }
.idea-points .p{
  border-top: 1px solid var(--rule-soft); padding-top: 16px;
}
.idea-points .p .h{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--terra-2); margin-bottom: 8px;
}
.idea-points .p .t{
  font-family: var(--serif); font-size: 24px; line-height: 1.2; margin-bottom: 6px; letter-spacing: -0.01em;
}

/* ── Section: At a glance (stat strip) ───────── */
/* Tighten the gap between the dark-band header and the stats row so the
   "At a glance" band reads as one composed block, not an empty void. */
.section.dark .hd{ margin-bottom: clamp(24px, 3vw, 40px); }
.stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(242,233,223,0.20);
  border-bottom: 1px solid rgba(242,233,223,0.20);
}
@media (max-width: 800px){ .stats{ grid-template-columns: repeat(2, 1fr); } }
.stats > div{
  padding: 40px 28px 40px 0;
  border-right: 1px solid rgba(242,233,223,0.20);
}
.stats > div:last-child{ border-right: 0; }
.stats .k{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(242,233,223,0.70); margin-bottom: 10px;
}
.stats .v{
  font-family: var(--serif); font-size: clamp(48px, 5vw, 80px); line-height: 0.96; letter-spacing: -0.02em;
}
.stats .u{ font-size: 14px; color: rgba(242,233,223,0.65); margin-top: 6px; font-family: var(--sans); }

/* ── Section: Site plan (folded into Estate as one flow) ───
   The aerial render now sits directly after the idea-points with generous
   top spacing, no divider rule, so the estate concept and the site plan read
   as a single continuous narrative. scroll-margin keeps the #site dock anchor
   clear of the fixed topbar. */
.estate-aerial{
  margin-top: clamp(48px, 6vw, 80px);
  scroll-margin-top: 96px;
}
/* Aerial photo render hero, full-bleed inside the wrap, sits above the
   notes grid. Hover lifts slightly. */
.site-aerial{
  margin: 0 0 clamp(40px, 5vw, 72px);
  border-radius: 6px; overflow: hidden;
  background: var(--cream-2);
  box-shadow: 0 24px 60px -28px rgba(28,23,20,0.28);
  border: 1px solid var(--rule-soft);
  transition: transform .35s ease, box-shadow .35s ease;
}
.site-aerial:hover{
  transform: translateY(-2px);
  box-shadow: 0 32px 68px -28px rgba(28,23,20,0.32);
}
.site-aerial img{
  width: 100%; height: auto; display: block;
  aspect-ratio: 1116 / 944;
  object-fit: cover;
}
.site-aerial figcaption{
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; flex-wrap: wrap;
  padding: 14px 22px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-mute);
  background: var(--cream);
  border-top: 1px solid var(--rule-soft);
}
@media (max-width: 600px){
  .site-aerial figcaption{
    padding: 12px 16px; font-size: 10px; letter-spacing: 0.15em;
  }
}

.site-grid{
  display: grid; grid-template-columns: 1.4fr 0.9fr; gap: clamp(32px, 4vw, 72px);
  align-items: start;
}
@media (max-width: 1000px){ .site-grid{ grid-template-columns: 1fr; } }
/* When the architectural drawing is hidden, notes get the full width laid
   out as a 2x2 callout grid that pairs with the aerial render above. */
.site-grid--notes-only{ grid-template-columns: 1fr; }
.site-grid--notes-only .site-notes{
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.5vw, 40px);
}
@media (max-width: 720px){
  .site-grid--notes-only .site-notes{ grid-template-columns: 1fr; }
}

.site-plan-wrap{
  background: white; border: 1px solid var(--rule-soft);
  padding: 16px; border-radius: 4px; position: relative;
}
.site-plan-wrap img{ width: 100%; height: auto; display: block; }
.site-plan-wrap .cap{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-mute); display:flex; justify-content: space-between;
  margin-top: 10px;
}

.site-notes{ display: grid; gap: 22px; }
.site-notes .note{ border-left: 2px solid var(--terra); padding: 4px 0 4px 20px; }
.site-notes .note .h{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--terra-2); margin-bottom: 6px;
}
.site-notes .note .t{ font-family: var(--serif); font-size: 22px; line-height: 1.18; }
.site-notes .note .b{ font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin-top: 6px; }

/* ── Streetscape band ────────────────────── */
.streetscape{
  margin: 0 0 clamp(36px, 4vw, 56px);
}
.streetscape-frame{
  background: linear-gradient(180deg, #C8D4E0 0%, #E8DCC9 70%, #DDC9B0 100%);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.streetscape-frame img{
  width: auto; height: clamp(160px, 22vw, 320px);
  display: block;
  min-width: 100%;
}
.streetscape-cap{
  margin-top: 12px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--ink-soft);
}
.streetscape-cap .muted{ color: var(--text-mute); }

/* ── Section: The homes ──────────────────────── */
.homes-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
@media (max-width: 900px){ .homes-grid{ grid-template-columns: 1fr; } }

.home-card{
  background: var(--cream-2);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  padding: clamp(28px, 3vw, 44px);
  display: grid; grid-template-rows: auto 1fr auto; gap: 24px;
  position: relative; overflow: hidden;
}
.home-card .ph{
  aspect-ratio: 16/10; background: var(--cream-3);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-mute);
  position: relative; overflow: hidden;
}
.home-card .ph svg{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.6; }
.home-card .ph .lbl{
  position: absolute; z-index: 3; padding: 7px 12px;
  background: rgba(28,23,20,0.78);
  color: var(--cream);
  border-radius: 2px;
  bottom: 14px; left: 14px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Tropical foliage corners on renders */
.home-card .ph.render::before,
.home-card .ph.render::after{
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  width: 38%; height: 70%;
  background-repeat: no-repeat;
  background-size: contain;
}
.home-card .ph.render::before{
  top: -2%; left: -3%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 280'><g fill='%234A5A3A' fill-opacity='0.55'><path d='M-20 0 C 40 30 70 60 80 110 C 60 110 30 95 0 50 Z'/><path d='M-10 -10 C 60 0 110 25 130 70 C 90 75 40 60 -5 20 Z'/><path d='M-10 30 C 40 60 60 100 65 140 C 30 130 5 90 -10 50 Z'/><path d='M-20 70 C 30 110 55 150 60 200 C 20 180 -10 150 -25 110 Z'/><path d='M-10 130 C 25 170 40 200 35 230 C 5 210 -10 180 -20 150 Z'/></g></svg>");
  background-position: top left;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
}
.home-card .ph.render::after{
  bottom: -5%; right: -3%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 280'><g fill='%234A5A3A' fill-opacity='0.5'><path d='M220 280 C 160 250 130 220 120 170 C 140 170 170 185 200 230 Z'/><path d='M210 290 C 140 280 90 255 70 210 C 110 205 160 220 205 260 Z'/><path d='M210 250 C 160 220 140 180 135 140 C 170 150 195 190 210 230 Z'/><path d='M220 210 C 170 170 145 130 140 80 C 180 100 210 130 225 170 Z'/><path d='M210 150 C 175 110 160 80 165 50 C 195 70 210 100 220 130 Z'/></g></svg>");
  background-position: bottom right;
  filter: drop-shadow(0 -4px 8px rgba(0,0,0,0.25));
}

/* Cinematic render treatment: real photo + sky gradient + ground shadow + vignette */
.home-card .ph.render{ background: linear-gradient(180deg, #C8D4E0 0%, #E8DCC9 60%, #D9C6B3 100%); }
.home-card .ph.render img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
}
.home-card .ph.render .render-grade{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(28,23,20,0.32) 0%, rgba(28,23,20,0) 55%),
    linear-gradient(180deg, rgba(242,233,223,0.08) 0%, rgba(242,233,223,0) 30%, rgba(28,23,20,0.15) 100%);
}

.home-card h3{
  font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1; margin: 0; letter-spacing: -0.015em;
}
.home-card .count{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--terra-2); margin-bottom: 6px;
}
.home-card .price{
  font-family: var(--serif); font-size: 22px; color: var(--ink); margin-top: 12px;
}
.home-card .price .lbl{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-mute); display: block; margin-bottom: 4px; }
.home-card .price strong{ font-weight: 500; }
.home-card .price small{ font-size: 13px; color: var(--text-mute); font-family: var(--sans); margin-left: 6px; }

.specs{ display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--rule-soft); }
.specs > div{ padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
.specs > div:nth-child(odd){ padding-right: 12px; border-right: 1px solid var(--rule-soft); }
.specs > div:nth-child(even){ padding-left: 12px; }
.specs .k{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-mute); }
.specs .v{ font-family: var(--serif); font-size: 22px; line-height: 1.05; margin-top: 4px; letter-spacing: -0.01em; }
.specs .v small{ font-size: 12px; color: var(--text-mute); font-family: var(--sans); margin-left: 4px; }

/* 6-cell spec grid for homes, 3 cols × 2 rows */
.specs.specs-6{
  grid-template-columns: 1fr 1fr 1fr;
}
.specs.specs-6 > div{
  padding: 14px 12px;
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.specs.specs-6 > div:nth-child(odd){ padding-right: 12px; }
.specs.specs-6 > div:nth-child(even){ padding-left: 12px; }
.specs.specs-6 > div:nth-child(3n){ border-right: 0; padding-right: 0; }
.specs.specs-6 > div:nth-child(3n+1){ padding-left: 0; }
.specs.specs-6 > div:nth-child(4),
.specs.specs-6 > div:nth-child(5),
.specs.specs-6 > div:nth-child(6){ border-bottom: 0; }
@media (max-width: 520px){
  .specs.specs-6{ grid-template-columns: 1fr 1fr; }
  .specs.specs-6 > div{ border-right: 1px solid var(--rule-soft) !important; padding: 12px !important; border-bottom: 1px solid var(--rule-soft) !important; }
  .specs.specs-6 > div:nth-child(2n){ border-right: 0 !important; }
  .specs.specs-6 > div:nth-last-child(-n+2){ border-bottom: 0 !important; }
}

/* ── Dual perspective slots in home cards ──── */
.home-perspectives{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 600px){ .home-perspectives{ grid-template-columns: 1fr; } }
.perspective{
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 3px;
  overflow: hidden;
  background: linear-gradient(180deg, #C8D4E0 0%, #E8DCC9 60%, #D9C6B3 100%);
  border: 1px solid var(--rule-soft);
}
.perspective image-slot{
  display: block;
  width: 100%; height: 100%;
  --slot-bg: transparent;
  --slot-border: transparent;
  --slot-text: rgba(28,23,20,0.55);
}
.perspective .pview-tag{
  position: absolute; z-index: 4; bottom: 12px; left: 12px;
  padding: 6px 10px; border-radius: 2px;
  background: rgba(28,23,20,0.82); color: var(--cream);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
  pointer-events: none;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.perspective .pview-hint{
  position: absolute; top: 10px; right: 10px; z-index: 3;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(242,233,223,0.85);
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--terra-2);
  pointer-events: none;
}

/* Dark variant (Bungalow card) */
.home-card.dark .perspective{ background: linear-gradient(180deg, #2A2520 0%, #3A2F28 100%); border-color: rgba(242,233,223,0.18); }
.home-card.dark .perspective image-slot{ --slot-text: rgba(242,233,223,0.55); }
.home-card.dark .perspective .pview-hint{ background: rgba(242,233,223,0.15); color: var(--cream); }
.arch-grid{
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 1000px){ .arch-grid{ grid-template-columns: 1fr; } }

.arch-feature{ margin: 0; }
.arch-feature-img{
  position: relative; overflow: hidden;
  aspect-ratio: 3/2; border-radius: 4px;
  background: linear-gradient(180deg, #C8D4E0 0%, #E8DCC9 60%, #D9C6B3 100%);
  border: 1px solid var(--rule-soft);
}
.arch-feature-img img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.92) contrast(1.05);
}
.arch-feature-img .render-grade{
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(28,23,20,0.32) 0%, rgba(28,23,20,0) 55%),
    linear-gradient(180deg, rgba(242,233,223,0.08) 0%, rgba(242,233,223,0) 30%, rgba(28,23,20,0.15) 100%);
}
/* Watercolour variant, cream paper background and contain-fit so the
   soft-edged painting doesn't get cropped by the gradient. */
.arch-feature-img--watercolour{
  background: #FBF6EE;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4),
              inset 0 2px 8px rgba(28,23,20,0.05);
}
.arch-feature-img--watercolour img{
  object-fit: contain;
  filter: none;
  padding: 14px;
}
.arch-feature figcaption{
  margin-top: 12px;
  font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--text-mute);
}

.arch-notes{ list-style: none; padding: 0; margin: 0; counter-reset: archn; display: grid; gap: 22px; }
.arch-notes li{
  display: grid; grid-template-columns: 56px 1fr; gap: 0 22px; align-items: baseline;
  padding-top: 22px; border-top: 1px solid var(--rule-soft);
}
.arch-notes li:first-child{ border-top: 0; padding-top: 0; }
.arch-notes .n{
  grid-column: 1;
  font-family: var(--serif); font-style: italic;
  font-size: 32px; line-height: 1; color: var(--terra-2);
  letter-spacing: -0.02em;
}
.arch-notes h3{
  grid-column: 2; margin: 0 0 8px;
  font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.18; letter-spacing: -0.01em;
  color: var(--ink);
}
.arch-notes p{
  grid-column: 2; margin: 0;
  font-size: 15.5px; line-height: 1.55; color: var(--ink-soft);
  max-width: 50ch;
}
.pricelist{
  background: white; border: 1px solid var(--rule-soft); border-radius: 4px;
  overflow: hidden;
}

/* ── Floor plans gallery ──────────── */
.plans-gallery{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
  padding: 8px 4px 24px;
}
@media (max-width: 720px){ .plans-gallery{ grid-template-columns: 1fr; } }

/* Museum-framed plan card, matched to .sketch-card paper aesthetic */
.plan-card{
  position: relative;
  margin: 0;
  background: #FBF6EE;
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  padding: 18px 18px 0;
  overflow: hidden;
  cursor: zoom-in;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 10px 24px -14px rgba(28,23,20,0.22),
    0 2px 6px -2px rgba(28,23,20,0.10);
  transition: transform .35s cubic-bezier(.2,.7,.25,1),
              box-shadow .35s ease;
}
.plan-card::before{
  /* faint paper-grain wash, watercolour-stock feel matching sketches */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 20% 15%, rgba(177,118,100,0.05), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(111,127,88,0.04), transparent 60%);
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.9;
}
.plan-card:hover{
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 22px 44px -22px rgba(28,23,20,0.32),
    0 6px 14px -4px rgba(28,23,20,0.16);
  z-index: 2;
}
.plan-img{
  position: relative;
  aspect-ratio: 1 / 1;
  background: #FFFCF6;
  border: 1px solid rgba(74,65,62,0.08);
  border-radius: 2px;
  display: grid; place-items: center;
  overflow: hidden;
  padding: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4),
              inset 0 2px 6px rgba(28,23,20,0.04);
}
.plan-img img{
  width: 100%; height: 100%; object-fit: contain;
  display: block;
  transition: transform .6s ease;
}
.plan-card:hover .plan-img img{ transform: scale(1.012); }

.plan-card figcaption{
  display: flex; align-items: baseline; gap: 12px;
  padding: 16px 4px 18px;
  background: transparent;
  border-top: 1px solid transparent;
}
.plan-card .num{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--terra);
  padding: 2px 7px;
  border: 1px solid rgba(177,118,100,0.35);
  border-radius: 2px;
  flex-shrink: 0;
}
.plan-card .lbl{
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-style: italic;
  color: var(--ink);
  letter-spacing: 0.005em;
  line-height: 1.25;
}

/* Lightbox */
.plan-lightbox{
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(28,23,20,0.94);
  display: grid; place-items: center;
  padding: clamp(20px, 4vw, 60px);
  animation: lbFade .2s ease;
}
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
.lb-stage{
  position: relative;
  max-width: min(1100px, 92vw);
  max-height: 92vh;
  display: grid; grid-template-rows: 1fr auto; gap: 16px;
}
.lb-stage img{
  max-width: 100%; max-height: calc(92vh - 80px);
  background: white; padding: 16px; border-radius: 4px;
  object-fit: contain;
}
.lb-caption{
  text-align: center;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(242,233,223,0.78);
}
.lb-caption span:first-child{ color: var(--terra); }
.plan-lightbox button{
  position: absolute;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(242,233,223,0.12);
  color: var(--cream);
  font-size: 22px; line-height: 1;
  border: 1px solid rgba(242,233,223,0.22);
  cursor: pointer; z-index: 2;
}
.plan-lightbox button:hover{ background: rgba(242,233,223,0.22); }
.lb-close{ top: 18px; right: 18px; }
.lb-prev{ left: clamp(8px, 2vw, 24px); top: 50%; transform: translateY(-50%); }
.lb-next{ right: clamp(8px, 2vw, 24px); top: 50%; transform: translateY(-50%); }

/* Suppress orphaned old plans-* styles */
.plans-frame, .plans-frame object, .plans-actions, .plans-note, .plans-fallback{ display: none !important; }

/* ── Section: Price Ranges (summary) ────────── */
.price-ranges{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2vw, 32px);
}
@media (max-width: 900px){ .price-ranges{ grid-template-columns: 1fr; } }

.prc-card{
  background: white;
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  padding: clamp(28px, 3vw, 44px);
  display: grid; gap: 22px;
  position: relative; overflow: hidden;
}
.prc-card.dark{
  background: var(--ink);
  color: var(--cream);
  border-color: transparent;
}
.prc-card.dark::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("assets/topo.svg");
  background-size: 1400px auto; background-position: center; background-repeat: no-repeat;
  opacity: 0.10; filter: invert(1) brightness(2.6);
}
.prc-card > *{ position: relative; }

.prc-card .tag{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--terra-2);
  display: flex; justify-content: space-between; align-items: baseline;
}
.prc-card.dark .tag{ color: var(--clay); }
.prc-card .tag .units{ color: var(--text-mute); }
.prc-card.dark .tag .units{ color: rgba(242,233,223,0.55); }

.prc-card h3{
  font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 4.2vw, 60px); line-height: 0.95;
  letter-spacing: -0.02em; margin: 0;
}

.prc-range{
  display: grid; gap: 10px;
  padding: 16px 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.prc-card.dark .prc-range{ border-color: rgba(242,233,223,0.18); }
.prc-range .row{
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
.prc-range .lbl{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-mute);
}
.prc-card.dark .prc-range .lbl{ color: rgba(242,233,223,0.55); }
.prc-range .val{
  font-family: var(--serif); font-size: clamp(28px, 3vw, 40px); line-height: 1;
  letter-spacing: -0.015em;
}
.prc-range .val small{ font-family: var(--sans); font-size: 13px; color: var(--text-mute); letter-spacing: 0; margin-left: 4px; }
.prc-card.dark .prc-range .val small{ color: rgba(242,233,223,0.55); }

/* Range bar */
.prc-bar{
  height: 6px; border-radius: 999px;
  background: var(--cream-3); position: relative; overflow: hidden;
  margin: 6px 0 4px;
}
.prc-card.dark .prc-bar{ background: rgba(242,233,223,0.18); }
.prc-bar > span{
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--terra), var(--terra-2));
  border-radius: 999px;
}
.prc-bar .tick{
  position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink);
}
.prc-card.dark .prc-bar .tick{ background: var(--cream); }

.prc-tiers{
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
}
.prc-tiers > div{
  padding: 4px 14px 0 0;
  border-right: 1px solid var(--rule-soft);
}
.prc-tiers > div:not(:first-child){ padding-left: 14px; }
.prc-tiers > div:last-child{ border-right: 0; padding-right: 0; }
.prc-card.dark .prc-tiers > div{ border-color: rgba(242,233,223,0.18); }
.prc-tiers .k{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 6px;
}
.prc-card.dark .prc-tiers .k{ color: rgba(242,233,223,0.55); }
.prc-tiers .v{
  font-family: var(--serif); font-size: 19px; line-height: 1.15;
  letter-spacing: -0.005em;
}
.prc-tiers .v small{ display: block; font-family: var(--sans); font-size: 12px; color: var(--text-mute); margin-top: 3px; }
.prc-card.dark .prc-tiers .v small{ color: rgba(242,233,223,0.5); }

.prc-foot{
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: clamp(20px, 2vw, 32px);
  padding-top: 22px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-mute);
}
.prc-foot .leg{ display: inline-flex; align-items: center; gap: 8px; }
.prc-foot .leg .sw{ width: 8px; height: 8px; border-radius: 50%; background: var(--terra); }
.prc-foot .spacer{ flex: 1; }
.prc-foot a{
  color: var(--terra-2);
  border-bottom: 1px solid var(--terra);
  padding-bottom: 3px;
}
.pl-head, .pl-row{
  display: grid;
  grid-template-columns: 56px 1.1fr 0.9fr 0.9fr 1fr 1.2fr;
  gap: 0;
  align-items: center;
}
.pl-head > *, .pl-row > *{
  padding: 14px 18px;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.pl-head{
  background: var(--cream-2);
  border-bottom: 1px solid var(--rule-soft);
}
.pl-head > *{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-mute);
}
.pl-row{ border-bottom: 1px solid var(--rule-soft); font-size: 15px; }
.pl-row:last-child{ border-bottom: 0; }
.pl-row:hover{ background: var(--cream); }
.pl-row .lot{ font-family: var(--mono); color: var(--text-mute); font-size: 13px; }
.pl-row .type{ font-family: var(--serif); font-size: 19px; }
.pl-row .price{ font-family: var(--serif); font-size: 20px; }
.pl-row .price .amt{ letter-spacing: -0.01em; }
.pl-row .tag{
  display: inline-block;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: var(--cream-2); color: var(--text-mute);
}
.pl-row .tag.bumi{ background: rgba(177,118,100,0.16); color: var(--terra-2); }
.pl-row .tag.bumi::before{ content:"●"; margin-right: 6px; font-size: 8px; }

@media (max-width: 760px){
  .pl-head{ display: none; }
  .pl-row{
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "lot type"
      ". status"
      ". sizes"
      ". price";
    padding: 12px 0;
  }
  .pl-row .lot{ grid-area: lot; }
  .pl-row .type{ grid-area: type; }
  .pl-row .status{ grid-area: status; padding-top: 0; }
  .pl-row .land, .pl-row .build{ display: inline-block; grid-area: sizes; padding-top: 0; }
  .pl-row .price{ grid-area: price; padding-top: 4px; }
}

.pl-foot{
  padding: 18px 22px;
  background: var(--cream-2);
  border-top: 1px solid var(--rule-soft);
  font-size: 13px; color: var(--text-mute);
  display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between;
}
.pl-foot .leg{ display: inline-flex; align-items: center; gap: 8px; }
.pl-foot .leg .sw{ width: 8px; height: 8px; border-radius: 50%; background: var(--terra); }

/* ── Section: Location ───────────────────────── */
.loc-grid{
  display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 900px){ .loc-grid{ grid-template-columns: 1fr; } }

.loc-map{
  aspect-ratio: 1 / 1;
  background: var(--cream-2);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  position: relative; overflow: hidden;
}
.loc-map iframe{ filter: saturate(0.7) sepia(0.15) hue-rotate(-10deg) brightness(0.98); }
.loc-map .open{
  position: absolute; left: 16px; bottom: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); background: rgba(242,233,223,0.95);
  padding: 8px 12px; border-radius: 999px; border: 1px solid var(--rule-soft);
  z-index: 2;
  box-shadow: 0 2px 10px rgba(28,23,20,0.10);
}

.amen{ display: grid; gap: 28px; }
.amen-grp{ border-top: 1px solid var(--rule-soft); padding-top: 18px; }
.amen-grp .h{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--terra-2); margin-bottom: 14px;
}
.amen-grp ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.amen-grp li{
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: 16px; padding: 6px 0; border-bottom: 1px dashed var(--rule-soft);
  font-size: 15px;
}
.amen-grp li:last-child{ border-bottom: 0; }
.amen-grp li .name{ color: var(--ink); }
.amen-grp li .dist{ font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--text-mute); }

/* ── Section: Register ───────────────────────── */
.reg-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 900px){ .reg-grid{ grid-template-columns: 1fr; } }

.reg-form{ display: grid; gap: 16px; }
.field{ display: grid; gap: 6px; }
.field label{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(242,233,223,0.70);
}
.field input, .field select, .field textarea{
  background: transparent;
  border: 0; border-bottom: 1px solid rgba(242,233,223,0.28);
  padding: 12px 0 10px; color: var(--cream); font-size: 17px;
  border-radius: 0;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none; border-bottom-color: var(--cream);
}
/* Force select field text colour, native dropdowns override otherwise.
   Also drop a custom chevron in cream so it reads on the terra background. */
.field select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: var(--cream);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path fill='none' stroke='%23F2E9DF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 5l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 24px;
  cursor: pointer;
}
/* The dropdown list itself, options render with OS chrome but most browsers
   honour these two. */
.field select option{
  background-color: var(--ink);
  color: var(--cream);
}
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 600px){ .field-row{ grid-template-columns: 1fr; } }

.reg-submit{ margin-top: 16px; display: flex; gap: 12px; flex-wrap: wrap; }

.reg-contact{ display: grid; gap: 28px; }
.reg-contact .card{
  border: 1px solid rgba(242,233,223,0.22);
  padding: 24px;
  border-radius: 4px;
  display: grid; gap: 8px;
}
.reg-contact .card.wa{ background: var(--green); border-color: transparent; }
.reg-contact .card .h{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(242,233,223,0.78);
}
.reg-contact .card .n{
  font-family: var(--serif); font-size: 32px; line-height: 1.1; letter-spacing: -0.01em; color: var(--cream);
}
.reg-contact .card a.action{
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream); border-bottom: 1px solid rgba(242,233,223,0.45);
  padding-bottom: 4px; align-self: start;
}

/* ── Footer ──────────────────────────────────── */
footer{
  background: var(--ink-deep);
  color: rgba(242,233,223,0.78);
  padding: 64px 0 36px;
}
footer .row{
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(242,233,223,0.14);
}
@media (max-width: 900px){ footer .row{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ footer .row{ grid-template-columns: 1fr; } }
footer .h{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(242,233,223,0.5); margin-bottom: 14px;
}
footer .brand-blk{ display: grid; gap: 14px; }
footer .wordmark{
  font-family: var(--display); font-weight: 300;
  font-size: 22px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--cream);
}
footer .meta{ font-size: 14px; line-height: 1.6; color: rgba(242,233,223,0.65); max-width: 38ch; }
footer ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 14px; }
footer a:hover{ color: var(--cream); }
footer .baseline{
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-top: 24px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(242,233,223,0.5);
}

/* ── Tiny utilities ──────────────────────────── */
[hidden]{ display: none !important; }
.spacer-s{ height: 24px; } .spacer-m{ height: 48px; } .spacer-l{ height: 80px; }
.split-cta{ display: flex; gap: 12px; flex-wrap: wrap; }

/* Focus visible */
:focus-visible{ outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 2px; }

/* Print */
@media print{
  .nav, .reg-submit, footer .baseline a{ display: none !important; }
}

/* ─────────────────────────────────────────────
   VALUE MARQUEE (below hero)
   ───────────────────────────────────────────── */
.marquee{
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  background: var(--cream);
  overflow: hidden;
  position: relative;
}
.marquee::before, .marquee::after{
  content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
}
.marquee::before{ left: 0; background: linear-gradient(90deg, var(--cream), rgba(242,233,223,0)); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--cream), rgba(242,233,223,0)); }
.marquee-track{
  display: inline-flex; gap: 0;
  white-space: nowrap;
  animation: marquee 38s linear infinite;
  padding: 18px 0;
}
.marquee-track > span{
  display: inline-flex; align-items: center; gap: 28px;
  padding: 0 28px;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 26px; line-height: 1; letter-spacing: -0.01em;
  color: var(--ink);
}
.marquee-track .dot{
  width: 6px; height: 6px; border-radius: 50%; background: var(--terra);
  display: inline-block;
}
.marquee-track .num{ font-family: var(--serif); color: var(--terra-2); font-style: italic; }
@keyframes marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation: none; } }

/* ─────────────────────────────────────────────
   LIFESTYLE, A Day at Panthera (filmstrip)
   ───────────────────────────────────────────── */
.section.cream-2{ background: var(--cream-2); }

.day-intro{
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 4vw, 64px);
  align-items: end; margin-bottom: clamp(40px, 5vw, 64px);
}
@media (max-width: 900px){ .day-intro{ grid-template-columns: 1fr; } }
.day-intro .note{
  font-family: var(--serif); font-style: italic; font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.35; color: var(--ink-soft); max-width: 38ch;
}

/* ─────────────────────────────────────────────
   DAY-AT-PANTHERA CAROUSEL
   Snap-scroll filmstrip with prev/next chevrons
   and dot indicators. Desktop shows a 6-up grid;
   tablet / mobile snap-scroll one card at a time.
   ───────────────────────────────────────────── */
.day-carousel{ position: relative; }
.day-strip{
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
@media (max-width: 1100px){
  .day-strip{
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 4px 4px 16px;
    margin: -4px -4px 0;
    scrollbar-width: none;
  }
  .day-strip::-webkit-scrollbar{ display: none; }
  .day-strip .day{
    flex: 0 0 calc(50% - 8px);
    scroll-snap-align: start;
    min-width: 0;
  }
}
@media (max-width: 720px){
  .day-strip .day{ flex-basis: 78%; }
}
@media (max-width: 480px){
  .day-strip .day{ flex-basis: 88%; }
}
/* Prev/next chevrons, only shown when the strip is scrollable */
.day-nav{
  position: absolute;
  top: 28%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(28,23,20,0.78);
  color: var(--cream);
  border: 1px solid rgba(242,233,223,0.18);
  font-size: 22px; line-height: 1;
  display: none;
  align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, opacity .15s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0; padding-bottom: 3px;
}
.day-nav:hover{ background: var(--ink); transform: translateY(-50%) scale(1.05); }
.day-nav:disabled{ opacity: 0.35; cursor: default; transform: translateY(-50%); }
.day-nav--prev{ left: -8px; }
.day-nav--next{ right: -8px; }
@media (max-width: 1100px){
  .day-nav{ display: inline-flex; }
}
@media (max-width: 600px){
  .day-nav{ width: 36px; height: 36px; font-size: 20px; top: 30%; }
  .day-nav--prev{ left: -4px; }
  .day-nav--next{ right: -4px; }
}
/* Dot indicators, only visible when carousel is scrollable */
.day-dots{
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.day-dots button{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(28,23,20,0.18);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.day-dots button[aria-selected="true"]{
  background: var(--terra);
  transform: scale(1.3);
}
@media (max-width: 1100px){
  .day-dots{ display: flex; }
}

.day{
  position: relative; display: grid; gap: 14px;
}
.day-ph{
  aspect-ratio: 3/4; border-radius: 4px; overflow: hidden;
  background: linear-gradient(180deg, #C8D4E0 0%, #E8DCC9 65%, #D9C6B3 100%);
  border: 1px solid var(--rule-soft);
  position: relative;
}
.day-ph svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.day-ph .day-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform .8s cubic-bezier(.2,.6,.2,1), filter .4s ease;
  filter: saturate(.92) contrast(1.03);
}
.day:hover .day-ph .day-img{ transform: scale(1.04); filter: saturate(1) contrast(1.05); }
.day-ph .stamp{
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  background: rgba(28,23,20,0.85); color: var(--cream);
  padding: 5px 9px; border-radius: 2px;
}
.day-ph .light{
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--lx, 30%) var(--ly, 25%), rgba(255,236,210,0.55), rgba(255,236,210,0) 55%);
  mix-blend-mode: screen;
}
.day-meta{ display: grid; gap: 4px; }
.day-meta .t{
  font-family: var(--serif); font-size: 22px; line-height: 1.18; letter-spacing: -0.01em;
}
.day-meta .b{
  font-size: 14px; line-height: 1.5; color: var(--ink-soft);
  max-width: 28ch;
}

/* Day SVG illustrations: silhouetted scenes, simple rectangles/circles only */
.day-art-house{ /* dawn through evening rendered via gradient + circle 'sun' + roof shapes */
  position: absolute; inset: 0;
}

/* ─────────────────────────────────────────────
   SPECIFICATIONS, finishes schedule
   ───────────────────────────────────────────── */
.spec-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3vw, 48px);
}
@media (max-width: 800px){ .spec-grid{ grid-template-columns: 1fr; } }
.spec-block{
  background: white; border: 1px solid var(--rule-soft); border-radius: 4px;
  padding: clamp(20px, 2.4vw, 32px);
}
.spec-block .h{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--terra-2);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--rule-soft); padding-bottom: 12px; margin-bottom: 14px;
}
.spec-block .h .ix{ color: var(--text-mute); font-weight: 500; }
.spec-row{
  display: grid; grid-template-columns: 140px 1fr; gap: 18px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--rule-soft);
  align-items: baseline;
}
.spec-row:last-child{ border-bottom: 0; }
.spec-row .k{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-mute);
}
.spec-row .v{
  font-family: var(--serif); font-size: 18px; line-height: 1.3; letter-spacing: -0.005em;
  color: var(--ink);
}
.spec-row .v small{ display: block; font-family: var(--sans); font-size: 13px; color: var(--text-mute); margin-top: 2px; }

/* ─────────────────────────────────────────────
   MORTGAGE CALCULATOR
   ───────────────────────────────────────────── */
.calc-grid{
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 1000px){ .calc-grid{ grid-template-columns: 1fr; } }

.calc-controls{ display: grid; gap: 22px; }
.calc-field{ display: grid; gap: 10px; }
.calc-field .row{
  display: flex; align-items: baseline; justify-content: space-between;
}
.calc-field .lbl{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-mute);
}
.calc-field .val{
  font-family: var(--serif); font-size: 28px; line-height: 1; letter-spacing: -0.01em; color: var(--ink);
}
.calc-field .val small{ font-family: var(--sans); font-size: 13px; color: var(--text-mute); margin-left: 6px; letter-spacing: 0; }
.calc-field input[type="range"]{
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; background: var(--rule-soft); border-radius: 2px; cursor: pointer;
}
.calc-field input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--terra-2); border: 3px solid var(--cream);
  box-shadow: 0 1px 6px rgba(28,23,20,0.25);
  cursor: pointer;
}
.calc-field input[type="range"]::-moz-range-thumb{
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--terra-2); border: 3px solid var(--cream);
  cursor: pointer; box-shadow: 0 1px 6px rgba(28,23,20,0.25);
}
.calc-presets{
  display: flex; flex-wrap: wrap; gap: 8px;
}
.calc-preset{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--rule); color: var(--ink-soft);
  background: transparent; cursor: pointer;
  transition: all .15s ease;
}
.calc-preset:hover{ border-color: var(--ink); color: var(--ink); }
.calc-preset.active{ background: var(--ink); color: var(--cream); border-color: var(--ink); }

.calc-result{
  background: var(--ink); color: var(--cream);
  border-radius: 4px; padding: clamp(28px, 3vw, 44px);
  display: grid; gap: 22px; position: relative; overflow: hidden;
}
.calc-result::before{
  content: ""; position: absolute; inset: 0;
  background-image: url("assets/topo.svg");
  background-size: 1400px auto; background-position: center; background-repeat: no-repeat;
  opacity: 0.10; filter: invert(1) brightness(2.6); pointer-events: none;
}
.calc-result > *{ position: relative; }
.calc-result .hd{
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0; padding: 0 0 14px; border-bottom: 1px solid rgba(242,233,223,0.18);
}
.calc-result .hd .lbl{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(242,233,223,0.65);
}
.calc-result .hd .lender{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; color: rgba(242,233,223,0.45);
}
.calc-result .big{
  font-family: var(--serif); font-size: clamp(56px, 7vw, 96px); line-height: 0.96; letter-spacing: -0.025em;
  color: var(--cream);
}
.calc-result .big small{ font-family: var(--sans); font-size: 16px; color: rgba(242,233,223,0.55); letter-spacing: 0.16em; text-transform: uppercase; display: block; margin-top: 8px; }
.calc-breakdown{
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
  border-top: 1px solid rgba(242,233,223,0.18);
}
.calc-breakdown > div{
  padding: 16px 14px 4px 0;
  border-right: 1px solid rgba(242,233,223,0.18);
}
.calc-breakdown > div:last-child{ border-right: 0; padding-right: 0; padding-left: 0; }
.calc-breakdown > div:not(:first-child){ padding-left: 14px; }
.calc-breakdown .k{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(242,233,223,0.55); margin-bottom: 6px;
}
.calc-breakdown .v{ font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; line-height: 1.1; }
.calc-bar{
  margin-top: 4px; display: grid; gap: 8px;
}
.calc-bar .bar{
  height: 6px; background: rgba(242,233,223,0.18); border-radius: 999px; overflow: hidden;
}
.calc-bar .bar > div{
  height: 100%; background: var(--terra);
  width: 0%; transition: width .35s ease;
}
.calc-bar .leg{
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(242,233,223,0.65);
}
.calc-bar .leg .principal::before{ content:"●"; color: var(--cream); margin-right:6px; font-size:10px; }
.calc-bar .leg .interest::before{ content:"●"; color: var(--terra); margin-right:6px; font-size:10px; }
.calc-note{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(242,233,223,0.5);
}

/* ─────────────────────────────────────────────
   LOCATION, Custom neighborhood map
   ───────────────────────────────────────────── */
.loc-grid{
  display: block;
}
.loc-map-pro{
  position: relative;
  background: linear-gradient(160deg, #EBDFD1 0%, #E5D7C4 60%, #DCC8B1 100%);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 1200 / 720;
}
.loc-map-pro svg{ width: 100%; height: 100%; display: block; }
.loc-map-pro .open{
  position: absolute; left: 18px; top: 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); background: rgba(242,233,223,0.95);
  padding: 9px 14px; border-radius: 999px; border: 1px solid var(--rule-soft);
  z-index: 5;
  box-shadow: 0 2px 10px rgba(28,23,20,0.12);
}
.loc-map-pro .coord{
  position: absolute; right: 18px; bottom: 18px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); background: rgba(242,233,223,0.85);
  padding: 7px 12px; border-radius: 2px;
  z-index: 5;
}

/* Pins on map */
.pin-g{ cursor: pointer; transition: transform .15s ease; transform-origin: center; transform-box: fill-box; }
.pin-g:hover, .pin-g.active{ transform: scale(1.15); }
.pin-g .pin-num{
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px; font-weight: 600;
  pointer-events: none;
  letter-spacing: 0;
}
.pin-g.daily .pin-bg{ fill: #B17664; }
.pin-g.schools .pin-bg{ fill: #6F7F58; }
.pin-g.connect .pin-bg{ fill: #2E2825; }
.pin-g.future .pin-bg{ fill: #C88A76; }
.pin-g .pin-bg{ stroke: rgba(242,233,223,0.95); stroke-width: 1.6; }
.pin-g.future .pin-num{ fill: #1C1714; }
.pin-g:not(.future) .pin-num{ fill: #F2E9DF; }

/* Site marker (Panthera) */
.site-mark .ring{ fill: none; stroke: #8A4638; }
.site-mark .core{ fill: #8A4638; stroke: #F2E9DF; stroke-width: 2; }
.site-mark .label{
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 22px;
  fill: #2E2825;
}
.site-mark .sub{
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  fill: #8A4638;
  text-transform: uppercase;
}

/* Compass & scale */
.map-compass text{ font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.18em; fill: rgba(46,40,37,0.7); }
.map-compass .arr{ fill: #8A4638; }
.map-scale text{ font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: 0.18em; fill: rgba(46,40,37,0.7); text-transform: uppercase; }

.map-legend{
  position: absolute; top: 18px; right: 18px;
  background: rgba(242,233,223,0.94);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  padding: 14px 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  z-index: 4;
  display: grid; gap: 8px;
}
.map-legend .row{ display: flex; align-items: center; gap: 9px; color: var(--ink-soft); }
.map-legend .sw{ width: 10px; height: 10px; border-radius: 50%; }
.map-legend .sw.daily{ background: #B17664; }
.map-legend .sw.schools{ background: #6F7F58; }
.map-legend .sw.connect{ background: #2E2825; }
.map-legend .sw.future{ background: #C88A76; }
.map-legend .sw.site{ background: #8A4638; box-shadow: 0 0 0 3px rgba(138,70,56,0.22); }

/* Amenity list, full-width 4 columns */
.amen{ margin-top: clamp(28px, 3vw, 44px); display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2vw, 36px); }
@media (max-width: 1000px){ .amen{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){  .amen{ grid-template-columns: 1fr; } }
.amen-grp{ border-top: 2px solid var(--terra); padding-top: 16px; }
.amen-grp.schools{ border-top-color: var(--green); }
.amen-grp.connect{ border-top-color: var(--ink-deep); }
.amen-grp.future{ border-top-color: var(--clay); }
.amen-grp .h{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--terra-2); margin-bottom: 14px;
}
.amen-grp.schools .h{ color: var(--green-deep); }
.amen-grp.connect .h{ color: var(--ink-deep); }
.amen-grp.future .h{ color: var(--terra-2); }
.amen-grp ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.amen-grp li{
  display: grid; grid-template-columns: 26px 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px dashed var(--rule-soft);
  font-size: 14.5px;
  cursor: pointer;
  transition: background .15s ease, padding .15s ease;
}
.amen-grp li:last-child{ border-bottom: 0; }
.amen-grp li:hover, .amen-grp li.active{
  background: var(--cream-2);
  padding-left: 6px; padding-right: 6px;
  margin: 0 -6px;
  border-radius: 3px;
}
.amen-grp li .num{
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--terra); color: var(--cream);
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  display: grid; place-items: center;
  letter-spacing: 0;
}
.amen-grp.schools li .num{ background: var(--green); }
.amen-grp.connect li .num{ background: var(--ink-deep); }
.amen-grp.future  li .num{ background: var(--clay); color: var(--ink); }
.amen-grp li .name{ color: var(--ink); line-height: 1.3; }
.amen-grp li .dist{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-mute); }

/* ── Map filter chips (above map) ───────────── */
.map-filters{
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.map-filters button{
  padding: 9px 14px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.map-filters button .sw{
  width: 8px; height: 8px; border-radius: 50%; background: var(--terra);
}
.map-filters button[data-filter="all"] .sw{ background: var(--ink); }
.map-filters button[data-filter="daily"] .sw{ background: #B17664; }
.map-filters button[data-filter="schools"] .sw{ background: #6F7F58; }
.map-filters button[data-filter="connect"] .sw{ background: #2E2825; }
.map-filters button[data-filter="future"] .sw{ background: #C88A76; }
.map-filters button .ct{ color: var(--text-mute); font-weight: 400; }
.map-filters button:hover{ border-color: var(--ink); color: var(--ink); }
.map-filters button.active{
  background: var(--ink); color: var(--cream); border-color: var(--ink);
}
.map-filters button.active .ct{ color: rgba(242,233,223,0.6); }

/* Pin animations (sequential entry + dim by filter) */
.pin-g{
  opacity: 0;
  transform: translateY(-8px) scale(0.4);
  transition: opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1), filter .25s ease;
}
.pin-g.drop-in{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.pin-g.dim{
  opacity: 0.18;
  pointer-events: none;
  filter: saturate(0.4);
}

/* Map popup card (slides in from left when pin tapped) */
.map-popup{
  position: absolute; left: 18px; top: 70px;
  z-index: 8;
  width: 260px; max-width: calc(100vw - 60px);
  background: var(--cream);
  border: 1px solid var(--rule-soft);
  border-radius: 6px;
  padding: 18px 20px 16px;
  box-shadow: 0 16px 40px rgba(28,23,20,0.22), 0 2px 6px rgba(28,23,20,0.10);
  display: grid; gap: 10px;
  transform: translateX(-12px); opacity: 0; pointer-events: none;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
}
.map-popup.open{ transform: translateX(0); opacity: 1; pointer-events: auto; }
.map-popup::before{
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px;
  width: 3px; border-radius: 0 2px 2px 0;
  background: var(--terra);
}
.map-popup.cat-daily::before{ background: #B17664; }
.map-popup.cat-schools::before{ background: #6F7F58; }
.map-popup.cat-connect::before{ background: #2E2825; }
.map-popup.cat-future::before{ background: #C88A76; }
.map-popup .pop-close{
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px;
  border-radius: 50%; background: var(--cream-2);
  display: grid; place-items: center;
  font-size: 14px; line-height: 1; color: var(--ink);
  cursor: pointer;
  border: 0;
}
.map-popup .pop-close:hover{ background: var(--cream-3); }
.map-popup .pop-row{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-mute);
}
.map-popup .pop-num{
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--terra); color: var(--cream);
  font-family: var(--mono); font-size: 10.5px;
  display: grid; place-items: center;
  letter-spacing: 0;
}
.map-popup.cat-daily   .pop-num{ background: #B17664; }
.map-popup.cat-schools .pop-num{ background: #6F7F58; }
.map-popup.cat-connect .pop-num{ background: #2E2825; }
.map-popup.cat-future  .pop-num{ background: #C88A76; color: var(--ink); }
.map-popup .pop-name{
  font-family: var(--serif); font-size: 22px; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--ink); margin-top: 2px;
}
.map-popup .pop-meta{
  display: flex; gap: 14px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-mute);
}
.map-popup .pop-meta .v{ color: var(--ink); }
.map-popup .pop-go{
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--terra-2);
  border-bottom: 1px solid var(--terra);
  padding-bottom: 4px;
  align-self: start;
}

@media (max-width: 600px){
  .map-popup{
    left: 10px; right: 10px; top: auto; bottom: 64px;
    width: auto; max-width: none;
    transform: translateY(12px);
  }
  .map-popup.open{ transform: translateY(0); }
}

/* ─────────────────────────────────────────────
   RESPONSIVE POLISH, mobile / tablet / wide
   ───────────────────────────────────────────── */

/* Mobile typography tighten */
@media (max-width: 720px){
  body{ font-size: 16px; }
  .section{ padding: clamp(56px, 12vw, 96px) 0; }
  .hd{ margin-bottom: clamp(28px, 6vw, 48px); }
  .marquee-track > span{ font-size: 19px; padding: 0 18px; gap: 18px; }
  .marquee-track{ padding: 14px 0; }
  .hero{ padding: 36px 0 56px; }
  .hero-cta{ flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-cta .btn{ justify-content: center; }
  .hero-meta{ margin-top: 32px; }
  .hero-meta .v{ font-size: 24px; }

  .stats > div{ padding: 26px 18px 26px 0; }

  .home-perspectives{ grid-template-columns: 1fr; }

  .arch-notes li{ grid-template-columns: 38px 1fr; gap: 0 14px; padding-top: 18px; }
  .arch-notes .n{ font-size: 26px; }
  .arch-notes h3{ font-size: 21px; }

  .prc-card{ padding: 24px; }
  .prc-tiers{ grid-template-columns: 1fr; gap: 0; }
  .prc-tiers > div{
    border-right: 0 !important; border-bottom: 1px solid var(--rule-soft);
    padding: 12px 0 !important;
  }
  .prc-card.dark .prc-tiers > div{ border-bottom-color: rgba(242,233,223,0.18); }
  .prc-tiers > div:last-child{ border-bottom: 0; }

  .calc-result{ padding: 24px; }
  .calc-breakdown{ grid-template-columns: 1fr; }
  .calc-breakdown > div{
    border-right: 0; border-bottom: 1px solid rgba(242,233,223,0.18);
    padding: 12px 0 !important;
  }
  .calc-breakdown > div:last-child{ border-bottom: 0; }

  .reg-grid{ gap: 32px; }
  .reg-contact .card .n{ font-size: 26px; }
}

/* Tablet */
@media (min-width: 721px) and (max-width: 1000px){
  .hero-grid{ grid-template-columns: 1fr; }
  .arch-grid{ grid-template-columns: 1fr; }
  .calc-grid{ grid-template-columns: 1fr; }
  .bertam-grid{ grid-template-columns: 1fr; }
  .faq-grid{ grid-template-columns: 1fr; }
}

/* Wide-screen, extra breathing on huge monitors */
@media (min-width: 1600px){
  :root{ --maxw: 1240px; --gutter: clamp(40px, 7vw, 160px); }
  body{ font-size: 18px; }
}
@media (min-width: 1920px){
  :root{ --maxw: 1320px; --gutter: clamp(60px, 8vw, 220px); }
}

/* Text-block max-widths, keep reading lines comfortable on any size */
.hd .lede, .lede{ max-width: 62ch; }
.body{ max-width: 64ch; }
.cat p, .step .b, .day-meta .b, .arch-notes p, .faq .answer{ max-width: 56ch; }

/* Day-at-Panthera filmstrip, horizontal scroll on mobile */
@media (max-width: 600px){
  .day-strip{
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
    scrollbar-width: thin;
    gap: 10px;
    margin: 0 calc(-1 * var(--gutter));
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .day{ scroll-snap-align: start; }
}

/* Bertam-stats: mobile 1-col */
@media (max-width: 540px){
  .bertam-stats{ grid-template-columns: 1fr; }
  .bertam-stats > div{
    padding: 18px 0 !important;
    border-right: 0 !important;
    border-top: 1px solid var(--rule-soft) !important;
  }
  .bertam-stats > div:first-child{ border-top: 0 !important; }
}

/* ─────────────────────────────────────────────
   WHY BERTAM NOW, investment thesis
   ───────────────────────────────────────────── */
   ───────────────────────────────────────────── */
.bertam-grid{
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 1000px){ .bertam-grid{ grid-template-columns: 1fr; } }

.bertam-thesis{
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(26px, 3vw, 42px); line-height: 1.18; letter-spacing: -0.01em;
  color: var(--ink);
}
.bertam-thesis .accent{ color: var(--terra-2); }

.bertam-stats{
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin-top: 32px;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.bertam-stats > div{
  padding: 22px 22px 22px 0;
  border-right: 1px solid var(--rule-soft);
}
.bertam-stats > div:nth-child(2){ border-right: 0; padding-right: 0; padding-left: 22px; }
.bertam-stats > div:nth-child(3){ padding-right: 22px; }
.bertam-stats > div:nth-child(4){ border-right: 0; padding-right: 0; padding-left: 22px; border-top: 1px solid var(--rule-soft); }
.bertam-stats > div:nth-child(3){ border-top: 1px solid var(--rule-soft); }
.bertam-stats .k{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 8px;
}
.bertam-stats .v{
  font-family: var(--serif); font-size: clamp(36px, 4vw, 56px); line-height: 0.98; letter-spacing: -0.02em;
}
.bertam-stats .u{ font-size: 13px; color: var(--text-mute); margin-top: 6px; max-width: 26ch; line-height: 1.4; }

/* Catalysts timeline */
.catalysts{
  position: relative;
  display: grid; gap: 0;
  padding-left: 26px;
}
.catalysts::before{
  content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px;
  background: var(--rule-soft);
}
.cat{
  position: relative; padding: 18px 0;
  border-bottom: 1px solid var(--rule-soft);
  display: grid; grid-template-columns: 78px 1fr; gap: 18px; align-items: baseline;
}
.cat:last-child{ border-bottom: 0; }
.cat::before{
  content: ""; position: absolute; left: -26px; top: 26px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--cream); border: 2px solid var(--terra);
}
.cat.now::before{ background: var(--terra); box-shadow: 0 0 0 6px rgba(177,118,100,0.18); }
.cat .yr{
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em;
  color: var(--terra-2); font-weight: 500;
}
.cat .yr small{ display: block; font-size: 9.5px; letter-spacing: 0.18em; color: var(--text-mute); text-transform: uppercase; margin-top: 3px; }
.cat h4{
  font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.2; letter-spacing: -0.005em;
  margin: 0 0 6px;
}
.cat p{ margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); max-width: 50ch; }
.cat .tag{
  display: inline-block; margin-top: 8px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: var(--cream-2); color: var(--terra-2);
}

/* ─────────────────────────────────────────────
   RESERVATION JOURNEY
   ───────────────────────────────────────────── */
.journey{
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
@media (max-width: 900px){ .journey{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .journey{ grid-template-columns: 1fr; } }
.step{
  padding: 32px 26px 32px 0;
  border-right: 1px solid var(--rule-soft);
  position: relative;
  display: grid; gap: 12px;
  align-content: start;
}
.step:not(:first-child){ padding-left: 26px; }
.step:last-child{ border-right: 0; padding-right: 0; }
@media (max-width: 900px){
  .step{ padding: 28px 22px !important; border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .step:nth-child(2n){ border-left: 1px solid var(--rule-soft); }
}
.step .n{
  font-family: var(--serif); font-size: 56px; line-height: 1;
  color: var(--terra-2); font-style: italic; letter-spacing: -0.03em;
  font-weight: 300;
}
.step .h{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-mute);
}
.step .t{
  font-family: var(--serif); font-size: 22px; line-height: 1.2; letter-spacing: -0.005em; color: var(--ink);
}
.step .b{ font-size: 14px; line-height: 1.5; color: var(--ink-soft); max-width: 26ch; }
.step .when{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--terra-2);
  margin-top: 6px;
}
.step .when::before{ content: "↳ "; opacity: 0.7; }

/* ─────────────────────────────────────────────
   FAQ
   ───────────────────────────────────────────── */
.faq-grid{
  display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 900px){ .faq-grid{ grid-template-columns: 1fr; } }

.faq-aside .h{
  font-family: var(--serif); font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.01em;
}
.faq-aside .b{ margin-top: 16px; color: var(--ink-soft); font-size: 16px; line-height: 1.55; max-width: 32ch; }
.faq-aside .cta{
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 22px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--terra-2);
  border-bottom: 1px solid var(--terra);
  padding-bottom: 4px;
}

.faq-list{ display: grid; gap: 0; }
.faq{
  border-top: 1px solid var(--rule-soft);
  padding: 0;
}
.faq:last-child{ border-bottom: 1px solid var(--rule-soft); }
.faq summary{
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: grid; grid-template-columns: 36px 1fr 24px; gap: 14px; align-items: baseline;
  font-family: var(--serif); font-size: clamp(20px, 1.8vw, 24px); line-height: 1.25; letter-spacing: -0.005em;
  color: var(--ink);
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary .ix{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--terra-2);
  align-self: center;
}
.faq summary .tog{
  font-family: var(--mono); font-size: 22px; color: var(--terra-2);
  transition: transform .2s ease; line-height: 1;
  justify-self: end;
}
.faq[open] summary .tog{ transform: rotate(45deg); }
.faq .answer{
  padding: 0 0 26px 50px;
  font-size: 15.5px; line-height: 1.65; color: var(--ink-soft);
  max-width: 64ch;
}
.faq .answer p + p{ margin-top: 10px; }
@media (max-width: 600px){
  .faq summary{ grid-template-columns: 28px 1fr 22px; gap: 10px; }
  .faq .answer{ padding-left: 38px; }
}


/* ─────────────────────────────────────────────
   FLOATING WHATSAPP CTA, sticky bottom-right
   ───────────────────────────────────────────── */
.fab-wa{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 950;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--terra-2);
  color: var(--cream);
  box-shadow:
    0 8px 24px rgba(138,70,56,0.40),
    0 2px 6px rgba(28,23,20,0.22);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  isolation: isolate;
}
.fab-wa:hover{
  background: var(--ink);
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 12px 32px rgba(28,23,20,0.45),
    0 4px 10px rgba(28,23,20,0.25);
}
.fab-wa:active{ transform: translateY(0) scale(0.98); }
.fab-wa svg{ position: relative; z-index: 2; }
.fab-wa-pulse{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--terra-2);
  z-index: 1;
  opacity: .55;
  animation: fab-wa-pulse 2.4s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes fab-wa-pulse{
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.55); opacity: 0;   }
  100% { transform: scale(1.55); opacity: 0;   }
}
@media (prefers-reduced-motion: reduce){
  .fab-wa-pulse{ animation: none; opacity: 0; }
  .fab-wa:hover{ transform: none; }
}
/* Lift above the bottom dock on mobile so they don't overlap.
   Shrunk further on small phones to free right-side content from
   being covered by the floating bubble. */
@media (max-width: 760px){
  .fab-wa{ right: 14px; bottom: 80px; width: 48px; height: 48px; }
  .fab-wa svg{ width: 22px; height: 22px; }
}
@media (max-width: 420px){
  .fab-wa{ right: 10px; bottom: 74px; width: 44px; height: 44px; }
  .fab-wa svg{ width: 20px; height: 20px; }
}

/* Footer wordmark stamp, sized & toned for dark bg */
.footer-wordmark{
  opacity: .94;
  letter-spacing: .04em;
}

/* ─────────────────────────────────────────────
   PRICING, full-list CTA block
   Sits below the two range cards. The whole point
   of range-only pricing is the next step is contact.
   ───────────────────────────────────────────── */
.prc-cta{
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 32px 36px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}
.prc-cta::before{
  content: '';
  position: absolute; inset: 0;
  background-image: url("assets/topo.svg");
  background-size: 640px;
  background-position: center;
  opacity: 0.06;
  pointer-events: none;
}
.prc-cta-text{ position: relative; z-index: 1; max-width: 64ch; }
.prc-cta-eyebrow{
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 10px;
}
.prc-cta-text h3{
  font-family: var(--display); font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
  margin: 0 0 10px 0;
  color: var(--cream);
}
.prc-cta-text p{
  font-size: 15px;
  line-height: 1.6;
  color: rgba(242,233,223,0.78);
  margin: 0;
}
.prc-cta-btn{
  position: relative;
  z-index: 1;
  white-space: nowrap;
  font-size: 15px;
  padding: 16px 26px;
  background: var(--terra-2);
  color: var(--cream);
  border: none;
}
.prc-cta-btn:hover{
  background: var(--terra);
  color: var(--cream);
  transform: translateY(-1px);
}
@media (max-width: 760px){
  .prc-cta{
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 26px 24px;
    text-align: left;
  }
  .prc-cta-btn{ justify-self: stretch; text-align: center; }
}

/* ─────────────────────────────────────────────
   LIVE GOOGLE MAPS embed, sits above the
   curated amenities map. Buyers want to SEE the
   real place; this delivers it on tap.
   ───────────────────────────────────────────── */
.loc-realmap{
  margin-bottom: 56px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--cream);
  box-shadow: 0 20px 60px -28px rgba(28,23,20,0.28);
}
.loc-realmap-bar{
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--ink);
  color: var(--cream);
  border-bottom: 1px solid rgba(242,233,223,0.10);
}
.loc-realmap-meta{
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}
.loc-realmap-meta .dot-live{
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #25D366; margin-right: 8px;
  box-shadow: 0 0 0 0 rgba(37,211,102,.6);
  animation: livePulse 1.8s ease-out infinite;
}
@keyframes livePulse{
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.6); }
  70%  { box-shadow: 0 0 0 10px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.loc-realmap-coord{ color: rgba(242,233,223,0.62); text-transform: none; letter-spacing: 0.05em; }
.loc-realmap-actions{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.loc-realmap-actions button{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid rgba(242,233,223,0.20);
  border-radius: 999px;
  color: rgba(242,233,223,0.78);
  background: transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.loc-realmap-actions button:hover{ color: var(--cream); border-color: rgba(242,233,223,0.45); }
.loc-realmap-actions button.active{
  background: var(--cream); color: var(--ink); border-color: var(--cream);
}
.loc-realmap-actions .open{
  margin-left: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(242,233,223,0.85);
  padding: 6px 0;
}
.loc-realmap-actions .open:hover{ color: var(--cream); }
.loc-realmap-frame{ position: relative; aspect-ratio: 16/9; background: #1A1714; }
.loc-realmap-frame iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.loc-realmap-note{
  padding: 14px 22px;
  font-size: 13px; line-height: 1.55;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule-soft);
  background: var(--cream);
}
.loc-amen-divider{
  text-align: center;
  margin: 12px 0 40px;
  position: relative;
}
.loc-amen-divider::before, .loc-amen-divider::after{
  content: '';
  position: absolute; top: 50%;
  width: calc(50% - 180px);
  height: 1px; background: var(--rule-soft);
}
.loc-amen-divider::before{ left: 0; }
.loc-amen-divider::after{ right: 0; }
.loc-amen-divider .mono{
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-mute);
}
@media (max-width: 760px){
  .loc-realmap-bar{ padding: 12px 14px; gap: 10px; }
  .loc-realmap-actions .open{ display: none; }
  .loc-realmap-frame{ aspect-ratio: 4/5; }
  .loc-amen-divider::before, .loc-amen-divider::after{ width: calc(50% - 100px); }
}

/* ─────────────────────────────────────────────
   PRE-LAUNCH BAR, slim, sticky, slides in after
   hero scroll. Dismissable. Always-on urgency cue.
   ───────────────────────────────────────────── */
.prelaunch-bar{
  position: fixed; left: 0; right: 0;
  top: 0;
  z-index: 1095;
  background: linear-gradient(180deg, #2E2825 0%, #1A1714 100%);
  color: var(--cream);
  font-size: 13px;
  border-bottom: 1px solid rgba(242,233,223,0.10);
  box-shadow: 0 6px 24px -10px rgba(0,0,0,0.5);
  display: none;
}
.prelaunch-bar.is-visible{ display: block; }
.prelaunch-bar[hidden]{ display: none !important; }
.prelaunch-inner{
  display: flex; align-items: center; gap: 16px;
  padding: 10px 0;
  flex-wrap: nowrap;
}
.prelaunch-pulse{
  width: 8px; height: 8px; border-radius: 50%;
  background: #C88A76; flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(200,138,118,.7);
  animation: livePulse 1.8s ease-out infinite;
}
.prelaunch-copy{
  flex: 1 1 auto;
  color: rgba(242,233,223,0.85);
  font-size: 13px; line-height: 1.4;
  letter-spacing: 0.01em;
}
.prelaunch-copy strong{
  color: var(--cream);
  font-weight: 500;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  margin-right: 4px;
}
.prelaunch-cta{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--terra);
  color: var(--cream);
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
.prelaunch-cta:hover{ background: #C88A76; transform: translateY(-1px); }
.prelaunch-close{
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: rgba(242,233,223,0.55);
  font-size: 20px; line-height: 1;
  flex: 0 0 auto;
}
.prelaunch-close:hover{
  background: rgba(242,233,223,0.10);
  color: var(--cream);
}
/* When pre-launch bar is visible, shift the topbar down so it sits below it */
.prelaunch-bar.is-visible ~ .topbar{ top: 42px; }
body.has-prelaunch-bar .topbar{ top: 42px; }
@media (max-width: 700px){
  .prelaunch-copy{ font-size: 12px; }
  .prelaunch-copy strong{ display: block; font-size: 10px; margin-bottom: 2px; }
  .prelaunch-cta{ font-size: 10px; padding: 6px 10px; }
}
@media (max-width: 480px){
  /* On very small screens just show the gist + CTA */
  .prelaunch-inner{ gap: 10px; padding: 8px 0; }
  .prelaunch-copy strong{ display: inline; }
  .prelaunch-copy{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ─────────────────────────────────────────────
   CALCULATOR, pre-approval CTA. Sits at the
   bottom of the result panel. Carries the live
   figures into a pre-filled WhatsApp message.
   ───────────────────────────────────────────── */
.calc-preapprove{
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
  padding: 18px 22px;
  background: linear-gradient(135deg, var(--terra) 0%, var(--terra-2) 100%);
  color: var(--cream);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
}
.calc-preapprove:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -12px rgba(138,70,56,0.55);
}
.calc-preapprove-text{ flex: 1; max-width: 60ch; }
.calc-preapprove-eyebrow{
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin-bottom: 4px;
}
.calc-preapprove-title{
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 4px;
}
.calc-preapprove-sub{
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.88);
}
.calc-preapprove-cta{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background .15s ease, border-color .15s ease;
}
.calc-preapprove:hover .calc-preapprove-cta{
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.6);
}
.calc-preapprove-cta .arrow{ font-size: 14px; }
@media (max-width: 700px){
  .calc-preapprove{ flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 18px; }
  .calc-preapprove-cta{ justify-content: center; }
}

/* ─────────────────────────────────────────────
   PRINT, Ctrl+P / "Save as PDF" produces a
   clean brochure version of the site. Hides
   nav chrome, interactive widgets, and oversized
   hero/map embeds. Tightens type for paper.
   ───────────────────────────────────────────── */
@media print{
  /* Force light-on-light printing */
  body{
    background: #fff !important;
    color: #1C1714 !important;
    font-size: 11pt;
    line-height: 1.45;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body::before{ display: none !important; } /* kill topo background */

  /* Hide interactive / floating chrome */
  .topbar,
  .dock,
  .fab-wa,
  .prelaunch-bar,
  .loc-realmap,                  /* live Google iframe is interactive only */
  .map-filters,
  .map-popup,
  #calculator,                   /* mortgage calc is interactive */
  .marquee,
  .hero-siteplan,                /* expandable widget in hero */
  .hero-stamps,
  .pview-hint,                   /* drag-drop hints on slots */
  .reg-submit,
  .prc-cta,                      /* on-screen WhatsApp CTA */
  .calc-preapprove,
  footer .baseline a,
  [data-screen-label="00 Nav"]{
    display: none !important;
  }

  /* Sections, tighten padding, no page-break inside cards */
  .section{
    padding: 18pt 0 !important;
    border-top: 0.5pt solid #ddd !important;
  }
  .section.dark, .section.terra{
    background: #fff !important;
    color: #1C1714 !important;
  }
  .section.dark *, .section.terra *,
  .section.dark .lede, .section.terra .lede,
  .section.dark .body, .section.terra .body{
    color: #1C1714 !important;
  }
  .section.dark::before, .section.terra::before{ display: none !important; }

  /* Force major sections to start on a new page */
  #estate, #homes, #plans, #pricing, #location, #faq, #register{
    page-break-before: always;
    break-before: page;
  }
  /* Don't break inside individual cards */
  .home-card, .prc-card, .plan-card, .day, .step, .faq details{
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Typography for print */
  .display{ font-size: 36pt !important; line-height: 1.05 !important; }
  .title{   font-size: 26pt !important; line-height: 1.10 !important; }
  .subtitle{ font-size: 18pt !important; }
  .lede{ font-size: 12pt !important; color: #3A2F28 !important; max-width: 70ch !important; }
  .body{ font-size: 10.5pt !important; }

  /* Hero, photo with copy beneath */
  .hero-grid{
    display: block !important;
  }
  .hero-art--photo{
    aspect-ratio: 3 / 2 !important;
    max-width: 100% !important;
    margin: 0 0 14pt 0 !important;
    box-shadow: none !important;
    border: 0.5pt solid #ddd !important;
  }
  .hero-art--photo .hero-photo{
    position: absolute; inset: 0;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
  }
  .hero-photo-overlay{ display: none !important; }
  .hero-meta{ grid-template-columns: repeat(4, 1fr) !important; gap: 12pt !important; }
  .hero-cta{ display: none !important; } /* on-screen CTAs */

  /* Photos, keep but don't bleed off page */
  img{ max-width: 100% !important; height: auto !important; page-break-inside: avoid; }

  /* Stop animations from interfering with print */
  *, *::before, *::after{
    animation: none !important;
    transition: none !important;
  }

  /* Home cards, show inline, no hover transforms */
  .homes-grid{ grid-template-columns: 1fr 1fr !important; gap: 16pt !important; }
  .home-perspectives{ grid-template-columns: 1fr 1fr !important; gap: 8pt !important; }

  /* Footer, kept but minimal */
  footer{ padding: 14pt 0 !important; border-top: 0.5pt solid #ddd !important; }
  .footer-wordmark{
    max-width: 180px !important;
    filter: none !important;
  }

  /* Add a print-only banner with contact info, repeated on every page */
  @page{
    margin: 16mm 14mm 18mm;
    @bottom-center{
      content: "Panthera Bertam · pantheraestate.com · +60 17-598 1858";
      font-family: "JetBrains Mono", monospace;
      font-size: 8pt;
      color: #6B5E58;
    }
    @bottom-right{
      content: "Page " counter(page) " / " counter(pages);
      font-family: "JetBrains Mono", monospace;
      font-size: 8pt;
      color: #6B5E58;
    }
  }
  @page :first{
    @top-right{
      content: "Pre-launch · register at pantheraestate.com";
      font-family: "JetBrains Mono", monospace;
      font-size: 8pt;
      color: #8A4638;
    }
  }

  /* Add a discrete URL after each external link, so paper readers can find them */
  a[href^="http"]::after,
  a[href^="//"]::after{
    content: " (" attr(href) ")";
    font-size: 8pt; color: #999; word-break: break-all;
  }
  a[href^="https://wa.me"]::after{
    content: " (WhatsApp +60 17-598 1858)";
  }
}

/* ─────────────────────────────────────────────
   PREMIUM FIRST-LOAD CHOREOGRAPHY
   The first impression matters more than any
   single feature. Stage the elements in: logo
   in, hero copy cascade, photo soft-fade.
   ───────────────────────────────────────────── */
@keyframes pant-fade-up{
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pant-fade-in{
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pant-hero-photo{
  from { opacity: 0; transform: scale(1.045); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pant-line{
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* On first paint, hide above-the-fold elements then cascade in */
html.first-paint .topbar .wordmark-img,
html.first-paint .topbar .sub,
html.first-paint .topbar .lang,
html.first-paint .hero .eyebrow,
html.first-paint .hero h1,
html.first-paint .hero .lede,
html.first-paint .hero .hero-meta > div,
html.first-paint .hero .hero-cta,
html.first-paint .hero-art--photo .hero-photo,
html.first-paint .hero-art--photo .hero-stamps,
html.first-paint .hero-art--photo .hero-siteplan{
  opacity: 0;
}
/* Resting state once loaded, fallback in case animations stall (background
   tab, browser-paused animations, no-JS users). Animation interpolates over
   this; static value takes effect if animation doesn't run. */
html.first-paint.loaded .topbar .wordmark-img,
html.first-paint.loaded .topbar .sub,
html.first-paint.loaded .topbar .lang,
html.first-paint.loaded .hero .eyebrow,
html.first-paint.loaded .hero h1,
html.first-paint.loaded .hero .lede,
html.first-paint.loaded .hero .hero-meta > div,
html.first-paint.loaded .hero .hero-cta,
html.first-paint.loaded .hero-art--photo .hero-photo,
html.first-paint.loaded .hero-art--photo .hero-stamps,
html.first-paint.loaded .hero-art--photo .hero-siteplan{ opacity: 1; }

html.first-paint.loaded .topbar .wordmark-img{ animation: pant-fade-in .55s ease both; }
html.first-paint.loaded .topbar .sub{          animation: pant-fade-in .55s ease both .10s; }
html.first-paint.loaded .topbar .lang{         animation: pant-fade-in .55s ease both .15s; }
html.first-paint.loaded .hero .eyebrow{        animation: pant-fade-up .70s cubic-bezier(.2,.7,.2,1) both .25s; }
html.first-paint.loaded .hero h1{              animation: pant-fade-up .90s cubic-bezier(.2,.7,.2,1) both .35s; }
html.first-paint.loaded .hero .lede{           animation: pant-fade-up .80s cubic-bezier(.2,.7,.2,1) both .55s; }
html.first-paint.loaded .hero .hero-meta > div:nth-child(1){ animation: pant-fade-up .65s cubic-bezier(.2,.7,.2,1) both .70s; }
html.first-paint.loaded .hero .hero-meta > div:nth-child(2){ animation: pant-fade-up .65s cubic-bezier(.2,.7,.2,1) both .78s; }
html.first-paint.loaded .hero .hero-meta > div:nth-child(3){ animation: pant-fade-up .65s cubic-bezier(.2,.7,.2,1) both .86s; }
html.first-paint.loaded .hero .hero-meta > div:nth-child(4){ animation: pant-fade-up .65s cubic-bezier(.2,.7,.2,1) both .94s; }
html.first-paint.loaded .hero .hero-cta{       animation: pant-fade-up .65s cubic-bezier(.2,.7,.2,1) both 1.10s; }
html.first-paint.loaded .hero-art--photo .hero-photo{   animation: pant-hero-photo 1.4s cubic-bezier(.2,.7,.2,1) both .25s; }
html.first-paint.loaded .hero-art--photo .hero-stamps{  animation: pant-fade-up .65s cubic-bezier(.2,.7,.2,1) both 1.0s; }
html.first-paint.loaded .hero-art--photo .hero-siteplan{ animation: pant-fade-up .55s ease both 1.25s; }

@media (prefers-reduced-motion: reduce){
  html.first-paint .topbar .wordmark-img,
  html.first-paint .topbar .sub,
  html.first-paint .topbar .lang,
  html.first-paint .hero .eyebrow,
  html.first-paint .hero h1,
  html.first-paint .hero .lede,
  html.first-paint .hero .hero-meta > div,
  html.first-paint .hero .hero-cta,
  html.first-paint .hero-art--photo .hero-photo,
  html.first-paint .hero-art--photo .hero-stamps,
  html.first-paint .hero-art--photo .hero-siteplan{
    opacity: 1;
    animation: none !important;
  }
}

/* ─────────────────────────────────────────────
   SCROLL PROGRESS INDICATOR, slim line at top
   Mirrors the user's scroll depth. Premium touch.
   ───────────────────────────────────────────── */
.scroll-progress{
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 100;
  background: transparent;
  pointer-events: none;
}
.scroll-progress::after{
  content: '';
  display: block;
  height: 100%;
  width: var(--sp, 0%);
  background: linear-gradient(90deg, var(--terra-2) 0%, var(--terra) 50%, var(--clay) 100%);
  transition: width .12s ease-out;
}
body.has-prelaunch-bar .scroll-progress{ top: 42px; }

/* ─────────────────────────────────────────────
   ACCESSIBILITY, skip link + focus styles
   ───────────────────────────────────────────── */
.skip-link{
  position: fixed; left: 50%; top: -100px;
  transform: translateX(-50%);
  z-index: 999;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 20px;
  border-radius: 0 0 12px 12px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none;
  transition: top .2s ease;
  box-shadow: 0 6px 20px -8px rgba(0,0,0,0.4);
}
.skip-link:focus,
.skip-link:focus-visible{ top: 0; outline: none; }
*:focus-visible{
  outline: 2px solid var(--terra);
  outline-offset: 3px;
  border-radius: 2px;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible{
  outline: 2px solid var(--terra);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────
   ELEVATIONS, official architect-stamped sheets
   Reuses .plan-card, .plan-img shell. 2-column
   grid (instead of plans' 4-column) because the
   sheets are landscape and benefit from more width.
   ───────────────────────────────────────────── */
.plans-gallery--2col{
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 760px){
  .plans-gallery--2col{ grid-template-columns: 1fr; }
}
.elevation-card .plan-img{
  background: #fff;
  aspect-ratio: 1460 / 1240;  /* match the cropped PNG ratio */
}
.elevation-card .plan-img img{
  width: 100%; height: 100%;
  object-fit: contain;
  background: #fff;
  padding: 24px;
  box-sizing: border-box;
}
.elevation-credit{
  margin-top: 28px;
  padding: 18px 22px;
  border: 1px dashed var(--rule);
  border-radius: 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  font-size: 13px;
  color: var(--text-mute);
  font-family: var(--sans);
}
.elevation-credit strong{ color: var(--ink); font-weight: 500; }
.elevation-credit .dot-sep{ opacity: 0.4; padding: 0 4px; }
.elevation-credit .mono{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
@media (max-width: 600px){
  .elevation-credit{ font-size: 12px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .elevation-credit .dot-sep{ display: none; }
}

/* LOCATION live Leaflet map + 19 amenity pins */
.loc-livemap{
  border-radius: 18px;
  background: var(--cream-2);
  border: 1px solid var(--rule-soft);
  overflow: hidden;
  margin-bottom: 40px;
}
.loc-livemap-bar{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 14px 18px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
}
.loc-livemap-meta{ display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.loc-livemap-meta .dot-live{
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #4ADE80; margin-right: 8px;
  animation: livePulse 1.8s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes livePulse{
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,.6); }
  50%      { box-shadow: 0 0 0 6px rgba(74,222,128,0); }
}
.loc-livemap-coord{ color: rgba(242,233,223,0.6); font-weight: 300; }
.loc-livemap-actions{ display: inline-flex; align-items: center; gap: 6px; }
.loc-livemap-actions button{
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(242,233,223,0.22);
  color: rgba(242,233,223,0.78);
  background: transparent;
  font-family: inherit; font-size: 10.5px; letter-spacing: 0.14em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.loc-livemap-actions button:hover{ background: rgba(242,233,223,0.10); color: var(--cream); }
.loc-livemap-actions button.active{ background: var(--cream); color: var(--ink); border-color: var(--cream); }
.loc-livemap-actions .open{
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--terra);
  color: var(--cream);
  font-family: inherit; font-size: 10.5px; letter-spacing: 0.14em;
  text-decoration: none;
  margin-left: 6px;
  transition: background .15s ease;
}
.loc-livemap-actions .open:hover{ background: var(--terra-2); }

.loc-livemap .map-filters{
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--cream);
  border-bottom: 1px solid var(--rule-soft);
  margin: 0;
}
.loc-livemap .map-filters button{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--cream-2);
  border: 1px solid var(--rule-soft);
  color: var(--ink-soft);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.loc-livemap .map-filters button .sw{
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-mute);
}
.loc-livemap .map-filters button[data-filter="daily"]   .sw{ background: var(--terra); }
.loc-livemap .map-filters button[data-filter="schools"] .sw{ background: var(--green); }
.loc-livemap .map-filters button[data-filter="connect"] .sw{ background: var(--ink); }
.loc-livemap .map-filters button[data-filter="future"]  .sw{ background: var(--clay); }
.loc-livemap .map-filters button.active{
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.loc-livemap .map-filters button .ct{ opacity: 0.55; font-weight: 400; }

.loc-leaflet{
  width: 100%;
  height: 560px;
  background: var(--cream-2);
}
@media (max-width: 760px){
  .loc-leaflet{ height: 440px; }
  .loc-livemap-bar{ padding: 12px 14px; gap: 8px; font-size: 10px; }
  .loc-livemap-meta{ gap: 10px; width: 100%; }
  .loc-livemap-coord{ display: none; }
  .loc-livemap-actions{ width: 100%; }
  .loc-livemap-actions button, .loc-livemap-actions .open{ padding: 10px 14px; font-size: 11px; }
  .loc-livemap .map-filters{ padding: 10px 14px; gap: 6px; overflow-x: auto; flex-wrap: nowrap; }
  .loc-livemap .map-filters button{ flex-shrink: 0; padding: 11px 12px; font-size: 11px; }
}

.loc-livemap-note{
  padding: 14px 18px;
  font-size: 13px;
  color: var(--text-mute);
  background: var(--cream-2);
  border-top: 1px solid var(--rule-soft);
}

/* Custom Leaflet markers numbered chips matching category */
.pin-chip{
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--text-mute);
  color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 500; font-size: 12px;
  letter-spacing: -0.02em;
  border: 2.5px solid var(--cream);
  box-shadow: 0 4px 10px -2px rgba(28,23,20,0.35);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
  cursor: pointer;
}
.pin-chip.daily   { background: var(--terra); }
.pin-chip.schools { background: var(--green); }
.pin-chip.connect { background: var(--ink); }
.pin-chip.future  { background: var(--clay); }
.pin-chip:hover, .pin-chip.is-active{
  transform: scale(1.22);
  box-shadow: 0 8px 18px -4px rgba(28,23,20,0.45);
  z-index: 1000;
}
.leaflet-marker-icon.pin-hidden{ opacity: 0; pointer-events: none; transform: scale(0.4) !important; transition: opacity .25s ease, transform .25s ease; }

.pin-site{
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--terra-2);
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 0 rgba(138,70,56,0.55), 0 6px 18px -4px rgba(28,23,20,0.45);
  animation: site-pulse 2.6s ease-out infinite;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cream);
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
}
@keyframes site-pulse{
  0%   { box-shadow: 0 0 0 0    rgba(138,70,56,0.55), 0 6px 18px -4px rgba(28,23,20,0.45); }
  70%  { box-shadow: 0 0 0 22px rgba(138,70,56,0),    0 6px 18px -4px rgba(28,23,20,0.45); }
  100% { box-shadow: 0 0 0 0    rgba(138,70,56,0),    0 6px 18px -4px rgba(28,23,20,0.45); }
}

.leaflet-popup-content-wrapper{
  background: var(--cream);
  color: var(--text);
  border-radius: 12px;
  box-shadow: 0 14px 36px -10px rgba(28,23,20,0.4);
  padding: 4px;
  border: 1px solid var(--rule-soft);
}
.leaflet-popup-content{ margin: 12px 14px; font-family: var(--sans); font-size: 13px; line-height: 1.5; }
.leaflet-popup-tip{ background: var(--cream); border: 1px solid var(--rule-soft); }
.leaflet-popup-close-button{ color: var(--text-mute) !important; font-size: 18px !important; }
.pop-card .cat-row{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-mute);
  margin-bottom: 6px;
}
.pop-card .cat-num{
  width: 20px; height: 20px; border-radius: 50%; color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500;
}
.pop-card .pop-h{
  font-family: var(--serif); font-weight: 400; font-size: 17px;
  line-height: 1.2; color: var(--ink); margin: 2px 0 8px;
}
.pop-card .pop-meta{
  display: flex; gap: 14px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-mute);
  margin-bottom: 10px;
}
.pop-card .pop-meta .v{ color: var(--terra-2); font-weight: 500; }
.pop-card .pop-go{
  display: inline-block;
  padding: 7px 14px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; text-decoration: none;
  transition: background .15s ease;
}
.pop-card .pop-go:hover{ background: var(--ink-soft); }

.amen li{ cursor: pointer; transition: background .15s ease; }
.amen li:hover, .amen li.is-active{
  background: var(--cream-2);
  border-radius: 6px;
}
.amen li.is-active .num{
  transform: scale(1.15);
  box-shadow: 0 4px 10px -2px rgba(28,23,20,0.3);
}

.loc-amen-wrap{
  margin-top: 36px;
}
.loc-amen-divider{
  text-align: center;
  margin-bottom: 24px;
  color: var(--text-mute);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.loc-amen-divider::before, .loc-amen-divider::after{
  content: '';
  display: inline-block;
  width: 60px;
  height: 1px;
  background: var(--rule);
  vertical-align: middle;
  margin: 0 14px;
}

/* ─────────────────────────────────────────────
   LOCATION MAP, premium refinements
   Branded site marker, ring labels, hover tips,
   drop-in animation, custom Leaflet controls.
   ───────────────────────────────────────────── */

/* Site marker, embeds the actual 3-arrow brand mark */
.pin-site-wrap{
  position: relative;
}
.pin-site{
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--terra-2);
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 0 rgba(138,70,56,0.55), 0 10px 24px -6px rgba(28,23,20,0.55);
  animation: site-pulse 2.6s ease-out infinite;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px;
  box-sizing: border-box;
}
.pin-site svg{
  width: 100%; height: 100%;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18));
}
.pin-site-img{
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
  /* The transparent PNG has grey arrows; tint them cream so they read
     against the terra-cotta pin background. */
  filter: brightness(0) invert(1) drop-shadow(0 1px 1px rgba(0,0,0,0.25));
  /* Slight visual nudge to compensate for the artwork's right-weight */
  transform: translateX(-2px);
}
.pin-site-label{
  position: absolute;
  top: 100%; left: 50%;
  transform: translate(-50%, 8px);
  background: var(--ink);
  color: var(--cream);
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 14px -4px rgba(28,23,20,0.5);
  pointer-events: none;
  font-weight: 500;
}
.pin-site-label span{
  color: var(--clay);
  margin-left: 2px;
  font-weight: 300;
}

/* Drive-time ring labels (floating non-interactive markers at top of each ring) */
.ring-label-wrap{
  pointer-events: none;
  background: transparent !important;
  border: none !important;
}
.ring-label{
  display: inline-block;
  background: rgba(242,233,223,0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: rgba(138,70,56,0.85);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(138,70,56,0.18);
  font-weight: 500;
  white-space: nowrap;
}

/* Pin hover tooltip, lightweight name preview */
.leaflet-tooltip.pin-tooltip{
  background: var(--ink);
  color: var(--cream);
  border: none;
  padding: 5px 10px;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  box-shadow: 0 8px 20px -6px rgba(28,23,20,0.5);
  white-space: nowrap;
}
.leaflet-tooltip.pin-tooltip::before{
  border-top-color: var(--ink);
}

/* Sequential drop-in animation for amenity pins */
.leaflet-marker-icon.pin-prep > .pin-chip{
  opacity: 0;
  transform: scale(0.4) translateY(-10px);
}
.leaflet-marker-icon.pin-in > .pin-chip{
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: opacity .45s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.34,1.56,.64,1);
}

/* Custom Leaflet zoom controls (cream/ink branded) */
.leaflet-control-zoom{
  border: none !important;
  box-shadow: 0 6px 18px -6px rgba(28,23,20,0.35) !important;
  border-radius: 12px !important;
  overflow: hidden;
}
.leaflet-control-zoom a{
  background: var(--cream) !important;
  color: var(--ink) !important;
  border: none !important;
  font-family: var(--mono) !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  transition: background .15s ease, color .15s ease;
}
.leaflet-control-zoom a:hover{
  background: var(--ink) !important;
  color: var(--cream) !important;
}
.leaflet-control-zoom-in{
  border-bottom: 1px solid var(--rule-soft) !important;
}

/* Recenter button (sits below the zoom group on top-right) */
.loc-recenter{
  background: var(--cream) !important;
  color: var(--ink) !important;
  border: none !important;
  width: 34px !important;
  height: 34px !important;
  margin-top: 8px !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 18px -6px rgba(28,23,20,0.35) !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.loc-recenter:hover{
  background: var(--terra) !important;
  color: var(--cream) !important;
  transform: scale(1.05);
}

/* Restyled attribution, subtle + branded */
.leaflet-control-attribution{
  background: rgba(242,233,223,0.78) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: rgba(28,23,20,0.55) !important;
  font-family: var(--mono);
  font-size: 9.5px !important;
  letter-spacing: 0.04em;
  padding: 4px 8px !important;
  border-radius: 8px 0 0 0;
  border: 1px solid var(--rule-soft);
  border-right: 0; border-bottom: 0;
}
.leaflet-control-attribution a{ color: rgba(138,70,56,0.75) !important; }

/* Contain Leaflet's stacking context so its 1000-level control panes can't
   poke through the sticky topbar (z 1100) or fixed prelaunch bar (z 1095). */
.loc-leaflet{ position: relative; z-index: 0; isolation: isolate; }
.loc-leaflet .leaflet-pane,
.loc-leaflet .leaflet-top,
.loc-leaflet .leaflet-bottom{ z-index: 1; }
.loc-leaflet .leaflet-popup-pane{ z-index: 7; }
/* Removed the inner-shadow overlay, it was making the map look truncated. */

/* Walk-to badge, highlights the doorstep amenities */
.amen .walk{
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(177,118,100,0.12);
  color: var(--terra-2);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-style: normal;
  border-radius: 999px;
  vertical-align: middle;
  border: 1px solid rgba(138,70,56,0.18);
}

/* Play & Lifestyle category - warm gold, distinct from terra/clay */
:root{ --gold: #B8893A; }
.pin-chip.lifestyle { background: var(--gold); }
.loc-livemap .map-filters button[data-filter="lifestyle"] .sw{ background: var(--gold); }
.amen .amen-grp.lifestyle .h{ border-top-color: var(--gold); color: var(--gold); }
.amen .amen-grp.lifestyle li .num{ background: var(--gold); }
.amen .amen-grp .h{ border-top: 2px solid var(--text-mute); padding-top: 8px; color: var(--text-mute); }
.amen .walk{ }

/* Elevations gallery, 4-col grid (4x2 layout for 8 cards, semi-D row + bungalow row) */
.plans-gallery--elev{
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.plans-gallery--elev .elevation-card .plan-img{
  aspect-ratio: 4 / 3;
}
@media (max-width: 1180px){
  .plans-gallery--elev{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .plans-gallery--elev{ grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────
   SKETCH GALLERY · watercolour perspective studies
   Two rows (Bungalow, Semi-D), three cards each.
   Each card sits like a painting tacked to a study
   wall: gentle rotation, cream-paper mat, mono
   museum caption. Hover unrotates and lifts.
   ───────────────────────────────────────────── */
.sketch-gallery{
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 4vw, 56px);
}
.sketch-row{ position: relative; }
.sketch-row-label{
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0 0 18px;
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 28px;
}
.sketch-row-label::before{
  content: "·";
  display: inline-block;
  margin-right: 10px;
  color: var(--terra);
  transform: translateY(-2px);
}
.sketch-row-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
  padding: 14px 6px 22px;
}
.sketch-card{
  --rot: 0deg;
  margin: 0;
  background: #FBF6EE;
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  padding: 14px 14px 0;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 10px 24px -14px rgba(28,23,20,0.22),
    0 2px 6px -2px rgba(28,23,20,0.10);
  transform: rotate(var(--rot));
  transition: transform .45s cubic-bezier(.2,.7,.25,1),
              box-shadow .45s ease;
  will-change: transform;
}
.sketch-card::before{
  /* faint paper-grain wash, gives the card a watercolour-stock feel */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 20% 15%, rgba(177,118,100,0.05), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(111,127,88,0.04), transparent 60%);
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.9;
}
.sketch-card{ position: relative; overflow: hidden; }
.sketch-card:hover{
  transform: rotate(0deg) translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 22px 44px -22px rgba(28,23,20,0.32),
    0 6px 14px -4px rgba(28,23,20,0.16);
  z-index: 2;
}
.sketch-img{
  position: relative;
  background: #FFFCF6;
  border: 1px solid rgba(74,65,62,0.08);
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4),
              inset 0 2px 6px rgba(28,23,20,0.04);
}
.sketch-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform .6s ease;
}
.sketch-card:hover .sketch-img img{ transform: scale(1.015); }
.sketch-card figcaption{
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 4px 16px;
  border-top: 1px solid transparent;
}
.sketch-card figcaption .num{
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--terra);
  padding: 2px 7px;
  border: 1px solid rgba(177,118,100,0.35);
  border-radius: 2px;
  flex-shrink: 0;
}
.sketch-card figcaption .lbl{
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-style: italic;
  color: var(--ink);
  letter-spacing: 0.01em;
  line-height: 1.25;
}
.sketch-foot{
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: clamp(36px, 4vw, 56px) auto 0;
  max-width: 720px;
  padding: 18px 24px 0;
  border-top: 1px solid var(--rule-soft);
}
@media (max-width: 1024px){
  .sketch-row-grid{ grid-template-columns: repeat(2, 1fr); }
  .sketch-card{ --rot: 0deg !important; }
}
@media (max-width: 640px){
  .sketch-row-grid{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .sketch-card{ --rot: 0deg !important; transition: none; }
  .sketch-img img{ transition: none; }
}

/* Chinese-only alt names, hidden unless body has lang-zh class */
body:not(.lang-zh) .zh-only,
body:not(.lang-zh) .zh-only-inline{ display: none; }

/* ─────────────────────────────────────────────
   PHILOSOPHY section, 4 If-you-lived-in-Penang
   rows. Editorial 2-col layout: italic question
   on left, plain answer on right.
   ───────────────────────────────────────────── */
.phil-grid{
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule-soft);
  margin-top: 12px;
}
.phil-row{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  padding: 48px 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: start;
}
.phil-q{
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.25;
  color: var(--terra-2);
  letter-spacing: -0.005em;
  margin: 0;
}
.phil-a{
  font-family: var(--sans);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  padding-top: 8px;
  max-width: 52ch;
}
@media (max-width: 760px){
  .phil-row{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 32px 0;
  }
  .phil-a{ padding-top: 0; }
}

/* ─────────────────────────────────────────────
   Mobile touch-target boost
   WCAG / Apple HIG / Material recommend a minimum
   tappable area of ~44px. Bump up small controls
   (language toggle, map mode buttons, filter chips,
   calc presets) so they're comfortable on phones
   without redesigning the desktop look.
   ───────────────────────────────────────────── */
@media (max-width: 760px){
  .lang button{ padding: 7px 11px; font-size: 11px; }
  .topbar .lang button{ padding: 7px 11px; }
  .calc-preset{ padding: 9px 14px; font-size: 11px; }
  .map-filters button{ padding: 11px 14px; font-size: 11px; }
  .loc-livemap-actions button,
  .loc-livemap-actions .open{ padding: 10px 14px; font-size: 11px; }
  /* Map zoom controls (+/-) larger on touch */
  .leaflet-bar a{
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 20px !important;
  }
  /* Keep the inner-row footer columns readable on phone */
  footer .row{ gap: 28px; }
}