/* =======================================================
   AR STUDIO V1.0
======================================================= */

:root{

--bg:#050505;
--white:#ffffff;
--grey:#9c9c9c;
--line:#1b1b1b;

--container:1400px;

--transition:.35s ease;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

background:var(--bg);
color:var(--white);

font-family:"Manrope",sans-serif;

font-size:16px;
font-weight:400;
line-height:1.6;

overflow-x:hidden;

-webkit-font-smoothing:antialiased;

}

img{

display:block;
max-width:100%;

}

video{

display:block;

}

a{

text-decoration:none;
color:inherit;

transition:var(--transition);

}

ul{

list-style:none;

}

.container{

width:min(92%,var(--container));

margin:auto;

}

/* =======================================================
PRELOADER
======================================================= */

#preloader{

position:fixed;

inset:0;

z-index:99999;

background:#000;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

opacity:1;

visibility:visible;

transition:

opacity .9s ease,

visibility .9s ease;

}

#loaderVideo{

width:min(720px,82vw);

height:auto;

display:block;

}

/* el JS agregará esta clase */

#preloader.hide{

opacity:0;

visibility:hidden;

pointer-events:none;

}

/* =======================================================
HEADER
======================================================= */

#header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:900;

padding:28px 0;

transition:.4s;

}

#header .container{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

display:flex;

align-items:center;

height:56px;

}

.logo img{

display:block;

height:100%;

width:auto;

}

/* =======================================================
MENU BUTTON
======================================================= */

#menuButton{

width:42px;

height:42px;

background:none;

border:none;

cursor:pointer;

display:flex;

flex-direction:column;

justify-content:center;

gap:7px;

}

#menuButton span{

width:28px;

height:2px;

background:white;

transition:.35s;

display:block;

}

/* =======================================================
FULLSCREEN MENU
======================================================= */

#menu{

position:fixed;

inset:0;

background:#050505;

display:flex;

align-items:center;

opacity:0;

visibility:hidden;

transition:.4s;

z-index:800;

}

#menu.active{

opacity:1;

visibility:visible;

}

.menuContainer{

display:flex;

justify-content:space-between;

align-items:flex-start;

width:100%;

}

.menuLinks{

display:flex;

flex-direction:column;

gap:22px;

}

.menuLinks a{

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

font-weight:700;

letter-spacing:-1px;

}

.menuInfo{

text-align:right;

color:var(--grey);

display:flex;

flex-direction:column;

gap:30px;

font-size:15px;

}

/* =======================================================
HERO
======================================================= */

.hero{

position:relative;

height:100svh;

min-height:700px;

overflow:hidden;

}

.heroVideo{

position:absolute;

inset:0;

}
.heroDesktop{

display:block;

}

.heroMobile{

display:none;

}

.heroVideo video{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;

object-position:center center;

}

.heroOverlay{

position:absolute;

inset:0;

background:

linear-gradient(

to top,

rgba(0,0,0,.72),

rgba(0,0,0,.20)

);

}
/* =======================================================
HERO CONTENT
======================================================= */

.heroContent{

position:relative;
z-index:2;

height:100%;

display:flex;
flex-direction:column;
justify-content:flex-end;

padding-bottom:10vh;

}

.eyebrow{

font-size:.85rem;

letter-spacing:.25rem;

text-transform:uppercase;

color:#d8d8d8;

margin-bottom:24px;

}

.heroContent h1{

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

font-weight:800;

line-height:.88;

letter-spacing:-4px;

max-width:900px;

margin-bottom:30px;

}

.lead{

max-width:650px;

font-size:1.15rem;

line-height:1.8;

color:#d0d0d0;

margin-bottom:45px;

}

.button{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 38px;

border:1px solid rgba(255,255,255,.25);

width:max-content;

font-size:.95rem;

letter-spacing:.08rem;

text-transform:uppercase;

transition:.35s;

}

.button:hover{

background:#fff;

color:#000;

}

/* =======================================================
SCROLL
======================================================= */

.scroll{

position:absolute;

bottom:40px;

right:50px;

z-index:5;

display:none;

align-items:center;

gap:12px;

font-size:.72rem;

letter-spacing:.25rem;

color:#cfcfcf;

}

.scroll span{

display:block;

width:45px;

height:1px;

background:#fff;

animation:scrollLine 1.8s infinite;

}

@keyframes scrollLine{

0%{

transform:scaleX(0);

transform-origin:left;

}

50%{

transform:scaleX(1);

transform-origin:left;

}

100%{

transform:scaleX(0);

transform-origin:right;

}

}

/* =======================================================
STATEMENT
======================================================= */

.statement{

padding:90px 0;

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

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

}

.statement h2{

font-size:clamp(2.8rem,6vw,5.8rem);

font-weight:700;

line-height:1.05;

letter-spacing:-2px;

max-width:1000px;

margin-bottom:45px;

}

.statement p{

max-width:720px;

font-size:1.2rem;

color:var(--grey);

line-height:1.9;

}

/* =======================================================
SECTION TITLES
======================================================= */

.sectionTitle{

margin-bottom:100px;

}

.sectionTitle p{

font-size:.82rem;

letter-spacing:.25rem;

text-transform:uppercase;

color:#888;

margin-bottom:18px;

}

.sectionTitle h2{

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

line-height:1.08;

font-weight:700;

letter-spacing:-2px;

max-width:850px;

}

/* =======================================================
WORK
======================================================= */

.work{

padding:90px 0;

}

.projects{

display:flex;

flex-direction:column;

gap:140px;

}

.project{

display:grid;

grid-template-columns:58% 42%;

align-items:center;

gap:70px;

}

.project.reverse{

grid-template-columns:42% 58%;

}

.project.reverse .projectMedia{

order:2;

}

.project.reverse .projectInfo{

order:1;

}

.projectMedia{

position:relative;

overflow:hidden;

border-radius:4px;

background:#111;

cursor:pointer;

}

.projectMedia video{

width:100%;

display:block;

aspect-ratio:16/9;

object-fit:cover;

transition:transform .7s ease;

}

.projectMedia::after{

content:"";

position:absolute;

inset:0;

background:rgba(0,0,0,.18);

opacity:0;

transition:.45s ease;

pointer-events:none;

}

.project:hover .projectMedia::after{

opacity:1;

}

.watchButton{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

display:flex;

align-items:center;

gap:14px;

padding:18px 34px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(12px);

border:1px solid rgba(255,255,255,.25);

color:#fff;

font-size:.85rem;

letter-spacing:.18rem;

text-transform:uppercase;

opacity:0;

transition:.45s ease;

cursor:pointer;

z-index:5;

}

.playIcon{

width:18px;

height:18px;

display:block;

flex-shrink:0;

fill:currentColor;

}

.project:hover .watchButton{

opacity:1;

}



.projectMedia video{

transition:

transform .8s ease,

filter .5s ease;

}

.project:hover video{

transform:scale(1.03);

filter:brightness(.72);

}

.projectInfo{

display:flex;

flex-direction:column;

justify-content:center;

}

.projectNumber{

font-size:5rem;

font-weight:800;

color:#202020;

line-height:1;

margin-bottom:10px;

}

.projectCategory{

font-size:.9rem;

letter-spacing:.2rem;

text-transform:uppercase;

color:#9c9c9c;

margin-bottom:18px;

}

.projectInfo h3{

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

line-height:1.08;

letter-spacing:-1.5px;

margin-bottom:28px;

font-weight:700;

}

.projectInfo p{

font-size:1.1rem;

line-height:1.9;

color:#bcbcbc;

max-width:520px;

}
/* =======================================================
ABOUT
======================================================= */

.about{

padding:90px 0;

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

}

.aboutGrid{

display:grid;

grid-template-columns:2fr 1fr;

gap:120px;

align-items:start;

}

.aboutText{

display:flex;

flex-direction:column;

gap:34px;

}

.aboutText p{

font-size:1.15rem;

line-height:1.9;

color:#c7c7c7;

max-width:760px;

}

.aboutServices ul{

display:flex;

flex-direction:column;

gap:20px;

}

.aboutServices li{

font-size:1rem;

padding-bottom:14px;

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

color:#bdbdbd;

letter-spacing:.05rem;

}

/* =======================================================
MANIFESTO
======================================================= */

.manifesto{

padding:90px 0;

text-align:center;

}

.manifestoLabel{

font-size:.85rem;

letter-spacing:.25rem;

text-transform:uppercase;

color:#888;

margin-bottom:30px;

}

.manifesto h2{

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

line-height:1.12;

letter-spacing:-2px;

max-width:1050px;

margin:auto;

}

/* =======================================================
CLIENTS
======================================================= */

.clients{

padding:70px 0 30px;

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


overflow:hidden;

}

.clientsSlider{

position:relative;

overflow:hidden;

width:100%;

margin-top:40px;

}

.clientsTrack{

display:flex;

align-items:center;

gap:90px;

width:max-content;

animation:clientsScroll 28s linear infinite;

}

.clientsTrack img{

height:40px;

width:auto;

opacity:.35;

transition:

opacity .35s ease,

transform .35s ease;

filter:brightness(0) invert(1);

flex-shrink:0;

}

.clientsTrack img:hover{

opacity:1;

transform:scale(1.08);

}

@keyframes clientsScroll{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

}

/* =======================================================
CONTACT
======================================================= */

.contact{

padding:25px 0 90px;

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

}

.contactGrid{

display:grid;

grid-template-columns:1fr 1fr;

gap:120px;

margin-top:70px;

}

.contactText{

font-size:1.15rem;

line-height:1.9;

color:#bfbfbf;

}

.email{

display:inline-block;

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

font-weight:700;

letter-spacing:-1px;

margin-bottom:45px;

transition:.3s;

}

.email:hover{

opacity:.65;

}

.socials{

display:flex;

flex-wrap:wrap;

gap:24px;

}

.socials a{

font-size:1rem;

color:#999;

transition:.3s;

}

.socials a:hover{

color:#fff;

}

/* =======================================================
FOOTER
======================================================= */

footer{

padding:70px 0;

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

}

.footerContent{

display:grid;

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

gap:50px;

align-items:center;

}

.footerLogo{

height:42px;

width:auto;

}

.footerText{

font-size:.95rem;

color:#8f8f8f;

line-height:1.7;

}

.footerLocation{

color:#8f8f8f;

}

.footerCopy{

text-align:right;

color:#777;

font-size:.9rem;

}

/* =======================================================
LIGHTBOX
======================================================= */

.videoLightbox{

position:fixed;

inset:0;

display:flex;

justify-content:center;

align-items:center;

background:rgba(0,0,0,.92);

opacity:0;

visibility:hidden;

transition:.35s ease;

z-index:99999;

}

.videoLightbox.active{

opacity:1;

visibility:visible;

}

.videoLightbox .lightboxContent{

transform:scale(.94);

opacity:0;

transition:

transform .35s ease,

opacity .35s ease;

}

.videoLightbox.active .lightboxContent{

transform:scale(1);

opacity:1;

}

.lightboxBackdrop{

position:absolute;

inset:0;

}

.lightboxContent{

position:relative;

width:min(92vw,1400px);

z-index:2;

}

#lightboxVideo{

width:100%;

display:block;

border-radius:8px;

background:#000;

}

.closeLightbox{

position:absolute;

top:-62px;

right:0;

width:46px;

height:46px;

display:flex;

justify-content:center;

align-items:center;

border:none;

border-radius:50%;

background:rgba(255,255,255,.08);

backdrop-filter:blur(12px);

color:#fff;

font-size:24px;

cursor:pointer;

transition:.3s ease;

}

.closeLightbox:hover{

background:#fff;

color:#000;

transform:rotate(90deg);

}
/* =======================================================
ANIMATIONS
======================================================= */

.reveal{

opacity:0;

transform:translateY(60px);

transition:1s;

}

.reveal.visible{

opacity:1;

transform:none;

}

/* =======================================================
RESPONSIVE
======================================================= */

@media (max-width:1100px){

.heroContent h1{

font-size:5.5rem;

}

.project,

.project.reverse{

grid-template-columns:1fr;

gap:50px;

}

.project.reverse .projectMedia,

.project.reverse .projectInfo{

order:initial;

}

.aboutGrid,

.contactGrid,

.footerContent{

grid-template-columns:1fr;

gap:60px;

}

.footerCopy{

text-align:left;

}

}

@media (max-width:768px){
    .heroDesktop{

display:none;

}

.heroMobile{

display:block;

}

#header{

padding:10px 0;

}

.logo{

height:34px;

}

.logo img{

height:100%;

width:auto;

display:block;

}

.heroContent{

justify-content:flex-end;

padding:0 0 42px;

}
.heroContent h1{

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

line-height:.88;

letter-spacing:-.03em;

margin-bottom:18px;

max-width:260px;

}

.lead{

max-width:290px;

font-size:.95rem;

line-height:1.7;

}

.statement,

.work,

.about,

.manifesto,

.contact{

padding:90px 0;

}

.sectionTitle{

margin-bottom:70px;

}



}

.menuLinks a{

font-size:2.2rem;

}
body:not(.site-ready) #hero{

opacity:0;

transform:scale(1.02);

}

body.site-ready #hero{

opacity:1;

transform:none;

transition:

opacity 1.1s ease,

transform 1.2s ease;

}