/* =============================================================
   ORBISS GLOBAL HEADER NAVIGATION MODULE
   -------------------------------------------------------------
   Base Color   : #3a2e7b
   Text Color   : #ffffff
   Font         : Brandon Grotesque (Adobe Fonts: 'brandon-grotesque')
                  Load kit in HubSpot Settings › Website › Pages › Site header HTML
                  e.g. <link rel="stylesheet" href="https://use.typekit.net/YOUR_KIT.css">
   Layout       : CSS Grid — Logo left · Nav centered · Lang right
   Position     : fixed (sticky at top on scroll)
   ============================================================= */

/* ─── CSS Custom Properties ─── */
:root {
  --orbiss-purple:      #3a2e7b;
  --orbiss-purple-dark: #2d2363;
  --orbiss-purple-mid:  #4a3d9b;
  --orbiss-white:       #ffffff;
  --orbiss-white-dim:   rgba(255, 255, 255, 0.70);
  --orbiss-white-hover: rgba(255, 255, 255, 0.12);
  --orbiss-shadow:      0 4px 24px rgba(58, 46, 123, 0.22);
  --orbiss-font:        'brandon-grotesque', 'Brandon Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --orbiss-header-h:    64px;
  --orbiss-transition:  0.22s ease;
  --orbiss-dropdown-radius: 12px;
}

/* ─── Font lock — force Brandon Grotesque across all header children ─── */
#orbiss-header,
#orbiss-header * {
  font-family: 'brandon-grotesque', 'Brandon Grotesque', 'Helvetica Neue', Arial, sans-serif !important;
}

/* ─── Header-scoped link reset (ID gives max specificity over theme CSS) ─── */
#orbiss-header a,
#orbiss-header a:hover,
#orbiss-header a:focus,
#orbiss-header a:active,
#orbiss-header a:visited {
  text-decoration: none !important;
  color: inherit;
}

/* Dropdown links: locked base appearance for <a> items */
#orbiss-header .orbiss-header__dropdown a,
#orbiss-header .orbiss-header__dropdown a:active,
#orbiss-header .orbiss-header__dropdown a:visited {
  text-decoration: none !important;
  background-color: transparent !important;
  color: rgba(17, 24, 39, 0.7) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
}

/* Hover/focus handled by the highlight rule below — do NOT force transparent here */

/* ─── Prevent horizontal scroll caused by 100vw full-bleed modules ───

   `hidden` is the floor, not the answer. It makes the element a scroll
   container on both axes, so anything it clips horizontally is still *there* —
   scrollable programmatically but with no way for a sighted mouse or keyboard
   user to bring it into view. It also silently breaks `position: sticky` in
   every descendant.

   `clip` clips without creating a scroll container: nothing is hidden-but-
   present and sticky keeps working. Layered under @supports so Safari below 16
   and any other engine without `clip` keeps the old behaviour rather than
   losing the guard entirely and shipping a horizontal scrollbar. */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

/* ─── Body offset so fixed header doesn't overlap content ─── */
body {
  padding-top: var(--orbiss-header-h);
  background-color: #f7f7f7;
  font-family: 'brandon-grotesque', 'Brandon Grotesque', 'Helvetica Neue', Arial, sans-serif;
}

/* The outermost wrapper sits directly below the fixed bar */
.body-wrapper {
  margin-top: 0;
  padding-top: 0;
}

/* ─────────────────────────────────────────────────────────────
   BASE HEADER
───────────────────────────────────────────────────────────── */
.orbiss-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  width: 100%;
  height: var(--orbiss-header-h);
  background-color: transparent;
  font-family: var(--orbiss-font);
  transition: box-shadow var(--orbiss-transition),
              background-color var(--orbiss-transition);
}

/* No backdrop-filter here, and none in the base rule above.
   It was doing nothing visible and was actively hurting: the scrolled
   background is #f7f7f7 at full alpha, so there is no page content showing
   through for a blur to act on. What it did do was promote the header to its
   own composited layer permanently - `blur(0px)` in the base state is still a
   non-none backdrop-filter, and it was in the transition list, so the layer
   existed from first paint rather than only while scrolled.

   That layer is what softened the logo. A composited layer under fractional
   display scaling (Windows at 125% / 150%, a browser at 110%) rasterises on
   the device pixel grid and is then resampled to the fractional ratio, so a
   34px-tall bitmap gets a half-pixel resample it never asked for. Text shows
   it too, just less, because it is re-rasterised per layer while an <img> is
   not.

   Dropping it costs nothing and the header paints in the page's own layer. */
.orbiss-header--scrolled {
  background-color: #f7f7f7;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 24px rgba(0, 0, 0, 0.06);
}

/* ─── Inner grid wrapper: Logo | Nav | Actions ─── */
.orbiss-header__inner {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
  column-gap: 0;
}

/* ─────────────────────────────────────────────────────────────
   LEFT COLUMN — Logo / Home Icon
───────────────────────────────────────────────────────────── */
.orbiss-header__logo-col {
  justify-self: start;
  display: flex;
  align-items: center;
}

.orbiss-header__logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  outline-offset: 4px;
}

.orbiss-header__logo-img {
  display: block;
  height: 34px;
  max-height: 34px;
  width: auto;
  object-fit: contain;
}

/* HubSpot site logo module override */
.orbiss-header__logo-col .hs_cos_wrapper_type_logo img {
  height: 34px;
  max-height: 34px;
  width: auto;
}

/* Default home SVG icon */
.orbiss-header__home-icon {
  display: block;
  width: 28px;
  height: 28px;
  transition: opacity var(--orbiss-transition);
}

.orbiss-header__logo-link:hover .orbiss-header__home-icon,
.orbiss-header__logo-link:focus .orbiss-header__home-icon {
  opacity: 0.80;
}

/* ─────────────────────────────────────────────────────────────
   CENTER COLUMN — Desktop Navigation
───────────────────────────────────────────────────────────── */
.orbiss-header__nav--desktop {
  display: flex;
  align-items: center;
}

.orbiss-header__nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

/* ─── Top-level nav item ─── */
.orbiss-header__item {
  position: relative;
  list-style: none;
}

/* height: auto so items sit on the same center line as logo & lang icon */
.orbiss-header__item--d1 {
  height: auto;
  display: flex;
  align-items: center;
}

/* ─── Nav link ─── */
.orbiss-header__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  font-family: 'brandon-grotesque', 'Brandon Grotesque', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-variant: normal !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em !important;
  color: rgba(17, 24, 39, 0.65);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 8px;
  -webkit-font-smoothing: antialiased;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.orbiss-header__link:hover,
.orbiss-header__link:focus {
  font-family: 'brandon-grotesque', 'Brandon Grotesque', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-variant: normal !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em !important;
  color: #111827 !important;
  text-decoration: none !important;
  -webkit-font-smoothing: antialiased;
  outline: none;
  background: transparent !important;
  transform: none !important;
}

/* Solid purple, not rgba(58, 46, 123, 0.3): composited onto the header's
   #f7f7f7 scrolled background the translucent ring is ~1.3:1 against it, while
   solid purple is 10.6:1. The white box-shadow underneath carries the ring when
   the same link sits on the dark purple mobile panel, so one rule covers both
   surfaces. */
.orbiss-header__link:focus-visible {
  outline: 2px solid var(--orbiss-purple);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--orbiss-white);
  border-radius: 6px;
}

/* ─── Submenu trigger with no destination URL ───────────────────
   Rendered as a real <button> (see the accessibility contract at the top
   of module.html) so it is keyboard-focusable. This reset makes the
   button visually identical to the <a>/<span> it replaced. Font, colour
   and padding are already inherited from .orbiss-header__link above.   */
button.orbiss-header__link {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

/* Inert label — no url and no children, so nothing to activate. */
span.orbiss-header__link--plain {
  cursor: default;
}

/* Active / current page */
.orbiss-header__link--active {
  color: #111827;
}

/* ─── Chevron arrow ─── */
.orbiss-header__chevron {
  flex-shrink: 0;
  pointer-events: none;
}

.orbiss-header__chevron path {
  stroke: rgba(17, 24, 39, 0.5) !important;
}

.orbiss-header__item--has-sub:hover > .orbiss-header__link .orbiss-header__chevron,
.orbiss-header__item--has-sub:focus-within > .orbiss-header__link .orbiss-header__chevron,
.orbiss-header__item--open > .orbiss-header__link .orbiss-header__chevron {
  transform: rotate(180deg);
}

/* ─────────────────────────────────────────────────────────────
   DROPDOWN MENUS
───────────────────────────────────────────────────────────── */
.orbiss-header__dropdown {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 0px);
  left: 0;
  transform: translateY(-8px);
  min-width: 210px;
  background-color: #ffffff;
  border-radius: var(--orbiss-dropdown-radius);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(58, 46, 123, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  list-style: none;
  margin: 0;
  padding: 0.4rem 6px;
  z-index: 10000;
  transition: opacity var(--orbiss-transition), transform var(--orbiss-transition), visibility var(--orbiss-transition);
}

/* Show on hover / focus-within */
.orbiss-header__item--has-sub:hover > .orbiss-header__dropdown,
.orbiss-header__item--has-sub:focus-within > .orbiss-header__dropdown,
.orbiss-header__item--open > .orbiss-header__dropdown {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* 1.4.13 Content on Hover or Focus — Dismissible.
   The two rules above open this dropdown from :hover and :focus-within, which
   are states Escape cannot change: clearing the .--open class alone left the
   panel painted for as long as the pointer stayed on the item, or as long as
   focus stayed on the trigger. This class is set by module.js on Escape and
   cleared on the next mouseleave / focusout, so Escape dismisses the panel
   without requiring the visitor to move the pointer or the focus away. */
.orbiss-header__item--dismissed > .orbiss-header__dropdown {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}

/* Dropdown items */
.orbiss-header__dropdown .orbiss-header__item {
  width: 100%;
  height: auto;
}

.orbiss-header__dropdown .orbiss-header__link,
.orbiss-header__dropdown .orbiss-header__link:active,
.orbiss-header__dropdown .orbiss-header__link:visited {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: 'brandon-grotesque', 'Brandon Grotesque', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-variant: normal !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em !important;
  color: rgba(17, 24, 39, 0.7) !important;
  background-color: transparent !important;
  text-decoration: none !important;
  -webkit-font-smoothing: antialiased !important;
  transform: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  box-shadow: none !important;
}

/* Dropdown item hover highlight — ID-scoped to beat HubSpot theme on <a> elements */
#orbiss-header .orbiss-header__dropdown .orbiss-header__link:hover,
#orbiss-header .orbiss-header__dropdown .orbiss-header__link:focus,
#orbiss-header .orbiss-header__dropdown a:hover,
#orbiss-header .orbiss-header__dropdown a:focus {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: #111827 !important;
  text-decoration: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.orbiss-header__dropdown .orbiss-header__link--active {
  font-weight: 400 !important;
  color: rgba(17, 24, 39, 0.7) !important;
}

.orbiss-header__dropdown .orbiss-header__link--active::after {
  display: none;
}

/* Level 3 sub-dropdown (flies out to the right) */
.orbiss-header__dropdown--l3 {
  top: 0;
  left: 100%;
  transform: translateX(4px) translateY(-8px);
}

.orbiss-header__dropdown--l3::before {
  display: none;
}

.orbiss-header__item--has-sub:hover > .orbiss-header__dropdown--l3,
.orbiss-header__item--has-sub:focus-within > .orbiss-header__dropdown--l3 {
  transform: translateX(4px) translateY(0);
}

/* ─────────────────────────────────────────────────────────────
   RIGHT COLUMN — Language Switcher + Hamburger
───────────────────────────────────────────────────────────── */
.orbiss-header__actions-col {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  padding-left: 0.5rem;
}

/* ─── Language Switcher — Globe Icon ─── */
.orbiss-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Globe toggle button */
.orbiss-lang__toggle,
.orbiss-lang__toggle:hover,
.orbiss-lang__toggle:focus,
.orbiss-lang__toggle:active {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 8px;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  color: rgba(17, 24, 39, 0.55) !important;
  cursor: pointer;
  flex-shrink: 0;
  outline: none;
  transition: color 0.15s ease;
}

/* Solid, not rgba(131, 131, 135, 0.4): the translucent ring was ~1.5:1 against
   the header on both the light scrolled background and the purple mobile panel.
   The !important is required because the rule above zeroes box-shadow with
   !important. */
.orbiss-lang__toggle:focus-visible {
  outline: 2px solid var(--orbiss-purple) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--orbiss-white) !important;
}

/* Globe SVG — stroke follows currentColor so it matches the toggle color */
.orbiss-lang__globe,
.orbiss-lang__toggle:hover .orbiss-lang__globe,
.orbiss-lang__toggle:focus .orbiss-lang__globe {
  flex-shrink: 0;
  stroke: currentColor !important;
  display: block;
}

/* Chevron — stroke follows currentColor */
.orbiss-lang__chevron {
  flex-shrink: 0;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.orbiss-lang__chevron path,
.orbiss-lang__toggle:hover .orbiss-lang__chevron path,
.orbiss-lang__toggle:focus .orbiss-lang__chevron path {
  stroke: currentColor !important;
}

/* Dropdown panel */
.orbiss-lang__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(58, 46, 123, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  z-index: 10001;
  overflow: hidden;
}

.orbiss-lang__dropdown--open {
  display: block;
}

/* Caret removed — overflow:hidden on the rounded dropdown clips it */

/* Dropdown option links */
.orbiss-lang__option {
  display: block;
  padding: 8px 12px;
  font-family: var(--orbiss-font);
  font-size: 14px;
  font-weight: 400;
  color: rgba(17, 24, 39, 0.7);
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}

.orbiss-lang__option:hover,
.orbiss-lang__option:focus {
  background-color: rgba(0, 0, 0, 0.05);
  color: #111827;
}

.orbiss-lang__option--active {
  color: var(--orbiss-purple);
  font-weight: 500;
}

/* ─── CTA Button ─── */
.orbiss-header__cta,
.orbiss-header__cta:visited {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: 9999px;
  font-family: var(--orbiss-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  -webkit-font-smoothing: antialiased;
  border: none;
  outline: none;
  background-color: var(--orbiss-purple) !important;
  color: #ffffff !important;
  transition: opacity 0.2s ease;
}

.orbiss-header__cta:hover,
.orbiss-header__cta:focus,
.orbiss-header__cta:active {
  background-color: var(--orbiss-purple) !important;
  color: #ffffff !important;
  opacity: 0.88;
  text-decoration: none !important;
}

/* ─── Hamburger Button ─── */
.orbiss-header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color var(--orbiss-transition);
  flex-shrink: 0;
}

.orbiss-header__hamburger:hover {
  background-color: var(--orbiss-white-hover);
}

.orbiss-header__ham-line {
  display: block;
  width: 22px;
  height: 2px;
  background-color: rgba(17, 24, 39, 0.7);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.28s ease, opacity 0.18s ease, width 0.22s ease;
}

/* Hamburger → X animation */
.orbiss-header__hamburger--open .orbiss-header__ham-line--top {
  transform: translateY(7px) rotate(45deg);
}

.orbiss-header__hamburger--open .orbiss-header__ham-line--mid {
  opacity: 0;
  transform: scaleX(0);
}

.orbiss-header__hamburger--open .orbiss-header__ham-line--bot {
  transform: translateY(-7px) rotate(-45deg);
}

/* ─────────────────────────────────────────────────────────────
   MOBILE NAVIGATION PANEL
───────────────────────────────────────────────────────────── */
.orbiss-header__mobile-nav {
  display: none;
  position: fixed;
  top: var(--orbiss-header-h);
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--orbiss-purple) !important;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.25rem 0 3rem;
  z-index: 9998;
  transform: translateX(100%);
/* visibility:hidden matters as much as the transform. Below 768px this
     panel is display:block and merely slid off-canvas, so without it every
     link inside stays in the tab order while the panel is closed — and the
     panel carries aria-hidden="true", so those would be focusable elements
     hidden from assistive tech. The delay keeps the panel painted for the
     duration of the slide-out. */
  visibility: hidden;
  transition: transform 0.30s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0.30s;
  -webkit-overflow-scrolling: touch;
}

.orbiss-header__mobile-nav--open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.30s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0s;
}

/* Mobile nav list */
.orbiss-header__nav-list--mobile {
  flex-direction: column;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mobile top-level items */
.orbiss-header__mobile-nav .orbiss-header__item--d1 {
  height: auto;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.orbiss-header__mobile-nav .orbiss-header__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: auto;
  padding: 1rem 1.5rem;
  font-size: 16px;
  color: #ffffff !important;
  background: transparent;
}

.orbiss-header__mobile-nav .orbiss-header__link:hover,
.orbiss-header__mobile-nav .orbiss-header__link:focus {
  background-color: var(--orbiss-white-hover);
  color: #ffffff !important;
}

.orbiss-header__mobile-nav .orbiss-header__link--active::after {
  display: none;
}

/* Mobile dropdown (static, not absolute)
   visibility:hidden — NOT just max-height:0 — because max-height/overflow
   clip a collapsed submenu visually but leave its links in the tab order, so a
   keyboard user would tab into links they cannot see and lose the focus ring
   off-panel. The transition-delay on visibility keeps the links painted while
   the panel collapses; the open-state rule below drops the delay so they
   appear immediately on expand. */
.orbiss-header__mobile-nav .orbiss-header__dropdown {
  visibility: hidden;
  opacity: 1;
  pointer-events: none;
  position: static;
  transform: none;
  box-shadow: none;
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0.18);
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease, padding 0.18s ease, visibility 0s linear 0.28s;
}

.orbiss-header__mobile-nav .orbiss-header__dropdown::before {
  display: none;
}

.orbiss-header__mobile-nav .orbiss-header__item--open > .orbiss-header__dropdown {
  visibility: visible;
  pointer-events: auto;
  max-height: 500px;
  padding: 0.25rem 0;
  transition: max-height 0.28s ease, padding 0.18s ease, visibility 0s linear 0s;
}

.orbiss-header__mobile-nav .orbiss-header__dropdown .orbiss-header__link {
  padding: 0.75rem 2.5rem;
  font-size: 14px;
  color: #ffffff !important;
  background: transparent;
}

.orbiss-header__mobile-nav .orbiss-header__dropdown .orbiss-header__link:hover,
.orbiss-header__mobile-nav .orbiss-header__dropdown .orbiss-header__link:focus {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff !important;
}

/* Mobile chevron (white) */
.orbiss-header__mobile-nav .orbiss-header__chevron path {
  stroke: #ffffff !important;
}

/* ─── Mobile CTA wrapper (inside hamburger panel) ─── */
.orbiss-header__mobile-cta-wrap {
  display: none;
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin-top: auto;
}

.orbiss-header__cta--mobile,
.orbiss-header__cta--mobile:hover,
.orbiss-header__cta--mobile:focus,
.orbiss-header__cta--mobile:active,
.orbiss-header__cta--mobile:visited {
  display: flex !important;
  justify-content: center;
  width: 100%;
  padding: 14px 22px;
  border-radius: 9999px;
  font-family: var(--orbiss-font);
  font-size: 15px;
  /* 700, not 600: Brandon Grotesque ships 100/300/400/500/700/900 — there is no
     Semibold face, so 600 was already resolving to Bold. */
  font-weight: 700;
  text-align: center;
  text-decoration: none !important;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  background-color: #ffffff !important;
  color: #3a2e7b !important;
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — SMALL DESKTOP (1100px – 1280px)
───────────────────────────────────────────────────────────── */
@media (min-width: 1100px) and (max-width: 1280px) {
  .orbiss-header__inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .orbiss-header__link {
    font-size: 15px !important;
    padding: 8px 10px;
  }

  .orbiss-header__cta {
    padding: 8px 16px;
    font-size: 13px;
  }
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — TABLET (768px – 1024px)
───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1099px) {
  .orbiss-header__inner {
    padding: 0 16px;
  }

  .orbiss-header__link {
    font-size: 14px !important;
    padding: 8px 10px;
  }

  .orbiss-header__logo-img {
    height: 28px;
    max-height: 28px;
  }

  .orbiss-header__cta {
    padding: 7px 14px;
    font-size: 13px;
  }
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — MOBILE (below 768px)
───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  :root {
    --orbiss-header-h: 62px;
  }

  .orbiss-header__inner {
    grid-template-columns: auto 1fr auto;
    padding: 0 1rem;
  }

  /* Light background for the mobile header bar */
  .orbiss-header {
    background-color: #f7f7f7 !important;
  }

  .orbiss-header--scrolled {
    background-color: #f7f7f7 !important;
  }

  /* Hide desktop nav */
  .orbiss-header__nav--desktop {
    display: none;
  }

  /* Keep lang switcher visible in mobile header bar */
  .orbiss-header__lang-wrap--desktop {
    display: inline-flex;
  }

  /* Hide header bar CTA on mobile — keep the mobile panel CTA */
  .orbiss-header__actions-col .orbiss-header__cta {
    display: none !important;
  }

  /* Show hamburger */
  .orbiss-header__hamburger {
    display: flex;
  }

  /* Show mobile nav panel (visibility toggled via JS) */
  .orbiss-header__mobile-nav {
    display: block;
    background-color: #f7f7f7 !important;
  }

  /* Item dividers — dark on light background */
  .orbiss-header__mobile-nav .orbiss-header__item--d1 {
    border-bottom-color: rgba(0, 0, 0, 0.08);
  }

  /* Nav link text — dark on light background.
     #5f5f66, not #838387: the panel is #f7f7f7 and the nested dropdown adds a
     4% black wash over it, so the old grey read at 3.52:1 on the top level and
     2.89:1 on a hovered sub-item — below the 4.5:1 that 1.4.3 asks of body-size
     text. #5f5f66 keeps the same neutral, slightly cool grey and clears 4.5:1
     on all three surfaces (5.91 / 5.41 / 4.84). */
  .orbiss-header__mobile-nav .orbiss-header__link {
    color: #5f5f66 !important;
  }

  .orbiss-header__mobile-nav .orbiss-header__link:hover,
  .orbiss-header__mobile-nav .orbiss-header__link:focus {
    background-color: rgba(0, 0, 0, 0.05);
    color: #5f5f66 !important;
  }

  /* Mobile sub-dropdown background — subtle on light bg */
  .orbiss-header__mobile-nav .orbiss-header__dropdown {
    background-color: rgba(0, 0, 0, 0.04);
  }

  /* Dropdown item text */
  .orbiss-header__mobile-nav .orbiss-header__dropdown .orbiss-header__link {
    color: #5f5f66 !important;
  }

  .orbiss-header__mobile-nav .orbiss-header__dropdown .orbiss-header__link:hover,
  .orbiss-header__mobile-nav .orbiss-header__dropdown .orbiss-header__link:focus {
    background-color: rgba(0, 0, 0, 0.05);
    color: #5f5f66 !important;
  }

  /* Chevron — match text color */
  .orbiss-header__mobile-nav .orbiss-header__chevron path {
    stroke: #5f5f66 !important;
  }

  /* CTA divider — dark on light background */
  .orbiss-header__mobile-cta-wrap {
    border-top-color: rgba(0, 0, 0, 0.08);
  }

  /* Inverted CTA button — purple bg + white text on light panel */
  .orbiss-header__cta--mobile,
  .orbiss-header__cta--mobile:hover,
  .orbiss-header__cta--mobile:focus,
  .orbiss-header__cta--mobile:active,
  .orbiss-header__cta--mobile:visited {
    background-color: #3a2e7b !important;
    color: #ffffff !important;
  }

  /* Logo adjustments */
  .orbiss-header__logo-img {
    height: 36px;
    max-height: 36px;
  }

  /* Show CTA inside hamburger panel */
  .orbiss-header__mobile-cta-wrap {
    display: block;
  }
}

/* ─────────────────────────────────────────────────────────────
   ACCESSIBILITY — Focus styles
───────────────────────────────────────────────────────────── */
/* Same ring as the two rules above, applied to the shared list. The purple ring
   carries the light header, the white halo carries the dark mobile panel, so no
   surface is left with an indicator below 3:1. */
.orbiss-header__link:focus-visible,
.orbiss-lang__toggle:focus-visible,
.orbiss-header__hamburger:focus-visible,
.orbiss-header__logo-link:focus-visible {
  outline: 2px solid var(--orbiss-purple);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--orbiss-white);
  border-radius: 4px;
}

/* The CTA sets `outline: none` in its base rule, so the ring is restated here.
   It is solid purple, so the ring is inverted: white against the button, purple
   against whatever the button sits on. */
.orbiss-header__cta:focus-visible {
  outline: 2px solid var(--orbiss-white) !important;
  outline-offset: -3px;
  box-shadow: 0 0 0 2px var(--orbiss-purple);
}

/* The language options only shift their background by ~5% on focus, which is
   not a perceivable indicator on its own. The dropdown panel is white, so a
   purple ring reads at 10.6:1. */
.orbiss-lang__option:focus-visible {
  outline: 2px solid var(--orbiss-purple);
  outline-offset: -2px;
}

/* Screen reader only */
.orbiss-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip to content link */
.header__skip {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 10001;
  background: var(--orbiss-white);
  color: var(--orbiss-purple);
  padding: 0.5rem 1rem;
  border-radius: 0 0 6px 6px;
  font-family: var(--orbiss-font);
  font-size: 14px;
  /* 700, not 600: no Semibold face in Brandon Grotesque (see .orbiss-header__cta--mobile). */
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s;
}

.header__skip:focus {
  top: 0;
}