.nsf-footer-socials{
  width:100%;
  padding:0 24px 24px;
  background:#02131f;
  text-align:center;
  color:var(--nsf-color,#c9a45c);
}

.nsf-inner{
  width:min(1200px,100%);
  margin:auto;
  padding-top:18px;
  display:flex;
  justify-content:var(--nsf-ad,center);
  align-items:center;
  flex-wrap:wrap;
  gap:var(--nsf-gd,18px);
}

.nsf-social{
  --nsf-current:var(--item-color,var(--nsf-color,#c9a45c));
  --nsf-coin-size:calc(var(--item-size,var(--nsf-d,30px)) + 18px);
  position:relative;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  width:var(--nsf-coin-size);
  height:var(--nsf-coin-size);
  margin:0!important;
  padding:0!important;
  color:var(--nsf-current)!important;
  text-decoration:none!important;
  background:transparent!important;
  border:0!important;
  border-radius:50%;
  perspective:700px;
  outline-offset:5px;
  -webkit-tap-highlight-color:transparent;
}

.nsf-coin{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  border-radius:50%;
  transform-style:preserve-3d;
  animation:var(--nsf-anim-d,nsf-spin) var(--nsf-speed,12s) linear infinite;
  transition:transform .55s cubic-bezier(.22,.61,.36,1),filter .32s ease;
  will-change:transform,filter;
}

/* Gold compass ring */
.nsf-coin::before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:50%;
  border:1.5px solid currentColor;
  background:
    radial-gradient(circle at 34% 28%,rgba(255,238,183,.14),transparent 28%),
    linear-gradient(145deg,#08263b 0%,#031826 55%,#02131f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 0 12px rgba(201,164,92,.08);
}

/* Four subtle compass points */
.nsf-coin::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:50%;
  pointer-events:none;
  background:
    linear-gradient(currentColor,currentColor) 50% 0/1px 6px no-repeat,
    linear-gradient(currentColor,currentColor) 50% 100%/1px 6px no-repeat,
    linear-gradient(90deg,currentColor,currentColor) 0 50%/6px 1px no-repeat,
    linear-gradient(90deg,currentColor,currentColor) 100% 50%/6px 1px no-repeat;
  opacity:.78;
}

.nsf-coin-face{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:58%;
  height:58%;
  border-radius:50%;
  color:currentColor;
  transform:translateZ(2px);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.nsf-social svg{
  display:block;
  width:100%;
  height:100%;
  fill:currentColor;
  stroke:currentColor;
  stroke-width:1.6;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.22));
}

.nsf-social svg rect,
.nsf-social svg circle{fill:none}

.nsf-social svg .dot{fill:currentColor;stroke:none}

.nsf-social svg .hole{
  fill:#031826;
  stroke:#031826;
}

/* Hover/focus: force face-on, brighten, glow. */
.nsf-social:hover,
.nsf-social:focus-visible{
  color:var(--nsf-hover,#e9bb68)!important;
}

.nsf-social:hover .nsf-coin,
.nsf-social:focus-visible .nsf-coin{
  animation:none!important;
  transform:rotateY(0deg) scale(1.045);
  filter:
    drop-shadow(0 0 var(--nsf-glow,10px) currentColor)
    drop-shadow(0 0 4px rgba(255,242,195,.85));
}

.nsf-social:hover .nsf-coin::before,
.nsf-social:focus-visible .nsf-coin::before{
  background:
    radial-gradient(circle at 34% 28%,rgba(255,245,205,.20),transparent 30%),
    linear-gradient(145deg,#0b3049 0%,#041f31 55%,#02131f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.055),
    inset 0 0 14px rgba(201,164,92,.15);
}

.nsf-social:focus-visible{
  outline:2px solid currentColor;
}

/* Slow coin turn */
@keyframes nsf-spin{
  from{transform:rotateY(0deg)}
  to{transform:rotateY(360deg)}
}

/* Tablet */
@media(max-width:980px){
  .nsf-inner{
    gap:var(--nsf-gt,16px);
    justify-content:var(--nsf-at,center);
  }
  .nsf-coin{animation-name:var(--nsf-anim-t,nsf-spin)}
  .nsf-social{
    --nsf-coin-size:calc(var(--item-size,var(--nsf-t,28px)) + 18px);
  }
}

/* Mobile */
@media(max-width:767px){
  .nsf-footer-socials{padding:0 18px 22px}
  .nsf-inner{
    gap:var(--nsf-gm,14px);
    justify-content:var(--nsf-am,center);
  }
  .nsf-coin{animation-name:var(--nsf-anim-m,nsf-spin)}
  .nsf-social{
    --nsf-coin-size:calc(var(--item-size,var(--nsf-m,26px)) + 16px);
  }
}

/* Accessibility */
@media(prefers-reduced-motion:reduce){
  .nsf-coin{
    animation:none!important;
    transform:none!important;
    transition:filter .2s ease!important;
  }
}

/* =========================================================
   v1.0.4 — HOVER/FACE VISIBILITY FIX ONLY
   Keep the approved compass-coin design unchanged.
   On hover/focus the coin returns face-on and the social glyph
   is explicitly kept visible above the navy face.
   ========================================================= */
.nsf-social:hover .nsf-coin,
.nsf-social:focus-visible .nsf-coin{
  animation:none!important;
  transform:rotateY(0deg) scale(1.045)!important;
}

.nsf-social:hover .nsf-coin-face,
.nsf-social:focus-visible .nsf-coin-face{
  z-index:4!important;
  opacity:1!important;
  visibility:visible!important;
  transform:translateZ(6px) rotateY(0deg)!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
}

.nsf-social:hover .nsf-coin-face svg,
.nsf-social:focus-visible .nsf-coin-face svg{
  opacity:1!important;
  visibility:visible!important;
  fill:currentColor!important;
  stroke:currentColor!important;
}

/* v1.0.5 — HOVER GLYPH GOLD ONLY
   Preserve the approved navy compass coin and glow.
   Force the social glyph itself to remain clearly gold on hover/focus. */
.nsf-social:hover .nsf-coin-face,
.nsf-social:focus-visible .nsf-coin-face{
  color:var(--nsf-hover,#e9bb68)!important;
}

.nsf-social:hover .nsf-coin-face svg,
.nsf-social:focus-visible .nsf-coin-face svg{
  color:var(--nsf-hover,#e9bb68)!important;
  fill:var(--nsf-hover,#e9bb68)!important;
  stroke:var(--nsf-hover,#e9bb68)!important;
  filter:drop-shadow(0 0 2px rgba(255,238,183,.55))!important;
}

/* v1.0.6 — LINKEDIN GLYPH REFINEMENT ONLY
   Keep the approved compass coin, navy face, ring, glow, sizing,
   spacing, position and animation unchanged.
   The LinkedIn mark is now a finer stroke-based monogram and stays crisp. */
.nsf-linkedin-glyph{
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.75!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.nsf-linkedin-glyph circle{
  fill:currentColor!important;
  stroke:none!important;
}

.nsf-linkedin-glyph path{
  fill:none!important;
  stroke:currentColor!important;
}

.nsf-social:hover .nsf-linkedin-glyph,
.nsf-social:focus-visible .nsf-linkedin-glyph{
  filter:none!important;
}

/* =========================================================
   v1.0.7 — LOCKED LUXURY LINKEDIN / CENTERING REFINEMENT ONLY
   Approved visual target:
   - deep navy compass coin
   - fine gold ring + four compass points
   - elegant centered gold "in"
   - same slow coin rotation
   - same hover face-on stop + glow
   - responsive/custom size controls preserved
   No footer/layout/theme integration changes.
   ========================================================= */

/* Keep the glyph mathematically centered at every configured icon size. */
.nsf-coin-face{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  transform:none!important;
  z-index:4!important;
  pointer-events:none!important;
}

/* Luxury fine-written LinkedIn mark. */
.nsf-linkedin-wordmark{
  fill:currentColor!important;
  stroke:none!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:15.5px!important;
  font-weight:400!important;
  letter-spacing:-.055em!important;
  dominant-baseline:alphabetic!important;
  text-rendering:geometricPrecision!important;
  shape-rendering:geometricPrecision!important;
}

/* Scale the wordmark proportionally with the coin, never off-center. */
.nsf-social svg{
  overflow:visible!important;
}

.nsf-social:hover .nsf-coin-face,
.nsf-social:focus-visible .nsf-coin-face{
  transform:none!important;
}

.nsf-social:hover .nsf-linkedin-wordmark,
.nsf-social:focus-visible .nsf-linkedin-wordmark{
  fill:var(--nsf-hover,#e9bb68)!important;
  stroke:none!important;
  filter:none!important;
}

/* Use configured size consistently for the full visual coin.
   The ring, compass points and glyph all stay centered as size changes. */
.nsf-social{
  --nsf-coin-size:calc(var(--item-size,var(--nsf-d,30px)) + 18px);
}

@media(max-width:980px){
  .nsf-social{
    --nsf-coin-size:calc(var(--item-size,var(--nsf-t,28px)) + 18px);
  }
}

@media(max-width:767px){
  .nsf-social{
    --nsf-coin-size:calc(var(--item-size,var(--nsf-m,26px)) + 16px);
  }
}

/* =========================================================
   v1.0.8 — UNIFIED SOCIAL GLYPH SYSTEM ONLY
   LOCKED motif for every platform:
   - same deep navy compass coin
   - same fine gold ring + four compass points
   - same centered refined gold glyph treatment
   - same slow rotation
   - same hover face-on stop + gold glow
   - same responsive/custom sizing logic
   No footer, spacing, alignment, animation-speed or theme changes.
   ========================================================= */

.nsf-glyph-stroke{
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.55!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.nsf-glyph-stroke path,
.nsf-glyph-stroke rect,
.nsf-glyph-stroke circle{
  fill:none!important;
  stroke:currentColor!important;
}

.nsf-glyph-stroke .nsf-glyph-dot{
  fill:currentColor!important;
  stroke:none!important;
}

.nsf-threads-wordmark,
.nsf-vimeo-wordmark{
  fill:currentColor!important;
  stroke:none!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:17px!important;
  font-weight:400!important;
  text-rendering:geometricPrecision!important;
}

.nsf-social:hover .nsf-glyph-stroke,
.nsf-social:focus-visible .nsf-glyph-stroke,
.nsf-social:hover .nsf-threads-wordmark,
.nsf-social:focus-visible .nsf-threads-wordmark,
.nsf-social:hover .nsf-vimeo-wordmark,
.nsf-social:focus-visible .nsf-vimeo-wordmark{
  filter:none!important;
}

.nsf-social:hover .nsf-glyph-stroke,
.nsf-social:focus-visible .nsf-glyph-stroke{
  stroke:var(--nsf-hover,#e9bb68)!important;
}

.nsf-social:hover .nsf-glyph-stroke path,
.nsf-social:focus-visible .nsf-glyph-stroke path,
.nsf-social:hover .nsf-glyph-stroke rect,
.nsf-social:focus-visible .nsf-glyph-stroke rect,
.nsf-social:hover .nsf-glyph-stroke circle,
.nsf-social:focus-visible .nsf-glyph-stroke circle{
  stroke:var(--nsf-hover,#e9bb68)!important;
}

.nsf-social:hover .nsf-glyph-stroke .nsf-glyph-dot,
.nsf-social:focus-visible .nsf-glyph-stroke .nsf-glyph-dot,
.nsf-social:hover .nsf-threads-wordmark,
.nsf-social:focus-visible .nsf-threads-wordmark,
.nsf-social:hover .nsf-vimeo-wordmark,
.nsf-social:focus-visible .nsf-vimeo-wordmark{
  fill:var(--nsf-hover,#e9bb68)!important;
}

