:root { 
    --ff_geist: 'Geist', sans-serif;
    --color-accent: #63e;
}

body {
    font-family:var(--ff_geist);
    font-size: 18px;
    background-color: #000;
    color: #ececfb;
    letter-spacing: 1.2px
}
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

h1, h2, h3,
h4, h5, h6 { font-family: "Silkscreen", sans-serif; text-transform: uppercase; line-height: 1; }
h1 { font-size: 6rem;  letter-spacing: -6px; }
h2 { font-size: 3rem; }

h1 span,
h2 span { color: var(--color-accent);}

.lines { position: fixed; inset: 0; z-index: -1; display: flex; flex-wrap: wrap; max-width: 1200px; width: calc(100% - 40px); margin-inline:auto; }
.lines .line { width: calc(100% / 4); border: 1px solid #181818; border-top: 0; border-bottom: 0; }
.lines .line + .line { border-left: 0;}

.button { display: inline-block; padding: 10px 60px; border: 1px solid #717171; font-size: 18px; font-weight: 600; text-transform: uppercase;  border-radius: 4px; }
.button:hover { background-color: var(--color-accent); border-color: var(--color-accent); }
.button.button-solid { background-color: var(--color-accent); border-color: var(--color-accent); }

.container { width: 100%; max-width: 1200px; margin-inline: auto; }
.nav-link { width: calc(100% / 3); display: flex; }
.nav-link a { padding-inline: 5px; font-size: 16px; font-weight: 600;}
.nav-link.menu { justify-content: center; }
.nav-link.menu a { display: block; width: 150px;}
.nav-link.social svg{ width: 20px; }
.nav-link a:hover { color: var(--color-accent); }
.logo a{ letter-spacing: 3px; }

.intro { margin-top: 80px;}
.intro-col { width: 50%; }
.intro-copy { max-width: 530px;}
.intro-thumb { width: 80%; aspect-ratio: 600 / 760; margin-inline: auto; position: relative; }
.intro-thumb::before { content: ''; position: absolute; inset: 0; transform: translate(20px, 20px); background-color: var(--color-accent);}
.intro-thumb img { display: block; width: 100%; height: 100%; object-fit: cover;}
.intro-gallery { border-top: 1px solid #181818; border-bottom: 1px solid #181818; }
.intro-gallery__item { width: 50%; aspect-ratio: 1; border-bottom: 1px solid #181818; }
.intro-gallery__item svg { width: 100px; }
.intro-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover;}


.project-col { width: 50%; }
.project-col-sm { width: 50%; }
.pcard { width: calc(100% - 60px); border: 1px solid #181818;  margin-inline: auto; background: #0c0c0c; height: 100%; border-radius: 4px; }
.pcard h2 { font-size: 22px; font-weight: bold; text-transform: initial; padding-bottom: 10px; margin-bottom: 50px; border-bottom: 1px solid var(--color-accent); font-family: var(--ff_geist);}
.pcard p { color: #9d9d9d; }
.pcard .button { font-size: 14px; border-radius: 4px;}
.project-col-sm .pcard { width: 100%;  }
.project-copy h2 span { color: var(--color-accent); text-decoration: underline; text-underline-offset: 5px;}
/*  */
.project-stats { border: 1px solid #181818; margin-bottom: 80px;  }
.project-stat { width: 25%; padding: 20px;  background: #0c0c0c; text-align: center; }
.project-stat span.label { display: block; font-size: 25px; color: var(--color-accent) }
.project-stat h2 { font-size: 40px; }

.pills { font-size: 14px; font-weight: bold;  }
.pills li { padding: 3px 15px; background-color: #333; border-radius: 4px;}
.pills li:first-child{ background-color: initial; padding: 3px 10px 3px 0; width: 100%; }


.hover-accent { position: relative; }
.hover-accent::after,
.hover-accent::before{
    content: "";
    height: 70px;
    width: 3px;  
    position: absolute;
    top: 65%; 
    opacity: 0;
    transition: top, opacity;
    transition-duration: 600ms;
    transition-timing-function: ease;
    background: linear-gradient( transparent, #63e, transparent );
    opacity: 0;
    z-index: -1;
}
.hover-accent::after{ right: -2px; }
.hover-accent::before{ left: -2px; }
.hover-accent:hover::after,
.hover-accent:hover::before {
    top: 20%;
    opacity: 1;
}

.bnw-img { 
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}
.intro-thumb { position: relative; }


.contact { height: 100vh;  }
.contact .bxd {  border-radius: 20px; background-color: #333; width: 100%; max-width: 500px; padding: 50px; border: 1px solid #181818; background: #0c0c0c;}
.contact .button:hover { background-color: rgb(71, 207, 115); border-color: rgb(71, 207, 115);}

footer { background-color: var(--color-accent); color: #fff; }

.pcard .thumb { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 20px; background-image: linear-gradient(135deg, #833bed 0%, #853ec1 100%); border-radius: 10px; }
.pcard .thumb img { display: block; width: 100%; height: 100%; object-fit: cover;}


.heartbeat { animation: beat .25s infinite alternate; transform-origin: center; display: inline-block; font-size: 30px; }
@keyframes beat{
	to { transform: scale(1.2); }
}



@media (max-width: 1200px) {
    .container { width: calc(100% - 40px); }
    h1 { font-size: 5rem;}
}

@media (max-width: 991px) {
    body, .button { font-size: 16px; }
    .container { width: calc(100% - 40px); }
    h1 { font-size: 3rem;}
    .project-stat { width: 50%; }
    .project-col { width: 100%; }
    .project-object {max-width: 500px; height: 300px; margin-inline:auto;}
}

@media (max-width: 767px) {
    :root{
        --grad: linear-gradient(0deg, hsla(256, 85%, 57%, 1) 0%, hsla(256, 100%, 53%, 1) 100%);

    }
    header { position: absolute; top: 0; left: 0; width: 100%; z-index: 1000; }
    h1 span { font-size: 2.5rem;}
    .intro { margin-top: 0; margin-inline: calc(50% - 50vw);   }
    .intro-col__thumb { background-image: var(--grad); min-height: 250px; position: relative; }
    .intro-col { width: 100%; position: relative; }
    .intro-thumb { max-width: 200px; aspect-ratio: 1; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); transition: all 0.8s linear } 
    .intro-thumb::before{ background-image: var(--grad); border-radius: 50%; inset: initial; top: 50%; left: 50%;  transform: translate(-50%, -50%); width: calc(100% + 10px);  height: calc(100% + 10px);}
    .intro-thumb img { object-fit: cover; border-radius: 50%;}
    .intro-col__content { width: 100%;  padding: 150px 30px 0; text-align: center; }
    .intro-copy { max-width: 70%; margin-inline: auto;}

    .intro-gallery__item { width: 25%; }
    .intro-gallery__item svg { max-width: 60px;}
    .project-col-sm { width: 100%; }
    .contact .bxd{ width: calc(100% - 30px); padding: 30px; }
    .contact { height: auto; padding-block: 100px;}
    
    
}

@media (max-width: 575px) {
    .contact { padding-block: 50px;}
    .intro-copy { max-width: initial; }
    footer small { font-size: 10px;}
    .intro-gallery__item svg {  width: 30px; }
    .intro-gallery{ padding-inline: 20px; margin-bottom: 50px; }
    .nav-link { width: 50%; }
    .nav-link.menu a{ width: auto; }
    .nav-link.social { position: absolute; right: 0; top: 80px; width: 50px; flex-direction: column; padding-block: 10px; }
}