/* Contact page only: keep the form entry copy readable while adding quiet visual depth. */
.phead {
  background-image: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.98) 31%, rgba(255,255,255,.72) 58%, rgba(255,255,255,.16) 100%), url('contact-background-v1.png');
  background-position: center, center right;
  background-size: cover, cover;
  background-repeat: no-repeat;
}

@media (max-width: 700px) {
  .phead {
    background-image: linear-gradient(90deg, rgba(255,255,255,.97), rgba(255,255,255,.82)), url('contact-background-v1.png');
    background-position: center, 67% center;
  }
}

/* A non-interactive guide alongside the reservation form. */
.contact-demo-guide {
  padding: 28px;
  background: linear-gradient(145deg, #fff 0%, #f4f8ff 100%);
  border-color: #d8e6fb;
}
.contact-demo-guide:hover { background: linear-gradient(145deg, #fff 0%, #f4f8ff 100%); border-color: #d8e6fb; }
.contact-demo-guide h3 { margin: 0 0 8px; font-size: 20px; }
.contact-demo-guide .contact-demo-intro { margin: 0; color: #64748b; font-size: 13px; line-height: 1.8; }
.contact-demo-topics { margin: 20px 0 0; padding: 0; list-style: none; }
.contact-demo-topics li { display: flex; align-items: flex-start; gap: 13px; padding: 14px 0; border-top: 1px solid #e2ebf8; }
.contact-demo-topics li:last-child { padding-bottom: 0; }
.contact-demo-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; color: #2563eb; background: #eaf2ff; }
.contact-demo-icon svg { display: block; width: 20px; height: 20px; }
.contact-demo-topics strong { display: block; color: #1e293b; font-size: 14px; line-height: 1.5; }
.contact-demo-guide .contact-demo-topics p { margin: 4px 0 0; color: #64748b; font-size: 12.5px; line-height: 1.7; }

@media (max-width: 480px) {
  .contact-demo-guide { padding: 22px; }
  .contact-demo-topics li { gap: 11px; }
}