/* ==========================================================================
   Abyat Al Sharq — page-home.css (home page)
   Every class is prefixed .home-. Uses the design-system tokens only (critical.css).
   Motion: only transform / translate / scale / rotate / opacity animate. Calm mode (reduced motion) gets the
   soft fades from base.css; the scroll-linked extras below run only with html[data-motion="full"].
   ========================================================================== */

/* curtain reveals take the colour of the band they sit on */
.home-honey { --curtain: #241526; }
.home-cafe { --curtain: var(--walnut-800); }
.home-welcome, .home-gallery, .home-rooms { --curtain: var(--stone-200); }

/* ================================================================ 1 · hero (3D facade stage + headline) */
.home-hero {
  --pattern-opacity: .055; --pattern-size: 64px;
  --stage-arch: 50% 50% var(--r-md) var(--r-md) / 22% 22% var(--r-md) var(--r-md);
  position: relative; isolation: isolate; overflow: clip;
  color: var(--on-dark); background: var(--navy-950);
  padding-top: calc(var(--header-h) + clamp(.75rem, .2rem + 1.6vw, 1.75rem));
  padding-bottom: clamp(1.25rem, .8rem + 1.6vw, 2.25rem);
  view-timeline: --home-hero block;
}
.home-hero__glow {
  position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    radial-gradient(48% 46% at 50% 30%, rgba(194, 161, 95, .17), transparent 72%),
    linear-gradient(to bottom, transparent 55%, rgba(14, 41, 84, .55));
}
@media (min-width: 960px) {
  .home-hero__glow { background: radial-gradient(42% 60% at 28% 44%, rgba(194, 161, 95, .17), transparent 72%), linear-gradient(to bottom, transparent 55%, rgba(14, 41, 84, .55)); }
  [dir="ltr"] .home-hero__glow { background: radial-gradient(42% 60% at 72% 44%, rgba(194, 161, 95, .17), transparent 72%), linear-gradient(to bottom, transparent 55%, rgba(14, 41, 84, .55)); }
}

.home-hero__grid { display: grid; gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem); align-items: center; }
.home-hero__stage-col { order: -1; }              /* phones and tablets: the facade comes first */
@media (min-width: 960px) {
  .home-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
  /* the stage (the visible photo) is pinned to the top of the row: when the web fonts swap in on a first visit and the
     (still hidden) text column changes height, the photo doesn't move */
  .home-hero__stage-col { order: 0; align-self: start; }
}

/* headline */
.home-hero__text { display: grid; gap: clamp(1rem, .8rem + .8vw, 1.5rem); justify-items: start; max-width: 37rem; }
.home-hero__title { font-size: clamp(2.75rem, 1.6rem + 3.9vw, 5.5rem); line-height: 1.12; color: #fff; text-wrap: balance; }
:lang(en) .home-hero__title { line-height: 1; }
.home-hero__name { display: block; }
.home-hero__tagline { display: block; margin-top: .28em; font-size: .46em; line-height: 1.5; font-weight: 400; color: var(--gold-300); }
:lang(en) .home-hero__tagline { margin-top: .35em; font-size: .5em; line-height: 1.15; font-style: italic; font-weight: 500; }
.home-hero__sub { max-width: 34rem; font-size: var(--fs-lead); line-height: 1.85; color: var(--on-dark-soft); }
:lang(en) .home-hero__sub { line-height: 1.65; }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .25rem; }
.home-hero__motto { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; font-size: var(--fs-small); color: var(--gold-400); }
.home-hero__motto li { display: inline-flex; align-items: center; gap: 1rem; }
.home-hero__motto li + li::before { content: ""; width: 5px; height: 5px; flex: none; background: currentColor; rotate: 45deg; opacity: .7; }
:lang(en) .home-hero__motto { font-family: var(--font-latin); font-size: 1.05rem; font-style: italic; }

/* the stage: an arched window on the 3D model (public/js/facade3d.js mounts it; the photo is the poster) */
.home-hero__stage-wrap { position: relative; width: 100%; max-width: 680px; margin-inline: auto; }
.home-hero__stage {
  --f3d-poster-position: 47% 46%;
  --f3d-accent: var(--gold-500);
  position: relative; width: 100%; aspect-ratio: 4 / 5;
  border-radius: var(--stage-arch); background: var(--navy-800);
  box-shadow: 0 40px 80px -42px rgba(0, 0, 0, .75);
}
@media (min-width: 600px) and (max-width: 959px) { .home-hero__stage { aspect-ratio: 5 / 4; } }
/* desktop: the stage takes what the first screen leaves after the header, the bar and room for the floating buttons
   (WhatsApp / «تشغيل الحركة» sit in the bottom corners — the bar must end above them) */
@media (min-width: 960px) {
  .home-hero { --hero-reserve: 17.25rem; padding-bottom: 5.75rem; }
  .home-hero__stage { aspect-ratio: auto; height: clamp(380px, calc(100svh - var(--header-h) - var(--hero-reserve)), 720px); }
}
@media (min-width: 960px) and (max-height: 820px) {   /* short laptop screens, e.g. 1536×730 */
  .home-hero { --hero-reserve: 14.25rem; padding-top: calc(var(--header-h) + .75rem); padding-bottom: 5rem; }
  .home-hero__text { gap: .85rem; }
  .home-hero__title { font-size: clamp(2.5rem, 1.3rem + 2.8vw, 4.25rem); }
  .home-hero__sub { font-size: 1.0625rem; line-height: 1.75; }
  .home-hero .home-book { margin-top: 1.25rem; }
}
.home-hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--f3d-poster-position); }
/* gold hairline arch offset behind the stage */
.home-hero__outline {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border: 1px solid rgba(194, 161, 95, .55); border-radius: var(--stage-arch);
  translate: calc(var(--dir) * var(--outline-x, -16px)) var(--outline-y, 16px);
}
@media (max-width: 599px) { .home-hero__outline { --outline-x: -9px; --outline-y: 10px; } }
/* the facade photo is the page's largest image (LCP): it is painted at once and never faded — only the stage's
   scale settles (transform), straight away and without waiting for the web fonts (data-reveal-eager) */
html.js .home-hero__stage-wrap[data-reveal]:not(.is-in) { opacity: 1; }
html.js[data-motion="full"] .home-hero__stage-wrap[data-reveal="scale"]:not(.is-in) { scale: .965; }
html.js[data-motion="full"] .home-hero__outline { transition: translate 1.4s var(--ease-expo) .55s, opacity .9s var(--ease-out) .55s; }
html.js[data-motion="full"] .home-hero__stage-wrap:not(.is-in) .home-hero__outline { translate: 0 0; opacity: 0; }
/* module UI inside the arch: keep the loading pill off the curved corners */
.home-hero .home-hero__stage .f3d-load { top: auto; bottom: 66px; left: 50%; right: auto; translate: -50% 0; }
.home-hero .home-hero__stage { --f3d-ui-pad: clamp(12px, 1.6vw, 18px); }


/* the hero eases away as it leaves (scroll-driven, compositor only) */
@supports (animation-timeline: view()) {
  html[data-motion="full"] .home-hero__text-col { animation: home-hero-exit linear both; animation-timeline: --home-hero; animation-range: exit 0% exit 100%; }
  html[data-motion="full"] .home-hero__stage-col { animation: home-stage-exit linear both; animation-timeline: --home-hero; animation-range: exit 0% exit 100%; }
}
@keyframes home-hero-exit { to { translate: 0 -14%; opacity: .15; } }
@keyframes home-stage-exit { to { translate: 0 9%; } }

/* ---------------------------------------------------------------- quick booking bar */
.home-book { position: relative; z-index: 2; margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); }
.home-book__form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem .75rem; align-items: end;
  padding: clamp(.9rem, .7rem + .6vw, 1.15rem);
  border: 1px solid rgba(194, 161, 95, .4); border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink);
  box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .7);
}
.home-book .field { gap: .3rem; }
.home-book .field__label { font-size: .8125rem; font-weight: 600; color: var(--muted); }
.home-book .field__error:empty { display: none; }
.home-book .date-input:not(.has-value) .date-input__display { font-size: .875rem; }
.home-book__field--room { grid-column: 1 / -1; }
.home-book__submit { min-height: 54px; padding-inline: 1.5rem; }
@media (max-width: 559px) { .home-book__field--date { grid-column: 1 / -1; } }
@media (min-width: 960px) {
  .home-book__form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, .85fr) auto; }
  .home-book__field--room { grid-column: auto; }
  .home-book__submit { padding-inline: 2rem; }
}

/* ================================================================ 2 · intro + stats */
.home-intro__grid { display: grid; gap: clamp(3rem, 1.5rem + 5vw, 6.5rem); align-items: center; }
@media (min-width: 900px) { .home-intro__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.home-intro__media { position: relative; width: min(100%, 470px); margin-inline: auto; padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.home-intro__inset { position: absolute; z-index: 2; bottom: 0; inset-inline-end: clamp(-1.5rem, -2vw, -.25rem); width: 36%; border: 6px solid var(--ivory); box-shadow: var(--shadow-2); }
@media (max-width: 520px) { .home-intro__inset { inset-inline-end: -.25rem; } }
.home-intro__text { display: grid; gap: var(--space-m); }
.home-intro__text .section-head { margin-bottom: 0; }

.home-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; margin-top: clamp(3.5rem, 2rem + 5vw, 6rem); padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .home-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.home-stat { position: relative; display: grid; gap: .35rem; justify-items: center; text-align: center; }
@media (min-width: 900px) { .home-stat + .home-stat::before { content: ""; position: absolute; inset-block: 12%; inset-inline-start: -.5rem; width: 1px; background: var(--line); } }
.home-stat__value { display: inline-flex; align-items: baseline; justify-content: center; gap: .4rem; font-family: var(--font-latin); font-size: clamp(2.9rem, 2rem + 3vw, 4.5rem); font-weight: 600; line-height: 1.15; color: var(--gold-700); font-variant-numeric: lining-nums tabular-nums; }
.home-stat__num { display: inline-block; direction: ltr; unicode-bidi: isolate; }
.home-stat__unit { font-family: var(--font-sans); font-size: 1rem; font-weight: 500; color: var(--gold-700); }
.home-stat__label { max-width: 16rem; font-size: var(--fs-small); line-height: 1.6; color: var(--muted); }

/* ================================================================ 3 · highlights */
.home-highlights { --pattern-opacity: .06; }
.home-highlights__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); }
.home-highlights .section-head { margin-bottom: 0; }
@media (min-width: 1024px) {
  .home-highlights__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .home-highlights .section-head { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}
.home-highlights__list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(1.5rem, 1rem + 2vw, 3rem); border-top: 1px solid var(--line-on-dark); }
@media (min-width: 640px) { .home-highlights__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .home-highlights__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-hl { display: grid; gap: .65rem; align-content: start; justify-items: start; padding: 1.75rem 0 2rem; border-bottom: 1px solid var(--line-on-dark); }
.home-hl__title { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: 600; line-height: 1.5; color: #fff; }
.home-hl__text { font-size: var(--fs-small); line-height: 1.8; color: var(--on-dark-soft); }
.home-hl .icon-badge { transition: scale .5s var(--ease-spring); }
html.js[data-motion="full"] .home-hl:not(.is-in) .icon-badge { scale: .6; }

/* ================================================================ 4 · rooms carousel */
.home-rooms .room-card__title { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.7rem); }
/* Desktop: all six room types as a calm 3 × 2 grid — every card whole, nothing slides out of view. */
@media (min-width: 1100px) {
  .home-rooms .carousel__track { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; scroll-snap-type: none; }
  .home-rooms .carousel__controls { display: none; }
}

/* ================================================================ 5 · «جناح العرسان» band */
.home-honey {
  position: relative; isolation: isolate; overflow: clip; padding-block: var(--section-y);
  background:
    radial-gradient(60% 55% at 22% 38%, rgba(160, 44, 66, .22), transparent 70%),
    radial-gradient(50% 50% at 85% 85%, rgba(194, 161, 95, .1), transparent 70%),
    linear-gradient(165deg, #1b1020 0%, var(--navy-950) 62%);
}
[dir="rtl"] .home-honey { background: radial-gradient(60% 55% at 78% 38%, rgba(160, 44, 66, .22), transparent 70%), radial-gradient(50% 50% at 15% 85%, rgba(194, 161, 95, .1), transparent 70%), linear-gradient(195deg, #1b1020 0%, var(--navy-950) 62%); }
.home-honey__grid { display: grid; gap: clamp(3rem, 1.5rem + 5vw, 6.5rem); align-items: center; }
@media (min-width: 960px) {
  .home-honey__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .home-honey__media { order: 2; }
}
.home-honey__media { position: relative; width: min(100%, 430px); margin-inline: auto; padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.home-honey__media .frame-outline::before { border-color: rgba(211, 183, 124, .6); }
.home-honey__inset { position: absolute; z-index: 2; bottom: 0; inset-inline-start: -4%; width: 58%; border: 5px solid #1b1020; border-radius: var(--r-md); box-shadow: var(--shadow-3); }
@media (min-width: 960px) { .home-honey__inset { inset-inline-start: -22%; } }
.home-honey__text { display: grid; gap: var(--space-m); justify-items: start; max-width: 36rem; }
.home-honey__text .section-head { margin-bottom: 0; }
.home-honey__includes { display: flex; flex-wrap: wrap; gap: .5rem; }
.home-honey__includes .chip .icon { color: #e7a3ac; }
.home-honey__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .25rem; }
.home-honey__wa { width: 60px; height: 60px; color: var(--on-dark); }
.home-honey__wa .icon { width: 24px; height: 24px; color: #6fd49b; }
/* drifting rose petals — decorative, full motion only, and only while the band is on screen (page-home.js) */
.home-honey__petals { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.home-honey__petals i {
  position: absolute; top: -30px; width: var(--s, 14px); height: calc(var(--s, 14px) * .78);
  border-radius: 0 80% 0 80%; background: linear-gradient(135deg, #c84a58, #7e1b2d);
  opacity: 0; will-change: transform, opacity;
}
html[data-motion="full"] .home-honey.is-live .home-honey__petals i { animation: home-petal var(--d, 16s) linear var(--delay, 0s) infinite; }
html[data-motion="calm"] .home-honey__petals { display: none; }
.home-honey__petals i:nth-child(1) { left: 6%;  --s: 13px; --d: 17s; --delay: -3s;  --dx: 60px;  --r: 290deg; }
.home-honey__petals i:nth-child(2) { left: 18%; --s: 9px;  --d: 21s; --delay: -11s; --dx: -40px; --r: -250deg; }
.home-honey__petals i:nth-child(3) { left: 31%; --s: 15px; --d: 19s; --delay: -6s;  --dx: 80px;  --r: 320deg; }
.home-honey__petals i:nth-child(4) { left: 44%; --s: 10px; --d: 23s; --delay: -15s; --dx: -70px; --r: 260deg; }
.home-honey__petals i:nth-child(5) { left: 57%; --s: 12px; --d: 18s; --delay: -9s;  --dx: 50px;  --r: -300deg; }
.home-honey__petals i:nth-child(6) { left: 70%; --s: 16px; --d: 22s; --delay: -1s;  --dx: -60px; --r: 340deg; }
.home-honey__petals i:nth-child(7) { left: 82%; --s: 9px;  --d: 20s; --delay: -13s; --dx: 40px;  --r: -280deg; }
.home-honey__petals i:nth-child(8) { left: 93%; --s: 12px; --d: 24s; --delay: -18s; --dx: -50px; --r: 300deg; }
@keyframes home-petal {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  12%  { opacity: .5; }
  80%  { opacity: .4; }
  100% { opacity: 0; transform: translate3d(var(--dx, 50px), 105vh, 0) rotate(var(--r, 300deg)); }
}

/* ================================================================ 6 · café band */
.home-cafe {
  position: relative; isolation: isolate; overflow: clip; padding-block: var(--section-y);
  view-timeline: --home-cafe block;
  background: radial-gradient(55% 60% at 70% 35%, rgba(194, 161, 95, .13), transparent 70%), var(--walnut-900);
}
[dir="rtl"] .home-cafe { background: radial-gradient(55% 60% at 30% 35%, rgba(194, 161, 95, .13), transparent 70%), var(--walnut-900); }
.home-cafe__marquee { position: absolute; z-index: -1; inset-inline: 0; top: clamp(1.25rem, 3vw, 3rem); overflow: hidden; pointer-events: none; direction: ltr; }
.home-cafe__marquee p {
  display: flex; align-items: center; gap: .32em; width: max-content; margin: 0;
  font-family: var(--font-latin); font-size: clamp(5rem, 2rem + 12vw, 14rem); font-weight: 600; line-height: 1.05; letter-spacing: .04em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(211, 183, 124, .2);
}
.home-cafe__marquee i { width: .1em; height: .1em; flex: none; background: rgba(211, 183, 124, .25); rotate: 45deg; }
@supports (animation-timeline: view()) {
  html[data-motion="full"] .home-cafe__marquee p { will-change: transform; animation: home-marquee linear both; animation-timeline: --home-cafe; animation-range: cover 0% cover 100%; }
}
@keyframes home-marquee { from { translate: 0 0; } to { translate: -32% 0; } }
.home-cafe__grid { display: grid; gap: clamp(3rem, 1.5rem + 5vw, 6.5rem); align-items: center; }
@media (min-width: 960px) {
  .home-cafe__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .home-cafe__media { order: -1; }
}
.home-cafe__text { display: grid; gap: var(--space-m); justify-items: start; max-width: 34rem; }
.home-cafe__title { font-size: var(--fs-h1); color: #fff; }
.home-cafe__latin { margin-top: -.75rem; font-family: var(--font-latin); font-size: clamp(1rem, .9rem + .4vw, 1.25rem); font-weight: 600; letter-spacing: .34em; color: var(--gold-300); }
.home-cafe__actions { margin-top: .25rem; }
.home-cafe__media { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; width: min(100%, 600px); margin-inline: auto; padding-block: 2.5rem; }
.home-cafe__main { grid-column: 1 / 9; grid-row: 1; }
.home-cafe__counter { grid-column: 7 / 13; grid-row: 1; align-self: end; z-index: 2; margin-bottom: -2.75rem; border: 5px solid var(--walnut-900); box-shadow: var(--shadow-3); }
.home-cafe__cup { grid-column: 9 / 13; grid-row: 1; align-self: start; z-index: 2; margin-top: 1.5rem; margin-inline-start: 12%; border: 5px solid var(--walnut-900); box-shadow: var(--shadow-3); }

/* ================================================================ 7 · services + practical facts */
.home-services__grid { display: grid; gap: clamp(1.1rem, .8rem + 1.2vw, 1.75rem); }
@media (min-width: 1024px) { .home-services__grid { grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); } }
.home-services__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: inherit; }
@media (min-width: 640px) { .home-services__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-service .card__title a { color: inherit; text-decoration: none; }
.home-facts {
  --pattern-opacity: .07;
  position: relative; isolation: isolate; overflow: clip; display: grid; align-content: start; gap: 1.25rem;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); border-radius: var(--r-lg);
  background: radial-gradient(80% 60% at 100% 0%, rgba(194, 161, 95, .16), transparent 70%), var(--navy-900); color: var(--on-dark);
}
.home-facts__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.35; color: #fff; }
:lang(en) .home-facts__title { font-weight: 600; }
.home-facts__list { display: grid; gap: 1rem; margin: 0; }
.home-facts__list > div { display: grid; gap: .15rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-on-dark); }
.home-facts__list dt { display: flex; align-items: center; gap: .55rem; font-size: var(--fs-xs); color: var(--on-dark-muted); }
.home-facts__list dt .icon { color: var(--gold-400); }
.home-facts__list dd { margin: 0; padding-inline-start: calc(1.25em + .55rem); font-weight: 600; line-height: 1.6; color: var(--on-dark); }
.home-facts__link { color: var(--gold-400); }

/* ================================================================ 8 · welcome words (CEO + GM) */
.home-welcome__grid { display: grid; gap: clamp(3.5rem, 2rem + 4vw, 5rem) clamp(2rem, 1rem + 4vw, 5.5rem); max-width: 1080px; margin-inline: auto; }
@media (min-width: 760px) { .home-welcome__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.home-letter { position: relative; display: grid; gap: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); justify-items: center; text-align: center; }
.home-letter__portrait { width: min(100%, 440px); padding-inline: 16px; }
.home-letter__portrait .frame { background: var(--stone-100); }
.home-letter__body { display: grid; gap: 1rem; justify-items: center; max-width: 30rem; }
.home-letter__quote { justify-items: center; }
.home-letter__quote .quote__text { font-size: clamp(1.25rem, 1.05rem + .75vw, 1.65rem); }
.home-letter__by { display: grid; gap: .15rem; }
.home-letter__by strong { font-family: var(--font-display); font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); font-weight: 700; line-height: 1.4; color: var(--ink); }
:lang(en) .home-letter__by strong { font-weight: 600; }
.home-letter__by span { font-size: var(--fs-small); color: var(--muted); }
@media (hover: hover) { .home-letter:hover .frame img { transform: scale(1.03); } }
.home-letter:focus-within { outline: 2px solid var(--focus); outline-offset: 8px; border-radius: var(--r-lg); }
.home-letter:focus-within :focus-visible { outline: none; }

/* ================================================================ 9 · location */
.home-location__grid { display: grid; gap: clamp(3rem, 1.5rem + 5vw, 6.5rem); align-items: center; }
@media (min-width: 960px) { .home-location__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.home-location__text { display: grid; gap: var(--space-m); }
.home-location__text .section-head { margin-bottom: 0; }
.home-location__list { display: grid; border-top: 1px solid var(--line); }
.home-location__list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .4rem .9rem; padding-block: .9rem; border-bottom: 1px solid var(--line); }
.home-location__place { font-weight: 600; line-height: 1.55; }
.home-location__time { font-size: var(--fs-small); color: var(--accent-ink); white-space: nowrap; }
@media (max-width: 560px) {
  .home-location__list li { grid-template-columns: auto minmax(0, 1fr); }
  .home-location__time { grid-column: 2; margin-top: -.35rem; white-space: normal; }
}
.home-location__media { position: relative; width: min(100%, 500px); margin-inline: auto; padding-bottom: 2.5rem; }
.home-location__card {
  position: absolute; z-index: 3; bottom: 0; inset-inline-start: clamp(.75rem, -3vw + 2rem, 1.25rem); max-width: min(82%, 21rem);
  display: grid; gap: .1rem; padding: 1.1rem 1.3rem; border-radius: var(--r-md);
  background: var(--navy-900); color: var(--on-dark-soft); font-style: normal; font-size: var(--fs-small); line-height: 1.7; box-shadow: var(--shadow-3);
}
@media (min-width: 960px) { .home-location__card { inset-inline-start: -2.5rem; } }
.home-location__card-label { display: flex; align-items: center; gap: .5rem; margin-bottom: .2rem; font-weight: 600; color: var(--gold-400); }
.home-location__card .line:first-of-type { color: var(--on-dark); }
.home-location__national { margin-top: .3rem; font-size: var(--fs-xs); color: var(--on-dark-muted); }

/* ================================================================ 10 · group hotels */
.home-group { --pattern-opacity: .05; }
.home-group__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
@media (min-width: 1024px) { .home-group__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.home-group__text { display: grid; gap: var(--space-s); }
.home-group__text .section-head { margin-bottom: 0; }
.home-group__text .section-head__title { font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.75rem); }
.home-group__lead { color: var(--on-dark-soft); max-width: 34rem; }
.home-group__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.6rem, .4rem + .8vw, 1rem); }
.home-branch { display: grid; gap: .4rem; align-content: start; justify-items: start; padding: clamp(1rem, .8rem + .8vw, 1.4rem); border: 1px solid var(--line-on-dark); border-radius: var(--r-lg); background: rgba(247, 240, 227, .03); }
.home-branch.is-current { border-color: rgba(194, 161, 95, .6); background: rgba(194, 161, 95, .09); }
.home-branch__mark img { width: auto; height: 34px; }
.home-branch__name { font-family: var(--font-display); font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); font-weight: 700; line-height: 1.4; color: #fff; }
:lang(en) .home-branch__name { font-weight: 600; }
.home-branch__where { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-small); color: var(--on-dark-soft); }
.home-branch__where .icon { color: var(--gold-400); }
.home-branch .badge { margin-top: .3rem; }
.home-branch__soon { background: transparent; border: 1px solid var(--line-on-dark); color: var(--on-dark-muted); }

/* ================================================================ 11 · gallery mosaic */
.home-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 38vw, 240px); gap: clamp(.6rem, .4rem + .8vw, 1.1rem); }
.home-mosaic__item--1 { grid-column: 1 / -1; grid-row: span 2; }
@media (min-width: 900px) {
  .home-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 15vw, 240px); }
  .home-mosaic__item--1 { grid-column: span 2; }
}
.home-mosaic .frame { border-radius: var(--r-md); }

/* ---------------------------------------------------------------- additions */
/* guests' reviews on Google Maps (a link, no number) under the stats */
.home-reviews { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); text-align: center; }
.home-reviews .link-arrow .icon:first-child { color: var(--gold-600); }
/* the Prophet's Mosque question as a WhatsApp conversation */
.home-location__ask { margin-top: -.25rem; }
.home-location__ask .link-arrow { color: var(--whatsapp-ink); }
/* group strip: the other hotels get a question instead of «details coming soon» */
.home-branch__ask { display: inline-flex; align-items: center; gap: .45rem; margin-top: .3rem; padding-block: .55rem; margin-block: .3rem -.55rem; color: var(--gold-300); font-size: var(--fs-small); font-weight: 600; text-decoration: none; }
.home-branch__ask .icon { width: 1.1em; height: 1.1em; color: #6fd49b; }
.home-branch__ask:hover { color: #fff; }
/* ================================================================ 7b · guest transfer band (Turki, 11 Oct)
   The hotel bus photo + a route airport → hotel → Prophet's Mosque. In full motion a small gold bus drives it once
   when it comes into view (pauses at the hotel); the gold line follows it; then a soft glint runs along the line and
   the badge ring turns slowly — both only while the band is on screen (.is-live, page-home.js).
   transform/opacity only; RTL and LTR get mirrored keyframes (no var() inside keyframes, so they stay composited).
   Calm mode: the final state, nothing moves. */
.home-transfer {
  position: relative; isolation: isolate; overflow: clip; padding-block: var(--section-y);
  background:
    radial-gradient(55% 60% at 18% 40%, rgba(194, 161, 95, .13), transparent 70%),
    radial-gradient(45% 45% at 88% 90%, rgba(46, 84, 148, .28), transparent 70%),
    linear-gradient(170deg, var(--navy-900) 0%, var(--navy-950) 70%);
}
[dir="rtl"] .home-transfer { background: radial-gradient(55% 60% at 82% 40%, rgba(194, 161, 95, .13), transparent 70%), radial-gradient(45% 45% at 12% 90%, rgba(46, 84, 148, .28), transparent 70%), linear-gradient(190deg, var(--navy-900) 0%, var(--navy-950) 70%); }
.home-transfer__grid { display: grid; gap: clamp(3rem, 1.5rem + 5vw, 6.5rem); align-items: center; }
@media (min-width: 960px) { .home-transfer__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.home-transfer__media { position: relative; width: min(100%, 420px); margin-inline: auto; padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.home-transfer__media .frame-outline::before { border-color: rgba(211, 183, 124, .6); }

/* round badge: «GUEST TRANSFER · ABYAT AL SHARQ» on a ring around a gold bus */
.home-transfer__badge {
  position: absolute; z-index: 3; bottom: 0; inset-inline-end: -.5rem; width: clamp(104px, 90px + 4vw, 136px); aspect-ratio: 1;
  border-radius: 50%; border: 1px solid rgba(194, 161, 95, .45);
  background: radial-gradient(circle, var(--navy-900) 0 60%, var(--navy-950) 61%);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .7);
}
@media (min-width: 960px) { .home-transfer__badge { inset-inline-end: -2.75rem; } }
.home-transfer__ring { display: block; width: 100%; height: 100%; overflow: visible; direction: ltr; } /* a textPath laid out RTL collapses to nothing */
.home-transfer__ring text { font-family: var(--font-latin); font-size: 9.6px; font-weight: 600; fill: var(--gold-300); }
.home-transfer__badge-core { position: absolute; inset: 27%; display: grid; place-items: center; border-radius: 50%; background: var(--gold-gradient); color: var(--navy-950); }
.home-transfer__badge-core .icon { width: 44%; height: 44%; stroke-width: 1.6; }
[dir="rtl"] .home-transfer__badge-core .icon { scale: -1 1; }

.home-transfer__text { display: grid; gap: var(--space-m); justify-items: start; max-width: 38rem; }
.home-transfer__text .section-head { margin-bottom: 0; }
.home-transfer__latin { margin-top: -.6rem; font-family: var(--font-latin); font-size: var(--fs-small); font-weight: 600; letter-spacing: var(--tracking-caps); color: var(--gold-400); }
html[lang="en"] .home-transfer__latin { display: none; } /* the English eyebrow already says it */
.home-transfer__text .lead { color: var(--on-dark-soft); }

/* the route */
.home-transfer__route {
  width: 100%; overflow: clip; padding: clamp(1.1rem, .9rem + 1vw, 1.6rem) clamp(.5rem, .2rem + 1vw, 1.25rem) clamp(.9rem, .7rem + .8vw, 1.3rem);
  border: 1px solid var(--line-on-dark); border-radius: var(--r-lg); background: rgba(247, 240, 227, .035);
}
.home-transfer__stops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; }
.home-transfer__stop { display: grid; justify-items: center; align-content: start; gap: .5rem; }
.home-transfer__icon {
  display: grid; place-items: center; width: clamp(44px, 40px + 1vw, 52px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(194, 161, 95, .5); background: rgba(194, 161, 95, .08); color: var(--gold-400);
}
.home-transfer__icon .icon { width: 46%; height: 46%; }
.home-transfer__stop--2 .home-transfer__icon { background: var(--gold-gradient); border-color: transparent; color: var(--navy-950); }
.home-transfer__name { font-size: var(--fs-small); font-weight: 600; line-height: 1.45; color: #fff; }
.home-transfer__road { position: relative; height: 34px; margin: .85rem calc(100% / 6) .35rem; }
.home-transfer__base, .home-transfer__line { position: absolute; inset-inline: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; }
.home-transfer__base { background: rgba(247, 240, 227, .16); }
.home-transfer__line { background: linear-gradient(to var(--end-side), var(--gold-500), var(--gold-300)); transform-origin: var(--origin-start); }
.home-transfer__node {
  position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: var(--navy-950); border: 2px solid var(--gold-400); translate: calc(var(--dir) * -50%) 0;
}
.home-transfer__node--1 { inset-inline-start: 0; }
.home-transfer__node--2 { inset-inline-start: 50%; }
.home-transfer__node--3 { inset-inline-start: 100%; }
/* a full-width carrier moved by 100% of its own width carries the bus from the first stop to the last */
.home-transfer__car, .home-transfer__glint { position: absolute; inset: 0; pointer-events: none; }
.home-transfer__car { z-index: 2; translate: calc(var(--dir) * 100%) 0; }
.home-transfer__bus {
  position: absolute; top: 50%; inset-inline-start: 0; width: 34px; height: 34px; margin-top: -17px; translate: calc(var(--dir) * -50%) 0;
  display: grid; place-items: center; border-radius: 50%; background: var(--gold-gradient); color: var(--navy-950);
  box-shadow: 0 0 0 4px rgba(194, 161, 95, .16), 0 6px 14px -6px rgba(0, 0, 0, .6);
}
.home-transfer__bus .icon { width: 18px; height: 18px; stroke-width: 1.7; }
[dir="rtl"] .home-transfer__bus .icon { scale: -1 1; } /* the bus faces the way it drives */
.home-transfer__glint { opacity: 0; }
.home-transfer__glint i { position: absolute; top: 50%; inset-inline-start: 0; width: 64px; height: 2px; margin-top: -1px; translate: calc(var(--dir) * -50%) 0; background: linear-gradient(90deg, transparent, #fff6dc, transparent); }
.home-transfer__legs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: calc(100% / 6); text-align: center; }
.home-transfer__leg { font-size: var(--fs-xs); font-weight: 600; color: var(--gold-300); white-space: nowrap; }

.home-transfer__train { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1rem; border: 1px solid var(--line-on-dark); border-radius: var(--r-pill); font-size: var(--fs-small); color: var(--on-dark-soft); }
.home-transfer__train .icon { width: 1.15em; height: 1.15em; color: var(--gold-400); flex: none; }
.home-transfer__note { font-size: var(--fs-small); line-height: 1.8; color: var(--on-dark-muted); }
.home-transfer__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---- full motion: the drive (once) ---- */
html.js[data-motion="full"] .home-transfer__route:not(.is-in) .home-transfer__line { scale: 0 1; }
html.js[data-motion="full"] .home-transfer__route:not(.is-in) .home-transfer__car { translate: 0 0; }
html.js[data-motion="full"] .home-transfer__route:not(.is-in) .home-transfer__node { scale: 0; }
html.js[data-motion="full"] .home-transfer__route:not(.is-in) :is(.home-transfer__icon, .home-transfer__name) { opacity: .35; }
html.js[data-motion="full"] .home-transfer__route:not(.is-in) .home-transfer__leg { opacity: 0; }
html.js[data-motion="full"] .home-transfer__route.is-in .home-transfer__line { animation: home-transfer-line 3.6s linear .45s both; }
html.js[data-motion="full"] .home-transfer__route.is-in .home-transfer__car { animation: home-transfer-drive-ltr 3.6s linear .45s both; }
html.js[data-motion="full"][dir="rtl"] .home-transfer__route.is-in .home-transfer__car { animation-name: home-transfer-drive-rtl; }
html.js[data-motion="full"] .home-transfer__route.is-in .home-transfer__node { animation: home-transfer-pop .55s var(--ease-out) both; }
html.js[data-motion="full"] .home-transfer__route.is-in :is(.home-transfer__icon, .home-transfer__name) { animation: home-transfer-lit .7s var(--ease-out) both; }
html.js[data-motion="full"] .home-transfer__route.is-in .home-transfer__leg { animation: home-transfer-leg .7s var(--ease-out) both; }
.home-transfer__node--1, .home-transfer__stop--1 :is(.home-transfer__icon, .home-transfer__name) { animation-delay: .35s !important; }
.home-transfer__node--2, .home-transfer__stop--2 :is(.home-transfer__icon, .home-transfer__name) { animation-delay: 1.9s !important; }
.home-transfer__node--3, .home-transfer__stop--3 :is(.home-transfer__icon, .home-transfer__name) { animation-delay: 3.95s !important; }
.home-transfer__leg--1 { animation-delay: 1.1s !important; }
.home-transfer__leg--2 { animation-delay: 3.1s !important; }
/* ---- full motion, while on screen: a glint along the line, the badge ring turning ---- */
html.js[data-motion="full"] .home-transfer__route.is-in .home-transfer__glint { animation: home-transfer-glint-ltr 5.5s linear 4.6s infinite paused; }
html.js[data-motion="full"][dir="rtl"] .home-transfer__route.is-in .home-transfer__glint { animation-name: home-transfer-glint-rtl; }
html.js[data-motion="full"] .home-transfer__ring { animation: home-transfer-spin 48s linear infinite paused; }
html.js[data-motion="full"] .home-transfer.is-live :is(.home-transfer__route.is-in .home-transfer__glint, .home-transfer__ring) { animation-play-state: running; }

/* the bus eases out of each stop and into the next; it waits at the hotel (42% → 56%) */
@keyframes home-transfer-line {
  0% { scale: 0 1; animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
  42% { scale: .5 1; animation-timing-function: linear; }
  56% { scale: .5 1; animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
  100% { scale: 1 1; }
}
@keyframes home-transfer-drive-ltr {
  0% { translate: 0 0; animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
  42% { translate: 50% 0; animation-timing-function: linear; }
  56% { translate: 50% 0; animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
  100% { translate: 100% 0; }
}
@keyframes home-transfer-drive-rtl {
  0% { translate: 0 0; animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
  42% { translate: -50% 0; animation-timing-function: linear; }
  56% { translate: -50% 0; animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
  100% { translate: -100% 0; }
}
@keyframes home-transfer-pop { 0% { scale: 0; } 65% { scale: 1.45; } 100% { scale: 1; } }
@keyframes home-transfer-lit { from { opacity: .35; } to { opacity: 1; } }
@keyframes home-transfer-leg { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes home-transfer-glint-ltr { 0% { translate: 0 0; opacity: 0; } 6% { opacity: 1; } 46% { opacity: 1; } 52%, 100% { translate: 100% 0; opacity: 0; } }
@keyframes home-transfer-glint-rtl { 0% { translate: 0 0; opacity: 0; } 6% { opacity: 1; } 46% { opacity: 1; } 52%, 100% { translate: -100% 0; opacity: 0; } }
@keyframes home-transfer-spin { to { rotate: 360deg; } }

/* quick bar at 1024–1360px: the empty-state hints («Check-out from 12:00 pm») keep clear of the calendar icon */
@media (min-width: 960px) and (max-width: 1360px) {
  .home-book .date-input:not(.has-value) .date-input__display { font-size: .8125rem; padding-inline-end: 3.1rem; }
}