@font-face {
  font-family: "PPE Sora";
  src: url("../fonts/sora-latin-wght-normal.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "PPE Manrope";
  src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

.ppe-experiences,
.ppe-app,
.ppe-booking-shell {
  --ppe-ink: #0a1724;
  --ppe-ink-soft: #425363;
  --ppe-paper: #fffdf8;
  --ppe-mist: #eff8f6;
  --ppe-teal: #09a88f;
  --ppe-teal-dark: #067665;
  --ppe-coral: #fa355d;
  --ppe-orange: #ff8a00;
  --ppe-yellow: #ffc800;
  --ppe-line: rgba(10, 23, 36, 0.12);
  --font-display: "PPE Sora", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "PPE Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", monospace;
  color: var(--ppe-ink);
  font-family: var(--font-body);
  line-height: 1.6;
}

.ppe-experiences *,
.ppe-app *,
.ppe-booking-shell * {
  box-sizing: border-box;
}

.ppe-section-kicker {
  color: var(--ppe-coral);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.ppe-section-heading {
  align-items: end;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.ppe-section-heading h2,
.ppe-booking-intro h2 {
  color: var(--ppe-ink);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.7rem);
  font-weight: 750;
  letter-spacing: -0.045em;
  line-height: 1.04;
  margin: 0;
  max-width: 16ch;
}

.ppe-section-heading p,
.ppe-booking-intro > p {
  color: var(--ppe-ink-soft);
  font-size: 1.05rem;
  margin: 0.9rem 0 0;
  max-width: 58ch;
}

.ppe-paint-mark {
  background: linear-gradient(100deg, var(--ppe-yellow), var(--ppe-orange) 45%, var(--ppe-coral));
  border-radius: 999px 24px 999px 28px;
  display: block;
  height: 18px;
  opacity: 0.9;
  transform: rotate(-5deg);
  width: min(180px, 22vw);
}

.ppe-event-grid {
  display: grid;
  gap: 1.35rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ppe-event-card {
  background: var(--ppe-paper);
  border: 1px solid var(--ppe-line);
  border-radius: 28px;
  box-shadow: 0 22px 55px rgba(10, 23, 36, 0.08);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.ppe-event-card:hover {
  box-shadow: 0 30px 70px rgba(10, 23, 36, 0.14);
  transform: translateY(-5px);
}

.ppe-event-art {
  aspect-ratio: 4 / 3;
  background: #102637;
  overflow: hidden;
  position: relative;
}

.ppe-event-art img {
  height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
  width: 100%;
}

.ppe-event-card:hover .ppe-event-art img { transform: scale(1.045); }

.ppe-event-art-fallback {
  background: radial-gradient(circle at 25% 25%, rgba(255, 200, 0, 0.88), transparent 22%), radial-gradient(circle at 72% 35%, rgba(250, 53, 93, 0.9), transparent 28%), linear-gradient(135deg, #092437, #0ba58e);
  height: 100%;
  position: relative;
}

.ppe-event-art-fallback span {
  background: rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  filter: blur(1px);
  height: 12px;
  left: 35%;
  position: absolute;
  top: 48%;
  width: 12px;
}

.ppe-event-art-fallback span:nth-child(2) { height: 30px; left: 56%; top: 67%; width: 30px; }
.ppe-event-art-fallback span:nth-child(3) { height: 8px; left: 72%; top: 20%; width: 8px; }

.ppe-event-badge {
  backdrop-filter: blur(12px);
  background: rgba(10, 23, 36, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  bottom: 1rem;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 750;
  left: 1rem;
  padding: 0.46rem 0.75rem;
  position: absolute;
}

.ppe-event-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.35rem;
}

.ppe-event-meta {
  color: var(--ppe-teal-dark);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.72rem;
  font-weight: 800;
  gap: 0.45rem 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ppe-event-meta span + span::before { content: "•"; margin-right: 1rem; }

.ppe-event-body h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0.7rem 0 0.5rem;
}

.ppe-event-body > p { color: var(--ppe-ink-soft); margin: 0; }

.ppe-event-footer {
  align-items: end;
  border-top: 1px solid var(--ppe-line);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 1.15rem;
}

.ppe-price { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; line-height: 1.15; }
.ppe-price small { color: var(--ppe-ink-soft); display: block; font-family: var(--font-body); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; }
.ppe-price span { color: var(--ppe-ink-soft); font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; }

.ppe-button {
  align-items: center;
  background: linear-gradient(110deg, var(--ppe-orange), var(--ppe-coral));
  border: 0;
  border-radius: 999px;
  color: #fff !important;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 800;
  gap: 0.75rem;
  justify-content: center;
  line-height: 1.2;
  padding: 0.82rem 1.1rem;
  text-decoration: none !important;
  transition: filter 180ms ease, transform 180ms ease;
}

.ppe-button:hover { filter: saturate(1.15) brightness(1.04); transform: translateY(-1px); }
.ppe-button:focus-visible { outline: 3px solid rgba(250, 53, 93, 0.32); outline-offset: 3px; }
.ppe-button:disabled, .ppe-button-disabled { cursor: not-allowed; filter: grayscale(0.8); opacity: 0.58; }

.ppe-empty-state {
  background: var(--ppe-mist);
  border: 1px solid rgba(9, 168, 143, 0.25);
  border-radius: 26px;
  padding: 2rem;
  text-align: center;
}
.ppe-empty-state strong { font-family: var(--font-display); font-size: 1.25rem; }
.ppe-empty-state p { margin: 0.35rem 0 0; }

.ppe-booking-shell {
  background: linear-gradient(145deg, #081d2c 0%, #0a2736 52%, #075f57 130%);
  border-radius: 34px;
  box-shadow: 0 35px 90px rgba(8, 29, 44, 0.22);
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  overflow: hidden;
  padding: clamp(1.35rem, 4vw, 4rem);
  position: relative;
}

.ppe-booking-shell::before {
  background: radial-gradient(circle, rgba(255, 200, 0, 0.25), transparent 68%);
  content: "";
  height: 340px;
  left: -180px;
  pointer-events: none;
  position: absolute;
  top: -160px;
  width: 340px;
}

.ppe-booking-intro { align-self: start; color: rgba(255, 255, 255, 0.78); padding-top: 1rem; position: sticky; top: 2rem; }
.ppe-booking-intro h2 { color: #fff; font-size: clamp(2rem, 3.6vw, 3.4rem); }
.ppe-booking-intro > p { color: rgba(255, 255, 255, 0.72); }
.ppe-booking-intro ul { display: grid; gap: 0.8rem; list-style: none; margin: 2rem 0 0; padding: 0; }
.ppe-booking-intro li { align-items: center; display: flex; font-weight: 700; gap: 0.75rem; }
.ppe-booking-intro li::before { background: var(--ppe-teal); border: 4px solid rgba(255, 255, 255, 0.13); border-radius: 50%; content: ""; height: 13px; width: 13px; }

.ppe-booking-form {
  background: var(--ppe-paper);
  border-radius: 26px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
  padding: clamp(1.1rem, 3vw, 2.2rem);
}

.ppe-demo-notice {
  background: #fff4cf;
  border: 1px solid #efc743;
  border-radius: 14px;
  color: #5f4900;
  grid-column: 1 / -1;
  margin-bottom: 1.4rem;
  padding: 0.9rem 1rem;
}
.ppe-demo-notice strong { font-family: var(--font-display); }

.ppe-booking-unavailable {
  align-items: flex-start;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  justify-content: center;
  min-height: 360px;
}
.ppe-booking-unavailable .ppe-unavailable-icon {
  align-items: center;
  background: linear-gradient(135deg, var(--ppe-orange), var(--ppe-pink));
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 1.5rem;
  height: 3.25rem;
  justify-content: center;
  width: 3.25rem;
}
.ppe-booking-unavailable h3 {
  color: var(--ppe-ink);
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.08;
  margin: 0;
}
.ppe-booking-unavailable p { color: var(--ppe-ink-soft); margin: 0 0 0.5rem; max-width: 42ch; }
.ppe-booking-unavailable .ppe-button { width: auto; }

.ppe-booking-form fieldset {
  border: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0 0 1.8rem;
}

.ppe-booking-form fieldset + fieldset { border-top: 1px solid var(--ppe-line); padding-top: 1.7rem; }

.ppe-booking-form legend {
  align-items: center;
  display: flex;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  gap: 0.65rem;
  grid-column: 1 / -1;
  margin-bottom: 0.2rem;
  padding: 0;
  width: 100%;
}

.ppe-booking-form legend > span {
  align-items: center;
  background: var(--ppe-ink);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-family: var(--font-body);
  font-size: 0.72rem;
  height: 1.8rem;
  justify-content: center;
  width: 1.8rem;
}

.ppe-booking-form legend small { color: var(--ppe-ink-soft); font-family: var(--font-body); font-size: 0.72rem; margin-left: auto; }

.ppe-field { display: flex; flex-direction: column; gap: 0.42rem; margin: 0; }
.ppe-field-wide, .ppe-transfer-fields, .ppe-trip-choice, .ppe-consent { grid-column: 1 / -1; }
.ppe-field > span { color: var(--ppe-ink); font-size: 0.76rem; font-weight: 800; }

.ppe-field input,
.ppe-field select,
.ppe-field textarea {
  appearance: none;
  background: #fff;
  border: 1px solid rgba(10, 23, 36, 0.18);
  border-radius: 12px;
  color: var(--ppe-ink);
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.4;
  margin: 0;
  min-height: 48px;
  padding: 0.72rem 0.85rem;
  width: 100%;
}

.ppe-field select { background-image: linear-gradient(45deg, transparent 50%, var(--ppe-ink) 50%), linear-gradient(135deg, var(--ppe-ink) 50%, transparent 50%); background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-repeat: no-repeat; background-size: 5px 5px; padding-right: 2.3rem; }
.ppe-field textarea { min-height: 88px; resize: vertical; }
.ppe-field input:focus, .ppe-field select:focus, .ppe-field textarea:focus { border-color: var(--ppe-teal); box-shadow: 0 0 0 3px rgba(9, 168, 143, 0.15); outline: 0; }
.ppe-capacity-note { color: var(--ppe-teal-dark); font-size: 0.7rem; font-weight: 750; }

.ppe-transfer-fields { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ppe-transfer-fields[hidden] { display: none; }
.ppe-trip-choice { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ppe-trip-choice label { cursor: pointer; margin: 0; position: relative; }
.ppe-trip-choice input { opacity: 0; position: absolute; }
.ppe-trip-choice span { border: 1px solid var(--ppe-line); border-radius: 12px; display: block; font-size: 0.82rem; font-weight: 800; padding: 0.75rem; text-align: center; }
.ppe-trip-choice input:checked + span { background: var(--ppe-mist); border-color: var(--ppe-teal); color: var(--ppe-teal-dark); }
.ppe-trip-choice input:focus-visible + span { outline: 3px solid rgba(9, 168, 143, 0.2); }

.ppe-consent { align-items: flex-start; color: var(--ppe-ink-soft); display: flex; font-size: 0.76rem; gap: 0.65rem; margin: 0; }
.ppe-consent input { accent-color: var(--ppe-teal); flex: 0 0 auto; height: 18px; margin-top: 0.14rem; width: 18px; }
.ppe-honeypot { height: 1px; left: -10000px; overflow: hidden; position: absolute; width: 1px; }

.ppe-booking-summary { background: var(--ppe-mist); border-radius: 16px; display: grid; gap: 0.5rem; margin-top: 0.15rem; padding: 1rem; }
.ppe-booking-summary > div { display: flex; font-size: 0.82rem; justify-content: space-between; }
.ppe-booking-summary strong { font-family: var(--font-display); }
.ppe-grand-total { border-top: 1px solid rgba(9, 168, 143, 0.25); font-size: 1rem !important; margin-top: 0.35rem; padding-top: 0.65rem; }
.ppe-grand-total strong { color: var(--ppe-teal-dark); }
.ppe-submit { font-size: 0.88rem; margin-top: 1rem; min-height: 52px; width: 100%; }
.ppe-form-message { font-size: 0.8rem; font-weight: 750; min-height: 1.4em; padding-top: 0.7rem; }
.ppe-form-message.is-error { color: #b4233c; }
.ppe-form-message.is-success { color: var(--ppe-teal-dark); }

@media (max-width: 1024px) {
  .ppe-event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ppe-booking-shell { grid-template-columns: 1fr; }
  .ppe-booking-intro { position: static; }
  .ppe-booking-intro h2 { max-width: 20ch; }
}

@media (max-width: 640px) {
  .ppe-section-heading { align-items: start; flex-direction: column; gap: 1rem; }
  .ppe-event-grid { grid-template-columns: 1fr; }
  .ppe-event-footer { align-items: stretch; flex-direction: column; }
  .ppe-event-footer .ppe-button { width: 100%; }
  .ppe-booking-shell { border-radius: 22px; padding: 1rem; }
  .ppe-booking-form { border-radius: 18px; padding: 1rem; }
  .ppe-booking-form fieldset, .ppe-transfer-fields, .ppe-trip-choice { grid-template-columns: 1fr; }
  .ppe-field { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .ppe-event-card, .ppe-event-art img, .ppe-button { transition: none; }
}

/* Standalone booking application */
.ppe-app {
  background: var(--ppe-paper);
  border: 1px solid var(--ppe-line);
  border-radius: 28px;
  box-shadow: 0 32px 90px rgba(10, 23, 36, 0.14);
  margin: 0 auto 1.5rem;
  max-width: 1280px;
  overflow: hidden;
}

.ppe-app-bar {
  align-items: center;
  background: rgba(255, 253, 248, 0.96);
  border-bottom: 1px solid var(--ppe-line);
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  min-height: 76px;
  padding: 0.85rem clamp(1rem, 3vw, 2rem);
}

.ppe-app-brand {
  align-items: center;
  color: var(--ppe-ink) !important;
  display: inline-flex;
  gap: 0.8rem;
  text-decoration: none !important;
}

.ppe-app-brand > span:last-child { display: flex; flex-direction: column; line-height: 1.05; }
.ppe-app-brand strong { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -0.03em; }
.ppe-app-brand small { color: var(--ppe-ink-soft); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.11em; margin-top: 0.28rem; text-transform: uppercase; }

.ppe-app-brand-mark {
  background: var(--ppe-ink);
  border-radius: 12px;
  display: grid;
  height: 42px;
  overflow: hidden;
  place-items: center;
  position: relative;
  transform: rotate(-3deg);
  width: 42px;
}

.ppe-app-brand-mark i { border-radius: 50%; height: 13px; position: absolute; width: 13px; }
.ppe-app-brand-mark i:nth-child(1) { background: var(--ppe-yellow); left: 6px; top: 8px; }
.ppe-app-brand-mark i:nth-child(2) { background: var(--ppe-coral); right: 5px; top: 14px; }
.ppe-app-brand-mark i:nth-child(3) { background: var(--ppe-teal); bottom: 5px; left: 14px; }

.ppe-app-nav { align-items: center; display: flex; gap: 0.4rem; }
.ppe-app-tab {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: var(--ppe-ink-soft);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  gap: 0.45rem;
  min-height: 42px;
  padding: 0.65rem 0.8rem;
}
.ppe-app-tab span { background: rgba(10, 23, 36, 0.08); border-radius: 999px; font-size: 0.62rem; min-width: 1.35rem; padding: 0.12rem 0.35rem; }
.ppe-app-tab.is-active { background: var(--ppe-mist); color: var(--ppe-teal-dark); }
.ppe-app-tab:focus-visible, .ppe-app-book-link:focus-visible, .ppe-catalog-card:focus-visible, .ppe-transfer-card:focus-visible, .ppe-dialog-close:focus-visible { outline: 3px solid rgba(9, 168, 143, 0.26); outline-offset: 3px; }
.ppe-app-book-link {
  align-items: center;
  background: var(--ppe-ink);
  border-radius: 10px;
  color: #fff !important;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 800;
  gap: 0.65rem;
  margin-left: 0.25rem;
  min-height: 42px;
  padding: 0.65rem 0.9rem;
  text-decoration: none !important;
}

.ppe-app-hero {
  align-items: end;
  background: #0a2130;
  color: #fff;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  min-height: 340px;
  overflow: hidden;
  padding: clamp(2rem, 6vw, 5.5rem) clamp(1.25rem, 5vw, 4.5rem);
  position: relative;
}
.ppe-app-hero::before {
  background: radial-gradient(circle at 40% 40%, rgba(255, 200, 0, 0.96) 0 7%, transparent 7.5%), radial-gradient(circle at 58% 30%, rgba(250, 53, 93, 0.9) 0 13%, transparent 13.5%), radial-gradient(circle at 78% 66%, rgba(9, 168, 143, 0.9) 0 17%, transparent 17.5%);
  content: "";
  height: 460px;
  opacity: 0.65;
  position: absolute;
  right: -80px;
  top: -110px;
  transform: rotate(-8deg);
  width: 540px;
}
.ppe-app-hero-copy, .ppe-app-hero-stats { position: relative; z-index: 1; }
.ppe-app-hero .ppe-section-kicker { color: var(--ppe-yellow); display: block; }
.ppe-app-hero h2 { color: #fff; font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 4.9rem); font-weight: 760; letter-spacing: -0.055em; line-height: 0.98; margin: 0; max-width: 14ch; }
.ppe-app-hero p { color: rgba(255, 255, 255, 0.72); font-size: 1rem; margin: 1.25rem 0 0; max-width: 58ch; }
.ppe-app-hero-stats { backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 18px; display: grid; grid-template-columns: repeat(3, 1fr); }
.ppe-app-hero-stats div { align-items: center; display: flex; flex-direction: column; padding: 1rem 0.5rem; text-align: center; }
.ppe-app-hero-stats div + div { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.ppe-app-hero-stats strong { color: #fff; font-family: var(--font-display); font-size: 1.35rem; }
.ppe-app-hero-stats span { color: rgba(255, 255, 255, 0.62); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }

.ppe-app-demo { align-items: center; background: #fff6d9; border-bottom: 1px solid #ead58f; color: #5f4900; display: flex; font-size: 0.76rem; gap: 0.45rem; padding: 0.7rem clamp(1.25rem, 4vw, 3rem); }
.ppe-app-demo > span { align-items: center; background: #5f4900; border-radius: 50%; color: #fff; display: inline-flex; font-size: 0.65rem; height: 1.2rem; justify-content: center; width: 1.2rem; }

.ppe-app-view { padding: clamp(2rem, 5vw, 4.5rem); }
.ppe-app-view[hidden] { display: none; }
.ppe-app-section-head { align-items: end; display: flex; gap: 2rem; justify-content: space-between; margin-bottom: 2rem; }
.ppe-app-eyebrow { color: var(--ppe-coral); display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.13em; margin-bottom: 0.45rem; text-transform: uppercase; }
.ppe-app-section-head h3 { color: var(--ppe-ink); font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 3rem); letter-spacing: -0.045em; line-height: 1.05; margin: 0; }
.ppe-app-section-head > p { color: var(--ppe-ink-soft); margin: 0; max-width: 47ch; }

.ppe-catalog-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ppe-catalog-card {
  appearance: none;
  color: var(--ppe-ink);
  cursor: pointer;
  font-family: var(--font-body);
  padding: 0;
  text-align: left;
  width: 100%;
}
.ppe-catalog-card .ppe-event-body h4 { color: var(--ppe-ink); font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -0.03em; line-height: 1.18; margin: 0.75rem 0 0.5rem; }
.ppe-catalog-card .ppe-event-body > p { color: var(--ppe-ink-soft); margin: 0; }
.ppe-card-cta { align-items: center; color: var(--ppe-teal-dark); display: inline-flex; font-size: 0.74rem; font-weight: 800; gap: 0.45rem; }
.ppe-card-cta b { align-items: center; background: var(--ppe-mist); border-radius: 50%; display: inline-flex; height: 1.9rem; justify-content: center; width: 1.9rem; }
.ppe-art-variant-1 .ppe-event-art-fallback { filter: hue-rotate(42deg); }
.ppe-art-variant-2 .ppe-event-art-fallback { filter: hue-rotate(292deg); }

.ppe-transfer-grid { display: grid; gap: 0.85rem; }
.ppe-transfer-card {
  align-items: center;
  appearance: none;
  background: #fff;
  border: 1px solid var(--ppe-line);
  border-radius: 18px;
  color: var(--ppe-ink);
  cursor: pointer;
  display: grid;
  font-family: var(--font-body);
  gap: 1rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 1.15rem;
  text-align: left;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  width: 100%;
}
.ppe-transfer-card:hover { border-color: rgba(9, 168, 143, 0.48); box-shadow: 0 16px 40px rgba(10, 23, 36, 0.1); transform: translateY(-2px); }
.ppe-transfer-icon { align-items: center; background: var(--ppe-mist); border-radius: 14px; display: flex; height: 58px; justify-content: center; position: relative; width: 58px; }
.ppe-transfer-icon::before, .ppe-transfer-icon::after { background: var(--ppe-teal); border-radius: 50%; content: ""; height: 9px; position: absolute; width: 9px; }
.ppe-transfer-icon::before { left: 11px; }.ppe-transfer-icon::after { right: 11px; }
.ppe-transfer-icon i { border-top: 2px dashed var(--ppe-teal); width: 25px; }
.ppe-transfer-variant-1 .ppe-transfer-icon { background: #fff4e4; }.ppe-transfer-variant-1 .ppe-transfer-icon::before, .ppe-transfer-variant-1 .ppe-transfer-icon::after { background: var(--ppe-orange); }.ppe-transfer-variant-1 .ppe-transfer-icon i { border-color: var(--ppe-orange); }
.ppe-transfer-variant-2 .ppe-transfer-icon { background: #fff0f3; }.ppe-transfer-variant-2 .ppe-transfer-icon::before, .ppe-transfer-variant-2 .ppe-transfer-icon::after { background: var(--ppe-coral); }.ppe-transfer-variant-2 .ppe-transfer-icon i { border-color: var(--ppe-coral); }
.ppe-transfer-route { display: flex; flex-direction: column; min-width: 0; }
.ppe-transfer-route small, .ppe-transfer-price small { color: var(--ppe-ink-soft); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.ppe-transfer-route strong { font-family: var(--font-display); font-size: 1.05rem; margin: 0.16rem 0; }
.ppe-transfer-route > span { color: var(--ppe-ink-soft); font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppe-transfer-price { align-items: end; display: flex; flex-direction: column; min-width: 112px; }
.ppe-transfer-price strong { font-family: var(--font-display); font-size: 1.12rem; }
.ppe-transfer-price b { color: var(--ppe-teal); margin-top: 0.2rem; }

.ppe-detail-dialog {
  background: transparent;
  border: 0;
  color: var(--ppe-ink);
  max-height: min(90vh, 860px);
  max-width: 1080px;
  padding: 0;
  width: min(1080px, calc(100vw - 2rem));
}
.ppe-detail-dialog::backdrop { backdrop-filter: blur(8px); background: rgba(3, 14, 22, 0.76); }
.ppe-detail-frame { background: var(--ppe-paper); border-radius: 24px; display: grid; grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr); min-height: min(720px, 86vh); overflow: hidden; position: relative; }
.ppe-dialog-close { align-items: center; background: rgba(255, 255, 255, 0.92); border: 0; border-radius: 50%; color: var(--ppe-ink); cursor: pointer; display: flex; font-family: var(--font-body); font-size: 1.35rem; height: 42px; justify-content: center; line-height: 1; position: absolute; right: 1rem; top: 1rem; width: 42px; z-index: 3; }
.ppe-detail-visual { background: #0a2130; min-height: 100%; overflow: hidden; position: relative; }
.ppe-detail-visual > img { height: 100%; object-fit: cover; position: absolute; width: 100%; }
.ppe-detail-visual::after { background: linear-gradient(180deg, transparent 45%, rgba(6, 19, 29, 0.9)); bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; }
.ppe-detail-paint { height: 100%; overflow: hidden; position: absolute; width: 100%; }
.ppe-detail-paint i { border-radius: 46% 54% 36% 64%; filter: blur(1px); position: absolute; }
.ppe-detail-paint i:nth-child(1) { background: var(--ppe-yellow); height: 230px; left: -45px; top: 12%; transform: rotate(18deg); width: 250px; }
.ppe-detail-paint i:nth-child(2) { background: var(--ppe-coral); height: 260px; right: -70px; top: 34%; transform: rotate(-24deg); width: 270px; }
.ppe-detail-paint i:nth-child(3) { background: var(--ppe-teal); bottom: -60px; height: 250px; left: 8%; transform: rotate(8deg); width: 320px; }
.ppe-detail-paint span { color: rgba(255, 255, 255, 0.86); font-family: var(--font-display); font-size: clamp(4rem, 8vw, 8rem); font-weight: 800; left: 50%; letter-spacing: -0.08em; position: absolute; text-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); top: 40%; transform: translate(-50%, -50%) rotate(-7deg); z-index: 1; }
.ppe-detail-visual-copy { bottom: 2rem; color: #fff; display: flex; flex-direction: column; left: 2rem; position: absolute; right: 2rem; z-index: 2; }
.ppe-detail-visual-copy span { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.ppe-detail-visual-copy strong { font-family: var(--font-display); font-size: 1.3rem; margin-top: 0.25rem; }
.ppe-detail-content { align-self: start; max-height: min(720px, 86vh); overflow-y: auto; padding: clamp(2rem, 5vw, 4rem); }
.ppe-detail-status { align-items: center; display: flex; font-size: 0.68rem; font-weight: 800; justify-content: space-between; margin-bottom: 2rem; }
.ppe-detail-status > span:first-child { align-items: center; display: inline-flex; gap: 0.4rem; }
.ppe-detail-status > span:first-child::before { background: currentColor; border-radius: 50%; content: ""; height: 7px; width: 7px; }
.ppe-detail-status .is-available { color: var(--ppe-teal-dark); }.ppe-detail-status .is-unavailable { color: #a23b4c; }
.ppe-detail-content h3 { color: var(--ppe-ink); font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.6rem); letter-spacing: -0.055em; line-height: 1.02; margin: 0 0 1.5rem; }
.ppe-detail-facts { border-bottom: 1px solid var(--ppe-line); border-top: 1px solid var(--ppe-line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1.5rem; }
.ppe-detail-facts div { display: flex; flex-direction: column; padding: 1rem 0.8rem 1rem 0; }
.ppe-detail-facts div + div { border-left: 1px solid var(--ppe-line); padding-left: 0.8rem; }
.ppe-detail-facts small, .ppe-transfer-pricing small { color: var(--ppe-ink-soft); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.ppe-detail-facts strong { font-size: 0.76rem; line-height: 1.4; }
.ppe-detail-description { color: var(--ppe-ink-soft); font-size: 0.88rem; }
.ppe-detail-description p:first-child { margin-top: 0; }
.ppe-detail-includes { background: var(--ppe-mist); border-radius: 14px; margin: 1.5rem 0; padding: 1rem; }
.ppe-detail-includes > strong { font-family: var(--font-display); font-size: 0.86rem; }
.ppe-detail-includes ul { display: grid; gap: 0.45rem; list-style: none; margin: 0.75rem 0 0; padding: 0; }
.ppe-detail-includes li { color: var(--ppe-ink-soft); font-size: 0.75rem; padding-left: 1.25rem; position: relative; }
.ppe-detail-includes li::before { color: var(--ppe-teal-dark); content: "✓"; font-weight: 800; left: 0; position: absolute; }
.ppe-detail-content > .ppe-button { width: 100%; }

.ppe-transfer-detail-visual { background: #08352f; }
.ppe-transfer-detail-visual::before { background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.08), transparent 30%), repeating-linear-gradient(45deg, transparent 0 32px, rgba(255,255,255,.03) 32px 34px); content: ""; inset: 0; position: absolute; }
.ppe-route-map { align-items: center; display: flex; gap: 1rem; left: 12%; position: absolute; right: 12%; top: 42%; z-index: 2; }
.ppe-route-map span { align-items: center; background: #fff; border: 6px solid rgba(255,255,255,.18); border-radius: 50%; color: var(--ppe-teal-dark); display: flex; font-family: var(--font-display); font-weight: 800; height: 48px; justify-content: center; width: 48px; }
.ppe-route-map i { border-top: 3px dashed rgba(255,255,255,.8); flex: 1; }
.ppe-transfer-pricing { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.5rem; }
.ppe-transfer-pricing div { background: #fff; border: 1px solid var(--ppe-line); border-radius: 14px; display: flex; flex-direction: column; padding: 1rem; }
.ppe-transfer-pricing strong { font-family: var(--font-display); font-size: 1.35rem; }

.ppe-booking-shell { margin: 0 auto; max-width: 1280px; scroll-margin-top: 1rem; }
.ppe-booking-progress { display: grid; gap: 0.5rem; grid-template-columns: repeat(3, 1fr); margin-bottom: 1rem; }
.ppe-booking-progress span { align-items: center; color: var(--ppe-ink-soft); display: flex; font-size: 0.67rem; font-weight: 800; gap: 0.4rem; }
.ppe-booking-progress span::after { background: var(--ppe-line); content: ""; flex: 1; height: 1px; }
.ppe-booking-progress span:last-child::after { display: none; }
.ppe-booking-progress b { align-items: center; border: 1px solid var(--ppe-line); border-radius: 50%; display: inline-flex; height: 1.45rem; justify-content: center; width: 1.45rem; }
.ppe-booking-progress .is-current { color: var(--ppe-teal-dark); }.ppe-booking-progress .is-current b { background: var(--ppe-teal); border-color: var(--ppe-teal); color: #fff; }
.ppe-current-plan { background: #f7f4ed; border: 1px solid var(--ppe-line); border-radius: 14px; display: grid; gap: 0.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.4rem; padding: 0.85rem; }
.ppe-current-plan div { display: flex; flex-direction: column; min-width: 0; }
.ppe-current-plan small { color: var(--ppe-ink-soft); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.ppe-current-plan strong { font-family: var(--font-display); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1024px) {
  .ppe-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ppe-app-hero { grid-template-columns: 1fr; }
  .ppe-app-hero-stats { max-width: 520px; }
  .ppe-detail-frame { grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr); }
}

@media (max-width: 720px) {
  .ppe-app { border-radius: 20px; }
  .ppe-app-bar { align-items: stretch; flex-direction: column; gap: 0.75rem; }
  .ppe-app-nav { display: grid; grid-template-columns: repeat(2, 1fr); }
  .ppe-app-book-link { grid-column: 1 / -1; justify-content: center; margin: 0; }
  .ppe-app-hero { min-height: 0; padding: 3rem 1.25rem; }
  .ppe-app-hero::before { opacity: 0.42; right: -240px; }
  .ppe-app-hero h2 { font-size: clamp(2.15rem, 12vw, 3.3rem); }
  .ppe-app-section-head { align-items: start; flex-direction: column; gap: 0.75rem; }
  .ppe-catalog-grid { grid-template-columns: 1fr; }
  .ppe-transfer-card { align-items: start; grid-template-columns: auto 1fr; }
  .ppe-transfer-price { align-items: start; grid-column: 2; min-width: 0; }
  .ppe-transfer-route > span { white-space: normal; }
  .ppe-detail-dialog { max-height: 94vh; width: calc(100vw - 1rem); }
  .ppe-detail-frame { display: block; max-height: 94vh; min-height: 0; overflow-y: auto; }
  .ppe-detail-visual { min-height: 270px; }
  .ppe-detail-content { max-height: none; overflow: visible; padding: 1.35rem; }
  .ppe-detail-status { align-items: start; flex-direction: column; gap: 0.35rem; margin-bottom: 1.2rem; }
  .ppe-detail-facts { grid-template-columns: 1fr; }
  .ppe-detail-facts div + div { border-left: 0; border-top: 1px solid var(--ppe-line); padding-left: 0; }
  .ppe-booking-progress { grid-template-columns: 1fr; }
  .ppe-booking-progress span::after { display: none; }
  .ppe-current-plan { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .ppe-app-view { padding: 1.5rem 1rem; }
  .ppe-app-hero-stats span { letter-spacing: 0; text-transform: none; }
  .ppe-event-body { padding: 1rem; }
  .ppe-transfer-card { padding: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ppe-transfer-card { transition: none; }
}