/* AERO MATERIALS: site styles.
   Rebuilt from aero-materials.com (Squarespace), measured 2 Nov 2026 at 390px and 1440px, then
   redesigned in Nov 2026 after the AERO MATERIALS Foundation (IBM Plex Sans, quiet links, square
   sentence-case buttons, glass submenu, chevrons). Values come from tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--site-white); color: var(--site-navy); font-family: var(--font-text); font-weight: 400; font-size: var(--fs-text); line-height: 1.65; }
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }   /* the img inside stays a direct layout child */

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: var(--heading-tracking); hyphens: manual; }
h1, .h1 { font-size: var(--fs-h1); line-height: 1.1; }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.15; }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.25; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Links (Foundation): text colour, 1px underline in the text colour at --link-underline;
   the underline turns fully opaque on hover and focus. No colour change. */
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor var(--link-underline), transparent); transition: text-decoration-color 0.15s ease; }
a:hover, a:focus-visible { color: inherit; text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 3px; }
abbr[title] { text-decoration: none; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; z-index: 10; padding: var(--space-2) var(--space-4); background: var(--site-white); color: var(--site-navy); }
.skip:focus { left: var(--space-4); top: var(--space-4); }

/* Layout: content up to 1400px wide with fluid gutters, as on Squarespace.
   Centring and gutters are !important: a class on the same element (a grid, a list reset with margin: 0)
   must never move the content out of the column. Change the gutter only through --gutter
   (or --container-gutter for one section); tools/check-layout.mjs checks every page. */
.container { max-width: 1400px; margin-inline: auto !important; padding-inline: var(--container-gutter, var(--gutter)) !important; box-sizing: content-box; }
.section { padding-block: 95px; }
.section--dark { background: var(--site-navy); color: var(--site-white); }
.section--white { background: var(--site-white); color: var(--site-black); }
.section--white h1, .section--white h2 { color: var(--site-navy); }

/* Heading left (a quarter), content right, as in "Who we are" */
.split { display: grid; grid-template-columns: 6fr 18fr; column-gap: 11px; }
.split + .rule, .rule + .split { margin-top: 26px; }
.rule { height: 1px; margin: 0; border: 0; background: var(--rule-soft); }

/* Chevrons (Foundation iconography): right for pages on this site, up-right for other sites */
.button::after, .app-chevron, .folder-toggle::after, .site-footer a[href^="http"]::after { content: ""; flex: none; background: currentColor;
  -webkit-mask: url("/assets/img/icons/chevron-right.svg") center / contain no-repeat; mask: url("/assets/img/icons/chevron-right.svg") center / contain no-repeat; }
.button[href^="http"]::after, .site-footer a[href^="http"]::after { -webkit-mask-image: url("/assets/img/icons/chevron-up-right.svg"); mask-image: url("/assets/img/icons/chevron-up-right.svg"); }

/* Buttons (Foundation): square, sentence case, 56px, one orange primary per view; the second is outlined */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--button-height); padding: 0 28px; border: 0; background: var(--site-accent); color: var(--site-white); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-button); line-height: 1.2; letter-spacing: -0.01em; text-align: center; text-decoration: none; cursor: pointer; }
.button::after { width: 0.8em; height: 0.8em; transition: transform 0.2s ease; }
.button:hover { color: var(--site-white); filter: brightness(0.92); }
.button:hover::after { transform: translateX(3px); }
.button[href^="http"]:hover::after { transform: translate(2px, -2px); }
.button:focus-visible { outline-color: var(--site-white); }
.button--secondary { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.button--secondary:hover { color: inherit; filter: none; background: color-mix(in srgb, currentColor 8%, transparent); }

/* Header. Always as wide as the page content + --band-margin on each side (never wider).
   At the top of the page it lies transparently over the first section, as part of it. Once the page
   is scrolled (menu.js: .is-scrolled) it floats --band-offset below the top as a glass band; the
   logo keeps its position. Glass as in the "Glass header prototype" (edges, top sheen, blur,
   refraction in Chromium via the SVG filter #lens in base.njk), tinted with the average colour of
   what lies behind it (menu.js: --glass-rgb). menu.js sets .header-on-light (navy text, light edges)
   unless that colour is dark. */
html { scroll-padding-top: calc(var(--header-height) + var(--space-6)); }
.site-header { position: fixed; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--space-6); height: var(--header-height); color: var(--site-white);
  --row: var(--header-height);   /* height of the header row */
  --folder-drop: 34px;           /* submenu panel: distance from the middle of its menu entry (top of the page) */
  --content-edge: max(var(--gutter), 50% - 700px);   /* left edge of .container content */
  --band-inset: max(var(--band-offset), var(--content-edge) - var(--band-margin));
  left: var(--band-inset); right: var(--band-inset); padding-inline: max(var(--band-offset), var(--content-edge) - var(--band-inset));
  --glass-rgb: 255, 255, 255;
  --glass-edge: var(--glass-dark-edge); --glass-shade: var(--glass-dark-shade);
  transition: top 0.3s ease, height 0.3s ease, border-radius 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease; }
.header-on-light .site-header { color: var(--site-navy); --glass-edge: var(--glass-light-edge); --glass-shade: var(--glass-light-shade); }
.site-header::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(180deg, var(--glass-edge) 0%, transparent 38%); transition: opacity 0.3s ease; }
/* The glass (tint and blur) sits on ::before, not on the header itself: an element with a backdrop
   filter would keep the submenu panel inside it from blurring the page behind the panel */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; transition: background-color 0.3s ease; }
.is-scrolled .site-header { top: var(--band-offset); height: var(--band-height); --row: var(--band-height); --folder-drop: calc(var(--row) / 2 + var(--band-offset)); border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 var(--glass-shade), inset 1px 0 0 var(--glass-edge), inset -1px 0 0 var(--glass-shade), 0 10px 30px var(--glass-shade); }
.is-scrolled .site-header::before { background: rgba(var(--glass-rgb), var(--glass-solid-alpha)); }
.is-scrolled .site-header::after { opacity: 0.35; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .is-scrolled .site-header::before { background: rgba(var(--glass-rgb), var(--glass-alpha)); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
  .refract.is-scrolled .site-header::before { backdrop-filter: url(#lens) blur(6px) saturate(170%); }
}
@media (prefers-reduced-transparency: reduce) { .is-scrolled .site-header::before, .refract.is-scrolled .site-header::before { background: rgba(var(--glass-rgb), var(--glass-solid-alpha)); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { .site-header, .site-header::after, .folder, .hero-pin { transition: none; } }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The first section reaches up behind the transparent header (also inside one wrapper element) */
main > :first-child:not(.hero):not(:has(> section:first-child)), main > :first-child > section:first-child:not(.hero) { border-top: var(--header-height) solid transparent; }
main > .hero:first-child { border-top: 0; min-height: calc(930px + var(--header-height)); padding-top: calc(144px + var(--header-height)); }
.wordmark { font-family: var(--font-display); font-size: var(--fs-logo); line-height: 1.4; letter-spacing: var(--heading-tracking); color: inherit; text-decoration: none; white-space: nowrap; }
.wordmark:hover { color: inherit; }
.logo-aero { font-weight: 700; }
.logo-materials { font-weight: 300; }

/* Navigation (Foundation menu): IBM Plex Sans 400, sentence case */
.site-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; font-family: var(--font-text); font-weight: 400; font-size: var(--fs-nav); line-height: 1.4; }
.nav-list { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
.site-nav a, .folder-toggle { display: block; padding: 6px 0; color: inherit; text-decoration: none; }
.nav-list > li > a:hover, .folder-toggle:hover { text-decoration: underline; text-decoration-color: currentColor; }
.nav-list > li > a[aria-current="page"] { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor var(--link-underline), transparent); }
.folder-toggle { position: relative; z-index: 7; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; cursor: pointer; }
.folder-toggle::after { width: 12px; height: 12px; -webkit-mask-image: url("/assets/img/icons/chevron-down.svg"); mask-image: url("/assets/img/icons/chevron-down.svg"); transition: transform 0.2s ease; }
.folder-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.social { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: inherit; }
.site-nav .social { padding: 6px; }
.site-nav .social:hover { opacity: 0.7; }
.site-nav .social::before { content: ""; position: absolute; left: -15px; top: 6px; bottom: 6px; width: 1px; background: currentColor; opacity: 0.35; }   /* divider after the page links */

/* Language switch: EN / DE */
.lang-switch { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); }
.site-nav .lang-switch a { padding: 4px 8px; opacity: 0.75; }
.site-nav .lang-switch a:hover { opacity: 1; }
.site-nav .lang-switch a[aria-current] { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }

/* Submenu: a glass panel close below its menu entry (--band-offset below the band when scrolled), tinted like the band (--glass-rgb), two
   columns of entries with application marker, name and one-line description */
.has-folder { position: relative; }
.folder { display: none; position: absolute; left: 50%; top: calc(50% + var(--folder-drop)); transition: top 0.3s ease; z-index: 6; width: 580px; max-width: calc(100vw - 2 * var(--band-offset)); margin: 0; padding: 10px; list-style: none;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; transform: translateX(-50%); color: inherit;
  border-radius: var(--radius-lg); background: rgba(var(--glass-rgb), var(--glass-solid-alpha));
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 var(--glass-shade), 0 18px 40px var(--glass-shade); }
.folder::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--folder-drop); }   /* keeps hover while the pointer crosses the gap */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .folder { background: rgba(var(--glass-rgb), 0.8); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
}
@media (prefers-reduced-transparency: reduce) { .folder { background: rgba(var(--glass-rgb), var(--glass-solid-alpha)); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.has-folder:hover .folder, .has-folder:focus-within .folder, .folder-toggle[aria-expanded="true"] + .folder { display: grid; }
.has-folder.folder-dismissed .folder { display: none; }   /* closed with Escape while hovered or focused (menu.js) */
.has-folder:hover .folder-toggle::after { transform: rotate(180deg); }
.site-nav .folder a { display: flex; gap: 14px; padding: 14px 16px; border-radius: var(--radius-md); }
.site-nav .folder a:hover, .site-nav .folder a[aria-current="page"] { background: color-mix(in srgb, currentColor 8%, transparent); }
.folder-name { display: block; font-weight: 500; font-size: 16px; line-height: 1.3; }
.folder-desc { display: block; margin-top: 2px; font-size: var(--fs-small); line-height: 1.45; opacity: 0.8; }

/* Application markers (Foundation: one palette colour per application) */
.marker { flex: none; width: 12px; height: 12px; margin-top: 5px; }
.marker--actuation { background: var(--site-accent); }
.marker--filtration { background: var(--app-filtration); }
.marker--biotemplate { background: var(--app-biotemplate); }
.marker--optics { background: var(--app-optics); }
.marker--shielding { background: var(--site-navy); }

.menu-toggle { display: none; }

/* Footer: wordmark, link columns, bottom row */
.site-footer { padding: 72px max(var(--gutter), 50% - 700px) 32px; background: var(--site-white); color: var(--site-navy); font-size: 16px; line-height: 1.5; }
.footer-main, .footer-bottom { max-width: 1400px; margin-inline: auto; }
.footer-main { display: flex; flex-wrap: wrap; gap: 48px 64px; }
.footer-main .wordmark { flex: 2 1 280px; align-self: flex-start; font-size: 28px; line-height: 1; }
.footer-col { flex: 1 1 160px; }
.footer-heading { margin: 0 0 12px; font-size: var(--fs-small); line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft-on-white); }
.footer-col ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .wordmark { color: var(--wordmark-muted); transition: color 0.2s ease; }
.site-footer .wordmark:hover { color: var(--site-navy); text-decoration: none; }
.site-footer a[href^="http"]::after { display: inline-block; width: 0.7em; height: 0.7em; margin-left: 0.3em; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--rule-soft); font-size: var(--fs-small); color: var(--ink-soft-on-white); }
.footer-links { display: flex; gap: 24px; }
/* "Cookie settings" (cookie-settings.js): a button that looks like the links next to it; without JavaScript it cannot work */
.footer-links button { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.footer-links button:hover { text-decoration: underline; }
@media (scripting: none) { .footer-links button { display: none; } }

/* Copy-the-message block after a mailto form is submitted (mailto-form.js): contact form and Biotemplate registration */
.mailto-fallback { margin-top: var(--space-4); font-size: var(--fs-small); }
.mailto-fallback summary { cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor var(--link-underline), transparent); text-underline-offset: 3px; }
.mailto-fallback p { margin: var(--space-2) 0; }
.mailto-fallback textarea { display: block; width: 100%; padding: var(--space-2); border: 1px solid var(--rule-soft); border-radius: var(--radius-sm); background: var(--site-white); color: var(--site-navy); font: inherit; resize: vertical; }
.mailto-fallback-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-2); }

/* Home: hero. Text on the left; on the right the Vacuum Voxel with its housing shown transparent, annotated with
   the three key figures (a pin on the part, a hairline out to the figure). On a light grey dot canvas (the light
   counterpart of the navy canvas of the gripper animation). The dots lie over a soft gradient;
   background-color is the mid tone, so menu.js picks navy text for the header. */
.hero { position: relative; display: flex; align-items: center; min-height: 930px; padding-block: 144px; overflow: hidden; color: var(--site-navy);
  background-color: var(--hero-ground-deep);
  background-image: radial-gradient(circle, var(--dot-grid-light) 1.4px, transparent 2px), linear-gradient(115deg, var(--hero-ground) 0%, var(--hero-ground) 35%, var(--hero-ground-deep) 100%);
  background-size: 32px 32px, auto; background-position: center top, 0 0; }
.hero .container { width: 100%; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; column-gap: var(--space-12); }
.hero h1 { margin-bottom: 28px; }
.hero .hero-sub { margin-bottom: 18px; font-size: var(--fs-lead); font-weight: 500; line-height: 1.45; }   /* Foundation lead */
.hero p { margin-bottom: 40px; font-size: var(--fs-text); line-height: 1.65; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.hero-visual { --render-w: 62%; width: 100%; max-width: 720px; justify-self: end; }

/* The render takes the left 62 % of the figure, the key figures the right 30 %. Pins sit at --px/--py of the
   render; each figure's hairline starts at --fx = 0.62 × --px of the figure, level with the pin. The figure is a
   size container, so the key figures scale with it. Keep the three positions in sync with the render. */
.hero-figure { position: relative; container-type: inline-size; }
.hero-render { position: relative; width: var(--render-w); }
.hero-render-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 32px rgba(9, 8, 51, 0.14)); }
.hero-pin { position: absolute; left: var(--px); top: var(--py); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--site-navy); box-shadow: 0 0 0 3px var(--site-white); color: transparent; font-size: 0; }
.hero-pin--connector, .hero-fact--connector { --px: 69.2%; --py: 19.6%; --fx: 42.9%; }   /* terminal block, top right */
.hero-pin--material, .hero-fact--material { --px: 58.5%; --py: 48.9%; --fx: 36.3%; }     /* inside the housing */
.hero-pin--housing, .hero-fact--housing { --px: 72%; --py: 70%; --fx: 44.6%; }           /* housing, lower right */
.hero-facts { --fact-size: clamp(34px, 6.6cqw, 48px); position: absolute; inset: 0; margin: 0; }
.hero-fact { position: absolute; left: var(--fx); right: 0; top: calc(var(--py) - var(--fact-size) / 2); display: grid; grid-template-columns: minmax(0, 1fr) 30cqw; column-gap: 14px; }
.hero-fact::before { grid-row: 1; align-self: center; height: 1px; background: var(--site-navy); opacity: 0.55; content: ""; }
.hero-fact dt { grid-column: 2; grid-row: 1; font-family: var(--font-display); font-weight: 700; font-size: var(--fact-size); line-height: 1; letter-spacing: var(--heading-tracking); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-fact dd { grid-column: 2; margin: 8px 0 0; font-size: 15px; line-height: 1.4; }
.hero .hero-caption { width: var(--render-w); margin: 16px 0 0; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-soft-on-white); text-align: center; }

/* Below 1100px: headline, render with lettered pins, caption, text and buttons, then the key figures as a list
   whose letters match the pins. The pins wait until the visitor scrolls (hero-pins.js sets .hero--pins-waiting),
   so the module first appears clean; without JavaScript they show from the start. */
@media (max-width: 1099px) {
  .hero, main > .hero:first-child { min-height: 0; padding-top: calc(64px + var(--header-height)); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-text, .hero-visual, .hero-figure { display: contents; }
  .hero h1 { order: 0; margin-bottom: 8px; }
  .hero-render { order: 1; justify-self: center; width: min(66vw, 300px); margin-top: 16px; }
  .hero .hero-caption { order: 1; width: auto; margin: 12px 0 32px; }
  .hero-text > :not(h1) { order: 2; }
  .hero-pin { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: -11px 0 0 -11px; color: var(--site-white); font-family: var(--font-display); font-weight: 700; font-size: 12px;
    transition: opacity 0.4s ease, transform 0.4s ease; }
  .hero-pin--material { transition-delay: 0.12s; }
  .hero-pin--housing { transition-delay: 0.24s; }
  .hero--pins-waiting .hero-pin { opacity: 0; transform: scale(0.6); }
  .hero-facts { --fact-size: 42px; order: 3; position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-6); margin-top: var(--space-12); counter-reset: fact; }
  .hero-fact { position: static; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; padding-block: 20px; border-top: 1px solid var(--rule-soft); }
  .hero-fact::before { width: 22px; height: 22px; border-radius: 50%; background: var(--site-navy); opacity: 1; color: var(--site-white); font: 700 12px/22px var(--font-display); text-align: center; counter-increment: fact; content: counter(fact, upper-alpha); }
  .hero-fact dd { font-size: 16px; }
}

/* Home: application rows. The whole row is the link; the application colour is a marker */
.app-list { margin: 40px 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule-soft); }
.app-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) 24px; align-items: center; column-gap: 32px; margin-inline: -16px; padding: 28px 16px; border-top: 1px solid var(--rule-soft); color: inherit; text-decoration: none; transition: background-color 0.15s ease; }
a.app-row:hover { background: var(--mist); }
.app-name { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; color: var(--site-navy); }
.app-name .marker { width: 14px; height: 14px; margin-top: 0; }
.app-chevron { justify-self: end; width: 20px; height: 20px; color: var(--site-navy); transition: transform 0.2s ease; }
a.app-row:hover .app-chevron { transform: translateX(6px); }
.app-list + p { margin-top: 32px; }

/* Closing band: centred question and two buttons */
.cta { padding-block: 96px; text-align: center; }
.cta h2 { max-width: 870px; margin: 0 auto 48px; }
.cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }

/* AI-generated images: outlined tag in Space Grotesk caps with a square marker, bottom right.
   Markup from {% image ..., { ai: "light" | "dark" } %}; for other media (video, script-set images) write it by hand:
   <span class="ai-image" data-ai-tone="light"><img ...><span class="ai-label">AI-generated</span></span>.
   The tag is real text, so screen readers announce it after the alt text. */
.ai-image { position: relative; display: block; }
.ai-image img, .ai-image video { width: 100%; }
.ai-label { position: absolute; right: var(--space-4); bottom: var(--space-4); display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 9px; border: 1px solid currentColor; border-radius: var(--radius-sm); pointer-events: none;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-tag); line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  color: var(--site-navy); }
.ai-label::before { content: ""; width: 7px; height: 7px; background: currentColor; }
.ai-image[data-ai-tone="dark"] .ai-label { color: var(--site-white); }

/* Error page */
.error-page { min-height: 50vh; }
.error-page h1 { margin-bottom: var(--space-6); }

/* Menu button instead of the navigation below 1100px: the German navigation needs about 1100px */
@media (max-width: 1099px) {
  .js .menu-toggle { display: block; position: relative; width: 44px; height: 44px; margin-left: auto; border: 0; background: none; color: inherit; cursor: pointer; }
  .menu-icon::before, .menu-icon::after { position: absolute; right: 4px; width: 35px; height: 1px; background: currentColor; content: ""; transition: transform 0.2s; }
  /* Lines 8px apart: a whole number of screen pixels at every Windows display scale (100–200 %), so both
     lines fall on the pixel grid the same way and look equally thick (with 9px, one rendered thin, one thick) */
  .menu-icon::before { top: 17px; }
  .menu-icon::after { top: 25px; }
  .menu-open .menu-icon::before { transform: translateY(4px) rotate(45deg); }
  .menu-open .menu-icon::after { transform: translateY(-4px) rotate(-45deg); }

  .site-header, .is-scrolled .site-header { flex-wrap: wrap; height: auto; min-height: var(--header-height); max-height: calc(100vh - 2 * var(--band-offset)); overflow-y: auto; }
  .is-scrolled .site-header { min-height: var(--band-height); }
  .site-header { align-content: flex-start; }   /* logo and menu button stay centred in the first row when the menu opens */
  .site-header .wordmark { line-height: var(--row); }

  /* Open menu: the header becomes a light glass card --band-offset below the top, over the dimmed
     page; rows with chevrons, applications open in place with marker and description, LinkedIn and
     language switch in a bottom row */
  .menu-open::before { content: ""; position: fixed; inset: 0; z-index: 4; background: rgba(9, 8, 51, 0.35); }
  .menu-open .site-header, .is-scrolled .menu-open .site-header { top: var(--band-offset); --row: var(--band-height); min-height: var(--band-height); border-radius: var(--radius-lg); color: var(--site-navy);
    --glass-edge: var(--glass-light-edge); --glass-shade: var(--glass-light-shade);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 18px 40px rgba(9, 8, 51, 0.25); }
  .menu-open .site-header::after { opacity: 0; }
  .menu-open .site-header::before, .is-scrolled .menu-open .site-header::before { background: rgba(255, 255, 255, var(--glass-solid-alpha)); -webkit-backdrop-filter: none; backdrop-filter: none; }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .menu-open .site-header::before, .is-scrolled .menu-open .site-header::before { background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
  }
  @media (prefers-reduced-transparency: reduce) { .menu-open .site-header::before, .is-scrolled .menu-open .site-header::before { background: rgba(255, 255, 255, var(--glass-solid-alpha)); -webkit-backdrop-filter: none; backdrop-filter: none; } }

  .site-nav { flex-wrap: wrap; justify-content: space-between; gap: 0; width: 100%; margin: 0; padding: 4px 0 6px; font-size: 19px; }
  .js .site-nav { display: none; }
  .js .menu-open .site-nav { display: flex; }
  .nav-list { flex: 1 0 100%; flex-direction: column; gap: 0; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--rule-soft); }
  .nav-list > li > a, .folder-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 0 10px; border-radius: var(--radius-md); text-align: left; }
  .nav-list > li > a:hover, .folder-toggle:hover, .nav-list > li > a[aria-current="page"] { text-decoration: none; background: color-mix(in srgb, currentColor 6%, transparent); }
  .nav-list > li > a::after { content: ""; flex: none; width: 14px; height: 14px; background: currentColor;
    -webkit-mask: url("/assets/img/icons/chevron-right.svg") center / contain no-repeat; mask: url("/assets/img/icons/chevron-right.svg") center / contain no-repeat; }
  .folder-toggle::after { width: 14px; height: 14px; }
  .folder-toggle[aria-expanded="true"] { background: color-mix(in srgb, currentColor 6%, transparent); }
  .site-nav .social { width: 44px; height: 44px; padding: 12px; }
  .site-nav .social::before { display: none; }
  .lang-switch { align-self: center; font-size: 15px; }
  .site-nav .lang-switch a { padding: 8px 12px; }

  .folder { position: static; width: auto; max-width: none; padding: 4px 0 8px; grid-template-columns: 1fr; gap: 0; transform: none; background: none; box-shadow: none; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .folder::before { display: none; }
  .has-folder:hover .folder, .has-folder:focus-within .folder { display: none; }
  .has-folder:hover .folder-toggle::after { transform: none; }
  .has-folder .folder-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
  .folder-toggle[aria-expanded="true"] + .folder, html:not(.js) .has-folder .folder { display: grid; }   /* without JavaScript the list stays open */
  .site-nav .folder a { align-items: flex-start; padding: 10px 10px 10px 14px; }
  .site-nav .folder a:hover { background: color-mix(in srgb, currentColor 6%, transparent); }
  .folder-name { font-size: 16px; font-weight: 500; }
  .folder-desc { display: block; opacity: 0.75; }
  .folder .marker { margin-top: 6px; }

  /* Without JavaScript the menu stays expanded: the header then sits at the top of the page as a navy
     block instead of fixed over it, so the open menu does not cover the content */
  @media (scripting: none) {
    .site-header { position: relative; left: 0; right: 0; padding-inline: var(--content-edge); max-height: none; overflow: visible; background: var(--site-navy); color: var(--site-white); }
  }
}

/* Mobile (Squarespace switches at 767px) */
@media (max-width: 767px) {
  :root { --gutter: 6vw; --header-height: 68px; --band-height: 60px; --fs-logo: 17.7px; }
  .section { padding-block: 60px; }
  .split { grid-template-columns: 1fr; row-gap: var(--space-4); }
  .app-row { grid-template-columns: minmax(0, 1fr) 24px; row-gap: 10px; }
  .app-row .app-desc { grid-column: 1 / -1; grid-row: 2; }
  .app-row .app-chevron { grid-column: 2; grid-row: 1; }
  .ai-label { right: var(--space-2); bottom: var(--space-2); }

  .hero, main > .hero:first-child { min-height: 0; padding-block: calc(32px + var(--header-height)) 84px; }
  .hero .hero-sub { margin-bottom: 12px; }
  .hero p { margin-bottom: 28px; }
  .hero-facts { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .hero-fact:last-child { border-bottom: 1px solid var(--rule-soft); }
  .hero .button, .cta .button { width: 100%; }
  .site-footer { padding-top: 56px; }
}