/* ===== Contact badge (opens from the "Contact" nav link). Design units: 1 = 1px of the 1920 artboard ===== */
#bdRoot { position:fixed; inset:0; z-index:8; pointer-events:none; display:none; --bu:calc(1px*var(--bun,.5)); --ul:var(--ul-t,.45s); }
#bdRoot.on { display:block; }
#bdCv { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.bd { position:absolute; left:0; top:0; width:0; height:0; will-change:transform; }
.badge { position:absolute; left:calc(-187.5*var(--bu)); top:0; width:calc(375*var(--bu)); height:calc(499*var(--bu)); background:#fff; color:var(--bg); font-family:'Faculty Glyphic',sans-serif; box-shadow:0 calc(22*var(--bu)) calc(46*var(--bu)) rgba(0,0,0,.28); cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; pointer-events:auto; }
.badge:active { cursor:grabbing; }
.badge .tl { fill:var(--logo); }
.badge .tb { fill:var(--bg); }
.badge .bt { position:absolute; left:calc(32*var(--bu)); margin:0; white-space:nowrap; font-size:calc(var(--d-xs)*var(--bu)); line-height:calc(var(--d-lh-xs)*var(--bu)); font-weight:400; color:var(--bg); }
.badge .lb { color:color-mix(in srgb,var(--bg) 50%,transparent); }   /* the lighter labels: the same colour at 50% */
.bphoto { position:absolute; left:calc(32*var(--bu)); top:calc(50*var(--bu)); width:calc(100*var(--bu)); height:calc(100*var(--bu)); background:var(--logo); overflow:hidden; cursor:pointer; }
.bphoto .av { width:100%; height:100%; display:block; pointer-events:none; }   /* Lottie avatar (avatar.js) draws into this */
.bphoto .av svg { display:block; }
.bnote { position:absolute; color:#fff; pointer-events:none; opacity:0; }
.bnote svg { width:100%; height:100%; display:block; fill:currentColor; }
.bnm { position:absolute; left:calc(32*var(--bu)); top:calc(175.8*var(--bu)); margin:0; font-size:calc(var(--d-l)*var(--bu)); line-height:calc(var(--d-lh-l)*var(--bu)); letter-spacing:0; font-weight:400; color:var(--bg); white-space:nowrap; }
/* links: the underline is 2% of the text size (same as the site); on hover it is drawn again from left to right, like in the list */
.bdk { display:block; background:none; border:0; padding:0; font-family:inherit; cursor:pointer; text-align:left; text-decoration:none; }
/* underline: the shared style from styles.css (LINK UNDERLINE) */
.bdk:hover > span::after { animation:bdul var(--ul) cubic-bezier(.65,0,.25,1); }
@keyframes bdul { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
.bclose { position:absolute; right:calc(25*var(--bu)); top:calc(20.1*var(--bu)); display:flex; align-items:center; gap:calc(3.8*var(--bu)); padding:0; background:none; border:0; cursor:pointer; pointer-events:auto; font:inherit; white-space:nowrap; }
.bclose .bx { width:calc(7*var(--bu)); height:calc(7*var(--bu)); display:block; flex:none; overflow:visible; }
.bclose .bcl { font-size:calc(var(--d-xs)*var(--bu)); line-height:calc(var(--d-lh-xs)*var(--bu)); font-weight:400; color:var(--bg); }
.bclose:hover { opacity:.7; }

/* ---- clips (tuner: BD_CLIP 0..4). The straps end under the clip at the top edge of the badge ---- */
.clip { position:absolute; left:0; top:0; z-index:2; pointer-events:none; }
.clip i { position:absolute; display:block; }
/* 0 · metal clamp */
.clip[data-v="0"] i { left:calc(-24*var(--bu)); top:calc(-26*var(--bu)); width:calc(48*var(--bu)); height:calc(54*var(--bu)); border-radius:calc(8*var(--bu)); background:linear-gradient(100deg,#f4f4f4,#a9a9a9 55%,#d8d8d8); box-shadow:0 2px 7px rgba(0,0,0,.35); }
.clip[data-v="0"] i::after { content:''; position:absolute; left:26%; right:26%; top:62%; height:13%; border-radius:99px; background:rgba(0,0,0,.35); }
/* 1 · black plastic clip with a slot */
.clip[data-v="1"] i { left:calc(-27*var(--bu)); top:calc(-22*var(--bu)); width:calc(54*var(--bu)); height:calc(40*var(--bu)); border-radius:calc(6*var(--bu)) calc(6*var(--bu)) calc(12*var(--bu)) calc(12*var(--bu)); background:linear-gradient(180deg,#2a2a2d,#0c0c0d); box-shadow:0 3px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.18); }
.clip[data-v="1"] i::after { content:''; position:absolute; left:50%; margin-left:calc(-13*var(--bu)); bottom:calc(9*var(--bu)); width:calc(26*var(--bu)); height:calc(6*var(--bu)); border-radius:99px; background:#fff; box-shadow:inset 0 1px 2px rgba(0,0,0,.5); }
/* 2 · round ring */
.clip[data-v="2"] i { left:calc(-30*var(--bu)); top:calc(-40*var(--bu)); width:calc(60*var(--bu)); height:calc(60*var(--bu)); border-radius:50%; box-sizing:border-box; border:calc(6*var(--bu)) solid #9fa3a9; background:transparent; box-shadow:0 2px 6px rgba(0,0,0,.35), inset 0 1px 2px rgba(0,0,0,.35); }
.clip[data-v="2"] i::after { content:''; position:absolute; inset:calc(-6*var(--bu)); border-radius:50%; background:conic-gradient(from 200deg,rgba(255,255,255,.75),rgba(255,255,255,0) 30%,rgba(0,0,0,.25) 60%,rgba(255,255,255,.6)); -webkit-mask:radial-gradient(circle,transparent 62%,#000 64%); mask:radial-gradient(circle,transparent 62%,#000 64%); }
/* 3 · fabric sleeve (no hardware): a band that wraps both straps */
.clip[data-v="3"] i { left:calc(-36*var(--bu)); top:calc(-22*var(--bu)); width:calc(72*var(--bu)); height:calc(32*var(--bu)); border-radius:calc(4*var(--bu)); background:var(--bd-strap,#000); box-shadow:0 2px 6px rgba(0,0,0,.35), inset 0 0 0 calc(1.5*var(--bu)) rgba(255,255,255,.14); }
.clip[data-v="3"] i::after { content:''; position:absolute; left:calc(6*var(--bu)); right:calc(6*var(--bu)); top:50%; border-top:calc(1.2*var(--bu)) dashed rgba(255,255,255,.55); }
/* 4 · swivel hook */
.clip[data-v="4"] i { left:calc(-24*var(--bu)); top:calc(-30*var(--bu)); width:calc(48*var(--bu)); height:calc(94*var(--bu)); }
.clip[data-v="4"] i svg { width:100%; height:100%; display:block; overflow:visible; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.bck { display:inline-block; width:calc(12*var(--bu)); height:calc(12*var(--bu)); margin-left:calc(2*var(--bu)); vertical-align:-.12em; }

/* ---- phones (badge.js treats innerWidth < 760 as mobile) ----
   The card is scaled to ~80% of the screen width, so design-unit text came out at ~8px and the links were 12px tall.
   Text ≥ 12px, social links in one row, every link / button gets a ≥ 44px tap area (padding + equal negative margin: the layout does not move). */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .badge .bt { font-size: max(12px, calc(var(--d-xs) * var(--bu))); line-height: 1.3; }
  .badge .bt.bdk { padding: 14px 10px; margin: -14px -10px; }
  .badge a.bdk[href*="linkedin"]  { top: calc(430 * var(--bu)) !important; }
  .badge a.bdk[href*="instagram"] { top: calc(430 * var(--bu)) !important; left: calc(32 * var(--bu) + 70px); }
  .badge a.bdk[href*="t.me"]      { top: calc(430 * var(--bu)) !important; left: calc(32 * var(--bu) + 146px); }
  .badge #bdMail { top: calc(311 * var(--bu)) !important; }
  .badge .bt.lb:last-child { top: calc(466 * var(--bu)) !important; left: calc(32 * var(--bu)) !important; right: auto !important; }
  .bclose { padding: 14px; margin: -14px; }
  .bclose .bcl { font-size: 12px; line-height: 16px; }
}