/* ======= FULL-WIDTH RESPONSIVE BACKGROUND FOR PRODUCT DESIGN SECTION ========
   Units converted px -> rem where appropriate (1rem = 16px).
   Positioning, sizing and layout logic preserved. Viewport units (vw/vh/%) left as-is.
*/

.product-layout,
.product-hero,
.user-journey-section, /* add other "section" BGs as needed */
.product-approach-section,
.interface-showcase-section,
.product-video-showcase-section {
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 100vw !important;
  margin: 0 !important;
  left: 0;
  right: 0;
  background: #e8e8e8 !important;
  position: relative;
  box-sizing: border-box;
  /* Remove unwanted border or box-shadow if present */
  border: none;
}



.product-hero {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.horizontal-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* ============================================ */
/* PRODUCT DESIGN SECTION - FIXED             */
/* ============================================ */


/* ===== PRODUCT LAYOUT ===== */
.product-layout {
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible;
  width: 100vw;
}


/* ===== PRODUCT HERO - FIXED LAYOUT ===== */
.product-hero {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 0 6.25rem; /* 100px -> 6.25rem */
  background: #e7e8e7;
  gap: 3.75rem; /* 60px -> 3.75rem */
}

/* ===== LEFT SIDE: Logo ===== */
.product-left {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  width: 21.875rem; /* 350px -> 21.875rem */
  left: -6.25rem; /* -100px -> -6.25rem */
}


.product-logo {
  width: 150%;
  max-width: 26.25rem; /* 420px -> 26.25rem */
  height: auto;
  display: block;
  object-fit: contain;
  
}


/* ===== CENTER: Reel Video ===== */
.productvideo-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-video-large {
  width: 100vw;
  max-width: 100vw;
  height: auto;
  max-height: 100vh;
  object-fit: contain;
  display: block;
  pointer-events: none;
  margin-top: -10%;
}







/* ===== RIGHT SIDE: Description Text ===== */
.product-right {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  width: 14.6875rem; /* 235px -> 14.6875rem */
  margin-left: auto;
}

.product-description {
  font-size: 0.75rem;
  line-height: 1.6;
  text-align: justify;
  color: #000;
  margin: 0;

}

/* ===== RESPONSIVE ===== */
@media (max-width: 87.5rem) { /* 1400px -> 87.5rem */
  .product-hero {
    flex-direction: column;
    padding: 3.75rem 2.5rem; /* 60px 40px -> rem */
    min-height: auto;
    gap: 2.5rem; /* 40px -> 2.5rem */
  }
  
  .product-left,
  .product-right {
    width: 100%;
    max-width: 37.5rem; /* 600px -> 37.5rem */
    margin: 0 auto;
  }
  
  .productvideo-center {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    pointer-events: auto;
  }
  
  .product-video-large {
    height: 37.5rem; /* 600px -> 37.5rem */
  }
  
  .product-logo {
    max-width: 18.75rem; /* 300px -> 18.75rem */
    margin: 0 auto;
  }
  
  .product-description {
    text-align: center;
    max-width: 37.5rem; /* 600px -> 37.5rem */
  }
}

@media (max-width: 56.25rem) { /* 900px -> 56.25rem */
  .product-hero {
    padding: 2.5rem 1.25rem; /* 40px 20px -> rem */
  }
  
  .product-logo {
    max-width: 15.625rem; /* 250px -> 15.625rem */
  }
  
  .product-video-large {
    height: 25rem; /* 400px -> 25rem */
  }
  
  .product-description {
    font-size: 0.85rem;
  }
}

@media (min-width: 160rem) { /* 2560px */
  /* Force full-bleed so wide monitors don't show left gaps */
  .product-layout,
  .product-hero,
  .horizontal-container,
  .product-video-showcase-section,
  .product-approach-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box;
  }

  /* Gently scale paddings so layout breathes on big screens */
  .product-hero {
    padding-left: 22.5rem;  /* 360px -> 22.5rem */
    padding-right: 22.5rem;
    gap: 11.875rem;         /* 190px -> 11.875rem */
  }

  /* Scale the logo column and logo */
  .product-left {
    width: 45rem;           /* 720px -> 45rem */
    /* keep left offset the same in rem */
    left: -6.25rem;         /* -100px -> -6.25rem */
  }
  .product-logo {
    max-width: 53.125rem;   /* 850px -> 53.125rem */
    width: 200%;
  }

  /* Scale the right text column */
  .product-right {
    width: 26.25rem;        /* 420px -> 26.25rem */
  }

  /* Make the central video larger but keep aspect constraints */
  .product-video-large {
    max-height: 97.5rem;    /* ~1560px -> 97.5rem */
  }

  /* Increase product-video-showcase container width */
  .product-video-container {
    max-width: 128.125rem;  /* ~2050px -> 128.125rem */
  }
}





/* ===== PRODUCT EXTENDED CONTENT - HORIZONTAL SCROLL WITH FROSTED GLASS ===== */
/* Units converted px -> rem (1rem = 16px). Positioning/sizing preserved.
   Added a targeted media query at the end to optimize for very large displays up to 2560px.
*/

.horizontal-container {
  display: none;
  opacity: 0;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  background: #e8e8e8;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0 !important;
  transition: opacity 0.6s ease;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  height: 100vh;
  white-space: nowrap;
  font-size: 0;
  margin-top: -6.5625rem !important; /* -105px -> -6.5625rem */
}

/* Container grain texture */
.horizontal-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
}

/* Individual slides - FROSTED GLASS */
.horizontal-slide {
  display: inline-block;
  width: 100vw;
  height: 100vh;
  vertical-align: top;
  white-space: normal;
  margin: 0 !important; /* FORCE NO MARGIN */
  padding: 0;
  position: relative;
  z-index: 1;
  scroll-snap-align: start;
  overflow-x: hidden; /* PREVENTS HORIZONTAL OVERFLOW */
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 0; /* NO CURVED EDGES */
  box-sizing: border-box; /* INCLUDES PADDING IN WIDTH */
  font-size: 0.75rem; /* RESET font-size for content */
}

.horizontal-slide:last-child {
  margin-right: 0;
}

/* GRAIN TEXTURE FOR EACH SLIDE */
.horizontal-slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulance type='fractalNoise' baseFrequency='2.5' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.35;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
}

.slide-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* 40px -> 2.5rem */
  position: relative;
  z-index: 2;
  white-space: normal;
  padding: 5rem; /* 80px -> 5rem */
  box-sizing: border-box;
  overflow: hidden; /* CONTAINS CONTENT */
  font-size: 0.75rem; /* Ensure text displays */
}

/* ===== SLIDE 1: PURPOSE - FIXED NO SLIDING ===== */

.slide-1 {
  background: rgba(236, 236, 236, 0.5);
  border-radius: 0;
}

.slide-1 .slide-content {
  display: grid;
  grid-template-columns: 17.5rem 1fr 17.5rem; /* 280px -> 17.5rem */
  grid-template-rows: auto 1fr;
  gap: 2.5rem; /* 40px -> 2.5rem */
  align-items: start;
  height: 100%;
  padding: 5rem; /* 80px -> 5rem */
  box-sizing: border-box;
  overflow: hidden; /* PREVENTS SLIDING */
}

/* Purpose label - top left */
.slide-1 .text-block {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  align-self: start;
  justify-self: start;
  margin: 0;
  padding: 0;
}

.slide-1 .section-label {
  background: #000;
  color: #e8e8e8;
  border: none;
  padding: 0.5rem 1.25rem; /* 8px 20px -> 0.5rem 1.25rem */
  font-size: 1.3rem;
  font-weight: normal;
  font-style: italic;
  text-transform: lowercase;
  display: inline-block;
  width: fit-content;
  margin: 0;
  position: relative;
  left: 0;
  top: 11.25rem; /* 180px -> 11.25rem */
}

/* First paragraph - bottom left */
.slide-1 .text-block p {
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: justify;
  margin: 0;
  padding: 0;
  border: none;
  max-width: 17.5rem; /* 280px -> 17.5rem */
  position: relative;
  left: 0;
  top: 15.625rem; /* 250px -> 15.625rem */
}

/* Center image - FORCE SIZE */
.slide-1 .image-block {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  overflow: visible; /* Allow overflow */
  position: relative;
}

.slide-1 .image-block img {
  width: auto !important;
  height: 100vh !important; /* keep viewport height */
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  object-fit: contain !important;
  display: block !important;
  position: absolute; /* absolute positioning preserved */
  left: 70%;
  top: 50%;
  transform: translate(-50%, -50%) translateX(-7.5rem); /* -120px -> -7.5rem */
}

/* Right text blocks - stacked */
.slide-1 .text-blocks-right {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* 40px -> 2.5rem */
  align-items: flex-end;
  justify-content: center;
  padding-right: 0;
}

.slide-1 .right-text-top {
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: justify;
  margin: 0;
  padding: 0;
  border: none;
  max-width: 17.5rem; /* 280px -> 17.5rem */
  position: relative;
  left: -6.25rem; /* -100px -> -6.25rem */
  top: 16.25rem;  /* 260px -> 16.25rem */
}

.slide-1 .tagline-box {
  background: #000;
  color: #e8e8e8;
  border: none;
  padding: 0.5rem; /* 8px -> 0.5rem */
  border-radius: 0;
  max-width: 12.5rem; /* 200px -> 12.5rem */
  position: relative;
  left: -6.25rem; /* -100px -> -6.25rem */
  top: 18.125rem; /* 290px -> 18.125rem */
}

.slide-1 .tagline-box p {
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: justify;
  margin: 0;
}

/* ===== SLIDE 2: OBJECTIVE & ACHIEVEMENT - CLEAN LAYOUT ===== */

.slide-2 {
  background: rgba(236, 236, 236, 0.5);
  border-radius: 0;
}

.slide-2 .slide-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 2.5rem; /* 40px -> 2.5rem */
  align-items: start;
  height: 100%;
  padding: 5rem; /* 80px -> 5rem */
  box-sizing: border-box; /* Makes padding stay inside */
  position: relative;
  left: 0;
  top: 0;
}

/* Left images stack */
.slide-2 .left-images-stack {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 1.875rem; /* 30px -> 1.875rem */
  align-self: center;
  position: relative;
  left: 0;
  top: 0;
}

.slide-2 .left-image-top,
.slide-2 .left-image-bottom {
  width: 120%;
  height: auto;
  overflow: visible;
  border: none;
  border-radius: 0;
  background: transparent;
  position: relative;
  left: -3.125rem; /* -50px -> -3.125rem */
  top: 0;
}

.slide-2 .left-images-stack img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  position: relative;
  left: 0;
  top: 0;
}

/* Center text block */
.slide-2 .center-text-block {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  display: flex;
  flex-direction: column;
  gap: 1.875rem; /* 30px -> 1.875rem */
  align-self: start;
  padding-top: 2.5rem; /* 40px -> 2.5rem */
  position: relative;
  left: 10.9375rem; /* 175px -> 10.9375rem */
  top: 9.375rem; /* 150px -> 9.375rem */
  width: 17.5rem; /* 280px -> 17.5rem */
}

.slide-2 .staggered-headings {
  display: flex;
  flex-direction: row;
  gap: 1.25rem; /* 20px -> 1.25rem */
  align-items: center;
  position: relative;
  left: 0;
  top: 0;
}

.slide-2 .section-label {
  background: #000;
  color: #e8e8e8;
  border: none;
  padding: 0.5rem 1.25rem; /* 8px 20px -> 0.5rem 1.25rem */
  font-size: 1.3rem;
  font-style: italic;
  text-transform: lowercase;
  font-weight: normal;
  display: inline-block;
  width: fit-content;
  margin: 0;
  position: relative;
  left: 0;
  top: 0;
}

.slide-2 .objective-label {
  align-self: flex-start;
  position: relative;
  left: 0;
  top: -3.75rem; /* -60px -> -3.75rem */
  z-index: 5;
}

.slide-2 .achievement-label {
  align-self: flex-start;
  position: relative;
  left: -2.8125rem; /* -45px -> -2.8125rem */
  top: -1.875rem; /* -30px -> -1.875rem */
}

.slide-2 .center-paragraph {
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: justify;
  margin: 0;
  padding: 0;
  border: none;
  position: relative;
  left: 0;
  top: 0;
  width: 15.625rem; /* 250px -> 15.625rem */
}

/* Right large image - smaller */
.slide-2 .right-large-image {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
  width: 47%;
  height: auto;
  overflow: visible;
  border: none;
  border-radius: 0;
  background: transparent;
  justify-self: center;
  align-self: center;
  position: relative;
  left: 0;
  top: 0.625rem; /* 10px -> 0.625rem */
}

.slide-2 .right-large-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  position: relative;
  left: 9.375rem; /* 150px -> 9.375rem */
  top: 0.625rem; /* 10px -> 0.625rem */
}



/* ===== SLIDE 3: FEATURES - CLEAN LAYOUT ===== */

.slide-3 {
  background: rgba(236, 236, 236, 0.5);
  border-radius: 0;
}

.slide-3 .slide-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2.5rem; /* 40px -> 2.5rem */
  align-items: center;
  height: 100%;
  padding: 5rem; /* 80px -> 5rem */
  box-sizing: border-box;
  position: relative;
  left: 0;
  top: 0;
}

/* Left text block */
.slide-3 .left-text-block {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  align-self: center;
  justify-self: start;
  position: relative;
  left: 0;
  top: 1.875rem; /* 30px -> 1.875rem */
}

.slide-3 .left-text-block p {
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: justify;
  margin: 0;
  padding: 0;
  border: none;
  max-width: 12.5rem; /* 200px -> 12.5rem */
  position: relative;
  left: -1.25rem; /* -20px -> -1.25rem */
  top: 10.9375rem; /* 175px -> 10.9375rem */
}

/* Center rod image - FORCE SIZE */
.slide-3 .center-rod-image {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  overflow: visible; /* Allow overflow */
  position: relative;
  left: 0;
  top: 0;
}

.slide-3 .center-rod-image img {
  width: auto !important;
  height: auto !important;
  max-height: 67vh !important; /* keep viewport-relative cap */
  max-width: none !important;
  min-height: 0 !important;
  object-fit: contain !important;
  display: block !important;
  position: relative;
  left: -11.25rem; /* -180px -> -11.25rem */
  top: 0;
  transform: scale(1.5);
}

/* Center-right text */
.slide-3 .center-right-text {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  align-self: center;
  justify-self: center;
  position: relative;
  left: -15rem; /* -240px -> -15rem */
  top: 12.5rem; /* 200px -> 12.5rem */
}

.slide-3 .center-right-text p {
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: justify;
  margin: 0;
  padding: 0;
  border: none;
  max-width: 15.625rem; /* 250px -> 15.625rem */
  position: relative;
  left: 0;
  top: 0;
}

/* Right reel image - vertically centered */
.slide-3 .right-reel-image {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  width: 100%;
  max-width: 18.75rem; /* 300px -> 18.75rem */
  height: auto;
  justify-self: center;
  align-self: center; /* vertically centered */
  border: none;
  border-radius: 0;
  background: transparent;
  left: 0;
  top: 0;
  overflow: visible;
  position: relative;
}

.slide-3 .right-reel-image img {
  width: auto !important;
  height: auto !important;
  max-height: 27vh !important;
  max-width: none !important;
  min-height: 0 !important;
  object-fit: contain !important;
  display: block !important;
  position: relative;
  left: 9.375rem; /* 150px -> 9.375rem */
  top: -12.5rem; /* -200px -> -12.5rem */
  transform: scale(1.5);
}

/* ===== SLIDE 4: INTERFACE - CLEAN LAYOUT ===== */

.slide-4 {
  background: rgba(236, 236, 236, 0.5);
  border-radius: 0;
  
}

.slide-4 .slide-content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 2.5rem; /* 40px -> 2.5rem */
  align-items: start;
  height: 100%;
  padding: 5rem 5rem 7.5rem 5rem; /* 80px 80px 120px 80px -> 5rem 5rem 7.5rem 5rem */
  box-sizing: border-box;
  position: relative;
  left: 0;
  top: 0;
}

/* Top images row - smaller */
.slide-4 .top-images-row {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.125rem; /* 2px -> 0.125rem */
  height: auto;
  max-width: 50rem; /* 800px -> 50rem */
  margin: 0 auto;
  justify-content: center;
  position: relative;
  left: 0;
  top: 0;
}

.slide-4 .interface-image-left,
.slide-4 .interface-image-right {
  width: 100%;
  height: auto;
  max-height: none; /* REMOVED constraint */
  overflow: visible;
  border: none;
  border-radius: 0;
  background: transparent;
  position: relative;
  left: 0;
  top: 0;
}

.slide-4 .interface-image-left img,
.slide-4 .interface-image-right img {
  width: 100% !important;
  height: auto !important;
  max-height: 31.25rem !important; /* 500px -> 31.25rem */
  max-width: 100%;
  object-fit: contain !important;
  display: block !important;
  position: relative;
  left: 0;
  top: -1.25rem; /* -20px -> -1.25rem */
  transform: scale(1.0);
}

/* Bottom text block - higher */
.slide-4 .bottom-text-block {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  max-width: 34.375rem; /* 550px -> 34.375rem */
  margin: 0 auto;
  margin-top: -1.25rem; /* -20px -> -1.25rem */
  justify-self: center;
  align-self: start;
  position: relative;
  left: 0;
  top: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: justify;
}

/* ===== RESPONSIVE - TABLET ===== */
@media (max-width: 64rem) { /* 1024px -> 64rem */
  .horizontal-slide {
    width: 100vw;
    padding: 2.5rem; /* 40px -> 2.5rem */
  }
  
  .slide-1 .slide-content,
  .slide-2 .slide-content,
  .slide-3 .slide-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  
  .slide-1 .image-block,
  .slide-2 .left-images-stack,
  .slide-2 .right-large-image,
  .slide-3 .center-rod-image {
    height: auto;
    min-height: 25rem; /* 400px -> 25rem */
  }
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 48rem) { /* 768px -> 48rem */
  .horizontal-slide {
    width: 100vw;
    height: 100vh;
    padding: 1.875rem 1.25rem; /* 30px 20px -> 1.875rem 1.25rem */
  }
  
  .slide-4 .top-images-row {
    grid-template-columns: 1fr;
    gap: 1.25rem; /* 20px -> 1.25rem */
  }
}

/* ===== SLIDE FONT SIZE CONTROLS ===== */

.slide-1 .section-label {
  font-size: 1.3rem;
}

.slide-1 .text-block p,
.slide-1 .right-text-top,
.slide-1 .tagline-box p {
  font-size: 0.75rem;
  /* Options: 0.7rem, 0.75rem, 0.8rem, 0.85rem, 0.9rem, 1rem */
}

.slide-2 .section-label {
  font-size: 1.3rem;
}

.slide-2 .center-paragraph {
  font-size: 0.75rem;
}

.slide-3 .left-text-block p,
.slide-3 .center-right-text p {
  font-size: 0.75rem;
}

.slide-4 .bottom-text-block p {
  font-size: 0.75rem;
}




/* Fix: restore horizontal scrolling while keeping the 2560px visual fixes.
   Append this block to the end of product-horizontal2.css (it only changes media-query rules).
   Key changes:
   - Ensure horizontal-container keeps overflow-x: auto so horizontal scrolling works.
   - Remove any 'overflow: visible' that disabled horizontal overflow.
   - Keep container full-bleed (100vw) and remove any >100vw widening/negative margins that caused clipping.
   - Ensure slides remain inline and .slide-content doesn't clamp slide width (max-width removed).
*/

/* Medium-large screens (1920 - 2559px) */
@media (min-width: 120rem) and (max-width: 159.99rem) {
  .horizontal-container,
  .horizontal-slide {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 200vw !important;
    box-sizing: border-box;
    white-space: nowrap !important;
    overflow-x: auto !important;   /* restore horizontal scroll */
    overflow-y: hidden !important; /* preserve vertical clipping */
  }

  /* Keep container height matching the slides (no extra gap) */
  .horizontal-container {
    height: auto !important;
    max-height: none !important;
    /* do NOT set overflow: visible here (would disable horizontal scroll) */
  }

  .horizontal-slide {
    height: 100vh !important;
    display: inline-block !important;
    vertical-align: top !important;
  }

  .slide-content {
    padding: 7.5rem !important;
    gap: 5rem !important;
    margin: 0 auto !important;
    max-width: none !important; /* do not clamp slide width */
    box-sizing: border-box !important;
  }

  .slide-1 .slide-content,
  .slide-2 .slide-content,
  .slide-3 .slide-content {
    padding: 7.5rem !important;
    gap: 5rem !important;
    max-width: none !important;
    margin: 0 auto !important;
  }

  /* Tame slide-3 images for medium-large */
  .slide-3 .center-rod-image img {
    max-height: 55vh !important;
    transform: scale(1.25) !important;
    left: -12.5rem !important;
    top: 0 !important;
  }
  .slide-3 .right-reel-image img {
    max-height: 20vh !important;
    transform: scale(1.1) !important;
    left: 10rem !important;
    top: -12.5rem !important;
  }
}

@media (min-width: 160rem) { /* 2560px -> 160rem */
  /* Ensure full-bleed container but keep horizontal scrolling enabled */
  .horizontal-container {
    width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box;
    /* Container height equals the frosted glass (slides are 100vh) */
    height: 100vh !important;
    overflow-x: auto !important;   /* keep horizontal scrolling */
    overflow-y: hidden !important; /* prevent vertical overflow */
    -webkit-overflow-scrolling: touch !important;
  }

  /* Slides: make each slide approx 80% of viewport width and centered with gutters */
  .horizontal-slide {
    display: inline-block !important;
    width: 80vw !important;               /* slide width ≈ 80% of viewport */
    height: 100vh !important;             /* frosted glass height = viewport */
    
    box-sizing: border-box !important;
    vertical-align: top !important;
    scroll-snap-align: center !important; /* center each slide when snapping */
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* Keep slides inline so scrolling works reliably */
  .horizontal-slide:nth-last-child(1) {
    margin-right: 10vw !important;
  }

  /* Spread inner content horizontally by increasing internal padding only */
  .slide-content {
    padding: 11.25rem !important; /* 180px */
    gap: 6.875rem !important;     /* 110px */
    max-width: none !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  .slide-1 .slide-content,
  .slide-2 .slide-content,
  .slide-3 .slide-content {
    padding: 11.25rem !important;
    gap: 6.875rem !important;
    max-width: none !important;
    margin: 0 auto !important;
  }

  /* Typography scaling (kept as before) */
  .slide-1 .section-label,
  .slide-2 .section-label { font-size: 2.6rem !important; }

  .slide-1 .text-block p,
  .slide-1 .right-text-top,
  .slide-1 .tagline-box p,
  .slide-2 .center-paragraph,
  .slide-3 .left-text-block p,
  .slide-3 .center-right-text p,
  .slide-4 .bottom-text-block p {
    font-size: 1.39rem !important;
    line-height: 1.5 !important;
  }

  /* SLIDE 3: constrain images so they don't dominate at 2560px */
  .slide-3 .center-rod-image img {
    max-height: 60vh !important;      /* cap relative to viewport */
    transform: scale(1.35) !important;/* moderate presence */
    left: -13.125rem !important;      /* softer horizontal offset */
    top: 0 !important;
  }

  .slide-3 .right-reel-image img {
    max-height: 22vh !important;
    transform: scale(1.15) !important;
    left: 11.25rem !important;
    top: -12.5rem !important;
  }

  /* Keep slide-1 / slide-2 image offsets consistent with larger paddings */
  .slide-1 .image-block img {
    transform: translate(-50%, -50%) translateX(-11.25rem) !important;
  }
  .slide-2 .right-large-image img {
    left: 15.625rem !important;
    top: 1.25rem !important;
  }

  /* Slightly reduce grain overlay intensity on very large displays */
  .horizontal-container::before { opacity: 0.18 !important; }
  .horizontal-slide::before    { opacity: 0.28 !important; }
}


/* ===== USER JOURNEY SECTION ===== */
.user-journey-section {
  width: 100%;
  background: #e8e8e8;
  padding: 120px 100px;
  position: relative;
  left: 0px;
  top: 0px;
  
}

.user-journey-title {
  font-size: 1.3rem; /* ✅ CHANGED: Same as other subheadings */
  font-weight: normal;
  font-style: italic;
  text-transform: lowercase;
  margin-bottom: 60px;
  position: relative;
  left: 0px;
  top: 0px;
}

.user-journey-image-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto 120px auto;
  display: flex;
  justify-content: center;
  /* Remove any left/top/width previously set! */
  position: relative;
}

.user-journey-image {
  width: 900px;        /* Or a fixed value like 400px if preferred */
  max-width: 900px;
  height: auto;
  opacity: 0;
  transform: translateX(180px);  /* Start shifted right */
  transition:
    opacity 0.75s cubic-bezier(0.23,0.8,0.52,1),
    transform 0.8s cubic-bezier(0.23,0.8,0.52,1);
  will-change: opacity, transform;
  padding-top: 100px;
  padding-bottom: 200px;
}

.user-journey-image.in-view {
  opacity: 1;
  transform: translateX(0);

}




/* ===== PERSONA CARDS ===== */
.personas-title {
  font-size: 1.3rem;
  font-weight: normal;
  font-style: italic;
  text-transform: lowercase;
  margin-bottom: 80px;
  position: relative;
  left: 0px;
  top: 0px;
}


.personas-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  position: relative;
  left: 0px;
  top: 0px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 200px;
}

.persona-card {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 80px 100px;
  position: relative;
  overflow: visible;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  width: 450px;
  min-height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Make cards overlap - each card shifts left */
.persona-card:not(:first-child) {
  margin-left: -80px;
}

/* Slide-in animation classes (added by JavaScript) */
.persona-card.slide-in {
  opacity: 1;
  transform: translateX(0);
}

/* Staggered delays - FRONT CARD FIRST */
.persona-card[data-persona="1"] {
  transition-delay: 0s;
  z-index: 3;
}

.persona-card[data-persona="2"] {
  transition-delay: 0.3s;
  z-index: 2;
}

.persona-card[data-persona="3"] {
  transition-delay: 0.6s;
  z-index: 1;
}

/* Grain texture for persona cards */
.persona-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.35;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
}

.persona-image {
  max-width: 100%;
  max-height: 600px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  position: relative;
  z-index: 2;
}

/* Responsive */
@media (max-width: 1200px) {
  .personas-container {
    flex-direction: column;
    gap: 60px;
  }
  
  .persona-card {
    transform: translateX(0);
    opacity: 1;
    width: 100%;
    max-width: 400px;
  }
  
  .persona-card:not(:first-child) {
    margin-left: 0;
    margin-top: -40px;
  }
}

/* Responsive */
@media (max-width: 1400px) {
  .user-journey-section {
    padding: 100px 60px;
  }
}

@media (max-width: 900px) {
  .user-journey-section {
    padding: 80px 40px;
  }
  
  .user-journey-title,
  .personas-title {
    font-size: 1.3rem;
  }
  
  .persona-card:not(:first-child) {
    margin-top: 0;
  }
}

/* LEFT COLUMN: Objective + Achievement */
.product-left-column {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.product-objective-heading {
  font-size: 1.3rem;
  font-weight: normal;
  font-style: italic;
  text-transform: lowercase;
  margin-bottom: 10px;
  position: relative;
  left: 0px;
  top: 0px;
}

.product-achievement-heading {
  font-size: 1.3rem;
  font-weight: normal;
  font-style: italic;
  text-transform: lowercase;
  margin-bottom: 30px;
  position: relative;
  left: 100px;
  top: 0px;
}

.product-achievement-p1 {
  font-size: 0.75rem;
  line-height: 1.7;
  text-align: justify;
  margin-bottom: 20px;
  position: relative;
  left: 0px;
  top: 30px;
  width: 70%;
}

.product-achievement-p2 {
  font-size: 0.75rem;
  line-height: 1.7;
  text-align: justify;
  margin-bottom: 0;
  position: relative;
  left: 0px;
  top: 80px;
  width: 70%;
}

/* CENTER COLUMN: 3 Product Images */
.product-center-column {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.product-image-item {
  width: 130%;
  position: relative;
  left: 0px;
  top: 0px;
}

.product-detail-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Individual image positioning */
.product-image-item:nth-child(1) {
  position: relative;
  left: 0px;
  top: 10px;
}

.product-image-item:nth-child(2) {
  position: relative;
  left: 0px;
  top: 15px;
}

.product-image-item:nth-child(3) {
  position: relative;
  left: 0px;
  top: 20px;
}

/* RIGHT COLUMN: Purpose */
.product-right-column {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.product-purpose-heading {
  font-size: 1.3rem;
  font-weight: normal;
  font-style: italic;
  text-transform: lowercase;
  margin-bottom: 30px;
  position: relative;
  left: 80px;
  top: 50px;
  
}

.product-purpose-p1 {
  font-size: 0.75rem;
  line-height: 1.7;
  text-align: justify;
  margin-bottom: 20px;
  position: relative;
  left: 80px;
  top: 100px;
  width: 70%;
}

.product-purpose-p2 {
  font-size: 0.75rem;
  line-height: 1.7;
  text-align: justify;
  margin-bottom: 0;
  position: relative;
  left: 80px;
  top: 150px;
  width: 70%;
}





/* Responsive */
@media (max-width: 1400px) {
  .product-content-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* Responsive adjustments */
@media (max-width: 1400px) {
  .product-hero {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  
  .product-image-large {
    height: 800px;
  }
  
  .product-glass-panel {
    height: 800px;
  }
}

@media (max-width: 900px) {
 .product-layout {
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible;
  width: 100%;
}
  .product-logo {
    width: 300px;
  }
  
  .product-image-large {
    height: 600px;
  }
  
  .product-glass-panel {
    height: 600px;
  }
}



/* ===== PRODUCT APPROACH SECTION - FIXED ===== */
.product-approach-section {
  width: 100%;
  background: #e8e8e8 !important;
  padding: 0px 100px;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  margin-top: 150px; 
    padding-top: 100px;
}

.product-approach-title {
  font-size: 1.3rem; /* ✅ CHANGED: Same as other subheadings */
  font-weight: normal;
  font-style: italic;
  text-transform: lowercase;
  margin-bottom: 80px;
  margin-bottom: 100px;
  position: relative;
  left: 0px;
  top: 50px;
    padding-top: 30px;
}

/* Rotation Sequence Container - BIGGER SIZE */
.rotation-sequence-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 666px;
  height: 1500px;
  max-width: 90%;
}

.rotation-sequence-canvas {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  margin: 0 auto;
}


/* Text Container */
.approach-text-container {
  position: relative;
  width: 100%;
  height: 1800px;
  z-index: 2;
}

/* Text Block Base Styles */
.approach-text {
  position: absolute;
  max-width: 300px;
  font-size: 0.75rem;
  line-height: 1.7;
  text-align: justify;
  opacity: 0;
  transition: opacity 0.8s ease;
}

/* Fade-in class (added by JavaScript) */
.approach-text.visible {
  opacity: 1;
}

/* Fade-out class (when scrolling up) */
.approach-text.hidden {
  opacity: 0;
}

.approach-text strong {
  font-weight: bold;
  display: block;
  margin-bottom: 10px;
}

.approach-text p {
  margin: 0;
}

.approach-text p:first-child {
  margin-bottom: 10px;
}

/* STAGGERED LEFT AND RIGHT - EVENLY SPACED */

/* #1 - Top Left - 10% from top */
.approach-text.top-left {
  left: 50px;
  top: 10%;
}

/* #2 - Top Right - 27.5% from top */
.approach-text.top-right {
  right: 50px;
  top: 27.5%;
}

/* #3 - Middle Left - 45% from top (center) */
.approach-text.middle-left {
  left: 50px;
  top: 45%;
}

/* #4 - Bottom Right - 62.5% from top */
.approach-text.bottom-right {
  right: 50px;
  top: 62.5%;
}

/* #5 - Bottom Left - 80% from top */
.approach-text.bottom-left {
  left: 50px;
  top: 80%;
}

/* Remove old middle-right positioning */
.approach-text.middle-right {
  display: none;
}







/* Product section - objective */
.product-objective-heading {
  background: #000000;
  color: #e8e8e8;
  padding: 0.5px 20px;
  display: inline-block;
  width: fit-content; /* ADD THIS */
  font-size: 1.3rem;
  font-weight: normal;
  font-style: italic;
  text-transform: lowercase;
  margin-bottom: 10px;
  position: relative;
  left: 0px;
  top: 0px;
}

/* Product section - achievement */
.product-achievement-heading {
  background: #000000;
  color: #e8e8e8;
  padding: 0.5px 20px;
  display: inline-block;
  width: fit-content; /* ADD THIS */
  font-size: 1.3rem;
  font-weight: normal;
  font-style: italic;
  text-transform: lowercase;
  margin-bottom: 30px;
  position: relative;
  left: 100px;
  top: 0px;
}

/* Product section - purpose */
.product-purpose-heading {
  background: #000000;
  color: #e8e8e8;
  padding: 0.5px 20px;
  display: inline-block;
  width: fit-content; /* ADD THIS */
  font-size: 1.3rem;
  font-weight: normal;
  font-style: italic;
  text-transform: lowercase;
  margin-bottom: 30px;
  position: relative;
  left: 80px;
  top: 50px;
}

/* User journey section titles */
.user-journey-title,
.personas-title {
  background: #000000;
  color: #e8e8e8;
  padding: 0.5px 20px;
  display: inline-block;
  width: fit-content; /* ADD THIS */
  font-size: 1.3rem;
  font-weight: normal;
  font-style: italic;
  text-transform: lowercase;
  margin-bottom: 60px;
  position: relative;
  left: 0px;
  top: 0px;
}

.personas-title {
  margin-bottom: 80px;
}

/* Product approach section title */
.product-approach-title {
  background: #000000;
  color: #e8e8e8;
  padding: 0.5px 20px;
  display: inline-block;
  width: fit-content; /* ADD THIS */
  font-size: 1.3rem;
  font-weight: normal;
  font-style: italic;
  text-transform: lowercase;
  margin-bottom: 80px;
  position: relative;
  left: 0px;
  top: 0px;
}

/* Interface section titles */
.interface-title {
  background: #000000;
  color: #e8e8e8;
  padding: 0.5px 20px;
  display: inline-block;
  width: fit-content; /* ADD THIS */
  font-size: 1.3rem;
  font-weight: normal;
  font-style: italic;
  text-transform: lowercase;
  margin-bottom: 30px;
  position: relative;
  z-index: 2;
}












/* ============================================ */
/* INTERFACE SHOWCASE SECTION                  */
/* ============================================ */

.interface-showcase-section {
  width: 100%;
  background: #e8e8e8;
  padding: 0;
  position: relative;
}

/* Each Interface Row */
.interface-row {
  width: 100%;
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding: 0;
  position: relative;
  margin-bottom: 0;
}

/* ===== REEL INTERFACE ROW ===== */
.reel-interface-row {
  justify-content: space-between;
}

/* ===== ROD INTERFACE ROW ===== */
.rod-interface-row {
  justify-content: space-between;
}

/* ===== INTERFACE TEXT PANELS - WITH SLIDE-IN ANIMATION ===== */
.interface-text-panel {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 80px 100px;
  position: relative;
  overflow: visible;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  width: 45%;
  min-height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Reel panel - slides in from LEFT */
.reel-panel {
  padding-left: 100px;
  padding-right: 120px;
  margin-right: 0;
  transform: translateX(-100px);
}

/* Rod panel - slides in from RIGHT */
.rod-panel {
  padding-right: 100px;
  padding-left: 120px;
  margin-left: 0;
  transform: translateX(100px);
}

/* Slide-in animation class (added by JavaScript) */
.interface-text-panel.slide-in {
  opacity: 1;
  transform: translateX(0);
}

/* GRAIN TEXTURE */
.interface-text-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.35;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
}

.interface-title {
  font-size: 1.3rem;
  font-weight: normal;
  font-style: italic;
  text-transform: lowercase;
  margin-bottom: 30px;
  position: relative;
  z-index: 2;
}

.interface-description {
  font-size: 0.75rem;
  line-height: 1.7;
  text-align: justify;
  margin: 0;
  position: relative;
  z-index: 2;
  max-width: 450px;
}

/* ===== CAROUSEL CONTAINER ===== */
.interface-carousel-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  position: relative;
  flex-shrink: 0;
  padding: 0 80px;
}

/* Screen Display Area */
.interface-screen-display {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Reel Screen (Round) */
.reel-screen {
  width: 420px;
  height: 420px;
}

.reel-screen .interface-screen-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Rod Screen (Rectangular) */
.rod-screen {
  width: 280px;
  height: 520px;
}

.rod-screen .interface-screen-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}


/* ===== CAROUSEL ARROWS - NO BACKGROUND AT ALL ===== */
.carousel-arrow {
  width: 60px;
  height: 60px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: none;
  position: relative;
  padding: 0;
  box-shadow: none;
  overflow: visible;
}

.carousel-arrow .arrow-icon {
  width: 28px;
  height: 28px;
  color: #1d1d1d;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.carousel-arrow:hover .arrow-icon {
  transform: scale(1.2);
  opacity: 0.7;
}

.carousel-arrow:active .arrow-icon {
  transform: scale(0.95);
}

.interface-screen-image {
  transition: none;
}



/* ===== RESPONSIVE ===== */
@media (max-width: 1400px) {
  .interface-row {
    flex-direction: column;
    min-height: auto;
    padding: 80px 40px;
    gap: 60px;
  }
  
  .interface-text-panel {
    width: 100%;
    max-width: 600px;
    padding: 60px 40px !important;
    margin: 0 !important;
  }
  
  .interface-carousel-container {
    padding: 0 20px;
  }
  
  .reel-screen {
    width: 350px;
    height: 350px;
  }
  
  .rod-screen {
    width: 240px;
    height: 440px;
  }
  
  .carousel-arrow {
    width: 50px;
    height: 50px;
  }
  
  .carousel-arrow .arrow-icon {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 768px) {
  .interface-title {
    font-size: 1.5rem;
  }
  
  .interface-description {
    font-size: 0.85rem;
  }
  
  .reel-screen {
    width: 280px;
    height: 280px;
  }
  
  .rod-screen {
    width: 200px;
    height: 360px;
  }
  
  .carousel-arrow {
    width: 45px;
    height: 45px;
  }
  
  .carousel-arrow .arrow-icon {
    width: 20px;
    height: 20px;
  }
  
  .interface-carousel-container {
    gap: 40px;
  }
}



/* ===== SCROLL RIGHT INDICATOR WITH ARROW ===== */

.horizontal-slide::after {
  content: 'scroll right →';
  position: fixed;
  bottom: 50px;
  right: 70px;
  font-size: 0.75rem;
  font-style: italic;
  text-transform: lowercase;
  color: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  pointer-events: none;
  letter-spacing: 0.05em;
  animation: slideHint 4s ease-in-out infinite; /* ✅ Subtle animation */
}

@keyframes slideHint {
  0%, 100% {
    transform: translateX(0);
    opacity: 0.6;
  }
  50% {
    transform: translateX(10px);
    opacity: 1;
  }
}

/* Hide on last slide */
.horizontal-slide:last-child::after {
  display: none;
}



/* ===== SCROLL RIGHT INDICATOR WITH ARROW ===== */

.horizontal-slide::after {
  content: 'scroll right →';
  position: fixed;
  bottom: 50px;
  right: 70px;
  font-size: 0.75rem;
  font-style: italic;
  text-transform: lowercase;
  color: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  pointer-events: none;
  letter-spacing: 0.05em;
  animation: slideHint 4s ease-in-out infinite;
}

@keyframes slideHint {
  0%, 100% {
    transform: translateX(0);
    opacity: 0.6;
  }
  50% {
    transform: translateX(10px);
    opacity: 1;
  }
}

/* ✅ LAST SLIDE - SCROLL DOWN INDICATOR */
.horizontal-slide:last-child::after {
  content: 'scroll down ↓'; /* ✅ Changed text and arrow */
  display: block; /* ✅ Show on last slide */
  animation: slideHintDown 3s ease-in-out infinite; /* ✅ Different animation */
}

/* ✅ DOWN ANIMATION */
@keyframes slideHintDown {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateY(10px); /* ✅ Moves down instead of right */
    opacity: 1;
  }
}


/* ============================================ */
/* PRODUCT DESIGN SECTION - FIXED             */
/* ============================================ */

/* ...[existing CSS unchanged]... */


/* ============================================ */
/* LARGER MONITOR RESPONSIVE OPTIMIZATION      */
/* ============================================ */

@media (min-width: 1920px) {
  /* Hero Section */
  .product-hero {
    padding-left: 240px;
    padding-right: 240px;
    gap: 110px;
  }
  .product-left {
    width: 520px;
    left: -100px;
  }
  .product-logo {
    max-width: 600px;
    width: 180%;
  }
  .product-right {
    width: 350px;
  }
  .product-description {
    font-size: 1.12rem;
  }
  .product-video-large {
    height: 1080px;
  }

  /* Product Video Showcase Section */
  .product-video-showcase-section {
    padding: 30px 240px 240px 240px;
  }
  .product-video-container {
    max-width: 1450px;
  }

  /* Horizontal Container (slides) */
  .horizontal-container {
    height: 110vh;
  }
  .horizontal-slide {
    font-size: 1.2rem;
    padding: 0;
  }
  .slide-content {
    padding: 120px !important;
    gap: 70px;
    font-size: 1.18rem;
  }

  /* Slide 1 grid/typography */
  .slide-1 .slide-content,
  .slide-2 .slide-content,
  .slide-3 .slide-content {
    padding: 120px;
    gap: 70px;
  }
  .slide-1 .section-label, 
  .slide-2 .section-label {
    font-size: 2rem;
  }
  .slide-1 .text-block p,
  .slide-1 .right-text-top,
  .slide-1 .tagline-box p,
  .slide-2 .center-paragraph,
  .slide-3 .left-text-block p,
  .slide-3 .center-right-text p,
  .slide-4 .bottom-text-block p {
    font-size: 1.12rem;
  }
  .slide-3 .center-rod-image img,
  .slide-3 .right-reel-image img {
    transform: scale(2.0);
  }
  .slide-4 .interface-image-left img,
  .slide-4 .interface-image-right img {
    max-height: 600px !important;
    transform: scale(1.22);
  }

  /* Personas Cards */
  .personas-container {
    gap: 40px;
  }
  .persona-card {
    padding: 120px 170px;
    min-height: 970px;
    width: 670px;
    max-width: 99vw;
    font-size: 1.29rem;
  }
  .persona-image {
    max-height: 820px;
  }

  /* User Journey Section */
  .user-journey-section {
    padding: 170px 240px;
  }
  .user-journey-title, .personas-title {
    font-size: 2rem;
  }
  .user-journey-image-container {
    max-width: 1700px;
    left: 290px;
  }
  .user-journey-image {
    width: 88%;
  }






  
  /* Product Extended Content grid */
  .product-content-grid {
    gap: 140px;
    padding: 200px 280px 260px 280px;
  }
  .product-image-item { width: 180%; }
  .product-detail-image { max-width: 100%; }

  /* Approach Section scaling */
  .product-approach-section {
    padding: 170px 240px;
    min-height: 130vh;
  }
  .rotation-sequence-container {
    width: 895px; height: 1800px;
  }
  .approach-text { font-size: 1.08rem; max-width: 500px; }
 
}




/* Media-query-only override for approach text positioning at very large screens (>=2560px)
   - File: full-width-bg2.css
   - Purpose: push approach-text further left / right at 2560px so copy sits farther into the gutters.
   - Append this block near or at the end of full-width-bg2.css (it only changes the large-breakpoint values).
*/

@media (min-width: 160rem) { /* 2560px */
  /* Keep the existing approach-section sizing but move text blocks further outwards */
  .product-approach-section {
    /* keep padding as-is or slightly increase if you want more outer breathing room */
    padding-left: 22.5rem;  /* 360px */
    padding-right: 22.5rem;
  }

  /* Move left-side approach text further left */
  .approach-text.top-left,
  .approach-text.middle-left,
  .approach-text.bottom-left {
    left: 5rem !important; /* 250px -> 15.625rem */
  }

  /* Move right-side approach text further right */
  .approach-text.top-right,
  .approach-text.bottom-right {
    right: 5rem !important; /* 250px -> 15.625rem */
  }

  /* Optional: increase max-width so longer lines don't wrap too early (tweak if needed) */
  .approach-text {
    max-width: 20rem; /* 580px -> 36.25rem; adjust up/down to taste */
    font-size: 1.08rem;  /* keep existing scale */
  }
}

@media (min-width: 2560px) {
  .product-hero {
    padding-left: 360px;
    padding-right: 360px;
    gap: 190px;
  }
  .product-left {
    width: 720px;
  }
  .product-logo {
    max-width: 850px;
    width: 200%;
  }
  .product-right {
    width: 420px;
  }
  .product-description {
    font-size: 1.35rem;
  }
  .product-video-large {
    height: 1560px;
  }

  .product-video-showcase-section {
    padding: 230px 440px 310px 440px;
  }
  .product-video-container {
    max-width: 2050px;
  }

  .horizontal-container {
    height: 125vh;
  }
  .horizontal-slide {
    font-size: 1.34rem;
  }
  .slide-content {
    padding: 180px !important;
    gap: 110px;
  }
  .slide-1 .slide-content,
  .slide-2 .slide-content,
  .slide-3 .slide-content {
    padding: 166px;
    gap: 110px;
  }
  .slide-1 .section-label, 
  .slide-2 .section-label {
    font-size: 2.6rem;
  }
  .slide-1 .text-block p,
  .slide-1 .right-text-top,
  .slide-1 .tagline-box p,
  .slide-2 .center-paragraph,
  .slide-3 .left-text-block p,
  .slide-3 .center-right-text p,
  .slide-4 .bottom-text-block p {
    font-size: 1.39rem;
  }
  .slide-3 .center-rod-image img,
  .slide-3 .right-reel-image img {
    transform: scale(2.7);
  }
  .slide-4 .interface-image-left img,
  .slide-4 .interface-image-right img {
    max-height: 900px !important;
    transform: scale(1.45);
  }

  /* Personas Cards */
  .personas-container {
    gap: 65px;
  }
  .persona-card {
    padding: 180px 280px;
    min-height: 1100px;
    width: 900px;
    max-width: 99vw;
    font-size: 1.56rem;
  }
  .persona-image {
    max-height: 1100px;
  }

  .user-journey-section {
    padding: 280px 440px 230px 440px;
  }
  .user-journey-title, .personas-title {
    font-size: 2.6rem;
  }
  .user-journey-image-container {
    max-width: 2300px;
    left: 480px;
  }
  .user-journey-image {
    width: 98%;
  }

  .product-content-grid {
    gap: 190px;
    padding: 333px 490px 330px 490px;
  }
  .product-image-item { width: 240%; }
  .product-detail-image { max-width: 100%; }

  .product-approach-section {
    padding: 220px 440px;
    min-height: 170vh;
  }
  .rotation-sequence-container {
    width: 1300px; height: 2280px;
  }
  .approach-text { font-size: 1.31rem; max-width: 730px;}
  .approach-text.top-left, 
  .approach-text.middle-left, 
  .approach-text.bottom-left {
    left: 250px;
  }
  .approach-text.top-right,
  .approach-text.bottom-right {
    right: 250px;
  }
}


.centered-image-section {
  /* ...existing styles... */
  position: relative;
  z-index: 0;
  overflow: hidden;
  max-width: 100vw;
  
}

.centered-image-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url('PATH_TO_YOUR_GRAIN.png'); /* Use your grainTexture1 variable in JS! */
  background-repeat: repeat;
  background-size: 100vw;
  mix-blend-mode: multiply;
  opacity: 0.3;
    border-radius: 0 !important;

}


.materials-image {
  max-width: 90vw;
  width: 90vw;
  height: auto;
  display: block;
  margin: 0 auto;
}



body, html {
  margin: 0;
  padding: 0;
}

.centered-image-section {
  width: 100vw;
  max-width: 100vw;
  min-width: 100vw;
  height: 600px; /* Optional, for full-screen */
  box-shadow: none; /* Remove if you don't want floating effect */
  border-radius: 0 !important;

  left: 0;
  right: 0;
}





/* Fix: keep product sections full-bleed on large screens (>=1920px)
   Prevents left gutter created by .container / page padding at large breakpoints.
   Place this at the end of full-width-bg22.css so it overrides earlier rules.
*/

@media (min-width: 120rem) { /* 1920px and up */
  /* Target all "full-width" product sections */
  .product-layout,
  .product-hero,
  .horizontal-container,
  .product-approach-section,
  .product-video-showcase-section,
  .section-full-bg {
    width: 100vw !important;
    /* Offset the element so it is centered relative to the viewport,
       ignoring the centered container padding (classic full-bleed technique) */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    left: 0 !important;
    box-sizing: border-box !important;
  }

  /* If your product sections contain a .container or other centered wrapper,
     make sure it doesn't reintroduce the page padding at the edges. */
  .product-layout > .container,
  .product-hero > .container,
  .horizontal-container > .container,
  .product-approach-section > .container,
  .product-video-showcase-section > .container,
  .section-full-bg > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important; /* optional, only if you need full inner width */
  }
}

@media (min-width: 160rem) { /* 2560px and up - same override to be safe at larger breakpoints */
  .product-layout,
  .product-hero,
  .horizontal-container,
  .product-approach-section,
  .product-video-showcase-section,
  .section-full-bg {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    left: 0 !important;
    box-sizing: border-box !important;
  }

  .product-layout > .container,
  .product-hero > .container,
  .horizontal-container > .container,
  .product-approach-section > .container,
  .product-video-showcase-section > .container,
  .section-full-bg > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
  }
}




/* Media-query-only fixes: ensure materials image is fully visible & user-journey image is centered
   Append this to the end of pasted2.txt (no base rules changed).
*/

/* Medium-large screens (>=1920px) */
@media (min-width: 120rem) { /* 1920px */
  /* Make the centered-image-section act as a vertical centering container so the full materials
     image fits inside the viewport (contain) rather than being clipped by parent overflow/height. */
  .centered-image-section {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100vh !important;          /* ensure full-viewport visual area */
    min-height: 100vh !important;
    overflow: visible !important;      /* prevent clipping of the image */
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Ensure the materials-image scales to fit the viewport vertically and stays centered */
  .materials-image {
    width: auto !important;
    max-width: 90vw !important;                            /* keep width responsive */
    max-height: calc(100vh - 6rem) !important;             /* keep full image visible (allow some breathing for nav) */
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }

  /* Center user-journey image container and remove any left offsets added elsewhere */
  .user-journey-image-container {
    left: 0 !important;          /* override left offsets coming from other styles */
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1400px !important; /* keep intended max width */
  }

  /* Keep user-journey image centered and visible vertically */
  .user-journey-image {
    margin: 0 auto !important;
    display: block !important;
    width: auto !important;
    max-width: 88% !important;                       /* preserve previous intent but center */
    max-height: calc(100vh - 12rem) !important;      /* ensure it fits vertically (allow header/footer space) */
    height: auto !important;
    transform: none !important;                      /* remove temporary translate that shifts it off-center */
    opacity: 1 !important;                           /* ensure visible during layout checks */
  }
}

/* Very-large screens (>=2560px) — slightly larger caps and consistent centering */
@media (min-width: 160rem) { /* 2560px */
  .centered-image-section {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .materials-image {
    width: auto !important;
    max-width: 80vw !important;                        /* allow larger image on very large screens */
    max-height: calc(100vh - 8rem) !important;         /* give extra breathing room for big headers */
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }

  .user-journey-image-container {
    left: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 2300px !important; /* preserve earlier large max-width */
  }

  .user-journey-image {
    margin: 0 auto !important;
    display: block !important;
    width: auto !important;
    max-width: 98% !important;
    max-height: calc(100vh - 12rem) !important;
    height: auto !important;
    transform: none !important;
    opacity: 1 !important;
  }
}



/* Media-query-only update — append to end of pasted3.txt
   Changes:
   - Center and reduce the product-video within product-video-showcase-section only at large breakpoints.
   - Make .product-purpose-heading match other heading sizes.
   - Nudge .product-description further left at large breakpoints.
   - No base (global) rules changed — all rules are scoped to media queries.
*/

/* Medium-large screens (>=1920px) */
@media (min-width: 120rem) { /* 1920px */
  /* Constrain & center the showcase SECTION and the video INSIDE it (media-query only) */
  .product-video-showcase-section {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  /* Target the video that lives inside the showcase SECTION only for this breakpoint */
  .product-video-showcase-section .product-video-large {
    margin: 0 auto !important;
    display: block !important;
    width: auto !important;
    max-width: 900px !important;    /* smaller than base large values */
    height: auto !important;
    max-height: 800px !important;   /* cap height so video isn't huge */
    object-fit: contain !important;
  }

  /* Make purpose heading same size as other headings at large sizes */
  .product-purpose-heading,
  .personas-title,
  .user-journey-title,
  .product-approach-title,
  .product-objective-heading,
  .product-achievement-heading {
    font-size: 1.6rem !important;
    line-height: 1.35 !important;
  }

  /* Nudge product description further left (media-query only) */
  .product-description {
    position: relative !important;
    left: -6.25rem !important; /* -100px -> -6.25rem; adjust if you want more/less */
  }
}

/* Very-large screens (>=2560px) */
@media (min-width: 160rem) { /* 2560px */
  /* Slightly larger caps for the showcase section but still constrained */
  .product-video-container {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  .product-video-container .product-video-large {
    margin: 0 auto !important;
    display: block !important;
    width: auto !important;
    max-width: 1000px !important;
    height: auto !important;
    max-height: 1000px !important;
    object-fit: contain !important;
  }

  /* Keep purpose heading consistent with the other headings at very large sizes too */
  .product-purpose-heading,
  .personas-title,
  .user-journey-title,
  .product-approach-title,
  .product-objective-heading,
  .product-achievement-heading {
    font-size: 1.6rem !important;
    line-height: 1.35 !important;
  }

  /* Nudge product description further left at very large sizes (a bit more if needed) */
  .product-description {
    position: relative !important;
    left: -7.5rem !important; /* -120px -> -7.5rem; tweak as desired */
  }
}




/* Medium-large screens (>=1920px) */
@media (min-width: 120rem) { /* 1920px */
  /* --- Frosted panel (materials) --- */
  .centered-image-section {
    height: 80vh !important;
    min-height: 80vh !important;
    max-height: 80vh !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .centered-image-section::before {
    inset: 0 !important;
  }

  .materials-image {
    width: auto !important;
    max-width: 85vw !important;
    max-height: calc(80vh - 6rem) !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }
}