/* Arch pages (Aziziyah): the story after the hero. Site palette: navy, teal, sky, paper, warm, gold. */
.al-story{--navy:#0A2E4D;--teal:#0E7C77;--sky:#8DBEC5;--paper:#F4F6F8;--warm:#E7E7E2;--gold:#D9A520;--ease:cubic-bezier(.22,1,.36,1)}
.al-story .st-label{margin:0 0 14px;font:600 11.5px/1.4 Poppins,Cairo,sans-serif;letter-spacing:.16em;color:var(--teal);text-transform:uppercase}
.al-story h2:not(.hc-card *){margin:0;font-size:clamp(28px,3vw,44px);font-weight:800;line-height:1.35;letter-spacing:-.3px;color:var(--navy)}
.al-story h2 em{font-style:normal;color:var(--teal)}
.st-in{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.st-in.is-in{opacity:1;transform:none}

/* 1. Opening: a quiet statement with room around it */
.st-intro{max-width:820px;margin:0 auto;padding:150px 24px 130px;text-align:center}
.st-arch-icon{display:inline-block;width:40px;color:var(--gold);margin-bottom:26px}
.st-arch-icon svg{display:block;width:100%}
.al-story .st-intro h2{font-size:clamp(30px,3.6vw,52px);line-height:1.45}
.st-intro-text{max-width:600px;margin:26px auto 0;font-size:17px;line-height:2.05;color:#0a2e4dbf}
.st-sign{margin:30px 0 0;font-size:13px;font-weight:700;color:#8a6510}
.st-sign:before{content:'';display:inline-block;width:28px;height:1px;margin-inline-end:12px;vertical-align:middle;background:var(--gold)}

/* 2. Hotels as a gallery of arches */
.st-hotels{padding:40px 0 140px}
.st-hotels-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;width:min(1320px,88%);margin:0 auto 46px}
.st-hotels-nav{display:flex;align-items:center;gap:12px}
.st-count{font:500 14px Poppins,sans-serif;color:#0a2e4d99;margin-inline-end:10px}.st-count b{color:var(--navy);font-weight:600}
.st-arrow{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid #0a2e4d26;background:#fbfcfa;color:var(--navy);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.st-arrow:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.st-arrow svg{width:20px;height:20px}
html[dir=ltr] .st-arrow svg{transform:scaleX(-1)}
.st-gallery{display:flex;gap:clamp(18px,2.4vw,34px);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 6% 10px;scrollbar-width:none;outline:none}
.st-gallery::-webkit-scrollbar{display:none}
.st-hotel{flex:none;width:clamp(260px,26vw,380px);scroll-snap-align:center;opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease) calc(var(--i)*90ms),transform 1.1s var(--ease) calc(var(--i)*90ms)}
.st-hotels.is-in .st-hotel{opacity:1;transform:none}
.st-hotel-arch{display:block;aspect-ratio:3/4;border-radius:999px 999px 14px 14px;overflow:hidden;background:#d9dfdd;position:relative}
.st-hotel-arch:after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffffff40;pointer-events:none}
.st-hotel-arch img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform 1.4s var(--ease)}
.st-hotel:hover .st-hotel-arch img{transform:scale(1.1)}
.st-hotel-blank{display:grid;place-items:center;width:100%;height:100%;color:var(--gold)}.st-hotel-blank svg{width:54px}
.st-hotel-meta{display:flex;align-items:center;justify-content:space-between;margin:20px 4px 6px}
.st-hotel-no{font:500 13px Poppins,sans-serif;color:#0a2e4d80;letter-spacing:.1em}
.st-stars{display:flex;gap:4px}.st-stars i{width:7px;height:7px;transform:rotate(45deg);background:var(--gold)}
.al-story .st-hotel h3{margin:0 4px;font-size:21px;font-weight:800;line-height:1.5;color:var(--navy)}
.st-hotel h3 a{color:inherit;text-decoration:none}
.st-hotel-dist{margin:4px 4px 0;font-size:13.5px;color:#0a2e4d99}
.st-hotel-links{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 4px 0;padding-top:14px;border-top:1px solid #0a2e4d1a}
.st-hotel-view{font-size:14px;font-weight:700;color:var(--navy);text-decoration:none}
.st-hotel-view:after{content:' ←';color:var(--teal)}html[dir=ltr] .st-hotel-view:after{content:' →'}
.st-hotel-ask{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--teal);text-decoration:none}
.st-hotel-ask .hc-icon{width:18px;height:18px}
.st-empty{width:min(760px,88%);margin:0 auto;padding:30px;border-radius:24px;background:#fbfcfa;text-align:center;font-size:16px;line-height:1.9;color:#0a2e4dbf}
.st-empty a{color:var(--teal);font-weight:700}
.st-all{text-align:center;margin-top:30px}.st-all a{font-weight:700;color:var(--teal)}
.st-demo-note{width:min(1320px,88%);margin:14px auto 0;font:12px Poppins,sans-serif;color:#a33}

/* 3. The day: the sky turns from dawn to night as you scroll */
.st-day{position:relative;height:calc(100vh + var(--n,6) * 55vh)}
.st-day-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;color:var(--day-ink,#0A2E4D);transition:color .6s}
.st-day-sky{position:absolute;inset:0;background:linear-gradient(180deg,var(--sky-top,#203f66),var(--sky-bottom,#e9c89a))}
.st-sun{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;left:var(--sun-x,20%);top:var(--sun-y,70%);background:radial-gradient(circle,#fff6dc 0%,#f6d58a 45%,#f6d58a00 70%);opacity:var(--sun-op,1)}
.st-stars-field{position:absolute;inset:0 0 40% 0;opacity:var(--star-op,0);background-image:radial-gradient(1.4px 1.4px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 28% 12%,#fff,transparent),radial-gradient(1.2px 1.2px at 44% 30%,#fff,transparent),radial-gradient(1px 1px at 63% 16%,#fff,transparent),radial-gradient(1.5px 1.5px at 78% 26%,#fff,transparent),radial-gradient(1px 1px at 90% 9%,#fff,transparent),radial-gradient(1.2px 1.2px at 52% 8%,#fff,transparent),radial-gradient(1px 1px at 6% 40%,#fff,transparent)}
.st-skyline{position:absolute;inset-inline:0;bottom:0;width:100%;height:46vh;color:var(--day-ink,#0A2E4D);opacity:.1;pointer-events:none}
.st-day-head{position:absolute;top:15vh;inset-inline-start:6%;max-width:520px}
.al-story .st-day-head h2,.al-story .st-day-head .st-label{color:inherit}
.st-day-head .st-label{opacity:.75}
.st-day-track{position:absolute;bottom:17vh;inset-inline-start:0;display:flex;gap:4vw;list-style:none;margin:0;padding:0 6%;transform:translateX(var(--track-x,0));will-change:transform}
.st-moment{flex:none;width:clamp(240px,24vw,340px);opacity:.38;transition:opacity .5s}
.st-moment.is-now{opacity:1}
.st-moment-time{display:inline-block;margin-bottom:14px;padding:5px 14px;border-radius:999px;border:1px solid currentColor;font-size:12.5px;font-weight:700}
.al-story .st-moment h3{margin:0 0 8px;font-size:clamp(24px,2.3vw,34px);font-weight:800;color:inherit}
.st-moment p{margin:0;font-size:15.5px;line-height:1.9;opacity:.85}
.st-day-line{position:absolute;bottom:10vh;inset-inline:6%;height:1px;background:currentColor;opacity:.3}
.st-day-line i{position:absolute;inset-block:-1px;inset-inline-start:0;width:calc(var(--day-p,0) * 100%);background:var(--gold);opacity:1}


/* 5. Questions, set like an editorial page */
.st-faq{display:grid;grid-template-columns:minmax(240px,.7fr) 1.3fr;gap:clamp(40px,6vw,100px);width:min(1180px,88%);margin:0 auto;padding:40px 0 150px}
.st-faq-side{position:sticky;top:120px;align-self:start}
.st-faq-ask{display:inline-block;margin-top:24px;font-weight:700;color:var(--teal);border-bottom:1px solid #0e7c7766;padding-bottom:3px;text-decoration:none}
.st-faq-list details{border-top:1px solid #0a2e4d26}
.st-faq-list details:last-child{border-bottom:1px solid #0a2e4d26}
.st-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0;list-style:none;cursor:pointer;font-size:clamp(18px,1.6vw,22px);font-weight:700;color:var(--navy)}
.st-faq-list summary::-webkit-details-marker{display:none}
.st-faq-list summary i{position:relative;flex:none;width:18px;height:18px}
.st-faq-list summary i:before,.st-faq-list summary i:after{content:'';position:absolute;top:50%;left:0;right:0;height:1.5px;background:var(--teal);transition:transform .4s var(--ease)}
.st-faq-list summary i:after{transform:rotate(90deg)}
.st-faq-list details[open] summary i:after{transform:rotate(0)}
.st-faq-list details p{margin:-6px 0 26px;max-width:62ch;font-size:15.5px;line-height:2;color:#0a2e4dbf}


@media(max-width:800px){
 .st-intro{padding:100px 7% 90px}
 .st-intro-text{font-size:15.5px}
 .st-hotels{padding:20px 0 100px}
 .st-hotels-head{align-items:flex-start;flex-direction:column;gap:18px;margin-bottom:30px}
 .st-arrow{width:44px;height:44px}
 .st-hotel{width:76vw}
 .st-day{height:calc(100vh + var(--n,6) * 45vh)}
 .st-day-head{top:13vh;inset-inline-end:6%}
 .st-day-track{bottom:24vh;gap:8vw}
 .st-day-line{bottom:19vh}
 .st-moment{width:72vw}
 .st-faq{grid-template-columns:1fr;padding-bottom:100px;gap:20px}
 .st-faq-side{position:static}
}

/* Hotels: the site's own cards in a sideways rail */
.st-rail-wrap{width:min(1320px,88%);margin:0 auto}
.st-rail-wrap .al-hc .hc-grid{--al-gap:24px}

/* Closing scene and footer, as on Ajyad: a fixed photo behind the page, the glass card and the floating glass footer over it. */
.al-endshot{background:#0a1626}
.al-endshot picture{display:block;width:100%;height:100%}
.al-endshot img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 60%)}
@media(orientation:portrait){.al-endshot img{object-position:var(--focus-small,60% 70%)}}

/* Why the area: an editorial page, a gold arch drawn behind the heading, three points between hairlines */
.st-why{position:relative;width:min(1180px,88%);margin:0 auto;padding:150px 0 140px;text-align:center;overflow:hidden}
.st-why-arch{position:absolute;top:84px;left:50%;width:min(560px,84vw);translate:-50% 0}
.st-why .st-draw{stroke-width:1.2}
.st-why.is-in .st-draw{stroke-dashoffset:0}
.st-why-head{position:relative;padding-top:70px}
.al-story .st-why-head h2{font-size:clamp(30px,3.4vw,50px);line-height:1.4}
.st-why-list{position:relative;display:grid;grid-template-columns:repeat(3,1fr);list-style:none;margin:90px 0 0;padding:0;text-align:start}
.st-why-list li{padding:6px clamp(20px,3vw,44px) 0;border-inline-start:1px solid #0a2e4d1f;transition-delay:calc(var(--i)*140ms)}
.st-why-list li:first-child{border-inline-start:0;padding-inline-start:0}
.st-why-no{display:block;margin-bottom:22px;font:300 46px/1 Poppins,sans-serif;color:var(--gold);letter-spacing:-.02em}
.al-story .st-why-list h3{margin:0 0 12px;font-size:21px;font-weight:800;color:var(--navy)}
.st-why-list p{margin:0;font-size:15px;line-height:2;color:#0a2e4db3}
@media(max-width:800px){
 .st-why{padding:100px 0 90px}
 .st-why-arch{top:60px;width:92vw}
 .st-why-head{padding-top:54px}
 .st-why-list{grid-template-columns:1fr;margin-top:56px}
 .st-why-list li{padding:28px 0;border-inline-start:0;border-top:1px solid #0a2e4d1f}
 .st-why-no{margin-bottom:14px;font-size:38px}
}
.st-draw{stroke:var(--gold);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s var(--ease)}