@layer fonts {
    /* Lato Black Italic */
    @font-face {
        font-display: swap;
        font-family: 'Lato'; /* Added fallback name */
        font-style: normal;
        font-weight: 700;
        src: local('Arial'); /* Placeholder to prevent parse errors */
    }
         
    /* Montserrat Variable */
    @font-face {
        font-display: swap;
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 350;
        src: local('Arial');
    }

    /* Poppins Regular */
    @font-face {
        font-display: swap;
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 300;
        src: local('Arial');
    }
         
    :root {
        --ff-mono: 'Space Mono', 'Courier New', Courier, monospace;
        --fs-56: calc(56 / 16 * 1rem);
        --fs-48: calc(48 / 16 * 1rem);
        --fs-40: calc(40 / 16 * 1rem);
        --fs-32: calc(32 / 16 * 1rem);
        --fs-24: calc(24 / 16 * 1rem);
        --fs-20: calc(20 / 16 * 1rem);
        --fs-15: calc(15 / 16 * 1rem);
        --fs-10: calc(10 / 16 * 1rem); /* Fixed duplicate key name */
    }

    h1 {
        font-size: var(--fs-40);
        letter-spacing: -2.5px;
    }

    h2 {
        font-size: var(--fs-32);
        letter-spacing: -2.14px;
    }

    h3 {
        font-size: var(--fs-20);
        letter-spacing: -0.89px; /* Added px */
    }

    h4 {
        font-size: var(--fs-15);
        letter-spacing: -0.55px; /* Added px */
    }

    h5 {
        font-size: var(--fs-10);
        letter-spacing: -0.30px; /* Added px */
    }
}

@layer colors {
    :root {
        --c-light-blue: #60CBF5;
        --c-yellow: #F7E032; /* Fixed missing value */
        --c-xdark-navy: #0f172a; /* Fixed missing value */
        --c-white: #ffffff; /* Fixed missing value */
        --c-black: #000000;
        --c-pink: #E5328D;
    }
}

@layer global {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        font-family: 'Poppins', sans-serif; /* Fixed empty quotes */
        font-size: var(--fs-15);
    }

    img {
        display: grid;
        max-width: 100%;
        height: auto;
    }

    h1, h2, h3, p {
        text-wrap: balance;
    }

    h1, h2, h3 {
        font-family: var(--ff-mono);
        margin: 0;
        line-height: 1.1;
    }

    p {
        line-height: 1.6;
        margin: 0;
    }

    a {
        text-decoration: none;
    }

    header ul,
    footer ul {
        margin: 0;
        padding: 0;

        li {
            list-style-type: none;
        }
    }

    .visually-hidden {
        position: absolute;
        left: -10000px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }
}

@layer layout {
    .wrapper {
        display: grid;
        grid-template-columns: 1fr calc(100% - 64px) 1fr;

        @media (width >= calc(700 / 16 * 1rem)) {
            grid-template-columns: 1fr min(calc(100% - 80px), calc(1100 / 16 * 1rem)) 1fr;
        }

        &.fd-col {
            display: grid;
            grid-template-columns: 1fr repeat(3, calc(calc(100% - 64px) / 3)) 1fr;

            @media (width >= calc(700 / 16 * 1rem)) {
                grid-template-columns: 1fr repeat(6, calc(calc(100% - 80px) / 6)) 1fr;
            }

            @media (width >= calc(1000 / 16 * 1rem)) {
                grid-template-columns: 1fr repeat(12, calc(calc(1100 / 16 * 1rem) / 12)) 1fr;
            }
        }

        &.small {
            @media (width >= calc(700 / 16 * 1rem)) and (width < calc(1000 / 16 * 1rem)) {
                grid-template-columns: 1fr min(calc(100% - 200px), calc(1000 / 16 * 1rem)) 1fr;
            }
        }

        > * {
            grid-column: 2;
        }

        > .fullbleed {
            grid-column: 1 / -1;
        }
    }
}

@layer button {
    .button {
        display: block;
        background: var(--c-light-blue);
        width: fit-content;
        padding: 12px 38px;
        color: var(--c-xdark-navy);
        font-family: var(--ff-mono);
        border: 3px solid var(--c-light-blue);
        transition: 150ms ease-in-out;
        transition-property: color, border-color, background-color;

        &:hover {
            background: transparent;
            border: 3px solid var(--c-xdark-navy);
        }

        &:hover-white {
            background: transparent;
            border: 3px solid var(--c-white);
        }
    }
}

@layer header {
    .header {
        padding-block: 20px;
        align-items: center;

        .header-logo-link,
        .header-links {
            grid-row: 1;
        }

        .header-logo-link {
            z-index: 12;
            justify-content: center;
            width: calc(75 / 16 * 1rem);

            @media (width >= calc(700 / 16 * 1rem)) {
                justify-self: start;
                width: calc(108 / 16 * 1rem);
            }

            &:hover path {
                fill: var(--c-light-blue); /* Fixed empty var */
            }
        }
        
        .header-logo-link {
            @media (width < calc(700 / 16 * 1rem)) {
                justify-content: flex-end;
            }
        }

        .header-links {
            justify-self: start;
            display: grid;
            align-items: center;

            @media (width >= calc(700 / 16 * 1rem)) {
                padding-left: 167px;
                width: 100%;
            }
        }
    }
}

@layer topnav {
    .topnav {
        z-index: 10;

        &::before {
            content: '';
            position: fixed;
            inset: 64px 0 0 0;
            background: var(--c-light-blue);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s ease-in-out;
        }

        &:has(.topnav__open[aria-expanded='true'])::before {
            opacity: 1;
        }
    }

    /* Fixed heavily nested media queries breaking here */
    .topnav__open /* button */ {
        translate: 0 2px;
        background: none;
        border: none;
        padding: 0;

        @media (width >= calc(700 / 16 * 1rem)) {
            display: none;
        }
    }

    .topnav:has(.topnav__open[aria-expanded='true']) {
        .topnav__open {
            display: none;
        }

    /* + */ /* .topnav__menu  */.topnav__menu-content {
        opacity: 0;
        translate: 0; 

        @media (prefers-reduced-motion) {
            opacity: 1;
            }
        }

        + .topnav__menu-content::before{
            opacity: 1;
        }   

        /* + .topnav__menu  */.topnav__close {
            display: block;
        }
    }

    /* Moved these cleanly outside button nesting */
    .topnav__close {
        display: none;
        margin-inline-start: auto;
        margin-block-end: 8rem;
        position: absolute;
        top: 18px;

        img {
            width: 2.5rem;
        }
    }

    .topnav__menu-content {
        display: flex;
        justify-content: space-between;

        @media (width < calc(700 / 16 * 1rem)) {
            opacity: 0;
            flex-direction: column;
            position: fixed;
            inset: 64px 120px 0 0;
            padding: 64px 32px 24px;
            background-color: darkblue;
            translate: -100vw 0;
            transition: translate 0.5s ease-in-out;
            transition-property: opacity;
        }

        @media (width < calc(700 / 16 * 1rem)) and (prefers-reduced-motion) {
            translate: 0;
            opacity: 0;
            transition: opacity 500ms ease-in-out;
        }
    }

    .topnav__links {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin: 0;
        padding: 0;

        @media (width < calc(700 / 16 * 1rem)) {
            flex-direction: column;
            align-items: stretch;
        }
    }

    .topnav__item {
        list-style-type: none;
    }

    .topnav__link {
        font-family: var(--ff-mono); /* Fixed missing value */
        font-weight: 700;
        color: var(--c-black);
        transition: color 150ms ease-in-out;

        @media (width >= calc(700 / 16 * 1rem)) {
            color: var(--c-black);
        }

        &:hover {
            color: var(--c-pink);
        }
    }
}

@layer hero {
    .hero {
        position: relative;
        width: 100%;
        max-width: 100%;
        height: 80vh;

        @media (width < calc(700 / 16 * 1rem)) {
            width: 100vw;
        }
    }

    .hero-background {
        display: block;
        width: 100%;
        height: 80vh;
    }

    .hero-text {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--c-white);
        background: rgba(0, 0, 0, 0.3);
        text-align: center;
        font-size: var(--fs-40);
    }
}

@layer services {
    .services {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        padding: 2rem;
        max-width: 1200px;
        margin: 0 auto;
    }

    .card {
        display: flex;
        flex-direction: column;
        background-color: var(--c-yellow);
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        height: 100%;
    }

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

    .card-content {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .card-content-title h3 {
        margin-top: 0;
        margin-bottom: 0.75rem;
        color: #333333;
    }

    .card-content-text p {
        margin: 0 0 1.5rem 0;
        color: #666666;
        line-height: 1.5;
    }
}

@layer realisations {
    .realisations {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }

    .slider {
        position: relative;
        background: #000116;
        width: 800px;
        min-height: 250px;
        margin: 20px;
        overflow: hidden;
        border-radius: 10px;
    }

    .slider .slide{
        position: absolute;
        width: 100%;
        height: 100%;
        clip-path: circle(0% at 50%);
    }

    .slider .slide.active{
        clip-path: circle(150% at 0 50%);
        transition: 2s;
    }

    .slider .slide img{
        position: absolute;
        width: 97.5%;
        height: 93%;
        object-fit: cover;
        left: 0;
    }

    .slider .slide .info{
        position: absolute;
        color: #222;
        background: rgba(255, 255, 255, 0.3);
        width: 75%;
        margin-top: 50px;
        margin-left: 50px;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 5px 25px rgb(1, 1, 1 / 5%);
    }

    .slider .slide .info h2{
        font-size: 2em;
        font-weight: 800;
    }

    .slider .slide .info p{
        font-size: 1em;
        font-weight: 400;
    }

    .navigation{
        height: 250px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    .slider:hover, .navigation{
        opacity: 1;
    }

    .prev-btn, .next-btn{
        z-index: 999;
        font-size: 2em;
        color: #222;
        background: rgba(250, 250, 250, 0.8);
        padding: 10px;
        cursor: pointer;
    }

    .prev-btn{
        border-top-right-radius: 3px;
       border-bottom-right-radius: 3px;
    }

    .next-btn{
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }

    .navigation-visibility{
        z-index: 999;
        display: flex;
        justify-content: center;
    }

    .navigation-visibility .slide-icon{
        z-index: 999;
        background: rgba(255, 255, 255, 0.5);
        width: 20px;
        height: 10px;
        transform: translateY(-50px);
        margin: 0 6px;
        border-radius: 2px;
        box-shadow: 0 5px 25px rgb(1 1 1 / 20%);
    }

    .navigation-visibility .slide-icon.active{
        background: var(--c-light-blue) /*#4285F4*/;
    }

    .section{
        background: #3c40c6;
        padding: 1em 0 1em 0;
    }
}

@layer footer {
    .footer {
        background-color: var(--c-light-blue);
        color: var(--c-white);
        padding: 20px;
    }

    .footer-content {
        display: grid;
        grid-template-columns: repeat(3, auto);
        align-items: center;
        justify-content: space-between;
        gap: 15px;
    }

    .footer-content a {
        color: var(--c-white);
        text-decoration: none;
    }

    .etsKim-adress {
        display: flex;
        align-items: center;
        gap: 5px;
    }
}