/* ==========================================================================
   Smartz Spaces- Commercial Real Estate, Gurgaon & Delhi NCR
   Design tokens
   ========================================================================== */
:root{
  --navy: #0A2A5C;
  --navy-deep: #071B3E;
  --navy-bright: #1B4E96;
  --red: #D0021B;
  --red-deep: #A8010F;
  --red-bright: #FF3B4E;
  --silver: #9AA4B2;
  --ink: #14181F;
  --paper: #FFFFFF;
  --fog: #F4F6F9;
  --line: #E3E7EE;
  --muted: #5C6674;

  --grad-red: linear-gradient(135deg, var(--red-bright) 0%, var(--red-deep) 100%);
  --grad-navy: linear-gradient(135deg, var(--navy-bright) 0%, var(--navy-deep) 100%);
  --grad-hero: linear-gradient(150deg, var(--navy-deep) 0%, var(--navy) 45%, var(--navy-bright) 85%, #2A5FAE 100%);
  --grad-gold: linear-gradient(120deg, #FF9A3D 0%, var(--red) 100%);

  --font-head: "Sora", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  --container: 1200px;
  --radius: 6px;
  --shadow: 0 12px 32px -18px rgba(10,42,92,0.35);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--navy);
  margin:0 0 .5em;
  line-height:1.15;
  letter-spacing:-0.01em;
}
p{ margin:0 0 1em; color:var(--muted); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--red); color:#fff; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}
.section{ padding:88px 0; }
.section--tight{ padding:56px 0; }
.section--fog{ background:var(--fog); }
.section--navy{ background:var(--navy); color:#fff; }
.section--navy h2, .section--navy h3{ color:#fff; }
.section--navy p{ color:#C6D2E6; }

.eyebrow{
  font-size:13px;
  font-weight:600;
  color:var(--red);
  margin-bottom:12px;
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:22px; height:2px;
  background:var(--grad-red);
  margin-right:10px;
  vertical-align:middle;
}
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head h2{ font-size:clamp(28px,3.4vw,40px); }
.section-head p{ font-size:17px; }
.section-head--center{ margin-left:auto; margin-right:auto; text-align:center; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px;
  border-radius:2px;
  font-weight:600;
  font-size:15px;
  border:1px solid transparent;
  transition:transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--grad-red); color:#fff; box-shadow:0 10px 22px -10px rgba(208,2,27,.55); }
.btn-primary:hover{ background:var(--red-deep); box-shadow:0 14px 26px -10px rgba(208,2,27,.65); }
.btn-outline{ background:transparent; border-color:rgba(255,255,255,.4); color:#fff; }
.btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn-navy{ background:var(--grad-navy); color:#fff; box-shadow:0 10px 22px -10px rgba(10,42,92,.5); }
.btn-navy:hover{ background:var(--navy-deep); }
.btn-ghost{ background:transparent; color:var(--navy); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--navy); }
.btn-sm{ padding:10px 18px; font-size:13px; }
.btn-block{ width:100%; }

/* ==========================================================================
   Header
   ========================================================================== */
.topbar{
  background:var(--navy-deep);
  color:#B9C6DE;
  font-size:13px;
}
.topbar .container{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:8px; padding-bottom:8px;
}
.topbar a{ color:#fff; }
.topbar__contact{ display:flex; gap:22px; }
.topbar__contact span{ display:inline-flex; align-items:center; gap:6px; }
.topbar__tag{ opacity:.8; letter-spacing:.02em; }

/* CRITICAL FIX: .site-header is position:sticky, which per the CSS spec
   creates a containing block for any position:fixed descendant (sticky
   counts as "not static" just like relative/absolute do). Since the
   mobile drawer (.nav__links) and its pinned CTA (.nav__cta) are both
   nested inside .site-header, their "fixed" positioning was silently
   resolving relative to the HEADER's own small box instead of the real
   viewport- which is exactly why the CTA rendered near the top of the
   screen instead of pinned to the bottom. Temporarily un-stickying the
   header while the drawer is open removes it as a containing block, so
   the drawer's fixed children correctly measure against the real
   viewport again. Safe to do unconditionally- the page is already
   scroll-locked (overflow:hidden) whenever this class is present, so
   there's nothing for the sticky behavior to visibly do anyway. */
body.nav-drawer-open .site-header{ position:static; backdrop-filter:none; -webkit-backdrop-filter:none; }

.site-header{
  position:sticky; top:0; z-index:300;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:height .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-scrolled{
  box-shadow:0 8px 24px -16px rgba(10,42,92,.25);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:82px; transition:height .25s var(--ease);
}
.site-header.is-scrolled .container{ height:66px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:40px; width:auto; transition:height .25s var(--ease); }
.site-header.is-scrolled .brand img{ height:32px; }

.nav{ display:flex; align-items:center; gap:36px; }
.nav__links{ display:flex; gap:30px; align-items:center; }
.nav__links > li{ position:relative; }
.nav__links a{
  font-size:14.5px; font-weight:600; color:var(--navy);
  position:relative; padding:6px 0;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--grad-red); transition:width .2s var(--ease);
}
.nav__links a:hover::after, .nav__links a.is-active::after{ width:100%; }
.nav__links a.is-active{ color:var(--red); }

/* Projects dropdown */
.has-dropdown > a{ display:flex; align-items:center; gap:5px; }
.has-dropdown > a::before{
  content:""; width:6px; height:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); order:2; margin-top:-3px; transition:transform .2s var(--ease);
}
.dropdown{
  position:absolute; top:100%; left:-16px; margin-top:14px;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  box-shadow:var(--shadow); min-width:190px; padding:8px;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index:50;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.is-open .dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.has-dropdown:hover > a::before, .has-dropdown.is-open > a::before{ transform:rotate(225deg); margin-top:3px; }
.dropdown a{ display:block; padding:9px 12px; font-size:13.5px; border-radius:5px; }
.dropdown a::after{ display:none; }
.dropdown a:hover{ background:var(--fog); color:var(--red); }
.nav__cta{ display:flex; align-items:center; gap:14px; }
.nav__phone{ font-weight:700; font-size:15px; color:var(--navy); display:flex; align-items:center; gap:8px; }
.nav__phone svg{ color:var(--red); }
@media (max-width:760px){
  .site-header, .site-header .container, .brand img{ transition:none; }
  .site-header.is-scrolled .container, .site-header .container{ height:70px; }
  .site-header.is-scrolled .brand img{ height:36px; }
}

.nav-toggle{
  display:none; background:none; border:0; padding:8px;
  flex-direction:column; gap:5px;
}
.nav-toggle span{ width:24px; height:2px; background:var(--navy); display:block; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  background:var(--grad-hero);
  color:#fff;
  overflow:hidden;
}
.hero__skyline{
  position:absolute; left:0; right:0; bottom:0; height:46%;
  opacity:.5; pointer-events:none;
}
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.6), transparent 70%);
}

/* Hero background video- plays if assets/video/hero-loop.mp4 exists,
   otherwise this layer stays empty and the gradient/skyline behind it shows. */
.hero__video-layer{
  position:absolute; inset:0; overflow:hidden; z-index:0;
}
.hero__video-layer video, .hero__video-layer iframe{
  position:absolute; top:50%; left:50%; min-width:100%; min-height:100%;
  width:auto; height:auto; transform:translate(-50%,-50%);
  object-fit:cover; opacity:0; transition:opacity 1.2s var(--ease);
  border:0; pointer-events:none;
}
.hero__video-layer iframe{ width:177.77vh; height:56.25vw; min-height:100%; min-width:100%; }
.hero__video-layer video.is-ready, .hero__video-layer iframe.is-ready{ opacity:1; }
.hero__video-layer::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(155deg, rgba(7,27,62,.92) 0%, rgba(10,42,92,.82) 55%, rgba(22,58,110,.85) 100%);
}
.hero__skyline, .hero__grid{ z-index:1; }
.hero .container{ z-index:2; }

/* Ken-Burns style slow-motion background used sparingly (CTA band only) */
.cta-band{ position:relative; }
.cta-band__bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:.16; animation:kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.12) translate(-1.5%, -1%); }
}
.cta-band > *{ position:relative; z-index:1; }

@media (prefers-reduced-motion: reduce){
  .cta-band__bg{ animation:none; }
  .hero__video-layer video{ transition:none; }
}
.hero .container{
  position:relative; z-index:2;
  padding-top:96px; padding-bottom:120px;
  display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:end;
}
.hero__tag{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; font-weight:600; letter-spacing:.04em;
  color:#FF6B76; margin-bottom:22px;
}
.hero__tag span.dot{ width:7px; height:7px; border-radius:50%; background:var(--red); }
.hero h1{
  color:#fff;
  font-size:clamp(36px,5.4vw,64px);
  margin-bottom:20px;
  max-width:16ch;
}
.hero h1 em{
  font-style:normal;
  background:var(--grad-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__desc{
  color:#C6D2E6; font-size:18px; max-width:52ch; margin-bottom:32px;
}
.hero__segments{
  display:flex; flex-wrap:wrap; gap:10px 26px;
  font-size:13.5px; font-weight:600; letter-spacing:.03em; color:#8FA3C4;
  margin-bottom:36px;
}
.hero__segments span{ position:relative; padding-left:16px; }
.hero__segments span::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:6px; height:6px; background:var(--red);
}
.hero__actions{ display:flex; gap:16px; flex-wrap:wrap; }

.hero__panel{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
  border-radius:var(--radius);
  padding:32px;
}
.hero__panel h3{ color:#fff; font-size:18px; }
.hero__panel p{ color:#B9C6DE; font-size:14.5px; }
.hero__stats{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:22px; }
.hero__stat b{
  display:block; font-family:var(--font-head); font-size:30px; color:#fff;
}
.hero__stat span{ font-size:12.5px; color:#8FA3C4; }

/* Marquee strip under hero */
.strip{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:22px 0;
  overflow:hidden;
}
.strip__label-row{ margin-bottom:12px; }
.strip__label{ font-size:12.5px; font-weight:700; color:var(--muted); }
.strip__track-wrap{ display:flex; width:max-content; animation:marquee 28s linear infinite; }
.strip:hover .strip__track-wrap{ animation-play-state:paused; }
.strip__track{ display:flex; align-items:center; gap:48px; padding-right:48px; flex-shrink:0; }
.strip__logo{ height:64px; display:flex; align-items:center; }
.strip__logo img{ height:100%; width:auto; max-width:120px; object-fit:contain; filter:grayscale(1); opacity:.55; transition:opacity .2s, filter .2s; }
.strip__logo img:hover{ filter:grayscale(0); opacity:1; }
.strip__logo-text{ font-weight:700; font-size:15px; color:var(--silver); white-space:nowrap; }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .strip__track-wrap{ animation:none; }
  .strip__track--copy{ display:none; }
}

/* ==========================================================================
   Segment cards
   ========================================================================== */
.seg-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.seg-card{
  background:#fff; padding:36px 28px; transition:background .2s var(--ease);
}
.seg-card:hover{ background:var(--fog); }
.seg-card__num{ font-size:12.5px; color:var(--red); font-weight:700; margin-bottom:18px; }
.seg-card h3{ font-size:19px; margin-bottom:10px; }
.seg-card p{ font-size:14.5px; margin-bottom:16px; }
.seg-card a{ font-size:13.5px; font-weight:700; color:var(--navy); }
.seg-card a:hover{ color:var(--red); }

/* ==========================================================================
   Project cards
   ========================================================================== */
.filters{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px;
}
.filters button{
  background:#fff; border:1px solid var(--line); color:var(--navy);
  padding:10px 18px; font-size:13.5px; font-weight:600; border-radius:20px;
  transition:all .18s var(--ease);
}
.filters button:hover{ border-color:var(--navy); }
.filters button.is-active{ background:var(--navy); color:#fff; border-color:var(--navy); }

.project-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.pcard{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  overflow:hidden; display:flex; flex-direction:column; position:relative;
  box-shadow:0 6px 18px -14px rgba(10,42,92,.25);
  transition:box-shadow .22s var(--ease), transform .22s var(--ease);
}
.pcard::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad-red); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease); z-index:2;
}
.pcard:hover::before{ transform:scaleX(1); }
.pcard:hover{ box-shadow:var(--shadow); transform:translateY(-6px); }
.pcard__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--navy-deep); }
.pcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.pcard:hover .pcard__media img{ transform:scale(1.08); }
.pcard__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, transparent 55%, rgba(7,27,62,.55) 100%);
  pointer-events:none;
}
/* Blog cover images are already fully-designed graphics (their own text,
   icons, colour treatment baked in)- the dark corner gradient above is
   meant for plain project photos so overlaid badges stay legible. Doubling
   that darkening on top of an already-designed blog image is what was
   making it look muddy/"deep" instead of clean, so blog cards skip it. */
.blog-card .pcard__media::after{ content:none; background:none; }
/* Blog covers are designed graphics (title/logo baked into the image), and
   they are NOT all the same shape - the current set is 1200x800, a future
   upload could be anything. So we deliberately hardcode NO aspect-ratio
   here: the box takes its height from the image's own natural ratio, which
   means nothing is ever cropped no matter what size gets uploaded. */
.blog-card .pcard__media{ aspect-ratio:auto; height:auto; background:var(--navy-deep); }
.blog-card .pcard__media img{ width:100%; height:auto; aspect-ratio:auto; object-fit:fill; display:block; }
/* Blog cards use a bare .pcard__tag (not the .pcard__badges wrapper that
   project cards use), so it needs its own absolute positioning here.
   Without this it sat in normal flow and pushed the image down, leaving a
   navy strip above it. z-index keeps it above the image on hover-zoom. */
.blog-card .pcard__tag{
  position:absolute; top:14px; left:14px; z-index:3; max-width:calc(100% - 28px);
}
/* line-height/font-size 0 removes the inline-baseline gap under the image
   that would otherwise show a sliver of the navy box background. */
.blog-card .pcard__media{ font-size:0; line-height:0; }
/* Badges sit in one flex row (instead of two independently-positioned
   absolute spans) so a long type label and a long status label never
   overlap- the row simply wraps to two lines when both are long. */
.pcard__badges{
  position:absolute; top:14px; left:14px; right:14px; z-index:1;
  display:flex; justify-content:space-between; align-items:flex-start; gap:8px;
}
.pcard__tag{
  max-width:60%;
  background:var(--grad-red); color:#fff; font-size:11px; font-weight:700;
  padding:5px 10px; border-radius:10px; letter-spacing:.02em;
  line-height:1.3; white-space:normal;
}
.pcard__status{
  max-width:48%; margin-left:auto;
  background:rgba(7,27,62,.82); color:#fff; font-size:10.5px; font-weight:600;
  padding:5px 10px; border-radius:10px; text-align:right; line-height:1.3; white-space:normal;
}
.pcard__featured{
  position:absolute; bottom:14px; left:14px; z-index:1;
  background:rgba(255,255,255,.92); color:var(--navy); font-size:11px; font-weight:700;
  padding:5px 11px; border-radius:20px; display:flex; align-items:center; gap:5px;
}
.pcard__body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.pcard__loc{ font-size:12.5px; color:var(--muted); display:flex; gap:6px; align-items:flex-start; }
.pcard h3{ font-size:19px; margin-bottom:0; }
.pcard__dev{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700;
  color:var(--navy); background:var(--fog); padding:4px 10px; border-radius:20px;
  width:fit-content; margin-top:-2px;
}
.pcard__meta{
  display:flex; justify-content:space-between; gap:14px; font-size:12px; color:var(--muted);
  border-top:1px dashed var(--line); padding-top:12px; margin-top:auto;
}
.pcard__meta span{
  display:flex; flex-direction:column; gap:3px; flex:1; min-width:0;
}
.pcard__meta b{
  display:block; color:var(--navy); font-size:14.5px; font-family:var(--font-head);
  line-height:1.25; word-break:break-word; font-weight:600;
}
.pcard__meta .pcard__meta--price{ flex:1.1; }
.pcard__meta .pcard__meta--price b{
  background:var(--grad-red); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pcard__cta{ display:flex; gap:10px; margin-top:14px; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
/* Grid tracks default to min-width:auto, which means a track will refuse
   to shrink smaller than its content's natural ("min-content") width. A
   long, unbroken value inside .spec-grid (see below) was doing exactly
   that- forcing this column wider than the screen, which pushed the
   whole two-column layout past the viewport and made mobile browsers
   render/zoom the page as if it were a desktop layout. min-width:0 lets
   the track shrink normally and let its own content wrap instead. */
.grid-2 > *{ min-width:0; }

/* Subtle background image accent- used sparingly on a couple of sections
   so the site feels alive without turning busy.
   NOTE: this uses a real element (.section-accent-bg), not a ::before +
   CSS-variable url(), on purpose. A url() inside var() that's consumed by
   a rule living in this external stylesheet resolves relative to THIS
   FILE's folder (assets/css/), not the HTML page- so a path like
   "assets/img/x.svg" set inline on the section would silently 404 as
   "assets/css/assets/img/x.svg". A real element's inline background-image
   resolves relative to the page instead, which is what we want here. */
.section--image-accent{ position:relative; overflow:hidden; }
.section-accent-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:.055; pointer-events:none;
}
.section--image-accent > .container{ position:relative; z-index:1; }
.why-item{ display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--line); }
.why-item:last-child{ border-bottom:0; }
.why-item__num{ font-family:var(--font-head); font-size:22px; color:var(--red); min-width:44px; }
.why-item h4{ font-size:17px; margin-bottom:6px; }
.why-item p{ font-size:14.5px; margin:0; }

/* Locations */
.loc-card{
  position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5;
  background:var(--navy-deep) center/cover no-repeat; color:#fff;
  transition:transform .3s var(--ease);
}
.loc-card:hover{ transform:translateY(-4px); }
.loc-card__fill{
  position:absolute; inset:0;
  background:linear-gradient(190deg, rgba(10,42,92,.15) 0%, rgba(7,27,62,.55) 55%, rgba(168,1,15,.55) 100%);
  transition:opacity .3s var(--ease);
}
.loc-card:hover .loc-card__fill{ opacity:.85; }
.loc-card__body{ position:absolute; left:0; right:0; bottom:0; padding:22px; }
.loc-card h4{ color:#fff; font-size:19px; margin-bottom:4px; }
.loc-card span{ font-size:12.5px; color:#B9C6DE; }

/* Process steps */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.step{ position:relative; padding:0 22px; }
.step::before{
  content:""; position:absolute; top:19px; left:-11%; width:22%; height:2px; background:var(--line);
}
.step:first-child::before{ display:none; }
.step__num{
  width:38px; height:38px; border-radius:50%; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700;
  margin-bottom:16px; position:relative; z-index:1;
}
.step h4{ font-size:16px; margin-bottom:6px; }
.step p{ font-size:13.5px; }

/* Testimonials */
.quote-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px;
}
.quote-card p{ color:var(--ink); font-size:15.5px; }
.quote-card__who{ display:flex; align-items:center; gap:12px; margin-top:16px; }
.quote-card__avatar{
  width:42px; height:42px; border-radius:50%; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-head);
}
.quote-card__who b{ display:block; font-size:14px; color:var(--navy); }
.quote-card__who span{ font-size:12.5px; color:var(--muted); }

/* CTA band */
.cta-band{
  background:linear-gradient(120deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff; border-radius:var(--radius);
  padding:52px; display:flex; justify-content:space-between; align-items:center; gap:32px;
  position:relative; overflow:hidden;
}
.cta-band::after{
  content:""; position:absolute; right:-40px; top:-40px; width:220px; height:220px;
  background:var(--red); opacity:.15; border-radius:50%;
}
.cta-band h3{ color:#fff; font-size:26px; margin-bottom:6px; }
.cta-band p{ color:#C6D2E6; margin:0; }
.cta-band__actions{ display:flex; gap:14px; flex-shrink:0; }

/* Forms */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field label{ font-size:13px; font-weight:600; color:var(--navy); }
.field input, .field select, .field textarea{
  border:1px solid var(--line); border-radius:8px; padding:13px 14px; font:inherit; color:var(--ink);
  background:#fff; transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 4px rgba(10,42,92,.1);
}
.field--full{ grid-column:1/-1; }
.form-note{ font-size:12px; color:var(--muted); margin-top:6px; }
.form-success{
  display:none; background:#EAF7EE; border:1px solid #BEE8C8; color:#1D6B33;
  padding:14px 16px; border-radius:8px; font-size:14px; margin-top:16px;
  align-items:center; gap:10px;
}
.form-success.is-visible{ display:flex; animation:pop-in .35s var(--ease); }
@keyframes pop-in{ from{ opacity:0; transform:translateY(6px) scale(.98); } to{ opacity:1; transform:none; } }
.form-error{
  display:none; background:#FDECEC; border:1px solid #F5C2C2; color:#A8281C;
  padding:14px 16px; border-radius:8px; font-size:13.5px; margin-top:16px;
}
.form-error.is-visible{ display:block; animation:pop-in .35s var(--ease); }

/* Icon-prefixed inputs- used on every enquiry form for a more finished,
   "premium product" feel instead of bare text boxes. */
.field--icon{ position:relative; margin-bottom:14px; }
.field--icon input{ padding-left:44px; }
.field__icon{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--muted); pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.field__icon svg{ width:100%; height:100%; }
.field--icon input:focus + .field__icon,
.field--icon:focus-within .field__icon{ color:var(--red); }

/* Chip-style choice group (replaces plain <select> for a more interactive,
   "live" feel- e.g. "Interested in" / "Budget range" on the contact form) */
.chip-group{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  border:1px solid var(--line); background:#fff; color:var(--navy);
  font-size:13px; font-weight:600; padding:9px 16px; border-radius:20px;
  cursor:pointer; transition:all .18s var(--ease);
}
.chip:hover{ border-color:var(--navy); }
.chip.is-selected{ background:var(--grad-navy); border-color:transparent; color:#fff; }

/* Enquiry card- small gradient accent bar + soft elevated feel */
.enquiry-card{
  border:1px solid var(--line); border-radius:14px; padding:28px;
  box-shadow:var(--shadow); background:#fff; position:relative; overflow:hidden;
}
.enquiry-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad-red);
}
.enquiry-card h3{ font-size:19px; }
.enquiry-card .price{ font-family:var(--font-head); color:var(--red); font-size:24px; }

/* Breadcrumb */
.breadcrumb{ font-size:13px; color:var(--muted); padding:22px 0; }
.breadcrumb a{ color:var(--navy); font-weight:600; }
.breadcrumb span{ margin:0 8px; }

/* Page banner- image-backed breadcrumb band used on inner pages, so the
   site doesn't switch straight from a photographic hero to flat white on
   every subsequent click. Alternates between a small set of moods rather
   than reusing one image everywhere. */
.page-banner{
  position:relative; background:var(--navy-deep) center/cover no-repeat;
  padding:46px 0 34px; color:#fff; overflow:hidden;
}
.page-banner::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(7,27,62,.9) 0%, rgba(10,42,92,.72) 100%);
}
.page-banner > .container{ position:relative; z-index:1; }
.page-banner .eyebrow-tag{
  font-size:12.5px; font-weight:700; letter-spacing:.04em; color:#FF8A92; margin-bottom:6px;
}
.page-banner h1{ color:#fff; font-size:clamp(22px,2.6vw,30px); margin-bottom:10px; }
.page-banner .breadcrumb{ color:#B9C6DE; padding:0; font-size:12.5px; }
.page-banner .breadcrumb a{ color:#fff; }

/* Blog post featured image- shown as a normal in-page photo above the
   article body, instead of stretched behind the title as the page-banner
   background (that looked broken for the graphic-style cover images,
   which are designed as flat 1200x630 cards, not photos meant to be
   cropped/darkened behind text). */
.blog-featured-img{
  width:100% !important; height:auto !important;
  aspect-ratio:auto !important; object-fit:fill !important;
  max-height:none !important; display:block;
  border-radius:14px; margin:18px 0 26px;
  background:linear-gradient(135deg, var(--navy-deep), var(--navy-bright));
  box-shadow:0 10px 30px rgba(10,30,70,.14);
}

/* Alternating "photo" section- full-bleed image with a dark readable
   overlay, used sparingly (roughly every other major section) rather than
   on the whole site, so it reads as a deliberate rhythm. */
.section--photo{
  position:relative; background:var(--navy-deep) center/cover no-repeat; color:#fff;
}
.section--photo::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(165deg, rgba(7,27,62,.93) 0%, rgba(10,42,92,.8) 60%, rgba(27,78,150,.72) 100%);
}
.section--photo > .container{ position:relative; z-index:1; }
.section--photo h2, .section--photo h3, .section--photo h4{ color:#fff; }
.section--photo p{ color:#C6D2E6; }
.section--photo .seg-grid{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.14); }
.section--photo .seg-card{ background:rgba(13,34,68,.55); backdrop-filter:blur(6px); }
.section--photo .seg-card:hover{ background:rgba(13,34,68,.78); }
.section--photo .seg-card h3, .section--photo .seg-card a{ color:#fff; }
.section--photo .seg-card p{ color:#B9C6DE; }
.section--photo .step__num{ background:var(--grad-red); }
.section--photo .step h4{ color:#fff; }
.section--photo .step p{ color:#B9C6DE; }
.section--photo .step::before{ background:rgba(255,255,255,.18); }

/* Detail page specifics */
.detail-hero{
  background:var(--navy-deep); color:#fff; padding:36px 0 0;
}
.detail-hero__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; }
.detail-hero h1{ color:#fff; font-size:clamp(26px,3.4vw,38px); margin-bottom:8px; max-width:none; }
.detail-hero__loc{ color:#B9C6DE; font-size:14.5px; }
.badge{
  display:inline-block; font-size:12px; font-weight:700; padding:5px 12px; border-radius:2px;
}
.badge--type{ background:var(--red); color:#fff; }
.badge--status{ background:rgba(255,255,255,.14); color:#fff; }
.detail-gallery{ margin-top:28px; border-radius:var(--radius) var(--radius) 0 0; overflow:hidden; }
.detail-gallery img{ width:100%; aspect-ratio:21/9; object-fit:cover; }

.spec-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:32px 0; min-width:0; }
.spec{ background:#fff; padding:20px; min-width:0; }
.spec b{ overflow-wrap:break-word; word-break:break-word; }
.spec span{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.spec b{ font-family:var(--font-head); color:var(--navy); font-size:17px; }

.tick-list li{ position:relative; padding-left:26px; margin-bottom:10px; font-size:14.5px; color:var(--ink); }

/* Blog article typography */
.blog-content{ font-size:16px; line-height:1.75; color:var(--ink); margin-top:24px; }
.blog-content h2{ font-size:22px; margin-top:40px; margin-bottom:14px; }
.blog-content h3{ font-size:18px; margin-top:28px; margin-bottom:10px; }
.blog-content p{ color:var(--ink); margin-bottom:18px; }
.blog-content ul, .blog-content ol{ margin:0 0 18px; padding-left:22px; }
.blog-content li{ margin-bottom:8px; }
.blog-content a{ color:var(--red); text-decoration:underline; }
.blog-content img{ border-radius:10px; margin:24px 0; }
.blog-content blockquote{
  border-left:3px solid var(--red); padding:4px 20px; margin:24px 0;
  font-style:italic; color:var(--muted);
}
.blog-card .pcard__loc{ color:var(--muted); }
.tick-list li::before{ content:"✓"; position:absolute; left:0; color:var(--red); font-weight:700; }

/* Links added inside a project's Description text (via the admin
   panel's "Insert link" button) get this class automatically, so a
   link reads as clickable instead of blending into the paragraph. */
.project-link{ color:var(--red); text-decoration:underline; text-underline-offset:2px; font-weight:600; }
.project-link:hover{ color:var(--red-deep); }

/* Related reads / explore links at the bottom of a blog post. */
.related-links{
  margin-top:40px; padding:32px; border-radius:18px;
  background:var(--navy-deep);
  display:grid; grid-template-columns:1fr 1fr; gap:10px 28px;
}
.related-links__col h3{
  font-size:12px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--red-bright); font-weight:800; margin:0 0 14px;
  padding-bottom:10px; border-bottom:2px solid rgba(255,255,255,.12);
}
.related-links__item{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 16px; margin-bottom:8px; border-radius:11px;
  background:rgba(255,255,255,.05); color:#fff; font-weight:600; font-size:14.5px;
  text-decoration:none; transition:background .18s var(--ease), transform .18s var(--ease);
}
.related-links__item span{
  width:26px; height:26px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-red); color:#fff; font-size:13px;
  transition:transform .2s var(--ease);
}
.related-links__item:hover{ background:rgba(255,255,255,.12); transform:translateX(2px); }
.related-links__item:hover span{ transform:translateX(3px); }
@media (max-width:640px){
  .related-links{ grid-template-columns:1fr; padding:22px 18px; }
}

/* RERA note */
.rera-box{
  background:var(--fog); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; font-size:12.5px; color:var(--muted); margin-top:24px;
}
.rera-box b{ color:var(--navy); }

/* Footer */
.site-footer{ background:var(--navy-deep); color:#B9C6DE; padding-top:64px; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-grid h4{ color:#fff; font-size:14.5px; margin-bottom:18px; letter-spacing:.02em; }
.footer-grid ul li{ margin-bottom:11px; font-size:14px; }
.footer-grid ul li a:hover{ color:#fff; }
.footer-brand img{ height:36px; margin-bottom:16px; }
.footer-brand p{ color:#8FA3C4; font-size:13.5px; max-width:34ch; }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{
  width:36px; height:36px; border:1px solid rgba(255,255,255,.18); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.footer-social a svg{ width:16px; height:16px; fill:#B9C6DE; }
.footer-social a:hover{ background:var(--red); border-color:var(--red); }
.footer-social a:hover svg{ fill:#fff; }
.footer-bottom{
  display:flex; justify-content:space-between; padding:20px 0; font-size:12.5px; color:#7488A8; flex-wrap:wrap; gap:8px;
}
.footer-bottom a:hover{ color:#fff; }
.footer-credit{ display:inline-flex; align-items:center; gap:5px; }
.footer-credit a{ color:#9AAAC4; font-weight:600; }
.footer-credit a:hover{ color:#fff; }
.footer-credit__heart{ display:inline-block; color:var(--red-bright); animation:footer-heartbeat 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .footer-credit__heart{ animation:none; } }
@keyframes footer-heartbeat{
  0%, 100%{ transform:scale(1); }
  15%{ transform:scale(1.3); }
  30%{ transform:scale(1); }
  45%{ transform:scale(1.22); }
  60%{ transform:scale(1); }
}

/* ---------------------------------------------------------------------
   Speed-dial FAB- replaces three separate always-visible buttons
   (call, WhatsApp, quick assistant) with one button that expands into a
   small menu, so the corner of the screen isn't permanently cluttered.
   ------------------------------------------------------------------- */
.fab{ position:fixed; right:22px; bottom:22px; z-index:200; }
.fab__main{
  width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
  background:var(--grad-red); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.45); position:relative; z-index:2;
  transition:transform .3s var(--ease), background .2s;
}
.fab__main svg{ width:24px; height:24px; transition:transform .3s var(--ease), opacity .15s; }
.fab__main .fab__icon-close{ position:absolute; opacity:0; transform:rotate(-45deg); }
.fab.is-open .fab__main{ background:var(--navy-deep); }
.fab.is-open .fab__main .fab__icon-open{ opacity:0; transform:rotate(45deg); }
.fab.is-open .fab__main .fab__icon-close{ opacity:1; transform:rotate(0); }
.fab__main::before{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid var(--red); opacity:.5; animation:pulse-ring 2.4s ease-out infinite;
}
.fab.is-open .fab__main::before{ display:none; }
@media (prefers-reduced-motion: reduce){ .fab__main::before{ animation:none; } }

.fab__menu{
  position:absolute; right:0; bottom:70px; display:flex; flex-direction:column; gap:12px;
  align-items:flex-end;
}
.fab__item{
  display:flex; align-items:center; gap:10px; opacity:0; transform:translateY(10px) scale(.9);
  pointer-events:none; transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.fab.is-open .fab__item{ opacity:1; transform:none; pointer-events:auto; }
.fab.is-open .fab__item:nth-child(1){ transition-delay:.03s; }
.fab.is-open .fab__item:nth-child(2){ transition-delay:.07s; }
.fab.is-open .fab__item:nth-child(3){ transition-delay:.11s; }
.fab__item-label{
  background:var(--navy-deep); color:#fff; font-size:12.5px; font-weight:600;
  padding:6px 12px; border-radius:20px; white-space:nowrap; box-shadow:0 6px 14px -6px rgba(0,0,0,.3);
}
.fab__item-btn{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; box-shadow:0 8px 20px -6px rgba(0,0,0,.4); flex-shrink:0; border:0;
}
.fab__item-btn svg{ width:20px; height:20px; }
.fab__item--whatsapp .fab__item-btn{ background:#25D366; }
.fab__item--call .fab__item-btn{ background:var(--grad-red); }
.fab__item--chat .fab__item-btn{ background:var(--grad-navy); }

/* Quick Assistant panel- now opened from the FAB rather than its own
   separate floating bubble. */
.chat-panel{
  position:fixed; right:22px; bottom:96px; z-index:201; width:328px; max-width:calc(100vw - 44px);
  height:440px; max-height:65vh; background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 24px 50px -16px rgba(0,0,0,.4); display:flex; flex-direction:column;
  opacity:0; transform:translateY(16px) scale(.97); pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.chat-panel.is-open{ opacity:1; transform:none; pointer-events:auto; }
.chat-panel__head{
  background:var(--grad-navy); color:#fff; padding:16px 18px; display:flex; justify-content:space-between; align-items:center;
}
.chat-panel__head b{ font-size:14.5px; display:block; }
.chat-panel__head span{ font-size:11.5px; color:#B9C6DE; }
.chat-panel__close{ background:rgba(255,255,255,.15); border:0; color:#fff; width:26px; height:26px; border-radius:50%; }
.chat-panel__body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:var(--fog); }
.chat-msg{ max-width:85%; padding:10px 13px; border-radius:12px; font-size:13.5px; line-height:1.45; }
.chat-msg--bot{ background:#fff; border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:2px; }
.chat-msg--user{ background:var(--navy); color:#fff; align-self:flex-end; border-bottom-right-radius:2px; }
.chat-quick{ display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px; background:var(--fog); }
.chat-quick button{
  font-size:11.5px; font-weight:600; padding:6px 11px; border-radius:20px;
  background:#fff; border:1px solid var(--line); color:var(--navy);
}
.chat-panel__form{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:#fff; }
.chat-panel__form input{
  flex:1; border:1px solid var(--line); border-radius:20px; padding:9px 14px; font:inherit; font-size:13px;
}
.chat-panel__form button{
  width:38px; height:38px; border-radius:50%; background:var(--grad-red); color:#fff; border:0; flex-shrink:0;
}
@media (max-width:480px){
  .chat-panel{ right:12px; bottom:88px; width:calc(100vw - 24px); }
}

/* Side video widget- dismissible, sits mid-left of viewport, injected by JS.
   Shows assets/video/side-showcase.mp4 if present; otherwise the poster image
   with a subtle animated frame keeps the slot looking intentional, not broken. */
.side-video{
  position:fixed; left:0; top:50%;
  z-index:190; width:180px; border-radius:0 10px 10px 0; overflow:hidden;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.5);
  background:var(--navy-deep); transition:transform .5s cubic-bezier(.34,1.56,.64,1), border-radius .2s;
}
.side-video.is-dragging{ transition:none; border-radius:10px; }
.side-video--enter{ transform:translateY(-50%) translateX(-115%); }
.side-video.is-hidden{ display:none; }
.side-video.is-positioned{ transform:none; } /* once dragged, JS sets top/left directly */
.side-video__handle{
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:var(--navy-deep); color:#B9C6DE; font-size:10.5px; font-weight:700;
  letter-spacing:.03em; padding:7px 4px; cursor:grab; user-select:none; touch-action:none;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.side-video__handle-dots{ font-size:13px; line-height:1; letter-spacing:-1px; color:#6C82AC; }
.side-video.is-dragging .side-video__handle{ cursor:grabbing; background:var(--navy); }
.side-video__frame{ position:relative; aspect-ratio:9/16; }
.side-video__frame video, .side-video__frame img, .side-video__frame iframe{
  width:100%; height:100%; object-fit:cover; display:block; border:0;
  position:relative; z-index:0; /* video can get its own compositor layer and
    otherwise visually sit above sibling buttons despite DOM order */
}
.side-video__label{
  position:absolute; left:10px; bottom:10px; color:#fff; font-size:11px; font-weight:700;
  letter-spacing:.03em; background:rgba(7,27,62,.7); padding:4px 8px; border-radius:2px;
  z-index:2;
}
.side-video__close{
  position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%;
  background:rgba(7,27,62,.75); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:13px; border:1px solid rgba(255,255,255,.3); z-index:2; cursor:pointer;
}
.side-video__mute{
  position:absolute; top:8px; left:8px; width:24px; height:24px; border-radius:50%;
  background:rgba(7,27,62,.75); color:#fff; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.3); z-index:2; cursor:pointer;
}
.side-video__reopen{
  position:fixed; left:0; top:50%; transform:translateY(-50%);
  z-index:190; background:var(--grad-red); color:#fff; font-size:18px; font-weight:700;
  width:34px; height:44px; border-radius:0 10px 10px 0; border:0;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.4);
}
.side-video__reopen.is-visible{ display:flex; }
@media (max-width:600px){
  .side-video__reopen{ width:26px; height:36px; font-size:14px; }
}

@media (max-width:900px){
  .side-video{ width:132px; } /* smaller on mobile, but still shown and draggable */
}

/* Breadcrumb / card hover preview thumbnail- follows the cursor while
   hovering any [data-preview-img] link (project names in breadcrumbs, lists). */
.hover-preview{
  position:fixed; z-index:300; width:180px; aspect-ratio:16/10;
  border-radius:6px; overflow:hidden; pointer-events:none;
  box-shadow:0 16px 32px -10px rgba(0,0,0,.45); border:2px solid #fff;
  opacity:0; transform:scale(.92); transition:opacity .15s var(--ease), transform .15s var(--ease);
}
.hover-preview.is-visible{ opacity:1; transform:scale(1); }
.hover-preview img{ width:100%; height:100%; object-fit:cover; }
[data-preview-img]{ cursor:pointer; }
@media (max-width:900px){ .hover-preview{ display:none; } }

/* Scroll-reveal- class + observer added automatically by main.js */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------------------------------------------------------------------
   Premium micro-interactions: cursor-glow cards, custom cursor, magnetic
   buttons. All respect prefers-reduced-motion and only activate on
   fine-pointer (mouse/trackpad) devices- touch screens get the normal,
   unmodified experience.
   ------------------------------------------------------------------- */

/* Cursor-glow- a soft light that follows the mouse inside a card,
   giving hover states real depth instead of a flat color swap. Forms are
   deliberately excluded so nothing here can ever visually interfere with
   typing or clicking a field. */
.pcard, .seg-card, .quote-card, .loc-card{ position:relative; }
.glow-cursor-active .pcard::after,
.glow-cursor-active .seg-card::after,
.glow-cursor-active .quote-card::after,
.glow-cursor-active .loc-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
  background:radial-gradient(280px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.5), transparent 62%);
  opacity:0; transition:opacity .3s var(--ease); pointer-events:none;
}
.glow-cursor-active .loc-card::after,
.glow-cursor-active .seg-card::after{
  background:radial-gradient(280px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.16), transparent 62%);
}
.glow-cursor-active .pcard:hover::after,
.glow-cursor-active .seg-card:hover::after,
.glow-cursor-active .quote-card:hover::after,
.glow-cursor-active .loc-card:hover::after{ opacity:1; }
.pcard > *, .seg-card > *, .quote-card > *{ position:relative; z-index:1; }
.pcard, .seg-card{ transition:transform .25s var(--ease), box-shadow .22s var(--ease); transform-style:preserve-3d; }

/* EMI / cost calculator widget */
.emi-calc{
  border:1px solid var(--line); border-radius:14px; padding:26px; background:#fff;
}
.emi-calc h3{ font-size:18px; }
.emi-slider{ margin-bottom:20px; }
.emi-slider__head{ display:flex; justify-content:space-between; font-size:13px; font-weight:600; color:var(--navy); margin-bottom:8px; }
.emi-slider__head b{ font-family:var(--font-head); color:var(--red); }
.emi-slider input[type="range"]{
  width:100%; -webkit-appearance:none; appearance:none; height:5px; border-radius:3px;
  background:var(--line); outline:none;
}
.emi-slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--grad-red); cursor:pointer; box-shadow:0 4px 10px -3px rgba(208,2,27,.6);
}
.emi-slider input[type="range"]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; border:0;
  background:var(--grad-red); cursor:pointer; box-shadow:0 4px 10px -3px rgba(208,2,27,.6);
}
.emi-result{
  background:var(--fog); border-radius:10px; padding:18px 20px; margin-top:6px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
}
.emi-result__label{ font-size:12.5px; color:var(--muted); }
.emi-result__value{ font-family:var(--font-head); font-size:26px; color:var(--navy); }
.emi-result__break{ font-size:12px; color:var(--muted); text-align:right; }
.emi-note{ font-size:11.5px; color:var(--muted); margin-top:10px; }

/* Lightbox for gallery images */
.lightbox-trigger{ cursor:zoom-in; display:block; position:relative; }
.lightbox-trigger::after{
  content:"⤢"; position:absolute; right:16px; bottom:16px; width:38px; height:38px;
  background:rgba(7,27,62,.7); color:#fff; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:16px; opacity:0; transition:opacity .2s;
}
.lightbox-trigger:hover::after{ opacity:1; }
.lightbox-overlay{
  position:fixed; inset:0; z-index:500; background:rgba(4,12,28,.92);
  display:flex; align-items:center; justify-content:center; padding:32px;
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
}
.lightbox-overlay.is-open{ opacity:1; pointer-events:auto; }
.lightbox-overlay img{ max-width:min(1100px,92vw); max-height:88vh; border-radius:8px; box-shadow:0 30px 60px -20px rgba(0,0,0,.6); }
.lightbox-overlay__close{
  position:absolute; top:22px; right:26px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3);
  font-size:20px; display:flex; align-items:center; justify-content:center;
}

.center{ text-align:center; }
.mt-0{ margin-top:0 !important; }

/* ---------------------------------------------------------------------
   Property comparison tool
   ------------------------------------------------------------------- */
.pcard__compare{
  display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600;
  color:var(--navy); margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  cursor:pointer; user-select:none;
}
.pcard__compare input{ position:absolute; opacity:0; width:0; height:0; }
.pcard__compare__box{
  width:18px; height:18px; border-radius:5px; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background .15s var(--ease), border-color .15s var(--ease);
}
.pcard__compare__box svg{ width:12px; height:12px; color:#fff; opacity:0; transform:scale(.6); transition:opacity .15s, transform .15s; }
.pcard__compare input:checked + .pcard__compare__box{ background:var(--grad-red); border-color:transparent; }
.pcard__compare input:checked + .pcard__compare__box svg{ opacity:1; transform:scale(1); }
.pcard__compare:hover .pcard__compare__box{ border-color:var(--red); }

.compare-bar{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%, 140%);
  z-index:210; background:var(--navy-deep); color:#fff; border-radius:50px;
  padding:10px 12px 10px 20px; display:flex; align-items:center; gap:16px;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.5); transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.compare-bar.is-visible{ transform:translate(-50%, 0); }
.compare-bar__count{ font-size:13.5px; font-weight:600; white-space:nowrap; }
.compare-bar__thumbs{ display:flex; gap:-6px; }
.compare-bar__thumbs img{ width:30px; height:30px; border-radius:50%; border:2px solid var(--navy-deep); object-fit:cover; margin-left:-8px; }
.compare-bar__thumbs img:first-child{ margin-left:0; }
.compare-bar__actions{ display:flex; gap:8px; }
.compare-bar__actions .btn{ padding:9px 16px; font-size:12.5px; }
.compare-bar__clear{ background:transparent; color:#B9C6DE; border:1px solid rgba(255,255,255,.25); border-radius:50px; padding:9px 14px; font-size:12.5px; }
@media (max-width:600px){
  .compare-bar{ left:16px; right:16px; bottom:104px; transform:translateY(140%); width:auto; }
  .compare-bar.is-visible{ transform:translateY(0); }
  .compare-bar__thumbs{ display:none; }
}

.compare-table-wrap{ overflow-x:auto; }
.compare-table{ width:100%; border-collapse:collapse; min-width:640px; }
.compare-table th, .compare-table td{ border:1px solid var(--line); padding:14px 16px; text-align:left; font-size:13.5px; vertical-align:top; }
.compare-table th{ background:var(--fog); font-size:12.5px; color:var(--muted); font-weight:700; width:160px; }
.compare-table td h4{ color:var(--navy); font-size:16px; margin-bottom:4px; }
.compare-table img{ width:100%; max-width:220px; aspect-ratio:16/10; object-fit:cover; border-radius:6px; margin-bottom:10px; }
.compare-table__remove{ background:var(--fog); border:1px solid var(--line); border-radius:50px; padding:5px 12px; font-size:11.5px; font-weight:600; color:var(--red); margin-top:8px; }
.compare-empty{ text-align:center; padding:60px 20px; color:var(--muted); }

/* ---------------------------------------------------------------------
   Virtual tour modal (reuses the lightbox look, but for an iframe)
   ------------------------------------------------------------------- */
.tour-modal .lightbox-overlay__close{ z-index:2; }
.tour-modal-frame{
  width:min(1100px,92vw); height:min(620px,80vh); border-radius:10px; overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6); background:#000;
}
.tour-modal-frame iframe{ width:100%; height:100%; border:0; }
.tour-trigger{ display:inline-flex; align-items:center; gap:8px; }

/* ---------------------------------------------------------------------
   Neighborhood / nearby amenities
   ------------------------------------------------------------------- */
.nearby-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:18px 0 28px; min-width:0; }
.nearby-item{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  border:1px solid var(--line); border-radius:10px; background:var(--fog);
}
.nearby-item__icon{ font-size:20px; }
.nearby-item__label{ font-size:13px; font-weight:600; color:var(--navy); display:block; }
.nearby-item__dist{ font-size:12px; color:var(--muted); }
.nearby-note{ font-size:11.5px; color:var(--muted); margin-top:-14px; margin-bottom:24px; }
@media (max-width:480px){ .nearby-grid{ grid-template-columns:1fr; } }

.text-muted{ color:var(--muted); }
.skip-link{
  position:absolute; left:-9999px; top:0; background:#fff; padding:10px 16px; z-index:999;
}
.skip-link:focus{ left:16px; top:16px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1024px){
  .seg-grid{ grid-template-columns:repeat(2,1fr); }
  .grid-3, .project-grid{ grid-template-columns:repeat(2,1fr); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-2{ grid-template-columns:1fr; }
  .hero .container{ grid-template-columns:1fr; }
  .hero__panel{ max-width:420px; }
  .steps{ grid-template-columns:repeat(2,1fr); gap:28px; }
  .step::before{ display:none; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .spec-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .topbar__tag{ display:none; }
  .nav__links, .nav__phone span{ display:none; }
  .nav-toggle{ display:flex; z-index:210; position:relative; }

  /* Hamburger morphs into an X when open- no separate close button needed */
  .nav-toggle span{ transition:transform .25s var(--ease), opacity .2s var(--ease); }
  .nav.is-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav.is-open .nav-toggle span:nth-child(2){ opacity:0; }
  .nav.is-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* Backdrop, injected by main.js */
  .nav-backdrop{
    position:fixed; inset:0; background:rgba(7,27,62,.55); z-index:145;
    opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
  }
  .nav-backdrop.is-visible{ opacity:1; pointer-events:auto; }

  /* Slide-in drawer */
  .nav.is-open .nav__links{
    display:flex; flex-direction:column; align-items:stretch; position:fixed; top:0; right:0;
    width:86%; max-width:340px; height:100vh; height:100dvh;
    background:#fff; z-index:150; padding:88px 22px 130px;
    gap:4px; overflow-y:auto; box-shadow:-16px 0 40px -10px rgba(0,0,0,.25);
    transform:translateX(100%); animation:drawer-in .32s var(--ease) forwards;
  }
  @keyframes drawer-in{ to{ transform:translateX(0); } }
  .nav.is-open .nav__links > li{ border-bottom:1px solid var(--line); }
  .nav.is-open .nav__links > li > a{ display:block; padding:15px 4px; font-size:16px; }

  .has-dropdown > a::before{ display:none; }
  .has-dropdown > a{
    display:flex !important; align-items:center; justify-content:space-between;
  }
  .has-dropdown > a::after{
    content:"▾"; position:static; left:auto; bottom:auto; width:auto; height:auto; background:none;
    font-size:13px; color:var(--muted);
    transition:transform .2s var(--ease); margin-left:auto;
  }
  .has-dropdown.is-open > a::after{ transform:rotate(180deg); color:var(--red); }
  .dropdown{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; padding:0; margin:0 0 8px; display:none; background:var(--fog);
    border-radius:10px; overflow:hidden;
  }
  .has-dropdown.is-open .dropdown{ display:block; }
  .dropdown a{ padding:12px 16px; font-size:14.5px; border-radius:0; border-bottom:1px solid var(--line); }
  .dropdown li:last-child a{ border-bottom:0; }

  /* CTA area pinned to the bottom of the same drawer rectangle */
  .nav.is-open .nav__cta{
    display:flex; flex-direction:column; gap:10px; position:fixed; right:0; bottom:0;
    width:86%; max-width:340px; background:#fff; z-index:151; padding:16px 22px 22px;
    border-top:1px solid var(--line); box-shadow:0 -8px 20px -14px rgba(0,0,0,.2);
  }
  .nav.is-open .nav__phone{ justify-content:center; padding:12px; border:1px solid var(--line); border-radius:10px; }
  .nav.is-open .nav__phone span{ display:inline; }
  .nav.is-open .nav__cta .btn{ width:100%; }

  /* Hide floating widgets while the mobile menu is open so they can't
     visually poke through the drawer/backdrop from underneath. */
  body.nav-drawer-open .side-video,
  body.nav-drawer-open .side-video__reopen,
  body.nav-drawer-open .fab,
  body.nav-drawer-open .compare-bar,
  body.nav-drawer-open .chat-panel{
    display:none !important;
  }

  .seg-grid, .grid-3, .project-grid, .grid-4{ grid-template-columns:1fr; }
  .cta-band{ flex-direction:column; text-align:center; padding:36px 24px; }
  .footer-grid{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .filters{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px; }
}

/* ---- Small phones (320–380px) ---- */
@media (max-width:400px){
  .container{ padding:0 16px; }
  .section{ padding:56px 0; }
  .section--tight{ padding:40px 0; }
  .site-header .container{ height:70px; }
  .brand img{ height:32px; }
  .hero .container{ padding-top:56px; padding-bottom:64px; }
  .hero h1{ font-size:30px; max-width:none; }
  .hero__desc{ font-size:15.5px; }
  .hero__panel{ padding:20px; }
  .hero__stats{ grid-template-columns:1fr 1fr; gap:14px; }
  .hero__stat b{ font-size:24px; }
  .hero__actions{ flex-direction:column; }
  .hero__actions .btn{ width:100%; }
  .btn{ padding:12px 18px; font-size:14px; }
  .section-head h2{ font-size:24px; }
  .spec-grid{ grid-template-columns:1fr 1fr; }
  .cta-band__actions{ flex-direction:column; width:100%; }
  .cta-band__actions .btn{ width:100%; }
  .strip__track-wrap{ animation-duration:20s; }
  .detail-hero__top{ flex-direction:column; }
  .quiz-cta, .enquiry-card{ padding:20px; }
  .side-video{ width:104px; }
}


/* ---- Extra-small phones (≤345px) ---- */
@media (max-width: 345px) {
  .topbar__contact{ gap:20px; }
  .btn{ padding:8px; font-size:11px; }
  .nav{ gap:10px; }
}

/* ---- Prevent any element from forcing horizontal scroll on narrow
   phones (this was the root cause of content appearing to sit flush
   against the screen edge with no visible padding on 320px devices).
   IMPORTANT: this must NOT be `overflow-x:hidden` on html/body. Per the
   CSS spec, if overflow-x and overflow-y differ, the "visible" axis gets
   computed to "auto" — so `overflow-x:hidden` on body silently turns
   body into a scroll container, which breaks `position:sticky` on the
   header in most browsers (the classic "sticky nav suddenly stopped
   working" bug). `overflow-x:clip` prevents the same horizontal
   scroll/bleed without creating a scroll container, so sticky keeps
   working. ---- */
html, body{ max-width:100%; overflow-x:clip; }

@media (max-width: 575px) {
  .section-head{ flex-direction:column; align-items:flex-start; gap:14px; }
  .section-head .btn{ width:100%; text-align:center; }

  /* Project card badges — long labels (e.g. "Commercial Retail &
     Entertainment" + "Under Construction") were overlapping each other
     at the top of the card image. They now share one flex row so the
     row grows in height instead of the two badges sitting on top of
     one another. */
  .pcard__badges{ flex-wrap:wrap; }
  .pcard__tag, .pcard__status{ max-width:100%; }

  /* Nav-toggle (hamburger/X) must stay pinned above the slide-in drawer
     content, not wherever it happens to sit in the header's flow- on
     some pages that coincided with the "Projects" row in the drawer. */
  .nav.is-open .nav-toggle{
    position:fixed; top:18px; right:20px; z-index:220; background:#fff;
    padding:6px; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,.12);
  }
}