:root{

--black:#070707;

--white:#ffffff;

--paper:#f7f7f3;

--line:#d9d9d2;

--muted:#5d5d58;

--shadow:0 24px 70px rgba(0,0,0,.14);

--radius:8px;

}



*{

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

margin:0;

background:

linear-gradient(
90deg,
rgba(0,0,0,.04) 1px,
transparent 1px
),

linear-gradient(
180deg,
rgba(0,0,0,.04) 1px,
transparent 1px
),

var(--paper);


background-size:40px 40px;

color:var(--black);

font-family:Arial, Helvetica, sans-serif;

}



a{

text-decoration:none;

color:inherit;

}



/* HEADER */


.site-header{


position:sticky;

top:0;

z-index:20;


display:grid;

grid-template-columns:1fr auto 1fr;


align-items:center;


gap:20px;


padding:14px clamp(16px,4vw,60px);


background:rgba(247,247,243,.92);


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


backdrop-filter:blur(15px);


}





.brand{


display:flex;

align-items:center;

gap:12px;

font-weight:900;

}



.brand img{


width:45px;

height:45px;

object-fit:contain;


border-radius:50%;


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


background:white;


}




.main-nav{


display:flex;

gap:25px;

font-weight:bold;


}



.main-nav a:hover{

border-bottom:2px solid black;

}




.nav-action{


justify-self:end;


background:black;

color:white;


padding:12px 18px;


border-radius:8px;


font-weight:bold;


}






/* GENERAL */


h1,h2,h3,p{

overflow-wrap:anywhere;

}



h1{


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


line-height:.92;


margin:0;


}



h2{


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


line-height:.95;


margin:0;


}



h3{

margin:0;

}



.kicker{


color:var(--muted);


font-size:.8rem;


font-weight:900;


letter-spacing:.15em;


text-transform:uppercase;


margin-bottom:15px;


}
/* HERO */


.hero{


min-height:85vh;


display:grid;


grid-template-columns:1fr .9fr;


gap:60px;


align-items:center;


padding:60px clamp(16px,5vw,80px);


}





.hero-text{


margin-top:25px;


max-width:650px;


color:var(--muted);


font-size:1.2rem;


line-height:1.6;


}





.hero-actions{


display:flex;


gap:15px;


margin-top:30px;


flex-wrap:wrap;


}




.button{


display:inline-flex;


align-items:center;


justify-content:center;


padding:14px 22px;


border:2px solid black;


border-radius:8px;


font-weight:900;


}




.button-dark{


background:black;


color:white;


}




.button-light{


background:white;


color:black;


}





.contact-strip{


display:grid;


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


gap:10px;


margin-top:35px;


}



.contact-strip span{


background:white;


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


padding:15px;


border-radius:8px;


font-weight:bold;


color:var(--muted);


}




.hero-card{


background:white;


border:2px solid black;


border-radius:8px;


padding:30px;


box-shadow:var(--shadow),12px 12px 0 black;


position:relative;


}





.logo-stage{


height:350px;


display:grid;


place-items:center;


background:white;


}





.logo-stage img{


width:80%;


max-height:330px;


object-fit:contain;


}





.paper-stack{


position:absolute;


bottom:20px;


left:30px;


right:30px;


display:grid;


gap:8px;


}



.paper-stack span{


height:40px;


border:2px solid black;


background:#f7f7f3;


border-radius:6px;


}



.paper-stack span:nth-child(2){

margin-left:25px;

}



.paper-stack span:nth-child(3){

margin-left:50px;

}







/* SERVICES */



.services-section{


padding:80px clamp(16px,5vw,80px);


}



.section-heading{


margin-bottom:35px;


}





.service-grid{


display:grid;


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


gap:20px;


}




.service-grid article{


background:white;


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


padding:25px;


min-height:240px;


border-radius:8px;


transition:.3s;


}




.service-grid article:hover{


transform:translateY(-8px);


box-shadow:var(--shadow);


}





.service-grid span{


display:flex;


width:45px;


height:45px;


align-items:center;


justify-content:center;


background:black;


color:white;


border-radius:50%;


font-weight:bold;


margin-bottom:35px;


}




.service-grid p{


color:var(--muted);


line-height:1.6;


margin-top:15px;


}
/* GALLERY */


.print-gallery{


display:grid;


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


gap:18px;


}



.print-gallery img{


width:100%;


height:260px;


object-fit:cover;


border:2px solid black;


border-radius:8px;


background:white;


transition:.4s;


}



.print-gallery img:hover{


transform:scale(1.05);


box-shadow:var(--shadow);


}






/* VIDEO SLIDER */


.video-slider{


overflow:hidden;


width:100%;


}



.video-track{


display:flex;


gap:25px;


width:max-content;


animation:moveVideos 20s linear infinite;


}



.video-track:hover{


animation-play-state:paused;


}




.video-box{


width:380px;


background:white;


border:2px solid black;


padding:20px;


border-radius:8px;


}



.video-box h3{


margin-bottom:15px;


}



.video-box video{


width:100%;


height:260px;


object-fit:cover;


border-radius:8px;


}




@keyframes moveVideos{


from{


transform:translateX(0);


}


to{


transform:translateX(-50%);


}


}






/* CONTACT */



.contact-section{


padding:80px clamp(16px,5vw,80px);


display:grid;


grid-template-columns:1fr .6fr;


gap:40px;


}





.contact-panel{


display:grid;


gap:15px;


background:white;


border:2px solid black;


padding:25px;


border-radius:8px;


box-shadow:12px 12px 0 black;


}



.contact-panel a:not(.button),


.contact-panel p{


background:var(--paper);


padding:15px;


border-radius:8px;


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


font-weight:bold;


color:var(--muted);


}




/* FOOTER */


.site-footer{


background:black;


color:white;


padding:30px 8%;


display:flex;


justify-content:space-between;


gap:20px;


flex-wrap:wrap;


}



.site-footer p{


margin:0;


color:white;


}






/* MOBILE */


@media(max-width:980px){



.site-header{


grid-template-columns:1fr auto;


}



.main-nav{


display:none;


}



.hero,


.contact-section{


grid-template-columns:1fr;


}



.service-grid{


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


}



.print-gallery{


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


}



}






@media(max-width:600px){



h1{


font-size:3rem;


}



.hero{


padding-top:40px;


}



.contact-strip{


grid-template-columns:1fr;


}



.service-grid,


.print-gallery{


grid-template-columns:1fr;


}



.video-box{


width:280px;


}



.site-footer{


flex-direction:column;


}



}