/* ===========================================================
   Studio R - Portfolio Site
   Palette: off-white / logo green / deep forest - clean, modern
=========================================================== */

@font-face {
  font-family: "TT Norms";
  src: url("../fonts/TTNorms-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #fffdf9;
  --cream-deep: #f2f0eb;
  --white: #ffffff;

  --logo-green: #325401;
  --accent: #2c4a00;
  --accent-dark: #1d3104;
  --accent-light: #c9d6b3;
  --forest: #142203;
  --on-forest: #fffdf9;

  --sage: #6e7c5c;
  --sage-dark: #566148;
  --sage-light: #cbd3b9;
  --sage-glow: rgba(110, 124, 92, 0.18);

  --green: #3c6600;
  --green-dark: #2c4d00;
  --green-light: #dce8c8;

  --text: #3a2e27;
  --text-soft: #7a6a5d;
  --text-faint: #a8988a;

  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 36px;

  --font-title: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent:
    "TT Norms", "TT Norms Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-body: "Oswald", -apple-system, BlinkMacSystemFont, sans-serif;

  --ease: cubic-bezier(0.65, 0, 0.35, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* nav links stop below the fixed navbar instead of under it */
  scroll-padding-top: 56px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1.65;
  font-weight: 300;
  letter-spacing: 0.03em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3 {
  letter-spacing: normal;
}

img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
}
button {
  font-family: inherit;
  cursor: pointer;
}
input,
textarea,
select {
  font-family: inherit;
}

.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 40px 0;
  position: relative;
}
@media (max-width: 768px) {
  .section {
    padding: 32px 0;
  }
}

.eyebrow {
  font-family: var(--font-title);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
  font-weight: 400;
  margin-bottom: 14px;
}

/* numbered labels: "01 —— About" */
.eyebrow--num {
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow--num.center {
  justify-content: center;
}
.eyebrow__n {
  color: var(--text);
}
.eyebrow__rule {
  width: 42px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.section__title {
  font-family: var(--font-title);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 12px;
  max-width: 640px;
}

.section__lead {
  color: var(--text-soft);
  max-width: 520px;
  margin-bottom: 34px;
}

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.italic-accent {
  font-family: var(--font-accent);
  font-weight: 500;
  color: var(--accent);
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.15s var(--ease),
    transform 0.15s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Progress bar ---------- */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 1000;
  background: transparent;
}
.progress-bar__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--sage));
  transition: width 0.1s linear;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 1.05rem;
  font-weight: 500;
  background: none;
  border: none;
  position: relative;
  transition: color 0.1s var(--ease);
}
.btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.15s var(--ease);
}
.btn:hover::after,
.btn:focus-visible::after {
  transform: scaleX(1);
}
.btn--primary {
  color: var(--accent);
}
.btn--primary:hover {
  color: var(--accent-dark);
}
.btn--ghost {
  color: var(--text);
}
.btn--submit {
  align-self: flex-end;
}
.contact__form .btn--submit,
.contact__form .btn--submit:hover {
  color: var(--on-forest);
}

.magnetic {
  will-change: transform;
}

/* ===========================================================
   NAV
=========================================================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  padding: 18px 0;
  transition:
    padding 0.2s var(--ease),
    background 0.2s var(--ease);
}
.nav.is-scrolled {
  padding: 10px 0;
  background: rgba(255, 253, 249, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cream-deep);
}
.nav__inner {
  max-width: none;
  padding: 0 clamp(24px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav__logo-img {
  height: 34px;
  width: auto;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 48px;
}
.nav__link {
  font-size: 1rem;
  color: var(--text-soft);
  position: relative;
  padding: 4px 0;
  transition: color 0.1s ease;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 1.5px;
  background: var(--accent);
  transition: width 0.1s var(--ease);
}
.nav__link:hover {
  color: var(--text);
}
.nav__link:hover::after {
  width: 100%;
}

.nav__link::before {
  content: "•";
  position: absolute;
  left: -13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.nav__link.is-active {
  color: var(--text);
}
.nav__link.is-active::before {
  opacity: 1;
}

.nav__cta {
  color: var(--accent) !important;
  font-weight: 500;
}
.nav__cta:hover {
  color: var(--accent-dark) !important;
}

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
}
.nav__toggle span {
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition:
    transform 0.15s var(--ease),
    opacity 0.15s ease;
}
.nav__toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.nav__toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 860px) {
  .nav__toggle {
    display: flex;
  }
  .nav__links {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 180px;
    background: var(--white);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 28px;
    gap: 26px;
    border-left: 1px solid var(--cream-deep);
    transform: translateX(100%);
    transition: transform 0.25s var(--ease);
  }
  .nav__links.is-open {
    transform: translateX(0);
  }
  .nav__link {
    font-size: 1.2rem;
  }
}

/* ===========================================================
   HERO
=========================================================== */
/* heading, motto, photo and the green band below all fit in the first screen
   (the band's lower half hangs below the hero, hence the 32px) */
.hero {
  position: relative;
  height: calc(100svh - 32px);
  min-height: 560px;
  /* bottom padding leaves room for the green band that overlaps the hero */
  padding: 100px 0 62px;
  background: var(--cream);
  overflow-x: clip;
}

.hero__inner {
  height: 100%;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 6vw;
  align-items: end;
}

.hero__title {
  grid-column: 1 / -1;
  font-family: var(--font-title);
  font-weight: 400;
  letter-spacing: -0.035em;
  font-size: clamp(3.4rem, 9.4vw, 9.4rem);
  line-height: 0.95;
  color: var(--text);
  margin: 0 0 30px;
}

.hero__subtitle {
  grid-column: 1;
  grid-row: 2;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  color: var(--text-soft);
  margin: 0;
}

/* Photo: Workperch on Unsplash (unsplash.com/photos/wnZ3ai3_idw) */
.hero__tile {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  align-self: stretch; /* fills the height left on screen */
  margin-left: clamp(0px, 5vw, 80px);
  /* breaks out of the container to the right edge of the window */
  margin-right: calc(-1 * (max(0px, (100vw - 1160px) / 2) + 24px));
  /* ...and down past the hero (cancels its bottom padding, plus the 32px the
     green band hangs below it), so the band overlaps the bottom of the photo
     and both end on the same line */
  margin-bottom: -94px;
  /* anchored near the top, so the bottom of the desk is what gets cropped */
  background: url("../img/hero-desk.jpg") center 18% / cover no-repeat;
}

@media (max-width: 760px) {
  .hero {
    height: auto;
    min-height: 0;
    padding: 120px 0 0;
  }
  .hero__inner {
    grid-template-columns: 1fr;
  }
  .hero__title {
    margin-bottom: 32px;
  }
  .hero__tile {
    grid-column: 1;
    grid-row: 3;
    aspect-ratio: 4 / 3;
    margin: 40px 0 -28px; /* down to the bottom of the green band */
  }
}

/* Spinning badge on the corner of the hero photo */
.badge {
  --size: clamp(110px, 11vw, 150px);
  position: absolute;
  left: calc(var(--size) / -2);
  top: calc(var(--size) / -2);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--cream);
}
.badge svg {
  display: block;
  width: 100%;
  height: 100%;
  animation: badge-spin 26s linear infinite;
}
.badge text {
  font-family: var(--font-title);
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--accent-dark);
}
.badge__r {
  position: absolute;
  inset: 31% 36%;
  background: var(--logo-green);
  -webkit-mask: url("../img/logo-r-mark.png") center / contain no-repeat;
  mask: url("../img/logo-r-mark.png") center / contain no-repeat;
}
@keyframes badge-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 760px) {
  .badge {
    --size: 96px;
    left: auto;
    right: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .badge svg {
    animation: none;
  }
}

/* ===========================================================
   HERO BAND
=========================================================== */
/* Dark green strip pulled up over the bottom of the hero photo; holds the
   hero links and separates the hero from the About section. */
.hero-band {
  --band-h: 64px;
  position: relative;
  z-index: 1;
  margin-top: calc(var(--band-h) / -2);
  background: var(--accent-dark);
}
.hero-band__inner {
  height: var(--band-h);
  /* lines the links up with the page's text column */
  padding-left: calc(max(0px, (100vw - 1160px) / 2) + 24px);
  display: flex;
  align-items: center;
  gap: 40px;
}
.hero-band .btn {
  color: var(--on-forest);
  font-weight: 400;
}
.hero-band .btn--ghost {
  color: var(--accent-light);
}
.hero-band .btn:hover {
  color: var(--white);
}
@media (max-width: 760px) {
  .hero-band {
    --band-h: 56px;
  }
  .hero-band__inner {
    gap: 32px;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================
   ABOUT
=========================================================== */
.about__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 860px) {
  .about__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.about__visual {
  display: flex;
  justify-content: center;
}
@media (min-width: 861px) {
  .about__visual {
    margin-top: -60px;
  }
}
.about__frame {
  position: relative;
  width: 240px;
  height: 240px;
}
.about__photo {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
}

.about__content p {
  color: var(--text-soft);
  margin-bottom: 18px;
  max-width: 520px;
}

/* ===========================================================
   SERVICES / FLOW
=========================================================== */
.flow {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
@media (max-width: 860px) {
  .flow {
    flex-direction: column;
    gap: 0;
  }
}

.flow__step {
  flex: 1;
  min-width: 0;
  padding: 22px 6px 0;
}
.flow__num {
  color: var(--accent);
  margin-right: 4px;
}
.flow__step h3 {
  font-family: var(--font-title);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: var(--text);
}
.flow__step p {
  color: var(--text-soft);
  font-size: 1rem;
}
.flow__connector {
  flex: 0 0 36px;
  align-self: flex-start;
  height: 20px;
  margin-top: 25px;
  position: relative;
}
.flow__connector::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 2px;
  background: var(--accent-light);
  transform: translateY(-50%);
}
.flow__connector::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-50%) rotate(-45deg);
}
@media (max-width: 860px) {
  .flow__connector {
    flex-basis: auto;
    width: 20px;
    height: 30px;
    margin: 0 0 0 20px;
  }
  .flow__connector::before {
    left: 50%;
    top: 0;
    width: 2px;
    height: 20px;
    transform: translateX(-50%);
  }
  .flow__connector::after {
    left: 50%;
    top: 18px;
    transform: translateX(-50%) rotate(45deg);
  }
}

/* ===========================================================
   WORK / PORTFOLIO
   Editorial rows: desktop + phone previews that scroll through
   the full page on hover, alternating sides with the text.
=========================================================== */
.work {
  position: relative;
  overflow: hidden;
  background: var(--forest);
  padding: 110px 0 120px;
}
.work > .container {
  position: relative;
  z-index: 1;
}
.work .eyebrow {
  color: var(--accent-light);
}
.work .eyebrow__n,
.work .section__title {
  color: var(--on-forest);
}
.work .section__title {
  margin-bottom: 36px;
}
/* oversized "r." from the logo, bleeding off the right edge */
.work__r {
  position: absolute;
  right: -2vw;
  top: 7%;
  height: 86%;
  aspect-ratio: 312 / 538;
  background: rgba(255, 253, 249, 0.05);
  -webkit-mask: url("../img/logo-r-mark.png") center / contain no-repeat;
  mask: url("../img/logo-r-mark.png") center / contain no-repeat;
  pointer-events: none;
}

/* Project index: big names, preview appears on hover */
.work__index {
  border-top: 1px solid rgba(255, 253, 249, 0.18);
}
.wi__row {
  position: relative;
  display: grid;
  grid-template-columns: 70px auto 1fr 40px;
  align-items: baseline;
  gap: 20px;
  padding: 30px 4px;
  border-bottom: 1px solid rgba(255, 253, 249, 0.18);
  color: var(--on-forest);
}
.wi__n {
  font-family: var(--font-title);
  font-size: 0.95rem;
  color: rgba(255, 253, 249, 0.45);
}
.wi__name {
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 5.6vw, 4.6rem);
  letter-spacing: -0.03em;
  line-height: 1;
  transition: color 0.2s ease;
}
.wi__type {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-light);
  padding-left: 8px; /* sits right after the project name */
}
.wi__arrow {
  font-family: var(--font-title);
  font-size: 1.6rem;
  color: var(--accent-light);
}
.wi__preview {
  position: absolute;
  z-index: 2;
  right: 64px;
  top: 50%;
  width: clamp(220px, 24vw, 320px);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.wi__row:hover .wi__name,
.wi__row:focus-visible .wi__name {
  color: var(--accent-light);
}
.wi__row:hover .wi__preview,
.wi__row:focus-visible .wi__preview {
  opacity: 1;
}
@media (hover: none), (max-width: 760px) {
  .wi__row {
    grid-template-columns: 36px 1fr 28px;
  }
  .wi__type,
  .wi__preview {
    display: none;
  }
}

/* What We Do: same room above it as below it (section padding + divider margin) */
.services {
  padding-top: 100px;
}
@media (max-width: 768px) {
  .services {
    padding-top: 68px;
  }
}

/* The services, in one centered line under the What We Do heading */
.services__list {
  font-family: var(--font-title);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  letter-spacing: 0.02em;
  line-height: 2;
  color: var(--text-soft);
  text-align: center;
  max-width: 820px;
  margin: 6px auto 30px;
}
.services__list span {
  white-space: nowrap;
}
.services__list i {
  font-style: normal;
  font-size: 0.6em;
  vertical-align: middle;
  color: var(--accent);
  padding: 0 0.5em;
}

/* Line between What We Do and Contact, with extra room on both sides */
.divider {
  border: none;
  height: 1px;
  background: var(--accent-light);
  margin: 60px 0;
}
@media (max-width: 768px) {
  .divider {
    margin: 36px 0;
  }
}

/* ===========================================================
   CONTACT
=========================================================== */
.contact {
  position: relative;
  overflow: hidden;
}
.contact__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 44px;
  align-items: flex-start;
}
@media (max-width: 860px) {
  .contact__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.contact__intro p {
  color: var(--text-soft);
  max-width: 440px;
  margin-bottom: 16px;
}
.contact__email {
  display: inline-block;
  font-family: var(--font-title);
  font-size: 1.4rem;
  color: var(--accent-dark);
  border-bottom: 1.5px solid var(--accent-light);
  padding-bottom: 2px;
  margin-bottom: 24px;
  transition:
    color 0.1s ease,
    border-color 0.1s ease;
}
.contact__email:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.social {
  display: flex;
  gap: 14px;
}
.social__icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--white);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.1s var(--ease),
    background 0.1s ease,
    color 0.1s ease;
}
.social__icon svg {
  width: 18px;
  height: 18px;
}
.social__icon:hover {
  background: var(--accent);
  color: var(--white);
  transform: translateY(-3px) rotate(-6deg);
}

.contact__form {
  background: var(--forest);
  padding: 16px 28px 22px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 500px) {
  .contact__form {
    padding: 12px 20px 18px;
  }
}

.field {
  position: relative;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 16px 4px 8px;
  border: none;
  border-bottom: 1.5px solid rgba(255, 253, 249, 0.25);
  background: transparent;
  color: var(--on-forest);
  font-size: 1.08rem;
  transition: border-color 0.3s ease;
  resize: none;
}
.field select {
  appearance: none;
  padding-top: 16px;
  cursor: pointer;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent-light);
}
.field label {
  position: absolute;
  left: 4px;
  top: 16px;
  color: rgba(255, 253, 249, 0.6);
  font-size: 1.08rem;
  pointer-events: none;
  transition:
    top 0.25s ease,
    font-size 0.25s ease,
    color 0.25s ease;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  top: -2px;
  font-size: 0.8rem;
  color: var(--accent-light);
}
.field select:focus ~ .field__label--select,
.field select:valid ~ .field__label--select {
  top: -2px;
  font-size: 0.8rem;
  color: var(--accent-light);
}
.field__label--select {
  position: absolute;
  left: 4px;
  top: 16px;
  color: rgba(255, 253, 249, 0.6);
  font-size: 1.08rem;
  pointer-events: none;
  transition:
    top 0.25s ease,
    font-size 0.25s ease,
    color 0.25s ease;
}

/* Spam trap: hidden from people, still filled in by bots */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.btn--submit:disabled {
  opacity: 0.6;
  cursor: wait;
}
.form__note {
  font-size: 0.95rem;
  color: var(--accent-light);
  text-align: center;
}
.form__note:empty {
  display: none;
}

/* ===========================================================
   FOOTER
=========================================================== */
.footer {
  background: var(--cream-deep);
  padding: 32px 0;
}
.footer__inner {
  max-width: none;
  padding: 0 clamp(24px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.footer__logo img {
  height: 36px;
  width: auto;
}
.footer__links {
  display: flex;
  gap: 26px;
}
.footer__links a {
  font-size: 0.96rem;
  color: var(--text-soft);
  transition: color 0.1s ease;
}
.footer__links a:hover {
  color: var(--accent-dark);
}
.footer__copy {
  font-size: 0.88rem;
  color: var(--text-faint);
}

/* ---------- Back to top ---------- */
.to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    background 0.1s ease,
    visibility 0.2s;
  z-index: 500;
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.to-top:hover {
  background: var(--accent-dark);
}