/* ========================================
   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

   Corner radius and border width come from Webflow. A border styled
   there shows in the Designer and turns invisible on the published
   site, while its width still holds the layout, so set it to 1.5px to
   match the 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;
  --btn-radius: 7px; /* only used to round the halo */
  position: relative;
  isolation: isolate;
  /* No border-radius here: the corner radius set in Webflow is kept, and
     the keyline, ring, and halo follow it. Set --btn-radius to match it
     only if the halo's soft corners look off. */
  transition:
    --spot .45s var(--glow-ease),
    transform .45s var(--glow-ease),
    box-shadow .45s var(--glow-ease),
    color .45s var(--glow-ease);
}

/* A border styled in Webflow is a Designer placeholder: its width still
   holds the layout, but its color is hidden here, so the keyline, ring,
   and halo are the only edges on the published site. !important is what
   beats a border set on a Webflow combo class. */
.btn-dark:not(.no-glow),
.btn-gradient:not(.no-glow),
.btn-keyline:not(.no-glow),
.glow-btn-dark:not(.no-glow),
.glow-btn-light:not(.no-glow),
.glow-btn-gradient:not(.no-glow),
.glow-btn-primary:not(.no-glow),
.glow-btn-keyline:not(.no-glow) {
  border-color: transparent !important;
}

@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: calc(var(--btn-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; }
}