/* Calm, light look built from the project's own colours: warm stone, deep sky navy, sand gold. */
:root{
  --bg:#f6f3ed; --surface:#ffffff; --ink:#1c2b36; --muted:#5a6873; --line:#e4dfd5;
  --navy:#16324a; --navy-soft:#e9eef2; --gold:#8a6a1f; --gold-soft:#f5efe0; --green:#157347; --red:#a23b2e; --red-soft:#faf0ee;
  --display:"Readex Pro","IBM Plex Sans Arabic",Tahoma,sans-serif; --body:"IBM Plex Sans Arabic",Tahoma,"Segoe UI",sans-serif;
  color-scheme:light;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--body)}
h1,h2,p,ul,dl,dd,figure{margin:0;padding:0}
h2{font:700 1.05rem/1.4 var(--display);color:var(--navy);margin-bottom:10px}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit}

/* header */
.top{position:sticky;top:0;z-index:6;background:var(--surface);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 16px;min-height:58px}
.topName{font:700 1.08rem var(--display);color:var(--navy)}
.topBtn{min-height:44px;padding:4px 16px;background:var(--navy-soft);border:0;border-radius:999px;color:var(--navy);font-weight:700;cursor:pointer}
.hero{position:relative;height:280px;overflow:hidden;background:var(--navy);box-shadow:0 10px 26px rgb(22 50 74 / .18)}
.hero img{width:100%;height:100%;object-fit:cover;object-position:center 50%;transform:scale(1.18);transform-origin:center 66%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(16 37 54 / .92),rgb(16 37 54 / .55) 46%,rgb(16 37 54 / .04) 78%)}
.heroText{position:absolute;inset:auto 18px 16px;z-index:1;color:#fff;max-width:600px;margin-inline:auto;text-shadow:0 1px 8px rgb(10 25 38 / .55)}
.brand{display:block;font:500 .86rem var(--display);opacity:.95}
.heroText h1{font:700 1.65rem/1.3 var(--display);margin:2px 0}
.heroText p{font-size:.98rem;opacity:.96}

.stack{display:grid;gap:14px;min-width:0}
h2.big{font-size:1.28rem;margin-bottom:12px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.facts div{background:var(--bg);border-radius:12px;padding:12px 4px;display:grid;justify-items:center;gap:2px;text-align:center;color:var(--navy)}
.facts b{font-weight:700;color:var(--ink);font-size:.98rem}
.facts span{font-size:.84rem;color:var(--muted)}
.cta,.backBtn{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;border:0;border-radius:11px;background:var(--navy);color:#fff;font:700 1.05rem var(--display);cursor:pointer;margin-top:14px}
.cta:focus-visible,.topBtn:focus-visible,.backBtn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.perks{list-style:none;display:grid;gap:14px}
.perks li{display:flex;gap:12px;align-items:flex-start;color:var(--gold)}
.perks svg{flex:0 0 auto;margin-top:3px}
.perks b{display:block;color:var(--ink);font-weight:700}
.perks span{display:block;color:var(--muted);font-size:.93rem}
.steps{list-style:none;counter-reset:s;display:grid;gap:0}
.steps li{counter-increment:s;position:relative;padding:0 50px 18px 0;display:grid;gap:1px}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:counter(s,arabic-indic);position:absolute;inset-inline-start:0;top:0;width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font:700 1rem var(--display)}
.steps li::after{content:"";position:absolute;inset-inline-start:17px;top:40px;bottom:4px;width:2px;background:var(--line)}
.steps li:last-child::after{display:none}
.steps b{font-weight:700}
.steps span{color:var(--muted);font-size:.93rem}
.pickHead h2{margin-bottom:2px}
#pick{scroll-margin-top:66px}
#pick h2:not(.big){font-size:.98rem;margin-bottom:8px}
.faqSec{display:grid;gap:2px}
.faq .dbody p{color:var(--muted)}
.faq .dbody b{color:var(--gold);white-space:nowrap}
.faq .dt b{font-size:.98rem}
.endCta{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:10px;text-align:center;box-shadow:0 4px 18px rgb(22 50 74 / .06)}
.endCta>b{font:700 1.2rem var(--display);color:var(--navy)}
.waAsk{color:var(--green);font-weight:700;min-height:44px;display:flex;align-items:center;justify-content:center}
.backBtn{margin-top:0;background:var(--navy-soft);color:var(--navy)}

.wrap{max-width:600px;margin:0 auto;padding:18px 14px 28px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 4px 18px rgb(22 50 74 / .06)}

/* choices */
#pick{display:grid;gap:14px}
.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.chips.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.chips+.chips{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.moreUnits{width:100%;min-height:50px;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--navy-soft);border:1.5px solid var(--navy);border-radius:10px;color:var(--navy);font:700 1rem var(--display);cursor:pointer}
.moreUnits::after{content:"";width:9px;height:9px;border-inline-end:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:translateY(-2px) rotate(-45deg)}
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.chip,.plan{min-height:44px;padding:6px 4px;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;cursor:pointer;font-weight:500;line-height:1.3}
.chip[aria-pressed="true"],.plan[aria-pressed="true"],.unitBtn[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.unitBtns{display:grid;gap:8px}
.unitBtn{width:100%;min-height:48px;padding:6px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;cursor:pointer;text-align:right}
.unitBtn b{font-weight:700;direction:ltr}
.unitBtn small{font-size:.85rem;opacity:.8;margin-inline-start:6px}
.unitBtn span:last-child{font-weight:700;white-space:nowrap}
select{width:100%;min-height:50px;font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:8px 12px}
.chip:focus-visible,.plan:focus-visible,.unitBtn:focus-visible,select:focus-visible,summary:focus-visible,.wa:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* the answer */
.answer{border:1.5px solid var(--navy);display:grid;gap:4px}
.unitLine{color:var(--muted);font-size:.92rem;margin-bottom:8px}
.mainLabel{font:700 1rem var(--display);color:var(--navy)}
.mainNum{color:var(--gold);line-height:1.2}
.mainNum b{font:700 2.3rem/1.2 var(--display)}
.mainNum span{font-size:1rem}
.mainNote{color:var(--muted);font-size:.9rem}
.rows{margin-top:12px;border-top:1px solid var(--line)}
.rows div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.rows dt small{display:block;color:var(--muted);font-size:.84rem}
.rows dd{font-weight:700;white-space:nowrap}
.wa{display:flex;align-items:center;justify-content:center;min-height:54px;background:var(--green);color:#fff;font:700 1.05rem var(--display);text-decoration:none;border-radius:11px;padding:8px 14px;text-align:center}
.answer .wa{margin-top:14px}
.waBar{position:fixed;inset:auto 0 0;z-index:5;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgb(22 50 74 / .1);padding:8px 14px calc(8px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:center;gap:12px}
.waBar small{display:block;color:var(--muted);font-size:.82rem;line-height:1.2}
.waBar b{font:700 1.1rem var(--display);color:var(--gold)}
.waBar .wa{min-height:46px;font-size:.95rem;flex:0 0 auto}
body.barOn{padding-bottom:70px}

/* sold units */
.soldout{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:0 4px 18px rgb(22 50 74 / .06);display:grid;gap:10px}
.soldHead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.soldHead h2{color:var(--red);margin:0}
.soldBtn{flex:0 0 auto;min-height:40px;padding:4px 14px;background:var(--surface);border:1.5px solid var(--red);border-radius:9px;color:var(--red);font-weight:700;font-size:.92rem;cursor:pointer}
.soldBtn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.soldGrid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.soldTile{background:var(--red);color:#fff;border-radius:9px;padding:8px 2px;text-align:center;display:grid;gap:1px;line-height:1.35}
.soldTile s{text-decoration-color:rgb(255 255 255 / .75);text-decoration-thickness:1.5px}
.soldTile .code{font-weight:700;font-size:.78rem;direction:ltr}
.soldTile .area{font-size:.8rem}
.soldTile .price{font-size:.76rem;opacity:.95}

/* the unit */
.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
.specs div{background:var(--bg);border-radius:10px;padding:8px 12px}
.specs span{display:block;color:var(--muted);font-size:.82rem}
.specs b{font-weight:700}
.fig{display:grid;gap:6px;margin-top:12px}
.zoomable{display:block;width:100%;padding:0;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:zoom-in}
.zoomable img{width:100%;height:auto}
figcaption,.note{color:var(--muted);font-size:.88rem}

/* more details */
.more{display:grid;gap:8px}
.drop{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.drop summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;min-height:56px}
.drop summary::-webkit-details-marker{display:none}
.dt b{display:block;font:700 1rem var(--display);color:var(--navy)}
.dt small{display:block;color:var(--muted);font-size:.84rem}
.chev{flex:0 0 auto;width:10px;height:10px;border-inline-end:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(-45deg);transition:transform .15s}
.drop[open] .chev{transform:rotate(135deg)}
.dbody{padding:0 16px 16px;display:grid;gap:10px}
.sched{display:grid}
.sched h3{font:700 .95rem var(--display);color:var(--navy);background:var(--navy-soft);border-radius:7px;padding:4px 10px;margin:10px 0 2px}
.schedRow{display:flex;justify-content:space-between;gap:12px;padding:8px 2px;border-bottom:1px solid var(--line)}
.schedRow small{display:block;color:var(--muted);font-size:.85rem}
.schedRow>b{white-space:nowrap}
.schedRow.big{background:var(--gold-soft);border-radius:7px;padding-inline:8px}
.schedTotal{display:flex;justify-content:space-between;gap:12px;padding:10px 8px;margin-top:8px;background:var(--navy);color:#fff;border-radius:8px;font-weight:700}
.notes{padding-inline-start:18px;display:grid;gap:7px;font-size:.93rem}
.videos,.photos,.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:8px}
.videos{grid-template-columns:minmax(0,1fr)}
.videos figure{display:grid;gap:4px}
.videos video{width:100%;border-radius:9px;background:#000}
.videos figcaption{font-size:.84rem}
.photos button{padding:0;border:0;background:none;cursor:zoom-in}
.photos img,.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;cursor:zoom-in}

/* zoomed picture */
.lightbox{position:fixed;inset:0;z-index:10;background:rgb(10 20 30 / .94);display:flex;flex-direction:column}
.lbBar{display:flex;gap:8px;justify-content:flex-end;padding:10px 12px}
.lbBar button{min-width:46px;min-height:44px;background:#fff;color:var(--navy);border:0;border-radius:9px;font-weight:700;padding:0 14px;cursor:pointer}
.lbScroll{flex:1;overflow:auto;display:flex;align-items:safe center;justify-content:safe center;padding:8px}
.lbScroll img{height:auto;max-width:none}

@media (min-width:640px){
  .hero{height:340px}
  .heroText h1{font-size:2.1rem}
  .heroText{inset-inline:calc(50% - 286px)}
  .chips{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.chev{transition:none}}

/* direct allocation: plain words and one highlight */
.plain{margin-bottom:16px;font-weight:500}
.saveBox{background:var(--gold-soft);border-radius:12px;padding:12px 14px;margin-bottom:16px;display:grid;gap:2px;text-align:center}
.saveBox span{font:700 .95rem var(--display);color:var(--gold)}
.saveBox b{font:700 1.15rem/1.45 var(--display);color:var(--navy)}
.perks span,.steps span,.faq .dbody p{color:var(--ink);font-weight:500;font-size:1rem}