/* ========================================
   PROFESSIONAL LOGO (ONLY)
   ======================================== */
.logo {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: #fff !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: transform 0.2s ease !important;
}

/* Icon badge before logo text ONLY */
.logo::before {
  content: 'JCS' !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  border-radius: 0.5rem !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

.logo:hover {
  transform: translateY(-2px) !important;
}

/* --- Header logo: clean wordmark (no fake badge) --- */
header .brand a[href="/"]{
  display:inline-flex;
  align-items:center;

  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-size:clamp(18px,1.6vw,22px);
  line-height:1;

  padding:8px 0;
  margin:0;

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;

  color:rgba(255,255,255,0.95) !important;
  text-decoration:none !important;
  position:relative;
}

/* subtle premium underline on hover */
header .brand a[href="/"]::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
  opacity:0.55;
  transform:scaleX(0.55);
  transform-origin:center;
  transition:transform 180ms ease, opacity 180ms ease;
}

@media (hover:hover) and (pointer:fine){
  header .brand a[href="/"]:hover::after{
    opacity:0.95;
    transform:scaleX(1);
  }
}