/* single offplan area page style */
.opa-grid {
    --opa-accent: #296059;
    --opa-ink: #022A4C;
    --opa-muted: #76776F;
    --opa-line: rgba(17,18,15,.12);
    --opa-line-soft: rgba(17,18,15,.07);
    --opa-r: 14px;
    --opa-ease: cubic-bezier(.22,.61,.36,1);
    font-family: "Proxima Nova",system-ui,sans-serif;
    color: var(--opa-ink)
}
    	body{overflow-x:visible !important}
	.single-off-plan-area .elementor-element.elementor-element-fd1e9e6.elementor-hidden-mobile.elementor-widget.elementor-widget-button a {
    color: none !important;
}
.area-popup-card .leaflet-popup-content-wrapper{padding:0;border-radius:10px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.18)}.area-popup-card .leaflet-popup-content{margin:0;min-width:200px}.area-popup-card .leaflet-popup-tip{border-top-color:#fff}
/* ═══ TOKENS ═══ */
:root{--ink:#022A4C;--ink-soft:#000;--muted:#76776F;--canvas:#fff;--card:#FFFFFF;--line:rgba(17,18,15,.12);--line-soft:rgba(17,18,15,.07);--accent:#296059;--accent-deep:#296059;--accent-tint:#EAF1EE;--shadow:0 1px 2px rgba(17,18,15,.04),0 18px 40px -24px rgba(17,18,15,.22);--shadow-lg:0 30px 70px -30px rgba(17,18,15,.40);--r:14px;--maxw:1395px;--pad:20px;--font-display:"Proxima Nova";--font-body:"Proxima Nova";--ease:cubic-bezier(.22,.61,.36,1)}
.wco-page *,.wco-page *::before,.wco-page *::after{box-sizing:border-box;margin:0;padding:0}
.wco-page{font-family:var(--font-body);background:var(--canvas);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.55}
.wco-page a{color:inherit;text-decoration:none}.wco-page img{display:block;max-width:100%}
.wco-page button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;font-size:18px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);opacity:.7}
.sec-head{margin-bottom:40px}
.sec-title{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,4.4vw,45px);line-height:1.04;letter-spacing:-.01em;margin-top:16px;color:var(--ink)}
.sec-lede{max-width:75ch;color:#000;font-size:clamp(16px,1.4vw,18px);margin-top:18px}
.wco-page section{padding-top:80px;padding-bottom:80px}
.reveal{opacity:1;transform:none}.anim-ok .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}.anim-ok .reveal.in{opacity:1;transform:none}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 48px;font-size:14px;font-weight:700!important;letter-spacing:.12em;text-transform:uppercase;border:none;cursor:pointer;background:var(--accent);color:#fff!important;font-family:var(--font-body);transition:all .18s;border-radius:0}
.btn-primary:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:0 14px 30px -12px var(--accent)}
.dhs-icon{display:inline-block;vertical-align:middle;margin-right:3px;margin-top:-2px;flex-shrink:0}

/* ═══ HERO — exact project page style ═══ */
.hero{position:relative;width:100%;height:600px;background-color:#1a1a1a;background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;align-items:flex-end}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgb(0 0 0 / 85%) 0%, rgb(0 0 0 / 45%) 40%, rgb(0 0 0 / 15%) 100%);pointer-events:none}
.hero-inner{position:relative;z-index:1;width:100%;padding-bottom:64px}
.hero-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.hero-eyebrow{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:14px}
.hero-h1{font-family:var(--font-body);font-size:clamp(36px,5.5vw,64px);font-weight:800;letter-spacing:-.035em;line-height:1.04;color:#fff;margin-bottom:16px;max-width:700px}
.hero-sub{font-size:15px;color:rgba(255,255,255,.8);margin-bottom:36px;max-width:520px;line-height:1.6}
.hero-cta{display:flex;gap:20px;flex-wrap:wrap;margin-top:10px}
.hero-btn-solid{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 48px;font-size:14px;font-weight:700!important;letter-spacing:.12em;text-transform:uppercase;border:none;cursor:pointer;background:var(--accent);color:#fff!important;font-family:var(--font-body);transition:background .18s;border-radius:0}
.hero-btn-solid:hover{background:var(--accent-deep)}
.hero-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 48px;font-size:14px;font-weight:700!important;letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(255,255,255,.7);cursor:pointer;background:transparent;color:#fff!important;font-family:var(--font-body);transition:all .18s;border-radius:0}
.hero-btn-ghost:hover{background:rgba(255,255,255,.15)}
@media(max-width:768px){.hero{height:550px !important}.hero-inner{padding-bottom:32px}.hero-h1{font-size:clamp(26px,7vw,36px)}.hero-cta{flex-direction:column;gap:12px}.hero-btn-solid,.hero-btn-ghost{width:100%;justify-content:center;padding:14px 20px}}

/* ═══ STICKY BAR — exact project page style ═══ */
.sbar{top:0;z-index:200;background:var(--accent);color:#fff;height:54px;display:flex;align-items:center}
.sbar-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:20px;width:100%;justify-content:space-between}
.sbar-price{font-size:15px;font-weight:700;flex-shrink:0;color:#fff}
.sbar-meta{font-size:12px;color:rgba(255,255,255,.65);flex:1}
.sbar-cta{padding:8px 22px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.7);cursor:pointer;white-space:nowrap;flex-shrink:0;font-family:var(--font-body);transition:all .18s}
.sbar-cta:hover{background:#fff;color:var(--accent)}
@media(max-width:768px){.sbar-meta{display:none}}


/* ═══ OVERVIEW — exact project page style (prose + sticky rail) ═══ */
.overview{display:grid;grid-template-columns:1.55fr .9fr;gap:56px;align-items:start}
.about-body p{color:var(--ink-soft);font-size:clamp(16px,1.35vw,18px);margin-top:18px;max-width:62ch}
.about-text{color:var(--ink-soft);font-size:clamp(15px,1.35vw,18px);margin-top:18px;max-width:62ch;line-height:1.7}
.about-text p{margin-bottom:14px}
.rail-col{min-width:0;align-self:stretch}
.rail{position:sticky;top:calc(54px + 24px);display:flex;flex-direction:column;gap:18px}
.fact-card{background:#f2f0ec80;border:1px solid rgb(17 18 15/5%);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.fact-card h4{font-family:var(--font-display);font-size:18px;font-weight:700}
.facts{margin:20px 0;display:flex;flex-direction:column}
.facts .f{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--line-soft);font-size:18px}
.facts .f:first-child{border-top:none}
.facts .fk{color:var(--muted)}.facts .fv{font-weight:600;text-align:right}
.fact-card .btn-primary{width:100%;margin-top:4px}
.fact-card .btn-primary {
    width: 100%;
    margin-top: 4px;
    background: #296059 !important;
    font-size: 14px !important;
}
.rail-note{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:9px;margin-top:14px}
.rail-note .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-tint);flex-shrink:0}
.advisor{display:flex;align-items:center;gap:14px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft)}
.advisor .av{width:46px;height:46px;border-radius:50%;background:var(--accent-tint);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:18px;flex-shrink:0}
.advisor .an{font-weight:700;font-size:14px}.advisor .ar{font-size:12.5px;color:var(--muted)}
#area-map{width:100%;height:360px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:28px}
.area-map-pin-outer{background:transparent;border:none}
.area-map-pin{width:14px;height:14px;background:var(--accent);border-radius:50%;border:2.5px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.45)}
@media(max-width:920px){.overview{grid-template-columns:1fr;gap:32px}.rail{position:static}#area-map{height:300px}}

/* ═══ PROJECTS ═══ */
.proj-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px;align-items:center}
.proj-filter{flex:1;min-width:160px;padding:12px 36px 12px 14px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-family:inherit;color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2376776F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;-webkit-appearance:none;appearance:none;cursor:pointer;transition:border .25s}
.proj-filter:focus{outline:none;border-color:var(--accent)}
.proj-count{font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap}
.proj-reset{padding:10px 18px;border:1px solid var(--line);border-radius:10px;font-size:13px;font-weight:600;color:var(--muted);background:#fff;cursor:pointer;font-family:inherit;transition:all .2s}
.proj-reset:hover{border-color:#d00;color:#d00}
.sim-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sim{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:transform .4s var(--ease),box-shadow .4s var(--ease);display:block}
.sim:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.sim-img{aspect-ratio:4/2.5;overflow:hidden;position:relative}
.sim-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.sim:hover .sim-img img{transform:scale(1.07)}
.sim-img .badge{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.92);color:var(--ink);font-size:14px;font-weight:600;padding:6px 12px;border-radius:999px;z-index:1}
.sim-img .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;background:repeating-linear-gradient(45deg,var(--canvas),var(--canvas) 4px,#eae9e7 4px,#eae9e7 8px)}
.sim-body{padding:20px}
.sim-body .sd{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600}
.sim-body h4{font-family:var(--font-display);font-size:23px;font-weight:600;margin:5px 0 4px}
.sim-body .sa{color:#000;font-size:16px}
.sim-body .sf{display:flex;justify-content:space-between;align-items:center;margin-top:15px;padding-top:16px;border-top:1px solid var(--line-soft)}
.sim-body .sf .pr{font-weight:700}.sim-body .sf .arr{color:var(--accent);transition:transform .3s;font-size:18px}
.sim:hover .sf .arr{transform:translateX(5px)}
.load-more-wrap{text-align:center;margin-top:32px}
.load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 48px;
    font-size: 14px !important;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    border: 1.5px solid var(--ink) !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: all .3s;
    border-radius: 0;
}.load-more-btn:hover{background:var(--ink);color:#fff}
@media(max-width:820px){.sim-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}.proj-filters{flex-direction:column}.proj-filter{min-width:100%}}

/* ═══ DEVELOPERS — static logo grid (6 per row) ═══ */
.dev-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:24px;align-items:center}
.dev-logo{display:flex;align-items:center;justify-content:center;height:120px;opacity:.7;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.dev-logo:hover{opacity:1;transform:scale(1.06)}
.dev-logo img {
    width: 150px !important;
    height: 116px;
transition: transform .9s var(--ease);
}.dev-name{font-size:18px;font-weight:700;color:var(--ink);text-align:center;letter-spacing:-.01em}
@media(max-width:1024px){.dev-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:680px){.dev-grid{grid-template-columns:repeat(3,1fr);gap:16px}.dev-logo{height:90px}.dev-logo img{max-height:80px;max-width:130px}}
@media(max-width:420px){.dev-grid{grid-template-columns:repeat(2,1fr)}}

/* ═══ ENQUIRY ═══ */
.enq{background:#296059;color:#fff}
.enq-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(34px,5vw,80px);align-items:start}
.enq-left .eyebrow{color:#fff}.enq-left .eyebrow::before{background:#fff}
.enq-left h2{font-family:var(--font-display);font-size:clamp(34px,4.6vw,58px);font-weight:600;margin-top:16px;line-height:1.02;color:#F4F3EF}
.enq-left p{color:#fff;margin-top:18px;max-width:43ch;font-size:18px}
.enq-contact{margin-top:34px;display:flex;flex-direction:column;gap:18px}
.enq-contact .ec{display:flex;align-items:center;gap:14px;color:#F4F3EF;font-size:18px}
.enq-contact .ec a{color:#F4F3EF}
.enq-contact .ico{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:#8FC9BD;flex-shrink:0;font-size:18px}
.form{background:#054b43;border-radius:clamp(14px,1.6vw,20px);padding:clamp(26px,3vw,42px);box-shadow:var(--shadow-lg);color:#fff}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:#ffffff94;margin-bottom:8px}
.field input,.field select{width:100%;padding:13px 15px;border:1px solid rgb(255 255 255/20%);border-radius:10px;background:#ffffff1f;font-family:var(--font-body);font-size:16px;color:#fff;transition:border .25s,box-shadow .25s;-webkit-appearance:none}
.field input::placeholder{color:rgba(255,255,255,.5)}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.form button[type="submit"]{width:100%;margin-top:20px;padding:15px 48px;font-size:14px;font-weight:700!important;letter-spacing:.12em;text-transform:uppercase;border:none;cursor:pointer;background:#fff;color:#000!important;font-family:var(--font-body);transition:background .18s;border-radius:10px}
.form-fine{font-size:14px;color:#ffffffad;margin-top:14px;text-align:center}
.form-success{text-align:center;padding:30px 10px}
.form-success .ok{width:66px;height:66px;border-radius:50%;background:var(--accent-tint);color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:32px}
.form-success h3{font-family:var(--font-display);font-size:28px;font-weight:600;color:#fff}.form-success p{color:rgba(255,255,255,.8);margin-top:10px}
.form-err{background:#fff4f4;border:1px solid #f0a0a0;color:#7a1a1a;padding:14px 18px;border-radius:10px;font-size:14px;margin-bottom:16px}
@media(max-width:860px){.enq-grid{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}}

/* ═══ ENHANCED ANIMATIONS ═══ */
.anim-ok .reveal{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.anim-ok .reveal.in{opacity:1;transform:none}
.anim-ok .reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.anim-ok .reveal-left.in{opacity:1;transform:none}
.anim-ok .reveal-scale{opacity:0;transform:scale(.92);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.anim-ok .reveal-scale.in{opacity:1;transform:none}
.anim-ok .stagger>.reveal:nth-child(1){transition-delay:.05s}
.anim-ok .stagger>.reveal:nth-child(2){transition-delay:.12s}
.anim-ok .stagger>.reveal:nth-child(3){transition-delay:.19s}
.anim-ok .stagger>.reveal:nth-child(4){transition-delay:.26s}
@media(prefers-reduced-motion:reduce){.anim-ok .reveal,.anim-ok .reveal-left,.anim-ok .reveal-scale{opacity:1;transform:none;transition:none}}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px){
  :root{--pad:24px}
  .wco-page section{padding-top:60px!important;padding-bottom:60px!important}
  .overview{gap:36px}
  .sim-grid{gap:16px}
}
@media(max-width:820px){
  .overview{grid-template-columns:1fr;gap:32px}
  .rail{position:static}
  #area-map{height:300px}
  .sim-grid{grid-template-columns:repeat(2,1fr);max-width:100%}
  .enq-grid{grid-template-columns:1fr}
}

@media(max-width:767px){
	.hstat:nth-child(1), .hstat:nth-child(2) {
        border-bottom: 1px solid var(--line) !important;
    }
	.hstats-card {
        grid-template-columns: repeat(2, 1fr) !important;
    }
	section#top {
    padding-bottom: 0 !important;
}
	.sbar-cta {
		font-size: 11px !important; }

  :root{--pad:16px}

  .hero-h1{font-size:clamp(26px,7vw,36px);max-width:100%}
  .hero-sub{font-size:14px;margin-bottom:24px}
  .hero-cta{flex-direction:column;gap:12px}
  .hero-btn-solid,.hero-btn-ghost{width:100%;justify-content:center;padding:14px 20px}
  .hero-inner{padding-bottom:32px}
  .sbar{height:48px}
  .sbar-meta{display:none}
  .sec-title{font-size:clamp(24px,6vw,32px)}
  .sec-lede{font-size:15px}
  .sim-grid{grid-template-columns:1fr;max-width:100%}
  .proj-filters{flex-direction:column}
  .proj-filter{min-width:100%}
  .form-row{grid-template-columns:1fr}
  .enq-left h2{font-size:clamp(26px,6vw,36px)}
}
@media(max-width:480px){
  .hero{height:550px}
}