@layer tt-teal-buttons, tt-button-interactions;
:root {
  --tt-hover-duration: 0.3s;
  --tt-hover-easing: cubic-bezier(.2, .65, .3, 1);
  --tt-hover-properties: color, background-color, border-color, box-shadow, opacity, transform, translate, filter, fill, stroke, text-decoration-color;
}
/* Important layer keeps intentional interactions above legacy static page rules. */
@layer tt-button-interactions {
  html body :is(.tt-contact-submit, #tt-home-contact button[type="submit"]) {
    background: #12646c !important;
    color: #fff !important;
    box-shadow: none !important;
    transition: background-color 300ms ease, color 300ms ease !important;
  }
  html body :is(.tt-contact-submit, #tt-home-contact button[type="submit"]):not(:disabled):is(:hover, :focus-visible) {
    background: #000 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    filter: none !important;
  }
  html body :is(.tt-contact-submit, #tt-home-contact button[type="submit"]) :is(svg, i) {
    color: #fff !important;
    transform: translateX(0) !important;
    transition: transform 300ms ease !important;
  }
  html body :is(.tt-contact-submit, #tt-home-contact button[type="submit"]):not(:disabled):is(:hover, :focus-visible) :is(svg, i) {
    transform: translateX(4px) !important;
  }
  html body .tt-manufacturing-page .tt-step {
    --tt-hover-duration: 360ms;
    transform: translateY(0) !important;
    transition: transform 360ms cubic-bezier(.22, 1, .36, 1) !important;
  }
  html body .tt-button-motion {
    translate: none;
    transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease, filter 300ms ease !important;
  }
  @media (hover: hover) and (pointer: fine) {
    html body .tt-manufacturing-page .tt-step:hover { transform: translateY(-5px) !important; }
    html body .tt-button-hover-fallback:not(:disabled):not(.disabled):not([aria-disabled="true"]):hover { filter: brightness(.92) !important; }
  }
  html body .tt-button-yellow:not(:disabled):not(.disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) {
    background: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    filter: none !important;
  }
  html body .tt-button-yellow:not(:disabled):not(.disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
  @media (prefers-reduced-motion: reduce) {
    html body :is(.tt-contact-submit, #tt-home-contact button[type="submit"]),
    html body :is(.tt-contact-submit, #tt-home-contact button[type="submit"]) :is(svg, i),
    html body :is(.tt-contact-submit, #tt-home-contact button[type="submit"]):not(:disabled):is(:hover, :focus-visible) :is(svg, i) { transform: none !important; transition: none !important; }
    html body .tt-manufacturing-page .tt-step,
    html body .tt-manufacturing-page .tt-step:hover { transform: none !important; transition: none !important; }
    html body .tt-button-motion,
    html body .tt-button-motion:not(:disabled):not(.disabled):not([aria-disabled="true"]):hover { translate: none; transition: none !important; }
  }
}
html body .tt-hover-smooth,
html body .tt-hover-smooth::before,
html body .tt-hover-smooth::after {
  transition-property: var(--tt-hover-properties) !important;
  transition-duration: var(--tt-hover-duration) !important;
  transition-timing-function: var(--tt-hover-easing) !important;
  transition-delay: 0s !important;
}
@media (prefers-reduced-motion: reduce) {
  :root { --tt-hover-duration: 0s; }
}