@font-face{
  font-family:"Helvetica Now Display", system-ui;
  src: url("assets/fonts/HelveticaNowDisplay.woff2") format("woff2");
  font-weight: 400;
}
@font-face{
  font-family:"Helvetica Now Display", system-ui;
  src: url("assets/fonts/HelveticaNowDisplayLight.woff2") format("woff2");
  font-weight: 400;
}
@font-face{
  font-family:"Helvetica Now Display", system-ui;
  src: url("assets/fonts/HelveticaNowDisplayMedium.woff2") format("woff2");
  font-weight: 500;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{margin:0; padding:0; overflow: auto; touch-action: pan-y; font-family:"Helvetica Now Display", system-ui, sans-serif; background:#000; color:#fff;}

.nav{height:75px}
.nav-inner{display:flex;align-items:center;height:75px}
.logo{font-size:18px;font-weight:600}
.nav-center{margin-left:120px;display:flex;gap:40px}
.nav-right{margin-left:auto}
.nav a{font-size:12px;font-weight: 400;letter-spacing:0.02em;color:white;text-decoration:none}

.grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  column-gap:29px;
  row-gap:0;
  width:100%;
}
.col-span-6{grid-column:span 6}
.col-span-3{grid-column:span 3}
.col-span-2{grid-column:span 2}
.col-start-1{grid-column-start:1}
.col-start-4{grid-column-start:4}
.col-4-to-end{grid-column:4 / -1}
.col-4-span-2{grid-column:4 / span 2}


.col-1-to-4{
  grid-column:1 / 5;   
  width:100%;
}

.hero{padding-top:100px}
.title{text-align:center;font-size:92px;font-weight:400;line-height:0.8;margin-bottom:70px}
.body01 p,.body-long p,.image-copy p,.copy-left p,.copy-right p{
  font-size: 14px;font-weight: 400;line-height:1.3;letter-spacing:0.02em
}

.body01{margin-bottom:90px}

.body-long{margin-bottom:0}
.row-break{height:50px}

.row-gap-225{height:225px}

.image-copy{text-align:left}
.copy-left{text-align:left}
.copy-right{text-align:justify}

.row-gap-100{height:100px}




.row-gap-100{height:100px}




.media-pair-left{
  grid-column:1 / span 3;
  height:700px;
  background: transparent;
  width:100%;
}
.media-pair-right{
  grid-column:4 / span 3;
  height:700px;
  background: transparent;
  width:100%;
}


.media-pair-right{
  
}


.site-footer{
  height:420px;
  padding-top:115px;
  background:black;
  color:white;
}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  column-gap:29px;
  padding-left:30px;
  padding-right:30px;
}

.footer-logo{
  grid-column:1 / 3; 
  font-size:120px;
  font-weight: 400;
  line-height:1;
}

.footer-col{
  display:flex;
  flex-direction:column;
}

.footer-title{
  font-size: 14px;
  line-height:150%;
  letter-spacing:0.04em;
  margin-bottom:16px;

  margin-bottom:50px;

  color:#969696;
}

.footer-col a{
  font-size:12px;
  line-height:150%;
  letter-spacing:0.04em;
  color:white;
  text-decoration:none;
  margin-bottom:6px;

  margin-bottom:10px;
}

.footer-company{
  grid-column:4;
}

.footer-socials{
  grid-column:5;
}

.footer-copy{
  grid-column:4;
  font-size:10px;
  align-self:end;
  padding-bottom:20px;

  margin-top:122px;
}


html, body{margin:0; padding:0; overflow: auto; touch-action: pan-y; font-family:"Helvetica Now Display", system-ui, sans-serif; background:#000; color:#fff;}

*{
  scroll-snap-align: unset !important;
}


.site-footer{
  min-height: 420px;
  height: auto;
}


.media-large video,
.media-right img,
.media-third img,
.media-pair-left img,
.media-pair-right img,
.footer-logo img,
.logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.media-large video{ height:100%; }
.logo img{ height:19px; width:auto; }


.media-large video,
.media-right img,
.media-third img,
.media-pair-left img,
.media-pair-right img,
.logo img,

.media-large video{ max-height:100%; }


.media-large{
  grid-column:1 / span 6;
  height:680px;
  width:100%;

  margin-bottom:25px;
}
.media-right{
  grid-column:4 / -1;
  height:455px;
  width:100%;

  margin-bottom:25px;
}
.media-third{
  grid-column:1 / 5; 
  height:452px;
  width:100%;
}


.footer-logo img{
  max-width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

.offset-left { transform: translateX(-120px); line-height:130%; }
.offset-left span{ white-space:nowrap; display:block; }


.paired-fixed{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--gutter, 29px) / 2);
}
.paired-fixed img{
  width:100%;
  height:700px;
  object-fit:cover;
  display:block;
}


html, body{margin:0; padding:0; overflow: auto; touch-action: pan-y; font-family:"Helvetica Now Display", system-ui, sans-serif; background:#000; color:#fff;}

body{margin:0; padding:0;  touch-action: pan-y; font-family:"Helvetica Now Display", system-ui, sans-serif; background:#000; color:#fff;}

#scroll-container{position:fixed; top:0; left:0; width:100%; will-change:transform; padding:0 40px; box-sizing:border-box;}

header, .nav, .navbar, .hero{margin-top:0;}

#scroll-container, main, section, footer {
  color: inherit;
}


.line-wrap{overflow:hidden; display:block;}
.line-reveal{opacity:1;filter:blur(0px);}


.copy-set-left, 
.copy-set-left p, .copy-set-right p {
  line-height: 140%;
}


.copy-set-right{
  grid-column: 6 / span 1;
  justify-self: end;
  text-align: right;
}


.media-pair-left,
.media-pair-right{
  width:100%;
  aspect-ratio: 16 / 9; 
  overflow:hidden;
  background:#fff;
}
.media-pair-left img,
.media-pair-right img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


.paired-images{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter, 0px);
  width: 100%;
}
.paired-images .pair-item{
  width:100%;
}


#simple-loader{
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.simple-loader-logo{
  width: 140px;
  opacity: 0;
  transform: scale(0.98);
  animation: simpleReveal 1s ease forwards;
}
@keyframes simpleReveal{
  to{
    opacity: 1;
    transform: scale(1);
  }
}
#simple-loader.fade-out{
  transition: opacity 0.3s ease;
  opacity: 0;
}


@media (max-width: 768px){
  nav { flex-wrap: wrap; gap: 16px; }
  .grid, .layout, .container { width:100%; padding-left:20px; padding-right:20px; }
  h1, .display-title { font-size: clamp(36px, 8vw, 72px); line-height: 1.05; }
  p { font-size: 15px; }
}



.body01, .body01 *,
.body-long, .body-long *,
.image-copy, .image-copy *,
.copy-left, .copy-left *,
.copy-right, .copy-right * {
  line-height: 130% !important;
}



.blind-reveal {
  position: relative;
  overflow: hidden;

  background: transparent;
}

.blind-reveal img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s ease-out;
}

.blind-reveal.is-visible img {
  clip-path: inset(0 0 0 0);
}



::selection {
  background: #ffffff;
  color: #000000;
}
::-moz-selection {
  background: #ffffff;
  color: #000000;
}


img, video {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: auto;
}





.line-mask {
  overflow: hidden;
  display: block;
}

.intro-line .line-reveal {
  display: block;
  
  will-change: transform;
}




























.intro-single{
  display:block;
  white-space: nowrap;        
  font-size: clamp(28px, 6vw, 85px);
  line-height: 1.05;
}


@media (max-width: 900px){
  .intro-single{ font-size: clamp(26px, 7vw, 64px); }
}


@media (max-width: 600px){
  .intro-single{ font-size: clamp(22px, 8vw, 42px); line-height:1.1; }
}


@media (max-width: 420px){
  .intro-single{ font-size: clamp(20px, 9vw, 34px); }
}







.intro-single{
  display:block;
  white-space: nowrap;
  font-size: clamp(32px, 6vw, 85px);
  line-height: 1.05;
}
.intro-line-span{
  display:block;
  
  will-change: transform;
}



.no-wrap{
  white-space: nowrap;
}


.reveal-target{opacity:0;filter:blur(12px);}

@media (max-width: 1024px){
  .title{font-size: 85%;}
}
@media (max-width: 480px){
  .title{font-size: 60%;}
}

.body01.col-start-4.col-span-2.reveal-target{font-size:14px;}

.copy-set-left.col-start-1.col-span-1{font-size:14px;}

.copy-set-right.col-start-6.col-span-1{font-size:14px;}

nav a{font-size:12px;}
.nav a{font-size:12px;}
.navbar a{font-size:12px;}



.nav-center a,
.nav-right a {
  transition: opacity 0.2s ease;
}

.nav-center:hover a,
.nav-right:hover a {
  opacity: 0.5;
}

.nav-center a:hover,
.nav-right a:hover {
  opacity: 1;
}

.footer-col a {
  transition: opacity 0.2s ease;
}
.footer-col:hover a {
  opacity: 0.5;
}
.footer-col a:hover {
  opacity: 1;
}

.logo svg {
  transform: scale(0.75);
  transform-origin: left center;
}
.logo img[src$=".svg"] {
  transform: scale(0.75);
  transform-origin: left center;
}

.site-footer, .site-footer * {
  opacity: 1 !important;
  filter: blur(0px) !important;
}

:root{
  --title-gutter: clamp(16px, 6vw, 64px);
}
.title{
  max-width: calc(100vw - (var(--title-gutter) * 2));
  margin-left: auto;
  margin-right: auto;
}


.blind-reveal img {
  opacity: 0;
  filter: blur(12px);
  transition:
    clip-path 1.1s ease-out,
    filter 1.1s ease-out,
    opacity 0.8s ease-out;
}

.blind-reveal.is-visible img {
  opacity: 1;
  filter: blur(0px);
}


/* Studio centered image */
.studio-center-wrap{
  margin-top:0;
  min-height:calc(100vh - var(--nav-height, 0px));
  display:flex;
  align-items:center;
  justify-content:center;
}
.studio-center-wrap img{
  max-width:80vw;
  max-height:80vh;
  object-fit:contain;
}
.studio-center-wrap img{
  max-width:80vw;
  max-height:80vh;
  object-fit:contain;
}
.studio-center-wrap img{
  max-width:80vw;
  max-height:80vh;
  object-fit:contain;
}


html {
  scrollbar-gutter: stable;
}

body {
  overflow-y: scroll;
}

nav {
  transition: none !important;
  animation: none !important;
  will-change: auto;
}


:root{
  --page-pad: 40px;
  --gutter: 29px;
  --nav-height: 75px;
}

.container{
  width: 100%;
}

#scroll-container{
  padding: 0 var(--page-pad);
}

.grid{
  column-gap: var(--gutter);
}

.nav{
  height: var(--nav-height);
}
.nav-inner{
  height: var(--nav-height);
}

.nav-inner{
  position: relative;
}
.nav-center{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
}

.title{
  font-size: clamp(28px, 7.5vw, 92px);
  line-height: 0.8;
}

.media-pair-left,
.media-pair-right{
  aspect-ratio: auto;
  height: 700px;
}

.nav-toggle{
  display: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin-left: 16px;
  cursor: pointer;
}
.nav-toggle-box{
  width: 12px;
  height: 12px;
  background: #fff;
  display: block;
}

.nav-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.96);
  z-index: 9998;
  padding: calc(var(--nav-height) + 32px) var(--page-pad) 32px;
}
.nav-overlay-inner{
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.nav-overlay-inner a{
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  letter-spacing: 0.04em;
}

.body-long > p{
  width: 50%;
  font-size: 24px;
}

@media (max-width: 768px){
  .body-long > p{
    width: 75%;
    font-size: 20px;
  }
}

.image-copy.col-4-span-2{
  grid-column: 4 / span 2;
  justify-self: start;
  width: 100%;
  & > p {
    font-size: 12px;
  }
}

@media (max-width: 768px){
  .image-copy.col-4-span-2{
    grid-column: 1 / -1;
    & > p {
      font-size: 9px;
    }
  }
}

.copy-left{
  grid-column: 1 / span 1;
  align-self: start;
  text-align: left;
}

.copy-right{
  grid-column: 4 / span 2;
  align-self: start;
  text-align: left;
}

@media (max-width: 768px){
  .copy-left{
    grid-column: 1 / -1;
  }

  .copy-right{
    grid-column: 1 / -1;
    margin-top: clamp(120px, 18vw, 220px);
  }
}

.copy-left > p,
.copy-right > p{
  font-size: 12px;
}

@media (max-width: 768px){
  .copy-left > p,
  .copy-right > p{
    font-size: 9px;
  }
}

.copy-set-left > p,
.copy-set-right > p{
  font-size: 12px;
}

@media (max-width: 768px){
  .copy-set-left > p,
  .copy-set-right > p{
    font-size: 9px;
  }
}

@media (max-width: 768px){
  :root{
    --page-pad: 20px;
    --gutter: 18px;
    --nav-height: 64px;
  }

  #scroll-container{
    position: relative;
    transform: none !important;
    will-change: auto;
    padding: 0 var(--page-pad);
  }
  body{
    height: auto !important;
  }

  .grid{
    grid-template-columns: repeat(6, 1fr) !important;
    column-gap: var(--gutter);
  }

  .container,
  .grid{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .title{
    font-size: clamp(28px, 7.5vw, 92px) !important;
  }

  .nav-center{
    display: none;
  }
  .nav-explore{
    display: none;
  }
  .nav-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .hero{
    padding-top: 80px;
  }
  .title{
    margin-bottom: 32px;
  }
  .body01{
    grid-column: 1 / -1;
    margin-bottom: 44px;
    text-align: center;
  }
  .offset-left{
    transform: none;
  }
  .offset-left span{
    white-space: normal;
  }

  .media-large{
    grid-column: 1 / -1;
    height: 560px;
    margin-bottom: 24px;
  }

  .body-long{
    grid-column: 1 / -1;
  }

  .row-break{
    height: 40px;
  }

  .media-right{
    grid-column: 1 / -1;
    height: clamp(260px, 70vw, 420px);
  }
  .image-copy{
    grid-column: 1 / -1;
  }

  .row-gap-225{
    height: 140px;
  }
  .row-gap-100{
    height: 60px;
  }

  .copy-left{
    grid-column: 1 / -1;
  }
  .copy-right{
    grid-column: 1 / -1;
    text-align: left;
  }
  .no-wrap{
    white-space: normal;
  }

  .media-third{
    grid-column: 1 / -1;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .image-size {
    height: 425px;
  }

  .copy-set-left{
    grid-column: 1 / span 3;
  }
  .copy-set-right{
    grid-column: 4 / span 3;
  }

  .copy-spacing {
    margin-left: 122px
  }

  .media-pair-left{
    grid-column: 1 / span 3;
    height: 400px;
    aspect-ratio: 4 / 5;
    margin: 0;
  }
  .media-pair-right{
    grid-column: 4 / span 3;
    height: 400px;
    aspect-ratio: 4 / 5;
    margin: 0;
  }

  .site-footer{
    padding-top: 80px;
  }
  .footer-grid{
    padding-left: 0;
    padding-right: 0;
    row-gap: 32px;
  }
  .footer-logo{
    grid-column: 1 / -1;
    max-width: 260px;
  }
  .footer-company{
    grid-column: 1 / span 3;
  }
  .footer-socials{
    grid-column: 4 / span 3;
  }
  .footer-copy{
    grid-column: 1 / -1;
    margin-top: 32px;
  }

  body.nav-open{
    overflow: hidden;
  }
}
/* Wrapper becomes a single grid item */
.paired-images{
  grid-column: 1 / -1;            /* spans full width of the 6-col grid */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);              /* desktop gap */
}

/* inside wrapper, don't use the outer grid placement */
.paired-images .media-pair-left,
.paired-images .media-pair-right{
  grid-column: auto;
  width: 100%;
}

.paired-images .media-pair-left,
.paired-images .media-pair-right{
  height: 700px;
}

@media (max-width: 768px){
  .paired-images{ gap: 2px; }
  .paired-images .media-pair-left,
  .paired-images .media-pair-right{
    height: 400px;
  }
}

@media (max-width: 768px){
  .footer-logo{
    grid-column: 1 / -1;
    width: 50%;
    max-width: none;
  }

  .footer-logo img{
    width: 100%;
    height: auto;
    display: block;
  }
}