@font-face {
    font-family: 'Vastago Grotesk';
    src: url('fonts/VastagoGrotesk-Bold.woff2') format('woff2'),
        url('fonts/VastagoGrotesk-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vastago Grotesk';
    src: url('fonts/VastagoGrotesk-SemiBold.woff2') format('woff2'),
        url('fonts/VastagoGrotesk-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vastago Grotesk';
    src: url('fonts/VastagoGrotesk-Thin.woff2') format('woff2'),
        url('fonts/VastagoGrotesk-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vastago Grotesk';
    src: url('fonts/VastagoGrotesk-Light.woff2') format('woff2'),
        url('fonts/VastagoGrotesk-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vastago Grotesk';
    src: url('fonts/VastagoGrotesk-Medium.woff2') format('woff2'),
        url('fonts/VastagoGrotesk-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vastago Grotesk';
    src: url('fonts/VastagoGrotesk-Regular.woff2') format('woff2'),
        url('fonts/VastagoGrotesk-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vastago Grotesk';
    src: url('fonts/VastagoGrotesk-Heavy.woff2') format('woff2'),
        url('fonts/VastagoGrotesk-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vastago Grotesk';
    src: url('fonts/VastagoGrotesk-Black.woff2') format('woff2'),
        url('fonts/VastagoGrotesk-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vastago Grotesk Extra';
    src: url('fonts/VastagoGrotesk-ExtraLight.woff2') format('woff2'),
        url('fonts/VastagoGrotesk-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}




@font-face {
    font-family: 'Maison Neue';
    src: url('fonts/MaisonNeue-Light.woff2') format('woff2'),
        url('fonts/MaisonNeue-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Maison Neue Book';
    src: url('fonts/MaisonNeue-Book.woff2') format('woff2'),
        url('fonts/MaisonNeue-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Maison Neue Mono';
    src: url('fonts/MaisonNeue-Mono.woff2') format('woff2'),
        url('fonts/MaisonNeue-Mono.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Maison Neue';
    src: url('fonts/MaisonNeue-Bold.woff2') format('woff2'),
        url('fonts/MaisonNeue-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cinetype';
    src: url('fonts/GT-Cinetype-Bold.woff2') format('woff2'),
        url('fonts/GT-Cinetype-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cinetype';
    src: url('fonts/GT-Cinetype-Regular.woff2') format('woff2'),
        url('fonts/GT-Cinetype-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cinetype';
    src: url('fonts/GT-Cinetype-Light-Italic.woff2') format('woff2'),
        url('fonts/GT-Cinetype-Light-Italic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cinetype';
    src: url('fonts/GT-Cinetype-Bold-Italic.woff2') format('woff2'),
        url('fonts/GT-Cinetype-Bold-Italic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cinetype';
    src: url('fonts/GT-Cinetype-Regular-Italic.woff2') format('woff2'),
        url('fonts/GT-Cinetype-Regular-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cinetype';
    src: url('fonts/GT-Cinetype-Mono.woff2') format('woff2'),
        url('fonts/GT-Cinetype-Mono.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cinetype';
    src: url('fonts/GT-Cinetype-Light.woff2') format('woff2'),
        url('fonts/GT-Cinetype-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}





html {
border: 10px solid white;

}

body {
    width: 85%;
    max-width: 1424px;
    margin: 0 auto;
    background: #FFFBF9;
    color: #000;
    font-family: 'Maison Neue';
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
    position: relative
}

::selection {
  background: #000;
  color: white;        /* Text color of selected text */
}

::-moz-selection { /* For Firefox compatibility */
  background: #000;
  color: white;
}

header {
      position: sticky;
    z-index: 10;
    width: 100%;

top: 60px ;
    display: flow-root;
}

figure {
        font-family: 'Maison Neue Mono';
    margin: 20px 0 20px 0;
    font-size: 7pt;
    line-height: 180%;
    color: rgba(0,0,0,0.7);
    width: 80%;
    float: left
    
}

.navigation, .top-navigation {
        font-family: 'Maison Neue Mono';
}

.navigation {
    font-size: 16pt;    
    
}

.top-navigation {
    float: right;
    text-align: right;
    font-size: 14pt;    

}

.top-navigation ul, .top-navigation ul li:first-child {
    margin-top: 0;
}
.top-navigation ul li {
        margin: 25px 0;

}

.hide {
    display: none
}




ul {
list-style: none;
}
li {
    margin: 40px 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;


}

h1 {
    font-size: 74px;
text-align: left;
    line-height: 100%;
    letter-spacing: -2px;
    font-family: 'Vastago Grotesk';

}

h1:hover {
    font-family: 'Cinetype';
    font-weight: 300;
        letter-spacing: 0px;


}

h2 {
        font-size: 26pt;
    font-family: 'Vastago Grotesk';
        line-height: 120%;
}


h3 {
    font-weight: 300;
    font-size: 16pt;
    line-height: 150%;
    font-family: 'Vastago Grotesk';

}

h4 {
    font-style: italic;
    margin: -10px 0 50px 0;    
    
}
strong {
    font-weight: bold !important
}
a {
    color: #1E00FF;
}
a:hover {
    color: black;
}

a.active {
color: black;
text-decoration: none
}

b, strong {
    font-weight: 600;
}

p {
  font-weight: 300;
    line-height: 160%;
    font-size: 11pt;

}

  #content {
            display: none; 
        }

.logo {
    font-size: 28px;
line-height: 120%;
    font-family: 'Cinetype';
    float:left;
/* Apply the transition for the 'color' property
       It will take 0.5 seconds to complete the change, using an 'ease-in-out' timing function */
    transition: color 0.3s ease-in-out;
    
    /* Optional: Include vendor prefixes for wider browser support */
    -webkit-transition: color 0.3s ease-in-out; 
}
body.large {
    width: 100%;
        min-width: 100%;
    padding: 100px;
    box-sizing: border-box;
}

.large .logo {
      font-size: 92px;
            width: 30%;
        font-family: 'Maison Neue';


}

.logo.is-white {
      color: black

}

.large .logo {
  color: black
    
}


.large .navigation {
text-align: right;
font-size: 50px
}

.large header {
    top: 30%;   
        width: 90%;
    position: fixed
        
}

.large header p{
    color: white;
    padding: 0 180px 0 5px;
}

body.large > section:first-of-type {
    padding: 0px 0 120px 0;
}

.logo a {
color: black;
text-decoration: none
}

.logo:hover{
    font-family: 'Vastago Grotesk';
    
}



img {
    display: block;
    max-width: 100%;
}
.image-container {
  /* Set the width to fill 100% of the parent container's available width */
  width: 100%; 
  position: relative;
padding-bottom: 118.22%;
    height: 0; 
  overflow: hidden;
}

.image-container img {
  /* Position and size the images to fill the 100% width container */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

/* --- Fade Effect CSS (Remains the same) --- */

.hover-image {
  opacity: 0;
transition: opacity 0.3s ease-in-out; /* Changed from 0.5s to 1s */}

.original-image {
  /* Keep this duration the same as .hover-image for a coordinated fade */
  transition: opacity 0.3s ease-in-out; 
}

.image-container:hover .hover-image {
  opacity: 1;
}

.image-container:hover .original-image {
  opacity: 0;
}

body > section:first-of-type { 
    padding: 10vh 0 120px 0;

}


section:after{
        content: '';
    display: block;
    clear: both;
}

section {
    padding: 0 0 140px 0;
margin: 0 auto  ;
}

.content-wide {
width: 100%;

}


.content {
width: 90%;

}


.content-narrow {
width: 80%;

}


.content-70 {
width: 70%;
margin: 0 auto  ;
padding: 100px 0;
}


.no-bottom-padding{
    padding: 10vh 0 20px 0 !important
}

.no-padding{
    padding: 0
}

.content-40 {
width: 40%;
margin: 0 auto  ;
    padding: 100px 0 50px 0;
}

.c1 {
    padding: 0px 4% 0 0 ;
    width: 55%;

    
}

.c2 {
        padding: 0px 0 0 4%;
    width: 45%;

}

.c1, .c2, .a1, .a2, .a3, .h1, .h2 {
    float: left;
    box-sizing: border-box;

   
}


.h1 {
    padding: 0px 4% 0 0 ;
    width: 50%;

    
}

.h2 {
        padding: 0px 0 0 4%;
    width: 50%;

}

.past {
    padding: 0px 4% 0 0;
    width: 57%;    
    
}

.breath {
    width: 43%;
    padding: 11% 0 0% 9%;}

.boundless {
    padding: 0 0 135px 0;    
}

.a1 {
    padding: 10% 10% 0 0;
    width: 30%;    
}

.a2 {
   width: 40%; 
}

.a3 {
  width: 30%;    
  padding: 10% 0px 0 120px;
text-align: right; 

}

.p1, .p2, .p3 {
    width: 33%;
    float: left;
    box-sizing: border-box;
}

 .p1{
      padding: 2% 1% 0 0%;
}

.p2 {
     padding: 2% 1% 0 1%;

}

 .p3{
      padding: 2% 0% 0 1%;
}


footer {
display: block;
    float: left;
    width: 100%;
    margin: 100px 0 20px 0;
    width: 100%;
}

footer p, footer div {
    float: left;
    width: 20%;
    margin: 0;
}

footer div, footer .middle {
   text-align: center
}
footer .right {
    text-align: right
}



.c1 > .work-item:first-of-type {     margin-top: 1em;    
 }


.work-item {
margin: 0px 0 50px 0;    
}

.work-item .title {
    font-weight: bold;
}

.copy {
    display: none
}

.mailto-link:hover .copy {
    display: inline
}


/* Below 1024 */ 
@media screen and (max-width: 1024px) {

    .content-narrow {
    width:100%;
  }
}

/* Below 481 */ 
@media screen and (max-width: 700px) {

    html { border: none;}
    .c1, .c2, .a1, .a2, .a3, .p1, .p2, .p3, .h1, .h2, .content-70, .content-40 { 
    width: 100%;
    padding: 0px;
    }
    .top-navigation.hide {
        display: block;
    }
    .navigation {
        display: none
    }
    
    .content-70.boundless {
            width: 90%;
            padding: 0 0 80px 0;

    }
    
    .top-navigation ul li {
    margin: 10px 0;
}
    
    .dot {
        display:none
    }
    footer .left, footer .right, footer .middle {
        width: 100%;
        text-align: center;
        padding: 10px 0;
    }
    
}

@media (min-width: 1281px) {
  
 body {width: 75%;}  
}


@media all and (min-width: 1024px) and (max-width: 1280px) {
}

@media all and (min-width: 768px) and (max-width: 1024px) { }

@media all and (min-width: 480px) and (max-width: 768px) { }

@media all and (max-width: 480px) { }