/* ============================================================
   STALWART — Luxury Real Estate Demo
   Design system: Sobha-inspired · Marcellus + Jost · Warm neutral
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --font-display: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --font-body: "Jost", "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --ink: #212529;
  --slate: #4F5459;
  --grey: #999999;
  --grey-light: #DBDBDB;
  --off-white: #EFEFEF;
  --warm-white: #FFFAF5;
  --white: #FFFFFF;
  --black: #000000;
  --accent: #C9A485;
  --accent-dark: #A17F60;

  --space-1: 4px;  --space-2: 8px;  --space-3: 16px; --space-4: 24px;
  --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; --space-9: 128px;

  --radius-pill: 25px;
  --radius-media: 10px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-med: 600ms;
  --dur-slow: 1000ms;

  --header-h: 88px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 2;
  color: var(--ink);
  background: var(--warm-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }

/* Softly rounded corners on image placeholders site-wide
   (not the full-bleed hero backgrounds, and never the logo) */
.project-card__media,
.showcase__media,
.insight__media,
.gallery-grid__item,
.two-col__media img {
  border-radius: var(--radius-media);
}
/* overflow-hidden frame so parallax on the image clips cleanly */
.two-col__media { overflow: hidden; border-radius: var(--radius-media); }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0;
  letter-spacing: 0;
  line-height: 1.15;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ---------- Utilities ---------- */
.container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 80px);
}
.eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--slate);
  display: inline-block;
  padding-block: 2px;
}
@media (min-width: 900px) { .eyebrow { font-size: 14px; } }
.eyebrow--accent { color: var(--accent-dark); }
.eyebrow--light  { color: rgba(255,255,255,0.85); }

.hr-thin {
  height: 1px;
  background: var(--grey-light);
  border: 0;
  margin: 0;
}

.section { padding-block: clamp(40px, 5vw, 64px); }
.section--tight { padding-block: clamp(28px, 3.6vw, 44px); }
.section--dark { background: var(--black); color: rgba(255,255,255,0.9); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--warm { background: var(--warm-white); }
.section--off  { background: var(--off-white); }

.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 900px) {
  .two-col { grid-template-columns: 1fr 1fr; gap: clamp(36px, 4.5vw, 72px); }
  .two-col--flip .two-col__media { order: 2; }
}
.two-col__body h2 { font-size: clamp(32px, 4vw, 50px); line-height: 1.1; margin-bottom: var(--space-4); }
.two-col__body p  { color: var(--slate); font-size: 16px; line-height: 2; margin-bottom: var(--space-4); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  padding: 14px 28px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  position: relative;
  overflow: visible;
  transition: background 400ms var(--ease), color 400ms var(--ease), border-color 400ms var(--ease);
}
/* On hover the fill drops away so the animated golden outline reads clearly */
.btn:hover { background: transparent; border-color: transparent; color: var(--accent-dark); }
.btn--light { color: #fff; border-color: rgba(255,255,255,0.7); }
.btn--light:hover { background: transparent; border-color: transparent; color: #fff; }
.btn--solid { background: var(--ink); color: #fff; border-color: var(--ink); }
/* Dark solid buttons: drop the dark fill on hover so the golden outline
   draws on the clean section background, matching the other buttons. */
.btn--solid:hover { background: transparent; border-color: transparent; color: var(--ink); }

/* Golden gradient outline that draws itself around the button on hover.
   The SVG rect (injected by main.js) uses pathLength="100" so the dash math
   is identical for every button size. */
.btn__stroke {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.btn__stroke rect {
  fill: none;
  stroke: url(#btnGold);
  stroke-width: 1.5;
  stroke-linejoin: round;
  /* dash (108) is longer than the perimeter (pathLength=100) so the whole
     closed outline is one continuous drawn segment — no seam, and no round
     end-cap dot showing while it's hidden. */
  stroke-dasharray: 108;
  stroke-dashoffset: 108;
  transition: stroke-dashoffset 0.7s var(--ease);
}
.btn:hover .btn__stroke rect,
.btn:focus-visible .btn__stroke rect { stroke-dashoffset: 0; }

.link-under {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  color: var(--ink);
  transition: color 400ms var(--ease), letter-spacing 400ms var(--ease);
}
.link-under:hover { color: var(--accent-dark); letter-spacing: 2.5px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 40;
  padding: var(--space-4) 0;
  transition: background 400ms var(--ease), padding 400ms var(--ease), box-shadow 400ms var(--ease);
  background: transparent;
}
.site-header.is-scrolled {
  background: rgba(255, 250, 245, 0.96);
  padding: 12px 0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
  backdrop-filter: blur(6px);
}
.site-header.is-dark .nav-link,
.site-header.is-dark .brand-mark,
.site-header.is-dark .nav-toggle { color: #fff; }
.site-header.is-dark.is-scrolled .nav-link,
.site-header.is-dark.is-scrolled .brand-mark,
.site-header.is-dark.is-scrolled .nav-toggle { color: var(--ink); }

.header-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
}
.brand-mark {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: 1px;
  justify-self: center;
  display: block;
}
.brand-logo {
  display: block;
  height: 73px;
  width: auto;
}
/* Keep the logo the same size once the sticky header appears. */
.site-header.is-scrolled .brand-logo { height: 73px; }
.brand-mark small {
  display: block;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 4px;
  color: var(--accent-dark);
  margin-top: 4px;
  text-transform: uppercase;
}
.nav-primary {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
}
.nav-primary--right { justify-content: flex-end; }
.nav-link {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding: 6px 0;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms var(--ease);
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  place-items: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block;
  width: 22px; height: 1px; background: currentColor;
  position: relative;
  transition: transform 400ms var(--ease), top 400ms var(--ease);
}
.nav-toggle span::before { position: absolute; top: -7px; left: 0; }
.nav-toggle span::after  { position: absolute; top: 7px;  left: 0; }

@media (max-width: 900px) {
  .nav-primary { display: none; }
  .nav-toggle  { display: grid; justify-self: end; }
  .header-grid { grid-template-columns: 1fr auto 1fr; }
  .brand-mark  { justify-self: start; }
  .site-header .container > .header-grid { grid-template-columns: 1fr auto; }
}

/* Mobile menu overlay */
body.menu-open { overflow: hidden; }
.mobile-menu {
  position: fixed; inset: 0;
  background: var(--warm-white);
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 18px 24px calc(30px + env(safe-area-inset-bottom));
  opacity: 0; pointer-events: none;
  transition: opacity 450ms var(--ease);
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; }
.mobile-menu__bar {
  display: flex; align-items: center; justify-content: space-between;
}
.mobile-menu__logo img { height: 54px; width: auto; display: block; }
.mobile-menu ul {
  flex: 1 1 auto;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-5);
}
.mobile-menu ul li {
  opacity: 0; transform: translateY(14px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.mobile-menu.is-open ul li { opacity: 1; transform: none; }
.mobile-menu.is-open ul li:nth-child(1) { transition-delay: 120ms; }
.mobile-menu.is-open ul li:nth-child(2) { transition-delay: 190ms; }
.mobile-menu.is-open ul li:nth-child(3) { transition-delay: 260ms; }
.mobile-menu.is-open ul li:nth-child(4) { transition-delay: 330ms; }
.mobile-menu.is-open ul li:nth-child(5) { transition-delay: 400ms; }
.mobile-menu a {
  font-family: var(--font-display); font-size: 34px; color: var(--ink);
  letter-spacing: 0.5px;
}
.mobile-menu__foot {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding-top: var(--space-5);
  border-top: 1px solid var(--grey-light);
}
.mobile-menu__foot a {
  font-family: var(--font-body); font-size: 14px; letter-spacing: 1px;
  color: var(--slate);
}
.mobile-menu .close {
  position: relative;
  width: 44px; height: 44px;
  color: var(--ink);
}
.mobile-menu .close span {
  position: absolute; top: 50%; left: 50%;
  width: 24px; height: 1px; background: currentColor;
}
.mobile-menu .close span:first-child { transform: translate(-50%,-50%) rotate(45deg); }
.mobile-menu .close span:last-child  { transform: translate(-50%,-50%) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: #fff;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: kenBurns 22s ease-in-out infinite alternate;
}
@keyframes kenBurns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.15); }
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.70) 0%,
    rgba(0,0,0,0.57) 45%,
    rgba(0,0,0,0.90) 100%);
  z-index: -1;
}
/* Homepage cover — the all-projects line-up. The render is a cut-out with a
   transparent sky, so it is baked onto a 16:9 (and, for phones, 1:2) canvas and
   then treated exactly like the photographic cover it replaced: object-fit:
   cover, full bleed, same dark overlay. The gradient below is the sky showing
   through the transparency; Ken Burns is anchored to the ground so the towers
   stay planted while it drifts. */
.hero--skyline {
  background:
    radial-gradient(120% 78% at 50% 100%, rgba(201,164,133,0.14) 0%, rgba(201,164,133,0) 62%),
    linear-gradient(to bottom, #070A0F 0%, #0C1118 42%, #131A23 78%, #1A222C 100%);
}
.hero--skyline .hero__media picture { display: contents; }
/* Full-bleed to the true viewport edge. A 100%-wide section is as wide as the
   BODY, which on a fractional viewport width (scaled display) or beside a
   classic scrollbar can sit a hairline short of the window — and that hairline
   of cream page background beside a dark hero reads as a gap in the overlay.
   Widening to 100vw with a matching negative margin keeps the centre exactly
   where it was (so the copy still lines up with the header) while the media and
   overlay reach the edge; body's overflow-x: hidden trims the rest. */
.hero, .page-hero, .phero { width: 100vw; margin-inline: calc(50% - 50vw); }
.hero--skyline .hero__media img {
  object-position: center bottom;
  transform-origin: bottom center;
  animation: skylineDrift 26s ease-in-out infinite alternate;
}
@keyframes skylineDrift {
  from { transform: scale(1.02); }
  to   { transform: scale(1.10); }
}

.hero__content { padding: 0 var(--space-4); max-width: 900px; }
/* Hero content starts hidden only while JS-motion is armed (GSAP reveals it);
   no-JS visitors never get the class, so they see it immediately. */
.js-anim .hero__content > * { opacity: 0; }
.hero__eyebrow {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 3px;
  line-height: 1.6;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  margin-bottom: var(--space-4);
  padding-block: 2px;
}
.hero__title {
  font-size: clamp(40px, 7vw, 88px);
  line-height: 1.05;
  font-weight: 400;
  color: #fff;
  margin-bottom: var(--space-5);
}
.hero__title em { font-style: italic; color: var(--accent); }
.hero__sub {
  font-size: 15px;
  line-height: 2;
  color: rgba(255,255,255,0.85);
  max-width: 560px;
  margin: 0 auto var(--space-5);
}
.hero__scroll {
  position: absolute;
  bottom: var(--space-6);
  left: 50%; transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  writing-mode: vertical-rl;
  transform-origin: center;
}
.hero__scroll::after {
  content: "";
  display: block;
  width: 1px; height: 60px;
  background: rgba(255,255,255,0.5);
  margin: var(--space-3) auto 0;
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%, 100% { transform: scaleY(0.3); transform-origin: top; }
  50%      { transform: scaleY(1);   transform-origin: top; }
}

/* Page hero (interior pages) */
.page-hero {
  position: relative;
  min-height: 48vh;
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: var(--space-6);
  display: grid;
  place-items: end center;
  color: #fff;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0.65));
  z-index: -1;
}
.page-hero h1 {
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.1;
  color: #fff;
  margin-bottom: var(--space-3);
}
.page-hero .eyebrow { color: rgba(255,255,255,0.85); }
.page-hero__lead {
  font-size: 15px; line-height: 2;
  max-width: 620px;
  margin: var(--space-4) auto 0;
  color: rgba(255,255,255,0.85);
}
/* Masthead entrance — eyebrow, title and lead rise in turn on load. CSS-driven
   (not GSAP) because these sit above the fold: they must not wait on a CDN, and
   the `both` fill keeps them visible if the animation is disabled. */
.page-hero .container > * { animation: pageHeroRise 1000ms var(--ease) both; }
.page-hero .container > *:nth-child(1) { animation-delay: 120ms; }
.page-hero .container > *:nth-child(2) { animation-delay: 240ms; }
.page-hero .container > *:nth-child(3) { animation-delay: 380ms; }
@keyframes pageHeroRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Brand statement ---------- */
.statement {
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
  padding-block: clamp(40px, 5vw, 64px);
}
.statement__quote {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 45px);
  line-height: 1.3;
  font-weight: 400;
  color: var(--ink);
}
.statement__quote em { color: var(--accent-dark); font-style: italic; }
.statement__divider {
  width: 60px; height: 1px;
  background: var(--accent);
  margin: var(--space-5) auto;
  /* Draws itself outward once the statement reveals. Guarded below so it can
     never be left as an invisible zero-width line. */
  transform: scaleX(0);
  transition: transform 1100ms var(--ease) 280ms;
}
[data-reveal].is-visible .statement__divider { transform: scaleX(1); }

/* ---------- Section head ---------- */
.section-head {
  text-align: center;
  margin-bottom: clamp(28px, 3.6vw, 48px);
}
.section-head h2 {
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.1;
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}
.section-head p {
  color: var(--slate);
  max-width: 620px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 2;
}

/* ---------- Featured project cards ---------- */
.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 800px) {
  .project-grid { grid-template-columns: repeat(2, 1fr); }
}

.project-card { display: block; }
.project-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--off-white);
}
.project-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease);
}
.project-card:hover .project-card__media img { transform: scale(1.05); }
.project-card__body { padding-top: var(--space-4); }
.project-card__loc {
  font-size: 12px; font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: var(--space-2);
}
.project-card__name {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.project-card__meta {
  font-size: 13px;
  color: var(--slate);
  margin-bottom: var(--space-3);
}
.project-card__cta {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-dark);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

/* Big alternating showcase */
.showcase { display: grid; gap: var(--space-7); }
.showcase__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 900px) {
  .showcase__row { grid-template-columns: 1.15fr 1fr; gap: clamp(48px, 6vw, 96px); }
  .showcase__row--flip .showcase__media { order: 2; }
  .showcase__row--flip .showcase__body { padding-right: var(--space-6); }
  .showcase__row:not(.showcase__row--flip) .showcase__body { padding-left: var(--space-6); }
}
.showcase__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.showcase__media img { width: 100%; height: 100%; object-fit: cover; }
.showcase__row:hover .showcase__media img { transform: scale(1.04); }
.showcase__body h3 { font-size: clamp(28px, 3.2vw, 40px); margin: var(--space-3) 0; }
.showcase__body p { color: var(--slate); font-size: 15px; line-height: 2; margin-bottom: var(--space-5); }
.showcase__meta {
  display: flex; flex-wrap: wrap;
  gap: var(--space-5);
  font-size: 12px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--slate);
  margin-bottom: var(--space-6);
  padding-block: var(--space-4);
  border-block: 1px solid var(--grey-light);
}
.showcase__meta span strong {
  display: block; color: var(--ink);
  font-family: var(--font-display); font-size: 18px;
  letter-spacing: 0; text-transform: none;
  margin-top: 4px;
}

/* Home: the SkyCity feature and the ownership rows below it. On wide screens
   the photo fills the full height of its text column (it used to sit centred
   and shorter than the text beside it), and the text is set a little tighter. */
@media (min-width: 900px) {
  .two-col--match,
  .showcase--match .showcase__row { align-items: stretch; }
  .two-col--match .two-col__media,
  .showcase--match .showcase__media { position: relative; aspect-ratio: auto; min-height: 380px; }
  .two-col--match .two-col__media img,
  .showcase--match .showcase__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .two-col--match .two-col__body,
  .showcase--match .showcase__body { align-self: center; }
  .two-col--match .two-col__body .eyebrow,
  .showcase--match .showcase__body .eyebrow { margin-bottom: 14px; }
  .two-col--match .two-col__body h2 { margin-bottom: 16px; }
  .showcase--match .showcase__body h3 { margin: 0 0 14px; }
  .two-col--match .two-col__body p,
  .showcase--match .showcase__body p { line-height: 1.85; margin-bottom: 22px; }
  .two-col--match .showcase__meta,
  .showcase--match .showcase__meta { padding-block: 16px; margin-bottom: 28px; }
}

/* ---------- Pillars ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 800px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar {
  background: var(--warm-white);
  border: 1px solid var(--grey-light);
  border-radius: var(--radius-media);
  padding: var(--space-7) var(--space-4);
  text-align: center;
  transition: border-color 400ms var(--ease), box-shadow 500ms var(--ease), transform 500ms var(--ease);
}
.pillar:hover {
  border-color: var(--accent);
  box-shadow: 0 20px 44px -28px rgba(33, 37, 41, 0.28);
  transform: translateY(-4px);
}
/* When a pillar carries its own [data-reveal] (so the cards cascade in one by
   one), `[data-reveal].is-visible { transform: none }` is declared later in the
   file and would otherwise cancel the hover lift. Restate it, more specific. */
.pillar[data-reveal].is-visible:hover { transform: translateY(-4px); }
/* Phones: tighter cards — smaller title, just-enough padding.
   (.pillars prefix keeps these winning over the base rules that follow.) */
@media (max-width: 600px) {
  .pillars .pillar { padding: var(--space-5) var(--space-3); }
  .pillars .pillar__num { font-size: 17px; margin-bottom: var(--space-2); }
  .pillars .pillar__title { font-size: 18px; line-height: 1.25; margin-bottom: var(--space-2); }
  .pillars .pillar__desc { font-size: 12.5px; line-height: 1.75; }
}
.pillar__num {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--accent-dark);
  margin-bottom: var(--space-3);
}
.pillar__title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: var(--space-3);
}
.pillar__desc {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.9;
}

/* ---------- Stat band ---------- */
.statband {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  text-align: center;
}
@media (min-width: 800px) { .statband { grid-template-columns: repeat(4, 1fr); } }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1;
  color: #fff;
  margin-bottom: var(--space-3);
}
.stat__num em { color: var(--accent); font-style: normal; }
.stat__label {
  font-size: 12px; font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

/* ---------- Testimonial ---------- */
.testimonial {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.testimonial__quote {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: var(--space-5);
}
.testimonial__quote::before {
  content: "\201C"; display: block;
  font-family: var(--font-display); font-size: 80px; line-height: 0.5;
  color: var(--accent); margin-bottom: var(--space-3);
}
.testimonial__attrib {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--slate);
}

/* ---------- Awards marquee ---------- */
.marquee {
  overflow: hidden;
  padding-block: var(--space-4);
  border-block: 1px solid var(--grey-light);
}
.marquee__track {
  display: flex; gap: 80px;
  animation: marquee 40s linear infinite;
  width: max-content;
}
.marquee__item {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--slate);
  white-space: nowrap;
  letter-spacing: 1px;
}
.marquee__item::before {
  content: "\2014\2003";
  color: var(--accent);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Insights ---------- */
.insights {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 800px) { .insights { grid-template-columns: repeat(3, 1fr); } }

/* Insights — the featured article: large, centred, above the grid. */
.insight-feature { max-width: 980px; margin: 0 auto var(--space-8); text-align: center; }
.insight-feature__media {
  display: block; aspect-ratio: 16 / 9; overflow: hidden;
  margin-bottom: var(--space-5); background: var(--off-white);
}
.insight-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.insight-feature:hover .insight-feature__media img { transform: scale(1.03); }
.insight-feature__title {
  font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 42px); line-height: 1.22;
  max-width: 780px; margin: 0 auto var(--space-3);
}
.insight-feature__title a { color: inherit; text-decoration: none; transition: color 300ms var(--ease); }
.insight-feature__title a:hover { color: var(--accent-dark); }
.insight-feature__excerpt { color: var(--slate); font-size: 16px; line-height: 1.9; max-width: 640px; margin: 0 auto var(--space-3); }
.insight-feature__more { display: inline-block; margin-top: var(--space-4); }
.insights__latest { display: block; text-align: center; margin-bottom: var(--space-6); }
.insight__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin-bottom: var(--space-4);
  background: var(--off-white);
}
.insight__media img { width: 100%; height: 100%; object-fit: cover; }
.insight:hover .insight__media img { transform: scale(1.04); }
.insight__cat { font-size: 12px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent-dark); margin-bottom: var(--space-2); }
.insight__title { font-family: var(--font-display); font-size: 22px; line-height: 1.35; margin-bottom: var(--space-2); }
.insight__meta { font-size: 12px; color: var(--slate); letter-spacing: 1px; text-transform: uppercase; }

/* ---------- Contact banner ---------- */
.contact-banner {
  text-align: center;
}
.contact-banner h2 {
  font-size: clamp(30px, 4vw, 50px);
  margin: var(--space-3) 0 var(--space-4);
}
.contact-banner p { color: var(--slate); max-width: 520px; margin: 0 auto var(--space-6); font-size: 15px; line-height: 2; }
.contact-banner__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer {
  background: #0e0e0e;
  color: rgba(255,255,255,0.7);
  padding-top: var(--space-8);
  padding-bottom: var(--space-6);
  font-size: 13px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
/* Mobile: footer in two columns (brand full-width on top) */
@media (max-width: 799px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-5); }
  .footer-brand { grid-column: 1 / -1; }
  /* keep the credit on a single line on narrow screens */
  /* stack the bottom row centered on mobile */
  .footer-base { flex-direction: column; text-align: center; gap: var(--space-4); }
}
@media (min-width: 800px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-brand__mark {
  font-family: var(--font-display);
  font-size: 28px; color: #fff;
  margin-bottom: var(--space-4);
}
.footer-logo {
  display: block;
  height: 84px;
  width: auto;
}
.footer-brand p { max-width: 340px; line-height: 1.9; color: rgba(255,255,255,0.55); font-size: 15px; }
/* CREDAI member badge */
.footer-credai {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--space-5);
  padding: 8px 16px 8px 8px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
}
.footer-credai__logo {
  display: inline-flex; align-items: center;
  background: #fff;
  border-radius: 8px;
  padding: 8px 12px;
}
.footer-credai__logo img { height: 20px; width: auto; display: block; }
.footer-credai__text { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.footer-credai__text strong {
  font-family: var(--font-body); font-weight: 600;
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent);
}
.footer-credai__text em {
  font-style: normal;
  font-size: 11.5px; letter-spacing: 0.3px;
  color: rgba(255,255,255,0.5);
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 500;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  margin-bottom: var(--space-4);
}
.footer-col ul { display: grid; gap: 14px; }
.footer-col a { color: rgba(255,255,255,0.6); transition: color 400ms var(--ease); font-size: 15px; }
.footer-col a:hover { color: var(--accent); }
.footer-base {
  padding-top: var(--space-5);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: var(--space-3);
  color: rgba(255,255,255,0.45);
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
}
.socials { display: flex; gap: var(--space-4); align-items: center; }
.socials a {
  display: inline-flex;
  color: rgba(255,255,255,0.55);
  transition: color 400ms var(--ease), transform 400ms var(--ease);
}
.socials a:hover { color: var(--accent); transform: translateY(-2px); }
.socials svg { width: 20px; height: 20px; display: block; }
/* Social icons sit in the brand column, under the CREDAI badge. */
.footer-brand .socials { margin-top: var(--space-5); }
/* Bottom row: copyright left · credit right (stacked and centred on mobile).
   The credit is plain text (no link) and takes the copyright line's colour,
   size and tracking from .footer-base. */
@media (min-width: 800px) {
  .footer-credit { text-align: right; }
}

/* ---------- Reveal on scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 1000ms var(--ease), transform 1000ms var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
[data-reveal-delay="1"] { transition-delay: 120ms; }
[data-reveal-delay="2"] { transition-delay: 240ms; }
[data-reveal-delay="3"] { transition-delay: 360ms; }

/* ---------- Project detail specifics ---------- */
.key-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-block: 1px solid var(--grey-light);
  padding-block: var(--space-5);
  gap: var(--space-5);
}
@media (min-width: 800px) { .key-facts { grid-template-columns: repeat(4, 1fr); } }
.fact__label { font-size: 12px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--slate); margin-bottom: 8px; }
.fact__value { font-family: var(--font-display); font-size: 20px; line-height: 1.3; color: var(--ink); }

.amenity-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 700px) { .amenity-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .amenity-grid { grid-template-columns: repeat(4, 1fr); } }
.amenity {
  border: 1px solid var(--grey-light);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  transition: border-color 400ms var(--ease), background 400ms var(--ease);
}
.amenity:hover { border-color: var(--accent); background: #fff; }
.amenity__icon {
  font-family: var(--font-display);
  font-size: 22px; color: var(--accent-dark);
  margin-bottom: var(--space-3);
}
.amenity__name { font-size: 13px; color: var(--slate); letter-spacing: 1px; text-transform: uppercase; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
@media (min-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-grid__item { aspect-ratio: 4 / 3; overflow: hidden; }
.gallery-grid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.gallery-grid__item:hover img { transform: scale(1.05); }
.gallery-grid__item--tall { grid-row: span 2; aspect-ratio: 4 / 6; }

/* ---------- Forms ---------- */
.form {
  display: grid;
  gap: var(--space-4);
  max-width: 620px;
  margin: 0 auto;
}
.form__row { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; }
.field label {
  font-size: 11px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--slate);
}
.field input, .field select, .field textarea {
  font: 300 15px/1.6 var(--font-body);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--grey-light);
  padding: 12px 0;
  outline: none;
  transition: border-color 400ms var(--ease);
}
.field textarea { resize: vertical; min-height: 100px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }

/* ---------- Filter chips ---------- */
.filter-bar {
  display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap;
  margin-bottom: var(--space-7);
}
.chip {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  padding: 10px 20px;
  border: 1px solid var(--grey-light);
  border-radius: var(--radius-pill);
  color: var(--slate);
  cursor: pointer;
  transition: color 400ms var(--ease), border-color 400ms var(--ease), background 400ms var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Legacy / completed project cards ---------- */
.project-group-head {
  grid-column: 1 / -1;
  padding-top: var(--space-7);
  border-top: 1px solid var(--grey-light);
}
.project-grid > .project-group-head:first-child {
  padding-top: 0;
  border-top: 0;
}
.project-group-head h2 {
  font-size: clamp(24px, 2.6vw, 34px);
  margin-top: var(--space-2);
}
/* legacy cards read as archive plates — a touch shorter than the on-going 4:5 */
.project-card--legacy .project-card__media { aspect-ratio: 4 / 3; }

/* planned vs. actual handover — the trust signal (client point 2) */
.delivery {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-3) 0;
  margin-bottom: var(--space-3);
  border-top: 1px solid var(--grey-light);
}
.delivery__col {
  font-size: 13px;
  color: var(--slate);
  font-family: var(--font-display);
}
.delivery__col em {
  display: block;
  font-style: normal;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 5px;
}
.delivery__col--actual { color: var(--ink); }
.delivery__col--actual em { color: var(--accent-dark); }
.project-card__rera {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--grey);
}

/* Graceful no-photo card (client point 5 — several older projects have no image) */
.project-card__media--noimg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-5);
  background: linear-gradient(155deg, #1c1c1c 0%, #2e2b28 60%, #3a332c 100%);
  color: var(--warm-white);
}
.project-card__media--noimg::after {
  content: "Stalwart";
  position: absolute;
  bottom: 14px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(201, 164, 133, 0.5);
}
.project-card__media--noimg .noimg__label {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
}
.project-card__media--noimg .noimg__name {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.3;
}
.project-card__media--noimg .noimg__sub {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- Prefers reduced motion ---------- */
/* ---------- Center-focus carousel (testimonials / recognition) ---------- */
.mcar { position: relative; margin-top: var(--space-3); }
.mcar__viewport { overflow: hidden; padding: 26px 0; }
.mcar__track { display: flex; align-items: center; gap: var(--space-3); will-change: transform; transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1); }
.mcar__card {
  flex: 0 0 auto;
  width: min(340px, 82vw);
  transform: scale(0.8);
  opacity: 0.4;
  transition: transform 700ms var(--ease), opacity 700ms var(--ease);
}
.mcar__card.is-active { transform: scale(1); opacity: 1; }
/* freeze track + card transitions during the loop-seam snap (no blip / grow) */
.mcar.is-snapping .mcar__track,
.mcar.is-snapping .mcar__card { transition: none; }
/* tighter heading -> cards spacing in carousel sections only */
.has-carousel .section-head { margin-bottom: var(--space-3); }
.has-carousel .mcar { margin-top: 0; }

.mcar__nav { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }
.mcar__arrow {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--grey-light);
  display: grid; place-items: center;
  color: var(--ink);
  background: transparent;
  transition: background 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease);
}
.mcar__arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mcar__arrow:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Testimonial (video) card */
.tcard { text-align: center; }
.tcard__media {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: 14px; overflow: hidden;
  background: #0e0e0e; cursor: pointer;
  box-shadow: 0 24px 50px -32px rgba(33,37,41,0.55);
}
.tcard__media img { width: 100%; height: 100%; object-fit: cover; }
.tcard__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tcard__play { position: absolute; inset: 0; display: grid; place-items: center; }
.tcard__play::before {
  content: ""; position: absolute;
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.7);
  transition: background 300ms var(--ease), border-color 300ms var(--ease);
}
.tcard__play svg { position: relative; width: 24px; height: 24px; fill: #fff; margin-left: 3px; }
.tcard__media:hover .tcard__play::before { background: var(--accent); border-color: var(--accent); }
.tcard__name { font-family: var(--font-display); font-size: 21px; margin-top: var(--space-4); color: var(--ink); }
.tcard__role { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-dark); margin-top: 6px; }

/* Recognition (award) card — larger, square media */
.acard { text-align: center; width: min(420px, 86vw); }
.acard__media {
  aspect-ratio: 1 / 1;
  border-radius: 14px; overflow: hidden;
  background: #0e0e0e;
  box-shadow: 0 24px 50px -32px rgba(33,37,41,0.55);
}
.acard__media img { width: 100%; height: 100%; object-fit: cover; }
.acard__name { font-family: var(--font-display); font-size: 19px; line-height: 1.3; margin-top: var(--space-4); color: var(--ink); }
.acard__body { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--slate); margin-top: 6px; }

/* ============================================================
   PROJECT MICROSITE (SkyCity, and future project pages)
   Shares the theme; a distinct layout so it reads as a project page.
   ============================================================ */

/* Anchored sections clear the fixed header + sticky sub-nav */
#overview, #residences, #amenities, #gallery, #location, #enquire { scroll-margin-top: 150px; }

/* ---------- Project masthead hero ---------- */
.phero {
  position: relative;
  min-height: 86vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.phero__media { position: absolute; inset: 0; z-index: -2; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Masthead for a project with no renders yet — same dark typographic language
   as the no-image project card, so an unphotographed address still reads as
   deliberate rather than unfinished. Drop the modifier once art arrives. */
.phero--typographic { background: linear-gradient(155deg, #1c1c1c 0%, #2e2b28 60%, #3a332c 100%); }
.phero--typographic::before { background: linear-gradient(to bottom, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0.55) 100%); }
.phero--typographic::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 45% at 78% 18%, rgba(201, 164, 133, 0.16), transparent 70%),
    radial-gradient(45% 40% at 12% 88%, rgba(201, 164, 133, 0.10), transparent 72%);
}
.phero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.30) 40%, rgba(0,0,0,0.85) 100%);
}
.phero__inner { width: 100%; padding-bottom: var(--space-7); }
.phero__content { max-width: 760px; }
.phero__content > * { animation: pheroIn 1s var(--ease) both; }
.phero__content > *:nth-child(1) { animation-delay: .05s; }
.phero__content > *:nth-child(2) { animation-delay: .18s; }
.phero__content > *:nth-child(3) { animation-delay: .31s; }
.phero__content > *:nth-child(4) { animation-delay: .44s; }
@keyframes pheroIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.phero__eyebrow {
  font-size: 14px; font-weight: 500; letter-spacing: 3px; line-height: 1.6;
  text-transform: uppercase; padding-block: 2px;
  color: var(--accent); margin-bottom: var(--space-4);
}
.phero__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 104px); line-height: 1; font-weight: 400;
  margin-bottom: var(--space-4);
}
.phero__title em { font-style: italic; color: var(--accent); }
.phero__tag {
  font-size: clamp(15px, 1.6vw, 19px); line-height: 1.8;
  color: rgba(255,255,255,0.85); max-width: 620px; margin-bottom: var(--space-5);
}
.phero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* data strip */
.phero__strip {
  border-top: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(4px);
  padding: var(--space-4) 0;
}
.pstrip { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (min-width: 800px) { .pstrip { grid-template-columns: repeat(4, 1fr); } }
.pstrip__item { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: #fff; }
.pstrip__item em {
  font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--accent);
}

/* ---------- Sticky in-page nav ---------- */
.proj-nav {
  position: sticky; top: 96px; z-index: 30;
  background: rgba(255,250,245,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--grey-light);
}
.proj-nav__list {
  display: flex; gap: clamp(16px, 3vw, 40px);
  list-style: none; margin: 0; padding: 16px 0;
  overflow-x: auto; scrollbar-width: none;
}
.proj-nav__list::-webkit-scrollbar { display: none; }
.proj-nav__list a {
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--slate); white-space: nowrap;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: color 300ms var(--ease), border-color 300ms var(--ease);
}
.proj-nav__list a:hover { color: var(--ink); border-color: var(--accent); }
.proj-nav__cta { color: var(--accent-dark) !important; }
.proj-nav__list li:last-child { margin-left: auto; }

/* ---------- Overview + towers ---------- */
.proj-intro { max-width: 780px; margin-bottom: var(--space-7); }
.proj-intro h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; margin: var(--space-3) 0; }
.proj-intro p { color: var(--slate); font-size: 16px; line-height: 2; }
/* The location section without a photo: room between the text and its button. */
.proj-intro > .btn { margin-top: var(--space-5); }
.towers { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--grey-light); border: 1px solid var(--grey-light); border-radius: var(--radius-media); overflow: hidden; }
@media (min-width: 760px) { .towers { grid-template-columns: repeat(4, 1fr); } }
.tower {
  background: var(--warm-white);
  padding: var(--space-6) var(--space-4);
  transition: background 400ms var(--ease);
}
.tower:hover { background: #fff; }
.tower--tall { background: var(--off-white); }
.tower__no { font-size: 12px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent-dark); }
.tower__name { font-family: var(--font-display); font-size: 22px; margin: var(--space-3) 0 var(--space-2); }
.tower__spec { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); margin-bottom: var(--space-3); }
.tower__desc { font-size: 14px; line-height: 1.7; color: var(--slate); }

/* ---------- Light stat band (project) ---------- */
.statband--light { text-align: center; }
.statband--light .stat__num { font-family: var(--font-display); font-size: clamp(40px, 6vw, 64px); color: var(--ink); line-height: 1; }
.statband--light .stat__num em { font-style: normal; color: var(--accent-dark); }
.statband--light .stat__label { font-size: 12px; font-weight: 500; letter-spacing: 1.8px; text-transform: uppercase; color: var(--slate); margin-top: var(--space-2); }

.section-head--left { text-align: left; }
.section-head--left p { margin-left: 0; }

/* ---------- Configurations table ---------- */
.config { border-top: 1px solid var(--grey-light); margin-bottom: var(--space-6); }
.config__head, .config__row {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-3);
  align-items: center; padding: var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--grey-light);
}
.config__head { font-size: 12px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--slate); }
.config__row { transition: background 300ms var(--ease); }
.config__row:hover { background: #fff; }
.config__type { font-family: var(--font-display); font-size: 19px; color: var(--ink); }
.config__area { font-size: 15px; color: var(--slate); }
.config__tower { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-dark); }

/* ---------- Floor plans ---------- */
.plans__label { font-size: 12px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--slate); margin-bottom: var(--space-4); }
.plans__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 700px) { .plans__grid { grid-template-columns: repeat(3, 1fr); } }
.plans__item { display: block; }
.plans__item img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius-media); border: 1px solid var(--grey-light); background: #fff;
  transition: transform 500ms var(--ease), box-shadow 500ms var(--ease);
}
.plans__item:hover img { transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(33,37,41,0.35); }
.plans__item span { display: block; margin-top: var(--space-2); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--slate); }

/* ---------- Amenities ---------- */
.amenities {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--grey-light);
}
@media (min-width: 700px) { .amenities { grid-template-columns: repeat(3, 1fr); } }
.amenities li {
  padding: var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--grey-light);
  font-size: 15px; color: var(--ink);
  display: flex; align-items: center; gap: var(--space-3);
}
.amenities li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }

/* ---------- Dark gallery (full-bleed) ---------- */
.pgallery {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3);
  padding: var(--space-6) var(--space-4) 0;
}
@media (min-width: 800px) { .pgallery { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); padding-inline: var(--space-6); } }
.pgallery__item { margin: 0; overflow: hidden; border-radius: var(--radius-media); aspect-ratio: 3/4; }
.pgallery__item--wide { grid-column: span 2; aspect-ratio: 3/2; }
.pgallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Location / connectivity ---------- */
.commute { list-style: none; margin: var(--space-4) 0 var(--space-5); padding: 0; }
.commute li { display: flex; align-items: baseline; gap: var(--space-4); padding: 12px 0; border-bottom: 1px solid var(--grey-light); font-size: 15px; color: var(--ink); }
.commute__t { font-family: var(--font-display); font-size: 18px; color: var(--accent-dark); min-width: 78px; }

/* ---------- Enquiry ---------- */
.enquire { display: grid; grid-template-columns: 1fr; gap: var(--space-7); }
@media (min-width: 860px) { .enquire { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 96px); align-items: start; } }
.enquire__intro h2 { color: #fff; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; margin: var(--space-3) 0; }
.enquire__intro p { color: rgba(255,255,255,0.7); line-height: 1.9; }
.enquire__contact a { color: var(--accent); }
.enquire__form { display: grid; gap: var(--space-4); }
.enquire__form label { display: grid; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.enquire__form input, .enquire__form select, .enquire__form textarea {
  font-family: var(--font-body); font-size: 15px; color: #fff;
  background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,0.3);
  padding: 10px 0; transition: border-color 300ms var(--ease);
}
.enquire__form input:focus, .enquire__form select:focus, .enquire__form textarea:focus { outline: none; border-color: var(--accent); }
.enquire__form select option { color: var(--ink); }
.enquire__form .form__row--2 { display: grid; gap: var(--space-4); }
@media (min-width: 560px) { .enquire__form .form__row--2 { grid-template-columns: 1fr 1fr; } }
.enquire__form .btn--solid { justify-self: start; background: var(--accent); border-color: var(--accent); color: #fff; margin-top: var(--space-2); }

/* ---------- Cinematic image frame ---------- */
.cine { position: relative; overflow: hidden; border-radius: var(--radius-media); }
.cine img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cine--banner { aspect-ratio: 16 / 6; margin: var(--space-6) 0; }
@media (max-width: 760px) { .cine--banner { aspect-ratio: 4 / 3; } }
.two-col__media.cine { aspect-ratio: 4 / 3.2; }

/* ---------- Walkthrough video ---------- */
.pvideo {
  position: relative; margin-top: var(--space-5);
  aspect-ratio: 16 / 9; border-radius: var(--radius-media); overflow: hidden;
  cursor: pointer; background: #000;
  box-shadow: 0 34px 70px -34px rgba(0,0,0,0.65);
}
.pvideo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.82; transition: opacity 500ms var(--ease), transform 800ms var(--ease); }
.pvideo:hover img { opacity: 1; transform: scale(1.03); }
.pvideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pvideo__play { position: absolute; inset: 0; display: grid; place-items: center; }
.pvideo__play::before {
  content: ""; position: absolute; width: 88px; height: 88px; border-radius: 50%;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.7);
  transition: background 300ms var(--ease), transform 300ms var(--ease);
}
.pvideo:hover .pvideo__play::before { background: var(--accent); border-color: var(--accent); transform: scale(1.06); }
.pvideo__play svg { position: relative; width: 34px; height: 34px; fill: #fff; margin-left: 5px; }

/* ---------- Floor-plans CTA ---------- */
.plans__cta { margin-top: var(--space-6); display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.plans__note { font-size: 13px; color: var(--slate); max-width: 340px; margin: 0; }

/* ---------- Lead-capture modal ---------- */
body.modal-open { overflow: hidden; }
.modal {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: var(--space-4);
  opacity: 0; visibility: hidden;
  transition: opacity 350ms var(--ease), visibility 350ms var(--ease);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(20,18,16,0.6); backdrop-filter: blur(3px); }
.modal__panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto;
  background: var(--warm-white); border-radius: 16px;
  padding: clamp(24px, 4vw, 44px);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.55);
  transform: translateY(16px) scale(0.98);
  transition: transform 400ms var(--ease);
}
.modal.is-open .modal__panel { transform: none; }
.modal__panel h3 { font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 34px); line-height: 1.1; margin: var(--space-2) 0 var(--space-3); }
.modal__lead { color: var(--slate); font-size: 15px; line-height: 1.8; margin-bottom: var(--space-5); }
.modal__close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; color: var(--ink); }
.modal__close span { position: absolute; top: 50%; left: 50%; width: 20px; height: 1px; background: currentColor; }
.modal__close span:first-child { transform: translate(-50%,-50%) rotate(45deg); }
.modal__close span:last-child { transform: translate(-50%,-50%) rotate(-45deg); }

/* Lead form on light panels (modal) */
.modal .lead-form { display: grid; gap: var(--space-4); }
.modal .lead-form label { display: grid; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--slate); }
.modal .lead-form input, .modal .lead-form select {
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--grey-light);
  padding: 10px 0; transition: border-color 300ms var(--ease);
}
.modal .lead-form input:focus, .modal .lead-form select:focus { outline: none; border-color: var(--accent); }
.modal .lead-form .form__row--2 { display: grid; gap: var(--space-4); }
@media (min-width: 480px) { .modal .lead-form .form__row--2 { grid-template-columns: 1fr 1fr; } }
.modal .lead-form .btn--solid { justify-self: start; background: var(--accent); border-color: var(--accent); color: #fff; margin-top: var(--space-2); }
.lead-form input.is-invalid { border-color: #c0392b !important; }
.lead-form__done { color: var(--accent-dark); font-size: 14px; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .js-anim .hero__content > * { opacity: 1 !important; }
  .phero__content > * { opacity: 1 !important; }
  /* Transitions are off above, so the divider would stay collapsed. */
  .statement__divider { transform: none; }
}

/* ==========================================================================
   Content pages — Awards, CSR, NRI, Construction Updates, Careers, Insights,
   legal. Added 2026-08-18. All reuse the existing tokens; no new palette.
   ========================================================================== */

/* ---------- FAQ accordion (native <details>, no JS needed) ---------- */
.faq { border-top: 1px solid var(--grey-light); max-width: 860px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--grey-light); }
.faq__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-5) var(--space-2);
  font-family: var(--font-display); font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.45; color: var(--ink);
  transition: color 300ms var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent-dark); }
.faq__q::after {
  content: ""; flex: 0 0 auto; margin-left: auto; margin-top: 8px;
  width: 10px; height: 10px;
  border-right: 1px solid var(--accent-dark); border-bottom: 1px solid var(--accent-dark);
  transform: rotate(45deg); transition: transform 400ms var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); }
.faq__a { padding: 0 var(--space-6) var(--space-5) var(--space-2); }
.faq__a p { color: var(--slate); line-height: 1.95; font-size: 15px; }
.faq__a p + p { margin-top: var(--space-3); }
.faq__item[open] .faq__a { animation: faqOpen 500ms var(--ease) both; }
@keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Contact — alternatives column ---------- */
/* The column is a flex stack that fills the grid row, and the studio card is
   pushed to its foot, so the card ends level with the enquiry form's button
   instead of hanging below it. Phone and Email share a row on desktop to keep
   the two columns close in height before that slack is taken up. */
.contact-alt { display: flex; flex-direction: column; height: 100%; }
/* Its opposite number: the form fills the row too, and the Send button drops to
   the foot of it, so button and card sit on the same line whichever column
   happens to be the taller one. */
.contact-form-col { display: flex; flex-direction: column; height: 100%; }
.contact-form-col .lead-form { flex: 1; display: flex; flex-direction: column; gap: var(--space-4); }
.contact-form-col .lead-form > *:last-child { margin-top: auto; }
/* The Notes box takes up whatever height the row has spare, so the form ends
   level with the office card without an empty band above the Send button. */
.contact-form-col .lead-form > .field:has(> textarea) { flex: 1; display: flex; flex-direction: column; }
.contact-form-col .lead-form > .field:has(> textarea) textarea { flex: 1; min-height: 140px; }
.contact-alt__list {
  display: grid;
  gap: var(--space-4);
  border-top: 1px solid var(--grey-light);
  padding-top: var(--space-5);
  margin: 0; padding-left: 0; list-style: none;
}
/* Label above value, tight: the value's own 8px top margin is the only gap. */
.contact-alt__list > li { display: flex; flex-direction: column; align-items: flex-start; }
.contact-alt__list .eyebrow { margin-bottom: 0; }
.contact-alt__list li > p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .contact-alt__list { grid-template-columns: 1fr 1fr; column-gap: var(--space-5); margin-bottom: var(--space-5); }
  .contact-alt__list li:last-child { grid-column: 1 / -1; }
  /* The form column opens with an eyebrow and this one no longer does, so the
     pair of headings would otherwise start on different lines. This reserves
     exactly the height that eyebrow occupies (2em line + its 2px padding + the
     24px gap beneath it). */
  .contact-alt { padding-top: calc(2em + 4px + var(--space-4)); }
}
.contact-alt__card {
  margin-top: auto;
  padding: var(--space-5);
  background: #fff;
  border: 1px solid var(--grey-light);
}
/* Above the two-column breakpoint the card simply follows the list. */
@media (max-width: 899px) { .contact-alt__card { margin-top: var(--space-6); } }

/* ---------- Long-form prose (legal, NRI) ---------- */
.prose { max-width: 780px; margin: 0 auto; }
.prose h2 {
  font-size: clamp(21px, 2.2vw, 27px); margin: var(--space-6) 0 var(--space-3);
  padding-top: var(--space-5); border-top: 1px solid var(--grey-light);
}
/* no rule above a heading that opens the text (legal pages, the NRI note);
   an article that opens with a paragraph keeps the rule before its first heading */
.prose > h2:first-child, .prose .prose__meta + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.prose p, .prose li { color: var(--slate); line-height: 2; font-size: 15px; }
.prose p + p { margin-top: var(--space-4); }
.prose ul { margin: var(--space-4) 0 0; padding-left: var(--space-4); }
.prose li { margin-bottom: var(--space-2); }
.prose strong { color: var(--ink); font-weight: 500; }
.prose__meta {
  font-size: 13px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent-dark); margin-bottom: var(--space-6);
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--grey-light);
}
.prose__contact {
  margin-top: var(--space-6); padding: var(--space-6);
  background: var(--warm-white); border: 1px solid var(--grey-light);
  border-radius: var(--radius-media);
}
.prose__contact p { font-size: 14px; line-height: 1.9; }

/* ---------- Links inside editable text ----------
   Paragraph text now comes from the CMS with links in it. They inherit the
   colour of the text around them (so they work on light and dark sections)
   and are marked by a champagne underline. Buttons are left alone. */
:where(.prose, .faq__a, .section-head, .proj-intro, .two-col__body, .showcase__body, .statement,
       .page-hero__lead, .enquire__intro, .contact-banner, .pillar__desc, .entry__desc, .tl-item__desc,
       .insight, .tower__desc, .phero__tag, .hero__sub, .modal__lead, .plans__note, .cu-latest)
  a:not(.btn):not(.link-under):not(.insight__media) {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 200ms var(--ease), color 200ms var(--ease);
}
:where(.prose, .faq__a, .section-head, .proj-intro, .two-col__body, .showcase__body, .statement,
       .page-hero__lead, .enquire__intro, .contact-banner, .pillar__desc, .entry__desc, .tl-item__desc,
       .insight, .tower__desc, .phero__tag, .hero__sub, .modal__lead, .plans__note, .cu-latest)
  a:not(.btn):not(.link-under):not(.insight__media):hover { text-decoration-thickness: 2px; }

/* ---------- Articles (Insights posts) ---------- */
.prose h3 { font-family: var(--font-display); font-size: clamp(19px, 1.8vw, 22px); line-height: 1.35; margin: var(--space-5) 0 var(--space-2); color: var(--ink); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; margin: var(--space-4) 0 0; padding-left: var(--space-4); }
.prose li::marker { color: var(--accent-dark); }
.prose em { font-style: italic; }
.prose blockquote { margin: var(--space-5) 0; padding-left: var(--space-4); border-left: 2px solid var(--accent); font-family: var(--font-display); font-size: 20px; line-height: 1.6; color: var(--ink); }
.prose h2 + p, .prose h3 + p { margin-top: 0; }
.prose ul + p, .prose ol + p, .prose blockquote + p { margin-top: var(--space-4); }
/* What the CMS's article editor can add: photos, video, tables, small headings. */
.prose img { border-radius: var(--radius-media); }
.prose p > img:only-child, .prose figure { margin: var(--space-5) 0; }
.prose figcaption { margin-top: var(--space-2); font-size: 13px; color: var(--grey); text-align: center; }
.prose iframe { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-media); margin: var(--space-5) 0; }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: var(--space-5) 0; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--grey-light); padding: 10px 14px; text-align: left; vertical-align: top; color: var(--slate); line-height: 1.6; }
.prose th { color: var(--ink); font-weight: 500; background: var(--off-white); }
.prose h4, .prose h5, .prose h6 { font-family: var(--font-display); font-size: 18px; line-height: 1.4; margin: var(--space-5) 0 var(--space-2); color: var(--ink); }
.post__back { display: inline-block; margin-bottom: var(--space-5); }
.insight__title a { color: inherit; text-decoration: none; transition: color 300ms var(--ease); }
.insight__title a:hover { color: var(--accent-dark); }
a.insight__media { display: block; }

/* ---------- Photographs still to come ----------
   Where a photograph is still to be supplied (the CSR programmes, for which
   project photos must not be used), the panel is set in type instead of
   showing a stand-in picture. It disappears as soon as a photo is chosen. */
.page-hero--plain {
  background:
    radial-gradient(110% 80% at 50% 100%, rgba(201,164,133,0.16) 0%, rgba(201,164,133,0) 62%),
    linear-gradient(to bottom, #0b0d11 0%, #14181f 100%);
}
.page-hero--plain::before { display: none; }
.showcase__media--type {
  display: grid; place-items: center;
  background:
    radial-gradient(90% 70% at 50% 100%, rgba(201,164,133,0.14) 0%, rgba(201,164,133,0) 65%),
    linear-gradient(160deg, #11151b 0%, #1a2029 100%);
  border-radius: var(--radius-media);
}
.showcase__media--type span {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(34px, 4.4vw, 58px); color: var(--accent); letter-spacing: 0.5px;
}

/* ---------- Back to top ---------- */
.to-top {
  --progress: 0;
  position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 60;
  width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(14, 14, 14, 0.86); color: #fff; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 400ms var(--ease), transform 400ms var(--ease), background 300ms var(--ease);
}
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: #0e0e0e; }
.to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.to-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top__ring circle {
  fill: none; stroke: var(--accent); stroke-width: 1.5;
  stroke-dasharray: 138.2; stroke-dashoffset: calc(138.2 * (1 - var(--progress)));
  transition: stroke-dashoffset 120ms linear;
}
.to-top__arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--ease); }
.to-top:hover .to-top__arrow { transform: translateY(-2px); }
.vlightbox-open .to-top, .menu-open .to-top { opacity: 0; pointer-events: none; }
.lead-form__error { color: #c0392b; font-size: 14px; margin: var(--space-2) 0 0; }
.section--dark .lead-form__error { color: #f1a39a; }

/* ---------- Highlighted award (top of the Awards page) ---------- */
.award-feature {
  display: grid; gap: var(--space-5); align-items: center;
  margin-bottom: clamp(36px, 5vw, 64px); padding: clamp(20px, 3vw, 36px);
  background: var(--white); border: 1px solid var(--grey-light); border-radius: var(--radius-media);
}
@media (min-width: 900px) { .award-feature { grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 4vw, 56px); } }
.award-feature__photos { display: grid; gap: var(--space-2); grid-template-columns: 1fr 1fr; }
.award-feature__photos figure { margin: 0; overflow: hidden; border-radius: var(--radius-media); aspect-ratio: 4 / 3; }
.award-feature__photos img { width: 100%; height: 100%; object-fit: cover; }
.award-feature__photos--1 { grid-template-columns: 1fr; }
.award-feature__photos--3 figure:first-child,
.award-feature__photos--1 figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.award-feature__photos--2 figure { aspect-ratio: 3 / 4; }
.award-feature__name { font-family: var(--font-display); font-size: clamp(26px, 3vw, 38px); line-height: 1.2; margin: var(--space-3) 0 var(--space-2); }
.award-feature__meta { font-size: 13px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent-dark); margin-bottom: var(--space-4); }
.award-feature__details p { color: var(--slate); font-size: 15px; line-height: 2; }
.award-feature__details p + p { margin-top: var(--space-3); }
.award-feature__details a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* ---------- Awards grid ---------- */
.awards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (min-width: 760px) { .awards { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
@media (min-width: 1100px) { .awards { grid-template-columns: repeat(4, 1fr); } }
.award {
  background: var(--warm-white); border: 1px solid var(--grey-light);
  border-radius: var(--radius-media); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 400ms var(--ease), box-shadow 500ms var(--ease), transform 500ms var(--ease);
}
.award:hover { border-color: var(--accent); box-shadow: 0 20px 44px -28px rgba(33,37,41,.28); }
.award[data-reveal].is-visible:hover { transform: translateY(-4px); }
.award__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--off-white); }
.award__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms var(--ease); }
.award:hover .award__media img { transform: scale(1.04); }
.award__body { padding: var(--space-4); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.award__year { font-size: 11px; letter-spacing: 2px; color: var(--accent-dark); }
.award__name { font-family: var(--font-display); font-size: 16px; line-height: 1.4; color: var(--ink); }
.award__issuer { font-size: 12px; color: var(--slate); line-height: 1.6; margin-top: auto; }

/* ---------- Entry list (construction updates, careers, journal rows) ---------- */
.entries { border-top: 1px solid var(--grey-light); }
.entry {
  display: grid; grid-template-columns: 1fr; gap: var(--space-3);
  padding: var(--space-6) var(--space-2);
  border-bottom: 1px solid var(--grey-light);
  transition: background 400ms var(--ease);
}
@media (min-width: 800px) { .entry { grid-template-columns: 190px 1fr auto; align-items: start; gap: var(--space-6); } }
.entry:hover { background: #fff; }
.entry__when { font-family: var(--font-display); font-size: 17px; color: var(--accent-dark); }
.entry__where { font-size: 12px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--slate); margin-top: 4px; }
.entry__title { font-family: var(--font-display); font-size: clamp(19px, 2vw, 23px); line-height: 1.35; margin-bottom: var(--space-2); }
.entry__desc { font-size: 14.5px; line-height: 1.9; color: var(--slate); }
.entry__tag {
  align-self: start; white-space: nowrap;
  font-size: 11px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--accent-dark); border: 1px solid var(--grey-light);
  border-radius: var(--radius-pill); padding: 6px 14px;
}
.entry__tag--open { border-color: var(--accent); color: var(--accent-dark); }

/* ---------- Progress bar (construction updates) ---------- */
.progress { margin-top: var(--space-3); }
.progress__track { height: 3px; background: var(--grey-light); border-radius: 3px; overflow: hidden; }
.progress__fill { height: 100%; background: var(--accent); width: 0; transition: width 1400ms var(--ease) 200ms; }
[data-reveal].is-visible .progress__fill,
.entry:hover .progress__fill { width: var(--pct, 0%); }
.progress__label { font-size: 12px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--slate); margin-top: 8px; }

/* ---------- Demo content marker (development only) ---------- */
[data-demo-content] { position: relative; }

/* ==========================================================================
   Construction Updates — a featured latest cut, then a timeline that grows
   downward. Chosen over a card grid because this page accumulates forever:
   a grid of 50 equal cards is unreadable, a dated spine is not.
   ========================================================================== */

/* ---------- Featured latest ---------- */
.cu-latest { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) { .cu-latest { grid-template-columns: 1.35fr 1fr; gap: clamp(40px, 5vw, 80px); } }
.cu-latest__video { aspect-ratio: 16 / 9; border-radius: var(--radius-media); }
.cu-latest__body h2 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.15; margin: var(--space-3) 0; }
.cu-latest__body p { color: var(--slate); line-height: 1.95; }
.cu-latest__hint {
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 1px solid var(--grey-light);
  font-size: 12px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent-dark);
}

/* ---------- Year rail ---------- */
.cu-rail { display: flex; gap: var(--space-3); justify-content: center; margin-bottom: var(--space-7); flex-wrap: wrap; }
.cu-rail__link {
  font-family: var(--font-display); font-size: 15px; letter-spacing: 1px;
  color: var(--slate); border: 1px solid var(--grey-light);
  border-radius: var(--radius-pill); padding: 8px 22px;
  transition: color 350ms var(--ease), border-color 350ms var(--ease), background 350ms var(--ease);
}
.cu-rail__link:hover { color: var(--ink); border-color: var(--accent); background: #fff; }

/* ---------- Timeline ---------- */
.cu-timeline { position: relative; }
/* the spine */
.cu-timeline::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 7px;
  width: 1px; background: linear-gradient(to bottom, transparent, var(--grey-light) 6%, var(--grey-light) 94%, transparent);
}
@media (min-width: 860px) { .cu-timeline::before { left: 172px; } }

.tl-year {
  position: relative; display: flex; align-items: baseline; gap: var(--space-4);
  padding: var(--space-7) 0 var(--space-4) var(--space-6);
}
@media (min-width: 860px) { .tl-year { padding-left: 0; } }
.tl-year__num {
  font-family: var(--font-display); font-size: clamp(30px, 4vw, 46px); color: var(--ink); line-height: 1;
}
@media (min-width: 860px) { .tl-year__num { width: 150px; text-align: right; } }
.tl-year__count { font-size: 12px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent-dark); }

.tl-item { position: relative; padding: 0 0 var(--space-5) var(--space-6); }
@media (min-width: 860px) { .tl-item { padding-left: 0; display: grid; grid-template-columns: 150px 1fr; gap: 44px; } }

/* date column + node on the spine */
.tl-item__date {
  position: relative; font-size: 13px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--slate); padding-bottom: var(--space-2);
}
@media (min-width: 860px) { .tl-item__date { text-align: right; padding-top: var(--space-5); padding-bottom: 0; } }
.tl-item__date::after {
  content: ""; position: absolute; left: -25px; top: 4px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--warm-white); border: 1px solid var(--accent); box-sizing: border-box;
  transition: background 400ms var(--ease), transform 400ms var(--ease);
}
@media (min-width: 860px) { .tl-item__date::after { left: auto; right: -26px; top: calc(var(--space-5) + 4px); } }
.tl-item:hover .tl-item__date::after { background: var(--accent); transform: scale(1.35); }
.tl-item--milestone .tl-item__date::after { background: var(--accent); }

.tl-item__card {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
  padding: var(--space-4); background: var(--warm-white);
  border: 1px solid var(--grey-light); border-radius: var(--radius-media);
  transition: border-color 400ms var(--ease), box-shadow 500ms var(--ease), transform 500ms var(--ease);
}
@media (min-width: 560px) { .tl-item__card { grid-template-columns: 220px 1fr; align-items: center; } }
.tl-item:hover .tl-item__card { border-color: var(--accent); box-shadow: 0 22px 48px -30px rgba(33,37,41,.3); }
.tl-item[data-reveal].is-visible:hover .tl-item__card { transform: translateY(-3px); }
.tl-item--milestone .tl-item__card { background: #fff; }

.tl-item__video { aspect-ratio: 16 / 9; border-radius: 6px; }
.tl-item__body { display: flex; flex-direction: column; gap: 6px; }
.tl-item__kind {
  align-self: start; font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent-dark); border: 1px solid var(--grey-light);
  border-radius: var(--radius-pill); padding: 4px 11px;
}
.tl-item--milestone .tl-item__kind { border-color: var(--accent); }
.tl-item__title { font-family: var(--font-display); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.4; color: var(--ink); }
.tl-item__desc { font-size: 13.5px; line-height: 1.85; color: var(--slate); }

/* Long project names ("Stalwart Bishnupriya Niwas", 25+ characters) wrap to
   three lines at desktop sizes; because the masthead is bottom-aligned, the
   extra line pushes the eyebrow up under the fixed header nav. A step down in
   size keeps them to two lines. Applied per page to names over 22 characters. */
.phero .phero__title.phero__title--long { font-size: clamp(36px, 4.6vw, 68px); line-height: 1.05; }

/* ---------- Video lightbox — small cards open their film large ----------
   Used by .pvideo[data-lightbox] (construction updates). Sits above the
   header, mobile menu and brochure modal. */
.vlightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 56px); }
.vlightbox[hidden] { display: none; }
.vlightbox__backdrop { position: absolute; inset: 0; background: rgba(12, 11, 10, 0.9); backdrop-filter: blur(4px); animation: vlbFade 320ms var(--ease) both; cursor: zoom-out; }
.vlightbox__panel { position: relative; width: min(1120px, 100%); animation: vlbRise 460ms var(--ease) both; }
.vlightbox__frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-media); overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.75); }
.vlightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vlightbox__caption { margin-top: var(--space-3); color: rgba(255, 255, 255, 0.78); font-size: 14px; line-height: 1.6; letter-spacing: 0.3px; }
.vlightbox__close { position: absolute; top: -52px; right: 0; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: transparent; cursor: pointer; transition: border-color 300ms var(--ease), background 300ms var(--ease); }
.vlightbox__close:hover, .vlightbox__close:focus-visible { border-color: var(--accent); background: rgba(201, 164, 133, 0.14); outline: none; }
.vlightbox__close span { position: absolute; top: 50%; left: 50%; width: 16px; height: 1px; background: #fff; }
.vlightbox__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.vlightbox__close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
body.vlightbox-open { overflow: hidden; }
@keyframes vlbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vlbRise { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }

/* Construction-update cards without a video: show the poster as a photo, or
   collapse to a text-only card — never a play button that does nothing. */
.tl-item__photo { margin: 0; overflow: hidden; background: var(--off-white); }
.tl-item__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 560px) { .tl-item__card--text { grid-template-columns: 1fr; } }