/* Motion + 3D layer — only active when JS adds .js to <html> */
.js .reveal{ opacity:0; transform: translate3d(0,38px,0) rotateX(14deg) scale(.97); transform-origin: 50% 100%;
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d,0ms); will-change: transform, opacity; }
.js .reveal.left{ transform: translate3d(-48px,0,0) rotateY(10deg); }
.js .reveal.right{ transform: translate3d(48px,0,0) rotateY(-10deg); }
.js .reveal.in{ opacity:1; transform:none; }
/* word-by-word headline reveal */
.js .words .w{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.js .words .w > span{ display:inline-block; transform: translateY(110%) rotateX(-50deg); opacity:0; transform-origin:50% 100%;
  transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .6s ease; transition-delay: calc(var(--i) * 70ms + 120ms); }
.js .words.in .w > span{ transform:none; opacity:1; }
/* hero badge floats + parallax */
.hero-badge img{ animation: floaty 6s ease-in-out infinite; filter: drop-shadow(0 22px 22px rgba(20,34,26,.28)); }
@keyframes floaty{ 0%,100%{ transform: translateY(0) rotateZ(-.6deg);} 50%{ transform: translateY(-12px) rotateZ(.6deg);} }
/* promo bar shimmer */
.promo-bar{ position:relative; overflow:hidden; }
.promo-bar::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform: translateX(-100%); animation: shimmer 5s ease-in-out infinite; pointer-events:none; }
@keyframes shimmer{ 0%,60%{ transform:translateX(-100%);} 100%{ transform:translateX(100%);} }
/* buttons */
.btn{ transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
.btn:hover{ transform: translateY(-3px); box-shadow: 0 12px 20px -10px rgba(20,34,26,.55); }
.btn:active{ transform: translateY(0); }
/* scroll progress */
#scroll-progress{ position:fixed; top:0; left:0; height:4px; width:100%; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold),var(--forest-mid)); z-index:9999; pointer-events:none; }
/* social icons */
.socials{ display:flex; gap:12px; margin-top:16px; }
.socials a{ width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background: var(--forest); color: var(--cream-light); border:2px solid var(--gold); transition: transform .25s ease, background .25s ease, color .25s ease; }
.socials a svg{ width:22px; height:22px; fill:currentColor; }
.socials a:hover{ background: var(--gold); color: var(--forest-deep); transform: translateY(-4px) rotate(-6deg) scale(1.08); }
footer.site .socials a{ background: transparent; color: var(--cream-light); border-color: var(--gold); }
footer.site .socials a:hover{ background: var(--gold); color: var(--forest-deep); }
@media (prefers-reduced-motion: reduce){
  .js .reveal, .js .words .w > span{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-badge img, .promo-bar::after{ animation:none !important; }
}
.contact-info .btn-outline{ color: var(--cream-light); border-color: var(--gold); }
.contact-info .btn-outline:hover{ background: var(--gold); color: var(--forest-deep); }
.nav-socials{ margin-top:0; gap:8px; }
.nav-socials a{ width:38px; height:38px; }
.nav-socials a svg{ width:19px; height:19px; }
@media (max-width:760px){ .nav-cta{ gap:10px; } .nav-socials a{ width:34px; height:34px; } .nav-socials a svg{ width:17px; height:17px; } }
/* keep nav links truly centered on the screen */
@media (min-width: 861px){
  nav.main{ display:grid; grid-template-columns: 1fr auto 1fr; }
  nav.main .logo-link{ justify-self:start; }
  nav.main .nav-cta{ justify-self:end; }
}
/* stretch header slightly wider so logo and quote/social group mirror each other */
@media (min-width: 861px){
  nav.main{ max-width: calc(var(--max) + 44px); }
}