/* ===== RF Sight — 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;
  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; }

/* Hero: centre the headline block within its panel and lift the huge default
   top padding so it doesn't sit under the fixed nav. `safe center` keeps the
   top reachable if the content is ever taller than the panel. */
.ops-active .hero.ops-section {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  padding-top: 96px;
  padding-bottom: 56px;
}

/* Give normal (non-full-bleed) panels breathing room under the nav. */
.ops-active .section.ops-section { padding-top: max(84px, clamp(60px, 9vh, 110px)); }

/* Last panel (Contact): centre the contact block and pin the footer to the
   very bottom of the panel. */
/* Last panel (Contact): the panel itself goes full-bleed (edge to edge, like
   the top nav), so its footer spans the whole screen in BOTH the snapping mode
   and the responsive fallback. The contact block inside keeps its own centred
   max-width and side gutters. */
#contact {
  max-width: none;
  padding-inline: 0;
}
#contact .contact-wrap {
  padding-inline: clamp(16px, 5vw, 48px);
}
.ops-active #contact.ops-section {
  display: flex;
  flex-direction: column;
  padding-bottom: 0; /* let the footer sit flush against the panel's bottom edge */
}
.ops-active #contact .contact-wrap { margin-top: auto; }
.ops-active #contact .footer { margin-top: auto; }

/* --- pagination dots --- */
.onepage-pagination {
  position: fixed;
  right: clamp(10px, 2vw, 22px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  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(148, 162, 180, .7);
  background: transparent;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.onepage-pagination a:hover { border-color: var(--accent); transform: scale(1.15); }
.onepage-pagination a.active {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(230, 126, 34, .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; }
}