/* Area landing, arch hero (Aziziyah and later areas). Site palette; motion runs for everyone. */
body.al-arch-page{background:#E7E7E2}
.al-arch-page .al-page{background:#E7E7E2}
.al-arch-page .al-header{background:#ffffffd1;border-color:#fff}

.al-arch{--gold:#D9A520;position:relative;height:300vh}
.al-arch-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}

/* The photo */
.al-arch-frame{position:absolute;inset:0;will-change:clip-path;background:#0a1c3a}
.al-arch-frame picture,.al-arch-frame img{display:block;width:100%;height:100%}
.al-arch-frame img{object-fit:cover;object-position:var(--focus,50% 60%);transform:scale(var(--zoom,1.08));transform-origin:50% 62%}
.al-arch-frame:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0a1c3a59 0%,transparent 24%,transparent 62%,#06142b59 100%);opacity:var(--shade,1);pointer-events:none}
.al-arch-frame:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to left,#0a1c3a8c 0%,#0a1c3a33 32%,transparent 55%);opacity:var(--introop,1);pointer-events:none}
html[dir=ltr] .al-arch-frame:before{background:linear-gradient(to right,#0a1c3a8c 0%,#0a1c3a33 32%,transparent 55%)}
.al-arch-grid{position:absolute;inset:0;z-index:2;display:flex;justify-content:space-between;padding:0 3.2%;pointer-events:none;opacity:var(--gridop,1)}
.al-arch-grid i{width:1px;height:100%;background:linear-gradient(180deg,#ffffff8c,#ffffff59 60%,#ffffff2e)}
.al-arch-meta{position:absolute;z-index:2;top:118px;inset-inline:3.2%;display:flex;justify-content:space-between;font:500 11px/1 Poppins,Cairo,sans-serif;letter-spacing:.12em;color:#ffffffc7;opacity:var(--gridop,1)}
.al-arch-intro{position:absolute;z-index:2;top:25%;inset-inline-start:3.2%;max-width:480px;color:#fff;opacity:var(--introop,1);transform:translateY(var(--introy,0))}
html[lang=en] .al-arch-intro{max-width:580px}
.al-arch-intro p{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:15px;font-weight:600;color:#ffffffd9}
.al-arch-intro p:before{content:'';width:26px;height:1px;background:var(--gold)}
.al-page .al-arch-intro h1{margin:0;font-size:clamp(26px,2.6vw,40px);font-weight:800;line-height:1.5;color:#fff}
.al-arch-intro h1 em{font-style:normal;color:#f3d27a}
.al-arch-word{position:absolute;z-index:2;left:50%;bottom:6vh;translate:-50% 0;font-weight:900;font-size:var(--wordsize,18vw);line-height:1.12;color:#F4F6F8;white-space:nowrap;opacity:var(--wordop,1);transform:translateY(var(--wordy,0)) scale(var(--words,1));transform-origin:50% 100%;pointer-events:none;user-select:none}
html[lang=en] .al-arch-word{font-family:Poppins,sans-serif;letter-spacing:-.04em;font-weight:600}
.al-arch-cue{position:absolute;z-index:2;bottom:22px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:#ffffffd9;font-size:12px;font-weight:600;opacity:var(--introop,1)}
.al-arch-cue i{width:1px;height:34px;background:linear-gradient(#fff,transparent);animation:al-arch-drop 2s cubic-bezier(.22,1,.36,1) infinite}
@keyframes al-arch-drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Beside the arch: each line arrives in turn as the arch closes */
.al-arch-side,.al-arch-under{position:absolute;pointer-events:none}
.al-arch.is-open .al-arch-side,.al-arch.is-open .al-arch-under{pointer-events:auto}
.al-arch-side{top:50%;translate:0 -50%;width:calc((100vw - min(40vw,78vh)) / 2 - 3.2vw - 34px);max-width:400px}
.al-arch-side.is-start{inset-inline-start:3.2%}
.al-arch-side.is-end{inset-inline-end:3.2%}
.al-arch-side>*,.al-arch-route li,.al-arch-stats li{--show:clamp(0,calc((var(--sidep,0) - var(--k,0) * .09) * 3.2),1);opacity:var(--show);transform:translateY(calc((1 - var(--show)) * 22px))}
.al-arch-side>.al-arch-route,.al-arch-side>.al-arch-stats{opacity:1;transform:none}
.al-arch-side small{display:block;margin-bottom:12px;font:600 11px/1.4 Poppins,Cairo,sans-serif;letter-spacing:.14em;color:#6b8592;text-transform:uppercase}
.al-arch-side strong{display:block;font-size:clamp(28px,2.9vw,44px);font-weight:800;line-height:1.3;color:var(--navy)}
.al-arch-side strong em{font-style:normal;color:var(--teal)}
.al-arch-lead{margin:16px 0 0;font-size:15px;line-height:1.95;color:#0a2e4dbf;max-width:36ch}

.al-arch-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:28px}
.al-arch-actions .button{gap:9px}
.al-arch-link{font-size:14px;font-weight:700;color:var(--teal);text-decoration:none;border-bottom:1px solid #0e7c7740;padding-bottom:2px}
.al-arch-under{display:none}

@media(max-width:1180px) and (min-width:801px){
 .al-arch-lead{display:none}
 .al-arch-side strong{font-size:28px}
}
/* Phones: title above the arch, numbers under it; the route stays for the larger screen. */
@media(max-width:800px){
 .al-arch{height:270vh}
 .al-arch-frame img{object-position:50% 58%}
 .al-arch-meta{top:96px;font-size:10px}
 .al-arch-intro{top:17%;inset-inline-end:6%}.al-page .al-arch-intro h1{font-size:26px}
 .al-arch-frame:before{background:linear-gradient(180deg,#0a1c3a73 0%,#0a1c3a26 40%,transparent 60%)}
 .al-arch-grid i:nth-child(2),.al-arch-grid i:nth-child(4){display:none}
 .al-arch-side{top:11vh;translate:none;width:auto;max-width:none;inset-inline:6%!important}
 .al-arch-side small{margin-bottom:6px;font-size:10px}
 .al-arch-side strong{font-size:24px}
 .al-arch-side strong br{display:none}
 .al-arch-side .al-arch-lead,.al-arch-side .al-arch-stats,.al-arch-side.is-end{display:none}
 .al-arch-under{display:block;inset-inline:5%;bottom:calc(96px + env(safe-area-inset-bottom))}
 .al-arch-word{bottom:13vh}.al-arch-cue{display:none}
}
@media(max-width:800px){
 html[dir=ltr] .al-arch-skyroute:before{transform-origin:left}
}

/* Numbers beside the arch: line icons, hairlines, no boxes */
.al-arch-stats{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:26px}
.al-arch-stats li{display:grid;grid-template-columns:30px 1fr;column-gap:12px;align-items:center;padding:16px 0;border-top:1px solid #0a2e4d1f}
.al-stat-icon{grid-row:span 2;width:28px;height:28px;color:var(--gold)}
.al-arch-stats b{font-size:19px;font-weight:800;line-height:1.35;color:var(--navy)}
.al-arch-stats span{font-size:12.5px;line-height:1.6;color:#0a2e4d99}

/* The road: Haram, the area, Mina, drawn as the arch closes */
.al-road-wrap{margin-top:6px}
.al-road{display:block;width:100%;max-width:380px;overflow:visible}
.al-road-ghost{fill:none;stroke:#0a2e4d1f;stroke-width:1.4;stroke-dasharray:3 6}
.al-road-line{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:max(0,calc(1 - var(--sidep,0) * 1.6))}
.al-road text{font:700 14px Cairo,Poppins,sans-serif;fill:var(--navy)}
.al-road-stop{opacity:clamp(0,calc(var(--sidep,0) * 4 - .4),1)}
.al-road-haram rect{fill:var(--navy)}.al-road-haram .al-road-band{fill:var(--gold)}
.al-road-mina path{fill:none;stroke:var(--navy);stroke-width:1.6;stroke-linejoin:round}.al-road-mina .al-road-door{stroke:var(--gold)}
.al-road-here{opacity:clamp(0,calc(var(--sidep,0) * 3 - 1.2),1)}
.al-road-here text{font-size:20px;font-weight:800;fill:var(--teal)}
.al-road-dot{fill:var(--gold);stroke:#fff;stroke-width:3}
.al-road-pulse{fill:none;stroke:var(--gold);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:al-road-pulse 2.6s ease-out infinite}
@keyframes al-road-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.8);opacity:0}}
.al-road-note{margin:2px 0 0;font-size:13px;font-weight:700;color:#8a6510}
.al-road-note:before{content:'';display:inline-block;width:22px;height:1px;margin-inline-end:10px;vertical-align:middle;background:var(--gold)}
.al-arch-skyroute{display:none}

@media(max-width:800px){
 .al-arch-side{top:84px}
 .al-arch-skyroute{display:block;position:absolute;z-index:3;left:50%;translate:-50% 0;top:var(--sky-top,30vh);width:min(300px,66vw);pointer-events:none}
 .al-road.is-sky text{fill:#ffffffe6;font-size:15px}
 .al-road.is-sky .al-road-here text{fill:#f3d27a;font-size:20px}
 .al-road.is-sky .al-road-ghost{stroke:#ffffff33}
 .al-road.is-sky .al-road-haram rect:not(.al-road-band){fill:#fff}
 .al-road.is-sky .al-road-mina path{stroke:#fff}
 .al-road.is-sky .al-road-dot{stroke:#0a1c3a}
 .al-arch-under{display:block;inset-inline:5%;bottom:calc(92px + env(safe-area-inset-bottom))}
 .al-arch-under .al-arch-stats{margin:0;grid-template-columns:repeat(3,1fr);column-gap:0}
 .al-arch-under .al-arch-stats li{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:4px;padding:4px 6px;border-top:0;border-inline-start:1px solid #0a2e4d1f}
 .al-arch-under .al-arch-stats li:first-child{border-inline-start:0}
 .al-arch-under .al-stat-icon{grid-row:auto;width:24px;height:24px}
 .al-arch-under .al-arch-stats b{font-size:15px}
 .al-arch-under .al-arch-stats span{font-size:10.5px;line-height:1.45}
}

/* The place, said simply */
.al-arch-place{margin:0;font-size:clamp(22px,1.9vw,28px);font-weight:700;line-height:1.7;color:var(--navy);max-width:16em}
.al-arch-place em{font-style:normal;color:var(--teal)}
.al-arch-rule{display:block;width:56px;height:1px;margin:26px 0 0;background:var(--gold)}

/* Numbers: lighter, finer type */
.al-arch-stats b{font-weight:500;font-size:20px;letter-spacing:-.2px;color:var(--navy)}
.al-arch-stats span{font-weight:400;font-size:12.5px;color:#0a2e4d8c}
.al-stat-icon{stroke-width:1.1}
@media(max-width:800px){
 .al-arch-under .al-arch-stats{grid-template-columns:1fr 1fr;row-gap:0}
 .al-arch-under .al-arch-stats li{grid-template-columns:22px 1fr;justify-items:start;text-align:start;column-gap:9px;row-gap:0;padding:10px 12px;border-inline-start:0;border-top:1px solid #0a2e4d1a}
 .al-arch-under .al-arch-stats li:nth-child(even){border-inline-start:1px solid #0a2e4d1a}
 .al-arch-under .al-arch-stats li:nth-child(-n+2){border-top:0}
 .al-arch-under .al-stat-icon{grid-row:span 2;width:20px;height:20px}
 .al-arch-under .al-arch-stats b{font-size:15px;font-weight:500}
 .al-arch-under .al-arch-stats span{font-size:11px}
}
/* Smaller titles for the four facts */
.al-arch-stats b{font-size:16px}
@media(max-width:800px){.al-arch-under .al-arch-stats b{font-size:13.5px}}

/* Phones: the WhatsApp bar steps aside during the arch, so the numbers sit lower and the photo gets the room. */
@media(max-width:800px){
 body.al-arch-page.al-in-arch .al-sticky{opacity:0;visibility:hidden;transform:translateY(100%)}
 .al-arch-under{bottom:calc(18px + env(safe-area-inset-bottom))}
 .al-arch-side{top:calc(80px + env(safe-area-inset-top))}
 .area-landing.al-arch-page .al-sticky .button,.area-landing.al-arch-page .al-sticky .button:hover,.area-landing.al-arch-page .al-sticky .button:focus{background:var(--teal);border-color:var(--teal);color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
 .area-landing.al-arch-page .al-sticky .button .hc-icon{color:#fff}
}