/* ---------------------------------------------------------
   Let's Travel — Hero Section
   Colors sampled from the Figma export (Frame 51 reference):
   - Navy nav pill / dark accents:  #29456D
   - Mid navy (icon circles):       #496184
   - Light blue (CTA pill):         #7FA8DD → #C3D8EF gradient
   - Sky gradient (bg):             #021E4D → #E9ECF6
--------------------------------------------------------- */

/* Polin — full family (Hairline → Black) */
@font-face { font-family: "Polin"; src: url("../assets/fonts/Polin-Hairline.woff2") format("woff2"), url("../assets/fonts/Polin-Hairline.woff") format("woff"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Polin"; src: url("../assets/fonts/Polin-Thin.woff2") format("woff2"), url("../assets/fonts/Polin-Thin.woff") format("woff"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Polin"; src: url("../assets/fonts/Polin-Extralight.woff2") format("woff2"), url("../assets/fonts/Polin-Extralight.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Polin"; src: url("../assets/fonts/Polin-Light.woff2") format("woff2"), url("../assets/fonts/Polin-Light.woff") format("woff"); font-weight: 350; font-style: normal; font-display: swap; }
@font-face { font-family: "Polin"; src: url("../assets/fonts/Polin-Regular.woff2") format("woff2"), url("../assets/fonts/Polin-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Polin"; src: url("../assets/fonts/Polin-Medium.woff2") format("woff2"), url("../assets/fonts/Polin-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Polin"; src: url("../assets/fonts/Polin-Semibold.woff2") format("woff2"), url("../assets/fonts/Polin-Semibold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Polin"; src: url("../assets/fonts/Polin-Bold.woff2") format("woff2"), url("../assets/fonts/Polin-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Polin"; src: url("../assets/fonts/Polin-Extrabold.woff2") format("woff2"), url("../assets/fonts/Polin-Extrabold.woff") format("woff"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Polin"; src: url("../assets/fonts/Polin-Black.woff2") format("woff2"), url("../assets/fonts/Polin-Black.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  --navy-deep: #0a2a55;
  --navy: #29456d;
  --navy-mid: #496184;
  --blue-light: #88b2e0;
  --blue-pill-from: #c7dcf3;
  --blue-pill-to: #7da6da;
  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, 0.82);
  --ink-faint: rgba(255, 255, 255, 0.6);

  --font-base: "Polin", "Heebo", "Segoe UI", Tahoma, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
}

body {
  font-family: var(--font-base);
  color: var(--ink);
  background: var(--navy-deep);
  direction: rtl;
}

/* ---------------------------------- Hero shell ---------------------------------- */

/* Provides the scroll distance (600 px) over which hero text animates out.
   The hero itself becomes sticky so it stays in view while the user scrolls
   through the track; progress (0→1) is computed from scrollY in script.js. */
.hero-scroll-track {
  height: calc(100vh + 9350px); /* +1800 for articles section 12 (fade-in + hold + fade-out) */
}

/* Plane + clouds — hidden on mobile, positioned on desktop */
.hero__plane,
.hero__clouds-right,
.hero__clouds-left1,
.hero__clouds-left2,
.hero__clouds-left-front {
  display: none;
}


.hero {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: white;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../assets/images/hero-sky-bg.png");
  background-size: cover;
  background-position: center;
}

/* Phase 3 — day sky crossfade (fades in as globe exits) */
.hero__bg-day {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../assets/images/hero-sky-bg-day.png");
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: opacity, clip-path;
}

/* Phase 7 — left-panel background (hidden on mobile, sized to left 50% on desktop) */
.hero__bg-left {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  z-index: 0;
  background-image: url("../assets/images/hero-left-panel.png");
  background-size: cover;
  background-position: center;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  opacity: 0;
  will-change: opacity, transform;
}


/* Phase 8 — content wrapper */
.hero__section8 {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
  direction: rtl;
}

/* Phase 7 — burger button (hidden until desktop + phase 7) */
.hero__burger {
  display: none;
  position: absolute;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  will-change: opacity;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
}

.hero__burger img {
  display: block;
  height: 100%;
  width: auto;
}

/* Logo crossfade */
.stage-logo {
  position: relative;
}

.stage-logo__light,
.stage-logo__dark {
  display: block;
  width: 100%;
  height: auto;
}

.stage-logo__dark {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity;
}

/* Subtle vignette so foreground text stays legible over the starfield */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 90% at 50% 100%,
    rgba(10, 30, 65, 0) 0%,
    rgba(6, 20, 48, 0.35) 100%
  );
}

.hero__globe {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: transform;
}

#globe-canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: auto; /* re-enable hit-testing despite .hero__globe's pointer-events:none */
}

/* ── Globe hover tooltip ──────────────────────────────────────────── */
.globe-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -130%);
  z-index: 7;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(10, 30, 65, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-family: "Polin", "Heebo", sans-serif;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* ── Globe destinations panel ─────────────────────────────────────── */
.globe-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  z-index: 15; /* above .stage-nav (11) and .hero__burger (10) so its tabs are clickable */
  background: rgba(8, 22, 48, 0.96);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  direction: rtl;
}

.globe-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.globe-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.globe-panel__tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.globe-panel__tab {
  font-family: "Polin", "Heebo", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.globe-panel__tab:hover {
  color: #ffffff;
}

.globe-panel__tab.is-active {
  background: #4fb3d9;
  border-color: #4fb3d9;
  color: #0a1e41;
}

.globe-panel__close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Polin", "Heebo", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #0a1e41;
  background: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
}

.globe-panel__close-x {
  font-size: 18px;
  line-height: 1;
}

.globe-panel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  overflow-y: auto;
}

.globe-panel__card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.globe-panel__card img,
.globe-panel__card-placeholder {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  background: rgba(255, 255, 255, 0.06);
}

.globe-panel__card-title {
  font-family: "Polin", "Heebo", sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
  margin: 14px 16px 4px;
}

.globe-panel__card-text {
  font-family: "Polin", "Heebo", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 16px 16px;
  line-height: 1.4;
}

/* ---------------------------------- Stage (mobile-first flow layout) ----------------------------------
   .hero__stage holds every piece of foreground content. By default it flows as a centered column
   (flex `order` controls the reading sequence); the desktop media query below switches it to an
   absolutely-positioned layout pixel-mapped from the 1920x1080 design frame. */

.hero__stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  min-height: 100%;
  padding: 24px 20px clamp(120px, 22vh, 180px);
}

.stage-logo {
  display: inline-flex;
  order: -4;
}

.stage-logo img {
  display: block;
  height: 30px;
  width: auto;
}

/* ---- Nav pill ---- */

.stage-nav {
  order: -3;
  position: relative;
  z-index: 11; /* stays above .hero__section8 (6) when force-reopened via the burger toggle */
}

.nav-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  background: #FFFFFF26;
  border: 1px solid #FFFFFF33;
  backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 6px;
}

.nav-pill__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  padding: 12px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.nav-pill__link:hover {
  color: var(--ink);
}

.nav-pill__item--active .nav-pill__link {
  background: #FFFFFF26;
  border: 1px solid #FFFFFF33;
  backdrop-filter: blur(50px);
  color: var(--ink);
}

.chevron {
  width: 0.729vw;   /* 14px */
  height: 0.833vh;  /* 9px */
  color: currentColor;
  opacity: 0.8;
  transition: transform 0.2s ease;
}

.nav-pill__item--dropdown {
  position: relative;
}

.nav-pill__link[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.nav-pill__submenu {
  display: none;
  list-style: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: rgba(10, 30, 65, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  padding: 8px;
  z-index: 20;
}

.nav-pill__link[aria-expanded="true"] + .nav-pill__submenu {
  display: block;
}

.nav-pill__submenu li + li {
  margin-top: 2px;
}

.nav-pill__submenu a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-pill__submenu a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--ink);
}

/* ---- Glass / frosted-glass buttons ----
   Anatomy (from the Figma redline): a translucent rounded pill with a circular icon
   inset near its visual-LEFT edge and the label filling the space to its right —
   in RTL flex flow the label (first in markup) lands on the right, the circle on the left. */

.glass-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 60px;
  padding: 0 22px 0 5px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(50px);
  color: var(--ink);
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
}

/* Phase 10 — dark filled state for צרו קשר */
.glass-btn--dark {
  background: #1E2735;
  border-color: #1E2735;
  color: #ffffff;
  backdrop-filter: none;
}
.glass-btn--dark .glass-btn__circle {
  background: #ffffff;
  border-color: #ffffff;
  color: #1E2735;
}

.glass-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

.glass-btn__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--ink);
}

.glass-btn__circle img {
  display: block;
  width: 11px;
  height: 11px;
}

.stage-contact {
  order: -2;
}

.stage-cta {
  order: 2;
  display: flex;
  align-self: flex-start;
}

/* ---- Headline / paragraph ---- */

.stage-title {
  will-change: transform, opacity;
  order: 1;
  align-self: flex-end;
  text-align: end;
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

.stage-title span {
  display: block;
  margin-bottom: -0.1em;
}

.stage-paragraph {
  will-change: transform, opacity;
  order: 0;
  align-self: flex-start;
  width: 100%;
  max-width: 360px;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink-soft);
  text-align: right;
}

.brand-mark {
  font-weight: 400;
  color: var(--ink);
}

/* ---- Rotate hint ---- */

.stage-rotate-hint {
  will-change: transform, opacity;
  order: 3;
  position: absolute;
  bottom: clamp(28px, 5vh, 56px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--ink-faint);
  text-align: center;
}

.rotate-hint__icon {
  display: inline-flex;
}

.rotate-hint__icon img {
  display: block;
}

.rotate-hint__text {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #ffffff;
}

/* ---- Plane-section text layers — hidden on mobile, positioned on desktop ---- */
.hero__plane-title,
.hero__plane-pills,
.hero__plane-para {
  display: none;
  position: absolute;
  pointer-events: none;
  direction: rtl;
}

/* ---------------------------------- Desktop: pixel-mapped absolute layout ----------------------------------
   The hero is locked to `height: 100vh` so it always fits the screen with no cut-off content.
   Horizontal values are the Figma px divided by the 1920px reference width, expressed in vw
   (vw = px / 1920 * 100); vertical values are divided by the 1080px reference height and
   expressed in vh (vh = px / 1080 * 100) — that decoupling is what keeps every element inside
   the viewport regardless of its aspect ratio, instead of overflowing on wider/shorter screens. */

@media (min-width: 861px) {
  .hero__stage {
    position: absolute;
    inset: 0;
    display: block;
    min-height: 0;
    padding: 0;
    z-index: 9;
    pointer-events: none;
  }

  .hero__stage > * {
    position: absolute;
    pointer-events: auto;
  }

  /* Logo, nav and contact button all share the same row: top:50 / height:60 — each one's own
     "top" only differs because it's vertically centered within that 60px-tall band by its own
     height (e.g. the 38px-tall logo sits at top:61 = 50 + (60-38)/2). */

  .stage-logo {
    top: 5.648vh;   /* 61px */
    left: 86.406vw; /* 1659px */
    width: 9.323vw; /* 179px */
  }

  .stage-logo img {
    width: 100%;
    height: auto;
    display: block;
  }

  .stage-nav {
    top: 4.63vh;     /* 50px */
    left: 52.656vw;  /* 1011px — back to Figma spec, aligned with burger + pills row */
    width: 31.146vw; /* 598px */
    height: 5.556vh; /* 60px */
  }

  .nav-pill {
    width: 100%;
    height: 100%;
    justify-content: center;
  }

  .nav-pill__link {
    font-size: 1.667vh; /* 18px */
    padding: 1.2vh 0.833vw; /* 16px horizontal — was 22px, tightens spacing between labels evenly */
  }

  .nav-pill__item--active .nav-pill__link {
    min-width: 4.583vw;  /* 88px  (Rectangle 14) */
    min-height: 4.63vh;  /* 50px */
    border-radius: 999px;
    justify-content: center;
  }

  .glass-btn {
    height: 5.556vh;         /* 60px */
    padding: 0 1.667vw 0 0.208vw; /* right:32px start-edge(label side) / left:4px end-edge(circle side) — +1px border = 5px to outer edge, centering the 50px circle in the 60px-tall rounded cap */
    gap: 0.833vw;            /* 16px between circle and label */
    border-radius: 999px;
    font-size: 1.667vh;      /* 18px */
  }

  .glass-btn__circle {
    width: 4.63vh;  /* 50px */
    height: 4.63vh;
  }

  .stage-contact {
    top: 4.63vh;   /* 50px */
    left: 4.167vw; /* 80px */
  }

  .hero__globe {
    inset: auto;
    top: 13.889vh; /* 150px — centers the globe vertically: (1080-780)/2 */
    left: 50%;
    transform: translateX(-50%);
    width: min(41.0vw, 72.25vh);
    height: min(41.0vw, 72.25vh);
  }

  .stage-title {
    top: 70.370vh;    /* 760px */
    left: 66.406vw;   /* 1275px */
    width: 29.948vw;  /* 575px */
    height: 25.926vh; /* 280px = 2 × line-height */
    text-align: right;
    font-family: "Polin", "Heebo", sans-serif;
    font-size: 14.815vh;   /* 160px */
    line-height: 12.963vh; /* 140px */
    font-weight: 700;
    letter-spacing: 0;
    pointer-events: none;
  }

  .stage-paragraph {
    top: 77.778vh;   /* 840px */
    left: 4.167vw;   /* 80px */
    width: 16.51vw;  /* 317px */
    max-width: none;
    font-size: 1.852vh;   /* 20px */
    line-height: 2.593vh; /* 28px */
  }

  .stage-cta {
    top: 87.407vh;    /* 944px */
    right: 78.2vw;
  }

  .stage-rotate-hint {
    /* Icon (top: 941, w/h 42) and text (top: 983, w 165) are both centered on x≈960 —
       the horizontal midpoint of the 1920px frame — and stacked with no gap (983 = 941 + 42). */
    inset: auto;
    bottom: auto;
    left: 50%;
    top: 87.13vh; /* 941px */
    transform: translateX(-50%);
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .rotate-hint__icon img {
    width: 3.889vh; /* 42px */
    height: 3.889vh;
  }

  .rotate-hint__text {
    font-size: 1.667vh; /* 18px */
    font-weight: 500;
  }

  /* ---- Plane + clouds — Figma-mapped final positions, animation via JS ---- */
  .hero__plane,
  .hero__clouds-right,
  .hero__clouds-left1,
  .hero__clouds-left2,
  .hero__clouds-left-front {
    display: block;
    position: absolute;
    pointer-events: none;
    will-change: transform, opacity;
  }

  .hero__plane img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .hero__clouds-right img,
  .hero__clouds-left1 img,
  .hero__clouds-left2 img,
  .hero__clouds-left-front img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
  }

  .hero__plane {
    top: 48.944vh;    /* 529px */
    left: 21.198vw;   /* 407px */
    width: 64.583vw;  /* 1240px */
    height: 47.5vh;   /* 513px */
    z-index: 3;
  }

  .hero__clouds-right {
    bottom: 0;
    top: auto;
    right: -10vw;     /* shifted right */
    left: auto;
    width: 70vw;
    height: 27vh;
    z-index: 4;
  }

  .hero__clouds-left1 {
    bottom: 0;
    top: auto;
    left: -43.49vw;
    width: 119.323vw;
    height: 52vh;
    z-index: 2;
    -webkit-mask-image: linear-gradient(to left, transparent 0%, black 25%);
    mask-image:         linear-gradient(to left, transparent 0%, black 25%);
  }

  /* Group 38 — large front cloud, bottom-left, in front of plane */
  .hero__clouds-left-front {
    bottom: -18vh;
    top: auto;
    left: -5vw;
    width: 75vw;
    height: 48vh;
    z-index: 4;
    -webkit-mask-image: linear-gradient(to left, transparent 0%, black 35%);
    mask-image:         linear-gradient(to left, transparent 0%, black 35%);
  }

  .hero__clouds-left2 {
    bottom: 0;        /* flush to bottom-left corner */
    top: auto;
    left: -28.958vw;
    width: 88.490vw;
    height: 38vh;
    z-index: 4;
  }

  /* ---- Plane-section text: Figma-mapped positions, animated by JS ---- */
  .hero__plane-title {
    display: block;
    top: 19.870vh;    /* 215px */
    left: 52.344vw;   /* 1005px — shifted left vs. Figma's 1045px to add room (right edge unchanged) */
    width: 43.698vw;  /* 839px — widened from Figma's 799px; "המומחיות שלנו" measures ~799px, so it wrapped */
    height: 22.222vh; /* 240px */
    font-family: "Polin", "Heebo", sans-serif;
    font-size: 11.111vh;  /* 120px */
    line-height: 11.111vh;
    font-weight: 700;
    letter-spacing: 0;
    text-align: right;
    color: #ffffff;
    z-index: 5;
    opacity: 0;
    will-change: transform, opacity;
  }

  .hero__plane-title span {
    display: block;
  }

  .hero__plane-pills {
    display: block;
    top: 45.889vh;   /* 496px */
    left: 52.865vw;  /* 1015px */
    width: 42.884vw; /* 823px */
    height: 3.241vh; /* 35px */
    z-index: 5;
    opacity: 0;
    will-change: transform, opacity;
  }

  .hero__plane-pills img {
    width: 100%;
    height: auto;
    display: block;
  }

  .hero__plane-para {
    display: block;
    top: 24.722vh;   /* 267px */
    left: 7.083vw;   /* 136px */
    width: 26.927vw; /* 517px */
    font-family: "Polin", "Heebo", sans-serif;
    font-size: 2.407vh;  /* 26px */
    font-weight: 500;
    line-height: 1.385; /* 36px per line at 26px font-size — 4 lines = 144px, matching Figma's box height */
    letter-spacing: 0;
    text-align: right;
    z-index: 5;
    opacity: 0;
    will-change: opacity;
  }

  .hero__plane-para .word {
    color: rgba(255, 255, 255, 0.2);
    display: inline;
  }

  /* ---- Phase 7: burger button — Figma-mapped position ---- */
  .hero__burger {
    display: block;
    top: 4.630vh;   /* 50px */
    left: calc(52.656vw - 13px); /* matches .stage-nav's left edge (1011px) */
    width: 7.917vw; /* 152px */
    height: 5.556vh;/* 60px */
  }

  .hero__bg-left {
    display: block;
  }

  /* ---- Phase 8: content card ---- */
  .hero__section8 {
    display: block;
  }

  /* Card background (Rectangle 66) */
  .s8-card-bg {
    position: absolute;
    top: 70.370vh;   /* 760px */
    left: 3.438vw;   /* 66px */
    width: 43.542vw; /* 836px */
    height: 24.444vh; /* 264px */
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-image: url("../assets/images/section8-card-bg.png");
    background-size: cover;
    background-position: center;
  }

  /* Headline */
  .s8-headline {
    position: absolute;
    top: 74.537vh;   /* 805px — was 793px; matches Group 39.png's 45px gap from the card's top edge */
    left: 25.625vw;  /* 492px */
    width: 18.958vw; /* 364px */
    font-family: "Polin", "Heebo", sans-serif;
    font-size: 2.963vh; /* 32px */
    font-weight: 500; /* was 600 — one weight level down */
    line-height: 1;
    color: #ffffff;
    text-align: right;
    white-space: nowrap;
    margin: 0;
  }

  /* Location label */
  .s8-location {
    position: absolute;
    top: 72.593vh;  /* 784px */
    left: 5.885vw;  /* 113px */
    width: 4.167vw; /* 80px */
    font-family: "Polin", "Heebo", sans-serif;
    font-size: 1.852vh; /* 20px */
    font-weight: 400; /* was 500 — one weight level down */
    line-height: 6.667vh; /* 72px */
    color: #ffffff;
    text-align: right;
    margin: 0;
  }

  /* Divider line */
  .s8-line {
    position: absolute;
    top: 78.981vh;   /* 853px */
    left: 5.885vw;   /* 113px */
    width: 38.698vw; /* 743px */
    height: auto;
    display: block;
    opacity: 0.3;
  }

  /* Paragraph */
  .s8-para {
    position: absolute;
    top: 81.111vh;   /* 876px */
    left: 20.729vw;  /* 398px */
    width: 23.854vw; /* 458px */
    font-family: "Polin", "Heebo", sans-serif;
    font-size: 1.852vh; /* 20px */
    font-weight: 350; /* was 400 — one weight level down */
    line-height: 1.5;
    color: #ffffff;
    text-align: right;
    margin: 0;
  }

  /* Button */
  .s8-btn {
    position: absolute;
    top: 85.370vh;   /* 922px */
    left: 5.885vw;   /* 113px */
    pointer-events: auto;
  }

  .s8-btn .glass-btn__label {
    font-weight: 500; /* was 600 (inherited from .glass-btn) — one weight level down, scoped to this button only */
  }

  /* ---- Phase 8: right panel — destination search ---- */

  .s8-trips-link {
    position: absolute;
    top: 91.574vh;   /* 989px */
    left: 52.656vw;  /* 1011px */
    width: 5.052vw;  /* 97px */
    font-family: "Polin", "Heebo", sans-serif;
    font-weight: 600;
    font-size: 1.667vh; /* 18px */
    line-height: 1;
    color: #000000;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-align: right;
    direction: rtl;
    white-space: nowrap;
    pointer-events: auto;
  }

  .s8-dest-headline {
    position: absolute;
    top: 18.056vh;    /* 195px */
    left: 65.417vw;   /* 1256px */
    width: 30.625vw;  /* 588px */
    font-family: "Polin", "Heebo", sans-serif;
    font-size: 5.093vh;   /* 55px */
    font-weight: 500;
    line-height: 6.667vh; /* 72px */
    letter-spacing: 0;
    text-align: right;
    color: #1E2735;
    margin: 0;
    direction: rtl;
  }

  /* Search icon */
  .s8-search__icon {
    position: absolute;
    top: 28.333vh;   /* ~306px — vertically centered with input */
    left: 67.135vw;  /* ~1289px — shifted right 20px to match the search underline's new position */
    width: 2.396vh;  /* ~26px */
    height: 2.396vh;
    display: block;
    pointer-events: none;
  }

  /* Search input */
  .s8-search__input {
    position: absolute;
    top: 27.315vh;   /* ~295px */
    left: 68.021vw;  /* ~1306px */
    width: 28.906vw; /* ~555px */
    height: 3.704vh; /* ~40px */
    background: transparent;
    border: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    font-family: "Polin", "Heebo", sans-serif;
    font-size: 1.852vh; /* 20px */
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    color: #1E2735;
    text-align: right;
    direction: rtl;
    caret-color: #1E2735;
    pointer-events: auto;
  }

  .s8-search__input::placeholder {
    color: rgba(30, 39, 53, 0.35);
  }

  /* Hide browser's native search clear button */
  .s8-search__input::-webkit-search-cancel-button {
    display: none;
  }

  /* Search underline */
  .s8-search__underline {
    position: absolute;
    top: 32.315vh;   /* 349px — same line as Line 14 */
    left: 66.927vw;  /* ~1285px — shifted right 20px for more gap from the filter underline */
    width: 30.104vw; /* ~578px — shrunk 20px so the right edge stays put */
    height: 1px;
    display: block;
    pointer-events: none;
  }

  /* Filter button text */
  .s8-filter__btn {
    position: absolute;
    top: 28.704vh;   /* 310px */
    left: 60.0vw;    /* 1152px */
    width: 5.365vw;  /* 103px */
    height: 2.593vh; /* 28px */
    background: transparent;
    border: none;
    outline: none;
    font-family: "Polin", "Heebo", sans-serif;
    font-size: 1.852vh; /* 20px */
    font-weight: 400;
    color: #1E2735;
    opacity: 0.4;
    text-align: right;
    direction: rtl;
    cursor: pointer;
    padding: 0;
    pointer-events: auto;
    white-space: nowrap;
  }

  .s8-filter__btn:hover {
    opacity: 0.7;
  }

  /* Filter chevron arrow */
  .s8-filter__arrow {
    position: absolute;
    top: 29.722vh;  /* 321px */
    left: 52.656vw; /* 1011px */
    width: 1.042vw; /* 20px */
    height: 0.926vh;/* 10px */
    display: block;
    opacity: 1;
    pointer-events: none;
  }

  /* Filter underline */
  .s8-filter__underline {
    position: absolute;
    top: 32.315vh;    /* 349px */
    left: 52.656vw;   /* 1011px */
    width: 11.667vw;  /* 224px — shrunk 20px for more gap before the search underline */
    height: 1px;
    display: block;
    opacity: 0.3;
    pointer-events: none;
  }

  /* ---- Phase 8: gallery clip container (confines cards to right panel) ---- */

  .s8-gallery-clip {
    position: absolute;
    top: 0;
    left: 50vw;   /* right panel boundary — matches Phase 7 split */
    right: 0;
    bottom: 0;
    overflow: hidden;
  }

  /* ---- Phase 8: photo gallery cards ---- */

  /* All positions are relative to .s8-gallery-clip (subtract 50vw from Figma absolute values) */
  .s8-gallery__card {
    position: absolute;
    top: 35.556vh;    /* 384px — same vh, container spans full height */
    left: 65vw;       /* hidden off-screen right: 115vw abs − 50vw = 65vw */
    width: 17.604vw;  /* 338px */
    height: 50.370vh; /* 544px */
    border-radius: 20px;
    overflow: hidden;
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.5s ease,
                opacity 0.5s ease;
  }

  .s8-gallery__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Active card — full colour + bottom gradient */
  .s8-gallery__card--active {
    filter: none;
    opacity: 1;
  }

  /* Prev card (middle) — D9D9D9 wash */
  /* Middle card — opacity 0.5 + D9D9D9 background (Figma spec) */
  .s8-gallery__card--prev {
    opacity: 0.5;
    background: #D9D9D9;
  }

  /* Left card (partially clipped) — more transparent than middle */
  .s8-gallery__card--prev-prev {
    opacity: 0.2;
    border-radius: 0 30px 30px 0;
  }

  /* Destination label — shown only on active card */
  .s8-gallery__label {
    display: none;
    position: absolute;
    top: 79.6%;       /* (817-384)/544 */
    right: 8.28%;     /* 28/338 */
    font-family: "Polin", "Heebo", sans-serif;
    font-size: 2.963vh; /* 32px */
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
    text-align: right;
    direction: rtl;
    z-index: 1;
    pointer-events: none;
  }

  .s8-gallery__card--active .s8-gallery__label {
    display: block;
  }

  .s8-gallery__sublabel {
    display: none;
    position: absolute;
    top: 87.5%;      /* (860-384)/544 */
    right: 8.28%;    /* 28/338 — same right-edge as label */
    width: 52.66%;   /* 178/338 */
    font-family: "Polin", "Heebo", sans-serif;
    font-size: 1.667vh; /* ~18px */
    font-weight: 400;
    line-height: 1;
    color: #ffffff;
    text-align: right;
    direction: rtl;
    z-index: 1;
    pointer-events: none;
  }

  .s8-gallery__card--active .s8-gallery__sublabel {
    display: block;
  }

  /* ---- Phase 8: navigation arrows ---- */

  .s8-arrows {
    position: absolute;
    top: 90.463vh;    /* 977px */
    left: 39.688vw;   /* 1722px abs − 50vw (960px) = 762px → 39.688vw */
    width: 6.042vw;   /* 116px */
    height: 4.630vh;  /* 50px */
    pointer-events: auto;
  }

  .s8-arrows__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
  }

  /* Two invisible click-zones overlaid on Group 40.png */
  .s8-arrows__btn {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    pointer-events: auto;
  }

  .s8-arrows__btn--prev { right: 0; } /* left half visually = prev in RTL */
  .s8-arrows__btn--next { left: 0; }  /* right half visually = next in RTL */
}

/* ---------------------------------- Mobile tweaks ---------------------------------- */

/* ============================================================
   Phase 11 — Customer Reviews
   ============================================================ */

.hero__section11 {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 7;
  opacity: 0;
  pointer-events: none;
  background: #ffffff;
  will-change: opacity, transform;
}

@media (min-width: 861px) {

  .hero__section11 { display: block; }

  /* Headline */
  .s11-headline {
    position: absolute;
    top: 13.333vh;     /* 144px */
    left: 34.844vw;    /* 669px */
    width: 30.365vw;   /* 583px */
    margin: 0;
    font-family: "Polin", "Heebo", sans-serif;
    font-size: 5.741vh; /* 62px */
    font-weight: 600;
    line-height: 1.935;
    text-align: center;
    color: #1E2735;
    direction: rtl;
  }

  /* Slider clipping container */
  .s11-slider {
    position: absolute;
    top: 29.259vh;     /* 316px */
    left: 0;
    right: 0;
    height: 52vh;
    overflow: hidden;
  }

  /* Sliding track */
  .s11-track {
    display: flex;
    flex-direction: row;
    direction: ltr;
    gap: 4.740vw;      /* 91px */
    align-items: flex-start;
    transform: translateX(-3.333vw); /* first card starts at −64px */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  /* Base card */
  .s11-card {
    flex-shrink: 0;
    width: 14.688vw;   /* 282px */
    display: flex;
    flex-direction: column;
    direction: rtl;
  }

  .s11-card--high { margin-top: 0; }
  .s11-card--low  { margin-top: 3.611vh; } /* 39px — 355px vs 316px row offset */

  .s11-card__img {
    width: 100%;
    border-radius: 1.389vh; /* 15px */
    display: block;
    object-fit: cover;
    flex-shrink: 0;
  }

  /* Square image (text-top and image-top cards) */
  .s11-card--text-img .s11-card__img,
  .s11-card--img-text .s11-card__img {
    height: 26.111vh; /* 282px */
  }

  /* Tall image card */
  .s11-card--tall .s11-card__img {
    height: 46.435vh; /* avg 500/503px */
  }

  /* Text-top card: name → para → image */
  .s11-card--text-img .s11-card__name { margin-bottom: 1.852vh; } /* 20px */
  .s11-card--text-img .s11-card__text { margin-bottom: 3.056vh; } /* 33px gap before image */

  /* Image-top card: image → name → para */
  .s11-card--img-text .s11-card__img  { margin-bottom: 3.704vh; } /* 40px gap before name */
  .s11-card--img-text .s11-card__name { margin-bottom: 1.019vh; } /* 11px gap before para */

  .s11-card__name {
    font-family: "Polin", "Heebo", sans-serif;
    font-size: 2.037vh;  /* 22px */
    font-weight: 600;
    line-height: 1;
    color: #000000;
    margin: 0;
    text-align: right;
  }

  .s11-card__text {
    font-family: "Polin", "Heebo", sans-serif;
    font-size: 1.574vh;  /* 17px */
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    margin: 0;
    text-align: right;
  }

  /* Navigation bar */
  .s11-nav {
    position: absolute;
    top: 87.407vh;    /* 944px */
    left: 35.938vw;   /* 690px */
    width: 28.177vw;  /* 541px */
    height: 4.630vh;  /* 50px */
  }

  .s11-nav__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
  }

  /* Invisible hit zones over the arrow icons */
  .s11-nav__btn {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4.630vh; /* ~50px square */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 0;
  }

  .s11-nav__btn--prev { left: 0; }
  .s11-nav__btn--next { right: 0; }

  /* Progress bar: Rect78 (surface) + Rect79 (thumb), centered between arrows */
  .s11-progress {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5.625vw;   /* (798-690)/1920*100 — offset from nav left edge */
    width: 16.927vw; /* 325px */
    height: 4px;
    pointer-events: none;
  }

  .s11-progress__surface {
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: #D9D9D9;
  }

  .s11-progress__bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 5.208vw; /* 100px */
    height: 4px;
    border-radius: 50px;
    background: #1E2735;
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: left;
  }

} /* end @media (min-width: 861px) — phase 11 */

/* ============================================================
   Phase 13 — Articles section (ידע זה חלק מהמסע)
   ============================================================ */

.hero__section12 {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 8;
  opacity: 0;
  pointer-events: none;
  background: #ffffff;
  will-change: opacity, transform;
}

@media (min-width: 861px) {
  .hero__section12 { display: block; }

  /* ── Headline ────────────────────────────────────────────── */
  .s12-headline {
    position: absolute;
    top: 13.333vh;     /* 144px */
    left: 67.552vw;    /* 1297px */
    width: 28.281vw;   /* 543px — right edge (1840px) matches .s12-card--right's right edge (1838px) */
    margin: 0;
    font-family: "Polin", "Heebo", sans-serif;
    font-size: 5.741vh;    /* 62px */
    font-weight: 600;
    line-height: 11.111vh; /* 120px */
    color: #1E2735;
    text-align: right;
    direction: rtl;
  }

  /* ── Cards: shared base ──────────────────────────────────── */
  .s12-card {
    position: absolute;
    overflow: hidden;
    border-radius: 1.852vh; /* 20px */
    isolation: isolate;
  }

  .s12-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
  }

  .s12-card__grad {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }

  .s12-card__title {
    position: absolute;
    z-index: 2;
    margin: 0;
    direction: rtl;
    text-align: right;
    color: #ffffff;
    font-family: "Polin", "Heebo", sans-serif;
    font-weight: 600;
  }

  .s12-card__byline {
    position: absolute;
    z-index: 2;
    margin: 0;
    direction: rtl;
    text-align: right;
    color: #ffffff;
    font-family: "Polin", "Heebo", sans-serif;
    font-weight: 400;
    font-size: 1.481vh; /* 16px */
    line-height: 1;
    white-space: nowrap;
  }

  .s12-card__link {
    position: absolute;
    z-index: 2;
    color: #ffffff;
    font-family: "Polin", "Heebo", sans-serif;
    font-weight: 400;
    font-size: 1.481vh; /* 16px */
    line-height: 1;
    text-decoration: underline;
  }

  /* ── Card: right large (Rect 80 — 820×682) ────────────────── */
  .s12-card--right {
    top: 28.611vh;    /* 309px */
    left: 53.021vw;   /* 1018px */
    width: 42.708vw;  /* 820px */
    height: 63.148vh; /* 682px */
  }

  .s12-card--right .s12-card__grad {
    background: linear-gradient(180deg, rgba(0,0,0,0) 53.74%, rgba(0,0,0,0.7) 76.98%);
  }

  .s12-card--right .s12-card__title {
    top: 68.62%;       /* (777-309)/682 */
    left: 40%;         /* (1346-1018)/820 */
    width: 56.10%;     /* 460/820 */
    font-size: 3.889vh;    /* 42px */
    line-height: 4.259vh;  /* 46px */
  }

  .s12-card--right .s12-card__byline {
    top: 92.96%;  /* (943-309)/682 */
    left: 40%;
    width: 56.10%;
  }

  .s12-card--right .s12-card__link {
    top: 92.96%;
    left: 4.76%;  /* (1057-1018)/820 */
  }

  /* ── Card: middle top (Rect 81 — 355×325) ─────────────────── */
  .s12-card--mid-top {
    top: 28.611vh;    /* 309px */
    left: 32.865vw;   /* 631px */
    width: 18.490vw;  /* 355px */
    height: 30.093vh; /* 325px */
  }

  .s12-card--mid-top .s12-card__grad {
    background: linear-gradient(180deg, rgba(0,0,0,0) 53.74%, rgba(0,0,0,0.75) 100%);
  }

  .s12-card--mid-top .s12-card__title {
    top: 64.31%;   /* (518-309)/325 */
    left: 25.35%;  /* (721-631)/355 */
    width: 67.61%; /* 240/355 */
    font-size: 2.407vh;   /* 26px */
    line-height: 2.778vh; /* 30px */
  }

  .s12-card--mid-top .s12-card__link {
    top: 85.23%;  /* (586-309)/325 */
    left: 7.04%;  /* (656-631)/355 */
  }

  /* ── Card: middle bottom (Rect 82 — 355×325) ──────────────── */
  .s12-card--mid-bot {
    top: 61.667vh;    /* 666px */
    left: 32.865vw;   /* 631px */
    width: 18.490vw;  /* 355px */
    height: 30.093vh; /* 325px */
  }

  .s12-card--mid-bot .s12-card__grad {
    background: linear-gradient(180deg, rgba(0,0,0,0) 53.74%, rgba(0,0,0,0.75) 100%);
  }

  .s12-card--mid-bot .s12-card__title {
    top: 64.31%;   /* (875-666)/325 */
    left: 25.35%;  /* (721-631)/355 */
    width: 67.61%; /* 240/355 */
    font-size: 2.407vh;
    line-height: 2.778vh;
  }

  .s12-card--mid-bot .s12-card__link {
    top: 85.23%;  /* (943-666)/325 */
    left: 7.04%;  /* (656-631)/355 */
  }

  /* ── Card: left tall (Rect 83 — 513×682) ──────────────────── */
  .s12-card--left {
    top: 28.611vh;    /* 309px */
    left: 4.479vw;    /* 86px */
    width: 26.719vw;  /* 513px */
    height: 63.148vh; /* 682px */
  }

  .s12-card--left .s12-card__grad {
    background: linear-gradient(180deg, rgba(0,0,0,0) 69.12%, rgba(0,0,0,0.5) 83.82%);
  }

  .s12-card--left .s12-card__title {
    top: 68.62%;   /* (777-309)/682 */
    left: 19.49%;  /* (186-86)/513 */
    width: 74.66%; /* 383/513 */
    font-size: 3.889vh;
    line-height: 4.259vh;
  }

  .s12-card--left .s12-card__byline {
    top: 92.96%;   /* (943-309)/682 */
    left: 4.48%;   /* (109-86)/513 */
    width: 89.67%; /* 460/513 */
  }

  .s12-card--left .s12-card__link {
    top: 92.96%;
    left: 5.46%;   /* (114-86)/513 */
  }

  .s12-all-link {
    position: absolute;
    left: 4.479vw;     /* 86/1920 */
    top: 20vh;         /* 216/1080 */
    width: 5.885vw;    /* 113/1920 */
    height: 2.315vh;   /* 25/1080 */
    font-family: "Polin", "Heebo", sans-serif;
    font-size: 1.667vh; /* 18/1080 */
    font-weight: 600;
    line-height: 100%;
    color: #000000;
    text-decoration: underline;
    text-underline-offset: auto;
    white-space: nowrap;
    display: flex;
    align-items: center;
  }

} /* end @media (min-width: 861px) — section 12 */

@media (max-width: 860px) {
  .nav-pill {
    flex-wrap: wrap;
    justify-content: center;
  }

  .nav-pill__link {
    font-size: 0.85rem;
    padding: 10px 16px;
  }

  .stage-title {
    font-size: clamp(2.4rem, 11vw, 3.4rem);
  }

  .stage-paragraph {
    font-size: 0.9rem;
  }

  .glass-btn {
    height: 52px;
    font-size: 0.9rem;
  }

  .glass-btn__circle {
    width: 42px;
    height: 42px;
  }
}

/* ═══════════════════════════════════════════════════════
   SITE FOOTER
   ═══════════════════════════════════════════════════════ */

.site-footer {
  position: relative;
  width: 100%;
  min-height: 73.889vh;        /* 798/1080 */
  background: #00173C;
  overflow: hidden;
  direction: rtl;
  display: none;               /* hidden on mobile */
}

@media (min-width: 861px) {
  .site-footer { display: none; } /* replaced by hero__footer-stage on desktop */
}

/* ----- Footer stage (inside hero, desktop only) --------- */

.hero__footer-stage {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 73.889vh;        /* matches footer height: 798/1080 */
  background: #00173C;
  overflow: hidden;
  direction: rtl;
  z-index: 5;              /* sits behind all sections (s12 is z-index:8) */
  opacity: 0;
  pointer-events: none;
  display: none;           /* mobile: hidden */
}

@media (min-width: 861px) {
  .hero__footer-stage { display: block; }
}

/* ----- Navigation columns -------------------------------- */

.footer-nav__col {
  position: absolute;
  display: flex;
  flex-direction: column;
  direction: rtl;
  align-items: flex-start;     /* flex-start in RTL = right-aligned */
}

.footer-nav__col--1 { right: 4.271vw;  top: 7.130vh; }   /* right-edge 1838px, header-row y=77px */
.footer-nav__col--2 { right: 16.667vw; top: 7.130vh; }   /* right-edge ~1600px */
.footer-nav__col--3 { right: 29.167vw; top: 11.296vh; }  /* right-edge ~1360px, no header: starts at link-row-1 y=122px */

.footer-nav__hd {
  font-family: "Polin", "Heebo", sans-serif;
  font-size: 1.852vh;          /* 20px */
  font-weight: 500; /* was 600 — one weight level down */
  color: #FFFFFF;
  margin: 0;
  height: 4.167vh;             /* 45px row pitch */
  display: flex;
  align-items: center;
  justify-content: flex-start; /* RTL flex-start = right */
  white-space: nowrap;
  direction: rtl;
}

.footer-nav__link {
  height: 4.167vh;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* RTL = right-aligned */
  gap: 0.573vw;                /* ~11px */
  font-family: "Polin", "Heebo", sans-serif;
  font-size: 1.667vh;          /* 18px */
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  white-space: nowrap;
  direction: rtl;
  transition: color 0.2s;
}

.footer-nav__link:hover { color: #FFFFFF; }

.footer-nav__icon {
  width: 1.017vh;              /* ~11px */
  height: 1.017vh;
  opacity: 0.5;
  flex-shrink: 0;
}

/* ----- Contact form ---------------------------------------- */

.footer-form__headline {
  position: absolute;
  top: 7.130vh;                /* (359-282)/1080 */
  left: 5.781vw;               /* 111/1920 */
  width: 28.333vw;             /* 544/1920 */
  font-family: "Polin", "Heebo", sans-serif;
  font-size: 2.963vh;          /* 32/1080 */
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.35;
  margin: 0;
  direction: rtl;
  text-align: right;
}

.footer-form__row1 {
  position: absolute;
  top: 19.259vh;               /* (490-282)/1080 */
  left: 5.781vw;
  display: flex;
  flex-direction: row;
  direction: ltr;
  gap: 1.042vw;                /* ~20px */
}

.footer-form__input {
  height: 5.556vh;             /* 60/1080 */
  width: 13.646vw;             /* 262/1920 */
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50px;
  color: #FFFFFF;
  font-family: "Polin", "Heebo", sans-serif;
  font-size: 1.481vh;
  font-weight: 400;
  padding: 0 1.25vw;
  direction: rtl;
  text-align: right;
  box-sizing: border-box;
  outline: none;
}

.footer-form__input::placeholder { color: rgba(255, 255, 255, 0.5); }
.footer-form__input:focus { border-color: rgba(255, 255, 255, 0.9); }

.footer-form__row2 {
  position: absolute;
  top: 27.130vh;               /* (575-282)/1080 */
  left: 5.781vw;
  display: flex;
  flex-direction: row;
  direction: ltr;
  align-items: center;
  gap: 1.042vw;
}

.footer-form__input--wide { width: 18.333vw; /* 352/1920 */ }

.footer-form__btn {
  height: 5.556vh;             /* match input height */
  width: 8.958vw;              /* ~172px = gap between left=111 and wide-input left=303 minus 20px */
  direction: rtl;              /* restore RTL so label right, circle left */
  justify-content: space-between; /* pin circle to left edge, label to right edge */
  color: #FFFFFF;
  flex-shrink: 0;
}

/* ----- Decorative elements --------------------------------- */

.footer-bigtext {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  user-select: none;
}

.footer-plane {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 33.333vh;            /* ~360px — taller than the text watermark so it reads over it */
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* ----- Bottom legal bar ------------------------------------ */

.footer-bar {
  position: absolute;
  top: 45vh;
  left: 0;
  width: 100%;
  height: 3.704vh;             /* ~40px — vertical room for text */
}

.footer-bar__magic,
.footer-bar__priv,
.footer-bar__access {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Polin", "Heebo", sans-serif;
  font-size: 1.667vh;          /* 18px — matches footer nav links */
  font-weight: 400; /* was 500 — one weight level down */
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
}

.footer-bar__magic  { left: 4.167vw;  }  /* 80/1920  */
.footer-bar__priv   { left: 90.208vw; }  /* 1732/1920 */
.footer-bar__access { left: 82.448vw; }  /* 1583/1920 */

.footer-bar__priv:hover,
.footer-bar__access:hover { color: #FFFFFF; }