/*
 * The public company site, "Contour": black and white, with the logo's mountains and its
 * cyan-to-blue gradient as the only colour. Tokens, then the page from top to bottom, then motion.
 */

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100% 125%;
    font-display: swap;
    src: url("fonts/archivo-latin.woff2") format("woff2");
}

/* Keeps the text in place while the font loads. */
@font-face {
    font-family: "Archivo Fallback";
    src: local("Arial");
    size-adjust: 104%;
}

/* The light set is the base for the tokens; the dark set below applies unless the visitor chose light. */
:root {
    color-scheme: light;

    --bg: #f4f5f6;
    --surface: #ffffff;
    --surface-2: #e7eaed;
    --text: #0b0f13;
    --text-soft: #4a545e;
    --rule: rgb(11 15 19 / 13%);
    --accent-1: #0592c2;
    --accent-2: #1742fd;
    --logo-from: #00a3d9;
    --logo-mid: #0a86f5;
    --logo-to: #1742fd;
    --action-bg: #0b0f13;
    --action-text: #f4f5f6;
    --action-hover-bg: #1742fd;
    --action-hover-text: #ffffff;
    --band-bg: #0b0f13;
    --band-text: #eef1f3;
    --band-soft: #9ba6b0;
    --band-rule: rgb(238 241 243 / 16%);
    --band-edge: transparent;
    /* The band is dark in both themes, so its accents are always the dark ones. */
    --band-accent-1: #1fd6f2;
    --band-accent-2: #4a72ff;
    /* The stage behind Wat we doen: dark in both themes for its illustration; in light a hairline parts it from the band. */
    --stage-bg: var(--band-bg);
    --stage-edge: var(--band-rule);
    --line-strength: 0.85;
    --signal: #1742fd;
    --sun: 1;
    --moon: 0;

    --gradient: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    --font: "Archivo", "Archivo Fallback", Arial, sans-serif;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --fast: 180ms;
    --medium: 420ms;
    --slow: 900ms;

    /* One display size, clearly smaller headings, comfortable text, compact metadata. */
    --step--2: 0.8125rem;
    --step--1: 0.875rem;
    --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
    --step-1: clamp(1.125rem, 1.04rem + 0.36vw, 1.3125rem);
    --step-2: clamp(1.375rem, 1.13rem + 1vw, 1.875rem);
    --step-3: clamp(1.75rem, 1.32rem + 1.7vw, 2.75rem);
    /* Bounded by the viewport height too, so on a laptop the whole hero, line work included, fits the first screen. */
    --step-hero: clamp(2.25rem, min(1.1rem + 3.3vw, 0.75rem + 7vh), 4.25rem);

    --gutter: clamp(1.25rem, 4vw, 3.5rem);
    --gap: clamp(1.25rem, 2.4vw, 2.25rem);
    --section-space: clamp(4rem, 2.5rem + 5vw, 7.5rem);
    --max-width: 80rem;

    /* One sticky system: the header has a fixed height, everything sticky or anchored sits below it. */
    --site-header-height: 3.75rem;
    --sticky-gap: 1.5rem;
    --sticky-top: calc(var(--site-header-height) + var(--sticky-gap));
}

@media (min-width: 40rem) {
    :root {
        --site-header-height: 4.5rem;
    }
}

/* Dark is the default theme, whatever the system prefers (founderkeuze 2026-10-29). */
:root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #080b0f;
    --surface: #0e1318;
    --surface-2: #161d24;
    --text: #eef1f3;
    --text-soft: #97a2ac;
    --rule: rgb(238 241 243 / 12%);
    --accent-1: #1fd6f2;
    --accent-2: #4a72ff;
    --logo-from: #00f5ff;
    --logo-mid: #00a0fd;
    --logo-to: #1742fd;
    --action-bg: #eef1f3;
    --action-text: #080b0f;
    --action-hover-bg: #4a72ff;
    --action-hover-text: #080b0f;
    --band-bg: #0e1318;
    --band-text: #eef1f3;
    --band-soft: #97a2ac;
    --band-rule: rgb(238 241 243 / 12%);
    --band-edge: rgb(238 241 243 / 9%);
    --stage-bg: var(--bg);
    --stage-edge: transparent;
    --line-strength: 1;
    --signal: #c9fbff;
    --sun: 0;
    --moon: 1;
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--site-header-height) + 1rem);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: 1.6;
    font-kerning: normal;
    /* The line work runs to the viewport edges; it may never cause a sideways scroll. */
    overflow-x: clip;
}

h1,
h2,
h3,
p,
ul,
dl,
dd {
    margin: 0;
}

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

a {
    color: inherit;
}

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

.skip {
    position: absolute;
    z-index: 20;
    top: 0.75rem;
    left: var(--gutter);
    padding: 0.5rem 0.75rem;
    background: var(--text);
    color: var(--bg);
    transform: translateY(-200%);
}

.skip:focus-visible {
    transform: none;
}

/* A link whose underline is redrawn in the logo gradient on hover and focus. */
.line-link {
    padding-bottom: 0.15em;
    background-image: var(--gradient), linear-gradient(color-mix(in srgb, currentColor 30%, transparent), color-mix(in srgb, currentColor 30%, transparent));
    background-position:
        0 100%,
        0 100%;
    background-repeat: no-repeat;
    background-size:
        0% 2px,
        100% 1px;
    text-decoration: none;
    transition: background-size var(--medium) var(--ease-out);
}

.line-link:hover,
.line-link:focus-visible {
    background-size:
        100% 2px,
        100% 1px;
}

/* Shared measure. */

.masthead,
.hero,
.statement,
.principles__inner,
.team,
.closing,
.legal,
.colophon {
    width: 100%;
    max-width: calc(var(--max-width) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Section heading: the real h2, small and wide, opened by a short line in the logo gradient. */
.section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--step-1);
    font-weight: 600;
    font-stretch: 110%;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* A small label above a heading, opened by the same gradient line as the section titles (drawn by motion.js, --draw). */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: var(--text-soft);
    font-size: var(--step--2);
    font-weight: 600;
    font-stretch: 112%;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
}

.section-title::before,
.eyebrow::before {
    content: "";
    flex: none;
    width: 2rem;
    height: 2px;
    background: var(--gradient);
    transform: scaleX(var(--draw, 1));
    transform-origin: left;
}

/* Watched by site.js: once it leaves the viewport, the header shows its surface. */
.scroll-sentinel {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1.5rem;
    pointer-events: none;
}

/* Masthead */

/* Sticky at one fixed height, so changing state never moves the page; only its surface appears once the page scrolls. */
.masthead {
    position: sticky;
    z-index: 10;
    top: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2rem;
    height: var(--site-header-height);
}

.masthead::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 calc(50% - 50vw);
    border-bottom: 1px solid var(--rule);
    /* Opaque enough that, in light, the dark bands below do not turn it grey. */
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    opacity: 0;
    transition: opacity var(--medium) var(--ease-out);
}

.masthead.is-scrolled::before {
    opacity: 1;
}

.masthead__home,
.colophon__home {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.masthead__home {
    min-height: 2.25rem;
}

/*
 * The mark beside the word mark, sized in em from one font size so header and footer share every proportion; the mark
 * is drawn a touch lower than centre, so both sit on one optical line. The word mark's second half in the brand colour.
 */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-size: 1.0625rem;
}

.logo .mark {
    width: auto;
    height: 1.5em;
    margin-top: -0.12em;
}

.wordmark {
    font-weight: 650;
    font-stretch: 125%;
    letter-spacing: 0.01em;
    line-height: 1;
}

.wordmark__accent {
    background: linear-gradient(90deg, var(--logo-mid), var(--logo-from));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* The logo's mark, mitred like the logo. */
.mark {
    display: block;
    overflow: visible;
}

.mark path {
    stroke-linejoin: miter;
    stroke-miterlimit: 10;
    stroke-width: 48;
}

.mark .mark__head {
    stroke: none;
}

.mark__from {
    stop-color: var(--logo-from);
}

.mark__mid {
    stop-color: var(--logo-mid);
}

.mark__to {
    stop-color: var(--logo-to);
}

/* On a phone the header keeps only brand, language and theme; the hero and footer carry the links. */
.masthead__nav {
    display: none;
    gap: 2rem;
    font-size: var(--step--1);
}

.masthead__tools {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.languages {
    display: flex;
    gap: 0.25rem;
    font-size: var(--step--2);
    font-stretch: 112%;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.languages a {
    position: relative;
    padding: 0.4rem 0.45rem;
    color: var(--text-soft);
    text-decoration: none;
    transition: color var(--fast) ease;
}

.languages a::after {
    content: "";
    position: absolute;
    right: 0.45rem;
    bottom: 0.1rem;
    left: 0.45rem;
    height: 2px;
    background: var(--gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--medium) var(--ease-out);
}

.languages a:hover,
.languages a:focus-visible,
.languages a[aria-current] {
    color: var(--text);
}

.languages a:hover::after,
.languages a:focus-visible::after,
.languages a[aria-current]::after {
    transform: scaleX(1);
}

.theme-toggle {
    display: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition:
        border-color var(--fast) ease,
        background-color var(--fast) ease;
}

.js .theme-toggle {
    display: grid;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    border-color: var(--accent-2);
    background: var(--surface);
}

.theme-toggle__icon {
    width: 1.0625rem;
    height: 1.0625rem;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--medium) var(--ease-out);
}

.theme-toggle:hover .theme-toggle__icon {
    transform: rotate(-20deg);
}

.theme-toggle__sun,
.theme-toggle__rays,
.theme-toggle__moon {
    transform-origin: 12px 12px;
    transition:
        opacity var(--medium) var(--ease-out),
        transform var(--medium) var(--ease-out);
}

.theme-toggle__sun,
.theme-toggle__rays {
    opacity: var(--sun);
    transform: rotate(calc((1 - var(--sun)) * -90deg)) scale(calc(0.6 + var(--sun) * 0.4));
}

.theme-toggle__moon {
    opacity: var(--moon);
    transform: rotate(calc((1 - var(--moon)) * 90deg)) scale(calc(0.6 + var(--moon) * 0.4));
}

/* Hero: the one display moment, over the ridge lines. */

.hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: clamp(1.25rem, 3vh, 1.75rem) var(--gap);
    padding-block: clamp(2rem, 1rem + 3vw, 4rem) clamp(6.5rem, 4rem + 7vw, 8rem);
}

.hero__art {
    position: absolute;
    z-index: -1;
    right: calc(50% - 50vw);
    bottom: 0;
    left: calc(50% - 50vw);
    /* The drawing scales with the width (slice), so above the clamp the box grows with it too and never cuts the summit. */
    height: max(clamp(10rem, 4.5rem + 17vw, 22rem), 22vw);
    pointer-events: none;
}

.contours {
    display: block;
    width: 100%;
    height: 100%;
}

/* Three depths: the ridge itself with two near echoes, a middle band, and far lines. */
.contours__line {
    fill: none;
    stroke-width: 1.3;
    stroke-linejoin: miter;
}

.contours__depth--near .contours__line {
    opacity: calc(var(--line-strength) * 0.55);
}

.contours__depth--near .contours__line:first-child {
    stroke-width: 2;
    opacity: var(--line-strength);
}

.contours__depth--mid .contours__line {
    opacity: calc(var(--line-strength) * 0.32);
}

.contours__depth--far .contours__line {
    opacity: calc(var(--line-strength) * 0.2);
}

/* A short bright stretch that motion.js sends along the ridge, with a soft halo under it instead of a costly filter. */
.contours__signal,
.contours__halo {
    fill: none;
    stroke-linecap: round;
}

.contours__signal {
    stroke: var(--signal);
    stroke-width: 2.2;
}

.contours__halo {
    stroke: var(--accent-1);
    stroke-width: 9;
    opacity: 0.14;
}

.contours__from {
    stop-color: var(--accent-1);
}

.contours__to {
    stop-color: var(--accent-2);
}

.hero__title {
    max-width: 14.5em;
    font-size: var(--step-hero);
    font-weight: 600;
    font-stretch: 114%;
    line-height: 1.02;
    letter-spacing: -0.032em;
    text-wrap: balance;
}

.hero__line {
    display: block;
}

.hero__foot {
    display: grid;
    gap: clamp(1.25rem, 2.6vh, 1.75rem);
    max-width: 40rem;
}

.hero__lead {
    color: var(--text-soft);
    font-size: var(--step-1);
    line-height: 1.5;
    text-wrap: pretty;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
    font-size: var(--step--1);
}

.action {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.15rem;
    background: var(--action-bg);
    color: var(--action-text);
    font-size: var(--step-0);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition:
        background-color var(--fast) ease,
        color var(--fast) ease;
}

.action__icon,
.mail-link__icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--medium) var(--ease-out);
}

.action:hover,
.action:focus-visible {
    background: var(--action-hover-bg);
    color: var(--action-hover-text);
}

.action:hover .action__icon,
.action:focus-visible .action__icon,
.mail-link:hover .mail-link__icon,
.mail-link:focus-visible .mail-link__icon {
    transform: translateX(0.3rem);
}

.hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2.25rem;
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;
}

.hero__facts dt {
    color: var(--text-soft);
    font-size: var(--step--2);
    letter-spacing: 0.01em;
}

/* Statement: what we do, on a dark stage in both themes: the sentence and its detail, the illustration beside them and
   three points under the text. */

.statement {
    --accent-1: var(--band-accent-1);
    --accent-2: var(--band-accent-2);
    --gradient: linear-gradient(90deg, var(--accent-1), var(--accent-2));

    position: relative;
    display: grid;
    gap: 2.5rem var(--gap);
    padding-block: var(--section-space);
    color: var(--band-text);
}

.statement::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 calc(50% - 50vw);
    border-bottom: 1px solid var(--stage-edge);
    background: var(--stage-bg);
}

.statement__intro {
    display: grid;
    align-content: start;
    justify-items: start;
}

.statement__title {
    max-width: 21ch;
    font-size: var(--step-3);
    font-weight: 600;
    font-stretch: 110%;
    line-height: 1.12;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.statement__body {
    max-width: 34rem;
    margin-top: 1.5rem;
    color: var(--band-soft);
    font-size: var(--step-1);
    line-height: 1.5;
    text-wrap: pretty;
}

/* The illustration's own dark ground fades out at every edge into the stage, so no rectangle shows. */
.statement__art img {
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 89%, transparent), linear-gradient(transparent, #000 12%, #000 84%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 89%, transparent), linear-gradient(transparent, #000 12%, #000 84%, transparent);
    mask-composite: intersect;
}

/* Three points, side by side from tablet on with a hairline between them. */
.statement__points {
    display: grid;
    padding: 0;
    list-style: none;
}

.point {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 0.4rem;
    padding-block: 1.25rem;
}

.point + .point {
    border-top: 1px solid var(--band-rule);
}

.point__icon {
    margin-bottom: 0.6rem;
}

/* Principles: the business core, a full-width band; inverted in light, raised in dark. */

.principles {
    --accent-1: var(--band-accent-1);
    --accent-2: var(--band-accent-2);
    --gradient: linear-gradient(90deg, var(--accent-1), var(--accent-2));

    border-block: 1px solid var(--band-edge);
    background: var(--band-bg);
    color: var(--band-text);
}

/* Icon size and gap shared by every condition, so icon, title and text start on the same lines in each; the points of
   Wat we doen take the same icons. */
.statement,
.principles__inner {
    --icon-size: 2.75rem;
    --icon-gap: 1rem;

    display: grid;
    gap: 2.75rem var(--gap);
    padding-block: var(--section-space);
}

/* The left column weighs as much as the other sticky section heads: a label, a three-line heading a step above the
   site's section titles, and an introduction at the size of the team introduction. */
.principles__head {
    display: grid;
    align-content: start;
    justify-items: start;
}

/* On the dark band and stage, the label takes the band's soft colour. */
.statement .eyebrow,
.principles .eyebrow {
    color: var(--band-soft);
}

.principles__title {
    font-size: var(--step-2);
    font-weight: 600;
    font-stretch: 112%;
    line-height: 1.14;
    letter-spacing: -0.02em;
}

.principles__line {
    display: block;
}

.principles__intro {
    max-width: 26rem;
    margin-top: 1.25rem;
    color: var(--band-soft);
    font-size: var(--step-1);
    line-height: 1.45;
    text-wrap: pretty;
}

.principles__body {
    display: grid;
    align-content: start;
}

/* Each condition as icon, title and text on one grid; thin gradient rules only between them. */
.principles__list {
    display: grid;
    padding: 0;
    list-style: none;
}

.principle {
    position: relative;
    display: grid;
    grid-template-columns: var(--icon-size) minmax(0, 1fr);
    align-content: start;
    gap: 0.4rem var(--icon-gap);
    padding-block: 1.75rem;
}

.principle:first-child {
    padding-top: 0;
}

/* Drawn by motion.js through its right edge (--draw), not a transform, so the hairline stays snapped to the pixel. */
.principle + .principle::before {
    content: "";
    position: absolute;
    top: 0;
    right: calc((1 - var(--draw, 1)) * 100%);
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2) 70%, transparent);
    opacity: 0.7;
}

.principle__icon {
    grid-row: span 2;
}

/* The icon box of the conditions and of the points of Wat we doen. */
.principle__icon,
.point__icon {
    display: grid;
    place-items: center;
    width: var(--icon-size);
    height: var(--icon-size);
    border: 1px solid var(--band-rule);
    border-radius: 0.625rem;
    background: color-mix(in srgb, var(--band-text) 4%, transparent);
    color: color-mix(in srgb, var(--accent-1) 85%, var(--band-text));
    transition:
        border-color var(--medium) var(--ease-out),
        background-color var(--medium) var(--ease-out),
        color var(--medium) var(--ease-out),
        translate var(--medium) var(--ease-out),
        scale var(--medium) var(--ease-out);
}

/* One glyph size for every icon, whatever the box, so the three weigh the same. */
.principle__svg,
.point__svg {
    width: 1.375rem;
    height: 1.375rem;
    stroke-width: 1.5;
}

.principle__title,
.point__title,
.legal__heading {
    font-size: var(--step-1);
    font-weight: 600;
    font-stretch: 106%;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.principle p {
    grid-column: 2;
    max-width: 34rem;
}

.principle p,
.point p {
    color: var(--band-soft);
    text-wrap: pretty;
    transition: color var(--medium) var(--ease-out);
}

/*
 * The conditions and the privacy cards are information, not controls: hovering one only lights it up, its icon taking
 * the brand colour and the text coming forward, so no cursor or focus state. Where a pointer hovers only; the lift only with motion.
 */
@media (hover: hover) {
    .principle:hover .principle__icon,
    .point:hover .point__icon,
    .legal__section:hover {
        border-color: color-mix(in srgb, var(--accent-1) 40%, var(--band-rule));
        background-color: color-mix(in srgb, var(--accent-1) 9%, transparent);
    }

    .principle:hover .principle__icon,
    .point:hover .point__icon {
        color: var(--accent-1);
    }

    .principle:hover p,
    .point:hover p,
    .legal__section:hover p {
        color: color-mix(in srgb, var(--band-soft) 55%, var(--band-text));
    }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .principle:hover .principle__icon,
    .point:hover .point__icon,
    .legal__section:hover {
        translate: 0 -2px;
        scale: 1.04;
    }
}

/* The promise concludes the three across the whole column: what the supplier gets back, then the one step to take. */
.principles__promise {
    padding-top: 2rem;
    /* The rule runs as wide as the ones above; only the text keeps a readable measure. */
    padding-right: max(0px, 100% - 38rem);
    border-top: 1px solid var(--band-rule);
    font-size: var(--step-1);
    line-height: 1.5;
    text-wrap: pretty;
}

.principles__action {
    display: grid;
    justify-items: start;
    gap: 0.5rem;
    margin-top: 2rem;
}

.principles__ask {
    color: var(--band-soft);
}

.principles__action .mail-link {
    background-image: var(--gradient), linear-gradient(var(--band-rule), var(--band-rule));
    font-size: var(--step-1);
}

/* Team: the introduction, then the three partners. */

.team {
    display: grid;
    gap: 2.5rem var(--gap);
    padding-block: calc(var(--section-space) * 0.5);
}

.team__head {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.team__intro {
    max-width: 24rem;
    font-size: var(--step-1);
    line-height: 1.45;
    text-wrap: pretty;
}

.people {
    display: grid;
    gap: 1.75rem;
    padding: 0;
    list-style: none;
}

/* Each partner is a name and a role under the logo gradient, which comes up on hover: on a phone one per row, from
   tablet on three side by side. */
.person {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.25rem;
    padding-top: 1.25rem;
}

/* Drawn by motion.js through its right edge (--draw), like the rules between the conditions. */
.person::before {
    content: "";
    position: absolute;
    top: 0;
    right: calc((1 - var(--draw, 1)) * 100%);
    left: 0;
    height: 2px;
    background: var(--gradient);
    opacity: 0.4;
    transition: opacity var(--medium) var(--ease-out);
}

.person:hover::before {
    opacity: 1;
}

.person__name {
    font-size: var(--step-1);
    font-weight: 600;
    font-stretch: 106%;
    letter-spacing: -0.01em;
    line-height: 1.3;
    transition: translate var(--medium) var(--ease-out);
}

.person:hover .person__name {
    translate: 0.2rem 0;
}

.person__role {
    color: var(--text-soft);
    line-height: 1.45;
    text-wrap: pretty;
}

/* The privacy statement: its sections as cards on the page surface, two side by side from desktop. A card lights up
   on hover like the conditions do, on the page's own tokens so it also reads in light. */
.legal {
    --band-rule: var(--rule);
    --band-text: var(--text);
    --band-soft: var(--text-soft);

    padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) calc(var(--section-space) * 0.75);
}

.legal__intro {
    max-width: 50rem;
}

.legal__sections {
    display: grid;
    gap: 1rem;
    margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

.legal__section {
    display: grid;
    gap: 0.5rem;
    align-content: center;
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    border: 1px solid var(--rule);
    border-radius: 0.75rem;
    background: var(--surface);
    transition:
        border-color var(--medium) var(--ease-out),
        background-color var(--medium) var(--ease-out),
        translate var(--medium) var(--ease-out),
        scale var(--medium) var(--ease-out);
}

.legal__section p {
    color: var(--text-soft);
    line-height: 1.6;
    text-wrap: pretty;
    transition: color var(--medium) var(--ease-out);
}

.legal__section .mail-link {
    justify-self: start;
    font-size: var(--step-1);
}

.legal__updated {
    margin-top: 2rem;
    color: var(--text-soft);
    font-size: var(--step--1);
}

/* The ridge returns once, quieter, where the page turns to contact. It rises into the team's bottom space, so the
   section ends sooner; decoration only. */
.transition {
    height: clamp(4.5rem, 2rem + 7vw, 8.5rem);
    margin-top: calc(var(--section-space) * -0.15);
    pointer-events: none;
    --line-strength: 0.6;
}

.transition .contours {
    transform: scaleX(-1);
}

/* Stretched to any width, so the stroke keeps its own width; motion.js reveals it with a clip, not a dash, for that reason. */
.transition .contours__line {
    vector-effect: non-scaling-stroke;
}

/* Closing: contact and the company details on one tonal surface that runs into the footer. */

.closing {
    position: relative;
    display: grid;
    gap: 3rem var(--gap);
    padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.closing::before,
.colophon::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 calc(50% - 50vw);
    background: var(--surface);
}

.closing__contact {
    display: grid;
    align-content: start;
    justify-items: start;
}

/* A question rather than a label, in the weight of the other closing headings; the privacy statement shares its type. */
.closing__title,
.legal__title {
    font-size: var(--step-3);
    font-weight: 600;
    font-stretch: 110%;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.closing__title {
    max-width: 13ch;
    text-wrap: balance;
}

.closing__intro,
.legal__intro {
    margin-top: 1.25rem;
    color: var(--text-soft);
    font-size: var(--step-1);
    line-height: 1.5;
    text-wrap: pretty;
}

.closing__intro {
    max-width: 30rem;
}

/* The one action: an envelope beside the address. */
.closing__mail {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.9rem 1rem;
    margin-top: 2.25rem;
}

.closing__mail-icon {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--accent-1);
    stroke-width: 1.5;
}

.closing__mail .mail-link {
    justify-self: start;
}

.mail-link {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding-bottom: 0.35rem;
    background-image: var(--gradient), linear-gradient(var(--rule), var(--rule));
    background-position:
        0 100%,
        0 100%;
    background-repeat: no-repeat;
    background-size:
        0% 2px,
        100% 1px;
    font-size: var(--step-2);
    font-weight: 600;
    font-stretch: 106%;
    letter-spacing: -0.015em;
    line-height: 1.2;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background-size var(--slow) var(--ease-out);
}

.mail-link:hover,
.mail-link:focus-visible {
    background-size:
        100% 2px,
        100% 1px;
}

.mail-link__icon {
    width: 1.25rem;
    height: 1.25rem;
}

.closing__phone {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
    color: var(--text-soft);
}

/* The company details: a heading over one rule, then rows of icon, label and value, each closed by a hairline. */
.register {
    display: grid;
    align-content: start;
}

.register__title {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--rule);
    font-size: var(--step-2);
    font-weight: 600;
    font-stretch: 108%;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.register__title-icon {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--accent-1);
    stroke-width: 1.5;
}

.register__list {
    display: grid;
}

.register__list > div {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.2rem;
    padding: 1.1rem 0 1.15rem 2.25rem;
    border-bottom: 1px solid var(--rule);
}

.register__list dt {
    color: var(--text-soft);
    font-size: var(--step--1);
    line-height: 1.4;
}

/* The icon sits left of both label and value and starts where the label's capitals start: in Archivo they begin
   0.346em below the top of a 1.4 line, and Lucide draws from 2 of its 24 units. Centred on the line, the icons rose
   above the text, the taller ones most. */
.register__icon {
    position: absolute;
    top: calc(1.1rem + var(--step--1) * 0.346 - 1.25rem / 12);
    left: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--accent-1);
    stroke-width: 1.5;
}

.register__list dd {
    font-weight: 500;
    line-height: 1.4;
}

.register__number {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* Two columns of details where each keeps room for its value; the hairlines run on across both. */
@media (min-width: 30rem) {
    .register__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .register__list > div:nth-child(odd) {
        padding-right: var(--gap);
    }
}

/* On a phone the address takes a step down so it stays on one line, and on the smallest the envelope gives way. */
@media (max-width: 39.99rem) {
    .closing__mail .mail-link {
        font-size: var(--step-1);
    }

    .closing__mail-icon {
        width: 1.5rem;
        height: 1.5rem;
    }
}

@media (max-width: 29.99rem) {
    .closing__mail {
        grid-template-columns: minmax(0, 1fr);
    }

    .closing__mail-icon {
        display: none;
    }
}

/* Colophon: the brand closes the page, on the same surface: brand, links, company and language, under one rule. */

.colophon {
    position: relative;
    display: grid;
    align-items: start;
    gap: 2.25rem var(--gap);
    padding-block: 3rem 4rem;
    /* The mark beyond the bottom edge is cut off; sideways the surface still runs to the viewport edges. */
    overflow: visible clip;
    color: var(--text-soft);
}

.colophon::after {
    content: "";
    position: absolute;
    top: 0;
    right: var(--gutter);
    left: var(--gutter);
    height: 1px;
    background: var(--rule);
    transform: scaleX(var(--draw, 1));
    transform-origin: left;
}

.colophon__brand {
    display: grid;
    justify-items: start;
    gap: 1rem;
    color: var(--text);
}

/* The lockup at about one and a half times the header's, in the same proportions. */
.colophon .logo {
    font-size: 1.5rem;
}

.colophon__brand p {
    max-width: 24rem;
    color: var(--text-soft);
    line-height: 1.55;
}

.colophon__nav {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 0.9rem;
}

.colophon__nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}

.colophon__chevron {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    fill: none;
    stroke: var(--accent-1);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--medium) var(--ease-out);
}

.colophon__nav a:hover .colophon__chevron,
.colophon__nav a:focus-visible .colophon__chevron {
    transform: translateX(0.25rem);
}

.colophon__meta {
    display: grid;
    align-content: start;
    gap: 1.5rem;
}

.colophon__company {
    white-space: nowrap;
}

.colophon__name {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--text);
}

/* NL | EN: a thin stroke between the two, the active one bright with its short gradient line. */
.colophon .languages {
    gap: 1.5rem;
    margin-left: -0.45rem;
    font-size: var(--step-0);
}

.colophon .languages a + a::before {
    content: "";
    position: absolute;
    top: 25%;
    bottom: 25%;
    left: -0.75rem;
    width: 1px;
    background: var(--rule);
}

/* The mark, large and barely there, its mountains rising out of the bottom right corner at the viewport edge while
   the arrow runs off it; decoration only. */
.colophon__art {
    position: absolute;
    z-index: -1;
    right: calc(50% - 50vw);
    bottom: -3.5rem;
    display: none;
    width: 14rem;
    overflow: hidden;
    opacity: 0.07;
    pointer-events: none;
}

.colophon__art .mark {
    width: calc(100% / 0.7);
    height: auto;
}

@media (max-width: 23.99rem) {
    .masthead {
        gap: 0.75rem;
    }

    .masthead .logo {
        font-size: 0.875rem;
    }

    .masthead__tools {
        gap: 0.5rem;
    }

    /* Keeps "the Netherlands" together on the narrowest screens. */
    .hero__title {
        font-size: 2.125rem;
    }
}

/* Tablet */

@media (min-width: 40rem) {
    .statement__points {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .point {
        padding: 0.25rem clamp(1rem, 2.2vw, 1.75rem);
    }

    .point:first-child {
        padding-left: 0;
    }

    .point + .point {
        border-top: 0;
        border-left: 1px solid var(--band-rule);
    }

    .masthead {
        grid-template-columns: auto 1fr auto;
    }

    .masthead__nav {
        display: flex;
        justify-content: flex-end;
    }

    .statement,
    .principles__inner {
        --icon-size: 3.5rem;
        --icon-gap: 1.5rem;
    }

    .principle__svg,
    .point__svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .people {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--gap);
        max-width: 40rem;
    }

    /* Tablet: the brand on its own line, then links and company side by side, the language closing the row. */
    .colophon {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .colophon__brand {
        grid-column: 1 / -1;
    }

    .colophon__nav {
        grid-column: 1 / span 5;
    }

    .colophon__meta {
        display: flex;
        grid-column: 6 / -1;
        align-self: stretch;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--gap);
        padding-left: clamp(1.5rem, 3vw, 3rem);
        border-left: 1px solid var(--rule);
    }

    .colophon .languages {
        margin-right: -0.45rem;
        margin-left: 0;
    }

    .colophon__art {
        display: block;
    }
}

/* Desktop: asymmetric twelve columns per section. */

@media (min-width: 64rem) {
    .legal__sections {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        /* Past about 1920px the line work keeps growing with the width; the text rises with it, clear of the lines. */
        padding-block: clamp(1.5rem, 5vh - 0.5rem, 3.5rem) calc(clamp(4.5rem, 1rem + 5vw, 7rem) + max(0px, 22vw - 26.5rem));
    }

    .hero__title {
        grid-column: 1 / -1;
        margin-bottom: 0.25rem;
    }

    .hero__foot,
    .hero__facts {
        grid-column: 1 / span 6;
    }

    /* Text and points on the left, the illustration beside both, running to the edge of the gutter. */
    .statement {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: end;
        row-gap: 3rem;
    }

    .statement__intro {
        grid-column: 1 / span 7;
        grid-row: 1;
    }

    /* Beside the text only: the bottom of the illustration lines up with the bottom of the detail. */
    .statement__art {
        grid-column: 8 / -1;
        grid-row: 1;
        margin: 0 calc(var(--gutter) * -1) 0 calc(var(--gap) * -1);
    }

    /* Under the text and the picture alike until the text column is wide enough for the three. */
    .statement__points {
        grid-column: 1 / -1;
        grid-row: 2;
        align-self: start;
    }

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

    .principles__head {
        grid-column: 1 / span 5;
        align-self: start;
    }

    /* Side by side, the label sits on the line of the first title (its line box is 1.3 times step 1). */
    .principles .eyebrow {
        margin-top: calc(var(--step-1) * 0.65 - 0.6em);
    }

    .principles__body {
        grid-column: 7 / -1;
    }

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

    .team__head {
        grid-column: 1 / span 4;
        align-self: start;
    }

    /* The partners' rules on the line of the section title's. */
    .people {
        grid-column: 7 / -1;
        margin-top: calc(var(--step-1) * 0.6 - 1px);
    }

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

    .closing__contact {
        grid-column: 1 / span 6;
    }

    .register {
        grid-column: 7 / -1;
    }

    .colophon__brand {
        grid-column: 1 / span 4;
    }

    .colophon__nav {
        grid-column: 5 / span 3;
    }

    /* The divider stands where the company details above start; the language switch closes the right edge. */
    .colophon__meta {
        grid-column: 8 / -1;
    }

    .colophon__art {
        width: 18rem;
    }
}

/* Wide enough for the footer's links in two columns, as in the design, and for the company details to start where
   the footer's divider stands. */
@media (min-width: 80rem) {
    .statement__points {
        grid-column: 1 / span 7;
    }

    .register {
        grid-column: 8 / -1;
    }

    .colophon__brand {
        grid-column: 1 / span 5;
    }

    .colophon__nav {
        grid-column: 6 / span 2;
    }
}

/* Sticky headings only where the viewport is tall enough for the content to pass beside them. */
@media (min-width: 64rem) and (min-height: 40rem) {
    .principles__head {
        position: sticky;
        top: var(--sticky-top);
    }
}

/*
 * Motion. CSS keeps what is simple or must run before any script: hover and focus, the theme crossfade, and the
 * hero's entrance, which plays from the first paint. Everything timed to scroll or time, every reveal below the
 * hero and all moving line work belong to motion.js (GSAP); it marks the page with has-gsap and sets its own start
 * states, so without it, or with reduced motion, the page is complete and still.
 */

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }

    /*
     * Entrance as polish, not a gate: everything is readable within half a second, the headline lines rising from
     * their masks and the lead and actions following. The company facts take no part; they are simply there.
     */
    .masthead > * {
        animation: rise-small 500ms var(--ease-out) both;
    }

    .masthead__nav {
        animation-delay: 40ms;
    }

    .masthead__tools {
        animation-delay: 80ms;
    }

    .hero__line {
        animation: unmask 650ms var(--ease-out) both;
    }

    .hero__line:nth-child(2) {
        animation-delay: 70ms;
    }

    .hero__foot {
        animation: rise 550ms var(--ease-out) 140ms both;
    }

    /* Should motion.js not run, the lines still draw, late, so they never stay hidden. */
    html:not(.has-gsap) .hero__art .contours__line {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: draw 1800ms var(--ease-out) 1200ms forwards;
    }

    /* The signals exist only while motion.js runs them. */
    html:not(.has-gsap) .contours__signal,
    html:not(.has-gsap) .contours__halo {
        display: none;
    }

    /* Switching theme crossfades the whole page. */
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 450ms;
        animation-timing-function: var(--ease-out);
    }
}

@media (prefers-reduced-motion: reduce) {
    .person:hover .person__name {
        translate: none;
    }
}

@keyframes rise-small {
    from {
        opacity: 0;
        transform: translateY(-0.4rem);
    }
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }
}

@keyframes unmask {
    from {
        opacity: 0;
        transform: translateY(0.3em);
        clip-path: inset(0 0 100% 0);
    }

    to {
        clip-path: inset(0 0 -20% 0);
    }
}

@media print {
    :root {
        --bg: #fff;
        --surface: #fff;
        --text: #000;
        --text-soft: #333;
        --band-bg: #fff;
        --band-text: #000;
        --band-soft: #333;
    }

    .skip,
    .masthead__nav,
    .masthead__tools,
    .hero__art,
    .transition,
    .hero__actions,
    .colophon .languages,
    .colophon__art {
        display: none;
    }
}