/* Jabal Al-Kaaba hero ("invite"), after the Wedfully reference: the film fills the screen, a thin frame is drawn around it like an
   invitation card, the area's name sits large in the calm sky in the site's navy, and the frame's lower edge carries the facts on a clear
   glass strip. No text shadows; legibility comes from a soft light at the top of the picture only. Buttons are the site's own .button. */
.ak-hero{--ak-top:108px;--ak-side:28px;--ak-bot:52px;--ak-ease:cubic-bezier(.22,1,.36,1);position:relative;height:100vh;height:100svh;min-height:660px;overflow:hidden;isolation:isolate;background:#F4F6F8;color:var(--navy,#0A2E4D)}
#main>section.ak-hero{background:#F4F6F8}
.ak-media{position:absolute;inset:0;z-index:0;will-change:transform}
.ak-media picture,.ak-media img,.ak-media video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.ak-media img{object-position:50% 62%;transform:scale(1.04);transition:transform 2.4s var(--ak-ease)}
.ak-hero.is-ready .ak-media img{transform:scale(1)}
.ak-media video{object-position:50% 55%;opacity:0;transition:opacity 1.2s ease}
.ak-media video.is-playing{opacity:1}
/* Light from the sky down, so the navy title reads on any frame of the film */
.ak-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#ffffff8c 0,#ffffff52 30%,#ffffff00 58%),linear-gradient(0deg,#0a2e4d26 0,#0a2e4d00 22%)}

/* The invitation frame, drawn in when the page opens */
.ak-frame{position:absolute;z-index:2;inset:var(--ak-top) var(--ak-side) var(--ak-bot);pointer-events:none}
.ak-frame i{position:absolute;display:block;background:#ffffffc7;transition:transform 1.6s var(--ak-ease) .25s}
.ak-frame-t,.ak-frame-b{left:0;right:0;height:1px;transform:scaleX(0)}
.ak-frame-l,.ak-frame-r{top:0;bottom:0;width:1px;transform:scaleY(0)}
.ak-frame-t{top:0;transform-origin:right}.ak-frame-b{bottom:0;transform-origin:left}
.ak-frame-r{right:0;transform-origin:bottom}.ak-frame-l{left:0;transform-origin:top}
.ak-hero.is-ready .ak-frame i{transform:none}

/* The words, centred in the sky */
.ak-copy{position:absolute;z-index:3;top:calc(var(--ak-top) + clamp(20px,4.4vh,56px));inset-inline:var(--ak-side);display:flex;flex-direction:column;align-items:center;text-align:center;padding-inline:24px;will-change:transform,opacity}
.ak-copy>*{opacity:0;transform:translateY(18px);transition:opacity 1.1s var(--ak-ease),transform 1.1s var(--ak-ease);transition-delay:calc(.5s + var(--d,0) * .14s)}
.ak-copy>:nth-child(2){--d:1}.ak-copy>:nth-child(3){--d:2}.ak-copy>:nth-child(4){--d:3}
.ak-hero.is-ready .ak-copy>*{opacity:1;transform:none}
.ak-kicker{display:inline-flex;align-items:center;gap:14px;margin:0 0 6px;font-size:clamp(14px,1vw,16px);font-weight:600;line-height:1.6;color:var(--teal,#0E7C77)}
.ak-kicker:before,.ak-kicker:after{content:'';width:34px;height:1px;background:currentColor;opacity:.55}
.al-page .ak-hero h1{margin:0;font-size:clamp(64px,9.6vw,160px);font-weight:800;line-height:1.08;letter-spacing:0;color:var(--navy,#0A2E4D)}
html[dir=ltr] .ak-kicker{font-family:Poppins,sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
html[dir=ltr] .al-page .ak-hero h1{font-family:Poppins,sans-serif;font-weight:600;font-size:clamp(54px,8vw,138px);line-height:1.02;letter-spacing:-.035em;margin:.12em 0 .1em}
.ak-line{margin:8px 0 0;font-size:clamp(17px,1.4vw,22px);font-weight:500;line-height:1.8;color:#0a2e4dd9}
html[dir=ltr] .ak-line{font-family:Poppins,sans-serif;font-weight:400}
.ak-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(20px,3.4vh,34px)}
.ak-actions .button{display:inline-flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box}

/* Facts on the frame's lower edge: a clear glass strip that the line runs behind */
.ak-facts{position:absolute;z-index:3;left:50%;bottom:var(--ak-bot);display:flex;list-style:none;margin:0;padding:12px 8px;border-radius:999px;border:1px solid #ffffff99;box-shadow:inset 0 1px 0 #ffffff66;-webkit-backdrop-filter:blur(16px) saturate(130%) brightness(.82);backdrop-filter:blur(16px) saturate(130%) brightness(.82);transform:translate(-50%,50%);opacity:0;transition:opacity 1s var(--ak-ease) 1.1s}
.ak-hero.is-ready .ak-facts{opacity:1}
.ak-facts li{display:flex;flex-direction:column;align-items:center;padding-inline:clamp(18px,1.8vw,28px);border-inline-start:1px solid #ffffff4d;white-space:nowrap}
.ak-facts li:first-child{border:0}
.ak-facts b{font-size:16px;font-weight:700;line-height:1.4;color:#fff}
.ak-facts span{font-size:12.5px;font-weight:500;line-height:1.5;color:#ffffffd9}

/* Round scroll button on the frame's corner */
.ak-scroll{position:absolute;z-index:3;bottom:var(--ak-bot);inset-inline-end:calc(var(--ak-side) + 40px);display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:#fff;border:1px solid #ffffff99;box-shadow:inset 0 1px 0 #ffffff66;-webkit-backdrop-filter:blur(16px) brightness(.82);backdrop-filter:blur(16px) brightness(.82);transform:translateY(50%);opacity:0;transition:opacity 1s var(--ak-ease) 1.3s,background .4s,color .4s}
.ak-hero.is-ready .ak-scroll{opacity:1}
.ak-scroll>span{display:grid;place-items:center;width:20px;height:20px;line-height:0}
.ak-scroll svg{display:block;width:20px;height:20px;animation:ak-bob 2.4s ease-in-out infinite}
.ak-scroll:hover{background:var(--navy,#0A2E4D);color:#fff}
@keyframes ak-bob{0%,100%{transform:translateY(-2.5px)}50%{transform:translateY(2.5px)}}

/* The floating WhatsApp circle waits until the hero (which has its own button) has scrolled away */
body.al-in-arch .al-float{opacity:0;visibility:hidden}

/* Short desktop screens */
@media(min-width:801px) and (max-height:760px){
 .ak-hero{--ak-top:100px}
 .al-page .ak-hero h1{font-size:clamp(56px,8vw,120px)}
 .ak-copy{top:calc(var(--ak-top) + 18px)}
}
/* Phones and portrait tablets */
@media(max-width:800px),(max-aspect-ratio:3/4){
 .ak-hero{--ak-top:92px;--ak-side:14px;--ak-bot:14px;min-height:600px}
 .ak-media img,.ak-media video{object-position:28% 50%}
 .ak-copy{top:calc(var(--ak-top) + clamp(22px,5vh,48px));padding-inline:14px}
 .ak-kicker{font-size:13.5px;gap:10px}.ak-kicker:before,.ak-kicker:after{width:20px}
 .al-page .ak-hero h1{font-size:clamp(50px,15vw,92px)}
 html[dir=ltr] .al-page .ak-hero h1{font-size:clamp(44px,13vw,84px)}
 .ak-line{font-size:16px;line-height:1.7}
 .ak-actions{width:100%;max-width:420px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
 .ak-actions .button{padding-inline:12px;min-width:0}
 .ak-facts{left:calc(var(--ak-side) + 12px);right:calc(var(--ak-side) + 12px);bottom:calc(var(--ak-side) + 14px + env(safe-area-inset-bottom));transform:none;display:grid;grid-template-columns:repeat(3,1fr);padding:12px 4px;border-radius:18px}
 .ak-facts li{padding-inline:6px;white-space:normal;text-align:center}
 .ak-facts b{font-size:14.5px}.ak-facts span{font-size:11px;line-height:1.45}
 .ak-scroll{display:none}
}
@media(max-width:360px){.ak-actions{grid-template-columns:1fr}}

/* "Your stay in Jabal Al-Kaaba" (after Wedfully's dress-code section): the stage holds still while the page scrolls through four reasons */
#main>section.ak-look{position:relative;height:calc(100vh + var(--n) * 70vh);height:calc(100svh + var(--n) * 70svh);background:#F4F6F8;color:var(--navy,#0A2E4D)}
.ak-look-stage{position:sticky;top:0;height:100vh;height:100svh;min-height:620px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(28px,4vw,72px);padding:clamp(96px,12vh,124px) clamp(24px,5vw,96px) clamp(56px,9vh,88px);overflow:hidden}
.ak-look-label{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;font-size:14px;font-weight:600;color:var(--teal,#0E7C77)}
.ak-look-label:before{content:'';width:28px;height:1px;background:currentColor;opacity:.6}
.al-page .ak-look h2{margin:0;font-size:clamp(40px,4.4vw,72px);font-weight:800;line-height:1.2;color:var(--navy,#0A2E4D)}
.al-page .ak-look h2 span{display:block;font-weight:400}
html[dir=ltr] .al-page .ak-look h2{font-family:Poppins,sans-serif;font-weight:600;letter-spacing:-.03em;line-height:1.05}
html[dir=ltr] .ak-look-label{font-family:Poppins,sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.ak-look-lead{margin:20px 0 28px;max-width:30em;font-size:clamp(15.5px,1.1vw,17.5px);line-height:1.9;color:#0a2e4dc4}
.ak-look-intro .button{display:inline-flex;align-items:center;gap:10px}

/* The photo */
.ak-look-media{position:relative;height:min(calc(100svh - 190px),760px);aspect-ratio:4/5;max-width:40vw}
.ak-look-frame{position:absolute;inset:0;margin:0;border-radius:24px;overflow:hidden;clip-path:inset(0 round 24px);background:#e9e6df;isolation:isolate}
.ak-look-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.1);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform 1.4s cubic-bezier(.22,1,.36,1)}
.ak-look-img.is-on{opacity:1;transform:scale(1.02);z-index:1}
.ak-look-frame:after{content:'';position:absolute;inset:auto 0 0;height:48%;z-index:2;background:linear-gradient(0deg,#001c3cb3,#001c3c00);pointer-events:none}
.ak-look-caps{position:absolute;z-index:3;inset:auto clamp(20px,2.4vw,36px) clamp(20px,3vh,34px);color:#fff}
.ak-look-cap{position:absolute;inset:auto 0 0;display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.ak-look-cap.is-on{opacity:1;transform:none;transition-delay:.2s}
.ak-look-cap small{font-size:13px;font-weight:600;color:#ffffffd9}
.ak-look-cap b{font-size:clamp(24px,2.2vw,36px);font-weight:700;line-height:1.4;color:#fff}
html[dir=ltr] .ak-look-cap small{font-family:Poppins,sans-serif;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
html[dir=ltr] .ak-look-cap b{font-family:Poppins,sans-serif;font-weight:600;line-height:1.2;letter-spacing:-.02em}

/* The tilted card: what comes next */
.ak-look-next{position:absolute;z-index:4;top:14%;inset-inline-start:-74px;width:clamp(120px,9.5vw,158px);padding:9px 9px 12px;border-radius:14px;background:#fff;box-shadow:0 22px 44px -18px #0a2e4d59,0 2px 6px #0a2e4d14;transform:rotate(6deg);transition:transform .6s cubic-bezier(.22,1,.36,1)}
html[dir=ltr] .ak-look-next{transform:rotate(-6deg)}
.ak-look-next-photo{position:relative;display:block;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:#e9e6df}
.ak-look-next-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.ak-look-next-photo img.is-on{opacity:1}
.ak-look-next-label{display:block;margin-top:8px;text-align:center;font-size:12px;font-weight:600;color:#0a2e4da8}
html[dir=ltr] .ak-look-next-label{font-family:Poppins,sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase}

/* The round seal on the far edge, turning with the scroll */
.ak-look-seal{position:absolute;z-index:4;top:50%;inset-inline-end:-58px;width:clamp(104px,8.4vw,132px);aspect-ratio:1;margin-top:calc(clamp(104px,8.4vw,132px) / -2);border-radius:50%;background:var(--navy,#0A2E4D);color:#fff;box-shadow:0 18px 36px -16px #0a2e4d80,0 0 0 6px #F4F6F8;display:grid;place-items:center;transition:background .6s ease}
.ak-look-seal>svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(var(--seal,0deg))}
.ak-look-seal>svg{direction:ltr;overflow:visible}
.ak-look-seal text{font:600 8.6px Poppins,sans-serif;letter-spacing:.14em;fill:#fff;direction:ltr;unicode-bidi:normal}
.ak-look-seal i{display:block;width:18px;height:18px;color:#D9A520}
.ak-look-seal i svg{display:block;width:100%;height:100%}
.ak-look[data-on="1"] .ak-look-seal,.ak-look[data-on="3"] .ak-look-seal{background:var(--teal,#0E7C77)}

/* The list */
.ak-look-list{list-style:none;margin:0;padding:0;max-width:340px;justify-self:end}
html[dir=rtl] .ak-look-list{justify-self:start}
.ak-look-list li{border-bottom:1px solid #0a2e4d1f}
.ak-look-item{display:flex;align-items:center;gap:14px;width:100%;padding:18px 0;margin:0;background:none;border:0;font:inherit;font-size:clamp(16px,1.15vw,19px);font-weight:600;color:#0a2e4d8c;text-align:start;cursor:pointer;transition:color .4s}
.ak-look-list li.is-on .ak-look-item,.ak-look-item:hover{color:var(--navy,#0A2E4D)}
.ak-look-dot{flex:none;width:12px;height:12px;border-radius:50%;background:#0a2e4d33;transition:transform .5s cubic-bezier(.22,1,.36,1),background .4s}
.ak-look-list li.is-on .ak-look-dot{background:var(--teal,#0E7C77);transform:scale(1.6);box-shadow:0 0 0 4px #0e7c7722}
.ak-look-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.22,1,.36,1)}
.ak-look-more>div{overflow:hidden;padding-inline-start:26px}
.ak-look-list li.is-on .ak-look-more{grid-template-rows:1fr}
.ak-look-more p{margin:0 0 10px;font-size:14.5px;line-height:1.85;color:#0a2e4dc4}
.ak-look-more .ak-look-fact{display:inline-flex;align-items:baseline;gap:6px;margin-bottom:20px;padding:5px 12px;border-radius:999px;background:#0e7c7712;color:var(--teal,#0E7C77);font-size:13px;font-weight:600}
.ak-look-fact b{font-weight:800}

/* Counter and progress line */
.ak-look-count{position:absolute;top:clamp(96px,12vh,124px);inset-inline-end:clamp(24px,5vw,96px);margin:0;font:500 13px/1 Poppins,sans-serif;letter-spacing:.12em;color:#0a2e4d8c}
.ak-look-count b{font-weight:700;color:var(--navy,#0A2E4D)}
.ak-look-bar{position:absolute;inset-inline:clamp(24px,5vw,96px);bottom:clamp(28px,4.5vh,44px);height:1px;background:#0a2e4d1f}
.ak-look-bar i{position:absolute;inset-block:0;inset-inline-start:0;width:calc(var(--p,0) * 100%);background:var(--navy,#0A2E4D)}

/* Laptops: a little tighter */
@media(min-width:801px) and (max-width:1180px){
 .ak-look-stage{grid-template-columns:minmax(0,1fr) auto minmax(0,.9fr);gap:28px}
 .ak-look-next{inset-inline-start:-48px}
 .ak-look-seal{inset-inline-end:-40px}
}
/* Phones and portrait tablets: title above, the photo in the middle, the open reason below, dots for the rest */
@media(max-width:800px),(max-aspect-ratio:3/4){
 #main>section.ak-look{height:calc(100svh + var(--n) * 80svh)}
 .ak-look-stage{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;align-items:stretch;gap:12px;padding:84px 16px calc(96px + env(safe-area-inset-bottom))}
 .ak-look-label{margin-bottom:4px;font-size:13px}
 .al-page .ak-look h2{font-size:clamp(26px,7.4vw,36px);line-height:1.3}
 .al-page .ak-look h2 span{display:inline}
 .ak-look-lead,.ak-look-intro .button,.ak-look-next,.ak-look-count{display:none}
 .ak-look-media{height:auto;max-width:none;aspect-ratio:auto;min-height:0}
 .ak-look-frame{border-radius:20px;clip-path:inset(0 round 20px)}
 .ak-look-seal{top:12px;margin:0;inset-inline-end:12px;width:72px;box-shadow:0 10px 24px -12px #0a2e4d80}
 .ak-look-seal i{width:14px;height:14px}
 .ak-look-cap b{font-size:clamp(21px,6vw,28px)}
 .ak-look-list{max-width:none;justify-self:stretch;display:grid}
 .ak-look-list li{display:none;border:0}
 .ak-look-list li.is-on{display:block}
 .ak-look-item{padding:4px 0 6px;font-size:18px;color:var(--navy,#0A2E4D)}
 .ak-look-list li.is-on .ak-look-dot{transform:none}
 .ak-look-more{grid-template-rows:1fr}
 .ak-look-more>div{padding-inline-start:26px}
 .ak-look-more p{font-size:13.5px;line-height:1.7;margin-bottom:6px}
 .ak-look-more .ak-look-fact{margin-bottom:6px}
 .ak-look-bar{bottom:calc(80px + env(safe-area-inset-bottom));inset-inline:16px}
}

/* One background for the whole page (Farha: #F4F6F8), from the hero down to the hotels and the footer */
body.al-arch-page:has(#ak-hero),body:has(#ak-hero) .al-page,body:has(#ak-hero) #main{background:#F4F6F8}
body:has(#ak-hero) .st-tab-card{background:#F4F6F8}
body:has(#ak-hero) .st-tab-card:before,body:has(#ak-hero) .st-tab-card:after{background:radial-gradient(circle at 0 0,transparent 29px,#F4F6F8 30px)}
html[dir=rtl] body:has(#ak-hero) .st-tab-card:before,html[dir=rtl] body:has(#ak-hero) .st-tab-card:after{background:radial-gradient(circle at 100% 0,transparent 29px,#F4F6F8 30px)}

/* ===== Text-only sections (area-landing-invite-more.php): rooms, season, steps, ready ===== */
#main>section.ak-rooms,#main>section.ak-season,#main>section.ak-steps,#main>section.ak-ready{background:#F4F6F8;color:var(--navy,#0A2E4D)}
.ak-rooms,.ak-season,.ak-steps,.ak-ready{position:relative;padding-block:clamp(84px,11vw,150px)}
.ak-season,.ak-ready{padding-top:0}
.ak-wrap{width:min(1240px,calc(100% - 2 * clamp(20px,5vw,96px)));margin-inline:auto}
.ak-head{text-align:center;max-width:760px;margin:0 auto clamp(40px,5vw,64px)}
.ak-label{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;font-size:14px;font-weight:600;color:var(--teal,#0E7C77)}
.ak-label:before,.ak-head .ak-label:after,.ak-card .ak-label:after{content:'';width:28px;height:1px;background:currentColor;opacity:.6}
.al-page :is(.ak-rooms,.ak-season,.ak-steps,.ak-ready) h2{margin:0;font-size:clamp(36px,4vw,64px);font-weight:800;line-height:1.2;color:var(--navy,#0A2E4D)}
.al-page :is(.ak-rooms,.ak-season,.ak-steps,.ak-ready) h2 span{font-weight:400}
.ak-lead{margin:18px auto 0;max-width:36em;font-size:clamp(15.5px,1.1vw,17.5px);line-height:1.9;color:#0a2e4dc4}
html[dir=ltr] .al-page :is(.ak-rooms,.ak-season,.ak-steps,.ak-ready) :is(h2,h3){font-family:Poppins,sans-serif;font-weight:600;letter-spacing:-.025em}
html[dir=ltr] .al-page :is(.ak-rooms,.ak-season,.ak-steps,.ak-ready) h2 span{font-weight:400}
html[dir=ltr] .ak-label{font-family:Poppins,sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
/* Gentle reveal as each part comes into view */
.ak-rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ak-ease,cubic-bezier(.22,1,.36,1)) calc(var(--d,0) * 110ms),transform .9s cubic-bezier(.22,1,.36,1) calc(var(--d,0) * 110ms)}
.ak-rv.is-in{opacity:1;transform:none}

/* Rooms: three view types like three invitation cards */
.ak-rooms-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.ak-room{position:relative;padding:clamp(26px,2.6vw,40px);border-radius:26px;background:#fff;box-shadow:0 24px 50px -36px #0a2e4d40;isolation:isolate}
.ak-room:before{content:'';position:absolute;inset:10px;border:1px solid #0a2e4d1a;border-radius:18px;pointer-events:none;transition:border-color .4s}
.ak-room:hover:before{border-color:#0e7c7766}
.ak-room.is-lead{background:var(--navy,#0A2E4D);color:#fff}
.ak-room.is-lead:before{border-color:#ffffff2e}
.ak-room-tag{display:inline-block;margin:0 0 18px;padding:5px 12px;border-radius:999px;background:#0e7c7714;color:var(--teal,#0E7C77);font-size:12.5px;font-weight:600}
.ak-room.is-lead .ak-room-tag{background:#ffffff1f;color:#fff}
.al-page .ak-room h3{margin:0 0 22px;font-size:clamp(24px,2vw,32px);font-weight:800;line-height:1.3;color:inherit}
.ak-room dl{margin:0;display:grid;gap:0}
.ak-room dl>div{padding:14px 0;border-top:1px solid #0a2e4d14}
.ak-room.is-lead dl>div{border-color:#ffffff24}
.ak-room dt{margin:0 0 4px;font-size:12.5px;font-weight:600;color:#0a2e4d80}
.ak-room.is-lead dt{color:#ffffff8c}
.ak-room dd{margin:0;font-size:15px;line-height:1.75;color:#0a2e4dd9}
.ak-room.is-lead dd{color:#ffffffe6}
.ak-groups{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(20px,3vw,48px);margin-top:clamp(28px,3vw,44px);padding:22px 0;border-top:1px solid #0a2e4d1f;border-bottom:1px solid #0a2e4d1f}
.ak-groups-title{margin:0;font-size:clamp(18px,1.4vw,22px);font-weight:700}
.ak-groups ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.ak-groups li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding-inline:clamp(12px,1.6vw,24px);border-inline-start:1px solid #0a2e4d1a}
.ak-groups li b{grid-row:1/3;font-size:clamp(30px,2.6vw,42px);font-weight:800;line-height:1;color:var(--teal,#0E7C77)}
.ak-groups li span{font-size:12.5px;color:#0a2e4d8c}
.ak-groups li strong{font-size:14.5px;font-weight:700;line-height:1.5}

/* Season: a booking calendar, each row with a five-step demand meter that fills in */
.ak-season-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:clamp(36px,6vw,110px);align-items:start}
.ak-season-side{position:sticky;top:120px}
.ak-season-side .ak-lead{margin:18px 0 28px}
.ak-season-side .button{display:inline-flex;align-items:center;gap:10px}
.ak-season-list{list-style:none;margin:0;padding:0;border-top:1px solid #0a2e4d26}
.ak-season-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"no name meter" "no tip tip";column-gap:18px;row-gap:6px;align-items:center;padding:24px 0;border-bottom:1px solid #0a2e4d1a}
.ak-season-no{grid-area:no;align-self:start;padding-top:4px;font-size:13px;font-weight:600;color:#0a2e4d66}
.al-page .ak-season-list h3{grid-area:name;margin:0;font-size:clamp(19px,1.5vw,24px);font-weight:700;line-height:1.4;color:var(--navy,#0A2E4D)}
.ak-season-list p{grid-area:tip;margin:0;font-size:15px;line-height:1.8;color:#0a2e4db8}
.ak-meter{grid-area:meter;display:flex;gap:5px;direction:ltr}
html[dir=rtl] .ak-meter{direction:rtl}
.ak-meter i{width:22px;height:6px;border-radius:3px;background:#0a2e4d14;overflow:hidden;position:relative}
.ak-meter i.on:after{content:'';position:absolute;inset:0;background:var(--teal,#0E7C77);transform:scaleX(0);transform-origin:var(--from,left);transition:transform .5s ease calc(.35s + var(--k) * 90ms)}
html[dir=rtl] .ak-meter i.on:after{--from:right}
.ak-meter[data-level="5"] i.on:after{background:var(--navy,#0A2E4D)}
.ak-rv.is-in .ak-meter i.on:after{transform:none}

/* Steps: four steps on one line that fills while the page scrolls */
.ak-steps-track{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(18px,2.4vw,36px)}
.ak-steps-line{position:absolute;top:7px;inset-inline:0;height:1px;background:#0a2e4d1f}
.ak-steps-line i{position:absolute;inset-block:0;inset-inline-start:0;width:calc(var(--p,0) * 100%);background:var(--teal,#0E7C77)}
.ak-step{position:relative;padding-top:42px}
.ak-step-dot{position:absolute;top:0;inset-inline-start:0;width:15px;height:15px;border-radius:50%;background:#F4F6F8;border:1px solid #0a2e4d40;box-sizing:border-box;transition:background .5s,border-color .5s,box-shadow .5s}
.ak-step.is-on .ak-step-dot{background:var(--teal,#0E7C77);border-color:var(--teal,#0E7C77);box-shadow:0 0 0 5px #0e7c771f}
.ak-step-no{display:block;margin-bottom:10px;font-size:clamp(46px,4.6vw,76px);font-weight:800;line-height:1;color:#0a2e4d1a;transition:color .6s}
.ak-step.is-on .ak-step-no{color:var(--navy,#0A2E4D)}
html[dir=ltr] .ak-step-no{font-family:Poppins,sans-serif;font-weight:600}
.al-page .ak-step h3{margin:0 0 8px;font-size:clamp(18px,1.4vw,22px);font-weight:700;line-height:1.45;color:var(--navy,#0A2E4D)}
.ak-step p{margin:0;font-size:15px;line-height:1.8;color:#0a2e4db8}
.ak-steps-cta{margin:clamp(40px,4vw,56px) 0 0;text-align:center}
.ak-steps-cta .button{display:inline-flex;align-items:center;gap:10px}

/* Ready: the checklist as a card, framed like the invitation in the hero */
.ak-card{position:relative;max-width:820px;margin-inline:auto;padding:clamp(40px,5vw,72px) clamp(24px,5vw,80px);border-radius:30px;background:#fff;text-align:center;box-shadow:0 30px 60px -44px #0a2e4d55}
.ak-card:before,.ak-card:after{content:'';position:absolute;border:1px solid #0a2e4d1f;border-radius:22px;pointer-events:none}
.ak-card:before{inset:12px}
.ak-card:after{inset:17px;border-color:#0e7c7726;border-radius:18px}
.ak-ready-list{list-style:none;margin:clamp(28px,3vw,40px) auto 0;padding:0;max-width:560px;text-align:start}
.ak-ready-list li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px dashed #0a2e4d24;font-size:clamp(15px,1.1vw,17px);line-height:1.75}
.ak-ready-list li:last-child{border-bottom:0}
.ak-ready-list svg{flex:none;width:28px;height:28px;margin-top:-1px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ak-ready-list circle{stroke:#0e7c7740;stroke-width:1.3}
.ak-ready-list path{stroke:var(--teal,#0E7C77);stroke-width:2.2;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .5s ease calc(.4s + var(--d) * 180ms)}
.ak-rv.is-in .ak-ready-list path{stroke-dashoffset:0}
.ak-sign{display:flex;flex-direction:column;align-items:center;gap:4px;margin:clamp(28px,3vw,40px) 0 0}
.ak-sign span{display:inline-flex;align-items:center;gap:12px;font-size:clamp(18px,1.5vw,22px);font-weight:600;color:var(--teal,#0E7C77)}
.ak-sign span:before,.ak-sign span:after{content:'';width:34px;height:1px;background:currentColor;opacity:.5}
.ak-sign small{font-size:13px;color:#0a2e4d8c}

/* Laptops */
@media(min-width:801px) and (max-width:1100px){
 .ak-groups{grid-template-columns:1fr}
 .ak-room dd{font-size:14px}
}
/* Phones and portrait tablets */
@media(max-width:800px),(max-aspect-ratio:3/4){
 .ak-wrap{width:calc(100% - 32px)}
 .ak-rooms,.ak-season,.ak-steps,.ak-ready{padding-block:72px}
 .ak-season,.ak-ready{padding-top:0}
 .ak-ready{padding-bottom:84px}
 .al-page :is(.ak-rooms,.ak-season,.ak-steps,.ak-ready) h2{font-size:clamp(28px,8vw,38px);line-height:1.3}
 .ak-lead{font-size:15px;line-height:1.85}
 .ak-rooms-grid{grid-template-columns:1fr}
 .ak-room{border-radius:22px}
 .ak-groups{grid-template-columns:1fr;gap:14px}
 .ak-groups ul{grid-template-columns:1fr 1fr;row-gap:16px}
 .ak-groups li{padding-inline:12px}
 .ak-groups li:nth-child(odd){border-inline-start:0;padding-inline-start:0}
 .ak-season-grid{grid-template-columns:1fr;gap:28px}
 .ak-season-side{position:static;text-align:center}
 .ak-season-side .ak-lead{margin-inline:auto}
 .ak-season-list li{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"no name" "no meter" "no tip";padding:20px 0}
 .ak-meter{margin:4px 0 2px}
 .ak-steps-track{grid-template-columns:1fr;gap:30px;padding-inline-start:34px}
 .ak-steps-line{top:0;bottom:0;inset-inline-start:7px;inset-inline-end:auto;width:1px;height:auto}
 .ak-steps-line i{width:auto;inset-inline:0;bottom:auto;height:calc(var(--p,0) * 100%)}
 .ak-step{padding-top:0}
 .ak-step-dot{top:4px;inset-inline-start:-34px}
 .ak-step-no{font-size:40px;margin-bottom:6px}
 .ak-card{border-radius:24px;padding:44px 22px 36px}
 .ak-card:before{inset:8px;border-radius:18px}.ak-card:after{inset:12px;border-radius:15px}
 .ak-ready-list li{font-size:15px}
}
.al-page .ak-season h2 span{display:block}
/* "Browse hotels" in the hero goes down to the hotels on this page; the fixed header must not cover the title */
body:has(#ak-hero) #al-hotels{scroll-margin-top:110px}