/* ═══════════════════════════════════════════════════
   Neon Nightlife — a gaming floor with a heartbeat.
   Bold uppercase geometric sans, two-color gradient-text
   eyebrows/glyphs, solid-gradient glowing panels ("glass"
   — opaque, NOT blurred/translucent glassmorphism), on a
   flat, solid page background (no ambient glow/gradient wash).

   Palette tokens (--gold-flat, --accent2, --on-accent2,
   --md-sys-color-*, --c-bg, --c-s1..4, --text-*, --hairline)
   are injected per-generation by src/builder.js's palette
   engine via the {{PALETTE_STYLE}} token — this file only
   defines how those tokens are USED, it never hard-codes a
   literal hex color anywhere.
   ═══════════════════════════════════════════════════ */

:root {
  /* Typography — one geometric sans family used everywhere; the contrast
     device in this template is gradient-text + glow, not a font pairing. */
  --font-display: Futura, 'Century Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    Futura, 'Century Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui:      Futura, 'Century Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --section-padding: 116px 0;
  --container-max:   1240px;

  /* Fallback defaults — always overridden per-build via PALETTE_STYLE injection.
     (Dark violet + teal, one of the ten real palettes this template ships with.) */
  --c-bg:      #0B0C14;
  --c-s1:      #121320;
  --c-s2:      #171827;
  --c-s3:      #1C1E2F;
  --c-s4:      #232538;
  --gold-flat: #8B5CF6;
  --accent2:   #2DE8C7;
  --on-accent2: #06110E;
  --hairline:  rgba(255,255,255,0.14);
  --text-body:      rgba(237,237,245,0.86);
  --text-heading:   #EDEDF5;
  --text-accent:    var(--gold-flat);
  --text-secondary: rgba(237,237,245,0.62);

  --ease: all 0.2s ease;
  --ease-transform: transform 0.35s ease;

  /* ── Derived tokens — every one computed FROM the base palette tokens
     above via color-mix(), never a hard-coded hex. This is how the same
     7 accent palettes × 2 modes produce a consistent neon look. ───────── */
  --glow-contact: color-mix(in srgb, var(--accent2) 16%, transparent);

  --panel-a: color-mix(in srgb, var(--gold-flat) 9%, var(--c-s1) 91%);
  --panel-b: color-mix(in srgb, var(--gold-flat) 2%, var(--c-s1) 98%);
  --panel-border: color-mix(in srgb, var(--gold-flat) 34%, var(--hairline) 66%);
  --panel-border-hover: var(--accent2);
  --panel-glow: 0 18px 40px -22px color-mix(in srgb, var(--gold-flat) 32%, transparent);
  --panel-glow-hover: 0 0 30px -4px color-mix(in srgb, var(--accent2) 42%, transparent);

  --cta-gradient: linear-gradient(90deg, var(--gold-flat), var(--accent2));
}

/* ── Reset & Base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  font-family: var(--font-body);
  color: var(--text-body);
  line-height: 1.7;
  overflow-x: hidden;
  position: relative;

  background-color: var(--c-bg);
}
img   { display: block; width: 100%; height: 100%; object-fit: cover; }
a     { color: inherit; text-decoration: none; }
ul    { list-style: none; }

.qltk5_container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}
/* Sections deliberately do NOT set an opaque background — the ambient glow
   above must read through the whole page, not reset to flat --c-bg between
   sections. Only Hero and Casino (full-bleed photos) paint their own bg. */
.qltk5_section { padding: var(--section-padding); }

/* ── Typography helpers ───────────────────────────── */
.qltk5_section-eyebrow,
.qltk5_hero-eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--cta-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 16px;
}
.qltk5_section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.08;
  color: var(--text-heading);
  margin-bottom: 22px;
  text-wrap: balance;
}
.qltk5_section-title.qltk5_light { color: var(--text-heading); }
.qltk5_section-subtitle {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto;
}
.qltk5_section-body {
  font-size: 1.02rem;
  color: var(--text-secondary);
  max-width: 560px;
  line-height: 1.85;
}
.qltk5_section-header {
  text-align: center;
  margin-bottom: 60px;
}

/* ── Scroll-reveal animations ─────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

/* ── Buttons — pill-shaped, gradient-filled primary CTA ───────────────── */
.qltk5_btn-filled,
.qltk5_btn-outlined,
.qltk5_btn-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  transition: var(--ease), box-shadow 0.25s ease, transform 0.2s ease;
  border: 1px solid transparent;
}
.qltk5_btn-filled {
  background: var(--cta-gradient);
  color: var(--on-accent2);
  box-shadow: 0 6px 24px -8px color-mix(in srgb, var(--accent2) 55%, transparent);
}
.qltk5_btn-filled:hover  { transform: translateY(-1px); box-shadow: 0 10px 30px -6px color-mix(in srgb, var(--accent2) 65%, transparent); }
.qltk5_btn-filled:active { transform: translateY(0); }

.qltk5_btn-outlined {
  background: transparent;
  color: var(--text-heading);
  border: 1.5px solid var(--panel-border);
}
.qltk5_btn-outlined:hover { border-color: var(--accent2); color: var(--accent2); box-shadow: var(--panel-glow-hover); }

.qltk5_btn-text {
  background: transparent;
  color: var(--accent2);
  padding: 13px 4px;
  border-radius: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.qltk5_btn-text:hover { opacity: 0.78; }

/* ── ".qltk5_glass" — the primary structural device of this template ───────────
   A SOLID, OPAQUE gradient panel (never translucent/blurred — a real
   backdrop-filter glassmorphism treatment was tried and explicitly
   rejected in an earlier design review of this exact template). Crisp
   1px border, neon glow shadow that intensifies and shifts to the
   second accent color on hover. Applied to every card/panel/photo-frame
   across the whole site. ─────────────────────────────────────────────── */
.qltk5_glass {
  background: linear-gradient(165deg, var(--panel-a), var(--panel-b) 65%);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  box-shadow: var(--panel-glow);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.qltk5_glass:hover {
  border-color: var(--panel-border-hover);
  box-shadow: var(--panel-glow-hover);
}

/* Card-like elements get a touch of lift on hover; pure image frames
   (about/dining insets, interlude, amenities image, map) stay put so
   the photo itself doesn't jump. */
.qltk5_highlight-item.qltk5_glass,
.qltk5_card-elevated.qltk5_glass,
.qltk5_testimonial-card.qltk5_glass,
.qltk5_casino-feature.qltk5_glass,
.qltk5_stat.qltk5_glass,
.qltk5_amenities-list li.qltk5_glass {
  transform: translateY(0);
}
.qltk5_highlight-item.qltk5_glass:hover,
.qltk5_card-elevated.qltk5_glass:hover,
.qltk5_testimonial-card.qltk5_glass:hover,
.qltk5_casino-feature.qltk5_glass:hover,
.qltk5_amenities-list li.qltk5_glass:hover {
  transform: translateY(-3px);
}

/* Photo frames: the .qltk5_glass gradient bg is invisible under a full-cover
   image, only the glow border shows — still gets the identical treatment. */
.qltk5_about-image.qltk5_glass,
.qltk5_about-image-inset.qltk5_glass,
.qltk5_dining-image.qltk5_glass,
.qltk5_dining-image-inset.qltk5_glass,
.qltk5_casino-image.qltk5_glass,
.qltk5_amenities-image.qltk5_glass,
.qltk5_interlude-item.qltk5_glass,
.qltk5_hotel-map.qltk5_glass {
  overflow: hidden;
}

.qltk5_card-elevated { overflow: hidden; }

/* ═══════════════════════════════════════ NAVIGATION */
.qltk5_nav-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 24px 0;
  transition: var(--ease);
  border-bottom: 1px solid transparent;
}
.qltk5_nav-header.scrolled {
  background: color-mix(in srgb, var(--c-bg) 90%, var(--gold-flat) 3%);
  border-bottom: 1px solid var(--hairline);
  padding: 14px 0;
}
.qltk5_nav-inner {
  display: flex;
  align-items: center;
  gap: 40px;
}
.qltk5_nav-logo {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-heading);
  white-space: nowrap;
  flex-shrink: 0;
}
.qltk5_nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 30px;
  row-gap: 6px;
  margin-left: auto;
}
.qltk5_nav-links a {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: var(--ease);
  padding: 4px 0;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.qltk5_nav-links a:hover { color: var(--accent2); border-bottom-color: var(--accent2); }

/* Burger */
.qltk5_nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.qltk5_nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--cta-gradient);
  transition: var(--ease);
}
.qltk5_nav-burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.qltk5_nav-burger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.qltk5_nav-burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ═══════════════════════════════════════════ HERO */
.qltk5_hero {
  position: relative;
  height: 100vh;
  min-height: 680px;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* Dark tinted overlay so the gradient-text/glow aesthetic still reads
   clearly over the real hotel photo. */
.qltk5_hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--accent2) 20%, transparent), transparent 55%),
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--c-bg) 88%, transparent) 0%,
      color-mix(in srgb, var(--c-bg) 68%, transparent) 45%,
      color-mix(in srgb, var(--c-bg) 40%, transparent) 100%
    );
}
.qltk5_hero-content {
  position: relative;
  z-index: 2;
  max-width: 660px;
  margin: 0 auto;
  padding: 0 24px;
  animation: fadeInUp 0.9s ease both;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.qltk5_hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1;
  color: var(--text-heading);
  margin-bottom: 24px;
}
/* Sits over the hero photo — --text-heading (plain ink) instead of the
   softer --text-secondary blend, meaningfully darker on a light palette. */
.qltk5_hero-subtitle {
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--text-heading);
  max-width: 44ch;
  margin: 0 0 40px;
  line-height: 1.6;
}
.qltk5_hero-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.qltk5_hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--text-secondary);
  transition: var(--ease);
}
.qltk5_hero-scroll:hover { color: var(--accent2); }
.qltk5_scroll-arrow {
  display: block;
  font-size: 20px;
  animation: bounceY 2s ease-in-out infinite;
}
@keyframes bounceY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

/* ══════════════════════════════════ HIGHLIGHTS STRIP */
.qltk5_highlights-strip {
  padding: 72px 0;
}
.qltk5_highlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.qltk5_highlight-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 26px;
}
.qltk5_highlight-icon {
  display: inline-block;
  font-size: 1.9rem;
  line-height: 1;
  margin-bottom: 4px;
  background: linear-gradient(135deg, var(--gold-flat), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.qltk5_highlight-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text-heading);
}
.qltk5_highlight-desc {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════ ABOUT */
.qltk5_about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 72px;
  align-items: center;
}
.qltk5_about-stats {
  display: flex;
  gap: 16px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.qltk5_stat {
  flex: 1;
  min-width: 120px;
  padding: 20px 18px;
  text-align: center;
}
.qltk5_stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  background: var(--cta-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.qltk5_stat-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 6px;
}
.qltk5_about-image-group { position: relative; }
.qltk5_about-image {
  aspect-ratio: 4/5;
}
.qltk5_about-image-inset {
  position: absolute;
  right: -10%;
  bottom: -12%;
  width: 52%;
  aspect-ratio: 4/3;
  border-width: 5px;
}

/* ═══════════════════════════════════════════ ROOMS */
.qltk5_rooms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.qltk5_room-card {
  display: flex;
  flex-direction: column;
}
.qltk5_featured-card { border-color: var(--accent2); }
.qltk5_room-image-wrap {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 13px 13px 0 0;
}
.qltk5_room-image-wrap img { transition: transform 0.6s ease; }
.qltk5_room-card:hover .qltk5_room-image-wrap img { transform: scale(1.05); }

.qltk5_room-feature-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: color-mix(in srgb, var(--c-bg) 55%, transparent);
  border: 1px solid var(--panel-border);
  color: var(--text-heading);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}
.qltk5_room-popular-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--cta-gradient);
  color: var(--on-accent2);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}
.qltk5_room-body { padding: 26px; flex: 1; display: flex; flex-direction: column; }
.qltk5_room-stars { color: var(--gold-flat); letter-spacing: 0.15em; font-size: 0.8rem; margin-bottom: 10px; }
.qltk5_room-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-heading);
  margin-bottom: 12px;
}
.qltk5_room-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.75;
  flex: 1;
  margin-bottom: 22px;
}
.qltk5_room-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.qltk5_room-price {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent2);
}
.qltk5_room-price small {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════ CASINO */
.qltk5_casino-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 72px;
  align-items: center;
}
.qltk5_casino-image-group { position: relative; }
.qltk5_casino-image { aspect-ratio: 4/5; }
.qltk5_casino-desc {
  font-size: 1.02rem;
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: 40px;
  max-width: 560px;
}
.qltk5_casino-features {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.qltk5_casino-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-heading);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 18px;
  flex: 1;
  min-width: 150px;
}
.qltk5_cf-icon { color: var(--accent2); font-size: 1.1rem; }

/* ═══════════════════════════════════════════ DINING */
.qltk5_dining-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  align-items: center;
}
.qltk5_dining-image-group { position: relative; }
.qltk5_dining-image {
  aspect-ratio: 4/5;
}
.qltk5_dining-image-inset {
  position: absolute;
  left: -10%;
  bottom: -12%;
  width: 52%;
  aspect-ratio: 4/3;
  border-width: 5px;
}

/* ═══════════════════════════════════════ AMENITIES */
.qltk5_amenities-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: center;
}
.qltk5_amenities-image {
  aspect-ratio: 3/4;
}
.qltk5_amenities-list {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qltk5_amenities-list li {
  list-style: none;
  padding: 16px 20px;
  font-size: 1rem;
  color: var(--text-secondary);
}
.qltk5_amenities-list li:hover { color: var(--text-heading); }

/* ══════════════════════════════════ TESTIMONIALS */
.qltk5_testimonial-card {
  padding: 28px 26px 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.qltk5_testimonial-stars { color: var(--gold-flat); letter-spacing: 0.15em; font-size: 0.85rem; }
.qltk5_testimonial-text {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-heading);
  line-height: 1.6;
  flex: 1;
}
.qltk5_testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.qltk5_testimonial-name {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--text-heading);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.qltk5_testimonial-location {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}

/* Swiper overrides */
.qltk5_testimonials-swiper { padding-bottom: 48px !important; }
.swiper-pagination-bullet {
  background: var(--hairline);
  opacity: 1;
  border-radius: 999px;
  width: 7px; height: 7px;
}
.swiper-pagination-bullet-active {
  background: var(--cta-gradient);
  width: 22px;
}

/* ═══════════════════════════════ INTERLUDE (full-bleed visual break) */
.qltk5_interlude-section { padding: 8px 0; }
.qltk5_interlude-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}
.qltk5_interlude-item   { overflow: hidden; }
.qltk5_interlude-tall,
.qltk5_interlude-wide,
.qltk5_interlude-square { aspect-ratio: 4/3; }
.qltk5_interlude-item img { transition: transform 0.6s ease; }
.qltk5_interlude-item:hover img { transform: scale(1.06); }

/* ═══════════════════════════════ MORE SERVICES (home teaser for services
   beyond the header's first 4 — see src/builder.js HEADER_SERVICE_LIMIT) */
.qltk5_more-services-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.qltk5_more-services-links a {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(165deg, var(--panel-a), var(--panel-b) 65%);
  border: 1px solid var(--panel-border);
  color: var(--text-heading);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: var(--ease), box-shadow 0.25s ease;
}
.qltk5_more-services-links a:hover {
  border-color: var(--panel-border-hover);
  color: var(--accent2);
  box-shadow: var(--panel-glow-hover);
}

/* ═══════════════════════════════════════════ CONTACT */
.qltk5_contact-section { position: relative; }
/* Extra localized glow behind the contact block, on top of the ambient
   page-wide wash, so this section reads as a distinct "closing" moment. */
.qltk5_contact-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 30%, var(--glow-contact), transparent 55%);
  pointer-events: none;
}
.qltk5_contact-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  align-items: start;
}
.qltk5_contact-details { display: flex; flex-direction: column; gap: 20px; margin: 32px 0; }
.qltk5_contact-item    { display: flex; align-items: center; gap: 16px; color: var(--text-secondary); font-size: 0.95rem; }
.qltk5_contact-icon    { color: var(--accent2); font-size: 1.1rem; }
.qltk5_contact-item a:hover { color: var(--accent2); }
.qltk5_contact-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* Leaflet map — Leaflet's own CSS gives internal panes/controls z-index up to
   1000 (way above our fixed header's 200); without its own stacking context,
   that 1000 gets compared directly against the header's 200 in the shared
   root context and wins, rendering the map's controls/popups on top of the
   header. `isolation: isolate` contains Leaflet's entire z-index range
   inside this box so it can never escape above anything outside it. */
.qltk5_hotel-map {
  aspect-ratio: 4/5;
  overflow: hidden;
  isolation: isolate;
}

/* Custom pin */
.qltk5_map-pin {
  width: 42px; height: 42px;
  background: var(--cta-gradient);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--on-accent2); font-size: 18px;
  box-shadow: 0 0 20px -2px color-mix(in srgb, var(--accent2) 55%, transparent);
}

.leaflet-popup-content-wrapper {
  background: var(--c-s2) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--panel-glow) !important;
  color: var(--text-body) !important;
}
.leaflet-popup-content-wrapper strong { color: var(--accent2); }
.leaflet-popup-content-wrapper span   { font-size: 12px; color: var(--text-secondary); }
.leaflet-popup-tip-container .leaflet-popup-tip { background: var(--c-s2) !important; }
.leaflet-popup-close-button { color: var(--text-secondary) !important; }
.leaflet-popup-close-button:hover { color: var(--accent2) !important; }

.leaflet-bar a {
  background: var(--c-s2) !important;
  color: var(--accent2) !important;
  border-color: var(--hairline) !important;
}
.leaflet-bar a:hover { background: var(--c-s3) !important; }

.leaflet-control-attribution {
  background: color-mix(in srgb, var(--c-bg) 75%, transparent) !important;
  color: var(--text-secondary) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--text-secondary) !important; }

/* ═══════════════════════════════════════════ FOOTER */
.qltk5_footer { border-top: 1px solid var(--hairline); }
.qltk5_footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding: 68px 24px;
  max-width: var(--container-max);
  margin: 0 auto;
}
.qltk5_footer-logo {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--cta-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 16px;
}
.qltk5_footer-brand p  { font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-secondary); line-height: 1.7; max-width: 240px; }
.qltk5_footer-links h4 {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 20px;
}
.qltk5_footer-links ul { display: flex; flex-direction: column; gap: 12px; }
.qltk5_footer-links a  { font-family: var(--font-ui); font-size: 13px; color: var(--text-secondary); transition: var(--ease); }
.qltk5_footer-links a:hover { color: var(--accent2); }
.qltk5_footer-bottom {
  border-top: 1px solid var(--hairline);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.qltk5_footer-bottom p  { font-family: var(--font-ui); font-size: 12px; color: var(--text-secondary); }
.qltk5_gambling-notice  { font-size: 11px !important; }

/* ══════════════════════════════════ COOKIE BANNER */
.qltk5_cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 999;
  background: color-mix(in srgb, var(--c-bg) 94%, var(--gold-flat) 3%);
  border-top: 1px solid var(--hairline);
  padding: 18px 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.qltk5_cookie-banner.hidden {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
.qltk5_cookie-banner-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.qltk5_cookie-banner-text {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  min-width: 240px;
}
.qltk5_cookie-banner-text strong { color: var(--text-heading); }
.qltk5_cookie-banner-text a { color: var(--accent2); text-decoration: underline; text-underline-offset: 3px; }
.qltk5_cookie-banner-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.qltk5_cookie-btn-accept,
.qltk5_cookie-btn-reject {
  padding: 11px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: var(--ease);
}
.qltk5_cookie-btn-accept {
  background: var(--cta-gradient);
  color: var(--on-accent2);
}
.qltk5_cookie-btn-accept:hover { opacity: 0.88; }
.qltk5_cookie-btn-reject {
  background: transparent;
  color: var(--text-heading);
  border: 1px solid var(--panel-border);
}
.qltk5_cookie-btn-reject:hover { border-color: var(--accent2); color: var(--accent2); }

/* ═══════════════════════════════ LEGAL / COMPLIANCE PAGES */
.qltk5_legal-page {
  padding: 140px 0 100px;
  min-height: 80vh;
}
.qltk5_legal-header {
  margin-bottom: 52px;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 32px;
}
.qltk5_legal-header h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-heading);
  margin-bottom: 8px;
}
.qltk5_legal-meta {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-secondary);
}
.qltk5_legal-notice {
  background: linear-gradient(165deg, var(--panel-a), var(--panel-b) 65%);
  border: 1px solid var(--panel-border);
  border-left: 3px solid var(--gold-flat);
  border-radius: 12px;
  padding: 22px 26px;
  margin-bottom: 48px;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.8;
}
.qltk5_legal-notice--warning {
  border-left-color: #FF5470;
}
.qltk5_legal-notice--warning strong { color: #FF8AA0; }
.qltk5_legal-warning {
  background: linear-gradient(165deg, var(--panel-a), var(--panel-b) 65%);
  border: 1px solid var(--panel-border);
  border-left: 3px solid #FF5470;
  border-radius: 12px;
  padding: 22px 26px;
  margin: 16px 0 24px;
  font-size: 0.95rem;
  color: #FF8AA0;
  line-height: 1.7;
}
.qltk5_legal-section {
  margin-bottom: 52px;
}
.qltk5_legal-section h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-heading);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.qltk5_legal-section h3 {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-heading);
  margin: 26px 0 12px;
}
.qltk5_legal-section p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.9;
  margin-bottom: 18px;
}
.qltk5_legal-section a { color: var(--accent2); text-decoration: underline; text-underline-offset: 3px; }
.qltk5_legal-section a:hover { opacity: 0.8; }
.qltk5_legal-section ul,
.qltk5_legal-section ol {
  margin: 12px 0 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qltk5_legal-section ul { list-style: disc; }
.qltk5_legal-section ol { list-style: decimal; }
.qltk5_legal-section li { font-size: 1rem; color: var(--text-secondary); line-height: 1.8; }
.qltk5_legal-section ul ul { margin-top: 8px; list-style: circle; }

.qltk5_legal-box {
  background: linear-gradient(165deg, var(--panel-a), var(--panel-b) 65%);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 22px 26px;
  margin: 16px 0 24px;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.85;
}

/* Legal table */
.qltk5_table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; box-shadow: inset -12px 0 8px -8px rgba(0,0,0,0.18); }
.qltk5_legal-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 16px 0 24px;
  font-size: 0.875rem;
  background: var(--c-s2);
  border: 1px solid color-mix(in srgb, var(--accent2) 30%, transparent);
}
.qltk5_legal-table thead tr { background: var(--c-s2); }
.qltk5_legal-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent2);
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
}
.qltk5_legal-table thead th:last-child { border-right: none; }
.qltk5_legal-table tbody tr { border-bottom: 1px solid var(--hairline); }
.qltk5_legal-table tbody tr:last-child { border-bottom: none; }
.qltk5_legal-table tbody td {
  padding: 12px 16px;
  color: var(--text-secondary);
  vertical-align: top;
  line-height: 1.6;
  border-right: 1px solid var(--hairline);
}
.qltk5_legal-table tbody td:last-child { border-right: none; }

/* Responsible gambling helplines */
.qltk5_helplines-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
}
.qltk5_helpline-card {
  background: linear-gradient(165deg, var(--panel-a), var(--panel-b) 65%);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 26px 22px;
}
.qltk5_helpline-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-heading);
  margin: 0 0 10px;
}
.qltk5_helpline-card p { font-family: var(--font-ui); font-size: 0.85rem; margin-bottom: 4px; color: var(--text-secondary); }
.qltk5_helpline-card strong { color: var(--accent2); }
.qltk5_helpline-card a { font-size: 0.85rem; color: var(--accent2); text-decoration: underline; }

/* Footer legal id */
.qltk5_footer-legal-id {
  font-size: 0.75rem !important;
  color: var(--text-secondary) !important;
  margin-top: 8px !important;
}

/* ═══════════════════════════════════ BOOKING MODAL */
.qltk5_bm {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.qltk5_bm[hidden] { display: none; }

.qltk5_bm-overlay {
  position: absolute; inset: 0;
  background: color-mix(in srgb, black 84%, transparent);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.qltk5_bm.open .qltk5_bm-overlay { opacity: 1; }

.qltk5_bm-dialog {
  position: relative; z-index: 1;
  border-radius: 20px;
  padding: 44px 40px;
  width: 100%; max-width: 460px;
  max-height: 92vh; overflow-y: auto;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.qltk5_bm.open .qltk5_bm-dialog { opacity: 1; transform: none; }

.qltk5_bm-close {
  position: absolute; top: 18px; right: 20px;
  background: none; border: none;
  color: var(--text-secondary); font-size: 16px;
  cursor: pointer; padding: 6px; line-height: 1;
  transition: color 0.2s;
}
.qltk5_bm-close:hover { color: var(--accent2); }

.qltk5_bm-header        { margin-bottom: 24px; }
.qltk5_bm-header h2     { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.6rem; color: var(--text-heading); margin-bottom: 6px; }
.qltk5_bm-subtitle      { font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-secondary); }

.qltk5_bm-room-tag {
  display: inline-block;
  background: var(--cta-gradient);
  color: var(--on-accent2);
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 18px;
}
.qltk5_bm-room-tag[hidden] { display: none; }

.qltk5_bm-field         { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.qltk5_bm-field label   { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.qltk5_bm-field input,
.qltk5_bm-field select  {
  background: var(--c-bg);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font-ui); font-size: 0.9rem;
  color: var(--text-body); outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none; appearance: none;
}
.qltk5_bm-field input::placeholder { color: var(--text-secondary); opacity: 0.6; }
.qltk5_bm-field input:focus,
.qltk5_bm-field select:focus  { border-color: var(--accent2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent2) 22%, transparent); }
.qltk5_bm-field input.error   { border-color: #FF5470; }

.qltk5_bm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.qltk5_bm-submit {
  width: 100%; padding: 15px; margin-top: 8px;
  background: var(--cta-gradient); color: var(--on-accent2);
  border: none; border-radius: 999px;
  font-family: var(--font-ui); font-size: 12px;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; transition: box-shadow 0.2s, transform 0.2s;
  box-shadow: 0 6px 24px -8px color-mix(in srgb, var(--accent2) 55%, transparent);
}
.qltk5_bm-submit:hover    { box-shadow: 0 10px 30px -6px color-mix(in srgb, var(--accent2) 65%, transparent); }
.qltk5_bm-submit:active   { transform: translateY(1px); }
.qltk5_bm-submit:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.qltk5_bm-success       { text-align: center; padding: 16px 0; }
.qltk5_bm-success-icon  {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--cta-gradient);
  color: var(--on-accent2); font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 0 24px -4px color-mix(in srgb, var(--accent2) 55%, transparent);
}
.qltk5_bm-success h3    { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.35rem; color: var(--text-heading); margin-bottom: 10px; }
.qltk5_bm-success p     { font-family: var(--font-ui); font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 26px; }
.qltk5_bm-close-btn {
  background: none; border: 1px solid var(--panel-border);
  border-radius: 999px; color: var(--text-heading);
  padding: 11px 32px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; transition: var(--ease);
}
.qltk5_bm-close-btn:hover { border-color: var(--accent2); color: var(--accent2); }

/* ═══════════════════════════════════ SERVICE PAGES */
.qltk5_service-page { padding-top: 88px; }

.qltk5_service-hero {
  position: relative;
  height: 420px;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
}
/* .qltk5_service-hero-content h1 already uses the strong --text-heading color, so
   this scrim doesn't need to be near-opaque to keep it legible — 92% was
   covering most of the photo behind it. */
.qltk5_service-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--c-bg) 55%, transparent) 0%, color-mix(in srgb, var(--c-bg) 15%, transparent) 100%);
}
.qltk5_service-hero-content {
  position: relative; z-index: 1;
  padding-bottom: 48px;
}
.qltk5_service-hero-content h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 700; text-transform: uppercase;
  color: var(--text-heading);
  margin-top: 10px;
}

.qltk5_service-body     { padding: 72px 24px 110px; max-width: 1240px; margin: 0 auto; }
.qltk5_service-intro-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 60px;
}
.qltk5_service-intro    { font-size: 1.08rem; color: var(--text-secondary); line-height: 1.9; }
.qltk5_service-intro-image {
  aspect-ratio: 4/3;
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  overflow: hidden;
}

.qltk5_service-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 64px;
}
.qltk5_service-feature-card {
  background: linear-gradient(165deg, var(--panel-a), var(--panel-b) 65%);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 30px 26px;
  box-shadow: var(--panel-glow);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.qltk5_service-feature-card:hover {
  border-color: var(--panel-border-hover);
  box-shadow: var(--panel-glow-hover);
  transform: translateY(-3px);
}
.qltk5_service-feature-icon {
  display: inline-block;
  font-size: 1.6rem;
  margin-bottom: 10px;
  background: linear-gradient(135deg, var(--gold-flat), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.qltk5_service-feature-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.05rem; color: var(--text-heading); margin-bottom: 10px;
}
.qltk5_service-feature-card p { font-family: var(--font-ui); font-size: 0.875rem; color: var(--text-secondary); line-height: 1.7; }

.qltk5_service-cta-block { text-align: center; padding-top: 16px; }
.qltk5_service-cta-btn {
  display: inline-block;
  padding: 16px 44px;
  background: var(--cta-gradient); color: var(--on-accent2);
  border: none; border-radius: 999px;
  font-family: var(--font-ui); font-size: 13px;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; transition: box-shadow 0.2s, transform 0.2s;
  box-shadow: 0 6px 24px -8px color-mix(in srgb, var(--accent2) 55%, transparent);
}
.qltk5_service-cta-btn:hover  { box-shadow: 0 10px 30px -6px color-mix(in srgb, var(--accent2) 65%, transparent); transform: translateY(-1px); }
.qltk5_service-cta-btn:active { transform: translateY(0); }

@media (max-width: 768px) {
  .qltk5_service-features    { grid-template-columns: 1fr 1fr; }
  .qltk5_service-intro-grid  { grid-template-columns: 1fr; gap: 32px; }
  .qltk5_bm-row              { grid-template-columns: 1fr; }
  .qltk5_bm-dialog           { padding: 30px 22px; }
}
@media (max-width: 480px) {
  .qltk5_service-features { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════ RESPONSIVE */
@media (max-width: 1024px) {
  .qltk5_about-grid,
  .qltk5_dining-grid,
  .qltk5_casino-grid       { grid-template-columns: 1fr; gap: 48px; }
  .qltk5_about-image-group { order: -1; }
  .qltk5_rooms-grid        { grid-template-columns: 1fr 1fr; }
  .qltk5_footer-inner      { grid-template-columns: 1fr 1fr; }
  .qltk5_highlights-grid   { gap: 20px; }
  .qltk5_amenities-layout  { grid-template-columns: 1fr; gap: 36px; }
  .qltk5_amenities-image   { order: -1; aspect-ratio: 16/9; }
  .qltk5_helplines-grid    { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root {
    --section-padding: 72px 0;
    /* Fixed backgrounds are costly/jumpy on mobile browsers (esp. iOS
       Safari) — fall back to normal scrolling backgrounds below 768px. */
  }

  .qltk5_hero { background-attachment: scroll; align-items: center; }

  /* Mobile nav: burger LEFT, logo CENTERED, CTA hidden */
  .qltk5_nav-inner    { position: relative; justify-content: space-between; gap: 0; }
  .qltk5_nav-burger   { display: flex; order: 0; flex-shrink: 0; }
  .qltk5_nav-logo     {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
  }
  /* .qltk5_nav-header is `position: fixed`, so it's the containing block for this
     absolutely-positioned menu — `top: 100%` docks it flush against the
     header's actual rendered height instead of a hardcoded px guess. */
  .qltk5_nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--c-bg);
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    padding: 20px 0;
    border-bottom: 1px solid var(--hairline);
    z-index: 199;
  }
  .qltk5_nav-links.open { display: flex; }
  .qltk5_nav-links li   { width: 100%; text-align: center; }
  .qltk5_nav-links a    { display: block; padding: 14px; border-bottom: 1px solid var(--hairline); }
  .qltk5_nav-cta        { display: none; }

  .qltk5_highlights-grid { grid-template-columns: 1fr; gap: 18px; }
  .qltk5_rooms-grid      { grid-template-columns: 1fr; }
  .qltk5_contact-grid    { grid-template-columns: 1fr; }
  .qltk5_footer-inner    { grid-template-columns: 1fr 1fr; gap: 32px; }
  .qltk5_footer-bottom   { flex-direction: column; text-align: center; }
  .qltk5_casino-features { gap: 10px; }
  .qltk5_about-stats     { gap: 12px; }

  /* Absolute overlap insets risk overflowing the viewport on narrow screens —
     drop into normal flow instead, pulled up over the main image via negative
     margin (safe: no absolute positioning, nothing can spill off-screen). */
  .qltk5_about-image-inset,
  .qltk5_dining-image-inset {
    position: static;
    width: 60%;
    margin: -36px 0 0 auto;
  }

  .qltk5_interlude-grid    { grid-template-columns: 1fr 1fr; }
  .qltk5_interlude-tall,
  .qltk5_interlude-wide,
  .qltk5_interlude-square  { aspect-ratio: 4/3; }
}

@media (max-width: 480px) {
  .qltk5_footer-inner    { grid-template-columns: 1fr; }
  .qltk5_interlude-grid  { grid-template-columns: 1fr; }
  .qltk5_about-stats     { flex-direction: column; gap: 12px; }
  .qltk5_cookie-banner-inner { flex-direction: column; align-items: stretch; }
  .qltk5_cookie-banner-actions { justify-content: stretch; }
  .qltk5_cookie-btn-accept,
  .qltk5_cookie-btn-reject { width: 100%; text-align: center; padding: 12px; }
  .qltk5_helplines-grid  { grid-template-columns: 1fr; }
  .qltk5_legal-table     { font-size: 0.8rem; min-width: 520px; }
}

@media (max-width: 768px) {
  .qltk5_legal-page      { padding: 110px 0 64px; }
}

/* Policy pages: stacked readable layout and improved contrast */
.policy-page .container,
.policy-page main,
.policy-page section,
.policy-page .content,
.policy-content,
.legal-content {
  display: block !important;
  width: 100% !important;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.policy-page h1, .policy-page h2, .policy-page p, .policy-page li,
.policy-content h1, .policy-content h2, .policy-content p, .policy-content li,
.legal-content h1, .legal-content h2, .legal-content p, .legal-content li {
  color: var(--text-body) !important;
  line-height: 1.65;
}
@media (max-width: 768px) {
  .policy-page .container,
  .policy-page main,
  .policy-page section,
  .policy-content,
  .legal-content {
    display: block !important;
    padding-left: 16px;
    padding-right: 16px;
  }
}