@import url("../brand-labels.css");
/* Shared action buttons. Their layout footprint never changes on hover. */
:root { --fl-main-cta-height: 48px; --fl-corner-radius: 7px; --fl-cta-frame-radius: 9px; }
.fl-action-button {
  --fl-button-background: #1c2430;
  --fl-button-foreground: #ffe9dc;
  --fl-button-gap: 5px;
  --fl-button-border-width: 0px;
  --fl-button-border-color: transparent;
  --fl-button-shadow: none;
  --fl-button-travel: 6px;
  --fl-button-padding: 14px 14px 14px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  max-width: 100%;
  padding: var(--fl-button-padding);
  border-style: solid;
  border-width: var(--fl-button-border-width);
  border-radius: var(--fl-corner-radius);
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  overflow: visible;
  gap: var(--fl-button-gap);
  background: transparent;
  border-color: transparent;
  color: var(--fl-button-foreground);
  transform: none;
  transition: none;
  text-decoration: none;
}

.fl-action-button:hover {
  background: transparent;
  color: var(--fl-button-foreground);
  transform: none;
}

.fl-action-button-surface {
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--fl-button-border-width));
  border: var(--fl-button-border-width) solid var(--fl-button-border-color);
  border-radius: inherit;
  background: var(--fl-button-background);
  background-clip: padding-box;
  box-shadow: var(--fl-button-shadow);
  transition: left .28s ease, right .28s ease, box-shadow .2s ease;
}

.fl-action-button-label,
.fl-action-button-icon {
  position: relative;
  flex-shrink: 0;
  transform: none;
  transition: transform .28s ease;
}

.fl-action-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  line-height: 1;
}

.fl-action-button-icon > svg { display: block; width: 18px; height: 18px; }
.fl-action-button--header {
  --fl-button-padding: 11px 14px 11px 22px;
  font-weight: 500;
  box-sizing: border-box;
  height: calc(var(--fl-main-cta-height) - 6px);
  border-radius: calc(var(--fl-corner-radius) + (21px - var(--fl-corner-radius)) * var(--fl-header-progress, 0));
  transition: border-radius .32s ease;
}
.fl-action-button--header:hover { border-radius: calc(var(--fl-corner-radius) + (21px - var(--fl-corner-radius)) * var(--fl-header-progress, 0)); }
.fl-action-button[data-fl-button-size="compact"] { --fl-button-padding: 6px 10px; font-size: 12px; }
.fl-action-button[data-fl-button-size="small"] { --fl-button-padding: 12px 14px; font-size: 14px; }
.fl-action-button[data-fl-button-wrap] .fl-action-button-label { flex-shrink: 1; white-space: normal; text-align: center; }

/* Preserve the existing guest/account visibility contract. */
.fl-action-button.mk-cta-account,
html[data-signed-in="1"] .fl-action-button.mk-cta-guest { display: none; }
html[data-signed-in="1"] .fl-action-button.mk-cta-account { display: inline-flex; }

.fl-action-button.bg-paper { --fl-button-background: var(--paper); }
.fl-action-button.bg-card { --fl-button-background: var(--card); }
.fl-action-button.bg-lav,
.fl-action-button[class~="bg-[rgb(var(--lavender))]"],
.theme-dark .fl-action-button[class~="dark:bg-lav"] {
  --fl-button-background: #FFE9DC;
  --fl-button-foreground: #1c2430;
}

.fl-action-button.text-ink,
.fl-action-button[class~="!text-ink"] { --fl-button-foreground: var(--ink); }
.mk-hero-home .fl-action-button { --fl-button-foreground: #FFE9DC; }
.fl-bottom-cta .fl-action-button { --fl-button-foreground: #FFE9DC; }
.mk-hero-home .fl-action-button {
  box-sizing: border-box;
  height: calc(var(--fl-main-cta-height) + 2 * var(--fl-button-border-width));
}
.fl-action-button.border { --fl-button-border-width: 1px; }
.fl-action-button[class~="border-ink/10"] { --fl-button-border-color: rgb(28 36 48 / .1); }
.fl-action-button.mk-cta-ring {
  --fl-button-border-width: 8px;
  --fl-button-border-color: #ebece9;
  border-color: transparent;
  border-radius: var(--fl-cta-frame-radius);
}
.fl-action-button.mk-cta-ring > .fl-action-button-surface {
  border: 0;
  background: var(--fl-button-border-color);
  background-clip: border-box;
}
.fl-action-button.mk-cta-ring > .fl-action-button-surface::after {
  content: '';
  position: absolute;
  inset: var(--fl-button-border-width);
  border-radius: var(--fl-corner-radius);
  background: var(--fl-button-background);
}
.fl-action-button.shadow-panel { --fl-button-shadow: var(--panel-shadow); box-shadow: none; }
.fl-action-button.fl-contact-cta { --fl-button-background: #000; --fl-button-foreground: #ffe9dc; }

/* The reveal finishes with a static site-background-to-peach text gradient. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .mk-hero-home .fl-action-button-label,
  .fl-bottom-cta .fl-action-button-label {
    background-image: linear-gradient(90deg, var(--paper, #f6f7f5), var(--fl-button-foreground));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    .mk-hero-home .fl-action-button-label {
      mask-image: linear-gradient(90deg, #000 0% 50%, transparent 50% 100%);
      mask-size: 200% 100%;
      mask-position: 0% 0;
      mask-repeat: no-repeat;
      animation: fl-hero-label-reveal 1.1s ease-out .12s both;
    }
    .mk-hero-home .fl-action-button:focus-visible .fl-action-button-label { animation: none; mask-image: none; }
  }
}

@keyframes fl-hero-label-reveal {
  from { mask-position: 100% 0; }
  to { mask-position: 0% 0; }
}

@media (hover: hover) and (pointer: fine) {
  .fl-action-button--body:hover .fl-action-button-surface {
    right: calc(-1 * (var(--fl-button-border-width) + var(--fl-button-travel)));
  }
  .fl-action-button--body:hover .fl-action-button-icon {
    transform: translateX(var(--fl-button-travel));
  }
  .fl-action-button--header:hover .fl-action-button-surface {
    left: calc(-1 * (var(--fl-button-border-width) + var(--fl-button-travel)));
  }
  .fl-action-button--header:hover .fl-action-button-label {
    transform: translateX(calc(-1 * var(--fl-button-travel)));
  }
  .fl-action-button.shadow-panel:hover { --fl-button-shadow: var(--panel-shadow-hover); box-shadow: none; }
}

@media (max-width: 700px) {
  .fl-action-button--header { --fl-button-padding: 11px 14px 11px 12px; }
}

@media (min-width: 701px) and (max-width: 1200px) {
  .fl-action-button--header { --fl-button-padding: 11px 14px 11px 16px; }
}

@media (max-width: 899px) {
  .fl-action-button[data-fl-button-desktop-only] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fl-action-button--header,
  .fl-action-button-surface,
  .fl-action-button-label,
  .fl-action-button-icon { transition: none; }
}

/* Light/colored buttons retain ink labels; dark buttons share the hero gradient. */
.fl-action-button:is(.bg-paper, .bg-card, .bg-lav, [class~="bg-[rgb(var(--lavender))]"]) .fl-gradient-label,
.theme-dark .fl-action-button[class~="dark:bg-lav"] .fl-gradient-label,
#agents .fl-action-button .fl-gradient-label {
  background-image: none;
  color: var(--fl-button-foreground);
  -webkit-text-fill-color: currentColor;
}