/* =========================================================================
   LA MAJESTE GROUP (MEK) — enhancements stylesheet

   Additive only: everything here layers on top of css/styles.css and reuses
   the same design tokens (--slate*, --limestone, --marigold*, --teal*, etc.)
   defined in that file's :root block. No new colours are introduced.
   ========================================================================= */

/* Compensate anchor-jump targets for the sticky header+marquee stack
   (~167px tall at desktop: 36px marquee + ~131px header/toggle). */
#homes,#offices,#distances,#corridor,#gallery,#questions,#enquire,#payment-plan{
  scroll-margin-top:167px;
}
@media (max-width:940px){
  #homes,#offices,#distances,#corridor,#gallery,#questions,#enquire,#payment-plan{
    scroll-margin-top:var(--sticky-stack-h,177px);
  }
}

/* ---------- Scroll progress bar ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--marigold),var(--teal-lt));
  z-index:210;transition:width .1s linear;
}

/* ---------- View focus toggle ---------- */
.view-toggle{
  display:flex;gap:2px;justify-content:center;
  background:var(--slate-deep);border-top:1px solid var(--slate-line);
  padding:8px var(--gutter);
}
/* On mobile, keep this row visible alongside the marquee and header while
   scrolling instead of letting it scroll away — sticks directly below
   the marquee+header stack using the height JS measures into
   --head-stack-h (see syncStickyStackHeight in js/enhancements.js). */
@media (max-width:940px){
  .view-toggle{position:sticky;top:var(--head-stack-h,110px);z-index:79;}
}
.view-btn{
  background:transparent;border:1px solid transparent;border-radius:100px;
  color:var(--text-mute);font-size:.8rem;font-weight:600;padding:6px 16px;
  cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.view-btn:hover{color:var(--text-light);}
.view-btn.is-active{background:var(--marigold);color:#16262B;border-color:var(--marigold);}
@media (max-width:480px){
  .view-toggle{padding:6px var(--gutter);}
  .view-btn{padding:6px 12px;font-size:.76rem;}
}


/* ---------- Identity banner + RERA badge row ----------
   The badge sits as a plain right-hand flex column next to the
   identity-banner's text — no position:absolute/fixed/float anywhere.
   That means it's genuinely part of this row: it scrolls away with it,
   can never drift out of sync with the sticky header above (every
   earlier attempt that used absolute/fixed/float eventually landed
   somewhere it shouldn't, because its offset was measured against
   something other than this exact row), and needs no JS-measured
   offset to line up correctly. */
.identity-banner-in{
  position:relative;display:flex;align-items:center;justify-content:center;
  gap:24px;flex-wrap:wrap;
}
.identity-banner-text{flex:1 1 auto;min-width:0;}

/* ---------- RERA verification badge ----------
   One card, two rows side by side: each row is a QR code with its
   MahaRERA number and project label underneath (residential on the
   left, commercial on the right). Dual-glow gradient background +
   marigold/teal top accent bar mirror the identity-banner's own visual
   language instead of a flat slate card, so the badge reads as
   designed rather than bolted on. */
.rera-badge--fixed{
  flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:9px 9px;border-radius:9px;position:relative;
  background:
    radial-gradient(ellipse 120% 80% at 20% 0%, rgba(227,169,40,.16), transparent 60%),
    radial-gradient(ellipse 120% 80% at 80% 100%, rgba(62,139,130,.16), transparent 60%),
    var(--slate-deep);
  border:1px solid var(--slate-line);
  box-shadow:0 10px 24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
.rera-badge--fixed::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--marigold),var(--teal));
}
.rera-badge-heading{
  font-family:var(--body);font-size:.46rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);
  margin:0 0 4px;
}
.rera-badge-rows{display:flex;flex-direction:row;align-items:flex-start;gap:10px;}
.rera-badge-row{
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.rera-badge img{
  display:block;width:36px;height:36px;object-fit:cover;
  border-radius:4px;flex-shrink:0;
  background:#fff;padding:2px;
  box-shadow:0 3px 10px rgba(0,0,0,.3);
}
.rera-badge-num{
  font-family:var(--body);font-size:.48rem;font-weight:700;
  letter-spacing:.01em;color:var(--text-light);white-space:nowrap;
}
.rera-badge-label{
  font-family:var(--body);font-size:.46rem;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;
  padding:1px 6px;border-radius:999px;line-height:1.4;
}
.rera-badge-label--home{color:var(--marigold-lt);background:rgba(227,169,40,.14);}
.rera-badge-label--office{color:var(--teal-lt);background:rgba(62,139,130,.16);}
.rera-badge-divider{
  width:1px;height:auto;align-self:stretch;margin:0;
  background:linear-gradient(180deg,transparent,var(--slate-line),transparent);
}
/* Below 900px the identity-banner row stacks: text on top, badge
   centered below it, both still in normal flow. Both QR rows already
   lay out side by side at every width (see .rera-badge-rows above), so
   only sizing/positioning changes here, not orientation. clamp()/vw
   sizing scales smoothly across phone widths instead of jumping at a
   single breakpoint. */
@media (max-width:900px){
  .identity-banner-in{flex-direction:column;gap:16px;}
  .rera-badge--fixed{
    margin:0 auto;
    flex-direction:column;align-items:center;
    padding:clamp(8px,2.6vw,12px) clamp(10px,3.4vw,16px);
    width:max-content;max-width:92vw;
  }
  .rera-badge-heading{font-size:clamp(.5rem,2.6vw,.62rem);margin-bottom:6px;}
  .rera-badge-rows{gap:clamp(10px,4vw,20px);}
  .rera-badge-row{gap:3px;}
  .rera-badge img{width:clamp(38px,11vw,52px);height:clamp(38px,11vw,52px);padding:3px;}
  .rera-badge-num{font-size:clamp(.5rem,2.2vw,.6rem);}
  .rera-badge-label{font-size:clamp(.46rem,2vw,.56rem);padding:1px 6px;white-space:nowrap;}
}

/* ---------- Focused detail blocks (specs table + timeline) ----------
   These sit inside each project's <section> in normal flow. In the "All"
   view they stay collapsed to a compact summary strip so the default page
   is not lengthened for a visitor who has not chosen a focus. Selecting
   "Homes" or "Offices" expands that project's own block into the fuller
   specs table + timeline; the other project's entire section is hidden via
   display:none (rule above) rather than removed, so content never leaves
   the DOM/markup — only its rendering is toggled. */
.focus-detail{
  position:relative;z-index:1;margin-top:36px;padding-top:28px;
  border-top:1px solid var(--slate-line-soft);
}
.dark .focus-detail{border-top-color:var(--slate-line);}
.focus-detail .eyebrow{margin-bottom:12px;}
.focus-detail h3{margin-bottom:18px;max-width:26ch;}
.focus-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:start;}

.specs-table{width:100%;border-collapse:collapse;font-size:.92rem;}
@media (max-width:640px){
  /* .price-drop's del+strong pair used to wrap inconsistently between
     table rows depending on how long the specific price text happened to
     be (e.g. "₹1.96 Crore ₹1.82 Cr" wraps, "₹92 Lakh ₹1.22 Cr" doesn't) —
     forcing them onto their own stacked line always keeps every row the
     same shape. */
  .specs-table .price-drop{display:flex;flex-direction:column;align-items:flex-start;gap:2px;}
}
.specs-table th,.specs-table td{
  text-align:left;padding:9px 10px 9px 0;border-bottom:1px solid var(--slate-line-soft);
  font-weight:400;
}
.dark .specs-table th,.dark .specs-table td{border-bottom-color:var(--slate-line);}
.specs-table th{color:var(--text-mute);font-size:.84rem;width:44%;}
.specs-table td{color:var(--text-light);}
.specs-table tr:last-child th,.specs-table tr:last-child td{border-bottom:0;}

.project-timeline{display:grid;gap:16px;position:relative;padding-left:22px;}
.project-timeline::before{
  content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--slate-line-soft);
}
.dark .project-timeline::before{background:var(--slate-line);}
.project-timeline li{position:relative;display:flex;flex-direction:column;gap:2px;}
.project-timeline li::before{
  content:"";position:absolute;left:-22px;top:4px;width:11px;height:11px;border-radius:50%;
  background:var(--slate-black);border:2px solid var(--slate-line);
}
.dark .project-timeline li::before{background:var(--slate-deep);}
.project-timeline li.is-done::before{border-color:var(--marigold-dim);background:var(--marigold-dim);}
.project-timeline li.is-current::before{border-color:var(--marigold);background:var(--marigold);}
.dark .project-timeline li.is-done::before{border-color:var(--teal-dim);background:var(--teal-dim);}
.dark .project-timeline li.is-current::before{border-color:var(--teal);background:var(--teal);}
.pt-when{font-size:.78rem;color:var(--text-mute);text-transform:uppercase;letter-spacing:.06em;}
.project-timeline li.is-current .pt-when{color:var(--marigold-lt);}
.dark .project-timeline li.is-current .pt-when{color:var(--teal-lt);}
.pt-what{font-size:.94rem;color:var(--text-light);}

.focus-note{margin-top:22px;font-size:.86rem;color:var(--text-mute);font-style:italic;}

@media (max-width:720px){
  .focus-grid{grid-template-columns:1fr;gap:26px;}
}

/* Each project's own focus-detail block gets a quiet permanent highlight
   in its accent colour — always shown now, not just when explicitly
   focused via the (now scroll-only) toggle. */
[data-project="homes"] .focus-detail{border-top-color:var(--marigold-dim);}
[data-project="offices"] .focus-detail{border-top-color:var(--teal-dim);}

/* ---------- Scroll reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  [data-reveal]{
    opacity:0;transform:translateY(28px);
    transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);
  }
  [data-reveal].is-visible{opacity:1;transform:none;}

  /* Opt-in horizontal variants — same attribute, same JS (an attribute
     selector matches regardless of value, and js/enhancements.js's
     reveal() only ever toggles .is-visible), just a different starting
     transform so paired elements can enter from opposite sides. */
  [data-reveal="left"]{transform:translateX(-40px);}
  [data-reveal="left"].is-visible{transform:none;}
  [data-reveal="right"]{transform:translateX(40px);}
  [data-reveal="right"].is-visible{transform:none;}
}
/* If JavaScript never runs (blocked, fails to load, disabled), content must
   not stay invisible — js/enhancements.js is what adds .is-visible. */
.no-js [data-reveal]{opacity:1;transform:none;}

/* ---------- Hero parallax ---------- */
.hero-bg img{will-change:transform;}

/* ---------- Floor-plan hotspots ---------- */
.floorplan-wrap{position:relative;}
.floorplan-wrap img{width:100%;}
.hotspot{
  position:absolute;transform:translate(-50%,-50%);
  width:26px;height:26px;border-radius:50%;
  background:rgba(227,169,40,.92);border:2px solid #16262B;
  cursor:pointer;padding:0;
  box-shadow:0 0 0 0 rgba(227,169,40,.55);
}
@media (pointer:coarse){
  .hotspot{width:36px;height:36px;}
}
.hotspot::before{
  content:"+";display:block;text-align:center;line-height:22px;
  font-size:1rem;font-weight:700;color:#16262B;
}
.hotspot:hover,.hotspot:focus-visible{background:var(--marigold-lt);}
@media (prefers-reduced-motion:no-preference){
  .hotspot{animation:hotspot-pulse 2.4s ease-in-out infinite;transition:background .16s ease;}
}
@keyframes hotspot-pulse{
  0%{box-shadow:0 0 0 0 rgba(227,169,40,.5);}
  70%{box-shadow:0 0 0 10px rgba(227,169,40,0);}
  100%{box-shadow:0 0 0 0 rgba(227,169,40,0);}
}
.hotspot-tip{
  position:absolute;z-index:20;min-width:180px;max-width:240px;
  background:#16262B;color:var(--text-light);border-radius:4px;
  padding:11px 13px;font-size:.82rem;line-height:1.45;
  box-shadow:0 14px 34px rgba(0,0,0,.4);
  transform:translate(-50%,calc(-100% - 16px));
}
.hotspot-tip::after{
  content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:#16262B;
}
.hotspot-tip strong{display:block;color:var(--marigold-lt);font-size:.78rem;margin-bottom:3px;}
.hotspot-tip .placeholder-flag{display:block;margin-top:6px;font-size:.7rem;color:var(--text-mute);font-style:italic;}

/* ---------- Floor plan switcher (#floorplan) ----------
   Purpose-built multi-option selector (~10 options: 8 residential incl. two
   "on request" placeholders, 1 commercial) — driven by fpSwitcher() in
   js/enhancements.js. Visually it borrows the .amen-tab active/inactive
   language (accent-filled box vs outlined) so it still reads as the same
   design system, but the option ROW itself is a horizontal scroll-rail
   rather than a wrapping tab list: at ~10 options a wrap gets tall and
   fussy, while a scroll-rail (same technique already used for
   .timeline[data-timeline] above) stays one tidy row at every width and
   scales down cleanly to a phone without a dropdown or accordion. */
.fp-switcher{margin-top:8px;}
.fp-optlist{margin-bottom:32px;}
.fp-optlist-heading{
  font-family:var(--body);font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--marigold-lt);margin:0 0 12px;
}
.fp-optlist-heading--office{margin-top:22px;color:var(--teal-lt);}
.fp-opts{
  display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:6px;margin:0 -4px;padding-left:4px;padding-right:4px;
  scrollbar-color:var(--marigold-dim) transparent;
}
.fp-opts--office{scrollbar-color:var(--teal-dim) transparent;}
.fp-opts::-webkit-scrollbar{height:6px;}
.fp-opts::-webkit-scrollbar-thumb{background:var(--slate-line);border-radius:100px;}
.fp-opt{
  flex:0 0 auto;scroll-snap-align:start;white-space:nowrap;
  background:transparent;border:1px solid var(--slate-line);border-radius:100px;
  color:var(--text-mute);font-family:var(--body);font-size:.82rem;font-weight:700;
  padding:10px 18px;cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.fp-opt:hover{color:var(--text-light);border-color:var(--marigold);}
.fp-opt.is-active{background:var(--marigold);color:#16262B;border-color:var(--marigold);}
.fp-opt:focus-visible{outline:2px solid var(--marigold-lt);outline-offset:2px;}
.fp-opt--office:hover{border-color:var(--teal);}
.fp-opt--office.is-active{background:var(--teal);color:#0A1114;border-color:var(--teal);}
.fp-opt--office:focus-visible{outline-color:var(--teal-lt);}
/* "Coming soon" options get a dashed border so it's visually obvious,
   before you even click, that these are placeholders rather than the same
   kind of option as the rest. */
.fp-opt--soon{border-style:dashed;}
.fp-opt--soon.is-active{border-style:solid;}

.fp-stage{position:relative;min-height:120px;}
.fp-panel{display:flex;flex-direction:column;align-items:center;gap:22px;}
.fp-panel[hidden]{display:none;}

/* Crossfade + gentle rise on panel swap, driven by JS toggling .is-active
   after the [hidden] attribute is cleared (see fpSwitcher() in
   js/enhancements.js) — same transition recipe as .amen-panel above so the
   motion language matches across the page. */
@media (prefers-reduced-motion:no-preference){
  .fp-panel{
    opacity:0;transform:translateY(14px);
    transition:opacity .38s cubic-bezier(.2,.7,.3,1),transform .38s cubic-bezier(.2,.7,.3,1);
  }
  .fp-panel.is-active{opacity:1;transform:none;}
}
.no-js .fp-panel{opacity:1;transform:none;}
.no-js .fp-panel[hidden]{display:flex;}
.no-js .fp-opts{display:none;}
.no-js .fp-optlist-heading{margin-top:28px;}
.no-js .fp-panel+.fp-panel{margin-top:28px;padding-top:28px;border-top:1px solid var(--slate-line-soft);}

/* Light-toned frame around each PNG: the source images have a warm
   beige/cream background (unlike this site's dark theme), so each one gets
   a dark-to-light vignette card rather than floating as a jarring light
   rectangle — the same idea as .floorplan-stage used for the SVGs. */
.fp-frame{
  position:relative;width:100%;max-width:760px;margin:0;
  background:linear-gradient(155deg,rgba(227,169,40,.14),transparent 60%),var(--slate-soft);
  border:1px solid var(--slate-line);border-radius:10px;
  padding:clamp(16px,3.4vw,34px);
  box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.fp-frame img{display:block;width:100%;height:auto;border-radius:4px;}

/* Two floor plans stacked vertically (2 BHK above, 3 BHK below), used in
   the residential project-media column. */
.fp-stack{display:flex;flex-direction:column;gap:18px;}
.fp-frame--svg{background:linear-gradient(155deg,rgba(227,169,40,.14),transparent 60%),var(--slate-soft);padding:clamp(20px,4vw,48px);}
.fp-frame--office,.fp-panel--office .fp-frame{
  background:linear-gradient(155deg,rgba(62,139,130,.18),transparent 60%),var(--slate-soft);
}
.fp-caption{
  text-align:center;font-size:.86rem;font-weight:600;
  color:var(--text-mute);letter-spacing:.02em;
}

/* "On request" placeholder state for 4/5 BHK Jodi — intentional and
   on-brand (matches .fp-frame's dark-cinematic card language) rather than
   a blank space or a broken image. */
.fp-soon{
  width:100%;max-width:560px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  background:linear-gradient(155deg,rgba(227,169,40,.12),transparent 60%),var(--slate-soft);
  border:1px dashed var(--slate-line);border-radius:10px;
  padding:clamp(36px,6vw,64px) clamp(24px,5vw,48px);
}
.fp-soon-icon{width:44px;height:44px;color:var(--marigold-lt);}
.fp-soon-title{font-family:var(--display);font-size:clamp(1.2rem,2.4vw,1.5rem);color:var(--text-light);margin:0;}
.fp-soon-text{font-size:.92rem;color:var(--text-mute);margin:0;max-width:38ch;}

@media (max-width:640px){
  .fp-opt{padding:9px 15px;font-size:.78rem;}
}

/* ---------- Animated stat counters (glance strip) ----------
   Left column: residential row stacked directly above the commercial
   row. Right column: the shared "combined land" stat, vertically
   centered so it sits level with both rows at once rather than taking
   a row of its own. */
.glance{background:var(--slate-soft);border-bottom:1px solid var(--slate-line);padding:48px 0;}
.glance-in{display:grid;grid-template-columns:1fr auto;gap:40px;}
.glance-rows{display:flex;flex-direction:column;gap:36px;justify-content:center;}
.glance-row-label{
  display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--marigold-lt);text-align:center;margin:0 auto 18px;padding:5px 14px;border-radius:999px;
  background:rgba(227,169,40,.12);border:1px solid rgba(227,169,40,.35);
}
.glance-rows .glance-row-label:nth-of-type(2){color:var(--teal-lt);background:rgba(62,139,130,.14);border-color:rgba(62,139,130,.4);}
.glance-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center;align-items:end;}
.glance-stat{display:flex;flex-direction:column;justify-content:flex-end;height:100%;}
.glance-stat dd{font-family:var(--display);font-size:clamp(2rem,3.8vw,2.8rem);color:var(--marigold-lt);}
.glance-stat dt{font-size:.78rem;color:var(--text-mute);margin-top:6px;text-transform:uppercase;letter-spacing:.08em;}
.glance-stat--shared{
  display:flex;flex-direction:column;justify-content:center;
  text-align:center;padding-left:40px;border-left:1px solid var(--slate-line);
}
.glance-remaining{
  display:inline-flex;align-items:center;gap:6px;align-self:center;
  width:max-content;max-width:100%;
  font-size:.76rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#ffb020;margin-bottom:8px;padding:5px 12px;border-radius:999px;
  background:rgba(255,90,40,.14);border:1px solid rgba(255,140,40,.4);
  box-shadow:0 0 18px rgba(255,120,40,.25);
}
.glance-remaining-dot{
  width:7px;height:7px;border-radius:50%;background:#ff5a28;flex-shrink:0;
  box-shadow:0 0 0 rgba(255,90,40,.6);
  animation:glance-pulse 1.6s ease-out infinite;
}
@keyframes glance-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,90,40,.6);}
  70%{box-shadow:0 0 0 7px rgba(255,90,40,0);}
  100%{box-shadow:0 0 0 0 rgba(255,90,40,0);}
}
.glance-stat dd.is-struck{color:var(--marigold-lt);}
.glance-stat dd.is-struck del{text-decoration-thickness:1.5px;text-decoration-color:var(--text-faint);}
@media (prefers-reduced-motion: reduce){
  .glance-remaining-dot{animation:none;}
}
@media (max-width:820px){
  .glance-in{grid-template-columns:1fr;gap:32px;}
  .glance-row{grid-template-columns:1fr 1fr;}
  .glance-stat--shared{padding-left:0;border-left:none;padding-top:28px;border-top:1px solid var(--slate-line);}
}
@media (max-width:480px){.glance-row{grid-template-columns:1fr;gap:32px;}}

/* ---------- Micro-interactions ---------- */
.amenities,.spec li,.ledger-col li{transition:color .16s ease;}
.pricing tr{transition:background .16s ease;}
.pricing tbody tr:hover{background:rgba(227,169,40,.08);}
.dark .pricing tbody tr:hover{background:rgba(111,176,166,.1);}
.gal figure{transition:transform .3s ease;}
@media (prefers-reduced-motion:no-preference){
  .gal img{transition:transform .5s cubic-bezier(.2,.7,.3,1);}
  .gal figure:hover img{transform:scale(1.06);}
}
.foot-brand,.brand-name{transition:color .16s ease;}

/* ---------- Distance ledger interactive controls ---------- */
.ledger-controls{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--slate-line);
}
.ledger-filters{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  background:transparent;border:1px solid var(--slate-line);border-radius:100px;
  color:var(--text-mute);font-size:.82rem;padding:7px 15px;cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.chip:hover{border-color:var(--marigold);color:var(--text-light);}
.chip.is-active{background:var(--marigold);border-color:var(--marigold);color:#16262B;}
.ledger-sort{font-size:.82rem;color:var(--text-mute);display:flex;align-items:center;gap:8px;}
.ledger-sort select{
  background:var(--slate);border:1px solid var(--slate-line);color:var(--text-light);
  border-radius:var(--radius);padding:7px 10px;
}
.ledger-col{transition:opacity .25s ease,transform .25s ease;}
.ledger-col.is-hidden{display:none;}
.ledger-col li.is-hidden{display:none;}

/* ---------- Horizontal scroll-linked timeline ---------- */
.timeline-scroller{position:relative;}
.timeline-track{
  height:4px;background:var(--slate-line);border-radius:100px;margin-bottom:28px;overflow:hidden;
}
.timeline-track-fill{
  height:100%;width:0%;background:linear-gradient(90deg,var(--teal),var(--marigold));
  border-radius:100px;transition:width .1s linear;
}
/* The timeline is always a horizontal scroll rail now (replacing the old
   static 3-col grid at any width): each entry gets a generous fixed width
   so the row overflows and becomes scrollable, with the fill bar above
   tracking scroll progress. */
.timeline[data-timeline]{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(82%,360px);
  grid-template-columns:none;
  overflow-x:auto;scroll-snap-type:x proximity;gap:34px;
  padding-bottom:14px;
  scrollbar-color:var(--teal) transparent;
}
.timeline[data-timeline] li{scroll-snap-align:start;}
.timeline[data-timeline]::-webkit-scrollbar{height:6px;}
.timeline[data-timeline]::-webkit-scrollbar-thumb{background:var(--slate-line);border-radius:100px;}
.timeline-hint{font-size:.78rem;color:var(--text-mute);margin-top:4px;}
@media (min-width:640px){
  .timeline[data-timeline]{grid-auto-columns:min(48%,340px);}
}

/* ---------- Distance/dimension placeholder tag on hotspots (accessibility) ---------- */
.hotspot[aria-expanded="true"]{background:var(--marigold-lt);}

@media (prefers-reduced-motion:reduce){
  .hotspot{animation:none;}
}

/* ---------- Enquiry popup (auto-opens after 20s, see js/enhancements.js) ---------- */
.popup-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(6,10,12,.72);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.popup-overlay[hidden]{display:none;}
/* .popup-shell is the outer, non-clipping wrapper: it positions the close
   button so the button is never cut off by the card's own overflow/scroll
   box (that clipping was why the "×" looked cut in half before). */
.popup-shell{
  position:relative;width:100%;max-width:440px;
  animation:popup-in .32s cubic-bezier(.2,.7,.3,1);
}
.popup-card{
  width:100%;max-height:94vh;overflow-y:auto;overflow-x:hidden;
  border-radius:10px;
  background:linear-gradient(145deg,var(--marigold),var(--teal));
  padding:1.5px;
  box-shadow:0 40px 100px rgba(0,0,0,.6);
  /* Thin, theme-coloured scrollbar instead of the bulky default OS one —
     this only ever shows on short viewports where the form genuinely
     can't fit; most visitors never see it. */
  scrollbar-width:thin;scrollbar-color:var(--marigold) transparent;
}
.popup-card::-webkit-scrollbar{width:6px;height:0;}
.popup-card::-webkit-scrollbar-track{background:transparent;}
.popup-card::-webkit-scrollbar-thumb{background:var(--marigold-dim);border-radius:100px;}
.popup-card::-webkit-scrollbar-thumb:hover{background:var(--marigold);}
/* The gradient lives on the wrapper; the card itself sits 1.5px inset so
   only a thin luminous edge shows, like a premium invitation card. */
.popup-card .formcard{
  margin:0;border-radius:9px;padding:28px 26px;
  background:var(--slate-deep);color:var(--text-light);
  position:relative;overflow:hidden;
}
.popup-card .formcard-note{margin-bottom:16px;}
.popup-card .lead-form label{margin-bottom:4px;}
.popup-card .lead-form input,
.popup-card .lead-form select{padding:10px 12px;margin-bottom:10px;}
.popup-card .formcard::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% -10%,rgba(227,169,40,.16),transparent 65%);
}
.popup-card .formcard-title{
  position:relative;color:var(--text-light);
  font-size:1.5rem;
}
.popup-card .formcard-note{position:relative;color:var(--text-mute);}
.popup-card .lead-form label{color:var(--text-faint);}
.popup-card .lead-form input,
.popup-card .lead-form select{
  position:relative;background:var(--limestone);border-color:var(--slate-line-soft);
}
.popup-card .fineprint{position:relative;color:var(--text-faint);}
.popup-card .msg-ok{background:var(--teal-dim);color:var(--text-light);border-color:var(--teal);}
.popup-card .msg-err{background:#3A1E1E;color:#F4C4C4;border-color:#8A3A3A;}
.popup-close{
  position:absolute;top:-16px;right:-16px;z-index:2;
  width:36px;height:36px;border-radius:50%;
  background:var(--slate-black,#0A1114);color:var(--text-light);
  border:2px solid var(--slate-deep);font-size:1.4rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .16s ease,background .16s ease;
}
.popup-close:hover{transform:scale(1.08);background:var(--marigold);color:#16262B;}
@keyframes popup-in{
  from{opacity:0;transform:translateY(18px) scale(.97);}
  to{opacity:1;transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .popup-shell{animation:none;}
}
@media (max-width:480px){
  .popup-close{top:-12px;right:-4px;}
}

/* ---------- Identity banner: "Homes + Offices = MEK Grand City" ----------
   A quiet, confident equation rather than a plain text strip: a soft dual-
   glow backdrop (marigold left, teal right) meeting in the middle behind a
   pill-shaped card, each term colour-coded, the sum treated as the largest,
   brightest element with a gold underline so the eye lands there last. */
.identity-banner{
  position:relative;overflow:hidden;
  margin:0;padding:16px var(--gutter) 18px;
  background:var(--slate-deep);
  border-bottom:1px solid var(--slate-line);
  text-align:center;
}
.identity-banner::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 46% 140% at 14% 50%, rgba(227,169,40,.16), transparent 70%),
    radial-gradient(ellipse 46% 140% at 86% 50%, rgba(62,139,130,.16), transparent 70%);
}
.identity-eyebrow{
  position:relative;margin:0 0 12px;
  font-family:var(--body);font-size:.7rem;font-weight:700;
  letter-spacing:var(--eyebrow-tracking,.22em);text-transform:uppercase;
  color:var(--text-faint);
}
.identity-row{
  position:relative;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:12px 18px;
}
.identity-term{display:flex;flex-direction:column;align-items:center;gap:3px;}
.identity-part{
  font-family:var(--display);font-size:clamp(1.1rem,2.6vw,1.5rem);
  letter-spacing:.01em;line-height:1.15;
}
.identity-part--home{color:var(--marigold-lt);}
.identity-part--office{color:var(--teal-lt);}
.identity-tag{
  font-family:var(--body);font-size:.68rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
}
.identity-tag--home{color:var(--marigold);}
.identity-tag--office{color:var(--teal);}
.identity-op{
  align-self:center;
  color:var(--text-faint);font-size:1rem;font-family:var(--body);
}
.identity-part--sum{
  color:var(--text-light);font-weight:600;
  font-size:clamp(1.3rem,3.4vw,1.9rem);
  padding:2px 4px 6px;position:relative;
}
.identity-part--sum::after{
  content:"";position:absolute;left:2px;right:2px;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--marigold),var(--teal));
  border-radius:2px;
}
@media (max-width:560px){
  .identity-banner{padding:22px var(--gutter) 26px;}
  .identity-row{gap:8px 12px;}
}

/* ---------- Hallmarks showcase ----------
   REDESIGNED from a horizontal scroll-snap strip (below, kept as history in
   this comment) into a full-width bento grid, per direct user feedback: the
   scroll strip hid most of the 7 tiles off-screen on wide desktop viewports,
   under-using available width and reading as sparse/empty until a visitor
   discovered the sideways scroll hint. The bold-numeral concept itself is
   kept exactly as asked — only the layout changes.
     - Desktop: a 4-column grid where the first (most quotable) stat per
       project becomes a "hero" tile spanning 2 columns/2 rows with a larger
       numeral, and the remaining six fill in around it — so the same
       oversized-numeral hierarchy the old strip had (some tiles bigger than
       others) survives, but every tile is visible at once with no scroll
       gesture required.
     - Tablet: collapses to 2 columns; the hero tile still spans 2.
     - Mobile: collapses to a single column stack (still degrades gracefully
       without a horizontal scroll, per the brief).
     - hand-authored line-art SVG icons unchanged.
     - staggered scroll-reveal unchanged in spirit: the whole block is still
       one [data-reveal] target (no JS change needed) and each tile still
       gets its own nth-child transition-delay so tiles settle in one after
       another rather than all at once.
   Residential uses the marigold accent system; commercial swaps to teal via
   the .hallmarks--office variant, mirroring .project.light/.dark. */
.hallmarks{
  position:relative;z-index:1;margin-top:56px;padding-top:44px;
  border-top:1px solid var(--slate-line-soft);
}
.dark .hallmarks{border-top-color:var(--slate-line);}
.hallmarks-head{margin-bottom:24px;}
.hallmarks-head .eyebrow{margin-bottom:14px;}
.hallmarks-head h3{max-width:26ch;}

/* Bento-style grid of bold stat tiles, replacing the old .h-scroller/.h-strip
   horizontal scroll rail. 4 columns wide enough to show all 7 tiles with no
   sideways scrolling; the hero tile (first child) spans 2x2 to preserve the
   "some numbers are bigger than others" hierarchy the old strip had. */
/* 7 tiles total (1 hero at 2x2 + 6 regular at 1x1) need 10 grid cells; a
   4-column grid gives 12 cells across 3 rows, leaving 2 spare in the last
   row. Rather than leave that as a visible gap, the final two tiles each
   span 2 columns so the last row fills edge-to-edge like the first two. */
.h-strip{
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;
  gap:14px;list-style:none;padding:0;margin:0;
}
.h-strip .h-tile:nth-child(6),
.h-strip .h-tile:nth-child(7){grid-column:span 2;}
.h-tile{
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  background:linear-gradient(155deg,rgba(227,169,40,.16),transparent 60%),var(--slate);
  border:1px solid var(--slate-line-soft);border-radius:8px;
  padding:24px 22px;min-height:150px;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .22s ease,box-shadow .22s ease;
}
.dark .h-tile{background:linear-gradient(155deg,rgba(227,169,40,.16),transparent 60%),var(--slate-soft);border-color:var(--slate-line);}
.hallmarks--office .h-tile{
  background:linear-gradient(155deg,rgba(62,139,130,.2),transparent 60%),var(--slate);
}
.dark .hallmarks--office .h-tile{background:linear-gradient(155deg,rgba(62,139,130,.2),transparent 60%),var(--slate-soft);}

/* Hero tile: the first, most quotable stat gets 2x2 of the grid and a
   bigger numeral, so the layout keeps the old strip's "one number reads as
   the headline" hierarchy device without hiding the rest off-screen. The
   card's own icon is echoed hugely, faintly, top-right (the same oversized
   ghost-outline device used for .project-tag/.amen-numeral elsewhere on the
   page) so the taller 2x2 card reads as a deliberate feature panel rather
   than mostly empty background above the bottom-anchored number. */
.h-tile--hero{
  grid-column:span 2;grid-row:span 2;justify-content:flex-end;padding:30px 26px;
  position:relative;overflow:hidden;
}
.h-tile--hero .h-num{font-size:clamp(2.8rem,6vw,4.2rem);position:relative;z-index:1;}
.h-tile--hero .h-text{position:relative;z-index:1;max-width:22ch;}
.h-tile--hero .h-icon-ghost{
  position:absolute;top:-6%;right:-6%;width:62%;height:62%;
  color:var(--marigold-lt);opacity:.1;pointer-events:none;
}
.hallmarks--office .h-tile--hero .h-icon-ghost{color:var(--teal-lt);}
.h-tile--hero .h-icon-ghost svg{width:100%;height:100%;}

.h-icon svg{width:100%;height:100%;}

.h-num{
  font-family:var(--display);font-size:clamp(2.1rem,5vw,2.7rem);line-height:1;
  color:var(--marigold-lt);white-space:nowrap;
}
.hallmarks--office .h-num{color:var(--teal-lt);}
.h-num--frac{font-size:clamp(1.5rem,3.6vw,1.9rem);}
.h-num--small{font-size:clamp(1.3rem,3.2vw,1.6rem);}

.h-text{font-size:.94rem;color:var(--text-mute);line-height:1.4;}

/* Hover/focus: lift + glow, matching .hotspot / .view-btn / .pricing row
   elsewhere on the page. */
@media (hover:hover){
  .h-tile:hover{
    transform:translateY(-4px);
    border-color:rgba(227,169,40,.5);
    box-shadow:0 18px 40px rgba(0,0,0,.35);
  }
  .hallmarks--office .h-tile:hover{border-color:rgba(127,194,183,.55);}
}
.h-tile:focus-within{border-color:var(--marigold);outline:none;}
.hallmarks--office .h-tile:focus-within{border-color:var(--teal);}

/* Staggered reveal: the parent .hallmarks block is the single [data-reveal]
   target (so JS/IntersectionObserver wiring needs no change); once it
   gains .is-visible each tile fades/rises in turn via nth-child delay. */
@media (prefers-reduced-motion:no-preference){
  .h-tile{opacity:0;transform:translateY(18px);
    transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1),
               border-color .22s ease,box-shadow .22s ease;
  }
  .hallmarks.is-visible .h-tile{opacity:1;transform:none;}
  .hallmarks.is-visible .h-tile:nth-child(1){transition-delay:.05s;}
  .hallmarks.is-visible .h-tile:nth-child(2){transition-delay:.12s;}
  .hallmarks.is-visible .h-tile:nth-child(3){transition-delay:.19s;}
  .hallmarks.is-visible .h-tile:nth-child(4){transition-delay:.26s;}
  .hallmarks.is-visible .h-tile:nth-child(5){transition-delay:.33s;}
  .hallmarks.is-visible .h-tile:nth-child(6){transition-delay:.4s;}
  .hallmarks.is-visible .h-tile:nth-child(7){transition-delay:.47s;}
}
.no-js .h-tile{opacity:1;transform:none;}

@media (max-width:900px){
  .h-strip{grid-template-columns:repeat(2,1fr);}
  .h-tile--hero{grid-column:span 2;grid-row:span 1;}
  .h-tile--hero .h-num{font-size:clamp(2.4rem,5.4vw,3rem);}
  /* 2 columns: hero (2 cells) + 6 regular tiles (6 cells) = 8 cells exactly,
     4 even rows with no gap — the desktop-only last-row-widen fix is not
     needed here. */
  .h-strip .h-tile:nth-child(6),
  .h-strip .h-tile:nth-child(7){grid-column:span 1;}
}
@media (max-width:640px){
  .hallmarks{margin-top:44px;padding-top:36px;}
  .h-strip{grid-template-columns:1fr;gap:12px;}
  .h-tile--hero{grid-column:span 1;}
  .h-tile{padding:20px 18px;min-height:0;}
  .h-tile--hero{padding:22px 20px;}
  .h-strip .h-tile:nth-child(6),
  .h-strip .h-tile:nth-child(7){grid-column:span 1;}
}

/* ---------- Amenities showcase (tabbed list + image) ----------
   Adapts the "category tabs swap a list + a photo" interaction pattern
   from a reference competitor site, rebuilt with this site's own dark
   palette/type system and this project's actual amenity data (which is
   much smaller than the reference's — three real categories, two or three
   items each, at most one genuinely matching photo). Tab buttons reuse the
   pill/active-state language of .view-btn/.chip; each panel re-presents
   the same .amenity-group markup already used in the static list above
   (same h3->h4 content, just re-parented), so nothing here is a new fact.
   Residential uses marigold; commercial swaps to teal via .amen-tabs--office,
   mirroring .hallmarks/.hallmarks--office. */
.amen-tabs{
  position:relative;z-index:1;margin-top:56px;padding-top:44px;
  border-top:1px solid var(--slate-line-soft);
}
.dark .amen-tabs{border-top-color:var(--slate-line);}

/* Amenities showcase heading: a proper masthead for the section rather
   than a plain small eyebrow + h3 — a wide-tracked "Amenities" label with
   a short accent rule, the project name as a secondary line, and a larger
   serif headline, consistent with how .corridor/.ledger headers in
   css/styles.css pair an eyebrow with a big display heading, but with
   more considered spacing before the tab buttons start. */
.amenities-head{margin-bottom:36px;max-width:52ch;}
.amenities-eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:var(--body);font-size:.78rem;font-weight:700;
  letter-spacing:var(--eyebrow-tracking);text-transform:uppercase;
  color:var(--text-mute);margin-bottom:16px;
}
.amenities-eyebrow::before{
  content:"";display:block;width:28px;height:2px;flex-shrink:0;
  background:var(--marigold);
}
.amen-tabs--office .amenities-eyebrow::before{background:var(--teal-lt);}
.amenities-eyebrow::after{
  content:"Amenities";color:var(--marigold);font-weight:700;
}
.amen-tabs--office .amenities-eyebrow::after{color:var(--teal-lt);}
.amenities-head h3{
  max-width:22ch;margin-bottom:0;font-size:clamp(1.7rem,3.2vw,2.3rem);
}

.amen-tablist{
  display:flex;flex-wrap:wrap;gap:8px;
  border-bottom:1px solid var(--slate-line-soft);
  margin-bottom:28px;padding-bottom:14px;
}
.dark .amen-tablist{border-bottom-color:var(--slate-line);}
/* Icon-above-label pill/box, per the Hiranandani-style reference: a small
   line-art icon over a two-line bold label. Active tab is a solid
   accent-filled box with dark text; inactive tabs stay outlined/muted,
   consistent with .view-btn's resting/active language above. */
.amen-tab{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:transparent;border:1px solid var(--slate-line);border-radius:14px;
  color:var(--text-mute);font-family:var(--body);font-size:.78rem;font-weight:700;
  line-height:1.25;padding:14px 16px 12px;cursor:pointer;min-width:128px;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.amen-tab-icon{width:26px;height:26px;flex-shrink:0;}
.amen-tab-label{text-align:center;}
.amen-tab:hover{color:var(--text-light);border-color:var(--marigold);}
.amen-tabs--office .amen-tab:hover{border-color:var(--teal);}
.amen-tab.is-active{background:var(--marigold);color:#16262B;border-color:var(--marigold);}
.amen-tabs--office .amen-tab.is-active{background:var(--teal);color:#0A1114;border-color:var(--teal);}
.amen-tab:focus-visible{outline:2px solid var(--marigold-lt);outline-offset:2px;}
.amen-tabs--office .amen-tab:focus-visible{outline-color:var(--teal-lt);}

/* Panels: list + visual side by side, reference-like proportions on
   desktop, stacked on mobile. Only the active panel is visible — the
   [hidden] attribute (not just CSS) keeps inactive panels out of the
   no-JS/SEO-relevant flow question moot, since .no-js below forces every
   panel visible regardless of [hidden]. */
.amen-panel[hidden]{display:none;}
.amen-panel-in{
  display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;
}
.amen-panel .amenity-group h4{
  font-family:var(--body);font-size:.78rem;font-weight:700;color:var(--marigold);
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 14px;padding-bottom:9px;
  border-bottom:1px solid var(--slate-line-soft);
}
.dark .amen-panel .amenity-group h4{border-bottom-color:var(--slate-line);}
.amen-tabs--office .amen-panel .amenity-group h4{color:var(--teal-lt);}
.amen-list .amenity-group ul{display:grid;gap:12px;list-style:none;padding:0;margin:0;}
.amen-list .amenity-group li{
  font-size:1rem;color:var(--text-light);padding-left:22px;position:relative;
}
.amen-list .amenity-group li::before{
  content:"";position:absolute;left:0;top:.55em;width:11px;height:2px;background:var(--marigold);
}
.amen-tabs--office .amen-list .amenity-group li::before{background:var(--teal-lt);}

.amen-visual{
  position:relative;border-radius:6px;overflow:hidden;aspect-ratio:4/3;
  background:var(--slate);border:1px solid var(--slate-line-soft);
}
.dark .amen-visual{border-color:var(--slate-line);}
.amen-visual--photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) brightness(.86);margin:0;}

/* Cinematic treatment: the one amenity tab with a genuine photo pairing
   (residential Wellness & recreation -> gymnasium) gets a larger, more
   confident full-bleed presentation than the numeral-fallback tabs, closer
   to the reference's full-bleed image + small bottom-corner caption. The
   caption text is the image's own existing alt/caption ("Fitted
   gymnasium") — nothing invented. */
.amen-visual--cinematic{
  aspect-ratio:16/11;border-radius:10px;
  box-shadow:0 30px 70px rgba(0,0,0,.4);
}
@media (min-width:761px){
  .amen-visual--cinematic{aspect-ratio:4/3.1;}
}
.amen-visual--cinematic img{filter:saturate(.96) brightness(.92);}
.amen-visual--cinematic::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(10,17,20,.78) 0%,rgba(10,17,20,.15) 42%,transparent 66%);
}
.amen-visual--cinematic figcaption{
  position:absolute;left:16px;bottom:14px;z-index:1;
  font-family:var(--body);font-size:.86rem;font-weight:700;color:var(--text-light);
  padding:6px 14px;border-radius:100px;
  background:rgba(10,17,20,.55);backdrop-filter:blur(2px);
}
.amen-visual--numeral{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:linear-gradient(155deg,rgba(227,169,40,.16),transparent 60%),var(--slate);
}
.dark .amen-visual--numeral{background:linear-gradient(155deg,rgba(227,169,40,.16),transparent 60%),var(--slate-soft);}
.amen-tabs--office .amen-visual--numeral{background:linear-gradient(155deg,rgba(62,139,130,.2),transparent 60%),var(--slate);}
.dark .amen-tabs--office .amen-visual--numeral{background:linear-gradient(155deg,rgba(62,139,130,.2),transparent 60%),var(--slate-soft);}
.amen-numeral{
  font-family:var(--display);font-size:clamp(2.4rem,6vw,3.6rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--marigold-lt);text-align:center;
}
.amen-tabs--office .amen-numeral{-webkit-text-stroke-color:var(--teal-lt);}
.amen-visual--numeral svg{width:44px;height:44px;color:var(--marigold);flex-shrink:0;}
.amen-tabs--office .amen-visual--numeral svg{color:var(--teal-lt);}

/* Crossfade/slide on panel swap, driven by JS toggling .is-active + the
   [hidden] attribute together (see js/enhancements.js amenTabs()). */
@media (prefers-reduced-motion:no-preference){
  .amen-panel{
    opacity:0;transform:translateY(10px);
    transition:opacity .32s cubic-bezier(.2,.7,.3,1),transform .32s cubic-bezier(.2,.7,.3,1);
  }
  .amen-panel.is-active{opacity:1;transform:none;}
}
.no-js .amen-panel{opacity:1;transform:none;}
/* No-JS fallback: show every panel stacked, simply, rather than only the
   first (js/enhancements.js is what normally hides the inactive ones). */
.no-js .amen-panel[hidden]{display:block;}
.no-js .amen-tablist{display:none;}
.no-js .amen-panel + .amen-panel{margin-top:32px;padding-top:32px;border-top:1px solid var(--slate-line-soft);}

@media (max-width:760px){
  .amen-tabs{margin-top:44px;padding-top:36px;}
  .amenities-head{margin-bottom:28px;}
  .amen-panel-in{grid-template-columns:1fr;gap:22px;}
  .amen-visual{aspect-ratio:16/10;}
  .amen-tab{min-width:0;flex:1 1 0;padding:10px 8px 9px;font-size:.7rem;}
  .amen-tab-icon{width:22px;height:22px;}
}

/* ---------- Amenities ICON GRID (replaces the earlier photo/bento grid) ----------
   Per direct user instruction, following review of reference screenshots:
   a clean, uniform grid — a circular line-icon above a short label, in a
   bordered card — reused as ONE consistent design system for both projects
   (marigold circles for residential, teal for commercial), rather than the
   previous mixed photo-card/icon-card layout. This intentionally does NOT
   adopt the reference's literal light/cream palette — only its layout
   pattern — so the site's existing dark cinematic tokens are reused
   unchanged. Every tile's <h4> label is one of the confirmed real amenities
   (see the commit message for the consolidation/dedup reasoning); nothing
   here is invented. Icons are hand-authored inline SVG (48x48 viewBox,
   1.6px stroke, currentColor) matching the hallmark tiles' existing style;
   the security-shield and power-bolt paths are copied verbatim from the
   hallmark/former amenity icon set rather than redrawn. */
.amen-grid-wrap{
  position:relative;z-index:1;margin-top:56px;padding-top:44px;
  border-top:1px solid var(--slate-line-soft);
}
.dark .amen-grid-wrap{border-top-color:var(--slate-line);}

.amen-icon-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:14px;list-style:none;padding:0;margin:0;
}

.amen-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;gap:14px;padding:26px 16px 22px;
  background:var(--slate-soft);border:1px solid var(--slate-line-soft);border-radius:10px;
  transition:transform .2s cubic-bezier(.2,.7,.3,1),border-color .2s ease,box-shadow .2s ease;
}
.dark .amen-tile{background:var(--slate-soft);border-color:var(--slate-line);}

/* Circular icon badge — the core "reference style" device: a bordered
   circle carrying the line-icon, echoing the accent colour, sitting above
   the label rather than beside it. */
.amen-tile-icon{
  width:56px;height:56px;flex-shrink:0;padding:13px;box-sizing:border-box;
  color:var(--marigold-lt);
  border:1.5px solid var(--marigold-dim);border-radius:50%;
  background:radial-gradient(circle at 50% 30%,rgba(227,169,40,.14),transparent 70%);
}
.amen-icon-grid--office .amen-tile-icon{
  color:var(--teal-lt);border-color:var(--teal-dim);
  background:radial-gradient(circle at 50% 30%,rgba(62,139,130,.18),transparent 70%);
}
.amen-tile h4{
  font-family:var(--body);font-size:.86rem;font-weight:700;color:var(--text-light);
  line-height:1.35;margin:0;max-width:20ch;
}

@media (hover:hover){
  .amen-tile{cursor:default;}
  .amen-tile:hover{
    transform:translateY(-4px);
    border-color:rgba(227,169,40,.5);
    box-shadow:0 16px 34px rgba(0,0,0,.32);
  }
  .amen-icon-grid--office .amen-tile:hover{border-color:rgba(127,194,183,.55);}
  .amen-tile:hover .amen-tile-icon{color:var(--marigold-lt);border-color:var(--marigold);}
  .amen-icon-grid--office .amen-tile:hover .amen-tile-icon{color:var(--teal-lt);border-color:var(--teal);}
}
.amen-tile:focus-within{border-color:var(--marigold);outline:none;}
.amen-icon-grid--office .amen-tile:focus-within{border-color:var(--teal);}

/* Staggered scroll-reveal: the whole grid wrapper is one [data-reveal]
   target; each tile gets its own nth-child delay (capped, then repeating in
   small groups) so a 25-tile grid still settles in briskly rather than the
   last row waiting several seconds behind the first. */
@media (prefers-reduced-motion:no-preference){
  .amen-tile{opacity:0;transform:translateY(18px);
    transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1),
               border-color .2s ease,box-shadow .2s ease;
  }
  .amen-grid-wrap.is-visible .amen-tile{opacity:1;transform:none;}
  .amen-grid-wrap.is-visible .amen-tile:nth-child(4n+1){transition-delay:.04s;}
  .amen-grid-wrap.is-visible .amen-tile:nth-child(4n+2){transition-delay:.09s;}
  .amen-grid-wrap.is-visible .amen-tile:nth-child(4n+3){transition-delay:.14s;}
  .amen-grid-wrap.is-visible .amen-tile:nth-child(4n+4){transition-delay:.19s;}
}
.no-js .amen-tile{opacity:1;transform:none;}

@media (max-width:900px){
  .amen-icon-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
  .amen-grid-wrap{margin-top:44px;padding-top:36px;}
  .amenities-head{margin-bottom:28px;}
  .amen-icon-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .amen-tile{padding:20px 10px 18px;gap:10px;}
  .amen-tile-icon{width:48px;height:48px;padding:11px;}
  .amen-tile h4{font-size:.8rem;}
}

/* ---------- Amenity tile photo variant ----------
   A handful of tiles in the icon-grid above now have a genuine matching
   real render (real project photography, supplied directly by the user,
   not stock) — Swimming Pool, rooftop sports court, children's play deck,
   landscaped lawn. Rather than break the uniform icon-grid system, these
   tiles swap their circular icon badge for a full-bleed photo behind the
   same label, keeping the same card footprint/grid position so the layout
   stays one coherent grid, just with a few "hero" tiles mixed in — the same
   pattern the .gal gallery cards already use (image + bottom gradient +
   caption), reused here at tile scale. */
.amen-tile--photo{
  position:relative;padding:0;overflow:hidden;aspect-ratio:1/1;
  justify-content:flex-end;background:var(--slate);
}
.amen-tile--photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) brightness(.88);
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.amen-tile--photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(10,17,20,.88) 0%,rgba(10,17,20,.15) 60%,rgba(10,17,20,0) 100%);
}
.amen-tile--photo h4{
  position:relative;z-index:1;padding:0 14px 16px;max-width:none;
}
@media (hover:hover){
  .amen-tile--photo:hover img{transform:scale(1.06);}
}

/* ---------- Why invest: checkmarked bullet list ----------
   New section per direct user instruction: a checkmarked bullet-point list
   (accent checkmark + bold lead-in + supporting sentence) positioned right
   after each project's existing "Why choose" narrative. Deliberately
   text-forward, no image — the user explicitly said to skip the reference's
   stock building render. Residential uses marigold, commercial swaps to
   teal via .why-invest--office, matching the .why-choose/.hallmarks/
   .amen-grid-wrap accent-swap pattern already used throughout this file. */
.why-invest{
  position:relative;z-index:1;margin-top:48px;padding-top:36px;
  border-top:1px solid var(--slate-line-soft);
}
.dark .why-invest{border-top-color:var(--slate-line);}
.why-invest .eyebrow{margin-bottom:12px;}
.why-invest h3{margin-bottom:22px;max-width:26ch;}

.check-list{display:grid;gap:18px;list-style:none;padding:0;margin:0;}
.check-list li{
  display:flex;align-items:flex-start;gap:14px;
  font-size:.98rem;color:var(--text-mute);line-height:1.55;
}
.check-list strong{color:var(--text-light);font-weight:700;}
.check-ico{
  width:24px;height:24px;flex-shrink:0;margin-top:2px;
  color:var(--marigold-lt);
}
.why-invest--office .check-ico{color:var(--teal-lt);}

@media (min-width:761px){
  .check-list{grid-template-columns:1fr 1fr;column-gap:32px;}
}
@media (max-width:640px){
  .why-invest{margin-top:36px;padding-top:28px;}
  .check-list li{font-size:.94rem;}
}

/* ---------- Hallmarks: harmonise with the new icon-grid tile language ----------
   The bento layout/stagger/reveal wiring already built for .h-strip/.h-tile
   stays exactly as-is (still one [data-reveal] target, same responsive
   collapse) — only the tile's icon treatment is restyled here so it reads
   as the same design family as the new .amen-tile circular icon badges,
   per the user's ask to harmonise rather than let the page read as a
   patchwork of card styles. The oversized-numeral "hero" concept — the
   part of the original redesign that actually worked — is kept unchanged. */
.h-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;padding:11px;box-sizing:border-box;flex-shrink:0;
  color:var(--marigold-lt);
  border:1.5px solid var(--marigold-dim);border-radius:50%;
  background:radial-gradient(circle at 50% 30%,rgba(227,169,40,.14),transparent 70%);
}
.hallmarks--office .h-icon{
  color:var(--teal-lt);border-color:var(--teal-dim);
  background:radial-gradient(circle at 50% 30%,rgba(62,139,130,.18),transparent 70%);
}
.h-tile--hero .h-icon{position:relative;z-index:1;width:46px;height:46px;padding:9px;}
@media (hover:hover){
  .h-tile:hover .h-icon{color:var(--marigold-lt);border-color:var(--marigold);}
  .hallmarks--office .h-tile:hover .h-icon{color:var(--teal-lt);border-color:var(--teal);}
}

/* ---------- Investor offer banner ----------
   Sits between the header and the rest of the page, not part of the
   sticky stack, so it scrolls away normally rather than competing with
   the marquee/header for permanent screen space. Delete this whole
   block (and the matching <section class="investor-offer-banner"> in
   index.html) to fully revert. */
.investor-offer-banner{
  background:linear-gradient(90deg,var(--marigold-dim),var(--marigold) 45%,var(--teal) 65%,var(--teal-dim));
  background-size:200% 100%;
  animation:investor-offer-shift 8s ease-in-out infinite;
}
@keyframes investor-offer-shift{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}
.investor-offer-in{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;
  padding:14px var(--gutter);text-decoration:none;color:#16262B;
}
.investor-offer-tag{
  flex-shrink:0;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;background:rgba(22,38,43,.16);
}
.investor-offer-msg{flex:1 1 380px;font-size:.92rem;line-height:1.4;}
.investor-offer-msg strong{font-weight:800;}
.investor-offer-cta{
  flex-shrink:0;font-size:.86rem;font-weight:800;white-space:nowrap;
  padding:8px 16px;border-radius:999px;background:#16262B;color:var(--marigold-lt);
  transition:transform .15s ease;
}
.investor-offer-banner:hover .investor-offer-cta{transform:translateX(3px);}
@media (max-width:700px){
  .investor-offer-in{padding:12px var(--gutter);}
  .investor-offer-msg{font-size:.84rem;}
}
@media (prefers-reduced-motion:reduce){
  .investor-offer-banner{animation:none;}
}

/* ---------- Payment plan (commercial) ----------
   Construction-linked schedule, styled to match .specs-table's borders
   and .why-invest's section spacing rather than introducing a new table
   language. Horizontally scrollable on narrow screens instead of
   letting a 4-column table squeeze illegibly — the milestone names are
   long, so a min-width plus overflow-x is simpler and more legible
   than wrapping every cell. */
.payment-plan{
  position:relative;z-index:1;margin-top:48px;padding-top:36px;
  border-top:1px solid var(--slate-line-soft);
}
.dark .payment-plan{border-top-color:var(--slate-line);}
.payment-plan h3{margin-bottom:22px;max-width:34ch;}
.payment-plan-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:22px;}
.payment-table{width:100%;min-width:640px;border-collapse:collapse;font-size:.9rem;}
.payment-table th,.payment-table td{
  padding:12px 14px;text-align:left;border-bottom:1px solid var(--slate-line-soft);
}
.dark .payment-table th,.dark .payment-table td{border-bottom-color:var(--slate-line);}
.payment-table th{
  color:var(--text-mute);font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
}
.payment-table td{color:var(--text-light);}
.payment-table td:first-child,.payment-table th:first-child{width:8%;text-align:center;}
.payment-table td:first-child{color:var(--text-mute);}
.payment-table td:nth-child(3),.payment-table th:nth-child(3),
.payment-table td:nth-child(4),.payment-table th:nth-child(4){
  width:15%;text-align:right;font-family:var(--display);color:var(--teal-lt);
}
.payment-table tr:last-child th,.payment-table tr:last-child td{border-bottom:0;}
.payment-table tr:last-child td:nth-child(3),.payment-table tr:last-child td:nth-child(4){
  color:var(--marigold-lt);font-weight:700;
}
/* Below 560px the table drops the horizontal scroll entirely: the
   milestone column wraps across multiple lines instead, and the Sr.No
   + both percentage columns shrink to just fit their content, so the
   whole table — milestone text AND both percentages — is visible at
   once with no swipe needed. */
@media (max-width:560px){
  .payment-plan-scroll{overflow-x:visible;}
  .payment-table{min-width:0;font-size:.78rem;table-layout:fixed;}
  .payment-table th,.payment-table td{padding:10px 6px;white-space:normal;word-break:break-word;}
  .payment-table td:first-child,.payment-table th:first-child{width:9%;padding-left:0;}
  .payment-table td:nth-child(2),.payment-table th:nth-child(2){width:46%;}
  .payment-table td:nth-child(3),.payment-table th:nth-child(3),
  .payment-table td:nth-child(4),.payment-table th:nth-child(4){
    width:22%;font-size:.76rem;padding-right:4px;
  }
  .payment-table th{font-size:.6rem;letter-spacing:.02em;}
}
.payment-halal{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.92rem;font-weight:600;color:var(--teal-lt);
  padding:12px 20px;border-radius:999px;
  background:rgba(62,139,130,.12);border:1px solid rgba(62,139,130,.4);
}
.payment-halal-ico{width:20px;height:20px;flex-shrink:0;}
.payment-halal a{color:inherit;font-weight:800;text-decoration:underline;text-underline-offset:2px;}
@media (max-width:640px){
  .payment-plan{margin-top:36px;padding-top:28px;}
  .payment-halal{
    display:flex;align-items:flex-start;gap:12px;
    width:100%;border-radius:14px;
    font-size:.84rem;line-height:1.5;padding:14px 16px;text-align:left;
  }
  .payment-halal-ico{flex-shrink:0;margin-top:2px;}
}