*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:#f7f7f2;color:#202020;font-family:'IBM Plex Sans Arabic',Arial,sans-serif;-webkit-font-smoothing:antialiased}
main{width:min(440px,calc(100% - 40px));margin:auto;padding:60px 0 40px}
header{text-align:center;margin-bottom:32px}
.logo{width:106px;height:116px;object-fit:contain;display:block;margin:0 auto 24px;filter:brightness(0)}
h1{font-size:22px;line-height:1.5;font-weight:500;margin:0;white-space:nowrap}
.links{display:grid;gap:14px}
.link{min-height:82px;padding:11px 14px;border-radius:14px;background:#fff;color:#202020;display:flex;align-items:center;gap:14px;text-decoration:none;font-size:16px;font-weight:500;border:1px solid #e5e5df;transition:border-color .15s,box-shadow .15s}
.link>span:not(.arrow):not(.company-image){flex:1;text-align:right;line-height:1.6}
.arrow{width:21px;font-family:Arial,sans-serif;font-size:17px;text-align:center;color:#8a8a84}
.link-image{display:block;width:58px;height:58px;flex:0 0 58px;border-radius:9px;overflow:hidden}
.compound-image{object-fit:cover;object-position:center}
.company-image{background:transparent;padding:3px;display:grid;place-items:center}
.company-image img{width:100%;height:100%;max-height:52px;object-fit:contain;filter:brightness(0)}
.link:hover{border-color:#b9b9ad;box-shadow:0 3px 12px #00000006}
.socials{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:30px 8px 0}
.social{color:#262626;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0}
.app-icon{width:40px;height:40px;display:grid;place-items:center}
.app-icon svg{width:25px;height:25px}
.social strong{font-size:13px;line-height:1.5;font-weight:500;color:#343434;white-space:nowrap}
.social small{font-size:10px;line-height:1.4;color:#96968d;margin:-5px 0 0}
.social.active small{visibility:hidden}
.social.active:hover{opacity:.65}
.pending{cursor:default}
a:focus-visible{outline:2px solid #555;outline-offset:5px}
@media(max-width:480px){main{padding-top:42px}h1{font-size:clamp(17px,5vw,22px)}.link{font-size:15px;gap:12px}.socials{margin-left:0;margin-right:0}}
@media(max-width:360px){main{width:calc(100% - 32px)}.link{font-size:14px;gap:10px}.link-image{width:50px;height:54px;flex-basis:50px}.social strong{font-size:12px}}

#brochure-view[hidden]{display:none}#brochure-view{position:fixed;inset:0;background:#eaeae5;z-index:10;overflow-y:auto;overscroll-behavior:contain}.viewer-bar{position:sticky;top:0;background:#fff;border-bottom:1px solid #ddd;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;z-index:1;font-size:13px}.viewer-bar button,.viewer-bar a{font:inherit;color:#222;white-space:nowrap}.viewer-bar button{background:#f4f4ef;border:1px solid #e1e1d8;border-radius:8px;padding:9px 12px;cursor:pointer}.viewer-bar a{text-decoration:none}.viewer-bar button:focus-visible{outline:2px solid #555;outline-offset:3px}#brochure-pages{max-width:1200px;margin:auto;padding:18px;display:grid;gap:16px}#brochure-pages img{display:block;width:100%;height:auto;background:white;box-shadow:0 2px 8px #0000000a}@media(max-width:540px){.viewer-bar{padding:12px;font-size:12px;gap:8px}.viewer-bar>span{display:none}#brochure-pages{padding:8px;gap:8px}}
header{margin-bottom:18px}.socials{display:flex;justify-content:center;gap:14px;margin:0 0 30px}.social{width:44px;height:44px;gap:0}.app-icon{width:44px;height:44px;border:1px solid #e5e5df;border-radius:12px;background:#fff}.app-icon svg{width:23px;height:23px}
.map-icon{width:58px;flex:0 0 58px!important;height:40px;display:grid;place-items:center;color:#73776b}.map-icon svg{width:25px;height:25px}.map-pending{min-height:64px;background:transparent}.map-pending small{font-size:10px;color:#8b8e84;white-space:nowrap}.map-pending:hover{box-shadow:none;border-color:#e5e5df}@media(max-width:360px){.map-icon{width:50px;flex-basis:50px!important}.map-pending{font-size:12px}}
/* Dark brown page theme */
body{background:#30241f;color:#f5f0e9}
header h1{color:#f5f0e9}
.logo{filter:none}
.map-pending{background:transparent;border-color:#69584e;color:#f5f0e9}
.map-pending .map-icon{color:#d1c1b4}
.map-pending small{color:#bdab9d}
.map-pending:hover{border-color:#69584e}
.logo{filter:brightness(0);background:transparent}header{position:relative}header:before{content:"";display:block;position:absolute;width:130px;height:136px;top:-10px;left:50%;transform:translateX(-50%);background:#f7f7f2;border-radius:16px;z-index:-1}header{isolation:isolate}
/* Warm cards aligned with the brown background. */
header:before{display:none}
.link{background:#493930;border-color:#665044;color:#faf4ec}
.link .arrow{color:#cbb8a6}
.link:hover{border-color:#a78a73;box-shadow:none}
.map-pending{background:#3b2d26;border-color:#665044;color:#faf4ec}
.map-pending:hover{border-color:#806651}
.map-pending .map-icon{color:#d5c1ad}
.map-pending small{color:#bca58f}
.app-icon{background:#493930;border-color:#665044;color:#faf4ec}
.company-image{background:transparent}
.logo,.company-image img{filter:brightness(0) invert(1)}
/* Muted espresso palette. */
body{background:#292522}
.link,.app-icon{background:#403a35;border-color:#575048}
.link:hover{border-color:#918477}
.map-pending{background:#332e2a;border-color:#575048}
.map-pending:hover{border-color:#74695f}
.link .arrow,.map-pending .map-icon{color:#c6bcb0}
.map-pending small{color:#b1a69a}
/* Chocolate brown palette. */
body{background:#563820}
.link,.app-icon{background:#6b4a30;border-color:#846145}
.link:hover{border-color:#b58b63}
.map-pending{background:#604027;border-color:#846145}
.map-pending:hover{border-color:#a17a55}
.link .arrow,.map-pending .map-icon{color:#e1c6a9}
.map-pending small{color:#cfaf8d}
/* Soft, desaturated brown. */
body{background:#66564b}
.link,.app-icon{background:#78675b;border-color:#918073}
.link:hover{border-color:#b9a797}
.map-pending{background:#6e5e52;border-color:#918073}
.map-pending:hover{border-color:#aa9685}
.link .arrow,.map-pending .map-icon{color:#e7dbcf}
.map-pending small{color:#d5c5b6}
/* Approved brand palette. */
:root{--page-bg:#2A211C;--card-bg:#3D3029;--card-border:#5C4A3D;--text-main:#F3ECE3;--text-secondary:#B8A898;--accent:#C9A97E}
body{background:var(--page-bg);color:var(--text-main)}
header h1{color:var(--text-main)}
.link,.map-pending,.app-icon{background:var(--card-bg);border-color:var(--card-border);color:var(--text-main)}
.link .arrow{color:var(--accent)}
.map-pending .map-icon{color:var(--text-main)}
.map-pending small,.social small{color:var(--text-secondary)}
.link:hover,.map-pending:hover{border-color:var(--accent)}
.social.active:hover{opacity:1}
.social.active:hover .app-icon,.link:hover .map-icon{color:var(--accent)}
a:focus-visible,.viewer-bar button:focus-visible{outline-color:var(--accent)}
.map-link .map-icon{color:var(--text-main)}.map-link:hover .map-icon{color:var(--accent)}
.map-link .map-icon{height:58px;border-radius:11px;background:#F3ECE3;display:grid;place-items:center}.map-link .map-icon svg{width:29px;height:36px;transition:transform .15s}.map-link:hover .map-icon svg{transform:translateY(-2px)}
.map-link .map-icon{background:var(--card-bg)}
.map-link .map-icon img{width:52px;height:52px;object-fit:contain;transition:transform .15s}.map-link:hover .map-icon img{transform:translateY(-2px)}
.map-link .map-icon img{width:32px;height:38px}
.company-image img{width:85%;height:85%;max-height:44px}
.arrow{display:grid;place-items:center;flex-shrink:0}.arrow svg{width:19px;height:19px;display:block}#brochure-back{display:inline-flex;align-items:center;gap:7px}#brochure-back svg{width:18px;height:18px;flex-shrink:0}.viewer-bar{padding-bottom:16px}.viewer-title{flex:1;text-align:center}.page-position{display:flex;align-items:center;gap:7px;direction:ltr;white-space:nowrap;font-size:12px;color:#80766b;font-variant-numeric:tabular-nums;min-width:56px;justify-content:center}#page-current{font-weight:500;color:#3D3029}.page-divider{color:#b7ada2}.reading-track{position:absolute;bottom:0;left:0;right:0;height:3px;background:#e9e3dc;overflow:hidden}#reading-fill{width:100%;height:100%;background:#C9A97E;transform:scaleX(0);transform-origin:right center;transition:transform .12s linear}@media(prefers-reduced-motion:reduce){#reading-fill{transition:none}}@media(max-width:540px){.page-position{font-size:11px}.viewer-bar{padding-bottom:14px}}

/* Requested typography: Google Fonts, no light weights. */
body{font-family:'IBM Plex Sans Arabic',Arial,sans-serif;font-weight:400}
header h1{font-family:'Noto Kufi Arabic',Arial,sans-serif;font-weight:700;font-size:24px;line-height:1.4;white-space:normal;text-wrap:balance}
.link,.map-pending{font-family:'IBM Plex Sans Arabic',Arial,sans-serif;font-weight:500;font-size:17px}
.link small,.map-pending small,.social small,.page-position,header p{font-family:'IBM Plex Sans Arabic',Arial,sans-serif;font-weight:400}
button{font-family:'IBM Plex Sans Arabic',Arial,sans-serif;font-weight:500}

header h1{font-family:"IBM Plex Sans Arabic",sans-serif;font-weight:600;font-size:22px;line-height:1.6;color:#F3ECE3}

/* Project WhatsApp button inside the brochure viewer. */
.brochure-wa[hidden]{display:none}
.brochure-wa{position:sticky;bottom:max(16px,env(safe-area-inset-bottom));z-index:2;display:flex;align-items:center;gap:14px;width:min(420px,calc(100% - 32px));margin:0 auto 16px;padding:10px 12px 10px 16px;border-radius:18px;background:rgba(42,33,28,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid #5C4A3D;color:#F3ECE3;text-decoration:none;font-family:'IBM Plex Sans Arabic',Arial,sans-serif;box-shadow:0 12px 32px rgba(20,14,10,.35),0 2px 6px rgba(20,14,10,.2);transition:border-color .2s,transform .2s,box-shadow .2s}
.wa-badge{width:46px;height:46px;flex:0 0 46px;border-radius:14px;background:#25D366;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.wa-badge svg{width:25px;height:25px}
.wa-text{flex:1;display:flex;flex-direction:column;gap:1px;text-align:right;min-width:0}
.wa-kicker{font-size:12px;font-weight:400;color:#B8A898;line-height:1.5}
.wa-title{font-size:16px;font-weight:600;color:#F3ECE3;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-go{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;color:#C9A97E;border:1px solid #5C4A3D;transition:background .2s,color .2s}
.wa-go svg{width:18px;height:18px}
.brochure-wa:hover{border-color:#C9A97E;transform:translateY(-2px);box-shadow:0 16px 36px rgba(20,14,10,.4)}
.brochure-wa:hover .wa-go{background:#C9A97E;color:#2A211C;border-color:#C9A97E}
.brochure-wa:focus-visible{outline:2px solid #C9A97E;outline-offset:3px}
#brochure-pages{padding-bottom:8px}
@media(max-width:360px){.wa-title{font-size:15px}.wa-badge{width:42px;height:42px;flex-basis:42px}}

/* Status ribbons on brochure pages (sold / available). */
.brochure-page{position:relative;overflow:hidden;container-type:inline-size}
.status-ribbon{position:absolute;top:6.5cqw;width:38cqw;color:#fff;text-align:center;font-family:'IBM Plex Sans Arabic',Arial,sans-serif;font-weight:700;font-size:3.6cqw;line-height:1;padding:1.3cqw 0 1.5cqw;box-shadow:0 .4cqw 1.2cqw rgba(0,0,0,.28);border-top:.25cqw solid rgba(255,255,255,.35);border-bottom:.25cqw solid rgba(255,255,255,.35);pointer-events:none;user-select:none}
.status-ribbon.left{left:-10cqw;transform:rotate(-45deg)}
.status-ribbon.right{right:-10cqw;transform:rotate(45deg)}
.status-ribbon.sold{background:#9E2A2B}
.status-ribbon.available{background:#1F7A4D}