.legalHeader{
  position:fixed;
  top:0; 
  left:0; 
  right:0;
	height: clamp(60px, 10vw, 66px);
  z-index:1000;
  background:#fff;
  border-bottom:1px solid #e7e9eb;
}

.legalHeader__inner{
  max-width:1200px;
  margin:0 auto;
  padding: 0 clamp(14px, 3vw, 18px);
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.legalHeader__brand{
  display:flex;
  align-items:center;
  font-weight: 700;
  gap:10px;
  text-decoration:none;
}

.legalHeader__logo{ 
    height:34px; 
    width:auto;
    object-fit:contain;
}

.legalHeader__name{
  font-weight:800;
  font-size:24px;
  white-space:nowrap;
  color:#bb0000;
}

.legalHeader__right{
   position:relative;
   display:flex;
   align-items:center;
}


/* Pill button like your screenshot */
.legalPillBtn{
  height:44px;
  border:0;
  background:transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
   padding: 0px 14px 0px 20px;
   background: #f1f3f5;
   border-radius: 8px;
	transition: background-color 0.2s ease;
  gap:10px;
}

.legalPillBtn:hover {
   background: #e1e3e5;
}

.legalPillLabel{
  font-size:15px;
  font-weight:700;
  color:#000;
  max-width:48vw;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.legalPillChevron{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .18s ease;
}

.legalPillBtn.is-open .legalPillChevron{
  transform:rotate(180deg);
}

/* Dropdown */
.legalMenu{
  position:absolute;
  right:0;
  top:56px;
  min-width:170px;
  background:#fff;
  border-radius:8px;
  box-shadow: 0px 5px 44px rgba(28, 33, 44, 0.38);
  overflow:hidden;
  padding: 6px 0;

  /* ✅ animation */
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  will-change: opacity, transform;
}

.legalMenu.is-open{
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

/* Optional */
@media (prefers-reduced-motion: reduce){
  .legalMenu{ transition: none; }
}

.legalMenuItem{
   display:block;
   padding:12px 15px;
   font-size:15px;
   color:#333;
   text-decoration:none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.legalMenuItem:hover{
  background:#f1f3f5;
}

@media (max-width: 370px) {
	.legalHeader__name {
		display: none;
	}
}