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

html {
    scroll-behavior: smooth;
}

@font-face {
    font-family: "Salish Lodge";
    src: url("fonts/Salish%20Lodge-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Creato Display";
    src: url("fonts/CreatoDisplay-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Creato Display";
    src: url("fonts/CreatoDisplay-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Creato Display";
    src: url("fonts/CreatoDisplay-BlackItalic.otf") format("opentype");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

:root {

    /* --- Kleuren --- */
    --bg-purple: #75468a;
    --bg-purple-dark: #5b388a;
    --bg-blue: #303180;
    --bg-blue-dark: #202c78;

}

body {

    font-family: "Creato Display", sans-serif;
    color: #111;
    line-height: 1.6;
    overflow-x: hidden;



    .site-content {
        border-radius: 0 0 32px 32px;
        overflow: hidden;
    }

    background: radial-gradient(circle at 12% 8%, rgba(180, 91, 150, 0.9) 0%, transparent 28%),
    radial-gradient(circle at 88% 18%, var(--bg-blue) 0%, transparent 32%),
    radial-gradient(circle at 24% 52%, var(--bg-purple-dark) 0%, transparent 34%),
    radial-gradient(circle at 78% 84%, var(--bg-blue-dark) 0%, transparent 32%),
    linear-gradient(135deg, var(--bg-purple) 0%, var(--bg-blue-dark) 100%);

}


header {

    padding: 40px 8%;

}


nav {

    display: flex;
    align-items: center;
    position: relative;

}

.logo img {
    width: 20%;
    height: 20%;
    object-fit: cover;
    display: block;
}


nav ul {

    display: flex;
    gap: 40px;
    list-style: none;
    align-items: center;
    margin-left: auto;

}

.mobile-home {

    display: none;

}


nav a {

    text-decoration: none;
    color: #eff2d8;
    transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;

}

.menu-toggle {

    display: none;
    visibility: hidden;
    pointer-events: none;
    width: 52px;
    height: 52px;
    padding: 14px 12px;
    position: relative;
    z-index: 120;
    border: 1px solid rgba(239, 242, 216, 0.55);
    border-radius: 50%;
    background: rgba(64, 30, 18, 0.3);
    cursor: pointer;

}

.menu-toggle span:not(.sr-only) {

    width: 27px;
    height: 2px;
    display: block;
    margin: 4px auto;
    background: #eff2d8;
    transition: transform 0.3s ease, opacity 0.3s ease;

}

.menu-toggle .sr-only {

    position: absolute;
    display: block !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    clip-path: inset(50%);

}

body.menu-open {

    overflow: hidden;

}

nav ul li:first-child,
nav ul li:nth-child(2) {

    position: absolute;
    left: 50%;
    transform: translateX(-50%);

}

nav ul li:first-child {

    margin-left: -75px;

}

nav ul li:nth-child(2) {

    margin-left: 75px;

}

.hero {

    min-height: 90vh;
    display: flex;
    align-items: center;
    padding: 0 8%;
    background: url("images/Bannerwebsite.png");
    background-size: cover;
    background-position: center;

}

.button,
.contact-link,
.ulbutton {

    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    text-decoration: none;
    padding: 12px 20px;
    border: 1px solid #eff2d8;
    border-radius: 999px;
    background-color: #eff2d8;
    color: #401e12;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;

}

.button:hover,
.button:focus-visible,
.contact-link:hover,
.contact-link:focus-visible,
.ulbutton:hover,
.ulbutton:focus-visible {

    background-color: #401e12;
    color: #eff2d8;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
    transform: translateY(-2px);

}

.button {

    margin-top: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);

}





.hero-text {

    max-width: 700px;
    color: white;

}


.hero h1,
.hero h2 {

    font-size: 80px;
    line-height: 1;

}

.hero-impact {

    display: inline-block;
    color: transparent;
    background-image: linear-gradient(90deg, #fff 0%, #fff 40%, #ff78b7 47%, #fff 50%, #ff78b7 53%, #fff 60%, #fff 100%);
    background-size: 250% 100%;
    background-position: 100% 0;
    background-clip: text;
    -webkit-background-clip: text;
    filter: none;
    animation: impact-laser 6s ease-in-out infinite;

}

@keyframes impact-laser {

    0%,
    28%,
    100% {
        filter: none;
        background-position: 100% 0;
    }

    62% {
        filter: drop-shadow(0 10px 18px rgba(34, 8, 28, 0.82)) drop-shadow(0 18px 30px rgba(34, 8, 28, 0.45));
        background-position: -100% 0;
    }

    66% {
        filter: drop-shadow(0 10px 18px rgba(34, 8, 28, 0.82)) drop-shadow(0 18px 30px rgba(34, 8, 28, 0.45));
        opacity: 1;
        background-position: -100% 0;
    }

    70%,
    76% {
        filter: drop-shadow(0 10px 18px rgba(34, 8, 28, 0.82)) drop-shadow(0 18px 30px rgba(34, 8, 28, 0.45));
        opacity: 0.45;
    }

    73%,
    79%,
    100% {
        filter: none;
        opacity: 1;
    }

}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .hero-impact {

        animation: none;

    }

}

@media (min-width: 1600px) {

    footer {

        position: relative;
        min-height: 390px;
        padding: 96px max(8%, calc((100vw - 1900px) / 2));
        grid-template-columns: minmax(220px, 0.8fr) minmax(440px, 1.5fr) minmax(180px, 0.7fr);
        gap: 80px;
        overflow: hidden;
        background:
            radial-gradient(circle at 72% 18%, rgba(255, 120, 183, 0.28), transparent 25%),
            linear-gradient(120deg, #401e12 0%, #5b388a 55%, #303180 100%);
        color: #eff2d8;
        border-top: 8px solid #ff78b7;

    }

    footer::before {

        content: "T";
        position: absolute;
        right: 2%;
        bottom: -28%;
        color: rgba(255, 120, 183, 0.12);
        font-family: "Salish Lodge", sans-serif;
        font-size: 420px;
        line-height: 0.8;
        pointer-events: none;

    }

    footer a,
    footer h1 {

        color: #eff2d8;

    }

    footer .footer-logo,
    footer .footer-contact,
    footer .footer-nav {

        position: relative;
        z-index: 1;

    }

    footer .footer-logo img {

        width: 230px;
        filter: brightness(0) invert(1);

    }

    footer .footer-contact {

        text-align: left;

    }

    footer h1 {

        max-width: 700px;
        font-size: 84px;
        line-height: 0.9;

    }

    footer p {

        max-width: 420px;
        color: #ffcfdf;
        font-size: 20px;

    }

    .footer-icons {

        justify-content: flex-start;
        gap: 12px;

    }

    .footer-icons a {

        width: 46px;
        height: 46px;
        border: 1px solid rgba(239, 242, 216, 0.6);
        border-radius: 50%;
        color: #eff2d8;
        font-size: 25px;

    }

    .footer-icons a:hover,
    .footer-icons a:focus-visible {

        background-color: #ff78b7;
        border-color: #ff78b7;
        color: #401e12;

    }

    .footer-nav {

        align-items: flex-start;
        gap: 18px;

    }

    .footer-nav a {

        padding-bottom: 4px;
        border-bottom: 1px solid rgba(239, 242, 216, 0.45);
        font-size: 19px;

    }

    .footer-nav a:hover,
    .footer-nav a:focus-visible {

        border-color: #ff78b7;
        color: #ff78b7;
        text-decoration: none;

    }

}

@media (min-width: 1600px) {

    header {

        padding: 38px max(8%, calc((100vw - 1900px) / 2));

    }

    header nav {

        max-width: 1900px;
        margin: 0 auto;

    }

    .logo img {

        width: 190px;
        height: auto;

    }

    .hero {

        min-height: 760px;
        height: calc(100vh - 132px);
        max-height: 1040px;
        padding: 0 max(8%, calc((100vw - 1900px) / 2));

    }

    .hero-text {

        max-width: 980px;

    }

    .hero h1,
    .hero h2 {

        font-size: clamp(88px, 6vw, 132px);

    }

    .hero p {

        max-width: 760px;
        font-size: 26px;

    }

    .intro {

        width: min(1800px, calc(100% - 16%));
        margin: 110px auto;
        padding: 72px;
        column-gap: 44px;
        row-gap: 28px;

    }

    .intro h1,
    .intro h2 {

        font-size: 46px;

    }

    .intro .card {

        padding: 40px;

    }

    .intro .card h3 {

        font-size: 30px;

    }

    .clients {

        padding: 72px max(8%, calc((100vw - 1900px) / 2));

    }

    .clients-heading h1,
    .case-showcase-heading h1 {

        font-size: 78px;

    }

    .clients-heading h2,
    .case-showcase-heading h2 {

        font-size: 38px;

    }

    .logo-slot {

        width: 260px;
        height: 140px;
        flex-basis: 260px;

    }

    .logo-slot img {

        height: 100px;

    }

    .grip,
    .person,
    .case-showcase {

        width: min(1800px, calc(100% - 16%));
        margin-right: auto;
        margin-left: auto;
        padding-right: 0;
        padding-left: 0;

    }

    .grip {

        gap: 110px;
        padding-top: 130px;
        padding-bottom: 130px;

    }

    .grip-content {

        max-width: 850px;

    }

    .grip h1,
    .person h1 {

        font-size: 78px;

    }

    .grip h2,
    .person h2 {

        font-size: 38px;

    }

    .grip p,
    .person p {

        font-size: 20px;
        line-height: 1.75;

    }

    .person {

        gap: 110px;
        padding-top: 130px;
        padding-bottom: 130px;

    }

    .person>div:last-child {

        max-width: 900px;

    }

    .larsfoto img {

        width: 420px;
        height: 525px;

    }

    .case-showcase {

        padding-top: 130px;
        padding-bottom: 150px;

    }

    .case-grid {

        gap: 36px;

    }

    .case-card h3 {

        font-size: 34px;

    }

    footer {

        position: relative;
        min-height: 390px;
        padding: 96px max(8%, calc((100vw - 1900px) / 2));
        grid-template-columns: minmax(220px, 0.8fr) minmax(440px, 1.5fr) minmax(180px, 0.7fr);
        gap: 80px;
        overflow: hidden;
        background:
            radial-gradient(circle at 72% 18%, rgba(255, 120, 183, 0.28), transparent 25%),
            linear-gradient(120deg, #401e12 0%, #5b388a 55%, #303180 100%);
        color: #eff2d8;
        border-top: 8px solid #ff78b7;

    }

    footer::before {

        content: "T";
        position: absolute;
        right: 2%;
        bottom: -28%;
        color: rgba(255, 120, 183, 0.12);
        font-family: "Salish Lodge", sans-serif;
        font-size: 420px;
        line-height: 0.8;
        pointer-events: none;

    }

    footer a {

        color: #eff2d8;

    }

    footer .footer-logo,
    footer .footer-contact,
    footer .footer-nav {

        position: relative;
        z-index: 1;

    }

    footer .footer-logo img {

        width: 230px;
        filter: brightness(0) invert(1);

    }

    footer .footer-contact {

        text-align: left;

    }

    footer h1 {

        max-width: 700px;
        color: #eff2d8;
        font-size: 84px;
        line-height: 0.9;

    }

    footer p {

        max-width: 420px;
        color: #ffcfdf;
        font-size: 20px;

    }

    .footer-icons {

        justify-content: flex-start;
        gap: 12px;

    }

    .footer-icons a {

        width: 46px;
        height: 46px;
        border: 1px solid rgba(239, 242, 216, 0.6);
        border-radius: 50%;
        color: #eff2d8;
        font-size: 25px;

    }

    .footer-icons a:hover,
    .footer-icons a:focus-visible {

        background-color: #ff78b7;
        border-color: #ff78b7;
        color: #401e12;

    }

    .footer-nav {

        align-items: flex-start;
        gap: 18px;

    }

    .footer-nav a {

        padding-bottom: 4px;
        border-bottom: 1px solid rgba(239, 242, 216, 0.45);
        font-size: 19px;

    }

    .footer-nav a:hover,
    .footer-nav a:focus-visible {

        border-color: #ff78b7;
        color: #ff78b7;
        text-decoration: none;

    }

}

@media (min-width: 1000px) {

    body.menu-open {

        overflow-x: hidden;
        overflow-y: auto;

    }

    .menu-toggle {

        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;

    }

    .mobile-home {

        display: none !important;

    }

}



.hero p {

    font-size: 22px;
    margin: 30px 0;

}





.intro {

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
    min-width: 0;
    margin: 8%;
    padding: 3%;
    border-radius: 15px;
    background-color: #eff2d8;
    color: #401e12;

}

.overtjenzen {

    display: grid;
    column-gap: 30px;
    min-width: 0;
    margin: 8%;
    padding: 6%;
    border-radius: 15px;
    background-color: #eff2d8;
    color: #401e12;
    text-align: justify;
}

.grip,
.process {

    padding: 8%;

}

.grip {

    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 60px;
    align-items: center;

}

.grip-content {

    min-width: 0;

}

.grip h1 {

    font-size: 60px;
    color: #eff2d8;

}

.grip h2 {

    font-size: 30px;
    color: #eff2d8;

}

.grip p {

    text-align: justify;
    text-align-last: left;
    color: #eff2d8;
    margin-left: 0;

}

.grip-heading {

    display: flex;
    align-items: baseline;
    gap: 14px;
    white-space: nowrap;

}

.intro h1 {

    font-size: 40px;
}

.intro h2,
.grip h2,
.process h2 {

    font-size: 45px;
    max-width: 800px;

}



.intro p,
.grip p {

    margin-top: 10px;
    max-width: 700px;

}


.intro h1,
.intro h2,
.intro>p {

    margin: 0;
    line-height: 1.05;

}

.intro .card {

    margin-top: 20px;

}

.card {

    min-width: 0;
    padding: 30px;
    border: 2px solid #401e12;
    border-radius: 15px;
    background-color: #734226c6;
    color: #eff2d8;
    box-shadow: 0 8px 20px rgba(64, 30, 18, 0.7);

}

.intro .card:first-of-type {

    grid-column: 1 / -1;

}


.card h3 {

    font-size: 25px;
    margin-bottom: 20px;

}

.card ul {

    margin-top: 20px;
    margin-left: 20px;
}

.person {

    padding: 100px 8%;
    display: flex;
    gap: 60px;
    align-items: center;

}


.larsfoto img {

    width: 24vw;
    height: 30vw;
    overflow: hidden;
    border: 6px double #eff2d8;
    border-radius: 15px;
}

.gripfoto {

    width: 100%;

}

.gripfoto img {

    width: 100%;
    aspect-ratio: 4 / 5;
    display: block;
    object-fit: cover;
    border: 6px double #eff2d8;
    border-radius: 15px;

}

.person h1 {

    font-size: 60px;
    color: #eff2d8;

}

.person h2 {

    font-size: 30px;
    color: #eff2d8;

}

.person p {

    text-align: justify;
    text-align-last: left;
    color: #eff2d8;
    margin-left: 20px;

}

.clients {

    padding: 40px 8%;
    padding-bottom: 32px;
    overflow: hidden;
    background-color: #401e12;
    color: #eff2d8;
    border-top: 6px double #eff2d8;
    border-bottom: 6px double #eff2d8;
    box-shadow: 0 8px 20px rgba(255, 247, 207, 0.85);
}

.clients-heading {

    display: flex;
    align-items: baseline;
    gap: 14px;
    color: #eff2d8;

}

.clients-heading h1 {

    font-size: 60px;

}

.clients-heading h2 {

    font-size: 30px;

}

.changing-word {

    display: inline-block;
    min-width: 190px;
    overflow: hidden;
    vertical-align: bottom;

}

.changing-word.word-rising {

    animation: word-rise 0.4s ease-out both;

}

.changing-word.word-leaving {

    animation: word-leave 0.35s ease-in both;

}

@keyframes word-rise {

    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

.logo-carousel {

    width: 100%;
    margin-top: 30px;
    overflow: hidden;

}

.logo-track {

    display: flex;
    width: max-content;
    gap: 24px;

}

.logo-track.is-moving {

    animation: logo-scroll var(--logo-duration) linear infinite;

}

.logo-slot {

    width: 200px;
    height: 110px;
    display: grid;
    place-items: center;
    flex: 0 0 200px;
    padding: 14px;
    border: 0;
    border-radius: 8px;
    background-color: #eff2d8;
    color: #401e12;
    font-size: 16px;

}

.logo-slot img {

    width: 100%;
    height: 78px;
    display: block;
    object-fit: contain;

}

@keyframes logo-scroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(var(--logo-set-width) * -1));
    }

}

.steps {

    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;

}


.steps div {

    border-top: 2px solid black;
    padding-top: 20px;

}





footer {

    padding: 70px 8%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    align-items: center;
    background: #eff2d8;
    color: #401e12;


}

footer a {

    color: #401e12;

}

footer h1 {

    font-size: 40px;

}

footer p {

    margin-top: 8px;

}

footer .footer-logo img {

    width: 180px;
    max-width: 100%;
    display: block;

}

footer .footer-contact {

    text-align: center;

}

.footer-icons {

    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 22px;

}

.footer-icons a {

    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 0;
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;

}

.footer-icons a:hover,
.footer-icons a:focus-visible {

    background-color: #401e12;
    color: #eff2d8;
    transform: translateY(-3px);

}

.footer-nav {

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;

}

.footer-nav a {

    text-decoration: none;

}

.footer-nav a:hover,
.footer-nav a:focus-visible {

    text-decoration: underline;

}


.bannerafbeelding {
    width: 90%;
    margin: 40px auto;
    overflow: hidden;
    border: 6px double #eff2d8;
    border-radius: 15px;
}

.bannerafbeelding img {
    width: 100%;
    height: 200px;
    display: block;
    object-fit: cover;
}

.case-showcase {

    padding: 80px 8%;
    color: #eff2d8;

}

.case-showcase-heading {

    display: flex;
    align-items: baseline;
    gap: 14px;

}

.case-showcase-heading h1 {

    font-size: 60px;

}

.case-showcase-heading h2 {

    font-size: 30px;

}

.case-grid {

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 40px;

}

.case-card {

    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #eff2d8;
    text-decoration: none;
    border: 2px solid #eff2d8;
    border-radius: 12px;
    background-color: #401e12;
    transition: transform 0.4s ease, box-shadow 0.2s ease;

}

.case-card:hover,
.case-card:focus-visible {

    transform: translateY(-30px);
    box-shadow: 0 10px 24px rgba(64, 30, 18, 0.5);

}

.case-card img {

    width: 100%;
    height: 150px;
    display: block;
    object-fit: cover;
    background-color: #eff2d8;

}

.case-card>div {

    padding: 22px;

}

.case-label {

    margin-bottom: 6px;
    font-size: 14px;
    opacity: 0.75;

}

.case-card h3 {

    margin-bottom: 18px;
    font-size: 26px;

}

.case-link {

    display: inline-flex;
    gap: 10px;
    align-items: center;

}

.case-showcase>.button {

    margin-top: 30px;

}

.subpage {

    min-height: 100vh;

}

.page-content,
.case-page {

    padding: 70px 8% 110px;
    color: #eff2d8;

}

.page-heading {

    display: flex;
    align-items: baseline;
    gap: 14px;

}

.page-heading h1 {

    font-size: 68px;

}

.page-heading h2 {

    font-size: 34px;

}

.page-intro {

    max-width: 700px;
    margin-top: 18px;
    font-size: 20px;

}

.contact-page {

    width: 100%;
    max-width: 1500px;
    margin: 0 auto;

}

.contact-layout {

    display: grid;
    grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
    gap: 90px;
    align-items: start;
    margin-top: 55px;

}

.contact-details {

    max-width: 480px;
    font-size: 21px;

}

.contact-details p+p {

    margin-top: 22px;

}

.contact-details a {

    color: #eff2d8;

}

.contact-form {

    display: grid;
    gap: 20px;
    padding: 44px;
    border-radius: 15px;
    background-color: #eff2d8;
    color: #401e12;
    box-shadow: 0 10px 26px rgba(24, 12, 30, 0.32);

}

.form-trap {

    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);

}

.form-row {

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;

}

.contact-form label {

    display: grid;
    gap: 7px;
    font-weight: 700;

}

.contact-form input,
.contact-form textarea {

    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(64, 30, 18, 0.45);
    border-radius: 6px;
    background: #fffdf1;
    color: #401e12;
    font: inherit;

}

.contact-form textarea {

    min-height: 220px;
    resize: vertical;

}

.contact-form input:focus,
.contact-form textarea:focus {

    outline: 3px solid rgba(117, 70, 138, 0.35);
    border-color: #75468a;

}

.contact-form .button {

    justify-self: start;
    border-color: #401e12;
    background-color: #401e12;
    color: #eff2d8;
    cursor: pointer;
    font: inherit;
    margin-top: 0;

}

.contact-form .button:hover,
.contact-form .button:focus-visible {

    border-color: #eff2d8;
    background-color: #eff2d8;
    color: #401e12;

}

.form-status {

    min-height: 1.6em;
    margin: 0;
    font-weight: 700;

}

.form-status.is-success {

    color: #246b45;

}

.form-status.is-error {

    color: #9b2c2c;

}

.project-list {

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 55px;

}

.project-post {

    display: block;
    overflow: hidden;
    color: #eff2d8;
    text-decoration: none;
    border-radius: 12px;
    transition: transform 0.2s ease;

}

.project-post.is-hidden {

    display: none;

}

.project-post:hover,
.project-post:focus-visible {

    transform: translateY(-4px);
}

.project-post img {

    width: 100%;
    aspect-ratio: 16 / 10;
    display: block;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(24, 12, 30, 0.42);

}

.project-image-wrap {

    position: relative;

}

.project-post-in-progress img {

    object-fit: cover;
    padding: 0;
    background-color: transparent;

}

.on-air-badge {

    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background-color: #c62828;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    box-shadow: 0 5px 14px rgba(60, 8, 8, 0.45);

}

.on-air-light {

    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #ffb3b3;
    box-shadow: 0 0 10px #fff, 0 0 16px #ffb3b3;
    animation: on-air-blink 1.1s ease-in-out infinite;

}

@keyframes on-air-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }

}

@media (prefers-reduced-motion: reduce) {

    .on-air-light {
        animation: none;
    }

}

.project-post:last-child img {

    object-fit: contain;
    padding: 30px;
    background-color: #eff2d8;

}

.project-post h3 {

    margin-top: 0;
    font-size: 32px;

}

.project-post .case-label {

    margin-top: 18px;
    margin-bottom: 2px;

}

.project-post .case-link {

    margin-top: 20px;

}

.project-cta {

    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px 0;
    color: #eff2d8;
    text-align: center;

}

.project-cta h1 {

    max-width: 420px;
    font-size: 64px;
    line-height: 0.95;

}

.project-cta .button {

    margin-top: 28px;

}

.about-layout {

    display: grid;
    grid-template-columns: 280px minmax(0, 700px);
    gap: 60px;
    align-items: center;
    margin-top: 55px;

}

.about-layout p {

    margin-top: 18px;

}

.about-layout p:first-child {

    margin-top: 0;

}

.about-layout .larsfoto img {

    width: 100%;
    height: auto;

}

.back-link {

    display: inline-block;
    margin-bottom: 45px;
    color: #eff2d8;
    text-decoration: none;

}

.case-hero {

    max-width: 1100px;
    margin: 0 auto;

}

.case-hero>img {

    width: 100%;
    aspect-ratio: 16 / 7;
    display: block;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 14px 28px rgba(24, 12, 30, 0.42);

}

.case-hero>.case-logo {

    padding: 35px;
    object-fit: contain;
    background-color: #eff2d8;

}

.case-hero .page-heading {

    display: block;
    margin-top: 28px;

}

.case-hero .case-label {

    margin-bottom: 10px;

}

.case-hero .page-heading h1 {

    line-height: 1;

}

.case-hero .page-heading h2 {

    margin-top: 18px;
    line-height: 1.1;

}

.case-article {

    max-width: 760px;
    margin: 80px auto 0;

}

.case-article .article-lead {

    margin-bottom: 50px;
    font-size: 19px;
    line-height: 1.4;

}

.case-section {

    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 44px;
    align-items: center;
    width: min(1120px, calc(100vw - 16%));
    max-width: none;
    margin: 58px auto 0;
    margin-left: 50%;
    transform: translateX(-50%);

}

.case-section-image-left {

    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);

}

.case-section-image-right {

    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);

}

.case-section img {

    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(24, 12, 30, 0.38);

}

.case-article h2 {

    margin-top: 38px;
    font-size: 30px;

}

.case-article p {

    margin-top: 12px;

}

.case-download {

    max-width: 760px;
    margin: 90px auto 0;
    padding: 34px;
    border-radius: 15px;
    background-color: #eff2d8;
    color: #401e12;
    box-shadow: 0 10px 26px rgba(24, 12, 30, 0.32);

}

.case-download h2 {

    margin-top: 0;

}

.case-download-form {

    display: flex;
    align-items: end;
    gap: 20px;
    margin-top: 24px;

}

.case-download-form label {

    display: grid;
    flex: 1;
    gap: 7px;
    font-weight: 700;

}

.case-download-form input {

    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(64, 30, 18, 0.45);
    border-radius: 6px;
    background: #fffdf1;
    color: #401e12;
    font: inherit;

}

.case-download-form input:focus {

    outline: 3px solid rgba(117, 70, 138, 0.35);
    border-color: #75468a;

}

.case-download-form .button,
.case-download-success .button {

    margin-top: 0;
    border-color: #401e12;
    background-color: #401e12;
    color: #eff2d8;
    cursor: pointer;
    font: inherit;

}

.case-download-form .button:hover,
.case-download-form .button:focus-visible,
.case-download-success .button:hover,
.case-download-success .button:focus-visible {

    border-color: #eff2d8;
    background-color: #eff2d8;
    color: #401e12;

}

.case-download-success p {

    margin-bottom: 18px;

}

.case-download-status {

    margin: 0;
    color: #9b2c2c;
    font-weight: 700;

}



@media(max-width: 975px) {


    .hero h1 {

        font-size: 45px;

    }


    .services,
    .steps,
    .intro,
    .project-list {

        grid-template-columns: 1fr;

    }


    .person {

        flex-direction: column;

    }


    .grip {

        grid-template-columns: 1fr;

    }


    .contact-layout,
    .form-row {

        grid-template-columns: 1fr;

    }

    .case-download-form {

        flex-direction: column;
        align-items: stretch;

    }

    .case-download-form .button {

        width: 100%;

    }


    .contact-layout {

        gap: 35px;

    }


    .contact-form {

        padding: 22px;

    }

    .contact-details {

        font-size: 19px;

    }

    .contact-form textarea {

        min-height: 150px;

    }


    .grip-heading {

        white-space: normal;
        flex-wrap: wrap;

    }


    .case-showcase-heading {

        align-items: flex-start;
        flex-direction: column;
        gap: 0;

    }


    .case-grid {

        grid-template-columns: 1fr;

    }


    .page-heading {

        align-items: flex-start;
        flex-direction: column;
        gap: 0;

    }


    .about-layout,
    .case-hero,
    .case-section {

        grid-template-columns: 1fr;
        gap: 28px;
        width: auto;
        margin-left: 0;
        transform: none;

    }


    .case-hero .page-heading {

        padding: 0;

    }


    .case-hero>img {

        border-radius: 12px;

    }


    .clients-heading {

        align-items: flex-start;
        flex-direction: column;
        gap: 0;

    }


    footer {

        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding: 52px 6% 60px;
        background: radial-gradient(circle at 72% 18%, rgba(255, 120, 183, 0.28), transparent 25%), linear-gradient(120deg, #401e12 0%, #5b388a 55%, #303180 100%);
        color: #eff2d8;
        border-top: 8px solid #ff78b7;
        position: relative;
        overflow: hidden;

    }

    footer::before {

        content: "T";
        position: absolute;
        right: 2%;
        bottom: -26%;
        color: rgba(255, 120, 183, 0.12);
        font-family: "Salish Lodge", sans-serif;
        font-size: 260px;
        line-height: 0.8;
        pointer-events: none;

    }

    footer a,
    footer h1 {

        color: #eff2d8;

    }

    footer .footer-contact {

        text-align: center;

    }

    footer h1 {

        font-size: clamp(30px, 8vw, 54px);
        line-height: 0.95;

    }

    footer p {

        color: #ffcfdf;

    }

    .footer-icons {

        justify-content: center;
        gap: 12px;

    }

    .footer-icons a {

        width: 42px;
        height: 42px;
        border: 1px solid rgba(239, 242, 216, 0.6);
        border-radius: 50%;
        background: transparent;
        color: #eff2d8;

    }

    .footer-icons a:hover,
    .footer-icons a:focus-visible {

        background-color: #ff78b7;
        border-color: #ff78b7;
        color: #401e12;

    }

    .footer-nav {

        align-items: center;
        gap: 12px;

    }

    .footer-nav a {

        border-bottom: 1px solid rgba(239, 242, 216, 0.45);
        padding-bottom: 4px;
        text-decoration: none;

    }

    .footer-nav a:hover,
    .footer-nav a:focus-visible {

        border-color: #ff78b7;
        color: #ff78b7;

    }


    nav ul {

        display: none;

    }


}

h1 {

    font-family: "Salish Lodge", sans-serif;
    font-weight: 400;
    text-transform: uppercase;

}

h2 {

    font-family: "Creato Display", sans-serif;
    font-weight: 900;
    font-style: italic;

}

h3 {

    font-family: "Creato Display", sans-serif;
    font-weight: 700;

}

.intro h1,
.intro h2,
.intro>p {

    grid-column: 1 / -1;

}

.intro h1,
.intro h2 {
    font-size: 32px;
}

.ulbutton {
    white-space: normal;
}

@media(max-width: 975px) {

    .hero-text {

        width: 100%;
        min-width: 0;

    }

    .hero h1,
    .hero h2 {

        max-width: 100%;
        font-size: clamp(42px, 12vw, 60px);
        line-height: 0.95;

    }

    .hero p {

        max-width: 100%;
        font-size: 18px;

    }

    .intro {

        margin: 32px 6%;
        padding: 18px;

    }

    .overtjenzen {

        margin: 32px 4%;
        padding: 22px 5%;

    }

    .intro .card {

        padding: 22px;

    }

    .grip,
    .person,
    .case-showcase {

        padding: 56px 8%;

    }

    .grip-heading {

        column-gap: 4px;
        row-gap: 0;

    }

    .grip .grip-heading h1,
    .person .grip-heading h1,
    .case-showcase-heading h1 {

        font-size: 46px;

    }

    .grip-content>p+.grip-heading,
    .grip-content>.grip-heading+p,
    .grip-content>p+p {

        margin-top: 28px;

    }

    .grip .grip-heading h2,
    .person .grip-heading h2,
    .case-showcase-heading h2 {

        font-size: 26px;

    }

    .grip .grip-heading h1,
    .grip .grip-heading h2 {

        line-height: 0.9;

    }

    .grip p,
    .person p {

        margin-left: 0;
        text-align: left;

    }

    .person {

        gap: 32px;

    }

    .person .larsfoto {

        width: 100%;
        display: flex;
        justify-content: center;

    }

    .person .larsfoto img {

        width: min(100%, 280px);
        height: auto;
        aspect-ratio: 4 / 5;
        object-fit: cover;

    }

    .clients {

        padding: 40px 8%;
        padding-bottom: 40px;

    }


    .grip {

        padding-top: 56px;

    }

    .gripfoto {

        grid-row: 1;

    }

    .grip-content {

        grid-row: 2;

    }

    .clients-heading h1 {

        font-size: 46px;

    }

    .clients-heading h2 {

        font-size: 26px;

    }

    .clients-heading h1,
    .clients-heading h2 {

        line-height: 0.9;

    }

    .changing-word {

        min-width: 0;

    }

}

.intro .button {

    white-space: normal;

}

@keyframes word-leave {

    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-100%);
    }

}

@media(max-width: 999px) {

    header {

        padding: 24px 6%;

    }

    .logo img {

        width: 112px;
        height: auto;

    }

    nav {

        justify-content: space-between;

    }

    .menu-toggle {

        display: block;
        visibility: visible;
        pointer-events: auto;

    }

    body.menu-open .menu-toggle {

        border-color: #ff78b7;
        background: #ff78b7;

    }

    body.menu-open .menu-toggle span:not(.sr-only) {

        background: #401e12;

    }

    body.menu-open .menu-toggle span:nth-child(1) {

        transform: translateY(6px) rotate(45deg);

    }

    body.menu-open .menu-toggle span:nth-child(2) {

        opacity: 0;

    }

    body.menu-open .menu-toggle span:nth-child(3) {

        transform: translateY(-6px) rotate(-45deg);

    }

    nav ul,
    body.menu-open nav ul {

        width: 100%;
        height: 100vh;
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 100;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 8px;
        margin: 0;
        padding: 110px 10vw 60px;
        overflow: auto;
        background:
            radial-gradient(circle at 82% 15%, rgba(255, 120, 183, 0.35), transparent 24%),
            radial-gradient(circle at 15% 86%, rgba(48, 49, 128, 0.8), transparent 30%),
            #401e12;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-18px) scale(0.98);
        transform-origin: top right;
        transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;

    }

    body.menu-open nav ul {

        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);

    }

    nav ul::before {

        content: "Tjenzen / menu";
        margin-bottom: 26px;
        color: #ff78b7;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;

    }

    nav ul li,
    nav ul li:first-child,
    nav ul li:nth-child(2) {

        width: 100%;
        position: static;
        margin: 0;
        transform: translateY(20px);
        opacity: 0;

    }

    body.menu-open nav ul li,
    body.menu-open nav ul li:first-child,
    body.menu-open nav ul li:nth-child(2) {

        transform: translateY(0);
        opacity: 1;
        transition: transform 0.45s ease, opacity 0.45s ease;

    }

    .mobile-home {

        display: block;

    }

    .mobile-current {

        display: none;

    }

    body.menu-open nav ul li:nth-child(1) {
        transition-delay: 0.08s;
    }

    body.menu-open nav ul li:nth-child(2) {
        transition-delay: 0.14s;
    }

    body.menu-open nav ul li:nth-child(3) {
        transition-delay: 0.2s;
    }

    nav ul li a:not(.contact-link) {

        display: block;
        padding: 4px 0;
        color: #eff2d8;
        font-family: "Salish Lodge", sans-serif;
        font-size: clamp(42px, 9vw, 78px);
        line-height: 0.95;
        text-transform: uppercase;

    }

    nav ul li a:not(.contact-link):hover,
    nav ul li a:not(.contact-link):focus-visible {

        color: #ff78b7;

    }

    nav ul .contact-link {

        margin-top: 26px;
        border-color: #ff78b7;
        background: #ff78b7;
        color: #401e12;
        font-size: 17px;

    }

    .page-heading,
    .grip-heading,
    .clients-heading,
    .case-showcase-heading {

        align-items: flex-start;
        flex-direction: column;
        gap: 0;

    }

    .page-heading h1,
    .case-hero .page-heading h1,
    .grip .grip-heading h1,
    .person .grip-heading h1,
    .clients-heading h1,
    .case-showcase-heading h1 {

        font-size: clamp(40px, 12vw, 46px);
        line-height: 0.95;

    }

    .page-heading h2,
    .case-hero .page-heading h2,
    .grip .grip-heading h2,
    .person .grip-heading h2,
    .clients-heading h2,
    .case-showcase-heading h2 {

        font-size: clamp(23px, 7vw, 28px);
        line-height: 1.05;

    }

    .intro h1,
    .intro h2 {

        font-size: clamp(24px, 7vw, 30px);
        line-height: 1;

    }

    .person .grip-heading {

        align-items: flex-start;
        flex-direction: column;
        gap: 0;

    }

}

@media (prefers-reduced-motion: reduce) {

    nav ul,
    .menu-toggle span:not(.sr-only),
    nav ul li {

        transition: none;

    }

}

@media (min-width: 1600px) {

    footer {
        position: relative;
        min-height: 390px;
        padding: 96px max(8%, calc((100vw - 1900px) / 2));
        grid-template-columns: minmax(220px, 0.8fr) minmax(440px, 1.5fr) minmax(180px, 0.7fr);
        gap: 80px;
        overflow: hidden;
        background: radial-gradient(circle at 72% 18%, rgba(255, 120, 183, 0.28), transparent 25%), linear-gradient(120deg, #401e12 0%, #5b388a 55%, #303180 100%);
        color: #eff2d8;
        border-top: 8px solid #ff78b7;
    }

    footer::before {
        content: "T";
        position: absolute;
        right: 2%;
        bottom: -28%;
        color: rgba(255, 120, 183, 0.12);
        font-family: "Salish Lodge", sans-serif;
        font-size: 420px;
        line-height: 0.8;
        pointer-events: none;
    }

    footer a,
    footer h1 {
        color: #eff2d8;
    }

    footer .footer-logo,
    footer .footer-contact,
    footer .footer-nav {
        position: relative;
        z-index: 1;
    }

    footer .footer-logo img {
        width: 230px;
        filter: brightness(0) invert(1);
    }

    footer .footer-contact {
        text-align: left;
    }

    footer h1 {
        max-width: 700px;
        font-size: 84px;
        line-height: 0.9;
    }

    footer p {
        max-width: 420px;
        color: #ffcfdf;
        font-size: 20px;
    }

    .footer-icons {
        justify-content: flex-start;
        gap: 12px;
    }

    .footer-icons a {
        width: 46px;
        height: 46px;
        border: 1px solid rgba(239, 242, 216, 0.6);
        border-radius: 50%;
        color: #eff2d8;
        font-size: 25px;
    }

    .footer-icons a:hover,
    .footer-icons a:focus-visible {
        background-color: #ff78b7;
        border-color: #ff78b7;
        color: #401e12;
    }

    .footer-nav {
        align-items: flex-start;
        gap: 18px;
    }

    .footer-nav a {
        padding-bottom: 4px;
        border-bottom: 1px solid rgba(239, 242, 216, 0.45);
        font-size: 19px;
    }

    .footer-nav a:hover,
    .footer-nav a:focus-visible {
        border-color: #ff78b7;
        color: #ff78b7;
        text-decoration: none;
    }

}

@media (min-width: 1000px) {

    nav ul li:first-child,
    nav ul li:nth-child(2) {

        position: static;
        left: auto;
        margin-left: 0;
        transform: none;

    }

}

@media (min-width: 1600px) {

    .person {

        display: grid;
        grid-template-columns: 320px minmax(0, 1fr);
        align-items: start;

    }

    .person .larsfoto img {

        width: 320px;
        height: 400px;

    }

    .person>div:last-child {

        max-width: none;
        padding-top: 12px;

    }

}