/* ============================================================================
   NexGen (nex-gen.eu) — styles.css
   Single source of truth: design-concept.md (§2 tokens, §3 shared elements,
   §4 components, §8 responsive). Token references only — no stray colors.
   Breakpoints: mobile ≤600 / tablet 601–1024 / desktop ≥1025 / nav ≥1200.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Fonts (self-hosted, Fontsource OFL; §2.2). One @font-face per file with
   subset unicode-range + font-display: swap. Metric-matched fallbacks first.
   ---------------------------------------------------------------------------- */
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 102%;
  descent-override: 29%;
  line-gap-override: 0%;
  font-display: swap;
}
@font-face {
  font-family: "Plex Fallback";
  src: local("Arial");
  size-adjust: 100%;
  ascent-override: 102%;
  descent-override: 27%;
  line-gap-override: 0%;
  font-display: swap;
}

/* Manrope (variable, 500–800) */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("fonts/manrope-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("fonts/manrope-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("fonts/manrope-var-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* IBM Plex Sans (400/500/600) */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plex-sans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plex-sans-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plex-sans-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plex-sans-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plex-sans-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plex-sans-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/plex-sans-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/plex-sans-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/plex-sans-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* IBM Plex Mono (500) */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plex-mono-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ----------------------------------------------------------------------------
   §2 Design tokens (:root)
   ---------------------------------------------------------------------------- */
:root {
  /* §2.1 Color */
  --c-orange-50: #FFF1EC;
  --c-orange-100: #FFDCCF;
  --c-orange-400: #F26A21;
  --c-orange-500: #F04E23;
  --c-red-500: #EE3124;
  --c-orange-600: #D93A12;
  --c-orange-700: #CC3510;
  --c-orange-800: #B8300E;
  --c-charcoal-950: #0E0F12;
  --c-charcoal-900: #14161A;
  --c-charcoal-800: #1F2228;
  --c-charcoal-700: #2C3038;
  --c-ink: #1A1D23;
  --c-ink-muted: #4B5563;
  --c-grey-400: #9AA1AC;
  --c-grey-300: #C9CED6;
  --c-grey-200: #E3E6EA;
  --c-grey-100: #EDEFF2;
  --c-grey-50: #F3F4F6;
  --c-white: #FFFFFF;
  --c-success: #1F8A4C;
  --c-error: #C62828;
  --c-error-bg: #FDECEC;
  --c-placeholder-hero: var(--c-charcoal-700);
  --c-placeholder-light: var(--c-grey-200);
  --c-input-placeholder: #8A919C;
  --c-input-hover-border: #AEB4BE;

  /* Brand gradient (§2.1) — never behind text */
  --g-brand: linear-gradient(135deg, #F26A21 0%, #F04E23 45%, #EE3124 100%);

  /* §2.2 Typography */
  --ff-display: "Manrope", "Manrope Fallback", "Segoe UI", Arial, sans-serif;
  --ff-body: "IBM Plex Sans", "Plex Fallback", "Segoe UI", Roboto, Arial, sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-display: clamp(40px, 5.2vw, 72px);
  --fs-h1: clamp(36px, 4.4vw, 60px);
  --fs-h2: clamp(30px, 3.4vw, 44px);
  --fs-h3: clamp(22px, 2.2vw, 28px);
  --fs-h4: 20px;
  --fs-hl-2: clamp(22px, 2.6vw, 34px);
  --fs-hl-3: clamp(18px, 1.9vw, 24px);
  --fs-numeral: clamp(64px, 8vw, 112px);
  --fs-lead: clamp(18px, 1.6vw, 21px);
  --fs-body: clamp(16px, 1.25vw, 17px);
  --fs-small: 14px;
  --fs-eyebrow: 13px;

  /* §2.3 Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;
  --band-py: 56px;

  /* Containers */
  --container-max: 1200px;
  --container-wide-max: 1320px;
  --container-pad: 16px;

  /* §2.4 Radius */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 12px;
  --r-full: 9999px;

  /* Borders */
  --border-hairline: 1px solid var(--c-grey-200);
  --border-input: 1px solid var(--c-grey-300);
  --border-dark: 1px solid var(--c-charcoal-700);

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(20, 22, 26, .06), 0 1px 3px rgba(20, 22, 26, .08);
  --sh-md: 0 8px 20px -6px rgba(20, 22, 26, .16);
  --sh-lg: 0 24px 48px -16px rgba(20, 22, 26, .28);
  --sh-header: 0 2px 12px rgba(0, 0, 0, .35);
  --ring: 0 0 0 3px rgba(240, 78, 35, .35);

  /* §2.6 Signature motif */
  --skew: -24deg;

  /* §2.7 Motion */
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  /* Header metrics */
  --header-h: 64px;
  --logo-h: 26px;

  /* Z-index scale */
  --z-hero-img: -2;
  --z-hero-overlay: -1;
  --z-header: 100;
  --z-drawer-overlay: 200;
  --z-drawer: 210;
}

/* ----------------------------------------------------------------------------
   Base / reset
   ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 601px) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-white);
}

img, svg, video { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--fs-h1); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: var(--fs-h4); line-height: 1.35; font-weight: 700; }
/* Display headings in narrow step/band-split columns: no auto hyphenation */
.band-split__title,
.step-rows h3,
.step-numerals h3,
.timeline__title { hyphens: manual; }

p { margin: 0; max-width: 68ch; }
li { max-width: 68ch; }

strong, b { font-weight: 600; }

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

dl, dt, dd, figure, fieldset { margin: 0; }

::placeholder { color: var(--c-input-placeholder); opacity: 1; }

/* §6.2 Focus */
:focus-visible {
  outline: 3px solid var(--c-orange-500);
  outline-offset: 3px;
  border-radius: inherit;
}
:focus:not(:focus-visible) { outline: none; }
.band--orange :focus-visible,
.hero--band-orange :focus-visible { outline-color: var(--c-white); }

/* §3.1 Skip link */
.skip-link {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed;
  top: 8px; left: 8px;
  width: auto; height: auto;
  clip-path: none;
  z-index: 1000;
  background: var(--c-white);
  color: var(--c-ink);
  padding: 12px 16px;
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}

/* ----------------------------------------------------------------------------
   Gray-box placeholders (media-phase contract)
   Every future-replaceable asset slot renders as a gray box carrying its
   target path in data-asset + a visible filename label. The media phase
   overwrites the path — the markup swap is documented in media/manifest.md.
   ---------------------------------------------------------------------------- */
.placeholder {
  background: var(--c-placeholder-light);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.placeholder--hero { background: var(--c-placeholder-hero); }
.placeholder__label {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .55);
  padding: 8px;
  overflow-wrap: anywhere;
  text-align: center;
}
.placeholder:not(.placeholder--hero) .placeholder__label { color: var(--c-ink-muted); }

/* ----------------------------------------------------------------------------
   Layout containers (§2.3)
   ---------------------------------------------------------------------------- */
.container,
.container--wide {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container { max-width: var(--container-max); }
.container--wide { max-width: var(--container-wide-max); }

/* ----------------------------------------------------------------------------
   §2.6 Signature motif: skewed slash + markers + skew bars
   ---------------------------------------------------------------------------- */
.section-marker {
  display: block;
  width: 40px;
  height: 4px;
  border-radius: var(--r-xs);
  background: var(--g-brand);
  transform: skewX(var(--skew));
}
.band--orange .section-marker,
.band--dark .section-marker { background: var(--c-white); }

.skew-bar {
  display: block;
  width: 32px;
  height: 4px;
  border-radius: var(--r-xs);
  background: var(--g-brand);
  transform: skewX(var(--skew));
}
.band--orange .skew-bar { background: var(--c-white); }

/* ----------------------------------------------------------------------------
   §4.2 Buttons
   ---------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--ff-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  padding: 0 24px;
  height: 48px;
  text-decoration: none;
  white-space: normal;
  text-align: center;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn .icon { width: 20px; height: 20px; flex: none; }

.btn--sm { height: 40px; padding: 0 16px; font-size: 15px; }
.btn--lg { height: 56px; padding: 0 32px; font-size: 17px; }
.btn--block { display: flex; width: 100%; }

.btn--primary { background: var(--c-orange-600); color: var(--c-white); }
.btn--primary:hover { background: var(--c-orange-800); }
.btn--primary:active { background: var(--c-orange-800); transform: translateY(1px); }

.btn--outline {
  background: transparent;
  border-color: var(--c-orange-600);
  color: var(--c-orange-700);
}
.btn--outline:hover { background: var(--c-orange-50); }
.btn--outline:active { background: var(--c-orange-100); }

.btn--on-orange { background: var(--c-white); color: var(--c-orange-700); }
.btn--on-orange:hover { background: var(--c-charcoal-900); color: var(--c-white); }

.btn--ghost-on-orange {
  background: transparent;
  border-color: var(--c-white);
  color: var(--c-white);
}
.btn--ghost-on-orange:hover { background: rgba(255, 255, 255, .14); }

.btn--on-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, .4);
  color: var(--c-white);
}
.btn--on-dark:hover { border-color: var(--c-white); background: rgba(255, 255, 255, .08); }

.btn:disabled,
.btn[disabled],
.btn[aria-busy="true"] {
  opacity: .5;
  cursor: not-allowed;
}
.btn:disabled:hover, .btn[disabled]:hover { background: var(--c-orange-600); }
.btn--on-dark:disabled:hover { background: transparent; }
.btn--outline:disabled:hover { background: transparent; }

/* ----------------------------------------------------------------------------
   §4.3 Links + icons
   ---------------------------------------------------------------------------- */
a:not([class]) {
  color: var(--c-orange-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:not([class]):hover { color: var(--c-orange-800); text-decoration-thickness: 2px; }
.band--orange a:not([class]) { color: var(--c-white); }
.band--dark a:not([class]),
.site-header a:not([class]),
.site-footer a:not([class]) { color: rgba(255, 255, 255, .85); }
.band--dark a:not([class]):hover,
.site-header a:not([class]):hover,
.site-footer a:not([class]):hover { color: var(--c-orange-500); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--c-orange-700);
  text-decoration: none;
}
.link-arrow .icon { width: 20px; height: 20px; transition: transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-arrow:hover .icon { transform: translateX(4px); }
.band--orange .link-arrow { color: var(--c-white); }

.icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  flex: none;
}
.icon--16 { width: 16px; height: 16px; }
.icon--20 { width: 20px; height: 20px; }
.icon--32 { width: 32px; height: 32px; }
.icon--48 { width: 48px; height: 48px; }

/* ----------------------------------------------------------------------------
   §2.5 Icon sprite helper
   ---------------------------------------------------------------------------- */
.icon-use { display: inline-flex; }

/* ----------------------------------------------------------------------------
   §3.2 site-header
   ---------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-charcoal-900);
  height: var(--header-h);
  transition: height var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled {
  height: 64px;
  box-shadow: var(--sh-header);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: 100%;
}

/* §4.1 Logo lockup */
.logo-lockup {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  text-decoration: none;
  line-height: 0;
}
.logo-plate {
  background: var(--c-white);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  display: inline-flex;
  line-height: 0;
}
.logo-plate img {
  height: var(--logo-h);
  width: auto;
  display: block;
}
.logo-lockup--light .logo-plate { display: none; }

/* Primary nav (≥1200px only) */
.nav-primary { display: none; }
.nav-primary > ul {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-primary a,
.nav-primary .dd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nav-primary a:hover,
.nav-primary .dd-toggle:hover {
  color: var(--c-white);
  background: rgba(255, 255, 255, .06);
}
.nav-primary a:hover { text-decoration: none; }
.nav-primary a:focus-visible { outline-color: var(--c-orange-500); }

.nav-primary a[aria-current="page"],
.nav-primary a.is-active-parent {
  color: var(--c-white);
}
.nav-primary a[aria-current="page"]::after,
.nav-primary a.is-active-parent::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  border-radius: var(--r-full);
  background: var(--c-orange-500);
}
.nav-primary a.btn[aria-current="page"] { background: var(--c-orange-800); }
.nav-primary a.btn[aria-current="page"]::after { display: none; }

.nav-primary .nav-cta { margin-left: 12px; }

/* Dropdown "Individual Software" (disclosure pattern) */
.has-dd { position: relative; }
.dd-toggle .icon { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-out); }
.dd-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

.dd-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  background: var(--c-charcoal-800);
  border: var(--border-dark);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: 8px;
  opacity: 0;
  transform: translateY(-4px);
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
  z-index: 20;
}
.has-dd.is-open .dd-panel {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}
.dd-panel a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-family: var(--ff-body);
  font-size: 15px;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  white-space: nowrap;
}
.dd-panel a:hover { background: var(--c-charcoal-700); color: var(--c-white); text-decoration: none; }
.dd-panel a[aria-current="page"] { color: var(--c-orange-500); }

/* Language switcher — header variant (§4.10) */
.lang-switch { position: relative; display: none; margin-left: 12px; }
.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--c-white);
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
}
.lang-switch__btn:hover { border-color: rgba(255, 255, 255, .4); }
.lang-switch__btn .icon { width: 18px; height: 18px; }
.lang-switch__btn .icon--chevron { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-out); }
.lang-switch__btn[aria-expanded="true"] .icon--chevron { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--c-charcoal-800);
  border: var(--border-dark);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: 8px;
  opacity: 0;
  transform: translateY(-4px);
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
  z-index: 20;
}
.lang-switch.is-open .lang-menu {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}
.lang-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  font-family: var(--ff-body);
  font-size: 15px;
}
.lang-menu a:hover { background: var(--c-charcoal-700); color: var(--c-white); text-decoration: none; }
.lang-menu a .lang-code { font-family: var(--ff-mono); font-size: var(--fs-eyebrow); }
.lang-menu a .lang-check { width: 16px; height: 16px; margin-left: auto; color: var(--c-orange-500); visibility: hidden; }
.lang-menu a[aria-current="true"] { color: var(--c-white); }
.lang-menu a[aria-current="true"] .lang-check { visibility: visible; }

/* Burger (below 1200px) */
.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  color: var(--c-white);
  flex: none;
}
.nav-burger:hover { background: rgba(255, 255, 255, .08); }
.nav-burger .icon { width: 24px; height: 24px; }

/* ----------------------------------------------------------------------------
   §3.2 nav-drawer (below 1200px)
   ---------------------------------------------------------------------------- */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 15, 18, .64);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
  z-index: var(--z-drawer-overlay);
}
.nav-overlay.is-open {
  z-index: 10000; /* above the consent layer (banner 9998, manager 9999) */
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(100vw, 400px);
  background: var(--c-charcoal-800);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.nav-drawer.is-open {
  z-index: 10001; /* above the consent layer (banner 9998, manager 9999) */
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}

.nav-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding-inline: 16px;
  flex: none;
}
.nav-drawer__top .logo-plate img { height: 26px; }
.nav-drawer__close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  color: var(--c-white);
}
.nav-drawer__close:hover { background: rgba(255, 255, 255, .08); }

.nav-drawer__list {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: var(--sp-2);
}
.nav-drawer__list > li {
  border-bottom: var(--border-dark);
  min-height: 56px;
}
.nav-drawer__list > li:last-child { border-bottom: 0; }
.nav-drawer__link,
.nav-drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 56px;
  padding-inline: 24px;
  font-family: var(--ff-body);
  font-size: 18px;
  font-weight: 500;
  color: var(--c-white);
  text-decoration: none;
}
a.nav-drawer__link:hover { background: rgba(255, 255, 255, .06); text-decoration: none; }
.nav-drawer__row .nav-drawer__link {
  padding-inline: 0;
  flex: 1 1 auto;
  min-height: 56px;
}

.nav-drawer__toggle {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  color: var(--c-white);
  flex: none;
}
.nav-drawer__toggle .icon { width: 20px; height: 20px; transition: transform var(--dur-base) var(--ease-out); }
.nav-drawer__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

.nav-drawer__sub {
  overflow: hidden;
}
.nav-drawer__sub[hidden] { display: none; }
.nav-drawer__sub a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-left: 40px;
  padding-right: 24px;
  font-family: var(--ff-body);
  font-size: 16px;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
}
.nav-drawer__sub a:hover { background: rgba(255, 255, 255, .06); color: var(--c-white); text-decoration: none; }
.nav-drawer__sub a[aria-current="page"] { color: var(--c-orange-500); }

.nav-drawer__footer {
  margin-top: auto;
  padding: 24px;
  border-top: var(--border-dark);
  flex: none;
}

/* drawer open → document scroll locked (html + body: iOS Safari ignores html-only) */
html.no-scroll,
html.no-scroll body { overflow: hidden; }

/* Language switcher — segmented (drawer) */
.lang-switch--segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--sp-4);
}
.lang-switch--segmented a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
  border: 1px solid var(--c-charcoal-700);
}
.lang-switch--segmented a:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.lang-switch--segmented a:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.lang-switch--segmented a + a { border-left: 0; }
.lang-switch--segmented a:hover { background: var(--c-charcoal-700); text-decoration: none; }
.lang-switch--segmented a[aria-current="true"] {
  background: var(--c-orange-600);
  color: var(--c-white);
}

/* Language switcher — inline (footer) */
.lang-switch--inline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
}
.lang-switch--inline a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  color: var(--c-grey-400);
  text-decoration: none;
}
.lang-switch--inline a:hover { color: var(--c-white); text-decoration: none; }
.lang-switch--inline a[aria-current="true"] {
  color: var(--c-white);
  font-weight: 600;
}
.lang-switch--inline .lang-sep { color: var(--c-charcoal-700); }

/* ----------------------------------------------------------------------------
   §3.3 site-footer
   ---------------------------------------------------------------------------- */
.site-footer {
  background: var(--c-charcoal-900);
  color: var(--c-white);
  padding: 72px 0 32px;
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--g-brand);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-10);
}
.site-footer__brand .logo-plate img { height: 30px; }
.site-footer__tagline {
  margin-top: var(--sp-5);
  font-size: 15px;
  color: var(--c-grey-400);
  max-width: 34ch;
}

/* social links (brand column, under the tagline) — §3.3 tokens */
.site-footer__social {
  display: flex;
  gap: var(--sp-3);
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
}
.site-footer__social a {
  color: var(--c-grey-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-footer__social a:hover { color: var(--c-orange-500); }
.site-footer__social .icon { width: 20px; height: 20px; }

.site-footer__heading {
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-grey-400);
  margin-bottom: var(--sp-4);
}

.site-footer__col ul {
  display: grid;
  gap: var(--sp-3);
}
.site-footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 15px;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
}
.site-footer__col a:hover {
  color: var(--c-orange-500);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__contact-rows {
  display: grid;
  gap: 10px;
}
.site-footer__contact-rows li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}
.site-footer__contact-rows .icon { width: 16px; height: 16px; color: var(--c-orange-500); }
.site-footer__contact-rows a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.site-footer__contact-rows a:hover { color: var(--c-orange-500); text-decoration: underline; }
.site-footer__cta { margin-top: var(--sp-5); }

.site-footer__bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: var(--border-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--c-grey-400);
}
.site-footer__legal {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.site-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--c-grey-400);
  text-decoration: none;
}
.site-footer__legal a:hover { color: var(--c-white); text-decoration: underline; }

/* ----------------------------------------------------------------------------
   §3.7 Band system
   ---------------------------------------------------------------------------- */
.band {
  padding-block: var(--band-py);
}
.band--white { background: var(--c-white); color: var(--c-ink); }
.band--grey { background: var(--c-grey-50); color: var(--c-ink); }
.band--orange { background: var(--c-orange-600); color: var(--c-white); }
.band--dark { background: var(--c-charcoal-900); color: var(--c-white); }

.band--orange strong, .band--orange b { color: var(--c-white); }
.band--orange a:not([class]) { color: var(--c-white); }

.band--seam {
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.band--white h2, .band--grey h2,
.band--white h3, .band--grey h3,
.band--white h4, .band--grey h4 { color: var(--c-orange-700); }
.band--orange h2, .band--orange h3, .band--orange h4 { color: var(--c-white); }
.band--dark h2, .band--dark h3, .band--dark h4 { color: var(--c-white); }

.band-split.container,
.band-split.container--wide,
.band-split .container,
.band-split .container--wide,
.band-statement .container,
.band-columns-3 .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
}
/* Desktop split layouts */
.band-split__title { max-width: 60ch; }
.band-split__subline {
  font-size: var(--fs-h4);
  font-weight: 500;
  opacity: .9;
  margin-top: var(--sp-3);
  max-width: 48ch;
}
.band--orange .band-split__subline { color: var(--c-white); }
.band--white .band-split__subline,
.band--grey .band-split__subline { color: var(--c-orange-700); }
.band-split__text {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  min-width: 0;
}
.band-split__text p { color: inherit; }
.band-split__cta { margin-top: var(--sp-6); }
.band-split__cta a { display: inline-flex; }

.band-statement {
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
}
.band-statement__follow {
  margin-top: var(--sp-6);
  display: grid;
  gap: var(--sp-4);
  justify-items: center;
}
.band-statement__follow p { margin-inline: auto; }
.band--grey .band-statement__follow, .band--white .band-statement__follow { color: var(--c-ink); }
.band-statement__follow { color: inherit; }

.band-columns-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
}
.band-columns-3__col h3 { margin-top: var(--sp-4); }
.band-columns-3__col .skew-bar { width: 24px; height: 3px; }

/* ----------------------------------------------------------------------------
   §3.8 section-head
   ---------------------------------------------------------------------------- */
.section-head { margin-bottom: 32px; }
.section-head .section-marker { margin-bottom: var(--sp-5); }
.section-head .section-head__intro {
  margin-top: var(--sp-4);
  font-size: var(--fs-lead);
  line-height: 1.6;
  max-width: 68ch;
}
.band--orange .section-head .section-head__intro { color: var(--c-white); }
.band--white .section-head .section-head__intro,
.band--grey .section-head .section-head__intro { color: var(--c-ink-muted); }
.section-head--center { text-align: center; }
.section-head--center .section-marker { margin-inline: auto; }
.section-head--center .section-head__intro { margin-inline: auto; }

/* ----------------------------------------------------------------------------
   §3.9 Chips + §4.8 badges
   ---------------------------------------------------------------------------- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.chip-row + .chip-row { margin-top: var(--sp-4); }
.chip-row__label {
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-right: var(--sp-2);
}

.chip--tag {
  display: inline-flex;
  align-items: center;
  background: var(--c-orange-600);
  color: var(--c-white);
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--r-sm);
}

.chip--anchor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-white);
  border: 1.5px solid var(--c-orange-600);
  color: var(--c-orange-700);
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  text-decoration: none;
}
.chip--anchor .icon { width: 16px; height: 16px; }
.chip--anchor:hover { background: var(--c-orange-50); text-decoration: none; }

.chip--tech {
  display: inline-flex;
  align-items: center;
  background: var(--c-grey-100);
  color: var(--c-ink);
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--r-sm);
}

.badge--soon {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  background: var(--c-orange-50);
  color: var(--c-orange-700);
  border: 1px solid var(--c-orange-100);
}

/* ----------------------------------------------------------------------------
   §3.6 Heroes
   ---------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
}

/* hero--photo */
.hero--photo {
  position: relative;
  isolation: isolate;
  background: var(--c-charcoal-900);
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  padding-block: 56px;
}
.hero--photo .container--wide {
  position: relative;
  z-index: 1;
}
.hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-hero-overlay);
  background: linear-gradient(180deg, rgba(20, 22, 26, .25) 0%, rgba(20, 22, 26, .85) 70%);
}
.hero__img,
.hero__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-hero-img);
  width: 100%;
  height: 100%;
}
.hero__img {
  object-fit: cover;
}
.hero__media { object-position: 65% 50%; }

.hero__content { max-width: 100%; }

.hero__lead {
  margin-top: var(--sp-6);
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, .9);
  max-width: 52ch;
}

/* hl-stack — the brand motif (§3.6) */
.hl-stack {
  font-family: var(--ff-display);
  margin: 0;
}
.hl-stack .hl {
  display: block;
  width: fit-content;
  max-width: 100%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  border-radius: var(--r-xs);
  margin-top: 10px;
  overflow-wrap: break-word;
  hyphens: auto;
}
.hl-stack .hl:first-child { margin-top: 0; }

.hl--1 {
  background: var(--c-orange-500);
  color: var(--c-white);
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  padding: .06em .28em .12em;
}
.hl--2 {
  background: var(--c-orange-500);
  color: var(--c-white);
  font-size: var(--fs-hl-2);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  padding: .18em .42em;
}
.hl--3 {
  background: var(--c-white);
  color: var(--c-charcoal-900);
  font-size: var(--fs-hl-3);
  font-weight: 700;
  line-height: 1.25;
  padding: .28em .55em;
}
.hl--dark {
  background: var(--c-charcoal-900);
  color: var(--c-white);
  font-size: var(--fs-hl-2);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  padding: .18em .42em;
}

/* Load-time wipe (§2.7) — applied only when JS is present */
html.js .hl-stack .hl {
  clip-path: inset(0 100% 0 0);
  animation: hl-wipe var(--dur-slow) var(--ease-out) forwards;
}
html.js .hl-stack .hl:nth-child(2) { animation-delay: 90ms; }
html.js .hl-stack .hl:nth-child(3) { animation-delay: 180ms; }
@keyframes hl-wipe {
  to { clip-path: inset(0 0 0 0); }
}

/* hero--band-orange */
.hero--band-orange {
  background: var(--c-orange-600);
  color: var(--c-white);
  padding-block: 72px;
  overflow: hidden;
}
.hero--band-orange h1 {
  font-size: var(--fs-h1);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-white);
  max-width: 16ch;
}
.hero__sub {
  margin-top: var(--sp-5);
  font-size: var(--fs-lead);
  max-width: 40ch;
}
.hero--band-orange .hero__sub { color: rgba(255, 255, 255, .92); }
.hero--band-dark .hero__sub { color: var(--c-grey-400); max-width: 56ch; }

.hero--band-orange .hero__deco {
  display: none;
}
.hero__deco {
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 14px;
}
.hero__deco span {
  display: block;
  height: 14px;
  border-radius: var(--r-xs);
  background: var(--c-white);
  transform: skewX(var(--skew));
}
.hero__deco span:nth-child(1) { width: 180px; opacity: .2; }
.hero__deco span:nth-child(2) { width: 120px; opacity: .14; }
.hero__deco span:nth-child(3) { width: 64px; opacity: .08; }

/* hero--band-dark */
.hero--band-dark {
  background:
    radial-gradient(110% 140% at 85% 15%, rgba(240, 78, 35, .30) 0%, rgba(240, 78, 35, 0) 55%),
    linear-gradient(160deg, #1F2228 0%, #14161A 60%, #0E0F12 100%);
  color: var(--c-white);
  min-height: 280px;
  display: flex;
  align-items: center;
  padding-block: 72px;
  text-align: center;
  overflow: hidden;
}
.hero--band-dark h1 {
  font-size: var(--fs-h1);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-white);
}
.hero--band-dark .container--wide { display: grid; justify-items: center; }

.hero__decay {
  display: none;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.hero__decay span {
  display: block;
  height: 6px;
  background: var(--c-orange-500);
  transform: skewX(var(--skew));
}
.hero__decay span:nth-child(1) { width: 40px; opacity: .9; }
.hero__decay span:nth-child(2) { width: 24px; opacity: .7; }
.hero__decay span:nth-child(3) { width: 14px; opacity: .5; }
.hero__decay span:nth-child(4) { width: 8px; opacity: .35; }

/* ----------------------------------------------------------------------------
   §4.12 feature-photo (home AI teaser)
   ---------------------------------------------------------------------------- */
.feature-photo {
  position: relative;
  isolation: isolate;
  background: var(--c-charcoal-900);
  min-height: 480px;
  display: flex;
  align-items: center;
  padding-block: 56px;
  color: var(--c-white);
}
.feature-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-hero-overlay);
  background: rgba(20, 22, 26, .78);
}
.feature-photo__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-hero-img);
}
.feature-photo .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
}
.feature-photo__text {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  min-width: 0;
}
.feature-photo__text h2 { margin: 0; }
.feature-photo__cta { margin-top: var(--sp-2); }

/* ----------------------------------------------------------------------------
   §3.10 stat-row
   ---------------------------------------------------------------------------- */
.stat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
}
.stat-row__item {
  display: grid;
  justify-items: center;
  text-align: center;
}
.stat-row__num {
  font-family: var(--ff-display);
  font-size: var(--fs-numeral);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.band--orange .stat-row__num { color: var(--c-white); }
.band--white .stat-row__num { color: var(--c-orange-500); }
.stat-row__unit {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-top: 4px;
}
.band--orange .stat-row__unit { color: var(--c-white); }
.band--white .stat-row__unit { color: var(--c-orange-500); }
/* skewed 32×4 divider between numeral and description (pseudo-element keeps
   the <dl> content model valid: div > dt + dd only) */
.stat-row__item::after {
  content: "";
  display: block;
  width: 32px;
  height: 4px;
  margin: 16px auto;
  border-radius: var(--r-xs);
  background: var(--c-white);
  transform: skewX(var(--skew));
}
.band--white .stat-row__item::after { background: var(--g-brand); }
.stat-row__desc {
  font-size: var(--fs-body);
  max-width: 26ch;
}
.band--orange .stat-row__desc { color: rgba(255, 255, 255, .9); }
.band--white .stat-row__desc { color: var(--c-ink-muted); }
.stat-row__item + .stat-row__item {
  border-top: 1px solid rgba(255, 255, 255, .22);
  padding-top: var(--sp-8);
}
.band--white .stat-row__item + .stat-row__item { border-top-color: var(--c-grey-200); }

/* ----------------------------------------------------------------------------
   §3.11 Step patterns
   ---------------------------------------------------------------------------- */
.step-numerals {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-10);
  counter-reset: step;
}
.step-numerals__num {
  display: block;
  font-family: var(--ff-display);
  font-size: var(--fs-numeral);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.band--orange .step-numerals__num { color: var(--c-white); }
.band--white .step-numerals__num { color: var(--c-orange-500); }
.step-numerals h3 { margin-top: var(--sp-4); }
@media (min-width: 1025px) {
  .step-numerals h3 { font-size: 24px; }
}

.step-rows { counter-reset: steprow; }
.step-rows li {
  border-top: 1px solid var(--c-grey-300);
  padding-block: var(--sp-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}
.step-rows__num {
  display: block;
  font-family: var(--ff-display);
  font-size: 40px;
  font-weight: 800;
  color: var(--c-orange-500);
  line-height: 1;
}
.step-rows h3 { color: var(--c-orange-700); }
.step-rows__body { min-width: 0; display: grid; gap: var(--sp-4); align-content: start; }

/* ----------------------------------------------------------------------------
   §3.12 Timelines
   ---------------------------------------------------------------------------- */
.timeline {
  position: relative;
  display: grid;
  gap: 36px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--c-grey-300);
}
.timeline__spine {
  position: absolute;
  left: 23px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--g-brand);
  transform-origin: top;
  transform: scaleY(1);
}
/* With JS the spine grows with scroll progress; JS sets scaleY inline.
   No-JS and reduced-motion: stays fully filled. */
.timeline.is-filled .timeline__spine { transform: scaleY(1) !important; }

.timeline__step {
  position: relative;
  padding-left: 72px;
  min-width: 0;
}
.timeline__node {
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  background: var(--c-orange-600);
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px var(--c-white), var(--sh-sm);
  z-index: 1;
}
.timeline__node .icon { width: 24px; height: 24px; }
.timeline__index {
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  color: var(--c-orange-700);
}
.timeline__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--c-ink);
  margin-top: 4px;
}
.timeline__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-ink-muted);
  margin-top: 6px;
}

/* timeline--3 desktop: centre spine, alternating sides (§3.12) */
@media (min-width: 1025px) {
  .timeline--3 { display: block; }
  .timeline--3::before,
  .timeline--3 .timeline__spine { left: calc(50% - 1px); }
  .timeline--3 .timeline__step {
    width: calc(50% - 64px);
    padding-left: 0;
  }
  .timeline--3 .timeline__step:nth-child(odd) {
    margin-right: auto;
    text-align: right;
  }
  .timeline--3 .timeline__step:nth-child(even) {
    margin-left: auto;
  }
  .timeline--3 .timeline__step:nth-child(even) .timeline__node { left: auto; }
  .timeline--3 .timeline__node {
    top: 0;
  }
  .timeline--3 .timeline__step:nth-child(odd) .timeline__node { right: calc(-64px - 24px); left: auto; }
  .timeline--3 .timeline__step:nth-child(even) .timeline__node { left: calc(-64px - 24px); }
  .timeline--3 .timeline__step + .timeline__step { margin-top: -40px; }
}
.timeline-card {
  padding: 24px;
}

/* ----------------------------------------------------------------------------
   §3.13 Cards + grids
   ---------------------------------------------------------------------------- */
.card {
  background: var(--c-white);
  border: var(--border-hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: 24px;
  min-width: 0;
}
a.card, .card--link {
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
a.card:hover, .card--link:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

.grid-2, .grid-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
}
.grid-advantages__bar, .grid-benefits__bar {
  width: 24px;
  height: 3px;
}
.grid-advantages h3, .grid-benefits h3 {
  font-size: var(--fs-h4);
  color: var(--c-orange-700);
  margin-top: var(--sp-4);
}
.grid-advantages p, .grid-benefits p {
  font-size: 15px;
  color: var(--c-ink-muted);
  margin-top: 10px;
}

/* grid-knowhow */
.grid-knowhow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-10) var(--sp-12);
}
.grid-knowhow__item {
  border-top: var(--border-hairline);
  padding-top: var(--sp-6);
  min-width: 0;
}
.grid-knowhow__item h3 {
  font-size: var(--fs-h4);
  color: var(--c-ink);
}
.grid-knowhow__item p {
  font-size: 15px;
  color: var(--c-ink-muted);
  margin-top: 8px;
}
.grid-knowhow__chips { margin-top: var(--sp-3); }
.grid-knowhow__sublabel {
  font-family: var(--ff-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-ink-muted);
  margin: var(--sp-3) 0 var(--sp-2);
}

/* ai-service (§3.13) */
.ai-service__num { color: var(--c-orange-500); }
.ai-service__intro { margin-top: var(--sp-4); }
.ai-service__intro .lead { font-size: var(--fs-lead); }
.ai-service__body {
  margin-top: var(--sp-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
}
.ai-service h3 { font-size: var(--fs-h4); }
.ai-service .list-slash { margin-top: var(--sp-4); }
.ai-service__examples { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.ai-service__examples li {
  display: flex;
  gap: var(--sp-3);
  font-size: 15px;
  align-items: baseline;
}
.ai-service__examples .num {
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  color: var(--c-orange-700);
}
.ai-service__question {
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-ink);
  margin-top: var(--sp-6);
}

.trend-box {
  background: var(--c-orange-50);
  border-left: 4px solid var(--c-orange-500);
  border-radius: var(--r-md);
  padding: 20px 24px;
  margin-top: 28px;
}
.trend-box__title {
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-orange-700);
}
.trend-box p, .trend-box__body {
  font-size: 15px;
  color: var(--c-ink);
  margin-top: 8px;
}

/* ----------------------------------------------------------------------------
   §4.4 Lists
   ---------------------------------------------------------------------------- */
.list-slash li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
}
.list-slash li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  background: var(--c-orange-500);
  transform: skewX(var(--skew));
}
.band--orange .list-slash li::before { background: var(--c-white); }

.list-2col {}
@media (min-width: 601px) {
  .list-2col {
    column-count: 2;
    column-gap: 48px;
  }
}

ol.numbered { counter-reset: numbered; }
ol.numbered li {
  counter-increment: numbered;
  position: relative;
  padding-left: 40px;
  margin-bottom: var(--sp-3);
}
ol.numbered li::before {
  content: counter(numbered, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  color: var(--c-orange-700);
}

/* ----------------------------------------------------------------------------
   §3.14 logo-row
   ---------------------------------------------------------------------------- */.logo-row__viewport { overflow: hidden; }
.logo-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
}
.logo-row li {
  background: var(--c-white);
  border: var(--border-hairline);
  border-radius: var(--r-lg);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-width: 0;
}
.logo-row img {
  max-height: 64px;
  max-width: 80%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .75;
  transition: filter var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.logo-row li:hover img,
.logo-row li:focus-within img {
  filter: none;
  opacity: 1;
}

/* Logo tiles deep-link to the matching case study; visible company caption (2026-10-19) */
.logo-row a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  text-align: center;
  text-decoration: none;
}
.logo-row a img { max-height: 140px; }
.logo-row__name {
  margin-top: var(--sp-5);
  font-size: var(--sp-6);
  font-weight: 600;
  color: var(--c-ink-muted);
}
.logo-row a:hover .logo-row__name,
.logo-row a:focus-visible .logo-row__name { color: var(--c-ink); }

/* Mobile carousel (≤600px): track scrolls internally, page does not overflow */
@media (max-width: 600px) {
  .logo-row__viewport { overflow: hidden; }
  .logo-row {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 44%;
    gap: var(--sp-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-inline: var(--container-pad);
  }
  .logo-row::-webkit-scrollbar { display: none; }
  .logo-row li { scroll-snap-align: start; }
  .logo-row__dots {
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
  }
}
.logo-row__dots { display: none; }
@media (max-width: 600px) {
  .logo-row__dots { display: flex; }
}
.logo-row__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--c-grey-300);
  padding: 0;
  transition: width var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.logo-row__dot[aria-current="true"] {
  width: 24px;
  background: var(--c-orange-600);
}

/* ----------------------------------------------------------------------------
   §3.15 FAQ accordion
   ---------------------------------------------------------------------------- */
.faq {
  max-width: 880px;
  margin-inline: auto;
  border-top: 1px solid var(--c-grey-300);
}
.faq__item { border-bottom: 1px solid var(--c-grey-300); }
.faq__q {
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}
.faq__q button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: 24px 0;
  text-align: left;
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-orange-700);
}
.faq__q button:hover { color: var(--c-orange-800); }
.faq__q .icon { width: 24px; height: 24px; transition: transform var(--dur-base) var(--ease-out); }
.faq__q button[aria-expanded="true"] .icon { transform: rotate(180deg); }
.faq__a {
  overflow: hidden;
}
.faq__a[hidden] { display: none; }
.faq__a-inner {
  padding-bottom: 24px;
  font-size: var(--fs-body);
  color: var(--c-ink);
  max-width: 68ch;
}
/* Without JS: items render open (the hidden attribute is added by JS only) */

/* ----------------------------------------------------------------------------
   §3.16 founder-duo / §3.17 team-grid
   ---------------------------------------------------------------------------- */
.founder-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-10);
  max-width: 960px;
  margin-inline: auto;
}
.founder-duo figure {
  display: grid;
  justify-items: center;
  text-align: center;
}
.founder-duo__avatar {
  width: 180px;
  height: 180px;
  border-radius: var(--r-full);
  object-fit: cover;
  object-position: center 20%;
  background: var(--c-grey-50);
  box-shadow: 0 0 0 4px var(--c-white), var(--sh-md);
}
.founder-duo figcaption { margin-top: var(--sp-4); }
.founder-duo__name {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-ink);
}
.founder-duo__role {
  font-size: 15px;
  color: var(--c-ink-muted);
  margin-top: 2px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}
.team-grid figure { min-width: 0; }
.team-grid__avatar {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-full);
  object-fit: cover;
  object-position: center 20%;
  background: var(--c-grey-50);
  box-shadow: 0 0 0 4px var(--c-white), var(--sh-md);
  width: 100%;
}
.team-grid__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-ink);
  margin-top: var(--sp-3);
}
.team-grid__role {
  font-size: var(--fs-small);
  color: var(--c-ink-muted);
}
.team-grid__monogram {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  background: var(--c-charcoal-900);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}
.team-grid__monogram span {
  font-family: var(--ff-display);
  font-size: 48px;
  font-weight: 800;
  color: var(--c-orange-500);
  line-height: 1;
}
.team-grid__note {
  font-size: 15px;
  color: var(--c-ink-muted);
}

/* ----------------------------------------------------------------------------
   §3.18 case-study
   ---------------------------------------------------------------------------- */
.case-study {
  max-width: 880px;
  margin-inline: auto;
}
.case-study article {
  padding-block: var(--sp-12);
}
.case-study article + article { border-top: var(--border-hairline); }
.case-study__eyebrow {
  font-family: var(--ff-mono);
  font-size: var(--sp-6);
  text-transform: uppercase;
  color: var(--c-orange-700);
}
.case-study h3 { margin-top: var(--sp-2); color: var(--c-ink); }
.case-study__body { margin-top: var(--sp-4); display: grid; gap: var(--sp-4); }
.case-study__logo {
  display: block;
  width: auto;
  min-height: 145px;
  max-width: 160px;
  object-fit: contain;
  margin-bottom: var(--sp-2);
}

/* ----------------------------------------------------------------------------
   §3.19 coming-soon
   ---------------------------------------------------------------------------- */
.coming-soon {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  display: grid;
  justify-items: center;
}
.coming-soon h2 { margin-top: var(--sp-5); }
.coming-soon__intro {
  margin-top: var(--sp-4);
  font-size: var(--fs-lead);
  color: var(--c-ink-muted);
  max-width: 60ch;
}
.coming-soon__actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  flex-wrap: wrap;
  justify-content: center;
}

/* ----------------------------------------------------------------------------
   §3.4 cta-contact + tabs
   ---------------------------------------------------------------------------- */
.cta-contact__intro {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: var(--sp-10);
  text-align: center;
  display: grid;
  justify-items: center;
}
.cta-contact__intro h2 { color: var(--c-orange-700); }
.cta-contact__sub1 {
  margin-top: var(--sp-4);
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--c-ink);
}
.cta-contact__sub2 {
  margin-top: var(--sp-2);
  font-size: var(--fs-body);
  color: var(--c-ink-muted);
}

.cta-tabs {
  max-width: 880px;
  margin-inline: auto;
  margin-bottom: var(--sp-10);
}
.cta-tabs__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--c-grey-300);
}
.cta-tabs__tab {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 16px 12px 18px;
  position: relative;
  border-radius: 0;
}
.cta-tabs__tab:hover { background: transparent; }
.cta-tabs__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.cta-tabs__tab:hover .cta-tabs__label { color: var(--c-orange-700); }
.cta-tabs__tab[aria-selected="true"] .cta-tabs__label { color: var(--c-orange-700); }
.cta-tabs__tab .icon { width: 20px; height: 20px; }
.cta-tabs__sublabel {
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  color: var(--c-ink-muted);
  margin-top: 4px;
}
.cta-tabs__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: var(--r-full);
  background: transparent;
  transition: background var(--dur-fast) var(--ease-out);
}
.cta-tabs__tab[aria-selected="true"]::after { background: var(--c-orange-500); }

.cta-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  max-width: 600px;
  margin-inline: auto;
  align-items: start;
}

/* founder-card */
.founder-card {
  background: var(--c-white);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  margin: 0;
  min-width: 0;
}
.founder-card__media {
  background: var(--c-white);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.founder-card__media img {
  width: 180px;
  height: 180px;
  border-radius: var(--r-full);
  object-fit: cover;
  object-position: center 20%;
  background: var(--c-grey-50);
  box-shadow: 0 0 0 4px var(--c-white), var(--sh-md);
}
.founder-card figcaption {
  padding: 20px 24px 24px;
}
.founder-card__name {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-ink);
  margin-top: 14px;
}
.founder-card__role {
  font-size: 15px;
  color: var(--c-ink-muted);
  margin-top: 2px;
}

/* booking-card */
.booking-card {
  background: var(--c-white);
  border: var(--border-hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: 24px;
  text-align: center;
  display: grid;
  justify-items: center;
  min-width: 0;
}
.booking-card .icon { color: var(--c-orange-500); }
.booking-card h3 { margin-top: var(--sp-4); }
.booking-card p {
  margin-top: var(--sp-3);
  color: var(--c-ink-muted);
  max-width: 44ch;
}
.booking-card .btn { margin-top: var(--sp-6); }

.cta-tabpanel { min-width: 0; }
.cta-tabpanel[hidden] { display: none; }
.cta-tabpanel:focus-visible { outline: 3px solid var(--c-orange-500); outline-offset: 4px; }

/* cta-contact--inline (kontakt) */
.cta-contact--inline .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: center;
}
.cta-contact--inline h2 { color: var(--c-ink); }
.cta-contact--inline .cta-contact__lead { font-size: var(--fs-lead); }
.cta-contact--inline .form-card { max-width: 600px; }

/* ----------------------------------------------------------------------------
   §3.5 form-card — the ONE form style
   ---------------------------------------------------------------------------- */
.form-card {
  background: var(--c-white);
  border: var(--border-hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px 16px;
  min-width: 0;
}
.form-card__field {
  min-width: 0;
  width: 100%;
  grid-column: span 1;
}
.form-card__field--span2 { grid-column: span 1; }

.form-card label {
  display: block;
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: 6px;
}
.form-card label .req {
  color: var(--c-orange-700);
  margin-left: 2px;
}

.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="tel"],
.form-card select,
.form-card textarea {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 48px;
  padding: 12px 14px;
  font-family: var(--ff-body);
  font-size: 16px;
  color: var(--c-ink);
  background: var(--c-white);
  border: var(--border-input);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form-card textarea {
  height: auto;
  min-height: 140px;
  resize: vertical;
}
.form-card input:hover,
.form-card select:hover,
.form-card textarea:hover { border-color: var(--c-input-hover-border); }
.form-card input:focus-visible,
.form-card select:focus-visible,
.form-card textarea:focus-visible {
  outline: none;
  border: 1px solid var(--c-orange-600);
  box-shadow: var(--ring);
}
.form-card input[aria-invalid="true"],
.form-card select[aria-invalid="true"],
.form-card textarea[aria-invalid="true"] {
  border: 1.5px solid var(--c-error);
  background: #FFFBFB;
}

.form-card select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("media/icons/sprite.svg#i-chevron-down");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
}

/* Custom checkbox */
.form-card__checkbox {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}
.form-card__checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 2px 0 0;
  padding: 0;
  border: 1.5px solid var(--c-grey-300);
  border-radius: var(--r-xs);
  background: var(--c-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.form-card__checkbox input[type="checkbox"]:hover { border-color: var(--c-input-hover-border); }
.form-card__checkbox input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--c-orange-600);
  box-shadow: var(--ring);
}
.form-card__checkbox input[type="checkbox"]:checked {
  background: var(--c-orange-600);
  border-color: var(--c-orange-600);
}
.form-card__checkbox input[type="checkbox"]:checked::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--c-white);
  /* Inline data-URI check (external sprite fragment refs don't render in Chromium/Safari masks) */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.75l4.75 4.75L19.5 7' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.75l4.75 4.75L19.5 7' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.form-card__checkbox input[type="checkbox"][aria-invalid="true"] {
  border: 1.5px solid var(--c-error);
}
.form-card__checkbox label {
  font-size: var(--fs-small);
  line-height: 1.5;
  font-weight: 400;
  color: var(--c-ink-muted);
  margin-bottom: 0;
  max-width: none;
}
.form-card__checkbox label a {
  color: var(--c-orange-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form-card__checkbox label a:hover { color: var(--c-orange-800); }

/* Field errors — all failing fields marked at once */
.field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-eyebrow);
  color: var(--c-error);
  margin-top: 6px;
  max-width: none;
}
.field-error .icon { width: 16px; height: 16px; }

/* Honeypot */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Turnstile slot */
.turnstile-slot { min-width: 0; }
.turnstile-slot.is-active { min-height: 65px; }
.turnstile-slot[hidden] { display: none; }
.turnstile-slot iframe { max-width: 100%; }

/* Submit + status */
.form-card__submit {
  grid-column: span 1;
}
.form-card__submit .btn {
  width: 100%;
}
.form-card__submit .icon { width: 20px; height: 20px; }

.form-status { grid-column: span 1; min-width: 0; }

.form-required-note {
  grid-column: span 1;
  font-size: var(--fs-eyebrow);
  color: var(--c-ink-muted);
}

/* Server error alert (above the submit button) */
.form-alert {
  grid-column: span 1;
  background: var(--c-error-bg);
  border-left: 4px solid var(--c-error);
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-size: var(--fs-small);
  color: var(--c-ink);
}
.form-alert[hidden] { display: none; }

/* Success panel (replaces the card content) */
.form-success {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding-block: var(--sp-6);
}
.form-success .icon { color: var(--c-success); }
.form-success h3 {
  font-size: var(--fs-h3);
  color: var(--c-ink);
}
.form-success p { color: var(--c-ink-muted); }

/* Spinning loader */
.icon--spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Disabled controls */
.form-card input:disabled,
.form-card select:disabled,
.form-card textarea:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* ----------------------------------------------------------------------------
   §2.7 Scroll reveal — hidden state only when JS is present
   ---------------------------------------------------------------------------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------------------------------
   §8 Responsive
   ---------------------------------------------------------------------------- */

/* Tablet 601–1024 */
@media (min-width: 601px) and (max-width: 1024px) {
  :root {
    --band-py: 72px;
    --container-pad: 24px;
  }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .founder-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .founder-duo__avatar { width: 200px; height: 200px; }
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer { padding: 56px 0 24px; }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
  .hero--photo { min-height: 560px; padding-block: 80px; align-items: center; }
  .hero--photo .hero__media { object-position: 70% 50%; }
  .hero--photo::after {
    background: linear-gradient(90deg, rgba(20, 22, 26, .85) 0%, rgba(20, 22, 26, .6) 42%, rgba(20, 22, 26, .15) 100%);
  }
  .feature-photo { min-height: 480px; padding-block: 72px; }
  .feature-photo::after {
    background: linear-gradient(90deg, rgba(20, 22, 26, .2) 0%, rgba(20, 22, 26, .85) 60%);
  }
  .hero--band-orange { padding-block: 96px; }
  .hero--band-dark { min-height: 320px; padding-block: 96px; }
  .timeline-card { padding: 40px; }
  .card { padding: 28px; }
  .form-card { padding: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-card__field--span2 { grid-column: span 2; }
  .form-card__submit, .form-status, .form-alert, .form-required-note { grid-column: span 2; }
  .form-card__submit .btn { width: auto; }
  .step-rows li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .section-head { margin-bottom: 40px; }
  .faq__q, .faq__q button { font-size: 20px; }
  .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-row__item + .stat-row__item {
    border-top: 0;
    padding-top: 0;
    border-left: 1px solid var(--c-grey-200);
    padding-left: var(--sp-8);
  }
  .band--orange .stat-row__item + .stat-row__item { border-left-color: rgba(255, 255, 255, .22); }
  .band-split.container,
  .band-split.container--wide,
  .band-split .container,
  .band-split .container--wide { gap: var(--sp-6); }
  .band-split--reverse .band-split__head { order: -1; }
  .booking-card, .form-card { padding: 32px; }
  .founder-card__media img { width: 200px; height: 200px; }
  .grid-knowhow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10) var(--sp-12); }
  .cta-contact__grid { max-width: 600px; }
}

/* Desktop ≥1025 */
@media (min-width: 1025px) {
  :root {
    --band-py: 96px;
    --container-pad: 32px;
  }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
  .band-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-12); }
  .step-numerals { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-12); }
  .ai-service__body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); }
  .site-footer__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--sp-8);
  }
  .site-footer__brand { grid-column: span 4; }
  .site-footer__services { grid-column: span 3; }
  .site-footer__company { grid-column: span 2; }
  .site-footer__contact { grid-column: span 3; }
  .hero--photo {
    min-height: clamp(600px, 78vh, 760px);
    padding-block: 96px;
    align-items: center;
  }
  .hero--photo .hero__media { object-position: 70% 50%; }
  .hero--photo::after {
    background: linear-gradient(90deg, rgba(20, 22, 26, .85) 0%, rgba(20, 22, 26, .6) 42%, rgba(20, 22, 26, .15) 100%);
  }
  .hero__content { max-width: 880px; }
  .feature-photo { min-height: 520px; padding-block: var(--band-py); }
  .feature-photo::after {
    background: linear-gradient(90deg, rgba(20, 22, 26, .2) 0%, rgba(20, 22, 26, .85) 60%);
  }
  .feature-photo .container {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--sp-8);
    align-items: center;
  }
  .feature-photo__head { grid-column: span 6; }
  .feature-photo__text { grid-column: span 5; }
  .hero--band-orange { padding-block: 120px; }
  .hero--band-orange .hero__deco { display: grid; }
  .hero--band-dark { min-height: 360px; padding-block: 120px; }
  .hero--band-dark .hero__decay { display: flex; }
  .hero__decay { margin-bottom: 24px; }
  .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-row__item + .stat-row__item {
    border-top: 0;
    padding-top: 0;
    border-left: 1px solid var(--c-grey-200);
    padding-left: var(--sp-8);
  }
  .band--orange .stat-row__item + .stat-row__item { border-left-color: rgba(255, 255, 255, .22); }
  .band-split.container,
  .band-split.container--wide,
  .band-split .container,
  .band-split .container--wide {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--sp-8);
    align-items: center;
  }
  .band-split__head { grid-column: span 5; }
  .band-split__text { grid-column: span 7; }
  .band-split--reverse .band-split__head { grid-column: 8 / span 5; grid-row: 1; }
  .band-split--reverse .band-split__text { grid-column: 1 / span 6; grid-row: 1; }
  .band-split__title { font-size: clamp(32px, 4vw, 52px); }
  .section-head { margin-bottom: 48px; }
  .card { padding: 32px; }
  .form-card { padding: 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-card__field--span2 { grid-column: span 2; }
  .form-card__submit, .form-status, .form-alert, .form-required-note { grid-column: span 2; }
  .form-card__submit .btn { width: auto; }
  .founder-card__media img { width: 240px; height: 240px; }
  .cta-contact__grid {
    max-width: none;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--sp-8);
  }
  .cta-contact__grid .founder-card { grid-column: span 5; }
  .cta-contact__grid .cta-tabpanel { grid-column: span 7; }
  .cta-contact--inline .container {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--sp-8);
  }
  .cta-contact--inline__text { grid-column: span 5; }
  .cta-contact--inline .form-card { grid-column: 7 / span 6; max-width: none; }
  .grid-knowhow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .founder-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); }
  .founder-duo__avatar { width: 240px; height: 240px; }
  .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .timeline-card { padding: 64px; }
  .faq__q, .faq__q button { font-size: 20px; }
  .step-rows li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); }
  .booking-card, .form-card { padding: 40px; }
  .grid-advantages, .grid-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Nav exception: full horizontal nav only at ≥1200px (§2.3) */
@media (min-width: 1200px) {
  :root {
    --header-h: 76px;
    --logo-h: 30px;
  }
  .nav-primary { display: block; }
  .header-lang { display: inline-flex; }
  .lang-switch__btn { display: inline-flex; }
  .nav-burger, .nav-drawer, .nav-overlay { display: none; }
  .site-header .nav-cta-tablet { display: none; }
}

/* Below 1200px: burger navigation */
@media (max-width: 1199px) {
  .nav-primary { display: none; }
  .header-lang { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-cta-tablet { display: inline-flex; margin-left: auto; }
  .nav-cta-tablet.is-hidden-mobile { display: none; }
}

/* Mobile ≤600 */
@media (max-width: 600px) {
  .nav-cta-tablet { display: none; }
  .feature-photo { min-height: auto; }
  .site-footer { padding: 56px 0 24px; }
  .site-footer__grid { gap: var(--sp-10); }
  .site-footer__bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .site-footer__legal { justify-content: center; }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .band-split--reverse .band-split__head { order: -1; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-knowhow { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .chip--anchor { flex: 1 1 100%; justify-content: space-between; }
  [id] { scroll-margin-top: 96px; }
  .coming-soon__actions { flex-direction: column; }
  .coming-soon__actions .btn { width: 100%; }
}

/* Cookie manager button (fixed, 57px + 20px inset) must not cover footer links
   or the footer CTA — reserve its zone at every width where it can appear. */
@media (max-width: 1024px) {
  .site-footer { padding-bottom: 104px; }
}

/* ----------------------------------------------------------------------------
   §6.3 prefers-reduced-motion
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html.js .hl-stack .hl {
    clip-path: none;
    animation: none;
  }
  .icon--spin { animation: none; }
  .timeline__spine { transform: scaleY(1); }
}

/* ============================================================================
   === page: projekt-rettung & individual-software ===
   Page-specific additions (kept minimal — everything else reuses §3/§4 system
   classes). Reference: page-design-projekt-rettung.md / -individual-software.md
   ============================================================================ */

/* Centered/left copy column (§3 intro/empathy, §5–§6 paragraphs): grid gap 16px */
.copy-col { display: grid; gap: var(--sp-4); min-width: 0; }
.copy-col--center {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

/* projekt-rettung §6: closing "Our goal:" line after step-numerals */
.goal-line {
  margin-top: var(--sp-10);
  margin-inline: auto;
  text-align: center;
  font-size: var(--fs-lead);
}

/* individual-software §9: band-statement >25 words renders at --fs-h3 size */
.statement-h3 { font-size: var(--fs-h3); }

/* Small spacing utilities (design-specified margins not carried by shared classes) */
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }

/* individual-software §8: wrapper giving the logo block its 40px top margin */
.logo-row-block { margin-top: var(--sp-10); }

/* individual-software §4: grid-advantages base grid was not in styles.css
   (only the ≥1025px 3-col override existed). Base = 1 col; tablet = 2 cols;
   desktop keeps the existing repeat(3, minmax(0,1fr)) rule. */
.grid-advantages, .grid-benefits { display: grid; gap: var(--sp-6); }
@media (min-width: 601px) and (max-width: 1024px) {
  .grid-advantages, .grid-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* individual-software §8: 6-logo desktop row (§3.14). Tablet keeps the shared
   3-col rule; ≤600px keeps the shared scroll-snap carousel untouched. */
@media (min-width: 1025px) {
  .logo-row--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ============================================================================
   === page: ai-entwicklung ===
   Page-specific additions (kept minimal — everything else reuses §3/§4 system
   classes). Reference: page-design-ai-entwicklung.md
   ============================================================================ */

/* §3 anchor chips: in-page targets clear the sticky header on jump
   (design §3/Implementation Notes; html scroll-padding-top: 96px already
   provides the offset globally — this satisfies the per-target contract) */
#ai-1, #ai-2, #ai-3 { scroll-margin-top: 96px; }

/* §5–7 ai-service: the page design specifies --fs-h3 for the LEFT/RIGHT column
   headings (Layout §5–7 + Implementation Notes). ai-service is used only on
   this page; the shared §3.13 rule (font-size: var(--fs-h4)) stays untouched. */
.ai-service h3 { font-size: var(--fs-h3); }

/* ============================================================================
   === page: support ===
   Page-specific additions (kept minimal — everything else reuses §3/§4 system
   classes). Reference: page-design-support.md
   ============================================================================ */

/* §5 timeline--3 card: §3.12 padding override — 64px desktop / 40px tablet /
   24px mobile (base .card padding is 24px at every breakpoint) */
.card--timeline { padding: 24px; }
@media (min-width: 601px) {
  .card--timeline { padding: 40px; }
}
@media (min-width: 1025px) {
  .card--timeline { padding: 64px; }
}

/* ============================================================================
   === page: expertise ===
   Page-specific additions (kept minimal — everything else reuses §3/§4 system
   classes). Reference: page-design-expertise.md
   ============================================================================ */

/* §4 founder-duo expertise variant: names are --c-orange-700 (§3.16). Scoped to
   the .founder-duo--expertise modifier so the kontakt duo (ink names) is
   unaffected when it is built. */
.founder-duo--expertise .founder-duo__name { color: var(--c-orange-700); }

/* §6 team-grid note spans the full grid width below the founder tiles
   (page-design-expertise.md §6 "the note spans the full grid width") */
.team-grid__note { grid-column: 1 / -1; margin-top: var(--sp-2); }

/* §7 list-2col: promise bullets must not split across the two columns */
.list-2col li { break-inside: avoid; }

/* ============================================================================
   === page: kontakt ===
   Page-specific additions (kept minimal — everything else reuses §3/§4 system
   classes). Reference: page-design-kontakt.md
   ============================================================================ */

/* §3 cta-contact--inline text block: centred dark heading block (§3.4 "the
   concept's centred dark heading"). Grid placement comes from the shared
   .cta-contact--inline rules (span 5 desktop / stacked below 1025px). */
.cta-contact--inline__text {
  min-width: 0;
  text-align: center;
}

/* §4 trust statements: 4 peer orange statements stacked (System Gap 1 — the
   smallest band-statement extension: --fs-h3 so a set of four stays
   proportionate), centred, max-width 900px, gap 24px */
.statements-stack {
  display: grid;
  gap: var(--sp-6);
  justify-items: center;
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.statements-stack h3 { color: var(--c-orange-700); }

/* ============================================================================
   === page: individual-software sub-pages (adminportale + logistik, sensoren,
   telekommunikation, lifelink) ===
   Page-specific additions (kept minimal — hero--band-dark, coming-soon,
   badge--soon and band-columns-3 system classes already exist).
   Reference: page-design-adminportale.md + the four coming-soon designs
   ============================================================================ */

/* §2 hero--band-dark: fixed rhythm spacing — the pixel-decay accent centred
   24px above the h1 (§3.6 decoration); the shared classes carry no margins
   of their own */
.hero--band-dark .hero__decay { margin-bottom: var(--sp-6); }

/* adminportale §4 Arbeitsweise cards: 32px card icons are brand orange
   (§4.13 "icons in cards … 32px --c-orange-500"; .icon--32 has no colour) */
.band-columns-3 .card > .icon { color: var(--c-orange-500); }

/* ----------------------------------------------------------------------------
   === page: partners (2026-10-19 user addition) — partner-grid
   (page-design-partners.md §3 / System Gap 1): composes the .card base (§3.13),
   the logo-row logo treatment (grayscale → colour on hover) and the
   grid-advantages column pattern (1 / 2 / 3 cols, gap 24px). NEW component.
   ---------------------------------------------------------------------------- */
.partner-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--sp-6);
  list-style: none;
  padding: 0;
  margin: 0;
}
/* equal-height cards: the li is the stretched grid item; making it a flex
   container lets each .partner-card anchor fill its cell (width + height) */
.partner-grid > li { display: flex; }
.partner-card { display: flex; flex: 1; flex-direction: column; align-items: center; padding: 24px; }
.partner-card__logo {
  height: 150px;
  width: auto;
  max-width: 80%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .75;
  transition: filter var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.partner-card:hover .partner-card__logo,
.partner-card:focus-within .partner-card__logo { filter: none; opacity: 1; }
.partner-card__line {
  font-size: var(--fs-small);
  color: var(--c-ink-muted);
  margin: var(--sp-4) 0 0;
  max-width: 40ch;
  text-align: center;
  overflow-wrap: break-word;
  hyphens: auto;
}
/* icon-only marks (Vonage "V", Clearspan "C") need a text name caption —
   wordmarks (AT&T, Syniverse, Multitaction, Caregility) carry the name in the logo */
.partner-card__name {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  color: var(--c-ink-muted);
}
.partner-card__name + .partner-card__line { margin-top: var(--sp-2); }
@media (min-width: 601px) and (max-width: 1024px) {
  .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-card { padding: 28px; }
}
@media (min-width: 1025px) {
  .partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .partner-card { padding: 32px; }
}

/* ----------------------------------------------------------------------------
   === page: kontakt offices (2026-10-19 user addition) — map embed + address
   cards inside the white cta-contact--inline band. Keyless Google-Maps embed
   iframe (responsive wrapper, no overflow), address cards reuse the .card base.
   ---------------------------------------------------------------------------- */
.cta-contact--inline .offices { grid-column: 1 / -1; margin-top: var(--sp-12); }
.office-map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--c-grey-50);
  border: var(--border-hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.office-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.office-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  list-style: none;
  padding: 0;
  margin: var(--sp-6) 0 0;
}
.office-card__city {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--c-ink);
  margin: 0 0 var(--sp-2);
}
.office-card__addr { color: var(--c-ink-muted); font-size: 15px; line-height: 1.6; margin: 0; overflow-wrap: break-word; }
@media (min-width: 601px) and (max-width: 1024px) {
  .office-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1025px) {
  .office-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* legal docs: h3/h4 sub-levels (privacy policy real text — old site hierarchy) */
.legal-doc h3 {
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  color: var(--c-ink);
  margin: var(--sp-6) 0 var(--sp-3);
}
.legal-doc h4 {
  font-family: var(--ff-display);
  font-size: 1rem;
  color: var(--c-ink);
  margin: var(--sp-5) 0 var(--sp-2);
}

/* ----------------------------------------------------------------------------
   Cookie consent (fs-cc v1.15 driver, local-only — driver asset cookie-consent.js)
   Behavior contract replicated from sites/laura (see knowledge/concepts/laura-cookie-banner.md):
   banner primary button = fs-cc="open-preferences" (opens prefs modal);
   styled with nexgen tokens — dark surfaces, orange tri-strength, Manrope/IBM Plex.
   Laura's IX2-driven 5s slide-in is recreated as a pure-CSS animation
   (delay 5s, backwards fill so the driver's inline-opacity fade-out still works);
   toggle checked-state (IX2 in laura) is native :checked CSS.
   ============================================================================ */
.fs-cc-banner_component {
  z-index: 9998;
  background: var(--c-charcoal-900);
  color: var(--c-white);
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 1rem clamp(1rem, 3vw, 2rem);
  display: none;
  position: fixed;
  inset: auto 0% 0%;
  box-shadow: 0 24px 48px -16px rgba(20,22,26,.28);
}
@media (prefers-reduced-motion: no-preference) {
  .fs-cc-banner_component {
    animation: fscc-banner-in .45s var(--ease-out) 5s backwards;
  }
}
@keyframes fscc-banner-in {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.fs-cc-banner_container {
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: center;
  width: 100%;
  max-width: 73.75rem;
  margin-inline: auto;
  display: flex;
}
.fs-cc-banner_text {
  color: var(--c-white);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.fs-cc-banner_text-link {
  color: var(--c-white);
  border-bottom: 1px solid rgba(255, 255, 255, .55);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.fs-cc-banner_text-link:hover { color: var(--c-orange-400); border-color: var(--c-orange-400); }
.fs-cc-banner_buttons-wrapper {
  gap: .75rem;
  flex: none;
  align-items: center;
  display: flex;
}
.fs-cc-banner_button,
.fs-cc-prefs_button {
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
  background: var(--c-orange-600);
  color: var(--c-white);
  border: 1px solid var(--c-orange-600);
  border-radius: var(--r-md);
  padding: .65rem 1.25rem;
  cursor: pointer;
  display: inline-block;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.fs-cc-banner_button:hover,
.fs-cc-prefs_button:hover { background: var(--c-orange-800); border-color: var(--c-orange-800); color: var(--c-white); }
.fs-cc-banner_button:active,
.fs-cc-prefs_button:active { transform: translateY(1px); }
.fs-cc-banner_button.fs-cc-button-alt,
.fs-cc-prefs_button.fs-cc-button-alt {
  background: transparent;
  color: var(--c-white);
  border-color: rgba(255, 255, 255, .35);
}
.fs-cc-banner_button.fs-cc-button-alt:hover,
.fs-cc-prefs_button.fs-cc-button-alt:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .7);
  color: var(--c-white);
}
/* prefs modal is a light surface — secondary button needs dark text + visible border */
.fs-cc-prefs_component .fs-cc-prefs_button.fs-cc-button-alt {
  background: var(--c-white);
  color: var(--c-ink);
  border-color: var(--c-grey-300);
}
.fs-cc-prefs_component .fs-cc-prefs_button.fs-cc-button-alt:hover {
  background: var(--c-grey-50);
  border-color: var(--c-ink-muted);
  color: var(--c-ink);
}
.fs-cc-banner_close {
  color: var(--c-white);
  cursor: pointer;
  background: rgba(255, 255, 255, .06);
  border-radius: var(--r-full);
  justify-content: center;
  align-items: center;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  transition: background var(--dur-fast) var(--ease-out);
}
.fs-cc-banner_close:hover { background: rgba(255, 255, 255, .14); }
.fs-cc-banner_close-icon { width: .75rem; height: .75rem; }

/* manager = reopen-settings icon shown after consent is stored */
.fs-cc-manager_component {
  z-index: 9999;
  color: var(--c-white);
  display: none;
  position: fixed;
  inset: auto auto 1.25rem 1.25rem;
}
.fs-cc-manager_button {
  color: var(--c-white);
  cursor: pointer;
  background: var(--c-charcoal-900);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-full);
  flex-direction: column;
  padding: .75rem;
  box-shadow: 0 8px 20px -6px rgba(20,22,26,.16);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.fs-cc-manager_button:hover { opacity: .92; transform: translateY(-2px); }
.fs-cc-manager_icon { width: 1.5rem; height: 1.5rem; }

/* preferences modal */
.fs-cc-prefs_component {
  z-index: 9997;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  padding: 2rem;
  display: none;
  position: fixed;
  inset: 0%;
}
.fs-cc-prefs_overlay {
  z-index: -1;
  -webkit-backdrop-filter: blur(.25rem);
  backdrop-filter: blur(.25rem);
  background: rgba(14, 15, 18, .55);
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}
.fs-cc-prefs_form {
  background: var(--c-white);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 36rem;
  height: 100%;
  max-height: 74vh;
  margin-bottom: 0;
  position: relative;
  box-shadow: 0 24px 48px -16px rgba(20,22,26,.28);
}
.fs-cc-prefs_close {
  z-index: 1;
  color: var(--c-ink);
  cursor: pointer;
  background: var(--c-white);
  border-radius: var(--r-full);
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.25rem;
  text-decoration: none;
  display: flex;
  position: absolute;
  inset: -1.25rem -.65rem auto auto;
  box-shadow: 0 8px 20px -6px rgba(20,22,26,.16);
}
.fs-cc-prefs_close-icon-2 { color: var(--c-ink); width: 1rem; height: 1rem; }
.fs-cc-prefs_content {
  height: 100%;
  padding: 2.5rem 2rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.fs-cc-prefs_space-small { margin-bottom: .75rem; }
.fs-cc-prefs_space-medium {
  gap: 1rem;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  margin-block: 1.5rem 2rem;
  display: flex;
}
.fs-cc-prefs_title {
  color: var(--c-ink);
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2em;
}
.fs-cc-prefs_text {
  color: var(--c-ink-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}
.fs-cc-prefs_option {
  border-bottom: var(--border-hairline);
  padding-block: 1rem;
}
.fs-cc-prefs_toggle-wrapper {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .5rem;
  display: flex;
}
.fs-cc-prefs_label {
  color: var(--c-ink);
  font-family: var(--ff-display);
  margin-block: 0;
  margin-right: 2rem;
  font-size: 1rem;
  font-weight: 700;
}
.fs-cc-prefs_checkbox-label { display: none; }
.fs-cc-prefs_submit-hide { display: none; }
.fs-cc-prefs_buttons-wrapper {
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
  margin-right: -.5rem;
  display: flex;
}

/* toggle: track = checkbox-field, knob = toggle; state via native :checked */
.fs-cc-prefs_checkbox-field {
  background: var(--c-grey-300);
  border-radius: var(--r-full);
  width: 2.75rem;
  height: 1.5rem;
  margin-bottom: 0;
  padding: .125rem;
  display: flex;
  position: relative;
  transition: background var(--dur-base) var(--ease-out);
}
.fs-cc-prefs_checkbox {
  z-index: 1;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  margin-top: 0;
  margin-left: 0;
  position: absolute;
  inset: 0%;
}
.fs-cc-prefs_toggle {
  background: var(--c-white);
  border-radius: var(--r-full);
  width: 1.25rem;
  height: 1.25rem;
  box-shadow: 0 1px 2px rgba(20,22,26,.06), 0 1px 3px rgba(20,22,26,.08);
  transition: transform var(--dur-base) var(--ease-out);
}
.fs-cc-prefs_checkbox:checked ~ .fs-cc-prefs_toggle { transform: translateX(1.25rem); }
.fs-cc-prefs_checkbox-field:has(.fs-cc-prefs_checkbox:checked) { background: var(--c-orange-600); }
.fs-cc-prefs_checkbox:focus-visible ~ .fs-cc-prefs_toggle {
  outline: 3px solid var(--c-orange-500);
  outline-offset: 2px;
}

/* laura-parity responsive shapes */
@media (max-width: 991px) {
  .fs-cc-banner_container { flex-flow: column; justify-content: flex-start; align-items: flex-start; }
  .fs-cc-banner_buttons-wrapper { flex-flow: wrap; }
}
@media (max-width: 600px) {
  .fs-cc-prefs_form { max-height: 95vh; position: relative; }
  .fs-cc-prefs_content, .fs-cc-prefs_component { padding: 1.5rem; }
  .fs-cc-prefs_title { font-size: 1.25rem; }
  .fs-cc-prefs_space-medium { flex-flow: column; align-items: stretch; }
  .fs-cc-prefs_buttons-wrapper { flex-flow: column; }
  .fs-cc-banner_buttons-wrapper { flex-flow: column-reverse wrap; justify-content: flex-end; align-items: stretch; width: 100%; }
  .fs-cc-banner_button, .fs-cc-prefs_button { width: 100%; }
  .fs-cc-banner_close { position: absolute; inset: -.625rem .625rem auto auto; }
}
/* banner appears instantly under reduced motion (no 5s invisible delay) */
@media (prefers-reduced-motion: reduce) {
  .fs-cc-banner_component { animation-delay: 0s; }
}

/* ----------------------------------------------------------------------------
   Legal pages (imprint / privacy-policy / terms) — single-prose-band layout
   reusing global type scale; no hero image (CSS-only hero--band-dark).
   ============================================================================ */
.legal-doc {
  max-width: 72ch;
  margin-inline: auto;
}
.legal-doc__notice {
  background: var(--c-grey-50);
  border-left: 4px solid var(--c-orange-500);
  border-radius: var(--r-sm);
  color: var(--c-ink-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
  padding: 1rem 1.25rem;
  margin-bottom: var(--sp-8);
}
.legal-doc h2 {
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  color: var(--c-ink);
  margin: var(--sp-8) 0 var(--sp-3);
}
.legal-doc h2:first-of-type { margin-top: 0; }
.legal-doc p { color: var(--c-ink-muted); margin: 0 0 var(--sp-3); }
.legal-doc strong { color: var(--c-ink); font-weight: 600; }
.legal-doc ul { color: var(--c-ink-muted); margin: 0 0 var(--sp-3); padding-left: 1.25rem; }
.legal-doc li { margin-bottom: .35rem; }