/* =============================================================================
   PORTED FIXES
   These four fixes exist in the "v3-fixed" build but are missing from this
   version's style.css. Copied unchanged (FIX 04 trimmed to the Why-Us section,
   the only one of those sections that is still dark).
   ============================================================================= */
/* ==========================================================================
   FIX 01 — FLOATING LAUNCHER STACK (root cause of "no buttons / no swipe" on mobile)
   --------------------------------------------------------------------------
   The teaser + map popups were invisible (opacity:0) but still sat IN the flex
   column of .cb-launch-container. That made the fixed container ~340 x 650px on
   phones and ~320 x 700px on desktop — a transparent wall that swallowed every
   tap and every horizontal swipe in the middle/right of the screen.
   Now: the container only wraps the 3 round buttons, is click-through itself,
   and both popups float ABOVE-LEFT of the buttons (absolute, out of flow).
   ========================================================================== */
.cb-launch-container {
  pointer-events: none !important;      /* container itself never eats touches */
  width: auto !important;
  height: auto !important;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.cb-launch-container > .map-floating-btn,
.cb-launch-container > .wa-floating-btn,
.cb-launch-container > .cb-launch-btn {
  pointer-events: auto !important;
}

/* Popups: out of flow, anchored to the bottom of the button stack, opening to the left */
.cb-launch-container > .cb-teaser-popup,
.cb-launch-container > .map-locator-popup {
  position: absolute !important;
  right: calc(100% + 14px) !important;
  bottom: 0 !important;
  margin: 0 !important;
  transform-origin: bottom right;
  transform: translateX(14px) scale(0.96);
  visibility: hidden;                    /* hidden = not focusable, not tappable */
  pointer-events: none !important;
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.4s;
}
.cb-launch-container > .cb-teaser-popup.visible,
.cb-launch-container > .map-locator-popup.visible {
  transform: translateX(0) scale(1);
  visibility: visible;
  pointer-events: auto !important;
  transition-delay: 0s;
}
.cb-launch-container > .cb-teaser-popup { width: 320px !important; max-width: 320px !important; }
.cb-launch-container > .map-locator-popup { width: 340px !important; }

@media (max-width: 640px) {
  .cb-launch-container {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  /* 48px buttons + 14px gap on the right  ->  popup uses the remaining width */
  .cb-launch-container > .cb-teaser-popup {
    width: min(300px, calc(100vw - 96px)) !important;
    padding: 14px 14px !important;
  }
  .cb-launch-container > .map-locator-popup {
    width: min(320px, calc(100vw - 96px)) !important;
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
  }
}


/* ==========================================================================
   FIX 02 — HERO HEADLINE: exactly 2 lines on desktop/tablet, no blue glow
   ========================================================================== */
.hero-content-center h1 em,
.hero-content-center h1 i,
.hero-canvas-frame .hero-content-center h1 .accent-editorial {
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0 !important;
}

@media (min-width: 769px) {
  .hero-content-center { max-width: 1560px !important; }
  .hero-content-center h1 {
    /* line 2 is ~18.4em wide -> size the type so it always fits on ONE line */
    font-size: clamp(2rem, calc((100vw - 170px) / 19.4), 4.9rem) !important;
    line-height: 1.1 !important;
    width: 100%;
  }
  .hero-content-center h1 .ln {
    display: block !important;
    white-space: nowrap !important;
  }
}

/* Phones: line 1 stays on its own line, line 2 wraps evenly (never orphan "freedom.") */
@media (max-width: 768px) {
  .hero-content-center h1 .ln {
    display: block !important;
    white-space: normal !important;
  }
  .hero-content-center h1 .ln-secondary {
    text-wrap: balance;
  }
}


/* ==========================================================================
   FIX 03 — TOUCH DEVICES: reviews + gallery become real swipeable rows
   --------------------------------------------------------------------------
   Desktop keeps the auto-moving marquee. On phones/tablets (no hover) the
   marquee was overflow:hidden + CSS-animation only, so finger swipes did
   nothing. Now each row is a native horizontal scroller with snap. The
   duplicated "loop" cards (aria-hidden) are hidden so the row simply ends.
   ========================================================================== */
@media (hover: none), (max-width: 768px) {
  .marquee-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    touch-action: pan-x pan-y;
  }
  .marquee-container::-webkit-scrollbar { display: none; }

  .marquee-track {
    animation: none !important;
    transform: none !important;
    padding: 0 20px;
  }

  /* Gallery: two rows, each swipes independently */
  .gallery-marquee-wrap {
    overflow: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    padding: 10px 0;
    gap: 14px;
  }
  .gal-track-left,
  .gal-track-right {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 20px;
    gap: 14px !important;
    touch-action: pan-x pan-y;
  }
  .gal-track-left::-webkit-scrollbar,
  .gal-track-right::-webkit-scrollbar { display: none; }

  .marquee-track > [aria-hidden="true"],
  .gal-track-left > [aria-hidden="true"],
  .gal-track-right > [aria-hidden="true"] { display: none !important; }

  .marquee-track > .rcard {
    flex: 0 0 auto;
    width: min(86vw, 380px) !important;
    scroll-snap-align: center;
  }
  .gal-track-left > .gal-card-item,
  .gal-track-right > .gal-card-item {
    flex: 0 0 auto;
    width: min(80vw, 340px) !important;
    scroll-snap-align: center;
  }
}



/* FIX 04 (Why Us part only — it is still a dark section) */
.why-us-section .shead h2,
.why-us-section .section-h2 { color: #ffffff !important; }
.why-us-section .eyebrow { color: #60A5FA !important; }
.why-us-section .eyebrow::before { background: #60A5FA !important; }