/* ==========================================================
   Button hover — 1:1 with cosmos.studio:
   the label fades out letter by letter (left → right), then the same label
   fades back in letter by letter; the background lightens a touch.
   On leave the whole thing plays in reverse (right → left).
   Applied by buttons.js to elements marked [data-fx].
   ========================================================== */
/* ---------- the one button system, exactly as on the main screen ----------
   .pill.pill--accent  black capsule (big, like "Work ↘")
   .pill.pill--ghost   outlined capsule (like "Let's talk")
   .pill--sm           accent capsule with the small label (headers); every button is 60px tall
   .pill--light        white capsule for dark backgrounds
   .pill--block        full width
   .round              60px circle (like the menu button) */
.pill {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  height: 60px; padding: 0 26px;
  border: 1px solid rgba(17, 17, 17, .14); border-radius: 999px;
  background: none; color: #111;
  font-family: "HelveticaNeueCyr", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: .02em; line-height: 1; text-transform: uppercase;
  white-space: nowrap; text-decoration: none; cursor: pointer;
}
.pill--accent {
  min-width: 240px; height: 60px; padding: 0 26px;
  background: #111; border-color: #111; color: #fff;
  font-size: 20px; font-weight: 500;
}
.pill--sm { min-width: 0; height: 60px; padding: 0 26px; font-size: 13px; font-weight: 600; }
.pill--light { background: #fff; border-color: #fff; color: #111; }
.pill--block { display: flex; width: 100%; min-width: 0; }
.pill[disabled] { opacity: .6; cursor: wait; }
/* the one arrow (↘) on every button and link — drawn as an icon, so it is identical in every font and size */
.arr {
  display: inline-block; flex: none; width: 14px; height: 14px;
  overflow: hidden; text-indent: 100%; white-space: nowrap; vertical-align: -1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 6l12 12M8 18h10V8%27/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 6l12 12M8 18h10V8%27/%3E%3C/svg%3E") center / contain no-repeat;
}
/* main screen: phones get "Let's talk" in place of "Pricing" */
.pill--phone { display: none; }
@media (max-width: 820px) {
  .pill--desk { display: none; }
  .pill--phone { display: inline-flex; }
}

/* sticky "Start a project" (cta.js): sits under the menu (z 60) and the contact drawer (z 120) */
.pill.sticky-cta {
  position: fixed; left: 50%; bottom: 24px; z-index: 59;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  opacity: 0; pointer-events: none;
  transform: translate(-50%, 140%);
  transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1), translate .45s cubic-bezier(.22, 1, .36, 1),
              background-color .2s cubic-bezier(.614, .001, .333, .995), border-color .2s cubic-bezier(.614, .001, .333, .995);
}
.pill.sticky-cta.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
/* phones: no sticky pill, it covers the centred buttons at the bottom of the screens */
@media (max-width: 820px) { .pill.sticky-cta { display: none; } }

.round {
  width: 60px; height: 60px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(17, 17, 17, .14); background: none; color: #111;
  display: inline-grid; place-items: center; cursor: pointer;
  transition: background-color .2s cubic-bezier(.614, .001, .333, .995), translate .45s cubic-bezier(.22, 1, .36, 1);
}
.round:hover { background: rgba(17, 17, 17, .07); }

[data-fx] {
  --fx-step: 20ms;          /* delay between letters */
  --fx-dur: 200ms;          /* fade of one letter */
  --fx-gap: 300ms;          /* when the second copy starts */
  --fx-ease: cubic-bezier(.25, .46, .45, .94);
  transition: background-color .2s cubic-bezier(.614, .001, .333, .995), border-color .2s cubic-bezier(.614, .001, .333, .995), translate .45s cubic-bezier(.22, 1, .36, 1);
}

.fx-txt { position: relative; display: inline-block; white-space: pre; }
.fx-a, .fx-b { display: inline-block; }
.fx-b { position: absolute; left: 0; top: 0; }
.fx-l { display: inline-block; transition: opacity var(--fx-dur) var(--fx-ease); }

/* resting state — reached when the pointer leaves: copy B goes first (right → left), then A returns */
.fx-b .fx-l { opacity: 0; transition-delay: calc((var(--n) - 1 - var(--i)) * var(--fx-step)); }
.fx-a .fx-l { opacity: 1; transition-delay: calc(var(--fx-gap) + (var(--n) - 1 - var(--i)) * var(--fx-step)); }

/* hover — copy A fades out (left → right), then B fades in */
[data-fx]:hover .fx-a .fx-l, [data-fx]:focus-visible .fx-a .fx-l {
  opacity: 0; transition-delay: calc(var(--i) * var(--fx-step));
}
[data-fx]:hover .fx-b .fx-l, [data-fx]:focus-visible .fx-b .fx-l {
  opacity: 1; transition-delay: calc(var(--fx-gap) + var(--i) * var(--fx-step));
}

.fx-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* the arrow on every button turns up on hover (↘ to ↗); on a card, hovering the card counts */
.arr { transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) {
  .pill:hover .arr, .wcard:hover .wcard__go .arr, .mcard:hover .mcard__go .arr, .case__thumb:hover .case__view .arr { transform: rotate(-90deg); }
}

/* colours: like cosmos, the button keeps its colours and only lightens slightly */
.pill--accent[data-fx]:hover { background: #2a2a2b; border-color: #2a2a2b; color: #fff; }
.pill--light[data-fx]:hover { background: #e9e9e9; border-color: #e9e9e9; color: #111; }
.pill--ghost[data-fx]:hover { background: rgba(17, 17, 17, .07); color: #111; border-color: rgba(17, 17, 17, .14); }

@media (prefers-reduced-motion: reduce) {
  .fx-l { transition: none !important; }
}

/* ---------- every button rises on hover ----------
   It uses the separate 'translate' property, so it adds to whatever 'transform' a button already has
   (the sticky pill's centring, the close button's turn). Devices with a real pointer only: on touch a hover would stick. */
.burger { transition: translate .45s cubic-bezier(.22, 1, .36, 1); }
.mcard__go { transition: background .3s, color .3s, border-color .3s, translate .45s cubic-bezier(.22, 1, .36, 1); }
.round.talk__close { transition: background-color .2s, transform .5s cubic-bezier(.22, 1, .36, 1), translate .45s cubic-bezier(.22, 1, .36, 1); }
.menu .burger--close { transition: background .3s, color .3s, translate .45s cubic-bezier(.22, 1, .36, 1); }
:where(.pill, .round, .burger) { position: relative; }   /* zero specificity: any position a button already has still wins */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(.pill, .round, .burger):hover,
  .wcard:hover .wcard__go, .mcard:hover .mcard__go, .case__thumb:hover .case__view { translate: 0 -4px; }
  :is(.pill, .round, .burger):active { translate: 0 -1px; }
  /* an invisible strip under the raised button, so a cursor on its lower edge doesn't drop off and make it flicker */
  :is(.pill, .round, .burger):hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 6px; }
}