/* Only things Tailwind utility classes cannot express live here.
   Colors, spacing, layout, and typography are handled via Tailwind
   classes directly in index.html — do not duplicate that here. */

body { background: #F5F1E8; }

/* --- YouTube background video, "cover" fit trick --- */
.video-hero { position: relative; overflow: hidden; }
.video-hero__frame-wrap {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.video-hero__frame {
  position: absolute; top: 50%; left: 50%;
  width: 195vh;             /* ~10% larger than 16:9 to clip YT watermarks */
  height: 62vw;
  min-width: 110%;
  min-height: 110%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;     /* no clicks on background video */
}

/* --- scroll reveal (toggled by app.js IntersectionObserver) --- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- signature "branch" rail running through content sections --- */
.branch-rail { position: relative; }
.branch-rail::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #5C7A5E, #5C7A5E 85%, transparent);
}
.leaf { position: absolute; left: -7px; }

/* --- interactive polish --- */
.btn-pill {
  border-radius: 999px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-pill:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(31,61,43,.35); }

.card-lift { transition: transform .3s ease, box-shadow .3s ease; }
.card-lift:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -12px rgba(31,61,43,.18); }

.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: #9B84B3;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active { color: #1F3D2B; }
.nav-link.active::after { transform: scaleX(1); }

html { scroll-behavior: smooth; }