/* ==========================================================================
   SAN Media Solution — calls to action
   One treatment for every button: white with black type at rest; under the
   pointer (or a finger) a black fill sweeps in from the right and the type
   turns white; on leaving, the fill sweeps back out. The type inverts by
   blending against whatever is under it, so it reads at every point of the
   sweep. Loaded last, so it has the final word over each section's own
   button styles.
   ========================================================================== */

/* the fill needs a positioned box; each section's own positioning (absolute
   on the wide boards, in the flow when stacked) must win, so this carries no
   specificity at all */
:where(.pill, .tier__btn, .svc-card__go, .card__go, .tail__go) { position: relative; }
.pill,
.tier__btn,
.svc-card__go,
.card__go,
.tail__go {
  isolation: isolate;
  overflow: hidden;
  background: #fff;
  color: #0a0a0a;
  --sweep: .62s cubic-bezier(.65, 0, .15, 1);
}
.pill { border: 1.5px solid #0a0a0a; box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
/* the hero's pills are placed with offsets on the wide artboard; in the
   stacked layouts they sit in the flow, so those offsets must not apply */
@media (max-width: 1080px) {
  .pill--lg, .pill--sm { inset: auto; }
  /* the arrows' stroke follows each section's artboard unit, which is a
     fraction of a pixel on a phone; keep it a visible line there */
  .pill svg { stroke-width: 1.6px; }
}
.tier__btn { border-color: #0a0a0a; box-shadow: none; }
.tail__go, .svc-card__go, .card__go { border-color: currentColor; }

/* the fill, waiting just past the right edge */
.pill::before,
.tier__btn::before,
.svc-card__go::before,
.card__go::before,
.tail__go::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  background: #0a0a0a;
  transform: translate3d(101%, 0, 0);
  transition: transform var(--sweep);
  pointer-events: none;
}
/* under the pointer, a finger or the keyboard, it sweeps across */
.pill:hover::before, .pill:focus-visible::before, .pill:active::before,
.tier__btn:hover::before, .tier__btn:focus-visible::before, .tier__btn:active::before,
.svc-card__go:hover::before, .svc-card__go:focus-visible::before, .svc-card__go:active::before,
.card__link:hover .card__go::before, .card__link:focus-visible .card__go::before,
.tail__cta:hover .tail__go::before, .tail__cta:focus-visible .tail__go::before {
  transform: translate3d(0, 0, 0);
}

/* the type and the arrow ride above the fill and invert against it */
.pill > *, .tier__btn > *, .svc-card__go > *, .card__go > *, .tail__go > * {
  position: relative;
  z-index: 1;
  color: #fff;
  mix-blend-mode: difference;
}
.pill svg, .tier__btn svg, .svc-card__go svg, .card__go svg, .tail__go svg { stroke: #fff; fill: none; }

/* the rest of each button's behaviour stays: a small lift under the pointer */
.pill:hover, .pill:focus-visible { box-shadow: 0 10px 26px rgba(0, 0, 0, .14); }
.tier__btn:hover, .tier__btn:focus-visible { background: #fff; color: #0a0a0a; box-shadow: none; }
.tier__btn--dark, .tier__btn--dark:hover, .tier__btn--dark:focus-visible { background: #fff; color: #0a0a0a; border-color: #0a0a0a; box-shadow: none; }
.tail__cta:hover .tail__go, .tail__cta:focus-visible .tail__go { background: #fff; color: #0a0a0a; }
.svc-card__go:hover, .svc-card__go:focus-visible { border-color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .pill::before, .tier__btn::before, .svc-card__go::before, .card__go::before, .tail__go::before { transition: none; }
}

/* ── navigation: a small lift and settle, once, on the item touched ─────── */
.nav a > span { display: inline-block; will-change: transform; }
.nav a.is-bob > span { animation: nav-bob .56s cubic-bezier(.22, .61, .18, 1) 1 both; }
@keyframes nav-bob {
  0%   { transform: translate3d(0, 0, 0); }
  38%  { transform: translate3d(0, -0.28em, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav a.is-bob > span { animation: none; }
}

/* ── WhatsApp, floating at the bottom right of every screen ────────────── */
.wa {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22), 0 0 0 0 rgba(37, 211, 102, .35);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s;
  -webkit-tap-highlight-color: transparent;
}
.wa svg { width: 32px; height: 32px; fill: currentColor; }
.wa:hover, .wa:focus-visible { transform: translateY(-2px) scale(1.06); box-shadow: 0 12px 28px rgba(0, 0, 0, .26), 0 0 0 8px rgba(37, 211, 102, .18); }
.wa:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 720px) {
  .wa { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; }
  .wa svg { width: 28px; height: 28px; }
}
/* while the deck is pinned (deck.js) the button steps aside: every slide's
   foot row — Start a Project, the statistics — sits where it floats */
.wa { transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s, opacity .35s; }
.is-deck-pinned .wa { opacity: 0; transform: translateY(24px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .wa { transition: none; } }

/* ── touch targets ──────────────────────────────────────────────────────
   Under a finger every small control — the arrow rings, the strip and reel
   arrows, the row arrows, the Instagram marks, the chips, the text links,
   the navigation — answers to a larger, invisible area around it (about
   44px), while the drawn control itself does not change. The area is a
   pseudo-element positioned against the control, so nothing moves; each
   takes the one the control does not already use for its sweep or its
   underline. Controls that sit in the flow get `position: relative` for it;
   the ones placed on the wide boards are positioned already, and the three
   Clients arrows, in the flow only on stacked layouts, get it there. */
@media (pointer: coarse) {
  .git__go, .c-go, .watch, .tail__cta, .chip, .pf-index a, .pf-rail__btn, .wt-item__ig, .pf-light__close, .pf-light__nav, .pf-end__back, .pf-foot a { position: relative; }
  .wcard__go::after, .git__go::after, .cl-strip__btn::after, .cl-count__btn::after, .cl-foot__btn::after,
  .pf-rail__btn::after, .wt-item__ig::after, .pf-light__close::after, .pf-light__nav::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
  .c-go::after, .heads__watch::after, .watch::after, .cl-media__go::after, .tail__cta::after { content: ""; position: absolute; inset: -6px -4px; }
  .pf-end__back::after, .pf-foot a::after { content: ""; position: absolute; inset: -14px -4px; }
  .chip::before, .pf-index a::after { content: ""; position: absolute; inset: -4px 0; }
  .nav a::before { content: ""; position: absolute; inset: -15px -8px; }
  @media (max-width: 1080px) {
    .cl-strip__btn, .cl-strip__btn--prev, .cl-strip__btn--next, .cl-count__btn, .cl-count__btn[data-prev], .cl-count__btn[data-next],
    .cl-foot__btn, .cl-foot__btn[data-prev], .cl-foot__btn[data-next] { position: relative; inset: auto; z-index: 1; }   /* the wide board's offsets must not wake; the area rides over the slide's edge */
    .cl-foot__nav, .pf-rail__nav { gap: 16px; }   /* two arrows side by side: their areas meet, never overlap */
    /* the service arrows clip their sweep, so their area cannot grow past
       them: on stacked layouts the ring itself is a finger's size */
    .svc-card__go { width: 40px; height: 40px; }
  }
}