/* ============================================================
   Global header — a floating glass bar with an Apple-style flyout
   ============================================================ */
.mh { position: relative; z-index: 60; }

/* --- Fixed, not sticky ---
   The bar floats over the page rather than capping it. Fixed on HubSpot's
   module wrapper (the id is deterministic: base.html declares the module as
   "site_header"), inset from the top and sides, with the page running
   underneath. The wrapper's gutter passes clicks through; only the pill,
   the flyout, the drawer and the curtain take them. */
:root { --mh-h: 78px; }   /* 14px inset + 62px pill + 2px border; module.js corrects it live */
html { scroll-padding-top: calc(var(--mh-h) + 12px); }   /* anchors otherwise land under the bar */
#hs_cos_wrapper_site_header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; pointer-events: none; }
#hs_cos_wrapper_site_header .mh-utility,
#hs_cos_wrapper_site_header .mh-bar__inner,
#hs_cos_wrapper_site_header .mh-mobile,
#hs_cos_wrapper_site_header .mh-curtain { pointer-events: auto; }

/* The page clears the bar. When module.js finds a dark ground at the top of
   the page — the home and service heroes — it adds html.mh-under and the
   hero runs under the glass instead, carrying its own room. */
#main-content { padding-top: var(--mh-h); }
html.mh-under #main-content { padding-top: 0; }

/* --- Utility bar (off by default now; the links live in the footer) --- */
.mh-utility { background: var(--surface-inverse); border-bottom: 1px solid var(--border-inverse); }
.mh-utility__inner {
  max-width: 1280px; margin: 0 auto; padding: 9px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 38px;
}
.mh-utility__cities {
  flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: var(--weight-medium) 11px/1.3 var(--font-eyebrow);
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-inverse-muted);
}
.mh-utility__links { display: flex; flex: 0 0 auto; align-items: center; gap: 18px; }
.mh-utility__links a {
  font: var(--weight-medium) 11px/1.3 var(--font-eyebrow);
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-inverse-muted); text-decoration: none;
}
.mh-utility__links a:hover { color: #fff; }

/* --- The pill ---
   Two states. PALE is the default and the safe one — dark type on pale
   glass reads over any page before the script has run. SLATE is added by
   module.js while the ground under the bar is dark. Dark-on-pale can be far
   more transparent than white-on-dark and still read, which is why the bar
   flips instead of one bar that darkens; less blur in the pale state on
   purpose, because heavy blur turns what is underneath into a wash and a
   wash reads as a slab. */
.mh-bar { position: relative; z-index: 2; padding: 14px 22px 0; }
.mh-bar__inner {
  position: relative; max-width: 1280px; margin: 0 auto; min-height: 62px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 8px 8px 18px; border-radius: 12px;
  background: rgba(255,255,255,0.42); border: 1px solid rgba(15,23,42,0.10);
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 14px 34px -14px rgba(15,23,42,0.28);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.mh--slate .mh-bar__inner {
  background: rgba(10,12,16,0.22); border-color: rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(40px) saturate(160%); backdrop-filter: blur(40px) saturate(160%);
  box-shadow: none;
}
/* While the flyout is open the pill firms up to match the panel, so the two
   read as one surface (Apple's nav does the same). */
.mh--open .mh-bar__inner { background: rgba(255,255,255,0.86); }
.mh--open.mh--slate .mh-bar__inner { background: rgba(10,12,16,0.62); }
/* No backdrop-filter: near-opaque rather than type over raw page. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mh-bar__inner { background: rgba(255,255,255,0.97); }
  .mh--slate .mh-bar__inner { background: var(--neutral-900); }
}

/* --- Lockup: two official artworks, one per state; never a filter --- */
.mh-logo { display: flex; align-items: center; flex: 0 0 auto; }
.mh-logo img { height: 40px; width: auto; display: block; }
.mh-logo .mh-logo__inverse { display: none; }
.mh--slate .mh-logo .mh-logo__primary { display: none; }
.mh--slate .mh-logo .mh-logo__inverse { display: block; }

/* --- Desktop nav ---
   Sentence case, regular weight, no tracking: the bar names places to go,
   it does not announce them. The uppercase eyebrow voice stays on the page. */
.mh-nav { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; justify-content: center; gap: 0; }
.mh-item { display: flex; align-items: stretch; }
.mh-item--simple { position: relative; }   /* simple panel aligns under its trigger */
.mh-item--mega { position: static; }        /* mega panel spans the whole pill */

.mh-trigger {
  display: flex; align-items: center; gap: 5px; height: 40px; padding: 0 11px; border-radius: 9px;
  background: none; border: none; cursor: pointer;
  font: var(--weight-regular) 15px/1 var(--font-body); white-space: nowrap;
  color: var(--text-strong);
  transition: color 140ms var(--ease-standard), background 140ms var(--ease-standard);
}
.mh-trigger:hover { background: rgba(15,23,42,0.05); }
.mh-item.is-open .mh-trigger { background: rgba(15,23,42,0.08); }
.mh-caret { flex: none; color: var(--text-muted); transition: transform 140ms var(--ease-standard); }
.mh-item.is-open .mh-caret { transform: rotate(180deg); }
.mh-macc__head[aria-expanded="true"] .mh-caret { transform: rotate(180deg); }
.mh--slate .mh-trigger { color: rgba(255,255,255,0.82); }
.mh--slate .mh-trigger:hover { color: #fff; background: rgba(255,255,255,0.06); }
.mh--slate .mh-item.is-open .mh-trigger { color: #fff; background: rgba(255,255,255,0.12); }
.mh--slate .mh-caret { color: rgba(255,255,255,0.5); }
/* Open over a dark hero the pill is firm slate, so the open item stays white. */

/* --- The curtain ---
   Apple's move: while a menu is open the rest of the page goes under glass.
   Fixed, full-screen, below the bar. Fades in on a short delay so a pass
   across the nav does not flash the page; fades out at once. */
.mh-curtain {
  position: fixed; inset: 0; z-index: 1;
  background: rgba(232,232,237,0.40);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  opacity: 0; visibility: hidden;
  transition: opacity 320ms cubic-bezier(0.4,0,0.6,1) 80ms, visibility 0s linear 400ms;
}
.mh--slate .mh-curtain { background: rgba(10,12,16,0.40); }
.mh--open .mh-curtain { opacity: 1; visibility: visible; transition-delay: 80ms, 0s; }

/* --- Flyouts ---
   The panel grows out of the pill: same surface, 6px below, the pill's
   radius. Not display-toggled — it rises 8px and fades over 240ms, and the
   links inside land a beat later, staggered, which is what makes the menu
   feel like it opened rather than appeared. */
.mh-panel {
  position: absolute; z-index: 3;
  background: rgba(255,255,255,0.86);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(15,23,42,0.10); border-radius: 12px;
  box-shadow: 0 24px 60px -20px rgba(15,23,42,0.35), inset 0 1px 0 rgba(255,255,255,0.7);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 240ms var(--ease-standard), transform 240ms var(--ease-standard), visibility 0s linear 240ms;
}
.mh-item.is-open .mh-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s, 0s, 0s; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mh-panel { background: #fff; }
}

.mh-panel--mega { top: calc(100% + 6px); left: 0; right: 0; padding: 34px 40px 32px; }
/* The elevated column takes the room; the small columns share the rest. */
.mh-mega { display: grid; grid-template-columns: minmax(260px, 1.4fr) repeat(auto-fit, minmax(170px, 1fr)); gap: 40px; }
.mh-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mh-col__title {
  font: var(--weight-bold) 11px/1.3 var(--font-eyebrow);
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--text-muted);
}
.mh-col__links { display: flex; flex-direction: column; gap: 2px; }
.mh-col__links a {
  padding: 5px 0; font: var(--weight-medium) 14.5px/1.35 var(--font-body);
  color: var(--text-body); text-decoration: none;
  transition: color 120ms var(--ease-standard);
}
.mh-col__links a:hover { color: var(--brand); }
/* Apple's "elevated" group: the destinations that matter, in display type.
   The first column of each mega menu is the one that names the offer. */
.mh-col--elevated .mh-col__title { color: var(--brand); }
.mh-col--elevated .mh-col__links { gap: 4px; }
.mh-col--elevated .mh-col__links a {
  padding: 4px 0; font: var(--weight-semibold) 24px/1.15 var(--font-display);
  text-transform: uppercase; letter-spacing: 0.01em; color: var(--text-strong);
}
.mh-col--elevated .mh-col__links a:hover { color: var(--brand); }
/* The promo, as a column of its own rather than a dark card in a light panel. */
.mh-col--promo { padding-left: 32px; border-left: 1px solid var(--border-subtle); }
.mh-promo__title {
  font: var(--weight-semibold) 19px/1.2 var(--font-display); text-transform: uppercase;
  color: var(--text-strong); text-decoration: none;
}
.mh-promo__title:hover { color: var(--brand); }
.mh-promo__desc { font: var(--role-body-sm); color: var(--text-muted); }
.mh-promo__cta { margin-top: auto; font: var(--weight-semibold) 13px/1 var(--font-body); color: var(--brand); text-decoration: none; }
.mh-promo__cta:hover { color: var(--brand-active, var(--brand)); }

/* Staggered landing for whatever the panel holds. */
.mh-panel .mh-col, .mh-panel--simple a {
  opacity: 0; transform: translateY(6px);
  transition: opacity 300ms var(--ease-standard), transform 300ms var(--ease-standard);
}
.mh-item.is-open .mh-panel .mh-col, .mh-item.is-open .mh-panel--simple a { opacity: 1; transform: none; }
.mh-item.is-open .mh-col:nth-child(1), .mh-item.is-open .mh-panel--simple a:nth-child(1) { transition-delay: 60ms; }
.mh-item.is-open .mh-col:nth-child(2), .mh-item.is-open .mh-panel--simple a:nth-child(2) { transition-delay: 110ms; }
.mh-item.is-open .mh-col:nth-child(3), .mh-item.is-open .mh-panel--simple a:nth-child(3) { transition-delay: 160ms; }
.mh-item.is-open .mh-col:nth-child(4), .mh-item.is-open .mh-panel--simple a:nth-child(4) { transition-delay: 210ms; }
.mh-item.is-open .mh-col:nth-child(5), .mh-item.is-open .mh-panel--simple a:nth-child(5) { transition-delay: 260ms; }

/* Simple panel: under its trigger. 18px = the trigger's 3px seat + the
   pill's 8px padding + 1px border + the 6px gap. */
.mh-panel--simple { top: calc(100% + 18px); left: 0; min-width: 248px; padding: 10px; }
.mh-panel--simple a {
  display: block; padding: 10px 12px; border-radius: 8px;
  font: var(--weight-medium) 14.5px/1.35 var(--font-body); color: var(--text-body); text-decoration: none;
}
.mh-panel--simple a:hover { background: var(--surface-hover); color: var(--brand); }

@media (prefers-reduced-motion: reduce) {
  .mh-bar__inner, .mh-trigger, .mh-curtain, .mh-panel, .mh-panel .mh-col, .mh-panel--simple a { transition: none; }
}

/* --- Right-side actions --- */
.mh-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.mh-search {
  display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 10px 0 8px;
  background: none; border: 1px solid var(--border-subtle); border-radius: 10px;
  transition: border-color 140ms var(--ease-standard);
}
.mh-search:hover { border-color: var(--text-muted); }
.mh-search:focus-within { border-color: var(--brand); }
.mh-search__btn {
  display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  padding: 0; background: none; border: none; color: var(--text-muted); cursor: pointer;
  transition: color 140ms var(--ease-standard);
}
.mh-search:focus-within .mh-search__btn, .mh-search__btn:hover { color: var(--brand); }
.mh-search__input {
  width: 84px; min-width: 0; padding: 0; border: none; background: none; outline: none;
  font: var(--weight-medium) 14px/1 var(--font-body); color: var(--text-strong);
}
.mh-search__input::placeholder { color: var(--text-muted); }
.mh-search__input::-webkit-search-decoration,
.mh-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.mh--slate .mh-search { border-color: rgba(255,255,255,0.20); }
.mh--slate .mh-search:hover { border-color: rgba(255,255,255,0.40); }
.mh--slate .mh-search__btn { color: rgba(255,255,255,0.70); }
.mh--slate .mh-search__input { color: #fff; }
.mh--slate .mh-search__input::placeholder { color: rgba(255,255,255,0.55); }
.mh-actions .mh-cta { border-radius: 10px; }

/* --- Mobile burger + drawer (hidden on desktop) --- */
.mh-burger { display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 11px; background: none; border: 1px solid var(--border-subtle);
  border-radius: 10px; cursor: pointer; transition: border-color 220ms ease; }
.mh-burger span { display: block; height: 2px; background: var(--text-strong); border-radius: 2px; transition: 160ms var(--ease-standard); }
.mh-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mh-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mh-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mh--slate .mh-burger { border-color: rgba(255,255,255,0.25); }
.mh--slate .mh-burger span { background: #fff; }

/* The drawer is a second pill under the first. */
.mh-mobile {
  display: none; max-width: 1280px; margin: 6px auto 0;
  background: #fff; border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: var(--shadow-lg);
  padding: 8px 20px 24px; max-height: calc(100vh - var(--mh-h) - 24px); overflow-y: auto;
}
.mh-macc { border-bottom: 1px solid var(--border-subtle); }
.mh-macc__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 15px 4px; background: none; border: none; cursor: pointer;
  font: var(--weight-medium) 16px/1 var(--font-body); color: var(--text-strong);
}
.mh-macc__body { display: flex; flex-direction: column; gap: 2px; padding: 4px 4px 16px; }
.mh-macc__body a { padding: 9px 10px; font: var(--weight-medium) 15px/1.3 var(--font-body); color: var(--text-body); text-decoration: none; border-radius: var(--radius-sm); }
.mh-macc__body a:hover { background: var(--surface-hover); color: var(--brand); }
.mh-macc__group { padding: 12px 10px 4px; font: var(--weight-bold) 10.5px/1.3 var(--font-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--brand); }
.mh-macc__promo { margin-top: 6px; font-weight: var(--weight-semibold); color: var(--brand) !important; }
.mh-mobile__search {
  display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 13px 4px;
  border-top: 1px solid var(--border-subtle); color: var(--text-muted);
  font: var(--weight-medium) 15px/1 var(--font-body);
}
.mh-mobile__cta { margin-top: 14px; }

/* --- Breakpoints --- */
/* Six sentence-case items plus the search field plus the CTA is 1134px of
   pill; below 1300px the search keeps its icon and gives up its field. */
@media (max-width: 1300px) {
  .mh-search { width: 44px; padding: 0; justify-content: center; }
  .mh-search__input { display: none; }
}
@media (max-width: 1140px) {
  .mh-nav, .mh-search { display: none; }
  .mh-burger { display: flex; }
  .mh-mobile[data-mh-mobile]:not([hidden]) { display: block; }
}
@media (max-width: 620px) {
  :root { --mh-h: 68px; }   /* 10px inset + 56px pill + border */
  .mh-bar { padding: 10px 12px 0; }
  .mh-bar__inner { min-height: 56px; gap: 10px; padding: 6px 6px 6px 14px; }
  .mh-logo img { height: 34px; }
  .mh-utility__cities { display: none; }
  .mh-actions a.mh-cta { display: none; }   /* CTA lives in the drawer on phones (specific enough to beat .mahdlo-btn) */
  .mh-utility__inner { justify-content: flex-end; }
}