/* Jabal Omar hero: full window view, huge area name along the bottom, title on one side, a floating card cycling hotels. */
.al-view{--gold:#D9A520;position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;background:#07142b;color:#fff}
.al-view-photo{position:absolute;inset:0}
.al-view-photo picture,.al-view-photo img{display:block;width:100%;height:100%}
.al-view-photo img{object-fit:cover;object-position:50% 62%;transform:scale(1.03);animation:al-view-in 1.6s cubic-bezier(.22,1,.36,1) both}
@keyframes al-view-in{from{transform:scale(1.08)}to{transform:scale(1.03)}}
.al-view-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(to left,#04102499 0%,#04102459 34%,transparent 60%),linear-gradient(180deg,#0410244d 0%,transparent 24%,transparent 58%,#041024a6 100%);pointer-events:none}
html[dir=ltr] .al-view-photo:after{background:linear-gradient(to right,#04102499 0%,#04102459 34%,transparent 60%),linear-gradient(180deg,#0410244d 0%,transparent 24%,transparent 58%,#041024a6 100%)}

.al-view-inner{position:relative;z-index:2;height:100%;width:min(1320px,90%);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:40px;padding:clamp(120px,15vh,150px) 0 calc(var(--wordh,22vh) + 16px)}
.al-view-copy{max-width:560px}
.al-page .al-view h1{margin:0;font-size:clamp(36px,min(4.4vw,7.4vh),66px);font-weight:800;line-height:1.22;color:#fff}
.al-view-line{display:block;overflow:hidden;padding-bottom:.06em}
.al-view-line>span{display:block;animation:al-view-up 1s cubic-bezier(.22,1,.36,1) both;animation-delay:.25s}
.al-view-line+.al-view-line>span{animation-delay:.38s;font-weight:500;color:#8FD8D2}
@keyframes al-view-up{from{transform:translateY(105%)}to{transform:none}}
.al-view-lead{margin:min(20px,2.4vh) 0 0;max-width:42ch;font-size:clamp(14.5px,min(1.2vw,2.1vh),17px);line-height:1.9;color:#ffffffe0;animation:al-view-fade .9s ease .6s both}
@keyframes al-view-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.al-view-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:min(30px,3.4vh);padding-top:min(26px,3vh);border-top:1px solid #ffffff33;animation:al-view-fade .9s ease .75s both}
.al-view-stats{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.al-view-stats li{display:flex;flex-direction:column;line-height:1.35}
.al-view-stats b{font-size:18px;font-weight:600;color:#fff}
.al-view-stats span{font-size:12px;color:#ffffffbf}

/* A small still card: the hero photo, close in, with one line under it */
.al-view-card{flex:none;width:min(300px,24vw);margin:0;padding:10px;border-radius:22px;background:#fff;box-shadow:0 30px 70px #0410244d;animation:al-view-fade 1s ease .9s both}
.al-view-card-img{display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden}
.al-view-card-img img{width:100%;height:100%;object-fit:cover;object-position:62% 70%;display:block;transform:scale(1.5);transform-origin:62% 70%}
.al-view-card figcaption{display:flex;flex-direction:column;gap:2px;padding:12px 6px 4px;line-height:1.5}
.al-view-card b{font-size:16px;font-weight:700;color:var(--navy)}
.al-view-card figcaption span{font-size:12.5px;color:#0a2e4d99}
/* The area's name, huge, along the bottom edge */
.al-view-word{position:absolute;z-index:1;inset-inline:0;bottom:0;display:flex;justify-content:center;overflow:hidden;pointer-events:none}
.al-view-word span{display:block;font-weight:900;font-size:var(--wordsize,20vw);line-height:1.32;letter-spacing:-.01em;color:#fff;white-space:nowrap;animation:al-word-rise 1.1s cubic-bezier(.22,1,.36,1) .35s both}
@keyframes al-word-rise{from{opacity:0;transform:translateY(18px);filter:blur(12px)}to{opacity:1;transform:none;filter:blur(0)}}
html[lang=en] .al-view-word span{font-family:Poppins,sans-serif;font-weight:600;letter-spacing:-.04em}
body.al-in-arch .al-float{opacity:0;visibility:hidden}

@media(max-height:720px) and (min-width:801px){.al-view-lead{display:none}}
@media(max-width:1000px) and (min-width:801px){.al-view-card{width:300px}}
@media(max-width:800px){
 .al-view{min-height:640px}
 .al-view-inner{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:18px;width:auto;padding:max(112px,15svh) 20px calc(var(--wordh,16vh) + 6px)}
 .al-view-photo:after{background:linear-gradient(180deg,#04102480 0%,#04102433 40%,transparent 58%,#04102499 100%)}
 .al-page .al-view h1{font-size:clamp(32px,9.4vw,42px)}
 .al-view-lead{display:none}
 .al-view-actions{margin-top:16px;padding-top:16px;gap:14px}
 .al-view-cta{width:100%}
 .al-view-stats{width:100%;justify-content:space-between}
 .al-view-card{display:none}
 .al-view-slide.is-on{display:grid;grid-template-columns:86px 1fr;grid-template-rows:auto auto;column-gap:12px;width:100%;align-items:center}
 .al-view-slide-img{grid-row:span 2;aspect-ratio:1;border-radius:12px}
 .al-view-slide-row{margin:0;padding:0;border:0}
 .al-view-slide-row b{font-size:14.5px}
 .al-view-slide-meta{margin:2px 0 0}
 .al-view-dots{top:10px;bottom:auto;inset-inline-end:auto;inset-inline-start:12px;background:#07142b80}
}

html[lang=en] .al-page .al-view h1{font-size:clamp(32px,min(3.6vw,6.4vh),54px);line-height:1.15}
html[lang=en] .al-view-copy{max-width:520px}
@media(max-width:800px){.al-view-card{width:100%;display:none;grid-template-columns:96px 1fr;align-items:center;gap:12px;padding:8px;order:-1}.al-view-card-img{aspect-ratio:1}.al-view-card figcaption{padding:0}}

/* The big name sits a little above the bottom edge */
.al-view-word{bottom:clamp(18px,4.5vh,44px)}
@media(max-width:800px){.al-view-word{bottom:20px}}
/* This page: every light section shares one colour (the site's paper white) */
body.al-arch-page,.al-arch-page .al-page,.al-story .st-bento,.al-story .st-reveal,.al-story .st-float,.al-story .st-hotels{background:#F4F6F8!important}

/* Site buttons inside the hero */
.al-view-actions .al-wa-button{min-height:50px;padding-inline:26px;font-size:13px}
@media(max-width:800px){
 .al-view-lead{display:block;margin-top:12px;font-size:14.5px;line-height:1.85}
 .al-view-actions{border-top:0;padding-top:0;margin-top:18px}
 .al-view-stats{padding-top:14px;border-top:1px solid #ffffff2e}
}
@media(max-width:800px) and (max-height:760px){.al-view-lead{display:none}}

/* Mobile hero, rebuilt */
.al-view-more{display:none}
@media(max-width:800px){
 .al-view-photo:after{background:linear-gradient(180deg,#041024cc 0%,#0410248c 26%,#04102440 46%,transparent 60%,#04102480 100%)}
 .al-view-actions{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin-top:20px}
 .al-view-btns{display:flex;gap:10px}
 .al-view-btns .button{flex:1 1 0;min-height:48px;padding:10px 12px;gap:9px;font-size:13px;white-space:nowrap}
 html[lang=en] .al-view-btns .button{font-size:12.5px}
 .al-view-btns .hc-icon{width:19px;height:19px}
 .al-view-cta{width:auto}
 .al-view-more{display:inline-flex}
 .al-view-stats{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:12px 4px;border:1px solid #ffffff24;border-radius:14px;background:#0410248c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
 .al-view-stats li{padding:0 14px;min-width:0}
 .al-view-stats li+li{border-inline-start:1px solid #ffffff2e}
 .al-view-stats b{font-size:17px}
 .al-view-stats span{font-size:12px;color:#ffffffd9;white-space:normal}
}
@media(max-width:340px){.al-view-btns{flex-direction:column}}