/* ============ icon button: hover-scale + tooltip ============
   Circular 3em button, white ground, centred icon. Hovering one scales it
   to 1.1 while its siblings drop to 0.9, via the :has() pattern. Tooltip
   text comes from each button's aria-label, so no markup carries a
   duplicate string.
   Used in two places: the team cards and the footer socials. */
.icon-btns{display:flex;gap:12px;justify-content:center;align-items:center}
.icon-btns > a{
  position:relative;
  width:3em;height:3em;flex:none;
  border-radius:50%;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  transition:transform .45s cubic-bezier(.625,.05,0,1),
             background .3s ease, box-shadow .3s ease;
}
/* the scale pair */
.icon-btns:has(> a:hover) > a{transform:scale(.9)}
.icon-btns:has(> a:hover) > a:hover{transform:scale(1.1)}

/* tooltip, below the button so it never covers the name above it */
.icon-btns > a::after{
  content:attr(aria-label);
  position:absolute;top:calc(100% + 9px);left:50%;
  transform:translateX(-50%) translateY(-5px);
  background:#1a1a1a;color:#fff;
  font-family:var(--font-body),Arial,sans-serif;
  font-size:11px;font-weight:600;line-height:1;letter-spacing:.01em;
  padding:6px 9px;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;z-index:5;
  transition:opacity .22s ease,transform .22s ease;
}
.icon-btns > a::before{
  content:'';position:absolute;top:calc(100% + 4px);left:50%;
  transform:translateX(-50%) translateY(-5px);
  border:5px solid transparent;border-bottom-color:#1a1a1a;
  opacity:0;pointer-events:none;z-index:5;
  transition:opacity .22s ease,transform .22s ease;
}
.icon-btns > a:hover::after,.icon-btns > a:hover::before{
  opacity:1;transform:translateX(-50%) translateY(0);
}

/* --- team cards --- */
.team-card-contact-icons{font-size:12px}          /* 3em = 36px here */
.team-card-contact-icons > a{
  background:var(--surface-sunken,#f5f6f7);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
.team-card-contact-icons > a:hover{background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.14)}
.team-card-contact-icons img{width:16px;height:16px;display:block}
.team-card-contact-icons .team-card-wa img{width:18px;height:18px}

/* --- footer socials --- */
.footer2-social{font-size:12px}                    /* 3em = 36px here */
.footer2-social > a{
  background:rgba(255,255,255,.15);color:#fff;
  width:3em;height:3em;border-radius:50%;
}
.footer2-social > a:hover{background:#fff;color:var(--brand-600,#c8102e)}
.footer2-social svg{width:18px;height:18px;fill:currentColor}

@media (prefers-reduced-motion:reduce){
  .icon-btns:has(> a:hover) > a,
  .icon-btns:has(> a:hover) > a:hover{transform:none}
}

/* ---- nav icon buttons (right side of the bar) ----
   The three links sit in .gnav-end next to the CTA and the burger, so the
   :has() pair is scoped to the icon links themselves rather than wrapping
   them. Transparent at rest so the bar looks unchanged; the disc only
   appears on hover, tinted from currentColor so it works on the white bar
   and on the homepage's red wash alike. */
.gnav-icon-link{
  position:relative;
  width:2.4em;height:2.4em;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;
  transition:transform .45s cubic-bezier(.625,.05,0,1), background .25s ease;
}
.gnav-end:has(.gnav-icon-link:hover) .gnav-icon-link,
.gnav-center-icons:has(.gnav-icon-link:hover) .gnav-icon-link{transform:scale(.9)}
.gnav-end:has(.gnav-icon-link:hover) .gnav-icon-link:hover,
.gnav-center-icons:has(.gnav-icon-link:hover) .gnav-icon-link:hover{
  transform:scale(1.1);
  background:color-mix(in srgb,currentColor 12%,transparent);
}
/* tooltip, same treatment as the other two locations */
.gnav-icon-link::after{
  content:attr(data-tip);
  position:absolute;top:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(-5px);
  background:#1a1a1a;color:#fff;
  font-family:var(--font-body),Arial,sans-serif;
  font-size:11px;font-weight:600;line-height:1;
  padding:6px 9px;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;z-index:120;
  transition:opacity .22s ease,transform .22s ease;
}
.gnav-icon-link::before{
  content:'';position:absolute;top:calc(100% + 3px);left:50%;
  transform:translateX(-50%) translateY(-5px);
  border:5px solid transparent;border-bottom-color:#1a1a1a;
  opacity:0;pointer-events:none;z-index:120;
  transition:opacity .22s ease,transform .22s ease;
}
.gnav-icon-link:hover::after,.gnav-icon-link:hover::before{
  opacity:1;transform:translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion:reduce){
  .gnav-end:has(.gnav-icon-link:hover) .gnav-icon-link,
  .gnav-end:has(.gnav-icon-link:hover) .gnav-icon-link:hover{transform:none}
}

/* Below 1024px the bar's icons are hidden and only the menu panel shows
   them. The existing rule hides the <img> inside each link; that worked
   while the links were bare anchors, but this component gives them a
   2.4em box, so the empty boxes were still pushing the burger past the
   right edge. Hide the links themselves. */
@media (max-width:1024px){
  .gnav-end .gnav-icon-link{display:none!important}
}