/* ==========================================================
   Ronald van Schagen — personal site
   Dark editorial theme: serif display, light sans body,
   generous whitespace, blue→violet accents.
   ========================================================== */

@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-normal.woff2") format("woff2"); font-weight: 200 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-italic.woff2") format("woff2"); font-weight: 200 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-normal.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }

:root {
  --bg: #1c1c23;
  --bg-2: #17171d;
  --bg-3: #212129;
  --ink: #ffffff;
  --ink-2: rgba(255,255,255,.72);
  --ink-3: rgba(255,255,255,.5);
  --ink-4: rgba(255,255,255,.14);
  --line: rgba(255,255,255,.1);
  --lavender: #c0c9df;
  --blue: #1f7bf2;
  --blue-2: #1954ec;
  --sky: #3aa8ff;
  --violet: #6e5cf0;
  --magenta: #c21a55;
  --grad: linear-gradient(120deg, #3aa8ff 0%, #1f7bf2 40%, #5b4ef0 80%);
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --wrap: 1180px;
  --gutter: clamp(1.5rem, 5vw, 4.5rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --ease: cubic-bezier(.2,.7,.1,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, canvas { display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
em { font-style: italic; }
::selection { background: #3a3fd6; color: #fff; }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: #fff; color: #000; padding: .5rem 1rem; }
:focus-visible { outline: 1px solid var(--sky); outline-offset: 4px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: end; }

/* ---------- typography ---------- */
.eyebrow, .label {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.label { display: inline-flex; align-items: center; gap: .9rem; margin-bottom: 1.75rem; }
.label .num { color: var(--sky); font-variant-numeric: tabular-nums; }
.label::after { content: ""; width: 3.5rem; height: 1px; background: linear-gradient(90deg, var(--blue-2), transparent); order: 3; }
.label--plain { margin-bottom: 1.25rem; color: var(--ink-3); }
.label--plain::after { display: none; }

.h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.3rem, 4.6vw, 4rem);
  line-height: 1.08;
  letter-spacing: -.012em;
}
.h2--xl { font-size: clamp(3rem, 7.4vw, 6.6rem); line-height: 1; letter-spacing: -.02em; }
.h2 em, .hero__title em, .statement em { font-style: italic; color: var(--lavender); }
.lead { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.55; color: var(--ink); font-weight: 300; margin-bottom: 1.5rem; }
p { color: var(--ink-2); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: clamp(1.25rem, 3vw, 2.4rem) var(--gutter);
  transition: background .5s var(--ease), padding .5s var(--ease), backdrop-filter .5s;
}
.nav.is-scrolled { background: rgba(23,23,29,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-top: 1rem; padding-bottom: 1rem; }
.brand { display: inline-flex; align-items: center; gap: 1rem; }
.brand__mark {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 400; letter-spacing: -.01em;
  display: inline-grid; place-items: center;
  width: 3rem; height: 3rem; border: 1px solid rgba(255,255,255,.35); border-radius: 50%;
  transition: border-color .4s, background .4s;
}
.brand:hover .brand__mark { border-color: #fff; }
.brand__name { font-size: .72rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; transition: opacity .4s, transform .4s var(--ease); }
.nav.is-scrolled .brand__name { opacity: 0; transform: translateX(-6px); pointer-events: none; }

.nav__right { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); }
.lang { display: inline-flex; align-items: center; gap: .55rem; font-size: .68rem; font-weight: 500; letter-spacing: .2em; color: rgba(255,255,255,.3); }
.lang button { appearance: none; background: none; border: 0; padding: .35rem .1rem; font: inherit; letter-spacing: inherit; color: rgba(255,255,255,.45); cursor: pointer; position: relative; transition: color .3s; }
.lang button:hover { color: #fff; }
.lang button[aria-pressed="true"] { color: #fff; }
.lang button[aria-pressed="true"]::after { content: ""; position: absolute; left: .1rem; right: .3rem; bottom: 0; height: 1px; background: var(--sky); }
.lang--menu { flex-basis: 100%; margin-top: 1.5rem; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.menu-btn {
  appearance: none; background: none; border: 0; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; gap: 1.1rem; padding: .5rem 0; font: inherit;
}
.menu-btn__label { font-size: .68rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.menu-btn__diamond {
  position: relative; width: 1.6rem; height: 1.6rem; border: 1px solid #fff; transform: rotate(45deg);
  transition: transform .6s var(--ease), background .4s;
}
.menu-btn__diamond i { position: absolute; left: 50%; top: 50%; width: 0; height: 1px; background: #fff; transform: translate(-50%,-50%) rotate(-45deg); transition: width .4s var(--ease); }
.menu-btn__diamond i:last-child { transform: translate(-50%,-50%) rotate(45deg); }
.menu-btn:hover .menu-btn__diamond { transform: rotate(135deg); }
.menu-open .menu-btn__diamond { transform: rotate(135deg); }
.menu-open .menu-btn__diamond i { width: 70%; transform: translate(-50%,-50%) rotate(0deg); }
.menu-open .menu-btn__diamond i:last-child { transform: translate(-50%,-50%) rotate(90deg); }

.menu {
  position: fixed; inset: 0; z-index: 40;
  background: radial-gradient(120% 90% at 85% 10%, #2a2352 0%, #17171d 55%, #0e0e12 100%);
  display: flex; flex-direction: column; justify-content: center;
  padding: 7rem var(--gutter) 3rem;
  opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s;
}
.menu[hidden] { display: flex; }
.menu-open .menu { opacity: 1; visibility: visible; }
.menu__list { max-width: var(--wrap); width: 100%; margin: 0 auto; }
.menu__list li { overflow: hidden; }
.menu__list a {
  display: flex; align-items: baseline; gap: 1.5rem;
  font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.25;
  transform: translateY(100%); transition: transform .8s var(--ease), color .3s;
}
.menu__list a b { font-weight: inherit; }
.menu__list a .num { font-family: var(--sans); font-size: .72rem; letter-spacing: .2em; color: var(--sky); font-weight: 500; }
.menu__list a:hover { color: var(--lavender); }
.menu-open .menu__list a { transform: none; }
.menu-open .menu__list li:nth-child(2) a { transition-delay: .05s; }
.menu-open .menu__list li:nth-child(3) a { transition-delay: .1s; }
.menu-open .menu__list li:nth-child(4) a { transition-delay: .15s; }
.menu-open .menu__list li:nth-child(5) a { transition-delay: .2s; }
.menu-open .menu__list li:nth-child(6) a { transition-delay: .25s; }
.menu-open .menu__list li:nth-child(7) a { transition-delay: .3s; }
.menu__foot { max-width: var(--wrap); width: 100%; margin: 4rem auto 0; display: flex; flex-wrap: wrap; gap: 1rem 3rem; font-size: .85rem; color: var(--ink-3); }
.menu__foot a:hover { color: #fff; }
body.menu-open { overflow: hidden; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; overflow: hidden;
  background: radial-gradient(90% 80% at 80% 30%, #242238 0%, var(--bg) 60%);
}
.wave { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.featured .wave { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 60%, transparent 100%); }
.contact .wave { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%); }
.hero .wave { -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
.hero__glow { position: absolute; z-index: 1; width: 44vw; height: 44vw; right: 4vw; top: 30%; background: radial-gradient(closest-side, rgba(110,92,240,.22), transparent); filter: blur(20px); pointer-events: none; }
.hero__inner { padding-top: 8rem; padding-bottom: 10rem; }
.hero__inner > * { max-width: 54rem; }
.hero .eyebrow { margin-bottom: 2.25rem; display: flex; align-items: center; gap: 1rem; }
.hero .eyebrow::before { content: ""; width: 2.5rem; height: 1px; background: var(--grad); }
.hero__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.6rem, 6.2vw, 5.6rem); line-height: 1.04; letter-spacing: -.022em;
}
.hero__sub { margin-top: 2.5rem; color: var(--ink-3); font-size: .95rem; letter-spacing: .02em; }
.scroll-cue {
  position: absolute; z-index: 3; left: var(--gutter); bottom: 0;
  display: flex; flex-direction: column; gap: 1.1rem;
  font-size: .66rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2);
}
@media (min-width: 1340px) { .scroll-cue { left: calc((100vw - var(--wrap)) / 2); } }
.scroll-cue i { display: block; width: 1px; height: 5.5rem; background: rgba(255,255,255,.12); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 45%; background: var(--magenta); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 100% { transform: translateY(240%); } }

/* ---------- 2026-10-09: home hero, levend netwerk + naam, status en knoppen ---------- */
.hero--home .net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%), linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.6) 35%, #000 68%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 78%, transparent 100%), linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.6) 35%, #000 68%); mask-composite: intersect; }
.hero--home .hero__glow { top: 26%; }
.hero--home .hero__inner { padding-top: 8.5rem; padding-bottom: 9rem; }
.hero__top { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-bottom: 2.25rem; }
.hero__name { display: flex; align-items: center; gap: 1rem; font-size: .78rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: #fff; }
.hero__name::before { content: ""; width: 2.5rem; height: 1px; background: var(--grad); }
.open { display: inline-flex; align-items: center; gap: .6rem; padding: .38rem .85rem .38rem .75rem; border: 1px solid rgba(58,168,255,.35); border-radius: 999px; background: rgba(31,123,242,.08);
  font-size: .7rem; font-weight: 500; letter-spacing: .08em; color: #cfe6ff; }
.open i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); }
.open i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--sky); animation: ping 2.6s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(3); opacity: 0; } }
.hero--home .hero__sub { margin-top: 2rem; color: rgba(255,255,255,.86); font-size: clamp(1.05rem, 1.5vw, 1.25rem); letter-spacing: 0; max-width: 40rem; }
.hero__cta { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .9rem; }
.btn { display: inline-flex; align-items: center; gap: .7rem; padding: .95rem 1.6rem; border-radius: 999px; font-size: .8rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #fff; transition: transform .3s var(--ease), box-shadow .3s, background .3s, border-color .3s; }
.btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.btn--primary { background: var(--grad); box-shadow: 0 8px 30px -10px rgba(58,120,255,.7); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(58,120,255,.85); }
.btn--ghost { border: 1px solid rgba(255,255,255,.32); background: rgba(23,23,29,.35); }
.btn--ghost:hover { border-color: #fff; transform: translateY(-2px); }
.nav__cta { font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; padding: .7rem 1.2rem; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; transition: border-color .3s, background .3s; }
.nav__cta:hover { border-color: #fff; background: rgba(255,255,255,.06); }
@media (max-width: 600px) {
  .nav__cta { display: none; }
  .hero--home { align-items: flex-start; }
  .hero--home .hero__inner { padding-top: 7.2rem; padding-bottom: 8rem; }
  .hero__top { flex-direction: column; align-items: flex-start; gap: .9rem; margin-bottom: 1.6rem; }
  .hero__name { font-size: .74rem; letter-spacing: .2em; }
  .hero--home .hero__sub { margin-top: 1.4rem; }
  .hero__cta { margin-top: 2rem; }
  .btn { padding: .9rem 1.35rem; font-size: .74rem; }
  .hero--home .net { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
}
@media print { .nav__cta, .hero__cta, .open i::after { display: none !important; } }

/* ---------- sections ---------- */
.section { position: relative; padding: var(--section) 0; }
.about { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
.about .grid-2 { align-items: start; }
.about__body { padding-top: 4.1rem; max-width: 34rem; }
.about__mgmt { color: #fff; border-left: 1px solid var(--magenta); padding-left: 1.4rem; margin: 0 0 1.5rem; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: clamp(3.5rem, 6.5vw, 6rem); }
.stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ring { position: relative; width: clamp(9.5rem, 13.5vw, 12.25rem); aspect-ratio: 1; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring circle { fill: none; stroke-width: 1.4; }
.ring__track { stroke: rgba(255,255,255,.1); }
.ring__bar { stroke: rgba(255,255,255,.72); stroke-linecap: round; stroke-dasharray: 578.05; stroke-dashoffset: 578.05; transition: stroke-dashoffset 2.2s var(--ease); }
.ring--grad .ring__bar { stroke: var(--sky); }
.ring__num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--sans); font-weight: 300; font-size: clamp(2.3rem, 3.4vw, 3.1rem); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ring__num > span { display: contents; }
.ring__num--accent { color: var(--sky); }
.stat figcaption { margin-top: 1.6rem; max-width: 15rem; font-size: .88rem; line-height: 1.55; color: var(--ink-3); }

.facts { margin-top: clamp(3.5rem, 6vw, 5.5rem); }
.facts dl { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.facts dl > div { padding: 1.75rem 2rem 0 0; }
.facts dt { font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .5rem; }
.facts dd { font-family: var(--serif); font-size: 1.3rem; font-weight: 300; }

/* ---------- featured product ---------- */
.featured { background: radial-gradient(760px 560px at 84% 460px, rgba(62,50,140,.42) 0%, transparent 75%), var(--bg-2); overflow: hidden; }
.featured .wave { height: 820px; bottom: auto; opacity: .9; }
.tf__head { align-items: end; }
.line--sub > span { font-size: .38em; letter-spacing: 0; font-style: italic; color: var(--lavender); padding-top: .7em; display: inline-block; }
.tf__intro { max-width: 34rem; padding-bottom: .4rem; }
.tf__intro p:not(.lead) + p { margin-top: 1rem; }

.tf__numbers { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(3.5rem, 6.5vw, 6rem); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.big { padding: clamp(2.5rem, 5vw, 4.5rem) 0; display: flex; flex-direction: column; gap: 1rem; }
.big + .big { padding-left: clamp(2rem, 5vw, 5rem); border-left: 1px solid var(--line); }
.big__num { font-family: var(--sans); font-weight: 200; font-size: clamp(4.2rem, 11vw, 10rem); line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.big__num--accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.big__label { font-size: .75rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2); }
/* four equal stat tiles: 4 across above 1024px, 2x2 below; one font size and one padding for all tiles */
.tf__numbers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tf__numbers .big, .tf__numbers .big + .big { padding: clamp(1.8rem, 3.4vw, 3.2rem) clamp(.8rem, 1.6vw, 1.6rem); gap: .9rem; min-width: 0; justify-content: flex-start; }
.tf__numbers .big + .big { border-left: 1px solid var(--line); }
.tf__numbers .big__num { display: inline-block; align-self: flex-start; white-space: nowrap; font-size: clamp(1.6rem, 3.7vw, 3.55rem); line-height: 1; letter-spacing: -.03em; padding-right: .1em; }
.tf__numbers .big__label { line-height: 1.5; }
.tf__numbers .big:nth-child(3) { transition-delay: .3s; }
.tf__numbers .big:nth-child(4) { transition-delay: .45s; }
@media (max-width: 1024px) {
  .tf__numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tf__numbers .big:nth-child(3) { border-left: 0; }
  .tf__numbers .big:nth-child(n+3) { border-top: 1px solid var(--line); }
  .tf__numbers .big__num { font-size: clamp(1.5rem, 7vw, 4.4rem); }
}
@media (max-width: 600px) {
  .tf__numbers .big, .tf__numbers .big + .big { padding: 1.5rem .8rem; }
  .tf__numbers .big__label { letter-spacing: .14em; }
}
/* product title: generic name, top-aligned with the intro text */
.tf__head { align-items: start; }
.h2--product { font-size: clamp(2.3rem, 4.3vw, 4.3rem); line-height: 1.04; hyphens: manual; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: clamp(2.75rem, 5vw, 4.5rem); background: var(--line); border: 1px solid var(--line); }
.card { background: var(--bg-2); padding: clamp(2rem, 3vw, 2.8rem); min-height: 19rem; display: flex; flex-direction: column; transition: background .5s var(--ease); position: relative; }
.card::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--grad); transition: width .7s var(--ease); }
.card:hover { background: #1d1c26; }
.card:hover::before { width: 100%; }
.card__icon { width: 2.9rem; height: 2.9rem; fill: none; stroke: var(--sky); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 2.6rem; }
.card__icon .fill { fill: var(--sky); stroke: none; }
.card h3 { font-family: var(--serif); font-weight: 300; font-size: 1.6rem; line-height: 1.15; margin: 0 0 .8rem; }
.card p { font-size: .95rem; line-height: 1.6; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.chips li { font-size: .72rem; font-weight: 400; letter-spacing: .06em; padding: .38rem .8rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: var(--ink-2); }

.tf__modes { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: clamp(2.75rem, 4.5vw, 4rem); }
.mode { display: flex; flex-direction: column; align-items: center; gap: .9rem; flex: 0 0 auto; }
.mode svg { width: 4rem; height: 2rem; fill: none; stroke: rgba(255,255,255,.8); stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; }
.mode span { font-size: .66rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.mode__line { flex: 1; height: 1px; margin-bottom: 1.6rem; background: repeating-linear-gradient(90deg, rgba(58,168,255,.6) 0 4px, transparent 4px 10px); background-size: 20px 1px; animation: flow 1.4s linear infinite; }
@keyframes flow { to { background-position: 20px 0; } }

.tf__closing { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 6vw, 6rem); margin-top: clamp(4rem, 7vw, 6.5rem); align-items: start; }
.statement { font-family: var(--serif); font-weight: 300; font-size: clamp(2.5rem, 4.8vw, 4.3rem); line-height: 1.02; letter-spacing: -.02em; color: #fff; }
.tf__role { border-left: 1px solid var(--magenta); padding-left: clamp(1.5rem, 3vw, 2.5rem); max-width: 34rem; }
.tf__role p:last-child { font-size: 1.05rem; }

/* ---------- career ---------- */
.career { background: var(--bg); }
.career__intro { max-width: 30rem; margin-bottom: .6rem; color: var(--ink-2); }
.timeline { margin-top: clamp(3rem, 6vw, 5rem); position: relative; }
.tl { display: grid; grid-template-columns: 15rem 1fr; gap: 2rem; padding: 3rem 0; border-top: 1px solid var(--line); position: relative; }
.tl:last-child { border-bottom: 1px solid var(--line); }
.tl::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--grad); transition: width 1.2s var(--ease) .2s; }
.tl.is-in::before { width: 15rem; }
.tl__when { font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--sky); padding-top: .55rem; font-variant-numeric: tabular-nums; }
.tl h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.15; }
.tl__org { margin: .5rem 0 1.4rem; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; }
.tl__alt { display: block; font-size: .62em; font-style: italic; color: var(--lavender); margin-top: .35rem; }
.tl__tags { display: flex; flex-wrap: wrap; gap: .45rem; margin: -.2rem 0 1.5rem; }
.tl__tags li { font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: .38rem .75rem; border: 1px solid rgba(58,168,255,.35); border-radius: 999px; color: #cfe6ff; background: rgba(58,168,255,.06); }
.tl__list { display: grid; gap: .55rem; max-width: 46rem; }
.tl__list li { position: relative; padding-left: 1.6rem; color: var(--ink-2); font-size: .98rem; line-height: 1.6; }
.tl__list li::before { content: ""; position: absolute; left: 0; top: .8em; width: .7rem; height: 1px; background: rgba(255,255,255,.4); }
.tl--early .tl__when { color: var(--ink-3); }
.early { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: 1.8rem; }
.early > div { display: flex; flex-direction: column; gap: .3rem; }
.early span { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: .3rem; }
.early strong { font-weight: 400; font-size: 1rem; color: #fff; line-height: 1.4; }
.early em { font-style: normal; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.early p { font-size: .9rem; line-height: 1.55; margin-top: .5rem; }

/* ---------- leadership ---------- */
.leadership { background: linear-gradient(180deg, var(--bg) 0%, #1a1a24 100%); }
.lead-intro { margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 50rem; font-family: var(--serif); font-weight: 300; font-size: clamp(1.45rem, 2.3vw, 2rem); line-height: 1.35; letter-spacing: -.005em; color: #fff; border-left: 1px solid var(--magenta); padding-left: clamp(1.25rem, 3vw, 2.25rem); }
.principles { margin-top: clamp(2.75rem, 5vw, 4.5rem); }
.principle { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); padding: 3rem 0; align-items: start; }
.principle + .principle { border-top: 1px solid var(--line); }
.principle h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: -.01em; padding-left: clamp(0rem, 4vw, 3.5rem); }
.principle p { max-width: 30rem; padding-top: .5rem; }

.capabilities { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); margin-top: clamp(2.25rem, 4vw, 3.25rem); padding: clamp(2.5rem, 4vw, 3.5rem); border: 1px solid var(--line); background: linear-gradient(135deg, rgba(58,168,255,.04), rgba(110,92,240,.05)); }
.chips--lg li { font-size: .82rem; padding: .55rem 1rem; letter-spacing: .02em; color: rgba(255,255,255,.85); transition: border-color .3s, color .3s; }
.chips--lg li:hover { border-color: var(--sky); color: #fff; }
.cap-col--side { display: grid; gap: 2.5rem; align-content: start; }
.langs { font-family: var(--serif); font-size: 1.5rem; line-height: 1.5; color: #fff; font-weight: 300; }
.langs span { font-family: var(--sans); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-left: .6rem; }
.capabilities .chips { margin-top: 0; }

/* ---------- contact ---------- */
.contact { background: var(--bg-2); overflow: hidden; padding-bottom: clamp(5.5rem, 10vw, 9rem); }
.contact .wave { opacity: .85; }
.contact__links { display: flex; flex-wrap: wrap; gap: 3rem; margin-top: 4rem; }
.link-cta { position: relative; display: inline-block; padding: 1.15rem 2.2rem; font-size: .72rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }
.link-cta::before, .link-cta::after { content: ""; position: absolute; height: 1px; width: 62%; transition: transform .6s var(--ease); }
.link-cta::before { top: 0; right: 0; background: var(--blue-2); }
.link-cta::after { bottom: 0; left: 0; background: var(--sky); }
.link-cta:hover::before { transform: translateX(-38%); }
.link-cta:hover::after { transform: translateX(38%); }
.contact__meta { margin-top: 3.5rem; display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; font-size: .95rem; color: var(--ink-3); }
.contact__meta a { color: var(--ink-2); border-bottom: 1px solid rgba(255,255,255,.2); transition: color .3s, border-color .3s; }
.contact__meta a:hover { color: #fff; border-color: #fff; }

/* ---------- footer ---------- */
.footer { background: #070708; padding: 4.5rem 0 2.5rem; }
.footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; align-items: start; }
.footer__nav { display: grid; gap: .7rem; font-size: .88rem; color: var(--ink-2); }
.footer__nav a:hover { color: #fff; }
.footer__base::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: rgba(255,255,255,.08); }
.footer__base { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 4.5rem; padding-top: 1.75rem; font-size: .74rem; letter-spacing: .08em; color: var(--ink-3); }

/* ---------- reveal animations ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal-lines .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.reveal-lines .line > span { display: inline-block; }
.js .reveal-lines .line > span { transform: translateY(110%); transition: transform 1.2s var(--ease); }
.js .reveal-lines.is-in .line > span { transform: none; }
.js .reveal-lines.is-in .line:nth-child(2) > span { transition-delay: .1s; }
.js .reveal-lines.is-in .line:nth-child(3) > span { transition-delay: .2s; }
.js .reveal-lines.is-in .line:nth-child(4) > span { transition-delay: .3s; }
.js .reveal-lines.is-in .line:nth-child(5) > span { transition-delay: .4s; }
.stats .stat:nth-child(2), .cards .card:nth-child(3n+2) { transition-delay: .12s; }
.stats .stat:nth-child(3), .cards .card:nth-child(3n) { transition-delay: .24s; }
.stats .stat:nth-child(4) { transition-delay: .36s; }
.tf__numbers .big:nth-child(2) { transition-delay: .15s; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .tl { grid-template-columns: 11rem 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 4rem; }
  .facts dl { grid-template-columns: repeat(2, 1fr); }
  .facts dl > div { padding-bottom: 1.5rem; }
  .tl.is-in::before { width: 11rem; }
}
@media (max-width: 820px) {
  body { font-size: 1rem; }
  .grid-2, .tf__closing, .capabilities, .principle { grid-template-columns: 1fr; }
  .grid-2 { gap: 2.5rem; align-items: start; }
  .about__body { padding-top: 0; }
  .principle { gap: 1rem; padding: 2.4rem 0; }
  .principle h3 { padding-left: 0; }
  .stats { grid-template-columns: 1fr; gap: 2.5rem; }
  .stat { flex-direction: row; text-align: left; gap: 1.75rem; }
  .ring { width: 8.5rem; flex: 0 0 auto; }
  .ring__num { font-size: 2.2rem; }
  .stat figcaption { margin-top: 0; font-size: .92rem; }
  .hero .eyebrow { letter-spacing: .16em; }
  .facts dl { grid-template-columns: 1fr; }
  .facts dl > div { padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
  .tl { grid-template-columns: 1fr; gap: .75rem; padding: 2.4rem 0; }
  .tl.is-in::before { width: 5rem; }
  .tl__when { padding-top: 0; }
  .early { grid-template-columns: 1fr; gap: 1.8rem; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__inner .brand { grid-column: 1 / -1; }
  .tf__modes { flex-wrap: wrap; justify-content: center; gap: 2rem 2.2rem; }
  .mode__line { display: none; }
  .hero__glow { width: 90vw; height: 90vw; right: -30vw; top: 10%; }
}
@media (max-width: 600px) {
  .brand__name { display: none; }
  .nav__right { gap: 1.1rem; }
  .lang { gap: .4rem; font-size: .64rem; letter-spacing: .14em; }
  .brand--footer .brand__name { display: inline; }
  .brand__mark { width: 2.6rem; height: 2.6rem; font-size: 1.1rem; }
  .cards { grid-template-columns: 1fr; }
  .card { min-height: 0; }
  .hero__inner { padding-bottom: 9rem; }
  .contact__links { gap: 1.5rem; }
  .link-cta { padding: 1rem 1.6rem; }
  .capabilities { padding: 1.75rem 1.4rem; }
  .hero .eyebrow::before { display: none; }
  .hero__title { font-size: 2.55rem; }
  .hero__title .line, .hero__title .line > span { display: inline; }
  .js .hero__title .line > span { transform: none; }
  .js .hero__title { opacity: 0; transform: translateY(20px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
  .js .hero__title.is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .reveal-lines .line > span { opacity: 1; transform: none; }
}

/* ---------- link to technical deep-dive ---------- */
.tf__deep { margin-top: clamp(3rem, 5vw, 4.5rem); padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--line); background: linear-gradient(120deg, rgba(58,168,255,.07), rgba(91,78,240,.1)); display: flex; align-items: center; justify-content: space-between; gap: 2rem 3rem; flex-wrap: wrap; position: relative; }
.tf__deep::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--grad); }
.tf__deep .label--plain { margin-bottom: .6rem; color: var(--sky); }
.tf__deep-p { max-width: 38rem; font-size: 1.1rem; color: #fff; }
.tf__deep .link-cta { white-space: nowrap; }

/* ---------- technical deep-dive page ---------- */
.hero--sub { min-height: 78vh; min-height: 78svh; }
.hero--sub .hero__inner { padding-top: 10rem; padding-bottom: 6rem; }
.back-link { display: inline-block; margin-bottom: 3rem; font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: .35rem; transition: color .3s, border-color .3s; }
.back-link:hover { color: #fff; border-color: var(--sky); }
.stack { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
.stack__head { align-items: end; }
.note { color: #fff; border-left: 1px solid var(--magenta); padding-left: 1.4rem; max-width: 34rem; }
.cards--stack .card { min-height: 0; }
.tech__cat { font-size: .66rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sky); margin-bottom: 1.1rem; }
.card.tech h3 { font-size: 1.75rem; }
.tech__role { margin-top: auto; padding-top: 1.4rem; display: flex; flex-direction: column; gap: .2rem; }
.card.tech p:not(.tech__cat):not(.tech__role) { margin-bottom: 1.4rem; }
.tech__role span { font-size: .64rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 1rem; }
.tech__role b { font-weight: 400; color: #fff; font-size: .98rem; line-height: 1.45; }
.tech-end { padding-top: clamp(3.5rem, 6vw, 5.5rem); padding-bottom: clamp(5rem, 8vw, 7.5rem); }
.tech-end .contact__links { margin-top: 0; }
@media (max-width: 820px) {
  .hero--sub { min-height: 0; }
  .hero--sub .hero__inner { padding-top: 8rem; padding-bottom: 5rem; }
  .tf__deep .link-cta { white-space: normal; }
}

/* ---------- insights (main page card) ---------- */
.insights { background: linear-gradient(180deg, #1a1a24 0%, var(--bg-2) 100%); }
.leadership + .insights { padding-top: 0; }
.caps { background: var(--bg-2); padding-top: 0; }
.article-card { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "meta meta" "title intro" "sub intro" "cta intro"; column-gap: clamp(2rem, 6vw, 6rem); margin-top: clamp(2.25rem, 4vw, 3.25rem); padding: clamp(2rem, 4vw, 3.5rem); border: 1px solid var(--line); background: var(--bg-3); position: relative; transition: background .5s var(--ease), border-color .5s; }
.article-card::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--grad); transition: width .7s var(--ease); }
.article-card:hover { background: #26262f; border-color: rgba(255,255,255,.16); }
.article-card:hover::before { width: 100%; }
.article-card__meta { grid-area: meta; display: flex; gap: .7rem; font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sky); margin-bottom: 1.6rem; }
.article-card__title { grid-area: title; font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.06; letter-spacing: -.012em; }
.article-card__sub { grid-area: sub; margin-top: 1rem; font-family: var(--serif); font-style: italic; font-size: 1.25rem; line-height: 1.4; color: var(--lavender); }
.article-card__intro { grid-area: intro; align-self: end; max-width: 32rem; }
.article-card__cta { grid-area: cta; margin-top: 2rem; align-self: end; font-size: .72rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: #fff; }
.article-card:hover .article-card__cta { color: var(--sky); }

/* ---------- article page ---------- */
.hero--article .hero__title { font-size: clamp(2.6rem, 5.6vw, 5rem); }
.hero__sub--lg { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2vw, 1.6rem); color: var(--lavender); letter-spacing: 0; }
.article { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); padding-top: clamp(3rem, 6vw, 5rem); }
.article .wrap > * { max-width: 44rem; margin-left: auto; margin-right: auto; }
.article__kicker { font-family: var(--serif); font-weight: 300; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.2; color: #fff; padding-bottom: clamp(2rem, 4vw, 3rem); margin-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.article__body p { font-size: 1.08rem; line-height: 1.8; color: rgba(255,255,255,.8); margin-bottom: 1.35rem; }
.article__h { font-family: var(--serif); font-weight: 300; font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.15; color: #fff; margin: 3.2rem 0 1.2rem; }
.article__h::before { content: ""; display: block; width: 2.5rem; height: 1px; background: var(--grad); margin-bottom: 1.2rem; }
.pullquote { margin: 2.6rem 0; padding: .3rem 0 .3rem clamp(1.25rem, 3vw, 2.25rem); border-left: 1px solid var(--magenta); }
.article__body .pullquote p { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.25; color: #fff; margin: 0; }
.lessons { margin-top: clamp(2.5rem, 5vw, 4rem); padding: clamp(1.75rem, 4vw, 2.75rem); border: 1px solid var(--line); background: linear-gradient(120deg, rgba(58,168,255,.07), rgba(91,78,240,.1)); position: relative; }
.lessons::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--grad); }
.lessons .label--plain { color: var(--sky); margin-bottom: 1.4rem; }
.lessons ol { display: grid; gap: 1.1rem; }
.lessons li { display: grid; grid-template-columns: 2.6rem 1fr; align-items: baseline; }
.lessons .num { font-size: .72rem; font-weight: 500; letter-spacing: .2em; color: var(--sky); }
.lessons li p { color: #fff; font-size: 1.02rem; line-height: 1.55; }
.article__sub { margin-top: 1.2rem; font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--lavender); }
.label__meta { color: var(--ink-3); }
.article-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.article-cards .article-card { margin-top: 0; grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr auto; grid-template-areas: "meta" "title" "sub" "intro" "cta"; }
.article-cards .article-card__title { font-size: clamp(1.9rem, 2.8vw, 2.6rem); }
.article-cards .article-card__intro { margin-top: 1.5rem; align-self: start; }
.article-cards--3 { grid-template-columns: repeat(3, 1fr); }
.article-cards--3 .article-card { padding: clamp(1.75rem, 2.6vw, 2.5rem); }
.article-cards--3 .article-card__title { font-size: clamp(1.7rem, 2.2vw, 2.15rem); }
.article-cards--3 .article-card__sub { font-size: 1.1rem; }
@media screen and (max-width: 1100px) and (min-width: 821px) {
  .article-cards--3 { grid-template-columns: 1fr 1fr; }
  .article-cards--3 .article-card:last-child { grid-column: 1 / -1; }
}
.article__list { margin: 0 0 1.6rem; padding: 1.4rem 0 1.4rem clamp(1.25rem, 3vw, 2rem); border-left: 1px solid var(--line); display: grid; gap: .8rem; list-style: none; }
.article__list li { position: relative; padding-left: 1.6rem; }
.article__list li::before { content: ""; position: absolute; left: 0; top: .78em; width: .8rem; height: 1px; background: var(--grad); }
.article__body .article__list p { margin: 0; color: #fff; font-size: 1.05rem; line-height: 1.6; }
@media (max-width: 820px) {
  .article-card { grid-template-columns: 1fr; grid-template-areas: "meta" "title" "sub" "intro" "cta"; }
  .article-card__intro { margin-top: 1.5rem; }
  .article-cards { grid-template-columns: 1fr; }
}

/* ---------- print-only table of contents (hidden on screen) ---------- */
.print-toc { display: none; }

/* ---------- print / PDF ---------- */
@page { size: A4; margin: 12mm 0; background: #1c1c23; }
@page :first { margin: 0; }
@media print {
  html, body { background: #1c1c23 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .nav, .menu, .scroll-cue, .skip, .hero__glow { display: none !important; }
  .is-final *, .is-final *::before, .is-final *::after { transition: none !important; animation: none !important; }
  .js .reveal, .js .reveal-lines .line > span, .js .hero__title { opacity: 1 !important; transform: none !important; }
  :root { --section: 5.5rem; }
  .section, .about, .career, .featured, .leadership, .contact { background: transparent; }
  .featured { background: radial-gradient(760px 560px at 84% 460px, rgba(62,50,140,.42) 0%, transparent 75%); }
  .hero { min-height: 0; height: var(--page-h, 100vh); display: flex; flex-direction: column; justify-content: center; break-after: page; }
  .hero__inner { padding-top: 0; padding-bottom: 0; flex: 0 0 auto; }
  .print-toc { display: block; position: relative; z-index: 2; margin-top: 6rem; }
  .print-toc ol { display: grid; grid-template-columns: repeat(5, auto); justify-content: start; gap: .5rem 3rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
  .print-toc a { display: inline-flex; align-items: baseline; gap: .7rem; font-family: var(--serif); font-size: 1.35rem; font-weight: 300; color: #fff; }
  .print-toc .num { font-family: var(--sans); font-size: .66rem; letter-spacing: .2em; color: var(--sky); font-weight: 500; }
  .print-toc b { font-weight: 300; }
  .print-toc__contact { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; font-size: .9rem; color: var(--ink-3); }
  .print-toc__contact a { color: var(--ink-2); border-bottom: 1px solid rgba(255,255,255,.2); }
  .about, .career, .featured, .leadership { break-before: page; }
  .stack { break-before: page; background: transparent; }
  .stack .stack__head { break-inside: avoid; break-after: avoid; }
  .section.stack { padding-top: 2rem; padding-bottom: 0; }
  .stack .cards--stack { margin-top: 1.4rem; gap: .6rem; grid-template-columns: repeat(4, 1fr); }
  .cards--stack .card { padding: .95rem 1.05rem .9rem; }
  .cards--stack .card h3 { font-size: 1.4rem; margin-bottom: .4rem; }
  .stack .stack__head .h2 { font-size: 3.2rem; }
  .stack .card.tech p:not(.tech__cat):not(.tech__role) { font-size: .8rem; line-height: 1.38; margin-bottom: .35rem; }
  .stack .card.tech .tech__role b { font-size: .8rem; line-height: 1.35; }
  .stack .card.tech .tech__cat { margin-bottom: .35rem; }
  .cards--stack .card h3 { margin-bottom: .3rem; }
  .card.tech .tech__role { margin-top: .6rem; padding-top: .6rem; }
  .card.tech p:not(.tech__cat):not(.tech__role) { margin-bottom: .5rem; font-size: .86rem; line-height: 1.45; }
  .tech__cat { margin-bottom: .5rem; }
  .tech__role { padding-top: .3rem; }
  .tech__role b { font-size: .9rem; }
  .tech__role span { padding-top: .55rem; }
  .tf__deep { break-inside: avoid; margin-top: 3.5rem; }
  .print-toc ol { grid-template-columns: repeat(4, auto); }
  .insights--print { background: transparent; padding: 3.5rem 0 0; }
  .section.caps { break-before: page; padding: 2rem 0 1.5rem; }
  .caps + .featured { break-before: auto; }
  .section.caps + .featured { padding-top: 3rem; }
  .caps .h2 { break-after: avoid; font-size: 3rem; }
  .caps .capabilities { margin-top: 1.75rem; }
  .insights--print .h2 { font-size: 3.2rem; }
  .section.insights--index { padding: 3.5rem 0 0; }
  .insights--index .article-cards { margin-top: 1.6rem; gap: 1.25rem; }
  .insights--index .article-card { padding: 1.4rem 1.8rem; grid-template-rows: auto auto auto auto; grid-template-areas: "meta" "title" "sub" "cta"; break-inside: avoid; }
  .insights--index .article-card__meta { margin-bottom: .9rem; }
  .insights--index .article-card__title { font-size: 1.6rem; }
  .insights--index .article-cards--3 { grid-template-columns: repeat(3, 1fr); }
  .insights--index .article-card__sub { font-size: 1.05rem; margin-top: .6rem; }
  .insights--index .article-card__cta { margin-top: 1.1rem; }
  .section.insights--art { padding: 3.2rem 0 0; }
  .section.article { padding: 2.2rem 0 0; }
  .insights--art .label { margin-bottom: 1rem; }
  .section#read-art2 { padding-top: 3.5rem; border-top: 1px solid var(--line); margin-top: 2.5rem; }
  .insights--art .h2, .insights--art .article__sub { break-after: avoid; }
  .insights--art .label { break-after: avoid; }
  .section#read-art3 { break-before: page; border-top: 0; margin-top: 0; padding-top: 1.6rem; }
  #read-art3 .h2 { font-size: 2.8rem; }
  #read-art3 .article__sub { margin-top: .7rem; font-size: 1.3rem; }
  .section#article-talen { padding-top: 1.4rem; }
  #article-talen .article__kicker { font-size: 1.5rem; padding-bottom: .9rem; margin-bottom: 1.1rem; }
  #article-talen .article__body p { font-size: .85rem; line-height: 1.5; margin-bottom: .55rem; }
  #article-talen .article__h { font-size: 1.3rem; margin: 1.1rem 0 .5rem; }
  #article-talen .article__h::before { margin-bottom: .5rem; }
  #article-talen .pullquote { margin: .8rem 0; }
  #article-talen .article__body .pullquote p { font-size: 1.25rem; line-height: 1.25; margin: 0; }
  #article-talen .lessons { margin-top: 1rem; padding: 1rem 1.5rem; }
  #article-talen .lessons li p { font-size: .88rem; }
  .article__list { margin: 0 0 .8rem; padding: .5rem 0 .5rem 1.2rem; gap: .35rem; break-inside: avoid; }
  .article__list li { padding-left: 1.2rem; }
  .article__body .article__list p { font-size: .88rem; line-height: 1.5; }
  .article { background: transparent; padding: 1.8rem 0 0; }
  .article .wrap > * { max-width: none; }
  .article__kicker { font-size: 1.7rem; padding-bottom: 1.2rem; margin-bottom: 1.4rem; }
  .article__body { column-count: 2; column-gap: 3rem; }
  .article__body p { font-size: .88rem; line-height: 1.55; margin-bottom: .7rem; }
  .article__h { font-size: 1.45rem; margin: 1.5rem 0 .7rem; break-after: avoid; break-inside: avoid; }
  .article__h::before { margin-bottom: .7rem; }
  .pullquote { margin: 1.2rem 0; break-inside: avoid; }
  .article__body .pullquote p { font-size: 1.45rem; }
  .lessons { margin-top: 1.4rem; padding: 1.2rem 1.6rem; break-inside: avoid; }
  .lessons ol { gap: .35rem; }
  .lessons .label--plain { margin-bottom: .8rem; }
  .lessons li p { font-size: .92rem; }
  .contact { padding-top: 4rem; }
  .section { padding: var(--section) 0; }
  .stats, .stat, .facts, .tl, .card, .big, .tf__numbers, .tf__modes, .tf__closing, .principle, .capabilities, .grid-2, .h2, .footer, .contact__inner { break-inside: avoid; }
  .tl, .principle { padding: 2.2rem 0; }
  .timeline, .cards, .principles, .stats, .facts, .tf__numbers, .tf__closing, .capabilities { margin-top: 3.5rem; }
  .tf__closing { margin-top: 4rem; }
  .featured .tf__numbers, .featured .cards, .featured .tf__modes { margin-top: 2.5rem; }
  .featured .tf__closing { margin-top: 2.5rem; }
  .section.featured { padding-bottom: 1.5rem; }
  .section.featured { padding-top: 2.5rem; }
  .featured .tf__numbers, .featured .tf__modes { margin-top: 1.8rem; }
  .featured .tf__numbers .big, .featured .tf__numbers .big + .big { padding: 1.6rem 1.2rem; }
  .featured .tf__deep { margin-top: 2rem; }
  .contact { padding-bottom: 6rem; }
  a[href]::after { content: none !important; }
  .cards { background: transparent; border: 0; gap: 1rem; }
  .card { border: 1px solid var(--line); min-height: 0; }
  .contact { padding: 2.5rem 0 2.5rem; break-inside: avoid; }
  .contact .h2--xl { font-size: 3.8rem; }
  .contact__links { margin-top: 1.75rem; }
  .contact__meta { margin-top: 1.5rem; }
  .stack + .contact { break-before: page; padding-top: 4.5rem; }
  .stack + .contact .h2--xl { font-size: 4.6rem; }
  .principle { padding: 1.9rem 0; }
  .lead-intro { margin-top: 2rem; font-size: 1.6rem; }
  .leadership { padding-top: 3.5rem; }
  .leadership .principles { margin-top: 2rem; }
  .leadership .principle { padding: 1.35rem 0; }
  .capabilities { margin-top: 3rem; }
  .footer { padding: 2rem 0 .5rem; background: transparent; border-top: 1px solid var(--line); break-inside: avoid; }
  .big__num--accent { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #3d8bff; }
  .hero { background: radial-gradient(90% 80% at 80% 30%, #242238 0%, var(--bg) 60%); }
  .footer__base { margin-top: 1.5rem; }
  .footer__nav:first-of-type { grid-template-columns: repeat(2, auto); column-gap: 2.5rem; }
}

/* 2026-10-05: subtle in-text link (Over mij -> AI-artikel) */
.text-link { color: inherit; border-bottom: 1px solid var(--blue, #3b82f6); transition: color .3s, border-color .3s; }
.text-link:hover, .text-link:focus-visible { color: #fff; border-color: #fff; }
.about__body p:not(.lead):not(.about__mgmt) + p { margin-top: 1rem; }

/* ---------- 2026-10-05: Over mij portrait, duotone cut-out on a blueprint (photo proposal 3) ---------- */
.ph { margin: 0; position: relative; }
.ph--blue { --mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace; margin-top: 2rem; max-width: 34rem; outline: none; }
.ph--blue:focus-visible .bp { outline: 1px solid var(--sky); outline-offset: 4px; }
.bp { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(58,168,255,.18);
  background-color: rgba(31,123,242,.035);
  background-image:
    linear-gradient(rgba(58,168,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(58,168,255,.13) 1px, transparent 1px),
    linear-gradient(rgba(58,168,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(58,168,255,.055) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; background-position: -1px -1px; }
.bp::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 70% 60%, transparent 40%, rgba(23,23,29,.55) 100%); }
.bp__person { position: absolute; right: 10%; bottom: 0; height: 90%; width: auto; aspect-ratio: 900 / 849; z-index: 2; }
.bp__person img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .9s var(--ease); }
.bp__duo { filter: url(#rvs-duo); }
.bp__color { opacity: 0; }
@media (hover: hover) { .ph--blue:hover .bp__color { opacity: 1; } }
.ph--blue.is-color .bp__color { opacity: 1; }
.bp__wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.bp__wires path { fill: none; stroke: rgba(58,168,255,.55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bp__wires .flow { stroke: var(--sky); stroke-dasharray: 3 9; animation: bp-flow 1.6s linear infinite; }
@keyframes bp-flow { to { stroke-dashoffset: -24; } }
.bp__node { position: absolute; z-index: 3; left: 4%; transform: translateY(-50%); font-family: var(--mono); font-size: .68rem; letter-spacing: .02em; color: #fff; padding: .28rem .6rem; border: 1px solid rgba(58,168,255,.6); background: rgba(23,23,29,.85); white-space: nowrap; }
.bp__node::before { content: ""; display: inline-block; width: .38rem; height: .38rem; margin-right: .45rem; border-radius: 50%; background: var(--sky); vertical-align: .08em; }
.bp__node--b { top: 20%; } .bp__node--p { top: 40%; } .bp__node--i { top: 60%; } .bp__node--m { top: 80%; }
.bp__node--i::before, .bp__node--m::before { background: var(--lavender); }
.bp__port { position: absolute; z-index: 3; left: calc(46% - 5px); top: calc(78% - 5px); width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--sky); background: var(--bg); box-shadow: 0 0 0 4px rgba(58,168,255,.12); }
.bp__meta { position: absolute; z-index: 3; left: 4%; top: 5%; font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(192,201,223,.7); }
.bp__dim { position: absolute; z-index: 3; right: 1.2%; top: 9%; bottom: 3%; width: 1px; background: rgba(192,201,223,.45); }
.bp__dim::before, .bp__dim::after { content: ""; position: absolute; left: -4px; width: 9px; height: 1px; background: rgba(192,201,223,.7); }
.bp__dim::before { top: 0; } .bp__dim::after { bottom: 0; }
.bp__dim span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap; font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lavender); background: #1a1b24; padding: .1rem .5rem; }
/* draw the wires in when the figure is revealed */
.js .ph--blue .bp__wires path { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.6s var(--ease) .5s; }
.js .ph--blue.is-in .bp__wires path { stroke-dashoffset: 0; }
.js .ph--blue .bp__wires path.flow { stroke-dasharray: 3 9; stroke-dashoffset: 0; opacity: 0; transition: opacity .8s ease 1.9s; }
.js .ph--blue.is-in .bp__wires path.flow { opacity: 1; }
@media (max-width: 820px) {
  .ph--blue { margin-top: 2rem; }
  .bp { aspect-ratio: 4 / 3; }
  .bp__person { height: 84%; right: -1%; }
  .bp__node { font-size: .6rem; padding: .22rem .45rem; left: 3%; }
  .bp__meta { font-size: .52rem; left: 3%; }
  .bp__dim { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ph--blue .bp__wires path { stroke-dashoffset: 0; }
  .js .ph--blue .bp__wires path.flow { opacity: 1; }
}
/* print / PDF: a small full-colour cut-out under the heading, no blueprint */
@media print {
  .ph--blue { margin-top: 2.5rem; max-width: none; break-inside: avoid; }
  .bp { aspect-ratio: auto; height: 13.5rem; overflow: visible; border: 0; border-bottom: 1px solid var(--line); background: none; }
  .bp::after, .bp__wires, .bp__meta, .bp__node, .bp__port, .bp__dim, .bp__duo { display: none !important; }
  .bp__person { left: 0; right: auto; height: 100%; }
  .bp__color { opacity: 1 !important; }
}

/* ---------- 2026-10-05 photo-align variant A: heading top, figure fills the rest of the left column; figure bottom = bottom of the last paragraph ---------- */
@media (min-width: 821px) {
  .about .grid-2 { align-items: stretch; }
  .about__head { display: flex; flex-direction: column; container-type: inline-size; }
  /* longer AI paragraph: free space under label/title so the panel can grow; min-height keeps the four labels readable when the column is short */
  .about__head > .label { margin-bottom: 1rem; }
  .about__head .h2 { margin-bottom: 0.5rem; }
  .about__head .ph--blue { flex: 1 1 auto; min-height: 11rem; max-height: calc(100cqw * 9 / 16); margin-top: auto; }
  .about__head .bp { position: absolute; inset: 0; aspect-ratio: auto; }
  .about__head .bp__person { max-width: 60%; }
  .about__head .bp__person img { object-fit: contain; object-position: 50% 100%; }
}
@media (min-width: 821px) {
  /* the panel is lower here, so the nodes move down a little to clear the caption */
  .about__head .bp__node--b { top: 30%; } .about__head .bp__node--p { top: 48%; } .about__head .bp__node--i { top: 66%; } .about__head .bp__node--m { top: 84%; }
  .about__head .bp__port { top: calc(82% - 5px); }
  .about__head .bp__wires path:nth-child(1) { d: path("M24 30 H34 V84 M24 48 H34 M24 66 H34 M24 84 H34"); }
  .about__head .bp__wires path:nth-child(2) { d: path("M34 82 H46"); }
  .about__head .bp__wires path:nth-child(3) { d: path("M24 30 H34 V82 H46"); }
  .about__head .bp__wires path:nth-child(4) { d: path("M24 84 H34 V82 H46"); }
}