@font-face {
    font-family: "Noto Sans";
    src: url("../fonts/notosans.woff2") format("woff2-variations");
        font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/Fraunces.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}



:root {
    --font-Noto: "Noto Sans";
    --font-Fraunces: "Fraunces";

    --font-size-h2: 2.5rem;
    --font-size-h3: 1.75rem;
    --font-size-p: 1rem;

    --clr-accent: oklch(0.736 0.244 143.3);
    --clr-accentdark: oklch(0.604 0.199 143.5);
    --clr-accentdark-10: oklch(from var(--clr-accentdark) calc(l - .12) c h);
    --clr-accentdark-20: oklch(from var(--clr-accentdark) calc(l - .25) c h);
    --clr-bg-blue: oklch(87.444% 0.04377 220.682);
    --clr-blue: oklch(0.773 0.117 223.6);
    --clr-dark-blue: oklch(0.615 0.214 261.7);

    --clr-bg: oklch(95.249% 0.01386 88.672);
    --clr-bg-dark: oklch(from var(--clr-bg) calc(l - .05) calc(c + 0.009) h);
    --clr-dark: oklch(22.213% 0.00003 271.152);
    --clr-overlay: oklch(from var(--clr-dark) calc(l / .6) c h);
    --clr-text: oklch(0.45 0 0);
    --clr-form-text: oklch(100% 0.00011 271.152 / 0.6);
    --clr-success: oklch(from var(--clr-accent) l calc(c *.75) h);
    --clr-warning: oklch(93.621% 0.16771 102.934);
    --clr-error: oklch(61.122% 0.21172 15.743);

    --main: 60rem;
    --w50: 50vw;
    --ultrawide: 120rem;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--clr-accentdark) transparent;

    &::-webkit-scrollbar {
        width: 4px;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background-color: var(--clr-accentdark-20);
        border-radius: 10px;
    }
}

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

img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    position: relative;
}

body {
    background-color: var(--clr-bg);
    color: var(--clr-dark);
    font-family: var(--font-Noto);
    font-optical-sizing: auto;
    display: flex;
    flex-direction: column;
}

.scroll-down header {
    transform: translate3d(0, -100%, 0);
}
.scroll-up header {
    transform: none;
}

a:link,a:visited,a:active {
    text-decoration: none;
    color: var(--clr-accent);
    transition: 500ms ease;
}


main {
    flex: 1;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100svh;
    max-width: var(--ultrawide);
    margin-inline: auto;
}

section {
    width: 100%;
}

section:not(.hero):not(.bestil), form:not(.day__search) {
    opacity: 0;
    translate: 0 6rem;
    transition: opacity 1250ms ease, translate 1250ms ease;
}

#bestil .wrapper {
    opacity: 1;
    translate: 0 12rem;
    transition: opacity 1250ms ease, translate 1250ms ease;
}

section:not(.hero):not(.bestil).is--visible, #bestil .wrapper.is--visible, form.is--visible {
    opacity: 1;
    translate: 0 0;
}

.wrapper {
    margin-inline: auto;
    padding: 0 1rem;
    position: relative;
}

section:not(.bestil) {
    padding: 8rem 0 10rem 0;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-Fraunces);}

h1 { font-weight: 700; font-size: 2rem; }
h2 { font-weight: 700; font-size: 1.75rem; margin-bottom: 1rem; line-height: 1; letter-spacing: -0.5px; margin: 1rem 0 3rem; }
h3 { font-weight: 400; font-size: 1.5rem; line-height:1.25}
h4 { font-size: clamp(1.35rem, 5vw, 1.5rem); line-height:1.25; margin-bottom: 1rem;}
p { font-size: 1rem; color: var(--clr-text);  line-height: 1.5;}

img + h3 {
    margin-top: 3rem;
}

    @media (min-width: 32rem) {

        h1 {font-size: 2.8rem; }
        h2 {font-size: 2.25rem;}
        h3 {font-size: 2rem;;}
        p {font-size: 1.25rem}
    }

    @media (min-width: 48rem) {

        h1 {font-size: 3.5rem; }
        h2 {font-size: 3.25rem;}
        h3 {font-size: 2.5rem}
        h4 {font-size: clamp(1.35rem, 5vw, 1.5rem);}
    }


/*

CALL TO ACTION

*/

a:link.cta__primary,
a:visited.cta__primary,
a:active.cta__primary {
    display: block;
    text-transform: uppercase;
    color: var(--clr-bg);
    letter-spacing: .4ch;
    width: fit-content;
}

    .cta__primary div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 4rem;
        flex-direction: row;
        background-color: var(--clr-accentdark-10);
        border-radius: 10px;
        padding: 1rem 2rem;
        max-width: 16rem;
        font-weight: 700;
        transition: all 250ms ease;
    }

    .cta__primary svg {
        fill: white;
    }

    .cta__primary:hover div {
        background-color: var(--clr-accent);
        color: var(--clr-dark);
    }

    .cta__primary:hover svg {
        animation: cta 1500ms infinite ease-in-out;
        fill: var(--clr-dark);
    }

a:link.cta__secondary,
a:visited.cta__secondary,
a:active.cta__secondary {
    display: block;
    text-transform: uppercase;
    color: var(--clr-text);
    letter-spacing: .1ch;
    /* border-radius: 10px; */
}

    .cta__secondary  {
        width: fit-content;

        div {
            background-color: var(--clr-bg);
            color: var(--clr-text);
            justify-content: center;
            display: flex;
            flex: 1;
            padding: 1rem 2rem;
            font-weight: 600;
            border-radius: 10px;
            transition: all 250ms ease;

            &:hover {
            background-color: var(--clr-accentdark);
            color: var(--clr-bg);
        }
        }

        
    }



    @keyframes cta {
        0% {translate: 0}
        50% {translate: 1rem;}
        100% {translate: 0;}
    }

/*

FORMS

*/

form {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    appearance: none;
    max-width: var(--main);
    margin-inline: auto;
}

    .form__group {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        width: 100%;
        grid-column: span 6;

        label {
            color: oklch(100% 0.00011 271.152 / 0.6);
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: 1.4px;
        }

        input, textarea {
            background-color: oklch(from white l c h / 0.07);
            color: white;
            padding: 1rem;
            font-size: 1rem;
            border: 1px solid oklch(from var(--clr-dark) calc(l / .5) c h);
            border-radius: 10px;
            letter-spacing: 1.5px;
            outline: 0;
            transition: all 250ms;
            width: 100%;

            &::placeholder {
                color: oklch(from var(--clr-dark) calc(l / .35) c h);
            }
        }

        input[type="date"] {
            padding: .907rem;
        }

        button:not(.form__pricing button) {
            width: 75%;
            padding: 1.25rem;
            align-self: center;
            font-size: 1.25rem;
            border-radius: 10px;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            background-color: oklch(from white l c h / 0.07);
            border: 1px solid oklch(from var(--clr-dark) calc(l / .5) c h);
            pointer-events: none;
            transition: background-color 250ms;
            color: oklch(from var(--clr-dark) calc(l / .5) c h);

            @media (min-width: 48rem) {
                max-width: 50%;
            }
        }
    }

    /* .form__group:has(#bin__type) {
        align-items: flex-start;
        justify-content: flex-start;
        align-self: start;

        input {
            flex: 1;
        }

        a div {
            padding: 1rem 2rem;
        }
    } */

    .form__pricing, .form__hint {
    background-color: var(--clr-bg);
    color: var(--clr-accentdark-20);
    border-radius: 10px;
    padding: 2rem;
    gap: 2rem;
    margin-bottom: 2rem;


        > div:nth-child(2) {
            background-color: oklch(from var(--clr-bg) 99 0.01 h);
            font-weight: 700;
            color: var(--clr-dark);
            width: 100%;

            > p {
                font-size: 1.2rem;
                margin-bottom: 1rem;
            }

            input {
                background-color:  transparent;
                border: none;
                color: var(--clr-accentdark-20);
                font-family: var(--font-Fraunces);
                font-weight: 900;
                font-size: 1.8rem;
                width: 2ch;
                text-align: center;

                &::placeholder {
                    color: oklch(from var(--clr-accentdark) calc(l - .3) c h);
                }
            }
        }

        > div:last-child {
            border-top: 2px solid var(--clr-bg-dark);
            padding-top: 1.8rem;
            display: flex;
            justify-content: space-between;
            color: var(--clr-dark);
            width: 100%;

            p {
                font-size: 1rem;
            }

            output {
                font-family: var(--font-Fraunces);
                font-weight: 900;
                font-size: 2.5rem;
                line-height: 1;
                color: var(--clr-accentdark-20);
                align-self: flex-end;
            }
        }

        .form__pricing--header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            color: var(--clr-accentdark-20);

            p {
                font-weight: 700;
                font-size: 1.2rem;
                background-color: var(--clr-accentdark-20);
                color: var(--clr-bg);
                border-radius: 10px;
                padding: .4rem .8rem;
            }
        }
    }

    .form__hint {
        color: var(--clr-form-text);
        background-color: transparent;
        margin-bottom: 0;

            p {
                font-size: 1rem;
                color: var(--clr-form-text);
            }

            a.cta__secondary > div {
                font-size: .9rem;
            }
    }

    div:has(> .form__pricing--header) {
        padding: 1.2rem;
        border-radius: 10px;
        border: 2px solid var(--clr-bg-dark);
        gap: 1.4rem;
    }

    .form__pricing--quantity {
        display: flex;
        align-items: center;
        overflow: visible;
        min-width: 0;
        gap: 1rem;
        /* height: 3rem; */

        input {
            padding: 0;
        }
    }

    .form__pricing button {
        appearance: none;
        -webkit-appearance: none;
        border: none;
        background: none;
        padding: 0;
        margin: 0;
        cursor: pointer;
        transition: all 250ms ease;
}

    .form__pricing button span {
        display: block;
        position: relative;
        width: 3rem;
        height: 3rem;
        border: 2px solid var(--clr-bg-dark);
        border-radius: 4px;
        background-color: var(--clr-bg);
        border-radius: 50%;
        transition: all 250ms ease;
    }

    .form__pricing button span::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: .75rem;
        height: 2px;
        background-color: var(--clr-dark);
        transform: translate(-50%, -50%);
        transition: all 250ms ease;
    }

    .form__pricing button:last-of-type span::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px;
        height: .75rem;
        background-color: var(--clr-dark);
        transform: translate(-50%, -50%);
        transition: all 250ms ease;
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

    @media (min-width: 48rem) {

        .form__group:has(#fname), .form__group:has(#lname)  {
            grid-column: span 3;
        }

        .form__group:has(#zip) {
            grid-column: span 2;
        }

        .form__group:has(#city) {
            grid-column: span 4;
        }

        .form__group:has(#date) {
            grid-column: span 3;
        }

        .form__group:has(#bin__type) {
            grid-column: span 3;
        }
    }

    /*

    FORM EFFEKTER

    */
#bestil, #day {
    .form__group input:focus:not([readonly]),
    .form__group textarea:focus {
        border: 1px solid var(--clr-bg-dark);
    }

    .form__pricing button:hover span {
        background-color: oklch(from var(--clr-accentdark) calc(l - .2) c h);
        box-shadow: 0 0 8px -4px var(--clr-dark);
    }

    .form__pricing button:hover span::before, .form__pricing button:last-of-type:hover span::after {
        background-color: var(--clr-bg);
    }

    form:valid .form__group:has(button[type="submit"]) button:not(.form__pricing button),
    .resultat__btn {
    background-color: var(--clr-accentdark);
    font-weight: 700;
    color: var(--clr-dark);
    cursor: pointer;
    border: 2px solid var(--clr-dark);
    pointer-events: auto;
    }

    form:valid .form__group:has(button[type="submit"]) button:hover:not(.form__pricing button),
    .resultat__btn:hover {
    background-color: var(--clr-accentdark-20);
    color: var(--clr-bg-dark);
    font-weight: 700;
    cursor: pointer;
    pointer-events: auto;
    }

    section.bestil .form__group input:not(#bins):valid {
        border: 1px solid greenyellow;
    }
}

/*

FORM VALIDATION

*/

p.form__message {
    text-align: center;
    margin: 1rem 0;
    font-size: 1.8rem;
}

.form__message--error {
    color: var(--clr-error);
}

.form__message--success {
    color: var(--clr-success);
}

form small {
    font-size: 1rem
}

/* form:valid .form__group:has(button[type="submit"]) button {
    background-color: var(--clr-blue);
    font-weight: 700;
    color: var(--clr-dark);
    cursor: pointer;
    border: 1px solid var(--clr-dark);
    pointer-events: auto;
    }

 input:not(:placeholder-shown):valid:not(:focus) {
  border-color: var(--clr-success);
}

input:not(:placeholder-shown):invalid:not(:focus) {
  border-color: var(--clr-error);
}

    label:has(+ input:valid:not(:placeholder-shown):not(:focus)),
    label:has(+ textarea:valid:not(:placeholder-shown):not(:focus)) { color: var(--clr-success); }

    label:has(+ input:valid:not(:placeholder-shown):not(:focus))::after {
        content: "✔";
        color: var(--clr-success);
        position: absolute;
        font-size: inherit;
        translate: 25% -10%;
    }


    label:has(+ input:invalid:not(:placeholder-shown)) { color: var(--clr-error); }

        label:has(+ input:invalid:not(:placeholder-shown):not(:focus))::after {
        content: "✖";
        color: var(--clr-error);
        position: absolute;
        font-size: inherit;
        translate: 25% -10%;
    }

    label:has(+ input:valid:not(:placeholder-shown):not(:focus))::after {
        content: "✔";
        color: var(--clr-success);
        position: absolute;
        font-size: inherit;
        translate: 25% -10%;
    }

    label:has(+ input:focus:not(:valid)),
    label:has(+ textarea:focus:not(:valid)) {
        color: var(--clr-warning);
    }

    label:has(+ input:focus:not(:valid))::after {
        content: "";
}

    @media (min-width: 64rem) {
        form + button {
            margin: 2rem 0 0 0;
            margin-inline: auto;
        }
    }


    label:has(+ :is(input):valid:not(:placeholder-shown):not(:focus))::after {
        content: "✔";
        color: var(--clr-success);
        position: absolute;
        font-size: inherit;
        translate: 25% -10%;
    } */

/*
----------------------------------------------------------------------

SECTION: HEADER

----------------------------------------------------------------------
*/

header {
    position: sticky;
    top: 0; right: 0; left: 0;
    width: 100%;
    max-width: calc(var(--ultrawide) - 10rem);
    margin-inline: auto;
    background-color: var(--clr-bg);
    z-index: 2;
    height: 6rem;
    transition: all 750ms ease;
    anchor-name: --header;


    .wrapper {
        display: grid;
        grid-template-columns: auto 1fr auto;
        place-items: center;
        height: 100%;
        padding: 0 2rem;

        .header__logo {
        width: 10rem;
        place-self: center start;

            img {
                border-radius: 0;
            }
        }

        a.cta__primary {
            display: none;

            @media (min-width: 52.5rem) {
                display: block;
            }
        }
    }


}

.nav__item {
    font-size: 1rem;

    @media (min-width: 60rem) {
        font-size: 1.2rem;
    }
}


    .header__hamburger {
        align-self: center;
        justify-self: center;
        height: 100%;
    }

    .header__nav {
        justify-self: end;
        /* padding-right: 2rem; */
    }

    .header__nav div:first-child {
        display: none;
    }

         header input {
            display: none;
            height: 100%;
        }

        header label {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: .25rem;
            cursor: pointer;
            padding: .5rem;
        }

        header label span {
            display: block;
            position: relative;
            width: 3rem;
            height: 3px;
            transition: all 300ms ease;
            transform-origin: center;
            z-index: 1;
        }

               header label span::before {
                content: '';
                /* visibility: hidden; */
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: var(--clr-accentdark-10);
                z-index: 2;
                transition: all 300ms;
                transform-origin: center;
        }

         .nav__toggle:checked ~ .nav__toggle--label span.hamburger__left {
            rotate: 135deg;
            margin-top: 0;
        }

        .nav__toggle:checked ~ .nav__toggle--label span.hamburger__right {
            rotate: -135deg;
            margin-top: -6px;
        }

        @media (min-width: 52.5rem) {
            .header__nav div:first-child {
                display: inline;
            }

            .header__nav {
                justify-self: end;
                padding-right: 2rem;
            }

            .header__hamburger {
                display: none;
            }

            header a.cta__primary {
                display: block;
            }
        }

    header ul {
        text-align: center;
        display: flex;
        flex-direction: row;
        gap: 2rem;
        list-style: none;
        font-weight: 700;
        font-size: 1.2rem;

        a:link,a:visited,a:active {
            color: var(--clr-dark);
            font-weight: 700;
        }

        a:hover {
            color: var(--clr-accent);
        }
    }

    header.header__top {
        a:link,a:visited,a:active {
            color: white;
        }
    }

/*
----------------------------------------------------------------------

NAV - TILES

----------------------------------------------------------------------
*/

nav {
    position: absolute;
    position-anchor: --header;
    top: anchor(bottom);
    justify-self: anchor-center;
    z-index: 3;
    transform-origin: top center;
    max-height: 0;
    transition: max-height 500ms ease;
    overflow: hidden;

    .wrapper {
    background-color: white;
    width: fit-content;
    border: 2px solid var(--clr-bg-dark);
    border-radius: 14px;
    width: 100%;
    max-width: 26rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    }

    ul {
        list-style: none;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;

        li {
            background-color: var(--clr-bg);
            border: 1px solid var(--clr-bg-dark);
            border-radius: 12px;

            a {
                display: flex;
                flex-direction: column;
                align-items: start;
                padding: 1rem;

                span:nth-of-type(1) {
                    font-size: 1.15rem;
                    font-family: var(--font-Fraunces);
                    font-weight: 700;
                }

                span:nth-of-type(2) {
                    font-size: .8rem;
                    font-weight: 500;
                }

                svg {
                    height: 1.5rem;
                    margin-bottom: .5rem;
                    fill: var(--clr-accentdark-10);
                }

                &:link, &:visited {
                    color: var(--clr-text);
                }

                &:hover svg, &:active svg {
                    fill: var(--clr-bg);
                    stroke: var(--clr-accentdark-10);
                }

                &:active, &:hover {
                    background-color: var(--clr-accentdark-10);
                    color: var(--clr-bg);
                    border-radius: 12px;
                    --icon-detail: var(--clr-accentdark-10)
                }
            }
        }
    }

    .nav__footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;

        > div {
            display: flex;
            gap: 2rem;
            align-items: center;
            justify-content: center;

            a, svg {
                height: 2.5rem;
                width: auto;
                transition: fill 250ms ease;
            }

            a:hover svg {
                fill: var(--clr-accent);
            }

            svg {
                fill: var(--clr-accentdark-10);
            }
        }

        a.cta__primary {
            width: 100%;
            height: fit-content;

            div {
            justify-content: center;
            }
        }
    }

}

        header:has(.nav__toggle:checked) ~ nav.nav__dropdown {
            max-height: 25rem;
        }

/*
----------------------------------------------------------------------

NAV - LIST

----------------------------------------------------------------------
*/

/* nav {
    .wrapper {
    background-color: white;
    width: fit-content;
    border: 2px solid var(--clr-bg-dark);
    border-radius: 14px;
    width: calc(100% - 2rem);
    max-width: 26rem;
    padding: 0;
    }

    ul {
        list-style: none;
    }

    li {
        padding: .75rem 2rem;
        border-bottom: 1px solid var(--clr-bg-dark);

        a {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        a:link, a:visited, a:active {
            color: var(--clr-dark);
            font-weight: 500;
        }

        a:hover {
            color: var(--clr-accentdark-10);
        }

        svg {
            height: .75rem;
            fill: var(--clr-text);
        }
    }

    .nav__dropdown--footer {
        display: flex;
        gap: 2rem;
        justify-content: start;
        padding: 1.25rem 2rem;

        a {
            display: flex;
            align-items: center;

            span {
                height: 1.5rem;
            }

            svg {
                fill: var(--clr-accentdark-10);
            }
        }
    }
} */

/*
----------------------------------------------------------------------

BADGE

----------------------------------------------------------------------
*/

span.badge {
    color: var(--clr-accentdark-10);
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 700;
    display: flex;
    /* margin-bottom: 1rem; */
}


/*
----------------------------------------------------------------------

SECTION: HERO

----------------------------------------------------------------------
*/

section.hero {
    display: flex;
    position:relative;
    color: var(--clr-dark);
    width: 100%;
    max-width: var(--ultrawide);

    p {
        color: var(--clr-text);
        /* max-width: 44ch; */
    }
}

    section.hero .wrapper {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        place-self: center;
        place-items: center;
        width: 100%;
        max-width: calc(var(--ultrawide) - 10rem);

        > div:not(:has(img)) {
            margin-top: 4rem;
        }

        > div:first-child {
            display: flex;
            flex-direction: column;
            gap: 2rem;
            place-self: center;
            grid-column: span 12;
            order: 2;
            width: fit-content;
        }

        div:has(> img) {
            order: 1;
            border-radius: 20px;
            overflow: hidden;
            grid-column: span 12;
        }

        > div:nth-child(2) {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        a {
            color: white;
        }

        span:not(.badge) {
            background-color: var(--clr-accent);
            width: 4rem;
            height: .25rem;
        }
    }

    .hero__facts {
        order: 3;
        display: flex;
        justify-content: center;
        margin-inline: auto;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem;
        grid-column: span 12;
        border-top: 4px solid var(--clr-bg-dark);
        padding-top: 4rem;

        > div {
            padding: 2rem;
            /* background-color: var(--clr-bg-dark); */
            /* border: 2px solid var(--clr-bg);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);*/
            border-radius: 10px;
            width: 100%;
            min-width: 30ch;

        }

        h2 {
            color: var(--clr-accentdark);
            font-size: 2rem;
            margin: 0 0 1.5rem
        }

        p {
            font-size: 1.25rem;
        }
    }

        a.cta__primary:hover div {
        color: var(--clr-dark);

    }

    @media (min-width: 48rem) {

        .hero__facts div {
            width: 40%;
        }
    }

    @media (min-width: 60rem) {
        section.hero .wrapper {
            margin: 0 auto;

            > div:first-child {
                grid-column: 4 / 10;
                min-width: fit-content;
                place-self: start;
            }

            > div:nth-child(2) {
                grid-column: span 12;
            }
        }

        .hero__facts {

            > div {
            width: 20%;
            justify-content: space-between;
            }
        }
    }

    @media (min-width: 100rem) {
        section.hero .wrapper {
        div:first-child {
            order: 1;
            grid-column: 2 / 6;
        }

        > div:nth-child(2) {
            order: 2;
            grid-column: 7 / 12;
        }
    }
}

/*
----------------------------------------------------------------------

SECTION: SERVICES

----------------------------------------------------------------------
*/

section.services {


    .wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 4rem;
        align-items: start;
        max-width: 75rem;
    }

    h2 {
        line-height: 1;
        letter-spacing: -0.5px;
        margin: 1rem 0 3rem;
    }

    @media (min-width: 60rem) {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.services__right {
    top: 4rem;
    order: -1;
}

    @media (min-width: 60rem) {
        section.services .wrapper {
            grid-template-columns: 1fr 1fr;
        }
        .services__right {
            position: sticky;
            order: 2;
        }
    }

.services__accordion {
    display: flex;
    flex-direction: column;
}

.accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 0;
    gap: 1rem;
    user-select: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;

    div:first-child {
        display: flex;
        align-items: center;
        gap: 1.2rem;
    }

     span {
        font-family: var(--font-Fraunces);
        color: var(--clr-text);
        font-size: 1rem;
        font-weight: 800;
        transition: opacity 300ms;
        min-width: 1.5rem;
    }

    h3 {
        font-size: 1.6rem;
        font-weight: 600;
        letter-spacing: -.2px;
        transition: color 200ms;
    }

    button {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        border: 1.5px solid var(--clr-bg-dark);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        transition: all 300ms;
        background: none;

         svg {
            width: .9rem;
            height: .9rem;
            stroke: var(--clr-dark);
            fill: none;
            stroke-width: 3px;
            stroke-linecap: round;
            transition: transform 300ms, stroke 300ms;
        }
    }
}

.accordion__body {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    border-left: 3px solid transparent;
    transition:
        max-height 450ms ease,
        opacity 350ms ease,
        border-color 500ms ease;;

        p {
            font-size: 1rem;
            line-height: 1.85;
            color: var(--clr-text);
            max-width: 40rem;
        }

        ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: .5rem;

            > li {
                font-size: .9rem;
                display: flex;
                align-items: center;
                gap: .6rem;
        }
    }
}

.accordion__body--inner {
    padding: 0 0 2rem 2.7rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.accordion__body--inner li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--clr-accent);
    flex-shrink: 0;
}

.services__img--wrap {
        position: relative;
        border-radius: 29px;
        overflow: hidden;
        aspect-ratio: 16 / 9;
        background-color: var(--clr-bg);

        img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity 550ms ease, transform 550ms ease;
            transform: scale(1.04);
        }

        img.is--visible {
            opacity: 1;
            transform: scale(1);
        }

         .img__badge.is-visible {
            opacity: 1;
            transform: translateY(0);
         }

         @media (min-width: 60rem) {
            aspect-ratio: 3 / 4;
         }
    }

    .img__badge {
        position: absolute;
        opacity: 0;
        background-color: oklch(from var(--clr-dark) l c h / .75);
        right: 1.5rem; bottom: 1.5rem; left: 1.5rem;
        transform: translateY(8px);
        transition: opacity 300ms, transform 300ms;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(2px);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.1rem 1.4rem;
        border-radius: 14px;

        &.is--visible {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .badge__title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--clr-bg-dark);
        letter-spacing: 1px;
    }

    .badge__sub {
        font-size: .85rem;
        color: rgba(255, 255, 255, 0.6);
        margin-top: .15rem;
    }

    .badge__price {
        font-family: var(--font-Fraunces);
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--clr-accent);
        white-space: nowrap;
    }

.accordion__item {
    border-top: 1px solid var(--clr-bg-dark);
    border-left: 2px solid var(--clr-bg);
    border-left: 3px solid transparent;
    padding-left: 0;
    transition: border-color 500ms ease, padding-left 250ms ease;

    &:last-child {
        border-bottom: 1px solid var(--clr-bg-dark);
    }
}

.accordion__item.is--active .accordion__body {
        max-height: 400px;
        opacity: 1;
    }

.accordion__item.is--active .accordion__header,
.accordion__item.is--active .accordion__header span {
        color: var(--clr-accentdark);
    }

.accordion__item.is--active button svg {
        transform: rotate(45deg);
        stroke: white;
    }

.accordion__item.is--active {
    border-left-color: var(--clr-accent);
    padding-left: 1rem;
}

.accordion__item.is--active button {
    background: var(--clr-accentdark);
    border-color: var(--clr-accentdark);
}


/*
----------------------------------------------------------------------

SECTION: why

----------------------------------------------------------------------
*/

section.why .wrapper {
    display: grid;
    /* grid-template: 1fr / repeat(12, 1fr); */
    gap: 4rem;
    max-width: 100rem;
    align-items: center;
    padding: 0 1rem;

    h3 + p {
        margin-top: 1rem;
    }
}

    @media (min-width: 60rem) {
        section.why .wrapper {
            grid-template: 1fr / repeat(12, 1fr);
            gap: 0;

            div:first-child {
                grid-column: 1 / 6;
            }

            div:last-child {
                grid-column: 7 / 13;
            }

            div:last-child p {
                max-width: 53ch;
            }
        }
    }

/*
----------------------------------------------------------------------

SECTION: PROCES

----------------------------------------------------------------------
*/

section.proces {

    .wrapper {
        max-width: 75rem;
    }

    ul {
        list-style: none;

        li {
            padding: 1rem 0;
        }

        li:not(:last-child) {
            border-bottom: 2px solid var(--clr-bg-dark);
        }
    }

    li div:first-child {
        display: flex;
        gap: 2rem;
        align-items: end;
    }

    li span {
        font-family: var(--font-Fraunces);
        font-size: 1.4rem;
        color: var(--clr-text);
        font-weight: 700;
    }

    li h3 {
        line-height: 1;
        font-size: 2rem;
        color: var(--clr-accentdark);
        font-weight: 600;
    }

    li p {
        margin-top: .5rem;
        padding-left: 4rem;
    }
}

/*
----------------------------------------------------------------------

SECTION: DAY

----------------------------------------------------------------------
*/

#day { scroll-margin-top: 8rem }

section.day {
    .wrapper {
        max-width: 75rem;

        .content__group:last-child h3 {
            display: flex;
            align-items: end;
            gap: 1rem;
        }
        h3 > svg {
            height: 2.5rem;
        }

        > p {
            color: var(--clr-text);
        }
    }

    .form__group {
        position: relative;

        button {
        min-width: 100%;
        margin-top: 2rem;
    }

    button.resultat__btn {
            pointer-events: auto;
        }

    ul {
    --li-height: 2.8rem;

    list-style: none;
    font-size: 1rem;
    background-color: oklch(0.89 0.04 87.27);
    color: var(--clr-dark);
    width: fit-content;
    position: absolute;
    top: 100%; left: 0;
    z-index: 2;
    max-height: calc(6 * var(--li-height));
    overflow-y: auto;

        li {
            padding: .5rem 1rem;
            cursor: pointer;
            max-height: var(--li-height);
            font-weight: 500;
        }

        li:hover {
            background-color: var(--clr-accentdark);
        }

        scrollbar-width: thin;
        scrollbar-color: var(--clr-accentdark) transparent;

        &::-webkit-scrollbar {
            width: 4px;
        }

        &::-webkit-scrollbar-track {
            background: transparent;
        }

        &::-webkit-scrollbar-thumb {
            background-color: var(--clr-accentdark-20);
            border-radius: 10px;
        }
    }
}
}

.day__content {
    display: grid;
    gap: 6rem;

    > div:first-child {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    @media (min-width: 60rem) {
        grid-template-columns: 1fr 1fr;
    }
}

.day__search {
    max-width: 32rem;
    display: flex;
    flex-direction: column;
    /* gap: 2rem; */
    background-color: oklch(from var(--clr-dark) l 0.009 143);
    border-radius: 10px;
    padding: 2rem;
    color: var(--clr-form-text);

}

.day__resultat {

    display: flex;
    flex-direction: column;
    gap: 1.5rem;


    .resultat__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: .8rem;
        text-transform: uppercase;
        letter-spacing: 1.4px;
        border-top: 1px solid oklch(from var(--clr-dark) calc(l / .5) c h);
        padding-top: 1.5rem;

        :last-child {
            background-color: var(--clr-accentdark-20);
            padding: .25rem .75rem;
            border-radius: 10px;
            color: var(--clr-accent);
            /* letter-spacing: 1px; */
        }
    }

    .resultat__dato {
        font-family: var(--font-Fraunces);
        font-size: 2rem;
        font-weight: 700;
        color: white;
    }

    svg {
            height: 1rem;
            stroke: var(--clr-accent);
        }

    .resultat__adresse, .resultat__kalender {
        display: flex;
        align-content: center;
        gap: .5rem;
        line-height: 1;
    }

    .resultat__kalender {
        border-top: 1px solid oklch(from white l c h / 0.08);
        padding-top: 1.5rem;
    }

    .form__group .resultat__btn {
    pointer-events: auto;
    cursor: pointer;
}

}


/*
----------------------------------------------------------------------

SECTION: BESTIL

----------------------------------------------------------------------
*/

section.bestil {
    color: var(--clr-text);
    padding-top: 0;

    .wrapper {
        background-color: oklch(from var(--clr-dark) l 0.009 143);
        padding: 6rem 1rem;

        @media (min-width: 60rem) {
            border-radius: 20px;
        }
    }

    h2 {
        color: white;
        margin-bottom: 4rem;
        max-width: var(--main);
        margin-inline: auto;
        grid-column: span 6;
    }

    h3 {
        font-size: 1.5rem;
    }

    h4 {
        font-size: 1.25rem;
        margin: 0;
    }

    @media (min-width: 60rem) {
        padding: 0 1rem;
    }
}


/*
----------------------------------------------------------------------

SECTION: FOOTER

----------------------------------------------------------------------
*/

footer {
    width: 100%;
    color: var(--clr-dark);

    p {
        color: var(--clr-dark);
    }
}

footer img {
    height: 6rem;
}

footer .wrapper {
    width: 100%;
    max-width: var(--main);
    margin-inline: auto;
    padding: 10rem 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6rem;
    align-items: center;
    justify-content: center;
}

    .footer__links {
        flex-basis: 100%;
        display: flex;
        justify-content: center;
        gap: 4rem;
        width: fit-content;

        a svg {
            fill: var(--clr-dark);
            /* color: var(--clr-dark); */
            width: 100%;
            height: 1.5rem;
            transition: all 500ms ease;
        }

        a svg:hover {
            fill: var(--clr-accentdark);

        }

        a  span {
            display: grid;
            place-items: center;
            width: 3rem;
            height: 3rem;
            border: 2px solid var(--clr-bg-dark);
            border-radius: 50%;
            transition: all 500ms ease;

            &:hover {
                background-color: var(--clr-bg-dark);
                transform: scale(1.1);
                box-shadow: 0 0 12px -4px var(--clr-dark);
            }

            &:hover > svg {
                fill: var(--clr-accentdark-20);
                transform: scale(1.1);
            }
        }
    }

.socials__fb {
    width: 1.5rem;
    height: 100%;
}

.footer__adr {
    letter-spacing: 1px;
}

.designer {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: .5rem;
    position: relative;
    z-index: 1;
    padding-bottom: 1rem;

    p {
        font-family: var(--font-PopSemi);
        font-size: 1rem;
        color: var(--clr-dark);
        display: flex;
        align-items: center;;
    }

    a svg {
        fill: var(--clr-accentdark);
        height: 100%;
    }
}