/* Photography is woven into the existing shapes rather than added as a gallery. */
.hero {
  background:
    linear-gradient(110deg, rgba(5, 25, 17, .94) 3%, rgba(11, 43, 29, .67) 47%, rgba(6, 21, 15, .30) 75%, rgba(4, 15, 11, .57)),
    url("photos/hero-terrace.webp") center 58% / cover no-repeat;
}

.hero-glow {
  opacity: .55;
  mix-blend-mode: soft-light;
}

.visual-day {
  background:
    linear-gradient(155deg, rgba(255, 247, 222, .04), rgba(50, 24, 8, .26)),
    url("photos/food-table.webp") center 47% / cover no-repeat;
}

.visual-night {
  background:
    linear-gradient(155deg, rgba(35, 8, 10, .05), rgba(12, 5, 4, .38)),
    url("photos/cocktail.webp") center 48% / cover no-repeat;
}

.visual-day .plate,
.visual-night .glass {
  display: none;
}

.visual p {
  background: rgba(247, 239, 211, .92);
  backdrop-filter: blur(8px);
}

.visual-night p {
  font-size: clamp(54px, 9vw, 128px);
}

.social {
  display: grid;
  grid-template-columns: 1fr .82fr 1fr;
  min-height: 68vh;
  background: #f2eddf;
  overflow: hidden;
}

.social-photo {
  min-height: 560px;
  background-size: cover;
  background-position: center;
}

.social-party { background-image: url("photos/party-night.webp"); }
.social-room { background-image: url("photos/party-room.webp"); }

.social-follow {
  padding: 60px 35px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #f2eddf;
  color: #173c2d;
}

.social-follow strong {
  margin: 34px 0 48px;
  font-family: "Archivo Black";
  font-size: clamp(31px, 4vw, 62px);
  line-height: .9;
  letter-spacing: -.055em;
}

.social-cta {
  padding-bottom: 6px;
  border-bottom: 1px solid;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .15em;
}

.hire {
  background:
    linear-gradient(90deg, rgba(4, 26, 17, .94) 0%, rgba(5, 31, 20, .80) 43%, rgba(5, 24, 17, .28) 77%),
    url("photos/interior.webp") center 48% / cover no-repeat;
}

.hire-inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(390px, .9fr);
  gap: 7vw;
  align-items: end;
}

.event-form {
  padding: 34px;
  background: rgba(8, 23, 17, .88);
  border: 1px solid rgba(242, 237, 223, .4);
  backdrop-filter: blur(12px);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}

.event-form label {
  display: grid;
  gap: 7px;
  font-size: 12px;
  letter-spacing: .06em;
}

.event-form input,
.event-form select,
.event-form textarea {
  width: 100%;
  min-height: 45px;
  padding: 11px 12px;
  border: 1px solid rgba(242, 237, 223, .45);
  border-radius: 0;
  background: rgba(242, 237, 223, .09);
  color: #f2eddf;
  font: inherit;
}

.event-form option { color: #081711; }
.event-form textarea { resize: vertical; }
.form-wide { grid-column: 1 / -1; }
.event-form .button { color: inherit; background: transparent; cursor: pointer; }
.form-note { margin: 18px 0 0; font-size: 12px; line-height: 1.5; }
.form-note a { border-bottom: 1px solid; overflow-wrap: anywhere; }
.event-form :focus-visible { outline: 3px solid #db6933; outline-offset: 2px; }

@media (max-width: 760px) {
  .hero { background-position: 58% center; }
  .hire { background-position: 59% center; }
  .social { grid-template-columns: 1fr 1fr; }
  .social-photo { min-height: 430px; }
  .social-follow { grid-column: 1 / -1; grid-row: 2; min-height: 360px; padding: 55px 24px; }
  .hire-inner { grid-template-columns: 1fr; gap: 45px; }
  .event-form { padding: 25px 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-wide { grid-column: auto; }
}

.skip-link {
  position: fixed;
  z-index: 100;
  left: 16px;
  top: 12px;
  padding: 12px 16px;
  background: #f2eddf;
  color: #173c2d;
  transform: translateY(-180%);
}
.skip-link:focus { transform: none; }
a:focus-visible, button:focus-visible { outline: 3px solid #db6933; outline-offset: 3px; }
.menu-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.menu-buttons .button { margin-top: 25px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker div { animation: none; }
}

@media (max-width: 480px) {
  .menu-buttons { display: grid; }
  .menu-buttons .button { margin-top: 8px; }
}