/* ==========================================================================
   Oswald, zelf gehost in plaats van via Google Fonts. Scheelt een verzoek
   naar Google en daarmee het doorgeven van bezoekers-IP's aan een derde.
   Licentie: SIL Open Font License 1.1, zelf hosten is toegestaan.
   ========================================================================== */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    /* variabel lettertype: één bestand dekt het hele bereik 300-500 */
    font-weight: 300 500;
    font-display: swap;
    src: url('../assets/fonts/oswald-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Oswald';
    font-style: normal;
    /* variabel lettertype: één bestand dekt het hele bereik 300-500 */
    font-weight: 300 500;
    font-display: swap;
    src: url('../assets/fonts/oswald-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Oswald', 'Helvetica Neue Condensed', 'Arial Narrow', Arial, sans-serif;
    line-height: 1.6;
    color: #fff;
    background: #1A1A1A;
}

/* Header */
.header {
    position: sticky;
    top: 0;
    background: #1a1a1a;
    color: white;
    padding: 16px 0;
    border-bottom: 1px solid #333;
    z-index: 1000;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    /* alles lijnt onderaan uit, op de onderkant van het logo */
    align-items: flex-end;
    gap: 32px;
}

.logo {
    flex-shrink: 0;
    display: block;
    line-height: 0;
    /* duwt alles hierna zo ver mogelijk naar rechts */
    margin-right: auto;
}

.logo img {
    height: 60px;
    width: auto;
    display: block;
}

/* Nav, contactgegevens en CTA samen op één regel, onderaan uitgelijnd */
.header-menu {
    display: flex;
    /* twee regels: contactgegevens boven, knoppen eronder */
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    min-width: 0;
}

/* Onderste regel: navigatie en CTA, onderaan uitgelijnd */
.header-actions {
    display: flex;
    align-items: flex-end;
    gap: 32px;
}

/* Navigation */
.nav {
    display: flex;
    align-items: flex-end;
    gap: 36px;
}

.nav a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.3s;
}

.nav a:hover {
    color: #C04A2B;
}

/* Contact Info */
.contact-info {
    display: flex;
    /* telefoonnummer en e-mailadres naast elkaar op de bovenste regel */
    gap: 28px;
    flex-shrink: 0;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 1px;
}

.contact-info a {
    color: #8C8C8C;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.3s;
}

.contact-info a:hover {
    color: #fff;
}

/* Contact Button */
.contact-btn {
    font-family: inherit;
    /* is een <a href="#contact">, dus expliciet blokgedrag nodig */
    display: inline-block;
    text-decoration: none;
    text-align: center;
    background: #B4462B;
    color: white;
    border: none;
    border-radius: 0;
    padding: 14px 32px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.3s;
    flex-shrink: 0;
}

.contact-btn:hover {
    background: #8B3320;
}

/* Hamburger — alleen zichtbaar onder de desktop-breakpoint */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.nav-toggle-bar {
    display: block;
    width: 26px;
    height: 2px;
    background: #fff;
    transition: transform 0.3s, opacity 0.3s;
}

body.menu-open .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

body.menu-open .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

body.menu-open .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* De onderste rij (logo + nav + CTA) heeft 800px nodig; onder 900px
   inklappen achter de hamburger. */
@media (max-width: 899px) {
    .header-container {
        align-items: center;
        padding: 0 24px;
        gap: 16px;
    }

    .logo img {
        height: 44px;
    }

    .nav-toggle {
        display: flex;
    }

    .header-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 24px 24px;
        background: #1a1a1a;
        border-bottom: 1px solid #333;
    }

    body.menu-open .header-menu {
        display: flex;
    }

    .nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav a {
        padding: 16px 0;
        border-bottom: 1px solid #2e2e2e;
    }

    /* De wikkel opheffen zodat nav, gegevens en CTA los in het
       uitklapmenu staan en apart geordend kunnen worden. */
    .header-actions {
        display: contents;
    }

    .nav {
        order: 1;
    }

    .contact-info {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 20px 0;
        line-height: 1.4;
        font-size: 14px;
        text-align: left;
        order: 2;
    }

    .contact-btn {
        order: 3;
    }

    .contact-btn {
        width: 100%;
        padding: 16px 24px;
    }
}

/* Hero Section */
.hero {
    position: relative;
    background-image: url('../assets/images/hero-cattle.jpg');
    background-size: cover;
    background-position: center 40%;
    background-color: #2a2a2a; /* zichtbaar zolang de foto laadt */
    color: white;
    min-height: 620px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

/* Donkere sluier linksonder, zodat de tekst leesbaar blijft
   en de stier rechts in beeld vrij blijft. */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0) 70%),
        linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 55%);
}

.hero-content {
    position: relative;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    /* laag genoeg zodat de twee koeien links vrij boven de kop blijven */
    padding: 0 40px 56px;
    text-align: left;
}

.hero-content h2 {
    font-size: 60px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 2px;
    text-transform: uppercase;
    max-width: 15ch;
    margin-bottom: 20px;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

.hero-content p {
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.92;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
    .hero {
        min-height: 460px;
        /* smalle uitsnede: naar rechts opschuiven zodat de stier
           compleet in beeld blijft in plaats van halverwege afgesneden */
        background-position: 78% 45%;
    }

    .hero-content {
        padding: 0 24px 56px;
    }

    .hero-content h2 {
        font-size: 36px;
    }

    .hero-content p {
        font-size: 15px;
        letter-spacing: 2px;
    }
}

/* De sticky header (102px op desktop) bedekt de bovenkant van een sectie
   bij het springen naar een anker. Deze marge zet de landing los van de
   padding, zodat witruimte aanpassen het scrollgedrag niet verandert.
   Gemeten resultaat: het sectielabel komt circa 35px onder de header uit. */
#about,
#products,
#brands,
#quality,
#contact {
    scroll-margin-top: 72px;
}

/* ==========================================================================
   About — zelfde achtergrond als de rest; secties worden gescheiden
   door haarlijnen, nummering en witruimte in plaats van kleurvlakken.
   ========================================================================== */
.about {
    background: #1A1A1A;
    color: #fff;
    padding: 64px 40px 96px;
}

.about-wrap {
    max-width: 1400px;
    margin: 0 auto;
}

.about-top {
    display: grid;
    /* beeldkolom iets ruimer en minder tussenruimte, zodat de foto verder
       naar links komt te staan */
    grid-template-columns: 1fr 1.5fr;
    gap: 32px;
    /* beeld volgt de hoogte van de tekstkolom, geen los zwevend blok */
    align-items: stretch;
}

.about-head h2 {
    /* meeschalend met de viewport in plaats van een vaste maat, en geen
       breedtelimiet: de kop mag de hele kolom benutten */
    font-size: clamp(28px, 3.1vw, 48px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.about-head p:not(.section-eyebrow) {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.65;
    color: #D8D4D0;
    /* ruimer dan eerst, maar niet de volle kolom: bij circa 90 tekens
       per regel wordt lopende tekst lastig te volgen */
    max-width: 68ch;
    margin-bottom: 14px;
}

/* Jarentelling als visueel anker */
.about-stat {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #2E2E2E;
}

.about-stat-figure {
    font-size: 52px;
    font-weight: 500;
    line-height: 1;
    color: #D97757;
}

.about-stat-label {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #B0AAA4;
}

.about-media {
    min-height: 420px;
    position: relative;
}

/* Randen laten oplossen in de achtergrond, zodat de foto niet als
   rechthoek op de pagina ligt. Werkt doordat de sectieachtergrond een
   egale #1A1A1A is: dezelfde kleur naar transparant toe. */
.about-media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to right,  #1A1A1A 0%, rgba(26, 26, 26, 0) 24%),
        linear-gradient(to left,   #1A1A1A 0%, rgba(26, 26, 26, 0) 26%),
        linear-gradient(to bottom, #1A1A1A 0%, rgba(26, 26, 26, 0) 20%),
        linear-gradient(to top,    #1A1A1A 0%, rgba(26, 26, 26, 0) 20%);
}

.about-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Drie pijlers onder de introductie */
/* Verticale lijn links, niet horizontaal erboven: een streep boven een
   gespatieerde kop leest als het begin van een nieuwe sectie, en dat zijn
   deze pijlers niet. Ook minder letterspatiëring dan een sectielabel. */
.products-arms li,
.quality-points li {
    border-left: 2px solid #B4462B;
    padding-left: 20px;
}

.products-arms h3,
.quality-points h3 {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 10px;
}

.products-arms p,
.quality-points p {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.65;
    color: #D8D4D0;
}

@media (max-width: 900px) {
    .about {
        padding: 36px 24px 48px;
    }

    .about-top {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Op mobiel eerst de tekst, dan het beeld */
    .about-media {
        min-height: 0; /* anders blijft de desktophoogte een gat achterlaten */
    }

    .about-media img {
        height: 240px;
    }

    .about-head h2 {
        letter-spacing: 0.5px;
    }
}

/* ==========================================================================
   Our products
   ========================================================================== */
.products {
    background: #1A1A1A;
    color: #fff;
    padding: 64px 40px 96px;
}

.products-wrap {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

.products-wrap::before {
    content: '';
    position: absolute;
    top: -64px;
    left: 0;
    right: 0;
    height: 1px;
    background: #2E2E2E;
}

.products h2 {
    font-size: clamp(28px, 3.1vw, 48px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.products-lead {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.65;
    color: #D8D4D0;
    max-width: 68ch;
}

.products-arms {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
    margin-top: 48px;
}

@media (max-width: 900px) {
    .products {
        padding: 36px 24px 48px;
    }

    .products-wrap::before {
        top: -36px;
    }

    .products-arms {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-top: 36px;
    }
}

/* ==========================================================================
   Brands
   ========================================================================== */
.brands {
    background: #1A1A1A;
    color: #fff;
    padding: 64px 40px 96px;
}

.brands-wrap {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

.brands-wrap::before {
    content: '';
    position: absolute;
    top: -64px;
    left: 0;
    right: 0;
    height: 1px;
    background: #2E2E2E;
}

.brands h2 {
    font-size: clamp(28px, 3.1vw, 48px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.brands-lead {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.65;
    color: #D8D4D0;
    max-width: 68ch;
}

.brand-list {
    list-style: none;
    margin-top: 36px;
}

/* Geen paginabrede lijn binnen de sectie: horizontale lijnen zijn
   voorbehouden aan sectiegrenzen. */
.brand {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 40px;
    align-items: start;
}

.brand + .brand {
    margin-top: 44px;
}

.brand-mark img {
    display: block;
    width: 100%;
    height: auto;
}

.brand-body h3 {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.brand-body p {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.65;
    color: #D8D4D0;
    max-width: 72ch;
}

.brand-link {
    margin-top: 12px;
    font-size: 14px;
    letter-spacing: 1px;
}

.brand-link a {
    color: #E8763F;
    text-decoration: none;
    border-bottom: 1px solid #6E6E6E;
}

.brand-link a:hover {
    color: #fff;
    border-bottom-color: #E8763F;
}

@media (max-width: 900px) {
    .brands {
        padding: 36px 24px 48px;
    }

    .brands-wrap::before {
        top: -36px;
    }

    .brand {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .brand-mark img {
        width: 120px;
    }
}

/* ==========================================================================
   Quality
   ========================================================================== */
.quality {
    background: #1A1A1A;
    color: #fff;
    padding: 64px 40px 96px;
}

.quality-wrap {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

.quality-wrap::before {
    content: '';
    position: absolute;
    top: -64px;
    left: 0;
    right: 0;
    height: 1px;
    background: #2E2E2E;
}

.quality h2 {
    font-size: clamp(28px, 3.1vw, 48px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.quality-lead {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.65;
    color: #D8D4D0;
    max-width: 68ch;
}

.quality-points {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    margin-top: 48px;
}

@media (max-width: 900px) {
    .quality {
        padding: 36px 24px 48px;
    }

    .quality-wrap::before {
        top: -36px;
    }

    .quality-points {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-top: 36px;
    }
}

/* ==========================================================================
   Contactblok — donker, in lijn met header en hero
   Contrast gecontroleerd (WCAG AA):
   wit op #1A1A1A 17.4:1 | eyebrow #D97757 5.6:1 | hint #B0AAA4 7.6:1
   veldrand #6E6E6E 3.4:1 (UI-norm 3:1) | placeholder #949494 op #242424 5.1:1
   fout #F08070 op #242424 5.9:1 | wit op knop #B4462B 5.5:1
   Let op: de merkkleur #B4462B haalt op #1A1A1A maar 3.2:1 en is dus
   ongeschikt voor tekst — alleen als knopvlak en als decoratief streepje.
   ========================================================================== */
.contact {
    background: #1A1A1A;
    color: #fff;
    padding: 64px 40px 96px;
}

/* Haarlijn markeert de overgang tussen twee secties van dezelfde kleur.
   Loopt op contentbreedte mee, niet van rand tot rand: de lijn zit precies
   op de sectiegrens doordat hij de bovenpadding van 96px overbrugt. */
.about-wrap,
.contact-inner {
    position: relative;
}

.contact-inner::before {
    content: '';
    position: absolute;
    top: -64px;
    left: 0;
    right: 0;
    height: 1px;
    background: #2E2E2E;
}

.contact-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 56px;
    align-items: start;
}

.section-eyebrow {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #E8763F;
}

.section-rule {
    display: block;
    width: 56px;
    height: 3px;
    background: #B4462B;
    margin: 14px 0 18px;
}

.contact-intro h2 {
    font-size: 40px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.contact-intro p:not(.section-eyebrow) {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.55;
    max-width: 40ch;
    color: #D8D4D0;
    margin-bottom: 24px;
}

.contact-details {
    font-size: 15px;
    line-height: 1.5;
}

.contact-details dt {
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 12px;
    color: #B0AAA4;
    margin-top: 14px;
}

.contact-details dd {
    margin: 4px 0 0 0;
}

.contact-details a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #6E6E6E;
}

.contact-details a:hover {
    color: #D97757;
    border-bottom-color: #D97757;
}

/* Formulier */
.form-legend {
    font-size: 13px;
    color: #B0AAA4;
    margin-bottom: 14px;
}

.req {
    color: #D97757;
}

/* Twee velden naast elkaar houdt het formulier compact */
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.field {
    margin-bottom: 14px;
}

.field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.field input,
.field textarea {
    font-family: inherit;
    font-size: 16px; /* < 16px laat iOS bij focus inzoomen */
    font-weight: 300;
    width: 100%;
    padding: 11px 14px;
    color: #fff;
    background: #242424;
    border: 1px solid #6E6E6E;
    border-radius: 0;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.field input::placeholder {
    color: #949494;
    opacity: 1;
}

.field textarea {
    resize: vertical;
    min-height: 104px;
    line-height: 1.5;
}

.field input:focus-visible,
.field textarea:focus-visible,
.form-submit:focus-visible {
    outline: none;
    border-color: #D97757;
    box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.4);
}

.form-submit:focus-visible {
    box-shadow: 0 0 0 3px #1A1A1A, 0 0 0 6px #D97757;
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
    border-color: #F08070;
    border-width: 2px;
}

.field-error {
    font-size: 13px;
    color: #F08070;
    margin-top: 5px;
    display: none;
}

.field-error.is-visible {
    display: block;
}

.form-submit {
    font-family: inherit;
    background: #B4462B;
    color: #fff;
    border: none;
    border-radius: 0;
    padding: 14px 36px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    cursor: pointer;
    min-height: 48px; /* aanraakdoel */
    transition: background 0.3s;
}

.form-submit:hover {
    background: #C4553A;
}

.form-submit[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.form-status {
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.5;
}

.form-status.is-success {
    color: #fff;
    border-left: 3px solid #D97757;
    padding-left: 14px;
}

.form-status.is-error {
    color: #F08070;
    border-left: 3px solid #F08070;
    padding-left: 14px;
}

/* Spamval buiten beeld, maar niet display:none — bots negeren dat vaker */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 900px) {
    .contact {
        padding: 36px 24px 48px;
    }

    .contact-inner::before {
        top: -36px;
    }

    .contact-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Naast elkaar is te krap op smalle schermen */
    .field-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-intro h2 {
        font-size: 30px;
    }

    .form-submit {
        width: 100%;
    }
}

/* Kleine regel onder de verzendknop, naar de privacypagina */
.form-consent {
    margin-top: 12px;
    font-size: 13px;
    color: #B0AAA4;
}

.form-consent a {
    color: #D97757;
}

.form-consent a:hover {
    color: #fff;
}

/* ==========================================================================
   Footer — zelfde donkere basis als header en contactblok
   ========================================================================== */
.footer {
    background: #141414;
    color: #fff;
    padding: 56px 40px 28px;
    border-top: 1px solid #2E2E2E;
}

.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.footer-brand img {
    height: 64px;
    width: auto;
    display: block;
}

.footer-col h2 {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #D97757;
    margin-bottom: 12px;
}

.footer-col p {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
    color: #D8D4D0;
}

.footer-col a {
    color: #D8D4D0;
    text-decoration: none;
    border-bottom: 1px solid #4A4A4A;
}

.footer-col a:hover {
    color: #fff;
    border-bottom-color: #D97757;
}

.footer-bottom {
    max-width: 1400px;
    margin: 40px auto 0;
    padding-top: 22px;
    border-top: 1px solid #2E2E2E;
    font-size: 13px;
    color: #B0AAA4;
}

@media (max-width: 900px) {
    .footer {
        padding: 40px 24px 24px;
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }

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

    .footer-bottom {
        margin-top: 28px;
    }
}

/* ==========================================================================
   Tekstpagina's (privacy)
   ========================================================================== */
.page {
    background: #1A1A1A;
    color: #fff;
    padding: 64px 40px 80px;
}

.page-inner {
    max-width: 760px;
    margin: 0 auto;
}

.page h1 {
    font-size: 40px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.page h2 {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 36px 0 10px;
}

.page p {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    color: #D8D4D0;
    margin-bottom: 12px;
}

.page a {
    color: #D97757;
}

.page a:hover {
    color: #fff;
}

.page-note {
    border-left: 3px solid #D97757;
    padding-left: 14px;
    margin-bottom: 8px;
}

.page-back {
    margin-top: 44px;
}

@media (max-width: 900px) {
    .page {
        padding: 44px 24px 56px;
    }

    .page h1 {
        font-size: 30px;
    }
}

/* Clausulenummers in de algemene voorwaarden */
.clause {
    color: #B0AAA4;
    font-weight: 500;
    margin-right: 6px;
}

.page h2 + p {
    margin-top: 4px;
}

/* Verwijzing naar de andere taalversie */
.page-lang {
    font-size: 14px;
    color: #B0AAA4;
    margin-bottom: 28px;
}