/* ============================================================
   Voyaji — Premium public frontend layer (original, hand-written)
   Loaded AFTER the theme's style.css to elevate the existing
   markup to a cohesive premium travel-agency look.
   Brand: deep teal (#066168) + citrus (#FFAA0D), Voyaji identity.
   Scope: public pages only (admin uses a separate base template).
   ============================================================ */

/* Legacy display face retained for compatibility; public headings use Google Sans below. */
@font-face {
  font-family: "Gunken";
  src: url("../fonts/Gunken.otf") format("opentype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ================================================================
   PUBLIC HOMEPAGE — INTERACTIVE MOROCCO TRAVEL GLOBE
   Isolated from admin and from the rest of the public design system.
   ================================================================ */
.vj-globe {
  --vj-globe-ink: #0a3233;
  --vj-globe-teal: #08777a;
  --vj-globe-teal-dark: #075e61;
  --vj-globe-sand: #f1b342;
  position: relative;
  overflow: clip;
  padding: clamp(72px, 8vw, 124px) 0;
  background:
    radial-gradient(circle at 10% 14%, rgba(241, 179, 66, .12), transparent 23%),
    radial-gradient(circle at 92% 80%, rgba(8, 119, 122, .1), transparent 25%),
    #fff;
}

.vj-globe__shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(480px, 1.16fr);
  align-items: center;
  min-height: 680px;
  padding: clamp(42px, 5vw, 76px);
  border: 1px solid rgba(9, 77, 78, .09);
  border-radius: clamp(30px, 4vw, 52px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(237, 246, 243, .97));
  box-shadow: 0 34px 90px rgba(13, 61, 61, .12);
  isolation: isolate;
}

.vj-globe__shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: radial-gradient(rgba(8, 119, 122, .1) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(90deg, transparent 40%, #000 100%);
  opacity: .5;
}

.vj-globe__content {
  position: relative;
  z-index: 6;
  max-width: 535px;
}

.vj-globe__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 9px 15px;
  border: 1px solid rgba(8, 119, 122, .15);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  color: var(--vj-globe-teal);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(8, 92, 94, .08);
}

.vj-globe__eyebrow i { color: var(--vj-globe-sand); }

.vj-globe__title {
  margin: 0;
  color: var(--vj-globe-ink);
  font-family: "Inter", sans-serif;
  font-size: clamp(43px, 4.7vw, 72px);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .98;
}

.vj-globe__title span {
  display: block;
  color: var(--vj-globe-teal);
}

.vj-globe__lead {
  max-width: 500px;
  margin: 28px 0 0;
  color: #536b6b;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.8;
}

.vj-globe__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 32px;
}

.vj-globe__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 25px;
  border-radius: 999px;
  background: var(--vj-globe-teal);
  color: #fff !important;
  font-size: 15px;
  font-weight: 750;
  text-decoration: none !important;
  box-shadow: 0 16px 34px rgba(8, 119, 122, .25);
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.vj-globe__cta:hover {
  transform: translateY(-3px);
  background: var(--vj-globe-teal-dark);
  box-shadow: 0 20px 40px rgba(8, 96, 99, .31);
}

.vj-globe__cta:focus-visible,
.vj-globe-card:focus-visible {
  outline: 3px solid rgba(241, 179, 66, .95);
  outline-offset: 4px;
}

.vj-globe__hint {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #627777;
  font-size: 13px;
  font-weight: 650;
}

.vj-globe__hint i {
  color: var(--vj-globe-teal);
  font-size: 18px;
}

.vj-globe__proof {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 38px;
}

.vj-globe__proof-icon {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: rgba(8, 119, 122, .1);
  color: var(--vj-globe-teal);
}

.vj-globe__proof p {
  display: flex;
  flex-direction: column;
  margin: 0;
  line-height: 1.35;
}

.vj-globe__proof strong {
  color: var(--vj-globe-ink);
  font-size: 14px;
}

.vj-globe__proof p span {
  color: #7a8b8b;
  font-size: 13px;
}

.vj-globe__visual {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  min-width: 0;
}

.vj-globe__stage {
  position: relative;
  width: min(100%, 640px);
  aspect-ratio: 1;
  margin-inline: auto;
  user-select: none;
  -webkit-user-select: none;
}

.vj-globe__stage::before {
  content: "";
  position: absolute;
  inset: 12%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(8, 119, 122, .13);
  filter: blur(45px);
  transform: translateY(6%);
}

.vj-globe__canvas {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: grab;
  touch-action: none;
  transition: opacity .55s ease;
}

.vj-globe__canvas.is-dragging { cursor: grabbing; }
.vj-globe.is-ready .vj-globe__canvas { opacity: 1; }

.vj-globe__cards {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.vj-globe-card {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  width: 154px;
  padding: 7px 7px 10px;
  overflow: hidden;
  border: 1px solid rgba(10, 50, 51, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 16px 36px rgba(8, 48, 49, .2);
  color: var(--vj-globe-ink) !important;
  text-decoration: none !important;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -100%) rotate(var(--vj-card-tilt, 0deg)) scale(.94);
  transform-origin: 50% 100%;
  transition:
    opacity .22s ease,
    transform .22s ease,
    box-shadow .22s ease,
    left .08s linear,
    top .08s linear;
  will-change: left, top, transform, opacity;
}

.vj-globe-card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--vj-globe-teal);
  border: 4px solid #fff;
  transform: translateX(-50%);
  box-shadow: 0 4px 12px rgba(8, 81, 83, .25);
}

.vj-globe-card.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -100%) rotate(var(--vj-card-tilt, 0deg)) scale(1);
}

.vj-globe-card.is-visible:hover {
  z-index: 10;
  transform: translate(-50%, calc(-100% - 6px)) rotate(0deg) scale(1.035);
  box-shadow: 0 23px 48px rgba(8, 48, 49, .28);
}

.vj-globe-card img {
  display: block;
  width: 100%;
  height: 72px;
  border-radius: 11px;
  object-fit: cover;
  background: #dfeae8;
}

.vj-globe-card.has-image-error img { display: none; }

.vj-globe-card__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 5px 0;
}

.vj-globe-card__copy small {
  overflow: hidden;
  color: var(--vj-globe-teal);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.vj-globe-card__copy strong {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vj-globe__fallback {
  position: absolute;
  inset: 8%;
  z-index: 1;
  overflow: hidden;
  border: 8px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: #0b5557;
  box-shadow: 0 28px 65px rgba(8, 67, 68, .2);
  opacity: 1;
  transition: opacity .4s ease, visibility .4s ease;
}

.vj-globe.is-ready .vj-globe__fallback {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.vj-globe__fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vj-globe__fallback-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 48, 49, .04), rgba(5, 48, 49, .72));
}

.vj-globe__fallback-copy {
  position: absolute;
  left: 13%;
  right: 13%;
  bottom: 12%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.vj-globe__fallback-copy > span {
  width: 100%;
  color: #fff;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 800;
  text-align: center;
}

.vj-globe__fallback-copy a {
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none !important;
  backdrop-filter: blur(8px);
}

.vj-globe__orbit {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(8, 119, 122, .16);
  border-radius: 50%;
  pointer-events: none;
}

.vj-globe__orbit--one {
  width: 72%;
  aspect-ratio: 1;
  transform: rotate(-18deg) scaleY(.36);
}

.vj-globe__orbit--two {
  width: 84%;
  aspect-ratio: 1;
  border-color: rgba(241, 179, 66, .22);
  transform: rotate(24deg) scaleY(.34);
}

.vj-globe__status {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

@media (max-width: 1199px) {
  .vj-globe__shell {
    grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr);
    padding: 48px;
  }
}

@media (max-width: 991px) {
  .vj-globe__shell {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: clamp(30px, 6vw, 52px);
  }

  .vj-globe__content {
    max-width: 690px;
    text-align: center;
    justify-self: center;
  }

  .vj-globe__lead { margin-inline: auto; }
  .vj-globe__actions,
  .vj-globe__proof { justify-content: center; }
  .vj-globe__stage { width: min(100%, 590px); }
}

@media (max-width: 640px) {
  .vj-globe {
    padding: 60px 0;
  }

  .vj-globe__shell {
    gap: 24px;
    min-height: 0;
    padding: 30px 16px 22px;
    border-radius: 30px;
  }

  .vj-globe__eyebrow {
    margin-bottom: 18px;
    font-size: 10px;
  }

  .vj-globe__title {
    font-size: clamp(38px, 11.5vw, 50px);
  }

  .vj-globe__lead {
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.65;
  }

  .vj-globe__actions {
    display: grid;
    gap: 15px;
    margin-top: 25px;
  }

  .vj-globe__cta { width: 100%; }
  .vj-globe__hint { justify-content: center; }
  .vj-globe__proof { margin-top: 25px; }
  .vj-globe__stage { width: 100%; }

  .vj-globe-card {
    width: 118px;
    padding: 5px 5px 8px;
    border-radius: 13px;
  }

  .vj-globe-card img {
    height: 55px;
    border-radius: 9px;
  }

  .vj-globe-card__copy {
    padding: 6px 4px 0;
  }

  .vj-globe-card__copy small { font-size: 8px; }
  .vj-globe-card__copy strong { font-size: 10px; }
  .vj-globe__fallback { border-width: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .vj-globe *,
  .vj-globe *::before,
  .vj-globe *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: .01ms !important;
  }
}
/* Endellia — elegant handwritten face for decorative eyebrow labels */
@font-face {
  font-family: "Endellia";
  src: url("../fonts/Endellia.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* public display headings only; body/UI text remains on Inter */
  --font-display: "Google Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: var(--font-display);
  --font-google-sans: var(--font-display);
  /* handwritten script for decorative eyebrow labels */
  --font-script: "Endellia", cursive;
  --vj-primary: #066168;
  --vj-primary-600: #08767e;
  --vj-primary-700: #044a50;
  --vj-accent: #ffaa0d;
  --vj-accent-600: #f59e0b;
  --vj-ink: #0f2e34;
  --vj-muted: #5b6b6e;
  --vj-surface: #ffffff;
  --vj-surface-2: #f4f9f9;
  --vj-border: #e4eded;
  --vj-radius: 18px;
  --vj-radius-lg: 28px;
  --vj-shadow-sm: 0 4px 14px rgba(6, 97, 104, .08);
  --vj-shadow: 0 18px 40px rgba(6, 97, 104, .14);
  --vj-shadow-lg: 0 30px 60px rgba(6, 97, 104, .20);
  --vj-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Global polish ---------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--vj-primary); color: #fff; }

/* Refined custom scrollbar (desktop) */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: rgba(6,97,104,.35); border-radius: 999px; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(6,97,104,.55); }
}

/* Visible keyboard focus (accessibility) */
.vj-premium a:focus-visible,
.vj-premium button:focus-visible,
.vj-premium input:focus-visible,
.vj-premium select:focus-visible,
.vj-premium textarea:focus-visible {
  outline: 3px solid rgba(255, 170, 13, .55);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---------- Premium buttons (existing .site-button) ---------- */
.vj-premium .site-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  background: var(--vj-primary);
  color: #fff;
  font-weight: 700;
  letter-spacing: .2px;
  padding: 14px 30px;
  border-radius: 999px;
  border: 0;
  box-shadow: 0 14px 26px rgba(6, 97, 104, .26);
  transition: transform .25s var(--vj-ease), box-shadow .25s var(--vj-ease), background .25s var(--vj-ease);
}
.vj-premium .site-button:hover {
  background: var(--vj-primary-700);
  transform: translateY(-3px);
  box-shadow: 0 22px 36px rgba(6, 97, 104, .34);
  color: #fff;
}
.vj-premium .site-button.outline {
  background: transparent;
  color: var(--vj-primary);
  box-shadow: inset 0 0 0 2px var(--vj-primary);
}
.vj-premium .site-button.outline:hover {
  background: var(--vj-primary);
  color: #fff;
  box-shadow: inset 0 0 0 2px var(--vj-primary), 0 18px 30px rgba(6,97,104,.28);
}

/* Citrus accent button variant */
.vj-premium .vj-btn-accent {
  background: linear-gradient(135deg, var(--vj-accent), var(--vj-accent-600));
  color: var(--vj-primary-700);
  box-shadow: 0 14px 26px rgba(255, 170, 13, .32);
}
.vj-premium .vj-btn-accent:hover { color: var(--vj-primary-700); }

/* ---------- Premium voyage / tour cards ----------
   Targets the existing card pattern: a .group wrapper with an
   image in a rounded container. Adds lift + softer media. */
.vj-premium .group:has(> .rounded-3xl.overflow-hidden) {
  transition: transform .35s var(--vj-ease);
}
.vj-premium .group:hover > .rounded-3xl.overflow-hidden {
  box-shadow: var(--vj-shadow);
}
.vj-premium .rounded-3xl.overflow-hidden { border-radius: var(--vj-radius-lg); }

/* Card price / meta panel refinement (white panel that slides on hover) */
.vj-premium .group .bg-white.rounded-3xl,
.vj-premium .group .bg-white[class*="rounded-b"] {
  box-shadow: var(--vj-shadow-sm);
}

/* Generic premium card utility for new sections */
.vj-card {
  background: var(--vj-surface);
  border: 1px solid var(--vj-border);
  border-radius: var(--vj-radius-lg);
  box-shadow: var(--vj-shadow-sm);
  overflow: hidden;
  transition: transform .35s var(--vj-ease), box-shadow .35s var(--vj-ease);
}
.vj-card:hover { transform: translateY(-6px); box-shadow: var(--vj-shadow); }

/* ---------- Hero overlay for legibility ---------- */
.vj-premium .trv-banner-1-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 38, 42, .45) 0%, rgba(4, 38, 42, .12) 35%, rgba(4, 38, 42, .55) 100%);
}
.vj-premium .trv-banner-1-wrap > *:not(video) { position: relative; z-index: 1; }

/* ---------- Section rhythm + headings ---------- */
.vj-premium h1, .vj-premium h2, .vj-premium h3 { letter-spacing: -.01em; }
.vj-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.1;
  color: var(--vj-primary);
  background: rgba(6, 97, 104, .08);
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 14px;
}

/* ---------- Premium form fields ---------- */
.vj-premium input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
.vj-premium select,
.vj-premium textarea {
  transition: border-color .2s var(--vj-ease), box-shadow .2s var(--vj-ease);
}
.vj-premium .form-control:focus,
.vj-premium input:focus,
.vj-premium select:focus,
.vj-premium textarea:focus {
  border-color: var(--vj-primary) !important;
  box-shadow: 0 0 0 4px rgba(6, 97, 104, .12) !important;
}

/* ---------- Footer polish ---------- */
.vj-premium footer h3 { letter-spacing: -.01em; }
.vj-premium footer a { transition: color .2s var(--vj-ease), transform .2s var(--vj-ease); }

/* ---------- Subtle reveal-on-load for sections (premium feel) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .vj-reveal { opacity: 0; transform: translateY(24px); }
  .vj-reveal.is-in { opacity: 1; transform: none; transition: opacity .7s var(--vj-ease), transform .7s var(--vj-ease); }
}

/* ---------- WhatsApp float refinement ---------- */
.vj-premium .whatsapp-float { box-shadow: 0 12px 30px rgba(37, 211, 102, .45); }

/* ============================================================
   HEADER — floating pill composition (logo / centred nav pill /
   actions pill). Styling only; all JS hooks + path() preserved:
     sticky .is-fixed/.color-fill · .xmenu-toggler/.header-nav.show
     · .quick-search/#searchOverlay1 · .user-dropdown · data-drawer
   ============================================================ */

/* smooth transitions */
.vj-premium .vj-nav-pill,
.vj-premium .vj-head-actions,
.vj-premium .vj-head-logo,
.vj-premium .site-header .main-bar-wraper > div {
  transition: background .35s var(--vj-ease), box-shadow .35s var(--vj-ease),
              backdrop-filter .35s var(--vj-ease), min-height .35s var(--vj-ease);
}

/* header element stays transparent — never a full-width solid bar */
.vj-premium .site-header,
.vj-premium .site-header.is-fixed { background: transparent; box-shadow: none; }

/* brand logo (left, no background container) */
.vj-premium .site-header a.table-cell { flex: 0 0 auto; }
.vj-premium .site-header a.table-cell img { height: 44px; width: auto; max-width: 160px; }

/* logo sits flush to the nav pill — drop the theme's fixed-width box on desktop */
@media (min-width: 1024px) {
  .vj-premium .site-header .vj-head-logo {
    width: auto; min-width: 0;
    height: auto;
    display: inline-flex;
    align-items: center;
    padding: 8px 24px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 10px 30px rgba(4, 38, 42, .16);
  }
  .vj-premium .site-header .vj-head-logo a.table-cell { display: inline-flex; align-items: center; }
  .vj-premium .site-header .vj-head-logo a.table-cell img {
    height: 57px;
    max-width: 208px;
  }
}

/* circular icon buttons (used in the actions pill) */
.vj-premium .vj-head-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: transparent; border: 0;
  color: var(--vj-primary);
  font-size: 1rem; line-height: 1;
  cursor: pointer;
  transition: background .22s var(--vj-ease), color .22s var(--vj-ease), transform .22s var(--vj-ease);
}
.vj-premium .vj-head-icon-btn:hover { background: rgba(6,97,104,.1); color: var(--vj-primary-700); transform: translateY(-1px); }
.vj-premium .vj-head-avatar { width: 30px; height: 30px; border-radius: 999px; object-fit: cover; }

/* ---------- DESKTOP: three floating groups ---------- */
@media (min-width: 1024px) {
  /* compact, balanced header row; trim the theme's heavy side padding so the
     three floating groups have room */
  .vj-premium .site-header .main-bar-wraper > div {
    min-height: 6.4rem;
    padding-inline: 26px;
  }

  /* pack the three groups into one compact, centred composition
     (logo · nav pill · actions) instead of spreading edge-to-edge */
  .vj-premium .site-header .main-bar-wraper > div > div {
    justify-content: center;
    align-items: center;
    gap: 68px;
  }
  /* tighten spacing between the logo capsule and the menu capsule */
  .vj-premium .site-header .main-bar-wraper > div > div > .vj-head-logo + .header-nav { margin-left: -34px; }

  /* centre group sizes to its pill (no grow → no huge empty gaps),
     and does not stretch the pill vertically */
  .vj-premium .header-nav { flex-grow: 0; align-items: center; }

  .vj-premium .navbar-nav.vj-nav-pill {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 13px;
    padding: 9px 21px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 10px 30px rgba(4, 38, 42, .16);
  }
  .vj-premium .vj-nav-pill > li { display: inline-block; }
  .vj-premium .vj-nav-pill .vj-nav-link {
    display: inline-block;
    padding: 16px 21px !important;
    border-radius: 999px;
    font-weight: 600;
    font-size: 16px;                     /* slightly smaller labels, less visual weight */
    line-height: 1;
    white-space: nowrap;                 /* labels never wrap inside the pill */
    color: var(--vj-primary) !important;
    text-shadow: none;
    transition: background .25s var(--vj-ease), color .25s var(--vj-ease);
  }
  .vj-premium .vj-nav-pill .vj-nav-link:hover {
    background: rgba(6, 97, 104, .1);
    color: var(--vj-primary-700) !important;
  }
  /* active item = gold capsule, dark-teal text */
  .vj-premium .vj-nav-pill .vj-nav-link.vj-nav-active {
    background: var(--vj-accent);
    color: var(--vj-primary-700) !important;
    box-shadow: 0 6px 16px rgba(255, 170, 13, .42);
  }

  /* right group = actions pill */
  .vj-premium .vj-head-actions {
    gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 10px 30px rgba(4, 38, 42, .16);
  }
  .vj-premium .vj-head-actions .vj-head-icon-btn {
    width: 52px;
    height: 52px;
    font-size: 1.2rem;
  }
  .vj-premium .vj-head-actions .vj-head-avatar {
    width: 38px;
    height: 38px;
  }

  /* ---- sticky: stronger glass, condensed, still floating ---- */
  .vj-premium .site-header.is-fixed .main-bar-wraper > div { min-height: 5.8rem; }
  .vj-premium .site-header.is-fixed .navbar-nav.vj-nav-pill,
  .vj-premium .site-header.is-fixed .vj-head-actions,
  .vj-premium .site-header.is-fixed .vj-head-logo {
    background: #fff;
    box-shadow: 0 14px 36px rgba(4, 38, 42, .22);
  }
  .vj-premium .site-header.is-fixed a.table-cell img { transform: scale(.94); }
}

/* Small-desktop band (1024–1199): compact the pill so all five labels
   stay on one line without crowding the actions pill. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .vj-premium .site-header .main-bar-wraper > div { padding-inline: 16px; }
  .vj-premium .site-header .main-bar-wraper > div > div { gap: 22px; }
  .vj-premium .site-header .main-bar-wraper > div > div > .vj-head-logo + .header-nav { margin-left: -10px; }
  .vj-premium .site-header .vj-head-logo { padding: 5px 14px; }
  .vj-premium .navbar-nav.vj-nav-pill { gap: 4px; padding: 6px 12px; }
  .vj-premium .vj-nav-pill .vj-nav-link { padding: 10px 12px !important; font-size: .88rem; }
  .vj-premium .vj-head-actions { gap: 5px; padding: 6px 10px; }
  .vj-premium .vj-head-icon-btn { width: 38px; height: 38px; }
}

/* ---------- MOBILE / TABLET (<1024): drawer behaviour unchanged ---------- */
@media (max-width: 1023px) {
  .vj-premium .site-header {
    position: fixed !important;
    left: 0;
    right: 0;
    top: 0;
  }
  .vj-premium .site-header .main-bar-wraper > div {
    min-height: 76px;
    padding: 12px 16px;
    border-radius: 0;
  }
  .vj-premium .site-header .main-bar-wraper > div > div {
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  /* nav reverts to the drawer list — strip the pill chrome */
  .vj-premium .navbar-nav.vj-nav-pill {
    display: block; background: none; border: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; border-radius: 0;
  }
  .vj-premium .header-nav .navbar-nav > li > a { font-weight: 600; font-size: 1.05rem; }
  .vj-premium .vj-nav-pill .vj-nav-link.vj-nav-active { color: var(--vj-accent-600) !important; }

  /* separate mobile/tablet logo capsule */
  .vj-premium .site-header .vj-head-logo {
    width: auto;
    min-width: 0;
    height: 52px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .58);
    box-shadow: 0 12px 30px rgba(4, 38, 42, .18);
  }
  .vj-premium .site-header a.table-cell {
    display: inline-flex;
    align-items: center;
  }
  .vj-premium .site-header a.table-cell img {
    height: 38px;
    width: auto;
    max-width: 112px;
  }

  /* top bar = logo + search + hamburger; account dropdown lives in drawer */
  .vj-premium .site-header .user-dropdown { display: none; }

  /* second mobile/tablet capsule: search + hamburger, joined visually */
  .vj-premium .vj-head-actions-wrap {
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 4px 6px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .72);
    box-shadow: 0 12px 30px rgba(4, 38, 42, .18);
    overflow: hidden;
  }
  .vj-premium .site-header:has(.header-nav.show) .vj-head-actions-wrap {
    z-index: 1000;
    background: #fff;
  }
  .vj-premium .vj-head-actions {
    height: 42px;
    gap: 0;
    align-items: center;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .vj-premium .vj-head-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: transparent !important;
    border: 0;
    box-shadow: none;
    color: var(--vj-primary);
  }
  .vj-premium .xmenu-toggler {
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none !important;
    margin: 0 !important;
    border-radius: 999px;
    background: transparent !important;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .vj-premium .xmenu-toggler span {
    left: 12px;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--vj-primary) !important;
    box-shadow: 7px 0 0 var(--vj-primary), 14px 0 0 var(--vj-primary);
    transform-origin: center;
  }
  .vj-premium .xmenu-toggler span:nth-child(1) { top: 11px; }
  .vj-premium .xmenu-toggler span:nth-child(2) { top: 18px; }
  .vj-premium .xmenu-toggler span:nth-child(3) { top: 25px; }
  .vj-premium .xmenu-toggler.open span:nth-child(1) {
    top: 20px;
    left: 8px;
    width: 26px;
    height: 3px;
    border-radius: 999px;
    box-shadow: none;
    transform: rotate(45deg);
  }
  .vj-premium .xmenu-toggler.open span:nth-child(2) {
    top: 20px;
    left: 8px;
    width: 26px;
    height: 3px;
    border-radius: 999px;
    box-shadow: none;
    opacity: 0;
    transform: scaleX(0);
  }
  .vj-premium .xmenu-toggler.open span:nth-child(3) {
    top: 20px;
    left: 8px;
    width: 26px;
    height: 3px;
    border-radius: 999px;
    box-shadow: none;
    transform: rotate(-45deg);
  }
  .vj-premium .site-header.is-fixed .vj-head-logo,
  .vj-premium .site-header.is-fixed .vj-head-actions-wrap {
    background: #fff !important;
    box-shadow: 0 14px 36px rgba(4, 38, 42, .22);
  }
  .vj-premium .site-header.is-fixed .vj-head-actions,
  .vj-premium .site-header.is-fixed .xmenu-toggler {
    background: transparent !important;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .vj-premium .site-header.is-fixed .vj-head-icon-btn { color: var(--vj-primary); }

  /* info button: keep only the fixed "INFO" edge tab (existing offcanvas access) */
  .vj-premium .vj-head-info-btn { width: auto; height: auto; padding: 0; background: none; }
  .vj-premium .vj-head-info-btn > i { display: none; }
  .vj-premium .vj-head-info-btn:hover { background: none; transform: none; }
}

/* ============================================================
   MOBILE NAVIGATION DRAWER — account-aware premium sidebar
   (mobile-only: the drawer markup is lg:hidden / the container
   rules live in the max-width media query below)
   ============================================================ */

/* --- Drawer shell: width, slide, scroll (overrides Tailwind w-72/-left-75
       and the inline `.header-nav{overflow:visible!important}`) --- */
@media (max-width: 1023px) {
  .vj-premium .header-nav {
    width: 86vw !important;
    max-width: 380px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 18px 18px;
    box-shadow: 0 0 60px rgba(4, 38, 42, .25);
  }
  .vj-premium .header-nav:not(.show) { left: calc(-1 * min(86vw, 380px) - 60px); }
  .vj-premium .header-nav.show { left: 0; }

  /* the sibling-selector rule in style.css never matches this DOM order;
     reveal the existing .menu-close overlay (its JS hook is already bound) */
  .vj-premium .site-header:has(.header-nav.show) .menu-close.fade-overlay {
    opacity: .5;
    visibility: visible;
    pointer-events: auto;
  }

  /* --- Main nav rows: icon + label + subtle chevron, rounded, filled active --- */
  .vj-premium .header-nav .navbar-nav > li {
    border-bottom: 0 !important;
    margin-bottom: 2px;
  }
  .vj-premium .header-nav .navbar-nav > li > a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 10px 12px !important;
    border-radius: 13px;
    font-size: 1rem !important;
    font-weight: 600;
    color: var(--vj-primary);
    transition: background .2s var(--vj-ease), color .2s var(--vj-ease);
  }
  .vj-premium .header-nav .navbar-nav > li > a:hover {
    background: var(--vj-surface-2);
    color: var(--vj-primary-700);
  }
  .vj-premium .header-nav .navbar-nav > li > a.vj-nav-active {
    background: rgba(6, 97, 104, .1);
    color: var(--vj-primary-700) !important;
  }
  .vj-premium .header-nav .navbar-nav > li > a.vj-nav-active .vj-mnav-ico { color: var(--vj-primary-700); }
  .vj-premium .header-nav .navbar-nav > li > a.vj-nav-active .vj-mnav-chev { color: var(--vj-primary-600); opacity: 1; }
}

.vj-mnav-ico {
  width: 22px;
  flex: 0 0 22px;
  text-align: center;
  font-size: .95rem;
  color: var(--vj-primary-600);
}
.vj-mnav-chev {
  margin-left: auto;
  font-size: .62rem;
  color: var(--vj-ink-soft, #7b8a8c);
  opacity: .55;
}

/* --- Top row (logo + close button) --- */
.vj-drawer-close {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--vj-surface-2);
  color: var(--vj-primary);
  font-size: .95rem;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--vj-border);
  transition: background .2s var(--vj-ease), color .2s var(--vj-ease);
}
.vj-drawer-close:hover { background: var(--vj-primary); color: #fff; }

/* --- Identity block: real user profile OR guest welcome --- */
.vj-drawer-identity { margin: 2px 0 16px; }

.vj-drawer-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(6, 97, 104, .08), rgba(255, 170, 13, .07));
  box-shadow: inset 0 0 0 1px var(--vj-border);
}
.vj-drawer-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--vj-primary);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
}
img.vj-drawer-avatar {
  display: block;
  object-fit: cover;
  overflow: hidden;
}
.vj-drawer-id { display: flex; flex-direction: column; min-width: 0; }
.vj-drawer-name {
  font-weight: 700;
  color: var(--vj-primary-700);
  font-size: .98rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vj-drawer-sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .74rem;
  font-weight: 600;
  color: var(--vj-primary-600);
}
.vj-drawer-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--vj-accent);
}

.vj-drawer-guest {
  padding: 14px;
  border-radius: 16px;
  background: var(--vj-surface-2);
  box-shadow: inset 0 0 0 1px var(--vj-border);
}
.vj-drawer-guest-title {
  font-weight: 700;
  color: var(--vj-primary-700);
  font-size: .98rem;
  margin-bottom: 4px;
}
.vj-drawer-guest-text {
  font-size: .8rem;
  line-height: 1.45;
  color: var(--vj-ink-soft, #5c6b6d);
  margin-bottom: 12px;
}
.vj-drawer-guest-actions { display: flex; gap: 8px; }
.vj-drawer-auth-btn {
  flex: 1;
  text-align: center;
  padding: 9px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .85rem;
  transition: transform .2s var(--vj-ease), box-shadow .2s var(--vj-ease), background .2s var(--vj-ease);
}
.vj-drawer-auth-primary {
  background: var(--vj-accent);
  color: var(--vj-primary-700);
  box-shadow: 0 8px 18px rgba(255, 170, 13, .28);
}
.vj-drawer-auth-ghost {
  background: #fff;
  color: var(--vj-primary);
  box-shadow: inset 0 0 0 1px var(--vj-border);
}
.vj-drawer-auth-btn:active { transform: scale(.97); }

/* --- Account section (authenticated only) --- */
.vj-drawer-account {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--vj-border);
}
.vj-drawer-section-label {
  display: block;
  padding: 0 12px 6px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--vj-ink-soft, #7b8a8c);
}
.vj-drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 9px 12px;
  margin-bottom: 2px;
  border-radius: 13px;
  color: var(--vj-primary);
  font-weight: 600;
  font-size: .95rem;
  transition: background .2s var(--vj-ease), color .2s var(--vj-ease);
}
.vj-drawer-link > i:first-child {
  width: 22px;
  flex: 0 0 22px;
  text-align: center;
  font-size: .9rem;
  color: var(--vj-primary-600);
}
.vj-drawer-link:hover { background: var(--vj-surface-2); color: var(--vj-primary-700); }
.vj-drawer-logout { color: #dc2626; }
.vj-drawer-logout > i:first-child { color: #dc2626; }
.vj-drawer-logout:hover { background: rgba(220, 38, 38, .07); color: #b91c1c; }

/* --- Footer: CTA + social --- */
.vj-drawer-footer {
  margin-top: auto;
  padding-top: 22px;
}
.vj-drawer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--vj-primary);
  color: #fff;
  font-weight: 700;
  font-size: .93rem;
  box-shadow: 0 12px 26px rgba(6, 97, 104, .3);
  transition: background .2s var(--vj-ease), transform .2s var(--vj-ease);
}
.vj-drawer-cta:hover { background: var(--vj-primary-700); color: #fff; transform: translateY(-1px); }
.vj-drawer-cta i { font-size: .8rem; }
.vj-drawer-social {
  margin-top: 16px;
  padding: 14px 0 4px;
  border-top: 1px solid var(--vj-border);
  text-align: center;
}
.vj-drawer-social-label {
  display: block;
  margin-bottom: 10px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--vj-ink-soft, #7b8a8c);
}
.vj-drawer-social-row {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.vj-drawer-social-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--vj-surface-2);
  color: var(--vj-primary);
  font-size: .85rem;
  box-shadow: inset 0 0 0 1px var(--vj-border);
  transition: background .2s var(--vj-ease), color .2s var(--vj-ease), transform .2s var(--vj-ease);
}
.vj-drawer-social-btn:hover {
  background: var(--vj-primary);
  color: #fff;
  transform: translateY(-2px);
}

/* ============================================================
   HERO + FLOATING SEARCH — Tourex "HomeThree" Banner + BannerForm
   inspired, original Voyaji build. Keeps the Voyaji <video> and the
   voyage_search GET form (action, fields, loops, names) untouched.
   ============================================================ */

/* Hero slider shell */
.vj-premium .vj-hero { position: relative; }
.vj-premium .vj-hero-swiper { height: 92vh; min-height: 580px; }
.vj-premium .vj-hero-slide {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}
@media (max-width: 1024px) { .vj-premium .vj-hero-swiper { height: 88vh; } }
@media (max-width: 768px)  { .vj-premium .vj-hero-swiper { height: 86vh; min-height: 520px; } }

/* Layer 1 — background video */
.vj-premium .vj-hero-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}
/* Layer 2 — controlled overlay (darkens the VIDEO only, sits behind content) */
.vj-premium .vj-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,38,42,.38) 0%, rgba(4,38,42,.18) 26%, rgba(4,38,42,.50) 74%, rgba(4,38,42,.68) 100%),
    radial-gradient(ellipse 72% 58% at 50% 50%, rgba(4,38,42,.42) 0%, rgba(4,38,42,0) 72%);
}
/* Layer 2.5 — animated blueprint grid mesh + interactive hover cell.
   Canvas at full opacity; intrinsic alphas keep the grid subtle while the
   hover highlight renders at its proper spec intensity. */
.vj-premium .vj-hero-fx {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;          /* clicks pass through to CTAs */
}

/* Layer 3 — content (always above overlay; never inherits fade) */
.vj-premium .vj-hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  text-align: center;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  padding-bottom: 92px;          /* clears the overlapping search panel */
}
/* Desktop: reserve the floating header's vertical footprint before centring
   the hero copy. This keeps the eyebrow clear of the navigation on shorter
   laptop viewports while preserving the balanced composition on tall screens. */
@media (min-width: 1024px) {
  .vj-premium .vj-hero-swiper { min-height: 840px; }
  .vj-premium .vj-hero-slide { align-items: stretch; }
  .vj-premium .vj-hero-content {
    display: flex;
    align-items: center;
    padding-top: 80px;
  }
  .vj-premium .vj-hero-content .container { width: 100%; }
}
@media (max-width: 768px) { .vj-premium .vj-hero-content { padding-bottom: 54px; } }
.vj-premium .vj-hero-content .container { max-width: 1000px; }

.vj-hero-eyebrow {
  display: block;
  font-family: var(--font-script);
  text-transform: none;
  letter-spacing: normal;
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.1;
  font-weight: 400;
  color: var(--vj-accent);
  text-align: center;
  margin-bottom: 24px;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.vj-premium .vj-hero-title {
  color: #ffffff;
  opacity: 1;
  font-family: var(--font-google-sans);
  font-weight: 600;                     /* Google Sans SemiBold */
  letter-spacing: -.06em;               /* ≈ Adobe tracking -60 */
  line-height: .98;
  font-size: clamp(2.4rem, 5.2vw, 4.9rem);
  margin: 0 auto 24px;
  max-width: 17ch;
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.35);
}
/* tablet/mobile: tighten the eyebrow-to-title gap without changing hero sizing */
@media (max-width: 1024px) {
  .vj-hero-eyebrow { margin-bottom: 14px; }
  .vj-premium .vj-hero-title { margin-top: 0; }
}
@media (max-width: 767px) {
  .vj-hero-eyebrow { margin-bottom: 8px; }
}
/* reusable two-line hero title — both lines share identical typography */
.hero-title__line {
  display: block;
  font-family: inherit;
  font-weight: 600;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-transform: none;
}

/* Google Sans on public headings + major promotional/card titles only */
.vj-premium h1,
.vj-premium h2,
.vj-premium h3,
.vj-premium .font-display,
.vj-wk-title a,
.vj-exp-title,
.vj-greviews-title,
.vj-premium .activity2026-card h3,
.vj-premium .activities2026-empty h4,
.vj-premium .vip2026-info-box h4 {
  font-family: var(--font-heading);
}
.vj-premium footer a .font-display {
  font-family: var(--font-body);
}
.vj-premium .accordion-box .myAccordion .accordion-button {
  font-family: var(--font-body);
}
.vj-hero-sub {
  color: rgba(255,255,255,.95);
  opacity: 1;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.7;
  max-width: 62ch;
  margin: 0 auto 34px;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
/* mobile: relax hero-title tracking slightly to prevent letter collisions */
@media (max-width: 767px) {
  .vj-premium .vj-hero-title { letter-spacing: -.04em; line-height: 1; }
}
.vj-hero-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

.vj-premium .vj-hero-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 32px;
  border-radius: 999px;
  font-weight: 700; font-size: 1rem;
  transition: transform .25s var(--vj-ease), box-shadow .25s var(--vj-ease),
              background .25s var(--vj-ease), color .25s var(--vj-ease);
}
.vj-premium .vj-hero-btn-primary {
  background: linear-gradient(135deg, var(--vj-accent), var(--vj-accent-600));
  color: var(--vj-primary-700);
  box-shadow: 0 16px 30px rgba(255,170,13,.34);
}
.vj-premium .vj-hero-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px rgba(255,170,13,.46);
  color: var(--vj-primary-700);
}
.vj-premium .vj-hero-btn-secondary {
  background: rgba(4,38,42,.34);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.78);
  backdrop-filter: blur(5px);
}
.vj-premium .vj-hero-btn-secondary:hover {
  background: #fff; color: var(--vj-primary-700); transform: translateY(-3px);
}

.vj-hero-social-proof {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
  color: #fff;
}
.vj-hero-social-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(360px, 100%);
  color: rgba(255,255,255,.9);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .34em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0,0,0,.42);
}
.vj-hero-social-heading::before,
.vj-hero-social-heading::after {
  content: "";
  flex: 1 1 56px;
  height: 1px;
  min-width: 42px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.58));
}
.vj-hero-social-heading::after {
  background: linear-gradient(90deg, rgba(255,255,255,.58), rgba(255,255,255,0));
}
.vj-hero-social-heading span {
  display: inline-block;
  padding-left: .34em;
}
.vj-hero-social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.vj-hero-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 16px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .25s var(--vj-ease), border-color .25s var(--vj-ease),
              background .25s var(--vj-ease), box-shadow .25s var(--vj-ease),
              color .25s var(--vj-ease);
}
.vj-hero-social-link:hover,
.vj-hero-social-link:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.18);
  color: var(--vj-accent);
  box-shadow: 0 20px 42px rgba(0,0,0,.24), 0 0 22px rgba(255,170,13,.24),
              inset 0 1px 0 rgba(255,255,255,.32);
}
.vj-hero-social-link:focus-visible {
  outline: 2px solid rgba(255,255,255,.88);
  outline-offset: 4px;
}
@media (max-width: 768px) {
  .vj-hero-social-proof {
    gap: 13px;
    margin-top: 24px;
  }
  .vj-hero-social-heading {
    gap: 10px;
    width: min(310px, 100%);
    font-size: .68rem;
    letter-spacing: .28em;
  }
  .vj-hero-social-links {
    gap: 12px;
  }
  .vj-hero-social-link {
    width: 44px;
    height: 44px;
  }
}

/* ---- Floating search panel (overlaps hero bottom) ---- */
.vj-hero-search-section {
  position: relative;
  z-index: 20;
  margin-top: -84px;
  padding: 0 20px 10px;
}
/* white backdrop for the area below the hero (kills the pale-blue body bg
   showing around/under the panel). Starts at the hero overlap (84px) so it
   never paints over the hero image; sits behind the panel (z-index 1). */
.vj-hero-search-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 84px;
  bottom: 0;
  z-index: 0;
  background: #fff;
  pointer-events: none;
}
.vj-hero-search-panel {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid rgba(219, 229, 232, .88);
  border-radius: 30px;
  box-shadow: 0 28px 70px rgba(4, 38, 42, .18);
  padding: 28px 32px 30px;
}
@media (max-width: 768px) {
  .vj-hero-search-section { margin-top: -36px; padding: 0 16px; }
  .vj-hero-search-section::after { top: 36px; }   /* match the smaller hero overlap */
  .vj-hero-search-panel {
    border-radius: 28px;
    box-shadow: 0 24px 55px rgba(4, 38, 42, .16);
    padding: 22px 18px 24px;
  }
}

/* ---- Category tabs (Tourex-style) inside the floating search panel ---- */
.vj-cat-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
  padding: 2px 0 12px;
}
.vj-premium .vj-cat-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 118px;
  height: 48px;
  padding: 0 22px;
  border: 1px solid var(--vj-border);
  border-radius: 999px;
  background: #fff;
  color: var(--vj-muted);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color .22s var(--vj-ease), background .22s var(--vj-ease),
              border-color .22s var(--vj-ease), box-shadow .22s var(--vj-ease),
              transform .22s var(--vj-ease);
}
.vj-premium .vj-cat-tab i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  color: var(--vj-cat-color, var(--vj-primary));
  transition: color .2s var(--vj-ease);
}
.vj-premium .vj-cat-tab span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.vj-premium .vj-cat-tab:hover {
  color: var(--vj-cat-ink, var(--vj-primary-700));
  border-color: var(--vj-cat-color, var(--vj-primary));
  background: var(--vj-cat-soft, #f3f9f9);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px var(--vj-cat-shadow, rgba(4,38,42,.08));
}
.vj-premium .vj-cat-tab.is-active {
  position: relative;
  z-index: 2;
  color: #fff;
  background: var(--vj-cat-color, var(--vj-primary));
  border-color: var(--vj-cat-color, var(--vj-primary));
  box-shadow: none;
}
.vj-premium .vj-cat-tab.is-active i { color: #fff; }

/* Per-category color identity (icon + hover/active accents) */
.vj-premium .vj-cat-tab[data-cat-value=""] {
  --vj-cat-color: #f0a92c;         /* Voyaji gold */
  --vj-cat-ink:   #8a5a08;
  --vj-cat-soft:  #fff6e2;
  --vj-cat-shadow: rgba(240,169,44,.18);
  --vj-cat-shadow-strong: rgba(240,169,44,.34);
}
.vj-premium .vj-cat-tab[data-cat-value="desert"] {
  --vj-cat-color: #e0803a;         /* warm sand orange */
  --vj-cat-ink:   #8a3f0f;
  --vj-cat-soft:  #fdefe1;
  --vj-cat-shadow: rgba(224,128,58,.18);
  --vj-cat-shadow-strong: rgba(224,128,58,.32);
}
.vj-premium .vj-cat-tab[data-cat-value="mer"] {
  --vj-cat-color: #1f8fb3;         /* turquoise blue */
  --vj-cat-ink:   #0d4d66;
  --vj-cat-soft:  #e4f4fa;
  --vj-cat-shadow: rgba(31,143,179,.18);
  --vj-cat-shadow-strong: rgba(31,143,179,.32);
}
.vj-premium .vj-cat-tab[data-cat-value="montagne"] {
  --vj-cat-color: #3a6b57;         /* deep forest / slate green */
  --vj-cat-ink:   #1c3a2f;
  --vj-cat-soft:  #e7f0eb;
  --vj-cat-shadow: rgba(58,107,87,.18);
  --vj-cat-shadow-strong: rgba(58,107,87,.32);
}
.vj-premium .vj-cat-tab[data-cat-value="nature"] {
  --vj-cat-color: #5aa843;         /* fresh green */
  --vj-cat-ink:   #2c5a1c;
  --vj-cat-soft:  #ecf6e5;
  --vj-cat-shadow: rgba(90,168,67,.18);
  --vj-cat-shadow-strong: rgba(90,168,67,.32);
}

/* Thin divider under the category tabs */
.vj-cat-divider {
  height: 1px;
  width: 100%;
  background: #fff;
  margin: 24px 0 24px;
}

/* Tablet (641–1023px): wrapped rows keep breathing room on every side so the
   active pill's border/shadow never touches the panel edges */
@media (min-width: 641px) and (max-width: 1023px) {
  .vj-cat-tabs { padding: 10px 14px 16px; }
}

/* Mobile: all tabs visible at once in a 2-column grid — no horizontal
   scrolling. The wrapper stays overflow-visible so shadows never clip.
   An odd trailing tab (e.g. Nature) centers across both columns. */
@media (max-width: 640px) {
  .vj-cat-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
    margin: 0;
    padding: 10px 4px 16px;
  }
  .vj-premium .vj-cat-tab {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 14px;
  }
  .vj-premium .vj-cat-tab:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: max-content;
    min-width: 132px;
    padding: 0 24px;
  }
  .vj-cat-divider { margin: 18px 0 20px; }
}

/* ---- Search panel fields: label + gray pill inputs ---- */
.vj-field { position: relative; }

/* One grid drives the whole bottom row: Destination | Date | Budget | Search.
   align-items:end keeps pills and button on the same baseline (labels sit above). */
.vj-search-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(158px, .62fr);
  gap: 16px;
  align-items: end;
}

.vj-premium .vj-field-label {
  display: block;
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--vj-ink);
  margin-bottom: 10px;
  padding: 0;
}

.vj-premium .vj-input-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 60px;
  padding: 0 22px;
  background: #fff;
  border: 1px solid #dbe5e8;
  border-radius: 18px;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 1px rgba(4,38,42,.03);
  transition: box-shadow .2s var(--vj-ease), border-color .2s var(--vj-ease), background .2s var(--vj-ease);
}
.vj-premium button.vj-input-pill:hover,
.vj-premium .vj-input-pill:focus-within {
  background: #fff;
  border-color: #cbd9dc;
  box-shadow: inset 0 1px 1px rgba(4,38,42,.03);
}

.vj-pill-text {
  font-weight: 600;
  font-size: 1rem;
  color: var(--vj-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vj-pill-text.is-placeholder { color: #9aa3a6; font-weight: 500; }

.vj-pill-icon { flex: 0 0 auto; font-size: 1rem; color: #7d888c; }

.vj-premium .vj-pill-input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  outline: none;
  font-weight: 600;
  font-size: 1rem;
  color: var(--vj-ink);
  cursor: text;
}
.vj-premium .vj-pill-input::placeholder { color: #9aa3a6; font-weight: 500; }

/* Budget pill: combobox — the client types any amount or picks one of the
   predefined MAD suggestions (input + datalist). Same pill look; the pill's
   own chevron stays and clicks pass through it to the input. */
.vj-premium .vj-budget-pill { position: relative; }
.vj-premium .vj-budget-pill .vj-pill-input {
  padding-right: 30px;   /* keeps text clear of the chevron */
  appearance: textfield;
  -moz-appearance: textfield;
}
.vj-premium .vj-budget-pill .vj-pill-input::-webkit-inner-spin-button,
.vj-premium .vj-budget-pill .vj-pill-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.vj-premium .vj-budget-pill .vj-pill-input::-webkit-calendar-picker-indicator {
  display: none !important;
}
.vj-premium .vj-budget-pill .vj-pill-icon {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Hidden native select — stays in the form so the same param is submitted */
.vj-native-hidden { display: none; }

/* Destination dropdown menu (pin list, like the reference) */
.vj-dest-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 60;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--vj-border);
  border-radius: 18px;
  box-shadow: 0 24px 55px rgba(4,38,42,.18);
  max-height: 330px;
  overflow-y: auto;
}
.vj-dest-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  font-size: 1.02rem;
  font-weight: 500;
  color: #55636a;
  cursor: pointer;
  transition: background .15s var(--vj-ease), color .15s var(--vj-ease);
}
.vj-dest-option:hover { background: #f4f8f8; color: var(--vj-primary-700); }
.vj-dest-option.is-selected { color: var(--vj-primary); font-weight: 700; }
.vj-dest-pin {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e3e7e8;
  border-radius: 999px;
  color: #7d888c;
  font-size: .95rem;
  background: #fff;
}
.vj-dest-option:hover .vj-dest-pin,
.vj-dest-option.is-selected .vj-dest-pin { color: var(--vj-primary); border-color: var(--vj-primary); }

/* Calendar popup (shadcn-inspired day picker) */
.vj-cal {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 60;
  width: 296px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--vj-border);
  border-radius: 16px;
  box-shadow: 0 24px 55px rgba(4,38,42,.18);
}
.vj-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.vj-cal-title {
  font-size: .92rem;
  font-weight: 600;
  color: var(--vj-ink);
}
.vj-premium .vj-cal-nav {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px;
  background: transparent;
  color: #8b9498;
  font-size: .85rem;
  cursor: pointer;
  transition: background .15s var(--vj-ease), color .15s var(--vj-ease);
}
.vj-premium .vj-cal-nav:hover { background: #f2f5f5; color: var(--vj-ink); }
.vj-cal-weekdays, .vj-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.vj-cal-weekday {
  height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem;
  font-weight: 600;
  color: #9aa3a6;
  text-transform: uppercase;
}
.vj-premium .vj-cal-day {
  position: relative;
  height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px;
  background: transparent;
  font-size: .9rem;
  color: var(--vj-ink);
  cursor: pointer;
  transition: background .15s var(--vj-ease), color .15s var(--vj-ease);
}
.vj-premium .vj-cal-day:hover { background: #eef4f4; }
.vj-premium .vj-cal-day.is-outside { color: #c3cbcd; }
.vj-premium .vj-cal-day.is-today::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 50%;
  width: 4px; height: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--vj-primary);
}
.vj-premium .vj-cal-day.is-selected {
  background: var(--vj-primary);
  color: #fff;
}
.vj-premium .vj-cal-day.is-selected.is-today::after { background: #fff; }

/* calendar footer — reset/clear the chosen date (shared date filter) */
.vj-cal-foot { margin-top: 8px; display: flex; justify-content: flex-end; }
.vj-premium .vj-cal-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--vj-primary);
  font-weight: 600;
  font-size: .82rem;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background .2s var(--vj-ease);
}
.vj-premium .vj-cal-clear:hover { background: #eef4f4; }

@media (max-width: 640px) {
  .vj-cal { left: 50%; transform: translateX(-50%); }
}

/* Branded search button — same height/radius as the input pills so the
   whole bottom row reads as one aligned band (Tourex-like). */
.vj-premium .vj-hero-search-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  height: 60px; padding: 0 22px;
  border-radius: 18px;
  background: var(--vj-primary);
  color: #fff; font-weight: 700; font-size: 1rem;
  border: 0; white-space: nowrap;
  box-shadow: 0 10px 24px rgba(6,97,104,.24);
  transition: transform .22s var(--vj-ease), box-shadow .22s var(--vj-ease), background .22s var(--vj-ease);
}
.vj-premium .vj-hero-search-btn:hover {
  background: var(--vj-primary-700); transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(6,97,104,.34);
}

/* Tablet (641–1023px): 2×2 grid — Destination|Date on top, Budget|Search below */
@media (max-width: 1023px) {
  .vj-search-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .vj-hero-search-panel {
    padding: 24px 22px 26px;
  }
}

/* Mobile (≤640px): single column stack */
@media (max-width: 640px) {
  .vj-hero-search-panel {
    border-radius: 28px;
    padding: 22px 18px 24px;
  }
  .vj-search-fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .vj-premium .vj-input-pill,
  .vj-premium .vj-hero-search-btn {
    height: 56px;
    border-radius: 18px;
  }
}

/* ---- Hero slider: nav arrows, pagination (crossfade handled by Swiper fadeEffect) ---- */
/* Circular white arrows, vertically centred, safely inset */
.vj-premium .vj-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  width: 50px; height: 50px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--vj-primary-700);
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(4,38,42,.28);
  transition: background .25s var(--vj-ease), color .25s var(--vj-ease),
              transform .25s var(--vj-ease), box-shadow .25s var(--vj-ease);
}
.vj-premium .vj-hero-prev { left: 28px; }
.vj-premium .vj-hero-next { right: 28px; }
.vj-premium .vj-hero-arrow:hover {
  background: var(--vj-accent);
  color: var(--vj-primary-700);
  box-shadow: 0 14px 30px rgba(255,170,13,.4);
}
.vj-premium .vj-hero-prev:hover { transform: translateY(-50%) scale(1.08) translateX(-2px); }
.vj-premium .vj-hero-next:hover { transform: translateY(-50%) scale(1.08) translateX(2px); }
.vj-premium .vj-hero-arrow.swiper-button-disabled { opacity: .45; cursor: default; }

/* Pagination dots near the lower part of the hero (above the search panel) */
.vj-premium .vj-hero-pagination {
  position: absolute;
  left: 0; right: 0;
  bottom: 122px;
  z-index: 12;
  display: flex; justify-content: center; gap: 9px;
}
.vj-premium .vj-hero-pagination .swiper-pagination-bullet {
  width: 9px; height: 9px;
  background: rgba(255,255,255,.55);
  opacity: 1; border-radius: 999px;
  transition: width .3s var(--vj-ease), background .3s var(--vj-ease);
}
.vj-premium .vj-hero-pagination .swiper-pagination-bullet-active {
  width: 28px; background: var(--vj-accent);
}

/* Tablet — slightly smaller arrows, safe spacing */
@media (max-width: 1024px) {
  .vj-premium .vj-hero-arrow { width: 46px; height: 46px; }
  .vj-premium .vj-hero-prev { left: 18px; }
  .vj-premium .vj-hero-next { right: 18px; }
}

/* Mobile — smaller arrows moved to the lower hero, clear of title & CTAs */
@media (max-width: 640px) {
  .vj-premium .vj-hero-arrow {
    width: 40px; height: 40px;
    top: auto; bottom: 132px;
    transform: none;
  }
  .vj-premium .vj-hero-prev { left: 14px; }
  .vj-premium .vj-hero-next { right: 14px; }
  .vj-premium .vj-hero-prev:hover,
  .vj-premium .vj-hero-next:hover { transform: scale(1.06); }
  .vj-premium .vj-hero-pagination { bottom: 90px; }
}

/* Respect reduced motion — no arrow transforms */
@media (prefers-reduced-motion: reduce) {
  .vj-premium .vj-hero-arrow { transition: none; }
}

/* ============================================================
   EXPÉRIENCES VOYAJI — centered promo section below the search
   panel: light logo watermark, eyebrow/heading/CTA, four floating
   image cards (absolute on desktop, 2-col grid on tablet/mobile).
   ============================================================ */
.vj-exp-section {
  position: relative;
  overflow: hidden;            /* scaled cards never create page overflow */
  padding: 88px 20px 72px;
  background: #fff;
}
.vj-exp-section img[src*="logoi.png"] { display: none !important; }

/* faint centered logo watermark — lives inside .vj-exp-content so it always
   sits behind the eyebrow/title band, wherever the text lands. */
.vj-exp-watermark {
  display: none !important;
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;                /* behind the text within the content block */
  width: 260px;
  max-width: 55vw;
  opacity: .09;
  filter: saturate(.6);
  pointer-events: none;
  user-select: none;
}

.vj-exp-content {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  padding-top: 34px;         /* separation between the logo and the eyebrow */
  text-align: center;
}
.vj-exp-eyebrow {
  display: inline-block;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.1;
  color: var(--vj-accent-600);
  margin-bottom: 14px;
}
.vj-exp-title {
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.14;
  color: var(--vj-ink);
  margin-bottom: 18px;
}
.vj-exp-text {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--vj-muted);
  margin-bottom: 28px;
}
.vj-exp-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 14px;
  background: rgba(255, 170, 13, .14);
  color: #8a5a08;
  font-weight: 700;
  font-size: .95rem;
  transition: background .25s var(--vj-ease), color .25s var(--vj-ease),
              transform .25s var(--vj-ease), box-shadow .25s var(--vj-ease);
}
.vj-exp-cta:hover {
  background: var(--vj-accent);
  color: var(--vj-primary-700);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(255, 170, 13, .32);
}
.vj-exp-cta i { font-size: .85rem; transition: transform .25s var(--vj-ease); }
.vj-exp-cta:hover i { transform: translateX(4px); }

/* --- ARC GALLERY: image cards on an arc above the text — native recreation
   of the ArcGalleryHero component (no React/JS: each card carries its angle
   in --vj-arc-a and CSS cos()/sin() place it on the circle). --- */
.vj-exp-section {
  --vj-arc-r: 170px;          /* mobile-first radius */
  --vj-arc-card: 74px;        /* card size */
}
@media (min-width: 641px)  { .vj-exp-section { --vj-arc-r: 300px; --vj-arc-card: 96px; } }
@media (min-width: 1024px) { .vj-exp-section { --vj-arc-r: 420px; --vj-arc-card: 120px; } }

.vj-exp-arc {
  position: relative;
  height: calc(var(--vj-arc-r) * 1.2);   /* headroom so the top card never clips */
}
/* pivot = bottom-center of .vj-exp-arc, exactly like the reference component */
.vj-exp-arc-card {
  position: absolute;
  left: calc(50% + cos(var(--vj-arc-a, 90deg)) * var(--vj-arc-r));
  bottom: calc(sin(var(--vj-arc-a, 90deg)) * var(--vj-arc-r));
  width: var(--vj-arc-card);
  height: var(--vj-arc-card);
  transform: translate(-50%, 50%);
  opacity: 1;                 /* visible by default: JS/observer failure must never hide real content */
  cursor: pointer;
}
/* cards animate in only once the section scrolls into view. Motion-only:
   opacity never dips to 0. A CSS animation/transition can freeze mid-flight
   if the tab is backgrounded while it's running (screen lock, app switch,
   notification — routine mid-scroll on a real phone); a frozen opacity
   fade leaves real content stuck near-invisible (reproduced live on the
   sibling .vj-voyages-grid reveal — see the comment below). A frozen
   transform-only slide just leaves the card briefly offset, never hidden.
   The hidden-until-tagged state itself is opt-in: JS must synchronously
   tag the section .vj-reveal-pending BEFORE wiring the IntersectionObserver
   (same pattern as .vj-voyages-slider below). If the script errors out
   before that line runs, .vj-reveal-pending is never added, so cards stay
   at their default, fully visible position. A JS-side timeout fallback
   also forces reveal if the observer itself never fires. */
.vj-exp-section.vj-reveal-pending .vj-exp-arc-card {
  transform: translate(-40%, 66%);
}
.vj-exp-section.vj-reveal-pending.is-visible .vj-exp-arc-card {
  animation: vjArcFadeInUp .8s ease-out forwards;
}
.vj-exp-arc-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(4, 38, 42, .16), 0 0 0 1px var(--vj-border);
  transform: rotate(var(--vj-arc-rot, 0deg));      /* angle/4 tilt, per card */
  transition: transform .3s var(--vj-ease), box-shadow .3s var(--vj-ease);
}
.vj-exp-arc-card:hover > img {
  transform: rotate(var(--vj-arc-rot, 0deg)) scale(1.05);
  box-shadow: 0 22px 44px rgba(4, 38, 42, .24), 0 0 0 1px var(--vj-border);
}
@keyframes vjArcFadeInUp {
  from { transform: translate(-40%, 66%); }
  to   { transform: translate(-50%, 50%); }
}

/* the text block sits in the arc's mouth, like the reference layout */
.vj-exp-content { margin-top: calc(var(--vj-arc-r) * -0.5); }

/* below desktop the arc is tighter — pull the text up less so the title
   never touches the lowest side cards */
@media (max-width: 1023px) {
  .vj-exp-content { margin-top: calc(var(--vj-arc-r) * -0.1); }
}

/* mobile: text fully below the arc + smaller, fainter watermark */
@media (max-width: 640px) {
  .vj-exp-watermark { width: 180px; max-width: 46vw; opacity: .07; top: -24px; }
  .vj-exp-content { padding-top: 26px; margin-top: 4px; }
}

/* older browsers without CSS trig: clean 3-col grid instead of the arc */
@supports not (bottom: calc(sin(20deg) * 100px)) {
  .vj-exp-arc {
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 560px;
    margin: 0 auto;
  }
  .vj-exp-arc-card { position: static; transform: none; opacity: 1; animation: none; aspect-ratio: 1; width: 100%; height: auto; }
  .vj-exp-content { margin-top: 30px; }
}

/* touch: no hover zoom, keep the tilt */
@media (hover: none) {
  .vj-exp-arc-card:hover > img { transform: rotate(var(--vj-arc-rot, 0deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .vj-exp-arc-card,
  .vj-exp-section.is-visible .vj-exp-arc-card { animation: none; opacity: 1; }
  .vj-exp-arc-card > img { transition: none; }
  .vj-exp-arc-card:hover > img { transform: rotate(var(--vj-arc-rot, 0deg)); }
}

/* ============================================================
   "DÉCOUVREZ NOS VOYAGES" — global voyages grid (vj-wk-* cards)
   Real, public voyage data (max 8), existing card design.
   Static CSS grid: 4 / 2 / 1 columns, equal widths, no carousel.
   ============================================================ */

/* section background — clean premium neutral with a subtle grid texture
   (native recreation of the React "grid background" pattern: thin square
   grid lines fading out radially towards the edges). Scoped to this
   section only; balloons/cloud strip removed. */
.vj-voyages-section {
  background-color: #ffffff;
  /* big curved block: clearly rounded top AND bottom edges. The section's
     overflow:hidden makes the gray bg + ::before grid respect the curve. */
  border-radius: 64px;
  border-top-left-radius: 0;             /* square top-left edge (no white curve) */
}
@media (max-width: 1023px) {
  .vj-voyages-section { border-radius: 48px; border-top-left-radius: 0; }  /* tablet: same effect, more compact */
}
@media (max-width: 767px) {
  .vj-voyages-section { border-radius: 28px; border-top-left-radius: 0; }  /* mobile: visible curve, spacing intact */
}
.vj-voyages-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* edge fade WITHOUT mask-image: a mask forces the whole section-sized
     pseudo-element through an offscreen raster pass (heavy — contributed to
     the compositor dropping card tiles under scroll). Since the section bg
     is solid white, painting a white radial gradient OVER the grid lines is
     pixel-identical to masking them out, at plain-paint cost. */
  background-image:
    radial-gradient(ellipse 75% 70% at 50% 45%, transparent 45%, #ffffff 100%),
    linear-gradient(to right,  rgba(15, 46, 52, .025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 46, 52, .025) 1px, transparent 1px);
  background-size: 100% 100%, 44px 44px, 44px 44px;
}
.vj-voyages-section > .container {
  position: relative;                   /* content always above the grid texture */
  z-index: 1;
}

/* responsive grid — desktop & large tablet (≥1024): 4 per row, 2 rows, no scroll */
.vj-voyages-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;                 /* equal-height cards per row */
}

/* medium tablet (768–1023): normal 2-column grid — no swipe, no scroll,
   readability preferred over 4 cramped cards */
@media (min-width: 768px) and (max-width: 1023px) {
  .vj-voyages-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

/* slider wrapper — positioning context for the mobile arrows */
.vj-voyages-slider { position: relative; }

/* mobile only (≤767): native scroll-snap slider — exactly ONE full-width
   card per view, edge to edge of the slider viewport. No track padding,
   no peek, no offset: card = 100% of the track, snap-align start, so at
   every snap point one card fills the visible area completely.
   Widths are CONTAINER-relative (never 100vw: the track sits inside the
   padded .container; viewport units caused the card to overflow/clip). */
@media (max-width: 767px) {
  /* slider viewport */
  .vj-voyages-slider {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
  }
  /* track */
  .vj-voyages-grid {
    display: flex;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    gap: 32px;                          /* > gutter + container padding: neighbor cards sit
                                           fully OUTSIDE the viewport at rest — no slivers
                                           "sticking out" at the edges */
    padding: 8px 18px 14px;             /* 18px side gutters: breathing room so the card's
                                           rounded corners + soft shadow render fully, not
                                           flush against the clipped slider edge (clip
                                           happens at the padding-box, so clearance == pad) */
    margin: 0;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 18px;        /* snapped card aligns to the gutter, stays centered */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;     /* horizontal drag stays in the track */
    touch-action: pan-x pan-y;          /* pan-x for the swipe; pan-y kept so a finger landing
                                           on the card can still scroll the page vertically */
    scrollbar-width: none;              /* Firefox: hide scrollbar */
  }
  .vj-voyages-grid::-webkit-scrollbar {
    display: none;                      /* Webkit: hide scrollbar */
  }
  /* card */
  .vj-voyages-grid > .vj-wk-card {
    flex: 0 0 100%;                     /* one card = full track width */
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;           /* one card per swipe, no fly-through */
    /* subtle depth, tight to the card: small offset, short blur, no spread,
       low opacity — reads clean, never as a cut/clipped halo */
    box-shadow: 0 3px 8px rgba(6, 97, 104, .07);
  }
  /* no hover-lift on touch: the strong hover shadow sticks after a tap and
     looks uneven — keep the resting shadow */
  .vj-voyages-grid > .vj-wk-card:hover {
    box-shadow: 0 3px 8px rgba(6, 97, 104, .07);
  }
}

/* reveal: on mobile the slider track glides in from the right when the
   section enters the viewport. The transform sits on the scroll CONTAINER
   (not the snap items), so scroll/snap geometry is untouched. The hidden
   state only applies once JS tags the slider (.vj-reveal-pending) — no JS,
   no IntersectionObserver, or reduced motion => cards simply visible. */
/* Motion-only reveal — NEVER animate this grid's opacity to 0. A CSS
   opacity transition can get frozen mid-flight if the tab is backgrounded
   while it's running (screen lock, app switch, notification — routine on a
   real phone mid-scroll), leaving real voyage cards stuck at ~0 opacity
   indefinitely (reproduced live: pending+revealed both true, computed
   opacity 0.0003). A transform-only slide has no such failure mode: even if
   frozen mid-transition, the cards stay fully opaque, just briefly offset. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .vj-voyages-slider.vj-reveal-pending .vj-voyages-grid {
    transform: translateX(64px);
  }
  .vj-voyages-slider.vj-reveal-pending.is-revealed .vj-voyages-grid {
    transform: none;
    transition: transform .7s var(--vj-ease);
  }
}

/* prev/next arrows — mobile slider only, hidden where the grid is static.
   Rendered BELOW the track (centered pair) so they never cover the card. */
.vj-voyages-arrows { display: none; }
@media (max-width: 767px) {
  .vj-voyages-arrows {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 6px;
  }
  .vj-voyages-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--vj-border);
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: var(--vj-primary);
    font-size: .95rem;
    box-shadow: none;                   /* flat: no shadow/glow on the nav buttons */
    filter: none;
    cursor: pointer;
    transition: background .25s var(--vj-ease), opacity .25s var(--vj-ease);
  }
  .vj-voyages-nav:hover { background: #fff; }
  .vj-voyages-nav:disabled { opacity: .35; cursor: default; }
}

/* empty state spans the full grid width */
.vj-voyages-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 0;
  color: var(--vj-muted);
}

/* "Voir tous les voyages" CTA — centered below the grid */
.vj-voyages-more { margin-top: 40px; text-align: center; }
.vj-voyages-cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 15px 34px;
  border-radius: 999px;
  background: var(--vj-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 14px 26px rgba(6, 97, 104, .26);
  transition: background .25s var(--vj-ease), transform .25s var(--vj-ease), box-shadow .25s var(--vj-ease), gap .25s var(--vj-ease);
}
.vj-voyages-cta:hover {
  background: var(--vj-primary-700);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 22px 36px rgba(6, 97, 104, .34);
  gap: .9rem;                           /* arrow slides right */
}

/* equal-height cards: card fills its grid cell, CTA pinned at bottom */
.vj-voyages-grid > .vj-wk-card { height: 100%; }

.vj-wk-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;                     /* widened card, capped at target size */
  margin-inline: auto;                  /* centered when the slide is wider than the cap */
  background: var(--vj-surface);
  border: 1px solid var(--vj-border);
  border-radius: 30px;
  box-shadow: var(--vj-shadow-sm);
  overflow: hidden;                     /* zoomed image stays in frame */
  transition: transform .35s var(--vj-ease), box-shadow .35s var(--vj-ease);
}
.vj-wk-card:hover {
  transform: translateY(-4px);          /* subtle lift, no size change */
  box-shadow: var(--vj-shadow);
}

/* ---- image area — soft oval/arc mask on the bottom edge ---- */
.vj-wk-media {
  position: relative;               /* positioning context only — no clipping,
                                       so the price badge can hang on the seam */
}
.vj-wk-img-link {
  display: block;
  overflow: hidden;                 /* zoomed image stays inside the arc */
  /* rounded top + elliptic bottom: the image sits in a soft oval mask */
  border-radius: 30px 30px 50% 50% / 30px 30px 46px 46px;
  /* skeleton while the (lazy) photo downloads/decodes: without it the media
     area paints stark white and the chips/price look like detached pieces
     floating on the page (the "card splitting" seen on slow image loads) */
  background: linear-gradient(180deg, #dcebeb 0%, #eef6f6 100%);
  min-height: 250px;                /* = img height: box stable before load */
}
.vj-wk-media img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .5s var(--vj-ease);
}
.vj-wk-card:hover .vj-wk-media img { transform: scale(1.06); }

/* date chip — top-left */
.vj-wk-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 7px 14px;
  border-radius: 999px;
  /* solid-enough white, NO backdrop-filter: every backdrop-filter forces the
     element onto its own composited GPU layer. With 8 cards × several chips
     the section carried ~30 forced layers — under scroll pressure the
     compositor drops raster tiles and whole cards paint as blank patches
     (reproduced in the 2026-07-10 screen recording). A .97 white over a
     photo is visually indistinguishable from .92 + blur. */
  background: rgba(255, 255, 255, .97);
  color: var(--vj-primary);
  font-size: .8rem;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(4, 38, 42, .18);
}

/* favorite — top-right, glass circle (decorative) */
.vj-wk-fav {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 50%;
  /* no backdrop-filter — see .vj-wk-chip comment (GPU layer pressure) */
  background: rgba(255, 255, 255, .94);
  color: var(--vj-primary);
  font-size: 1rem;
  cursor: pointer;
  transition: background .25s var(--vj-ease), color .25s var(--vj-ease), transform .25s var(--vj-ease);
}
.vj-wk-fav:hover { background: #fff; color: #e0526b; transform: scale(1.08); }
.vj-wk-fav:disabled { cursor: default; }

/* favorited (active) state — filled heart, Voyaji rose accent */
.vj-wk-fav.is-favorited {
  background: #fff;
  border-color: rgba(224, 82, 107, .45);
  color: #e0526b;
}
.vj-wk-fav.is-favorited:hover { color: #c93b55; }

/* toggle micro-animation — subtle pop, guarded by prefers-reduced-motion in JS */
@keyframes vj-fav-pop {
  0%   { transform: scale(.9); }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.vj-wk-fav.vj-fav-pop { animation: vj-fav-pop .2s var(--vj-ease); }

/* voyage-detail header variant — sits top-right of the title block */
.vj-vd-head { position: relative; }
.vj-vd-fav {
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  background: var(--vj-surface-2);
  border-color: var(--vj-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@media (max-width: 767px) {
  .vj-vd-head { padding-right: 56px; } /* title never slides under the heart */
  .vj-wk-fav { width: 44px; height: 44px; } /* comfortable touch target */
}

/* favorites toast — small bottom-center status pill */
#vj-fav-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  z-index: 100000;
  max-width: min(92vw, 420px);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--vj-ink);
  color: #fff;
  font-size: .9rem;
  font-weight: 500;
  box-shadow: var(--vj-shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--vj-ease), transform .25s var(--vj-ease);
}
#vj-fav-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
#vj-fav-toast.vj-fav-toast--error { background: #b3364d; }
@media (prefers-reduced-motion: reduce) {
  #vj-fav-toast { transition: opacity .25s var(--vj-ease); transform: translate(-50%, 0); }
}

/* ============================================================
   MES FAVORIS — user wishlist page (reuses the vj-wk-card design)
   ============================================================ */
.vj-favs-page { padding: 140px 0 90px; background: #fff; }
.vj-favs-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.vj-favs-eyebrow {
  display: inline-block;
  font-family: var(--font-script);
  font-size: 1.6rem;
  color: var(--vj-accent);
  margin-bottom: 6px;
}
.vj-favs-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  color: var(--vj-ink);
  margin-bottom: 10px;
}
.vj-favs-sub { color: var(--vj-muted); font-size: 1rem; }

.vj-favs-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1279px) { .vj-favs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .vj-favs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .vj-favs-grid { grid-template-columns: 1fr; } }

/* empty state */
.vj-favs-empty {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  padding: 56px 28px;
  border: 1px dashed var(--vj-border);
  border-radius: var(--vj-radius-lg);
  background: var(--vj-surface-2);
}
.vj-favs-empty-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--vj-border);
  color: #e0526b;
  font-size: 1.5rem;
  margin-bottom: 18px;
}
.vj-favs-empty-text { color: var(--vj-muted); font-size: 1.05rem; margin-bottom: 24px; }
.vj-favs-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--vj-primary);
  color: #fff;
  font-weight: 600;
  transition: background .25s var(--vj-ease), transform .25s var(--vj-ease);
}
.vj-favs-cta:hover { background: var(--vj-primary-600); color: #fff; transform: translateY(-1px); }

/* gallery — right side of the image, raised to clear the arc curve */
.vj-wk-gallery {
  position: absolute;
  right: 16px;
  bottom: 58px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 7px 12px;
  border-radius: 999px;
  /* no backdrop-filter — see .vj-wk-chip comment (GPU layer pressure) */
  background: rgba(4, 38, 42, .62);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  font-family: inherit;
  line-height: inherit;
  border: 0;
  appearance: none;
  cursor: pointer;
  transition: background .25s var(--vj-ease);
}
.vj-wk-gallery:hover { background: rgba(4, 38, 42, .78); color: #fff; }

/* price badge — centered on the image/content seam, gold accent.
   Parent .vj-wk-media doesn't clip, so the badge shows in full. */
.vj-wk-price {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--vj-accent);
  color: var(--vj-primary-700);
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(255, 170, 13, .38);
}
.vj-wk-price small { font-size: .72rem; font-weight: 700; letter-spacing: .04em; }

/* ---- content area ---- */
.vj-wk-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 34px 22px 22px;              /* top padding clears the centered badge */
}
/* title — editorial, title-case, lighter weight & controlled rhythm */
.vj-wk-title { margin: 0 0 12px; }
.vj-wk-title a {
  font-family: var(--font-heading);
  color: var(--vj-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;                /* full real title, visually clamped to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  transition: color .25s var(--vj-ease);
}
.vj-wk-title a:hover { color: var(--vj-primary); }

/* rating row — compact, directly under the title (real approved-review data only) */
.vj-wk-rating {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 18px;
}
.vj-wk-rating i { color: var(--vj-accent); font-size: .78rem; }
.vj-wk-rating span { margin-left: 7px; color: var(--vj-muted); font-size: .82rem; font-weight: 500; }

/* neutral empty state — no rating yet, greyed stars + "0 avis" (no layout shift) */
.vj-wk-rating--empty i { color: var(--vj-border, #d9dee3); }
.vj-wk-rating--empty span { color: var(--vj-muted); opacity: .8; }

/* metadata — compact 2-column grid with rounded icon chips */
.vj-wk-meta {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.vj-wk-meta li {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;                          /* allow the label to shrink, never overflow */
  color: var(--vj-ink);
  font-size: .85rem;
  font-weight: 500;
}
.vj-wk-meta li span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* duration gets its own full-width row and is never truncated */
.vj-wk-meta li.vj-wk-meta__full { grid-column: 1 / -1; }
.vj-wk-meta li.vj-wk-meta__full span { overflow: visible; text-overflow: clip; white-space: nowrap; }
.vj-wk-meta li i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--vj-primary) 9%, transparent);
  color: var(--vj-primary);
  font-size: .8rem;
}

/* CTA — pinned to the card bottom, teal primary */
.vj-wk-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--vj-primary);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  transition: background .25s var(--vj-ease), box-shadow .25s var(--vj-ease), gap .25s var(--vj-ease);
}
.vj-wk-cta:hover {
  background: var(--vj-primary-600);
  color: #fff;
  box-shadow: 0 12px 26px rgba(6, 97, 104, .32);
  gap: .8rem;                            /* arrow slides right, no layout shift */
}

/* responsive: taller image on phones is unnecessary — trim slightly */
@media (max-width: 640px) {
  .vj-wk-media img { height: 220px; }
  .vj-wk-body { padding: 24px 18px 18px; }
  .vj-wk-title { text-align: center; }
  .vj-wk-title a {
    font-size: clamp(16px, 4.5vw, 18px);     /* slightly smaller than before */
    line-height: 1.2;
  }
  /* center the review row under the title */
  .vj-wk-rating {
    justify-content: center;
    font-size: 0.78rem;                       /* compact review text */
  }
  .vj-wk-rating span { font-size: 0.78rem; }
  /* center the metadata group in the card while keeping each row left-aligned */
  .vj-wk-meta {
    grid-template-columns: 1fr;
    gap: 10px;                                /* tighter meta spacing */
    margin-bottom: 18px;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    justify-items: start;
  }
  .vj-wk-meta li {
    font-size: 0.8rem;                        /* slightly smaller meta text */
  }
  .vj-wk-meta li.vj-wk-meta__full { justify-self: start; }
  /* CTA button: prevent wrap, single line */
  .vj-wk-cta {
    font-size: 0.9rem;
    padding: 12px 18px;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vj-wk-card, .vj-wk-media img, .vj-wk-fav, .vj-wk-cta { transition: none; }
  .vj-wk-card:hover { transform: none; }
  .vj-wk-card:hover .vj-wk-media img { transform: none; }
}

/* ============================================================
   AVIS / REVIEWS — voyage detail page (vj-reviews / vj-review-*)
   Dynamic, approved-only. Login-gated submission form.
   ============================================================ */
.vj-reviews {
  padding: 56px 0;
  background: var(--vj-surface-2);
}
.vj-reviews .container { max-width: 900px; }

.vj-reviews-head { margin-bottom: 28px; }
.vj-reviews-head h2 {
  font-size: 1.9rem;
  color: var(--vj-ink);
  margin: 0 0 12px;
}
.vj-reviews-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.vj-reviews-score {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--vj-primary);
  line-height: 1;
}
.vj-reviews-stars i { color: var(--vj-accent); font-size: 1.05rem; margin-right: 1px; }
.vj-reviews-count { color: var(--vj-muted); font-size: .95rem; }
.vj-reviews-empty { color: var(--vj-muted); font-size: 1rem; margin: 0; }

/* flash */
.vj-review-flash {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 13px 18px;
  border-radius: 14px;
  font-size: .95rem;
  margin-bottom: 20px;
}
.vj-review-flash--ok  { background: #e4f6ee; color: #11734b; border: 1px solid #b8e5cf; }
.vj-review-flash--err { background: #fdecec; color: #b02525; border: 1px solid #f3c4c4; }

/* list */
.vj-reviews-list { list-style: none; margin: 0 0 34px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.vj-review-item {
  display: flex;
  gap: 16px;
  background: var(--vj-surface);
  border: 1px solid var(--vj-border);
  border-radius: 20px;
  padding: 20px 22px;
  box-shadow: var(--vj-shadow-sm);
}
.vj-review-avatar {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vj-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  overflow: hidden;
}
.vj-review-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.vj-review-body { flex: 1 1 auto; min-width: 0; }
.vj-review-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.vj-review-author { font-weight: 700; color: var(--vj-ink); }
.vj-review-date { color: var(--vj-muted); font-size: .82rem; }
.vj-review-stars i { color: var(--vj-accent); font-size: .82rem; margin: 4px 1px 0 0; }
.vj-review-text { margin: 8px 0 0; color: #43585b; line-height: 1.6; }

/* form */
.vj-review-form {
  background: var(--vj-surface);
  border: 1px solid var(--vj-border);
  border-radius: 24px;
  padding: 26px;
  box-shadow: var(--vj-shadow-sm);
}
.vj-review-form h3 { font-size: 1.3rem; color: var(--vj-ink); margin: 0 0 16px; }

/* star radio widget — reversed row so hovering a star fills it + all before */
.vj-review-rate {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
  margin-bottom: 16px;
}
.vj-review-rate input { position: absolute; opacity: 0; width: 0; height: 0; }
.vj-review-rate label {
  font-size: 1.7rem;
  color: #d9e3e3;
  cursor: pointer;
  transition: color .15s var(--vj-ease), transform .15s var(--vj-ease);
}
.vj-review-rate label:hover,
.vj-review-rate label:hover ~ label,
.vj-review-rate input:checked ~ label { color: var(--vj-accent); }
.vj-review-rate label:hover { transform: scale(1.12); }
.vj-review-rate input:focus-visible + label { outline: 2px solid rgba(255,170,13,.6); outline-offset: 3px; border-radius: 4px; }

.vj-review-textarea {
  width: 100%;
  border: 1px solid var(--vj-border);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: .95rem;
  color: var(--vj-ink);
  resize: vertical;
  margin-bottom: 16px;
  background: #fff;
}
.vj-review-textarea:focus { outline: none; border-color: var(--vj-primary); box-shadow: 0 0 0 3px rgba(6,97,104,.12); }

.vj-review-submit {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 13px 26px;
  border: none;
  border-radius: 999px;
  background: var(--vj-primary);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  transition: background .25s var(--vj-ease), box-shadow .25s var(--vj-ease), gap .25s var(--vj-ease);
}
.vj-review-submit:hover { background: var(--vj-primary-600); box-shadow: 0 12px 26px rgba(6,97,104,.3); gap: .8rem; }

.vj-review-login {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 18px 22px;
  border-radius: 16px;
  background: var(--vj-surface);
  border: 1px dashed var(--vj-border);
  color: var(--vj-muted);
}
.vj-review-login a { color: var(--vj-primary); font-weight: 700; text-decoration: underline; }

@media (max-width: 640px) {
  .vj-reviews { padding: 40px 0; }
  .vj-reviews-head h2 { font-size: 1.5rem; }
  .vj-review-item { padding: 16px; gap: 12px; }
}

/* ============================================================
   MANUAL GOOGLE REVIEWS — homepage social proof only.
   File-backed, not synchronized, and independent of VoyageReview.
   ============================================================ */
.vj-google-manual {
  position: relative;
  overflow: hidden;
  padding: clamp(68px, 8vw, 112px) 0;
  background:
    radial-gradient(circle at 12% 10%, rgba(246, 179, 52, .15), transparent 28%),
    radial-gradient(circle at 92% 95%, rgba(17, 123, 111, .18), transparent 34%),
    #f7f6f1;
}

.vj-google-manual::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -280px;
  top: 80px;
  border: 1px solid rgba(17, 77, 70, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(255, 255, 255, .26), 0 0 0 108px rgba(255, 255, 255, .16);
  pointer-events: none;
}

.vj-google-manual .container { position: relative; z-index: 1; }

.vj-google-manual__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 36px;
  margin-bottom: 32px;
}

.vj-google-manual__intro { max-width: 720px; }

.vj-google-manual__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  color: #0d6d63;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.vj-google-manual__eyebrow img { display: block; }

.vj-google-manual__intro h2 {
  margin: 0 0 12px;
  color: #123b37;
  font-size: clamp(2.15rem, 4.4vw, 4rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.vj-google-manual__intro p {
  max-width: 600px;
  margin: 0;
  color: #58716d;
  font-size: clamp(.98rem, 1.5vw, 1.1rem);
  line-height: 1.7;
}

.vj-google-manual__rating {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 288px;
  padding: 17px 18px;
  border: 1px solid rgba(18, 59, 55, .1);
  border-radius: 22px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 18px 45px rgba(18, 59, 55, .09);
  backdrop-filter: blur(12px);
}

.vj-google-manual__score {
  color: #123b37;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
}

.vj-google-manual__stars,
.vj-google-manual__card-stars { color: #f6b334; letter-spacing: 2px; }
.vj-google-manual__rating span { color: #6c7d7a; font-size: .78rem; }
.vj-google-manual__rating a {
  display: grid;
  width: 38px;
  height: 38px;
  margin-left: auto;
  border-radius: 50%;
  background: #123b37;
  color: #fff;
  place-items: center;
  transition: transform .2s ease, background .2s ease;
}
.vj-google-manual__rating a:hover { background: #0d6d63; color: #fff; transform: translateY(-2px); }

.vj-google-manual__carousel {
  width: 100%;
  margin: 0 auto;
}

.vj-google-manual__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.vj-google-manual__toolbar > span {
  min-width: 54px;
  color: #6c7d7a;
  font-size: .86rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.vj-google-manual__toolbar > span strong { color: #123b37; font-size: 1rem; }
.vj-google-manual__nav { display: flex; gap: 9px; }
.vj-google-manual__nav button {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(18, 59, 55, .14);
  border-radius: 50%;
  background: #fff;
  color: #123b37;
  place-items: center;
  transition: color .2s ease, background .2s ease, transform .2s ease, opacity .2s ease;
}
.vj-google-manual__nav button:hover:not(:disabled) { color: #fff; background: #123b37; transform: translateY(-2px); }
.vj-google-manual__nav button:disabled { cursor: default; opacity: .35; }

/* 3-up sliding track (desktop) → 2-up (tablet) → 1-up (mobile).
   The viewport must clip horizontally so off-screen cards stay hidden, but
   that same clip was cutting the edge cards' shadows. Fix: pad the viewport so
   shadows render inside the clip box, then cancel that padding with matching
   negative margins so the cards still line up with the container.
   Vertical padding is generous (bottom shadow is the most prominent). Side
   padding is capped at the inter-card gap (22px): any wider and the clip would
   start revealing the neighbouring off-screen card, since it sits exactly one
   gap past the visible edge — so 22px is the most outer-shadow bleed possible
   with zero neighbour peek. The parent section already has overflow:hidden, so
   the negative margins can't create horizontal page scroll. */
.vj-google-manual__viewport {
  overflow: hidden;
  padding: 24px 22px 48px;
  margin: -24px -22px -28px;
}

.vj-google-manual__stage {
  position: relative;
  display: flex;
  gap: 22px;
  --vj-gr-per: 3;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

.vj-google-manual__card {
  flex: 0 0 calc((100% - (var(--vj-gr-per) - 1) * 22px) / var(--vj-gr-per));
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 1.8vw, 26px);
  border: 1px solid rgba(18, 59, 55, .1);
  border-radius: 24px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 16px 36px rgba(18, 59, 55, .10);
  animation: vjGoogleReviewIn .34s ease both;
}

@keyframes vjGoogleReviewIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.vj-google-manual__reviewer { display: flex; align-items: center; gap: 13px; }
.vj-google-manual__avatar,
.vj-google-manual__initial {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.vj-google-manual__avatar { display: block; border: 2px solid #fff; box-shadow: 0 8px 22px rgba(18,59,55,.14); object-fit: cover; }
.vj-google-manual__initial {
  display: grid;
  background: linear-gradient(145deg, #0d6d63, #154a45);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
  place-items: center;
}
.vj-google-manual__identity { min-width: 0; }
.vj-google-manual__reviewer h3 {
  overflow: hidden;
  margin: 0 0 3px;
  color: #123b37;
  font-size: 1.08rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vj-google-manual__reviewer span { color: #7d8b89; font-size: .86rem; }
.vj-google-manual__google { display: block; margin-left: auto; }
.vj-google-manual__card-stars { margin: 16px 0 11px; font-size: 1.08rem; }
.vj-google-manual__copy { margin-bottom: 18px; }
.vj-google-manual__text {
  margin: 0;
  color: #3d5753;
  font-size: 1rem;
  line-height: 1.62;
}
.vj-google-manual__text.is-collapsed {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}
.vj-google-manual__more {
  margin-top: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0d6d63;
  font-size: .87rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.vj-google-gallery {
  outline: none;
  margin-top: auto;
}
.vj-google-gallery:focus-visible .vj-google-gallery__viewport {
  outline: 3px solid rgba(13,109,99,.3);
  outline-offset: 3px;
}
.vj-google-gallery__viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background: #e5ebe8;
  box-shadow: inset 0 0 0 1px rgba(18,59,55,.08);
}
.vj-google-gallery__open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.vj-google-gallery__open img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vj-google-gallery__open img.is-changing { animation: vjGooglePhotoIn .28s ease both; }
@keyframes vjGooglePhotoIn {
  from { opacity: .45; transform: scale(1.012); }
  to { opacity: 1; transform: scale(1); }
}
.vj-google-gallery__zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  width: 34px;
  height: 34px;
  font-size: .82rem;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  background: rgba(13,45,42,.68);
  color: #fff;
  place-items: center;
  backdrop-filter: blur(8px);
}
.vj-google-gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: .8rem;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  background: rgba(13,45,42,.76);
  color: #fff;
  place-items: center;
  transform: translateY(-50%);
  transition: background .2s ease, transform .2s ease;
  backdrop-filter: blur(8px);
}
.vj-google-gallery__arrow:hover { background: #123b37; transform: translateY(-50%) scale(1.05); }
.vj-google-gallery__arrow--prev { left: 10px; }
.vj-google-gallery__arrow--next { right: 10px; }
.vj-google-gallery__counter {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 5px 9px;
  border-radius: 99px;
  background: rgba(13,45,42,.76);
  color: #fff;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  backdrop-filter: blur(8px);
}
.vj-google-gallery__dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 11px 0 0;
}
.vj-google-gallery__dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(18,59,55,.2);
  transition: width .2s ease, background .2s ease;
}
.vj-google-gallery__dots span.is-active { width: 22px; border-radius: 99px; background: #0d6d63; }
.vj-google-gallery__thumbs {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 3px 2px 5px;
  scrollbar-width: thin;
  scrollbar-color: rgba(18,59,55,.25) transparent;
}
.vj-google-gallery__thumb {
  width: 76px;
  height: 58px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  background: #e7ecea;
  flex: 0 0 auto;
  opacity: .66;
  transition: border-color .2s ease, opacity .2s ease, transform .2s ease;
}
.vj-google-gallery__thumb:hover { opacity: 1; transform: translateY(-2px); }
.vj-google-gallery__thumb.is-active { border-color: #0d6d63; opacity: 1; }
.vj-google-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hide the crowded thumbnail strip whenever more than one card is visible;
   arrows + dots still give access to every photo. */
@media (min-width: 768px) {
  .vj-google-gallery__thumbs { display: none; }
}

/* Tablet: 2 cards visible. */
@media (max-width: 1199px) {
  .vj-google-manual__stage { --vj-gr-per: 2; }
}

@media (max-width: 991px) {
  .vj-google-manual__header { grid-template-columns: 1fr; align-items: start; }
  .vj-google-manual__rating { width: min(100%, 360px); }
}

/* Mobile: 1 card visible. Gallery stays square (aspect-ratio governs). */
@media (max-width: 767px) {
  .vj-google-manual__stage { --vj-gr-per: 1; gap: 16px; }
  .vj-google-manual__card { flex-basis: 100%; }
  .vj-google-gallery__viewport { height: auto; }
}

@media (max-width: 640px) {
  .vj-google-manual { padding: 58px 0; }
  .vj-google-manual__header { gap: 24px; margin-bottom: 24px; }
  .vj-google-manual__intro h2 { max-width: 310px; }
  .vj-google-manual__rating { min-width: 0; }
  .vj-google-manual__card { padding: 20px; border-radius: 23px; }
  .vj-google-manual__avatar,
  .vj-google-manual__initial { width: 56px; height: 56px; }
  .vj-google-manual__text { font-size: 1.03rem; line-height: 1.65; }
  .vj-google-manual__copy { margin-bottom: 22px; }
  .vj-google-gallery__viewport { height: auto; border-radius: 17px; }
  .vj-google-gallery__arrow { width: 40px; height: 40px; }
  .vj-google-gallery__arrow--prev { left: 10px; }
  .vj-google-gallery__arrow--next { right: 10px; }
  .vj-google-gallery__counter { right: 10px; bottom: 10px; }
  .vj-google-gallery__zoom { top: 10px; right: 10px; width: 38px; height: 38px; }
  .vj-google-gallery__thumb { width: 66px; height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .vj-google-manual__card,
  .vj-google-gallery__open img,
  .vj-google-gallery__dots span,
  .vj-google-gallery__thumb,
  .vj-google-gallery__arrow,
  .vj-google-manual__nav button,
  .vj-google-manual__rating a { transition: none; }
  .vj-google-manual__card,
  .vj-google-gallery__open img.is-changing { animation: none; }
}

/* ============================================================
   VOYAGE DETAIL — Tourex-inspired rebuild (vj-vd)
   Bento gallery · title/meta · quick info bar · 2-col layout
   (content left / booking right) · programme timeline ·
   mobile sticky CTA. Real data only; reservation hooks intact.
   ============================================================ */

.vj-vd {
  padding: clamp(104px, 11vw, 160px) 0 44px;
  background: linear-gradient(180deg, var(--vj-surface-2) 0%, #ffffff 420px);
}
.vj-vd .container { position: relative; }

/* ---------- breadcrumb ---------- */
.vj-vd-crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-size: .92rem; color: var(--vj-muted);
  margin-bottom: 18px;
}
.vj-vd-crumbs a { color: var(--vj-primary); font-weight: 600; transition: color .2s var(--vj-ease); }
.vj-vd-crumbs a:hover { color: var(--vj-primary-700); }
.vj-vd-crumbs i { font-size: .6rem; opacity: .6; }
.vj-vd-crumbs span {
  color: var(--vj-muted);
  max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- interactive bento gallery (vj-ibg) ----------
   Native rebuild of the InteractiveBentoGallery concept: count-adaptive
   bento grid, hover overlay, staggered transform-only reveal, and a
   fullscreen modal with bottom thumbnail dock (vj-bento-gallery.js).
   NO backdrop-filter / mask anywhere in this block: proven GPU-layer
   hazards on this site (2026-07-10 card-splitting regression). */
.vj-ibg {
  position: relative;
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
}
.vj-ibg-tile {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--vj-border);
  border-radius: 22px;
  background: var(--vj-surface-2);
  box-shadow: var(--vj-shadow-sm);
  cursor: pointer;
  transition: transform .3s var(--vj-ease), box-shadow .3s var(--vj-ease);
}
.vj-ibg-tile:hover { transform: scale(1.02); box-shadow: var(--vj-shadow); }
.vj-ibg-tile:focus-visible { outline: 3px solid var(--vj-accent); outline-offset: 2px; }
.vj-ibg-tile img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .65s var(--vj-ease);
}
.vj-ibg-tile:hover img { transform: scale(1.06); }

/* hover overlay — title/desc slide up over a bottom gradient */
.vj-ibg-hover {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  gap: 2px;
  padding: 14px 16px;
  text-align: left;
  background: linear-gradient(to top, rgba(4, 24, 26, .78) 0%, rgba(4, 24, 26, .28) 40%, transparent 70%);
  opacity: 0;
  transition: opacity .25s var(--vj-ease);
}
.vj-ibg-tile:hover .vj-ibg-hover,
.vj-ibg-tile:focus-visible .vj-ibg-hover { opacity: 1; }
.vj-ibg-hover-title {
  color: #fff; font-weight: 700; font-size: .92rem; line-height: 1.3;
  transform: translateY(8px);
  transition: transform .25s var(--vj-ease);
}
.vj-ibg-hover-desc {
  color: rgba(255, 255, 255, .82); font-size: .78rem;
  transform: translateY(8px);
  transition: transform .25s var(--vj-ease) .04s;
}
.vj-ibg-hover-desc i { font-size: .7rem; margin-right: 3px; }
.vj-ibg-tile:hover .vj-ibg-hover-title,
.vj-ibg-tile:hover .vj-ibg-hover-desc { transform: translateY(0); }

/* staggered reveal — transform-only (opacity never gated on scroll: a frozen
   transition must leave content visible), hidden state opt-in via JS */
.vj-ibg.vj-reveal-pending .vj-ibg-tile {
  transform: translateY(42px) scale(.94);
}
.vj-ibg.vj-reveal-pending.is-revealed .vj-ibg-tile {
  transform: none;
  transition: transform .6s var(--vj-ease);
  transition-delay: calc(var(--vj-ibg-i, 0) * 80ms);
}

/* empty fallback (no media at all) */
.vj-ibg-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-height: 300px;
  border: 1px solid var(--vj-border);
  border-radius: 22px;
  color: var(--vj-muted);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(6, 97, 104, .12), transparent 60%),
    var(--vj-surface-2);
}
.vj-ibg-empty i { font-size: 2.2rem; color: var(--vj-primary); opacity: .5; }

/* grid layouts by media count (desktop/tablet) */
.vj-ibg--n0,
.vj-ibg--n1 { grid-template-columns: 1fr; }
.vj-ibg--n1 .vj-ibg-tile { height: clamp(260px, 38vw, 460px); }

.vj-ibg--n2 { grid-template-columns: 1.7fr 1fr; }
.vj-ibg--n2 .vj-ibg-tile { height: clamp(240px, 32vw, 440px); }

.vj-ibg--n3 {
  grid-template-columns: 1.7fr 1fr;
  grid-template-rows: repeat(2, clamp(118px, 15.5vw, 214px));
}
.vj-ibg--n3 .vj-ibg-tile:first-child { grid-row: span 2; }

.vj-ibg--n4 {
  grid-template-columns: 1.8fr 1fr 1fr;
  grid-template-rows: repeat(2, clamp(118px, 15.5vw, 214px));
}
.vj-ibg--n4 .vj-ibg-tile:first-child { grid-row: span 2; }
.vj-ibg--n4 .vj-ibg-tile:nth-child(4) { grid-column: span 2; }

.vj-ibg--n5 {
  grid-template-columns: 1.8fr 1fr 1fr;
  grid-template-rows: repeat(2, clamp(118px, 15.5vw, 214px));
}
.vj-ibg--n5 .vj-ibg-tile:first-child { grid-row: span 2; }

/* 6+ media: richer bento mosaic (reference-style mixed spans) */
.vj-ibg--n6 {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, clamp(120px, 15.5vw, 216px));
}
.vj-ibg--n6 .vj-ibg-tile:first-child { grid-column: span 2; grid-row: span 2; }

/* mobile: simple stacked pairs, first image hero */
@media (max-width: 767px) {
  .vj-ibg--n2, .vj-ibg--n3, .vj-ibg--n4, .vj-ibg--n5, .vj-ibg--n6 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    grid-auto-rows: clamp(96px, 26vw, 150px);
  }
  .vj-ibg--n2 .vj-ibg-tile,
  .vj-ibg--n3 .vj-ibg-tile:first-child,
  .vj-ibg--n4 .vj-ibg-tile:first-child,
  .vj-ibg--n5 .vj-ibg-tile:first-child,
  .vj-ibg--n6 .vj-ibg-tile:first-child { grid-column: span 2; grid-row: span 2; height: auto; }
  .vj-ibg--n4 .vj-ibg-tile:nth-child(4) { grid-column: auto; }
}

/* ---------- fullscreen modal ---------- */
html.vj-ibg-lock, html.vj-ibg-lock body { overflow: hidden; }

.vj-ibg-modal {
  position: fixed; inset: 0;
  width: 100%;
  height: 100vh;                      /* fallback */
  height: 100dvh;                     /* tracks mobile browser chrome */
  z-index: 100010;                    /* above header/toast layers */
  display: flex; flex-direction: column;
  opacity: 0;
  transition: opacity .22s var(--vj-ease);
}
.vj-ibg-modal[hidden] { display: none; }
.vj-ibg-modal.is-open { opacity: 1; }
.vj-ibg-nav[hidden],
.vj-ibg-dock[hidden] { display: none; }
.vj-ibg-backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 22, 25, .92);   /* solid dark — no backdrop-filter */
  cursor: zoom-out;
}
.vj-ibg-close {
  position: absolute; top: 18px; right: 18px; z-index: 4;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff; font-size: 1.05rem;
  cursor: pointer;
  transition: background .2s var(--vj-ease), transform .2s var(--vj-ease);
}
.vj-ibg-close:hover { background: rgba(255, 255, 255, .24); transform: scale(1.08); }
.vj-ibg-close:focus-visible { outline: 3px solid var(--vj-accent); outline-offset: 2px; }

.vj-ibg-stage {
  position: relative; z-index: 2;
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  margin: 0;
  padding: clamp(14px, 4vh, 40px) clamp(10px, 4vw, 56px) 8px;
  min-height: 0;                      /* the image, not the figure, sets the size */
  pointer-events: none;               /* backdrop stays clickable around the media */
}
.vj-ibg-stage-media {
  position: relative;
  max-width: min(1100px, 92vw);
  max-height: 100%;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
}
.vj-ibg-stage-img {
  max-width: 100%;
  max-height: calc(100vh - 220px);    /* stage minus caption + dock */
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  transition: transform .28s var(--vj-ease), opacity .28s var(--vj-ease);
}
.vj-ibg-stage-img.is-entering { transform: translateY(16px) scale(.97); opacity: 0; }

.vj-ibg-nav {
  z-index: 3;
  width: 48px; height: 48px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  color: #fff; font-size: 1rem;
  cursor: pointer;
  pointer-events: auto;
  transition: background .2s var(--vj-ease), transform .2s var(--vj-ease);
}
.vj-ibg-nav:hover { background: rgba(255, 255, 255, .22); transform: scale(1.08); }
.vj-ibg-nav:focus-visible { outline: 3px solid var(--vj-accent); outline-offset: 2px; }

.vj-ibg-caption {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  z-index: 3;
  display: flex; align-items: baseline; gap: 12px;
  max-width: 90%;
  color: #fff;
  pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vj-ibg-cap-title { font-weight: 700; font-size: .95rem; }
.vj-ibg-cap-desc { font-size: .82rem; color: rgba(255, 255, 255, .75); }
.vj-ibg-counter { font-size: .78rem; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }

/* bottom thumbnail dock — tilted resting thumbs, active one straightens & lifts */
.vj-ibg-dock {
  position: relative; z-index: 3;
  flex: 0 0 auto;
  display: flex; align-items: flex-end; gap: 4px;
  max-width: min(92vw, 640px);
  margin: 0 auto;
  margin-bottom: max(16px, env(safe-area-inset-bottom));
  padding: 14px 16px 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 16px;
  background: rgba(16, 60, 66, .88);  /* solid glass look — no backdrop-filter */
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
  overflow-x: auto;
  scrollbar-width: none;
}
.vj-ibg-dock::-webkit-scrollbar { display: none; }
.vj-ibg-thumb {
  position: relative;
  width: 44px; height: 44px; flex: 0 0 auto;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  transform: rotate(-8deg);
  transition: transform .25s var(--vj-ease), border-color .25s var(--vj-ease);
}
.vj-ibg-thumb:nth-child(even) { transform: rotate(8deg); }
.vj-ibg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vj-ibg-thumb:hover { transform: rotate(0) translateY(-8px) scale(1.18); z-index: 2; }
.vj-ibg-thumb.is-active {
  transform: rotate(0) translateY(-6px) scale(1.16);
  border-color: rgba(255, 255, 255, .85);
  z-index: 2;
}
.vj-ibg-thumb:focus-visible { outline: 3px solid var(--vj-accent); outline-offset: 1px; }

@media (max-width: 767px) {
  .vj-ibg-stage { padding-inline: 8px; }
  .vj-ibg-nav { width: 42px; height: 42px; }
  .vj-ibg-stage-img { max-height: calc(100dvh - 190px); border-radius: 10px; }
  .vj-ibg-caption { bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .vj-ibg-tile, .vj-ibg-tile img, .vj-ibg-hover,
  .vj-ibg-hover-title, .vj-ibg-hover-desc,
  .vj-ibg.vj-reveal-pending .vj-ibg-tile,
  .vj-ibg-modal, .vj-ibg-stage-img, .vj-ibg-thumb { transition: none; }
  .vj-ibg.vj-reveal-pending .vj-ibg-tile { transform: none; }
  .vj-ibg-stage-img.is-entering { transform: none; opacity: 1; }
}

/* ---------- "Voir la galerie" more-tile (a real bento cell) ---------- */
.vj-ibg-more {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  padding: 14px;
  text-align: center;
  background: rgba(4, 24, 26, .42);
  color: #fff;
  transition: background .25s var(--vj-ease);
}
.vj-ibg-tile--more:hover .vj-ibg-more { background: rgba(4, 24, 26, .52); }
.vj-ibg-more-count {
  font-weight: 800; font-size: 1.15rem; line-height: 1.1;
  letter-spacing: -.01em;
}
.vj-ibg-more-cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: .9rem;
  color: rgba(255, 255, 255, .95);
}
.vj-ibg-more-cta i { font-size: .95rem; }

/* ---------- title + meta ---------- */
.vj-vd-head { margin-bottom: 20px; }
.vj-vd-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.vj-vd-cat {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 170, 13, .14);
  color: #9a6a00;
  font-size: .82rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.vj-vd-title {
  margin: 0 0 12px;
  color: var(--vj-ink);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  text-transform: capitalize;
}
.vj-vd-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
  margin: 0; padding: 0; list-style: none;
  color: var(--vj-muted); font-size: .98rem;
}
.vj-vd-meta li { display: inline-flex; align-items: center; gap: 8px; }
.vj-vd-meta li > i { color: var(--vj-primary); }
.vj-vd-meta-rating { display: inline-flex; align-items: center; gap: 8px; color: var(--vj-ink); font-weight: 600; }
.vj-vd-meta-rating:hover { color: var(--vj-primary); }
.vj-vd-meta-stars i { color: var(--vj-accent); font-size: .85rem; }
.vj-vd-meta-muted { color: var(--vj-muted); }

/* ---------- quick info bar ---------- */
.vj-vd-infobar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 16px 26px;
  padding: 18px 26px;
  background: #fff;
  border: 1px solid var(--vj-border);
  border-radius: 22px;
  box-shadow: var(--vj-shadow-sm);
  margin-bottom: 30px;
}
.vj-vd-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* "Départ de" holds a long value — give it the full first row, clamp to 2 lines */
.vj-vd-info--depart { grid-column: 1 / -1; align-items: flex-start; }
.vj-vd-depart-value {
  max-width: none !important; white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
}
.vj-vd-info--depart.is-expanded .vj-vd-depart-value {
  display: block;
  overflow: visible;
  -webkit-line-clamp: none;
}
.vj-vd-depart-toggle {
  align-self: flex-start;
  margin-top: 4px; padding: 0;
  background: none; border: 0;
  color: var(--vj-primary); font-weight: 700; font-size: .82rem;
  cursor: pointer;
}
.vj-vd-depart-toggle:hover { text-decoration: underline; }
.vj-vd-info-ico {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(6, 97, 104, .08);
  color: var(--vj-primary);
  font-size: 1.05rem;
}
.vj-vd-info--price .vj-vd-info-ico { background: rgba(255, 170, 13, .16); color: #b97e00; }
.vj-vd-info-txt { display: flex; flex-direction: column; min-width: 0; }
.vj-vd-info-txt small {
  color: var(--vj-muted);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.vj-vd-info-txt strong {
  color: var(--vj-ink); font-size: .99rem; line-height: 1.35;
  max-width: 30ch;
}
.vj-vd-info--price .vj-vd-info-txt strong { color: var(--vj-primary-700); font-size: 1.08rem; }

/* ---------- two-column layout ---------- */
.vj-vd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 396px;
  grid-template-areas: "main side";
  gap: 30px;
  align-items: start;
}
.vj-vd-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.vj-vd-side { grid-area: side; min-width: 0; }
.vj-vd-side-sticky { position: sticky; top: 118px; display: flex; flex-direction: column; gap: 18px; }

/* ---------- generic content card ---------- */
.vj-vd-card {
  background: #fff;
  border: 1px solid var(--vj-border);
  border-radius: 26px;
  padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--vj-shadow-sm);
}
.vj-vd-h2 {
  margin: 0 0 16px;
  color: var(--vj-ink);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.2;
}
.vj-vd-sub { margin: -8px 0 18px; color: var(--vj-muted); font-size: .95rem; }
.vj-vd-empty { color: var(--vj-muted); margin: 0; }

/* description */
.vj-vd-desc { position: relative; color: #3c5257; font-size: 1.02rem; line-height: 1.75; }
.vj-vd-desc p { margin: 0; }
.vj-vd-desc.collapsed {
  max-height: 300px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
}
.vj-vd-big { color: var(--vj-primary); font-weight: 800; }
.vj-vd-more {
  margin-top: 14px;
  padding: 10px 22px;
  border: 1px solid rgba(6, 97, 104, .3);
  border-radius: 999px;
  background: #fff;
  color: var(--vj-primary);
  font-weight: 700; font-size: .92rem;
  cursor: pointer;
  transition: background .25s var(--vj-ease), color .25s var(--vj-ease);
}
.vj-vd-more:hover { background: var(--vj-primary); color: #fff; }

/* inclus / exclus */
.vj-vd-incl-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.vj-vd-incl-col {
  border: 1px solid var(--vj-border);
  border-radius: 20px;
  padding: 20px 22px;
  background: var(--vj-surface-2);
}
.vj-vd-incl-col h3 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  color: var(--vj-ink); font-size: 1.05rem;
}
.vj-vd-incl-col h3 i { color: var(--vj-primary); }
.vj-vd-incl-col--out { background: #fffaf1; border-color: #f3e6cc; }
.vj-vd-incl-col--out h3 i { color: #b97e00; }
.vj-vd-incl-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.vj-vd-incl-col li {
  display: flex; align-items: flex-start; gap: 10px;
  color: #3c5257; font-size: .96rem; line-height: 1.5;
}
.vj-vd-incl-col li i { margin-top: 4px; font-size: .8rem; color: var(--vj-primary); }
.vj-vd-incl-col--out li i { color: #b97e00; }

/* checklist */
.vj-vd-check-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.vj-vd-check-list li { display: flex; gap: 10px; align-items: flex-start; color: #3c5257; }
.vj-vd-check-list li i { margin-top: 4px; color: var(--vj-primary); font-size: .85rem; }

/* ---------- programme timeline ---------- */
.vj-vd-timeline { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.vj-vd-day { position: relative; display: flex; gap: 20px; padding-bottom: 26px; }
.vj-vd-day:last-child { padding-bottom: 0; }
.vj-vd-day::before {
  content: "";
  position: absolute;
  left: 31px; top: 66px; bottom: 4px;
  width: 2px;
  background: linear-gradient(180deg, rgba(6, 97, 104, .35), rgba(6, 97, 104, .08));
}
.vj-vd-day:last-child::before { display: none; }
.vj-vd-day-badge {
  flex: 0 0 auto;
  width: 62px; height: 62px;
  border-radius: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--vj-primary);
  color: #fff;
  box-shadow: 0 10px 22px rgba(6, 97, 104, .28);
  position: relative; z-index: 1;
}
.vj-vd-day-badge span { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.vj-vd-day-badge strong { font-size: 1.35rem; line-height: 1; }
.vj-vd-day-card {
  flex: 1; min-width: 0;
  border: 1px solid var(--vj-border);
  border-radius: 20px;
  background: var(--vj-surface-2);
  padding: 18px 22px;
  transition: box-shadow .3s var(--vj-ease), transform .3s var(--vj-ease);
}
.vj-vd-day-card:hover { box-shadow: var(--vj-shadow-sm); transform: translateY(-2px); }
.vj-vd-day-title { margin: 0 0 8px; color: var(--vj-ink); font-size: 1.08rem; line-height: 1.35; }
.vj-vd-day-city {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(6, 97, 104, .08);
  color: var(--vj-primary-700);
  font-size: .8rem; font-weight: 700;
}
.vj-vd-day-text { color: #3c5257; font-size: .95rem; line-height: 1.7; }
.vj-vd-day-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; color: var(--vj-muted); font-size: .88rem; }
.vj-vd-day-meta span { display: inline-flex; align-items: center; gap: 8px; }
.vj-vd-day-meta i { color: var(--vj-primary); }
.vj-vd-day-pics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.vj-vd-day-pics a { display: block; width: 110px; height: 80px; border-radius: 12px; overflow: hidden; }
.vj-vd-day-pics img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--vj-ease); }
.vj-vd-day-pics a:hover img { transform: scale(1.08); }
.vj-vd-pdf {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 20px;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(6, 97, 104, .08);
  color: var(--vj-primary-700); font-weight: 700; font-size: .95rem;
  transition: background .25s var(--vj-ease), color .25s var(--vj-ease);
}
.vj-vd-pdf:hover { background: var(--vj-primary); color: #fff; }

/* ---------- booking card ---------- */
.vj-vd-book {
  background: #fff;
  border: 1px solid var(--vj-border);
  border-radius: 26px;
  padding: 24px;
  box-shadow: var(--vj-shadow);
}
.vj-vd-book-price { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px dashed var(--vj-border); }
.vj-vd-book-price > small {
  display: block;
  color: var(--vj-muted);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 4px;
}
.vj-vd-book-amount {
  color: var(--vj-primary-700);
  font-size: 2.1rem; font-weight: 800; line-height: 1.1;
}
.vj-vd-book-amount span { font-size: 1rem; font-weight: 700; color: var(--vj-muted); }
.vj-vd-book-amount--quote { font-size: 1.3rem; }
.vj-vd-book-label {
  display: block;
  color: var(--vj-muted);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 10px;
}
.vj-vd-book-dates { margin-bottom: 14px; }
.vj-vd-book .date-modern.is-selected,
.vj-vd-book .custom-dropdown-item.is-selected {
  border-color: var(--vj-accent) !important;
  box-shadow: 0 0 0 3px rgba(255, 170, 13, .22);
}
.vj-vd-book .btn.reserve-btn { margin-top: 6px; }

/* ---------- mobile sticky CTA ---------- */
.vj-vd-mobilebar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 950;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--vj-border);
  box-shadow: 0 -10px 30px rgba(6, 97, 104, .12);
  align-items: center; justify-content: space-between; gap: 14px;
}
.vj-vd-mobilebar-price { display: flex; flex-direction: column; line-height: 1.2; }
.vj-vd-mobilebar-price small { color: var(--vj-muted); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.vj-vd-mobilebar-price strong { color: var(--vj-primary-700); font-size: 1.12rem; font-weight: 800; }
.vj-vd-mobilebar-cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px;
  border: 0; border-radius: 999px;
  background: var(--vj-primary);
  color: #fff; font-weight: 700; font-size: .95rem;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(6, 97, 104, .3);
  transition: background .25s var(--vj-ease), transform .25s var(--vj-ease);
}
.vj-vd-mobilebar-cta:hover { background: var(--vj-primary-700); transform: translateY(-1px); }

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
  .vj-vd-layout { grid-template-columns: minmax(0, 1fr) 348px; gap: 24px; }
}

@media (max-width: 991px) {
  .vj-vd-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "side" "main";
  }
  .vj-vd-side-sticky { position: static; }
  .vj-vd-infobar { grid-template-columns: 1fr 1fr; gap: 18px 30px; }
  .vj-vd-mobilebar { display: flex; }
  .vj-vd { padding-bottom: 96px; } /* room for the sticky CTA */
}

@media (max-width: 767px) {
  .vj-vd-bento--n2,
  .vj-vd-bento--n3,
  .vj-vd-bento--n4,
  .vj-vd-bento--n5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }
  .vj-vd-bento--n2 .vj-vd-tile,
  .vj-vd-bento--n3 .vj-vd-tile,
  .vj-vd-bento--n4 .vj-vd-tile,
  .vj-vd-bento--n5 .vj-vd-tile { height: 132px; grid-row: auto; grid-column: auto; }
  .vj-vd-bento--n2 .vj-vd-tile:first-child,
  .vj-vd-bento--n3 .vj-vd-tile:first-child,
  .vj-vd-bento--n4 .vj-vd-tile:first-child,
  .vj-vd-bento--n5 .vj-vd-tile:first-child { grid-column: 1 / -1; height: 230px; }
  .vj-ibg-more-count { font-size: 1rem; }
  .vj-ibg-more-cta { font-size: .82rem; }
  .vj-vd-incl-grid { grid-template-columns: 1fr; }
  .vj-vd-infobar { grid-template-columns: 1fr 1fr; padding: 16px 18px; }
  .vj-vd-day { gap: 14px; }
  .vj-vd-day-badge { width: 52px; height: 52px; border-radius: 16px; }
  .vj-vd-day-badge strong { font-size: 1.15rem; }
  .vj-vd-day::before { left: 26px; top: 56px; }
  .vj-vd-crumbs span { max-width: 22ch; }
}

@media (max-width: 480px) {
  .vj-vd-infobar { grid-template-columns: 1fr; }
  .vj-vd-mobilebar-cta { padding: 12px 18px; font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vj-vd-tile img,
  .vj-vd-day-card,
  .vj-vd-day-pics img,
  .vj-ibg-more,
  .vj-vd-mobilebar-cta { transition: none !important; }
}

/* ---------- vj-vd: booking buttons (legacy .btn-book was transparent/invisible) ---------- */
.vj-vd-book .btn,
.vj-vd-book .reserve-btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px;
  padding: 14px 20px;
  font-weight: 700; font-size: .98rem; line-height: 1.2;
  cursor: pointer;
  transition: background .25s var(--vj-ease), color .25s var(--vj-ease),
              transform .25s var(--vj-ease), box-shadow .25s var(--vj-ease);
}
.vj-vd-book .btn.btn-book {
  background: var(--vj-primary);
  color: #fff;
  border: 0;
  box-shadow: 0 10px 24px rgba(6, 97, 104, .3);
  margin-top: 6px;
}
.vj-vd-book .btn.btn-book:hover { background: var(--vj-primary-700); transform: translateY(-1px); }
.vj-vd-book .btn-outline-whatsapp {
  margin-top: 10px;
  background: #fff;
  color: #128c7e;
  border: 1.5px solid rgba(18, 140, 126, .45);
}
.vj-vd-book .btn-outline-whatsapp:hover { background: rgba(18, 140, 126, .08); transform: translateY(-1px); }

/* ---------- approved header support on standalone pages
     (mirrors the inline rules that live in base.html.twig) ---------- */
.vj-premium .user-dropdown .dropdown-menu {
  opacity: 0;
  visibility: hidden;
  margin-top: 24px !important;
  transform: translateY(12px);
  transition: all .3s ease;
}
.vj-premium .user-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(6px);
}
.vj-premium .user-dropdown .dropdown-menu a {
  display: flex !important;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.vj-premium .user-dropdown .dropdown-menu a i {
  width: 20px; min-width: 20px;
  margin-right: 0 !important;
  text-align: center;
}
.vj-premium .site-header,
.vj-premium .main-bar-wraper,
.vj-premium .header-nav { overflow: visible !important; }
@media (max-width: 1023px) {
  .vj-premium .xmenu-toggler {
    flex: 0 0 44px;
    margin-left: 0 !important;
    min-width: 44px;
    width: 44px;
  }
}

/* ---------- vj-vd: mobile polish ---------- */
@media (max-width: 767px) {
  /* with exactly two images, stack both full-width (no empty slot) */
  .vj-vd-bento--n2 .vj-vd-tile { grid-column: 1 / -1; height: 150px; }
  .vj-vd-bento--n2 .vj-vd-tile:first-child { height: 230px; }
}
@media (max-width: 991px) {
  /* lift the theme scroll-top button above the sticky booking bar */
  body.vj-vd-body .scroltop { bottom: 96px; }
}

/* The former "TEMP DIAGNOSTIC" desktop guard (opacity/transform !important on
   the voyages grid + cards) was removed: the row-alternating entrance reveal
   (assets/voyaji/js/vj-card-reveal.js + the .vj-cr-* rules at the end of this
   file) now owns the desktop motion state and self-cleans after the animation,
   so cards can never stay hidden — the failure the guard was masking. The guard
   also forced transform:none !important on .vj-wk-card, which had been silently
   suppressing the card's own :hover lift at ≥768px. */

/* ============================================================
   NOS VOYAGES — listing page (vj-vl-*)
   Tourex hotel-grid STRUCTURE only (hero → search bar → sidebar
   + results), Voyaji design system. Grid is static: no reveal
   transforms/opacity — cards are always visible without JS.
   ============================================================ */

/* ---------- compact hero ---------- */
.vj-vl-hero {
  padding: 148px 0 34px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(6, 97, 104, .08), transparent 55%),
    radial-gradient(110% 130% at 100% 0%, rgba(255, 170, 13, .08), transparent 55%),
    var(--vj-surface-2);
  border-bottom: 1px solid var(--vj-border);
}
.vj-vl-crumbs {
  display: flex; align-items: center; gap: 9px;
  font-size: .85rem; font-weight: 600;
  color: var(--vj-muted);
  margin-bottom: 16px;
}
.vj-vl-crumbs a { color: var(--vj-primary); }
.vj-vl-crumbs a:hover { text-decoration: underline; }
.vj-vl-crumbs i { font-size: .6rem; opacity: .6; }
.vj-vl-eyebrow {
  display: block;
  font-family: var(--font-script);
  font-size: 1.5rem;
  color: var(--vj-accent);
  margin-bottom: 2px;
}
.vj-vl-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--vj-ink);
  margin: 0 0 10px;
}
.vj-vl-sub {
  max-width: 560px;
  color: var(--vj-muted);
  font-size: 1rem; line-height: 1.65;
  margin: 0;
}

/* ---------- page body ---------- */
.vj-vl { padding: 30px 0 70px; background: var(--vj-surface-2); }

/* ---------- top search bar ---------- */
.vj-vl-search {
  display: flex; align-items: flex-end; gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--vj-border);
  border-radius: 26px;
  box-shadow: var(--vj-shadow-sm);
  margin-bottom: 26px;
}
.vj-vl-search-field { flex: 1 1 0; min-width: 0; }
.vj-vl-search-field--grow { flex: 1.6 1 0; }
.vj-vl-search-field > label {
  display: block;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--vj-muted);
  margin: 0 0 6px 4px;
}
.vj-vl-search-input {
  display: flex; align-items: center; gap: 9px;
  height: 48px;
  padding: 0 14px;
  background: var(--vj-surface-2);
  border: 1px solid var(--vj-border);
  border-radius: 14px;
}
.vj-vl-search-input:focus-within { border-color: var(--vj-primary); box-shadow: 0 0 0 3px rgba(6, 97, 104, .10); }
.vj-vl-search-input i { color: var(--vj-primary); font-size: .88rem; flex: 0 0 auto; }
.vj-vl-search-input input,
.vj-vl-search-input select {
  width: 100%; min-width: 0;
  border: 0; outline: none; background: transparent;
  font-size: .93rem; color: var(--vj-ink);
  font-family: inherit;
}
.vj-vl-search-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 9px;
  height: 48px; padding: 0 26px;
  border: 0; border-radius: 999px;
  background: var(--vj-primary);
  color: #fff; font-weight: 700; font-size: .95rem;
  cursor: pointer;
  transition: background .25s var(--vj-ease), box-shadow .25s var(--vj-ease);
}
.vj-vl-search-btn:hover { background: var(--vj-primary-600); box-shadow: 0 10px 24px rgba(6, 97, 104, .28); }
.vj-vl-filters-toggle {
  flex: 0 0 auto;
  display: none; /* mobile/tablet only */
  align-items: center; gap: 8px;
  height: 48px; padding: 0 18px;
  border: 1px solid var(--vj-border);
  border-radius: 999px;
  background: #fff;
  color: var(--vj-ink); font-weight: 700; font-size: .92rem;
  cursor: pointer;
}
.vj-vl-filters-toggle i { color: var(--vj-primary); }
.vj-vl-filters-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px;
  background: var(--vj-accent);
  color: #fff; font-size: .72rem; font-weight: 800;
}

/* ---------- layout: sidebar + results ---------- */
.vj-vl-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

/* ---------- sidebar ---------- */
.vj-vl-sidebar {
  position: sticky; top: 110px; /* CSS sticky only — no GSAP .my-sticky */
  background: #fff;
  border: 1px solid var(--vj-border);
  border-radius: 26px;
  padding: 22px;
  box-shadow: var(--vj-shadow-sm);
}
.vj-vl-sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 1.05rem; color: var(--vj-ink);
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--vj-border);
}
.vj-vl-drawer-close {
  display: none;
  width: 34px; height: 34px;
  border: 0; border-radius: 10px;
  background: var(--vj-surface-2);
  color: var(--vj-ink); cursor: pointer;
}
.vj-vl-fgroup {
  border: 0; padding: 0; margin: 0 0 20px;
}
.vj-vl-fgroup legend {
  font-size: .8rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--vj-ink);
  margin-bottom: 10px;
}
.vj-vl-price-row {
  display: flex; align-items: center; gap: 8px;
  color: var(--vj-muted);
}
.vj-vl-price-row input {
  width: 100%; min-width: 0;
  height: 42px; padding: 0 12px;
  border: 1px solid var(--vj-border);
  border-radius: 12px;
  background: var(--vj-surface-2);
  font-size: .9rem; color: var(--vj-ink);
  outline: none;
}
.vj-vl-price-row input:focus { border-color: var(--vj-primary); }
.vj-vl-check {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 2px;
  font-size: .92rem; color: var(--vj-ink);
  cursor: pointer;
}
.vj-vl-check input { accent-color: var(--vj-primary); width: 16px; height: 16px; flex: 0 0 auto; }
.vj-vl-check span i { color: var(--vj-accent); font-size: .8rem; }
.vj-vl-sidebar-actions {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 6px;
}
.vj-vl-apply {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 22px;
  border: 0; border-radius: 999px;
  background: var(--vj-primary);
  color: #fff; font-weight: 700; font-size: .93rem;
  cursor: pointer; text-align: center;
  transition: background .25s var(--vj-ease);
}
.vj-vl-apply:hover { background: var(--vj-primary-600); color: #fff; }
.vj-vl-reset {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px;
  border: 1px solid var(--vj-border); border-radius: 999px;
  background: #fff;
  color: var(--vj-ink); font-weight: 700; font-size: .9rem;
}
.vj-vl-reset:hover { border-color: var(--vj-accent); color: var(--vj-accent); }

/* ---------- results header ---------- */
.vj-vl-results { min-width: 0; }
.vj-vl-results-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.vj-vl-count { margin: 0; color: var(--vj-muted); font-size: .95rem; }
.vj-vl-count strong { color: var(--vj-ink); font-size: 1.05rem; }
.vj-vl-sort {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .9rem; color: var(--vj-muted); font-weight: 600;
}
.vj-vl-sort select {
  height: 42px; padding: 0 12px;
  border: 1px solid var(--vj-border); border-radius: 12px;
  background: #fff; color: var(--vj-ink);
  font-size: .9rem; font-family: inherit;
  outline: none; cursor: pointer;
}
.vj-vl-sort select:focus { border-color: var(--vj-primary); }

/* ---------- card grid (equal-height vj-wk-card, CTA bottom-aligned) ---------- */
.vj-vl-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.vj-vl-grid .vj-wk-card { height: 100%; display: flex; flex-direction: column; }
.vj-vl-grid .vj-wk-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.vj-vl-grid .vj-wk-cta { margin-top: auto; }

/* ---------- pagination ---------- */
.vj-vl-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 7px; flex-wrap: wrap;
  margin-top: 34px;
}
.vj-vl-page {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 8px;
  border: 1px solid var(--vj-border); border-radius: 14px;
  background: #fff;
  color: var(--vj-ink); font-weight: 700; font-size: .95rem;
  transition: border-color .2s var(--vj-ease), color .2s var(--vj-ease);
}
a.vj-vl-page:hover { border-color: var(--vj-primary); color: var(--vj-primary); }
.vj-vl-page.is-current { background: var(--vj-primary); border-color: var(--vj-primary); color: #fff; }
.vj-vl-page--dots { border: 0; background: transparent; color: var(--vj-muted); min-width: 26px; }

/* ---------- empty state ---------- */
.vj-vl-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
  padding: 64px 24px;
  background: #fff;
  border: 1px solid var(--vj-border);
  border-radius: 26px;
  box-shadow: var(--vj-shadow-sm);
}
.vj-vl-empty i { font-size: 2.4rem; color: var(--vj-primary); opacity: .45; }
.vj-vl-empty h2 { margin: 0; font-size: 1.4rem; color: var(--vj-ink); }
.vj-vl-empty p { margin: 0 0 8px; color: var(--vj-muted); max-width: 420px; }

/* ---------- responsive ---------- */
@media (min-width: 1400px) {
  .vj-vl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  /* sidebar becomes an off-canvas drawer; "Filtres" button appears */
  .vj-vl-layout { grid-template-columns: minmax(0, 1fr); }
  .vj-vl-filters-toggle { display: inline-flex; }
  .vj-vl-drawer-close { display: inline-flex; align-items: center; justify-content: center; }
  .vj-vl-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(88vw, 360px);
    border-radius: 0 26px 26px 0;
    transform: translateX(-105%);
    transition: transform .3s var(--vj-ease);
    overflow-y: auto;
    z-index: 10010;
  }
  .vj-vl-sidebar.is-open { transform: translateX(0); }
  .vj-vl-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(4, 24, 26, .45);
    z-index: 10005;
  }
  html.vj-vl-lock, html.vj-vl-lock body { overflow: hidden; }

  /* search bar wraps into two rows */
  .vj-vl-search { flex-wrap: wrap; }
  .vj-vl-search-field,
  .vj-vl-search-field--grow { flex: 1 1 calc(50% - 14px); }
  .vj-vl-search-btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 767px) {
  .vj-vl-hero { padding: 120px 0 26px; }
  .vj-vl-grid { grid-template-columns: 1fr; }
  .vj-vl-search { padding: 14px; gap: 10px; }
  .vj-vl-search-field,
  .vj-vl-search-field--grow { flex: 1 1 100%; }
  .vj-vl-search-btn,
  .vj-vl-filters-toggle { flex: 1 1 calc(50% - 10px); justify-content: center; padding: 0 12px; }
  .vj-vl-results-head { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .vj-vl-sidebar { transition: none; }
}

/* ============================================================
   PROMOTIONAL VIDEO HERO — voyage detail (vj-voyage-video)
   FULL-WIDTH cinematic hero at the very top of the page (homepage-
   hero style): full-bleed, no card/radius/gutters, the floating
   site header overlays it. Namespaced; no bare `video`/`.hero`
   selectors. No reveal transforms/opacity on the block.
   ============================================================ */
.vj-voyage-video {
  margin: 0;
  width: 100%;
}
.vj-voyage-video__media {
  position: relative;
  width: 100%;
  /* desktop: cinematic 75–90vh, min ~650px, never past 100vh */
  height: clamp(650px, 84vh, 100vh);
  overflow: hidden;
  background: var(--vj-primary-700); /* teal while frames load — never a black hole */
}
.vj-voyage-video__el,
.vj-voyage-video__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* legibility gradients: darker top band under the floating header,
   soft bottom fade into the page */
.vj-voyage-video__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(4, 24, 26, .42) 0%, rgba(4, 24, 26, 0) 26%),
    linear-gradient(to top, rgba(4, 24, 26, .38) 0%, rgba(4, 24, 26, 0) 24%);
  pointer-events: none;
}

/* central play button — visible only when the video is paused */
.vj-voyage-video__bigplay {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 78px; height: 78px;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--vj-primary);
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 3;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
  transition: transform .2s var(--vj-ease), background .2s var(--vj-ease);
}
.vj-voyage-video__bigplay i { margin-left: 4px; } /* optical centering of ▶ */
.vj-voyage-video__bigplay:hover { transform: translate(-50%, -50%) scale(1.06); background: #fff; }
.vj-voyage-video.is-playing .vj-voyage-video__bigplay { display: none; }

/* minimal custom controls, bottom-right */
.vj-voyage-video__controls {
  position: absolute; right: 18px; bottom: 18px;
  display: flex; gap: 10px;
  z-index: 3;
}
.vj-voyage-video__ctrl {
  width: 44px; height: 44px;
  border: 0; border-radius: 999px;
  background: rgba(4, 24, 26, .55);
  backdrop-filter: blur(6px);
  color: #fff; font-size: .95rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s var(--vj-ease), transform .2s var(--vj-ease);
}
.vj-voyage-video__ctrl:hover { background: rgba(4, 24, 26, .78); transform: translateY(-1px); }
.vj-voyage-video__ctrl:focus-visible,
.vj-voyage-video__bigplay:focus-visible {
  outline: 3px solid var(--vj-accent);
  outline-offset: 3px;
}

/* tablet: 65–75vh */
@media (max-width: 991px) {
  .vj-voyage-video__media { height: clamp(520px, 70vh, 820px); }
}

/* mobile: 55–65vh, min ~420px, tighter chrome, no overflow */
@media (max-width: 640px) {
  .vj-voyage-video__media { height: clamp(420px, 60vh, 700px); }
  .vj-voyage-video__bigplay { width: 62px; height: 62px; font-size: 1.2rem; }
  .vj-voyage-video__ctrl { width: 40px; height: 40px; }
  .vj-voyage-video__controls { right: 12px; bottom: 12px; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .vj-voyage-video__bigplay,
  .vj-voyage-video__ctrl { transition: none; }
}

/* content under the full-bleed hero: the hero itself clears the floating
   header, so the old clamp(104px…) top padding is no longer needed */
.vj-vd.vj-vd--under-hero {
  padding-top: 34px;
}

/* Bento gallery relocated below the main content as its own section */
.vj-vd-gallery-sec { margin-top: 14px; }
.vj-vd-gallery-sec .vj-vd-h2 { margin-bottom: 18px; }

/* ============================================================
   PROTOTYPE FOOTER — Tourex-inspired structure, Voyaji branding.
   Namespaced under .vj-ft only. Deep teal, gold accents, large
   rounded top, subtle texture. No global selectors.
   ============================================================ */
.vj-ft {
  position: relative;
  margin-top: 0;
  color: #eaf4f4;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255, 170, 13, .10), transparent 55%),
    linear-gradient(180deg, var(--vj-primary) 0%, var(--vj-primary-700) 100%);
  border-radius: 40px 40px 0 0;
  overflow: hidden;
}
/* subtle existing-asset texture, very low opacity */
.vj-ft::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../../app/images/background/dark-dott-pattern.png") repeat;
  opacity: .06;
  pointer-events: none;
}
.vj-ft > * { position: relative; z-index: 1; }

/* ---------- A. newsletter / CTA ---------- */
.vj-ft-cta {
  padding: 46px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.vj-ft-cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 34px; flex-wrap: wrap;
}
.vj-ft-cta-text { flex: 1 1 380px; min-width: 0; }
.vj-ft-eyebrow {
  display: block;
  font-family: var(--font-script);
  font-size: 1.5rem;
  color: var(--vj-accent);
  line-height: 1;
  margin-bottom: 6px;
}
.vj-ft-cta-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700; letter-spacing: -.02em;
  color: #fff; margin: 0 0 8px;
}
.vj-ft-cta-desc {
  margin: 0; max-width: 460px;
  color: rgba(234, 244, 244, .72);
  font-size: .98rem; line-height: 1.6;
}
.vj-ft-news { flex: 1 1 380px; min-width: 0; }
.vj-ft-news-label {
  display: block;
  font-size: .8rem; font-weight: 600;
  color: rgba(234, 244, 244, .7);
  margin: 0 0 8px 4px;
}
.vj-ft-news-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
}
.vj-ft-news-row:focus-within { border-color: var(--vj-accent); }
.vj-ft-news-input {
  flex: 1 1 auto; min-width: 0;
  height: 44px; padding: 0 18px;
  border: 0; outline: none; background: transparent;
  color: #fff; font-size: .95rem; font-family: inherit;
}
.vj-ft-news-input::placeholder { color: rgba(234, 244, 244, .55); }
.vj-ft-news-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 24px;
  border: 0; border-radius: 999px;
  background: var(--vj-accent);
  color: var(--vj-primary-700);
  font-weight: 800; font-size: .93rem;
  cursor: pointer;
  transition: transform .2s var(--vj-ease), box-shadow .2s var(--vj-ease);
}
.vj-ft-news-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255, 170, 13, .32); }
.vj-ft-news-note {
  margin: 10px 0 0 4px;
  font-size: .85rem; color: var(--vj-accent);
}

/* ---------- B/C. columns ---------- */
.vj-ft-main {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding: 52px 0;
}
.vj-ft-col { min-width: 0; }
.vj-ft-logo { display: inline-block; margin-bottom: 18px; }
.vj-ft-logo img { height: 56px; width: auto; }
.vj-ft-brand-desc {
  margin: 0 0 20px;
  max-width: 320px;
  color: rgba(234, 244, 244, .72);
  font-size: .95rem; line-height: 1.65;
}
.vj-ft-social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.vj-ft-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #fff; font-size: 1rem;
  transition: background .2s var(--vj-ease), color .2s var(--vj-ease), transform .2s var(--vj-ease);
}
.vj-ft-social a:hover { background: var(--vj-accent); color: var(--vj-primary-700); transform: translateY(-2px); }

.vj-ft-col-title {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 700;
  color: #fff; margin: 0 0 18px;
}
.vj-ft-links { list-style: none; margin: 0; padding: 0; }
.vj-ft-links li { margin-bottom: 11px; }
.vj-ft-links a {
  color: rgba(234, 244, 244, .74);
  font-size: .95rem; font-weight: 500;
  transition: color .2s var(--vj-ease), padding-left .2s var(--vj-ease);
}
.vj-ft-links a:hover { color: var(--vj-accent); padding-left: 4px; }

.vj-ft-contact { list-style: none; margin: 0; padding: 0; }
.vj-ft-contact li {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
  color: rgba(234, 244, 244, .82);
  font-size: .95rem;
}
.vj-ft-contact-ico {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .08);
  color: var(--vj-accent);
  font-size: .9rem;
}
.vj-ft-contact a { color: rgba(234, 244, 244, .82); transition: color .2s var(--vj-ease); }
.vj-ft-contact a:hover { color: var(--vj-accent); }

/* ---------- D. bottom bar ---------- */
.vj-ft-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 20px 0;
}
.vj-ft-bottom-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.vj-ft-copy, .vj-ft-made {
  margin: 0; font-size: .86rem;
  color: rgba(234, 244, 244, .6);
}
.vj-ft-made { color: rgba(234, 244, 244, .5); }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .vj-ft-main { grid-template-columns: 1fr 1fr; gap: 34px 30px; padding: 44px 0; }
  .vj-ft-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .vj-ft { border-radius: 28px 28px 0 0; margin-top: 0; }
  .vj-ft-cta { padding: 34px 0; }
  .vj-ft-cta-inner { gap: 22px; }
  .vj-ft-main { grid-template-columns: 1fr; gap: 30px; padding: 36px 0; }
  .vj-ft-news-row { flex-wrap: wrap; border-radius: 20px; }
  .vj-ft-news-input { flex: 1 1 100%; height: 46px; }
  .vj-ft-news-btn { flex: 1 1 100%; justify-content: center; height: 46px; }
  .vj-ft-bottom-inner { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .vj-ft-news-btn, .vj-ft-social a, .vj-ft-links a, .vj-ft-contact a { transition: none; }
}

/* ============================================================
   CONTACT PAGE — Tourex-inspired, Voyaji design system.
   Fully scoped under .vj-contact — no global selectors.
   ============================================================ */
.vj-contact{
  --vjc-radius:28px;
  --vjc-shadow:0 24px 60px rgba(6,97,104,.10);
  --vjc-border:1px solid rgba(6,97,104,.12);
  font-family:var(--font-body,system-ui,-apple-system,"Segoe UI",sans-serif);
  color:var(--vj-ink);
  background:#fff;
}
.vj-contact *{ box-sizing:border-box; }

/* ---------- HERO ---------- */
.vj-contact__hero{
  position:relative;
  text-align:center;
  padding:clamp(128px,15vw,180px) 20px clamp(48px,6vw,72px);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(6,97,104,.10) 0%, rgba(6,97,104,0) 55%),
    linear-gradient(180deg,var(--vj-surface-2) 0%,#fff 100%);
  border-radius:0 0 40px 40px;
  overflow:hidden;
}
.vj-contact__eyebrow{
  display:inline-block;
  font-family:var(--font-script);
  font-size:clamp(1.4rem,3.2vw,2rem);
  line-height:1;
  color:var(--vj-accent-600);
  margin-bottom:10px;
}
.vj-contact__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2rem,5vw,3.4rem);
  line-height:1.08;
  letter-spacing:-.01em;
  color:var(--vj-ink);
  margin:0 0 14px;
}
.vj-contact__title span{ color:var(--vj-primary); }
.vj-contact__lead{
  max-width:640px;
  margin:0 auto 22px;
  font-size:clamp(1rem,1.6vw,1.12rem);
  line-height:1.6;
  color:rgba(15,46,52,.72);
}
.vj-contact__crumbs{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.92rem;
  font-weight:600;
  color:rgba(15,46,52,.62);
}
.vj-contact__crumbs a{ color:var(--vj-primary); text-decoration:none; }
.vj-contact__crumbs a:hover{ color:var(--vj-primary-700); }
.vj-contact__crumbs .sep{ color:rgba(15,46,52,.3); }

/* ---------- SHARED WRAP ---------- */
.vj-contact__wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* ---------- MAIN: form + details ---------- */
.vj-contact__main{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  padding:clamp(30px,4vw,52px) 0 0;
}
@media (min-width:992px){
  .vj-contact__main{ grid-template-columns:1.5fr 1fr; align-items:start; }
}

/* form card */
.vj-contact__form-card{
  background:#fff;
  border:var(--vjc-border);
  border-radius:var(--vjc-radius);
  box-shadow:var(--vjc-shadow);
  padding:clamp(24px,3.5vw,44px);
}
.vj-contact__form-head{ margin-bottom:26px; }
.vj-contact__form-head h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2rem);
  color:var(--vj-ink);
  margin:0 0 8px;
}
.vj-contact__form-head p{ margin:0; color:rgba(15,46,52,.66); font-size:.98rem; }

.vj-contact__form .form-group,
.vj-contact__field{ margin-bottom:20px; }
.vj-contact__field label,
.vj-contact__form label{
  display:block;
  font-weight:600;
  font-size:.92rem;
  color:var(--vj-ink);
  margin-bottom:8px;
}
.vj-contact__form .vjc-input,
.vj-contact__form input[type="text"],
.vj-contact__form input[type="email"],
.vj-contact__form textarea{
  width:100%;
  border:1px solid rgba(6,97,104,.18);
  border-radius:16px;
  background:#fff;
  color:var(--vj-ink);
  font-size:1rem;
  font-family:inherit;
  padding:15px 18px;
  outline:0;
  transition:border-color .2s var(--vj-ease),box-shadow .2s var(--vj-ease);
}
.vj-contact__form textarea{ min-height:150px; resize:vertical; line-height:1.55; }
.vj-contact__form input::placeholder,
.vj-contact__form textarea::placeholder{ color:rgba(15,46,52,.42); }
.vj-contact__form input:focus,
.vj-contact__form textarea:focus{
  border-color:var(--vj-accent);
  box-shadow:0 0 0 4px rgba(255,170,13,.22);
}
/* validation error state + messages */
.vj-contact__form .form-group.has-error input,
.vj-contact__form .form-group.has-error textarea{
  border-color:#e0564f;
  box-shadow:0 0 0 4px rgba(224,86,79,.14);
}
.vj-contact__errors{ list-style:none; margin:8px 0 0; padding:0; }
.vj-contact__errors li{
  display:flex;align-items:center;gap:7px;
  color:#c8433c;font-size:.86rem;font-weight:500;margin-top:4px;
}
.vj-contact__errors li::before{ content:"\26A0"; font-size:.85rem; }

.vj-contact__submit{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;
  border:0;cursor:pointer;
  background:var(--vj-primary);
  color:#fff;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.05rem;
  padding:16px 28px;
  border-radius:999px;
  box-shadow:0 12px 26px rgba(6,97,104,.28);
  transition:transform .25s var(--vj-ease),background .25s var(--vj-ease),box-shadow .25s var(--vj-ease);
}
.vj-contact__submit:hover{ background:var(--vj-primary-700); transform:translateY(-2px); }
.vj-contact__submit:focus-visible{ outline:3px solid var(--vj-accent); outline-offset:3px; }
.vj-contact__form-note{ margin:16px 0 0; font-size:.86rem; color:rgba(15,46,52,.55); text-align:center; }

/* two-up field rows (name+email, phone+subject) — collapse to one column on mobile */
.vj-contact__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 20px;
}
.vj-contact__row .form-group{ min-width:0; }

/* honeypot — visually hidden but still in the DOM for bots to trip over */
.vj-contact__hp{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap;
}

/* submission feedback (flash) */
.vj-contact__flash{
  display:flex; align-items:center; gap:10px;
  padding:14px 18px;
  border-radius:16px;
  font-size:.95rem; font-weight:500;
  margin:0 0 22px;
}
.vj-contact__flash i{ font-size:1.05rem; flex:0 0 auto; }
.vj-contact__flash--ok{
  background:rgba(6,97,104,.08);
  color:var(--vj-primary-700);
  border:1px solid rgba(6,97,104,.18);
}
.vj-contact__flash--err{
  background:rgba(224,86,79,.08);
  color:#c8433c;
  border:1px solid rgba(224,86,79,.22);
}

/* details panel */
.vj-contact__details{
  background:linear-gradient(160deg,var(--vj-primary) 0%,var(--vj-primary-700) 100%);
  color:#fff;
  border-radius:var(--vjc-radius);
  padding:clamp(26px,3.5vw,40px);
  box-shadow:var(--vjc-shadow);
}
.vj-contact__details h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.4rem,2.4vw,1.8rem);
  margin:0 0 10px;color:#fff;
}
.vj-contact__details-lead{ color:rgba(255,255,255,.82); font-size:.98rem; line-height:1.6; margin:0 0 26px; }
.vj-contact__detail{
  display:flex;align-items:center;gap:15px;
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.14);
  text-decoration:none;color:#fff;
}
.vj-contact__detail:first-of-type{ border-top:0; }
.vj-contact__detail-ico{
  flex:0 0 auto;width:46px;height:46px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  background:rgba(255,255,255,.14);color:#fff;
  transition:background .25s var(--vj-ease);
}
a.vj-contact__detail:hover .vj-contact__detail-ico{ background:var(--vj-accent); color:var(--vj-ink); }
.vj-contact__detail-label{ display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.6); }
.vj-contact__detail-value{ display:block;font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:#fff; }
.vj-contact__social{ display:flex;gap:12px;margin-top:26px; }
.vj-contact__social a{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;
  background:rgba(255,255,255,.12);color:#fff;text-decoration:none;
  transition:background .25s var(--vj-ease),transform .25s var(--vj-ease);
}
.vj-contact__social a:hover{ background:var(--vj-accent); color:var(--vj-ink); transform:translateY(-3px); }

/* ---------- REASSURANCE / CTA ---------- */
.vj-contact__cta{
  margin:clamp(56px,7vw,90px) 0 0;
  background:var(--vj-surface-2);
  border:var(--vjc-border);
  border-radius:var(--vjc-radius);
  padding:clamp(30px,4vw,52px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
}
.vj-contact__cta h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.4rem,2.6vw,2rem);margin:0 0 6px;color:var(--vj-ink);
}
.vj-contact__cta p{ margin:0;color:rgba(15,46,52,.66);font-size:1rem; }
.vj-contact__cta-links{ display:flex;flex-wrap:wrap;gap:12px; }
.vj-contact__chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:999px;
  background:#fff;border:1px solid rgba(6,97,104,.16);
  color:var(--vj-primary);font-weight:600;font-size:.95rem;text-decoration:none;
  transition:background .25s var(--vj-ease),color .25s var(--vj-ease),transform .25s var(--vj-ease);
}
.vj-contact__chip:hover{ transform:translateY(-2px); }
.vj-contact__chip--primary{ background:var(--vj-primary);color:#fff;border-color:transparent;box-shadow:0 12px 26px rgba(6,97,104,.24); }
.vj-contact__chip--primary:hover{ background:var(--vj-primary-700); }

/* bottom spacing before footer */
.vj-contact__outro{ height:clamp(56px,7vw,90px); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:600px){
  .vj-contact__cta{ flex-direction:column;align-items:flex-start; }
  .vj-contact__submit{ font-size:1rem; }
  .vj-contact__row{ grid-template-columns:1fr; gap:0; }
}

@media (prefers-reduced-motion:reduce){
  .vj-contact__submit,.vj-contact__detail-ico,
  .vj-contact__social a,.vj-contact__chip{ transition:none; }
}

/* ============================================================
   ACTIVITIES — listing (.vj-activities) + detail (.vj-activity-detail,
   .vj-activity-hero) + card (.vj-activity-card).
   Everything reuses the approved vj-vl / vj-vd / vj-wk systems; only the
   activity-specific bits live here, strictly scoped (no broad selectors,
   no opacity:0 reveal defaults, no animation on grid wrappers).
   ============================================================ */

/* card: no rating row on activity cards — keep title/meta rhythm balanced */
.vj-activity-card .vj-wk-title { margin-bottom: 12px; }

/* detail hero: image variant of the voyage video hero (no controls) */
.vj-activity-hero .vj-voyage-video__img { display: block; }

/* time-slot schedule (Activity "programme" is time slots, not days) */
.vj-activity-detail .vj-act-schedule {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.vj-activity-detail .vj-act-schedule::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, rgba(6, 97, 104, .28), rgba(6, 97, 104, .06));
}
.vj-activity-detail .vj-act-step {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 0 0 22px;
}
.vj-activity-detail .vj-act-step:last-child { padding-bottom: 0; }
.vj-activity-detail .vj-act-step-dot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(6, 97, 104, .22);
  color: var(--vj-primary);
  box-shadow: 0 6px 14px rgba(6, 97, 104, .10);
  font-size: .85rem;
}
.vj-activity-detail .vj-act-step-body { flex: 1; min-width: 0; padding-top: 7px; }
.vj-activity-detail .vj-act-step-time {
  margin: 0 0 6px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--vj-ink);
  line-height: 1.4;
}
.vj-activity-detail .vj-act-step-body p {
  margin: 0 0 8px;
  color: var(--vj-muted);
  line-height: 1.8;
  font-size: .96rem;
}
.vj-activity-detail .vj-act-step-body p:last-child { margin-bottom: 0; }

/* "Bon à savoir" free-text block */
.vj-activity-detail .vj-act-infos {
  color: var(--vj-muted);
  line-height: 1.9;
  font-size: .98rem;
}

/* ============================================================
   VOYAJI PRELOADER (.vj-preloader) — cinematic full-screen loader.
   Root keeps the theme's .loading-area class (fixed / full / z-index
   from style.css, hidden by custom.js fadeOut) — these rules only
   restyle it. Everything is scoped under .vj-preloader; the old
   .loading-box / .loading-pic dot markup is gone from the templates.
   ============================================================ */
.vj-preloader{
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(8,118,126,.32), transparent 60%),
    linear-gradient(165deg, #052e33 0%, #04181a 58%, #030f11 100%);
}

/* animated grain — oversized SVG-turbulence layer jittered by the
   noise-animation keyframes (kept subtle: film grain, not static) */
.vj-pre-noise{
  position:absolute;
  inset:-100%;
  width:300%;
  height:300%;
  pointer-events:none;
  opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;
  animation:noise-animation .6s steps(10) infinite;
}

@keyframes noise-animation{
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-2%, -3%); }
  20%  { transform: translate(-4%, 2%); }
  30%  { transform: translate(2%, -4%); }
  40%  { transform: translate(-2%, 5%); }
  50%  { transform: translate(-4%, 2%); }
  60%  { transform: translate(3%, 0); }
  70%  { transform: translate(0, 3%); }
  80%  { transform: translate(-3%, 0); }
  90%  { transform: translate(2%, 2%); }
  100% { transform: translate(1%, 0); }
}

.vj-pre-center{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:26px;
  padding:0 24px;
  text-align:center;
  animation:vj-pre-in .9s var(--vj-ease, ease) both;
}

@keyframes vj-pre-in{
  from{ opacity:0; transform:translateY(10px) scale(.985); }
  to  { opacity:1; transform:translateY(0)    scale(1); }
}

.vj-pre-logo{
  width:clamp(140px, 22vw, 210px);
  height:auto;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.45));
}

/* elegant sweeping progress line */
.vj-pre-line{
  position:relative;
  width:clamp(150px, 24vw, 230px);
  height:2px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  overflow:hidden;
}
.vj-pre-line span{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:38%;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--vj-accent, #ffaa0d) 45%, #ffd47e);
  animation:vj-pre-sweep 1.4s cubic-bezier(.65,.05,.35,.95) infinite;
}
@keyframes vj-pre-sweep{
  0%   { left:-40%; }
  100% { left:105%; }
}

.vj-pre-text{
  margin:0;
  color:rgba(255,255,255,.62);
  font-family:var(--font-display);
  font-weight:500;
  font-size:.92rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* motion sensitivity: static premium screen, no grain jitter or sweep */
@media (prefers-reduced-motion:reduce){
  .vj-pre-noise{ animation:none; }
  .vj-pre-center{ animation:none; }
  .vj-pre-line span{ animation:none; left:0; width:100%; }
}

/* ============================================================
   HOW VOYAJI WORKS — homepage process section (.vj-process)
   Bento grid: 3 image tiles + 3 process cards.
   ============================================================ */
.vj-process {
  background: #f5f8f8;
  padding: clamp(56px, 8vw, 104px) 0;
}

.vj-process__header {
  max-width: 660px;
  margin: 0 auto clamp(36px, 5vw, 56px);
  text-align: center;
}

.vj-process__eyebrow {
  display: block;
  font-family: var(--font-script);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  color: var(--vj-accent);
  margin-bottom: 10px;
}

.vj-process__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  color: #102a2c;
  margin: 0 0 14px;
}

.vj-process__lead {
  font-size: 16px;
  line-height: 1.7;
  color: #5b6f71;
  margin: 0;
}

.vj-process__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(240px, 24vw, 320px);
  gap: clamp(16px, 2vw, 24px);
}

/* image tiles */
.vj-process__image {
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #dde7e7; /* stable placeholder while the photo loads */
}

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

@media (hover: hover) and (min-width: 1025px) {
  .vj-process__image img {
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
  }
  .vj-process__image:hover img {
    transform: scale(1.05);
  }
}

/* process cards */
.vj-process__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #ffffff;
  border: 1px solid rgba(6, 97, 104, .10);
  border-radius: 24px;
  padding: clamp(24px, 2.6vw, 36px);
  box-shadow: 0 6px 22px rgba(6, 97, 104, .05);
  overflow: hidden;
}

.vj-process__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(6, 97, 104, .08);
  color: var(--vj-primary);
  font-size: 22px;
  margin-bottom: 18px;
}

.vj-process__step {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 4vw, 60px);
  line-height: 1;
  color: rgba(6, 97, 104, .07);
  pointer-events: none;
}

.vj-process__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 1.6vw, 22px);
  color: #102a2c;
  margin: 0 0 10px;
}

.vj-process__text {
  font-size: 15px;
  line-height: 1.65;
  color: #5b6f71;
  margin: 0;
}

/* gated entrance reveal — content stays fully visible without JS
   (the shifted state only exists once JS adds .vj-process--pending) */
.vj-process--pending .vj-process__grid > * {
  transform: translateY(18px);
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.vj-process--pending .vj-process__grid > :nth-child(2) { transition-delay: .08s; }
.vj-process--pending .vj-process__grid > :nth-child(3) { transition-delay: .16s; }
.vj-process--pending .vj-process__grid > :nth-child(4) { transition-delay: .24s; }
.vj-process--pending .vj-process__grid > :nth-child(5) { transition-delay: .32s; }
.vj-process--pending .vj-process__grid > :nth-child(6) { transition-delay: .40s; }
.vj-process--in .vj-process__grid > * {
  transform: translateY(0);
}

/* tablet: 2 columns, natural alternation (img/card per row) */
@media (max-width: 1024px) {
  .vj-process__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(230px, 30vw, 300px);
  }
}

/* mobile: single column, cards before their image */
@media (max-width: 767px) {
  .vj-process__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .vj-process__image {
    height: clamp(200px, 56vw, 260px);
  }
  .vj-process__card {
    min-height: 0;
    padding: 26px 22px;
  }
  .vj-process__cell--card1 { order: 1; }
  .vj-process__cell--img1  { order: 2; }
  .vj-process__cell--card2 { order: 3; }
  .vj-process__cell--img2  { order: 4; }
  .vj-process__cell--card3 { order: 5; }
  .vj-process__cell--img3  { order: 6; }
}

@media (prefers-reduced-motion: reduce) {
  .vj-process--pending .vj-process__grid > *,
  .vj-process__image img {
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
   VOYAJI STATS — trust indicators (homepage, below process)
   ============================================================ */
.vj-stats {
    background: #ffffff;
    padding: clamp(54px, 7vw, 96px) 0;
}
.vj-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.5vw, 20px);
}
.vj-stats__item {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    min-height: clamp(280px, 24vw, 336px);
    padding: clamp(22px, 2.4vw, 30px);
    border: 1px solid rgba(2, 40, 44, 0.08);
    border-radius: clamp(20px, 2vw, 28px);
    text-align: left;
    box-shadow: 0 18px 42px rgba(3, 35, 38, 0.08);
    transition: transform .25s ease, box-shadow .25s ease;
}
.vj-stats__item:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 50px rgba(3, 35, 38, 0.13);
}
.vj-stats__item--community { background: #e7eae7; color: #092f32; }
.vj-stats__item--accent {
    border-color: var(--vj-primary, #066168);
    background: var(--vj-primary, #066168);
    color: #ffffff;
}
.vj-stats__item--bookings {
    background: #eee9e4;
    color: #092f32;
}
.vj-stats__topline {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.vj-stats__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
    opacity: .72;
}
.vj-stats__number {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: clamp(32px, 4vw, 60px);
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-weight: 650;
    font-size: clamp(48px, 5vw, 72px);
    line-height: .95;
    letter-spacing: -.055em;
    color: currentColor;
    white-space: nowrap;
}
.vj-stats__icon {
    position: relative;
    z-index: 2;
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: .82;
}
.vj-stats__icon i {
    font-size: 16px;
    color: currentColor;
}
.vj-stats__label {
    position: relative;
    z-index: 2;
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-weight: 650;
    font-size: clamp(17px, 1.45vw, 21px);
    line-height: 1.2;
    color: currentColor;
    margin: 10px 0 0;
}
.vj-stats__copy {
    position: relative;
    z-index: 2;
    max-width: 25ch;
    margin: auto 0 0;
    padding-top: 22px;
    font-family: var(--font-body, "Google Sans", sans-serif);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: currentColor;
    opacity: .76;
}
.vj-stats__item--image {
    border-color: rgba(255, 255, 255, .18);
    background: #173c32;
    color: #fff;
}
.vj-stats__media,
.vj-stats__shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.vj-stats__media {
    z-index: -2;
    object-fit: cover;
    object-position: center 55%;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.vj-stats__shade {
    z-index: -1;
    background: linear-gradient(180deg, rgba(2, 24, 20, .22) 0%, rgba(2, 24, 20, .25) 36%, rgba(2, 24, 20, .9) 100%);
}
.vj-stats__item--image:hover .vj-stats__media {
    transform: scale(1.045);
}
.vj-stats__item--image .vj-stats__eyebrow,
.vj-stats__item--image .vj-stats__icon {
    border-color: rgba(255, 255, 255, .72);
    opacity: 1;
}
.vj-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 1024px) {
    .vj-stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
    .vj-stats__item { min-height: 300px; }
}
@media (max-width: 620px) {
    .vj-stats__grid { grid-template-columns: 1fr; }
    .vj-stats__item { min-height: 285px; }
    .vj-stats__number { margin-top: 38px; }
}
@media (prefers-reduced-motion: reduce) {
    .vj-stats__item,
    .vj-stats__media {
        transition: none !important;
        transform: none !important;
    }
}

/* ============================================================
   VOYAJI ABOUT — "Qui sommes-nous ?" (homepage, below stats)
   ============================================================ */
.vj-about {
    background: #f5f8f8;
    padding: clamp(56px, 8vw, 104px) 0;
}
.vj-about__inner {
    display: grid;
    grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
}
.vj-about__visual {
    position: relative;
    min-height: clamp(500px, 47vw, 640px);
    isolation: isolate;
}
.vj-about__frame {
    margin: 0;
    overflow: hidden;
    background: rgba(6, 97, 104, 0.08);
}
.vj-about__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vj-about__frame--main {
    position: absolute;
    z-index: 1;
    top: 3%;
    right: 11%;
    width: 73%;
    height: 90%;
    border-radius: clamp(18px, 2vw, 30px);
}
.vj-about__frame--main img {
    object-position: 53% center;
}
.vj-about__frame--inset {
    position: absolute;
    z-index: 3;
    left: 0;
    top: 32%;
    width: 49%;
    aspect-ratio: 1.05 / 1;
    border: clamp(5px, .55vw, 8px) solid #f5f8f8;
    border-radius: clamp(16px, 1.6vw, 24px);
    box-shadow: 0 18px 45px rgba(16, 42, 44, .16);
}
.vj-about__frame--inset img {
    object-position: 51% center;
}
.vj-about__compass {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: clamp(92px, 9vw, 132px);
    color: rgba(16, 42, 44, .14);
}
.vj-about__compass svg {
    display: block;
    width: 100%;
    height: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
}
.vj-about__travel {
    position: absolute;
    z-index: 2;
    top: 11%;
    right: 0;
    display: flex;
    align-items: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-size: clamp(44px, 5.2vw, 72px);
    font-weight: 700;
    line-height: .82;
    letter-spacing: .02em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(16, 42, 44, .40);
    text-stroke: 1px rgba(16, 42, 44, .40);
    pointer-events: none;
}
.vj-about__travel-accent {
    -webkit-text-stroke-color: var(--vj-accent, #ffaa0d);
    text-stroke-color: var(--vj-accent, #ffaa0d);
}
.vj-about__eyebrow {
    display: block;
    font-family: var(--font-script, cursive);
    font-size: clamp(22px, 2.4vw, 30px);
    color: var(--vj-accent, #ffaa0d);
    margin-bottom: 8px;
}
.vj-about__heading {
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-weight: 700;
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.2;
    color: #102a2c;
    margin: 0 0 16px;
}
.vj-about__lead {
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.7;
    color: #4a5f61;
    margin: 0 0 clamp(24px, 3vw, 36px);
}
.vj-about__metrics {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: clamp(20px, 3vw, 44px);
    padding: 0;
    margin: 0 0 clamp(28px, 3.5vw, 40px);
}
.vj-about__metric {
    display: flex;
    flex-direction: column;
}
.vj-about__metric-value {
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-weight: 700;
    font-size: clamp(26px, 2.8vw, 36px);
    line-height: 1.1;
    color: var(--vj-primary, #066168);
}
.vj-about__metric-label {
    font-size: 13px;
    color: #4a5f61;
    margin-top: 4px;
}
.vj-about__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(20px, 3vw, 36px);
}
.vj-about__cta {
    display: inline-block;
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    background: var(--vj-primary, #066168);
    border-radius: 999px;
    padding: 14px 28px;
    text-decoration: none;
    transition: background .25s ease;
}
.vj-about__cta:hover,
.vj-about__cta:focus {
    background: #054d52;
    color: #fff;
}
.vj-about__founder {
    display: flex;
    align-items: center;
    gap: 12px;
}
.vj-about__founder-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 97, 104, 0.10);
    color: var(--vj-primary, #066168);
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .5px;
}
.vj-about__founder-id {
    display: flex;
    flex-direction: column;
}
.vj-about__founder-id strong {
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-size: 16px;
    color: #102a2c;
}
.vj-about__founder-id span {
    font-size: 13px;
    color: #4a5f61;
}
@media (max-width: 991px) {
    .vj-about__inner { grid-template-columns: 1fr; }
    .vj-about__visual {
        width: min(100%, 680px);
        min-height: clamp(480px, 82vw, 620px);
        margin-inline: auto;
    }
    .vj-about__content { max-width: 680px; margin-inline: auto; }
}
@media (max-width: 480px) {
    .vj-about__visual { min-height: 440px; }
    .vj-about__frame--main {
        right: 12%;
        width: 78%;
        height: 88%;
    }
    .vj-about__frame--inset {
        top: 37%;
        width: 53%;
    }
    .vj-about__compass { width: 76px; }
    .vj-about__travel { font-size: 40px; }
    .vj-about__metrics {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
    .vj-about__actions {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* About v2 — native Twig/CSS adaptation of the supplied split hero. */
.vj-about[data-vj-about] {
    overflow: hidden;
    background: #fff;
    padding: clamp(72px, 9vw, 124px) 0;
}
.vj-about[data-vj-about] .vj-about__inner {
    display: grid;
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
    align-items: center;
    gap: clamp(46px, 7vw, 96px);
}
.vj-about[data-vj-about] .vj-about__content {
    position: relative;
    z-index: 5;
    max-width: 660px;
}
.vj-about[data-vj-about] .vj-about__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    margin: 0 0 18px;
    padding: 7px 12px;
    border: 1px solid rgba(6, 97, 104, .18);
    border-radius: 999px;
    background: rgba(6, 97, 104, .07);
    color: var(--vj-primary, #066168);
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    line-height: 1;
    text-transform: uppercase;
}
.vj-about[data-vj-about] .vj-about__eyebrow i {
    color: var(--vj-accent, #ffaa0d);
    font-size: 13px;
}
.vj-about[data-vj-about] .vj-about__heading {
    max-width: 11ch;
    margin: 0;
    color: #0b2f32;
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 720;
    letter-spacing: -.055em;
    line-height: .99;
}
.vj-about[data-vj-about] .vj-about__heading span {
    display: block;
    color: var(--vj-primary, #066168);
}
.vj-about[data-vj-about] .vj-about__lead {
    max-width: 59ch;
    margin: clamp(24px, 3vw, 34px) 0 0;
    color: #4d6264;
    font-size: clamp(15px, 1.25vw, 17px);
    font-weight: 450;
    line-height: 1.75;
}
.vj-about[data-vj-about] .vj-about__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(28px, 3.5vw, 40px);
}
.vj-about[data-vj-about] .vj-about__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 13px 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: transform .22s ease, background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
}
.vj-about[data-vj-about] .vj-about__cta--primary {
    border-color: var(--vj-primary, #066168);
    background: var(--vj-primary, #066168);
    color: #fff;
    box-shadow: 0 14px 30px rgba(6, 97, 104, .20);
}
.vj-about[data-vj-about] .vj-about__cta--primary:hover,
.vj-about[data-vj-about] .vj-about__cta--primary:focus {
    background: #054d52;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(6, 97, 104, .27);
}
.vj-about[data-vj-about] .vj-about__cta--primary i {
    font-size: 12px;
    transition: transform .22s ease;
}
.vj-about[data-vj-about] .vj-about__cta--primary:hover i {
    transform: translateX(3px);
}
.vj-about[data-vj-about] .vj-about__cta--secondary {
    border-color: rgba(6, 97, 104, .22);
    background: rgba(255, 255, 255, .72);
    color: var(--vj-primary, #066168);
}
.vj-about[data-vj-about] .vj-about__cta--secondary:hover,
.vj-about[data-vj-about] .vj-about__cta--secondary:focus {
    border-color: var(--vj-primary, #066168);
    background: #fff;
    color: #054d52;
    transform: translateY(-2px);
}
.vj-about[data-vj-about] .vj-about__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: clamp(34px, 4vw, 48px) 0 0;
    padding: 22px 0 0;
    border-top: 1px solid rgba(6, 97, 104, .13);
    list-style: none;
}
.vj-about[data-vj-about] .vj-about__metric {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}
.vj-about[data-vj-about] .vj-about__metric-icon {
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(6, 97, 104, .09);
    color: var(--vj-primary, #066168);
    font-size: 14px;
}
.vj-about[data-vj-about] .vj-about__metric-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}
.vj-about[data-vj-about] .vj-about__metric-value {
    color: #0b2f32;
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-size: clamp(22px, 2.1vw, 30px);
    font-weight: 750;
    letter-spacing: -.035em;
    line-height: 1;
}
.vj-about[data-vj-about] .vj-about__metric-label {
    margin-top: 5px;
    color: #647779;
    font-size: 11.5px;
    font-weight: 550;
    line-height: 1.25;
}
.vj-about[data-vj-about] .vj-about__visual {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: clamp(540px, 48vw, 650px);
}
.vj-about[data-vj-about] .vj-about__frame {
    position: absolute;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0;
    padding: clamp(5px, .5vw, 8px);
    border: 1px solid rgba(6, 97, 104, .10);
    border-radius: clamp(18px, 2vw, 28px);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 24px 60px rgba(16, 42, 44, .18);
}
.vj-about[data-vj-about] .vj-about__frame img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: clamp(14px, 1.55vw, 22px);
    object-fit: cover;
    transition: transform .65s cubic-bezier(.2, .75, .2, 1);
}
.vj-about[data-vj-about] .vj-about__frame:hover img {
    transform: scale(1.045);
}
.vj-about[data-vj-about] .vj-about__frame--atlas {
    z-index: 2;
    top: 0;
    left: 24%;
    width: 52%;
    height: 57%;
    transform: rotate(-1.4deg);
}
.vj-about[data-vj-about] .vj-about__frame--atlas img { object-position: center 52%; }
.vj-about[data-vj-about] .vj-about__frame--rabat {
    z-index: 3;
    top: 31%;
    right: 0;
    width: 43%;
    height: 45%;
    transform: rotate(2.2deg);
}
.vj-about[data-vj-about] .vj-about__frame--rabat img { object-position: center 48%; }
.vj-about[data-vj-about] .vj-about__frame--desert {
    z-index: 4;
    bottom: 1%;
    left: 0;
    width: 41%;
    height: 39%;
    transform: rotate(-2deg);
}
.vj-about[data-vj-about] .vj-about__frame--desert img { object-position: center 56%; }
.vj-about[data-vj-about] .vj-about__shape {
    position: absolute;
    z-index: 0;
    display: block;
    pointer-events: none;
    animation: vjAboutFloat 5s ease-in-out infinite;
}
.vj-about[data-vj-about] .vj-about__shape--circle {
    top: 4%;
    left: 7%;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(255, 170, 13, .20);
}
.vj-about[data-vj-about] .vj-about__shape--square {
    right: 12%;
    bottom: 5%;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(6, 97, 104, .13);
    animation-delay: -1.2s;
}
.vj-about[data-vj-about] .vj-about__shape--dot {
    bottom: 23%;
    left: 44%;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--vj-accent, #ffaa0d);
    animation-delay: -2.4s;
}
.vj-about[data-vj-about] .vj-about__visual-badge {
    position: absolute;
    z-index: 7;
    right: 34%;
    bottom: 17%;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 9px 13px;
    border: 4px solid #f6f8f7;
    border-radius: 999px;
    background: var(--vj-primary, #066168);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(6, 97, 104, .24);
}
.vj-about[data-vj-about] .vj-about__content > *,
.vj-about[data-vj-about] .vj-about__frame,
.vj-about[data-vj-about] .vj-about__visual-badge {
    transition: opacity .58s ease, transform .58s cubic-bezier(.2, .75, .2, 1);
}
.vj-about[data-vj-about].vj-about--pending .vj-about__content > * {
    opacity: 0;
    transform: translateY(22px);
}
.vj-about[data-vj-about].vj-about--pending .vj-about__content > :nth-child(2) { transition-delay: .06s; }
.vj-about[data-vj-about].vj-about--pending .vj-about__content > :nth-child(3) { transition-delay: .12s; }
.vj-about[data-vj-about].vj-about--pending .vj-about__content > :nth-child(4) { transition-delay: .18s; }
.vj-about[data-vj-about].vj-about--pending .vj-about__content > :nth-child(5) { transition-delay: .24s; }
.vj-about[data-vj-about].vj-about--pending .vj-about__frame--atlas { opacity: 0; transform: translateY(24px) scale(.9) rotate(-1.4deg); }
.vj-about[data-vj-about].vj-about--pending .vj-about__frame--rabat { opacity: 0; transform: translate(24px, 20px) scale(.9) rotate(2.2deg); }
.vj-about[data-vj-about].vj-about--pending .vj-about__frame--desert { opacity: 0; transform: translate(-24px, 20px) scale(.9) rotate(-2deg); }
.vj-about[data-vj-about].vj-about--pending .vj-about__visual-badge { opacity: 0; transform: translateY(16px) scale(.92); }

@keyframes vjAboutFloat {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-9px) rotate(3deg); }
}

@media (max-width: 1100px) {
    .vj-about[data-vj-about] .vj-about__inner { gap: 38px; }
    .vj-about[data-vj-about] .vj-about__heading { font-size: clamp(40px, 4.6vw, 56px); }
    .vj-about[data-vj-about] .vj-about__metric { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 991px) {
    .vj-about[data-vj-about] .vj-about__inner { grid-template-columns: 1fr; }
    .vj-about[data-vj-about] .vj-about__content {
        width: min(100%, 760px);
        max-width: none;
        margin-inline: auto;
        text-align: center;
    }
    .vj-about[data-vj-about] .vj-about__heading,
    .vj-about[data-vj-about] .vj-about__lead { margin-inline: auto; }
    .vj-about[data-vj-about] .vj-about__actions { justify-content: center; }
    .vj-about[data-vj-about] .vj-about__metrics { text-align: left; }
    .vj-about[data-vj-about] .vj-about__metric { align-items: center; flex-direction: row; }
    .vj-about[data-vj-about] .vj-about__visual {
        width: min(100%, 720px);
        min-height: clamp(540px, 84vw, 640px);
        margin-inline: auto;
    }
}
@media (max-width: 640px) {
    .vj-about[data-vj-about] { padding: 64px 0 76px; }
    .vj-about[data-vj-about] .vj-about__heading { max-width: 12ch; font-size: clamp(38px, 11vw, 50px); }
    .vj-about[data-vj-about] .vj-about__lead { line-height: 1.65; }
    .vj-about[data-vj-about] .vj-about__metrics { grid-template-columns: 1fr; }
    .vj-about[data-vj-about] .vj-about__metric { justify-content: center; text-align: left; }
    .vj-about[data-vj-about] .vj-about__visual { min-height: 470px; }
    .vj-about[data-vj-about] .vj-about__frame--atlas { left: 20%; width: 58%; height: 56%; }
    .vj-about[data-vj-about] .vj-about__frame--rabat { top: 32%; width: 48%; height: 43%; }
    .vj-about[data-vj-about] .vj-about__frame--desert { width: 45%; height: 36%; }
    .vj-about[data-vj-about] .vj-about__shape--circle { width: 58px; height: 58px; }
    .vj-about[data-vj-about] .vj-about__shape--square { width: 46px; height: 46px; }
    .vj-about[data-vj-about] .vj-about__visual-badge { right: 29%; bottom: 16%; }
}
@media (max-width: 480px) {
    .vj-about[data-vj-about] .vj-about__actions { align-items: stretch; }
    .vj-about[data-vj-about] .vj-about__cta { width: 100%; }
    .vj-about[data-vj-about] .vj-about__visual { min-height: 420px; }
    .vj-about[data-vj-about] .vj-about__visual-badge { border-width: 3px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .vj-about[data-vj-about] *,
    .vj-about[data-vj-about] *::before,
    .vj-about[data-vj-about] *::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* ============================================================
   VOYAJI BLOG — listing, cards, article, related, homepage
   ============================================================ */
.vj-blog {
    background: #f5f8f8;
}
.vj-blog__hero {
    background: linear-gradient(160deg, #044449 0%, var(--vj-primary, #066168) 60%, #0a7b83 100%);
    color: #fff;
    text-align: center;
    padding: clamp(120px, 16vw, 190px) 20px clamp(48px, 6vw, 80px);
}
.vj-blog__eyebrow {
    display: block;
    font-family: var(--font-script, cursive);
    font-size: clamp(22px, 2.6vw, 30px);
    color: var(--vj-accent, #ffaa0d);
    margin-bottom: 10px;
}
.vj-blog__title {
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-weight: 700;
    font-size: clamp(30px, 4.6vw, 48px);
    line-height: 1.15;
    color: #fff;
    margin: 0 auto 14px;
    max-width: 860px;
}
.vj-blog__title span { color: var(--vj-accent, #ffaa0d); }
.vj-blog__lead {
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
    max-width: 640px;
    margin: 0 auto 18px;
}
.vj-blog__crumbs {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.vj-blog__crumbs a { color: #fff; text-decoration: none; }
.vj-blog__crumbs a:hover { color: var(--vj-accent, #ffaa0d); }
.vj-blog__crumbs span[aria-current] {
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vj-blog__wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(36px, 5vw, 64px) 20px clamp(56px, 7vw, 96px);
}
.vj-blog__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: clamp(28px, 4vw, 44px);
}
.vj-blog__chip {
    display: inline-block;
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: var(--vj-primary, #066168);
    background: #fff;
    border: 1px solid rgba(6, 97, 104, 0.18);
    border-radius: 999px;
    padding: 9px 18px;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.vj-blog__chip:hover { background: rgba(6, 97, 104, 0.08); color: var(--vj-primary, #066168); }
.vj-blog__chip.is-active { background: var(--vj-primary, #066168); border-color: var(--vj-primary, #066168); color: #fff; }
.vj-blog__empty {
    text-align: center;
    color: #4a5f61;
    padding: 40px 0;
}

/* ---------- cards ---------- */
.vj-blog-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.5vw, 32px);
}
.vj-blog-card {
    background: #fff;
    border: 1px solid rgba(6, 97, 104, 0.10);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 22px rgba(6, 97, 104, 0.05);
    transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) {
    .vj-blog-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(6, 97, 104, 0.10); }
}
.vj-blog-card__media {
    position: relative;
    display: block;
    height: 210px;
    background: #dde7e7;
}
.vj-blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vj-blog-card__ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    background: linear-gradient(150deg, rgba(6, 97, 104, 0.12), rgba(6, 97, 104, 0.04));
    color: var(--vj-primary, #066168);
}
.vj-blog-card__ph i { font-size: 34px; opacity: .55; }
.vj-blog-card__ph em { font-size: 12px; font-style: normal; opacity: .6; }
.vj-blog-card__cat {
    position: absolute;
    left: 14px;
    bottom: 14px;
    background: var(--vj-accent, #ffaa0d);
    color: #3a2a00;
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
}
.vj-blog-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 22px 22px;
}
.vj-blog-card__meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: #4a5f61;
    margin: 0 0 10px;
}
.vj-blog-card__meta i { color: var(--vj-primary, #066168); margin-right: 4px; }
.vj-blog-card__title {
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 10px;
}
.vj-blog-card__title a { color: #102a2c; text-decoration: none; }
.vj-blog-card__title a:hover { color: var(--vj-primary, #066168); }
.vj-blog-card__excerpt {
    font-size: 14px;
    line-height: 1.65;
    color: #4a5f61;
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vj-blog-card__more {
    margin-top: auto;
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--vj-primary, #066168);
    text-decoration: none;
}
.vj-blog-card__more i { font-size: 12px; transition: transform .2s ease; }
.vj-blog-card__more:hover { color: #054d52; }
.vj-blog-card__more:hover i { transform: translateX(4px); }

/* ---------- pagination ---------- */
.vj-blog__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: clamp(32px, 4vw, 48px);
}
.vj-blog__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 8px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(6, 97, 104, 0.15);
    color: var(--vj-primary, #066168);
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}
.vj-blog__page:hover { background: rgba(6, 97, 104, 0.08); }
.vj-blog__page.is-current { background: var(--vj-primary, #066168); border-color: var(--vj-primary, #066168); color: #fff; }

/* ---------- article page ---------- */
.vj-blog-article__preview-banner {
    background: var(--vj-accent, #ffaa0d);
    color: #3a2a00;
    text-align: center;
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-weight: 600;
    font-size: 14px;
    padding: 10px 16px;
    position: relative;
    z-index: 5;
}
.vj-blog-article__meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 18px;
}
.vj-blog-article__meta i { color: var(--vj-accent, #ffaa0d); margin-right: 5px; }
.vj-blog-article__wrap { max-width: 860px; }
.vj-blog-article__cover {
    margin: 0 0 clamp(28px, 4vw, 40px);
    border-radius: 24px;
    overflow: hidden;
    background: #dde7e7;
    height: clamp(220px, 42vw, 460px);
}
.vj-blog-article__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vj-blog-article__toc {
    background: #fff;
    border: 1px solid rgba(6, 97, 104, 0.12);
    border-radius: 18px;
    padding: 22px 26px;
    margin-bottom: clamp(28px, 4vw, 40px);
}
.vj-blog-article__toc strong {
    display: block;
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-size: 17px;
    color: #102a2c;
    margin-bottom: 10px;
}
.vj-blog-article__toc ol {
    margin: 0;
    padding-left: 20px;
    columns: 2;
    column-gap: 32px;
}
.vj-blog-article__toc li { font-size: 14px; line-height: 1.9; break-inside: avoid; }
.vj-blog-article__toc a { color: var(--vj-primary, #066168); text-decoration: none; }
.vj-blog-article__toc a:hover { text-decoration: underline; }

.vj-blog-article__body {
    font-size: 16.5px;
    line-height: 1.8;
    color: #2e4345;
}
.vj-blog-article__body h2 {
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 700;
    color: #102a2c;
    line-height: 1.3;
    margin: clamp(30px, 4vw, 44px) 0 14px;
    scroll-margin-top: 120px;
}
.vj-blog-article__body h3 {
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-size: clamp(18px, 2vw, 21px);
    font-weight: 600;
    color: #133a3d;
    margin: 24px 0 10px;
}
.vj-blog-article__body p { margin: 0 0 16px; }
.vj-blog-article__body ul { margin: 0 0 18px; padding-left: 22px; }
.vj-blog-article__body li { margin-bottom: 8px; }
.vj-blog-article__body a { color: var(--vj-primary, #066168); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.vj-blog-article__body a:hover { color: #054d52; }
.vj-blog-article__body img { max-width: 100%; height: auto; border-radius: 16px; }

.vj-blog-article__share {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: clamp(28px, 4vw, 40px) 0 0;
    padding-top: 22px;
    border-top: 1px solid rgba(6, 97, 104, 0.12);
}
.vj-blog-article__share span {
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-weight: 600;
    font-size: 14px;
    color: #102a2c;
}
.vj-blog-article__share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(6, 97, 104, 0.08);
    color: var(--vj-primary, #066168);
    font-size: 16px;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.vj-blog-article__share a:hover { background: var(--vj-primary, #066168); color: #fff; }

.vj-blog-article__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    background: linear-gradient(140deg, var(--vj-primary, #066168), #0a7b83);
    color: #fff;
    border-radius: 20px;
    padding: clamp(22px, 3vw, 32px) clamp(22px, 3.5vw, 36px);
    margin: clamp(28px, 4vw, 40px) 0;
}
.vj-blog-article__cta strong {
    display: block;
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-size: clamp(18px, 2vw, 22px);
    margin-bottom: 6px;
    color: #fff;
}
.vj-blog-article__cta p { margin: 0; color: rgba(255, 255, 255, 0.85); font-size: 14.5px; }
.vj-blog-article__cta a {
    flex-shrink: 0;
    background: var(--vj-accent, #ffaa0d);
    color: #3a2a00;
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-weight: 700;
    font-size: 15px;
    border-radius: 999px;
    padding: 13px 24px;
    text-decoration: none;
}
.vj-blog-article__cta a:hover { filter: brightness(1.06); }

.vj-blog-article__back { margin: 0 0 clamp(36px, 5vw, 56px); }
.vj-blog-article__back a {
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-weight: 600;
    font-size: 15px;
    color: var(--vj-primary, #066168);
    text-decoration: none;
}
.vj-blog-article__back a:hover { color: #054d52; }

.vj-blog-related__heading {
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 700;
    color: #102a2c;
    margin: 0 0 20px;
}
.vj-blog-list--related { grid-template-columns: repeat(3, 1fr); }

/* ---------- homepage section ---------- */
.vj-blog-home {
    background: #fff;
    padding: clamp(56px, 8vw, 104px) 0;
}
.vj-blog-home__header {
    text-align: center;
    max-width: 660px;
    margin: 0 auto clamp(32px, 4.5vw, 56px);
}
.vj-blog-home__eyebrow {
    display: block;
    font-family: var(--font-script, cursive);
    font-size: clamp(22px, 2.6vw, 30px);
    color: var(--vj-accent, #ffaa0d);
    margin-bottom: 8px;
}
.vj-blog-home__heading {
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-weight: 700;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.2;
    color: #102a2c;
    margin: 0 0 12px;
}
.vj-blog-home__lead { font-size: clamp(15px, 1.3vw, 17px); line-height: 1.7; color: #4a5f61; margin: 0; }
.vj-blog-home__grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(20px, 2.5vw, 32px);
    align-items: stretch;
}
.vj-blog-home__side {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.5vw, 32px);
}
/* featured card: taller media */
.vj-blog-home__grid > .vj-blog-card .vj-blog-card__media { height: clamp(240px, 26vw, 340px); }
/* side cards: horizontal layout */
.vj-blog-home__side .vj-blog-card { flex-direction: row; flex: 1; }
.vj-blog-home__side .vj-blog-card__media {
    width: 38%;
    min-width: 160px;
    height: auto;
    flex-shrink: 0;
}
.vj-blog-home__side .vj-blog-card__body { padding: 18px 20px; }
.vj-blog-home__side .vj-blog-card__excerpt { -webkit-line-clamp: 2; }
.vj-blog-home__cta { text-align: center; margin-top: clamp(28px, 4vw, 44px); }
.vj-blog-home__cta a {
    display: inline-block;
    font-family: var(--font-display, "Google Sans", sans-serif);
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    background: var(--vj-primary, #066168);
    border-radius: 999px;
    padding: 14px 30px;
    text-decoration: none;
}
.vj-blog-home__cta a:hover { background: #054d52; color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
    .vj-blog-list { grid-template-columns: repeat(2, 1fr); }
    .vj-blog-list--related { grid-template-columns: repeat(2, 1fr); }
    .vj-blog-home__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .vj-blog-list, .vj-blog-list--related { grid-template-columns: 1fr; }
    .vj-blog-article__toc ol { columns: 1; }
    .vj-blog-home__side .vj-blog-card { flex-direction: column; }
    .vj-blog-home__side .vj-blog-card__media { width: 100%; height: 200px; }
    .vj-blog__crumbs span[aria-current] { max-width: 200px; }
}

/* ============================================================
   VOYAGE CARDS — scroll-triggered, row-alternating entrance reveal
   Driven by assets/voyaji/js/vj-card-reveal.js. The hidden state is
   OPT-IN: it only applies once JS tags the grid .vj-cr-pending, so
   no-JS / observer failure / reduced motion => cards stay visible.
   Per-card CSS vars (set by JS): --vj-cr-x / --vj-cr-x-m give the
   start offset AND direction (signed px: + = from the right, - = from
   the left); --vj-cr-delay / --vj-cr-delay-m give the stagger.
   Whole card animates as one unit — inner elements are untouched.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* while armed, keep the off-screen translate inside the grid box so a
     card sliding in from ±110px never pushes the page into horizontal
     scroll. overflow-clip-margin preserves the card's soft shadow. */
  .vj-cr-pending {
    overflow-x: clip;
    overflow-clip-margin: 30px;
  }

  .vj-cr-pending > .vj-wk-card {
    opacity: 0;
    transform: translate3d(var(--vj-cr-x, 110px), 0, 0);
    will-change: opacity, transform;
  }

  .vj-cr-pending.vj-cr-in > .vj-wk-card {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
      opacity   .82s cubic-bezier(.22, 1, .36, 1),
      transform .82s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--vj-cr-delay, 0ms);
  }

  /* mobile: gentler offset + shorter stagger, less overall motion */
  @media (max-width: 767px) {
    .vj-cr-pending > .vj-wk-card {
      transform: translate3d(var(--vj-cr-x-m, 34px), 0, 0);
    }
    .vj-cr-pending.vj-cr-in > .vj-wk-card {
      transform: translate3d(0, 0, 0);
      transition:
        opacity   .62s cubic-bezier(.22, 1, .36, 1),
        transform .62s cubic-bezier(.22, 1, .36, 1);
      transition-delay: var(--vj-cr-delay-m, 0ms);
    }
  }
}

/* ================================================================
   PUBLIC HOMEPAGE — INTERACTIVE REAL-CATEGORY ESCAPE SELECTOR
   Replaces the former three-step reservation/process section only.
   ================================================================ */
.vj-escape {
    --vj-escape-teal: #08777a;
    --vj-escape-deep: #073f41;
    --vj-escape-orange: #f3ad35;
    --vj-escape-parallax: 0px;
    position: relative;
    overflow: clip;
    padding: clamp(72px, 8vw, 122px) 0;
    background:
        radial-gradient(circle at 8% 18%, rgba(243, 173, 53, .12), transparent 22%),
        radial-gradient(circle at 92% 88%, rgba(8, 119, 122, .11), transparent 25%),
        #f8fbfa;
}

.vj-escape__header {
    width: min(850px, 100%);
    margin: 0 auto clamp(38px, 5vw, 64px);
    text-align: center;
}

.vj-escape__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 9px 15px;
    border: 1px solid rgba(8, 119, 122, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    color: var(--vj-escape-teal);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(10, 72, 73, .07);
}

.vj-escape__eyebrow i { color: var(--vj-escape-orange); }

.vj-escape__heading {
    margin: 0;
    color: #092f30;
    font-family: "Inter", sans-serif;
    font-size: clamp(40px, 5vw, 70px);
    font-weight: 800;
    letter-spacing: -.052em;
    line-height: 1.02;
}

.vj-escape__heading span { color: var(--vj-escape-teal); }

.vj-escape__lead {
    max-width: 680px;
    margin: 20px auto 0;
    color: #617777;
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.7;
}

.vj-escape__panels {
    display: flex;
    gap: 13px;
    width: 100%;
    height: clamp(430px, 40vw, 510px);
    padding: 8px 2px 20px;
}

.vj-escape__panel {
    position: relative;
    flex: .75 1 0;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .48);
    border-radius: clamp(22px, 2.5vw, 32px);
    background: #133f40;
    box-shadow: 0 16px 38px rgba(8, 49, 50, .12);
    isolation: isolate;
    transition:
        flex-grow .72s cubic-bezier(.22, 1, .36, 1),
        box-shadow .55s cubic-bezier(.22, 1, .36, 1),
        transform .55s cubic-bezier(.22, 1, .36, 1);
}

.vj-escape__panel.is-active {
    flex-grow: 4.25;
    box-shadow: 0 28px 65px rgba(8, 49, 50, .24);
}

.vj-escape__image,
.vj-escape__veil {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.vj-escape__image {
    z-index: -3;
    object-fit: cover;
    object-position: var(--vj-escape-position, center);
    filter: saturate(.78) brightness(.72);
    height: calc(100% + 42px);
    top: -21px;
    transform: translate3d(0, var(--vj-escape-parallax), 0) scale(1.07);
    transition: transform 1.05s cubic-bezier(.22, 1, .36, 1), filter .65s ease;
}

.vj-escape__panel.is-active .vj-escape__image {
    filter: saturate(1.02) brightness(.9);
    transform: translate3d(0, var(--vj-escape-parallax), 0) scale(1.045);
}

.vj-escape--settled .vj-escape__panel.is-active .vj-escape__image {
    transform: translate3d(0, var(--vj-escape-parallax), 0) scale(1);
}

.vj-escape--parallax-active .vj-escape__image {
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    .vj-escape__panel:not(.is-active):hover .vj-escape__image {
        filter: saturate(.92) brightness(.82);
    }

    .vj-escape--settled .vj-escape__panel.is-active:hover .vj-escape__image {
        filter: saturate(1.06) brightness(.94);
        transform: translate3d(0, var(--vj-escape-parallax), 0) scale(1.018);
    }

    .vj-escape__panel:not(.is-active):hover .vj-escape__compact-icon {
        transform: translateY(-5px);
        background: rgba(4, 47, 49, .62);
        border-color: rgba(255, 255, 255, .56);
    }
}

.vj-escape__veil {
    z-index: -2;
    background:
        linear-gradient(180deg, rgba(4, 29, 30, .12) 25%, rgba(4, 29, 30, .9) 100%),
        linear-gradient(90deg, rgba(5, 43, 44, .24), transparent 62%);
    transition: background .5s ease;
}

.vj-escape__panel.is-active .vj-escape__veil {
    background:
        linear-gradient(180deg, rgba(4, 29, 30, .02) 28%, rgba(4, 29, 30, .88) 100%),
        linear-gradient(90deg, rgba(5, 43, 44, .2), transparent 70%);
}

.vj-escape__trigger {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: pointer;
}

.vj-escape__trigger:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -7px;
    box-shadow: inset 0 0 0 6px rgba(243, 173, 53, .92);
}

.vj-escape__compact {
    position: absolute;
    left: 50%;
    bottom: 26px;
    z-index: 6;
    display: grid;
    justify-items: center;
    gap: 11px;
    width: calc(100% - 18px);
    color: #fff;
    text-align: center;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity .25s ease, transform .4s ease;
}

.vj-escape__compact-icon,
.vj-escape__icon {
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .33);
    border-radius: 50%;
    background: rgba(4, 47, 49, .48);
    color: #fff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.vj-escape__compact-icon {
    width: 46px;
    height: 46px;
    font-size: 17px;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), background-color .35s ease, border-color .35s ease;
}

.vj-escape__compact strong {
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(13px, 1.25vw, 17px);
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vj-escape__panel.is-active .vj-escape__compact {
    opacity: 0;
    transform: translate(-50%, 14px);
}

.vj-escape__content {
    position: absolute;
    right: clamp(24px, 3vw, 44px);
    bottom: clamp(26px, 3vw, 42px);
    left: clamp(24px, 3vw, 44px);
    z-index: 6;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: 18px;
    color: #fff;
    opacity: 1;
    pointer-events: none;
    transform: none;
}

.vj-escape__panel.is-active .vj-escape__content {
    pointer-events: none;
}

.vj-escape__icon {
    width: 58px;
    height: 58px;
    margin-bottom: 4px;
    font-size: 21px;
}

.vj-escape__copy { min-width: 0; }

.vj-escape__icon,
.vj-escape__number,
.vj-escape__copy h3,
.vj-escape__copy p,
.vj-escape__cta {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity .28s ease,
        transform .34s cubic-bezier(.22, 1, .36, 1);
}

.vj-escape__panel.is-active .vj-escape__icon,
.vj-escape__panel.is-active .vj-escape__number,
.vj-escape__panel.is-active .vj-escape__copy h3,
.vj-escape__panel.is-active .vj-escape__copy p,
.vj-escape__panel.is-active .vj-escape__cta {
    opacity: 1;
    transform: translateY(0);
}

.vj-escape__panel.is-active .vj-escape__icon {
    transition-delay: .16s;
}
.vj-escape__panel.is-active .vj-escape__number {
    transition-delay: .20s;
}
.vj-escape__panel.is-active .vj-escape__copy h3 {
    transition-delay: .24s;
}
.vj-escape__panel.is-active .vj-escape__copy p {
    transition-delay: .29s;
}
.vj-escape__panel.is-active .vj-escape__cta {
    transition-delay: .34s;
}

.vj-escape__number {
    display: block;
    margin-bottom: 5px;
    color: #ffc45c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;
}

.vj-escape__copy h3 {
    margin: 0;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: clamp(30px, 3vw, 48px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
}

.vj-escape__copy p {
    max-width: 470px;
    margin: 12px 0 18px;
    color: rgba(255, 255, 255, .84);
    font-size: 14px;
    line-height: 1.55;
}

.vj-escape__cta {
    position: relative;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: var(--vj-escape-deep) !important;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none !important;
    pointer-events: auto;
    box-shadow: 0 12px 28px rgba(3, 30, 31, .23);
    transition: transform .25s ease, background-color .25s ease;
}

.vj-escape__panel:not(.is-active) .vj-escape__cta {
    pointer-events: none;
}

.vj-escape__panel.is-active .vj-escape__cta {
    pointer-events: auto;
}

.vj-escape__cta:hover {
    transform: translateY(-3px);
    background: #fff;
}

.vj-escape__cta:focus-visible {
    outline: 3px solid var(--vj-escape-orange);
    outline-offset: 4px;
}

.vj-escape__empty {
    display: grid;
    width: 100%;
    place-items: center;
    margin: 0;
    border: 1px dashed rgba(8, 119, 122, .25);
    border-radius: 28px;
    background: #fff;
    color: #607575;
}

.vj-escape--pending .vj-escape__header {
    opacity: 1;
    transform: none;
}

.vj-escape--pending .vj-escape__panel {
    opacity: 0;
    transform: translate3d(var(--vj-escape-enter-x, 22px), 30px, 0);
}

.vj-escape--pending.vj-escape--visible .vj-escape__panel {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.vj-escape--pending .vj-escape__eyebrow,
.vj-escape--pending .vj-escape__heading,
.vj-escape--pending .vj-escape__lead {
    opacity: 0;
    transform: translateY(22px);
}

.vj-escape--pending.vj-escape--visible .vj-escape__eyebrow,
.vj-escape--pending.vj-escape--visible .vj-escape__heading,
.vj-escape--pending.vj-escape--visible .vj-escape__lead {
    opacity: 1;
    transform: translateY(0);
}

.vj-escape--pending .vj-escape__eyebrow {
    transition: opacity .62s ease, transform .72s cubic-bezier(.22, 1, .36, 1);
}

.vj-escape--pending .vj-escape__heading {
    transition: opacity .68s ease .1s, transform .78s cubic-bezier(.22, 1, .36, 1) .1s;
}

.vj-escape--pending .vj-escape__lead {
    transition: opacity .68s ease .2s, transform .78s cubic-bezier(.22, 1, .36, 1) .2s;
}

.vj-escape--pending .vj-escape__panel {
    transition:
        opacity .7s ease calc(320ms + var(--vj-escape-index) * 130ms),
        transform .82s cubic-bezier(.22, 1, .36, 1) calc(320ms + var(--vj-escape-index) * 130ms),
        flex-grow .72s cubic-bezier(.22, 1, .36, 1),
        box-shadow .55s cubic-bezier(.22, 1, .36, 1);
}

@media (max-width: 991px) {
    .vj-escape__panels {
        gap: 10px;
        height: 440px;
    }

    .vj-escape__panel { flex-grow: .65; }
    .vj-escape__panel.is-active { flex-grow: 3.5; }

    .vj-escape__content {
        right: 22px;
        bottom: 26px;
        left: 22px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .vj-escape__icon {
        width: 48px;
        height: 48px;
        margin: 0;
        font-size: 18px;
    }

    .vj-escape__copy h3 { font-size: 32px; }
    .vj-escape__copy p { margin: 9px 0 15px; }
}

@media (max-width: 767px) {
    .vj-escape {
        --vj-escape-parallax: 0px !important;
        padding: 62px 0;
    }

    .vj-escape__header { margin-bottom: 30px; }
    .vj-escape__heading { font-size: clamp(38px, 11vw, 50px); }
    .vj-escape__lead { font-size: 15px; }

    .vj-escape__panels {
        display: flex;
        flex-direction: column;
        gap: 10px;
        height: auto;
        padding-bottom: 8px;
    }

    .vj-escape__panel,
    .vj-escape__panel.is-active {
        flex: none;
        width: 100%;
        border-radius: 23px;
        transition:
            height .65s cubic-bezier(.22, 1, .36, 1),
            box-shadow .4s ease,
            opacity .56s ease calc(220ms + var(--vj-escape-index) * 100ms),
            transform .62s cubic-bezier(.22, 1, .36, 1) calc(220ms + var(--vj-escape-index) * 100ms);
    }

    .vj-escape--pending .vj-escape__panel {
        transform: translate3d(0, 20px, 0);
    }

    .vj-escape__image,
    .vj-escape__panel.is-active .vj-escape__image,
    .vj-escape--settled .vj-escape__panel.is-active .vj-escape__image {
        top: 0;
        height: 100%;
        transform: scale(1.02);
    }

    .vj-escape__panel { height: 82px; }
    .vj-escape__panel.is-active { height: 310px; }

    .vj-escape__compact {
        right: 18px;
        bottom: 50%;
        left: 18px;
        display: flex;
        width: auto;
        gap: 12px;
        text-align: left;
        transform: translateY(50%);
    }

    .vj-escape__compact-icon {
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
    }

    .vj-escape__compact strong { font-size: 16px; }

    .vj-escape__panel.is-active .vj-escape__compact {
        transform: translateY(calc(50% + 10px));
    }

    .vj-escape__content {
        right: 20px;
        bottom: 20px;
        left: 20px;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: end;
        gap: 13px;
    }

    .vj-escape__icon {
        width: 46px;
        height: 46px;
    }

    .vj-escape__copy h3 { font-size: 30px; }
    .vj-escape__copy p {
        display: -webkit-box;
        margin: 8px 0 13px;
        overflow: hidden;
        font-size: 12px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .vj-escape__cta {
        min-height: 42px;
        padding: 0 14px;
        font-size: 11px;
    }

    .vj-escape__panel.is-active .vj-escape__icon,
    .vj-escape__panel.is-active .vj-escape__number,
    .vj-escape__panel.is-active .vj-escape__copy h3,
    .vj-escape__panel.is-active .vj-escape__copy p,
    .vj-escape__panel.is-active .vj-escape__cta {
        transition-delay: .1s;
    }
}

@media (max-width: 420px) {
    .vj-escape__content {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .vj-escape__icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .vj-escape__panel.is-active { height: 330px; }
}

@media (prefers-reduced-motion: reduce) {
    .vj-escape {
        --vj-escape-parallax: 0px !important;
    }

    .vj-escape *,
    .vj-escape *::before,
    .vj-escape *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }

    .vj-escape--pending .vj-escape__eyebrow,
    .vj-escape--pending .vj-escape__heading,
    .vj-escape--pending .vj-escape__lead,
    .vj-escape--pending .vj-escape__panel {
        opacity: 1 !important;
        transform: none !important;
    }

    .vj-escape__image,
    .vj-escape__panel.is-active .vj-escape__image,
    .vj-escape--settled .vj-escape__panel.is-active .vj-escape__image,
    .vj-escape--settled .vj-escape__panel.is-active:hover .vj-escape__image {
        transform: scale(1) !important;
        will-change: auto !important;
    }
}

/* ============================================================
   PERF — pointerless devices (phones / tablets)
   The decorative follower cursor (.cursor / .cursor2) can never be seen
   without a real pointer, but it was still rendered as two position:fixed
   layers and driven by a permanent 60fps JS loop. custom.js now skips the
   loop entirely on (pointer: coarse); this removes the two dead layers so
   the compositor stops carrying them too. Desktop is untouched.
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  .cursor,
  .cursor2 { display: none !important; }
}

/* ============================================================
   PERF — offscreen decorative loops
   .vj-about__shape runs `vjAboutFloat ... infinite`. An infinite transform
   animation keeps being ticked by the browser even when its section is far
   outside the viewport, which on the homepage measured ~4 percentage points
   of permanent main-thread time (all of the remaining idle style recalc).
   custom.js adds .vj-anim-off while the section is out of view. The default
   is "running", so if the script never runs, behaviour is exactly as before.
   ============================================================ */
.vj-anim-off .vj-about__shape,
.vj-about__shape.vj-anim-off { animation-play-state: paused !important; }