html, body, #primaryPages { scroll-behavior: smooth; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

* { scrollbar-width: thin; scrollbar-color: #A7ADBD transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #c8cfe0; border-radius: 8px; }

.nav-active { background: linear-gradient(90deg, rgba(47,148,255,.15), transparent); }

@media (min-width: 1024px) { .content-offset { margin-left: 260px; } }

.page-hidden { display: none; }
.page-visible { display: block; }

.snap-always { scroll-snap-stop: always; }
.section-wrap { max-width: 1200px; margin-left: auto; margin-right: auto; }

.flip { perspective: 1200px; position: relative; min-height: 320px; }
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-back { transform: rotateY(180deg); }
.flip-face { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  .flip-inner { transition: none; }
}