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

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #0b0b0b;
    color: #fff;
}

/* =========================
   PAGE
   ========================= */

.page {
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

.content {
    width: 100%;
    max-width: 1500px;
    text-align: center;
    padding: 45px 25px 0;
}

/* =========================
   BRANDING
   ========================= */

.logo {
    font-size: 18px;
    letter-spacing: 0.65em;
    font-weight: 400;
    margin-bottom: 20px;
    color: #f4eadc;
    text-transform: uppercase;
}

h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(70px, 13vw, 150px);
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 0.9;
    color: #f7eadb;
    text-shadow: 0 3px 20px rgba(0, 0, 0, 0.35);
    margin: 0 0 10px;
}

.subtitle {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(20px, 3vw, 32px);
    letter-spacing: 0.08em;
    line-height: 1.4;
    color: #f3e5d6;
    margin-bottom: 35px;
}

/* =========================
   HERO IMAGE
   ========================= */

.hero-image {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.hero-image img {
    display: block;
    width: 100%;
    height: auto;
}

.presave-button-container {
    position: absolute;
    inset-inline: 0;
    bottom: 17%;
    z-index: 11;
    display: flex;
    justify-content: center;
    /* De contactgegevens zijn in de desktopafbeelding iets links van het beeldmidden ingebakken. */
    transform: translateX(-1.6%);
}

.presave-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(340px, 28%, 430px);
    min-height: 48px;
    padding: 13px 24px;
    margin-inline: auto;
    border: 2px solid #b9efff;
    border-radius: 999px;
    background: #8ce5ff;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
    color: #062331;
    font-size: clamp(11px, 1.2vw, 16px);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.presave-button:hover {
    background: #c8f5ff;
    color: #000;
    transform: translateY(-2px);
}

.presave-button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* De tekst/contactgegevens zitten al in de afbeelding */

.intro,
.email {
    display: none;
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 600px) {

    html,
    body {
        width: 100%;
        height: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: #000;
    }

    .page,
    .content {
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* Alles wat al in de afbeelding staat, verbergen */

    .logo,
    h1,
    .subtitle,
    .intro,
    .email {
        display: none;
    }

    .hero-image {
        width: 100%;
        height: 100dvh;
        margin: 0;
        padding: 0;
    }

    .hero-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .presave-button-container {
        bottom: 17%;
        /* De contactzone in de mobiele afbeelding heeft een kleinere ingebakken offset. */
        transform: translateX(-0.65%);
    }

    .presave-button {
        width: 82%;
        max-width: calc(100% - 32px);
        min-width: 0;
        min-height: 44px;
        padding: 11px 18px;
        font-size: clamp(10px, 3vw, 13px);
        white-space: normal;
    }
}
@media (max-width: 600px) {

    .mobile-email-link {
        position: absolute;
        left: 20%;
        right: 20%;
        bottom: 5%;
        height: 8%;
        z-index: 10;
        display: block;
    }
}
/* Klikbare e-mailzone desktop */

@media (min-width: 601px) {

    .mobile-email-link {
        position: absolute;
        left: 20%;
        right: 20%;
        bottom: 5%;
        height: 10%;
        z-index: 10;
        display: block;
    }
}