/* ========================================
   BACK TO TOP BUTTON
   ======================================== */

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;

  display: flex;
  width: 56px;
  height: 56px;
  padding: 0;
  align-items: center;
  justify-content: center;

  color: red;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);

  transition:
    opacity 250ms ease,
    visibility 250ms ease,
    transform 250ms ease,
    color 200ms ease,
    background-color 200ms ease;
}

.back-to-top svg {
  display: block;
  width: 56px;
  height: 56px;
}

/* Shown after the visitor scrolls down */
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  fill: red;
  background-color: #C9C6C2;
}

.back-to-top:focus-visible {
  outline: 3px solid rgba(29, 29, 29, 0.35);
  outline-offset: 4px;
}

/* Mobile positioning */
@media screen and (max-width: 767px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
  }
}

/* Removes animation for reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
}

/* ========================================
   MEMBERSHIP LOGO — HOVER EFFECT
   ======================================== */

.logos-memberships {
  position: relative;
  transition:
    transform 300ms ease,
    box-shadow 300ms ease;
  transform-origin: center;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .logos-memberships:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow: 0 4px 8px rgba(17, 17, 17, 0.12);
  }
}

/* Matches the hover effect when the block is keyboard-focused */
.logos-memberships:focus-visible {
  transform: translateY(-6px) scale(1.025);
  box-shadow: 0 16px 32px rgba(17, 17, 17, 0.12);
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Respects reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .logos-memberships {
    transition: box-shadow 200ms ease;
  }

  .logos-memberships:hover,
  .logos-memberships:focus-visible {
    transform: none;
  }
}

/* ========================================
   GOLD GLOW BUTTONS
   Styles Webflow's own button classes, so a button needs no extra
   class to get its hover effect:

     btn-dark      black fill, gold comet around the edge
     btn-gradient  gold gradient fill, light follows the pointer
     btn-keyline   transparent, gold gradient keyline

   Modifiers: is-light (button sits on a light section)
              is-live (comet runs at rest, partner pages)
              no-glow (plain button, effect off)

   The older combo classes still work and can be removed from Webflow
   whenever convenient: glow-btn-light is btn-dark with is-light,
   glow-btn-dark is btn-dark, and glow-btn-primary is btn-gradient.

   buttons.js adds the pointer glow and keeps the comet at a steady
   speed on any button width. Without it, the comet still spins.
   Shared definitions match cards.css and allow independent loading.
   Tuning: --comet-speed (lap time), --head-width (head thickness),
   --glow-ease (hover easing).
   ======================================== */

@property --glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes glow-spin {
  to { --glow-angle: 360deg; }
}

@property --spot {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* ---- Shared by all three types ---- */
.btn-dark,
.glow-btn-dark,
.glow-btn-light,
.btn-gradient,
.glow-btn-gradient,
.glow-btn-primary,
.btn-keyline,
.glow-btn-keyline {
  --comet-speed: 2.5s;
  --glow-ease: cubic-bezier(.37, 0, .63, 1); /* ease-in-out sine */
  --head-width: 3px;
  --tail-width: 1px;
  --keyline-width: 1.5px;
  --btn-fill: #141313;
  --mx: 50%;  /* pointer position, set by buttons.js */
  --my: 100%;
  --spot: 0;  /* pointer glow strength, 0 at rest and 1 on hover */
  --lift: 0 0 0 0 transparent;
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 7px;
  transition:
    --spot .45s var(--glow-ease),
    transform .45s var(--glow-ease),
    box-shadow .45s var(--glow-ease),
    color .45s var(--glow-ease);
}

@media (hover: hover) {
.btn-dark:hover,
.glow-btn-dark:hover,
.glow-btn-light:hover,
.btn-gradient:hover,
.glow-btn-gradient:hover,
.glow-btn-primary:hover,
.btn-keyline:hover,
.glow-btn-keyline:hover {
    --spot: 1;
    transform: scale(1.04);
  }
}

.btn-dark:active,
.glow-btn-dark:active,
.glow-btn-light:active,
.btn-gradient:active,
.glow-btn-gradient:active,
.glow-btn-primary:active,
.btn-keyline:active,
.glow-btn-keyline:active { transform: scale(1.01); }

.btn-dark:focus-visible,
.glow-btn-dark:focus-visible,
.glow-btn-light:focus-visible,
.btn-gradient:focus-visible,
.glow-btn-gradient:focus-visible,
.glow-btn-primary:focus-visible,
.btn-keyline:focus-visible,
.glow-btn-keyline:focus-visible {
  --spot: 1;
  transform: scale(1.04);
  outline: 2px solid #C56129;
  outline-offset: 4px;
}

/* ========================================
   1. BLACK BUTTON: btn-dark
   ======================================== */

.btn-dark,
.glow-btn-dark,
.glow-btn-light {
  --ring-rest: .85;
  --halo-rest: .3;
  --halo-hover: 1;
  --hairline: rgba(255, 252, 248, 0.14);
  background-color: var(--btn-fill);
  background-image:
    radial-gradient(110px circle at var(--mx) var(--my),
      rgb(245 173 89 / calc(0.30 * var(--spot))) 0%,
      rgb(197 97 41 / calc(0.16 * var(--spot))) 45%,
      rgb(197 97 41 / 0) 75%),
    linear-gradient(180deg, rgba(255, 252, 248, 0.07) 0%, rgba(255, 252, 248, 0) 55%);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: #FFFCF8;
}

.btn-dark.is-light,
.glow-btn-dark.is-light,
.glow-btn-light {
  --halo-rest: .15;
  --halo-hover: .6;
  --hairline: rgba(44, 44, 44, 0);
  --lift: 0 6px 18px rgba(197, 97, 41, 0.22), 0 2px 6px rgba(44, 44, 44, 0.12);
}

/* Comet ring. Layers, top to bottom:
   1. head: full ring thickness, short bright arc
   2. cover: repeats the fill, highlight, and pointer glow so the tail
      only shows in the thin outer line
   3. tail: long arc, visible in the thin outer line only */
.btn-dark::before,
.glow-btn-dark::before,
.glow-btn-light::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: var(--tail-width) solid transparent;
  padding: calc(var(--head-width) - var(--tail-width));
  border-radius: inherit;
  background:
    conic-gradient(
      from var(--glow-angle),
      rgba(197, 97, 41, 0) 0%,
      rgba(197, 97, 41, 0) 80%,
      #C56129 90%,
      #F5AD59 97%,
      rgba(245, 173, 89, 0) 98.5%
    ) border-box,
    radial-gradient(110px circle at var(--mx) var(--my),
      rgb(245 173 89 / calc(0.30 * var(--spot))) 0%,
      rgb(197 97 41 / calc(0.16 * var(--spot))) 45%,
      rgb(197 97 41 / 0) 75%) border-box padding-box,
    linear-gradient(180deg, rgba(255, 252, 248, 0.07) 0%, rgba(255, 252, 248, 0) 55%) border-box padding-box,
    linear-gradient(var(--btn-fill), var(--btn-fill)) padding-box,
    conic-gradient(
      from var(--glow-angle),
      rgba(197, 97, 41, 0) 0%,
      rgba(197, 97, 41, 0) 27%,
      rgba(197, 97, 41, 0.35) 32%,
      #C56129 48%,
      #DD9058 75%,
      #F5AD59 97%,
      rgba(245, 173, 89, 0) 98.5%
    ) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--glow-ease);
  animation: var(--orbit-anim, glow-spin) var(--comet-speed) linear infinite paused; /* orbit set by buttons.js */
}

/* Halo that rides with the head, drawn outside the button only */
.btn-dark::after,
.glow-btn-dark::after,
.glow-btn-light::after {
  content: "";
  position: absolute;
  inset: -20px;
  z-index: 1;
  padding: 20px;
  border-radius: 27px; /* 7px button radius + 20px */
  background: conic-gradient(
    from var(--glow-angle),
    rgba(197, 97, 41, 0) 0%,
    rgba(197, 97, 41, 0) 70%,
    rgba(197, 97, 41, 0.5) 88%,
    #F5AD59 97%,
    rgba(245, 173, 89, 0) 99%
  ) content-box;
  filter: blur(8px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--glow-ease);
  animation: var(--orbit-anim, glow-spin) var(--comet-speed) linear infinite paused; /* orbit set by buttons.js */
}

/* is-live: comet runs softly at rest (partner pages) */
.btn-dark.is-live::before,
.glow-btn-dark.is-live::before,
.glow-btn-light.is-live::before {
  opacity: var(--ring-rest);
  animation-play-state: running;
}
.btn-dark.is-live::after,
.glow-btn-dark.is-live::after,
.glow-btn-light.is-live::after {
  opacity: var(--halo-rest);
  animation-play-state: running;
}

@media (hover: hover) {
.btn-dark:hover,
.glow-btn-dark:hover,
.glow-btn-light:hover { box-shadow: inset 0 0 0 1px var(--hairline), var(--lift); }
.btn-dark:hover::before,
.glow-btn-dark:hover::before,
.glow-btn-light:hover::before { opacity: 1; animation-play-state: running; }
.btn-dark:hover::after,
.glow-btn-dark:hover::after,
.glow-btn-light:hover::after { opacity: var(--halo-hover); animation-play-state: running; }
}

.btn-dark:focus-visible,
.glow-btn-dark:focus-visible,
.glow-btn-light:focus-visible { box-shadow: inset 0 0 0 1px var(--hairline), var(--lift); }
.btn-dark:focus-visible::before,
.glow-btn-dark:focus-visible::before,
.glow-btn-light:focus-visible::before { opacity: 1; animation-play-state: running; }
.btn-dark:focus-visible::after,
.glow-btn-dark:focus-visible::after,
.glow-btn-light:focus-visible::after { opacity: var(--halo-hover); animation-play-state: running; }

/* ========================================
   2. GOLD GRADIENT BUTTON: btn-gradient
   White light follows the pointer and a white head runs the edge, so
   it reads the same on dark and light sections.
   The gradient fill here is a fallback; a fill set in Webflow wins and
   the glow still works, because the glow is its own layer on top.
   ======================================== */

.btn-gradient,
.glow-btn-gradient,
.glow-btn-primary {
  background-image: linear-gradient(135deg, #C56129 0%, #F5AD59 100%);
  color: #FFFCF8;
}

.btn-gradient.is-light,
.glow-btn-gradient.is-light,
.glow-btn-primary.is-light {
  --lift: 0 6px 18px rgba(197, 97, 41, 0.22), 0 2px 6px rgba(44, 44, 44, 0.12);
}

/* Pointer glow. It sits on top and lightens with a screen blend, so it
   shows whether the gradient is on the button or on an element inside
   it, and the white label stays white. */
.btn-gradient::after,
.glow-btn-gradient::after,
.glow-btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  mix-blend-mode: screen;
  background: radial-gradient(110px circle at var(--mx) var(--my),
    rgb(255 255 255 / calc(0.42 * var(--spot))) 0%,
    rgb(255 255 255 / calc(0.18 * var(--spot))) 45%,
    rgb(255 255 255 / 0) 75%);
  pointer-events: none;
}

/* White head that runs the edge on hover, matching btn-keyline */
.btn-gradient::before,
.glow-btn-gradient::before,
.glow-btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: var(--keyline-width);
  border-radius: inherit;
  background: conic-gradient(
    from var(--glow-angle),
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 84%,
    #FFFFFF 96%,
    rgba(255, 255, 255, 0) 98.5%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--glow-ease);
  animation: var(--orbit-anim, glow-spin) var(--comet-speed) linear infinite paused; /* orbit set by buttons.js */
}

@media (hover: hover) {
.btn-gradient:hover,
.glow-btn-gradient:hover,
.glow-btn-primary:hover { box-shadow: var(--lift); }
.btn-gradient:hover::before,
.glow-btn-gradient:hover::before,
.glow-btn-primary:hover::before { opacity: 1; animation-play-state: running; }
}
.btn-gradient:focus-visible,
.glow-btn-gradient:focus-visible,
.glow-btn-primary:focus-visible {
  box-shadow: var(--lift);
  outline-color: #F5AD59;
}
.btn-gradient:focus-visible::before,
.glow-btn-gradient:focus-visible::before,
.glow-btn-primary:focus-visible::before { opacity: 1; animation-play-state: running; }

/* ========================================
   3. KEYLINE BUTTON: btn-keyline
   A static gold gradient keyline. On hover a white head runs around
   it, the same motion as the comet on btn-dark.
   ======================================== */

.btn-keyline,
.glow-btn-keyline {
  --keyline-ink: #FFFCF8;
  background-color: transparent;
  color: var(--keyline-ink);
}

.btn-keyline.is-light,
.glow-btn-keyline.is-light { --keyline-ink: #141313; }

/* The keyline: gradient drawn in the border only */
.btn-keyline::before,
.glow-btn-keyline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: var(--keyline-width);
  border-radius: inherit;
  background:
    conic-gradient(
      from var(--glow-angle),
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 84%,
      rgb(255 255 255 / calc(0.95 * var(--spot))) 96%,
      rgba(255, 255, 255, 0) 98.5%
    ) border-box,
    linear-gradient(135deg, #C56129 0%, #F5AD59 100%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: var(--orbit-anim, glow-spin) var(--comet-speed) linear infinite paused; /* orbit set by buttons.js */
}

/* Gold light that follows the pointer inside the button */
.btn-keyline::after,
.glow-btn-keyline::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(110px circle at var(--mx) var(--my),
    rgb(245 173 89 / calc(0.22 * var(--spot))) 0%,
    rgb(197 97 41 / calc(0.12 * var(--spot))) 45%,
    rgb(197 97 41 / 0) 75%);
  pointer-events: none;
}

@media (hover: hover) {
.btn-keyline:hover::before,
.glow-btn-keyline:hover::before { animation-play-state: running; }
}
.btn-keyline:focus-visible::before,
.glow-btn-keyline:focus-visible::before { animation-play-state: running; }

/* ---- no-glow: plain button, effect off ---- */
.btn-dark.no-glow::before,
.glow-btn-dark.no-glow::before,
.glow-btn-light.no-glow::before,
.btn-gradient.no-glow::before,
.glow-btn-gradient.no-glow::before,
.glow-btn-primary.no-glow::before,
.btn-keyline.no-glow::before,
.glow-btn-keyline.no-glow::before,
.btn-dark.no-glow::after,
.glow-btn-dark.no-glow::after,
.glow-btn-light.no-glow::after,
.btn-gradient.no-glow::after,
.glow-btn-gradient.no-glow::after,
.glow-btn-primary.no-glow::after,
.btn-keyline.no-glow::after,
.glow-btn-keyline.no-glow::after { content: none; }
.btn-dark.no-glow,
.glow-btn-dark.no-glow,
.glow-btn-light.no-glow,
.btn-gradient.no-glow,
.glow-btn-gradient.no-glow,
.glow-btn-primary.no-glow,
.btn-keyline.no-glow,
.glow-btn-keyline.no-glow,
.btn-dark.no-glow:hover,
.glow-btn-dark.no-glow:hover,
.glow-btn-light.no-glow:hover,
.btn-gradient.no-glow:hover,
.glow-btn-gradient.no-glow:hover,
.glow-btn-primary.no-glow:hover,
.btn-keyline.no-glow:hover,
.glow-btn-keyline.no-glow:hover { --spot: 0; transform: none; box-shadow: none; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
.btn-dark,
.glow-btn-dark,
.glow-btn-light,
.btn-gradient,
.glow-btn-gradient,
.glow-btn-primary,
.btn-keyline,
.glow-btn-keyline,
.btn-dark:hover,
.glow-btn-dark:hover,
.glow-btn-light:hover,
.btn-gradient:hover,
.glow-btn-gradient:hover,
.glow-btn-primary:hover,
.btn-keyline:hover,
.glow-btn-keyline:hover,
.btn-dark:active,
.glow-btn-dark:active,
.glow-btn-light:active,
.btn-gradient:active,
.glow-btn-gradient:active,
.glow-btn-primary:active,
.btn-keyline:active,
.glow-btn-keyline:active,
.btn-dark:focus-visible,
.glow-btn-dark:focus-visible,
.glow-btn-light:focus-visible,
.btn-gradient:focus-visible,
.glow-btn-gradient:focus-visible,
.glow-btn-primary:focus-visible,
.btn-keyline:focus-visible,
.glow-btn-keyline:focus-visible { transform: none; }
.btn-dark::before,
.glow-btn-dark::before,
.glow-btn-light::before,
.btn-dark::after,
.glow-btn-dark::after,
.glow-btn-light::after,
.btn-gradient::before,
.glow-btn-gradient::before,
.glow-btn-primary::before,
.btn-gradient::after,
.glow-btn-gradient::after,
.glow-btn-primary::after,
.btn-keyline::before,
.glow-btn-keyline::before,
.btn-keyline::after,
.glow-btn-keyline::after { animation: none; }
}