@charset "utf-8";
address, article, aside, button, blockquote, body, dd, dialog, dl, dt, fieldset,
footer, form, h1, h2, h3, h4, h5, h6, header, li, nav, ol, p, pre, section,
td, th, tr, ul {
    margin: 0;
    padding: 0; 
}

body {
  background: #090909;
  margin: 0;
  padding: 0;
  margin-top: 1vh;
  font-family: "FT1";
  width: 100vw;
  height: 100vh; 
  min-height: -webkit-fill-available;
  overflow: hidden !important;	
  color: #c4c0ad;
  line-height: 0;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: "FT1";
  src: url("NB Television Pro Regular.otf")
    format("opentype");
}

@font-face {
  font-family: "FT3";
  src: url("NB Television Pro Mono.otf")
    format("opentype");
}

@font-face {
  font-family: "FT2";
  src: url("DidotLTStd Roman.otf")
    format("opentype");
}




.btn:focus {
  outline: none !important;
  box-shadow: none !important;
}

::-webkit-scrollbar {
  display: none !important; 
  width: 0px !important;	
  opacity: 0 !important; 	
}



input, button, submit { pointer-events:auto !important; border:none; background:none; } 

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}


::placeholder { 
  color: #333;
  opacity: 1;
}

.lazyload,
.lazyloading {
	opacity: 0;
}
.lazyloaded {
	opacity: 1;
	transition: opacity 600ms;
}

a {color:  #c4c0ad; text-decoration:none}

.transition-fade {
    transition: .2s;
    opacity: 1;
	/*transition-delay: .3s;*/
}

html.is-animating .transition-fade {
    opacity: 0;
}


/*----------------------------------------------------------------*/


h1 {
  font-family:  "FT3";
  margin-bottom: 0;
  margin-top: 0;
  font-weight: 400;
  font-size: 1.25vw;
  line-height: 1.4em;	
  text-transform: uppercase;
}

.clockFace {font-size: 1.25vw; line-height: 1.3em;}
.clockFaceLarge {font-size: 3.25vw; line-height: 1.3em;}
.clockFaceSmall {font-weight:300; font-family:sans-serif; font-size: .9vw; line-height: 1.5em;}

.ionic { 
		font-family: "FT2";
		font-size: 7vw;
		line-height: 1em;
}
.spec { 
		 font-size: 1.25vw;
  		line-height: 1.2em;
}



.notMono {
   font-family:  "FT1";
}


.monoTime {
  font-family:  "FT3";
  margin-bottom: 0;
  margin-top: 0;
  font-weight: 400;
  font-size: 1.25vw;
  line-height: 1.4em;
  text-transform: uppercase;
}

.hugeType {
	  font-family: "FT2";	
	  font-size: 1.4vh;
	  line-height:1.4em;
	  letter-spacing:.05em;
}

.hugeType2 {
	  font-family: "FT3";	
	  font-size: 12vh;
	  line-height:1.1em;
	  text-align:center;
}

.hugeSpec {
	  font-family:  "FT3";
	  font-size: 5vw;
	  line-height:1em;
	  text-align:center;
}	

.widTHER {width:55%; overflow:hidden;}



.caption3 {
  position: absolute;
  opacity: 0;
  display: none;
}
.capTitle {
  position: absolute;
  opacity: 0;
  display: none;
}
.capFormat {
  position: absolute;
  opacity: 0;
  display: none;
}



.wheel_1 {
  top: 0;
  left: 0;
  position: fixed;
  width: 100vw;
  height: 100vh;	
  overflow: hidden !important;
  background: #090909;
  z-index:0;	
  pointer-events:auto;	
}

.box1 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap:wrap;
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100vw;
  overflow:hidden !important;	
  mix-blend-mode:lighten;		
}

.videoWrapper {
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   overflow: hidden;
}
.videoWrapper video {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 120vh;
   min-width: 190.655vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}


.vimeoWrapper {
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: 56.25vw;
   overflow: hidden;
   background:#090909;	
}
.vimeoWrapper iframe {
   width: 60vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.embedHolder {
	z-index:100; position:relative; display:flex; width:100vw; height:56.25vw; height:auto; background:#090909;
}


.mainframe 	{}
.mainframe.is-hidden {opacity:0 !important; }


.imgStyle {width: 100vw; height: 100dvh; object-fit:cover;}

.vidholder {width:100vw; height: 100dvh;}
.fullHolder {width:100vw; height: 100dvh;}


.menuHolder {

  position: fixed;
  top: 0;
  left: 0;
  width: 100%; 
  height: 100dvh; 
  z-index: 101;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  will-change: transform, opacity; 
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px; 
  -webkit-font-smoothing: antialiased; 
}


.faderMenu {
  opacity: 0;
  visibility: hidden;
}


.innerMenu {display:flex; align-items:center; justify-content:center; flex-direction:column; width:100%; pointer-events:none !important; transform: scale(0.9); will-change: transform, filter;}



.pusher {position:100; height:100vh; z-index:-1; pointer-events:none; touch-action:none;}
.pusher ::-webkit-scrollbar {display: none !important;}



.objectHolder {overflow:hidden;   will-change: transform, opacity; 
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;}

.redBlocker {top:0; left:0; opacity:1; position:fixed; z-index:1; background:#090909; width:100vw; height:100dvh; overflow:hidden; transition: opacity .3s;}
.redBlocker.is-hidden {opacity:0; position:fixed; z-index:1; background:#090909; width:100vw; height:100dvh; overflow:hidden; transition: opacity .3s;}

.objectBox {height:50vh; width:100vw; top:0; position:absolute; pointer-events:none; overflow:hidden; z-index:100000}

.homeDetails {position:relative; width:30%; padding-right:35%; padding-left:35%;}

.vidStyle {width:50vw; height:50vh; object-fit:cover;}
.vidStyle2 {position: absolute; /* or relative */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Critical for filling the box */
    display: block;}

.vidStyleArchive {position: absolute; /* or relative */
    top: 0;
    left: 0;
    width: 100%;
	padding-top:7.5vh;
    height: 35vh !important;
    object-fit: contain;  /* Critical for filling the box */
    display: block;}

.titleBox {position:relative; height:auto; display:flex; width:70vw; padding-top:25vh; padding-bottom:25vh; padding-left:15vw; padding-right:15vw; align-items:center; justify-content:center; background:#090909;}






.playAlert {
  position: absolute;
  z-index: 20;
  pointer-events: none;
}

/* Ensure the canvas stays below the controls and alerts */
.video-frame {
  z-index: 10;
}

.controlHolder {
  z-index: 30; /* Ensure controls are always on top of everything */
}

.player {
  /* This defines the width when the player is closed/idle */
  --player-idle-width: 75vw;

  width: var(--player-idle-width);
  position: relative; /* Needed so canvas/controls stack correctly */
  overflow: hidden; /* Ensures video corners clip if you have border-radius */
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
  z-index: 10;
}

/* Ensure video fills the container */
.video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.progressSVG {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  cursor: pointer;
}



.playAlert {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
  pointer-events: none;
}

.controlHolder {
  background: none !important;
  position: absolute;
  bottom: 5vh;
  display: flex;
  align-content: center;
  justify-content:center;	
  width: 70%;
  flex-wrap: wrap;
}

.playPause {
  font-family: "FT3";		
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5vw;
  font-weight: 300;
  line-height: 1.4em;
  color: #c4c0ad;
  text-transform:uppercase;	
}

.stop {
  font-family: "FT3";		
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5vw;
  font-weight: 300;
  line-height: 1.4em;
  color: #c4c0ad;
  text-transform:uppercase;		
}

.closeBtn {
  font-family: "FT3";		
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5vw;
  font-weight: 300;
  line-height: 1.4em;
  color: #c4c0ad;
  text-transform:uppercase;		
}

.track {
  vector-effect: non-scaling-stroke;
  stroke: #c4c0ad;
  stroke-width: 1px;
}

.muteToggle {
  font-family: "FT3";		
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5vw;
  font-weight: 300;
  line-height: 1.4em;
  color: #c4c0ad;
  text-transform:uppercase;		
}

.microMicro {
  font-family: "FT3";		
  background: none;
  border: none;
  cursor: pointer;
  font-size: 6.5vh;
  font-weight: 300;
  line-height: 1em;
  color: #c4c0ad;
  text-transform:uppercase;		
}

button {
  opacity: 0.2;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
}

button:hover {
  opacity: 1;
}


.controls {
  width: 100%;
  margin-left: 0%;
  display: flex;
  justify-content: center;
  gap:20px;	
  align-items: flex-end;
  padding-top: 2.5vh;
}

.time {
  position:relative;	 
  width: 100%;
  display: flex;
  align-items:center;	
  justify-content: center;
  flex-wrap:wrap;	
}












.heightMaker {display:none; height:200vh; width:100vw; background:none; z-index:-1; position:relative;}


/* The fixed overlay */
.gsap-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:#090909; /* Or rgba(0,0,0,0.95) */
    z-index: 9999;
    opacity: 0;
    visibility: hidden; /* Hidden by default for GSAP to handle */
    display: flex;
    flex-direction: column;
}

.scroll-snap-container {
    display: flex;              /* Aligns items in a row */
    flex-direction: row;        /* Forces horizontal layout */
    overflow-x: auto;           /* Allows horizontal scrolling */
    overflow-y: hidden;         /* Prevents vertical scrolling */
    scroll-snap-type: x mandatory; /* Snaps horizontally */
    width: 100%;
    height: 100vh;
    
    /* Hide scrollbar for cleaner look */
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}
.scroll-snap-container::-webkit-scrollbar { 
    display: none; 
}

/* Slides: Must be full width to work as pages */
.overlay-image-slide {
    width: 100vw;               /* Full Viewport Width */
    height: 100vh;              /* Full Viewport Height */
    flex-shrink: 0;             /* Prevents squishing */
    scroll-snap-align: center;  /* Snaps to center */
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-image-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ensure full image is visible */
    width: auto;
    height: auto;
}

.overlay-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10000;
    color: white;
    background: transparent;
    border: 1px solid white;
    padding: 10px 20px;
    cursor: pointer;
}


.gridCounter {}
.gridHolder {
	position: absolute;
    bottom: 40px;      /* Adjust spacing from bottom */
    left: 40px;        /* Adjust spacing from left */
    z-index: 10000;    /* Must be higher than the images */
    pointer-events: none; /* Important: lets clicks pass through so you can still close the overlay */
    mix-blend-mode: difference; /* Optional: Makes text visible on light or dark images */
}

.imgGal {background:#090909; position:relative; top:0; display:flex; align-items:start; justify-content:center; height:auto; flex-wrap:wrap; width:100vw; pointer-events:none; gap:100px;}


.archiveHover {
  opacity: 0.6;
  transition: opacity 0.3s ease-out; 
}

.archiveHover:hover {
  opacity: 1;
}

@media only screen and (max-height: 1000px) {

.clockFace {font-size: 1.75vh; line-height: 1.2em;}
	
}


@media only screen and (max-width: 800px) {
	

	
	
	
.gridHolder {
	position: absolute;
	display:flex; 
	justify-content:center; 
	width:100vw;
    bottom: 0;      /* Adjust spacing from bottom */
    left: 0;        /* Adjust spacing from left */
    z-index: 10000;    /* Must be higher than the images */
    pointer-events: none; /* Important: lets clicks pass through so you can still close the overlay */
    mix-blend-mode: difference; /* Optional: Makes text visible on light or dark images */
}	

.imgGal {background:#090909; position:relative; top:0; display:flex; align-items:start; justify-content:center; height:auto; flex-wrap:wrap; width:100vw; pointer-events:none; gap:50px;}	
	
.microMicro {
  font-family: "FT3";		
  background: none;
  border: none;
  cursor: pointer;
  font-size: 6.15vw;
  font-weight: 300;
  line-height: 1.4em;
  color: #c4c0ad;
  text-transform:uppercase;		
}	
	
	
.controls {
  width: 100%;
  margin-left: 0%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 3.5vh;
}	

.controlHolder {
  background: none !important;
  position: absolute;
  bottom: 15vh;
  display: flex;
  align-content: center;
  justify-content:center;	
  width: 70%;
  flex-wrap: wrap;
}

.playPause {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 3.25vw;
  font-weight: 300;
  line-height: 1.4em;
  color: #c4c0ad;
}

.stop {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 3.25vw;
  font-weight: 300;
  line-height: 1.4em;
  color: #c4c0ad;
}

.closeBtn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 3.25vw;
  font-weight: 300;
  line-height: 1.4em;
  color: #c4c0ad;
}

.track {
  vector-effect: non-scaling-stroke;
  stroke: #c4c0ad;
  stroke-width: 1px;
}

.muteToggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 3.25vw;
  font-weight: 300;
  line-height: 1.4em;
  color: #c4c0ad;
}	
	
	
	.titleBox {z-index:0; padding-top:25vh; padding-bottom:15vh; position:relative; display:flex; height:auto; width:90vw; padding-left:5vw; padding-right:5vw; align-items:center; justify-content:center; flex-direction:column; background:#090909}
	
	.vidStyle {width:50vw; height:50vh; object-fit:contain;}
	.vidStyle2 {width:100vw; height:101vh; object-fit:cover;}
	.vidStyleArchive {width: 100%; height: 50vh;
  display: block;
  object-fit: contain;}
	
	.homeDetails {position:relative; width:40%; padding-right:30%; padding-left:30%;}

	
		.objectBox {height:110vh; width:100vw; top:0; position:absolute; pointer-events:none; z-index:100000}
	
	.vimeoWrapper iframe {width:90vw;}	
	
.vimeoWrapper {
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: 56.25vw;
   overflow: hidden;
}	
	
.embedHolder {
	z-index:100; position:relative; display:flex; width:100vw; height: 56.25vw; height:auto; align-items:flex-start; justify-content:flex-start; flex-direction:column; background:#090909;
}	
	

.pusher {position:absolute; height:100svh; z-index:-1; pointer-events:none; touch-action:none;}
	
	
.widTHER {width:65%;}

	
.innerMenu {transform: rotate(0deg); display:flex; align-items:center; justify-content:center; flex-direction:column; width:100%;}

	
	
.menuHolder {width:100vw; height: 100dvh; position:fixed; top:0; left:0; display:flex; align-items:center; justify-content:center; z-index:101; flex-direction:column; z-index:1;}
	

.vidholder {width:100vw; height:100dvh;}
.fullHolder {width:100vw; height:100dvh;}	

.imgStyle {width: 100vw; height: 90svh; object-fit:cover;}

	
.clockFace {font-size: 3.25vw;}
.clockFaceSmall {font-weight:300; font-family:sans-serif; font-size: 2.25vw; line-height: 1.5em;}
	
	
h1 {
  font-family:  "FT3";
  margin-bottom: 0;
  margin-top: 0;
  font-weight: 400;
  font-size: 3.25vw;
  line-height: 1.2em;
  text-transform: uppercase;
}

.ionic {font-size: 10vw; line-height: 1.em;}

.spec { 
		 font-size: 3.25vw;
  		line-height: 1.2em;
}
	
	
	
.notMono {
   font-family:  "FT1";
}

.monoTime {
  font-family:  "FT3";
  margin-bottom: 0;
  margin-top: 0;
  font-weight: 400;
  font-size: 3.25vw;
  line-height: 1.3em;
  text-transform: uppercase;
}


.smallType {
  font-family: sans-serif;
  margin-bottom: 0;
  margin-top: 0;
  font-weight: 400;
  font-size: 3.25vw;
  line-height: 1.1em;
  text-transform: uppercase;
}
	
	
.hugeType {
	  font-family: "FT2";	
	  font-size: 3vw;
      line-height:1.3em;	
	  text-align:center;
	  letter-spacing:none;
	  padding-left:5vw;
	  padding-right:5vw;
}	
	
.hugeType2 {
	  font-family: "FT2";	
	  font-size: 15vw;
	  line-height:1em;
	  text-align:center;
}	
	
.hugeSpec {
	  font-family:  "FT3";
	  font-size: 8vw;
	  line-height:1em;
	  text-align:center;
}	
		
	
.wheel_1 {
  top: 0;
  left: 0;
  position: fixed;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
}	

.box1 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap:wrap;
  padding: 0;
  margin: 0;
  height: 90dvh;
  width: 100vw;
  mix-blend-mode:lighten;		
}
	

	
}




@media only screen 
  and (orientation: landscape) 
  and (max-width: 932px) 
  and (hover: none) {
  
	
body {
    /* 100.1vh makes it just scrollable enough to trigger the bar hide */
    height: 110dvh; 
	overflow:scroll;
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch;
}
 body::-webkit-scrollbar {
        display: none !important;
    } 


.pusher ::-webkit-scrollbar{display: none !important;}
.heightMaker ::-webkit-scrollbar{display: none !important;}
	
.menuHolder {pointer-events:none; width:100vw; height:110vh; position:fixed; top:0; left:0; display:flex; align-items:center; justify-content:center; z-index:1; flex-direction:column; z-index:1;}
	
.wheel_1 {
  top: 0;
  left: 0;
  position: fixed;
  width: 100vw;
  height: 110vh;
  overflow: hidden;
  touch-action:none !important;	
}		
	

	
	
h1 {
  font-family:  "FT3";
  margin-bottom: 0;
  margin-top: 0;
  font-weight: 400;
  font-size: 1.5vw;
  line-height: 1.2em;
  text-transform: uppercase;
}

.ionic {font-size: 7vw; line-height:1em;}

.spec { 
		 font-size: 1.5vw;
 
}	
	
.notMono {
   font-family:  "FT1";
}

.clockFace {font-size: 1.5vw;}
	

	
.monoTime {
  font-family:  "FT3";
  margin-bottom: 0;
  margin-top: 0;
  font-weight: 400;
  font-size: 1.5vw;
  line-height: 1.2em;
  text-transform: uppercase;
}	
		

.widTHER {width:70%;}
	
.box1 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap:wrap;
  padding: 0;
  margin: 0;
  height: 115vh;
  width: 100vw;
  mix-blend-mode:lighten;		
}	

.videoWrapper {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 115vh;
   pointer-events: none;
   overflow: hidden;
}
.videoWrapper iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 300vh;
   min-width: 277.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}	
	
.vidholder {width:100vw; height:150vh;}
.fullHolder {width:100vw; height:150vh;}	

.imgStyle {width: 100vw; height: 150vh; object-fit:cover;}
	
	.heightMaker {display:flex; height:110vh; width:100vw; background:none; z-index:-1; position:relative;}	
	
	
}


*:focus {
outline: 0;
outline: none;
}