/* Base */
html { scroll-behavior: smooth; }
body { background: #f5f1e6; }

/* Glassmorphism: frosted cream glass over soft olive glows */
.glow {
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  pointer-events: none;
}

/* Real glass reads through construction (sheen, edge highlight, depth) —
   not just backdrop-blur, which is invisible over a plain background. */
.glass {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.32));
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -14px 22px -16px rgba(43, 42, 34, 0.12),
    0 1px 1px rgba(43, 42, 34, 0.05),
    0 18px 44px rgba(43, 42, 34, 0.12);
}
.glass:hover { border-color: rgba(95, 107, 63, 0.4); }

.glass-strong {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.46));
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -16px 26px -18px rgba(43, 42, 34, 0.12),
    0 1px 1px rgba(43, 42, 34, 0.05),
    0 22px 52px rgba(43, 42, 34, 0.14);
}

/* Nav links: frosted glass outline on hover */
.nav-link {
  padding: 0.4rem 0.8rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease;
}
.nav-link:hover {
  background: rgba(245, 241, 230, 0.85);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-color: rgba(43, 42, 34, 0.16);
  box-shadow: 0 1px 2px rgba(43, 42, 34, 0.05), 0 6px 14px rgba(43, 42, 34, 0.07);
}

.eyebrow { letter-spacing: 0.14em; }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in { opacity: 1; transform: none; }

/* Stagger: children of a .stagger grid cascade in ~100ms apart */
.stagger > .reveal:nth-child(2) { transition-delay: 0.1s; }
.stagger > .reveal:nth-child(3) { transition-delay: 0.2s; }
.stagger > .reveal:nth-child(4) { transition-delay: 0.3s; }
.stagger > .reveal:nth-child(5) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .stagger > .reveal { transition-delay: 0s; }
}

/* Form fields */
.field {
  border: 1px solid rgba(230, 224, 205, 0.9);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
}
.field:focus {
  outline: none;
  border-color: #5f6b3f;
  box-shadow: 0 0 0 3px rgba(95, 107, 63, 0.15);
}

/* Ambient float animation */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}
.floaty { animation: float 15s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .floaty { animation: none; }
}

/* Glow parallax: the ambient glow layer drifts slowly against the scroll.
   CSS scroll-driven animation — no JS; ignored by browsers without support. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .glow-field {
      animation: glow-drift linear both;
      animation-timeline: scroll(root);
    }
  }
}
@keyframes glow-drift {
  from { transform: translateY(0); }
  to { transform: translateY(14vh); }
}

/* Hero photo: pull the stock image toward the olive/cream palette */
.img-tone { filter: saturate(0.72) sepia(0.18) hue-rotate(15deg) contrast(1.02); }

/* Inverted deep-olive panel (contact/CTA) */
.panel-dark {
  background:
    radial-gradient(120% 140% at 85% 8%, rgba(154, 163, 119, 0.35), transparent 55%),
    linear-gradient(160deg, #48522f, #363e22);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 22px 52px rgba(43, 42, 34, 0.28);
}
.glass-dark {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.field-dark {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.10);
  color: #f5f1e6;
}
.field-dark::placeholder { color: rgba(245, 241, 230, 0.55); }
.field-dark:focus {
  outline: none;
  border-color: #f5f1e6;
  box-shadow: 0 0 0 3px rgba(245, 241, 230, 0.18);
}

/* "How it works" pinned step sequence (md+ only; driven by js/main.js).
   Without the .js-steps class (no JS, mobile, reduced motion) steps render normally. */
.process-bar {
  height: 2px;
  border-radius: 999px;
  background: rgba(95, 107, 63, 0.15);
  overflow: hidden;
}
.process-bar span {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  border-radius: 999px;
  background: #5f6b3f;
}
.js-steps .step {
  opacity: 0.35;
  transition: opacity 0.4s ease;
}
.js-steps .step.active { opacity: 1; }