/* Area landing pages. Colours and type come from the theme tokens in home-v3.css. */
.area-landing{--al-header-ease:cubic-bezier(.22,1,.36,1);--al-surface:#fbfcfa;--al-tint:#edf7f5;--al-gold:#d9a520;--al-glass:#fbfcfac7;--al-glass-strong:#fbfcfae3;--al-glass-line:#ffffffa6;--al-blur:blur(16px) saturate(1.15);--muted:#0a2e4dcc;background:var(--al-surface);font-size:16px}
.area-landing main,.area-landing #main>section{background:transparent}
.al-page{position:relative;z-index:1}

/* The video is one fixed layer behind the whole page; scroll position picks the frame. */
.al-scrub{position:fixed;z-index:0;top:0;inset-inline:0;height:100vh;height:100lvh;overflow:hidden;pointer-events:none}
.al-scrub video{position:relative;display:block;width:100%;height:100%;object-fit:cover;object-position:center center;opacity:0}
.al-scrub.is-live video{opacity:1}
/* Soft edges for the closing frame only: tone at the very top, ivory on the marble at the bottom. */
.al-scrub:after{content:"";position:absolute;inset:0;opacity:var(--end,0);pointer-events:none;background:linear-gradient(180deg,#0a2e4d3d 0%,#0a2e4d00 12%),linear-gradient(0deg,#fbfcfad1 0%,#fbfcfa8c 7%,#fbfcfa1f 14%,#fbfcfa00 28%)}

/* Frosted panels keep the copy readable over bright sky and clouds. */
.al-subtitle,.al-head,.al-tile,.al-points li,.al-steps,.al-faq-layout,.al-empty,.al-finale-copy{background:var(--al-glass);border:1px solid var(--al-glass-line);box-shadow:0 18px 50px #0a2e4d14;backdrop-filter:var(--al-blur);-webkit-backdrop-filter:var(--al-blur)}
.al-head,.al-faq-layout{border-radius:22px;padding:clamp(22px,3vw,40px)}
.al-head,.al-subtitle{width:fit-content;max-width:100%}
.al-subtitle{padding:10px 24px;border-radius:16px}
.al-page .reveal{opacity:1!important;transform:none!important}
.al-page :is(h1,h2,h3,h4):not(.hc-card *){color:var(--navy);line-height:1.35}
.al-page h2:not(.hc-card *){font-size:clamp(26px,2.6vw,37px);font-weight:800;letter-spacing:-.5px}
.al-page h3:not(.hc-card *){letter-spacing:-.3px}
.al-section{padding-block:clamp(90px,14vh,170px)}
.al-head{margin-bottom:clamp(30px,4vw,54px)}
.al-subtitle{font-size:clamp(21px,2vw,26px);font-weight:800;margin:clamp(44px,5vw,70px) 0 24px}
.al-note{color:var(--navy);font-size:12px;line-height:1.7;margin:20px auto 0;text-align:center;max-width:44em;opacity:.8;text-shadow:0 0 12px #ffffffd9}
.al-page .hc-icon,.al-header .hc-icon,.al-float .hc-icon,.al-sticky .hc-icon{width:20px;height:20px;flex:none}
.al-actions{display:flex;flex-wrap:wrap;gap:12px}
.area-landing .button{font-size:15px;min-height:52px;padding:13px 26px;border-radius:12px}
.al-wa-button .hc-icon{width:21px;height:21px}
.area-landing .button.button-outline{background:#ffffffc9;color:var(--navy);border-color:#0a2e4d33}
.area-landing .button.button-outline:hover{background:var(--navy);color:#fff}

/* Minimal header */
.al-header{position:fixed;z-index:60;top:18px;inset-inline:0;margin-inline:auto;width:min(1100px,calc(100% - 40px));height:72px;padding:0 14px 0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#ffffff14;border:1px solid #ffffff59;border-radius:999px;box-shadow:inset 0 1px 0 #ffffff66;-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);transition:height .4s var(--al-header-ease),background-color .4s var(--al-header-ease),border-color .4s var(--al-header-ease),box-shadow .4s var(--al-header-ease),backdrop-filter .4s var(--al-header-ease),-webkit-backdrop-filter .4s var(--al-header-ease),opacity .5s ease,visibility .5s}
.al-header.is-scrolled{height:60px;background:#ffffff9e;border-color:#ffffff99;box-shadow:inset 0 1px 0 #ffffff66,0 8px 30px #0a283c14;-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
.al-brand{display:block;width:150px}.al-brand img{width:100%;height:auto;display:block}
.al-header .al-brand{width:132px;transform-origin:right center;transition:transform .4s var(--al-header-ease)}
.al-header.is-scrolled .al-brand{transform:scale(.9)}
.al-header-tools{display:flex;align-items:center;gap:16px}
.al-phone{font-size:13px;font-weight:500;letter-spacing:.2px;color:var(--navy);white-space:nowrap}
.area-landing .al-header .button{min-height:42px;padding:7px 18px;font-size:13.5px;border-radius:999px;background:var(--teal);border-color:var(--teal);color:#fff}
.area-landing .al-header .button .hc-icon{width:18px;height:18px}

/* Hero: placed by the script inside the airplane window of the first video frame. */
.al-hero{position:relative;height:100vh;height:100lvh;display:flex;align-items:center;justify-content:center}
.al-hero-copy{--f:clamp(28px,4vw,54px);width:min(640px,80%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--navy);visibility:hidden;animation:al-show 0s 3s forwards}
.al-hero-copy.is-placed{position:fixed;z-index:0;width:auto;margin:0;visibility:visible;animation:none}
/* Boarding pass: a main part and a stub, split by a tear line with two cut-out notches. */
.al-pass-title{width:fit-content;margin:0 auto calc(var(--f)*.24);font-size:max(12.5px,calc(var(--f)*.3));font-weight:600;letter-spacing:0;line-height:1.5;color:var(--navy);white-space:nowrap}
.al-pass{--stub:max(204px,calc(var(--f)*3.6));--notch:9px;width:100%;max-width:680px;display:grid;grid-template-columns:minmax(0,1fr) var(--stub);text-align:start;color:var(--navy);background:#ffffff8c;border:1px solid #ffffff80;border-radius:20px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);-webkit-mask-image:radial-gradient(circle var(--notch) at var(--stub) 0,#0000 97%,#000),radial-gradient(circle var(--notch) at var(--stub) 100%,#0000 97%,#000);mask-image:radial-gradient(circle var(--notch) at var(--stub) 0,#0000 97%,#000),radial-gradient(circle var(--notch) at var(--stub) 100%,#0000 97%,#000);-webkit-mask-composite:source-in;mask-composite:intersect}
.al-pass-main{min-width:0;container:al-main/inline-size;padding:calc(var(--f)*.34) calc(var(--f)*.38)}
.al-pass-label{display:block;font-size:max(10px,calc(var(--f)*.2));font-weight:700;line-height:1.5;color:var(--teal)}
.al-pass-route{display:flex;align-items:center;gap:calc(var(--f)*.2)}
.al-pass-point{flex:none}
.al-pass-point b{display:block;font-size:calc(var(--f)*.5);font-weight:800;line-height:1.25;white-space:nowrap}
.al-pass-point.is-to b{font-size:var(--f);font-weight:900;line-height:1.5}
.al-pass-point small{display:block;font-size:max(10.5px,calc(var(--f)*.22));font-weight:600;line-height:1.5}
.al-pass-path{position:relative;flex:1;min-width:26px;height:0;border-top:1.5px dashed #0e7c7780}
.al-pass-plane{position:absolute;left:0;top:50%;display:block;width:clamp(16px,calc(var(--f)*.42),24px);height:clamp(16px,calc(var(--f)*.42),24px);margin-top:calc(clamp(16px,calc(var(--f)*.42),24px)/-2);color:var(--teal);transform:rotate(-90deg)}
.al-pass-plane svg{display:block;width:100%;height:100%}
.al-hero-copy.is-entering .al-pass-plane{animation:al-pass-fly 1.2s cubic-bezier(.45,.05,.3,1) .25s backwards}
@keyframes al-pass-fly{from{left:calc(100% - 20px)}to{left:0}}
.al-pass-fields{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;align-items:end;gap:calc(var(--f)*.2);margin:calc(var(--f)*.26) 0 0;padding-top:calc(var(--f)*.22);border-top:1px solid #0a2e4d1a}
.al-pass-fields dd{margin:0;font-size:15px;font-weight:600;line-height:1.4;white-space:nowrap}
.al-pass-stub{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:12px 8px;border-inline-start:1.5px dashed #0a2e4d40}
.area-landing .al-pass-cta{width:100%;min-height:44px;padding:8px 6px;font-size:13.5px;line-height:1.4;white-space:nowrap;text-align:center;justify-content:center;gap:6px;border-radius:12px}
.al-pass-barcode{display:block;width:78%;height:18px;opacity:.7;background:repeating-linear-gradient(90deg,var(--navy) 0 2px,#0000 2px 4px,var(--navy) 4px 5px,#0000 5px 8px,var(--navy) 8px 11px,#0000 11px 13px)}
.al-hero-copy.is-tight .al-pass-barcode{display:none}
@media(max-height:480px) and (min-width:761px){
 .al-pass{--stub:128px}
 .area-landing .al-pass-cta{white-space:normal}
 .al-pass-fields dd{font-size:12px}
}
/* Descent cue: glides down a hairline once every 2.2s. Placed by the script. */
.al-descent{position:fixed;z-index:2;top:0;left:50%;display:flex;flex-direction:column;align-items:center;gap:6px;width:max-content;padding:0;margin:0;background:none;border:0;color:var(--navy);cursor:pointer;transform:translateX(-50%);visibility:hidden;opacity:0;transition:opacity .45s ease,visibility .45s}
.al-descent.is-ready{visibility:visible;opacity:1}
.al-descent.is-away,.al-descent.is-blocked{visibility:hidden;opacity:0;pointer-events:none}
.al-descent-line{position:relative;display:block;width:1px;height:56px;background:#ffffffb3}
.al-descent-line i{position:absolute;top:0;left:50%;display:block;width:14px;height:14px;margin-left:-7px;color:var(--teal);animation:al-descend 2.2s ease-in-out infinite}
.al-descent-line svg{display:block;width:100%;height:100%;transform:rotate(180deg)}
@keyframes al-descend{0%{transform:translateY(-4px);opacity:0}18%{opacity:1}72%{opacity:1}100%{transform:translateY(46px);opacity:0}}
.al-descent-ar{font-size:13px;font-weight:600;line-height:1.4}
.al-descent-en{font-family:Poppins,sans-serif;font-size:10px;line-height:1.2;letter-spacing:.3em;margin-inline-end:-.3em;color:var(--muted)}
@media(max-width:760px){
 .al-descent{gap:4px}
 .al-descent-line{height:44px}
 .al-descent-line i{width:12px;height:12px;margin-left:-6px}
 .al-descent-ar{font-size:12px}
 .al-descent-en{font-size:9px}
 @keyframes al-descend{0%{transform:translateY(-4px);opacity:0}18%{opacity:1}72%{opacity:1}100%{transform:translateY(36px);opacity:0}}
}
@media(max-width:760px){
 .al-pass{--sh:78px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto var(--sh);-webkit-mask-image:radial-gradient(circle var(--notch) at 0 calc(100% - var(--sh)),#0000 97%,#000),radial-gradient(circle var(--notch) at 100% calc(100% - var(--sh)),#0000 97%,#000);mask-image:radial-gradient(circle var(--notch) at 0 calc(100% - var(--sh)),#0000 97%,#000),radial-gradient(circle var(--notch) at 100% calc(100% - var(--sh)),#0000 97%,#000)}
 .al-hero-copy.is-tight .al-pass{--sh:58px}
 .al-pass-stub{gap:6px;padding:7px 12px;border-inline-start:0;border-top:1.5px dashed #0a2e4d40}
 .area-landing .al-pass-cta{min-height:42px;padding-block:5px}
 .al-pass-barcode{height:11px;width:60%}
 .al-pass-fields{grid-template-columns:auto auto;gap:calc(var(--f)*.14) calc(var(--f)*.3)}
 .al-pass-fields>div:first-child{grid-column:1/-1;display:flex;align-items:baseline;gap:8px}
 .al-pass-point.is-to b{line-height:1.3}
 .al-pass-fields dd{font-size:13px}
}
.al-hero-copy.is-placed.is-entering{animation:al-soft-in .7s cubic-bezier(.22,.61,.36,1) backwards}
@keyframes al-soft-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes al-show{to{visibility:visible}}
.al-facts{list-style:none;padding:0;margin:16px 0 0;display:flex;gap:8px}
.al-facts li{flex:1 1 0;padding:8px 10px;border-radius:12px;background:#ffffffb8;border:1px solid #fff}
.al-facts b{display:block;color:var(--teal);font-size:15.5px;font-weight:800;line-height:1.5}
.al-facts span{display:block;font-size:11.5px;line-height:1.5;color:var(--navy)}


.al-empty{padding:30px;border-radius:17px;background:var(--al-tint);font-size:17px}

/* Why */
.al-points{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.al-points li{padding:28px;border-radius:17px}
.al-points h3{font-size:19px;font-weight:800;margin-bottom:6px}.al-points p{font-size:15px;line-height:1.9;color:var(--muted)}

/* FAQ */
.al-faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:6%;align-items:start}

/* Finale */
/* Final call to action, on glass like the rest of the page. */
.al-finale{padding:clamp(90px,14vh,170px) 3%}
.al-finale-copy{width:min(720px,100%);margin-inline:auto;text-align:center;padding:clamp(30px,5vw,56px) clamp(22px,5vw,60px);border-radius:26px}
.al-finale-copy h2 em{display:block}
.al-finale-copy p{font-size:17px;font-weight:500;margin:12px auto 26px;max-width:34em}
.al-finale-copy .button{display:inline-flex}

/* Empty on purpose: the page ends here and the Kaaba plays alone on the fixed video. */
.al-end{position:relative;z-index:1;height:120vh;pointer-events:none}
/* Closing card, in the footer's glass. It sits beside the Kaaba at the height of the gold band;
   the widths below keep it clear of the Kaaba, which ends at 66% of the cover-fitted frame. */
.al-end-close{position:absolute;inset-inline:0;bottom:0;height:100vh}
.al-end-card{--frame-w:max(100vw,177.78vh);--frame-h:max(56.25vw,100vh);position:absolute;inset-inline-start:max(16px,2.5vw);top:calc(50% + var(--frame-h)*.03);width:min(380px,calc(50vw - var(--frame-w)*.16 - 40px));padding:22px 24px;text-align:start;color:var(--navy);border-radius:32px;background:#ffffff9e;border:1px solid #ffffff99;box-shadow:inset 0 1px 0 #ffffff66,0 8px 30px #0a283c14;-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);opacity:0;visibility:hidden;transform:translateY(calc(-50% + 12px));transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1),visibility .7s}
.al-end.is-shown .al-end-card{opacity:1;visibility:visible;transform:translateY(-50%);pointer-events:auto}
.al-end-line{margin:0;font-size:clamp(22px,2vw,30px);font-weight:700;line-height:1.35;color:var(--navy);text-wrap:balance}
.al-end-sub{margin:6px 0 14px;font-size:14px;font-weight:500;line-height:1.6;color:var(--muted)}
.area-landing .al-end-card .button{width:100%;min-height:46px;padding:8px 14px;font-size:14px}
@media(max-height:480px) and (orientation:landscape){
 .al-end-card{padding:12px 14px;border-radius:22px}
 .al-end-line{font-size:17px}
 .al-end-sub{margin:2px 0 6px;font-size:12px}
 .area-landing .al-end-card .button{min-height:38px;padding-block:4px;font-size:13px}
}
/* Portrait: below the Kaaba, above the footer, full width minus the footer's gutters. */
@media(orientation:portrait){
 .al-end-card{inset-inline:12px;top:auto;bottom:16px;width:auto;padding:16px 18px;border-radius:26px;text-align:center;transform:translateY(12px)}
 .al-end.is-shown .al-end-card{transform:none}
 .al-end-line{font-size:clamp(19px,5.6vw,30px)}
 .al-end-sub{margin:3px 0 10px;font-size:13.5px}
}
@media(orientation:portrait) and (min-width:761px){
 .al-end-card{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:center;padding:14px 22px;text-align:start}
 .al-end-line{font-size:24px;grid-column:1}
 .al-end-sub{grid-column:1;margin:0}
 .area-landing .al-end-card .button{grid-column:2;grid-row:1/3;width:auto;padding-inline:24px}
}

.al-float,.al-sticky{transition:opacity .5s ease,visibility .5s,transform .35s var(--ease)}
.al-end-clear .al-header,.al-end-clear .al-float,.al-end-clear .al-sticky{opacity:0;visibility:hidden}
.area-landing .button.al-big{min-height:60px;padding-inline:30px;font-size:17px}

/* Footer and persistent WhatsApp */
.al-footer{position:relative;z-index:1;padding:0 0 clamp(16px,3vh,28px)}
.al-footer-card{width:min(1100px,calc(100% - 40px));margin-inline:auto;padding:24px 30px 14px;border-radius:32px;background:#ffffff9e;border:1px solid #ffffff99;box-shadow:inset 0 1px 0 #ffffff66,0 8px 30px #0a283c14;-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
.al-footer-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:26px}
.al-footer-brand .al-brand{width:124px}
.al-footer-brand p{margin:6px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.al-footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font-size:13px;font-weight:500;color:var(--navy)}
.al-footer-links a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.al-footer-links a:hover{color:var(--teal)}
.al-footer-links .hc-icon{width:16px;height:16px;color:var(--teal)}
.area-landing .al-footer-pill{min-height:42px;padding:7px 18px;font-size:13.5px;border-radius:999px}
.area-landing .al-footer-pill .hc-icon{width:18px;height:18px}
.al-footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 20px;margin-top:18px;padding-top:12px;border-top:1px solid #0a2e4d1a;font-size:12px;color:var(--muted)}
.al-footer-nav{display:inline-flex;gap:18px}
.al-footer-nav a:hover{color:var(--teal)}
.al-footer-legal{margin:6px 0 0;font-size:11px;line-height:1.7;color:var(--muted)}

/* Sales section */
.al-sales-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.al-tile{display:flex;flex-direction:column;height:100%;padding:24px 22px;border-radius:20px}
.al-tile h3{margin-bottom:8px;font-size:18px;font-weight:800;line-height:1.45}
.al-tile p{margin:0;font-size:14.5px;line-height:1.85;color:var(--muted)}
.al-tile-link{margin-top:auto;padding-top:12px;font-size:13.5px;font-weight:700;line-height:1.6;color:var(--teal);overflow-wrap:anywhere}
.al-tile-link[dir=ltr]{text-align:right;font-size:12.5px}
.al-tile-link:hover{text-decoration:underline}
.al-sales-cta{display:flex;justify-content:center;margin-top:26px}
.al-float{position:fixed;z-index:55;bottom:26px;left:26px;width:62px;height:62px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;box-shadow:0 14px 34px #0e7c7759;transition:transform .35s var(--ease)}
.al-float:hover{transform:scale(1.08)}.al-float .hc-icon{width:30px;height:30px}
.al-sticky{display:none}

/* Motion */
@keyframes al-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

@media(max-width:1100px){
 .al-sales-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .al-footer-top{grid-template-columns:auto auto;justify-content:space-between}
 .al-footer-links{grid-column:1/-1;grid-row:2;justify-content:flex-start}
}
@media(max-width:1000px){
 .al-faq-layout{grid-template-columns:1fr}
 .al-faq-layout{gap:26px}
 .al-points{grid-template-columns:1fr}
}
@media(max-width:760px){
 .area-landing{--al-glass:#fbfcfad1;--al-blur:blur(9px);font-size:15.5px}
 .wrap{width:94%}
 .al-finale-copy p{font-size:16px}
 .area-landing .button.al-big{width:100%}
 .al-header{top:12px;width:calc(100% - 24px);height:60px;padding:0 9px 0 16px}
 .al-header.is-scrolled{height:54px}
 .al-header .al-brand{width:112px}
 .area-landing .al-header .button{width:42px;min-height:42px;padding:0;justify-content:center}
 .area-landing .al-header .button span{display:none}
 .al-brand{width:118px}.al-phone{display:none}
 .al-actions .button{flex:1 1 100%}
 .al-facts{display:grid;grid-template-columns:1fr 1fr;gap:9px}
 .al-facts li:last-child:nth-child(odd){grid-column:1/-1}
 .al-float{display:none}
 .al-sales-grid{grid-template-columns:minmax(0,1fr)}
 .area-landing .al-sales-cta .button{width:100%;min-height:54px;padding-inline:14px;font-size:15px}
 .al-footer-card{width:calc(100% - 24px);padding:22px 18px 14px;border-radius:26px}
 .al-footer-top{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:16px}
 .al-footer-links{grid-row:auto;flex-direction:column;align-items:center;gap:8px}
 .al-footer-bottom{flex-direction:column;justify-content:center;text-align:center}
 .al-footer-legal{text-align:center}
 .al-sticky{display:block;position:fixed;z-index:55;inset-inline:0;bottom:0;padding:10px 4% calc(10px + env(safe-area-inset-bottom));background:#fbfcfaf0;border-top:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
 .al-sticky .button{width:100%}
}
/* Hotel-count facts now sit with the hotels heading. */
.al-head .al-facts{margin-top:18px}
.al-head .al-facts li{flex:0 1 auto;min-width:130px}

/* Flight-board eyebrows */
.al-eyebrow{display:flex;align-items:center;gap:6px;margin-bottom:10px;color:var(--teal);font-size:13px;font-weight:700;line-height:1.5}
.al-eyebrow-plane{display:block;width:14px;height:14px;flex:none;transform:rotate(-90deg)}
.al-eyebrow-plane svg{display:block;width:100%;height:100%}
.al-eyebrow-no{font-family:Poppins,sans-serif;letter-spacing:.12em}

/* Section icons */
.al-icon{display:grid;place-items:center;flex:none;width:52px;height:52px;margin-bottom:14px;border-radius:50%;color:var(--teal);background:#ffffff73;border:1px solid #ffffffb3;box-shadow:inset 0 1px 0 #ffffff80}
.al-glyph{display:block;width:26px;height:26px}
.al-glyph-gold{stroke:var(--al-gold)}
.al-glyph-gold path{stroke-dasharray:1;stroke-dashoffset:0}
@keyframes al-gold-in{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* Scroll reveal, then a short hover transition */
.al-reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
.al-reveal.is-visible{opacity:1;transform:none}
.al-reveal.is-settled{transition:transform .35s var(--ease),box-shadow .35s ease;transition-delay:0s}
@media(hover:hover){
 .al-tile.is-settled:hover,.al-points li.is-settled:hover{transform:translateY(-4px);box-shadow:0 22px 50px #0a2e4d1f}
 .al-tile:hover .al-glyph-gold path,.al-points li:hover .al-glyph-gold path,.al-stop:hover .al-glyph-gold path{animation:al-gold-in .7s var(--ease)}
}

/* Booking route */
.al-steps{position:relative;list-style:none;padding:clamp(24px,3vw,38px);margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;border-radius:22px}
.al-route-track{position:absolute;inset:0;pointer-events:none}
.al-route-line{position:absolute;border-top:1.5px dashed #0e7c7766}
.al-route-line.is-vertical{border-top:0;border-inline-start:1.5px dashed #0e7c7766}
.al-route-plane{position:absolute;z-index:0;display:block;width:22px;height:22px;color:var(--teal);will-change:transform}
.al-route-plane svg{display:block;width:100%;height:100%}
.al-stop{position:relative;z-index:1;text-align:center}
.al-stop .al-icon{margin-inline:auto;background:#ffffffd9}
.al-stop h4{font-size:18px;font-weight:800;margin-bottom:4px}
.al-stop-no{display:block;margin-bottom:2px;font-family:Poppins,sans-serif;font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--teal)}
.al-stop p{font-size:15px;line-height:1.9;color:var(--muted)}

/* FAQ */
.al-faq-list{display:grid;gap:8px}
.al-faq-list details{border-radius:14px;background:#ffffff59;border:1px solid #ffffff99;box-shadow:inset 0 1px 0 #ffffff66}
.al-faq-list summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:48px;padding:12px 16px;font-size:16.5px;font-weight:700;line-height:1.6;cursor:pointer}
.al-faq-list summary::-webkit-details-marker{display:none}
.al-faq-list summary span{position:relative;width:16px;height:16px;flex:none;transition:transform .32s var(--ease)}
.al-faq-list summary span:before,.al-faq-list summary span:after{content:"";position:absolute;top:7px;inset-inline:0;height:2px;border-radius:2px;background:var(--teal)}
.al-faq-list summary span:after{transform:rotate(90deg)}
.al-faq-list details.is-open summary span{transform:rotate(45deg)}
.al-faq-body{overflow:hidden}
.al-faq-list p{padding:0 16px 16px;font-size:15.5px;line-height:1.9;color:var(--muted)}
.al-hotel-dots{display:none}

/* ---------- Designed for phones ---------- */
@media(max-width:760px){
 .wrap{width:calc(100% - 40px)}
 .area-landing{font-size:15.5px;line-height:1.8}
 .al-section{padding-block:68px}
 .al-page h2:not(.hc-card *){font-size:26px;letter-spacing:-.3px;line-height:1.4}
 .al-subtitle{font-size:20px;margin:36px 0 16px}
 .al-head,.al-faq-layout{padding:20px}
 .al-eyebrow{margin-bottom:6px}
 .al-note{font-size:13px}
 .al-facts span,.al-tile-link[dir=ltr]{font-size:13px}

 /* Header */
 .al-header{top:calc(12px + env(safe-area-inset-top));height:56px}
 .al-header.is-scrolled{height:52px}
 .area-landing .al-header .button{width:44px;min-height:44px}
 .al-header .al-brand{padding-block:3px}
 .area-landing .al-pass-cta{min-height:44px}
 .al-pass-title{font-size:max(13px,calc(var(--f)*.3))}
 .al-footer-brand p,.al-footer-bottom,.al-footer-legal{font-size:13px}
 .al-footer-brand .al-brand{padding-block:1px;margin-inline:auto}
 .al-footer-nav a{padding-inline:6px}

 /* Descent cue */
 .al-descent-ar{font-size:13px}
 .al-descent-en{font-size:10px}

 /* Service tiles and reasons: icon beside text */
 .al-sales-grid,.al-points{gap:10px}
 .al-tile,.al-points li{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:14px;align-content:start;height:auto;padding:16px;border-radius:18px}
 .al-tile .al-icon,.al-points .al-icon{grid-row:1/span 3;margin:0}
 .al-tile h3,.al-points h3{font-size:16.5px;line-height:1.5;margin-bottom:2px}
 .al-tile p,.al-points p{font-size:15px;line-height:1.8}
 .al-tile-link{padding-top:6px;min-height:44px;display:flex;align-items:center;font-size:13.5px}
 .area-landing .al-sales-cta .button{min-height:52px;font-size:15px}

 .al-hotel-dots{display:flex;justify-content:center;margin-top:0}
 .al-hotel-dots button{display:grid;place-items:center;width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer}
 .al-hotel-dots button:before{content:"";width:8px;height:8px;border-radius:50%;background:#ffffffd9;border:1px solid #0e7c7780;transition:background-color .3s,transform .3s}
 .al-hotel-dots button.is-active:before{background:var(--teal);transform:scale(1.25)}

 /* Route, vertical */
 .al-steps{grid-template-columns:minmax(0,1fr);gap:26px;padding:20px}
 .al-stop{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:14px;text-align:start}
 .al-stop .al-icon{margin:0}
 .al-stop h4{font-size:16.5px;line-height:1.5}
 .al-stop-no{margin-bottom:0}
 .al-stop p{font-size:15px;line-height:1.8}

 /* FAQ */
 .al-faq-layout{display:block;padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
 .al-faq-layout>.al-reveal:first-child{margin-bottom:14px;padding:20px;border-radius:22px;background:var(--al-glass);border:1px solid var(--al-glass-line);box-shadow:0 18px 50px #0a2e4d14;-webkit-backdrop-filter:var(--al-blur);backdrop-filter:var(--al-blur)}
 .al-faq-list details{background:var(--al-glass);border-color:var(--al-glass-line);-webkit-backdrop-filter:var(--al-blur);backdrop-filter:var(--al-blur)}
 .al-faq-list summary{font-size:15.5px}
 .al-faq-list p{font-size:15px;line-height:1.8}

 /* Final call */
 .al-finale{padding:68px 20px}
 .area-landing .al-finale .button.al-big{min-height:54px;font-size:15.5px}

 /* Bottom bar: glass, above the safe area */
 .al-sticky{padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:#ffffff9e;border-top:1px solid #ffffff99;box-shadow:inset 0 1px 0 #ffffff66;-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
 .area-landing .al-sticky .button{min-height:48px}

 /* Closing card and footer tap sizes */
 .al-end-card{bottom:calc(16px + env(safe-area-inset-bottom))}
 .area-landing .al-end-card .button{min-height:48px}
 .al-footer-links a{min-height:44px}
 .al-footer-nav a{display:inline-flex;align-items:center;min-height:44px}
 .area-landing .al-footer-pill{min-height:44px}
 .al-footer{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
}

/* The site's language button, adapted to sit on the glass header. */
.al-header .language-toggle{color:var(--navy);text-decoration:none;white-space:nowrap}
.al-header-tools{gap:12px}
@media(max-width:760px){
 .al-header-tools{gap:8px}
 .al-header .language-toggle{min-height:44px;font-size:13px;padding:8px 9px}
}
/* Very short phones: the closing card drops its second line to stay under the Kaaba. */
@media(orientation:portrait) and (max-height:620px){
 .al-end-card{padding:10px 14px}
 .al-end-sub{display:none}
 .al-end-line{margin-bottom:8px;font-size:18px}
}

/* ---------- English: the same page, mirrored ---------- */
html[dir=ltr] .al-header{padding:0 24px 0 14px}
html[dir=ltr] .al-header .al-brand{transform-origin:left center}
html[dir=ltr] .al-float{left:auto;right:26px}
html[dir=ltr] .al-tile-link[dir=ltr]{text-align:left}
html[dir=ltr] .al-eyebrow-plane{transform:rotate(90deg)}
html[dir=ltr] .al-eyebrow{font-size:12.5px;letter-spacing:.04em}
html[dir=ltr] .al-page h2:not(.hc-card *){letter-spacing:-.6px}
html[dir=ltr] .al-page h3,html[dir=ltr] .al-page h4{letter-spacing:-.2px}
/* Ticket */
html[dir=ltr] .al-pass-plane{left:auto;right:0;transform:rotate(90deg)}
html[dir=ltr] .al-hero-copy.is-entering .al-pass-plane{animation-name:al-pass-fly-ltr}
@keyframes al-pass-fly-ltr{from{right:calc(100% - 20px)}to{right:0}}
html[dir=ltr] .al-pass-label{letter-spacing:.09em}
html[dir=ltr] .al-page .al-pass-title{font-size:max(13px,calc(var(--f)*.27));font-weight:500;letter-spacing:0}
html[dir=ltr] .al-pass-point b{font-size:max(12.5px,calc(var(--f)*.4));font-weight:700;line-height:1.2;white-space:normal;max-width:5.6em}
html[dir=ltr] .al-pass-point.is-to b{font-size:var(--f);font-weight:800;line-height:1.2;white-space:nowrap;max-width:none;letter-spacing:-.02em}
html[dir=ltr] .al-pass-fields dd{font-size:13.5px;font-weight:600;letter-spacing:-.1px}
html[dir=ltr] .area-landing .al-pass-cta,html[dir=ltr] body.area-landing .al-pass-cta{font-size:12.5px;padding-inline:6px}
@media(min-width:761px){
 html[dir=ltr] .al-pass{--stub:max(234px,calc(var(--f)*3.6));-webkit-mask-image:radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0,#0000 97%,#000),radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%,#0000 97%,#000);mask-image:radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0,#0000 97%,#000),radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%,#0000 97%,#000)}
}
/* Tablets and short screens: the button may take two lines so the route keeps its width. */
@media(min-width:761px) and (max-width:1000px),(max-height:480px) and (min-width:761px){
 html[dir=ltr] .al-pass{--stub:136px}
 html[dir=ltr] body.area-landing .al-pass-cta{white-space:normal;font-size:12px;line-height:1.3}
 html[dir=ltr] .al-pass-fields dd{font-size:12px}
}
@media(max-width:760px){
 html[dir=ltr] .al-header{padding:0 9px 0 16px}
 html[dir=ltr] body.area-landing .al-pass-cta{font-size:13px}
 html[dir=ltr] .al-pass-fields dd{font-size:12.5px;letter-spacing:-.2px}
 html[dir=ltr] .al-pass-label{letter-spacing:.05em}
}

/* Narrow tickets: the gate takes its own row, so no value runs into the stub. */
@container al-main (max-width:300px){
 .al-pass-fields{grid-template-columns:auto auto;gap:calc(var(--f)*.14) calc(var(--f)*.3)}
 .al-pass-fields>div:first-child{grid-column:1/-1;display:flex;align-items:baseline;gap:8px}
}
@container al-main (max-width:385px){
 html[dir=ltr] .al-pass-fields{grid-template-columns:auto auto;gap:calc(var(--f)*.14) calc(var(--f)*.3)}
 html[dir=ltr] .al-pass-fields>div:first-child{grid-column:1/-1;display:flex;align-items:baseline;gap:8px}
}
html[dir=ltr] .al-pass-title{white-space:normal;text-align:center;max-width:100%;line-height:1.35}
@media(min-width:761px) and (max-width:1000px),(max-height:480px) and (min-width:761px){
 html[dir=ltr] .al-pass{--stub:160px}
}
@media(max-width:340px){
 body.area-landing .al-pass-cta{font-size:11.5px;padding-inline:4px}
 .al-pass-cta .hc-icon{display:none}
 .al-pass-fields dd,html[dir=ltr] .al-pass-fields dd{font-size:12px;white-space:normal}
}
/* English closing card: the longer line stays compact, so the card clears the Kaaba and lantern. */
@media(orientation:portrait){
 html[dir=ltr] .al-end-card{padding:12px 14px}
 html[dir=ltr] .al-end-line{font-size:16.5px;font-weight:600}
 html[dir=ltr] .al-end-sub{font-size:13px;margin:2px 0 8px}
}
@media(orientation:portrait) and (min-width:761px){
 html[dir=ltr] .al-end-card{padding:12px 20px}
 html[dir=ltr] .al-end-line{font-size:19px}
}
@media(max-height:480px) and (min-width:761px){
 html[dir=ltr] .al-pass-fields dd{font-size:11.5px;letter-spacing:-.2px}
}
@media(max-width:340px){
 html[dir=ltr] .al-pass-title{font-size:12px;margin-bottom:2px;line-height:1.25}
 html[dir=ltr] .al-pass-stub{padding-inline:5px}
 html[dir=ltr] body.area-landing .al-pass-cta{font-size:11px;padding-inline:2px}
}

/* The main site's hotel card, straight on the video. Rows start at the start of the line. */
.al-hc .hc-grid{--al-gap:24px;--al-cols:3;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;gap:var(--al-gap)}
.al-hc .hc-card{flex:0 0 calc((100% - var(--al-gap)*(var(--al-cols) - 1))/var(--al-cols))}
.al-hc-more{display:flex;justify-content:center;margin-top:24px}
.al-hotel-counter{display:block;padding:10px 16px;font-size:14px;font-weight:700;color:var(--navy);text-shadow:0 0 10px #fff}
@media(max-width:1199px){
 .al-hc .hc-grid{--al-cols:2}
}
@media(max-width:760px){
 .al-hc .hc-grid{flex-wrap:nowrap;justify-content:flex-start;gap:12px;margin-inline:-20px;padding:6px 20px 14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .al-hc .hc-grid::-webkit-scrollbar{display:none}
 .al-hc .hc-card{flex:0 0 min(85vw,380px);scroll-snap-align:center}
 .al-hc .hc-card:only-child{flex-basis:100%}
 .area-landing .al-hc-more .button{width:100%}
}

/* Phones: a calmer ticket. The barcode gives way so the route, fields and button have room to breathe. */
.al-cta-short{display:none}
@media(max-width:760px){
 .al-pass{--sh:70px}
 .al-hero-copy.is-tight .al-pass{--sh:56px}
 .al-pass-stub{gap:4px;padding:4px 14px}
 .al-pass-barcode{flex:none;height:9px;width:62%}
 .al-hero-copy.is-tight .al-pass-barcode{display:none}
 .al-pass-main{padding:12px 16px 11px}
 .al-pass-fields{margin-top:9px;padding-top:9px;row-gap:6px}
 .al-pass-label{line-height:1.35}
 .al-pass-fields dd{line-height:1.35}
 .al-pass-point small{line-height:1.3}
 .al-pass-point.is-to b{line-height:1.42}
 html[dir=ltr] .al-pass-point.is-to b{line-height:1.2}
 .al-pass-title{margin-bottom:7px}
 .area-landing .al-pass-cta{min-height:44px;padding:5px 10px;gap:8px;font-size:14px;white-space:nowrap}
 html[dir=ltr] body.area-landing .al-pass-cta{font-size:14px;padding-inline:10px}
 .al-cta-short{display:inline}
 .al-cta-long:has(+.al-cta-short){display:none}
 html[dir=ltr] .al-pass-point b{font-size:max(13px,calc(var(--f)*.42))}
 html[dir=ltr] .al-pass-title{line-height:1.4;text-wrap:balance}
 /* Bottom button: glass all the way, no band behind it. */
 .al-sticky{padding:8px 12px calc(10px + env(safe-area-inset-bottom));background:none;border-top:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}
 .area-landing .al-sticky .button,.area-landing .al-sticky .button:hover,.area-landing .al-sticky .button:focus{pointer-events:auto;min-height:50px;border-radius:999px;color:var(--navy);background:#ffffff14;background-image:none;border:1px solid #ffffff59;box-shadow:inset 0 1px 0 #ffffff66;-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
 .area-landing .al-sticky .button:before,.area-landing .al-sticky .button:after{display:none}
 .area-landing .al-sticky .button .hc-icon{color:var(--teal)}
}
@media(max-width:340px){
 .area-landing .al-pass-cta,html[dir=ltr] body.area-landing .al-pass-cta{font-size:12px;padding-inline:4px}
}

/* FAQ: a side card with the heading and a way to ask, then one glass card per question. */
.al-faq-layout{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:28px;padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.al-faq-side{position:sticky;top:96px;padding:clamp(22px,2.4vw,34px);border-radius:22px;background:var(--al-glass);border:1px solid var(--al-glass-line);box-shadow:0 18px 50px #0a2e4d14;-webkit-backdrop-filter:var(--al-blur);backdrop-filter:var(--al-blur)}
.al-faq-more{margin:18px 0 12px;padding-top:16px;border-top:1px solid #0a2e4d1a;font-size:15px;font-weight:600;color:var(--navy)}
.area-landing .al-faq-cta{width:100%;min-height:48px;justify-content:center;padding:9px 16px;font-size:14px}
.al-faq-list{gap:12px}
.al-faq-list details{position:relative;overflow:hidden;border-radius:18px;background:var(--al-glass);border:1px solid var(--al-glass-line);box-shadow:inset 0 1px 0 #ffffff66,0 10px 30px #0a2e4d0d;-webkit-backdrop-filter:var(--al-blur);backdrop-filter:var(--al-blur);transition:background-color .3s ease,box-shadow .3s ease}
.al-faq-list details:before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--teal);opacity:0;transition:opacity .3s ease}
.al-faq-list details.is-open{background:#fffffff0;box-shadow:inset 0 1px 0 #fff,0 18px 44px #0a2e4d1a}
.al-faq-list details.is-open:before{opacity:1}
.al-faq-list summary{justify-content:flex-start;gap:14px;min-height:64px;padding:14px 18px}
.al-faq-no{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--al-tint);color:var(--teal);font:600 12.5px/1 Poppins,sans-serif;letter-spacing:.04em}
.al-faq-q{flex:1;min-width:0;font-weight:700;color:var(--navy)}
.al-faq-list summary span{display:block;width:32px;height:32px;border-radius:50%;border:1px solid #0e7c7740;background:#ffffff80;transition:transform .32s var(--ease),background-color .3s ease,border-color .3s ease}
.al-faq-list summary span:before,.al-faq-list summary span:after{top:14px;inset-inline:8px;transition:background-color .3s ease}
.al-faq-list details.is-open summary span{background:var(--teal);border-color:var(--teal)}
.al-faq-list details.is-open summary span:before,.al-faq-list details.is-open summary span:after{background:#fff}
.al-faq-list p{padding:0 18px 18px;padding-inline-start:68px;font-size:15px;line-height:1.85}
@media(hover:hover){
 .al-faq-list details:not(.is-open):hover{background:#ffffffd9}
}
@media(max-width:1000px){
 .al-faq-layout{grid-template-columns:minmax(0,1fr);gap:16px}
 .al-faq-side{position:static}
}
@media(max-width:760px){
 .al-faq-side{margin-bottom:14px;padding:20px}
 .al-faq-list{gap:10px}
 .al-faq-list summary{gap:10px;min-height:60px;padding:12px 14px}
 .al-faq-no{width:30px;height:30px;font-size:12px}
 .al-faq-q{font-size:15.5px;line-height:1.55}
 .al-faq-list summary span{width:28px;height:28px}
 .al-faq-list summary span:before,.al-faq-list summary span:after{top:12px;inset-inline:7px}
 .al-faq-list p{padding:0 14px 16px;font-size:15px;line-height:1.8}
}

/* Hotel rail: more than three hotels scroll sideways, the next cards showing at the far edge. Same site card. */
.al-rail-nav{display:none}
@media(min-width:761px){
 .al-hc.is-rail{position:relative;margin-inline-end:calc(50% - 50vw)}
 .al-hc.is-rail .hc-grid{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline-start:0;scrollbar-width:none;padding:6px 0 18px;padding-inline-end:6vw}
 .al-hc.is-rail .hc-grid::-webkit-scrollbar{display:none}
 .al-hc.is-rail .hc-card{flex:0 0 calc((min(1320px,88vw) - var(--al-gap)*2)/3.15);scroll-snap-align:start}
 .al-rail-nav{display:flex;justify-content:flex-end;gap:10px;margin:0 0 18px;padding-inline-end:6vw}
 .al-rail-arrow{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;border:1px solid #0a2e4d26;background:#fbfcfa;color:var(--navy);cursor:pointer;transition:background .3s,color .3s,border-color .3s,opacity .3s}
 .al-rail-arrow:hover:not(:disabled){background:var(--navy);border-color:var(--navy);color:#fff}
 .al-rail-arrow:disabled{opacity:.35;cursor:default}
 .al-rail-arrow svg{width:20px;height:20px}
 html[dir=ltr] .al-rail-arrow svg{transform:scaleX(-1)}
}
@media(min-width:761px) and (max-width:1199px){.al-hc.is-rail .hc-card{flex-basis:calc((88vw - var(--al-gap))/2.2)}}