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

   HOW TO REBRAND THIS SITE
   Everything visual is controlled by the tokens in the :root block below.
   Change a colour or a font there and it updates across the whole page.
   You should rarely need to touch anything further down.
   ========================================================================= */

:root{
  /* ---- Colour ----
     Cinematic near-black slate, warm cream text, marigold, muted teal.
     Marigold carries the residential side, teal the commercial side.
     Every section of the page — including what used to be the "light"
     sections (gallery/FAQ) — now lives on this dark base so accents pop
     and the (currently placeholder) photography reads as moody rather
     than washed out. */
  --slate-black: #0A1114;
  --slate-deep : #0D171B;
  --slate      : #142125;
  --slate-soft : #1B2C31;
  --slate-line : #2E464D;
  --slate-line-soft: #24383E;

  --limestone  : #EBE4D8;
  --paper      : #F8F5EF;
  --paper-dim  : #6B7A78;

  --marigold   : #E3A928;
  --marigold-lt: #F4C862;
  --marigold-dim: #8A6A28;
  --teal       : #3E8B82;
  --teal-lt    : #7FC2B7;
  --teal-dim   : #2C5651;

  --text-dark  : #16262B;
  --text-light : #F3EEE4;
  --text-mute  : #AAB9B6;
  --text-faint : #7C8D8A;

  /* ---- Type ---- */
  --display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --body   : 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --eyebrow-tracking: .22em;

  /* ---- Layout ---- */
  --wrap   : 1140px;
  --gutter : 24px;
  --radius : 3px;

  /* ---- Rhythm ---- */
  --section-y: clamp(64px, 9vw, 116px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
/* overflow-x:hidden here (not on body — see below) guards against a few
   pixels of unexpected horizontal overflow ever becoming a visible page
   scrollbar/gap, without breaking position:sticky. A sticky element's
   containing block is the nearest scrolling ancestor, and setting
   `overflow` to anything but `visible` on body (a previous version of
   this rule did) turns body itself into that scrolling ancestor instead
   of the actual viewport — which silently breaks every position:sticky
   element on the page (header, marquee, view-toggle) the moment you
   scroll past body's own height. html doesn't have this problem since
   it's already effectively the viewport's own box. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;}
body{
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  color:var(--text-light);
  background:var(--slate-black);
  -webkit-font-smoothing:antialiased;
  max-width:100vw;
}
img{max-width:100%;display:block;height:auto;}
h1,h2,h3,p,ul,ol,dl,dd,figure,table{margin:0;padding:0;}
ul,ol{list-style:none;}
a{color:inherit;text-decoration:none;}
button,input,select{font:inherit;color:inherit;}
table{border-collapse:collapse;width:100%;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.skip{position:absolute;left:-9999px;top:0;background:var(--marigold);color:var(--slate-deep);padding:12px 18px;z-index:200;}
.skip:focus{left:12px;top:12px;}

:focus-visible{outline:2px solid var(--marigold-lt);outline-offset:3px;}

/* ---------- Type scale ----------
   Oversized, editorial-style headline treatment: hero and section titles
   run much larger than a typical marketing site, with tighter negative
   tracking at the biggest sizes so scale reads as intentional, not just
   "big font". Eyebrow/label text goes the opposite direction — small,
   uppercase, wide-tracked — for contrast against the display type. */
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.01em;}
h1{font-size:clamp(2.6rem,5.6vw,5.4rem);line-height:1.02;letter-spacing:-.02em;}
/* The H1's tagline half reads as a quieter, smaller continuation rather
   than carrying equal visual weight to the project names leading it —
   keeps the real headline (used for the Grand Meridian City / MEK Grand
   Central branded-search H1 fix) from looking like one giant run-on line. */
.hero-h1-sub{font-size:0.45em;letter-spacing:-.01em;color:#CBD6D4;display:block;margin-top:.15em;}
h2{font-size:clamp(2rem,3.8vw,3.6rem);line-height:1.06;letter-spacing:-.015em;}
h3{font-size:clamp(1.3rem,2.3vw,1.7rem);line-height:1.18;letter-spacing:-.005em;}

.eyebrow{
  display:inline-block;font-family:var(--body);font-size:.72rem;font-weight:700;
  letter-spacing:var(--eyebrow-tracking);text-transform:uppercase;color:var(--marigold);
}
.dark .eyebrow{color:var(--teal-lt);}

.lede{font-size:1.12rem;max-width:60ch;color:var(--text-mute);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  font-family:inherit;font-size:.95rem;font-weight:600;letter-spacing:.01em;line-height:1.2;
  padding:15px 28px;border:1px solid transparent;border-radius:var(--radius);
  cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease;
}
button.btn{-webkit-appearance:none;appearance:none;}
.btn-gold{background:var(--marigold);color:#16262B;}
.btn-gold:hover{background:var(--marigold-lt);}
.btn-line{border-color:rgba(233,226,214,.34);color:var(--text-light);}
.btn-line:hover{border-color:var(--marigold);color:var(--marigold-lt);}
.btn-ink{background:var(--slate-deep);color:var(--text-light);}
.btn-ink:hover{background:var(--slate);}
.btn-wide{width:100%;}
.btn[disabled]{opacity:.55;cursor:not-allowed;}

/* ---------- Official-site attention marquee ----------
   Sticky above the header so it stays visible the entire time you scroll,
   not just at the top of the page. Two copies of the same content sit
   side by side inside .site-marquee-track and the whole track is
   translated left by exactly -50% on an infinite CSS animation, so the
   loop seam is invisible (see index.html comment). .site-head's own
   sticky `top` is offset by this element's height (see below) so the two
   stack cleanly instead of overlapping. */
.site-marquee{
  position:sticky;top:0;z-index:81;
  overflow:hidden;background:linear-gradient(90deg,var(--marigold-dim),var(--teal-dim));
  border-bottom:1px solid var(--slate-line);
}
.site-marquee-track{
  display:flex;align-items:center;gap:14px;width:max-content;
  padding:7px 0;white-space:nowrap;
  animation:site-marquee-scroll 26s linear infinite;
}
.site-marquee-item{
  font-family:var(--body);font-size:.78rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-light);
}
.site-marquee-sep{color:var(--marigold-lt);font-size:.6rem;opacity:.8;}
@keyframes site-marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .site-marquee-track{animation:none;}
}
@media (max-width:640px){
  .site-marquee-item{font-size:.68rem;}
  .site-marquee-track{gap:10px;padding:6px 0;animation-duration:20s;}
}

/* ---------- Header ---------- */
.site-head{
  position:sticky;top:var(--marquee-h,36px);z-index:80;
  background:rgba(16,28,34,.93);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--slate-line);
}
/* Full-width header bar (deliberately NOT wrapped in .wrap like the rest
   of the page) — the brand logo sits close to the true left edge with
   just a small breathing-room gap, and nav/CTA go to the true right edge,
   independent of the page's centred max-width content column. */
.head-in{
  display:flex;align-items:center;gap:28px;height:78px;
  padding:0 20px 0 28px;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand-mark{display:block;width:auto;height:42px;object-fit:contain;flex-shrink:0;}
.brand-text{display:block;width:fit-content;text-align:center;}
.brand-name{display:block;font-family:var(--display);font-size:1.34rem;line-height:1.1;white-space:nowrap;color:var(--marigold);text-align:left;}
.brand-loc{color:var(--marigold);}
.brand-sub{display:block;font-size:.76rem;letter-spacing:.1em;color:var(--text-light);font-style:italic;white-space:nowrap;}
@media (max-width:1080px){
  .brand-mark{height:36px;}
  .brand-name{font-size:1.18rem;}
}
@media (max-width:560px){
  .head-in{padding:0 14px 0 16px;gap:10px;}
  .brand-mark{width:30px;height:30px;}
}
/* Fluid sizing below the nav's own 940px cutoff, where the header is just
   brand + phone/WhatsApp button competing for a narrowing strip — clamp()
   keeps both readable and non-overlapping across the whole phone-width
   range (a 360px phone and a 428px phone both fit correctly) instead of
   jumping at one fixed breakpoint. */
@media (max-width:940px){
  .head-in{height:auto;min-height:64px;padding-top:8px;padding-bottom:8px;padding-right:16px;gap:6px;}
  .brand-mark{width:clamp(24px,7vw,30px);height:clamp(24px,7vw,30px);}
  .brand-name{font-size:clamp(.72rem,3.6vw,1.1rem);}
  .brand-sub{font-size:clamp(.5rem,2.2vw,.72rem);}
  .brand-loc{display:none;}
  /* .nav (which normally carries margin-left:auto) is display:none at this
     width, so .head-cta needs its own margin-left:auto to push itself and
     the hamburger after it over to the right edge, leaving the brand on
     the left with proper space between the two groups. The phone number
     itself is never truncated or shrunk below a legible size — it's the
     one thing in the header a visitor might actually need to read/copy —
     so on the narrowest phones the WhatsApp icon drops instead to free up
     room, rather than risking the number becoming unreadable or cut off. */
  .head-cta{
    margin-left:auto;
    padding:clamp(4px,1.4vw,7px) clamp(6px,2vw,11px);
    font-size:clamp(.62rem,2.2vw,.74rem);gap:clamp(3px,1vw,4px);
  }
  .head-cta span{white-space:nowrap;}
  .whatsapp-ico{width:clamp(11px,3vw,13px);height:clamp(11px,3vw,13px);flex-shrink:0;}
  .menu-toggle{margin-left:0;flex-shrink:0;}
}
@media (max-width:400px){
  .brand-sub{display:none;}
  .whatsapp-ico{display:none;}
}

/* ---------- Mobile menu (hamburger + slide-down panel) ----------
   .nav is display:none below 940px (rule above) since it doesn't fit as
   a horizontal bar at that width — this replaces it with a button that
   reveals the same links as a full-width dropdown panel instead of
   losing navigation entirely on phones/small tablets. */
.menu-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:36px;height:36px;padding:0;margin-left:14px;
  background:none;border:0;cursor:pointer;flex-shrink:0;
}
.menu-toggle span{
  display:block;width:100%;height:2px;border-radius:2px;
  background:var(--text-light);transition:transform .2s ease,opacity .2s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu{
  flex-direction:column;
  background:var(--slate-deep);border-top:1px solid var(--slate-line);
  padding:6px var(--gutter) 10px;
}
.mobile-menu:not([hidden]){display:flex;}
.mobile-menu a{
  padding:12px 4px;font-size:.94rem;color:var(--text-light);
  border-bottom:1px solid var(--slate-line-soft);
}
.mobile-menu a:last-child{border-bottom:0;}
@media (max-width:940px){
  .menu-toggle{display:flex;}
}
.nav{display:flex;align-items:center;gap:26px;margin-left:auto;font-size:.92rem;color:var(--text-mute);}
.nav a{white-space:nowrap;}
.nav a:hover{color:var(--marigold-lt);}

.nav-dropdown{position:relative;}
.nav-dropdown-btn{
  font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  white-space:nowrap;display:flex;align-items:center;gap:5px;
}
.nav-dropdown-btn:hover,.nav-dropdown.is-open .nav-dropdown-btn{color:var(--marigold-lt);}
.nav-dropdown-btn::after{
  content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .15s ease;
}
.nav-dropdown.is-open .nav-dropdown-btn::after{transform:rotate(-135deg) translateY(1px);}
.nav-dropdown-menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  min-width:200px;padding:8px;border-radius:10px;
  background:var(--slate-deep);border:1px solid var(--slate-line);
  box-shadow:0 14px 34px rgba(0,0,0,.45);
  display:none;flex-direction:column;gap:2px;z-index:60;
}
.nav-dropdown.is-open .nav-dropdown-menu{display:flex;}
.nav-dropdown-menu a{
  padding:9px 12px;border-radius:6px;font-size:.86rem;color:var(--text-light);
}
.nav-dropdown-menu a:hover{background:rgba(227,169,40,.1);color:var(--marigold-lt);}
.head-cta{padding:10px 18px;font-size:.88rem;gap:7px;white-space:nowrap;}
.whatsapp-ico{flex-shrink:0;}
@media (max-width:1240px) and (min-width:941px){
  .nav{gap:14px;font-size:.8rem;}
  .head-cta{padding:9px 12px;font-size:.78rem;}
  .head-in{gap:18px;padding-right:14px;}
}
@media (max-width:940px){
  .nav{display:none;}
}

/* ---------- Hero ----------
   No video asset exists (and none may be hotlinked), so "motion" is built
   from CSS alone: a slow Ken-Burns zoom on the background photo, a light
   sweep that drifts across it, and a fine animated grain layer. The JS
   parallax in js/enhancements.js sets an inline transform on .hero-bg img
   on scroll, so the Ken-Burns zoom lives on .hero-bg itself (a wrapping
   element) rather than the img, so the two transforms don't fight. */
.hero{position:relative;overflow:hidden;background:var(--slate-black);}
.hero-bg{position:absolute;inset:0;}
.hero-bg img,.hero-bg video{
  width:100%;height:100%;object-fit:cover;
  /* Was saturate(.85) brightness(.8) — tuned for the old hotlinked stock
     photo. That extra 20% brightness cut, stacked on top of the ::after
     scrim below, was compounding to hide the new real render almost
     entirely. Raised brightness close to 1 (kept a hair under so the image
     doesn't blow out against the site's otherwise near-black palette) and
     nudged saturation back up so the render's warm building lights and
     forest greens actually read. */
  filter:saturate(1.05) brightness(1.04);
}
@media (prefers-reduced-motion:no-preference){
  .hero-bg{animation:hero-kenburns 26s ease-in-out infinite alternate;}
}
@keyframes hero-kenburns{
  0%{transform:scale(1.04) translate3d(0,0,0);}
  100%{transform:scale(1.14) translate3d(-1.2%,-1%,0);}
}
/* Lightened for the real night-aerial render (ImgVids/hero-night-aerial.jpg):
   the previous .97/.92/.62 scrim was tuned to hide a lower-quality hotlinked
   stock photo and made the new, genuinely good render barely visible behind
   it. Values dropped to .78/.68/.4 (diagonal) and .35/0 (vertical) — still
   enough to keep the left-side headline/body text readable over the image's
   dark forested-mountain zone, while letting the tower, lit highway and
   rooftop pool actually show through on the right. Re-verified with a real
   contrast check (see commit message) that h1/hero-sub/hero-flag/hero-stats
   still clear WCAG AA against the image at the headline's actual position. */
.hero-bg::after{
  content:"";position:absolute;inset:0;
  /* Lightened again: the video itself (checked frame-by-frame) is a
     bright, well-exposed daytime shot — the previous scrim (.78/.68/.4)
     was tuned for a much darker source and was making a genuinely good
     video look dim. Text legibility re-verified after this change. */
  background:linear-gradient(108deg,rgba(10,17,20,.58) 0%,rgba(10,17,20,.46) 42%,rgba(10,17,20,.24) 100%),
             linear-gradient(0deg,rgba(10,17,20,.22),rgba(10,17,20,0) 45%);
}
/* Animated light sweep: a soft diagonal band of warm light drifting across
   the hero image, the cheapest possible stand-in for filmed motion. */
.hero-sweep{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:linear-gradient(115deg,transparent 30%,rgba(227,169,40,.16) 46%,rgba(227,169,40,.26) 50%,rgba(227,169,40,.16) 54%,transparent 70%);
  background-size:250% 250%;background-position:0% 0%;
}
@media (prefers-reduced-motion:no-preference){
  .hero-sweep{animation:hero-sweep 12s ease-in-out infinite;}
}
@keyframes hero-sweep{
  0%{background-position:120% 20%;}
  50%{background-position:-10% 60%;}
  100%{background-position:120% 20%;}
}
/* Fine animated grain: a repeating SVG noise texture, inline so nothing is
   fetched externally. Subtle — it reads as filmic texture, not static. */
.hero-grain{
  position:absolute;inset:-10%;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
@media (prefers-reduced-motion:no-preference){
  .hero-grain{animation:hero-grain 1.1s steps(2) infinite;}
}
@keyframes hero-grain{
  0%{transform:translate(0,0);}
  100%{transform:translate(-2%,-2%);}
}
.hero-in{
  position:relative;display:grid;grid-template-columns:1.12fr .88fr;gap:54px;
  align-items:center;padding-top:48px;padding-bottom:56px;
}
.hero-flag{
  display:inline-block;font-size:.78rem;font-weight:700;color:var(--marigold);
  text-transform:uppercase;letter-spacing:var(--eyebrow-tracking);
  border:1px solid rgba(227,169,40,.42);border-radius:100px;padding:8px 18px;margin-bottom:18px;
}
.hero h1{margin-bottom:16px;max-width:16ch;}
.hero-sub{font-size:1.14rem;color:#CBD6D4;max-width:52ch;margin-bottom:22px;}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:26px;}

.hero-stats{display:flex;flex-wrap:wrap;gap:16px 40px;border-top:1px solid var(--slate-line);padding-top:18px;}
.hero-stats dt{font-size:.76rem;color:var(--text-mute);text-transform:uppercase;letter-spacing:.08em;}
.hero-stats dd{font-family:var(--display);font-size:2.1rem;line-height:1.1;color:var(--text-light);}

/* ---------- "Was X, now Y" discount price callout ----------
   Reused wherever a starting price drops from an old reference figure to
   the current real launch price: hero stats, pricing tables, spec tables.
   The old price is muted and struck through (semantic <del>); the new
   price uses the display font and the page's bright accent colour so it
   reads as a confident "price just dropped" callout, not a stray typo.

   Investigated a report that this reads as a washed-out "yellow" next to
   other stat numbers (e.g. the hallmark strip's .h-num, css/enhancements.css)
   — both already use the exact same --marigold-lt/--teal-lt token, so the
   colour itself is identical (verified: 11.5:1 / 8.9:1 contrast against the
   dark backgrounds either sits on, comfortably AA). The perceived
   difference is context, not colour: .h-num sits on a tinted card at up to
   2.7rem; .price-drop strong sat bare on the section background at 1em of
   a 2.1rem stat (hero) or the pricing/specs table's own 1.2rem row size —
   noticeably smaller and with no card/weight cues, so the same hex reads
   weaker. Fixed by scaling the new price up relative to the old one and
   adding the same warm glow used elsewhere on the page's bright accent
   text (e.g. identity-banner), so it reads as a confident stat rather than
   a same-weight inline word next to its strikethrough. */
.price-drop{display:inline-flex;align-items:baseline;gap:.5em;flex-wrap:wrap;}
.price-drop del{
  font-family:var(--body);font-size:.8em;font-weight:600;
  color:var(--text-light);text-decoration:line-through;
  text-decoration-color:var(--text-faint);text-decoration-thickness:1.5px;
}
.price-drop strong{
  font-family:var(--display);font-weight:400;font-size:1.22em;line-height:1;
  color:var(--marigold-lt);text-shadow:0 0 24px rgba(227,169,40,.35);
}
.dark .price-drop strong{color:var(--teal-lt);text-shadow:0 0 24px rgba(127,194,183,.35);}
.hero-stats dd.price-drop{font-size:2.1rem;}
.hero-stats dd.price-drop strong{font-size:1.22em;}
.hero-stats dd.price-drop del{font-size:.56em;}

/* one orchestrated entrance, hero only */
.hero-copy > *{animation:rise .7s cubic-bezier(.2,.7,.3,1) backwards;}
.hero-copy > *:nth-child(1){animation-delay:.05s;}
.hero-copy > *:nth-child(2){animation-delay:.13s;}
.hero-copy > *:nth-child(3){animation-delay:.21s;}
.hero-copy > *:nth-child(4){animation-delay:.29s;}
.hero-copy > *:nth-child(5){animation-delay:.37s;}
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* Between full desktop and the stacked mobile layout, the headline's
   fluid clamp() size can outgrow the narrowed 1.12fr column before the
   grid actually stacks, overlapping the form card. Widening the column
   split and capping the headline size in this range keeps both sides
   readable without overlap. */
@media (max-width:1240px) and (min-width:901px){
  .hero-in{grid-template-columns:1.3fr .7fr;gap:32px;}
  .hero h1{font-size:clamp(2.6rem,6.2vw,4.4rem);}
}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;gap:36px;padding-top:56px;padding-bottom:64px;}
  /* Lightened alongside the desktop diagonal scrim above (same reasoning:
     the new real render deserves to be visible) — still a flat, fairly
     strong cover since the copy spans the full width on this layout rather
     than sitting only on the left third as it does on desktop. */
  .hero-bg::after{background:linear-gradient(180deg,rgba(10,17,20,.62),rgba(10,17,20,.54));}
}
/* Below 640px the hero's stacked content (headline, paragraph, buttons,
   stats, then the full form card) is far taller than one screen, which
   used to force the wide (1920x916) landscape video to stretch into an
   extremely tall, narrow crop — only a thin cropped sliver of it was ever
   visible, unrecognisable as the actual walkthrough. Instead the video
   now gets its own capped-height band at a normal video aspect ratio
   using object-fit:contain (so the whole frame is visible, never
   cropped), and the copy/form flow in normal, non-overlaid dark section
   below it rather than being layered on top of the video. Kept as a
   separate breakpoint from the 900px one above (which only handles the
   two-column-to-one-column stacking) since this is a structural change
   to how the video itself renders, needed specifically once the stacked
   content gets tall enough to distort the video this badly. */
@media (max-width:640px){
  .hero{display:flex;flex-direction:column;}
  .hero-bg{
    position:relative;inset:auto;
    /* Matches the source video's real 1920x916 frame (~2.096:1) rather
       than a generic 16:9 (1.78:1) box — with object-fit:contain, a box
       shaped differently from the video's own aspect ratio letterboxes
       it and leaves visible empty bars on whichever axis is "too wide"
       for the box (here: empty space left/right). Matching the box to
       the video's real shape means the video always fills its container
       edge-to-edge with no gap on either side. */
    aspect-ratio:1920/916;width:100%;height:auto;max-height:56vh;
    background:var(--slate-black);
  }
  .hero-bg img,.hero-bg video{object-fit:cover;animation:none;}
  .hero-bg::after{display:none;}
  .hero-sweep,.hero-grain{display:none;}
  .hero-in{padding-top:32px;}
}

/* ---------- Form card ----------
   Kept as a light card (not restyled to dark-on-dark): a bright card
   floating on the near-black hero reads as premium the way a printed
   invitation card would, and light-background/dark-text inputs stay the
   most reliably readable pattern for form fields against a dark shell. */
.formcard{
  background:var(--paper);color:var(--text-dark);
  border-radius:6px;padding:26px 26px;
  box-shadow:0 32px 80px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.4) inset;
}
.formcard-title{font-size:1.5rem;margin-bottom:5px;font-family:var(--display);}
.formcard-note{font-size:.86rem;color:#5E6D6B;margin-bottom:16px;}
.lead-form label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#46595A;margin-bottom:6px;}
.lead-form input,.lead-form select{
  width:100%;padding:13px 14px;font-size:.95rem;
  background:#fff;color:var(--text-dark);border:1px solid #CFC8B9;border-radius:var(--radius);
  margin-bottom:15px;
}
.lead-form input::placeholder{color:#8A9391;}
.lead-form input:focus,.lead-form select:focus{border-color:var(--marigold);outline:none;box-shadow:0 0 0 3px rgba(227,169,40,.18);}
.lead-form input[aria-invalid="true"]{border-color:#B3402F;background:#FEF5F4;}
.field-error{
  margin:-10px 0 15px;font-size:.8rem;font-weight:600;color:#B3402F;
  display:flex;align-items:center;gap:6px;
}
.field-error[hidden]{display:none;}
.field-error::before{content:"\26A0";font-size:.85rem;line-height:1;}
.phone-group{display:flex;gap:8px;}
.phone-group .phone-country{
  flex:0 0 auto;width:auto;max-width:132px;padding-left:10px;padding-right:6px;
  font-size:.86rem;
}
.phone-group input{flex:1 1 auto;min-width:0;}
@media (max-width:420px){
  .phone-group .phone-country{max-width:104px;font-size:.78rem;}
}
.fineprint{font-size:.76rem;color:#6D7C7A;margin-top:11px;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.msg{padding:13px 15px;border-radius:var(--radius);font-size:.9rem;margin-bottom:15px;}
.msg-ok{background:#E7F2E9;border:1px solid #B2D6BC;color:#1C4F2C;}
.msg-err{background:#FBECE9;border:1px solid #E4B5AC;color:#7A2A1C;}
.msg a{text-decoration:underline;color:inherit;}

/* ---------- Proof ---------- */
.proof{background:var(--marigold);color:#16262B;}
.proof-in{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 40px;padding:17px var(--gutter);font-size:.9rem;font-weight:500;text-align:center;}

/* ---------- Project blocks ----------
   Editorial/asymmetric layout: the media block overlaps the section edge
   and sits on an offset grid column rather than a centered even split, an
   angled clip-path divider breaks the straight section boundary, and a
   large ghost numeral sits behind the copy for scale. ".light" keeps its
   original name for backward compatibility but now means "marigold-led",
   living on the same dark shell as ".dark" ("teal-led") — both read as
   one cohesive cinematic surface, distinguished only by accent colour. */
.project{padding:var(--section-y) 0;position:relative;overflow:hidden;background:var(--slate-deep);}
.project.light{background:var(--slate-deep);color:var(--text-light);}
.project.dark{background:var(--slate);}
.project::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:64px;
  background:var(--slate-black);clip-path:polygon(0 100%,100% 40%,100% 100%);
  pointer-events:none;
}
.project.dark::before{background:var(--slate-deep);}
.project-in{
  display:grid;grid-template-columns:.86fr 1.14fr;gap:32px 64px;align-items:center;
  position:relative;
}
.project-in.flip .project-media{order:2;}
.project-media{position:relative;}
.project-media img + img{margin-top:15px;}
.project-media img{border-radius:2px;box-shadow:0 30px 70px rgba(0,0,0,.45);}
/* Offset the media block off-grid so it overlaps into the gutter/edge —
   the "large image on one side, overlapping elements" asymmetric cue. */
.project-in:not(.flip) .project-media{margin-right:-8%;}
.project-in.flip .project-media{margin-left:-8%;}
.project-body{position:relative;z-index:1;}
.project-body .eyebrow{margin-bottom:16px;}
.project-body h2{margin-bottom:20px;max-width:11ch;}
.project-body .lede{margin-bottom:30px;}
/* Oversized ghost numeral behind the copy — a quiet stat-callout flourish
   distinguishing each project section without adding more real content. */
.project-tag{
  position:absolute;top:-.5em;right:0;z-index:0;
  font-family:var(--display);font-size:clamp(6rem,14vw,11rem);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(243,238,228,.08);
  pointer-events:none;user-select:none;
}
.project.light .project-tag{-webkit-text-stroke-color:rgba(227,169,40,.16);}
.project.dark .project-tag{-webkit-text-stroke-color:rgba(127,194,183,.18);}

.pricing{width:100%;table-layout:fixed;margin-bottom:26px;font-size:.95rem;}
.pricing th{
  text-align:left;font-size:.78rem;font-weight:600;color:var(--text-mute);
  padding-bottom:9px;border-bottom:1px solid var(--slate-line-soft);
}
.dark .pricing th{border-bottom-color:var(--slate-line);}
.pricing td{padding:13px 8px 13px 0;border-bottom:1px solid var(--slate-line-soft);}
.dark .pricing td{border-bottom-color:var(--slate-line);}
.pricing th:last-child,.pricing td:last-child{text-align:right;padding-right:0;width:42%;}
.pricing td:last-child{font-family:var(--display);font-size:1.2rem;color:var(--text-light);}
.pricing td:last-child.price-drop{justify-content:flex-end;width:100%;}
.pricing tr:last-child td{border-bottom:0;}

.spec{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;margin-bottom:24px;font-size:.94rem;}
.spec span{display:block;font-size:.76rem;color:var(--text-mute);}

.amenities{font-size:.96rem;color:var(--text-mute);max-width:58ch;margin-bottom:28px;}

/* ---------- Grouped amenities ----------
   Replaces the old single flat paragraph with 2-4 thematic clusters, per
   project — same underlying facts, organised so a scanning reader can find
   what they care about (safety vs. recreation vs. day-to-day convenience)
   instead of parsing one run-on sentence. */
.amenity-groups{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px 24px;
  margin-bottom:28px;
}
.amenity-group h3{
  font-family:var(--body);font-size:.78rem;font-weight:700;color:var(--marigold);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;padding-bottom:9px;
  border-bottom:1px solid var(--slate-line-soft);
}
.dark .amenity-group h3{color:var(--teal-lt);border-bottom-color:var(--slate-line);}
.amenity-group ul{display:grid;gap:7px;}
.amenity-group li{
  font-size:.9rem;color:var(--text-mute);padding-left:15px;position:relative;
}
.amenity-group li::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--marigold-dim);
}
.dark .amenity-group li::before{background:var(--teal-dim);}
@media (max-width:640px){
  .amenity-groups{grid-template-columns:1fr;gap:20px;}
}

/* ---------- Inline contextual CTAs ----------
   Lightweight anchor-link prompts at high-intent moments (right after the
   floor plan, right after pricing/amenities) — deliberately not full forms,
   just a nudge toward the nearest existing lead-capture section. */
.cta-inline{margin-top:4px;}
.cta-inline a,.cta-inline .link-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.88rem;font-weight:600;color:var(--marigold-lt);
  border-bottom:1px solid rgba(227,169,40,.4);padding-bottom:2px;
  transition:border-color .16s ease,color .16s ease,gap .16s ease;
}
.link-btn{background:none;border:0;border-bottom:1px solid rgba(227,169,40,.4);padding:0 0 2px;cursor:pointer;font-family:inherit;}
.dark .cta-inline a,.dark .cta-inline .link-btn{color:var(--teal-lt);border-bottom-color:rgba(127,194,183,.4);}
.cta-inline a:hover,.cta-inline .link-btn:hover{gap:10px;border-color:currentColor;}
.cta-inline-media{margin-top:16px;text-align:center;}

/* ---------- Why choose (persuasive narrative) ----------
   A short editorial section per project, separate from the spec/amenities
   list, restating facts already established elsewhere on the page (RERA,
   pricing, connectivity, launch window) as persuasive short-form copy. */
.why-choose{
  position:relative;z-index:1;margin-top:56px;padding-top:44px;
  border-top:1px solid var(--slate-line-soft);max-width:74ch;
}
.dark .why-choose{border-top-color:var(--slate-line);}
.why-choose .eyebrow{margin-bottom:14px;}
.why-choose h3{margin-bottom:16px;max-width:22ch;}
.why-choose p{font-size:1rem;color:var(--text-mute);margin-bottom:14px;}
.why-choose p:last-child{margin-bottom:0;}

@media (max-width:900px){
  .project-in{grid-template-columns:1fr;gap:32px;}
  .project-in.flip .project-media{order:0;}
  .project-in:not(.flip) .project-media,
  .project-in.flip .project-media{margin:0;}
  .project-tag{display:none;}
  .why-choose{margin-top:44px;padding-top:36px;}
}

/* ---------- Distance ledger (the signature element) ---------- */
.ledger{padding:var(--section-y) 0;background:var(--slate-deep);}
.ledger h2{margin-bottom:16px;}
.ledger-lede{margin-bottom:46px;}
.ledger-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;}
.ledger-col h3{
  color:var(--marigold);margin-bottom:16px;padding-bottom:12px;
  border-bottom:1px solid var(--slate-line);
}
.ledger-col li{
  display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid rgba(43,68,76,.55);
}
.ledger-col li:last-child{border-bottom:0;}
.place{font-size:.93rem;}
.dist{font-family:var(--display);font-size:1.12rem;color:var(--text-light);}
.mins{font-size:.8rem;color:var(--text-mute);min-width:46px;text-align:right;}
@media (max-width:880px){.ledger-grid{grid-template-columns:1fr;gap:34px;}}

/* ---------- Corridor timeline ---------- */
.corridor{padding:var(--section-y) 0;background:var(--slate);}
.corridor h2{margin-bottom:16px;}
.corridor .lede{margin-bottom:46px;}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;counter-reset:none;}
.timeline li{border-top:2px solid var(--teal);padding-top:20px;}
.timeline .when{font-size:.78rem;color:var(--teal-lt);margin-bottom:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;}
.timeline h3{margin-bottom:10px;}
.timeline p:last-child{font-size:.93rem;color:var(--text-mute);}
@media (max-width:880px){.timeline{grid-template-columns:1fr;gap:26px;}}

/* ---------- Gallery ----------
   Moved off the paper/light background onto the dark shell: a moody grid
   with a darkening image treatment reads far better than a bright white
   grid when the photography itself is placeholder stock. */
.gallery{padding:var(--section-y) 0;background:var(--slate-black);}
.gallery h2{margin-bottom:16px;}
.gallery .lede{margin-bottom:44px;}

/* ---------- Why MEK Grand City ---------- */
.why-city{padding:var(--section-y) 0;background:var(--slate-deep);}
.why-city h2{margin-bottom:16px;max-width:26ch;}
.why-city .lede{margin-bottom:40px;max-width:70ch;}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.gal figure{position:relative;overflow:hidden;border-radius:2px;aspect-ratio:4/3;margin:0;background:var(--slate);}
.gal figure.wide{grid-column:span 2;aspect-ratio:8/3;}
.gal img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.86);}
.gal figure::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(10,17,20,.82) 0%,rgba(10,17,20,0) 42%);
}
.gal figcaption{
  position:absolute;left:14px;bottom:12px;z-index:1;font-size:.78rem;font-weight:600;
  letter-spacing:.02em;color:var(--text-light);
}
@media (max-width:820px){
  .gal{grid-template-columns:repeat(2,1fr);}
  .gal figure.wide{grid-column:span 2;}
}

/* ---------- Floor Plan showcase ----------
   Base section chrome only — the multi-option switcher itself
   (.fp-switcher/.fp-opt/.fp-panel/.fp-frame/.fp-soon) lives in
   css/enhancements.css next to its JS (js/enhancements.js fpSwitcher()),
   the same pairing pattern used for .amen-tabs/.hotspot. */
.floorplan{padding:var(--section-y) 0;background:var(--slate);}
.floorplan h2{margin-bottom:16px;}
.floorplan .lede{margin-bottom:40px;}
.floorplan-cta{margin:0;}

/* Per-project floor plan block, now embedded inside #homes/#offices
   instead of a shared standalone section (see index.html). */
.floorplan-switcher-wrap{margin-top:56px;padding-top:40px;border-top:1px solid var(--slate-line-soft);}
.floorplan-switcher-wrap h3{margin-bottom:16px;}
.floorplan-switcher-wrap .lede{margin-bottom:32px;}

/* ---------- FAQ ---------- */
.faq{padding:var(--section-y) 0;background:var(--slate-deep);}
.faq h2{margin-bottom:36px;}
.faq-list{max-width:780px;}
.faq details{border-bottom:1px solid var(--slate-line-soft);}
.faq summary{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-family:var(--display);font-size:1.35rem;color:var(--text-light);
  transition:color .16s ease;
}
.faq summary:hover{color:var(--marigold-lt);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-family:var(--body);font-size:1.5rem;color:var(--marigold);line-height:1;}
.faq details[open] summary::after{content:"\2013";}
.faq details p{padding-bottom:22px;font-size:.98rem;color:var(--text-mute);max-width:66ch;}

/* ---------- Closing ---------- */
.closing{padding:var(--section-y) 0;background:var(--slate-soft);border-top:1px solid var(--slate-line);}
.closing-in{display:grid;grid-template-columns:1fr .82fr;gap:54px;align-items:center;}
.closing h2{margin-bottom:18px;}
.closing .lede{margin-bottom:28px;}
.closing-cta{display:flex;gap:13px;flex-wrap:wrap;}
@media (max-width:900px){.closing-in{grid-template-columns:1fr;gap:36px;}}

/* ---------- Maps ---------- */
.maps{padding:var(--section-y) 0;background:var(--slate-deep);}
.maps h2{margin-bottom:32px;}
.map-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.map-grid figure{margin:0;}
.map-grid iframe{width:100%;height:310px;border:0;border-radius:4px;filter:grayscale(.3);}
.map-grid figcaption{margin-top:10px;font-size:.88rem;color:var(--text-mute);}
@media (max-width:800px){.map-grid{grid-template-columns:1fr;}}
.map-single{margin:0;}
.map-single iframe{width:100%;height:420px;border:0;border-radius:4px;filter:grayscale(.3);}
.map-single figcaption{margin-top:12px;font-size:.92rem;color:var(--text-mute);max-width:60ch;}
@media (max-width:600px){.map-single iframe{height:300px;}}

/* ---------- Footer ---------- */
.site-foot{background:var(--slate-black);padding:56px 0 110px;font-size:.9rem;color:var(--text-mute);}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:38px;margin-bottom:36px;}
.foot-brand{font-family:var(--display);font-size:1.3rem;color:var(--text-light);margin-bottom:8px;}
.site-foot h3,.foot-label{font-size:1.02rem;color:var(--text-light);margin-bottom:12px;font-weight:700;}
.site-foot li{padding:4px 0;}
.site-foot a:hover{color:var(--marigold-lt);}
.legal{border-top:1px solid var(--slate-line);padding-top:22px;font-size:.76rem;line-height:1.66;color:#7E8F8D;max-width:95ch;}
.legal + .legal{border-top:none;padding-top:14px;}
.copy{display:block;margin-top:12px;}
@media (max-width:800px){.foot-grid{grid-template-columns:1fr;gap:26px;}}

/* ---------- Mobile action bar ---------- */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  grid-template-columns:1fr 1fr 1fr;
  background:var(--slate);border-top:1px solid var(--slate-line);
}
.mobile-bar a,.mobile-bar button{
  display:flex;align-items:center;justify-content:center;
  padding:14px 6px;text-align:center;font-size:.86rem;font-weight:600;font-family:inherit;
  color:var(--text-light);border-right:1px solid var(--slate-line);
  background:none;border-top:0;border-bottom:0;border-left:0;cursor:pointer;
}
.mobile-bar a:last-child,.mobile-bar button:last-child{border-right:0;}
.mobile-bar a.primary,.mobile-bar button.primary{background:var(--marigold);color:#16262B;}
@media (max-width:900px){.mobile-bar{display:grid;}}

/* Floating WhatsApp button: always visible bottom-right, on every screen
   size. On mobile it's raised above .mobile-bar (which occupies the full
   bottom strip with its own Call/WhatsApp/Price sheet buttons) and sized
   down, so the two don't overlap or compete for the same corner. */
.whatsapp-float{
  position:fixed;right:20px;bottom:24px;z-index:88;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform .15s ease;
}
.whatsapp-float:hover{transform:scale(1.08);}
.whatsapp-float::before,
.whatsapp-float::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:#25D366;z-index:-1;
  animation:whatsapp-ripple 2.2s ease-out infinite;
}
.whatsapp-float::after{animation-delay:.7s;}
@keyframes whatsapp-ripple{
  0%{opacity:.45;transform:scale(1);}
  100%{opacity:0;transform:scale(1.9);}
}
@media (prefers-reduced-motion:reduce){
  .whatsapp-float::before,.whatsapp-float::after{animation:none;display:none;}
}
@media (max-width:900px){
  .whatsapp-float{width:44px;height:44px;right:12px;bottom:78px;}
}

/* ---------- Pull-quote / stat callout ----------
   A full-bleed break between the residential and commercial sections:
   oversized editorial pull-quote plus a row of stat callouts, framed by
   angled top/bottom edges so it doesn't read as just another rectangle. */
.callout{
  position:relative;padding:calc(var(--section-y) * .85) 0;
  background:var(--slate-black);overflow:hidden;
}
.callout::before,.callout::after{
  content:"";position:absolute;left:0;right:0;height:48px;background:var(--slate-deep);
}
.callout::before{top:0;clip-path:polygon(0 0,100% 0,100% 100%,0 60%);}
.callout::after{bottom:0;clip-path:polygon(0 40%,100% 0,100% 100%,0 100%);}
.callout-in{position:relative;text-align:center;max-width:920px;margin:0 auto;padding:0 var(--gutter);}
.callout blockquote{
  font-family:var(--display);font-weight:400;font-style:italic;
  font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.22;color:var(--text-light);
  margin:0 0 36px;
}
.callout blockquote span{color:var(--marigold-lt);font-style:normal;}
.callout-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 54px;}
.callout-stats div{text-align:center;}
.callout-stats dd{font-family:var(--display);font-size:clamp(1.8rem,3.2vw,2.5rem);color:var(--teal-lt);}
.callout-stats dt{font-size:.76rem;color:var(--text-mute);text-transform:uppercase;letter-spacing:.1em;margin-top:4px;}