/* ==========================================================================
   LANDING PAGE MODE - theme3 front end  (classes are all prefixed ".lp-")
   Sections in this file:
    1. PAGE SHELL & SHARED BITS
    2. SHARED CAROUSEL / CARD PIECES
    3. BOOKING CTA (Booking CTA & Member Login)
    4. COMPANY (About Us / Company Background)
    5. CUSTOM TEXT
    6. GALLERY MEDIAS
    7. SHOWCASE - Property Attractions & Happenings
    8. STACKED CARDS - Single Featured (Attractions & Happenings)
    9. OFFER - Deals & Promotions
   10. FACILITIES
   11. GUEST REVIEWS
   12. FAQ
   13. CONTACT US
   14. FOOTER & HQ CONTACT BANNER
   15. SECTION REVEAL TRANSITIONS
   ========================================================================== */

/* ==========================================================================
   1. PAGE SHELL & SHARED BITS
   Base page, logo, section wrapper, headings, rich text
   Classes:
     .lp-page, .lp-eyebrow, .lp-rich-content, .lp-brand, .lp-brand-logo, .lp-section,
     .lp-demo-tag, .lp-section-inner, .lp-section-booking_cta, .lp-section-heading,
     .lp-align-center, .lp-align-right, .lp-empty-note
   ========================================================================== */

/* --- .lp-page --- */

/* Landing Page mode homepage - a stack of admin-ordered CmsLandingPageModeSection
   rows, each dispatched to its own element by section_type. Mirrors the visual
   language of modern-hotel-grp-homepage.css (.cms-grp-page) so both "replace the
   whole homepage" modes feel like the same product. */
.lp-page {
  --lp-ink: #1E1E1E;
  --lp-surface: #fdfbf7;
  --lp-line: rgba(12, 26, 59, 0.12);
  position: relative;
  background: #FFFFFF;
  color: var(--lp-ink);
  font-family: var(--theme-font-family);
  font-weight: 400;
  line-height: 1.6;
  /* `clip`, not `hidden`: `hidden` would turn .lp-page into a scroll container */
  overflow-x: clip;
}

.lp-page img {
  display: block;
  max-width: 100%;
}

/* Section subtitle: shown exactly as typed (no forced uppercase), with a short accent rule under it. */
.lp-page .lp-eyebrow {
  font-family: var(--theme-font-family);
  font-size: 14px;
  letter-spacing: 0.06em;
  font-weight: 600;
  display: inline-block;
  position: relative;
  padding-bottom: 8px;
  margin-bottom: 14px;
}

.lp-page .lp-eyebrow::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: var(--theme-primary-color);
}

/* The rule follows the heading position: centred / right-aligned sections put it under the text. */
.lp-align-center .lp-eyebrow::after {
  left: 50%;
  transform: translateX(-50%);
}

.lp-align-right .lp-eyebrow::after {
  left: auto;
  right: 0;
}

.lp-page h1,
.lp-page h2,
.lp-page h3 {
  font-family: var(--theme-hero-text-font-family);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.lp-page .lp-rich-content {
  color: var(--theme-text-muted);
  font-size: 18px;
  font-weight: 400;
}

.lp-page .lp-rich-content p {
  margin: 0 0 12px;
}

.lp-page .lp-rich-content p:last-child {
  margin-bottom: 0;
}


.lp-page .lp-rich-content img {
  border-radius: 10px;
  margin: 12px 0;
}

/* --- .lp-brand --- */

.lp-brand {
  position: absolute;
  top: 20px;
  left: 5vw;
  z-index: 3;
}

.lp-brand-logo {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

/* --- .lp-section --- */

/* Every section is at least one full screen, content vertically centred, so
   the next section never peeks in underneath (each can carry its own
   background image/colour). Taller content simply grows the section. */
.lp-section {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 90px 5vw;
}

/* --- .lp-has-bg-image --- */

/* A section with a background image: the photo (under the same dark-navy shade as the Booking CTA hero)
   fills the top of the section at a fixed height - the first screen - and fades out at its bottom edge
   into the deep navy section colour, like a blurred pond reflection. When the section grows (Show more,
   long lists) the picture does NOT stretch: the extra height is just the navy colour, so the light text
   stays readable. Cards, tiles and buttons keep their own light surfaces and dark text. */
.lp-section.lp-has-bg-image {
  isolation: isolate;
  background-color: #12203f;
}

.lp-section.lp-has-bg-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(100%, 100vh);
  height: min(100%, 100svh);
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(12, 26, 59, 0.35) 0%, rgba(12, 26, 59, 0.6) 60%, rgba(12, 26, 59, 0.78) 100%),
    var(--lp-section-bg-image, none) center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}

/* The Booking CTA hero already shades its background with its own gradient. */
.lp-section-booking_cta.lp-has-bg-image::before {
  display: none;
}

.lp-has-bg-image :is(
  .lp-eyebrow,
  .lp-section-heading h2,
  .lp-custom-text h2,
  .lp-company-hero-text :is(h1, h2, h3),
  .lp-faq-title,
  .lp-faq-question,
  .lp-contact-hq h2,
  .lp-contact-hq h3
) {
  color: #fff;
}

/* Content: every rich-text block in a background-image section (and what the editor puts inside it). */
.lp-has-bg-image .lp-rich-content,
.lp-has-bg-image .lp-rich-content :is(p, li, span, strong, em, h1, h2, h3, h4, h5, h6, blockquote),
.lp-has-bg-image .lp-section-heading p,
.lp-has-bg-image .lp-faq-answer {
  color: #fff;
}

/* "Show more / Show less" line on a background-image section: white rule and label (the arrow keeps the theme colour). */
.lp-has-bg-image .lp-gallery-more-line::before,
.lp-has-bg-image .lp-gallery-more-line::after {
  background: rgba(255, 255, 255, 0.45);
}

.lp-has-bg-image .lp-gallery-more-link {
  color: #fff;
}

.lp-has-bg-image .lp-faq-item {
  border-color: rgba(255, 255, 255, 0.25);
}

/* --- .lp-to-top --- */

/* Back-to-top button: a round white button bottom-right, fading in once you have scrolled past the first screen. */
.lp-to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 50;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #1e1e1e;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease, color .2s ease;
}

.lp-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.lp-to-top:hover,
.lp-to-top:focus-visible {
  color: var(--theme-primary-color);
}

/* Scroll-progress ring: an arc in the theme colour that grows clockwise from the top as you read down. */
.lp-to-top-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}

.lp-to-top-ring-bar {
  fill: none;
  stroke: var(--theme-primary-color);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

@media (max-width: 600px) {
  .lp-to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
}

/* --- .lp-demo --- */

/* Demo-preview only (buildDemoLandingSections()) - identifies which
   section_type/layout_variant is currently on screen while scrolling
   through every variant back-to-back. Never shown for real saved sections. */
.lp-demo-tag {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  background: rgba(12, 26, 59, 0.85);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 16px;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
}

/* --- .lp-section --- */

.lp-section-inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

/* The Booking CTA hero is full-bleed: no side padding, no width cap, so its
   background image covers edge to edge instead of leaving white side bars. */
.lp-section-booking_cta {
  padding: 0;
}

.lp-section-booking_cta .lp-section-inner {
  max-width: none;
}

.lp-section-heading {
  text-align: left;
  max-width: 680px;
  margin: 0 0 44px;
}

.lp-section-heading h2 {
  font-size: 32px;
  line-height: 1.15;
}

/* --- .lp-align --- */

.lp-align-center .lp-section-heading {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.lp-align-right .lp-section-heading {
  text-align: right;
  margin-left: auto;
}

/* --- .lp-empty --- */

.lp-empty-note {
  color: var(--theme-text-muted);
  font-style: italic;
}

/* ==========================================================================
   2. SHARED CAROUSEL / CARD PIECES
   Arrow buttons, endless carousel track, card grid
   Classes:
     .lp-card-grid, .lp-carousel-controls, .lp-carousel-btn, .lp-carousel-track,
     .lp-card-carousel, .lp-carousel-controls--bottom, .lp-carousel-dots,
     .lp-carousel-dot
   ========================================================================== */

/* --- .lp-card --- */

.lp-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* --- .lp-carousel --- */

.lp-carousel-controls {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 18px;
}

.lp-carousel-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--lp-line);
  background: #fff;
  color: var(--lp-ink);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.lp-carousel-btn:hover {
  background: var(--theme-primary-color);
  color: #fff;
  border-color: var(--theme-primary-color);
}

.lp-carousel-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.lp-carousel-track::-webkit-scrollbar {
  display: none;
}

.lp-carousel-track > * {
  flex: 0 0 min(360px, 85%);
  scroll-snap-align: start;
}

/* --- .lp-card --- */

@media (max-width: 980px) {
  .lp-card-grid {
      grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
  .lp-card-grid {
      grid-template-columns: 1fr;
    }
}

/* --- .lp-carousel --- */

.lp-carousel-track.lp-card-carousel {
  display: flex;
  gap: 24px;
  --lp-cols: 3;
}

.lp-carousel-track.lp-card-carousel > * {
  flex: 0 0 calc((100% - (var(--lp-cols) - 1) * 24px) / var(--lp-cols));
  min-width: 0;
}

@media (max-width: 980px) {
  .lp-carousel-track.lp-card-carousel { --lp-cols: 2; }
}

@media (max-width: 640px) {
  .lp-carousel-track.lp-card-carousel { --lp-cols: 1; }
}

/* Deals + Promotions card_grid: arrows sit centred below the tickets, like Single Featured */
.lp-carousel-controls--bottom {
  justify-content: center;
  gap: 18px;
  margin: 10px 0 0;
}

.lp-carousel-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--lp-line, #cfd4dc);
  cursor: pointer;
  transition: width .3s ease, background .3s ease;
}

.lp-carousel-dot:hover { background: var(--theme-text-muted); }

.lp-carousel-dot.is-active {
  width: 28px;
  background: var(--theme-primary-color);
}

/* ==========================================================================
   3. BOOKING CTA (Booking CTA & Member Login)
   Hero banner + "Choose a branch" card
   Classes:
     .lp-booking-hero, .lp-booking-hero-bg, .lp-booking-hero-inner,
     .lp-booking-hero-content, .lp-rich-content, .lp-select-card,
     .lp-select-card-sub, .lp-field, .lp-branch-select, .lp-field-input-wrap,
     .lp-select-card--modern, .lp-select-card-divider, .lp-field-icon, .lp-field-chevron,
     .lp-select-card-footer, .lp-eyebrow, .lp-booking-hero--split_hero_reversed,
     .lp-booking-hero--centered_hero, .lp-select-card-eyebrow, .lp-field-address,
     .lp-branch-preview, .lp-branch-item
   ========================================================================== */

/* --- .lp-booking --- */

.lp-booking-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 5vw 90px;
  overflow: hidden;
}

.lp-booking-hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12, 26, 59, 0.35) 0%, rgba(12, 26, 59, 0.6) 60%, rgba(12, 26, 59, 0.78) 100%),
    var(--lp-section-bg-image, none) center / cover no-repeat;
}

/* No `gap` here on purpose - same reasoning as the Company split layout
   (see the comment there): `order` alone doesn't move a shared `gap` with
   it, so split_hero_reversed's proportions ended up depending on which
   fixed track its content landed in instead of being set directly, which
   visibly broke (the two halves split too far apart). Fixed width columns +
   an explicit 60px gutter TRACK (not a `gap`) plus explicit `grid-column`
   placement per variant (below) makes each variant self-contained. */
.lp-booking-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 55px 0.85fr;
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
  align-items: center;
}

/* `grid-row: 1` is required, not decorative: content is first in the HTML
   but placed in the LAST (highest-numbered) column for split_hero_reversed,
   while the card is second in the HTML but placed in the FIRST column.
   Grid's default sparse auto-placement processes items in HTML order and
   never places a later item "behind" an earlier one's column within the
   same row - so without pinning both to row 1 explicitly, the card silently
   got auto-placed onto row 2 instead of sitting beside the content (visibly
   "split apart" into two stacked rows instead of side by side). */
.lp-booking-hero-content {
  grid-column: 1;
  grid-row: 1;
}

.lp-booking-hero-content h1 {
  font-size: 32px;
  color: #fff;
  line-height: 1.1;
}

.lp-booking-hero-content .lp-rich-content {
  margin-top: 24px;
  max-width: 480px;
  color: rgba(255, 255, 255, 0.82);
}

/* --- .lp-select --- */

.lp-select-card {
  grid-column: 3;
  grid-row: 1;
  background: #fff;
  padding: 34px 32px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.18),
    0 12px 24px rgba(0, 0, 0, 0.22),
    0 30px 70px rgba(0, 0, 0, 0.35);
}

.lp-select-card h3 {
  font-size: 20px;
}

/* --- .lp-select --- */

/* "Find your branch" card - settled design after an A/B comparison across
   variants (see booking_cta.php doc comment): small uppercase eyebrow above
   a bigger heading, a divider rule, a bordered field with a building icon,
   and a full-width pill CTA with an arrow + a "Sign in" line underneath. */
.lp-select-card--modern h3 {
  font-size: 24px;
}

.lp-select-card--modern .lp-select-card-divider {
  border: none;
  border-top: 1px solid var(--lp-line);
  margin: 15px 0;
}

/* Branch field: same bordered-box + icon + chevron + hover/focus-glow
   pattern as the group homepage's booking bar (.booking-field/.field-content
   in modern-booking-bar.css) - the border lives on this outer box, not on
   the select/TomSelect control, which renders flat inside it. */
.lp-select-card--modern .btn-abs-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding : 7px 0px;
  font-weight: 700;
  border-radius: 12px !important;
  color: #fff;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.lp-select-card--modern .lp-select-card-footer {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--theme-text-muted);
}

.lp-select-card--modern .lp-select-card-footer a {
  color: var(--theme-primary-color);
  font-weight: 700;
  text-decoration: underline;
}

/* --- .lp-booking --- */

@media (max-width: 980px) {
  .lp-booking-hero-inner {
      grid-template-columns: 1fr;
    }

  .lp-booking-hero-content,
  .lp-select-card {
      grid-column: 1;
      grid-row: auto;
    }
}

@media (max-width: 640px) {
  .lp-booking-hero {
      padding: 110px 6vw 70px;
    }

  .lp-select-card {
      padding: 22px;
    }
}

/* Booking CTA hero - shared across all 4 variants: an accent rule under the
   eyebrow (left-aligned by default, centered on the two centered variants). */
.lp-booking-hero-content .lp-eyebrow {
  color: #fff;
  opacity: 0.85;
}

/* Logged-in member greeting: "Welcome back, <name>" with the name in the theme colour. */
.lp-welcome-name {
  color: var(--theme-primary-color);
}

/* split_hero (default): text left, card right - unchanged reading order. */
/* split_hero_reversed: only the card and text trade sides (explicit
   grid-column placement, not `order`); the text itself always stays
   left-aligned (readability first - a mirrored right-aligned paragraph is
   harder to read, not "more designed"). */
.lp-booking-hero--split_hero_reversed .lp-booking-hero-inner { grid-template-columns: 0.85fr 60px 1.15fr; }

.lp-booking-hero--split_hero_reversed .lp-select-card { grid-column: 1; }

.lp-booking-hero--split_hero_reversed .lp-booking-hero-content { grid-column: 3; }

/* centered_hero: a wide column so the headline actually uses the available
   width instead of leaving large empty gutters (was 980px - too narrow on
   normal desktop widths), bigger type, centered eyebrow rule. The card
   scales up with it (was a fixed 460px, now up to 620px) so it doesn't look
   undersized next to the wider headline/photo. Centered Hero (Reversed) was
   dropped for Booking CTA - see BOOKING_CTA_HERO_VARIANTS. */
.lp-booking-hero--centered_hero .lp-booking-hero-inner {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: 36px;
  max-width: 1180px;
}

/* Reset the split layout's explicit grid-column (1/3) back to the single
   column that now exists, and grid-row back to auto (content/card need
   their own separate rows here, stacked vertically, unlike the split
   layout's shared row) - content always first (no `order` override for
   this variant). */
.lp-booking-hero--centered_hero .lp-booking-hero-content,
.lp-booking-hero--centered_hero .lp-select-card {
  grid-column: 1;
  grid-row: auto;
}

.lp-booking-hero--centered_hero .lp-booking-hero-content h1 {
  font-size: 32px;
}

.lp-booking-hero--centered_hero .lp-booking-hero-content .lp-eyebrow::after {
  left: 50%;
  transform: translateX(-50%);
}

.lp-booking-hero--centered_hero .lp-select-card {
  width: min(620px, 100%);
  text-align: left;
}

.lp-booking-hero--centered_hero .lp-booking-hero-content .lp-rich-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 640px;
}

@media (max-width: 980px) {
  /* The desktop split_hero_reversed rules place content/card in column 3 -
       more specific than the generic single-column reset above, so it would
       still win here unless re-stated at this same specificity. */

  .lp-booking-hero--split_hero_reversed .lp-booking-hero-inner { grid-template-columns: minmax(0, 1fr); }

  .lp-booking-hero--split_hero_reversed .lp-booking-hero-content,
    .lp-booking-hero--split_hero_reversed .lp-select-card { grid-column: 1; }
}

/* --- .lp-select --- */

.lp-select-card--modern .lp-select-card-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--theme-primary-color);
  margin-bottom: 6px;
}

/* --- .lp-field --- */

/* Branch field: same markup + look as the group homepage's "Locate your branch" card
   (.booking-field / .field-content / .tom-select-premium come from modern-booking-bar.css). */
.lp-page .grp-branch-field {
  margin-bottom: 0;
}

.lp-page .grp-branch-field:hover,
.lp-page .grp-branch-field:focus-within {
  border-color: var(--theme-primary-btn-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary-btn-color) 12%, transparent);
}

.lp-page .grp-branch-field .field-content .grp-branch-icon {
  color: var(--theme-primary-color);
  font-size: 16px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.lp-page .grp-branch-field .field-content:has(.ts-control .item) .grp-branch-icon {
  display: none;
}

.lp-page .grp-branch-field .ts-wrapper.tom-select-premium .ts-control:not(:has(.item)) {
  display: flex;
  align-items: center;
}

.lp-page .grp-branch-field .ts-wrapper.tom-select-premium .ts-control:not(:has(.item))::before {
  content: "- Please Select -";
  color: #94a3b8;
  font-size: 14px;
  line-height: normal;
}

.lp-page .ts-wrapper.tom-select-premium .ts-dropdown .optgroup-header {
  font-family: var(--theme-font-family);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--theme-primary-color);
  padding: 10px 16px 4px;
}

/* Selected-branch preview (photo, name, city · state), shown under the field once a branch is picked. */
.lp-branch-preview {
  display: none;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--lp-surface, #faf8f4);
  border: 1px solid var(--lp-line);
}

.lp-branch-preview.show { display: flex; }

.lp-branch-preview img {
  width: 52px;
  height: 52px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
}

.lp-branch-preview-name {
  font-weight: 600;
  font-size: 14.5px;
}

.lp-branch-preview-meta {
  font-size: 12px;
  color: var(--theme-text-muted);
}

.lp-select-card--modern .lp-select-card-body .btn { margin-top: 20px; }

/* ==========================================================================
   4. COMPANY (About Us / Company Background)
   Split / centred hero with text + photo
   Classes:
     .lp-company-hero, .lp-company-hero-media, .lp-company-hero-text, .lp-rich-content,
     .lp-company-hero--split_hero, .lp-company-hero--split_hero_reversed,
     .lp-company-hero--centered_hero, .lp-company-hero--centered_hero_reversed
   ========================================================================== */

/* --- .lp-company --- */

/* No `gap` here on purpose: a shared column-gap combined with the `order`
   property used to flip media/text between split_hero and
   split_hero_reversed - but `order` only reorders which grid ITEM lands in
   which fixed TRACK, it doesn't move the gap with it, so the two variants'
   image/text proportions silently depended on which track each one ended up
   in rather than being set directly per variant (fragile, and the visible
   image sizing was inconsistent between the two - see chat feedback). Fixed
   width columns + an explicit fixed-width middle gutter TRACK (an empty
   column, not a `gap`) plus explicit `grid-column` placement per variant
   (below) makes each variant's proportions self-contained instead. */
.lp-company-hero {
  display: grid;
  grid-template-columns: 1.15fr 55px 0.85fr;
  align-items: center;
}

/* `grid-row: 1` is required, not decorative: the media <img> is first in the
   HTML but placed in the LAST (highest-numbered) column, while the text is
   second in the HTML but placed in the FIRST column. Grid's default sparse
   auto-placement processes items in HTML order and never places a later
   item "behind" an earlier one's column within the same row - so without
   pinning both to row 1 explicitly, the text silently got auto-placed onto
   row 2 instead of sitting beside the image (visibly "split apart" into two
   stacked rows instead of side by side). */
.lp-company-hero-media {
  grid-column: 3;
  grid-row: 1;
}

.lp-company-hero-text {
  grid-column: 1;
  grid-row: 1;
}

.lp-company-hero-media img {
  border-radius: 22px;
  width: 100%;
  height: 420px;
  object-fit: cover;
}

.lp-company-hero-text h2 {
  margin-top: 4px;
  font-size: 32px;
}

.lp-company-hero-text .lp-rich-content {
  margin-top: 20px;
  max-width: 560px;
}

@media (max-width: 980px) {
  .lp-company-hero {
      grid-template-columns: 1fr;
    }

  /* Collapsing to a single column: reset the split layouts' explicit
       grid-column (3/1, or 1/3 for the reversed variants) AND their grid-row
       pinning (both are forced to row 1 on desktop so they sit side by side -
       see the comments on those rules) back to the one column/auto rows that
       now apply, for every variant - `order` alone then controls the stacking
       (image above text by default). */

  .lp-company-hero-media,
  .lp-company-hero-text {
      grid-column: 1;
      grid-row: auto;
    }

  .lp-company-hero-media {
      order: 2;
    }
}

/* Company split / centered
   split_hero (default): text left, image right (the base column/placement
   rules above already give this layout) - the image just gets a soft
   trailing accent panel peeking from behind its bottom-right corner. */
.lp-company-hero--split_hero .lp-company-hero-media { position: relative; }

.lp-company-hero--split_hero .lp-company-hero-media::before {
  content: '';
  position: absolute;
  inset: 20px -20px -20px 20px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--theme-primary-color) 14%, transparent);
  z-index: -1;
}

/* split_hero_reversed: image left, text right - mirrors the column widths
   too (image keeps the narrower track, text the wider one, just swapped
   sides) and the accent panel peeks from behind the image's top-left corner
   instead, so the two variants read as true mirror images of each other. */
.lp-company-hero--split_hero_reversed {
  grid-template-columns: 0.85fr 80px 1.15fr;
}

.lp-company-hero--split_hero_reversed .lp-company-hero-media {
  grid-column: 1;
  position: relative;
}

.lp-company-hero--split_hero_reversed .lp-company-hero-text {
  grid-column: 3;
}

.lp-company-hero--split_hero_reversed .lp-company-hero-media::before {
  content: '';
  position: absolute;
  inset: -20px 20px 20px -20px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--theme-primary-color) 14%, transparent);
  z-index: -1;
}

/* centered_hero / centered_hero_reversed: single narrower column, bigger
   centered heading with an underline rule, image cropped shorter+wider so
   it reads as a banner rather than a portrait. */
.lp-company-hero--centered_hero,
.lp-company-hero--centered_hero_reversed {
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

/* Reset the split layout's explicit grid-column placement (3/1) and its
   grid-row pinning back to a single stacked column here - these variants
   order the same two elements vertically (separate rows) via `order`
   instead. */
.lp-company-hero--centered_hero .lp-company-hero-media,
.lp-company-hero--centered_hero_reversed .lp-company-hero-media,
.lp-company-hero--centered_hero .lp-company-hero-text,
.lp-company-hero--centered_hero_reversed .lp-company-hero-text {
  grid-column: 1;
  grid-row: auto;
}

.lp-company-hero--centered_hero .lp-company-hero-media,
.lp-company-hero--centered_hero_reversed .lp-company-hero-media { order: 0; }

.lp-company-hero--centered_hero_reversed .lp-company-hero-media { order: -1; }

.lp-company-hero--centered_hero .lp-company-hero-text { order: -1; }

.lp-company-hero--centered_hero .lp-company-hero-media img,
.lp-company-hero--centered_hero_reversed .lp-company-hero-media img { height: 320px; }

.lp-company-hero--centered_hero .lp-company-hero-text h2,
.lp-company-hero--centered_hero_reversed .lp-company-hero-text h2 {
  font-size: 32px;
  position: relative;
  padding-bottom: 16px;
}

.lp-company-hero--centered_hero .lp-company-hero-text h2::after,
.lp-company-hero--centered_hero_reversed .lp-company-hero-text h2::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--theme-primary-color);
}

.lp-company-hero--centered_hero .lp-company-hero-text .lp-rich-content,
.lp-company-hero--centered_hero_reversed .lp-company-hero-text .lp-rich-content {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 980px) {
  .lp-company-hero--split_hero,
    .lp-company-hero--split_hero_reversed { grid-template-columns: minmax(0, 1fr); }

  .lp-company-hero--split_hero .lp-company-hero-media,
    .lp-company-hero--split_hero .lp-company-hero-text,
    .lp-company-hero--split_hero_reversed .lp-company-hero-media,
    .lp-company-hero--split_hero_reversed .lp-company-hero-text { grid-column: 1; }

  .lp-company-hero--split_hero .lp-company-hero-media { order: 2; }

  .lp-company-hero--split_hero_reversed .lp-company-hero-media { order: 0; }

  .lp-company-hero--split_hero .lp-company-hero-media::before,
    .lp-company-hero--split_hero_reversed .lp-company-hero-media::before { display: none; }
}

/* ==========================================================================
   5. CUSTOM TEXT
   Free-form rich text block
   Classes:
     .lp-custom-text
   ========================================================================== */

/* --- .lp-custom --- */

.lp-custom-text {
  max-width: 780px;
}

.lp-custom-text h2 {
  font-size: 32px;
  margin-bottom: 16px;
}

/* ==========================================================================
   6. GALLERY MEDIAS
   grid_4 / masonry / bento / carousel_static / carousel_auto (coverflow) + lightbox
   Classes:
     .lp-gallery-grid, .lp-gallery-thumb, .lp-lightbox, .lp-lightbox-img,
     .lp-lightbox-caption, .lp-lightbox-close, .lp-gallery--masonry, .lp-gallery--bento,
     .lp-gallery--carousel_static, .lp-carousel-track, .lp-coverflow, .lp-coverflow-dots,
     .lp-coverflow-dot, .lp-coverflow-stage, .lp-coverflow-slide, .lp-gallery-more-line,
     .lp-gallery-more-link
   ========================================================================== */

/* --- .lp-gallery --- */

.lp-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.lp-gallery-thumb {
  position: relative;
  border: 0;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4 / 3;
  background: var(--lp-surface);
}

.lp-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.lp-gallery-thumb:hover img {
  transform: scale(1.06);
}

/* --- .lp-lightbox --- */

.lp-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(10, 12, 20, 0.92);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 40px;
}

.lp-lightbox.is-open {
  display: flex;
}

.lp-lightbox-img {
  max-width: 90vw;
  max-height: 80vh;
  border-radius: 10px;
  object-fit: contain;
}

.lp-lightbox-caption {
  margin-top: 16px;
  color: #fff;
  font-size: 14px;
}

.lp-lightbox-close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.lp-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* --- .lp-gallery --- */

@media (max-width: 980px) {
  .lp-gallery-grid {
      grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
  .lp-gallery-grid {
      grid-template-columns: 1fr;
    }
}

/* --- .lp-gallery--masonry --- */

/* Gallery */
.lp-gallery--masonry {
  display: block;
  column-count: 4;
  column-gap: 18px;
}

.lp-gallery--masonry .lp-gallery-thumb {
  display: block;
  width: 100%;
  margin-bottom: 18px;
  break-inside: avoid;
  aspect-ratio: 4 / 3;
}

.lp-gallery--masonry .lp-gallery-thumb:nth-child(3n+1) { aspect-ratio: 3 / 4; }

.lp-gallery--masonry .lp-gallery-thumb:nth-child(5n+2) { aspect-ratio: 1 / 1; }

/* --- .lp-gallery--bento --- */

.lp-gallery--bento {
  grid-auto-rows: 190px;
  grid-auto-flow: dense;
}

.lp-gallery--bento .lp-gallery-thumb { aspect-ratio: auto; }

.lp-gallery--bento .lp-gallery-thumb:nth-child(8n+1) { grid-column: span 2; grid-row: span 2; }

/* the wide tile sits on the right of its row (cols 3-4); the two small tiles that follow
   fill cols 1-2 of that row thanks to grid-auto-flow: dense */
.lp-gallery--bento .lp-gallery-thumb:nth-child(8n+6) { grid-column: 3 / span 2; }

/* --- .lp-gallery--carousel_static --- */

.lp-gallery--carousel_static.lp-carousel-track > .lp-gallery-thumb {
  flex: 0 0 min(340px, 80%);
}

/* --- .lp-coverflow --- */

/* Gallery: carousel_auto "coverflow" - a centered slide flanked by
   progressively smaller/rotated/faded slides in 3D. Index-based (see the
   JS in gallery.php): every slide always exists in the DOM, positioned by
   its --lp-cf-offset custom property (0 = center, ±1/±2 = each step out). */
/* No background/border-radius/overflow-hidden here on purpose - this isn't
   a boxed panel nested inside the section, it sits directly on the
   section's own background (whatever the admin picked) and the side slides
   are allowed to bleed past the stage's own edges instead of being clipped. */
.lp-coverflow {
  position: relative;
  padding: 90px 0 10px;
}

.lp-coverflow-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 10px;
}

.lp-coverflow-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(120, 120, 120, 0.35);
  cursor: pointer;
}

.lp-coverflow-dot.is-active {
  background: var(--theme-primary-color);
}

.lp-coverflow-stage {
  position: relative;
  height: 520px;
  perspective: 1600px;
}

.lp-coverflow-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  /* width: min(440px, 68vw); */
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  background: var(--lp-surface);
  box-shadow: 0 20px 45px rgba(1, 1, 1, 0.35);
  /* transform/opacity/z-index/filter are set inline by JS per slide, driven
     by its distance from the current index (see renderCoverflow() in
     gallery.php) - a plain CSS rule can't express "shrink further the
     farther out you are" for an arbitrary number of rings, only JS can. */
  transition: transform 0.5s ease, opacity 0.5s ease, filter 0.5s ease;
}

.lp-coverflow-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-coverflow-slide.is-active {
  box-shadow: 0 20px 45px rgba(1, 1, 1, 0.35);
}

/* --- .lp-gallery--masonry --- */

@media (max-width: 980px) {
  .lp-gallery--masonry { column-count: 2; }

  .lp-gallery--bento { grid-template-columns: repeat(2, 1fr); }

  .lp-gallery--bento .lp-gallery-thumb:nth-child(8n+1) { grid-column: span 2; }

  .lp-gallery--bento .lp-gallery-thumb:nth-child(8n+6) { grid-column: auto; }

  .lp-coverflow-stage { height: 380px; }

  .lp-coverflow-slide { width: min(320px, 70vw); }
}

@media (max-width: 640px) {
  .lp-gallery--masonry { column-count: 1; }

  .lp-gallery--bento { grid-template-columns: 1fr; }

  .lp-gallery--bento .lp-gallery-thumb:nth-child(8n+1),
    .lp-gallery--bento .lp-gallery-thumb:nth-child(8n+6) { grid-column: auto; grid-row: auto; }
}

/* --- .lp-gallery --- */

.lp-gallery-thumb.is-extra {
  display: none;
}

.lp-gallery-thumb.is-revealing {
  animation: lpOfferReveal .55s ease both;
}

/* "Show more": a full-width line with the label and a down arrow sitting in the middle */
.lp-gallery-more-line {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 36px;
}

.lp-gallery-more-line::before,
.lp-gallery-more-line::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: color-mix(in srgb, var(--lp-ink, #0c1a3b) 22%, transparent);
}

.lp-gallery-more-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 0;
  background: none;
  color: var(--lp-ink, #0c1a3b);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease;
}

.lp-gallery-more-link i {
  font-size: 16px;
  color: var(--theme-primary-color);
  transition: transform .3s ease;
}

.lp-gallery-more-link:hover {
  color: var(--theme-primary-color);
}

.lp-gallery-more-link:hover i {
  transform: translateY(4px);
}

/* everything showing: the arrow points up ("Show less") */
.lp-gallery-more-line.is-expanded .lp-gallery-more-link {
  flex-direction: column-reverse;
}

.lp-gallery-more-line.is-expanded .lp-gallery-more-link i {
  transform: rotate(180deg);
}

.lp-gallery-more-line.is-expanded .lp-gallery-more-link:hover i {
  transform: rotate(180deg) translateY(4px); /* rotated, so this nudges it up */
}

@media (prefers-reduced-motion: reduce) {
  .lp-gallery-thumb.is-revealing { animation: none; }
}

.lp-gallery-thumb:nth-child(1) { --d: 0.00s; }

.lp-gallery-thumb:nth-child(2) { --d: 0.09s; }

.lp-gallery-thumb:nth-child(3) { --d: 0.18s; }

.lp-gallery-thumb:nth-child(4) { --d: 0.27s; }

.lp-gallery-thumb:nth-child(5) { --d: 0.36s; }

.lp-gallery-thumb:nth-child(6) { --d: 0.45s; }

.lp-gallery-thumb:nth-child(7) { --d: 0.54s; }

.lp-gallery-thumb:nth-child(8) { --d: 0.63s; }

.lp-gallery-thumb:nth-child(9) { --d: 0.72s; }

.lp-gallery-thumb:nth-child(10) { --d: 0.81s; }

.lp-gallery-thumb:nth-child(11) { --d: 0.90s; }

.lp-gallery-thumb:nth-child(12) { --d: 0.99s; }

.lp-gallery-thumb:nth-child(n+13) { --d: 1.1s; }

/* ==========================================================================
   7. SHOWCASE - Property Attractions & Happenings
   card_grid / list_row (route timeline)
   Classes:
     .lp-grp-attar-happ-list, .lp-grp-attar-happ-card, .lp-grp-attar-happ-img, .lp-grp-attar-happ-overlay,
     .lp-grp-attar-happ-meta, .lp-grp-attar-happ-more, .lp-grp-attar-happ--list_row,
     .lp-grp-attar-happ--windowed, .lp-grp-attar-happ-single-feat-nav, .lp-carousel-btn
   ========================================================================== */

/* --- .lp-grp-attar-happ --- */

.lp-grp-attar-happ-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.lp-grp-attar-happ-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 22px;
  aspect-ratio: 4 / 5;
  background: #1b2438;
  color: #fff;
  text-decoration: none;
}

.lp-grp-attar-happ-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

a.lp-grp-attar-happ-card:hover .lp-grp-attar-happ-img {
  transform: scale(1.07);
}

.lp-grp-attar-happ-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 26px 24px;
  background: linear-gradient(180deg, rgba(10, 14, 26, 0) 35%, rgba(10, 14, 26, 0.88) 100%);
}

.lp-grp-attar-happ-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.lp-grp-attar-happ-overlay h3 {
  color: #fff;
  line-height: 1.2;
}

.lp-grp-attar-happ-overlay p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
}

.lp-grp-attar-happ-more {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}

.lp-grp-attar-happ-card:hover .lp-grp-attar-happ-more {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 980px) {
  .lp-grp-attar-happ-list {
      grid-template-columns: repeat(2, 1fr);
    }

  .lp-grp-attar-happ--list_row .lp-grp-attar-happ-list {
      grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
  .lp-grp-attar-happ-list {
      grid-template-columns: 1fr;
    }

  .lp-grp-attar-happ--list_row .lp-grp-attar-happ-card {
      grid-template-columns: 1fr;
    }

  .lp-grp-attar-happ--list_row .lp-grp-attar-happ-overlay {
      grid-column: 1;
      grid-row: auto;
    }
}

/* --- .lp-grp-attar-happ--list_row --- */

/* A dashed route runs down the left with a numbered pin per stop; each stop is a
   light card with a photo on the left and the details on the right. */
/* the route line, behind the pins */
.lp-grp-attar-happ--list_row a.lp-grp-attar-happ-card:hover {
  transform: translateY(-4px);
}

/* numbered pin on the route */
.lp-grp-attar-happ--list_row a.lp-grp-attar-happ-card:hover .lp-grp-attar-happ-img {
  transform: none;
}

.lp-grp-attar-happ--list_row .lp-grp-attar-happ-meta {
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-primary-color) 10%, #fff);
  color: var(--theme-primary-color);
  letter-spacing: 0.04em;
}

.lp-grp-attar-happ--list_row .lp-grp-attar-happ-overlay h3 {
  color: var(--lp-ink);
}

.lp-grp-attar-happ--list_row .lp-grp-attar-happ-overlay p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: var(--theme-text-muted);
  font-size: 14.5px;
}

.lp-grp-attar-happ--list_row .lp-grp-attar-happ-more {
  opacity: 1;
  transform: none;
  margin-top: 2px;
  color: var(--theme-primary-color);
  font-size: 14px;
}

@media (max-width: 980px) {
  .lp-grp-attar-happ--list_row .lp-grp-attar-happ-card { grid-template-columns: 220px 1fr; gap: 20px; }

  .lp-grp-attar-happ--list_row .lp-grp-attar-happ-img { height: 170px; }
}

@media (max-width: 640px) {
  .lp-grp-attar-happ--list_row .lp-grp-attar-happ-list { padding-left: 50px; }

  .lp-grp-attar-happ--list_row .lp-grp-attar-happ-list::before { left: 15px; }

  .lp-grp-attar-happ--list_row .lp-grp-attar-happ-card {
      grid-template-columns: 1fr;
      gap: 14px;
    }

  .lp-grp-attar-happ--list_row .lp-grp-attar-happ-card::before {
      left: -50px;
      top: 44px;
      transform: none;
      width: 32px;
      height: 32px;
      font-size: 14px;
    }

  .lp-grp-attar-happ--list_row .lp-grp-attar-happ-img { grid-column: 1; height: 190px; }

  .lp-grp-attar-happ--list_row .lp-grp-attar-happ-overlay { grid-column: 1; grid-row: auto; padding: 0 6px 8px; }
}

/* Cards are re-ordered with the flex `order` property by the script, so the list becomes
   a flex column; the numbered pin now reads the item's own number (data-stop). */
.lp-grp-attar-happ--list_row .lp-grp-attar-happ-list {
  grid-template-columns: 1fr;
  gap: 26px;
  position: relative;
  padding-left: 68px;
  counter-reset: lpStop;
  display: flex;
  flex-direction: column;
}

/* --- .lp-grp-attar-happ--windowed --- */

.lp-grp-attar-happ--windowed {
  position: relative;
  padding-right: 76px;
}

.lp-grp-attar-happ--windowed .lp-grp-attar-happ-single-feat-nav {
  right: 0;
}

/* --- .lp-grp-attar-happ--list_row --- */

/* waiting stops: dimmed, compact - just the pin and the title, further down the route */
.lp-grp-attar-happ--list_row .lp-grp-attar-happ-card.is-waiting::before {
  background: color-mix(in srgb, var(--theme-primary-color) 35%, #fff);
  box-shadow: none;
}

.lp-grp-attar-happ--list_row .lp-grp-attar-happ-card.is-waiting .lp-grp-attar-happ-img,
.lp-grp-attar-happ--list_row .lp-grp-attar-happ-card.is-waiting .lp-grp-attar-happ-meta,
.lp-grp-attar-happ--list_row .lp-grp-attar-happ-card.is-waiting p,
.lp-grp-attar-happ--list_row .lp-grp-attar-happ-card.is-waiting .lp-grp-attar-happ-more {
  display: none;
}

.lp-grp-attar-happ--list_row .lp-grp-attar-happ-card.is-waiting h3 {
  margin: 0;
}

.lp-grp-attar-happ--list_row .lp-grp-attar-happ-card.is-hidden {
  display: none;
}

.lp-grp-attar-happ--list_row .lp-grp-attar-happ-card.is-entering {
  animation: lpOfferReveal .5s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .lp-grp-attar-happ--list_row .lp-grp-attar-happ-card.is-entering { animation: none; }
}

/* --- .lp-grp-attar-happ--windowed --- */

@media (max-width: 640px) {
  .lp-grp-attar-happ--windowed { padding-right: 52px; }

  .lp-grp-attar-happ--windowed .lp-grp-attar-happ-single-feat-nav .lp-carousel-btn { width: 36px; height: 36px; }
}

/* --- .lp-grp-attar-happ--list_row --- */

/* The single full-height line is replaced by a segment per card that runs from the
   mid-point of the gap above to the mid-point of the gap below, so neighbours join up.
   The first stop starts at its pin and the last stop ends at its pin. */
.lp-grp-attar-happ--list_row .lp-grp-attar-happ-list::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 40px;
  bottom: 40px;
  border-left: 2px dashed color-mix(in srgb, var(--theme-primary-color) 45%, transparent);
  display: none;
}

.lp-grp-attar-happ--list_row .lp-grp-attar-happ-card::after {
  content: "";
  position: absolute;
  left: -47px;
  top: -13px;
  bottom: -13px;
  z-index: 1;
  border-left: 2px dashed color-mix(in srgb, var(--theme-primary-color) 45%, transparent);
  pointer-events: none;
}

.lp-grp-attar-happ--list_row .lp-grp-attar-happ-card.is-route-first::after { top: 50%; }

.lp-grp-attar-happ--list_row .lp-grp-attar-happ-card.is-route-last::after { bottom: 50%; }

.lp-grp-attar-happ--list_row .lp-grp-attar-happ-card.is-route-first.is-route-last::after { display: none; }

.lp-grp-attar-happ--list_row .lp-grp-attar-happ-card::before {
  content: attr(data-stop);
  position: absolute;
  left: -68px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--theme-primary-color);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(12, 26, 59, 0.2);
  z-index: 2;
}

.lp-grp-attar-happ--list_row .lp-grp-attar-happ-card {
  aspect-ratio: auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 325px;
  position: relative;
  align-items: center;
  gap: 28px;
  padding: 14px;
  overflow: visible;
  border-radius: 18px;
  border: 1px solid var(--lp-line);
  background: #fff;
  color: var(--lp-ink);
  box-shadow: 0 6px 18px rgba(12, 26, 59, 0.06);
  counter-increment: lpStop;
  transition: transform .3s ease;
}

.lp-grp-attar-happ--list_row .lp-grp-attar-happ-card.is-waiting {
  grid-template-columns: 1fr;
  padding: 14px 22px;
  opacity: .5;
  box-shadow: none;
  pointer-events: none;
  transform: none;
  min-height: 0;
}

@media (max-width: 640px) {
  .lp-grp-attar-happ--list_row .lp-grp-attar-happ-card { min-height: 0; }

  .lp-grp-attar-happ--list_row .lp-grp-attar-happ-img { height: 190px; min-height: 0; }

  .lp-grp-attar-happ--list_row .lp-grp-attar-happ-card::after { left: -35px; }

  /* phone pins sit near the top of the card (60px), not at its middle */

  .lp-grp-attar-happ--list_row .lp-grp-attar-happ-card.is-route-first::after { top: 60px; }

  .lp-grp-attar-happ--list_row .lp-grp-attar-happ-card.is-route-last::after { bottom: auto; height: 73px; top: -13px; }
}

/* The photo is taken out of the flow (absolutely positioned inside the card's padding
   box), so a tall or wide photo can't stretch the row - the card is as tall as its text
   and the 325px minimum, and the photo simply fills the space on the left. */
.lp-grp-attar-happ--list_row .lp-grp-attar-happ-img {
  position: absolute;
  grid-column: 1;
  min-height: 0;
  width: 280px;
  height: calc(100% - 28px);
  border-radius: 12px;
  object-fit: cover;
  align-self: auto;
  top: 14px;
  left: 14px;
}

.lp-grp-attar-happ--list_row .lp-grp-attar-happ-overlay {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1;
  justify-content: center;
  background: transparent;
  padding: 6px 22px 6px 308px;
  inset: auto;
  gap: 8px;
}

.lp-grp-attar-happ--list_row .lp-grp-attar-happ-card.is-waiting .lp-grp-attar-happ-overlay {
  grid-column: 1;
  padding: 0;
}

@media (max-width: 980px) {
  .lp-grp-attar-happ--list_row .lp-grp-attar-happ-img { width: 220px; }

  .lp-grp-attar-happ--list_row .lp-grp-attar-happ-overlay { padding-left: 248px; }
}

@media (max-width: 640px) {
  /* stacked on phones: photo on top at a fixed height, back in the flow */

  .lp-grp-attar-happ--list_row .lp-grp-attar-happ-img {
      position: relative;
      top: auto;
      left: auto;
      width: 100%;
      height: 190px;
    }

  .lp-grp-attar-happ--list_row .lp-grp-attar-happ-overlay { padding: 0 6px 8px; }
}

/* --- .lp-grp-attar-happ--windowed --- */

/* moving along the route swaps cards around: never let the browser "anchor" the scroll
   position to a card that just moved */
.lp-grp-attar-happ--windowed,
.lp-grp-attar-happ--windowed * {
  overflow-anchor: none;
}

/* --- .lp-grp-attar-happ--list_row --- */

.lp-grp-attar-happ--list_row .lp-grp-attar-happ-card:nth-child(1) { --d: 0.00s; }

.lp-grp-attar-happ--list_row .lp-grp-attar-happ-card:nth-child(2) { --d: 0.20s; }

.lp-grp-attar-happ--list_row .lp-grp-attar-happ-card:nth-child(3) { --d: 0.40s; }

.lp-grp-attar-happ--list_row .lp-grp-attar-happ-card:nth-child(4) { --d: 0.60s; }

.lp-grp-attar-happ--list_row .lp-grp-attar-happ-card:nth-child(5) { --d: 0.80s; }

.lp-grp-attar-happ--list_row .lp-grp-attar-happ-card:nth-child(6) { --d: 1.00s; }

.lp-grp-attar-happ--list_row .lp-grp-attar-happ-card:nth-child(n+7) { --d: 1.2s; }

/* ==========================================================================
   8. STACKED CARDS - Single Featured (Attractions & Happenings)
   Centre card with previous / next peeking
   Classes:
     .lp-grp-attar-happ-single-feat, .lp-grp-attar-happ-single-feat-stage, .lp-grp-attar-happ-single-feat-card, .lp-grp-attar-happ-single-feat-img, .lp-grp-attar-happ-single-feat-body,
     .lp-grp-attar-happ-single-feat-meta, .lp-grp-attar-happ-single-feat-cta, .lp-grp-attar-happ-single-feat-nav, .lp-grp-attar-happ-single-feat-dots, .lp-grp-attar-happ-single-feat-dot,
     .lp-carousel-btn
   ========================================================================== */

/* --- .lp-grp-attar-happ-single-feat --- */

/* single_featured carousel: one hero card per view, at every width */
/* list_row carousel: vertical, 3 rows visible (height set by JS) */
.lp-grp-attar-happ-single-feat {
  --strip: 30px;
  position: relative;
  padding-right: 72px;
}

.lp-grp-attar-happ-single-feat-stage {
  display: grid;
  padding: var(--strip) 0;
}

.lp-grp-attar-happ-single-feat-card {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 500px;
  overflow: hidden;
  border-radius: 26px;
  background: #1b2438;
  color: #fff;
  z-index: 1;
  margin-inline: calc(var(--abs) * 3.2%);
  transform: translateY(calc(var(--off) * var(--strip)));
  cursor: pointer;
  transition: transform .5s ease, margin .5s ease, opacity .5s ease;
}

.lp-grp-attar-happ-single-feat-card.is-active {
  z-index: 3;
  cursor: default;
  box-shadow: 0 20px 48px rgba(12, 26, 59, 0.2);
}

.lp-grp-attar-happ-single-feat-card.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.lp-grp-attar-happ-single-feat-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .4s ease, filter .4s ease;
}

/* previous / next: the same photo, greyed out and faded */
.lp-grp-attar-happ-single-feat-card:not(.is-active) {
  background: #e4e7ec;
}

.lp-grp-attar-happ-single-feat-card:not(.is-active) .lp-grp-attar-happ-single-feat-img {
  filter: grayscale(1);
  opacity: .45;
}

.lp-grp-attar-happ-single-feat-card:not(.is-active):hover .lp-grp-attar-happ-single-feat-img {
  opacity: .65;
}

.lp-grp-attar-happ-single-feat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(10, 14, 26, 0.86) 0%, rgba(10, 14, 26, 0.35) 65%, rgba(10, 14, 26, 0.15) 100%);
  opacity: 1;
  transition: opacity .4s ease;
}

.lp-grp-attar-happ-single-feat-card:not(.is-active)::before {
  opacity: 0;
}

.lp-grp-attar-happ-single-feat-body {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 2;
  max-width: 620px;
  padding: 48px 52px;
  opacity: 0;
  transition: opacity .4s ease;
}

.lp-grp-attar-happ-single-feat-card.is-active .lp-grp-attar-happ-single-feat-body {
  opacity: 1;
  transition-delay: .15s;
}

.lp-grp-attar-happ-single-feat-meta {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.lp-grp-attar-happ-single-feat-body h3 {
  color: #fff;
  line-height: 1.2;
  margin-bottom: 12px;
}

.lp-grp-attar-happ-single-feat-body p {
  margin: 0 0 22px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
}

.lp-grp-attar-happ-single-feat-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.lp-grp-attar-happ-single-feat-cta:hover {
  background: #fff;
  color: #1b2438;
}

.lp-grp-attar-happ-single-feat-nav {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--theme-text-muted);
}

.lp-grp-attar-happ-single-feat-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.lp-grp-attar-happ-single-feat-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--lp-line, #cfd4dc);
  cursor: pointer;
  transition: height .3s ease, background .3s ease;
}

.lp-grp-attar-happ-single-feat-dot:hover {
  background: var(--theme-text-muted);
}

.lp-grp-attar-happ-single-feat-dot.is-active {
  height: 28px;
  background: var(--theme-primary-color);
}

@media (max-width: 640px) {
  .lp-grp-attar-happ-single-feat { --strip: 22px; padding-right: 56px; }

  .lp-grp-attar-happ-single-feat-nav .lp-carousel-btn { width: 38px; height: 38px; }

  .lp-grp-attar-happ-single-feat-card { min-height: 475px; margin-inline: calc(var(--abs) * 2.5%); }

  .lp-grp-attar-happ-single-feat-body { padding: 30px 24px; }
}

/* ==========================================================================
   9. OFFER - Deals & Promotions
   card_grid (voucher) / list_row (coupon) + Single Featured coupon ticket
   Classes:
     .lp-grp-promo-deal-list, .lp-grp-promo-deal-card, .lp-grp-promo-deal-media, .lp-grp-promo-deal-body, .lp-grp-promo-deal-meta,
     .lp-grp-promo-deal-cta, .lp-grp-promo-deal-cta--static, .lp-grp-promo-deal--list_row, .lp-grp-promo-deal-single-feat-stage,
     .lp-grp-promo-deal-single-feat-slide, .lp-grp-promo-deal-single-feat-card, .lp-grp-promo-deal-single-feat-media, .lp-grp-promo-deal-single-feat-body,
     .lp-grp-promo-deal-single-feat-meta, .lp-grp-promo-deal-single-feat-serial, .lp-grp-promo-deal-single-feat-cta, .lp-grp-promo-deal-single-feat-nav, .lp-grp-promo-deal-single-feat-dots,
     .lp-grp-promo-deal-single-feat-dot, .lp-grp-promo-deal--card_grid, .lp-carousel-track, .lp-grp-promo-deal-stub,
     .lp-grp-promo-deal-more
   ========================================================================== */

/* --- .lp-grp-promo-deal --- */

/* list_row: image left, dark text panel right */
/* single_featured: one wide hero card */
.lp-grp-promo-deal-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.lp-grp-promo-deal-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(12, 26, 59, 0.06);
  transition: box-shadow .25s ease, transform .25s ease;
}

.lp-grp-promo-deal-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(12, 26, 59, 0.12);
}

.lp-grp-promo-deal-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.lp-grp-promo-deal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-grp-promo-deal-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: 22px 24px 26px;
}

.lp-grp-promo-deal-meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--theme-primary-color);
  margin-bottom: 8px;
}

.lp-grp-promo-deal-body h3 {
  margin-bottom: 8px;
}

.lp-grp-promo-deal-body p {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--theme-text-muted);
}

.lp-grp-promo-deal-cta {
  margin-top: auto;
}

.lp-grp-promo-deal-cta--static {
  font-size: 13px;
  font-weight: 600;
  color: var(--theme-text-muted);
  border-top: 1px dashed var(--lp-line);
  padding-top: 12px;
  width: 100%;
}

@media (max-width: 980px) {
  .lp-grp-promo-deal-list {
      grid-template-columns: repeat(2, 1fr);
    }

  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-list {
      grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
  .lp-grp-promo-deal-list {
      grid-template-columns: 1fr;
    }

  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-card {
      flex-direction: column;
    }

  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-media {
      flex-basis: auto;
      aspect-ratio: 16 / 10;
    }
}

/* --- .lp-grp-promo-deal-single-feat --- */

.lp-grp-promo-deal-single-feat-stage {
  display: grid;
}

.lp-grp-promo-deal-single-feat-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}

.lp-grp-promo-deal-single-feat-slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease;
}

/* the outgoing ticket stays visible just long enough to tear apart */
.lp-grp-promo-deal-single-feat-slide.is-leaving {
  visibility: visible;
  transition: opacity .3s ease .4s, visibility 0s linear .7s;
}

.lp-grp-promo-deal-single-feat-card {
  --lp-ticket-split: 44%;
  position: relative;
  display: grid;
  grid-template-columns: var(--lp-ticket-split) 1fr;
  /* fixed size: the photo fills this box, it never decides the ticket's height */
  height: 500px;
  border-radius: 18px;
  /* static shadow on the (untransformed) card rather than a filter: a filter on the
     slide re-rasterises the masked halves every frame of the tear and made it stutter */
  box-shadow: 0 14px 28px rgba(12, 26, 59, 0.16);
}

/* two halves - photo and details - so the ticket can tear along the perforation;
   each carries half of the top/bottom notches */
.lp-grp-promo-deal-single-feat-media,
.lp-grp-promo-deal-single-feat-body {
  transition: transform .55s cubic-bezier(.5, 0, .3, 1);
  will-change: transform;
  backface-visibility: hidden;
}

.lp-grp-promo-deal-single-feat-media {
  position: relative;
  overflow: hidden;
  border-radius: 18px 0 0 18px;
  transform-origin: right bottom;
  -webkit-mask:
    radial-gradient(circle 16px at 100% 0, #0000 15.5px, #000 16px),
    radial-gradient(circle 16px at 100% 100%, #0000 15.5px, #000 16px);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 16px at 100% 0, #0000 15.5px, #000 16px),
    radial-gradient(circle 16px at 100% 100%, #0000 15.5px, #000 16px);
  mask-composite: intersect;
}

.lp-grp-promo-deal-single-feat-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 44px 52px;
  background: #fff;
  border-radius: 0 18px 18px 0;
  transform-origin: left bottom;
  -webkit-mask:
    radial-gradient(circle 16px at 0 0, #0000 15.5px, #000 16px),
    radial-gradient(circle 16px at 0 100%, #0000 15.5px, #000 16px);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 16px at 0 0, #0000 15.5px, #000 16px),
    radial-gradient(circle 16px at 0 100%, #0000 15.5px, #000 16px);
  mask-composite: intersect;
}

/* tear: outgoing halves split apart; incoming halves stitch together */
.lp-grp-promo-deal-single-feat-slide.is-leaving .lp-grp-promo-deal-single-feat-media { transform: translate3d(-52px, 0, 0) rotate(-6deg); }

.lp-grp-promo-deal-single-feat-slide.is-leaving .lp-grp-promo-deal-single-feat-body { transform: translate3d(52px, 0, 0) rotate(5deg); }

.lp-grp-promo-deal-single-feat-slide.is-active .lp-grp-promo-deal-single-feat-media { animation: lpTicketJoinLeft .6s cubic-bezier(.3, 0, .2, 1) both; }

.lp-grp-promo-deal-single-feat-slide.is-active .lp-grp-promo-deal-single-feat-body { animation: lpTicketJoinRight .6s cubic-bezier(.3, 0, .2, 1) both; }

/* dashed perforation between photo and details */
.lp-grp-promo-deal-single-feat-body::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 0;
  border-left: 2px dashed var(--lp-line, #cfd4dc);
}

.lp-grp-promo-deal-single-feat-meta {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--theme-primary-color);
}

.lp-grp-promo-deal-single-feat-body h3,
.lp-grp-promo-deal-single-feat-body p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lp-grp-promo-deal-single-feat-body h3 {
  line-height: 1.2;
  margin-bottom: 14px;
  -webkit-line-clamp: 3;
}

.lp-grp-promo-deal-single-feat-body p {
  -webkit-line-clamp: 4;
  margin: 0 0 24px;
  font-size: 15px;
  color: var(--theme-text-muted);
}

/* decorative barcode + serial number on the ticket's lower-right corner */
.lp-grp-promo-deal-single-feat-body::after {
  content: "";
  position: absolute;
  right: 32px;
  bottom: 46px;
  width: 110px;
  height: 30px;
  opacity: .22;
  background: repeating-linear-gradient(90deg, #0c1a3b 0 2px, transparent 2px 4px, #0c1a3b 4px 5px, transparent 5px 9px, #0c1a3b 9px 12px, transparent 12px 14px);
  pointer-events: none;
}

/* the barcode + serial are pure decoration: hide them the moment a tear starts and
   bring them back once the halves have stitched together, so they never trail the tear */
.lp-grp-promo-deal-single-feat-slide.is-leaving .lp-grp-promo-deal-single-feat-body::after,
.lp-grp-promo-deal-single-feat-slide.is-leaving .lp-grp-promo-deal-single-feat-serial {
  opacity: 0;
  animation: none;
  transition: none;
}

.lp-grp-promo-deal-single-feat-slide.is-active .lp-grp-promo-deal-single-feat-body::after {
  animation: lpTicketDeco .4s ease .7s both;
}

.lp-grp-promo-deal-single-feat-slide.is-active .lp-grp-promo-deal-single-feat-serial {
  animation: lpTicketDeco .4s ease .7s both;
}

.lp-grp-promo-deal-single-feat-serial {
  --lp-deco-opacity: .7;
  position: absolute;
  right: 32px;
  bottom: 24px;
  width: 110px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--theme-text-muted);
  opacity: .7;
}

/* details rise in one after another */
.lp-grp-promo-deal-single-feat-slide.is-active .lp-grp-promo-deal-single-feat-body > :not(.lp-grp-promo-deal-single-feat-serial) {
  animation: lpTicketRise .6s ease both;
}

.lp-grp-promo-deal-single-feat-slide.is-active .lp-grp-promo-deal-single-feat-body > :nth-child(1) { animation-delay: .25s; }

.lp-grp-promo-deal-single-feat-slide.is-active .lp-grp-promo-deal-single-feat-body > :nth-child(2) { animation-delay: .35s; }

.lp-grp-promo-deal-single-feat-slide.is-active .lp-grp-promo-deal-single-feat-body > :nth-child(3) { animation-delay: .45s; }

.lp-grp-promo-deal-single-feat-slide.is-active .lp-grp-promo-deal-single-feat-body > :nth-child(4) { animation-delay: .55s; }

.lp-grp-promo-deal-single-feat-slide.is-active .lp-grp-promo-deal-single-feat-body > :nth-child(5) { animation-delay: .65s; }

/* slow "Ken Burns" zoom while the ticket is showing */
.lp-grp-promo-deal-single-feat-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

.lp-grp-promo-deal-single-feat-slide.is-active .lp-grp-promo-deal-single-feat-media img {
  animation: lpTicketZoom 3s ease-out .5s both;
}

/* foil sheen: one soft glint across the ticket once the photo zoom has finished (.5s delay + 3s) */
.lp-grp-promo-deal-single-feat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 18px;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58%) 130% 0 / 250% 100% no-repeat;
}

.lp-grp-promo-deal-single-feat-slide.is-active .lp-grp-promo-deal-single-feat-card::before {
  animation: lpTicketSheen 1.3s ease-in-out 3.5s 1 both;
}

/* light sweep across the button on hover */
.lp-grp-promo-deal-single-feat-cta {
  position: relative;
  overflow: hidden;
}

.lp-grp-promo-deal-single-feat-cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
}

.lp-grp-promo-deal-single-feat-cta:hover::after {
  left: 130%;
  transition: left .7s ease;
}

.lp-grp-promo-deal-single-feat-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
}

.lp-grp-promo-deal-single-feat-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-grp-promo-deal-single-feat-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--lp-line, #cfd4dc);
  cursor: pointer;
  transition: width .3s ease, background .3s ease;
}

.lp-grp-promo-deal-single-feat-dot:hover { background: var(--theme-text-muted); }

.lp-grp-promo-deal-single-feat-dot.is-active {
  width: 28px;
  background: var(--theme-primary-color);
}

/* --- keyframes --- */

@keyframes lpTicketJoinLeft {
  from { opacity: 0; transform: translate3d(-52px, 0, 0) rotate(-6deg); }
  to { opacity: 1; transform: none; }
}

@keyframes lpTicketJoinRight {
  from { opacity: 0; transform: translate3d(52px, 0, 0) rotate(5deg); }
  to { opacity: 1; transform: none; }
}

@keyframes lpTicketSheen {
  from { background-position: 130% 0; }
  to { background-position: -30% 0; }
}

@keyframes lpTicketDeco {
  from { opacity: 0; }
  to { opacity: var(--lp-deco-opacity, .22); }
}

@keyframes lpTicketZoom {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

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

/* --- .lp-grp-promo-deal-single-feat --- */

@media (prefers-reduced-motion: reduce) {
  .lp-grp-promo-deal-single-feat-slide.is-active .lp-grp-promo-deal-single-feat-media,
    .lp-grp-promo-deal-single-feat-slide.is-active .lp-grp-promo-deal-single-feat-media img,
    .lp-grp-promo-deal-single-feat-slide.is-active .lp-grp-promo-deal-single-feat-card::before,
    .lp-grp-promo-deal-single-feat-slide.is-active .lp-grp-promo-deal-single-feat-body,
    .lp-grp-promo-deal-single-feat-slide.is-active .lp-grp-promo-deal-single-feat-body > *,
    .lp-grp-promo-deal-single-feat-slide.is-active .lp-grp-promo-deal-single-feat-body::after {
      animation: none;
    }

  .lp-grp-promo-deal-single-feat-slide.is-leaving .lp-grp-promo-deal-single-feat-media,
    .lp-grp-promo-deal-single-feat-slide.is-leaving .lp-grp-promo-deal-single-feat-body {
      transform: none;
    }
}

@media (max-width: 980px) {
  .lp-grp-promo-deal-single-feat-card {
      grid-template-columns: 1fr;
      grid-template-rows: 220px 1fr;
      height: 500px;
    }

  /* stacked: photo on top, details below - notches sit on the left/right edges of the seam */

  .lp-grp-promo-deal-single-feat-media {
      border-radius: 18px 18px 0 0;
      transform-origin: left bottom;
      -webkit-mask:
        radial-gradient(circle 14px at 0 100%, #0000 13.5px, #000 14px),
        radial-gradient(circle 14px at 100% 100%, #0000 13.5px, #000 14px);
      -webkit-mask-composite: source-in;
      mask:
        radial-gradient(circle 14px at 0 100%, #0000 13.5px, #000 14px),
        radial-gradient(circle 14px at 100% 100%, #0000 13.5px, #000 14px);
      mask-composite: intersect;
    }

  .lp-grp-promo-deal-single-feat-body {
      padding: 32px 28px 36px;
      border-radius: 0 0 18px 18px;
      transform-origin: right top;
      -webkit-mask:
        radial-gradient(circle 14px at 0 0, #0000 13.5px, #000 14px),
        radial-gradient(circle 14px at 100% 0, #0000 13.5px, #000 14px);
      -webkit-mask-composite: source-in;
      mask:
        radial-gradient(circle 14px at 0 0, #0000 13.5px, #000 14px),
        radial-gradient(circle 14px at 100% 0, #0000 13.5px, #000 14px);
      mask-composite: intersect;
    }

  .lp-grp-promo-deal-single-feat-body::before {
      top: 0;
      bottom: auto;
      left: 26px;
      right: 26px;
      border-left: 0;
      border-top: 2px dashed var(--lp-line, #cfd4dc);
    }

  .lp-grp-promo-deal-single-feat-body::after,
    .lp-grp-promo-deal-single-feat-serial { display: none; }

  .lp-grp-promo-deal-single-feat-slide.is-active .lp-grp-promo-deal-single-feat-media { animation-name: lpTicketJoinDown; }

  .lp-grp-promo-deal-single-feat-slide.is-active .lp-grp-promo-deal-single-feat-body { animation-name: lpTicketJoinUp; }

  .lp-grp-promo-deal-single-feat-slide.is-leaving .lp-grp-promo-deal-single-feat-media { transform: translate3d(0, -32px, 0) rotate(-3deg); }

  .lp-grp-promo-deal-single-feat-slide.is-leaving .lp-grp-promo-deal-single-feat-body { transform: translate3d(0, 32px, 0) rotate(3deg); }
}

/* --- keyframes --- */

@keyframes lpTicketJoinDown {
  from { opacity: 0; transform: translate3d(0, -32px, 0) rotate(-3deg); }
  to { opacity: 1; transform: none; }
}

@keyframes lpTicketJoinUp {
  from { opacity: 0; transform: translate3d(0, 32px, 0) rotate(3deg); }
  to { opacity: 1; transform: none; }
}

/* --- .lp-grp-promo-deal--card_grid --- */

.lp-grp-promo-deal--card_grid .lp-grp-promo-deal-card,
.lp-grp-promo-deal--list_row .lp-grp-promo-deal-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  /* filter (not box-shadow) so the shadow follows the notches */
  filter: drop-shadow(0 10px 20px rgba(12, 26, 59, 0.14));
  transition: transform .3s ease;
}

/* hover: the ticket just floats up - no change of shadow */
.lp-grp-promo-deal--card_grid .lp-grp-promo-deal-card:hover,
.lp-grp-promo-deal--list_row .lp-grp-promo-deal-card:hover {
  box-shadow: none;
  transform: translateY(-8px);
}

/* The section is one viewport tall, so the ticket's height follows the viewport
   (leaving room for the heading and the arrows/dots): the photo flexes to fill
   whatever the text + stub don't use, so it never pushes those out of view. */
.lp-grp-promo-deal--card_grid .lp-grp-promo-deal-card {
  height: clamp(500px, calc(100svh - 360px), 560px);
}

/* roomy text area (about 4 lines of description); the photo takes what's left */
.lp-grp-promo-deal--card_grid .lp-grp-promo-deal-body p {
  -webkit-line-clamp: 4;
  margin-bottom: 0;
}

/* keep the drop-shadow from being clipped by the carousel track */
.lp-grp-promo-deal--card_grid .lp-carousel-track {
  padding: 4px 4px 30px;
}

.lp-grp-promo-deal--card_grid .lp-grp-promo-deal-body p,
.lp-grp-promo-deal--list_row .lp-grp-promo-deal-body p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* tall portrait ticket: big photo on top, text in the middle, CTA footer. Outer
   corners are concave cut-outs (like a real ticket) instead of rounded */
.lp-grp-promo-deal--card_grid .lp-grp-promo-deal-media {
  aspect-ratio: auto;
  flex: 1 1 0;
  min-height: 0;
  border-radius: 0;
  -webkit-mask:
    radial-gradient(circle 10px at 0 0, #0000 9.5px, #000 10px),
    radial-gradient(circle 10px at 100% 0, #0000 9.5px, #000 10px);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 10px at 0 0, #0000 9.5px, #000 10px),
    radial-gradient(circle 10px at 100% 0, #0000 9.5px, #000 10px);
  mask-composite: intersect;
}

.lp-grp-promo-deal--card_grid .lp-grp-promo-deal-body {
  flex: 0 0 auto;
  min-height: 210px;
  justify-content: center;
  background: #fff;
  border-radius: 0;
  align-items: center;
  text-align: center;
  padding: 22px 24px 18px;
  -webkit-mask:
    radial-gradient(circle 14px at 0 100%, #0000 13.5px, #000 14px),
    radial-gradient(circle 14px at 100% 100%, #0000 13.5px, #000 14px);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 14px at 0 100%, #0000 13.5px, #000 14px),
    radial-gradient(circle 14px at 100% 100%, #0000 13.5px, #000 14px);
  mask-composite: intersect;
}

.lp-grp-promo-deal--card_grid .lp-grp-promo-deal-stub {
  position: relative;
  padding: 16px 24px 18px;
  background: #f4f7fc;
  border-radius: 0;
  -webkit-mask:
    radial-gradient(circle 14px at 0 0, #0000 13.5px, #000 14px),
    radial-gradient(circle 14px at 100% 0, #0000 13.5px, #000 14px),
    radial-gradient(circle 10px at 0 100%, #0000 9.5px, #000 10px),
    radial-gradient(circle 10px at 100% 100%, #0000 9.5px, #000 10px);
  -webkit-mask-composite: source-in, source-in, source-in;
  mask:
    radial-gradient(circle 14px at 0 0, #0000 13.5px, #000 14px),
    radial-gradient(circle 14px at 100% 0, #0000 13.5px, #000 14px),
    radial-gradient(circle 10px at 0 100%, #0000 9.5px, #000 10px),
    radial-gradient(circle 10px at 100% 100%, #0000 9.5px, #000 10px);
  mask-composite: intersect;
}

/* dashed tear line across the top of the stub */
.lp-grp-promo-deal--card_grid .lp-grp-promo-deal-stub::before {
  content: "";
  position: absolute;
  top: 0;
  left: 26px;
  right: 26px;
  border-top: 2px dashed var(--lp-line, #cfd4dc);
}

.lp-grp-promo-deal--card_grid .lp-grp-promo-deal-stub .lp-grp-promo-deal-cta {
  display: block;
  width: 100%;
  margin-top: 0;
  text-align: center;
}

.lp-grp-promo-deal--card_grid .lp-grp-promo-deal-stub .lp-grp-promo-deal-cta--static {
  border-top: 0;
  padding-top: 0;
}

/* --- .lp-grp-promo-deal--list_row --- */

@media (max-width: 640px) {
  /* dashed perforation between photo and details */

  /* phones: list_row stacks like a two-part ticket */

  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-media {
      border-radius: 18px 18px 0 0;
      -webkit-mask:
        radial-gradient(circle 14px at 0 100%, #0000 13.5px, #000 14px),
        radial-gradient(circle 14px at 100% 100%, #0000 13.5px, #000 14px);
      -webkit-mask-composite: source-in;
      mask:
        radial-gradient(circle 14px at 0 100%, #0000 13.5px, #000 14px),
        radial-gradient(circle 14px at 100% 100%, #0000 13.5px, #000 14px);
      mask-composite: intersect;
    }

  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-body {
      border-radius: 0 0 18px 18px;
      padding: 28px 24px 26px;
      -webkit-mask:
        radial-gradient(circle 14px at 0 0, #0000 13.5px, #000 14px),
        radial-gradient(circle 14px at 100% 0, #0000 13.5px, #000 14px);
      -webkit-mask-composite: source-in;
      mask:
        radial-gradient(circle 14px at 0 0, #0000 13.5px, #000 14px),
        radial-gradient(circle 14px at 100% 0, #0000 13.5px, #000 14px);
      mask-composite: intersect;
    }

  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-body::before {
      top: 0;
      bottom: auto;
      left: 26px;
      right: 26px;
      border-left: 0;
      border-top: 2px dashed var(--lp-line, #cfd4dc);
    }
}

/* --- .lp-grp-promo-deal--card_grid --- */

.lp-grp-promo-deal--card_grid .lp-grp-promo-deal-media img {
  position: absolute;
  inset: 0;
}

/* --- .lp-grp-promo-deal--list_row --- */

/* [ vertical label stub | dashed perforation | centred details over a faint photo ].
   Scalloped outer edges, notches top and bottom at the perforation. Overrides the
   earlier list_row ticket rules (same selectors, later in the file). */
.lp-grp-promo-deal--list_row .lp-grp-promo-deal-list {
  grid-template-columns: 1fr;
  gap: 22px;
}

@media (max-width: 640px) {
  /* stub with the vertical label */

  /* main surface: white, with the photo as a faint watermark */

  /* details, centred over the watermark */

  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-card { grid-template-columns: 64px 1fr; min-height: 190px; }

  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-body { padding: 18px 26px; }

  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-body::before {
      top: 22px;
      bottom: 22px;
      left: 0;
      right: auto;
      border-top: 0;
      border-left: 2px dashed var(--lp-line, #cfd4dc);
    }
}

.lp-grp-promo-deal--list_row .lp-grp-promo-deal-card.is-extra {
  display: none;
}

.lp-grp-promo-deal--list_row.is-expanded .lp-grp-promo-deal-card.is-extra {
  display: grid;
  animation: lpOfferReveal .5s ease both;
}

/* --- keyframes --- */

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

/* --- .lp-grp-promo-deal--list_row --- */

@media (prefers-reduced-motion: reduce) {
  .lp-grp-promo-deal--list_row.is-expanded .lp-grp-promo-deal-card.is-extra { animation: none; }
}

/* [ vertical label stub | details | photo ] - the photo is shown in full colour on
   the right end (scalloped outer edge) instead of a faint watermark. */
.lp-grp-promo-deal--list_row .lp-grp-promo-deal-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: none;
}

.lp-grp-promo-deal--list_row .lp-grp-promo-deal-meta {
  font-style: italic;
  margin-bottom: 6px;
}

.lp-grp-promo-deal--list_row .lp-grp-promo-deal-body h3 {
  margin-bottom: 10px;
  line-height: 1.2;
}

.lp-grp-promo-deal--list_row .lp-grp-promo-deal-body p {
  -webkit-line-clamp: 3;
  margin-bottom: 16px;
  font-size: 14px;
}

.lp-grp-promo-deal--list_row .lp-grp-promo-deal-cta {
  margin-top: 0;
  padding: 9px 26px;
  font-size: 14px;
}

@media (max-width: 640px) {
  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-card { grid-template-columns: 56px 1fr 28%; }

  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-body { padding: 12px 18px; }

  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-body p { -webkit-line-clamp: 1; }

  /* list_row coupon stub: a ticket icon in a dashed ring above a large running number */

  /* No text/number on the stub any more - the offer's photo fills it. */

  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-card { grid-template-columns: 34% 1fr; }

  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-body { padding: 18px 28px; }
}

.lp-grp-promo-deal--list_row .lp-grp-promo-deal-card {
  flex-direction: row;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 32%;
  min-height: 325px;
  height: auto;
  max-height: none;
}

.lp-grp-promo-deal--list_row .lp-grp-promo-deal-body {
  justify-content: center;
  position: relative;
  background: #fff;
  border-radius: 0;
  padding: 28px 60px;
  /* scalloped left edge + notches on the right edge (the perforation), top/bottom */
  -webkit-mask:
    radial-gradient(circle 7px at 0 50%, #0000 6.5px, #000 7px) 0 0 / 100% 22px repeat-y,
    radial-gradient(circle 14px at 100% 0, #0000 13.5px, #000 14px),
    radial-gradient(circle 14px at 100% 100%, #0000 13.5px, #000 14px);
  -webkit-mask-composite: source-in, source-in;
  mask:
    radial-gradient(circle 7px at 0 50%, #0000 6.5px, #000 7px) 0 0 / 100% 22px repeat-y,
    radial-gradient(circle 14px at 100% 0, #0000 13.5px, #000 14px),
    radial-gradient(circle 14px at 100% 100%, #0000 13.5px, #000 14px);
  mask-composite: intersect;
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.lp-grp-promo-deal--list_row .lp-grp-promo-deal-body::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: auto;
  border-left: 2px dashed var(--lp-line, #cfd4dc);
  right: 0;
  border-top: 0;
}

.lp-grp-promo-deal--list_row .lp-grp-promo-deal-media {
  flex: none;
  aspect-ratio: auto;
  min-height: 0;
  border-radius: 0;
  /* scalloped right edge + notches on the left edge, top/bottom */
  -webkit-mask:
    radial-gradient(circle 7px at 100% 50%, #0000 6.5px, #000 7px) 0 0 / 100% 22px repeat-y,
    radial-gradient(circle 14px at 0 0, #0000 13.5px, #000 14px),
    radial-gradient(circle 14px at 0 100%, #0000 13.5px, #000 14px);
  -webkit-mask-composite: source-in, source-in;
  mask:
    radial-gradient(circle 7px at 100% 50%, #0000 6.5px, #000 7px) 0 0 / 100% 22px repeat-y,
    radial-gradient(circle 14px at 0 0, #0000 13.5px, #000 14px),
    radial-gradient(circle 14px at 0 100%, #0000 13.5px, #000 14px);
  mask-composite: intersect;
  grid-column: 2;
  grid-row: 1;
  background: #fff;
}

@media (max-width: 640px) {
  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-card { grid-template-columns: 1fr 34%; }
}

.lp-grp-promo-deal--list_row .lp-grp-promo-deal-card.is-flipped {
  grid-template-columns: 32% 1fr;
}

.lp-grp-promo-deal--list_row .lp-grp-promo-deal-card.is-flipped .lp-grp-promo-deal-media {
  grid-column: 1;
  /* scalloped left edge + notches on the right edge (the perforation) */
  -webkit-mask:
    radial-gradient(circle 7px at 0 50%, #0000 6.5px, #000 7px) 0 0 / 100% 22px repeat-y,
    radial-gradient(circle 14px at 100% 0, #0000 13.5px, #000 14px),
    radial-gradient(circle 14px at 100% 100%, #0000 13.5px, #000 14px);
  -webkit-mask-composite: source-in, source-in;
  mask:
    radial-gradient(circle 7px at 0 50%, #0000 6.5px, #000 7px) 0 0 / 100% 22px repeat-y,
    radial-gradient(circle 14px at 100% 0, #0000 13.5px, #000 14px),
    radial-gradient(circle 14px at 100% 100%, #0000 13.5px, #000 14px);
  mask-composite: intersect;
}

.lp-grp-promo-deal--list_row .lp-grp-promo-deal-card.is-flipped .lp-grp-promo-deal-body {
  grid-column: 2;
  /* scalloped right edge + notches on the left edge */
  -webkit-mask:
    radial-gradient(circle 7px at 100% 50%, #0000 6.5px, #000 7px) 0 0 / 100% 22px repeat-y,
    radial-gradient(circle 14px at 0 0, #0000 13.5px, #000 14px),
    radial-gradient(circle 14px at 0 100%, #0000 13.5px, #000 14px);
  -webkit-mask-composite: source-in, source-in;
  mask:
    radial-gradient(circle 7px at 100% 50%, #0000 6.5px, #000 7px) 0 0 / 100% 22px repeat-y,
    radial-gradient(circle 14px at 0 0, #0000 13.5px, #000 14px),
    radial-gradient(circle 14px at 0 100%, #0000 13.5px, #000 14px);
  mask-composite: intersect;
}

.lp-grp-promo-deal--list_row .lp-grp-promo-deal-card.is-flipped .lp-grp-promo-deal-body::before {
  left: 0;
  right: auto;
}

@media (max-width: 640px) {
  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-card.is-flipped { grid-template-columns: 34% 1fr; }
}

.lp-grp-promo-deal--list_row .lp-grp-promo-deal-card:nth-child(1) { --d: 0.00s; }

.lp-grp-promo-deal--list_row .lp-grp-promo-deal-card:nth-child(2) { --d: 0.20s; }

.lp-grp-promo-deal--list_row .lp-grp-promo-deal-card:nth-child(3) { --d: 0.40s; }

.lp-grp-promo-deal--list_row .lp-grp-promo-deal-card:nth-child(4) { --d: 0.60s; }

.lp-grp-promo-deal--list_row .lp-grp-promo-deal-card:nth-child(5) { --d: 0.80s; }

.lp-grp-promo-deal--list_row .lp-grp-promo-deal-card:nth-child(6) { --d: 1.00s; }

.lp-grp-promo-deal--list_row .lp-grp-promo-deal-card:nth-child(n+7) { --d: 1.2s; }

/* ==========================================================================
   10. FACILITIES
   icon_grid_4 / icon_list
   Classes:
     .lp-icon-grid, .lp-icon-item, .lp-icon-badge, .lp-icon-label,
     .lp-icon-grid--icon_list
   ========================================================================== */

/* --- .lp-icon --- */

.lp-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.lp-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 28px 16px;
  border-radius: 16px;
  background: var(--lp-surface);
  border: 1px solid var(--lp-line);
}

.lp-icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--theme-primary-color) 12%, transparent);
  color: var(--theme-primary-color);
  font-size: 22px;
}

.lp-icon-label {
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 980px) {
  .lp-icon-grid {
      grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
  .lp-icon-grid {
      grid-template-columns: 1fr;
    }
}

/* Facilities icon list */
.lp-icon-grid--icon_list {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 40px;
}

.lp-icon-grid--icon_list .lp-icon-item {
  flex-direction: row;
  text-align: left;
  gap: 16px;
  padding: 14px 18px;
}

.lp-icon-grid--icon_list .lp-icon-badge { width: 44px; height: 44px; font-size: 18px; flex: 0 0 auto; }

@media (max-width: 980px) {
  .lp-icon-grid--icon_list { grid-template-columns: 1fr; }
}

.lp-icon-item:nth-child(1) { --d: 0.00s; }

.lp-icon-item:nth-child(2) { --d: 0.09s; }

.lp-icon-item:nth-child(3) { --d: 0.18s; }

.lp-icon-item:nth-child(4) { --d: 0.27s; }

.lp-icon-item:nth-child(5) { --d: 0.36s; }

.lp-icon-item:nth-child(6) { --d: 0.45s; }

.lp-icon-item:nth-child(7) { --d: 0.54s; }

.lp-icon-item:nth-child(8) { --d: 0.63s; }

.lp-icon-item:nth-child(9) { --d: 0.72s; }

.lp-icon-item:nth-child(10) { --d: 0.81s; }

.lp-icon-item:nth-child(11) { --d: 0.90s; }

.lp-icon-item:nth-child(12) { --d: 0.99s; }

.lp-icon-item:nth-child(n+13) { --d: 1.1s; }

/* ==========================================================================
   11. GUEST REVIEWS
   card_grid / list_row / single_featured with reviewer photos
   Classes:
     .lp-review-card, .lp-review-stars, .lp-review-score, .lp-review-quote,
     .lp-review-grid--list_row, .lp-review-grid--single_featured,
     .lp-review-grid--card_grid, .lp-review-nav, .lp-review-dots, .lp-review-dot,
     .lp-review-paged, .lp-review-grid, .lp-carousel-btn, .lp-review-nav--bottom,
     .lp-review-meta, .lp-review-meta-text, .lp-review-avatar
   ========================================================================== */

/* --- .lp-review --- */

/* list_row: image left, details + button right */
/* single_featured: one large split card */
.lp-review-card {
  background: var(--lp-surface);
  border: 1px solid var(--lp-line);
  border-radius: 18px;
  padding: 26px 26px 22px;
}

.lp-review-stars {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #f5a623;
  margin-bottom: 14px;
}

.lp-review-score {
  margin-left: 6px;
  color: var(--lp-ink);
  font-weight: 700;
  font-size: 14px;
}

.lp-review-quote {
  font-size: 15px;
  line-height: 1.6;
  color: var(--lp-ink);
  margin-bottom: 18px;
}

/* Guest reviews */
.lp-review-grid--list_row { grid-template-columns: 1fr; gap: 18px; }

.lp-review-grid--list_row .lp-review-stars,
.lp-review-grid--list_row .lp-review-quote { margin-bottom: 0; }

.lp-review-grid--single_featured { grid-template-columns: minmax(0, 1fr); }

.lp-review-grid--single_featured .lp-review-stars { justify-content: center; font-size: 20px; }

@media (max-width: 980px) {
  .lp-review-grid--list_row .lp-review-card { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 640px) {
  .lp-review-grid--single_featured .lp-review-card { padding: 30px 22px; }

  .lp-review-grid--single_featured .lp-review-quote { font-size: 17px; }
}

/* card_grid: 3 across, the remainder centred on the last row (5 items = 3 + 2) */
.lp-review-grid--card_grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}

.lp-review-grid--card_grid > .lp-review-card {
  flex: 0 0 calc((100% - 56px) / 3);
  min-width: 0;
}

@media (max-width: 980px) {
  .lp-review-grid--card_grid > .lp-review-card { flex-basis: calc((100% - 28px) / 2); }
}

@media (max-width: 640px) {
  .lp-review-grid--card_grid > .lp-review-card { flex-basis: 100%; }
}

/* list_row: prev / dots / next, right-aligned under the rows */
.lp-review-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 28px;
}

.lp-review-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-review-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--lp-line, #cfd4dc);
  cursor: pointer;
  transition: width .3s ease, background .3s ease;
}

.lp-review-dot:hover { background: var(--theme-text-muted); }

.lp-review-dot.is-active {
  width: 28px;
  background: var(--theme-primary-color);
}

.lp-review-grid--list_row .lp-review-card.is-entering {
  animation: lpOfferReveal .45s ease both;
}

.lp-review-grid--list_row .lp-review-card[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .lp-review-grid--list_row .lp-review-card.is-entering { animation: none; }
}

/* list_row paging: the controls run vertically down the RIGHT side, beside the rows */
.lp-review-paged {
  display: flex;
  align-items: center;
  gap: 32px;
}

.lp-review-paged > .lp-review-grid {
  flex: 1 1 auto;
  min-width: 0;
}

.lp-review-paged .lp-review-nav {
  order: 1;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  margin-top: 0;
  gap: 14px;
}

.lp-review-paged .lp-review-dots {
  flex-direction: column;
}

.lp-review-paged .lp-review-dot {
  transition: height .3s ease, background .3s ease;
}

.lp-review-paged .lp-review-dot.is-active {
  width: 8px;
  height: 28px;
}

@media (max-width: 640px) {
  .lp-review-paged { gap: 16px; }

  .lp-review-paged .lp-review-nav .lp-carousel-btn { width: 36px; height: 36px; }
}

/* card_grid paging: controls centred under the cards; both layouts fade each page in */
.lp-review-nav--bottom {
  justify-content: center;
}

.lp-review-card[hidden] {
  display: none;
}

.lp-review-grid--card_grid .lp-review-card.is-entering {
  animation: lpOfferReveal .45s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .lp-review-grid--card_grid .lp-review-card.is-entering { animation: none; }
}

.lp-review-grid--single_featured .lp-review-card.is-entering {
  animation: lpOfferReveal .45s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .lp-review-grid--single_featured .lp-review-card.is-entering { animation: none; }
}

.lp-review-meta {
  display: flex;
  flex-direction: row;
  gap: 12px;
  font-size: 13px;
  color: var(--theme-text-muted);
  align-items: center;
}

.lp-review-meta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.lp-review-avatar {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--theme-primary-color) 14%, #fff);
  color: var(--theme-primary-color);
  font-weight: 700;
  font-size: 17px;
}

/* initial shows underneath; the photo covers it once loaded */
.lp-review-avatar::before {
  content: attr(data-initial);
}

.lp-review-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The card keeps the same size whether the review is short or long: the content is
   spread over a fixed height and an over-long quote is cut off with an ellipsis. */
.lp-review-grid--single_featured .lp-review-card {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 44px 40px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 400px;
}

.lp-review-grid--single_featured .lp-review-quote {
  font-size: 20px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  margin: auto 0;
}

.lp-review-grid--single_featured .lp-review-meta {
  justify-content: center;
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .lp-review-grid--single_featured .lp-review-card { height: 380px; }

  .lp-review-grid--single_featured .lp-review-quote { -webkit-line-clamp: 7; }
}

.lp-review-grid--list_row .lp-review-card {
  display: grid;
  grid-template-columns: 200px 1fr 220px;
  gap: 28px;
  align-items: center;
  height: 180px;
  padding-top: 0;
  padding-bottom: 0;
}

.lp-review-grid--list_row .lp-review-quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

@media (max-width: 980px) {
  .lp-review-grid--list_row .lp-review-card {
      height: 260px;
      align-content: center;
    }

  .lp-review-grid--list_row .lp-review-quote { -webkit-line-clamp: 5; }
}

.lp-review-grid--list_row .lp-review-card:nth-child(1) { --d: 0.00s; }

.lp-review-grid--list_row .lp-review-card:nth-child(2) { --d: 0.20s; }

.lp-review-grid--list_row .lp-review-card:nth-child(3) { --d: 0.40s; }

.lp-review-grid--list_row .lp-review-card:nth-child(4) { --d: 0.60s; }

.lp-review-grid--list_row .lp-review-card:nth-child(5) { --d: 0.80s; }

.lp-review-grid--list_row .lp-review-card:nth-child(6) { --d: 1.00s; }

.lp-review-grid--list_row .lp-review-card:nth-child(n+7) { --d: 1.2s; }

/* ==========================================================================
   12. FAQ
   accordion / tabs_accordion + "Still have questions?" contact
   Classes:
     .lp-faq-accordion, .lp-faq-item, .lp-faq-question, .lp-faq-answer,
     .lp-faq--tabs_accordion, .lp-faq-tabs, .lp-faq-tab, .lp-faq-panel, .lp-faq-contact,
     .lp-faq-contact-text, .lp-faq-contact-buttons, .lp-faq-btn, .lp-faq-btn--primary,
     .lp-faq-btn--dark, .lp-faq-contact-phone, .lp-faq-layout, .lp-faq-side .lp-eyebrow,
     .lp-faq-title, .lp-faq-intro
   ========================================================================== */

/* --- .lp-faq --- */

.lp-faq-accordion {
  max-width: 820px;
}

.lp-faq-item {
  border-bottom: 1px solid var(--lp-line);
}

.lp-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: 0;
  padding: 20px 4px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: var(--lp-ink);
  cursor: pointer;
}

.lp-faq-question i {
  color: var(--theme-primary-color);
  transition: transform .2s ease;
  flex-shrink: 0;
}

.lp-faq-question.is-open i {
  transform: rotate(180deg);
}

.lp-faq-answer {
  padding: 0 4px 20px;
  color: var(--theme-text-muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.lp-faq-answer p {
  margin: 0;
}

/* --- .lp-faq--tabs_accordion --- */

/* FAQ tabs + accordion */
.lp-faq--tabs_accordion .lp-faq-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

/* --- .lp-faq --- */

.lp-faq-tab {
  border: 1px solid var(--lp-line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--lp-ink);
}

.lp-faq-tab.is-active {
  background: var(--theme-primary-color);
  border-color: var(--theme-primary-color);
  color: #fff;
}

.lp-faq-panel[hidden] { display: none; }

/* No card: just a divider, a heading and two solid buttons. */
.lp-faq-contact {
  margin-top: 40px;
  max-width: 460px;
  padding: 32px 0;
  border-top: 2px solid color-mix(in srgb, var(--lp-ink, #0c1a3b) 22%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--lp-ink, #0c1a3b) 22%, transparent);
}

.lp-faq-contact-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
}

.lp-faq-contact-text strong {
  font-size: 20px;
  font-weight: 600;
  color: var(--lp-ink);
}

.lp-faq-contact-text span {
  font-size: 14px;
  color: var(--theme-text-muted);
}

.lp-faq-contact-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.lp-faq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  transition: transform .2s ease, opacity .2s ease;
}

.lp-faq-btn:hover {
  transform: translateY(-2px);
  opacity: .92;
  color: #fff;
}

.lp-faq-btn--primary { background: var(--theme-primary-color); }

.lp-faq-btn--dark { background: var(--lp-ink, #0c1a3b); }

.lp-faq-contact-phone {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--theme-text-muted);
}

.lp-faq-contact-phone a {
  font-weight: 600;
  color: var(--lp-ink);
  text-decoration: none;
}

.lp-faq-contact-phone a:hover { text-decoration: underline; }

.lp-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: center;
}

.lp-faq-title {
  margin: 0 0 18px;
  font-size: 32px;
  line-height: 1.15;
  font-weight: 500;
}

.lp-faq-intro {
  max-width: 460px;
  font-size: 18px;
  color: var(--theme-text-muted);
}

@media (max-width: 980px) {
  .lp-faq-layout {
      grid-template-columns: 1fr;
      gap: 36px;
    }
}

@media (max-width: 640px) {
  .lp-faq-btn { flex: 1 1 100%; }
}

.lp-faq-item:nth-child(1) { --d: 0.00s; }

.lp-faq-item:nth-child(2) { --d: 0.12s; }

.lp-faq-item:nth-child(3) { --d: 0.24s; }

.lp-faq-item:nth-child(4) { --d: 0.36s; }

.lp-faq-item:nth-child(5) { --d: 0.48s; }

.lp-faq-item:nth-child(6) { --d: 0.60s; }

.lp-faq-item:nth-child(7) { --d: 0.72s; }

.lp-faq-item:nth-child(8) { --d: 0.84s; }

.lp-faq-item:nth-child(n+9) { --d: 1s; }

/* ==========================================================================
   13. CONTACT US
   Branch list + map (side / top)
   Classes:
     .lp-contact-layout, .lp-contact-list, .lp-contact-branch, .lp-contact-branch-name,
     .lp-contact-map, .lp-contact-layout--branch_list_top_map, .lp-contact-hq,
     .lp-contact-hq-line, .lp-contact-hq-line--bold, .lp-contact-hq-actions,
     .lp-contact-hq-sub
   ========================================================================== */

/* --- .lp-contact --- */

.lp-contact-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 32px;
  align-items: stretch;
}

.lp-contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-contact-branch {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--lp-line);
  background: #fff;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--theme-text-muted);
}

.lp-contact-branch-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--lp-ink);
}

.lp-contact-branch i {
  color: var(--theme-primary-color);
  width: 16px;
  margin-right: 4px;
}

.lp-contact-branch.is-active {
  border-color: var(--theme-primary-color);
  background: color-mix(in srgb, var(--theme-primary-color) 6%, transparent);
}

.lp-contact-map {
  border-radius: 18px;
  overflow: hidden;
  min-height: 380px;
}

.lp-contact-map iframe {
  width: 100%;
  height: 100%;
  min-height: 380px;
  border: 0;
}

@media (max-width: 980px) {
  .lp-contact-layout {
      grid-template-columns: 1fr;
    }
}

/* Contact: branch list on top, map below */
.lp-contact-layout--branch_list_top_map { grid-template-columns: minmax(0, 1fr); }

.lp-contact-layout--branch_list_top_map .lp-contact-list {
  flex-direction: row;
  flex-wrap: wrap;
}

.lp-contact-layout--branch_list_top_map .lp-contact-branch { flex: 1 1 260px; }

.lp-contact-hq {
  max-width: 760px;
  margin: auto;
  text-align: center;
  color: #fff;
}

.lp-contact-hq-line {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.4;
  color: #fff;
}

.lp-contact-hq-line--bold {
  margin-bottom: 24px;
  font-weight: 700;
}

.lp-contact-hq-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.lp-contact-hq-sub {
  display: block;
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   14. FOOTER & HQ CONTACT BANNER
   Copyright footer with the merged head-office banner
   Classes:
     .lp-footer, .lp-footer--hq, .lp-footer-copyright, .lp-contact-hq-btn,
     .lp-contact-hq-btn--line
   ========================================================================== */

/* --- .lp-footer --- */

.lp-footer {
  padding: 30px 5vw;
  text-align: center;
  border-top: 1px solid var(--lp-line);
  color: var(--theme-text-muted);
  font-size: 13px;
}

.lp-footer a {
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}

/* --- .lp-footer--hq --- */

/* When a Contact section has a WhatsApp number / email set, the footer becomes one
   dark photo block: centred HQ copy and buttons, then the copyright line below. */
.lp-footer--hq {
  display: flex;
  flex-direction: column;
  min-height: 460px;
  padding: 96px 5vw 26px;
  border-top: 0;
  color: rgba(255, 255, 255, 0.7);
  background:
    linear-gradient(rgba(6, 14, 32, 0.78), rgba(6, 14, 32, 0.78)),
    var(--lp-hq-banner, url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1800&q=70')) center / cover no-repeat,
    #0a1226;
}

.lp-footer--hq .lp-footer-copyright {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* --- .lp-footer --- */

.lp-footer .lp-contact-hq-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 26px;
  border-radius: 6px;
  border: 1px solid #fff;
  background: #fff;
  color: #0a1226;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.lp-footer .lp-contact-hq-btn--line {
  background: transparent;
  color: #fff;
}

.lp-footer .lp-contact-hq-btn:hover {
  background: var(--theme-primary-color);
  border-color: var(--theme-primary-color);
  color: #fff;
}

/* --- .lp-footer--hq --- */

@media (max-width: 640px) {
  .lp-footer--hq { min-height: 400px; padding: 64px 6vw 22px; }

  .lp-footer .lp-contact-hq-btn { flex: 1 1 100%; justify-content: center; }
}

/* ==========================================================================
   15. SECTION REVEAL TRANSITIONS
   Scroll-in animations for every section
   Classes:
     .lp-reveal-ready, .lp-section-inner, .lp-section-heading, .lp-eyebrow,
     .lp-booking-hero-content, .lp-company-hero-text, .lp-faq-side .lp-eyebrow, .lp-faq-title,
     .lp-custom-text, .lp-grp-promo-deal-single-feat, .lp-grp-attar-happ-single-feat, .lp-review-grid--single_featured,
     .lp-coverflow, .lp-gallery--carousel_static, .lp-select-card,
     .lp-company-hero-media, .lp-faq-intro, .lp-faq-contact, .lp-contact-list,
     .lp-contact-map, .lp-gallery-thumb, .lp-icon-item, .lp-faq-item,
     .lp-grp-attar-happ--card_grid, .lp-grp-attar-happ-card, .lp-grp-promo-deal--card_grid, .lp-grp-promo-deal-card,
     .lp-review-grid--card_grid, .lp-review-card, .lp-grp-attar-happ--list_row,
     .lp-grp-promo-deal--list_row, .lp-review-grid--list_row, .lp-carousel-controls,
     .lp-review-nav, .lp-grp-promo-deal-more, .lp-company-hero--split_hero,
     .lp-company-hero--centered_hero, .lp-company-hero--split_hero_reversed,
     .lp-company-hero--centered_hero_reversed
   ========================================================================== */

/* --- .lp-gallery--carousel_static --- */

/* No snapping: the page scrolls normally. The first time a section scrolls into view its
   parts ease in in a fixed order:
     1. the SUBTITLE (eyebrow / pill) fades up,
     2. 0.2s later the TITLE,
     3. 0.3s after that everything else - each section type with a transition that suits it:
          Booking CTA ...... text rises, branch card scales in
          Company .......... text rises, photo scales in
          Gallery .......... photos scale in one after another
          Card Grid ........ cards rise ONE, then TWO, then THREE (0.25s apart)
          List Row ......... rows zig-zag in: odd from the left, even from the top
          Single Featured .. the ticket / stack rises
          Facilities ....... icons scale in one after another
          FAQ .............. intro slides in from the left, questions rise one by one
          Contact .......... branch list from the left, map dropping from the top
   A section with no subtitle / no title skips those steps (the script in web_landing.php sets
   --t and --rest on the section). Only `animation` with `backwards` fill is used (never a held
   end state), so it can't fight hover / paging transforms. Without JS or with reduced motion
   everything just shows. */
.lp-reveal-ready .lp-section-inner:not(.is-in) :is(
  .lp-section-heading .lp-eyebrow,
  .lp-booking-hero-content .lp-eyebrow,
  .lp-company-hero-text .lp-eyebrow,
  .lp-faq-side .lp-eyebrow,
  .lp-section-heading h2,
  .lp-booking-hero-content h1,
  .lp-company-hero-text :is(h1, h2, h3),
  .lp-faq-title,
  .lp-booking-hero-content > :not(.lp-eyebrow):not(h1),
  .lp-company-hero-text > :not(.lp-eyebrow):not(h1):not(h2):not(h3),
  .lp-custom-text,
  .lp-grp-promo-deal-single-feat,
  .lp-grp-attar-happ-single-feat,
  .lp-review-grid--single_featured,
  .lp-coverflow,
  .lp-gallery--carousel_static,
  .lp-select-card,
  .lp-company-hero-media,
  .lp-faq-intro,
  .lp-faq-contact,
  .lp-contact-list,
  .lp-contact-map,
  .lp-gallery-thumb,
  .lp-icon-item,
  .lp-faq-item,
  .lp-grp-attar-happ--card_grid .lp-grp-attar-happ-card,
  .lp-grp-promo-deal--card_grid .lp-grp-promo-deal-card,
  .lp-review-grid--card_grid .lp-review-card,
  .lp-grp-attar-happ--list_row .lp-grp-attar-happ-card,
  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-card,
  .lp-review-grid--list_row .lp-review-card,
  .lp-carousel-controls,
  .lp-review-nav,
  .lp-grp-promo-deal-more
) {
  opacity: 0;
}

/* --- .lp-section --- */

.lp-section-inner.is-in .lp-section-heading .lp-eyebrow,
.lp-section-inner.is-in .lp-booking-hero-content .lp-eyebrow,
.lp-section-inner.is-in .lp-company-hero-text .lp-eyebrow,
.lp-section-inner.is-in .lp-faq-side .lp-eyebrow {
  animation: lpRvDown 1.15s cubic-bezier(.2, .7, .2, 1) 0s backwards;
}

.lp-section-inner.is-in .lp-section-heading h2,
.lp-section-inner.is-in .lp-booking-hero-content h1,
.lp-section-inner.is-in .lp-company-hero-text :is(h1, h2, h3),
.lp-section-inner.is-in .lp-faq-title {
  animation: lpRvDown 1.15s cubic-bezier(.2, .7, .2, 1) var(--t, 0s) backwards;
}

/* --- .lp-gallery--carousel_static --- */

.lp-section-inner.is-in .lp-booking-hero-content > :not(.lp-eyebrow):not(h1),
.lp-section-inner.is-in .lp-company-hero-text > :not(.lp-eyebrow):not(h1):not(h2):not(h3),
.lp-section-inner.is-in .lp-custom-text,
.lp-section-inner.is-in .lp-grp-promo-deal-single-feat,
.lp-section-inner.is-in .lp-grp-attar-happ-single-feat,
.lp-section-inner.is-in .lp-review-grid--single_featured,
.lp-section-inner.is-in .lp-coverflow,
.lp-section-inner.is-in .lp-gallery--carousel_static {
  animation: lpRvDown 1.15s cubic-bezier(.2, .7, .2, 1) var(--rest, 0s) backwards;
}

/* --- .lp-section --- */

.lp-section-inner.is-in .lp-select-card,
.lp-section-inner.is-in .lp-company-hero-media {
  animation: lpRvScale 1.15s cubic-bezier(.2, .7, .2, 1) var(--rest, 0s) backwards;
}

.lp-section-inner.is-in .lp-faq-intro,
.lp-section-inner.is-in .lp-faq-contact,
.lp-section-inner.is-in .lp-contact-list {
  animation: lpRvLeft 1.15s cubic-bezier(.2, .7, .2, 1) var(--rest, 0s) backwards;
}

.lp-section-inner.is-in .lp-contact-map {
  animation: lpRvDown 1.15s cubic-bezier(.2, .7, .2, 1) var(--rest, 0s) backwards;
}

.lp-section-inner.is-in .lp-gallery-thumb:not(.is-extra):not(.is-revealing),
.lp-section-inner.is-in .lp-icon-item {
  animation: lpRvScale 1s cubic-bezier(.2, .7, .2, 1) calc(var(--rest, 0s) + var(--d, 0s)) backwards;
}

.lp-section-inner.is-in .lp-faq-item {
  animation: lpRvDown 1s cubic-bezier(.2, .7, .2, 1) calc(var(--rest, 0s) + var(--d, 0s)) backwards;
}

/* --- .lp-grp-attar-happ--card_grid --- */

.lp-section-inner.is-in .lp-grp-attar-happ--card_grid .lp-grp-attar-happ-card,
.lp-section-inner.is-in .lp-grp-promo-deal--card_grid .lp-grp-promo-deal-card,
.lp-section-inner.is-in .lp-review-grid--card_grid .lp-review-card:not(.is-entering) {
  animation: lpRvDown 1s cubic-bezier(.2, .7, .2, 1) calc(var(--rest, 0s) + var(--d, 0s)) backwards;
}

/* --- .lp-section --- */

.lp-section-inner.is-in .lp-carousel-controls,
.lp-section-inner.is-in .lp-review-nav,
.lp-section-inner.is-in .lp-grp-promo-deal-more {
  animation: lpRvDown 1s cubic-bezier(.2, .7, .2, 1) calc(var(--rest, 0s) + .9s) backwards;
}

/* --- .lp-grp-attar-happ--list_row --- */

.lp-section-inner.is-in .lp-grp-attar-happ--list_row .lp-grp-attar-happ-card:not(.is-entering):nth-child(odd),
.lp-section-inner.is-in .lp-grp-promo-deal--list_row .lp-grp-promo-deal-card:not(.is-extra):nth-child(odd),
.lp-section-inner.is-in .lp-review-grid--list_row .lp-review-card:not(.is-entering):nth-child(odd) {
  animation: lpRvLeft 1.05s cubic-bezier(.2, .7, .2, 1) calc(var(--rest, 0s) + var(--d, 0s)) backwards;
}

.lp-section-inner.is-in .lp-grp-attar-happ--list_row .lp-grp-attar-happ-card:not(.is-entering):nth-child(even),
.lp-section-inner.is-in .lp-grp-promo-deal--list_row .lp-grp-promo-deal-card:not(.is-extra):nth-child(even),
.lp-section-inner.is-in .lp-review-grid--list_row .lp-review-card:not(.is-entering):nth-child(even) {
  animation: lpRvDown 1.05s cubic-bezier(.2, .7, .2, 1) calc(var(--rest, 0s) + var(--d, 0s)) backwards;
}

/* --- keyframes --- */

/* every entrance travels top -> bottom, or left -> right (never from below or from the right) */
@keyframes lpRvDown {
  from { opacity: 0; transform: translateY(-24px); }
  to { opacity: 1; transform: none; }
}

@keyframes lpRvLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to { opacity: 1; transform: none; }
}

@keyframes lpRvScale {
  from { opacity: 0; transform: translateY(-14px) scale(.94); }
  to { opacity: 1; transform: none; }
}

/* --- .lp-section --- */

@media (max-width: 980px) {
  /* stacked layouts: side-by-side parts simply rise */

  .lp-section-inner.is-in .lp-faq-intro,
    .lp-section-inner.is-in .lp-faq-contact,
    .lp-section-inner.is-in .lp-contact-list,
    .lp-section-inner.is-in .lp-contact-map {
      animation-name: lpRvDown;
    }
}

/* --- .lp-grp-attar-happ--list_row --- */

@media (max-width: 640px) {
  .lp-section-inner.is-in .lp-grp-attar-happ--list_row .lp-grp-attar-happ-card,
    .lp-section-inner.is-in .lp-grp-promo-deal--list_row .lp-grp-promo-deal-card,
    .lp-section-inner.is-in .lp-review-grid--list_row .lp-review-card { animation-duration: .9s; }
}

/* --- .lp-section --- */

/* Always top -> bottom or left -> right, and whatever is read first enters first:
   split_hero ............. text (left) then photo (right, slides left -> right)
   split_hero_reversed .... photo (left, slides left -> right) then text (right)
   centered_hero .......... text (top) then photo (below, drops top -> bottom)
   centered_hero_reversed . photo (top, drops top -> bottom) then text (below)
   The text itself always runs subtitle -> title -> content, top to bottom. */
.lp-section-inner.is-in .lp-company-hero--split_hero .lp-company-hero-media {
  animation: lpRvLeft 1.15s cubic-bezier(.2, .7, .2, 1) var(--rest, 0s) backwards;
}

.lp-section-inner.is-in .lp-company-hero--centered_hero .lp-company-hero-media {
  animation: lpRvDown 1.15s cubic-bezier(.2, .7, .2, 1) var(--rest, 0s) backwards;
}

/* photo first: it enters straight away and the text follows 0.3s later */
.lp-section-inner.is-in .lp-company-hero--split_hero_reversed .lp-company-hero-media {
  animation: lpRvLeft 1.15s cubic-bezier(.2, .7, .2, 1) 0s backwards;
}

.lp-section-inner.is-in .lp-company-hero--centered_hero_reversed .lp-company-hero-media {
  animation: lpRvDown 1.15s cubic-bezier(.2, .7, .2, 1) 0s backwards;
}

.lp-section-inner.is-in :is(.lp-company-hero--split_hero_reversed, .lp-company-hero--centered_hero_reversed) .lp-company-hero-text .lp-eyebrow {
  animation-delay: .3s;
}

.lp-section-inner.is-in :is(.lp-company-hero--split_hero_reversed, .lp-company-hero--centered_hero_reversed) .lp-company-hero-text :is(h1, h2, h3) {
  animation-delay: calc(var(--t, 0s) + .3s);
}

.lp-section-inner.is-in :is(.lp-company-hero--split_hero_reversed, .lp-company-hero--centered_hero_reversed) .lp-company-hero-text > :not(.lp-eyebrow):not(h1):not(h2):not(h3) {
  animation-delay: calc(var(--rest, 0s) + .3s);
}

/* Facility icon image inside the round badge (picked facilities carry an icon image, not a font icon). */
.lp-icon-badge img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

/* ==========================================================================
   PHONE OVERRIDES (max-width 640px)
   Kept last so they win over the desktop / tablet rules above. Each block says what it replaces.
   ========================================================================== */
@media (max-width: 640px) {

  /* Facilities icon grid: two compact tiles per row instead of one tall tile per row. */
  .lp-icon-grid--icon_grid_4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .lp-icon-grid--icon_grid_4 .lp-icon-item {
    gap: 10px;
    padding: 18px 10px;
  }

  .lp-icon-grid--icon_grid_4 .lp-icon-badge {
    width: 48px;
    height: 48px;
  }

  .lp-icon-grid--icon_grid_4 .lp-icon-label {
    font-size: 13px;
  }

  /* Deals / Promotions list rows: the coupon stacks (photo on top, details underneath) instead of
     squeezing a photo column next to the text. The ticket notches move to the horizontal tear line. */
  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-card,
  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-card.is-flipped {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-media,
  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-card.is-flipped .lp-grp-promo-deal-media {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    -webkit-mask:
      radial-gradient(circle 12px at 0 100%, #0000 11.5px, #000 12px),
      radial-gradient(circle 12px at 100% 100%, #0000 11.5px, #000 12px);
    -webkit-mask-composite: source-in;
    mask:
      radial-gradient(circle 12px at 0 100%, #0000 11.5px, #000 12px),
      radial-gradient(circle 12px at 100% 100%, #0000 11.5px, #000 12px);
    mask-composite: intersect;
  }

  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-body,
  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-card.is-flipped .lp-grp-promo-deal-body {
    grid-column: 1;
    grid-row: 2;
    padding: 22px 18px 20px;
    -webkit-mask:
      radial-gradient(circle 12px at 0 0, #0000 11.5px, #000 12px),
      radial-gradient(circle 12px at 100% 0, #0000 11.5px, #000 12px);
    -webkit-mask-composite: source-in;
    mask:
      radial-gradient(circle 12px at 0 0, #0000 11.5px, #000 12px),
      radial-gradient(circle 12px at 100% 0, #0000 11.5px, #000 12px);
    mask-composite: intersect;
  }

  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-body::before,
  .lp-grp-promo-deal--list_row .lp-grp-promo-deal-card.is-flipped .lp-grp-promo-deal-body::before {
    top: 0;
    bottom: auto;
    left: 18px;
    right: 18px;
    border-left: 0;
    border-top: 2px dashed var(--lp-line, #cfd4dc);
  }
}

/* Booking CTA hero on phones: one screen split 50/50 - headline and copy on top, the branch card below.
   Applies to every layout variant (the "> " selectors outrank the per-variant column rules). */
@media (max-width: 640px) {
  .lp-booking-hero {
    align-items: stretch;
    min-height: 100vh;
    min-height: 100svh;
    padding: 64px 6vw 64px; /* equal top / bottom space keeps both halves' content a little higher than before */
  }

  .lp-booking-hero .lp-booking-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    /* Top half = half the screen (minus the hero's padding) and never grows; the lower half is as tall as the
       card. So when the card gets taller (a branch is picked) nothing above it moves. */
    grid-template-rows: calc((100svh - 128px - 16px) / 2) auto;
    align-content: start;
    gap: 32px;
    align-self: stretch;
    align-items: stretch;
    justify-items: stretch;
    text-align: left;
  }

  .lp-booking-hero .lp-booking-hero-inner > .lp-booking-hero-content {
    grid-column: 1;
    grid-row: 1;
    align-self: start; /* the headline sits at the top of its half instead of the middle */
    padding-top: 40px; /* ...and starts a little way down, level with the middle of the photo's upper area */
  }

  .lp-booking-hero .lp-booking-hero-inner > .lp-select-card {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    width: 100%;
    max-width: none;
  }
}

/* Phones: smaller section titles. The h1 / h2 / h3 tags stay as they are - only the size changes.
   !important is deliberate here: the desktop sizes are set per layout variant at different specificities,
   and one rule has to win over all of them. */
@media (max-width: 640px) {
  .lp-booking-hero-content h1 {
    font-size: 26px !important;
  }

  .lp-section-heading h2,
  .lp-company-hero-text h2,
  .lp-custom-text h2,
  .lp-faq-title {
    font-size: 24px !important;
  }

  .lp-select-card h3 {
    font-size: 19px !important;
  }

  .lp-grp-attar-happ-card h3,
  .lp-grp-promo-deal-card h3,
  .lp-grp-attar-happ-single-feat-body h3,
  .lp-grp-promo-deal-single-feat-body h3 {
    font-size: 18px !important;
  }

  .lp-rich-content {
    font-size: 16px;
  }
}

/* About Us (Company) on phones: same 50/50 split as the booking hero - text on top, photo below,
   filling one screen. Without a photo the text simply stays on its own. */
@media (max-width: 640px) {
  .lp-section-company .lp-section-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  .lp-section-company .lp-company-hero {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    text-align: left;
  }

  .lp-section-company .lp-company-hero:has(.lp-company-hero-media) {
    grid-template-rows: 1fr 1fr;
  }

  .lp-section-company .lp-company-hero .lp-company-hero-text {
    grid-column: 1;
    grid-row: auto;
    order: 1;
    align-self: start; /* same as the booking hero: the text starts near the top of its half, a little way down */
    padding-top: 40px;
  }

  .lp-section-company .lp-company-hero .lp-company-hero-media {
    grid-column: 1;
    grid-row: auto;
    order: 2;
    align-self: stretch;
    min-height: 0;
  }

  .lp-section-company .lp-company-hero .lp-company-hero-media img {
    height: 100%;
    min-height: 200px;
    max-height: none;
  }

  /* On phones there are only two arrangements: text on top / photo below, or (every "reversed" variant)
     photo on top / text below. */
  .lp-section-company .lp-company-hero:is(.lp-company-hero--split_hero_reversed, .lp-company-hero--centered_hero_reversed) .lp-company-hero-media {
    order: 1;
  }

  .lp-section-company .lp-company-hero:is(.lp-company-hero--split_hero_reversed, .lp-company-hero--centered_hero_reversed) .lp-company-hero-text {
    order: 2;
    padding-top: 0;
  }
}

/* Booking CTA on phones, same idea: text on top / card below, or (split_hero_reversed) card on top / text
   below. Picking a branch makes the card taller, so in the reversed order the text below it moves down with it. */
@media (max-width: 640px) {
  .lp-booking-hero.lp-booking-hero--split_hero_reversed .lp-booking-hero-inner {
    grid-template-rows: auto auto;
  }

  .lp-booking-hero.lp-booking-hero--split_hero_reversed .lp-booking-hero-inner > .lp-select-card {
    grid-row: 1;
  }

  .lp-booking-hero.lp-booking-hero--split_hero_reversed .lp-booking-hero-inner > .lp-booking-hero-content {
    grid-row: 2;
    padding-top: 0;
  }
}

/* Booking CTA card on phones: picking a branch must not move anything above the card. The card is pinned
   to the top of the lower half and only ever grows downward (the preview appears inside it). */
@media (max-width: 640px) {
  .lp-booking-hero .lp-booking-hero-inner > .lp-select-card {
    align-self: start;
  }
}

/* Booking CTA hero on phones: the background photo keeps one fixed size. It used to cover the whole hero
   (`inset: 0` + `cover`), so whenever the card grew (a branch picked -> preview shown) the hero got taller
   and the photo was re-scaled and re-cropped - it visibly jumped. Now the photo is pinned to one screen
   height; anything the hero grows beyond that is plain navy, the same colour the photo fades into. */
@media (max-width: 640px) {
  .lp-booking-hero {
    background-color: #12203f;
  }

  .lp-booking-hero .lp-booking-hero-bg {
    bottom: auto;
    height: 100vh;
    height: 100svh;
  }
}

/* Gallery on phones: grid_4, masonry and bento all become the same plain grid - one photo per row, every
   photo the same size (the carousels are not touched). */
@media (max-width: 640px) {
  .lp-gallery-grid,
  .lp-gallery--masonry,
  .lp-gallery--bento {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    column-count: auto;
    gap: 14px;
  }

  .lp-gallery-grid .lp-gallery-thumb,
  .lp-gallery--masonry .lp-gallery-thumb,
  .lp-gallery--bento .lp-gallery-thumb,
  .lp-gallery--masonry .lp-gallery-thumb:nth-child(n),
  .lp-gallery--bento .lp-gallery-thumb:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
    margin-bottom: 0;
    aspect-ratio: 4 / 3;
  }
}

/* Gallery "auto carousel" (coverflow) on phones: use the screen. The centre photo is nearly full width and
   square (it was a small 4:3 card), the stage is as tall as that photo needs, and the big empty band above
   the stage is gone. The side photos still peek in at the edges. */
@media (max-width: 640px) {
  .lp-coverflow {
    padding: 16px 0 6px;
  }

  .lp-coverflow-stage {
    height: calc(82vw + 36px);
  }

  .lp-coverflow-slide {
    width: 82vw;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
  }
}

/* Coverflow: a horizontal drag swipes the carousel (see gallery.php); a vertical drag still scrolls the page. */
.lp-coverflow-stage {
  touch-action: pan-y;
}

/* Gallery "static carousel" on phones: a 2-column grid (6 photos at a time, 3 rows); the arrows page to the next /
   previous four (see gallery.php). The photos outside the current page are hidden. */
@media (max-width: 640px) {
  .lp-gallery--carousel_static.lp-carousel-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    overflow: visible;
    scroll-snap-type: none;
  }

  .lp-gallery--carousel_static.lp-carousel-track > .lp-gallery-thumb {
    flex: none;
    aspect-ratio: 1 / 1;
  }

  .lp-gallery--carousel_static.lp-carousel-track > .lp-gallery-thumb.is-off-page {
    display: none;
  }
}

/* Lightbox: previous / next arrows on both sides of the photo. */
.lp-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  z-index: 2;
}

.lp-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.28);
}

.lp-lightbox-prev { left: 20px; }
.lp-lightbox-next { right: 20px; }

@media (max-width: 640px) {
  .lp-lightbox-prev { left: 8px; }
  .lp-lightbox-next { right: 8px; }
}

/* Placeholders that fill the last page of the phone gallery grid (added by gallery.php): they take up the
   space of a photo but show nothing, and do not exist outside the phone layout. */
.lp-gallery-thumb.is-placeholder {
  display: none;
}

@media (max-width: 640px) {
  .lp-gallery--carousel_static.lp-carousel-track > .lp-gallery-thumb.is-placeholder {
    display: block;
    visibility: hidden;
    pointer-events: none;
  }

  .lp-gallery--carousel_static.lp-carousel-track > .lp-gallery-thumb.is-placeholder.is-off-page {
    display: none;
  }
}

/* Turning a page of the phone gallery grid: a short fade. (Without this the photos replayed the section's
   slow reveal animation - 1s plus a per-photo delay of up to a second - every time their page was shown.) */
.lp-section-inner.is-in .lp-gallery--carousel_static > .lp-gallery-thumb.is-paged {
  animation: lpRvScale .35s ease backwards;
}

/* Attractions / Happenings / Deals / Promotions: on phones every layout is the card grid. A section with
   another layout is rendered twice by its element file - the chosen layout (.lp-variant-wide) and a card
   grid (.lp-variant-phone) - and only one of them is shown at a time. */
.lp-variant-phone {
  display: none;
}

@media (max-width: 640px) {
  .lp-variant-wide {
    display: none;
  }

  .lp-variant-phone {
    display: block;
  }
}

/* FAQ on phones: heading, then the questions, and only then the "Still have questions?" contact box
   (it used to sit between the heading and the questions). The side column is dissolved (display: contents)
   so its pieces can be ordered next to the question list. */
@media (max-width: 640px) {
  .lp-faq-layout {
    gap: 0;
    align-items: stretch;
  }

  .lp-faq-side {
    display: contents;
  }

  .lp-faq-side .lp-eyebrow,
  .lp-faq-side .lp-faq-title,
  .lp-faq-side .lp-faq-intro {
    order: 1;
  }

  .lp-faq-layout .lp-faq-wrap {
    order: 2;
  }

  .lp-faq-layout .lp-faq-contact {
    order: 3;
    margin-top: 28px;
  }
}

@media (max-width: 640px) {
  .lp-faq-side .lp-eyebrow {
    justify-self: start; /* as a grid item it would otherwise stretch across the row */
  }
}

/* Contact Us on phones: one layout whatever variant was picked - the branch on top, the map below. Only the
   selected branch is shown; the arrows (see contact.php) move to the previous / next branch, which also
   points the map at it. */
.lp-contact-pager {
  display: none;
}

@media (max-width: 640px) {
  .lp-contact-layout,
  .lp-contact-layout--branch_list_top_map {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .lp-contact-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .lp-contact-pager-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-text-muted);
  }

  .lp-contact-list,
  .lp-contact-layout--branch_list_top_map .lp-contact-list {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .lp-contact-list .lp-contact-branch {
    display: none;
    flex: none;
  }

  .lp-contact-list .lp-contact-branch.is-active {
    display: flex;
  }

  .lp-contact-map,
  .lp-contact-map iframe {
    min-height: 300px;
  }
}

/* Contact Us on phones, part 2: fixed sizes so Previous / Next never moves anything (the branch card is
   always the same height, however long the address is), and a taller map that uses the screen. */
@media (max-width: 640px) {
  .lp-contact-list .lp-contact-branch.is-active {
    height: 176px;
    overflow: hidden;
    box-sizing: border-box;
  }

  .lp-contact-branch-addr {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .lp-contact-branch-phone,
  .lp-contact-branch-email {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .lp-contact-map {
    height: 55vh;
    height: 55svh;
    min-height: 340px;
  }

  .lp-contact-map iframe {
    height: 100%;
    min-height: 0;
  }
}

/* Short description (rich text) under a section's title. */
.lp-section-heading-content {
  margin-top: 14px;
}

/* "View details" popup of an attraction / happening / deal on the landing homepage (content comes from
   LandingResvSection/landing_resv_detail.php, the same element the booking page uses). */
.lp-detail-modal .modal-title {
  font-weight: 700;
}

.lp-detail-modal .lp-resv-detail-photo {
  display: block;
  width: 100%;
  max-height: 340px;
  margin-bottom: 16px;
  border-radius: 8px;
  object-fit: cover;
}

.lp-detail-modal .lp-resv-card-meta {
  margin: 0 0 8px;
  color: var(--theme-text-muted);
  font-size: 14px;
}

.lp-detail-modal .lp-resv-card-meta i {
  margin-right: 6px;
  color: var(--theme-primary-color);
}

.lp-detail-modal .lp-resv-detail-lead {
  font-size: 1.05rem;
  font-weight: 600;
}

.lp-detail-modal .lp-resv-detail-content {
  line-height: 1.7;
}

.lp-detail-modal .lp-resv-detail-content img {
  max-width: 100%;
  height: auto;
}

/* Attraction cards: the operating hours / distance lines under the name - normal case (the meta style
   they borrow is small uppercase), one per line, with their icon. */
.lp-grp-attar-happ-info {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
}

.lp-grp-attar-happ-info i {
  width: 16px;
  margin-right: 4px;
  text-align: center;
}