/* The outer hit area stays fixed. The clipped ink layer carries its own opaque
   fill so light and dark glyph edges never paint on top of each other. */
.nh-page :is(.nh-button, .nh-round-link), .nh-nav .nh-nav__cta {
  --nh-button-duration: 800ms;
  --nh-button-ease: cubic-bezier(.25, 0, .2, 1);
  --nh-button-return: cubic-bezier(.25, 0, .2, 1);
  --nh-button-fill: #ff6418;
  --nh-button-ink: #101010;
  --nh-fill-x: 50%;
  --nh-fill-y: 50%;
  --nh-fill-radius: 400px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: none;
  transition: border-color var(--nh-button-duration) var(--nh-button-ease), opacity 180ms ease;
  -webkit-tap-highlight-color: transparent;
}
.nh-page :is(.nh-button--orange, .nh-button--outline, .nh-round-link) { --nh-button-fill: #fff; }
.nh-page :is(.nh-button, .nh-round-link)::before, .nh-nav .nh-nav__cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(var(--nh-fill-x) - 1px);
  top: calc(var(--nh-fill-y) - 1px);
  width: calc(var(--nh-fill-radius) * 2);
  height: calc(var(--nh-fill-radius) * 2);
  border-radius: 50%;
  background: var(--nh-button-fill);
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--nh-button-duration) var(--nh-button-ease), opacity 140ms ease;
  pointer-events: none;
}

/* Direct children retain their original flex geometry and accessible labels. */
[data-nh-button-motion] > .nh-button__label,
[data-nh-button-motion] > .nh-button__ink > .nh-button__label {
  display: inline-block;
  transform: translate(var(--nh-label-x, 0px), var(--nh-label-y, 0px));
  transition: transform var(--nh-button-duration) var(--nh-button-return);
}
.nh-page :is(.nh-button, .nh-round-link)[data-nh-button-motion] > .nh-button__ink,
.nh-nav [data-nh-button-motion] > .nh-button__ink {
  position: absolute;
  z-index: 2;
  inset: -1px;
  display: flex;
  justify-content: inherit;
  align-items: center;
  gap: inherit;
  width: auto;
  height: auto;
  padding: inherit;
  border: 1px solid transparent;
  border-radius: inherit;
  margin: 0;
  color: var(--nh-button-ink);
  background: var(--nh-button-fill);
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: inherit;
  transform: none;
  clip-path: circle(0px at var(--nh-fill-x) var(--nh-fill-y));
  transition: clip-path var(--nh-button-duration) var(--nh-button-ease), opacity 140ms ease;
  pointer-events: none;
  user-select: none;
}
.nh-page :is(.nh-button, .nh-round-link)[data-nh-button-motion] > .nh-button__ink::before,
.nh-nav [data-nh-button-motion] > .nh-button__ink::before { content: none; }
/* The enhanced layer paints both fill and text in a single clipping operation.
   The pseudo-element remains the fallback for buttons without JavaScript. */
.nh-page :is(.nh-button, .nh-round-link)[data-nh-button-motion]::before,
.nh-nav .nh-nav__cta[data-nh-button-motion]::before { content: none; }
.nh-page :is(.nh-button, .nh-round-link).is-button-active::before,
.nh-nav .nh-nav__cta.is-button-active::before { transform: translate(-50%, -50%) scale(1); }
.nh-page :is(.nh-button, .nh-round-link)[data-nh-button-motion].is-button-active > .nh-button__ink,
.nh-nav [data-nh-button-motion].is-button-active > .nh-button__ink {
  clip-path: circle(var(--nh-fill-radius) at var(--nh-fill-x) var(--nh-fill-y));
}
[data-nh-button-motion].is-button-tracking > .nh-button__label,
[data-nh-button-motion].is-button-tracking > .nh-button__icon,
[data-nh-button-motion].is-button-tracking > .nh-button__ink > :is(.nh-button__label, .nh-button__icon) {
  transition-duration: 340ms;
}

/* The arrow's pod stays solid while its two glyphs travel through a small window. */
.nh-page :is(.nh-button, .nh-round-link) > span[aria-hidden]:not(.nh-button__ink),
.nh-page .nh-button__ink > .nh-button__icon {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  transform: translate(var(--nh-icon-x, 0px), var(--nh-icon-y, 0px));
  transition: transform var(--nh-button-duration) var(--nh-button-return);
}
.nh-page .nh-button > span[aria-hidden]:not(.nh-button__ink)::before,
.nh-page .nh-button .nh-button__ink > .nh-button__icon::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -6px;
  border-radius: 50%;
  background: #ff6418;
  box-shadow: inset 0 1px 0 #ffffff38, inset 0 -2px 0 #10101014;
  transition: transform var(--nh-button-duration) var(--nh-button-return);
}
.nh-page .nh-button--orange > span[aria-hidden]:not(.nh-button__ink)::before,
.nh-page .nh-button--orange .nh-button__ink > .nh-button__icon::before { background: #fff; }
.nh-page .nh-button .nh-button__icon { color: #101010; }
.nh-page .nh-button .nh-button__ink > .nh-button__icon::before { background: #101010; }
.nh-page .nh-button .nh-button__ink > .nh-button__icon { color: #fff; }
.nh-page .nh-button--orange .nh-button__ink > .nh-button__icon::before { background: #ff6418; }
.nh-page .nh-button--orange .nh-button__ink > .nh-button__icon { color: #101010; }
.nh-button__arrow-window { position: relative; display: block; width: 22px; height: 22px; overflow: hidden; }
.nh-button__arrow-window > svg {
  position: absolute;
  inset: 0;
  width: 22px;
  height: 22px;
  transform: translate(0, 0) rotate(0deg);
  transition: transform var(--nh-button-duration) var(--nh-button-ease);
}
.nh-button__arrow-window > .nh-button__arrow-arriving { transform: translate(-125%, 125%) rotate(-12deg); }
.is-button-active .nh-button__arrow-window > svg { transform: translate(125%, -125%) rotate(12deg); }
.is-button-active .nh-button__arrow-window > .nh-button__arrow-arriving { transform: translate(0, 0) rotate(0deg); }
.nh-page .nh-button.is-button-active .nh-button__icon::before { transform: scale(1.08); }

/* No-JavaScript feedback remains usable; enhancement keeps the base ink stable. */
@media (hover: hover) and (pointer: fine) {
  .nh-page :is(.nh-button, .nh-round-link):hover, .nh-nav .nh-nav__cta:hover { transform: none; }
  .nh-nav .nh-nav__cta:hover { background: #101010; }
  .nh-page :is(.nh-button, .nh-round-link):not([data-nh-button-motion]):not(:disabled):not([aria-disabled="true"]):hover,
  .nh-nav .nh-nav__cta:not([data-nh-button-motion]):not([aria-disabled="true"]):hover { color: #101010 !important; }
  .nh-page :is(.nh-button, .nh-round-link):not([data-nh-button-motion]):not(:disabled):not([aria-disabled="true"]):hover::before,
  .nh-nav .nh-nav__cta:not([data-nh-button-motion]):not([aria-disabled="true"]):hover::before { transform: translate(-50%, -50%) scale(1); transition: none; }
}

.nh-page :is(.nh-button, .nh-round-link):active, .nh-nav .nh-nav__cta:active { transform: none; }
[data-nh-button-motion]:not(:disabled):not([aria-disabled="true"]):active > .nh-button__label,
[data-nh-button-motion]:not(:disabled):not([aria-disabled="true"]):active > .nh-button__ink > .nh-button__label {
  transform: translate(0, 1px);
  transition-duration: 140ms;
}
.nh-page .nh-button:not(:disabled):not([aria-disabled="true"]):active .nh-button__icon::before { transform: scale(.92); }

.nh-page .nh-text-link { position: relative; isolation: isolate; }
.nh-page .nh-text-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 3px; height: 1px;
  background: currentColor;
  opacity: .55;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 650ms cubic-bezier(.22, 1, .36, 1);
}
.nh-page .nh-text-link > span[aria-hidden] { transition: transform 650ms cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine) {
  .nh-page .nh-text-link:hover::after { transform: scaleX(1); }
  .nh-page .nh-text-link:hover > span[aria-hidden] { transform: translate(3px, -3px); }
}
.nh-page :is(.nh-button, .nh-round-link, .nh-text-link):focus-visible,
.nh-nav .nh-nav__cta:focus-visible { outline: 3px solid #bf410b; outline-offset: 5px; }
.nh-page :is(.nh-hero, .nh-work, .nh-footer--quiet) :is(a, button):focus-visible { outline-color: #ffb082; }
.nh-page .nh-footer:not(.nh-footer--quiet) :is(a, button):focus-visible { outline-color: #101010; }

/* Submission state cannot leave moving ink or pointer offsets behind. */
.nh-page :is(.nh-button, .nh-round-link):is(:disabled, [aria-disabled="true"]),
.nh-nav .nh-nav__cta[aria-disabled="true"],
:is(.nh-button, .nh-round-link, .nh-nav__cta):is(:disabled, [aria-disabled="true"]) * {
  transition: none !important;
  animation: none !important;
}
:is(.nh-button, .nh-round-link, .nh-nav__cta):is(:disabled, [aria-disabled="true"])::before,
:is(.nh-button, .nh-round-link, .nh-nav__cta):is(:disabled, [aria-disabled="true"]) > .nh-button__ink {
  opacity: 0 !important;
  transition: none !important;
}
:is(.nh-button, .nh-round-link, .nh-nav__cta):is(:disabled, [aria-disabled="true"]) > :is(.nh-button__label, .nh-button__icon),
:is(.nh-button, .nh-round-link, .nh-nav__cta):is(:disabled, [aria-disabled="true"]) .nh-button__arrow-window > svg {
  transform: none !important;
}
:is(.nh-button, .nh-round-link, .nh-nav__cta):is(:disabled, [aria-disabled="true"]) .nh-button__arrow-arriving { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nh-page :is(.nh-button, .nh-round-link)::before, .nh-nav .nh-nav__cta::before {
    inset: -1px;
    width: auto; height: auto; border-radius: inherit;
    transform: none !important;
    opacity: 0;
    transition: opacity 140ms ease !important;
  }
  .nh-page :is(.nh-button, .nh-round-link)[data-nh-button-motion] > .nh-button__ink, .nh-nav [data-nh-button-motion] > .nh-button__ink {
    clip-path: none;
    opacity: 0;
    transition: opacity 140ms ease !important;
  }
  .nh-page :is(.nh-button, .nh-round-link).is-button-active::before,
  .nh-nav .nh-nav__cta.is-button-active::before,
  .nh-page [data-nh-button-motion].is-button-active > .nh-button__ink,
  .nh-nav [data-nh-button-motion].is-button-active > .nh-button__ink { opacity: 1; }
  [data-nh-button-motion] .nh-button__label,
  [data-nh-button-motion] .nh-button__icon,
  [data-nh-button-motion] .nh-button__icon::before,
  [data-nh-button-motion] .nh-button__arrow-window > svg,
  .nh-page .nh-text-link > span[aria-hidden] { transform: none !important; transition: none !important; }
  [data-nh-button-motion] .nh-button__arrow-arriving { visibility: hidden; }
  .nh-page .nh-text-link::after { transform: none !important; opacity: 0; transition: opacity 140ms ease !important; }
  @media (hover: hover) and (pointer: fine) {
    .nh-page .nh-text-link:hover::after,
    .nh-page :is(.nh-button, .nh-round-link):not([data-nh-button-motion]):not(:disabled):not([aria-disabled="true"]):hover::before,
    .nh-nav .nh-nav__cta:not([data-nh-button-motion]):not([aria-disabled="true"]):hover::before { opacity: 1; }
  }
}