/* =====================================================================
   BUTTON · every live button and link style.
   Legacy Webflow pills: price-btn, story-btn, location-btn-about, faq-btn,
   w-pagination-next, form-button (button-02 16/24 600), service-btn-about
   (button-01 20/28 700), service-explore-btn, nav-try-wrap.
   Native block buttons: vb-btn-primary, vb-ctaglow-btn (lavender), vb-process-cta.
   Native links: vb-shr-cta, vb-ssg-link, vb-fw-context-link, vb-fw-header-link,
   vb-faq-related a, vb-eb-source, inline-link, .hero-image-paragraph a.
   ===================================================================== */

/* ---------- Pill base (legacy button-02: 16/24 600, 10px 25px, radius 100px) ---------- */
.vm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vm-space-2);
  box-sizing: border-box;
  margin: 0;
  padding: 10px 25px;
  border: 0;
  border-radius: var(--vm-radius-button);
  background: transparent;
  color: inherit;
  font: 600 var(--vm-fs-button-02) / var(--vm-lh-button-02) var(--vm-font-body);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--vm-duration) var(--vm-ease), color var(--vm-duration) var(--vm-ease);
}
.vm-button.is-focus { outline: 2px solid var(--vm-focus); outline-offset: 3px; }
.on-dark .vm-button.is-focus { outline-color: var(--vm-focus-on-dark); }

/* Black pill · #000 → #242424 */
.vm-button--black { background-color: var(--vm-night); color: var(--vm-white); }
.vm-button--black:hover,
.vm-button--black.is-hover { background-color: var(--vm-surface-2); }

/* White pill · #fff → #ddd */
.vm-button--white { background-color: var(--vm-white); color: var(--vm-night); }
.vm-button--white:hover,
.vm-button--white.is-hover { background-color: var(--vm-pill-hover-light); }

/* Card CTA size (price-btn): 14px 25px → 52px tall; label carries a trailing → */
.vm-button--card { padding-block: 14px; }

/* Wide submit (form-button): 10px 43px */
.vm-button--wide { padding-inline: 43px; }

/* Large (button-01, service-btn-about): 20/28 700, 22px 33px → 72px tall */
.vm-button--lg {
  padding: 22px 33px;
  font-size: var(--vm-fs-button-01);
  line-height: var(--vm-lh-button-01);
  font-weight: 700;
}

/* Outlined pills (nav-try-wrap metrics): 1px line, 8px 20px, 16/24 600 → 42px */
.vm-button--outline,
.vm-button--outline-on-dark {
  padding: 8px 20px;
  border: var(--vm-border-hair) solid currentColor;
}
.vm-button--outline { color: var(--vm-night); }
.vm-button--outline:hover,
.vm-button--outline.is-hover { background-color: var(--vm-white); }
.vm-button--outline-on-dark { color: var(--vm-white); }
.vm-button--outline-on-dark:hover,
.vm-button--outline-on-dark.is-hover { background-color: var(--vm-night-raised); }

/* Two-line service explore pill (service-explore-btn): live fill #1a1a2e, no hover */
.vm-button--explore {
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 12px 24px;
  background-color: var(--vm-navy-legacy);
  color: var(--vm-white);
  white-space: normal;
}
.vm-button--explore .vm-button__line {
  display: block;
  font: 600 16px/22px var(--vm-font-body);
}

/* Native ink pill (vb-btn-primary, vb-ctaglow-btn on lavender): #131313 → indigo */
.vm-button--ink {
  padding: 18px 36px;
  background-color: var(--vm-black);
  color: var(--vm-white);
  line-height: 20px;
}
.vm-button--ink:hover,
.vm-button--ink.is-hover { background-color: var(--vm-indigo); color: var(--vm-white); }

/* 14px label (vb-ctaglow-btn inherits the 14px Webflow body size) */
.vm-button--sm { font-size: var(--vm-caption); }

/* Label wrapper: keeps "text →" as one run so the arrow sits one space away (not a flex gap) */
.vm-button__label { display: inline; }

/* Quiet note next to a pill (vb-hero-note: "Opens on Vimeo") */
.vm-button-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vm-gap-m); }
.vm-button-note {
  margin: 0;
  color: var(--vm-pencil);
  font: 400 var(--vm-caption) / 20px var(--vm-font-body);
}

/* ---------- Text links with → ---------- */
.vm-link {
  display: inline;                         /* plain text: the underline runs under the → too, as live */
  color: var(--vm-black);
  font: 700 var(--vm-caption) / 1.5 var(--vm-font-body);
  text-decoration: underline;
  text-underline-offset: var(--vm-space-1);
  transition: color var(--vm-duration) var(--vm-ease);
}
.vm-link.is-focus { outline: 2px solid var(--vm-focus); outline-offset: 3px; }
.on-dark .vm-link.is-focus { outline-color: var(--vm-focus-on-dark); }

/* on light (vb-fw-context-link, vb-fw-header-link, vb-faq-related a): live has no hover */
.vm-link--ink:hover,
.vm-link--ink.is-hover { color: var(--vm-black); }

/* on dark (vb-ssg-link): white, #777 underline, hover lavender */
.vm-link--on-dark {
  color: var(--vm-white);
  text-decoration-color: var(--vm-rule-hover-dark);
}
.vm-link--on-dark:hover,
.vm-link--on-dark.is-hover { color: var(--vm-lavender); }

/* lead link (vb-shr-cta): 16px 700, 1px underline, hover lavender (production block, not on a live page) */
.vm-link--lead {
  display: inline-flex;
  align-items: baseline;
  gap: var(--vm-space-2);
  font-size: var(--vm-body);
  line-height: 1.4;
  text-decoration-thickness: 1px;
}
.vm-link--lead.vm-link--on-dark { text-decoration-color: currentColor; }

/* source link (vb-eb-source, editorial): pencil prefix, rule underline, hover indigo */
.vm-link--source {
  display: inline-flex;
  align-items: baseline;
  gap: var(--vm-space-2);
  font-weight: 400;
  text-decoration-color: var(--vm-rule);
}
.vm-link--source .vm-link__prefix { color: var(--vm-pencil-strong); text-decoration: none; }
.vm-link--source:hover,
.vm-link--source.is-hover { color: var(--vm-indigo); }

/* prose links: inline-link (inherit, underline) and the lavender link on dark prose */
.vm-link--inline {
  display: inline;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.vm-link--inline.vm-link--on-dark { color: var(--vm-lavender); text-decoration-color: currentColor; }
/* live prose links have no hover change; the underline is the affordance */

/* ---------- Responsive (live) ---------- */
@media (max-width: 991px) {
  .vm-button--lg { padding-block: 18px; font-size: 18px; line-height: 26px; }
}
@media (max-width: 767px) {
  .vm-button--lg { padding-block: 16px; font-weight: 600; }
}
@media (max-width: 479px) {
  .vm-button--black:not(.vm-button--wide, .vm-button--ink),
  .vm-button--white { font-size: var(--vm-caption); }
  .vm-button--card { padding: 10px 22px; }
  .vm-button--lg { padding-block: 12px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .vm-button, .vm-link { transition: none; }
}