/* Shikumi-ka (working name): hero + "success by design" section, modelled on sxlvx.de's first page. */
:root {
  --ink: #24170F; --paper: #F5F0E6; --ghost: #ECE4D4;
  --saffron: #F2B33D; --jacaranda: #C9B1F5; --coral: #EE8A5F; --sage: #B5C9A8;
  --sage-ink: #7FA06C;   /* sage deep enough to read as a line on paper */
  --grey-word: #8A8276;
  --display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --body: 'Bricolage Grotesque', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  --jp: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --gutter: 16px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 768px) { :root { --gutter: 40px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; font: 400 18px/1.55 var(--body); background: var(--paper); color: var(--ink);
  overflow-x: clip; -webkit-tap-highlight-color: transparent; }
a { color: inherit; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--saffron); outline-offset: 3px; }

/* ---------- 1. hero ---------- */
.hero { position: relative; isolation: isolate; min-height: 100svh; overflow: hidden;
  background: var(--ink); color: var(--paper); display: grid;
  grid-template-rows: auto 1fr auto auto; padding: var(--bar-h) var(--gutter) 0; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- the sticky header (every page) ---------- */
:root { --bar-h: 56px; }
@media (min-width: 768px) { :root { --bar-h: 68px; } }
.bar { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--bar-h); display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 0 var(--gutter); color: var(--paper);
  transition: color 320ms var(--ease-out), background-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out); }
/* over a light section it takes a paper ground, so it never sits on top of text unreadably */
.bar[data-on=light] { color: var(--ink); background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent); }
html.menu-open .bar { color: var(--paper); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.bar-l { display: flex; align-items: center; }
.bar-l { gap: 6px; }
.burger { width: 44px; height: 44px; margin-left: -11px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  display: grid; place-content: center; gap: 6px; touch-action: manipulation; }
.burger span { display: block; width: 22px; height: 2px; background: currentColor; transition: transform 320ms var(--ease-out); }
.burger[aria-expanded=true] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded=true] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.logo { font: 400 22px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
/* the button carries Diana's face: she looks at the words now and then, and smiles at you */
.cta { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 4px; border-radius: 999px; white-space: nowrap;
  background: var(--saffron); color: var(--ink); font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; touch-action: manipulation; transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out); }
.cta:hover { background: var(--paper); }
.bar[data-on=light] .cta:hover { background: var(--ink); color: var(--paper); }
.cta-face { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 88%, var(--saffron)); }
.cta-face img { position: absolute; left: -2%; top: 2%; width: 104%; height: auto; transition: opacity 240ms var(--ease-out); }
.cta-face img:last-child { opacity: 0; }
.cta-face.b img:first-child { opacity: 0; }
.cta-face.b img:last-child { opacity: 1; }

/* a big call-to-action button, for the closing bands */
.btn { display: inline-flex; align-items: center; min-height: 52px; margin-top: 8px; padding: 0 26px; border-radius: 999px;
  background: var(--saffron); color: var(--ink); font: 500 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; touch-action: manipulation; transition: background-color 200ms var(--ease-out); }
.btn:hover { background: var(--paper); }

/* lists of articles on the blog pages. Each row opens its article. */
.post-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.post-row { display: grid; gap: 8px 40px; padding: 24px 0 26px; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.post-row h3 { margin: 0; font: 400 clamp(26px, 3vw, 40px)/1.05 var(--display); text-transform: uppercase;
  transition: transform 500ms cubic-bezier(.2, .8, .2, 1); }
.post-row h3::after { content: ' \2197'; font-size: .55em; vertical-align: .35em; opacity: 0; transition: opacity 220ms var(--ease-out); }
.post-row p { margin: 0; max-width: 46ch; font-size: 16px; }
.post-meta { font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--grey-word); }
@media (hover: hover) {
  .post-row:hover h3 { transform: translateX(10px); }
  .post-row:hover h3::after { opacity: 1; }
}
@media (min-width: 900px) { .post-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto; align-items: baseline; } }
@media (max-width: 767px) {
  .logo { font-size: 19px; }
  .cta { padding: 0 13px; font-size: 11px; letter-spacing: .04em; min-height: 40px; }
  .cta { gap: 8px; padding-left: 3px; }
  .cta-face { width: 32px; height: 32px; }
}

/* the menu (after sxlvx.de's): a circle opens out of the hamburger; numbered links rise out of
   a mask; Services opens a list of every capability. header.js drives the motion with GSAP;
   without it (or under reduced motion) the menu simply appears. */
.menu { position: fixed; inset: 0; z-index: 55; background: var(--ink); color: var(--paper); overflow-y: auto;
  overscroll-behavior: contain; visibility: hidden; }
html.menu-open .menu { visibility: visible; }
.menu-in { position: relative; min-height: 100%; display: flex; flex-direction: column; gap: 32px;
  padding: calc(var(--bar-h) + 24px) var(--gutter) 24px; }
.mx-main { display: flex; flex-direction: column; }
.mx-item { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid color-mix(in srgb, var(--paper) 16%, transparent); }
.mx-link { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 18px; padding: 10px 0 6px; text-decoration: none; }
.mx-idx { flex: none; width: 22px; padding-bottom: .7em; font: 500 12px/1 var(--mono); color: color-mix(in srgb, var(--paper) 45%, var(--ink));
  transition: color 300ms var(--ease-out); }
.mx-link[aria-current=page] .mx-idx { color: var(--saffron); }
.mx-mask { display: block; overflow: hidden; padding-bottom: .02em; }
.mx-label { display: block; font: 400 clamp(46px, 6.6vw, 92px)/1.02 var(--display); text-transform: uppercase; white-space: nowrap; }
.mx-link, .mx-label, .mx-sub { transition: opacity 400ms ease, color 300ms ease, transform 500ms cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) {
  .mx-main:hover .mx-link { opacity: .35; }
  .mx-main .mx-item:hover .mx-link { opacity: 1; }
  .mx-item:hover .mx-label { transform: translateX(14px); }
  .mx-item:hover .mx-idx { color: var(--saffron); }
  .mx-sub:hover { color: var(--paper); transform: translateX(4px); }
  .mx-toggle:hover { border-color: var(--saffron); color: var(--saffron); }
}
.mx-toggle { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: none; color: inherit; border: 1px solid color-mix(in srgb, var(--paper) 30%, transparent); touch-action: manipulation;
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease; }
.mx-chev { width: 10px; height: 10px; margin-left: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform 450ms cubic-bezier(.2, .8, .2, 1); }
.mx-toggle[aria-expanded=true] { background: var(--saffron); border-color: var(--saffron); color: var(--ink); }

.mx-head { margin: 0 0 22px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 55%, var(--ink)); }
.mx-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
.mx-glabel { margin: 0 0 10px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.mx-glabel a { color: var(--c); text-decoration: none; }
.mx-sub { display: block; width: fit-content; padding: 5px 0; font-size: 16px; line-height: 1.3; text-decoration: none;
  color: color-mix(in srgb, var(--paper) 70%, var(--ink)); }
.mx-intro { margin: 0; max-width: 28ch; font-size: 19px; line-height: 1.5; color: color-mix(in srgb, var(--paper) 62%, var(--ink)); }
.mx-bottom { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--paper) 16%, transparent); font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* phones: the capabilities unfold in place under Services; the chevron turns down */
@media (max-width: 899px) {
  .mx-panel { height: 0; overflow: hidden; visibility: hidden; }
  .mx-panel.is-open { height: auto; visibility: visible; }
  .mx-panel .mx-head { margin-top: 22px; }
  .mx-groups { padding-bottom: 24px; }
  .mx-toggle[aria-expanded=true] .mx-chev { transform: translateY(-3px) rotate(45deg); }
  .mx-intro { display: none; }
}
/* desktop: links on the left; on the right the intro, which the capability panel replaces */
@media (min-width: 900px) {
  .menu-in { padding-top: calc(var(--bar-h) + 40px); }
  .mx-main { width: 54%; }
  .mx-panel, .mx-intro { position: absolute; left: calc(54% + 6vw); right: var(--gutter); top: calc(50% - 20px); translate: 0 -50%; }
  .mx-intro { left: calc(54% + 6vw); }
  .mx-panel { visibility: hidden; opacity: 0; }
  .mx-panel.is-open { visibility: visible; opacity: 1; }
  .mx-intro.is-away { visibility: hidden; }
  .mx-groups { gap: 32px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-link, .mx-label, .mx-sub, .mx-toggle, .mx-chev, .mx-idx { transition: none; }
}

/* follow us: icons only as big as they need to be, tap areas as big as a finger */
.social { display: flex; align-items: center; gap: 2px; }
.social span { margin-right: 8px; }
.social a { display: grid; place-items: center; width: 40px; height: 40px; margin: -10px 0; color: inherit; transition: color 180ms var(--ease-out); }
.social a:hover { color: var(--saffron); }
.social svg { width: 20px; height: 20px; }

/* SHIKUMI-KA with 仕組み化 set vertically beside it, cap-height tall */
.wordmark { margin: 0; display: flex; justify-content: center; align-items: flex-start; gap: .06em;
  font: 400 clamp(56px, 16.4vw, 236px)/.86 var(--display); letter-spacing: .005em; padding-top: 3vh; white-space: nowrap; }
.wordmark .wm { display: block; }
.wordmark .ch { display: inline-block; }
.wordmark .kanji { writing-mode: vertical-rl; font: 900 .205em/1 var(--jp); letter-spacing: 0; color: var(--saffron);
  margin-top: .05em; }
.wordmark .kanji .ch { display: inline-block; }

.emblem { position: absolute; left: 50%; bottom: 0; z-index: 1; translate: -50% 0; pointer-events: none;
  width: 0; height: var(--emblem-h, 50vh); }
/* fx carries the hop and squash; its origin is her feet */
.emblem__fx { position: absolute; left: 0; bottom: 0; width: 0; height: 100%; transform-origin: 0 100%; }
.emblem__img { position: absolute; bottom: 0; left: 0; max-width: none; user-select: none; -webkit-user-drag: none; }
/* her body only, so the empty corners of the image never catch a tap */
.emblem__hit { position: absolute; bottom: 0; left: 0; height: 92%; aspect-ratio: .3 / .92; translate: -50% 0;
  pointer-events: auto; cursor: pointer; touch-action: manipulation; }

.hero-foot { grid-row: 3; position: relative; z-index: 2; display: grid; gap: 20px; align-items: end; padding-bottom: 20px;
  pointer-events: none; }                        /* the gaps between the text belong to Diana's clicks */
.hero-foot > * { pointer-events: auto; justify-self: start; }
.hook { margin: 0; font: 400 clamp(34px, 9.4vw, 76px)/.92 var(--display); text-transform: uppercase; }
.hook .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hook .line > span { display: inline-block; }
.hook .accent { color: var(--saffron); }
.hero-note { max-width: 36ch; font-size: 16px; color: color-mix(in srgb, var(--paper) 82%, var(--ink)); }
.hero-note p { margin: 0; }
.hero-note .hero-line { margin-top: 12px; color: var(--saffron); font-weight: 600; }
.hero-meta { grid-row: 4; position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 0 18px; border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
@media (min-width: 900px) {
  .hero-foot { grid-template-columns: 1fr 1fr; }
  .hero-note { justify-self: end; text-align: left; }
  .emblem { left: 56%; }                         /* clear of the hook's longest line */
}
/* On phones the emblem stands between the wordmark and the hook, not behind the text. */
@media (max-width: 899px) {
  .hero { grid-template-rows: auto minmax(34svh, 1fr) auto auto; }
  .emblem { position: relative; grid-row: 2; grid-column: 1; left: auto; bottom: auto; translate: none; justify-self: center; align-self: stretch;
    height: auto; margin-top: 8px; }
  /* one line on a phone: the icons speak for themselves */
  .hero-meta { font-size: 11px; letter-spacing: .05em; }
  .hero-meta .social span { display: none; }
  .hero-meta .social a:first-of-type { margin-left: -10px; }
}
.xp { white-space: nowrap; }

/* the scroll cue (left edge, mid-screen, mirroring the section lines): "Scroll" set upright,
   a mouse whose wheel rolls down, a line with a mark running down it. It fades once you scroll. */
.scroll-cue { position: absolute; z-index: 3; left: var(--gutter); top: 50%; translate: 0 -50%;
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 6px 4px;
  color: color-mix(in srgb, var(--paper) 78%, var(--ink)); text-decoration: none; }
.scroll-cue > * { transition: opacity 600ms var(--ease-out), translate 600ms var(--ease-out); }
.scroll-cue.away > * { opacity: 0; translate: 0 14px; }
.scroll-cue.away { pointer-events: none; }
.sc-l { writing-mode: vertical-rl; rotate: 180deg; font: 500 12px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; }
.sc-m { position: relative; width: 22px; height: 34px; border: 1.5px solid currentColor; border-radius: 12px; }
.sc-m i { position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--saffron);
  animation: sc-wheel 1.8s var(--ease-out) infinite; }
.sc-t { position: relative; width: 1.5px; height: 56px; overflow: hidden; background: color-mix(in srgb, currentColor 30%, transparent); }
.sc-t i { position: absolute; inset: 0; background: var(--saffron); translate: 0 -100%; animation: sc-run 1.8s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes sc-wheel { 0% { translate: 0 0; opacity: 0; } 15% { opacity: 1; } 65%, 100% { translate: 0 11px; opacity: 0; } }
@keyframes sc-run { 0% { translate: 0 -100%; } 55% { translate: 0 0; } 100% { translate: 0 100%; } }
.scroll-cue:hover .sc-m { border-color: var(--saffron); }
@media (max-width: 899px) {
  /* phones: in Diana's row, so it always sits between the wordmark and the hook */
  .scroll-cue { grid-row: 2; grid-column: 1; position: relative; top: auto; translate: none; left: auto;
    align-self: center; justify-self: start; margin-left: -6px; gap: 9px; }
  .sc-m { width: 18px; height: 28px; }
  .sc-m i { top: 5px; height: 6px; }
  .sc-t { height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .sc-m i, .sc-t i { animation: none; } .sc-t i { translate: 0 0; } }
.xp-s { display: none; }
@media (max-width: 379px) {
  .xp-l { display: none; }
  .xp-s { display: inline; }
}

/* ---------- 2. success by design (sxlvx .gx) ---------- */
.gx { position: relative; background: var(--paper); color: var(--ink); overflow: hidden; padding: 12vh 0; }
.gx-st { display: inline-block; font: 400 clamp(40px, 6.4vw, 104px)/1 var(--display); padding: .1em .24em .02em;
  text-transform: uppercase; white-space: nowrap; }
.gx-st.a { background: var(--jacaranda); rotate: -4deg; }
.gx-st.b { background: var(--coral); rotate: 3deg; margin: .08em 0 0 .8em; }
.gx-tags { margin: 0; font-weight: 400; }
.gx-intro { padding: 0 var(--gutter); margin-bottom: 8vh; }
.gx-p { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.5; margin: 1.6em 0 0; max-width: 30em; }
.gx-bg { display: none; }
.gx-track { display: flex; flex-wrap: wrap; align-items: center; gap: .12em .26em; margin: 0; padding: 0 var(--gutter);
  font: 400 clamp(56px, 7.4vw, 116px)/1 var(--display); text-transform: uppercase; }
.gx-i { display: inline-block; }
.gx-w.g { color: var(--grey-word); }
/* the payoff, "Success by design.": one line on wide screens, stacked on phones so it fits */
.gx-end, .gx-end-b { display: contents; }
@media (max-width: 767px) {
  .gx.on .gx-end { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .04em; line-height: .92; }
  .gx.on .gx-end-b { display: inline-flex; gap: .26em; }
  .gx.on .gx-end { margin-left: 3em; }          /* clear of the improvement tag hanging before it */
}
/* Phones (site.js adds .stack), Kelvin Nov 2026: still sliding sideways, but one page at a time.
   Each idea (.gx-ln) is a screen-wide page, set over a few lines; the slider holds on it while the
   cursor writes it, then slides on to the next, so at any moment you see one whole service line.
   Wide screens: the groups are invisible to the layout and the sentence is one sliding line. */
.gx-ln { display: contents; }
.gx.on.stack .gx-track { top: calc(var(--bar-h) + 3svh); height: 58svh; translate: none; align-items: stretch; gap: 0;
  padding: 0 0 0 100vw; font-size: min(50px, 12.6vw); line-height: .98; }
.gx.on.stack .gx-ln { display: flex; flex: none; width: 100vw; padding: 0 var(--gutter); white-space: normal;
  flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; text-align: center; gap: .08em .2em; }
.gx.on.stack .gx-tag { width: auto; height: auto; order: 10; }   /* each tag after its idea's words, so they read straight through */
.gx.on.stack .gx-pen { order: 9; }
.gx.on.stack .gx-tag > span { position: static; display: inline-block; translate: none; font-size: 13px; padding: 8px 12px 7px; margin: .28em 0 0; }
.gx.on.stack .gx-pen { width: 1.6em; }
.gx.on.stack .gx-shape { width: .8em; height: .8em; }
/* no hover on a phone: the link arrow always shows, once its highlight is drawn (--arw, site.js) */
.gx.on.stack a.gx-box b::after { opacity: var(--arw, 1); translate: 0 calc((1 - var(--arw, 1)) * .3em); }
.gx.on.stack .gx-end { display: inline-flex; flex-direction: column; align-items: center; gap: .02em; margin: 0; line-height: .92; font-size: 1.3em; }   /* the payoff, big */
.gx.on.stack .gx-end-b { display: inline-flex; gap: .22em; }
.gx-box { position: relative; padding: .07em .18em 0; }
.gx-box i { position: absolute; inset: 0; background: var(--bg); transform-origin: 0 50%; display: block; }
.gx-box b { position: relative; display: inline-block; font-weight: 400; color: var(--fg); }
.gx-tag { position: relative; display: inline-block; width: 0; height: 1em; z-index: 3; }
/* highlighted words and their tags are links to the service pages */
a.gx-box, a.gx-tag { text-decoration: none; cursor: pointer; }
a.gx-box b::after { content: '\2197'; display: inline-block; font-size: .32em; vertical-align: top; margin: .2em 0 0 .12em;
  opacity: 0; translate: -4px 4px; transition: opacity 180ms var(--ease-out), translate 180ms var(--ease-out); }
a.gx-box:hover b::after, a.gx-box:focus-visible b::after { opacity: 1; translate: 0 0; }
a.gx-tag > span { transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out); }
a.gx-tag:hover > span, a.gx-tag:focus-visible > span { background: var(--ink); color: var(--paper); }
.gx-tag > span { position: absolute; left: -3.2em; top: calc(50% + var(--dy) * 3.4em); translate: 0 -50%; rotate: var(--r);
  background: var(--bg); color: var(--fg); font: 500 .17em/1 var(--mono); letter-spacing: .06em; text-transform: none;
  padding: .55em .85em .5em; white-space: nowrap; box-shadow: 0 .4em 1.2em rgb(36 23 15 / .1); }
.gx-shape { position: relative; width: .86em; height: .86em; }
.gx-shape svg { width: 100%; height: 100%; display: block; }
.gx-sel { position: absolute; inset: -.05em; border: 2px solid var(--ink); opacity: 0; pointer-events: none; }
.gx-sel u { position: absolute; width: 8px; height: 8px; background: var(--paper); border: 2px solid var(--ink); }
.gx-sel u:nth-child(1) { left: -5px; top: -5px; } .gx-sel u:nth-child(2) { right: -5px; top: -5px; }
.gx-sel u:nth-child(3) { left: -5px; bottom: -5px; } .gx-sel u:nth-child(4) { right: -5px; bottom: -5px; }
.gx-pen { width: 2.6em; }
.gx-pen svg { width: 100%; display: block; overflow: visible; }
.gx-pen .c { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.gx-pen .h { stroke: #9B7BE0; stroke-width: 2.5; }
.gx-pen .k { fill: var(--paper); stroke: #9B7BE0; stroke-width: 3; }
.gx-pen .a { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.gx-cur { display: none; }

/* pinned version, switched on by site.js (never without JS, never under reduced motion) */
.gx.on { height: 680vh; padding: 0; overflow: visible; }   /* more scroll per idea: nothing has to be caught */
.gx.on .gx-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.gx.on .gx-intro { position: absolute; left: 0; top: 50%; translate: 0 -50%; margin: 0; z-index: 4; }
.gx.on .gx-bg { display: block; position: absolute; left: 0; top: 50%; translate: 0 -50%; z-index: 0; pointer-events: none;
  font: 400 46vh/.8 var(--display); color: var(--ghost); white-space: nowrap; text-transform: uppercase; }
.gx.on .gx-track { position: absolute; left: 0; top: 50%; translate: 0 -50%; flex-wrap: nowrap; white-space: nowrap;
  padding: 0 22vw 0 100vw; z-index: 2; }
.gx.on .gx-cur { display: block; position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; }
.gx-cur svg { position: absolute; display: none; width: 42px; height: 42px; overflow: visible; }
.gx-cur[data-i=arrow] .i-arrow, .gx-cur[data-i=text] .i-text, .gx-cur[data-i=pen] .i-pen,
.gx-cur[data-i=move] .i-move, .gx-cur[data-i=size] .i-size { display: block; }
.gx-cur .i-arrow { left: -6px; top: -4px; } .gx-cur .i-text, .gx-cur .i-move, .gx-cur .i-size { left: -21px; top: -21px; }
.gx-cur .i-pen { left: -3px; top: -3px; }
.gx-cur b { position: absolute; left: 24px; top: 32px; font: 500 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  background: var(--coral); color: var(--ink); padding: 5px 8px 4px; border-radius: 2px 8px 8px 8px; white-space: nowrap; }
@media (max-width: 767px) {
  .gx.on { height: 460vh; }
  .gx.on .gx-bg { font-size: 28vh; opacity: .5; }
  /* phones read it in passing, in daylight: the grey words a shade darker, the type a little bigger */
  .gx-track { font-size: 68px; }
  .gx-w.g { color: #625A50; }
  .gx-st.b { margin-left: .4em; }
  .gx-cur svg { width: 32px; height: 32px; }
  .gx-cur b { font-size: 11px; left: 18px; top: 24px; }
  /* phones: the intro sits higher so Diana's walk-in at the bottom never crosses the text */
  .gx.on .gx-intro { top: 40%; }
}

/* ---------- 3. highlighted thinking ----------
   Title after sxlvx.de ("Erfolgsgeschichten"): one word across the width, a handwritten note
   across it. Track after trionn.com ("Selected work"): without JS, under reduced motion and on
   phones it is a plain column (two up on wide screens); site.js adds .wide on wide screens to
   pin it and carry it sideways. */
.th { position: relative; background: var(--paper); color: var(--ink); }
/* one word across the width, a handwritten note across it: thinking and services share it */
.th-head, .big-title { position: relative; margin: 0; padding: 16vh var(--gutter) 9vh; text-align: center; font-weight: 400; }
.th-word, .big-word { display: block; font: 400 clamp(76px, 21.5vw, 330px)/.84 var(--display); text-transform: uppercase; white-space: nowrap; }
.th-word .ch, .big-word .ch { display: inline-block; }
.th-note, .big-note { position: absolute; left: 50%; top: 56%; translate: -18% 0; rotate: -7deg; white-space: nowrap; pointer-events: none;
  font: 400 clamp(44px, 9.5vw, 146px)/1 'Yellowtail', 'Brush Script MT', cursive; color: var(--coral);
  -webkit-text-stroke: .09em var(--paper); paint-order: stroke fill; }
.th-scroll { padding: 0 var(--gutter); }
.th-track { display: grid; gap: 64px 40px; }
.th-intro p, .th-end p { margin: 0 0 20px; max-width: 30ch; font-size: clamp(19px, 1.7vw, 26px); line-height: 1.35; }
.th-link { display: inline-flex; gap: 10px; padding: 12px 0 7px; border-bottom: 1.5px solid currentColor; text-decoration: none;
  font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.th-link::after, .th-go::after { content: '\2192'; transition: translate 300ms var(--ease-out); }
.th-link:hover::after { translate: 6px 0; }
.th-track > .mb { margin: 0 calc(-1 * var(--gutter)); }
@media (min-width: 900px) {
  .th-track { grid-template-columns: 1fr 1fr; }
  .th-intro, .th-end, .th-track > .mb { grid-column: 1 / -1; }
}
/* the card: one link, a picture, the kind of piece, its title, one line, and where it leads */
.th-card { display: block; color: inherit; text-decoration: none; }
.th-in { display: block; }
.th-cover { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 6px; background: var(--c);
  container-type: inline-size; }
.th-cover > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.th-meta { display: flex; align-items: center; gap: 14px; margin: 18px 0 12px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.th-kind { background: var(--c); padding: 6px 9px 5px; }
.th-time { color: var(--grey-word); }
.th-title { margin: 0; font: 400 clamp(28px, 2.5vw, 40px)/1 var(--display); text-transform: uppercase; max-width: 18ch; }
.th-line { display: block; margin-top: 10px; max-width: 44ch; font-size: 16px; line-height: 1.45; }
.th-go { display: inline-flex; gap: 10px; margin-top: 16px; padding-bottom: 6px; border-bottom: 1.5px solid currentColor;
  font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
@media (hover: hover) {
  .th-card:hover .th-cover > * { transform: scale(1.035); }
  .th-card:hover .th-go::after { translate: 6px 0; }
}
/* wide screens, pinned: one column per piece, divided by a hairline; the promise is the last panel */
.th.wide .th-scroll { padding: 0; }
.th.wide .th-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.th.wide .th-track { display: flex; gap: 0; width: max-content; height: 100%; }
.th.wide .th-col { flex: none; width: 50vw; height: 100%; padding: calc(var(--bar-h) + 8vh) 4.5vw 0;
  border-left: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.th.wide .th-intro, .th.wide .th-end { display: flex; flex-direction: column; justify-content: center; padding-top: var(--bar-h); }
.th.wide .th-intro { border-left: 0; padding-left: var(--gutter); }
.th.wide .th-end { align-items: center; text-align: center; }
.th.wide .th-card { width: min(100%, calc((100svh - var(--bar-h) - 8vh - 250px) * 1.5)); }
.th.wide .th-in { will-change: transform; }
.th.wide .th-track > .mb { flex: none; width: 100vw; height: 100%; margin: 0; }
.th.wide .mb-pin { height: 100%; min-height: 0; }
/* phones: the same track, a column nearly the screen's width (the next one peeks in at the edge) */
@media (max-width: 899px) {
  .th.wide .th-col { width: 84vw; padding: calc(var(--bar-h) + 6vh) 6vw 0; }
  .th.wide .th-intro { width: 88vw; padding-right: 8vw; }
  .th.wide .th-end { width: 92vw; padding: var(--bar-h) 8vw 0; }
  .th.wide .th-card { width: 100%; }
}

/* ---------- 4. the loop: a Möbius strip, after sxlvx.de's award globe ----------
   mobius.js draws it on a canvas; without it the four principles stand as a list. */
.mb { position: relative; background: var(--ink); color: var(--paper); }
.mb-pin { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.mb-head { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); top: calc(var(--bar-h) + 4vh);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 32px; pointer-events: none; }
.mb-title { margin: 0; font: 400 clamp(44px, 5.4vw, 84px)/.9 var(--display); text-transform: uppercase; }
.mb-meta { margin: .9em 0 0; font: 500 12px/1.7 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-align: right;
  color: color-mix(in srgb, var(--paper) 62%, var(--ink)); }
.mb-stage { position: absolute; top: 0; left: 0; right: 0; height: 100vh; height: 100svh; display: grid; place-content: center; padding: 30vh var(--gutter) 8vh; }
.mb-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mb-list li { font: 400 clamp(36px, 6vw, 72px)/1 var(--display); text-transform: uppercase; }
.mb-list b { font-weight: 400; }
.mb-list span { font: 500 13px/1 var(--mono); letter-spacing: .08em; color: color-mix(in srgb, var(--paper) 62%, var(--ink)); }
.mb-say { margin: 18px 0 0; font-size: 17px; color: color-mix(in srgb, var(--paper) 75%, var(--ink)); }
.mb.is-live .mb-list, .mb.is-live .mb-say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mb-portal { position: absolute; inset: 0; z-index: 4; background: var(--paper); clip-path: circle(0% at 50% 57%); pointer-events: none; }
/* Our pillars, after orionix.framer.website's "what we offer": a split in three. Left, a dial that
   turns with the scroll and brings each pillar's number to a dot in its colour (the numbers run on
   round it, 01 again after 04: a loop, never a row of steps). Middle, the pillars, sliding gently
   up as it turns, the current one bright and the next one dimmed below it. Right, the ring.
   Phones: the ring on top, the dial as an arc under it, the pillar below. Without motion the four
   stand together under the still loop and the dial is hidden. */
.mb-side { position: relative; z-index: 3; padding: 100vh var(--gutter) 64px; padding-top: 100svh; }
.mb-dial { display: none; }
.mb-ps { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.mb-p { border-top: 3px solid var(--c); padding-top: 16px; }
.mb-jp { margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.mb-jp span, .mb-jp i { white-space: nowrap; }
.mb-jp span { font: 900 28px/1 var(--jp); color: var(--c); }
.mb-jp i { font: 500 12px/1 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 70%, var(--ink)); }
.mb-name { margin: 0 0 14px; font: 400 clamp(34px, 4vw, 64px)/.92 var(--display); text-transform: uppercase; }
.mb-line { margin: 0; max-width: 34ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45; color: color-mix(in srgb, var(--paper) 86%, var(--ink)); }
.mb-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; }
.mb-chips a { display: inline-block; padding: 10px 15px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--paper) 26%, transparent);
  color: var(--paper); font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  transition: background-color 220ms var(--ease-out), color 220ms var(--ease-out), border-color 220ms var(--ease-out); }
.mb-chips a:hover, .mb-chips a:focus-visible { background: var(--c); border-color: var(--c); color: var(--ink); }

/* the split (site.js turns the dial and slides the pillars: --rot, and each pillar's translate) */
.mb.phases {
  --R: min(44svh, 30vw); --cx: calc(13vw - var(--R)); --cy: 54svh; --base: 0deg; --dir: 1; --gap: 24px;
  --line: 54svh; --step: .42;                                   /* the pillars: centre line, and spacing in screens */
  --ring-x: .765; --ring-y: .54; --ring-r: .215; --ring-rh: .4;  /* the ring, right (read by mobius.js) */
}
.mb.phases .mb-stage { height: auto; bottom: 0; }
.mb.phases .mb-side { position: absolute; inset: 0; padding: 0; pointer-events: none; }
.mb.phases .mb-dial { display: block; position: absolute; left: var(--cx); top: var(--cy); width: 0; height: 0; }
.mb-wheel { position: absolute; left: 0; top: 0; width: 0; height: 0; rotate: var(--rot, 0deg); will-change: rotate; }   /* its own layer: turning it repaints nothing */
.mb-face { position: absolute; left: calc(-1 * var(--R)); top: calc(-1 * var(--R)); width: calc(2 * var(--R)); height: calc(2 * var(--R)); overflow: visible;
  will-change: transform; }   /* the rim and ticks drawn once: the numbers fading never repaint them */
.mb-rim { fill: none; stroke: color-mix(in srgb, var(--paper) 26%, transparent); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.mb-ticks { fill: none; stroke: color-mix(in srgb, var(--paper) 22%, transparent); stroke-width: 16; stroke-dasharray: .22 2.78; }
.mb-mark { position: absolute; left: 0; top: 0; display: flex; gap: 6px; white-space: nowrap; will-change: opacity;
  transform-origin: 0 0;     /* round the dial's centre, not its own */
  transform:rotate(calc(var(--base) + var(--dir) * var(--k) * 30deg)) translateX(calc(var(--R) + var(--gap))) rotate(calc(-1 * var(--base))) translate(var(--tx, 0), var(--ty, -50%)); }
.mb-mark b { font: 400 clamp(40px, 4.4vw, 64px)/1 var(--display); color: color-mix(in srgb, var(--paper) 30%, var(--ink)); transition: color .5s var(--ease-out); }
.mb-mark i { position: absolute; left: 3px; top: calc(100% + 8px);     /* under the number, which sits on the dot's line */
  font: 500 12px/1 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--c);
  opacity: 0; transition: opacity .5s var(--ease-out); }
.mb-mark.on b { color: var(--paper); }
.mb-mark.on i { opacity: 1; }
.mb-dot { position: absolute; left: calc(var(--R) * var(--dot-x, 1)); top: calc(var(--R) * var(--dot-y, 0)); width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--dc, var(--jacaranda)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--dc, var(--jacaranda)) 28%, transparent);
  transition: background-color .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.mb.phases .mb-ps { position: absolute; left: 24vw; width: 28vw; top: 0; bottom: 0; display: block;
  -webkit-mask-image: linear-gradient(transparent 26%, #000 36%, #000 80%, transparent 97%); mask-image: linear-gradient(transparent 26%, #000 36%, #000 80%, transparent 97%); }
.mb.phases .mb-p { position: absolute; left: 0; right: 0; top: var(--line); border-top: 0; padding: 0; translate: 0 -50%; will-change: translate, opacity; }
.mb.phases .mb-p.on { pointer-events: auto; }
@media (max-width: 899px) {
  .mb.phases {
    --R: min(86vw, 440px); --cx: 50vw; --cy: calc(51svh - var(--R)); --base: 90deg; --dir: -1; --gap: 14px; --tx: -50%; --ty: 0;
    --dot-x: 0; --dot-y: 1; --line: 75svh; --step: .34;
    --ring-x: .5; --ring-y: .3; --ring-r: .4; --ring-rh: .2;
  }
  .mb.phases .mb-mark { flex-direction: column; align-items: center; gap: 6px; }  .mb.phases .mb-mark b { font-size: 38px; }
  .mb.phases .mb-mark i { position: static; font-size: 10px; }
  .mb.phases .mb-ps { left: var(--gutter); right: var(--gutter); width: auto;
    -webkit-mask-image: linear-gradient(transparent 59%, #000 62%, #000 94%, transparent 99%); mask-image: linear-gradient(transparent 59%, #000 62%, #000 94%, transparent 99%); }
  .mb.phases .mb-meta { display: none; }
  .mb.phases .mb-jp { margin-bottom: 8px; }
  .mb.phases .mb-jp span { font-size: 22px; }
  .mb.phases .mb-name { font-size: 32px; margin-bottom: 8px; }
  .mb.phases .mb-line { font-size: 15px; line-height: 1.4; }
  .mb.phases .mb-chips { gap: 6px; margin-top: 14px; }
  .mb.phases .mb-chips a { padding: 8px 11px 7px; font-size: 10.5px; }
}
@media (max-width: 767px) {
  .mb-name { font-size: 34px; }
  .mb-line { font-size: 16px; }
}
/* phones (and anywhere the track isn't wide): the loop pins itself while the camera flies in */
.mb.fly .mb-pin { position: sticky; top: 0; height: 100vh; height: 100svh; }
@media (max-width: 767px) {
  .mb-head { flex-direction: column; }
  .mb-meta { margin: 0; text-align: left; }
}

/* stand-in covers, drawn until the illustrations arrive (sized to their box with cq units) */
.cv { display: grid; color: var(--ink); }
.cv-words { background: var(--ink); align-content: center; justify-items: start; gap: 1.4cqw; padding: 0 9cqw; }
.cv-words span { font: 400 8.6cqw/1.02 var(--display); text-transform: uppercase; color: var(--paper);
  box-shadow: inset 0 -.3em 0 color-mix(in srgb, var(--c) 80%, transparent); padding: 0 .06em; }
.cv-target { background: var(--jacaranda); place-items: center; }
.cv-target svg { width: 74%; }
.cv-chart { background: var(--sage); place-items: center; }
.cv-chart svg { width: 76%; }
.cv-book { background: var(--coral); place-items: center; }
.cv-book-b { display: flex; flex-direction: column; width: 34cqw; aspect-ratio: .72; padding: 3.4cqw 3cqw 3cqw 4cqw; rotate: -6deg;
  background: var(--ink); color: var(--paper); box-shadow: 1.6cqw 2cqw 0 rgb(36 23 15 / .22);
  border-left: 1.3cqw solid color-mix(in srgb, var(--ink) 72%, var(--coral)); }
.cv-book-k { font: 500 1.9cqw/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--coral); }
.cv-book-t { margin-top: 2.6cqw; font: 400 4.5cqw/.95 var(--display); text-transform: uppercase; }
.cv-book-s { margin-top: auto; width: 60%; height: 1cqw; background: var(--saffron); }

/* ---------- 5. services preview (sxlvx.de "Was SXLVX macht") ----------
   One row per service: name, one line, its capabilities as chips, a tag to its page, and an
   illustration of the work with Diana's cursor. On wide screens each row sticks under the header
   and the next slides up over it. */
.sv { background: var(--paper); color: var(--ink); padding-bottom: 12vh; }
/* with the flight running, services slides up over the loop's last held screen (site.js) */
.sv.lift { position: relative; margin-top: -100vh; margin-top: -100svh; }
.sv .big-word { font-size: clamp(64px, 17vw, 260px); }
.sv-list { padding: 0 var(--gutter); }
.sv-item { display: grid; gap: 28px; padding: 40px 0 48px; background: var(--paper);
  border-top: 1px solid color-mix(in srgb, var(--ink) 70%, transparent); }
.sv-title { margin: 0; font: 400 clamp(52px, 7vw, 112px)/.9 var(--display); text-transform: uppercase; }
.sv-title a { text-decoration: none; }
.sv-title .ch { display: inline-block; }
.sv-title .mask { display: inline-block; overflow: clip; padding-bottom: .04em; vertical-align: top; }
.sv-short { margin: 14px 0 22px; max-width: 34ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.45; }
.sv-sub { margin: 0 0 10px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.sv-chips { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 560px; }
.sv-chips a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--ink) 26%, transparent); font: 500 12px/1 var(--mono); letter-spacing: .03em;
  transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out); }
.sv-chips a:hover { background: var(--c); border-color: var(--c); }
.sv-tag { display: inline-flex; gap: 8px; padding: 9px 12px 8px; background: var(--c); color: var(--ink); rotate: -2deg; text-decoration: none;
  font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out); }
.sv-tag::after { content: '\2192'; }
.sv-tag:hover { background: var(--ink); color: var(--paper); }
.sv-art { display: block; border-radius: 18px; background: var(--c); overflow: hidden; aspect-ratio: 16 / 10; }
.sv-art svg { display: block; width: 100%; height: 100%; }
/* phones too (Kelvin, Nov 2026): the rows stack as on wide screens, each held while the next slides up
   over it. A row is taller than a phone's screen, so it holds once its bottom reaches the screen's
   bottom (--sv-top, sitenav.js measures it); wide screens hold it under the header, as before. */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .sv-item { position: sticky; top: var(--sv-top, var(--bar-h)); box-shadow: 0 -18px 32px -26px color-mix(in srgb, var(--ink) 55%, transparent); }
}
@media (min-width: 900px) {
  .sv-item { position: sticky; top: var(--bar-h); grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 6vw; align-items: center;
    padding: 44px 0 52px; min-height: min(560px, calc(100svh - var(--bar-h))); }
  .sv-art { max-height: calc(100svh - var(--bar-h) - 110px); justify-self: end; width: 100%; }
}

/* the illustrations: each loop runs 5.2 s, only while its row is on screen (.play), never under reduced motion */
.sv-art * { transform-box: fill-box; }
.sv-item.play .a-stamp { animation: a-stamp 5.2s cubic-bezier(.5, 0, .3, 1) infinite; }
.sv-item.play .a-mark { animation: a-mark 5.2s linear infinite; transform-origin: center; }
.sv-item.play .a-tick { animation: a-tick 5.2s linear infinite; }
.sv-item.play .a-tick1 { animation-delay: .25s; } .sv-item.play .a-tick2 { animation-delay: .5s; }
@keyframes a-stamp { 0%, 8% { transform: translate(70px, -60px); } 34% { transform: translate(0, -18px); } 40% { transform: translate(0, 0) scale(1.03, .95); }
  46% { transform: translate(0, -10px); } 70%, 100% { transform: translate(70px, -60px); } }
@keyframes a-mark { 0%, 39% { opacity: 0; transform: scale(.7); } 43% { opacity: 1; transform: scale(1.08); } 48%, 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes a-tick { 0%, 10% { stroke-dashoffset: 1; } 22%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }

.sv-item.play .a-node { animation: a-node 5.2s cubic-bezier(.5, 0, .3, 1) infinite; }
.sv-item.play .a-wire { animation: a-wire 5.2s linear infinite; }
.sv-item.play .a-token { animation: a-token 5.2s cubic-bezier(.45, 0, .55, 1) infinite; }
.sv-item.play .a-done { animation: a-done 5.2s linear infinite; transform-origin: center; }
.sv-item:not(.play) .a-token { transform: translateX(248px); }
@keyframes a-node { 0%, 6% { transform: translate(-20px, 70px) rotate(-6deg); } 30%, 100% { transform: none; } }
@keyframes a-wire { 0%, 30% { opacity: .15; } 36%, 100% { opacity: 1; } }
@keyframes a-token { 0%, 36% { transform: translateX(0); opacity: 0; } 40% { opacity: 1; } 56% { transform: translateX(124px); } 62% { transform: translateX(124px); }
  80%, 92% { transform: translateX(248px); opacity: 1; } 100% { transform: translateX(248px); opacity: 0; } }
@keyframes a-done { 0%, 78% { opacity: 0; transform: scale(.4); } 84% { opacity: 1; transform: scale(1.12); } 88%, 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

.sv-item.play .a-pi { animation: a-pi 5.2s cubic-bezier(.3, 1.4, .5, 1) infinite; transform-origin: 50% 100%; }
.sv-item.play .a-p1 .a-pi { animation-delay: .9s; } .sv-item.play .a-p2 .a-pi { animation-delay: 1.8s; }
.sv-item.play .a-lift { animation: a-lift 5.2s cubic-bezier(.5, 0, .3, 1) infinite; }
.sv-item.play .a-star { animation: a-star 5.2s linear infinite; transform-origin: center; }
@keyframes a-pi { 0%, 6% { transform: translateY(10px) scale(.85); opacity: .35; } 16%, 86% { transform: none; opacity: 1; } 100% { transform: translateY(10px) scale(.85); opacity: .35; } }
@keyframes a-lift { 0%, 4% { transform: translate(0, 0); } 22% { transform: translate(90px, -46px); } 40% { transform: translate(180px, -92px); } 60%, 80% { transform: translate(214px, -120px); } 100% { transform: translate(0, 0); } }
@keyframes a-star { 0%, 52% { opacity: 0; scale: .3; } 60% { opacity: 1; scale: 1.15; } 66%, 88% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }

.sv-item.play .a-line { animation: a-line 5.2s cubic-bezier(.5, 0, .3, 1) infinite; }
.sv-item.play .a-end, .sv-item.play .a-cur2 { animation: a-end 5.2s linear infinite; }
.sv-item.play .a-loop { animation: a-loop 5.2s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes a-line { 0%, 6% { stroke-dashoffset: 1; } 46%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes a-end { 0%, 44% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes a-loop { 0%, 46% { rotate: 0deg; } 86%, 100% { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .sv-item .sv-art * { animation: none !important; } .sv-chips a, .sv-tag { transition: none; } }

/* ---------- 6. FAQ (sxlvx.de) ----------
   Left: a handwritten "FAQ", a big title, a button. Right: dark pills that open in place.
   Without JS every answer is open; site.js closes them and makes them toggle. */
.faq { display: grid; gap: 40px 6vw; padding: 14vh var(--gutter) 16vh; background: var(--paper); color: var(--ink); }
.faq-badge { margin: 0 0 -.08em; font: 400 clamp(56px, 7vw, 96px)/1 'Yellowtail', 'Brush Script MT', cursive; color: var(--coral); rotate: -6deg; width: fit-content; }
.faq-title { margin: 0 0 32px; font: 400 clamp(52px, 7.4vw, 116px)/.92 var(--display); text-transform: uppercase; max-width: 9ch; }
.btn-line { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 24px; border-radius: 999px; border: 1.5px solid var(--ink);
  font: 500 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  transition: background-color 220ms var(--ease-out), color 220ms var(--ease-out); }
.btn-line::before { content: ''; width: 18px; height: 1.5px; background: currentColor; transition: width 300ms var(--ease-out); }
.btn-line::after { content: '\2192'; }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-line:hover::before { width: 28px; }
.faq-list { display: grid; gap: 12px; align-content: start; }
.faq-item { background: var(--ink); color: var(--paper); border-radius: 22px; overflow: hidden; }
.faq-item h3 { margin: 0; font: inherit; }
.faq-q { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 18px 16px 24px;
  background: none; border: 0; color: inherit; text-align: left; cursor: pointer; font: 600 17px/1.35 var(--body); touch-action: manipulation; }
.faq-q i { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--paper) 14%, transparent);
  transition: rotate 450ms cubic-bezier(.2, .8, .2, 1), background-color 300ms var(--ease-out); }
.faq-q i::before, .faq-q i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; translate: -50% -50%; background: currentColor; border-radius: 2px; }
.faq-q i::after { rotate: 90deg; }
.faq-q[aria-expanded=true] i { rotate: 135deg; background: var(--saffron); color: var(--ink); }
.faq-q:hover i { background: color-mix(in srgb, var(--paper) 26%, transparent); }
.faq-q[aria-expanded=true]:hover i { background: var(--saffron); }
.faq-a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 560ms cubic-bezier(.2, .8, .2, 1); }
.faq-a > div { overflow: hidden; }
.faq-a p { margin: 0; padding: 0 24px 22px; max-width: 60ch; font-size: 16px; line-height: 1.6; color: color-mix(in srgb, var(--paper) 80%, var(--ink));
  transition: opacity 400ms var(--ease-out), translate 500ms var(--ease-out); }
.faq.js .faq-item:has(.faq-q[aria-expanded=false]) .faq-a { grid-template-rows: 0fr; }
.faq.js .faq-item:has(.faq-q[aria-expanded=false]) .faq-a p { opacity: 0; translate: 0 -6px; }
@media (min-width: 900px) {
  .faq { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
  .faq-l { position: sticky; top: calc(var(--bar-h) + 6vh); }
}
@media (prefers-reduced-motion: reduce) { .faq-a, .faq-a p, .faq-q i, .btn-line, .btn-line::before { transition: none; } }

/* ---------- page transition (after trionn.com): bands close the page, the destination is named
   between four crosshairs, dark bands sweep up, and the next page opens out of them. ---------- */
.tx { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.tx.on { pointer-events: auto; }
.tx-b { position: absolute; left: 0; right: 0; height: calc(100% / 8 + 1px); transform: scaleY(0); }
.tx-p { background: var(--ghost); transform-origin: 50% 100%; }
.tx-k { background: var(--ink); transform-origin: 50% 100%; }
.tx-mid { position: absolute; inset: 0; opacity: 0; }
/* centred with left/right, not translate: GSAP owns this element's transform */
.tx-label { position: absolute; left: 10vw; right: 10vw; top: calc(50% - 30px); text-align: center;
  font: 500 13px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.tx-line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: color-mix(in srgb, var(--ink) 55%, transparent);
  transform: scaleX(0); transform-origin: 0 50%; }
.tx-x { position: absolute; width: 15px; height: 15px; translate: -50% -50%; }
.tx-x::before, .tx-x::after { content: ''; position: absolute; background: color-mix(in srgb, var(--ink) 60%, transparent); }
.tx-x::before { left: 7px; top: 0; width: 1px; height: 15px; }
.tx-x::after { left: 0; top: 7px; width: 15px; height: 1px; }
/* arriving through a transition: covered from the first paint until the bands open */
html.tx-in body::after { content: ''; position: fixed; inset: 0; z-index: 200; background: var(--ink); }

/* ---------- next ---------- */
.next { background: var(--ink); color: var(--paper); padding: 96px var(--gutter) 120px; }
.next h2 { font: 400 clamp(40px, 8vw, 110px)/.95 var(--display); text-transform: uppercase; margin: 0 0 24px; max-width: 12ch; }
.next p { margin: 0 0 16px; max-width: 46ch; }
.next .next-label { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--saffron); margin-bottom: 20px; }
.next h2 { max-width: 16ch; }
.next-in { width: 100%; }
.todo { opacity: .7; font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  .bar, .burger span, .cta, .social a, .cta-face img, .btn, .post-row h3 { transition: none !important; }
}

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

/* ---------- 7. in their words (sxlvx.de "Was Kunden sagen"), Diana as the picture ----------
   Diana on the left presenting a deck of quote cards: the top card read, the next two peeking out
   behind it, tilted. site.js makes it a deck (.tm.deck) that takes any number of quotes; without
   JS the cards sit in a row you can swipe through. */
.tm { position: relative; background: var(--paper); color: var(--ink); padding-bottom: 14vh; overflow: clip; }
.tm-head.big-title { padding-top: 12vh; padding-bottom: 6vh; }
.tm-body { display: grid; gap: 24px; padding: 0 var(--gutter); align-items: end; }
.tm-diana { position: relative; justify-self: start; width: min(44vw, 260px); aspect-ratio: 305 / 500; }
.tm-diana::after { content: ''; position: absolute; left: 12%; right: 18%; bottom: -1.5%; height: 5%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ink) 26%, transparent), transparent); }
.tm-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; user-select: none;
  transition: opacity 260ms var(--ease-out); }
.tm-img-b { opacity: 0; }
.tm-diana.nod .tm-img { opacity: 0; }
.tm-diana.nod .tm-img-b { opacity: 1; }
.tm-stage { min-width: 0; }
.tm-deck { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 24px; outline: none; }
.tm-card { flex: none; width: min(86%, 520px); scroll-snap-align: start; margin: 0; padding: 28px 28px 26px; border-radius: 28px;
  background: var(--c); color: var(--ink); display: flex; flex-direction: column; gap: 22px; min-height: 340px; }
.tm-card blockquote { margin: 0; flex: 1; }
.tm-card blockquote p { margin: 0; font: 400 clamp(20px, 1.8vw, 26px)/1.4 var(--body); }
.tm-card blockquote p::before { content: '\201C'; }
.tm-card blockquote p::after { content: '\201D'; }
.tm-card figcaption { display: grid; gap: 2px; font-size: 16px; }
.tm-card figcaption b { font-weight: 600; }
.tm-card figcaption span { color: color-mix(in srgb, var(--ink) 66%, var(--c)); }
.tm-card.is-todo blockquote p { font-style: italic; }
.tm-stars { display: flex; gap: 6px; color: color-mix(in srgb, var(--ink) 30%, var(--c)); }
.tm-stars svg { width: 24px; height: 24px; fill: currentColor; }
.tm-ctl { display: none; }
.tm-deck:focus-visible { outline: 2px solid var(--saffron); outline-offset: 6px; border-radius: 30px; }

/* the deck */
.tm.deck .tm-deck { display: grid; overflow: visible; padding: 0; margin: 0 0 0 4px; touch-action: pan-y; }
.tm.deck .tm-card { grid-area: 1 / 1; width: auto; max-width: 560px; min-height: 0; height: 100%; cursor: grab; user-select: none;
  box-shadow: 0 24px 50px -34px color-mix(in srgb, var(--ink) 55%, transparent);
  transform: translate(calc(var(--dx, 0px) + var(--d, 0) * 22px), calc(var(--d, 0) * 16px)) rotate(calc(var(--r, -2deg) + var(--dr, 0deg))) scale(calc(1 - var(--d, 0) * .045));
  transition: transform 760ms cubic-bezier(.2, .85, .25, 1), opacity 500ms var(--ease-out); }
.tm.deck .tm-card[data-d="0"] { z-index: 5; --r: -2deg; }
.tm.deck .tm-card[data-d="1"] { z-index: 4; --d: 1; --r: 3.5deg; }
.tm.deck .tm-card[data-d="2"] { z-index: 3; --d: 2; --r: -4.5deg; }
.tm.deck .tm-card[data-d="far"] { z-index: 1; --d: 3; opacity: 0; }
.tm.deck .tm-card[data-d="out"] { z-index: 6; opacity: 0; transform: translate(-115%, 40px) rotate(-14deg); }
.tm.deck .tm-card.drag { transition: none; cursor: grabbing; }
.tm.deck .tm-card.snap { transition: none; }
.tm.deck .tm-ctl { display: flex; align-items: center; gap: 14px; margin-top: 44px; flex-wrap: wrap; }
.tm-btn { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--ink); background: none; color: var(--ink); cursor: pointer;
  font: 400 22px/1 var(--body); touch-action: manipulation; transition: background-color 220ms var(--ease-out), color 220ms var(--ease-out); }
.tm-btn:hover { background: var(--ink); color: var(--paper); }
.tm-count { margin: 0 6px; font: 500 14px/1 var(--mono); letter-spacing: .08em; min-width: 7ch; text-align: center; }
.tm-count b { font-weight: 500; font-size: 22px; }
.tm-bars { display: flex; gap: 6px; flex: 1 1 120px; max-width: 260px; }
.tm-bars i { position: relative; overflow: hidden; flex: 1; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 16%, transparent); transition: background-color 400ms var(--ease-out); }
.tm-bars i.on { background: color-mix(in srgb, var(--ink) 30%, transparent); }
/* the current card's time running out (voices.js sets --k, 0 → 1); full when it doesn't go on its own */
.tm-bars i::after { content: ''; position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; scale: var(--k, 0) 1; }
.tm:not(.deck) .tm-bars i.on::after { scale: 1 1; }
@media (min-width: 900px) {
  .tm-body { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4vw; padding-right: 8vw; }
  .tm-diana { width: min(26vw, 360px, calc(62svh * 305 / 500)); justify-self: end; }
}
@media (max-width: 899px) {
  /* phones: Diana stands beside the controls, presenting the deck below her */
  .tm.deck .tm-body { grid-template-columns: auto 1fr; align-items: end; gap: 0 12px; }
  .tm.deck .tm-diana { grid-column: 1; grid-row: 1; width: 34vw; max-width: 170px; }
  .tm.deck .tm-stage { display: contents; }
  .tm.deck .tm-ctl { grid-column: 2; grid-row: 1; margin: 0 0 18px; gap: 10px; }
  .tm.deck .tm-bars { flex-basis: 100%; max-width: none; }
  .tm.deck .tm-deck { grid-column: 1 / -1; grid-row: 2; margin: 24px 20px 0 0; }
  .tm-card { padding: 24px 22px 22px; border-radius: 24px; }
  .tm-btn { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .tm.deck .tm-card, .tm-img, .tm-btn, .tm-bars i { transition: none; } }

/* ---------- 8. the close (sxlvx.de's CTA): the promise in two rows running past each other on
   their own, one filled and one outlined, then one big button; Diana walks in from the right and
   stands at its end, and the button stretches out under her as she arrives (site.js) ---------- */
.cl { position: relative; background: var(--paper); color: var(--ink); padding: 12vh 0 14vh; overflow: clip; text-align: center; }
.cl-label { margin: 0 0 4vh; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--coral); }
.cl-rows { display: grid; gap: .1em; font-size: clamp(46px, 12vw, 190px); }
/* the rows run by themselves, slowly, opposite ways, round and round (not tied to the scroll; sxlvx's
   ticker). Each row holds its text twice, so sliding it half its length lands where it began. */
.cl-row { margin: 0; display: flex; width: max-content; white-space: nowrap; font: 400 1em/.95 var(--display); text-transform: uppercase;
  will-change: transform; animation: cl-run var(--dur, 80s) linear infinite; animation-play-state: paused; }
.cl.run .cl-row { animation-play-state: running; }
@keyframes cl-run { to { transform: translate3d(-50%, 0, 0); } }
.cl-row span { padding-right: .3em; }
.cl-row i { font-style: normal; font-size: .4em; vertical-align: middle; color: var(--coral); }
.cl-row.b { color: transparent; -webkit-text-stroke: 1.5px var(--ink); margin-left: -30vw; animation-direction: reverse; }
.cl-row.b i { -webkit-text-stroke: 0; color: var(--saffron); }
/* room above the button for Diana standing at its end */
.cl-btn { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 22px; margin: clamp(150px, 26vh, 250px) auto 0;
  padding: 14px calc(14px + var(--tail, 0px)) 14px 40px;
  border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; font: 400 clamp(26px, 4vw, 56px)/1 var(--display); text-transform: uppercase;
  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--ink) 70%, transparent); transition: background-color 240ms var(--ease-out); }
.cl-btn-a { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--saffron); color: var(--ink); overflow: hidden; }
.cl-btn-a svg { width: 55%; height: 55%; transition: translate 400ms var(--ease-out); }
.cl-btn:hover { background: color-mix(in srgb, var(--ink) 86%, var(--coral)); }
.cl-btn:hover .cl-btn-a svg { translate: 4px 0; }
.cl-text { margin: 6vh auto 0; max-width: 34ch; padding: 0 var(--gutter); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.45; }
/* phones: one left edge (label, button, words), Diana on the right */
@media (max-width: 767px) {
  .cl { text-align: left; padding: 10vh 0 12vh; }
  .cl-label { padding: 0 var(--gutter); margin-bottom: 3vh; }
  .cl-row.b { -webkit-text-stroke-width: 1.3px; }
  .cl-btn { display: flex; width: fit-content; margin: clamp(130px, 19vh, 180px) 0 0 var(--gutter); padding: 10px calc(10px + var(--tail, 0px)) 10px 20px; gap: 12px; font-size: 24px; }
  .cl-text { margin: 4.5vh 0 0; max-width: calc(100% - 128px); font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .cl-row { animation: none; } }

/* ---------- the footer (every page), after sxlvx.de: one dark screen ---------- */
.ft { position: relative; background: var(--ink); color: var(--paper); overflow: clip; }
.ft-in { min-height: 100svh; display: flex; flex-direction: column; padding: calc(var(--bar-h) + 2.5vh) var(--gutter) 24px; }
.ft-lbl { display: flex; justify-content: space-between; margin: 0; padding-bottom: 18px; border-bottom: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  font: 500 13px/1 var(--mono); letter-spacing: .06em; color: color-mix(in srgb, var(--paper) 62%, var(--ink)); }
.ft-hero { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 40px; padding: 3.5vh 0 3.5vh; }
.ft-h { margin: 0; font: 400 clamp(52px, 5.8vw, 92px)/.9 var(--display); text-transform: uppercase; }
.ft-btn { display: inline-flex; align-items: center; gap: 18px; min-height: 64px; padding: 0 30px; border-radius: 999px; background: var(--paper); color: var(--ink);
  font: 600 18px/1 var(--body); text-decoration: none; transition: background-color 240ms var(--ease-out); }
.ft-btn span { transition: translate 300ms var(--ease-out); }
.ft-btn:hover { background: var(--saffron); }
.ft-btn:hover span { translate: 5px 0; }
.ft-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent); }
.ft-col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; font-size: 16px; }
.ft-col a { color: var(--paper); text-decoration: none; overflow-wrap: anywhere; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 320ms var(--ease-out); }
.ft-col a:hover { background-size: 100% 1px; }
.ft-col > span { color: color-mix(in srgb, var(--paper) 62%, var(--ink)); }
.ft-k { margin: 0 0 6px; font: 500 12px/1 var(--mono); letter-spacing: .06em; color: color-mix(in srgb, var(--paper) 50%, var(--ink)); }
.ft-clk { display: inline-flex; align-items: center; gap: 10px; }
.ft-clk i { width: 9px; height: 9px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 5px color-mix(in srgb, var(--sage) 20%, transparent); }
.ft-word { margin: auto 0 0; padding-top: 3vh; font: 400 17vw/.8 var(--display); text-transform: uppercase; white-space: nowrap; }
.ft-word span { display: inline-block; }
.ft-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent); font-size: 14px; color: color-mix(in srgb, var(--paper) 62%, var(--ink)); }
.ft-legal .social span { display: none; }
.ft-word { pointer-events: none; }   /* the big name spills over the links above it: clicks go through to them */
.ft-credit a { white-space: nowrap; }
.ft-credit a { color: var(--paper); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 320ms var(--ease-out); }
.ft-credit a:hover { background-size: 100% 1px; }
.ft-up { color: var(--paper); text-decoration: none; font: 500 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
@media (min-width: 900px) { .ft-row { grid-template-columns: 1.3fr 1fr 1.1fr .8fr .9fr; } }
@media (max-width: 899px) { .ft-in { padding-bottom: 104px; } .ft-mail { grid-column: 1 / -1; } }   /* clear of the dock; the addresses on one line each */

/* ---------- the dock (phones) and the section dots (desktop), every page ----------
   sxlvx.de's dock: "You are here", the section you're in, and the menu. On wide screens a
   column of dots on the right instead, one per section: click one to glide there. */
.dock { position: fixed; z-index: 55; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 6px; padding: 6px;
  border-radius: 999px; background: var(--ink); color: var(--paper); box-shadow: 0 0 0 1px color-mix(in srgb, var(--paper) 12%, transparent), 0 18px 40px -18px rgba(0, 0, 0, .6);
  transform: translate3d(-50%, 0, 0); transition: transform 600ms cubic-bezier(.22, 1, .36, 1), opacity 400ms; font-size: 14px; line-height: 1.2; }
.dock.away, html.menu-open .dock { transform: translate3d(-50%, 160%, 0); opacity: 0; pointer-events: none; }
.dock-home { display: block; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: var(--saffron); flex: none; }
.dock-home img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.dock-now { display: grid; padding: 0 10px 0 6px; min-width: 9.5em; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }   /* tap: the section lines open */
.dock-now small { font-size: 11px; color: color-mix(in srgb, var(--paper) 60%, var(--ink)); }
.dock-now span { font-weight: 600; white-space: nowrap; transition: opacity 220ms, translate 220ms; }
.dock-now span.swap { opacity: 0; translate: 0 6px; }
/* the scroll mark (sitenav.js): the wheel rolls down; on its side where the scroll carries the page sideways */
.dock-sc { position: relative; flex: none; width: 14px; height: 21px; margin: 0 8px 0 0; border: 1.5px solid color-mix(in srgb, var(--paper) 60%, var(--ink));
  border-radius: 8px; transition: rotate 600ms var(--ease-out), opacity 400ms, width 400ms var(--ease-out), margin 400ms var(--ease-out), border-width 400ms; }
.dock-sc i { position: absolute; left: 50%; top: 4px; width: 2px; height: 5px; margin-left: -1px; border-radius: 2px; background: var(--saffron);
  animation: sc-wheel-s 1.8s var(--ease-out) infinite; }
@keyframes sc-wheel-s { 0% { translate: 0 0; opacity: 0; } 15% { opacity: 1; } 65%, 100% { translate: 0 7px; opacity: 0; } }
.dock[data-sc=x] .dock-sc { rotate: -90deg; }      /* down becomes right: keep scrolling, it moves on sideways */
.dock[data-sc=off] .dock-sc { opacity: 0; width: 0; margin: 0; border-width: 0; }
@media (prefers-reduced-motion: reduce) { .dock-sc i { animation: none; } }
.dock-btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 16px; border: 0; border-radius: 999px; background: var(--paper); color: var(--ink);
  font: 600 15px/1 var(--body); cursor: pointer; touch-action: manipulation; }
.dock-btn i { position: relative; width: 18px; height: 10px; }
.dock-btn i::before, .dock-btn i::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
  transition: transform 450ms cubic-bezier(.76, 0, .24, 1), top 450ms cubic-bezier(.76, 0, .24, 1); }
.dock-btn i::before { top: 0; } .dock-btn i::after { top: 8px; }
html.sw-open .dock-btn i::before { top: 4px; transform: rotate(45deg); }
html.sw-open .dock-btn i::after { top: 4px; transform: rotate(-45deg); }
.dock-btn em { font-style: normal; }
/* wide screens too (Kelvin, Nov 2026: "crucial"): the same dock at the foot of the screen, next to the section lines */
/* …stepping aside in the footer there (it lists every page itself), so the footer stays one screen */
@media (min-width: 900px) { .dock.at-ft { transform: translate3d(-50%, 160%, 0); opacity: 0; pointer-events: none; } }
@media (hover: hover) { .dock-home:hover { box-shadow: 0 0 0 2px var(--saffron); } .dock-btn:hover { background: var(--saffron); } }

/* the section lines (after lialive.ai): short lines on the right edge, the one you're in longer and
   coral. Come near (the edge strip) and they spread apart, each name sliding out in a pill, one after
   another; the one under the pointer grows. Click: a slow glide there (sitenav.js). */
.dots { position: fixed; z-index: 55; right: 0; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; align-items: flex-end;
  padding: 8px 14px 8px 0; color: var(--ink); transition: color 320ms var(--ease-out), opacity 400ms; }
.dots::before { content: ''; position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 44px; height: max(100%, 64vh); }   /* the edge strip that opens them */
.dots.on-dark { color: var(--paper); }
.dots a { color: var(--ink); } .dots a.dk { color: var(--paper); }   /* each line its own (sitenav.js) */
.dots a { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 40px; height: 14px; text-decoration: none;
  transition: height 460ms var(--ease-out), color 320ms var(--ease-out); }
.dots a::after { content: ''; width: 10px; height: 3px; border-radius: 3px; background: currentColor; opacity: .55;
  transition: width 320ms var(--ease-out), opacity 300ms var(--ease-out), background-color 300ms, box-shadow 300ms; }
.dots a[aria-current=true]::after { width: 26px; opacity: 1; background: var(--coral); box-shadow: 0 0 10px color-mix(in srgb, var(--coral) 70%, transparent); }
.dots a span { position: absolute; right: calc(100% + 2px); padding: 8px 13px; border-radius: 9px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); background: color-mix(in srgb, var(--paper) 94%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ink); box-shadow: 0 6px 18px rgba(30, 20, 10, .12);
  font: 600 12px/1 var(--body); letter-spacing: .02em; opacity: 0; translate: 14px 0; pointer-events: none;
  transition: opacity 260ms var(--ease-out) 0ms, translate 420ms var(--ease-out) 0ms, background-color 200ms, border-color 200ms; }
.dots.on-dark a span { background: color-mix(in srgb, var(--ink) 88%, transparent); border-color: color-mix(in srgb, var(--paper) 22%, transparent); color: var(--paper); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.dots a[aria-current=true] span { border-color: var(--coral); }
/* opening: the lines spread, then the names come out top to bottom */
@media (hover: hover) { .dots:hover a { height: 40px; } }
.dots:has(:focus-visible) a, .dots.open a { height: 40px; }
.dots:has(:focus-visible) a span, .dots.open a span { opacity: 1; translate: 0 0; pointer-events: auto;
  transition-delay: calc(80ms + var(--i, 0) * 35ms), calc(80ms + var(--i, 0) * 35ms), 0ms, 0ms; }
@media (hover: hover) { .dots:hover a span { opacity: 1; translate: 0 0; pointer-events: auto;
  transition-delay: calc(80ms + var(--i, 0) * 35ms), calc(80ms + var(--i, 0) * 35ms), 0ms, 0ms; }
  .dots a:hover::after { width: 16px; opacity: .8; }
  .dots a[aria-current=true]:hover::after { width: 26px; opacity: 1; }
  .dots a:hover span { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 18%, var(--paper)); }
  .dots.on-dark a:hover span { background: color-mix(in srgb, var(--coral) 22%, var(--ink)); } }
.dots a:focus-visible::after { width: 16px; opacity: .8; }
.dots a[aria-current=true]:focus-visible::after { width: 26px; opacity: 1; }
.dots a:focus-visible span { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 18%, var(--paper)); }
.dots.on-dark a:focus-visible span { background: color-mix(in srgb, var(--coral) 22%, var(--ink)); }
.dots a[aria-current=true] span { font-weight: 700; }
.dots a:focus-visible { outline: none; }
html.menu-open .dots, .dots.idle { opacity: 0; pointer-events: none; }
/* phones (Kelvin, Nov 2026: "the side slider should also be on mobile"): the same lines, slimmer and
   tight to the edge; a tap on them (or on "You are here" in the dock) opens them over a soft veil,
   bigger names to tap; tap one to glide there, tap the veil to close */
.dots-veil { position: fixed; inset: 0; z-index: 54; background: color-mix(in srgb, var(--paper) 62%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 360ms var(--ease-out); }
html.dots-open .dots-veil { opacity: 1; pointer-events: auto; }
@media (max-width: 899px) {
  .dots { padding: 8px 4px 8px 0; }
  .dots::before { width: 30px; }
  .dots a { width: 30px; height: 12px; }
  .dots a::after { width: 8px; height: 2.5px; }
  .dots a[aria-current=true]::after { width: 18px; }
  .dots.open a { height: 50px; }
  .dots a span { right: calc(100% + 4px); font-size: 15px; padding: 11px 16px; border-radius: 11px; }
}
@media (prefers-reduced-motion: reduce) { .dock, .dock-now span, .dots, .dots a, .dots a::after, .dots a span { transition: none !important; } }

/* ---------- the phone menu (switcher.js), after sxlvx.de's: the page shrinks into a card at the
   top of a dark screen, six app tiles under it, then chips ---------- */
.mx-card { position: relative; z-index: 1; background: var(--paper);
  transition: transform 850ms cubic-bezier(.76, 0, .24, 1), clip-path 850ms cubic-bezier(.76, 0, .24, 1); }
html.sw-moving .bar { transition: color 320ms var(--ease-out), background-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out), transform 850ms cubic-bezier(.76, 0, .24, 1); }   /* only while the menu moves: GSAP animates the bar on load */
html.sw-open body { background: var(--ink); }
html.sw-open .mx-card { cursor: pointer; }
html.sw-open .mx-card * { pointer-events: none; }
html.sw-open .diana, html.sw-open .dots, html.sw-open .dots-veil { opacity: 0 !important; pointer-events: none; transition: opacity 300ms; }
.sw { position: fixed; inset: 0; z-index: 0; background: var(--ink); color: var(--paper); visibility: hidden; overflow: hidden;
  transition: visibility 0s linear 850ms; font-size: 15px; line-height: 1.3; }
html.sw-open .sw { visibility: visible; transition: none; }
html:not(.sw-open) .sw * { visibility: hidden !important; transition: visibility 0s linear 850ms !important; }
.sw-in { position: absolute; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); width: calc(100% - 32px); max-width: 520px; translate: -50% 0;
  display: flex; flex-direction: column; gap: 12px; overflow-y: auto; scrollbar-width: none; padding-bottom: 8px; }
.sw-in::-webkit-scrollbar { display: none; }
.sw-lbl { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding-bottom: 8px; font: 500 12px/1 var(--mono); letter-spacing: .04em;
  color: color-mix(in srgb, var(--paper) 58%, var(--ink)); border-bottom: 1px solid color-mix(in srgb, var(--paper) 14%, transparent); }
.sw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; width: min(100%, 330px); margin: 0 auto; }
.sw-t { display: flex; flex-direction: column; gap: 6px; color: var(--paper); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.sw-ti { position: relative; aspect-ratio: 1; border-radius: 24%; overflow: hidden; transition: transform 450ms cubic-bezier(.22, 1, .36, 1); }
.sw-t:active .sw-ti { transform: scale(.94); }
.sw-ti b { position: absolute; z-index: 2; left: 12%; top: 10%; font: 600 12px/1 var(--mono); color: var(--paper); mix-blend-mode: difference; }
.sw-n { font: 600 13px/1.2 var(--body); text-align: center; }
.sw-t[aria-current] .sw-n { color: var(--saffron); }
.sw-t[aria-current] .sw-ti { box-shadow: 0 0 0 2px var(--saffron); }
.sw-t:focus-visible, .sw-chip:focus-visible { outline: 2px solid var(--saffron); outline-offset: 3px; }
.sw-art { position: absolute; inset: 0; display: block; }
.sw-art svg { width: 100%; height: 100%; display: block; }
.sw-art * { animation-play-state: paused !important; }
html.sw-open .sw-art * { animation-play-state: running !important; }
/* 01 home: Diana, bobbing */
.sw-home { background: var(--saffron); }
.sw-home img { position: absolute; left: 8%; top: 12%; width: 84%; height: auto; animation: sw-bob 2.6s ease-in-out infinite; }
@keyframes sw-bob { 50% { transform: translateY(-4%) rotate(-3deg); } }
/* 02 about: a pin on Nairobi, rings going out */
.sw-about { background: var(--paper); }
.sw-about .rg { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: sw-ring 3s ease-out infinite; }
.sw-about .rg2 { animation-delay: 1s; } .sw-about .rg3 { animation-delay: 2s; }
@keyframes sw-ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.6); opacity: 0; } }
.sw-about .pin { animation: sw-pin 3s cubic-bezier(.3, 1.6, .5, 1) infinite; }
@keyframes sw-pin { 0% { transform: translateY(-12px); } 16%, 100% { transform: none; } }
/* 03 services: the four stages going round the loop */
.sw-svc { background: #2f2721; }
.sw-svc .orb { transform-origin: 50px 50px; animation: sw-orb 8s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes sw-orb { 0%, 18% { transform: rotate(0); } 25%, 43% { transform: rotate(90deg); } 50%, 68% { transform: rotate(180deg); } 75%, 93% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } }
/* 04 blog: lines typed out, a highlight, the caret */
.sw-blog { background: #2f2721; }
.sw-blog .ln { transform-box: fill-box; transform-origin: 0 50%; animation: sw-type 6s infinite; }
.sw-blog .ln2 { animation-delay: .35s; } .sw-blog .ln3 { animation-delay: .7s; } .sw-blog .ln4 { animation-delay: 1.05s; }
@keyframes sw-type { 0%, 8% { transform: scaleX(0); } 24%, 86% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
.sw-blog .hl { transform-box: fill-box; transform-origin: 0 50%; animation: sw-hl 6s infinite; }
@keyframes sw-hl { 0%, 40% { transform: scaleX(0); } 52%, 86% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
.sw-blog .car { animation: sw-car 1s steps(1) infinite; }
@keyframes sw-car { 50% { opacity: 0; } }
/* 05 questions: a question, then its answer */
.sw-faq { background: var(--jacaranda); }
.sw-faq .q, .sw-faq .a { transform-box: fill-box; animation: sw-bub 6s infinite; }
.sw-faq .q { transform-origin: 0 100%; } .sw-faq .a { transform-origin: 100% 100%; animation-name: sw-bub2; }
/* 06 contact: two bubbles and someone typing */
.sw-ct { background: var(--coral); }
.sw-ct .b1, .sw-ct .b2 { transform-box: fill-box; animation: sw-bub 6s infinite; }
.sw-ct .b1 { transform-origin: 0 100%; } .sw-ct .b2 { transform-origin: 100% 100%; animation-name: sw-bub2; }
@keyframes sw-bub { 0%, 4% { transform: scale(0); } 14%, 88% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
@keyframes sw-bub2 { 0%, 58% { transform: scale(0); } 68%, 88% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
.sw-ct .dt { opacity: 0; animation: sw-dot 6s infinite; } .sw-ct .dt2 { animation-delay: .15s; } .sw-ct .dt3 { animation-delay: .3s; }
@keyframes sw-dot { 0%, 22% { opacity: 0; } 26%, 30% { opacity: 1; } 34%, 38% { opacity: .25; } 42%, 46% { opacity: 1; } 50%, 54% { opacity: .25; } 56%, 100% { opacity: 0; } }
/* the chips: one row you swipe */
.sw-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.sw-row::-webkit-scrollbar { display: none; }
.sw-chip { display: inline-flex; align-items: center; flex: none; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--paper) 24%, transparent);
  background: none; color: var(--paper); text-decoration: none; font: 500 14px/1 var(--body); white-space: nowrap; cursor: pointer; }
.sw-chip:active, .sw-tg[aria-expanded=true] { background: var(--saffron); border-color: var(--saffron); color: var(--ink); }
.sw-sub { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.sw-sub.open { display: grid; }
.sw-sub p { margin: 0 0 4px; font: 600 14px/1.2 var(--body); }
.sw-sub p a { color: var(--saffron); }
.sw-sub a { display: block; color: var(--paper); text-decoration: none; font-size: 14px; line-height: 1.35; padding: 3px 0; }
.sw-in.is-sub .sw-grid { display: none; }
@media (min-width: 900px) {   /* wide screens, measured from sxlvx's own (1440 wide): a 1120 block, six 172px tiles in one row */
  .sw-in { width: calc(100% - 2 * var(--gutter)); max-width: 1120px; gap: 22px; }
  .sw-lbl { font-size: 13px; padding-bottom: 12px; }
  .sw-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; gap: 18px; }
  .sw-t { gap: 10px; }
  .sw-ti b { font-size: 13px; }
  .sw-n { font-size: 16px; }
  .sw-t:hover .sw-ti { transform: scale(.97); }
  .sw-chip:hover { border-color: var(--saffron); }
  .sw-row { flex-wrap: wrap; justify-content: flex-start; overflow: visible; margin: 0; padding: 2px 0; }
}
.sw-a { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .5s ease, transform .8s cubic-bezier(.16, 1, .3, 1); }
html.sw-open .sw-a { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mx-card, .bar, .sw-a, .dock-btn i::before, .dock-btn i::after { transition: none !important; } .sw-art * { animation: none !important; } }
.sw-ti:has(.sw-home, .sw-about, .sw-faq, .sw-ct) b { color: var(--ink); mix-blend-mode: normal; }
.sw-ti:has(.sw-svc, .sw-blog) b { color: var(--paper); mix-blend-mode: normal; }