/* Page 1: push headline to bottom so it sits beneath the bottle */
.page-content--hero {
  justify-content: flex-start;
  padding: var(--spacing-xl) 0 0 0;
  gap: 0;
}

.page-content {
  display: block;
  row-gap: 0;
  padding: var(--spacing-xl) 0;
  gap: 0;
  margin: 0 auto 50px auto;
  padding: var(--spacing-xl) var(--spacing-xl);    
}

.page-content::after {
  content: "";
  display: block;
  clear: both;
}

.page-content p {
  text-align: left;
  margin: 0 0 var(--spacing-m) 0;
  line-height: 1.4;
}

.page-content--about-us p:last-of-type {
  margin-bottom: 0;
}

.about-us-media {
  margin: 0 0 var(--spacing-l) 0;
}

.about-us-media--compact {
  float: right;
  width: 33%;
  max-width: 360px;
  margin: 0 0 var(--spacing-m) var(--spacing-m);
}

.about-us-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-m);
}

.about-us-caption {
  font-size: var(--font-size-small);
  text-align: right;
  margin-top: var(--spacing-xs);
  opacity: 0.4;
}



/* ── Contact form ────────────────────────────────────── */

.page-content--contact {
  max-width: 600px;
  margin: 0 auto 0 auto;
  padding: var(--spacing-s) var(--spacing-m);
  border-radius: var(--radius-m);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
  margin-bottom: var(--spacing-l);
}

.contact-form__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-s);
}

/* ── 2-column grid ≥ 800px ────────────────────────────── */

@media (min-width: 800px) {
  .contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-m);
  }

  .form-field--full,
  .contact-form__actions,
  #contactFeedback {
    grid-column: 1 / -1;
  }

}

.contact-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.random-fruit-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: visible;
  opacity: 0.8;
}

.random-fruit {
  position: absolute;
  transform: var(--fx-parallax-base-transform);
  will-change: transform;
  max-width: 20%;
  height: auto;
}

.random-fruit--one {
  top: 0vh;
  left: 40%;
  --fx-parallax-base-transform: translate(-50%, -50%) rotate(0deg);
}

.random-fruit--two {
  top: 1vh;
  right: 30%;
  --fx-parallax-base-transform: translate(50%, -50%) rotate(0deg) scale(0.9);
}

.random-fruit--three {
  top: 12vh;
  left: 25%;
  --fx-parallax-base-transform: translate(-50%, -50%) rotate(0deg) scale(0.8);
}