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

        body {
              font-family: 'Mona Sans', Roboto, Helvetica, Arial, sans-serif;  
  background-color: #fff;
  font-size: 17px;
    line-height: 1.4;
    color: #333;
        }

        /* Header - FIXED AND OVERLAYING */
        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.5rem;
            /* CHANGED: Uncommented position fixed and made it overlay */
            /* position: fixed; Makes the header stay in place */
            top: 0; /* Aligns to the top of the viewport */
            left: 0; /* Aligns to the left of the viewport */
            width: 100%; /* Makes it span the full width */
            z-index: 1000; /* Ensures it's always on top */
           background: #E2E6E0;
        }

        .logo {
            width: 32px;
            height: 32px;
           
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
         
            font-size: 12px;
            font-weight: bold;
        }

        .site-logo {
            height: 20px; /* This controls the height of your logo */
            width: auto; /* This maintains the aspect ratio. You can set a fixed width if needed. */
            display: block;
        }

.site-logo-link {
    text-decoration: none; /* Removes underline from the link */
    display: flex; /* Ensures the link behaves like a flex item for alignment */
    align-items: center; /* Vertically aligns the image within the link */
}

        .site-title {
            font-size: 18px;
            font-weight: 500;
        }

        .menu-btn {
            width: 32px;
            height: 32px;
            background: none;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .menu-icon {
            width: 20px;
            height: 20px;
        }

        /* Hero Section - FLUSH TO TOP */
        .hero {
            background-color: #E2E6E0;
            color: #333;
            text-align: center;
            position: relative;
            min-height: 70vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* CHANGED: Removed all margins and made padding flush to top */
            padding: 0 0 2rem 0; /* No top padding, no horizontal padding */
            margin: 0; /* Ensure no margin */
            width: 100vw; /* Force full viewport width */
            margin-left: calc(-50vw + 50%); /* Center while extending full width */
        }

        .hero-content {
            max-width: 800px; /* Limit content width while keeping background full-width */
            margin: 0 auto;
            padding: 0 1.5rem; /* Add horizontal padding to content */
        }

        .hero .project-label {
            font-size: 1rem;
            font-weight: 400;
            margin-bottom: 1rem;
            opacity: 0.8;
        }
        
        .hero-image {
            position: absolute;
            bottom: -600px; /* Negative value to make it peek below the hero section */
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            height: 100%;
            max-width: 1085px;
                border-radius: 5px;
                object-fit: cover;
            z-index: 10; /* Ensure it's above the hero background but below the header */
        }

        .hero h1 {
         font-family: "Familjen Grotesk", sans-serif;     
            font-size: 40px;
            line-height: 1.2;
            margin-bottom: 2rem;
            font-weight: 500;
        }

        .familjen-grotesk-<uniquifier> {
          font-family: "Familjen Grotesk", sans-serif;
          font-optical-sizing: auto;
          font-weight: <weight>;
          font-style: normal;
        }

        .hero em {
            font-style: italic;
        }

        /* Portfolio Grid - ADJUSTED TOP PADDING */
        .portfolio {
            padding: 100px 1.5rem 6rem; /* Increased top padding to account for the peeking image */
            max-width: 1150px;
            margin: 0 auto;
        }

        .portfolio-item {
            width: 100%;
            height: 650px;
            margin-bottom: 0.5rem;
            border-radius: 5px;
            overflow: hidden;
            position: relative;
        }

        .portfolio-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .portfolio-entry {
                        margin-top: 4rem; /* Space between each project entry */
            margin-bottom: 4rem; /* Space between each project entry */
        }

        .portfolio-entry-top {
            /*margin-bottom: 4rem;  Space between each project entry */
            margin-top: 4rem; /* Space between each project entry */
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .portfolio-details {
            display: flex;
            justify-content: space-between;
            align-items: flex-end; /* Align text to the bottom */
            padding-top: 0.5rem; /* Space between image and text */
            font-size: 0.85rem; /* Smaller font size */
            font-weight: 400; /* Medium weight */
            text-transform: uppercase; /* Uppercase text */
            color: #333; /* Dark text color */
        }

        .portfolio-details .project-name {
            white-space: nowrap; /* Prevent text from wrapping */
            font-weight: 600;
        }

        .portfolio-details .project-category {
            white-space: nowrap; /* Prevent text from wrapping */
            color: #a29f9f;
        }

        .portfolio-item2 {
            width: 100%;
            aspect-ratio: 4/4;
            margin-bottom: 0;
            border-radius: 5px;
            overflow: hidden;
            position: relative;

            /* New: Background color and flex properties for centering text */
            background-color: #01635D; /* Purple background */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white; /* Text color */
        }

        /* New: Styles for text inside portfolio items */
        .portfolio-item2 h2 {
            font-size: 2rem; /* Big text size */
            margin-bottom: 0.5rem;
            font-weight: bold;
            line-height: 1.2;
            color: #D5EE71;
        }

        .portfolio-item2 p {
            font-size: 1rem; /* Small text size */
            max-width: 80%; /* Prevent text from being too wide */
            line-height: 1.4;
        }

        /* New: Brief section styles */
        .brief-section {
            padding: 0rem 1.5rem; /* Padding around the section */
            max-width: 800px; /* Same max-width as portfolio */
            margin: 0 auto; /* Center the section */
        }

        .brief-section h3 {
            font-size: 0.75rem; /* Small, uppercase title */
            font-weight: 500;
            text-transform: uppercase;
            margin-bottom: 1rem;
            color: #333;
        }

        .brief-section p {
            font-size: 17px; /* Paragraph text size */
            line-height: 1.4;
            color: #333;
            margin-bottom: 1rem; /* Space between paragraphs */
        }


.portfolio-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

        /* Footer */
        .footer {
            padding: 4rem 1.5rem;
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
        }

        .footer-icon {
            width: 64px;
            height: 64px;
            background-color: #16a34a;
            border-radius: 50%;
            margin: 0 auto 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
        }

        .footer p {
              font-family: 'Mona Sans', Roboto, Helvetica, Arial, sans-serif;
            font-size: 18px;
            color: #666;
            margin-bottom: 1.5rem;
            max-width: 350px;
            margin-left: auto;
            margin-right: auto;
        }

        .cta-btn {
            background-color: black;
            color: white;
            padding: 1rem 2rem;
            border: none;
            border-radius: 10px;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.2s;
                text-decoration: none; /* ADDED: Removes underline from the button link */
    display: inline-block; /* Ensures padding and other box model properties work correctly */

        }

        .cta-btn:hover {
            background-color: #333;
        }

        /* New: Quote section styles */
        .quote-section {
            padding: 4rem 1.5rem; /* Default mobile padding */
            text-align: center;
        }

        .quote-section blockquote {
            font-size: 2rem; /* Large quote text */
            font-weight: 300; /* Light font weight */
            line-height: 1.4;
            margin: 0 auto 2rem; /* Center and add space below */
            max-width: 700px; /* Limit width for readability */
            font-style: italic; /* Italicize the quote */
            color: #333;
        }

        .quote-section .author-avatar {
            width: 80px; /* Size of the avatar */
            height: 80px;
            border-radius: 50%; /* Make it circular */
            object-fit: cover;
            margin-bottom: 1rem; /* Space below avatar */
        }

        .quote-section .author-name {
            font-size: 1.1rem;
            font-weight: bold;
            margin-bottom: 0.25rem;
            color: #333;
        }

        .quote-section .author-title {
            font-size: 0.9rem;
            color: #666;
        }

        /* New: Three-column section styles */
        .three-column-section {
            padding: 4rem 1.5rem; /* Default mobile padding */
            max-width: 800px;
            margin: 0 auto;
        }

        .three-column-section h3 {
            font-size: 0.75rem; /* Small, uppercase title */
            font-weight: 500;
            text-transform: uppercase;
            margin-bottom: 1rem;
            color: #333;
        }

        .three-column-container {
            display: flex;
            flex-direction: row; /* Changed to row for horizontal layout */
            flex-wrap: wrap; /* Allow columns to wrap on smaller screens if needed */
            justify-content: space-between; /* Distribute space between columns */
        }

        .three-column-container .column {
            flex: 1; /* Allow columns to grow and shrink */
            min-width: 250px; /* Minimum width before wrapping */
        }

        .three-column-container ul {
            list-style: none; /* Remove default list bullets */
            padding: 0;
            margin: 0;
        }

        .three-column-container li {
            font-size: 17px;
            line-height: 1.3;
            margin-bottom: 0.5rem;
            color: #333;
        }

        /* Bottom credits */
        .credits {
            padding: 0 1.5rem 2rem;
            max-width: 800px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            font-size: 15px;
            color: #999;
        }

        /* Responsive */
        @media (min-width: 768px) {
            .header {
                padding: 3rem 2rem 0rem 3rem;
            }

            .hero {
                padding: 0rem 2rem 2rem; /* CHANGED: Keep no top padding */
            }

            .hero h1 {
                font-size: 25px;
            }

            .portfolio {
                padding: 0 2rem 2rem;
            }

            .footer {
                padding: 4rem 2rem;
            }

            .credits {
                padding: 7rem 2rem 2rem;
            }
        }

        @media (min-width: 1024px) {
            .hero h1 {
                font-family: "Familjen Grotesk", sans-serif;     
                font-size: 65px;
            }

            /* New: Two-column grid for remaining portfolio items */
            .portfolio-grid-container {
                display: grid;
                grid-template-columns: 1fr 1fr; /* Two equal columns */
                gap: 3rem; /* Space between grid items */
            }

            .footer {
                padding: 4rem 2rem;
            }

            .credits {
                padding: 0 2rem 2rem;
            }
        }

        /* Smaller phones */
        @media (max-width: 599px) {
            .portfolio-item {
                width: 100%;
                height: 300px;
                margin-bottom: 0.5rem;
                border-radius: 5px;
                overflow: hidden;
                position: relative;
            }
        }