:root {
  --bg: #EDF0F2;
  --surface: #F8FAFB;
  --fg: #101D2B;
  --muted: #4A5968;
  --line: #C3CCD5;
  --accent: #2747D8;
  --accent-ink: #FFFFFF;
  --signal: #E39A1F; --signal-text: #A85F00;
  --tint: #DCE3F8;
  --display: 'Bricolage Grotesque', 'Segoe UI', Arial, sans-serif;
  --body: 'Hanken Grotesk', 'Segoe UI', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1520; --surface: #111F2C; --fg: #E7EDF2; --muted: #9DAEBD; --line: #263646;
    --accent: #8AA2FF; --accent-ink: #0B1520; --signal: #F0B04A; --signal-text: #F0B04A; --tint: #17263B;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B1520; --surface: #111F2C; --fg: #E7EDF2; --muted: #9DAEBD; --line: #263646;
  --accent: #8AA2FF; --accent-ink: #0B1520; --signal: #F0B04A; --signal-text: #F0B04A; --tint: #17263B;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--body); font-size: 17px; line-height: 1.6;
  padding-inline: clamp(16px, 4vw, 40px);
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1160px; margin-inline: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.025em; line-height: 1.08; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.bar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  margin-inline: calc(-1 * clamp(16px, 4vw, 40px));
  padding-inline: clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
}
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.bar nav { display: grid; grid-template-columns: auto auto; column-gap: 22px; row-gap: 10px; align-items: center; }
.qrow { grid-column: 1 / -1; grid-row: 2; justify-self: start; display: flex; align-items: center; gap: 10px; }
@media (max-width: 1100px) { .bar nav { column-gap: 12px; } .qrow { justify-self: end; } }
.qtitle { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.qlabel { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--accent); background: var(--tint); border: 1.5px solid var(--accent); border-radius: 3px; padding: 5px 10px; line-height: 1; transition: background .15s ease, color .15s ease; }
.qlabel:hover, .qlabel[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo svg { height: 34px; width: auto; flex: none; display: block; overflow: visible; }
.logo text { font-family: var(--mono); font-weight: 800; font-size: 100px; letter-spacing: -2px; }
.logo .lg-prompt, .logo .cursor { fill: var(--signal); }
.logo .lg-word { fill: var(--fg); }
.logo.pulse-go .cursor { animation: cursorBlink 1.2s steps(1, end) 1 both; }
@keyframes cursorBlink { 0%, 100% { opacity: 1; } 16%, 50%, 83% { opacity: 0; } 33%, 66% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .logo.pulse-go .cursor { animation: none; } }
@media (max-width: 560px) { .logo svg { height: 26px; } }
nav { display: flex; align-items: center; gap: 28px; }
nav a.link { text-decoration: none; font-size: 15px; color: var(--muted); }
nav a.link:hover { color: var(--fg); }
.btn {
  display: inline-flex; align-items: center; gap: 8px; font: 600 15px var(--body);
  text-decoration: none; padding: 12px 20px; border-radius: 4px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-ink); cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn.ghost:hover { background: var(--surface); }
.btn.small { padding: 9px 16px; font-size: 14px; }
nav { gap: 22px; }
nav .links { display: flex; align-items: center; gap: 28px; }
.menu-btn { display: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: transparent; cursor: pointer; position: relative; }
.menu-btn span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--fg); border-radius: 1px; transition: transform .2s ease, opacity .2s ease, top .2s ease; }
.menu-btn span:nth-child(1) { top: 13px; }
.menu-btn span:nth-child(2) { top: 19px; }
.menu-btn span:nth-child(3) { top: 25px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); }
.menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 1100px) {
  nav { gap: 12px; }
  .menu-btn { display: block; }
  nav .links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 4px clamp(16px, 4vw, 40px) 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .bar.open nav .links { display: flex; }
  nav .links a.link { font-size: 17px; padding: 14px 0; border-top: 1px solid var(--line); color: var(--fg); }
  nav .links a.link:first-child { border-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .menu-btn span { transition: none; } }
@media (max-width: 760px) { .btn.small { padding: 8px 12px; } }

.hero { padding-block: clamp(40px, 7vw, 88px) clamp(48px, 7vw, 96px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.6rem); line-height: 1.0; letter-spacing: -0.035em; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 52ch; margin-top: 24px; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.about { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.about > * { min-width: 0; }
.about .portrait { width: 190px; height: 190px; object-fit: cover; border-radius: 50%; display: block; border: 1px solid var(--line); }
.about .who-name { font-family: var(--display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.015em; margin-top: 28px; }
.about .who-role { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.about .facts { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; border-top: 1px solid var(--line); padding-top: 20px; }
.about .facts li { font-family: var(--mono); font-size: 13px; letter-spacing: .02em; color: var(--muted); }
.about .facts b { color: var(--fg); font-weight: 700; }
.about .cta-row { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 860px) { .about { grid-template-columns: minmax(0, 1fr); } .about .portrait { width: 150px; height: 150px; } }
.hero .trust { margin-top: 22px; color: var(--muted); font-size: 13px; }
.hero .eyebrow { margin-bottom: 22px; display: block; }
.fig { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: clamp(8px, 2vw, 18px); }
.fig svg { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } }

.feature .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.feature.flip .fig { order: -1; }
.feature-h { font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.02; letter-spacing: -0.035em; }
.feature-h em { font-style: normal; color: var(--accent); }
.feature-h em.block { display: block; }
.feature .lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--muted); max-width: 50ch; margin-top: 22px; }
.feature .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 900px) { .feature .wrap { grid-template-columns: minmax(0, 1fr); } .feature.flip .fig { order: 0; } }
.band { background: var(--surface); margin-inline: calc(-1 * clamp(16px, 4vw, 40px)); padding-inline: clamp(16px, 4vw, 40px); }
.band-top { border-top: 1px solid var(--line); }
.band-bottom { border-bottom: 1px solid var(--line); padding-top: 0; }
.band .fig { background: var(--bg); }
/* partners */
#partners { padding-block: clamp(72px, 11vw, 144px); }
.pt3 { list-style: none; margin: clamp(36px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.pt3 li { --c: var(--accent); position: relative; overflow: hidden; min-height: clamp(400px, 38vw, 500px); display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 34px); border-radius: 6px; border: 1px solid color-mix(in oklch, var(--c) 28%, var(--line)); background: linear-gradient(170deg, color-mix(in oklch, var(--c) 16%, var(--surface)) 0%, var(--surface) 62%); transition: transform .25s ease, box-shadow .25s ease; }
.pt3 li:nth-child(1) { --c: color-mix(in oklch, var(--accent) 17%, var(--signal)); }
.pt3 li:nth-child(2) { --c: color-mix(in oklch, var(--accent) 50%, var(--signal)); }
.pt3 li:nth-child(3) { --c: color-mix(in oklch, var(--accent) 83%, var(--signal)); }
.pt3 li:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px color-mix(in oklch, var(--c) 60%, transparent); }
.pt3 li::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, color-mix(in oklch, var(--c) 55%, transparent) 1.6px, transparent 2px); background-size: 14px 14px; -webkit-mask-image: radial-gradient(ellipse 75% 55% at 100% 45%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 75% 55% at 100% 45%, #000 0%, transparent 70%); pointer-events: none; }
.pt3 li > * { position: relative; }
.pt3 .pt3-k { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pt3 .pt3-w { font-family: var(--display); font-weight: 700; font-size: clamp(3.2rem, 6.4vw, 5.6rem); line-height: .9; letter-spacing: -0.04em; color: var(--c); margin-top: 10px; }
.pt3 h3 { font-size: 1.35rem; letter-spacing: -0.015em; margin-top: auto; position: relative; }
.pt3 p { color: var(--muted); font-size: 16px; margin-top: 10px; max-width: 32ch; position: relative; }
@media (max-width: 900px) { .pt3 { grid-template-columns: minmax(0, 1fr); } .pt3 li { min-height: 340px; } }
/* talent pool map */
.map-fig { overflow: hidden; }
.map-img { display: block; width: 100%; height: auto; }
.map-dark { display: none; }
:root[data-theme="dark"] .map-light { display: none; } :root[data-theme="dark"] .map-dark { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .map-light { display: none; } :root:not([data-theme="light"]) .map-dark { display: block; } }
section#talent { padding-bottom: clamp(24px, 3vw, 40px); }
section#skills { padding-top: clamp(24px, 3vw, 40px); }
.partners-head { max-width: 640px; }
.pv2-fit { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.pv2-fit b { color: var(--accent); font-weight: 700; }
.pv2-fit b::after { content: " \2192"; }
.pv2-fit:hover b { text-decoration: underline; text-underline-offset: 3px; }
.aud-head { padding-bottom: 24px; }
.aud-head .h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.audience { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.audience .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.audience .wrap > div { padding: 48px 28px 48px 0; min-width: 0; }
.audience .wrap > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.audience b { display: block; font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.015em; margin-bottom: 4px; }
.audience span { font-size: 15px; color: var(--muted); line-height: 1.45; display: block; }
@media (max-width: 760px) {
  .audience .wrap { grid-template-columns: minmax(0, 1fr); }
  .audience .wrap > div { padding-right: 0; }
  .audience .wrap > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}

.h2 em.two { font-style: normal; color: var(--accent); }


.statement { padding-block: clamp(56px, 9vw, 112px); }
.statement p.big { font-family: var(--display); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; font-size: clamp(2rem, 5.4vw, 4.2rem); margin: 0; }
.statement p.big span { display: block; }
.statement p.big span:last-child { color: var(--accent); }
.statement p.when { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; font-size: clamp(1.25rem, 2.6vw, 1.9rem); margin: clamp(20px, 3vw, 32px) 0 0; color: var(--fg); }

.prog-head { max-width: 640px; }
.prog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); margin-top: clamp(28px, 4vw, 48px); }
.prog > div { min-width: 0; border-top: 1px solid var(--fg); padding-top: 16px; }
.prog .lbl { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.prog .mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-block: 18px; max-width: 260px; }
.prog .mods i { aspect-ratio: 5 / 3; border: 1px solid var(--line); background: var(--surface); border-radius: 3px; display: block; }
.prog .mods i.on { background: var(--accent); border-color: var(--accent); }
.prog h3 { font-size: 1.25rem; letter-spacing: -0.015em; }
.prog p { color: var(--muted); font-size: 16px; margin-top: 6px; }
.prog-axis { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-top: 1px dashed var(--muted); padding-top: 10px; }
@media (max-width: 760px) { .prog { grid-template-columns: minmax(0, 1fr); } }

.proof-grid { display: grid; gap: 20px; margin-top: 20px; }
.proof-grid.cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { min-width: 0; border: 1px dashed var(--muted); border-radius: 6px; padding: 22px; background: var(--surface); display: grid; gap: 10px; align-content: start; }
.card h3 { font-size: 1.2rem; letter-spacing: -0.015em; }
.card p { color: var(--muted); font-size: 15px; }
.card .ph { color: var(--muted); }
.card.real { border-style: solid; border-color: var(--line); grid-template-rows: auto auto 1fr auto; }
.card.real p { color: var(--fg); }
.card.real .meta { color: var(--muted); padding-top: 6px; border-top: 1px solid var(--line); }
@media (max-width: 860px) { .proof-grid.cases { grid-template-columns: minmax(0, 1fr); } }
#proof .proof-grid.cases { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
#proof .card.real { position: relative; grid-template-rows: auto auto auto 1fr auto; gap: 8px; padding: 18px 18px 16px; border-top: 3px solid var(--accent); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
#proof .card.real:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); border-top-color: var(--accent); box-shadow: 0 10px 28px -16px color-mix(in srgb, var(--accent) 45%, transparent); }
#proof .card.real .mono { font-size: 11px; }
#proof .card h3 { font-size: 1.05rem; line-height: 1.25; }
#proof .card.real p { font-size: 14px; color: var(--muted); }
#proof .case-part { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
#proof .case-part b { color: var(--accent); font-weight: 700; text-align: right; }
#proof .proof-filter { margin: 28px 0 0; }
#proof .proof-filter button span { opacity: .7; margin-left: 4px; }
#proof .case-cat { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
#proof .card[hidden] { display: none; }
#proof .case-cta { background: var(--accent); border: 1px solid var(--accent); color: var(--accent-ink); text-decoration: none; grid-template-rows: auto auto 1fr auto; gap: 8px; padding: 18px; transition: transform .2s ease, box-shadow .2s ease; }
#proof .case-cta .mono { color: color-mix(in srgb, var(--accent-ink) 75%, transparent); font-size: 11px; }
#proof .case-cta h3 { color: var(--accent-ink); font-size: 1.25rem; }
#proof .case-cta p { color: color-mix(in srgb, var(--accent-ink) 85%, transparent); font-size: 14px; }
#proof .case-cta b { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--accent-ink) 35%, transparent); }
#proof .case-cta b::after { content: " \2192"; }
#proof .case-cta:hover { transform: translateY(-3px); box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--accent) 70%, transparent); }
@media (max-width: 1100px) { #proof .proof-grid.cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { #proof .proof-grid.cases { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { #proof .card.real { transition: none; } #proof .card.real:hover { transform: none; } }

.ph { color: var(--muted); }

.inds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(24px, 4vw, 40px); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.inds > div { padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.inds h3 { font-size: 1.15rem; letter-spacing: -0.015em; }
.inds p { color: var(--muted); font-size: 15px; margin-top: 6px; }
@media (max-width: 980px) { .inds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .inds { grid-template-columns: minmax(0, 1fr); } }

.seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 4px 10px; }
.seg button { font: 500 13px var(--mono); letter-spacing: .04em; padding: 8px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
svg [hidden] { display: none; }

section.block { padding-block: clamp(56px, 9vw, 112px); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.split > * { min-width: 0; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }
.h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); }
.sub { color: var(--muted); max-width: 56ch; margin-top: 18px; }
.tag { display: block; margin-bottom: 16px; }
.mono.tag, .mono.eyebrow { font-size: 15.6px; font-weight: 400; }

.services-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; margin-bottom: clamp(32px, 5vw, 64px); }
@media (max-width: 860px) { .services-head { grid-template-columns: minmax(0, 1fr); } }
.h2 em.alt { font-style: normal; background: var(--accent); color: var(--accent-ink); padding: 0.02em 0.2em 0.06em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.why { background: var(--surface); border-block: 1px solid var(--line); margin-inline: calc(-1 * clamp(16px, 4vw, 40px)); padding-inline: clamp(16px, 4vw, 40px); }
#skills .skill-groups { border-bottom: 1px solid var(--line); }
#skills .skill-group { display: grid; grid-template-columns: minmax(180px, 3fr) minmax(0, 9fr); gap: clamp(16px, 3vw, 40px); align-items: center; padding-block: 18px; border-top: 1px solid var(--line); }
#skills .skill-head { display: flex; justify-content: flex-start; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
#skills .chips { margin-top: 0; gap: 6px; }
#skills .chips span { background: var(--tint); border-color: transparent; color: var(--fg); font-size: 12.5px; padding: 6px 10px; transition: background .15s ease, color .15s ease; }
#skills .chips span:hover { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 640px) { #skills .skill-group { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips span { font-family: var(--mono); font-size: 13px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--bg); }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(32px, 5vw, 56px); position: relative; }
.steps li { list-style: none; padding: 0 24px 0 0; position: relative; }
.steps { padding: 0; margin-bottom: 0; }
.steps li::before { content: ""; display: block; height: 1px; background: var(--fg); margin-bottom: 22px; }
.steps li::after { content: ""; position: absolute; left: 0; top: -4px; width: 9px; height: 9px; background: var(--bg); border: 1.5px solid var(--fg); border-radius: 50%; }
.steps li:last-child::after { background: var(--accent); border-color: var(--accent); width: 11px; height: 11px; top: -5px; }
.steps h3 { font-size: 1.3rem; letter-spacing: -0.02em; margin-top: 8px; }
.steps p { color: var(--muted); margin-top: 8px; font-size: 16px; }
@media (max-width: 860px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .steps li { padding-right: 0; }
}

.places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.places .addr { margin-top: 4px; font-size: 14px; color: var(--fg); }
@media (max-width: 560px) { .places { grid-template-columns: minmax(0, 1fr); } }
.places div { border-top: 1px solid var(--fg); padding-top: 14px; }
.places b { font-family: var(--display); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.015em; display: block; }
.places span { color: var(--muted); font-size: 15px; display: block; margin-top: 4px; }

.contact { background: var(--fg); color: var(--bg); margin-inline: calc(-1 * clamp(16px, 4vw, 40px)); padding-inline: clamp(16px, 4vw, 40px); }
.contact .mono, .contact .sub { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.contact .h2 em { font-style: normal; color: var(--signal); }

footer { padding-block: 40px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; color: var(--muted); font-size: 14px; }

svg .t { font-family: var(--mono); font-size: 11px; fill: var(--muted); }
svg .tb { font-family: var(--body); font-size: 12px; font-weight: 500; fill: var(--fg); }
svg .tw { font-family: var(--body); font-size: 12px; font-weight: 600; fill: var(--accent-ink); }
svg .ln { stroke: var(--fg); stroke-width: 1.4; fill: none; stroke-linejoin: round; stroke-linecap: round; }
svg .lf { stroke: var(--line); stroke-width: 1; fill: none; }
svg .dash { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; fill: none; }
svg .surf { fill: var(--surface); }
svg .bgf { fill: var(--bg); }
svg .acc { fill: var(--accent); }
svg .accs { stroke: var(--accent); stroke-width: 1.5; fill: none; stroke-linejoin: round; }
svg .sig { fill: var(--signal); }
svg .dot { fill: var(--line); }
svg .tint { fill: var(--tint); }
svg .nodeP { fill: var(--surface); stroke: var(--signal); stroke-width: 1.8; }
svg .nodeD { fill: var(--surface); stroke: var(--fg); stroke-width: 1.4; }
svg .nodeA { fill: var(--accent); }
@keyframes ping { 0% { r: 7; opacity: .7; } 100% { r: 20; opacity: 0; } }
svg .ping { fill: none; stroke: var(--accent); stroke-width: 1.5; animation: ping 2.4s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  svg .ping { animation: none; opacity: .4; r: 14; }
  .btn { transition: none; }
}
/* SAP subpage (inside the single file) */
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.logo-tag { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1.5px solid var(--accent); border-radius: 3px; padding: 4px 9px; line-height: 1; white-space: nowrap; }
.logo-tag[hidden] { display: none; }
nav a.link[aria-current="page"] { color: var(--fg); }
[id^="sap-"] { scroll-margin-top: 124px; }
#page-sap .chips span.k { color: var(--accent); border-color: var(--accent); }
#page-sap .sap-legal { color: var(--muted); font-size: 13px; padding-bottom: 48px; }

#page-sap .board { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: clamp(18px, 3vw, 32px); margin-top: clamp(28px, 4vw, 48px); }
#page-sap .board-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: flex-start; }
#page-sap .board-head h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
#page-sap .board-head p { color: var(--muted); font-size: 16px; max-width: 46ch; margin-top: 8px; }
#page-sap .scen { display: flex; flex-wrap: wrap; gap: 6px; }
#page-sap .scen button { font: 500 13px var(--mono); letter-spacing: .04em; padding: 9px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--muted); cursor: pointer; }
#page-sap .scen button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
#page-sap .phases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 28px; }
#page-sap .phases button { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding-top: 20px; position: relative; min-height: 44px; box-sizing: border-box; }
#page-sap .phases button::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 1px; background: var(--line); }
#page-sap .phases button::after { content: ""; position: absolute; top: 0; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--muted); box-sizing: border-box; }
#page-sap .phases button.done::before, #page-sap .phases button.now::before { background: var(--fg); }
#page-sap .phases button.done::after { background: var(--fg); border-color: var(--fg); }
#page-sap .phases button.now::after { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--tint); }
#page-sap .phases b { font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.015em; }
#page-sap .phases small { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
#page-sap .phases button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
#page-sap .bgrid { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 32px; margin-top: 28px; }
#page-sap .streams { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; min-width: 0; }
#page-sap .stream h4 { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0 0 10px; }
#page-sap .slots { display: flex; flex-direction: column; gap: 8px; }
#page-sap .slot { display: flex; align-items: center; gap: 12px; border: 1px dashed var(--muted); border-radius: 4px; padding: 10px 12px; min-height: 58px; background: transparent; transition: border-color .3s, background .3s, opacity .3s; }
#page-sap .slot .code { font-family: var(--mono); font-weight: 700; font-size: 13px; width: 54px; flex: none; color: var(--muted); }
#page-sap .slot .who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
#page-sap .slot .role { font-size: 15px; font-weight: 500; }
#page-sap .slot .st { font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }
#page-sap .slot.on { border-style: solid; border-color: var(--accent); background: var(--tint); }
#page-sap .slot.on .code, #page-sap .slot.on .st { color: var(--accent); }
#page-sap .slot.off { opacity: .55; }
#page-sap .slot.off .role { text-decoration: line-through; text-decoration-color: var(--muted); }
#page-sap .slot.pop { animation: slotPop .55s cubic-bezier(.2,.9,.3,1.3); }
@keyframes slotPop { 0% { transform: translateX(-14px) scale(.96); } 100% { transform: none; } }
#page-sap .slot .dot { width: 26px; height: 26px; border-radius: 50%; flex: none; margin-left: auto; border: 1px dashed var(--muted); display: grid; place-items: center; font: 700 10px var(--mono); color: var(--accent-ink); }
#page-sap .slot.on .dot { border: 0; background: var(--accent); }
#page-sap .slot.off .dot { border: 1px solid var(--muted); background: transparent; }
#page-sap .side { display: flex; flex-direction: column; gap: 20px; border-left: 1px solid var(--line); padding-left: 24px; }
#page-sap .bigno { font-family: var(--display); font-weight: 600; font-size: 56px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--accent); }
#page-sap .side .lbl { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
#page-sap .bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-items: end; height: 90px; }
#page-sap .bars div { background: var(--line); border-radius: 2px 2px 0 0; transition: background .3s; }
#page-sap .bars div.cur { background: var(--accent); }
#page-sap .bars-x { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); text-align: center; margin-top: 4px; }
#page-sap .side p { font-size: 14px; color: var(--muted); }
#page-sap .bnote { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 18px; }
@media (max-width: 900px) {
  #page-sap .bgrid { grid-template-columns: minmax(0, 1fr); }
  #page-sap .side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
@media (max-width: 560px) { #page-sap .phases small { display: none; } #page-sap .phases b { font-size: .9rem; } }

#page-sap #sap-replay .spin { flex: none; }
#page-sap #sap-replay.playing .spin { animation: spinIcon .9s linear infinite; }
@keyframes spinIcon { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #page-sap #sap-replay.playing .spin { animation: none; } }
#page-sap .sfacts { margin: 0; display: grid; }
#page-sap .sfact { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 20px; padding-block: 18px; border-top: 1px solid var(--line); }
#page-sap .sfact:last-child { border-bottom: 1px solid var(--line); }
#page-sap .sfact dt { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 700; padding-top: 4px; }
#page-sap .sfact dd { margin: 0; }
#page-sap .sfact dd b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.015em; }
#page-sap .sfact dd span { color: var(--muted); font-size: 15px; }
@media (max-width: 560px) { #page-sap .sfact { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
#page-sap .prose p { color: var(--muted); max-width: 52ch; }
#page-sap .prose p + p { margin-top: 16px; }

#page-sap .twocol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(28px, 4vw, 44px); }
#page-sap .threecol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(28px, 4vw, 44px); }
#page-sap .panel { min-width: 0; border: 1px solid var(--line); border-radius: 6px; padding: clamp(20px, 3vw, 30px); background: var(--surface); display: flex; flex-direction: column; gap: 12px; }
#page-sap .panel.main { background: var(--fg); color: var(--bg); border-color: var(--fg); }
#page-sap .panel.main p, #page-sap .panel.main li { color: color-mix(in srgb, var(--bg) 80%, transparent); }
#page-sap .panel.feat { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
#page-sap .panel h3 { font-size: 1.4rem; letter-spacing: -0.02em; }
#page-sap .panel p { color: var(--muted); font-size: 16px; }
#page-sap .panel ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; color: var(--muted); }
#page-sap .panel .use { font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; color: var(--fg); border-top: 1px solid var(--line); padding-top: 12px; margin-top: auto; }
@media (max-width: 860px) { #page-sap .twocol, #page-sap .threecol { grid-template-columns: minmax(0, 1fr); } }
#page-sap .steps .n { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--accent); font-weight: 700; display: block; }
.mail { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--bg); color: var(--fg); border-radius: 6px; padding: 16px 18px; }
.mail code { font-family: var(--mono); font-size: 16px; flex: 1; min-width: 0; overflow-wrap: anywhere; user-select: all; }
/* Hero Fig. 1: Romteca bars grow in on load */
#hero-fig .grow { transform-box: fill-box; transform-origin: left center; animation: heroGrow .8s cubic-bezier(.2,.7,.2,1) both; }
#hero-fig .g1 { animation-delay: .2s; } #hero-fig .g2 { animation-delay: .4s; } #hero-fig .g3 { animation-delay: .6s; } #hero-fig .g4 { animation-delay: .8s; } #hero-fig .g5 { animation-delay: 1s; }
@keyframes heroGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { #hero-fig .grow { animation: none; } }
/* Footer (dark, same structure as the SAP page footer) */
footer.foot { --f-bg: #0B1520; --f-fg: #E7EDF2; --f-muted: #9DAEBD; --f-faint: #7F90A0; --f-line: #22303E;
  background: var(--f-bg); color: var(--f-muted); border-top: 1px solid var(--f-line); padding-block: 44px 28px; font-size: 14px;
  margin-inline: calc(-1 * clamp(16px, 4vw, 40px)); padding-inline: clamp(16px, 4vw, 40px); }
footer.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; color: inherit; font-size: inherit; }
footer.foot a { color: var(--f-fg); }
footer.foot .foot-in { gap: 32px; }
footer.foot .foot-brand { display: flex; flex-direction: column; gap: 12px; max-width: 360px; }
footer.foot .logo svg { height: 26px; }
footer.foot .logo .lg-word { fill: var(--f-fg); }
footer.foot .foot-cols { display: flex; flex-wrap: wrap; gap: 24px 40px; }
footer.foot .foot-cols > div { display: flex; flex-direction: column; gap: 6px; line-height: 1.55; }
footer.foot .foot-cols b { color: var(--f-fg); font-weight: 600; }
footer.foot .social { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
footer.foot .social:hover { color: var(--signal); }
footer.foot .foot-legal { gap: 12px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--f-line); font-size: 12.5px; color: var(--f-faint); }
/* Imprint page: one font, plain style */
.legal { max-width: 760px; font-family: var(--body); }
.legal h1, .legal h2 { font-family: var(--body); font-style: normal; color: var(--fg); letter-spacing: 0; }
.legal h1 { font-size: 2rem; font-weight: 600; line-height: 1.2; }
.legal h2 { font-size: 1.1rem; font-weight: 600; margin-top: 44px; }
.legal p, .legal address { font-family: var(--body); font-style: normal; font-size: 17px; line-height: 1.7; color: var(--muted); margin-top: 12px; }
.legal a { font-style: normal; }
.legal .back { display: inline-block; margin-top: 56px; font-weight: 600; }