/* Burger menu — extracted from style.css for use on (site) pages */
/* ============================================================
   Slide-out burger menu (homepage, top-right)
   One white circle: morphs burger ⇄ X and slides across, with the dark
   pill revealing the links exactly in its wake (reverses on close).
   ============================================================ */
.hb-menu {
  position: fixed;
  top: 81px;                          /* centres the 60px bar on the 78px logo (centre ≈ 111px) */
  right: clamp(1.5rem, 5vw, 4.5rem);  /* align with the header's right padding */
  z-index: 3000;
  height: 60px;
  pointer-events: none;               /* only the circle / open bar are interactive */
}
/* dark pill: closed it is a 52px circle hidden behind the toggle; it grows
   leftward (and gains its 60px height) to reveal the links, its left edge
   tracking the sliding circle exactly */
.hb-menu__bar {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;                 /* closed = circle footprint; required so width can
                                  animate (auto can't be transitioned) */
  height: 60px;
  overflow: hidden;
  background: transparent;      /* transparent when closed → no dark ring behind the circle */
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.76, 0, 0.24, 1), background 0.3s ease;
}
.hb-menu.is-open .hb-menu__bar {
  width: var(--hb-full, 600px);
  background: #14141b;
  pointer-events: auto;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  transition: width 0.5s cubic-bezier(0.76, 0, 0.24, 1), background 0s;  /* dark instantly on open */
}
.hb-menu__inner {
  position: absolute;
  top: 0;
  right: 0;
  height: 60px;
  width: max-content;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 2rem);
  padding: 0 8px 0 0;
  white-space: nowrap;
  visibility: hidden;                 /* nothing peeks behind the circle when fully closed */
  transition: visibility 0s 0.5s;     /* stays visible through the close animation, hides at the end */
}
.hb-menu.is-open .hb-menu__inner {
  visibility: visible;
  transition: visibility 0s 0s;       /* visible immediately on open */
}
.hb-menu__slot { flex: none; width: 60px; height: 60px; }
/* seat the circle lands on */

/* links */
.hb-menu__links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.8vw, 1.9rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.hb-menu__links a {
  color: #fff;
  text-decoration: none;
  font-family: 'greycliff-cf', sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  position: relative;
  top: -2px;                 /* match the contact text's ~2px upward nudge */
  transition: color 0.2s ease;
}
.hb-menu__links a:hover { color: #ff4844; }
/* contact pill */
.hb-menu__contact {
  flex: none;
  background: #ff4844;
  color: #fff;
  text-decoration: none;
  font-family: 'greycliff-cf', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 0.575rem 1.6rem 0.825rem;  /* text nudged ~2px up; box height unchanged */
  border-radius: 999px;
  margin-left: 0.3rem;
  transition: background 0.2s ease, transform 0.2s ease;
}
.hb-menu__contact:hover { background: #e63c38; transform: translateY(-1px); }
/* the one circle: burger ⇄ X, slides right→left leading the reveal */
.hb-menu__toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: auto;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
  transform: translateX(0);
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.hb-menu.is-open .hb-menu__toggle {
  transform: translateX(calc(-1 * (var(--hb-full, 600px) - 60px)));
}
.hb-menu__toggle:focus-visible { box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18); }
/* icon: two red bars that morph into an X */
.hb-menu__icon { position: relative; width: 28px; height: 15px; }
.hb-menu__icon span {
  position: absolute;
  left: 0;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: #ff4844;
  transition: transform 0.3s ease, top 0.3s ease;
}
.hb-menu__icon span:nth-child(1) { top: 0; }
.hb-menu__icon span:nth-child(2) { top: 10px; }
.hb-menu.is-open .hb-menu__icon span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.hb-menu.is-open .hb-menu__icon span:nth-child(2) { top: 6px; transform: rotate(-45deg); }

/* ---- utility bar: two dropdowns (Choose Site + language) on a dark pill,
   sitting left of the circle. The burger panel opens over the top of them. ---- */
.hb-menu__util {
  position: absolute;
  top: 0;
  right: 72px;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 1.1rem;
  background: #14141b;
  border-radius: 999px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
  color: #fff;
  white-space: nowrap;
  z-index: 1;
  /* opacity / pointer-events / transition are driven inline by SiteMenu:
     burger open = instant hide, burger close = delayed fade-in, scroll = slow fade */
}
.hb-menu__util-sep { flex: none; width: 1px; height: 22px; background: rgba(255, 255, 255, 0.28); }
.hb-menu__dd { position: relative; display: flex; align-items: center; }
.hb-menu__dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #fff;
  font-family: 'greycliff-cf', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  padding: 0.6rem 0.9rem;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: color 0.2s ease;
}
.hb-menu__dd-btn:hover { color: #ff4844; }
.hb-menu__globe { flex: none; }
.hb-menu__chev { flex: none; transition: transform 0.25s ease; }
.hb-menu__dd.is-open .hb-menu__chev { transform: rotate(180deg); }
.hb-menu__dd-panel {
  position: absolute;
  top: 100%;
  margin-top: 14px;
  left: 0;
  min-width: 180px;
  background: #14141b;
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
  z-index: 5;
}
.hb-menu__dd--lang .hb-menu__dd-panel { left: auto; right: 0; }
.hb-menu__dd.is-open .hb-menu__dd-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0s;
}
.hb-menu__dd-panel a,
.hb-menu__dd-panel button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: #fff;
  text-decoration: none;
  font-family: 'greycliff-cf', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  padding: 0.6rem 0.8rem;
  border-radius: 3px;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}
.hb-menu__dd-panel a:hover,
.hb-menu__dd-panel button:hover { background: rgba(255, 255, 255, 0.02); color: #ff4844; }
.hb-menu__dd-panel a.is-active,
.hb-menu__dd-panel button.is-active { color: #ff4844; }
.hb-menu__dd-code { color: rgba(255, 255, 255, 0.5); font-size: 0.82rem; font-weight: 600; }
/* Choose Site links: Greycliff, normal case */
.hb-menu__dd--sites .hb-menu__dd-panel { min-width: 220px; }
.hb-menu__dd--sites .hb-menu__dd-panel a {
  font-family: 'greycliff-cf', sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: 0.02rem;
}
.hb-menu__bar { z-index: 2; }
.hb-menu__toggle { z-index: 3; }

/* A menu restored from the previous page is already open, so paint it that way
   rather than replaying the opening animation on every navigation. SiteMenu
   sets .is-noanim for a single frame, then drops it so the user's own close
   still animates. Covers the desktop pill (width, toggle slide, burger morph)
   and the mobile sheet (fade + staggered rows). */
.hb-menu.is-noanim .hb-menu__bar,
.hb-menu.is-noanim .hb-menu__inner,
.hb-menu.is-noanim .hb-menu__toggle,
.hb-menu.is-noanim .hb-menu__icon span,
.hb-menu.is-noanim .hb-menu__links li,
.hb-menu.is-noanim .hb-menu__contact,
.hb-menu.is-noanim .hb-menu__tier {
  transition: none !important;
}
/* ============================================================
   Mobile (<=760px): full-screen overlay sheet
   The desktop pill animates its width open leftward; a phone has no
   room for that horizontal row, so the same markup is re-laid-out as
   a full-viewport sheet that fades in with the links stacked large.
   ============================================================ */
@media (max-width: 760px) {
  /* the utility pill has no room on the bar — its Choose Site / language
     options are re-rendered inside the sheet as .hb-menu__tier instead */
  .hb-menu__util { display: none; }

  /* the sheet is full-bleed, so it has to clear the sticky promo bar
     (z-index 4000), which otherwise shows through along the top edge */
  .hb-menu.is-open { z-index: 5000; }

  /* keep the logo in front of the open sheet. .site-header is absolute at
     top:32px, so it has to go fixed too — otherwise, with the page scrolled,
     it sits off-screen above the viewport-fixed sheet. Its only visible child
     at this width is the logo; the rest of the header is display:none.
     Two selectors because the layouts differ: (frontend) renders
     .site-header, the (site) pages render .wk-top. */
  html.hb-menu-locked .site-header,
  html.hb-menu-locked .wk-top {
    position: fixed;
    z-index: 5001;
  }

  /* panel fills the viewport rather than growing leftward. position:fixed
     escapes .hb-menu's 60px box (no transformed ancestor, so it anchors
     to the viewport) */
  .hb-menu__bar {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    max-width: none;
    border-radius: 0;
    background: #14141b;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0s 0.28s;
  }
  .hb-menu.is-open .hb-menu__bar {
    width: auto;
    max-width: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    transition: opacity 0.28s ease, visibility 0s 0s;
  }

  /* the row becomes a column; the panel scrolls if the content is taller
     than the screen (small phones, landscape) */
  .hb-menu__inner {
    position: static;
    width: auto;
    height: auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    white-space: normal;
    padding: 8.5rem clamp(1.5rem, 7vw, 2.5rem) 3rem;
    visibility: inherit;          /* the sheet's own visibility drives it */
    transition: none;
  }
  .hb-menu__slot { display: none; }   /* no circle seat in the column */

  /* primary links: large, stacked, hairline-separated */
  .hb-menu__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .hb-menu__links li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }
  .hb-menu__links a {
    display: block;
    top: 0;                        /* drop the desktop 2px optical nudge */
    padding: 0.5em 0;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0em;
  }

  /* nothing slides on mobile — the circle stays on the bar as the X */
  .hb-menu.is-open .hb-menu__toggle { transform: translateX(0); }

  /* contact: full-width pill under the links */
  .hb-menu__contact {
    margin: 2rem 0 0;
    text-align: center;
    font-size: 1.15rem;
    padding: 0.9rem 1.6rem 1.05rem;
  }

  /* secondary tier: the utility bar's options, reachable on a phone */
  .hb-menu__tier { display: block; margin-top: 2.5rem; }
  .hb-menu__tier-label {
    display: block;
    margin-bottom: 0.9rem;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'greycliff-cf', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .hb-menu__tier-sites {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
  }
  .hb-menu__tier-sites a {
    display: block;
    padding: 0.4rem 0;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-family: 'greycliff-cf', sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    transition: color 0.2s ease;
  }
  .hb-menu__tier-sites a:hover,
  .hb-menu__tier-sites a.is-active { color: #ff4844; }
  .hb-menu__langs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .hb-menu__lang {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.72);
    font-family: 'greycliff-cf', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.5rem 1rem;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  }
  .hb-menu__lang.is-active {
    background: #ff4844;
    border-color: #ff4844;
    color: #fff;
  }

  /* staggered rise: each row trails the sheet's fade by a beat */
  .hb-menu__links li,
  .hb-menu__contact,
  .hb-menu__tier {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.38s ease, transform 0.38s ease;
  }
  .hb-menu.is-open .hb-menu__links li,
  .hb-menu.is-open .hb-menu__contact,
  .hb-menu.is-open .hb-menu__tier {
    opacity: 1;
    transform: translateY(0);
  }
  .hb-menu.is-open .hb-menu__links li:nth-child(1) { transition-delay: 0.10s; }
  .hb-menu.is-open .hb-menu__links li:nth-child(2) { transition-delay: 0.15s; }
  .hb-menu.is-open .hb-menu__links li:nth-child(3) { transition-delay: 0.20s; }
  .hb-menu.is-open .hb-menu__links li:nth-child(4) { transition-delay: 0.25s; }
  .hb-menu.is-open .hb-menu__links li:nth-child(5) { transition-delay: 0.30s; }
  .hb-menu.is-open .hb-menu__links li:nth-child(6) { transition-delay: 0.35s; }
  .hb-menu.is-open .hb-menu__contact { transition-delay: 0.40s; }
  .hb-menu.is-open .hb-menu__tier { transition-delay: 0.45s; }

  /* while the sheet is up the page behind it must not scroll */
  html.hb-menu-locked,
  html.hb-menu-locked body { overflow: hidden; }
}

/* the sheet still fades, but nothing travels */
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .hb-menu__links li,
  .hb-menu__contact,
  .hb-menu__tier {
    transform: none;
    transition: opacity 0.2s ease;
  }
}

/* the secondary tier belongs to the mobile sheet only */
@media (min-width: 761px) {
  .hb-menu__tier { display: none; }
}