:root {
  --bg-dark: #06070b;
  --bg-deep: #fff5ee;
  --bg-deeper: #1d1b21;
  --bg-cream: #13141b;
  --bg-sand: #24161d;
  --surface: rgba(43, 25, 34, 0.72);
  --surface-strong: rgba(58, 30, 41, 0.86);
  --surface-soft: rgba(255, 246, 240, 0.05);
  --text-dark: #fff8f2;
  --text-soft: #e2d0cc;
  --lime: #58e3de;
  --lime-strong: #86f0e5;
  --orange: #ff8d64;
  --gold: #ffc56d;
  --pink: #d85d94;
  --cyan: #58e3de;
  --border-soft: rgba(255, 255, 255, 0.12);
  --shadow-soft: 0 22px 48px rgba(54, 18, 31, 0.22);
  --shadow-card: 0 24px 52px rgba(44, 12, 24, 0.28);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --container: min(1180px, calc(100vw - 40px));
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(255, 141, 100, 0.34),
      transparent 32%
    ),
    radial-gradient(
      circle at 54% 16%,
      rgba(255, 197, 109, 0.2),
      transparent 24%
    ),
    radial-gradient(
      circle at 84% 11%,
      rgba(216, 93, 148, 0.14),
      transparent 24%
    ),
    radial-gradient(
      circle at 76% 30%,
      rgba(88, 227, 222, 0.1),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #251219 0,
      #4d2430 19%,
      #6f3743 34%,
      #45283a 56%,
      #252536 80%,
      #171a24 100%
    );
  color: var(--text-dark);
  font-family: "Manrope", sans-serif;
}

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

a {
  color: inherit;
  text-decoration: none;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -56px;
  z-index: 20;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff8f2;
  color: #161821;
  font-size: 0.9rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
  transition: top 160ms ease;
}

.skip-link:focus {
  top: 16px;
}

button,
input,
select,
textarea {
  font: inherit;
}

.site-shell {
  position: relative;
  width: 100%;
  max-width: 100vw;
  overflow: clip;
}

.site-shell::before {
  z-index: 0;
}

.site-shell::before,
.site-shell::after {
  content: "";
  position: absolute;
  inset: auto auto 18% -8%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 140, 101, 0.24),
    transparent 70%
  );
  filter: blur(22px);
  pointer-events: none;
}

.site-shell::after {
  inset: 520px -10% auto auto;
  width: 420px;
  height: 420px;
  background:
    radial-gradient(circle, rgba(255, 45, 149, 0.16), transparent 62%),
    radial-gradient(
      circle at 62% 38%,
      rgba(255, 182, 73, 0.12),
      transparent 52%
    ),
    radial-gradient(circle at 68% 42%, rgba(0, 229, 255, 0.1), transparent 44%);
}

.site-shell > * {
  position: relative;
  z-index: 1;
}

::selection {
  background: rgba(0, 229, 255, 0.28);
}

.site-header,
.section-frame,
.site-footer {
  width: var(--container);
  margin-inline: auto;
}

.site-header {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  padding: 14px 20px;
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255, 190, 160, 0.16);
  border-radius: 28px;
  background: linear-gradient(
    135deg,
    rgba(63, 27, 37, 0.64),
    rgba(88, 35, 43, 0.44)
  );
  box-shadow: 0 18px 38px rgba(52, 18, 30, 0.14);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 24px;
  border: 1px solid rgba(255, 190, 160, 0.18);
  background: linear-gradient(
    135deg,
    rgba(72, 31, 40, 0.82),
    rgba(94, 37, 47, 0.76)
  );
  box-shadow: 0 16px 28px rgba(48, 16, 28, 0.16);
}

.brand-lockup {
  min-height: 72px;
  max-width: 100%;
}

.site-header .brand {
  padding: 10px 12px;
  border-radius: 22px;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 20px;
  height: 54px;
  flex: 0 0 auto;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-wordmark {
  display: grid;
  gap: 2px;
  align-content: center;
  min-width: 0;
  line-height: 0.88;
  text-transform: uppercase;
}

.brand-line {
  display: block;
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.03em;
  color: #fff8ef;
}

.brand-line-top {
  color: rgba(255, 248, 236, 0.78);
  font-size: 0.92rem;
  letter-spacing: 0.14em;
}

.brand-line-bottom {
  font-size: 1.8rem;
}

.brand-line-bottom em {
  color: var(--cyan);
  font-style: normal;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: rgba(255, 247, 240, 0.92);
  font-size: 0.92rem;
  font-weight: 700;
}

.site-nav a {
  position: relative;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--cyan));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  transform: scaleX(1);
}

.menu-toggle {
  display: none;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  padding: 0;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 6px auto;
  background: var(--bg-deep);
  border-radius: 999px;
}

.button,
.text-link {
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    color 180ms ease;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.button:hover,
.button:focus-visible,
.text-link:hover,
.text-link:focus-visible {
  transform: translateY(-2px);
}

.button:focus-visible,
.text-link:focus-visible,
.site-nav a:focus-visible,
.menu-toggle:focus-visible,
.back-link:focus-visible,
.contact-links a:focus-visible,
.footer-links a:focus-visible,
.faq-panel summary:focus-visible {
  outline: 2px solid rgba(0, 229, 255, 0.9);
  outline-offset: 4px;
}

.button-accent {
  background: linear-gradient(
    135deg,
    var(--orange),
    var(--gold) 55%,
    var(--pink)
  );
  color: #1b1b1b;
  box-shadow: 0 18px 34px rgba(255, 107, 104, 0.3);
}

.button-secondary {
  border-color: rgba(255, 235, 226, 0.28);
  background: rgba(255, 245, 240, 0.16);
  color: var(--text-dark);
  backdrop-filter: blur(10px);
}

.header-cta {
  justify-self: end;
}

.section-frame {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.night-route {
  position: relative;
  isolation: isolate;
}

.night-route > * {
  position: relative;
  z-index: 1;
}

.route-thread {
  position: absolute;
  inset: 120px 0 180px;
  pointer-events: none;
  z-index: 0;
}

.route-thread-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(280px, 30vw);
  transform: translateX(-50%);
  opacity: 0.54;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 2400' preserveAspectRatio='none'%3E%3Cpath d='M160 0 C72 176 258 338 160 516 C64 692 266 852 152 1034 C56 1210 266 1364 156 1546 C62 1720 250 1874 164 2052 C92 2202 202 2296 160 2400' fill='none' stroke='%23ffb347' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' opacity='0.42'/%3E%3Cpath d='M160 0 C72 176 258 338 160 516 C64 692 266 852 152 1034 C56 1210 266 1364 156 1546 C62 1720 250 1874 164 2052 C92 2202 202 2296 160 2400' fill='none' stroke='%2300e5ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.88'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  animation: routeDrift 8s ease-in-out infinite;
}

.route-thread-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(8px);
  opacity: 0.22;
}

.route-section {
  --route-accent: var(--orange);
  --route-glow: rgba(255, 107, 104, 0.24);
}

.route-origin {
  --route-accent: var(--cyan);
  --route-glow: rgba(0, 229, 255, 0.26);
}

.route-stop-plan {
  --route-accent: var(--gold);
  --route-glow: rgba(255, 179, 71, 0.24);
}

.route-stop-packages {
  --route-accent: var(--orange);
  --route-glow: rgba(255, 107, 104, 0.24);
}

.route-detour {
  --route-accent: var(--pink);
  --route-glow: rgba(255, 45, 149, 0.24);
}

.route-stop-proof {
  --route-accent: var(--cyan);
  --route-glow: rgba(0, 229, 255, 0.24);
}

.route-stop-experience {
  --route-accent: var(--gold);
  --route-glow: rgba(255, 179, 71, 0.24);
}

.route-stop-final {
  --route-accent: var(--pink);
  --route-glow: rgba(255, 45, 149, 0.24);
}

/* Mini bus marker replacing the old glowing dot */
.route-section::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 32px;
  height: 18px;
  transform: translateX(-50%);
  background-color: var(--route-accent);
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 36' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='8' width='52' height='17' rx='5' fill='white'/%3E%3Cpath d='M50 8 L58 8 L58 25 L48 25 Z' fill='white' opacity='0.7'/%3E%3Crect x='12' y='24' width='8' height='10' rx='3' fill='black'/%3E%3Crect x='42' y='24' width='8' height='10' rx='3' fill='black'/%3E%3Crect x='16' y='11' width='11' height='8' rx='1.5' fill='black'/%3E%3Crect x='32' y='11' width='13' height='8' rx='1.5' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 36' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='8' width='52' height='17' rx='5' fill='white'/%3E%3Cpath d='M50 8 L58 8 L58 25 L48 25 Z' fill='white' opacity='0.7'/%3E%3Crect x='12' y='24' width='8' height='10' rx='3' fill='black'/%3E%3Crect x='42' y='24' width='8' height='10' rx='3' fill='black'/%3E%3Crect x='16' y='11' width='11' height='8' rx='1.5' fill='black'/%3E%3Crect x='32' y='11' width='13' height='8' rx='1.5' fill='black'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  box-shadow:
    0 0 20px var(--route-glow),
    0 0 40px var(--route-glow);
  animation: routePulseCentered 3.8s ease-in-out infinite;
  pointer-events: none;
}

.route-origin::before {
  top: 20px;
}

.route-stop-head {
  position: relative;
  display: grid;
  gap: 6px;
  width: fit-content;
  max-width: 34ch;
  margin: 0 0 14px;
  padding-left: 22px;
}

.route-stop-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--route-accent);
  box-shadow:
    0 0 0 6px rgba(255, 247, 241, 0.04),
    0 0 18px var(--route-glow);
  animation: routePulse 3.8s ease-in-out infinite;
}

.route-stop-id {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  width: fit-content;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 247, 241, 0.14);
  background: rgba(255, 247, 241, 0.08);
  color: var(--route-accent);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.route-stop-copy {
  margin: 0;
  color: rgba(255, 244, 236, 0.74);
  font-size: 0.83rem;
  font-weight: 700;
  line-height: 1.5;
}

.route-stop-head-hero .route-stop-copy {
  max-width: 26ch;
}

.route-next {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 228, 218, 0.12);
  background: rgba(255, 247, 241, 0.05);
  box-shadow: var(--shadow-soft);
}

.route-next-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--gold));
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.32);
  animation: routePulse 3.2s ease-in-out infinite;
}

.route-next strong {
  display: block;
  color: #fff7ef;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.route-next span {
  display: block;
  margin-top: 5px;
  color: rgba(255, 244, 236, 0.78);
  font-size: 0.88rem;
  line-height: 1.5;
}

.eyeline {
  margin: 0 0 10px;
  color: var(--orange);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.section-heading {
  max-width: 680px;
}

.section-heading h2,
.hero h1,
.signal-bar h2,
.faq-panel h2,
.contact-panel h2 {
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.01em;
  line-height: 0.92;
}

.hero {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 34px;
  align-items: center;
  padding: 34px 0 74px;
}

.hero h1 {
  font-size: clamp(2.9rem, 6.4vw, 5.15rem);
  color: var(--text-dark);
  max-width: 11.2ch;
  text-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}

.headline-accent {
  display: block;
  background: linear-gradient(
    90deg,
    var(--cyan) 0,
    #74f6ff 26%,
    var(--gold) 64%,
    var(--pink) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

.hero-text,
.section-heading p,
.policy-copy p,
.faq-panel p,
.contact-panel p,
.package-card p,
.steps-grid p {
  color: var(--text-soft);
  font-size: 0.98rem;
  line-height: 1.65;
}

.hero-route {
  margin: 10px 0 0;
  color: rgba(255, 247, 240, 0.7);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-copy {
  padding-right: 10px;
  min-width: 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.hero-pills li {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 228, 218, 0.16);
  background: rgba(255, 247, 241, 0.08);
  color: rgba(255, 248, 236, 0.88);
  font-size: 0.85rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  backdrop-filter: blur(10px);
}

.hero-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.hero-summary div,
.inclusion-panel div {
  padding: 15px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 224, 214, 0.18);
  background: linear-gradient(
    180deg,
    rgba(84, 39, 46, 0.6),
    rgba(66, 32, 43, 0.62)
  );
  box-shadow: 0 16px 28px rgba(54, 18, 31, 0.12);
}

.hero-summary strong,
.inclusion-panel strong,
.policy-grid strong,
.contact-list strong {
  display: block;
  color: var(--bg-deep);
  font-size: 0.96rem;
  font-weight: 800;
}

.hero-summary span,
.inclusion-panel span {
  display: block;
  margin-top: 5px;
  color: var(--text-soft);
  font-size: 0.88rem;
  line-height: 1.45;
}

.hero-visual {
  position: relative;
  min-height: 500px;
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: 22px -8px 48px 18%;
  border-radius: 36px;
  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(255, 107, 104, 0.24),
      transparent 42%
    ),
    radial-gradient(
      circle at 75% 35%,
      rgba(255, 45, 149, 0.24),
      transparent 36%
    ),
    radial-gradient(circle at 50% 75%, rgba(0, 229, 255, 0.12), transparent 38%);
  filter: blur(14px);
  pointer-events: none;
}

.hero-card {
  position: absolute;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  z-index: 2;
}

.hero-card-main {
  inset: 0 18px 64px 0;
  transform: rotate(-3deg);
}

.hero-card-main::after,
.experience-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(22, 8, 10, 0.04), rgba(22, 8, 10, 0.18)),
    linear-gradient(135deg, rgba(255, 153, 79, 0.12), rgba(255, 45, 149, 0.1));
  pointer-events: none;
}

.hero-card-main::before,
.experience-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.025)),
    radial-gradient(rgba(255, 255, 255, 0.06) 0.7px, transparent 0.7px);
  background-size:
    auto,
    5px 5px;
  mix-blend-mode: soft-light;
  opacity: 0.42;
  pointer-events: none;
}

.hero-card-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.08) saturate(1.12) brightness(0.98) sepia(0.04);
}

.hero-card-note {
  right: 0;
  bottom: 12px;
  width: min(300px, 76%);
  padding: 20px;
  border: 1px solid rgba(255, 190, 140, 0.24);
  background: linear-gradient(
    180deg,
    rgba(87, 39, 46, 0.78),
    rgba(63, 30, 40, 0.82)
  );
  color: var(--text-dark);
  animation: drift 4s ease-in-out infinite;
  backdrop-filter: blur(14px);
}

.hero-card-note p {
  margin: 0 0 8px;
  color: #ffd087;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero-card-note strong {
  display: block;
  margin-bottom: 14px;
  font-size: 1.1rem;
  line-height: 1.32;
}

.hero-card-note ul {
  margin: 0;
  padding-left: 18px;
  color: rgba(255, 247, 240, 0.76);
  line-height: 1.65;
}

.signal-bar {
  display: grid;
  gap: 18px;
  margin-top: -18px;
  padding: 24px 26px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 190, 140, 0.22);
  background:
    radial-gradient(
      circle at top right,
      rgba(255, 190, 125, 0.12),
      transparent 28%
    ),
    linear-gradient(135deg, rgba(74, 33, 40, 0.78), rgba(90, 37, 47, 0.68));
  box-shadow: var(--shadow-soft);
}

.signal-bar-top {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
}

.signal-bar-heading {
  max-width: 740px;
}

.signal-bar-heading h2 {
  max-width: 13ch;
  font-size: clamp(1.95rem, 3.8vw, 3rem);
  color: var(--text-dark);
}

.signal-bar-cta {
  flex-shrink: 0;
}

.signal-bar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.signal-bar-grid > *,
.hero-summary > *,
.package-grid > *,
.proof-layout > *,
.proof-grid > *,
.occasion-grid > *,
.steps-grid > *,
.inclusion-panel > *,
.policy-grid > *,
.faq-contact > *,
.experience > *,
.reservation > * {
  min-width: 0;
}

.signal-bar article {
  display: grid;
  align-content: start;
  min-height: 164px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(
      180deg,
      rgba(255, 250, 246, 0.08),
      rgba(255, 250, 246, 0.04)
    ),
    rgba(79, 39, 46, 0.26);
  border: 1px solid rgba(255, 226, 216, 0.1);
  backdrop-filter: blur(8px);
}

.signal-label {
  color: rgba(255, 244, 236, 0.68);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.signal-bar h3 {
  margin: 10px 0 0;
  color: #fff6e9;
  font-family: "Manrope", sans-serif;
  font-size: 1.34rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.18;
}

.signal-points {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.signal-points span {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 226, 216, 0.14);
  background: rgba(255, 246, 240, 0.08);
  color: rgba(255, 248, 236, 0.86);
  font-size: 0.83rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.trust-strip,
.ads-signal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.trust-strip {
  margin-top: -18px;
  padding: 24px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 166, 119, 0.18);
  background: linear-gradient(
    135deg,
    rgba(47, 23, 31, 0.72),
    rgba(61, 25, 37, 0.68)
  );
  box-shadow: var(--shadow-soft);
}

.trust-strip article,
.ads-signal-grid article {
  padding: 24px;
  border-radius: var(--radius-lg);
  background: rgba(255, 246, 240, 0.06);
  border: 1px solid rgba(255, 222, 212, 0.1);
}

.trust-strip strong,
.ads-signal-grid strong {
  display: block;
  color: var(--bg-deep);
  font-size: 1rem;
  font-weight: 800;
}

.trust-strip p,
.ads-signal-grid p {
  margin: 10px 0 0;
  color: var(--text-soft);
  line-height: 1.65;
}

.signal-bar p {
  margin: 12px 0 0;
  color: var(--text-soft);
  line-height: 1.65;
}

.packages,
.occasion-strip,
.proof,
.experience,
.reservation,
.ads-signal,
.policy-strip,
.faq-contact {
  padding: 80px 0 0;
}

.packages .section-heading p,
.reservation-heading p,
.policy-copy p,
.faq-panel p,
.contact-panel p {
  color: var(--text-soft);
}

.packages .section-heading h2,
.reservation h2,
.policy-copy h2,
.faq-panel h2,
.contact-panel h2 {
  font-size: clamp(2.2rem, 5vw, 3.45rem);
  color: var(--text-dark);
}

.package-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.package-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 16px;
  min-height: 304px;
  padding: 24px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  isolation: isolate;
}

.package-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.18),
    transparent 18%,
    currentColor 82%,
    rgba(255, 255, 255, 0.22)
  );
  pointer-events: none;
  opacity: 0.9;
}

.package-card::after {
  content: "";
  position: absolute;
  inset: auto -6% -10% auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.08),
    transparent 68%
  );
  opacity: 0.55;
  pointer-events: none;
}

.package-card:hover,
.package-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(57, 18, 31, 0.24);
}

.hero-ads h1 {
  max-width: 10ch;
}

.package-card p {
  margin: 0;
  color: rgba(255, 247, 240, 0.74);
}

.package-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 247, 240, 0.1);
  background: rgba(255, 247, 241, 0.08);
  color: rgba(255, 248, 236, 0.84);
}

.package-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 242, 236, 0.1);
}

.package-title {
  display: grid;
  gap: 8px;
  max-width: 19rem;
}

.package-header h3 {
  margin: 0;
  color: #fff8ef;
  font-family: "Manrope", sans-serif;
  font-size: 1.62rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.package-price-block {
  display: grid;
  justify-items: end;
  gap: 6px;
  flex-shrink: 0;
  text-align: right;
}

.package-price-label {
  color: rgba(255, 244, 236, 0.56);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.package-price {
  color: var(--text-dark);
  font-size: 1.32rem;
  line-height: 1;
}

.package-price span {
  color: rgba(255, 248, 236, 0.78);
  font-size: 0.9rem;
  font-weight: 700;
}

.package-tag {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  color: #1b1b1b;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.14);
}

.package-card-wine {
  color: rgba(255, 107, 104, 0.94);
  border: 1px solid rgba(255, 161, 152, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 124, 111, 0.18), transparent 22%),
    linear-gradient(180deg, rgba(95, 38, 44, 0.92), rgba(61, 28, 37, 0.96));
}

.package-card-bubbly {
  color: rgba(255, 179, 71, 0.94);
  border: 1px solid rgba(255, 205, 131, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 190, 84, 0.16), transparent 22%),
    linear-gradient(180deg, rgba(97, 66, 39, 0.92), rgba(61, 43, 34, 0.96));
}

.package-card-boozy {
  color: rgba(216, 93, 148, 0.96);
  border: 1px solid rgba(233, 165, 198, 0.12);
  background:
    linear-gradient(180deg, rgba(216, 93, 148, 0.16), transparent 22%),
    linear-gradient(180deg, rgba(84, 35, 58, 0.92), rgba(54, 24, 39, 0.96));
}

.package-card-sober {
  color: rgba(88, 227, 222, 0.96);
  border: 1px solid rgba(155, 241, 232, 0.12);
  background:
    linear-gradient(180deg, rgba(88, 227, 222, 0.12), transparent 22%),
    linear-gradient(180deg, rgba(36, 61, 72, 0.94), rgba(31, 44, 55, 0.98));
}

.package-card-wine .package-tag {
  background: var(--orange);
}

.package-card-bubbly .package-tag {
  background: var(--gold);
}

.package-card-boozy .package-tag {
  background: var(--pink);
}

.package-card-sober .package-tag {
  background: var(--cyan);
}

.package-points {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(255, 248, 236, 0.84);
  font-size: 0.89rem;
  line-height: 1.55;
}

.package-points li {
  position: relative;
  padding-left: 20px;
}

.package-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 248, 236, 0.8);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--cyan);
  font-size: 0.95rem;
  font-weight: 800;
}

.package-card .text-link {
  min-height: 44px;
  width: 100%;
  justify-content: space-between;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 247, 241, 0.24);
  background: rgba(28, 18, 24, 0.84);
  color: #fff8ef;
  box-shadow: inset 0 1px 0 rgba(255, 247, 241, 0.05);
}

.package-card-wine .text-link {
  color: #fff2ea;
  background: rgba(255, 107, 104, 0.36);
  border-color: rgba(255, 141, 104, 0.56);
}

.package-card-bubbly .text-link {
  color: #fff9eb;
  background: rgba(255, 197, 109, 0.34);
  border-color: rgba(255, 214, 153, 0.56);
}

.package-card-boozy .text-link {
  color: #ffe9f5;
  background: rgba(216, 93, 148, 0.36);
  border-color: rgba(255, 162, 200, 0.56);
}

.package-card-sober .text-link {
  color: #e6fffe;
  background: rgba(0, 229, 255, 0.26);
  border-color: rgba(145, 246, 255, 0.56);
}

.package-card .text-link:hover,
.package-card .text-link:focus-visible {
  border-color: rgba(255, 247, 241, 0.48);
}

.reservation-form select option:checked,
.reservation-form select option:focus {
  color: #fff8ef;
  background-color: rgba(61, 31, 43, 0.98);
}

.package-card-wine .package-badge {
  background: rgba(255, 107, 104, 0.18);
  color: #fff0ea;
}

.package-card-bubbly .package-badge {
  background: rgba(255, 179, 71, 0.18);
  color: #fff4dc;
}

.package-card-boozy .package-badge {
  background: rgba(255, 45, 149, 0.16);
  color: #ffe5f3;
}

.package-card-sober .package-badge {
  background: rgba(0, 229, 255, 0.14);
  color: #d8fbff;
}

.package-copy {
  color: rgba(255, 248, 236, 0.9);
  line-height: 1.7;
}

.package-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 242, 236, 0.08);
}

.package-note {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 226, 216, 0.08);
  background: linear-gradient(
    180deg,
    rgba(255, 247, 241, 0.08),
    rgba(255, 247, 241, 0.05)
  );
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.package-note::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--orange), var(--cyan));
}

.package-note p {
  margin: 0;
  max-width: 52ch;
  color: rgba(255, 248, 236, 0.82);
  line-height: 1.65;
}

.text-link::after {
  content: "→";
  font-size: 1.1rem;
}

.occasion-strip {
  display: grid;
  gap: 24px;
}

.occasion-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.occasion-grid article {
  position: relative;
  padding: 20px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 228, 218, 0.08);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.occasion-grid article:nth-child(1) {
  background: linear-gradient(
    180deg,
    rgba(255, 107, 104, 0.14),
    rgba(80, 32, 40, 0.82)
  );
}

.occasion-grid article:nth-child(2) {
  background: linear-gradient(
    180deg,
    rgba(255, 179, 71, 0.14),
    rgba(85, 43, 36, 0.82)
  );
}

.occasion-grid article:nth-child(3) {
  background: linear-gradient(
    180deg,
    rgba(255, 45, 149, 0.14),
    rgba(76, 27, 47, 0.84)
  );
}

.occasion-grid article:nth-child(4) {
  background: linear-gradient(
    180deg,
    rgba(0, 229, 255, 0.12),
    rgba(34, 49, 63, 0.84)
  );
}

.occasion-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 247, 241, 0.12);
  color: #fff7f0;
  font-size: 0.98rem;
  font-weight: 900;
}

.occasion-grid h3 {
  margin: 14px 0 8px;
  color: #fff8ef;
  font-family: "Manrope", sans-serif;
  font-size: 1.24rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.occasion-grid p {
  margin: 0;
  color: rgba(255, 248, 236, 0.82);
  line-height: 1.7;
}

.proof {
  display: grid;
  gap: 24px;
}

.proof-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

.proof-score,
.proof-grid article {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}

.proof-score {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: 16px;
  padding: 24px;
  border: 1px solid rgba(255, 219, 202, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 196, 160, 0.1), transparent 24%),
    linear-gradient(180deg, rgba(81, 36, 43, 0.94), rgba(61, 31, 39, 0.98));
}

.proof-score-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  grid-column: 1 / -1;
}

.proof-pill {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 229, 214, 0.12);
  background: rgba(255, 247, 241, 0.08);
  color: rgba(255, 247, 240, 0.82);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

.proof-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  grid-column: 1;
}

.proof-kicker,
.proof-source {
  color: rgba(255, 240, 226, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.proof-rating strong {
  color: #fff8ef;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(4rem, 8vw, 5.6rem);
  line-height: 0.88;
}

.proof-rating span {
  color: rgba(255, 247, 241, 0.72);
  font-size: 1rem;
  font-weight: 700;
}

.proof-score p {
  margin: 0;
  color: rgba(255, 248, 236, 0.82);
  line-height: 1.7;
}

.proof-score-lead {
  grid-column: 1;
  color: #fff4ea;
  font-size: 1.08rem;
  font-weight: 700;
}

.proof-score-detail {
  grid-column: 2;
  grid-row: 2 / span 3;
  align-self: stretch;
  padding-left: 22px;
  border-left: 1px solid rgba(255, 231, 219, 0.12);
  color: rgba(255, 244, 236, 0.78);
}

.proof-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  grid-column: 1;
}

.proof-meta span {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 228, 218, 0.12);
  background: rgba(255, 247, 241, 0.08);
  color: rgba(255, 248, 236, 0.86);
  font-size: 0.84rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.proof-score .text-link {
  grid-column: 2;
  align-self: end;
  justify-self: start;
}

.proof-grid article {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 14px;
  padding: 20px;
  position: relative;
  border: 1px solid rgba(255, 228, 218, 0.1);
  background:
    linear-gradient(
      180deg,
      rgba(255, 250, 246, 0.07),
      rgba(255, 250, 246, 0.03)
    ),
    linear-gradient(180deg, rgba(72, 33, 41, 0.94), rgba(56, 29, 39, 0.98));
  overflow: hidden;
}

.proof-review-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(
    --proof-accent,
    linear-gradient(90deg, var(--orange), var(--gold))
  );
}

.proof-grid article:nth-child(1) {
  --proof-accent: linear-gradient(90deg, #ff7c72, #ffb347);
}

.proof-grid article:nth-child(2) {
  --proof-accent: linear-gradient(90deg, #ffb347, #ff5f8e);
}

.proof-grid article:nth-child(3) {
  --proof-accent: linear-gradient(90deg, #4eeaff, #7fe8cc);
}

.proof-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.proof-source {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 228, 218, 0.12);
  background: rgba(255, 247, 241, 0.08);
  display: inline-flex;
  align-items: center;
}

.proof-date {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 247, 241, 0.1);
  background: rgba(255, 247, 241, 0.04);
  color: rgba(255, 248, 236, 0.76);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

.proof-quote-mark {
  color: rgba(255, 247, 241, 0.18);
  font-family: Georgia, serif;
  font-size: 3.8rem;
  line-height: 0.5;
  transform: translateY(6px);
}

.proof-grid h3 {
  margin: 0;
  color: #fff8ef;
  font-family: "Manrope", sans-serif;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.32;
}

.proof-grid p {
  margin: 0;
  color: rgba(255, 248, 236, 0.8);
  font-size: 0.98rem;
  line-height: 1.72;
}

.proof-copy {
  color: rgba(255, 248, 236, 0.84);
}

.proof-person {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 247, 241, 0.1);
}

.proof-person strong {
  color: #fff6ea;
  font-size: 0.94rem;
  font-weight: 800;
}

.proof-person span {
  color: rgba(255, 242, 232, 0.66);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.experience {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 24px;
  align-items: stretch;
}

.experience-visual,
.contact-panel,
.reservation-form,
.faq-panel {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.experience-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 560px;
  filter: contrast(1.1) saturate(1.08) brightness(0.92);
}

.experience-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px 28px 30px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 195, 160, 0.16);
  background: linear-gradient(
    180deg,
    rgba(82, 34, 43, 0.72),
    rgba(96, 36, 48, 0.62)
  );
  box-shadow: var(--shadow-soft);
}

.experience-copy h2 {
  color: #fff6e9;
  max-width: 12ch;
  font-size: clamp(2.35rem, 4.6vw, 3.5rem);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.steps-grid article {
  padding: 18px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(
      180deg,
      rgba(255, 250, 246, 0.08),
      rgba(255, 250, 246, 0.03)
    ),
    rgba(76, 37, 45, 0.26);
  border: 1px solid rgba(255, 222, 212, 0.08);
}

.steps-grid span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--orange));
  color: #1b1b1b;
  font-size: 0.98rem;
  font-weight: 900;
}

.steps-grid h3 {
  margin: 14px 0 8px;
  color: #fff6e9;
  font-family: "Manrope", sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.22;
}

.experience-copy .steps-grid p {
  color: rgba(255, 248, 236, 0.82);
}

.inclusion-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.reservation {
  display: grid;
  grid-template-columns: 0.84fr 1.16fr;
  gap: 20px;
  align-items: start;
}

.reservation-copy {
  display: grid;
  gap: 20px;
}

.reservation-trust-strip {
  margin-top: 0;
  padding: 18px;
  gap: 14px;
}

.reservation-trust-strip article {
  position: relative;
  min-height: 100%;
  padding: 18px 18px 18px 20px;
  overflow: hidden;
}

.reservation-trust-strip article::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    rgba(255, 179, 71, 0.96),
    rgba(0, 229, 255, 0.92)
  );
}

.reservation-trust-strip strong {
  color: #fff7ef;
}

.reservation-trust-strip p {
  margin-top: 8px;
  color: rgba(255, 244, 237, 0.78);
  line-height: 1.6;
}

.reservation-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 24px;
  border: 1px solid rgba(255, 220, 204, 0.16);
  background: linear-gradient(
    180deg,
    rgba(76, 40, 42, 0.78),
    rgba(60, 31, 39, 0.82)
  );
}

.reservation-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--bg-deep);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.reservation-form input,
.reservation-form select,
.reservation-form textarea {
  width: 100%;
  border: 1px solid rgba(255, 230, 220, 0.16);
  border-radius: 16px;
  background: rgba(39, 24, 35, 0.94);
  padding: 14px;
  color: var(--text-dark);
}

.reservation-form select option {
  color: var(--text-dark);
  background-color: rgba(39, 24, 35, 0.98);
}

.reservation-form input::placeholder,
.reservation-form textarea::placeholder {
  color: rgba(255, 245, 237, 0.48);
}

.reservation-form textarea {
  resize: vertical;
}

.reservation-form input,
.reservation-form select {
  min-height: 52px;
}

.reservation-form input:focus,
.reservation-form select:focus,
.reservation-form textarea:focus {
  outline: 2px solid rgba(0, 229, 255, 0.4);
  outline-offset: 1px;
}

.form-span {
  grid-column: 1 / -1;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.booking-assurance {
  display: grid;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 212, 190, 0.16);
  background:
    radial-gradient(
      circle at top right,
      rgba(0, 229, 255, 0.1),
      transparent 28%
    ),
    linear-gradient(180deg, rgba(82, 38, 48, 0.82), rgba(59, 28, 39, 0.88));
  box-shadow: var(--shadow-soft);
}

.booking-assurance-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.booking-assurance-head strong {
  color: #fff7ef;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.booking-assurance-head span {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 230, 220, 0.14);
  background: rgba(255, 247, 241, 0.08);
  color: rgba(255, 247, 239, 0.74);
  display: inline-flex;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.booking-assurance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.booking-assurance-grid article {
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 226, 216, 0.1);
  background: rgba(255, 246, 240, 0.05);
}

.booking-assurance-grid h3 {
  margin: 0;
  color: #fff6ea;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.35;
}

.booking-assurance-grid p {
  margin: 10px 0 0;
  color: rgba(255, 245, 238, 0.78);
  line-height: 1.6;
}

.booking-flow {
  position: relative;
  padding: 20px;
  border-radius: var(--radius-xl);
  background: linear-gradient(
    180deg,
    rgba(94, 37, 48, 0.72),
    rgba(71, 29, 40, 0.78)
  );
  box-shadow: var(--shadow-soft);
  color: #fff6e9;
  border: 1px solid rgba(255, 198, 166, 0.18);
  overflow: hidden;
}

.booking-flow::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold), var(--orange));
}

.booking-flow strong {
  display: block;
  margin-bottom: 14px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.booking-flow ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: booking-step;
  display: grid;
  gap: 14px;
}

.booking-flow li,
.booking-flow p {
  color: rgba(255, 248, 236, 0.82);
  line-height: 1.7;
}

.booking-flow li {
  position: relative;
  min-height: 38px;
  padding-left: 48px;
  counter-increment: booking-step;
}

.booking-flow li::before {
  content: counter(booking-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--orange));
  color: #1b1b1b;
  font-size: 0.82rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.booking-flow p {
  margin: 14px 0 0;
}

.booking-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.booking-tags span {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 226, 216, 0.12);
  background: rgba(255, 247, 241, 0.08);
  color: rgba(255, 248, 236, 0.88);
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.form-note {
  margin: 2px 0 0;
  color: rgba(255, 248, 236, 0.72);
  font-size: 0.92rem;
  line-height: 1.6;
}

.form-feedback {
  margin: 2px 0 0;
  min-height: 1.5em;
  color: #fff0d0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.ads-signal {
  display: grid;
  gap: 30px;
}

.policy-strip {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 20px;
  align-items: start;
}

.policy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.policy-grid article,
.faq-panel details,
.contact-panel {
  border-radius: var(--radius-lg);
  background: rgba(255, 247, 241, 0.08);
  border: 1px solid rgba(255, 226, 216, 0.12);
}

.policy-grid article {
  position: relative;
  padding: 18px;
  overflow: hidden;
}

.policy-grid article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 179, 71, 0.9),
    rgba(255, 107, 104, 0.65)
  );
}

.policy-grid strong {
  display: block;
  color: var(--bg-deep);
  font-size: 1.04rem;
  line-height: 1.35;
}

.policy-grid p {
  margin: 10px 0 0;
  color: var(--text-soft);
  line-height: 1.65;
}

.faq-contact {
  display: grid;
  grid-template-columns: 1fr 0.84fr;
  gap: 20px;
  padding-bottom: 92px;
}

.faq-panel {
  padding: 24px;
  border: 1px solid rgba(255, 198, 166, 0.14);
  background: linear-gradient(
    180deg,
    rgba(75, 37, 43, 0.74),
    rgba(61, 31, 39, 0.8)
  );
}

.faq-panel details {
  margin-top: 16px;
  padding: 18px 20px;
  background: rgba(255, 249, 244, 0.06);
}

.faq-panel summary {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  cursor: pointer;
  color: var(--bg-deep);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.4;
  list-style: none;
}

.faq-panel summary::-webkit-details-marker {
  display: none;
}

.faq-panel summary::after {
  content: "+";
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 1.2rem;
  color: var(--pink);
}

.faq-panel details[open] summary::after {
  content: "−";
}

.faq-panel details p {
  margin: 12px 0 0;
  color: var(--text-soft);
}

.contact-panel {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 26px;
  background: linear-gradient(
    180deg,
    rgba(83, 35, 46, 0.76),
    rgba(67, 31, 41, 0.82)
  );
}

.contact-panel .eyeline,
.contact-panel h2,
.contact-list strong,
.contact-links a {
  color: #fff6e9;
}

.contact-list strong {
  line-height: 1.55;
}

.contact-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-list span {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 248, 236, 0.7);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.contact-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.contact-trust span {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 247, 241, 0.06);
  border: 1px solid rgba(255, 226, 216, 0.1);
  color: rgba(255, 248, 236, 0.8);
  font-size: 0.84rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.site-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 28px 0 34px;
  color: var(--text-soft);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-ribbon {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  margin-top: 92px;
  margin-bottom: 28px;
  position: relative;
  padding: 26px 26px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 196, 162, 0.18);
  background:
    radial-gradient(
      circle at 12% 40%,
      rgba(255, 179, 71, 0.18),
      transparent 26%
    ),
    radial-gradient(
      circle at 88% 12%,
      rgba(0, 229, 255, 0.12),
      transparent 22%
    ),
    linear-gradient(135deg, rgba(73, 31, 40, 0.96), rgba(94, 37, 46, 0.92));
  box-shadow: 0 28px 56px rgba(31, 10, 18, 0.28);
  overflow: hidden;
}

.footer-ribbon::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--gold), var(--orange), var(--cyan));
}

.footer-ribbon .eyeline {
  color: rgba(255, 240, 227, 0.72);
}

.footer-ribbon-copy h2 {
  margin: 0;
  max-width: 13ch;
  color: #fff6eb;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.footer-ribbon-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.footer-ribbon-meta a,
.footer-ribbon-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 247, 241, 0.08);
  color: rgba(255, 245, 236, 0.9);
  font-size: 0.86rem;
  font-weight: 800;
}

.footer-ribbon-cta {
  background: linear-gradient(
    135deg,
    rgba(255, 179, 71, 0.96),
    rgba(255, 77, 133, 0.94)
  );
  color: #201117;
  box-shadow: 0 16px 28px rgba(20, 12, 18, 0.18);
}

.footer-brand {
  justify-self: start;
}

.footer-brand .brand-mark {
  width: 18px;
  height: 48px;
}

.footer-brand .brand-mark img {
  width: 100%;
  height: 100%;
}

.footer-brand .brand-line-top {
  font-size: 0.88rem;
}

.footer-brand .brand-line-bottom {
  font-size: 1.5rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: flex-end;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--bg-deep);
}

.site-footer p {
  margin: 0;
  max-width: 46ch;
  line-height: 1.7;
}

.floating-whatsapp {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(94, 233, 255, 0.24);
  background: linear-gradient(
    135deg,
    rgba(45, 226, 208, 0.94),
    rgba(94, 233, 255, 0.9)
  );
  color: #0d1e22;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.2);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.floating-whatsapp.is-dormant {
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
}

.js .reveal-item {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 480ms ease,
    transform 480ms ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.js .reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.legal-page {
  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(255, 134, 89, 0.22),
      transparent 26%
    ),
    radial-gradient(
      circle at 86% 12%,
      rgba(255, 45, 149, 0.12),
      transparent 26%
    ),
    linear-gradient(180deg, #2a0d11 0, #542028 24%, #322133 72%, #14161d 100%);
}

.legal-page::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 179, 71, 0.1), transparent 26%),
    radial-gradient(circle at 88% 10%, rgba(0, 229, 255, 0.08), transparent 24%);
  pointer-events: none;
}

.legal-header {
  padding: 34px 0 30px;
}

.legal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.legal-nav .brand {
  min-height: 72px;
}

.legal-nav .brand .brand-mark {
  width: 20px;
  height: 54px;
}

.legal-nav .brand .brand-mark img {
  width: 100%;
  height: 100%;
}

.legal-nav .brand .brand-line-top {
  font-size: 0.92rem;
}

.legal-nav .brand .brand-line-bottom {
  font-size: 1.66rem;
}

.back-link {
  color: var(--bg-deep);
  font-size: 0.95rem;
  font-weight: 800;
}

.legal-hero {
  padding: 36px 0 54px;
}

.legal-hero h1 {
  margin: 0;
  max-width: 10ch;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(3.8rem, 10vw, 6.8rem);
  line-height: 0.92;
  color: var(--bg-deep);
}

.legal-hero p {
  max-width: 54ch;
  color: var(--text-soft);
  line-height: 1.7;
}

.legal-content {
  display: grid;
  gap: 18px;
  padding: 0 0 90px;
}

.legal-card {
  padding: 28px;
  border-radius: var(--radius-xl);
  background: rgba(56, 29, 37, 0.72);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
}

.legal-card h2,
.legal-card h3 {
  margin: 0 0 12px;
  color: var(--bg-deep);
}

.legal-card p,
.legal-card li {
  color: var(--text-soft);
  line-height: 1.75;
}

.legal-card ul {
  margin: 14px 0 0;
  padding-left: 20px;
}

@keyframes drift {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes routePulse {
  0%,
  100% {
    opacity: 0.82;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.16);
  }
}

@keyframes routePulseCentered {
  0%,
  100% {
    opacity: 0.82;
    transform: translateX(-50%) scale(1);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.16);
  }
}

@keyframes routeDrift {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(calc(-50% + 6px)) translateY(8px);
  }
}

/* =============================================
   CINEMATIC IMMERSIVE ENHANCEMENTS
   ============================================= */

/* --- Scroll Progress Bar --- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  z-index: 150;
  pointer-events: none;
}

.scroll-progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--gold), var(--pink));
  width: var(--scroll-progress, 0%);
  box-shadow:
    0 0 10px var(--cyan),
    0 0 28px var(--cyan);
  transition: width 60ms linear;
}

/* --- Light Orbs (Hero floating ambient lights) --- */
.light-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  filter: blur(36px);
  will-change: transform;
}

.light-orb-1 {
  width: 240px;
  height: 240px;
  top: -5%;
  left: -15%;
  background: radial-gradient(
    circle,
    rgba(255, 141, 100, 0.7),
    transparent 65%
  );
  animation: orbFloat 7s ease-in-out infinite;
}

.light-orb-2 {
  width: 190px;
  height: 190px;
  top: 40%;
  right: -15%;
  background: radial-gradient(circle, rgba(88, 227, 222, 0.6), transparent 65%);
  animation: orbFloat 8s ease-in-out infinite;
  animation-delay: -3s;
}

.light-orb-3 {
  width: 160px;
  height: 160px;
  bottom: 10%;
  left: 10%;
  background: radial-gradient(
    circle,
    rgba(255, 197, 109, 0.65),
    transparent 65%
  );
  animation: orbFloat 6.5s ease-in-out infinite;
  animation-delay: -5s;
}

.light-orb-1 {
  width: 200px;
  height: 200px;
  top: 5%;
  left: -12%;
  background: radial-gradient(
    circle,
    rgba(255, 141, 100, 0.55),
    transparent 70%
  );
  animation: orbFloat 7s ease-in-out infinite;
}

.light-orb-2 {
  width: 160px;
  height: 160px;
  top: 45%;
  right: -10%;
  background: radial-gradient(
    circle,
    rgba(88, 227, 222, 0.45),
    transparent 70%
  );
  animation: orbFloat 8s ease-in-out infinite;
  animation-delay: -3s;
}

.light-orb-3 {
  width: 130px;
  height: 130px;
  bottom: 18%;
  left: 15%;
  background: radial-gradient(
    circle,
    rgba(255, 197, 109, 0.5),
    transparent 70%
  );
  animation: orbFloat 6.5s ease-in-out infinite;
  animation-delay: -5s;
}

@keyframes orbFloat {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(14px, -18px) scale(1.12);
  }
  66% {
    transform: translate(-10px, 12px) scale(0.88);
  }
}

/* --- Particle Field --- */
.particle-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  animation: particleRise linear infinite;
  will-change: transform, opacity;
}

@keyframes particleRise {
  0% {
    transform: translateY(105%) translateX(0);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  85% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(-105%) translateX(24px);
    opacity: 0;
  }
}

/* --- Cinematic Overlay (subtle vignette + light wash) --- */
.cine-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background:
    radial-gradient(
      circle at 30% 35%,
      rgba(255, 141, 100, 0.07) 0%,
      transparent 55%
    ),
    radial-gradient(
      circle at 70% 55%,
      rgba(88, 227, 222, 0.05) 0%,
      transparent 55%
    ),
    radial-gradient(
      circle at 50% 50%,
      transparent 60%,
      rgba(6, 7, 11, 0.18) 100%
    );
}

/* --- Cinematic Hero Entrance (on load) --- */
@keyframes heroEntrance {
  from {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.hero-copy > * {
  animation: heroEntrance 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.hero-copy > :nth-child(1) {
  animation-delay: 0.1s;
}
.hero-copy > :nth-child(2) {
  animation-delay: 0.2s;
}
.hero-copy > :nth-child(3) {
  animation-delay: 0.3s;
}
.hero-copy > :nth-child(4) {
  animation-delay: 0.4s;
}
.hero-copy > :nth-child(5) {
  animation-delay: 0.5s;
}
.hero-copy > :nth-child(6) {
  animation-delay: 0.6s;
}
.hero-copy > :nth-child(7) {
  animation-delay: 0.7s;
}
.hero-copy > :nth-child(8) {
  animation-delay: 0.8s;
}

/* Hero visual parallax entrance */
@keyframes heroVisualEntrance {
  from {
    opacity: 0;
    transform: scale(1.05) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.hero-visual {
  animation: heroVisualEntrance 1s 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
}

/* --- Section Reveal (fallback for non-view-timeline browsers) --- */
.cine-reveal {
  animation: sectionReveal linear;
  animation-timeline: view();
  animation-range: entry 5% entry 100%;
}

/* Dual animation for Firefox/Safari fallback */
@supports not (animation-timeline: view()) {
  .cine-reveal {
    animation: none;
    opacity: 0;
  }
}

/* --- JS Fallback: staggered card reveals --- */
.cine-stagger > * {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.65s var(--ease-out, cubic-bezier(0.25, 0.46, 0.45, 0.94)),
    transform 0.65s var(--ease-out, cubic-bezier(0.25, 0.46, 0.45, 0.94));
}

.cine-stagger.cine-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Delay each child by 80ms */
.cine-stagger.cine-visible > :nth-child(1) {
  transition-delay: 0ms;
}
.cine-stagger.cine-visible > :nth-child(2) {
  transition-delay: 80ms;
}
.cine-stagger.cine-visible > :nth-child(3) {
  transition-delay: 160ms;
}
.cine-stagger.cine-visible > :nth-child(4) {
  transition-delay: 240ms;
}
.cine-stagger.cine-visible > :nth-child(5) {
  transition-delay: 320ms;
}
.cine-stagger.cine-visible > :nth-child(6) {
  transition-delay: 400ms;
}

/* --- Cinematic Text Reveal (clip-path) --- */
.cine-text .cine-word {
  display: inline-block;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  animation: cineWordReveal 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-play-state: paused;
}

.cine-text.cine-visible .cine-word {
  animation-play-state: running;
}

@keyframes cineWordReveal {
  0% {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    transform: translateY(110%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translateY(0);
  }
}

/* --- Card 3D Tilt on Hover --- */
.cine-tilt {
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-style: preserve-3d;
  perspective: 800px;
}

.cine-tilt:hover {
  transform: rotateX(2deg) rotateY(-2deg) translateY(-4px);
}

.package-card.cine-tilt:hover {
  box-shadow: 0 28px 56px rgba(57, 18, 31, 0.32);
}

/* --- Enhanced Route Marker Glow --- */
.route-section::before {
  box-shadow:
    0 0 0 8px rgba(255, 247, 241, 0.03),
    0 0 32px var(--route-glow),
    0 0 64px var(--route-glow);
}

/* --- Enhanced Route Thread Glow --- */
.route-thread-line {
  filter: drop-shadow(0 0 8px var(--cyan))
    drop-shadow(0 0 20px rgba(0, 229, 255, 0.35));
}

/* --- Cinematic CTA Glow Pulse --- */
.button-accent {
  position: relative;
}

.button-accent::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  background: inherit;
  filter: blur(14px);
  opacity: 0.35;
  z-index: -1;
  animation: ctaGlow 3s ease-in-out infinite;
}

@keyframes ctaGlow {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(1.06);
  }
}

/* --- Floating WhatsApp Pulse --- */
.floating-whatsapp {
  animation: whatsappPulse 2.5s ease-in-out infinite;
}

@keyframes whatsappPulse {
  0%,
  100% {
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow:
      0 16px 40px rgba(88, 227, 222, 0.45),
      0 0 70px rgba(88, 227, 222, 0.22);
  }
}

/* --- Lenis Smooth Scroll --- */
html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* --- Film Grain Noise Overlay --- */
.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  opacity: 0.35;
  filter: url(#noise);
}

/* --- Hero Parallax Depth --- */
.hero-visual {
  transform-style: preserve-3d;
}

.hero-card-main {
  will-change: transform;
}

@media (max-width: 1080px) {
  .route-thread {
    inset: 126px 0 180px;
  }

  .route-thread-line {
    left: 72px;
    width: 132px;
    transform: none;
    animation: none;
  }

  .route-section::before {
    left: 72px;
    transform: none;
    width: 26px;
    height: 15px;
    animation: none;
  }

  .hero,
  .proof-layout,
  .experience,
  .reservation,
  .policy-strip,
  .faq-contact {
    grid-template-columns: 1fr;
  }

  .occasion-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .proof-score {
    grid-template-columns: 1fr;
  }

  .proof-score-detail,
  .proof-score .text-link {
    grid-column: auto;
    grid-row: auto;
    padding-left: 0;
    border-left: 0;
  }

  .footer-ribbon {
    grid-template-columns: 1fr;
  }

  .hero-visual,
  .experience-visual img {
    min-height: 520px;
  }

  .policy-copy,
  .reservation-heading {
    max-width: 720px;
  }

  .site-footer {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-links {
    justify-content: center;
  }
}

@media (max-width: 860px) {
  body.nav-open {
    overflow: hidden;
  }

  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    justify-content: stretch;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    justify-self: end;
    top: auto;
    right: auto;
    flex: 0 0 auto;
  }

  .site-nav,
  .header-cta {
    display: none;
  }

  .site-header.nav-open {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .site-header.nav-open .menu-toggle {
    justify-self: end;
  }

  .site-header.nav-open .site-nav,
  .site-header.nav-open .header-cta {
    display: flex;
  }

  .site-header.nav-open .site-nav {
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    padding: 18px 20px;
    border-radius: var(--radius-lg);
    background: rgba(53, 25, 35, 0.88);
    border: 1px solid rgba(255, 222, 212, 0.12);
  }

  .site-header.nav-open .header-cta {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .hero-summary,
  .package-grid,
  .proof-grid,
  .signal-bar-grid,
  .steps-grid,
  .booking-assurance-grid,
  .policy-grid,
  .trust-strip,
  .ads-signal-grid,
  .occasion-grid {
    grid-template-columns: 1fr;
  }

  .inclusion-panel,
  .reservation-form {
    grid-template-columns: 1fr;
  }

  .booking-assurance-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  :root {
    --container: calc(100vw - 24px);
  }

  .site-header,
  .section-frame,
  .site-footer {
    width: auto;
    max-width: none;
    margin-inline: 12px;
  }

  .site-header {
    padding: 14px 16px;
  }

  .site-header .brand {
    padding: 10px 12px;
    gap: 10px;
  }

  .brand-lockup {
    min-height: 60px;
  }

  .brand-mark {
    width: 17px;
    height: 46px;
  }

  .brand-mark img {
    width: 100%;
    height: 100%;
  }

  .brand-line-top {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
  }

  .brand-line-bottom {
    font-size: 1.34rem;
  }

  .hero {
    padding: 24px 0 78px;
    gap: 26px;
  }

  .route-thread {
    inset: 108px 0 160px;
  }

  .route-thread-line {
    left: 34px;
    width: 78px;
  }

  .route-section::before {
    top: -10px;
    left: 34px;
    width: 22px;
    height: 13px;
    animation: none;
  }

  .route-origin::before {
    top: 16px;
  }

  .route-stop-head {
    gap: 5px;
    margin-bottom: 12px;
    padding-left: 18px;
  }

  .route-stop-head::before {
    top: 7px;
    width: 9px;
    height: 9px;
  }

  .route-stop-id {
    min-height: 26px;
    padding: 0 10px;
    font-size: 0.66rem;
  }

  .route-stop-copy {
    font-size: 0.76rem;
  }

  .route-next {
    gap: 10px;
    margin-top: 16px;
    padding: 12px 14px;
  }

  .eyeline {
    font-size: 0.76rem;
    letter-spacing: 0.12em;
  }

  .hero h1,
  .packages .section-heading h2,
  .reservation h2,
  .policy-copy h2,
  .faq-panel h2,
  .contact-panel h2 {
    font-size: clamp(2.5rem, 14vw, 3.5rem);
  }

  .hero-copy {
    padding-right: 0;
  }

  .hero h1 {
    max-width: 10ch;
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-actions .button {
    width: min(100%, 240px);
  }

  .hero-visual {
    min-height: 440px;
    overflow: clip;
  }

  .package-header {
    display: grid;
    gap: 14px;
  }

  .package-title {
    max-width: none;
  }

  .package-header h3 {
    font-size: 1.46rem;
  }

  .package-price-block {
    justify-items: start;
    text-align: left;
  }

  .proof-card-top {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .hero-card-main {
    inset: 0 0 102px 0;
    transform: rotate(-2deg);
  }

  .hero-card-note {
    width: 84%;
    right: 0;
    bottom: 0;
    padding: 20px;
  }

  .signal-bar,
  .trust-strip,
  .packages,
  .occasion-strip,
  .proof,
  .experience,
  .reservation,
  .ads-signal,
  .policy-strip,
  .faq-contact {
    padding-top: 72px;
  }

  .footer-ribbon {
    margin-top: 72px;
    padding: 20px;
  }

  .signal-bar {
    margin-top: -8px;
    padding: 18px;
  }

  .experience-visual img {
    min-height: 340px;
  }

  .reservation-form,
  .faq-panel,
  .contact-panel,
  .experience-copy {
    padding: 22px;
  }

  .floating-whatsapp {
    right: 12px;
    bottom: 12px;
    min-height: 46px;
    max-width: calc(100vw - 24px);
    padding: 0 14px;
    font-size: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  /* With animations disabled, scroll/word reveals never run. Force every
     reveal target visible so content is never stuck hidden — in any browser,
     even when JS is off (covers the old-Firefox/Safari + reduced-motion case). */
  .cine-reveal,
  .cine-stagger > *,
  .cine-text .cine-word {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* =============================================================
   PREMIUM VISUAL UPGRADE LAYER  (additive, cascade-last)
   Adds 3D depth, glassmorphism, lighting and refined motion.
   Motion is auto-disabled by the prefers-reduced-motion block
   above (it uses !important and beats every rule below).
   ============================================================= */
:root {
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --glass-blur: blur(18px) saturate(1.25);
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --edge-light-strong: inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

/* ---- 1. True 3D tilt (the existing .cine-tilt system, now with
   real perspective so rotation reads as depth, not a flat skew) ---- */
.cine-tilt {
  transform-style: preserve-3d;
  transition:
    transform 0.5s var(--ease-premium),
    box-shadow 0.5s var(--ease-premium),
    border-color 0.4s ease;
}

.cine-tilt:hover,
.cine-tilt:focus-within {
  transform: perspective(1000px) rotateX(3.5deg) rotateY(-3.5deg)
    translate3d(0, -8px, 0);
}

/* ---- 2. Package cards: depth, edge-light, per-flavor glow ---- */
.package-card {
  box-shadow: var(--shadow-soft), var(--edge-light);
}

.package-card:hover,
.package-card:focus-within {
  transform: perspective(1000px) rotateX(3.5deg) rotateY(-3.5deg)
    translate3d(0, -8px, 0);
}

.package-card-wine:hover,
.package-card-wine:focus-within {
  border-color: rgba(255, 141, 100, 0.55);
  box-shadow:
    0 32px 60px rgba(0, 0, 0, 0.42),
    0 0 46px rgba(255, 141, 100, 0.32),
    var(--edge-light-strong);
}

.package-card-bubbly:hover,
.package-card-bubbly:focus-within {
  border-color: rgba(255, 197, 109, 0.55);
  box-shadow:
    0 32px 60px rgba(0, 0, 0, 0.42),
    0 0 46px rgba(255, 197, 109, 0.32),
    var(--edge-light-strong);
}

.package-card-boozy:hover,
.package-card-boozy:focus-within {
  border-color: rgba(216, 93, 148, 0.55);
  box-shadow:
    0 32px 60px rgba(0, 0, 0, 0.42),
    0 0 46px rgba(216, 93, 148, 0.34),
    var(--edge-light-strong);
}

.package-card-sober:hover,
.package-card-sober:focus-within {
  border-color: rgba(88, 227, 222, 0.55);
  box-shadow:
    0 32px 60px rgba(0, 0, 0, 0.42),
    0 0 46px rgba(88, 227, 222, 0.32),
    var(--edge-light-strong);
}

/* ---- 3. Featured package: clear conversion hierarchy ---- */
.package-card-featured {
  /* extra leading row so the gold flag sits above the header cleanly */
  grid-template-rows: auto auto auto 1fr auto;
  border-color: rgba(255, 197, 109, 0.4);
  box-shadow:
    0 30px 64px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 197, 109, 0.35),
    0 0 60px rgba(255, 141, 100, 0.22),
    var(--edge-light-strong);
}

.package-flag {
  justify-self: start;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2a1208;
  background: linear-gradient(135deg, var(--gold), var(--orange));
  box-shadow:
    0 10px 22px rgba(255, 141, 100, 0.4),
    var(--edge-light-strong);
}

/* ---- 4. Glass polish + edge light on the surface panels ----
   Edge-light + shadow is cheap and applied broadly (the real polish).
   Actual backdrop-filter blur is reserved for a few large feature panels
   only (section 4b) to keep GPU cost low — many small blurred layers are
   expensive for little visual gain. */
.signal-bar,
.reservation-form,
.faq-panel,
.contact-panel,
.experience-copy,
.proof-review-card,
.proof-score,
.signal-bar-grid article,
.steps-grid article,
.occasion-grid article,
.policy-grid article,
.hero-summary div,
.inclusion-panel div {
  box-shadow: var(--shadow-soft), var(--edge-light);
}

/* ---- 4b. Real glass blur: large feature panels only ---- */
.signal-bar,
.reservation-form,
.faq-panel,
.contact-panel,
.experience-copy,
.proof-score {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.proof-review-card:hover,
.proof-review-card:focus-within,
.occasion-grid article:hover,
.occasion-grid article:focus-within,
.signal-bar-grid article:hover,
.steps-grid article:hover {
  border-color: rgba(88, 227, 222, 0.4);
  box-shadow:
    0 28px 54px rgba(0, 0, 0, 0.38),
    0 0 38px rgba(88, 227, 222, 0.18),
    var(--edge-light-strong);
}

/* ---- 5. Hero: deeper stage, real glass note, richer image ---- */
.hero-card-main {
  box-shadow:
    0 48px 90px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    var(--edge-light);
}

.hero-card-main img {
  filter: contrast(1.1) saturate(1.18) brightness(0.99);
}

.hero-card-note {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.42),
    var(--edge-light-strong);
}

.hero-visual::before {
  filter: blur(26px);
  opacity: 0.92;
}

/* ---- 6. Primary CTA: stronger lift + lighting on hover ---- */
.button-accent:hover,
.button-accent:focus-visible {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 26px 50px rgba(255, 107, 104, 0.45),
    var(--edge-light-strong);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(88, 227, 222, 0.55);
  background: rgba(88, 227, 222, 0.14);
}

/* ---- 7. Mobile: drop the 3D tilt (no hover) and trim heavy blur
   so small/low-power devices stay crisp and fast ---- */
@media (max-width: 640px) {
  .cine-tilt:hover,
  .cine-tilt:focus-within,
  .package-card:hover,
  .package-card:focus-within {
    transform: translate3d(0, -4px, 0);
  }

  .signal-bar,
  .reservation-form,
  .faq-panel,
  .contact-panel,
  .experience-copy,
  .proof-score {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .package-flag {
    font-size: 0.6rem;
    padding: 5px 10px;
  }
}

/* =============================================================
   IMMERSIVE BUS STAGE — cinematic pseudo-3D hero (own motion path)
   A 3D-tilting "display" of the party bus inside a living night
   scene: drifting bokeh + light streaks (canvas), neon framing,
   glass sheen, floor reflection, fog and pointer parallax. Runs on
   its own RAF loop (script.js), independent of scroll. All motion
   is auto-disabled by the prefers-reduced-motion block above.
   ============================================================= */
.bus-stage {
  position: absolute;
  inset: 0;
  border-radius: 34px;
  overflow: hidden;
  isolation: isolate;
  perspective: 1300px;
  perspective-origin: 50% 40%;
  transform-style: preserve-3d;
  background:
    radial-gradient(
      120% 90% at 50% 6%,
      rgba(88, 227, 222, 0.1),
      transparent 55%
    ),
    radial-gradient(
      130% 100% at 84% 28%,
      rgba(216, 93, 148, 0.18),
      transparent 52%
    ),
    radial-gradient(
      120% 120% at 16% 92%,
      rgba(255, 141, 100, 0.14),
      transparent 55%
    ),
    linear-gradient(165deg, #130b1a 0%, #1b1029 38%, #0c0a16 72%, #07060d 100%);
  box-shadow:
    0 60px 120px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Back layer — slow night-sky glow drift */
.stage-sky {
  position: absolute;
  inset: -12%;
  z-index: 0;
  background:
    radial-gradient(
      40% 32% at 28% 22%,
      rgba(126, 96, 255, 0.24),
      transparent 60%
    ),
    radial-gradient(
      46% 36% at 76% 26%,
      rgba(0, 200, 255, 0.16),
      transparent 60%
    );
  filter: blur(16px);
  transform: translate3d(
    calc(var(--px, 0) * -6px),
    calc(var(--py, 0) * -4px),
    0
  );
  animation: stageSky 19s ease-in-out infinite alternate;
}

@keyframes stageSky {
  0% {
    opacity: 0.78;
    background-position:
      0% 0%,
      0% 0%;
  }
  100% {
    opacity: 1;
    background-position:
      8% 6%,
      -6% 4%;
  }
}

/* Full-bleed cinematic night scene — the bus IS the stage. Container
   carries pointer + scroll parallax; the inner photo runs a slow Ken
   Burns push so the scene is always subtly alive. */
.scene-base {
  position: absolute;
  inset: -6%;
  z-index: 0;
  overflow: hidden;
  transform: translate3d(
      calc(var(--px, 0) * -10px),
      calc(var(--py, 0) * -6px + var(--scroll, 0) * -24px),
      0
    )
    scale(calc(1 + var(--scroll, 0) * 0.04));
  will-change: transform;
}

.scene-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 52%;
  transform-origin: 62% 46%;
  filter: brightness(0.92) contrast(1.08) saturate(1.06);
  animation: busKenBurns 28s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes busKenBurns {
  0% {
    transform: scale(1.04) translate(0, 0);
  }
  100% {
    transform: scale(1.12) translate(-2%, -1.4%);
  }
}

/* Canvas atmosphere — bokeh + light streaks */
.stage-atmos {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* CSS sweeping highlight bands (passing headlights) */
.stage-streaks {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.stage-streaks::before,
.stage-streaks::after {
  content: "";
  position: absolute;
  top: -25%;
  left: -45%;
  width: 55%;
  height: 150%;
  transform: rotate(13deg);
  filter: blur(7px);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08) 44%,
    rgba(88, 227, 222, 0.16) 56%,
    transparent
  );
  animation: streakSweep 8s linear infinite;
}

.stage-streaks::after {
  top: 8%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(216, 93, 148, 0.14) 50%,
    transparent
  );
  animation-duration: 12s;
  animation-delay: -5s;
}

@keyframes streakSweep {
  0% {
    transform: translateX(0) rotate(13deg);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  86% {
    opacity: 1;
  }
  100% {
    transform: translateX(360%) rotate(13deg);
    opacity: 0;
  }
}

/* neon light beams — gentle radiating rays from the neon horizon for
   constant background energy (additive, subtle, never busy) */
.stage-beams {
  position: absolute;
  inset: -25%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  background: repeating-conic-gradient(
    from 0deg at 70% 24%,
    rgba(88, 227, 222, 0) 0deg 4deg,
    rgba(88, 227, 222, 0.13) 4deg 4.7deg,
    rgba(88, 227, 222, 0) 4.7deg 10deg,
    rgba(216, 93, 148, 0.1) 10deg 10.7deg,
    rgba(216, 93, 148, 0) 10.7deg 18deg
  );
  filter: blur(3px);
  transform-origin: 70% 24%;
  animation:
    beamsSway 13s ease-in-out infinite alternate,
    beamsPulse 6.5s ease-in-out infinite;
}

@keyframes beamsSway {
  0% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(3deg);
  }
}

@keyframes beamsPulse {
  0%,
  100% {
    opacity: 0.38;
  }
  50% {
    opacity: 0.6;
  }
}

/* cinematic grade — left darken for text depth + vignette + split tone */
.scene-grade {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(6, 7, 18, 0.62) 0%,
      rgba(6, 7, 18, 0.14) 30%,
      transparent 52%
    ),
    linear-gradient(
      180deg,
      rgba(8, 10, 26, 0.4) 0%,
      transparent 24%,
      transparent 58%,
      rgba(6, 6, 14, 0.6) 100%
    ),
    radial-gradient(132% 130% at 60% 46%, transparent 46%, rgba(0, 0, 0, 0.62));
}

/* moving neon reflection sweep across the whole scene */
.scene-sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(120, 235, 255, 0.1) 47%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(216, 93, 148, 0.1) 53%,
    transparent 62%
  );
  background-size: 280% 100%;
  background-position: 150% 0;
  animation: sceneSheen 9s ease-in-out infinite;
}

@keyframes sceneSheen {
  0%,
  100% {
    background-position: 150% 0;
  }
  50% {
    background-position: -60% 0;
  }
}

/* animated neon route line flowing along the wet road */
.road-route {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3%;
  height: 46%;
  width: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

.road-route path {
  fill: none;
  stroke-linecap: round;
}

.road-route-base {
  stroke: rgba(120, 230, 255, 0.14);
  stroke-width: 2.4;
}

.road-route-flow {
  stroke: rgba(150, 240, 255, 0.95);
  stroke-width: 2.4;
  stroke-dasharray: 26 230;
  filter: drop-shadow(0 0 6px rgba(88, 227, 222, 0.9))
    drop-shadow(0 0 16px rgba(88, 227, 222, 0.5));
  animation: routeFlow 3.6s linear infinite;
}

@keyframes routeFlow {
  0% {
    stroke-dashoffset: 256;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* drifting low fog at the base */
.stage-fog {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -8%;
  height: 44%;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(
    60% 100% at 50% 100%,
    rgba(168, 178, 220, 0.2),
    transparent 70%
  );
  filter: blur(20px);
  animation: stageFog 16s ease-in-out infinite alternate;
}

@keyframes stageFog {
  0% {
    transform: translateX(-5%);
    opacity: 0.7;
  }
  100% {
    transform: translateX(5%);
    opacity: 1;
  }
}

/* foreground bokeh — moves most for depth (pointer parallax) */
.stage-foreground {
  position: absolute;
  inset: -10%;
  z-index: 5;
  pointer-events: none;
  opacity: 0.85;
  filter: blur(2px);
  background:
    radial-gradient(
      circle at 12% 82%,
      rgba(255, 197, 109, 0.55),
      transparent 6px
    ),
    radial-gradient(
      circle at 86% 18%,
      rgba(88, 227, 222, 0.5),
      transparent 8px
    ),
    radial-gradient(
      circle at 72% 90%,
      rgba(216, 93, 148, 0.5),
      transparent 7px
    ),
    radial-gradient(
      circle at 30% 12%,
      rgba(255, 255, 255, 0.45),
      transparent 5px
    );
  transform: translate3d(
    calc(var(--px, 0) * 28px),
    calc(var(--py, 0) * 20px),
    0
  );
}

/* floating glass note — bottom-left so the bus stays the visual hero */
.bus-note {
  left: 18px;
  right: auto;
  bottom: 16px;
  z-index: 6;
  width: min(286px, 72%);
}

@media (max-width: 640px) {
  .hero-visual {
    min-height: 460px;
  }

  .bus-note {
    left: 10px;
    right: auto;
    bottom: 12px;
    width: min(232px, 70%);
    padding: 15px;
    /* lighter glass for small/low-power devices */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .bus-note strong {
    font-size: 0.98rem;
    margin-bottom: 10px;
  }

  .bus-note ul {
    font-size: 0.82rem;
  }
}

/* performance guardrails for small / low-power screens */
@media (max-width: 760px) {
  .stage-beams {
    opacity: 0.5;
  }

  .scene-photo {
    filter: brightness(0.94) contrast(1.06) saturate(1.04);
  }
}

/* honour reduced-motion: kill the looping accents, keep a graded still */
@media (prefers-reduced-motion: reduce) {
  .scene-photo,
  .scene-sheen,
  .stage-beams,
  .road-route-flow {
    animation: none;
  }

  .road-route-flow {
    stroke-dashoffset: 120;
  }
}