/* =============================================
   paradox.works — style.css
   ============================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-bg:      #e1e2e7;
  --color-bg-blue: #f0f2fe;
  --color-text:    #2F3538;
  --font-dm:       'DM Serif Display', serif;
  --font-noto:     'Noto Serif', serif;
  --font-roboto:   'Roboto', sans-serif;
}

html { /* scroll handled by fullpage.js */ }

body {
  width: 100%; height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
}
/* body overflow controlled by fullpage.js */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Splash ─────────────────────────────────── */
/* #splash is now a normal scrollable section — no fixed positioning */
/* splash.exit handled via JS opacity/z-index — no CSS class needed */

#splash-logo-wrap {
  position: relative;
  /* --logo-width is the width at which our letters stand the same height as
     paradox.works' 166px ink. "tenth man" is a longer string than "paradox",
     so it must run wider to reach the same letter size. */
  width: min(var(--logo-width, 1062px), 88vw);
  /* Must match the SVG viewBox exactly: the overlaid 'a' is positioned as a
     percentage of this box, so any aspect mismatch would letterbox it out of
     the gap in the wordmark. --logo-aspect is generated by embed_logo.py. */
  aspect-ratio: var(--logo-aspect, 683.113 / 106.784);
}
#splash-logo-text, #splash-logo-a {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
#splash-logo-a {
  transform-style: preserve-3d;
  will-change: transform;
  transform-origin: var(--logo-a-origin-x, 83.0619%) var(--logo-a-origin-y, 64.0252%);
}
/* Tenth Man lockup: wordmark with "capital partners" directly beneath.
   The wrapper only stacks; sizes and the pivot geometry are unchanged. */
#splash-lockup {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 2.2vw, 30px);
}
#splash-sub {
  font-family: var(--font-dm);
  font-size: clamp(20px, 2.6vw, 38px); line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

/* ── Site ───────────────────────────────────── */
#site { opacity: 1; }

/* ── Blob ───────────────────────────────────── */
#blob-wrap {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  /* Always behind content — no transition needed */
}

/* ── Nav ────────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; z-index: 100;
  padding: 22px 32px;
  display: flex; align-items: center;
}
#nav-logo {
  display: block; position: relative;
  /* The box must carry the viewBox ratio exactly, or the SVG letterboxes and
     the overlaid 'a' drifts out of the gap - see #splash-logo-wrap. Deriving
     the height from --logo-aspect keeps that true whatever the wordmark says. */
  width: 148px; aspect-ratio: var(--logo-aspect, 683.113 / 106.784);
  height: auto; text-decoration: none;
}
#nav-logo-text, #nav-logo-a {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
#nav-logo-a {
  transform-style: preserve-3d;
  will-change: transform;
  transform-origin: var(--logo-a-origin-x, 83.0619%) var(--logo-a-origin-y, 64.0252%);
}

/* ── Nav logo visibility — controlled via JS inline style ── */
#nav-logo { transition: opacity 400ms ease; }

#nav-logo { opacity:0; transition:opacity 400ms ease; pointer-events:none; }

/* ── Language Switch ────────────────────────── */
#lang-switch {
  position: fixed;
  top: 22px; right: 32px;
  z-index: 101;
  width: 32px; height: 32px;
  background: #2F3538;
  color: #fff;
  border: none; border-radius: 16px;
  font-family: 'Roboto', sans-serif;
  font-weight: 900; font-size: 11px;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(-8px);
  transition: opacity 400ms ease, transform 400ms ease;
  pointer-events: none;
}
#lang-switch.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Tenth Man: single-language copy — main.js sets [hidden]; display:flex above
   would otherwise override the attribute. */
#lang-switch[hidden] { display: none; }
#lang-switch:hover { background: #4a5568; }

/* ── Nav fade overlay ───────────────────────── */
#nav-fade {
  position: fixed; top: 0; left: 0; right: 0;
  height: 140px; z-index: 99; pointer-events: none;
  background: linear-gradient(to bottom, #e1e2e7 0%, #e1e2e7 40%, rgba(225,226,231,0) 100%);
}

/* ── Content ────────────────────────────────── */
#content { position: relative; z-index: 10; }

.section {
  position: relative; width: 100%;
  /* Tenth Man: content-driven height. The clone forced every beat to a
     full viewport; only the splash (inline) and the close keep a minimum. */
  min-height: 0;
  display: flex; align-items: center;
}

/* ── INTRO ──────────────────────────────────── */
.section-intro .section-inner {
  /* Tenth Man: the definition beat keeps the clone's right-half asymmetry
     but starts earlier and runs wider so it reads as the page's first claim. */
  margin-left: 42%; max-width: 800px;
  padding: clamp(96px, 10vw, 128px) 48px clamp(56px, 6vw, 88px) 0;
  display: flex; flex-direction: column; gap: 28px;
}
.section-intro .body-text { font-size: clamp(18px, 1.55vw, 22px); line-height: 1.5; }
.section-intro .headline-xl { font-size: clamp(38px, 4.8vw, 70px); }

/* ── QUOTE ──────────────────────────────────── */
.section-quote .section-inner {
  width: 100%; max-width: 1100px; margin: 0 auto;
  padding: clamp(80px, 10vw, 140px) 40px;
  display: flex; flex-direction: column; gap: 36px;
  align-items: center; text-align: center;
}

/* ── CONTENT + ILLU ─────────────────────────── */
.section-content .section-inner {
  display: flex; align-items: flex-start; gap: 34px;
  /* Tenth Man: beats 3–6 breathe on padding, not on a forced viewport. */
  padding: clamp(56px, 6.5vw, 96px) clamp(40px, 8.33%, 160px);
  width: 100%;
}
.section-content .copy {
  flex: 0 0 694px;
  display: flex; flex-direction: column; gap: 24px;
}
.section-content .illu {
  /* Tenth Man: the art column yields instead of overflowing the viewport
     (the clone's fixed 420px column pushed the SVG past the right edge). */
  flex: 1 1 280px; min-width: 0;
  display: flex; align-items: center;
  justify-content: flex-start; padding-top: 0;
  overflow: visible;
}
.section-content .illu img { width: clamp(160px, 22vw, 255px); height: auto; display: block; }
.section-content .illu object { height: 45vh; max-height: 440px; width: auto; max-width: 100%; display: block; overflow: visible; }

/* ── ABOUT ──────────────────────────────────── */
.section-about .section-inner {
  display: flex; align-items: flex-start;
  gap: clamp(40px, 5vw, 80px);
  padding: clamp(100px, 12vw, 160px) clamp(40px, 8.33%, 160px);
  width: 100%;
}
.section-about .copy { flex: 0 0 694px; display: flex; flex-direction: column; gap: 24px; }
.section-about .about-img { flex: 0 0 438px; max-width: 438px; }
.section-about .about-img img { width: 100%; height: auto; display: block; box-shadow: 0 4px 32px rgba(0,0,0,0.18); }

/* ── CONTACT ────────────────────────────────── */
.section-contact {
  /* Tenth Man: the close keeps deliberate calm (brief §8) without a full
     viewport lock. */
  min-height: 66vh;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
}
.section-contact .section-inner {
  width: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: clamp(88px, 11vw, 144px) 40px clamp(96px, 12vw, 152px);
  gap: 44px; flex: 1;
}
/* Tenth Man conversion beat: centred copy at the content measure, scaled
   up one step from the content beats so the close carries conviction. */
.section-contact .headline-xl-dm { font-size: clamp(44px, 6vw, 88px); max-width: 14ch; }
.contact-copy {
  max-width: 720px;
  display: flex; flex-direction: column; gap: 24px;
}
.contact-copy .body-text { font-size: clamp(18px, 1.6vw, 23px); line-height: 1.5; }
.section-contact .text-link { font-size: clamp(18px, 1.6vw, 24px); gap: 12px; }
.section-contact .text-link svg { width: 24px; height: auto; }
.section-contact .text-link[aria-disabled="true"] { cursor: default; }
.contact-details { display: flex; flex-direction: column; gap: 18px; }
.contact-details p, .contact-details a {
  font-family: var(--font-roboto);
  font-size: clamp(20px, 2.5vw, 32px);
  line-height: 1.3; color: var(--color-text); text-decoration: none;
}
.contact-linkedin img { width: 72px; height: 72px; }

.site-footer {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 clamp(24px, 4%, 48px) 32px; z-index: 10;
}
.site-footer p, .site-footer button, .site-footer a {
  font-family: var(--font-roboto); font-size: 16px;
  line-height: 1.3; color: var(--color-text);
  text-decoration: none; background: none; border: none; cursor: pointer; padding: 0;
}
.site-footer a:hover, .site-footer button:hover { opacity: 0.65; }

/* ── Type ───────────────────────────────────── */
.eyebrow {
  font-family: var(--font-dm);
  font-size: clamp(16px, 1.5vw, 24px); line-height: 0.8; color: var(--color-text);
}
/* Tenth Man: the intro eyebrow is three sentences and may wrap; a wrapped
   line at 0.8 collides with itself, so the intro alone opens the leading. */
.section-intro .eyebrow { line-height: 1.15; }
.headline-xl {
  font-family: var(--font-noto); font-weight: 700;
  font-size: clamp(36px, 4.5vw, 64px); line-height: 1;
  color: var(--color-text); white-space: pre-wrap;
}
.headline-xl-dm {
  font-family: var(--font-dm); font-style: normal;
  font-size: clamp(36px, 4.5vw, 64px); line-height: 1;
  color: var(--color-text); white-space: pre-wrap;
}
.subheadline {
  font-family: var(--font-dm); font-style: normal;
  font-size: clamp(18px, 2vw, 32px); line-height: 1.3; color: var(--color-text);
}
/* Tenth Man: body copy opened one step (brief §7.3 / §15) — size floor 17px,
   leading 1.5, unchanged faces and measure. */
.body-text {
  font-family: var(--font-roboto); font-weight: 400;
  font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; color: var(--color-text);
}
.body-bold {
  font-family: var(--font-roboto); font-weight: 700;
  font-size: clamp(17px, 1.45vw, 21px); line-height: 1.4; color: var(--color-text);
}
.body-italic {
  font-family: var(--font-dm); font-style: italic;
  font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; color: var(--color-text);
}
ul.leistungen { padding-left: 30px; display: flex; flex-direction: column; gap: 6px; }
ul.leistungen li {
  font-family: var(--font-roboto);
  font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; color: var(--color-text);
}
.quote-text {
  font-family: var(--font-dm);
  font-size: clamp(36px, 5.5vw, 80px); line-height: 1.1;
  font-style: normal; color: var(--color-text);
}
.quote-author {
  font-family: var(--font-roboto); font-weight: 300;
  font-size: clamp(18px, 2vw, 36px); font-style: normal; color: var(--color-text);
}
.text-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-roboto); font-weight: 600;
  font-size: clamp(16px, 1.4vw, 20px); line-height: 1.3; color: var(--color-text);
  text-decoration: none; cursor: pointer; background: none; border: none; padding: 0;
}
.text-link:hover { opacity: 0.65; }
.text-link svg { flex-shrink: 0; }
.praxis { display: flex; flex-direction: column; gap: 8px; }
/* Tenth Man: the three recognition moments (beat 6) — each a distinct block
   opened by a thin rule, its lead line the reveal control. */
.section-content .copy .praxis--reveal + .praxis--reveal {
  margin-top: 8px; padding-top: 28px;
  border-top: 1px solid rgba(47,53,56,0.22);
}

/* ── Tenth Man reveal rail (triggers) ───────── */
.reveal-rail {
  list-style: none; margin: 4px 0 0; padding: 0;
  border-top: 1px solid rgba(47,53,56,0.22);
  max-width: 560px;
}
/* six-item rails run as two columns so the beat stays compact */
.reveal-rail--wide { max-width: 694px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; }
.reveal-trigger {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 11px 0; margin: 0;
  background: none; border: 0; border-bottom: 1px solid rgba(47,53,56,0.22);
  font-family: var(--font-roboto); font-weight: 600;
  font-size: clamp(16px, 1.25vw, 18px); line-height: 1.3; color: var(--color-text);
  text-align: left; cursor: pointer;
  transition: opacity 200ms ease;
}
/* Tenth Man final QA (2026-09-06): the inherited hover fade (opacity .65)
   composited the 17px bold trigger text to 3.78:1 against the panel ground
   and 2.98:1 over the section blob — below WCAG AA 4.5:1 for normal text.
   Measured across backdrops, no reduction is safe (opacity .90 still lands
   at 4.89:1 over the blob), so the fade is removed and hover renders at the
   accepted resting contrast. The hover affordance is unchanged in kind: the
   chevron still advances 4px on hover (rule below). */
.reveal-trigger:hover { opacity: 1; }
.reveal-trigger:focus-visible { outline: 2px solid var(--color-text); outline-offset: 4px; }
.reveal-trigger svg { margin-left: auto; flex-shrink: 0; transition: transform 200ms ease; }
.reveal-trigger:hover svg, .reveal-trigger:focus-visible svg { transform: translateX(4px); }
.reveal-trigger[aria-expanded="true"] .reveal-label { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.reveal-index {
  font-family: var(--font-dm); font-size: 15px; line-height: 1;
  min-width: 2.2ch; opacity: 0.75;
}
/* beat 6: the lead line itself is the control */
.reveal-trigger--lead {
  border-bottom: 0; padding: 0 0 4px;
  font-weight: 700; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.4;
  gap: 10px;
}
.reveal-trigger--lead svg { margin-left: 0; }

/* ── Tenth Man reveal panel content ─────────── */
.reveal-purpose { line-height: 1; opacity: 0.8; }
.reveal-title { font-size: clamp(32px, 3.6vw, 52px); }
.reveal-lead { max-width: 62ch; }
.reveal-stack { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.reveal-stack-item { padding: 14px 18px; border: 1px solid rgba(47,53,56,0.28); }
.reveal-stack-item .body-text { margin-top: 4px; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.4; }
.reveal-stack-arrow { display: flex; padding-left: 18px; }
.reveal-stack-arrow svg { display: block; }
.reveal-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-family: var(--font-roboto); font-weight: 600; font-size: clamp(16px, 1.25vw, 18px); color: var(--color-text); }
.reveal-chain-arrow { display: inline-flex; }
#slide-panel-inner .panel-section { gap: 12px; }

/* ── Tenth Man architecture specimen (Agentic engineering reveal) ── */
/* Thin rules, nodes, precise geometry, restrained type — the same family as
   the Section 5 art: a filled point is a senior (human) node, a hollow point
   an engineered layer. Column 2 carries the return rail. */
.arch {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 28px;
  max-width: 600px;
}
.arch > li { grid-column: 1; }
.arch > li.arch-return { grid-column: 2; }
.arch-node {
  position: relative; padding: 10px 14px;
  border: 1px solid rgba(47,53,56,0.28);
  display: flex; flex-direction: column; gap: 8px;
}
.arch-node--human { border-color: rgba(47,53,56,0.6); }
.arch-label {
  font-family: var(--font-roboto); font-weight: 700;
  font-size: clamp(15px, 1.2vw, 17px); line-height: 1.35; color: var(--color-text);
  display: flex; align-items: center; gap: 10px;
}
.arch-node--human .arch-label::before,
.arch-node--system .arch-label::before {
  content: ''; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--color-text);
}
.arch-node--human .arch-label::before { background: var(--color-text); }
.arch-cells { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.arch-cells li {
  font-family: var(--font-roboto); font-weight: 400;
  font-size: clamp(13px, 1vw, 14px); line-height: 1.3; color: var(--color-text);
  padding: 4px 8px; border: 1px solid rgba(47,53,56,0.28);
}
.arch-conn { display: flex; padding: 2px 0 2px 18px; }
.arch-conn svg { display: block; }
/* return rail: review climbs back to the conductor — the human-control path */
.arch-return {
  position: relative; margin-top: 20px;
  border-top: 1px solid rgba(47,53,56,0.6); border-right: 1px solid rgba(47,53,56,0.6);
}
.arch-return::before {
  content: ''; position: absolute; left: -1px; top: -4px; width: 7px; height: 7px;
  border-left: 1px solid rgba(47,53,56,0.6); border-bottom: 1px solid rgba(47,53,56,0.6);
  transform: rotate(45deg);
}
.arch-node--return::after {
  content: ''; position: absolute; top: -1px; right: -28px; width: 28px; height: 21px;
  border-right: 1px solid rgba(47,53,56,0.6); border-bottom: 1px solid rgba(47,53,56,0.6);
}

/* ── Slide / Drawer panels ──────────────────── */
#slide-overlay, #impressum-overlay {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(0,0,0,0.25); opacity: 0; pointer-events: none;
  transition: opacity 500ms ease;
}
#slide-overlay.visible, #impressum-overlay.visible { opacity: 1; pointer-events: auto; }

#slide-panel, #impressum-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 160;
  width: min(820px, 92vw); background: var(--color-bg-blue);
  transform: translateX(100%);
  transition: transform 500ms cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#slide-panel.open, #impressum-panel.open { transform: translateX(0); }
#impressum-panel { z-index: 162; }
#impressum-overlay { z-index: 161; }
/* Tenth Man surgical pass (2026-09-06): two reveal sizes from record metadata.
   STANDARD (15) sits on a reading measure; DEEP (3: Assemble the bench,
   Fractional architecture, Agentic engineering) keeps the clone's wide panel.
   Below 768px both resolve to 92vw. */
#slide-panel[data-size="standard"] { width: min(620px, 92vw); }
/* DEEP reveals keep the existing Close control in view while the content
   scrolls: sticky inside #slide-panel (the real scroll container), no script,
   no second control. The negative margins hold the resting position identical
   to STANDARD; the background masks content passing beneath. */
#slide-panel[data-size="deep"] .panel-back {
  position: sticky; top: 0; z-index: 3;
  padding: 18px 0 14px; margin: -18px 0 -14px;
  background: var(--color-bg-blue);
}
/* Tenth Man final QA (2026-09-06): at narrow mobile a STANDARD panel can also
   overflow (measured: s4-agentic-execution, 928/844 at 390 and 1062/844 at
   320), and the DEEP-only rule above left its Close control scrolling out of
   view. Below 480px the same treatment — identical padding/negative-margin so
   the resting position is unchanged, same masking background and stacking —
   applies to the panel shell generally, so any STANDARD panel that becomes
   scrollable keeps Close reachable. No size reclassification, no script. */
@media (max-width: 480px) {
  #slide-panel .panel-back {
    position: sticky; top: 0; z-index: 3;
    padding: 18px 0 14px; margin: -18px 0 -14px;
    background: var(--color-bg-blue);
  }
}

#slide-panel-inner, #impressum-panel-inner {
  padding: clamp(80px, 10vw, 120px) clamp(32px, 6%, 64px) 80px;
  display: flex; flex-direction: column; gap: 32px;
}

.panel-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-roboto); font-weight: 600; font-size: 20px;
  color: var(--color-text); text-decoration: none;
  background: none; border: none; cursor: pointer; padding: 0;
}
.panel-back svg { transform: rotate(180deg); }
.panel-back:hover { opacity: 0.65; }

.panel-section { display: flex; flex-direction: column; gap: 16px; }
.panel-section-title {
  font-family: var(--font-dm); font-style: normal;
  font-size: clamp(24px, 3vw, 32px); line-height: 1.3; color: var(--color-text);
}
.principles { display: flex; flex-direction: column; gap: 24px; }
.principle { display: flex; flex-direction: column; gap: 8px; }

.impressum-section { display: flex; flex-direction: column; gap: 10px; }
.impressum-section-title {
  font-family: var(--font-dm); font-style: normal;
  font-size: clamp(20px, 2vw, 28px); line-height: 1.2; color: var(--color-text);
}
.impressum-text {
  font-family: var(--font-roboto); font-weight: 400;
  font-size: 16px; line-height: 1.5; color: var(--color-text); white-space: pre-line;
}

/* ── [data-depth] parallax ──────────────────── */
[data-depth] { will-change: transform; }

/* ── Reduced motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #splash, #splash-logo-a, #site, #nav-logo-a,
  #slide-panel, #slide-overlay, #impressum-panel, #impressum-overlay,
  #lang-switch, .reveal-trigger, .reveal-trigger svg { transition: none; animation: none; }
  .reveal-trigger:hover svg, .reveal-trigger:focus-visible svg { transform: none; }
  #site { opacity: 1; }
  #lang-switch { opacity: 1; transform: none; }
}

/* ── Mobile ─────────────────────────────────── */
@media (max-width: 768px) {
  #nav { position: fixed; top: 0; left: 0; right: 0; padding: 16px; z-index: 100; }
  #lang-switch { top: 16px; right: 16px; }

  .section-intro .section-inner { margin-left: 0; max-width: none; padding: 100px 24px 60px; gap: 24px; }

  .section-content .section-inner { flex-direction: column; padding: 100px 24px 60px; gap: 0; }
  .section-content .copy { flex: none; width: 100%; display: contents; }
  .section-content .copy .eyebrow    { order: 1; margin-bottom: 16px; }
  .section-content .copy .headline-xl,
  .section-content .copy .headline-xl-dm { order: 2; margin-bottom: 0; }
  .section-content .illu { order: 3; padding-top: 24px; padding-bottom: 16px; width: 100%; justify-content: flex-start; flex: none; padding-left: 24px; }
  .section-content .illu object { height: 55vw; width: auto; }
  /* Tenth Man surgical pass (2026-09-06): on tablet/phone the Section 3
     pressure art keeps its meaning at a smaller height and the Section 6
     arrow becomes a subordinate cue; Section 4/5 art and all copy untouched. */
  #pressure .illu { padding-top: 16px; padding-bottom: 8px; }
  #pressure .illu object { height: clamp(140px, 30vw, 232px); }
  #triggers .illu { padding-top: 8px; padding-bottom: 0; }
  #triggers .illu object { height: clamp(96px, 22vw, 170px); opacity: 0.85; }
  /* Arrow section: taller on mobile */
  #executive-coaching .illu object { height: 65vw; }
  /* Flag section: left-aligned at text indent */
  #digitale-transformation .illu { padding-left: 24px; justify-content: flex-start; }
  #digitale-transformation .illu object { height: 45vw; }
  .section-content .copy .subheadline { order: 4; margin-top: 16px; }
  .section-content .copy .body-text   { order: 5; margin-top: 16px; }
  .section-content .copy .panel-section { order: 6; margin-top: 16px; }
  .section-content .copy .praxis      { order: 7; margin-top: 16px; }
  /* Tenth Man: keep each lead line with its own paragraph (the .body-text
     rule above would otherwise open a 16px gap inside the block). */
  .section-content .copy .praxis .body-text { margin-top: 0; }
  .section-content .copy .text-link   { order: 8; margin-top: 16px; }
  .section-content .copy > div        { order: 9; margin-top: 16px; }
  .section-content .copy .reveal-rail { order: 10; margin-top: 28px; max-width: none; display: block; }
  .section-content .copy .praxis--reveal + .praxis--reveal { margin-top: 28px; padding-top: 24px; }
  .reveal-trigger { padding: 14px 0; }
  .section-contact .headline-xl-dm { max-width: none; }

  .section-about .section-inner { flex-direction: column; padding: 100px 24px 60px; }
  .section-about .copy { flex: none; width: 100%; }
  .section-about .about-img { flex: none; width: 228px; max-width: 228px; align-self: flex-end; margin-top: 16px; }

  .section-contact { min-height: auto; }
  .section-contact .section-inner { padding: 80px 24px 60px; min-height: auto; }
  #splash-lockup { gap: 12px; }

  .site-footer {
    position: static !important;
    flex-direction: column !important;
    gap: 12px; align-items: center; text-align: center;
    padding: 24px 16px 32px; width: 100%;
  }
}

/* Tenth Man surgical pass: on narrow phones the Section 6 arrow is hidden —
   the three lead lines carry the beat on their own there. */
@media (max-width: 480px) {
  #triggers .illu { display: none; }
}


/* ══ Tenth Man support visual — PATH (Section: underwrite the mandate) ══════
   Authored in-page rather than imported as artwork, so it inherits the page's
   own type, colour token and reduced-motion rule. The geometry carries the
   argument. The receiving decision is fixed first and marked heaviest. Each
   dependency beneath it is exposed backward, its rule reaching further out as
   the mandate decomposes. Execution resources resolve last and divide
   UNDERNEATH the standard, never before it. Nothing here is a box. */
.illu--component { align-items: flex-start; padding-top: 4px; }

.tm-path {
  margin: 0; width: 100%; max-width: 384px;
  color: var(--color-text);
  --tm-num: 30px;           /* ledger index gutter, outside the rail */
  --tm-rail: 22px;          /* the rail the marks sit on */
  --tm-gap: 52px;           /* rhythm between marks */
}
.tm-path__cap {
  font-family: var(--font-roboto); font-weight: 500;
  font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase;
  line-height: 1.5; opacity: 0.62;
  margin: 0 0 26px calc(var(--tm-num) + var(--tm-rail));
  padding-bottom: 14px; max-width: 27ch;
  border-bottom: 1px solid currentColor;
  border-color: rgba(47,53,56,0.18);
}
.tm-path__list { list-style: none; margin: 0; padding: 0; position: relative; }

/* The rail: one continuous line, drawn top-down. Round 2 (R1-003): this was a
   <span> emitted as a direct child of the <ol>, which is invalid list content.
   It is a pseudo-element now — same containing block (.tm-path__list is still
   the positioned ancestor), same geometry, same motion — and the <ol> contains
   nothing but its five <li>. */
.tm-path__list::before {
  content: ""; display: block;
  position: absolute; left: calc(var(--tm-num) + var(--tm-rail) / 2);
  top: 5px; bottom: 6px; width: 1px;
  background: currentColor; opacity: 0.28;
  transform: scaleY(0); transform-origin: top center;
  transition: transform 1000ms cubic-bezier(0.22, 0.61, 0.36, 1) 40ms;
}
.tm-path.is-drawn .tm-path__list::before { transform: scaleY(1); }

/* Round 2 (R1-001, cause 1 of 2): the five stages no longer begin hidden.
   They started at opacity 0, released by an IntersectionObserver behind a
   240ms + i*145ms delay stack — so at the frame a reader arrived at the
   section the canonical mechanism did not yet exist while the secondary
   six-item rail was already at full strength, and a reader who jumped here
   saw an empty column. Motion is re-assigned to geometry only: the spine
   draws, each rule extends in turn, the fan resolves, and the steps settle
   4px. Nothing that carries meaning is ever invisible, which makes the
   guarantee independent of scroll speed and identical under reduced motion. */
.tm-path__step {
  position: relative; display: grid;
  grid-template-columns: var(--tm-num) var(--tm-rail) 1fr;
  align-items: baseline; padding-bottom: var(--tm-gap);
  transform: translateY(4px);
  transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1) calc(120ms + var(--i) * 130ms);
}
.tm-path.is-drawn .tm-path__step { transform: none; }
/* the decision is set apart from what it then decomposes into */
.tm-path__step--anchor { padding-bottom: calc(var(--tm-gap) + 10px); }
.tm-path__step:last-child { padding-bottom: 12px; }

/* Round 2 (R1-001, cause 2 of 2): after the reveal rail's decorative ordinals
   are withdrawn (see the #operating-model block below), these are the only
   numerals in the section, and they carry the one ordering that is real. They
   are lifted a step so the ledger index registers as the section's sequence. */
.tm-path__num {
  grid-column: 1; justify-self: end; padding-right: 12px;
  font-family: var(--font-dm); font-size: 12.5px; line-height: 1.5;
  opacity: 0.5; font-variant-numeric: tabular-nums;
}
.tm-path__mark {
  position: absolute; left: calc(var(--tm-num) + var(--tm-rail) / 2); top: 4px;
  transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-bg-blue);
  box-shadow: 0 0 0 1px currentColor inset;
}
/* the rule reaches further as the mandate decomposes: 01 shortest, 05 longest */
.tm-path__rule {
  grid-column: 3; justify-self: start; align-self: center;
  position: absolute; left: calc(var(--tm-num) + var(--tm-rail)); top: 8px;
  height: 1px; background: currentColor; opacity: 0.32;
  width: calc(10px + var(--i) * 7px);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1) calc(340ms + var(--i) * 145ms);
}
.tm-path.is-drawn .tm-path__rule { transform: scaleX(1); }
.tm-path__label {
  grid-column: 3; padding-left: calc(20px + var(--i) * 7px);
  font-family: var(--font-noto);
  font-size: clamp(16px, 1.32vw, 19px); line-height: 1.25; font-weight: 500;
}

/* hierarchy at rest — before a single pixel moves */
.tm-path__step--anchor .tm-path__mark {
  width: 13px; height: 13px; top: 1px;
  background: currentColor;
  box-shadow: 0 0 0 3.5px var(--color-bg-blue), 0 0 0 4.5px currentColor;
}
.tm-path__step--anchor .tm-path__num  { opacity: 0.75; font-size: 13.5px; }
.tm-path__step--anchor .tm-path__rule { opacity: 0.4; }
.tm-path__step--anchor .tm-path__label {
  font-weight: 600; font-size: clamp(18px, 1.6vw, 23px); letter-spacing: -0.005em;
}
.tm-path__step--terminal .tm-path__mark {
  width: 8px; height: 8px; background: currentColor; box-shadow: none;
}
.tm-path__step:not(.tm-path__step--anchor) .tm-path__label { opacity: 0.92; }

/* execution resources divide underneath — plural, subordinate, unlabelled */
.tm-path__fan {
  display: block; width: 108px;
  margin-left: calc(var(--tm-num) + var(--tm-rail) / 2 - 54px);
  margin-top: -10px;
  opacity: 0; transition: opacity 560ms ease 1020ms;
}
.tm-path__fan svg { width: 100%; height: auto; display: block; opacity: 0.45; }
.tm-path.is-drawn .tm-path__fan { opacity: 1; }

/* Reduced motion: the completed composition, immediately. Nothing is lost —
   motion paces the reading order, it never carries it. */
@media (prefers-reduced-motion: reduce) {
  .tm-path__list::before { transform: scaleY(1); transition: none; }
  .tm-path__step  { transform: none; transition: none; }
  .tm-path__rule  { transform: scaleX(1); transition: none; }
  .tm-path__fan   { opacity: 1; transition: none; }
}

/* Mobile is a recomposition, not a shrink: the visual moves under the headline
   and takes the full measure, the ledger gutter closes up, the rhythm tightens
   and the labels grow relative to the rail. Same five marks, same order, same
   hierarchy, same meaning. */
@media (max-width: 768px) {
  .section-content .illu--component {
    padding-top: 26px; padding-bottom: 6px; padding-left: 0;
  }
  .tm-path { max-width: none; --tm-num: 26px; --tm-rail: 20px; --tm-gap: 38px; }
  .tm-path__cap { margin-bottom: 22px; padding-bottom: 12px; font-size: 10px; max-width: none; }
  .tm-path__label { font-size: 16.5px; padding-left: calc(16px + var(--i) * 5px); }
  .tm-path__rule  { width: calc(8px + var(--i) * 5px); }
  .tm-path__step--anchor .tm-path__label { font-size: 19px; }
  .tm-path__num { font-size: 12px; padding-right: 10px; }
  .tm-path__fan { width: 96px; margin-left: calc(var(--tm-num) + var(--tm-rail) / 2 - 48px); }
}

/* ══ Tenth Man inspection ladder (reveal layer) ════════════════════════════
   The page visual makes the claim in about five seconds; this earns it in
   twenty to sixty. Deliberately denser than the page: every stage states what
   it yields. Same family as the page rail - a hairline, an index, a stage -
   but tabular rather than spatial, so it reads as inspection, not repetition. */
.tm-seq__label { margin-bottom: 14px; }
.tm-seq { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(47,53,56,0.18); }
.tm-seq__row {
  display: grid; grid-template-columns: 34px 1fr; align-items: baseline;
  padding: 13px 0 14px; border-bottom: 1px solid rgba(47,53,56,0.12);
}
.tm-seq__n {
  font-family: var(--font-dm); font-size: 12.5px; line-height: 1.5;
  opacity: 0.45; font-variant-numeric: tabular-nums;
}
.tm-seq__body { display: block; }
.tm-seq__stage {
  display: block; font-family: var(--font-noto);
  font-size: clamp(15px, 1.15vw, 17px); line-height: 1.3;
}
.tm-seq__note {
  display: block; margin-top: 5px;
  font-family: var(--font-roboto); font-weight: 400;
  font-size: clamp(13.5px, 1vw, 15px); line-height: 1.45; opacity: 0.72;
}
@media (max-width: 768px) {
  .tm-seq__row { grid-template-columns: 28px 1fr; padding: 12px 0 13px; }
  .tm-seq__stage { font-size: 16px; }
  .tm-seq__note { font-size: 14px; }
}

/* ══ Round 2 (R1-001, cause 2 of 2): one numbered sequence, not two ════════
   Section 4 carries two lists. The five-stage path IS a sequence — the
   receiving decision, then what it decomposes into, in an order that cannot
   be reordered without breaking the argument. The six reveal triggers are
   NOT: LP intelligence is not "step 2 after reverse engineering", and any of
   the six can be opened in any order. Candidate A set both in the same
   idiom — 01..0N tabular DM numerals — and the rail's index was in fact the
   louder of the two (15px at opacity .75, against the path's 12.5px at .4).
   Measured at 1440, the rail was also the heavier type: 18px/600 against
   17.28px/400 on four of the five path stages. A blind reader duly read the
   six-item rail as the primary methodology.

   The ordinal is withdrawn here rather than restyled, because it was
   asserting an order that does not exist. It is decoration by construction —
   js/main.js emits it aria-hidden="true" — so nothing leaves the accessibility
   tree, and every trigger, label, chevron, panel and keyboard path is
   untouched. The rail keeps its work; it stops claiming to be a method.

   Scoped to #operating-model. Sections 3, 5, 6 and 7 keep their indices.
   Colour and opacity are deliberately NOT touched: the hover fade was removed
   on 2026-09-06 for a measured WCAG contrast reason (see .reveal-trigger
   above) and that decision must not be re-opened by a hierarchy change. */
#operating-model .reveal-index { display: none; }
#operating-model .reveal-trigger {
  font-size: clamp(15px, 1.05vw, 16.5px); font-weight: 500;
}