/* ==========================================================================
   Flow State Consultancy · home.css
   Home page only. Semantic tokens from tokens.css, shared components from base.css.
   Default styles are the finished state (no JS, no 3D engine, reduced motion).
   home.js adds state classes to enable the motion: has-field, no-field, has-band,
   no-band and is-idle on the hero, is-horizontal on Zo klinkt ruis, is-armed and
   is-active on the werkwijze steps.
   ========================================================================== */

/* One mono size on this page: index numbers match the mono labels next to them. */
.section-head__meta .index,
.naam__meta .index,
.ruis__index,
.service__index,
.step__index {
  font-size: var(--text-xs);
  line-height: 1.34;
}

/* Section intros: about 70 characters per line (the 0 glyph is wide, so 65ch runs long). */
.section-head .lead,
.cta-band .lead { max-width: 54ch; }

/* ==========================================================================
   Hero: dark instrument with the 3D field (mobile first)
   ========================================================================== */
.hero {
  /* Height of the wave line for the static poster and the band labels when there is
     no live field. Measured from the bottom of the hero on small screens. */
  --band-b: calc(var(--space-96) + var(--space-64));
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

/* The field sits in the lower part on small screens, full bleed on desktop. */
.hero__field {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: max(32.5rem, 70%);
}
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.no-anim) .hero__field canvas { animation: home-fade 1.6s var(--ease-flow) both; }
}

/* Static poster of the signal line: shown without JS, or when the engine is unavailable. */
.hero__poster {
  position: absolute;
  left: 0;
  bottom: var(--band-b);
  height: var(--space-48);
  transform: translateY(50%);
}
html.js:not(.no-anim) .hero:not(.no-field) .hero__poster { display: none; }

.hero__inner {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  --hero-top: calc(var(--header-h) + var(--space-32));
  padding-top: var(--hero-top);
  padding-bottom: var(--space-32);
}

.hero__title { color: var(--text); }
/* The entrance moves this inner block, so the h1 box itself never shifts
   (the engine measures it to keep the wave below the copy). */
.hero__title-inner { display: block; }

/* Room below the buttons where the wave plays on small screens. */
.hero__deck {
  --wave-room: calc(var(--space-128) + var(--space-96));
  margin-top: var(--space-24);
  margin-bottom: var(--wave-room);
}

.hero__lead {
  max-width: 36ch;
  /* A soft halo in the ground color keeps the copy crisp over moving particles. */
  text-shadow: 0 0 var(--space-12) var(--bg), 0 0 var(--space-4) var(--bg);
}

.hero__actions { margin-top: var(--space-32); }
/* A solid ground, so particles never show through the outline button. */
.hero__actions .btn--secondary:not(:hover):not(:active) { background-color: var(--scope-bg); }

.hero__readout { margin-top: auto; }
.hero__unit { text-transform: none; }

/* Instrument text over the field gets the same soft halo as the lead. */
.hero__readout,
.hero__hint-inner { text-shadow: 0 0 var(--space-8) var(--scope-bg), 0 0 var(--space-4) var(--scope-bg); }

/* Band labels at the two ends of the wave: a scale from noise to signal.
   Each sits on a small plate in the ground color, so no particle runs through the letters. */
.hero__band {
  position: absolute;
  bottom: var(--band-b);
  transform: translateY(50%);
  margin: 0;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  background-color: var(--scope-bg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.34;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--scope-muted);
  pointer-events: none;
}
.hero__band--ruis { left: calc(var(--gutter) - var(--space-8)); }
.hero__band--signaal { right: calc(var(--gutter) - var(--space-8)); }
.hero__band-text {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  transition: color var(--dur-base) var(--ease-flow);
}
.hero__band-text::before,
.hero__band-text::after {
  content: "";
  display: block;
  width: var(--space-24);
  height: 1px;
  background-color: currentColor;
  opacity: 0.5;
  transition: background-color var(--dur-base) var(--ease-flow), opacity var(--dur-base) var(--ease-flow);
}
.hero__band--ruis .hero__band-text::before,
.hero__band--signaal .hero__band-text::after { display: none; }
/* Finished state: noise dimmed, signal lit. While tuning, home.js sets --tune (0 to 1) on the
   Ruis label and toggles is-on on the Signaal label. Both colors stay above 4.5:1. */
.hero__band--ruis .hero__band-text {
  color: var(--text-subtle);
  color: color-mix(in srgb, var(--scope-muted), var(--text-subtle) calc(var(--tune, 1) * 100%));
}
.hero__band--signaal.is-on .hero__band-text { color: var(--scope-text); }
.hero__band--signaal.is-on .hero__band-text::before {
  background-color: var(--scope-signal);
  opacity: 1;
}

/* With a live field, home.js places the labels on the wave itself (px from the hero top). */
.hero.has-band .hero__band {
  bottom: auto;
  transform: translateY(-50%);
}
.hero.has-band .hero__band--ruis { top: var(--band-ruis-y); }
.hero.has-band .hero__band--signaal { top: var(--band-signaal-y); }
/* No room between the copy and the readout (very short screens, enlarged text spacing). */
.hero.no-band .hero__band { visibility: hidden; }

/* Scroll hint: desktop only, and only while the field is live. */
.hero__hint { display: none; }
.hero__hint-inner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.34;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--scope-muted);
}
.hero__hint-line {
  position: relative;
  display: block;
  width: var(--space-48);
  height: 1px;
  overflow: hidden;
  background-color: var(--border-strong);
}
.hero__hint-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--accent);
  transform: translateX(-100%);
  animation: home-hint 2.4s var(--ease-in-out) infinite;
}

/* After a few seconds without input the decorative loops stop (WCAG 2.2.2).
   Scrolling, a key or the pointer starts them again (home.js toggles is-idle). */
.hero.is-idle .hero__hint-line::after,
.hero.is-idle .hero__readout .status-dot.is-blinking { animation: none; }

@media (max-width: 599px) {
  .hero__lead { font-size: var(--text-base); }
  .hero__actions .btn { flex: 1 1 100%; }
}

@media (min-width: 960px) {
  .hero {
    /* No live field: the wave line sits below the copy, above the readout. */
    --band-y: max(64%, calc(var(--header-h) + var(--space-64) + var(--space-128) * 2 + var(--space-96)));
    height: 100vh;
    height: 100svh;
    min-height: 36rem;
  }
  .hero__field { top: 0; height: auto; }
  .hero__poster,
  .hero__band {
    top: var(--band-y);
    bottom: auto;
    transform: translateY(-50%);
  }
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--space-48);
    align-items: start;
    align-content: start;
    --hero-top: calc(var(--header-h) + var(--space-64));
  }
  .hero__deck {
    margin: 0;
    padding-top: var(--space-12);
  }
  .hero__readout {
    position: absolute;
    right: var(--gutter);
    bottom: var(--space-32);
    margin: 0;
  }
}

/* Laptop widths: a wider right column and slimmer buttons keep both buttons on one line. */
@media (min-width: 960px) and (max-width: 1365.98px) {
  .hero__inner {
    grid-template-columns: minmax(0, 13fr) minmax(0, 11fr);
    column-gap: var(--space-32);
  }
  .hero__actions .btn--lg { padding-inline: var(--space-24); }
}

@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  html.js:not(.no-anim) .hero.has-field .hero__hint {
    position: absolute;
    left: var(--gutter);
    bottom: var(--space-32);
    display: block;
    margin: 0;
  }
}

/* Entrance: transform only, so the headline and lead paint right away (LCP). */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.no-anim) .hero__title-inner { animation: home-rise 1.1s var(--ease-flow) both; }
  html.js:not(.no-anim) .hero__deck > * { animation: home-rise 1.1s var(--ease-flow) 0.12s both; }
  html.js:not(.no-anim) .hero__readout,
  html.js:not(.no-anim) .hero__band,
  html.js:not(.no-anim) .hero__hint-inner { opacity: 0; }
  html.js.fs-ready .hero__readout { animation: home-fade 1s var(--ease-flow) 0.2s both; }
  html.js.fs-ready .hero__band { animation: home-fade 1.2s var(--ease-flow) 0.5s both; }
  html.js.fs-ready .hero__hint-inner { animation: home-fade 1s var(--ease-flow) 1.2s both; }
}

@keyframes home-rise {
  from { transform: translateY(var(--space-24)); }
  to { transform: none; }
}
@keyframes home-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes home-hint {
  0% { transform: translateX(-100%); }
  70%, 100% { transform: translateX(100%); }
}

/* ==========================================================================
   Statement
   ========================================================================== */
.home-statement { padding-bottom: var(--space-64); }

@media (min-width: 960px) {
  .home-statement__grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    column-gap: var(--space-24);
  }
  .home-statement__text {
    grid-column: 2;
    max-width: 28ch;
  }
}

/* ==========================================================================
   01 Zo klinkt ruis
   Default: vertical list (mobile) and a 3 column grid (desktop without motion).
   With .is-horizontal (home.js, desktop): a pinned stage with the heading, a
   horizontal track and a progress line.
   ========================================================================== */
.ruis__track {
  list-style: none;
  border-top: 1px solid var(--border);
}
.ruis__panel {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-32);
  border-bottom: 1px solid var(--border);
}
.ruis__meta {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}
.ruis__index { transition: color var(--dur-base) var(--ease-flow); }
.ruis__icon {
  flex: none;
  width: var(--space-64);
  height: 20px;
  overflow: visible;
}
.ruis__icon path {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ruis__noise { stroke: var(--noise); opacity: 0; }
.ruis__wave { stroke: var(--accent); }

.ruis__quote {
  margin-top: var(--space-24);
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
/* Name and explanation share one size: weight and color carry the hierarchy. */
.ruis__name {
  margin-top: var(--space-24);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  letter-spacing: var(--tracking-normal);
  text-wrap: pretty;
}
.ruis__text {
  margin-top: var(--space-8);
  max-width: 46ch;
  font-size: var(--text-lg);
  color: var(--text-muted);
  text-wrap: pretty;
}
.ruis__progress { display: none; }

@media (min-width: 960px) {
  .ruis__track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--space-64);
    border-top: 0;
  }
  .ruis__panel {
    padding: 0 var(--space-32);
    border-bottom: 0;
    border-left: 1px solid var(--border);
  }
  /* A two line slot for the quote keeps the pattern names in line across the panels. */
  .ruis__quote {
    font-size: var(--text-3xl);
    min-height: calc(2em * var(--leading-heading));
  }
  .ruis__name { margin-top: var(--space-32); }

  /* Pinned stage: the heading stays on screen as a chapter title while the quotes slide past. */
  .ruis.is-horizontal { padding-block: 0; }
  .ruis.is-horizontal .ruis__stage {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh;
    min-height: 36rem;
    padding-top: var(--header-h);
    padding-bottom: var(--space-32);
    overflow: hidden;
  }
  /* Auto margins centre the group, and fall back to top alignment when space runs out. */
  .ruis.is-horizontal .ruis__frame {
    display: flex;
    flex-direction: column;
    gap: var(--space-48);
    margin-block: auto;
  }
  .ruis.is-horizontal .ruis__head { margin-bottom: 0; }
  .ruis.is-horizontal .ruis__track {
    position: relative;
    display: flex;
    will-change: transform;
  }
  .ruis.is-horizontal .ruis__panel { flex: 0 0 min(32.5rem, 40vw); }
  .ruis.is-horizontal + .diensten-teaser { padding-top: var(--space-64); }
  .ruis.is-horizontal .ruis__panel.is-current .ruis__index { color: var(--accent-text); }
  .ruis.is-horizontal .ruis__progress {
    display: flex;
    align-items: center;
    gap: var(--space-24);
  }
}
@media (min-width: 960px) and (max-height: 720px) {
  .ruis.is-horizontal .ruis__frame { gap: var(--space-32); }
}

/* A 1px track with a 2px fill, so the fill stays crisp at fractional pixel offsets. */
.ruis__bar {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  overflow: hidden;
}
.ruis__bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background-color: var(--border);
  transform: translateY(-50%);
}
.ruis__bar-fill {
  position: absolute;
  inset: 0;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}
.ruis__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.34;
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.ruis__count [data-ruis-current] { color: var(--text); }

/* ==========================================================================
   02 Wat we doen: editorial rows, each row one link
   ========================================================================== */
.services {
  list-style: none;
  border-top: 1px solid var(--border);
}
.services > li { border-bottom: 1px solid var(--border); }

.service {
  position: relative;
  display: grid;
  grid-template-columns: var(--space-48) minmax(0, 1fr);
  column-gap: var(--space-16);
  align-items: baseline;
  padding-block: var(--space-24);
  color: inherit;
  text-decoration: none;
}
.service::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-flow);
}
.service__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title arrow"
    "text text";
  column-gap: var(--space-16);
  row-gap: var(--space-8);
  align-items: baseline;
}
.service__title {
  grid-area: title;
  font-size: var(--text-2xl);
  line-height: var(--leading-heading);
  transition: color var(--dur-base) var(--ease-flow), transform var(--dur-base) var(--ease-flow);
}
.service__text {
  grid-area: text;
  max-width: 46ch;
  font-size: var(--text-lg);
  color: var(--text-muted);
}
.service__arrow {
  grid-area: arrow;
  align-self: center;
  transition: transform var(--dur-base) var(--ease-flow);
}
.service:hover .service__title,
.service:focus-visible .service__title {
  color: var(--accent-text);
  transform: translateX(var(--space-8));
}
.service:hover .service__arrow,
.service:focus-visible .service__arrow { transform: translateX(var(--space-4)); }
.service:hover::after,
.service:focus-visible::after { transform: scaleX(1); }
.service:active .service__arrow { transform: translateX(var(--space-8)); }

.services-more { margin-top: var(--space-32); }
.services-more .link-arrow { font-size: var(--text-lg); }

@media (min-width: 960px) {
  .service {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    column-gap: var(--space-24);
    padding-block: var(--space-32);
  }
  .service__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: "title text arrow";
    column-gap: var(--space-24);
  }
  .service__title { font-size: var(--text-3xl); }
  .services-more {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    column-gap: var(--space-24);
  }
  .services-more .link-arrow {
    grid-column: 2;
    justify-self: start;
  }
}

/* ==========================================================================
   03 Telecom (theme-ink)
   ========================================================================== */
.telecom__divider { margin-bottom: var(--space-64); }
.telecom__row + .telecom__row { margin-top: var(--space-64); }

/* Both subheads of this section share one size with the channel names. */
.telecom__subhead {
  font-size: var(--text-2xl);
  line-height: var(--leading-heading);
}
.telecom__channels .telecom__subhead { margin-bottom: var(--space-24); }

.channels {
  list-style: none;
  border-top: 1px solid var(--border);
}
.channel {
  display: grid;
  grid-template-columns: var(--space-64) minmax(0, 1fr);
  column-gap: var(--space-16);
  row-gap: var(--space-8);
  align-items: baseline;
  padding-block: var(--space-24);
  border-bottom: 1px solid var(--border);
}
.channel__ch {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.34;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted);
}
.channel__name {
  font-size: var(--text-2xl);
  line-height: var(--leading-heading);
}
.channel__text {
  grid-column: 2;
  max-width: var(--measure);
  font-size: var(--text-lg);
  color: var(--text-muted);
}

.telecom__topics-label { margin-bottom: var(--space-16); }
.telecom__beyond-text .lead { margin-top: var(--space-16); }

@media (min-width: 960px) {
  .telecom__row {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    column-gap: var(--space-24);
    align-items: start;
  }
  .telecom__channels .telecom__subhead {
    position: sticky;
    top: calc(var(--header-h) + var(--space-32));
    margin: 0;
    padding-top: var(--space-24);
    padding-right: var(--space-24);
  }
  .channel {
    grid-template-columns: var(--space-96) minmax(0, 3fr) minmax(0, 5fr);
    column-gap: var(--space-24);
  }
  .channel__text { grid-column: auto; }
  .telecom__topics-label {
    margin: 0;
    padding-top: var(--space-8);
  }
  .telecom__beyond { margin-top: var(--space-96); }
  .telecom__beyond-text {
    grid-column: 2;
    display: grid;
    grid-template-columns: var(--space-96) minmax(0, 3fr) minmax(0, 5fr);
    column-gap: var(--space-24);
  }
  .telecom__beyond-text > * { grid-column: 3; }
}

/* ==========================================================================
   04 Werkwijze: one signal line from jagged to clean (four columns, 1100px and up),
   a vertical rail with dots below that
   ========================================================================== */
/* The steps run in narrow columns at 16px, so the intro matches them. */
.werkwijze .section-head .lead { font-size: var(--text-base); }

.steps { position: relative; }
.steps__line { display: none; }
.steps__list {
  list-style: none;
  display: grid;
  row-gap: var(--space-48);
}
.step { position: relative; }
.step__index {
  display: block;
  color: var(--accent-text);
  transition: color var(--dur-base) var(--ease-flow);
}
.step__title {
  margin-top: var(--space-12);
  font-size: var(--text-3xl);
  line-height: var(--leading-heading);
  transition: color var(--dur-base) var(--ease-flow);
}
.step__text {
  margin-top: var(--space-12);
  max-width: var(--measure);
  color: var(--text-muted);
}
.steps.is-armed .step:not(.is-active) .step__index { color: var(--text-subtle); }
.steps.is-armed .step:not(.is-active) .step__title { color: var(--text-muted); }

@media (max-width: 1099.98px) {
  .steps__list { padding-left: var(--space-32); }
  .steps__rail {
    position: absolute;
    left: var(--space-4);
    top: var(--space-8);
    bottom: var(--space-8);
    width: 1px;
    background-color: var(--border);
  }
  .steps__rail-fill {
    position: absolute;
    inset: 0;
    background-color: var(--accent);
    transform-origin: center top;
  }
  /* An odd size (9px) centres the dot on the 1px rail. */
  .step::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--space-32));
    top: var(--space-4);
    width: 9px;
    height: 9px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-round);
    background-color: var(--accent);
    transition: background-color var(--dur-base) var(--ease-flow), border-color var(--dur-base) var(--ease-flow);
  }
  .steps.is-armed .step:not(.is-active)::before {
    border-color: var(--border-strong);
    background-color: var(--bg);
  }
}

@media (min-width: 1100px) {
  .steps {
    --line-room: calc(var(--space-48) + var(--space-24));
    padding-top: var(--line-room);
  }
  .steps__line {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--space-48);
    overflow: visible;
  }
  .steps__path {
    fill: none;
    stroke: url(#steps-gradient);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .steps__line.is-static .steps__path { vector-effect: non-scaling-stroke; }
  .steps__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--space-32);
  }
  .steps__rail { display: none; }
}
.steps__stop--noise { stop-color: var(--noise); }
.steps__stop--signal { stop-color: var(--accent); }

/* ==========================================================================
   05 De naam: text and the flow channel diagram
   ========================================================================== */
.naam__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-12);
  margin-bottom: var(--space-24);
}
.naam__body {
  margin-top: var(--space-24);
  max-width: var(--measure);
  color: var(--text-muted);
}
.naam__text .link-arrow { margin-top: var(--space-16); }

.flow {
  position: relative;
  width: 100%;
  max-width: 32.5rem;
  margin-inline: auto;
}
.flow__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.flow__band { fill: var(--accent-soft); }
.flow__edge {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.flow__axis {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.flow__trail {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
}
.flow__dot-core { fill: var(--accent); }
.flow__dot-halo { fill: var(--accent); opacity: 0.18; }

.flow__label {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.34;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted);
}
.flow__label--x { right: 4.6%; top: 87.5%; }
.flow__label--y {
  right: 88.5%;
  top: 8.3%;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
/* The three zone names share one size. */
.flow__zone {
  position: absolute;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--text-xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  color: var(--text-muted);
}
.flow__zone--stress { left: 20%; top: 17%; }
.flow__zone--verveling { right: 6.2%; top: 73%; }
/* In the wide end of the band, halfway between the trail and the lower edge. */
.flow__zone--flow {
  left: 70%;
  top: 41%;
  font-style: italic;
  color: var(--accent-text);
  transform: translate(-50%, -50%) rotate(-40deg);
}

@media (min-width: 960px) {
  .naam__split { align-items: center; }
  .flow { margin-right: 0; }
}

/* Closing band: styled in base.css (mail line, tap area, full-width button on small screens). */