/* ===============================
   SECTION SCROLL NAVIGATION
   =============================== */

.section-scroll-nav {
  position: absolute;
  z-index: 10;
}


/* Hero — bottom left */

.section-scroll-nav-hero {
  right: 34px;
  bottom: 28px;
}


/* Services + Process — vertical pair */

.section-scroll-nav-pair {
  right: 26px;
  top: 50%;

  transform: translateY(-50%);

  display: flex;
  flex-direction: column;
  gap: 10px;
}


/* Footer — single up button */

.section-scroll-nav-footer {
  right: 34px;
  top: 50%;

  transform: translateY(-50%);
}


/* Circle */

.section-scroll-button {
  width: 44px;
  height: 44px;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid rgba(255, 255, 255, 0.16);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.025);

  cursor: pointer;

  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease;
}


/* Arrowhead */

.section-scroll-arrow {
  width: 8px;
  height: 8px;

  border-right:
    1.5px solid rgba(255, 255, 255, 0.62);

  border-bottom:
    1.5px solid rgba(255, 255, 255, 0.62);

  transition:
    border-color 0.25s ease;
}


/* Down */

.section-scroll-down
.section-scroll-arrow {
  transform:
    translateY(-2px)
    rotate(45deg);
}


/* Up */

.section-scroll-up
.section-scroll-arrow {
  transform:
    translateY(2px)
    rotate(225deg);
}


/* Hover */

.section-scroll-button:hover {
  border-color:
    rgba(89, 133, 96, 0.72);

  background:
    rgba(89, 133, 96, 0.10);

  transform: scale(1.06);
}

.section-scroll-button:hover
.section-scroll-arrow {
  border-color: #598560;
}

.process-section,
.site-footer {
  position: relative;
}

.section-scroll-home-icon {
  width: 17px;
  height: 17px;

  display: block;

  fill: none;
  stroke: rgba(255,255,255,0.62);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;

  pointer-events: none;
}

.section-scroll-home-button:hover
.section-scroll-home-icon {
  stroke: #598560;
}

/* ===============================
   MOBILE — SECTION NAV
   =============================== */

@media (max-width: 699px) {

 /* ===============================
   MOBILE — SECTION NAV
   LOCKED
   =============================== */

@media (max-width: 699px) {

  /* Hero arrow */
  .section-scroll-nav-hero,

  /* Services + Process arrows */
  .section-scroll-nav-pair,

  /* Footer home button */
  .section-scroll-nav-footer {
    right: 16px;
  }


  /* Disable hover effects on mobile */
  .section-scroll-button:hover {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.025);
    transform: none;
  }


  /* Normal arrow color on hover */
  .section-scroll-button:hover
  .section-scroll-arrow {
    border-color: rgba(255, 255, 255, 0.62);
  }


  /* Home icon normal color on hover */
  .section-scroll-button:hover
  .section-scroll-home-icon {
    stroke: rgba(255, 255, 255, 0.62);
  }

}
}