.um-ribbon{
  background:var(--color-text-accent);
  color:#fff;
  border-bottom:0;
  font-size:12px;
}

.um-ribbon p{color:inherit}
.um-ribbon-inner{max-width:var(--container-max);margin:0 auto;padding:7px var(--container-pad-desktop);text-align:center}

.um-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(243,240,232,.95);
  border-bottom:1px solid var(--color-border);
  backdrop-filter:blur(14px);
}

.um-header-inner{display:flex;align-items:center;justify-content:space-between;min-height:76px}
.um-brand{display:flex;align-items:center;gap:12px;min-width:0}
.um-logo{width:46px;height:46px;object-fit:cover}
.um-brand-text{color:var(--color-text-primary);font-family:var(--font-heading);font-size:20px;font-weight:600;letter-spacing:-.04em}

.um-nav{display:flex}
.um-nav-list{display:flex;align-items:center;gap:26px;margin:0;padding:0;list-style:none}
.um-nav-list li{margin:0}
.um-nav a{color:var(--color-text-primary);font-size:13px;font-weight:600;text-decoration:none}
.um-nav a:not(.button){padding-block:10px;border-bottom:1px solid transparent}
.um-nav a:not(.button):hover{border-color:currentColor}
.um-nav a.button{background:var(--color-text-accent);color:#fff}

.um-menu-toggle,
.um-menu-close{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;padding:0}
.um-menu-toggle{flex-direction:column;gap:5px}
.um-menu-toggle span,
.um-menu-close span{display:block;width:22px;height:2px;background:var(--color-text-primary)}

@media(max-width:900px){
  .um-nav{
    position:fixed;
    inset:0 0 0 auto;
    width:min(88vw,390px);
    padding:86px 28px 32px;
    background:var(--color-surface-dark);
    box-shadow:-8px 0 0 rgba(21,25,24,.18);
    transform:translateX(105%);
    transition:transform var(--transition-fast);
  }
  .um-nav.open{transform:translateX(0)}
  .um-nav-list{align-items:stretch;flex-direction:column;gap:8px}
  .um-nav a{display:block;color:#fff;font-family:var(--font-heading);font-size:24px;padding:10px 0}
  .um-nav a.button{margin-top:18px;text-align:center}
  .um-menu-toggle{display:flex}
  .um-menu-close{display:flex;position:absolute;top:20px;right:20px}
  .um-menu-close span{position:absolute;background:#fff}
  .um-menu-close span:nth-child(1){transform:rotate(45deg)}
  .um-menu-close span:nth-child(2){transform:rotate(-45deg)}
}

@media(max-width:600px){
  .um-ribbon-inner{padding-inline:var(--container-pad-mobile);font-size:10px}
  .um-header-inner{min-height:68px}
  .um-logo{width:38px;height:38px}
  .um-brand-text{font-size:18px}
}