body {
	margin: 0;
	background-color: black;
	color: white;
	font-family: 'Forma DJR Micro', sans-serif;	
}

#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;	
  z-index: -1;  
  opacity: 1;
  transition: opacity 1s ease; 
  filter: brightness(60%);
}

#bg-video.hidden {
  opacity: 0;
}

.navbar {
	position: sticky;
	width: 100%;
	height: 5rem;
	z-index: 1000;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: clamp(10px, 1vw, 20px);
	padding-right: clamp(20px, 3vw, 60px);
	box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}
	
#hero {
  scroll-margin-top: 50vh;
}

#services {
  scroll-margin-top: 50vh;
}
#partners {
  scroll-margin-top: 0vh;
}

#scrollToTop {
  position: fixed;
  right: clamp(20px, 2vw, 40px);
  top: clamp(20px, 2vw, 40px);
  z-index: 1000;
  background-color: transparent;
  border: none;
  padding: 0;
  width: clamp(40px, 5vw, 60px);
  height: clamp(40px, 5vw, 60px);
  font-size: clamp(20px, 2vw, 30px);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#scrollToTop img {
  width: clamp(30px, 3vw, 50px); /* scale with screen */
  height: auto;
  display: block;
  background: transparent;
  filter: brightness(0) invert(1);
}

#scrollToTop.show {
  opacity: 1;
  pointer-events: auto;
}

	.services-list li:nth-child(1) { animation-delay: 0s; }
	.services-list li:nth-child(2) { animation-delay: 2s; }
	.services-list li:nth-child(3) { animation-delay: 4s; }
	.services-list li:nth-child(4) { animation-delay: 6s; }

.logo img {
	height: clamp(80px, 10vw, 120px);
	width: auto;
	color: white;
	font-size: 3vw;
	font-weight: bold;
}

.nav-links {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;    
  white-space: nowrap;
}

.nav-links a {
	flex: 0 0 auto;
	padding: clamp(10px, 1vw, 20px);
	color: white;
	font-size: clamp(14px, 1.5vw, 18px);
	text-decoration: none;
	margin-left: clamp(6px, 1.5vw, 25px);
}

.nav-links a:hover {
	text-decoration: underline;
}

.hero {
	margin-top: clamp(40px, 5vw, 100px);
	padding-left: clamp(20px, 8vw, 150px);
	text-align: center;
	color: white;
	font-family: 'Forma DJR Micro', sans-serif;
}

.main-text {
	opacity: 0;
	animation: fadeInSlide 1s ease forwards;
	animation-delay: 0.2s;
	text-align: left;
	font-size: clamp(24px, 4vw, 60px);
	font-weight: 300;
	margin: clamp(8px, 1vw, 20px);
}

.main-text-L2 {
	opacity: 0;
	animation: fadeInSlide 1s ease forwards;
	animation-delay: 0.3s;

	text-align: left;
	font-size: clamp(22px, 4vw, 58px);
	font-weight: 300;
	margin: clamp(8px, 1vw, 20px) clamp(40px, 6vw, 100px);
}

.main-text em {
	font-style: italic;
}

.main-text strong {
	font-weight: bold;
}

.sub-text {
	opacity: 0;
	animation: fadeInSlide 1s ease forwards;
	animation-delay: 0.4s;
		
	text-align: left;
	padding: clamp(2px, 1vw, 20px) clamp(12px, 2vw, 40px);
	margin-top: clamp(50px, 5vw, 80px);
	font-size: clamp(16px, 2vw, 28px);
	font-family: 'Forma DJR Micro Extra', sans-serif;
}
		
	.line {
	display: inline-block;
	width: clamp(75px, 1vw, 150px);    
	height: clamp(1px, 0.3vw, 4px);       
	background: white; 
	margin: 0 10px;     
	vertical-align: middle;
}

.line-2 {
	display: inline-block;
	width: clamp(30px, 1vw, 50px);    
	height: clamp(.5px, 0.3vw, 2px);     
	background: white;  
	margin: 0 10px;    
	vertical-align: middle;
}

.cta-button {
	opacity: 0;
	padding-left: clamp(30px, 3vw, 50px);
	animation: fadeInSlide 1s ease forwards;
	animation-delay: 0.4s;
		
	display: block;
	width: fit-content;
	margin: clamp(20px, 4vw, 60px) auto 0 0;
	text-align: left;
		
	padding: clamp(10px, 1vw, 16px) clamp(24px, 2vw, 40px);
	border: 1px solid white;
	border-radius: 50px;
	color: white;
	text-decoration: none;
	font-family: 'Forma DJR Micro Extra', sans-serif;
	font-weight: 300;
	font-size: clamp(14px, 1.5vw, 20px);
	transition: all 0.3s ease;
	margin-top: 60px;
}

.cta-button:hover {
	background-color: white;
	color: black;	
}
	
.Elevated-experiences {
  opacity: 0;
  transition: opacity 1s ease, transform 1.5s ease;

  margin-top: clamp(100px, 15vw, 300px);
  padding-left: clamp(20px, 6vw, 80px);
  padding-right: clamp(20px, 6vw, 80px);
}

.Elevated-experiences.visible {
	opacity: 1;
	transform: translateY(0);
}

.carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: clamp(1200px, 80vw, 1400px);
  margin-top: clamp(-20px, -3vw, -50px);
}

.carousel-track {
	position: relative;
	width: 100%;
	height: 100%;
}

.carousel-slide {
  display: flex;
  flex-direction: row-reverse; /* horizontal layout */
  justify-content: center;
  align-items: center;
  gap: clamp(40px, 6vw, 100px);
  opacity: 0;
  transition: opacity 0.8s ease;
  position: relative;
  margin-top: clamp(20px, 3vw, 60px);
}

.carousel-slide.active {
	opacity: 1;
	z-index: 1; 
}

.carousel-btn {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: white;
	font-size: 4vw;
	cursor: pointer;
	z-index: 2;
}

.carousel-btn.prev {
  opacity: 0;
	left: 20px;
}

.carousel-btn.next {
	opacity: 0;
  right: 20px;
} 

.video-box_9x16 {
  position: relative;
  aspect-ratio: 9 / 16;
  width: clamp(250px, 30vw, 500px);
  background-color: black;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  bottom: 50px;
  overflow: hidden; /* ✅ keeps video inside the frame */
  margin: 0 auto;
  z-index: 1;
}

.video-box_9x16 video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.case-study {
  flex: 1;
  position: relative;
  bottom: clamp(200px, 5vw, 00px); /* remove overlap */
  margin: 0;
  text-align: left;
  font-size: clamp(18px, 1.8vw, 28px);
  line-height: 1.6;
  transform: translateY(clamp(100px, 5vw, 200px));
}

.services {
  margin-top: clamp(80px, 10vw, 180px);
  margin-bottom: clamp(200px, 25vw, 450px);

  text-align: center;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease, transform 1.5s ease;
}

.main-text-2 {
	font-size: (clamp(32px, 4vw, 60px));
}

.services.visible {
	opacity: 1;
	transform: translateY(0);
}
	
.services-list {
	list-style: none;
	padding: 0px;
	margin: 40px 0 0; 
	position: relative;
	height: 50px;
}

.services-list li {
  font-size: clamp(24px, 3.5vw, 42px);
  font-family: 'Forma DJR Micro Extra', sans-serif;

  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  animation: fadeCycle 8s infinite;
}


	
.main-text-2 {
  opacity: 0;
  animation: fadeInSlide 1s ease forwards;
  animation-delay: 0.2s;

  text-align: center;
  font-size: clamp(24px, 3.5vw, 48px);
  font-weight: 300;
}

.main-text-3 {
  opacity: 0;
  animation: fadeInSlide 1s ease forwards;
  animation-delay: 0.2s;

  text-align: center;
  font-size: clamp(24px, 3.5vw, 48px);
  font-weight: 300;
}

.contact {
  margin-top: clamp(100px, 12vw, 200px);
  text-align: center;
  padding: clamp(40px, 6vw, 80px) clamp(16px, 4vw, 40px);
  padding-bottom: clamp(120px, 15vw, 300px);
}


.contact h2 {
  font-size: clamp(24px, 2.5vw, 48px);
  font-weight: 700;
  margin-bottom: clamp(20px, 4vw, 60px);
}

.contact-form {
  max-width: clamp(500px, 70vw, 800px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 3vw, 32px);
}


.form-row {
  display: flex;
  gap: clamp(12px, 2vw, 24px);
  flex-wrap: wrap;
}

.contact-form input,
.contact-form input,
.contact-form textarea {
  flex: 1;
  padding: clamp(10px, 2vw, 18px) clamp(12px, 2vw, 20px);
  border: none;
  border-bottom: 2px solid #444;
  background: transparent;
  color: white;
  font-size: clamp(14px, 1.2vw, 18px);
  outline: none;
}


.contact-form textarea {
  resize: none;
}

.contact-form button {
  margin-top: clamp(16px, 3vw, 32px);
  padding: clamp(12px, 2vw, 18px) clamp(20px, 3vw, 32px);
  background: #222;
  border: none;
  border-radius: 50px;
  color: white;
  font-size: clamp(14px, 1.2vw, 18px);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}


.contact-form button:hover {
  background: white;
  color: black;
}

.site-footer {
  background: transparent;
  color: #aaa;
  text-align: center;
  padding: clamp(12px, 2vw, 24px);
  font-size: clamp(10px, 0.9vw, 16px);
}

.site-footer p {
  margin: 0;
  line-height: 1.6;
  max-width: 90ch;
  margin-inline: auto;
}


@keyframes fadeCycle {
	  0%   { opacity: 0; }
	  10%   { opacity: 1; }
	  20%  { opacity: 1; }
	  25%  { opacity: 0; }
	  100% { opacity: 0; }
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* === PHONE LAYOUT (VERTICAL STACK) === */
@media (max-width: 950px) {
   .Elevated-experiences {
    padding-bottom: clamp(200px, 20vw, 350px);
   }
  .carousel {
    overflow: visible;
    min-height: auto;
    padding: clamp(20px, 5vw, 40px) 0;
    margin-top: clamp(40px, 8vw, 100px);
  }

  .carousel-slide {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 6vw, 48px);
    margin-top: clamp(20px, 4vw, 60px);
    opacity: 1;
    position: relative;
  }

.video-box_9x16 {
  position: relative;
  aspect-ratio: 9 / 16;
  width: clamp(300px, 35vw, 600px);
  max-width: 400px;
  background-color: black;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  margin: 0 auto;
  z-index: 1;
}

  .sub-text-2 {
    text-align: left;
    font-size: clamp(18px, 4vw, 28px);
    padding: 0 clamp(10px, 5vw, 20px);
    margin-top: clamp(10px, 3vw, 30px);
  }

  .case-study {
    position: static;
    text-align: left;
    width: 90%;
    max-width: 400px;
    margin: clamp(20px, 5vw, 40px) auto 0;
    font-size: clamp(16px, 3vw, 20px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
  }


  .carousel-btn {
    display: none;
  }

  
}