/* Shared front-office header. One header, one logo per page.
   - Bookings page uses .oh (below).
   - Blueprint page keeps its own .hub-header; office-nav.js injects the same
     .office-links group into it, so there's no second bar and no second logo. */
.oh{position:sticky;top:0;z-index:1000;background:rgba(254,250,244,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid #eee1e9}
.oh__in{max-width:980px;margin:0 auto;padding:0 22px;height:70px;display:flex;align-items:center;gap:12px}
.oh__logo{height:44px;width:auto}

/* the app nav + account controls, shared by both pages */
.office-links{margin-left:auto;display:flex;align-items:center;gap:4px;font-family:Quicksand,system-ui,sans-serif}
.office-links a{font-weight:700;font-size:14.5px;color:#6b5b66;text-decoration:none;padding:8px 14px;border-radius:999px;transition:background .14s,color .14s}
.office-links a:hover{background:rgba(171,91,146,.08);color:#8e4a7b}
.office-links a.on{background:rgba(171,91,146,.12);color:#8e4a7b}
.office-links .u{font-size:12.5px;color:#6b5b66;margin:0 6px 0 8px}
.office-links button{border:1.5px solid #eee1e9;background:#fff;border-radius:999px;padding:7px 14px;font-weight:600;font-size:12.5px;color:#8e4a7b;cursor:pointer;font-family:inherit;transition:border-color .14s}
.office-links button:hover{border-color:#AB5B92}

/* on the blueprint, retire the "Blueprint" sub-label so the injected nav reads clean */
.hub-lockup__sub{display:none !important}

@media (max-width:600px){
  /* header becomes two rows: logo on top, nav scrollable underneath */
  .oh__in{height:auto;min-height:54px;flex-wrap:wrap;padding:8px 12px;gap:6px}
  .oh__logo{height:32px}
  .office-links{flex:1 0 100%;margin-left:0;gap:3px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .office-links .u{display:none}
  .office-links a{padding:7px 11px;font-size:13.5px;white-space:nowrap}
  .office-links button{padding:6px 11px;font-size:12px;white-space:nowrap;margin-left:auto}
  /* blueprint header: let its fixed-height bar wrap the same way */
  .hub-header__in{height:auto !important;min-height:54px;flex-wrap:wrap;padding:8px 14px !important;gap:6px}
  .hub-lockup img{height:36px !important}
}