/* Optional progressive enhancement; section contents keep their original layout. */
:root {
  --opusell-header-height: 100px;
}

.opusell-scroll-main {
  position: relative;
  isolation: isolate;
}

.opusell-scroll-panel {
  position: relative;
  z-index: var(--opusell-panel-layer, 1);
  isolation: isolate;
  /* Keep a solid base even when WebKit reports a transparent section color. */
  background-color: var(--paper, #fafafa);
  background-image: linear-gradient(var(--opusell-panel-background, transparent), var(--opusell-panel-background, transparent));
}

.opusell-scroll-content {
  position: relative;
  z-index: 1;
  display: flow-root;
}

.opusell-scroll-main.is-layered-scroll {
  /* Unlike overflow:hidden, clip does not create a competing scroll container. */
  overflow: clip;
}

.is-layered-scroll > .opusell-scroll-panel {
  position: sticky;
  top: var(--opusell-panel-top, var(--opusell-header-height));
}

.is-layered-scroll > .opusell-scroll-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  min-height: calc(100svh - var(--opusell-header-height));
  z-index: 0;
  background: inherit;
  pointer-events: none;
}

.is-layered-scroll > .opusell-scroll-panel:last-child::before {
  /* The footer remains in the ordinary document flow. */
  min-height: 0;
}

.is-layered-scroll .opusell-scroll-content {
  opacity: var(--opusell-panel-opacity, 1);
}

.opusell-back-to-top {
  position: fixed;
  top: calc((var(--opusell-header-height) - 44px) / 2);
  right: var(--gutter, 22px);
  z-index: 60;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 11px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: var(--ink, #262926);
  opacity: .78;
  transition: opacity .18s ease;
}

.opusell-back-to-top[hidden] {
  display: none;
}

body.has-opusell-back-to-top .site-header {
  padding-right: calc(var(--gutter, 22px) + 60px);
}

.opusell-back-to-top:hover,
.opusell-back-to-top:focus-visible {
  opacity: 1;
}

.opusell-back-to-top:focus-visible {
  outline: 2px solid var(--orange, #bd4b2f);
  outline-offset: 4px;
}

.opusell-back-to-top svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 760px) {
  :root {
    --opusell-header-height: 82px;
  }

  .opusell-back-to-top {
    right: 16px;
  }

  body.has-opusell-back-to-top .site-header {
    padding-right: 76px;
  }

  body.has-opusell-back-to-top .header-contact {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .opusell-scroll-main.is-layered-scroll {
    overflow: visible;
  }

  .is-layered-scroll > .opusell-scroll-panel {
    position: relative;
    top: auto;
  }

  .is-layered-scroll > .opusell-scroll-panel::before {
    min-height: 0;
  }

  .is-layered-scroll .opusell-scroll-content {
    opacity: 1;
  }

  .opusell-back-to-top {
    transition: none;
  }
}