/* buttons.css — ONE button for the whole site. Load last.
 *
 * Why this file exists (2026-08-13):
 *
 * 1. The nav CTA ("Let's talk") was the Webflow template's three-layer button:
 *    the anchor clips at radius 10, `.button-main-color` is a near-white plate
 *    scaled to 0.88 inside it, and `.button-overlay` is a dark ELLIPSE (radius
 *    200%) that GSAP slides up to fill it. An ellipse cannot cover a rounded
 *    rectangle's corners, so the pale plate stayed visible at all four corners —
 *    the "weird corners" in the screenshot. The plate and the ellipse are killed
 *    here; the anchor itself carries the fill, so there is nothing left to leak.
 *
 * 2. The site had four different buttons: nav CTA (123x50, r10), `.pk-wwd__cta`
 *    (137x64, r6.41), `.footer-cta` (r-pill, 15px) and `.pk-cta` (r-pill,
 *    14.4px). They are now one shape, one height, one type size, one hover.
 *
 * Every button is a pill in one of two grounds:
 *    .pk-btn--ink    dark pill,  light label  -> use on light backgrounds
 *    .pk-btn--paper  light pill, dark label   -> use on dark backgrounds
 * Hover is the same move in both: the fill drops out and the pill becomes a
 * 1px outline of its own colour.
 *
 * Dial the whole system from the four variables below. */

:root {
  --btn-h: 46px;
  --btn-pad-x: 22px;
  --btn-radius: 999px;
  --btn-size: 15px;

  --btn-ink: #1a1a1a;
  --btn-paper: #ffffff;
}

@media screen and (max-width: 991px) {
  :root { --btn-h: 44px; --btn-pad-x: 20px; }
}

/* ── the one shape ────────────────────────────────────────────────────────
   The selectors are doubled / tag-qualified on purpose: each of these buttons
   already carries rules in styles.css, insights.css, what-we-do-v2.css and
   process-v2.css, some of them at two and three classes deep. This file has to
   out-specify all of them from one place. */

.pk-btn.pk-btn,
a.nav-link.for-button,
.pk-ps__foot a.nav-link.for-button,
a.footer-cta.footer-cta,
.pk-ins a.footer-cta,
a.pk-cta.pk-cta,
.pk-ins a.pk-cta,
a.pk-wwd__cta.pk-wwd__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  box-sizing: border-box;
  width: auto;
  min-width: 0;
  height: var(--btn-h);
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  flex: 0 0 auto;

  border: 0;
  border-radius: var(--btn-radius);
  box-shadow: inset 0 0 0 1px transparent;

  font-family: var(--font--third-font, "Switzer Variable", Arial, sans-serif);
  font-size: var(--btn-size);
  font-weight: 500;
  letter-spacing: -0.15px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;

  overflow: visible;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

/* the icon that rides in some of them */
.pk-btn svg,
a.nav-link.for-button svg,
a.footer-cta svg,
a.pk-cta svg,
a.pk-wwd__cta svg,
.pk-wwd__arrow {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

/* ── ground A: dark pill on a light page ─────────────────────────────────── */

.pk-btn--ink.pk-btn--ink,
a.pk-cta.pk-cta,
.pk-ins a.pk-cta {
  background-color: var(--btn-ink);
  color: var(--btn-paper);
}

.pk-btn--ink.pk-btn--ink:hover,
.pk-btn--ink.pk-btn--ink:focus-visible,
a.pk-cta.pk-cta:hover,
a.pk-cta.pk-cta:focus-visible,
.pk-ins a.pk-cta:hover,
.pk-ins a.pk-cta:focus-visible {
  background-color: transparent;
  color: var(--btn-ink);
  box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.4);
}

/* ── ground B: light pill on a dark page ─────────────────────────────────── */

.pk-btn--paper.pk-btn--paper,
a.footer-cta.footer-cta,
.pk-ins a.footer-cta,
a.pk-cta.pk-cta--invert,
.pk-ins a.pk-cta--invert,
a.pk-wwd__cta.pk-wwd__cta {
  background-color: var(--btn-paper);
  color: var(--btn-ink);
}

.pk-btn--paper.pk-btn--paper:hover,
.pk-btn--paper.pk-btn--paper:focus-visible,
a.footer-cta.footer-cta:hover,
a.footer-cta.footer-cta:focus-visible,
.pk-ins a.footer-cta:hover,
a.pk-cta.pk-cta--invert:hover,
a.pk-cta.pk-cta--invert:focus-visible,
.pk-ins a.pk-cta--invert:hover,
a.pk-wwd__cta.pk-wwd__cta:hover,
a.pk-wwd__cta.pk-wwd__cta:focus-visible {
  background-color: transparent;
  color: var(--btn-paper);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.pk-wwd__cta:hover .pk-wwd__arrow,
.pk-wwd__cta:focus-visible .pk-wwd__arrow { transform: translate(2px, -2px); }

/* ── the nav CTA: strip the template's three-layer plate ──────────────────
   `.button-main-color` (the pale plate that showed at the corners) and
   `.button-overlay` (the ellipse) are gone. motion.js still tweens them on the
   homepage; tweening a display:none element is free, and the `!important` on
   the label colour is what beats the inline colour GSAP writes there. */

a.nav-link.for-button .button-main-color,
a.nav-link.for-button .button-overlay {
  display: none !important;
}

a.nav-link.for-button .button-text {
  color: inherit !important;
  width: auto !important;
  transform: none !important;
  position: relative;
  z-index: 1;
}

/* The nav CTA's ground follows the nav's own light/dark state — see
   nav-contrast.css. On a light page it is the dark pill; over a dark section it
   flips to the light one, in step with the links beside it. */
a.nav-link.for-button {
  background-color: var(--nav-btn-bg, var(--btn-ink));
  color: var(--nav-btn-ink, var(--btn-paper));
}

a.nav-link.for-button:hover,
a.nav-link.for-button:focus-visible {
  background-color: transparent;
  color: var(--nav-btn-bg, var(--btn-ink));
  box-shadow: inset 0 0 0 1px var(--nav-btn-ring, rgba(26, 26, 26, 0.4));
}