/* ===== Ormic — one-page-scroll layer (vanilla, no jQuery) ===== */
/* Styles only take effect once onepage-scroll.js adds `.ops-wrapper` /
   `html.ops-active`, so with JS off (or in the responsive fallback) the site
   is a normal, fully-scrollable page. */

/* --- active (snapping) state --- */
html.ops-active,
html.ops-active body {
  height: 100%;
  overflow: hidden;
}

.ops-active .ops-wrapper {
  position: relative;
  height: 100vh;
  height: 100dvh;
  /* No overflow clipping here: the wrapper itself is translated, so clipping it
     would hide the active section. Clipping happens at the viewport (body). */
  overflow: visible;
  will-change: transform;
  -webkit-transform-style: preserve-3d;
}

/* Each section becomes a full-viewport panel. Content taller than the viewport
   scrolls inside the panel; the script only snaps once it reaches the edge. */
.ops-active .ops-section {
  left: 0;
  right: 0;
  margin-inline: auto;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;                  /* override the site's tall min-heights so a panel fits one screen */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* Firefox — hide the per-panel scrollbar */
}
.ops-active .ops-section::-webkit-scrollbar { width: 0; height: 0; }

/* Content panels (sections) sit under the fixed navbar, so lift their top
   padding and trim the huge default vertical padding to help them fit. Content
   is top-aligned so the section heading always clears the fixed nav; taller
   panels simply scroll internally before the next snap. */
.ops-active section.ops-section {
  padding-top: max(96px, clamp(80px, 12vh, 130px));
  padding-bottom: clamp(32px, 6vh, 80px);
  margin-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
}

/* Contact is short — keep it vertically centred with its footer riding along. */
.ops-active section#contact.ops-section {
  justify-content: safe center;
}

/* Hero (the <header>): vertically centre the intro block within its panel. */
.ops-active header.ops-section {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
}
.ops-active header.ops-section .container {
  padding-top: 96px;
  padding-bottom: 56px;
}

/* --- pagination dots --- */
.onepage-pagination {
  position: fixed;
  right: clamp(10px, 2vw, 22px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1040;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.onepage-pagination li { margin: 0; padding: 0; line-height: 0; }
.onepage-pagination a {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(62, 61, 64, .5);
  background: transparent;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.onepage-pagination a:hover { border-color: #F49E00; transform: scale(1.15); }
.onepage-pagination a.active {
  background: #F49E00;
  border-color: #F49E00;
  box-shadow: 0 0 10px rgba(244, 158, 0, .6);
}
/* Hide the dots whenever snapping isn't active. */
html:not(.ops-active) .onepage-pagination { display: none; }

/* --- responsive fallback: revert to a normal scrolling page --- */
.ops-disabled .ops-wrapper {
  transform: none !important;
  height: auto;
  overflow: visible;
}
.ops-disabled .ops-section {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  height: auto;
  overflow: visible;
}
.ops-disabled .onepage-pagination { display: none; }

/* Respect reduced-motion: keep the snapping but drop the sliding animation. */
@media (prefers-reduced-motion: reduce) {
  .ops-active .ops-wrapper { transition: none !important; }
}