/* Beit Max – landing page (cloned from Kfir Center). Mobile-first, RTL.
   Palette: dark graphite (structure + text), a little gold (icons/accents), cream (soft fills).
   Token names are kept from the Kfir clone: --navy = graphite, --teal = gold, --aqua = cream.
   Every size / colour below comes from the tokens in :root – do not add one-off values. */
:root {
  /* Colour – each token has one role */
  --navy: #1E1E20;          /* graphite: headings, body text, dark sections, primary dark button */
  --navy-700: #323235;      /* hover on graphite */
  --navy-900: #121213;      /* overlays (lightbox, menu backdrop) */
  --teal: #D2AC6E;          /* gold, on graphite only: icons, hover */
  --teal-ink: #1E1E20;      /* icons on light backgrounds = the site graphite (user 2026-10-12; was deep gold) */
  --logo-gold: #E2B475;     /* the exact gold of the Kfir logo – call buttons only (header circle + "חייגו לפרטים") */
  --logo-gold-700: #D2A25F; /* hover on logo gold */
  --aqua: #EFE6D5;          /* cream: soft buttons, icon chips, highlighted cards */
  --aqua-200: #E3D5BC;      /* hover on cream, inactive dots */
  --aqua-50: #F8F4EC;       /* light cream: alternate section background, input fill */
  --line: #E7DFD1;          /* hairlines */
  --muted: #5F5B54;         /* secondary text on light */
  --white: #fff;
  --on-dark: rgba(255,255,255,.8);    /* secondary text on navy */
  --free: #1E7A4C;          /* status "פנוי להשכרה" – text */
  --free-bg: #DFF3E7;       /* status "פנוי להשכרה" – fill */
  --occ: #B5463F;           /* status "מאוכלס" – text */
  --occ-bg: #FBE9E7;        /* status "מאוכלס" – fill */
  --error: #B03224;
  --error-bg: #FDF3F2;

  /* Type – one scale for the whole page */
  --fs-h1: clamp(2.25rem, 1.55rem + 3vw, 3.5rem);   /* 36 → 56 */
  --fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem); /* 28 → 44 */
  --fs-lg: 1.375rem;   /* 22 – menu links, confirmation title */
  --fs-md: 1.125rem;   /* 18 – lead paragraphs, card titles */
  --fs-base: 1rem;     /* 16 – body, lists, buttons */
  --fs-sm: .875rem;    /* 14 – labels, captions, notes */
  --fw-regular: 400;
  --fw-medium: 500;    /* every heading, name, label and button – the only other weight */
  --lh-tight: 1.15;
  --lh-snug: 1.45;
  --lh-body: 1.7;

  /* Layout */
  --r: 18px;          /* images, cards inside sections */
  --r-sm: 12px;       /* rows, inputs */
  --r-card: 24px;     /* section cards */
  --inset: 10px;      /* gap between section cards and the screen edge */
  --font: "Google Sans", "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --gutter: 20px;
  --hdr: 68px;
  --sec: 64px;         /* vertical section padding */
  --head-gap: 24px;    /* section heading block -> its content */
  --col-gap: 24px;     /* between the big blocks of a section (text / media / list) */
  --gap: 12px;         /* between repeated items: tiles, cards, gallery, buttons */
  --icon: 20px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; scrollbar-gutter: stable; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--white); color: var(--navy);
  font-family: var(--font); font-size: var(--fs-base); line-height: var(--lh-body); font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; color: var(--navy); }
h1, h2 { font-weight: var(--fw-medium); line-height: var(--lh-tight); letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); margin-bottom: 12px; }
h3 { font-size: var(--fs-md); font-weight: var(--fw-medium); line-height: var(--lh-snug); margin-bottom: 4px; }
p { margin: 0 0 16px; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.i { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 100; background: var(--navy); color: var(--white); padding: 10px 14px; border-radius: var(--r-sm); font-weight: var(--fw-medium); text-decoration: none; }
.skip:focus { top: 8px; }

/* Text roles */
.lead, .contact__intro > p { font-size: var(--fs-md); color: var(--muted); line-height: 1.6; }
.contact__intro > p:last-of-type { margin-bottom: 0; }
.sec-head { margin-bottom: var(--head-gap); }
.sec-head .lead { margin-bottom: 0; }
.adv__media img, .floors__media img, .contact__media img { width: 100%; height: 100%; object-fit: cover; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: 0 28px; border-radius: 999px; border: 0;
  font-size: var(--fs-base); font-weight: var(--fw-medium); line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn .i { font-size: 18px; }
.btn--block { display: flex; width: 100%; }
.btn--navy { background: var(--navy); color: var(--white); }
.btn--navy:hover { background: var(--navy-700); }
.btn--soft { background: var(--aqua); color: var(--navy); }
.btn--soft:hover { background: var(--aqua-200); }
.btn--call { background: var(--logo-gold); color: var(--navy); }   /* Kfir-logo gold: every "חייגו לפרטים" button, the lead form submit and the Waze button */
.btn--call:hover { background: var(--logo-gold-700); }

.rnd {
  width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center;
  border: 0; background: var(--aqua); color: var(--navy); font-size: 18px;
  transition: background-color .2s, color .2s;
}
.rnd:hover { background: var(--navy); color: var(--white); }
.rnd--light { background: rgba(255,255,255,.12); color: var(--white); }
.rnd--light:hover { background: rgba(255,255,255,.24); }

/* Header – navy, sticky. Menu on the right, Kfir + Medical logos centered, phone on the left. */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: calc(var(--hdr) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top);
  background: var(--navy); transition: box-shadow .3s;
}
.top.is-solid { box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.top__in { height: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.top__menu { justify-self: start; width: 44px; height: 44px; margin-inline-start: -10px; display: grid; place-items: center; border: 0; background: none; color: var(--white); font-size: 24px; border-radius: 50%; }
.top__menu:hover { background: rgba(255,255,255,.1); }
.top__logo { justify-self: center; display: block; }
.top__logo { text-decoration: none; }
.top__end { justify-self: end; display: flex; align-items: center; gap: 12px; }
.top__phone { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--logo-gold); color: var(--navy); text-decoration: none; transition: background-color .2s; }
.top__phone .i { font-size: var(--icon); }
.top__phone:hover { background: var(--logo-gold-700); }

/* Menu – full-width navy panel that drops down behind the header */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 45; max-height: 100dvh; overflow-y: auto;
  padding-top: calc(var(--hdr) + env(safe-area-inset-top) + 8px);
  background: var(--navy); color: var(--white); border-radius: 0 0 var(--r-card) var(--r-card);
  /* revealed top-to-bottom in place (no sliding), in step with the scrim */
  clip-path: inset(0 0 100% 0); opacity: 0; visibility: hidden;
  transition: clip-path .4s cubic-bezier(.3,.7,.3,1), opacity .4s ease, visibility 0s linear .4s;
}
.nav-open .nav { clip-path: inset(0 0 0 0); opacity: 1; visibility: visible; transition: clip-path .4s cubic-bezier(.3,.7,.3,1), opacity .25s ease; }
.nav__in { max-width: 1200px; margin-inline: auto; padding: 4px var(--gutter) calc(28px + env(safe-area-inset-bottom)); }
.nav-scrim { position: fixed; inset: 0; z-index: 44; background: rgba(18,18,19,.45); opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.nav-open .nav-scrim { opacity: 1; visibility: visible; transition: opacity .4s ease; }
html.nav-open { overflow: hidden; }
.nav__links { display: grid; }
.nav__links a { display: block; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); text-decoration: none; font-size: var(--fs-lg); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--white); transition: color .2s; }
.nav__links a:hover { color: var(--teal); }
.nav__foot { padding-top: 24px; display: grid; gap: 10px; }
.nav__foot p { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--on-dark); text-align: center; }

/* Hero – a large full-width image, then a navy band carrying the text */
.hero { margin-top: calc(var(--hdr) + env(safe-area-inset-top)); background: var(--navy); }
.hero__media { height: min(62svh, 560px); background: var(--aqua-50); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
/* Hero video – the source is 1080x1440 with a black strip under the picture (content = top 80% of every frame).
   The video is sized so the visible window only ever shows the picture area, on any screen shape. */
.hero__media { position: relative; overflow: hidden; }
.hero__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; transition: opacity .8s ease; }   /* fallback */
@supports (width: 1cqw) {
  .hero__media { container-type: size; }
  .hero__video {
    --vh: max(131cqh, 133.4cqw);            /* Beit Max video: picture = top 78.3% (black strip below) – tall enough to cover the box with margin, wide enough too */
    position: absolute; left: 50%; top: calc(50cqh - var(--vh) * .3915);
    width: auto; height: var(--vh); max-width: none; object-fit: fill; transform: translateX(-50%);
  }
}
.hero__video.is-ready { opacity: 1; }
.hero__title { color: var(--white); margin-bottom: 16px; }
.hero__sub { font-size: var(--fs-md); line-height: 1.6; color: var(--on-dark); max-width: 44ch; margin-bottom: 24px; }
.hero__addr { display: flex; line-height: var(--lh-snug); align-items: center; gap: 8px; margin: 16px 0 0; font-size: var(--fs-sm); color: var(--on-dark); }
.hero__addr .i { font-size: 18px; color: var(--teal); }

/* Tenants – large logos, side scrolling, Super-Pharm first */
.tenants { padding: var(--sec) 0; background: var(--aqua-50); }
.tenants__track {
  list-style: none; margin: 0; display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 2px var(--gutter) 8px; scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.tenants__track::-webkit-scrollbar { display: none; }
.tenant { flex: 0 0 78%; scroll-snap-align: start; background: var(--white); border-radius: var(--r); padding: 16px; }
.tenant__logo { height: 150px; display: grid; place-items: center; padding: 20px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.tenant__logo img { max-height: 84px; max-width: 100%; width: auto; height: auto; }
.tenant__txt { margin: 0 4px; color: var(--muted); }

/* About */
.facts { margin-top: 24px; }   /* key facts as icon tiles – live in the gallery section, under the images */
.gal .loc__list li { background: var(--white); }   /* white tiles on the light-aqua gallery card */
.gal .loc__ic { background: var(--aqua-50); }

/* Advantages – list beside an image */
.adv { padding: var(--sec) 0; background: var(--white); }
.adv__grid { display: grid; gap: var(--col-gap); }
.adv__media { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; background: var(--aqua); }
/* Accordion – one row per advantage, one open at a time */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__head { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.acc__head::-webkit-details-marker { display: none; }
.acc__head h3 { margin: 0; }
.acc__ic { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--aqua); transition: background-color .25s; }
.acc__ic::before, .acc__ic::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; border-radius: 2px; background: var(--navy); transition: transform .25s, background-color .25s; }
.acc__ic::after { transform: rotate(90deg); }
.acc__item[open] .acc__ic { background: var(--navy); }
.acc__item[open] .acc__ic::before, .acc__item[open] .acc__ic::after { background: var(--white); }
.acc__item[open] .acc__ic::after { transform: rotate(0); }
.acc__head:hover .acc__ic { background: var(--aqua-200); }
.acc__item[open] .acc__head:hover .acc__ic { background: var(--navy-700); }
.acc__body { margin: 0; padding: 0 0 20px; color: var(--muted); max-width: 52ch; }
.acc__item[open] .acc__body { animation: accIn .3s ease; }
@keyframes accIn { from { opacity: 0; } to { opacity: 1; } }

/* Floors */
.floors { padding: var(--sec) 0; background: var(--aqua-50); }
.floors__grid { display: grid; gap: var(--col-gap); }
.floors__media { border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 10; background: var(--aqua); }
/* Floors image – slides crossfade on their own */
.slides { position: relative; }
.slides .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.slides .slide.is-on { opacity: 1; }
.stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stack__row { display: grid; grid-template-columns: 100px 1fr; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-sm); background: var(--white); }
.stack__fl { font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--navy); text-align: center; padding: 6px 0; border-radius: 8px; background: var(--aqua-50); }
.stack__row strong { display: block; font-size: var(--fs-base); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--navy); }
.stack__row div > span { font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--muted); }

/* Floor status tags (under each floor label) + tenant logos */
.stack__side { display: grid; gap: 8px; }
.stack__row .status { display: block; text-align: center; padding: 6px 0; border-radius: 8px; font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); white-space: nowrap; }
.stack__row .status--free { color: var(--white); background: var(--free); }   /* available = solid green, stands out; occupied stays soft */
/* a soft shine sweeps across "פנוי להשכרה" every few seconds – motion draws the eye to the available floors */
.stack__row .status--free { position: relative; overflow: hidden; }
.stack__row .status--free::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%); transform: skewX(-18deg); animation: freeShine 3.2s ease-in-out infinite; pointer-events: none; }
.stack__row:nth-child(2) .status--free::after { animation-delay: .35s; }
@keyframes freeShine { 0%, 55% { left: -60%; } 85%, 100% { left: 120%; } }
@media (prefers-reduced-motion: reduce) { .stack__row .status--free::after { animation: none; display: none; } }
.stack__row .status--occ { color: var(--occ); background: var(--occ-bg); }
.stack__logo { display: block; height: 30px; width: auto; max-width: 100%; margin-bottom: 6px; }

/* Gallery – side-scrolling cards with title + text under each image */
.gal { padding: var(--sec) 0; background: var(--aqua-50); }
.gal__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: var(--head-gap); }
.gal__head h2 { margin-bottom: 0; }
.gal__nav { display: flex; gap: 8px; flex: none; }
.gal__nav .rnd { background: var(--white); }
.gal__nav .rnd:hover { background: var(--navy); }
.gal__track {
  display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 2px var(--gutter) 8px; scroll-padding-inline: var(--gutter);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.gal__track::-webkit-scrollbar { display: none; }
.gal__item { flex: 0 0 88%; scroll-snap-align: start; }
.gal__btn { display: block; width: 100%; padding: 0; border: 0; background: var(--aqua); border-radius: var(--r); overflow: hidden; aspect-ratio: 1 / 1; }
.gal__btn img { width: 100%; height: 100%; object-fit: cover; }
.gal__item figcaption { padding: 16px 2px 0; }
.gal__item p { margin: 0; color: var(--muted); }
.dots { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
.dots span { width: 6px; height: 6px; border-radius: 99px; background: var(--aqua-200); transition: width .3s, background-color .3s; }
.dots span.on { width: 22px; background: var(--navy); }
.note { text-align: center; line-height: var(--lh-snug); font-size: var(--fs-sm); color: var(--muted); margin: 16px 0 0; }

/* Location */
.loc { padding: var(--sec) 0; background: var(--aqua-50); }
.loc .loc__list li { background: var(--white); }   /* white tiles on the light-aqua card */
.loc .loc__ic { background: var(--aqua-50); }
.loc__grid { display: grid; gap: var(--col-gap); }
.loc__body .loc__list { margin-top: 0; }
.loc__addr { display: flex; align-items: center; gap: 8px; margin: 0; line-height: var(--lh-snug); font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--navy); }
.loc__addr .i { font-size: var(--icon); color: var(--teal-ink); }
/* Location highlights – four tiles with an icon each */
.loc__list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.loc__list li { display: grid; gap: 2px; align-content: start; padding: 16px; border-radius: var(--r); background: var(--aqua-50); }
.loc__ic { width: 40px; height: 40px; margin-bottom: 10px; display: grid; place-items: center; border-radius: 50%; background: var(--white); color: var(--teal-ink); font-size: var(--icon); }
.loc__list strong { font-size: var(--fs-base); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--navy); }
.loc__list li > span:last-child { font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--muted); }
.contact .loc__list li { background: var(--white); }   /* on the light-aqua card the tiles turn white */
.contact .loc__ic { background: var(--aqua-50); }
.loc__btns { display: flex; gap: var(--gap); margin-top: 24px; }
.loc__btns .btn { padding: 0 12px; }
/* Map – Google colours; our own large blue pin on the exact address; tap opens Google Maps (map fixed so the pin stays on target) */
.loc__map { position: relative; display: block; border-radius: var(--r); overflow: hidden; background: var(--aqua); aspect-ratio: 4 / 3; }
.loc__map iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
.loc__pin { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -85%); color: var(--navy); font-size: 64px; line-height: 0; pointer-events: none;
  filter: drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff); }   /* thin white outline so it reads on any map colour */
.loc__pin svg { width: 1em; height: 1em; display: block; }


/* Professionals – navy band with the doctors cut-out standing on its bottom edge */
.pros { background: var(--navy); color: var(--white); padding-top: var(--sec); overflow: hidden; }
.pros__grid { display: grid; gap: var(--col-gap); }
.pros h2 { color: var(--white); margin-bottom: 24px; }
.pros__media { align-self: end; margin-inline: -8px; }
.pros__media img { width: 100%; max-width: 620px; margin-inline: auto; }

/* Contact */
.contact { padding: var(--sec) 0; background: var(--aqua-50); }
.contact__grid { display: grid; gap: var(--col-gap); }
.contact__media { border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 10; background: var(--aqua); }
.contact__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap) 20px; margin-top: 24px; }
.contact__cta .btn { flex: 1 1 100%; }

/* Lead form – navy card before the footer; white fields, aqua submit (the "on navy" button) */
[hidden] { display: none !important; }
.leadf { margin: 0 var(--inset) var(--inset); border-radius: var(--r-card); background: var(--navy); color: var(--white); padding: var(--sec) 0; }
.leadf h2 { color: var(--white); }
.leadf__grid { display: grid; gap: var(--col-gap); }
.leadf__text p { margin: 0; font-size: var(--fs-md); line-height: 1.6; color: var(--on-dark); }
.leadf :focus-visible { outline-color: var(--teal); }
.form { display: grid; gap: var(--gap); }
.field label { display: block; margin-bottom: 6px; font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--on-dark); }
.field label span { font-weight: var(--fw-regular); }
.field input {
  width: 100%; min-height: 52px; padding: 0 16px; border: 0; border-radius: var(--r-sm);
  background: var(--white); color: var(--navy); font: inherit; font-size: var(--fs-base); line-height: var(--lh-snug);
}
.field input::placeholder { color: var(--muted); opacity: .75; }
.field input:focus { outline: 2px solid var(--teal); outline-offset: 2px; }
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--error); }
.field input[type="tel"] { direction: ltr; text-align: right; }   /* +972 / dashes stay in order, aligned like the other fields */
.form__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form .btn { margin-top: 12px; }
.form__err { margin: 0; padding: 10px 16px; border-radius: var(--r-sm); background: var(--error-bg); color: var(--error); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.form__note { margin: 0; text-align: center; font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--on-dark); }
.form__done { padding: 24px 0; text-align: center; }
.form__done:focus { outline: none; }
.form__ok { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 50%; background: var(--aqua); color: var(--navy); font-size: 26px; }
.form__ok .i { stroke-width: 2.2; }
.form__title { margin: 0 0 4px; font-size: var(--fs-lg); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.form__done p:last-child { margin: 0; color: var(--on-dark); }

/* Footer */
.foot { background: var(--navy); line-height: var(--lh-snug); color: var(--on-dark); padding: 40px 0 120px; text-align: center; font-size: var(--fs-sm); }
.foot__in .lockup { margin-bottom: 16px; }
.foot p { margin: 0 0 4px; }
.foot__small { color: var(--on-dark); }
.foot__legal { max-width: 640px; margin: 20px auto 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); display: grid; gap: 6px; }
.foot__legal p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--on-dark); }

/* Sticky bottom bar */
.bar {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: flex; gap: 10px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--white); box-shadow: 0 -1px 0 var(--line);
  transform: translateY(110%); transition: transform .35s ease;
}
.bar.is-on { transform: none; }
.bar .btn { flex: 1 1 0; padding: 0 14px; }

/* Lightbox */
.lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(18,18,19,.97); color: var(--white); overflow: hidden; }
.lb::backdrop { background: rgba(18,18,19,.9); }
.lb[open] { display: flex; flex-direction: column; }
.lb__top { display: flex; align-items: center; justify-content: space-between; padding: calc(12px + env(safe-area-inset-top)) var(--gutter) 8px; }
.lb__count { font-size: var(--fs-sm); color: var(--on-dark); font-variant-numeric: tabular-nums; }
.lb__track { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.lb__track::-webkit-scrollbar { display: none; }
.lb__item { flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px var(--gutter) calc(20px + env(safe-area-inset-bottom)); }
.lb__item img { max-width: 100%; max-height: calc(100dvh - 190px); object-fit: contain; border-radius: var(--r-sm); }
.lb__item figcaption { margin-top: 16px; text-align: center; max-width: 560px; }
.lb__item figcaption strong { display: block; font-size: var(--fs-md); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.lb__item figcaption span { font-size: var(--fs-sm); color: var(--on-dark); }
.lb__arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%); }
.lb__arrow--prev { inset-inline-start: 20px; }
.lb__arrow--next { inset-inline-end: 20px; }

/* Calm reveal */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* Kfir + Medical logo lockup (Kfir on the right) – used on navy only */
.lockup { display: inline-flex; align-items: center; gap: 12px; direction: rtl; }
.lockup img { width: auto; display: block; }
.lockup__sep { width: 1px; align-self: center; background: rgba(255,255,255,.3); }
.lockup--top .lockup__kfir { height: 30px; }
.lockup--top .lockup__med { height: 14px; }
.lockup--top .lockup__sep { height: 22px; }
.lockup--lg { gap: 20px; margin-bottom: 24px; }
.lockup--lg .lockup__kfir { height: 52px; }
.lockup--lg .lockup__med { height: 25px; }
.lockup--lg .lockup__sep { height: 40px; }
.lockup--foot { gap: 16px; }
.lockup--foot .lockup__kfir { height: 40px; }
.lockup--foot .lockup__med { height: 19px; }
.lockup--foot .lockup__sep { height: 30px; }

/* Rounded section cards – coloured sections float as soft cards on the white page */
.tenants, .loc, .gal, .floors, .pros, .contact, .foot { margin-inline: var(--inset); border-radius: var(--r-card); overflow: hidden; }
/* Hero – the video in a rounded card, inset like the other sections, below the header (text lives in .intro) */
.hero { position: relative; margin: calc(var(--hdr) + env(safe-area-inset-top) + var(--inset)) var(--inset) 0; height: max(380px, min(62svh, 560px)); border-radius: var(--r-card); overflow: hidden; background: var(--navy); }
.hero__media { position: absolute; inset: 0; height: auto; }
/* Intro – heading + texts on their own dark card under the video */
.intro { margin: var(--inset) var(--inset) 0; border-radius: var(--r-card); background: var(--navy); color: var(--white); }
.intro__body { padding-top: 40px; padding-bottom: 40px; }
.tenants { margin-top: var(--inset); }
.top { border-radius: 0 0 var(--r-card) var(--r-card); }
.tenants, .loc, .gal, .floors, .pros, .contact { margin-block: var(--inset); }
.foot { padding-bottom: 40px; margin-bottom: calc(var(--inset) + 76px + env(safe-area-inset-bottom)); }
.bar { inset: auto var(--inset) calc(var(--inset) + env(safe-area-inset-bottom)) var(--inset); padding: 6px; border-radius: 999px; box-shadow: 0 0 0 1px var(--line); transform: translateY(160%); }
@media (min-width: 600px) {
  :root { --gutter: 28px; }
  .gal__item { flex-basis: 70%; }
  .gal__btn { aspect-ratio: 4 / 3; }
  .loc__btns { display: flex; flex-wrap: wrap; }
}

/* ≥ 960px – desktop: everything sits in one centred frame (max 1320px) */
@media (min-width: 960px) {
  :root {
    --hdr: 72px; --gutter: 48px; --sec: 104px; --inset: 20px; --r-card: 32px;
    --head-gap: 36px; --col-gap: 72px; --gap: 16px;
    --frame: 1320px;
    --side: max(var(--inset), calc((100vw - var(--frame)) / 2));   /* outer margin of every card */
    --top-gap: 14px;                                               /* header floats this far from the top */
  }
  html { scroll-padding-top: calc(var(--hdr) + var(--top-gap) + 16px); }

  /* Header – a floating rounded bar aligned with the cards */
  .top { top: var(--top-gap); left: var(--side); right: var(--side); height: var(--hdr); padding-top: 0; border-radius: 999px; }
  .top.is-solid { box-shadow: none; }
  .top__in { max-width: none; padding-inline: 14px; }
  .top__menu { margin-inline-start: 0; }
  .nav { padding-top: calc(var(--hdr) + var(--top-gap) * 2 + 12px); }
  .nav__links { grid-template-columns: repeat(3, 1fr); column-gap: 48px; }
  .nav__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .nav__foot .btn { display: inline-flex; width: auto; }
  .nav__foot p { margin: 0; }
  .lockup--top .lockup__kfir { height: 38px; }
  .lockup--top .lockup__med { height: 18px; }
  .lockup--top { gap: 18px; }
  .lockup--top .lockup__sep { height: 28px; }

  /* Cards share the same frame */
  .tenants, .loc, .gal, .floors, .pros, .contact, .foot { margin-inline: var(--side); }

  /* Hero – video card aligned with the frame, under the floating header; the intro card peeks in below */
  .hero { margin: calc(var(--hdr) + var(--top-gap) * 2) var(--side) 0; height: clamp(420px, calc(100svh - var(--hdr) - var(--top-gap) * 2 - 150px), 720px); }
  .intro { margin-inline: var(--side); }
  .intro__body { display: grid; grid-template-columns: 1.15fr 1fr; column-gap: 72px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
  .intro .hero__title { grid-row: span 2; margin: 0; }
  .intro .hero__sub { margin: 0; }
  .intro .hero__addr { margin-top: 16px; }

  /* Tenants – four logos in one row, no scrolling needed */
  .tenants .gal__nav { display: none; }
  .tenants__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; overflow: visible; max-width: 1200px; margin-inline: auto; padding: 0 var(--gutter); }
  .tenant { flex: none; }
  .tenant__logo { height: 170px; }
  .tenant__logo img { max-height: 92px; }

  /* About – one calm image beside the text */

  .adv__grid { grid-template-columns: 1fr 1fr; gap: var(--col-gap); align-items: stretch; }
  .adv__media { order: 2; aspect-ratio: auto; height: 100%; min-height: 460px; }
  .acc__head { padding: 18px 0; }

  .floors__grid { grid-template-columns: 1fr 1fr; gap: var(--col-gap); align-items: center; }
  .stack__row { grid-template-columns: 116px 1fr; padding: 16px 20px; }

  /* Gallery – the track lines up with the frame inside its card */
  .gal__track { padding-inline: max(var(--gutter), calc((100% - 1200px) / 2 + var(--gutter))); scroll-padding-inline: max(var(--gutter), calc((100% - 1200px) / 2 + var(--gutter))); gap: 24px; }
  .gal__item { flex-basis: calc((min(100%, 1200px) - 2 * var(--gutter) - 24px) / 2); }
  .gal__btn { aspect-ratio: 3 / 2; }

  .gal .facts { grid-template-columns: repeat(4, 1fr); }
  .loc__grid { grid-template-columns: 1fr 1.2fr; grid-template-areas: "head map" "body map"; column-gap: var(--col-gap); row-gap: var(--col-gap); align-items: start; }
  .loc__head { grid-area: head; align-self: end; }
  .loc__body { grid-area: body; }
  .loc__map { grid-area: map; align-self: center; }
  .pros__grid { grid-template-columns: 1fr 1.1fr; gap: var(--col-gap); align-items: center; }
  .pros__text { padding-bottom: var(--sec); }
  .pros__media { align-self: end; margin: 0; }
  .contact__grid { grid-template-columns: 1fr 1fr; gap: var(--col-gap); align-items: center; }
  .contact__media { order: 2; aspect-ratio: 5 / 4; }
  .contact__cta .btn { flex: 0 0 auto; }
  .leadf { margin-inline: var(--side); }
  .leadf__grid { grid-template-columns: 1fr 1fr; align-items: center; }
  .form { grid-template-columns: 1fr 1fr; }
  .form > :not(.field), .field--wide { grid-column: 1 / -1; }
  .foot { margin-bottom: var(--inset); }

  /* Desktop: the floating header already carries the phone circle, so the bottom call bar is mobile-only */
  .bar { display: none; }
  .lb__arrow { display: inline-grid; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Call button (bottom) – navy with light text; the icon rings softly every few seconds */
.bar { background: var(--white); }
.bar .btn--call .i { color: var(--navy); }
.ring { transform-origin: 50% 50%; animation: ring 4.5s ease-in-out infinite; }
@keyframes ring {
  0%, 82%, 100% { transform: rotate(0); }
  85% { transform: rotate(-14deg); }
  88% { transform: rotate(12deg); }
  91% { transform: rotate(-10deg); }
  94% { transform: rotate(6deg); }
  97% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .ring { animation: none; } }
.nowrap { white-space: nowrap; }

/* Entry screen – Kfir + Medical logos, calm and large; hides itself even without JS */
.splash { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--navy); animation: splashOut .6s ease 2.3s forwards; }
.splash-seen .splash { display: none; }
.splash__in { display: flex; align-items: center; gap: 18px; direction: rtl; }
.splash__kfir { height: clamp(56px, 15vw, 116px); width: auto; opacity: 0; transform: translateY(12px) scale(.96); animation: splashRise .9s cubic-bezier(.2,.7,.2,1) .15s forwards; }
.splash__sep { width: 1.5px; height: clamp(46px, 12vw, 92px); background: rgba(255,255,255,.35); transform: scaleY(0); animation: splashLine .5s ease .75s forwards; }
.splash__med { height: clamp(24px, 7vw, 52px); width: auto; opacity: 0; transform: translateX(-14px); animation: splashSlide .8s cubic-bezier(.2,.7,.2,1) .95s forwards; }
.splash.is-out { animation: splashOut .45s ease forwards; }
@keyframes splashRise { to { opacity: 1; transform: none; } }
@keyframes splashLine { to { transform: scaleY(1); } }
@keyframes splashSlide { to { opacity: 1; transform: none; } }
@keyframes splashOut { to { opacity: 0; visibility: hidden; } }
@media (min-width: 960px) { .splash__in { gap: 28px; } }
@media (prefers-reduced-motion: reduce) {
  .splash { animation: splashOut .4s ease .6s forwards !important; }
  .splash__kfir, .splash__sep, .splash__med { animation: none !important; opacity: 1; transform: none; }
}

/* Address – one emphasised component everywhere (intro card, location, menu, footer) */
.addr { display: flex; align-items: center; gap: 10px; font-size: var(--fs-base); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.addr__pin { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 15px; }
.addr--dark { color: var(--white); }
.addr--dark .addr__pin { background: var(--teal); color: var(--navy); }
.addr--light { color: var(--navy); }
.addr--light .addr__pin { background: var(--navy); color: var(--white); }
.loc__addr.addr { font-size: var(--fs-base); }
.hero__addr.addr { margin-top: 18px; }
.nav__foot .addr, .foot .addr { justify-content: center; margin: 8px 0; font-size: var(--fs-base); color: var(--white); }
.addr .addr__pin .i { color: inherit; font-size: inherit; }   /* override the older per-section pin colours */

/* Beit Max logo (replaces Medical) – Hebrew wordmark needs more height than the Latin one */
.lockup--top .lockup__med { height: 22px; }
.lockup--lg .lockup__med { height: 38px; }
.lockup--foot .lockup__med { height: 28px; }
.splash__med { height: clamp(36px, 11vw, 78px); }
@media (min-width: 960px) { .lockup--top .lockup__med { height: 26px; } }

/* Accessibility button (a11y.php): on mobile it sits above the sticky call bar instead of covering it */
@media (max-width: 959px) { html #vnacc-btn { bottom: calc(var(--inset) + 76px + env(safe-area-inset-bottom)) !important; } }

/* Accessibility statement page (accessibility.php) – one light card under the header, same type scale */
.doc { margin: calc(var(--hdr) + env(safe-area-inset-top) + var(--inset)) var(--inset) var(--inset); padding: var(--sec) 0; border-radius: var(--r-card); background: var(--aqua-50); }
.doc__in { max-width: 760px; }
.doc h1 { font-size: var(--fs-h2); margin-bottom: var(--head-gap); }
.doc h2 { font-size: var(--fs-lg); line-height: var(--lh-snug); letter-spacing: 0; margin: 40px 0 12px; }
.doc ul { margin: 0 0 16px; padding-inline-start: 20px; }
.doc li { margin-bottom: 4px; }
.doc__contact { display: grid; gap: var(--gap); margin-top: 8px; padding: 20px; border-radius: var(--r); background: var(--white); }
.doc__contact strong { font-weight: var(--fw-medium); }
.doc__contact a { display: inline-flex; align-items: center; gap: 12px; font-weight: var(--fw-medium); text-decoration: none; justify-self: start; }
.doc__contact a:hover span[dir] { text-decoration: underline; }
.doc .loc__ic { margin: 0; background: var(--aqua-50); }
.doc__upd { margin: 40px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.foot__small a { color: var(--white); }
.doc ~ .foot { margin-bottom: var(--inset); }   /* no call bar on the statement page */
@media (min-width: 960px) { .doc { margin: calc(var(--hdr) + var(--top-gap) * 2) var(--side) var(--inset); } }
.form__note a { color: var(--white); }
.foot__nav { margin-top: 6px; } .foot__nav a { white-space: nowrap; }

/* Accessibility button: hidden at the top, slides in with the call bar once the visitor scrolls.
   Always shown while it has keyboard focus or its panel is open. Only on the landing page (html.js). */
html.js #vnacc-btn { opacity: 0 !important; transform: translateY(160%) !important; pointer-events: none !important; transition: transform .35s ease, opacity .35s ease !important; }
html.js.is-scrolled #vnacc-btn, html.js #vnacc-btn:focus-visible, html.js #vnacc-btn[aria-expanded="true"] { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }