/* Dotcom Ventures — "Clear operator" (research/design.md, Direction A). Brand palette: orange
   #f6881f, black #231f20, tan #f6eade (Laurens, 2026-09-27).
   One stylesheet, no inline styles anywhere (CSP style-src 'self'). */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

/* Arial/Liberation Sans reshaped to the real font's measurements so the swap doesn't move text. */
@font-face {
  font-family: "Grotesk Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 104.37%;
  ascent-override: 93.57%;
  descent-override: 24.7%;
  line-gap-override: 0%;
}

:root {
  --ink: #231f20;          /* logo near-black: text, dark bands */
  --ink-soft: #4d4748;     /* secondary text on white, 9.3:1 */
  --paper: #ffffff;
  --panel: #f6eade;        /* brand tan: secondary background (ink 13.8:1, text orange 4.65:1) */
  --line: #e3d2c1;         /* warm divider, decorative */
  --orange: #f6881f;       /* brand orange: on --ink only, or as fill with --ink text */
  --orange-text: #a8500f;  /* text orange: links on light backgrounds only, 5.5:1 */
  --on-ink: #ffffff;
  --on-ink-soft: #f6eade;  /* brand tan as soft text on --ink, 13.8:1 */
  --dot-dim: #4d4441;      /* decorative dot grid on --ink */

  --font: "Schibsted Grotesk", "Grotesk Fallback", Arial, sans-serif;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3125rem;
  --step-2: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
  --step-3: clamp(1.9rem, 1.45rem + 2vw, 2.75rem);
  --step-4: clamp(2.45rem, 1.6rem + 4.2vw, 4.75rem);

  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);
  --space-s: 1rem;
  --space-m: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --space-l: clamp(3rem, 2.2rem + 4vw, 6rem);
  --measure: 38rem;
  --radius: 0.375rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  font-kerning: normal;
}

img, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0;
  line-height: 1.1;
  font-weight: 750;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: var(--step-3); letter-spacing: -0.03em; }
h3 { font-size: var(--step-1); line-height: 1.25; }

p, ul, ol, dl, address { margin: 0; }
p { text-wrap: pretty; }
address { font-style: normal; }

a { color: var(--orange-text); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.band--ink :focus-visible { outline-color: var(--orange); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 10;
  padding: 0.6rem 1rem; background: var(--ink); color: var(--on-ink); border-radius: var(--radius);
}
.skip-link:focus { top: 0.75rem; }

.wrap { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: var(--gutter); }

/* Flow spacing inside text blocks */
.flow > * + * { margin-top: var(--flow, 1em); }

.lede { font-size: var(--step-1); line-height: 1.45; color: var(--ink-soft); max-width: var(--measure); }

/* ---------- Buttons ---------- */

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.7rem 1.4rem;
  border: 2px solid transparent; border-radius: var(--radius);
  font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.button--primary { background: var(--orange); color: var(--ink); }
.button--primary:hover { background: var(--ink); color: var(--orange); border-color: var(--orange); }
.button--dark { background: var(--ink); color: var(--on-ink); }
.button--dark:hover { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.band--ink .button--ghost { color: var(--on-ink); border-color: var(--on-ink-soft); }
.band--ink .button--ghost:hover { border-color: var(--orange); color: var(--orange); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }

/* ---------- Header ---------- */

.site-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.site-header__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 1.5rem; padding-block: 0.9rem;
}
.brand { display: inline-block; color: inherit; }
.brand__logo { width: 10.5rem; height: auto; }

html:not(.js) .menu-toggle { display: none; }
@media (min-width: 48rem) { .menu-toggle { display: none; } }
.menu-toggle {
  min-height: 2.75rem; padding: 0.5rem 1rem;
  border: 2px solid var(--ink); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer;
}
.menu-toggle[aria-expanded="true"] { background: var(--ink); color: var(--on-ink); }

.site-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; padding: 0; list-style: none; }
.site-nav a {
  display: inline-block; padding-block: 0.6rem;
  color: var(--ink); font-weight: 600; text-decoration: none;
}
.site-nav a:hover { color: var(--orange-text); }
.site-nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--ink); text-decoration-thickness: 3px; text-underline-offset: 0.45em; }
.site-nav .site-nav__cta { padding: 0.6rem 1.1rem; border-radius: var(--radius); background: var(--ink); color: var(--on-ink); }
.site-nav .site-nav__cta:hover { background: var(--orange); color: var(--ink); }
.site-nav .site-nav__cta[aria-current] { text-decoration: none; background: var(--orange); color: var(--ink); }

@media (max-width: 47.99rem) {
  .site-nav { flex-basis: 100%; }
  /* With JS (the "js" class is set in <head> before the first paint) the menu starts closed,
     so nothing shifts when site.js arrives. Without JS it simply stays open. */
  .js .site-nav { display: none; }
  .js .menu-toggle[aria-expanded="true"] + .site-nav { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 0.5rem; }
  .site-nav li + li { border-top: 1px solid var(--line); }
  .site-nav a { display: block; padding-block: 0.8rem; }
  .site-nav .site-nav__cta { margin-top: 0.5rem; text-align: center; }
}

/* ---------- Bands ---------- */

.band { padding-block: var(--space-l); }
.band--ink { background: var(--ink); color: var(--on-ink); }
.band--ink a:not(.button) { color: var(--on-ink); text-decoration-color: var(--orange); }
.band--ink a:not(.button):hover { color: var(--orange); }
.band--ink .lede { color: var(--on-ink-soft); }
.band--panel { background: var(--panel); }
.band + .band--plain { padding-top: 0; }

.section-head { max-width: 46rem; margin-bottom: var(--space-m); }
.section-head > * + * { margin-top: 0.9rem; }

/* ---------- Hero ---------- */

.hero { padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem); overflow: hidden; }
.hero__grid { display: grid; gap: var(--space-m); align-items: center; }
.hero__text > * + * { margin-top: 1.4rem; }
.hero__text .actions { margin-top: 2rem; }
.hero--page { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }
.hero--page h1 { font-size: var(--step-4); max-width: 18ch; }
.hero__kicker { font-weight: 600; color: var(--orange); }

@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* ---------- Channel map (the signature diagram) ---------- */

.channel-map { position: relative; width: 100%; max-width: 26rem; margin-inline: auto; }
@media (min-width: 60rem) { .channel-map { max-width: 34rem; } }
.channel-map text { font-family: var(--font); fill: var(--on-ink); }
/* Links are rows of dots; the flow animation (below) moves them from the brand outwards. */
.channel-map .cm-link { stroke: var(--orange); stroke-width: 6; fill: none; stroke-linecap: round; stroke-dasharray: 0 16; }
.channel-map .cm-link--own { stroke-dasharray: 0 12; }
.channel-map .cm-link--more { stroke: var(--on-ink-soft); }
.channel-map .cm-node { fill: var(--ink); stroke: var(--orange); stroke-width: 2.5; }
.channel-map .cm-node.cm-node--more { stroke: var(--on-ink-soft); stroke-dasharray: 8 6; }
.channel-map .cm-label--more { fill: var(--on-ink-soft); }
.channel-map .cm-core { fill: var(--orange); }
.channel-map .cm-core-label { fill: var(--ink); font-weight: 750; }
.channel-map .cm-label { font-weight: 700; }
.channel-map .cm-note { fill: var(--on-ink-soft); font-weight: 400; }

/* ---------- Services overview (home) ---------- */

.services { display: grid; gap: var(--space-m); }
.service { border-top: 3px solid var(--ink); padding-top: 1.25rem; transition: border-color 200ms ease; }
.service:hover, .service:focus-within { border-top-color: var(--orange); }
.service > * + * { margin-top: 0.8rem; }
.service__link { display: inline-block; font-weight: 700; }

@media (min-width: 48rem) {
  .services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m) clamp(1.5rem, 3vw, 3rem); }
  .services--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 68rem) { .services--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Channels + SKG proof ---------- */

.proof { display: grid; gap: var(--space-m); align-items: start; }
.channel-list { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; list-style: none; }
.channel-list li {
  padding: 0.45rem 0.95rem; border: 2px solid var(--ink); border-radius: 999px;
  font-weight: 700; line-height: 1.3;
}
.channel-list .is-own { border-style: dashed; }
.channel-list .is-more { border-color: var(--ink-soft); border-style: dashed; color: var(--ink-soft); font-weight: 600; }
.brands__title { margin-top: var(--space-m); margin-bottom: 1.1rem; }
.brands { display: grid; gap: 1rem; padding: 0; list-style: none; }
@media (min-width: 40rem) { .brands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .brands { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.brand-card {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.25rem 1.25rem 1.1rem; background: var(--paper);
  border: 1px solid var(--line); border-top: 3px solid var(--ink); border-radius: var(--radius);
}
.brand-card:hover, .brand-card:focus-within { border-top-color: var(--orange-text); }
.brand-card__logo { display: flex; align-items: center; height: 3.5rem; margin-bottom: 0.4rem; }
.brand-card__logo img { width: auto; max-width: 11rem; max-height: 3.5rem; }
.brand-card__name { margin: 0; font-size: var(--step-1); line-height: 1.2; letter-spacing: -0.01em; }
.brand-card__cat { font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); }
.brand-card p:not([class]) { font-size: var(--step--1); line-height: 1.55; }
.brand-card__link { margin-top: auto; padding-top: 0.4rem; font-weight: 700; font-size: var(--step--1); }
/* "And more…" closes every brand list: more brands than can be named yet */
.brand-card--more { grid-column: 1 / -1; background: transparent; border: 2px dashed var(--ink-soft); }
.brand-card--more:hover, .brand-card--more:focus-within { border-color: var(--orange-text); }
.brand-card--more .brand-card__name { color: var(--ink-soft); font-weight: 750; }
@media (min-width: 48rem) {
  .brand-card--more { flex-direction: row; align-items: baseline; gap: 0.5rem 1.25rem; flex-wrap: wrap; padding-block: 1rem; }
  .brand-card--more .brand-card__link { margin: 0 0 0 auto; padding: 0; }
}

@media (min-width: 56rem) {
  .proof { grid-template-columns: 1.3fr 1fr; align-items: end; }
  .proof .channel-list { justify-content: flex-end; }
}

/* ---------- Steps (real sequences only) ---------- */

.steps { display: grid; gap: 1.5rem; padding: 0; list-style: none; counter-reset: step; }
.steps > li { counter-increment: step; position: relative; padding-left: 3.25rem; }
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: -0.1rem;
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; background: var(--orange); color: var(--ink);
  font-weight: 750; font-variant-numeric: lining-nums tabular-nums;
}
.steps h3 + p { margin-top: 0.35rem; }
/* Vertical flowing line between numbered steps (all widths) */
.steps--vflow > li:not(:last-child)::after {
  content: ""; position: absolute; left: calc(1.125rem - 3px); top: 2.6rem; bottom: -1.3rem; width: 6px;
  background-image: radial-gradient(circle, var(--orange) 2px, transparent 2.6px);
  background-size: 6px 12px; background-repeat: repeat-y;
}
.steps p { color: var(--ink-soft); max-width: var(--measure); }
.band--ink .steps p { color: var(--on-ink-soft); }

/* A horizontal track for short step lists on wide screens */
@media (min-width: 60rem) {
  .steps--track { grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 1.25rem; }
  .steps--track > li { padding: 3.25rem 0 0; }
  .steps--track > li::after {
    content: ""; position: absolute; top: 1.05rem; left: 2.6rem; right: -0.9rem;
    border-top: 2px dotted var(--orange);
  }
  .steps--track > li:last-child::after { display: none; }
  .steps--4 { --cols: 4; }
  /* Flowing version: a row of dots that keeps moving left to right */
  .steps--flow > li::after {
    top: 0.95rem; height: 6px; border-top: 0;
    background-image: radial-gradient(circle, var(--orange) 2px, transparent 2.6px);
    background-size: 12px 6px; background-repeat: repeat-x;
  }
}

/* ---------- Partnership models ---------- */

.models-grid { display: grid; gap: 1.5rem; padding: 0; list-style: none; }
.model-card { display: flex; flex-direction: column; border-top: 3px solid var(--ink); padding-top: 1.1rem; transition: border-color 200ms ease; }
/* Model names in text orange (brand orange is only 2.1:1 on tan; #a8500f is 4.65:1) */
.model-card h3 { color: var(--orange-text); }
.model-card:hover, .model-card:focus-within { border-top-color: var(--orange); }
/* On tan, the hover line uses the darker text orange (brand orange is only 2.1:1 there) */
.band--panel .model-card:hover, .band--panel .model-card:focus-within,
.band--panel .service:hover, .band--panel .service:focus-within { border-top-color: var(--orange-text); }
.band--panel .column:hover h3, .band--panel .column:focus-within h3 { border-top-color: var(--orange-text); }
.model-card > * + * { margin-top: 0.6rem; }
.model-card__tagline { font-size: var(--step-1); font-weight: 500; line-height: 1.3; }
.model-card dl { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
/* Cards side by side share their rows (subgrid): name, tagline, text and the "Best for" line
   sit at the same height across the row, whatever the text length. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 48rem) {
    .model-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0.6rem; align-content: start; }
    .model-card > * + * { margin-top: 0; }
    .model-card dl { margin-top: 0.4rem; }
  }
}
.model-card dt { font-weight: 700; font-size: var(--step--1); color: var(--ink-soft); }
.model-card dd { margin: 0.2rem 0 0; }
@media (min-width: 48rem) { .models-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; } }
@media (min-width: 76rem) { .models-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Lists and columns ---------- */

.inline-list { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; padding: 0; list-style: none; }
.inline-list li { padding: 0.35rem 0.8rem; background: var(--panel); border-radius: var(--radius); font-weight: 600; }
.band--panel .inline-list li { background: var(--paper); }

.columns { display: grid; gap: var(--space-m); }
@media (min-width: 48rem) { .columns--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .columns--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 48rem) and (max-width: 59.99rem) { .columns--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.column > * + * { margin-top: 0.7rem; }
.column h3 { padding-top: 1rem; border-top: 3px solid var(--ink); transition: border-color 200ms ease; }
.column:hover h3, .column:focus-within h3 { border-top-color: var(--orange); }
.column__sub { font-weight: 600; }
.ticks { padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 1.4rem; }
.ticks li + li { margin-top: 0.35rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ink);
}
.band--ink .ticks li::before { background: var(--orange); }

.keep-add { display: grid; gap: 1.5rem; }
.keep-add > div { padding: 1.4rem; border-radius: var(--radius); }
.keep-add > div > * + * { margin-top: 0.8rem; }
.keep-add__keep { border: 2px solid var(--ink); }
.keep-add__add { background: var(--ink); color: var(--on-ink); }
.keep-add__add .ticks li::before { background: var(--orange); }
@media (min-width: 48rem) { .keep-add { grid-template-columns: 1fr 1fr; } }

.statement-link { margin-top: 1.25rem; }
.statement { font-size: var(--step-2); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; max-width: 40rem; }

/* ---------- Contact ---------- */

.contact-grid { display: grid; gap: var(--space-l); }
@media (min-width: 60rem) { .contact-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 4rem; } }

.form { max-width: 36rem; }
.form > * + * { margin-top: 1.4rem; }
.field > label, .field legend { display: block; font-weight: 700; margin-bottom: 0.4rem; }
.field__hint { display: block; font-size: var(--step--1); color: var(--ink-soft); margin-top: -0.2rem; margin-bottom: 0.4rem; }
.req { color: var(--ink); }
.field input, .field textarea {
  width: 100%; min-height: 3rem; padding: 0.7rem 0.85rem;
  border: 2px solid var(--ink-soft); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font: inherit;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 1px; border-color: var(--ink); }
fieldset.field { margin-inline: 0; margin-bottom: 0; padding: 0; border: 0; }
.choices { display: grid; gap: 0.5rem; }
@media (min-width: 30rem) { .choices { grid-template-columns: 1fr 1fr; } }
.choice { display: flex; gap: 0.6rem; align-items: center; min-height: 2.75rem; padding: 0.4rem 0.8rem; border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.choice input { width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0; accent-color: var(--ink); }
.choice:has(input:checked) { border-color: var(--ink); background: var(--panel); }
.form__privacy { font-size: var(--step--1); color: var(--ink-soft); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-card { padding: 1.6rem; background: var(--panel); border-radius: var(--radius); }
.contact-card > * + * { margin-top: 1.2rem; }
.contact-card h2 { font-size: var(--step-1); }
.contact-card dl { display: grid; gap: 0.9rem; }
.contact-card dt { font-weight: 700; font-size: var(--step--1); color: var(--ink-soft); }
.contact-card dd { margin: 0.1rem 0 0; font-weight: 600; }

/* ---------- Company details list ---------- */

.details { display: grid; gap: 0.8rem; }
.details dt { font-weight: 700; font-size: var(--step--1); color: var(--ink-soft); }
.details dd { margin: 0.1rem 0 0; }

/* ---------- Legal pages ---------- */

.legal { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem) var(--space-l); }
.legal__body > * { max-width: 46rem; }  /* left-aligned with the rest of the site, readable line length */
.legal__body > * + * { margin-top: 1em; }
.legal__body h1 { font-size: var(--step-3); }
.legal__body h2 { font-size: var(--step-2); margin-top: 2.25rem; }
.legal__body h3 { margin-top: 1.5rem; }
.legal__body ul, .legal__body ol { padding-left: 1.25rem; }
.legal__body li + li { margin-top: 0.35rem; }
.legal__meta { color: var(--ink-soft); font-size: var(--step--1); }
.draft-note { padding: 0.9rem 1.1rem; border-left: 4px solid var(--orange-text); background: var(--panel); }
.legal__table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.legal__table th, .legal__table td { padding: 0.6rem 0.7rem; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal__table thead th { border-top: 0; border-bottom: 2px solid var(--ink); }
.table-scroll { overflow-x: auto; }
.table-scroll:focus-visible { outline-offset: 2px; }
@media (max-width: 47.99rem) { .legal__table { min-width: 30rem; } }

/* ---------- Placeholders (mockup and missing input) ---------- */

.needs-input { padding: 0.9rem 1.1rem; border: 2px dashed var(--orange-text); border-radius: var(--radius); color: var(--ink); background: #fff7ef; font-size: var(--step--1); }
.stub { max-width: var(--measure); }
.needs-input + * { margin-top: 1.5rem; }

/* ---------- Footer ---------- */

.site-footer { margin-top: 0; padding-block: var(--space-l) 1.5rem; background: var(--panel); font-size: var(--step--1); }
.site-footer__grid { display: grid; gap: 2rem; }
.site-footer__grid > * > * + * { margin-top: 0.8rem; }
.site-footer__heading { font-size: var(--step-0); letter-spacing: 0; }
.site-footer ul { padding: 0; list-style: none; }
.site-footer li + li { margin-top: 0.35rem; }
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--orange-text); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--ink-soft); }
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.site-footer__legal li + li { margin-top: 0; }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

/* ---------- Home: full-screen sections that slide over each other ---------- */

.hero--home { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - 4.75rem); padding-bottom: 1.5rem; }
.hero--home .hero__grid { flex: 1; }
.hero__foot { display: flex; justify-content: flex-end; margin-top: 1.5rem; }
/* The pause button sits in the top corner of the opening band at every size, visible as soon as
   the page opens (at the bottom it was covered by the next sheet after a little scrolling). */
.hero--home, .hero--page { position: relative; }
.hero__foot { position: absolute; top: 0.75rem; right: 0; left: 0; margin: 0 auto; pointer-events: none; }
.hero__foot .motion-toggle { pointer-events: auto; }
@media (max-width: 59.99rem) {
  /* room for the button above the headline */
  .hero--home:has(.hero__foot), .hero--page:has(.hero__foot) { padding-top: calc(clamp(2.5rem, 1.5rem + 5vw, 5.5rem) + 1.5rem); }
  .js .stack > .hero--home.hero--home { padding-top: calc(clamp(2.5rem, 1.5rem + 5vw, 5.5rem) + 2rem); }  /* doubled class: must beat the stacking rule further down */
}

/* Home sections slide over each other at every screen size. Each section sticks only once its
   BOTTOM reaches the bottom of the screen (site.js sets --stick = screen height - section height,
   or 0 if it fits), so a long section is always read in full before the next sheet covers it.
   Only with JS (the "js" class is set in <head>); without it the page scrolls normally. */
.js .stack > .band { position: sticky; top: var(--stick, 0px); display: flex; flex-direction: column; justify-content: flex-start; min-height: 100svh; padding-top: clamp(3rem, 9vh, 7rem); }
.js .stack > .hero--home { justify-content: center; padding-top: clamp(2.5rem, 1.5rem + 5vw, 5.5rem); min-height: calc(100svh - 4.75rem); }
.js .stack > .band:not(.band--ink):not(.band--panel) { background: var(--paper); }
.js .stack > .band + .band {
  border-radius: 1.5rem 1.5rem 0 0;
  box-shadow: 0 -1.5rem 3rem -1.5rem rgb(35 31 32 / 0.45);
}
/* A section holding KEYBOARD focus is lifted above the ones covering it (WCAG 2.4.11).
   :focus-visible, not :focus-within: a mouse click on a button must not pin its section on top. */
.js .stack > .band:has(:focus-visible) { z-index: 5; }
/* The footer is the last sheet and slides over the final call to action, which stays on screen
   above it (footer height measured by site.js). */
@supports selector(:has(a)) {
  /* A spacer, not padding: sticky elements can't stick inside their parent's padding. */
  .js main:has(.stack) .stack::after { content: ""; display: block; height: var(--footer-h, 0px); }
  .js main:has(.stack) + .site-footer {
    position: relative; z-index: 4; margin-top: calc(-1 * var(--footer-h, 0px));
    border-radius: 1.5rem 1.5rem 0 0; box-shadow: 0 -1.5rem 3rem -1.5rem rgb(35 31 32 / 0.45);
  }
}

/* ---------- Dot field (dark bands) ---------- */

.hero--home, .band--dots { position: relative; isolation: isolate; }
.dotfield {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;  /* the glow never leaves its band */
  background-image: radial-gradient(circle, var(--dot-dim) 1.6px, transparent 2.2px);
  background-size: 22px 22px; background-position: center;
}
/* The orange glow: a soft light that drifts (and follows the mouse on desktop) BEHIND a fixed
   ink layer with dot-shaped holes, so only the dots light up and stay exactly in their grid.
   site.js creates .dotfield__glow and moves it with transform only (cheap for the GPU). */
.dotfield__glow {
  position: absolute; left: 0; top: 0; width: 22rem; height: 22rem; margin: -11rem 0 0 -11rem;
  border-radius: 50%; pointer-events: none; will-change: transform;
  background: radial-gradient(circle closest-side, rgb(246 136 31) 30%, rgb(246 136 31 / 0.6) 62%, rgb(246 136 31 / 0));
}
@media (max-width: 47.99rem) { .dotfield__glow { width: 18rem; height: 18rem; margin: -9rem 0 0 -9rem; } }
.dotfield::after {
  content: ""; position: absolute; inset: 0; background: var(--ink);
  -webkit-mask-image: radial-gradient(circle, transparent 2px, #000 2.7px);
  mask-image: radial-gradient(circle, transparent 2px, #000 2.7px);
  -webkit-mask-size: 22px 22px; mask-size: 22px 22px;
  -webkit-mask-position: center; mask-position: center;
}

/* ---------- Pointer proximity ("magnet") ---------- */

[data-magnet] {
  transform: translate(var(--mag-x, 0px), var(--mag-y, 0px));
  transition: transform 300ms cubic-bezier(.2,.8,.2,1), box-shadow 300ms ease, border-color 200ms ease;
}
.button[data-magnet] { box-shadow: 0 0 0 calc(var(--near, 0) * 6px) rgb(246 136 31 / 0.28); }
.channel-list li[data-magnet] { box-shadow: 0 0 0 calc(var(--near, 0) * 5px) rgb(246 136 31 / 0.3); }
.band--panel .channel-list li[data-magnet] { box-shadow: 0 0 0 calc(var(--near, 0) * 5px) rgb(168 80 15 / 0.35); }
.brand-card[data-magnet] { box-shadow: 0 calc(var(--near, 0) * 14px) calc(var(--near, 0) * 30px) -12px rgb(35 31 32 / 0.35); }
.steps > li[data-magnet]::before { transform: scale(calc(1 + var(--near, 0) * 0.18)); transition: transform 300ms cubic-bezier(.2,.8,.2,1); }

/* Pause/play icon button for the looping animations (WCAG 2.2.2) */
.motion-toggle {
  display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
  border: 1px solid var(--on-ink-soft); border-radius: 50%;
  background: transparent; color: var(--on-ink-soft); cursor: pointer;
  opacity: 0.75; transition: opacity 150ms ease, border-color 150ms ease, color 150ms ease;
}
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover, .motion-toggle:focus-visible { opacity: 1; color: var(--on-ink); border-color: var(--orange); }
.motion-toggle__play { display: none; }
.motion-paused .motion-toggle__play { display: block; }
.motion-paused .motion-toggle__pause { display: none; }

/* ---------- Motion ---------- */

@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }

@media (prefers-reduced-motion: no-preference) {
  /* Channel map: nodes appear, then goods keep flowing out from the brand */
  .channel-map .cm-link { animation: cm-flow 1.1s linear infinite; }
  .channel-map .cm-link--own { animation-name: cm-flow-own; }
  .channel-map .cm-node, .channel-map .cm-label, .channel-map .cm-note { opacity: 0; animation: cm-in 500ms ease forwards 250ms; }
  .steps--flow > li::after { animation: flow-x 0.9s linear infinite; }
  .steps--vflow > li::after { animation: flow-y 0.9s linear infinite; }

  /* Paused by the visitor, or off screen (site.js) */
  .motion-paused .channel-map .cm-link, .motion-paused .steps--flow > li::after, .motion-paused .steps--vflow > li::after,
  .is-offscreen .cm-link, .is-offscreen > li::after,
  .is-covered .cm-link, .is-covered > li::after { animation-play-state: paused; }

  /* Content slides up as its section scrolls into view (CSS scroll-driven; no effect where unsupported) */
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal both cubic-bezier(.2,.7,.2,1); animation-timeline: view(); animation-range: entry 0% entry 75%; }
    .services > .reveal:nth-child(2) { animation-range: entry 10% entry 85%; }
    .services > .reveal:nth-child(3) { animation-range: entry 20% entry 95%; }
  }

  /* Page change: the next page slides up over the current one, like turning to a new page */
  ::view-transition-old(root) { animation: 320ms cubic-bezier(.4,0,1,1) both vt-leave; }
  ::view-transition-new(root) { animation: 560ms cubic-bezier(.2,.8,.2,1) both vt-enter; }
}
/* Fallbacks for browsers without scroll-driven animations or cross-page view transitions
   (e.g. Firefox): site.js adds these classes only where needed, so without JS nothing is hidden. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-js .reveal { opacity: 0; translate: 0 3rem; transition: opacity 500ms ease, translate 800ms cubic-bezier(.2,.7,.2,1), transform 300ms cubic-bezier(.2,.8,.2,1), box-shadow 300ms ease, border-color 200ms ease; }
  .reveal-js .reveal.is-in { opacity: 1; translate: 0 0; }
  .reveal-js .services > .reveal:nth-child(2) { transition-delay: 90ms; }
  .reveal-js .services > .reveal:nth-child(3) { transition-delay: 180ms; }

  .is-leaving main, .is-leaving .site-footer { animation: vt-leave 260ms cubic-bezier(.4,0,1,1) both; }
  .is-entering main, .is-entering .site-footer { animation: vt-enter 560ms cubic-bezier(.2,.8,.2,1) both; }
}

@keyframes cm-flow { to { stroke-dashoffset: -16; } }
@keyframes cm-flow-own { to { stroke-dashoffset: -12; } }
@keyframes cm-in { to { opacity: 1; } }
@keyframes flow-x { to { background-position: 12px 0; } }
@keyframes flow-y { to { background-position: 0 12px; } }
@keyframes reveal { from { translate: 0 3rem; } }  /* no fade: text keeps full contrast at every moment */
@keyframes vt-leave { to { opacity: 0; transform: translateY(-2%) scale(0.98); } }
@keyframes vt-enter { from { opacity: 0.5; transform: translateY(14vh); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}