/* Base styles: design tokens, self-hosted fonts, reset, header, mega menu, footer.
   Direction (CONTRACT.md): warm off-white ground, warm ink, square corners, hairline rules, monospace labels,
   orange only where something changes. Neutrals and night are warm (Zaro reference); orange is the brand's. */

/* ── Tokens ── */
:root {
  --orange-700: #c2470a; --orange-600: #e0560e; --orange-500: #f26b1f; --orange-400: #ff8a42; --orange-300: #ffb27f; --orange-200: #ffd6ba; --orange-100: #fff1e7; --orange-50: #fff8f3;
  --night-950: #221e1b; --night-900: #2a2622; --night-800: #36312c; --night-700: #4a443e;
  --ink-900: #1f1a17; --ink-800: #2e2824; --ink-700: #463e39; --ink-600: #5a514b; --ink-500: #6f665f; --ink-400: #9a918a; --ink-300: #c9c2ba;
  --line-200: #d9d5cc; --line-100: #e6e3dc; --paper-50: #efede7; --white: #ffffff;
  --paper: #f8f7f4; --sand-100: #ecebe5; --text-tone: #8a8079; --text-tone-on-dark: #a8a097;
  --select-border: var(--orange-200); --row-active: #eef0f3;
  --status-green: #1e9e5a; --status-green-2: #7cc89a; --status-yellow: #f5a524; --status-red: #e5484d; --status-red-text: #d1343a; --status-green-text: #137a43; --status-grey: #c3c8cf;
  --tint-red-bg: #fff1f1; --tint-red-border: #fcd4d5; --tint-red-fg: #c62a2f; --tint-yellow-bg: #fff8eb; --tint-yellow-border: #fbe1b0; --tint-yellow-fg: #a35b00;
  --color-primary: var(--orange-600); --color-primary-hover: var(--orange-700); --color-accent: var(--orange-500); --app-primary: var(--orange-600); --app-primary-hover: var(--orange-700);
  --text-strong: var(--ink-900); --text-body: var(--ink-700); --text-muted: var(--ink-500); --text-subtle: var(--ink-400); --text-on-dark: #ffffff; --text-on-dark-muted: rgba(255,255,255,.72); --text-accent: var(--orange-600);
  --surface-page: var(--paper); --surface-app: var(--paper-50); --surface-card: var(--paper); --surface-tint: var(--orange-100); --surface-dark: var(--night-900);
  --border-card: var(--line-100); --border-divider: var(--line-200);
  /* Added by the port (not in the design tokens): hover step below orange-700, AA micro text on night surfaces, nav chrome literals. */
  --orange-800: #a33a07; --text-on-dark-subtle: var(--ink-400);
  --surface-nav-translucent: rgba(248, 247, 244, .9); --divider-on-dark: rgba(255, 255, 255, .24); --shadow-mega: 0 24px 48px rgba(31, 26, 23, .08);
}
:root {
  --font-display: 'Source Sans 3', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  --font-body: var(--font-display);
  --font-ui: var(--font-display);
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --fs-hero: 58px; --fs-h2: 40px; --fs-h3: 24px; --fs-lead: 18px; --fs-body: 16px; --fs-eyebrow: 16px; --fs-nav: 14px; --fs-button: 16px;
  --fs-app-title: 24px; --fs-app-kpi: 22px; --fs-app-body: 13px; --fs-app-small: 11px; --fs-app-label: 10px;
  --fs-print-title: 28pt; --fs-print-h2: 14pt; --fs-print-body: 10.5pt;
  --lh-tight: 1.1; --lh-snug: 1.3; --lh-body: 1.55;
  --ls-caps: .08em; --ls-caps-wide: .12em; --ls-tracked: .3em;
}
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --section-pad-y: 128px; --container-max: 1140px; --sidebar-w: 248px;
  --radius-xs: 2px; --radius-sm: 2px; --radius-md: 0; --radius-lg: 0; --radius-window: 0; --radius-full: 999px;
  --shadow-card: none;
  --shadow-toolbar: 0 2px 10px rgba(31,26,23,.08);
  --shadow-button: none;
  --shadow-window: 0 12px 32px rgba(31,26,23,.10);
  --ease-standard: cubic-bezier(.2,.0,.2,1); --dur-fast: 150ms; --dur-base: 250ms;
}

/* ── Fonts (self-hosted variable fonts, latin subset; no request to Google) ── */
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(../fonts/source-sans-3-latin.woff2) format('woff2'); }

/* ── Reset (as the design's helmet; body font and colour as the Pages wrapper) ── */
* { box-sizing: border-box; }
html { scroll-padding-top: 73px; }
body { margin: 0; background: var(--paper); font-family: var(--font-body); color: var(--ink-700); }
a { color: var(--orange-700); text-decoration: none; }
a:hover { color: var(--orange-800); }
html.mrm-lock { overflow: hidden; }

/* ── Shared rules (fix brief): no sideways scroll, one focus ring, reduced motion, long-word wrapping ── */
html, body { overflow-x: clip; }
:focus-visible { outline: 2px solid var(--orange-700); outline-offset: 2px; }
.mrm-footer :focus-visible, .mrm-on-dark :focus-visible { outline-color: var(--orange-400); }
h1, h2, h3 { overflow-wrap: break-word; }
.mrm-wrap { overflow-wrap: anywhere; min-width: 0; }
.mrm-wrap:lang(de) { hyphens: auto; hyphenate-limit-chars: 12 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5; } /* long words only, never «AML-Wei-sung» */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.mrm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mrm-skip { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--white); color: var(--ink-900); font: 600 15px var(--font-body); padding: 11px 18px; border-radius: 6px; }
.mrm-skip:focus { left: 16px; }

/* ── Buttons: square, ink on light, paper on dark (.mrm-on-dark) ── */
.mrm-btn { display: inline-block; background: var(--ink-900); color: var(--paper); font: 500 16px var(--font-body); padding: 14px 22px; border: 1px solid var(--ink-900); white-space: nowrap; }
.mrm-btn:hover { background: var(--ink-700); border-color: var(--ink-700); color: var(--paper); }
.mrm-btn--ghost { background: transparent; color: var(--ink-900); border-color: var(--ink-400); }
.mrm-btn--ghost:hover { background: var(--sand-100); color: var(--ink-900); border-color: var(--ink-900); }
.mrm-on-dark .mrm-btn { background: var(--paper); color: var(--ink-900); border-color: var(--paper); }
.mrm-on-dark .mrm-btn:hover { background: var(--sand-100); border-color: var(--sand-100); color: var(--ink-900); }
.mrm-on-dark .mrm-btn--ghost { background: transparent; color: var(--white); border-color: var(--divider-on-dark); }
.mrm-on-dark .mrm-btn--ghost:hover { background: var(--night-900); color: var(--white); border-color: var(--text-on-dark-muted); }
/* Two-tone headline: the statement in ink, its follow-on in a lighter tone. */
.mrm-tone { color: var(--text-tone); }
.mrm-on-dark .mrm-tone { color: var(--text-tone-on-dark); }
/* Monospace label: eyebrows, IDs, step numbers, card heads. */
.mrm-label { font: 500 12px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }

/* ── Kit: shared devices that keep pages from reading dry (CONTRACT.md rule 1) ── */
/* Image tile: art (img/art/*) in a frame with the top-right corner cut; optional caption on paper top-left. */
.mrm-tile { position: relative; margin: 0; overflow: hidden; background: var(--night-950); clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%); }
.mrm-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mrm-tile__label { position: absolute; top: 16px; left: 16px; background: var(--paper); color: var(--ink-900); padding: 6px 10px; }
/* Dot matrix on dark bands, fading out towards the middle so text stays clean (::after at z -2: under .mrm-art's image). */
.mrm-dots { position: relative; isolation: isolate; }
.mrm-dots::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(var(--night-700) 1.2px, transparent 1.6px) 0 0 / 14px 14px; -webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 30%, #000 90%); mask-image: radial-gradient(ellipse at 50% 50%, transparent 30%, #000 90%); }
/* Tab: a block (usually dark) with a tab cut into its top edge; the label sits in the tab. Content needs >= 96px top padding. */
.mrm-tab { position: relative; clip-path: polygon(0 0, 240px 0, 296px 56px, 100% 56px, 100% 100%, 0 100%); }
.mrm-tab__label { position: absolute; top: 20px; left: 32px; }
@media (max-width: 800px) {
  .mrm-tab { clip-path: polygon(0 0, 160px 0, 200px 40px, 100% 40px, 100% 100%, 0 100%); }
  .mrm-tab__label { top: 14px; left: 20px; }
}
/* Ruled grid: cells divided by hairlines instead of floating cards. Each cell draws its own frame and overlaps its
   neighbours by 1px, so lines stay 1px and an empty track draws nothing. Set display/columns inline, never gap. */
.mrm-ruled { gap: 0; }
.mrm-ruled > * { background: var(--paper); border: 1px solid var(--line-200); margin: 0 -1px -1px 0; }
.mrm-on-dark .mrm-ruled > * { background: var(--night-950); border-color: var(--night-700); }
/* Square tag (replaces pills). */
.mrm-tag { display: inline-block; background: var(--paper); border: 1px solid var(--line-200); color: var(--ink-800); font: 500 15px var(--font-body); padding: 10px 14px; }
.mrm-on-dark .mrm-tag { background: transparent; border-color: var(--night-700); color: var(--white); }
/* Product UI floating on a tinted panel (--sand-100 or --orange-100). */
.mrm-float { background: var(--white); border: 1px solid var(--line-200); box-shadow: var(--shadow-window); }
/* Scroll reveal, opt-in and sparing (section heads, tiles): fades up as it enters; static where unsupported. */
@supports (animation-timeline: view()) {
  .mrm-reveal { animation: mrm-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  @keyframes mrm-reveal { from { opacity: 0; transform: translateY(24px); } }
}
@media (prefers-reduced-motion: reduce) { .mrm-reveal { animation: none !important; } }

/* ── Header: the design's nav ── */
.mrm-nav { position: sticky; top: 0; z-index: 20; height: 72px; padding: 0 clamp(20px, 5vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: clamp(8px, 2vw, 24px); background: var(--surface-nav-translucent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-200); font-family: var(--font-body); }
.mrm-nav__logo { display: flex; flex: none; }
.mrm-nav__logo img { display: block; height: 28px; width: auto; }
.mrm-nav__menu { display: contents; }
.mrm-nav__list { display: flex; gap: 2px; flex-wrap: nowrap; min-width: 0; margin: 0; padding: 0; list-style: none; }
.mrm-nav__link { position: relative; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 10px 14px; cursor: pointer; white-space: nowrap; font: 500 clamp(13px, 1.3vw, 15px) var(--font-body); color: var(--ink-600); }
.mrm-nav__link:hover, .mrm-nav__link.is-active, .mrm-nav__link[aria-expanded="true"] { color: var(--ink-900); }
.mrm-nav__link.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: var(--orange-500); }
.mrm-nav__chev { flex: none; transition: transform var(--dur-fast) var(--ease-standard); }
.mrm-nav__link[aria-expanded="true"] .mrm-nav__chev { transform: rotate(180deg); }
.mrm-nav__actions { display: flex; align-items: center; gap: 20px; flex: none; }
.mrm-nav__lang { display: flex; align-items: center; gap: 6px; font: 500 12px var(--font-mono); color: var(--ink-900); }
.mrm-nav__lang a, .mrm-nav__lang [aria-current] { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; }
.mrm-nav__lang a { color: var(--ink-500); }
.mrm-nav__lang a:hover { color: var(--ink-900); }
.mrm-nav__sep { width: 1px; height: 12px; background: var(--line-200); }
.mrm-nav__demo { flex: none; white-space: nowrap; background: var(--ink-900); color: var(--paper); font: 500 15px var(--font-body); padding: 10px 16px; }
.mrm-nav__demo:hover, .mrm-nav__demo[aria-current] { background: var(--ink-700); color: var(--paper); }
/* Scroll progress bar under the nav (design frame 3a: width = scrollTop / scrollable height) */
.mrm-nav__progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--orange-500); }
.mrm-nav__burger { display: none; position: relative; flex: none; width: 40px; height: 40px; margin-right: -8px; padding: 0; border: 0; background: none; cursor: pointer; }
.mrm-nav__burger [aria-hidden], .mrm-nav__burger [aria-hidden]::before, .mrm-nav__burger [aria-hidden]::after { position: absolute; left: 10px; width: 20px; height: 2px; background: var(--ink-900); transition: transform var(--dur-fast) var(--ease-standard), background var(--dur-fast); }
.mrm-nav__burger [aria-hidden] { top: 19px; }
.mrm-nav__burger [aria-hidden]::before, .mrm-nav__burger [aria-hidden]::after { content: ""; left: 0; }
.mrm-nav__burger [aria-hidden]::before { top: -6px; }
.mrm-nav__burger [aria-hidden]::after { top: 6px; }
.mrm-nav__burger[aria-expanded="true"] [aria-hidden] { background: transparent; }
.mrm-nav__burger[aria-expanded="true"] [aria-hidden]::before { transform: translateY(6px) rotate(45deg); }
.mrm-nav__burger[aria-expanded="true"] [aria-hidden]::after { transform: translateY(-6px) rotate(-45deg); }

/* The hidden attribute wins over inline display:flex/grid from the design markup. */
[hidden] { display: none !important; }

/* ── Mega menu: full-width paper panel under the nav ── */
.mrm-mega { position: absolute; top: calc(100% + 1px); left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line-200); box-shadow: var(--shadow-mega); }
.mrm-mega__inner { display: flex; flex-wrap: wrap; gap: 40px 64px; padding: 36px clamp(20px, 5vw, 64px) 40px; }
.mrm-mega__title { margin: 0 0 16px; font: 500 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.mrm-mega ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mrm-mega ul.mrm-mega__wide { display: grid; grid-template-columns: repeat(2, max-content); gap: 12px 40px; }
.mrm-mega a { font: 500 15px/1.4 var(--font-body); color: var(--ink-700); }
.mrm-mega a:hover { color: var(--ink-900); }

/* ── Drawer below 1100px (the German menu needs ~1080px; keep in sync with base.js) ── */
@media (max-width: 1099.98px) {
  .mrm-nav.is-open { background: var(--paper); }
  .mrm-nav__burger { display: block; }
  .mrm-nav__menu { display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0; height: calc(100vh - 72px); height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; background: var(--paper); padding: 8px clamp(20px, 5vw, 64px) 32px; }
  .mrm-nav.is-open .mrm-nav__menu { display: block; }
  .mrm-nav__list { flex-direction: column; gap: 0; }
  .mrm-nav__item { border-bottom: 1px solid var(--line-200); }
  .mrm-nav__link { display: flex; width: 100%; justify-content: space-between; padding: 16px 0; font: 500 18px var(--font-body); color: var(--ink-900); }
  .mrm-nav__link.is-active::after { left: 0; right: auto; width: 24px; bottom: 8px; }
  .mrm-nav__chev { width: 14px; height: 14px; } /* the whole row is the button; the larger glyph only reads better */
  .mrm-mega { position: static; background: none; border: 0; box-shadow: none; }
  .mrm-mega__inner { flex-direction: column; gap: 24px; padding: 4px 0 24px; }
  .mrm-mega ul.mrm-mega__wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
  .mrm-nav__actions { flex-direction: column; align-items: stretch; gap: 20px; padding-top: 24px; }
  .mrm-nav__lang { margin-left: -4px; } /* the 24px hit areas centre "EN"; keep the text on the drawer's left edge */
  .mrm-nav__demo { text-align: center; padding: 14px 18px; }
}

/* ── Footer: the design's footer (frame 3a) ── */
.mrm-footer { background: var(--night-950); padding: 64px clamp(20px, 5vw, 64px) 32px; border-top: 1px solid var(--night-800); }
.mrm-footer__grid { display: grid; grid-template-columns: minmax(200px, 2fr) repeat(5, minmax(min-content, max-content)); gap: 40px; padding-bottom: 48px; } /* design: 2fr + 1fr columns; content-sized link columns so no link wraps */
.mrm-footer__brand { display: flex; flex-direction: column; gap: 16px; }
.mrm-footer__brand img { height: 26px; width: auto; align-self: flex-start; }
.mrm-footer__brand span { font: 14px/1.6 var(--font-body); color: var(--text-on-dark-muted); max-width: 280px; }
.mrm-footer__col { display: flex; flex-direction: column; gap: 12px; }
.mrm-footer__title { font: 700 11px var(--font-ui); letter-spacing: .12em; color: var(--text-on-dark-subtle); }
.mrm-footer__col a, .mrm-footer__col span { font: 14px var(--font-body); color: var(--text-on-dark-muted); white-space: nowrap; }
.mrm-footer__col a:hover { color: var(--white); }
.mrm-footer__legal { padding-top: 24px; border-top: 1px solid var(--night-800); font: 13px var(--font-body); color: var(--text-on-dark-subtle); }
/* Narrower (the German columns need ~1240px in one grid row): content-sized columns wrap into rows, never overflow, no link breaks; one column on phones. */
@media (max-width: 1279.98px) {
  .mrm-footer__grid { display: flex; flex-wrap: wrap; gap: 40px 48px; }
  .mrm-footer__brand { flex: 1 1 100%; }
}
@media (max-width: 479.98px) {
  .mrm-footer__grid { flex-direction: column; gap: 32px; }
}

/* ── Hero art: one image series (assets/img/art/) on the right of a dark or orange hero, fading into the
   background on the left. Set the image with style="--art:url(…)". From 1280 px only; there the hero text
   keeps to the left 680 px so it never runs over the subject. ── */
.mrm-art { position: relative; isolation: isolate; }
.mrm-art::before {
	content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: min(46%, 760px); z-index: -1; pointer-events: none;
	background: var(--art) center / cover no-repeat; /* images are cropped square-ish around the subject */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 25%); mask-image: linear-gradient(to right, transparent, #000 25%);
}
.mrm-art--top::before { /* section variant: art only in the band above the section's content */
	bottom: auto; height: 250px; background-size: auto 100%; background-position: right top;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 40%), linear-gradient(to bottom, #000 70%, transparent);
	-webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 40%), linear-gradient(to bottom, #000 70%, transparent);
	mask-composite: intersect;
}
@media (min-width: 1280px) { .mrm-art:not(.mrm-art--top) :is(h1, h1 ~ p, h1 ~ div) { max-width: min(100%, 680px) !important; } }
@media (max-width: 1279px) { .mrm-art::before { display: none; } }