/* ═══════════════════════════════════════════════════════════════════
   playground-express.css
   Slowness-inspired editorial styles for Playground Express Mongolia
   Works alongside project-playground-88e3a5.webflow.shared.d3f68f49f.css
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. CUSTOM PROPERTIES ─────────────────────────────────────── */
:root {
  --pe-black: #0a0a0a;
  --pe-white: #ffffff;
  --pe-cream: #f4f4f2;
  --pe-border: #e0deda;
  --pe-muted: #7a7672;
  --pe-accent: #e8601c;
  --pe-header: #3a2420;
  --pe-text: #444;
  --pe-hover-white: #fff;
  --pe-error: #c0392b;
  --pe-accent-dark: #d1560f;
  --pe-hover-dark: #222;
  --pe-font-serif: PPEditorialOld, 'Times New Roman', Times, serif;
  --pe-font-sans: 'Helvetica Neue 5', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --pe-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --pe-ease-hero: cubic-bezier(0.77, 0, 0.175, 1);
  --pe-ease-menu: cubic-bezier(0.16, 1, 0.3, 1);
}

.pe-page--artist-call .navbar_logo-wrapper,
.pe-page--artist-call .navbar_logo-wrapper div {
  color: var(--pe-black);
}

/* ─── 2. PASSWORD GATE — MONGOLIA OVERRIDES ────────────────────── */
/* Base styles live in password-gate.css. Only Mongolia-specific overrides here. */
.pe-page #pp-password-gate {
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.45), rgba(10, 10, 10, 0.45)),
    url("../images/mongolia/carousel-1.jpg");
}

.pe-page #pp-password-gate .pp-form input[type="password"],
.pe-page #pp-password-gate .pp-form input[type="text"] {
  background: rgba(8, 8, 8, 0.42);
  border-color: rgba(255, 255, 255, 0.36);
}

.pe-page #pp-password-gate .pp-form input[type="password"]::placeholder,
.pe-page #pp-password-gate .pp-form input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.78);
}

.pe-page #pp-password-gate .pp-form button[type="submit"] {
  border-color: rgba(255, 255, 255, 0.74);
  color: var(--pe-white);
}

.pe-page #pp-password-gate .pp-form button[type="submit"]:hover {
  background: var(--pe-white);
  border-color: var(--pe-white);
  color: var(--pe-black);
}

.pe-page #pp-password-gate .pp-form button[type="submit"]:focus-visible,
.pe-page #pp-password-gate .pp-toggle-password:focus-visible {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
}

.pe-page #pp-password-gate .pp-toggle-password {
  border-color: rgba(255, 255, 255, 0.74);
  background: rgba(255, 255, 255, 0.08);
  color: var(--pe-white);
}

.pe-page #pp-password-gate .pp-toggle-password:hover {
  background: var(--pe-white);
  border-color: var(--pe-white);
  color: var(--pe-black);
}

/* ─── 3. HERO CAROUSEL ─────────────────────────────────────────── */
.pe-hero {
  position: relative;
  width: 100%;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  background: var(--pe-black);
}

.pe-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.14) 0%, rgba(10, 10, 10, 0.04) 28%, rgba(10, 10, 10, 0.22) 100%);
  pointer-events: none;
  z-index: 2;
}

.pe-hero-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.pe-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 1.2s var(--pe-ease-hero);
}

.pe-hero-slide.active {
  opacity: 1;
  z-index: 2;
}

.pe-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translate3d(0, var(--pe-hero-shift, 0px), 0) scale(var(--pe-hero-scale, 1.03));
  transition: transform 1.4s var(--pe-ease-hero);
}

.pe-hero-caption {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 3;
  color: var(--pe-white);
  max-width: 600px;
}

.pe-hero-caption .pe-hero-label {
  font-family: var(--pe-font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 8px;
  opacity: 0.7;
}

.pe-hero-caption .pe-hero-invitation {
  font-family: var(--pe-font-sans);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.45;
  color: var(--pe-white);
}

.pe-hero-caption .pe-hero-sub {
  margin-top: 12px;
  font-family: var(--pe-font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* Progress bar */
.pe-hero-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
  z-index: 4;
  width: 0;
  animation: pe-progress 2s linear;
}

.pe-hero-progress.running {
  animation: pe-progress 2s linear;
}

@keyframes pe-progress {
  from { width: 0; }
  to { width: 100%; }
}

/* Dot controls */
.pe-hero-controls {
  position: absolute;
  bottom: 48px;
  right: 48px;
  display: flex;
  gap: 12px;
  align-items: center;
  z-index: 5;
}

.pe-hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.3s;
  border: none;
  padding: 0;
}

.pe-hero-dot.active {
  background: var(--pe-white);
}

.pe-mobile-only {
  display: none;
}

.pe-editorial-intro {
  padding: clamp(44px, 6vw, 84px) 24px clamp(40px, 5vw, 72px);
  background: var(--pe-cream);
  border-bottom: 1px solid var(--pe-border);
}

.pe-editorial-intro-inner {
  max-width: none;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-family: var(--pe-font-serif);
  font-size: clamp(1.15rem, 1.75vw, 1.6rem);
  line-height: 1.22;
  font-weight: 400;
  color: var(--pe-accent);
}

.pe-editorial-intro-inner p {
  margin: 0;
  text-wrap: balance;
  white-space: nowrap;
}

.pe-editorial-intro-inner p + p {
  margin-top: 0;
}

.pe-mobile-stamp {
  background: var(--pe-cream);
  border-top: 1px solid var(--pe-border);
}

.pe-mobile-stamp-card {
  max-width: 18rem;
  margin: 0 auto;
}

.pe-mobile-stamp-label,
.pe-mobile-stamp-meta {
  font-family: var(--pe-font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pe-mobile-stamp-label {
  font-size: 0.62rem;
  color: var(--pe-muted);
}

.pe-mobile-stamp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 8px 0;
  text-align: center;
}

.pe-mobile-stamp-card::before,
.pe-mobile-stamp-card::after {
  content: "";
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(224, 222, 218, 0) 0%, rgba(224, 222, 218, 1) 16%, rgba(224, 222, 218, 1) 84%, rgba(224, 222, 218, 0) 100%);
}

.pe-mobile-stamp-image-wrap {
  width: min(100%, 13rem);
}

.pe-mobile-stamp-image-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

.pe-mobile-stamp-meta {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--pe-muted);
}

/* ─── 4. SECTION LABELS ────────────────────────────────────────── */
.pe-section-label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--pe-font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pe-muted);
  margin-bottom: 40px;
}

.pe-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--pe-border);
}

/* ─── 5. INVITATION INTRO / FEATURED BAND ──────────────────────── */
.pe-about {
  padding: clamp(56px, 7vw, 96px) 40px clamp(72px, 8vw, 112px);
  background: var(--pe-cream);
}

.pe-about-inner {
  max-width: 1360px;
  margin: 0 auto;
}

.pe-invitation {
  display: grid;
  grid-template-columns: minmax(280px, 36%) minmax(0, 1fr);
  background: var(--pe-cream);
  border-top: 1px solid var(--pe-border);
}

.pe-invitation-stamp {
  position: relative;
  overflow: visible;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: var(--pe-cream);
}

.pe-invitation-stamp img {
  display: block;
}

.pe-invitation-stamp--sticky {
  --pe-stamp-pad-inline: clamp(24px, 3vw, 40px);
  --pe-stamp-pad-top: clamp(48px, 7vw, 92px);
  position: sticky;
  top: 0;
  height: 100dvh;
  padding: var(--pe-stamp-pad-top) var(--pe-stamp-pad-inline) 40px;
  background: var(--pe-cream);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.pe-invitation-stamp--sticky img {
  border-radius: 4px;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - var(--pe-stamp-pad-top) - 40px);
  object-fit: contain;
  object-position: center;
}

.pe-invitation-content {
  padding: clamp(56px, 7vw, 88px) clamp(24px, 4vw, 56px) clamp(72px, 8vw, 104px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: var(--pe-cream);
}

.pe-about-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.pe-about-feature-media {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.45);
  aspect-ratio: 4 / 3;
}

.pe-about-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pe-about-feature-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.pe-about-feature-copy .pe-section-label {
  width: 100%;
  margin-top: 0;
  margin-bottom: 28px;
}

.pe-invitation-content .pe-feature-image {
  width: 100%;
  margin-bottom: 40px;
  overflow: hidden;
}

.pe-invitation-content .pe-feature-image img {
  width: 100%;
  height: auto;
  display: block;
}

.pe-invitation-text {
  font-family: var(--pe-font-serif);
  font-weight: 400;
  color: var(--pe-accent);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.45;
  max-width: 540px;
  /* Slight overlap into stamp column — per feedback PDF */
  position: relative;
  margin-left: -20px;
  z-index: 2;
}

/* ─── 6. INVITATION SUB-BLOCKS (About, Gallery, Journey) ─────── */
.pe-invitation-about,
.pe-invitation-gallery,
.pe-invitation-journey {
  margin-top: 0;
  padding-top: 0;
}

/* Journey block spans full width inside photo grid */
.pe-invitation-photo-grid .pe-invitation-journey {
  grid-column: 1 / -1;
}

.pe-about-text {
  font-family: var(--pe-font-sans);
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--pe-text);
  max-width: 40rem;
}

.pe-about-text p {
  margin-bottom: 1.5em;
}

.pe-about-text p:last-child {
  margin-bottom: 0;
}

.pe-journey-body {
  font-family: var(--pe-font-sans);
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--pe-text);
  max-width: 540px;
}

.pe-journey-body p {
  margin-bottom: 1.5em;
}

.pe-photo-label {
  display: block;
  font-family: var(--pe-font-sans);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pe-muted);
  margin-bottom: 8px;
}

/* ─── 7. EDITORIAL PHOTO GRID ──────────────────────────────────── */
.pe-invitation-photo-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.pe-photo-grid-item {
  overflow: hidden;
}

.pe-photo-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--pe-ease-smooth);
}

.pe-photo-grid-item:hover img {
  transform: scale(1.04);
}

.pe-feature-image,
.pe-about-feature-media,
.pe-mobile-stamp-card,
.pe-carousel .cards-image-mask,
.pe-editorial-item--large,
.pe-cocreation-photo,
.pe-accessibility-image {
  transform: translate3d(0, var(--pe-parallax-shift, 0px), 0);
  transition: transform 0.8s var(--pe-ease-smooth);
  will-change: transform;
}

/* Grid layout variations */
.pe-photo-grid-item.span-12 { grid-column: span 12; }
.pe-photo-grid-item.span-8 { grid-column: span 8; }
.pe-photo-grid-item.span-7 { grid-column: span 7; }
.pe-photo-grid-item.span-6 { grid-column: span 6; }
.pe-photo-grid-item.span-5 { grid-column: span 5; }
.pe-photo-grid-item.span-4 { grid-column: span 4; }

/* Staggered photo pairs — "versetzt" layout */
.pe-photo-pair {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.pe-photo-pair > .pe-photo-grid-item {
  grid-column: auto;
}

/* First pair: right photo drops down */
.pe-pair-1 > .pe-photo-grid-item:nth-child(2) {
  margin-top: 100px;
}

/* Second pair: left photo drops down (alternate direction) */
.pe-pair-2 > .pe-photo-grid-item:first-child {
  margin-top: 80px;
}

/* Varied spacing between rows */
.pe-pair-1 {
  margin-bottom: 48px;
}

.pe-pair-2 {
  margin-bottom: 64px;
}

.pe-photo--spaced {
  margin-top: 40px;
}

/* Aspect ratios for photo grid items */
.pe-photo-grid-item.landscape { aspect-ratio: 16 / 9; }
.pe-photo-grid-item.portrait { aspect-ratio: 3 / 4; }
.pe-photo-grid-item.square { aspect-ratio: 1 / 1; }
.pe-photo-grid-item.wide { aspect-ratio: 21 / 9; }

/* ─── 8. (Reserved — Journey now in invitation sub-blocks) ────── */

/* ─── 9. CAROUSEL SECTION ──────────────────────────────────────── */
.pe-carousel {
  padding: 80px 0;
  background: var(--pe-cream);
}

.pe-carousel .centered-container-2.sliderr-container,
.pe-carousel .slider-2,
.pe-carousel .w-slider,
.pe-carousel .w-slider-mask,
.pe-carousel .mask,
.pe-carousel .w-slide,
.pe-carousel .pe-carousel-card {
  background: var(--pe-cream);
}

.pe-carousel .slider-wrapper {
  display: block;
  width: 100%;
  padding: 0 40px;
  box-sizing: border-box;
}

.pe-carousel .pe-carousel-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.pe-carousel .cards-image-mask {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--pe-cream);
  margin-bottom: 24px;
  border-radius: 8px;
}

.pe-carousel .cards-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 8px;
}

.pe-carousel .w-slider {
  background: transparent;
  position: relative;
  overflow: hidden;
}

/* Fix slide overlap during transitions */
.pe-carousel .slider-2 {
  overflow: hidden;
}

.pe-carousel .w-slider-mask {
  overflow: hidden;
}

/* Override Webflow icon color and size */
.pe-carousel .icon-3 {
  color: var(--pe-black);
  font-size: 20px;
}

.pe-carousel .w-slider-nav {
  display: none !important;
}

.pe-carousel .w-slider-dot {
  display: none !important;
}

/* Big carousel arrow buttons — hidden by default, visible on hover */
.pe-carousel .w-slider-arrow-left,
.pe-carousel .w-slider-arrow-right {
  width: 56px;
  height: 56px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  color: var(--pe-black);
  opacity: 0;
  transition: opacity 0.3s, background 0.3s;
  cursor: pointer;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
}

.pe-carousel .w-slider-arrow-left {
  left: 20px;
}

.pe-carousel .w-slider-arrow-right {
  right: 20px;
}

.pe-carousel .w-slider:hover .w-slider-arrow-left,
.pe-carousel .w-slider:hover .w-slider-arrow-right {
  opacity: 1;
}

.pe-carousel .w-slider-arrow-left:hover,
.pe-carousel .w-slider-arrow-right:hover {
  background: rgba(255, 255, 255, 1);
}

.pe-carousel .heading-11 {
  font-family: var(--pe-font-serif);
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(1.4rem, 2vw, 1.95rem);
  line-height: 1.18;
  margin: 0 0 10px;
}

.pe-carousel .paragraph-9 {
  margin: 0;
  max-width: 70ch;
  font-family: var(--pe-font-sans);
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--pe-text);
}

/* ─── 10. CABIN GRID ───────────────────────────────────────────── */
.pe-cabins {
  display: grid;
  grid-template-columns: 25% 50% 25%;
  padding: 0 40px;
  background: var(--pe-white);
}

.pe-cabins-sidebar {
  position: sticky;
  top: 80px;
  align-self: start;
  padding: 80px 40px 80px 0;
}

.pe-cabins-sidebar .pe-cabins-heading {
  font-family: var(--pe-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.1;
  margin-bottom: 24px;
  color: var(--pe-black);
}

.pe-cabins-sidebar .pe-cabins-intro {
  font-family: var(--pe-font-sans);
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--pe-text);
  margin-bottom: 40px;
}

.pe-cabins-main {
  padding: 0 20px;
}

.pe-cabin-block {
  min-height: 90vh;
  padding: 80px 0;
  border-top: 1px solid var(--pe-border);
}

.pe-cabin-block:first-child {
  border-top: none;
}

.pe-cabin-name {
  font-family: var(--pe-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.8rem);
  line-height: 1.2;
  margin-bottom: 16px;
  color: var(--pe-black);
}

.pe-cabin-type {
  font-family: var(--pe-font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pe-muted);
  margin-bottom: 24px;
}

.pe-cabin-description {
  font-family: var(--pe-font-sans);
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--pe-text);
  max-width: 420px;
  margin-bottom: 32px;
}

.pe-cabin-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.pe-cabin-photo {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.pe-cabin-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--pe-ease-smooth);
}

.pe-cabin-photo:hover img {
  transform: scale(1.04);
}

.pe-cabins-aside {
  padding: 80px 0 80px 40px;
  margin-top: 0;
}

.pe-cabin-aside-block {
  min-height: 90vh;
  padding: 80px 0;
  border-top: 1px solid var(--pe-border);
  display: flex;
  flex-direction: column;
}
.pe-cabin-aside-block:first-child { border-top: none; }

.pe-cabins-aside .pe-photo-label {
  display: flex;
  align-items: flex-end;
  min-height: calc(clamp(1.6rem, 3vw, 2.8rem) * 1.2);
  margin-bottom: 16px;
}

.pe-cabin-aside-photo {
  overflow: hidden;
  margin-bottom: 24px;
}
.pe-cabin-aside-photo img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s var(--pe-ease-smooth);
}
.pe-cabin-aside-photo:hover img { transform: scale(1.04); }
.pe-cabin-aside-desc {
  font-family: var(--pe-font-sans);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--pe-muted);
}

/* ─── 10b. FOOTER OVERRIDES (cream bg, dark text) ────────────── */
.pe-page .footer {
  background-color: var(--pe-cream);
  color: var(--pe-black);
}

/* Hide duplicate footer tagline on the main invitation page only */
.pe-page--express-main .footer .subtitle.space-top,
.pe-page--express-main .footer .brix---mg-bottom-16px-2 {
  display: none;
}

/* Headings & subtitles */
.pe-page .footer .subtitle.space-top,
.pe-page .footer .subtitle.center,
.pe-page .footer .heading-h3-size {
  color: var(--pe-black);
}

.pe-page .footer .pe-footer-souls {
  font-family: var(--pe-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  line-height: 1.18;
  color: var(--pe-black);
  text-align: center;
  margin: 0 auto 36px;
  max-width: 18ch;
}

.pe-page--express-main .footer > .container-fixed-width {
  padding-top: 28px;
}

.pe-page--express-main .footer .pe-footer-souls {
  margin-bottom: 6px;
}

.pe-page--express-main .footer .grid-1-5.footer .div-block-4 {
  margin-top: 0;
}

.pe-page--express-main .footer .grid-1-5.footer .footer-logotype.footer_central {
  margin-bottom: 12px;
}

.pe-page--express-main .footer-top-small {
  padding-top: 8px;
  gap: 28px;
}

.pe-page--express-main .footer-top-small .footer-logotype.footer_central {
  margin-bottom: 0;
}

/* Dividers: white → subtle dark line */
.pe-page .footer .divider.bg-white {
  background-color: rgba(0, 0, 0, 0.15);
}

/* Desktop form inputs (.single-item-form-text-field) */
.pe-page .footer .single-item-form-text-field {
  color: var(--pe-black);
  border-color: transparent transparent rgba(0, 0, 0, 0.3);
}
.pe-page .footer .single-item-form-text-field::placeholder {
  color: var(--pe-muted);
}
.pe-page .footer .single-item-form-text-field:hover,
.pe-page .footer .single-item-form-text-field:focus {
  color: var(--pe-black);
}

/* Desktop submit button (.button.small) */
.pe-page .footer .button.small {
  border-color: var(--pe-accent);
  color: var(--pe-accent);
}
.pe-page .footer .button.small:hover {
  background-color: var(--pe-accent);
  color: var(--pe-hover-white);
}

/* Mobile/small-screen form inputs (.new-input) */
.pe-page .footer .new-input {
  color: var(--pe-black);
  border-color: transparent transparent rgba(0, 0, 0, 0.3);
  background-color: transparent;
}
.pe-page .footer .new-input::placeholder {
  color: var(--pe-muted);
}

/* Mobile submit button (.btn-primary) */
.pe-page .footer .btn-primary {
  border-color: var(--pe-accent);
  color: var(--pe-accent);
}
.pe-page .footer .btn-primary:hover {
  background-color: var(--pe-accent);
  color: var(--pe-hover-white);
}

/* Radio button & consent label */
.pe-page .footer .radio-button-field {
  color: var(--pe-muted);
}
.pe-page .footer .radio-button-label {
  color: var(--pe-muted);
}
.pe-page .footer .radio-button {
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

/* Copyright / footer bottom */
.pe-page .footer .brix---mg-bottom-0 {
  color: var(--pe-muted);
}
.pe-page .footer .brix---footer-bottom {
  border-top-color: rgba(0, 0, 0, 0.12);
}

/* Social icons (SVGs using currentColor) */
.pe-page .footer .social-icon-link,
.pe-page .footer .icon-4 {
  color: var(--pe-black);
}

/* Brix social media icon images (white SVGs → darken) */
.pe-page .footer .brix---icon-square-36px img {
  filter: brightness(0);
  opacity: 0.7;
  transition: opacity 0.2s;
}
.pe-page .footer .brix---icon-square-36px:hover img {
  opacity: 1;
}

/* Success/error messages */
.pe-page .footer .success-message {
  color: var(--pe-black);
}
.pe-page .footer .new-success-message {
  color: var(--pe-white);
}
.pe-page .footer .error-message,
.pe-page .footer .brix---error-message {
  color: var(--pe-error);
}

/* ─── 11. CTA BUTTONS ──────────────────────────────────────────── */
.pe-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pe-font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--pe-accent);
  color: var(--pe-accent);
  background: transparent;
  padding: 12px 24px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}

.pe-cta::after {
  content: ' \2192';
}

.pe-cta:hover {
  background: var(--pe-accent);
  color: var(--pe-white);
}

.pe-cta--spaced {
  margin-top: 40px;
}

/* White variant for dark backgrounds */
.pe-cta--white {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--pe-white);
}

.pe-cta--white:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--pe-white);
  color: var(--pe-white);
}

/* Generic accent heading — ensures PP Editorial everywhere */
.pe-heading-accent {
  font-family: var(--pe-font-serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.9vw, 1.75rem);
  line-height: 1.2;
  color: var(--pe-accent);
  margin-bottom: 14px;
}

/* ─── 12. DETAILS SECTIONS (WHEN, INCLUDED, FOOD) ─────────────── */
.pe-details {
  padding: 80px 40px;
  background: var(--pe-white);
}

.pe-details-inner {
  max-width: 720px;
  margin: 0 auto;
}

.pe-details .pe-heading-accent {
  /* inherits from generic .pe-heading-accent */
}

.pe-details-text {
  font-family: var(--pe-font-sans);
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--pe-text);
}

.pe-included-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pe-included-list li {
  font-family: var(--pe-font-sans);
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--pe-text);
  padding: 12px 0;
  border-bottom: 1px solid var(--pe-border);
  padding-left: 20px;
  position: relative;
}

.pe-included-list li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--pe-muted);
}

.pe-included-list li:last-child {
  border-bottom: none;
}

/* ─── 13. CO-CREATION ──────────────────────────────────────────── */
.pe-cocreation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding: 100px 40px;
  background: var(--pe-white);
}

.pe-cocreation-left .pe-heading-accent {
  /* inherits from generic .pe-heading-accent */
}

.pe-cocreation-left .pe-cocreation-text {
  font-family: var(--pe-font-sans);
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--pe-text);
  max-width: 520px;
  margin-bottom: 36px;
}

.pe-accessibility-block {
  max-width: 520px;
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid var(--pe-border);
}

.pe-cocreation-photos {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 60px;
}
.pe-cocreation-photo { overflow: hidden; aspect-ratio: 16/9; }
.pe-cocreation-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pe-cocreation-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
}

.pe-cocreation-right .pe-cocreation-quote {
  font-family: var(--pe-font-serif);
  font-weight: 400;
  color: var(--pe-accent);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.45;
  max-width: 360px;
}

.pe-cocreation-quote-black { color: var(--pe-black); }

/* ─── 14. ACCESSIBILITY & CLOSING ──────────────────────────────── */
.pe-accessibility-closing,
.pe-accessibility-block .pe-join-text {
  font-family: var(--pe-font-sans);
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--pe-text);
}

.pe-accessibility-block .pe-accessibility-list {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
}

.pe-accessibility-block .pe-accessibility-list li {
  font-family: var(--pe-font-sans);
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--pe-text);
  padding: 8px 0;
  padding-left: 20px;
  position: relative;
}

.pe-accessibility-block .pe-accessibility-list li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--pe-muted);
}

/* ─── 15. SCROLL REVEAL ────────────────────────────────────────── */
.pe-reveal {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

.pe-reveal.revealed {
  opacity: 1;
  transform: none;
}

/* Images get additional scale */
.pe-reveal img {
  transition: transform 0.45s var(--pe-ease-smooth),
              opacity 0.45s var(--pe-ease-smooth);
}

.pe-reveal:not(.revealed) img {
  transform: scale(1.01);
  opacity: 0.98;
}

.pe-reveal.revealed img {
  transform: scale(1);
  opacity: 1;
}

/* Stagger children */
.pe-reveal.revealed > *:nth-child(1) { transition-delay: 0ms; }
.pe-reveal.revealed > *:nth-child(2) { transition-delay: 60ms; }
.pe-reveal.revealed > *:nth-child(3) { transition-delay: 120ms; }
.pe-reveal.revealed > *:nth-child(4) { transition-delay: 180ms; }
.pe-reveal.revealed > *:nth-child(5) { transition-delay: 240ms; }
.pe-reveal.revealed > *:nth-child(6) { transition-delay: 300ms; }
.pe-reveal.revealed > *:nth-child(7) { transition-delay: 360ms; }
.pe-reveal.revealed > *:nth-child(8) { transition-delay: 420ms; }

/* Children should also transition */
.pe-reveal > * {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 0.38s var(--pe-ease-smooth),
              transform 0.38s var(--pe-ease-smooth);
}

.pe-reveal.revealed > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.pe-reveal > .pe-feature-image,
.pe-reveal > .pe-mobile-stamp-card {
  transform: translate3d(0, var(--pe-parallax-shift, 0px), 0);
}

/* ─── 16. ENHANCED MENU OVERLAY ────────────────────────────────── */
.pe-menu-enhanced {
  transition: transform 0.5s var(--pe-ease-menu),
              opacity 0.5s var(--pe-ease-menu);
  transform: translateY(-100%);
  opacity: 0;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(10, 10, 10, 0.88);
}

.pe-menu-enhanced.open {
  transform: translateY(0);
  opacity: 1;
}

/* Staggered link entry */
.pe-menu-enhanced .pe-menu-link {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.35s var(--pe-ease-smooth),
              transform 0.35s var(--pe-ease-smooth);
}

.pe-menu-enhanced.open .pe-menu-link:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 80ms; }
.pe-menu-enhanced.open .pe-menu-link:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 160ms; }
.pe-menu-enhanced.open .pe-menu-link:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 240ms; }
.pe-menu-enhanced.open .pe-menu-link:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 320ms; }
.pe-menu-enhanced.open .pe-menu-link:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 400ms; }
.pe-menu-enhanced.open .pe-menu-link:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 480ms; }
.pe-menu-enhanced.open .pe-menu-link:nth-child(7) { opacity: 1; transform: translateY(0); transition-delay: 560ms; }
.pe-menu-enhanced.open .pe-menu-link:nth-child(8) { opacity: 1; transform: translateY(0); transition-delay: 640ms; }

/* Close: reverse stagger (last → first, 60ms each) */
.pe-menu-enhanced.closing .pe-menu-link:nth-child(8) { transition-delay: 0ms; }
.pe-menu-enhanced.closing .pe-menu-link:nth-child(7) { transition-delay: 60ms; }
.pe-menu-enhanced.closing .pe-menu-link:nth-child(6) { transition-delay: 120ms; }
.pe-menu-enhanced.closing .pe-menu-link:nth-child(5) { transition-delay: 180ms; }
.pe-menu-enhanced.closing .pe-menu-link:nth-child(4) { transition-delay: 240ms; }
.pe-menu-enhanced.closing .pe-menu-link:nth-child(3) { transition-delay: 300ms; }
.pe-menu-enhanced.closing .pe-menu-link:nth-child(2) { transition-delay: 360ms; }
.pe-menu-enhanced.closing .pe-menu-link:nth-child(1) { transition-delay: 420ms; }

/* Link hover */
.pe-menu-enhanced .pe-menu-link:hover {
  transform: scale(1.05);
}

/* Active page indicator */
.pe-menu-enhanced .pe-menu-link.active {
  position: relative;
}

.pe-menu-enhanced .pe-menu-link.active::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 60%;
  background: var(--pe-accent);
}

/* Hamburger morph */
.pe-hamburger {
  transition: transform 0.4s var(--pe-ease-menu);
}

.pe-hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: currentColor;
  margin: 5px 0;
  transition: transform 0.4s var(--pe-ease-menu),
              opacity 0.3s ease;
}

.pe-hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(4.5px, 4.5px);
}

.pe-hamburger.active span:nth-child(2) {
  opacity: 0;
}

.pe-hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(4.5px, -4.5px);
}

/* ─── 16b. MENU JS INTEGRATION ────────────────────────────────── */
/* These classes are added by playground-express.js to the existing Webflow menu */
body.pe-menu-open .menu_parent {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.pe-menu-open .menu_right-panel {
  transition: transform 0.24s var(--pe-ease-menu);
}

/* Links in the existing Webflow menu — JS adds pe-menu-link--visible */
.menu-link-parent .menu_text-link {
  transition: none;
}

.pe-menu-link--visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Active page indicator — thin accent line */
.pe-menu-active {
  position: relative;
}

.pe-menu-active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 60%;
  background: var(--pe-accent);
}

/* Link hover enhancement */
.menu-link-parent:hover .menu_text-link {
  transform: scale(1.05);
  transition: transform 0.3s var(--pe-ease-smooth);
}

/* ─── 17. FLOATING BUTTONS ─────────────────────────────────────── */
.pe-floating-buttons {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 900;
  display: flex;
  gap: 8px;
  align-items: center;
}

.pe-floating-btn {
  font-family: var(--pe-font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 18px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
  border: none;
}

.pe-floating-btn--dark {
  background: var(--pe-black);
  color: var(--pe-white);
}

.pe-floating-btn--dark:hover {
  background: var(--pe-hover-dark);
}

.pe-floating-btn--accent {
  background: var(--pe-accent);
  color: var(--pe-white);
}

.pe-floating-btn--accent:hover {
  background: var(--pe-accent-dark);
}

/* ─── 17b. NAVBAR SCROLL BEHAVIOR ─────────────────────────────── */
.pe-page .menu-main {
  display: none !important;
}

/* .navigation is position:fixed — style it directly, not its wrapper */
.pe-page .navigation {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 1100;
  position: fixed;
  overflow: visible;
  box-shadow: inset 0 -1px 0 transparent;
}

.pe-page .navigation::after {
  content: none;
}

.div-block-34.pe-nav-scrolled .navigation {
  background-color: var(--pe-cream);
  box-shadow: inset 0 -1px 0 var(--pe-border);
}

body.pe-menu-open .navigation {
  background-color: var(--pe-cream);
  box-shadow: inset 0 -1px 0 var(--pe-border);
}

.pe-page .div-block-34 .menu-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  flex: 0 0 50px;
}

.pe-page .div-block-34 .menu-btn .lottie-anim.white,
.pe-page .div-block-34 .menu-btn .lottie-anim.black {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: 0;
  transform: translate(-50%, -50%);
}

.pe-page .div-block-34 .subtitle.header.white,
.pe-page .div-block-34 .subtitle.header.black,
.pe-page .div-block-34 .menu-btn .lottie-anim.white,
.pe-page .div-block-34 .menu-btn .lottie-anim.black {
  transition: opacity 0.25s ease;
}

.pe-page .div-block-34 .subtitle.header.white,
.pe-page .div-block-34 .menu-btn .lottie-anim.white {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.pe-page .div-block-34 .subtitle.header.white {
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
  position: absolute;
}

.pe-page .div-block-34 .link-block-2,
.pe-page .div-block-34 .menu-btn .lottie-anim.black {
  opacity: 0;
  pointer-events: none;
}

.pe-page .div-block-34.pe-nav-scrolled .subtitle.header.white,
.pe-page .div-block-34.pe-nav-scrolled .menu-btn .lottie-anim.white,
body.pe-menu-open .div-block-34 .subtitle.header.white,
body.pe-menu-open .div-block-34 .menu-btn .lottie-anim.white {
  opacity: 0;
  pointer-events: none;
}

.pe-page .div-block-34.pe-nav-scrolled .link-block-2,
.pe-page .div-block-34.pe-nav-scrolled .menu-btn .lottie-anim.black,
body.pe-menu-open .div-block-34 .link-block-2,
body.pe-menu-open .div-block-34 .menu-btn .lottie-anim.black {
  opacity: 1;
  pointer-events: auto;
}

.pe-page .nav-menu-mobile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: 100dvh;
  height: 100svh;
  min-height: 100dvh;
  padding-top: max(96px, 12svh);
  overflow-y: auto;
  opacity: 0;
  transform: translate3d(0, -24px, 0);
  transition: none;
  pointer-events: none;
}

.pe-page .nav-links-wrapper,
.pe-page .nav-link-plain,
.pe-page .dropdown-toggle-2,
.pe-page .dropdown-list-2 {
  transition: none !important;
  animation: none !important;
  transition-delay: 0ms !important;
  animation-delay: 0ms !important;
}

body.pe-menu-open .nav-menu-mobile,
.pe-page .nav-menu-mobile[data-nav-menu-open],
.pe-page .nav-menu-mobile.w--open {
  display: flex;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

body.pe-menu-open .nav-menu-mobile {
  z-index: 1090;
}

.pe-page .nav-links-wrapper {
  width: 100%;
  height: auto;
  min-height: 0;
  justify-content: flex-start !important;
  align-items: stretch !important;
}

.pe-page .grid-10 {
  height: auto !important;
  align-content: start;
}

.pe-page .div-block-36 {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  padding: 20px 20px 40px;
}

/* ─── 18. GENERAL SECTION SPACING ──────────────────────────────── */
.pe-section {
  padding: 80px 40px;
}

.pe-section--large {
  padding: 120px 40px;
}

.pe-section--cream {
  background: var(--pe-cream);
}

/* Section heading */
.pe-heading {
  font-family: var(--pe-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.1;
  color: var(--pe-black);
}

/* Body text */
.pe-body {
  font-family: var(--pe-font-sans);
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--pe-text);
}

/* ─── 18a. EDITORIAL GALLERY ──────────────────────────────────── */
.pe-editorial-gallery { padding: 40px; background: var(--pe-white); }
.pe-editorial-grid {
  display: grid;
  grid-template-columns: 55% 1fr;
  gap: 24px;
}
.pe-editorial-item { overflow: hidden; }
.pe-editorial-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s var(--pe-ease-smooth);
}
.pe-editorial-item:hover img { transform: scale(1.04); }
.pe-editorial-item--large { aspect-ratio: 4/3; }
.pe-editorial-item:not(.pe-editorial-item--large) { aspect-ratio: 3/4; }

/* ─── 18b. DESKTOP — CABIN ASIDE VISIBLE, CENTER 2ND PHOTO HIDDEN */
@media (min-width: 1025px) {
  .pe-cabin-photos .pe-cabin-photo:nth-child(2) { display: none; }
  .pe-cabin-photos { grid-template-columns: 1fr; }
}

/* ─── 19. RESPONSIVE — TABLET ──────────────────────────────────── */
@media (max-width: 1024px) {
  /* Prevent horizontal overflow */
  .pe-page {
    overflow-x: hidden;
  }

  /* General sections tighten up */
  .pe-section {
    padding: 60px 24px;
  }

  .pe-section--large {
    padding: 80px 24px;
  }

  /* Cabin grid: 2 columns, un-sticky sidebar */
  .pe-cabins {
    grid-template-columns: 1fr 1fr;
    padding: 0 24px;
  }

  .pe-cabins-sidebar {
    position: relative;
    top: auto;
    grid-column: 1 / -1;
    padding: 60px 0 40px;
  }

  .pe-cabins-sidebar .pe-cabins-intro {
    max-width: 100%;
  }

  .pe-cabins-aside {
    display: none;
  }

  .pe-cabins-main {
    grid-column: 1 / -1;
  }

  .pe-about {
    padding: 72px 24px 80px;
  }

  .pe-editorial-intro-inner {
    max-width: 32ch;
  }

  .pe-editorial-intro-inner p {
    white-space: normal;
  }

  /* Invitation: collapse to single column on tablet */
  .pe-invitation {
    grid-template-columns: 1fr;
  }

  .pe-invitation-stamp--sticky {
    position: relative;
    height: auto;
    max-width: 200px;
    justify-self: center;
    margin: 0 auto;
    padding: 0;
    background: transparent;
  }

  .pe-invitation-stamp--sticky img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* Remove text overlap on tablet (single column) */
  .pe-invitation-text {
    margin-left: 0;
  }

  /* Photo grid inside invitation: simplify to 6-col */
  .pe-invitation-photo-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
  }

  .pe-invitation-photo-grid .pe-photo-grid-item.span-12 { grid-column: span 6; }
  .pe-invitation-photo-grid .pe-photo-grid-item.span-6  { grid-column: span 3; }

  /* Staggered pairs: tighter offset on tablet */
  .pe-pair-1 > .pe-photo-grid-item:nth-child(2) {
    margin-top: 60px;
  }
  .pe-pair-2 > .pe-photo-grid-item:first-child {
    margin-top: 48px;
  }
  .pe-pair-1 { margin-bottom: 32px; }
  .pe-pair-2 { margin-bottom: 40px; }

  /* Co-creation */
  .pe-cocreation {
    gap: 40px;
    padding: 80px 24px;
  }

  .pe-accessibility-block {
    margin-top: 48px;
    padding-top: 48px;
  }

  /* Details */
  .pe-details {
    padding: 60px 24px;
  }

  /* Invitation */
  .pe-invitation-content {
    padding: 56px 40px 72px;
  }

  .pe-about-feature {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Carousel: always show arrows on tablet (no hover) */
  .pe-carousel .w-slider-arrow-left,
  .pe-carousel .w-slider-arrow-right {
    width: 48px;
    height: 48px;
    opacity: 0.8;
  }

  .pe-carousel .w-slider-arrow-left {
    left: 12px;
  }

  .pe-carousel .w-slider-arrow-right {
    right: 12px;
  }
}

/* ─── 20. RESPONSIVE — MOBILE ──────────────────────────────────── */
@media (max-width: 767px) {
  .pe-page {
    overflow-x: hidden;
  }

  .pe-page .navigation-container-full {
    position: relative;
  }

  .pe-page .div-block-34 .link-block-2,
  .pe-page .div-block-34 .subtitle.header.white {
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-right: 0;
    width: max-content;
    text-align: center;
  }

  .pe-page .div-block-34 .subtitle.reveal.header.white {
    left: 50%;
  }

  .pe-page .div-block-34 .link-block-2 .subtitle.reveal.black.header {
    left: 0;
  }

  .pe-page img {
    max-width: 100%;
  }

  .pe-page a,
  .pe-page button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .pe-section {
    padding: 48px 20px;
  }

  .pe-section--large {
    padding: 64px 20px;
  }

  .pe-section-label {
    margin-bottom: 24px;
    font-size: 0.6rem;
  }

  .pe-hero {
    height: 100vh;
    height: var(--pe-mobile-hero-height, 100dvh);
    min-height: 100vh;
    min-height: var(--pe-mobile-hero-height, 100dvh);
  }

  .pe-hero-caption {
    display: block;
    left: 20px;
    right: 20px;
    bottom: 44px;
    transform: none;
    max-width: none;
    text-align: center;
  }

  .pe-hero-caption .pe-hero-label {
    font-size: 0.58rem;
    margin-bottom: 6px;
  }

  .pe-hero-caption .pe-hero-invitation {
    font-size: clamp(1.35rem, 5.3vw, 1.9rem);
    line-height: 1.32;
  }

  .pe-hero-caption .pe-hero-sub {
    margin-top: 10px;
    font-size: 0.68rem;
  }

  .pe-hero-controls,
  .pe-hero-progress {
    display: none;
  }

  .pe-mobile-only {
    display: block;
  }

  .pe-mobile-stamp {
    padding: 48px 20px 64px;
  }

  .pe-mobile-stamp-card {
    gap: 18px;
  }

  .pe-mobile-stamp-image-wrap {
    width: min(100%, 12rem);
  }

  .pe-invitation {
    grid-template-columns: 1fr;
  }

  .pe-invitation-stamp--sticky {
    display: none;
  }

  .pe-invitation-content {
    padding: 32px 20px 48px;
  }

  .pe-invitation-text {
    font-size: clamp(1.2rem, 4.5vw, 1.6rem);
    line-height: 1.45;
    max-width: 100%;
    margin-left: 0;
  }

  .pe-invitation-content .pe-feature-image {
    margin-bottom: 24px;
  }

  .pe-editorial-intro {
    padding: 36px 20px 32px;
  }

  .pe-editorial-intro-inner {
    max-width: 24ch;
    font-size: clamp(1.1rem, 4.1vw, 1.35rem);
    line-height: 1.22;
  }

  .pe-editorial-intro-inner p {
    white-space: normal;
  }

  .pe-about {
    padding: 44px 20px 52px;
  }

  .pe-about-feature {
    gap: 24px;
  }

  .pe-heading-accent {
    font-size: 1.15rem;
    margin-bottom: 14px;
    line-height: 1.22;
  }

  .pe-about-text {
    font-size: 1rem;
    line-height: 1.6;
  }

  .pe-about-text p {
    margin-bottom: 1.25em;
  }

  .pe-journey-body {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 100%;
  }

  .pe-photo-label {
    font-size: 0.7rem;
  }

  .pe-invitation-photo-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pe-invitation-photo-grid .pe-photo-grid-item.span-12,
  .pe-invitation-photo-grid .pe-photo-grid-item.span-6 {
    grid-column: span 1;
  }

  .pe-photo-pair {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 12px;
  }

  .pe-photo-pair > .pe-photo-grid-item:first-child,
  .pe-photo-pair > .pe-photo-grid-item:nth-child(2) {
    margin-top: 0;
  }

  .pe-photo--spaced {
    margin-top: 12px;
  }

  .pe-photo-grid-item.landscape,
  .pe-photo-grid-item.wide {
    aspect-ratio: auto;
  }

  .pe-photo-grid-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .pe-photo-grid-item:hover img {
    transform: none;
  }

  .pe-editorial-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pe-editorial-gallery {
    padding: 20px;
  }

  .pe-editorial-item--large,
  .pe-editorial-item:not(.pe-editorial-item--large) {
    aspect-ratio: 4 / 3;
  }

  .pe-carousel {
    padding: 40px 0;
  }

  .pe-carousel .centered-container-2.sliderr-container {
    max-width: 100%;
  }

  .pe-carousel .w-slider {
    height: auto;
  }

  .pe-carousel .cards-image {
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .pe-carousel .slider-wrapper {
    padding: 0;
  }

  .pe-carousel .cards-image-mask {
    margin-bottom: 20px;
  }

  .pe-carousel .heading-11,
  .pe-carousel .paragraph-9 {
    padding-left: 20px;
    padding-right: 20px;
  }

  .pe-carousel .w-slider-arrow-left,
  .pe-carousel .w-slider-arrow-right {
    width: 44px;
    height: 44px;
    opacity: 0.7;
    top: 31.25vw;
  }

  .pe-carousel .left-arrow,
  .pe-carousel .right-arrow {
    display: flex !important;
  }

  .pe-carousel .w-slider-arrow-left {
    left: 8px;
  }

  .pe-carousel .w-slider-arrow-right {
    right: 8px;
  }

  .pe-carousel .w-slider-dot {
    width: 10px;
    height: 10px;
    padding: 12px;
    margin: -8px 2px;
    background-clip: content-box;
  }

  .pe-carousel .heading-11 {
    font-size: 1.15rem;
    margin-top: 0;
    margin-bottom: 8px;
  }

  .pe-carousel .paragraph-9 {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .pe-cabins {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }

  .pe-cabins-sidebar {
    position: relative;
    top: auto;
    padding: 48px 0 24px;
  }

  .pe-cabins-sidebar .pe-cabins-intro {
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.6;
  }

  .pe-cabins-main {
    padding: 0;
  }

  .pe-cabin-block {
    min-height: auto;
    padding: 40px 0;
  }

  .pe-cabin-name {
    font-size: 1.3rem;
    margin-bottom: 12px;
  }

  .pe-cabin-photos {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pe-cabin-photo {
    aspect-ratio: 4 / 3;
  }

  .pe-cabin-photo:hover img {
    transform: none;
  }

  .pe-cabin-type {
    font-size: 0.65rem;
    margin-bottom: 16px;
  }

  .pe-cabin-description {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 100%;
  }

  .pe-cabins-aside {
    display: none;
  }

  .pe-cocreation {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px 20px;
  }

  .pe-cocreation-photos {
    grid-template-columns: 1fr;
  }

  .pe-cocreation-left .pe-heading-accent {
    font-size: 1.15rem;
    margin-bottom: 14px;
  }

  .pe-cocreation-left .pe-cocreation-text {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 100%;
    margin-bottom: 24px;
  }

  .pe-cocreation-right {
    text-align: left;
    justify-content: flex-start;
  }

  .pe-cocreation-right .pe-cocreation-quote {
    font-size: clamp(1.2rem, 4.5vw, 1.6rem);
    line-height: 1.45;
  }

  .pe-accessibility-block .pe-heading-accent {
    font-size: 1.15rem;
  }

  .pe-accessibility-block .pe-accessibility-list li {
    font-size: 1rem;
    line-height: 1.6;
  }

  .pe-accessibility-closing {
    font-size: 1rem;
    line-height: 1.6;
  }

  .pe-details {
    padding: 48px 20px;
  }

  .pe-details .pe-heading-accent {
    font-size: 1.15rem;
    margin-bottom: 14px;
  }

  .pe-details-text {
    font-size: 1rem;
    line-height: 1.6;
  }

  .pe-included-list li {
    font-size: 1rem;
    line-height: 1.6;
    padding: 10px 0 10px 20px;
  }

  .pe-cta {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 12px 20px;
    font-size: 0.7rem;
    box-sizing: border-box;
  }

  .pe-floating-buttons,
  .div-block-8._2.test {
    display: none;
  }

  .pe-page #pp-password-gate {
    padding: 48px 20px;
  }

  .pe-page #pp-password-gate .pp-gate-text {
    font-size: clamp(2rem, 8vw, 2.35rem);
  }

  .pe-page #pp-password-gate .pp-form input[type="password"],
  .pe-page #pp-password-gate .pp-form input[type="text"] {
    font-size: 1rem;
    min-height: 54px;
    padding: 16px 68px 16px 18px;
  }

  .pe-page #pp-password-gate .pp-toggle-password {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    margin-right: 10px;
  }

  .pe-page #pp-password-gate .pp-form button[type="submit"] {
    min-height: 46px;
    font-size: 0.72rem;
  }

  .pe-body {
    font-size: 1rem;
    line-height: 1.6;
  }

  .pe-page .footer .social-icon-link,
  .pe-page .footer .brix---icon-square-36px {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .pe-page .footer .icon-4 {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pe-page .f-testimonial-slider-mask {
    width: 100%;
  }

  .pe-page .footer .pe-footer-souls {
    font-size: clamp(1.05rem, 4.5vw, 1.35rem);
    margin-bottom: 28px;
    max-width: 16ch;
  }
}

/* ─── 21. RESPONSIVE — SMALL MOBILE ───────────────────────────── */
@media (max-width: 479px) {
  .pe-hero-caption {
    left: 16px;
    right: 16px;
    bottom: 36px;
  }

  .pe-hero-caption .pe-hero-invitation {
    font-size: clamp(1.2rem, 5.5vw, 1.55rem);
  }

  .pe-mobile-stamp {
    padding: 40px 16px 52px;
  }

  .pe-editorial-intro {
    padding: 28px 16px 24px;
  }

  .pe-editorial-intro-inner {
    max-width: 20ch;
    font-size: clamp(1rem, 4.75vw, 1.16rem);
    line-height: 1.18;
  }

  .pe-about {
    padding: 36px 16px 44px;
  }

  .pe-invitation-content {
    padding: 12px 16px 40px;
  }

  .pe-invitation-text {
    font-size: clamp(1.1rem, 5vw, 1.4rem);
  }

  /* Sections: tighter padding */
  .pe-details {
    padding: 40px 16px;
  }

  .pe-cocreation {
    padding: 40px 16px;
    gap: 24px;
  }

  .pe-cocreation-right .pe-cocreation-quote {
    font-size: clamp(1.1rem, 5vw, 1.4rem);
  }

  .pe-accessibility-block {
    margin-top: 32px;
    padding-top: 32px;
  }

  .pe-page .footer .radio-button-label {
    font-size: 12px;
    line-height: 1.5;
  }

  .pe-page .footer .pe-footer-souls {
    font-size: clamp(1rem, 5vw, 1.2rem);
    margin-bottom: 24px;
    max-width: 14ch;
  }

  /* Cabins */
  .pe-cabins {
    padding: 0 16px;
  }

  .pe-cabins-sidebar {
    padding: 40px 0 20px;
  }

  .pe-cabin-block {
    padding: 32px 0;
  }

  .pe-cabin-name {
    font-size: 1.2rem;
  }

  /* Password gate small mobile */
  .pe-page #pp-password-gate {
    padding: 32px 16px;
  }

  .pe-page #pp-password-gate .pp-gate-text {
    font-size: clamp(1.95rem, 9.2vw, 2.2rem);
  }

  /* CTA remains full-width */
  .pe-cta {
    font-size: 0.75rem;
    padding: 12px 16px;
  }

  /* Editorial gallery: tighter padding on small screens */
  .pe-editorial-gallery {
    padding: 16px;
  }

  .pe-editorial-grid {
    gap: 16px;
  }
}

/* ─── 22. SCROLLBAR (EDITORIAL MINIMAL) ────────────────────────── */
.pe-page ::-webkit-scrollbar {
  width: 6px;
}

.pe-page ::-webkit-scrollbar-track {
  background: var(--pe-white);
}

.pe-page ::-webkit-scrollbar-thumb {
  background: var(--pe-border);
}

/* ─── BLURRY-LOAD PROGRESSIVE IMAGES ─────────────────────── */
.pe-blur-load {
  filter: blur(8px);
  transform: scale(1.05);
  transition: filter 500ms ease-out, transform 500ms ease-out;
}

.pe-blur-load.pe-sharp {
  filter: blur(0);
  transform: scale(1);
}

/* ─── LIGHTBOX ────────────────────────────────────────────── */
.pe-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  cursor: zoom-out;
}

.pe-lightbox-overlay.pe-lightbox-visible {
  opacity: 1;
  pointer-events: auto;
}

.pe-lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border: none;
  cursor: default;
}

.pe-lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.pe-lightbox-close:hover {
  color: var(--pe-white);
}

@media (prefers-reduced-motion: reduce) {
  .pe-hero-slide img,
  .pe-reveal,
  .pe-reveal > *,
  .pe-reveal img,
  .pe-mobile-stamp-card,
  .pe-feature-image,
  .pe-carousel .cards-image-mask,
  .pe-editorial-item--large,
  .pe-cocreation-photo,
  .pe-accessibility-image,
  .pe-page .nav-menu-mobile {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    transform: none !important;
  }
}

/* ─── 23. PRINT ────────────────────────────────────────────────── */
@media print {
  .pe-hero,
  .pe-floating-buttons,
  .pe-hero-controls,
  .pe-hero-progress {
    display: none;
  }

  .pe-reveal {
    opacity: 1;
    transform: none;
  }

  .pe-reveal > * {
    opacity: 1;
    transform: none;
  }
}