/*
 * Sam Anderson - website en portaal
 * (c) Digital Studio - digital-studio.be
 */

@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-variable.woff") format("woff");
    font-weight: 400 900;
    font-stretch: 62% 100%;
    font-display: swap;
}

@font-face {
    font-family: "Albert Sans";
    src: url("../fonts/albert-sans-variable.woff") format("woff");
    font-weight: 300 700;
    font-display: swap;
}

:root {
    --color-black: #050507;
    --color-ink: #0e0e13;
    --color-ink-soft: #17171f;
    --color-line-dark: rgba(255, 255, 255, 0.12);
    --color-white: #ffffff;
    --color-paper: #f3f3f1;
    --color-line-light: rgba(5, 5, 7, 0.12);
    --color-muted-dark: rgba(255, 255, 255, 0.64);
    --color-muted-light: #55555f;
    --color-accent: #003dff;
    --color-accent-bright: #3d6bff;
    --color-accent-glow: rgba(0, 61, 255, 0.55);
    --color-success: #00c46a;
    --color-error: #ff4d4d;

    --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Albert Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --display-stretch: 72%;

    --size-hero: clamp(3.4rem, min(10vw, 15vh), 10.5rem);
    --size-title: clamp(2.5rem, 6.4vw, 6.25rem);
    --size-title-small: clamp(1.75rem, 3.4vw, 3rem);
    --size-lead: clamp(1.25rem, 2.1vw, 1.75rem);
    --size-body: 1.0625rem;

    --space-section: clamp(5rem, 11vw, 10rem);
    --container: 1440px;
    --gutter: clamp(1.25rem, 4vw, 3.5rem);
    --header-height: 84px;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

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

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

body {
    margin: 0;
    background: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--size-body);
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.is-locked {
    overflow: hidden;
}

img,
picture,
video,
svg {
    display: block;
    max-width: 100%;
}

img,
video {
    height: auto;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

:focus-visible {
    outline: 3px solid var(--color-accent-bright);
    outline-offset: 3px;
}

::selection {
    background: var(--color-accent);
    color: var(--color-white);
}

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

.skip-link {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 200;
    padding: 0.75rem 1.25rem;
    background: var(--color-accent);
    color: var(--color-white);
    font-weight: 700;
    transform: translateY(-200%);
    transition: transform 0.2s;
}

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

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

.container-narrow {
    max-width: 920px;
}

.icon {
    width: 1.1em;
    height: 1.1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.icon-play,
.icon-star {
    fill: currentColor;
    stroke: none;
}

/* Typografie */

.hero-title,
.section-title,
.cta-title,
.footer-cta-title,
.quote-text,
.service-card-title,
.format-name,
.step-title,
.friend-card-name,
.agenda-title,
.rider-card-title,
.news-card-title,
.child-link-title,
.statistic-value,
.marquee-item {
    font-family: var(--font-display);
    font-stretch: var(--display-stretch);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: -0.005em;
    margin: 0;
}

.section-title {
    font-size: var(--size-title);
    margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
}

.section-title-small {
    font-size: var(--size-title-small);
}

.section-intro {
    max-width: 46rem;
    font-size: var(--size-lead);
    line-height: 1.45;
    margin: 0;
    color: var(--section-muted, var(--color-muted-dark));
}

.section-heading {
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-heading .section-title {
    margin-bottom: 1.25rem;
}

.section-heading-split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 3rem;
}

.rich-text {
    max-width: 44rem;
}

.rich-text > :first-child {
    margin-top: 0;
}

.rich-text > :last-child {
    margin-bottom: 0;
}

.rich-text p,
.rich-text ul,
.rich-text ol {
    margin: 0 0 1.2em;
}

.rich-text h2,
.rich-text h3,
.rich-text h4 {
    font-family: var(--font-display);
    font-stretch: var(--display-stretch);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
    margin: 2em 0 0.6em;
}

.rich-text h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.rich-text h3 {
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}

.rich-text a {
    color: var(--section-link, var(--color-accent-bright));
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.rich-text ul {
    padding: 0;
    list-style: none;
}

.rich-text ul li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.45em;
}

.rich-text ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 0.65em;
    height: 3px;
    background: var(--color-accent);
}

.rich-text blockquote {
    margin: 1.5em 0;
    padding-left: 1.25em;
    border-left: 4px solid var(--color-accent);
    font-size: 1.2em;
}

.rich-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
}

.rich-text th,
.rich-text td {
    text-align: left;
    padding: 0.7em 0.8em;
    border-bottom: 1px solid var(--section-line, var(--color-line-dark));
}

.text-accent {
    color: var(--color-accent-bright);
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.875rem;
    text-decoration: none;
}

.text-link .icon {
    transition: transform 0.35s var(--ease-out);
}

.text-link:hover .icon {
    transform: translateX(5px);
}

.link-button {
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    font-size: inherit;
}

/* Knoppen */

.button {
    --button-background: var(--color-white);
    --button-color: var(--color-black);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 3.25rem;
    padding: 0.9rem 1.6rem;
    border: 2px solid var(--button-background);
    background: var(--button-background);
    color: var(--button-color);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.1;
    overflow: hidden;
    isolation: isolate;
    transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

.button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--button-hover-background, var(--color-black));
    transform: translateY(101%);
    transition: transform 0.5s var(--ease-out);
}

.button:hover::before,
.button:focus-visible::before {
    transform: translateY(0);
}

.button:hover,
.button:focus-visible {
    color: var(--button-hover-color, var(--color-white));
}

.button .icon {
    transition: transform 0.4s var(--ease-out);
}

.button:hover .icon {
    transform: translateX(4px);
}

.button-accent {
    --button-background: var(--color-accent);
    --button-color: var(--color-white);
    --button-hover-background: var(--color-white);
    --button-hover-color: var(--color-black);
}

.section-light .button-accent,
.cta-block .button-accent {
    --button-hover-background: var(--color-black);
    --button-hover-color: var(--color-white);
}

.button-ghost {
    --button-background: transparent;
    --button-color: currentColor;
    --button-hover-background: var(--color-white);
    --button-hover-color: var(--color-black);
    border-color: currentColor;
}

.section-light .button-ghost {
    --button-hover-background: var(--color-black);
    --button-hover-color: var(--color-white);
}

.button-dark {
    --button-background: var(--color-black);
    --button-color: var(--color-white);
    --button-hover-background: var(--color-accent);
}

.button-small {
    min-height: 2.6rem;
    padding: 0.6rem 1.1rem;
    font-size: 0.8125rem;
}

.button-large {
    min-height: 3.75rem;
    padding: 1.1rem 2rem;
    font-size: 1rem;
}

.block-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
}

.block-actions-center {
    justify-content: center;
}

/* Equalizer: het beeldmotief uit de rider */

.equalizer {
    display: inline-flex;
    align-items: flex-end;
    gap: 0.35em;
    height: 3em;
}

.equalizer span {
    display: block;
    width: 0.9em;
    background: currentColor;
    transform-origin: bottom;
}

.equalizer span:nth-child(1) { height: 45%; }
.equalizer span:nth-child(2) { height: 70%; }
.equalizer span:nth-child(3) { height: 100%; background: var(--color-accent); }
.equalizer span:nth-child(4) { height: 62%; }
.equalizer span:nth-child(5) { height: 80%; }

.equalizer-small {
    font-size: 0.55rem;
}

.equalizer-large {
    font-size: 1.4rem;
}

.equalizer.is-playing span,
.hero-scroll .equalizer span {
    animation: equalizer-bounce 1.1s var(--ease-in-out) infinite alternate;
}

.equalizer.is-playing span:nth-child(2),
.hero-scroll .equalizer span:nth-child(2) { animation-delay: -0.4s; }
.equalizer.is-playing span:nth-child(3),
.hero-scroll .equalizer span:nth-child(3) { animation-delay: -0.8s; }
.equalizer.is-playing span:nth-child(4),
.hero-scroll .equalizer span:nth-child(4) { animation-delay: -0.2s; }
.equalizer.is-playing span:nth-child(5),
.hero-scroll .equalizer span:nth-child(5) { animation-delay: -0.6s; }

@keyframes equalizer-bounce {
    0% { transform: scaleY(0.35); }
    100% { transform: scaleY(1); }
}

/* Header */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--header-height);
    transition: background-color 0.4s, transform 0.5s var(--ease-out), border-color 0.4s;
    border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
    background: rgba(5, 5, 7, 0.86);
    border-bottom-color: var(--color-line-dark);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}

.site-header.is-hidden {
    transform: translateY(-100%);
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    height: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--color-white);
    text-decoration: none;
    flex: none;
}

.site-logo .logo-mark {
    width: 46px;
    height: auto;
    transition: transform 0.6s var(--ease-out);
}

.site-logo:hover .logo-mark {
    transform: rotate(-8deg) scale(1.06);
}

.site-logo .logo-wordmark {
    width: 128px;
    height: auto;
}

.main-navigation-list {
    display: flex;
    align-items: center;
    gap: clamp(0.8rem, 1.2vw, 1.6rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-navigation-item {
    position: relative;
}

.main-navigation-item > a {
    position: relative;
    display: block;
    padding: 0.6rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.main-navigation-item > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.25rem;
    height: 2px;
    background: var(--color-accent-bright);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.45s var(--ease-out);
}

.main-navigation-item:hover > a::after,
.main-navigation-item.is-active > a::after {
    transform: scaleX(1);
    transform-origin: left;
}

.main-navigation-dropdown {
    position: absolute;
    top: 100%;
    left: -1.25rem;
    min-width: 260px;
    margin: 0;
    padding: 0.75rem 0;
    list-style: none;
    background: var(--color-ink);
    border: 1px solid var(--color-line-dark);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.4s var(--ease-out), visibility 0.3s;
}

.main-navigation-item:hover .main-navigation-dropdown,
.main-navigation-item:focus-within .main-navigation-dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.main-navigation-dropdown a {
    display: block;
    padding: 0.6rem 1.25rem;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: color 0.2s, padding 0.35s var(--ease-out);
}

.main-navigation-dropdown a:hover {
    color: var(--color-accent-bright);
    padding-left: 1.6rem;
}

.site-header-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.language-switch {
    display: flex;
    gap: 0.15rem;
}

.language-switch a {
    padding: 0.35rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: var(--color-muted-dark);
    transition: color 0.2s;
}

.language-switch a:hover,
.language-switch a.is-current {
    color: var(--color-white);
}

.language-switch a.is-current {
    box-shadow: inset 0 -2px 0 var(--color-accent);
}

.menu-toggle {
    display: none;
    width: 48px;
    height: 48px;
    padding: 0;
    background: transparent;
    border: 0;
}

.menu-toggle-bars {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.menu-toggle-bars span {
    display: block;
    height: 3px;
    background: var(--color-white);
    transition: transform 0.5s var(--ease-out), width 0.4s var(--ease-out), opacity 0.3s;
}

.menu-toggle-bars span:nth-child(1) { width: 28px; }
.menu-toggle-bars span:nth-child(2) { width: 20px; background: var(--color-accent-bright); }
.menu-toggle-bars span:nth-child(3) { width: 24px; }

.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(1) { transform: translateY(9px) rotate(45deg); width: 28px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(2) { opacity: 0; width: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); width: 28px; }

/* Mobiel menu: vouwt open vanuit de driehoek van het logo */

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 90;
}

.mobile-menu[hidden] {
    display: none;
}

.mobile-menu-backdrop {
    position: absolute;
    inset: 0;
    background: var(--color-accent);
    clip-path: polygon(50% 0, 50% 0, 50% 0);
}

.mobile-menu-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: calc(var(--header-height) + 1.5rem) var(--gutter) 2rem;
    overflow-y: auto;
}

.mobile-menu-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-menu-item {
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.mobile-menu-item > a {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    padding: 0.7rem 0;
    font-family: var(--font-display);
    font-stretch: var(--display-stretch);
    font-weight: 900;
    font-size: clamp(2.1rem, 9vw, 3.4rem);
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
}

.mobile-menu-number {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.7;
}

.mobile-menu-sublist {
    margin: 0 0 0.9rem 2.1rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.2rem;
}

.mobile-menu-sublist a {
    font-size: 0.95rem;
    text-decoration: none;
    opacity: 0.88;
}

.mobile-menu-footer {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 2rem;
}

.mobile-menu-footer .button-accent {
    --button-background: var(--color-black);
    --button-hover-background: var(--color-white);
}

.mobile-menu-languages {
    display: flex;
    gap: 1.25rem;
}

.mobile-menu-languages a {
    text-decoration: none;
    font-weight: 600;
    opacity: 0.75;
}

.mobile-menu-languages a.is-current {
    opacity: 1;
    box-shadow: inset 0 -2px 0 var(--color-white);
}

/* Paginaovergang */

.page-transition {
    position: fixed;
    inset: 0;
    z-index: 150;
    pointer-events: none;
    visibility: hidden;
}

.page-transition.is-active {
    visibility: visible;
    pointer-events: all;
}

.page-transition-panel {
    position: absolute;
    inset: 0;
    background: var(--color-accent);
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}

.page-transition-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 96px;
    color: var(--color-white);
    transform: translate(-50%, -50%);
    opacity: 0;
}

.page-transition-mark .logo-mark-accent {
    fill: var(--color-white);
    opacity: 0.55;
}

/* Hero */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    background: var(--color-black);
    isolation: isolate;
}

.hero-full {
    min-height: 100svh;
    padding: calc(var(--header-height) + 3rem) 0 clamp(2.5rem, 6vw, 4.5rem);
}

.hero-large {
    min-height: 82svh;
    padding: calc(var(--header-height) + 3rem) 0 clamp(3rem, 7vw, 5.5rem);
}

.hero-compact {
    min-height: 52svh;
    padding: calc(var(--header-height) + 4rem) 0 clamp(3rem, 6vw, 4.5rem);
}

.hero-media {
    position: absolute;
    inset: -8% 0 0 0;
    z-index: -2;
}

.hero-media picture,
.hero-media img,
.hero-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-video {
    position: absolute;
    inset: 0;
}

.hero-shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(5, 5, 7, 0.55) 0%, rgba(5, 5, 7, 0.05) 32%, rgba(5, 5, 7, 0.35) 62%, rgba(5, 5, 7, 0.96) 100%),
        radial-gradient(120% 90% at 85% 10%, rgba(0, 61, 255, 0.28), transparent 60%);
}

.hero-title {
    font-size: var(--size-hero);
    max-width: 14ch;
    text-wrap: balance;
}

.hero-compact .hero-title {
    font-size: clamp(3rem, 8.5vw, 8.5rem);
    max-width: 18ch;
}

.hero-subtitle {
    max-width: 40rem;
    margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
    font-size: var(--size-lead);
    line-height: 1.42;
    color: rgba(255, 255, 255, 0.86);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: clamp(2rem, 4vw, 3rem);
}

.hero-trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: clamp(3rem, 6vw, 5rem);
    padding-top: 1.75rem;
    border-top: 1px solid var(--color-line-dark);
}

.hero-trust-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.hero-trust-value {
    font-family: var(--font-display);
    font-stretch: var(--display-stretch);
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1;
}

.hero-trust-label {
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted-dark);
}

.hero-scroll {
    position: absolute;
    right: var(--gutter);
    bottom: clamp(2.5rem, 6vw, 4.5rem);
    color: var(--color-white);
}

/* Secties */

.section {
    position: relative;
    padding-block: var(--space-section);
}

.section-dark {
    background: var(--color-black);
    color: var(--color-white);
    --section-muted: var(--color-muted-dark);
    --section-line: var(--color-line-dark);
}

.section-dark + .section-dark {
    padding-top: 0;
}

.section-light {
    background: var(--color-paper);
    color: var(--color-black);
    --section-muted: var(--color-muted-light);
    --section-line: var(--color-line-light);
    --section-link: var(--color-accent);
}

.section-light + .section-light {
    padding-top: 0;
}

.section-accent {
    background: var(--color-accent);
    color: var(--color-white);
    --section-muted: rgba(255, 255, 255, 0.82);
    --section-line: rgba(255, 255, 255, 0.25);
    --section-link: var(--color-white);
}

.breadcrumbs {
    padding-block: 1.1rem;
    font-size: 0.8125rem;
    background: var(--color-black);
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-muted-dark);
}

.breadcrumbs li + li::before {
    content: "/";
    margin-right: 0.4rem;
    opacity: 0.5;
}

.breadcrumbs a {
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--color-white);
}

/* Intro */

.intro-lead {
    font-size: clamp(1.5rem, 3vw, 2.6rem);
    line-height: 1.22;
    font-weight: 500;
    margin: 0 0 2rem;
    max-width: 30ch;
}

.intro-grid.has-image {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
}

.intro-image {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.intro-image img,
.intro-image picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tekst met beeld */

.text-media-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 7vw, 7rem);
    align-items: center;
}

.text-media-grid.media-left .text-media-visual {
    order: -1;
}

.text-media-visual {
    position: relative;
    aspect-ratio: 4 / 5;
}

.text-media-visual picture,
.text-media-visual img,
.text-media-visual video {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.text-media-frame {
    position: absolute;
    inset: 1.5rem -1.5rem -1.5rem 1.5rem;
    border: 2px solid var(--color-accent);
    z-index: 0;
}

.media-left .text-media-frame {
    inset: 1.5rem 1.5rem -1.5rem -1.5rem;
}

/* Diensten */

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
}

.services-count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.services-count-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: clamp(26rem, 42vw, 36rem);
    overflow: hidden;
    color: var(--color-white);
    text-decoration: none;
    background: var(--color-ink-soft);
    isolation: isolate;
}

.service-card-media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.service-card-media picture,
.service-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    transition: transform 1.2s var(--ease-out), filter 0.8s;
    filter: grayscale(0.35) brightness(0.72);
}

.service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, transparent 30%, rgba(5, 5, 7, 0.92) 100%);
}

.service-card::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 4px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.7s var(--ease-out);
}

.service-card:hover .service-card-media img {
    transform: scale(1.1);
    filter: grayscale(0) brightness(0.8);
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-card-body {
    margin-top: auto;
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.service-card-number {
    display: block;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-accent-bright);
}

.service-card-title {
    font-size: clamp(2rem, 3.6vw, 3.25rem);
}

.service-card-text {
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, 0.82);
    max-width: 30rem;
}

.service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.service-card-link .icon {
    transition: transform 0.4s var(--ease-out);
}

.service-card:hover .service-card-link .icon {
    transform: translateX(6px);
}

/* Cijfers */

.statistics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin: 0;
}

.statistic {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 2px solid rgba(255, 255, 255, 0.35);
}

.statistic-value {
    margin: 0;
    font-size: clamp(3.5rem, 8vw, 7rem);
}

.statistic-label {
    font-size: 0.9375rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Formules */

.formats-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--color-black);
}

.format-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 2rem 1.75rem 2.25rem 0;
    border-bottom: 1px solid var(--color-line-light);
}

.format-card + .format-card {
    padding-left: 1.75rem;
    border-left: 1px solid var(--color-line-light);
}

.format-number {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 0.1em;
}

.format-name {
    font-size: clamp(1.9rem, 3vw, 2.6rem);
}

.format-duration {
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.875rem;
}

.format-text {
    margin: 0;
    color: var(--color-muted-light);
}

.format-instruments {
    margin: auto 0 0;
    padding-top: 1rem;
    font-size: 0.875rem;
    color: var(--color-black);
    border-top: 1px dashed var(--color-line-light);
}

/* Stappen */

.steps-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: steps;
}

.step {
    position: relative;
    padding-top: 4.5rem;
}

.step::before {
    content: "";
    position: absolute;
    top: 1.65rem;
    left: 3.5rem;
    right: -1rem;
    height: 2px;
    background: var(--color-line-dark);
}

.step:last-child::before {
    display: none;
}

.step-number {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 3.3rem;
    height: 3.3rem;
    background: var(--color-accent);
    font-family: var(--font-display);
    font-stretch: var(--display-stretch);
    font-weight: 900;
    font-size: 1.5rem;
}

.step-title {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    margin-bottom: 0.75rem;
}

.step-text {
    margin: 0;
    color: var(--color-muted-dark);
}

/* Lopende band met venues */

.venues-block {
    overflow: hidden;
}

.venues-artists-title {
    margin-top: clamp(3rem, 6vw, 5rem);
}

.marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
    padding-block: 0.4rem;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track {
    display: flex;
    flex: none;
    gap: clamp(2rem, 4vw, 3.5rem);
    margin: 0;
    padding: 0 clamp(1rem, 2vw, 1.75rem);
    list-style: none;
    will-change: transform;
}

.marquee-item {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: clamp(2.4rem, 6vw, 5.5rem);
    white-space: nowrap;
}

.marquee-item::after {
    content: "";
    align-self: center;
    width: 0.32em;
    height: 0.32em;
    margin-left: clamp(1rem, 2vw, 1.75rem);
    background: var(--color-accent);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.marquee-city {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted-dark);
}

.marquee-outline .marquee-item {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.75);
}

.marquee-outline .marquee-item:hover {
    color: var(--color-white);
}

/* Slider */

.slider {
    position: relative;
}

.slider-track {
    display: flex;
    gap: clamp(1rem, 2vw, 1.75rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
    margin-right: calc(var(--gutter) * -1);
    padding-right: var(--gutter);
    cursor: grab;
}

.slider-track::-webkit-scrollbar {
    display: none;
}

.slider-track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.slider-track.is-dragging a {
    pointer-events: none;
}

.slider-slide {
    flex: 0 0 clamp(260px, 30vw, 420px);
    scroll-snap-align: start;
}

.slider-controls {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 2rem;
}

.slider-button {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    background: transparent;
    border: 2px solid currentColor;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.slider-button:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
}

.slider-button:disabled {
    opacity: 0.3;
    pointer-events: none;
}

.slider-previous .icon {
    transform: rotate(180deg);
}

.slider-progress {
    position: relative;
    flex: 1;
    height: 2px;
    background: var(--section-line, var(--color-line-dark));
}

.slider-progress span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 20%;
    background: var(--color-accent);
    transition: width 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

/* Reviews */

.reviews-summary {
    margin: 0;
    font-weight: 600;
}

.reviews-average {
    font-family: var(--font-display);
    font-stretch: var(--display-stretch);
    font-weight: 900;
    font-size: 3rem;
    line-height: 1;
}

.review-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--color-white);
    border-top: 4px solid var(--color-accent);
    min-height: 100%;
}

.review-rating {
    display: flex;
    gap: 0.2rem;
    margin-bottom: 1.25rem;
    color: #c8c8cf;
}

.review-rating .is-filled {
    color: var(--color-accent);
}

.review-text {
    margin: 0 0 1.75rem;
    font-size: 1.15rem;
    line-height: 1.55;
}

.review-text p {
    margin: 0;
}

.review-author {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    font-size: 0.9375rem;
}

.review-author span {
    color: var(--color-muted-light);
}

/* Friends */

.friend-card-link {
    display: block;
    text-decoration: none;
}

.friend-card-media {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--color-ink-soft);
}

.friend-card-media picture,
.friend-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
    transition: filter 0.7s, transform 1s var(--ease-out);
}

.friend-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-accent);
    mix-blend-mode: multiply;
    opacity: 0;
    transition: opacity 0.6s;
}

.friend-card-link:hover .friend-card-media img {
    filter: grayscale(0);
    transform: scale(1.05);
}

.friend-card-link:hover .friend-card-media::after {
    opacity: 0.25;
}

.friend-card-name {
    margin-top: 1.1rem;
    font-size: clamp(1.6rem, 2.6vw, 2.25rem);
}

.friend-card-genre {
    margin: 0.4rem 0 0;
    font-size: 0.875rem;
    color: var(--color-muted-dark);
}

.friends-grid-inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Agenda */

.agenda-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.75rem;
    background: var(--color-white);
    border-left: 4px solid var(--color-accent);
}

.agenda-date {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.agenda-day {
    font-family: var(--font-display);
    font-stretch: var(--display-stretch);
    font-weight: 900;
    font-size: 3.5rem;
    line-height: 0.9;
}

.agenda-month {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.875rem;
}

.agenda-title {
    font-size: 1.75rem;
}

.agenda-place {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--color-muted-light);
}

/* Galerij */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: clamp(130px, 14vw, 220px);
    gap: clamp(0.5rem, 1vw, 1rem);
}

.gallery-item {
    position: relative;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: var(--color-ink-soft);
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-item-1 { grid-column: span 2; grid-row: span 1; }
.gallery-item-2 { grid-column: span 2; grid-row: span 3; }
.gallery-item-3 { grid-column: span 4; grid-row: span 2; }
.gallery-item-5 { grid-column: span 3; grid-row: span 2; }
.gallery-item-6 { grid-column: span 3; grid-row: span 2; }

.gallery-item picture,
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease-out);
}

.gallery-item:hover img {
    transform: scale(1.06);
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 160;
    display: grid;
    place-items: center;
    background: rgba(5, 5, 7, 0.96);
}

.lightbox[hidden] {
    display: none;
}

.lightbox-image {
    max-width: min(92vw, 1600px);
    max-height: 86vh;
    object-fit: contain;
}

.lightbox-close,
.lightbox-previous,
.lightbox-next {
    position: absolute;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    background: transparent;
    border: 2px solid var(--color-white);
    color: var(--color-white);
}

.lightbox-close { top: 1.25rem; right: 1.25rem; }
.lightbox-previous { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox-previous .icon { transform: rotate(180deg); }
.lightbox-next { right: 1.25rem; top: 50%; transform: translateY(-50%); }

/* Video's */

.videos-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
}

.video-card {
    margin: 0;
}

.video-card.is-featured {
    grid-column: span 2;
    grid-row: span 2;
}

.video-card-trigger {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: var(--color-ink-soft);
}

.video-card.is-featured .video-card-trigger {
    aspect-ratio: auto;
    height: 100%;
    min-height: 22rem;
}

.video-card-trigger img,
.video-card-trigger picture,
.video-card-trigger video,
.video-card-trigger iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

.video-card-play {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    background: var(--color-accent);
    color: var(--color-white);
    transform: translate(-50%, -50%);
    transition: transform 0.5s var(--ease-out), box-shadow 0.5s;
}

.video-card-play .icon {
    width: 1.6rem;
    height: 1.6rem;
}

.video-card-trigger:hover .video-card-play {
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: 0 0 0 14px rgba(0, 61, 255, 0.25);
}

.video-card-trigger.is-playing .video-card-play {
    display: none;
}

.video-card-title {
    margin-top: 0.9rem;
    font-weight: 600;
}

/* FAQ */

.faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}

.faq-heading {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
}

.faq-contact {
    margin: 0;
    color: var(--color-muted-light);
}

.faq-contact a {
    color: var(--color-accent);
    font-weight: 700;
}

.faq-item {
    border-bottom: 1px solid var(--color-line-light);
}

.faq-item:first-child {
    border-top: 2px solid var(--color-black);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.4rem 0;
    cursor: pointer;
    list-style: none;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question h3 {
    margin: 0;
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    font-weight: 700;
    line-height: 1.35;
}

.faq-toggle {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid var(--color-black);
    transition: transform 0.45s var(--ease-out), background 0.3s, color 0.3s, border-color 0.3s;
}

.faq-item[open] .faq-toggle {
    transform: rotate(45deg);
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
}

.faq-answer {
    padding: 0 3.5rem 1.6rem 0;
    color: #2b2b33;
}

/* Vergelijking */

.comparison-table-wrapper {
    overflow-x: auto;
}

.comparison-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
    padding: 1.1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--color-line-light);
    vertical-align: top;
}

.comparison-table thead th {
    font-family: var(--font-display);
    font-stretch: var(--display-stretch);
    font-weight: 900;
    font-size: 1.5rem;
    text-transform: uppercase;
    border-bottom: 2px solid var(--color-black);
}

.comparison-table thead th:last-child {
    background: var(--color-accent);
    color: var(--color-white);
}

.comparison-table tbody th {
    font-weight: 700;
    width: 26%;
}

.comparison-conclusion {
    margin-top: 2.5rem;
}

/* Onderliggende pagina's */

.children-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--color-line-dark);
}

.child-link {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.2fr) auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--color-line-dark);
    text-decoration: none;
    transition: padding 0.5s var(--ease-out), color 0.3s;
}

.child-link:hover {
    padding-left: 1rem;
    color: var(--color-accent-bright);
}

.child-link-number {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-accent-bright);
}

.child-link-title {
    font-size: clamp(1.6rem, 3vw, 2.6rem);
}

.child-link-text {
    color: var(--color-muted-dark);
    font-size: 0.9375rem;
}

.child-link .icon {
    width: 1.6rem;
    height: 1.6rem;
}

/* Regio */

.region-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
}

.region-total {
    margin: 0 0 1.5rem;
    font-size: 1.1rem;
}

.region-total span {
    font-family: var(--font-display);
    font-stretch: var(--display-stretch);
    font-weight: 900;
    font-size: 4rem;
    color: var(--color-accent-bright);
    line-height: 1;
    margin-right: 0.3rem;
}

.region-city-list,
.region-venue-list {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 2rem;
}

.region-city-list li,
.region-venue-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--color-line-dark);
    break-inside: avoid;
}

.region-city-list li span {
    margin-left: auto;
    color: var(--color-muted-dark);
    font-size: 0.875rem;
}

.region-venue-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
}

.region-venue-list li span {
    font-size: 0.8125rem;
    color: var(--color-muted-dark);
}

.region-subtitle {
    margin: 0 0 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.875rem;
}

/* Riders */

.riders-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rider-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    background: var(--color-white);
    border-top: 4px solid var(--color-black);
}

.rider-card-audience {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.rider-card-title {
    font-size: 2rem;
}

.rider-card-intro {
    margin: 0;
    color: var(--color-muted-light);
}

.rider-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-top: auto;
}

.rider-card-version {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-muted-light);
}

/* Citaat */

.quote-text {
    margin: 0;
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    line-height: 1;
}

.quote-author {
    margin-top: 1.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.875rem;
}

/* Oproep */

.cta-block {
    overflow: hidden;
    background: var(--color-accent);
    color: var(--color-white);
    isolation: isolate;
}

.cta-media {
    position: absolute;
    inset: -12% 0;
    z-index: -2;
}

.cta-media picture,
.cta-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta-block.has-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(0, 31, 140, 0.92), rgba(0, 61, 255, 0.55));
}

.cta-title {
    font-size: var(--size-title);
    max-width: 16ch;
}

.cta-text {
    max-width: 38rem;
    margin: 1.5rem 0 0;
    font-size: var(--size-lead);
    line-height: 1.45;
}

/* Aanvraagformulier */

.inquiry-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
}

.inquiry-intro {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
}

.inquiry-promises {
    margin: 2rem 0;
    padding: 0;
    list-style: none;
}

.inquiry-promises li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--color-line-light);
    font-weight: 600;
}

.inquiry-promises .icon {
    color: var(--color-accent);
    stroke-width: 3;
}

.inquiry-direct {
    margin: 0;
    color: var(--color-muted-light);
}

.inquiry-direct a {
    color: var(--color-accent);
    font-weight: 700;
}

.inquiry-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: clamp(1.75rem, 4vw, 3.25rem);
    background: var(--color-white);
    border-top: 4px solid var(--color-accent);
}

.form-step {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-step-title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0;
    margin-bottom: 0.5rem;
    font-family: var(--font-display);
    font-stretch: var(--display-stretch);
    font-weight: 900;
    font-size: 1.75rem;
    text-transform: uppercase;
    line-height: 1;
}

.form-step-title span {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    background: var(--color-black);
    color: var(--color-white);
    font-size: 1.1rem;
}

.form-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.form-choice {
    position: relative;
}

.form-choice input {
    position: absolute;
    opacity: 0;
    inset: 0;
}

.form-choice span {
    display: block;
    padding: 0.7rem 1.1rem;
    border: 2px solid var(--color-line-light);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.form-choice input:hover + span {
    border-color: var(--color-black);
}

.form-choice input:checked + span {
    background: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-white);
}

.form-choice input:focus-visible + span {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.form-row {
    display: grid;
    gap: 1.25rem;
}

.form-row-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-row-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-field label {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.8rem 0.95rem;
    background: var(--color-paper);
    border: 2px solid transparent;
    border-bottom-color: var(--color-line-light);
    border-radius: 0;
    color: var(--color-black);
    transition: border-color 0.2s, background 0.2s;
    appearance: none;
}

.form-field select {
    background-image: linear-gradient(45deg, transparent 50%, var(--color-black) 50%), linear-gradient(135deg, var(--color-black) 50%, transparent 50%);
    background-position: calc(100% - 1.25rem) 55%, calc(100% - 0.9rem) 55%;
    background-size: 0.35rem 0.35rem;
    background-repeat: no-repeat;
    padding-right: 2.5rem;
}

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

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    background: var(--color-white);
    border-color: var(--color-accent);
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea,
.form-choices.has-error .form-choice span {
    border-color: var(--color-error);
}

.form-error {
    font-size: 0.8125rem;
    color: #c41e1e;
    font-weight: 600;
}

.form-consent {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.form-consent input {
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.1rem;
    accent-color: var(--color-accent);
}

.form-consent a {
    color: var(--color-accent);
}

.form-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-feedback:empty {
    display: none;
}

.form-feedback {
    padding: 0.9rem 1.1rem;
    background: #fff1f1;
    border-left: 4px solid var(--color-error);
    font-weight: 600;
    font-size: 0.9375rem;
}

.form-submit {
    align-self: flex-start;
}

.form-submit[disabled] {
    opacity: 0.6;
    pointer-events: none;
}

.inquiry-success {
    grid-column: 2;
    padding: clamp(2rem, 5vw, 4rem);
    background: var(--color-black);
    color: var(--color-white);
    outline: none;
}

.inquiry-success .equalizer {
    margin-bottom: 2rem;
    color: var(--color-white);
}

.inquiry-success .section-title {
    font-size: clamp(2.2rem, 4.5vw, 4rem);
}

.inquiry-success-spam {
    color: var(--color-muted-dark);
    font-size: 0.9375rem;
}

/* Nieuws */

.news-card a {
    display: block;
    text-decoration: none;
}

.news-card-media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-ink-soft);
}

.news-card-media img,
.news-card-media picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease-out);
}

.news-card a:hover img {
    transform: scale(1.05);
}

.news-card-date {
    display: block;
    margin-top: 1rem;
    font-size: 0.8125rem;
    color: var(--color-muted-dark);
}

.news-card-title {
    margin-top: 0.5rem;
    font-size: 1.75rem;
}

.news-card-excerpt {
    margin: 0.75rem 0 0;
    color: var(--color-muted-dark);
}

/* Artiestpagina */

.artist-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
}

.artist-hero-media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--color-ink-soft);
}

.artist-hero-media picture,
.artist-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artist-duo {
    margin-top: 3rem;
    padding: 2rem;
    background: var(--color-white);
    border-left: 4px solid var(--color-accent);
}

.artist-duo h3 {
    margin-top: 0;
}

/* Footer */

.site-footer {
    position: relative;
    background: var(--color-black);
    color: var(--color-white);
    overflow: hidden;
}

.footer-cta {
    position: relative;
    padding: clamp(5rem, 10vw, 9rem) 0 clamp(4rem, 8vw, 7rem);
    border-top: 1px solid var(--color-line-dark);
}

.footer-cta-title {
    max-width: 16ch;
    font-size: clamp(3rem, 8.5vw, 8.5rem);
}

.footer-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 2.5rem;
    margin-top: clamp(2rem, 4vw, 3rem);
}

.footer-cta-mail {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--color-accent);
}

.equalizer-footer {
    position: absolute;
    right: var(--gutter);
    bottom: 0;
    font-size: clamp(1.2rem, 3vw, 2.6rem);
    height: 6em;
    color: rgba(255, 255, 255, 0.92);
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 4rem);
    padding-block: clamp(3.5rem, 6vw, 5rem);
    border-top: 1px solid var(--color-line-dark);
}

.footer-logo {
    display: inline-flex;
    flex-direction: column;
    gap: 0.9rem;
    color: var(--color-white);
}

.footer-logo .logo-mark {
    width: 64px;
}

.footer-logo .logo-wordmark {
    width: 160px;
}

.footer-tagline {
    max-width: 24rem;
    margin: 1.5rem 0;
    color: var(--color-muted-dark);
}

.footer-contact,
.footer-socials,
.footer-column ul,
.footer-legal {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-contact li a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0;
    text-decoration: none;
}

.footer-contact .icon {
    color: var(--color-accent-bright);
}

.footer-socials {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.5rem;
}

.footer-socials a {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--color-line-dark);
    transition: background 0.3s, border-color 0.3s;
}

.footer-socials a:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.footer-heading {
    margin: 0 0 1.1rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted-dark);
}

.footer-column li a {
    display: inline-block;
    padding: 0.3rem 0;
    text-decoration: none;
    transition: color 0.2s, transform 0.4s var(--ease-out);
}

.footer-column li a:hover {
    color: var(--color-accent-bright);
    transform: translateX(4px);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding-block: 1.75rem 2.25rem;
    border-top: 1px solid var(--color-line-dark);
    font-size: 0.8125rem;
    color: var(--color-muted-dark);
}

.footer-bottom p {
    margin: 0;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.footer-legal a,
.footer-legal button {
    color: inherit;
    text-decoration: none;
}

.footer-legal a:hover,
.footer-legal button:hover,
.footer-credit a:hover {
    color: var(--color-white);
}

.footer-credit a {
    color: inherit;
}

/* Popup en cookies */

.site-popup {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.site-popup[hidden] {
    display: none;
}

.site-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 7, 0.78);
}

.site-popup-dialog {
    position: relative;
    width: min(560px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--color-white);
    color: var(--color-black);
    border-top: 4px solid var(--color-accent);
}

.site-popup-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: var(--color-black);
    color: var(--color-white);
    border: 0;
}

.site-popup-media img,
.site-popup-media picture {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.site-popup-body {
    padding: 2rem;
}

.site-popup-title {
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-stretch: var(--display-stretch);
    font-weight: 900;
    font-size: 2.25rem;
    line-height: 0.95;
    text-transform: uppercase;
}

.site-popup-body .button {
    margin-top: 1.5rem;
}

.cookie-banner {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 130;
    width: min(440px, calc(100% - 2rem));
    padding: 1.4rem;
    background: var(--color-ink);
    border: 1px solid var(--color-line-dark);
    font-size: 0.9375rem;
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner p {
    margin: 0 0 1rem;
}

.cookie-banner a {
    color: var(--color-accent-bright);
}

.cookie-banner-actions {
    display: flex;
    gap: 0.75rem;
}

.sticky-cta {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 80;
    display: none;
    padding: 1rem;
    background: var(--color-accent);
    color: var(--color-white);
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transform: translateY(150%);
    transition: transform 0.5s var(--ease-out);
}

.sticky-cta.is-visible {
    transform: none;
}

/* Foutpagina */

.error-main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--gutter);
    max-width: 900px;
    margin-inline: auto;
}

.error-reference {
    color: var(--color-muted-dark);
    font-size: 0.875rem;
}

/* Voorstel, review en rider (publieke detailpagina's) */

.document-page {
    padding: calc(var(--header-height) + 3rem) 0 var(--space-section);
    background: var(--color-paper);
    color: var(--color-black);
    --section-muted: var(--color-muted-light);
    --section-line: var(--color-line-light);
    --section-link: var(--color-accent);
}

.document-header {
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
    border-bottom: 2px solid var(--color-black);
}

.document-header .hero-title {
    font-size: clamp(2.6rem, 6.5vw, 6rem);
    max-width: none;
}

.document-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    margin-top: 1.5rem;
    font-weight: 600;
}

.document-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.document-meta .icon {
    color: var(--color-accent);
}

.notice {
    padding: 1rem 1.25rem;
    background: var(--color-white);
    border-left: 4px solid var(--color-accent);
    margin-bottom: 2rem;
}

.notice-warning {
    border-left-color: #ff9c00;
}

.notice-error {
    border-left-color: var(--color-error);
}

.notice-success {
    border-left-color: var(--color-success);
}

.proposal-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin: 2.5rem 0;
}

.proposal-option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 2rem 1.75rem;
    background: var(--color-white);
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.3s, transform 0.5s var(--ease-out), box-shadow 0.5s;
}

.proposal-option:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(5, 5, 7, 0.08);
}

.proposal-option input {
    position: absolute;
    opacity: 0;
}

.proposal-option:has(input:checked) {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(0, 61, 255, 0.12);
}

.proposal-option:has(input:focus-visible) {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

.proposal-option-recommended {
    position: absolute;
    top: -0.85rem;
    left: 1.75rem;
    padding: 0.25rem 0.7rem;
    background: var(--color-accent);
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.proposal-option-name {
    font-family: var(--font-display);
    font-stretch: var(--display-stretch);
    font-weight: 900;
    font-size: 2.1rem;
    line-height: 0.95;
    text-transform: uppercase;
}

.proposal-option-duration {
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.proposal-option-price {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--color-line-light);
    font-family: var(--font-display);
    font-stretch: var(--display-stretch);
    font-weight: 900;
    font-size: 2.4rem;
    line-height: 1;
}

.proposal-option-price small {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-muted-light);
}

.proposal-option-check {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 2px solid var(--color-line-light);
    color: transparent;
}

.proposal-option:has(input:checked) .proposal-option-check {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
}

.proposal-section {
    margin-top: 3.5rem;
}

.proposal-section > h2 {
    font-family: var(--font-display);
    font-stretch: var(--display-stretch);
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 0.95;
    text-transform: uppercase;
    margin: 0 0 1.5rem;
}

.proposal-summary {
    display: grid;
    gap: 0.5rem;
    padding: 1.5rem;
    background: var(--color-black);
    color: var(--color-white);
}

.proposal-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.proposal-summary-row.is-total {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-line-dark);
    font-weight: 700;
    font-size: 1.15rem;
}

.signature-pad {
    position: relative;
    background: var(--color-white);
    border: 2px dashed var(--color-line-light);
    touch-action: none;
}

.signature-pad canvas {
    display: block;
    width: 100%;
    height: 220px;
    cursor: crosshair;
}

.signature-pad-clear {
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
}

.signature-pad-hint {
    position: absolute;
    left: 1rem;
    bottom: 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-muted-light);
    pointer-events: none;
}

.terms-box {
    max-height: 22rem;
    overflow-y: auto;
    padding: 1.5rem;
    background: var(--color-white);
    border: 1px solid var(--color-line-light);
    font-size: 0.9375rem;
}

.rating-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0.35rem;
}

.rating-input input {
    position: absolute;
    opacity: 0;
}

.rating-input label {
    color: #c8c8cf;
    cursor: pointer;
    transition: color 0.2s, transform 0.3s var(--ease-out);
}

.rating-input label .icon {
    width: 2.4rem;
    height: 2.4rem;
}

.rating-input input:checked ~ label,
.rating-input label:hover,
.rating-input label:hover ~ label {
    color: var(--color-accent);
}

.rating-input label:hover {
    transform: scale(1.12);
}

/* Rider online */

.rider-document {
    background: var(--color-white);
    color: var(--color-black);
}

.rider-section {
    display: grid;
    grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    padding-block: clamp(2.5rem, 5vw, 4rem);
    border-top: 2px solid var(--color-black);
}

.rider-section-heading {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.rider-section-number {
    font-family: var(--font-display);
    font-stretch: var(--display-stretch);
    font-weight: 900;
    font-size: 1.2rem;
    color: var(--color-accent);
}

.rider-section-title {
    margin: 0;
    font-family: var(--font-display);
    font-stretch: var(--display-stretch);
    font-weight: 900;
    font-size: clamp(1.9rem, 3.5vw, 3rem);
    line-height: 0.95;
    text-transform: uppercase;
}

.rider-items {
    margin: 0;
}

.rider-item {
    display: grid;
    grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
    gap: 1.5rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-line-light);
}

.rider-item dt {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rider-item dd {
    margin: 0;
}

.rider-item dd p {
    margin: 0 0 0.4rem;
}

.rider-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.rider-images img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--color-paper);
}

.rider-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

/* Animatie-startwaarden (alleen met JavaScript) */

.js [data-reveal],
.js [data-reveal-image] {
    opacity: 0;
}

.js .is-ready [data-reveal],
.js .is-ready [data-reveal-image] {
    opacity: 1;
}

.split-line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.06em;
    margin-bottom: -0.06em;
}

.split-word {
    display: inline-block;
    will-change: transform;
}

/* Responsief */

@media (max-width: 1380px) {
    .main-navigation,
    .header-cta {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .language-switch {
        display: none;
    }
}

@media (max-width: 1180px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 980px) {
    :root {
        --header-height: 72px;
    }

    .intro-grid.has-image,
    .text-media-grid,
    .faq-grid,
    .inquiry-grid,
    .region-grid,
    .artist-hero-grid,
    .rider-section {
        grid-template-columns: minmax(0, 1fr);
    }

    .text-media-grid.media-left .text-media-visual {
        order: 0;
    }

    .faq-heading,
    .inquiry-intro {
        position: static;
    }

    .inquiry-success {
        grid-column: 1;
    }

    .services-grid,
    .services-count-2,
    .services-count-4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .service-card {
        min-height: 24rem;
    }

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

    .video-card.is-featured {
        grid-column: auto;
        grid-row: auto;
    }

    .child-link {
        grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    }

    .child-link-text {
        display: none;
    }

    .hero-trust {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .text-media-frame,
    .media-left .text-media-frame {
        inset: 1rem -0.75rem -0.75rem 1rem;
    }

    .sticky-cta {
        display: block;
    }
}

@media (max-width: 680px) {
    .site-logo .logo-wordmark {
        width: 108px;
    }

    .site-logo .logo-mark {
        width: 38px;
    }

    .form-row-2,
    .form-row-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 160px;
    }

    .gallery-item,
    .gallery-item-1,
    .gallery-item-2,
    .gallery-item-3,
    .gallery-item-5,
    .gallery-item-6 {
        grid-column: span 1;
        grid-row: span 1;
    }

    .gallery-item-0,
    .gallery-item-3 {
        grid-column: span 2;
        grid-row: span 2;
    }

    .region-city-list,
    .region-venue-list {
        columns: 1;
    }

    .format-card,
    .format-card + .format-card {
        padding-left: 0;
        border-left: 0;
    }

    .rider-item {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.35rem;
    }

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

    .footer-bottom {
        padding-bottom: 6rem;
    }

    .equalizer-footer {
        opacity: 0.35;
    }

    .slider-slide {
        flex-basis: 82vw;
    }
}

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

    .js [data-reveal],
    .js [data-reveal-image] {
        opacity: 1;
    }
}

@media print {
    .site-header,
    .site-footer,
    .sticky-cta,
    .page-transition,
    .mobile-menu,
    .rider-toolbar,
    .cookie-banner {
        display: none !important;
    }

    body,
    .document-page {
        background: #fff;
        color: #000;
        padding-top: 0;
    }
}

/* Lettertypekeuze uit het portaal */

.fonts-display-semi { --display-stretch: 85%; }
.fonts-display-wide { --display-stretch: 100%; }
.fonts-body-archivo { --font-body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* Juridische teksten */

.legal-text .rich-text h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 2.5rem 0 0.75rem; }
.legal-text .rich-text h3 { font-size: 1.2rem; margin: 1.75rem 0 0.5rem; }
.legal-version { margin-top: 2.5rem; font-size: 0.875rem; opacity: 0.7; }

/* Lichte pagina's (voorstel, review, rider): de header krijgt altijd een donkere achtergrond */

body.page-proposal .site-header,
body.page-review .site-header,
body.page-rider .site-header {
    background: var(--color-ink);
    border-bottom-color: var(--color-line-dark);
}

.header-cta { white-space: nowrap; }
@media (max-width: 1560px) {
    .header-cta { display: none; }
}

.page-rider .hero-title,
.page-proposal .hero-title {
    font-size: clamp(2.6rem, min(6.5vw, 11vh), 6.5rem);
    max-width: 22ch;
}