/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font); font-size: var(--sz-base); color: var(--clr-text); background: var(--clr-white); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }
a    { text-decoration: none; color: inherit; transition: color var(--transition); }
img  { max-width: 100%; display: block; }
ul   { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gap); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
.fade-in-up, .fade-in, .fade-in-left, .fade-in-right {
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.22,0.61,0.36,1), transform 0.55s cubic-bezier(0.22,0.61,0.36,1);
  will-change: opacity, transform;
}
.fade-in-up    { transform: translateY(28px); }
.fade-in       { transform: none; }
.fade-in-left  { transform: translateX(-28px); }
.fade-in-right { transform: translateX(28px); }
.fade-in-up.is-visible, .fade-in.is-visible, .fade-in-left.is-visible, .fade-in-right.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .fade-in-up,.fade-in,.fade-in-left,.fade-in-right { opacity:1!important; transform:none!important; transition:none!important; }
}