@import url(
    'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;900&display=swap'
);


/* VARIABLES */

:root {

    --black: #111111;

    --white: #f4f2ed;

    --grey: #9a9a95;

    --line: #30302e;

    --accent: #d9ff00;

}


/* RESET */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    background: var(--black);

    color: var(--white);

    font-family: "DM Sans", sans-serif;

    line-height: 1.5;

}


a {

    color: inherit;

    text-decoration: none;

}


button {

    font-family: inherit;

}


/* NAVBAR */

.navbar {

    position: sticky;

    top: 0;

    z-index: 100;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 24px 5vw;

    background: rgba(17, 17, 17, 0.95);

    border-bottom: 1px solid var(--line);

}


.logo {

    font-size: 1.4rem;

    font-weight: 900;

    letter-spacing: -0.05em;

}


.logo span {

    color: var(--accent);

    font-size: 0.7rem;

}


nav {

    display: flex;

    gap: 35px;

    font-size: 0.8rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;

}


nav a {

    transition: color 0.2s ease;

}


nav a:hover {

    color: var(--accent);

}


.menu-toggle {

    display: none;

    color: var(--white);

    background: none;

    border: none;

    cursor: pointer;

}


/* GENERAL */

.eyebrow,
.section-number {

    color: var(--grey);

    font-size: 0.7rem;

    text-transform: uppercase;

    letter-spacing: 0.15em;

}


/* HERO */

.hero {

    position: relative;

    min-height: 90vh;

    padding: 8vw 5vw;

    overflow: hidden;

}


.hero-number {

    position: absolute;

    top: 5vw;

    right: 5vw;

    font-size: 12rem;

    font-weight: 900;

    line-height: 0.8;

    color: #1d1d1b;

    pointer-events: none;

}


.hero-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

    padding-top: 7vw;

}


.hero h1 {

    margin-top: 25px;

    font-size: clamp(4rem, 10vw, 10rem);

    font-weight: 900;

    line-height: 0.88;

    letter-spacing: -0.08em;

}


.hero h1 span {

    display: block;

    color: var(--accent);

}


.hero-description {

    max-width: 450px;

    margin-top: 40px;

    color: var(--grey);

    font-size: 1rem;

}


.circle-button {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 110px;

    height: 110px;

    margin-top: 50px;

    border: 1px solid var(--white);

    border-radius: 50%;

    font-size: 0.7rem;

    text-transform: uppercase;

    transition: all 0.3s ease;

}


.circle-button:hover {

    background: var(--accent);

    color: var(--black);

    border-color: var(--accent);

    transform: rotate(15deg);

}


.hero-shape {

    position: absolute;

    right: -5vw;

    bottom: -20vw;

    width: 55vw;

    height: 55vw;

    border-radius: 50%;

    background: var(--accent);

}


.shape-text {

    position: absolute;

    top: 15%;

    left: 10%;

    color: var(--black);

    font-size: 0.7rem;

    font-weight: 700;

}


/* INTRO */

.intro {

    display: grid;

    grid-template-columns: 1fr 3fr;

    gap: 50px;

    padding: 12vw 8vw;

    border-top: 1px solid var(--line);

}


.intro-content {

    max-width: 900px;

}


.intro h2 {

    font-size: clamp(3rem, 7vw, 7rem);

    font-weight: 900;

    line-height: 0.95;

    letter-spacing: -0.06em;

}


.intro h2 span {

    display: block;

    color: var(--grey);

}


.intro-content > p {

    max-width: 550px;

    margin-top: 50px;

    color: var(--grey);

    font-size: 1.1rem;

}


/* WORK */

.work {

    padding: 8vw 5vw;

}


.section-top {

    display: flex;

    justify-content: space-between;

    margin-bottom: 70px;

}


.section-top > p:last-child {

    color: var(--grey);

}


/* PROJECT */

.project {

    margin-bottom: 100px;

}


.project-visual {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 600px;

    overflow: hidden;

}


.project-one .project-visual {

    background: #e5e1d8;

    color: var(--black);

}


.project-two .project-visual {

    background: #252525;

}


.project-three .project-visual {

    background: var(--accent);

    color: var(--black);

}


.project-large-number {

    position: absolute;

    top: 30px;

    left: 35px;

    font-size: 0.8rem;

    font-weight: 700;

}


.project-word {

    font-size: clamp(5rem, 15vw, 15rem);

    font-weight: 900;

    letter-spacing: -0.1em;

    transition: transform 0.6s ease;

}


.project:hover .project-word {

    transform: scale(1.08) rotate(-2deg);

}


.project-details {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 22px 0;

    border-bottom: 1px solid var(--line);

}


.project-category {

    margin-bottom: 6px;

    color: var(--grey);

    font-size: 0.65rem;

    text-transform: uppercase;

    letter-spacing: 0.12em;

}


.project-details h3 {

    font-size: 1.6rem;

    font-weight: 500;

}


.project-arrow {

    font-size: 2rem;

    transition: transform 0.3s ease;

}


.project:hover .project-arrow {

    transform: translate(5px, -5px);

}


/* SERVICES */

.services {

    display: grid;

    grid-template-columns: 1fr 3fr;

    gap: 50px;

    padding: 12vw 8vw;

    background: var(--white);

    color: var(--black);

}


.services-content {

    max-width: 1000px;

}


.services h2 {

    font-size: clamp(4rem, 8vw, 8rem);

    font-weight: 900;

    line-height: 0.85;

    letter-spacing: -0.08em;

}


.services h2 span {

    color: #888883;

}


.services-list {

    margin-top: 80px;

}


.service {

    display: grid;

    grid-template-columns: 60px 1fr;

    align-items: center;

    padding: 28px 0;

    border-top: 1px solid #c9c7c0;

}


.service span {

    color: #888883;

    font-size: 0.75rem;

}


.service h3 {

    font-size: clamp(1.3rem, 3vw, 2.5rem);

    font-weight: 500;

    transition: transform 0.3s ease;

}


.service:hover h3 {

    transform: translateX(15px);

}


/* STATEMENT */

.statement {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 80vh;

    padding: 10vw 6vw;

}


.statement-text {

    max-width: 1100px;

    font-size: clamp(3.5rem, 8vw, 9rem);

    font-weight: 900;

    line-height: 0.9;

    letter-spacing: -0.08em;

}


.statement-text span {

    color: var(--accent);

}


/* CONTACT */

.contact {

    min-height: 80vh;

    padding: 12vw 8vw;

    border-top: 1px solid var(--line);

}


.contact h2 {

    max-width: 900px;

    margin-top: 40px;

    font-size: clamp(4rem, 9vw, 9rem);

    font-weight: 900;

    line-height: 0.85;

    letter-spacing: -0.08em;

}


.contact h2 span {

    display: block;

    color: var(--accent);

}


.contact-button {

    margin-top: 60px;

    padding: 18px 30px;

    background: var(--accent);

    color: var(--black);

    border: none;

    cursor: pointer;

    font-size: 0.8rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    transition: transform 0.3s ease;

}


.contact-button:hover {

    transform: translateY(-5px);

}


.contact-message {

    display: none;

    margin-top: 20px;

    color: var(--grey);

}


.contact-message.show {

    display: block;

}


/* FOOTER */

footer {

    display: flex;

    justify-content: space-between;

    padding: 30px 5vw;

    border-top: 1px solid var(--line);

    color: var(--grey);

    font-size: 0.7rem;

}


.footer-logo {

    color: var(--white);

    font-weight: 900;

}


/* MOBILE */

@media (max-width: 750px) {

    nav {

        display: none;

        position: absolute;

        top: 70px;

        left: 0;

        right: 0;

        flex-direction: column;

        gap: 20px;

        padding: 25px 6vw;

        background: var(--black);

        border-bottom: 1px solid var(--line);

    }


    nav.open {

        display: flex;

    }


    .menu-toggle {

        display: block;

    }


    .hero {

        min-height: 85vh;

        padding: 15vw 7vw;

    }


    .hero-number {

        font-size: 7rem;

    }


    .hero-shape {

        width: 100vw;

        height: 100vw;

        right: -35vw;

        bottom: -25vw;

    }


    .intro {

        grid-template-columns: 1fr;

        gap: 40px;

        padding: 18vw 8vw;

    }


    .section-top {

        display: block;

    }


    .section-top > p:last-child {

        margin-top: 15px;

    }


    .project-visual {

        min-height: 400px;

    }


    .project-word {

        font-size: 24vw;

    }


    .services {

        grid-template-columns: 1fr;

        padding: 18vw 8vw;

    }


    .services-list {

        margin-top: 60px;

    }


    .statement {

        min-height: 60vh;

    }


    .contact {

        min-height: 65vh;

    }
    /* =========================================
   WORK / CASE STUDIES PAGE
========================================= */


.work-hero {

    padding: 12vw 8vw 10vw;

    border-bottom: 1px solid var(--line);

}


.work-hero h1 {

    max-width: 1000px;

    margin-top: 50px;

    font-size: clamp(5rem, 12vw, 12rem);

    font-weight: 900;

    line-height: 0.8;

    letter-spacing: -0.09em;

}


.work-hero h1 span {

    display: block;

    color: var(--accent);

}


.work-intro {

    max-width: 500px;

    margin-top: 60px;

    margin-left: 35%;

    color: var(--grey);

    font-size: 1rem;

}


/* CASE STUDIES */

.case-studies {

    padding: 8vw 5vw;

}


.case-study {

    position: relative;

    margin-bottom: 15vw;

}


.case-number {

    position: absolute;

    top: -30px;

    left: 20px;

    z-index: 2;

    font-size: 0.7rem;

    font-weight: 700;

}


/* VISUAL */

.case-visual {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 70vh;

    overflow: hidden;

}


.case-visual span {

    font-size: clamp(5rem, 18vw, 18rem);

    font-weight: 900;

    line-height: 0.8;

    letter-spacing: -0.12em;

    transition: transform 0.8s ease;

}


.case-study:hover .case-visual span {

    transform: scale(1.12) rotate(-3deg);

}


.case-visual-one {

    background: var(--white);

    color: var(--black);

}


.case-visual-two {

    background: #292929;

    color: var(--white);

}


.case-visual-three {

    background: var(--accent);

    color: var(--black);

}


/* CASE CONTENT */

.case-content {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 50px;

    padding: 30px 0;

    border-bottom: 1px solid var(--line);

}


.case-content h2 {

    margin-top: 10px;

    font-size: clamp(2rem, 5vw, 5rem);

    font-weight: 900;

    line-height: 0.9;

    letter-spacing: -0.06em;

}


.case-description {

    max-width: 450px;

    color: var(--grey);

}


.case-description a {

    display: inline-block;

    margin-top: 30px;

    padding-bottom: 5px;

    color: var(--white);

    border-bottom: 1px solid var(--white);

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 0.1em;

}


.case-description a:hover {

    color: var(--accent);

    border-color: var(--accent);

}


/* REVERSED PROJECT */

.case-study-reverse {

    padding-left: 12%;

    padding-right: 12%;

}


.case-study-reverse .case-number {

    left: 14%;

}


/* CASE DETAILS */

.case-detail {

    padding: 12vw 8vw;

    background: var(--white);

    color: var(--black);

}


.case-detail h2 {

    max-width: 1000px;

    margin-top: 50px;

    font-size: clamp(4rem, 9vw, 9rem);

    font-weight: 900;

    line-height: 0.85;

    letter-spacing: -0.08em;

}


.case-detail-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 60px;

    margin-top: 100px;

}


.case-detail-grid > div {

    padding-top: 20px;

    border-top: 1px solid #c7c5bf;

}


.detail-label {

    margin-bottom: 20px;

    color: #777;

    font-size: 0.65rem;

    text-transform: uppercase;

    letter-spacing: 0.15em;

}


.case-detail-grid p:not(.detail-label) {

    max-width: 350px;

    color: #555;

}


/* DARK CASE STUDY */

.dark-detail {

    background: #202020;

    color: var(--white);

}


.dark-detail .case-detail-grid > div {

    border-color: var(--line);

}


.dark-detail .case-detail-grid p:not(.detail-label) {

    color: var(--grey);

}


/* CTA */

.work-cta {

    min-height: 80vh;

    padding: 12vw 8vw;

}


.work-cta h2 {

    max-width: 1000px;

    margin-top: 40px;

    font-size: clamp(5rem, 11vw, 11rem);

    font-weight: 900;

    line-height: 0.8;

    letter-spacing: -0.09em;

}


.work-cta h2 span {

    display: block;

    color: var(--accent);

}


.work-cta .contact-button {

    display: inline-block;

    margin-top: 60px;

    text-decoration: none;

}


/* MOBILE */

@media (max-width: 750px) {


    .work-hero {

        padding: 18vw 7vw;

    }


    .work-hero h1 {

        margin-top: 40px;

        font-size: 20vw;

    }


    .work-intro {

        margin-left: 0;

        margin-top: 50px;

    }


    .case-studies {

        padding: 18vw 7vw;

    }


    .case-study {

        margin-bottom: 25vw;

    }


    .case-study-reverse {

        padding-left: 0;

        padding-right: 0;

    }


    .case-study-reverse .case-number {

        left: 20px;

    }


    .case-visual {

        min-height: 55vh;

    }


    .case-visual span {

        font-size: 25vw;

    }


    .case-content {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .case-detail {

        padding: 18vw 8vw;

    }


    .case-detail-grid {

        grid-template-columns: 1fr;

        gap: 40px;

        margin-top: 60px;

    }


    .work-cta {

        min-height: 65vh;

        padding: 18vw 8vw;

    }


    .work-cta h2 {

        font-size: 20vw;

    }

}


    footer {

        flex-direction: column;

        gap: 10px;

    }

}