@font-face {
  font-family: 'Roboto';
  src: url('assets/fonts/Roboto-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('assets/fonts/Roboto-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; }
body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  background-color: #fff;
  color: #000;
  overflow-y: scroll;
}
.page-container { position: relative; padding: 0; background-color: #fff; }
.site-header {
  position: relative; display: flex; justify-content: space-between; align-items: center;
  padding: 3rem; z-index: 1000;
}
.site-header.force-show {
  position: fixed !important;
  top: 0; left: 0; width: 100vw; z-index: 10;
}
.logo {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.0625rem;
  color: #000; text-decoration: none;
}
.main-nav ul {
  display: flex; gap: 2rem; list-style: none;
}
.main-nav a {
  font-size: 0.75rem; font-weight: 400; color: #888; margin-left: 1.5rem;
  text-decoration: none; transition: color 0.3s ease;
}
.main-nav a:hover, .main-nav a.active { color: #000; }
.hero-container {
  height: 100dvh; width: 100vw; background-image: url('assets/images/webp/landingpage.webp');
  background-size: cover; background-position: left center;
  display: flex; flex-direction: column; justify-content: space-between;
}
.gallery-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6rem; padding: 0rem 3rem 0rem; margin: 0 auto;
}
.gallery-thumb img { width: 100%; aspect-ratio: 4/5; object-fit: contain; cursor: pointer; }
.photo-viewer, .video-viewer {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; padding: 2rem;
  background: white; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1rem; z-index: 5;
}

.photo-viewer img { width: 100%; max-width: 600px; aspect-ratio: 4/5; object-fit: contain; }
.video-viewer iframe { max-width: 1200px; aspect-ratio: 16/9; border: none; }

.photo-caption, .video-caption {
  font-size: 0.6rem; font-weight: 600; text-align: center; color: #000;
  text-transform: uppercase; pointer-events: none; letter-spacing: 0.05rem;
}
.photo-viewer.hidden, .video-viewer.hidden { display: none; }
.video-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6rem; padding: 0rem 3rem 0rem; margin: 0 auto;
}
.video-thumb img {
  width: 100%; aspect-ratio: 16/9; object-fit: contain; cursor: pointer;
  transition: transform 0.3s ease;
} 
@media (max-width: 90rem) {
  .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3rem; padding: 0rem 3rem 0rem; margin: 0 auto; }
  .video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3rem; padding: 0rem 3rem 0rem; margin: 0 auto; }
  .photo-viewer img { width: 100%; max-width: 500px; aspect-ratio: 4/5; object-fit: contain; }
  .video-viewer iframe { width: 100%; max-width: 900px; aspect-ratio: 16/9; border: none; }
}
@media (max-width: 75rem) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 3rem; padding: 0 3rem; }
  .video-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem; padding: 0 3rem; }
}
@media (max-width: 48rem) {
  .site-header {
    position: relative; display: flex; justify-content: space-between; align-items: center;
    padding: 1.5rem; z-index: 10;
  }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; padding: 0 1.5rem; }
  .video-grid {  grid-template-columns: 1fr; gap: 1.5rem; padding: 0 1.5rem; }
}
.contact { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 2rem; gap: 0.5rem; }
.contact-photo { width: 100%; max-width: 390px; aspect-ratio: 4/5; object-fit: cover; }
.contact-links { width: 100%; max-width: 390px; text-align: left; }
.contact-links p { font-size: 0.75rem; color: #000; letter-spacing: 0.02rem; line-height: 1.6; }
.contact-links a { color: #888; text-decoration: none; transition: color 0.2s ease; }
.contact-links a:hover { color: #000; }
#nprogress .bar { background: #000; height: 1.5px; }
#nprogress .peg, #nprogress .spinner { display: none; }
body::-webkit-scrollbar { display: none; }
.no-scroll { overflow: hidden !important; height: 100vh !important; }

.fade-white-overlay {
  position: absolute;
  z-index: 500;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 1;
  pointer-events: none;
  transition: opacity 1.5s cubic-bezier(.68,-0.55,.27,1.55);
  will-change: opacity;
}
.fade-white-overlay.fade-out {
  opacity: 0;
}