:root {
    --color-ink: #2a1b38;
    --color-paper: #fbf5f6;
    --color-paper-text: #34243f;
    --color-cream: #fbf5f6;
    --color-muted: #8b7a92;
    --color-accent: #76517b;
    --color-accent-dark: #5a3f60;
    --color-error: #b3455f;

    --tile-1: #ecdfeb;
    --tile-2: #76517b;

    --font-display: "Figtree", sans-serif;
    --font-body: "Figtree", sans-serif;

    --space-section: clamp(3rem, 6vw, 5rem);

    /* Header-achtergrond: hoe sterk de foto doorkomt, hoeveel kleur eruit
       gehaald wordt (1 = volledig monochroom), en hoeveel hij opgelicht en
       afgevlakt wordt om van de donkere studiofoto een lichte versie te maken
       die op het papier past. */
    --hero-bg-opacity: 0.5;
    --hero-bg-grayscale: 1;
    --hero-bg-brightness: 2.4;
    --hero-bg-contrast: 0.55;
}

* {
    box-sizing: border-box;
}

/* Nodig omdat .contact__form display:flex zet: zonder deze regel heeft het
   hidden-attribuut geen effect op het formulier. */
[hidden] {
    display: none !important;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    background: var(--color-paper);
    color: var(--color-paper-text);
    line-height: 1.6;
}

/* Header-achtergrond. achtergrond2.png plakt tegen de bovenkant van de pagina
   en scrollt gewoon mee uit beeld, net als het logo: absolute in plaats van
   fixed, zodat hij niet in de viewport blijft hangen. aspect-ratio houdt de
   banner op de verhouding van de foto (1511 x 341), zodat er bij elke
   schermbreedte precies de hele foto in beeld valt in plaats van een
   uitvergrote uitsnede.

   grayscale + brightness + contrast maken er een lichte, monochrome versie
   van: opgelicht en afgevlakt in plaats van omgekeerd, zodat de microfoon een
   microfoon blijft en geen fotonegatief wordt. scaleX(-1) spiegelt de foto in
   de breedte, zodat de microfoon links komt te staan en niet achter het logo
   rechtsboven verdwijnt. Het masker laat de banner onderin uitvloeien in het
   papier. Het filter kan niet op een sectie zelf staan, want dan gaat de tekst
   er ook doorheen. z-index: -1 zet de laag achter de inhoud; daarom heeft
   alleen de header geen eigen achtergrondkleur en schuiven de secties eronder
   de banner dicht. */
body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    aspect-ratio: 1511 / 341;
    z-index: -1;
    pointer-events: none;
    background: url("/images/achtergrond2.png") top center / cover no-repeat;
    transform: scaleX(-1);
    filter: grayscale(var(--hero-bg-grayscale)) brightness(var(--hero-bg-brightness)) contrast(var(--hero-bg-contrast));
    opacity: var(--hero-bg-opacity);
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
    mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    margin: 0;
}

/* absolute in plaats van fixed: het logo blijft op zijn plek bovenaan de
   pagina staan en scrollt gewoon mee uit beeld in plaats van in de viewport
   te blijven hangen. */
.site-logo {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 128px;
    height: 128px;
    z-index: 50;
    filter: drop-shadow(0 2px 10px rgba(42, 27, 56, 0.25));
}

@media (min-width: 768px) {
    .site-logo {
        top: 1.5rem;
        right: 1.5rem;
        width: 168px;
        height: 168px;
    }
}

.section {
    padding: var(--space-section) 1.5rem;
}

/* Hero */

/* De ruimte onder de openingsquote kwam vooral uit de vrije hoogte die
   min-height overhield: de quote staat verticaal gecentreerd, dus die ruimte
   viel voor de helft onder de tekst. min-height van 60vh naar 45vh halveert
   die afstand tot de demo's.

   De padding bovenin houdt de tekst onder de banner. Die is 22,6vw hoog (de
   verhouding 1511 x 341 van de foto), dus 23vw schaalt daarmee mee: op elke
   schermbreedte begint de tekst net onder de microfoon in plaats van
   erdoorheen te lopen. Op smalle schermen is de banner lager dan de gewone
   sectiepadding, vandaar de max(). */
.section--hero {
    color: var(--color-ink);
    display: flex;
    align-items: center;
    min-height: 45vh;
    padding-top: max(var(--space-section), 23vw);
}

.hero__content {
    max-width: 640px;
    margin: 0 auto;
}

.eyebrow {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 0.5rem;
}

.hero__title {
    font-weight: 500;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: 1.5rem;
}

.hero__content p {
    max-width: 48ch;
}

.hero__quote {
    font-style: italic;
    font-size: clamp(1.5rem, 4vw, 2.75rem);
    line-height: 1.3;
    margin: 0 0 1.5rem;
}

/* Voice demos */

.section--demos {
    background: var(--color-paper);
}

.demos__panel {
    background: var(--color-ink);
    color: var(--color-cream);
    border-radius: 24px;
    padding: clamp(1.5rem, 4vw, 3rem);
    max-width: 1100px;
    margin: 0 auto;
}

.demos__panel h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin-bottom: 0.5rem;
}

.section__lead {
    color: var(--color-muted);
    margin: 0 0 1.5rem;
}

.demos__grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.demo-tile {
    position: relative;
    text-align: left;
    border: none;
    border-radius: 16px;
    padding: 1.5rem;
    cursor: pointer;
    color: var(--color-ink);
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 120px;
    font-family: var(--font-body);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.demo-tile:nth-of-type(odd) { background: var(--tile-1); }
.demo-tile:nth-of-type(even) { background: var(--tile-2); color: var(--color-cream); }

.demo-tile:hover {
    transform: translateY(-4px);
}

.demo-tile.is-active {
    box-shadow: 0 0 0 2px var(--color-accent);
}

.demo-tile__control {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 18%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.demo-tile:hover .demo-tile__control {
    background: color-mix(in srgb, currentColor 30%, transparent);
}

.demo-tile__icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent currentColor;
    margin-left: 3px;
}

.demo-tile.is-playing .demo-tile__icon {
    width: 12px;
    height: 14px;
    border-style: double;
    border-width: 0 0 0 12px;
    margin-left: 0;
}

.demo-tile__body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.demo-tile__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.15rem;
}

.demo-tile__desc {
    font-size: 0.85rem;
    opacity: 0.85;
}

/* About */

.section--about {
    background: var(--color-paper);
    color: var(--color-paper-text);
}

.about__grid {
    display: grid;
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .about__grid {
        grid-template-columns: minmax(240px, 320px) 1fr;
        align-items: start;
    }
}

.about__photo {
    display: block;
    width: 100%;
    /* Geen vaste aspect-ratio: de foto bepaalt zelf de hoogte van het blok. */
    height: auto;
    border-radius: 16px;
}

@media (min-width: 768px) {
    .about__photo {
        position: sticky;
        top: 3rem;
    }
}

.about__content h2 {
    color: var(--color-ink);
    margin-bottom: 1rem;
}

.about__content h3 {
    font-size: 1.35rem;
    margin: 2rem 0 0.5rem;
    color: var(--color-accent);
}

.about__content p {
    color: var(--color-paper-text);
    max-width: 60ch;
    margin: 0 0 1rem;
}

.button {
    display: inline-block;
    text-decoration: none;
    border-radius: 999px;
    padding: 0.75rem 1.75rem;
    font-family: var(--font-body);
    font-weight: 500;
}

.button--ghost {
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    margin-top: 1rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.button--ghost:hover {
    background: var(--color-accent);
    color: var(--color-cream);
}

/* Certificering */

/* Smalle strook tussen de about-tekst en het formulier. Geen eigen verticale
   sectiepadding: de about-sectie en het contactblok brengen die ruimte al mee,
   dus de badge zou er anders eenzaam in het midden hangen. De lijn erboven
   maakt er een afsluiting van het verhaal van in plaats van een los plaatje.

   Het keurmerk heeft zijn eigen blauwe huisstijl, dus hij staat rechtstreeks op
   het papier: in een gekleurd kaartje gaat hij vloeken met het paars. */
.section--certified {
    background: var(--color-paper);
    padding-top: 0;
    padding-bottom: 0;
}

.certified__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 2.5rem) 0;
    border-top: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.certified__badge {
    display: block;
    width: clamp(170px, 24vw, 240px);
    height: auto;
}

.certified__text {
    margin: 0;
    max-width: 48ch;
    font-size: 0.9rem;
    color: var(--color-muted);
}

/* Contact */

.section--contact {
    background: var(--color-paper);
}

.contact__inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.contact__heading {
    color: var(--color-ink);
    font-style: italic;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    margin-bottom: 1.75rem;
}

.contact__form {
    background: var(--color-ink);
    color: var(--color-cream);
    border-radius: 24px;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

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

.field label {
    font-size: 0.85rem;
    color: var(--color-muted);
}

.field input,
.field textarea {
    background: var(--color-cream);
    color: var(--color-paper-text);
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    resize: vertical;
}

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

.field__error,
.contact__error {
    color: var(--color-error);
    font-size: 0.85rem;
}

.button--accent {
    background: var(--color-accent);
    color: var(--color-cream);
    border: none;
    align-self: flex-start;
    cursor: pointer;
    transition: background 0.2s ease;
}

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

.contact__success {
    font-size: 1.15rem;
    color: var(--color-ink);
}

.contact__success:focus {
    outline: none;
}

.button--accent:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Footer */

/* Zelfde opzet als de certificeringsstrook: geen eigen achtergrondkleur maar
   een lijn erboven, zodat de footer de pagina afsluit zonder een derde donker
   blok direct onder het contactformulier te zetten. Op smalle schermen staan
   de regel en de links onder elkaar en gecentreerd; vanaf 640px ernaast. */
.site-footer {
    background: var(--color-paper);
    padding: 0 1.5rem var(--space-section);
}

.site-footer__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding-top: clamp(1.5rem, 4vw, 2.5rem);
    border-top: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    font-size: 0.9rem;
}

@media (min-width: 640px) {
    .site-footer__inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.site-footer__copy {
    margin: 0;
    color: var(--color-muted);
}

/* column-gap groter dan row-gap: naast elkaar hebben de twee links lucht
   nodig, onder elkaar (smalle schermen) juist niet. */
.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
}

.site-footer__links a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer__links a:hover {
    color: var(--color-accent-dark);
    text-decoration: underline;
}

/* Juridische pagina's */

/* Losse tekstpagina's (algemene voorwaarden, privacyverklaring). De hero-opzet
   levert de kop, dit blok de leestekst: een smalle kolom onder de banner, met
   dezelfde marges als de about-tekst zodat het geen andere site lijkt. */
.section--legal {
    background: var(--color-paper);
    color: var(--color-paper-text);
    padding-top: 0;
}

/* .hero__content is een flex-item en krimpt dus mee met zijn inhoud. Op de
   homepage valt dat niet op (de quote vult de 640px), maar een korte kop als
   "Privacyverklaring" zou daardoor gecentreerd boven de linksuitgelijnde
   leestekst komen te staan. width: 100% houdt het blok op de volle maat. */
.hero__content--legal {
    width: 100%;
}

/* Dezelfde 640px als .hero__content: zo staan de kop bovenaan en de leestekst
   eronder op precies dezelfde linkermarge in plaats van een stukje verschoven. */
.legal__inner {
    max-width: 640px;
    margin: 0 auto;
}

/* Regel met de laatste wijzigingsdatum, boven de artikelen. */
.legal__updated {
    color: var(--color-muted);
    font-size: 0.9rem;
}

.legal__inner h2 {
    color: var(--color-accent);
    font-size: 1.35rem;
    margin: 2rem 0 0.5rem;
}

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

/* Tussenkopje binnen een artikel (bijvoorbeeld "Contactgegevens" onder
   artikel 1): kleiner en in de tekstkleur, zodat het geen artikelkop lijkt. */
.legal__inner h3 {
    font-size: 1.05rem;
    margin: 1.5rem 0 0.5rem;
}

.legal__inner p {
    margin: 0 0 1rem;
}

/* Krappere marge dan tussen alinea's: de opsommingen in de voorwaarden zijn
   lijstjes van korte regels, die vallen bij 1rem uit elkaar. */
.legal__inner li {
    margin: 0 0 0.4rem;
}

.legal__inner ul,
.legal__inner ol {
    padding-left: 1.25rem;
}

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