/* =======================================================================
   HM Realty — Editorial Brochure Aesthetic
   Palette: navy / gold / cream (from brochure), enriched with parchment
   Type: Playfair Display + Fraunces (italic accents) + Instrument Sans + DM Mono
   ======================================================================= */

:root{
  /* Core palette (tuned from brochure) */
  --navy:         #0d2546;
  --navy-deep:    #061226;
  --navy-mid:     #132e54;
  --navy-soft:    #1b3d6d;
  --gold:         #e8a92c;
  --gold-deep:    #b3811d;
  --gold-soft:    #f3cf7a;
  --gold-wash:    rgba(232,169,44,.14);
  --cream:        #f6efdf;
  --cream-alt:    #ecdfc3;
  --parchment:    #fbf7ec;
  --ink:          #0a1120;
  --ink-soft:     #2a3547;
  --muted:        #6b7a90;
  --line:         rgba(255,255,255,.12);
  --line-ink:     rgba(13,37,70,.10);
  --shadow-sm:    0 6px 22px rgba(8,26,52,.09);
  --shadow:       0 14px 44px rgba(8,26,52,.13);
  --shadow-lg:    0 34px 90px rgba(8,26,52,.22);
  --radius:       4px;          /* editorial: tighter corners */
  --radius-lg:    14px;
  /* Type */
  --f-display:    'Playfair Display', 'Fraunces', Georgia, serif;
  --f-italic:     'Fraunces', 'Playfair Display', Georgia, serif;
  --f-body:       'Instrument Sans', 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --f-mono:       'DM Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  /* Grain SVG — applied as noise overlay */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* GPU compositing hints — smoother animation, less repaint churn */
.hero__card,.hero__right,.market__card,.feat__card,.slider__card,.intro,.scroll-progress,.marquee__track{
  transform:translateZ(0);
  backface-visibility:hidden;
}
body{
  margin:0;
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.62;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"ss01","ss02","liga","kern";
}
h1,h2,h3,h4,h5{font-family:var(--f-display); font-weight:600; line-height:1.1; margin:0; letter-spacing:-.005em}
p{margin:0 0 12px}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
em{font-family:var(--f-italic); font-style:italic; font-weight:500; color:var(--gold-deep); font-feature-settings:"ss01"}

::selection{background:var(--gold); color:var(--navy-deep)}

.container{max-width:1240px; margin:0 auto; padding:0 28px}

/* Eyebrow: tiny architectural label with a gold tick rule */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--f-mono);
  letter-spacing:.26em; text-transform:uppercase;
  font-size:11.5px; font-weight:400; color:var(--gold-deep);
  margin-bottom:18px;
}
.eyebrow::before{
  content:""; width:34px; height:1px; background:currentColor;
  display:inline-block;
}
.eyebrow--gold{color:var(--gold)}
.gold{color:var(--gold)}

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px;
  border-radius:2px;            /* sharp rectangle — editorial */
  font-family:var(--f-body);
  font-weight:500;
  font-size:14.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer; border:none;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),
             box-shadow .35s ease, background .3s ease, color .3s ease;
  text-decoration:none; white-space:nowrap;
  overflow:hidden;
}
.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 25%, rgba(255,255,255,.35) 50%, transparent 75%);
  transform:translateX(-120%);
  transition:transform .65s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.22)}
.btn:hover::after{transform:translateX(120%)}
.btn--gold{background:var(--gold); color:var(--navy-deep)}
.btn--gold:hover{background:#f1b541; color:var(--navy-deep)}
.btn--ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.42)}
.btn--ghost:hover{background:rgba(255,255,255,.08); border-color:var(--gold); color:var(--gold)}
.btn--ghost-light{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5)}
.btn--ghost-light:hover{background:rgba(255,255,255,.1); border-color:var(--gold); color:var(--gold)}
.btn--sm{padding:10px 18px; font-size:12.5px}
.btn--lg{padding:19px 34px; font-size:14.5px}

/* =========================================================================
   NAV
   ========================================================================= */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(6,18,38,.96);   /* solid-ish — removed backdrop-filter for perf */
  border-bottom:1px solid rgba(232,169,44,.18);
}
.nav__inner{display:flex; align-items:center; justify-content:space-between; padding:12px 28px; gap:18px; flex-wrap:wrap}
.nav__brand{display:flex; align-items:center; gap:12px; color:#fff}
.nav__logo{
  font-family:var(--f-display); font-weight:800; font-size:28px; color:var(--gold);
  letter-spacing:.01em; line-height:1;
  text-shadow:0 0 20px rgba(232,169,44,.25);
}
.nav__brand-wrap{display:flex; flex-direction:column; gap:3px; line-height:1}
.nav__brand-text{
  font-family:var(--f-mono);
  font-weight:400; font-size:12.5px; color:#fff;
  letter-spacing:.24em; text-transform:uppercase;
}
.nav__brand-trust{
  display:flex; flex-wrap:wrap; gap:4px 10px;
  font-family:var(--f-mono);
  font-size:9px; letter-spacing:.08em;
  color:rgba(255,255,255,.62);
  text-transform:uppercase;
}
.nav__brand-trust span{display:inline-flex; align-items:center; gap:4px; white-space:nowrap}
.nav__brand-trust i{color:var(--gold); font-size:9px}
@media (max-width:960px){
  .nav__brand-trust{display:none}
}
.nav__links{display:flex; gap:26px; align-items:center; margin-left:auto; padding-right:12px}
.nav__links a{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:rgba(255,255,255,.82);
  font-size:12.5px;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-family:var(--f-mono);
  padding:6px 0;
  transition:color .25s, transform .25s;
}
.nav__links a > i{
  font-size:12px;
  color:var(--gold);
  opacity:.75;
  transition:opacity .25s, transform .25s;
}
.nav__links a:hover > i{opacity:1; transform:translateY(-1px)}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--gold);
  transition:right .4s cubic-bezier(.2,.7,.2,1);
}
.nav__links a:hover{color:var(--gold)}
.nav__links a:hover::after{right:0}
.nav__toggle{display:none; background:none; color:#fff; border:none; font-size:22px; cursor:pointer}
@media (max-width:960px){
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--navy-deep);
    padding:0; max-height:0; overflow:hidden; transition:max-height .4s ease;
    border-top:1px solid rgba(232,169,44,.25);
  }
  .nav__links.open{max-height:560px; padding:10px 0}
  .nav__links a{padding:14px 28px; border-bottom:1px solid rgba(255,255,255,.06)}
  .nav__toggle{display:block}
}

/* =========================================================================
   HERO — editorial spread with parallax-ish atmosphere
   ========================================================================= */
.hero{
  position:relative; color:#fff; overflow:hidden;
  background:
    radial-gradient(ellipse 60% 50% at 85% 15%, rgba(232,169,44,.22), transparent 60%),
    radial-gradient(ellipse 70% 60% at 10% 100%, rgba(27,61,109,.8), transparent 65%),
    linear-gradient(140deg, var(--navy-deep) 0%, var(--navy) 45%, var(--navy-mid) 100%);
  padding:38px 0 46px;
  scroll-margin-top:78px;
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:var(--grain); opacity:.07; mix-blend-mode:overlay;
}
/* topographic contour lines behind hero */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:
    repeating-linear-gradient(115deg, transparent 0 78px, rgba(232,169,44,.04) 78px 79px);
  mask-image:radial-gradient(ellipse 70% 60% at 80% 35%, black, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 80% 35%, black, transparent 75%);
}

/* Video background container */
.hero__bg{
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center center;
  opacity:0;
  transition:opacity 1.1s ease;
  /* Subtle ken-burns drift even when video isn't loaded yet (poster-only state) */
  will-change:opacity, transform;
}
.hero__video.is-loaded{ opacity:1 }
/* Dark overlay that sits OVER the video to keep text legible */
.hero__video-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(135deg,
      rgba(13,37,70,.78) 0%,
      rgba(13,37,70,.55) 38%,
      rgba(6,18,38,.78) 100%),
    radial-gradient(ellipse 60% 50% at 85% 15%, rgba(232,169,44,.15), transparent 60%);
  /* Only show overlay when video has loaded — until then, the hero gradient already provides background */
  opacity:0;
  transition:opacity 1.1s ease;
}
.hero__video.is-loaded ~ .hero__video-overlay{ opacity:1 }

/* Honour reduced-motion + save-data — video is paused/hidden via JS, but we also kill
   the fade-in here so the gradient hero is fully visible. */
.hero.video-disabled .hero__video,
.hero.video-disabled .hero__video-overlay{ display:none }

.hero__inner{
  display:grid; grid-template-columns:1.05fr 1fr; gap:52px;
  align-items:center; position:relative; z-index:2;
}

/* Hero left column: staggered page-load reveal */
.hero__left > *{ opacity:0; transform:translateY(22px); animation:riseIn .9s cubic-bezier(.18,.7,.2,1) forwards }
.hero__left > *:nth-child(1){ animation-delay:.05s }
.hero__left > *:nth-child(2){ animation-delay:.18s }
.hero__left > *:nth-child(3){ animation-delay:.30s }
.hero__left > *:nth-child(4){ animation-delay:.42s }
.hero__left > *:nth-child(5){ animation-delay:.54s }
.hero__left > *:nth-child(6){ animation-delay:.66s }
.hero__left > *:nth-child(7){ animation-delay:.78s }

.hero__logo{
  font-family:var(--f-display);
  font-weight:900;
  font-size:80px; line-height:.88;
  color:transparent;
  -webkit-text-stroke:1.4px var(--gold);
  letter-spacing:.01em;
  margin-bottom:14px;
  position:relative;
  text-shadow:0 0 50px rgba(232,169,44,.25);
}
.hero__logo::after{
  content:"HMR";
  position:absolute; inset:0;
  color:var(--gold);
  opacity:.08;
  -webkit-text-stroke:0;
}
.hero__divider{
  width:120px; height:1px;
  background:linear-gradient(90deg, var(--gold), transparent);
  margin-bottom:30px; position:relative;
}
.hero__divider::before{
  content:""; position:absolute; left:0; top:-3px;
  width:7px; height:7px; border-radius:50%; background:var(--gold);
}
.hero__title{
  font-size:clamp(26px, 3.6vw, 42px);
  color:#fff;
  font-weight:500;
  line-height:1.08;
  margin-bottom:14px;
  letter-spacing:-.012em;
}
.hero__title em{
  font-family:var(--f-italic);
  font-style:italic;
  font-weight:400;
  color:var(--gold);
  font-variation-settings:"SOFT" 100, "opsz" 144;
}
.hero__tag{
  color:var(--gold);
  font-size:15px;
  font-weight:500;
  margin-bottom:6px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-family:var(--f-mono);
}
.hero__sub{color:rgba(255,255,255,.68); margin-bottom:24px; font-size:14.5px; line-height:1.55}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px}
.hero__contact{
  display:flex; flex-wrap:wrap; gap:22px;
  color:rgba(255,255,255,.72); font-size:12.5px;
  font-family:var(--f-mono); letter-spacing:.05em;
  padding-top:18px; border-top:1px solid rgba(255,255,255,.10);
}
.hero__contact i{color:var(--gold); margin-right:8px}

/* Hero right: image card with gold corner brackets */
.hero__right{position:relative; min-height:500px; animation:riseIn 1.1s cubic-bezier(.18,.7,.2,1) .35s both}
.hero__card{
  position:absolute; inset:0; border-radius:2px;
  background:
    linear-gradient(180deg, rgba(8,26,52,.05), rgba(8,26,52,.42)),
    url('assets/img/hero-royalbay.jpg') center/cover;
  box-shadow:0 50px 110px rgba(0,0,0,.45);
  filter:saturate(1.05);
}
.hero__right::before,
.hero__right::after{
  content:""; position:absolute; width:52px; height:52px;
  border:1px solid var(--gold); z-index:2; pointer-events:none;
}
.hero__right::before{
  top:-14px; left:-14px;
  border-right:none; border-bottom:none;
  animation:cornerTL 1.1s cubic-bezier(.18,.7,.2,1) .8s both;
}
.hero__right::after{
  bottom:-14px; right:-14px;
  border-left:none; border-top:none;
  animation:cornerBR 1.1s cubic-bezier(.18,.7,.2,1) 1s both;
}
.hero__badge{
  position:absolute; bottom:-32px; left:-32px; z-index:3;
  background:var(--gold); color:var(--navy-deep); padding:22px 28px;
  border-radius:2px;
  box-shadow:0 18px 44px rgba(232,169,44,.45);
  animation:riseIn .9s cubic-bezier(.18,.7,.2,1) 1.1s both;
}
.hero__badge-num{font-family:var(--f-display); font-size:40px; font-weight:800; line-height:1}
.hero__badge-lbl{
  font-family:var(--f-mono);
  font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; font-weight:400; margin-top:6px;
}
.hero__scroll{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.4); font-size:14px; animation:bounce 2s infinite;
  z-index:2;
}

@keyframes riseIn{to{opacity:1; transform:translateY(0)}}
@keyframes bounce{0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,10px)}}
@keyframes cornerTL{from{opacity:0; transform:translate(-14px,-14px)} to{opacity:1; transform:translate(0,0)}}
@keyframes cornerBR{from{opacity:0; transform:translate(14px,14px)} to{opacity:1; transform:translate(0,0)}}

@media (max-width:960px){
  .hero{padding:54px 0 80px}
  .hero__inner{grid-template-columns:1fr; gap:50px}
  .hero__logo{font-size:82px}
  .hero__right{min-height:340px}
  .hero__badge{left:0; bottom:-24px}
}

/* =========================================================================
   SECTION BASE
   ========================================================================= */
.section{padding:44px 0; position:relative; scroll-margin-top:78px}
.section--cream{background:var(--cream)}
.section--cream-alt{background:var(--cream-alt)}
.section--navy{background:var(--navy); color:#fff; position:relative; overflow:hidden}
.section--navy::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--grain); opacity:.06; mix-blend-mode:overlay;
}
.section--navy::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(ellipse 40% 40% at 100% 0%, rgba(232,169,44,.14), transparent 60%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(27,61,109,.5), transparent 60%);
}
.section--navy > .container{position:relative; z-index:1}

/* Section head with vertical gold rule */
.section__head{
  max-width:820px; margin-bottom:22px;
  padding-left:22px; position:relative;
}
.section__head::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px;
  width:2px; background:linear-gradient(var(--gold), transparent);
}
.section__head--center{margin:0 auto 32px; text-align:center; padding-left:0}
.section__head--center::before{display:none}
.section__title{
  font-size:clamp(21px, 2.6vw, 30px);
  color:var(--navy);
  margin-bottom:8px;
  letter-spacing:-.015em;
  font-weight:600;
  line-height:1.15;
}
.section__title--light{color:#fff}
.section__title em{
  font-family:var(--f-italic); font-style:italic;
  font-weight:400; color:var(--gold);
}
.section__sub{
  color:var(--muted); font-size:12.5px; max-width:68ch;
  line-height:1.55;
}
.section__head--center .section__sub{margin-left:auto; margin-right:auto}
.section__sub--light{color:rgba(255,255,255,.7)}

@media (max-width:700px){
  .section{padding:52px 0}
  .section__title{font-size:26px}
  .section__head{margin-bottom:28px; padding-left:16px}
  .section__sub{font-size:14.5px}
}

/* =========================================================================
   ABOUT
   ========================================================================= */
.about__grid{display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:start}
.about__section-head{margin-bottom:24px; padding-left:22px}
.checklist{list-style:none; padding:0; margin:0 0 30px}
.checklist li{
  display:flex; gap:16px; padding:14px 0;
  border-bottom:1px dashed rgba(13,37,70,.14);
  font-size:15.5px;
  color:var(--ink-soft);
}
.checklist li:last-child{border-bottom:none}
.checklist i{
  color:#fff; background:#1ca05a;
  width:26px; height:26px; display:grid; place-items:center;
  border-radius:50%; font-size:11px; flex-shrink:0;
  border:1px solid #148a4a;
  box-shadow:0 2px 8px -2px rgba(28,160,90,.45);
}
[data-theme="dark"] .checklist i{background:#25c26f; border-color:#1ca05a}
.about__quote{
  font-family:var(--f-italic); font-style:italic;
  color:var(--ink-soft);
  border-left:2px solid var(--gold);
  padding:8px 0 8px 22px;
  font-size:19px; line-height:1.5;
  font-weight:400;
  font-variation-settings:"SOFT" 100;
}
.about__right{
  background:var(--parchment);
  border:1px solid rgba(13,37,70,.08);
  padding:40px 38px;
  box-shadow:var(--shadow);
  position:relative;
}
.about__right::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--gold), transparent);
}
.about__head{
  color:var(--gold-deep);
  letter-spacing:.3em;
  text-transform:uppercase;
  font-size:11.5px;
  text-align:center;
  margin-bottom:32px;
  font-family:var(--f-mono); font-weight:400;
}
.team{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-bottom:32px}
.team__member{text-align:center}
.team__photo{
  width:118px; height:118px; border-radius:50%; margin:0 auto 16px;
  background:linear-gradient(135deg, var(--navy-soft), var(--navy));
  display:grid; place-items:center; color:var(--gold); font-size:38px;
  border:2px solid var(--gold); overflow:hidden;
  box-shadow:0 8px 28px rgba(8,26,52,.18), 0 0 0 6px rgba(232,169,44,.08);
  transition:transform .4s ease, box-shadow .4s ease;
}
.team__member:hover .team__photo{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(8,26,52,.25), 0 0 0 6px rgba(232,169,44,.18);
}
.team__photo--img{padding:0}
.team__photo--img img{width:100%; height:100%; object-fit:cover; display:block; border-radius:50%}
.team__name{
  font-family:var(--f-display);
  font-weight:700; color:var(--navy); font-size:17px; letter-spacing:.01em;
}
.team__role{
  color:var(--gold-deep); font-size:12.5px; margin-top:4px;
  font-family:var(--f-mono); letter-spacing:.12em; text-transform:uppercase;
}
.team__exp{color:var(--muted); font-size:13px; margin-top:4px; font-style:italic}
.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  padding:22px 0;
  border-top:1px solid rgba(13,37,70,.12);
  border-bottom:1px solid rgba(13,37,70,.12);
}
.stat{text-align:center; border-right:1px solid rgba(13,37,70,.08); padding:6px}
.stat:last-child{border-right:none}
.stat__num{font-family:var(--f-display); color:var(--gold-deep); font-size:30px; font-weight:800; line-height:1}
.stat__lbl{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:8px; font-family:var(--f-mono)}
@media (max-width:960px){.about__grid{grid-template-columns:1fr}}

/* =========================================================================
   VISION / MISSION
   ========================================================================= */
.vm__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.vm__card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line);
  padding:38px 30px;
  position:relative;
  overflow:hidden;
  transition:border-color .4s ease, transform .4s ease;
}
.vm__card::before{
  content:""; position:absolute; top:0; left:0; width:0; height:2px;
  background:var(--gold); transition:width .6s cubic-bezier(.2,.7,.2,1);
}
.vm__card:hover{border-color:rgba(232,169,44,.4); transform:translateY(-4px)}
.vm__card:hover::before{width:100%}
.vm__title{
  color:var(--gold);
  font-family:var(--f-mono);
  font-weight:400;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-size:11.5px;
  margin-bottom:22px;
}
.vm__card p, .vm__list{
  color:rgba(255,255,255,.85);
  font-family:var(--f-italic);
  font-style:italic;
  font-size:16.5px;
  font-weight:300;
  line-height:1.65;
  font-variation-settings:"SOFT" 80, "opsz" 20;
}
.vm__list{list-style:none; padding:0; margin:0}
.vm__list li{padding:10px 0 10px 22px; position:relative; font-style:italic}
.vm__list li::before{
  content:"—"; color:var(--gold);
  position:absolute; left:0; top:10px; font-style:normal;
}
.pills{display:flex; flex-wrap:wrap; gap:8px; font-style:normal}
.pills span{
  display:inline-block;
  background:transparent;
  color:#fff;
  padding:9px 16px;
  border-radius:2px;
  font-size:11.5px;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-family:var(--f-mono);
  border:1px solid rgba(255,255,255,.18);
  transition:background .3s, border-color .3s, color .3s;
}
.pills span:hover{background:var(--gold); border-color:var(--gold); color:var(--navy-deep)}
@media (max-width:960px){.vm__grid{grid-template-columns:1fr}}

/* =========================================================================
   MARKET INSIGHT
   ========================================================================= */
.market__hero{position:relative; margin:0 auto 20px; max-width:820px; border-radius:2px; overflow:hidden; box-shadow:var(--shadow-lg); background:var(--navy-deep); aspect-ratio:3/2}
.market__hero img{width:100%; height:100%; display:block; object-fit:cover; object-position:center bottom; transition:transform 6s ease}
.market__hero--overlay .market__hero-intro{
  position:absolute; top:0; left:0; z-index:2;
  margin:0;
  max-width:58%;
  padding:22px 30px 36px 28px;
  background:linear-gradient(135deg, rgba(6,18,38,.88) 0%, rgba(6,18,38,.62) 55%, rgba(6,18,38,.05) 95%, transparent 100%);
  color:rgba(255,255,255,.94);
  font-family:var(--f-italic); font-style:italic; font-weight:400;
  font-size:13.5px; line-height:1.55;
  letter-spacing:.005em;
  text-shadow:0 1px 6px rgba(0,0,0,.45);
}
@media (max-width:700px){
  .market__hero--overlay .market__hero-intro{max-width:100%; font-size:12.5px; padding:16px 20px 28px}
}
.section__head--market{margin-bottom:14px}
.market__hero:hover img{transform:scale(1.04)}
.market__hero-cap{
  position:absolute; bottom:0; left:0; right:0;
  padding:20px 24px;
  background:linear-gradient(transparent, rgba(6,18,38,.95));
  color:#fff;
}
.market__hero-cap strong{
  display:block; font-size:18px; color:var(--gold);
  font-family:var(--f-display); font-weight:600; margin-bottom:4px;
  letter-spacing:-.01em;
}
.market__hero-cap span{font-size:12.5px; color:rgba(255,255,255,.82); font-style:italic; font-family:var(--f-italic)}
.market__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px}
.market__card{
  position:relative; overflow:hidden;
  border-radius:2px;
  padding:140px 20px 20px;
  box-shadow:var(--shadow);
  background-size:cover; background-position:center;
  color:#fff;
  min-height:220px;
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.market__card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--gold);
  transform:scaleY(.4); transform-origin:top;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.market__card:hover{transform:translateY(-8px)}
.market__card:hover::before{transform:scaleY(1)}
.market__num{
  font-family:var(--f-display); color:var(--gold);
  font-size:34px; font-weight:800; display:block; line-height:1;
}
.market__tag{
  display:inline-block; font-size:10.5px; letter-spacing:.24em;
  color:rgba(255,255,255,.9); text-transform:uppercase;
  font-weight:400; margin-top:10px;
  font-family:var(--f-mono);
  border-top:1px solid rgba(255,255,255,.4); padding-top:8px;
  width:fit-content;
}
.market__card h3{
  color:#fff; font-size:22px; margin:12px 0 10px;
  font-weight:600;
}
.market__card p{color:rgba(255,255,255,.85); font-size:13.5px; margin:0; line-height:1.5}
.market__foot{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  padding:18px;
  background:var(--parchment);
  border-radius:2px;
  box-shadow:var(--shadow);
  border-top:2px solid var(--gold);
  position:relative;
}
.market__foot > div{
  text-align:center;
  border-right:1px dashed rgba(13,37,70,.14);
  padding:6px 8px;
}
.market__foot > div:last-child{border-right:none}
.market__foot span{
  display:block; font-size:9.5px;
  letter-spacing:.22em; color:var(--muted);
  text-transform:uppercase; margin-bottom:4px;
  font-family:var(--f-mono);
}
.market__foot strong{font-family:var(--f-display); font-size:17px; color:var(--navy); font-weight:700; letter-spacing:-.01em}
@media (max-width:960px){.market__grid{grid-template-columns:repeat(2,1fr)} .market__foot{grid-template-columns:1fr; gap:20px}}
@media (max-width:500px){.market__grid{grid-template-columns:1fr}}

/* =========================================================================
   SERVICES
   ========================================================================= */
.svc__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:32px}
.svc__card{
  background:var(--parchment);
  border-radius:2px;
  padding:22px 20px;
  box-shadow:var(--shadow-sm);
  border-top:2px solid var(--gold);
  transition:transform .35s ease, box-shadow .35s ease, background .35s ease;
  position:relative;
  overflow:hidden;
}
.svc__card::after{
  content:""; position:absolute; inset:0; background:var(--grain);
  opacity:.03; pointer-events:none;
}
.svc__card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
  background:#fff;
}
.svc__card i{
  background:var(--navy); color:var(--gold);
  width:44px; height:44px;
  border-radius:50%;
  display:grid; place-items:center;
  font-size:17px; margin-bottom:14px;
  transition:transform .4s ease, background .4s ease;
}
.svc__card:hover i{transform:rotate(8deg) scale(1.05); background:var(--gold); color:var(--navy-deep)}
.svc__card h3{color:var(--navy); font-size:17px; margin-bottom:6px; font-weight:600}
.svc__card p{color:var(--muted); font-size:13px; margin:0; line-height:1.5}
.svc__types{
  background:var(--parchment);
  border-radius:2px;
  padding:38px;
  box-shadow:var(--shadow-sm);
  border-top:2px solid var(--gold);
}
.svc__types h4{
  font-size:11.5px; letter-spacing:.28em;
  color:var(--gold-deep); text-align:center;
  text-transform:uppercase;
  margin-bottom:28px;
  font-family:var(--f-mono); font-weight:400;
}
.svc__types-grid{
  display:grid; grid-template-columns:repeat(8,1fr); gap:18px; text-align:center;
}
.svc__types-grid > div{
  padding:14px 6px;
  border:1px solid transparent;
  border-radius:2px;
  transition:border-color .3s, background .3s;
}
.svc__types-grid > div:hover{border-color:var(--gold); background:#fff}
.svc__types-grid i{color:var(--gold-deep); font-size:28px; margin-bottom:10px; display:block}
.svc__types-grid span{
  display:block; font-size:12px;
  color:var(--navy); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  font-family:var(--f-mono);
}
@media (max-width:1000px){.svc__grid{grid-template-columns:repeat(2,1fr)} .svc__types-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:500px){.svc__grid{grid-template-columns:1fr}}

/* =========================================================================
   ADVANTAGE
   ========================================================================= */
.adv__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:46px}
.adv__card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid var(--line);
  padding:34px 32px;
  border-radius:2px;
  position:relative;
  overflow:hidden;
  transition:border-color .4s, transform .4s;
}
.adv__card::before{
  content:""; position:absolute; top:0; right:0;
  width:50px; height:50px;
  border-top:1px solid var(--gold);
  border-right:1px solid var(--gold);
  opacity:0; transition:opacity .4s, transform .4s;
  transform:translate(6px,-6px);
}
.adv__card:hover{border-color:rgba(232,169,44,.45); transform:translateY(-4px)}
.adv__card:hover::before{opacity:1; transform:translate(0,0)}
.adv__num{
  font-family:var(--f-display);
  color:var(--gold);
  font-size:44px;
  font-weight:700;
  display:block;
  line-height:1;
  margin-bottom:16px;
  font-style:italic;
  font-variation-settings:"SOFT" 100;
}
.adv__card h3{color:#fff; font-size:24px; margin-bottom:10px; font-weight:500; letter-spacing:-.005em}
.adv__card p{color:rgba(255,255,255,.68); font-size:15px; margin:0; line-height:1.6}
.testimonials{
  display:grid; grid-template-columns:repeat(2,1fr); gap:26px;
  padding-top:36px; border-top:1px solid var(--line);
}
.testimonial{
  background:rgba(255,255,255,.04);
  border-left:2px solid var(--gold);
  padding:26px 30px;
  border-radius:2px;
  position:relative;
}
.testimonial i{color:var(--gold); font-size:22px; margin-bottom:12px; display:block; opacity:.7}
.testimonial p{
  color:rgba(255,255,255,.9);
  font-family:var(--f-italic);
  font-style:italic;
  font-weight:300;
  margin:0 0 16px 0;
  font-size:16px;
  line-height:1.6;
}
.testimonial__author{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-top:12px;
  border-top:1px solid rgba(232,169,44,.22);
}
.testimonial__name{
  font-family:var(--f-serif);
  font-weight:600;
  font-size:15px;
  color:var(--gold);
  letter-spacing:.02em;
}
.testimonial__role{
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
@media (max-width:800px){.adv__grid, .testimonials{grid-template-columns:1fr}}

/* =========================================================================
   DEVELOPERS — grayscale → color, editorial grid
   ========================================================================= */
.dev__grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  margin-bottom:30px;
  border:1px solid rgba(13,37,70,.08);
  background:#fff;
}
.dev__card{
  background:#fff;
  padding:28px 18px 22px;
  text-align:center;
  color:var(--navy);
  border-right:1px solid rgba(13,37,70,.08);
  border-bottom:1px solid rgba(13,37,70,.08);
  transition:background .3s ease, transform .3s ease;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; min-height:150px;
}
.dev__card:nth-child(5n){border-right:none}
.dev__card:nth-last-child(-n+5){border-bottom:none}
.dev__card img{
  max-width:100%; max-height:56px; width:auto; height:auto;
  object-fit:contain;
  filter:none; opacity:.95;
  transition:opacity .3s ease, transform .4s ease;
}
.dev__card span{
  font-family:var(--f-mono);
  font-size:11px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  transition:color .3s;
}
.dev__card:hover{background:var(--parchment); transform:translateY(-2px)}
.dev__card:hover img{opacity:1; transform:scale(1.06)}
.dev__card:hover span{color:var(--gold-deep)}
.dev__foot{
  text-align:center; color:var(--muted);
  margin-bottom:36px; font-family:var(--f-italic);
  font-style:italic; font-size:15px;
}
.dev__badges{
  display:flex; justify-content:center; flex-wrap:wrap; gap:36px;
  padding:30px; border-top:1px solid rgba(13,37,70,.1);
  border-bottom:1px solid rgba(13,37,70,.1);
}
.dev__badges span{
  display:inline-flex; align-items:center; gap:12px;
  color:var(--navy); font-weight:400;
  font-size:12px; letter-spacing:.2em;
  text-transform:uppercase;
  font-family:var(--f-mono);
}
.dev__badges i{color:var(--gold-deep); font-size:16px}
@media (max-width:1000px){
  .dev__grid{grid-template-columns:repeat(3,1fr)}
  .dev__card{border-right:1px solid rgba(13,37,70,.08)}
  .dev__card:nth-child(5n){border-right:1px solid rgba(13,37,70,.08)}
  .dev__card:nth-child(3n){border-right:none}
  .dev__card:nth-last-child(-n+5){border-bottom:1px solid rgba(13,37,70,.08)}
  .dev__card:nth-last-child(-n+3){border-bottom:none}
}
@media (max-width:540px){
  .dev__grid{grid-template-columns:repeat(2,1fr)}
  .dev__card:nth-child(3n){border-right:1px solid rgba(13,37,70,.08)}
  .dev__card:nth-child(2n){border-right:none}
}

/* =========================================================================
   FEATURED PROPERTIES — editorial cards with corner brackets
   ========================================================================= */
.feat__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.feat__card{
  background:var(--parchment);
  border-radius:2px;
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
  position:relative;
}
.feat__card::before, .feat__card::after{
  content:""; position:absolute; width:28px; height:28px;
  z-index:3; pointer-events:none;
  opacity:0; transition:opacity .4s ease, transform .5s ease;
}
.feat__card::before{
  top:10px; left:10px;
  border-top:1px solid var(--gold);
  border-left:1px solid var(--gold);
  transform:translate(-4px,-4px);
}
.feat__card::after{
  bottom:10px; right:10px;
  border-bottom:1px solid var(--gold);
  border-right:1px solid var(--gold);
  transform:translate(4px,4px);
}
.feat__card:hover{transform:translateY(-8px); box-shadow:0 28px 70px rgba(8,26,52,.24)}
.feat__card:hover::before, .feat__card:hover::after{opacity:.8; transform:translate(0,0)}
.feat__img{
  height:190px; position:relative;
  background:#0d2546 center/cover no-repeat;
  overflow:hidden;
}
.feat__img::before{
  content:""; position:absolute; inset:0;
  background-image:inherit; background-size:cover; background-position:center;
  transition:transform 1s cubic-bezier(.2,.7,.2,1);
}
.feat__card:hover .feat__img{transform:scale(1)}
.feat__img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(6,18,38,.7));
  transition:background .4s;
}
.feat__tag{
  position:absolute; top:18px; left:18px; z-index:2;
  background:var(--gold);
  color:var(--navy-deep);
  padding:7px 14px;
  border-radius:2px;
  font-size:10px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-family:var(--f-mono);
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.feat__body{padding:20px 22px 0; display:flex; flex-direction:column; flex:1}
.feat__body h3{color:var(--navy); font-size:20px; margin-bottom:4px; font-weight:600; letter-spacing:-.01em}
.feat__sub{
  color:var(--gold-deep); font-weight:500;
  border-bottom:1px solid rgba(232,169,44,.35);
  padding-bottom:8px; margin-bottom:10px;
  font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase;
  font-family:var(--f-mono);
}
.feat__loc{
  color:var(--muted); font-size:12.5px;
  margin-bottom:12px;
  display:flex; align-items:center; gap:8px;
  font-family:var(--f-mono); letter-spacing:.06em;
}
.feat__loc i{color:var(--gold-deep)}
.feat__desc{
  color:var(--ink-soft); font-size:13.5px;
  flex:1; margin-bottom:16px;
  font-family:var(--f-italic); font-style:italic;
  font-weight:300; line-height:1.55;
}
.feat__btn{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:18px;
  background:var(--navy);
  color:var(--gold);
  font-weight:500;
  font-size:12.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-family:var(--f-mono);
  margin:0 -28px; margin-top:auto;
  transition:background .3s, color .3s;
  position:relative; overflow:hidden;
}
.feat__btn::before{
  content:""; position:absolute; inset:0;
  background:var(--gold);
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
  z-index:0;
}
.feat__btn:hover::before{transform:translateY(0)}
.feat__btn > *{position:relative; z-index:1}
.feat__btn i{font-size:18px; position:relative; z-index:1}
.feat__btn:hover{color:var(--navy-deep)}
@media (max-width:960px){.feat__grid{grid-template-columns:1fr}}

/* =========================================================================
   ENQUIRY FORM
   ========================================================================= */
.enquiry-form{
  max-width:880px; margin:0 auto;
  background:var(--parchment);
  padding:44px 44px 36px;
  border:1px solid rgba(13,37,70,.08);
  box-shadow:var(--shadow);
  position:relative;
}
.enquiry-form::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--gold), transparent 80%);
}
.enquiry-form__row{
  display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:20px;
}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:20px}
.field label{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-deep);
  font-weight:400;
}
.field input, .field select, .field textarea{
  font-family:var(--f-body);
  font-size:15px;
  color:var(--ink);
  background:#fff;
  border:1px solid rgba(13,37,70,.15);
  padding:14px 16px;
  border-radius:2px;
  transition:border-color .3s, box-shadow .3s;
  width:100%;
}
.field textarea{resize:vertical; min-height:110px; font-family:var(--f-body)}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(232,169,44,.18);
}
.field input::placeholder, .field textarea::placeholder{color:#a3aebf; font-style:italic}
.enquiry-form__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:20px;
  margin-top:14px; padding-top:24px;
  border-top:1px dashed rgba(13,37,70,.14);
}
.enquiry-form__foot small{color:var(--muted); font-size:12.5px; font-style:italic; max-width:42ch}
.form-msg{margin-top:16px; font-size:14px; font-family:var(--f-mono); letter-spacing:.04em}
.form-msg.success{color:#2d7d44}
.form-msg.error{color:#b42b2b}
@media (max-width:700px){
  .enquiry-form{padding:32px 24px 28px}
  .enquiry-form__row{grid-template-columns:1fr; gap:0}
}

/* =========================================================================
   CTA
   ========================================================================= */
.cta{
  background:
    radial-gradient(ellipse 40% 50% at 90% 20%, rgba(232,169,44,.18), transparent 60%),
    linear-gradient(135deg, var(--navy-deep), var(--navy) 60%, var(--navy-mid));
  padding:100px 0;
}
.cta__inner{display:grid; grid-template-columns:1.2fr 1fr; gap:70px; align-items:center}
.cta__list{list-style:none; padding:0; margin:32px 0}
.cta__list li{
  padding:12px 0; font-size:17px;
  color:rgba(255,255,255,.9);
  font-family:var(--f-italic);
  font-style:italic;
  font-weight:300;
}
.cta__list i{color:var(--gold); margin-right:16px; width:22px}
.cta__contact{
  display:flex; flex-direction:column; gap:10px;
  color:rgba(255,255,255,.75); font-size:14.5px;
  margin-top:32px; padding-top:28px;
  border-top:1px solid var(--line);
  font-family:var(--f-mono); letter-spacing:.04em;
}
.cta__contact i{color:var(--gold); margin-right:12px; width:18px}
.cta__contact a{color:rgba(255,255,255,.92)}
.cta__contact a:hover{color:var(--gold)}
.cta__right{display:flex; flex-direction:column; align-items:flex-start; gap:16px}
.cta__trust{
  color:var(--gold); font-weight:500;
  letter-spacing:.3em; font-size:11px;
  text-transform:uppercase;
  font-family:var(--f-mono);
  margin-top:18px;
}
@media (max-width:960px){.cta__inner{grid-template-columns:1fr}}

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{
  background:var(--navy-deep);
  color:rgba(255,255,255,.65);
  padding:64px 0 28px;
  font-size:14px;
  position:relative;
  border-top:1px solid rgba(232,169,44,.2);
}
.footer::before{
  content:""; position:absolute; inset:0;
  background:var(--grain); opacity:.05; pointer-events:none;
}
.footer__inner{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px;
  position:relative;
}
.footer__logo{
  color:var(--gold); font-family:var(--f-display);
  font-size:26px; font-weight:800; margin-bottom:14px;
  letter-spacing:.01em;
}
.footer h5{
  color:#fff; margin-bottom:16px;
  font-family:var(--f-mono); font-size:11.5px;
  letter-spacing:.24em; text-transform:uppercase;
  font-weight:400;
}
.footer a{display:block; padding:5px 0; color:rgba(255,255,255,.65); transition:color .25s, padding-left .25s}
.footer a:hover{color:var(--gold); padding-left:4px}
.footer a i{color:var(--gold); margin-right:8px; width:18px}
.footer__stats{text-align:right; font-family:var(--f-mono); letter-spacing:.04em; font-size:12px}
.footer__stats strong{color:var(--gold); font-weight:500}
.footer__stats small{display:block; margin-top:14px; color:rgba(255,255,255,.35); font-size:11px; letter-spacing:.1em}
@media (max-width:960px){.footer__inner{grid-template-columns:1fr 1fr; gap:30px} .footer__stats{text-align:left}}
@media (max-width:520px){.footer__inner{grid-template-columns:1fr}}

/* =========================================================================
   FLOATING ACTIONS (Consult + WhatsApp)
   ========================================================================= */
.float-actions{
  position:fixed; right:24px; bottom:24px; z-index:100;
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
}
.wa-float{
  width:60px; height:60px; border-radius:50%;
  background:#25d366; color:#fff;
  display:grid; place-items:center;
  font-size:28px;
  box-shadow:0 14px 34px rgba(37,211,102,.5);
  transition:transform .25s ease;
  animation:waPulse 2.4s infinite;
}
.wa-float:hover{transform:scale(1.09) rotate(-6deg)}
@keyframes waPulse{
  0%  { box-shadow:0 14px 34px rgba(37,211,102,.5), 0 0 0 0 rgba(37,211,102,.55) }
  70% { box-shadow:0 14px 34px rgba(37,211,102,.5), 0 0 0 22px rgba(37,211,102,0) }
  100%{ box-shadow:0 14px 34px rgba(37,211,102,.5), 0 0 0 0 rgba(37,211,102,0) }
}

/* Book Free Consultation — pill button floating above WhatsApp */
.consult-float{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px;
  background:linear-gradient(135deg, var(--gold) 0%, #d49a2f 100%);
  color:#0a1120;
  font-family:var(--f-mono);
  font-size:12px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  border-radius:999px;
  box-shadow:0 12px 28px rgba(179,129,29,.45), 0 2px 6px rgba(0,0,0,.18);
  text-decoration:none;
  transition:transform .2s ease, box-shadow .25s ease;
  white-space:nowrap;
}
.consult-float i{font-size:14px}
.consult-float:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(179,129,29,.55), 0 3px 8px rgba(0,0,0,.22);
}
@media (max-width:640px){
  .consult-float{
    padding:10px 14px; font-size:10.5px; letter-spacing:.06em;
  }
  .consult-float i{font-size:12px}
}

/* Emphasis span inside section titles — makes key stat pop */
.section__title .title-hero-num{
  font-family:var(--f-display, Georgia, serif);
  font-style:italic;
  font-weight:800;
  color:var(--gold);
  font-size:1.15em;
  letter-spacing:-.01em;
  white-space:nowrap;
}

/* =========================================================================
   PROJECT PLAN-BOOKS (gated brochures inside Inventory section)
   ========================================================================= */
.planbook-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  margin:4px 2px 22px;
}
.planbook-head__hint{
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
}
/* Horizontal-scroll carousel: 3 cards in view, swipe / click arrows for the rest */
.planbook-carousel{
  position:relative;
}
/* Soft edge fade applied to the rail itself (not the carousel) so it doesn't
   also fade the arrow buttons that sit outside the rail. */
.planbook-rail{
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
.planbook-rail{
  display:flex;
  gap:34px;
  padding:14px 4px 18px;
  perspective:1400px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;          /* Firefox */
  -ms-overflow-style:none;       /* old Edge */
}
.planbook-rail::-webkit-scrollbar{ display:none } /* Chrome / Safari */
.planbook-rail > .planbook{
  flex:0 0 calc((100% - 68px) / 3);   /* 3 in view at desktop, gap=34px*2=68 */
  scroll-snap-align:start;
}
@media (max-width:980px){
  .planbook-rail > .planbook{ flex-basis:calc((100% - 24px) / 2) }
  .planbook-rail{ gap:24px }
}
@media (max-width:640px){
  .planbook-rail > .planbook{ flex-basis:82% }
  .planbook-rail{ gap:18px; padding:14px 8px 18px }
}

/* Arrow controls — large, navy circle with gold ring + gold chevron */
.planbook-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:5;
  width:58px; height:58px;
  display:grid; place-items:center;
  appearance:none;
  border:2px solid var(--gold);
  border-radius:50%;
  background:var(--navy-deep);
  color:var(--gold);
  font-size:20px;
  cursor:pointer;
  box-shadow:
    0 14px 32px -8px rgba(13,37,70,.55),
    0 4px 10px rgba(0,0,0,.22),
    0 0 0 6px rgba(232,169,44,.08);  /* soft gold halo for visibility */
  transition:transform .25s ease, opacity .25s ease,
             background .25s ease, color .25s ease, box-shadow .25s ease;
}
.planbook-nav:hover{
  background:var(--gold);
  color:var(--navy-deep);
  transform:translateY(-50%) scale(1.08);
  box-shadow:
    0 18px 40px -8px rgba(232,169,44,.55),
    0 6px 14px rgba(0,0,0,.22),
    0 0 0 8px rgba(232,169,44,.16);
}
.planbook-nav:active{ transform:translateY(-50%) scale(.96) }
.planbook-nav:disabled{ opacity:.3; cursor:default; pointer-events:none }
.planbook-nav--prev{ left:-26px }
.planbook-nav--next{ right:-26px }
[data-theme="dark"] .planbook-nav{ background:#0a1a33 }
@media (max-width:980px){
  .planbook-nav{ width:48px; height:48px; font-size:17px }
  .planbook-nav--prev{ left:-12px }
  .planbook-nav--next{ right:-12px }
}
@media (max-width:640px){
  .planbook-nav{ width:42px; height:42px; font-size:15px; border-width:1.5px }
  .planbook-nav--prev{ left:0 }
  .planbook-nav--next{ right:0 }
}
/* THE BOOK ------------------------------------------------------- */
.planbook{
  /* Reset button */
  appearance:none; border:0; background:transparent; padding:0;
  cursor:pointer;
  text-align:left;
  display:flex; flex-direction:column; gap:14px;
  font:inherit; color:inherit;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
  transform-style:preserve-3d;
}
.planbook:hover{transform:translateY(-4px)}
.planbook:focus-visible{outline:none}
.planbook:focus-visible .planbook__cover{box-shadow:0 0 0 3px var(--gold), 0 30px 50px -20px rgba(13,37,70,.45)}

/* Cover (page 1 image) wrapper */
.planbook__cover{
  position:relative;
  display:block;
  aspect-ratio: 4 / 3;      /* landscape brochure (real-estate plan-books are wide) */
  width:100%;
  border-radius:4px 6px 6px 4px;   /* spine is slightly sharper */
  overflow:hidden;
  background:#0d2546;
  box-shadow:
    0 22px 44px -16px rgba(13,37,70,.55),
    0 8px 14px -6px rgba(13,37,70,.35),
    inset 0 0 0 1px rgba(0,0,0,.08);
  transform-origin:left center;
  transition:transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
}
.planbook__cover img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center center;  /* default — override per-book via inline style from planbooks.json */
  display:block;
  transition:transform .6s ease;
}
.planbook:hover .planbook__cover{
  transform:rotateY(-16deg);
  box-shadow:
    28px 28px 55px -10px rgba(13,37,70,.55),
    0 10px 18px -6px rgba(13,37,70,.4),
    inset 0 0 0 1px rgba(0,0,0,.1);
}
.planbook:hover .planbook__cover img{transform:scale(1.04)}

/* Spine — vertical dark gradient strip on the left edge */
.planbook__spine{
  position:absolute;
  left:0; top:0; bottom:0;
  width:18px;
  pointer-events:none;
  z-index:3;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.22) 40%,
      rgba(0,0,0,.05) 75%,
      transparent 100%);
  transform:translateZ(0);
}
/* Pages — stacked paper look on the RIGHT edge (visible on hover) */
.planbook__pages{
  position:absolute;
  right:-4px; top:4px; bottom:4px;
  width:7px;
  background:
    repeating-linear-gradient(0deg, #fdfaee 0 2px, #e9e1c6 2px 3px);
  border-radius:0 3px 3px 0;
  box-shadow:1px 0 2px rgba(0,0,0,.15);
  opacity:0;
  transform:translateX(-8px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
  z-index:1;
}
.planbook:hover .planbook__pages{opacity:1; transform:translateX(0)}

/* Shine sweep on hover */
.planbook__shine{
  position:absolute; inset:0;
  background:linear-gradient(115deg,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,0) 65%);
  transform:translateX(-100%);
  transition:transform .9s ease;
  pointer-events:none;
  z-index:4;
}
.planbook:hover .planbook__shine{transform:translateX(100%)}

/* Corner badges on the cover */
.planbook__cover{position:relative}
.planbook__badges{
  position:absolute;
  top:12px; left:26px;          /* offset past the spine */
  display:flex; flex-direction:column; gap:6px;
  z-index:4;
}
.planbook__tag{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 9px;
  font-family:var(--f-mono);
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  border-radius:3px;
  backdrop-filter:blur(4px);
  box-shadow:0 4px 10px rgba(0,0,0,.2);
  white-space:nowrap;
}
.planbook__tag i{font-size:9px}
.planbook__tag--blue{background:rgba(13,37,70,.88); color:#fff}
.planbook__tag--gold{background:var(--gold); color:var(--navy-deep)}

/* Lock overlay — appears on hover to signal gated */
.planbook__lock{
  position:absolute;
  left:50%; bottom:14px;
  transform:translateX(-50%) translateY(8px);
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px;
  background:rgba(13,37,70,.92);
  color:#f4e5c1;
  border:1px solid var(--gold);
  border-radius:999px;
  font-family:var(--f-mono);
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  opacity:0;
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
  z-index:5;
  white-space:nowrap;
}
.planbook__lock i{color:var(--gold); font-size:11px}
.planbook:hover .planbook__lock,
.planbook:focus-visible .planbook__lock{
  opacity:1; transform:translateX(-50%) translateY(0);
}

/* Meta block below cover */
.planbook__meta{
  display:flex; flex-direction:column; gap:3px;
  padding:0 2px;
}
.planbook__title{
  font-family:var(--f-display, Georgia, serif);
  font-size:18px; font-weight:800;
  color:var(--navy);
  letter-spacing:-.005em;
  line-height:1.2;
}
.planbook__sub{
  font-family:var(--f-italic, Georgia, serif);
  font-style:italic;
  font-size:13px;
  color:var(--gold-deep);
}
.planbook__loc{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-mono);
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
  margin-top:2px;
}
.planbook__loc i{color:var(--gold); font-size:10px}

.planbook-foot{
  margin-top:18px;
  padding-top:14px;
  border-top:1px dashed rgba(232,169,44,.32);
  text-align:center;
}

/* Divider between plan-books and live slider */
.inventory-divider{
  display:flex; align-items:center; gap:14px;
  margin:38px 0 22px;
  color:var(--muted);
}
.inventory-divider span{
  flex:1; height:1px;
  background:linear-gradient(90deg, transparent, rgba(13,37,70,.2), transparent);
}
.inventory-divider em{
  font-family:var(--f-italic, Georgia, serif);
  font-style:italic;
  font-size:13px;
  color:var(--gold-deep);
  letter-spacing:.02em;
}

[data-theme="dark"] .planbook__title{color:#f6efdf}
[data-theme="dark"] .planbook__loc{color:#95a2bb}
[data-theme="dark"] .inventory-divider span{background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent)}

@media (max-width:640px){
  .planbook-rail{grid-template-columns:1fr; gap:24px}
  .planbook__title{font-size:16px}
  .planbook__sub{font-size:12px}
}

/* =========================================================================
   PLAN-BOOK REQUEST MODAL (reused for every future project brochure)
   ========================================================================= */
.pb-modal{
  position:fixed; inset:0; z-index:2000;
  display:none;
  align-items:center; justify-content:center;
  padding:20px;
}
.pb-modal.is-open{display:flex; animation:pbFade .25s ease}
@keyframes pbFade{from{opacity:0}to{opacity:1}}
.pb-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(6,18,38,.72);
  backdrop-filter:blur(4px);
}
.pb-modal__card{
  position:relative;
  width:min(520px, 100%);
  max-height:92vh; overflow-y:auto;
  background:#fcf8ef;
  border-radius:12px;
  padding:26px 26px 22px;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(232,169,44,.3);
  animation:pbSlide .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes pbSlide{from{transform:translateY(20px); opacity:0}to{transform:translateY(0); opacity:1}}
.pb-modal__close{
  position:absolute; top:12px; right:12px;
  width:34px; height:34px;
  border:0; border-radius:50%;
  background:rgba(13,37,70,.08);
  color:var(--navy);
  cursor:pointer;
  display:grid; place-items:center;
  font-size:16px;
  transition:background .2s ease, transform .2s ease;
}
.pb-modal__close:hover{background:rgba(13,37,70,.18); transform:rotate(90deg)}
.pb-modal__head{
  display:flex; align-items:flex-start; gap:14px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(232,169,44,.3);
  margin-bottom:16px;
}
.pb-modal__book{
  flex-shrink:0;
  width:48px; height:48px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color:var(--navy-deep);
  font-size:22px;
  border-radius:8px;
  box-shadow:0 8px 18px rgba(232,169,44,.4);
}
.pb-modal__title{
  font-family:var(--f-display, Georgia, serif);
  font-size:22px; font-weight:800;
  color:var(--navy);
  margin:2px 0 3px;
  line-height:1.2;
}
.pb-modal__sub{
  font-family:var(--f-mono);
  font-size:11.5px; letter-spacing:.06em;
  color:var(--muted);
}
.pb-modal__form{
  box-shadow:none;
  border:0;
  padding:0;
  background:transparent;
}
.pb-modal.is-open body,
body.pb-modal-open{overflow:hidden}

[data-theme="dark"] .pb-modal__card{background:#152541; color:#f6efdf}
[data-theme="dark"] .pb-modal__title{color:#f6efdf}
[data-theme="dark"] .pb-modal__close{background:rgba(255,255,255,.08); color:#f6efdf}

/* =========================================================================
   REACT-FEEL LAYER: scroll reveals, intro curtain, progress, active nav
   ========================================================================= */

/* Reveal-on-scroll: default hidden, fades + rises when .in-view is added */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity .85s cubic-bezier(.2,.7,.2,1),
    transform .95s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--reveal-delay, 0ms);
  will-change:opacity, transform;
}
.reveal.in-view{opacity:1; transform:translateY(0)}

/* Page-load curtain (navy sheet that slides up on load) */
.intro{
  position:fixed; inset:0; z-index:9999;
  background:var(--navy-deep);
  display:grid; place-items:center;
  transition:transform 1s cubic-bezier(.77,0,.18,1), opacity .3s ease .8s;
  overflow:hidden;
}
.intro::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(232,169,44,.18), transparent 60%),
    var(--grain);
  opacity:.6;
}
.intro__mark{
  font-family:var(--f-display);
  font-weight:900; font-size:96px;
  color:transparent;
  -webkit-text-stroke:1.5px var(--gold);
  letter-spacing:.02em;
  line-height:1;
  position:relative;
  animation:introPulse 1.2s ease-in-out infinite alternate;
}
.intro__line{
  position:absolute; bottom:38%; left:50%; transform:translateX(-50%);
  width:0; height:1px; background:var(--gold);
  animation:introLine 1.1s ease-out forwards .25s;
}
.intro--done{transform:translateY(-100%); opacity:0}

/* Staged intro: logo first, then video, then curtain slides up */
.intro__stage{
  position:absolute; inset:0;
  display:grid; place-items:center;
  transition:opacity .55s ease;
}
.intro__stage--logo{ opacity:1; z-index:2 }
.intro__stage--video{ opacity:0; z-index:1; overflow:hidden }
.intro--video-on .intro__stage--logo{ opacity:0 }
.intro--video-on .intro__stage--video{ opacity:1 }

.intro__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center center;
  background:var(--navy-deep);
}
.intro__video-vignette{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, transparent 55%, rgba(6,18,38,.55) 100%),
    linear-gradient(180deg, rgba(6,18,38,.18) 0%, transparent 30%, transparent 70%, rgba(6,18,38,.45) 100%);
}
.intro__video-mark{
  position:absolute;
  bottom:7%; left:50%; transform:translateX(-50%);
  font-family:var(--f-display);
  font-weight:900; font-size:34px;
  letter-spacing:.32em;
  color:rgba(255,255,255,.92);
  text-shadow:0 2px 18px rgba(0,0,0,.45);
  opacity:0;
  animation:introMarkFade .9s ease .35s forwards;
}
@keyframes introMarkFade{
  from{opacity:0; transform:translate(-50%,8px)}
  to  {opacity:1; transform:translate(-50%,0)}
}

/* Disable splash entirely if video can't play (graceful skip) */
.intro--video-failed .intro__stage--video{ display:none }

/* Lock body scroll while splash is up */
body.intro-active{ overflow:hidden }
@keyframes introPulse{
  from{text-shadow:0 0 12px rgba(232,169,44,.1)}
  to  {text-shadow:0 0 40px rgba(232,169,44,.55)}
}
@keyframes introLine{
  from{width:0}
  to  {width:140px}
}

/* Top-of-viewport gold scroll-progress bar */
.scroll-progress{
  position:fixed; top:0; left:0; z-index:9998;
  height:2px; width:0%;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  box-shadow:0 0 10px rgba(232,169,44,.6);
  transition:width .1s linear;
}

/* Active nav link (scroll-spy) */
.nav__links a.active{color:var(--gold)}
.nav__links a.active::after{right:0}

/* Tilt target: ensure smooth transition in/out */
.feat__card, .market__card{
  transition:transform .35s cubic-bezier(.2,.7,.2,1),
             box-shadow .35s ease;
}

/* =========================================================================
   HERO KEN-BURNS (gentle zoom — perf-tuned, GPU only)
   ========================================================================= */
.hero__card{
  animation:kenBurns 30s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes kenBurns{
  0%  {transform:scale(1.02) translateZ(0)}
  100%{transform:scale(1.08) translateZ(0)}
}

/* =========================================================================
   THEME TOGGLE (dark mode)
   ========================================================================= */
.theme-toggle{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  width:38px; height:38px;
  border-radius:50%;
  display:grid; place-items:center;
  cursor:pointer;
  font-size:14px;
  transition:background .25s, color .25s, border-color .25s, transform .35s;
}
.theme-toggle:hover{color:var(--gold); border-color:var(--gold); transform:rotate(20deg)}

/* Dark mode: override key surfaces */
[data-theme="dark"]{
  --cream:#0a1628;
  --cream-alt:#0d1e36;
  --parchment:#122843;
  --ink:#e9ecf2;
  --ink-soft:#b6c0d0;
  --muted:#8a97ab;
  --line-ink:rgba(255,255,255,.08);
}
[data-theme="dark"] body{background:var(--cream); color:var(--ink)}
[data-theme="dark"] .section__title{color:#fff}
[data-theme="dark"] .section--cream,
[data-theme="dark"] .section--cream-alt{color:var(--ink)}
[data-theme="dark"] .checklist li{border-bottom-color:rgba(255,255,255,.08); color:var(--ink-soft)}
[data-theme="dark"] .about__right,
[data-theme="dark"] .svc__card,
[data-theme="dark"] .svc__types,
[data-theme="dark"] .market__foot,
[data-theme="dark"] .enquiry-form,
[data-theme="dark"] .feat__card{
  background:var(--parchment);
  border-color:rgba(255,255,255,.07);
}
[data-theme="dark"] .svc__card h3,
[data-theme="dark"] .feat__body h3,
[data-theme="dark"] .team__name,
[data-theme="dark"] .market__foot strong{color:#fff}
[data-theme="dark"] .dev__grid{background:var(--parchment); border-color:rgba(255,255,255,.06)}
[data-theme="dark"] .dev__card{background:var(--parchment); border-color:rgba(255,255,255,.06); color:#fff}
[data-theme="dark"] .dev__card:hover{background:#17304f}
[data-theme="dark"] .dev__card img{filter:grayscale(1) brightness(1.8) contrast(.9) opacity(.75)}
[data-theme="dark"] .dev__card:hover img{filter:grayscale(0) brightness(1) contrast(1) opacity(1)}
[data-theme="dark"] .stats{border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .stat{border-right-color:rgba(255,255,255,.06)}
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea{background:#0a1628; color:#fff; border-color:rgba(255,255,255,.14)}
[data-theme="dark"] .dev__badges{border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .dev__badges span{color:#fff}
[data-theme="dark"] .theme-toggle{color:var(--gold); border-color:var(--gold)}
[data-theme="dark"] .map-loc{background:var(--parchment); color:#fff; border-color:rgba(255,255,255,.07)}
[data-theme="dark"] .map-loc strong{color:#fff}

/* =========================================================================
   STICKY SECTION LABELS (running vertically up the left edge)
   ========================================================================= */
.section[data-label]::before{
  content:attr(data-label);
  position:absolute;
  top:110px;
  left:18px;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--gold-deep);
  opacity:.55;
  pointer-events:none;
  z-index:1;
}
.section--navy[data-label]::before{color:var(--gold)}
@media (max-width:1100px){
  .section[data-label]::before{display:none}
}

/* =========================================================================
   TESTIMONIAL CAROUSEL
   ========================================================================= */
.testimonials__head{
  text-align:center;
  padding-top:32px;
  margin-bottom:22px;
  border-top:1px solid var(--line);
  position:relative;
}
.testimonials__eyebrow{
  display:inline-block;
  margin-top:22px;
  font-family:var(--f-display);
  font-style:italic;
  font-weight:500;
  font-size:22px;
  color:var(--gold);
  letter-spacing:.02em;
  position:relative;
}
.testimonials__eyebrow::before,
.testimonials__eyebrow::after{
  content:"";
  position:absolute; top:50%;
  width:44px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(232,169,44,.55), transparent);
}
.testimonials__eyebrow::before{right:calc(100% + 14px)}
.testimonials__eyebrow::after{left:calc(100% + 14px)}
.testimonials{display:block; padding-top:4px; position:relative}
.testimonials__track{
  display:flex;
  gap:26px;
  overflow:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
}
.testimonials__track .testimonial{
  flex:0 0 calc(50% - 13px);
  scroll-snap-align:start;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s ease;
}
.testimonials__controls{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-top:34px;
}
.testimonials__btn{
  background:transparent; color:var(--gold);
  border:1px solid rgba(232,169,44,.5);
  width:42px; height:42px; border-radius:50%;
  cursor:pointer; display:grid; place-items:center;
  font-size:14px; transition:background .25s, color .25s, transform .25s;
}
.testimonials__btn:hover{background:var(--gold); color:var(--navy-deep); transform:scale(1.08)}
.testimonials__dots{display:flex; gap:10px}
.testimonials__dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(232,169,44,.3); border:none; cursor:pointer;
  transition:background .3s, transform .3s;
}
.testimonials__dot.active{background:var(--gold); transform:scale(1.3)}
@media (max-width:800px){
  .testimonials__track .testimonial{flex:0 0 100%}
}

/* =========================================================================
   PROPERTY SLIDER (More Opportunities)
   ========================================================================= */
.slider{position:relative; display:flex; align-items:center; gap:14px}
.slider__viewport{
  flex:1; overflow:hidden;
  scroll-snap-type:x mandatory;
  mask-image:linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.slider__track{
  display:flex;
  gap:24px;
  transition:transform .65s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
.slider__card{
  flex:0 0 calc(33.333% - 16px);
  background:var(--parchment);
  border-radius:2px;
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .4s ease, box-shadow .4s ease;
  position:relative;
}
.slider__card:hover{transform:translateY(-6px); box-shadow:0 24px 60px rgba(8,26,52,.22)}
.slider__img{
  height:200px;
  background:#0d2546 center/cover no-repeat;
  position:relative;
}
.slider__img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(6,18,38,.7));
}
.slider__tag{
  position:absolute; top:14px; left:14px; z-index:2;
  background:var(--gold); color:var(--navy-deep);
  padding:6px 12px; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; font-family:var(--f-mono); font-weight:500;
  border-radius:2px;
}
.slider__price{
  position:absolute; bottom:14px; right:14px; z-index:2;
  background:rgba(6,18,38,.85); color:var(--gold);
  padding:8px 14px; font-family:var(--f-display); font-size:15px; font-weight:700;
  border-radius:2px; letter-spacing:.01em;
}
.slider__body{padding:22px; display:flex; flex-direction:column; flex:1}
.slider__body h3{color:var(--navy); font-size:19px; margin-bottom:4px; font-weight:600}
.slider__sub{color:var(--gold-deep); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-family:var(--f-mono); margin-bottom:10px}
.slider__loc{color:var(--muted); font-size:13px; margin-bottom:10px; font-family:var(--f-mono); letter-spacing:.04em}
.slider__desc{color:var(--ink-soft); font-size:14px; font-family:var(--f-italic); font-style:italic; flex:1; margin-bottom:14px; line-height:1.55}
.slider__card .feat__btn{margin:0 -22px -22px}
.slider__btn{
  background:var(--navy); color:var(--gold);
  border:none; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  font-size:15px; flex-shrink:0;
  box-shadow:var(--shadow-sm);
  transition:background .25s, transform .25s;
  z-index:2;
}
.slider__btn:hover{background:var(--gold); color:var(--navy-deep); transform:scale(1.08)}
.slider__btn:disabled{opacity:.3; cursor:not-allowed; transform:none}
.slider__foot{text-align:center; margin-top:24px}
.slider__foot .eyebrow{opacity:.7}
@media (max-width:900px){.slider__card{flex:0 0 calc(50% - 12px)}}
@media (max-width:560px){.slider__card{flex:0 0 calc(100% - 0px)} .slider__btn{width:40px; height:40px}}

[data-theme="dark"] .slider__card{background:var(--parchment)}
[data-theme="dark"] .slider__body h3{color:#fff}

/* =========================================================================
   LOCATIONS MAP
   ========================================================================= */
.map-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:28px}
.map-embed{
  border-radius:2px; overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(13,37,70,.1);
  min-height:440px;
  filter:saturate(.95);
}
.map-embed iframe{display:block; width:100%; height:100%; min-height:440px}
.map-locs{display:flex; flex-direction:column; gap:14px}
.map-loc{
  display:flex; align-items:center; gap:18px;
  background:var(--parchment);
  border:1px solid rgba(13,37,70,.08);
  padding:18px 22px;
  border-radius:2px;
  transition:transform .3s ease, border-color .3s, background .3s;
  color:var(--ink);
}
.map-loc:hover{transform:translateX(4px); border-color:var(--gold); background:#fff}
.map-loc__num{
  font-family:var(--f-display); color:var(--gold);
  font-size:28px; font-weight:800; line-height:1;
  font-style:italic;
}
.map-loc div{flex:1}
.map-loc strong{
  display:block; font-family:var(--f-display); font-size:18px; color:var(--navy);
  margin-bottom:3px; font-weight:700;
}
.map-loc span{color:var(--muted); font-size:12.5px; font-family:var(--f-mono); letter-spacing:.06em}
.map-loc i{color:var(--gold-deep); opacity:.6; transition:opacity .3s, transform .3s}
.map-loc:hover i{opacity:1; transform:translate(2px,-2px)}
@media (max-width:900px){.map-grid{grid-template-columns:1fr}}

[data-theme="dark"] .map-loc:hover{background:#17304f}
[data-theme="dark"] .map-embed{filter:saturate(.9) brightness(.85) invert(.9) hue-rotate(180deg)}

/* =========================================================================
   DEVELOPER MARQUEE — infinite horizontal ticker
   ========================================================================= */
.marquee{
  position:relative;
  overflow:hidden;
  padding:56px 0 42px;
  background:var(--navy);
  border-top:1px solid rgba(232,169,44,.25);
  border-bottom:1px solid rgba(232,169,44,.25);
}
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:160px;z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--navy),transparent)}
.marquee::after{right:0;background:linear-gradient(-90deg,var(--navy),transparent)}
.marquee__heading{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);text-align:center;margin-bottom:18px;opacity:.85;
}
.marquee__track{
  display:flex;gap:70px;width:max-content;
  animation:marqueeSlide 55s linear infinite;
  will-change:transform;
}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--f-display);font-size:26px;font-weight:700;color:#fff;
  white-space:nowrap;letter-spacing:-.005em;
}
.marquee__item::before{
  content:"";width:6px;height:6px;background:var(--gold);border-radius:50%;
  box-shadow:0 0 10px rgba(232,169,44,.7);flex-shrink:0;
}
.marquee__sub{
  text-align:center;color:rgba(255,255,255,.55);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--f-mono);margin-top:22px;
}
@keyframes marqueeSlide{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-50%,0,0)}
}
@media (max-width:700px){
  .marquee__item{font-size:20px}
  .marquee__track{gap:48px}
}

/* =========================================================================
   PERF: skip rendering off-screen sections (big scroll smoothness win)
   ========================================================================= */
#about, #market, #services, #advantage, #developers,
#featured, #opportunities, #locations, #enquire, #contact{
  content-visibility:auto;
  contain-intrinsic-size:1px 800px;  /* reserve space so scroll doesn't jump */
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .hero__left > *{opacity:1; transform:none}
  .reveal{opacity:1; transform:none}
  .intro{display:none}
  .hero__card{animation:none}
  .marquee__track{animation:none}
}

/* =========================================================================
   COMPACT SWEEP — density pass (72-75% of prior vertical rhythm)
   Tightens remaining grids, team, vm, cta, developers, opportunities, footer
   ========================================================================= */
.vm__grid{gap:14px}
.vm__card{padding:18px 18px}
.vm__card p, .vm__list{font-size:15.5px; line-height:1.6}
.vm__list li{font-size:15.5px}
.vm__title{font-size:11.5px; letter-spacing:.22em}
.vm__card h3, .vm__head{font-size:17px}

.team{gap:14px; margin-bottom:14px}
.team__photo{width:84px; height:84px}
.team__name{font-size:15px}
.team__role{font-size:11.5px}
.team__exp{font-size:11px}

.about__quote{font-size:13.5px; padding:11px 15px; margin-top:12px}
.checklist li{padding:7px 0; font-size:13.5px; gap:12px}
.checklist{margin:0 0 14px}

.adv__grid, .testimonials{gap:14px}
.testimonial{padding:14px 16px}
.testimonial p{font-size:13.5px; line-height:1.5}

.dev__grid{gap:9px !important}
.dev__card{padding:10px 8px !important}
.dev__card img{max-height:52px !important; max-width:88% !important; width:auto !important; object-fit:contain !important}
.dev__card--wide img{max-height:34px !important; max-width:95% !important}
.dev__card--xl img{max-height:62px !important; max-width:92% !important}

.map-grid{gap:14px !important}
.map-loc{padding:11px 13px !important; font-size:12.5px !important}

.cta__inner{gap:24px}
.cta__list li{padding:5px 0; font-size:13px}
.cta__contact div{font-size:13px; padding:4px 0}
.cta__trust{font-size:11.5px; margin-top:10px}

.footer__inner{gap:24px; padding:30px 0 20px}
.footer__inner h5{font-size:12.5px; margin-bottom:10px}
.footer__inner a, .footer__inner p{font-size:12.5px; line-height:1.55}
.footer__rera{font-size:12px; color:var(--gold); margin-top:6px; letter-spacing:.04em}
.footer__rera i{margin-right:6px}

.form__grid{gap:14px}
.form__grid label, .enquire-form label{font-size:12px}
.enquire-form input, .enquire-form select, .enquire-form textarea{padding:9px 11px; font-size:13.5px}

/* Mobile density */
@media (max-width:700px){
  .hero__logo{font-size:64px}
  .hero__title{font-size:26px; line-height:1.15}
  .hero__sub{font-size:13.5px}
  .market__hero img{height:200px}
  .market__grid{grid-template-columns:1fr; gap:14px}
  .market__card{min-height:180px; padding:100px 16px 16px}
  .svc__grid, .feat__grid{grid-template-columns:1fr; gap:14px}
  .vm__grid{grid-template-columns:1fr; gap:14px}
  .team{grid-template-columns:1fr 1fr; gap:14px}
  .team__photo{width:80px; height:80px}
  .cta__inner{grid-template-columns:1fr; gap:24px}
  .footer__inner{grid-template-columns:1fr !important; gap:24px; padding:32px 0 20px}
  .nav__inner{padding:10px 18px}
  .nav__links a{font-size:11.5px; letter-spacing:.14em}
  .container{padding:0 18px}
  .section__title{font-size:24px}
  body{font-size:15px}
}

/* Ultra-narrow phones */
@media (max-width:400px){
  .hero__logo{font-size:54px}
  .hero__title{font-size:23px}
  .team{grid-template-columns:1fr}
  .nav__links{gap:0}
  .nav__links a{padding:12px 18px}
}

/* =========================================================================
   BROCHURE — gated download form
   ========================================================================= */
.section--cream-alt{background:var(--cream-alt, #f0e9d5)}
.brochure-section{padding:56px 0}
.brochure__inner{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:44px;
  align-items:center;
}
.brochure__left .section__title{margin-bottom:10px}
.brochure__left .section__sub{margin-bottom:18px}
.brochure__bullets{list-style:none; padding:0; margin:0}
.brochure__bullets li{
  display:flex; gap:10px; align-items:center;
  padding:8px 0;
  font-size:14px;
  color:var(--ink-soft);
  font-family:var(--f-italic); font-style:italic;
}
.brochure__bullets i{
  color:#fff; background:#1ca05a;
  width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; font-size:10px; flex-shrink:0;
  border:1px solid #148a4a;
}
.brochure-form{
  background:#fff;
  border:1px solid rgba(13,37,70,.08);
  border-radius:10px;
  padding:22px 22px 20px;
  box-shadow:0 14px 40px -18px rgba(13,37,70,.25);
  display:flex; flex-direction:column; gap:12px;
}
.brochure-form__head{
  display:flex; align-items:center; gap:14px;
  padding-bottom:14px;
  border-bottom:1px dashed rgba(232,169,44,.35);
  margin-bottom:4px;
}
.brochure-form__head i{
  font-size:30px;
  color:#d32f2f;
  flex-shrink:0;
}
.brochure-form__head strong{
  display:block;
  font-family:var(--f-serif);
  font-size:15px;
  color:var(--navy);
  letter-spacing:.01em;
}
.brochure-form__head small{
  display:block;
  font-size:11.5px;
  color:var(--muted);
  margin-top:2px;
  line-height:1.45;
}
.brochure-form label{
  display:flex; flex-direction:column; gap:5px;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.brochure-form input[type="text"],
.brochure-form input[type="email"],
.brochure-form input[type="tel"]{
  padding:10px 12px;
  font-size:14px;
  font-family:var(--f-body);
  text-transform:none; letter-spacing:0;
  border:1px solid rgba(13,37,70,.15);
  background:#fdfcf8;
  border-radius:6px;
  color:var(--navy);
  transition:border-color .2s, box-shadow .2s;
}
.brochure-form input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(232,169,44,.15);
}
.brochure-form__consent{
  flex-direction:row !important;
  align-items:flex-start;
  gap:10px !important;
  font-size:12px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-family:var(--f-body) !important;
  color:var(--ink-soft) !important;
  line-height:1.45;
  padding-top:4px;
}
.brochure-form__consent input{margin-top:3px; flex-shrink:0; accent-color:var(--gold)}
.brochure-form button[type="submit"]{margin-top:4px}
.brochure-form__note{
  font-size:11.5px;
  color:var(--muted);
  text-align:center;
  line-height:1.5;
  margin-top:-2px;
}
.form-msg{
  font-size:13px;
  padding:8px 12px;
  border-radius:6px;
  text-align:center;
  min-height:0;
  transition:opacity .3s ease;
}
.form-msg.success{background:rgba(28,160,90,.12); color:#147a42; border:1px solid rgba(28,160,90,.3)}
.form-msg.error{background:rgba(211,47,47,.08); color:#b71c1c; border:1px solid rgba(211,47,47,.25)}
.form-msg.info{background:rgba(232,169,44,.12); color:#8a6010; border:1px solid rgba(232,169,44,.3)}

[data-theme="dark"] .section--cream-alt{background:#0f1a2c}
[data-theme="dark"] .brochure-form{background:#152541; border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .brochure-form__head strong{color:#f6efdf}
[data-theme="dark"] .brochure-form input{background:#0f1a2c; color:#f6efdf; border-color:rgba(255,255,255,.12)}
[data-theme="dark"] .brochure-form__consent{color:#c2cbdc !important}
[data-theme="dark"] .brochure__bullets li{color:#c2cbdc}

@media (max-width:860px){
  .brochure__inner{grid-template-columns:1fr; gap:24px}
}
@media (max-width:700px){
  .brochure-section{padding:40px 0}
  .brochure-form{padding:18px 16px 16px}
}

/* =========================================================================
   STICKY MOBILE ACTION BAR — Call + WhatsApp, only shown on mobile
   ========================================================================= */
.mobile-actionbar{
  display:none;     /* desktop: hidden */
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:90;
  padding:8px 8px max(8px, env(safe-area-inset-bottom));
  gap:8px;
  background:linear-gradient(180deg, rgba(13,37,70,0) 0%, rgba(13,37,70,.06) 30%, rgba(13,37,70,.12) 100%);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.mobile-actionbar__btn{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:54px;
  border-radius:14px;
  font-family:var(--f-mono);
  font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  text-decoration:none;
  box-shadow:0 6px 18px -4px rgba(13,37,70,.4), 0 1px 3px rgba(0,0,0,.15);
  transition:transform .15s ease, box-shadow .15s ease;
}
.mobile-actionbar__btn i{ font-size:18px }
.mobile-actionbar__btn--call{
  background:var(--navy-deep); color:var(--gold);
}
.mobile-actionbar__btn--wa{
  background:#25D366; color:#fff;
}
.mobile-actionbar__btn:active{ transform:scale(.98) }

@media (max-width:780px){
  .mobile-actionbar{ display:flex }
  /* On mobile, hide the desktop float-actions to avoid duplication */
  .float-actions{ display:none }
  /* Pad the page bottom so the last bit of content isn't trapped under the bar */
  body{ padding-bottom:78px }
}

/* =========================================================================
   FAQ — Hidden by default (cover page stays clean). Becomes visible when
   the user clicks the footer "FAQ" link → URL gets #faq → :target matches.
   Either way the content is in the DOM, so Google + AI-search crawlers
   (ChatGPT, Perplexity, Claude, Gemini) index every Q&A regardless of
   toggle state.
   ========================================================================= */
.faq-seo{
  display:none;
}
.faq-seo.is-open{
  display:block;
  padding:64px 0 56px;
  background:var(--cream-alt, #f3eddc);
  scroll-margin-top:90px;        /* don't jump under the sticky nav */
  animation:faqAppear .45s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes faqAppear{
  from{ opacity:0; transform:translateY(20px) }
  to  { opacity:1; transform:translateY(0)    }
}
@media (max-width:640px){
  .faq-seo.is-open{ padding:40px 0 32px }
}

/* =========================================================================
   FAQ accordion items — rendered inside .faq-seo when revealed
   ========================================================================= */
.faq{
  display:flex; flex-direction:column;
  gap:12px;
  margin:14px auto 0;
  max-width:920px;
}
.faq__item{
  background:#fff;
  border:1px solid rgba(13,37,70,.08);
  border-radius:14px;
  padding:0;
  overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.faq__item[open]{
  border-color:rgba(232,169,44,.45);
  box-shadow:0 14px 30px -16px rgba(13,37,70,.18);
}
.faq__item:hover{ border-color:rgba(232,169,44,.35) }

.faq__q{
  /* native marker is hideable cross-browser via list-style + ::-webkit-details-marker */
  list-style:none;
  cursor:pointer;
  padding:18px 56px 18px 22px;
  font-family:var(--f-display);
  font-weight:700;
  font-size:17.5px;
  line-height:1.4;
  color:var(--navy-deep);
  position:relative;
  user-select:none;
}
.faq__q::-webkit-details-marker{ display:none }
.faq__q::after{
  content:"+";
  position:absolute;
  right:20px; top:50%;
  transform:translateY(-50%);
  width:30px; height:30px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(232,169,44,.14);
  color:var(--gold-deep);
  font-size:20px; font-weight:700;
  line-height:1;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), background .25s ease;
}
.faq__item[open] .faq__q::after{
  transform:translateY(-50%) rotate(45deg);   /* "+" → "×" */
  background:var(--gold);
  color:#fff;
}
.faq__a{
  padding:0 22px 20px;
  border-top:1px solid rgba(13,37,70,.06);
  margin-top:-2px;
}
.faq__a p{
  font-size:15.5px;
  line-height:1.65;
  color:#3d4a5e;
  margin:14px 0 0;
}
.faq__a strong{ color:var(--navy-deep); font-weight:600 }
.faq__a a{
  color:var(--gold-deep);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.faq__a a:hover{ color:var(--navy-deep) }

[data-theme="dark"] .faq__item{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.08);
}
[data-theme="dark"] .faq__q{ color:#f6efdf }
[data-theme="dark"] .faq__a p{ color:#b8c2d3 }
[data-theme="dark"] .faq__a strong{ color:#f6efdf }
[data-theme="dark"] .faq__a{ border-top-color:rgba(255,255,255,.06) }

@media (max-width:640px){
  .faq__q{ font-size:15.5px; padding:16px 50px 16px 16px }
  .faq__q::after{ right:14px; width:26px; height:26px; font-size:18px }
  .faq__a{ padding:0 16px 16px }
  .faq__a p{ font-size:14.5px }
}

/* =========================================================================
   ACETERNITY-INSPIRED EFFECTS — vanilla CSS counterparts
   ========================================================================= */

/* SPOTLIGHT CURSOR — gold radial that tracks the mouse on dark sections.
   Variables --mx / --my are written by JS; default at 50% / 120% (off-screen)
   so the effect is invisible until the cursor enters the section. */
.has-spotlight{
  --mx:50%;
  --my:120%;
  position:relative;
}
.has-spotlight::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  z-index:1;
  background:radial-gradient(
    600px circle at var(--mx) var(--my),
    rgba(232,169,44,.10) 0%,
    rgba(232,169,44,.04) 30%,
    transparent 60%
  );
  transition:opacity .35s ease;
  opacity:1;
}
.has-spotlight > *{ position:relative; z-index:2 }    /* keep content above the spotlight */
.has-spotlight > .container{ z-index:2 }

/* Subtle grid background pattern — used selectively on dark sections to add
   texture without clutter. Combines with the spotlight overlay above. */
.section--navy.has-grid::before,
.cta.has-grid::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(232,169,44,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,169,44,.05) 1px, transparent 1px);
  background-size:48px 48px;
  background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
  z-index:0;
}

/* CARD BORDER SHIMMER — animated gold gradient that sweeps the card border
   on hover. Pure CSS (conic-gradient + mask). No JS animation loop. */
.shimmer-card{
  position:relative;
  isolation:isolate;
}
.shimmer-card::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:inherit;
  padding:1.5px;
  background:conic-gradient(
    from var(--shimmer-angle, 0deg),
    transparent 0deg,
    transparent 200deg,
    rgba(232,169,44,.0) 230deg,
    rgba(232,169,44,.7) 270deg,
    rgba(255,225,140,.95) 290deg,
    rgba(232,169,44,.7) 310deg,
    transparent 350deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
  z-index:1;
  animation:shimmerSpin 4s linear infinite paused;
}
.shimmer-card:hover::before,
.shimmer-card:focus-within::before{
  opacity:1;
  animation-play-state:running;
}
@keyframes shimmerSpin{
  to{ --shimmer-angle:360deg }
}
@property --shimmer-angle{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}
@media (prefers-reduced-motion: reduce){
  .shimmer-card::before{ animation:none }
}

/* TEXT REVEAL — words fade up + in as they scroll into view */
.reveal-word{
  display:inline-block;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.2,.8,.2,1),
             transform .55s cubic-bezier(.2,.8,.2,1);
  will-change:opacity, transform;
}
.reveal-word--in{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal-word{ opacity:1; transform:none; transition:none }
}