/* Mona Sans, SIL Open Font License 1.1, self-hosted from @fontsource-variable/mona-sans 5.3.0 */
@font-face {
    font-family: "Mona Sans";
    src: url("fonts/mona-sans-wdth.woff2") format("woff2");
    font-weight: 200 900;
    font-stretch: 75% 125%;
    font-style: normal;
    font-display: swap;
}

/* Samen: het zand, het donkerbruin en de illustraties van de vorige site, met de letter,
   de sporen en de opbouw zonder kaartjes van Stroom. De logo-oranje blijft het signaal. */
:root {
    --bg: #f3eee4;
    --surface: #fbf8f2;
    --ink: #2f221a;
    --ink-2: #5c4f45;
    --ink-3: #6b5e53;
    --rule: #e2d8c8;
    --trace: #cdbea8;

    --sand: #e8dfce;
    --sand-rule: #d8ccb7;

    --warm-mid: #f0dcc0;
    --warm-end: #e9c9a2;

    --deep: #241912;
    --deep-2: #2f2119;
    --deep-rule: #46342a;
    --on-deep: #f5ede3;
    --on-deep-2: #c2b1a1;

    --signal: #b45309;
    --signal-deep: #8a3c05;
    --signal-hi: #f0883e;
    --signal-tint: #f4e0c8;

    --font: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
    --radius: 12px;
    --radius-lg: 18px;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

    --max: 1320px;
    --gutter: clamp(16px, 4vw, 48px);
    --edge: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
    --nav-h: 76px;
    --space: clamp(96px, 11vw, 168px);
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 16px);
    scrollbar-color: var(--trace) var(--bg);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: clamp(1rem, 0.97rem + 0.2vw, 1.0938rem);
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    caret-color: var(--signal);
}

::selection {
    background: var(--signal);
    color: #fff8f2;
}

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

a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.24em;
}

:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
    border-radius: 4px;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-weight: 600;
    text-wrap: balance;
}

p {
    margin: 0;
}

.icon {
    width: 1.05em;
    height: 1.05em;
    flex: none;
    fill: currentColor;
}

.skip {
    position: absolute;
    left: var(--gutter);
    top: -100px;
    z-index: 50;
    padding: 10px 14px;
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--bg);
    font-weight: 600;
}

.skip:focus {
    top: 12px;
}

.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Gewichtscontrast binnen één uitspraak */
.w-strong {
    font-weight: 620;
}

.w-light {
    font-weight: 300;
}

.statement {
    max-width: 22ch;
    font-stretch: 104%;
    font-size: clamp(2.2rem, 1.35rem + 3vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.statement--md {
    max-width: 16ch;
    font-size: clamp(2rem, 1.3rem + 2.4vw, 3.5rem);
}

.section__text {
    margin-top: clamp(20px, 2.4vw, 32px);
    max-width: 54ch;
    color: var(--ink-2);
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    line-height: 1.55;
}

.section__head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 64px;
}

.section__head-row .section__text {
    max-width: 44ch;
}

/* Knoppen */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--radius);
    background: var(--signal);
    color: #fff8f2;
    font: inherit;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 160ms var(--ease-out), background-color 180ms ease, box-shadow 180ms ease;
}

.btn .icon {
    transition: transform 200ms var(--ease-out);
}

.btn:active {
    transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
    .btn:hover {
        background: var(--signal-deep);
    }

    .btn:hover .icon {
        transform: translate(2px, -2px);
    }
}

.btn--small {
    min-height: 42px;
    padding: 0 16px;
    font-size: 0.9375rem;
}

.btn--large {
    min-height: 60px;
    padding: 0 28px;
    font-size: 1.0625rem;
}

.btn--ghost {
    background: transparent;
    color: var(--ink);
    box-shadow: inset 0 0 0 1.25px var(--trace);
}

@media (hover: hover) and (pointer: fine) {
    .btn--ghost:hover {
        background: var(--surface);
        box-shadow: inset 0 0 0 1.25px var(--ink);
    }
}

.btn--light {
    background: var(--on-deep);
    color: var(--deep);
}

.btn--ink {
    background: var(--ink);
    color: var(--bg);
}

@media (hover: hover) and (pointer: fine) {
    .btn--ink:hover {
        background: #4a3628;
    }
}

@media (hover: hover) and (pointer: fine) {
    .btn--light:hover {
        background: #fff;
    }
}

.textlink {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    transition: text-decoration-color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .textlink:hover {
        text-decoration-color: currentColor;
    }
}

/* Navigatie */
.nav {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--bg);
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease;
}

.nav.is-scrolled {
    border-bottom-color: var(--rule);
}

.nav__inner {
    max-width: var(--max);
    height: var(--nav-h);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav__logo img {
    height: 40px;
    width: auto;
}

.nav__links {
    margin-left: auto;
    display: flex;
    gap: 4px;
}

.nav__links a {
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--ink-2);
    font-weight: 500;
    font-size: 0.9875rem;
    text-decoration: none;
    transition: color 160ms ease, background-color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .nav__links a:hover {
        color: var(--ink);
        background: var(--surface);
    }
}

.nav__menu {
    display: none;
    margin-left: auto;
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    box-shadow: inset 0 0 0 1.25px var(--trace);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: transform 160ms var(--ease-out);
}

.nav__menu:active {
    transform: scale(0.97);
}

/* Hero: de uitspraak links, de illustratie van de vorige site rechts */
.hero {
    padding: clamp(32px, 4vw, 64px) 0 clamp(40px, 5vw, 80px);
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
}

.hero__title {
    font-stretch: 104%;
    font-size: clamp(2.375rem, 1.2rem + 3.9vw, 4.875rem);
    line-height: 0.98;
    letter-spacing: -0.038em;
}

.hero__title span {
    display: block;
}

/* De tweede helft in oranje, zoals de kop op de vorige site */
.hero__title .w-light {
    color: var(--signal);
}

.hero__sub {
    margin-top: clamp(24px, 2.8vw, 36px);
    max-width: 44ch;
    color: var(--ink-2);
    font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
    line-height: 1.5;
}

.hero__actions {
    margin-top: clamp(28px, 3.2vw, 40px);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Secties */
.section {
    padding: var(--space) 0;
}

.section--rule {
    border-top: 1px solid var(--rule);
}

/* Van boven zand naar beneden abrikoos: het probleem en de procescheck */
.warm {
    background: linear-gradient(180deg,
            var(--bg) 0%,
            var(--bg) 14%,
            #f2e6d3 42%,
            var(--warm-mid) 62%,
            #ecd2b1 82%,
            var(--warm-end) 100%);
}

.warm .section--check {
    padding-top: 0;
}

/* Dieper zand, afgewisseld met het lichte zand */
.tone-sand {
    --bg: var(--sand);
    --rule: var(--sand-rule);
    --trace: #c2b199;
    background: var(--bg);
}

/* Achtergrondfiguren: sporen en ringen uit het logo, stil en achter de inhoud.
   Ze komen binnen vanaf de rand van de sectie. */
.has-fig {
    --fig: #dbcdb8;
    position: relative;
    isolation: isolate;
    overflow: clip;
}

.warm .has-fig {
    --fig: color-mix(in srgb, #8a4a10 20%, transparent);
}

.chapter.has-fig {
    --fig: #4a382d;
}

.tone-sand.has-fig {
    --fig: #cbbaa1;
}

.fig {
    position: absolute;
    z-index: -1;
    height: auto;
    color: var(--fig);
    pointer-events: none;
    transform: scale(var(--fig-x, 1), var(--fig-y, 1));
}

.fig--bus {
    width: 640px;
    aspect-ratio: 640 / 312;
}

.fig--taps {
    width: 560px;
    aspect-ratio: 560 / 300;
}

.fig--bundle {
    width: 400px;
    aspect-ratio: 400 / 290;
}

.fig--frame {
    width: 360px;
    aspect-ratio: 360 / 300;
}

.fig--tr {
    top: 0;
    right: 0;
}

.fig--tl {
    top: 0;
    left: 0;
}

.fig--bl {
    bottom: 0;
    left: 0;
}

.fig--fx {
    --fig-x: -1;
}

.fig--fy {
    --fig-y: -1;
}

/* Smallere schermen: minder marge naast de koppen, dus kleinere figuren aan de
   kant waar ruimte is. Op een telefoon schuiven ze omhoog, in de bovenmarge. */
@media (max-width: 1399px) {
    .fig--bus {
        width: 480px;
    }

    .fig--bundle {
        --fig-x: 1;
        width: 260px;
        left: auto;
        right: 0;
    }
}

@media (max-width: 1199px) {
    .fig--bus {
        width: 400px;
    }
}

@media (max-width: 900px) {
    .hero > .fig {
        display: none;
    }
}

@media (max-width: 700px) {
    .fig--taps {
        width: 300px;
    }

    .fig--taps.fig--fy {
        top: -28px;
    }

    .fig--bundle {
        width: 200px;
    }

    .fig--frame {
        width: 200px;
        top: -70px;
    }
}

/* Breuken: waar het nu handwerk is */
.breaks {
    list-style: none;
    margin: clamp(48px, 6vw, 88px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 64px);
}

.break {
    padding-top: 24px;
    border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

.break__mark {
    width: 88px;
    height: 20px;
    overflow: visible;
}

.break__mark path {
    fill: none;
    stroke: var(--ink-3);
    stroke-width: 1.25;
}

.break__mark circle {
    fill: none;
    stroke: var(--ink-3);
    stroke-width: 1.25;
}

.break__mark circle.is-open {
    stroke: var(--signal);
}

.break h3 {
    margin-top: 20px;
    max-width: 18ch;
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.break p {
    margin-top: 10px;
    max-width: 38ch;
    color: var(--ink-2);
}

/* Procescheck */
.check {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 80px);
    padding: clamp(28px, 4vw, 56px);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent), 0 24px 48px -28px color-mix(in srgb, #8a5a00 45%, transparent);
}

.check__intro p {
    margin-top: 18px;
    max-width: 34ch;
    color: var(--ink-2);
    font-size: 1.125rem;
}

.check__form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 16px;
    align-content: start;
}

.cfield {
    display: grid;
    gap: 8px;
}

.cfield--wide {
    grid-column: 1 / -1;
}

.cfield label,
.field label {
    font-weight: 550;
    font-size: 0.9375rem;
    color: var(--ink-2);
}

.cfield__pair {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 8px;
}

.cfield input,
.cfield select {
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: var(--bg);
    box-shadow: inset 0 0 0 1.25px var(--rule);
    color: var(--ink);
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 500;
    transition: box-shadow 160ms ease, background-color 160ms ease;
    appearance: none;
    -moz-appearance: textfield;
}

.cfield select {
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%236b5e53' d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    cursor: pointer;
}

.cfield input::-webkit-outer-spin-button,
.cfield input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cfield input::placeholder {
    color: var(--ink-3);
    font-weight: 400;
    opacity: 1;
}

.cfield input:focus,
.cfield select:focus {
    outline: none;
    background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--ink);
}

.cfield input:focus-visible,
.cfield select:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
}

.check__result {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 14px;
    margin-top: 10px;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
}

.check__hours {
    font-variant-numeric: proportional-nums lining-nums;
    font-stretch: 104%;
    font-weight: 620;
    font-size: clamp(3rem, 2rem + 4vw, 5.25rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.check__per {
    font-weight: 300;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
    letter-spacing: -0.02em;
}

.check__weeks {
    grid-column: 1 / -1;
    margin-top: 8px;
    color: var(--ink-2);
}

.check__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    margin-top: 6px;
}

.check__note {
    grid-column: 1 / -1;
    color: var(--ink-3);
    font-size: 0.875rem;
}

/* Hoofdstuk in donkerbruin: de tokens schakelen om, zodat alles erin meekleurt */
.chapter {
    --bg: var(--deep);
    --surface: var(--deep-2);
    --ink: var(--on-deep);
    --ink-2: var(--on-deep-2);
    --ink-3: var(--on-deep-2);
    --rule: var(--deep-rule);
    --trace: #6a5444;
    --signal-deep: var(--signal-hi);
    background: var(--deep);
    color: var(--on-deep);
    padding: var(--space) 0;
}

.chapter :focus-visible {
    outline-color: var(--signal-hi);
}

.chapter ::selection {
    background: var(--signal-hi);
    color: var(--deep);
}

.chapter .section__text {
    color: var(--on-deep-2);
}

/* Bouwstenen: één tegelijk */
.blocks {
    margin-top: clamp(48px, 6vw, 88px);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    border-top: 1px solid var(--deep-rule);
    border-bottom: 1px solid var(--deep-rule);
}


.blocks__bar {
    position: absolute;
    right: -1.5px;
    top: 0;
    width: 3px;
    height: 100px;
    border-radius: 2px;
    background: var(--signal-hi);
    transform-origin: 50% 0;
    transform: translateY(var(--y, 0)) scaleY(var(--s, 0));
    transition: transform 320ms var(--ease-in-out);
}










.blocks__lead {
    max-width: 30ch;
    font-stretch: 102%;
    font-weight: 400;
    font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.blocks__items {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.blocks__items li {
    position: relative;
    padding-left: 28px;
    color: var(--on-deep);
}

.blocks__items li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 14px;
    height: 1.25px;
    background: var(--signal-hi);
}

.blocks__when {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--deep-rule);
    color: var(--on-deep-2);
}

.blocks__when span {
    color: var(--on-deep);
    font-weight: 600;
}

.blocks__case {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: var(--signal-hi);
    font-weight: 600;
    text-decoration: none;
}

.blocks__case .icon {
    transition: transform 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .blocks__case:hover .icon {
        transform: translateX(3px);
    }
}

.principles {
    list-style: none;
    margin: clamp(56px, 7vw, 96px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 64px);
}

.principles li {
    padding-top: 22px;
    border-top: 1px solid var(--deep-rule);
}

.principles h3 {
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    letter-spacing: -0.015em;
}

.principles p {
    margin-top: 8px;
    color: var(--on-deep-2);
}

/* Cases: één vaste rij per case, zodat er later cases bij kunnen zonder dat de sectie verandert */
.case-list {
    list-style: none;
    margin: clamp(40px, 5vw, 64px) 0 0;
    padding: 0;
    border-bottom: 1px solid var(--rule);
}

.case-row {
    position: relative;
    display: grid;
    grid-template-columns: clamp(140px, 13vw, 184px) minmax(0, 1.1fr) minmax(0, 1fr) 44px;
    grid-template-areas: "media main text go";
    align-items: center;
    gap: 16px clamp(20px, 3vw, 48px);
    padding: clamp(18px, 2vw, 24px) 0;
    border-top: 1px solid var(--rule);
}

.case-row__media {
    grid-area: media;
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--rule);
}

.case-row__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms var(--ease-out);
}

.case-row__media .media__name {
    padding: 0 12px;
    font-size: clamp(1rem, 0.9rem + 0.45vw, 1.375rem);
}

.case-row__main {
    grid-area: main;
}

.case-row__client {
    color: var(--ink-3);
    font-weight: 500;
    font-size: 0.9375rem;
}

.case-row h3 {
    margin-top: 4px;
    font-stretch: 104%;
    font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    transition: color 200ms ease;
}

.case-row .facts {
    margin-top: 12px;
}

.case-row__link {
    text-decoration: none;
}

/* De hele rij is klikbaar. De laag ligt boven alles in de rij, ook boven het pijltje
   dat bij hover verschuift en anders de klik zou opvangen. */
.case-row__link::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
}

.case-row__link:focus-visible {
    outline: none;
}

.case-row:focus-within {
    outline: 2px solid var(--signal);
    outline-offset: 4px;
    border-radius: var(--radius);
}

.case-row__text {
    grid-area: text;
    max-width: 46ch;
    color: var(--ink-2);
}

.case-row__go {
    grid-area: go;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1.25px var(--trace);
    color: var(--ink);
    transition: background-color 200ms ease, box-shadow 200ms ease, color 200ms ease, transform 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .case-row:hover h3 {
        color: var(--signal-deep);
    }

    .case-row:hover .case-row__go {
        background: var(--signal);
        box-shadow: none;
        color: #fff8f2;
        transform: translateX(3px);
    }

    .case-row:hover .case-row__media img,
    .case-row:hover .media__name {
        transform: scale(1.04);
    }
}

@media (max-width: 1080px) {
    .case-row {
        grid-template-columns: 140px minmax(0, 1fr) 44px;
        grid-template-areas:
            "media main go"
            "media text go";
        align-items: start;
    }

    .case-row__go {
        align-self: center;
    }
}

/* Op een telefoon: klein beeld naast klant en titel, kenmerken en tekst eronder over de volle breedte */
@media (max-width: 640px) {
    .case-row {
        grid-template-columns: 80px minmax(0, 1fr);
        grid-template-areas:
            "media client"
            "media title"
            "facts facts"
            "text text";
        gap: 0 16px;
    }

    .case-row__main {
        display: contents;
    }

    .case-row__client {
        grid-area: client;
        align-self: end;
    }

    .case-row h3 {
        grid-area: title;
        align-self: start;
    }

    .case-row .facts {
        grid-area: facts;
        margin-top: 14px;
    }

    .case-row__text {
        margin-top: 10px;
    }

    .case-row__media {
        aspect-ratio: 1;
    }

    .case-row__media .media__name {
        padding: 0 4px;
        font-size: 0.75rem;
    }

    .case-row__go {
        display: none;
    }
}

.facts {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.facts li {
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--signal-tint);
    color: var(--signal-deep);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.2;
}


.quote {
    margin: clamp(64px, 8vw, 112px) 0 0;
    padding-top: clamp(28px, 3.5vw, 44px);
    border-top: 1px solid var(--rule);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px 64px;
    align-items: end;
}

.quote blockquote {
    margin: 0;
}

.quote blockquote p {
    max-width: 40ch;
    font-stretch: 102%;
    font-weight: 400;
    font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.quote figcaption {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--ink-3);
    font-size: 0.9375rem;
}

.quote figcaption img {
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    object-fit: cover;
}

.quote figcaption strong {
    display: block;
    color: var(--ink);
    font-weight: 600;
}

/* Werkwijze: één route */
.route {
    position: relative;
    list-style: none;
    margin: clamp(48px, 6vw, 88px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    --route-gap: clamp(24px, 3vw, 48px);
    gap: var(--route-gap);
    isolation: isolate;
}







.route h3 {
    margin-top: 28px;
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    letter-spacing: -0.015em;
}

.route p {
    margin-top: 10px;
    color: var(--ink-2);
}

.route .route__out {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    color: var(--ink);
    font-weight: 550;
    font-size: 0.9375rem;
}

/* Team: portretten die doorschuiven */
.slider__btn {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    box-shadow: inset 0 0 0 1.25px var(--trace);
    color: var(--ink);
    cursor: pointer;
    transition: transform 160ms var(--ease-out), box-shadow 180ms ease, opacity 180ms ease;
}

.slider__btn .icon {
    width: 20px;
    height: 20px;
}

.slider__btn:active {
    transform: scale(0.95);
}

@media (hover: hover) and (pointer: fine) {
    .slider__btn:hover {
        box-shadow: inset 0 0 0 1.25px var(--ink);
    }
}

.slider__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.slider {
    margin-top: clamp(40px, 5vw, 64px);
}

.slider__track {
    list-style: none;
    margin: 0;
    padding: 4px var(--edge) 8px;
    display: flex;
    gap: clamp(14px, 1.6vw, 20px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--edge);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.slider__track::-webkit-scrollbar {
    display: none;
}

.slider__track:focus-visible {
    outline-offset: -2px;
}






/* Contact */
.chapter--end {
    padding-bottom: clamp(72px, 8vw, 112px);
}

.contact {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}

.contact__intro .btn {
    margin-top: clamp(28px, 3.4vw, 40px);
}

.contact__mail {
    margin-top: 18px;
    color: var(--ink-3);
}

.contact__mail a {
    color: var(--ink);
}

.contact__form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 16px;
    padding: clamp(24px, 3vw, 40px);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent), 0 24px 48px -28px color-mix(in srgb, #6b3a10 40%, transparent);
}

.field {
    display: grid;
    gap: 8px;
}

.field--wide {
    grid-column: 1 / -1;
}

.chapter .field label {
    color: var(--on-deep-2);
}

.field input,
.field textarea {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 0;
    border-radius: 10px;
    background: var(--bg);
    box-shadow: inset 0 0 0 1.25px var(--rule);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    transition: box-shadow 160ms ease;
}

.field textarea {
    min-height: 8em;
    resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--ink-3);
    opacity: 1;
}

.field input:focus,
.field textarea:focus {
    outline: none;
    background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--ink);
}

.field input:focus-visible,
.field textarea:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
}

.field.is-invalid input,
.field.is-invalid textarea {
    box-shadow: inset 0 0 0 1.5px var(--signal-deep);
}

.field__error {
    color: var(--signal-deep);
    font-weight: 600;
    font-size: 0.9375rem;
}

.honey {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.contact__submit {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: 6px;
}

.form-status {
    font-weight: 600;
}

.form-status.is-error {
    color: var(--signal-deep);
}

/* Footer */
.footer {
    padding: 40px 0 44px;
    background: var(--deep);
    color: var(--on-deep-2);
}

.footer__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 20px 40px;
    padding-top: 32px;
    border-top: 1px solid var(--deep-rule);
}

.footer__logo {
    height: 34px;
    width: auto;
}

.footer__nav {
    justify-self: end;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    font-weight: 500;
    font-size: 0.9375rem;
}

.footer__nav a {
    color: var(--on-deep);
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .footer__nav a:hover {
        text-decoration: underline;
    }
}

.footer__legal {
    grid-column: 1 / -1;
    font-size: 0.875rem;
}

/* Casepagina */
.case-hero {
    padding: clamp(40px, 5vw, 72px) 0 0;
}

.case-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-2);
    font-weight: 500;
    font-size: 0.9375rem;
    text-decoration: none;
}

.case-hero__back .icon {
    transition: transform 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .case-hero__back:hover {
        color: var(--ink);
    }

    .case-hero__back:hover .icon {
        transform: translateX(-3px);
    }
}

.case-hero__client {
    margin-top: clamp(28px, 4vw, 48px);
    color: var(--ink-3);
    font-weight: 500;
}

.case-hero h1 {
    margin-top: 10px;
    overflow-wrap: break-word;
    max-width: 18ch;
    font-stretch: 104%;
    font-size: clamp(2.5rem, 1.3rem + 4vw, 4.75rem);
    line-height: 1;
    letter-spacing: -0.035em;
}

.case-hero__lede {
    margin-top: clamp(20px, 2.4vw, 28px);
    max-width: 52ch;
    color: var(--ink-2);
    font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
    line-height: 1.5;
}





.case-body {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
}

.case-meta {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
    display: grid;
    gap: 18px;
    margin: 0;
}

.case-meta div {
    padding-top: 14px;
    border-top: 1px solid var(--rule);
}

.case-meta dt {
    color: var(--ink-3);
    font-size: 0.875rem;
    font-weight: 500;
}

.case-meta dd {
    margin: 4px 0 0;
    font-weight: 600;
}

.case-story h2 {
    margin-top: clamp(40px, 5vw, 64px);
    font-stretch: 104%;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.case-story h2:first-child {
    margin-top: 0;
}

.case-story p {
    margin-top: 14px;
    max-width: 64ch;
    color: var(--ink-2);
    font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
    line-height: 1.65;
}

.case-story .quote {
    margin-top: clamp(48px, 6vw, 80px);
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

.case-story .quote blockquote p {
    max-width: 46ch;
    margin-top: 0;
    color: var(--ink);
    font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
}

.case-next {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 40px;
    padding: clamp(28px, 3.5vw, 44px) 0;
    border-top: 1px solid var(--rule);
    text-decoration: none;
}

.case-next span {
    color: var(--ink-3);
    font-weight: 500;
}

.case-next strong {
    display: flex;
    align-items: center;
    gap: 12px;
    font-stretch: 104%;
    font-weight: 600;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
    letter-spacing: -0.02em;
}

.case-next .icon {
    transition: transform 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .case-next:hover .icon {
        transform: translateX(4px);
    }
}

.chapter--cta .contact__intro {
    max-width: 640px;
}

/* Binnenkomst: één keer, van een zichtbare basis */
@media (prefers-reduced-motion: no-preference) {
    .js .hero__title span,
    .js .hero__sub,
    .js .hero__actions,
    .js .art--hero,
    .js .case-hero > .wrap > * {
        animation: rise 760ms var(--ease-out) both;
    }

    .js .hero__title .w-light {
        animation-delay: 90ms;
    }

    .js .hero__sub,
    .js .art--hero {
        animation-delay: 160ms;
    }

    .js .hero__actions {
        animation-delay: 220ms;
    }

}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

/* Responsief */
@media (max-width: 1080px) {
    .check {
        grid-template-columns: minmax(0, 1fr);
    }

    .route {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 56px;
    }

    .contact {
        grid-template-columns: minmax(0, 1fr);
    }

    .case-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .case-meta {
        position: static;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

@media (max-width: 880px) {
    :root {
        --nav-h: 64px;
    }

    .nav__logo img {
        height: 34px;
    }

    .nav__links {
        display: none;
        position: absolute;
        top: var(--nav-h);
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        padding: 8px var(--gutter) 18px;
        background: var(--bg);
        border-bottom: 1px solid var(--rule);
    }

    .nav__links.is-open {
        display: flex;
    }

    .nav__links a {
        padding: 14px 0;
        border-radius: 0;
        border-bottom: 1px solid var(--rule);
        font-size: 1.125rem;
        color: var(--ink);
    }

    .nav__cta {
        display: none;
    }

    .nav__menu {
        display: inline-block;
    }

    .breaks {
        grid-template-columns: minmax(0, 1fr);
    }

    .blocks {
        grid-template-columns: minmax(0, 1fr);
    }

    .principles {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .principles li {
        padding: 18px 0;
    }

    .quote {
        grid-template-columns: minmax(0, 1fr);
    }

    .section__head-row {
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .check__form {
        grid-template-columns: minmax(0, 1fr);
    }

    .route {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact__form {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer__nav {
        justify-self: start;
    }

    .hero__actions .btn {
        flex: 1 1 auto;
    }
}

/* ---------- Ronde drie ---------- */

/* Bouwstenen: duidelijk klikbaar, tekst schuift verticaal, vaste hoogte */
.blocks__side {
    display: flex;
    flex-direction: column;
    padding: 28px 0;
    border-right: 1px solid var(--deep-rule);
}

.blocks__hint {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--on-deep-2);
    font-size: 0.9375rem;
}

.blocks__hint::before {
    content: "";
    width: 18px;
    height: 1.25px;
    background: var(--on-deep-2);
}

.blocks__list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 28px;
}

.blocks__tab {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: clamp(14px, 1.6vw, 20px) 18px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--deep-rule);
    color: var(--on-deep-2);
    font: inherit;
    font-stretch: 104%;
    font-weight: 500;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-align: left;
    cursor: pointer;
    transition: color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, transform 160ms var(--ease-out);
}

.blocks__tab:active {
    transform: scale(0.985);
}

.blocks__tab[aria-selected="true"] {
    color: var(--on-deep);
    background: var(--deep-2);
    box-shadow: inset 0 0 0 1.25px color-mix(in srgb, var(--signal-hi) 70%, var(--deep-rule));
}

@media (hover: hover) and (pointer: fine) {
    .blocks__tab:hover {
        color: var(--on-deep);
        background: var(--deep-2);
    }

    .blocks__tab:hover .blocks__go {
        transform: translateX(3px);
        opacity: 1;
    }
}

.blocks__name {
    flex: 1;
}

.blocks__ring {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px currentColor;
    transition: background-color 200ms ease, box-shadow 200ms ease;
}

.blocks__tab[aria-selected="true"] .blocks__ring {
    background: var(--signal-hi);
    box-shadow: inset 0 0 0 1.5px var(--signal-hi);
}

.blocks__go {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px var(--deep-rule);
    opacity: 0.7;
    transition: transform 200ms var(--ease-out), opacity 200ms ease, background-color 200ms ease, color 200ms ease;
}

.blocks__go .icon {
    width: 16px;
    height: 16px;
}

.blocks__tab[aria-selected="true"] .blocks__go {
    background: var(--signal-hi);
    box-shadow: none;
    color: var(--deep);
    opacity: 1;
}

.blocks__bar {
    display: none;
}

.blocks__viewport {
    position: relative;
    display: grid;
    overflow: hidden;
}

.blocks__panel {
    grid-area: 1 / 1;
    padding: clamp(32px, 4vw, 52px) 0 clamp(32px, 4vw, 52px) clamp(28px, 4.5vw, 72px);
    transition: transform 620ms var(--ease-in-out), opacity 420ms ease;
}

.blocks__panel.is-above {
    transform: translateY(-100%);
    opacity: 0;
}

.blocks__panel.is-below {
    transform: translateY(100%);
    opacity: 0;
}

.blocks__panel.is-active {
    transform: translateY(0);
    opacity: 1;
}

.blocks__panel:focus-visible {
    outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
    .blocks__panel {
        transition: opacity 200ms ease;
    }

    .blocks__panel.is-above,
    .blocks__panel.is-below {
        transform: none;
    }
}

/* Mediavlak op de casepagina, met plek voor een foto */
.case-media {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #ece3d3;
}

.case-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Een foto met de mensen bovenin: in het brede vak (21:9) valt anders hun hoofd eraf. */
.case-media--top img {
    object-position: 50% 0;
}

.media__name {
    padding: 0 24px;
    color: #cdbca3;
    font-stretch: 110%;
    font-weight: 300;
    font-size: clamp(1.75rem, 1.2rem + 2vw, 3.25rem);
    letter-spacing: -0.03em;
    text-align: center;
    transition: transform 400ms var(--ease-out);
}

.media__label {
    position: absolute;
    left: 14px;
    bottom: 12px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-3);
    font-size: 0.75rem;
    font-weight: 600;
}

.case-media {
    margin-top: clamp(36px, 4.5vw, 56px);
    aspect-ratio: 21 / 9;
    border-radius: var(--radius-lg);
}

/* Werkwijze: het oranje bolletje loopt mee. De lijnen liggen onder de bolletjes en
   lopen van het midden van het eerste tot het midden van het laatste, zodat ze op de
   ringen aansluiten in plaats van erdoorheen te lopen. */
.route__track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 15px;
    pointer-events: none;
}

.route__track::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 7.5px;
    width: calc(75% + 0.75 * var(--route-gap));
    top: 7px;
    height: 1.25px;
    background: var(--trace);
}

.route__fill {
    position: absolute;
    z-index: 0;
    left: 7.5px;
    top: 6.5px;
    width: var(--line, 0);
    height: 2.5px;
    border-radius: 2px;
    background: var(--signal);
    transform-origin: 0 50%;
    transform: scaleX(0);
}

.route__dot {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--signal) 18%, transparent);
    opacity: 0;
}

.route__node {
    position: relative;
    z-index: 1;
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--bg);
    box-shadow: inset 0 0 0 1.5px var(--ink);
    transition: box-shadow 240ms ease;
}

.route__step.is-done .route__node {
    background: var(--signal);
    box-shadow: inset 0 0 0 1.5px var(--signal);
}

.route__step h3 {
    transition: color 240ms ease;
}

.route__step.is-active h3 {
    color: var(--signal-deep);
}

/* Team: één kaart per persoon */











@media (max-width: 1080px) {
    .route__track {
        display: none;
    }
}

@media (max-width: 880px) {
    .blocks__side {
        padding: 22px 0 0;
        border-right: 0;
    }

    .blocks__list {
        padding-right: 0;
    }

    .blocks__tab {
        font-size: 1.25rem;
    }

    .blocks__panel {
        padding: 28px 0 32px;
    }

    .case-media {
        aspect-ratio: 4 / 3;
    }
}




/* Team: oprichtersfoto naast de introductie, kaarten eronder */
.team-intro {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}

.team-intro__photo {
    margin: 0;
}

.team-intro__photo img {
    width: 100%;
    aspect-ratio: 1024 / 760;
    border-radius: var(--radius-lg);
    object-fit: cover;
}

.team-intro__photo figcaption {
    margin-top: 10px;
    color: var(--ink-3);
    font-size: 0.875rem;
}

@media (max-width: 880px) {
    .team-intro {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Team: een band portretten die rustig en eindeloos naar links blijft schuiven */
.section--team .slider {
    max-width: var(--max);
    margin: 16px auto 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.section--team .slider__track {
    gap: 0;
    padding: 8px 0 12px;
    scroll-padding-inline: 0;
}

.person {
    flex: 0 0 clamp(220px, 25vw, 360px);
    margin-right: clamp(16px, 2vw, 28px);
    scroll-snap-align: center;
}

.person img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    object-fit: cover;
    background: var(--rule);
    -webkit-user-drag: none;
    user-select: none;
}

.person p {
    margin-top: 14px;
    color: var(--ink-3);
    font-size: 0.9375rem;
}

.person strong {
    display: block;
    color: var(--ink);
    font-weight: 600;
    font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
    letter-spacing: -0.015em;
}

/* Met JavaScript wordt de rij een doorlopende band; slepen of vegen spoelt mee */
.slider.is-moving {
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}

.slider.is-moving.is-dragging {
    cursor: grabbing;
}

.slider.is-moving .slider__track {
    overflow: visible;
    scroll-snap-type: none;
    will-change: transform;
}

/* Boven de band: een klein label en de pauzeknop */
.team-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: clamp(56px, 7vw, 96px);
}

.team-head__label {
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.team-head .slider__btn {
    width: 40px;
    height: 40px;
}

.team-head .slider__btn .icon {
    width: 16px;
    height: 16px;
}

.slider__btn .icon--play,
.slider__btn.is-paused .icon--pause {
    display: none;
}

.slider__btn.is-paused .icon--play {
    display: block;
}

@media (max-width: 640px) {
    .section--team .slider {
        max-width: none;
    }

    .person {
        flex-basis: 62%;
    }
}

/* ---------- Samen: de wereld van de vorige site ---------- */

/* Golven tussen de lichte en de donkere hoofdstukken, zoals op de vorige site */
.wave {
    height: clamp(44px, 6.5vw, 104px);
    margin-bottom: -1px;
    background: var(--wave-top);
}

.wave svg {
    display: block;
    width: 100%;
    height: 100%;
}

.wave path {
    fill: var(--wave-bottom);
}

.wave--warm-deep {
    --wave-top: var(--warm-end);
    --wave-bottom: var(--deep);
}

.wave--deep-sand {
    --wave-top: var(--deep);
    --wave-bottom: var(--sand);
}

.wave--bg-deep {
    --wave-top: var(--bg);
    --wave-bottom: var(--deep);
}

.wave--deep-bg {
    --wave-top: var(--deep);
    --wave-bottom: var(--bg);
}

/* De golf neemt een deel van de witruimte over */
.wave + .section,
.wave + .chapter {
    padding-top: calc(var(--space) * 0.7);
}

.section:has(+ .wave),
.chapter:has(+ .wave),
.warm:has(+ .wave) > .section:last-child {
    padding-bottom: calc(var(--space) * 0.7);
}

/* Illustraties: eerst het stilstaande beeld, daarna de animatie eroverheen */
.art {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    width: 100%;
}

.art > * {
    grid-area: 1 / 1;
}

.art__still {
    width: 100%;
    height: auto;
    transition: opacity 500ms ease;
}

.art__motion {
    width: 100%;
    aspect-ratio: var(--art-ratio, 1);
}

.art__motion svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.art.is-ready .art__still {
    opacity: 0;
}

.art--hero {
    --art-ratio: 820 / 760;
    margin-right: calc(var(--gutter) * -0.5);
}

.art--werk {
    --art-ratio: 1;
    max-width: 460px;
    justify-self: end;
}

.art--contact {
    --art-ratio: 1;
    max-width: 440px;
    margin-top: clamp(16px, 2vw, 28px);
}

/* Werkwijze: kop links, illustratie rechts */
.split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
}

.section--contact {
    padding-bottom: clamp(56px, 6vw, 96px);
}

@media (max-width: 900px) {
    .hero__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .art--hero {
        max-width: 480px;
        margin: 8px auto 0;
    }

    .split {
        grid-template-columns: minmax(0, 1fr);
    }

    .art--werk {
        max-width: 400px;
        justify-self: center;
    }
}

@media (max-width: 640px) {
    .art--hero {
        max-width: 300px;
    }

    .art--contact {
        max-width: 320px;
        margin-inline: auto;
    }
}

/* Na de laatste golf loopt het donker door in de footer, zonder lijn ertussen */
main:has(> .wave--foot:last-child) + .footer {
    padding-top: 8px;
}

main:has(> .wave--foot:last-child) + .footer .footer__inner {
    padding-top: 0;
    border-top: 0;
}

.case-list + .quote {
    margin-top: clamp(48px, 6vw, 80px);
}

.case-row__media .media__name {
    color: #bba98f;
}