/* Zakher hero, after the Vista Haven idea: a rounded photo frame inside the page margins, copy on the photo,
   and a cut-out corner. The frame is sized to the first screen, so nothing is ever cut off. */
.al-frame{--gold:#D9A520;--bg:#E7E7E2;--top:14px;--bottom:14px;--side:clamp(12px,1.4vw,26px);--r:34px;--notch-r:30px;position:relative;height:100vh;height:100svh;min-height:560px;padding:var(--top) var(--side) var(--bottom)}
.al-frame-box{position:relative;height:100%;border-radius:var(--r);overflow:hidden;background:#152844;animation:al-frame-open 1.3s cubic-bezier(.77,0,.18,1) both}
@keyframes al-frame-open{from{clip-path:inset(8% 6% 8% 6% round 60px)}to{clip-path:inset(0 0 0 0 round var(--r))}}
.al-frame-box picture,.al-frame-box img{display:block;width:100%;height:100%}
.al-frame-box img{object-fit:cover;object-position:var(--focus,50% 50%);animation:al-frame-zoom 2.4s cubic-bezier(.22,1,.36,1) both}
@keyframes al-frame-zoom{from{transform:scale(1.14)}to{transform:scale(1)}}
/* Shade under the words so they read on any photo (no text shadow). */
.al-frame-box:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to left,#071a33e6 0%,#071a33b3 28%,#071a3352 52%,transparent 72%),linear-gradient(180deg,#071a3359 0%,transparent 26%,transparent 70%,#071a3373 100%)}
html[dir=ltr] .al-frame-box:after{background:linear-gradient(to right,#071a33e6 0%,#071a33b3 28%,#071a3352 52%,transparent 72%),linear-gradient(180deg,#071a3359 0%,transparent 26%,transparent 70%,#071a3373 100%)}

/* Copy: vertically centred in the frame, sized by the screen height as well as the width */
.al-frame-copy{position:absolute;z-index:2;inset-block:0;inset-inline-start:clamp(28px,6vw,110px);display:flex;flex-direction:column;justify-content:center;width:min(660px,48%);padding-top:96px;padding-bottom:5vh;color:#fff}
.al-frame-kicker{display:flex;align-items:center;gap:10px;margin:0 0 min(18px,2vh);font:600 12px/1.4 Poppins,Cairo,sans-serif;letter-spacing:.16em;color:#ffffffd9;animation:al-frame-fade .9s ease .7s both}
.al-frame-kicker:before{content:'';width:28px;height:1px;background:var(--gold)}
.al-page .al-frame h1{margin:0;font-size:clamp(32px,min(4.5vw,7.6vh),70px);font-weight:800;line-height:1.22;letter-spacing:-.5px;color:#fff}
.al-frame-line{display:block;overflow:hidden;padding-bottom:.06em}
.al-frame-line>span{display:block;animation:al-frame-up 1s cubic-bezier(.22,1,.36,1) .75s both}
.al-frame-line.is-em>span{font-weight:600;color:#f3d27a;animation-delay:.87s}
@keyframes al-frame-up{from{transform:translateY(105%)}to{transform:none}}
@keyframes al-frame-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.al-frame-lead{margin:min(20px,2.4vh) 0 min(26px,3vh);max-width:44ch;font-size:clamp(14px,min(1.15vw,2vh),17px);line-height:1.9;color:#ffffffe0;animation:al-frame-fade .9s ease 1s both}
.al-frame-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:14px;padding:7px 7px 7px 22px;border-radius:999px;background:#fff;color:var(--navy);font-size:14.5px;font-weight:700;text-decoration:none;animation:al-frame-fade .9s ease 1.1s both;transition:transform .3s}
html[dir=rtl] .al-frame-cta{padding:7px 22px 7px 7px}
.al-frame-cta i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;transition:transform .35s}
.al-frame-cta i svg{width:16px;height:16px}
html[dir=rtl] .al-frame-cta i svg{transform:scaleX(-1)}
.al-frame-cta:hover{transform:translateY(-2px)}.al-frame-cta:hover i{transform:rotate(45deg)}
html[dir=rtl] .al-frame-cta:hover i{transform:rotate(-45deg)}
.al-frame-stats{display:flex;gap:clamp(24px,3.4vw,56px);list-style:none;margin:min(44px,5vh) 0 0;padding:0}
.al-frame-stats li{display:flex;flex-direction:column;gap:2px;animation:al-frame-fade .9s ease both;animation-delay:calc(1.2s + var(--k) * .12s)}
.al-frame-stats b{font-size:clamp(24px,min(2.6vw,4.6vh),42px);font-weight:400;line-height:1.15;color:#fff}
.al-frame-stats span{font-size:13px;color:#ffffffcc}

/* The cut-out corner: the page colour, with soft inner curves where it meets the photo */
.al-frame-notch{position:absolute;z-index:3;inset-inline-end:var(--side);bottom:var(--bottom);display:flex;align-items:center;gap:16px;padding:16px 0 0;padding-inline-start:18px;background:var(--bg);border-start-start-radius:var(--notch-r);animation:al-frame-fade .9s ease 1.3s both}
.al-frame-notch:before,.al-frame-notch:after{content:'';position:absolute;width:var(--notch-r);height:var(--notch-r);pointer-events:none}
.al-frame-notch:before{bottom:100%;inset-inline-end:0;background:radial-gradient(circle at 0 0,transparent calc(var(--notch-r) - 1px),var(--bg) var(--notch-r))}
.al-frame-notch:after{bottom:0;inset-inline-end:100%;background:radial-gradient(circle at 0 0,transparent calc(var(--notch-r) - 1px),var(--bg) var(--notch-r))}
html[dir=rtl] .al-frame-notch:before,html[dir=rtl] .al-frame-notch:after{background:radial-gradient(circle at 100% 0,transparent calc(var(--notch-r) - 1px),var(--bg) var(--notch-r))}
.al-frame-faces{display:flex}
.al-frame-faces img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:3px solid var(--bg);margin-inline-start:-14px}
.al-frame-faces img:first-child{margin-inline-start:0}
.al-frame-notch-copy{display:flex;flex-direction:column;line-height:1.5}
.al-frame-notch-copy b{font-size:15px;font-weight:700;color:var(--navy)}
.al-frame-notch-copy span{font-size:12px;color:#0a2e4d99}
.area-landing .al-frame-wa{min-height:48px;padding:8px 22px;gap:10px;border-radius:999px;white-space:nowrap}

/* While the hero is on screen the floating WhatsApp circle steps aside (the corner has the button). */
body.al-in-arch .al-float{opacity:0;visibility:hidden}

/* Short laptop screens: keep everything inside the frame */
@media(max-height:760px) and (min-width:801px){.al-frame-lead{display:none}.al-frame-stats{margin-top:3.4vh}}
@media(max-width:1100px) and (min-width:801px){.al-frame-copy{width:min(560px,62%)}.al-frame-notch-copy span{display:none}}

/* Phones: the words sit at the bottom of the frame, the corner holds only the button */
@media(max-width:800px){
 .al-frame{--r:26px;--notch-r:22px;min-height:600px}
 .al-frame-box:after{background:linear-gradient(180deg,#071a3333 0%,transparent 24%,#071a3366 48%,#071a33e6 100%)}
 .al-frame-copy{inset-block:auto 0;inset-inline:22px;width:auto;justify-content:flex-end;padding-bottom:96px}
 .al-page .al-frame h1{font-size:clamp(30px,8.6vw,40px)}
 .al-frame-lead{display:none}
 .al-frame-cta{display:none}
 .al-frame-stats{margin-top:20px;gap:22px}
 .al-frame-stats b{font-size:21px}
 .al-frame-stats span{font-size:11px}
 .al-frame-notch{gap:10px;padding:10px 0 0;padding-inline-start:12px}
 .al-frame-faces img{width:40px;height:40px;border-width:2px;margin-inline-start:-12px}
 .al-frame-notch-copy{display:none}
 .area-landing .al-frame-wa{min-height:46px;padding:6px 18px;font-size:13.5px}
}

/* The site header floats over the top of the photo in its usual light glass, with the logo in its own colours */
.al-frame-page .al-header{top:calc(14px + 18px)}
@media(max-width:800px){.al-frame{--top:10px;--bottom:10px;--side:10px}.al-frame-page .al-header{top:22px}}
/* "ذاخر.." is the big word; the line under it is smaller. The button always has room above it. */
.al-frame-line:not(.is-em)>span{font-size:1.55em;line-height:1.05}
.al-frame-line.is-em>span{font-size:.92em}
.al-frame-cta{margin-top:min(26px,3vh)}
.al-frame-lead{margin-bottom:0}
@media(max-height:760px) and (min-width:801px){.al-frame-cta{margin-top:3.2vh}}
@media(max-width:800px){.al-frame-line:not(.is-em)>span{font-size:1.5em}.al-frame-line.is-em>span{font-size:.9em}}