/* =========================================
   Intro Text Break
   ========================================= */

.slide-title-1 {
  white-space: normal !important;
}

/* Desktop ≥800px */
@media (min-width: 800px) {
  .mobile-break { display: none; }
  .desktop-break { display: inline; }
}

/* Mobile <800px */
@media (max-width: 799px) {
  .mobile-break { display: inline; }
  .desktop-break { display: none; }
}

.br-desktop-sub{
  display: none;
}

/* Show only on desktop */
@media (min-width: 742px){
  .br-desktop-sub{
    display: block;
  }
}

/* =========================================
   Text Modifications
   ========================================= */

#outcomes .outcomes-text,
#outcome-insights .outcome-insights-text,
#lubricant .lubricant-info {
  font-size: var(--fs-2);
  font-weight: 400;
}

@media (max-width: 1200px) {
  #outcomes .outcomes-text,
  #outcome-insights .outcome-insights-text,
  #lubricant .lubricant-info {
    font-size: var(--fs-1);
  }
}

#equal .equal-title {
  font-size: 24pt;
}

@media (max-width: 700px) {
  #equal .equal-title {
    font-size: 20pt;
  }
}

#equal-info .bridge-gap {
  font-size: var(--fs-6);
  font-weight: 300;
  text-align: left;
}

@media (max-width: 1200px) {
  #equal-info .bridge-gap {
    padding-left: 10px;
  }
}

#lubricant .lubricant-info{
  max-width: 680px;
  margin: 0 auto;     /* keeps it centered */
}

#accountable .intro {
  max-width: 1000px;
  margin: 0 auto;     /* keeps it centered */
  text-align: center;
}

@media (max-width: 700px) {
  #accountable .intro {
    max-width: none;
	text-align: left;
	padding: 0 10px;
  }
}


#grid-temp .temp-flat-text {
  font-size: var(--fs-2);
  font-weight: 400;
}

@media (max-width: 1200px) {
  #grid-temp .temp-flat-text {
    font-size: var(--fs-1);
	padding-left: 0px;
	padding-right: 0px;
  }
}


/* =========================================
   Lubricant Image
   ========================================= */

#lubricant .lubricant-image {
  display: flex;
  justify-content: center;
}


/* =========================================
   Accountable Grid
   ========================================= */

/* Inner grid wrapper (tablet+ default) */
#accountable-grid .accountable-grid-inner{
  display: grid;
  grid-template-columns: 1fr;          /* 1 column */
  grid-template-rows: auto auto auto;  /* 3 rows */
  row-gap: 18px;
  width: 100%;
}

/* All main cells v-align start */
#accountable-grid .accountable-grid-inner .acc-cell{
  align-self: start;                  /* v-align start within the grid row */
}

/* === Cell 1 === */
#accountable-grid .accountable-grid-inner .acc-1{
  text-align: left;
  padding-bottom: 20px;
}

/* === Cell 2 Nested Grid === */
#accountable-grid .accountable-grid-inner .acc-nested{
  display: grid;
  grid-template-columns: 45% 55%;
  column-gap: 0px;
  width: 100%;
  align-items: stretch;               /* row height set by image */
}

/* Nested cell 1: image v-start, h-left */
#accountable-grid .accountable-grid-inner .acc-n1{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

#accountable-grid .accountable-grid-inner .acc-n1 img{
  display: block;
  max-width: 100%;
  height: auto;
}

/* Nested cell 2: text v-center, h-center */
#accountable-grid .accountable-grid-inner .acc-n2{
  display: flex;
  align-items: center;                /* v-center to image height */
  justify-content: center;            /* FIX: was invalid 'left' */
  text-align: center;
}

/* Cell 3: text v-start, h-center */
#accountable-grid .accountable-grid-inner .acc-3{
  text-align: center;
}

/* Hide mobile line by default (tablet+) */
#accountable-mobile{
  display: none;
}

#accountable-grid h2,
#accountable-grid h3{
  font-size: clamp(28px, 6vw, 100px);
}

@media (max-width: 700px){

  /* Hide ONLY the inner grid, not the whole section */
  #accountable-grid .accountable-grid-inner{
    display: none;
  }

  /* Show mobile single-line version */
  #accountable-mobile{
    display: block;
    text-align: center;
	line-height: 1.15;
  }

  #accountable-mobile a{
    line-height: inherit;
    margin: 0;
    padding: 0;
    display: inline;
  }
}


/* =====================================
   Outcomes Grid (Responsive)
======================================== */

#outcomes .outcomes-grid{
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto; /* 2 rows always */
}

/* MOBILE (default): 1-col, row1 text+image stacked; row2 hidden */
#outcomes .outcomes-top{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto; /* text then image */
  gap: 30px;
}

/* Mobile: "Better Outcomes" shown, top + centered */
#outcomes .outcomes-mobile-title{
  display: block;
}

/* Hide desktop titles on mobile */
#outcomes .outcomes-desktop-title{
  display: none;
}

/* Row 1 text cell: v-start, h-center */
#outcomes .outcomes-top__text{
  display: grid;
  place-items: start center;
  text-align: center;
}

/* Row 1 image cell: v-start, h-center */
#outcomes .js-reveal-parallax-l{
  display: grid;
  place-items: start center;
}

#outcomes .outcomes-top__image img{
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Hide row 2 on mobile */
#outcomes .outcomes-bottom{
  display: none;
}

/* TABLET+ (>=768px): row1 becomes 2 columns; row2 shown and centered */
@media (min-width: 768px){

  /* Row 1: 2 columns (text | image), centered */
  #outcomes .outcomes-top{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    align-items: center;
    column-gap: 10px;
  }

  #outcomes .outcomes-top__text{
    place-items: center; /* v-center, h-center */
  }

  #outcomes .js-reveal-parallax-l{
    place-items: center; /* v-center, h-center */
  }

  /* Show desktop titles, hide mobile title */
  #outcomes .outcomes-mobile-title{
    display: none;
  }
  #outcomes .outcomes-desktop-title{
    display: block;
	font-size: clamp(28px, 6vw, 100px);
  }

  /* Row 2: centered text */
  #outcomes .outcomes-bottom{
    display: grid;
    place-items: center;
    text-align: center;
  }
}

/* Outcomes: spacing before "Manual vs Automated Lubrication" */

#outcomes .outcomes-heading-wrap {
  padding-top: 20px; /* Mobile default */
}

@media (min-width: 768px) {
  #outcomes .outcomes-heading-wrap {
    padding-top: 40px; /* Tablet+ only */
  }
}

/* Mobile: spacing after "Better Outcomes" */

#outcomes .outcomes-mobile-title {
  margin-bottom: 20px; /* default mobile spacing */
}

/* Tablet+: remove extra spacing */
@media (min-width: 768px) {
  #outcomes .outcomes-mobile-title {
    margin-bottom: 0;
  }
}



/* =====================================
   Compare Manual vs Automatic Grid
======================================== */

#compare {
  width: 100%;
}

#compare .compare-grid {
  display: grid;
  gap: 24px;
  align-items: start; /* ensure all columns align to top */
}

/* Mobile/default: stack */
#compare .compare-grid {
  grid-template-columns: 1fr;
}

/* Nested grid: lock first row height */
#compare .compare-side {
  --compare-img-row: 260px; /* adjust if needed */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: var(--compare-img-row) auto;
  gap: 12px;
}

/* Image cell: top aligned, centered */
#compare .compare-side__img {
  height: var(--compare-img-row);
  display: flex;
  align-items: flex-start;   /* v-align start */
  justify-content: center;   /* h-align center */
}

/* Keep image inside fixed row */
#compare .compare-side__img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

/* Text cell: top-left aligned */
#compare .compare-side__text {
  align-self: start;
  justify-self: start;
  text-align: left;
}

/* Middle column block */
#compare .compare-middle {
  display: flex;
  align-items: center;     /* v-align center */
  justify-content: center; /* h-align center */
  height: 100%;            /* fill grid row height */
}

#compare .compare-middle img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Tablet and up: 3 columns, middle fixed 100px */
@media (min-width: 768px) {
  #compare .compare-grid {
    grid-template-columns: 1fr 100px 1fr;
  }
}

/* === Custom bullets for Hand Greasing === */

#compare .compare-bullets {
  list-style: none;      /* remove default dots */
  padding: 0;
  margin: 0;
}

#compare .compare-bullets li {
  position: relative;
  padding-left: 28px;    /* space for icon */
  margin-bottom: 10px;
  line-height: 1.5;
}

/* Custom bullet icon */
#compare .compare-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;            /* vertical alignment tweak */
  width: 16px;
  height: 16px;

  background-image: url("../../catmacs/exclamation.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* === Positive bullets (Easylube) === */

#compare .compare-bullets--positive {
  list-style: none;
  padding: 0;
  margin: 0;
}

#compare .compare-bullets--positive li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* Tick icon */
#compare .compare-bullets--positive li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;

  width: 16px;
  height: 16px;

  background-image: url("../../catmacs/tick-2-white.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}






/* =====================================
   Compare: Mobile middle image rotation
======================================== */

/* Mobile only */
@media (max-width: 767px) {

  /* Center container */
  #compare .compare-middle {
    display: flex;
    align-items: center;      /* v-align center */
    justify-content: center;  /* h-align center */
	overflow: visible;
  }

  /* Rotate + resize image */
  #compare .compare-middle img {
    width: auto;
    height: clamp(220px, 70vw, 360px); /* responsive size */
    transform: rotate(90deg);
    transform-origin: center;
    display: block;
  }
}


/* =====================================
   Compare toggle + fade
======================================== */

#compare {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  max-height: 0;                 /* prevents big blank gap */
  overflow: hidden;
  transition: 
	  opacity 900ms cubic-bezier(0.4, 0, 0.2, 1),
	  visibility 900ms ease,
	  max-height 900ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Open state */
#compare.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  max-height: 9999px;            /* enough to reveal content */
}

/* Keep button width stable (use the longer label width) */
#compareToggle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 14ch;               /* fits "Discover More" */
  text-align: center;
  white-space: nowrap;
}

/* Optional: slightly reduce layout jump when opening */
#compare.is-opening,
#compare.is-closing {
  will-change: opacity, max-height;
}

/* =====================================
   Compare: staggered reveal (L → M → R)
======================================== */

/* Start hidden state for items */
#compare .compare-grid > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 2100ms ease,
    transform 2700ms ease;
}

/* When expanded, reveal items */
#compare.is-open .compare-grid > * {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger order: left, middle, right */
#compare.is-open .compare-grid > :nth-child(1) { transition-delay: 0ms; }
#compare.is-open .compare-grid > :nth-child(2) { transition-delay: 160ms; }
#compare.is-open .compare-grid > :nth-child(3) { transition-delay: 320ms; }

/* Optional: when closing, remove delays so it fades out together */
#compare:not(.is-open) .compare-grid > * {
  transition-delay: 0ms;
}


/* =====================================
   #equal grid
===================================== */

#equal .equal-grid{
  display: grid;
  grid-template-columns: 1fr;   /* mobile: stack */
  gap: 32px;

  align-items: center;
}

#equal .equal-quote-inner{
  width: 100%;
  max-width: 800px;            /* keeps the quote block tidy */
  text-align: center;          /* matches your current styling */
}

#equal .equal-image img{
  width: 100%;
  max-width: 800px;            /* adjust to taste */
  height: auto;
  display: block;
}

/* Tablet and up: 2 columns */
@media (min-width: 768px){
  #equal .equal-grid{
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}


/* Mobile-only line break */
.mobile-only-break {
  display: inline;
}

/* Hide break on tablet+ */
@media (min-width: 768px) {
  .mobile-only-break {
    display: none;
  }
}



/* =========================================
   Equal Text
   ========================================= */

#equal .equal-text,
#products .products-text,
#private-labelling-text .labelling-content,
#partner .partner-content {
  font-size: var(--fs-2);
  font-weight: 400;
}

@media (max-width: 1200px) {
  #equal .equal-text {
    font-size: var(--fs-1);
	padding-left: 10px;
	padding-right: 10px;
  }
}

@media (max-width: 1200px) {
  #products .products-text,
  #private-labelling-text .labelling-content,
  #partner .partner-content {
    font-size: var(--fs-1);
	padding-left: 20px;
	padding-right: 20px;
  }
}


/* =====================================
   #equal: 1-col 2-row text grid
===================================== */

#equal .equal-info-grid{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 24px;
  align-items: start;     /* v-align start */
  justify-items: start;   /* h-align left */
  text-align: left;
  padding-top: 30px;
}

/* Always-visible row */
#equal .equal-bridge-title{
  margin: 0 0 18px 0;
  text-align: left; /* per your requirement */
}

/* Toggled row (Row 1): hidden by default with fade + height reveal */
#equal .equal-details{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
  transition:
    opacity 900ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 900ms ease,
    max-height 900ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Open state */
#equal .equal-details.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  max-height: 2000px; /* increase if your text grows */
}

/* Keep button width stable (same width as "Discover More") */
#equalToggle{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 14ch;     /* matches your compare approach */
  text-align: center;
  white-space: nowrap;
}




/* =========================================
   PRODUCTS: Responsive equal-cell grid
   Desktop: 1 row / 4 cols
   Tablet:  1 row / 4 cols (centered, equal widths)
   ========================================= */

#products{
  --pg-gap: 18px;
  --pg-max-w: 1320px;   /* match your layout width */
  --pg-cell-min: 120px; /* prevents tiny cells */
  --pg-cell-max: 220px; /* optional cap */
}

/* container */
#products .products-grid{
  width: min(100%, var(--pg-max-w));
  margin: 0 auto;
  padding: 0;
}

/* shared cell styling */
#products .products-cell{
  display: grid;
  place-items: center;
  text-decoration: none;
  border: 0;
  outline: none;
}

#products .products-cell img{
  display: block;
  width: 50%;
  height: auto;
  margin: 0 auto;
}

@media (min-width: 768px){
  #products .products-cell img{
    height: 140px;
    width: auto;        /* maintain aspect ratio */
    max-width: 100%;    /* prevent overflow */
  }
}

/* --- DESKTOP (and default): 4 equal columns in one row --- */
/* --- Tablet and up: 4 equal columns in one row --- */
@media (min-width: 768px){

  #products .products-grid-desktop{
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 30px;   /* fixed spacing between images */
	justify-content: center;
  }

  #products .products-cell img{
    height: 150px;
    width: auto;
    max-width: 100%;
  }

}

/* hide tablet layout by default */
#products .products-grid-tablet{ display: none; }

/* --- TABLET & DOWN: show tablet wrapper (still 4 cols, centered) --- */
@media (max-width: 992px){
  #products .products-grid-desktop{ display: none; }
  #products .products-grid-tablet{ display: grid; }

  #products .products-grid-tablet{
    /* compute a stable 4-col cell width */
    --cell-w: clamp(
      var(--pg-cell-min),
      calc((min(100%, var(--pg-max-w)) - (var(--pg-gap) * 3)) / 4),
      var(--pg-cell-max)
    );

    justify-content: center;
  }

  #products .products-row{
    display: grid;
    gap: var(--pg-gap);
    justify-content: center;
    align-items: center;
  }

  #products .products-row-4{
    grid-template-columns: repeat(4, var(--cell-w));
  }

  #products .products-cell img{
    width: 100%;
  }
}

/* --- MOBILE: tighten spacing so it fits --- */
@media (max-width: 600px){
  #products .products-grid{
    padding: 0 18px;
  }

  #products{
    --pg-gap: 14px;
    --pg-cell-min: 95px;
    --pg-cell-max: 160px;
  }
}

/* --- SMALL MOBILE: 2 columns x 2 rows --- */
@media (max-width: 500px){

  /* Recompute cell width for 2 columns */
  #products .products-grid-tablet{
    --cell-w: clamp(
      var(--pg-cell-min),
      calc((min(100%, var(--pg-max-w)) - (var(--pg-gap) * 1)) / 2),
      var(--pg-cell-max)
    );
  }

  /* Force the 4-item row into 2 columns (becomes 2x2) */
  #products .products-row-4{
    grid-template-columns: repeat(2, var(--cell-w));
  }

  /* Optional: make icons a touch smaller if needed */
  #products .products-cell img{
    width: 100%;
    height: auto;
  }
}






/* =========================================
   Product Details Toggle (Standalone Sections)
========================================= */

#product-details{
  width: 100%;
  position: relative;
}

/* default hidden */
#product-details .product-detail{
  display: none;
  opacity: 0;
}

/* visible */
#product-details .product-detail.is-active{
  display: block;
  opacity: 1;
  transition: opacity 0.6s ease;
}

/* fade-out (keeps it displayed while fading) */
#product-details .product-detail.is-leaving{
  display: block;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

/* Fix EX image + heading stacking */
#ex .text-absolute h2{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#ex .text-absolute h2 img{
  display: block;
  margin: 0 auto 12px;
}

#product-details{
  position: relative;
}

#product-details .product-detail{
  will-change: opacity;
}

#product-details .product-detail.is-leaving{
  pointer-events: none;
}

#grid-nexus img,
#grid-nexus .parallax-cont img,
#grid-nexus .reveal-parallax-l img,
#grid-nexus .text-scroll-img img{
  display: block;
  width: 100%;
  height: auto;
}

/* Icon wrapper */
.product-icon-wrap{
  position: relative;
  display: inline-block;
}

/* stack both images */
.product-icon-wrap img{
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.35s ease;
}

/* ON image sits above */
.product-icon-wrap .icon-on{
  position: absolute;
  inset: 0;
  opacity: 0;
}

/* Hover effect */
.products-cell:hover .icon-on{
  opacity: 1;
}

.products-cell:hover .icon-off{
  opacity: 0;
}

/* Active state (stay on) */
.products-cell.is-active .icon-on{
  opacity: 1;
}

.products-cell.is-active .icon-off{
  opacity: 0;
}



/* =========================================
   Product Image Overrides
========================================= */

.product-flat-replace{
  display: none; /* hidden by default (desktop shows original) */
  width: 100%;
}

.product-flat-replace picture,
.product-flat-replace img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* <1200px: show replacement image+button, hide desktop layout */
@media (max-width: 1199.98px){
  .product-flat-replace{
    display: block;
  }
  .product-detail-desktop{
    display: none !important;
  }
}


/* =========================================
   Grids L-R & R-L
========================================= */

/* Base grid */
.cg-grid{
  display:grid;
  grid-template-columns:1fr;   /* Mobile: 1 column */
  gap:40px;                    /* Required mobile gap */
}

/* Center both cells (v + h) */
.cg-cell{
  display:grid;
  place-items:center;
  text-align:center;
}

/* Tablet and up */
@media (min-width:768px){
  .cg-grid{
    grid-template-columns:1fr 1fr;  /* 2 columns */
    gap:40px;                       /* Keep 40px if desired */
  }
}

/* Ensure images behave properly */
.cg-cell img{
  display:block;
  margin:0 auto;
  max-width:100%;
  height:auto;
}

@media (min-width:768px){
  .cg-grid-swap{
    direction:rtl;
  }
  .cg-grid-swap > *{
    direction:ltr;
  }
}


/* =========================================
   Grids RFID
========================================= */

/* Mobile: 1 column, 4 rows (stacked) */
.cg-grid-2x2{
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px; /* adjust if needed */
}

/* Center all cells v + h */
.cg-grid-2x2 .cg-cell{
  display: grid;
  place-items: center;
  text-align: center;
}

/* Tablet+ / Desktop: 2 columns, 2 rows */
@media (min-width: 1200px){
  .cg-grid-2x2{
    grid-template-columns: 40% 60%;;
    grid-template-rows: auto auto; 
    column-gap: 0px;
    row-gap: 12px;
  }
}

/* Image safety */
.cg-grid-2x2 img{
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}



/* =========================================
   Grids Nexus
========================================= */

#grid-nexus .nexus-grid{
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 40px;
}

/* Row 1: v-start + h-center */
#grid-nexus .nexus-row1{
  display: grid;
  align-items: start;
  justify-items: center;
}

/* Row 2: just holds nested grid */
#grid-nexus .nexus-row2{
  display: block;
}

/* Nested grid defaults to 2 columns */
#grid-nexus .nexus-nested{
  display: grid;
  grid-template-columns: 50% 50%;
  column-gap: 20px;
  row-gap: 40px;
  align-items: center;
  justify-items: center;
}

/* Each nested cell centers its content */
#grid-nexus .nexus-cell{
  display: grid;
  place-items: center;
  width: 100%;
}

#grid-nexus .nexus-cell img{
  width: 240px;
  height: auto;
  display: inline;
  padding-top: 30px;
  padding-bottom: 20px;
}

/* Nested cell 1 image centering */
#grid-nexus .nexus-cell-2{
  display: flex;
  justify-content: center;
  align-items: center;
}

#grid-nexus .nexus-cell-2 .js-fade{
  width: 80%;        /* ← control image width here */
}

#grid-nexus .nexus-cell-2 img{
  width: 100%;
  height: auto;
  display: block;
}

/* Tablet and down: stack nested col2 under col1 */
@media (max-width: 768px){
  #grid-nexus .nexus-nested{
    grid-template-columns: 1fr;
  }
}


/* =========================================
   Temperature Sensor (GRID VERSION)
========================================= */

#grid-temp{
  --ts-section-height: auto;
  --ts-bg: url("../../catmacs/slide-clear.png");

  /* GAP sizing: NEVER collapses */
  --ts-gap-min: 30px;
  --ts-gap-fluid: 10vw;
  --ts-gap-max: 60px;

  /* Image sizing */
  --ts-wave-max-w: clamp(360px, 100vw, 1100px);

  min-height: auto;
  background: var(--ts-bg) center / cover no-repeat;
}

#grid-temp .temp-sensor-grid{
  display: grid;
  grid-template-columns: 1fr;

  /* 3 rows: title | guaranteed gap | image */
  grid-template-rows:
    auto
    clamp(var(--ts-gap-min), var(--ts-gap-fluid), var(--ts-gap-max))
    auto;

  justify-items: center;
  align-content: start;
  text-align: center;
}

/* Title */
#grid-temp .temp-sensor-heading{
  margin: 0;
  z-index: 2;
}

/* Gap (pure layout — never visible) */
#grid-temp .temp-sensor-gap{
  width: 100%;
}

/* Combined image */
#grid-temp .temp-sensor-wave{
  width: 100%;
  max-width: var(--ts-wave-max-w);
  height: auto;
  z-index: 1;

  /* optional zoom-in */
  transform: scale(0.96);
  transition: transform 500ms ease;
}

#grid-temp .temp-sensor-wave.is-zoomed{
  transform: scale(1);
}


/* =========================================
   NEXUS: overlay headings + invert effect (WORKING + SPACING FIX)
========================================= */

/* IMPORTANT: do NOT isolate the whole parallax block */
#grid-nexus .parallax-img{
  position: relative;
  isolation: auto !important;
}

/* Isolate ONLY the image wrapper so blend-mode only reacts to the image */
#grid-nexus .text-scroll-img{
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* --- Inside the image: invert/difference effect --- */
#grid-nexus .text-scroll-img .text-scroll-h{
  color: #fff;
  mix-blend-mode: difference;
  -webkit-text-stroke: 0;
  z-index: 3;
}

/* --- Outside the image: always white on the dark background --- */
#grid-nexus .parallax-img > .text-scroll-h{
  color: #fff;
  mix-blend-mode: normal;
  -webkit-text-stroke: 0;
  z-index: 1;
}

/* Reduce the BIG gap before the Nexus image/text starts */
#grid-nexus .nexus-row1{
  padding-top: 20px !important; /* overrides the inline 100px */
  padding-bottom: 0 !important;
}

/* Small vertical gap between the two words (tune these) */
#grid-nexus .text-scroll-h.margin-t{ margin-top: -9vw; }   /* was -8vw */
#grid-nexus .text-scroll-h.margin-b{ margin-bottom: -15vw; }  /* was -15vw */