/* =====================================================================
   Haramain Properties - Design System
   Luxury advisory / property portal aesthetic
   Palette: deep emerald, gold, ivory, charcoal
   ===================================================================== */

:root{
  --green-900:#062b23;
  --green-800:#0b3b32;
  --green-700:#0e4d3f;
  --green-600:#12604f;
  --green-100:#e4efe9;
  --gold-600:#a9812f;
  --gold-500:#c9a24b;
  --gold-400:#d9be7e;
  --gold-100:#f3e9d2;
  --ivory:#fbf8f1;
  --cream:#f6f0e4;
  --sand:#efe7d6;
  --ink:#1b1c19;
  --ink-soft:#43463f;
  --muted:#6d7069;
  --line:#e6ded0;
  --white:#ffffff;

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;

  --maxw:1200px;
  --radius:4px;
  --shadow-sm:0 2px 10px rgba(6,43,35,.06);
  --shadow-md:0 14px 40px rgba(6,43,35,.12);
  --shadow-lg:0 30px 70px rgba(6,43,35,.18);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--ivory);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:var(--green-700);text-decoration:none;transition:color .2s var(--ease);}
a:hover{color:var(--gold-600);}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;color:var(--green-800);line-height:1.12;letter-spacing:.2px;margin:0 0 .5em;}
h1{font-size:clamp(2.6rem,5.5vw,4.4rem);}
h2{font-size:clamp(2rem,4vw,3rem);}
h3{font-size:clamp(1.35rem,2.4vw,1.9rem);}
p{margin:0 0 1.1em;}
.eyebrow{
  font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-600);margin:0 0 1rem;display:inline-block;
}
.eyebrow--light{color:var(--gold-400);}
.lead{font-size:1.2rem;color:var(--ink-soft);}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.section{padding:96px 0;}
.section--tight{padding:64px 0;}
.center{text-align:center;}
.measure{max-width:720px;margin-left:auto;margin-right:auto;}

/* --- Buttons --- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;cursor:pointer;
  font-family:var(--sans);font-weight:500;font-size:.95rem;letter-spacing:.04em;
  padding:15px 30px;border-radius:var(--radius);border:1px solid transparent;
  transition:all .25s var(--ease);text-transform:uppercase;line-height:1;
}
.btn--gold{background:var(--gold-500);color:var(--green-900);border-color:var(--gold-500);}
.btn--gold:hover{background:var(--gold-400);color:var(--green-900);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn--green{background:var(--green-800);color:var(--ivory);border-color:var(--green-800);}
.btn--green:hover{background:var(--green-700);color:var(--white);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn--ghost{background:transparent;color:var(--green-800);border-color:var(--line);}
.btn--ghost:hover{border-color:var(--green-700);color:var(--green-700);background:var(--white);}
.btn--ghost-light{background:transparent;color:var(--ivory);border-color:rgba(251,248,241,.4);}
.btn--ghost-light:hover{border-color:var(--gold-400);color:var(--gold-400);}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;}

/* --- Gold rule / motif --- */
.rule{width:64px;height:2px;background:var(--gold-500);border:0;margin:0 0 1.4rem;}
.rule--center{margin-left:auto;margin-right:auto;}
.diamond{color:var(--gold-500);font-size:.8rem;letter-spacing:.5em;}

/* ============ HEADER ============ */
.site-header{position:sticky;top:0;z-index:60;background:rgba(251,248,241,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.topbar{background:var(--green-900);color:var(--gold-100);font-size:.8rem;letter-spacing:.06em;}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:9px;padding-bottom:9px;}
.topbar a{color:var(--gold-200,#e9d9b4);}
.topbar__note{opacity:.85;}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 0;}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);}
.brand__mark{width:42px;height:42px;flex:none;}
.brand__name{display:flex;flex-direction:column;line-height:1;}
.brand__name b{font-size:1.3rem;font-weight:600;color:var(--green-800);letter-spacing:.5px;}
.brand__name span{font-family:var(--sans);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-600);margin-top:5px;}
.menu{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;}
.menu a{font-family:var(--sans);font-size:.9rem;font-weight:500;color:var(--ink-soft);letter-spacing:.02em;white-space:nowrap;}
.menu a:hover{color:var(--green-700);}
.nav__cta{display:flex;align-items:center;gap:14px;}
.nav__toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;}
.nav__toggle span{display:block;width:24px;height:2px;background:var(--green-800);margin:5px 0;transition:.3s var(--ease);}

/* ============ HERO ============ */
.hero{position:relative;color:var(--ivory);overflow:hidden;background:var(--green-900);}
.hero__bg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 120% at 80% 10%,rgba(201,162,75,.22),transparent 55%),
    linear-gradient(160deg,#062b23 0%,#0b3b32 45%,#0e4d3f 100%);
}
.hero__pattern{position:absolute;inset:0;z-index:0;opacity:.10;background-size:340px;mix-blend-mode:overlay;}
.hero__inner{position:relative;z-index:2;padding:120px 0 130px;max-width:820px;}
.hero h1{color:var(--ivory);margin-bottom:.35em;}
.hero h1 em{font-style:italic;color:var(--gold-400);}
.hero__sub{font-size:1.28rem;color:rgba(251,248,241,.85);max-width:600px;margin-bottom:2.2rem;}
.hero .btn-row{margin-bottom:2.6rem;}
.hero__trust{display:flex;flex-wrap:wrap;gap:26px 40px;padding-top:26px;border-top:1px solid rgba(251,248,241,.16);}
.hero__trust div{display:flex;flex-direction:column;}
.hero__trust b{font-family:var(--serif);font-size:1.9rem;color:var(--gold-400);line-height:1;}
.hero__trust span{font-size:.82rem;letter-spacing:.04em;color:rgba(251,248,241,.7);margin-top:6px;}

/* ============ VALUE / TRUST PILLARS ============ */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
.pillar{padding:36px 30px;border-right:1px solid var(--line);}
.pillar:last-child{border-right:0;}
.pillar__icon{width:40px;height:40px;color:var(--gold-600);margin-bottom:16px;}
.pillar h3{font-size:1.25rem;margin-bottom:.4rem;}
.pillar p{font-size:.95rem;color:var(--muted);margin:0;}

/* ============ CITY CARDS ============ */
.cities{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.city-card{position:relative;border-radius:var(--radius);overflow:hidden;min-height:440px;display:flex;align-items:flex-end;color:var(--ivory);box-shadow:var(--shadow-md);isolation:isolate;}
.city-card__bg{position:absolute;inset:0;z-index:-2;}
.city-card--makkah .city-card__bg{background:linear-gradient(150deg,#0b3b32,#12604f);}
.city-card--madinah .city-card__bg{background:linear-gradient(150deg,#123f2f,#1c6b4f);}
.city-card__bg::after{content:"";position:absolute;inset:0;background-size:260px;opacity:.12;}
.city-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(6,43,35,.85) 0%,rgba(6,43,35,.15) 60%,transparent 100%);}
.city-card__body{padding:38px;position:relative;z-index:1;width:100%;}
.city-card h3{color:var(--ivory);font-size:2rem;margin-bottom:.3rem;}
.city-card p{color:rgba(251,248,241,.85);font-size:.98rem;margin-bottom:1.2rem;}
.city-card .arrow{display:inline-flex;align-items:center;gap:.5em;color:var(--gold-400);font-weight:500;letter-spacing:.04em;font-size:.92rem;}
.city-card:hover .arrow{gap:.9em;}

/* ============ STEPS ============ */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 40px;}
.step{display:flex;gap:20px;padding:24px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);transition:.3s var(--ease);}
.step:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.step__num{font-family:var(--serif);font-size:2.2rem;color:var(--gold-500);line-height:1;flex:none;width:52px;}
.step h3{font-size:1.2rem;margin-bottom:.25rem;}
.step p{font-size:.94rem;color:var(--muted);margin:0;}

/* ============ DEVELOPMENTS ============ */
.dev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.dev-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.3s var(--ease);display:flex;flex-direction:column;}
.dev-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);}
.dev-card__img{aspect-ratio:4/3;position:relative;color:var(--ivory);display:flex;align-items:flex-end;padding:16px;overflow:hidden;}
.dev-card__img::after{content:"";position:absolute;inset:0;background-size:200px;opacity:.14;}
.dev-card__badge{position:relative;z-index:1;background:rgba(6,43,35,.65);backdrop-filter:blur(4px);color:var(--gold-300,#e6cd94);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:100px;}
.dev-card__body{padding:24px;display:flex;flex-direction:column;flex:1;}
.dev-card__loc{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600);margin-bottom:6px;}
.dev-card h3{font-size:1.4rem;margin-bottom:.4rem;}
.dev-card__meta{font-size:.9rem;color:var(--muted);margin-bottom:16px;}
.dev-card__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;padding-top:16px;border-top:1px solid var(--line);}
.dev-card__price{font-family:var(--serif);font-size:1.3rem;color:var(--green-800);}
.dev-card__price small{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}

/* ============ ELIGIBILITY / CTA BANDS ============ */
.band{background:var(--green-800);color:var(--ivory);position:relative;overflow:hidden;}
.band__pattern{position:absolute;inset:0;opacity:.08;background-size:300px;}
.band .container{position:relative;z-index:1;}
.band h2{color:var(--ivory);}
.band p{color:rgba(251,248,241,.82);}
.band--split{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:60px;}

/* Eligibility checker widget */
.checker{background:var(--white);color:var(--ink);border-radius:6px;box-shadow:var(--shadow-lg);padding:36px;border:1px solid var(--line);}
.checker__step{display:none;}
.checker__step.is-active{display:block;animation:fade .4s var(--ease);}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.checker__progress{display:flex;gap:8px;margin-bottom:24px;}
.checker__progress span{flex:1;height:4px;border-radius:100px;background:var(--sand);}
.checker__progress span.on{background:var(--gold-500);}
.checker__q{font-family:var(--serif);font-size:1.6rem;color:var(--green-800);margin-bottom:8px;}
.checker__hint{font-size:.9rem;color:var(--muted);margin-bottom:22px;}
.opt-row{display:flex;gap:12px;flex-wrap:wrap;}
.opt{flex:1;min-width:120px;text-align:center;padding:16px;border:1.5px solid var(--line);border-radius:var(--radius);cursor:pointer;font-weight:500;transition:.2s var(--ease);background:var(--ivory);}
.opt:hover{border-color:var(--gold-500);background:var(--gold-100);}
.checker__back{background:none;border:0;color:var(--muted);cursor:pointer;font-family:var(--sans);font-size:.85rem;margin-top:18px;padding:6px 0;}
.checker__back:hover{color:var(--green-700);}
.checker__result{text-align:center;}
.checker__result .badge{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:100px;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px;}
.badge--ok{background:var(--green-100);color:var(--green-700);}
.badge--maybe{background:var(--gold-100);color:var(--gold-600);}
.badge--no{background:#f6e7e2;color:#a5482f;}

/* ============ FEATURE / SPLIT ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.split__media{aspect-ratio:5/4;border-radius:6px;overflow:hidden;position:relative;box-shadow:var(--shadow-md);background:linear-gradient(150deg,#0b3b32,#12604f);}
.split__media::after{content:"";position:absolute;inset:0;background-size:240px;opacity:.14;}
.check-list{list-style:none;margin:1.4rem 0 1.8rem;padding:0;}
.check-list li{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px;font-size:1rem;color:var(--ink-soft);}
.check-list svg{flex:none;width:22px;height:22px;color:var(--gold-600);margin-top:2px;}

/* ============ GUIDES ============ */
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.guide-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:.3s var(--ease);display:flex;flex-direction:column;}
.guide-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.guide-card__tag{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600);margin-bottom:12px;}
.guide-card h3{font-size:1.28rem;margin-bottom:.5rem;}
.guide-card p{font-size:.94rem;color:var(--muted);margin-bottom:1rem;}
.guide-card .arrow{margin-top:auto;color:var(--green-700);font-weight:500;font-size:.9rem;}

/* ============ FAQ ============ */
.faq{max-width:820px;margin:0 auto;}
.faq__item{border-bottom:1px solid var(--line);}
.faq__q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:24px 40px 24px 0;position:relative;font-family:var(--serif);font-size:1.28rem;color:var(--green-800);}
.faq__q::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-family:var(--sans);font-size:1.6rem;color:var(--gold-600);transition:.3s var(--ease);}
.faq__item.open .faq__q::after{content:"–";}
.faq__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
.faq__a p{padding:0 40px 24px 0;color:var(--ink-soft);margin:0;}
.faq__item.open .faq__a{max-height:400px;}

/* ============ PAGE HERO (interior) ============ */
.page-hero{background:var(--green-900);color:var(--ivory);position:relative;overflow:hidden;}
.page-hero__bg{position:absolute;inset:0;background:linear-gradient(160deg,#062b23,#0e4d3f);}
.page-hero__pattern{position:absolute;inset:0;opacity:.1;background-size:320px;}
.page-hero .container{position:relative;z-index:1;padding:88px 28px 78px;}
.page-hero h1{color:var(--ivory);max-width:820px;}
.page-hero p{color:rgba(251,248,241,.82);max-width:640px;font-size:1.15rem;margin:0;}
.crumbs{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-400);margin-bottom:18px;}
.crumbs a{color:var(--gold-400);}

/* ============ PROSE (articles / pages) ============ */
.prose{max-width:760px;}
.prose h2{margin-top:2em;}
.prose h3{margin-top:1.6em;color:var(--green-700);}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.3em;}
.prose li{margin-bottom:.55em;}
.prose blockquote{border-left:3px solid var(--gold-500);margin:1.6em 0;padding:.4em 0 .4em 1.4em;font-family:var(--serif);font-size:1.35rem;color:var(--green-700);font-style:italic;}
.prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.95rem;}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);}
.prose th{background:var(--cream);font-family:var(--sans);letter-spacing:.04em;color:var(--green-800);}

.callout{background:var(--cream);border:1px solid var(--line);border-left:3px solid var(--gold-500);border-radius:var(--radius);padding:22px 26px;margin:1.6em 0;}
.callout h4{font-family:var(--sans);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600);margin:0 0 .5em;}
.callout p:last-child{margin:0;}

/* ============ DEVELOPMENT SINGLE ============ */
.dev-gallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:520px;margin-bottom:8px;}
.dev-gallery__cell{border-radius:var(--radius);position:relative;overflow:hidden;color:var(--ivory);display:flex;align-items:flex-end;padding:16px;background:linear-gradient(150deg,#0b3b32,#12604f);}
.dev-gallery__cell::after{content:"";position:absolute;inset:0;background-size:220px;opacity:.14;}
.dev-gallery__cell:first-child{grid-row:span 2;}
.dev-gallery__cell span{position:relative;z-index:1;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;background:rgba(6,43,35,.55);padding:5px 12px;border-radius:100px;}
.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:12px 0 0;}
.spec{background:var(--white);padding:22px 20px;}
.spec small{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px;}
.spec b{font-family:var(--serif);font-size:1.4rem;color:var(--green-800);font-weight:600;}
.dev-layout{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start;}
.dev-aside{position:sticky;top:110px;background:var(--white);border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow-md);padding:28px;}
.dev-aside__price{font-family:var(--serif);font-size:2rem;color:var(--green-800);}
.dev-aside__price small{display:block;font-family:var(--sans);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2px;}
.dev-aside .btn{width:100%;justify-content:center;margin-top:8px;}
.downloads{list-style:none;padding:0;margin:18px 0 0;}
.downloads li{border-top:1px solid var(--line);}
.downloads a{display:flex;align-items:center;gap:10px;padding:13px 0;font-size:.92rem;color:var(--ink-soft);}
.downloads a:hover{color:var(--green-700);}
.downloads svg{width:18px;height:18px;color:var(--gold-600);flex:none;}

/* ============ FOOTER ============ */
.site-footer{background:var(--green-900);color:rgba(251,248,241,.72);padding:72px 0 0;font-size:.92rem;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:52px;border-bottom:1px solid rgba(251,248,241,.14);}
.site-footer h4{color:var(--gold-400);font-family:var(--sans);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px;}
.site-footer ul{list-style:none;padding:0;margin:0;}
.site-footer li{margin-bottom:11px;}
.site-footer a{color:rgba(251,248,241,.72);}
.site-footer a:hover{color:var(--gold-400);}
.footer-brand .brand__name b{color:var(--ivory);}
.footer-brand p{margin:18px 0 0;max-width:320px;color:rgba(251,248,241,.6);font-size:.9rem;}
.footer-disclaimer{padding:28px 0 40px;font-size:.8rem;color:rgba(251,248,241,.5);line-height:1.65;}
.footer-bottom{padding:22px 0;border-top:1px solid rgba(251,248,241,.14);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;color:rgba(251,248,241,.5);}

/* ============ MISC ============ */
.bg-cream{background:var(--cream);}
.bg-white{background:var(--white);}
.section-head{max-width:640px;margin-bottom:52px;}
.section-head.center{margin-left:auto;margin-right:auto;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
.tag-pill{display:inline-block;background:var(--gold-100);color:var(--gold-600);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:100px;font-weight:600;}
.city-card .tag-pill{color:var(--gold-600);margin-bottom:14px;}

/* ============ RESPONSIVE ============ */
@media(max-width:960px){
  .pillars{grid-template-columns:1fr 1fr;}
  .pillar:nth-child(2){border-right:0;}
  .pillar:nth-child(-n+2){border-bottom:1px solid var(--line);}
  .dev-grid,.guide-grid{grid-template-columns:1fr 1fr;}
  .split,.band--split,.grid-2{grid-template-columns:1fr;gap:36px;}
  .dev-layout{grid-template-columns:1fr;}
  .dev-aside{position:static;}
  .dev-gallery{grid-template-columns:1fr 1fr;height:auto;}
  .dev-gallery__cell{aspect-ratio:4/3;}
  .dev-gallery__cell:first-child{grid-row:auto;grid-column:span 2;}
  .spec-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:720px){
  body{font-size:16px;}
  .section{padding:64px 0;}
  .menu,.nav__cta .btn{display:none;}
  .nav__toggle{display:block;}
  .site-header.open .menu{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--ivory);padding:20px 28px;gap:18px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);}
  .cities,.steps,.dev-grid,.guide-grid,.footer-grid,.spec-grid{grid-template-columns:1fr;}
  .hero__inner{padding:80px 0 90px;}
  .hero__trust b{font-size:1.5rem;}
  .topbar__note{display:none;}
  .dev-gallery{grid-template-columns:1fr;}
  .dev-gallery__cell:first-child{grid-column:auto;}
}

/* --- Islamic geometric pattern (portable data-URI, applied to textured surfaces) --- */
:root{
  --pattern:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%2064%2064'%3E%3Cg%20fill='none'%20stroke='%23c9a24b'%20stroke-width='1'%3E%3Cpath%20d='M32%202%20L40%2024%20L62%2032%20L40%2040%20L32%2062%20L24%2040%20L2%2032%20L24%2024%20Z'/%3E%3Cpath%20d='M32%2016%20L36%2028%20L48%2032%20L36%2036%20L32%2048%20L28%2036%20L16%2032%20L28%2028%20Z'/%3E%3C/g%3E%3C/svg%3E");
}
.hero__pattern,.page-hero__pattern,.band__pattern{background-image:var(--pattern);}
.city-card__bg::after,.dev-card__img::after,.split__media::after,.dev-gallery__cell::after{background-image:var(--pattern);}

/* ============ DEVELOPMENTS MAP LANDING ============ */
.map-panel{background:var(--green-900);border-radius:8px;overflow:hidden;box-shadow:var(--shadow-lg);position:relative;}
.map-panel::before{content:"";position:absolute;inset:0;background-image:var(--pattern);background-size:300px;opacity:.07;pointer-events:none;}
.map-panel__head{padding:44px 48px 0;position:relative;z-index:1;max-width:560px;}
.map-panel__head h2{color:var(--ivory);}
.map-panel__head p{color:rgba(251,248,241,.78);}
.ksa-map{position:relative;padding:0 24px 10px;}
.ksa-map svg{width:100%;height:auto;display:block;max-height:520px;}
.ksa-map__land{fill:rgba(251,248,241,.06);stroke:rgba(201,162,75,.55);stroke-width:1.6;stroke-linejoin:round;}
.ksa-map__route{fill:none;stroke:rgba(201,162,75,.45);stroke-width:1.4;stroke-dasharray:4 6;}
.ksa-map__pin{cursor:pointer;}
.ksa-map__dot{fill:#e0452e;stroke:#fbf8f1;stroke-width:2.5;transition:r .2s var(--ease);}
.ksa-map__pin:hover .ksa-map__dot,.ksa-map__pin:focus .ksa-map__dot{r:12;}
.ksa-map__pulse{fill:rgba(224,69,46,.35);transform-origin:center;transform-box:fill-box;animation:mapPulse 2.2s ease-out infinite;}
@keyframes mapPulse{0%{transform:scale(.35);opacity:.9;}70%{transform:scale(1);opacity:0;}100%{transform:scale(1);opacity:0;}}
.ksa-map__label rect{fill:rgba(6,43,35,.85);stroke:rgba(201,162,75,.5);stroke-width:1;}
.ksa-map__label text{fill:var(--gold-100);font-family:var(--sans);font-size:15px;letter-spacing:.04em;}
.ksa-map__label{opacity:0;transition:opacity .25s var(--ease);pointer-events:none;}
.ksa-map__pin:hover .ksa-map__label,.ksa-map__pin:focus .ksa-map__label{opacity:1;}
.ksa-map__note{position:relative;text-align:right;font-size:.72rem;color:rgba(251,248,241,.45);padding:0 24px 18px;margin:0;}
@media(max-width:720px){
  .map-panel__head{padding:30px 24px 0;}
  .ksa-map__label{opacity:1;} /* always show labels on touch */
}

/* ============ COMING SOON PANEL ============ */
.coming-soon{display:flex;align-items:center;justify-content:space-between;gap:32px;background:var(--white);border:1px dashed var(--gold-500);border-radius:8px;padding:34px 38px;}
.coming-soon h3{margin-bottom:.3em;}
.coming-soon p{margin:0;color:var(--muted);max-width:640px;}
.coming-soon .btn{flex:none;}
@media(max-width:720px){.coming-soon{flex-direction:column;align-items:flex-start;}}

/* ============ REGISTER INTEREST FORM ============ */
.reg-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;}
.reg-form__grid label{display:block;font-size:.9rem;font-weight:500;color:var(--ink-soft);}
.reg-form__grid input,.reg-form__grid select{width:100%;padding:13px;margin-top:6px;border:1px solid var(--line);border-radius:4px;font:inherit;background:var(--white);}
.reg-form__grid input:focus,.reg-form__grid select:focus{outline:2px solid var(--gold-500);outline-offset:0;border-color:var(--gold-500);}
.reg-form__full{grid-column:1/-1;}
.reg-form .btn{width:100%;justify-content:center;}
.reg-form__note{font-size:.8rem;color:var(--muted);margin:14px 0 0;}
.reg-form__hp{position:absolute !important;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden;}
.reg-form--compact{max-width:640px;margin:36px auto 0;text-align:left;}
@media(max-width:720px){.reg-form__grid{grid-template-columns:1fr;}}

/* ============ SOURCES CALLOUT ============ */
.callout--sources ul{margin:0;padding-left:1.2em;}
.callout--sources li{margin-bottom:.4em;font-size:.92rem;}

/* ============ FOOTER CONTACT ============ */
.footer-contact li{display:flex;gap:10px;align-items:baseline;}
.footer-contact b{color:var(--gold-400);font-weight:500;min-width:64px;display:inline-block;}

/* ============ CITY ZONE MAPS (Makkah / Madinah) ============ */
.city-maps{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.city-map{background:var(--green-900);border-radius:8px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;padding:34px 34px 28px;}
.city-map::before{content:"";position:absolute;inset:0;background-image:var(--pattern);background-size:260px;opacity:.06;pointer-events:none;}
.city-map__head{position:relative;z-index:1;margin-bottom:6px;}
.city-map__head h3{color:var(--ivory);font-size:1.9rem;margin-bottom:.15em;}
.city-map__head p{color:rgba(251,248,241,.7);font-size:.95rem;margin:0;}
.city-map__ring{fill:none;stroke:rgba(201,162,75,.28);stroke-width:1.2;stroke-dasharray:3 7;}
.city-map__compass path{fill:none;stroke:rgba(251,248,241,.5);stroke-width:1.4;stroke-linecap:round;}
.city-map__compass text{fill:rgba(251,248,241,.55);font-family:var(--sans);font-size:12px;text-anchor:middle;letter-spacing:.1em;}
.city-map__mosque path{fill:var(--gold-500);}
.city-map__mosque text{fill:var(--gold-400);font-family:var(--serif);font-size:15px;font-style:italic;text-anchor:middle;}
.city-map__pin{cursor:pointer;}
.city-map__dot{fill:#e0452e;stroke:#fbf8f1;stroke-width:2;transition:r .2s var(--ease);}
.city-map__pin:hover .city-map__dot,.city-map__pin:focus .city-map__dot{r:9.5;}
.city-map__pulse{fill:rgba(224,69,46,.32);transform-origin:center;transform-box:fill-box;animation:mapPulse 2.4s ease-out infinite;}
.city-map__label{fill:var(--gold-100);font-family:var(--sans);font-size:13.5px;letter-spacing:.03em;paint-order:stroke;stroke:rgba(6,43,35,.85);stroke-width:3px;stroke-linejoin:round;}
.city-map__also{position:relative;z-index:1;color:rgba(251,248,241,.65);font-size:.85rem;margin:10px 0 4px;}
.city-map__note{position:relative;z-index:1;color:rgba(251,248,241,.4);font-size:.72rem;margin:0 0 16px;}
.city-map__btn{position:relative;z-index:1;font-size:.8rem;padding:11px 20px;}
@media(max-width:960px){.city-maps{grid-template-columns:1fr;}}

/* zone card highlight when reached from a map dot */
.guide-card:target{border-color:var(--gold-500);box-shadow:0 0 0 3px var(--gold-100),var(--shadow-md);scroll-margin-top:140px;}

/* ============ GUIDES TOPIC FILTER PILLS ============ */
.topic-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px;}
.topic-pill{font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:10px 20px;border-radius:100px;border:1.5px solid var(--line);background:var(--white);color:var(--ink-soft);cursor:pointer;transition:.2s var(--ease);}
.topic-pill:hover{border-color:var(--gold-500);color:var(--gold-600);}
.topic-pill.is-active{background:var(--green-800);border-color:var(--green-800);color:var(--gold-100);}
.guide-card.is-hidden{display:none;}

/* ============ CITY MAP v2: numbered markers + legend ============ */
.city-map__body{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;align-items:center;position:relative;z-index:1;}
.city-map__num{fill:#fff;font-family:var(--sans);font-size:11px;font-weight:600;text-anchor:middle;pointer-events:none;}
.city-map__legend{list-style:none;margin:0;padding:0;font-size:.86rem;}
.city-map__legend li{margin-bottom:7px;line-height:1.35;}
.city-map__legend a{color:rgba(251,248,241,.82);display:flex;align-items:baseline;gap:8px;}
.city-map__legend a:hover{color:var(--gold-400);}
.city-map__legend-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#e0452e;color:#fff;font-size:.68rem;font-weight:600;transform:translateY(3px);}
.city-map__legend-mosque{color:var(--gold-400);display:flex;align-items:baseline;gap:8px;margin-bottom:12px;font-family:var(--serif);font-style:italic;font-size:1rem;}
.city-map__legend-star{flex:none;width:20px;text-align:center;color:var(--gold-500);}
@media(max-width:720px){
  .city-map__body{grid-template-columns:1fr;}
  .city-map__legend{columns:2;column-gap:18px;}
}

/* ============ CITY MAP v3: real geographic maps (Leaflet) ============ */
.city-map__canvas-wrap{position:relative;border-radius:6px;overflow:hidden;border:1px solid rgba(201,162,75,.35);}
.city-map__canvas{height:420px;width:100%;background:#0a2a22;z-index:1;}
.city-map__canvas:focus{outline:2px solid var(--gold-500);}

/* numbered zone markers */
.hara-zone-icon{background:none;border:none;}
.hara-zone-dot{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#e0452e;color:#fff;font-family:var(--sans);font-size:11px;font-weight:600;border:2px solid #fbf8f1;box-shadow:0 2px 8px rgba(0,0,0,.5);cursor:pointer;transition:transform .15s var(--ease);}
.hara-zone-icon:hover .hara-zone-dot{transform:scale(1.25);}

/* the Haram marker: gold star + permanent label */
.hara-mosque-icon{background:none;border:none;white-space:nowrap;}
.hara-mosque-star{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--gold-500);color:#062b23;font-size:17px;border:2px solid #fbf8f1;box-shadow:0 0 0 4px rgba(201,162,75,.35),0 2px 10px rgba(0,0,0,.55);}
.hara-mosque-label{position:absolute;left:36px;top:4px;color:#f3e9d2;font-family:var(--serif);font-style:italic;font-size:14.5px;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.7);pointer-events:none;}

/* tooltips + controls, tuned to the dark basemap */
.hara-zone-tip{background:rgba(6,43,35,.95);color:#f3e9d2;border:1px solid rgba(201,162,75,.5);border-radius:4px;font-family:var(--sans);font-size:12.5px;padding:5px 10px;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.hara-zone-tip::before{border-top-color:rgba(201,162,75,.5) !important;}
.leaflet-control-zoom a{background:rgba(6,43,35,.92) !important;color:#f3e9d2 !important;border-color:rgba(201,162,75,.4) !important;}
.leaflet-control-zoom a:hover{background:rgba(14,77,63,.95) !important;color:#d9be7e !important;}
.leaflet-control-attribution{background:rgba(6,43,35,.75) !important;color:rgba(251,248,241,.55) !important;font-size:9.5px !important;}
.leaflet-control-attribution a{color:rgba(217,190,126,.75) !important;}
@media(max-width:720px){.city-map__canvas{height:340px;}}

/* Custom uploaded logo (Appearance > Customize > Site Identity) */
.brand__mark--custom{width:auto;height:52px;max-width:150px;object-fit:contain;border-radius:4px;}
@media(max-width:720px){.brand__mark--custom{height:44px;}}

/* ============ LISTING v2: hero image + flexible specs ============ */
.dev-hero-img{width:100%;height:440px;border-radius:6px;background-size:cover;background-position:center;box-shadow:var(--shadow-md);}
.dev-hero-img--placeholder{background:linear-gradient(150deg,#0b3b32,#12604f);position:relative;display:flex;align-items:center;justify-content:center;}
.dev-hero-img--placeholder::after{content:"";position:absolute;inset:0;background-image:var(--pattern);background-size:240px;opacity:.14;border-radius:6px;}
.dev-hero-img--placeholder span{color:rgba(251,248,241,.6);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;position:relative;z-index:1;}
.spec-grid{grid-template-columns:repeat(var(--spec-cols,4),1fr);}
@media(max-width:960px){.spec-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:720px){.dev-hero-img{height:260px;}.spec-grid{grid-template-columns:1fr;}}

/* ============ COMPACT ZONE LIST (developments page) ============ */
.zone-list__head{font-size:1.25rem;margin-bottom:16px;color:var(--green-700);}
.zone-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.zone-row{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;scroll-margin-top:140px;}
.zone-row b{display:block;font-family:var(--serif);font-weight:600;font-size:1.02rem;color:var(--green-800);line-height:1.3;}
.zone-row span{display:block;font-size:.8rem;color:var(--muted);line-height:1.5;margin-top:2px;}
.zone-row:target{border-color:var(--gold-500);box-shadow:0 0 0 3px var(--gold-100);}
@media(max-width:720px){.zone-list{grid-template-columns:1fr;}}

/* ============ REGISTER FORM v2: property chips + country code ============ */
.chip-label{display:block;font-size:.9rem;font-weight:500;color:var(--ink-soft);margin-bottom:8px;}
.chip-group{display:flex;flex-wrap:wrap;gap:8px;}
.chip input{position:absolute;opacity:0;pointer-events:none;}
.chip span{display:inline-block;padding:9px 16px;border:1.5px solid var(--line);border-radius:100px;background:var(--ivory);font-size:.86rem;font-weight:500;color:var(--ink-soft);cursor:pointer;transition:.15s var(--ease);user-select:none;}
.chip span:hover{border-color:var(--gold-500);}
.chip input:checked + span{background:var(--green-800);border-color:var(--green-800);color:var(--gold-100);}
.chip input:focus-visible + span{outline:2px solid var(--gold-500);outline-offset:1px;}
.phone-row{display:grid;grid-template-columns:118px 1fr;gap:8px;margin-top:6px;}
.phone-row select,.phone-row input{margin-top:0 !important;}

/* ============ MOBILE OPTIMISATION SWEEP ============ */
@media(max-width:960px){
  /* Listing pages: price + action buttons above the description */
  .dev-layout{display:flex;flex-direction:column;}
  .dev-aside{order:-1;margin-bottom:28px;}
}
@media(max-width:720px){
  /* Wide content tables (unit tables, payment plans) scroll instead of squashing */
  .prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}
  .prose table th,.prose table td{white-space:normal;min-width:120px;}
  /* Keep the primary CTA visible next to the hamburger */
  .nav__cta .btn--gold{display:inline-flex;padding:10px 14px;font-size:.74rem;letter-spacing:.03em;}
  .nav{gap:10px;}
  .brand__name b{font-size:1.12rem;}
  .brand__mark,.brand__mark--custom{height:40px;width:auto;}
  /* Checker + forms breathe better on small screens */
  .checker{padding:24px 18px;}
  .reg-form--compact{margin-top:28px;}
  /* Map panels + legend on phones */
  .city-map{padding:22px 16px 18px;}
  .city-map__canvas{height:300px;}
  .city-map__legend{columns:1;font-size:.82rem;}
  /* Hero trust row tightens */
  .hero__trust{gap:16px 22px;}
  /* Section rhythm slightly tighter on phones */
  .section{padding:56px 0;}
  .page-hero .container{padding-top:64px;padding-bottom:56px;}
  /* Spec strip: two columns on phones reads better than one long stack */
  .spec-grid{grid-template-columns:1fr 1fr;}
  /* Steps cards: numbers slightly smaller */
  .step__num{font-size:1.7rem;width:42px;}
  /* CTA band buttons full width for thumb reach */
  .band .btn-row .btn{width:100%;justify-content:center;}
}
@media(max-width:480px){
  /* logo mark carries the brand; drop the text wordmark so the CTA fits cleanly */
  .brand__name{display:none;}
  .nav__cta .btn--gold{padding:11px 16px;font-size:.78rem;}
}

/* ============ MOBILE CTA BAR (WhatsApp + Facebook) ============ */
.mobile-cta-bar{display:none;}
@media(max-width:720px){
  .mobile-cta-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;box-shadow:0 -4px 18px rgba(0,0,0,.18);}
  .mobile-cta-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 8px calc(14px + env(safe-area-inset-bottom,0px));font-weight:600;font-size:.95rem;line-height:1;color:#fff;text-decoration:none;}
  .mobile-cta-bar a svg{flex-shrink:0;}
  .mobile-cta-bar__wa{background:#25D366;}
  .mobile-cta-bar__fb{background:#1877F2;}
  .mobile-cta-bar a:hover{color:#fff;}
  body{padding-bottom:64px;} /* keep footer content clear of the bar */
}