/*
 * Alfath Group — Jazeel Residence single-project skin.
 * A self-contained "forest green / sage" identity, scoped under .afg-jazeel
 * so it never leaks into the navy-gold theme. Loaded ONLY on a project whose
 * layout is set to "Jazeel" in the dashboard.
 */

/* Optional brand fonts: drop the .ttf files into assets/jazeel/fonts/ and they
   activate automatically; until then the theme's serif/Arabic faces are used. */
@font-face{font-family:'JZOptima';src:url('fonts/OPTIMA.TTF') format('truetype');font-weight:400;font-display:swap;}
@font-face{font-family:'JZDisplace';src:url('fonts/Displace20-Regular.ttf') format('truetype');font-weight:400;font-display:swap;}
@font-face{font-family:'JZDisplace';src:url('fonts/Displace20-Medium.ttf') format('truetype');font-weight:500;font-display:swap;}

.afg-jazeel{
  --jz-forest:#243029;
  --jz-deep:#141d18;
  --jz-panel:#1b2620;
  --jz-sage:#b6d295;
  --jz-sage-soft:#8faa6c;
  --jz-cream:#f1efe6;
  --jz-muted:#9aa79c;
  --jz-line:rgba(182,210,149,.18);
  --jz-serif:'Playfair Display','Markazi Text',Georgia,serif;
  --jz-display:'Playfair Display','Markazi Text',Georgia,serif;
  background:var(--jz-deep);
  color:var(--jz-cream);
  font-family:var(--jz-serif);
}
/* Fonts are unified via the Latin-first / Arabic-fallback stack above:
   English renders in the Didone serif (Playfair Display) and Arabic in the
   elegant Arabic face (Markazi Text) — in BOTH language versions. */
.afg-jazeel ::selection{ background:var(--jz-sage); color:var(--jz-deep); }
.afg-jazeel a{ color:inherit; }
.afg-jazeel .jz-wrap{ width:100%; max-width:1240px; margin-inline:auto; padding-inline:clamp(20px,5vw,64px); }
.afg-jazeel section{ position:relative; }

/* shared bits */
.afg-jazeel .jz-eyebrow{ font-family:var(--jz-serif); letter-spacing:.34em; font-size:12px; text-transform:uppercase; color:var(--jz-sage-soft); }
body.afg-ar .afg-jazeel .jz-eyebrow{ letter-spacing:.12em; }
.afg-jazeel .jz-no{ font-family:var(--jz-display); font-size:clamp(54px,9vw,110px); line-height:.8; color:transparent; -webkit-text-stroke:1px var(--jz-sage-soft); opacity:.45; }
.afg-jazeel .jz-h{ font-family:var(--jz-serif); font-weight:500; line-height:1.05; letter-spacing:.01em; font-size:clamp(30px,4.4vw,58px); margin:14px 0 10px; }
.afg-jazeel .jz-h .alt{ font-family:var(--jz-display); color:var(--jz-sage); }
.afg-jazeel .jz-lead{ max-width:620px; color:var(--jz-cream); opacity:.8; font-size:clamp(15px,1.4vw,17px); }
.afg-jazeel .jz-sec{ padding-block:clamp(72px,10vw,140px); }

/* ---------- HERO ---------- */
.afg-jazeel .jz-hero{ min-height:92vh; min-height:92svh; display:grid; place-items:center; text-align:center; overflow:hidden;
  padding-top:calc(var(--header-h,84px) + 20px); padding-bottom:40px;
  background:radial-gradient(120% 120% at 50% 0%,#2b3a31 0%,#1c2620 46%,#101713 100%); }
.afg-jazeel .jz-mesh{ position:absolute; inset:-20%; z-index:0; filter:blur(70px); opacity:.85; }
.afg-jazeel .jz-mesh span{ position:absolute; border-radius:50%; mix-blend-mode:screen; animation:jzfloat 18s ease-in-out infinite; }
.afg-jazeel .jz-mesh .m1{ width:46vw; height:46vw; left:-6%; top:-4%; background:radial-gradient(circle,#6f9a5a 0%,transparent 65%); }
.afg-jazeel .jz-mesh .m2{ width:40vw; height:40vw; right:-8%; top:6%; background:radial-gradient(circle,#3e6a52 0%,transparent 65%); animation-delay:-6s; }
.afg-jazeel .jz-mesh .m3{ width:52vw; height:52vw; left:18%; bottom:-22%; background:radial-gradient(circle,#28443a 0%,transparent 60%); animation-delay:-11s; }
@keyframes jzfloat{ 0%,100%{ transform:translate(0,0) scale(1);} 33%{ transform:translate(4%,5%) scale(1.08);} 66%{ transform:translate(-3%,-4%) scale(.95);} }
.afg-jazeel .jz-hero__media{ position:absolute; inset:0; z-index:0; }
.afg-jazeel .jz-hero__media img{ width:100%; height:100%; object-fit:cover; opacity:.34; }
.afg-jazeel .jz-hero__media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(16,23,19,.55),rgba(16,23,19,.86)); }
.afg-jazeel .jz-grain{ position:absolute; inset:0; z-index:1; opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.afg-jazeel .jz-hero__inner{ position:relative; z-index:3; padding-inline:24px; }
.afg-jazeel .jz-badge{ width:120px; height:120px; margin:0 auto 28px; position:relative; }
.afg-jazeel .jz-badge svg{ width:100%; height:100%; animation:jzspin 26s linear infinite; }
@keyframes jzspin{ to{ transform:rotate(360deg);} }
.afg-jazeel .jz-badge .j{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--jz-display); font-size:40px; color:var(--jz-cream); }
.afg-jazeel .jz-hero h1{ font-family:var(--jz-serif); font-weight:500; line-height:1; letter-spacing:.03em;
  font-size:clamp(46px,9vw,120px); text-transform:uppercase; color:var(--jz-cream); margin:0; }
body.afg-ar .afg-jazeel .jz-hero h1{ text-transform:none; }
.afg-jazeel .jz-hero h1 em{ font-style:normal; color:var(--jz-sage); display:block; }
.afg-jazeel .jz-hero .jz-lead{ margin:24px auto 0; }
.afg-jazeel .jz-cta{ margin-top:36px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.afg-jazeel .jz-btn{ display:inline-flex; align-items:center; gap:8px; background:var(--jz-sage); color:var(--jz-deep);
  padding:13px 28px; border-radius:40px; letter-spacing:.08em; font-size:13px; border:none; cursor:pointer; transition:.3s; }
.afg-jazeel .jz-btn:hover{ background:var(--jz-cream); transform:translateY(-2px); }
.afg-jazeel .jz-btn--ghost{ background:none; border:1px solid var(--jz-sage); color:var(--jz-sage); }
.afg-jazeel .jz-btn--ghost:hover{ background:var(--jz-sage); color:var(--jz-deep); }
.afg-jazeel .jz-breadcrumb{ position:absolute; top:calc(var(--header-h,84px) + 8px); inset-inline-start:0; width:100%; z-index:4; text-align:center;
  font-size:12px; letter-spacing:.14em; color:var(--jz-muted); }
.afg-jazeel .jz-breadcrumb a:hover{ color:var(--jz-sage); }

/* ---------- ABOUT + STATS ---------- */
.afg-jazeel .jz-about{ background:var(--jz-forest); }
.afg-jazeel .jz-about__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,6vw,90px); align-items:center; }
.afg-jazeel .jz-about__copy p{ margin-top:16px; opacity:.82; }
.afg-jazeel .jz-portrait{ aspect-ratio:3/4; border-radius:6px; overflow:hidden; position:relative; border:1px solid var(--jz-line);
  background:linear-gradient(160deg,#3a5142,#1d2a23); }
.afg-jazeel .jz-portrait img{ width:100%; height:100%; object-fit:cover; }
.afg-jazeel .jz-portrait .glow{ position:absolute; inset:0; background:radial-gradient(80% 60% at 70% 20%,rgba(182,210,149,.22),transparent 60%); }
.afg-jazeel .jz-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:clamp(46px,7vw,80px);
  background:var(--jz-line); border:1px solid var(--jz-line); border-radius:6px; overflow:hidden; }
.afg-jazeel .jz-stat{ background:var(--jz-panel); padding:32px clamp(12px,2vw,26px); text-align:center; }
.afg-jazeel .jz-stat .more{ font-size:11px; letter-spacing:.26em; color:var(--jz-muted); text-transform:uppercase; }
.afg-jazeel .jz-stat .num{ font-family:var(--jz-display); font-size:clamp(38px,5vw,62px); color:var(--jz-sage); line-height:1.1; margin:6px 0; }
.afg-jazeel .jz-stat .lab{ font-size:13px; letter-spacing:.1em; color:var(--jz-cream); opacity:.85; text-transform:uppercase; }

/* ---------- DESTINATION ---------- */
.afg-jazeel .jz-band{ background:linear-gradient(180deg,#1a241e,#141d18); }
.afg-jazeel .jz-band__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:center; }
.afg-jazeel .jz-scene{ aspect-ratio:4/3; border-radius:6px; border:1px solid var(--jz-line); position:relative; overflow:hidden;
  background:linear-gradient(150deg,#9fb6a0 0%,#5d7a63 40%,#2c3b32 100%); }
.afg-jazeel .jz-scene img{ width:100%; height:100%; object-fit:cover; }
.afg-jazeel .jz-scene::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(transparent 55%,rgba(20,29,24,.5)); }

/* ---------- LOCATION / MAP ---------- */
.afg-jazeel .jz-loc{ background:var(--jz-forest); }
.afg-jazeel .jz-map-shell{ margin-top:40px; height:clamp(340px,52vh,520px); border-radius:8px; overflow:hidden; border:1px solid var(--jz-line); }
.afg-jazeel .jz-map-shell .afg-map{ width:100%; height:100%; }
.afg-jazeel .jz-poi{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.afg-jazeel .jz-poi span{ border:1px solid var(--jz-line); border-radius:40px; padding:8px 16px; font-size:12.5px; letter-spacing:.05em; opacity:.85; }

/* ---------- AMENITIES ---------- */
.afg-jazeel .jz-amen{ background:var(--jz-deep); }
.afg-jazeel .jz-amen__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; }
.afg-jazeel .jz-acard{ background:var(--jz-panel); border:1px solid var(--jz-line); border-radius:8px; padding:30px 26px; transition:.4s; }
.afg-jazeel .jz-acard:hover{ transform:translateY(-5px); border-color:var(--jz-sage-soft); }
.afg-jazeel .jz-acard .ic{ width:44px; height:44px; color:var(--jz-sage); margin-bottom:16px; }
.afg-jazeel .jz-acard .ic svg{ width:100%; height:100%; }
.afg-jazeel .jz-acard h3{ font-family:var(--jz-serif); font-weight:500; font-size:21px; margin:0 0 6px; color:var(--jz-cream); }
.afg-jazeel .jz-acard p{ font-size:14px; opacity:.72; margin:0; }

/* ---------- UNITS ---------- */
.afg-jazeel .jz-units{ background:var(--jz-forest); }
.afg-jazeel .jz-tabs{ display:flex; gap:10px; margin-top:32px; flex-wrap:wrap; }
.afg-jazeel .jz-tab{ background:none; border:1px solid var(--jz-line); color:var(--jz-cream); padding:10px 22px; border-radius:40px;
  cursor:pointer; letter-spacing:.06em; font-size:13px; transition:.3s; }
.afg-jazeel .jz-tab.is-active{ background:var(--jz-sage); color:var(--jz-deep); border-color:var(--jz-sage); }
.afg-jazeel .jz-unit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px; }
.afg-jazeel .jz-unit{ background:var(--jz-panel); border:1px solid var(--jz-line); border-radius:8px; padding:30px; transition:.4s; }
.afg-jazeel .jz-unit:hover{ border-color:var(--jz-sage-soft); }
.afg-jazeel .jz-unit .kick{ font-size:11px; letter-spacing:.24em; color:var(--jz-sage-soft); text-transform:uppercase; }
.afg-jazeel .jz-unit .type{ font-family:var(--jz-display); font-size:44px; color:var(--jz-cream); line-height:1; margin:10px 0 4px; }
.afg-jazeel .jz-unit .brs{ font-size:13px; letter-spacing:.08em; color:var(--jz-muted); }
.afg-jazeel .jz-unit .area{ margin-top:18px; padding-top:16px; border-top:1px solid var(--jz-line); font-size:14px; opacity:.82; }
.afg-jazeel .jz-unit .area b{ color:var(--jz-sage); font-family:var(--jz-serif); font-weight:600; font-size:18px; }

/* ---------- EOI / CTA ---------- */
.afg-jazeel .jz-eoi{ background:linear-gradient(180deg,#141d18,#10160f); }
.afg-jazeel .jz-eoi__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,90px); align-items:start; }
.afg-jazeel .jz-form{ background:var(--jz-panel); border:1px solid var(--jz-line); border-radius:10px; padding:clamp(26px,4vw,40px); }
.afg-jazeel .jz-field{ margin-bottom:18px; }
.afg-jazeel .jz-field label{ display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--jz-muted); margin-bottom:8px; }
.afg-jazeel .jz-field input,.afg-jazeel .jz-field select{ width:100%; background:#10160f; border:1px solid var(--jz-line); border-radius:6px;
  color:var(--jz-cream); padding:13px 15px; font-family:var(--f-sans); font-size:14px; transition:.3s; }
.afg-jazeel .jz-field input:focus,.afg-jazeel .jz-field select:focus{ outline:none; border-color:var(--jz-sage); }
.afg-jazeel .jz-form .jz-btn{ width:100%; justify-content:center; margin-top:6px; padding:15px; }
.afg-jazeel .jz-ok{ display:none; background:rgba(182,210,149,.12); border:1px solid var(--jz-sage-soft); color:var(--jz-sage);
  border-radius:6px; padding:14px; text-align:center; margin-top:14px; font-size:14px; }
.afg-jazeel .jz-info dt{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--jz-sage-soft); margin-top:24px; }
.afg-jazeel .jz-info dd{ font-family:var(--jz-serif); font-size:clamp(20px,2.4vw,30px); margin:6px 0 0; }
.afg-jazeel .jz-info dd.small{ font-family:var(--f-sans); font-size:15px; opacity:.82; }

/* ---------- LOGO in hero badge ---------- */
.afg-jazeel .jz-badge__logo{ width:64px; height:64px; object-fit:contain; }

/* ---------- MASTERPLAN ---------- */
.afg-jazeel .jz-masterplan{ margin:0; border:1px solid var(--jz-line); border-radius:8px; overflow:hidden; background:var(--jz-panel); cursor:zoom-in; position:relative; }
.afg-jazeel .jz-masterplan img{ width:100%; height:auto; display:block; transition:transform .6s ease; }
.afg-jazeel .jz-masterplan:hover img{ transform:scale(1.02); }
.afg-jazeel .jz-masterplan figcaption{ position:absolute; bottom:12px; inset-inline-end:14px; background:rgba(20,29,24,.78); color:var(--jz-cream); font-size:12px; letter-spacing:.08em; padding:6px 12px; border-radius:40px; }

/* ---------- MAP image ---------- */
.afg-jazeel .jz-mapimg{ width:100%; height:100%; object-fit:contain; background:var(--jz-panel); cursor:zoom-in; }

/* ---------- GALLERY SLIDER ---------- */
.afg-jazeel .jz-gallery{ background:var(--jz-deep); }
.afg-jazeel .jz-slider{ position:relative; }
.afg-jazeel .jz-slider__viewport{ overflow:hidden; border-radius:8px; border:1px solid var(--jz-line); direction:ltr; }
.afg-jazeel .jz-slider__track{ display:flex; transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.afg-jazeel .jz-slide{ flex:0 0 100%; margin:0; aspect-ratio:16/9; background:#0e1611; }
.afg-jazeel .jz-slide img{ width:100%; height:100%; object-fit:contain; cursor:zoom-in; display:block; }
.afg-jazeel .jz-slider__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:50px; height:50px; border-radius:50%;
  border:1px solid var(--jz-line); background:rgba(20,29,24,.6); color:var(--jz-cream); font-size:26px; line-height:1; cursor:pointer;
  display:grid; place-items:center; transition:.3s; backdrop-filter:blur(4px); }
.afg-jazeel .jz-slider__nav:hover{ background:var(--jz-sage); color:var(--jz-deep); border-color:var(--jz-sage); }
.afg-jazeel .jz-prev{ inset-inline-start:16px; }
.afg-jazeel .jz-next{ inset-inline-end:16px; }
.afg-jazeel .jz-slider__dots{ display:flex; gap:9px; justify-content:center; margin-top:18px; }
.afg-jazeel .jz-dot{ width:9px; height:9px; border-radius:50%; border:1px solid var(--jz-sage-soft); background:none; cursor:pointer; padding:0; transition:.3s; opacity:.5; }
.afg-jazeel .jz-dot.is-active{ background:var(--jz-sage); border-color:var(--jz-sage); opacity:1; transform:scale(1.25); }

/* ---------- LIGHTBOX ---------- */
.afg-jazeel .jz-lightbox{ position:fixed; inset:0; z-index:99995; display:flex; align-items:center; justify-content:center;
  background:rgba(10,15,12,.94); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.afg-jazeel .jz-lightbox.is-open{ opacity:1; visibility:visible; }
.afg-jazeel .jz-lb__stage{ margin:0; max-width:92vw; max-height:86vh; display:flex; }
.afg-jazeel .jz-lb__img{ max-width:92vw; max-height:86vh; object-fit:contain; border-radius:6px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.afg-jazeel .jz-lb__btn{ position:absolute; z-index:2; width:52px; height:52px; border-radius:50%; border:1px solid rgba(182,210,149,.3);
  background:rgba(20,29,24,.55); color:var(--jz-cream); font-size:24px; cursor:pointer; display:grid; place-items:center; transition:.3s; backdrop-filter:blur(4px); }
.afg-jazeel .jz-lb__btn:hover{ background:var(--jz-sage); color:var(--jz-deep); border-color:var(--jz-sage); }
.afg-jazeel .jz-lb__close{ top:22px; inset-inline-end:22px; font-size:18px; }
.afg-jazeel .jz-lb__prev{ inset-inline-start:18px; top:50%; transform:translateY(-50%); }
.afg-jazeel .jz-lb__next{ inset-inline-end:18px; top:50%; transform:translateY(-50%); }
.afg-jazeel .jz-lb__count{ position:absolute; bottom:22px; inset-inline:0; text-align:center; color:var(--jz-muted); font-size:13px; letter-spacing:.1em; }
@media(max-width:560px){ .afg-jazeel .jz-lb__btn{ width:44px; height:44px; } .afg-jazeel .jz-slider__nav{ width:40px; height:40px; font-size:20px; } }

/* reveal (reuses theme .afg-reveal/.is-in; ensure cream-on-green start) */
.afg-jazeel .afg-reveal{ opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease,ease), transform .9s var(--ease,ease); }
.afg-jazeel .afg-reveal.is-in{ opacity:1; transform:none; }

/* responsive */
@media(max-width:860px){
  .afg-jazeel .jz-breadcrumb{ display:none; }     /* avoid collision with the fixed header */
  .afg-jazeel .jz-about__grid,
  .afg-jazeel .jz-band__grid,
  .afg-jazeel .jz-eoi__grid{ grid-template-columns:1fr; }
  .afg-jazeel .jz-amen__grid{ grid-template-columns:repeat(2,1fr); }
  .afg-jazeel .jz-unit-grid{ grid-template-columns:1fr; }
  .afg-jazeel .jz-band__grid .jz-scene{ order:-1; } /* image above text on mobile */
  .afg-jazeel .jz-portrait{ max-width:420px; margin-inline:auto; }
}
@media(max-width:600px){
  .afg-jazeel .jz-sec{ padding-block:clamp(54px,14vw,80px); }
  .afg-jazeel .jz-wrap{ padding-inline:18px; }
  .afg-jazeel .jz-hero{ min-height:88vh; min-height:88svh; }
  .afg-jazeel .jz-hero h1{ font-size:clamp(38px,13vw,60px); }
  .afg-jazeel .jz-badge{ width:96px; height:96px; margin-bottom:22px; }
  .afg-jazeel .jz-badge .j{ font-size:32px; }
  .afg-jazeel .jz-badge__logo{ width:50px; height:50px; }
  .afg-jazeel .jz-hero .jz-lead{ font-size:15px; }
  .afg-jazeel .jz-cta{ gap:10px; }
  .afg-jazeel .jz-cta .jz-btn{ flex:1 1 100%; justify-content:center; }
  .afg-jazeel .jz-h{ font-size:clamp(26px,7vw,36px); }
  .afg-jazeel .jz-stats{ grid-template-columns:repeat(2,1fr); }
  .afg-jazeel .jz-amen__grid{ grid-template-columns:1fr; }
  .afg-jazeel .jz-slide{ aspect-ratio:4/3; }            /* taller frame fits phones better */
  .afg-jazeel .jz-slider__nav{ width:38px; height:38px; font-size:19px; }
  .afg-jazeel .jz-prev{ inset-inline-start:8px; }
  .afg-jazeel .jz-next{ inset-inline-end:8px; }
  .afg-jazeel .jz-poi{ gap:8px; }
  .afg-jazeel .jz-poi span{ font-size:12px; padding:7px 13px; }
  .afg-jazeel .jz-unit .type{ font-size:38px; }
  .afg-jazeel .jz-tabs{ gap:8px; }
  .afg-jazeel .jz-tab{ padding:9px 16px; font-size:12.5px; }
  .afg-jazeel .jz-map-shell{ height:clamp(260px,60vw,360px); }
  .afg-jazeel .jz-lb__count{ bottom:14px; }
}
@media(prefers-reduced-motion:reduce){
  .afg-jazeel .jz-mesh span,.afg-jazeel .jz-badge svg{ animation:none; }
  .afg-jazeel .afg-reveal{ opacity:1; transform:none; }
  .afg-jazeel .jz-slider__track{ transition:none; }
}