/* Header studies share the page palette and spacing. */
:root {
  --header-surface: var(--ink);
  --header-text: var(--paper);
  --header-action: var(--accent);
  --header-action-text: var(--ink);
  --header-row: 100px;
  --header: var(--header-row);
  --header-logo: clamp(210px, 15vw, 240px);
  --header-logo-compact: 180px;
  --header-logo-active: var(--header-logo);
  --header-nav-row: 44px;
  --header-mobile-row: 76px;
  --header-mobile-action: 52px;
  --header-action-size: clamp(17px, 1.7vw, 26px);
  --header-lang-gap: var(--gap-xs);
  --header-lang-muted: 55%;
  /* Mobile call-to-action studies (the `mobilecta` axis). */
  --header-pill-height: 40px;
  --header-pill-radius: 999px;
  --header-pill-pad: calc(var(--gap-sm) - var(--gap-xs) / 2);
  --header-icon-size: 44px;
  --header-bar-height: var(--header-mobile-action);
}
[data-card="machine"] {
  --header-surface: var(--accent);
  --header-text: var(--ink);
  --header-action: var(--ink);
  --header-action-text: var(--paper);
}
[data-header="bar"] {
  --header-surface: var(--accent);
  --header-text: var(--ink);
  --header-action: var(--ink);
  --header-action-text: var(--paper);
}
[data-card="machine"][data-header="bar"] {
  --header-surface: var(--ink);
  --header-text: var(--paper);
  --header-action: var(--accent);
  --header-action-text: var(--ink);
}
.site-header {
  position: fixed;
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: var(--gap-md);
  background: var(--header-surface);
  color: var(--header-text);
}
.site-header .brand {
  width: var(--header-logo-active);
  transition: width var(--fast) var(--ease);
}
[data-header-scrolled="true"] { --header-logo-active: var(--header-logo-compact); }
[data-card="machine"] .site-header { color: var(--header-text); }
.site-header nav { gap: var(--gap-md); align-items: center; }
.header-login { font-size: var(--small); text-decoration: none; }
/* Language switch: a disclosure button with the current language in the face
   and size of the login link, opening the three versions (real links to their
   addresses, the current one in full ink, the others muted) on white paper, so
   the list never sits yellow on the yellow header. */
.header-lang {
  --header-lang-chevron: .4em;
  --header-lang-menu-gap: var(--gap-xs);
  --header-lang-menu-surface: var(--paper);
  --header-lang-menu-text: var(--ink);
  --header-lang-menu-rule: color-mix(in srgb, var(--ink) 15%, transparent);
  --header-lang-item-pad: calc(var(--gap-xs) * 1.5);
  position: relative;
  display: flex;
  align-items: center;
  font-size: var(--small);
}
.header-lang-toggle {
  display: flex; align-items: center; gap: var(--header-lang-gap);
  padding: var(--gap-xs) 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer;
}
.header-lang-toggle::after {
  content: ""; width: var(--header-lang-chevron); height: var(--header-lang-chevron);
  border-right: var(--hairline) solid currentColor; border-bottom: var(--hairline) solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--fast) var(--ease);
}
.header-lang-toggle[aria-expanded="true"]::after { transform: translateY(25%) rotate(225deg); }
.header-lang-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.header-lang-menu {
  position: absolute; top: calc(100% + var(--header-lang-menu-gap)); right: 0; z-index: 1;
  display: grid; width: max-content;
  padding: var(--gap-xs) var(--gap-md);
  background: var(--header-lang-menu-surface); color: var(--header-lang-menu-text);
  border: var(--hairline) solid var(--header-lang-menu-rule); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.header-lang-menu[hidden] { display: none; }
.header-lang-menu a {
  display: block; padding: var(--header-lang-item-pad) 0;
  text-decoration: none;
  color: color-mix(in srgb, var(--header-lang-menu-text) var(--header-lang-muted), transparent);
}
.header-lang-menu a:hover, .header-lang-menu a[aria-current] { color: var(--header-lang-menu-text); }
.header-lang-menu a[aria-current] { text-decoration: underline; text-underline-offset: var(--gap-xs); }
.header-lang-menu a:focus-visible { outline-color: var(--ink); outline-offset: 0; }
@media (prefers-reduced-motion: reduce) { .header-lang-toggle::after { transition: none; } }
/* Offer of the version in the browser's language (i18n.js): a small pill under the
   header at its right end, below the hanging call to action, in the translucent ink
   of the capsule header and the cookie capsule; beneath the header's own layer, so
   the language list and the mobile menu open over it. */
.lang-offer {
  --lang-offer-top: calc(var(--frame-top) + var(--header) + var(--header-cta-overhang, 0px) + var(--gap-sm));
  --lang-offer-surface: color-mix(in srgb, var(--ink) 88%, transparent);
  --lang-offer-button: color-mix(in srgb, var(--paper) 14%, transparent);
  --lang-offer-blur: 10px;
  position: fixed; top: var(--lang-offer-top); right: var(--gutter); z-index: 9;
  display: flex; align-items: center; gap: var(--gap-xs);
  max-width: calc(100vw - 2 * var(--gutter));
  padding: var(--gap-xs) var(--gap-xs) var(--gap-xs) var(--gap-md);
  border-radius: var(--header-pill-radius);
  color: var(--paper); font-size: var(--small);
}
.lang-offer::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: var(--lang-offer-surface);
  backdrop-filter: blur(var(--lang-offer-blur)); -webkit-backdrop-filter: blur(var(--lang-offer-blur));
}
.lang-offer p { font-size: inherit; margin-right: var(--gap-xs); }
.lang-offer-switch, .lang-offer-close {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  height: var(--header-pill-height); min-width: var(--header-pill-height); padding: 0 var(--header-pill-pad);
  border: 0; border-radius: var(--header-pill-radius);
  background: var(--lang-offer-button); color: var(--paper);
  font: inherit; text-decoration: none; cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.lang-offer-close { padding: 0; }
.lang-offer-switch:hover, .lang-offer-close:hover { background: var(--accent); color: var(--ink); }
.lang-offer a:focus-visible, .lang-offer button:focus-visible { outline: var(--focus); outline-offset: var(--hairline); }
@media (max-width: 700px) {
  .lang-offer { left: var(--gutter); border-radius: var(--gap-md); padding-left: var(--gap-sm); }
  .lang-offer p { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .lang-offer-switch, .lang-offer-close { transition: none; } }
.header-menu { display: none; }
.site-header .header-cta {
  background: var(--header-action);
  color: var(--header-action-text);
  font-size: var(--header-action-size);
  white-space: nowrap;
}
.site-header .header-cta:hover { background: var(--header-action); }
.site-header a:focus-visible, .site-header button:focus-visible,
[data-card="machine"] .site-header a:focus-visible { outline-color: currentColor; }
/* Desktop `open` header after the Figma frame (Turbotendr · Weave, node 5:391, 1440 wide):
   a 92 px band, the call to action one --gap-xs taller than the band so it hangs below
   it with only its lower left corner rounded, a 200 px logo box, 15 px medium navigation
   and a 22 px button label; padding, gap and radius come from the shared tokens. The
   language switch, absent from the frame, stays beside Login. */
@media (width > 1100px) {
  [data-header="open"] {
    --header-row: 92px;
    --header-cta-overhang: var(--gap-xs);
    --header-logo: 200px;
    --header-nav-size: 15px;
    --header-nav-weight: 500;
    --header-action-size: 22px;
  }
  [data-header="open"] .site-header nav a, [data-header="open"] .header-login,
  [data-header="open"] .header-lang { font-size: var(--header-nav-size); font-weight: var(--header-nav-weight); }
  [data-header="open"] .header-cta { margin-bottom: calc(-1 * var(--header-cta-overhang)); }
}
[data-header="bar"] .site-header { padding-right: var(--gutter); }
[data-header="bar"] .header-cta {
  align-self: center;
  border-radius: var(--radius);
  padding: var(--gap-sm) var(--gap-md);
}
[data-header="split"] { --header: calc(var(--header-row) + var(--header-nav-row)); }
[data-header="split"] .site-header {
  grid-template-columns: 1fr auto auto auto;
  grid-template-rows: var(--header-row) var(--header-nav-row);
  column-gap: var(--gap-lg);
  row-gap: 0;
}
[data-header="split"] .site-header nav {
  grid-row: 2;
  grid-column: 1 / -1;
  width: 100%;
  height: 100%;
  margin: 0;
  border-top: var(--hairline) solid currentColor;
}
@media (max-width: 1100px) {
  :root, [data-header="split"] {
    --header: calc(var(--header-mobile-row) + var(--header-mobile-action));
    --header-action-size: 18px;
    --header-logo: 180px;
    --header-logo-compact: 148px;
  }
  .site-header, [data-header="split"] .site-header, [data-header="bar"] .site-header {
    padding: 0 var(--gutter);
    grid-template-columns: 1fr auto auto auto;
    grid-template-rows: var(--header-mobile-row) var(--header-mobile-action);
    column-gap: var(--gap-sm);
    row-gap: 0;
  }
  .header-menu {
    display: block;
    padding: var(--gap-xs) 0;
    border: 0;
    background: transparent;
    font-size: var(--small);
    cursor: pointer;
  }
  .site-header .header-cta, [data-header="bar"] .header-cta {
    grid-row: 2;
    grid-column: 1 / -1;
    max-width: none;
    margin: 0;
    align-self: stretch;
    justify-content: space-between;
    padding: var(--gap-xs) var(--gap-sm);
    border-radius: var(--radius);
  }
  .site-header nav, [data-header="split"] .site-header nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: auto;
    margin: 0;
    padding: var(--gap-md) var(--gutter);
    background: var(--header-surface);
    border-bottom: var(--hairline) solid currentColor;
    border-top: 0;
  }
  .site-header.menu-open nav { display: flex; flex-direction: column; align-items: flex-start; }
  .site-header nav a { font-size: var(--body); }
  html:not(.js) .site-header nav { display: flex; }
}
@media (max-width: 700px) {
  :root { --header-logo: 156px; --header-logo-compact: 126px; }
}
@media (max-width: 360px) {
  :root { --header-logo: 136px; --header-logo-compact: 112px; }
}

/* BottleCap reference: floating translucent capsule, centered links, full mobile menu. */
[data-header="capsule"] {
  --capsule-inset: var(--gap-sm);
  --capsule-radius: var(--gap-xl);
  --capsule-row: 80px;
  --capsule-blur: 10px;
  --capsule-link: clamp(26px, 6vw, 40px);
  --header: calc(var(--capsule-row) + var(--capsule-inset) * 2);
  --header-surface: color-mix(in srgb, var(--ink) 88%, transparent);
  --header-text: var(--paper);
  --header-action: var(--paper);
  --header-action-text: var(--ink);
  --header-action-size: var(--body);
}
[data-header="capsule"] .site-header {
  top: calc(var(--frame-top) + var(--capsule-inset));
  left: var(--gutter); right: var(--gutter);
  height: var(--capsule-row);
  padding: 0 var(--gap-md);
  border-radius: var(--capsule-radius);
  background: transparent;
  grid-template-columns: auto 1fr auto auto auto;
  gap: var(--gap-md);
}
/* Surface and blur share a pseudo-element: the blur then samples only the page behind
   (not the capsule's own translucent surface, which would bleed the rounded ends), and
   the header itself carries no backdrop filter that would make it the containing block
   of the fixed bottom bar (mobilecta=bar). */
[data-header="capsule"] .site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--header-surface);
  backdrop-filter: blur(var(--capsule-blur));
}
[data-header="capsule"] .site-header nav { justify-self: center; margin: 0; }
[data-header="capsule"] .header-cta {
  align-self: center; padding: var(--gap-sm); border-radius: var(--gap-sm);
}
@media (max-width: 1100px) {
  [data-header="capsule"] { --capsule-row: 68px; }
  [data-header="capsule"] .site-header {
    left: var(--gap-sm); right: var(--gap-sm);
    grid-template-columns: 1fr auto auto auto;
    grid-template-rows: var(--capsule-row);
  }
  [data-header="capsule"] .header-cta { display: none; }
  [data-header="capsule"] .site-header.menu-open {
    top: var(--frame-top); left: 0; right: 0;
    height: calc(100dvh - var(--frame-top) - var(--frame-bottom));
    border-radius: 0; background: var(--ink);
    grid-template-rows: var(--capsule-row) 1fr auto;
    padding: var(--gap-sm) var(--gap-md) var(--gap-xl);
    overflow-y: auto;
  }
  [data-header="capsule"] .menu-open nav {
    position: static; grid-row: 2; grid-column: 1 / -1;
    justify-self: stretch; align-self: center; gap: var(--gap-md);
    padding: var(--gap-lg) 0; border: 0; background: transparent;
  }
  [data-header="capsule"] .menu-open nav a { font-size: var(--capsule-link); }
  [data-header="capsule"] .menu-open .header-cta {
    display: flex; grid-row: 3; grid-column: 1;
    justify-self: start; max-width: 100%;
  }
  /* The capsule row is too narrow for the switch beside the login link; like the
     call to action it lives in the full menu, on the row with that button. */
  [data-header="capsule"] .header-lang { display: none; }
  [data-header="capsule"] .menu-open .header-lang {
    display: flex; grid-row: 3; grid-column: 2 / -1;
    justify-self: end; align-self: center;
  }
  /* On the last row of the full menu the language list opens upwards. */
  [data-header="capsule"] .menu-open .header-lang-menu { top: auto; bottom: calc(100% + var(--header-lang-menu-gap)); }
  [data-header="capsule"] .menu-open .header-menu { text-decoration: underline; }
}

/* Mobile call-to-action studies, the `mobilecta` axis. `original` keeps the strip
   under the logo row; every other value folds the header into one row and moves
   the button, the language switch and the login link around. */
@media (max-width: 1100px) {
  [data-mobilecta]:not([data-mobilecta="original"]):not([data-header="capsule"]) { --header: var(--header-mobile-row); }
  [data-mobilecta]:not([data-mobilecta="original"]):not([data-header="capsule"]) .site-header { grid-template-rows: var(--header-mobile-row); }
  [data-mobilecta="compact"] .site-header, [data-mobilecta="icon"] .site-header { grid-template-columns: 1fr auto auto; }
  /* compact + icon: the button joins the first row before the menu button; the
     language switch and the login link wait in the opened menu. */
  [data-mobilecta="compact"] .header-lang, [data-mobilecta="compact"] .header-login,
  [data-mobilecta="icon"] .header-lang, [data-mobilecta="icon"] .header-login { display: none; }
  [data-mobilecta="compact"] .header-cta, [data-mobilecta="icon"] .header-cta {
    display: flex; grid-row: 1; grid-column: 2; align-self: center; justify-self: end; margin: 0;
  }
  [data-mobilecta="compact"] .header-menu, [data-mobilecta="icon"] .header-menu { grid-row: 1; grid-column: 3; }
  /* The pill row is the tight one: compact logo, small column gaps, text-only pill. */
  [data-mobilecta="compact"] { --header-logo: var(--header-logo-compact); }
  [data-mobilecta="compact"] .site-header { column-gap: var(--gap-xs); }
  [data-mobilecta="compact"] .header-cta {
    height: var(--header-pill-height); padding: 0 var(--header-pill-pad);
    border-radius: var(--header-pill-radius); font-size: var(--small); gap: var(--gap-xs);
    justify-content: center;
  }
  [data-mobilecta="compact"] .header-cta svg { display: none; }
  [data-mobilecta="icon"] .header-cta {
    width: var(--header-icon-size); height: var(--header-icon-size); padding: 0;
    border-radius: 50%; justify-content: center;
  }
  [data-mobilecta="icon"] .header-cta-label { display: none; }
  /* menu: a clean row, the button only inside the opened menu. */
  [data-mobilecta="menu"] .header-cta { display: none; }
  /* Opened menu for compact, icon and menu: the header grows instead of dropping a
     panel, so the switch, the login link and the button get rows of their own. */
  [data-mobilecta="compact"]:not([data-header="capsule"]) .site-header.menu-open,
  [data-mobilecta="icon"]:not([data-header="capsule"]) .site-header.menu-open,
  [data-mobilecta="menu"]:not([data-header="capsule"]) .site-header.menu-open {
    height: auto; grid-template-rows: var(--header-mobile-row) auto;
    padding-bottom: var(--gap-md); border-bottom: var(--hairline) solid currentColor;
  }
  [data-mobilecta="compact"]:not([data-header="capsule"]) .menu-open nav,
  [data-mobilecta="icon"]:not([data-header="capsule"]) .menu-open nav,
  [data-mobilecta="menu"]:not([data-header="capsule"]) .menu-open nav {
    position: static; grid-row: 2; grid-column: 1 / -1; padding: var(--gap-sm) 0 var(--gap-md); border: 0;
  }
  [data-mobilecta="compact"]:not([data-header="capsule"]) .menu-open .header-lang,
  [data-mobilecta="icon"]:not([data-header="capsule"]) .menu-open .header-lang { display: flex; grid-row: 3; grid-column: 1; }
  /* There the switch starts at the left edge, so its list opens to the right. */
  [data-mobilecta="compact"]:not([data-header="capsule"]) .menu-open .header-lang-menu,
  [data-mobilecta="icon"]:not([data-header="capsule"]) .menu-open .header-lang-menu { left: 0; right: auto; }
  [data-mobilecta="compact"]:not([data-header="capsule"]) .menu-open .header-login,
  [data-mobilecta="icon"]:not([data-header="capsule"]) .menu-open .header-login { display: block; grid-row: 3; grid-column: 2 / -1; justify-self: end; }
  [data-mobilecta="icon"]:not([data-header="capsule"]) .menu-open .header-cta,
  [data-mobilecta="menu"]:not([data-header="capsule"]) .menu-open .header-cta {
    display: flex; grid-column: 1 / -1; width: auto; height: auto; min-height: var(--header-mobile-action); justify-self: stretch;
    padding: var(--gap-xs) var(--gap-sm); border-radius: var(--radius); justify-content: space-between;
  }
  [data-mobilecta="icon"]:not([data-header="capsule"]) .menu-open .header-cta { grid-row: 4; margin-top: var(--gap-md); }
  [data-mobilecta="menu"]:not([data-header="capsule"]) .menu-open .header-cta { grid-row: 3; }
  [data-mobilecta="icon"] .menu-open .header-cta-label { display: inline; }
  /* bar: a strip fixed to the bottom edge; it parks itself while the contact
     section is on screen (script.js flips data-mobilecta-hidden). */
  [data-mobilecta="bar"] .header-cta {
    display: flex; position: fixed; left: 0; right: 0; bottom: var(--frame-bottom); width: 100%; justify-self: stretch;
    height: var(--header-bar-height); margin: 0; padding: 0 var(--gutter);
    border-radius: var(--radius) var(--radius) 0 0; justify-content: space-between;
    transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
  }
  [data-mobilecta="bar"][data-mobilecta-hidden="true"] .header-cta { transform: translateY(100%); opacity: 0; pointer-events: none; }
  /* The capsule's full menu ends above the bar so its last row stays clear of it. */
  [data-header="capsule"][data-mobilecta="bar"] .site-header.menu-open { padding-bottom: calc(var(--gap-xl) + var(--header-bar-height)); }
  @media (prefers-reduced-motion: reduce) { [data-mobilecta="bar"] .header-cta { transition: none; } }
  /* Capsule: compact and icon sit in the capsule row; in the full menu the button
     returns to its capsule shape and the login link joins the switch on the last row. */
  [data-header="capsule"][data-mobilecta="compact"] .site-header:not(.menu-open) { padding-inline: var(--gap-sm); }
  [data-header="capsule"][data-mobilecta="compact"] .menu-open .header-cta,
  [data-header="capsule"][data-mobilecta="icon"] .menu-open .header-cta {
    width: auto; height: auto; padding: var(--gap-sm); border-radius: var(--gap-sm);
    font-size: var(--header-action-size); gap: var(--gap-md);
  }
  [data-header="capsule"][data-mobilecta="compact"] .menu-open .header-cta svg { display: block; }
  [data-header="capsule"][data-mobilecta="compact"] .menu-open .header-login,
  [data-header="capsule"][data-mobilecta="icon"] .menu-open .header-login { display: block; grid-row: 3; grid-column: 2; align-self: center; justify-self: end; }
  [data-header="capsule"][data-mobilecta="compact"] .menu-open .header-lang,
  [data-header="capsule"][data-mobilecta="icon"] .menu-open .header-lang { grid-column: 3; }
}