/* Flow Forge controls: forged edges, ember surfaces and restrained movement. */
.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 58px;
  padding: 17px 26px;
  border: 1px solid #ff8644;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  font-family: var(--display);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .075em;
  line-height: 1.25;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 -1px 0 rgba(0, 0, 0, .8),
    3px 3px 0 #d85218,
    0 15px 34px rgba(0, 0, 0, .28);
  transition: transform .28s cubic-bezier(.22, .7, .25, 1), box-shadow .28s ease, border-color .28s ease, background-position .38s ease;
}

.button::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(112deg, transparent 27%, rgba(255, 255, 255, .18) 48%, transparent 66%);
  transform: translateX(-115%);
  transition: transform .55s cubic-bezier(.22, .7, .25, 1);
}

.button-yellow {
  color: #f7f4ef;
  background: linear-gradient(90deg, #ff7b2f 0 5px, #2a2f31 5px, #15191a 54%, #090b0c 100%);
  background-size: 100% 100%;
  background-position: 0 0;
}

.homepage .hero-actions .button {
  min-height: 56px;
  padding: 16px 24px;
}

.cta-attention {
  animation: cta-attention 16s cubic-bezier(.22, .7, .25, 1) 6s 2;
}

.cta-attention::before {
  animation: cta-attention-sheen 16s cubic-bezier(.22, .7, .25, 1) 6s 2;
}

.cta-attention.is-settled,
.cta-attention.is-settled::before { animation: none; }

@keyframes cta-attention {
  0%, 5%, 100% {
    transform: translate(0, 0);
    border-color: #ff8644;
  }
  2.5% {
    transform: translate(-1px, -2px);
    border-color: #ffc08f;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .8), 4px 5px 0 #d85218, 0 18px 38px rgba(255, 106, 0, .2);
  }
}

@keyframes cta-attention-sheen {
  0%, 1.5% { transform: translateX(-115%); }
  5%, 100% { transform: translateX(115%); }
}

.button-yellow:hover {
  color: #090b0c;
  border-color: #ffc08f;
  background: linear-gradient(118deg, #ffb171 0%, #ff843c 48%, #ef641f 100%);
  background-size: 100% 100%;
  background-position: 100% 0;
  transform: translate(-1px, -3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 -1px 0 rgba(77, 23, 0, .38),
    5px 6px 0 #7e2b0e,
    0 18px 38px rgba(255, 106, 0, .18);
}

.button:hover::before { transform: translateX(115%); }
.button:active {
  transform: translate(2px, 2px);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .34), 1px 1px 0 #a83b11;
  transition-duration: .08s;
}

.button-dark,
.next-page .button {
  color: #f5f3ef;
  border-color: rgba(255, 145, 76, .76);
  background: linear-gradient(90deg, #ff7b2f 0 5px, #2a2f31 5px, #111416 58%, #090b0c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 #000, 3px 3px 0 rgba(126, 43, 14, .92), 0 14px 30px rgba(0, 0, 0, .25);
}

.button-dark:hover,
.next-page .button:hover {
  color: #090b0c;
  border-color: #ffc08f;
  background: linear-gradient(118deg, #ffb171, #ff843c 48%, #ef641f);
  transform: translate(-1px, -3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 5px 6px 0 #7e2b0e, 0 18px 36px rgba(0, 0, 0, .28);
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity: .54;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.text-link {
  position: relative;
  border-bottom: 0;
  padding-bottom: 5px;
  font-family: var(--display);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.text-link::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, #ff7b2f 0 38px, rgba(199, 203, 206, .44) 38px 100%);
  transform-origin: left;
  transition: transform .28s ease, background .28s ease;
}

.text-link:hover { gap: 18px; color: #fff; }
.text-link:hover::after { background: linear-gradient(90deg, #ff9d55 0 100%); transform: scaleX(1.06); }

.header-contact,
.homepage .header-contact {
  min-height: 44px;
  padding: 11px 17px;
  border: 1px solid rgba(174, 183, 186, .4);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  color: #f4f2ef;
  background: linear-gradient(135deg, rgba(39, 44, 46, .92), rgba(13, 16, 17, .95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 7px 18px rgba(0, 0, 0, .18);
  font-family: var(--display);
  font-size: .6875rem;
  letter-spacing: .055em;
  line-height: 1.25;
  text-transform: uppercase;
  transition: color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.header-contact:hover,
.homepage .header-contact:hover {
  color: #ffad70;
  border-color: rgba(255, 151, 78, .72);
  background: linear-gradient(135deg, rgba(47, 52, 54, .96), rgba(17, 20, 21, .98));
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 22px rgba(0, 0, 0, .24);
}

.mobile-contact > a:first-child {
  border: 1px solid rgba(255, 184, 119, .66);
  color: #090b0c;
  background: linear-gradient(118deg, #ff9d55, #ff7428 70%, #e95e1b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
  font-family: var(--display);
  letter-spacing: .035em;
  text-transform: uppercase;
}

html[data-motion-paused="true"] .button,
html[data-motion-paused="true"] .button::before,
html[data-motion-paused="true"] .text-link::after,
html[data-motion-paused="true"] .header-contact { transition: none; }

html[data-motion-paused="true"] .cta-attention,
html[data-motion-paused="true"] .cta-attention::before { animation-play-state: paused; }

@media (max-width: 520px) {
  .button { min-height: 52px; padding: 14px 18px; letter-spacing: .05em; }
  .homepage .hero-actions .button { min-height: 52px; padding: 14px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .button::before,
  .text-link::after,
  .header-contact { transition: none; }
  .button:hover,
  .button-dark:hover,
  .next-page .button:hover,
  .header-contact:hover { transform: none; }
  .button:hover::before { transform: translateX(-115%); }
  .cta-attention,
  .cta-attention::before { animation: none; }
}