/* ============================================================
   ibis Jerusalem City Center, shared landing-page stylesheet
   Used by ibis.html (red) and ibis-styles.html (green).
   Per-hotel colour comes from the --accent* tokens set on
   <html data-hotel="red|styles"> at the bottom of this file.
     --accent      brand colour, for FILLS (white sits on top of it)
     --accent-ink  same colour as FOREGROUND text/borders on the light page
   They are the same value for red; for Styles the ink is a darkened shade of
   the logo green, because the logo green itself is too light to read on white.
   ============================================================ */

:root{
  --ink:#FFFFFF;              /* page background, pure white            */
  --ink-2:#F6F4EF;            /* warm off-white, alternating scenes     */
  --ink-3:#ECE7DD;            /* light placeholder / card base           */
  --bone:#17130F;             /* primary text, deep warm ink            */
  --bone-dim:#5A5346;         /* secondary text                          */
  --bone-faint:#8A8175;       /* faint / eyebrow text                    */
  --paper:#FFFFFF;            /* light text for the dark hero/overlays   */
  --paper-dim:rgba(255,255,255,.82);
  --paper-faint:rgba(255,255,255,.6);
  --brass:#9A7B1E;            /* bronze, hairlines, eyebrows, marks     */
  --line:rgba(23,19,15,.12);
  --line-2:rgba(23,19,15,.07);

  /* overridden per hotel */
  --accent:#E2231A;          /* brand fill                       */
  --accent-ink:#E2231A;      /* same colour as foreground text   */
  --accent-lit:#f0332a;
  --accent-soft:rgba(226,35,26,.12);
  --accent-glow:rgba(226,35,26,.45);

  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Jost", system-ui, sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* ---- type scale -------------------------------------------------
     Every small size on the page snaps to one of these four steps, so
     labels that do the same job are the same size everywhere.
     --fs-micro is the FLOOR: nothing on the site is smaller than it. */
  --fs-micro:.78rem;   /* 12.5px, overlay chips, badges, legal line   */
  --fs-label:.84rem;   /* 13.4px, uppercase labels, buttons, CTA text */
  --fs-sm:.92rem;      /* 14.7px, meta rows, addresses, small copy    */
  --fs-body:1rem;      /* 16px  , descriptions and body copy          */

  --pad: clamp(1.25rem, 4vw, 4.5rem);
  /* Column reserved for the fixed dot-nav so page copy stops before it rather
     than running underneath. It is the nav's own footprint: its inset (up to
     2.2rem) + its widest label + a gap. The English labels are longer than the
     Hebrew ones, so the two get different values further down. Below 1060px
     the nav is display:none and this collapses to nothing. */
  --nav-lane: 0px;
  --dur:.9s;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* the topbar is fixed, so anchor jumps must clear it */
section[id],div[id],#bookbar{scroll-margin-top:clamp(4.75rem,9vh,6.5rem)}

body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--bone);
  font-weight:300;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* overflow-x:hidden makes <body> a scroll container, and on several Android
     builds that is enough on its own to make the browser's chrome flicker as
     you scroll. `clip` does the same clipping WITHOUT creating one. The
     `hidden` line stays first so browsers that do not know `clip` keep the old
     behaviour rather than exposing a horizontal scrollbar. */
  overflow-x:hidden;
  overflow-x:clip;
}

img{display:block;max-width:100%}
/* the <picture> wrappers must not generate a box of their own: every img
   rule below is a descendant selector, and the photos inside are absolutely
   positioned, so an inline picture box would only add a stray line box. */
picture{display:contents}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;cursor:pointer;background:none;border:none}

::selection{background:var(--brass);color:#fff}
:focus-visible{outline:2px solid var(--accent-ink); outline-offset:3px; border-radius:2px}

/* skip link */
.skip{
  position:absolute; top:-100px; inset-inline-start:1rem; z-index:1000;
  background:#fff; color:var(--bone); padding:.8rem 1.2rem; border-radius:8px;
  font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.4); transition:top .3s var(--ease);
}
.skip:focus{top:1rem}

/* ============================================================
   GLOBAL OVERLAYS
   ============================================================ */
.grain{
  position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:.03; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  animation:grainShift 8s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)} 60%{transform:translate(-2%,2%)}
  80%{transform:translate(4%,-2%)} 100%{transform:translate(0,0)}
}
/* always the physical left edge, in LTR and RTL alike */
.progress{
  position:fixed; top:0; left:0; z-index:880;
  width:2px; height:100vh; background:rgba(23,19,15,.08); pointer-events:none;
}
.progress__fill{
  position:absolute; top:0; left:0; width:100%; height:0%;
  background:linear-gradient(to bottom, var(--brass), var(--accent));
}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:700;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(.9rem,2.2vw,1.6rem) var(--pad);
  transition:background .5s var(--ease), backdrop-filter .5s var(--ease), padding .5s var(--ease);
  color:var(--paper);
}
.topbar.is-solid{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  color:var(--bone);
}
.brand{display:flex; align-items:center; gap:.7rem; color:inherit}
.brand__mark{width:44px; height:44px; display:block; border-radius:8px}
.brand__txt{display:flex; flex-direction:column; line-height:1.15}
.brand__txt b{
  font-family:var(--serif); font-weight:600; font-size:1.05rem; letter-spacing:.02em;
}
.brand__txt span{
  font-family:var(--sans); font-weight:400; font-size:var(--fs-micro);
  letter-spacing:.16em; text-transform:uppercase; color:currentColor; opacity:.85;
}
.topbar__actions{display:flex; align-items:center; gap:clamp(.5rem,1.6vw,1.4rem)}
.tel-link{
  font-size:var(--fs-body); font-weight:500; letter-spacing:.03em; color:currentColor; opacity:.92;
  display:flex; align-items:center; gap:.55rem; white-space:nowrap;
  transition:opacity .3s var(--ease), color .3s var(--ease);
}
.tel-link:hover{opacity:1}
.topbar.is-solid .tel-link:hover{color:var(--accent-ink)}
.tel-link svg{width:17px; height:17px; opacity:.85}

.book-btn{
  position:relative; font-family:var(--sans); font-weight:500;
  font-size:var(--fs-label); letter-spacing:.18em; text-transform:uppercase;
  padding:.72rem 1.5rem; color:var(--paper);
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.55);
  border-radius:100px; backdrop-filter:blur(3px); white-space:nowrap;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.book-btn:hover{transform:translateY(-2px); background:rgba(255,255,255,.24); border-color:#fff}
.book-btn:active{transform:translateY(0)}
.topbar.is-solid .book-btn{
  color:#fff; background:var(--accent); border-color:var(--accent);
  box-shadow:0 6px 20px var(--accent-soft);
}
.topbar.is-solid .book-btn:hover{background:var(--accent-lit); border-color:var(--accent-lit); box-shadow:0 10px 28px var(--accent-glow)}


.lang-btn{
  font:inherit; font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:inherit; background:transparent; border:1px solid currentColor; border-radius:100px;
  padding:.55rem .7rem; line-height:1; opacity:.8; cursor:pointer;
  transition:opacity .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.lang-btn:hover{opacity:1}
html[lang^="he"] .lang-btn{font-size:var(--fs-label); letter-spacing:.02em}

/* ============================================================
   DOT-NAV
   ============================================================ */
.dotnav{
  position:fixed; top:50%; inset-inline-end:clamp(1rem,2.2vw,2.2rem); z-index:680;
  transform:translateY(-50%);
  display:flex; flex-direction:column; gap:1.15rem; align-items:flex-end;
}
.dotnav__item{display:flex; align-items:center; gap:.85rem; position:relative}
.dotnav__label{
  font-size:var(--fs-label); font-weight:500; letter-spacing:.11em; text-transform:uppercase;
  color:var(--bone); opacity:0; transform:translateX(6px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), color .35s;
  white-space:nowrap; text-shadow:0 1px 10px rgba(255,255,255,.6);
}
.dotnav__dot{
  width:9px; height:9px; border-radius:50%; border:1px solid var(--brass);
  transition:all .4s var(--ease); position:relative;
}
.dotnav__item:hover .dotnav__label,
.dotnav__item.is-active .dotnav__label{opacity:1; transform:translateX(0)}
.dotnav__item:hover .dotnav__dot{border-color:var(--bone); background:rgba(23,19,15,.12)}
.dotnav__item.is-active .dotnav__dot{
  background:var(--accent); border-color:var(--accent);
  box-shadow:0 2px 10px var(--accent-glow); transform:scale(1.35);
}
.dotnav__item.is-active .dotnav__label{color:var(--accent-ink)}

/* ============================================================
   SCENE SCAFFOLD
   ============================================================ */
.scene{
  position:relative;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(3.5rem,8vh,6rem) var(--pad);
  /* the hero is a centred composition and the nav does not reach it */
  padding-right:max(var(--pad), var(--nav-lane));
  overflow:hidden;
  background:var(--ink);
  color:var(--bone);
}
#statement{background:var(--ink)}
#offers{background:var(--ink-2)}
#rooms{background:var(--ink)}
#dining{background:var(--ink-2)}
#location{background:var(--ink)}

.rise{opacity:0; transform:translateY(28px); transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out)}
.rise.in{opacity:1; transform:none}
[data-delay="1"]{transition-delay:.1s}
[data-delay="2"]{transition-delay:.2s}
[data-delay="3"]{transition-delay:.3s}
[data-delay="4"]{transition-delay:.4s}
[data-delay="5"]{transition-delay:.5s}
[data-delay="6"]{transition-delay:.6s}

.sec__head{max-width:min(760px,92vw); margin-bottom:clamp(1.6rem,4vh,2.8rem)}
.sec__eyebrow{
  font-size:var(--fs-label); font-weight:500; letter-spacing:.26em;
  text-transform:uppercase; color:var(--brass);
  margin-bottom:1rem; display:block;
}
.sec__title{font-family:var(--serif); font-weight:500; font-size:clamp(2.2rem,6vw,4.2rem); line-height:1; margin-bottom:1rem}
.sec__title em{font-style:italic; color:var(--accent-ink)}
.sec__lede{color:var(--bone-dim); max-width:52ch; line-height:1.7; font-size:clamp(var(--fs-body),1.4vw,1.08rem)}

/* ============================================================
   HERO
   ============================================================ */
.scene.hero{padding-right:var(--pad)}
.hero{padding:0; min-height:100svh; justify-content:flex-end}
.hero__media{position:absolute; inset:0; z-index:0; overflow:hidden}
.hero__poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 45%; z-index:0; filter:brightness(.56) saturate(1.05);
}
.hero__video{
  position:absolute; top:50%; left:50%;
  width:100vw; height:56.25vw; min-height:100svh; min-width:177.78svh;
  transform:translate(-50%,-50%); border:0; z-index:1;
  opacity:0; transition:opacity 1.4s var(--ease); pointer-events:none;
}
.hero__video > div, .hero__video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.hero__video.is-ready{opacity:1}
.hero__scrim{
  position:absolute; inset:0; z-index:2;
  background:
    radial-gradient(135% 105% at 50% 44%, rgba(9,7,5,.58) 0%, rgba(9,7,5,.24) 40%, transparent 66%),
    linear-gradient(to bottom, rgba(9,7,5,.5) 0%, transparent 28%, transparent 42%, rgba(9,7,5,.86) 100%);
}
.hero__inner{
  position:relative; z-index:3; text-align:center;
  min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:clamp(5rem,12vh,7rem) var(--pad) clamp(9rem,16vh,11rem);
  color:var(--paper);
}
.hero__kicker{
  font-size:var(--fs-label); font-weight:500; letter-spacing:.34em;
  text-transform:uppercase; color:var(--paper);
  margin-bottom:1.5rem; text-shadow:0 2px 18px rgba(0,0,0,.5);
}
.hero__title{
  font-family:var(--serif); font-weight:500; color:var(--paper);
  font-size:clamp(2.9rem, 10vw, 8rem); line-height:.94; letter-spacing:-.01em;
  margin-bottom:1.3rem; text-shadow:0 2px 14px rgba(0,0,0,.72), 0 14px 64px rgba(0,0,0,.55);
}
.hero__title em{font-style:italic; color:#fff; font-weight:400}
.hero__tag{
  font-family:var(--sans); font-weight:300; font-size:clamp(1.08rem,2.3vw,1.4rem);
  letter-spacing:.05em; color:var(--paper-dim); max-width:44ch; margin:0 auto 2.4rem;
  text-shadow:0 2px 20px rgba(0,0,0,.45); line-height:1.55;
}
.hero__cues{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:center}
.cue-btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:var(--fs-label); font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  padding:.9rem 1.7rem; border:1px solid rgba(255,255,255,.5);
  border-radius:100px; color:var(--paper); transition:all .4s var(--ease);
  background:rgba(255,255,255,.08); backdrop-filter:blur(2px);
}
.cue-btn:hover{border-color:#fff; background:rgba(255,255,255,.18); color:#fff; transform:translateY(-2px)}
.cue-btn--solid{background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 8px 28px var(--accent-glow)}
.cue-btn--solid:hover{background:var(--accent-lit); border-color:var(--accent-lit); color:#fff}


/* ============================================================
   BOOKING WIDGET, fitting the vendored sb-widget into the page

   assets/sb-widget/style.css is the widget's own stylesheet, taken verbatim
   from ibisjerusalemhotels.com and fully scoped to .sb-wrap / #sb_widget /
   .booking*. Everything below only positions that block inside this page and
   re-skins the few bits that carry the hotel's accent colour. Keep overrides
   here rather than editing the vendored file, so it can be re-pulled.
   ============================================================ */
/* The wrapper takes NO height in the flow (height:0, no background), so the
   section after the hero starts exactly at the hero's bottom edge and its photo
   runs up flush against it, the way the archived single-page site framed it.
   The card itself is then pulled up to straddle that seam and floats over both.
   pointer-events are handed back to the card so the zero-height wrapper never
   swallows clicks on the section beneath it. */
.sbw-wrap{
  position:relative; z-index:600;
  height:0;
  padding:0 var(--pad);
  background:none;
  pointer-events:none;
}
.sbw{
  max-width:1180px; margin:0 auto;
  border-radius:12px;
  box-shadow:0 30px 70px -34px rgba(23,19,15,.5), 0 2px 8px -4px rgba(23,19,15,.15);
  transform:translateY(-55%);
  pointer-events:auto;
}
/* the widget paints its own background; round its corners to match the card */
.sbw .sb-wrap{border-radius:12px; overflow:visible}
.sbw #sb_widget{border-radius:12px}

/* Single-hotel pages: the page IS the hotel, so the picker is dead weight.
   The node stays in the DOM because script.js reads data-hotel/data-booking
   off .name-select to build the submit URL, it is only hidden. */
.sbw .booking__property{display:none}

/* The widget sizes its blocks at a fixed 25% each, which assumes the hotel
   picker is present. With the picker hidden those percentages no longer add
   up and the row bunches to one side, so let the remaining blocks share the
   bar evenly instead.

   Only above 992px: that is where the widget's own stylesheet switches to its
   stacked mobile layout (flex-wrap:wrap, dates 50/50, submit 160px). Applying
   flex:1 1 0 there fought that layout and pushed the submit button off-canvas. */
@media (min-width:993px){
  .sbw .booking-flex{width:100%}
  .sbw .booking__date-from,
  .sbw .booking__date-to,
  .sbw .booking__guests,
  .sbw .booking__submit{flex:1 1 0; width:auto; min-width:0}
  .sbw .booking__guests{margin-inline:0}
}

/* accent: the widget ships ibis-navy; re-point the pieces that read as brand */
.sbw .widget-submit,
.sbw .btn-guests-ok,
.sbw .btn-promo-ok{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:#fff !important;
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.sbw .widget-submit:hover,
.sbw .btn-guests-ok:hover,
.sbw .btn-promo-ok:hover{
  background:var(--accent-lit) !important;
  border-color:var(--accent-lit) !important;
  box-shadow:0 10px 26px -10px var(--accent-glow);
}
.sbw .modify{color:var(--bone-dim) !important; transition:color .3s}
.sbw .modify:hover{color:var(--accent-ink) !important}
.sbw .promo-code-btn{color:var(--bone-dim) !important}
.sbw .promo-code-btn:hover{color:var(--accent-ink) !important}

/* The widget's own scale is mostly 12-14px, with a handful of 11px strays.
   Snap those to 12px so the bar holds a floor like the rest of the page.
   12px, not the page's 12.5px: the widget's layout is tuned in whole px. */
.sbw .other-people-bottom,
.sbw .date-d,
.sbw .promo-code,
.sbw .block-inp-promo p,
.sbw .modify,
.sbw button.promo-code-btn{font-size:12px !important}

/* the widget's fonts should follow the page, not the WordPress theme */
.sbw, .sbw input, .sbw button, .sbw select{font-family:var(--sans)}
html[lang^="he"] .sbw{font-family:"Assistant", system-ui, sans-serif}

/* keep the calendar and guest popovers above the hero video and the topbar */
.sbw .calendars__widget,
.sbw .guest,
.sbw .block-inp-promo,
.sbw .box-select{z-index:720}

/* Always drop DOWN, never up.
   The widget defaults every popover to `bottom:90%` (opens upward) and only
   flips to `top` once its own scroll handler adds .booking-top. On a landing
   page the bar sits just under the hero, so the upward state opened over the
   headline. These force the downward geometry unconditionally, same values
   the widget itself uses for .booking-top. */
.sbw .box-select.active,
.sbw .guest.active,
.sbw .calendars__widget,
.sbw .sticky_wgt .calendars__widget{
  top:105% !important;
  bottom:unset !important;
  transform-origin:top !important;
}
.sbw .block-inp-promo.active{
  top:125% !important;
  bottom:unset !important;
}

/* Kept for the case where the hide above is lifted: at 992px the widget's own
   stylesheet stacks its fields, which makes the card far too tall to float over
   the next section, so it would go back to being a normal in-flow block. */
@media (max-width:992px){
  .sbw-wrap{
    height:auto;
    padding-block:clamp(1.5rem,4vh,2.5rem);
    background:var(--ink);
    pointer-events:auto;
  }
  .sbw{transform:none}
}
/* ============================================================
   STATEMENT
   ============================================================ */
.statement{padding:0; justify-content:center; overflow:hidden; display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch}
.statement__inner{
  position:relative; z-index:3;
  /* extra top padding so the floating booking card never lands on the copy */
  padding:clamp(6rem,13vh,9rem) clamp(1.5rem,4vw,4.5rem) clamp(3.5rem,9vh,6rem);
  display:flex; flex-direction:column; justify-content:center;
}
/* .statement sets padding:0 and lays itself out as a two-column grid, so it
   opts out of the lane .scene reserves. In Hebrew the copy is the right-hand
   column and runs straight under the dot-nav, so give that column the lane
   instead. In English the copy is on the left and the photo takes the right,
   which the nav may sit over as it always has. */
[dir="rtl"] .statement__inner{padding-right:max(clamp(1.5rem,4vw,4.5rem), var(--nav-lane))}
.statement__inner::before{content:""; display:block; width:3.4rem; height:2px; background:var(--brass); margin-bottom:1.7rem}
.statement__inner p{
  font-family:var(--serif); font-weight:400; color:var(--bone);
  font-size:clamp(1.6rem,3.6vw,3.1rem); line-height:1.1; letter-spacing:-.01em;
}
.statement__inner p em{font-style:italic; color:var(--accent-ink)}
.statement__inner .sub{
  font-family:var(--sans); font-weight:300; font-size:clamp(var(--fs-body),1.5vw,1.08rem);
  color:var(--bone-dim); letter-spacing:.04em; max-width:54ch; margin-top:1.8rem; line-height:1.8;
}
/* The paragraph is three separate statements, the brand, then this hotel's
   facilities, then the loyalty programme. A bare <br> stacks them with no air
   and they read as one run-on block, so each break gets a little space. */
.statement__inner .sub br{display:block; content:""; margin-bottom:.5rem}
.statement__facts{display:flex; flex-wrap:wrap; gap:1.6rem 2.6rem; margin-top:2.2rem}
.sfact{display:flex; flex-direction:column; gap:.25rem}
.sfact b{font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.3rem); font-weight:600; color:var(--accent-ink); line-height:1}
.sfact span{font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--bone-dim)}
.statement__bg{position:relative; overflow:hidden; min-height:340px}
.statement__bg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%}

/* ============================================================
   OFFERS
   ============================================================ */
.offers__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem); width:100%; max-width:1180px; margin:0 auto}
.offer{
  display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px;
  overflow:hidden; background:#fff; box-shadow:0 18px 50px -30px rgba(23,19,15,.28);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.offer:hover{transform:translateY(-4px); border-color:var(--accent-ink); box-shadow:0 28px 62px -28px rgba(23,19,15,.4)}
.offer__img{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--ink-3)}
.offer__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.offer:hover .offer__img img{transform:scale(1.06)}
/* Physical sides, deliberately, keyed off the PAGE direction. inset-inline-*
   resolves against the ELEMENT's own direction, and the numeric variant below
   sets direction:ltr on itself, which pinned every badge to the left even in
   an RTL page. */
.offer__pct{
  position:absolute; top:.8rem; left:.8rem;
  font-family:var(--serif); font-style:italic; font-size:1.65rem; line-height:1; color:#fff;
  background:var(--accent); padding:.3rem .62rem; border-radius:8px;
  box-shadow:0 8px 20px -8px var(--accent-glow);
}
[dir="rtl"] .offer__pct{left:auto; right:.8rem}
/* only a bare numeral needs isolating, "5%" would otherwise flip to "%5" */
.offer__pct--num{direction:ltr; unicode-bidi:isolate}
/* Assistant has no italic cut, so a Hebrew word badge was being slanted
   synthetically. Give those weight instead of a fake slope. */
html[lang^="he"] .offer__pct:not(.offer__pct--num){
  font-style:normal; font-weight:600; font-size:1.12rem; padding:.42rem .7rem;
}
.offer__body{display:flex; flex-direction:column; gap:.5rem; padding:clamp(1.1rem,2vw,1.5rem); flex:1}
.offer__name{font-family:var(--serif); font-weight:500; font-size:clamp(1.25rem,2.3vw,1.65rem); line-height:1.1}
.offer__desc{color:var(--bone-dim); font-size:var(--fs-sm); line-height:1.65; flex:1}
.offer__cta{
  margin-top:.5rem; display:inline-flex; align-items:center; gap:.6rem; align-self:flex-start;
  font-size:var(--fs-label); font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--bone);
  transition:gap .4s var(--ease), color .4s;
}
.offer__cta:hover{gap:1rem; color:var(--accent-ink)}
.offer__cta svg{width:17px; height:17px}
[dir="rtl"] .offer__cta svg{transform:scaleX(-1)}

/* ---- offers carousel ----------------------------------------------------
   Below 901px the wrapper and its viewport are display:contents, so
   .offers__grid stays the ordinary responsive grid and this nesting costs
   nothing. Above it, site.js clones the card set either side and slides a flex
   track, so the loop never reaches an end.

   The arrows are grid COLUMNS either side of the viewport, never an overlay:
   the track is given whatever width is left over, so a button can never land
   on a card. The wrapper is allowed past the 1180px card rail by exactly the
   width of those two columns, so on a wide screen the cards still line up with
   the rooms grid below and only the arrows sit outside it; on a narrower one
   everything shrinks together and they still never touch. */
.offers__car,
.car__view{display:contents}
.car__nav{display:none}

@media (min-width:901px){
  .offers__car{
    --car-btn:52px;
    --car-gutter:clamp(.6rem,1.4vw,1.1rem);
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:var(--car-gutter);
    width:100%;
    max-width:calc(1180px + 2 * (var(--car-btn) + var(--car-gutter)));
    margin:0 auto;
  }
  .car__view{display:block; overflow:hidden; min-width:0}
  /* No carousel (three offers or fewer): no arrows, and the row keeps the same
     1180px measure as every other section instead of the wider carousel frame.
     This is also the state before site.js runs, so arrows never flash in. */
  .offers__car:not(.is-car){max-width:1180px; grid-template-columns:minmax(0,1fr)}
  .offers__car:not(.is-car) .car__nav{display:none}
  .offers__grid{
    display:flex; max-width:none; margin:0;
    /* unhurried on purpose: this thing advances on its own */
    transition:transform 1.05s cubic-bezier(.33,.78,.16,1);
  }
  .offers__grid.is-jump{transition:none}
  /* three across, matching the grid it replaces */
  .offers__grid > .offer{flex:0 0 calc((100% - 2 * clamp(1rem,2vw,1.6rem)) / 3)}

  .car__nav{
    width:var(--car-btn); height:var(--car-btn); border-radius:50%;
    display:grid; place-items:center;
    background:#fff; color:var(--bone); border:1px solid var(--line);
    cursor:pointer;
    box-shadow:0 8px 22px -16px rgba(23,19,15,.7);
    transition:background .5s var(--ease), color .5s var(--ease),
               border-color .5s var(--ease), transform .5s var(--ease),
               box-shadow .5s var(--ease);
  }
  .car__nav:hover{
    background:var(--accent); border-color:var(--accent); color:#fff;
    transform:scale(1.07); box-shadow:0 14px 28px -14px var(--accent-glow);
  }
  .car__nav:active{transform:scale(1)}
  .car__nav svg{width:18px; height:18px}
  /* the chevron points along the reading direction */
  .car__nav--prev svg{transform:scaleX(-1)}
  [dir="rtl"] .car__nav--prev svg{transform:none}
  [dir="rtl"] .car__nav--next svg{transform:scaleX(-1)}
}

/* a cloned card is scenery: never announced, never a tab stop */
.offer--clone{cursor:default}

@media (prefers-reduced-motion:reduce){
  .offers__grid{transition:none !important}
}

/* ============================================================
   ROOMS
   ============================================================ */
.room-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem); width:100%; max-width:1180px; margin:0 auto}
.room-card{
  position:relative; font:inherit; text-align:start; color:inherit;
  border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff;
  box-shadow:0 18px 50px -30px rgba(23,19,15,.28); cursor:pointer;
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.room-card:hover{transform:translateY(-4px); border-color:var(--accent-ink); box-shadow:0 28px 62px -28px rgba(23,19,15,.4)}
.room-card:focus-visible{outline:2px solid var(--accent-ink); outline-offset:3px}
.room-card__media{position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--ink-3)}
.room-card__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.room-card:hover .room-card__media img{transform:scale(1.06)}
.room-card__count{
  position:absolute; bottom:.8rem; inset-inline-start:.8rem;
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:var(--fs-micro); letter-spacing:.08em; padding:.34rem .62rem; border-radius:100px;
  background:rgba(255,255,255,.92); color:var(--bone); backdrop-filter:blur(4px);
  box-shadow:0 4px 14px -8px rgba(23,19,15,.5);
}
.room-card__count svg{width:14px; height:14px; color:var(--accent-ink)}
.room-card__view{
  position:absolute; bottom:.8rem; inset-inline-end:.8rem;
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.92);
  display:grid; place-items:center; color:var(--bone);
  opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), background .4s, color .4s;
}
.room-card:hover .room-card__view{opacity:1; transform:none; background:var(--accent); color:#fff}
.room-card__view svg{width:15px; height:15px}
[dir="rtl"] .room-card__view svg{transform:scaleX(-1)}
.room-card__body{display:flex; flex-direction:column; gap:.5rem; padding:clamp(1rem,1.6vw,1.3rem); flex:1}
.room-card__name{font-family:var(--serif); font-weight:500; font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.1}
.room-card__meta{display:flex; flex-wrap:wrap; gap:.35rem .9rem; font-size:var(--fs-sm); color:var(--bone-dim)}
.room-card__meta span{display:inline-flex; align-items:center; gap:.35rem}
.room-card__meta svg{width:15px; height:15px; color:var(--brass); flex:0 0 auto}
.room-card__cta{
  margin-top:auto; padding-top:.7rem; border-top:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  font-size:var(--fs-label); font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-ink);
}
.room-card__cta svg{width:16px; height:16px}
[dir="rtl"] .room-card__cta svg{transform:scaleX(-1)}

/* ============================================================
   ROOM MODAL, with multi-photo gallery
   ============================================================ */
.rmodal{position:fixed; inset:0; z-index:960; display:grid; place-items:center; padding:clamp(.75rem,3vw,3rem)}
.rmodal[hidden]{display:none}
.rmodal__backdrop{position:absolute; inset:0; background:rgba(9,7,5,.62); backdrop-filter:blur(7px); opacity:0; transition:opacity .4s var(--ease)}
.rmodal.is-open .rmodal__backdrop{opacity:1}
.rmodal__panel{
  position:relative; z-index:2; width:min(1000px,100%); max-height:92vh; overflow:auto;
  background:#fff; border-radius:14px; box-shadow:0 50px 120px -40px rgba(0,0,0,.6);
  display:grid; grid-template-columns:1.1fr 1fr;
  transform:translateY(14px) scale(.985); opacity:0;
  transition:transform .5s var(--ease), opacity .45s var(--ease);
  overscroll-behavior:contain;
}
.rmodal.is-open .rmodal__panel{transform:none; opacity:1}
.rmodal__close{
  position:absolute; top:1rem; inset-inline-end:1rem; z-index:6;
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:rgba(255,255,255,.94); color:var(--bone);
  display:grid; place-items:center; cursor:pointer;
  transition:transform .4s var(--ease), background .3s, color .3s, border-color .3s;
}
.rmodal__close:hover{transform:rotate(90deg); background:var(--accent); color:#fff; border-color:var(--accent)}
.rmodal__close svg{width:18px; height:18px}

/* --- gallery --- */
.gal{position:relative; background:var(--ink-3); min-height:340px; display:flex; flex-direction:column}
/* The stage carries the 400px variant of the current photo as a background.
   For the first slide that file is already in cache, it is what the room card
   was showing, so the modal opens onto the picture instead of onto an empty
   box, and the full-size image then cross-fades over it. */
.gal__stage{
  position:relative; flex:1; min-height:300px; overflow:hidden;
  background-size:cover; background-position:50% 50%;
}
/* buildGallery() replaces this node's contents, so the overlay chrome sits
   beside it in .gal__stage rather than inside it. */
.gal__slides{position:absolute; inset:0}
.gal__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .45s var(--ease);
}
/* is-ready is set once the file has actually decoded, so a partially painted
   image is never revealed mid-download. */
.gal__img.is-active.is-ready{opacity:1}
.gal__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--bone);
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.55);
  transition:background .3s, color .3s, transform .3s var(--ease), opacity .3s;
}
.gal__nav:hover{background:var(--accent); color:#fff}
/* The gallery runs left-to-right in both languages (see the .gal__thumbs rule
   further down), so its arrows are physical, not mirrored: back is on the left
   and points left, forward is on the right and points right, in Hebrew too.
   Mirroring them for RTL, as the rest of the page's chrome is, left the
   right-hand arrow stepping backwards through a strip that fills rightwards. */
.gal__nav--prev{left:.85rem; right:auto}
.gal__nav--next{right:.85rem; left:auto}
.gal__nav svg{width:19px; height:19px}
.gal__nav--prev svg{transform:scaleX(-1)}
/* The gallery runs left-to-right even in Hebrew: photo 1 is the leftmost
   thumbnail and the strip fills rightwards. The sequence is unchanged, 1, 2,
   3 in document order, only the direction it is read in. An RTL strip put
   photo 1 at the far right, off at the edge the eye leaves last. */
[dir="rtl"] .gal__thumbs,
[dir="rtl"] .gal__dots{direction:ltr}
.gal__count{
  position:absolute; top:1rem; inset-inline-start:1rem; z-index:4;
  font-size:var(--fs-micro); letter-spacing:.08em; padding:.35rem .7rem; border-radius:100px;
  background:rgba(9,7,5,.6); color:#fff; backdrop-filter:blur(4px);
  direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums;
}
.gal__dots{
  position:absolute; bottom:.9rem; left:0; right:0; z-index:4;
  display:flex; justify-content:center; gap:.42rem; padding-inline:3.5rem; flex-wrap:wrap;
  /* legible against a photo rather than against the white thumbnail strip */
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));
}
.gal__dot{
  width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.18); cursor:pointer; padding:0; flex:0 0 auto;
  transition:background .3s, transform .3s;
}
.gal__dot.is-active{background:#fff; transform:scale(1.35)}
.gal__thumbs{
  display:flex; gap:.4rem; padding:.55rem; background:#fff;
  border-top:1px solid var(--line); overflow-x:auto; scrollbar-width:thin;
}
.gal__thumbs::-webkit-scrollbar{height:4px}
.gal__thumbs::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px}
.gal__thumb{
  flex:0 0 auto; width:62px; height:44px; border-radius:5px; overflow:hidden;
  border:2px solid transparent; cursor:pointer; padding:0; opacity:.6;
  transition:opacity .3s, border-color .3s;
  background:var(--ink-3);   /* a tile is never a white hole while it decodes */
}
.gal__thumb img{width:100%; height:100%; object-fit:cover}
.gal__thumb.is-active,.gal__thumb:hover{opacity:1; border-color:var(--accent-ink)}

.rmodal__body{padding:clamp(1.3rem,2.6vw,2.2rem); display:flex; flex-direction:column; gap:.9rem}
.rmodal__title{font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,2.8vw,2.2rem); line-height:1.08}
.rmodal__desc{color:var(--bone-dim); line-height:1.75; font-size:var(--fs-body)}
.rmodal__facts{display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--line)}
.rmodal__fact{
  display:flex; flex-direction:column; align-items:center; gap:.45rem; text-align:center;
  font-size:var(--fs-sm); line-height:1.35; color:var(--bone);
  padding:.9rem .4rem; border-inline-start:1px solid var(--line);
}
.rmodal__fact:first-child{border-inline-start:0}
.rmodal__fact .rf-ic{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  color:var(--brass); background:var(--accent-soft);
  box-shadow:inset 0 0 0 1px rgba(154,123,30,.26);
}
.rmodal__fact .rf-ic svg{width:17px; height:17px}
.rmodal__amen-h{font-size:var(--fs-label); font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--brass)}
.rmodal__amen{display:grid; grid-template-columns:1fr 1fr; gap:.45rem .9rem}
.rmodal__amen div{display:flex; align-items:center; gap:.5rem; font-size:var(--fs-sm); color:var(--bone)}
.rmodal__amen svg{width:15px; height:15px; color:var(--accent-ink); flex:0 0 auto}
.rmodal__foot{
  display:flex; align-items:center; gap:.8rem; margin-top:auto;
  padding-top:.9rem; border-top:1px solid var(--line); flex-wrap:wrap;
}
.rmodal__book{
  flex:1; text-align:center; font-family:var(--sans); font-weight:500;
  font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase;
  padding:.95rem 1.6rem; background:var(--accent); color:#fff; border-radius:100px;
  box-shadow:0 8px 26px -10px var(--accent-glow);
  transition:transform .3s, background .3s, box-shadow .3s; white-space:nowrap;
}
.rmodal__book:hover{transform:translateY(-2px); background:var(--accent-lit)}

/* ============================================================
   DINING
   ============================================================ */
.dining{padding:0}
.dining__grid{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr 1fr; align-items:stretch}
.dining__img{position:relative; overflow:hidden; min-height:360px}
.dining__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.dining__txt{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(3.5rem,9vh,6rem) clamp(1.5rem,4vw,4.5rem);
  background:var(--ink-2); color:var(--bone);
}
.dining__list{list-style:none; margin-top:.4rem}
.dining__list li{padding:1.1rem 0; border-top:1px solid var(--line); display:flex; gap:1.05rem; align-items:flex-start}
.dining__list li:last-child{border-bottom:1px solid var(--line)}
.dining__list .di-t{font-family:var(--serif); font-size:1.35rem; font-weight:500; margin-bottom:.25rem; display:block}
.dining__list .di-d{font-size:var(--fs-sm); color:var(--bone-dim); line-height:1.65; display:block}
.dining__list .di-ic{color:var(--brass); flex:0 0 auto; width:1.65rem; height:1.65rem; margin-top:.15rem; display:grid; place-items:center}
.dining__list .di-ic svg{width:100%; height:100%}
.glow-line{
  margin-top:1.7rem; display:inline-flex; align-items:center; gap:.8rem;
  font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); font-weight:500;
}
.glow-dot{
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft); animation:pulse 2.4s var(--ease) infinite; flex:0 0 auto;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.8)}}

/* ============================================================
   LOCATION
   ============================================================ */
.loc__grid{display:grid; grid-template-columns:minmax(260px,.82fr) 1.18fr; gap:clamp(2rem,5vw,5rem); align-items:stretch; width:100%; max-width:1180px; margin:0 auto}
.loc__intro{display:flex; flex-direction:column}
.loc__photo{
  position:relative; border-radius:10px; overflow:hidden; flex:1 1 auto; min-height:200px;
  border:1px solid var(--line); box-shadow:0 24px 60px -30px rgba(23,19,15,.5); margin-top:1.6rem;
}
.loc__photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%}
.loc__photo figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1rem 1.1rem;
  font-family:var(--serif); font-style:italic; font-size:1.05rem; color:#fff;
  background:linear-gradient(to top, rgba(9,7,5,.82), transparent);
}
.loc__index{list-style:none; border-top:1px solid var(--line)}
.loc__row{
  display:grid; grid-template-columns:minmax(9rem,auto) 1fr auto; align-items:center;
  gap:clamp(.8rem,2vw,1.6rem); padding:clamp(.7rem,1.5vh,1.05rem) 0;
  border-bottom:1px solid var(--line); transition:color .4s var(--ease);
}
.loc__row:hover{color:var(--accent-ink)}
.loc__name{font-family:var(--serif); font-size:clamp(1.05rem,1.8vw,1.3rem); font-weight:500}
.loc__bar{position:relative; height:2px; background:var(--line); border-radius:2px; overflow:hidden}
.loc__bar i{position:absolute; top:0; bottom:0; inset-inline-start:0; width:0; background:linear-gradient(to right, var(--brass), var(--accent)); transition:width 1.1s var(--ease-out)}
.loc__row.in .loc__bar i{width:var(--w)}
.loc__row:hover .loc__bar i{background:var(--accent)}
.loc__dist{font-size:var(--fs-sm); letter-spacing:.08em; color:var(--bone-dim); white-space:nowrap; min-width:4.5rem; text-align:end}
.loc__row:hover .loc__dist{color:var(--accent-ink)}

/* ============================================================
   SISTER HOTEL + FOOTER

   The closing block cross-sells the other ibis in the city centre. It is
   deliberately painted in the SISTER hotel's colour (--sister-*), not this
   page's accent, so it reads as "a different hotel" rather than another CTA
   for this one.
   ============================================================ */
/* .closing holds the sister block and the footer, and is a sibling of the
   .scene sections rather than one of them, so it needs the dot-nav lane
   explicitly. Without it the footer's negative margin (which cancels this
   padding to go full-bleed) overshot by lane-minus-pad and put the whole
   page into horizontal scroll in English, where the lane is widest. */
.closing{position:relative; background:var(--ink-2); padding:0 var(--pad);
  padding-right:max(var(--pad), var(--nav-lane))}
.closing__top{
  max-width:1180px; margin:0 auto; width:100%;
  padding:clamp(3.5rem,9vh,6rem) 0 clamp(2.5rem,6vh,4rem);
}
.sister{
  display:grid; grid-template-columns:.9fr 1.1fr;
  gap:clamp(1.8rem,4vw,3.5rem); align-items:center;
}
.sister__media{
  position:relative; border-radius:12px; overflow:hidden;
  aspect-ratio:4/3; border:1px solid var(--line);
  box-shadow:0 26px 60px -32px rgba(23,19,15,.55);
}
.sister__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.sister:hover .sister__media img{transform:scale(1.04)}
.sister__tag{
  position:absolute; bottom:.9rem; inset-inline-start:.9rem; z-index:2;
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  padding:.5rem .85rem; border-radius:100px;
  background:rgba(255,255,255,.94); color:var(--bone); backdrop-filter:blur(4px);
  box-shadow:0 6px 18px -8px rgba(23,19,15,.5);
}
.sister__dot{width:9px; height:9px; border-radius:3px; background:var(--sister); flex:0 0 auto}
.sister__body{display:flex; flex-direction:column; align-items:flex-start}
.sister__body .sec__title{margin-bottom:1rem}
.sister__body .sec__title em{color:var(--sister-ink)}
.sister__facts{
  list-style:none; display:flex; flex-wrap:wrap; gap:1.2rem 2.4rem;
  margin:1.8rem 0 0; padding:1.4rem 0 0; border-top:1px solid var(--line); width:100%;
}
.sister__facts li{display:flex; flex-direction:column; gap:.2rem}
.sister__facts b{
  font-family:var(--serif); font-size:clamp(1.5rem,2.8vw,2.1rem); font-weight:600;
  color:var(--sister-ink); line-height:1; direction:ltr; unicode-bidi:isolate;
}
[dir="rtl"] .sister__facts b{text-align:right}
.sister__facts span{font-size:var(--fs-micro); letter-spacing:.15em; text-transform:uppercase; color:var(--bone-dim)}

.cbtn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  padding:1rem 1.9rem; border-radius:100px; border:1px solid var(--line); color:var(--bone);
  transition:all .4s var(--ease); white-space:nowrap;
}
.cbtn:hover{border-color:var(--accent-ink); color:var(--accent-ink); transform:translateY(-2px)}
.cbtn svg{width:16px; height:16px; flex:0 0 auto}
/* arrows point along the reading direction, so they flip in RTL */
[dir="rtl"] .cbtn svg{transform:scaleX(-1)}
/* a map pin is a symbol, not a direction, it must never mirror */
[dir="rtl"] .cbtn .ic-pin{transform:none}

/* per-section call to action */
.sec__cta{margin-top:clamp(1.8rem,4vh,2.8rem); width:100%}
.sec__cta--row{
  display:flex; gap:.8rem; flex-wrap:wrap; align-items:center;
  max-width:1180px; margin-inline:auto;
}
.cbtn--book{
  background:var(--accent); border-color:var(--accent); color:#fff;
  box-shadow:0 10px 30px -12px var(--accent-glow);
}
.cbtn--book:hover{
  background:var(--accent-lit); border-color:var(--accent-lit); color:#fff;
  box-shadow:0 16px 38px -14px var(--accent-glow);
}
/* the rooms + offers grids are centred at 1180px; keep their CTA on that rail */
#offers .sec__cta,#rooms .sec__cta{max-width:1180px; margin-inline:auto}
.cbtn--sister{
  margin-top:1.8rem;
  background:var(--sister); border-color:var(--sister); color:#fff;
  box-shadow:0 10px 30px -10px var(--sister-glow);
}
.cbtn--sister:hover{
  background:var(--sister-lit); border-color:var(--sister-lit); color:#fff;
  transform:translateY(-2px); box-shadow:0 16px 38px -12px var(--sister-glow);
}

.footer{border-top:1px solid var(--line); padding:clamp(2.5rem,5vw,4rem) 0 2rem; background:var(--ink); margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad)}
.footer:not(.legal-foot){margin-right:calc(max(var(--pad), var(--nav-lane)) * -1); padding-right:max(var(--pad), var(--nav-lane))}
.footer__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:clamp(1.5rem,3vw,3rem); max-width:1180px; margin:0 auto; width:100%}
.foot-brand{display:flex; flex-direction:column; gap:1rem}
.foot-brand__logos{display:flex; gap:.7rem; align-items:center}
.foot-brand__logos img{width:44px; height:44px; border-radius:10px}
.foot-brand p{color:var(--bone-dim); font-size:var(--fs-sm); line-height:1.75; max-width:38ch}
.foot-col h4{font-family:var(--sans); font-weight:500; font-size:var(--fs-label); letter-spacing:.18em; text-transform:uppercase; color:var(--brass); margin-bottom:1rem}
.foot-col address{font-style:normal; color:var(--bone-dim); font-size:var(--fs-sm); line-height:1.9}
.foot-col address a{transition:color .3s}
.foot-col address a:hover{color:var(--accent-ink)}
.socials{display:flex; gap:.7rem; margin-top:1rem}
.socials a{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); color:var(--bone); display:grid; place-items:center; transition:all .4s var(--ease)}
.socials a:hover{border-color:var(--accent-ink); color:var(--accent-ink); transform:translateY(-2px)}
.socials svg{width:16px; height:16px}
.foot-badges{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem}
.badge{font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim); padding:.5rem .85rem; border:1px solid var(--line); border-radius:100px}
.footer__base{
  max-width:1180px; margin:2.4rem auto 0; width:100%;
  padding-top:1.5rem; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:var(--fs-micro); letter-spacing:.06em; color:var(--bone-faint);
}

/* ============================================================
   MOBILE STICKY BOOK BAR
   ============================================================ */
.mbook{
  position:fixed; left:0; right:0; bottom:0; z-index:690;
  display:none; gap:.6rem; padding:.7rem clamp(.8rem,3vw,1.2rem);
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); box-shadow:0 -8px 30px -14px rgba(23,19,15,.4);
  transform:translateY(110%); transition:transform .45s var(--ease);
}
.mbook.is-up{transform:none}
.mbook a{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  padding:.9rem .8rem; border-radius:100px; border:1px solid var(--line); color:var(--bone);
}
/* The booking label is the longer of the two ("Check availability" vs "Call"),
   and at the larger label size an even 50/50 split wrapped it onto two lines.
   The primary action takes the bigger share of the bar, which is the right
   emphasis anyway, so both labels sit on one line. */
.mbook a.is-primary{flex:1.9; background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 8px 22px -10px var(--accent-glow)}
.mbook svg{width:15px; height:15px; flex:0 0 auto}

/* The Negishot accessibility launcher is fixed at bottom:20px / right:20px and
   is 36px square, 56px of the bottom-right corner, and it sits inside a shadow
   root we cannot restyle. So this bar gives way: it keeps that corner clear.
   .has-a11y is set by site.js only when the launcher actually rendered, because
   the licence is domain-bound and the bar must stay full width everywhere else.
   Physical `right`, not an inset-inline property, the launcher does not flip
   in RTL, so neither may the lane that clears it. */
.has-a11y .mbook{padding-right:4rem}

/* ============================================================
   COOKIE CONSENT BAR
   Only ever rendered when an ad tag is configured, see consent.js.
   ============================================================ */
.cbar{
  position:fixed; left:0; right:0; bottom:0; z-index:940;
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  padding:1rem var(--pad);
  padding-bottom:calc(1rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.98); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); box-shadow:0 -10px 34px -16px rgba(23,19,15,.45);
  transform:translateY(110%); transition:transform .5s var(--ease);
}
.cbar.is-up{transform:none}
.cbar__txt{flex:1 1 22rem; font-size:var(--fs-sm); color:var(--bone-dim); line-height:1.6; margin:0}
.cbar__more{color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; white-space:nowrap}
.cbar__btns{display:flex; gap:.6rem; flex-wrap:wrap}
.cbar__btn{
  font-family:var(--sans); font-size:var(--fs-label); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.85rem 1.5rem; border-radius:100px; border:1px solid var(--line);
  color:var(--bone); background:none; white-space:nowrap;
  transition:all .35s var(--ease);
}
.cbar__btn:hover{border-color:var(--accent-ink); color:var(--accent-ink)}
.cbar__btn--yes{background:var(--accent); border-color:var(--accent); color:#fff}
.cbar__btn--yes:hover{background:var(--accent-lit); border-color:var(--accent-lit); color:#fff}
/* it must not bury the sticky booking bar, so that one steps aside while it shows */
.cbar ~ .mbook, body:has(.cbar) .mbook{bottom:auto}
@media (max-width:620px){
  .cbar{flex-direction:column; align-items:stretch; gap:.9rem; padding-block:1.1rem}
  .cbar__btn{flex:1}
  .cbar__btns{flex-wrap:nowrap}
}

/* ============================================================
   LEGAL PAGES  (accessibility / privacy / terms / cookies)

   These are shared by both hotels, so they carry no hotel accent and no
   booking chrome, just the page, its two languages, and a way back.
   Both languages sit in the markup; the one you are not reading is display:none
   so assistive tech never reads it twice. legal.js flips the pair.
   ============================================================ */
html[lang^="he"] .lg[lang="en"],
html[lang="en"] .lg[lang="he"]{display:none}

.legal-bar{position:sticky; top:0; background:rgba(255,255,255,.94); color:var(--bone)}
.legal-bar .brand__mark{width:38px; height:38px}
.legal-bar__marks{display:flex; gap:.5rem; align-items:center}
.legal-back{
  font-size:var(--fs-label); letter-spacing:.12em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.5rem; color:var(--bone-dim);
  transition:color .3s var(--ease);
}
.legal-back:hover{color:var(--accent-ink)}
.legal-back svg{width:15px; height:15px}
[dir="rtl"] .legal-back svg{transform:scaleX(-1)}

.legal{padding:clamp(2.5rem,7vh,5rem) var(--pad) clamp(3rem,8vh,5rem); background:var(--ink)}
.legal__wrap{max-width:64rem; margin:0 auto}
.legal__title{
  font-family:var(--serif); font-weight:500; line-height:1.05;
  font-size:clamp(2rem,5vw,3.4rem); margin:.4rem 0 .8rem;
}
.legal__meta{
  font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone-faint); padding-bottom:1.6rem; margin-bottom:2.2rem;
  border-bottom:1px solid var(--line);
}
/* .lg is ONLY the language toggle, it is on inline spans inside headings too,
   so it must carry no typography of its own or it would flatten them to body
   size. The prose styling belongs to the document block, .lgdoc. */
.lgdoc{max-width:46rem; font-size:var(--fs-body); line-height:1.85; color:var(--bone-dim)}
.lgdoc h2{
  font-family:var(--serif); font-weight:600; color:var(--bone); line-height:1.2;
  font-size:clamp(1.35rem,2.6vw,1.85rem); margin:2.6rem 0 .9rem;
}
.lgdoc h2:first-child{margin-top:0}
.lgdoc h3{
  font-family:var(--sans); font-weight:500; color:var(--bone);
  font-size:var(--fs-body); letter-spacing:.02em; margin:1.7rem 0 .5rem;
}
.lgdoc p{margin-bottom:1rem}
.lgdoc ul,.lgdoc ol{margin:0 0 1.2rem; padding-inline-start:1.4rem}
.lgdoc li{margin-bottom:.5rem}
.lgdoc li::marker{color:var(--brass)}
.lgdoc strong{color:var(--bone); font-weight:600}
.lgdoc a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px}
.lgdoc a:hover{text-decoration-thickness:2px}
.lg__note{
  background:var(--ink-2); border:1px solid var(--line); border-radius:10px;
  padding:1.1rem 1.3rem; margin:1.4rem 0; font-size:var(--fs-sm);
}
.lg__note p:last-child{margin-bottom:0}
.lgdoc table{width:100%; border-collapse:collapse; margin:1.2rem 0 1.6rem; font-size:var(--fs-sm)}
.lgdoc th,.lgdoc td{text-align:start; padding:.7rem .8rem; border-bottom:1px solid var(--line); vertical-align:top}
.lgdoc th{
  color:var(--bone); font-weight:500; font-size:var(--fs-micro);
  letter-spacing:.14em; text-transform:uppercase; border-bottom-color:var(--bone-faint);
}
.lg__scroll{overflow-x:auto}
.lgdoc dl{margin-bottom:1.2rem}
.lgdoc dt{color:var(--bone); font-weight:500; margin-top:.9rem}
.lgdoc dd{margin-inline-start:0}

/* .footer carries a negative inline margin so that, on the landing pages, it can
   break out of .closing's padding and run edge to edge. Here it is a direct
   child of <body> with no padding to cancel, so that margin would push it right
   off the viewport, 1556px inside 1440. Reset it. */
.legal-foot{margin-inline:0}

.legal-links{display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; font-size:var(--fs-sm)}
.legal-links a{color:var(--bone-dim); transition:color .3s}
.legal-links a:hover,.legal-links a[aria-current]{color:var(--accent-ink)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:1061px){
  :root{--nav-lane:10rem}
  html[lang^="he"]{--nav-lane:8rem}
}

@media (max-width:1060px){
  .dotnav{display:none}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .statement{grid-template-columns:1fr}
  .statement__bg{min-height:44vh; order:2}
  .statement__inner{order:1}
  .dining__grid{grid-template-columns:1fr}
  .dining__img{min-height:44vh}
  .room-grid{grid-template-columns:1fr 1fr}
  .offers__grid{grid-template-columns:1fr 1fr}
  /* an odd card out in the two-column band sits centred under the pair,
     at the same width, rather than hugging one side */
  .offers__grid > .offer:last-child:nth-child(odd){
    grid-column:1 / -1; justify-self:center; width:calc(50% - clamp(1rem,2vw,1.6rem) / 2);
  }
  /* Cards get more compact for the whole small-screen range, not just phones:
     in the two-column band they were the tallest on the site (up to 452px).
     Width is left alone, capping it made them read as shrunken rather than
     smaller, so the trim is height: the photo gives up a slice, and the
     padding, headline and badge each come down a notch. */
  .offer__img{aspect-ratio:16/9}       /* from 16/10 */
  .room-card__media{aspect-ratio:12/7} /* from 3/2   */
  .offer__body{padding:.95rem 1.05rem; gap:.44rem}
  .room-card__body{padding:.9rem 1rem; gap:.44rem}
  .offer__name{font-size:1.16rem}
  .room-card__name{font-size:1.08rem}
  .offer__pct{font-size:1.42rem; top:.65rem; left:.65rem}
  [dir="rtl"] .offer__pct{left:auto; right:.65rem}
  html[lang^="he"] .offer__pct:not(.offer__pct--num){font-size:1.04rem}
  .loc__grid{grid-template-columns:1fr}
  .loc__photo{flex:none; aspect-ratio:16/9; max-height:300px}
  .rmodal__panel{grid-template-columns:1fr; max-height:90vh}
  .gal{min-height:0}
  .gal__stage{aspect-ratio:16/10; min-height:0}
  .sister{grid-template-columns:1fr; gap:1.6rem}
  .sister__media{aspect-ratio:16/9}
}
/* 1024px, not 992: an iPad in landscape reports exactly 1024 CSS pixels, and
   that is the tablet this most needs to cover. */
@media (max-width:1024px){
  /* The widget's own stylesheet stacks its fields below 993px, which puts a
     tall block of form controls ahead of the content on phones AND tablets.
     The sticky .mbook bar takes over the booking action at the same breakpoint
     so there is always a way to book, and site.js repoints every #bookbar link
     at the engine while the widget is hidden. Move BOTH together, hiding the
     widget without raising .mbook would leave tablets with no booking bar. */
  .sbw-wrap{display:none}
  .mbook{display:flex}
}
@media (max-width:760px){
  .tel-link{display:none}
  .hero__inner{padding-bottom:clamp(5rem,12vh,7rem)}
  body{padding-bottom:0}
}
@media (max-width:620px){
  /* one column on phones; the compaction itself is in the 900px block above */
  .room-grid{grid-template-columns:1fr; max-width:440px; margin-inline:auto}
  .offers__grid{grid-template-columns:1fr; max-width:440px; margin-inline:auto}
  .offers__grid > .offer:last-child:nth-child(odd){width:auto; justify-self:stretch}
  .rmodal__amen{grid-template-columns:1fr}
  .loc__row{grid-template-columns:1fr auto; gap:.4rem 1rem}
  .loc__bar{display:none}
  /* Footer on phones: the brand blurb was capped at 38ch inside a 350px
     column, which left a dead gutter down its whole side; and stacking all
     three blocks made the footer ~700px of mostly empty ribbon. The brand
     spans the full width at its natural measure, and the two short columns
     sit side by side. */
  .footer__grid{grid-template-columns:1fr 1fr; gap:1.7rem 1.1rem}
  .foot-brand{grid-column:1 / -1; gap:.85rem}
  .foot-brand p{max-width:none}
  .foot-brand__logos img{width:38px; height:38px}
  .socials{margin-top:.2rem}
  .foot-col h4{margin-bottom:.7rem}
  .foot-col address{line-height:1.75}
  /* The badges are nested inside .foot-col so they cannot span the grid, and
     inside a 166px column they wrap two or three deep and read as clutter.
     Kosher / Accor / ALL are all stated in the brand paragraph directly above,
     so on phones they are dropped rather than stacked. */
  .foot-badges{display:none}
  .footer__base{flex-direction:column; align-items:flex-start; gap:.5rem}
  .rmodal__foot{flex-direction:column; align-items:stretch}
  /* The CTA labels are whole sentences in English ("Check dates and claim the
     offer"), and .cbtn is nowrap, at the larger label size that pill ran past
     the viewport edge. On phones the section CTAs become full-width stacked
     buttons instead: a bigger tap target, and immune to how long the string
     happens to be in either language. */
  .cbtn{white-space:normal; text-align:center; padding-inline:1.4rem}
  .sec__cta .cbtn,.cbtn--sister{width:100%; justify-content:center}
  .sec__cta--row{flex-direction:column; align-items:stretch}
}
@media (max-width:430px){
  .brand__txt span{display:none}
  .book-btn{padding:.62rem 1rem; letter-spacing:.16em}
  .rmodal__fact{padding:.7rem .3rem; font-size:var(--fs-label)}
  .gal__thumb{width:52px; height:38px}
  /* "Check availability" is 18 characters; below ~360px the tracking is what
     tips it onto a second line, not the size. Trim the tracking, keep the size. */
  .mbook a{letter-spacing:.03em; padding-inline:.5rem}
}
@media (max-width:360px){
  /* Once the accessibility launcher's 56px lane comes out of a 320px bar there
     is no longer enough width for an even split, and "Check availability" fell
     to a second line. The Call button sizes to its own label instead, which
     hands the difference to the primary action. */
  .has-a11y .mbook a:not(.is-primary){flex:0 1 auto}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .rise{opacity:1 !important; transform:none !important}
  .hero__video{display:none}
  .grain{display:none}
}

/* ============================================================
   HEBREW / RTL
   ============================================================ */
html[lang^="he"]{--serif:"Assistant", system-ui, sans-serif; --sans:"Assistant", system-ui, sans-serif; letter-spacing:0}
html[lang^="he"] .hero__title,
html[lang^="he"] .sec__title,
html[lang^="he"] .sister__facts b,
html[lang^="he"] .rmodal__title,
html[lang^="he"] .room-card__name,
html[lang^="he"] .offer__name,
html[lang^="he"] .di-t,
html[lang^="he"] .loc__name{font-weight:600}
html[lang^="he"] em{font-style:normal}
/* Hebrew has no case, so text-transform does nothing and the wide Latin-label
   tracking only stretched the words, and it costs the line width the larger
   sizes now need. Trimmed to a hair here; the Latin pages keep their tracking. */
html[lang^="he"] .sec__eyebrow,
html[lang^="he"] .room-card__cta,
html[lang^="he"] .offer__cta,
html[lang^="he"] .cbtn,
html[lang^="he"] .cue-btn,
html[lang^="he"] .book-btn,
html[lang^="he"] .rmodal__book,
html[lang^="he"] .rmodal__amen-h,
html[lang^="he"] .mbook a,
html[lang^="he"] .foot-col h4,
html[lang^="he"] .badge,
html[lang^="he"] .sister__tag,
html[lang^="he"] .sfact span,
html[lang^="he"] .sister__facts span,
html[lang^="he"] .glow-line,
html[lang^="he"] .dotnav__label,
html[lang^="he"] .skip{letter-spacing:.05em}
html[lang^="he"] .hero__kicker{letter-spacing:.16em}
html[lang^="he"] .statement__inner p{line-height:1.35}

[dir="rtl"] .dotnav{direction:ltr}
[dir="rtl"] .dotnav__label{direction:rtl}
/* keep numerals / contacts in Latin LTR inside the RTL flow */
[dir="rtl"] .tel-link,
[dir="rtl"] .gal__count,
[dir="rtl"] .offer__pct,
[dir="rtl"] .loc__dist,
[dir="rtl"] .foot-col address a[href^="tel"]{direction:ltr; unicode-bidi:isolate}
/* NOTE on Latin brand phrases inside Hebrew prose ("ALL - Accor Live Limitless",
   "Sweet Bed by ibis"): normal bidi orders a single Latin run correctly, but if
   the phrase WRAPS mid-way its tail lands at the wrong edge of the RTL line.
   The phrases are bound with non-breaking spaces in the page copy instead, so
   they never split. No CSS needed, don't add direction/unicode-bidi here. */
[dir="rtl"] .loc__dist{text-align:left}
[dir="rtl"] .loc__bar i{background:linear-gradient(to left, var(--brass), var(--accent))}

/* ============================================================
   PER-HOTEL ACCENT
   ============================================================ */
/* --accent*  = this page's hotel.
   --sister*   = the OTHER hotel, used only by the cross-sell section.
   The -ink variants are the same colour darkened where needed to stay legible
   as text on white; ibis red already passes, the logo green does not. */
html[data-hotel="red"]{
  --accent:#E2231A;          /* brand fill                       */
  --accent-ink:#E2231A;      /* same colour as foreground text   */
  --accent-lit:#f0332a;
  --accent-soft:rgba(226,35,26,.12);
  --accent-glow:rgba(226,35,26,.45);

  --sister:#64B445;          /* ibis Styles green */
  --sister-ink:#467D30;
  --sister-lit:#75BF58;
  --sister-glow:rgba(100,180,69,.45);
}
html[data-hotel="styles"]{
  /* #64B445 is the exact green of assets/logo_ibis_green.png (84% of its
     pixels). White on it is 8.16:1 so it fills beautifully, but it is only
     2.57:1 AS text on white, so foreground text uses the same hue darkened
     to #467D30 (4.96:1). Same green, legible at 11px uppercase. */
  --accent:#64B445;
  --accent-ink:#467D30;
  --accent-lit:#75BF58;
  --accent-soft:rgba(100,180,69,.15);
  --accent-glow:rgba(100,180,69,.45);

  --sister:#E2231A;          /* ibis red */
  --sister-ink:#E2231A;
  --sister-lit:#f0332a;
  --sister-glow:rgba(226,35,26,.45);
}