/* ==========================================================================
   Bhandary Builders — premium project-viewing design system
   Display: EB Garamond.  UI and body: Nimbus Sans L (self-hosted, URW++).
   Ink, warm stone, restrained gold.
   ========================================================================== */

/* -------------------------------------------------- Nimbus Sans L */
@font-face {
  font-family: "Nimbus Sans L";
  src: url("../fonts/nimbus-sans-l-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nimbus Sans L";
  src: url("../fonts/nimbus-sans-l-regular-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Nimbus Sans L";
  src: url("../fonts/nimbus-sans-l-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nimbus Sans L";
  src: url("../fonts/nimbus-sans-l-bold-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* -------------------------------------------------- tokens */
:root {
  --ink: #0e1512;
  --ink-2: #141d19;
  --ink-3: #1d2924;
  --ink-4: #26332d;

  --stone: #f5f2ec;
  --stone-2: #ebe5da;
  --stone-3: #e0d9cc;
  --paper: #ffffff;

  --gold: #a97c28;
  --gold-2: #c69a3e;
  --gold-3: #ddbc74;
  --sage: #6b7c70;

  --text: #191f1c;
  --text-muted: #5b6560;
  --text-invert: #f3efe7;
  --text-invert-muted: rgba(243, 239, 231, 0.68);

  --line: rgba(23, 32, 28, 0.13);
  --line-strong: rgba(23, 32, 28, 0.26);
  --line-invert: rgba(243, 239, 231, 0.16);

  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --shell-max: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3.75rem);
  --shell: min(100% - (var(--gutter) * 2), var(--shell-max));

  --space-section: clamp(4.5rem, 8.5vw, 9rem);
  --space-block: clamp(2.25rem, 4vw, 4rem);

  --header-h: 84px;
  --sticky-h: 0px;
  /* Height of the project-page sticky strip, used for anchor offsets. */
  --projectbar-h: 67px;
  /* How much larger the header logo sits before the header solidifies. */
  --logo-scale: 1.24;

  --ease: cubic-bezier(0.22, 0.68, 0.24, 1);
  --spring: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-lift: 0 40px 90px -60px rgba(14, 21, 18, 0.65);
  --shadow-panel: 0 32px 70px -52px rgba(14, 21, 18, 0.55);
}

@media (max-width: 900px) {
  /* .projectbar is display:none at this width, so it must not offset anchors. */
  :root { --header-h: 66px; --sticky-h: 60px; --projectbar-h: 0px; --logo-scale: 1.1; }
}

/* -------------------------------------------------- reset + base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  font-synthesis-weight: none;
  background: var(--stone);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px));
}

body.is-locked { overflow: hidden; }

img, picture, svg, video { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4, blockquote,
.hero__proof strong, .figures strong, .emi-result strong,
.proof-table strong, .location-row .place, .portfolio-wall .name, .portfolio-wall .num,
.project-card__media .plate strong, .accordion summary, .nav-link {
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1, "pnum" 1;
}

h1, h2, h3, h4,
.hero__proof strong, .figures strong, .emi-result strong, .portfolio-wall .num {
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1, "pnum" 1;
}

h1, h2, h3, h4, .hero__head {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.014em;
  margin: 0;
  color: var(--text);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--gold-3); color: var(--ink); }

:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--text-invert);
  font-size: 0.85rem;
  transform: translateY(-180%);
  transition: transform 0.25s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* -------------------------------------------------- layout primitives */
.shell { width: var(--shell); margin-inline: auto; }

.section { padding-block: var(--space-section); }
.section--tight { padding-block: clamp(3rem, 5.5vw, 5.5rem); }
/* the carousel is tall on its own, so it gets a shorter run-up */
.section--carousel { padding-block: clamp(3rem, 5.5vw, 5.75rem); }
.section--carousel .section-head { margin-bottom: clamp(1.25rem, 2.5vw, 2.25rem); }
.section--ink { background: var(--ink); color: var(--text-invert); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--text-invert); }
.section--ink .contact-form h3, .section--ink .project-card h3 { color: var(--text); }
.section--paper { background: var(--paper); }
.section--stone2 { background: var(--stone-2); }

[id] { scroll-margin-top: calc(var(--header-h) + 18px); }

/* Project pages carry a second sticky strip (.projectbar) directly under the
   header, and it is exactly what the in-page nav (Overview / Amenities / Floor
   plans / Location) scrolls with. Without this the target heading lands behind
   that strip. Browsers without :has() simply keep the header-only offset, which
   is the behaviour they had before. */
body:has(.projectbar) [id] {
  scroll-margin-top: calc(var(--header-h) + var(--projectbar-h) + 18px);
}

/* -------------------------------------------------- type utilities */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  line-height: 1.4;
}
.eyebrow::before {
  content: "";
  width: clamp(24px, 3vw, 44px);
  height: 1px;
  background: currentColor;
  opacity: 0.8;
  flex: none;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.85s var(--spring);
  transition-delay: calc(var(--d, 0ms) + 120ms);
}
.is-visible .eyebrow::before,
.hero__text.is-active .eyebrow::before,
.hero--page .eyebrow::before,
html:not(.js) .eyebrow::before { transform: none; }
.section--ink .eyebrow, .hero .eyebrow { color: var(--gold-3); }

.display-xl { font-size: clamp(2.6rem, 6.2vw, 5.3rem); line-height: 1.02; letter-spacing: -0.02em; }
.display-l  { font-size: clamp(2rem, 4.1vw, 3.4rem); line-height: 1.08; letter-spacing: -0.018em; }
.display-m  { font-size: clamp(1.65rem, 2.7vw, 2.3rem); line-height: 1.12; }
.display-s  { font-size: clamp(1.35rem, 2.1vw, 1.85rem); line-height: 1.14; }

.lead {
  font-size: clamp(1.03rem, 1.35vw, 1.22rem);
  line-height: 1.68;
  color: var(--text-muted);
  max-width: 56ch;
}
.section--ink .lead, .section--ink p { color: var(--text-invert-muted); }

.muted { color: var(--text-muted); }
.gold-em { color: var(--gold); font-style: italic; }
.section--ink .gold-em, .hero .gold-em { color: var(--gold-3); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.section--ink .rule { background: var(--line-invert); }

/* -------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--gold-2);
  --btn-fg: #171104;
  --btn-bd: var(--gold-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 50px;
  padding: 0.6rem 1.65rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: 2px;
  font-size: 0.775rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn:hover { --btn-bg: var(--gold-3); --btn-bd: var(--gold-3); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text-invert); --btn-bd: rgba(243, 239, 231, 0.45); }
.btn--ghost:hover { --btn-bg: rgba(243, 239, 231, 0.14); --btn-bd: rgba(243, 239, 231, 0.75); --btn-fg: var(--text-invert); }

.btn--ink { --btn-bg: var(--ink); --btn-fg: var(--text-invert); --btn-bd: var(--ink); }
.btn--ink:hover { --btn-bg: var(--ink-3); --btn-bd: var(--ink-3); --btn-fg: var(--text-invert); }

.btn--outline { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--line-strong); }
.btn--outline:hover { --btn-bg: var(--ink); --btn-fg: var(--text-invert); --btn-bd: var(--ink); }

.btn--sm { min-height: 44px; padding: 0.45rem 1.15rem; font-size: 0.72rem; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.775rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text);
  padding-block: 0.6rem;
  min-height: 44px;
  position: relative;
}
.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0.4rem;
  width: 100%; height: 1px;
  background: currentColor;
  opacity: 0.32;
  transform-origin: left;
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
}
.link:hover::after { transform: scaleX(1.05); opacity: 1; }
.link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform 0.4s var(--ease); flex: none; }
.link:hover svg { transform: translate(3px, -3px); }
.link--gold { color: var(--gold); }
.section--ink .link { color: var(--gold-3); }

/* -------------------------------------------------- header */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: var(--text-invert);
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease);
}
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--line);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 13, 11, 0.6), rgba(8, 13, 11, 0));
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.site-header.is-solid {
  background: rgba(245, 242, 236, 0.95);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  color: var(--text);
}
.site-header.is-solid::after { opacity: 1; }
.site-header.is-solid::before { opacity: 0; }

.header-inner {
  width: var(--shell);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  position: relative;
  z-index: 1;
}

/* Both marks are stacked in one grid cell and crossfaded on the same 0.45s
   curve as the header background. Swapping them with display:none was instant
   and unanimatable, so for the length of that fade the dark mark sat on a hero
   that was still dark — the logo appeared to blink out on every scroll, and
   washed out again on the way back up. */
.brand {
  display: grid;
  flex: none;
  line-height: 0;
  transform-origin: left center;
  transition: transform 0.45s var(--ease);
}
.brand img {
  grid-area: 1 / 1;
  width: clamp(112px, 11vw, 138px);
  height: auto;
  transition: opacity 0.45s var(--ease);
}
.brand .logo-dark { opacity: 0; }
.site-header.is-solid .brand .logo-light { opacity: 0; }
.site-header.is-solid .brand .logo-dark { opacity: 1; }

/* Larger while the header sits over the hero, settling to its normal size once
   the header solidifies. Scaled rather than resized so the nav beside it never
   reflows mid-scroll. */
.site-header:not(.is-solid) .brand { transform: scale(var(--logo-scale)); }
@media (prefers-reduced-motion: reduce) {
  .brand, .brand img { transition: none; }
  .site-header:not(.is-solid) .brand { transform: none; }
}

.primary-nav { margin-left: auto; }
.primary-nav > ul {
  display: flex;
  align-items: center;
  gap: clamp(0.55rem, 1.6vw, 1.8rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 0.15rem;
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.035em;
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-sans);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 11px;
  width: 100%; height: 1px;
  background: var(--gold-2);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav-link:hover::after,
.nav-link[aria-expanded="true"]::after,
.nav-link.is-current::after { transform: scaleX(1); transform-origin: left; }
.nav-link .chev { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 0.35s var(--ease); }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }

.has-menu { position: relative; }
/* Keep the pointer inside the hover region while it crosses the gap to the panel.
   The panel carries its own bridge, but that only exists once it has painted, so
   the trigger owns one too for a fast downward flick. */
.has-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 18px;
  pointer-events: none;
}
.has-menu:hover::after { pointer-events: auto; }
@media (min-width: 1081px) {
  /* Anchor to the trigger, not the header, so the panel opens under "Projects". */
  .nav-menu { top: calc(100% + 14px); left: 0; right: auto; translate: none; }
}
.nav-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 400px;
  max-width: min(440px, calc(100vw - 2rem));
  padding: 1.6rem;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.nav-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}
.has-menu:hover .nav-menu,
.has-menu:focus-within .nav-menu,
.nav-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu h3 {
  font-family: var(--font-sans);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.8rem;
}
.nav-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.nav-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.42rem 0.5rem;
  margin-inline: -0.5rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  border-radius: 2px;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.nav-menu a:hover { color: var(--text); background: var(--stone); }

.header-actions { display: flex; align-items: center; gap: 0.7rem; flex: none; }
.icon-btn {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.85;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), opacity 0.3s var(--ease), border-color 0.3s var(--ease);
}
.icon-btn svg { width: 17px; height: 17px; fill: currentColor; }
.icon-btn:hover { background: var(--gold-2); border-color: var(--gold-2); color: #171104; opacity: 1; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  margin-left: auto;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
  color: inherit;
}
.nav-toggle span {
  position: absolute;
  left: 11px;
  width: 24px; height: 1.5px;
  background: currentColor;
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { top: 23px; }
.nav-toggle span:nth-child(3) { top: 29px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .header-actions { display: none; }
  .site-header.is-open { background: var(--ink); color: var(--text-invert); z-index: 200; }
  .site-header.is-open .brand .logo-light { opacity: 1; }
  .site-header.is-open .brand .logo-dark { opacity: 0; }
  .site-header.is-open::before, .site-header.is-open::after { opacity: 0; }
  .primary-nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 200;
    margin: 0;
    background: var(--ink);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    color: var(--text-invert);
    padding: clamp(1.25rem, 4vw, 2.5rem) var(--gutter) calc(3rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
  }
  .primary-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .primary-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav > ul > li { border-bottom: 1px solid var(--line-invert); }
  .nav-link {
    width: 100%;
    justify-content: space-between;
    min-height: 58px;
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }
  .nav-link .chev { width: 13px; height: 13px; }
  .nav-link::after { display: none; }
  .nav-menu {
    position: static;
    translate: none;
    transform: none;
    min-width: 0;
    display: none;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 0 0 1.4rem;
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--text-invert);
    opacity: 1;
    visibility: visible;
  }
  .nav-menu::before, .has-menu::after { display: none; }
  .has-menu:hover .nav-menu, .has-menu:focus-within .nav-menu { display: none; }
  .nav-menu.is-open, .has-menu:hover .nav-menu.is-open { display: grid; }
  .nav-menu h3 { color: var(--gold-3); }
  .nav-menu a { color: var(--text-invert-muted); font-size: 1rem; padding: 0.55rem 0.5rem; min-height: 44px; }
  .nav-menu a:hover { background: rgba(243, 239, 231, 0.07); color: var(--text-invert); }
  .mobile-nav-foot { margin-top: 2rem; display: grid; gap: 0.85rem; }
  .mobile-nav-foot .btn { width: 100%; }
}
@media (min-width: 1081px) { .mobile-nav-foot { display: none; } }

/* -------------------------------------------------- hero */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media picture { display: block; width: 100%; height: 100%; }

/* ---- slider stage ---- */
.hero__stage { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.15s var(--ease), visibility 1.15s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__slide .hero__media img { animation: none; transform: scale(1.06); transition: transform 8s linear; }
.hero__slide.is-active .hero__media img { transform: scale(1); }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
  animation: heroSettle 2.2s var(--ease) both, heroDrift 30s 2.2s ease-in-out infinite alternate;
}
@keyframes heroSettle { from { opacity: 0; transform: scale(1.09); } to { opacity: 1; transform: scale(1.02); } }
@keyframes heroDrift { from { transform: scale(1.02); } to { transform: scale(1.1) translate3d(-1%, -1.5%, 0); } }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(93deg, rgba(9, 14, 12, 0.94) 0%, rgba(9, 14, 12, 0.8) 24%, rgba(9, 14, 12, 0.36) 54%, rgba(9, 14, 12, 0.12) 76%, rgba(9, 14, 12, 0.42) 100%),
    linear-gradient(180deg, rgba(9, 14, 12, 0.45) 0%, rgba(9, 14, 12, 0) 24%, rgba(9, 14, 12, 0.16) 60%, rgba(9, 14, 12, 0.78) 100%);
}

.hero__inner {
  width: var(--shell);
  margin-inline: auto;
  min-height: calc(100svh - var(--sticky-h));
  padding-top: calc(var(--header-h) + clamp(1.5rem, 6vh, 5.5rem));
  padding-bottom: clamp(1.25rem, 3vh, 2.25rem);
  color: var(--text-invert);
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 5vh, 3.5rem);
  justify-content: flex-end;
  position: relative;
  z-index: 2;
}
@supports not (min-height: 100svh) { .hero__inner { min-height: calc(100vh - var(--sticky-h)); } }
.hero--page .hero__inner { min-height: min(72svh, 700px); }
.hero--short .hero__inner { min-height: min(50svh, 420px); }
.hero h1, .hero .hero__head { color: var(--text-invert); max-width: 16ch; margin: 0; }

/* ---- slide copy ---- */
.hero__copy { display: grid; }
.hero__text {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.75s var(--ease), transform 0.9s var(--spring), visibility 0.75s;
  pointer-events: none;
}
.hero__text.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.hero__text.is-active .eyebrow { transition-delay: 0.08s; }
.hero__sub {
  margin-top: clamp(1.15rem, 2.4vh, 1.85rem);
  max-width: 48ch;
  color: rgba(243, 239, 231, 0.84);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.66;
}
.hero__ctas { margin-top: clamp(1.6rem, 3.4vh, 2.5rem); display: flex; flex-wrap: wrap; gap: 0.85rem; }


.hero__scroll {
  position: absolute;
  right: calc((100% - var(--shell)) / 2);
  bottom: clamp(9rem, 24vh, 15rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.64rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(243, 239, 231, 0.6);
  writing-mode: vertical-rl;
  z-index: 2;
}
.hero__scroll i { display: block; width: 1px; height: 56px; background: linear-gradient(180deg, rgba(243, 239, 231, 0.65), rgba(243, 239, 231, 0)); }
@media (max-width: 1080px) { .hero__scroll { display: none; } }

@media (max-width: 760px) {
  .hero__inner { gap: clamp(1.25rem, 3.5vh, 2.5rem); }
  .hero h1, .hero .hero__head { font-size: clamp(2.3rem, 10.5vw, 3.1rem); }
  .hero__sub { font-size: 0.98rem; line-height: 1.6; margin-top: 1rem; }
  .hero__ctas { margin-top: 1.35rem; gap: 0.65rem; }
  .hero__sub { max-width: none; }
  .hero h1, .hero .hero__head { max-width: 11ch; }
  .hero__ctas .btn { flex: 1 1 100%; }
}
/* The sticky bar covers call and WhatsApp, but not "View project", so both
   hero actions stay reachable on phones. */
@media (max-width: 560px) {
  .hero__ctas { gap: 0.6rem; }
  .hero__ctas .btn { width: 100%; }
}
/* Short phones: keep the whole hero, proof strip included, on the first screen. */
@media (max-width: 600px) and (max-height: 810px) {
  .hero__inner { gap: 1rem; padding-top: calc(var(--header-h) + 1.1rem); }
  .hero h1, .hero .hero__head { font-size: clamp(1.95rem, 8.8vw, 2.5rem); }
  .hero__sub { font-size: 0.92rem; margin-top: 0.8rem; }
  .hero__ctas { margin-top: 1.1rem; }
  .hero .eyebrow { margin-bottom: 0.8rem; }
}
.hero--page .hero__inner { padding-bottom: clamp(2.25rem, 6vh, 4.5rem); }
.hero--short .hero__inner { min-height: min(52svh, 440px); }
.hero--page h1 { max-width: 17ch; }
.hero--page .hero__sub { max-width: 54ch; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(243, 239, 231, 0.62);
  margin-bottom: 0.9rem;
}
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; transition: color 0.25s var(--ease); }
.breadcrumb a:hover { color: var(--gold-3); }
.breadcrumb [aria-current] { color: var(--gold-3); }
.breadcrumb .sep { opacity: 0.5; }

/* -------------------------------------------------- section heads */
.section-head {
  display: grid;
  gap: clamp(1.15rem, 3vw, 3.5rem);
  align-items: end;
  margin-bottom: var(--space-block);
}
@media (min-width: 900px) {
  .section-head { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
  .section-head--stack { grid-template-columns: minmax(0, 1fr); }
}
.section-head .lead { margin-bottom: 0.35rem; }

/* -------------------------------------------------- statement / figures */
.statement { display: grid; gap: clamp(1.75rem, 5vw, 4.5rem); }
@media (min-width: 940px) { .statement { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; } }
.statement__aside {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  display: grid;
  gap: 1.4rem;
  align-content: start;
}
.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.figures > div { background: var(--stone); padding: clamp(1.35rem, 2.6vw, 2.2rem); }
.section--paper .figures > div { background: var(--paper); }
.figures strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
}
.figures span {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.5;
}
@media (min-width: 760px) { .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* -------------------------------------------------- principles */
.principles { display: grid; border-top: 1px solid var(--line); }
.principles > article {
  padding: clamp(1.6rem, 3vw, 2.75rem) 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 0.85rem;
  align-content: start;
}
.principles .idx { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; color: var(--gold); }
.principles h3 { font-size: clamp(1.4rem, 2.1vw, 1.9rem); }
.principles p { color: var(--text-muted); max-width: 46ch; font-size: 0.98rem; }
.section--ink .principles, .section--ink .principles > article { border-color: var(--line-invert); }
.section--ink .principles .idx { color: var(--gold-3); }
@media (min-width: 900px) {
  .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .principles > article { padding: clamp(2rem, 3vw, 3rem) clamp(1.5rem, 2.6vw, 2.75rem); border-right: 1px solid var(--line); }
  .principles > article:first-child { padding-left: 0; }
  .principles > article:last-child { border-right: 0; padding-right: 0; }
  .section--ink .principles > article { border-right-color: var(--line-invert); }
}

/* -------------------------------------------------- project showcase */
.showcase-list { display: grid; gap: clamp(3rem, 8vw, 7rem); }

.showcase { display: grid; align-items: center; }
.showcase__media { position: relative; overflow: hidden; background: var(--ink-2); }
.showcase__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.showcase:hover .showcase__media img { transform: scale(1.04); }
.showcase__tag { position: absolute; top: 0; left: 0; display: flex; gap: 1px; }
.showcase__tag span {
  background: rgba(9, 14, 12, 0.84);
  color: var(--text-invert);
  padding: 0.6rem 1.1rem;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.showcase__tag span:first-child { color: var(--gold-3); }

.showcase__body {
  background: var(--paper);
  padding: clamp(1.75rem, 4vw, 3.75rem);
  display: grid;
  gap: 1.1rem;
  align-content: start;
}
.showcase__body h3 { font-size: clamp(2rem, 3.6vw, 3.1rem); }
.showcase__body > p { color: var(--text-muted); max-width: 50ch; }

.facts { display: grid; margin-top: 0.35rem; }
.facts > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.3rem 1.25rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--line);
}
.facts > div:last-child { border-bottom: 1px solid var(--line); }
.facts dt { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.facts dd { margin: 0; font-size: 0.92rem; color: var(--text); overflow-wrap: anywhere; line-height: 1.55; }
@media (min-width: 420px) {
  .facts > div { grid-template-columns: minmax(84px, 0.3fr) minmax(0, 1fr); align-items: baseline; }
}
.section--ink .facts > div { border-color: var(--line-invert); }
.section--ink .facts dd { color: var(--text-invert); }
.section--ink .facts dt { color: var(--gold-3); }

.showcase__actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; align-items: center; margin-top: 0.4rem; }

@media (min-width: 1000px) {
  .showcase { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); }
  .showcase__media { margin-right: -4.5rem; }
  .showcase__media img { aspect-ratio: 5 / 4; }
  .showcase__body {
    position: relative;
    z-index: 2;
    box-shadow: var(--shadow-panel);
    margin-block: clamp(1.5rem, 4vw, 3.5rem);
  }
  .showcase--flip .showcase__media { order: 2; margin-right: 0; margin-left: -4.5rem; }
  .showcase--flip .showcase__body { order: 1; }
  .showcase--bleed .showcase__media { margin-left: calc(50% - 50vw); }
  .showcase--bleed.showcase--flip .showcase__media { margin-left: -4.5rem; margin-right: calc(50% - 50vw); }
}

/* -------------------------------------------------- ready panels */
.ready-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 860px) { .ready-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ready-grid > article {
  background: var(--stone);
  padding: clamp(1.7rem, 3.2vw, 3rem);
  display: grid;
  gap: 0.95rem;
  align-content: start;
}
.section--paper .ready-grid > article { background: var(--paper); }
.ready-grid .status { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.ready-grid h3 { font-size: clamp(1.7rem, 2.8vw, 2.35rem); }
.ready-grid p { color: var(--text-muted); font-size: 0.98rem; }
.ready-grid ul { list-style: none; margin: 0.2rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.ready-grid li a { display: inline-flex; align-items: center; min-height: 44px; }
.ready-grid li { font-size: 0.88rem; color: var(--text-muted); padding-left: 1.15rem; position: relative; line-height: 1.55; }
.ready-grid li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 7px; height: 1px; background: var(--gold); }
.ready-grid .rera {
  font-size: 0.73rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
  border-top: 1px solid var(--line);
  padding-top: 0.85rem;
  margin-top: 0.3rem;
  line-height: 1.5;
}

/* -------------------------------------------------- filters */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.filter-btn {
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  color: inherit;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.filter-btn:hover { border-color: var(--ink); }
.filter-btn.is-active { background: var(--ink); border-color: var(--ink); color: var(--text-invert); }
@media (max-width: 560px) { .filter-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.filter-empty { padding: 2.5rem 0; color: var(--text-muted); }

/* -------------------------------------------------- project cards */
.project-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 780px) { .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.project-card {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.35s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.project-card:hover { border-color: var(--line-strong); transform: translateY(-4px); box-shadow: var(--shadow-panel); }
.project-card__media { position: relative; overflow: hidden; background: var(--ink-2); }
.project-card__media img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; transition: transform 1s var(--ease); }
.project-card:hover .project-card__media img { transform: scale(1.05); }
.plate {
  aspect-ratio: 16 / 11;
  display: grid;
  place-content: center;
  gap: 0.85rem;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(221, 188, 116, 0.16), transparent 60%),
    linear-gradient(160deg, var(--ink-2), var(--ink-4));
  text-align: center;
  padding: 2rem;
}
.plate strong { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 400; color: var(--text-invert); line-height: 1.1; }
.plate span { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-3); }
.plate i { display: block; width: 48px; height: 1px; background: var(--gold); margin: 0.15rem auto; }
.plate em { font-style: normal; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(243, 239, 231, 0.6); }
.project-card__body { padding: clamp(1.4rem, 2.4vw, 2rem); display: grid; gap: 0.75rem; align-content: start; }
.project-card__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.project-card__meta .status { color: var(--gold); font-weight: 700; }
.project-card__where { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: -0.35rem; }
.project-card h3 { font-size: clamp(1.6rem, 2.3vw, 2.05rem); }
.project-card p { font-size: 0.94rem; color: var(--text-muted); }
.project-card .rera { font-size: 0.71rem; color: var(--text-muted); overflow-wrap: anywhere; border-top: 1px solid var(--line); padding-top: 0.8rem; margin-top: 0.1rem; line-height: 1.5; }
.project-card .link { margin-top: 0.1rem; justify-self: start; }

/* -------------------------------------------------- proof table */
.proof-layout { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 940px) { .proof-layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; } }
.proof-table { display: grid; }
.proof-table > div { display: grid; gap: 0.3rem 2rem; padding: clamp(1.1rem, 2vw, 1.6rem) 0; border-top: 1px solid var(--line-invert); }
.proof-table > div:last-child { border-bottom: 1px solid var(--line-invert); }
.proof-table span { font-size: 0.67rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-3); }
.proof-table strong { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 400; color: var(--text-invert); line-height: 1.25; }
@media (min-width: 640px) { .proof-table > div { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); align-items: baseline; } }

/* -------------------------------------------------- locations */
.location-list { border-top: 1px solid var(--line); }
.location-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.3rem 1.5rem;
  padding: clamp(1.1rem, 2.4vw, 1.9rem) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: padding 0.4s var(--ease), color 0.3s var(--ease);
  position: relative;
  min-height: 62px;
}
.location-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  z-index: 0;
}
.location-row > * { position: relative; z-index: 1; }
.location-row:hover, .location-row:focus-visible { padding-inline: 1.5rem; color: var(--text-invert); }
.location-row:hover::before, .location-row:focus-visible::before { opacity: 1; }
.location-row .place { font-family: var(--font-display); font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.1; letter-spacing: -0.015em; }
.location-row .project { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); transition: color 0.3s var(--ease); }
.location-row:hover .project, .location-row:focus-visible .project { color: var(--gold-3); }
.location-row .arrow { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform 0.4s var(--ease); opacity: 0.5; }
.location-row:hover .arrow, .location-row:focus-visible .arrow { transform: translateX(6px); opacity: 1; }
@media (min-width: 720px) {
  .location-row { grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr) auto; }
  .location-row::before { inset: 0 -1.5rem; }
}

/* -------------------------------------------------- portfolio wall */
.portfolio-wall { display: grid; border-top: 1px solid var(--line); }
.portfolio-wall > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: clamp(0.85rem, 1.8vw, 1.25rem) 0;
  border-bottom: 1px solid var(--line);
}
.portfolio-wall .num { font-size: 0.67rem; letter-spacing: 0.12em; color: var(--gold); font-variant-numeric: tabular-nums; }
.portfolio-wall .name { font-family: var(--font-display); font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.2; }
.section--ink .portfolio-wall, .section--ink .portfolio-wall > div { border-color: var(--line-invert); }
.section--ink .portfolio-wall .name { color: var(--text-invert); }
.section--ink .portfolio-wall .num { color: var(--gold-3); }
@media (min-width: 700px) { .portfolio-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 5rem); } }
@media (min-width: 1080px) { .portfolio-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* -------------------------------------------------- director quote */
.quote-layout { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) { .quote-layout { grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); } }
.quote-portrait { margin: 0; }
.quote-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%; filter: saturate(0.62) contrast(1.04) brightness(0.97); }
.quote-portrait figcaption { margin-top: 1.1rem; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.section--ink .quote-portrait figcaption { color: var(--text-invert-muted); }
.quote-body blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(1.45rem, 2.7vw, 2.3rem); line-height: 1.3; letter-spacing: -0.012em; color: var(--text); }
.section--ink .quote-body blockquote { color: var(--text-invert); }
.quote-body blockquote p + p { margin-top: 0.65em; }
.quote-body .attrib { margin-top: 1.75rem; display: grid; gap: 0.25rem; }
.quote-body .attrib strong { font-family: var(--font-sans); font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }
.quote-body .attrib span { font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.section--ink .quote-body .attrib span { color: var(--text-invert-muted); }

/* -------------------------------------------------- forms + EMI */
.field { display: grid; gap: 0.5rem; }
.field > span { font-size: 0.67rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.7rem 0.9rem;
  background: var(--stone);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 1rem;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.field textarea { min-height: 112px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-2); background: var(--paper); }
.field .hint { font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0; text-transform: none; font-weight: 400; }


.emi-note { font-size: 0.82rem; color: var(--text-muted); }

.contact-layout { display: grid; gap: clamp(2.25rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 940px) { .contact-layout { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.contact-lines { display: grid; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.contact-lines > div { display: grid; gap: 0.3rem; padding: 1.05rem 0; border-top: 1px solid var(--line-invert); }
.contact-lines > div:last-child { border-bottom: 1px solid var(--line-invert); }
.contact-lines dt { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-3); }
.contact-lines dd { margin: 0; font-size: 1rem; color: var(--text-invert); line-height: 1.65; }
.contact-lines dd a { display: inline-flex; align-items: center; min-height: 44px; transition: color 0.25s var(--ease); }
.contact-lines dd a:hover { color: var(--gold-3); }
@media (min-width: 620px) { .contact-lines > div { grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr); gap: 0.3rem 1.5rem; align-items: baseline; } }

.form-row { display: grid; gap: 1.3rem; }
@media (min-width: 560px) { .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-status { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--text-muted); min-height: 1.3em; }
.form-status.is-ok { color: #2c6a44; }
.form-status.is-error { color: #99301f; }
.req { color: var(--gold); }

/* -------------------------------------------------- CTA band */
.cta-band { background: var(--ink-2); color: var(--text-invert); padding-block: clamp(3rem, 6vw, 5.5rem); }
.cta-band__inner { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; } }
.cta-band h2 { color: var(--text-invert); font-size: clamp(1.85rem, 3.4vw, 2.9rem); max-width: 22ch; }
.cta-band p { color: var(--text-invert-muted); margin-top: 0.85rem; max-width: 52ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* -------------------------------------------------- project detail */
.detail-layout { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 980px) { .detail-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.detail-body p { color: var(--text-muted); }
.detail-body p + p { margin-top: 1.1rem; }

.detail-aside {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 2.8vw, 2.25rem);
  display: grid;
  gap: 1.2rem;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
@media (max-width: 979px) { .detail-aside { position: static; } }
.detail-aside h3 { font-size: 1.5rem; }
.detail-aside .facts > div:first-child { border-top: 0; padding-top: 0; }

.spec-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.spec-list li {
  padding: 0.8rem 0 0.8rem 1.5rem;
  border-bottom: 1px solid var(--line);
  position: relative;
  font-size: 0.94rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.spec-list li::before { content: ""; position: absolute; left: 0; top: 1.35em; width: 8px; height: 1px; background: var(--gold); }
@media (min-width: 700px) { .spec-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3.5rem); } }
.section--ink .spec-list, .section--ink .spec-list li { border-color: var(--line-invert); }
.section--ink .spec-list li { color: var(--text-invert-muted); }

.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(1rem, 2vw, 1.35rem) 2.5rem clamp(1rem, 2vw, 1.35rem) 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  position: relative;
  min-height: 48px;
  display: flex;
  align-items: center;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 10px; height: 10px;
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.35s var(--ease);
}
.accordion details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.accordion .acc-body { padding-bottom: 1.5rem; }
.accordion .acc-body ul { margin: 0; padding-left: 1.15rem; display: grid; gap: 0.5rem; color: var(--text-muted); font-size: 0.93rem; }

/* -------------------------------------------------- footer */
.site-footer { background: var(--ink); color: var(--text-invert); border-top: 1px solid var(--line-invert); padding-top: clamp(3.5rem, 6vw, 5.5rem); }
.footer-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(2.5rem, 4vw, 4rem); }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer-logo { display: inline-block; line-height: 0; margin-bottom: 1.4rem; transition: opacity 0.3s var(--ease); }
.footer-logo:hover { opacity: 0.72; }
.footer-brand img { width: 150px; }
.footer-brand p { color: var(--text-invert-muted); max-width: 40ch; font-size: 0.95rem; }
.footer-brand address { font-style: normal; margin-top: 1.5rem; color: var(--text-invert-muted); font-size: 0.92rem; line-height: 1.75; }
.footer-brand address a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-invert); }
.footer-brand address a:hover { color: var(--gold-3); }
.footer-col h2 {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-3);
  margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.3rem 0;
  font-size: 0.92rem;
  color: var(--text-invert-muted);
  transition: color 0.25s var(--ease), padding-left 0.3s var(--ease);
}
.footer-col a:hover { color: var(--gold-3); padding-left: 5px; }

.footer-bottom {
  border-top: 1px solid var(--line-invert);
  padding-block: 1.5rem;
  display: grid;
  gap: 1rem;
  align-items: center;
  font-size: 0.79rem;
  color: var(--text-invert-muted);
}
@media (min-width: 780px) { .footer-bottom { grid-template-columns: minmax(0, 1fr) auto; } }
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; align-items: center; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; transition: color 0.25s var(--ease); }
.footer-note { opacity: 0.72; font-size: 0.75rem; }
.footer-note a { text-decoration: underline; text-underline-offset: 2px; }
.footer-legal a:hover { color: var(--gold-3); }
.footer-social { display: flex; gap: 0.5rem; }
.footer-social a {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-invert);
  border-radius: 50%;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }
.footer-social a:hover { background: var(--gold-2); border-color: var(--gold-2); color: #171104; }

/* -------------------------------------------------- mobile sticky CTA */
.mobile-cta {
  position: fixed;
  inset: auto 0 0;
  z-index: 80;
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--ink);
  border-top: 1px solid var(--line-invert);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-cta a {
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  color: var(--text-invert);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-right: 1px solid var(--line-invert);
}
.mobile-cta a:last-child { border-right: 0; background: var(--gold-2); color: #171104; }
.mobile-cta svg { width: 17px; height: 17px; fill: currentColor; }
@media (max-width: 900px) { .mobile-cta { display: grid; } }

/* -------------------------------------------------- prose */
.prose { max-width: 72ch; }
/* A blog post is a single column of reading, so centre the measure rather than
   leaving half the shell empty beside it. The legal pages keep the left-aligned
   prose, where the page is a reference rather than an article. */
.post-prose { margin-inline: auto; }
.prose h2 { font-size: clamp(1.5rem, 2.4vw, 2.05rem); margin-top: 2.75rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.22rem; margin-top: 1.75rem; }
.prose p, .prose li { color: var(--text-muted); }
.prose p + p, .prose ul, .prose ol { margin-top: 1rem; }
.prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------- reveal motion */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__media img { animation: none; }
}

/* -------------------------------------------------- misc */
[hidden] { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.stack-lg { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.mt-block { margin-top: var(--space-block); }

/* ==========================================================================
   Project carousel
   ========================================================================== */
.carousel { margin-top: clamp(1.25rem, 2.5vw, 2rem); }

.carousel__viewport {
  overflow: hidden;
  padding-block: clamp(1rem, 2.5vw, 2.25rem);
  cursor: grab;
}
.carousel.is-dragging .carousel__viewport { cursor: grabbing; }

.carousel__track {
  display: flex;
  align-items: stretch;
  gap: clamp(1rem, 2.2vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.carousel:not(.is-enhanced) .carousel__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--gutter);
  cursor: auto;
}
.carousel:not(.is-enhanced) .pslide { scroll-snap-align: center; }
.carousel.is-enhanced .carousel__track {
  transform: translate3d(0, 0, 0);
  transition: transform 0.9s var(--spring);
  will-change: transform;
}
.carousel.is-dragging .carousel__track { transition: none; }

.pslide {
  flex: 0 0 auto;
  width: min(52vw, 660px);
  transform: scale(0.9);
  opacity: 0.34;
  filter: blur(3px);
  transition: transform 0.9s var(--spring), opacity 0.7s var(--ease), filter 0.7s var(--ease);
  will-change: transform, opacity;
}
.pslide[data-active] { transform: scale(1); opacity: 1; filter: none; }
.carousel:not(.is-enhanced) .pslide { transform: none; opacity: 1; filter: none; }

@media (max-width: 900px) {
  .pslide { width: min(86vw, 560px); filter: blur(2px); opacity: 0.4; transform: scale(0.94); }
}

/* -------------------------------------------------- the card */
.pcard {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 2px 6px -4px rgba(14, 21, 18, 0.2);
  transition: box-shadow 0.7s var(--ease);
}
.pslide[data-active] .pcard { box-shadow: var(--shadow-lift); }

.pcard__media { position: relative; overflow: hidden; background: var(--ink-2); }
.pcard__media img, .pcard__media .plate {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.pcard__media img { transform: scale(1.06); transition: transform 1.4s var(--spring); }
.pslide[data-active] .pcard__media img { transform: scale(1); }

.pcard__badge {
  position: absolute;
  top: clamp(0.75rem, 1.6vw, 1.15rem);
  left: clamp(0.75rem, 1.6vw, 1.15rem);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.95rem;
  background: rgba(9, 14, 12, 0.6);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color: var(--text-invert);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.6s var(--ease) 0.12s, transform 0.6s var(--spring) 0.12s;
}
.pslide[data-active] .pcard__badge { opacity: 1; transform: none; }
.pcard__badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-3); flex: none; }

.pcard__body {
  padding: clamp(1.25rem, 2.4vw, 2rem);
  display: grid;
  gap: 0.85rem;
  align-content: start;
}
.pslide .pcard__body > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.65s var(--ease), transform 0.75s var(--spring);
}
.pslide[data-active] .pcard__body > * { opacity: 1; transform: none; }
.pslide[data-active] .pcard__body > *:nth-child(1) { transition-delay: 0.10s; }
.pslide[data-active] .pcard__body > *:nth-child(2) { transition-delay: 0.17s; }
.pslide[data-active] .pcard__body > *:nth-child(3) { transition-delay: 0.24s; }
.pslide[data-active] .pcard__body > *:nth-child(4) { transition-delay: 0.31s; }
.carousel:not(.is-enhanced) .pcard__body > * { opacity: 1; transform: none; }

.pcard__head { display: grid; gap: 0.3rem; }
.pcard__head h3 { font-size: clamp(1.5rem, 2.6vw, 2.15rem); }
.pcard__where { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.pcard__desc { color: var(--text-muted); font-size: 0.96rem; }

.pcard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.35rem;
}
.pcard__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem; list-style: none; margin: 0; padding: 0; }
.pcard__stats li { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--text-muted); }
.pcard__stats li + li { padding-left: 1.1rem; border-left: 1px solid var(--line); }
.pcard__stats svg { width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pcard__rera { font-size: 0.7rem; color: var(--text-muted); overflow-wrap: anywhere; border-top: 1px solid var(--line); padding-top: 0.8rem; line-height: 1.5; }

@media (max-width: 560px) {
  .pcard__foot { flex-direction: column; align-items: stretch; }
  .pcard__foot .btn { width: 100%; }
}

/* -------------------------------------------------- controls */
.carousel__controls {
  width: var(--shell);
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.carousel__arrow {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  flex: none;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease), transform 0.4s var(--spring), opacity 0.3s var(--ease);
}
.carousel__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.carousel__arrow:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--text-invert); transform: scale(1.06); }
.carousel__arrow--next { background: var(--ink); border-color: var(--ink); color: var(--text-invert); }
.carousel__arrow--next:hover:not(:disabled) { background: var(--gold-2); border-color: var(--gold-2); color: #171104; }
.carousel__arrow:disabled { opacity: 0.28; cursor: not-allowed; }

.carousel__dots { display: flex; align-items: center; gap: 0.5rem; }
.carousel__dot {
  width: 22px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: width 0.6s var(--spring);
}
.carousel__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--line-strong);
  transition: width 0.6s var(--spring), background-color 0.4s var(--ease);
}
.carousel__dot:hover::before { background: var(--text-muted); }
.carousel__dot.is-active { width: 44px; }
.carousel__dot.is-active::before { width: 30px; background: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .pslide { filter: none; opacity: 1; transform: none; }
  .carousel.is-enhanced .carousel__track { transition: none; }
  .pcard__media img { transform: none; }
  .pcard__badge, .pslide .pcard__body > * { transform: none; opacity: 1; }
}

/* ==========================================================================
   Hero slider — foot notes and progress bars
   ========================================================================== */
.hero--slider .hero__inner { justify-content: flex-end; gap: clamp(1.75rem, 5vh, 3.25rem); }

.hero__foot {
  display: grid;
  gap: clamp(1rem, 2.2vh, 1.6rem);
  justify-items: start;
}

.hero__notes { display: grid; max-width: 46ch; }
.hero__note {
  grid-area: 1 / 1;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(243, 239, 231, 0.66);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.75s var(--ease) 0.1s, transform 0.9s var(--spring) 0.1s, visibility 0.75s;
}
.hero__note.is-active { opacity: 1; visibility: visible; transform: none; }

.hero__bars { display: flex; align-items: center; gap: 0.6rem; }
.hero__bar {
  width: 62px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  align-items: center;
}
.hero__bar span {
  display: block;
  height: 2px;
  width: 100%;
  background: rgba(243, 239, 231, 0.3);
  position: relative;
  overflow: hidden;
  transition: background-color 0.4s var(--ease);
}
.hero__bar:hover span { background: rgba(243, 239, 231, 0.55); }
.hero__bar span::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--text-invert);
  transform: scaleX(0);
  transform-origin: left;
}
.hero__bar.is-active span::after { animation: heroBar var(--hero-duration, 7s) linear forwards; }
.hero--paused .hero__bar.is-active span::after { animation-play-state: paused; }
@keyframes heroBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 760px) {
  .hero__bar { width: 44px; }
  .hero__notes { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide, .hero__text, .hero__note { transition: none; }
  .hero__slide .hero__media img { transition: none; transform: none; }
  .hero__bar.is-active span::after { animation: none; transform: scaleX(1); }
}

/* ==========================================================================
   Floor plans — an architect's drawing, pinned and readable
   ========================================================================== */
.btn__meta { font-size: 0.66rem; letter-spacing: 0.1em; opacity: 0.6; font-weight: 400; }
.btn--sm .btn__meta { display: none; }
.btn svg + span { line-height: 1.2; }

.plans {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  align-items: start;
}
@media (min-width: 1000px) {
  .plans { grid-template-columns: minmax(190px, 0.22fr) minmax(0, 1fr); }
  .plans__foot { grid-column: 1 / -1; }
}

/* ---- tabs ---- */
.plans__tabs { display: flex; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 999px) {
  .plans__tabs {
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .plans__tabs::-webkit-scrollbar { display: none; }
  .plans__tab { flex: 0 0 auto; scroll-snap-align: start; }
}
@media (min-width: 1000px) { .plans__tabs { flex-direction: column; } }

.plans__tab {
  position: relative;
  display: grid;
  gap: 0.2rem;
  padding: 0.95rem 1.15rem;
  min-height: 56px;
  background: var(--stone);
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--text-muted);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.section--stone2 .plans__tab { background: var(--stone-2); }
.plans__tab::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s var(--spring);
}
@media (max-width: 999px) {
  .plans__tab::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 2px; transform: scaleX(0); transform-origin: left; }
  .plans__tab.is-active::before { transform: scaleX(1); }
}
.plans__tab:hover { background: var(--paper); color: var(--text); }
.plans__tab.is-active { background: var(--paper); color: var(--text); }
@media (min-width: 1000px) { .plans__tab.is-active::before { transform: scaleY(1); } }
.plans__tab-label { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.plans__tab-meta { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; white-space: nowrap; }

/* ---- stage ---- */
.plans__stage { position: relative; }
.plans__panel { animation: planIn 0.6s var(--spring) both; }
@keyframes planIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.plans__figure { margin: 0; display: grid; gap: 1rem; }
.plans__zoom {
  display: block;
  width: 100%;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  background: var(--paper);
  border: 1px solid var(--line);
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
}
.plans__zoom img { width: 100%; height: auto; transition: transform 1s var(--spring); }
.plans__zoom:hover img { transform: scale(1.015); }
.plans__zoom-hint {
  position: absolute;
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  background: rgba(9, 14, 12, 0.82);
  backdrop-filter: blur(8px);
  color: var(--text-invert);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--spring);
  pointer-events: none;
}
.plans__zoom:hover .plans__zoom-hint,
.plans__zoom:focus-visible .plans__zoom-hint { opacity: 1; transform: none; }
.plans__zoom-hint svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; }
@media (hover: none) { .plans__zoom-hint { opacity: 1; transform: none; } }

.plans__figure figcaption { display: grid; gap: 0.3rem; }
.plans__caption-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.plans__caption-note { font-size: 0.93rem; color: var(--text-muted); max-width: 62ch; line-height: 1.6; }

.plans__foot {
  display: grid;
  gap: 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
@media (min-width: 800px) { .plans__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.plans__foot p { font-size: 0.8rem; color: var(--text-muted); max-width: 60ch; }
.plans__foot-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; }

/* ==========================================================================
   Brochure gate + lightbox
   ========================================================================== */
.gate { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: clamp(1rem, 3vw, 2rem); }
.gate__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 13, 11, 0.72);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  animation: gateScrim 0.4s var(--ease) both;
}
@keyframes gateScrim { from { opacity: 0; } to { opacity: 1; } }

.gate__panel {
  position: relative;
  width: min(100%, 560px);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  background: var(--paper);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  display: grid;
  gap: 0.9rem;
  box-shadow: 0 60px 120px -60px rgba(8, 13, 11, 0.9);
  animation: gatePanel 0.55s var(--spring) both 0.05s;
}
@keyframes gatePanel { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: none; } }

.gate__close {
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: 50%;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.gate__close:hover { background: var(--stone); color: var(--text); }
.gate__close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.gate__lead { font-size: 0.93rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 0.35rem; }
.gate__form { display: grid; gap: 1.1rem; }
.gate__consent { margin: 0; font-size: 0.83rem; color: var(--text-muted); line-height: 1.55; }
.gate__consent a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.gate__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8, 13, 11, 0.94);
  animation: gateScrim 0.35s var(--ease) both;
}
.lightbox__figure { margin: 0; display: grid; gap: 1rem; justify-items: center; max-height: 100%; }
.lightbox__figure img {
  max-width: 100%;
  max-height: calc(100dvh - 8rem);
  width: auto;
  object-fit: contain;
  background: var(--paper);
  padding: clamp(0.5rem, 1.5vw, 1rem);
  animation: gatePanel 0.5s var(--spring) both;
}
.lightbox__figure figcaption {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(243, 239, 231, 0.7);
  text-align: center;
}
.lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line-invert);
  border-radius: 50%;
  color: var(--text-invert);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lightbox__close:hover { background: rgba(243, 239, 231, 0.14); border-color: rgba(243, 239, 231, 0.5); }
.lightbox__close svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* ==========================================================================
   Sticky project bar
   ========================================================================== */
.projectbar {
  position: fixed;
  inset: var(--header-h) 0 auto;
  z-index: 70;
  background: rgba(14, 21, 18, 0.95);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-invert);
  color: var(--text-invert);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.5s var(--spring), opacity 0.4s var(--ease), visibility 0.5s;
}
.projectbar.is-shown { transform: none; opacity: 1; visibility: visible; }
.projectbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.7rem;
}
.projectbar__id { display: flex; align-items: baseline; gap: 0.75rem; min-width: 0; }
.projectbar__status { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-3); flex: none; }
.projectbar__id strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; white-space: nowrap; }
.projectbar__where { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-invert-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.projectbar__actions { display: flex; gap: 0.6rem; flex: none; }
.projectbar__actions .btn--sm { --btn-bg: transparent; --btn-fg: var(--text-invert); --btn-bd: rgba(243, 239, 231, 0.4); }
.projectbar__actions .btn--sm:hover { --btn-bg: rgba(243, 239, 231, 0.14); --btn-bd: rgba(243, 239, 231, 0.7); }
.projectbar__actions a.btn--sm { --btn-bg: var(--gold-2); --btn-fg: #171104; --btn-bd: var(--gold-2); }
.projectbar__actions a.btn--sm:hover { --btn-bg: var(--gold-3); --btn-bd: var(--gold-3); }

/* The phone already carries a fixed action bar at the bottom; two would fight. */
@media (max-width: 900px) { .projectbar { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .gate__scrim, .gate__panel, .lightbox, .lightbox__figure img, .plans__panel { animation: none; }
  .projectbar { transition: none; }
}

/* ==========================================================================
   Image-backed bands
   Generated imagery sits behind a heavy scrim: atmosphere, never a claim.
   ========================================================================== */
.cta-band--image { position: relative; overflow: hidden; isolation: isolate; }
.cta-band__media { position: absolute; inset: 0; z-index: 0; }
.cta-band__media picture, .cta-band__media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band__media img { object-position: 72% center; }
.cta-band--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(96deg, rgba(14, 21, 18, 0.96) 0%, rgba(14, 21, 18, 0.9) 34%, rgba(14, 21, 18, 0.58) 62%, rgba(14, 21, 18, 0.34) 100%),
    linear-gradient(180deg, rgba(14, 21, 18, 0.3), rgba(14, 21, 18, 0.55));
}
.cta-band--image .cta-band__inner { position: relative; z-index: 2; }
/* With a backdrop, keep the whole message in the dark left column so the image
   is never fighting the buttons for the same pixels. */
@media (min-width: 900px) {
  .cta-band--image .cta-band__inner { grid-template-columns: minmax(0, 0.56fr); }
  .cta-band--image .cta-band__actions { margin-top: 0.5rem; }
}
.cta-band--image { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
@media (max-width: 760px) {
  .cta-band__media img { object-position: 68% center; }
  .cta-band--image::after {
    background: linear-gradient(180deg, rgba(14, 21, 18, 0.82) 0%, rgba(14, 21, 18, 0.9) 55%, rgba(14, 21, 18, 0.96) 100%);
  }
}

.section--textured { position: relative; overflow: hidden; isolation: isolate; }
.section__texture { position: absolute; inset: 0; z-index: 0; opacity: 0.16; }
.section__texture picture, .section__texture img { width: 100%; height: 100%; object-fit: cover; }
.section--textured::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(14, 21, 18, 0.72) 0%, rgba(14, 21, 18, 0.86) 45%, var(--ink) 100%);
}
.section--textured > .shell { position: relative; z-index: 2; }

/* ==========================================================================
   Why Bhandary — numbered pillars
   ========================================================================== */
.pillars { display: grid; border-top: 1px solid var(--line); }
.pillar {
  display: grid;
  gap: clamp(0.75rem, 2vw, 2.5rem);
  padding: clamp(2rem, 4vw, 3.5rem) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
@media (min-width: 860px) { .pillar { grid-template-columns: minmax(0, 0.14fr) minmax(0, 0.86fr); } }
.pillar__idx {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.4rem);
  line-height: 1;
  color: var(--gold);
  opacity: 0.45;
}
.pillar__body { display: grid; gap: 0.9rem; }
.pillar__body h3 { max-width: 22ch; }
.pillar__lead { font-family: var(--font-display); font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.4; color: var(--text); }
.pillar__body > p { color: var(--text-muted); max-width: 68ch; }
.pillar__facts {
  display: grid;
  gap: 1px;
  margin-top: 0.75rem;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 620px) { .pillar__facts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.pillar__facts > div { background: var(--paper); padding: 0.9rem 1.1rem; display: grid; gap: 0.25rem; }
.pillar__facts dt { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.pillar__facts dd { margin: 0; font-size: 0.92rem; color: var(--text); line-height: 1.45; }

/* ==========================================================================
   Locations — neighbourhood entries
   ========================================================================== */
.hoods { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.hood { display: grid; gap: clamp(1.25rem, 3vw, 3rem); align-items: center; }
@media (min-width: 1000px) {
  .hood { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
  .hood--flip .hood__media { order: 2; }
}
.hood__media { overflow: hidden; background: var(--ink-2); }
.hood__media img, .hood__media .plate { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hood__media img { transition: transform 1.2s var(--ease); }
.hood:hover .hood__media img { transform: scale(1.04); }
.hood__body { display: grid; gap: 0.9rem; align-content: start; }
.hood__standfirst { font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.35; color: var(--text); }
.hood__body > p { color: var(--text-muted); max-width: 60ch; }
.hood__around {
  display: grid;
  gap: 1px;
  margin-top: 0.5rem;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 560px) { .hood__around { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.hood__around > div { background: var(--stone); padding: 1rem 1.1rem; }
.section--paper .hood__around > div { background: var(--paper); }
.hood__around h4 {
  font-family: var(--font-sans);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.hood__around ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.hood__around li { font-size: 0.85rem; color: var(--text-muted); line-height: 1.45; padding-left: 0.9rem; position: relative; }
.hood__around li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 1px; background: var(--gold); }

/* ==========================================================================
   Motion system
   Three additions on top of the base fade-and-rise reveal. All of them are
   opt-in per element and all of them collapse under reduced-motion.
   ========================================================================== */

/* 1. Display headings wipe up from behind their own baseline. */
.wipe { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.wipe > span {
  display: block;
  transform: translateY(125%);
  transition: transform 1.05s var(--spring);
  transition-delay: var(--d, 0ms);
}
.is-visible .wipe > span,
.wipe.is-visible > span,
.hero__text.is-active .wipe > span,
.hero--page .wipe > span { transform: none; }
html:not(.js) .wipe > span { transform: none; }

/* 2. Imagery opens from a clip rather than fading, which reads as film. */
.clip-in { clip-path: inset(0 0 100% 0); transition: clip-path 1.15s var(--spring); transition-delay: var(--d, 0ms); }
.clip-in.is-visible, .is-visible .clip-in { clip-path: inset(0 0 0 0); }
html:not(.js) .clip-in { clip-path: none; }

/* 3. Counters hold their space while they tick so nothing reflows. */
.figures strong[data-count] { font-variant-numeric: tabular-nums lining-nums; }

/* Page heroes drift very slightly against the scroll. */
.hero--page .hero__media { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .wipe > span { transform: none !important; transition: none !important; }
  .clip-in { clip-path: none !important; transition: none !important; }
  .hero--page .hero__media { transform: none !important; }
}

/* project bar gains in-page section links */
.projectbar__nav { display: none; gap: 1.5rem; margin-left: auto; margin-right: 1.5rem; }
@media (min-width: 1180px) { .projectbar__nav { display: flex; } }
.projectbar__nav a {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--text-invert-muted);
  position: relative;
  padding-block: 0.35rem;
  transition: color 0.3s var(--ease);
}
.projectbar__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold-2);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.projectbar__nav a:hover { color: var(--text-invert); }
.projectbar__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.projectbar__id { flex: 0 1 auto; }

/* ==========================================================================
   Project search — buy / rent / commercial with live result count
   ========================================================================== */
.psearch {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-panel);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.psearch__tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); }
.psearch__tab {
  position: relative;
  min-height: 56px;
  padding: 0 clamp(1.1rem, 2.4vw, 2rem);
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.3s var(--ease);
}
.psearch__tab::after {
  content: "";
  position: absolute;
  left: clamp(1.1rem, 2.4vw, 2rem);
  right: clamp(1.1rem, 2.4vw, 2rem);
  bottom: -1px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--spring);
}
.psearch__tab:hover { color: var(--text); }
.psearch__tab.is-active { color: var(--text); }
.psearch__tab.is-active::after { transform: scaleX(1); }

.psearch__fields {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
  padding: clamp(1.25rem, 2.6vw, 2rem);
  align-items: end;
}
@media (min-width: 700px) { .psearch__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .psearch__fields { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; } }

.psearch__field { display: grid; gap: 0.5rem; min-width: 0; }
.psearch__field > span {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.psearch__field select {
  width: 100%;
  min-height: 48px;
  padding: 0.55rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  font-size: 0.98rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.3s var(--ease);
}
.psearch__field select:hover { border-bottom-color: var(--gold); }
.psearch__field select:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

.psearch__go { display: grid; gap: 0.5rem; justify-items: stretch; }
@media (min-width: 1080px) { .psearch__go { justify-items: end; } }
.psearch__go .btn { white-space: nowrap; border-radius: 999px; padding-inline: 1.5rem; }
.psearch__go .btn svg { width: 17px; height: 17px; }
.psearch__clear {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 32px;
  transition: color 0.25s var(--ease);
}
.psearch__clear:hover { color: var(--text); }

.filter-empty {
  display: grid;
  gap: 0.85rem;
  justify-items: start;
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px dashed var(--line-strong);
  background: var(--paper);
}
.filter-empty p { color: var(--text-muted); max-width: 56ch; }
.filter-empty .display-s { color: var(--text); }


/* ==========================================================================
   Locations — map explorer
   Full-bleed split: the list scrolls with the page, the map stays put.
   ========================================================================== */
.explorer { display: grid; background: var(--paper); }
@media (min-width: 1000px) {
  .explorer { grid-template-columns: minmax(400px, 0.42fr) minmax(0, 0.58fr); align-items: start; }
}

.explorer__list {
  padding: clamp(2.5rem, 6vw, 6rem) clamp(1.25rem, 4vw, 4.5rem);
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-content: start;
}
.explorer__intro { display: grid; gap: 1rem; max-width: 42ch; }
.explorer__intro .lead { font-size: 1rem; }

/* ---- cards: image on top, generous air, no dividers ---- */
.mapcard {
  display: grid;
  gap: 0;
  cursor: pointer;
  scroll-margin-top: calc(var(--header-h) + 2rem);
  transition: transform 0.6s var(--spring);
}
.mapcard__media { overflow: hidden; background: var(--ink-2); }
.mapcard__media img, .mapcard__media .plate {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.2s var(--ease), filter 0.7s var(--ease);
  filter: saturate(0.82) brightness(0.97);
}
.mapcard:hover .mapcard__media img,
.mapcard.is-active .mapcard__media img { transform: scale(1.035); filter: none; }

.mapcard__body { padding: clamp(1.25rem, 2.4vw, 1.9rem) 0 0; display: grid; gap: 0.45rem; }
.mapcard__kind {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.mapcard h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.06; }
.mapcard__where { font-size: 0.97rem; color: var(--text-muted); }
.mapcard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1rem; }
.mapcard__actions .btn { border-radius: 2px; }
.mapcard__note { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.35rem; }

/* the active card is lifted by a quiet gold rule, not a border box */
.mapcard { position: relative; }
.mapcard::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(0.75rem, 2vw, 1.75rem));
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.6s var(--spring);
}
.mapcard.is-active::before { transform: scaleY(1); }
.explorer__empty { color: var(--text-muted); }

/* ---- map column ---- */
.explorer__map { position: relative; background: #eeeae2; isolation: isolate; z-index: 0; }
@media (min-width: 1000px) {
  .explorer__map { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); }
}
@media (max-width: 999px) {
  .explorer__map { height: 62vh; min-height: 340px; order: -1; }
}
.explorer__canvas { position: absolute; inset: 0; }
.explorer__fallback { padding: 2rem; color: var(--text-muted); }

/* ---- floating status toggle, over the map ---- */
.explorer__toggle {
  position: absolute;
  top: clamp(1rem, 2.5vw, 1.75rem);
  right: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 500;
  display: flex;
  gap: 0.25rem;
  padding: 0.3rem;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(23, 32, 28, 0.08);
  border-radius: 999px;
  box-shadow: 0 18px 44px -22px rgba(8, 13, 11, 0.55);
}
.explorer__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.4rem 1.15rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.explorer__pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.explorer__pill .dot--live { background: var(--gold); }
.explorer__pill:hover { color: var(--text); }
.explorer__pill.is-active { background: var(--ink); color: var(--text-invert); }
.explorer__pill.is-active .dot { background: var(--gold-3); }
@media (max-width: 520px) {
  .explorer__toggle { left: clamp(1rem, 4vw, 1.5rem); right: clamp(1rem, 4vw, 1.5rem); justify-content: center; }
  .explorer__pill { padding-inline: 0.85rem; font-size: 0.62rem; }
}

/* ---- tiles pushed to near-white so the pins own the frame ---- */
.explorer__canvas .leaflet-tile-pane { filter: grayscale(1) brightness(1.14) contrast(0.72); }
.explorer__canvas .leaflet-container { background: #eeeae2; font-family: var(--font-sans); }

/* ---- teardrop pins ---- */
.mappin { width: auto !important; height: auto !important; }
.mappin__pin {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--ink);
  box-shadow: 0 10px 24px -8px rgba(8, 13, 11, 0.65);
  transition: transform 0.5s var(--spring), background-color 0.35s var(--ease);
}
.mappin__pin span {
  transform: rotate(45deg);
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1;
  color: var(--text-invert);
  font-variant-numeric: lining-nums;
}
.mappin--under-construction .mappin__pin { background: var(--gold); }
.mappin--under-construction .mappin__pin span { color: #171104; }
.mappin--office .mappin__pin { width: 26px; height: 26px; background: var(--sage); }
.mappin--office .mappin__pin span { font-size: 0.72rem; }
.mappin.is-active .mappin__pin, .mappin.is-hover .mappin__pin { transform: rotate(-45deg) scale(1.18); }

.mappin__label {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  translate: -50% 0;
  background: var(--ink);
  color: var(--text-invert);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.35s var(--ease), transform 0.4s var(--spring);
  pointer-events: none;
  box-shadow: 0 10px 24px -12px rgba(8, 13, 11, 0.8);
}
.mappin.is-active .mappin__label, .mappin.is-hover .mappin__label { opacity: 1; transform: none; }

/* ---- controls, legend, attribution ---- */
.explorer__canvas .leaflet-control-zoom { border: 0; box-shadow: 0 14px 32px -18px rgba(8, 13, 11, 0.6); }
.explorer__canvas .leaflet-control-zoom a {
  width: 44px; height: 44px; line-height: 44px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  color: var(--text);
  border: 1px solid rgba(23, 32, 28, 0.08);
  font-size: 1.15rem;
}
.explorer__canvas .leaflet-control-zoom a:hover { background: var(--ink); color: var(--text-invert); }
.explorer__canvas .leaflet-control-zoom a:first-child { border-radius: 999px 999px 0 0; }
.explorer__canvas .leaflet-control-zoom a:last-child { border-radius: 0 0 999px 999px; border-top: 0; }

.explorer__legend {
  position: absolute;
  left: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1.75rem, 3vw, 2.25rem);
  z-index: 500;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  padding: 0.55rem 1rem;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(23, 32, 28, 0.08);
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  pointer-events: none;
}
.explorer__legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.explorer__legend i { width: 8px; height: 8px; border-radius: 50%; }
.explorer__legend .k-live { background: var(--gold); }
.explorer__legend .k-ready { background: var(--ink); }
.explorer__legend .k-office { background: var(--sage); }
.explorer__canvas .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.8);
  color: var(--text-muted);
  font-size: 0.6rem;
  padding: 0.15rem 0.5rem;
}
.explorer__canvas .leaflet-control-attribution a { color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .mapcard, .mapcard::before, .mapcard__media img, .mappin__pin, .mappin__label { transition: none; }
}

/* The whole project card is the target; the visible link stays the accessible name. */
.project-card { position: relative; }
.project-card__hit { position: absolute; inset: 0; z-index: 1; }
.project-card__link { position: static; }
.project-card:hover .project-card__link::after { transform: scaleX(1.05); opacity: 1; }
.project-card:focus-within { outline: 2px solid var(--gold-2); outline-offset: 3px; }

/* ==========================================================================
   EMI calculator
   ========================================================================== */
.calc { display: grid; gap: 0; border: 1px solid var(--line); background: var(--line); }
@media (min-width: 940px) { .calc { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }

.calc__inputs {
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  display: grid;
  gap: clamp(1.5rem, 2.6vw, 2.25rem);
  align-content: start;
}
.calc__field { display: grid; gap: 0.65rem; }
.calc__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.calc__row label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.calc__value { display: inline-flex; align-items: baseline; gap: 0.15rem; color: var(--text); }
.calc__affix { font-size: 0.9rem; color: var(--text-muted); }
.calc__value input {
  width: 8ch;
  min-height: 34px;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-variant-numeric: lining-nums tabular-nums;
  text-align: right;
  color: var(--text);
  transition: border-color 0.25s var(--ease);
}
.calc__value input:hover { border-bottom-color: var(--gold); }
.calc__value input:focus { outline: none; border-bottom-color: var(--gold); }
.calc__value input:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

.calc__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
}
.calc__slider::-webkit-slider-runnable-track { height: 3px; background: var(--stone-3); border-radius: 999px; }
.calc__slider::-moz-range-track { height: 3px; background: var(--stone-3); border-radius: 999px; }
.calc__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  margin-top: -8.5px;
  border-radius: 50%;
  background: var(--ink);
  border: 4px solid var(--paper);
  box-shadow: 0 2px 10px -2px rgba(8, 13, 11, 0.6);
  transition: transform 0.25s var(--spring), background-color 0.25s var(--ease);
}
.calc__slider::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ink);
  border: 4px solid var(--paper);
  box-shadow: 0 2px 10px -2px rgba(8, 13, 11, 0.6);
}
.calc__slider:hover::-webkit-slider-thumb { transform: scale(1.15); background: var(--gold); }
.calc__slider:focus-visible::-webkit-slider-thumb { background: var(--gold); }
.calc__slider:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 4px; border-radius: 999px; }
.calc__scale { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--text-muted); font-variant-numeric: lining-nums; }

.calc__out {
  background: var(--ink);
  color: var(--text-invert);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  display: grid;
  gap: 1.1rem;
  align-content: start;
}
.calc__out-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-3); }
.calc__emi {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--text-invert);
  font-variant-numeric: lining-nums tabular-nums;
}
.calc__split-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(243, 239, 231, 0.14); }
.calc__split-bar i { display: block; height: 100%; transition: width 0.6s var(--spring); }
.calc__split-bar i:first-child { background: var(--gold); }
.calc__split-bar i:last-child { background: rgba(243, 239, 231, 0.42); }

.calc__facts { display: grid; gap: 0; margin-top: 0.25rem; }
.calc__facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line-invert);
}
.calc__facts dt { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--text-invert-muted); }
.calc__facts dd { margin: 0; font-size: 1rem; color: var(--text-invert); font-variant-numeric: lining-nums tabular-nums; }
.calc__facts .key { width: 8px; height: 8px; border-radius: 2px; }
.calc__facts .key--principal { background: var(--gold); }
.calc__facts .key--interest { background: rgba(243, 239, 231, 0.42); }
.calc__note { font-size: 0.76rem; color: var(--text-invert-muted); line-height: 1.55; }
.calc__actions { margin-top: 0.35rem; }

/* ==========================================================================
   Enquiry form
   ========================================================================== */
.eform { position: relative; background: var(--paper); box-shadow: var(--shadow-lift); color: var(--text); }
.eform__panel { padding: clamp(1.5rem, 3.2vw, 2.75rem); display: grid; gap: 1.15rem; }
.eform__panel h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); color: var(--text); }
.eform__lead { font-size: 0.9rem; color: var(--text-muted); margin-top: -0.5rem; }

.eform__group { border: 0; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.eform__group legend {
  padding: 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.chips li {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--text-muted);
  background: var(--stone);
}
.chipbox { position: relative; }
.chipbox input { position: absolute; opacity: 0; pointer-events: none; }
.chipbox span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.chipbox span:hover { border-color: var(--ink); color: var(--text); }
.chipbox input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--text-invert); }
.chipbox input:focus-visible + span { outline: 2px solid var(--gold-2); outline-offset: 3px; }

.field__phone { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 2px; background: var(--stone); overflow: hidden; }
.field__cc {
  display: grid;
  place-items: center;
  padding-inline: 0.85rem;
  font-size: 0.92rem;
  color: var(--text-muted);
  background: var(--stone-2);
  border-right: 1px solid var(--line);
}
.field__phone input { border: 0; background: transparent; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea,
.field.is-invalid .field__phone { border-color: #9c3222; animation: shake 0.4s var(--ease); }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

.eform__consent { margin: 0; font-size: 0.82rem; color: var(--text-muted); line-height: 1.55; }
.eform__consent a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.eform__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.eform__submit { position: relative; overflow: hidden; }
.eform__submit.is-busy .eform__submit-text, .eform__submit.is-busy svg { opacity: 0; }
.eform__spinner { display: none; }
.eform__submit.is-busy .eform__spinner {
  display: block;
  position: absolute;
  inset: 50% auto auto 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(23,17,4,.25);
  border-top-color: #171104;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- the thank-you state ---- */
.eform__done {
  padding: clamp(2rem, 4vw, 3.25rem);
  display: grid;
  gap: 1rem;
  justify-items: start;
  text-align: left;
}
.eform__done h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--text); }
.eform__done h3:focus { outline: none; }
.eform__done p { color: var(--text-muted); max-width: 46ch; }
.eform__done-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 0.5rem; }
.eform__done-actions .link { background: none; border: 0; cursor: pointer; }

.eform__tick svg { width: 58px; height: 58px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.eform__tick circle { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 151; stroke-dashoffset: 151; }
.eform__tick path { stroke: var(--ink); stroke-width: 3.5; stroke-dasharray: 36; stroke-dashoffset: 36; }
.eform__done.is-in .eform__tick circle { animation: tickRing 0.7s var(--spring) forwards; }
.eform__done.is-in .eform__tick path { animation: tickMark 0.4s var(--spring) 0.45s forwards; }
@keyframes tickRing { to { stroke-dashoffset: 0; } }
@keyframes tickMark { to { stroke-dashoffset: 0; } }
.eform__done.is-in > * { animation: doneIn 0.6s var(--spring) both; }
.eform__done.is-in > *:nth-child(2) { animation-delay: 0.15s; }
.eform__done.is-in > *:nth-child(3) { animation-delay: 0.22s; }
.eform__done.is-in > *:nth-child(4) { animation-delay: 0.3s; }
@keyframes doneIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* careers extras */
.careers__sub { font-family: var(--font-sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-top: 2rem; margin-bottom: 0.85rem; }
.careers__cv { font-size: 0.85rem; color: var(--text-muted); margin-top: 1.25rem; }
.careers__cv a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.section--ink .chips li { background: transparent; border-color: var(--line-invert); color: var(--text-invert-muted); }

/* hiring steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; border-top: 1px solid var(--line-invert); }
.steps__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-bottom: 1px solid var(--line-invert); align-items: start; }
.steps__n { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; color: var(--gold-3); opacity: 0.6; }
.steps__item h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); color: var(--text-invert); margin-bottom: 0.4rem; }
.steps__item p { color: var(--text-invert-muted); max-width: 62ch; }

@media (prefers-reduced-motion: reduce) {
  .eform__done.is-in > *, .eform__tick circle, .eform__tick path { animation: none; }
  .eform__tick circle, .eform__tick path { stroke-dashoffset: 0; }
  .field.is-invalid input { animation: none; }
}

/* WhatsApp actions carry the mark and its own green on hover. */
.btn[data-track="whatsapp_click"] svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.btn--ghost[data-track="whatsapp_click"]:hover { --btn-bg: #25d366; --btn-bd: #25d366; --btn-fg: #08130c; }
.btn[data-track="whatsapp_click"]:not(.btn--ghost):hover { --btn-bg: #25d366; --btn-bd: #25d366; --btn-fg: #08130c; }
.mobile-cta a svg { fill: currentColor; }

/* ---- FAQ ---- */
.faq-layout { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 940px) { .faq-layout { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); } }
.faq summary { font-size: clamp(1.02rem, 1.7vw, 1.28rem); font-family: var(--font-display); }
.faq .acc-body p { color: var(--text-muted); max-width: 68ch; font-size: 0.95rem; line-height: 1.7; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details[open] summary { color: var(--text); }

/* ----------------------------------------------------------------- blog */
.postgrid { display: grid; gap: clamp(2rem, 4vw, 3.25rem); }
@media (min-width: 780px) { .postgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.postcard { display: grid; gap: 1.25rem; align-content: start; }
.postcard__media { display: block; overflow: hidden; background: var(--stone-2); }
.postcard__media img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.7s var(--ease); }
.postcard:hover .postcard__media img { transform: scale(1.035); }
.postcard__body { display: grid; gap: 0.7rem; }
.postcard__date { margin: 0; font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold); }
.postcard h2, .postcard h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.12; margin: 0; }
.postcard h2 a, .postcard h3 a { color: inherit; text-decoration: none; }
.postcard h2 a:hover, .postcard h3 a:hover { color: var(--gold); }
.postcard p { margin: 0; color: var(--text-muted); }

.blog-empty { max-width: 58ch; display: grid; gap: 1.1rem; }
.blog-empty p { color: var(--text-muted); margin: 0; }
.blog-empty .showcase__actions { margin-top: 0.75rem; }

/* -------------------------------------------- staggered section entrances */
.project-grid > .reveal:nth-child(2),
.ready-grid > .reveal:nth-child(2),
.pillars > .reveal:nth-child(2),
.hoods > .reveal:nth-child(2),
.postgrid > .reveal:nth-child(2),
.principles > .reveal:nth-child(2),
.steps > .reveal:nth-child(2) { --d: 85ms; }
.project-grid > .reveal:nth-child(3),
.ready-grid > .reveal:nth-child(3),
.pillars > .reveal:nth-child(3),
.hoods > .reveal:nth-child(3),
.postgrid > .reveal:nth-child(3),
.principles > .reveal:nth-child(3),
.steps > .reveal:nth-child(3) { --d: 170ms; }
.project-grid > .reveal:nth-child(4),
.ready-grid > .reveal:nth-child(4),
.pillars > .reveal:nth-child(4),
.hoods > .reveal:nth-child(4),
.postgrid > .reveal:nth-child(4),
.principles > .reveal:nth-child(4),
.steps > .reveal:nth-child(4) { --d: 255ms; }
.project-grid > .reveal:nth-child(5),
.ready-grid > .reveal:nth-child(5),
.pillars > .reveal:nth-child(5),
.hoods > .reveal:nth-child(5),
.postgrid > .reveal:nth-child(5),
.principles > .reveal:nth-child(5),
.steps > .reveal:nth-child(5) { --d: 340ms; }
.project-grid > .reveal:nth-child(6),
.ready-grid > .reveal:nth-child(6),
.pillars > .reveal:nth-child(6),
.hoods > .reveal:nth-child(6),
.postgrid > .reveal:nth-child(6),
.principles > .reveal:nth-child(6),
.steps > .reveal:nth-child(6) { --d: 425ms; }
.project-grid > .reveal:nth-child(7),
.ready-grid > .reveal:nth-child(7),
.pillars > .reveal:nth-child(7),
.hoods > .reveal:nth-child(7),
.postgrid > .reveal:nth-child(7),
.principles > .reveal:nth-child(7),
.steps > .reveal:nth-child(7) { --d: 510ms; }
.project-grid > .reveal:nth-child(8),
.ready-grid > .reveal:nth-child(8),
.pillars > .reveal:nth-child(8),
.hoods > .reveal:nth-child(8),
.postgrid > .reveal:nth-child(8),
.principles > .reveal:nth-child(8),
.steps > .reveal:nth-child(8) { --d: 595ms; }
@media (prefers-reduced-motion: reduce) {
  .project-grid > .reveal,
  .ready-grid > .reveal,
  .pillars > .reveal,
  .hoods > .reveal,
  .postgrid > .reveal,
  .principles > .reveal,
  .steps > .reveal { --d: 0ms; }
}

/* ================================================= opening splash

   Shown once per session, on the first page a visitor opens. Every internal
   link here is a full page load, so a panel that ran on each one would be an
   obstacle rather than an entrance; the session flag is set by the inline head
   script before first paint.

   The dismissal is pure CSS. The panel wipes upward on a clip-path and the
   final keyframe pins it to visibility:hidden with fill-mode forwards, so a
   broken or blocked main.js cannot leave a visitor staring at an ink
   rectangle. Nothing in JavaScript is required to get the page back.

   The motion reads as the mark being built: the tiers clip into view from the
   base upward, a gold hairline draws out beneath them, then the whole panel
   lifts to reveal the hero already painted behind it. */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  background: var(--ink);
  clip-path: inset(0 0 0 0);
  animation: splash-lift 580ms cubic-bezier(0.76, 0, 0.24, 1) 980ms both;
}

.splash-done .splash { display: none; }

.splash__stage {
  display: grid;
  justify-items: center;
  gap: clamp(1.1rem, 2.4vw, 1.75rem);
  padding-inline: 24px;
}

.splash__mark {
  display: block;
  width: clamp(104px, 17vw, 168px);
  height: auto;
  clip-path: inset(100% 0 0 0);
  animation: splash-rise 640ms cubic-bezier(0.22, 1, 0.36, 1) 60ms both;
}

.splash__rule {
  display: block;
  width: clamp(72px, 12vw, 128px);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-2) 18%, var(--gold-3) 50%, var(--gold-2) 82%, transparent);
  transform: scaleX(0);
  animation: splash-draw 380ms cubic-bezier(0.22, 1, 0.36, 1) 470ms both;
}

@keyframes splash-rise {
  from { clip-path: inset(100% 0 0 0); transform: translateY(10px); }
  to   { clip-path: inset(0 0 0 0);    transform: translateY(0); }
}

@keyframes splash-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* The last frame is what guarantees the page is reachable, so it carries the
   hiding as well as the wipe. pointer-events goes first: the panel must stop
   swallowing clicks the instant it starts moving, not when it finishes. */
@keyframes splash-lift {
  from { clip-path: inset(0 0 0 0);    pointer-events: none; visibility: visible; }
  99%  { clip-path: inset(0 0 100% 0); pointer-events: none; visibility: visible; }
  to   { clip-path: inset(0 0 100% 0); pointer-events: none; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  /* Same sequence, no movement: the panel and the mark simply fade. */
  .splash { animation: splash-fade 260ms linear 220ms both; }
  .splash__mark { clip-path: none; animation: splash-appear 200ms linear both; }
  .splash__rule { transform: scaleX(1); animation: splash-appear 200ms linear 120ms both; }

  @keyframes splash-appear {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes splash-fade {
    from { opacity: 1; visibility: visible; pointer-events: none; }
    99%  { opacity: 0; visibility: visible; pointer-events: none; }
    to   { opacity: 0; visibility: hidden;  pointer-events: none; }
  }
}

/* ================================================= chat widget placement

   BotPenguin's launcher is fixed at bottom: 20px, which on a phone puts it on
   top of the sticky Call / WhatsApp / Visit bar. It cannot be layered under
   that bar instead: the widget mounts at z-index 2147483647, the maximum a
   browser allows, and the bar is 80. Moving it is the only option, so it is
   lifted clear of the bar.

   The bar's height is intrinsic (padding plus the safe-area inset), so it is
   not a fixed number across devices. --chat-lift is a sensible default here and
   main.js overwrites it with the measured height once the page is up; if that
   script never runs, the default is still clear of the bar on every phone we
   can test. Targeted by class rather than the id, because the id carries a
   numeric suffix (botpenguin-launcher-12) that is not ours to rely on.
   !important because the widget ships its own stylesheet. */
@media (max-width: 900px) {
  :root { --chat-lift: calc(59px + env(safe-area-inset-bottom, 0px) + 14px); }

  [id^="botpenguin-launcher"].botpenguin-right,
  [id^="botpenguin-launcher"].botpenguin-left {
    bottom: var(--chat-lift) !important;
  }
}

/* The "May I help you?" bubble beside the launcher, shown once and then never
   again. BotPenguin's own Auto Hide dismisses it after a delay but brings it
   back on the next page, and on a static site every link is a new page, so a
   visitor reading four pages gets told four times. The flag is set by the
   inline head script before first paint, so the bubble never flashes on a
   later visit. localStorage, not sessionStorage: "not again" means not again.

   Hiding only the text bubble, never the launcher itself - someone who wants
   to chat must always be able to find it. */
.chat-cta-seen [id^="botpenguin-launcher-text"] { display: none !important; }

/* The widget mounts fast - measured at 110ms on a warm cache, while the splash
   panel does not finish until around 1.5s - so on a first visit the chat bubble
   floats on top of the opening animation. It cannot be layered beneath the
   panel: the widget sits at z-index 2147483647 and the panel at 9000. So it is
   held back instead, and only on the first view, where .splash-done is absent.

   An animation rather than a transition because the widget writes opacity: 1
   inline on the launcher, and inline styles beat ordinary rules. Animations
   outrank both. fill-mode both with a finite delay is what makes this safe: the
   launcher becomes visible at the end of the delay whatever else happens, so a
   splash that never ran cannot leave the chat permanently hidden. */
@keyframes chat-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

html:not(.splash-done) [id^="botpenguin-launcher"].botpenguin-right,
html:not(.splash-done) [id^="botpenguin-launcher"].botpenguin-left {
  animation: chat-enter 240ms ease 1560ms both;
}

@media (prefers-reduced-motion: reduce) {
  /* The reduced-motion splash is a 260ms fade after a 220ms delay, so the wait
     shrinks to match rather than leaving the launcher hidden for a needless
     second. */
  html:not(.splash-done) [id^="botpenguin-launcher"].botpenguin-right,
  html:not(.splash-done) [id^="botpenguin-launcher"].botpenguin-left {
    animation: chat-enter 160ms linear 500ms both;
  }
}