@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto Light";
    src: url("../fonts/Roboto-Light.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto Medium";
    src: url("../fonts/Roboto-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins Extra Bold";
    src: url("../fonts/Poppins-ExtraBold.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins Semi-Bold";
    src: url("../fonts/Poppins-SemiBold.woff2") format("woff2");
}



:root {
    --font-Rob: "Roboto";
    --font-RobLight: "Roboto Light";
    --font-RobMed: "Roboto Medium";
    --font-Pop: "Poppins";
    --font-PopBold: "Poppins Extra Bold";
    --font-PopSemi: "Poppins Semi-Bold";

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

    --clr-accent: oklch(75.901% 0.19545 151.112);
    --clr-lightaccent: oklch(
                from var(--clr-accent)
                l               /* styret lyshed */
                calc(c * .75)
                h
                );
    --clr-white: oklch(100% 0.00011 271.152);
    --clr-dark: oklch(0.25 0 0);
    --clr-overlay: oklch(18.22% 0.00002 271.152 / .25);
    --clr-text: oklch(37.909% 0.00004 271.152);
    --clr-grid: oklch(81.093% 0.00009 271.152 / 0.5);
    --clr-success: oklch(from var(--clr-accent) l calc(c *.75) h);
    --clr-warning: oklch(91.676% 0.19146 101.417);
    --clr-error: oklch(58.166% 0.22753 20.426);

    --sticky-offset: 4rem;
    --sticky-height: 4rem;
    --sticky-gap: 4rem;

    --grid-50: 50vw;
    --grid-max: 960px;
    --main: 120rem;
}

html {
  scroll-behavior: smooth;
}

* {
    font-family: var(--font-Rob);
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* outline: 1px solid red; */
}

img {
    display: block;
    width: 100%;
    border-radius: 10px;
    position: relative;
    z-index: 2;
}

body {
    background-color: var(--clr-white);
    color: var(--clr-dark);
}

a:link,a:visited,a:active {
    text-decoration: none;
    color: var(--clr-accent);
    font-family: var(--font-RobMed);
}

/*
LINE GRID
 */

.line-grid {
    display: none;
    position: fixed;
    border: 1px solid var(--clr-grid);
    width: var(--grid-50);
    top: 0; right: 50; bottom: 0; left: 0;
    z-index: 1;
    user-select: none;
    pointer-events: none;
}

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


.wrapper {
    margin-inline: auto;
    padding: 6rem 1rem;
    position: relative;
    max-width: 120rem;
}

section:not(:first-child):not(.portfolio)::before {
    content:"";
    display: block;
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    height: 0px;
    border-bottom: 1px solid var(--clr-grid);
    margin-inline: auto;
}

    @media (min-width: 48rem) {
        .line-grid {
            display: block;
            position: fixed;
            width: var(--grid-50);
            max-width: var(--grid-max);
            right: 0;
            margin: auto;
        }

        section:not(:first-child):not(.portfolio)::before {
            width: var(--grid-50);
            max-width: var(--grid-max);
        }
    }

h1 {font-family: var(--font-PopBold); font-size: clamp(2rem, 5vw, 4rem); }
h2 {font-family: var(--font-PopBold); font-size: clamp(2.5rem, 5vw, 3.25rem); margin-bottom: 1rem;}
h3 {font-family: var(--font-Pop); font-size: clamp(1.75rem, 5vw, 2.25rem); line-height:1.25}
h4 {font-family: var(--font-Pop); font-size: clamp(1.35rem, 5vw, 1.5rem); line-height:1.25; margin-bottom: 1rem;}
p {font-family: var(--font-Rob); font-size: clamp(1rem, 1.5vw, 1.35rem); line-height: 1.5; color: var(--clr-text);}

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

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

    @media (min-width: 48rem) {
        .wrapper {
            padding: 12rem 3rem;
        }

        h2 {
            font-size: clamp()
        }
    }


/*

CALL TO ACTION

*/

a:link.cta__primary,
a:visited.cta__primary,
a:active.cta__primary {
    display: block;
    max-height: 3.5rem;
    text-transform: uppercase;
    color: var(--clr-dark);
    letter-spacing: .4ch;
}

    .cta__primary div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
            width: 9rem;
        font-family: var(--font-RobMed);
        transition: all 1500ms ease;
    }

    .cta__primary svg {
        fill: var(--clr-accent);
    }

    .cta__primary:hover div {
        animation: cta 1500ms infinite ease-in-out;
    }

    @keyframes cta {
        0% {width: 9rem;}
        50% {width: 10rem;}
        100% {width: 9rem;}
    }

/*

FORMS

*/

form {
    display: grid;
    gap: 2rem;
    position: relative;
    background-color: var(--clr-white);
    font-family: var(--font-RobMed);
    font-size: 2rem;
    border-radius: 10px;
    z-index: 2;
    max-width: 32rem;
    margin-inline: auto;
}

    form label,
    form input,
    form textarea {
        display: block;
        position: relative;
        width: 100%;
        border: none;
        font-size: var(--font-size-p);
    }

    .form__group {
        display: grid;
        gap: .5rem;
    }

     form label {
        font-family: var(--font-RobMed);
        font-size: 1.25rem;
    }

    form input {
        border-bottom: 1px solid;
        font-size: var(--font-size-p);
        background-color: transparent;
        padding: .25rem;
    }
    
    form input:focus-visible {
        border: none;
        border-bottom: 2px solid;
        outline: none;
}

    form textarea {
        display: block;
        width: 100%;
        background: transparent;
        border: 1px solid var(--clr-text);
        border-radius: 10px;
        outline: none;
        padding: .5rem;
    }

    form textarea:focus-visible {
        border: 2px solid var(--clr-dark);
    }


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

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

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

    label:has(+ input:valid:not(:placeholder-shown))::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))::after {
        content: "✖";
        color: var(--clr-error);
        position: absolute;
        font-size: inherit;
        translate: 25% -10%;
    }

    label:has(+ input:valid:not(:placeholder-shown))::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: "";
}

form > button {
    position: relative;
    display: block;
    width: 100%;
    max-width: 32rem;
    background: var(--clr-white);
    padding: 1rem 0;
    font-family: var(--font-Rob);
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: .2ch;
    border: 1px solid var(--clr-grid);
    color: var(--clr-grid);
    z-index: 1;
    transition: all .5ms ease;
    pointer-events: none;
}

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

    form:valid > button {
    /* background-color: var(--clr-success); */
    font-family: var(--font-RobMed);
    color: var(--clr-dark);
    cursor: pointer;
    border: 1px solid var(--clr-dark);
    pointer-events: auto;
    }

    input[name="website"] {
    position: absolute;
    left: -9999px;
}

.form__message {
    font-size: 1rem;
    margin-inline: auto;
    color: red;
}

.form__message.form__message--success {
    font-size: 1rem;
    margin-inline: auto;
    color: var(--clr-accent);
}

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

SECTION: HEADER

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

header {
    position: sticky;
    top: 0; right: 0; left: 0;
    height: 6rem;
    width: 100%;
    margin-inline: auto;
    
    border-bottom: 1px solid oklch(0.8118 0 142 / 50%);
    background-color: var(--clr-white);
    z-index: 3;
}

header .wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    /* width: 100%; */
    padding: 0;
    height: 6rem;
}

    .header__logo {
        /* width: 8rem; */
        /* padding: 1rem 0 1rem 1rem; */
        /* border-right: 1px solid oklch(0.8118 0 142 / 50%); */
        place-self: center start;
        padding-left: 2rem;
    }
     
        .header__logo svg {
            height: 3rem;
        }

    .header__nav {
        display: none;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        width: var(--grid-50);
        max-width: var(--grid-max);
        height: 100%;
        border-left: var(--clr-grid) 1px solid;
    }

    /* .header__nav div:first-child,
    .header__contact {
        display: none;
    } */

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

    .header__nav div:first-child {
        margin-inline: auto;
    }

    header ul {
        text-align: center;
    }

        .header__nav li {
            display: inline;
            padding: 1rem;
            vertical-align: middle;
            font-family: var(--font-RobMed);
            font-size: 1.25rem;
            letter-spacing: .15ch;
        }


    .header__hamburger {
        display: none;
        align-self: center;
        justify-self: center;
        padding: 2rem;
        height: 100%;
    }

    .header__contact {
    width: 100%;
    height: 100%;
}

    .header__contact a div {
        display: grid;
        background-color: var(--clr-accent);
        width: 100%;
        height: 100%;
        place-items: center;
        font-size: 1.25rem;
        /* padding: 1rem 3rem; */
        /* border-radius: 10px; */
        text-transform: uppercase;
        color: var(--clr-dark);
        font-family: var(--font-PopSemi);
        transition: all 300ms;

        &:hover {
            background-color: var(--clr-text);
            color: var(--clr-white);
        }
    }


     header input {
            display: none;
        }

        header label {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: .25rem;
            height: 2rem;
            width: 3rem;
            cursor: pointer;
        }

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

        /* header label span.hamburger__left {
            margin: 0 0 .25rem 0;
        } */

        header label span::before {
                content: '';
                visibility: hidden;
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: var(--clr-accent);
                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__left::before {
                visibility: visible;
                rotate: -135deg;
                top: .5rem;
                left: 1.2rem;
            } */

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

@media (min-width: 48rem) {
    header .wrapper {
        grid-template-columns: 25% 1fr 25%;
        justify-content: center;
    }

    .header__nav {
        display: flex;
    }

    .header__hamburger {
        border-left: 1px solid var(--clr-grid);
        border-right: 1px solid var(--clr-grid);
    }

    .header__contact {
        display: inline-block;
    }
    
}

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


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

SECTION: HERO

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

section.hero {
    display: grid;
    place-items: center;
    gap: 3rem;
    width: 100%;
}

h1 {
    letter-spacing: .1ch;
    padding: 0 1rem;
    max-width: 100%;
    text-transform: uppercase
}

h1 > span {
    display: block;
    font-family: var(--font-PopBold);;
    font-size: inherit;
    color: var(--clr-accent);
    text-align: center;
}

.hero .hero__img {
    grid-area: 1 / auto / 2 / auto;
    z-index: 0;
    width: 100%;
    position: relative;
}

    .hero .hero__img::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
        background: var(--clr-overlay);
        border-radius: 10px;
    }

    .hero img {
    aspect-ratio: 1.8/1;
    object-fit: cover;
    border: none;
    border: 1px solid #000;
    border-radius: 0;
    }

.hero > div:nth-of-type(1) {
    display: grid;
    gap: 3rem;
    max-width: 75ch;
    width: 100%;
    padding: 0 1rem 6rem;
}

    @media (min-width: 64rem) {

        .hero h1 {
            font-size: clamp(3rem, 4vw, 4rem);
            position: relative;
            z-index: 2;
            margin-bottom: 2rem;
        }

        .hero a.cta__primary {
            align-self: right;
        }
    }
    
    @media (min-width: 120rem) {
        section.hero .hero__img {
            margin: 3rem 0 0 0;
        }

        section.hero .hero__img img {
            border-radius: 10px;
        }
    }



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

SECTION: USP

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

section.usp .wrapper {
    position: relative;
    display: grid;
    gap: 4rem;
    align-items: start;
}

.usp__points--item .img {
    height: 300px;
    /* overflow: hidden; */
    border-radius: 10px;
}

    .usp__points--item .img img {
        height: 100%;
        object-fit: cover;
        /* border: 2px red solid; */
    }

    .usp__points--item div:last-child {
        margin-top: 2rem;
    }

.usp__points {
    display: grid;
    gap: 6rem;
}

    .usp__contact {
        grid-row: 2 / 3;
    }

    .usp__contact .form__group p {
        font-family: var(--font-PopSemi);
        font-size: 1.2rem;
    }

    @media (min-width: 64rem) {
        section.usp .wrapper {
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            width: 100%;
            /* padding: 10rem 1rem; */
        }

        section.usp h2 {
            grid-column: 1 / 3;
        }

        .usp__contact {
            position: sticky;
            top: 14rem;
            z-index: 2;
            grid-area: auto / 1 / auto / 2;
        }

        .usp__contact button {
            width: 100%;
        }
    }

        @media (min-width: 75rem) {
        section.usp .wrapper {
            grid-template-columns: minmax(0, 32rem) 1fr;
            gap: 6rem;
            max-width: 75rem;
        }

        section.usp h2 {
            grid-column: 1 / 3;
        }

        .usp__contact {
            z-index: 2;
            grid-area: auto / 1 / auto / 2;
        }

        .usp__contact button {
            width: 100%;
        }
    }

            @media (min-width: 90rem) {
        section.usp .wrapper {
            max-width: minmax(75rem, 75%);
        }
    }


        @media (min-width: 120rem) {
            section.usp .wrapper {
                max-width: 110rem;
            }

            .usp__points {
                gap: 10rem;
                /* padding: 0 0 20rem; */
            }

            .usp__points--item {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 2rem;
            }

                .usp__points--item div:last-child {
                margin-top: 0;
            }

        }

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

SECTION: SERVICES

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

.services .wrapper {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 3rem;
    align-items: center;
    padding: 8rem 1rem 6rem;
}

.services__img {
    height: 100%;
    object-fit: cover;
}

    .services__img img {
        object-fit: cover;
        height: 100%;
    }

.services__item div:last-child {
    margin-top: 3rem;
}

.services__types {
    display: grid;
    grid-template: repeat(3, 1fr) / 1fr;
    margin: 0 1rem;
    gap: 3rem;
    grid-column: 1 / 3;
    max-width: var(--grid-max);

    > div {
        background-color: var(--clr-accent);
        border-radius: 10px;
        padding: 2rem;
        box-shadow: 0 0 20px -5px var(--clr-dark);
    }

    div > p:nth-of-type(3) {
        margin-top: 2rem;
    }

    div .divider {
        height: .25rem;
        width: 3rem;
        background-color: var(--clr-white);
        margin: 1rem 0;
    }
}



.services__content {
    display: grid;
    gap: 3rem;
}

    .services__cta {
        display: grid;
        grid-template-columns: 50% 50%;
        place-content: center;
        margin: 6rem auto 0;
        width: 100%;
        border-top: 1px solid var(--clr-grid);
        border-bottom: 1px solid var(--clr-grid);
    }
    
    .services__cta a {
        display: flex;
        font-family: var(--font-PopSemi);
        font-size: var(--font-size-p);
        text-transform: uppercase;
        width: 100%;
        padding: 2rem 0;
        letter-spacing: .1ch;
        color: var(--clr-dark);
        justify-content: space-around;
        transition: all 500ms ease;
    }

    .services__cta a:first-child {
        border-right: 1px solid var(--clr-grid);
    }

    .services__cta a:hover {
        letter-spacing: .2ch;
        color: var(--clr-accent);
    }

    @media (min-width: 48rem) {
        .services .wrapper {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr;
        }

        .services__cta {
            width: var(--grid-50);
            max-width: var(--grid-max);
        }
    }

    @media (min-width: 64rem) {
        .services .wrapper {
            max-width: 75rem;
            padding: 8rem 0 6rem;
        }

        .services__types {
            grid-template: 1fr / repeat(3, 1fr);
            margin: 0 auto;
            gap: 6rem;
            max-width: 75rem;
        }

        .services__item > h3,
        .services__item > p {
            grid-area: auto / 2 / auto / 3;
        }
    }



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

SECTION: PROJECTS

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

.portfolio__gallery {
    margin-top: 2rem;
    display: grid;
    gap: 1rem;
}

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

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

SECTION: OUR CULTURE

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

section.culture .wrapper {
    display:grid;
    gap: 2rem;
    max-width: 70rem;
}


.culture__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 2rem;
    min-width: 300px;
}

.culture__item {
    background-color: var(--clr-white);
    padding: 1.5rem;
    border-radius: 1rem;
    /* border: 1px solid var(--clr-grid); */
    position: relative;
    z-index: 1;
    box-shadow: 0 0 20px -5px var(--clr-grid);
}

.culture h3 {
    font-size: 1.2rem;
    margin-bottom: .5rem;
    position: relative;
}

.culture h3::before {
    content:"";
    display: inline-block;
    width: 1rem;
    height: 2px;
    margin-right: .5rem;
    vertical-align: middle;
    background-color: var(--clr-accent);
}

.culture__item p {
    font-family: var(--font-Rob);
    font-size: clamp(clamp(1rem, 1.5vw, 1.25rem));
}

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

SECTION: CONTACT

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

section.contact {
    width: 100%;
}

@media (min-width: 48rem) {
    section.contact .wrapper {
        padding: 10rem 0;
    }
}

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

SECTION: FOOTER

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

footer {
    background-color: var(--clr-dark);
    color: var(--clr-white);
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 4rem;
    width: 100%;
    padding: 6rem 2rem;
    position: relative;
    z-index: 1;
}

footer > div:first-child {
    width: 100%;
    max-width: 16rem;
    margin-inline: auto;
}

footer .footer__logo {
    fill: rgb(255, 255, 255);
}

footer > div:last-child {
    display: grid;
    grid-template: repeat(2, 1fr) / 1fr;
    grid-auto-flow: row;
    width: 100%;
    gap: 4rem;
    margin-inline: auto;
    place-items: center;
}

.footer__adr {
    width: auto;
    max-width: 400px;

    p:last-of-type {
        padding: 1rem 0 0 0;
    }
}

footer p {
    color: var(--clr-white);
    font-size: clamp(.6rem, 5vw, 1.15rem);
}

footer h3,
footer h4,
footer p {
    text-align: center;
}

.footer__text {
    max-width: 26rem;
}

.footer__socials {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
    padding: 2rem 0;
    fill: var(--clr-accent);
}

    .footer__socials svg {
        width: 2rem;
        height: 2rem;
    }

.designer {
    background-color: var(--clr-dark);
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
    padding-bottom: 1rem;

    p {
        font-family: var(--font-PopSemi);
        font-size: 1rem;
        color: white;
    }
}

 @media (min-width: 48rem) {
    footer > div:last-child {
        grid-template: 1fr / 1fr 1.5fr;
        place-items: center;
        gap: 10rem;
        width: calc(var(--grid-max) - 10rem);
        max-width: var(--grid-max);
        margin-inline: auto;
    }

    .footer__adr {
        max-width: 28rem;
        justify-self: right;
    }

    footer h3,
    footer h4,
    footer p {
        text-align: left;
    }

    .footer__text {
    justify-self: left;
}
} 

/* footer * {
    border: 1px solid red;
} */