@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap");
/* Ghazza hero, after the Wellness reference: the photo fills the screen, its right half is frosted glass from top to bottom
   (blur only, no colour layer), the big title sits low on the glass, and a small card waits in the bottom corner of the clear side.
   The glass is on the right in both languages so the Haram and the Clock Tower stay clear. The button is the site's own .button. */
.al-glass{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;background:#e9e1d3;isolation:isolate;color:#fff}
.al-glass-photo{position:absolute;inset:0;z-index:0;will-change:transform}
.al-glass-photo picture,.al-glass-photo img{display:block;width:100%;height:100%}
.al-glass-photo img{object-fit:cover;object-position:30% 50%;transform:scale(1.05);transition:transform 2.2s cubic-bezier(.22,1,.36,1)}
.al-glass.is-ready .al-glass-photo img{transform:scale(1)}

/* The frosted half */
.al-glass-pane{position:absolute;z-index:1;top:0;bottom:0;right:0;width:50%;border-left:1px solid #ffffff38;
 -webkit-backdrop-filter:blur(12px) saturate(110%) brightness(.88);backdrop-filter:blur(12px) saturate(110%) brightness(.88);
 opacity:0;transition:opacity 1.2s cubic-bezier(.22,1,.36,1) .1s}
.al-glass.is-ready .al-glass-pane{opacity:1}

/* The words, low on the glass */
.al-glass-copy{position:absolute;z-index:2;right:0;width:50%;bottom:clamp(36px,7vh,84px);box-sizing:border-box;padding-inline:clamp(28px,3.4vw,64px)}
.al-glass-copy>*{opacity:0;transform:translateY(22px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1);transition-delay:calc(.45s + var(--d,0) * .13s)}
.al-glass.is-ready .al-glass-copy>*{opacity:1;transform:none}
.al-glass-copy>:nth-child(2){--d:1}.al-glass-copy>:nth-child(3){--d:2}.al-glass-copy>:nth-child(4){--d:3}
.al-glass-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:8px 16px;border-radius:999px;border:1px solid #ffffff73;box-shadow:inset 0 1px 0 #ffffff4d;font:600 clamp(13px,.95vw,15px)/1.4 Poppins,Cairo,sans-serif;letter-spacing:.04em;color:#fff}
.al-glass-kicker i{width:7px;height:7px;border-radius:50%;background:#D9A520;box-shadow:0 0 0 4px #d9a52033}
.al-glass h1 .al-glass-l1{font-weight:400;color:#ffffffd9}
.al-glass h1 .al-glass-l2{font-weight:700;color:#fff}
.al-page .al-glass h1{margin:0;font-size:clamp(42px,4.8vw,88px);font-weight:600;line-height:1.45;letter-spacing:0;word-spacing:.08em;color:#fff}
.al-glass h1 span{display:block}
html[dir=ltr] .al-page .al-glass h1{font-size:clamp(40px,4.6vw,86px);letter-spacing:-.025em;line-height:1.02}
.al-glass-lead{margin:22px 0 0;padding-inline-start:18px;border-inline-start:2px solid #D9A520;font-size:clamp(16px,1.2vw,19px);line-height:1.95;font-weight:500;color:#fff;max-width:36em}
.al-glass-actions{margin-top:30px;display:flex;align-items:center;gap:clamp(18px,2vw,32px);flex-wrap:wrap}
.al-glass-facts{display:flex;list-style:none;margin:0;padding:0}
.al-glass-facts li{display:flex;flex-direction:column;padding-inline:clamp(14px,1.4vw,22px);border-inline-start:1px solid #ffffff59}
.al-glass-facts li:first-child{padding-inline-start:0;border:0}
.al-glass-facts b{font-size:clamp(16px,1.2vw,19px);font-weight:700;line-height:1.35;color:#fff;white-space:nowrap}
.al-glass-facts span{font-size:12.5px;font-weight:500;line-height:1.5;color:#ffffffd9;white-space:nowrap}
.al-glass-actions .button{display:inline-flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;max-width:100%}

/* The small card, bottom corner of the clear side */
.al-glass-mini{position:absolute;z-index:2;left:clamp(16px,2vw,32px);bottom:clamp(16px,2.4vh,32px);width:clamp(220px,15vw,280px);display:flex;flex-direction:column;gap:10px;padding:14px 14px 16px;box-sizing:border-box;border-radius:6px;background:#fbfcfa;color:var(--navy,#0A2E4D);text-decoration:none;box-shadow:0 18px 40px -24px #0a2e4d59;
 opacity:0;transform:translateY(20px);transition:opacity 1s cubic-bezier(.22,1,.36,1) 1s,transform 1s cubic-bezier(.22,1,.36,1) 1s}
.al-glass.is-ready .al-glass-mini{opacity:1;transform:none}
.al-glass-mini-top{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600}
.al-glass-mini-top i{width:7px;height:7px;border-radius:50%;background:var(--teal,#0E7C77)}
.al-glass-mini-photo{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:#e9e1d3}
.al-glass-mini-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.al-glass-mini:hover .al-glass-mini-photo img{transform:scale(1.06)}
.al-glass-mini b{font-size:17px;font-weight:700;line-height:1.35}
.al-glass-mini-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--teal,#0E7C77)}
.al-glass-mini-link:after{content:'←';transition:transform .3s}
html[dir=ltr] .al-glass-mini-link:after{content:'→'}
.al-glass-mini:hover .al-glass-mini-link:after{transform:translateX(-4px)}
html[dir=ltr] .al-glass-mini:hover .al-glass-mini-link:after{transform:translateX(4px)}

/* The floating WhatsApp circle and the bottom bar wait 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){
 .al-page .al-glass h1{font-size:clamp(38px,4.2vw,68px);line-height:1.4}
 .al-glass-kicker{margin-bottom:12px}.al-glass-lead{margin-top:14px}.al-glass-actions{margin-top:20px}
 .al-glass-mini{width:210px}.al-glass-mini-photo{aspect-ratio:16/10}
}
/* Tablets in landscape: the glass takes a little more room */
@media(min-width:801px) and (max-width:1180px){
 .al-glass-pane,.al-glass-copy{width:56%}
 .al-glass-photo img{object-position:20% 50%}
 .al-glass-mini{width:200px}
}
/* Phones and portrait tablets: the lower part of the screen is the glass, the minarets and the Clock Tower stay clear above it */
@media(max-width:800px),(max-aspect-ratio:3/4){
 .al-glass{min-height:580px}
 .al-glass-photo img{object-position:50% 50%}
 /* The glass is only as tall as the words on it, so most of the photo shows */
 .al-glass-pane{display:none}
 .al-glass-copy{left:0;width:auto;bottom:0;padding:22px 22px calc(20px + env(safe-area-inset-bottom));border-top:1px solid #ffffff38;
  -webkit-backdrop-filter:blur(12px) saturate(110%) brightness(.88);backdrop-filter:blur(12px) saturate(110%) brightness(.88)}
 .al-glass-kicker{margin-bottom:10px;font-size:14px}
 .al-page .al-glass h1{font-size:clamp(30px,8.4vw,48px);line-height:1.35}
 html[dir=ltr] .al-page .al-glass h1{font-size:clamp(28px,7.8vw,48px);line-height:1.05}
 .al-glass-lead{margin-top:10px;font-size:14.5px;line-height:1.7}
 .al-glass-actions{margin-top:14px;gap:14px}
 .al-glass-actions .button{width:100%}
 .al-glass-facts{display:none}
 .al-glass-facts li{flex:1;padding-inline:10px}
 .al-glass-facts b{font-size:15px}.al-glass-facts span{font-size:11px;white-space:normal}
 .al-glass-kicker{padding:6px 12px}
 .al-glass-mini{display:none}
}
@media(min-width:601px) and (max-width:800px),(min-width:601px) and (max-aspect-ratio:3/4){
 .al-glass-copy{padding:30px 40px 36px}
 .al-glass-actions .button{width:auto}
 .al-glass-facts{display:flex;width:auto}
}
@media(max-width:600px) and (max-height:720px){
 .al-glass-facts{display:none}
 .al-page .al-glass h1,html[dir=ltr] .al-page .al-glass h1{font-size:clamp(32px,9.4vw,44px)}
 .al-glass-lead{font-size:14.5px}
}

/* Booking steps, after the Wellness "process" grid. Same width as the other sections (1040px). */
.gs{padding:var(--gx-sp) 20px;background:var(--al-surface,#fbfcfa)}
.gs-head{max-width:640px;margin:0 auto clamp(40px,5vw,64px);text-align:center}
.gs-label{margin:0 0 12px;font:600 13px/1.4 Poppins,Cairo,sans-serif;letter-spacing:.12em;color:#0a2e4db3}
.gs h2{margin:0;font-size:clamp(32px,3.6vw,56px);line-height:1.35;letter-spacing:0;color:var(--navy,#0A2E4D)}
.gs h2 span{display:block}.gs h2 span:first-child{font-weight:400}.gs h2 span:last-child{font-weight:700}
html[dir=ltr] .gs h2{line-height:1.05;letter-spacing:-.02em}
.gs-sub{margin:16px auto 0;max-width:30em;font-size:16px;line-height:1.8;color:#0a2e4dbf}
/* Grid measured from the reference: 295x315 cells, 12px gaps, 4px corners, 16px padding. Sizes use the cell width (cqw) so it scales like the reference. */
.gs-grid{--gs-ease:cubic-bezier(.44,0,.2,1);--gs-t:.65s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1040px;margin:0 auto}
.gs-card,.gs-photo{position:relative;margin:0;aspect-ratio:295/315;overflow:hidden;border-radius:4px;container-type:inline-size}
/* Number card: the big number sits off the top-left corner; on hover it travels and shrinks into the small number above the title, while the line icon slides down into the top-right corner */
.gs-card{background:#ffffff59;-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border:1px solid #ffffffd9;box-shadow:0 10px 40px #0a2e4d14,inset 0 1px 0 #fff;color:var(--navy,#0A2E4D);outline:0;cursor:default}
.gs-big{position:absolute;top:-15.3cqw;left:-14.9cqw;margin:0;font:400 63.4cqw/1.03 Poppins,sans-serif;letter-spacing:-.05em;color:#0a2e4d17;transform-origin:0 0;transition:transform var(--gs-t) var(--gs-ease),color var(--gs-t) var(--gs-ease);will-change:transform}
.gs-icon{position:absolute;top:-14.2cqw;left:61.7cqw;width:51.5cqw;height:51.5cqw;color:#0a2e4d1f;transform:translateY(-41cqw) scale(1.118);transition:transform var(--gs-t) var(--gs-ease)}
.gs-text{position:absolute;inset-inline:clamp(16px,6.5cqw,24px);bottom:clamp(16px,6.5cqw,24px)}
.gs-no{display:inline-block;margin:0 0 12px;font:400 clamp(20px,7cqw,24px)/1.03 Poppins,sans-serif;letter-spacing:-.05em;visibility:hidden}
.gs-card h3{margin:0;font-size:clamp(20px,7cqw,24px);font-weight:600;line-height:1.4;color:var(--navy,#0A2E4D)}
html[dir=ltr] .gs-card h3{font-weight:500;text-transform:uppercase;letter-spacing:.01em}
.gs-card p{margin:10px 0 0;font-size:clamp(14px,4.6cqw,15.5px);font-weight:500;line-height:1.6;color:#0a2e4da8}
.gs-card:is(:hover,:focus-visible) .gs-big{transform:translate(var(--gs-dx,0),var(--gs-dy,0)) scale(var(--gs-s,.1));color:var(--navy,#0A2E4D)}
.gs-card:is(:hover,:focus-visible) .gs-icon{transform:none}
/* Photo: a light warm tint at rest; on hover the photo zooms a little, a soft blur and deeper tint come over it, and the logo rises out of a mask */
.gs-photo>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--gs-t) var(--gs-ease)}
.gs-photo::after{content:"";position:absolute;inset:0;background:#3d361e1f;transition:background-color var(--gs-t) var(--gs-ease),backdrop-filter var(--gs-t) var(--gs-ease),-webkit-backdrop-filter var(--gs-t) var(--gs-ease)}
.gs-logo{position:absolute;z-index:1;left:50%;top:50%;width:46%;transform:translate(-50%,-50%);overflow:hidden;pointer-events:none}
.gs-logo img{display:block;width:100%;height:auto;filter:brightness(0) invert(1);transform:translateY(105%);transition:transform var(--gs-t) var(--gs-ease)}
.gs-photo:hover>img{transform:scale(1.078)}
.gs-photo:hover::after{background:#3d361e59;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.gs-photo:hover .gs-logo img{transform:none}
/* Phones: one column, each card followed by its photo */
@media(max-width:700px){
 .gs{padding-inline:16px}
 .gs-grid{grid-template-columns:1fr}
 .gs-card,.gs-photo{order:var(--o)}
 .gs-photo{aspect-ratio:4/3}
}
.gc-head{max-width:680px;margin:0 auto clamp(40px,5vw,64px);text-align:center}
/* "Why Ghazza": clean, on the page background (the theme keeps sections transparent). Two marquee lines in navy (one solid, one faint),
   then three short reasons. No gradients. */
.gz{position:relative;padding:var(--gx-sp) 0;color:var(--navy,#0A2E4D)}
.gz-head{max-width:760px;margin:0 auto clamp(40px,5vw,64px);padding:0 20px;text-align:center}
.gz-label{margin:0 0 12px;font:600 13px/1.4 Poppins,Cairo,sans-serif;letter-spacing:.12em;color:#0a2e4db3}
.gz h2{margin:0;font-size:clamp(32px,3.6vw,56px);line-height:1.35;color:var(--navy,#0A2E4D)}
.gz h2 span{display:block}.gz h2 span:first-child{font-weight:400}.gz h2 span:last-child{font-weight:700}
html[dir=ltr] .gz h2{line-height:1.05;letter-spacing:-.02em}
.gz-marquee{display:grid;gap:0;margin:0 0 clamp(48px,6vw,80px);border-block:1px solid #0a2e4d1f;padding-block:clamp(10px,1.4vw,18px)}
.gz-row{overflow:hidden;direction:ltr}
.gz-track{display:flex;width:max-content;animation:gz-run 50s linear infinite}
.gz-faint .gz-track{animation-direction:reverse;animation-duration:42s}
.gz-set{display:flex;align-items:center;flex:none}
.gz-set span{padding:0 clamp(14px,1.6vw,26px);font-size:clamp(22px,2.6vw,40px);font-weight:600;line-height:1.6;white-space:nowrap}
html[dir=ltr] .gz-set span{letter-spacing:-.03em;line-height:1.15}
.gz-solid span{color:var(--navy,#0A2E4D)}
.gz-faint span{color:#0a2e4d1f}
.gz-set i{display:block;width:7px;height:7px;border-radius:50%;background:var(--teal,#0E7C77);font-size:0}
.gz-faint .gz-set i{background:#0a2e4d1f}
@keyframes gz-run{to{transform:translateX(-50%)}}
.gz-reasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1020px;margin:0 auto;padding:0 20px}
.gz-reason{padding:4px clamp(18px,2.6vw,36px)}
.gz-reason+.gz-reason{border-inline-start:1px solid #0a2e4d1f}
.gz-reason span{display:block;margin-bottom:14px;font:500 14px/1 Poppins,sans-serif;color:var(--teal,#0E7C77)}
html[dir=rtl] .gz-reason span{text-align:right}
.gz-reason h3{margin:0 0 8px;font-size:clamp(20px,1.8vw,24px);font-weight:700;color:var(--navy,#0A2E4D)}
.gz-reason p{margin:0;font-size:15px;line-height:1.8;color:#0a2e4dbf}
.gz-cta{margin:clamp(40px,5vw,56px) 0 0;text-align:center}
@media(max-width:760px){
 .gz-reasons{grid-template-columns:1fr;gap:28px}
 .gz-reason{padding:0}.gz-reason+.gz-reason{border:0;padding-top:28px;border-top:1px solid #0a2e4d1f}
}
/* Reveal on scroll */
.gr-js [data-gr]{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--gr-i,0) * 110ms)}
.gr-js [data-gr].is-in{opacity:1;transform:none}
/* One spacing for every section after the hero (also the shared hotels and FAQ sections), so the gaps between sections are equal */
:root{--gx-sp:clamp(48px,5.5vw,80px)}
.al-glass-page .al-section{padding-block:var(--gx-sp)}
/* Your stay: a glass chooser. Pick who is travelling and the panel changes to what we arrange for that trip. It moves on by itself until the visitor picks one. */
.gp{position:relative;z-index:1;padding:var(--gx-sp) 20px;color:var(--navy,#0A2E4D)}
.gp .gc-head h2{margin:0;font-size:clamp(32px,3.6vw,56px);line-height:1.35;color:var(--navy,#0A2E4D)}
.gp h2 span{display:block}.gp h2 span:first-child{font-weight:400}.gp h2 span:last-child{font-weight:700}
html[dir=ltr] .gp h2{line-height:1.05;letter-spacing:-.02em}
.gp-box{box-sizing:border-box;max-width:1040px;margin:0 auto;padding:10px;border-radius:6px;background:#ffffff59;-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border:1px solid #ffffffd9;box-shadow:0 10px 40px #0a2e4d14,inset 0 1px 0 #fff}
.gp-switch{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:4px;background:#0a2e4d0d}
.gp-ind{position:absolute;top:4px;bottom:4px;inset-inline-start:4px;width:calc((100% - 8px) / var(--gp-n,3));border-radius:3px;background:var(--navy,#0A2E4D);box-shadow:0 8px 20px -10px #0a2e4d99;transform:translateX(calc(var(--gp-i,0) * 100% * var(--gp-dir,1)));transition:transform .7s cubic-bezier(.22,1,.36,1)}
html[dir=rtl] .gp-ind{--gp-dir:-1}
.gp-tab{position:relative;z-index:1;overflow:hidden;min-height:50px;padding:10px 12px;border:0;border-radius:3px;background:none;font-family:inherit;font-size:clamp(14px,1.1vw,16px);font-weight:600;line-height:1.4;color:#0a2e4db3;cursor:pointer;transition:color .5s}
.gp-tab:hover{color:var(--navy,#0A2E4D)}
.gp-tab.is-on{color:#fff}
.gp-tab:focus-visible{outline:2px solid var(--teal,#0E7C77);outline-offset:2px}
.gp-tab i{position:absolute;bottom:0;inset-inline-start:0;height:2px;width:100%;background:var(--teal,#0E7C77);transform:scaleX(0);transform-origin:var(--gp-o,left)}
html[dir=rtl] .gp-tab i{--gp-o:right}
.gp-auto .gp-tab.is-on i{animation:gp-time var(--gp-t,6s) linear forwards}
@keyframes gp-time{to{transform:scaleX(1)}}
.gp-stage{display:grid}
.gp-pane{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(28px,4vw,56px) clamp(20px,3.4vw,48px) clamp(28px,3.6vw,48px)}
.gp-pane[hidden]{display:grid;visibility:hidden;pointer-events:none}
.gp-no{display:block;margin:0 0 18px;font:500 13px/1 Poppins,sans-serif;letter-spacing:.12em;color:var(--teal,#0E7C77)}
.gp-lead h3{margin:0;font-size:clamp(34px,3.6vw,54px);font-weight:700;line-height:1.25}
html[dir=ltr] .gp-lead h3{letter-spacing:-.02em;line-height:1.08}
.gp-unit{margin:8px 0 0;font-size:15px;font-weight:600;color:#0a2e4d99}
.gp-text{margin:18px 0 28px;max-width:26em;font-size:16px;line-height:1.85;color:#0a2e4dbf}
.gp-points{list-style:none;margin:0;padding:0;border-top:1px solid #0a2e4d1f}
.gp-points li{display:flex;align-items:baseline;gap:18px;padding:18px 2px;border-bottom:1px solid #0a2e4d1f;font-size:clamp(16px,1.3vw,19px);font-weight:600;line-height:1.5}
.gp-points li span{flex:none;min-width:2ch;font:500 13px/1 Poppins,sans-serif;color:var(--teal,#0E7C77)}
/* Switching: the old panel fades out, the new title rises in and the points follow one by one */
.gp-lead>*,.gp-points li{opacity:0;transform:translateY(18px);transition:opacity .35s,transform .35s}
.gp-pane.is-on .gp-lead>*,.gp-pane.is-on .gp-points li{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
.gp-pane.is-on .gp-lead>:nth-child(2){transition-delay:.06s}.gp-pane.is-on .gp-lead>:nth-child(3){transition-delay:.12s}.gp-pane.is-on .gp-lead>:nth-child(4){transition-delay:.18s}.gp-pane.is-on .gp-lead>:nth-child(5){transition-delay:.24s}
.gp-pane.is-on .gp-points li{transition-delay:calc(.15s + var(--k) * 90ms)}
.gp-points li span{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.gp-points li:hover span{transform:translateX(calc(4px * var(--gp-dir,1)))}
html[dir=rtl] .gp-points li{--gp-dir:-1}
.gp-unsure{max-width:640px;margin:clamp(28px,3vw,40px) auto 0;text-align:center;font-size:15.5px;line-height:1.8;color:#0a2e4dbf}
.gp-unsure a{font-weight:700;color:var(--teal,#0E7C77);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;transition:color .3s}
.gp-unsure a:hover{color:var(--navy,#0A2E4D)}
@media(max-width:760px){
 .al-glass-page .al-section{padding-block:var(--gx-sp)}
 .gp{padding-inline:16px}
 .gp-box{padding:6px}
 .gp-tab{min-height:46px;padding:8px 6px;font-size:13.5px}
 .gp-pane{grid-template-columns:1fr;gap:26px;padding:28px 16px 22px}
 .gp-text{margin:14px 0 22px}
 .gp-lead .button{display:flex;justify-content:center}
 .gp-points li{padding:15px 2px;font-size:15.5px}
}

/* ===== Booking as a conversation (replaces the photo checkerboard): a navy band, the steps on one side and a phone-style
   WhatsApp chat on the other that plays itself when it comes on screen. No photos, no gradients. ===== */
.gc{position:relative;padding:calc(var(--gx-sp) * 1.25) 20px;background:#001C3C;color:#fff;overflow:hidden}
.gc-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(40px,6vw,96px);align-items:center;max-width:1040px;margin:0 auto}
.gc .gs-label{color:#ffffffa6}
.gc h2{margin:0;font-size:clamp(32px,3.6vw,56px);line-height:1.35;color:#fff}
.gc h2 span{display:block}.gc h2 span:first-child{font-weight:400;color:#ffffffc7}.gc h2 span:last-child{font-weight:700}
html[dir=ltr] .gc h2{line-height:1.05;letter-spacing:-.02em}
.gc-sub{margin:16px 0 0;max-width:30em;font-size:16px;line-height:1.85;color:#ffffffb3}
.gc-steps{list-style:none;margin:clamp(30px,3.4vw,44px) 0 0;padding:0;border-top:1px solid #ffffff1f}
.gc-step{position:relative;display:flex;gap:20px;padding:20px 0;border-bottom:1px solid #ffffff1f;opacity:.42;transition:opacity .6s cubic-bezier(.22,1,.36,1)}
.gc-step.is-on{opacity:1}
.gc-step-no{flex:none;min-width:2.2ch;padding-top:5px;font:500 13px/1 Poppins,sans-serif;letter-spacing:.06em;color:#ffffff99;transition:color .6s}
.gc-step.is-on .gc-step-no{color:#D9A520}
.gc-step h3{margin:0;font-size:clamp(18px,1.5vw,21px);font-weight:700;line-height:1.45;color:#fff}
.gc-step p{margin:4px 0 0;font-size:15px;line-height:1.75;color:#ffffffb3}
/* the active step's line fills along the bottom border while it is current */
.gc-step i{position:absolute;bottom:-1px;inset-inline-start:0;width:100%;height:1px;background:var(--teal-l,#3fb8b0);transform:scaleX(0);transform-origin:var(--gc-o,left)}
html[dir=rtl] .gc-step i{--gc-o:right}
.gc-step.is-on i{transform:scaleX(1);transition:transform var(--gc-t,4s) linear}
.gc-cta{margin:clamp(28px,3vw,40px) 0 0}
.gc-cta .button{display:inline-flex;align-items:center;gap:10px}

/* The phone: a real WhatsApp chat screen (light theme) inside a slim black handset */
.gc-wrap{grid-template-columns:minmax(0,1fr) minmax(0,316px)}
.gc-phone{position:relative;box-sizing:border-box;width:316px;height:620px;margin-inline:auto;padding:9px;border-radius:50px;background:#0d0d0f;box-shadow:0 0 0 1.5px #3a3a3f,0 50px 90px -40px #000000cc}
.gc-screen{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:41px;background:#efeae2;font-family:"IBM Plex Sans Arabic",-apple-system,sans-serif}
.gc-status{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 26px 0 30px;background:#008069;color:#fff;font:600 13px/1 "IBM Plex Sans Arabic",-apple-system,sans-serif}
.gc-island{position:absolute;top:10px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:20px;background:#0d0d0f}
.gc-sys{display:flex;align-items:center;gap:5px}.gc-sys svg{height:10px;width:auto;fill:currentColor}
.gc-bar{display:flex;align-items:center;gap:8px;padding:4px 12px 10px 6px;background:#008069;color:#fff}
html[dir=rtl] .gc-bar{padding:4px 6px 10px 12px}
.gc-back{flex:none;width:22px;height:22px}
html[dir=rtl] .gc-back{transform:scaleX(-1)}
.gc-avatar{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;overflow:hidden}
.gc-avatar img{width:82%;height:auto}
.gc-who{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.25}
.gc-who b{font-size:14.5px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-who small{font-size:11.5px;color:#ffffffcc}
.gc-acts{display:flex;gap:16px}.gc-acts svg{width:21px;height:21px}
/* chat wallpaper: WhatsApp beige with a faint dotted texture */
.gc-feed{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:0;padding:10px 10px 8px;overflow:hidden;background:#efeae2 radial-gradient(circle,#00000012 1px,transparent 1.3px) 0 0/16px 16px}
.gc-day{align-self:center;margin-bottom:auto}
.gc-day span{display:inline-block;padding:4px 10px;border-radius:7px;background:#fff;box-shadow:0 1px .5px #0b141a21;font-size:11px;font-weight:500;color:#54656f}
.gc-msg{display:flex;max-height:0;opacity:0;transform:translateY(12px) scale(.98);transition:max-height .6s cubic-bezier(.22,1,.36,1),margin .6s cubic-bezier(.22,1,.36,1),opacity .45s,transform .55s cubic-bezier(.22,1,.36,1)}
.gc-msg.is-in{max-height:320px;margin-top:6px;opacity:1;transform:none}
.gc-in{justify-content:flex-start}
.gc-out{justify-content:flex-end}
.gc-bubble{position:relative;max-width:82%;padding:6px 9px 5px;border-radius:8px;box-shadow:0 1px .5px #0b141a21;font-size:13.5px;line-height:1.6;color:#111b21}
.gc-bubble p{margin:0}
.gc-in .gc-bubble{background:#fff;border-start-start-radius:0}
.gc-out .gc-bubble{background:#d9fdd3;border-start-end-radius:0}
/* bubble tails */
.gc-bubble::before{content:"";position:absolute;top:0;width:8px;height:13px;background:inherit;clip-path:polygon(0 0,100% 0,100% 100%)}
.gc-in .gc-bubble::before{inset-inline-start:-7px;clip-path:polygon(100% 0,0 0,100% 100%)}
.gc-out .gc-bubble::before{inset-inline-end:-7px;clip-path:polygon(0 0,100% 0,0 100%)}
html[dir=rtl] .gc-in .gc-bubble::before{clip-path:polygon(0 0,100% 0,0 100%)}
html[dir=rtl] .gc-out .gc-bubble::before{clip-path:polygon(100% 0,0 0,100% 100%)}
.gc-bubble time{display:flex;align-items:center;justify-content:flex-end;gap:3px;margin-top:1px;font:400 10.5px/1 "IBM Plex Sans Arabic",-apple-system,sans-serif;color:#667781}
.gc-read{width:16px;height:11px;color:#53bdeb}
.gc-offer{width:82%;box-sizing:border-box}
.gc-opt{display:flex;align-items:center;gap:9px;margin-top:6px;padding:8px 9px;border-radius:7px;background:#f0f2f5;border:1.5px solid transparent;transition:border-color .5s,background-color .5s}
.gc-opt-no{flex:none;font:600 11px/1 "IBM Plex Sans Arabic",sans-serif;color:#8696a0}
.gc-opt-txt{display:flex;flex-direction:column;line-height:1.45}
.gc-opt-txt b{font-size:13px;font-weight:700;color:#111b21}
.gc-opt-txt small{font-size:11px;color:#667781}
.gc-feed.is-picked .gc-opt.is-pick{border-color:#00a884;background:#e7f8f2}
.gc-feed.is-picked .gc-opt.is-pick .gc-opt-no{color:#00a884}
.gc-done{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:8px 9px 5px}
.gc-done>span:nth-child(2){display:flex;flex-direction:column;flex:1;min-width:0;font-size:12.5px;color:#54656f}
.gc-done b{font-size:13.5px;color:#111b21}
.gc-done time{flex-basis:100%}
.gc-tick{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#00a884;color:#fff}
.gc-tick svg{width:15px;height:15px}
.gc-typing{display:flex;gap:4px;align-self:flex-start;max-height:0;padding:0 12px;border-radius:8px;border-start-start-radius:0;background:#fff;box-shadow:0 1px .5px #0b141a21;opacity:0;overflow:hidden;transition:max-height .35s,opacity .35s,padding .35s}
.gc-typing.is-on{max-height:40px;margin-top:6px;padding:11px 12px;opacity:1}
.gc-typing i{width:6px;height:6px;border-radius:50%;background:#8696a0;animation:gc-dot 1.2s infinite}
.gc-typing i:nth-child(2){animation-delay:.15s}.gc-typing i:nth-child(3){animation-delay:.3s}
@keyframes gc-dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
.gc-input{display:flex;align-items:center;gap:6px;padding:6px 8px 16px;background:#efeae2}
.gc-field{display:flex;align-items:center;gap:8px;flex:1;min-width:0;height:40px;padding:0 12px;border-radius:999px;background:#fff;box-shadow:0 1px .5px #0b141a21;font-size:13px;color:#8696a0}
.gc-field span{flex:1;white-space:nowrap;overflow:hidden}
.gc-field svg{flex:none;width:20px;height:20px;color:#8696a0;fill:currentColor}
.gc-field svg path{fill:none}
.gc-mic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#00a884;color:#fff}
.gc-mic svg{width:19px;height:19px;fill:currentColor}.gc-mic svg path{fill:none}
@media(max-width:900px){
 .gc-wrap{grid-template-columns:1fr;gap:0}
 .gc-copy{display:contents}
 .gc-copy>.gs-label,.gc h2,.gc-sub{text-align:center;margin-inline:auto}
 .gc-phone{order:4;margin-top:36px}
 .gc-steps{order:5;margin-top:32px}
 .gc-cta{order:6;margin-top:28px;text-align:center}
 .gc-copy>.gs-label{order:1}.gc h2{order:2}.gc-sub{order:3}
}
@media(max-width:600px){
 .gc{padding-inline:16px}
 .gc-phone{width:300px;height:600px}
 .gc-cta .button{display:flex;justify-content:center;width:100%}
}
@media(max-width:340px){.gc-phone{width:100%}}

/* ===== Booking alone vs with Asahl: two simple cards side by side. Ours is navy with gold ticks and the button. ===== */
.gk{position:relative;padding:var(--gx-sp) 20px;color:var(--navy,#0A2E4D)}
.gk .gc-head h2{margin:0;font-size:clamp(32px,3.6vw,56px);line-height:1.35;color:var(--navy,#0A2E4D)}
.gk h2 span{display:block}.gk h2 span:first-child{font-weight:400}.gk h2 span:last-child{font-weight:700}
html[dir=ltr] .gk h2{line-height:1.05;letter-spacing:-.02em}
/* The table: topic, then what you get booking alone (✗) beside what you get with Asahl (✓). Plain lines, navy header row. */
.gk-cmp{max-width:1000px;margin:0 auto;border:1px solid #0a2e4d24;border-radius:12px;overflow:hidden}
.gk-tr{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1fr)}
.gk-tr+.gk-tr:not(:nth-child(2)){border-top:1px solid #0a2e4d17}
.gk-tr>span{display:flex;align-items:center;gap:12px;padding:20px clamp(16px,2.2vw,28px);line-height:1.6}
.gk-tr>span+span{border-inline-start:1px solid #0a2e4d17}
.gk-th{background:var(--navy,#0A2E4D)}
.gk-th>span{padding-block:18px;font-size:15px;font-weight:700;color:#ffffffb3}
.gk-th>span+span{border-color:#ffffff1f}
.gk-th .gk-u{color:#fff}
.gk-f{font-size:clamp(15.5px,1.2vw,17px);font-weight:700;color:var(--navy,#0A2E4D)}
.gk-a{font-size:15px;color:#0a2e4d99}
.gk-u{font-size:15px;font-weight:600;color:var(--navy,#0A2E4D)}
.gk-no,.gk-yes{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%}
.gk-no{border:1.5px solid #0a2e4d2e;color:#0a2e4d66}
.gk-yes{background:var(--teal,#0E7C77);color:#fff}
.gk-no svg,.gk-yes svg{width:13px;height:13px}
.gk-cta{margin:clamp(36px,4vw,52px) 0 0;text-align:center}
.gk-cta .button{display:inline-flex;align-items:center;gap:10px}
.gr-js .gk-cmp:not(.is-in) .gk-yes{transform:scale(0)}
.gk-yes{transition:transform .6s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(.4s + var(--k,0) * 110ms)}
@media(max-width:700px){
 .gk{padding-inline:16px}
 .gk-tr{grid-template-columns:1fr 1fr}
 .gk-tr>.gk-f{grid-column:1/-1;padding:14px 14px 0;border:0}
 .gk-tr>span{align-items:flex-start;gap:8px;padding:10px 14px 16px}
 .gk-tr>.gk-a{border-inline-start:0}
 .gk-th>.gk-f{display:none}
 .gk-th>span{padding:14px}
 .gk-th>.gk-a{border:0}
 .gk-a,.gk-u{font-size:13.5px}
 .gk-no,.gk-yes{width:20px;height:20px;margin-top:2px}
 .gk-no svg,.gk-yes svg{width:11px;height:11px}
 .gk-cta .button{display:flex;justify-content:center;width:100%;box-sizing:border-box}
}

/* Chat text in an iPhone-like face everywhere inside the phone */
.gc-screen,.gc-screen *{font-family:"IBM Plex Sans Arabic",-apple-system,sans-serif!important}
/* The theme makes landing sections transparent and headings navy: keep the booking-chat band navy with white headings */ .area-landing #main>section.gc,.al-page section.gc{background:#001C3C}.al-page .gc :is(h2,h3){color:#fff}