/* ============================================================================
   STRATYLIX — SITE HEADER
   Requires assets/css/brand.css for tokens.

   Structure:
     .sx-header            sticky wrapper
       .sx-header__inner   container row
         .sx-logo          horizontal lockup (symbol + wordmark)
         .sx-nav           desktop navigation (with dropdown support)
         .sx-header__cta   desktop CTA
         .sx-burger        mobile trigger (real <button>)
     .sx-drawer            mobile drawer + scrim
   ========================================================================== */

/* ---- reset scoped to the header ------------------------------------------ */
.sx-header *,
.sx-drawer * { box-sizing: border-box; }

/* ---- wrapper -------------------------------------------------------------- */
.sx-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--hairline);
  transition: height var(--dur-slow) var(--ease-out),
              background var(--dur-slow) var(--ease),
              border-color var(--dur-slow) var(--ease),
              box-shadow var(--dur-slow) var(--ease);
}

/* Translucency only where it is actually supported and legible. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .sx-header {
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
  }
}

.sx-header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border-bottom-color: var(--border);
  box-shadow: var(--elev-2);
}

.sx-header__inner {
  height: var(--header-h);
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  transition: height var(--dur-slow) var(--ease-out);
}
.sx-header.is-scrolled .sx-header__inner { height: var(--header-h-scrolled); }

/* ---- logo lockup ---------------------------------------------------------- */
/* The lockup is two PNG cuts of the original artwork, not inline SVG — the
   colour tokens in brand.css (--logo-s-*, --logo-word) therefore do NOT reach
   it; the artwork carries its own colour. Only size, opacity and filter are
   live levers here. It never shrinks below --logo-min so the brand cannot
   visually disappear.
   Sizing: 38px inside a 76px header read as an afterthought — under half the
   available height, and shrinking another 16% the moment the page moved. */
.sx-logo {
  --logo-h: 38px;
  --logo-min: 30px;
  /* Wordmark height as a fraction of the mark. A token, not a constant, because
     the lockup is ~11:1 — every step up in height costs ~11x that in width, and
     neither the 320px mobile header nor the footer column can pay it. The
     default here is the conservative cut; only the header lockup opts up. */
  --logo-word-ratio: .46;
  display: inline-flex;
  align-items: center;
  /* The footer column is narrow enough that the lockup was wrapping, dropping
     the wordmark onto its own line under the mark. It is one unit. */
  flex-wrap: nowrap;
  gap: .72em;                 /* optical gap, scales with the lockup */
  flex: 0 0 auto;
  margin-inline-end: var(--sp-4);
  padding: var(--sp-2);       /* clear space + focus target */
  margin-inline-start: calc(var(--sp-2) * -1);
  border-radius: var(--r-sm);
  text-decoration: none;
  /* Kept for the focus ring and any text child. The wordmark is a PNG and
     does not inherit it — see the note above. */
  color: var(--logo-word);
  transition: opacity var(--dur) var(--ease);
}
/* Condense gently: enough to signal the header shrank, not enough to make
   the brand recede while the user is deep in a page. */
/* Scoped to the header: `.sx-logo` also renders in the footer brand column
   and the drawer head, and neither has the width to spend on a taller
   wordmark. Only the header lockup is being made more prominent. */
/* Emblem height is the briefed 36-42px band. The wordmark ratio is set from
   legibility, not from a target lockup width: the cut is 11.5:1, so every 1px
   of wordmark height costs 11.5px of width, and a lockup forced to 200px total
   would leave the type about 13px tall and unreadable. At .50 the cap height
   is ~20px and the lockup measures ~290px — narrower than the 329px it
   replaced, so the header gained room rather than losing it. */
.sx-header__inner > .sx-logo { --logo-h: 40px; --logo-min: 34px; --logo-word-ratio: .50; }
.sx-header.is-scrolled .sx-header__inner > .sx-logo { --logo-h: 36px; }

/* The lockup is the ORIGINAL artwork, exported at 4x so it stays crisp on 3x
   displays. Two cuts of the same file — one drawn for a dark ground, one inked
   for a light one — swapped by [data-surface]. Both are in the DOM so the swap
   is instant with no second request at toggle time. */
/* Qualified as `.sx-logo img.…` on purpose: base.css carries
   `img[width][height] { height: auto }` at specificity (0,2,1) to prevent
   layout shift, and a bare `.sx-logo__symbol` (0,1,0) loses to it no matter
   what the load order is. The width/height attributes stay for CLS. */
.sx-logo img.sx-logo__symbol {
  height: var(--logo-h);
  min-height: var(--logo-min);
  width: auto;
  display: block;
  flex: 0 0 auto;
  /* --logo-adjust is the per-surface colour correction (see below). Declared
     with an empty fallback so the hover rule can append a drop-shadow to it
     without needing to know whether a correction is set. */
  filter: var(--logo-adjust, none);
  transition: height var(--dur-slow) var(--ease-out),
              filter var(--dur) var(--ease);
}
/* No per-surface correction any more, deliberately. The old light cut was a
   chrome render whose bevel collapsed into grey at header size, and it was
   propped up with saturate/contrast/brightness. The current emblem is a dark
   navy hexagon carrying a bright cyan S, which holds its own contrast on both
   grounds, so both surfaces render the same artwork unfiltered. A filter over
   artwork is a correction of last resort: it cannot darken white letterforms,
   only grey them. --logo-adjust stays wired up below for the hover shadow. */
.sx-logo img.sx-logo__wordmark {
  /* cap-height driven, matched to the mark. Raised from .46 on desktop: the
     letterforms are a thin geometric cut, and at ~17px they read as grey
     texture rather than as a wordmark. */
  height: calc(var(--logo-h) * var(--logo-word-ratio));
  width: auto;
  display: block;
  flex: 0 0 auto;
  transition: height var(--dur-slow) var(--ease-out);
}
/* Qualified the same way as the sizing rules above. Those sit at (0,2,1) and
   carry `display: block`, so an unqualified (0,1,0) hide rule loses to them and
   BOTH cuts render at once. */
.sx-logo img.sx-logo__symbol--light,
.sx-logo img.sx-logo__wordmark--light { display: none; }
[data-surface="light"] .sx-logo img.sx-logo__symbol--dark,
[data-surface="light"] .sx-logo img.sx-logo__wordmark--dark { display: none; }
[data-surface="light"] .sx-logo img.sx-logo__symbol--light,
[data-surface="light"] .sx-logo img.sx-logo__wordmark--light { display: block; }
.sx-logo:hover .sx-logo__symbol { filter: var(--logo-adjust, ) drop-shadow(var(--glow-brand-soft)); }
.sx-logo:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* This used to hide the wordmark below 380px, but it never fired: the display
   rules above are `.sx-logo img.sx-logo__wordmark` (0,2,1) and beat a bare
   `.sx-logo__wordmark` (0,1,0) — the same specificity trap noted further up.
   Measured at 375px the full lockup fits with no overflow, so the rule is
   removed rather than "fixed" into hiding a logo that has room. */

/* ---- desktop nav ---------------------------------------------------------- */
.sx-nav {
  display: none;
  align-items: center;
  gap: var(--sp-1);
  margin-inline-start: auto;
}
.sx-nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sx-nav__item { position: relative; }

.sx-nav__link {
  display: inline-flex;
  align-items: center;
  gap: .38em;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1;
  color: var(--text-muted);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.sx-nav__link:hover { color: var(--text); background: var(--surface-2); }
.sx-nav__link:focus-visible { outline: none; box-shadow: var(--focus-ring); color: var(--text); }

/* active page */
/* `page` on the link that is this page; `true` on a panel parent whose
   section this page lives in. Both mark the current place in the nav. */
.sx-nav__link[aria-current="page"],
.sx-nav__link[aria-current="true"] { color: var(--text); }
.sx-nav__link[aria-current="page"]::after,
.sx-nav__link[aria-current="true"]::after {
  content: "";
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: -2px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
}

/* disclosure caret */
.sx-nav__caret {
  width: .6em;
  height: .6em;
  flex: 0 0 auto;
  transition: transform var(--dur) var(--ease);
}
.sx-nav__link[aria-expanded="true"] { color: var(--text); background: var(--surface-2); }
.sx-nav__link[aria-expanded="true"] .sx-nav__caret { transform: rotate(180deg); }

/* ---- dropdown / mega panel ------------------------------------------------ */
/* Architecture note: panels are authored in markup and toggled by [hidden].
   A panel with many children uses --cols to become a mega-menu. Links are only
   rendered for destinations that exist; see header.js for the placeholder rule. */
.sx-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 260px;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  background-image: var(--grad-surface);
  box-shadow: var(--elev-4);
  animation: sx-panel-in var(--dur) var(--ease-out) both;
}
.sx-panel[hidden] { display: none; }
.sx-panel--wide { --cols: 2; min-width: 520px; }
.sx-panel--mega { --cols: 3; min-width: 720px; left: 50%; transform: translateX(-50%); }

/* Grouped mega menu (Solutions). Three named columns rather than one flat
   15-item list. Centred like --mega so a wide panel cannot push the region
   picker or the CTA off the right edge. */
.sx-panel--groups {
  min-width: min(920px, calc(100vw - 2 * var(--gutter)));
  /* min-width alone does not stop the content from forcing the panel wider
     than the viewport: at 1024 it ran off the right edge. Cap it as well. */
  max-width: calc(100vw - 2 * var(--gutter));
  left: 50%;
  transform: translateX(-50%);
  animation-name: sx-panel-in-c;
}
@media (max-width: 1199.98px) {
  /* The panel is centred on its nav item, not the viewport, and Solutions sits
     well left of centre — so a 920px panel ran off the right edge at 1024.
     Below 1200 it anchors to the item's left edge and narrows to two columns,
     which keeps it inside the viewport at every width down to the breakpoint. */
  .sx-panel--groups {
    left: 0;
    transform: none;
    min-width: 0;
    width: min(620px, calc(100vw - 2 * var(--gutter)));
  }
  .sx-panel__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sx-panel__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
/* Hairline rules between the columns. Three headed lists sitting in open space
   read as one loose field of links; a rule per boundary makes the grouping the
   first thing the eye resolves. Drawn with a border on the column rather than
   a divider element so it disappears on its own when the grid reflows to two
   columns below 1200. */
.sx-panel--groups .sx-panel__group + .sx-panel__group {
  padding-inline-start: var(--sp-5);
  border-inline-start: 1px solid var(--hairline);
  margin-inline-start: calc(var(--sp-5) * -0.5);
}
.sx-panel__group .sx-panel__list { --cols: 1; }
.sx-panel__heading {
  /* Was --text-subtle (4.9:1) at the same weight as nothing else in the panel,
     which left the group names reading as disabled labels rather than as the
     structure of the menu. Muted is 7.9:1 and clearly a heading. */
  margin: 0 0 var(--sp-3);
  padding-inline: var(--sp-3);
  padding-block-end: var(--sp-2);
  border-block-end: 1px solid var(--hairline);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sx-panel__all {
  /* Was inline-block, so the border-top drew only under the text — a stray rule
     a few words wide. It is the panel's footer; it spans the panel. */
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-3) var(--sp-1);
  border-top: 1px solid var(--border);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}
.sx-panel__all:hover { text-decoration: underline; }
.sx-panel__all:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); border-radius: var(--r-sm); }

/* Drawer group headings: visual grouping only. They are aria-hidden because
   the links themselves are already in a labelled list, and announcing a bare
   heading inside a link list adds noise without adding structure. */
.sx-drawer__subhead {
  margin-top: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.sx-drawer__subhead:first-child { margin-top: 0; }
.sx-drawer__link--all { font-weight: 600; color: var(--brand); }

.sx-panel__list {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sx-panel__link {
  display: block;
  /* A left rail that fills in on hover. The flat background swap alone gave no
     sense of position in a 15-item menu; this marks the active row without
     shifting any text, since the border is always present and only changes
     colour. */
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  border-inline-start: 2px solid transparent;
  font-size: .875rem;
  line-height: 1.35;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.sx-panel__link:hover {
  color: var(--text);
  background: var(--surface-3);
  border-inline-start-color: var(--brand);
}
.sx-panel__link:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); color: var(--text); }

/* An entry with no destination yet: visible in the architecture, not clickable. */
.sx-panel__link[data-pending] {
  color: var(--text-subtle);
  cursor: default;
  pointer-events: none;
}
.sx-panel__link[data-pending]::after {
  content: "soon";
  margin-inline-start: .5em;
  padding: .1em .45em;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: .68em;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-subtle);
  vertical-align: middle;
}

@keyframes sx-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sx-panel--mega { animation-name: sx-panel-in-c; }
@keyframes sx-panel-in-c {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---- CTA ------------------------------------------------------------------ */
.sx-header__cta {
  display: none;
  align-items: center;
  gap: .4em;
  margin-inline-start: var(--sp-3);
  padding: .62rem 1.05rem;
  border: 1px solid var(--border-brand);
  border-radius: var(--r-sm);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  color: var(--brand-ink);
  text-decoration: none;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sx-header__cta:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--brand) 20%, transparent);
  border-color: var(--brand);
  box-shadow: var(--glow-brand-soft);
}
.sx-header__cta:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- mobile trigger ------------------------------------------------------- */
.sx-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 44px;                 /* >= 44px touch target */
  height: 44px;
  /* Never let the burger absorb the squeeze. The logo is `flex: 0 0 auto`, so
     when the row overran at 320px the button was the only thing that could
     give — it collapsed to 20px, half the minimum touch target, and it is the
     only control that opens the menu. It holds its size now; the narrow-width
     rule at the breakpoint below shrinks the lockup instead. */
  flex: 0 0 44px;
  margin-inline-start: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sx-burger:hover { background: var(--surface-2); border-color: var(--border-strong); }
.sx-burger:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sx-burger__bar {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: var(--r-pill);
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.sx-burger[aria-expanded="true"] .sx-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sx-burger[aria-expanded="true"] .sx-burger__bar:nth-child(2) { opacity: 0; }
.sx-burger[aria-expanded="true"] .sx-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- mobile drawer -------------------------------------------------------- */
.sx-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  grid-template-columns: 1fr min(88vw, 400px);
}
.sx-drawer[hidden] { display: none; }

.sx-drawer__scrim {
  grid-column: 1;
  background: rgba(3, 6, 12, .62);
  border: 0;
  padding: 0;
  cursor: pointer;
  animation: sx-fade var(--dur) var(--ease) both;
}
@supports (backdrop-filter: blur(1px)) {
  .sx-drawer__scrim { backdrop-filter: blur(3px); }
}

.sx-drawer__panel {
  grid-column: 2;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-4) var(--sp-4) max(var(--sp-6), env(safe-area-inset-bottom));
  background: var(--surface);
  border-inline-start: 1px solid var(--border);
  box-shadow: var(--elev-4);
  animation: sx-slide var(--dur-slow) var(--ease-out) both;
}
.sx-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h-mobile);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--hairline);
}
/* The head must never squeeze the close button out of the panel. */
.sx-drawer__head .sx-logo {
  min-width: 0;
  margin-inline-end: 0;
  padding-inline: 0;
  margin-inline-start: 0;
}
.sx-drawer__head .sx-logo__wordmark { min-width: 0; }

.sx-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.sx-drawer__close:hover { background: var(--surface-2); }
.sx-drawer__close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.sx-drawer__list { list-style: none; margin: 0; padding: 0; }
.sx-drawer__link,
.sx-drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  min-height: 48px;              /* >= 44px touch target */
  padding: var(--sp-3) var(--sp-2);
  border: 0;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  text-align: start;
  text-decoration: none;
  background: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.sx-drawer__link:hover,
.sx-drawer__toggle:hover { background: var(--surface-2); }
.sx-drawer__link:focus-visible,
.sx-drawer__toggle:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); }
.sx-drawer__toggle .sx-nav__caret { width: .7em; height: .7em; color: var(--text-subtle); }
.sx-drawer__toggle[aria-expanded="true"] .sx-nav__caret { transform: rotate(180deg); }

.sx-drawer__sub { list-style: none; margin: 0 0 var(--sp-2); padding: 0 0 0 var(--sp-3); }
.sx-drawer__sub[hidden] { display: none; }
.sx-drawer__sub .sx-drawer__link {
  min-height: 44px;
  font-size: .9375rem;
  font-weight: 400;
  color: var(--text-muted);
  border-inline-start: 1px solid var(--hairline);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.sx-drawer__sub .sx-drawer__link[data-pending] {
  color: var(--text-subtle);
  pointer-events: none;
}
.sx-drawer__sub .sx-drawer__link[data-pending]::after {
  content: "soon";
  padding: .1em .45em;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: .68em;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sx-drawer__cta {
  display: block;
  margin-top: var(--sp-5);
  padding: .9rem 1rem;
  border: 1px solid var(--border-brand);
  border-radius: var(--r-sm);
  font-weight: 600;
  color: var(--brand);
  text-align: center;
  text-decoration: none;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.sx-drawer__cta:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@keyframes sx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sx-slide { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* body scroll lock, applied by header.js */
.sx-lock { overflow: hidden; }

/* ---- breakpoint ----------------------------------------------------------- */
/* Single header breakpoint, raised 1024 -> 1120.
   The old 8-item nav needed ~1040px; the 4-item nav then fit at 1024 with ~48px
   to spare. Two changes spent that and more: Home became a fifth nav item
   (+54px) and the header lockup grew (+77px). Measured at 1024 the row needs
   979px inside a 944px content box — a 35px overflow and a horizontal
   scrollbar on the whole page. At 1120 the same row has ~61px of slack.
   Below this, the drawer carries the full menu, which it already did at 1023. */
@media (min-width: 1120px) {
  .sx-nav        { display: flex; }
  .sx-header__cta{ display: inline-flex; }
  .sx-burger     { display: none; }
}
@media (max-width: 1119.98px) {
  .sx-header__inner { height: var(--header-h-mobile); }
  .sx-header.is-scrolled .sx-header__inner { height: var(--header-h-mobile); }
  /* The header carries only the lockup and the burger below 1024px, but the
     wordmark is ~11:1 — at 320px the inner width is ~280px and a 44px burger
     takes 44 of it. The desktop bump overflows there, so mobile drops back to
     the original geometry. Still a step up from 34px: measured at 320px the
     lockup is ~250px, leaving room for the burger. */
  .sx-header__inner > .sx-logo { --logo-h: 36px; --logo-word-ratio: .46; }
  .sx-header.is-scrolled .sx-header__inner > .sx-logo { --logo-h: 36px; }
}
/* Smallest phones still in use (iPhone SE 1st gen, 320px). Content box is
   280px there; the 36px lockup wants ~250 and the burger 44, which is 14px
   over. Step the lockup down rather than crush the button. */
@media (max-width: 359.98px) {
  .sx-header__inner > .sx-logo,
  .sx-header.is-scrolled .sx-header__inner > .sx-logo { --logo-h: 30px; }
}

/* ---- reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sx-panel,
  .sx-drawer__scrim,
  .sx-drawer__panel { animation: none; }
  .sx-header,
  .sx-header__inner,
  .sx-logo__symbol,
  .sx-logo__wordmark { transition: none; }
}

/* ---- utility -------------------------------------------------------------- */
.sx-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sx-skip {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: calc(var(--z-header) + 1);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.sx-skip:focus { top: var(--sp-3); box-shadow: var(--focus-ring); outline: none; }

/* ---- theme toggle ---------------------------------------------------------
   Two icons, one visible at a time, chosen by the surface. The icon shows the
   surface you will GET, not the one you are on: a sun on the dark page, a moon
   on the light one.

   No JS is needed to pick the icon — [data-surface] on <html> does it, so the
   correct icon is painted on the very first frame alongside the no-flash
   snippet in <head>. theme.js only owns the click, persistence and the label.
   -------------------------------------------------------------------------- */
.sx-themetoggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.sx-themetoggle:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.sx-themetoggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sx-themetoggle__ico { width: 18px; height: 18px; display: block; }

/* dark surface (default): offer the sun */
.sx-themetoggle__ico--moon { display: none; }
/* light surface: offer the moon */
[data-surface="light"] .sx-themetoggle__ico--sun  { display: none; }
[data-surface="light"] .sx-themetoggle__ico--moon { display: block; }

/* In the header the toggle sits to the left of the CTA; on mobile the header
   toggle is redundant because the drawer carries one, and space is tight. */
.sx-header__inner > .sx-themetoggle { display: none; }
@media (min-width: 1120px) {
  .sx-header__inner > .sx-themetoggle { display: inline-flex; }
}
.sx-drawer__head .sx-themetoggle { margin-inline-start: auto; margin-inline-end: var(--sp-2); }

/* ---- region + language picker --------------------------------------------
   Sits beside the theme toggle and the CTA. Region and language are separate
   controls because they answer different questions — a buyer in Zurich may
   well want English — and because region never forks a URL, so it cannot
   create thin localized routes.
   -------------------------------------------------------------------------- */
.sx-region { position: relative; flex: 0 0 auto; }
.sx-region__btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 38px; padding: 0 var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: transparent; color: var(--text-muted);
  font: inherit; font-size: .8125rem; font-weight: 500; white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.sx-region__btn:hover { color: var(--text); background: var(--surface-2); border-color: var(--border-strong); }
.sx-region__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sx-region__btn svg { flex: 0 0 auto; color: var(--brand); }
.sx-region__caret { color: currentColor !important; }

.sx-region__panel {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 8px);
  z-index: var(--z-dropdown);
  width: min(320px, calc(100vw - var(--sp-6)));
  padding: var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface-2); background-image: var(--grad-surface);
  box-shadow: var(--elev-4);
}
.sx-region__panel[hidden] { display: none; }
.sx-region__row + .sx-region__row { margin-top: var(--sp-4); }
.sx-region__row label {
  display: block; margin-bottom: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-subtle);
}
.sx-region__select {
  width: 100%; min-height: 44px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-inset); color: var(--text);
  font: inherit; font-size: var(--fs-sm);
}
.sx-region__select:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring-inset); }
.sx-region__note {
  margin: var(--sp-4) 0 0; font-size: var(--fs-xs); color: var(--text-subtle);
}

/* Header instance only from the desktop breakpoint; the drawer carries mobile. */
.sx-header__inner > .sx-region { display: none; }
@media (min-width: 1120px) { .sx-header__inner > .sx-region { display: block; } }

.sx-drawer__region { margin-top: var(--sp-4); }
.sx-drawer__region .sx-region__btn { width: 100%; justify-content: space-between; min-height: 44px; }
/* In the drawer the panel would overflow a fixed panel, so it opens inline. */
.sx-drawer__region .sx-region__panel {
  position: static; width: auto; margin-top: var(--sp-2); box-shadow: none;
}

/* ---- desktop header fit ---------------------------------------------------
   The row carries logo, nine nav items, the region picker, the theme toggle and
   the CTA. Adding the region control pushed it ~146px past the 1440 container,
   which overflowed the page. The container is capped at 1440, so this is not a
   large-screen-only problem — it never fit. Tightened rather than hiding any
   navigation, since every item has to remain reachable.
   -------------------------------------------------------------------------- */
/* Tracks the header breakpoint above — these tighten the desktop row, so they
   must switch on at the same width the desktop row appears. */
@media (min-width: 1120px) {
  .sx-header__inner { gap: var(--sp-3); }
  .sx-logo { margin-inline-end: var(--sp-2); }
  .sx-nav { gap: 0; }
  .sx-nav__list { gap: 0; }
  .sx-nav__link { padding-inline: var(--sp-2); font-size: .8125rem; }
  .sx-header__cta { padding-inline: var(--sp-4); }
  .sx-region__btn { padding-inline: var(--sp-2); }
}
/* No wider variant: the container is capped at 1440, so there is never more
   room than this. Re-widening above 1320 put the row back over the edge. */