/* ============================
   1) BASE / RESET / UTILITIES
   ============================ */
* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #8a8a8a #f1f1f1;
}

html, body {
  height: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: inherit;         /* clean */
  background: #ffffff;    /* PURE WHITE */
}

/* ============================
   MEMBERSHIP + QUOTE OVERLAY
   ============================ */
.hero-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.hero-modal-overlay.is-visible {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.hero-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
}

/* blur background, no scale to avoid “jumping” */
body.hero-modal-open .page-wrap {
  filter: blur(2px);
  transition: filter 180ms ease;
}

/* JS sets position; we control size only */
.hero-modal {
  position: absolute;
  max-width: 360px;
  width: min(360px, 90vw);
}

.hero-modal__card {
  width: 100%;
  padding: 18px 22px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  position: relative;

  max-height: none;
  overflow-y: visible;

  /* ✨ animation base state */
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition:
    opacity 220ms ease-out,
    transform 220ms ease-out;
}

/* ✨ visible state (pop in / settle) */
.hero-modal__card--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* close button */
.hero-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: transparent;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  color: #0b3a5c;
  z-index: 999999;
}

/* views */
.hero-modal__view {
  display: none;
}

.hero-modal__view.is-active {
  display: block;
}
.hero-modal__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: #F4A91C;   /* dark blue so it shows on white card */
}
/* Membership titles: bigger, with accent underline */
.hero-modal__view--membership .hero-modal__title {
  position: relative;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin: 0 0 10px;
  color: #102133;          /* deep navy / near-black */
  text-align: center;
}
.hero-modal__view--membership {
  text-align: center;
}

/* Gradient underline under "Silver membership", etc. */
.hero-modal__view--membership .hero-modal__title::after {
  content: "";
  position: absolute;
  left: 15%;
  bottom: -3px;
  width: 150px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #189DD8, #F4A91C);
}

/* subtitle / tagline */
.hero-modal__subtitle,
.hero-membership-tagline {
  font-size: 0.9rem;
  margin-bottom: 16px;
  color: #244a63;
}

/* titles align */
.hero-modal__title--center {
  text-align: center;
}

.hero-modal__subtitle--center {
  text-align: center;
}

/* Lock page scroll when hero modal is open */
body.hero-modal-open {
  overflow: hidden;
}

/* Optional: if your main content scrolls inside .page-wrap */
body.hero-modal-open .page-wrap {
  overflow: hidden;
}

/* ============================
   FLOATING UNDERLINE FIELDS
   ============================ */
.hero-quote-form {
  margin-top: 12px;      /* was 18px */
  text-align: center;
}

/* each field */
.hero-floating-underline {
  position: relative;
  text-align: left;
  margin-bottom: 14px;   /* was 20px */
}

.hero-floating-underline input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #d0dde8;
  padding: 10px 0 5px;   /* was 12px 0 7px */
  font-size: 0.9rem;     /* slightly smaller */
  background: transparent;
  color: #122231;
}

.hero-floating-underline input:focus,
.hero-floating-underline input:focus-visible {
  outline: none;
}

.hero-floating-underline input::placeholder {
  color: transparent; /* needed for :placeholder-shown trick */
}

.hero-modal__submit:focus,
.hero-modal__submit:focus-visible,
.hero-arrow-btn:focus,
.hero-arrow-btn:focus-visible {
  outline: none;
}

.hero-floating-underline label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;     /* was 0.85rem */
  color: #4b6b86;
  pointer-events: none;
  transition:
    top 140ms ease,
    font-size 140ms ease,
    color 140ms ease;
}

.hero-floating-underline .hero-underline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #009fe3;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 150ms ease-out;
}

/* float label when typing or when field has content */
.hero-floating-underline input:focus + label,
.hero-floating-underline input:not(:placeholder-shown) + label {
  top: -3px;
  transform: translateY(0);
  font-size: 0.7rem;
  color: #009fe3;
}

/* also change underline + border when active/filled */
.hero-floating-underline input:focus ~ .hero-underline,
.hero-floating-underline input:not(:placeholder-shown) ~ .hero-underline {
  transform: scaleX(1);
}

.hero-floating-underline input:focus,
.hero-floating-underline input:not(:placeholder-shown) {
  border-bottom-color: transparent;
}

.hero-modal__submit {
  display: block;
  width: 65%;            /* a bit slimmer */
  margin: 12px auto 0;   /* was 18px auto 0 */
  justify-content: center;
}
/* ============================
   CHECKBOXES
   ============================ */
.hero-checkbox-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;         /* tighter */
  margin-bottom: 10px;   /* was 18px */
}

.hero-section-label {
  font-size: 0.8rem;
  margin: 10px 0 6px;    /* was 18px 0 8px */
  color: #4b6b86;
  text-align: center;
}

.hero-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 7px;              /* was 10px */
  font-size: 0.8rem;     /* a touch smaller */
  color: #244a63;
  cursor: pointer;
  padding: 2px 0;        /* was 4px 0 */
}

.hero-checkbox--single {
  margin: 10px 0 8px;    /* was 14px 0 12px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* hide native box, but leave it focusable/clickable via label */
.hero-checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.hero-checkbox-box {
  width: 18px;          /* bigger tick box */
  height: 18px;
  border-radius: 4px;
  border: 1px solid #009fe3;
  background: #ffffff;
  display: inline-block;
  position: relative;
}

.hero-checkbox-box::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 3px;
  background: transparent;
  transform: scale(0);
  transition: transform 140ms ease-out, background 140ms ease-out;
}

.hero-checkbox input:checked + .hero-checkbox-box::after {
  background: #009fe3;
  transform: scale(1);
}

.hero-checkbox-label {
  line-height: 1.4;
}

.hero-legal {
  font-size: 0.72rem;
  color: #7d8ea3;
  line-height: 1.4;
  margin: 6px 0 12px;    /* was 10px 0 18px */
  text-align: center;
}

.hero-legal-link {
  color: #e28c1d;
  text-decoration: underline;
}


/* ============================
   MEMBERSHIP VIEW – PREMIUM CLEAN
   ============================ */
.hero-membership-block {
  margin-top: 12px;
  padding: 18px 20px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;

  /* defaults */
  --tier-emblem: none;
  --emblem-pos-x: right -35px;
  --emblem-pos-y: bottom -25px;
  --emblem-size: 110px;
  --emblem-opacity: 0.5;
}

/* big faded emblem in the corner */
.hero-membership-block::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image: var(--tier-emblem);
  background-repeat: no-repeat;
  background-position: var(--emblem-pos-x) var(--emblem-pos-y);
  background-size: var(--emblem-size);

  opacity: var(--emblem-opacity);
  pointer-events: none;
}

.hero-membership-block > * {
  position: relative;
  z-index: 5;
}

.hero-membership-item {
  margin-bottom: 14px;
}

.hero-membership-heading {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: #768195;
}

.hero-membership-value {
  margin-top: 6px;
  font-size: 1.05rem;
  font-weight: 500;
  color: #102133;
}

/* PRICE — premium corporate styling */
.hero-membership-price {
  margin-top: 6px;
  font-size: 1.5rem;
  font-weight: 900;
  color: #0b3a5c; /* deep trusted blue */
  letter-spacing: -0.5px;
  display: block;
}

/* DISCOUNT — secondary but still strong */
.hero-membership-discount {
  margin-top: 6px;
  font-size: 2.5rem;
  font-weight: 800;
  color: #0b3a5c; /* deep trusted blue */
  letter-spacing: -0.3px;
  display: block;
}

.hero-membership-item + .hero-membership-item {
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

/* CTA */
.hero-membership-cta {
  margin: 18px auto 0;
  display: block;
  width: 70%;
  max-width: 260px;
  text-align: center;
}

.hero-membership-header {
  display: flex;
  align-items: center;
  justify-content: center;       /* ⭐ CENTER the whole row */
  gap: 10px;
  margin-bottom: 14px;
  text-align: center;            /* helps title visually */
}

/* Remove extra bottom margin from title, we control it via header */
.hero-modal__view--membership .hero-modal__title {
  margin: 0;
}

/* Icon wrapper */
.hero-membership-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Icon images */
.hero-membership-icon img {
  max-width: 50px;
  max-height: 50px;
  display: block;
}

/* ============================
   AUTH MODAL (GLASS + GLOW)
   ============================ */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 16000;
  display: none;                 /* hidden by default */
  align-items: center;
  justify-content: center;
}

.auth-overlay.is-visible {
  display: flex;                 /* JS toggles this */
}

.auth-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left,
              rgba(15,23,42,0.65),
              rgba(15,23,42,0.85));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* MAIN CARD — glassy, glowy */
.auth-modal {
  position: relative;
  z-index: 16010;
  width: 95%;
  max-width: 560px;
  padding: 38px 40px 32px;
  border-radius: 26px;

  /* glass effect */
  background: radial-gradient(circle at top left,
                rgba(255,255,255,0.98),
                rgba(255,255,255,0.92));
  border: 1.5px solid rgba(255,255,255,0.9);
  box-shadow:
    0 26px 68px rgba(0,0,0,0.55),
    0 0 0 1px rgba(148,163,184,0.35),
    0 0 14px rgba(255,255,255,0.55);  /* subtle white glow */

  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  opacity: 0;
  transform: translateY(28px) scale(0.94);
  transition:
    opacity   480ms cubic-bezier(.16,1,.3,1),
    transform 480ms cubic-bezier(.16,1,.3,1),
    box-shadow 260ms cubic-bezier(.2,.9,.2,1),
    border-color 260ms ease;
}

/* glossy highlight layer on top */
.auth-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at top left,
      rgba(255,255,255,0.45),
      transparent 55%);
  opacity: 0.7;
  pointer-events: none;
}

/* When active → fade + lift in */
.auth-modal.auth-modal--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* hover = slightly stronger glow */
.auth-modal.auth-modal--visible:hover {
  box-shadow:
    0 30px 80px rgba(0,0,0,0.65),
    0 0 0 1px rgba(148,163,184,0.4),
    0 0 18px rgba(255,255,255,0.7);
}

/* CLOSE BUTTON (top-right) */
.auth-close {
  position: absolute;
  top: 14px;
  right: 18px;
  border: none;
  background: rgba(248,250,252,0.95);
  font-size: 22px;
  cursor: pointer;
  color: #374151;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(148,163,184,0.45);
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.auth-close:hover {
  background: #F4A91C;
  color: #ffffff;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 10px #fff;
}

/* INNER CONTENT – centered, wider */
.auth-modal-inner {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* TITLE + SUBTITLE */
.auth-title {
  margin: 6px 0 8px 0;
  font-size: 32px;
  font-weight: 800;
  color: #0f172a;
}

.auth-subtitle {
  margin: 0 0 24px 0;
  font-size: 16px;
  color: #6b7280;
}

/* ERROR BOX */
.auth-error {
  width: 100%;
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 14px;
  background: rgba(248,113,113,0.08);
  color: #b91c1c;
  border: 1px solid #fecaca;
  text-align: left;
}

.auth-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* ============================================
   FLOATING LABELS – clean, premium, animated
   ============================================ */
.auth-field {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

/* Wrapper for floating label */
.auth-field.floating {
  position: relative;
  width: 100%;
}

/* INPUT */
.auth-field.floating input {
  width: 100%;
  font-size: 16px;
  padding: 18px 16px 12px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.90);
  transition:
    border-color .2s ease,
    background .25s ease,
    box-shadow .25s ease,
    transform .15s ease;
  
  /* 🔹 kill the ugly blue browser outline */
  outline: none;
}

/* just in case some browsers use focus-visible outline */
.auth-field.floating input:focus-visible {
  outline: none;
}

/* LABEL: starts centered inside input */
.auth-field.floating label {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font-size: 15px;
  color: rgba(55,65,81,0.70);
  pointer-events: none;
  background: transparent;
  padding: 0 4px;
  transition:
    top .18s cubic-bezier(.2,.9,.2,1),
    transform .18s cubic-bezier(.2,.9,.2,1),
    font-size .18s cubic-bezier(.2,.9,.2,1),
    color .18s ease,
    background .18s ease;
}

/* FLOAT UP on focus or when input has content */
.auth-field.floating input:focus + label,
.auth-field.floating input:not(:placeholder-shown) + label,
.auth-field.floating input:-webkit-autofill + label {
  top: -8px;
  transform: translateY(0);
  font-size: 15px;
  color: #F4A91C;
  background: rgba(255,255,255,0.98);  /* 🔹 sits over the border */
  border-radius: 999px;
}

/* focus styling (no blue, just your glow) */
.auth-field.floating input:focus {
  background: rgba(255,255,255,0.95);
  border-color: rgba(255,255,255,0.95);
  box-shadow:
     0 0 0 1px rgba(244,169,28,0.35),
     0 0 8px rgba(255,255,255,0.75);
  transform: translateY(-2px);
}

/* placeholder trick so :placeholder-shown works */
.auth-field.floating input::placeholder {
  color: transparent;
}

/* Keep autofill looking consistent (Chrome) */
.auth-field.floating input:-webkit-autofill {
  box-shadow: 0 0 0 30px rgba(255,255,255,0.95) inset !important;
  -webkit-text-fill-color: #111827 !important;
}

/* BUTTON – bigger, centered, glowing */
.auth-btn-primary {
  margin-top: 6px;
  padding: 14px 32px;
  border-radius: 999px;
  border: 1px solid #F4A91C;
  background: linear-gradient(90deg, #F4A91C, #f59e0b);
  color: #ffffff;
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  box-shadow:
    0 0 12px rgba(255,255,255,0.75);
  transition:
    transform 0.16s cubic-bezier(.2,.9,.2,1),
    box-shadow 0.16s cubic-bezier(.2,.9,.2,1),
    border-color 0.16s ease;
}

.auth-btn-primary:hover {
  transform: translateY(-2px) scale(1.06);
  border-color: #F4A91C;
}

.auth-btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow:
    0 8px 20px rgba(0,0,0,0.4),
    0 0 8px rgba(255,255,255,0.7);
}

/* HINT TEXT */
.auth-hint {
  margin: 14px 0 0 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
  max-width: 360px;
  text-align: center;
}

/* NO PAGE SCROLL WHEN MODAL OPEN */
body.auth-open {
  overflow: hidden;
}

/* ============================
   TOAST / MESSAGE STYLES – BRIGHT, PREMIUM, ON-BRAND
   ============================ */
#messages {
  position: fixed;
  top: 11%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 17000;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  width: min(92vw, 520px);
}

/* Base toast */
.msg {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  min-width: 260px;
  max-width: 520px;

  padding: 12px 22px 12px 52px;   /* extra left space for icon */
  border-radius: 999px;

  /* light glass base – for neutral messages (overridden by variants) */
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.98),
    rgba(248,250,252,0.96)
  );
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(148,163,184,0.35);

  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.2px;

  /* soft premium shadow */
  box-shadow: 0 16px 40px rgba(15,23,42,0.35);

  text-shadow: none;

  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition:
    opacity   220ms cubic-bezier(.22,.9,.24,1.02),
    transform 220ms cubic-bezier(.22,.9,.24,1.02),
    box-shadow 180ms ease;
  cursor: pointer;
}

/* hover – tiny lift */
.msg:hover {
  box-shadow: 0 20px 46px rgba(15,23,42,0.45);
  transform: translateY(-1px) scale(1.01);
}

/* Icon bubble (left side) */
.msg::before {
  content: "ℹ";                    /* default icon (info) */
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);

  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 13px;
  font-weight: 700;

  background: rgba(191,219,254,0.9);
  color: #1d4ed8;
}

/* appear */
.msg.msg--show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* disappear */
.msg.msg--hide {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
}

/* ============================
   VARIANTS – COLOR GLASS
   ============================ */

/* SUCCESS – pure strong green */
.msg[data-tags*="success"] {
  background: rgba(22,163,74,0.96); /* solid */
  border-color: rgba(187,247,208,0.95);
  box-shadow:
    0 12px 32px rgba(22,163,74,0.45),
    0 0 8px rgba(22,163,74,0.55);
  color: #ecfdf5;
}

.msg[data-tags*="success"]::before {
  content: "✓";
  background: rgba(187,247,208,0.96);
  color: #166534;
}

/* ERROR – solid danger red */
.msg[data-tags*="error"],
.msg[data-tags*="danger"] {
  background: rgba(220,38,38,0.96); /* solid */
  border-color: rgba(254,202,202,0.95);
  box-shadow:
    0 12px 32px rgba(220,38,38,0.48),
    0 0 8px rgba(248,113,113,0.65);
  color: #fef2f2;
}

.msg[data-tags*="error"]::before,
.msg[data-tags*="danger"]::before {
  content: "!";
  background: rgba(254,202,202,0.96);
  color: #b91c1c;
}

/* WARNING – balanced warm yellow */
.msg[data-tags*="warning"] {
  background: rgba(255, 215, 72, 0.96); /* rich warm yellow */
  border-color: rgba(255, 231, 140, 0.96);
  box-shadow:
    0 12px 32px rgba(255, 215, 72, 0.32),
    0 0 8px rgba(255, 231, 140, 0.6);
  color: #3d2f00; /* deep warm brown for contrast */
}

.msg[data-tags*="warning"]::before {
  content: "!";
  background: rgba(255, 231, 140, 0.96); /* softer badge */
  color: #3d2f00;
}

/* INFO – solid strong Sun & Sea blue */
.msg[data-tags*="info"] {
  background: rgba(37,99,235,0.96); /* solid */
  border-color: rgba(191,219,254,0.96);
  box-shadow:
    0 12px 32px rgba(37,99,235,0.48),
    0 0 8px rgba(96,165,250,0.65);
  color: #eff6ff;
}

.msg[data-tags*="info"]::before {
  content: "i";
  background: rgba(191,219,254,0.96);
  color: #1d4ed8;
}

/* ============================
   2) KEYFRAME ANIMATIONS
   ============================ */
@keyframes panelClipLinear {
  0%   { clip-path: circle(0% at 0 0); -webkit-clip-path: circle(0% at 0 0); }
  25%  { clip-path: circle(45% at 0 0); -webkit-clip-path: circle(45% at 0 0); }
  50%  { clip-path: circle(85% at 0 0); -webkit-clip-path: circle(85% at 0 0); }
  75%  { clip-path: circle(125% at 0 0); -webkit-clip-path: circle(125% at 0 0); }
  100% { clip-path: circle(180% at 0 0); -webkit-clip-path: circle(180% at 0 0); }
}

@keyframes panelFadeIn {
  0%   { opacity: 0; }
  60%  { opacity: 0.88; }
  100% { opacity: 1; }
}

@keyframes panelClipLinearOut {
  0%   { clip-path: circle(180% at 0 0); -webkit-clip-path: circle(180% at 0 0); }
  25%  { clip-path: circle(125% at 0 0); -webkit-clip-path: circle(125% at 0 0); }
  50%  { clip-path: circle(85% at 0 0); -webkit-clip-path: circle(85% at 0 0); }
  75%  { clip-path: circle(45% at 0 0); -webkit-clip-path: circle(45% at 0 0); }
  100% { clip-path: circle(0% at 0 0); -webkit-clip-path: circle(0% at 0 0); }
}

@keyframes panelFadeOut {
  0%   { opacity: 1; }
  50%  { opacity: 0.95; }
  75%  { opacity: 0.85; }
  90%  { opacity: 0.6; }
  100% { opacity: 0; }
}

@keyframes fadeDeblur {
  0%   { opacity: 0; filter: blur(8px); }
  100% { opacity: 1; filter: blur(0); }
}

@keyframes fadeBlurOut {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0,0,0) scale(1) rotate(0deg);
  }
  40% {
    opacity: 0.82;
    filter: blur(2px);
    transform: translate3d(0,-8px,0) scale(0.997) rotate(-1deg);
  }
  100% {
    opacity: 0;
    filter: blur(12px);
    transform: translate3d(0,140px,0) scale(0.94) rotate(-8deg);
  }
}

@keyframes tileFadeOutFast {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  20% {
    opacity: 0.8;
    filter: blur(2px);
    transform: translate3d(0, -15px, 0) scale(1.02) rotate(-1deg);
  }
  40% {
    opacity: 0.6;
    filter: blur(4px);
    transform: translate3d(0, 5px, 0) scale(0.98) rotate(1deg);
  }
  70% {
    opacity: 0.3;
    filter: blur(8px);
    transform: translate3d(0, 60px, 0) scale(0.92) rotate(3deg);
  }
  100% {
    opacity: 0;
    filter: blur(15px);
    transform: translate3d(0, 120px, 0) scale(0.85) rotate(5deg);
  }
}

@keyframes logoEnter {
  0%   { opacity: 0; transform: translateY(-12px) scale(0.95); filter: blur(6px); }
  60%  { opacity: 1; transform: translateY(3px) scale(1.02); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes logoExit {
  0%   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  65%  { opacity: 0.6; transform: translateY(-6px) scale(0.985); filter: blur(2px); }
  100% { opacity: 0; transform: translateY(-22px) scale(0.96); filter: blur(6px); }
}

@keyframes fadeDeblurY {
  0%   { opacity: 0; filter: blur(8px); transform: translateY(12px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes captionOut {
  0%   { opacity: 1; transform: translateY(0); filter: blur(0); }
  60%  { opacity: 0.7; transform: translateY(-6px); filter: blur(2px); }
  100% { opacity: 0; transform: translateY(-18px); filter: blur(6px); }
}

@keyframes tileCinematic {
  0%   { opacity: 0; transform: translateX(-100px) translateY(40px) scale(0.88) translateZ(0); filter: blur(15px); }
  50%  { opacity: 0.9; transform: translateX(8px) translateY(-6px) scale(1.04) translateZ(0); filter: blur(2px); }
  100% { opacity: 1; transform: translateX(0) translateY(0) scale(1) translateZ(0); filter: blur(0); }
}

@keyframes menuItemDramatic {
  0%   { opacity: 0; transform: translateX(-60px) translateY(20px) scale(0.9); filter: blur(2px); }
  60%  { opacity: 1; transform: translateX(8px) translateY(-4px) scale(1.02); filter: blur(0); }
  100% { opacity: 1; transform: translateX(0) translateY(0) scale(1); filter: blur(0); }
}

@keyframes tileZoomCinematic {
  0%   { opacity: 0; transform: scale(0.6) rotate(-12deg) translateZ(0); }
  55%  { opacity: 1; transform: scale(1.1) rotate(3deg) translateZ(0); }
  80%  { opacity: 1; transform: scale(0.97) rotate(-1deg) translateZ(0); }
  100% { opacity: 1; transform: scale(1) rotate(0deg) translateZ(0); }
}

@keyframes panelSlideIn {
  0%   { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(0);    opacity: 1; }
}

@keyframes panelSlideOut {
  0%   { transform: translateX(0);    opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

@keyframes titleIn     { 0%{opacity:0;transform:translateX(18px)} 100%{opacity:1;transform:none} }
@keyframes titleOut    { 0%{opacity:1;transform:none} 100%{opacity:0;transform:translateX(18px)} }
@keyframes contentIn   { 0%{opacity:0;transform:translateY(14px)} 100%{opacity:1;transform:none} }
@keyframes contentOut  { 0%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(14px)} }
@keyframes cardIn      { 0%{opacity:0;transform:translateY(20px)} 100%{opacity:1;transform:none} }
@keyframes cardOut     { 0%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(22px)} }

@keyframes slideInRightStrip {
  0%   { transform: translateX(-200vw) translateZ(0); opacity: 0; }
  70%  { transform: translateX(5px) translateZ(0);   opacity: 1; }
  100% { transform: translateX(0) translateZ(0);     opacity: 1; }
}

@keyframes fadeInUp {
  0%   { opacity: 0; transform: translateY(12px) translateZ(0); filter: blur(6px); }
  60%  { opacity: 1; transform: translateY(-4px) translateZ(0); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) translateZ(0);   filter: none; }
}

@keyframes popIn {
  0%   { opacity: 0; transform: translateY(10px) scale(0.98) translateZ(0); filter: blur(6px); }
  65%  { opacity: 1; transform: translateY(-6px) scale(1.02) translateZ(0); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1) translateZ(0);        filter: none; }
}

@keyframes homeHeroMovieIn {
  from { opacity: 0; transform: translateZ(0) scale(1.35); }
  to   { opacity: 1; transform: translateZ(0) scale(1.00); }
}

/* ============================
   3) MENU OVERLAY & PANEL
   ============================ */
.menu-overlay {
  display: none;
  position: fixed;
  left: -10px;
  top: -10px;
  right: 84px;
  bottom: 0;
  z-index: 1400;
  align-items: stretch;
  justify-content: flex-start;
  pointer-events: none;
  opacity: 0;
  transition: opacity 360ms ease;
}

.menu-overlay .menu-panel {
  margin: 0;
  width: calc(100% - 100px);
  height: calc(100vh - 90px);
  position: relative;
  pointer-events: none;
  overflow: hidden;
  border-radius: 30px;
  background: transparent;
  clip-path: circle(0% at 0 0);
  -webkit-clip-path: circle(0% at 0 0);
}

.menu-overlay::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  backdrop-filter: blur(6px) saturate(0.98);
  -webkit-backdrop-filter: blur(6px) saturate(0.98);
  opacity: 0;
  transition: opacity 360ms ease;
}

/* ============================
    MENU LEFT SECTION
   ============================ */
.menu-left__logo {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 10;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  will-change: opacity, transform, filter;
}

.menu-left__logo-img {
  height: 80px;
  width: auto;
  display: block;
}

.menu-panel .menu-inner {
  display: grid;
  grid-template-columns: 450px 1fr;
  min-height: 100%;
}

.menu-panel .menu-close {
  position: absolute;
  right: 18px;
  top: 18px;
  background: transparent;
  color: #ffffff;
  border: none;
  font-size: 30px;
  font-weight: 700;
  cursor: pointer;
  z-index: 30;
}

.menu-left {
  background: linear-gradient(180deg, #F4A91C, #F4A91C);
  padding: 36px 28px;
  border-right: 1px solid rgba(10,20,30,0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.menu-left .menu-items {
  position: absolute;
  top: 50%;
  right: 48px;
  transform: translateY(-50%);
  width: auto;
  z-index: 5;
  pointer-events: auto;
}

.menu-left .menu-items ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  align-items: flex-start;
  text-align: right;
  max-width: 400px;
}

.menu-left .menu-items a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #ffffff;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  padding: 10px 16px;
  transition: color .16s ease;
}

.menu-left .menu-items a:hover {
  text-decoration: underline;
  transform: translateX(15px);
}

/* INITIAL (DEFAULT) STATE FOR LEFT ITEMS — hidden & offset; NO animation yet */
.menu-left .menu-items li {
  opacity: 0;
  filter: blur(8px);
  transform: translateX(-60px);
}

/* ============================
      MENU RIGHT SECTION
   ============================ */
.menu-right {
  background: linear-gradient(180deg, #189DD8, #189DD8);
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.menu-right .tile {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(5,20,30,0.06);
  height: 360px;
  min-height: 220px;
}

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

.menu-right .tile .tile-caption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 6;
  background: rgba(0,0,0,0.36);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  max-width: calc(100% - 28px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

.menu-right .tile .tile-caption .sub {
  display: block;
  font-weight: 500;
  font-size: 13px;
  opacity: 0.9;
  margin-top: 4px;
}

.menu-right .collage-caption {
  margin-top: 2rem;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  max-width: 980px;
  line-height: 1.3;
  opacity: 0.95;
}

/* ============================
   DASHBOARD GATE (LOGGED-OUT)
   ============================ */
.dashboard-gate {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  color: #ffffff;

  /* base state for animation */
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  filter: blur(6px);

  transition:
    opacity 420ms cubic-bezier(.22,.9,.24,1.02),
    transform 420ms cubic-bezier(.22,.9,.24,1.02),
    filter 380ms ease-out;
}

.dashboard-gate.gate-visible {
  /* visible state */
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* title and text stay the same */
.dashboard-gate__title {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 800;
}

.dashboard-gate__text {
  margin: 0 0 20px 0;
  font-size: 14px;
  opacity: 0.9;
}

/* button: add a tiny delayed pop-in */
.dashboard-gate__btn {
  padding: 10px 24px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(90deg, #F4A91C, #f59e0b);
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;

  transform: translateY(6px) scale(0.97);
  opacity: 0;

  transition:
    opacity 320ms cubic-bezier(.22,.9,.24,1.02),
    transform 320ms cubic-bezier(.22,.9,.24,1.02);
  transition-delay: 90ms; /* comes in just after the container */
}

.dashboard-gate.gate-visible .dashboard-gate__btn {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.dashboard-gate__btn:hover {
  transform: translateY(-2px) scale(1.03);
}

.dashboard-gate__btn:active {
  transform: translateY(0) scale(0.99);
}
/* ============================================
   SUN & SEA DASHBOARD PREVIEW (LOGGED-IN)
   ============================================ */
.ss-dashboard-shell {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.ss-dashboard-card {
  margin: 16px auto;
  padding: 32px 32px 28px;
  width: min(100%, 940px);
  min-height: 500px;
  border-radius: 26px;
  background: #fdfdfd;
  color: #0f172a;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(26px) scale(0.96);
  animation: dashCardIn 780ms cubic-bezier(.22,.9,.25,1) forwards;
  animation-delay: 700ms;  /* menu opens first THEN card appears */
}

@keyframes dashCardIn {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.95);
  }
  55% {
    opacity: 1;
    transform: translateY(-4px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* header row */
.ss-dash-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}

.ss-dash-header-left {
  max-width: 60%;
}

.ss-dash-title {
  margin: 0 0 4px 0;
  font-size: 26px;
  font-weight: 800;
  color: #f59e0b; /* orange "Overview" like your mock */
}

.ss-dash-subtitle {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
}

/* header right controls */
.ss-dash-header-right {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}

.ss-dash-period-toggle {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: #e5e7eb;
}

.ss-dash-pill {
  border: none;
  background: transparent;
  color: #4b5563;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.ss-dash-pill--active {
  background: #f59e0b;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(245,158,11,0.4);
}

.ss-dash-date-btn {
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 6px 12px;
  font-size: 12px;
  color: #4b5563;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.ss-dash-date-icon {
  font-size: 14px;
}

/* user chip in corner */
.ss-dash-user-chip {
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.7);
  background: #ffffff;
  padding: 4px 10px 4px 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  color: #374151;
  box-shadow: 0 8px 18px rgba(15,23,42,0.20);
}

.ss-dash-avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #189DD8;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

.ss-dash-user-text {
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ss-dash-user-chevron {
  font-size: 10px;
}

/* main grid */
.ss-dash-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* base card */
.ss-dash-card {
  position: relative;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(15,23,42,0.10);
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* make some cards span */
.ss-dash-card--wide {
  grid-column: span 1;
}

.ss-dash-card--chart {
  grid-column: span 2;
  min-height: 170px;
}

.ss-dash-card--referrals {
  grid-column: span 1;
}

/* card header + content */
.ss-dash-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ss-dash-card-label {
  font-size: 13px;
  font-weight: 600;
  color: #9ca3af;
}

.ss-dash-card-main {
  margin-top: 6px;
}

.ss-dash-card-amount {
  margin: 0 0 4px 0;
  font-size: 22px;
  font-weight: 800;
  color: #111827;
}

.ss-dash-card-delta {
  margin: 0;
  font-size: 12px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.ss-dash-card-delta span {
  color: #9ca3af;
  font-weight: 500;
}

/* up / down colours */
.ss-dash-card-delta--up {
  color: #16a34a;
}

.ss-dash-card-delta--down {
  color: #dc2626;
}

/* circular icons on right of cards */
.ss-dash-card-icon {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4b5563;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 10px 24px rgba(15,23,42,0.16);
}

.ss-dash-card-icon--currency {
  background: #eef2ff;
}

.ss-dash-card-icon--percent {
  background: #eff6ff;
}

.ss-dash-card-icon--people {
  background: #ecfeff;
}

/* chart placeholder */
.ss-dash-chart-placeholder {
  margin-top: 12px;
  height: 80px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ecfdf5, #f0fdf4);
  position: relative;
  overflow: hidden;
}

.ss-dash-chart-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 999px;
}

.ss-dash-chart-line--1 {
  top: 55%;
  background: rgba(45,212,191,0.8);
}

.ss-dash-chart-line--2 {
  top: 65%;
  background: rgba(34,197,94,0.8);
}

/* referrals list */
.ss-dash-referrals {
  list-style: none;
  padding: 0;
  margin: 8px 0 10px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ss-dash-referrals li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}

.ss-dash-ref-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #111827;
  color: #f9fafb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.ss-dash-ref-avatar--secondary {
  background: #189DD8;
}

.ss-dash-ref-text {
  display: flex;
  flex-direction: column;
}

.ss-dash-ref-name {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.ss-dash-ref-meta {
  font-size: 11px;
  color: #9ca3af;
}

.ss-dash-ref-icon {
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 4px 6px;
  cursor: pointer;
  font-size: 13px;
  color: #4b5563;
}

/* bottom link */
.ss-dash-more-link {
  margin-top: 2px;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: #189DD8;
  cursor: pointer;
  text-align: left;
}

/* Inner pieces that should animate in */
.ss-dash-header,
.ss-dash-block,
.ss-dash-referrals-card {
  opacity: 0;
  transform: translateY(18px);
  animation: dashItemIn 680ms cubic-bezier(.22,.9,.25,1) forwards;
}

/* Same keyframes – smooth fade + slide up */
@keyframes dashItemIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 🔥 Staggered timing – AFTER menu opens */
.ss-dash-header        { animation-delay: 950ms; }
.ss-dash-block--1      { animation-delay: 1050ms; } /* Special Bonus */
.ss-dash-block--2      { animation-delay: 1150ms; } /* Holiday Bonus */
.ss-dash-block--3      { animation-delay: 1250ms; } /* Total Bonuses */
.ss-dash-block--4      { animation-delay: 1350ms; } /* Sun & Sea Bonus */
.ss-dash-referrals-card{ animation-delay: 1450ms; } /* Referrals card */

/* ============================
   FAQ PANEL (MENU RIGHT)
   ============================ */

.faq-wrapper {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 12px 40px;
  color: #ffffff;
}

.faq-heading {
  margin: 0 0 40px 0;
  font-size: clamp(46px, 5.4vw, 72px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  position: relative;
}

.faq-heading::after {
  content: "";
  display: block;
  width: 120px;
  height: 4px;
  background: #ffffff;
  border-radius: 999px;
  margin: 10px auto 0;
}

/* grid of cards */
.faq-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* center block of cards */
  gap: 24px 28px; 
}

/* individual card – auto height based on content */
.faq-card {
  background: #ffffff;
  color: #111827;
  border-radius: 18px;
  padding: 18px 20px 20px;
  position: relative;
  flex: 1 1 280px;           /* minimum width of a card */
  max-width: 380px; 
}

/* little accent bar like the design */
.faq-card::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: 10px;
  width: 40px;
  height: 3px;
  border-radius: 999px;
  background: #f4a91c;
  opacity: 0.9;
}

.faq-question {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #f97316; /* warm orange heading */
}

.faq-answer {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #4b5563;
}

/* --- Entrance animation (fade + slide up, staggered) --- */

.faq-heading,
.faq-card {
  opacity: 0;
  transform: translateY(16px);
}

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

/* When the FAQ panel in the MENU is visible */
.menu-right__panel[data-panel="faq"].is-visible .faq-heading {
  animation: faqFadeUp 820ms cubic-bezier(.2, .9, .2, 1) 260ms both;
}

.menu-right__panel[data-panel="faq"].is-visible .faq-card {
  animation: faqFadeUp 820ms cubic-bezier(.2, .9, .2, 1) both;
}

/* stagger cards (slower, more spaced out) */
.menu-right__panel[data-panel="faq"].is-visible .faq-card:nth-child(1) { animation-delay: 340ms; }
.menu-right__panel[data-panel="faq"].is-visible .faq-card:nth-child(2) { animation-delay: 420ms; }
.menu-right__panel[data-panel="faq"].is-visible .faq-card:nth-child(3) { animation-delay: 500ms; }
.menu-right__panel[data-panel="faq"].is-visible .faq-card:nth-child(4) { animation-delay: 580ms; }
.menu-right__panel[data-panel="faq"].is-visible .faq-card:nth-child(5) { animation-delay: 660ms; }
.menu-right__panel[data-panel="faq"].is-visible .faq-card:nth-child(6) { animation-delay: 740ms; }

/* ============================
   CONTACT PANEL (MENU RIGHT)
   ============================ */
.contact-wrapper{
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 16px 40px;
  color: #ffffff;
}

/* Heading centered with underline */
.contact-heading{
  margin: 0 0 22px 0;
  font-size: clamp(46px, 5.4vw, 72px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  position: relative;
}

.contact-heading::after{
  content:"";
  display:block;
  width:120px;
  height:4px;
  background:#ffffff;
  border-radius:999px;
  margin:10px auto 0;
}

/* ✅ NEW GRID: center form under heading, keep info without adding space */
.contact-grid{
  display: grid;

  /* Left = info, Middle = form (center), Right = spacer to keep form truly centered */
  grid-template-columns: minmax(220px, 0.28fr) minmax(520px, 0.72fr) minmax(220px, 0.28fr);

  gap: 34px;
  align-items: start;

  /* starts right under heading */
  margin-top: 8px;
}

/* LEFT SIDE */
.contact-info{
  grid-column: 1;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top: 10px;
}

.contact-label{
  margin:0 0 4px;
  font-size:16px;
  font-weight:700;
}

.contact-link{
  color:#ffffff;
  font-size:15px;
  text-decoration: underline;
  line-height:1.5;
}
.contact-link:hover{ text-decoration:none; }

.contact-whatsapp-btn{
  display:inline-block;
  padding:12px 32px;
  border-radius:999px;
  background:#25D366;
  text-decoration: none !important;
  text-align: center;
  align-content: center;
  color:#ffffff;
  font-size:15px;
  font-weight:600;
  border:none;
  cursor:pointer;
  box-shadow: 0 14px 32px rgba(37, 211, 102, 0.28);
  transition:
    background .2s ease,
    transform .18s ease,
    box-shadow .18s ease;
  margin-top: 18px;
}
.contact-whatsapp-btn:hover{
  background:#1ebe5d;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(37, 211, 102, 0.35);
}

.contact-accent-line{
  margin-top: 22px;
  display:inline-block;
  width:46px;
  height:3px;
  border-radius:999px;
  background:#f4a91c;
}

/* ✅ RIGHT SPACER (no HTML needed) */
.contact-form-wrap{
  grid-column: 2;                /* middle column */
  display:flex;
  justify-content:center;
}

/* this invisible "spacer" is column 3 — we don't need markup for it */

/* FORM CARD */
.contact-form-card{
  width: 100%;
  max-width: 760px;
  background:#ffffff;
  border-radius:30px;
  padding:26px 30px 26px;
  color:#111827;
}

/* Rows */
.contact-row{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:12px;
}
.contact-row--two{
  flex-direction:row;
  gap:12px;
}
.contact-field{ flex:1; }

/* Inputs / textarea */
.contact-field input,
.contact-field textarea{
  width:100%;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.65);
  padding:10px 16px;
  font-size:14px;
  outline:none;
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    transform .12s ease;
}
.contact-field textarea{
  border-radius:20px;
  min-height:120px;
  resize:vertical;
  padding-top:12px;
}

.contact-field input:focus,
.contact-field textarea:focus{
  border-color:#f4a91c;
  box-shadow:0 0 0 2px rgba(244,169,28,0.30);
  transform: translateY(-1px);
}

/* HUMAN + SUBMIT */
.contact-row--human-submit{
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:6px;
}

.contact-human-check{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  border-radius:999px;
  background:#f9fafb;
  border:1px solid rgba(148,163,184,0.6);
  cursor:pointer;
  font-size:13px;
  color:#6b7280;
  box-shadow:0 8px 18px rgba(148,163,184,0.2);
  position:relative;
}

.contact-human-check input{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}

.contact-human-box{
  width:18px;
  height:18px;
  border-radius:6px;
  border:2px solid rgba(148,163,184,0.9);
  background:#ffffff;
  position:relative;
  flex-shrink:0;
  transition: background .18s ease, border-color .18s ease;
}

.contact-human-box::after{
  content:"";
  position:absolute;
  inset:3px 4px 4px 5px;
  border-right:2px solid #ffffff;
  border-bottom:2px solid #ffffff;
  transform: rotate(45deg) scale(.4);
  opacity:0;
  transition: opacity .18s ease, transform .18s ease;
}

.contact-human-check:has(input:checked) .contact-human-box{
  background:#22c55e;
  border-color:#22c55e;
}
.contact-human-check:has(input:checked) .contact-human-box::after{
  opacity:1;
  transform: rotate(45deg) scale(1);
}
.contact-human-check:has(input:checked) .contact-human-text{
  color:#16a34a;
}

.contact-submit-btn{
  padding:10px 26px;
  border-radius:999px;
  border:none;
  background:#f4a91c;
  color:#ffffff;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:
    transform 160ms cubic-bezier(.2,.9,.2,1),
    box-shadow 160ms cubic-bezier(.2,.9,.2,1);
}
.contact-submit-btn:hover{
  transform: translateY(-3px) scale(1.05);
}

/* ============================
   ENTRANCE ANIMATION
   ============================ */
.contact-heading,
.contact-info,
.contact-form-card{
  opacity:0;
  transform: translateY(18px);
}

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

.menu-right__panel[data-panel="contact"].is-visible .contact-heading{
  animation: contactFadeUp 820ms cubic-bezier(.2,.9,.2,1) 200ms both;
}

/* ✅ form comes in next, centered under heading */
.menu-right__panel[data-panel="contact"].is-visible .contact-form-card{
  animation: contactFadeUp 880ms cubic-bezier(.2,.9,.2,1) 320ms both;
}

/* ✅ info comes in after (left side) */
.menu-right__panel[data-panel="contact"].is-visible .contact-info{
  animation: contactFadeUp 820ms cubic-bezier(.2,.9,.2,1) 380ms both;
}

/* ============================
     MENU OPEN STATES
   ============================ */
body.menu-open .menu-overlay {
  display: flex;
  pointer-events: auto;
  opacity: 1;
}

body.menu-open .menu-overlay::before {
  opacity: 1;
}

body.menu-open .menu-overlay .menu-panel {
  pointer-events: auto;
  will-change: clip-path, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
  animation:
    panelClipLinear 1100ms linear 40ms forwards,
    panelFadeIn 800ms cubic-bezier(.22,.9,.27,1) 40ms forwards;
}

body.menu-open .menu-left__logo {
  animation: logoEnter 500ms cubic-bezier(.2,.9,.2,1) 1200ms both;
}

/* ENTRANCE: apply the animation ONLY when menu is open */
body.menu-open .menu-left .menu-items li {
  animation-name: menuItemDramatic;
  animation-duration: 900ms;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}

body.menu-open .menu-left .menu-items li:nth-child(1){ animation-delay: 650ms; }
body.menu-open .menu-left .menu-items li:nth-child(2){ animation-delay: 730ms; }
body.menu-open .menu-left .menu-items li:nth-child(3){ animation-delay: 810ms; }
body.menu-open .menu-left .menu-items li:nth-child(4){ animation-delay: 890ms; }
body.menu-open .menu-left .menu-items li:nth-child(5){ animation-delay: 970ms; }
body.menu-open .menu-left .menu-items li:nth-child(6){ animation-delay: 1050ms; }
body.menu-open .menu-left .menu-items li:nth-child(7){ animation-delay: 1130ms; }
body.menu-open .menu-left .menu-items li:nth-child(8){ animation-delay: 1210ms; }

body.menu-open .menu-right .tile {
  animation-name: tileZoomCinematic;
  animation-duration: 1200ms;
  animation-timing-function: cubic-bezier(.2,.9,.2,1);
  animation-fill-mode: forwards;
}

body.menu-open .menu-right .collage-caption {
  animation-name: fadeDeblur;
  animation-duration: 500ms;
  animation-timing-function: cubic-bezier(.2,.9,.2,1);
  animation-fill-mode: forwards;
  animation-delay: 1200ms;
}

.menu-left .menu-ctas .btn.primary {
  opacity: 0;
  filter: blur(6px);
  animation: fadeDeblur 520ms cubic-bezier(.2,.9,.2,1) forwards;
  animation-delay: 920ms;
}

.menu-panel .menu-close {
  opacity: 0;
  filter: blur(6px);
  animation: fadeDeblur 950ms cubic-bezier(.2,.9,.2,1) forwards;
  animation-delay: 950ms;
}

/* ============================
   WELCOME HEX COLLAGE
   ============================ */
.menu-right__panel[data-panel="welcome"]{
  display: flex;
  flex-direction: column;
}

.hex-collage-wrap{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 60px 12px 10px;
}

/* predefined layout */
.hex-collage{
  width: 100%;
  display: grid;

  /* 12-col grid gives you clean “masonry” control */
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 52px;
  gap: 16px;

  grid-template-areas:
    "safari safari safari safari cable  cable  cable  cable  dining dining dining dining"
    "safari safari safari safari cable  cable  cable  cable  dining dining dining dining"
    "safari safari safari safari cruise cruise cruise cruise dining dining dining dining"
    "safari safari safari safari cruise cruise cruise cruise bus   bus   bus   bus"
    "ele   ele   ele   ele   cruise cruise cruise cruise bus   bus   bus   bus"
    "ele   ele   ele   ele   cruise cruise cruise cruise bus   bus   bus   bus";
}

/* tile base (blocks) */
.hex{
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

  border-radius: 22px;
  background: rgba(255,255,255,0.06);
  box-shadow:
    0 22px 55px rgba(5,20,30,0.18),
    0 10px 24px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.20);
}

.hex img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.02);
}

/* map your existing figures to the layout */
.pos-left{        grid-area: safari; }  /* man on car = tall left */
.pos-top{         grid-area: cable;  }  /* cable car = top middle */
.pos-right{       grid-area: dining; }  /* women drinking = top right */
.pos-center{      grid-area: cruise; }  /* cruise = BIGGEST */
.pos-bottom{      grid-area: bus;    }  /* red bus = bottom right */
.pos-bottom-left{ grid-area: ele;    }  /* elephant = bottom left */

/* caption always under collage */
.menu-right__panel[data-panel="welcome"] .collage-caption{
  margin: 10px 0 0;
  padding: 0 0 6px;
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
  color: rgba(255,255,255,0.95);
}

.hex-collage-wrap{
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0,18px,0) scale(0.985);
  will-change: opacity, transform, filter;
}

.menu-right__panel[data-panel="welcome"] .hex-collage-wrap{
  opacity: 0;
  transform: translate3d(-26px, 14px, 0) scale(0.97);
  filter: blur(10px);
  will-change: opacity, transform, filter;
}

body.menu-open .menu-right__panel[data-panel="welcome"].is-visible .hex-collage-wrap{
  animation: collageEnter 1600ms cubic-bezier(.16, 1, .3, 1) 320ms both;
}
@keyframes collageEnter{
  0%{
    opacity: 0;
    transform: translate3d(-26px, 14px, 0) scale(0.97);
    filter: blur(12px);
  }
  60%{
    opacity: 1;
    transform: translate3d(6px, -2px, 0) scale(1.02);
    filter: blur(2px);
  }
  100%{
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

.menu-right__panel[data-panel="welcome"] .hex{
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(0.985);
  filter: blur(6px);
  will-change: opacity, transform, filter;
}

body.menu-open .menu-right__panel[data-panel="welcome"].is-visible .hex{
  animation: hexPop 1000ms cubic-bezier(.2, .9, .2, 1) both;
}
@keyframes hexPop{
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.985); filter: blur(6px); }
  to   { opacity: 1; transform: translate3d(0, 0, 0)  scale(1);     filter: blur(0); }
}

body.menu-open .menu-right__panel[data-panel="welcome"].is-visible .hex:nth-child(1){ animation-delay: 800ms; }
body.menu-open .menu-right__panel[data-panel="welcome"].is-visible .hex:nth-child(2){ animation-delay: 880ms; }
body.menu-open .menu-right__panel[data-panel="welcome"].is-visible .hex:nth-child(3){ animation-delay: 960ms; }
body.menu-open .menu-right__panel[data-panel="welcome"].is-visible .hex:nth-child(4){ animation-delay: 1040ms; }
body.menu-open .menu-right__panel[data-panel="welcome"].is-visible .hex:nth-child(5){ animation-delay: 1120ms; }
body.menu-open .menu-right__panel[data-panel="welcome"].is-visible .hex:nth-child(6){ animation-delay: 1200ms; }

/* ============================
     MENU CLOSING STATES
   ============================ */
body.menu-closing .menu-overlay::before {
  opacity: 0;
  transition: opacity 360ms ease;
}

body.menu-closing .menu-overlay .menu-panel {
  pointer-events: none;
  will-change: clip-path, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
  animation:
    panelClipLinearOut 900ms linear forwards,
    panelFadeOut 600ms cubic-bezier(.65,.0,.35,1) forwards;
}

body.menu-closing .menu-left__logo {
  animation: logoExit 260ms cubic-bezier(.4,0,.2,1) 40ms both;
}

body.menu-closing .menu-left .menu-items li {
  animation-name: fadeBlurOut;
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(.22,.9,.27,1);
  animation-fill-mode: both;
}

body.menu-closing .menu-left .menu-items li:nth-child(8){ animation-delay: 0ms; }
body.menu-closing .menu-left .menu-items li:nth-child(7){ animation-delay: 60ms; }
body.menu-closing .menu-left .menu-items li:nth-child(6){ animation-delay: 120ms; }
body.menu-closing .menu-left .menu-items li:nth-child(5){ animation-delay: 180ms; }
body.menu-closing .menu-left .menu-items li:nth-child(4){ animation-delay: 240ms; }
body.menu-closing .menu-left .menu-items li:nth-child(3){ animation-delay: 300ms; }
body.menu-closing .menu-left .menu-items li:nth-child(2){ animation-delay: 360ms; }
body.menu-closing .menu-left .menu-items li:nth-child(1){ animation-delay: 420ms; }

body.menu-closing .menu-right .collage .tile {
  animation: tileFadeOutFast 700ms cubic-bezier(.4,0,.6,1) forwards !important;
  animation-delay: 0ms !important;
}

body.menu-closing .menu-right .collage .tile:nth-child(1),
body.menu-closing .menu-right .collage .tile:nth-child(2) {
  animation-delay: 0ms !important;
}

body.menu-closing .menu-right .collage-caption {
  animation-name: captionOut;
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(.4,0,.2,1);
  animation-fill-mode: forwards;
  animation-delay: 40ms;
}

/* ============================
    RESET STATES (WHEN CLOSED)
   ============================ */
body:not(.menu-open):not(.menu-closing) .menu-left .menu-items li,
body:not(.menu-open):not(.menu-closing) .menu-right .tile,
body:not(.menu-open):not(.menu-closing) .menu-panel .menu-close,
body:not(.menu-open):not(.menu-closing) .menu-left .menu-ctas .btn,
body:not(.menu-open):not(.menu-closing) .menu-right .collage-caption {
  animation: none !important;
  opacity: 0;
  filter: none;
}

/* ============================
    UA HIDDEN SAFETY + VISIBILITY
   ============================ */
.menu-right__panel[hidden] {
  display: none !important;
}

.menu-right__panel {
  opacity: 1;
  transform: none;
}

.menu-right__panel.is-visible {
  transition: opacity 220ms cubic-bezier(.2,.9,.2,1),
              transform 220ms cubic-bezier(.2,.9,.2,1);
  opacity: 1;
  transform: none;
}

 
/* ============================
    IN-PANEL ROUTER / PANELS
   ============================ */
.menu-right__panel {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms cubic-bezier(.2,.9,.2,1),
              transform 260ms cubic-bezier(.2,.9,.2,1);
}

.menu-right__panel[hidden] {
  display: block;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

.menu-right__panel.is-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

body.menu-open .menu-right__panel[data-panel="welcome"]:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* ============================
     ACTIVE LINK STYLING
   ============================ */
.menu-left .menu-items a.active {
  color: #0b1020;
  background: rgba(255,255,255,0.92);
  border-radius: 999px;
  padding: 10px 16px;
  text-decoration: none;
  transform: translateX(6px);
  transition: background .2s ease, color .2s ease, transform .16s ease;
}

/* ============================
    UA HIDDEN SAFETY + VISIBILITY
   ============================ */
.menu-right__panel[hidden] {
  display: none !important;
}

.menu-right__panel {
  opacity: 1;
  transform: none;
}

.menu-right__panel.is-visible {
  transition: opacity 220ms cubic-bezier(.2,.9,.2,1),
              transform 220ms cubic-bezier(.2,.9,.2,1);
  opacity: 1;
  transform: none;
}

/* ============================
   HEADER
   ============================ */
.site-header {
  position: absolute;
  top: 18px;
  left: 28px;
  right: calc(50px + 28px);
  z-index: 120;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 18px;
  pointer-events: auto;
}
.brand { 
  display: flex; 
  align-items: center; 
  gap: 12px;
  flex-shrink: 0;
}

.logo-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  transition:
    transform 260ms cubic-bezier(.22,1,.36,1),
    filter 260ms cubic-bezier(.22,1,.36,1),
    opacity 260ms ease;
  will-change: transform, filter;
}

.logo{
  height: 50px;
  width: auto;
  display: block;
}

.logo-link:hover,
.logo-link:focus-visible{
  transform: translateY(-2px) scale(1.035);
  filter: brightness(1.06);
  outline: none;
}

.menu-btn {
  background: transparent;
  border: 2px solid transparent;
  color: #fff;
  font-size: 16px;
  padding: 8px 10px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(255,255,255,0);

  transition:
    background 260ms cubic-bezier(.22,1,.36,1),
    transform 260ms cubic-bezier(.22,1,.36,1),
    border-color 260ms ease,
    box-shadow 260ms ease;
  will-change: transform, background, box-shadow;
}

.menu-btn:hover,
.menu-btn:focus-visible {
  border-radius: 15px;
  outline: none;
  background: rgba(255,255,255,0.20);
  transform: translateY(-2px) scale(1.05);
  border-color: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,0.95);
}

.hamburger {
  display: block;
}

.search-wrap {
  position: absolute;
  top: 10%;
  left: 43%;
  transform: translateX(-50%);

  display: flex;
  justify-content: center;
  width: 300px;
  max-width: 300px;
  height: 40px;
  margin: 0;
  z-index: 5;
}

.search-wrap .search {
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.9);
  color: #fff;
  padding: 6px 16px;
  border-radius: 25px;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  transition:
    background 200ms cubic-bezier(.2,.9,.2,1),
    transform 200ms cubic-bezier(.2,.9,.2,1),
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.search-wrap .search::placeholder {
  color: rgba(255,255,255,0.85);
  font-weight: 400;
}

.search-wrap .search:hover,
.search-wrap .search:focus {
  outline: none;
  background: rgba(255,255,255,0.20);
  transform: translateY(-2px) scale(1.05);
  border-color: #fff;
  box-shadow: 0 0 10px #fff;
}

.search-results{
  position:absolute; top:72px; left:50%; transform:translateX(-50%);
  width:min(560px, calc(100vw - 40px));
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.18);
  padding: 10px;
  z-index:9999;
  backdrop-filter: blur(10px);
  animation: sr-pop 160ms cubic-bezier(.2,.9,.2,1);
  transform-origin: 50% 0%;
}

.search-results .sr-item{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 14px; border-radius: 14px; cursor:pointer;
  background: rgba(10,55,110,0.05);
  border: 1px solid rgba(10,55,110,0.08);
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.search-results .sr-item + .sr-item{ margin-top:8px; }

.search-results .sr-item:hover,
.search-results .sr-item.is-active{
  background: rgba(255,170,70,0.12);
  border-color: rgba(255,170,70,0.25);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

.search-results .sr-title{
  color: rgba(6,24,52,0.95);
  font-weight: 850;
  font-size: 14px;
}
.search-results .sr-sub{
  color: rgba(6,24,52,0.62);
  font-size: 12px;
  margin-top: 3px;
}

.search-results .sr-tag{
  font-size: 11px;
  color: rgba(6,24,52,0.85);
  border: 1px solid rgba(255,170,70,0.35);
  background: rgba(255,170,70,0.18);
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.search-results .sr-empty{
  padding: 14px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(6,24,52,0.10);
  color: rgba(6,24,52,0.72);
  font-size: 13px;
  text-align: center;
}
.search-results .sr-empty strong{
  color: rgba(6,24,52,0.92);
  font-weight: 900;
}

@keyframes sr-pop{
  from{ opacity:0; transform: translateX(-50%) translateY(-6px) scale(0.985); }
  to{ opacity:1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ============================
   HEADER PROFILE / USER MENU
   ============================ */
.profile {
  flex-shrink: 0;
  justify-self: end;
  position: relative;
  margin-left: 102px;
  transition:
    background 260ms cubic-bezier(.22,1,.36,1),
    transform 260ms cubic-bezier(.22,1,.36,1),
    border-color 260ms ease,
    box-shadow 260ms ease;
  will-change: transform, background, box-shadow;
  border-radius: 15px;
  border: 1px solid transparent;
  padding: 6px;
  background: transparent;
  cursor: pointer;
}

.profile:hover,
.profile:focus-visible {
  outline: none;
  border-radius: 15px;
  background: rgba(255,255,255,0.20);
  transform: translateY(-2px) scale(1.035);
  border-color: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,0.95);
}

/* ============================
   LOGGED-IN USER PILL + DROPDOWN
   ============================ */
.user-menu {
  justify-self: end;
  position: relative;
  display: inline-block;
}

/* pill styled similar to the search input */
.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 25px; /* same rounded feel as search */
  border: 2px solid rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 200ms cubic-bezier(.2,.9,.2,1),
    transform 200ms cubic-bezier(.2,.9,.2,1),
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.user-pill__icon svg {
  display: block;
}

.user-pill__label {
  white-space: nowrap;
}

.user-pill__chevron {
  font-size: 11px;
  opacity: 0.9;
}

.user-pill:hover,
.user-pill:focus-visible {
  background: rgba(255,255,255,0.20);
  transform: translateY(-2px) scale(1.05);
  border-color: #fff;
  box-shadow: 0 0 10px #fff;
  outline: none;
}

/* ============================
   GLASSMORPHIC DROPDOWN (SUBTLE)
   ============================ */
.user-menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 170px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(255,255,255,0.12); /* softer, less white */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 8px 20px rgba(0,0,0,0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 150ms ease,
    transform 150ms ease,
    visibility 0s linear 150ms;
  z-index: 9999;
}

.user-menu-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.user-menu-item {
  width: 100%;
  text-align: center;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.06);

  /* 🔥 subtle readability improvements */
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 600;                 /* slightly bolder, not visually ‘bigger’ */
  letter-spacing: 0.5px;            /* improves clarity on glass */
  text-shadow: 0 0 3px rgba(0,0,0,0.35);  /* micro-shadow for readability */
  /* 🔥 THIS REMOVES UNDERLINE */
  text-decoration: none !important;
  cursor: pointer;
  display: block;

  transition:
    background 140ms ease,
    transform 120ms ease,
    border-color 120ms ease;
}

.user-menu-item:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.6);
  transform: translateY(-2px);
}

/* ============================
   ABSOLUTE HEADER META FLOAT
   ============================ */
.header-meta-float{
  position: absolute;
  top: 50%;
  right: 170px;
  transform: translateY(-50%);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 16px;
  border-radius: 25px;
  border: 2px solid rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.15);
  color: #fff;

  font-size: 14px;
  font-weight: 500;
  line-height: 1;

  transition:
    background 200ms cubic-bezier(.2,.9,.2,1),
    transform 200ms cubic-bezier(.2,.9,.2,1),
    border-color 200ms ease,
    box-shadow 200ms ease;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.header-meta-float:hover{
  background: rgba(255,255,255,0.20);
  transform: translateY(-50%) scale(1.05);
  border-color: #fff;
  box-shadow: 0 0 10px #fff;
}

.header-meta-float__hours{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  text-align: center;
  color: #fff;
}

.header-meta-float__label{
  font-weight: 700;
  color: rgba(255,255,255,0.98);
}

.header-meta-float__text{
  font-weight: 500;
  color: rgba(255,255,255,0.90);
}

/* ============================
   HEADER SOCIALS (LEFT SIDE)
   ============================ */
.header-socials{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 36px;
}

.header-socials__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;

  transition:
    transform 200ms cubic-bezier(.2,.9,.2,1),
    filter 200ms ease,
    opacity 200ms ease;
}

.header-socials__icon img{
  width: 65px;
  height: 65px;
  object-fit: contain;
  display: block;
}

.header-socials__icon:hover{
  border-radius: 25px;
  background: rgba(255,255,255,0.20);
  transform: translateY(-2px) scale(1.05);
  border-color: #fff;
  box-shadow: 0 0 10px #fff;
  border: 2px solid rgba(255,255,255,0.9);
}

/* ============================
   HERO SECTION
   ============================ */
.home-hero {
  background: none; 
  position: relative;
  overflow: hidden;
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;                 /* under .hero-overlay (10) and .hero-inner (20) */
  background-image: url("../images/homepage.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;     /* don't animate background-size */
  opacity: 0;
  transform: translateZ(0) scale(1.08); /* start slightly zoomed */
  will-change: opacity, transform;
}

/* One continuous animation (no mid keyframes = no pauses) */
.page-loaded .home-hero::before {
  animation: homeHeroMovieIn 1600ms cubic-bezier(.22, 1, .25, 1) both;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.20), rgba(255, 255, 255, 0) 15%);
}

.hero-inner {
  position: relative;
  z-index: 20;
  width: 100%;
  height: 100vh;
}

/* ============================
   HERO BUTTONS & CONTROLS
   ============================ */
.btn {
  padding: 8px 20px;
  border-radius: 24px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .14s ease, box-shadow .14s ease;
}

.btn:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,0.32); }
.btn:active { transform: translateY(-1px); }

.btn.primary {
  background: linear-gradient(90deg, #ffa726, #f59e0b);
  color: #fff;
}

.btn.pill {
  background: #189DD8;
  color: #fff;
}

/* Middle Row (Arrows & Flipbook) */
.hero-middle-row {
  position: absolute;
  left: 64px;
  right: calc(84px + 64px);
  bottom: 80px;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
  pointer-events: auto;
}

.arrow-buttons {
  display: flex;
  gap: 5px;
}

.arrow-btn {
  background: transparent;
  color: #fff;
  border: none;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.arrow-btn:hover { 
  transform: scale(1.2) translateY(-5px); /* Fixed: combined transforms */
}

.arrow-btn:hover svg {
  stroke: #F4A91C; /* Change SVG stroke color on hover */
}

.btn.flipbook-btn {
  padding: 12px 20px;
  border-radius: 28px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  min-width: 180px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .14s ease, box-shadow .14s ease;
  background: linear-gradient(90deg, #F4A91C, #F4A91C);
  color: #fff;
  height: 42px;
}

.btn.flipbook-btn:hover {
  transform: translateY(-6px) scale(1.1) !important;
  text-decoration: none !important;
}

/* Bottom CTA Row */
.hero-cta-row {
  position: absolute;
  left: 200px;
  right: 30px;  
  bottom: 24px;
  z-index: 30;
  display: flex;
  align-items: center;

  /* ✅ keep group centered */
  justify-content: center;

  /* spacing */
  gap: 35px;

  /* ✅ reserve space for flipbook button */
  padding-right: clamp(180px, 18vw, 260px);

  pointer-events: auto;
}

/* make the blue buttons sit closer to the orange button */
.hero-cta-row .hero-pills{
  display: flex;
  align-items: center;
  gap: 25px;
  margin-left: 0; /* remove micro-nudging */
}

  /* buff up ALL buttons in this row */
.hero-cta-row .btn{
  font-size: 13px;
  padding: 12px 20px;
  border-radius: 999px;
  height: 38px;
  transform-origin: center;
  backface-visibility: hidden;
}

/* make the blue pills wider/chunkier */
.hero-cta-row .btn.pill{
  min-width: 190px;        /* width bump */
  justify-content: center; /* keeps icon+text centered */
}

.hero-cta-row .btn.primary{
  padding: 12px 24px;
  min-width: 210px;
}
/* Make sure pills look the same as before */
.hero-cta-row .hero-pills .btn.pill{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
.hero-cta-row .btn svg,
.hero-middle-row .btn svg{
  width: 25px;
  height: 25px;
  flex-shrink: 0;
}
/* ----- FORCE HOVER (temporary use of !important to resolve specificity conflicts) ----- */
.hero-cta-row .btn {
  transition: transform 160ms cubic-bezier(.2,.9,.2,1) !important;
  -webkit-transition: transform 160ms cubic-bezier(.2,.9,.2,1) !important;
  will-change: transform, background !important;
  box-shadow: none !important;
}

/* primary button hover (forced) */
.hero-cta-row .btn.primary:hover,
.hero-cta-row .btn.primary:focus-visible {
  transform: translateY(-4px) scale(1.05) !important;
  text-decoration: none !important;
}

/* pill button hover (forced) */
.hero-cta-row .btn.pill:hover,
.hero-cta-row .btn.pill:focus-visible {
  transform: translateY(-4px) scale(1.05) !important;
  text-decoration: none !important;
}


/* ============================
   RIGHT STRIP
   ============================ */
.right-strip {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 84px;
  z-index: 15020;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:#F4A91C;
  padding: 0;
  transition: width 280ms cubic-bezier(.16,1,.3,1), box-shadow 240ms ease;
}

.right-strip .main-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.right-strip button {
  position: relative;
  overflow: visible;
  width: 84px;
  height: 70px;
  margin: 0;
  border: none;
  background: #F4A91C;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  border-top: 1px solid rgba(255,255,255,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.9);
  z-index: 15030;
  transition: background 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  box-sizing: border-box;
}
.right-strip button:focus {
  background: #189DD8;
}

.right-strip button::before {
  content: attr(title);
  position: absolute;
  right: 100%;
  top: -1px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  white-space: nowrap;
  background: #189DD8;
  color: #ffffff;
  font-weight: 500;
  font-size: 14px;
  border-radius: 30px 0 0 30px;
  transform: translateX(84px);
  opacity: 0;
  pointer-events: none;
  transition: background 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  border-top: 1px solid rgba(255,255,255,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.9);
  border-left: 1px solid rgba(255,255,255,0.9);
  z-index: 15010;
  width: 55px;
  text-decoration: underline;
}

body.right-panel-open .right-strip .main-buttons button::before {
  border-radius: 0;   
  transition:
    background 0.28s ease,
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.2s ease,
    border-radius 0.28s ease;       /* smooth radius change */
}

.right-strip button:hover::before,
body.right-panel-open .right-strip button::before {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto; /* now clicks on the label hit the button element */
}

/* if you also show the labels on focus (keyboard), ensure they are clickable too */
.right-strip button:focus::before {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.right-strip button:hover {
  background: #189DD8;
  color: #ffffff;
}

.right-strip button svg,
.right-strip button:hover svg {
  stroke: #ffffff !important;
}

/* base state: hidden */
.right-strip .top-btn {
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition:
    opacity 240ms ease,
    transform 240ms ease;
}

/* visible state */
.right-strip .top-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Only hide Top when the MENU is open (optional) */
body.menu-open .right-strip .top-btn,
body.menu-closing .right-strip .top-btn{
  opacity: 0 !important;
  transform: translateY(10px) !important;
  pointer-events: none !important;
}

/* hide the label pseudo explicitly (covers expanded-strip label) */
body.menu-open .right-strip .top-btn::before,
body.menu-closing .right-strip .top-btn::before,
body.right-panel-open .right-strip .top-btn::before,
body.right-panel-closing .right-strip .top-btn::before {
  opacity: 0 !important;
  transform: translateX(84px) !important;
  pointer-events: none !important;
  transition: opacity 220ms ease, transform 320ms cubic-bezier(.16,1,.3,1);
}

/* =========================================================
   RIGHT PANEL – SHELL
   ========================================================= */
.right-panel-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 15000;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transition: opacity 360ms ease;
}

.right-panel-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  backdrop-filter: blur(8px) saturate(0.96);
  -webkit-backdrop-filter: blur(8px) saturate(0.96);
  opacity: 0;
  transition: opacity 360ms ease;
}

.right-panel {
  position: absolute;
  right: 84px;
  top: 0;
  height: 100vh;
  width: calc(100% - 84px - 200px);
  background: #F4A91C;
  pointer-events: none;
  overflow-y: auto;   /* we keep this just in case on tiny screens */
  overflow-x: hidden;
  transform: translateX(100%);
  box-shadow: -10px 0 40px rgba(0,0,0,0.18);
  z-index: 15040;
  transition: right 300ms cubic-bezier(.16,1,.3,1);
}

/* Main content flex container */
.right-panel__content {
  padding: 10px 32px 48px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* centre block vertically */
  align-items: center;
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box;
}

/* Edge close button */
.right-panel__edge-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #189DD8;
  color: #fff;
  font-size: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 16000;
  transform: translateX(-6px) scale(0.98);
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  transition: opacity 260ms cubic-bezier(.2,.9,.2,1),
              transform 260ms cubic-bezier(.16,1,.3,1);
  box-shadow: 0 8px 18px rgba(24,157,216,0.12);
}

.right-panel__edge-close.edge-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.right-panel__edge-close.edge-hidden {
  opacity: 0;
  transform: translateX(-8px) scale(.98);
  pointer-events: none;
}

body.right-panel-open #rightPanelCloseEdge.right-panel__edge-close.edge-visible:hover {
  transform: translateY(-3px) scale(1.1) !important;
  background: #189DD8 !important;
}

/* When panel open / closing */
body.right-panel-open .right-panel-overlay {
  display: block;
  pointer-events: auto;
  opacity: 1;
}
body.right-panel-open .right-panel-overlay::before { opacity: 1; }

body.right-panel-open .right-panel {
  pointer-events: auto;
  right: 84px;
  animation: panelSlideIn 820ms cubic-bezier(.16,1,.3,1) forwards;
}

body.right-panel-closing .right-panel-overlay::before {
  opacity: 0;
  transition: opacity 520ms ease;
}
body.right-panel-closing .right-panel {
  animation: panelSlideOut 720ms cubic-bezier(.4,0,.2,1) forwards;
  right: 84px;
}
body.right-panel-closing .right-panel__edge-close {
  opacity: 0;
  transform: translateY(-6px) scale(.96);
  pointer-events: none;
}

/* =========================================================
   SHARED PANEL CANVAS + HEADINGS
   ========================================================= */
.panel-wishlist,
.panel-partner,
.panel-promotion,
.panel-contact {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}

/* Default big heading (Start now / Our partners / Get in touch) */
.panel-wishlist h2,
.panel-partner h2,
.panel-contact h2 {
  margin: 0 0 28px;
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
}

/* Promo heading is a bit smaller to save height */
.panel-promotion h2 {
  margin: 0 0 18px;
  font-size: 35px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.12;
}

/* Underline under all headings */
.panel-wishlist h2::after,
.panel-partner h2::after,
.panel-promotion h2::after,
.panel-contact h2::after {
  content: "";
  display: block;
  width: 140px;
  height: 3px;
  border-radius: 999px;
  background: #ffffff;
  margin: 10px auto 0;
}

/* Generic fade-up keyframes (used everywhere) */
@keyframes wishlistFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   WISHLIST PANEL
   ========================================================= */
.panel-wishlist {
  text-align: center;
}

.panel-wishlist p {
  margin: 0 auto;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.6;
}

.wishlist-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 70px;
  justify-content: center;
}

.wishlist-pill {
  min-width: 200px;
  padding: 12px 46px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.wishlist-pill:hover {
  background: #ffffff;
  color: #F4A91C;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

/* wishlist entrance */
.panel-wishlist h2,
.panel-wishlist p,
.wishlist-actions-row .wishlist-pill {
  opacity: 0;
  transform: translateY(18px);
}
body.right-panel-open .panel-wishlist h2 {
  animation: wishlistFadeUp 520ms cubic-bezier(.2,.9,.2,1) 220ms both;
}
body.right-panel-open .panel-wishlist p {
  animation: wishlistFadeUp 520ms cubic-bezier(.2,.9,.2,1) 320ms both;
}
body.right-panel-open .wishlist-actions-row .wishlist-pill:nth-child(1) {
  animation: wishlistFadeUp 520ms cubic-bezier(.2,.9,.2,1) 440ms both;
}
body.right-panel-open .wishlist-actions-row .wishlist-pill:nth-child(2) {
  animation: wishlistFadeUp 520ms cubic-bezier(.2,.9,.2,1) 520ms both;
}
body.right-panel-open .wishlist-actions-row .wishlist-pill:nth-child(3) {
  animation: wishlistFadeUp 520ms cubic-bezier(.2,.9,.2,1) 600ms both;
}

/* =========================================================
   PARTNER PANEL
   ========================================================= */
.partner-tagline {
  margin: 22px auto 6px;
  max-width: 540px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
}

.partner-text {
  margin: 0 auto;
  max-width: 860px;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
}

.partner-actions {
  justify-content: center;
  margin-top: 48px;
}

/* partner entrance */
.panel-partner h2,
.panel-partner p,
.panel-partner .wishlist-pill {
  opacity: 0;
  transform: translateY(18px);
}
body.right-panel-open .panel-partner h2 {
  animation: wishlistFadeUp 520ms cubic-bezier(.2,.9,.2,1) 180ms both;
}
body.right-panel-open .panel-partner p {
  animation: wishlistFadeUp 520ms cubic-bezier(.2,.9,.2,1) 260ms both;
}
body.right-panel-open .panel-partner .wishlist-pill:nth-child(1) {
  animation: wishlistFadeUp 520ms cubic-bezier(.2,.9,.2,1) 380ms both;
}
body.right-panel-open .panel-partner .wishlist-pill:nth-child(2) {
  animation: wishlistFadeUp 520ms cubic-bezier(.2,.9,.2,1) 460ms both;
}

/* =========================================================
   PROMOTION PANEL – COMPACT (fits in viewport)
   ========================================================= */
.panel-promotion {
  text-align: center;
}

/* Slightly smaller lead, tighter line height */
.panel-promotion .promo-lead {
  margin: 10px auto 0;
  max-width: 720px;
  font-size: 15px;
  line-height: 1.45;
}

/* Layout: cabins left, ship + cards right */
.promo-layout {
  margin-top: 26px;             /* pulled up to save height */
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  column-gap: 28px;
  align-items: flex-start;
}

/* Cabin cards */
.promo-cabins {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.promo-cabin-card {
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.16);
  overflow: hidden;
}

.promo-cabin-image img {
  display: block;
  width: 100%;
  height: 110px;                /* smaller to save vertical space */
  object-fit: cover;
}

.promo-cabin-body {
  padding: 8px 14px 12px;
  color: #111827;
  text-align: left;
}

.promo-cabin-body h3 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
}

.promo-underline {
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 999px;
  background: #189DD8;
}

/* Right side */
.promo-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Ship image – capped height so panel fits onscreen */
.promo-ship {
  width: 100%;
  max-width: 780px;
  max-height: 200px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}

/* Offer cards */
.promo-cards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}

.promo-card {
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.2);
  overflow: hidden;
  width: min(250px, 100%);
  text-align: left;
}

.promo-card-image img {
  display: block;
  width: 100%;
  height: 140px;                /* smaller height */
  object-fit: cover;
}

.promo-card-body {
  padding: 12px 16px 14px;
  color: #111827;
}

.promo-card-body h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
}

.promo-meta-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px;
  color: #6b7280;
}

.promo-price-row {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  align-items: baseline;
}

.promo-price-label {
  font-size: 11px;
  color: #6b7280;
}
.promo-price {
  font-size: 15px;
  font-weight: 700;
  color: #189DD8;
}

/* Book now button */
.promo-cta-row {
  margin-top: 20px;          /* tighter */
  display: flex;
  justify-content: center;
}
.promo-cta {
  background: #189DD8;
  border-color: #189DD8;
}
.promo-cta:hover {
  background: #ffffff;
  color: #189DD8;
}

/* PROMO entrance – strict top → bottom, SLOWER */
.panel-promotion h2,
.panel-promotion .promo-lead,
.panel-promotion .promo-layout,
.panel-promotion .promo-cta-row {
  opacity: 0;
  transform: translateY(18px);
}

/* 1) heading */
body.right-panel-open .panel-promotion h2 {
  animation: wishlistFadeUp 720ms cubic-bezier(.2,.9,.2,1) 260ms both;
}

/* 2) lead paragraph */
body.right-panel-open .panel-promotion .promo-lead {
  animation: wishlistFadeUp 720ms cubic-bezier(.2,.9,.2,1) 380ms both;
}

/* 3) main layout (cabins + ship/cards together) */
body.right-panel-open .panel-promotion .promo-layout {
  animation: wishlistFadeUp 720ms cubic-bezier(.2,.9,.2,1) 540ms both;
}

/* 4) Book now button */
body.right-panel-open .panel-promotion .promo-cta-row {
  animation: wishlistFadeUp 720ms cubic-bezier(.2,.9,.2,1) 720ms both;
}

/* =========================================================
   CONTACT PANEL – narrower card + clean focus
   ========================================================= */
.panel-contact {
  text-align:left;
  max-width: 1040px;              /* give the overlay more breathing room */
  margin: 0 auto;
}

.panel-contact h2{
  text-align: center;
  margin: 0;
}

.contact-layout{
  margin-top: 26px;
  display: grid;
  grid-template-columns: minmax(240px, 0.30fr) minmax(520px, 0.70fr) minmax(240px, 0.30fr);
  column-gap: 34px;
  align-items: start;
}

/* left info */
.panel-contact .contact-info{
  grid-column: 1;
  padding-top: 10px;            /* aligns with top of card */
}
/* left info */
.contact-heading-panel {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 18px;
}

.contact-line {
  margin: 0 0 12px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-line a {
  color: #ffffff;
  text-decoration: underline;
}

.contact-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #ffffff;
  display: inline-block;
}
.contact-icon--user { background: #189DD8; }
.contact-icon--mail { background: #22c55e; }

.contact-whatsapp {
  margin-top: 24px;
  background: #189DD8;
  border-color: #189DD8;
}

/* right card – place in the CENTER column, no auto-push right */
.contact-card{
  grid-column: 2;

  background: #ffffff;
  border-radius: 32px;
  padding: 22px 24px 22px;
  box-shadow: 0 24px 58px rgba(0,0,0,0.22);
  color: #111827;

  width: 100%;
  max-width: 640px;

  margin: 0 auto;               /* centers inside column 2 */
}

/* rows */
.contact-form-row{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:14px;
}
.contact-form-row--two{
  flex-direction:row;
  gap:16px;
}
.contact-form-row--bottom{
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  margin-top:8px;
}

.contact-field{
  position:relative;
  flex:1;
}

/* Inputs – NO orange outline, softer focus */
.contact-field input,
.contact-field textarea {
  width: 100%;
  padding: 14px 16px 10px;
  border-radius: 20px;
  border: 2px solid rgba(209,213,219,0.9);
  background: #ffffff;
  font-size: 14px;
  outline: none;
  box-shadow: none;
  transition: border-color .18s ease,
              box-shadow .18s ease,
              background .18s ease;
}

.contact-field textarea {
  resize: vertical;
  min-height: 110px;
}

/* floating labels */
.contact-field label {
  position: absolute;
  left: 18px;
  top: 12px;
  font-size: 13px;
  color: #9ca3af;
  pointer-events: none;
  transition: all .18s ease;
  background: #ffffff;     /* <--- NEW: hide border behind label */
  padding: 0 6px;  
}

.contact-field input:focus,
.contact-field textarea:focus {
  background: #ffffff;
  border-color: #189DD8;
  box-shadow: 0 0 0 1px rgba(24,157,216,0.18);
}

/* kill Firefox orange invalid glow */
.contact-field input:required:invalid,
.contact-field textarea:required:invalid,
.contact-field input:-moz-ui-invalid,
.contact-field textarea:-moz-ui-invalid {
  box-shadow: none;
  border-color: rgba(209,213,219,0.9);
}

/* float labels when filled or focused */
.contact-field input:focus + label,
.contact-field input:not(:placeholder-shown) + label,
.contact-field textarea:focus + label,
.contact-field textarea:not(:placeholder-shown) + label {
  top: -8px;
  font-size: 11px;
  color: #189DD8;
}

/* checkbox */
.contact-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
}
.contact-checkbox input { display: none; }

.contact-checkbox-box {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 2px solid #d1d5db;
  background: #f9fafb;
  position: relative;
}
.contact-checkbox input:checked + .contact-checkbox-box {
  border-color: #189DD8;
  background: #189DD8;
}
.contact-checkbox input:checked + .contact-checkbox-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 7px;
  height: 13px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* submit */
.contact-submit {
  padding: 10px 32px;
  border-radius: 999px;
  border: none;
  background: #189DD8;
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
  font-size: 15px;
  box-shadow: 0 14px 32px rgba(24,157,216,0.32);
  transition: transform 0.16s ease,
              box-shadow 0.16s ease,
              background 0.16s ease;
}
.contact-submit:hover {
  transform: translateY(-2px);
  background: #0ea5e9;
  box-shadow: 0 18px 40px rgba(24,157,216,0.38);
}

/* CONTACT entrance – header → info → form, SLOWER */
.panel-contact h2,
.contact-info,
.contact-card {
  opacity: 0;
  transform: translateY(18px);
}

/* 1) heading */
body.right-panel-open .panel-contact h2 {
  animation: wishlistFadeUp 720ms cubic-bezier(.2,.9,.2,1) 260ms both;
}

/* 2) left contact info */
body.right-panel-open .panel-contact .contact-info {
  animation: wishlistFadeUp 720ms cubic-bezier(.2,.9,.2,1) 420ms both;
}

/* 3) form card last */
body.right-panel-open .panel-contact .contact-card {
  animation: wishlistFadeUp 720ms cubic-bezier(.2,.9,.2,1) 580ms both;
}


/* ============================
   RIGHT PANEL OPEN STATES
   ============================ */
body.right-panel-open .right-panel-overlay { display:block; pointer-events:auto; opacity:1; }
body.right-panel-open .right-panel-overlay::before { opacity:1; }

body.right-panel-open .right-strip {
  width: calc(84px + 85px);
  box-shadow: -6px 0 28px rgba(0,0,0,0.1);
  border-left: 1px solid rgba(255,255,255,0.9);
}

body.right-panel-open .right-panel {
  pointer-events: auto;
  right: 84px; 
  animation: panelSlideIn 820ms cubic-bezier(.16,1,.3,1) forwards;
}

/* Panel Content Animations */
body.right-panel-open .right-panel__title {
  animation: titleIn 420ms cubic-bezier(.2,.9,.2,1) 320ms both;
}

body.right-panel-open .right-panel__edge-close {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

body.right-panel-open .right-panel__card:nth-child(1){ animation-delay: 620ms; }
body.right-panel-open .right-panel__card:nth-child(2){ animation-delay: 740ms; }
body.right-panel-open .right-panel__card:nth-child(3){ animation-delay: 860ms; }
body.right-panel-open .right-panel__card:nth-child(4){ animation-delay: 980ms; }

/* Strip Button States When Panel Open */
body.right-panel-open .right-strip button::before {
  transform: translateX(0);
  opacity: 1;
}

body.right-panel-open .right-strip button:not(.active) {
  background: #F4A91C !important;
  color: #fff !important;
}

body.right-panel-open .right-strip button.active {
  background: #189DD8 !important;
  color: #fff !important;
}

body.right-panel-open .right-strip button:not(.active)::before {
  background: #F4A91C !important;
  color: #fff !important;
}

body.right-panel-open .right-strip button.active::before {
  background: #189DD8 !important;
  color: #fff !important;
}

/* ============================
   RIGHT PANEL CLOSING STATES
   ============================ */
body.right-panel-closing .right-panel-overlay::before { opacity:0; transition: opacity 520ms ease; }

body.right-panel-closing .right-panel {
  animation: panelSlideOut 720ms cubic-bezier(.4,0,.2,1) forwards;
  right: 84px;
}

body.right-panel-closing .right-panel__title { animation: titleOut 300ms cubic-bezier(.4,0,.2,1) 20ms both; }
body.right-panel-closing .right-panel__content h2,
body.right-panel-closing .right-panel__content p { animation: contentOut 320ms cubic-bezier(.4,0,.2,1) both; }
body.right-panel-closing .right-panel__card { animation: cardOut 420ms cubic-bezier(.4,0,.2,1) forwards; }
body.right-panel-closing .right-panel__card:nth-child(1){ animation-delay: 40ms; }
body.right-panel-closing .right-panel__card:nth-child(2){ animation-delay: 120ms; }
body.right-panel-closing .right-panel__card:nth-child(3){ animation-delay: 200ms; }
body.right-panel-closing .right-panel__card:nth-child(4){ animation-delay: 260ms; }

body.right-panel-closing .right-strip {
  width: 84px;
  box-shadow: none;
  transition: width 260ms cubic-bezier(.4,0,.2,1);
}

body.right-panel-closing .right-strip button::before {
  transform: translateX(84px);
  opacity: 0;
}
body.right-panel-closing .right-panel__edge-close {
  opacity: 0;
  transform: translateY(-6px) scale(.96);
  pointer-events: none;
}

/* ============================
   PAGE LOAD ANIMATIONS
   ============================ */
@keyframes headerItemEnter {
  0% {
    opacity: 0;
    transform: translate3d(-56px, -18px, 0) rotate(-1.2deg);
  }
  55% {
    opacity: 1;
    transform: translate3d(10px, 2px, 0) rotate(0.3deg);
  }
  78% {
    opacity: 1;
    transform: translate3d(-4px, 0, 0) rotate(-0.1deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@keyframes headerMetaEnter {
  0% {
    opacity: 0;
    transform: translateY(-50%) translate3d(-56px, -18px, 0) rotate(-1.2deg);
  }
  55% {
    opacity: 1;
    transform: translateY(-50%) translate3d(10px, 2px, 0) rotate(0.3deg);
  }
  78% {
    opacity: 1;
    transform: translateY(-50%) translate3d(-4px, 0, 0) rotate(-0.1deg);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) translate3d(0, 0, 0) rotate(0deg);
  }
}

/* initial hidden state for normal header items */
.site-header .brand,
.site-header .header-socials,
.site-header .search-wrap,
.site-header .user-menu,
.site-header .profile {
  opacity: 0;
  transform: translate3d(-56px, -18px, 0) rotate(-1.2deg);
  will-change: opacity, transform;
}

/* office hours needs its own transform preserved */
.site-header .header-meta-float {
  opacity: 0;
  transform: translateY(-50%) translate3d(-56px, -18px, 0) rotate(-1.2deg);
  will-change: opacity, transform;
}

/* staggered desktop header entrance */
body.page-loaded .site-header .brand {
  animation: headerItemEnter 1180ms cubic-bezier(.22,1,.36,1) 140ms both;
}

body.page-loaded .site-header .header-socials {
  animation: headerItemEnter 1180ms cubic-bezier(.22,1,.36,1) 260ms both;
}

body.page-loaded .site-header .search-wrap {
  animation: headerItemEnter 1180ms cubic-bezier(.22,1,.36,1) 380ms both;
}

body.page-loaded .site-header .header-meta-float {
  animation: headerMetaEnter 1180ms cubic-bezier(.22,1,.36,1) 500ms both;
}

body.page-loaded .site-header .user-menu,
body.page-loaded .site-header .profile {
  animation: headerItemEnter 1180ms cubic-bezier(.22,1,.36,1) 620ms both;
}

.hero-cta-row,
.hero-middle-row,
.hero-inner,
.hero .hero-overlay {
  opacity: 0;
  transform: translateY(10px);
  will-change: opacity, transform, filter;
}

.right-strip {
  transform: translateX(-110vw);
  opacity: 0;
  will-change: transform, opacity;
}

.right-strip .main-buttons button,
.right-strip .top-btn {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  will-change: opacity, transform;
}

.hero { will-change: background-position, opacity; }

.menu-right .tile,
.menu-right .collage-caption {
  opacity: 0;
  transform: translateY(8px);
  will-change: opacity, transform, filter;
}

body.page-loaded .hero-overlay {
  animation: fadeInUp 700ms cubic-bezier(.2,.9,.2,1) 320ms both;
}

body.page-loaded .hero-inner { animation: fadeInUp 700ms cubic-bezier(.2,.9,.2,1) 420ms both; }

body.page-loaded .hero-middle-row { animation: fadeInUp 720ms cubic-bezier(.2,.9,.2,1) 540ms both; }
body.page-loaded .hero-middle-row .arrow-buttons { animation: popIn 520ms cubic-bezier(.2,.9,.2,1) 600ms both; }
body.page-loaded .hero-middle-row .flipbook-btn { animation: popIn 650ms cubic-bezier(.2,.9,.2,1) 920ms both; }

@media (min-width: 431px){
  body.page-loaded .hero-cta-row { animation: fadeInUp 780ms cubic-bezier(.2,.9,.2,1) 720ms both; }

  body.page-loaded .hero-cta-row .btn { 
    opacity: 0;
    transform: translateY(14px) scale(.996);
  }

  body.page-loaded .hero-cta-row .btn:nth-child(1){ animation: popIn 520ms cubic-bezier(.2,.9,.2,1) 820ms both; }
  body.page-loaded .hero-cta-row .btn:nth-child(2){ animation: popIn 520ms cubic-bezier(.2,.9,.2,1) 880ms both; }
  body.page-loaded .hero-cta-row .btn:nth-child(3){ animation: popIn 520ms cubic-bezier(.2,.9,.2,1) 940ms both; }
  body.page-loaded .hero-cta-row .btn:nth-child(4){ animation: popIn 520ms cubic-bezier(.2,.9,.2,1) 1000ms both; }
  body.page-loaded .hero-cta-row .btn:nth-child(5){ animation: popIn 520ms cubic-bezier(.2,.9,.2,1) 1060ms both; }
  body.page-loaded .hero-cta-row .btn:nth-child(6){ animation: popIn 520ms cubic-bezier(.2,.9,.2,1) 1120ms both; }
}

body.page-loaded .right-strip {
  animation: slideInRightStrip 1500ms cubic-bezier(.16,1,.3,1) 150ms both;
}

body.page-loaded .right-strip .main-buttons button:nth-child(1){ animation: popIn 650ms cubic-bezier(.2,.9,.2,1) 500ms both; }
body.page-loaded .right-strip .main-buttons button:nth-child(2){ animation: popIn 650ms cubic-bezier(.2,.9,.2,1) 580ms both; }
body.page-loaded .right-strip .main-buttons button:nth-child(3){ animation: popIn 650ms cubic-bezier(.2,.9,.2,1) 660ms both; }
body.page-loaded .right-strip .main-buttons button:nth-child(4){ animation: popIn 650ms cubic-bezier(.2,.9,.2,1) 740ms both; }
body.page-loaded .right-strip .top-btn.is-visible {
  animation: popIn 650ms cubic-bezier(.2,.9,.2,1);
}

/* Defensive: ensure nothing is forcibly hidden after page-loaded */
body.page-loaded .hero-cta-row,
body.page-loaded .hero-middle-row,
body.page-loaded .right-strip {
  opacity: 1;
  transform: none;
}

/* ============================
   SUN & SEA FOOTER
============================ */

.ss-footer {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* ---------- TOP BLUE LAYER ---------- */
.ss-footer-top {
  background: #189DD8;
  color: #fff;
  padding: 50px 60px;
  display: grid;
  grid-template-columns: 1fr 6px 1fr 6px 1fr;
  align-items: start;
  gap: 40px;
}

/* Titles */
.ss-footer-title {
  font-size: 20px;
  margin: 0 0 20px 0;
  font-weight: 700;
  line-height: 1.4;
}

/* Left/right column styling */
.ss-footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Vertical dividers */
.ss-footer-divider {
  width: 2px;
  background: rgba(255,255,255,0.5);
  height: 120px;
  margin: auto 0;
  border-radius: 10px;
}

/* Links */
.ss-footer-link {
  color: #fff;
  text-decoration: underline;
  font-size: 15px;
  line-height: 1.5;
}

.ss-footer-link:hover {
  opacity: 0.9;
  transform: translateX(10px) scale(1.1);
}

/* Arrow link (Join now →) */
.ss-footer-arrow {
  font-weight: 700;
  margin-top: 6px;
}

/* ---------- SOCIAL ICONS ---------- */

.ss-footer-icons {
  display: flex;
  gap: 5px;
  align-items: center;
}

.ss-footer-icons img {
  width: 80px;           /* adjust size as needed */
  height: 80px;
  object-fit: contain;
  transition: transform 0.18s cubic-bezier(.2,.9,.2,1),
              opacity 0.18s ease;
}

.ss-icon:hover img {
  transform: translateY(-4px) scale(1.3);
}

/* ---------- BOTTOM COPYRIGHT ---------- */

.ss-footer-bottom {
  background: #189DD8;
  color: #fff;
  text-align: center;
  padding: 14px 0;
  font-size: 14px;
  border-top: 1px solid rgba(255,255,255,0.25);
}


/* Middle image banner */
.footer-banner {
  width: 100%;
  line-height: 0;
  background: #000;
}
.footer-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* Bottom layer (smallest, blue, copyright) */
.footer-bottom {
  width: 100%;
  background: #189DD8;
  color: #ffffff;
  text-align: center;
  padding: 10px 16px;
  font-size: 14px;
  letter-spacing: .2px;
}

/* =========================================================
   HIDDEN
   ========================================================= */
@media (min-width: 431px) {
  .hero-cta-toggle{
    display: none !important;
  }
  .hero-copy{
    display: none !important;
  }
  .mobile-header-extra{
    display: none !important;
  }
}

/* =========================================================
   MOBILE PORTRAIT
   ========================================================= */
@media (max-width: 430px) and (orientation: portrait) {
  /* ---------------------------------
     1) Global safety + hide scrollbar visuals
     --------------------------------- */
  html, body{
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  body{ scrollbar-width: none !important; } /* Firefox */
  body::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

    /* hide desktop header items */
  .header-socials{
    display: none !important;
  }

  .header-meta-float{
    display: none !important;
  }


  /* ---------------------------------
     2) MOBILE TOAST (same colors, better size/position)
     --------------------------------- */
  #messages{
    position: fixed !important;
    top: calc(env(safe-area-inset-top) + 8rem) !important; 
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 70000 !important;

    width: min(92vw, 20rem) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.6rem !important;
  }

  .msg{
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;

    font-size: 0.85rem !important;
    line-height: 1.25 !important;

    padding: 0.7rem 0.9rem 0.7rem 2.7rem !important;
    border-radius: 999px !important;

    box-shadow: 0 0.875rem 2.125rem rgba(15,23,42,0.32) !important; 
  }

  .msg::before{
    left: 0.85rem !important;
    width: 1.4rem !important;
    height: 1.4rem !important;
    font-size: 0.8rem !important;
  }

  /* ---------------------------------
    3) HEADER
    --------------------------------- */
  @keyframes mobileHeaderItemIn {
    0% {
      opacity: 0;
      transform: translate3d(0,-18px,0);
      filter: blur(0);
    }
    100% {
      opacity: 1;
      transform: translate3d(0,0,0);
      filter: blur(0);
    }
  }

  @keyframes mobileHeaderShellIn {
    0% {
      opacity: 0;
      transform: translate3d(0,-20px,0);
    }
    100% {
      opacity: 1;
      transform: translate3d(0,0,0);
    }
  }

  /* keep the shell visible at all times */
  .site-header{
    position: fixed !important;
    top: calc(env(safe-area-inset-top) + 0.5rem) !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
    z-index: 60000 !important;

    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "menu brand user"
      "search search search"
      "extra extra extra" !important;

    align-items: center !important;
    column-gap: 0.6rem !important;
    row-gap: 0.4rem !important;

    padding: 0.5rem 0.3rem 0.45rem !important;
    border-radius: 1.25rem !important;

    background: rgba(0,0,0,0.70) !important;
    border: 0.0625rem solid rgba(255,255,255,0.22) !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    overflow: hidden !important;

    opacity: 0;
    transform: translate3d(0,-14px,0);
    filter: none;
    will-change: opacity, transform;
    transition:
      padding 220ms ease,
      border-radius 220ms ease,
      background 220ms ease,
      box-shadow 220ms ease !important;
  }

  .site-header.mobile-extra-open{
    padding-bottom: 0.45rem !important;
  }

  body.page-loaded .site-header{
    animation: mobileHeaderShellIn 1000ms cubic-bezier(.22,1,.36,1) 120ms both;
  }

  .site-header .menu-btn,
  .site-header .logo-link,
  .site-header .user-menu,
  .site-header .profile,
  .site-header .mobile-header-extra{
    opacity: 0;
    transform: translate3d(0,-18px,0);
    filter: blur(10px);
    will-change: opacity, transform, filter;
  }

  .site-header .search-wrap .search{
    opacity: 0;
    transform: none;
    filter: none;
    will-change: opacity;
  }

  /* play animation when loaded */
  body.page-loaded .site-header .menu-btn,
  body.page-loaded .site-header .logo-link,
  body.page-loaded .site-header .search-wrap .search,
  body.page-loaded .site-header .user-menu,
  body.page-loaded .site-header .profile,
  body.page-loaded .site-header .mobile-header-extra{
    animation: mobileHeaderItemIn 860ms cubic-bezier(.22,1,.36,1) both;
  }

  /* stagger */
  body.page-loaded .site-header .menu-btn{ animation-delay: 360ms; }
  body.page-loaded .site-header .logo-link{ animation-delay: 360ms; }
  body.page-loaded .site-header .search-wrap .search{ animation-delay: 360ms; }
  body.page-loaded .site-header .user-menu,
  body.page-loaded .site-header .profile{ animation-delay: 360ms; }

  .site-header .brand{
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-header .menu-btn{
    grid-area: menu !important;
    justify-self: start !important;
    margin: 0 !important;

    padding: 0.45rem 0.55rem !important;
    border-radius: 0.8rem !important;

    display: block !important;
    font-size: clamp(0.9375rem, 3.7vw, 1.0625rem);
  }

  .site-header .menu-label{ display: none !important; }

  .site-header .logo-link{
    grid-area: brand !important;
    justify-self: stretch !important;
    align-self: center !important;

    width: 100% !important;
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .site-header .profile{
    margin-left: 0 !important;
    justify-self: end !important;
  }

  .site-header .logo{
    content: url("../images/whitelogo.png") !important;
    height: 2.6rem !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* ✅ CRITICAL: allow grid items to shrink (prevents overflow off-screen) */
  .site-header > *{
    min-width: 0 !important;
  }

  .site-header .profile,
  .site-header .user-menu{
    grid-area: user !important;
    justify-self: end !important;

    min-width: 0 !important;
    max-width: min(40vw, 10.75rem) !important;  /* ✅ tighter so it won't invade logo */
  }

  .site-header .user-pill{
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;

    min-width: 4.25rem !important;  /* ✅ enough for "Hi" */
    max-width: 100% !important;

    padding: 0.45rem 0.75rem !important;
    font-size: clamp(0.9rem, 3.6vw, 1rem) !important;

    overflow: hidden !important;
  }

  .site-header .user-pill__label{
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .user-menu{ position: relative !important; }

  .user-menu-dropdown{
    position: absolute !important;
    right: 0 !important;
    left: auto !important;

    top: calc(100% + 0.625rem + 4rem) !important; 

    width: min(78vw, 12rem) !important;
    min-width: 0 !important;
    padding: 0.6rem !important;
    border-radius: 1.05rem !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;

    background: rgba(0,0,0,0.55) !important;
    border: none !important;

    backdrop-filter: blur(0.875rem) saturate(1.25) !important; 
    -webkit-backdrop-filter: blur(0.875rem) saturate(1.25) !important;

    box-shadow:
      0 1.125rem 2.75rem rgba(0,0,0,0.40), 
      inset 0 0.0625rem 0 rgba(255,255,255,0.08) !important; 

    max-height: min(42vh, 16rem) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;

    z-index: 99999 !important;

    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem); 
    transition:
      opacity 150ms ease,
      transform 150ms ease,
      visibility 0s linear 150ms;
  }

  .user-menu-dropdown.is-open{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .user-menu-item{
    width: 100%;
    text-align: center !important;

    padding: 0.6rem 0.9rem !important;
    border-radius: 999px !important;

    background: rgba(255,255,255,0.18) !important;
    border: 0.125rem solid rgba(255,255,255,0.70) !important; 

    color: #fff !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.0125rem !important; 
    text-decoration: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-shadow: 0 0.0625rem 0.125rem rgba(0,0,0,0.35) !important;

    transition:
      background 160ms ease,
      transform 120ms ease,
      border-color 160ms ease,
      box-shadow 160ms ease !important;
  }

  .site-header .search-wrap{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;

    display: flex !important;
    grid-area: search !important;

    margin: 0 !important;
    width: 100% !important;
    max-width: 500px !important;

    height: clamp(2.35rem, 10.5vw, 2.75rem) !important;
  }

  .site-header .search-wrap .search{
    width: 100% !important;
    height: clamp(2.35rem, 10.5vw, 2.75rem) !important;
    padding: 0 1rem !important;
    font-size: 1rem !important;
    border-radius: 999px !important;
    scale: 1 !important;
  }
  
  .search-wrap .search:hover,
  .search-wrap .search:focus {
    transform: translateY(-2px) scale(1.00);
  }

  .search-results{
    position: absolute !important;

    /* ✅ truly centered + equal gutters */
    left: 0.75rem !important;
    right: 0.75rem !important;
    margin-left: auto !important;
    margin-right: auto !important;

    /* ✅ stop any desktop centering transforms */
    transform: none !important;

    /* ✅ control size on mobile */
    width: auto !important;
    max-width: 100% !important;

    top: calc(env(safe-area-inset-top) + 8rem) !important;
    z-index: 65000 !important;

    box-sizing: border-box !important;

    /* ✅ make it feel smaller */
    max-height: min(52vh, 28rem) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;

    /* optional: slightly tighter look */
    border-radius: 1rem !important;
  }

  /* ---------------------------------
    MOBILE HEADER EXTRA (UNDER SEARCH)
  --------------------------------- */
  .mobile-header-extra{
    grid-area: extra !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-header-extra__toggle{
    width: auto !important;
    min-width: 2.25rem !important;
    height: 1.15rem !important;

    margin: 0 auto !important;
    padding: 0 0.3rem !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.28rem !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
    cursor: pointer !important;

    transition: transform 160ms ease !important;
  }

  .mobile-header-extra__chevron{
    display: inline-block !important;

    width: 0.65rem !important;
    height: 0.65rem !important;

    border-right: 0.14rem solid rgba(255,255,255,0.92) !important;
    border-bottom: 0.14rem solid rgba(255,255,255,0.92) !important;

    transform: rotate(45deg) !important;
    transform-origin: center !important;

    transition: transform 180ms ease !important;
  }

  .site-header.mobile-extra-open .mobile-header-extra__chevron{
    transform: rotate(-135deg) !important;
  }

  .mobile-header-extra__panel{
    width: 100% !important;
    max-width: 100% !important;

    max-height: 0 !important;
    overflow: hidden !important;

    opacity: 0 !important;
    transform: translateY(-0.25rem) !important;
    padding-top: 0 !important;

    transition:
      max-height 220ms cubic-bezier(.22,1,.36,1),
      opacity 160ms ease,
      transform 160ms ease,
      padding-top 160ms ease !important;
  }

  .site-header.mobile-extra-open .mobile-header-extra__panel{
    max-height: 5.8rem !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    padding-top: 0.15rem !important;
  }

  .mobile-header-extra__hours{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.38rem !important;

    width: 100% !important;
    margin: 0 auto 0.35rem auto !important;
    padding: 0.1rem 0.4rem !important;

    border-radius: 0 !important;
    text-align: center !important;
  }

  .mobile-header-extra__hours-label{
    display: inline !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.78) !important;
    line-height: 1 !important;
  }

  .mobile-header-extra__hours-text{
    display: inline !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: #fff !important;
    white-space: nowrap !important;
  }

  .mobile-header-extra__socials{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;

    width: 100% !important;
    padding-bottom: 0 !important;
  }

  .mobile-header-extra__icon{
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 999px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    transition:
      transform 140ms ease,
      background 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease !important;
  }

  .mobile-header-extra__icon img{
    width: 3.45rem !important;
    height: 3.45rem !important;
    object-fit: contain !important;
    display: block !important;
  }

  .mobile-header-extra__icon:hover,
  .mobile-header-extra__icon:focus-visible{
    transform: translateY(-2px) !important;
    background: rgba(255,255,255,0.18) !important;
    border-color: rgba(255,255,255,0.28) !important;
    box-shadow:
      0 0 0 0.125rem rgba(255,255,255,0.07),
      0 0.8rem 1.5rem rgba(0,0,0,0.20) !important;
    outline: none !important;
  }

  /* ---------------------------------
     4) Page wrap (space for bottom nav)
     --------------------------------- */
  .page-wrap{
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: calc(clamp(4.2rem, 16vw, 5.2rem) + env(safe-area-inset-bottom) + 1rem) !important;
  }

  /* ---------------------------------
     5) HERO (cover)
     --------------------------------- */
  .home-hero{
    min-height: 100vh;
    min-height: 100svh;
    position: relative !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  .hero-copy{
    width: min(50vw, 16rem);
    margin-left: 0.9rem;
    margin-right: auto;

    text-align: left;

    /* ✅ THIS is the flex-friendly way */
    margin-top: auto !important;

    /* ✅ controls how close it sits to the CTA row */
    margin-bottom: -2rem !important;

    position: relative;
    z-index: 30;

    will-change: transform, opacity;
  }

  .hero-title{
    margin: 0 0 0.35rem 0;
    font-weight: 820;
    letter-spacing: -0.015em;
    line-height: 1.05;

    /* 🔽 smaller + calmer */
    font-size: clamp(1.35rem, 6.4vw, 1.85rem);
    color: #fff;

    text-shadow: 0 0.15rem 0.75rem rgba(0,0,0,0.55);
  }

  .hero-subtitle{
    margin: 0;
    font-size: clamp(0.78rem, 3.25vw, 0.92rem);
    line-height: 1.30;
    color: rgba(255,255,255,0.9);

    /* keeps lines short and elegant */
    max-width: 15.2rem;

    text-shadow: 0 0.15rem 0.75rem rgba(0,0,0,0.55);
  }

  /* initial offscreen state */
  body:not(.page-loaded) .hero-copy{
    opacity: 0;
    transform: translate3d(-70vw, 0, 0) !important;
  }

  /* animate in (same timing as your CTA buttons) */
  body.page-loaded .hero-copy{
    animation: heroCopySlideIn 900ms cubic-bezier(.16,1,.3,1) 500ms both !important;
  }

  @keyframes heroCopySlideIn{
    0%   { transform: translate3d(-70vw, 0, 0); opacity: 0; }
    75%  { transform: translate3d(10px, 0, 0); opacity: 1; }
    100% { transform: translate3d(0, 0, 0); opacity: 1; }
  }

  .home-hero::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:5 !important;

    background-image: url("../images/newmobilehero.jpg") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: 70% 55% !important;

    opacity: 1 !important;

    transform: translate3d(0,0,0) scale(1.0);
    will-change: transform !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-origin: center center;
  }

  body.page-loaded .home-hero::before{
    animation: heroMobileZoomOnly 1400ms cubic-bezier(.22,1,.25,1) both !important;
  }

  @keyframes heroMobileZoomOnly{
    from { transform: translate3d(0,0,0) scale(1.7); }
    to   { transform: translate3d(0,0,0) scale(1.00); }
  }

  .home-hero .hero-overlay{ z-index: 10 !important; }
  .home-hero .hero-inner{ z-index: 20 !important; }

  .hero-inner{
    min-height: 100% !important;     
    padding-top: calc(env(safe-area-inset-top) + 5.4rem) !important;
    padding-bottom: calc(clamp(4.2rem, 16vw, 5.2rem) + env(safe-area-inset-bottom) + 0.25rem) !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 0.75rem !important;
  }
  
  /* PROBLEM HERE */
  .hero-middle-row,
  .hero-cta-row{
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }

  .hero-middle-row .arrow-buttons{ display:none !important; }

  /* ---------------------------------
     6) IMPORTANT RESET (fixes "width not changing")
     --------------------------------- */
  .hero-middle-row .btn,
  .hero-cta-row .btn,
  .hero-cta-toggle{
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;

    height: clamp(2.25rem, 9.5vw, 2.6rem) !important;
    padding: 0 0.55rem !important;

    font-size: 0.75rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    border-radius: 999px !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  .hero-middle-row .btn svg,
  .hero-cta-row .btn svg{
    width: 1.25em !important;
    height: 1.25em !important;
    flex: 0 0 auto !important;
  }

  /* ---------------------------------
     7) Flipbook row (right aligned, SHORT)
     --------------------------------- */
  .hero-middle-row{
    display: none !important;
    padding: 0 !important;
  }

  .hero-middle-row .flipbook-btn{
    background: #f4a91c !important;
    color: #fff !important;
    padding: 0 0.5rem !important;
    min-width: 0 !important;
  }

  body.hero-cta-open .hero-middle-row{ display: none !important; }

  /* ---------------------------------
     8) CTA row (right aligned)
     --------------------------------- */
  .hero-cta-row{
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    box-sizing: border-box !important;
    justify-content: flex-end !important; /* since you want right aligned */

    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.55rem !important;

    position: relative !important;
  }

  .hero-cta-row .hero-cta-toggle{
    order: 1 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;

    height: clamp(2.25rem, 9.5vw, 2.6rem) !important;
    padding: 0 0.85rem !important;
    border-radius: 999px !important;

    background: rgba(0,0,0,0.55) !important;
    border: 0.0625rem solid rgba(255,255,255,0.22) !important; 

    backdrop-filter: blur(0.625rem) !important;      
    -webkit-backdrop-filter: blur(0.625rem) !important; 

    color: #fff !important;
    font-weight: 850 !important;
    white-space: nowrap !important;

    box-shadow: 0 0.75rem 1.625rem rgba(0,0,0,0.25) !important; 
  }

  .hero-cta-row .cta-break{
    order: 2 !important;
    flex: 0 0 100% !important;
    height: 0 !important;
  }

  .hero-cta-row .btn.flipbook-inline{
    order: 3 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;

    padding: 0 0.80rem !important;
    background: #f4a91c !important;
    color: #fff !important;
    font-weight: 900 !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
  }

  .hero-cta-row .btn.primary{
    order: 4 !important;
    flex: 0 0 auto !important;

    padding: 0 0.95rem !important;
    background: #f4a91c !important;
    color: #fff !important;
    font-weight: 900 !important;
  }

  .hero-cta-row .btn svg{
    width: 1.15em !important;
    height: 1.15em !important;
    flex: 0 0 auto !important;
  }

  /* ================================
    MEMBERSHIP PILLS — FINAL STAGGER
    ================================ */
  .hero-pills{
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;

    position: absolute !important;
    right: 0.5rem !important;
    bottom: calc(100% + 0.65rem) !important;

    width: min(62vw, 17rem) !important;
    padding: 0.75rem !important;

    border-radius: 1.25rem !important;
    background: rgba(0,0,0,0.55) !important;
    border: 0.0625rem solid rgba(255,255,255,0.16) !important;
    box-shadow: 0 1.125rem 3rem rgba(0,0,0,0.38) !important;

    backdrop-filter: blur(0.75rem) !important;
    -webkit-backdrop-filter: blur(0.75rem) !important;

    z-index: 9999 !important;
    will-change: transform, opacity !important;

    /* CLOSED */
    opacity: 0 !important;
    transform: translate3d(0, 14px, 0) scale(0.98) !important;
    pointer-events: none !important;
    visibility: hidden !important;

    transition: transform 220ms cubic-bezier(.16,1,.3,1),
                opacity 160ms ease,
                visibility 0s linear 220ms !important;
  }

  body.hero-cta-open .hero-pills{
    /* OPEN */
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    pointer-events: auto !important;
    visibility: visible !important;

    transition: transform 260ms cubic-bezier(.16,1,.3,1),
                opacity 180ms ease,
                visibility 0s linear 0s !important;
  }

  /* pills same size */
  .hero-pills .btn.pill{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }

  body:not(.hero-cta-open) .hero-pills .btn.pill{
    opacity: 0 !important;
    transform: translateY(14px) !important;
    animation: none !important;
  }

  /* open tray */
  body.hero-cta-open .hero-pills{
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  /* uniform pill size */
  .hero-pills .btn.pill{
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* open = stagger in */
  body.hero-cta-open .hero-pills .btn.pill{
    animation: pillStaggerUp 360ms cubic-bezier(.16,1,.3,1) both !important;
  }

  body.hero-cta-open .hero-pills .btn.pill:nth-child(1){ animation-delay: 60ms !important; }
  body.hero-cta-open .hero-pills .btn.pill:nth-child(2){ animation-delay: 120ms !important; }
  body.hero-cta-open .hero-pills .btn.pill:nth-child(3){ animation-delay: 180ms !important; }
  body.hero-cta-open .hero-pills .btn.pill:nth-child(4){ animation-delay: 240ms !important; }
  body.hero-cta-open .hero-pills .btn.pill:nth-child(5){ animation-delay: 300ms !important; }

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

  /* =========================================
     A) KILL DESKTOP CTA ANIMS ON MOBILE
     ========================================= */
  body.page-loaded .hero-cta-row{
    animation: none !important;
  }

  body.page-loaded .hero-cta-row .btn{
    animation: none !important;
  }

  /* =========================================
    MOBILE CTA ENTRANCE (SYNCED)
    ========================================= */

  /* initial offscreen state */
  body:not(.page-loaded) 
  #heroCtaToggle,
  body:not(.page-loaded) 
  .hero-cta-row > .btn.primary,
  body:not(.page-loaded) 
  .hero-cta-row .btn.flipbook-inline{
    opacity: 0;
    transform: translate3d(-70vw, 0, 0) !important;
  }

  /* GROUP 1 — toggle + become member (together) */
  body.page-loaded #heroCtaToggle,
  body.page-loaded .hero-cta-row > .btn.primary,
  body.page-loaded .hero-cta-row .btn.flipbook-inline{
    animation: heroBtnSlideIn 900ms cubic-bezier(.16,1,.3,1) 500ms both !important;
  }

  @keyframes heroBtnSlideIn{
    0%   { transform: translate3d(-70vw, -10px, 0); opacity: 0; }
    75%  { transform: translate3d(10px, -10px, 0); opacity: 1; }
    100% { transform: translate3d(0, -10px, 0); opacity: 1; }
  }

  /* =========================================
     MENU — MOBILE FULLSCREEN
     ========================================= */
  .menu-overlay{
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 80000 !important;

    bottom: calc(clamp(4.2rem, 16vw, 5.2rem) + env(safe-area-inset-bottom)) !important;

    padding:
      calc(env(safe-area-inset-top) + 0.5rem)
      0.4rem
      0.4rem
      0.4rem !important;

    align-items: stretch !important;
    justify-content: center !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition:
      opacity 220ms ease,
      visibility 0s linear 220ms !important;
  }

  .menu-overlay .menu-panel{
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;

    border-radius: 1.35rem !important;
    overflow: hidden !important;

    clip-path: circle(0% at 0 0);
    -webkit-clip-path: circle(0% at 0 0);
    pointer-events: auto !important;
  }

  body.menu-open{
    overflow: hidden !important;
    touch-action: none !important;
  }

  .menu-panel .menu-inner{
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: 100% !important;
    min-height: 0 !important;
  }

  /* ---------------------------------
     Menu top chrome (close + logo)
     --------------------------------- */
  .menu-panel .menu-close{
    right: 0.75rem !important;         
    top: 0.0625rem !important;             
    font-size: 2.125rem !important;       
    padding: 0.5rem 0.625rem !important;    
    border-radius: 0.75rem !important;    
    z-index: 50 !important;
  }

  .menu-left__logo{
    position: absolute !important;
    top: clamp(0.25rem, 2.5vw, 0.5rem) !important; 
    left: 0.875rem !important;                     
    z-index: 40 !important;
  }

  .menu-left__logo-img{
    height: 4rem !important;
    max-height: 12vw !important;
    width: auto !important;
  }

  /* =========================================
     TOP (ORANGE) — PREMIUM TILE GRID (ALL VISIBLE)
     ========================================= */
  .menu-left{
    border-right: none !important;
    border-bottom: 0.0625rem solid rgba(255,255,255,0.16) !important; 

    background: #F4A91C !important;

    padding: 3.5rem 0.125rem 0.125rem !important; 

    flex: 0 0 auto !important;
    height: clamp(13.75rem, 22vh, 15rem) !important; 
    min-height: 0 !important;

    overflow: hidden !important;
    position: relative !important;
  }

  .menu-left .menu-items{
    position: static !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: auto !important;
    overflow: hidden !important;
  }

  .menu-left .menu-items ul{
    list-style: none !important;
    margin: 0 !important;

    padding: 0.625rem 0.5rem 0.5rem !important; 

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 1fr) !important;

    gap: 0.5rem !important; 
    height: 100% !important;
    align-items: stretch !important;
  }

  .menu-left .menu-items li{ min-width: 0 !important; }

  .menu-left .menu-items a,
  .menu-left .menu-items a *{
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
  }

  .menu-left .menu-items a{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 2.75rem !important;    

    padding: 0.625rem 0.75rem !important;   
    border-radius: 1.125rem !important;    

    background: rgba(255,255,255,0.12) !important;
    border: 0.0625rem solid rgba(255,255,255,0.22) !important; 

    color: rgba(255,255,255,0.98) !important;
    font-weight: 800 !important;
    font-size: clamp(0.70rem, 2.7vw, 0.84rem) !important;
    line-height: 1.12 !important;

    text-decoration: none !important;

    text-overflow: clip !important;
    overflow: hidden !important;

    box-shadow: none !important;
    text-shadow: none !important;

    transition: transform 140ms cubic-bezier(.2,1,.2,1),
                background 180ms ease,
                border-color 180ms ease,
                color 180ms ease !important;

    -webkit-tap-highlight-color: transparent !important;
  }

  .menu-left .menu-items a.active{
    color: #0b1020 !important;
    background: rgba(255,255,255,0.92) !important;
    border-color: rgba(255,255,255,0.0) !important;
    box-shadow: none !important;
    transform: scale(1.05) !important;
  }

  .menu-left .menu-items a .menu-tile__text{
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;

    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: normal !important;

    text-align: center !important;
    max-width: 100% !important;

    transform: translateY(0.0625rem) !important;
  }

  @keyframes menuItemDramaticMobile{
    0%   { opacity: 0; transform: translateY(0.625rem) scale(0.985); }
    70%  { opacity: 1; transform: translateY(-0.125rem) scale(1.01); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }

  .menu-left .menu-items li{
    opacity: 1;
    transform: none;
    filter: none;
  }

  body.menu-open .menu-left .menu-items li{
    animation-name: menuItemDramaticMobile !important;
    animation-duration: 950ms !important;
    animation-timing-function: cubic-bezier(.16,1,.3,1) !important;
    animation-fill-mode: both !important;
    will-change: transform, opacity !important;
  }

  body.menu-open .menu-left .menu-items li:nth-child(1){ animation-delay: 460ms !important; }
  body.menu-open .menu-left .menu-items li:nth-child(2){ animation-delay: 560ms !important; }
  body.menu-open .menu-left .menu-items li:nth-child(3){ animation-delay: 660ms !important; }
  body.menu-open .menu-left .menu-items li:nth-child(4){ animation-delay: 760ms !important; }
  body.menu-open .menu-left .menu-items li:nth-child(5){ animation-delay: 860ms !important; }
  body.menu-open .menu-left .menu-items li:nth-child(6){ animation-delay: 960ms !important; }

  body.menu-closing .menu-left .menu-items li{
    animation-name: fadeBlurOut !important;
    animation-duration: 400ms !important;
    animation-timing-function: cubic-bezier(.22,.9,.27,1) !important;
    animation-fill-mode: both !important;
  }

  body.menu-closing .menu-left .menu-items li:nth-child(1){ animation-delay: 420ms !important; }
  body.menu-closing .menu-left .menu-items li:nth-child(2){ animation-delay: 360ms !important; }
  body.menu-closing .menu-left .menu-items li:nth-child(3){ animation-delay: 300ms !important; }
  body.menu-closing .menu-left .menu-items li:nth-child(4){ animation-delay: 240ms !important; }
  body.menu-closing .menu-left .menu-items li:nth-child(5){ animation-delay: 180ms !important; }
  body.menu-closing .menu-left .menu-items li:nth-child(6){ animation-delay: 120ms !important; }

  /* =========================================
     BOTTOM (BLUE) — PANEL AREA
     ========================================= */
  .menu-right{
    background: #189DD8 !important;

    padding: 0.75rem !important; 
    gap: 0.75rem !important;     

    overflow: hidden !important;
    overflow-x: hidden !important;

    height: auto !important;
    max-height: var(--menu-right-max, 999px) !important;

    border-radius: 0 0 1.35rem 1.35rem !important;

    margin: 0 !important;
  }

  .menu-right__panel{
    width: 100% !important;
    max-width: none !important;

    height: auto !important;
    max-height: calc(var(--menu-right-max, 999px) - 1.5rem) !important; 

    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    padding: 0.375rem 0.125rem 0.625rem !important; 
    min-height: 0 !important;
  }

  .menu-right{ position: relative !important; }
  .menu-right::after{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    height: 1.625rem !important;
    pointer-events: none !important;

    background: #189DD8 !important;
    opacity: 0.95 !important;
  }

  .menu-right__panel[hidden]{ display:none !important; }

  /* ============================
    WELCOME — MOBILE
    ============================ */
  .menu-right__panel[data-panel="welcome"].is-visible{
    display:flex !important;
    flex-direction:column !important;
    padding: 14px 14px 18px !important;
    min-height: 0 !important;
    border-radius: 26px !important;
  }

  .menu-right__panel[data-panel="welcome"] .hex-collage-wrap{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 26px !important;
    flex: 0 0 auto !important;
  }

  .menu-right__panel[data-panel="welcome"] .hex-collage{
    width: 100% !important;
    max-width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    grid-auto-rows: 86px !important;
    gap: 12px !important;

    grid-template-areas:
      "cruise cruise"
      "cruise cruise"
      "safari cable"
      "safari ele"
      "bus    bus"
      "bus    bus"
      "dining    dining"
      "dining    dining" !important;

    align-items: stretch !important;
    justify-items: stretch !important;

    padding: 0 !important;
    margin: 0 !important;
  }

  .menu-right__panel[data-panel="welcome"] .pos-left{        grid-area: safari !important; }
  .menu-right__panel[data-panel="welcome"] .pos-top{         grid-area: cable  !important; }
  .menu-right__panel[data-panel="welcome"] .pos-right{       grid-area: dining !important; }
  .menu-right__panel[data-panel="welcome"] .pos-center{      grid-area: cruise !important; }
  .menu-right__panel[data-panel="welcome"] .pos-bottom{      grid-area: bus    !important; }
  .menu-right__panel[data-panel="welcome"] .pos-bottom-left{ grid-area: ele    !important; }

  .menu-right__panel[data-panel="welcome"] .hex{
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;
    height: 100% !important;

    clip-path: none !important;
    box-shadow: none !important;
    margin: 0 !important;

    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .menu-right__panel[data-panel="welcome"] .hex img{
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
  }

  .menu-right__panel[data-panel="welcome"] .collage-caption{
    display: block !important;
    margin: 14px 0 0 !important;
    padding: 0 0 6px !important;

    text-align: center !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    line-height: 1.2 !important;

    color: rgba(255,255,255,0.95) !important;
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .menu-right__panel[data-panel="welcome"] #hexCollage{
    transform: none !important;
  }

  /* =========================================
     DASHBOARD — MOBILE REBUILD (CSS ONLY)
     ========================================= */
  .ss-dashboard-shell{
    width: 100% !important;
    display: block !important;
  }

  .ss-dashboard-card{
    width: 100% !important;
    min-height: 0 !important;

    margin: 0 0 0.5rem !important; /* ✅ little space underneath */

    padding: 0.875rem 0.875rem 1rem !important;
    border-radius: 1.25rem !important;
  }

  .ss-dash-header{
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;        
    margin-bottom: 0.75rem !important; 
  }

  .ss-dash-header-left{ max-width: none !important; }

  .ss-dash-title{
    font-size: 1.45rem !important;
    line-height: 1.05 !important;
    margin-bottom: 0.375rem !important; 
  }

  .ss-dash-subtitle{
    font-size: 0.92rem !important;
    line-height: 1.35 !important;
  }

  .ss-dash-header-right{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.625rem !important; 
    justify-content: stretch !important;
    align-items: stretch !important;
  }

  .ss-dash-period-toggle{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.375rem !important; 

    padding: 0.3125rem !important; 
    border-radius: 999px !important;
  }

  .ss-dash-pill{
    width: 100% !important;
    padding: 0.5rem 0 !important;
    font-size: 0.78rem !important;
  }

  .ss-dash-date-btn,
  .ss-dash-user-chip{
    width: 100% !important;
    justify-content: center !important;
    padding: 0.625rem 0.75rem !important; 
    border-radius: 999px !important;
  }

  .ss-dash-user-text{ max-width: 72% !important; }

  .ss-dash-grid{
    margin-top: 0.75rem !important; 
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important; 
  }

  .ss-dash-card{
    border-radius: 1.125rem !important; 
    padding: 0.875rem 0.875rem 0.875rem !important; 
  }

  .ss-dash-card--chart{
    grid-column: auto !important;
    min-height: 0 !important;
  }

  .ss-dash-card-amount{ font-size: 1.35rem !important; }
  .ss-dash-card-label{ font-size: 0.82rem !important; }
  .ss-dash-card-delta{ font-size: 0.78rem !important; }

  .ss-dash-card-icon{
    right: 0.75rem !important;  
    bottom: 0.75rem !important; 
    width: 2rem !important;     
    height: 2rem !important;   
    font-size: 0.9rem !important;
  }

  .ss-dash-chart-placeholder{
    height: 4.625rem !important;  
    border-radius: 0.875rem !important; 
  }

  .ss-dash-referrals li{
    grid-template-columns: auto 1fr auto !important;
    gap: 0.625rem !important; 
  }

  .ss-dash-ref-name{ font-size: 0.88rem !important; }
  .ss-dash-ref-meta{ font-size: 0.74rem !important; }

  .ss-dash-ref-icon{ padding: 0.375rem 0.5rem !important; } 

  .ss-dash-more-link{
    width: 100% !important;
    text-align: center !important;
    margin-top: 0.375rem !important; 
    padding: 0.625rem 0.75rem !important; 
    border-radius: 0.75rem !important;
    background: rgba(24,157,216,0.08) !important;
  }

  .dashboard-gate{ padding: 1.125rem 0.625rem !important; }
  .dashboard-gate__title{
    font-size: 1.25rem !important;
    line-height: 1.1 !important;
  }
  .dashboard-gate__text{
    font-size: 0.92rem !important;
    line-height: 1.35 !important;
  }
  .dashboard-gate__btn{
    width: 100% !important;
    padding: 0.75rem 1rem !important;
  }

  /* =========================================
     FAQ — MOBILE READABLE
     ========================================= */
  .faq-wrapper{ padding: 0.875rem 0.375rem 1.375rem !important; }

  .faq-heading{
    font-size: 1.7rem !important;
    margin: 0.25rem 0 0.875rem !important; 
  }
  .faq-heading::after{
    width: 5.375rem !important;  
    height: 0.1875rem !important; 
    margin-top: 0.5rem !important;
  }

  .faq-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important; 
  }

  .faq-card{
    max-width: none !important;
    border-radius: 1rem !important;
    padding: 0.875rem 0.875rem 1rem !important;
  }

  .faq-question{ font-size: 1rem !important; }
  .faq-answer{
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
  }

  /* =========================================
     CONTACT — SINGLE COLUMN + BIG BUTTONS
     ========================================= */
  .contact-wrapper{ padding: 1rem 0.5rem 1.5rem !important; } 

  .contact-heading{
    font-size: 1.7rem !important;
    margin: 0.25rem 0 0.875rem !important; 
  }
  .contact-heading::after{
    width: 5.375rem !important;  
    height: 0.1875rem !important;
    margin-top: 0.5rem !important; 
  }

  .contact-grid{
    grid-template-columns: 1fr !important;
    gap: 0.875rem !important; 
  }

  .contact-info{ gap: 0.5rem !important; }

  .contact-whatsapp-btn{
    width: 100% !important;
    padding: 0.75rem 1.125rem !important;
    border-radius: 0.875rem !important; 
  }

  .contact-form-card{
    border-radius: 1.125rem !important;
    padding: 1rem !important;         
  }

  .contact-row--two{ flex-direction: column !important; }

  .contact-field input,
  .contact-field textarea{
    border-radius: 0.875rem !important;   
    padding: 0.75rem 0.875rem !important;  
    font-size: 0.95rem !important;
  }

  .contact-field textarea{ min-height: 6.875rem !important; } 

  .contact-row--human-submit{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.625rem !important; 
  }

  .contact-human-check{
    width: 100% !important;
    justify-content: center !important;
    border-radius: 0.875rem !important; 
  }

  .contact-submit-btn{
    width: 100% !important;
    padding: 0.75rem 1rem !important; 
    border-radius: 0.875rem !important;
  }

    .contact-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.875rem !important;
    margin-top: 0 !important;
  }

  /* Cancel desktop grid-column placements */
  .contact-info,
  .contact-form-wrap{
    grid-column: 1 / -1 !important;
  }

  /* Normal vertical order: info first, form second (like you said: top to bottom) */
  .contact-info{ order: 1 !important; }
  .contact-form-wrap{ order: 2 !important; }

  /* Make form full width */
  .contact-form-wrap{
    justify-content: stretch !important;
  }
  .contact-form-card{
    width: 100% !important;
    max-width: none !important;
  }

  /* =========================================
     CLIP REVEAL (mobile version)
     ========================================= */
  body.menu-open .menu-overlay{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.menu-closing .menu-overlay{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: none !important;
  }

  body.menu-open .menu-overlay .menu-panel{
    pointer-events: auto !important;
    will-change: clip-path, opacity !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;

    animation:
      panelClipLinear 1100ms linear 40ms forwards,
      panelFadeIn 800ms cubic-bezier(.22,.9,.27,1) 40ms forwards !important;
  }

  body.menu-closing .menu-overlay .menu-panel{
    pointer-events: none !important;
    will-change: clip-path, opacity !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;

    animation:
      panelClipLinearOut 950ms linear forwards,
      panelFadeOut 600ms cubic-bezier(.65,0,.35,1) forwards !important;
  }

  body.menu-open .right-strip,
  body.menu-closing .right-strip{
    z-index: 90000 !important;
  }

  /* ---------------------------------
     10) RIGHT STRIP -> BOTTOM BAR
     --------------------------------- */
  .right-strip{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    width: 100vw !important;
    height: clamp(4.2rem, 16vw, 5.2rem) !important;

    margin: 0 !important;
    padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;

    border-radius: 1.25rem 1.25rem 0 0 !important;
    background: rgba(244,169,28,0.98) !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    opacity: 1 !important;
    z-index: 90000 !important;
    pointer-events: auto !important;
    display: block !important;
  }

  .right-strip .main-buttons{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    width: 100% !important;
    height: 100% !important;

    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
  }

  .right-strip .main-buttons button{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;

    height: calc(clamp(4.2rem, 16vw, 5.2rem) - 1.4rem) !important;
    border-radius: 1rem !important;

    border: 0.0625rem solid rgba(255,255,255,0.16) !important; 
    background: rgba(0,0,0,0.14) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-shadow: none !important;
    transition: transform 140ms ease, background 180ms ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .right-strip .main-buttons button:active{
    transform: scale(0.96) !important;
    background: rgba(0,0,0,0.22) !important;
  }

  .right-strip .main-buttons button::before,
  .right-strip .main-buttons button::after{
    display: none !important;
    content: none !important;
  }

  .right-strip .main-buttons button svg{
    width: 1.45rem !important;
    height: 1.45rem !important;
    stroke: #fff !important;
    fill: none !important;
    opacity: 0.95 !important;
    pointer-events: none !important;
  }


  /* Optional: keep the strip shadow off while open so it looks connected */
  body.right-panel-open .right-strip,
  body.right-panel-closing .right-strip{
    box-shadow: none !important;
  }

  /* ✅ White border "frame" only when the panel is open */
  body.right-panel-open .right-strip,
  body.right-panel-closing .right-strip{
    border: 0.125rem solid rgba(255,255,255,0.92) !important; /* nice clean white */
    border-bottom: 0 !important; /* keeps the bottom edge clean */
  }

  /* Since we added a border, prevent layout jump by using box-sizing (you already do) */
  body.right-panel-open .right-strip,
  body.right-panel-closing .right-strip{
    box-sizing: border-box !important;
  }

  /* Optional: make the individual buttons slightly more “outlined” while open */
  body.right-panel-open .right-strip .main-buttons button,
  body.right-panel-closing .right-strip .main-buttons button{
    border-color: rgba(255,255,255,0.28) !important;
    background: rgba(0,0,0,0.16) !important;
  }

  .right-strip .top-btn{
    position: fixed !important;
    right: 0.5rem !important;
    bottom: calc(clamp(4.2rem, 16vw, 5.2rem) + env(safe-area-inset-bottom) + 0.9rem) !important;
    width: 3.1rem !important;
    height: 3.1rem !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    background: #189DD8 !important;
    z-index: 90500 !important;
    border: 0 !important;
    outline: none !important;
    /* default hidden */
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(10px) scale(0.96) !important;

    transition: opacity 220ms ease, transform 220ms ease !important;
  }

  .right-strip .top-btn.is-visible{
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  /* show when JS adds class */
  .right-strip .top-btn.is-visible{
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  /* never show tooltip label */
  .right-strip .top-btn::before,
  .right-strip .top-btn::after{
    display: none !important;
    content: none !important;
  }

  body.page-loaded .right-strip .top-btn{
    opacity: 0 !important; /* still hidden until .is-visible */
    transform: translateY(10px) scale(0.96) !important;
  }
  body.page-loaded .right-strip .top-btn.is-visible{
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
  .right-strip .top-btn.is-visible{
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    display: grid !important;
  }

  body.auth-open .right-strip .top-btn,
  body.auth-closing .right-strip .top-btn{
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transform: translateY(10px) scale(0.96) !important;
  }

  /* ---------------------------------
    11) RIGHT PANEL OVERLAY — MOBILE (CONNECTED TO STRIP)
    --------------------------------- */

  @keyframes panelSlideInY{
    0%   { transform: translateY(110%); opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
  }

  @keyframes panelSlideOutY{
    0%   { transform: translateY(0);    opacity: 1; }
    100% { transform: translateY(110%); opacity: 0; }
  }

 #rightPanelOverlay{
    position: fixed !important;
    inset: 0 !important;
    z-index: 88000 !important;
    background: rgba(0,0,0,0.28) !important;
    pointer-events: auto !important;
  }

  #rightPanelOverlay .right-panel{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;

    /* ✅ bigger gap above panel (tweak this) */
    top: calc(env(safe-area-inset-top) + 2.5rem) !important;

    /* ✅ overlap strip slightly to remove “seam” */
    bottom: calc(-0.65rem - env(safe-area-inset-bottom)) !important;

    width: 100% !important;              /* instead of 100vw */
    max-width: 100% !important;
    overflow-x: hidden !important;
    border-radius: 1.25rem 1.25rem 0 0 !important;

    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none !important;
    transition: none !important;

    z-index: 89000 !important;
  }

  /* OPEN */
  body.right-panel-open #rightPanelOverlay .right-panel{
    pointer-events: auto !important;
    animation: panelSlideInY 820ms cubic-bezier(.16,1,.3,1) forwards !important;
  }

  /* CLOSING */
  body.right-panel-closing #rightPanelOverlay .right-panel{
    pointer-events: none !important;
    animation: panelSlideOutY 720ms cubic-bezier(.4,0,.2,1) forwards !important;
  }

  #rightPanelOverlay .right-panel__content{
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* ✅ start at top */
    align-items: stretch !important;        /* ✅ no weird centering */
    min-height: 0 !important;   
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;

    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;

    padding-bottom: calc(
      clamp(4.2rem, 16vw, 5.2rem)
      + env(safe-area-inset-bottom)
      + 1.25rem
    ) !important;

    padding-top: 0 !important;

    box-sizing: border-box !important;
  }

  #rightPanelOverlay .panel-promotion{
    padding-bottom: 3.5rem !important;
  }

  /* CONTACT — same idea, slightly less than promo */
  #rightPanelOverlay .panel-contact{
    padding-bottom: clamp(2rem, 8svh, 5rem) !important;
    max-width: 100% !important;
  }
  /* ✅ ONLY these panels get extra top breathing room */
  #rightPanelOverlay .panel-promotion,
  #rightPanelOverlay .panel-contact{
    padding-top: clamp(1.25rem, 6svh, 3.25rem) !important;
  }

  /* ✅ SHORT panels: push content down reliably (use padding, not margin) */
  #rightPanelOverlay .panel-wishlist,
  #rightPanelOverlay .panel-partner{
    padding-top: clamp(1.25rem, 8svh, 4.5rem) !important;
  }

  /* ✅ keep headings consistent (no random top margins) */
  #rightPanelOverlay .panel-promotion > h2,
  #rightPanelOverlay .panel-contact > h2{
    margin-top: 0 !important;
  }

  /* ✅ normalize headings so every panel starts the same */
  #rightPanelOverlay .right-panel__content h2{
    font-size: 1.9rem !important;
    line-height: 1.08 !important;
  }

  #rightPanelOverlay .right-panel__content p{
    margin: 0 0 0.85rem !important;
    font-size: 0.98rem !important;
    line-height: 1.45 !important;
  }

  #rightPanelCloseEdge{
    position: fixed !important;
    top: calc(env(safe-area-inset-top) + 1.05rem) !important;
    right: 0.85rem !important;
    z-index: 91000 !important;
    pointer-events: auto !important;
  }
  
  /* ---------------------------------
    PANEL TOP SPACING
    --------------------------------- */
  #rightPanelOverlay .panel-partner .wishlist-actions-row{
    width: 100% !important;
  }

  #rightPanelOverlay .panel-partner .wishlist-actions-row .wishlist-pill{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    text-align: center !important;

    padding: 0.85rem 1rem !important;   /* same as your other pills */
    border-radius: 999px !important;

    line-height: 1.1 !important;
  }

  #rightPanelOverlay .panel-partner .wishlist-actions-row .wishlist-pill{
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #rightPanelOverlay .wishlist-pill{
    width: 100% !important;
    justify-content: center !important;
    padding: 0.85rem 1rem !important;
    border-radius: 999px !important;
  }

  #rightPanelOverlay .panel-contact .contact-layout{
    display: block !important;           /* kill any grid weirdness */
    width: 100% !important;
    max-width: 100% !important;
  }

  #rightPanelOverlay .panel-contact .contact-info{
    gap: 0.55rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 .9rem 0 !important;
  }

  #rightPanelOverlay .panel-contact .contact-whatsapp-btn{
    width: 100% !important;
    padding: 0.85rem 1rem !important;
    border-radius: 999px !important;
  }

  #rightPanelOverlay .panel-contact .contact-form-row--two{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
  }

  #rightPanelOverlay .panel-contact .contact-card{
    position: relative !important;
    left: 0 !important;
    right: auto !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #rightPanelOverlay .panel-contact .contact-field input,
  #rightPanelOverlay .panel-contact .contact-field textarea{
    padding: 0.8rem 0.9rem !important;
    border-radius: 0.9rem !important;
    font-size: 0.95rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #rightPanelOverlay .panel-contact .contact-submit{
    width: 100% !important;
    padding: 0.85rem 1rem !important;
    border-radius: 999px !important;
  }

  #rightPanelOverlay .panel-contact .contact-form-row--bottom{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
    align-items: stretch !important;
  }

  #rightPanelOverlay .panel-contact .contact-submit{
    width: 100% !important;
    border-radius: 999px !important;
    padding: 0.85rem 1rem !important;
  }

  #rightPanelOverlay .panel-promotion .promo-layout{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.9rem !important;
  }

  #rightPanelOverlay .panel-promotion .promo-cabins{
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(11rem, 1fr) !important;
    gap: 0.75rem !important;

    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 0.25rem !important;
  }

  #rightPanelOverlay .panel-promotion .promo-main{
    display: grid !important;
    gap: 0.85rem !important;
  }

  #rightPanelOverlay .panel-promotion .promo-ship{
    width: 100% !important;
    max-height: 8.5rem !important;
    object-fit: contain !important;
  }

  #rightPanelOverlay .panel-promotion .promo-cards-row{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  #rightPanelOverlay .panel-promotion .promo-cta-row .promo-cta{
    width: 100% !important;
    justify-content: center !important;
    padding: 0.9rem 1rem !important;
    border-radius: 999px !important;
  }

  /* #rightPanelOverlay .panel-contact .contact-layout{
    display: flex !important;
    flex-direction: column !important;
  }

  #rightPanelOverlay .panel-contact .contact-card{
    order: 1 !important;  
    margin: 0 0 0.9rem 0 !important;
  }

  #rightPanelOverlay .panel-contact .contact-info{
    order: 2 !important;   
    margin: 0 !important;
  } */

 /* =========================================
    FOOTER — MOBILE PORTRAIT (CLEAN + NO GAP)
    ========================================= */
  .ss-footer{
    width: 100% !important;
    overflow: hidden !important;
    background: #189DD8 !important; /* ensures no white shows through */
    margin-bottom: -5rem !important;
  }

  .ss-footer-top{
    padding: 1.4rem 1rem 1.1rem !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.9rem !important;
  }

  /* Hide dividers on mobile */
  .ss-footer-divider{ display: none !important; }

  /* Column cards (more premium + consistent) */
  .ss-footer-col{
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;

    padding: 1rem 0.95rem !important;
    border-radius: 1.2rem !important;

    background: rgba(255,255,255,0.10) !important;
    border: 0.0625rem solid rgba(255,255,255,0.16) !important;

    box-shadow:
      0 0.45rem 1.1rem rgba(0,0,0,0.14),
      inset 0 0.0625rem 0 rgba(255,255,255,0.08) !important;
  }

  /* Title: stronger hierarchy + little divider line */
  .ss-footer-title{
    font-size: 1.12rem !important;
    line-height: 1.15 !important;
    margin: 0 0 0.35rem 0 !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
  }

  .ss-footer-title::after{
    content: "" !important;
    display: block !important;
    width: 3.25rem !important;
    height: 0.16rem !important;
    margin-top: 0.55rem !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.38) !important;
  }

  /* Links: turn into tap-friendly rows */
  .ss-footer-link{
    display: block !important;
    padding: 0.68rem 0.75rem !important;
    border-radius: 0.95rem !important;

    font-size: 0.97rem !important;
    line-height: 1.25 !important;
    font-weight: 650 !important;

    text-decoration: none !important;

    background: rgba(0,0,0,0.10) !important;
    border: 0.0625rem solid rgba(255,255,255,0.14) !important;

    word-break: break-word !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Social icons: centered + consistent hit areas */
  .ss-footer-icons{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    flex-wrap: nowrap !important;
    gap: 0.6rem !important;

    margin-top: 0.15rem !important;
  }

  .ss-icon{
    width: 3.3rem !important;
    height: 3.3rem !important;
    border-radius: 1rem !important;

    display: grid !important;
    place-items: center !important;

    background: rgba(0,0,0,0.10) !important;
    border: 0.0625rem solid rgba(255,255,255,0.14) !important;

    -webkit-tap-highlight-color: transparent !important;
  }

  .ss-footer-icons img{
    width: 2.6rem !important;
    height: 2.6rem !important;
    object-fit: contain !important;
    display: block !important;
  }

  .footer-banner{
    height: clamp(8.5rem, 38vw, 12.5rem) !important;
    background: #F4A91C !important;
    overflow: hidden !important;
    line-height: 0 !important;
    padding-left: 1.5rem !important;
  }
  .footer-banner img{
    width: 100% !important;
    height: 100% !important;

    /* makes the logos look bigger while still fitting */
    object-fit: contain !important;
    object-position: center !important;
    transform: scale(1.6) !important;
    transform-origin: center !important;

    display: block !important;
  }

  /* ✅ Footer bottom: SMALL, but with enough padding so it sits above the fixed strip */
  .footer-bottom{
    background: #189DD8 !important;
    padding: 0.75rem 1rem calc(0.75rem + clamp(4.2rem, 16vw, 5.2rem) + env(safe-area-inset-bottom)) !important;

    text-align: center !important;
    font-size: 0.85rem !important;
    line-height: 1.25 !important;
  }
  .footer-bottom p{ margin: 0 !important; }

}