/* ================================================================
   REMUNDO — "LATE LIGHT" DESIGN SYSTEM
   One universe: low warm sun on dark glass, bone paper, ink.
   Loaded after styles.css; legacy tokens are re-pointed here so every
   legacy component inherits the new system.
   ================================================================ */

@font-face { font-family: "Satoshi"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/satoshi/Satoshi-Variable.woff2") format("woff2"); }
/* 0. FONTS: self-hosted, open licences (Inter OFL, Roboto Slab Apache-2.0, IBM Plex Mono OFL) */
@font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/roboto-slab/roboto-slab-latin-wght-normal.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: "Roboto Slab"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/roboto-slab/roboto-slab-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plex-mono/ibm-plex-mono-latin-400-normal.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/ibm-plex-mono-latin-500-normal.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: 400; font-display: swap; src: url("../fonts/plex-mono/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* 1. TOKENS ------------------------------------------------------ */
:root {
  --ink: #0b0e0d;
  --ink-2: #111614;
  --ink-3: #171d1a;
  --bone: #ece6da;
  --bone-2: #ddd5c4;
  --paper: #f4f0e6;
  --amber: #84cc16;
  --amber-deep: #4b7f14;
  --brand: #0b5d3b;
  --line: rgba(236, 230, 218, 0.14);
  --line-strong: rgba(236, 230, 218, 0.3);

  /* legacy re-pointing */
  --bg: var(--ink);
  --surface: var(--ink-2);
  --surface-2: var(--ink-3);
  --surface-3: #1d2521;
  --text: var(--bone);
  --text-muted: #a9ada4;
  --border: var(--line);
  --border-strong: var(--line-strong);
  --accent: var(--amber);

  --font-slab: "Roboto Slab", "Rockwell", "Roboto Slab Fallback", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: "Satoshi", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: var(--font-display);
  --t-display: clamp(3rem, 8.4vw, 8rem);
  --t-h1: clamp(2.3rem, 5vw, 4.4rem);
  --t-h2: clamp(1.9rem, 3.8vw, 3.3rem);
  --t-h3: clamp(1.2rem, 1.6vw, 1.5rem);
  --t-lead: clamp(1.05rem, 1.4vw, 1.28rem);
  --t-meta: 0.72rem;

  --r-sm: 2px; --r-md: 4px; --r-lg: 6px; --r-xl: 10px;
  --glass-edge: linear-gradient(180deg, rgba(255, 236, 205, 0.28), rgba(255, 236, 205, 0.04) 40%, rgba(255, 236, 205, 0.1));

  /* motion tokens: micro / ui / content / spatial / cinematic */
  --m-micro: 180ms; --m-ui: 320ms; --m-content: 640ms; --m-spatial: 1000ms; --m-cine: 1500ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emph: var(--ease-out);
  --dur-base: var(--m-ui);
  --dur-reveal: var(--m-content);

  --container: min(1240px, calc(100% - clamp(2rem, 6vw, 5rem)));
}

html { background: var(--ink); scroll-behavior: auto; }
html body, :root:not([data-theme="light"]) body {
  background: transparent !important;
  font-variant-numeric: lining-nums;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--amber); color: var(--ink); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }

/* page transitions (progressive enhancement: View Transitions API) */
/* cross-document view transitions are not used: the spatial shell owns navigation transitions */
::view-transition-old(root) { animation: vt-out var(--m-ui) var(--ease-standard) both; }
::view-transition-new(root) { animation: vt-in var(--m-content) var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* 2. WORLD LAYER: -2 canvas · -1 scrim · 0 content · 20 nav · 30 HUD */
.gl-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; opacity: 0; transition: opacity var(--m-cine) var(--ease-out); }
.gl-ready .gl-canvas { opacity: 1; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 14, 13, 0.82) 0%, rgba(11, 14, 13, 0.5) 40%, rgba(11, 14, 13, 0) 78%),
    linear-gradient(180deg, rgba(11, 14, 13, 0.2), rgba(11, 14, 13, 0.5));
}
html:not([data-region="home"]) body:not([data-page="home"])::before, html[data-region]:not([data-region="home"]) body::before { background: linear-gradient(180deg, rgba(11, 14, 13, 0.62), rgba(11, 14, 13, 0.86)); }
/* static premium fallback: the same light, painted */
html:not(.gl-ready) body {
  background:
    radial-gradient(ellipse 60% 45% at 78% 22%, rgba(132, 204, 22, 0.26), transparent 65%),
    linear-gradient(180deg, #131a1f 0%, #221a14 62%, #0b0e0d 100%) !important;
}

/* 3. TYPOGRAPHY -------------------------------------------------- */
h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.035em; text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: 1.04; color: var(--bone); }
h2 { font-size: var(--t-h2); line-height: 1.08; }
h3 { font-size: var(--t-h3); line-height: 1.2; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
:is(body[data-page="home"], .panel[data-region="home"]) .hero-copy h1 { font-size: clamp(2.8rem, 6.6vw, 6.4rem); line-height: 0.98; letter-spacing: -0.04em; max-width: 14ch; }
p { text-wrap: pretty; }
.lead { font-size: var(--t-lead); line-height: 1.55; color: #cfd0c7; max-width: 60ch; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.8rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); background: none; border: 0; padding: 0; }
.eyebrow::before { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: 0.7; }
.section-head { max-width: 62rem; }

/* typographic wipe */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.24em 0.04em 0.16em; margin: -0.24em -0.04em -0.16em; } /* room for umlauts and descenders inside the reveal mask */
.w > span { display: inline-block; transform: translateY(108%); transition: transform var(--m-spatial) var(--ease-out); transition-delay: calc(var(--i, 0) * 38ms); }
.is-in .w > span { transform: none; }

/* 4. LAYOUT & RHYTHM (calm → impact → calm → information) ---------- */
.section, .section-soft { background: transparent; border: 0; }
.section { padding-block: clamp(4.5rem, 9vw, 8.5rem); }
main { padding-top: 92px; }
.panel[data-region="home"] main { padding-top: 0; }
:is(body[data-page="home"], .panel[data-region="home"]) main { padding-top: 0; }
.page-top { padding-top: clamp(3rem, 8vw, 7rem); }
body:not([data-page="home"]) h1, .panel:not([data-region="home"]) h1 { font-size: var(--t-h1); }

/* paper sections = the calm, high-legibility passages */
.section-soft, .section.is-paper {
  --bg: var(--bone); --surface: var(--paper); --surface-2: var(--bone-2);
  --text: #141a17; --text-muted: #4f5a54; --border: rgba(20, 26, 23, 0.16); --border-strong: rgba(20, 26, 23, 0.34);
  --accent: var(--amber-deep); --line: rgba(20, 26, 23, 0.16); --line-strong: rgba(20, 26, 23, 0.34);
  background: var(--bone); color: var(--text);
}
.section-soft h1, .section-soft h2, .section-soft h3, .section.is-paper h2 { color: #101613; }
.section-soft .lead, .section-soft p, .section.is-paper p { color: #3f4a44; }
.section-soft .eyebrow, .section.is-paper .eyebrow { color: var(--amber-deep); }

/* 5. NAVIGATION: liquid capsule ----------------------------------- */
.site-header { position: fixed; inset: 14px 0 auto 0; z-index: 20; border: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
.nav-shell {
  pointer-events: auto; position: relative; isolation: isolate; min-height: 58px; padding: 7px 8px 7px 20px; gap: 12px;
  flex-wrap: nowrap; justify-content: space-between; border-radius: 999px; border: 0;
  background: linear-gradient(180deg, rgba(24, 28, 26, 0.72), rgba(11, 14, 13, 0.7));
  backdrop-filter: blur(22px) saturate(1.5) brightness(0.9); -webkit-backdrop-filter: blur(22px) saturate(1.5) brightness(0.9);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}
.nav-shell::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: -1; background: var(--glass-edge); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.main-nav { position: relative; order: 0; width: auto; flex-wrap: nowrap; gap: 0; }
.main-nav a { position: relative; z-index: 1; border-radius: 999px; color: #bfc2b9; padding: 9px 15px; font-family: var(--font-display); font-size: 0.9rem; font-weight: 500; border: 0; transition: color var(--m-micro) var(--ease-standard); }
.main-nav a:hover, .main-nav a:focus-visible, .main-nav a[aria-current="page"] { color: var(--bone); }
.nav-capsule {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 0; width: var(--w, 0); transform: translateX(var(--x, 0));
  border-radius: 999px; pointer-events: none; opacity: 0; transition: opacity var(--m-ui);
  background: linear-gradient(180deg, rgba(255, 236, 205, 0.14), rgba(255, 236, 205, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 236, 205, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 6px 18px -8px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(6px) brightness(1.15);
  backdrop-filter: blur(6px) brightness(1.15);
  backdrop-filter: url(#rem-lens) brightness(1.18);
}
.nav-capsule.is-on { opacity: 1; }
.lens-defs { position: absolute; width: 0; height: 0; }
.header-actions { flex-wrap: nowrap; gap: 8px; }
.lang-switch { background: transparent; border: 0; }
.lang-chip { color: #9da199; border-radius: 999px; font-size: 0.75rem; letter-spacing: 0.06em; }
.lang-chip.active { background: rgba(236, 230, 218, 0.12); color: var(--bone); }

/* 6. BUTTONS & LINKS ------------------------------------------------ */
.btn { position: relative; border-radius: var(--r-md); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.005em; padding: 0.95rem 1.4rem; border: 1px solid var(--line-strong); transition: background var(--m-ui) var(--ease-out), color var(--m-ui), border-color var(--m-ui), transform var(--m-ui) var(--ease-spring); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn.btn-primary, .btn-primary { background: var(--bone); color: var(--ink); border-color: var(--bone); box-shadow: none; }
.btn.btn-primary:hover, .btn-primary:hover { background: var(--amber); border-color: var(--amber); color: var(--ink); box-shadow: none; }
.btn-primary::after { content: "\2192"; margin-left: 0.7em; display: inline-block; transition: transform var(--m-ui) var(--ease-out); }
.btn-primary:hover::after { transform: translateX(4px); }
.btn.btn-secondary, .btn-secondary { background: transparent; color: var(--bone); border-color: var(--line-strong); backdrop-filter: none; }
.btn.btn-secondary:hover, .btn-secondary:hover { border-color: var(--bone); background: rgba(236, 230, 218, 0.06); }
.btn.btn-primary:active { background: var(--amber-deep); color: var(--ink); box-shadow: none; }
.header-cta { border-radius: 999px; padding: 0.62rem 1.1rem; font-size: 0.86rem; }
.header-cta::after { display: none; }
.section-soft .btn.btn-secondary { color: #141a17; border-color: rgba(20, 26, 23, 0.4); }
.section-soft .btn.btn-primary { background: #141a17; color: var(--bone); border-color: #141a17; }
.section-soft .btn.btn-primary:hover { background: var(--amber-deep); border-color: var(--amber-deep); }
.text-link { color: inherit; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.01em; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; width: fit-content; transition: color var(--m-ui); }
.text-link::after { content: " \2192"; }
.text-link:hover { color: var(--amber); }
.section-soft .text-link:hover { color: var(--amber-deep); }

/* 7. SURFACES: solid + hairline. Glass only for nav / HUD / routing */
.card { position: relative; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(20, 26, 23, 0.86), rgba(11, 14, 13, 0.82)); box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9); backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; transition: border-color var(--m-ui) var(--ease-standard); }
.card:hover { border-color: var(--line-strong); }
.section-soft .card { background: var(--paper); border-color: rgba(20, 26, 23, 0.14); box-shadow: 0 24px 50px -40px rgba(20, 26, 23, 0.5); }
.js .reveal-on-scroll { opacity: 0; transform: translateY(28px); transition: opacity var(--m-content) var(--ease-out), transform var(--m-spatial) var(--ease-out); }
.js .reveal-on-scroll.is-visible { opacity: 1; transform: none; }
.js .card-grid .reveal-on-scroll:nth-child(2) { transition-delay: 70ms; }
.js .card-grid .reveal-on-scroll:nth-child(3) { transition-delay: 140ms; }
.js .card-grid .reveal-on-scroll:nth-child(4) { transition-delay: 210ms; }

/* icon system: one stroke, one grid, one size */
.icon-shell { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: transparent; color: var(--amber); }
.icon-shell svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.section-soft .icon-shell { color: var(--amber-deep); border-color: rgba(20, 26, 23, 0.3); }

/* technical bullets: hairline dash instead of decorative checks */
.checklist, .feature-list { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.checklist li, .feature-list li { position: relative; padding-left: 1.5rem; font-size: 0.95rem; color: var(--text-muted); }
.checklist li::before, .feature-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.8rem; height: 1px; background: var(--amber); border: 0; transform: none; }

/* 8. HOME */
:is(body[data-page="home"], .panel[data-region="home"]) .hero-infra { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding-block: 7rem clamp(3.5rem, 8vh, 6rem); }
:is(body[data-page="home"], .panel[data-region="home"]) .hero-grid { grid-template-columns: 1fr; }
:is(body[data-page="home"], .panel[data-region="home"]) .hero-media { display: none; }
:is(body[data-page="home"], .panel[data-region="home"]) .hero-copy { display: grid; gap: 1.6rem; max-width: 60rem; }
:is(body[data-page="home"], .panel[data-region="home"]) .hero-copy .lead { max-width: 46ch; font-size: clamp(1rem, 1.25vw, 1.15rem); }

.stat-grid li, .stat-grid { }
.stat-grid { display: flex; flex-wrap: wrap; gap: 0; margin: 1.6rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.stat, .stat-grid > li { display: grid; gap: 0.25rem; padding: 1.1rem clamp(1.2rem, 3vw, 3rem) 0 0; margin-right: clamp(1.2rem, 3vw, 3rem); border: 0; border-right: 1px solid var(--line); background: none; border-radius: 0; box-shadow: none; }
.stat:last-child { border-right: 0; }
.stat strong, .stat-grid li strong { font-family: var(--font-slab); font-weight: 500; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -0.02em; color: var(--bone); font-variant-numeric: lining-nums tabular-nums; }
.stat span, .stat-grid li span { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }

:is(body[data-page="home"], .panel[data-region="home"]) .section:not(.hero) { padding-block: clamp(5rem, 11vw, 10rem); }
:is(body[data-page="home"], .panel[data-region="home"]) .split-problem { align-items: center; gap: clamp(2rem, 6vw, 6rem); grid-template-columns: 1.15fr 0.85fr; }
:is(body[data-page="home"], .panel[data-region="home"]) .split-copy h2 { max-width: 20ch; }
:is(body[data-page="home"], .panel[data-region="home"]) .split-copy p { font-size: 1.02rem; line-height: 1.7; max-width: 58ch; }

:is(body[data-page="home"], .panel[data-region="home"]) .solution-card { background: none; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; box-shadow: none; padding: 1.6rem 0.2rem 0; gap: 1rem; }
:is(body[data-page="home"], .panel[data-region="home"]) .card-grid-3 { gap: clamp(1.5rem, 4vw, 4rem); }

:is(body[data-page="home"], .panel[data-region="home"]) .card-grid-4 { counter-reset: svc; grid-template-columns: 1fr; gap: 0; }
:is(body[data-page="home"], .panel[data-region="home"]) .card-grid-4 > .card { counter-increment: svc; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; display: grid; grid-template-columns: 4.5rem minmax(0, 1.05fr) minmax(0, 1.2fr) auto; align-items: baseline; gap: 1rem clamp(1rem, 3vw, 3rem); padding: 1.9rem 0; transition: padding var(--m-content) var(--ease-out), background var(--m-ui); }
:is(body[data-page="home"], .panel[data-region="home"]) .card-grid-4 > .card:last-child { border-bottom: 1px solid var(--line); }
:is(body[data-page="home"], .panel[data-region="home"]) .card-grid-4 > .card::before { content: "0" counter(svc); font-family: var(--font-slab); font-weight: 500; color: var(--amber); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
:is(body[data-page="home"], .panel[data-region="home"]) .card-grid-4 > .card h3 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.025em; font-size: clamp(1.3rem, 2vw, 1.8rem); }
:is(body[data-page="home"], .panel[data-region="home"]) .card-grid-4 > .card:hover { padding-left: 0.9rem; background: linear-gradient(90deg, rgba(132, 204, 22, 0.08), transparent 70%); }

/* process = engineering diagram: one rail, four nodes */
.timeline-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.4vw, 2.4rem); padding: 3.2rem 0 0; margin: 0; list-style: none; position: relative; background: none; border: 0; }
.timeline-track::before { content: ""; position: absolute; left: 0; right: 0; top: 0.55rem; height: 1px; background: linear-gradient(90deg, var(--text-muted), transparent 96%); opacity: 0.6; display: block; width: auto; }
.timeline-track::after { display: none; }
.timeline-track li { position: relative; background: none; border: 0; border-radius: 0; padding: 0; opacity: 1; transform: none; display: grid; gap: 0.6rem; align-content: start; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.timeline-track li::before { content: ""; display: block; position: absolute; top: -2.95rem; left: 0; width: 0.7rem; height: 0.7rem; border: 1px solid var(--text); background: var(--bg); border-radius: 0; transform: rotate(45deg); transition: background var(--m-ui), transform var(--m-spatial) var(--ease-spring); }
.timeline-track li.is-on::before { background: var(--amber); border-color: var(--amber); transform: rotate(45deg) scale(1.15); }
.timeline-track li strong { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.02em; font-size: 1.15rem; line-height: 1.25; }
.timeline-track li span { font-size: 0.92rem; color: var(--text-muted); line-height: 1.55; }

.funnel-card { background: linear-gradient(180deg, rgba(24, 28, 26, 0.7), rgba(11, 14, 13, 0.72)); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); border-color: var(--line-strong); max-width: 46rem; }

:root:not([data-theme="light"]) .cta-band, .cta-band { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; padding: clamp(2.2rem, 5vw, 4.5rem); border: 0; border-radius: var(--r-lg); background: var(--bone); color: #141a17; box-shadow: 0 50px 100px -50px rgba(0, 0, 0, 0.9); backdrop-filter: none; }
:root:not([data-theme="light"]) .cta-band { background: var(--bone); box-shadow: 0 50px 100px -50px rgba(0,0,0,.9); border: 0; }
.cta-band { max-width: none; margin-inline: 0; text-align: left; }
.cta-band h2 { color: #101613; max-width: 18ch; }
.cta-band p { color: #3f4a44; max-width: 52ch; }
.cta-band .btn.btn-primary { background: #141a17; color: var(--bone); border-color: #141a17; }
.cta-band .btn.btn-primary:hover { background: var(--amber-deep); border-color: var(--amber-deep); }

/* 9. IMAGERY: one grade for every photograph (authenticity kept) --- */
.media, .page-hero-img, .hero-media { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--ink-2); box-shadow: none; }
.page-hero-img img, .hero-media img, .media img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; box-shadow: none; filter: saturate(0.86) contrast(1.04) brightness(0.98); }
.page-hero-img::after, .hero-media::after, .media::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: 0.55; background: linear-gradient(200deg, rgba(132, 204, 22, 0.35), transparent 55%), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
/* mask reveal: clip the media, never the observed element (IntersectionObserver would see zero area) */
.mask-reveal > picture, .mask-reveal > img { display: block; clip-path: inset(0 0 100% 0); transition: clip-path var(--m-cine) var(--ease-out); }
.mask-reveal.is-in > picture, .mask-reveal.is-in > img { clip-path: inset(-160px -160px -160px -160px); }
.mask-reveal img { transform: scale(1.12); transition: transform 2s var(--ease-out); }
.mask-reveal.is-in img { transform: none; }
.summary-visual-video, .scope-card-video, .hero-video { filter: saturate(0.7) contrast(1.05) sepia(0.08); }
figcaption.media-cap { font-size: var(--t-meta); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); padding-top: 0.7rem; }

/* 10. FORMS ------------------------------------------------------- */
input, select, textarea { background: rgba(11, 14, 13, 0.7); border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--bone); transition: border-color var(--m-ui), box-shadow var(--m-ui); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.22); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #e0785e; }

/* 11. FOOTER ------------------------------------------------------ */
.site-footer { background: linear-gradient(180deg, transparent, rgba(8, 10, 9, 0.94) 22%); border-top: 1px solid var(--line); margin-top: 5rem; padding-top: 3rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 4rem); }
.footer-grid h2 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); font-weight: 600; margin-bottom: 1rem; }
.footer-grid a { color: #cbccc3; }
.footer-grid a:hover { color: var(--amber); }
.footer-col { display: grid; gap: 0.5rem; align-content: start; }
.footer-copy { border-top: 1px solid var(--line); margin-top: 3rem; padding-block: 1.4rem; color: var(--text-muted); font-size: 0.85rem; }

/* 12. JOURNEY UI --------------------------------------------------- */
.scroll-bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 90; background: var(--amber); transform-origin: left; transform: scaleX(var(--p, 0)); }
.hud { position: fixed; inset: 0; z-index: 30; pointer-events: none; transition: opacity var(--m-content) var(--ease-out); }
.hud.is-hidden { opacity: 0; }
.hud-rail { position: absolute; left: clamp(0.9rem, 2.2vw, 2rem); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.hud-rail i { display: block; width: 1px; height: 30px; background: rgba(236, 230, 218, 0.28); transition: background var(--m-ui), width var(--m-ui); }
.hud-rail i.on { background: var(--amber); width: 2px; }
.hud-label { position: absolute; left: clamp(2rem, 4.4vw, 4.2rem); bottom: clamp(1rem, 3vh, 1.8rem); display: flex; align-items: baseline; gap: 0.9rem; padding: 0.55rem 1.1rem; border-radius: 999px; background: rgba(11, 14, 13, 0.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--line); }
.hud-num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--amber); font-weight: 600; }
.hud-title { font-size: 0.9rem; font-weight: 550; color: var(--bone); }
.hud-title.swap { animation: hudswap var(--m-content) var(--ease-out); }
@keyframes hudswap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 13. RESPONSIVE ART DIRECTION -------------------------------------- */
@media (max-width: 1100px) {
  .main-nav a { padding: 8px 8px; font-size: 0.78rem; }
  .nav-shell { padding-left: 14px; gap: 6px; }
  .brand-mark { width: 112px; height: auto; }
  .header-actions { gap: 2px; }
  .lang-chip { padding-inline: 7px; }
  :is(body[data-page="home"], .panel[data-region="home"]) .card-grid-4 > .card { grid-template-columns: 3rem 1fr; }
  :is(body[data-page="home"], .panel[data-region="home"]) .card-grid-4 > .card p, :is(body[data-page="home"], .panel[data-region="home"]) .card-grid-4 > .card .text-link { grid-column: 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  :is(body[data-page="home"], .panel[data-region="home"]) .split-problem { grid-template-columns: 1fr; }
  .timeline-track { grid-template-columns: 1fr; padding: 0 0 0 2rem; }
  .timeline-track::before { left: 0.35rem; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: var(--line-strong); }
  .timeline-track li::before { top: 0.3rem; left: -2rem; }
  .cta-band { grid-template-columns: 1fr; align-items: start; }
  .hud-rail { display: none; }
  .hud-label { left: 50%; transform: translateX(-50%); bottom: 12px; white-space: nowrap; }
}
@media (max-width: 768px) {
  .site-header { inset: 8px 0 auto 0; }
  .nav-shell { padding: 6px 8px 6px 16px; flex-wrap: nowrap; }
  .header-actions { width: auto; margin-left: auto; }
  .header-cta { display: none; }
  .lang-chip { padding-inline: 8px; }
  .main-nav { position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; align-items: stretch; padding: 8px; border-radius: 22px; background: #111614; box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -20px rgba(0, 0, 0, 0.8); pointer-events: auto; }
  .main-nav a { padding: 14px 16px; font-size: 1rem; min-height: 48px; }
  .nav-capsule { display: none; }
  main { padding-top: 80px; }
  .btn { min-height: 48px; }
  :is(body[data-page="home"], .panel[data-region="home"]) .hero-copy h1 { font-size: clamp(2.7rem, 13vw, 4.6rem); }
  .stat-grid { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; }
  .stat { margin-right: 0.9rem; padding-right: 0.9rem; }
  .footer-grid { grid-template-columns: 1fr; }
}


/* 15. RESOURCE CENTER: documents belong to the same universe ------- */
.breadcrumb { display: flex; gap: 0.6rem; align-items: center; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.4rem; }
.breadcrumb a { color: inherit; } .breadcrumb a:hover { color: var(--amber); }
.res-tools { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; margin-bottom: 2.4rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.res-search input { width: min(24rem, 100%); padding: 0.8rem 1rem; }
.res-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { font: inherit; font-size: 0.82rem; font-weight: 550; color: var(--text-muted); background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.5rem 1rem; min-height: 40px; cursor: pointer; transition: background var(--m-ui), color var(--m-ui), border-color var(--m-ui); }
.chip:hover { color: var(--bone); border-color: var(--bone); }
.chip.is-on { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.res-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 27rem), 1fr)); gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1.2rem, 3vw, 3rem); }
.res-card { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.6rem; align-items: start; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.res-card[hidden] { display: none; }
.doc-thumb { width: 100%; height: auto; object-fit: contain; border-radius: 2px; background: var(--ink-2); box-shadow: 0 0 0 1px var(--line), 0 30px 50px -30px rgba(0, 0, 0, 0.9); transition: transform var(--m-spatial) var(--ease-out); }
.res-card:hover .doc-thumb { transform: translateY(-4px); }
.res-card.is-featured .doc-thumb { box-shadow: 0 0 0 1px var(--amber), 0 30px 50px -30px rgba(0, 0, 0, 0.9); }
.res-body { display: grid; gap: 0.7rem; align-content: start; }
.res-body h3 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.02em; font-size: 1.25rem; }
.res-body p { color: var(--text-muted); font-size: 0.95rem; }
.res-body .res-meta { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--bone); font-variant-numeric: tabular-nums; }
.res-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.2rem; }
.btn.btn-sm { padding: 0.65rem 1rem; min-height: 44px; font-size: 0.82rem; }
.btn.btn-sm::after { display: none; }
.btn-size { margin-left: 0.7em; font-family: var(--font-mono); font-size: 0.7rem; opacity: 0.7; font-weight: 500; }
.doc-preview { width: min(100%, 26rem); height: auto; margin: 0.6rem 0 1rem; border-radius: 2px; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.res-note { margin-top: 1rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }
.res-status { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; }
.res-status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.res-status { color: var(--amber); }
.res-details summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; list-style: none; padding: 0.4rem 0; min-height: 40px; display: flex; align-items: center; gap: 0.5rem; }
.res-details summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; border: 1px solid var(--line-strong); border-radius: 2px; transition: transform var(--m-ui) var(--ease-out); }
.res-details[open] summary::before { content: "\2212"; }
.res-details dl { margin: 0.4rem 0 0.6rem; display: grid; gap: 0; border-top: 1px solid var(--line); }
.res-details dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.res-details dt { color: var(--text-muted); } .res-details dd { margin: 0; font-family: var(--font-mono); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.res-empty { color: var(--text-muted); padding: 2rem 0; }

/* footer v2 */
.footer-v2 .footer-brandcol p { color: var(--text-muted); max-width: 34ch; }
.footer-v2 .footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-top: 0.6rem; }
.footer-v2 .footer-links a { font-size: 0.85rem; color: var(--text-muted); }
@media (max-width: 480px) { .res-card { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; } }

/* 14. REDUCED MOTION: same composition, no travel ------------------- */
@media (prefers-reduced-motion: reduce) {
  .w > span, .js .reveal-on-scroll, .mask-reveal, .mask-reveal img { transition: none !important; transform: none !important; opacity: 1 !important; }
  .mask-reveal > picture, .mask-reveal > img { clip-path: none !important; transition: none !important; }
  .gl-canvas { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* legal pages: plain, readable, no effects required */
.legal-prose { max-width: 46rem; }
.legal-prose h2 { font-size: 1.25rem; letter-spacing: -0.02em; margin: 2.4rem 0 0.8rem; }
.legal-prose p, .legal-prose li { font-size: 1rem; line-height: 1.7; color: #cfd0c7; }
.legal-prose p + p, .legal-prose p + ul { margin-top: 0.9rem; }
.legal-prose a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
.legal-stand { margin-top: 3rem; font-family: var(--font-mono); font-size: 0.75rem !important; letter-spacing: 0.08em; color: var(--text-muted) !important; }

/* technical graphics: same frame as photography used to have, drawn not shot */
.page-hero-img:has(img[src$=".svg"])::after { display: none; }

.brand-mark { height: 24px; width: auto; display: block; }
.footer-brand .brand-mark { height: 28px; }

/* ================================================================
   SPATIAL SHELL: one surface, one camera (see src/spatial.js)
   ================================================================ */
html.has-shell, html.has-shell body { overflow: hidden; height: 100%; overscroll-behavior: none; }
.world { transform-origin: 0 0; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 0; will-change: transform; }
.panel { position: absolute; width: 100vw; height: 100vh; height: 100dvh; contain: layout style; }
.panel[hidden] { display: none; }
.panel-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: rgba(236, 230, 218, 0.25) transparent; -webkit-overflow-scrolling: touch; }
.panel-scroll main { padding-top: 92px; }
.panel[data-region="home"] .panel-scroll main { padding-top: 0; }
.panel .container, .panel section, .panel main { cursor: grab; }
.panel :is(p, h1, h2, h3, li, span, strong, dt, dd, label, input, textarea, select, td, th, pre, code, blockquote) { cursor: auto; }
.panel :is(a, button, summary, .btn, .chip, [role="button"]) { cursor: pointer; }
html.is-grabbing, html.is-grabbing * { cursor: grabbing !important; user-select: none !important; }
html.is-traveling .panel-scroll { pointer-events: none; }
html.is-fading .world { animation: xfade 240ms var(--ease-standard); }
@keyframes xfade { 50% { opacity: 0; } }
.panel:not(.is-active) { pointer-events: none; }

@media (prefers-reduced-motion: reduce) { html.is-fading .world { animation: none; } }

.panel:not(.is-active) .panel-scroll { scrollbar-width: none; }
@media (max-width: 768px) { .panel-scroll { scrollbar-width: none; } }

/* ---------- floating technical drawings: no frame, no box, hovering over the surface ---------- */
.page-hero-img, .hero-media { background: none; overflow: visible; border-radius: 0; box-shadow: none; }
.page-hero-img::after, .hero-media::after { display: none; }

/* ---------- header: contact is subtle until the visitor is ready ---------- */
.header-cta.btn.btn-primary { background: transparent; color: var(--bone); border-color: var(--line-strong); }
.header-cta.btn.btn-primary:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
html[data-ready] .header-cta.btn.btn-primary { background: var(--amber); border-color: var(--amber); color: var(--ink); }
html[data-region="contact"] .header-cta { opacity: 0.55; pointer-events: none; }
.nav-contact { display: none; }
@media (max-width: 768px) { .nav-contact { display: block; color: var(--amber) !important; } .header-cta { display: none; } }

/* ---------- journey block: the end of every path is contact ---------- */
.journey { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 3.5rem); }
.journey-inner { width: var(--container); margin-inline: auto; padding-top: 2rem; border-top: 1px solid var(--line); display: grid; gap: 1rem; }
.journey-kicker { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); }
.journey-next { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 4.4vw, 3.6rem); letter-spacing: -0.035em; line-height: 1.05; color: var(--bone); text-decoration: none; padding: 0.4rem 0; }
.journey-arrow { color: var(--amber); transition: transform var(--m-spatial) var(--ease-out); }
.journey-next:hover .journey-arrow, .journey-next:focus-visible .journey-arrow { transform: translateX(10px); }
.journey-side { font-size: 0.92rem; color: var(--text-muted); }
.journey-side a, .journey-alt a { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--amber); }
.journey[data-state="ready"] .journey-title { font-size: clamp(1.8rem, 4.4vw, 3.6rem); max-width: 18ch; }
.journey-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 0.4rem; }
.journey-alt { font-size: 0.9rem; color: var(--text-muted); }

.card.hero-media, figure.hero-media { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none; padding: 0; }
.card.hero-media::before { display: none; }

/* seamless surface: depth parallax + soft fade toward the edges of a region (no hard slide boundary) */
.panel-scroll > main, .panel-scroll > .journey, .panel-scroll > footer { transform: translate3d(0, 0, 0); }

/* ---------- arrange: freedom inside guard rails ---------- */
[data-mv] { transition: translate 620ms var(--ease-spring), border-color var(--m-ui) var(--ease-standard), transform var(--m-spatial) var(--ease-out), opacity var(--m-content) var(--ease-out); }
[data-mv].is-moving { transition: none; cursor: grabbing; z-index: 6; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.85); }
.card[data-mv] { cursor: grab; }
html.is-arranging, html.is-arranging * { cursor: grabbing !important; user-select: none !important; }
.reset-layout { margin-left: 1.2rem; background: none; border: 0; padding: 0; font: inherit; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; transition: color var(--m-ui), text-decoration-color var(--m-ui); }
.reset-layout:hover, .reset-layout:focus-visible { color: var(--amber); text-decoration-color: currentColor; }
@media (prefers-reduced-motion: reduce) { [data-mv] { transition: none; } }

/* ---------- curated surface ---------- */
.ctx-doc { margin-top: 1.4rem; }
.ctx-doc a { display: inline-flex; align-items: baseline; gap: 0.9rem; color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 0.35rem; transition: border-color var(--m-ui), color var(--m-ui); }
.ctx-doc a:hover, .ctx-doc a:focus-visible { border-color: var(--amber); color: #fff; }
.ctx-type { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--amber); white-space: nowrap; }
.ctx-title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.depth { width: 100%; }
.depth > summary { width: var(--container); margin-inline: auto; list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: 1.4rem 0; border-top: 1px solid var(--line); min-height: 56px; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; transition: color var(--m-ui); }
.depth > summary::-webkit-details-marker { display: none; }
.depth > summary:hover, .depth[open] > summary { color: var(--bone); }
.depth-mark { position: relative; width: 1.1rem; height: 1.1rem; }
.depth-mark::before, .depth-mark::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transition: transform var(--m-ui) var(--ease-out); }
.depth-mark::after { transform: rotate(90deg); }
.depth[open] .depth-mark::after { transform: rotate(0); }
.res-showall { display: block; margin: 2rem 0 0; background: none; border: 0; border-bottom: 1px solid var(--line-strong); padding: 0.6rem 0; color: var(--bone); font: inherit; font-family: var(--font-display); font-weight: 600; cursor: pointer; }
.res-showall:hover { border-color: var(--amber); }
.res-showall[hidden] { display: none; }
.dl-next { display: inline-block; margin-top: 0.6rem; color: var(--amber); font-size: 0.88rem; text-decoration: none; border-bottom: 1px solid transparent; }
.dl-next:hover { border-color: currentColor; }
.res-desc { color: var(--text-muted); font-size: 0.92rem; margin: 0.4rem 0 0.8rem; }
.res-body .res-meta { margin-top: -0.2rem; }

/* ---------- plastic tiles ---------- */
[data-tile] { perspective: 1600px; perspective-origin: 50% 45%; padding: 1.2rem; }
.tile3d { --ax: 0deg; --ay: 0deg; --sheen: 0%; --depth: 1; --face: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.025) 42%, rgba(255, 255, 255, 0.06)); --edge-a: #2a332f; --edge-b: #0d1210; --rim: rgba(255, 255, 255, 0.3); position: relative; transform-style: preserve-3d; transform: rotateX(var(--ax)) rotateY(var(--ay)); will-change: transform; }
.tile-face { position: relative; border-radius: 18px; background: var(--face), rgba(14, 19, 17, 0.42); box-shadow: inset 0 1px 0 var(--rim), inset 1px 0 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.35); padding: clamp(0.8rem, 2.4vw, 1.6rem); transform: translateZ(0); }
.tile-face img { display: block; width: 100%; height: auto; }
.tile-edge { position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(135deg, var(--edge-a), var(--edge-b)); }
.tile-edge:nth-child(2) { transform: translateZ(-3px); } .tile-edge:nth-child(3) { transform: translateZ(-6px); } .tile-edge:nth-child(4) { transform: translateZ(-9px); } .tile-edge:nth-child(5) { transform: translateZ(-12px); }
.tile-sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent calc(30% + var(--sheen)), rgba(255, 255, 255, 0.16) calc(44% + var(--sheen)), transparent calc(58% + var(--sheen))); mix-blend-mode: screen; }
.tile-shadow { position: absolute; left: 6%; right: 6%; bottom: -2%; height: 30%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent); filter: blur(16px); transform: translateZ(-60px) translateY(calc(18px + 26px * var(--depth))) scaleX(calc(0.7 + 0.3 * var(--depth))); opacity: calc(0.45 + 0.4 * var(--depth)); }
.tile3d.tile-light { --face: linear-gradient(145deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0.55)); --edge-a: #d9d3c3; --edge-b: #a39d8b; --rim: rgba(255, 255, 255, 0.95); }
.tile3d.tile-light .tile-face { background: var(--face), rgba(244, 240, 230, 0.6); box-shadow: inset 0 1px 0 var(--rim), 0 1px 0 rgba(20, 26, 23, 0.06); }
.tile3d.tile-light .tile-shadow { background: radial-gradient(closest-side, rgba(20, 26, 23, 0.35), transparent); }
[data-tile].card, figure.card.hero-media[data-tile] { overflow: visible; }
@media (prefers-reduced-motion: reduce) { .tile3d { transform: none; } }
.tile-face img, .tile-face .card-img { position: static !important; inset: auto !important; width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain; }
.hero-media .tile3d, .page-hero-img .tile3d { width: 100%; }

/* ---------- hotspots + inspector (glossary with exploded view) ---------- */
html.is-hotspot, html.is-hotspot .panel, html.is-hotspot .panel * { cursor: pointer !important; }
.hot-tip { position: fixed; z-index: 60; pointer-events: none; padding: 0.35rem 0.7rem; border-radius: 999px; background: rgba(11, 14, 13, 0.82); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone); white-space: nowrap; }
.hot-tip[hidden] { display: none; }
.inspector { position: fixed; z-index: 45; right: clamp(0.8rem, 2vw, 1.6rem); top: 84px; bottom: clamp(0.8rem, 2vw, 1.6rem); width: min(26rem, calc(100vw - 1.6rem)); display: flex; flex-direction: column; border-radius: 20px; background: linear-gradient(180deg, rgba(20, 26, 23, 0.86), rgba(11, 14, 13, 0.9)); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); box-shadow: inset 0 0 0 1px var(--line-strong), 0 40px 90px -30px rgba(0, 0, 0, 0.9); transform: translateX(24px) scale(0.98); opacity: 0; transition: transform var(--m-spatial) var(--ease-out), opacity var(--m-content) var(--ease-out); overflow: hidden; }
.inspector[hidden] { display: none; }
.inspector.is-open { transform: none; opacity: 1; }
.insp-close { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(11, 14, 13, 0.6); cursor: pointer; }
.insp-close span, .insp-close span::before { position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: var(--bone); content: ""; }
.insp-close span { transform: translate(-50%, -50%) rotate(45deg); } .insp-close span::before { left: 0; top: 0; transform: rotate(90deg); }
.insp-view { position: relative; flex: 0 0 min(46%, 300px); cursor: grab; touch-action: none; background: radial-gradient(ellipse at 50% 85%, rgba(132, 204, 22, 0.16), transparent 60%); }
.insp-view.is-drag { cursor: grabbing; }
.insp-view canvas { display: block; }
.insp-body { flex: 1; overflow-y: auto; padding: 0.4rem 1.4rem 1.4rem; display: grid; gap: 0.7rem; align-content: start; }
.insp-kicker, .insp-scope-h, .insp-live-h { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); }
.insp-term { font-size: 1.55rem; line-height: 1.1; letter-spacing: -0.03em; }
.insp-def { color: #cfd0c7; font-size: 0.95rem; line-height: 1.55; }
.insp-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.85rem; color: var(--text-muted); }
.insp-facts li::before { content: ""; display: inline-block; width: 0.7rem; height: 1px; background: var(--amber); margin-right: 0.6rem; vertical-align: middle; }
.insp-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; }
.insp-links a { color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--amber); padding-bottom: 2px; font-weight: 600; font-size: 0.92rem; }
.insp-links a:hover { color: var(--amber); }
.insp-hint { font-size: 0.72rem; color: var(--text-muted); font-family: var(--font-mono); letter-spacing: 0.04em; }
.insp-stats { list-style: none; margin: 0.3rem 0 0; padding: 0; display: flex; gap: 1.4rem; }
.insp-stats li { display: grid; } .insp-stats b { font-family: var(--font-slab); font-weight: 500; font-size: 1.6rem; line-height: 1; } .insp-stats span { font-size: 0.7rem; color: var(--text-muted); max-width: 8ch; }
.insp-news ul { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.4rem; font-size: 0.85rem; } .insp-news a { color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
@media (max-width: 900px) { .inspector { top: auto; left: 0.6rem; right: 0.6rem; bottom: 0.6rem; width: auto; max-height: 82dvh; } .insp-view { flex-basis: 250px; } }
@media (prefers-reduced-motion: reduce) { .inspector { transition: none; } }

/* ---------- connected diagram nodes ---------- */
.tile-art { position: relative; display: block; }
.hs-layer { position: absolute; inset: 0; }
.hs { position: absolute; display: block; border-radius: 10px; outline: 1px solid transparent; transition: outline-color var(--m-ui), background var(--m-ui), box-shadow var(--m-ui); }
.hs::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 6px); padding: 0.4rem 0.75rem; border-radius: 999px; white-space: nowrap; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--bone); background: rgba(11, 14, 13, 0.9); box-shadow: inset 0 0 0 1px var(--line-strong); opacity: 0; pointer-events: none; transition: opacity var(--m-ui), transform var(--m-ui) var(--ease-out); z-index: 3; }
.hs:hover, .hs:focus-visible { outline-color: var(--amber); background: rgba(132, 204, 22, 0.1); box-shadow: 0 0 40px -6px rgba(132, 204, 22, 0.55); }
.hs:hover::after, .hs:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .hs::after { display: none; } }

/* ---------- navbar: ring while moving, full on pause / hover / focus ---------- */
.brand { display: block; overflow: hidden; width: 138px; transition: width 620ms var(--ease-out), background var(--m-ui), padding var(--m-ui), box-shadow var(--m-ui); }
.site-header .brand-mark { transition: transform 620ms var(--ease-out); }
.nav-shell, .main-nav, .header-actions { transition: opacity var(--m-content) var(--ease-out), max-width 620ms var(--ease-out), background var(--m-content), box-shadow var(--m-content), padding 620ms var(--ease-out); }
html.nav-compact .site-header .nav-shell { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
html.nav-compact .site-header .nav-shell::before { opacity: 0; }
html.nav-compact .site-header .main-nav, html.nav-compact .site-header .header-actions, html.nav-compact .site-header .nav-toggle { opacity: 0; pointer-events: none; }
html.nav-compact .site-header .brand { pointer-events: auto; width: 46px; height: 40px; margin-left: -8px; border-radius: 999px; background: rgba(11, 14, 13, 0.72); box-shadow: inset 0 0 0 1px var(--line); }
html.nav-compact .site-header .brand-mark { opacity: 0; transform: scale(0.8); }
html.nav-compact .site-header .brand-icon { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (prefers-reduced-motion: reduce) { .brand, .site-header .brand-mark, .nav-shell, .main-nav, .header-actions { transition: none; } }

.site-header .brand { position: relative; height: 24px; }
.site-header .brand-icon { position: absolute; left: 50%; top: 50%; height: 20px; width: auto; opacity: 0; transform: translate(-50%, -50%) scale(0.6); transition: opacity 500ms var(--ease-out), transform 620ms var(--ease-spring); pointer-events: none; }
.site-header .brand-mark { transition: transform 620ms var(--ease-out), opacity 420ms var(--ease-out); }

/* ---------- v3: material realism for the slabs + clearly interactive nodes ---------- */
.tile3d { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .06' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.tile-face { transform-style: preserve-3d;
  background:
    radial-gradient(120% 70% at calc(30% + var(--sheen) * 0.6) -10%, rgba(255, 255, 255, 0.16), transparent 60%),
    var(--grain),
    linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) 38%, rgba(0, 0, 0, 0.18) 100%),
    rgba(16, 22, 19, 0.58);
  background-blend-mode: normal, soft-light, normal, normal;
  box-shadow: inset 0 1px 0 var(--rim), inset 1px 0 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 -40px 60px -40px rgba(0, 0, 0, 0.45); }
.tile-face::before, .tile-face::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; top: 9px; background: radial-gradient(circle at 35% 30%, #d7ddd9, #5a635f 60%, #1b211e); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); transform: translateZ(1px); pointer-events: none; }
.tile-face::before { left: 9px; } .tile-face::after { right: 9px; }
.tile-edge { background: linear-gradient(180deg, #4a5651 0%, var(--edge-a) 22%, var(--edge-b) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.tile3d.tile-light .tile-edge { background: linear-gradient(180deg, #f0ebdd, var(--edge-a) 30%, var(--edge-b)); }
.tile3d.tile-light .tile-face { background: radial-gradient(120% 70% at calc(30% + var(--sheen) * 0.6) -10%, rgba(255, 255, 255, 0.9), transparent 60%), var(--grain), linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(236, 231, 217, 0.5) 60%, rgba(196, 189, 170, 0.5)), rgba(244, 240, 230, 0.7); background-blend-mode: normal, multiply, normal, normal; }
.tile-art, .hs-layer { transform-style: preserve-3d; }
.tile-sheen { background: linear-gradient(115deg, transparent calc(24% + var(--sheen)), rgba(255, 255, 255, 0.22) calc(40% + var(--sheen)), rgba(255, 255, 255, 0.05) calc(48% + var(--sheen)), transparent calc(62% + var(--sheen))); }

/* nodes: a marker floats above the slab; bracket corners show the touch area; label on hover / focus */
.hs { transform: translateZ(16px); outline: 0; background: rgba(132, 204, 22, 0.035); }
.hs::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background:
    linear-gradient(var(--lime, #a3e635), var(--lime, #a3e635)) top left / 12px 1.5px no-repeat, linear-gradient(var(--lime, #a3e635), var(--lime, #a3e635)) top left / 1.5px 12px no-repeat,
    linear-gradient(var(--lime, #a3e635), var(--lime, #a3e635)) bottom right / 12px 1.5px no-repeat, linear-gradient(var(--lime, #a3e635), var(--lime, #a3e635)) bottom right / 1.5px 12px no-repeat;
  opacity: 0.55; transition: opacity var(--m-ui), transform var(--m-ui) var(--ease-out); }
.hs .hs-dot, .hs-layer .hs { --pin: 1; }
.hs::after { z-index: 4; }
.hs:hover::before, .hs:focus-visible::before { opacity: 1; transform: scale(1.04); }
.hs:hover { background: rgba(132, 204, 22, 0.12); box-shadow: 0 0 46px -8px rgba(132, 204, 22, 0.6), inset 0 0 0 1px rgba(163, 230, 53, 0.7); }
.hs:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.hs-layer .hs:nth-child(n) { animation: hsPing 5.5s ease-in-out infinite; }
.hs-layer .hs:nth-child(2n) { animation-delay: -1.8s; } .hs-layer .hs:nth-child(3n) { animation-delay: -3.4s; }
@keyframes hsPing { 0%, 82%, 100% { box-shadow: 0 0 0 0 rgba(163, 230, 53, 0); } 90% { box-shadow: 0 0 0 10px rgba(163, 230, 53, 0.14); } }
@media (prefers-reduced-motion: reduce) { .hs-layer .hs { animation: none; } }
@media (hover: none) { .hs::before { opacity: 0.9; } }

/* ---------- v3: logo never clipped; wordmark folds into the symbol (the final "o" becomes the icon) ---------- */
.site-header .brand { --bw: 138.3px; --bh: 24px; flex: none; width: var(--bw); height: var(--bh); overflow: hidden; position: relative; display: block; }
.site-header .brand-mark { position: absolute; right: 0; top: 0; height: var(--bh); width: var(--bw); max-width: none; opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 100%); mask-image: linear-gradient(90deg, #000 0, #000 100%);
  transition: opacity 320ms var(--ease-out) 260ms, transform 620ms var(--ease-out), -webkit-mask-position 620ms var(--ease-out), mask-position 620ms var(--ease-out); transform-origin: 100% 50%; }
@media (max-width: 1100px) { .site-header .brand { --bw: 112px; --bh: 19.4px; } .site-header .brand-mark { width: var(--bw); height: var(--bh); } }
html.nav-compact .site-header .brand { width: 46px; height: 40px; margin-left: -8px; transition: width 620ms var(--ease-out), height 620ms var(--ease-out), margin 620ms var(--ease-out), background var(--m-ui), box-shadow var(--m-ui); }
html.nav-compact .site-header .brand-mark { opacity: 0; transform: translateY(8px) scale(0.72); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60%); mask-image: linear-gradient(90deg, transparent 0, #000 60%); }
html.nav-compact .site-header .brand-icon { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: opacity 360ms var(--ease-out) 300ms, transform 620ms var(--ease-spring) 240ms; }
html:not(.nav-compact) .site-header .brand-mark { transition: opacity 300ms var(--ease-out), transform 620ms var(--ease-out) 60ms; }
html:not(.nav-compact) .site-header .brand-icon { transition: opacity 200ms var(--ease-out), transform 420ms var(--ease-out); }
.site-header .brand { transition: width 620ms var(--ease-out), height 620ms var(--ease-out), margin 620ms var(--ease-out), background var(--m-ui), box-shadow var(--m-ui); }
@media (prefers-reduced-motion: reduce) { .site-header .brand, .site-header .brand-mark, .site-header .brand-icon { transition: none; } }

/* ---------- v3: art direction layer: the 3D world reads as a stylised technical illustration (grain, tonal grade, vignette), never as failed photorealism ---------- */
.gl-canvas { filter: saturate(0.84) contrast(1.06) brightness(0.98); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 55%, rgba(6, 8, 7, 0.55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: auto, 180px 180px; mix-blend-mode: overlay; opacity: 0.55; }
.no-webgl body::after { display: none; }

/* ---------- overview: regions become movable tiles (personal dashboard) ---------- */
html.is-overview { touch-action: none; }
.panel-grip { display: none; position: absolute; z-index: 5; box-sizing: border-box; border-radius: 22px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(11, 14, 13, 0.18)); box-shadow: inset 0 0 0 2px rgba(132, 204, 22, 0.55), 0 30px 80px -30px rgba(0, 0, 0, 0.8);
  transition: box-shadow var(--m-ui), background var(--m-ui); }
html.is-overview .panel-grip { display: block; }
.panel-grip:hover { background: linear-gradient(160deg, rgba(132, 204, 22, 0.14), rgba(11, 14, 13, 0.1)); box-shadow: inset 0 0 0 2px var(--amber), 0 30px 80px -24px rgba(132, 204, 22, 0.35); }
.panel-grip.is-lifting { cursor: grabbing; z-index: 8; box-shadow: inset 0 0 0 3px var(--amber), 0 60px 120px -20px rgba(0, 0, 0, 0.95); }
.grip-label { position: absolute; left: 3%; top: 3%; padding: 0.5rem 1.1rem; border-radius: 999px; font-family: var(--font-mono); font-size: 1.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone); background: rgba(11, 14, 13, 0.82); box-shadow: inset 0 0 0 1px var(--line-strong); }
html.is-overview .panel-scroll { pointer-events: none !important; }
.zoombar { position: fixed; z-index: 40; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(11, 14, 13, 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--line); }
.zoombar button { min-width: 44px; min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--bone); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; padding: 0 0.9rem; transition: background var(--m-ui); }
.zoombar button:hover, .zoombar button:focus-visible { background: rgba(132, 204, 22, 0.16); }
.zoombar .zb-ctrls { display: none; align-items: center; gap: 2px; }
.zoombar.is-open .zb-ctrls { display: inline-flex; }
.zoombar.is-open .zb-toggle { background: rgba(132, 204, 22, 0.18); }
.zb-b { font-size: 1rem !important; padding: 0 0.6rem !important; }
.zb-100 { font-size: 0.72rem !important; }
@media (max-width: 700px) { .grip-label { font-size: 1.2rem; } }

/* ---------- v4: graphics are objects in space, not plates ---------- */
html.has-shell figure[data-tile] .tile-face { background: none !important; box-shadow: none !important; padding: 0; border-radius: 0; }
html.has-shell figure[data-tile] .tile-face::before, html.has-shell figure[data-tile] .tile-face::after, html.has-shell figure[data-tile] .tile-edge, html.has-shell figure[data-tile] .tile-shadow, html.has-shell figure[data-tile] .tile-sheen { display: none; }
html.has-shell figure[data-tile] .tile3d { transform: none !important; }
html.has-shell figure[data-tile] .tile-art img { filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45)); }
figure.has-obj { position: relative; }
figure.has-obj .tile3d { transition: opacity 650ms var(--ease-out), transform 900ms var(--ease-fold, ease); transform-origin: 50% 70%; }
figure.has-obj.obj-on .tile3d { opacity: 0; }
html.has-shell figure.has-obj.obj-on .tile3d { transform: perspective(900px) rotateX(58deg) scale(0.92) !important; } /* the plan tilts away while the object rises */
.obj-slot { visibility: hidden; pointer-events: none; transition: visibility 0s linear 560ms; }
.obj-slot.is-on { visibility: visible; pointer-events: auto; transition: none; }
.obj-slot { position: absolute; inset: -16% -2% -12%; z-index: 3; touch-action: pan-y; cursor: grab; -webkit-tap-highlight-color: transparent; }
.obj-slot canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 520ms var(--ease-out); outline: none; }
.obj-slot.is-on canvas { opacity: 1; }
.obj-slot.is-hover { cursor: pointer; }
.obj-slot.is-drag { cursor: grabbing; }
.obj-tip { position: absolute; z-index: 4; transform: translate(-50%, calc(-100% - 18px)); padding: 0.4rem 0.8rem; border-radius: 999px; white-space: nowrap; pointer-events: none; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--bone); background: rgba(11, 14, 13, 0.9); box-shadow: inset 0 0 0 1px var(--line-strong); }
.obj-tip[hidden] { display: none; }
.obj-links { position: absolute; left: 0; top: 0; margin: 0; padding: 0; list-style: none; width: 1px; height: 1px; overflow: hidden; }
.obj-links:focus-within { width: auto; height: auto; overflow: visible; z-index: 5; padding: 0.5rem; background: rgba(11, 14, 13, 0.9); border-radius: 12px; }
.obj-links a { color: var(--bone); font-size: 0.85rem; }
html.is-overview .panel[data-region="impressum"], html.is-overview .panel[data-region="datenschutz"], html.is-overview .panel[data-region="terms"] { visibility: hidden; }
@media (max-width: 760px) { .obj-slot { inset: -10% -6% -8%; } }

/* explained abbreviations (first use per page) */
abbr[title] { text-decoration: underline dotted rgba(236, 230, 218, 0.4); text-underline-offset: 3px; cursor: help; }

/* ---------- info layer: the footer exists once, at the end of the space ---------- */
.panel-scroll > main { padding-bottom: clamp(4rem, 9vh, 7rem); }
.info-scrim { position: fixed; inset: 0; z-index: 43; background: rgba(4, 6, 5, 0.5); opacity: 0; transition: opacity var(--m-content) var(--ease-out); }
.info-scrim.is-open { opacity: 1; }
.info-scrim[hidden], .info-layer[hidden] { display: none; }
.info-layer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, rgba(14, 19, 17, 0.94), rgba(8, 10, 9, 0.98)); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: inset 0 1px 0 var(--line-strong), 0 -40px 90px -30px rgba(0, 0, 0, 0.85);
  transform: translateY(104%); transition: transform var(--m-spatial) var(--ease-out); }
.info-layer.is-open { transform: none; }
.info-layer .site-footer { margin-top: 0; background: none; border-top: 0; padding-top: clamp(2.5rem, 6vh, 4rem); }
.info-close { position: sticky; top: 0.7rem; float: right; margin: 0.7rem 0.9rem 0 0; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(11, 14, 13, 0.7); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.info-close span, .info-close span::before { position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: var(--bone); content: ""; }
.info-close span { transform: translate(-50%, -50%) rotate(45deg); } .info-close span::before { left: 0; top: 0; transform: rotate(90deg); }
.zb-info { border-right: 1px solid var(--line) !important; border-radius: 999px 0 0 999px !important; }
html.has-info-layer .zoombar { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .info-layer, .info-scrim { transition: none; } }

/* ---------- v4: slower, softer collapse of the navigation (fold takes ~1.3 s, unfold ~0.9 s) ---------- */
:root { --ease-fold: cubic-bezier(0.65, 0, 0.25, 1); }
html .nav-shell, html .main-nav, html .header-actions { transition: opacity 800ms var(--ease-fold), max-width 900ms var(--ease-fold), background 800ms var(--ease-fold), box-shadow 800ms var(--ease-fold), padding 900ms var(--ease-fold); }
html.nav-compact .site-header .nav-shell, html.nav-compact .site-header .main-nav, html.nav-compact .site-header .header-actions { transition: opacity 900ms var(--ease-fold), max-width 1300ms var(--ease-fold), background 1100ms var(--ease-fold), box-shadow 1100ms var(--ease-fold), padding 1300ms var(--ease-fold); }
html.nav-compact .site-header .brand { transition: width 1300ms var(--ease-fold), height 1100ms var(--ease-fold), margin 1300ms var(--ease-fold), background 1100ms var(--ease-fold) 200ms, box-shadow 1100ms var(--ease-fold) 200ms; }
html.nav-compact .site-header .brand-mark { transition: opacity 800ms var(--ease-fold) 350ms, transform 1300ms var(--ease-fold), -webkit-mask-image 1000ms, mask-image 1000ms; }
html.nav-compact .site-header .brand-icon { transition: opacity 800ms var(--ease-fold) 650ms, transform 1300ms var(--ease-spring) 500ms; }
html:not(.nav-compact) .site-header .brand { transition: width 900ms var(--ease-fold), height 800ms var(--ease-fold), margin 900ms var(--ease-fold), background 700ms var(--ease-fold), box-shadow 700ms var(--ease-fold); }
html:not(.nav-compact) .site-header .brand-mark { transition: opacity 700ms var(--ease-fold) 250ms, transform 900ms var(--ease-fold) 150ms; }
html:not(.nav-compact) .site-header .brand-icon { transition: opacity 400ms var(--ease-fold), transform 700ms var(--ease-fold); }
@media (prefers-reduced-motion: reduce) { html .nav-shell, html .main-nav, html .header-actions, html .site-header .brand, html .site-header .brand-mark, html .site-header .brand-icon { transition: none !important; } }

/* footer wordmark is never clipped */
.brand.footer-brand { width: auto; height: auto; overflow: visible; display: inline-block; }
.footer-brand .brand-mark { height: 28px; width: auto; max-width: none; position: static; }
.footer-brand .brand-icon { display: none; }

/* ---------- v5: explanation card, tools object, soft panel edges, navbar proximity ---------- */
.obj-card { position: absolute; z-index: 6; width: min(19rem, calc(100% - 1rem)); transform: translate(-50%, 14px); padding: 1rem 1.1rem 1.05rem; border-radius: 16px; display: grid; gap: 0.5rem; text-align: left; cursor: default;
  background: linear-gradient(180deg, rgba(20, 26, 23, 0.94), rgba(11, 14, 13, 0.96)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--line-strong), 0 30px 70px -24px rgba(0, 0, 0, 0.9); animation: cardIn 380ms var(--ease-out) both; }
.obj-card[hidden] { display: none; }
.obj-card h3 { margin: 0; font-size: 1.05rem; letter-spacing: -0.02em; line-height: 1.2; }
.obj-card p { margin: 0; color: #cfd0c7; font-size: 0.88rem; line-height: 1.5; }
.obj-go { justify-self: start; margin-top: 0.2rem; color: var(--bone); font-weight: 600; font-size: 0.88rem; text-decoration: none; border-bottom: 1px solid var(--amber); padding-bottom: 2px; }
.obj-go:hover, .obj-go:focus-visible { color: var(--amber); }
@keyframes cardIn { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 14px); } }
@media (prefers-reduced-motion: reduce) { .obj-card { animation: none; } }
.tools-summary.has-obj-parent { overflow: visible; }
.tools-summary-visual.has-obj { position: relative; min-height: 27rem; overflow: visible; border: 0; background: none; padding: 0; }
.tools-summary-visual.has-obj::before { display: none; }
.tools-summary-visual.has-obj .obj-slot { inset: -8% -22% -12% -16%; }
.tools-summary-visual.obj-on .summary-flow-line { display: none; }
.tools-summary-visual.has-obj > :not(.obj-slot):not(.obj-links):not(.obj-mode) { transition: opacity 600ms var(--ease-out), transform 900ms var(--ease-fold, ease); transform-origin: 50% 80%; }
.tools-summary-visual.obj-on > :not(.obj-slot):not(.obj-links):not(.obj-mode) { opacity: 0; pointer-events: none; transform: perspective(900px) rotateX(55deg) scale(0.94); }

/* panels never end in a hard cut while the surface moves: their edges dissolve */
html.is-panning .panel-scroll, html.is-traveling .panel-scroll, html.is-overview .panel-scroll, html.is-gliding .panel-scroll, html.is-zoomed .panel-scroll, html.is-adrift .panel-scroll {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%), linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%), linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); mask-composite: intersect; }

/* navbar: fades with the pointer's distance instead of switching; the ring symbol stays noticeable */
:root { --nav-prox: 1; }
html:not(.nav-compact) .site-header .main-nav, html:not(.nav-compact) .site-header .header-actions { opacity: calc(0.45 + 0.55 * var(--nav-prox)); }
html.nav-compact .site-header .brand { width: 58px; height: 50px; margin-left: -10px; box-shadow: inset 0 0 0 1px rgba(132, 204, 22, 0.35), 0 0 32px -8px rgba(132, 204, 22, 0.45); }
html.nav-compact .site-header .brand-icon { height: 28px; }

/* the logo is a free-standing graphic: no box behind it at any moment; only the round seal disc fades in behind the symbol */
html .site-header .brand { background: none !important; box-shadow: none !important; overflow: visible; border-radius: 0; }
.site-header .brand::before { content: ""; position: absolute; right: 4px; top: 50%; width: 50px; height: 50px; margin-top: -25px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 40%, rgba(24, 32, 28, 0.86), rgba(11, 14, 13, 0.8)); box-shadow: inset 0 0 0 1px rgba(132, 204, 22, 0.35), 0 0 32px -8px rgba(132, 204, 22, 0.45);
  opacity: 0; transform: scale(0.35); transition: opacity 500ms var(--ease-fold), transform 700ms var(--ease-fold); }
html.nav-compact .site-header .brand::before { opacity: 1; transform: none; transition: opacity 700ms var(--ease-fold) 750ms, transform 1000ms var(--ease-spring) 650ms; }
.brand-morph { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .site-header .brand::before { transition: none !important; } }

/* ---------- logo morph: the name winds up into its final ring, the ring closes into the seal symbol ---------- */
.brand.is-morph .brand-mark, .brand.is-morph .brand-icon { display: none; }
.brand-morph { position: absolute; right: 0; top: 50%; width: var(--bw, 138px); height: var(--bh, 24px); transform: translateY(-50%); overflow: visible; display: block; pointer-events: none; }
.bm-l { transform-box: fill-box; transform-origin: 100% 50%; opacity: 1;
  transition: transform 900ms var(--ease-fold) calc(var(--i) * 70ms + 300ms), opacity 450ms var(--ease-fold) calc(var(--i) * 70ms + 300ms); }
html.nav-compact .bm-l { transform: translateX(var(--dx)) scale(0.12, 0.5); opacity: 0;
  transition: transform 1000ms var(--ease-fold) calc(var(--i) * 80ms), opacity 420ms var(--ease-fold) calc(var(--i) * 80ms + 520ms); }
.bm-em { transform-box: fill-box; transform-origin: 50% 50%; opacity: 1; transition: transform 700ms var(--ease-fold) 100ms, opacity 400ms var(--ease-fold) 100ms; }
html.nav-compact .bm-em { transform: translateX(var(--mx, -60px)) scale(1.8); opacity: 0; transition: transform 1200ms var(--ease-fold) 250ms, opacity 500ms var(--ease-fold) 1000ms; }
.bm-mk { opacity: 0; transform: translate(var(--mc, 440px), -38px) scale(calc(var(--ms, 0.27) * 0.7)) translate(-300px, -270px); transition: opacity 300ms var(--ease-fold), transform 500ms var(--ease-fold); }
html.nav-compact .bm-mk { opacity: 1; transform: translate(var(--mc, 440px), -38px) scale(var(--ms, 0.27)) translate(-300px, -270px); transition: opacity 600ms var(--ease-fold) 900ms, transform 900ms var(--ease-spring) 900ms; }
.bm-seal { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: translateX(calc(var(--mc, 440px) - 440px)); }
html.nav-compact .bm-seal { animation: bmSeal 1400ms var(--ease-fold) 1150ms both; }
@keyframes bmSeal { from { opacity: 0.75; transform: translateX(calc(var(--mc, 440px) - 440px)) scale(0.55); } to { opacity: 0; transform: translateX(calc(var(--mc, 440px) - 440px)) scale(1.7); } }
@media (prefers-reduced-motion: reduce) { .bm-l, .bm-em, .bm-mk { transition: none !important; } html.nav-compact .bm-seal { animation: none; } }

/* no scrollbar strips between regions: the surface has no frames; reading progress is shown by the HUD */
.panel-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.panel-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ---------- brand sun: the folded symbol hands over to the sun rising in the world ---------- */
html.sun-mode .site-header .brand { transition: opacity 500ms var(--ease-fold); }
html.sun-mode.sun-shown.nav-compact .site-header .brand { opacity: 0; transition: opacity 700ms var(--ease-fold) 1100ms; }
html.sun-mode.nav-compact .site-header .brand:focus-visible { opacity: 1; }
html.is-sun-hot, html.is-sun-hot .panel, html.is-sun-hot .panel-scroll { cursor: pointer; }

/* 2D drawing first; the drawing itself is the control: it lifts and glows a little under the pointer, a click turns it into the object */
.has-obj:not(.obj-on) .tile-art, .tools-summary-visual.has-obj:not(.obj-on) { cursor: pointer; }
.has-obj:not(.obj-on) .tile-art img { transition: transform 500ms var(--ease-out), filter 500ms var(--ease-out); }
@media (hover: hover) { .has-obj:not(.obj-on):hover .tile-art img { transform: translateY(-4px); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 22px rgba(132, 204, 22, 0.22)); } }
.tools-summary-visual.has-obj:not(.obj-on) > .summary-visual-card { transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
@media (hover: hover) { .tools-summary-visual.has-obj:not(.obj-on):hover > .summary-visual-card { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(132, 204, 22, 0.35); } }

/* ---------- navbar v5: fewer items, more presence; language as one compact menu ---------- */
@media (min-width: 1101px) {
  .site-header .brand { --bw: 166px; --bh: 29px; }
  .main-nav a { font-size: 0.98rem; padding: 10px 18px; }
  .header-cta { padding: 0.7rem 1.25rem; font-size: 0.92rem; }
}
.lang-switch.is-menu { position: relative; display: inline-flex; }
.lang-current { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0 0.85rem; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(236, 230, 218, 0.08); color: var(--bone); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; transition: background var(--m-ui); }
.lang-current:hover, .lang-current:focus-visible, .lang-switch.open .lang-current { background: rgba(236, 230, 218, 0.16); }
.lang-caret { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--m-ui) var(--ease-out); }
.lang-switch.open .lang-caret { transform: translateY(1px) rotate(225deg); }
.lang-menu { position: absolute; top: calc(100% + 8px); right: 0; display: grid; gap: 2px; padding: 6px; min-width: 76px; border-radius: 16px;
  background: rgba(11, 14, 13, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--line-strong), 0 20px 40px -18px rgba(0, 0, 0, 0.8);
  animation: langIn 220ms var(--ease-out) both; pointer-events: auto; }
.lang-menu[hidden] { display: none; }
.lang-menu .lang-chip { display: block; text-align: center; padding: 9px 12px; font-family: var(--font-mono); }
.lang-menu .lang-chip:hover, .lang-menu .lang-chip:focus-visible { background: rgba(132, 204, 22, 0.16); color: var(--bone); }
@keyframes langIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lang-menu { animation: none; } }

/* ---------- Marktlage: signal space with progressive disclosure ---------- */
.intel-section { padding-top: 0; }
.intel-space { position: relative; }
.intel-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: clamp(0.8rem, 2vw, 1.4rem); }
.intel-links { position: absolute; inset: 0; z-index: 0; overflow: visible; pointer-events: none; }
.intel-link { fill: none; stroke: rgba(132, 204, 22, 0.35); stroke-width: 1.25; stroke-dasharray: 4 5; }
.intel-link-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: help; }
.intel-sig { position: relative; z-index: 1; display: grid; gap: 0.35rem; align-content: start; min-height: 9.5rem; padding: 1rem 1.1rem; text-align: left; cursor: pointer; border: 0; border-radius: 16px; color: var(--bone);
  background: linear-gradient(180deg, rgba(20, 26, 23, 0.86), rgba(11, 14, 13, 0.9)); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--m-ui), transform var(--m-ui) var(--ease-out); }
.intel-sig:hover, .intel-sig:focus-visible, .intel-sig.is-open { box-shadow: inset 0 0 0 1px var(--amber), 0 18px 40px -24px rgba(132, 204, 22, 0.45); transform: translateY(-2px); }
.intel-sig.is-reported { opacity: 0.82; }
.intel-kicker { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }
.intel-title { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; line-height: 1.2; letter-spacing: -0.02em; }
.intel-line { font-size: 0.86rem; color: #cfd0c7; } .intel-line b { color: var(--bone); font-variant-numeric: tabular-nums; }
.intel-foot { display: flex; justify-content: space-between; gap: 0.6rem; margin-top: auto; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--text-muted); }
.intel-hover { position: absolute; left: 1.1rem; right: 1.1rem; bottom: -0.2rem; transform: translateY(100%); padding: 0.4rem 0.7rem; border-radius: 10px; font-size: 0.76rem; color: var(--bone); background: rgba(11, 14, 13, 0.94); box-shadow: inset 0 0 0 1px var(--line-strong); opacity: 0; pointer-events: none; transition: opacity var(--m-ui); z-index: 3; }
@media (hover: hover) { .intel-sig:hover .intel-hover { opacity: 1; } }
.intel-sig:focus-visible .intel-hover { opacity: 1; }
.intel-card { position: fixed; z-index: 46; right: clamp(0.8rem, 2vw, 1.6rem); top: 92px; width: min(27rem, calc(100vw - 1.6rem)); max-height: calc(100dvh - 120px); overflow-y: auto; padding: 1.3rem 1.4rem 1.2rem; border-radius: 20px;
  background: linear-gradient(180deg, rgba(20, 26, 23, 0.95), rgba(11, 14, 13, 0.97)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px var(--line-strong), 0 40px 90px -30px rgba(0, 0, 0, 0.9); animation: intelIn 280ms var(--ease-out) both; }
.intel-card[hidden] { display: none; }
@keyframes intelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .intel-card { top: auto; bottom: 0.6rem; left: 0.6rem; right: 0.6rem; width: auto; max-height: 78dvh; } }
.intel-h { font-size: 1.35rem; line-height: 1.15; margin: 0.25rem 2.6rem 0.2rem 0; letter-spacing: -0.02em; }
.intel-close { position: absolute; top: 0.7rem; right: 0.7rem; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(236, 230, 218, 0.08); cursor: pointer; }
.intel-close span, .intel-close span::before { position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--bone); content: ""; }
.intel-close span { transform: translate(-50%, -50%) rotate(45deg); } .intel-close span::before { left: 0; top: 0; transform: rotate(90deg); }
.intel-sec { margin-top: 0.9rem; } .intel-sec h4 { margin: 0 0 0.25rem; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); font-weight: 600; }
.intel-sec p, .intel-imp li, .intel-rel li, .intel-srcs li { font-size: 0.9rem; line-height: 1.5; color: #d7d8cf; margin: 0; }
.intel-imp, .intel-rel, .intel-srcs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.intel-imp b { display: block; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone); }
.intel-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } @media (max-width: 420px) { .intel-meta { grid-template-columns: 1fr; } }
.intel-whyseeing { margin-top: 0.9rem; font-size: 0.82rem; color: var(--text-muted); } .intel-whyseeing summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; }
.intel-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }
.intel-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border: 0; border-radius: 999px; cursor: pointer; font-size: 0.86rem; font-weight: 600; text-decoration: none; color: var(--bone); background: rgba(236, 230, 218, 0.08); box-shadow: inset 0 0 0 1px var(--line-strong); }
.intel-btn.is-primary { background: var(--bone); color: var(--ink); box-shadow: none; }
.intel-btn:hover, .intel-btn:focus-visible { box-shadow: inset 0 0 0 1px var(--amber); }
.intel-term { border: 0; padding: 0 0.15em; background: none; color: var(--bone); font: inherit; text-decoration: underline dotted var(--amber); text-underline-offset: 3px; cursor: help; }
.intel-term::after { content: " ⓘ"; font-size: 0.75em; color: var(--amber); }
.intel-tip { position: fixed; z-index: 60; display: grid; gap: 0.25rem; padding: 0.7rem 0.85rem; border-radius: 12px; font-size: 0.82rem; line-height: 1.45; color: #d7d8cf; background: rgba(11, 14, 13, 0.97); box-shadow: inset 0 0 0 1px var(--line-strong), 0 20px 40px -16px rgba(0, 0, 0, 0.9); }
.intel-tip strong { color: var(--bone); }
.intel-link-btn { border: 0; padding: 0; background: none; color: var(--bone); font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px; margin-right: 0.4rem; }
.intel-srcs a { color: var(--bone); }
.intel-note { margin-top: 0.8rem; font-size: 0.88rem; color: #cfd0c7; }
.intel-demo { margin: 0 0 1rem; padding: 0.5rem 0.8rem; border-radius: 10px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #1c2521; background: #f5d76e; }
.intel-empty { max-width: 46ch; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .intel-card { animation: none; } .intel-sig { transition: none; } }
.intel-card .intel-demo { margin-right: 3rem; }
.intel-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.intel-filter { min-height: 36px; padding: 0 0.9rem; border: 0; border-radius: 999px; cursor: pointer; font-size: 0.8rem; color: #cfd0c7; background: rgba(236, 230, 218, 0.06); box-shadow: inset 0 0 0 1px var(--line); }
.intel-filter.is-on, .intel-filter:hover, .intel-filter:focus-visible { color: var(--ink); background: var(--bone); box-shadow: none; }
.intel-more { margin-top: 1.2rem; }
.intel-sig[hidden], .intel-more[hidden] { display: none; }

/* nav items stay in the bar down to small tablets; the burger is only for phones */
@media (min-width: 601px) and (max-width: 768px) {
  .site-header .nav-toggle { display: none !important; }
  .site-header .main-nav { display: flex !important; position: static; flex-direction: row; align-items: center; padding: 0; background: none; box-shadow: none; }
  .site-header .main-nav a { padding: 8px 9px; font-size: 0.82rem; min-height: 0; }
  .site-header .main-nav .nav-contact { display: none; }
}
.lang-switch.is-menu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; } /* hover bridge to the menu */

/* narrow phones: nothing may be wider than the viewport (grid children may shrink, stats share the width) */
.hero-grid > *, .split > *, .card-grid > * { min-width: 0; }
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat, .stat-grid > li { margin-right: 0.6rem; padding-right: 0.6rem; }
  .stat strong, .stat-grid li strong { font-size: clamp(1.7rem, 9vw, 2.2rem); }
  .stat span, .stat-grid li span { font-size: 0.6rem; letter-spacing: 0.08em; overflow-wrap: anywhere; }
  .eyebrow { overflow-wrap: anywhere; }
  h1, h2 { overflow-wrap: break-word; hyphens: auto; }
}
@media (max-width: 760px) { .split, .scope-split, .tool-panel-split { grid-template-columns: 1fr !important; } }
.scope-card > * { min-width: 0; max-width: 100%; }

/* ---------- site search ---------- */
.search-open { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(236, 230, 218, 0.08); color: var(--bone); transition: background var(--m-ui); }
.search-open:hover, .search-open:focus-visible { background: rgba(236, 230, 218, 0.16); }
.search-ico { position: relative; display: inline-block; width: 13px; height: 13px; border: 1.6px solid currentColor; border-radius: 50%; }
.search-ico::after { content: ""; position: absolute; width: 6px; height: 1.6px; background: currentColor; right: -5px; bottom: -3px; transform: rotate(45deg); border-radius: 1px; }
.search-dlg { position: fixed; inset: 0; z-index: 70; display: grid; justify-items: center; align-items: start; padding: clamp(4rem, 14vh, 9rem) 1rem 1rem; background: rgba(4, 6, 5, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: searchIn 200ms var(--ease-out) both; }
.search-dlg[hidden] { display: none; }
.search-box { width: min(40rem, 100%); max-height: 70dvh; display: grid; grid-template-rows: auto 1fr auto; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, rgba(20, 26, 23, 0.97), rgba(11, 14, 13, 0.98)); box-shadow: inset 0 0 0 1px var(--line-strong), 0 40px 90px -30px rgba(0, 0, 0, 0.9); }
.search-field { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0.6rem 0.6rem 1.1rem; border-bottom: 1px solid var(--line); color: var(--text-muted); }
.search-field input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: none; color: var(--bone); font: inherit; font-size: 1.05rem; outline: none; }
.search-field input::-webkit-search-cancel-button { display: none; }
.search-x { position: relative; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(236, 230, 218, 0.08); cursor: pointer; }
.search-x span, .search-x span::before { position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--bone); content: ""; }
.search-x span { transform: translate(-50%, -50%) rotate(45deg); } .search-x span::before { left: 0; top: 0; transform: rotate(90deg); }
.search-results { list-style: none; margin: 0; padding: 0.4rem; overflow-y: auto; }
.search-results:empty { display: none; }
.search-hit { display: grid; gap: 0.15rem; padding: 0.7rem 0.8rem; border-radius: 12px; color: var(--bone); text-decoration: none; }
[aria-selected="true"] > .search-hit, .search-hit:hover { background: rgba(132, 204, 22, 0.12); }
.search-kind { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
.search-kind:empty { display: none; }
.search-hit strong { font-size: 0.98rem; line-height: 1.3; }
.search-snip { font-size: 0.84rem; color: var(--text-muted); line-height: 1.4; }
.search-empty { padding: 0.9rem 0.8rem; color: var(--text-muted); font-size: 0.9rem; } .search-empty a { color: var(--bone); }
.search-hint { margin: 0; padding: 0.55rem 1.1rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; color: var(--text-muted); }
@media (hover: none) { .search-hint { display: none; } }
@keyframes searchIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .search-dlg { animation: none; } }
.zoombar button { white-space: nowrap; }

/* ---------- Mobile / touch polish (iPhone, Android, tablets) ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.site-header { padding-top: env(safe-area-inset-top); }
.info-layer, .inspector, .intel-card { padding-bottom: max(0.6rem, env(safe-area-inset-bottom)); }
.site-footer, footer { padding-bottom: env(safe-area-inset-bottom); }
img:not(.brand-mark):not(.brand-icon), video { max-width: 100%; height: auto; }
.brand-morph, .brand svg { max-width: none; }
.res-actions .btn, .ctx-doc a { touch-action: manipulation; }

/* touch devices: 16px form text prevents the iOS focus-zoom, 44px minimum tap targets */
@media (pointer: coarse), (max-width: 900px) {
  input, select, textarea { font-size: 16px !important; min-height: 44px; }
  textarea { min-height: 120px; }
  .btn, button, summary { min-height: 44px; }
  .btn-sm { padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .footer-links a, .footer-col a { display: inline-block; padding: 0.55rem 0.2rem; min-height: 44px; line-height: 1.6; }
  .ctx-doc a { min-height: 44px; align-items: center; flex-wrap: wrap; row-gap: 0.2rem; }
  .res-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .res-actions .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
}
@media (max-width: 768px) {
  .card, .form { max-width: 100%; }
  h1 { overflow-wrap: anywhere; hyphens: auto; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* tablets (portrait + landscape): keep readable line lengths, two-column grids */
@media (min-width: 769px) and (max-width: 1100px) {
  .container { padding-left: max(1.5rem, env(safe-area-inset-left)); padding-right: max(1.5rem, env(safe-area-inset-right)); }
}
/* landscape phones: do not let the header eat the screen */
@media (max-height: 480px) and (orientation: landscape) {
  .info-layer { max-height: 94dvh; }
}
@media (max-width: 768px) { .res-search, .res-search input { width: 100%; } }
.res-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 100%; } .res-tools > * { max-width: 100%; }