:root {
  --bg: #0b0a09;
  --bg-alt: #121110;
  --bg-deep: #191716;
  --surface: #141312;
  --surface-raised: #1b1917;
  --line: rgba(240, 236, 228, 0.12);
  --line-strong: rgba(240, 236, 228, 0.26);
  --text: #f2eee6;
  --text-soft: rgba(242, 238, 230, 0.66);
  --text-faint: rgba(242, 238, 230, 0.4);
  --accent: #c9a86a;
  --accent-hover: #e0c48d;
  --radius: 4px;
  --radius-sm: 3px;
  --shadow-md: 0 24px 60px -22px rgba(0, 0, 0, 0.75);
  --shadow-lg: 0 40px 90px -28px rgba(0, 0, 0, 0.85);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Playfair Display", "Times New Roman", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 1px;
  width: 0%;
  background: var(--accent);
  z-index: 100;
}

/* ===== Scroll reveal. Long, soft easing with a slight blur so elements settle
   rather than snap; fades back out on exit so the page keeps breathing. ===== */
.reveal {
  /* Offset lives in a custom property so per-element overrides cannot outrank
     the .is-visible reset (equal specificity + later source order used to leave
     display headlines stuck 50px down, overlapping the copy beneath them). */
  --ry: 34px;
  opacity: 0;
  transform: translateY(var(--ry));
  filter: blur(6px);
  transition: opacity 1.25s var(--ease), transform 1.35s var(--ease), filter 1.1s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal[data-d="1"] { transition-delay: 0.1s; }
.reveal[data-d="2"] { transition-delay: 0.2s; }
.reveal[data-d="3"] { transition-delay: 0.3s; }
.reveal[data-d="4"] { transition-delay: 0.4s; }
.reveal[data-d="5"] { transition-delay: 0.5s; }

/* Images uncover from the bottom while easing down from a slight zoom */
.reveal-img { overflow: hidden; }
.reveal-img img {
  transform: scale(1.14);
  opacity: 0;
  clip-path: inset(14% 0 0 0);
  transition: transform 1.9s var(--ease), opacity 1.3s var(--ease), clip-path 1.6s var(--ease);
  will-change: transform, clip-path;
}
.reveal-img.is-visible img { transform: scale(1); opacity: 1; clip-path: inset(0 0 0 0); }

/* Display headlines rise a touch further and slower than body copy */
.reveal.display, .reveal.editorial-headline, .reveal.hero-display {
  --ry: 52px;
  transition: opacity 1.5s var(--ease), transform 1.6s var(--ease), filter 1.3s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-img img {
    opacity: 1 !important; transform: none !important;
    filter: none !important; clip-path: none !important; transition: none !important;
  }
}

/* ===== Shared editorial primitives ===== */
/* Parenthetical section label, e.g. (ABOUT) */
.label-paren {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 0;
}
.label-paren::before { content: "("; }
.label-paren::after { content: ")"; }

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--text-faint);
  margin: 0 0 20px;
}
.eyebrow::before { content: "("; }
.eyebrow::after { content: ")"; }

/* Big editorial serif headline; .it spans render italic for the mixed look */
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--text);
  text-transform: uppercase;
}
.display .it { font-style: italic; }
.section-title { /* legacy alias kept so detail pages keep working */
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--text);
  text-transform: uppercase;
}
.section-head { max-width: 660px; margin: 0 0 64px; }
.section-lead {
  max-width: 340px;
  color: var(--text-soft);
  margin: 24px 0 0;
  font-size: 0.74rem;
  line-height: 2;
}

/* Small pill button, the reference's LEARN MORE */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--sans);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn-primary { background: var(--text); color: #100f0e; }
.btn-primary:hover { background: #ffffff; transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--text); transform: translateY(-2px); }
.text-link {
  display: inline-block;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.text-link:hover { border-color: var(--text); color: #fff; }

/* ===== Header ===== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(11, 10, 9, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { height: 26px; width: auto; filter: brightness(0) invert(1); opacity: 0.95; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}
.brand-text small { color: var(--text-faint); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
/* Below this the tagline starts crowding the nav, so drop it and keep the wordmark. */
@media (max-width: 900px) { .brand-text small { display: none; } }

.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav a:not(.nav-cta) {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  transition: color 0.3s ease;
}
.site-nav a:not(.nav-cta) { position: relative; }
.site-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 1px;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease);
}
.site-nav a:not(.nav-cta):hover { color: var(--text); }
.site-nav a:not(.nav-cta):hover::after { transform: scaleX(1); }
.nav-cta {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #100f0e !important;
  background: var(--text);
  padding: 11px 22px;
  border-radius: 999px;
  transition: background 0.3s ease, transform 0.3s ease;
}
.nav-cta:hover { background: #ffffff; transform: translateY(-1px); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span { width: 22px; height: 1px; background: var(--text); display: block; }

/* ===== HERO: giant serif wordmark over full-bleed photo, small text column
   right, SCROLL cue bottom, thin architectural room labels. ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
}
.hero-media {
  position: absolute;
  inset: 0;
  background-image: url('images/hero/sanskar-hero.jpg');
  background-size: cover;
  background-position: 50% 42%;
  background-color: #0b0a09;
  z-index: 0;
  transform: scale(1.06);
  animation: hero-drift 22s var(--ease) forwards;
}
@keyframes hero-drift { to { transform: scale(1); } }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* This render is brighter than the previous hero, so the top of the scrim is
     deepened to hold the fixed nav's contrast, and the lower half is carried
     darker for the wordmark and copy column. */
  background:
    linear-gradient(180deg, rgba(8,7,6,0.8) 0%, rgba(8,7,6,0.32) 30%, rgba(8,7,6,0.52) 60%, rgba(8,7,6,0.95) 100%),
    linear-gradient(90deg, rgba(8,7,6,0.55) 0%, rgba(8,7,6,0.1) 48%);
}
.hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 0 40px 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 56px;
  align-items: end;
}

/* The oversized wordmark. Scales with the viewport so it always spans the page. */
.hero-display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.4rem, 15vw, 15rem);
  line-height: 0.86;
  letter-spacing: -0.015em;
  margin: 0;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 8px 60px rgba(0,0,0,0.4);
}
.hero-display .it { font-style: italic; }

/* Right-hand column: italic serif statement, small paragraph, SCROLL */
.hero-side { padding-bottom: 14px; }
.hero-statement {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.98rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
}
.hero-side p:not(.hero-statement) {
  font-size: 0.78rem;
  line-height: 1.85;
  color: rgba(242,238,230,0.72);
  margin: 0 0 24px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .btn-ghost { border-color: rgba(255,255,255,0.4); color: #fff; }
.hero .btn-ghost:hover { border-color: #fff; }

.hero-scroll {
  position: absolute;
  z-index: 3;
  left: 40px;
  bottom: 22px;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero-scroll::after {
  content: "";
  width: 46px; height: 1px;
  background: rgba(255,255,255,0.5);
  animation: scroll-pull 2.4s var(--ease) infinite;
  transform-origin: left center;
}
@keyframes scroll-pull {
  0%, 100% { transform: scaleX(0.4); opacity: 0.5; }
  50% { transform: scaleX(1); opacity: 1; }
}

/* Thin architectural labels floated over the hero photo */
.plan-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.plan-label {
  position: absolute;
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.28);
  min-width: 92px;
}
.plan-label:nth-child(1) { top: 15%; right: 6%; }
.plan-label:nth-child(2) { top: 26%; right: 15%; }
.plan-label:nth-child(3) { top: 37%; right: 8%; }
/* Below this the copy column climbs into the label band, so drop them. */
@media (max-height: 720px) { .plan-label:nth-child(3) { display: none; } }
@media (max-width: 900px) { .plan-labels { display: none; } }

/* ===== METRICS: giant serif numerals on one shared baseline, separated by
   hairline rules. An earlier scattered version read as misalignment whenever a
   figure painted late, so this keeps the editorial scale but stays legible and
   obviously deliberate at every width. ===== */
.metrics { padding: 130px 0 140px; }
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.metric {
  padding: 54px 34px 50px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.metric:first-child { border-left: 0; padding-left: 0; }
.metric:last-child { padding-right: 0; }
.metric strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.8rem, 5.6vw, 4.8rem);
  color: var(--text);
  line-height: 0.9;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.metric strong sup {
  font-size: 0.3em;
  vertical-align: super;
  letter-spacing: 0.02em;
  color: var(--text-soft);
}
.metric > span {
  display: block;
  margin-top: 20px;
  font-size: 0.62rem;
  line-height: 1.8;
  color: var(--text-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .metrics { padding: 80px 0 90px; }
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { padding: 36px 20px 34px; }
  .metric:nth-child(odd) { border-left: 0; padding-left: 0; }
  .metric:nth-child(n+3) { border-top: 1px solid var(--line); }
}


/* Detail pages reuse .stats; same aligned, hairline-separated treatment as .metrics */
.stats { padding: 120px 0; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat {
  padding: 50px 32px 46px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.stat:first-child { border-left: 0; padding-left: 0; }
.stat:last-child { padding-right: 0; }
.stat strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  color: var(--text);
  line-height: 0.9;
  letter-spacing: -0.025em;
}
.stat > span {
  display: block;
  margin-top: 18px;
  font-size: 0.62rem;
  line-height: 1.8;
  color: var(--text-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .stats { padding: 80px 0; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 34px 20px 32px; }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ===== EDITORIAL ABOUT: giant headline left, tall portrait image centre,
   micro-copy column right. The scale gap between the display face and the body
   copy is what gives the reference its elegance, so it is deliberate here. ===== */
.editorial { padding: 40px 0 150px; border-top: 1px solid var(--line); }
.editorial-top { padding-top: 48px; margin-bottom: 30px; }
.editorial-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr) minmax(0, 0.52fr);
  gap: 56px;
  align-items: start;
}
.editorial-headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.2vw, 4.4rem);
  line-height: 1.0;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  margin: 0;
  color: var(--text);
  align-self: end;
  padding-bottom: 8px;
}
.editorial-headline .it { font-style: italic; }
.editorial-media { border-radius: 2px; overflow: hidden; }
.editorial-media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.editorial-aside { padding-top: 4px; }
.editorial-aside p {
  font-size: 0.72rem;
  line-height: 2.05;
  color: var(--text-soft);
  margin: 0 0 18px;
}
.editorial-list { list-style: none; margin: 0 0 26px; padding: 0; }
.editorial-list li {
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 1000px) {
  .editorial-grid { grid-template-columns: 1fr; gap: 32px; }
  .editorial-media { order: -1; }
  .editorial-media img { aspect-ratio: 4 / 3; }
  .editorial-headline { align-self: start; padding-bottom: 0; }
  .editorial { padding-bottom: 90px; }
}

/* ===== PROJECT CAROUSEL: a tall portrait centre panel with the project name
   set across it, flanked by two shorter panels dropped lower. Slides cross-fade
   and drift, and the (1)(2)(3) counter both tracks and drives it. ===== */
.feature-section { padding: 130px 0 140px; border-top: 1px solid var(--line); }
.feature-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 30px;
  gap: 24px;
}
.feature-count { display: flex; gap: 16px; }
.feature-count button {
  background: none;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  transition: color 0.5s var(--ease);
}
.feature-count button::before { content: "("; }
.feature-count button::after { content: ")"; }
.feature-count button.on { color: var(--text); }

.carousel { position: relative; }
.carousel-stage { position: relative; min-height: 560px; }
.cslide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  /* Outgoing slide clears quickly; the incoming one waits for it before fading
     up, so two oversized titles never overlap mid-transition. */
  transition: opacity 0.45s var(--ease), visibility 0.45s var(--ease);
}
.cslide.on {
  opacity: 1;
  visibility: visible;
  position: relative;
  transition: opacity 0.9s var(--ease) 0.4s, visibility 0s 0.4s;
}

/* Three panels: outer two shorter and pushed down, centre tall */
.cslide-panels {
  display: grid;
  grid-template-columns: 1fr 1.06fr 1fr;
  gap: 26px;
  align-items: start;
}
.cpanel { overflow: hidden; border-radius: 2px; }
.cpanel img { width: 100%; object-fit: cover; display: block; }
.cpanel:nth-child(1) { margin-top: 96px; }
.cpanel:nth-child(3) { margin-top: 132px; }
.cpanel:nth-child(1) img, .cpanel:nth-child(3) img { aspect-ratio: 4 / 5; }
.cpanel:nth-child(2) img { aspect-ratio: 3 / 4; }

/* Each panel's photo drifts up as the slide settles */
.cslide.on .cpanel img { animation: panel-rise 1.5s var(--ease) 0.4s both; }
.cslide.on .cpanel:nth-child(2) img { animation-delay: 0.48s; }
.cslide.on .cpanel:nth-child(3) img { animation-delay: 0.56s; }
@keyframes panel-rise {
  from { transform: scale(1.09) translateY(14px); }
  to   { transform: scale(1) translateY(0); }
}

/* The name crosses over the centre panel */
.cslide-title {
  position: absolute;
  top: 34px;
  left: 0; right: 0;
  z-index: 3;
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 6.6vw, 5.6rem);
  line-height: 0.94;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  padding: 0 6%;
  pointer-events: none;
  text-shadow: 0 10px 50px rgba(0,0,0,0.5);
}
.cslide-title .it { font-style: italic; }
.cslide.on .cslide-title { animation: title-in 1.4s var(--ease) 0.45s both; }
@keyframes title-in {
  from { opacity: 0; transform: translateY(20px); letter-spacing: 0.04em; }
  to   { opacity: 1; transform: translateY(0); letter-spacing: -0.018em; }
}

/* Caption row under the panels */
.cslide-foot {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) auto minmax(0, 0.9fr);
  gap: 34px;
  align-items: start;
  margin-top: 40px;
}
.cslide-loc {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
  line-height: 1.9;
}
.cslide-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--accent);
  margin: 0 0 10px;
}
.cslide-desc {
  font-size: 0.72rem;
  line-height: 2.05;
  color: var(--text-soft);
  margin: 0;
}
.cslide-specs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 20px; margin: 0; }
.cslide-specs dt {
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.cslide-specs dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--text);
  overflow-wrap: anywhere;
}
@media (max-width: 1000px) {
  .feature-section { padding: 80px 0 90px; }
  .carousel-stage { min-height: 0; }
  .cslide { position: relative; opacity: 1; visibility: visible; display: none; }
  .cslide.on { display: block; }
  .cslide-panels { grid-template-columns: 1fr; gap: 10px; }
  .cpanel:nth-child(1), .cpanel:nth-child(3) { margin-top: 0; }
  .cpanel:nth-child(3) { display: none; }
  .cpanel:nth-child(1) img, .cpanel:nth-child(2) img { aspect-ratio: 4 / 3; }
  .cslide-title { position: relative; top: 0; padding: 0 0 14px; text-align: left; font-size: clamp(1.7rem, 8.4vw, 2.6rem); text-shadow: none; }
  .cslide-foot { grid-template-columns: 1fr; gap: 22px; margin-top: 26px; }
}


/* ===== BELIEFS: translucent blurred cards laid over a photograph, each
   numbered, as in the reference's values grid. ===== */
.beliefs {
  position: relative;
  padding: 0;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.beliefs-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.beliefs::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8,7,6,0.72), rgba(8,7,6,0.82));
}
.beliefs-inner { position: relative; z-index: 2; padding-block: 110px 120px; }
.beliefs-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,0.5fr);
  gap: 48px;
  align-items: start;
  margin-bottom: 56px;
}
.beliefs-head p.lead {
  font-size: 0.72rem;
  line-height: 2.05;
  color: rgba(242,238,230,0.78);
  margin: 0 0 16px;
}
.beliefs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.belief {
  position: relative;
  background: rgba(242, 238, 230, 0.07);
  border: 1px solid rgba(242, 238, 230, 0.16);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  padding: 34px 30px 52px;
  min-height: 230px;
  transition: background 0.6s var(--ease), border-color 0.6s var(--ease), transform 0.6s var(--ease);
}
.belief:hover {
  background: rgba(242, 238, 230, 0.12);
  border-color: rgba(242, 238, 230, 0.3);
  transform: translateY(-5px);
}
.belief h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.28rem;
  line-height: 1.2;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 16px;
  letter-spacing: 0.01em;
}
.belief p {
  font-size: 0.7rem;
  line-height: 2;
  color: rgba(242,238,230,0.72);
  margin: 0;
  max-width: 24ch;
}
.belief span {
  position: absolute;
  left: 30px;
  bottom: 24px;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  color: rgba(242,238,230,0.5);
}
.belief span::before { content: "( "; }
.belief span::after { content: " )"; }
@media (max-width: 1000px) {
  .beliefs-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 36px; }
  .beliefs-grid { grid-template-columns: 1fr; }
  .beliefs-inner { padding-block: 80px 90px; }
  .belief { min-height: 0; padding: 28px 24px 46px; }
}

/* ===== AMENITIES: two photos deliberately overlapping at an offset, with the
   headline block to the left. ===== */
.amenities { padding: 140px 0; border-top: 1px solid var(--line); }
.amenities-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 56px;
  align-items: center;
}
.amenities-copy p.lead {
  font-size: 0.72rem;
  line-height: 2.05;
  color: var(--text-soft);
  margin: 22px 0 28px;
  max-width: 32ch;
}
.amenities-stack { position: relative; }
.amenities-stack .back { width: 78%; margin-left: auto; }
.amenities-stack .back img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* The front plate overlaps the back one, offset down and to the left */
.amenities-stack .front {
  position: absolute;
  left: 0;
  bottom: -46px;
  width: 56%;
  box-shadow: var(--shadow-lg);
}
.amenities-stack .front img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 1000px) {
  .amenities { padding: 80px 0 110px; }
  .amenities-grid { grid-template-columns: 1fr; gap: 32px; }
  .amenities-stack .back { width: 100%; }
  .amenities-stack .front { width: 52%; bottom: -34px; }
}

/* ===== Generic sections ===== */
.projects, .brochures, .directors { padding: 120px 0; }
.band-cream { background: var(--bg); }
.band-white { background: var(--bg-alt); }
.band-sand  { background: var(--bg); }
.band-deep  { background: var(--bg-deep); }
.band-cream, .band-white, .band-sand, .band-deep { border-top: 1px solid var(--line); }

/* Financing: the four lenders sit in one continuous light band divided by
   hairlines, rather than four separate floating chips. The logos are supplied as
   white-background JPEGs, so a single warm plate is the honest way to show them
   on a dark page. */
.financing { padding: 130px 0; background: var(--bg-deep); border-top: 1px solid var(--line); }
.financing-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 56px;
  align-items: center;
}
.financing-copy p.lead {
  font-size: 0.72rem;
  line-height: 2.05;
  color: var(--text-soft);
  margin: 22px 0 0;
  max-width: 32ch;
}
.bank-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #f2eee6;
}
.bank-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 22px;
  min-height: 132px;
  border-left: 1px solid rgba(16, 15, 14, 0.12);
  transition: background 0.6s var(--ease);
}
.bank-cell:first-child { border-left: 0; }
.bank-cell:hover { background: #fffdf8; }
.bank-cell img {
  max-width: 100%;
  max-height: 34px;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.6s var(--ease), opacity 0.6s var(--ease);
}
.bank-cell:hover img { filter: grayscale(0); opacity: 1; }
@media (max-width: 1000px) {
  .financing { padding: 80px 0; }
  .financing-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 640px) {
  .bank-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bank-cell { min-height: 104px; padding: 28px 18px; }
  .bank-cell:nth-child(odd) { border-left: 0; }
  .bank-cell:nth-child(n+3) { border-top: 1px solid rgba(16, 15, 14, 0.12); }
}

/* Brochures: download rows, hairline-ruled, with the sheet count as meta and
   an arrow that travels on hover. Replaces three identical boxed cards. */
.docs { border-top: 1px solid var(--line); }
.doc-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto auto;
  gap: 32px;
  align-items: center;
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.7s var(--ease);
}
.doc-row:hover { background: rgba(242, 238, 230, 0.028); }
.doc-idx {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  color: var(--text-faint);
}
.doc-idx::before { content: "("; }
.doc-idx::after { content: ")"; }
.doc-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.4vw, 1.95rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
  transition: transform 0.7s var(--ease);
}
.doc-row:hover .doc-name { transform: translateX(7px); }
.doc-meta {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.doc-get {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.doc-get::after {
  content: "";
  width: 26px; height: 1px;
  background: var(--line-strong);
  transition: width 0.6s var(--ease), background 0.6s var(--ease);
}
.doc-row:hover .doc-get::after { width: 44px; background: var(--text); }
@media (max-width: 700px) {
  .doc-row { grid-template-columns: 40px 1fr; gap: 12px 18px; padding: 26px 0; }
  .doc-meta, .doc-get { grid-column: 2; }
  .doc-row:hover .doc-name { transform: none; }
}


/* Amenity lists on the detail pages (still marked up as .brochure-grid /
   .brochure-card). Restyled from boxed cards into a hairline-ruled matrix so
   they match the roster and download rows. */
.brochure-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.brochure-card {
  padding: 30px 26px;
  min-height: 104px;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background 0.7s var(--ease);
}
.brochure-card:hover { background: rgba(242, 238, 230, 0.03); }
.brochure-card h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}
@media (max-width: 900px) {
  .brochure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brochure-card { padding: 22px 18px; min-height: 84px; }
  .brochure-card h4 { font-size: 0.9rem; }
}
@media (max-width: 520px) {
  .brochure-grid { grid-template-columns: 1fr; }
}

/* Directors: an editorial roster of hairline-ruled rows rather than a grid of
   boxed cards. Index, large serif name, portrait plate, then the bio in a
   narrow column, which is the same rhythm the rest of the page uses. */
.roster { border-top: 1px solid var(--line); }
.roster-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 104px minmax(0, 1.05fr);
  gap: 40px;
  align-items: center;
  padding: 42px 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.7s var(--ease);
}
.roster-row:hover { background: rgba(242, 238, 230, 0.028); }
.roster-idx {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  align-self: start;
  padding-top: 8px;
}
.roster-idx::before { content: "("; }
.roster-idx::after { content: ")"; }
.roster-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.5vw, 2.05rem);
  line-height: 1.06;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
  transition: transform 0.7s var(--ease);
}
.roster-row:hover .roster-name { transform: translateX(7px); }
.roster-role {
  display: block;
  margin-top: 12px;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
/* Rectangular plate, not a circular avatar: reads editorial rather than corporate */
.roster-portrait { overflow: hidden; }
.roster-portrait img {
  width: 104px;
  height: 128px;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.8s var(--ease), transform 1.1s var(--ease);
}
.roster-row:hover .roster-portrait img { filter: grayscale(0) contrast(1); transform: scale(1.05); }
.roster-bio {
  font-size: 0.72rem;
  line-height: 2.05;
  color: var(--text-soft);
  margin: 0;
}
@media (max-width: 900px) {
  .roster-row {
    grid-template-columns: 40px 1fr;
    gap: 16px 20px;
    padding: 30px 0;
    align-items: start;
  }
  .roster-idx { padding-top: 4px; }
  .roster-portrait { grid-column: 2; order: 3; }
  .roster-portrait img { width: 88px; height: 108px; }
  .roster-bio { grid-column: 2; order: 4; }
  .roster-row:hover .roster-name { transform: none; }
}

/* Career */
.career {
  background: var(--bg-alt);
  color: #fff;
  padding: 130px 0;
  text-align: center;
  border-top: 1px solid var(--line);
}
.career-inner { max-width: 860px; margin: 0 auto; }
.career blockquote {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.15rem, 2.3vw, 1.75rem);
  line-height: 1.5;
  margin: 24px 0 40px;
  color: #fff;
}
.career .btn-primary { background: var(--text); color: #100f0e; }

/* Contact */
.contact { padding: 130px 0; }
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 56px; }
.contact-card { border: 1px solid var(--line); padding: 36px; }
.contact-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0 0 18px;
  color: var(--text);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.contact-card p { margin: 0 0 8px; color: var(--text-soft); font-size: 0.8rem; line-height: 1.8; }
.contact-card a { color: var(--text); border-bottom: 1px solid var(--line-strong); }
.contact-hours { color: var(--text-faint) !important; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.66rem !important; }

.contact-form { border: 1px solid var(--line); padding: 52px; max-width: 720px; margin: 0 auto; }
.contact-form h3 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0 0 30px;
  text-align: center;
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--text);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 15px 0;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  margin-bottom: 14px;
  resize: vertical;
  background: transparent;
  color: var(--text);
  transition: border-color 0.3s ease;
}
.contact-form input::placeholder, .contact-form textarea::placeholder {
  color: var(--text-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.66rem;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--text); }
.contact-form .btn { width: 100%; margin-top: 10px; }
.form-note { text-align: center; color: var(--text-faint); font-size: 0.7rem; margin-top: 18px; }

/* Footer */
.site-footer { background: #070606; color: var(--text-soft); padding: 64px 0 36px; border-top: 1px solid var(--line); }
.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 24px;
  align-items: start;
  border-bottom: 1px solid var(--line);
  padding-bottom: 40px;
}
.footer-brand {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.footer-inner p { margin: 12px 0 0; font-size: 0.76rem; line-height: 1.8; }
.footer-newsletter h4 {
  color: #fff;
  margin: 0 0 10px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.footer-newsletter p { font-size: 0.76rem; max-width: 320px; }
.footer-copy { text-align: right; font-size: 0.68rem; margin: 0; padding-top: 24px; letter-spacing: 0.06em; }




/* Social links: hairline-bordered glyphs, sized to sit with the micro-caps
   footer type rather than as chunky brand badges. Icons are inline SVG so there
   is no extra request and nothing to 404. */
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social a {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text-soft);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease), background 0.4s var(--ease);
}
.footer-social a:hover {
  color: #100f0e;
  background: var(--text);
  border-color: var(--text);
  transform: translateY(-2px);
}
.footer-social svg { width: 15px; height: 15px; fill: currentColor; display: block; }

/* Footer mark: logo beside the wordmark, matching the header lockup */
.footer-mark { display: inline-flex; align-items: center; gap: 13px; }
.footer-brand { white-space: nowrap; }
.footer-mark img {
  height: 30px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  transition: opacity 0.4s var(--ease);
}
.footer-mark:hover img { opacity: 1; }

/* Footer sitemap: carries the links taken out of the top nav (Project Tour,
   Financing, Career) so those sections stay reachable without crowding the
   header. */
.footer-inner { grid-template-columns: minmax(230px,1fr) minmax(140px,auto) minmax(0,1.05fr) auto; gap: 48px; }
.footer-links h4 {
  color: #fff;
  margin: 0 0 14px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.footer-links ul { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 9px; }
.footer-links a {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  transition: color 0.35s var(--ease);
}
.footer-links a:hover { color: #fff; }
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* Back to top */
.back-to-top {
  position: fixed;
  right: 28px; bottom: 28px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--text);
  border: none;
  color: #100f0e;
  font-size: 0.9rem;
  cursor: pointer;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.4s var(--ease), background 0.3s ease;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: #fff; }

/* ===== Project detail pages ===== */
.rera-note { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(242,238,230,0.5); margin: 0 0 22px; }
.detail-table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.detail-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; min-width: 540px; }
.detail-table th, .detail-table td { padding: 18px 22px; text-align: left; border-bottom: 1px solid var(--line); }
.detail-table th {
  background: var(--bg-deep);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-faint);
}
.detail-table td { color: var(--text-soft); }
.detail-table tbody tr:last-child td { border-bottom: none; }
.detail-table td:first-child { font-family: var(--serif); font-size: 1rem; color: var(--text); }

/* Project Tour: the walkthroughs carry the section on their own. Frames are
   unboxed, with a hairline rule and caption above, matching the roster and
   brochure rows rather than sitting in cards. */
.films { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; }
.film-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.film-idx {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  flex-shrink: 0;
}
.film-idx::before { content: "("; }
.film-idx::after { content: ")"; }
.film-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}
.film-meta {
  margin-left: auto;
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.film-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0b0a09;
  overflow: hidden;
}
.film-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 800px) {
  .films { grid-template-columns: 1fr; gap: 34px; }
  .film-meta { display: none; }
}

.tour-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.tour-item { position: relative; display: block; overflow: hidden; }
.tour-item img { width: 100%; height: 300px; object-fit: cover; transition: transform 1.2s var(--ease); }
.tour-item:hover img { transform: scale(1.04); }
.tour-item span {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 46px 22px 20px;
  background: linear-gradient(180deg, rgba(8,7,6,0) 0%, rgba(8,7,6,0.75) 55%, rgba(8,7,6,0.96) 100%);
  color: #fff;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Photo galleries */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.photo-item { position: relative; overflow: hidden; }
.photo-item img { width: 100%; height: 260px; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.photo-item:hover img { transform: scale(1.04); }
.photo-item span {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 36px 18px 14px;
  background: linear-gradient(180deg, rgba(8,7,6,0) 0%, rgba(8,7,6,0.7) 50%, rgba(8,7,6,0.95) 100%);
  color: #fff;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Plan gallery: drawings are dark-on-white, so keep a light plate for legibility */
.plan-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.plan-grid .photo-item { border: 1px solid var(--line); display: block; }
.plan-grid .photo-item img { height: 320px; object-fit: contain; background: #f2eee6; padding: 16px 16px 48px; }
.plan-grid .photo-item:hover img { transform: none; }
.plan-grid .photo-item span {
  background: var(--bg-deep);
  color: var(--text-soft);
  border-top: 1px solid var(--line);
  padding: 13px 18px;
  position: static;
}
.plan-grid .photo-item::after {
  content: "View full size";
  position: absolute;
  top: 14px; right: 14px;
  background: rgba(11,10,9,0.9);
  color: #fff;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.plan-grid .photo-item:hover::after { opacity: 1; }

.detail-back { margin: 0 0 26px; }
.detail-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242,238,230,0.7);
  transition: color 0.3s ease;
}
.detail-back a:hover { color: #fff; }

/* Newsletter */
.newsletter-form { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.newsletter-form input {
  flex: 1;
  min-width: 160px;
  padding: 12px 0;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--sans);
  font-size: 0.76rem;
  background: transparent;
  color: #fff;
}
.newsletter-form input::placeholder { color: var(--text-faint); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.64rem; }
.newsletter-form input:focus { outline: none; border-color: #fff; }
.footer-newsletter .form-note { margin-top: 12px; color: var(--accent); font-size: 0.7rem; text-align: left; }

.spec-card { border: 1px solid var(--line); padding: 32px; }
.spec-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--text);
  margin: 0 0 18px;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.spec-card ul { margin: 0; padding-left: 16px; color: var(--text-soft); font-size: 0.78rem; line-height: 1.85; }
.spec-card li { margin-bottom: 8px; }
.spec-card li:last-child { margin-bottom: 0; }

.location-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 30px 0 40px; padding: 0; list-style: none; }
.location-list li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.location-list strong { color: var(--text); font-weight: 500; }

/* ===== Responsive ===== */
@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: 1fr; gap: 28px; padding-bottom: 72px; }
  .hero-side { padding-bottom: 0; max-width: 460px; }
}
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute;
    top: 78px; left: 0; right: 0;
    background: rgba(11,10,9,0.97);
    backdrop-filter: blur(14px);
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 40px;
    gap: 20px;
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .site-nav.open { display: flex; }
  .contact-grid, .director-grid, .brochure-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; text-align: left; }
  .footer-copy { text-align: left; padding-top: 8px; }
  .form-row { grid-template-columns: 1fr; }
  .tour-grid { grid-template-columns: 1fr; }
  .projects, .brochures, .directors, .contact, .career, .financing { padding: 80px 0; }
}
@media (max-width: 640px) {
  .container { padding: 0 22px; }
  .hero-inner { padding: 0 22px 66px; }
  .hero-scroll { left: 22px; }
  .contact-form { padding: 32px 24px; }
  .display, .section-title { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .metric strong { font-size: clamp(2.8rem, 16vw, 4rem); }
  .career blockquote { font-size: 1.1rem; }
}

/* Lazy-load shimmer, lives on the element's own background so real pixels paint
   over it automatically. No JS required for correctness. */
@keyframes img-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.photo-item img, .tour-item img, .roster-portrait img, .cpanel img, .editorial-media img, .amenities-stack img {
  background-image: linear-gradient(100deg, var(--bg-deep) 25%, var(--surface-raised) 37%, var(--bg-deep) 63%);
  background-size: 400% 100%;
  animation: img-shimmer 1.8s ease-in-out infinite;
}
.photo-item img.is-loaded, .tour-item img.is-loaded, .roster-portrait img.is-loaded,
.cpanel img.is-loaded, .editorial-media img.is-loaded, .amenities-stack img.is-loaded {
  animation: none;
  background-image: none;
}
@media (prefers-reduced-motion: reduce) {
  .photo-item img, .tour-item img, .roster-portrait img, .cpanel img, .editorial-media img, .amenities-stack img { animation: none; }
  .hero-media { animation: none; transform: none; }
  .hero-scroll::after { animation: none; }
}