/* Hallmark · theme: custom · idea: "everything is cut: a pixel turned 45 degrees becomes the gem, and every tile keeps one cut corner" · vibe: "big, tight, warm, cut like a stone" · genre: editorial · job: hire
 * hero: the slogan on the left, a field of small gems on the right that appear near the pointer · nav: a slim bar with the logo, the one button and a nine-pixel menu that opens into a card · footer: the logo, one line, links and contact on the page's own colour; a goodbye rises when you scroll past the end · imagery: screenshots of the five client sites (own capture script) in real device frames, no photographs · signature: the pixel that turns into the gem
 * paper: Parelmoer · ink: Git · accent: Karneool · faces: Satoshi 900 for heads, DM Sans for text (the brand's own, found in the project), Fraunces for the statement and numerals · axes: light/grotesk-heavy/warm · posture: committed, one Karneool band closes the page · contrast: pass · fold: pass · brand: Edel (spec 2026-11-12, palette pinned by the brand guide) · v5.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R3 V5 · weakest: R, the client asked for the full studio run of sections; held it together with one shape (the cut corner) and one accent */
/* Hallmark · waive 38iii · two-tone heads on every section, a quiet first line over an ink second line · the client picked this head from their own reference and approved it in the plan for this page */
/* Hallmark · waive 47b · a real laptop and phone frame around each screenshot, five tiles · the client asked for device mockups for the projects, and every frame holds a real capture of a client site */
/* Hallmark · dismissed 58 · the count includes text that is not on screen: the answers inside closed FAQ rows and the four closed client cards; the visible words per screen measure 63 at most */
/* Hallmark · dismissed 77 · the pages under werk/ are a gallery and five project pages, built after the client's own reference; they are not landing pages and carry one job each */
/* Hallmark · dismissed 79 · on those pages the first screen is filled by the project pictures or by the window with the site in it, which the check does not count as hero content */
/* Hallmark · dismissed 83 · the projects page is a gallery of screenshots by design */
/* Hallmark · dismissed 80 · the stage in the services section draws the brand's own mark in three states (the pixel, the gem being built, the cut gem); it is the logo's geometry, not an illustration of something else */
/* Hallmark · waive 44d · the page grows to 1920 px on wide screens, with a margin of 5 per cent · the client asked, in so many words, to use more of the width everywhere, as their reference does */
/* Hallmark · dismissed 59 · ten sections where six to nine are advised; the client approved this run of sections in the plan */
@import url("./tokens.css?v=27");

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-padding-top: var(--space-3xl); scrollbar-color: var(--color-muted) var(--color-paper); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-body); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 24%, transparent); color: var(--color-ink); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
button, input, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.lead { font-size: var(--text-lead); line-height: 1.4; color: var(--color-ink-2); }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-control); background: var(--color-ink); color: var(--color-on-ink); }
.skip:focus-visible { top: var(--space-md); }

/* the cut: one corner at 45 degrees, as on the d and the l of the wordmark */
.facet { border-radius: 0 var(--radius-tile) var(--radius-tile) var(--radius-tile); clip-path: polygon(var(--facet) 0, 100% 0, 100% 100%, 0 100%, 0 var(--facet)); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 52px; padding: 0 var(--space-lg) 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-on-ink); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out); }
.btn__px { flex: none; width: 10px; height: 10px; background: currentColor; transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.btn:hover .btn__px, .btn:focus-visible .btn__px { transform: rotate(45deg) scale(1.15); background-color: var(--color-accent); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--sm { min-height: 44px; padding: 0 var(--space-md) 0 var(--space-sm); }
.btn--paper { background: var(--color-paper); color: var(--color-ink); }
.btn--paper:hover .btn__px, .btn--paper:focus-visible .btn__px { background-color: var(--color-accent); }
.btn--line { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 1.5px var(--color-ink); }
@media (prefers-reduced-motion: reduce) { .btn, .btn__px { transition: none; } }

.link { text-decoration: underline; text-decoration-color: var(--color-muted); transition: text-decoration-color var(--dur-short) var(--ease-out); }
.link:hover { text-decoration-color: var(--color-accent); }
.link:active { color: var(--color-ink-2); }
@media (prefers-reduced-motion: reduce) { .link { transition: none; } }

/* ---------- two-tone heads ---------- */
.duo { font-size: var(--text-duo); line-height: 0.95; }
.duo__a, .duo__b { display: block; }
.duo__a { color: var(--color-tone); }
.duo--m { font-size: var(--text-h1); line-height: 1; }
.head { margin-bottom: var(--space-2xl); }
.head--row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.head--row .duo { grid-column: 1 / span 7; }
.head__side { grid-column: 9 / -1; padding-bottom: 0.5em; font-size: var(--text-lead); line-height: 1.4; color: var(--color-ink-2); }
@media (max-width: 60rem) { .head--row { row-gap: var(--space-md); } .head--row .duo, .head__side { grid-column: 1 / -1; } .head__side { padding-bottom: 0; } }

/* ---------- nav: the logo, the one button, and nine pixels that open into a card ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: var(--z-sticky-nav); background: var(--page-bg, var(--color-paper)); transition: transform var(--dur-long) var(--ease-out), background-color var(--dur-long) var(--ease-out); }
.nav.is-away { transform: translateY(-100%); }
.nav.is-away:focus-within { transform: none; }
.sheet-up .nav:not(:focus-within) { transform: translateY(-100%); }
.nav__in { position: relative; display: flex; align-items: center; gap: var(--space-md); min-height: var(--nav-h); }
.nav__mark { display: block; margin-right: auto; border-radius: var(--radius-control); }
.nav__mark img { width: auto; height: 40px; }
.menu { --menu-bg: var(--color-ink); --menu-fg: var(--color-on-ink); --menu-dim: var(--color-on-ink-3); }
/* without JavaScript the menu is a plain row of links in the bar */
html:not(.js) .menu__toggle, html:not(.js) .menu__line, html:not(.js) .menu__bg { display: none; }
html:not(.js) .menu__list { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); }
html:not(.js) .menu__list a { display: inline-flex; align-items: center; min-height: 44px; }
/* with it: the card is laid out at full size, top right, and grows out of the nine pixels */
.js .menu { position: absolute; top: calc((var(--nav-h) - 44px) / 2); right: var(--gutter); z-index: 2; width: min(21rem, 100% - 2 * var(--gutter)); pointer-events: none; }
.js .menu__bg { position: absolute; inset: 0; border-radius: 0 var(--radius-panel) var(--radius-panel) var(--radius-panel); background: transparent; clip-path: polygon(calc(100% - 32px) 0, 100% 0, 100% 44px, calc(100% - 44px) 44px, calc(100% - 44px) 12px); transition: clip-path var(--dur-menu) var(--ease-menu), background-color var(--dur-menu) var(--ease-menu); }
.js .menu[data-open] .menu__bg { background: var(--menu-bg); clip-path: polygon(28px 0, 100% 0, 100% 100%, 0 100%, 0 28px); }
.menu__toggle { position: absolute; top: 0; right: 0; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-control); background: none; color: inherit; cursor: pointer; pointer-events: auto; transition: transform var(--dur-menu) var(--ease-menu), color var(--dur-menu) var(--ease-menu); }
.menu__dots { display: grid; grid-template-columns: repeat(3, 4px); gap: var(--space-2xs); }
.menu__dots i { width: 4px; height: 4px; background: currentColor; transition: transform var(--dur-menu) var(--ease-menu), opacity var(--dur-menu) var(--ease-menu), background-color var(--dur-menu) var(--ease-menu); }
.menu__toggle:hover .menu__dots i:nth-child(5) { background: var(--color-accent); transform: rotate(45deg) scale(1.5); }
.menu__toggle:active .menu__dots { transform: scale(0.9); }
/* open: the toggle steps into the card, four pixels fold into the middle, the rest turn into gems */
.menu[data-open] .menu__toggle { transform: translate(-10px, 10px); color: var(--menu-fg); }
.menu[data-open] .menu__toggle:focus-visible { outline-color: var(--menu-fg); }
.menu[data-open] .menu__dots i { transform: rotate(45deg) scale(1.4); }
.menu[data-open] .menu__dots i:nth-child(2) { transform: translateY(8px) rotate(45deg); opacity: 0; }
.menu[data-open] .menu__dots i:nth-child(4) { transform: translateX(8px) rotate(45deg); opacity: 0; }
.menu[data-open] .menu__dots i:nth-child(6) { transform: translateX(-8px) rotate(45deg); opacity: 0; }
.menu[data-open] .menu__dots i:nth-child(8) { transform: translateY(-8px) rotate(45deg); opacity: 0; }
.menu[data-open] .menu__dots i:nth-child(5) { background: var(--color-accent); transform: rotate(45deg) scale(1.6); }
.js .menu__panel { position: relative; display: grid; gap: var(--space-xl); padding: var(--space-2xl) var(--space-xl) var(--space-lg) calc(var(--space-xl) + var(--space-sm)); color: var(--menu-fg); transform-origin: 100% 0; transform: scale(0.15); opacity: 0; visibility: hidden; transition: transform var(--dur-menu) var(--ease-menu), opacity var(--dur-long) var(--ease-menu), visibility 0s linear var(--dur-menu); }
.js .menu[data-open] .menu__panel { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.js .menu__list a { position: relative; display: flex; align-items: center; min-height: 44px; color: var(--menu-dim); font: var(--display-weight) 2rem/1.1 var(--font-display); letter-spacing: -0.03em; text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.js .menu__list a::before { content: ""; position: absolute; inset-block: 0; left: calc(-1 * var(--space-lg)); width: 10px; height: 10px; margin-block: auto; background: var(--color-accent); transform: rotate(45deg) scale(0); transition: transform var(--dur-long) var(--ease-menu); }
.js .menu__list a:is([aria-current], :hover, :focus-visible) { color: var(--menu-fg); }
.js .menu__list a:is([aria-current], :hover)::before { transform: rotate(45deg) scale(1); }
.js .menu__list:has(a:hover) a[aria-current]:not(:hover) { color: var(--menu-dim); }
.js .menu__list:has(a:hover) a[aria-current]:not(:hover)::before { transform: rotate(45deg) scale(0); }
.js .menu__list a:active { color: var(--menu-dim); }
.js .menu__list a:focus-visible { outline-color: var(--menu-fg); }
.menu__line { font: italic 400 var(--text-md)/1.3 var(--font-serif); color: var(--menu-dim); }
/* the other language, under the line in the menu card (and always in the footer) */
.menu__lang { margin-top: calc(-1 * var(--space-lg)); }
.menu__lang a { display: inline-flex; align-items: center; min-height: 44px; color: var(--menu-dim); font: 500 var(--text-sm)/1 var(--font-body); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.3em; transition: color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out); }
.menu__lang a:is(:hover, :focus-visible) { color: var(--menu-fg); text-decoration-color: var(--color-accent); }
html:not(.js) .menu__lang { display: none; }
.menu__shade { position: fixed; inset: 0; z-index: 1; background: var(--color-shade); opacity: 0; visibility: hidden; transition: opacity var(--dur-long) var(--ease-out), visibility 0s linear var(--dur-long); }
.nav:has(.menu[data-open]) .menu__shade { opacity: 1; visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .nav, .menu__bg, .menu__toggle, .menu__dots i, .menu__panel, .menu__list a, .menu__list a::before, .menu__shade { transition: none !important; } }

/* ---------- the call that follows: it appears once the hero's button is out of view ---------- */
.fab { position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: var(--z-sticky); display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 52px; padding: 0 20px 0 var(--space-lg); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-on-ink); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; }
.fab__gem { flex: none; width: 10px; height: 10px; background: var(--color-accent); transform: rotate(45deg); }
/* with JavaScript it waits: first a pixel that turns into the gem, then the label unfolds from it */
.js .fab { visibility: hidden; opacity: 0; clip-path: inset(0 0 0 calc(100% - 52px) round 26px); transform: translateY(var(--space-md)); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-long) var(--ease-out), clip-path var(--dur-menu) var(--ease-menu) var(--dur-short), visibility 0s linear var(--dur-long); }
.js .fab .fab__gem { background: currentColor; transform: none; transition: transform var(--dur-long) var(--ease-out) 120ms, background-color var(--dur-long) var(--ease-out) 120ms; }
.js .fab.is-on { visibility: visible; opacity: 1; clip-path: inset(0 round 26px); transform: none; transition-delay: 0s, 0s, var(--dur-short), 0s; }
.js .fab.is-on .fab__gem { background: var(--color-accent); transform: rotate(45deg); }
.js .fab.is-on.is-small:not(:hover, :focus-visible) { clip-path: inset(0 0 0 calc(100% - 52px) round 26px); transition-delay: 0s; }
.fab__label { transition: opacity var(--dur-short) var(--ease-out); }
.js .fab.is-on.is-small:not(:hover, :focus-visible) .fab__label { opacity: 0; }
.fab:hover .fab__gem, .fab:focus-visible .fab__gem { transform: rotate(135deg); }
.fab:active { transform: translateY(1px); }
.page-dark .fab { background: var(--color-paper); color: var(--color-ink); }
@media (max-width: 40rem) {
  /* on a phone it slides in from the side edge; while you scroll down only its stone stays out */
  .fab { right: 0; bottom: var(--space-md); flex-direction: row-reverse; min-height: 48px; padding: 0 var(--space-md) 0 var(--space-md); border-radius: var(--radius-pill) 0 0 var(--radius-pill); font-size: var(--text-sm); }
  .js .fab { clip-path: none; transform: translateX(100%); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-menu) var(--ease-menu), visibility 0s linear var(--dur-menu); }
  .js .fab.is-on { clip-path: none; transition-delay: 0s; }
  .js .fab.is-on.is-small:not(:hover, :focus-visible) { clip-path: none; transform: translateX(calc(100% - 44px)); }
}
@media (prefers-reduced-motion: reduce) { .fab, .fab .fab__gem, .fab__label { transition: none !important; } }

/* ---------- the intro: the wordmark is set, the pixel turns into the gem, and the sheet is cut away ---------- */
/* it plays whenever someone arrives or reloads, not when they move from page to page inside the site */
.intro { display: none; }
.is-intro .intro { position: fixed; inset: 0; z-index: var(--z-toast); display: grid; place-items: center; background: var(--color-ink); color: var(--color-on-ink); animation: intro-out 640ms var(--ease-in-out) 1500ms both; }
/* the wordmark: letters in the colour of the text around them (Parelmoer here), the stone in Karneool */
.wm { height: auto; overflow: hidden; }
.wm__l { fill: currentColor; transform-box: fill-box; }
.wm__gem { fill: var(--color-accent); }
@keyframes rise { from { transform: translateY(106%); } to { transform: none; } }
.is-intro .intro .wm { width: min(44vw, 30rem); }
.is-intro .intro .wm__l { animation: rise var(--dur-rise) var(--ease-out) both; animation-delay: calc(var(--i) * 80ms + 160ms); }
.is-intro .intro .wm__gem { transform-box: fill-box; transform-origin: center; animation: turn 620ms var(--ease-out) 700ms both; }
@keyframes turn { 0% { opacity: 0; transform: rotate(-45deg) scale(0.6); } 35% { opacity: 1; transform: rotate(-45deg) scale(1); } 100% { opacity: 1; transform: none; } }
@keyframes intro-out { from { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0); } to { clip-path: polygon(220vmax 0, 100% 0, 100% 100%, 0 100%, 0 220vmax); visibility: hidden; } }

/* ---------- hero: the sentence on the left, a field of stones on the right ---------- */
.hero { position: relative; padding-top: var(--nav-h); overflow: clip; }
.hero__in { display: grid; grid-template-rows: 1fr auto; row-gap: var(--space-xl); min-height: min(calc(100svh - var(--nav-h)), 52rem); padding-block: var(--space-2xl) var(--space-lg); }
.hero__copy { position: relative; z-index: var(--z-base); align-self: center; display: grid; gap: var(--space-lg); justify-items: start; max-width: 47rem; }
.hero__title { font-size: var(--text-hero); line-height: 0.95; }
.hero__copy .lead { max-width: 25em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }
/* the field of stones: field.js draws it. Nothing shows at rest; stones appear near the pointer */
.stones { --field-hot: var(--color-accent); position: absolute; inset: 0 0 0 auto; width: 56%; height: 100%; pointer-events: none; -webkit-mask-image: var(--fade-stones); -webkit-mask-composite: source-in; mask-image: var(--fade-stones); mask-composite: intersect; }
.hero__clients { position: relative; z-index: var(--z-base); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-xl); padding-top: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); }
.clients__label { font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--color-muted); }
.clients__list { display: flex; flex-wrap: wrap; gap: 0 var(--space-xl); font: var(--display-weight) var(--text-lg)/1.2 var(--font-display); letter-spacing: -0.03em; }
.clients__list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.24em; transition: color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out); }
.clients__list a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.clients__list a:active { color: var(--color-muted); }
@media (prefers-reduced-motion: reduce) { .clients__list a { transition: none; } }
@media (max-width: 60rem) {
  .hero__in { grid-template-rows: auto auto auto; min-height: 0; padding-top: var(--space-xl); }
  .stones { position: static; grid-row: 2; width: 100%; height: clamp(13rem, 34svh, 18rem); -webkit-mask-image: var(--fade-stones-s); -webkit-mask-composite: source-over; mask-image: var(--fade-stones-s); mask-composite: add; }
  .hero__clients { gap: 0 var(--space-lg); }
  .clients__list { gap: 0 var(--space-lg); }
}

/* ---------- the story: a question whose letters come in with the scroll, four cards of what goes wrong, then a Karneool sheet with the answer ---------- */
.story__ask { padding-block: var(--section); }
.story__q { max-width: 12em; margin-inline: auto; font-size: var(--text-ask); line-height: 0.98; text-align: center; }
.cover { background: var(--color-accent); color: var(--color-accent-ink); padding-block: var(--section); }
.cover__in { display: grid; gap: var(--space-xl); justify-items: center; text-align: center; }
.cover__a { max-width: 14em; font: 400 var(--text-answer)/1.02 var(--font-serif); letter-spacing: -0.02em; color: var(--color-on-accent-soft); }
.cover__p { max-width: 28em; font-size: var(--text-sheet); font-weight: 500; line-height: 1.4; color: var(--color-on-accent-soft); }
/* under the question, four things that go wrong when you try to get a website made. Each card lies at its
   own angle and height; with JavaScript they come in one by one with the scroll (site.js sets --k from 0 to 1) */
.story__in { display: grid; justify-items: center; gap: var(--space-2xl); }
.pains { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); align-items: start; width: 100%; max-width: 78rem; text-align: left; }
.pain { --k: 1; --pace: 0.65; --tilt: 0deg; --drop: 0rem; position: relative; display: grid; align-content: start; overflow: hidden; font: 400 var(--text-sm)/1.4 var(--font-ui); color: var(--color-ink); background: var(--card-white); box-shadow: var(--shadow-pain); opacity: var(--k); transform: translateY(calc(var(--drop) + (1 - var(--k)) * 3rem)) rotate(calc(var(--tilt) * var(--k))) scale(calc(0.94 + 0.06 * var(--k))); }
.pain svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* a chat on a phone: a message from mum, your answer, the ticks that turn blue */
.pain--chat { --tilt: -2deg; --drop: 4rem; border-radius: 18px; background: var(--card-chat-bg); }
.chat__head { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); background: var(--card-white); border-bottom: var(--rule-hair) solid var(--card-line); }
.chat__avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--card-avatar); color: var(--card-white); font-weight: 600; font-size: var(--text-xs); }
.chat__who { display: grid; line-height: 1.2; }
.chat__name { font-weight: 600; }
.chat__status { display: grid; font-size: 0.6875rem; color: var(--color-muted); }
.chat__typing, .chat__online { grid-area: 1 / 1; }
.chat__typing { opacity: 0; color: var(--card-chat-live); }
.chat__body { display: grid; gap: var(--space-2xs); padding: var(--space-sm); }
.chat__dots, .chat__in { grid-area: 1 / 1; }
.chat__in, .chat__out, .chat__dots { position: relative; max-width: 88%; padding: 6px 9px 7px; border-radius: 10px; box-shadow: 0 1px 0.5px var(--card-line); }
.chat__in { justify-self: start; background: var(--card-white); border-top-left-radius: 2px; }
.chat__out { grid-row: 2; justify-self: end; background: var(--card-chat); border-top-right-radius: 2px; }
.chat__time { float: right; margin: 6px 0 -4px 8px; font-size: 0.625rem; color: var(--color-muted); }
.chat__ticks { color: var(--card-chat-tick); letter-spacing: -0.35em; padding-right: 0.35em; }
.chat__dots { display: flex; gap: 3px; justify-self: start; align-self: start; margin: 0; padding: 10px 11px; background: var(--card-white); opacity: 0; }
.chat__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-muted); }

/* an AI chat: your question, a star that turns while it thinks, an answer that streams in word by word */
.pain--ai { --drop: 1.25rem; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-tile); background: var(--card-ai); border: var(--rule-hair) solid var(--card-line); }
.ai__ask { justify-self: end; max-width: 88%; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-control); background: var(--card-ai-ask); }
.ai__reply { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-xs); align-items: start; }
.ai__mark { width: 18px; height: 18px; color: var(--color-accent); stroke-width: 2.4 !important; }
.ai__think, .ai__text { grid-column: 2; grid-row: 1; }
.ai__think { opacity: 0; background: linear-gradient(90deg, var(--color-muted) 30%, var(--color-tone) 50%, var(--color-muted) 70%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.ai__tools { display: flex; align-items: center; gap: var(--space-sm); padding-top: var(--space-xs); border-top: var(--rule-hair) solid var(--card-line); color: var(--color-muted); font-size: var(--text-xs); }
.ai__tools svg { width: 14px; height: 14px; }

/* a mail client: the third reply lands on top of the other two */
.pain--mail { --tilt: 1deg; border-radius: var(--radius-control); border: var(--rule-hair) solid var(--card-line); }
.mail__bar { display: flex; align-items: center; gap: 5px; padding: var(--space-xs) var(--space-sm); background: var(--card-mail-bar); border-bottom: var(--rule-hair) solid var(--card-line); font-size: var(--text-xs); font-weight: 600; }
.mail__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--card-line); }
.mail__box { margin-left: var(--space-xs); }
.mail__count { display: grid; margin-left: auto; min-width: 18px; padding: 1px 5px; border-radius: 9px; background: var(--card-mail-dot); color: var(--card-white); font-size: 0.6875rem; text-align: center; }
.mail__count b { grid-area: 1 / 1; font-weight: 600; }
.mail__count b:first-child { opacity: 0; }
.mail__list { display: grid; overflow: hidden; }
.mail__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-xs); padding: 6px var(--space-sm) 6px 22px; border-bottom: var(--rule-hair) solid var(--card-line); font-size: var(--text-xs); color: var(--color-muted); }
.mail__subj { grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail__row--new { background: var(--card-mail-new); color: var(--color-ink); font-weight: 600; }
.mail__row--new::before { content: ""; position: absolute; top: 11px; left: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--card-mail-dot); }
.mail__text { padding: var(--space-sm); }

/* a post-it: the question is written on it, the password gets a scribble under it */
.pain--note { --tilt: 3deg; --drop: 2.25rem; align-content: center; min-height: 10rem; padding: var(--space-lg); background: var(--card-note); font: 500 var(--text-title)/1.15 var(--font-hand); transform-origin: 50% 0; }
.note__mark { position: relative; white-space: nowrap; }
.note__line { position: absolute; left: -2%; bottom: -0.2em; width: 104%; height: 0.35em; overflow: visible; color: var(--color-accent); stroke-width: 3 !important; }
.ww { display: inline-block; white-space: nowrap; }

/* with JavaScript, each card plays its little scene once it has come in (site.js adds .is-playing),
   (the swaps inside a card use opacity, never visibility: a child set to visible would show through
   while the section is hidden under the sheet)
   at the tempo set by --pace on .pain (1 is the original speed, lower is faster),
   and starts over when you scroll back. Without it, or with less motion, every card shows its end state. */
.story.is-live .pain:not(.is-playing) :is(.chat__in, .chat__out, .ai__ask, .ai__mark, .ai__tools, .mail__row--new, .mail__text, .ai__text .ww, [data-write] .cc) { opacity: 0; }
.story.is-live .pain:not(.is-playing) .chat__online, .story.is-live .pain:not(.is-playing) .mail__count b:last-child { opacity: 0; }
.story.is-live .pain:not(.is-playing) :is(.chat__typing, .chat__dots, .mail__count b:first-child) { opacity: 1; }
.story.is-live .pain:not(.is-playing) .mail__row:not(.mail__row--new) { transform: translateY(-100%); }
.story.is-live .pain:not(.is-playing) .note__line path { stroke-dashoffset: 1; }
.note__line path { stroke-dasharray: 1; }

.story.is-live .is-playing .chat__typing { animation: show-then-hide calc(1.3s * var(--pace)) steps(1) both; }
.story.is-live .is-playing .chat__online { animation: hide-then-show calc(1.3s * var(--pace)) steps(1) both; }
.story.is-live .is-playing .chat__dots { animation: show-then-hide calc(1.3s * var(--pace)) steps(1) both; }
.story.is-live .is-playing .chat__dots i { animation: dot 0.9s ease-in-out infinite; }
.story.is-live .is-playing .chat__dots i:nth-child(2) { animation-delay: 0.15s; }
.story.is-live .is-playing .chat__dots i:nth-child(3) { animation-delay: 0.3s; }
.story.is-live .is-playing .chat__in { animation: pop calc(0.35s * var(--pace)) var(--ease-out) calc(1.3s * var(--pace)) both; transform-origin: 0 0; }
.story.is-live .is-playing .chat__out { animation: pop calc(0.35s * var(--pace)) var(--ease-out) calc(2.4s * var(--pace)) both; transform-origin: 100% 0; }
.story.is-live .is-playing .chat__ticks { animation: tick-read calc(0.3s * var(--pace)) ease calc(3.3s * var(--pace)) both; }

.story.is-live .is-playing .ai__ask { animation: pop calc(0.35s * var(--pace)) var(--ease-out) both; transform-origin: 100% 100%; }
.story.is-live .is-playing .ai__mark { animation: appear calc(0.2s * var(--pace)) ease calc(0.45s * var(--pace)) both, spin calc(0.8s * var(--pace)) linear calc(0.45s * var(--pace)) 2; }
.story.is-live .is-playing .ai__think { animation: show-then-hide calc(2.05s * var(--pace)) steps(1) both, shimmer calc(1.1s * var(--pace)) linear calc(0.5s * var(--pace)) 2; }
.story.is-live .is-playing .ai__think { animation-delay: calc(0s * var(--pace)), calc(0.5s * var(--pace)); }
.story.is-live .pain.is-playing .ai__text .ww { animation: word-in calc(0.3s * var(--pace)) ease calc((2.05s + var(--i) * 70ms) * var(--pace)) both; }
.story.is-live .is-playing .ai__tools { animation: appear calc(0.4s * var(--pace)) ease calc((2.2s + var(--n) * 70ms) * var(--pace)) both; }

.story.is-live .is-playing .mail__count b:first-child { animation: show-then-hide calc(0.6s * var(--pace)) steps(1) both; }
.story.is-live .is-playing .mail__count b:last-child { animation: hide-then-show calc(0.6s * var(--pace)) steps(1) both; }
.story.is-live .is-playing .mail__row:not(.mail__row--new) { animation: rows-down calc(0.5s * var(--pace)) var(--ease-out) calc(0.5s * var(--pace)) both; }
.story.is-live .is-playing .mail__row--new { animation: row-in calc(0.5s * var(--pace)) var(--ease-out) calc(0.5s * var(--pace)) both; }
.story.is-live .is-playing .mail__text { animation: appear calc(0.5s * var(--pace)) ease calc(1.2s * var(--pace)) both; }

.story.is-live .pain.is-playing [data-write] .cc { animation: appear calc(0.12s * var(--pace)) ease calc((0.2s + var(--i) * 45ms) * var(--pace)) both; }
.story.is-live .is-playing .note__line path { animation: draw calc(0.5s * var(--pace)) var(--ease-out) calc((0.3s + var(--n) * 45ms) * var(--pace)) both; }
.story.is-live .pain--note.is-playing { animation: swing 4s ease-in-out 0.5s infinite; }

@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes show-then-hide { from { opacity: 1; } to { opacity: 0; } }
@keyframes hide-then-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes dot { 0%, 60%, 100% { transform: none; opacity: 0.45; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes tick-read { from { color: var(--color-muted); } to { color: var(--card-chat-tick); } }
@keyframes spin { to { transform: rotate(180deg); } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes word-in { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: none; } }
@keyframes rows-down { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes row-in { from { opacity: 0; transform: translateY(-60%); } to { opacity: 1; transform: none; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes swing { 0%, 100% { rotate: 0deg; } 50% { rotate: 0.8deg; } }

@media (max-width: 60rem) {
  .story__in { gap: var(--space-xl); }
  .pains { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); max-width: 36rem; }
  .pain { --drop: 0rem; }
  .pain--note { min-height: 0; }
}
@media (max-width: 40rem) {
  .pains { gap: var(--space-sm); }
  .pain { font-size: 0.6875rem; }
  .pain--ai { padding: var(--space-sm); gap: var(--space-xs); }
  .chat__body, .mail__text { padding: var(--space-xs); }
  .mail__row:last-child, .ai__tools span { display: none; }
  .mail__row, .mail__bar { font-size: 0.625rem; }
  .pain--note { padding: var(--space-md); font-size: var(--text-lg); }
}
.story .w { display: inline-block; white-space: nowrap; }
.story .c { display: inline-block; }
/* under the sheet a tip points down, as the lower half of the stone */
.story-tail { position: relative; z-index: var(--z-base); height: var(--tip); margin-top: -1px; margin-bottom: calc(-1 * var(--tip) + 1px); background: var(--color-accent); clip-path: polygon(calc(50% - var(--tip)) 0, calc(50% + var(--tip)) 0, 50% 100%); pointer-events: none; }
/* with JavaScript the section stays on screen: site.js moves the letters and the sheet with the scroll */
.story.is-live { position: relative; z-index: var(--z-raised); height: calc(100svh + var(--story-len, 200vh)); pointer-events: none; }
/* the next section slides up under the sheet, so the sheet lifts off something that is already there */
.story.is-live + .story-tail + .werk { margin-top: -80svh; }
.story.is-live .story__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.story.is-live .story__ask { position: absolute; inset: 0; display: grid; align-items: center; padding-block: 0; }
.story.is-live .cover { position: absolute; inset: calc(-1 * var(--tip) - var(--space-xs)) 0; display: grid; align-items: center; padding-block: 0; transform: translateY(var(--cover-y, 100%)); clip-path: polygon(0 var(--tip), calc(50% - var(--tip)) var(--tip), 50% 0, calc(50% + var(--tip)) var(--tip), 100% var(--tip), 100% calc(100% - var(--tip)), calc(50% + var(--tip)) calc(100% - var(--tip)), 50% 100%, calc(50% - var(--tip)) calc(100% - var(--tip)), 0 calc(100% - var(--tip))); will-change: transform; }
.story.is-covered .story__ask { visibility: hidden; }
.story.is-live + .story-tail { display: none; }

/* ---------- work: a strip of projects that runs off the page into a blur ---------- */
.werk { padding-block: var(--section); }
.werk .duo { margin-bottom: var(--space-xl); }
.strip { position: relative; margin-right: calc(-1 * var(--gutter) - max(0px, (100vw - var(--container)) / 2)); }
.strip__list { display: flex; gap: var(--space-xl); margin-left: calc(-1 * var(--space-sm)); padding: var(--space-sm) 0 var(--space-sm) var(--space-sm); overflow: hidden; }
.strip__item { flex: none; width: 33.75rem; }   /* 540 px wide and a picture of 540 by 317, as measured on the reference */
.pc { --tile: var(--color-paper-3); position: relative; display: grid; gap: var(--space-sm); text-decoration: none; }
.pc--amc { --tile: var(--tile-amc); } .pc--depaepe { --tile: var(--tile-depaepe); } .pc--alana { --tile: var(--tile-alana); } .pc--zonnebloem { --tile: var(--tile-zonnebloem); } .pc--ico { --tile: var(--tile-ico); }
/* the project's own colour steps out as a frame around the card you point at */
.pc__hover { position: absolute; inset: calc(-1 * var(--space-sm)); border-radius: var(--radius-tile); background: var(--tile); opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.pc:hover .pc__hover, .pc:focus-visible .pc__hover { opacity: 1; }
.pc:active .pc__hover { opacity: 0.8; }
.pc__img { position: relative; width: 100%; aspect-ratio: 540 / 317; object-fit: cover; object-position: 50% 0; border-radius: var(--radius-control); box-shadow: 0 0 0 1px var(--color-rule); }
.pc__cap { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 28px; }
.pc__name { display: inline-flex; align-items: center; gap: var(--space-sm); font-weight: 500; }
.pc__px { flex: none; width: 10px; height: 10px; background: currentColor; transition: transform var(--dur-short) var(--ease-out); }
.pc:hover .pc__px, .pc:focus-visible .pc__px { transform: rotate(45deg); }
.pc__kind { color: var(--color-ink-2); text-align: right; }
/* five layers, each a little more blur and a little further right */
.strip__blur { position: absolute; inset: 0 0 0 auto; z-index: var(--z-base); width: 50%; background: linear-gradient(90deg, transparent 35%, var(--color-paper-veil)); pointer-events: none; transition: opacity var(--dur-short) var(--ease-out); }
.strip__blur i { position: absolute; inset: 0; }
.strip__blur i:nth-child(1) { -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); -webkit-mask-image: var(--blur-1); mask-image: var(--blur-1); }
.strip__blur i:nth-child(2) { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); -webkit-mask-image: var(--blur-2); mask-image: var(--blur-2); }
.strip__blur i:nth-child(3) { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask-image: var(--blur-3); mask-image: var(--blur-3); }
.strip__blur i:nth-child(4) { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); -webkit-mask-image: var(--blur-4); mask-image: var(--blur-4); }
.strip__blur i:nth-child(5) { -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); -webkit-mask-image: var(--blur-5); mask-image: var(--blur-5); }
/* a card under the blur that takes keyboard focus is shown clear */
.strip:has(.strip__item:nth-child(n+3) .pc:focus-visible) .strip__blur { opacity: 0; }
.strip__more { position: absolute; top: 44%; right: calc(var(--gutter) + max(0px, (100vw - var(--container)) / 2)); z-index: var(--z-raised); }
@media (prefers-reduced-motion: reduce) { .pc__hover, .pc__px, .strip__blur { transition: none; } }
@media (max-width: 60rem) {
  /* on a small screen the strip is swiped, nothing is blurred */
  .strip__list { gap: var(--space-lg); padding-right: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .strip__list::-webkit-scrollbar { display: none; }
  .strip__item { width: min(78vw, 24rem); scroll-snap-align: start; }
  .strip__blur { display: none; }
  .strip__more { position: static; margin-top: var(--space-lg); }
}

/* ---------- what we do: three rows, and one stage on which the stone is drawn, built and kept ---------- */
.diensten { padding-bottom: var(--section); }
.diensten__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.diensten__copy { grid-column: 1 / span 6; }
.diensten__copy .duo { margin-bottom: var(--space-2xl); }
.cuts { border-top: var(--rule-hair) solid var(--color-ink); }
.cut { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--space-md); align-items: start; padding-block: var(--space-xl) var(--space-3xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.cut__num { padding-top: 0.55em; font: italic 400 var(--text-num)/1 var(--font-serif); font-variant-numeric: lining-nums; color: var(--color-muted); }
.cut__title { font-size: var(--text-row); color: var(--color-tone); transition: color var(--dur-long) var(--ease-out); }
.cut.is-on .cut__title { color: var(--color-ink); }
.cut__line { max-width: 24em; margin-top: var(--space-md); font-size: var(--text-lead); line-height: 1.4; color: var(--color-ink-2); }
/* the stage stays in view while the rows pass; its picture follows the row that is on */
.stage { grid-column: 8 / -1; justify-self: end; width: 100%; max-width: 38rem; position: sticky; top: max(var(--space-2xl), calc(50svh - min(18.5vw, 19rem))); aspect-ratio: 1; overflow: hidden; background: var(--color-barnsteen); color: var(--color-ink); transition: background-color var(--dur-rise) var(--ease-out), color var(--dur-rise) var(--ease-out); }
.stage[data-step="2"] { background: var(--color-smaragd); color: var(--color-on-ink); }
.stage[data-step="3"] { background: var(--color-ink); color: var(--color-on-ink); }
.stage__svg { width: 100%; height: 100%; }
.st { transform-origin: 50% 50%; transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-rise) var(--ease-out); }
.js .stage:not([data-step="1"]) .st--1, .js .stage:not([data-step="2"]) .st--2, .js .stage:not([data-step="3"]) .st--3, .js .stage:not([data-step="3"]) .stage__gem { opacity: 0; transform: scale(0.94); }
html:not(.js) .st--2, html:not(.js) .st--3 { display: none; }
/* the cut stone in three dimensions: site.js draws it turning; without it the flat stone stays */
.stage__gem { --gem: var(--color-accent); position: absolute; inset: 17%; display: none; width: 66%; height: 66%; transform-origin: 50% 50%; transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-rise) var(--ease-out); }
.stage.has-gem .stage__gem { display: block; }
.stage.has-gem .gem2d { display: none; }
.ln { fill: none; stroke: currentColor; stroke-width: 1.5; }
.ln--dash { stroke-dasharray: 5 8; }
.ln--bold { stroke-width: 4; stroke-linejoin: miter; }
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-draw) var(--ease-out) 140ms; }
.stage[data-step="1"] .draw { stroke-dashoffset: 0; }
.hot { fill: var(--color-accent); }
.px { fill: currentColor; transform-box: fill-box; transform-origin: center; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i) * 22ms + 80ms); }
.px--hot { fill: var(--color-accent); }
.js .stage:not([data-step="2"]) .px { opacity: 0; transform: scale(0.2); }
.ring { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0.45; }
.moon { fill: currentColor; transform-box: fill-box; transform-origin: center; transform: rotate(45deg); }
.orbit { transform-origin: 200px 200px; animation: orbit 18s linear infinite paused; }
.stage[data-step="3"] .orbit { animation-play-state: running; }
.facet-a { fill: var(--color-on-ink); opacity: 0.22; }
.facet-b { fill: var(--color-ink); opacity: 0.16; }
@keyframes orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cut__title, .stage, .st, .draw, .px, .stage__gem { transition: none; }
  .orbit { animation: none; }
}
@media (max-width: 60rem) {
  .diensten__in { row-gap: var(--space-xl); }
  .diensten__copy { grid-column: 1 / -1; display: contents; }
  .diensten__copy .duo { grid-column: 1 / -1; margin-bottom: 0; }
  .stage { grid-column: 1 / -1; grid-row: 2; top: var(--space-md); z-index: var(--z-base); aspect-ratio: 16 / 10; }
  .cuts { grid-column: 1 / -1; grid-row: 3; }
  .cut { padding-block: var(--space-lg) var(--space-2xl); }
}
@media (max-width: 40rem) {
  .cut { grid-template-columns: 3rem minmax(0, 1fr); }
  .stage { aspect-ratio: 4 / 3; }
}

/* ---------- how we work: four steps on one line, and on it the pixel turns into the gem ---------- */
.aanpak { padding-bottom: var(--section); }
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); }
.steps::before { content: ""; position: absolute; top: 9px; right: 0; left: 0; height: 1px; background: var(--color-ink); transform-origin: 0 50%; }
.step { display: grid; align-content: start; gap: var(--space-sm); padding-right: var(--space-lg); }
.step__mark { position: relative; width: 18px; height: 18px; margin-bottom: var(--space-lg); background: color-mix(in oklab, var(--color-accent) var(--k), var(--color-ink)); box-shadow: 0 0 0 var(--space-xs) var(--color-paper); transform: rotate(var(--turn)); }
.step__title { font-size: var(--text-title); line-height: 1.05; letter-spacing: -0.03em; }
.step p { color: var(--color-ink-2); }
.js .steps[data-reveal]::before { transform: scaleX(0); transition: transform var(--dur-draw) var(--ease-out); }
.js .steps[data-reveal] .step__mark { background: var(--color-ink); transform: none; transition: transform var(--dur-rise) var(--ease-out), background-color var(--dur-rise) var(--ease-out); transition-delay: calc(var(--n) * 160ms + 240ms); }
.js .steps.is-in::before { transform: none; }
.js .steps.is-in .step__mark { background: color-mix(in oklab, var(--color-accent) var(--k), var(--color-ink)); transform: rotate(var(--turn)); }
@media (prefers-reduced-motion: reduce) {
  .js .steps[data-reveal]::before { transform: none; transition: none; }
  .js .steps[data-reveal] .step__mark { background: color-mix(in oklab, var(--color-accent) var(--k), var(--color-ink)); transform: rotate(var(--turn)); transition: none; }
}
@media (max-width: 60rem) {
  /* the line stands upright and the steps hang from it */
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .steps::before { top: 0; bottom: 0; right: auto; left: 9px; width: 1px; height: auto; transform-origin: 50% 0; }
  .js .steps[data-reveal]::before { transform: scaleY(0); }
  .js .steps.is-in::before { transform: none; }
  .step { position: relative; padding: 0 0 0 var(--space-2xl); }
  .step__mark { position: absolute; top: var(--space-2xs); left: 0; margin: 0; }
}

/* ---------- content that is still to come ---------- */
.pending { position: relative; display: grid; place-items: center; padding: var(--space-lg); border: 1px dashed var(--color-muted); background: var(--color-paper-2); clip-path: none; border-radius: var(--radius-tile); }
.pending__chip { display: inline-block; max-width: 100%; padding: var(--space-xs) var(--space-md); border: 1px dashed var(--color-muted); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink-2); font: 500 var(--text-sm)/1.3 var(--font-body); text-align: center; }
.pending__chip--ink { border-color: var(--color-on-ink-2); background: transparent; color: var(--color-on-ink-2); }

/* ---------- what clients say: five cards side by side, one lies open ---------- */
.reacties { padding-bottom: var(--section); }
.rev__head { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-md); align-items: end; margin-bottom: var(--space-2xl); padding-top: var(--space-3xl); }
.rev__head .duo { position: relative; grid-column: 1 / span 7; }
.rev__side { position: relative; grid-column: 9 / -1; padding-bottom: 0.3em; font-size: var(--text-lead); line-height: 1.4; color: var(--color-ink-2); }
/* five stones behind the head, one for each client: they turn from pixel to gem as the section arrives */
.rev__gems { position: absolute; top: 0; left: 50%; display: flex; gap: var(--space-2xl); transform: translateX(-50%); }
.rev__gems i { width: clamp(2.5rem, 6vw, 5rem); aspect-ratio: 1; background: var(--color-paper-3); transform: rotate(45deg); }
.js .rev__head[data-reveal] .rev__gems i { transform: rotate(0deg) scale(0.7); transition: transform var(--dur-rise) var(--ease-out); transition-delay: calc(var(--n) * 90ms); }
.js .rev__head.is-in .rev__gems i { transform: rotate(45deg); }
.cascade { display: flex; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cascade::-webkit-scrollbar { display: none; }
.rev { --tile: var(--color-paper-3); position: relative; flex: none; display: grid; grid-template-rows: auto 1fr; width: min(84vw, 26rem); overflow: hidden; border-radius: var(--radius-tile); background: var(--tile); color: var(--color-ink); scroll-snap-align: start; }
.rev--amc { --tile: var(--tile-amc); } .rev--depaepe { --tile: var(--tile-depaepe); } .rev--alana { --tile: var(--tile-alana); } .rev--zonnebloem { --tile: var(--tile-zonnebloem); } .rev--ico { --tile: var(--tile-ico); }
.rev__visual { display: grid; place-items: center; aspect-ratio: 16 / 10; }
.rev__img { width: 72%; height: auto; filter: var(--shadow-mock); }
.rev__quote { display: grid; align-content: space-between; gap: var(--space-lg); padding: var(--space-lg); background: var(--color-paper-hi); }
.rev__mark { display: block; height: 0.5em; font: 400 4.5rem/1 var(--font-serif); color: var(--color-rule); }
/* no quotation mark while the line is only a placeholder: it must not read as a quote */
.rev__quote:has([data-pending]) .rev__mark { display: none; }
.rev__text { font: 400 var(--text-title)/1.25 var(--font-serif); color: var(--color-ink-2); }
.rev__who { display: grid; gap: var(--space-3xs); }
.rev__name { font: var(--display-weight) var(--text-title)/1.05 var(--font-display); letter-spacing: -0.03em; }
.rev__who .link { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.rev__hit, .rev__tab { display: none; }
/* wide screens with JavaScript: every card is as wide as the open one and shows only a strip of itself until it is chosen */
.cascade.is-live { position: relative; display: block; height: 30rem; overflow: hidden; }
.cascade.is-live .rev { position: absolute; inset: 0 auto 0 0; display: block; width: var(--a); transform: translateX(var(--x)); clip-path: inset(0 var(--clip) round var(--radius-tile)); border-radius: 0; transition: transform var(--dur-menu) var(--ease-menu), clip-path var(--dur-menu) var(--ease-menu); }
.cascade.is-live .rev__visual { position: absolute; inset: 0; aspect-ratio: auto; }
.cascade.is-live .rev__img { width: 50%; transition: transform var(--dur-menu) var(--ease-menu); }
.cascade.is-live .rev.is-on .rev__img { transform: translateX(48%) scale(0.92); }
.cascade.is-live .rev__quote { position: absolute; inset: 0 auto 0 0; width: 48%; opacity: 0; visibility: hidden; transition: opacity var(--dur-short) var(--ease-out), visibility 0s linear var(--dur-short); }
.cascade.is-live .rev.is-on .rev__quote { opacity: 1; visibility: visible; transition: opacity var(--dur-long) var(--ease-out) var(--dur-short), visibility 0s; }
/* a closed card says whose it is: the name stands upright along the strip */
.cascade.is-live .rev__tab { position: absolute; bottom: var(--space-md); left: calc(var(--clip) + var(--space-sm)); display: block; writing-mode: vertical-rl; rotate: 180deg; font: var(--display-weight) var(--text-md)/1 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; transition: opacity var(--dur-short) var(--ease-out); }
.cascade.is-live .rev.is-on .rev__tab { opacity: 0; }
/* the button is small; its ::after stretches over the whole card, so the whole strip can be clicked */
.cascade.is-live .rev__hit { display: block; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.cascade.is-live .rev__hit::after { content: ""; position: absolute; inset: 0; z-index: var(--z-base); }
.cascade.is-live .rev__hit:focus-visible { outline: 0; }
.cascade.is-live .rev__hit:focus-visible::after { outline: 3px solid var(--color-focus); outline-offset: calc(-1 * var(--space-xs) - var(--clip)); inset: 0 var(--clip); }
.cascade.is-live .rev.is-on .rev__hit { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rev__head[data-reveal] .rev__gems i { transform: rotate(45deg); transition: none; }
  .cascade.is-live .rev, .cascade.is-live .rev__img, .cascade.is-live .rev__quote { transition: none; }
}
@media (max-width: 60rem) {
  .rev__head { padding-top: var(--space-2xl); }
  .rev__head .duo, .rev__side { grid-column: 1 / -1; }
  .rev__gems { gap: var(--space-lg); }
  .cascade { margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
}

/* ---------- about: two partners, two tiles; the letter makes room for a portrait later ---------- */
.over { padding-bottom: var(--section); }
.over__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.over__head { grid-column: 1 / span 5; display: grid; gap: var(--space-lg); }
.partners { grid-column: 7 / -1; justify-self: end; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); width: 100%; max-width: 38rem; }
.partner { display: grid; gap: var(--space-md); }
.partner__pic { --facet: clamp(24px, 3vw, 44px); position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.partner__pic--a { background: var(--color-smaragd); color: var(--color-on-ink); }
.partner__pic--j { background: var(--color-barnsteen); color: var(--color-ink); }
.partner__initial { position: absolute; top: 0.02em; right: 0.12em; font: italic 400 clamp(9rem, 3rem + 15vw, 18rem)/0.9 var(--font-serif); opacity: 0.28; }
.partner__photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.partner__name { font-size: var(--text-title); line-height: 1.05; letter-spacing: -0.03em; }
@media (max-width: 60rem) { .over__head, .partners { grid-column: 1 / -1; } }

/* ---------- questions ---------- */
.faq { padding-bottom: var(--section); }
.faq__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.faq__head { grid-column: 1 / span 5; display: grid; gap: var(--space-lg); }
.faq__side { font-size: var(--text-lead); line-height: 1.4; color: var(--color-ink-2); }
.faq__list { grid-column: 7 / -1; border-top: var(--rule-hair) solid var(--color-ink); }
.qa { border-bottom: var(--rule-hair) solid var(--color-rule); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; padding-block: var(--space-md); cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa__q { font: 500 var(--text-lead)/1.25 var(--font-body); }
.qa__icon { flex: none; width: 14px; height: 14px; margin-right: var(--space-xs); background: var(--color-ink); transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.qa[open] .qa__icon { transform: rotate(45deg); background-color: var(--color-accent); }
.qa summary:hover .qa__q { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }
.qa__a { padding: 0 var(--space-2xl) var(--space-lg) 0; color: var(--color-ink-2); }
.qa__a p { max-width: 60ch; }
@media (prefers-reduced-motion: reduce) { .qa__icon { transition: none; } }
@media (max-width: 60rem) { .faq__head, .faq__list { grid-column: 1 / -1; } }

/* ---------- the close: one calm panel that sends you to the contact page ---------- */
.slot { padding-bottom: var(--section); }
.cta { --facet: clamp(40px, 6vw, 96px); display: grid; justify-items: center; gap: var(--space-lg); padding: var(--space-4xl) var(--space-lg); border-radius: 0 var(--radius-panel) var(--radius-panel) var(--radius-panel); background: var(--color-paper-2); text-align: center; }
.cta__h { max-width: 11em; font-size: var(--text-duo); line-height: 0.98; }
.cta__em { display: block; font: italic 400 1em/1.02 var(--font-serif); letter-spacing: -0.02em; color: var(--color-accent-deep); }
.cta__p { max-width: 28em; font-size: var(--text-lead); line-height: 1.4; color: var(--color-ink-2); }
.js .cta[data-reveal] .cta__em { opacity: 0; transform: translateY(0.3em); transition: opacity var(--dur-rise) var(--ease-out) 160ms, transform var(--dur-rise) var(--ease-out) 160ms; }
.js .cta.is-in .cta__em { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .cta[data-reveal] .cta__em { opacity: 1; transform: none; transition: none; } }

/* ---------- the contact page: a form of very large fields, as if you write a line on the page ---------- */
.page-contact .fab { display: none; }
.contact { padding-block: calc(var(--nav-h) + var(--space-xl)) var(--section); }
.contact__h { margin-bottom: var(--space-xl); font-size: var(--text-hero); line-height: 0.98; }
.contact__em { font: italic 400 1em/1 var(--font-serif); letter-spacing: -0.02em; color: var(--color-accent-deep); }
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.form { grid-column: 1 / span 7; display: grid; gap: var(--space-sm); }
.field { position: relative; display: grid; padding-top: var(--space-md); }
/* the label is the large grey line; once you write, it steps up and becomes a small label */
.field label { position: absolute; top: var(--space-md); left: 0; font: var(--display-weight) var(--text-field)/1.15 var(--font-display); letter-spacing: -0.03em; color: var(--color-tone); pointer-events: none; transform-origin: 0 0; transition: transform var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.field input, .field textarea { display: block; width: 100%; min-height: 52px; padding: 0; border: 0; border-bottom: var(--rule-hair) solid var(--color-muted); border-radius: 0; background: none; color: var(--color-ink); font: var(--display-weight) var(--text-field)/1.15 var(--font-display); letter-spacing: -0.03em; caret-color: var(--color-accent); }
.field textarea { min-height: 2.4em; resize: vertical; }
.field input:hover, .field textarea:hover { border-bottom-color: var(--color-ink); }
.field input:focus-visible, .field textarea:focus-visible { outline: 0; border-bottom-color: var(--color-ink); box-shadow: 0 2px 0 var(--color-ink); }
.field:focus-within label, .field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label { color: var(--color-muted); transform: translateY(calc(-1 * var(--space-md))) scale(0.3); }
.field input[aria-invalid], .field textarea[aria-invalid] { border-bottom-color: var(--color-error); }
.field input:disabled, .field textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.field--sm label, .field--sm input, .field--sm textarea { font-size: var(--text-title); }
.field--sm:focus-within label, .field--sm input:not(:placeholder-shown) + label, .field--sm textarea:not(:placeholder-shown) + label { transform: translateY(calc(-1 * var(--space-md))) scale(0.6); }
.field__help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-error); }
.form__end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-md); }
.form__status, .form__nojs { min-height: 1lh; font-size: var(--text-sm); color: var(--color-ink-2); }
.contact__aside { --facet: clamp(24px, 3vw, 44px); grid-column: 9 / -1; display: grid; gap: var(--space-xl); padding: var(--pad-card); background: var(--color-paper-2); }
.contact__say { padding-top: var(--facet); font: 400 var(--text-title)/1.2 var(--font-serif); }
.faces { display: grid; gap: var(--space-md); }
.face { display: flex; align-items: center; gap: var(--space-md); font-weight: 500; }
.face img { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
@media (prefers-reduced-motion: reduce) { .field label { transition: none; } }
@media (max-width: 60rem) {
  .cta { padding-block: var(--space-3xl); }
  .form, .contact__aside { grid-column: 1 / -1; }
}

/* ---------- footer: the logo, one line, the links and how to reach us, on the page's own colour ---------- */
.foot { border-top: var(--rule-hair) solid var(--color-rule); }
.foot__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; padding-block: var(--space-3xl) var(--space-xl); }
.foot__brand { grid-column: 1 / span 5; display: grid; gap: var(--space-xl); justify-items: start; }
.foot__logo { display: block; border-radius: var(--radius-control); }
.foot__logo img { width: auto; height: clamp(2.75rem, 2rem + 2vw, 4.25rem); }
.foot__line { font: 400 var(--text-lg)/1.3 var(--font-serif); }
.foot__nav { grid-column: 8 / span 2; display: grid; justify-items: start; }
.foot__nav a { position: relative; display: inline-flex; align-items: center; min-height: 40px; color: var(--color-muted); font-size: var(--text-lg); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.foot__nav a::before { content: ""; position: absolute; inset-block: 0; left: calc(-1 * var(--space-lg)); width: 8px; height: 8px; margin-block: auto; background: var(--color-accent); transform: rotate(45deg) scale(0); transition: transform var(--dur-long) var(--ease-menu); }
.foot__nav a:is([aria-current], :hover, :focus-visible) { color: var(--color-ink); }
.foot__nav a:is([aria-current], :hover)::before { transform: rotate(45deg) scale(1); }
.foot__nav:has(a:hover) a[aria-current]:not(:hover)::before { transform: rotate(45deg) scale(0); }
.foot__nav a:active { color: var(--color-ink-2); }
.foot__contact { grid-column: 10 / -1; display: grid; gap: var(--space-sm); justify-items: start; padding-top: var(--space-xs); }
.foot__mail { display: inline-flex; align-items: center; min-height: 44px; margin-top: calc(-1 * var(--space-sm)); font-size: var(--text-lg); }
.foot__legal { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-muted); }
@media (prefers-reduced-motion: reduce) { .foot__nav a, .foot__nav a::before { transition: none; } }
@media (max-width: 60rem) {
  .foot__brand { grid-column: 1 / -1; }
  .foot__nav { grid-column: 1 / span 6; padding-left: var(--space-lg); }
  .foot__contact { grid-column: 7 / -1; }
}
@media (max-width: 40rem) { .foot__nav, .foot__contact { grid-column: 1 / -1; } }

/* a goodbye for whoever scrolls on at the very end. It lies still behind the page; the page itself is
   pushed up, its lower edge curving, and the line underneath fades in. site.js does the pushing. */
main, .foot { position: relative; z-index: var(--z-base); background: var(--page-bg, var(--color-paper)); transition: background-color var(--dur-long) var(--ease-out); }
.foot__lip { position: absolute; top: calc(100% - 1px); left: 0; width: 100%; height: 200px; fill: var(--page-bg, var(--color-paper)); transform-origin: 50% 0; transform: scaleY(0); pointer-events: none; }
.egg { position: fixed; inset: auto 0 0 0; z-index: 0; display: none; align-items: flex-end; justify-content: center; height: 60svh; padding: var(--space-2xl); background: var(--color-paper-3); color: var(--color-paper-hi); text-align: center; pointer-events: none; }
.js .egg.is-pulled { display: flex; }
.egg__text { font: var(--display-weight) var(--text-duo)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.page-dark .egg { background: var(--color-rule-on-ink); color: var(--color-ink); }
@media (prefers-reduced-motion: reduce) { main, .foot { transition: none; } }

/* ---------- the projects page: ink, and it takes the colour of the project you point at ---------- */
.page-dark { --page-bg: var(--color-ink); background: var(--page-bg); color: var(--color-on-ink); transition: background-color var(--dur-long) var(--ease-out); }
.page-dark .nav { color: var(--color-on-ink); }
.page-dark .menu { --menu-bg: var(--color-paper); --menu-fg: var(--color-ink); --menu-dim: var(--color-muted); }
.page-dark :focus-visible { outline-color: var(--color-on-ink); }
.page-dark .menu[data-open] :focus-visible, .page-dark .pcard__ask :focus-visible { outline-color: var(--color-ink); }
.page-dark .duo__a { color: var(--color-on-ink-2); }
.page-dark .foot { border-top-color: var(--color-rule-on-ink); }
.page-dark .foot__nav a, .page-dark .foot__legal { color: var(--color-on-ink-3); }
.page-dark .foot__nav a:is([aria-current], :hover, :focus-visible) { color: var(--color-on-ink); }
.page-dark .foot .pending__chip { border-color: var(--color-on-ink-2); background: transparent; color: var(--color-on-ink-2); }
.page-dark:has(.pcard--amc .pcard__link:is(:hover, :focus-visible)) { --page-bg: var(--deep-amc); }
.page-dark:has(.pcard--depaepe .pcard__link:is(:hover, :focus-visible)) { --page-bg: var(--deep-depaepe); }
.page-dark:has(.pcard--alana .pcard__link:is(:hover, :focus-visible)) { --page-bg: var(--deep-alana); }
.page-dark:has(.pcard--zonnebloem .pcard__link:is(:hover, :focus-visible)) { --page-bg: var(--deep-zonnebloem); }
.page-dark:has(.pcard--ico .pcard__link:is(:hover, :focus-visible)) { --page-bg: var(--deep-ico); }
.lijst { padding-block: calc(var(--nav-h) + var(--space-3xl)) var(--section); }
.lijst__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); align-items: end; margin-bottom: var(--space-3xl); }
.lijst__head .duo { grid-column: 1 / span 8; font-size: var(--text-hero); }
.lijst__side { grid-column: 9 / -1; padding-bottom: 0.4em; font-size: var(--text-lead); line-height: 1.4; color: var(--color-on-ink-2); }
.lijst__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.pcard__link { display: grid; gap: var(--space-md); text-decoration: none; }
.pcard__shot { overflow: hidden; aspect-ratio: 16 / 10; background: var(--color-rule-on-ink); color: var(--color-on-ink); }
.pcard__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.pcard__cap { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); }
.pcard__name { display: inline-flex; align-items: center; gap: var(--space-sm); font: var(--display-weight) var(--text-title)/1.05 var(--font-display); letter-spacing: -0.03em; }
.pcard__px { flex: none; width: 10px; height: 10px; background: currentColor; transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.pcard__link:is(:hover, :focus-visible) .pcard__px { transform: rotate(45deg); background-color: var(--color-accent); }
.pcard__kind { font-size: var(--text-sm); line-height: 1.45; color: var(--color-on-ink-2); text-align: right; }
.pcard__ask { display: grid; align-content: space-between; justify-items: start; gap: var(--space-xl); aspect-ratio: 16 / 10; padding: var(--space-xl); background: var(--color-paper); color: var(--color-ink); }
.pcard__q { padding-top: var(--facet); font-size: clamp(2rem, 1rem + 2.6vw, 3.5rem); line-height: 0.95; }
.js [data-reveal].pcard { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.js [data-reveal].pcard.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .page-dark, .pcard__px { transition: none; }
  .js [data-reveal].pcard { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 60rem) {
  .lijst { padding-top: calc(var(--nav-h) + var(--space-2xl)); }
  .lijst__head { margin-bottom: var(--space-2xl); }
  .lijst__head .duo, .lijst__side { grid-column: 1 / -1; }
  .lijst__grid { row-gap: var(--space-xl); }
  .pcard__ask { aspect-ratio: auto; }
}
@media (max-width: 40rem) {
  .lijst__grid { grid-template-columns: minmax(0, 1fr); }
  .pcard__cap { display: grid; gap: var(--space-2xs); }
  .pcard__kind { text-align: left; }
}

/* ---------- a project: its name, what it is, and the site itself in a window ---------- */
.proj { padding-block: calc(var(--nav-h) + var(--space-2xl)) var(--section); }
.proj__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: end; margin-bottom: var(--space-2xl); }
.proj__name { grid-column: 1 / -1; font-size: var(--text-hero); line-height: 0.95; }
.proj__lead { grid-column: 1 / span 6; max-width: 30em; }
.specs { grid-column: 8 / -1; margin: 0; font-size: var(--text-sm); line-height: 1.5; border-bottom: var(--rule-hair) solid var(--color-rule); }
.specs__row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--space-md); padding-block: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); }
.specs dt { color: var(--color-muted); }
.specs dd { margin: 0; text-align: right; }
.specs__colors { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--space-sm); }
.swatch { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 24px; padding: 0; border: 0; border-radius: var(--space-2xs); background: none; color: inherit; font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.swatch:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }
.swatch:active { color: var(--color-ink-2); }
.swatch__dot { flex: none; width: 10px; height: 10px; margin-inline: var(--space-3xs); background: var(--sw); box-shadow: 0 0 0 1px var(--color-rule); transform: rotate(45deg); }
@media (pointer: coarse) { .swatch { min-height: 44px; } }
.proj__next { display: block; margin-top: var(--space-3xl); font: var(--display-weight) var(--text-duo)/0.95 var(--font-display); letter-spacing: var(--tracking-display); text-decoration: none; }
.proj__next:hover .duo__b { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }
.proj__next:active .duo__b { color: var(--color-ink-2); }
@media (max-width: 60rem) {
  .proj { padding-top: calc(var(--nav-h) + var(--space-xl)); }
  .proj__lead, .specs { grid-column: 1 / -1; }
  .proj__next { margin-top: var(--space-2xl); }
}

/* the window: three lights that work, a tab per project, and the site inside */
.win { --tile: var(--color-paper-3); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-tile); background: var(--color-paper-2); overflow: clip; transition: transform var(--dur-short) var(--ease-in), opacity var(--dur-short) var(--ease-in); }
.win--amc { --tile: var(--tile-amc); } .win--depaepe { --tile: var(--tile-depaepe); } .win--alana { --tile: var(--tile-alana); } .win--zonnebloem { --tile: var(--tile-zonnebloem); } .win--ico { --tile: var(--tile-ico); }
.win.is-closing { transform: scale(0.96); opacity: 0; }
.win__bar { display: flex; align-items: center; gap: var(--space-sm); min-height: 52px; padding-inline: var(--space-xs) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-3); }
.win__lights { display: flex; flex: none; }
.win__light { position: relative; display: grid; place-items: center; width: 24px; height: 44px; padding: 0; border: 0; border-radius: var(--space-xs); background: none; color: var(--color-ink); text-decoration: none; cursor: pointer; }
.win__light::before { content: ""; width: 13px; height: 13px; border-radius: 50%; background: var(--light); box-shadow: inset 0 0 0 1px var(--color-light-edge); transition: transform var(--dur-micro) var(--ease-out); }
.win__light::after { position: absolute; font: 500 11px/1 var(--font-body); opacity: 0; transition: opacity var(--dur-micro) var(--ease-out); }
.win__light--close { --light: var(--light-close); } .win__light--close::after { content: "×"; }
.win__light--min { --light: var(--light-min); } .win__light--min::after { content: "−"; }
.win__light--max { --light: var(--light-max); } .win__light--max::after { content: "↗"; }
.win__lights:hover .win__light::after, .win__light:focus-visible::after { opacity: 0.75; }
.win__light:active::before { transform: scale(0.88); }
.win__light[aria-pressed="true"]::before { box-shadow: inset 0 0 0 1px var(--color-light-edge), 0 0 0 2px var(--color-paper-3), 0 0 0 3px var(--color-ink); }
.win__tabs { display: flex; flex: 1; min-width: 0; gap: var(--space-2xs); overflow-x: auto; scrollbar-width: none; }
.win__tabs::-webkit-scrollbar { display: none; }
.win__tab { display: inline-flex; flex: none; align-items: center; gap: var(--space-xs); min-height: 36px; padding: 0 var(--space-sm); border-radius: var(--space-xs); color: var(--color-ink-2); font: 500 var(--text-sm)/1 var(--font-body); white-space: nowrap; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.win__tab:hover { background: var(--color-paper-2); }
.win__tab:active { color: var(--color-ink); }
.win__tab[aria-current] { background: var(--color-paper-hi); color: var(--color-ink); }
.win__px { flex: none; width: 8px; height: 8px; margin-inline: var(--space-3xs); background: var(--gem); transform: rotate(45deg); }
.win__ico { flex: none; width: 16px; height: 16px; border-radius: var(--space-3xs); object-fit: contain; }
.win__tab--amc { --gem: var(--deep-amc); } .win__tab--depaepe { --gem: var(--deep-depaepe); } .win__tab--alana { --gem: var(--deep-alana); } .win__tab--zonnebloem { --gem: var(--deep-zonnebloem); } .win__tab--ico { --gem: var(--deep-ico); }
.win__all { flex: none; display: inline-flex; align-items: center; min-height: 36px; font: 500 var(--text-sm)/1 var(--font-body); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.3em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.win__all:hover { text-decoration-color: var(--color-accent); }
.win__all:active { color: var(--color-ink-2); }
.win__desk { --mini: 0.22; position: relative; height: clamp(24rem, 72svh, 46rem); overflow: hidden; background: var(--tile); }
.win__idle { position: absolute; inset: 0 auto auto 0; display: grid; gap: var(--space-md); justify-items: start; max-width: 27rem; padding: var(--space-xl); color: var(--color-ink); opacity: 0; visibility: hidden; transition: opacity var(--dur-long) var(--ease-out), visibility 0s linear var(--dur-long); }
.win[data-min] .win__idle { opacity: 1; visibility: visible; transition-delay: 120ms, 0s; }
.win__idle-title { font: var(--display-weight) var(--text-h1)/0.95 var(--font-display); letter-spacing: var(--tracking-display); }
.win__idle :focus-visible { outline-color: var(--color-ink); }
.win__view { position: absolute; inset: 0; overflow: hidden; background: var(--color-paper-hi); transform-origin: 100% 100%; transition: transform var(--dur-menu) var(--ease-menu), border-radius var(--dur-menu) var(--ease-menu), box-shadow var(--dur-menu) var(--ease-menu); }
.win[data-min] .win__view { border-radius: 44px; box-shadow: var(--shadow-shot); transform: translate(calc(-1 * var(--space-lg)), calc(-1 * var(--space-2xl))) scale(var(--mini)); }
.win__scroll { height: 100%; overflow-y: auto; }
.win__scroll:focus-visible { outline-offset: -3px; }
.win__shot { width: 100%; }
.win__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--color-paper-hi); opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.win__frame.is-in { opacity: 1; }
.win__back { position: absolute; right: var(--space-lg); bottom: var(--space-sm); display: grid; align-content: end; justify-items: start; gap: var(--space-3xs); width: calc(var(--mini) * 100%); height: calc(var(--mini) * 100% + var(--space-2xl) - var(--space-sm)); padding: 0; border: 0; border-radius: var(--space-xs); background: none; color: var(--color-ink); font: 500 var(--text-sm)/1.2 var(--font-body); text-align: left; cursor: pointer; }
.win__back:focus-visible { outline-color: var(--color-ink); }
.win__back-name, .win__back-state { white-space: nowrap; }
.win__back-state { font-weight: 400; font-size: var(--text-xs); }
.win__status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-lg); min-height: 44px; padding: var(--space-2xs) var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); }
.win__status .link { display: inline-flex; align-items: center; min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .win, .win__light::before, .win__light::after, .win__tab, .win__all, .win__idle, .win__view, .win__frame { transition: none; } }
@media (max-width: 40rem) {
  .win__all { display: none; }
  .win__desk { --mini: 0.4; height: clamp(22rem, 68svh, 34rem); }
  .win__idle { padding: var(--space-lg); }
  .win[data-min] .win__view { border-radius: 28px; transform: translate(calc(-1 * var(--space-md)), calc(-1 * var(--space-2xl))) scale(var(--mini)); }
  .win__back { right: var(--space-md); }
}

/* ---------- from page to page: the page steps back, slides off, and the next one steps forward ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition { background: var(--color-stage); }
  ::view-transition-group(root) { animation-duration: var(--dur-page); }
  ::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; animation-duration: var(--dur-page); animation-timing-function: var(--ease-in-out); animation-fill-mode: both; transform-origin: 50% 50%; }
  ::view-transition-old(root) { z-index: 1; animation-name: page-out; }
  ::view-transition-new(root) { animation-name: page-in; }
}
@keyframes page-out {
  0% { transform: none; border-radius: 0; }
  34% { transform: scale(0.8); border-radius: 24px; }
  68%, 100% { transform: translateX(-135%) rotate(-5deg) scale(0.8); border-radius: 24px; }
}
@keyframes page-in {
  0%, 30% { transform: translateY(9%) scale(0.7); border-radius: 24px; }
  66% { transform: scale(0.8); border-radius: 24px; }
  100% { transform: none; border-radius: 0; }
}