@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&display=swap");

/* === BASE STYLES === */
:root {
  --bg-color: #fcfcfc;
  --text-color: #050505;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: "Inter";
  /* overflow-x: hidden; */
}

.blackdot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* video modal  */

.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.videoModalOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
}

.videoModalContent {
  position: relative;
  width: 90%;
  max-width: 1200px;
  margin: 50px auto;
  z-index: 10000;
}

.videoModalClose {
  position: absolute;
top: -20px;
    right: -61px;
  background: none;
  border: none;
  color: white;
  font-size: 40px;
  cursor: pointer;
}

.modalVideo {
  width: 100%;
  height: auto;
}




/* Extra small (xs): <576px */
@media (max-width: 575.98px) {
  .videoModalClose {
   
    top: -16px;
    right: 9px;
    
}
}

/* Small (sm): ≥576px and <768px */
@media (min-width: 576px) and (max-width: 767.98px) {}

/* Medium (md): ≥768px and <992px */
@media (min-width: 768px) and (max-width: 991.98px) {}






/* Large (lg): ≥992px and <1200px */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #videoModal1 .modalVideo,#videoModal2 .modalVideo {
    width: 25%;
  }

  #videoModal1 .videoModalContent,#videoModal2 .videoModalContent {
    display: flex;
    justify-content: center;
  }

  .videoModalClose {
    position: absolute;
    top: -30px;
    right: 0px;
}


#videoModal3 .modalVideo {

 width: 70%;

}

#videoModal3 .videoModalContent{
    display: flex;
    justify-content: center;
}



}


@media (min-width: 1200px) and (max-width: 1399.98px) {
  #videoModal1 .modalVideo,#videoModal2 .modalVideo {
    width: 25%;
  }
    #videoModal1 .videoModalContent,#videoModal2 .videoModalContent {
    display: flex;
    justify-content: center;
  }

  .videoModalClose {
    position: absolute;
    top: -30px;
    right: 0px;}


    #videoModal3 .modalVideo {

 width: 80%;

}

#videoModal3 .videoModalContent{
    display: flex;
    justify-content: center;
}


}


@media (min-width: 1400px) {
  #videoModal1 .modalVideo,#videoModal2 .modalVideo {
    width: 30%;
  }
    #videoModal1 .videoModalContent,#videoModal2 .videoModalContent {
    display: flex;
    justify-content: center;
  }
}

/* video modal end */

/* navbar  */

.mobius-navbar {
  min-height: var(--nav-height);
  background: transparent;
  z-index: 1030;
  position: fixed;
  width: 100%;
}

.mobius-navbar .container-fluid {
  min-height: var(--nav-height);
  padding-inline: 16px 18px;
}

.brand {
  color: var(--text) !important;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  text-decoration: none;
}

.desktop-nav {
  gap: clamp(2.5rem, 4vw, 5.5rem);
  flex-wrap: nowrap;
}

/* Main animated link */
.split-hover {
  display: inline-flex;
  align-items: flex-start;
  padding: 0 !important;
  margin: 0;
  color: var(--text) !important;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

/* Critical fix: each character is clipped here */
.char {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  vertical-align: top;
  contain: paint;
  position: relative;
}

/* Only this inner stack moves */
.char__inner {
  display: block;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}

.char__inner span {
  display: block;
  height: 1em;
  line-height: 1;
}

.split-hover:hover,
.split-hover:focus {
  color: var(--text) !important;
}

.split-hover:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 6px;
  border-radius: 4px;
}

/* Toggler */
.navbar-toggler {
  border: 0;
  padding: 0;
  box-shadow: none !important;
}

.navbar-toggler:focus {
  box-shadow: none !important;
}

/* Offcanvas */
.mobius-offcanvas {
  --bs-offcanvas-width: min(100vw, 420px);
  border-left: 0;
}

.mobius-offcanvas .offcanvas-header {
  padding: 1rem 1.25rem;
}

.mobius-offcanvas .offcanvas-body {
  padding: 1.25rem;
}

.offcanvas-nav {
  gap: 1.25rem;
  align-items: flex-start;
}

.offcanvas-nav .split-hover {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .char__inner {
    transform: none !important;
  }
}

/* navbar end */

.home-main {
  overflow: hidden;
}

.main-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  padding: 2.5vw;
}

/* === TOP HEADER SECTION === */
.intro-text {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  max-width: 318px;
}

.intro-text strong {
  font-weight: 900;
}

.nav-links {
  display: flex;
  gap: 3rem;
}

.nav-links a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.nav-links a:hover {
  opacity: 0.6;
}

/* === GIANT BACKGROUND TEXT === */
.giant-typography {
  position: absolute;
  bottom: -5vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 17vw;
  font-weight: 900;
  letter-spacing: 1.2px;
  line-height: 0.75;
  color: var(--text-color);
  white-space: nowrap;
  z-index: 1;
  user-select: none;
}

.giant-typography sup {
  font-size: 10vw;
  top: -0.5em;
  letter-spacing: 0;
}

/* === CENTRAL IMAGE STACK === */

.float-desc {
  position: absolute;
  top: 10px;
  left: 8rem;
}

.stack-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  height: 480px;
  z-index: 5;
}

.stack-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
  transform-origin: center center;
  visibility: hidden;
  will-change: transform;
}

.stack-card:hover {
  cursor: pointer;
}

.card-bg-black {
  background-color: #111;
}

.card-bg-yellow {
  background-color: #f7e654;
}

.card-bg-darkgrey {
  background-color: #615a4d;
}

.card-bg-lightgrey {
  background-color: #b5b5b5;
}

.card-front {
  background-color: #ff8c00;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  filter: contrast(1.2) sepia(1) hue-rotate(-15deg) saturate(3);
}

/* === SECOND FOLD STYLES === */
.second-fold {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  overflow: hidden;
}

.place-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: center;
  /* max-width: 1000px; */
  padding: 2rem;
}

.word {
  font-size: 80px;
  font-weight: 600;
  font-family: Inter;
  letter-spacing: -0.04em;
  display: inline-block;
  will-change: transform, opacity;
}

.bg-red {
  background-color: #ffcccc;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .giant-typography {
    font-size: 35vw;
    bottom: 10vh;
  }

  .stack-container {
    width: 260px;
    height: 330px;
  }
}

/* third-container  */
.text-container .three-para {
  color: #6e6d6d;
  font-size: 14px;
}

.three-para {
  overflow: hidden;
}

.three-para p {
  transform: translateY(20px);
  opacity: 0;
  margin: 0;
}

/* video-section  */
/* Hero Section Setup */
.video-section {
  position: relative;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  top: 0;
  left: 0;
}

/* Marquee Background Containers */
.marquee-wrapper {
  position: absolute;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1;
  /* Behind the video */
}

.marquee-row {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.marquee-content {
  display: inline-block;
  white-space: nowrap;
  /* Fit content ensures exact calculation for GSAP */
  width: fit-content;
}

/* Typography based on your image */
.marquee-text {
  display: inline-block;
  font-size: clamp(4rem, 10vw, 12rem);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
  padding-right: 50px;
}

.dark-text .marquee-text {
  color: #0b0b0b;
}

.grey-text .marquee-text {
  color: #f0f0f0;
}

/* Video Setup */
.video-container {
  width: 60%;
  max-width: 800px;
  position: relative;
  z-index: 6;
}

.video-container video {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto; /* ✅ important */
  object-fit: cover;
}

/* Just to make the scroll area below the fixed section visible */
.scroll-content {
  position: absolute;
  top: 100vh;
  width: 100%;
  padding: 50px;
  text-align: center;
  color: gray;
}

/* text-effets  */
/* Right Scrollable Side (Spacing) */
.scrollable-content {
  padding: 10vh 0;
}

.service-block {
  display: flex;
  margin-bottom: 25vh;
  /* Large gap between A, B, C, D */
}

/* --- DESKTOP STICKY BEHAVIOR --- */
@media (min-width: 992px) {
  .sticky-sidebar {
    /* Safari support */
    position: -webkit-sticky;
    /* Standard syntax */
    position: sticky;
    top: 0;
    height: 100vh;
    /* Takes full viewport height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10vh 0;
  }
}

/* --- MOBILE BEHAVIOR (Removes sticky so it doesn't overlap text) --- */
@media (max-width: 991px) {
  .sticky-sidebar {
    padding: 10vh 0 5vh 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
}

/* Sidebar Typography */
.sticky-sidebar h2 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0;
}

.bottom-cta p {
  font-size: 0.95rem;
  color: #7a7a7a;
  max-width: 250px;
  line-height: 1.5;
  margin-bottom: 2rem;
  font-weight: 500;
}

.bottom-cta a {
  font-size: 1.5rem;
  font-weight: 600;
  color: #000;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.02em;
}

/* Letter Mark (A /, B /, etc.) */
.letter-mark {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 700;
  color: #e5e5e5;
  min-width: 80px;
  line-height: 1.1;
}

/* Main Heading Typography */
.main-heading {
  font-size: 39px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.04em;
  margin-bottom: 2.5rem;
}

/* Tags / Pills */
.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tags-container span {
  padding: 0.7rem;
}

.badge-pill {
  background-color: #f3f3f3;
  color: #000;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 50px;
}

/* GSAP Animation Helper Classes */
.overflow-hidden {
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
}

.reveal-word {
  display: inline-block;
  /* Will be animated via GSAP */
}

/* fifth -section  */
/* Spacer to allow you to scroll down to see the animation */
.scroll-spacer {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  color: #adb5bd;
}

/* Section 6 Specific Styles */
.section-six {
  padding: 15vh 0;
}

/* Left Side: Massive Typography */
.mobius-title {
  font-size: 100px;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 0;
}

.mobius-title .registered {
  font-size: 0.4em;
  /* Scales the ® symbol down */
  vertical-align: super;
  font-weight: 700;
}

/* Right Side: Paragraph */
.mobius-desc {
  font-size: 1.1rem;
  color: #6c757d;
  font-weight: 500;
  line-height: 1.6;
  max-width: 380px;
  margin-bottom: 3rem;
}

/* Right Side: CTA */
.mobius-cta {
  font-size: 1.5rem;
  font-weight: 500;
  color: #000000;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  letter-spacing: -0.02em;
}

.mobius-cta svg {
  transition: transform 0.3s ease;
}

.mobius-cta:hover svg {
  transform: translateX(5px);
}

/* 
         * GSAP Animation Helper Classes 
         * These are applied dynamically by JavaScript 
         */
.overflow-hidden {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  /* Prevents text clipping on tails like 'g' or 'y' */
  padding-bottom: 0.1em;
  /* Extra buffer for font tails */
  margin-bottom: -0.1em;
}

.reveal-target {
  display: inline-block;
  /* Will be translated down by GSAP initially */
}

/* numbers  */
.odo-sec6-spacer {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
}

/* --- LAYOUT & STICKY BEHAVIOR --- */
.odo-sec6-wrapper {
  position: relative;
  background-color: #ffffff;
}

@media (min-width: 992px) {
  .odo-sec6-sticky-panel {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
}

/* --- LEFT SIDE TYPOGRAPHY --- */
.odo-sec6-data-chunk {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 5vw;
}

.odo-sec6-heading {
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.04em;
  margin-bottom: 1.5rem;
}

.odo-sec6-paragraph {
  font-size: 16px;
  color: #4a4a4a;
  line-height: 1.6;
  margin-bottom: 2.5rem;
  max-width: 450px;
}

.odo-sec6-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #000000;
  color: #ffffff;
  padding: 14px 32px;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  width: fit-content;
  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
}

.odo-sec6-btn:hover {
  background-color: #333333;
  color: #ffffff;
  transform: translateY(-2px);
}

/* --- RIGHT SIDE: ROLLING ODOMETER MASKING --- */
.odo-sec6-visual-wrapper {
  position: relative;
  display: inline-block;
  background-color: #ffffff;
  user-select: none;
}

.odo-sec6-numbers-track {
  font-size: 380px;
  /* Massive font size */
  font-weight: 900;
  letter-spacing: -0.05em;
  color: #000000;
  /* Text MUST be pure black for the mask to work */

  display: inline-flex;
  /* Aligns the rolling columns side by side */
  height: 1em;
  /* Exactly one number tall */
  line-height: 1;
  overflow: hidden;
  /* Hides the rest of the numbers in the column */
}

/* The Image Overlay Trick (Bug-Free Masking) */
.odo-sec6-img-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;

  /* Lightens the black text, making the image visible ONLY inside the black numbers */
  mix-blend-mode: lighten;
  pointer-events: none;
  transition: background-image 0.5s ease;
}

/* The Rolling Columns */
.odo-sec6-digit-col {
  display: flex;
  flex-direction: column;
  /* GSAP will translate this element on the Y axis */
}

.odo-sec6-digit {
  display: block;
  height: 1em;
  /* Matches container height perfectly */
  line-height: 1;
  text-align: center;
}

/* --- GSAP Animation Helper Classes --- */
.odo-sec6-hide-overflow {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.odo-sec6-reveal-item {
  display: inline-block;
}

/* our patners  */

.sec7-spacer {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f4f4f4;
  color: #a0a0a0;
  font-size: 2rem;
  font-weight: 600;
}

/* --- MAIN SECTION WRAPPER --- */
.sec7-master-wrapper {
  position: relative;
  background-color: #ffffff;
}

.sec7-pin-container {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

/* --- GLOBAL CARD STYLES --- */
.sec7-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  will-change: transform, opacity;
}

/* --- CARD 1: TITLE --- */
.sec7-card-1 {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.sec7-main-title {
  font-size: clamp(4rem, 12vw, 12rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  color: #b5b5b5;
  margin: 0;
  line-height: 1;
}

.sec7-subtext {
  position: absolute;
  bottom: 5vh;
  left: 3vw;
  max-width: 250px;
  font-size: 0.95rem;
  color: #6c757d;
  font-weight: 500;
  line-height: 1.5;
}

/* --- CARD 2: PARTNERS GRID --- */
.sec7-card-2 {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(100%);
}

.sec7-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(6rem, 18vw, 18rem);
  font-weight: 900;
  color: #f8f9fa;
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
  letter-spacing: -0.05em;
}

.sec7-logo-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4rem 6rem;
  align-items: center;
  justify-items: center;
  width: 100%;
  max-width: 1200px;
  padding: 4rem 2rem;
  /* Extra padding so scaling logos don't get cut off */
}

@media (max-width: 991px) {
  .sec7-logo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
}

/* Proximity Logo Styling */
.sec7-logo-item {
  width: 130px;
  height: auto;
  max-width: 100%;
  object-fit: contain;

  /* Base State: Grayscale and Faded */
  filter: grayscale(100%) opacity(0.5);

  /* 
               CRITICAL: We apply a fast transition to transform so that 
               our Javascript coordinate math applies smoothly.
            */
  transition:
    filter 0.3s ease,
    transform 0.2s ease-out;
  will-change: transform;
  cursor: pointer;
}

/* 
           Only the EXACT logo being hovered gets its color back.
           The surrounding logos scaled by JS will stay B&W because 
           they don't trigger this specific :hover state. 
        */
.sec7-logo-item:hover {
  filter: grayscale(0%) opacity(1);
  /* Notice we removed CSS transform: scale() here because JS handles ALL scaling now */
}

/* --- CARD 3: PARALLAX IMAGE --- */
.sec7-card-3 {
  z-index: 3;
  overflow: hidden;
  transform: translateY(100%);
}

.sec7-parallax-img {
  width: 100%;
  height: 130vh;
  background-image: url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=2070&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
}

/* big image  */

/* FAQ  */
/* Spacer to test scrolling */
.sec8-spacer {
  height: 100vh;
  background-color: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a0a0a0;
  font-size: 2rem;
  font-weight: 600;
}

/* --- Section Wrapper --- */
.sec8-faq-section {
  padding: 15vh 0;
  background-color: #ffffff;
  position: relative;
}

/* --- Left Side: Sticky Sidebar --- */
.sec8-sticky-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

@media (min-width: 992px) {
  .sec8-sticky-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 15vh;
    height: calc(100vh - 30vh);
  }
}

@media (max-width: 991px) {
  .sec8-sticky-sidebar {
    margin-bottom: 4rem;
    gap: 2rem;
  }

  .sec8-sidebar-bottom {
    margin-top: 2rem;
  }
}

.sec8-sidebar-title {
  font-size: clamp(1.75rem, 2vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0;
}

.sec8-sidebar-desc {
  font-size: 0.95rem;
  color: #7a7a7a;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 280px;
  font-weight: 500;
}

.sec8-sidebar-link {
  font-size: 1.5rem;
  font-weight: 600;
  color: #000000;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.02em;
  transition: transform 0.3s ease;
}

.sec8-sidebar-link:hover {
  transform: translateX(5px);
}

/* --- Right Side: FAQ Accordion --- */
.sec8-faq-container {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.sec8-faq-item {
  width: 100%;
  border-bottom: none;
}

.sec8-faq-header {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  cursor: pointer;
  user-select: none;
}

.sec8-faq-header:hover .sec8-faq-question {
  color: #333333;
}

/* Custom Cross/Plus Icon */
.sec8-faq-icon {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 10px;
}

.sec8-icon-line-h,
.sec8-icon-line-v {
  position: absolute;
  background-color: #000000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 2px;
}

.sec8-icon-line-h {
  width: 100%;
  height: 2px;
}

.sec8-icon-line-v {
  width: 2px;
  height: 100%;
}

/* Typography */
.sec8-faq-question {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0;
  color: #000000;
  transition: color 0.3s ease;
}

/* Answer Wrapper */
.sec8-faq-answer-wrapper {
  height: 0;
  overflow: hidden;
  padding-left: calc(24px + 2rem);
}

.sec8-faq-answer-content {
  padding-top: 1.5rem;
  padding-bottom: 1rem;
}

.sec8-faq-answer-content p {
  font-size: 1.15rem;
  color: #4a4a4a;
  line-height: 1.6;
  margin: 0;
  max-width: 650px;
}

/* --- GSAP Text Reveal Helper Classes --- */
.sec8-hide-overflow {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.sec8-reveal-item {
  display: inline-block;
  will-change: transform;
}

/* footer  */
.prefoot-spacer {
  height: 100vh;
  background-color: #f0f0f0;
}

.prefoot-wrapper {
  position: relative;
  background-color: #ffffff;
}

.prefoot-reveal-container {
  height: fit-content;
  width: 100%;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  position: relative;
  overflow: hidden;
}

/* --- The Logo --- */
.prefoot-logo {
  position: relative;
  z-index: 1;
  font-size: clamp(6rem, 22vw, 15rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  color: #000000;
  text-align: center;
  display: flex;
  align-items: center;
}

.prefoot-logo .reg-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.25em;
  font-weight: 900;
  line-height: 1;
  width: 1.5em;
  height: 1.5em;
  border: 0.15em solid #000000;
  border-radius: 50%;
  margin-left: 0.1em;
  transform: translateY(-0.1em);
}

/* Expert: Re-instated the bar overlay styles */
.prefoot-bar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

/* Expert: Style for the individual bars */
.prefoot-bar {
  width: 100%;
  background-color: #ffffff;
  will-change: transform;
  flex-grow: 1;
  /* This makes the bars fill the container height */
}

.prefoot-copyright {
  position: absolute;
  top: 5vh;
  right: 5vw;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 500;
  color: #000000;
  z-index: 3;
}

/* =========================================================
           FOOTER CONTENT STYLES (Unchanged and Correct)
        ========================================================= */
#main-footer {
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding: 5vh 2vw;
  opacity: 0;
  visibility: hidden;
  will-change: opacity;
  background-color: #fff;
}

.footer-newsletter p {
  font-size: 16px;
  font-family: "Inter";
  max-width: 400px;
  color: #686666;
  line-height: 1.6;
  font-weight: 600;
}

.newsletter-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f6f6f6;
  padding: 1rem 1.5rem;
  margin-top: 2rem;
  max-width: 450px;
}

.newsletter-form-placeholder {
  font-size: 0.9rem;
  font-weight: 700;
  color: #888888;
  letter-spacing: 0.05em;
}

.newsletter-form-arrow {
  width: 24px;
  height: 24px;
  stroke: #000000;
  stroke-width: 2;
}

.footer-links-column {
  padding-left: 3rem;
}

.footer-heading {
  font-size: 0.8rem;
  font-weight: 500;
  color: #888888;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.25rem;
}

.footer-links a {
  font-size: 30px;
  font-weight: 800;
  color: #000;
  text-decoration: none;
  line-height: 1.3;
  display: inline-block;
  overflow: hidden;
}

.footer-links .reveal-text-footer {
  display: block;
}

.footer-bottom-bar {
  padding-top: 5rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(0.7rem, 1vw, 0.8rem);
  font-weight: 500;
  text-transform: uppercase;
  color: #888888;
}

.footer-bottom-bar .credits {
  font-weight: 700;
  color: #000;
}

@media (max-width: 992px) {
  #main-footer {
    text-align: center;
  }

  .footer-links-column {
    padding-left: 0;
    margin-top: 3rem;
  }

  .footer-newsletter p,
  .newsletter-form {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-bottom-bar {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}

@media (max-width: 575.98px) {
  .float-desc {
    position: absolute;
    top: 4rem;
    left: 1rem;
  }

  .giant-typography {
    font-size: 58px !important;
  }

  .mobius-title {
    font-size: 68px;
  }

  .word {
    font-size: 53px !important;
  }

  .second-fold {
    min-height: unset;
  }

  .video-section {
    height: fit-content;
    margin-block: 5rem;
  }

  .sticky-sidebar {
    padding: 0;
  }

  .scrollable-content {
    padding-top: 10vh;
    padding-bottom: 0;
  }

  .odo-sec6-data-chunk {
    height: fit-content;
    min-height: unset;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .giant-typography {
    font-size: 13vw;
  }

  .video-section {
    position: relative;
    height: fit-content;
    margin-block: 5rem;
  }
  .odo-sec6-data-chunk {
    height: fit-content;
    min-height: unset;
  }

  .scrollable-content {
    padding-top: 10vh;
    padding-bottom: 0;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .odo-sec6-data-chunk {
    min-height: unset;
    height: fit-content;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .odo-sec6-numbers-track {
    font-size: 238px !important;
  }
}