/* Miskan United Real Estate — site styles
   Layout: dark navy/teal brand bands framing calm light content areas; cards only where an item is a separate object. */
@font-face{font-family:"Montserrat Arabic";src:url("../fonts/Montserrat-Arabic-Light.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Montserrat Arabic";src:url("../fonts/Montserrat-Arabic-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Montserrat Arabic";src:url("../fonts/Montserrat-Arabic-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Montserrat Arabic";src:url("../fonts/Montserrat-Arabic-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Montserrat Arabic";src:url("../fonts/Montserrat-Arabic-Bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  --deep:#002F38;      /* brand navy core */
  --deep-2:#01404A;
  --teal:#007A89;      /* brand teal */
  --teal-2:#008BA0;
  --sea:#79B8C1;
  --mist:#DAEBEE;
  --ink:#0C2B31;
  --muted:#5D777D;
  --line:#DCE6E8;
  --bg:#F3F7F7;
  --card:#FFFFFF;
  --ok:#1E7F57; --ok-bg:#E3F3EC;
  --bad:#A8322B; --bad-bg:#F8E6E4;
  --warn:#9A6A12; --warn-bg:#FBF0DA;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(0,47,56,.06),0 8px 24px rgba(0,47,56,.07);
  --font:"Montserrat Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
  --brand-grad:linear-gradient(135deg,#007A89 0%,#002F38 34%,#002F38 66%,#008BA0 100%);
  --wrap:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:15px;line-height:1.75;color:var(--ink);background:var(--bg);font-weight:400}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.35;font-weight:600;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--teal-2);outline-offset:2px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block}
.muted{color:var(--muted)}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(0,47,56,.97);backdrop-filter:saturate(1.2) blur(8px);color:#fff;border-bottom:1px solid rgba(255,255,255,.06)}
.hdr .wrap{display:flex;align-items:center;gap:20px;height:72px}
.brand{display:flex;align-items:center;flex-shrink:0}
.logo{display:block;background:currentColor;-webkit-mask:url("../img/logo-full.svg") center/contain no-repeat;mask:url("../img/logo-full.svg") center/contain no-repeat}
.hdr .logo{width:118px;height:54px;color:#fff}
.nav{display:flex;align-items:center;gap:4px;margin-inline-start:12px}
.nav a,.nav .dd>button{padding:8px 12px;border-radius:8px;color:rgba(255,255,255,.82);font-size:14px;font-weight:500;background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:6px}
.nav a:hover,.nav .dd>button:hover,.nav a.on{color:#fff;background:rgba(255,255,255,.07)}
.dd{position:relative}
.dd-menu{position:absolute;top:calc(100% + 6px);inset-inline-start:0;min-width:200px;background:#fff;color:var(--ink);border-radius:12px;box-shadow:var(--shadow);padding:6px;display:none}
.dd.open .dd-menu{display:block}
.dd-menu a{display:block;color:var(--ink)!important;padding:9px 12px;border-radius:8px}
.dd-menu a:hover{background:var(--bg)!important}
.chev{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7;display:inline-block}
.hdr-end{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.lang-btn{background:none;border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:999px;padding:5px 14px;font-size:13px;cursor:pointer}
.lang-btn:hover{background:rgba(255,255,255,.08)}
.menu-btn{display:none;background:none;border:0;color:#fff;width:42px;height:42px;cursor:pointer;border-radius:10px}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:20px;height:2px;background:#fff;position:relative;margin:auto;border-radius:2px}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;inset-inline-start:0}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.drawer{position:fixed;inset:0;z-index:60;display:none}
.drawer.open{display:block}
.drawer .scrim{position:absolute;inset:0;background:rgba(0,20,24,.5)}
.drawer .panel{position:absolute;top:0;bottom:0;inset-inline-start:0;width:min(320px,86vw);background:var(--deep);color:#fff;padding:20px max(20px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:4px;overflow:auto}
.drawer .panel a{padding:12px 10px;border-radius:10px;color:rgba(255,255,255,.9)}
.drawer .panel a:hover{background:rgba(255,255,255,.07)}
.drawer .panel .sub{padding-inline-start:26px;font-size:14px;color:rgba(255,255,255,.7)}

/* ---------- Buttons & form ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;padding:11px 20px;font-weight:600;font-size:14px;cursor:pointer;transition:background .15s,box-shadow .15s,transform .05s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-p{background:var(--teal);color:#fff}
.btn-p:hover{background:#006a77}
.btn-d{background:var(--deep);color:#fff}
.btn-d:hover{background:var(--deep-2)}
.btn-l{background:#fff;color:var(--deep);border:1px solid var(--line)}
.btn-l:hover{border-color:var(--sea)}
.btn-g{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25)}
.btn-g:hover{background:rgba(255,255,255,.16)}
.btn-x{background:var(--bad-bg);color:var(--bad)}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:8px}
.btn-block{width:100%}
.lbl{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:6px}
.in,.sel,.ta{width:100%;border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 12px;font-size:14px;min-height:44px;transition:border-color .15s,box-shadow .15s}
.in:focus,.sel:focus,.ta:focus{outline:none;border-color:var(--teal-2);box-shadow:0 0 0 3px rgba(0,139,160,.14)}
.ta{min-height:110px;resize:vertical;line-height:1.7}
.sel{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(12px) 19px,calc(17px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-inline-end:12px;padding-inline-start:34px}
[dir=ltr] .sel{background-position:calc(100% - 17px) 19px,calc(100% - 12px) 19px;padding-inline-start:12px;padding-inline-end:34px}
.field{display:flex;flex-direction:column;min-width:0}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.phone-row{display:grid;grid-template-columns:96px 1fr;gap:8px;direction:ltr}
.phone-row .in{text-align:start}
.err{color:var(--bad);font-size:13px;margin-top:4px}
.chk{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--teal)}

/* ---------- Hero ---------- */
.band{background:var(--brand-grad);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.band::before{content:"";position:absolute;inset:0;background:url("../img/pattern.svg") center/cover;opacity:.18;z-index:-1;mix-blend-mode:screen}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(1200px 400px at 85% -10%,rgba(121,184,193,.18),transparent 60%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding-block:56px 110px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--mist);letter-spacing:.02em;margin-bottom:14px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--sea);border-radius:2px}
.hero h1{font-size:clamp(26px,3.4vw,38px);font-weight:700;margin-bottom:14px}
.hero p.lead{color:rgba(255,255,255,.78);font-size:16px;max-width:52ch}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.hero-stats{display:flex;gap:28px;margin-top:34px;flex-wrap:wrap}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats b{font-size:22px;font-weight:700}
.hero-stats span{font-size:12.5px;color:rgba(255,255,255,.65)}
.slider{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;max-width:100%;background:rgba(255,255,255,.06);box-shadow:0 30px 60px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.12)}
.slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}
.slider img.on{opacity:1}
.dots{position:absolute;bottom:12px;inset-inline:0;display:flex;justify-content:center;gap:6px}
.dots button{width:8px;height:8px;border-radius:99px;border:0;background:rgba(255,255,255,.45);cursor:pointer;padding:0;transition:width .2s}
.dots button.on{width:22px;background:#fff}
.slider .ph{position:absolute;inset:0;display:grid;place-items:center}
.slider .ph .logo{width:55%;height:40%;color:rgba(255,255,255,.18)}

/* search panel */
.search{position:relative;margin-top:-62px;z-index:5}
.search-card{background:#fff;border-radius:18px;box-shadow:0 18px 50px rgba(0,47,56,.14);padding:18px;display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr)) auto;gap:12px;align-items:end}
.seg{display:inline-flex;background:var(--bg);border-radius:12px;padding:4px;gap:4px}
.seg button{border:0;background:none;padding:9px 16px;border-radius:9px;cursor:pointer;font-weight:600;color:var(--muted);font-size:14px}
.seg button.on{background:var(--deep);color:#fff}

/* ---------- Sections ---------- */
.sec{padding-block:64px}
.sec-sm{padding-block:40px}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.sec-h h2{font-size:24px;font-weight:700;color:var(--deep)}
.sec-h p{color:var(--muted);margin-top:4px}
.kicker{font-size:12.5px;color:var(--teal);font-weight:600;letter-spacing:.03em;margin-bottom:4px;display:block}
.link-more{color:var(--teal);font-weight:600;font-size:14px;display:inline-flex;gap:6px;align-items:center}
.link-more:hover{color:var(--deep)}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 16px;cursor:pointer;font-size:14px;font-weight:500;color:var(--muted)}
.tabs button.on{background:var(--deep);border-color:var(--deep);color:#fff}

/* property cards */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.card{background:var(--card);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s,border-color .2s;min-width:0}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:#cfe0e3}
.card .media{position:relative;aspect-ratio:4/5;background:var(--mist);overflow:hidden}
.card .media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .media img{transform:scale(1.03)}
.card .media .noimg{position:absolute;inset:0;background:var(--brand-grad);display:grid;place-items:center}
.card .media .noimg .logo{width:46%;height:34%;color:rgba(255,255,255,.22)}
.badges{position:absolute;top:10px;inset-inline:10px;display:flex;justify-content:space-between;gap:6px;pointer-events:none}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:rgba(0,47,56,.82);color:#fff;backdrop-filter:blur(4px)}
.pill.light{background:rgba(255,255,255,.92);color:var(--deep)}
.pill.teal{background:var(--teal);color:#fff}
.pill.gold{background:#fff;color:#8a5a00;border:1px solid #f0d9a8}
.sold-ribbon{position:absolute;inset:0;background:rgba(0,30,35,.55);display:grid;place-items:center}
.sold-ribbon span{border:2px solid #fff;color:#fff;padding:6px 18px;border-radius:8px;font-weight:700;transform:rotate(-8deg);letter-spacing:.04em}
.card .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{font-size:15.5px;font-weight:600;color:var(--deep);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.card .sub{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.specs{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;color:var(--muted);margin-top:2px}
.specs span{display:inline-flex;align-items:center;gap:4px}
.specs span+span::before{content:"|";color:var(--line);margin-inline-end:6px}
.price{margin-top:auto;padding-top:10px;border-top:1px dashed var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.price b{font-size:17px;color:var(--teal);font-weight:700}
.price small{font-size:12px;color:var(--muted)}
.empty{background:#fff;border:1px dashed var(--line);border-radius:var(--radius);padding:44px 20px;text-align:center;color:var(--muted)}
.empty .logo{width:90px;height:42px;color:var(--mist);margin:0 auto 12px}

/* skeleton */
.sk{background:linear-gradient(90deg,#e8eff0 25%,#f3f7f7 50%,#e8eff0 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:8px}
@keyframes sk{to{background-position:-200% 0}}
.card.sk-card .media{background:none}
@media (prefers-reduced-motion:reduce){.sk{animation:none}*{transition:none!important;scroll-behavior:auto!important}}

/* services */
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.svc{position:relative;border-radius:18px;overflow:hidden;min-height:260px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;background:var(--brand-grad);isolation:isolate}
.svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.9}
.svc::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(0,32,38,.92) 10%,rgba(0,47,56,.35) 70%,rgba(0,47,56,.15))}
.svc h3{font-size:21px;margin-bottom:6px}
.svc p{color:rgba(255,255,255,.8);font-size:14px;max-width:46ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.svc .btn{margin-top:14px;align-self:flex-start}

/* CTA band */
.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:44px;flex-wrap:wrap}
.cta h2{font-size:22px}
.cta p{color:rgba(255,255,255,.75);margin-top:6px;max-width:60ch}

/* quote */
.quote{max-width:820px;margin-inline:auto;text-align:center;color:var(--deep);font-size:18px;line-height:2;font-weight:500}
.quote::before{content:"";display:block;width:44px;height:3px;background:var(--teal);margin:0 auto 18px;border-radius:3px}

/* newsletter */
.nl{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px}
.nl form{display:flex;gap:8px}
.nl h3{font-size:19px;color:var(--deep)}

/* ---------- Page header band ---------- */
.ph-band .wrap{padding-block:38px 44px}
.crumbs{font-size:13px;color:rgba(255,255,255,.65);display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.crumbs a:hover{color:#fff}
.ph-band h1{font-size:clamp(22px,2.6vw,30px);font-weight:700}
.ph-band p{color:rgba(255,255,255,.75);margin-top:6px;max-width:64ch}

/* listing layout */
.filters{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:12px;align-items:end;margin-top:-30px;position:relative;z-index:3;box-shadow:var(--shadow)}
.results-bar{display:flex;justify-content:space-between;align-items:center;margin:26px 0 16px;gap:12px;flex-wrap:wrap}
.results-bar b{color:var(--deep)}
.more{display:flex;justify-content:center;margin-top:28px}

/* details */
.det{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:26px;align-items:start}
.gallery .main{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:1/1;max-height:78vh;width:100%;background:var(--deep);cursor:zoom-in}
.gallery .main img{width:100%;height:100%;object-fit:contain}
.thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px}
.thumbs button{flex:0 0 86px;height:64px;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;background:var(--mist)}
.thumbs button.on{border-color:var(--teal)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.panel+.panel{margin-top:16px}
.det h1{font-size:22px;color:var(--deep);font-weight:700}
.det .subt{color:var(--muted);margin-top:4px}
.det .bigprice{font-size:26px;color:var(--teal);font-weight:700;margin:14px 0 4px}
.spec-list{display:grid;gap:0;margin-top:6px}
.spec-list div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.spec-list div:last-child{border-bottom:0}
.spec-list span{color:var(--muted)}
.spec-list b{font-weight:600;color:var(--ink);text-align:end}
.desc{white-space:pre-wrap;line-height:2;color:var(--ink)}
.contact-actions{display:grid;gap:10px;margin-top:14px}
.btn-wa{background:#128C4A;color:#fff}
.btn-wa:hover{background:#0f7a40}
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(0,15,18,.92);display:none;align-items:center;justify-content:center;padding:20px}
.lightbox.open{display:flex}
.lightbox img{max-height:86vh;max-width:92vw;border-radius:12px}
.lightbox button{position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;width:44px;height:44px;border-radius:99px;cursor:pointer;font-size:22px}
.lightbox .x{top:calc(16px + env(safe-area-inset-top,0px));inset-inline-end:16px}
.lightbox .pv{inset-inline-start:16px;top:50%}.lightbox .nx{inset-inline-end:16px;top:50%}

/* content pages */
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.split+.split{margin-top:56px}
.split.rev .split-media{order:-1}
.split-media{border-radius:20px;overflow:hidden;aspect-ratio:4/3;background:var(--brand-grad);position:relative}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-media .logo{position:absolute;inset:30%;color:rgba(255,255,255,.2)}
.prose{white-space:pre-line;line-height:2.05;color:#24454b;max-width:62ch}
.prose h2{font-size:22px;color:var(--deep);margin-bottom:12px;white-space:normal}
.vmv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.vmv .panel h3{font-size:17px;color:var(--deep);margin-bottom:10px;display:flex;align-items:center;gap:10px}
.vmv .panel h3 i{width:34px;height:34px;border-radius:10px;background:var(--mist);display:grid;place-items:center;font-style:normal;color:var(--teal);font-weight:700}
.vmv .panel p{color:#3b5a60;line-height:1.95;font-size:14.5px}

/* forms pages */
.form-wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:start}
.form-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;display:grid;gap:14px}
.form-card h2{font-size:19px;color:var(--deep)}
.aside-card{background:var(--deep);color:#fff;border-radius:18px;padding:26px;position:relative;overflow:hidden;isolation:isolate}
.aside-card::before{content:"";position:absolute;inset:0;background:url("../img/pattern.svg") center/cover;opacity:.12;z-index:-1}
.aside-card h3{font-size:18px;margin-bottom:10px}
.aside-card p{color:rgba(255,255,255,.75);font-size:14px}
.aside-card ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:12px}
.aside-card li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:rgba(255,255,255,.88)}
.aside-card li::before{content:"";flex:0 0 8px;height:8px;border-radius:99px;background:var(--sea);margin-top:9px}
.contact-tiles{display:grid;gap:10px;margin-top:16px}
.tile{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.tile small{display:block;color:rgba(255,255,255,.6);font-size:12px}
.tile .ic{width:36px;height:36px;border-radius:10px;background:rgba(121,184,193,.2);display:grid;place-items:center;flex-shrink:0}
.tile svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.8}

/* ---------- Footer ---------- */
.ftr{background:#001F25;color:rgba(255,255,255,.75);position:relative;overflow:hidden;isolation:isolate;margin-top:40px}
.ftr::before{content:"";position:absolute;inset:0;background:url("../img/pattern.svg") center/cover;opacity:.1;z-index:-1}
.ftr .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:30px;padding-block:52px 30px}
.ftr .logo{width:150px;height:70px;color:#fff;margin-bottom:12px}
.ftr h4{color:#fff;font-size:15px;margin-bottom:14px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14px}
.ftr a:hover{color:#fff}
.ftr .bottom{border-top:1px solid rgba(255,255,255,.08)}
.ftr .bottom .wrap{display:flex;justify-content:space-between;gap:12px;padding-block:16px;font-size:13px;grid-template-columns:none;flex-wrap:wrap}
.social{display:flex;gap:8px;margin-top:14px}
.social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center}
.social a:hover{background:rgba(255,255,255,.16)}
.social svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8}
.wa-float{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom,0px));inset-inline-end:max(18px,env(safe-area-inset-right,0px));z-index:40;width:54px;height:54px;border-radius:99px;background:#128C4A;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.2)}
.wa-float svg{width:28px;height:28px;fill:#fff}

/* ---------- Toast / modal ---------- */
.toasts{position:fixed;top:calc(84px + env(safe-area-inset-top,0px));inset-inline:0;z-index:90;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding-inline:16px}
.toast{pointer-events:auto;background:var(--deep);color:#fff;padding:11px 18px;border-radius:12px;box-shadow:var(--shadow);font-size:14px;max-width:520px;animation:tin .25s ease}
.toast.ok{background:var(--ok)}.toast.bad{background:var(--bad)}
@keyframes tin{from{opacity:0;transform:translateY(-6px)}}
.modal{position:fixed;inset:0;z-index:85;background:rgba(0,20,24,.55);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto}
.modal .box{background:#fff;border-radius:18px;width:100%;max-width:760px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.modal .box.sm{max-width:440px}
.modal .mh{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px}
.modal .mh h3{font-size:18px;color:var(--deep)}
.xbtn{background:var(--bg);border:0;width:36px;height:36px;border-radius:10px;cursor:pointer;font-size:18px;color:var(--muted)}
.loader{display:grid;place-items:center;padding:80px 0}
.spin{width:34px;height:34px;border-radius:99px;border:3px solid var(--mist);border-top-color:var(--teal);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Auth ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth-art{position:relative;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:40px}
.auth-art .logo{width:150px;height:70px;color:#fff}
.auth-art h2{font-size:26px;max-width:18ch}
.auth-art p{color:rgba(255,255,255,.72);margin-top:10px;max-width:40ch}
.auth-form{display:flex;align-items:center;justify-content:center;padding:40px max(16px,env(safe-area-inset-left,0px))}
.auth-card{width:100%;max-width:420px;display:grid;gap:16px}
.auth-card h1{font-size:24px;color:var(--deep)}
.auth-card .alt{font-size:14px;color:var(--muted);text-align:center}
.auth-card .alt a{color:var(--teal);font-weight:600}
.otp{display:flex;gap:8px;direction:ltr;justify-content:center}
.otp input{width:48px;height:56px;text-align:center;font-size:22px;border:1px solid var(--line);border-radius:12px}
.otp input:focus{outline:none;border-color:var(--teal-2);box-shadow:0 0 0 3px rgba(0,139,160,.14)}
.back-link{font-size:14px;color:var(--muted);display:inline-flex;gap:6px}

/* ---------- Account & Admin ---------- */
.acc{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px;align-items:start}
.side{background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;position:sticky;top:90px}
.side .who{display:flex;align-items:center;gap:10px;padding:10px 10px 14px;border-bottom:1px solid var(--line);margin-bottom:8px}
.avatar{width:44px;height:44px;border-radius:12px;background:var(--mist);display:grid;place-items:center;color:var(--teal);font-weight:700;overflow:hidden;flex-shrink:0}
.avatar img{width:100%;height:100%;object-fit:cover}
.side a,.side button.navi{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--ink);font-size:14px;font-weight:500;width:100%;background:none;border:0;cursor:pointer;text-align:start}
.side a:hover,.side button.navi:hover{background:var(--bg)}
.side a.on{background:var(--deep);color:#fff}
.side .grp{font-size:11.5px;color:var(--muted);padding:12px 12px 4px;letter-spacing:.04em}
.box-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.box-h h2{font-size:20px;color:var(--deep)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}
.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
.stat span{color:var(--muted);font-size:13px}
.stat b{display:block;font-size:26px;color:var(--deep);font-variant-numeric:tabular-nums}
.tbl-wrap{background:#fff;border:1px solid var(--line);border-radius:16px;overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
.tbl th{text-align:start;font-weight:600;color:var(--muted);font-size:12.5px;padding:12px 14px;background:#F8FBFB;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .thumb{width:56px;height:42px;border-radius:8px;object-fit:cover;background:var(--mist)}
.tbl .acts{display:flex;gap:6px;flex-wrap:wrap}
.tag{display:inline-block;font-size:12px;font-weight:600;padding:2px 10px;border-radius:99px;background:var(--bg);color:var(--muted);white-space:nowrap}
.tag.ok{background:var(--ok-bg);color:var(--ok)}.tag.bad{background:var(--bad-bg);color:var(--bad)}.tag.warn{background:var(--warn-bg);color:var(--warn)}.tag.teal{background:var(--mist);color:var(--teal)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:14px}
.toolbar .field{min-width:150px;flex:1}
.pager{display:flex;gap:6px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.pager button{min-width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer}
.pager button.on{background:var(--deep);color:#fff;border-color:var(--deep)}
.imgs-edit{display:flex;gap:10px;flex-wrap:wrap}
.imgs-edit .it{position:relative;width:110px;height:82px;border-radius:10px;overflow:hidden;background:var(--mist)}
.imgs-edit .it img{width:100%;height:100%;object-fit:cover}
.imgs-edit .it button{position:absolute;top:4px;inset-inline-end:4px;width:24px;height:24px;border-radius:99px;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;line-height:1}
.imgs-edit label.add{width:110px;height:82px;border-radius:10px;border:1.5px dashed var(--sea);display:grid;place-items:center;color:var(--teal);cursor:pointer;font-size:13px;text-align:center}
.plan{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:8px}
.plan h3{color:var(--deep);font-size:17px}
.plan .pp{font-size:24px;font-weight:700;color:var(--teal)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.note{background:var(--mist);color:var(--deep);border-radius:12px;padding:12px 14px;font-size:14px}
.result-page{max-width:520px;margin:60px auto;text-align:center}
.result-page .ic{width:76px;height:76px;border-radius:99px;margin:0 auto 18px;display:grid;place-items:center;font-size:34px;color:#fff}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .search-card{grid-template-columns:repeat(3,minmax(0,1fr))}
  .search-card .seg{grid-column:1/-1;justify-self:start}
  .ftr .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  .nav,.hdr-end .desk{display:none}
  .menu-btn{display:block}
  .hero .wrap{grid-template-columns:1fr;padding-block:36px 96px}
  .hero .slider{order:-1}
  .det,.form-wrap,.split,.acc{grid-template-columns:1fr}
  .split.rev .split-media{order:0}
  .side{position:static}
  .filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vmv,.plans{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .auth{grid-template-columns:1fr}
  .auth-art{min-height:200px;padding:28px}
  .auth-art .art-copy{display:none}
  .nl{grid-template-columns:1fr}
}
@media (max-width:720px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .svc-grid,.grid2,.grid3{grid-template-columns:1fr}
  .search-card{grid-template-columns:1fr 1fr}
  .search-card .btn{grid-column:1/-1}
  .sec{padding-block:44px}
  .card .body{padding:12px}
  .card h3{font-size:14px}
  .price b{font-size:15px}
}
@media (max-width:480px){
  .cards{grid-template-columns:1fr}
  .filters,.search-card{grid-template-columns:1fr}
  .ftr .wrap{grid-template-columns:1fr}
  .nl form{flex-direction:column}
  .hdr .logo{width:100px}
}
.field .seg{align-self:flex-start}

/* =====================================================================
   Corporate layer (reference: wafra.com.kw) — white header, full-bleed
   hero, thin headings, navy bands with divider columns, icon band.
   ===================================================================== */
:root{--navy:#002F38;--navy-2:#073F49;--accent:#79B8C1;--grey:#EEF2F3;--radius:4px;--radius-sm:4px}
body{font-size:15.5px;background:#fff}
.btn{border-radius:3px;font-weight:600;letter-spacing:.01em}
.btn-sm{border-radius:3px}
.btn-o{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.85);padding:9px 18px;font-weight:500}
.btn-o:hover{background:#fff;color:var(--navy)}
.btn-od{background:transparent;color:var(--navy);border:1px solid var(--navy);font-weight:500}
.btn-od:hover{background:var(--navy);color:#fff}
.in,.sel,.ta{border-radius:3px}

/* header */
.hdr{background:#fff;color:var(--navy);border-bottom:1px solid var(--line);backdrop-filter:none;transition:background .3s,border-color .3s,box-shadow .3s}
.hdr .wrap{height:88px}
.hdr .logo{color:var(--navy);width:132px;height:60px}
.nav{margin-inline-start:28px;gap:2px}
.nav a,.nav .dd>button{color:var(--navy);font-size:13.5px;font-weight:600;border-radius:0;padding:8px 11px;position:relative}
.nav a:hover,.nav .dd>button:hover,.nav a.on,.nav .dd>button.on{background:none;color:var(--teal)}
.nav a.on::after,.nav .dd>button.on::after{content:"";position:absolute;inset-inline:11px;bottom:0;height:2px;background:var(--teal)}
.dd-menu{border-radius:2px;border-top:2px solid var(--teal)}
.lang-btn{border:0;color:var(--navy);font-weight:600;padding:6px 8px}
.lang-btn:hover{background:none;color:var(--teal)}
.hdr .btn-g{color:var(--navy);border-color:var(--navy);background:transparent}
.hdr .btn-g:hover{background:var(--navy);color:#fff}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{background:var(--navy)}
.hdr.over{position:fixed;top:0;inset-inline:0;background:transparent;border-color:transparent;color:#fff}
.hdr.over .logo{color:#fff}
.hdr.over .nav a,.hdr.over .nav .dd>button,.hdr.over .lang-btn{color:#fff}
.hdr.over .nav a.on::after{background:#fff}
.hdr.over .btn-g{color:#fff;border-color:rgba(255,255,255,.8)}
.hdr.over .menu-btn span,.hdr.over .menu-btn span::before,.hdr.over .menu-btn span::after{background:#fff}
.hdr.over.solid{background:#fff;border-color:var(--line);box-shadow:0 2px 14px rgba(0,47,56,.08);color:var(--navy)}
.hdr.over.solid .logo{color:var(--navy)}
.hdr.over.solid .nav a,.hdr.over.solid .nav .dd>button,.hdr.over.solid .lang-btn{color:var(--navy)}
.hdr.over.solid .btn-g{color:var(--navy);border-color:var(--navy)}
.hdr.over.solid .menu-btn span,.hdr.over.solid .menu-btn span::before,.hdr.over.solid .menu-btn span::after{background:var(--navy)}

/* hero */
.w-hero{position:relative;height:clamp(520px,88vh,800px);overflow:hidden;color:#fff;background:var(--navy);display:flex;align-items:flex-end}
.w-slides,.w-slide{position:absolute;inset:0}
.w-slide{background:center/cover no-repeat;opacity:0;transition:opacity 1.2s ease;transform:scale(1.03)}
.w-slide.on{opacity:1;animation:kb 12s ease-out forwards}
@keyframes kb{to{transform:scale(1.0)}}
.w-hero-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,24,29,.78) 0%,rgba(0,24,29,.25) 45%,rgba(0,24,29,.05) 65%,rgba(0,24,29,.45) 100%)}
.w-hero-copy{position:relative;padding-bottom:72px}
.w-hero h1{font-size:clamp(28px,3.3vw,42px);font-weight:600;margin-bottom:10px}
.w-hero p{font-size:clamp(15px,1.3vw,18px);max-width:56ch;color:rgba(255,255,255,.9);font-weight:400}
.w-dots{position:absolute;bottom:28px;inset-inline:0;display:flex;justify-content:center;gap:8px}
.w-dots button{width:9px;height:9px;border-radius:99px;border:1px solid #fff;background:transparent;padding:0;cursor:pointer}
.w-dots button.on{background:#fff}

/* split band: title | divider | body */
.w-title{font-size:clamp(24px,2.4vw,32px);font-weight:300;line-height:1.35;color:inherit}
.w-split{background:#fff;color:var(--navy)}
.w-split .wrap{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,2.2fr);gap:0;align-items:center;padding-block:48px}
.w-split .w-title{padding-inline-end:36px}
.w-split .wrap>:nth-child(2){border-inline-start:1px solid #c9d6d9;padding-inline-start:36px;min-width:0}
.w-split-body p{color:#3a5960;max-width:60ch}
.w-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.w-search{border-bottom:1px solid var(--line)}
.w-search-form{display:grid;gap:12px}
.w-search-form .seg{justify-self:start;border-radius:3px;background:var(--grey)}
.w-search-form .seg button{border-radius:2px}
.w-search-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:12px;align-items:end}

/* about band */
.w-about{background:var(--navy);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.w-about::before{content:"";position:absolute;inset:0;background:url("../img/pattern.svg") center/cover;opacity:.08;z-index:-1}
.w-about .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);gap:0;padding-block:72px 64px;position:relative}
.w-about .wrap::before{content:"";position:absolute;top:0;inset-inline-start:max(16px,env(safe-area-inset-left,0px));width:56px;height:56px;background:var(--accent);clip-path:polygon(0 0,100% 0,0 100%)}
[dir=rtl] .w-about .wrap::before{clip-path:polygon(0 0,100% 0,100% 100%)}
.w-about .w-title{padding-inline-end:32px;padding-top:24px}
.w-about-text{border-inline-start:1px solid rgba(255,255,255,.3);padding-inline:32px;padding-top:24px}
.w-about-text p{color:rgba(255,255,255,.85);line-height:2;margin-bottom:22px;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.w-about-list{padding-inline-start:16px;padding-top:24px}
.w-about-list>p{color:rgba(255,255,255,.85);font-weight:500;margin-bottom:14px}
.w-timeline{list-style:none;margin:0;padding:0;position:relative}
.w-timeline::before{content:"";position:absolute;inset-block:12px;inset-inline-start:6px;width:1px;background:rgba(255,255,255,.35)}
.w-timeline li{position:relative;padding-inline-start:28px;padding-block:6px;font-size:16.5px;font-weight:300}
.w-timeline li::before{content:"";position:absolute;inset-inline-start:0;top:50%;width:13px;height:13px;border:1.5px solid rgba(255,255,255,.8);border-radius:99px;background:var(--navy);transform:translateY(-50%)}

/* properties band */
.w-props{background:var(--grey)}
.w-props .wrap{padding-block:64px}
.w-center{text-align:center;max-width:760px;margin:0 auto 34px}
.w-ctitle{display:inline-block;font-size:clamp(24px,2.3vw,32px);font-weight:400;color:var(--navy);padding-bottom:6px;border-bottom:3px solid var(--navy);margin-bottom:16px}
.w-ctitle.light{color:#fff;border-color:#fff}
.w-center p{color:#3a5960}
.w-tabs{display:inline-flex;gap:0;margin-top:20px;border:1px solid var(--navy);border-radius:3px;overflow:hidden}
.w-tabs button{border:0;background:#fff;color:var(--navy);padding:8px 22px;cursor:pointer;font-weight:600;font-size:14px}
.w-tabs button.on{background:var(--navy);color:#fff}
.card{border-radius:3px;border-color:#dfe7e9}
.card:hover{transform:none;box-shadow:0 10px 26px rgba(0,47,56,.1)}
.card h3{font-weight:500}
.pill{border-radius:2px}

/* categories band */
.w-cats{position:relative;color:#fff;background:var(--navy) var(--bg-img,none) center/cover no-repeat;isolation:isolate}
.w-cats::before{content:"";position:absolute;inset:0;background:rgba(0,40,48,.84);z-index:-1}
.w-cats .wrap{padding-block:64px;text-align:center}
.w-cat-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 8px;margin-top:22px}
.w-cat{width:128px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 6px;border-radius:3px;transition:background .2s}
.w-cat:hover{background:rgba(255,255,255,.08)}
.w-cat svg{width:50px;height:50px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.w-cat span{font-size:14px;line-height:1.4}

/* inner page banner */
.w-banner{height:clamp(170px,26vw,300px);background:var(--brand-grad) center/cover no-repeat;position:relative}
.w-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,24,29,.35),rgba(0,24,29,.1))}
.w-titlebar{background:var(--navy);color:#fff}
.w-titlebar .wrap{padding-block:18px 16px}
.w-titlebar h1{font-size:clamp(22px,2.2vw,28px);font-weight:300}
.w-titlebar .crumbs{font-size:12px;margin:4px 0 0;color:rgba(255,255,255,.7)}
.w-sub{background:var(--grey)}
.w-sub .wrap{padding-block:14px;color:#3a5960}
.w-subnav{background:#fff;border-bottom:1px solid var(--line)}
.w-subnav .wrap{display:flex;gap:30px;flex-wrap:wrap}
.w-subnav a{padding:18px 0 14px;font-weight:600;color:var(--navy);border-bottom:2px solid transparent}
.w-subnav a.on,.w-subnav a:hover{border-color:var(--navy)}
.filters{margin-top:24px;border-radius:3px;box-shadow:none;background:var(--grey);border-color:transparent}
.prose h2,.vmv .panel h3{font-weight:300;font-size:28px}
.vmv .panel{border-radius:3px;border:0;border-top:3px solid var(--navy);background:var(--grey)}
.vmv .panel h3 i{display:none}
.split-media,.panel,.form-card,.aside-card,.side,.tbl-wrap,.stat,.plan,.empty,.modal .box,.gallery .main,.nl{border-radius:3px}
.aside-card{background:var(--navy)}

/* footer */
.ftr{background:var(--navy);margin-top:0;color:rgba(255,255,255,.85)}
.ftr::before{opacity:.07}
.ftr .wrap{grid-template-columns:1fr 1fr 1.3fr;gap:0;padding-block:52px 34px}
.ftr .f-col{padding-inline-end:28px}
.ftr .f-contact{border-inline-start:1px solid rgba(255,255,255,.3);padding-inline-start:36px}
.ftr h4{font-size:16px;font-weight:600;letter-spacing:.02em}
.ftr .logo{width:140px;height:64px;margin-bottom:18px}
.f-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.f-row svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.4;flex-shrink:0}
.f-row b{display:block;color:#fff;font-weight:600;font-size:14.5px}
.f-row small{color:rgba(255,255,255,.6);font-size:12.5px}
.social a{border-radius:2px;background:transparent;border:1px solid rgba(255,255,255,.5);width:40px;height:40px}
.social a:hover{background:#fff}
.social a:hover svg{stroke:var(--navy)}
.ftr .bottom{border-top:1px solid rgba(255,255,255,.18)}
.go-top{background:none;border:0;color:#fff;font-weight:600;cursor:pointer;font-size:13px;letter-spacing:.04em}

@media (max-width:1100px){.w-search-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.w-search-fields .btn{grid-column:1/-1}}
@media (max-width:960px){
  .w-split .wrap,.w-about .wrap{grid-template-columns:1fr;gap:22px}
  .w-split .wrap>:nth-child(2),.w-about-text{border-inline-start:0;padding-inline:0;border-top:1px solid #c9d6d9;padding-top:22px}
  .w-about-text{border-color:rgba(255,255,255,.3)}
  .w-split .w-title,.w-about .w-title{padding-inline-end:0}
  .w-about-list{padding-inline-start:0}
  .ftr .wrap{grid-template-columns:1fr 1fr}
  .ftr .f-contact{grid-column:1/-1;border-inline-start:0;padding-inline-start:0;border-top:1px solid rgba(255,255,255,.2);padding-top:26px;margin-top:20px}
  .hdr .wrap{height:72px}.hdr .logo{width:110px}
}
@media (max-width:560px){.w-search-fields{grid-template-columns:1fr}.w-cat{width:46%}.ftr .wrap{grid-template-columns:1fr}.ftr .f-col{margin-bottom:22px}}
@media (prefers-reduced-motion:reduce){.w-slide.on{animation:none}}
.w-slides{z-index:0}.w-hero-shade{z-index:1}.w-hero-copy{z-index:2}.w-dots{z-index:3}
/* 3D logo */
.logo3d{display:block;height:auto}
.brand .logo3d{height:58px;width:auto}
.brand .on-dark{display:none}
.hdr.over:not(.solid) .brand .on-light{display:none}
.hdr.over:not(.solid) .brand .on-dark{display:block}
.f-logo{width:190px;margin-bottom:20px}
.drawer-logo{height:46px;width:auto}
.auth-logo{width:180px}
.social svg{stroke-linecap:round;stroke-linejoin:round}
@media (max-width:960px){.brand .logo3d{height:46px}}
.filters{grid-template-columns:repeat(5,minmax(0,1fr)) auto}@media (max-width:1100px){.filters{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:720px){.filters{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:480px){.filters{grid-template-columns:1fr}}

/* ---------- iOS top area + motion ---------- */
html{background:#002F38}
.hdr{padding-top:env(safe-area-inset-top,0px)}
.hdr.over:not(.solid){background:linear-gradient(to bottom,rgba(0,22,27,.55),rgba(0,22,27,0))}
.rv{opacity:0;transform:translate3d(0,34px,0);transition:opacity 1s cubic-bezier(.2,.65,.2,1),transform 1s cubic-bezier(.2,.65,.2,1);transition-delay:var(--rd,0s);will-change:opacity,transform}
.rv.rv-in{opacity:1;transform:none}
.w-cat.rv{transform:translate3d(0,22px,0) scale(.96)}
.w-cat.rv.rv-in{transform:none}
.w-ctitle{border-bottom:0;position:relative}
.w-ctitle::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;background:currentColor;transform:scaleX(1);transform-origin:center;transition:transform 1.1s cubic-bezier(.2,.65,.2,1) .35s}
.rv .w-ctitle::after,.w-ctitle.rv::after{transform:scaleX(0)}
.rv.rv-in .w-ctitle::after,.w-ctitle.rv.rv-in::after{transform:scaleX(1)}
.w-about-list.rv li{opacity:0;transform:translate3d(-14px,0,0);transition:opacity .7s ease,transform .7s ease;transition-delay:calc(.35s + var(--i,0) * .12s)}
[dir=rtl] .w-about-list.rv li{transform:translate3d(14px,0,0)}
.w-about-list.rv.rv-in li{opacity:1;transform:none}
.w-about .wrap::before{transition:transform 1s cubic-bezier(.2,.65,.2,1)}
.w-hero-copy h1,.w-hero-copy p{animation:heroIn 1.2s cubic-bezier(.2,.65,.2,1) both}
.w-hero-copy p{animation-delay:.25s}
@keyframes heroIn{from{opacity:0;transform:translate3d(0,30px,0)}}
.w-slides{will-change:transform}
.w-hero-copy{will-change:transform,opacity}
@media (hover:hover) and (min-width:960px){.w-cats{background-attachment:fixed}}
.card{transition:box-shadow .35s,transform .35s,border-color .35s}
.card:hover{transform:translateY(-4px)}
.card .media img{transition:transform 1.2s cubic-bezier(.2,.65,.2,1)}
.card:hover .media img{transform:scale(1.05)}
.btn{transition:background .25s,color .25s,border-color .25s,box-shadow .25s,transform .1s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none!important}.w-hero-copy h1,.w-hero-copy p{animation:none}}

.tel-list{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}.tel-list a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px}.tel-list a:hover{text-decoration-color:#fff}.tel-list i{font-style:normal;opacity:.45}

.social svg .f{fill:#fff;stroke:none}.social a:hover svg .f{fill:var(--navy)}

/* page transitions */
#main{transition:opacity .22s ease,transform .22s ease}
#main.pg-leave{opacity:0;transform:translate3d(0,10px,0)}
#main.pg-enter{animation:pgIn .7s cubic-bezier(.2,.65,.2,1) both}
@keyframes pgIn{from{opacity:0;transform:translate3d(0,14px,0)}}
.w-banner{animation:curtain 1.3s cubic-bezier(.65,0,.25,1) both;background-size:cover;background-position:center}
@keyframes curtain{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.w-titlebar h1{animation:slideIn .9s cubic-bezier(.2,.65,.2,1) .35s both}
.w-titlebar .crumbs{animation:slideIn .9s cubic-bezier(.2,.65,.2,1) .5s both}
@keyframes slideIn{from{opacity:0;transform:translate3d(24px,0,0)}}
[dir=ltr] .w-titlebar h1,[dir=ltr] .w-titlebar .crumbs{animation-name:slideInL}
@keyframes slideInL{from{opacity:0;transform:translate3d(-24px,0,0)}}
.auth-art{animation:pgIn 1s cubic-bezier(.2,.65,.2,1) both}
.spec-list > div.rv{transform:translate3d(0,12px,0)}
.gallery.rv{transform:scale(.98)}
.gallery.rv.rv-in{transform:none}
@media (prefers-reduced-motion:reduce){#main.pg-enter,.w-banner,.w-titlebar h1,.w-titlebar .crumbs,.auth-art{animation:none}}

/* dark header everywhere (no white strip at the top) */
.hdr,.hdr.over.solid{background:rgba(0,47,56,.98);color:#fff;border-color:rgba(255,255,255,.08);box-shadow:none}
.hdr.over.solid{box-shadow:0 6px 24px rgba(0,0,0,.18)}
.hdr .nav a,.hdr .nav .dd>button,.hdr .lang-btn,.hdr.over.solid .nav a,.hdr.over.solid .nav .dd>button,.hdr.over.solid .lang-btn{color:rgba(255,255,255,.92)}
.hdr .nav a:hover,.hdr .nav .dd>button:hover,.hdr .nav a.on,.hdr .nav .dd>button.on{color:#fff}
.hdr .nav a.on::after,.hdr .nav .dd>button.on::after{background:var(--accent)}
.hdr .dd-menu a{color:var(--navy)!important}
.hdr .btn-g,.hdr.over.solid .btn-g{color:#fff;border-color:rgba(255,255,255,.7);background:transparent}
.hdr .btn-g:hover,.hdr.over.solid .btn-g:hover{background:#fff;color:var(--navy)}
.hdr .menu-btn span,.hdr .menu-btn span::before,.hdr .menu-btn span::after,.hdr.over.solid .menu-btn span,.hdr.over.solid .menu-btn span::before,.hdr.over.solid .menu-btn span::after{background:#fff}
.hdr .brand .on-light,.hdr.over:not(.solid) .brand .on-light{display:none}
.hdr .brand .on-dark,.hdr.over:not(.solid) .brand .on-dark{display:block}
.hdr.over:not(.solid){background:linear-gradient(to bottom,rgba(0,22,27,.6),rgba(0,22,27,0));border-color:transparent}
.hdr,.hdr.over.solid{background:#002F38}

/* inner pages: transparent header over the banner, like the home page */
.w-banner{height:calc(clamp(180px,26vw,320px) + 88px)}
.w-banner::after{background:linear-gradient(to bottom,rgba(0,22,27,.6),rgba(0,22,27,.12) 45%,rgba(0,22,27,.35))}
@media (max-width:960px){.w-banner{height:calc(clamp(170px,40vw,260px) + 72px)}}

/* ---------- soft transitions between sections ---------- */
.fade{height:clamp(70px,9vw,140px);background:linear-gradient(to bottom,var(--a),var(--b));margin-top:-1px;margin-bottom:-1px}
/* hero melts into the dark search band */
.w-hero-shade{background:linear-gradient(to top,#002F38 0%,rgba(0,47,56,.82) 14%,rgba(0,24,29,.35) 45%,rgba(0,24,29,.06) 65%,rgba(0,24,29,.5) 100%)}
.w-hero-copy{padding-bottom:96px}
.w-split.w-dark{background:#002F38;color:#fff;border:0}
.w-split.w-dark .wrap>:nth-child(2){border-color:rgba(255,255,255,.22)}
.w-split.w-dark .seg{background:rgba(255,255,255,.08)}
.w-split.w-dark .seg button{color:rgba(255,255,255,.75)}
.w-split.w-dark .seg button.on{background:#fff;color:var(--navy)}
.w-split.w-dark .lbl{color:rgba(255,255,255,.7)}
.w-split.w-dark .btn-d{background:var(--teal);color:#fff}
.w-split.w-dark .btn-d:hover{background:var(--teal-2)}
.w-search .wrap{padding-block:30px 46px}
.w-about .wrap{padding-top:40px}
.w-about::before{-webkit-mask:linear-gradient(to bottom,transparent,#000 30%);mask:linear-gradient(to bottom,transparent,#000 30%)}
/* properties band fades into the category band, which fades into white */
.w-cats{overflow:hidden}
.w-cats .wrap{position:relative;z-index:2;padding-block:110px}
.w-fade-t,.w-fade-b{position:absolute;inset-inline:0;height:clamp(80px,10vw,150px);z-index:1;pointer-events:none}
.w-fade-t{top:0;background:linear-gradient(to bottom,#EEF2F3,rgba(238,242,243,0))}
.w-fade-b{bottom:0;background:linear-gradient(to top,#fff,rgba(255,255,255,0))}
.w-props .wrap{padding-bottom:30px}
/* content melts into the footer */
.ftr{background:linear-gradient(to bottom,#fff 0,#002F38 clamp(90px,10vw,150px),#002F38 100%);padding-top:clamp(90px,10vw,150px)}
.ftr::before{-webkit-mask:linear-gradient(to bottom,transparent 0,transparent 120px,#000 260px);mask:linear-gradient(to bottom,transparent 0,transparent 120px,#000 260px)}
/* inner pages: banner melts into the title bar, title bar melts into the page */
.w-banner::after{background:linear-gradient(to bottom,rgba(0,22,27,.6) 0%,rgba(0,22,27,.12) 40%,rgba(0,47,56,.55) 78%,#002F38 100%)}
.w-titlebar{background:linear-gradient(to bottom,#002F38 0,#002F38 calc(100% - 80px),#fff 100%);padding-bottom:80px;margin-top:-1px}
.w-titlebar .wrap{padding-block:6px 4px}
.w-sub{background:#fff}
.w-subnav{border-bottom:0;background:#fff}
.w-subnav .wrap{border-bottom:1px solid var(--line)}
.filters{margin-top:0}
/* softer reveals for images and the CTA band */
.split-media.rv{clip-path:inset(0 0 0 100%);transform:none;opacity:1;transition:clip-path 1.3s cubic-bezier(.65,0,.25,1),opacity 1s}
[dir=rtl] .split-media.rv{clip-path:inset(0 100% 0 0)}
.split-media.rv.rv-in{clip-path:inset(0 0 0 0)}
.band.cta.rv{transform:translate3d(0,40px,0) scale(.98)}
.band.cta.rv.rv-in{transform:none}
@media (prefers-reduced-motion:reduce){.split-media.rv{clip-path:none!important}}

/* ---------- faded divider lines (no hard edges) ---------- */
.w-split .wrap>:nth-child(2),.w-about-text,.ftr .f-contact{border-inline-start:0!important;position:relative}
.w-split .wrap>:nth-child(2)::before,.w-about-text::before,.ftr .f-contact::before{content:"";position:absolute;inset-block:-10%;inset-inline-start:0;width:1px;background:linear-gradient(to bottom,transparent,var(--ln,rgba(0,47,56,.28)) 30%,var(--ln,rgba(0,47,56,.28)) 70%,transparent)}
.w-split.w-dark .wrap>:nth-child(2)::before,.w-about-text::before,.ftr .f-contact::before{--ln:rgba(255,255,255,.35)}
.ftr .bottom{border-top:0;position:relative}
.ftr .bottom::before,.w-subnav .wrap::after,.hdr.over.solid::after{content:"";position:absolute;inset-inline:0;top:0;height:1px;background:linear-gradient(to right,transparent,var(--ln,rgba(255,255,255,.28)) 25%,var(--ln,rgba(255,255,255,.28)) 75%,transparent)}
.w-subnav .wrap{border-bottom:0;position:relative}
.w-subnav .wrap::after{top:auto;bottom:0;--ln:rgba(0,47,56,.18)}
.hdr,.hdr.over.solid{border-bottom:0}
.hdr.over.solid::after{top:auto;bottom:0;--ln:rgba(121,184,193,.35)}
.spec-list div{border-bottom:0;position:relative}
.spec-list div+div::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:linear-gradient(to right,transparent,rgba(0,47,56,.16) 15%,rgba(0,47,56,.16) 85%,transparent)}
.price{border-top:0;position:relative}
.price::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:linear-gradient(to right,transparent,rgba(0,47,56,.18) 20%,rgba(0,47,56,.18) 80%,transparent)}
.w-timeline::before{background:linear-gradient(to bottom,transparent,rgba(255,255,255,.4) 15%,rgba(255,255,255,.4) 85%,transparent)}
.card{border-color:transparent;box-shadow:0 1px 2px rgba(0,47,56,.05),0 10px 30px rgba(0,47,56,.06)}
.card:hover{box-shadow:0 2px 4px rgba(0,47,56,.06),0 22px 44px rgba(0,47,56,.13)}
.filters,.panel,.form-card{border-color:transparent;box-shadow:0 1px 2px rgba(0,47,56,.04),0 12px 34px rgba(0,47,56,.06)}
.w-ctitle::after{background:linear-gradient(to right,transparent,currentColor 18%,currentColor 82%,transparent)}
@media (max-width:960px){
  .w-split .wrap>:nth-child(2),.w-about-text{border-top:0!important}
  .w-split .wrap>:nth-child(2)::before,.w-about-text::before{inset-block:0 auto;inset-inline:0;width:auto;height:1px;background:linear-gradient(to right,transparent,var(--ln,rgba(0,47,56,.28)) 25%,var(--ln,rgba(0,47,56,.28)) 75%,transparent)}
  .ftr .f-contact{border-top:0}
  .ftr .f-contact::before{inset-block:0 auto;inset-inline:0;width:auto;height:1px;background:linear-gradient(to right,transparent,rgba(255,255,255,.3) 25%,rgba(255,255,255,.3) 75%,transparent)}
}

/* header slides away on scroll down, comes back on scroll up */
.hdr{transition:transform .55s cubic-bezier(.2,.65,.2,1),background .35s,box-shadow .35s}
.hdr.hide{transform:translate3d(0,-115%,0)}
.drawer.open ~ * .hdr.hide{transform:none}
/* the logo lands in the about section */
.w-about-head{padding-inline-end:32px}
.w-about-head .w-title{padding-inline-end:0}
.w-about-logo{width:clamp(150px,16vw,210px);margin-bottom:22px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))}
.w-about-logo.rv{opacity:0;transform:translate3d(0,-90px,0) scale(.82);transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.16,.84,.3,1)}
.w-about-logo.rv.rv-in{opacity:1;transform:none}
@media (max-width:960px){.w-about-head{padding-inline-end:0}}

/* animated mobile menu */
.drawer{display:block;visibility:hidden;pointer-events:none;transition:visibility 0s linear .6s}
.drawer.open{visibility:visible;pointer-events:auto;transition:visibility 0s}
.drawer .scrim{opacity:0;transition:opacity .5s ease;backdrop-filter:blur(3px)}
.drawer.open .scrim{opacity:1}
.drawer .panel{transform:translate3d(100%,0,0);transition:transform .6s cubic-bezier(.2,.75,.2,1);background:linear-gradient(160deg,#00414c 0%,#002F38 45%,#001f25 100%);box-shadow:-20px 0 60px rgba(0,0,0,.35)}
[dir=ltr] .drawer .panel{transform:translate3d(-100%,0,0)}
.drawer.open .panel{transform:none}
.drawer .panel>*{opacity:0;transform:translate3d(24px,0,0);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.75,.2,1)}
[dir=ltr] .drawer .panel>*{transform:translate3d(-24px,0,0)}
.drawer.open .panel>*{opacity:1;transform:none}
.drawer.open .panel>*:nth-child(1){transition-delay:.12s}
.drawer.open .panel>*:nth-child(2){transition-delay:.18s}
.drawer.open .panel>*:nth-child(3){transition-delay:.23s}
.drawer.open .panel>*:nth-child(4){transition-delay:.28s}
.drawer.open .panel>*:nth-child(5){transition-delay:.33s}
.drawer.open .panel>*:nth-child(6){transition-delay:.38s}
.drawer.open .panel>*:nth-child(7){transition-delay:.43s}
.drawer.open .panel>*:nth-child(8){transition-delay:.48s}
.drawer.open .panel>*:nth-child(9){transition-delay:.53s}
.drawer.open .panel>*:nth-child(10){transition-delay:.58s}
.drawer .panel a{position:relative;font-size:15.5px;padding:13px 10px}
.drawer .panel a::after{content:"";position:absolute;inset-inline:10px;bottom:0;height:1px;background:linear-gradient(to right,transparent,rgba(255,255,255,.14) 20%,rgba(255,255,255,.14) 80%,transparent)}
.drawer .panel a:last-child::after{display:none}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{transition:transform .35s ease,top .35s ease,background .2s}
@media (prefers-reduced-motion:reduce){.drawer .panel,.drawer .panel>*,.drawer .scrim{transition:none}}

/* logo legibility over photos */
.hdr.over:not(.solid){background:linear-gradient(to bottom,rgba(0,26,31,.82) 0%,rgba(0,26,31,.55) 55%,rgba(0,26,31,0) 100%)}
.hdr.over:not(.solid)::before{content:"";position:absolute;inset-inline:0;top:100%;height:70px;background:linear-gradient(to bottom,rgba(0,26,31,.35),rgba(0,26,31,0));pointer-events:none}
.hdr .brand .on-dark{filter:drop-shadow(0 2px 6px rgba(0,0,0,.45)) drop-shadow(0 8px 22px rgba(0,20,25,.35))}
.hdr.over.solid .brand .on-dark{filter:none}
.hdr.over:not(.solid) .nav a,.hdr.over:not(.solid) .nav .dd>button,.hdr.over:not(.solid) .lang-btn{text-shadow:0 1px 8px rgba(0,0,0,.45)}
.w-hero-shade{background:linear-gradient(to top,#002F38 0%,rgba(0,47,56,.82) 14%,rgba(0,24,29,.35) 45%,rgba(0,24,29,.08) 62%,rgba(0,24,29,.55) 88%,rgba(0,24,29,.7) 100%)}
.w-about .wrap::before{display:none}

/* faded brand icon under the logo (as in the post templates) */
.brand-icon{fill:#fff;pointer-events:none}
.w-about-head{position:relative;isolation:isolate}
.w-about-icon{position:absolute;z-index:-1;inset-inline-start:-6%;top:-6%;width:clamp(220px,26vw,340px);height:auto;opacity:.075;-webkit-mask:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.6) 45%,transparent 92%);mask:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.6) 45%,transparent 92%)}
.w-about-icon{transition:opacity 1.6s ease,transform 1.8s cubic-bezier(.16,.84,.3,1)}
.w-about-head:has(.w-about-logo.rv:not(.rv-in)) .w-about-icon{opacity:0;transform:translate3d(0,40px,0)}
.ftr .f-contact{isolation:isolate}
.f-icon{position:absolute;z-index:-1;inset-inline-end:0;top:-20px;width:clamp(200px,22vw,300px);height:auto;opacity:.05;-webkit-mask:linear-gradient(to bottom,#000,transparent 90%);mask:linear-gradient(to bottom,#000,transparent 90%)}
@media (max-width:960px){.w-about-icon{width:240px;inset-inline-start:-4%}.f-icon{width:200px}}

.about-intro{max-width:880px}
.about-intro h2{margin-bottom:10px}
/* form fields on dark bands keep dark text */
.w-dark .sel,.w-dark .in,.w-dark .ta,.w-dark option,.aside-card .in,.aside-card .sel{color:var(--ink);background-color:#fff}
.w-dark .sel:disabled{color:#7d9399;background-color:#e9eff0}
.sel option{color:var(--ink);background:#fff}

.w-tabs-light{border-color:rgba(255,255,255,.7);margin:6px 0 4px;background:transparent}
.w-tabs-light button{background:transparent;color:#fff}
.w-tabs-light button.on{background:#fff;color:var(--navy)}
.w-cat.flip svg{animation:catFlip .6s cubic-bezier(.2,.65,.2,1)}
@keyframes catFlip{0%{transform:scale(.85);opacity:.4}100%{transform:none;opacity:1}}

/* sold / rented: unified artwork, grouped at the bottom */
.sold-sep{grid-column:1/-1;display:flex;align-items:center;gap:16px;margin:26px 0 6px;color:var(--muted);font-weight:600;font-size:15px}
.sold-sep::before,.sold-sep::after{content:"";flex:1;height:1px;background:linear-gradient(to var(--d1,left),transparent,rgba(0,47,56,.22))}
.sold-sep::after{background:linear-gradient(to right,transparent,rgba(0,47,56,.22))}
.sold-sep::before{background:linear-gradient(to left,transparent,rgba(0,47,56,.22))}
.sold-art{position:absolute;inset:0;background:linear-gradient(150deg,#0a4652 0%,#002F38 55%,#001e24 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;overflow:hidden}
.sold-icon{position:absolute;width:78%;height:auto;inset-inline-end:-18%;bottom:-12%;fill:#fff;opacity:.06}
.sold-tag{position:relative;color:#fff;border:1.5px solid rgba(255,255,255,.75);padding:7px 22px;font-weight:600;font-size:17px;letter-spacing:.02em;border-radius:2px}
.sold-logo{position:relative;width:42%;opacity:.85}
.card.is-sold .body{opacity:.8}
.card.is-sold .price b{color:var(--muted)}
.card.is-sold .badges .pill.teal{background:rgba(255,255,255,.14)}
.card .media .sold-art img.sold-logo,.card:hover .media .sold-art img.sold-logo{width:46%;height:auto;object-fit:contain;transform:none;transition:none}
.sold-art{padding:20px}

.gallery .main.is-sold{cursor:default}
.gallery .main .sold-art img.sold-logo{width:40%;height:auto;object-fit:contain}
.gallery .main .sold-tag{font-size:22px;padding:9px 30px}
.gallery .main.is-sold{aspect-ratio:16/10;max-height:none;background:#002F38}
.gallery .main.is-sold .sold-art{inset:0;width:100%;height:100%}
.gallery .main.is-sold .sold-icon{width:60%;inset-inline-end:-10%;bottom:-18%}
.gallery .main.is-sold img.sold-logo{width:34%}
@media (max-width:600px){.gallery .main.is-sold{aspect-ratio:4/3}}
.card .price .see{font-size:.86rem;color:var(--muted,#6b7a80);font-weight:500;letter-spacing:.2px}
html[dir=ltr] .card .price .see{direction:ltr}
/* keep "go top" clear of the floating WhatsApp button */
.ftr .bottom .wrap{padding-inline-end:calc(84px + env(safe-area-inset-right,0px));padding-bottom:env(safe-area-inset-bottom,0px)}
/* v42 — mobile polish: lighter/earlier reveal, WhatsApp always on top, smaller footer logo */
.rv{transform:translate3d(0,18px,0);transition-duration:.75s}
.rv.rv-in{will-change:auto}
.wa-float{z-index:45;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;bottom:calc(22px + env(safe-area-inset-bottom,0px))}
.f-logo{width:132px;margin-bottom:16px}
@media (max-width:760px){
  .f-logo{width:112px;margin-bottom:12px}
  .ftr .bottom .wrap{flex-direction:column;align-items:flex-start;gap:4px;padding-inline-end:0;padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
}
/* v43 — WhatsApp float follows the visible viewport on phones */
.wa-float{bottom:calc(22px + env(safe-area-inset-bottom,0px) + var(--vvb,0px));transition:bottom .25s ease}
@media (max-width:760px){.wa-float{bottom:calc(30px + env(safe-area-inset-bottom,0px) + var(--vvb,0px));width:52px;height:52px}}
/* v44 — lift WhatsApp above the collapsed mobile toolbar while scrolling down */
@media (max-width:760px){html.sc-down .wa-float{bottom:calc(78px + env(safe-area-inset-bottom,0px) + var(--vvb,0px))}}
.wa-float{transition:bottom .3s cubic-bezier(.2,.65,.2,1)}
/* v45 — centered copyright on phones (two clean lines) */
.ftr .bottom .copy span{white-space:nowrap}
@media (max-width:760px){
  .ftr .bottom .wrap{align-items:center;text-align:center;gap:8px}
  .ftr .bottom .copy{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.6}
  .ftr .bottom .copy .sep{display:none}
  .ftr .bottom .copy .rt{opacity:.8;font-size:12px}
}
/* v46 — services: text-only, two calm columns with a faded divider (photo only in the banner) */
.svx{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:start;padding-block:8px}
.svc-col{position:relative}
.svc-col .prose{max-width:none;font-size:15.5px}
.svc-col h2{font-weight:300;font-size:30px;color:var(--deep);margin:0 0 14px}
.svc-col+.svc-col{padding-top:58px}
.svc-col+.svc-col::before{content:"";position:absolute;inset-block:0;inset-inline-start:calc(clamp(32px,6vw,80px) / -2);width:1px;background:linear-gradient(to bottom,transparent,rgba(0,47,56,.25) 30%,rgba(0,47,56,.25) 70%,transparent)}
.svc-icon{position:absolute;z-index:-1;inset-inline-end:-2%;top:-30px;width:clamp(180px,22vw,300px);height:auto;opacity:.045;pointer-events:none}
@media (max-width:860px){
  .svx{grid-template-columns:1fr;gap:28px}
  .svc-col+.svc-col{padding-top:28px}
  .svc-col+.svc-col::before{inset-block:0 auto;inset-inline:0;width:auto;height:1px;background:linear-gradient(to right,transparent,rgba(0,47,56,.25) 25%,rgba(0,47,56,.25) 75%,transparent)}
  .svc-col h2{font-size:24px}
}
.brand-icon.svc-icon{fill:#002F38;opacity:.05}
/* v48 — navy inner pages (everything except the home page) */
html.inner-dark,html.inner-dark body{background:#002F38}
html.inner-dark .w-titlebar{background:#002F38;padding-bottom:22px}
html.inner-dark .w-subnav,html.inner-dark .w-sub{background:transparent}
html.inner-dark .w-subnav a{color:rgba(255,255,255,.62)}
html.inner-dark .w-subnav a.on,html.inner-dark .w-subnav a:hover{color:#fff;border-color:#fff}
html.inner-dark .w-subnav .wrap::after{--ln:rgba(255,255,255,.18)}
html.inner-dark .w-sub .wrap{color:rgba(255,255,255,.7)}
/* text that sits directly on the page */
html.inner-dark #main{--ink:rgba(255,255,255,.88);--deep:#fff;--navy:#fff;--muted:rgba(255,255,255,.6);--line:rgba(255,255,255,.14);--teal:#79B8C1;--mist:rgba(255,255,255,.08);--grey:rgba(255,255,255,.05);color:var(--ink)}
html.inner-dark #main .prose,html.inner-dark #main .quote{color:rgba(255,255,255,.84)}
html.inner-dark #main .prose h2,html.inner-dark .svc-col h2{color:#fff}
html.inner-dark .brand-icon.svc-icon{fill:#fff;opacity:.05}
html.inner-dark .svc-col+.svc-col::before{background:linear-gradient(to bottom,transparent,rgba(255,255,255,.22) 30%,rgba(255,255,255,.22) 70%,transparent)}
@media (max-width:860px){html.inner-dark .svc-col+.svc-col::before{background:linear-gradient(to right,transparent,rgba(255,255,255,.22) 25%,rgba(255,255,255,.22) 75%,transparent)}}
html.inner-dark .vmv .panel{background:rgba(255,255,255,.05);border-top-color:#79B8C1}
html.inner-dark .vmv .panel p{color:rgba(255,255,255,.78)}
html.inner-dark .sold-sep::before{background:linear-gradient(to left,transparent,rgba(255,255,255,.25))}
html.inner-dark .sold-sep::after{background:linear-gradient(to right,transparent,rgba(255,255,255,.25))}
html.inner-dark .spec-list div+div::before{background:linear-gradient(to right,transparent,rgba(255,255,255,.16) 15%,rgba(255,255,255,.16) 85%,transparent)}
html.inner-dark #main .btn-od{color:#fff;border-color:rgba(255,255,255,.7)}
html.inner-dark #main .btn-od:hover{background:#fff;color:#002F38;border-color:#fff}
html.inner-dark .aside-card{background:#073F49;border:1px solid rgba(255,255,255,.08)}
html.inner-dark .band.cta{background:#073F49;border:1px solid rgba(255,255,255,.08)}
html.inner-dark .loader .spin{border-color:rgba(255,255,255,.15);border-top-color:#fff}
/* white surfaces keep the light palette */
html.inner-dark #main :is(.card,.filters,.form-card,.empty,.panel:not(.vmv .panel),.side,.stat,.plan,.tbl-wrap,.nl,.modal .box,.pager,.in,.sel,.ta,.dd-menu){--ink:#0C2B31;--deep:#002F38;--navy:#002F38;--muted:#5D777D;--line:#DCE6E8;--teal:#007A89;--mist:#DAEBEE;--grey:#EEF2F3;color:var(--ink)}
html.inner-dark #main :is(.panel:not(.vmv .panel),.form-card) .spec-list div+div::before{background:linear-gradient(to right,transparent,rgba(0,47,56,.16) 15%,rgba(0,47,56,.16) 85%,transparent)}
html.inner-dark #main :is(.panel,.form-card) .btn-od{color:#002F38;border-color:#002F38}
/* footer continues the navy without the white melt */
html.inner-dark .ftr{background:linear-gradient(to right,transparent,rgba(255,255,255,.16) 25%,rgba(255,255,255,.16) 75%,transparent) top/100% 1px no-repeat,#002F38;padding-top:clamp(56px,6vw,90px)}
html.inner-dark :is(.results-bar,.band.cta,.more,.result-page) .btn-d{background:#fff;color:#002F38;border-color:#fff}
html.inner-dark :is(.results-bar,.band.cta,.more,.result-page) .btn-l{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
html.inner-dark :is(.results-bar,.band.cta,.more,.result-page) .btn-l:hover{background:rgba(255,255,255,.1)}
html.inner-dark :is(.band.cta,.result-page) .btn-p{background:#fff;color:#002F38}
html.inner-dark :is(.band.cta,.result-page) .btn-p:hover{background:#DAEBEE}


/* ===== v51 — inner pages stay light; more life: drawn title line, floating brand mark, rounded cards, refined filter ===== */
/* title accent line that draws itself */
html.inner .w-titlebar h1{position:relative;padding-bottom:12px}
html.inner .w-titlebar h1::after{content:"";position:absolute;bottom:0;inset-inline-start:0;height:2px;width:56px;border-radius:2px;background:linear-gradient(to left,#79B8C1,#008BA0);transform-origin:right;animation:mkLine 1.1s cubic-bezier(.2,.65,.2,1) .7s both}
html[dir=ltr].inner .w-titlebar h1::after{transform-origin:left}
@keyframes mkLine{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
/* faint brand mark that floats slowly behind the listing */
.lst{position:relative;isolation:isolate}
.lst-icon{position:absolute;z-index:-1;inset-inline-end:0;top:120px;width:clamp(220px,28vw,420px);height:auto;fill:#002F38;opacity:.035;pointer-events:none;animation:mkFloat 14s ease-in-out infinite alternate}
@keyframes mkFloat{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(0,40px,0) rotate(-3deg)}}
/* rounded, softer property cards */
html.inner .cards{gap:20px}
html.inner .card{border-radius:20px;border:1px solid #E6EEF0;box-shadow:0 1px 3px rgba(0,47,56,.05),0 14px 34px rgba(0,47,56,.07);transition:transform .45s cubic-bezier(.2,.65,.2,1),box-shadow .45s,border-color .45s}
html.inner .card:hover{transform:translateY(-6px);border-color:#cfe2e5;box-shadow:0 2px 6px rgba(0,47,56,.06),0 26px 54px rgba(0,47,56,.14)}
html.inner .card .media{border-radius:19px 19px 0 0}
html.inner .card .media::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.32) 50%,transparent 65%);transform:translateX(-120%);transition:transform 1s cubic-bezier(.2,.65,.2,1);pointer-events:none}
html.inner .card:hover .media::after{transform:translateX(120%)}
html.inner .card .pill{border-radius:999px;padding:4px 12px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.inner .card .pill.teal{background:rgba(0,47,56,.72)}
html.inner .card .body{padding:16px 18px 18px}
html.inner .card .price{position:relative;padding-top:10px;margin-top:4px}
html.inner .card .price::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:linear-gradient(to right,transparent,rgba(0,47,56,.14) 20%,rgba(0,47,56,.14) 80%,transparent)}
html.inner .cards > .card.rv{transform:translate3d(0,28px,0) scale(.97)}
html.inner .cards > .card.rv.rv-in{transform:none}
html.inner .cards > .card.rv.rv-in:hover{transform:translateY(-6px)}
html.inner .sk-card{border-radius:20px}
html.inner :is(.results-bar,.more) .btn{border-radius:999px}
/* refined filter */
.filters.fx{display:block;padding:0}
.fx .f-toggle{display:none}
.fx .f-in{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) auto;gap:14px;align-items:end;padding:22px}
.fx .f-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding-inline:24px;border:0;border-radius:14px;font-weight:700;color:#fff;background:linear-gradient(135deg,#008BA0,#002F38 70%);box-shadow:0 10px 24px rgba(0,47,56,.22);transition:transform .25s,box-shadow .25s}
.fx .f-go:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(0,47,56,.3)}
.fx .f-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
html.inner .filters.fx{background:#fff;border:1px solid #E3ECEE;border-radius:24px;box-shadow:0 2px 6px rgba(0,47,56,.04),0 24px 60px rgba(0,47,56,.10);position:relative;overflow:hidden}
html.inner .filters.fx::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(to left,#79B8C1,#008BA0,#002F38);background-size:200% 100%;animation:mkSlide 6s linear infinite}
@keyframes mkSlide{from{background-position:0 0}to{background-position:200% 0}}
html.inner .fx .lbl{font-size:12.5px;color:#5D777D;font-weight:600;letter-spacing:.2px}
html.inner .fx :is(.in,.sel){background-color:#F4F7F8;border:1px solid transparent;border-radius:14px;min-height:48px;transition:border-color .25s,background-color .25s,box-shadow .25s}
html.inner .fx :is(.in,.sel):hover{background-color:#EDF3F4}
html.inner .fx :is(.in,.sel):focus{outline:0;background-color:#fff;border-color:#79B8C1;box-shadow:0 0 0 4px rgba(121,184,193,.18)}
html.inner .fx .sel{background-position:calc(14px) 21px,calc(19px) 21px}
html[dir=ltr].inner .fx .sel{background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px}
html.inner .fx .sel:disabled{opacity:.5}
@media (max-width:1100px){.fx .f-in{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){
  .fx .f-toggle{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;color:#002F38;font:inherit;font-weight:700;font-size:15px;padding:17px 18px;cursor:pointer;text-align:start}
  .fx .f-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .fx .f-toggle span{flex:1}
  .fx .f-n:not(:empty){min-width:22px;height:22px;border-radius:99px;background:#008BA0;color:#fff;font-size:12px;display:grid;place-items:center;padding:0 6px}
  .fx .f-chev{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .45s cubic-bezier(.2,.65,.2,1),margin .45s;margin-top:-4px;opacity:.75}
  .fx.open .f-chev{transform:rotate(225deg);margin-top:4px}
  .fx .f-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.65,.2,1)}
  .fx.open .f-body{grid-template-rows:1fr}
  .fx .f-in{min-height:0;overflow:hidden;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 16px;transition:padding .55s cubic-bezier(.2,.65,.2,1)}
  .fx.open .f-in{padding:2px 16px 18px}
  .fx .f-in > :nth-last-child(2),.fx .f-in > .f-go{grid-column:1/-1}
  html.inner .filters.fx{border-radius:20px}
  .lst-icon{inset-inline-end:0;top:80px;width:200px}
}
@media (prefers-reduced-motion:reduce){.lst-icon,html.inner .w-titlebar h1::after,html.inner .filters.fx::before{animation:none}}
/* v53 — property details: no stock banner, the listing's own photos lead */
.w-titlebar.tb-solo{padding-top:18px;padding-bottom:64px}
.w-titlebar.tb-solo + .wrap .det{margin-top:-34px;position:relative;z-index:2}
@media (max-width:760px){.w-titlebar.tb-solo{padding-top:12px;padding-bottom:52px}.w-titlebar.tb-solo + .wrap .det{margin-top:-26px}}

/* ===== v55 — home page: cinematic hero, live counters, property carousel, sliding tabs ===== */
/* hero */
.w-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.88);margin-bottom:14px;animation:heroIn 1s cubic-bezier(.2,.65,.2,1) .1s both}
.w-eyebrow::before{content:"";width:38px;height:1px;background:#79B8C1;transform-origin:right;animation:mkLine 1s cubic-bezier(.2,.65,.2,1) .3s both}
html[dir=ltr] .w-eyebrow::before{transform-origin:left}
.w-hero-copy h1.hw-title{animation:none}
.hw{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.14em 0 .24em;margin:-.14em 0 -.24em}
.hw>span{display:inline-block;transform:translate3d(0,120%,0);animation:hwUp 1.1s cubic-bezier(.2,.75,.2,1) both;animation-delay:calc(.35s + var(--i) * .1s)}
@keyframes hwUp{to{transform:none}}
.w-hero-copy p{animation-delay:.95s}
.w-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;animation:heroIn 1s cubic-bezier(.2,.65,.2,1) 1.15s both}
.hbtn{display:inline-flex;align-items:center;min-height:46px;padding:0 24px;border-radius:999px;border:1px solid rgba(255,255,255,.5);color:#fff;font-weight:600;font-size:14.5px;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .35s,color .35s,transform .35s,border-color .35s}
.hbtn:hover{background:#fff;color:#002F38;transform:translateY(-2px)}
.hbtn-s{background:#fff;color:#002F38;border-color:#fff}
.hbtn-s:hover{background:#DAEBEE;border-color:#DAEBEE}
.w-dots{gap:10px;bottom:24px}
.w-dots button,.w-dots button.on{position:relative;width:38px;height:20px;border:0;border-radius:0;background:none;padding:0;cursor:pointer}
.w-dots button::before,.w-dots button i{content:"";position:absolute;inset-inline:0;top:9px;height:2px;border-radius:2px}
.w-dots button::before{background:rgba(255,255,255,.3)}
.w-dots button i{background:#fff;transform:scaleX(0);transform-origin:right}
html[dir=ltr] .w-dots button i{transform-origin:left}
.w-dots button.on i{animation:dotFill 6s linear forwards}
@keyframes dotFill{to{transform:scaleX(1)}}
.w-scroll{position:absolute;z-index:3;bottom:22px;inset-inline-end:max(24px,calc((100vw - var(--wrap)) / 2 + 16px));display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.8);font-size:11px;letter-spacing:.14em;animation:heroIn 1s cubic-bezier(.2,.65,.2,1) 1.6s both}
.w-scroll i{width:1px;height:46px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.w-scroll i::after{content:"";position:absolute;inset-inline:0;top:0;height:40%;background:#fff;animation:scrollCue 2.2s cubic-bezier(.6,0,.2,1) infinite}
@keyframes scrollCue{from{transform:translateY(-100%)}to{transform:translateY(260%)}}
@media (max-width:760px){.w-scroll{display:none}.w-hero-cta{gap:10px;margin-top:18px}.hbtn{min-height:42px;padding:0 18px;font-size:13.5px}}

/* live counters in the about band */
.w-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-top:8px;padding-bottom:64px;text-align:center;color:#fff}
.w-stat{position:relative;padding:20px 10px;opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s cubic-bezier(.2,.65,.2,1),transform .9s cubic-bezier(.2,.65,.2,1);transition-delay:calc(var(--i) * .12s)}
.w-stats.go .w-stat{opacity:1;transform:none}
.w-stat+.w-stat::before{content:"";position:absolute;inset-block:18%;inset-inline-start:0;width:1px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.3),transparent)}
.w-stat b{display:block;font-size:clamp(36px,4.4vw,60px);font-weight:300;line-height:1.1;background:linear-gradient(180deg,#fff 30%,#8cc6cf);-webkit-background-clip:text;background-clip:text;color:transparent}
.w-stat span{display:block;margin-top:8px;font-size:13.5px;color:rgba(255,255,255,.75)}
@media (max-width:760px){
  .w-stats{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:44px}
  .w-stat:nth-child(3)::before{display:none}
  .w-stat:nth-child(-n+2)::after{content:"";position:absolute;bottom:0;inset-inline:12%;height:1px;background:linear-gradient(to right,transparent,rgba(255,255,255,.25),transparent)}
}

/* sliding pill tabs */
.w-tabs.has-ink{position:relative;isolation:isolate;padding:4px;border-radius:999px}
.w-tabs.has-ink button{position:relative;z-index:1;background:transparent;border-radius:999px;transition:color .45s}
.w-tabs.has-ink button.on{background:transparent;color:#fff}
.tab-ink{position:absolute;top:4px;bottom:4px;left:0;z-index:0;border-radius:999px;background:var(--navy);transition:transform .55s cubic-bezier(.2,.75,.2,1),width .55s cubic-bezier(.2,.75,.2,1);pointer-events:none}
.w-tabs-light.has-ink button{color:rgba(255,255,255,.85)}
.w-tabs-light.has-ink button.on{color:var(--navy)}
.w-tabs-light .tab-ink{background:#fff}

/* property carousel */
.pc{position:relative}
.pc-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px) / 4);gap:20px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:14px 4px 34px;margin:-14px -4px -10px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;transition:opacity .26s,transform .26s}
.pc-track::-webkit-scrollbar{display:none}
.pc-track>*{scroll-snap-align:start;min-width:0}
.pc-track.is-empty{display:block}
.pc-track.pc-out{opacity:0;transform:translate3d(0,12px,0)}
.pc-track .card{border-radius:20px;border:1px solid #E3ECEE;box-shadow:0 1px 3px rgba(0,47,56,.05),0 14px 34px rgba(0,47,56,.08);transition:transform .6s cubic-bezier(.2,.65,.2,1),box-shadow .5s,opacity .6s}
.pc-track .card:hover{transform:translateY(-6px);box-shadow:0 2px 6px rgba(0,47,56,.06),0 26px 54px rgba(0,47,56,.15)}
.pc-track .card .media{border-radius:19px 19px 0 0}
.pc-track .card .media::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.32) 50%,transparent 65%);transform:translateX(-120%);transition:transform 1s cubic-bezier(.2,.65,.2,1);pointer-events:none}
.pc-track .card:hover .media::after{transform:translateX(120%)}
.pc-track .card .pill{border-radius:999px;padding:4px 12px}
.pc-track .card .body{padding:16px 18px 18px}
.pc-track .card .price{position:relative;padding-top:10px;margin-top:4px}
.pc-track .card .price::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:linear-gradient(to right,transparent,rgba(0,47,56,.14) 20%,rgba(0,47,56,.14) 80%,transparent)}
.pc-track .sk-card{border-radius:20px}
.pc-track:not(.pc-go) .card:not(.sk-card){opacity:0}
.pc-track.pc-go.pc-anim .card{animation:pcIn 1s cubic-bezier(.2,.75,.2,1) backwards;animation-delay:calc(var(--i,0) * .09s)}
@keyframes pcIn{from{opacity:0;transform:translate3d(var(--pcx,-70px),0,0) scale(.94)}}
html[dir=ltr] .pc-track{--pcx:70px}
.pc-nav{position:absolute;top:calc(50% - 44px);z-index:3;width:50px;height:50px;border-radius:50%;border:0;background:#fff;box-shadow:0 10px 26px rgba(0,47,56,.18);display:grid;place-items:center;cursor:pointer;transition:transform .35s,opacity .35s,background .35s}
.pc-prev{inset-inline-start:-8px}.pc-next{inset-inline-end:-8px}
.pc-nav i{width:10px;height:10px;border-top:2px solid #002F38;border-right:2px solid #002F38;transition:border-color .35s}
.pc-prev i{transform:translateX(-2px) rotate(45deg)}.pc-next i{transform:translateX(2px) rotate(-135deg)}
html[dir=ltr] .pc-prev i{transform:translateX(2px) rotate(-135deg)}html[dir=ltr] .pc-next i{transform:translateX(-2px) rotate(45deg)}
.pc-nav:hover{transform:scale(1.08);background:#002F38}.pc-nav:hover i{border-color:#fff}
.pc-nav:disabled{opacity:0;pointer-events:none}
.pc-bar{position:relative;height:2px;max-width:220px;margin:4px auto 0;background:rgba(0,47,56,.12);border-radius:2px;overflow:hidden}
.pc-bar i{position:absolute;top:0;bottom:0;inset-inline-start:0;width:25%;border-radius:2px;background:linear-gradient(to left,#79B8C1,#002F38);transition:transform .2s ease-out,width .3s}
@media (max-width:1100px){.pc-track{grid-auto-columns:calc((100% - 40px) / 3)}}
@media (max-width:760px){
  .pc-nav{display:none}
  .pc-track{grid-auto-columns:80%;gap:14px;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
  .pc-track.pc-go .card:not(.pc-on):not(.sk-card){transform:scale(.94);opacity:.6}
}
@media (prefers-reduced-motion:reduce){.hw>span{transform:none;animation:none}.w-dots button.on i{animation:none;transform:none}.w-scroll i::after,.pc-track.pc-go.pc-anim .card{animation:none}}

/* ===== v56 — property page: one consistent details panel ===== */
.det.det2{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-areas:"gal buy" "info buy"}
.det2 .det-gal{grid-area:gal;min-width:0}
.det2 > aside{grid-area:buy;position:sticky;top:96px;align-self:start}
.det2 .det-info{grid-area:info;min-width:0}
.det-buy .subt{display:flex;align-items:center;gap:6px}
.det-info{padding:26px 28px}
.det-info h3{font-size:19px;font-weight:600;color:var(--deep);margin:0 0 6px}
.det-info h4{font-size:16px;font-weight:600;color:var(--deep);margin:26px 0 4px}
.dl,.feat{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
.dl-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 0;position:relative;font-size:14.5px}
.dl-row span{color:var(--muted)}
.dl-row b{font-weight:600;color:var(--ink);text-align:end}
.feat{list-style:none;margin:0;padding:0}
.feat li{position:relative;padding:12px 0;padding-inline-start:32px;font-size:14.5px;color:var(--ink);line-height:1.7}
.feat li::before{content:"";position:absolute;inset-inline-start:0;top:13px;width:21px;height:21px;border-radius:50%;background:#E4F1F3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007A89' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.dl-row::after,.feat li::after{content:"";position:absolute;bottom:0;inset-inline:0;height:1px;background:linear-gradient(to right,transparent,rgba(0,47,56,.13) 12%,rgba(0,47,56,.13) 88%,transparent)}
@media (max-width:960px){
  .det.det2{grid-template-columns:1fr;grid-template-areas:"gal" "buy" "info"}
  .det2 > aside{position:static}
}
@media (max-width:760px){
  .dl,.feat{grid-template-columns:1fr}
  .det-info{padding:20px 18px}
}
/* fix: stats row keeps its own grid inside the about band */
.w-about .wrap.w-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding-top:0;padding-bottom:64px}
@media (max-width:760px){.w-about .wrap.w-stats{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:44px}}

/* ===== v57 — services timeline reveals point by point ===== */
.w-timeline.tl-anim::after{content:"";position:absolute;top:12px;bottom:12px;inset-inline-start:6px;width:1px;background:linear-gradient(to bottom,#79B8C1,#fff);transform-origin:top;transform:scaleY(var(--tl,0));transition:transform .7s cubic-bezier(.2,.65,.2,1)}
.w-timeline.tl-anim li{opacity:0;transform:translate3d(-28px,0,0);filter:blur(5px);transition:opacity .8s cubic-bezier(.2,.65,.2,1),transform .9s cubic-bezier(.2,.75,.2,1),filter .8s}
html[dir=ltr] .w-timeline.tl-anim li{transform:translate3d(28px,0,0)}
.w-timeline.tl-anim li.tl-in{opacity:1;transform:none;filter:none}
.w-timeline.tl-anim li::before{z-index:1;transform:translateY(-50%) scale(0);transition:transform .55s cubic-bezier(.3,1.6,.5,1) .12s,background .5s .2s,border-color .5s .2s}
.w-timeline.tl-anim li.tl-in::before{transform:translateY(-50%) scale(1);background:#79B8C1;border-color:#fff}
.w-timeline.tl-anim li::after{content:"";position:absolute;inset-inline-start:0;top:50%;width:13px;height:13px;border-radius:99px;border:1.5px solid #79B8C1;opacity:0;transform:translateY(-50%);pointer-events:none}
.w-timeline.tl-anim li.tl-in::after{animation:tlPulse 1.2s ease-out .2s}
@keyframes tlPulse{0%{opacity:.9;transform:translateY(-50%) scale(1)}100%{opacity:0;transform:translateY(-50%) scale(3)}}

/* ===== v58 — property page comes alive while scrolling ===== */
.sq{opacity:0;transform:translate3d(0,18px,0);transition:opacity .7s cubic-bezier(.2,.65,.2,1),transform .85s cubic-bezier(.2,.75,.2,1)}
.sq.sq-in{opacity:1;transform:none}
.dl-row.sq,.feat li.sq{transform:translate3d(-22px,0,0)}
html[dir=ltr] .dl-row.sq,html[dir=ltr] .feat li.sq{transform:translate3d(22px,0,0)}
.dl-row.sq.sq-in,.feat li.sq.sq-in{transform:none}
.dl-row.sq::after,.feat li.sq::after{transform:scaleX(0);transform-origin:right;transition:transform 1.1s cubic-bezier(.2,.65,.2,1) .15s}
html[dir=ltr] .dl-row.sq::after,html[dir=ltr] .feat li.sq::after{transform-origin:left}
.dl-row.sq-in::after,.feat li.sq-in::after{transform:scaleX(1)}
.feat li.sq::before{transform:scale(0);transition:transform .55s cubic-bezier(.3,1.6,.5,1) .18s}
.feat li.sq-in::before{transform:scale(1)}
/* gallery enters with a soft curtain + settle */
.det2 .gallery .main{border-radius:20px;animation:galIn 1.3s cubic-bezier(.2,.75,.2,1) .1s both}
.det2 .gallery .main > img{animation:galZoom 2.4s cubic-bezier(.2,.65,.2,1) .1s both}
@keyframes galIn{from{clip-path:inset(0 0 100% 0 round 20px);opacity:.3}to{clip-path:inset(0 0 0 0 round 20px);opacity:1}}
@keyframes galZoom{from{transform:scale(1.1)}to{transform:none}}
.det2 .thumbs button{border-radius:12px;overflow:hidden}
/* softer corners across inner pages */
html.inner :is(.panel,.form-card,.aside-card,.empty){border-radius:20px}
.det-buy .btn{border-radius:14px}
@media (prefers-reduced-motion:reduce){.det2 .gallery .main,.det2 .gallery .main > img{animation:none}}

/* ===== v59 — staggered blocks: CTA ("ما لقيت اللي تبيه؟") and footer links arrive one by one ===== */
.stg{opacity:0;transform:translate3d(0,22px,0);transition:opacity .8s cubic-bezier(.2,.65,.2,1),transform .9s cubic-bezier(.2,.75,.2,1);transition-delay:var(--sd,0s)}
.stg.rv-in{opacity:1;transform:none}
.stg.stg-words{opacity:1;transform:none}
.stg-words .hw>span{transform:translate3d(0,120%,0);transition:transform 1s cubic-bezier(.2,.75,.2,1);transition-delay:calc(var(--sd,0s) + var(--i) * .08s)}
.stg-words.rv-in .hw>span{transform:none}
.ftr li.stg,.ftr .social a.stg{transform:translate3d(-16px,0,0)}
html[dir=ltr] .ftr li.stg,html[dir=ltr] .ftr .social a.stg{transform:translate3d(16px,0,0)}
.ftr li.stg.rv-in,.ftr .social a.stg.rv-in{transform:none}
.ftr .social a.stg{transform:scale(.6)}
.ftr .social a.stg.rv-in{transform:none;transition-timing-function:cubic-bezier(.3,1.5,.5,1)}
@media (prefers-reduced-motion:reduce){.stg,.stg-words .hw>span{opacity:1!important;transform:none!important;transition:none!important}}
/* v60 — reveal a touch more visibly, once the item is actually on screen */
.rv{transform:translate3d(0,30px,0);transition-duration:.9s}

/* ===== v62 — smoother scrolling, banners fade in when ready, Instagram 4:5 photos ===== */
/* page banners: brand colour first, photo fades in once decoded (no half-loaded flash) */
.w-banner{animation:none;background:#002F38;overflow:hidden}
.w-banner-img{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transform:scale(1.08);transition:opacity .9s ease,transform 2.4s cubic-bezier(.2,.65,.2,1)}
.w-banner.ld .w-banner-img{opacity:1;transform:none}
.w-banner::after{z-index:1}
/* lighter compositing on property cards */
.card .pill{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.card .pill.teal{background:rgba(0,47,56,.85)}
/* WhatsApp lift now keyed on the button itself */
@media (max-width:760px){.wa-float.sc-down{bottom:calc(78px + env(safe-area-inset-bottom,0px) + var(--vvb,0px))}}
/* no endless background animations on phones */
@media (max-width:760px){.lst-icon,html.inner .filters.fx::before{animation:none}}
/* Instagram carousel ratio (4:5) for property photos so posts fit with no empty edges */
.det2 .gallery .main{aspect-ratio:4/5;max-height:none}
.det2 .gallery .main > img{object-fit:cover}
.det2 .gallery .main.is-sold{aspect-ratio:4/5}
.det2 .thumbs button{aspect-ratio:4/5;height:auto;width:72px;flex:0 0 72px}
.det2 .thumbs button img{width:100%;height:100%;object-fit:cover}
@media (min-width:961px){
  .det.det2{grid-template-columns:minmax(0,520px) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"gal buy" "gal info"}
  .det2 > aside{position:static}
  .det2 .det-gal{position:sticky;top:96px;align-self:start}
  .det2 .dl{grid-template-columns:1fr}
}

/* ===== v63 — text arrives paragraph by paragraph (about, services) ===== */
.prose .pp{white-space:normal;margin:0 0 1.15em}
.prose .pp:last-child{margin-bottom:0}
.pp.rv{transform:translate3d(0,26px,0)}
@media (min-width:761px){.pp.rv{filter:blur(6px);transition-property:opacity,transform,filter}.pp.rv.rv-in{filter:none}}
.stg-words.rv,.about-intro > h2.rv{transform:none;opacity:1}

/* ===== v64 — property management service ===== */
.mg{margin-top:56px}
.mg-t{font-size:clamp(22px,2.2vw,28px);font-weight:300;color:var(--deep);margin:0 0 20px;text-align:center}
.mg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mg-it{display:flex;align-items:center;gap:14px;padding:20px;border-radius:20px;background:#fff;border:1px solid #E3ECEE;box-shadow:0 1px 3px rgba(0,47,56,.04),0 12px 30px rgba(0,47,56,.06);transition:opacity .7s cubic-bezier(.2,.65,.2,1),transform .55s cubic-bezier(.2,.65,.2,1),box-shadow .45s}
.mg-it:hover,.mg-it.sq.sq-in:hover{transform:translateY(-4px);box-shadow:0 2px 6px rgba(0,47,56,.06),0 22px 44px rgba(0,47,56,.12)}
.mg-ic{flex:0 0 52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#008BA0,#002F38)}
.mg-ic svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mg-it b{font-weight:600;font-size:15px;color:var(--deep);line-height:1.6}
.mg-it.sq{transform:translate3d(0,24px,0) scale(.96)}
.mg-it.sq.sq-in{transform:none}
.mg-it.sq-in .mg-ic{animation:mgPop .7s cubic-bezier(.3,1.5,.5,1) .1s backwards}
@keyframes mgPop{from{transform:scale(.4) rotate(-12deg);opacity:0}}
@media (max-width:960px){.mg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.mg-grid{grid-template-columns:1fr;gap:12px}.mg-it{padding:16px}}
/* three service tabs: scroll sideways on phones instead of wrapping */
.w-subnav .wrap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:clamp(20px,3vw,30px)}
.w-subnav .wrap::-webkit-scrollbar{display:none}
.w-subnav a{white-space:nowrap}

/* ===== v66 — property management page (services grid, steps, why-us band) ===== */
.mg-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.mg-it{flex-direction:column;align-items:flex-start;gap:14px;padding:22px}
.mg-it b{font-size:15.5px}
.mg-it p{margin:6px 0 0;font-size:13.5px;line-height:1.85;color:var(--muted)}
.mg-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;position:relative;counter-reset:none}
.mg-steps::before{content:"";position:absolute;top:27px;inset-inline:12.5%;height:2px;border-radius:2px;background:linear-gradient(to left,#79B8C1,#008BA0,#002F38);transform:scaleX(0);transform-origin:right;transition:transform 1.8s cubic-bezier(.2,.65,.2,1) .2s}
html[dir=ltr] .mg-steps::before{transform-origin:left}
.mg-steps.go::before{transform:scaleX(1)}
.mg-steps li{position:relative;text-align:center;padding:0 6px}
.mg-n{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:#fff;border:2px solid #008BA0;color:#002F38;font-weight:700;font-size:17px;box-shadow:0 0 0 8px #fff,0 10px 24px rgba(0,47,56,.12);transition:background .5s,color .5s}
.mg-steps li.sq-in .mg-n{background:linear-gradient(135deg,#008BA0,#002F38);color:#fff;border-color:transparent;animation:mgPop .7s cubic-bezier(.3,1.5,.5,1) backwards}
.mg-steps b{display:block;font-size:16px;color:var(--deep);font-weight:600}
.mg-steps p{margin:6px auto 0;font-size:13.5px;line-height:1.85;color:var(--muted);max-width:26ch}
.mg-why{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,#01404A,#002F38 55%);border-radius:24px;color:#fff;padding:clamp(28px,4vw,48px)}
.mg-why-icon{position:absolute;z-index:-1;inset-inline-end:-30px;bottom:-60px;width:clamp(200px,26vw,340px);height:auto;fill:#fff;opacity:.05}
.mg-why h3{font-size:clamp(22px,2.2vw,28px);font-weight:300;margin:0 0 18px}
.mg-why ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px}
.mg-why li{position:relative;padding-inline-start:34px;font-size:16px;line-height:1.7}
.mg-why li::before{content:"";position:absolute;inset-inline-start:0;top:3px;width:22px;height:22px;border-radius:50%;background:rgba(121,184,193,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2379B8C1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.mg-types-t{margin:28px 0 10px;font-size:13.5px;color:rgba(255,255,255,.65)}
.mg-types{display:flex;flex-wrap:wrap;gap:10px}
.mg-types span{padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);font-size:14px}
.mg-types span.sq{transform:scale(.85)}
.mg-types span.sq.sq-in{transform:none}
@media (max-width:1100px){.mg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .mg-grid{grid-template-columns:1fr}
  .mg-it{flex-direction:row;align-items:flex-start}
  .mg-steps{grid-template-columns:1fr;gap:18px}
  .mg-steps::before{top:28px;bottom:28px;inset-inline:auto;inset-inline-start:27px;width:2px;height:auto;transform:scaleY(0);transform-origin:top;background:linear-gradient(to bottom,#002F38,#008BA0,#79B8C1)}
  .mg-steps.go::before{transform:scaleY(1)}
  .mg-steps li{display:grid;grid-template-columns:56px 1fr;column-gap:16px;text-align:start;padding:0}
  .mg-n{grid-row:span 2;margin:0}
  .mg-steps p{margin:4px 0 0;max-width:none}
  .mg-why ul{grid-template-columns:1fr}
}
.mg-tel{display:inline-flex;align-items:center;gap:12px;margin-top:26px;padding:12px 20px 12px 24px;border-radius:999px;background:#fff;color:#002F38;box-shadow:0 12px 28px rgba(0,0,0,.25);transition:transform .35s cubic-bezier(.2,.65,.2,1)}
.mg-tel:hover{transform:translateY(-3px)}
.mg-tel svg{width:22px;height:22px;stroke:#008BA0;fill:none;stroke-width:1.8}
.mg-tel small{display:block;font-size:11.5px;color:#5D777D;line-height:1.3}
.mg-tel b{display:block;font-size:20px;letter-spacing:.04em;line-height:1.3}
/* v69 — management page sections animate in */
.mg-why.rv{transform:translate3d(0,40px,0) scale(.97)}
.mg-why.rv.rv-in{transform:none}
.mg-t.stg-words{position:relative;padding-bottom:12px}
.mg-t.stg-words::after{content:"";position:absolute;bottom:0;left:50%;width:56px;height:2px;margin-left:-28px;border-radius:2px;background:linear-gradient(to left,#79B8C1,#008BA0);transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.65,.2,1) .5s}
.mg-t.stg-words.rv-in::after{transform:scaleX(1)}
.mg-tel.stg{transform:translate3d(0,20px,0) scale(.9)}
.mg-tel.stg.rv-in{transform:none}
.mg-tel.stg.rv-in:hover{transform:translateY(-3px)}

/* ===== v71 — cinematic video headers ===== */
.w-slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
.w-slide video.on{opacity:1}
.w-dots button.on i{animation:dotFill var(--dur,6s) linear forwards}
.w-banner-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.w-banner-vid.on{opacity:1}
/* v76 — phone hero stays crisp: no zoom animation on the photo layer */
@media (max-width:900px){.w-slide,.w-slide.on{animation:none;transform:none}}

/* ===== v78 — dashboard listings: availability tabs + page size ===== */
.av-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 14px}
.av-tabs button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;color:var(--deep);border-radius:999px;padding:8px 16px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.av-tabs button b{min-width:24px;height:22px;padding:0 7px;border-radius:99px;background:#EEF3F4;color:var(--deep);font-size:12px;display:inline-grid;place-items:center}
.av-tabs button.on{background:var(--deep);color:#fff;border-color:var(--deep)}
.av-tabs button.on b{background:rgba(255,255,255,.18);color:#fff}
.av-tabs button:hover:not(.on){border-color:var(--deep)}
.results-mini{font-size:13px;margin:-4px 0 10px}

/* v80 — property video (Instagram) */
.card .media .vid-badge{position:absolute;inset-inline-start:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:5px 10px 5px 8px;border-radius:999px;background:rgba(10,22,40,.72);color:#fff;font-size:12px;font-weight:700;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.card .media .vid-badge svg{width:14px;height:14px;fill:#fff}
.price .ask,.bigprice .ask{font-size:.8em;font-weight:700;color:var(--teal,#0f7c86)}
.price-note{margin:4px 0 0;color:var(--muted,#5b6b7c);font-size:14px}
.gallery .main.is-video{background:linear-gradient(150deg,#0b2a3c 0%,#0f4f5c 55%,#11707a 100%)}
.vid-poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:#fff;text-decoration:none;overflow:hidden}
.vid-poster::before{content:"";position:absolute;inset:-20%;background:radial-gradient(closest-side,rgba(255,255,255,.14),transparent 70%);animation:vpGlow 6s ease-in-out infinite alternate}
.vid-poster .vp-logo{position:absolute;top:18px;inset-inline-end:18px;opacity:.9}
.vid-poster .vp-3d{width:86px;height:auto}
.vid-poster .vp-play{position:relative;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.55);box-shadow:0 0 0 0 rgba(255,255,255,.35);animation:vpPulse 2.2s ease-out infinite;transition:transform .25s ease}
.vid-poster .vp-play svg{width:38px;height:38px;fill:#fff;margin-inline-start:5px}
[dir=rtl] .vid-poster .vp-play svg{margin-inline-start:0;margin-inline-end:-5px}
.vid-poster:hover .vp-play{transform:scale(1.07)}
.vid-poster .vp-cap{position:relative;text-align:center;display:grid;gap:6px}
.vid-poster .vp-cap b{font-size:20px}
.vid-poster .vp-cap small{display:inline-flex;align-items:center;gap:6px;justify-content:center;font-size:13px;opacity:.85}
.vid-poster .vp-cap small svg,.vid-bar .vb-ig svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
@keyframes vpPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.35)}100%{box-shadow:0 0 0 22px rgba(255,255,255,0)}}
@keyframes vpGlow{from{transform:translate(-6%,-4%)}to{transform:translate(6%,5%)}}
.gallery .main .vid-chip{position:absolute;inset-inline-start:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:8px 14px 8px 10px;border-radius:999px;background:rgba(10,22,40,.75);color:#fff;font-weight:700;font-size:14px;text-decoration:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.gallery .main .vid-chip svg{width:16px;height:16px;fill:#fff}
.vid-bar{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;border-radius:16px;background:linear-gradient(90deg,#0b2a3c,#11707a);color:#fff;text-decoration:none;box-shadow:0 10px 24px -14px rgba(11,42,60,.6);transition:transform .2s ease,box-shadow .2s ease}
.vid-bar:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(11,42,60,.7)}
.vid-bar .vb-play{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18)}
.vid-bar .vb-play svg{width:18px;height:18px;fill:#fff}
.vid-bar .vb-txt{display:grid;gap:2px;flex:1}
.vid-bar .vb-txt b{font-size:15px}.vid-bar .vb-txt small{font-size:12.5px;opacity:.85}
.vid-bar .vb-ig{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:radial-gradient(circle at 30% 110%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%);color:#fff}
@media (prefers-reduced-motion:reduce){.vid-poster::before,.vid-poster .vp-play{animation:none}}