.hero {
    position: relative;
    flex: 1;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    isolation: isolate;
  }

  /* fading glass band along the bottom edge of the hero */
  .hero__glass {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(120px, 22vh, 220px);
    z-index: 1;
    pointer-events: none;
    backdrop-filter: blur(16px) saturate(1.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    background: linear-gradient(to top, rgba(38,37,34,0.34) 0%, rgba(38,37,34,0.10) 55%, rgba(38,37,34,0) 100%);
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 100%);
    mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 100%);
  }

  /* sliding track — a column, so the banner advances upward: the next slide
     rises in from below and the outgoing one leaves through the top. The
     flex-basis resolves against the track's own height, which is why the
     height:100% here isn't redundant with the slide's. */
  .hero__track {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform .85s cubic-bezier(.66,0,.2,1);
    will-change: transform;
  }
  .hero__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
  }

  /* legibility scrim — warm terracotta wash + bottom charcoal lift */
  .hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(78deg, rgba(38,37,34,0.86) 0%, rgba(58,58,58,0.42) 38%, rgba(58,58,58,0) 64%),
      linear-gradient(0deg, rgba(38,37,34,0.78) 0%, rgba(38,37,34,0.18) 30%, rgba(38,37,34,0) 55%),
      radial-gradient(120% 80% at 85% 8%, rgba(210,98,46,0.30) 0%, rgba(210,98,46,0) 55%);
  }

  /* top bar — DS "Website menu": frosted segmented nav */
  .hero__top {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 3;
    padding: clamp(18px, 2.6vw, 30px) var(--grid-margin);
    transform: translateY(var(--menu-y, 0px));
  }
  .hero__topbar {
    max-width: var(--grid-max-width);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.4vw, 36px);
  }
  .hero__logo {
    flex: 0 0 auto;
    height: clamp(40px, 4.4vw, 58px);
    width: auto;
    filter: drop-shadow(0 2px 8px rgba(20,12,4,.34));
  }
  .navbar {
    opacity: var(--menu-opacity, 1);
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 50px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    background: rgba(247,245,239,.16);
    backdrop-filter: blur(26px) saturate(1.25);
    -webkit-backdrop-filter: blur(26px) saturate(1.25);
    border: 0px;
    box-shadow: 0 12px 32px rgba(58,30,14,.16), inset 0 1px 0 rgba(255,255,255,.28);
  }
  /* Arabic RTL — menu sits on the left */
  [dir="rtl"] .hero__topbar .navbar { margin-left: 0; margin-right: auto; }

  .navbar .links { flex: 0 0 auto; display: flex; align-items: stretch; }
  .navbar .link {
    flex: 0 0 auto;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    height: 34px; padding: 0 16px;
    border-radius: var(--radius-pill); cursor: pointer;
    font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: .01em;
    color: #FBF1E6; white-space: nowrap; text-decoration: none;
    text-shadow: 0 1px 3px rgba(58,30,14,.34);
    transition: background .18s ease, color .18s ease;
  }
  .navbar .link + .link::before {
    content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px;
    background: rgba(247,245,239,.28);
  }
  .navbar .link:hover { background: rgba(247,245,239,.16); }
  .navbar .link.active {
    background: rgba(247,245,239,.18); color: var(--color-cream); text-shadow: 0 1px 3px rgba(58,30,14,.34); font-weight: 700;
    box-shadow: none;
  }
  .navbar .link.active + .link::before, .navbar .link.active::before { opacity: 0; }
  .navbar .trail {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--radius-pill); border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
    background: var(--color-surface-alt); color: var(--color-primary); font-size: 17px;
    box-shadow: 0 4px 12px rgba(58,30,14,.14); transition: transform .12s ease;
  }
  .navbar .trail:hover { transform: scale(1.05); }
  .navbar .trail:active { transform: scale(.96); }

  /* language switcher */
  .lang-btn {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(247,245,239,.15); border: 1.5px solid rgba(247,245,239,.32);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    color: rgba(247,245,239,.92); cursor: pointer;
    transition: background .15s, border-color .15s, transform .08s;
  }
  .lang-btn:hover { background: rgba(247,245,239,.26); border-color: rgba(247,245,239,.58); }
  .lang-btn:active { transform: scale(.95); }
  .lang-btn .lbl-en { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
  .lang-btn .lbl-ar { font-family: 'Rubik', system-ui, sans-serif; font-size: 13px; font-weight: 600; direction: rtl; }

  @media (max-width: 760px) {
    .hero__nav a:not(.nav-cta) { display: none; }
  }

  /* content block */
  .hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--grid-max-width);
    margin: 0 auto;
    padding: var(--space-16) var(--grid-margin) var(--space-24);
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--grid-gutter);
  }
  /* content rides the grid: full 4 cols on mobile, 6/8 on tablet, 9/12 on desktop */
  .hero__content { grid-column: span 4; min-width: 0; }
  @media (min-width: 768px) { .hero__content { grid-column: span 6; } }
  @media (min-width: 1024px) { .hero__content { grid-column: span 9; } }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-cream);
    padding: 9px 16px 9px 13px;
    border: 1px solid rgba(247,233,216,0.34);
    border-radius: 999px;
    background: rgba(38,37,34,0.30);
    backdrop-filter: blur(3px);
  }
  .eyebrow i { color: var(--color-primary-300); font-size: 14px; }

  /* "Governorate | Address" for a featured property, above the title */
  .hero__location {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(11px, 0.95vw, 13px);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(247,245,239,0.94);
    text-shadow: 0 1px 10px rgba(20,12,4,0.5), 0 1px 3px rgba(20,12,4,0.4);
  }
  /* White pin, the same treatment the property cards give their location line
     when they sit over a photo (.grid[data-layout="full"] .c-loc i) — the
     terracotta accent reads as a smudge against a bright sky. */
  .hero__location i { color: #fff; font-size: 14px; }
  /* Arabic place names aren't uppercased and don't take Latin letter-spacing */
  [dir="rtl"] .hero__location { letter-spacing: 0; text-transform: none; font-size: clamp(12px, 1.05vw, 14px); }

  .hero__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(34px, 6.4vw, var(--title-max, 88px));
    line-height: 1.0;
    letter-spacing: -0.025em;
    margin: var(--space-6) 0 0;
  }
  .hero__title em {
    font-style: normal;
    color: var(--color-text-primary);
  }
  :root[data-title-color="white"] .hero__title em { color: #FFFFFF; }
  :root[data-title-color="charcoal"] .hero__title em { color: var(--color-text-primary); }
  :root[data-title-color="terracotta"] .hero__title em { color: var(--color-primary); }

  .hero__tagline {
    font-size: clamp(17px, 1.7vw, 22px);
    line-height: 1.5;
    font-weight: 400;
    color: rgba(247,245,239,0.92);
    margin: var(--space-6) 0 0;
    max-width: 56ch;
    text-wrap: pretty;
    text-shadow: 0 1px 10px rgba(20,12,4,0.5), 0 1px 3px rgba(20,12,4,0.4);
  }

  .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-8);
  }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    padding: 18px 28px;
    border-radius: 14px;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .btn i { font-size: 16px; }
  .btn--primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    box-shadow: 0 10px 30px -8px rgba(210,98,46,0.6);
  }
  .btn--primary:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 16px 38px -10px rgba(210,98,46,0.72);
  }
  .btn--ghost {
    background: rgba(247,245,239,0.08);
    color: var(--color-cream);
    border-color: rgba(247,233,216,0.55);
    backdrop-filter: blur(4px);
  }
  .btn--ghost:hover {
    background: rgba(247,245,239,0.16);
    border-color: var(--color-cream);
    transform: translateY(-2px);
  }

  /* trust strip */
  .hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    opacity: 1;
    gap: var(--space-6);
    margin-top: var(--space-10);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(247,233,216,0.20);
  }
  :root[data-meta-align="left"]   .hero__meta { justify-content: flex-start; }
  :root[data-meta-align="center"] .hero__meta { justify-content: center; }
  :root[data-meta-align="right"]  .hero__meta { justify-content: flex-end; }
  :root[data-meta-show="false"]   .hero__meta { display: none; }
  .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: rgba(247,245,239,0.9);
    font-size: 14px;
    font-weight: 500;
  }
  .meta-item i { color: var(--color-secondary-300); font-size: 19px; }
  .meta-item strong { color: var(--color-cream); font-weight: 700; }
  .meta-stars { color: var(--color-secondary-300); letter-spacing: 2px; font-size: 14px; }

  @media (max-width: 560px) {
    .btn { flex: 1; justify-content: center; }
  }

  /* ---- per-slide intro animation ----
     The rest state hangs off `.is-active`, not off the base rule, so every
     slide plays its intro each time it comes round rather than only the first
     one on page load: location and title drop in from above, the tagline rises
     from below, the buttons fade up. A slide that has moved on is returned to
     its starting offset, ready for its next turn.

     `.hero.is-loaded` gates the rest state because slide one is already active
     on the first paint, and a transition never runs on an element that mounts
     in its final state — Hero.jsx flips that class one frame in.

     `:not(.is-moving)` gates it too, so the intro waits for the track to land:
     text that animated in while the banner was still travelling played
     off-screen. Hero.jsx holds .is-moving for the length of the track's own
     transition, which is why the delays below are stagger only — the wait for
     the slide itself is not repeated here.

     Outside `prefers-reduced-motion: no-preference` none of this applies, so
     the content is simply there, in place, from the start. */
  @media (prefers-reduced-motion: no-preference) {
    .hero__slide .hero__location,
    .hero__slide .hero__title,
    .hero__slide .hero__tagline,
    .hero__slide .hero__cta {
      opacity: 0;
      transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
    }
    .hero__slide .hero__location,
    .hero__slide .hero__title   { transform: translateY(-30px); }
    .hero__slide .hero__tagline { transform: translateY(30px); }

    .hero.is-loaded:not(.is-moving) .hero__slide.is-active .hero__location,
    .hero.is-loaded:not(.is-moving) .hero__slide.is-active .hero__title,
    .hero.is-loaded:not(.is-moving) .hero__slide.is-active .hero__tagline,
    .hero.is-loaded:not(.is-moving) .hero__slide.is-active .hero__cta {
      opacity: 1;
      transform: none;
    }
    .hero.is-loaded:not(.is-moving) .hero__slide.is-active .hero__location { transition-delay: .10s; }
    .hero.is-loaded:not(.is-moving) .hero__slide.is-active .hero__title    { transition-delay: .22s; }
    .hero.is-loaded:not(.is-moving) .hero__slide.is-active .hero__tagline  { transition-delay: .36s; }
    .hero.is-loaded:not(.is-moving) .hero__slide.is-active .hero__cta      { transition-delay: .50s; }

    /* The outgoing slide's text goes with the banner rather than fading on the
       spot — it has already lost .is-active, so without this it would spend the
       whole journey easing out in plain sight. */
    .hero.is-moving .hero__slide .hero__location,
    .hero.is-moving .hero__slide .hero__title,
    .hero.is-moving .hero__slide .hero__tagline,
    .hero.is-moving .hero__slide .hero__cta { transition-duration: .25s; }
  }

  /* ---- carousel controls ---- */
  /* Stacked at the inline-end edge, matching the direction the track moves.
     `inset-inline-end` puts them on the correct side in Arabic without a
     separate [dir="rtl"] rule. */
  .hero__arrow {
    position: absolute;
    inset-inline-end: clamp(14px, 2vw, 30px);
    z-index: 4;
    width: 54px; height: 54px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(247,245,239,.40);
    background: rgba(38,37,34,.28);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    color: var(--color-cream);
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(20,12,4,.22);
    transition: background .18s ease, transform .12s ease, border-color .18s ease;
  }
  .hero__arrow:hover { background: rgba(38,37,34,.46); border-color: var(--color-cream); }
  .hero__arrow:active { transform: scale(.94); }
  /* Two 54px buttons with an 8px gap, centred as a pair on the banner. */
  .hero__arrow--prev { top: calc(50% - 62px); }
  .hero__arrow--next { top: calc(50% + 8px); }

  .hero__dots {
    position: absolute;
    left: 50%;
    bottom: clamp(18px, 2.4vw, 30px);
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    gap: 11px;
  }
  .hero__dot {
    width: 9px; height: 9px; padding: 0;
    border-radius: var(--radius-pill);
    border: none; cursor: pointer;
    background: rgba(247,245,239,.42);
    box-shadow: 0 1px 3px rgba(20,12,4,.35);
    transition: background .2s ease, width .2s ease;
  }
  .hero__dot.active { width: 28px; background: var(--color-primary); }

  /* ---- slide transition styles (switchable via Tweaks) ---- */
  /* default = vertical slide (track translateY, set inline by JS) */

  /* fade & zoom: stack every slide, crossfade the active one */
  .hero[data-anim="fade"] .hero__track,
  .hero[data-anim="zoom"] .hero__track {
    transform: none !important;
    position: relative;
  }
  .hero[data-anim="fade"] .hero__slide,
  .hero[data-anim="zoom"] .hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .9s ease;
  }
  .hero[data-anim="fade"] .hero__slide.is-active,
  .hero[data-anim="zoom"] .hero__slide.is-active {
    opacity: 1;
  }
  /* zoom adds a slow scale-in on top of the fade */
  .hero[data-anim="zoom"] .hero__slide {
    transform: scale(1.07);
    transition: opacity .9s ease, transform 1.3s cubic-bezier(.2,.7,.2,1);
  }
  .hero[data-anim="zoom"] .hero__slide.is-active {
    transform: scale(1);
  }
  @media (prefers-reduced-motion: reduce) {
    .hero[data-anim="zoom"] .hero__slide { transform: none; }
  }

  @media (max-width: 560px) {
    .hero__arrow { width: 44px; height: 44px; font-size: 17px; }
  }

  /* ── force-mobile preview (Tweak override, viewport-independent) ── */
  .hero[data-mobile="true"] .hero__top    { display: none; }
  .hero[data-mobile="true"] .hero__botbar { display: flex; }
  .hero[data-mobile="true"] .hero__dots   { display: none; }
  .hero[data-mobile="true"] .hero__arrow  { display: none; }
  .hero[data-mobile="true"] .hero__title  { font-size: clamp(26px, 8.5vw, 38px); white-space: normal; line-height: 1.08; }
  .hero[data-mobile="true"] .hero__cta    { flex-direction: column; gap: var(--space-3); }
  .hero[data-mobile="true"] .hero__cta .btn { width: 100%; justify-content: center; }
  .hero[data-mobile="true"] .hero__meta   { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .hero[data-mobile="true"] .hero__inner  { padding-bottom: 130px; }

  /* ── mobile bottom bar (hidden on desktop) ── */
  .hero__botbar {
    display: none;
    position: absolute;
    left: 14px; right: 14px; bottom: 16px;
    height: 66px;
    z-index: 5;
    border-radius: var(--radius-pill);
    align-items: center;
    justify-content: space-around;
    padding: 0 8px;
    background: rgba(247,245,239,.17);
    backdrop-filter: blur(22px) saturate(1.25);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
    border: 1px solid rgba(247,245,239,.34);
    box-shadow: 0 14px 32px rgba(58,30,14,.20), inset 0 1px 0 rgba(255,255,255,.30);
  }
  .hero__botitem {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 21px;
    color: #FBF1E6;
    text-shadow: 0 1px 3px rgba(58,30,14,.34);
    background: transparent;
    border: none;
    transition: background .18s ease;
  }
  .hero__botitem.active {
    background: var(--color-surface-alt);
    color: var(--color-primary);
    text-shadow: none;
    box-shadow: 0 5px 13px rgba(58,30,14,.16);
  }

  /* ── mobile breakpoint ── */
  @media (max-width: 767px) {
    /* swap top nav → bottom bar */
    .hero__top    { display: none; }
    .hero__botbar { display: flex; }
    /* no side arrows on mobile — use pagination dots at the top instead */
    .hero__arrow  { display: none; }
    .hero__dots {
      display: flex;
      top: clamp(16px, 4vw, 24px);
      bottom: auto;
    }

    /* centre the content on mobile */
    .hero__content { text-align: center; }
    /* an inline-flex line doesn't inherit text-align — centre its own box */
    .hero__location { display: flex; justify-content: center; }

    /* title: wrap naturally, smaller */
    .hero__title {
      font-size: clamp(26px, 8.5vw, 38px);
      white-space: normal;
      line-height: 1.08;
    }

    /* buttons: full-width, one per row, centred */
    .hero__cta {
      flex-direction: column;
      align-items: center;
      gap: var(--space-3);
    }
    .btn {
      width: 100%;
      justify-content: center;
    }

    /* trust bar: vertical stack */
    .hero__meta {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-3);
      border-top: 1px solid rgba(247,233,216,.20);
    }

    /* balanced padding keeps the content vertically centred */
    .hero__inner {
      padding-top: var(--space-16);
      padding-bottom: var(--space-16);
    }

    /* hide the search section under the hero on the homepage */
    .home .searchwrap { display: none; }
  }

  /* ============================================================
     SEARCH BAR — floats over the bottom edge of the hero
     ============================================================ */
  .searchwrap {
    position: relative;
    z-index: 6;
    display: flow-root;
    background: var(--color-background);
    padding: 0 var(--grid-margin) var(--space-24);
    min-height: 48vh;
  }
  .searchbar {
    position: relative;
    max-width: 1080px;
    margin: -40px auto 0;
    display: flex;
    align-items: stretch;
    background: var(--color-surface);
    border-radius: var(--radius-pill);
    box-shadow: 0 28px 64px -22px rgba(38,37,34,.40), 0 2px 6px rgba(38,37,34,.08);
    padding: 8px;
  }
  .sb-field { position: relative; flex: 1 1 0; min-width: 0; }
  .sb-field--location { flex: 1.45 1 0; }
  /* Check-in and check-out each hold one day, so together they take about the
     width the single range field used to. */
  .sb-field--date { flex: .8 1 0; }
  .sb-seg {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: start;
    padding: 13px 22px;
    border-radius: var(--radius-pill);
    transition: background .16s ease, box-shadow .16s ease;
    font-family: var(--font-sans);
  }
  .sb-seg:hover { background: var(--color-neutral-50); }
  .sb-field.is-open .sb-seg {
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1.5px var(--color-border-strong), 0 6px 18px -10px rgba(38,37,34,.30);
  }
  .searchbar.has-active .sb-field:not(.is-open) .sb-seg { opacity: .62; }
  .sb-ico { flex: 0 0 auto; width: 22px; text-align: center; color: var(--color-primary); font-size: 19px; }
  .sb-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .sb-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-secondary); }
  /* line-height/padding give Arabic descenders room — `overflow: hidden` clips
     at the line box, so a tight one shears the tails off ب/ي/ج. */
  .sb-value { font-size: 16px; line-height: 1.55; padding-block-end: 2px; font-weight: 600; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sb-value.is-placeholder { font-size: 14px; font-weight: 500; color: var(--color-neutral-400); }
  .sb-div { display: none; }
  .searchbar.has-active .sb-div { opacity: .4; }
  .sb-search {
    flex: 0 0 auto;
    margin-inline-start: 8px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 30px;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 12px 28px -8px rgba(210,98,46,.6);
    transition: background .16s ease, transform .12s ease, box-shadow .16s ease;
  }
  .sb-search:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: 0 16px 34px -10px rgba(210,98,46,.7); }
  .sb-search:active { transform: translateY(0) scale(.98); }
  .sb-search i { font-size: 17px; }

  /* ---- AI search variant ---- */
  .aisearch {
    display: none;
    position: relative;
    max-width: 1080px;
    margin: -40px auto 0;
    align-items: center;
    gap: 16px;
    background: var(--color-surface);
    border-radius: 30px;
    box-shadow: 0 28px 64px -22px rgba(38,37,34,.40), 0 2px 6px rgba(38,37,34,.08);
    padding-block: 14px;
    padding-inline: 18px 14px;
  }
  .searchwrap[data-mode="ai"] .searchbar { display: none; }
  .searchwrap[data-mode="ai"] .aisearch { display: flex; }
  .ai-ico { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-accent-soft); color: var(--color-accent); font-size: 22px; }
  .ai-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; resize: none; font-family: var(--font-sans); font-size: 17px; line-height: 1.55; color: var(--color-text-primary); padding: 13px 0; max-height: 168px; }
  .ai-input::placeholder { color: var(--color-neutral-400); }
  .ai-send { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 999px; border: none; cursor: pointer; background: var(--color-primary); color: var(--color-text-inverse); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px -8px rgba(210,98,46,.6); transition: background .16s ease, transform .12s ease; }
  .ai-send:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
  .ai-send:active { transform: scale(.95); }
  @media (max-width: 880px) {
    .aisearch { margin-top: -42px; }
  }
  body:has(.hero[data-mobile="true"]) .aisearch { margin-top: -42px; }

  /* ---- popovers ---- */
  .sb-pop {
    position: absolute;
    top: calc(100% + 16px);
    z-index: 30;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-control-lg);
    box-shadow: 0 28px 64px -18px rgba(38,37,34,.34);
    padding: 16px;
    display: none;
    color: var(--color-text-primary);
  }
  .sb-field.is-open .sb-pop { display: block; animation: sbpop .18s cubic-bezier(.2,.7,.2,1); }
  @keyframes sbpop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .sb-pop--location { inset-inline-start: 0; width: 388px; }
  /* Centred on its own field. Each date field opens one month — half the width
     the old range picker needed — anchored to the middle of whichever field is
     open rather than to one fixed point on the bar. */
  .sb-pop--dates { left: 50%; transform: none; margin-left: -172px; width: 344px; }
  .sb-field.is-open .sb-pop--dates { animation-name: sbpop-dates; }
  @keyframes sbpop-dates { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .sb-pop--guests { inset-inline-end: 0; width: 340px; }

  /* location popover */
  .loc-search { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-control); margin-bottom: 6px; }
  .loc-search i { color: var(--color-neutral-400); font-size: 15px; }
  .loc-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: 15px; color: var(--color-text-primary); }
  .loc-row { width: 100%; display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: none; background: transparent; cursor: pointer; border-radius: var(--radius-control); text-align: start; font-family: var(--font-sans); }
  .loc-row:hover { background: var(--color-neutral-50); }
  .loc-ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-neutral-100); color: var(--color-text-primary); font-size: 17px; }
  .loc-ico--accent { background: var(--color-accent-soft); color: var(--color-accent); }
  .loc-rowtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .loc-rowt { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
  .loc-rowsub { font-size: 13px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .loc-sep { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-400); padding: 12px 12px 6px; }
  .loc-list { max-height: 248px; overflow: auto; }
  .loc-empty { padding: 16px 12px; color: var(--color-text-secondary); font-size: 14px; }

  /* date popover */
  /* One month per picker, so the arrows sit either side of the month they step
     — no longer floated over a two-month grid that had no room for a title. */
  .cal-topnav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
  .cal-topnav__month { flex: 1; min-width: 0; text-align: center; font-weight: 700; font-size: 15px; color: var(--color-text-primary); }
  .cal-nav { width: 36px; height: 36px; border-radius: 999px; border: 1.5px solid var(--color-border); background: var(--color-surface); cursor: pointer; color: var(--color-text-primary); font-size: 14px; display: inline-flex; align-items: center; justify-content: center; transition: border-color .14s, opacity .14s; }
  .cal-nav:hover:not(:disabled) { border-color: var(--color-text-primary); }
  .cal-nav:disabled { opacity: .3; cursor: default; }
  .cal-wrap { display: flex; gap: 32px; }
  .cal-month { flex: 1; min-width: 0; }
  /* The month is named once, in the nav row above. */
  .cal-head-title { display: none; }
  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
  .cal-dow { font-size: 11px; font-weight: 700; color: var(--color-neutral-400); text-align: center; padding: 0 0 6px; letter-spacing: .02em; }
  .cal-day { aspect-ratio: 1; border: none; background: transparent; cursor: pointer; border-radius: 999px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--color-text-primary); padding: 0; }
  .cal-day:hover:not(:disabled):not(.is-empty) { box-shadow: inset 0 0 0 1.5px var(--color-primary); }
  .cal-day.is-empty { visibility: hidden; cursor: default; }
  .cal-day:disabled { color: var(--color-neutral-300); cursor: default; }
  .cal-day.in-range { background: var(--color-primary-50); border-radius: 0; color: var(--color-primary-700); }
  .cal-day.is-start, .cal-day.is-end { background: var(--color-primary); color: #fff; }
  .cal-day.is-start { border-start-start-radius: 999px; border-end-start-radius: 999px; }
  .cal-day.is-end { border-start-end-radius: 999px; border-end-end-radius: 999px; }
  .cal-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 6px 2px; margin-top: 12px; border-top: 1px solid var(--color-border); }
  .cal-nights { font-size: 14px; font-weight: 600; color: var(--color-text-secondary); }
  .cal-clear { background: none; border: none; cursor: pointer; font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--color-text-primary); text-decoration: underline; text-underline-offset: 3px; }

  /* guests popover */
  .g-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 6px; gap: 16px; }
  .g-row + .g-row { border-top: 1px solid var(--color-border); }
  .g-info { display: flex; flex-direction: column; gap: 2px; }
  .g-name { font-size: 15px; font-weight: 700; color: var(--color-text-primary); }
  .g-sub { font-size: 13px; color: var(--color-text-secondary); }
  .g-step { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
  .g-btn { width: 34px; height: 34px; border-radius: 999px; border: 1.5px solid var(--color-border-strong); background: var(--color-surface); cursor: pointer; color: var(--color-text-primary); font-size: 14px; display: inline-flex; align-items: center; justify-content: center; transition: border-color .14s, opacity .14s; }
  .g-btn:hover:not(:disabled) { border-color: var(--color-text-primary); }
  .g-btn:disabled { opacity: .35; cursor: default; }
  .g-count { min-width: 22px; text-align: center; font-size: 15px; font-weight: 700; color: var(--color-text-primary); }

  /* ---- RTL ----
     Direction itself comes from <html dir="rtl"> (lang.jsx); everything above
     uses logical properties so it mirrors on its own. These are the few bits
     that can't: glyphs that point somewhere, and mixed-script sub-labels. */
  [dir="rtl"] .cal-nav i { transform: scaleX(-1); }
  [dir="rtl"] .sb-value,
  [dir="rtl"] .loc-rowt,
  [dir="rtl"] .loc-rowsub,
  [dir="rtl"] .cal-nights { text-align: start; unicode-bidi: plaintext; }

  /* ---- responsive / forced-mobile: stack the bar ---- */
  @media (max-width: 880px) {
    .searchbar { flex-direction: column; border-radius: 26px; padding: 10px; margin-top: -42px; gap: 4px; }
    .sb-seg { padding: 14px 18px; }
    .sb-div { width: auto; height: 1.5px; align-self: stretch; }
    .sb-search { margin-inline-start: 0; height: 54px; justify-content: center; margin-top: 4px; }
    .sb-pop { inset-inline: 0 auto !important; margin-inline-start: 0 !important; width: 100% !important; box-sizing: border-box; }
  }
  body:has(.hero[data-mobile="true"]) .searchbar { flex-direction: column; border-radius: 26px; padding: 10px; margin-top: -42px; gap: 4px; }
  body:has(.hero[data-mobile="true"]) .sb-div { width: auto; height: 1.5px; align-self: stretch; }
  body:has(.hero[data-mobile="true"]) .sb-search { margin-inline-start: 0; height: 54px; justify-content: center; margin-top: 4px; }
  body:has(.hero[data-mobile="true"]) .sb-pop { inset-inline: 0 auto !important; margin-inline-start: 0 !important; width: 100% !important; box-sizing: border-box; }