:root {
  --vineyard-cream: #fdf8f3;
  --vineyard-stone: #e8e0d5;
  --vineyard-stone-dark: #d4c9ba;
  --vineyard-sage: #7c8b6f;
  --vineyard-sage-light: #9ba78f;
  --vineyard-sage-dark: #5f6b54;
  --vineyard-wine: #722f37;
  --vineyard-charcoal: #3d3d3d;
  --vineyard-brown: #6b5b4f;
  --vineyard-ink: #2f322c;
  --vineyard-shadow: rgba(47, 50, 44, 0.12);
  --vineyard-border: rgba(95, 107, 84, 0.2);
}

html {
  font-size: 15px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px;
  font-family: "Source Sans 3", "Segoe UI", sans-serif;
  color: var(--vineyard-ink);
  background:
    radial-gradient(circle at 15% 15%, rgba(124, 139, 111, 0.18), transparent 48%),
    radial-gradient(circle at 90% 20%, rgba(233, 225, 213, 0.55), transparent 46%),
    linear-gradient(180deg, #fdf8f3 0%, #f7f1e8 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23grain)' opacity='0.04'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.5;
  z-index: 0;
}


main, header, footer {
  position: relative;
  z-index: 1;
}

.botanical-scatter {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.botanical-item {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.08;
  transform-origin: center;
  filter: saturate(0.7);
}

.botanical-item-1 {
  top: 6%;
  left: 4%;
  width: 180px;
  height: 180px;
  background-image: url("/images/frond1.svg");
  opacity: 0.07;
  transform: rotate(-8deg);
}

.botanical-item-2 {
  top: 14%;
  right: 6%;
  width: 150px;
  height: 150px;
  background-image: url("/images/frond2.svg");
  opacity: 0.06;
  transform: rotate(12deg);
}

.botanical-item-3 {
  top: 48%;
  left: 6%;
  width: 220px;
  height: 220px;
  background-image: url("/images/frond3.svg");
  opacity: 0.09;
  transform: rotate(-16deg);
}

.botanical-item-4 {
  top: 58%;
  right: 4%;
  width: 200px;
  height: 200px;
  background-image: url("/images/frond1.svg");
  opacity: 0.08;
  transform: rotate(6deg);
}

.botanical-item-5 {
  bottom: 8%;
  left: 18%;
  width: 160px;
  height: 160px;
  background-image: url("/images/frond2.svg");
  opacity: 0.06;
  transform: rotate(18deg);
}

.botanical-item-6 {
  bottom: 6%;
  right: 16%;
  width: 240px;
  height: 240px;
  background-image: url("/images/frond3.svg");
  opacity: 0.08;
  transform: rotate(-12deg);
}

@media (max-width: 768px) {
  .botanical-item-3,
  .botanical-item-6 {
    display: none;
  }

  .botanical-item {
    opacity: 0.05;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.12rem #fdf8f3, 0 0 0 0.3rem rgba(124, 139, 111, 0.4);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--vineyard-brown);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.font-serif {
  font-family: "Playfair Display", "Georgia", serif;
}

.vineyard-card {
  background: rgba(253, 248, 243, 0.7);
  border: 1px solid var(--vineyard-border);
  border-radius: 18px;
  box-shadow: 0 20px 40px -30px var(--vineyard-shadow);
}

.vineyard-card--stone {
  background: rgba(232, 224, 213, 0.55);
  border-color: rgba(95, 107, 84, 0.18);
}

.vineyard-pill {
  border-radius: 999px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.7rem;
}

.vineyard-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(114, 47, 55, 0.35), transparent);
}

.vineyard-button {
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}


.reveal {
  opacity: 0;
  transform: translateY(16px);
  animation: reveal 0.8s ease forwards;
}

.reveal-delay-1 { animation-delay: 0.1s; }
.reveal-delay-2 { animation-delay: 0.2s; }
.reveal-delay-3 { animation-delay: 0.3s; }
.reveal-delay-4 { animation-delay: 0.4s; }

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}