/* ==========================================================================
   Ways to reach the studio
   A WhatsApp button that stays on screen wherever you are on the site, and
   a row of four in the footer — call, WhatsApp, email, Instagram.

   Every icon carries its own colour at rest rather than only on hover: on a
   phone there is no hover, and an icon that only comes to life under a mouse
   is a dead icon to most of the people who will see it.
   ========================================================================== */

/* ── The button that follows you ───────────────────────────────────────── */
.wa-float {
  position: fixed;
  right: clamp(.85rem, 2vw, 1.7rem);
  bottom: clamp(.85rem, 2vw, 1.7rem);
  /* Above the page and the header, below the mobile drawer, so an open menu
     is never fighting it. */
  z-index: 1050;
  display: grid;
  place-items: center;
  width: clamp(52px, 6.4vw, 60px);
  height: clamp(52px, 6.4vw, 60px);
  border-radius: 50%;
  background: linear-gradient(145deg, #2BE06E 0%, #25D366 42%, #0F8A6B 100%);
  color: #fff;
  box-shadow: 0 14px 34px -10px rgba(15, 138, 107, .75),
              0 3px 10px rgba(0, 0, 0, .32);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1),
              box-shadow .4s cubic-bezier(.22, 1, .36, 1);
}
.wa-float svg { width: 54%; height: 54%; fill: currentColor; display: block; }

/* A ring that breathes out of the button, so the eye finds it without it
   having to shout. */
.wa-float::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(37, 211, 102, .55);
  z-index: -1;
  animation: waPulse 2.6s cubic-bezier(.22, 1, .36, 1) infinite;
}
@keyframes waPulse {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}
.wa-float:hover, .wa-float:focus-visible {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 20px 44px -10px rgba(15, 138, 107, .9),
              0 4px 14px rgba(0, 0, 0, .38);
  color: #fff;
}
/* The label slides out from behind the button on a pointer device. */
.wa-float__tip {
  position: absolute; right: calc(100% + .6rem);
  white-space: nowrap;
  padding: .5rem .8rem;
  border-radius: 8px;
  background: rgba(12, 12, 12, .92);
  color: #fff;
  font-family: var(--sans, sans-serif);
  font-size: .68rem; font-weight: 600; letter-spacing: .04em;
  opacity: 0; transform: translateX(8px);
  pointer-events: none;
  transition: opacity .35s var(--ease, ease), transform .35s var(--ease, ease);
}
.wa-float:hover .wa-float__tip,
.wa-float:focus-visible .wa-float__tip { opacity: 1; transform: translateX(0); }
@media (hover: none) { .wa-float__tip { display: none; } }

/* ── The four in the footer ────────────────────────────────────────────────
   The marks alone. Each anchor carries its name as an aria-label, so nothing
   is lost to anyone who cannot see them; there is simply no word to set
   beside a telephone or a camera that the shape has not already said.
   ------------------------------------------------------------------------ */
.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(.7rem, 2.4vw, 1.05rem);
  padding: clamp(1.4rem, 3vw, 2.2rem) 0 0;
}
/* The marks close the page. studio.css left a whole strip of footer under
   them; a little under six millimetres is enough to sit them off the edge
   without the band of nothing that was there before. */
.foot { padding-bottom: .6cm; }

/* The wordmark and the marks are centred, so the lines between them are
   too — contact, telephone, address and place on one axis. */
.foot__row {
  justify-content: center;
  text-align: center;
}
.social__link {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(44px, 12vw, 52px);
  height: clamp(44px, 12vw, 52px);
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.social__badge {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 20px -8px var(--glow, rgba(0, 0, 0, .4));
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .45s ease;
}
.social__badge svg { width: 46%; height: 46%; display: block; }

.social__link:hover, .social__link:focus-visible { transform: translateY(-3px); }
.social__link:hover .social__badge,
.social__link:focus-visible .social__badge {
  transform: scale(1.08) rotate(-8deg);
  box-shadow: 0 16px 30px -10px var(--glow, rgba(0, 0, 0, .5));
}

/* Each mark in its own colour. */
.social__link--call { --brand: linear-gradient(140deg, #4FC77B, #1F8A4C); --glow: rgba(31, 138, 76, .8); }
.social__link--wa   { --brand: linear-gradient(140deg, #2BE06E, #0F8A6B); --glow: rgba(15, 138, 107, .8); }
.social__link--mail { --brand: linear-gradient(140deg, #F2A14B, #D3552F); --glow: rgba(211, 85, 47, .8); }
.social__link--ig   { --brand: linear-gradient(135deg, #F9CE34 0%, #EE2A7B 48%, #6228D7 100%);
                      --glow: rgba(238, 42, 123, .75); }

@media (prefers-reduced-motion: reduce) {
  .wa-float::before { animation: none; }
  .wa-float, .social__link, .social__badge, .wa-float__tip { transition: none; }
}

@media print { .wa-float { display: none; } }