.cta-wrap{
  display:flex;
  flex-direction:row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  & p{
    display: block;
    text-align:center;
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    color: oklch(from var(--colour-brand) 0.8 0.046 h / 0.8);
    font-family:'Fredoka', sans-serif;
  }
  &:has(.cta--temperature) p{
    color: oklch(from var(--colour-brand) 1 0.07 var(--temperature-col-h) / 0.8);
  }
}

.cta-centre{
  flex-direction:column;
  justify-content: center;
}

.cta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:40px;
    padding:13px 26px;
    font-family:'Poppins', sans-serif;
    font-size:14px;
    font-weight:500;
    color:var(--text-col-200);
    text-decoration:none;
    justify-content:center;
    width:fit-content;
    border:none;
    box-shadow: 0 0 0 2px oklch(from var(--colour-brand) l c h / 0.8);
    border-radius:100px;
    white-space: nowrap;
  }
  .cta.cta--glow{
    border:none;
    box-shadow: 0 0 0 2px oklch(from var(--colour-brand) l c h / 0.8),
                0 0 24px oklch(from var(--colour-brand) l c h / 0.38);
  }

  .cta.cta--temperature{
    border:none;
    box-shadow: 0 0 0 2px oklch(from var(--colour-brand) 0.8 c var(--temperature-col-h) / 0.8);
  }
  .cta.cta--temperature.cta--glow{
    border:none;
    box-shadow: 0 0 0 2px oklch(from var(--colour-brand) 0.8 c var(--temperature-col-h) / 0.8),
                0 0 24px oklch(from var(--colour-brand) 0.8 c var(--temperature-col-h) / 0.48);
  }
  .cta:hover, .cta.cta--glow:hover{
    border:none;
    box-shadow: 0 0 0 2px oklch(from var(--colour-brand) l c h / 1),
                0 0 24px oklch(from var(--colour-brand) l c h / 0.88);
    background:rgba(126,217,87,0.05);
  }
  .cta.cta--temperature:hover, .cta.cta--temperature.cta--glow:hover{
    border:none;
    box-shadow: 0 0 0 2px oklch(from var(--colour-brand) 0.8 c var(--temperature-col-h) / 1),
                0 0 24px oklch(from var(--colour-brand) 0.8 c var(--temperature-col-h) / 0.88);
    background:rgba(126,217,87,0.05);
  }
  
  .cta svg{ width:14px; height:14px; transition:transform 250ms ease; }
  .cta:hover svg{ transform:translateX(2px); }

  @keyframes rise{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:translateY(0); }
  }

  .cta.bold{
    font-weight:400;
    background: oklch(from var(--colour-brand) 0.4 c h / 0.6);
    border: none;
    color: white;
    &:hover{
      border-color:oklch(from var(--colour-brand) l c h / 1);
    }
  }
  .cta.cta--temperature.bold{
    font-weight:400;
    background: oklch(from var(--colour-brand) 0.4 c var(--temperature-col-h) / 0.6);
    border: none;
    color: white;
    &:hover{
      border-color:oklch(from var(--colour-brand) l c var(--temperature-col-h) / 1);
    }
  }

/* ============================================================================
  Back to Top Button
  ============================================================================ */

.back-to-top-button {
  opacity: 0;
  pointer-events: none;
  position: fixed;
  bottom: 20px;
  right: 40px;
  width: 40px;
  height: 40px;
  background-color: oklch(from white l c h / 0.1);
  color: var(--colour-text);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: 0.3s;
  font-weight: 600;
  box-shadow: 0px 0px 0px 2px oklch(from white l c h / 0.3);

  animation-name: back-to-top-appear;
  animation-duration: auto;
  animation-timing-function: ease;
  animation-fill-mode: both;
  animation-timeline: scroll(root);
  animation-range: 50vh calc(50vh + 120px);
}

@keyframes back-to-top-appear {
  from {
    opacity: 0;
    pointer-events: none;
  }
  to {
    opacity: 1;
    pointer-events: auto;
  }
}

/* From Uiverse.io by waliddu001 */ 
.back-to-top-button {
  cursor: pointer;
  overflow: hidden;
}

.svgIcon {
  width: 12px;
  transition-duration: 0.3s;
}

.svgIcon path {
  fill: oklch(from white l c h / 0.5);
}

.back-to-top-button:hover {
  width: 140px;
  border-radius: 50px;
  transition-duration: 0.3s;
  background-color: oklch(from white l c h / 0.3);
  box-shadow: 0px 0px 0px 2px oklch(from white l c h / 1);

  align-items: center;
}

.back-to-top-button:hover .svgIcon {
  /* width: 20px; */
  transition-duration: 0.3s;
  transform: translateY(-200%);
}

.back-to-top-button::before {
  position: absolute;
  bottom: -20px;
  content: "Back to Top";
  color: white;
  /* transition-duration: .3s; */
  font-size: 0px;
}

.back-to-top-button:hover::before {
  font-size: 13px;
  opacity: 1;
  bottom: unset;
  /* transform: translateY(-30px); */
  transition-duration: 0.3s;
}

@media (width <= 480px) {
  .back-to-top-button {
    display: none;
  }
}