/* ==========================================================
   Harshit Landmark — Public site stylesheet
   ========================================================== */

:root{
  --primary: #0f1b3c;
  --primary-dark: #0a1330;
  --accent: #c9a24b;
  --accent-light: #e6c987;
  --text: #2b2d33;
  --text-light: #767676;
  --bg-soft: #f6f3ec;
  --border: #e7e2d6;
  --white: #ffffff;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 20px 50px rgba(15,27,60,.10);
  --shadow-lg: 0 30px 70px rgba(15,27,60,.24);
  --maxw: 1240px;
  --font-heading: 'Fraunces', 'Georgia', serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16.5px;
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:600;margin:0;line-height:1.12;color:var(--primary);letter-spacing:-.01em}
p{margin:0}
button{font-family:inherit;cursor:pointer}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------------- Icon sizing system ----------------
   Every icon is an inline <svg class="ic ic-{size}"> drawn by
   includes/icons.php — no icon font, no CDN, so icons can never fail to load.
   The SVG is 1em square, so this font-size scale is the single source of
   truth for icon size across the entire site (and the admin panel, which
   mirrors it) — icons are always crisp and consistently sized. */
.ic{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.125em}
.ic-2xs{font-size:12px}
.ic-xs{font-size:14px}
.ic-sm{font-size:16px}
.ic-md{font-size:18px}
.ic-lg{font-size:20px}
.ic-xl{font-size:24px}
.ic-2xl{font-size:36px}
.ic-3xl{font-size:48px}
.ic-4xl{font-size:64px}
.inline-icon{color:var(--accent);margin-right:5px}
.icon-emoji{line-height:1;display:inline-flex;align-items:center;justify-content:center}
.section{padding:90px 0}
.section--soft{background:var(--bg-soft)}
.section--dark{background:var(--primary);color:#dfe3ee}
.section--dark h2, .section--dark h3{color:#fff}

.eyebrow{
  display:inline-block;font-size:12.5px;letter-spacing:.14em;font-weight:700;
  color:var(--accent);text-transform:uppercase;margin-bottom:10px;
}
.section-head{max-width:680px;margin:0 auto 48px;text-align:center}
.section-head h2{font-size:clamp(28px,3.6vw,42px)}
.section-head p{margin-top:14px;color:var(--text-light);font-size:16px;line-height:1.7}
.section-head.left{margin:0 0 40px;text-align:left}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 30px;border-radius:60px;font-weight:700;font-size:14.5px;
  letter-spacing:.02em;border:2px solid transparent;transition:.25s ease;
}
.btn--accent{background:var(--accent);color:var(--primary)}
.btn--accent:hover{background:var(--accent-light);transform:translateY(-2px)}
.btn--outline{border-color:rgba(255,255,255,.5);color:#fff}
.btn--outline:hover{background:rgba(255,255,255,.12)}
.btn--dark{background:var(--primary);color:#fff}
.btn--dark:hover{background:var(--primary-dark);transform:translateY(-2px)}
.btn--block{width:100%}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* ---------------- Header ---------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:18px 0;transition:.3s ease;
}
.site-header.is-scrolled{
  padding:10px 0;background:rgba(15,27,60,.92);backdrop-filter:blur(8px);
  box-shadow:0 6px 24px rgba(0,0,0,.15);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--font-heading);font-weight:700;font-size:21px}
.brand img{height:44px;width:auto;display:block}
.brand span.name{white-space:nowrap}
.header-actions{display:flex;align-items:center;gap:14px}
.header-phone{color:#fff;font-size:14px;display:flex;align-items:center;gap:8px;opacity:.95}
.header-phone svg{flex:none}
.header-phone b{font-weight:700}
@media (max-width:640px){ .header-phone span.txt{display:none} }

/* ---------------- Hero ---------------- */
.hero{
  position:relative;color:#fff;padding:150px 0 90px;
  background:var(--primary);
  overflow:hidden;
  isolation:isolate;
}

/* Layered, animated, full-bleed hero background.
   .hero-bg-wrap clips everything; .hero-bg is the actual image layer that
   gets a slow "Ken Burns" zoom/pan loop plus a blur-to-sharp reveal on load;
   .hero-overlay sits above it for text contrast; content sits above that. */
.hero-bg-wrap{position:absolute;top:-130px;left:0;right:0;bottom:-130px;z-index:0;overflow:hidden;background:var(--primary)}
.hero-bg{
  position:absolute;inset:-4%;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  filter:blur(26px) saturate(1.05) brightness(.9);
  transform:scale(1.18);
  opacity:0;
  transition:filter 1.4s ease, opacity 1.1s ease;
  animation:heroKenBurns 26s ease-in-out infinite alternate;
  animation-play-state:paused;
  will-change:transform,filter;
}
.hero-bg.is-ready{opacity:1;
  /* Blur and darkness are set in the admin panel (Site Settings → Hero). */
  filter:blur(var(--hero-blur,0px)) saturate(1.05) brightness(calc(1 - var(--hero-dark,.72) * .45)) contrast(1.05);
  animation-play-state:running}
.hero-bg.no-image{
  background:
    radial-gradient(circle at 15% 20%, rgba(201,162,75,.35), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(201,162,75,.2), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(120deg,#101d42,#0a1330 60%);
  background-size:180% 180%, 180% 180%, 180% 180%, 100% 100%;
  opacity:1;filter:none;animation:heroGradientDrift 18s ease-in-out infinite alternate;
}
@keyframes heroKenBurns{
  0%   { transform:scale(1.1)  translate3d(0,0,0); }
  50%  { transform:scale(1.18) translate3d(-1.4%,-1%,0); }
  100% { transform:scale(1.1)  translate3d(1%,.6%,0); }
}
@keyframes heroGradientDrift{
  0%{background-position:0% 0%, 100% 0%, 50% 100%, 0 0}
  100%{background-position:20% 30%, 80% 20%, 40% 80%, 0 0}
}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  /* Two gentle layers, strength driven by the Darkness slider in the admin.
     These used to be three stacked layers whose alphas multiplied out to ~98%
     at the bottom of the banner, which wiped the photo out completely down
     there. Kept light through the middle so the picture stays visible, with
     the text remaining readable thanks to the text-shadows on the headings. */
  background:
    linear-gradient(180deg,
      rgba(6,11,28,calc(var(--hero-dark,.72) * .85)) 0%,
      rgba(6,11,28,calc(var(--hero-dark,.72) * .55)) 45%,
      rgba(6,11,28,calc(var(--hero-dark,.72) * .92)) 100%),
    linear-gradient(100deg,
      rgba(6,11,28,calc(var(--hero-dark,.72) * .5)) 0%,
      rgba(6,11,28,0) 58%,
      rgba(6,11,28,calc(var(--hero-dark,.72) * .2)) 100%);
}
.hero > .container{position:relative;z-index:2}
@media (prefers-reduced-motion: reduce){
  .hero-bg, .hero-bg.no-image{animation:none}
}

.hero-grid{display:grid;grid-template-columns:1.25fr .85fr;gap:56px;align-items:center}
@media (max-width:960px){ .hero-grid{grid-template-columns:1fr} }
.hero-eyebrow{color:var(--accent-light);letter-spacing:.18em;font-size:13px;font-weight:700;text-transform:uppercase;margin-bottom:16px;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.hero h1{font-size:clamp(36px,5.6vw,62px);color:#fff;font-weight:600;text-shadow:0 4px 30px rgba(0,0,0,.45)}
.hero h1 .accent{color:var(--accent-light)}
.hero .loc{font-size:clamp(17px,2vw,22px);margin-top:12px;color:#f1f2f8;font-weight:500;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.hero .sub{margin-top:18px;font-size:16.5px;color:#dbdee8;max-width:560px;line-height:1.75;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.hero .price-pill{
  display:inline-block;margin-top:26px;background:var(--accent);color:var(--primary);
  padding:12px 24px;border-radius:60px;font-weight:800;font-size:15px;letter-spacing:.02em;
}
.hero-facts{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero-fact{
  display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px);
  border-radius:14px;padding:12px 17px;min-width:150px;
}
.hero-fact .fact-ico{color:var(--accent-light)}
.hero-fact .k{font-size:11.5px;color:#c3c7db;text-transform:uppercase;letter-spacing:.07em}
.hero-fact .v{font-size:15px;font-weight:700;margin-top:3px;color:#fff}

.hero-card{
  background:#fff;color:var(--text);border-radius:var(--radius);padding:30px 28px;
  box-shadow:var(--shadow-lg);position:relative;
}
.hero-card:before{
  content:"✦";position:absolute;top:-16px;right:24px;background:var(--accent);
  color:var(--primary);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;
}
.hero-card h3{font-size:19px;text-align:center;margin-bottom:6px}
.hero-card .hero-card-sub{text-align:center;color:var(--text-light);font-size:13px;margin-bottom:20px}
.form-field{margin-bottom:14px}
.form-field label{display:block;font-size:12.5px;font-weight:600;color:#555;margin-bottom:6px}
.form-field input,.form-field textarea{
  width:100%;padding:13px 14px;border:1.5px solid var(--border);border-radius:10px;
  font-size:14.5px;font-family:inherit;background:#fbfaf7;transition:.2s;
}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--accent);background:#fff}
.form-note{font-size:11.5px;color:#999;margin-top:10px;text-align:center;line-height:1.5}
.form-msg{font-size:13px;border-radius:8px;padding:10px 12px;margin-bottom:12px;display:none}
.form-msg.show{display:block}
.form-msg.ok{background:#e9f9ee;color:#1e7a3a}
.form-msg.err{background:#fdecea;color:#b3261e}

/* ---------------- Amenities ---------------- */
.amenities-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:860px){ .amenities-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .amenities-grid{grid-template-columns:1fr} }
.amenity-card{
  position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);
  transition:.4s ease;aspect-ratio:4/5;background:var(--bg-soft);isolation:isolate;
}
.amenity-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.amenity-card>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.6s ease;z-index:0;
}
.amenity-card:hover>img{transform:scale(1.08)}
.amenity-icon-badge{
  position:absolute;top:16px;right:16px;z-index:2;width:40px;height:40px;border-radius:50%;
  background:rgba(15,22,45,.42);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.amenity-scrim{
  position:absolute;left:0;right:0;bottom:0;z-index:1;padding:60px 20px 20px;
  background:linear-gradient(180deg,rgba(8,13,32,0) 0%,rgba(8,13,32,.55) 45%,rgba(8,13,32,.92) 100%);
}
.amenity-scrim h4{font-size:17px;color:#fff;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.amenity-scrim p{font-size:13px;color:rgba(255,255,255,.86);margin-top:6px;line-height:1.6}
/* Placeholder cover (no admin photo uploaded yet): gradient + big centered icon */
.ph-tile{
  width:100%;height:100%;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.9);z-index:0;
}
.cover-grad-purple{background:linear-gradient(150deg,#3b2a6b,#6c4fc7 55%,#8a6ce0)}
.cover-grad-teal{background:linear-gradient(150deg,#0d3b47,#12707f 55%,#1fa5b8)}
.cover-grad-green{background:linear-gradient(150deg,#123421,#1f6b3f 55%,#3c9a5f)}
.cover-grad-navy{background:linear-gradient(150deg,#0c1738,var(--primary) 55%,#2b3f78)}
.cover-grad-amber{background:linear-gradient(150deg,#4a2e0a,#a06a16 55%,#d99a2b)}
.cover-grad-slate{background:linear-gradient(150deg,#232936,#4a5568 55%,#6b7688)}
.cover-grad-rose{background:linear-gradient(150deg,#4a1230,#8f2a55 55%,#c8497e)}

/* ---------------- Floor plans ---------------- */
.plans-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media (max-width:960px){ .plans-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .plans-grid{grid-template-columns:1fr} }
.plan-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  text-align:center;transition:.3s;
}
.plan-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px)}
.plan-thumb{
  height:190px;position:relative;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;overflow:hidden
}
.plan-thumb img{width:100%;height:100%;object-fit:cover;filter:blur(6px);transform:scale(1.1)}
.plan-thumb.unlocked img{filter:none;transform:none}
.plan-lock{
  position:absolute;inset:0;background:rgba(15,27,60,.45);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:#fff
}
.plan-lock .ico{
  width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;font-size:22px;
}

/* Zoom button — top LEFT of the floor-plan thumbnail.
   Hidden while the plan is locked (there is nothing to see through the blur)
   and revealed by the .unlocked class the moment the visitor unlocks it. */
.plan-zoom{
  position:absolute;top:12px;left:12px;z-index:3;
  width:40px;height:40px;display:none;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.55);border-radius:50%;
  background:rgba(15,27,60,.55);backdrop-filter:blur(6px);color:#fff;
  cursor:pointer;transition:transform .22s,background .22s,box-shadow .22s;
  padding:0;
}
.plan-thumb.unlocked .plan-zoom{display:flex}
.plan-zoom:hover{
  background:var(--accent);color:var(--primary);
  transform:scale(1.1);box-shadow:0 8px 20px rgba(0,0,0,.3);
}
.plan-zoom:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* On a touch screen there is no hover, so make it a little bigger to tap. */
@media (hover:none){
  .plan-zoom{width:44px;height:44px;background:rgba(15,27,60,.62)}
}
/* The thumbnail is clickable as a whole once unlocked. */
.plan-thumb.unlocked{cursor:zoom-in}

.plan-body{padding:18px 16px 22px}
.plan-body h4{font-size:16.5px}
.plan-body .area{color:var(--text-light);font-size:13px;margin-top:4px}
.plan-unlock-btn{
  margin-top:14px;font-size:12.5px;font-weight:700;color:var(--primary);background:var(--bg-soft);
  padding:9px 16px;border-radius:30px;border:1px solid var(--border);display:inline-flex;align-items:center;gap:6px
}
.plan-unlock-btn:hover{background:var(--accent);border-color:var(--accent)}

/* ---------------- Description + key details ---------------- */
.about-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:flex-start}
@media (max-width:900px){ .about-grid{grid-template-columns:1fr} }
.about-grid p{color:var(--text-light);line-height:1.9;font-size:15.5px;margin-bottom:16px;white-space:pre-line}
.kd-list{display:flex;flex-direction:column;gap:16px}
.kd-item{display:flex;gap:14px;padding:16px 18px;background:#fff;border:1px solid var(--border);border-radius:12px;transition:.25s}
.kd-item:hover{box-shadow:var(--shadow);border-color:transparent}
.kd-check{
  width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--primary);
  display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px;
}
.kd-item .label{font-weight:700;font-size:14px;color:var(--primary)}
.kd-item .value{font-size:13.5px;color:var(--text-light);margin-top:3px;line-height:1.6}

/* ---------------- Features / location advantages ---------------- */
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:960px){ .features-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .features-grid{grid-template-columns:1fr} }
.feature-card{
  background:linear-gradient(160deg,#fff, var(--bg-soft));border:1px solid var(--border);
  border-radius:var(--radius);padding:26px 22px;transition:.3s;
}
.feature-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.feature-card .ico{
  width:50px;height:50px;border-radius:50%;background:var(--primary);color:var(--accent-light);
  display:flex;align-items:center;justify-content:center;flex:none;margin-bottom:16px
}
.feature-card h4{font-size:16px;margin-bottom:8px}
.feature-card p{font-size:13.5px;color:var(--text-light);line-height:1.6}

/* ---------------- Gallery ---------------- */
.gallery-tabs{display:flex;gap:10px;justify-content:center;margin-bottom:32px;flex-wrap:wrap}
.gallery-tab{
  padding:10px 22px;border-radius:30px;border:1.5px solid var(--border);font-size:13.5px;font-weight:700;
  color:var(--text-light);background:#fff;
}
.gallery-tab.active{background:var(--primary);border-color:var(--primary);color:#fff}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:900px){ .gallery-grid{grid-template-columns:repeat(2,1fr)} }
.gallery-item{
  position:relative;border-radius:14px;overflow:hidden;cursor:pointer;aspect-ratio:4/3;background:var(--bg-soft)
}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:.4s}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-item .cap{
  position:absolute;left:0;right:0;bottom:0;padding:14px;font-size:12.5px;color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.65),transparent);opacity:0;transition:.3s
}
.gallery-item:hover .cap{opacity:1}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(6,10,26,.94);z-index:2000;display:none;align-items:center;justify-content:center;padding:30px}
.lightbox.open{display:flex}
.lightbox img{max-width:min(90vw,1000px);max-height:82vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox .close,.lightbox .nav{
  position:absolute;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px
}
.lightbox .close{top:24px;right:24px}
.lightbox .nav.prev{left:24px;top:50%;transform:translateY(-50%)}
.lightbox .nav.next{right:24px;top:50%;transform:translateY(-50%)}
.lightbox .close:hover,.lightbox .nav:hover{background:var(--accent);color:var(--primary)}

/* ---------------- Location ---------------- */
.loc-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px}
@media (max-width:900px){ .loc-grid{grid-template-columns:1fr} }
.loc-address{font-size:19px;color:var(--primary);font-weight:600;line-height:1.5;margin-bottom:20px}
.transport-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
@media (max-width:560px){ .transport-grid{grid-template-columns:repeat(2,1fr)} }
.transport-chip{
  background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 16px;
  display:flex;align-items:center;gap:12px;transition:.25s;
}
.transport-chip:hover{box-shadow:var(--shadow);border-color:transparent;transform:translateY(-2px)}
.transport-chip .t-ico{
  width:34px;height:34px;border-radius:50%;background:var(--bg-soft);color:var(--primary);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.transport-chip .lbl{font-size:13px;color:var(--text-light)}
.transport-chip .dist{font-weight:700;color:var(--primary);margin-top:2px}
.map-frame{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);height:100%;min-height:360px}
.map-frame iframe{width:100%;height:100%;min-height:360px;border:0}

/* ---------------- Developer / About ---------------- */
.dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
@media (max-width:900px){ .dev-grid{grid-template-columns:1fr} }
.video-thumb{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;background:linear-gradient(135deg,#1a2a56,#0a1330)}
.video-thumb img{width:100%;height:100%;object-fit:cover;opacity:.75}
.play-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;
  background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.4)
}
.play-btn svg{margin-left:4px}
.dev-stats{display:flex;gap:34px;margin-top:26px;flex-wrap:wrap}
.dev-stat b{font-size:30px;color:var(--primary);font-family:var(--font-heading);display:block}
.dev-stat span{font-size:13px;color:var(--text-light)}
.review-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px;margin-top:26px}
.review-card .stars{color:var(--accent);font-size:16px;letter-spacing:2px}
.review-card p{font-style:italic;color:var(--text);margin:10px 0;line-height:1.7}
.review-card .author{font-size:13px;font-weight:700;color:var(--primary)}

/* ---------------- Request info / contact ---------------- */
.contact-wrap{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:44px;box-shadow:var(--shadow)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){ .contact-grid{grid-template-columns:1fr} }
.contact-grid .full{grid-column:1/-1}

/* ---------------- CTA banner ---------------- */
.cta-banner{
  background:linear-gradient(120deg,var(--primary),#1b2c5c);color:#fff;border-radius:28px;
  padding:60px 40px;text-align:center;position:relative;overflow:hidden
}
.cta-banner:before{
  content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 0%,rgba(201,162,75,.25),transparent 60%);
}
.cta-banner h2{color:#fff;font-size:clamp(26px,3.4vw,38px);position:relative}
.cta-banner p{color:#c7cbdb;margin-top:12px;font-size:16px;position:relative}
.cta-banner .btn{margin-top:26px;position:relative}

/* ---------------- Footer ---------------- */
.site-footer{background:var(--primary-dark);color:#aeb4cc;padding:70px 0 26px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr} }
.footer-brand{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--font-heading);font-size:21px;font-weight:700;margin-bottom:14px}
.footer-brand img{height:40px}
.footer-grid p{font-size:13.5px;line-height:1.8;color:#9199b8}
.footer-col h5{color:#fff;font-size:14px;margin-bottom:16px;letter-spacing:.03em}
.footer-col ul li{margin-bottom:10px;font-size:13.5px}
.footer-col ul li a:hover{color:var(--accent-light)}
.footer-social{display:flex;gap:10px;margin-top:18px}
.footer-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;flex:none;color:#dfe3ee}
.footer-social a:hover{background:var(--accent);color:var(--primary)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:50px;padding-top:22px;text-align:center;font-size:12.5px;color:#7d84a3}

/* ---------------- Misc widgets ---------------- */
.whatsapp-float{
  position:fixed;bottom:26px;right:26px;z-index:900;width:58px;height:58px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.3);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 14px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.scrolltop{
  position:fixed;bottom:26px;left:26px;z-index:900;width:46px;height:46px;border-radius:50%;background:var(--primary);
  color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:.3s;border:none
}
.scrolltop.show{opacity:1;pointer-events:auto}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* Modal for floor plan unlock */
.modal-overlay{position:fixed;inset:0;background:rgba(6,10,26,.7);z-index:1900;display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal-box{background:#fff;border-radius:var(--radius);padding:34px;max-width:420px;width:100%;position:relative;box-shadow:var(--shadow-lg)}
.modal-box .modal-close{position:absolute;top:16px;right:16px;background:var(--bg-soft);width:32px;height:32px;border-radius:50%;border:none;font-size:15px}
.modal-box h3{font-size:19px;margin-bottom:6px}
.modal-box .modal-sub{font-size:13px;color:var(--text-light);margin-bottom:20px}

/* Sticky mobile CTA */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:850;background:#fff;box-shadow:0 -8px 24px rgba(0,0,0,.12);
  display:none;padding:12px 16px;gap:10px;
}
@media (max-width:720px){ .mobile-cta{display:flex} body{padding-bottom:70px} }
.mobile-cta a{flex:1;text-align:center;padding:12px;border-radius:10px;font-weight:700;font-size:13.5px}
.mobile-cta .call{background:var(--primary);color:#fff}
.mobile-cta .enquire{background:var(--accent);color:var(--primary)}

/* ==========================================================
   INTERACTIVE POLISH
   Layered on top of the base styles above. Everything here is
   progressive enhancement — with JS off or reduced-motion on, the
   page still looks and works correctly.
   ========================================================== */

/* ---------------- Scroll progress bar ---------------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1200;background:transparent;pointer-events:none}
.scroll-progress span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-light),#fff);
  box-shadow:0 0 12px rgba(201,162,75,.65);
  transition:width .12s linear;
}

/* ---------------- Hero extras ---------------- */
/* Slow-drifting aurora light, adds depth over the photo without hurting
   text contrast (it sits under the content, above the overlay). */
.hero-aurora{
  position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:
    radial-gradient(38% 46% at 18% 26%, rgba(201,162,75,.30), transparent 70%),
    radial-gradient(34% 40% at 82% 20%, rgba(120,160,255,.20), transparent 70%),
    radial-gradient(46% 44% at 60% 92%, rgba(201,162,75,.16), transparent 72%);
  background-size:160% 160%,160% 160%,160% 160%;
  animation:auroraDrift 24s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  0%{background-position:0% 0%,100% 0%,50% 100%}
  100%{background-position:26% 34%,74% 22%,38% 72%}
}
/* Very subtle film grain so large flat gradients never look banded. */
.hero-grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.22;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px, transparent .5px);
  background-size:3px 3px;
}
@media (prefers-reduced-motion: reduce){ .hero-aurora{animation:none} }

/* Gold shimmer sweep across the project name */
.hero h1 .accent{
  background:linear-gradient(100deg,var(--accent-light) 20%,#fff8e4 42%,var(--accent-light) 62%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:shimmer 7s ease-in-out infinite;
}
@keyframes shimmer{0%,100%{background-position:180% 0}50%{background-position:-40% 0}}
@media (prefers-reduced-motion: reduce){
  .hero h1 .accent{animation:none;-webkit-text-fill-color:var(--accent-light);color:var(--accent-light)}
}

/* Replace the old "✦" text glyph with a crisp CSS diamond — no font dependency */
.hero-card:before{
  content:"";width:30px;height:30px;border-radius:9px;transform:rotate(45deg);
  top:-14px;font-size:0;box-shadow:0 6px 18px rgba(201,162,75,.5);
}

.hero-fact{transition:transform .25s ease, background .25s ease, border-color .25s ease}
.hero-fact:hover{transform:translateY(-3px);background:rgba(255,255,255,.15);border-color:rgba(230,201,135,.5)}

/* Scroll-down indicator */
.hero-scroll{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;
  width:max-content;margin:56px auto 0;color:rgba(255,255,255,.75);transition:opacity .4s ease;
}
.hero-scroll .mouse{
  width:26px;height:42px;border:2px solid rgba(255,255,255,.55);border-radius:20px;
  display:flex;justify-content:center;padding-top:7px;
}
.hero-scroll .wheel{width:3px;height:8px;border-radius:3px;background:var(--accent-light);animation:wheelDrop 1.7s ease-in-out infinite}
.hero-scroll .lbl{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700}
.hero-scroll:hover{color:#fff}
@keyframes wheelDrop{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(15px);opacity:0}}
@media (prefers-reduced-motion: reduce){ .hero-scroll .wheel{animation:none} }
@media (max-width:960px){ .hero-scroll{display:none} }

/* ---------------- Buttons: ripple + loading spinner ---------------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn-ripple{
  position:absolute;border-radius:50%;background:rgba(255,255,255,.45);
  transform:scale(0);animation:ripple .6s ease-out;pointer-events:none;z-index:-1;
}
@keyframes ripple{to{transform:scale(2.2);opacity:0}}
.btn-spinner{
  width:15px;height:15px;border-radius:50%;flex:none;
  border:2px solid rgba(255,255,255,.45);border-top-color:currentColor;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------- Section headings: animated underline ---------------- */
.section-head h2{position:relative;padding-bottom:16px}
.section-head h2:after{
  content:"";position:absolute;left:50%;bottom:0;margin-left:-35px;
  transform:scaleX(0);transform-origin:center;
  width:70px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-light));
  transition:transform .7s cubic-bezier(.2,.7,.3,1) .15s;
}
.section-head.in h2:after{transform:scaleX(1)}
/* Left-aligned variant keeps its underline flush left */
.section-head.left h2:after{left:0;margin-left:0;transform-origin:left}

/* ---------------- Card tilt + cursor spotlight ---------------- */
.amenity-card, .plan-card, .feature-card{
  transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease, border-color .3s ease;
}
.amenity-card.is-tilting, .plan-card.is-tilting, .feature-card.is-tilting{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);
  transition:transform .12s ease-out, box-shadow .4s ease;
}
/* Soft light that follows the cursor across the card */
.plan-card, .feature-card{position:relative}
.amenity-card:after, .plan-card:after, .feature-card:after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.14), transparent 65%);
}
.amenity-card:after{z-index:3;border-radius:inherit}
.plan-card:after, .feature-card:after{border-radius:inherit;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(201,162,75,.18), transparent 65%)}
.amenity-card.is-tilting:after, .plan-card.is-tilting:after, .feature-card.is-tilting:after{opacity:1}

/* Amenity card: description slides up on hover, icon badge lifts */
.amenity-scrim{transition:padding .4s cubic-bezier(.2,.7,.3,1)}
.amenity-card:hover .amenity-scrim{padding-bottom:26px}
.amenity-scrim h4{transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.amenity-card:hover .amenity-scrim h4{transform:translateY(-2px)}
.amenity-icon-badge{transition:transform .4s cubic-bezier(.2,.7,.3,1), background .3s ease}
.amenity-card:hover .amenity-icon-badge{transform:translateY(-2px) rotate(-8deg) scale(1.08);background:rgba(201,162,75,.85)}
.amenity-card .ph-tile .ic{transition:transform .5s cubic-bezier(.2,.7,.3,1);opacity:.92}
.amenity-card:hover .ph-tile .ic{transform:scale(1.09) rotate(-4deg)}

/* Feature card icon pop */
.feature-card .ico{transition:transform .35s cubic-bezier(.2,.7,.3,1), background .35s ease, color .35s ease}
.feature-card:hover .ico{transform:translateY(-3px) scale(1.06);background:var(--accent);color:var(--primary)}

/* Transport chip icon */
.transport-chip .t-ico{transition:transform .3s ease, background .3s ease, color .3s ease}
.transport-chip:hover .t-ico{transform:scale(1.08);background:var(--accent);color:var(--primary)}

/* Key-detail checkmark */
.kd-check{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.kd-item:hover .kd-check{transform:scale(1.12) rotate(-6deg)}

/* ---------------- Gallery ---------------- */
.gallery-item .cap{opacity:1;transform:translateY(100%);transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.gallery-item:hover .cap{transform:none}
.gallery-item:after{
  content:"";position:absolute;inset:0;border:2px solid transparent;border-radius:inherit;
  transition:border-color .35s ease;pointer-events:none;
}
.gallery-item:hover:after{border-color:rgba(201,162,75,.75)}
.gallery-tab{transition:.25s ease}
.gallery-tab:hover{border-color:var(--accent);color:var(--primary)}

/* ---------------- Testimonial rotator ---------------- */
.review-rotator{margin-top:26px}
.review-stage{position:relative}
.review-rotator .review-card{
  margin-top:0;opacity:0;visibility:hidden;position:absolute;inset:0;
  transform:translateY(10px);transition:opacity .5s ease, transform .5s ease;
}
.review-rotator .review-card.is-active{opacity:1;visibility:visible;position:relative;transform:none}
.review-rotator .stars{display:flex;gap:3px;color:var(--accent)}
.review-dots{display:flex;gap:7px;margin-top:14px}
.review-dots button{
  width:8px;height:8px;padding:0;border:none;border-radius:50%;
  background:var(--border);cursor:pointer;transition:.3s ease;
}
.review-dots button.is-active{background:var(--accent);width:22px;border-radius:5px}

/* ---------------- Stats ---------------- */
.dev-stat{transition:transform .3s ease}
.dev-stat:hover{transform:translateY(-3px)}
.dev-stat b{
  background:linear-gradient(120deg,var(--primary),#33488a);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ---------------- Misc ---------------- */
.scrolltop, .whatsapp-float{transition:transform .25s ease, opacity .3s ease, background .3s ease}
.footer-social a{transition:transform .25s ease, background .25s ease, color .25s ease}
.footer-social a:hover{transform:translateY(-3px)}
.site-footer a{transition:color .2s ease}
.site-footer a:hover{color:var(--accent-light)}

/* Nicer text selection + focus rings (accessibility) */
::selection{background:var(--accent);color:var(--primary)}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;
}

/* Slim custom scrollbar (desktop) */
@media (min-width:900px){
  html{scrollbar-width:thin;scrollbar-color:var(--accent) var(--bg-soft)}
  ::-webkit-scrollbar{width:10px}
  ::-webkit-scrollbar-track{background:var(--bg-soft)}
  ::-webkit-scrollbar-thumb{background:var(--accent);border-radius:10px;border:2px solid var(--bg-soft)}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
}

/* ---------------- Mobile refinements ---------------- */
@media (max-width:720px){
  /* Hide the "Get Pricing" button in the mobile header — the sticky bottom
     bar already carries "Enquire Now" (same #pricing target), so the header
     stays clean and the logo gets the room it needs. */
  .site-header .header-actions .btn{display:none}
  .header-actions{gap:10px}
  .brand{font-size:18px}
  .brand img{height:36px}
  /* Phone icon stays as a tap-to-call shortcut in the header */
  .header-phone{width:40px;height:40px;justify-content:center;border-radius:50%;
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22)}
  /* Lift the floating buttons clear of the sticky bottom CTA bar */
  .whatsapp-float{bottom:84px;right:16px;width:52px;height:52px}
  .scrolltop{bottom:84px;left:16px;width:42px;height:42px}
  .section{padding:64px 0}
  .hero{padding:120px 0 70px}
  .amenity-card{aspect-ratio:4/3.4}
}
@media (max-width:420px){
  .brand{font-size:16.5px}
}

/* ==========================================================
   AMENITIES CAROUSEL
   3 cards per view on desktop, 2 on mobile. Built on CSS
   scroll-snap so touch swiping works natively on phones, with
   raised chevron buttons floating in front of the track.
   ========================================================== */
.amenities-carousel{position:relative;padding:0 4px}

.carousel-viewport{
  display:flex;
  gap:26px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  /* room for the cards' lift-on-hover shadow */
  padding:10px 4px 18px;
  margin:-10px -4px -18px;
  /* hide the native scrollbar — navigation is via the chevrons/swipe */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.carousel-viewport::-webkit-scrollbar{display:none}
.carousel-viewport:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:var(--radius)}

/* Mouse drag-to-swipe (desktop). Touch devices swipe natively, so the
   grab cursor is only shown where a mouse is actually in use. */
@media (hover:hover) and (pointer:fine){
  .amenities-carousel:not(.is-static) .carousel-viewport{cursor:grab}
  .amenities-carousel.is-dragging .carousel-viewport{cursor:grabbing}
}
/* While dragging, stop text/images being selected and suppress the hover
   tilt so the cards don't wobble under the pointer. */
.amenities-carousel.is-dragging .carousel-viewport{user-select:none;-webkit-user-select:none}
.amenities-carousel.is-dragging .amenity-card{transform:none !important;transition:none}
.amenities-carousel.is-dragging .amenity-card:after{opacity:0 !important}
.carousel-viewport img{-webkit-user-drag:none;user-select:none}

/* Desktop: 3 across (2 gaps of 26px) */
.carousel-slide{flex:0 0 calc((100% - 52px) / 3);scroll-snap-align:start;min-width:0}
.carousel-slide .amenity-card{height:100%}

/* ---- Raised chevron navigation ---- */
.carousel-nav{
  position:absolute;top:50%;z-index:6;
  width:54px;height:54px;border-radius:50%;border:none;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--primary);
  box-shadow:0 12px 30px rgba(15,27,60,.22), 0 2px 6px rgba(15,27,60,.12);
  transform:translateY(-50%);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), background .3s ease, color .3s ease,
             box-shadow .35s ease, opacity .3s ease, visibility .3s ease;
}
.carousel-nav.prev{left:-26px}
.carousel-nav.next{right:-26px}
.carousel-nav:hover{
  background:var(--accent);color:var(--primary);
  box-shadow:0 18px 40px rgba(201,162,75,.42), 0 3px 10px rgba(15,27,60,.16);
  transform:translateY(-50%) scale(1.09);
}
.carousel-nav:active{transform:translateY(-50%) scale(.96)}
/* the chevron itself nudges in the direction of travel */
.carousel-nav .ic{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.carousel-nav.prev:hover .ic{transform:translateX(-3px)}
.carousel-nav.next:hover .ic{transform:translateX(3px)}
/* soft halo that blooms outward on hover */
.carousel-nav:before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid var(--accent);opacity:0;transform:scale(.85);
  transition:transform .45s cubic-bezier(.2,.7,.3,1), opacity .45s ease;
}
.carousel-nav:hover:before{opacity:.55;transform:scale(1.32)}
/* hidden when there is nothing further to scroll to */
.carousel-nav.is-disabled{opacity:0;visibility:hidden;pointer-events:none}
/* too few cards to scroll at all — remove the controls entirely */
.amenities-carousel.is-static .carousel-nav,
.amenities-carousel.is-static .carousel-dots{display:none}

/* ---- Page dots ---- */
.carousel-dots{display:flex;justify-content:center;gap:8px;margin-top:26px}
.carousel-dots button{
  width:9px;height:9px;padding:0;border:none;border-radius:50%;
  background:var(--border);cursor:pointer;transition:.35s cubic-bezier(.2,.7,.3,1);
}
.carousel-dots button:hover{background:var(--accent-light)}
.carousel-dots button.is-active{background:var(--accent);width:26px;border-radius:5px}
.carousel-dots:empty{display:none}

/* ---- Tablet / mobile: 2 across ---- */
@media (max-width:900px){
  .carousel-viewport{gap:18px}
  .carousel-slide{flex:0 0 calc((100% - 18px) / 2)}
  .carousel-nav{width:46px;height:46px}
  .carousel-nav.prev{left:-8px}
  .carousel-nav.next{right:-8px}
}
@media (max-width:560px){
  .carousel-viewport{gap:14px}
  .carousel-slide{flex:0 0 calc((100% - 14px) / 2)}

  /* On a narrow screen a floating arrow would cover a quarter of a card, so
     the chevrons drop to a control row beneath the track, flanking the dots.
     Swiping still works, and the buttons keep their raised styling. */
  .carousel-dots{margin-top:24px;height:46px;align-items:center}
  .carousel-nav{top:auto;bottom:0;transform:none;width:46px;height:46px}
  .carousel-nav.prev{left:50%;margin-left:-112px}
  .carousel-nav.next{right:50%;margin-right:-112px}
  .carousel-nav:hover{transform:scale(1.06)}
  .carousel-nav:active{transform:scale(.95)}
  /* dim rather than hide, so the control row never looks lopsided */
  .carousel-nav.is-disabled{opacity:.32;visibility:visible;pointer-events:none}
  /* ...but if there's nothing to scroll at all, hide the controls entirely */
  .amenities-carousel.is-static .carousel-nav{display:none}

  /* Keep the card's title/description clear of the centred icon */
  .amenities-carousel .amenity-card{aspect-ratio:3/4.1}
  .amenities-carousel .ph-tile{padding-bottom:34%}
  .amenities-carousel .ph-tile .ic{font-size:40px}
  .amenities-carousel .amenity-icon-badge{width:32px;height:32px;top:10px;right:10px}
  .amenities-carousel .amenity-scrim{padding:40px 13px 14px}
  .amenities-carousel .amenity-scrim h4{font-size:14px;line-height:1.25}
  .amenities-carousel .amenity-scrim p{
    font-size:11.5px;margin-top:4px;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
}

@media (prefers-reduced-motion: reduce){
  .carousel-viewport{scroll-behavior:auto}
}

/* ---------------- Section order safety ----------------
   The navbar is fixed and transparent, which reads correctly over the dark
   hero. If the hero has been re-ordered away from the top or hidden entirely
   (admin → Page Layout), give the bar a solid background and push the page
   down, so the first block is never hidden underneath it. */
body.no-hero-top .site-header{
  background:rgba(15,27,60,.96);backdrop-filter:blur(8px);
  box-shadow:0 6px 24px rgba(0,0,0,.15);padding:12px 0;
}
body.no-hero-top #pageMain{padding-top:82px}

/* ---------------- Location: Book Site Visit CTA ---------------- */
.loc-cta{margin-top:26px;padding-top:24px;border-top:1px solid var(--border)}
/* Full-width button: it fills the whole column on every screen size, so it
   reads as the clear next step rather than a small link in the corner. */
.loc-cta .btn.loc-cta-btn{
  width:100%;justify-content:center;text-align:center;
  padding:18px 22px;font-size:15.5px;letter-spacing:.02em;border-radius:12px;
  box-shadow:0 12px 30px rgba(201,162,75,.34);
}
.loc-cta .btn.loc-cta-btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(201,162,75,.42)}
@media (max-width:560px){
  .loc-cta .btn.loc-cta-btn{padding:16px 18px;font-size:15px}
}
/* Date picker inside the booking modal */
.form-field input[type=date]{
  width:100%;padding:13px 14px;border:1.5px solid var(--border);border-radius:10px;
  font-size:14.5px;font-family:inherit;background:#fbfaf7;color:var(--text);
}
.form-field input[type=date]:focus{outline:none;border-color:var(--accent);background:#fff}

/* ==========================================================
   Lead form: phone with ISD code, and the budget range picker
   ========================================================== */

/* Country code sits flush against the number, reading as one control. */
.phone-row{display:flex;align-items:stretch;gap:0}
.phone-row .isd-select{
  flex:0 0 auto;width:auto;min-width:96px;max-width:44%;
  padding:13px 10px;border:1.5px solid var(--border);border-right:none;
  border-radius:10px 0 0 10px;background:#f3efe6;color:var(--text);
  font-size:14px;font-family:inherit;font-weight:600;cursor:pointer;
  appearance:none;background-image:none;transition:.2s;
}
.phone-row .isd-select:focus{outline:none;border-color:var(--accent);background:#efe8d8}
.phone-row input[type=tel]{
  flex:1 1 auto;min-width:0;border-radius:0 10px 10px 0;letter-spacing:.04em;
}
/* Both halves must highlight together, or the join looks broken on focus. */
.phone-row:focus-within .isd-select{border-color:var(--accent)}

.budget-field{margin-bottom:16px}
.budget-picker{
  display:flex;align-items:center;gap:10px;
  background:#fbfaf7;border:1.5px solid var(--border);border-radius:10px;padding:6px;
}
.bg-step{
  flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;
  border:none;border-radius:8px;background:var(--primary);color:#fff;
  cursor:pointer;transition:.18s;
}
.bg-step:hover:not(:disabled){background:var(--accent);color:var(--primary);transform:translateY(-1px)}
.bg-step:disabled{opacity:.32;cursor:not-allowed}
.bg-value{
  flex:1 1 auto;text-align:center;font-size:15px;font-weight:700;
  color:var(--primary);letter-spacing:.01em;
}
.bg-range{
  width:100%;margin:12px 0 4px;appearance:none;background:transparent;cursor:pointer;
}
.bg-range::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:#e6e0d2}
.bg-range::-moz-range-track{height:5px;border-radius:5px;background:#e6e0d2}
.bg-range::-webkit-slider-thumb{
  appearance:none;width:19px;height:19px;margin-top:-7px;border-radius:50%;
  background:var(--accent);border:3px solid #fff;box-shadow:0 2px 7px rgba(0,0,0,.28);
}
.bg-range::-moz-range-thumb{
  width:19px;height:19px;border-radius:50%;
  background:var(--accent);border:3px solid #fff;box-shadow:0 2px 7px rgba(0,0,0,.28);
}
.bg-range:focus{outline:none}
.bg-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(201,162,75,.3)}
.bg-ends{display:flex;justify-content:space-between;font-size:11.5px;color:#999;font-weight:600}

.budget-select,.form-field select.budget-select{
  width:100%;padding:13px 14px;border:1.5px solid var(--border);border-radius:10px;
  font-size:14.5px;font-family:inherit;background:#fbfaf7;color:var(--text);transition:.2s;
}
.budget-select:focus{outline:none;border-color:var(--accent);background:#fff}

/* On the dark CTA/contact panels the picker needs a light surface of its own. */
.blk-bg-dark .budget-picker,.blk-bg-dark .phone-row .isd-select{background:#fff}

/* ==========================================================
   Added blocks (admin → Page Layout → Add Section)
   ========================================================== */
.blk-bg-white{background:var(--white)}
.blk-bg-soft{background:var(--bg-soft)}
.blk-bg-dark{background:var(--primary);color:#dfe3ee}
.blk-bg-dark h2,.blk-bg-dark h4{color:#fff}
.blk-bg-dark .blk-text{color:#c9cee2}

/* Text */
.blk-text{
  max-width:760px;margin:0 auto;color:var(--text-light);
  font-size:16px;line-height:1.9;white-space:pre-line;
}
.blk-text--left{margin:0;text-align:left}
.blk-text--center{text-align:center}

/* Text + Image */
.blk-ti{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.blk-ti--flip .blk-ti-media{order:-1}
@media (max-width:900px){ .blk-ti{grid-template-columns:1fr;gap:32px} .blk-ti--flip .blk-ti-media{order:0} }
.blk-ti-title{font-size:clamp(26px,3.2vw,38px);margin-bottom:16px}
.blk-ti-media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;background:var(--bg-soft)}
.blk-ti-media img,.blk-ti-media .ph-tile{width:100%;height:100%;object-fit:cover}

/* Banner */
.blk-banner-wrap{padding-top:0}
.blk-banner{
  border-radius:var(--radius);padding:56px 44px;text-align:center;
  box-shadow:var(--shadow);
}
.blk-banner h2{font-size:clamp(26px,3.4vw,38px);margin-bottom:12px}
.blk-banner p{font-size:16px;line-height:1.7;margin-bottom:26px;opacity:.92}
.blk-banner--dark{background:linear-gradient(135deg,var(--primary),#1d2c5c);color:#fff}
.blk-banner--dark h2{color:#fff}
.blk-banner--gold{background:linear-gradient(135deg,var(--accent),var(--accent-light));color:var(--primary)}
.blk-banner--gold h2{color:var(--primary)}
.blk-banner--soft{background:var(--bg-soft);border:1px solid var(--border);box-shadow:none}
@media (max-width:640px){ .blk-banner{padding:40px 22px} }

/* Stats */
.blk-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:28px;text-align:center;max-width:960px;margin:0 auto;
}
.blk-stat b{
  display:block;font-family:var(--font-heading);font-size:clamp(30px,4vw,44px);
  color:var(--accent);line-height:1.1;
}
.blk-bg-white .blk-stat b,.blk-bg-soft .blk-stat b{color:var(--primary)}
.blk-stat span{display:block;margin-top:8px;font-size:13.5px;color:var(--text-light)}
.blk-bg-dark .blk-stat span{color:#aab2cc}

/* ---------------- Header navigation menu (optional) ---------------- */
.site-nav{display:flex;align-items:center;gap:26px;margin-left:auto;margin-right:26px}
.site-nav a{
  color:#e7eaf5;font-size:14px;font-weight:600;letter-spacing:.01em;position:relative;
  padding:6px 0;transition:color .2s ease;white-space:nowrap;
}
.site-nav a:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.site-nav a:hover{color:#fff}
.site-nav a:hover:after{transform:scaleX(1)}
.nav-toggle{
  display:none;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  color:#fff;width:40px;height:40px;border-radius:10px;align-items:center;justify-content:center;
}

@media (max-width:1024px){
  /* Collapse into a slide-down panel */
  .nav-toggle{display:flex}
  .site-nav{
    position:absolute;top:100%;left:0;right:0;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(12,20,46,.98);backdrop-filter:blur(10px);
    /* Collapsed: no padding either, so the closed menu takes up no space at all */
    padding:0 24px;
    box-shadow:0 18px 40px rgba(0,0,0,.35);
    max-height:0;overflow:hidden;opacity:0;pointer-events:none;
    transition:max-height .35s ease, opacity .25s ease, padding .3s ease;
  }
  .site-header.nav-open .site-nav{max-height:70vh;opacity:1;pointer-events:auto;padding:8px 24px 18px}
  .site-nav a{padding:13px 2px;border-bottom:1px solid rgba(255,255,255,.08);font-size:15px}
  .site-nav a:last-child{border-bottom:none}
  .site-nav a:after{display:none}
  .site-header .container{position:relative;flex-wrap:wrap}
}

/* ==========================================================
   Hero slider (admin → Site Settings → Hero, plus Hero Slides)
   ========================================================== */
.hero-slides{position:absolute;top:-130px;left:0;right:0;bottom:-130px;z-index:0;overflow:hidden;background:var(--primary)}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;will-change:opacity}
.hero-slide.is-active{opacity:1}
.hero-slide .hero-bg{
  position:absolute;inset:-4%;background-size:cover;background-position:center;
  animation:heroKenBurns 26s ease-in-out infinite alternate;
}
/* Sliding variant: slides move across instead of cross-fading */
.hero--slide .hero-slide{transform:translateX(100%);transition:transform .9s cubic-bezier(.2,.7,.3,1),opacity .6s ease}
.hero--slide .hero-slide.is-active{transform:translateX(0);opacity:1}
.hero--slide .hero-slide.is-leaving{transform:translateX(-100%);opacity:1}

/* Slide copy cross-fades in place */
.hero-copy{position:relative;min-height:330px}
.hero-text{
  position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);
}
.hero-text.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:none;position:relative}
.hero-slide-cta{margin-top:26px}
@media (max-width:960px){ .hero-copy{min-height:300px} }
@media (max-width:560px){ .hero-copy{min-height:340px} }

/* Arrows + dots */
.hero-slider-nav{display:flex;align-items:center;gap:14px;margin-top:34px;position:relative;z-index:3}
.hero-arrow{
  width:44px;height:44px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);
  transition:.25s ease;
}
.hero-arrow:hover{background:var(--accent);border-color:var(--accent);color:var(--primary);transform:translateY(-2px)}
.hero-dots{display:flex;gap:8px;align-items:center}
.hero-dots button{
  width:9px;height:9px;padding:0;border:none;border-radius:50%;
  background:rgba(255,255,255,.4);cursor:pointer;transition:.3s ease;
}
.hero-dots button.is-active{background:var(--accent);width:26px;border-radius:6px}
.hero-dots button:hover{background:rgba(255,255,255,.75)}
@media (prefers-reduced-motion: reduce){
  .hero-slide,.hero-text{transition:none}
  .hero-slide .hero-bg{animation:none}
}