/* ============================================================
   BLUEPRINT KIT PARTS — the project's kit:* sections (blueprints.js)
   and the page view's set pieces. Moved out of lab.css on 2026-09-14,
   when the project lab split from the skill; the runtime loads it right
   after lab.css, so the cascade is unchanged.
   ============================================================ */

/* ---------- image-led service sections (2026-09-11) ----------
   kit:scope-bleed (I02), kit:phases-band (I17) and kit:why-split (I01) in
   blueprints.js: each photo shows what its section says, and the copy is
   cut to a heading and a short list: index lines, not cards. */
.idx-list { list-style: none; margin: var(--sp-6) 0 0; padding: 0; max-width: 34rem; border-top: 1px solid var(--hairline); }
.idx-list li {
  display: flex; align-items: baseline; gap: var(--sp-5); padding: var(--sp-4) 0; border-bottom: 1px solid var(--hairline);
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-size: var(--fs-h3, 1.5rem); line-height: 1.2; color: var(--fg);
}
.idx-list li span, .phase-row span { font: 500 var(--fs-small)/1 var(--font-body, inherit); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.phases-band .band { margin-top: var(--sp-7); }
.phase-row { list-style: none; margin: var(--sp-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-5); }
.phase-row li { padding-top: var(--sp-4); border-top: 1px solid var(--hairline); }
.phase-row span { display: block; margin-bottom: var(--sp-3); }
.phase-row b { display: block; font-weight: 600; line-height: 1.35; color: var(--fg); }
@media (max-width: 900px) { .phase-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); } }
.idx-list li > div > b { display: block; font: inherit; }
.idx-list li > div > small { display: block; margin-top: var(--sp-2); font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); }
/* kit:index: the same short index without a photo, beside its heading. */
.idx-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.idx-split .idx-list { margin-top: 0; max-width: none; }
@media (max-width: 900px) { .idx-split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } }

/* ---------- Hero stage: the night look (2026-09-11, the user's references) ----------
   One full-bleed photo in layers: the room (plate), a scrim toward the copy, the
   red waves (WebGL), the person cut-out, then the copy. Each layer drifts at its
   own speed on scroll and leans with the pointer (behaviours.js, Depth), so the
   waves pass behind the person and the scene has depth. */
.hero--stage { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  min-height: min(100svh, 940px); padding-block: calc(var(--header-h) + var(--sp-8)) var(--sp-9); }
.hero--stage-service { min-height: min(88svh, 800px); }
.stage { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.stage > * { position: absolute; }
.stage__plate { inset: -14% 0; }
.stage__plate img, .stage__person img { display: block; filter: var(--img-filter, saturate(.85)); }
.stage__plate img { width: 100%; height: 100%; object-fit: cover; }
.stage__scrim { inset: 0; background:
  linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 86%, transparent) 30%, color-mix(in srgb, var(--bg) 30%, transparent) 54%, transparent 72%),
  linear-gradient(0deg, var(--bg) 0%, transparent 24%); }
.stage__waves { inset: -10% 0; }
.stage__waves > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage__person { right: var(--person-x, 10%); bottom: -2%; height: var(--person-h, 90%); }
.stage__person img { height: 100%; width: auto; }
.hero__stage-copy { position: relative; }
.hero--stage h1 { max-width: 14ch; }
.hero--stage .lead { max-width: 32rem; margin-top: var(--sp-4); }
/* the hand-written line after the h1 (the live about hero's .v7-script, 2026-09-12) */
.hero__script { margin: clamp(14px, 1.4vw, 20px) 0 0; font: 600 clamp(20px, 1.9vw, 26px)/1.2 "Caveat", cursive; color: #ffd7e1; }
.hero--stage .hero__script + .lead { margin-top: clamp(12px, 1.2vw, 18px); }
.hero--stage .hero__acts { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--block-gap); }
.hero__contacts { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); list-style: none; margin: var(--sp-7) 0 0; padding: 0; font-size: var(--fs-small); color: var(--fg-muted); }
.hero__contacts :is(a, span) { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.hero__contacts a:hover { color: var(--fg); }
.hero__contacts svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* the motto: three small words at the right edge, a hairline beside, a red dash under */
.hero__motto { position: absolute; right: var(--gutter); top: 50%; translate: 0 -50%; margin: 0; z-index: 1;
  display: flex; flex-direction: column; gap: 6px; padding-left: var(--sp-4); border-left: 1px solid var(--hairline);
  font: 500 11px/1.5 var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--fg-muted); }
.hero__motto::after { content: ""; width: 24px; height: 2px; margin-top: var(--sp-3); background: var(--brand); }
@media (max-width: 900px) {
  .hero--stage { align-items: flex-end; min-height: 92svh; }
  .hero__motto { display: none; }
  .stage__person { right: -14%; height: 62%; bottom: auto; top: 6%; }
  .stage__scrim { background: linear-gradient(0deg, var(--bg) 34%, color-mix(in srgb, var(--bg) 70%, transparent) 58%, transparent 82%); }
}
/* the kit's .hero .wrap is a two-column grid; the stage's copy is one column */
.hero--stage .hero__stage-copy { display: block; }
.hero--stage .lead { margin-bottom: 0; }
.hero__motto { text-shadow: 0 1px 12px color-mix(in srgb, var(--bg) 85%, transparent); color: var(--fg); }
/* fit the first screen: a wider headline (fewer lines) and less padding */
.hero--stage { padding-block: calc(var(--header-h) + var(--sp-7)) var(--sp-8); }
.hero--stage h1 { max-width: 17ch; }
.hero__contacts { margin-top: var(--sp-6); }
/* the motto sits low on the right, clear of the waves' path (as in the references) */
.hero__motto { top: auto; bottom: var(--sp-9); translate: none; }
/* the plate lags the scroll at half the page's speed (data-depth-rate .5): more overscan */
.hero--stage .stage__plate { inset: -22% 0; }
/* the road CTA's traced 3D ribbon: the plate's own box, so the path maps 1:1. Never nest a
   [data-gl] host in the photo layer: wb-gl gives its canvas z-index -1, so it would paint under the photo */

/* ---------- Wissen hero: the book stack (round 6, 2026-09-12, the user's reference) ----------
   The hero stage's layers with the books in place of the person; the spine words are
   HTML over the blank spines, in the books' layer so they move with them. Each layer
   host isolates, so a wb-gl canvas (z-index -1) stays inside its own layer. */
.stage__waves, .stage__books { isolation: isolate; }
.hero--wissen .stage__plate img { object-position: 58% 50%; }
.stage__books { right: 10%; bottom: 6%; width: min(42vw, 700px); }

/* ---------- KI hero: the desk at dusk (2026-09-14, the user's reference) ----------
   One photo split into the room and the man with his desk (img/gen_ki.py), both in the
   same frame: the fore layer takes the plate's box and crop, so at rest they stack back
   into the photo, and the waves pass between them. */
/* The photo is 16:9 with the man at 58 %: little overscan (so it isn't zoomed) and the crop
   from the left, which puts him at about 64 % of the hero and keeps the first monitor in view.
   The scrim sits above the fore here (markup), so his chair side goes dark under the copy. */
.hero--ki { --ki-pos: 16% 50%; }
/* Out of bounds sideways as well (the user, 2026-09-16: moving the pointer right showed the
   fore layer's own right edge). The pointer leans the fore by up to 18px, the plate by 10px;
   both layers keep the same box, so they still stack back into one photo, and the scene sits
   a touch further right. */
.hero--ki :is(.stage__plate, .stage__fore) { inset: -8% -4% -8% -2%; }
.stage__fore { isolation: isolate; }
.stage__fore img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter, saturate(.85)); }
.hero--ki :is(.stage__plate, .stage__fore) img { object-position: var(--ki-pos); }
.hero--ki .hero__motto { display: none; }   /* the desk fills the motto's corner */
@media (max-width: 900px) {
  /* phones: the scene and its ribbon in a band at the top, the copy under it on the ground */
  .hero--ki { --ki-pos: 60% 50%; --ki-band: calc(var(--header-h) + 60vw); min-height: 0; padding-top: calc(var(--header-h) + 50vw); }
  .hero--ki :is(.stage__plate, .stage__fore, .stage__waves) { inset: 0 -4% auto -2%; height: var(--ki-band); }
}
/* the motto sits high on the right, clear of the stack (as in the reference) */
.hero--wissen .hero__motto { bottom: auto; top: calc(var(--header-h) + var(--sp-8)); }
.stage__books img { display: block; width: 100%; height: auto; filter: var(--img-filter, saturate(.85)); }
.stage__spines { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.stage__spines li { position: absolute; left: var(--x); top: var(--y); translate: 0 -50%; white-space: nowrap;
  font: 500 clamp(9px, .9vw, 14px)/1 var(--font-body); letter-spacing: .3em; text-transform: uppercase;
  color: color-mix(in srgb, var(--fg) 58%, transparent); }
.wissen__topics { max-width: 40rem; }
.wissen__search { display: flex; gap: var(--sp-3); align-items: end; max-width: 34rem; margin-top: var(--block-gap); }
.wissen__search .field { flex: 1; margin: 0; }
.wissen__topics { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: var(--sp-5) 0 0; padding: 0; }
.wissen__topics a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--hairline); border-radius: 999px;
  font-size: var(--fs-small); color: var(--fg-muted); text-decoration: none; background: color-mix(in srgb, var(--bg) 55%, transparent);
  transition: color .2s, border-color .2s; }
.wissen__topics a:is(:hover, :focus-visible) { color: var(--fg); border-color: color-mix(in srgb, var(--fg) 40%, transparent); }
.wissen__topics span { font-size: .85em; opacity: .7; }
.wissen__all { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--sp-5); color: var(--fg); font-weight: 600; text-decoration: none; }
.wissen-hit { margin: 0 0 var(--sp-5); font-size: var(--fs-small); color: var(--fg-muted); }
.wissen-hit button { font: inherit; color: var(--brand-ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

/* ---------- Wissen · onward (2026-09-14, the user's reference) ----------
   Three columns of one ruled card (no card in a card): a grey label, a title, the service
   pages as link rows; the arrow steps forward on hover or focus. One column on phones. */
.wis-on__head { max-width: 60rem; }   /* the heading on one line at desktop widths, as in the reference */
.wis-on__head h2 { margin-bottom: 0; }
.wis-on__head .lead { margin-top: var(--sp-4); }
.wis-on__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--sp-7);
  border: 1px solid var(--hairline); border-radius: var(--radius-card); }
.wis-on__col { padding: var(--sp-6); }
.wis-on__col + .wis-on__col { border-left: 1px solid var(--hairline); }
.wis-on__col h3 { margin: var(--sp-2) 0 var(--sp-5); font-size: var(--fs-h3); }
.wis-on__col ul { margin: 0; padding: 0; list-style: none; }
.wis-on__col a { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-block: 12px;
  border-top: 1px solid var(--hairline); color: var(--fg-muted); text-decoration: none; transition: color .2s; }
.wis-on__col a .arrow { flex: none; transition: translate .3s var(--ease-out); }
.wis-on__col a:is(:hover, :focus-visible) { color: var(--fg); }
.wis-on__col a:is(:hover, :focus-visible) .arrow { translate: 4px 0; }
@media (max-width: 900px) {
  .wis-on__grid { grid-template-columns: minmax(0, 1fr); }
  .wis-on__col { padding: var(--sp-5); }
  .wis-on__col + .wis-on__col { border-left: 0; border-top: 1px solid var(--hairline); }
}
@media (prefers-reduced-motion: reduce) { .wis-on__col a .arrow { transition: none; } }
@media (max-width: 900px) {
  /* phones: the stack on top, the copy under it (the copy is taller than the screen) */
  .hero--wissen { padding-top: calc(var(--header-h) + 50vw); }
  .stage__books { right: 6%; bottom: auto; top: calc(var(--header-h) + 4px); width: 68vw; }
  .stage__spines li { letter-spacing: .22em; }
  .stage__waves--front { display: none; }
  .wissen__search { flex-direction: column; align-items: stretch; }
}

/* ---------- About hero: the team in the studio (round 6 reference, round 7c photo) ----------
   The approved group photo split into layers (img/stage.py hero_layers): the empty room
   as the plate, then the back row and the front row, each its own layer and scroll speed;
   one ribbon behind the back row, a thin one between the rows. Both rows share one box
   (the photo's people crop), right-aligned so the faces stay clear of the copy. No fade at
   the bottom (the user, 2026-09-12): everyone stands full height down to the hero's edge.
   The back row is hero-back-fix-f2.webp (the user, round 9): the cut back row repaired by
   imagegen itself (hidden parts completed, the right man's proportions fixed), in the same
   1192×881 box as the front row. */
.stage__cast { top: auto; bottom: 0; right: var(--cast-r, 0px); width: var(--cast-w, 57%); aspect-ratio: 1192 / 881; isolation: isolate; }
.stage__cast img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: var(--img-filter, saturate(.85)); }
/* the team is the section's focus (the user, round 9): as tall as the hero allows, the heads just
   under the header (110px). Its width stops at 60% of the hero, and at the hero minus 440px, so
   the copy keeps its column. On wide screens --cast-r moves the team in from the right edge (up
   to 180px, only where the copy still has 660px) so the motto keeps its own strip beside the heads */
.hero--about { padding-bottom: calc(var(--sp-9) + 96px); container-type: inline-size;
  --cast-w: min(57cqw, 100cqw - 440px, (min(100svh, 940px) - 190px) * 1192 / 881);
  --cast-r: clamp(0px, min(100cqw - var(--cast-w) - 660px, var(--gutter) + 45px - var(--cast-w) * .07), 180px); }
/* ↑ the user, round 9: the motto stands above the right man's shoulder (his shoulder is ~7% in
   from the cast's right edge, the motto's middle ~45px in from the gutter) */
/* the ribbons follow the team, not the hero's height (the user, round 9: on tablets and laptops
   the top ribbon rode above the heads into the motto). The cast is --cast-w wide and .7391 of it
   tall; the waves' box is 1.6 cast heights (1.1826 widths), its foot .088 cast heights (.065
   widths) under the cast's, which puts the top ribbon (y .6) behind the back row's heads and
   the thin one (y .34) between the rows at every size */
.hero--about .stage__waves { inset: auto 0 calc(var(--cast-w) * -.065); height: calc(var(--cast-w) * 1.1826); }
.hero--about .hero__motto { bottom: auto; top: calc(var(--header-h) + var(--sp-8)); }
.hero__facts { position: absolute; inset: auto 0 0; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0;
  padding: var(--sp-5) max(var(--gutter), calc((100% - 1280px) / 2)); list-style: none; border-top: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(10px); }
.hero__facts li { display: grid; justify-items: center; gap: 2px; text-align: center; }
.hero__facts li + li { border-left: 1px solid var(--hairline); }
.hero__facts b { font: 600 clamp(22px, 2vw, 30px)/1.15 var(--font-head); color: var(--fg); }
.hero__facts span { font-size: var(--fs-small); color: var(--fg-muted); }
@media (max-width: 900px) {
  /* phones (the user, round 7c): the copy on top, the team at the bottom standing on the facts row, as on desktop
     (both rows in one box; they hold still together here, no pointer; room and ribbons still move) */
  .hero--about { --facts-h: 170px; padding-bottom: calc(var(--facts-h) + 66vw); }
  .stage__cast { bottom: calc(var(--facts-h) - 14vw); width: 100%; translate: none !important; }
  .hero--about .stage__waves { inset: auto 0 calc(var(--facts-h) - 20vw); height: 84vw; }   /* the ribbons stay with the team, off the copy */
  .hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-4); }
  .hero__facts li:nth-child(3) { border-left: 0; }
}

/* ---------- About: the live ueber-uns sections in the kit (round 6) ---------- */
.about-manifest__text { margin: var(--sp-5) 0 0; max-width: 30ch; font: 500 clamp(26px, 3.1vw, 44px)/1.28 var(--font-head); letter-spacing: -.01em; color: var(--fg); }
.about-manifest__text.is-live span { color: var(--fg-muted); transition: color .35s; }
.about-manifest__text.is-live span.is-on { color: var(--fg); }
.about-manifest__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); margin: var(--sp-8) 0 0; padding: var(--sp-5) 0 0;
  list-style: none; border-top: 1px solid var(--hairline); font-size: var(--fs-small); color: var(--fg-muted); }
.about-story__line { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); margin: var(--sp-8) 0 0; padding: var(--sp-6) 0 0; list-style: none; }
.about-story__line::before, .about-story__line::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--hairline); }
.about-story__line::after { height: 2px; top: -.5px; background: var(--brand); transform-origin: left; scale: 0 1; transition: scale 1.8s cubic-bezier(.22, .8, .24, 1); }
.about-story.is-in .about-story__line::after { scale: 1 1; }
.about-story__line li { position: relative; }
.about-story__line li::before { content: ""; position: absolute; top: calc(-1 * var(--sp-6) - 4px); left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--brand); }
.about-story__y { display: block; font: 600 clamp(36px, 4vw, 56px)/1 var(--font-head); color: var(--fg); letter-spacing: -.02em; }
.about-story__line h3 { margin: var(--sp-4) 0 var(--sp-2); font: 600 18px/1.3 var(--font-head); }
.about-story__line p { margin: 0; font-size: var(--fs-small); color: var(--fg-muted); }
.about-num__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.about-num__list li { display: grid; gap: var(--sp-2); padding: var(--sp-4) var(--sp-6); }
.about-num__list li:first-child { padding-left: 0; }
.about-num__list li + li { border-left: 1px solid var(--hairline); }
.about-num__list b { font: 600 clamp(48px, 6vw, 88px)/1 var(--font-head); color: var(--fg); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.about-num__list b i { font-style: normal; color: var(--brand-ink); }
.about-num__list li > span { color: var(--fg-muted); max-width: 24ch; }
.about-values__list { margin: var(--sp-8) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
/* centred, not on a shared baseline: the number is 13px against a 60px heading, so a
   baseline left both it and the description sitting at the top of the row (the user, 2026-09-16) */
.about-values__list li { display: grid; grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--sp-6); align-items: center; padding: var(--sp-7) 0; border-bottom: 1px solid var(--hairline); }
.about-values__n { font: 500 13px/1 var(--font-body); letter-spacing: .2em; color: var(--brand-ink); align-self: center; }
.about-values__list h3 { margin: 0; font: 600 clamp(32px, 4.2vw, 60px)/1.05 var(--font-head); letter-spacing: -.02em; }
.about-values__list p { margin: 0; color: var(--fg-muted); max-width: 44ch; }
.about-partners .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-5) var(--sp-8); }
.about-partners .eyebrow { margin: 0; }
.about-partners__list { flex: 1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-5) var(--sp-7); margin: 0; padding: 0; list-style: none; }
.about-partners__list li { font: 600 clamp(18px, 1.7vw, 24px)/1 var(--font-head); letter-spacing: -.01em; color: var(--fg-muted); }
.about-career__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--sp-8) var(--sp-9); align-items: start; }
.about-career__copy > p:not(.eyebrow) { color: var(--fg-muted); max-width: 46ch; margin-bottom: var(--block-gap); }
.about-career__photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); padding-bottom: var(--sp-7); }
.about-career__photos .photo { margin: 0; }
.about-career__photos .photo:nth-child(even) { translate: 0 var(--sp-7); }
.about-career__jobs { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-6) var(--sp-9); }
.about-career__claim { margin: 0; font: 600 clamp(24px, 2.6vw, 36px)/1.15 var(--font-head); letter-spacing: -.01em; }
.about-career__jobs ul { margin: var(--sp-4) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
.about-career__jobs a { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: var(--sp-5); align-items: center; padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--hairline); color: var(--fg); text-decoration: none; }
.about-career__job { display: grid; gap: 4px; }
.about-career__job b { font: 600 18px/1.3 var(--font-head); transition: color .2s; }
.about-career__jobs a:hover b { color: var(--brand); }
.about-career__jobs a span:not(.arrow) span, .about-career__jobs a > span:nth-child(2) { font-size: var(--fs-small); color: var(--fg-muted); }
@media (max-width: 900px) {
  .about-manifest__facts, .about-story__line { grid-template-columns: 1fr 1fr; row-gap: var(--sp-6); }
  .about-story__line li::before { display: none; }
  .about-num__list { grid-template-columns: 1fr; }
  .about-num__list li { padding-left: 0; }
  .about-num__list li + li { border-left: 0; border-top: 1px solid var(--hairline); }
  .about-values__list li { grid-template-columns: 1fr; gap: var(--sp-3); }
  .about-career__grid, .about-career__jobs { grid-template-columns: 1fr; }
  .about-career__jobs a { grid-template-columns: minmax(0, 1fr) auto; }
  .about-career__jobs a > span:nth-child(2) { display: none; }
}

/* ---------- kit:team-slider · the live site's slider, ported (round 7) ----------
   bdg-new…/ueber-uns, css/about.css section 4, declaration for declaration where it
   could be; only the tokens are ours (ground, surface, brand, corners, type). The
   signature phrase and the claim keep the live site's hand (Caveat). */
.team5 { overflow: hidden; }
.team5__head .lead { max-width: 60ch; margin: var(--sp-4) 0 0; }
.team5__claim { display: block; height: auto; width: clamp(210px, 25vw, 340px); margin: 20px 0 0; }
/* large screens: the lead moves to the right of the heading, the claim stays under it */
@media (min-width: 1200px) {
  .team5__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); column-gap: var(--sp-8); }
  .team5__head > * { grid-column: 1; }
  .team5__head h2 { margin-bottom: 0; }
  .team5__head .lead { grid-column: 2; grid-row: 2 / span 2; align-self: start; margin: 0; padding-top: .35em; }
}
.team5 .v5-carousel { position: relative; }
.team5 .v5-viewport { position: relative; width: 100vw; margin-left: calc(50% - 50vw); overflow-x: clip; overflow-y: visible; padding: 56px 0 84px; }
/* edge fades as an overlay, not a mask: a mask over the moving track repaints every frame */
.team5 .v5-edge { position: absolute; top: 0; bottom: 0; width: 5.5vw; z-index: 2; pointer-events: none; }
.team5 .v5-edge-l { left: 0; background: linear-gradient(90deg, var(--bg) 14%, transparent); }
.team5 .v5-edge-r { right: 0; background: linear-gradient(270deg, var(--bg) 14%, transparent); }
.team5 .v5-track { display: flex; gap: 22px; touch-action: pan-y; cursor: grab; will-change: transform; backface-visibility: hidden; user-select: none; }
.team5 .v5-track.is-dragging { cursor: grabbing; }
.team5 .v5-track.no-anim .v5-card, .team5 .v5-track.no-anim .v5-card * { transition: none; }
/* no transform/opacity transition: the script computes both from the position every frame */
.team5 .v5-card { position: relative; flex: 0 0 auto; width: clamp(250px, 24vw, 340px); aspect-ratio: 4 / 5; border-radius: var(--radius-card, 8px);
  transform: scale(.94); opacity: .82; transition: box-shadow .5s; outline: none; --mx: 50%; --my: 50%; }
.team5 .v5-card img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); filter: grayscale(.85) contrast(1.02);
  transition: transform .55s cubic-bezier(.22, .61, .36, 1), filter .45s cubic-bezier(.22, .61, .36, 1); pointer-events: none; user-select: none; }
.team5 .v5-card:is(.is-center, .is-near, :hover) img { filter: none; }
.team5 .v5-card.is-center { transform: scale(1.06); opacity: 1; box-shadow: 0 28px 64px -26px color-mix(in srgb, var(--brand) 45%, transparent); }
.team5 .v5-card:hover img { transform: scale(1.07); }
.team5 .v5-card-body { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 4; transform: translate3d(0, var(--noteH, 0px), 0); transition: transform .42s cubic-bezier(.22, .61, .36, 1); }
.team5 .v5-card:is(.is-center, :hover, :focus-within) .v5-card-body { transform: translate3d(0, 0, 0); }
.team5 .v5-card-body h3 { margin: 0; font: 600 19px/1.25 var(--font-head); color: #fff; text-shadow: 0 1px 14px rgba(7, 11, 20, .75); }
.team5 .v5-card-role { margin: 3px 0 0; font: 500 13.5px/1.4 var(--font-body); color: #c8cfdd; text-shadow: 0 1px 12px rgba(7, 11, 20, .8); transition: color .3s; }
.team5 .v5-card:is(:hover, :focus-within) .v5-card-role { color: #e2e6ee; }
.team5 .v5-card-note { margin: 14px 0 0; font: 500 21px/1.45 "Caveat", cursive; color: #ffd7e1; text-shadow: 0 1px 14px rgba(7, 11, 20, .85); opacity: 0; transform: translate3d(0, 6px, 0);
  transition: opacity .3s cubic-bezier(.22, .61, .36, 1), transform .42s cubic-bezier(.22, .61, .36, 1); }
.team5 .v5-card:is(.is-center, :hover, :focus-within) .v5-card-note { opacity: 1; transform: translate3d(0, 0, 0); transition-delay: .05s; }
.team5 .v8-inner { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: var(--radius-card, 8px); background: var(--bg-2); }
.team5 .v8-inner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(7, 11, 20, .72)); transition: background .8s; }
.team5 .v5-card.is-center .v8-inner::after { background: linear-gradient(180deg, transparent 54%, rgba(7, 11, 20, .8)); }
/* the edge nearest the cursor: a gradient on the border only */
.team5 .v8-trace { position: absolute; inset: 0; z-index: 3; padding: 1.6px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(200px circle at var(--mx) var(--my), #fff 0%, var(--brand) 28%, rgba(255, 106, 61, .5) 50%, rgba(230, 0, 60, 0) 73%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.team5 .v5-card:is(:hover, :focus-visible) .v8-trace { opacity: 1; }
/* the centred card: one light travelling round the border (the script moves the single ring) */
.team5 .v8-ring { position: absolute; inset: -1.6px; z-index: 0; overflow: hidden; border-radius: calc(var(--radius-card, 8px) + 1.6px); pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.team5 .v8-ring i { position: absolute; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; transform-origin: center; will-change: transform; animation: v8-spin 11s linear infinite;
  background: conic-gradient(from 0deg, rgba(230, 0, 60, 0) 0 48%, rgba(230, 0, 60, .5) 62%, var(--brand) 74%, #ff8a5c 82%, #ffe3ea 88%, rgba(230, 0, 60, 0) 97%); }
@keyframes v8-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.team5 .v5-card.is-center .v8-ring { opacity: 1; }
.team5 .v8-aura { position: absolute; inset: -10px; z-index: 0; border-radius: calc(var(--radius-card, 8px) + 10px); pointer-events: none; opacity: 0; transition: opacity .45s ease, filter 0s linear .5s;
  background: radial-gradient(230px circle at var(--mx) var(--my), rgba(230, 0, 60, .8), rgba(255, 138, 92, .32) 46%, rgba(230, 0, 60, 0) 73%); }
.team5 .v5-card:is(.is-center, :hover, :focus-visible) .v8-aura { filter: blur(20px); transition: opacity .45s ease, filter 0s linear 0s; }
.team5 .v5-card:is(:hover, :focus-visible) .v8-aura { opacity: .9; }
.team5 .v5-card.is-center .v8-aura { opacity: .45; }
.team5 .v5-card.is-center:is(:hover, :focus-visible) .v8-trace { opacity: 0; }
.team5 .v5-card.is-center.is-tracking .v8-ring i { animation: none; transform: translate(-50%, -50%) rotate(var(--ringDeg, 0deg)); }
.team5 .v5-nav { position: absolute; top: 46%; z-index: 3; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 72%, transparent); color: #fff; appearance: none; cursor: pointer; transform: translateY(-50%);
  opacity: 0; transition: opacity .6s ease .9s, background .25s, border-color .25s; }
.team5 .v5-nav:hover { background: var(--brand); border-color: var(--brand); }
.team5 .v5-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.team5 .v5-prev { left: clamp(12px, 2vw, 32px); }
.team5 .v5-next { right: clamp(12px, 2vw, 32px); }
/* the entrance: the head rises in, the slider opens from the middle */
.team5 .team5__head > :not(h2) { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1); }
.team5.team-in .team5__head > :not(h2) { opacity: 1; transform: none; }
.team5.team-in .team5__head > :nth-child(3) { transition-delay: .18s; }
.team5.team-in .team5__head > :nth-child(4) { transition-delay: .26s; }
.team5 .v5-viewport { clip-path: inset(-40% 34% -40% 34%); opacity: 0; transition: clip-path 1.1s cubic-bezier(.22, .61, .36, 1) .12s, opacity .8s ease .12s; }
.team5.team-in .v5-viewport { clip-path: inset(-40% 0 -40% 0); opacity: 1; }
.team5.reveal-done .v5-viewport { clip-path: none; }
.team5.team-in .v5-nav { opacity: 1; }
@media (max-width: 640px) {
  .team5 .v5-nav { display: none; }
  .team5 .v5-card { width: 74vw; }
  .team5 .v5-viewport { padding: 46px 0 72px; }
  .team5 .v5-edge { width: 3.5vw; }
}
@media (prefers-reduced-motion: reduce) {
  .team5 .v8-ring i { animation: none; }
  .team5 .v8-aura { transition: none; }
  .team5 .v5-card-body { transform: none; }
  .team5 .team5__head > *, .team5 .v5-viewport, .team5 .v5-nav { opacity: 1; transform: none; clip-path: none; transition: none; }
}

/* ---------- kit:about-story-live · the live timeline (round 7) ---------- */
.tl4__tl { position: relative; margin-top: 44px; }
.tl4__line { position: absolute; left: calc(var(--gutter) + 10px); top: 6px; bottom: 6px; width: 2px; transform: translateX(-50%); background: var(--hairline); }
.tl4__fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--brand); }
.tl4__mile { position: relative; padding: 0 0 56px 40px; }
.tl4__mile:last-child { padding-bottom: 0; }
.tl4__mile > * { max-width: 820px; }
.tl4__mile::before { content: ""; position: absolute; left: 10px; top: 8px; width: 14px; height: 14px; box-sizing: border-box; transform: translateX(-50%); border-radius: 50%; background: var(--bg); border: 2px solid var(--brand); }
.tl4__year { display: block; margin-bottom: 8px; font: 700 clamp(40px, 5vw, 64px)/1 var(--font-head); color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--fg) 32%, transparent); transition: -webkit-text-stroke-color .5s; }
.tl4__mile.in .tl4__year { -webkit-text-stroke-color: var(--brand); }
.tl4__mile h3 { margin: 0 0 6px; font: 600 20px/1.3 var(--font-head); }
.tl4__mile p { margin: 0; max-width: 52ch; color: var(--fg-muted); }

/* ---------- kit:about-story-climb(-down) · the pinned climb (round 7d, pick B) ---------- */
.climb { --dir: 1; padding-block: var(--sp-9); }
.climb--down { --dir: -1; }
.climb__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--sp-8); row-gap: var(--sp-7); }
.climb__head { grid-column: 1 / -1; margin-bottom: var(--sp-6); }
.climb__head h2 { margin-bottom: 0; }
.climb__stair { grid-column: 1 / -1; position: relative; height: 120px; }
.climb__stair svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.climb__stair path { fill: none; vector-effect: non-scaling-stroke; }
.climb__rail { stroke: var(--hairline); stroke-width: 1; }
.climb__fill { stroke: var(--brand); stroke-width: 2; stroke-dasharray: none; stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--ease-out); }
/* the dash is set in pixels by JS; the first state lands without transitions (.is-set follows it) */
.climb.is-armed:not(.is-set) :is(.climb__fill, .climb__stair li i, .climb__stair li b, .climb__stair li span, .climb__detail > li) { transition: none; }
.climb__stair ol { margin: 0; padding: 0; list-style: none; }
.climb__stair li { position: absolute; left: calc(var(--i) * 25%); top: calc(var(--y) * 1%); width: 25%; box-sizing: border-box; translate: 0 -100%; padding: 0 var(--sp-4) var(--sp-3); }
.climb__stair li i { position: absolute; left: 0; bottom: 0; width: 9px; height: 9px; translate: -50% 50%; border-radius: 50%; border: 1px solid var(--brand); background: var(--brand); transition: background .4s; }
.climb__stair li b { display: block; font: 700 clamp(22px, 2.4vw, 34px)/1 var(--font-head); letter-spacing: -.02em; color: var(--fg); transition: color .5s; }
.climb__stair li span { display: block; margin-top: 6px; font-size: var(--fs-small); line-height: 1.35; color: var(--fg-muted); transition: color .5s; }
.climb:not(.is-armed) .climb__stair li :is(b, span) { display: none; }
.climb__stair li[data-s="past"] b { color: var(--fg-muted); }
.climb__stair li[data-s="next"] :is(b, span) { color: color-mix(in srgb, var(--fg) 16%, transparent); }
.climb__stair li[data-s="next"] i { background: var(--bg); }
.climb__detail { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.climb__detail > li { padding-right: var(--sp-5); }
.climb__y { display: block; font: 700 clamp(36px, 4vw, 56px)/.95 var(--font-head); letter-spacing: -.03em; color: var(--fg); }
.climb__detail h3 { margin: var(--sp-4) 0 var(--sp-2); font: 600 clamp(18px, 1.6vw, 22px)/1.25 var(--font-head); }
.climb__detail p { margin: 0; max-width: 40ch; color: var(--fg-muted); }
.climb__count { display: none; }
/* armed: the section is the runway, the stage holds still */
.climb.is-armed { height: calc(100vh + (var(--n) - 1) * 60vh); height: calc(100svh + (var(--n) - 1) * 60svh); padding-block: 0; }
.climb.is-armed .climb__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-content: center; padding-block: calc(var(--header-h) + var(--sp-4)) var(--sp-6); overflow: clip; }
.climb.is-armed .climb__stair { grid-column: 1; grid-row: 2 / span 2; height: min(46vh, 420px); min-height: 280px; align-self: end; }
.climb.is-armed .climb__detail { grid-column: 2; grid-row: 2; grid-template-columns: minmax(0, 1fr); align-self: end; }
.climb.is-armed .climb__detail > li { grid-area: 1 / 1; padding: 0; transition: opacity .6s var(--ease-out), translate .6s var(--ease-out); }
.climb.is-armed .climb__detail > li[data-s="past"] { opacity: 0; translate: 0 calc(-28px * var(--dir)); }
.climb.is-armed .climb__detail > li[data-s="next"] { opacity: 0; translate: 0 calc(28px * var(--dir)); }
.climb.is-armed .climb__y { font-size: clamp(88px, 11vw, 168px); }
.climb.is-armed .climb__detail h3 { margin-top: var(--sp-5); font-size: clamp(24px, 2.2vw, 32px); }
.climb.is-armed .climb__count { display: block; grid-column: 2; grid-row: 3; margin: 0; font-size: var(--fs-small); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.climb.is-armed .climb__count b { color: var(--fg); font-weight: 600; }
@media (max-width: 900px) {
  .climb__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-6); }
  .climb__detail { grid-template-columns: 1fr 1fr; row-gap: var(--sp-6); }
  .climb__stair li { padding: 0 4px var(--sp-2) 10px; }
  .climb__stair li b { font-size: clamp(16px, 4.6vw, 22px); white-space: nowrap; }
  .climb__stair li span { display: none; }
  .climb.is-armed .climb__stair { grid-row: auto; height: 23vh; height: 23svh; min-height: 160px; }
  .climb.is-armed .climb__detail, .climb.is-armed .climb__count { grid-column: 1; grid-row: auto; }
  .climb.is-armed .climb__y { font-size: clamp(64px, 21vw, 104px); }
  .climb.is-armed .climb__detail h3 { margin-top: var(--sp-4); font-size: 22px; }
}

/* ---------- kit:about-career-live · the live careers block (round 7) ----------
   The live layout (the collage, the hand-written note, the pinned roles), in the night
   look (round 7c, the user): photos borderless with card corners, the roles dark cards
   with one red pin as the only light; nothing reaches past the wrap. */
.car6 { position: relative; overflow: hidden; }
.car6::before { content: ""; position: absolute; left: -6%; top: 8%; width: 44vw; height: 44vw; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 6%, transparent), transparent 62%); }
.car6 .wrap { position: relative; }
.car6__top { display: grid; grid-template-columns: minmax(280px, .72fr) 1.9fr; gap: clamp(22px, 2.4vw, 38px); align-items: center; }
.car6__copy h2 { margin: 0 0 clamp(18px, 1.8vw, 26px); }   /* the user, 2026-09-12: room between title and text */
.car6__copy > p:not(.eyebrow) { max-width: 44ch; margin: 0 0 26px; color: var(--fg-muted); }
.car6__collage { position: relative; display: grid; grid-template-columns: 1.02fr 1.06fr 1.42fr; gap: clamp(10px, 1.2vw, 18px); align-items: start; padding-right: 150px; }
.car6__stack { display: grid; gap: clamp(10px, 1.2vw, 18px); }
.car6__shot { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-card, 8px); background: var(--bg-2);
  box-shadow: 0 22px 40px -24px rgba(0, 0, 0, .8); transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s; }
.car6__shot img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter, saturate(.85)); transition: transform .7s cubic-bezier(.22, .61, .36, 1); }
.car6__shot:hover { z-index: 2; transform: rotate(0deg) translateY(-4px); box-shadow: 0 30px 54px -26px rgba(0, 0, 0, .85); }
.car6__shot:hover img { transform: scale(1.04); }
.car6__a { transform: rotate(-1.2deg); margin-top: clamp(8px, 1.1vw, 16px); }
.car6__b { transform: rotate(.8deg); }
.car6__c { transform: rotate(1deg); }
.car6__d { transform: rotate(-.6deg); }
.car6__a img { aspect-ratio: 1 / 1.22; }
.car6__b img { aspect-ratio: 1 / 1.42; }
.car6__c img { aspect-ratio: 1.95 / 1; }
.car6__d img { aspect-ratio: 1.78 / 1; }
.car6__hand { position: absolute; right: 0; top: 30px; width: 138px; color: var(--fg); pointer-events: none; }
.car6__hand span { display: block; font: 500 clamp(18px, 1.4vw, 22px)/1.35 "Caveat", cursive; letter-spacing: .01em; transform: rotate(-1.5deg); }
.car6__hand svg { display: block; width: 78px; height: 42px; margin: 12px 0 0 2px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.car6__jobs { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: start; margin-top: clamp(26px, 2.8vw, 42px); }
.car6__label { max-width: 11ch; margin: 0; padding-top: 18px; font: 600 13px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
.car6__job { position: relative; padding: 26px 24px 22px; border: 1px solid var(--hairline); border-radius: var(--radius-card, 8px);
  background: color-mix(in srgb, var(--bg-2) 88%, transparent); box-shadow: 0 22px 40px -26px rgba(0, 0, 0, .8);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s, border-color .45s; }
.car6__job::before { content: ""; position: absolute; top: -6px; left: 50%; width: 11px; height: 11px; transform: translateX(-50%); border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 3px var(--bg), 0 0 14px 2px color-mix(in srgb, var(--brand) 55%, transparent); }
.car6__job:nth-child(2) { transform: rotate(-.8deg); }
.car6__job:nth-child(3) { transform: rotate(.6deg) translateY(-40px); }
.car6__job:nth-child(4) { transform: rotate(-.4deg); }
.car6__job:is(:nth-child(2), :nth-child(4)):hover { transform: rotate(0deg) translateY(-5px); }
.car6__job:nth-child(3):hover { transform: rotate(0deg) translateY(-45px); }
.car6__job:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--hairline)); box-shadow: 0 28px 48px -24px rgba(0, 0, 0, .85); }
.car6__job h3 { margin: 0 0 8px; font: 600 17.5px/1.32 var(--font-head); color: var(--fg); }
.car6__job p { margin: 0; font: 500 14px/1.5 var(--font-body); color: var(--fg-muted); }
.car6__job em { display: block; margin-top: 12px; font: normal 500 14.5px/1.5 var(--font-body); color: var(--brand-ink); }
.car6__job a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.car6__job a:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1180px) {
  .car6__collage { padding-right: 0; }
  .car6__hand { position: static; grid-column: 1 / -1; width: auto; margin-top: 16px; text-align: right; }
  .car6__hand svg { margin: 6px 0 0 auto; transform: scaleY(-1); }
}
@media (max-width: 1060px) {
  .car6__top { grid-template-columns: 1fr; gap: 40px; }
  .car6__jobs { grid-template-columns: 1fr 1fr; }
  .car6__label { grid-column: 1 / -1; max-width: none; padding-top: 0; }
  .car6__job:nth-child(3) { transform: rotate(.9deg); }
  .car6__job:nth-child(3):hover { transform: rotate(0deg) translateY(-5px); }
}
@media (max-width: 760px) {
  .car6__collage { grid-template-columns: 1fr 1fr; gap: 12px; }
  .car6__stack { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .car6__jobs { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .car6__stack { grid-template-columns: 1fr; }
  .car6__shot, .car6__job { transform: none !important; }
  .car6__a { margin-top: 0; }
}

/* ---------- kit:about-values-cards · the live page's compact principles (round 7) ---------- */
.val4__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.val4__card { position: relative; overflow: hidden; padding: 34px 28px; border: 1px solid var(--hairline); border-radius: var(--radius-card, 8px); background: var(--bg-2); transition: transform .3s, box-shadow .3s; }
.val4__card::before { content: ""; position: absolute; top: 0; left: 0; width: 36px; height: 3px; background: var(--brand); transition: width .4s; }
.val4__card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .55); }
.val4__card:hover::before { width: 100%; }
.val4__card b { display: block; margin-bottom: 18px; font: 700 44px/1 var(--font-head); color: color-mix(in srgb, var(--fg) 14%, transparent); }
.val4__card h3 { margin: 0 0 10px; font: 600 20px/1.3 var(--font-head); }
.val4__card p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--fg-muted); }
@media (max-width: 1000px) { .val4__cards { grid-template-columns: 1fr; } }

/* ---------- kit:about-marquee · type lab 12 on the kit's .marquee (round 7) ---------- */
.about-marq .marquee { margin-top: var(--sp-6); }
.about-marq .marquee + .marquee { margin-top: var(--sp-3); }
.about-marq .marquee--small .marquee__track > :nth-child(even) { color: var(--brand-ink); }

/* ---------- kit:contact-synapse · the compact contact page (round 6) ----------
   The synapse (webgl/fx/synapse.js) fills the section behind everything; the form's
   panel is only mostly opaque, so the links show faintly through it. */
.contact-syn { position: relative; isolation: isolate; overflow: hidden; padding-block: calc(var(--header-h) + var(--sp-7)) var(--sp-8); }
.contact-syn__gl { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.contact-syn__gl > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.contact-syn__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--sp-9); align-items: start; }
.contact-syn__copy h1 { max-width: 13ch; }
.contact-syn__copy .lead { max-width: 34rem; margin-top: var(--sp-5); }   /* the h1 and the lead had no gap at all */
.contact-syn__facts { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-7); margin: var(--sp-6) 0 0; }
.contact-syn__facts dt { font-size: var(--fs-small); color: var(--fg-muted); }
.contact-syn__facts dd { margin: 2px 0 0; font-weight: 600; color: var(--fg); }
.contact-syn__lines { display: grid; gap: 12px; margin: var(--sp-6) 0; padding: var(--sp-5) 0 0; list-style: none; border-top: 1px solid var(--hairline); }
.contact-syn :is(.contact-syn__lines, .contact-syn__visit) svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* The direct lines take the footer's link style (the user, round 12): muted text that turns white on
   hover in .3s, no red, no underline. The GC01 glyph follows the text's colour and acts out its route. */
.contact-syn__lines a { display: inline-flex; align-items: center; gap: 12px; color: var(--fg-muted); text-decoration: none; transition: color .3s; }
.contact-syn__lines a:focus-visible { color: var(--fg); }
@media (hover: hover) { .contact-syn__lines a:hover { color: var(--fg); } }
.contact-syn__visit { display: flex; gap: 12px; align-items: flex-start; margin: var(--sp-6) 0 0; font-size: var(--fs-small); color: var(--fg-muted); }
.contact-syn__visit a { color: var(--fg); }
.contact-syn .contact-slot { border-bottom: 1px dashed var(--fg-dim); }
.contact-syn__panel { display: grid; padding: var(--sp-6); border: 1px solid var(--hairline); border-radius: var(--radius-card, 8px);
  background: color-mix(in srgb, var(--bg) 68%, transparent); backdrop-filter: blur(3px); }
/* The form and the thank-you share one cell, so sending never changes the panel's height (the page
   jumped when the form left, the user, round 11): the sent form stays as an invisible, inert spacer
   and the thank-you fades in, centred where it was. */
.contact-syn__panel > * { grid-area: 1 / 1; min-width: 0; }
.contact-syn__form { display: grid; gap: var(--sp-4); }
.contact-syn__form[hidden] { display: none; }   /* display: grid beats the hidden attribute */
.contact-syn__form.is-sent { visibility: hidden; opacity: 0; transition: opacity .3s, visibility 0s .3s; }
.contact-syn__form .field, .contact-syn__form .consent { margin: 0; }
.contact-syn__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--err-room, var(--sp-4)) var(--sp-4); }
.contact-syn__send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
/* the status is empty until the form is sent: it keeps the rest of the button's line,
   so "Wird gesendet ..." lands in space that is already there instead of wrapping under
   the button and pushing the panel (the user, 2026-09-16) */
.contact-syn__status { flex: 1 1 14ch; min-height: 1.6em; }
.contact-syn__status { margin: 0; font-size: var(--fs-small); color: var(--fg-muted); }
.contact-syn__status a { color: var(--brand-ink); }
.contact-syn__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-syn__done { align-self: center; outline: none; }
.contact-syn__done:not([hidden]) { animation: syn-done .7s cubic-bezier(.2, .8, .2, 1) .2s both; }
@keyframes syn-done { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .contact-syn__done:not([hidden]) { animation: none; } .contact-syn__form.is-sent { transition: none; } }
/* even steps (the user, round 12: the eyebrow sat far above the heading and the text stuck to it) */
.contact-syn__done > * { margin: 0; }
.contact-syn__done h2 { margin: var(--sp-3) 0 var(--sp-4); }
.contact-syn__done p:last-child { color: var(--fg-muted); }
.contact-syn__done a { display: block; width: max-content; margin-top: var(--sp-2); color: var(--fg); }
@media (max-width: 900px) {
  .contact-syn__grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .contact-syn__row { grid-template-columns: 1fr; }
  .contact-syn__panel { padding: var(--sp-5); }
}

/* ---------- kit:contact-lattice-beat, the contact page's pick (round 18) ----------
   Built up in layers over rounds 11–17, kept as modifier classes on the section: --halo (the lattice
   behind a wider form), --glow (a step more visible), --live (the live site's fields), --stay (the
   thank-you's accent turns green). The other variants were removed (the user, round 18). */

/* --halo: the lattice behind a wider form (round 11)
   The user: the 3D less centre stage, the form wider, the effect a background that is still noticed.
   Two columns (the form ≈ 58%); the same lattice sits behind the form's panel, its dome centres on
   the panel's two edges (host = panel + 35% each side, since the scene fits data-gl-span 3.4 units
   to the host and the dome centres are 2 apart; the spare room keeps the swaying domes uncut). So the domes and the strands' roots stay crisp outside
   the panel, and the weave shows through the frosted glass as soft light. */
.contact-syn--halo .contact-syn__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sp-8); align-items: center; }
.contact-syn--halo .contact-syn__copy h1 { font-size: var(--fs-h2); }
.contact-syn__stage { position: relative; }
/* shifted down (−8% top, −44% bottom): the visitor's dome sits beside the short contact lines, clear of the facts */
.contact-syn__halo { position: absolute; inset: -8% -35% -44%; pointer-events: none; }
.contact-syn--halo .contact-syn__panel { background: color-mix(in srgb, var(--bg) 56%, transparent); backdrop-filter: blur(4px); }
@media (max-width: 900px) {
  .contact-syn--halo .contact-syn__grid { grid-template-columns: 1fr; gap: var(--sp-7); }
}

/* --glow: the halo, more visible (round 12)
   The user: the lattice a little more visible than in the halo, without getting in the way of filling
   in the form. Clearer glass and a higher gain; the host is wider, so the domes stand further out of
   the panel. The fields keep a near-solid fill: the weave shows between them, never under the text. */
.contact-syn--glow .contact-syn__halo { inset: -2% -41.4% -52%; }   /* the dome centres ~4% of the panel outside its edges; lower than the halo, so the larger dome clears the facts */
.contact-syn--glow .contact-syn__panel { background: color-mix(in srgb, var(--bg) 38%, transparent); backdrop-filter: blur(2px); }
.contact-syn--glow .contact-syn__form :is(input, textarea, select) { background-color: color-mix(in srgb, var(--bg) 90%, transparent); }
/* --live (round 14): the live site's fields; the five project details open under a toggle
   (0fr → 1fr, the kit's accordion). The row starts at the top, so the form never moves up as they open, and the
   lattice's host keeps its closed box: the behaviour pins it in px to the closed stage (--base, .is-pinned), so
   the fold never resizes the canvas (a resized canvas flickers). Beside the copy the start-aligned stage stands
   ~75px higher than the glow's, so above 900px the host sits 10% of the stage lower, clear of the facts. */
.contact-syn--live .contact-syn__grid { align-items: start; }
@media (min-width: 901px) { .contact-syn--live .contact-syn__halo { top: 10%; bottom: -64%; } }
.contact-syn--live .contact-syn__stage.is-pinned .contact-syn__halo { top: calc(-.02 * var(--base)); bottom: auto; height: calc(1.54 * var(--base)); }
@media (min-width: 901px) { .contact-syn--live .contact-syn__stage.is-pinned .contact-syn__halo { top: calc(.1 * var(--base)); } }
.contact-syn__more-toggle { display: inline-flex; align-items: baseline; gap: 12px; justify-self: start; padding: 2px 0; font: inherit; font-size: var(--fs-small);
  text-align: left; color: var(--fg-muted); background: none; border: 0; cursor: pointer; transition: color .3s; }
.contact-syn__more-toggle:focus-visible, .contact-syn__more-toggle[aria-expanded="true"] { color: var(--fg); }
@media (hover: hover) { .contact-syn__more-toggle:hover { color: var(--fg); } }
.contact-syn__plus { position: relative; flex: none; width: 11px; height: 11px; }
.contact-syn__plus::before, .contact-syn__plus::after { content: ""; position: absolute; left: 0; top: 5px; width: 11px; height: 1px; background: currentColor; transition: transform .42s var(--ease-out); }
.contact-syn__plus::after { transform: rotate(90deg); }
.contact-syn__more-toggle[aria-expanded="true"] .contact-syn__plus::after { transform: rotate(0deg); }   /* + folds into − */
.contact-syn__more { display: grid; grid-template-rows: 0fr; visibility: hidden; margin-top: calc(-1 * var(--sp-4)); transition: grid-template-rows .42s var(--ease-out), visibility 0s .42s; }
.contact-syn__more-toggle[aria-expanded="true"] + .contact-syn__more { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .42s var(--ease-out); }
.contact-syn__more > div { display: grid; gap: var(--sp-4); min-height: 0; overflow: clip; overflow-clip-margin: 24px; }   /* the margin keeps the focus glow */
.contact-syn__more > div > :first-child { margin-top: var(--sp-4); }
.contact-syn .field__hint { font-size: var(--fs-small); color: var(--fg-dim); }
@media (prefers-reduced-motion: reduce) { .contact-syn__more, .contact-syn__plus::after { transition: none; } }
/* --stay (round 16): the thank-you's accent turns the lattice's success green with it
   (the lattice eases in between .45s and 1.1s after the send) and stays */
.contact-syn--stay .contact-syn__done:not([hidden]) .accent { animation: syn-ok .65s ease .45s both; }
@keyframes syn-ok { from { color: var(--brand); } to { color: var(--gl-ok, #34c48b); } }
@media (prefers-reduced-motion: reduce) { .contact-syn--stay .contact-syn__done:not([hidden]) .accent { animation: none; color: var(--gl-ok, #34c48b); } }

/* ---------- kit:hero-cases · the lit case wall (round 6) ----------
   Wall → scrim → ribbon → copy, each its own positioned layer (never nest the ribbon's
   host in the wall). --lit on each tile comes from the behaviour in blueprints.js. */
.hero--cases { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  min-height: min(92svh, 860px); padding-block: calc(var(--header-h) + var(--sp-8)) var(--sp-9); }
.hero--cases .hero__stage-copy { position: relative; display: block; }
.hero--cases h1 { max-width: 15ch; }
.hero--cases .lead { max-width: 32rem; margin-top: var(--sp-4); margin-bottom: 0; }
.hero--cases .hero__acts { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--block-gap); }
.cases-wall, .cases-wall__scrim, .cases-wall__waves { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cases-wall { overflow: hidden; }
.cases-wall__waves { isolation: isolate; }
.cases-wall__grid { position: absolute; inset: -14% -6%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; rotate: -4deg; }
.cases-wall__tile { overflow: hidden; border-radius: var(--img-radius, 8px); background: var(--bg-2); }
.cases-wall__tile img { display: block; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(calc(.18 + 1.3 * var(--lit, .15))) saturate(calc(.35 + .6 * var(--lit, .15))); }   /* the tiles are night photos: lit lifts them past 1 */
.cases-wall__scrim { background:
  linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, transparent) 30%, color-mix(in srgb, var(--bg) 25%, transparent) 60%, transparent 78%),
  linear-gradient(0deg, var(--bg) 0%, transparent 24%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 70%, transparent) 0%, transparent 20%); }
@media (max-width: 900px) {
  .hero--cases { align-items: flex-end; min-height: 92svh; }
  .cases-wall__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cases-wall__waves { inset: 0 0 58% 0; }   /* phones: the ribbon stays over the wall, above the copy */
  .cases-wall__scrim { background: linear-gradient(0deg, var(--bg) 36%, color-mix(in srgb, var(--bg) 60%, transparent) 62%, transparent 86%); }
}

/* ---------- Photo CTA: the CTA band over a night photo with the red waves (2026-09-11) ---------- */
/* kit:cta-band-waves: the band's glow stays, the waves take the drawn lines' place */
.cta__waves { position: absolute; inset: -6% 0; z-index: -1; pointer-events: none; }
.cta--photo { display: flex; align-items: center; min-height: min(84svh, 760px); padding-block: calc(var(--sp-9) * 1.25); }
.cta--photo::before { display: none; }   /* the photo carries the light */
.cta--photo .stage { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cta--photo .stage > * { position: absolute; }
.cta--photo .stage__plate { inset: -18% 0; }
.cta--photo .stage__waves { inset: -8% 0; }
.cta__scrim { inset: 0; background:
  radial-gradient(ellipse 44% 50% at 50% 50%, color-mix(in srgb, var(--bg) 72%, transparent), color-mix(in srgb, var(--bg) 36%, transparent) 62%, transparent 88%),
  linear-gradient(180deg, var(--cta-top, var(--bg)) 0%, transparent 20%, transparent 78%, var(--bg) 100%); }
.cta--photo .wrap { width: 100%; }
/* no border above the closing CTA (the user, 2026-09-14): after a shaded section the band starts in that
   section's colour and fades into its own, so the two grounds meet without a seam */
[data-band="shade"] + .cta--band { --cta-top: color-mix(in oklab, var(--bg), #000 15%); background-image: linear-gradient(var(--cta-top), var(--bg) 180px); }
.cta--photo h2, .cta--photo .lead, .cta--photo .eyebrow { text-shadow: 0 1px 18px color-mix(in srgb, var(--bg) 80%, transparent); }

/* ---------- A subtle ribbon, option 1: a thread through the six phases ----------
   The strands pinch into a knot at each phase number and open between them, and
   the thread is drawn as the row scrolls in; a phase lights when it reaches it. */
.thread-wrap { position: relative; }
.thread { position: absolute; left: 0; top: 0; width: 100%; height: 64px; overflow: visible; pointer-events: none;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--brand) 70%, transparent)); }
.thread path { fill: none; stroke: var(--brand); stroke-width: 1; stroke-linecap: round; }
.thread circle { fill: #fff; filter: drop-shadow(0 0 6px var(--brand)); }
.phase-row--thread li { border-top-color: transparent; position: relative; }
.phase-row--thread li::before { content: ""; position: absolute; left: 0; top: -3px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--hairline); transition: background .4s, box-shadow .4s; }
.phase-row--thread li.is-lit::before { background: var(--brand); box-shadow: 0 0 10px var(--brand); }
.phase-row--thread li span { transition: color .4s; }
.phase-row--thread li.is-lit span { color: var(--fg); }
@media (max-width: 900px) { .thread { display: none; } .phase-row--thread li { border-top-color: var(--hairline); } }

/* ---------- A subtle ribbon, option 2: peeking behind a photo ----------
   One vertical ribbon runs down the section behind the photo: it shows in the
   padding above and below it and slides against the photo as the page scrolls. */
.peek { position: relative; isolation: isolate; overflow: hidden; }
.peek__ribbon { position: absolute; inset: -14% 0; z-index: -1; pointer-events: none; }
.peek__ribbon > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.peek .photo { position: relative; }
@media (max-width: 900px) { .peek__ribbon { display: none; } }

/* ---------- The canon 404 (the user, 2026-09-12): one 3D ribbon broken in the middle ---------- */
.nf { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-start; text-align: center;
  min-height: min(100svh, 880px); padding-block: calc(var(--header-h) + var(--sp-9)) var(--sp-9); }
.nf .nf__copy { display: block; position: relative; }
.nf .eyebrow { margin-inline: auto; }
.nf h1 { max-width: 16ch; margin-inline: auto; }
.nf .lead { max-width: 36rem; margin: var(--sp-4) auto 0; }
.nf .hero__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--block-gap); }
.nf__rib { position: absolute; inset: 0; z-index: -1; pointer-events: none; }