/* =========================================================
   HOMEPAGE CSS — CLEANED + STRUCTURED
   Priority kept for bottom/latest logic
   ========================================================= */

/* =========================================================
   01. GLOBAL TOKENS / BASE
   ========================================================= */
:root{
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.22,.61,.36,1);
  --slide-gap: 380ms;
  --qw-ease: cubic-bezier(.22,1,.36,1);
}
@media (max-width: 767px) {
	body{
	scroll-behavior: unset !important;
touch-action: unset !important;
}	
}

/* 
.rex-scroll-section {
  position: relative;
  padding: 120px 20px;
  background: #fff;
  overflow: visible !important;
}
 
.rex-scroll-inner {
    max-width: 100%;
    margin: 0 auto;
    overflow: visible !important;
    width: 80%;
}
.rex-card {
  position: sticky;
  top: 120px;
  display: flex;
  justify-content: center;
  margin-bottom: 130px;
  transform: scale(1);
  opacity: 1;
  transition: transform .35s ease, opacity .35s ease;
  will-change: transform, opacity;
}
 
.rex-card img {
  width: 100%;
  max-width: 850px;
  height: auto;
  display: block;
}
 
@media(max-width:767px) {
  .rex-scroll-section {
    padding: 0px 15px;
  }
 
  .rex-card {
    top: 00px;
    margin-bottom: 0px;
  }
}
 */

/* @media (min-width: 768px) {
.rex-scroll-section {
    display: none;
}
} */
@media (max-width: 767px) {
#section5 {
    display: none !important;
}
#section4 .s4-cardTitleRow .s4-line {
    z-index: -1;
}	
	
}


/* html,
body{
  height: 100%;
} */

/* body{
  overscroll-behavior-y: none;
}
 */

.home .top-menu {
    background: #fff;
}
.snap-section{
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}
.headline {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 100px;
  line-height: 90px;
  letter-spacing: -0.05em;
  vertical-align: middle;
}
.nav-small{
 /* letter-spacing: .16em;*/
  text-transform: uppercase;
  font-size: 13px;
}

.nav-mid{
  text-transform: uppercase;
  font-size: 12px;
}

/* .cta-btn{
  color: rgba(255,255,255,.75) !important;
} */

/* homepage shared section padding */
section#section4,
section#section7,section#section8{
  padding: 200px 20px 100px;
}

section#section6{
  padding-top: 200px;
}

/* =========================================================
   02. HERO — BASE
   ========================================================= */
.hero{
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  color: #fff;
  background: #000;
}

.hero-slides{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  transition: opacity 900ms ease;
  will-change: opacity;
}

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

.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.hero-content{
  position: relative;
  z-index: 2;
  height: 100%;
}

.hero-bg{
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.12);
  filter: saturate(1) contrast(1);
  will-change: transform;
}

.hero-slide.is-active .hero-bg,
#hero .hero-slide.is-active .hero-bg.a-bg-zoom{
  animation: bgZoomOut 2000ms var(--ease-io) 0ms both;
}

@keyframes bgZoomOut{
  from{ transform: scale(1.12); }
  to{ transform: scale(1.02); }
}

.hero-headline{
  position: absolute;
  left: 20px;
  bottom: 20px;
}

.hero-grain{
  z-index: 5;
}

.hero-grain::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .55;
  pointer-events: none;
}

/* =========================================================
   03. HERO — FRAME / MEASURE BASE
   ========================================================= */
.frame{
  position: absolute;
  width: var(--fw, 420px);
  height: var(--fh, 240px);
  border: 1px solid rgba(255,255,255,1);
  opacity: 0;
  transform: translateY(10px) scale(.99);
  transform-origin: center;
}

.frame__title{
  position: absolute;
  left: 6%;
  top: 56%;
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 13px;
}

.frame__tag{
  position: absolute;
  left: 6%;
  bottom: 5%;
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 13px;
}

.frame__tag b{
  width: 7px;
  height: 7px;
  background: rgba(255,255,255,1);
}

.m{
  position: absolute;
  opacity: 0;
}

.pin{
  position: absolute;
  width: 5px;
  height: 5px;
  transform: scale(0);
  transform-origin: center;
  box-sizing: border-box;
  will-change: transform;
}

.pin--filled{
  background: #fff;
}

.pin--outline{
  border: 1px solid rgba(255,255,255,.5);
  background: transparent;
}

.pin--end{
  left: auto;
  right: 0;
  top: 0;
}

.label{
  position: absolute;
  left: 20px;
  top: -20px;
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: .55rem;
  color: rgba(255,255,255,1);
  opacity: 0;
  transform: translateY(10px);
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
}

.line{
  display: block;
  background: rgba(255,255,255,.5);
}

.line--v{
  width: 1px;
  height: var(--vh, 280px);
  transform: scaleY(0);
  transform-origin: top;
}

.line--short{
  height: var(--vh, 120px);
}

.line--h{
  width: var(--hw, 298px);
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
}

.m--diag{
  width: var(--dw, 34vw);
  height: var(--dh, 24vh);
}

.diag{
  position: absolute;
  inset: 0;
}

.diag__line{
  stroke: rgba(255,255,255,.55);
  stroke-width: .5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 510;
  stroke-dashoffset: 510;
}

/* default initial helpers */
.line-y{ transform: scaleY(0); transform-origin: bottom; }
.line-x{ transform: scaleX(0); transform-origin: left; }
.bg-fade{ opacity: 0; transform: scale(1.02); }

span.pin.pin--outline{
  width: 29px;
  height: 29px;
}

.m.m--v.m2 .pin--filled{
  background: #fff;
  left: -2px;
  top: -6px;
}

.m.m--v.m2 .label{
  margin-top: .35rem;
  margin-left: .35rem;
}

/* =========================================================
   04. HERO — GENERIC ACTIVE ANIMATIONS
   ========================================================= */
.hero-slide.is-active .frame{
  animation: frameIn .7s cubic-bezier(.2,.8,.2,1) .12s both;
}

.hero-slide.is-active .m{
  animation: fadeIn .35s ease .10s both;
}

.hero-slide.is-active .pin{
  animation: pop .35s cubic-bezier(.2,.8,.2,1) .22s both;
}

.hero-slide.is-active .line--v{
  animation: drawY .9s cubic-bezier(.2,.8,.2,1) .18s both;
}

.hero-slide.is-active .line--h{
  animation: drawX .9s cubic-bezier(.2,.8,.2,1) .18s both;
}

.hero-slide.is-active .label{
  animation: labelIn .45s cubic-bezier(.2,.8,.2,1) .38s both;
}

.hero-slide.is-active .diag__line{
  animation: diagDraw .85s cubic-bezier(.2,.8,.2,1) .18s both;
}

@keyframes frameIn{ to{ opacity: 1; transform: translateY(0) scale(1); } }
@keyframes fadeIn{ to{ opacity: 1; } }
@keyframes pop{ to{ transform: scale(1); } }
@keyframes drawY{ to{ transform: scaleY(1); } }
@keyframes drawX{ to{ transform: scaleX(1); } }
@keyframes labelIn{ to{ opacity: 1; transform: translateY(0); } }
@keyframes diagDraw{ to{ stroke-dashoffset: 0; } }





/* =========================================================
   08. HERO — WORD / FRAME / MEASURE ANIMATION HELPERS
   ========================================================= */

.overlay--s9 .frame--right {
    right: 30.5%;
    top: 40%;
    --fw: 390px;
    --fh: 310px;
}
.overlay--s9 .label,
.overlay--s9 .frame__title{
    font-size: 15px;
    letter-spacing: -0.05em;
}



/* =========================================================
   05. HERO — WORD / FRAME / MEASURE ANIMATION HELPERS
   ========================================================= */
[class^="a-"],
[class*=" a-"]{
  --d: 0ms;
  --dur: 700ms;
}

.a-fade-up{
  opacity: 0;
  transform: translateY(12px);
}

.hero-slide.is-active .a-fade-up{
  animation: fadeUp var(--dur) var(--ease-out) var(--d) both;
}

@keyframes fadeUp{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.a-line-up{
  transform: scaleY(0);
  transform-origin: bottom;
  will-change: transform;
}

.hero-slide.is-active .a-line-up{
  animation: lineUp var(--dur, 1100ms) cubic-bezier(.2,.8,.2,1)
             calc(var(--slide-gap, 0ms) + var(--d, 0ms)) both;
}

@keyframes lineUp{
  to{ transform: scaleY(1); }
}

.a-pop{
  transform: scale(0);
  transform-origin: center;
}

.hero-slide.is-active .a-pop{
  animation: popIn 420ms cubic-bezier(.2,.8,.2,1)
             calc(var(--slide-gap, 0ms) + var(--d, 0ms)) both;
}

@keyframes popIn{
  to{ transform: scale(1); }
}

.a-count{
  opacity: 0;
  transform: translateY(10px);
}

.hero-slide.is-active .a-count,
#hero .hero-slide.is-active .a-count{
  animation: countIn 420ms var(--ease-out)
             calc(var(--slide-gap, 380ms) + var(--d, 0ms)) both;
}

@keyframes countIn{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.a-dot-up{
  transform: translateY(0) scale(0);
  transform-origin: center;
  will-change: transform;
}

.hero-slide.is-active .a-dot-up{
  animation: dotUp var(--dur) var(--ease-out)
             calc(var(--slide-gap) + var(--d, 0ms)) both;
}

@keyframes dotUp{
  0%{ transform: translateY(0) scale(0); }
  20%{ transform: translateY(0) scale(1); }
  100%{ transform: translateY(calc(-1 * var(--travel, 240px))) scale(1); }
}

#hero .headline.a-headline{
  opacity: 0;
  transform: translateX(90px);
  filter: blur(2px);
  will-change: transform, opacity, filter;
}

#hero.is-animating .headline.a-headline{
  animation: headlineIn 900ms cubic-bezier(.2,.8,.2,1) 240ms both;
}

@keyframes headlineIn{
  0%{ opacity: 0; transform: translateX(90px); filter: blur(2px); }
  100%{ opacity: 1; transform: translateX(0); filter: blur(0); }
}

#hero .headline.a-headline-words .a-word{
  display: inline-block;
  opacity: 0;
  transform: translateX(40px);
  will-change: transform, opacity;
}

#hero.is-animating .headline.a-headline-words .a-word{
  animation: wordIn 520ms cubic-bezier(.2,.8,.2,1)
             calc(var(--slide-gap) + var(--d, 0ms)) both;
}

@keyframes wordIn{
  0%{ opacity: 0; transform: translateX(40px); }
  100%{ opacity: 1; transform: translateX(0); }
}

.a-stem{
  position: relative;
  width: 1px;
  opacity: 0;
  transform: translateY(var(--stem-rise, 90px));
  will-change: transform, opacity;
}

.hero-slide.is-active .a-measure .a-stem{
  animation: stemRise 900ms cubic-bezier(.2,.8,.2,1)
             calc(var(--slide-gap, 0ms) + var(--d, 0ms)) both;
}

@keyframes stemRise{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.a-draw-up{
  transform: scaleY(0);
  transform-origin: bottom;
  will-change: transform;
}

.hero-slide.is-active .a-draw-up{
  animation: lineDrawUp var(--dur, 1100ms) cubic-bezier(.2,.8,.2,1)
             calc(var(--slide-gap, 0ms) + var(--d, 0ms)) both;
}

@keyframes lineDrawUp{
  to{ transform: scaleY(1); }
}

/* frame center scale */
.frame.a-frameCenterScale{
  width: var(--fw, 390px);
  height: var(--fh, 310px);
  border: 0;
  position: absolute;
}

.frame.a-frameCenterScale::before{
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,1);
  border-radius: 2px;
  opacity: 0;
  transform-origin: center;
  transform: translateZ(0) scale(var(--sx1, .28), var(--sy1, .30));
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.hero-slide.is-active .frame.a-frameCenterScale::before,
#hero .hero-slide.is-active .frame.a-frameCenterScale::before{
  animation: frameScale3 var(--dur,650ms) cubic-bezier(.19,1,.22,1)
             calc(var(--slide-gap, 0ms) + var(--d,0ms)) both;
}

@keyframes frameScale3{
  0%{
    opacity: 0;
    transform: scale(var(--sx1, .28), var(--sy1, .30));
  }
  20%{
    opacity: 1;
    transform: scale(
      calc(var(--sx1, .28) + (var(--sx2, .62) - var(--sx1, .28)) * .35),
      calc(var(--sy1, .30) + (var(--sy2, .62) - var(--sy1, .30)) * .35)
    );
  }
  40%{
    opacity: 1;
    transform: scale(var(--sx2, .62), var(--sy2, .62));
  }
  60%{ transform: scale(.98, .98); }
  80%{ transform: scale(1.015, 1.015); }
  100%{
    opacity: 1;
    transform: scale(1, 1);
  }
}

.a-frame-reveal,
#hero .a-frame-reveal,
#hero .a-count{
  opacity: 0;
}

.hero-slide.is-active .a-frame-reveal,
#hero .hero-slide.is-active .a-frame-reveal{
  animation: revealNow 1ms linear calc(var(--slide-gap, 380ms) + var(--d, 920ms)) both;
}

@keyframes revealNow{
  to{ opacity: 1; }
}

/* slide 3 helpers */
.hero-slide.is-active .a-measureRise{
  animation: measRise 720ms var(--ease-out)
             calc(var(--slide-gap) + var(--d, 0ms)) both;
}

@keyframes measRise{
  0%{ opacity: 0; transform: translateY(var(--rise, 140px)); }
  100%{ opacity: 1; transform: translateY(0); }
}

.hero-slide.is-active .a-lineRise{
  animation: lineRise 1450ms cubic-bezier(.22,1,.36,1)
             calc(var(--slide-gap) + var(--d, 0ms)) both;
}

@keyframes lineRise{
  0%{ transform: scaleY(0); }
  70%{ transform: scaleY(1.02); }
  100%{ transform: scaleY(1); }
}

.hero-slide.is-active .a-pinBoxPop{
  animation: pinPop 380ms var(--ease-out)
             calc(var(--slide-gap) + var(--d, 0ms)) both;
}

.hero-slide.is-active .a-pinBoxPop::after{
  animation: boxPop 380ms var(--ease-out)
             calc(var(--slide-gap) + var(--d, 0ms) + 60ms) both;
}

@keyframes pinPop{
  0%{ opacity: 0; transform: scale(.6); }
  50%{ opacity: 1; transform: scale(1.08); }
  100%{ opacity: 1; transform: scale(1); }
}

@keyframes boxPop{
  0%{ opacity: 0; transform: translateY(-50%) scale(.75); }
  50%{ opacity: 1; transform: translateY(-50%) scale(1.06); }
  100%{ opacity: 1; transform: translateY(-50%) scale(1); }
}

.hero-slide.is-active .a-lineGrow{
  animation: lineGrow 1250ms cubic-bezier(.22,1,.36,1)
             calc(var(--slide-gap) + var(--d, 0ms)) both;
}

@keyframes lineGrow{
  0%{ transform: scaleX(0); }
  70%{ transform: scaleX(1.02); }
  100%{ transform: scaleX(1); }
}

.hero-slide.is-active .a-endPop{
  animation: endPop 360ms var(--ease-out)
             calc(var(--slide-gap) + var(--d, 0ms)) both;
}

@keyframes endPop{
  0%{ opacity: 0; transform: scale(.6); }
  50%{ opacity: 1; transform: scale(1.08); }
  100%{ opacity: 1; transform: scale(1); }
}

/* slide 4 helpers */
.a-line-center{
  transform-origin: center center;
  transform: translateZ(0) scaleX(0);
  will-change: transform;
  backface-visibility: hidden;
}

.hero-slide.is-active .a-line-center{
  animation: lineCenterGrow var(--dur, 1250ms) cubic-bezier(.22,1,.36,1)
             calc(var(--slide-gap) + var(--d, 0ms)) both;
}

@keyframes lineCenterGrow{
  0%{ transform: translateZ(0) scaleX(0); }
  70%{ transform: translateZ(0) scaleX(1.02); }
  100%{ transform: translateZ(0) scaleX(1); }
}

.a-boxOut{
  position: relative;
  opacity: 0;
  will-change: opacity, clip-path;
  transform: translateZ(0);
  backface-visibility: hidden;
  clip-path: inset(42% 42% 42% 42% round 2px);
}

.a-boxOut::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 120%;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 2px;
  transform: translateY(-50%);
  opacity: 0;
  clip-path: inset(42% 42% 42% 42% round 2px);
  will-change: opacity, clip-path;
}

.pin--end.a-boxOut::after{
  left: auto;
  right: 120%;
}

.hero-slide.is-active .a-boxOut{
  animation: boxReveal 520ms var(--ease-out)
             calc(var(--slide-gap) + var(--d, 0ms)) both;
}

.hero-slide.is-active .a-boxOut::after{
  animation: boxReveal 520ms var(--ease-out)
             calc(var(--slide-gap) + var(--d, 0ms) + 80ms) both;
}

@keyframes boxReveal{
  0%{ opacity: 0; clip-path: inset(42% 42% 42% 42% round 2px); }
  60%{ opacity: 1; clip-path: inset(-2% -2% -2% -2% round 2px); }
  100%{ opacity: 1; clip-path: inset(0 0 0 0 round 2px); }
}

.hero-slide[data-slide="4"] .a-dotPop{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 1px;
  opacity: 0;
  transform: translate3d(-50%,-50%,0) scale3d(.2,.2,1);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.hero-slide.is-active[data-slide="4"] .a-dotPop{
  animation: dotPop 420ms var(--ease-out)
             calc(var(--slide-gap) + var(--d, 0ms)) both;
}

@keyframes dotPop{
  0%{ opacity: 0; transform: translate3d(-50%,-50%,0) scale3d(.2,.2,1); }
  70%{ opacity: 1; transform: translate3d(-50%,-50%,0) scale3d(1.15,1.15,1); }
  100%{ opacity: 1; transform: translate3d(-50%,-50%,0) scale3d(1,1,1); }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-slide.is-active .hero-bg,
  .hero-slide.is-active .a-rect,
  .hero-slide.is-active .a-headline,
  .hero-slide.is-active .a-line-up,
  .hero-slide.is-active .a-pop,
  .hero-slide.is-active .a-fade-up,
  .hero-slide.is-active .a-count{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .a-line-up{
    transform: scaleY(1) !important;
  }

  .s9-bg{
    transform: none;
  }

  .s9-word{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* =========================================================
   06. HERO — SLIDE POSITIONING / FINAL OVERRIDES
   ========================================================= */
.overlay--s1 .frame--left,
.overlay--s2 .frame--right,
.overlay--s3 .frame--mid,
.overlay--s4 .frame--left{
  border-radius: 2px;
}

/* slide 1 */
.overlay--s1 .frame--left{ left: 38%; top: 20%; --fw: 390px; --fh: 310px; }
.overlay--s1 .m1{ left: 12%; top: 30%; --vh: 33vh; }
.overlay--s1 .m1 .pin{ left: -2px; top: -6px; }
.overlay--s1 .m2{ left: 20%; top: 25%; --vh: 4.81vh; }
.overlay--s1 .m2 .pin{ left: -14px; top: -19px; }

/* slide 2 */
.overlay--s2 .frame--right{
  left: 62%;
  top: 24%;
  --fw: 390px;
  --fh: 310px;
}

.overlay--s2 .d1{
  left: 8%;
  top: 28%;
  width: 504px;
  height: 331px;
  --end-x: 0.62;
  --end-y: 0.82;
  --pin: 5px;
  --outer: 29px;
  position: absolute;
  pointer-events: none;
}

.overlay--s2 .d1 .diag{
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--end-x) * 100%);
  height: calc(var(--end-y) * 100%);
  display: block;
}

.overlay--s2 .d1 .diag__line{
  stroke: rgba(255,255,255,.5);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  shape-rendering: crispEdges;
}

.overlay--s2 .d1 .pA,
.overlay--s2 .d1 .pB{
  width: var(--pin) !important;
  height: var(--pin) !important;
  border-radius: 1px;
  background: rgba(255,255,255,.9);
  transform: translate(-50%, -50%);
}

.overlay--s2 .d1 .pA{
  left: 0 !important;
  top: 0 !important;
}

.overlay--s2 .d1 .pB{
  left: calc(var(--end-x) * 100%) !important;
  top: calc(var(--end-y) * 100%) !important;
  right: auto !important;
  bottom: auto !important;
}

.overlay--s2 .d1 .diagLabel{
  position: absolute;
  left: calc(var(--end-x) * 55%) !important;
  top: calc(var(--end-y) * 45%) !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  font-size: 15px;
  line-height: 15px;
  letter-spacing: -0.05em;
}

.overlay--s2 .d1 .pA::after,
.overlay--s2 .d1 .pB::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--outer);
  height: var(--outer);
  border: 1px solid rgba(255,255,255,0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* slide 3 */
.overlay--s3 .frame--mid{
  left: 52%;
  top: 26%;
  --fw: 390px;
  --fh: 310px;
  transform: none;
}

/* keep original position values */
.overlay--s3 .h1{
  left: 40%;
  top: 28%;
  --hw: 22vw;
  height: 45vh;
}

/* kill horizontal line in left measure */
.overlay--s3 .h1 .line--h{
  display: none !important;
}

/* create vertical line */
.overlay--s3 .h1::after{
  content:"";
  position:absolute;
  left: 10px;
  top: 18px;
  width: 1px;
  height: calc(100% - 18px);
  background: rgba(255,255,255,.45);
}

/* left pin */
.overlay--s3 .h1 .pin{
  width: 5px !important;
  height: 5px !important;
  left: 10px !important;
  top: 15px !important;
  transform: translate(-50%,-50%) !important;
  background:#fff;
  border-radius:1px;
}

/* left label */
.overlay--s3 .h1 .label{
  position:absolute;
  left: 26px !important;
  top: 2px !important;
  transform:none !important;
  font-family:"IBM Plex Mono", monospace;
  font-weight:400;
  font-size:15px;
  line-height:15px;
  letter-spacing:-0.05em;
  text-transform:uppercase;
  color:#fff;
  opacity:1 !important;
}

/* keep original position values */
.overlay--s3 .h2{
  right: 8% !important;
  top: 56% !important;
  width: 144px;
  height: 40px;
}

.overlay--s3 .h2 .line--h{
  position:absolute;
  left: 0 !important;
  top: 20px !important;
  width: 144px !important;
  height: 1px;
  background: rgba(255,255,255,.5);
  transform:none !important;
}

.overlay--s3 .h2 .pin{
  width:5px !important;
  height:5px !important;
  left: 0 !important;
  top: 20px !important;
  transform: translate(-50%,-50%) !important;
  background:#fff;
  border-radius:1px;
}

.overlay--s3 .h2 .pin--end{
  right: 0 !important;
  left: auto !important;
  top: 20px !important;
  transform: translate(50%,-50%) !important;
}

.overlay--s3 .h2 .pin::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 29px;
  height: 29px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 0;
  transform: translate(-50%, -50%);
}

.overlay--s3 .h2 .label{
  position:absolute;
  left: 50% !important;
  top: -10px !important;
  transform: translateX(-50%) !important;
  font-family:"IBM Plex Mono", monospace;
  font-weight:400;
  font-size:15px;
  line-height:15px;
  letter-spacing:-0.05em;
  text-transform:uppercase;
  color:#fff;
  opacity:1 !important;
}

/* slide 4 */
.overlay--s4 .frame--left{ left: 12%; top: 22%; --fw: 390px; --fh: 310px; }
.overlay--s4 .h3{ left: 70%; top: 65%; --hw: 15.58vw; }

.overlay--s4 .h3 .pin--outline{
  position: absolute !important;
  width: 29px !important;
  height: 29px !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  background: transparent !important;
  transform: none !important;
  opacity: 1 !important;
}

.overlay--s4 .h3 .pin--outline:not(.pin--end){
  left: 0 !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.overlay--s4 .h3 .pin--outline.pin--end{
  right: 0 !important;
  left: auto !important;
  top: 50% !important;
  transform: translate(50%, -50%) !important;
}

.overlay--s4 .h3 .pin--outline::after{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 5px !important;
  height: 5px !important;
  background: #fff !important;
  border-radius: 0px !important;
  transform: translate(-50%, -50%) !important;
}

.overlay--s4 .h3 .label{
  position: absolute !important;
  left: 50% !important;
  top: -20px !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 15px !important;
  letter-spacing: -0.05em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* slide 5 */
.overlay--s5 .frame--center{
  left: 50%;
  top: 28%;
  --fw: 489px;
  --fh: 358px;
  transform: translateX(-50%);
}

.overlay--s5 .m5{
  left: 10%;
  top: 34%;
  --vh: 38vh;
}

.overlay--s5 .m5 .pin{
  left: -2px;
}

.overlay--s5 .m5 span.label{
  top: -15px;
}

.overlay--s5 .h5{
  position: absolute;
  left: 10%;
  top: 44%;
  width: var(--hw, 260px) !important;
  height: 29px;
}

.overlay--s5 .h5 .line--h{
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 156px !important;
  height: 1px !important;
  background: rgba(255,255,255,.45) !important;
  transform: translateY(-0.5px) !important;
}

.overlay--s5 .h5 .pin--outline:not(.pin--end){
  display: none !important;
}

.overlay--s5 .h5 .pin--outline.pin--end{
  position: absolute !important;
  left: 156px !important;
  top: 50% !important;
  right: auto !important;
  width: 29px !important;
  height: 29px !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  background: transparent !important;
  transform: translate(-50%,-50%) !important;
  opacity: 1 !important;
}

.overlay--s5 .h5 .pin--outline.pin--end::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  background: #fff;
  transform: translate(-50%,-50%);
}

.m.m--h.h5{
  position: relative;
}

.m.m--h.h5::before{
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 29px;
  background: rgb(255 255 255 / 50%);
  transform: rotate(45deg);
}

.overlay--s5 .h5 .label{
  position: absolute !important;
  left: 160px !important;
  top: 50% !important;
  transform: translate(22px,-50%) !important;
  margin: 0 !important;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  font-size: 15px;
  line-height: 15px;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  opacity: 1 !important;
}

.overlay--s5 .h5 .label i{ display: none; }
.overlay--s5 .h5 .label em{ font-style: normal; }

/* =========================================================
   07. HERO — QUOTE WIDGET
   ========================================================= */
.quote-widget{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 70;
}

#hero .quote-widget{
  transition: opacity .35s ease, transform .35s ease;
}

.custom-quote-box{
  width: 335px !important;
  border-radius: 2px !important;
}

.custom-contact{
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 100% !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
  color: #000;
}

.custom-title{
  font-family: "Inter", sans-serif;
  font-weight: 400 !important;
  font-size: 27px !important;
  line-height: 27px !important;
  letter-spacing: -0.05em !important;
  color: #161616;
}

.custom-btn{
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500 !important;
  font-size: 11px !important;
  line-height: 105% !important;
  letter-spacing: -0.03em !important;
  text-transform: uppercase;
}

.quote-sub-text{
  color: #000;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 13px;
}

.quote-title{
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 46px;
  line-height: 41px;
  letter-spacing: -0.05em;
  vertical-align: middle;
}

.quote-collapsed{
  opacity: 1;
  transform: translate3d(0,0,0);
  transition: opacity .35s var(--qw-ease), transform .55s var(--qw-ease);
  will-change: opacity, transform;
}

.quote-expanded{
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0,18px,0);
  transition: opacity .38s var(--qw-ease), transform .72s var(--qw-ease);
  will-change: opacity, transform;
}

.quote-widget:hover .quote-collapsed{
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0,10px,0);
}

.quote-widget:hover .quote-expanded{
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0,0,0);
}

.quote-widget:not(:hover) .quote-expanded{
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0,18px,0);
  transition: opacity .34s ease, transform .68s cubic-bezier(.4,0,.2,1);
}

.qw-item{
  opacity: 1;
  transform: translate3d(0,0,0);
  transition: opacity 700ms var(--qw-ease), transform 850ms var(--qw-ease);
  will-change: transform, opacity;
}

.quote-expanded .qw-item{
  opacity: 0;
  transform: translate3d(-22px,0,0);
  transition-delay: 0ms;
}

.quote-widget:hover .quote-expanded .qw-item{
  opacity: 1;
  transform: translate3d(0,0,0);
  transition-delay: var(--d, 0ms);
}

.quote-collapsed .qw-item{
  opacity: 0;
  transform: translate3d(-18px,0,0);
  transition-delay: 0ms;
}

.quote-widget:not(:hover) .quote-collapsed .qw-item{
  opacity: 1;
  transform: translate3d(0,0,0);
  transition-delay: var(--d, 0ms);
}

@keyframes qw-blink{
  0%{ transform: scale(1); opacity: 1; }
  35%{ transform: scale(1.6); opacity: .35; }
  70%{ transform: scale(.9); opacity: 1; }
  100%{ transform: scale(1); opacity: 1; }
}

.qw-dot{
  transform-origin: center;
  will-change: transform, opacity;
}

.quote-widget:hover .qw-dot{
  animation: qw-blink 520ms cubic-bezier(.22,1,.36,1) 1;
}

.quote-expanded .qw-img,
.quote-expanded .qw-img img{
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* =========================================================
   08. SECTION 2 / 3
   ========================================================= */
.s2-title-lines{
  text-indent: 120px;
}

.s2-title{
    color: #161616;
	font-weight: 400;
	font-size: 38px;
	line-height: 38px;
	text-indent: 116px;
	letter-spacing: -0.05em;	
}

.s6-tagline .s6-word{
    font-weight: 400;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: -0.05em;
	  color: #000;
}
/* section 3 */
#section3{
  --s3-measure-left: -20px;
}

#section3 .s3-measure{
  position: relative;
  left: var(--s3-measure-left, 0px);
  bottom: var(--s3-measure-bottom, 0px);
  width: 18px;
  height: var(--s3-measure-h, clamp(220px, 66vh, 560px));
  pointer-events: none;
  z-index: 30;
}

#section3 .s3-measure-square{
  position: absolute;
  left: -3px;
  bottom: 66px;
  width: var(--s3-square, 23px);
  height: var(--s3-square, 23px);
  border: 1px solid rgba(255,255,255,1);
}
.s3-metric {
    margin-top: -65px;
}
#section3 .s3-measure-square::after{
  content: "";
  position: absolute;
  width: var(--s3-inner-dot, 5px);
  height: var(--s3-inner-dot, 5px);
  background: rgba(255,255,255,1);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#section3 .s3-measure-line,
.s3-measure-line{
  position: absolute;
  left: calc(var(--s3-square, 17px) / 2);
  bottom: calc(var(--s3-square, 80px) + 0px);
  width: 1px;
  height: calc(100% - (var(--s3-square, 12px) + 0px));
  background: rgba(255,255,255,.5);
  transform-origin: bottom;
  transform: scaleY(0);
}

.s3-measure-horizontal{
  position: relative;
  width: 100%;
  height: 40px;
  margin-left: -65px;
}

.s3-measure-h-line{
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #d9d9d9;
  transform: translateY(-50%);
}

.s3-measure-h-square{
  position: absolute;
  top: 50%;
  left: 100%;
  width: 23px;
  height: 23px;
  border: 1px solid #000;
  background: #fff;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.s3-measure-h-square::after{
  content: "";
  width: 5px;
  height: 5px;
  background: #000;
}

/* =========================================================
   09. SECTION 4 — OUR IMPACT
   ========================================================= */

.s4-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 1vw, 34px);
  align-items: start;
}

.s4-card{
  display: flex;
  flex-direction: column;
/*   gap: 16px; */
  min-width: 0;
}

.s4-cardTop{
  display: flex;
  align-items: center;
  gap: 20px;
	margin-bottom:18px;
}

.s4-dot{
  width: 4px;
  height: 4px;
  background: rgba(0,0,0);
  display: inline-block;
}

.s4-cardIndex{
  font-size: 13px;
  font-weight: 500;
  color: #000;
  letter-spacing: 0;
}

.s4-imageWrap{
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.s4-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  will-change: transform;
}

.s4-logoMark{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: .95;
}

.s4-cardBody{
  padding-top: 45px;
}

#section4 .s4-cardTitleRow{
  position: relative;
  display: flex;
	flex-direction:column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding-left: 60px;
  padding-top: 20px;
}

#section4 .s4-cardTitleRow::before{
  content: "";
  position: absolute;
  left: 15px;
  top: 20px;
  width: 20px;
  height: 20px;
  border: 1px solid #000;
}

#section4 .s4-cardTitleRow::after{
  content: "";
  position: absolute;
  left:24px;
  top: 28px;
  width: 4px;
  height: 4px;
  background: #000;
  border-radius: 1px;
}

#section4 .s4-cardTitleRow .s4-line{
  position: absolute;
  left: 25px;
  bottom: calc(100% - 32px);
  width: 1px;
  height: clamp(78px, 6.5vh, 80px);
  background: #ADADAD;
  transform-origin: bottom;
  transform: scaleY(1);
	z-index:-1;
}

.s4-cardTitle{
  color: #161616;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 27px;
  line-height: 27px;
  letter-spacing: -0.05em;
}

.s4-cardText{
  color: #717171;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: -0.02em;
    text-indent: 45px;
  margin-left: -45px;
}


/* ── Section 5 ── */
html,body{overflow-x:hidden;max-width:100%;font-family:'Inter',sans-serif;scroll-behavior:auto}
/* Fix GSAP pin-spacer width */
.pin-spacer{overflow:hidden!important;max-width:100%!important}

#section5{
  position:relative;height:100vh;
  touch-action:pan-y;
  /* width fix: use 100% not 100vw to avoid scrollbar-width issues */
  width:100%;
  overflow:hidden;color:#fff;background:#000
}
.s5-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.s5-bgA,.s5-bgB{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:opacity 500ms ease;will-change:opacity
}
.s5-bgB{opacity:0}
.s5-overlay{
  position:absolute;inset:0;
/*   background:linear-gradient(90deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,.30) 52%,rgba(0,0,0,0) 100%) */
}

/* Content — clips all children */
.s5-inner{position:relative;z-index:10;width:100%;height:100%;overflow:hidden}

/* ── Rail ── */
.s5-railWrap{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:80px;pointer-events:none;overflow:visible
}
.s5-rail{
  position:absolute;left:0;right:0;top:53%;height:1px;
  background:rgba(255,255,255,.5);transform:translateY(-50%)
}
.s5-fill{
  position:absolute;left:0;top:53%;height:1px;width:0;
  background:rgba(255,255,255);transform:translateY(-50%);
  transition:width 600ms cubic-bezier(.2,.8,.2,1);
  z-index:2
}

/* ── Dots: positions are updated per active slide from JS ── */
.s5-dot{
  position:absolute;top:53% !important;width:5px;height:5px;background:#fff;
  transform:translate(-50%,-50%);
  transition:width .25s,height .25s,background .25s,border .25s,transform .25s;
  cursor:pointer;border:none;outline:none;pointer-events:auto;z-index:4;
  transition:left 520ms cubic-bezier(.2,.8,.2,1),width .25s,height .25s,background .25s,border .25s,transform .25s
}
.s5-dot[data-i="0"]{left:8%}
.s5-dot[data-i="1"]{left:36%}
.s5-dot[data-i="2"]{left:64%}
.s5-dot[data-i="3"]{left:92%}
.s5-dot.is-active{
  background:#e0e0e04f;border:1px solid #fff!important;
  width:23px;height:23px;transform:translate(-50%,calc(-50% + 2px))
}
.s5-dot.is-active {
    top: 49% !important;
}
.s5-dot.is-active::after{
  content:"";position:absolute;top:52%;left:50%;
  transform:translate(-50%,-50%);width:5px;height:5px;background:#fff
}

}
.s5-dot.is-active::after{
  content:"";position:absolute;top:44% !important;left:50%;
  transform:translate(-50%,-50%);width:5px;height:5px;background:#fff
}

/* ── Labels ──
   Inactive rail labels keep a fixed number/text gap.
   Active label is hidden on the rail; its number is shown inside
   the active copy block so the number + title stay aligned. */
.s5-label{
  position:absolute;
  top:calc(53% + 22px);
  transform:none;
  width:260px;
  height:36px;
  color:rgba(255,255,255,.85);
  display:grid;
  grid-template-columns:26px max-content;
  column-gap:10px;
  align-items:start;
  white-space:nowrap;
  font-family:'Inter',sans-serif;
  font-weight:400;
  font-size:clamp(16px,2vw,28px);
  line-height:1.2;
  letter-spacing:-.05em;
  pointer-events:none;
  overflow:visible;
  transition:left 520ms cubic-bezier(.2,.8,.2,1),opacity .25s ease;
}
.s5-label[data-i="0"]{left:7.2%}
.s5-label[data-i="1"]{left:35%}
.s5-label[data-i="2"]{left:63%}
.s5-label[data-i="3"]{left:91%}
.s5-num {
    display: block;
    width: 13px;
    color: rgba(255, 255, 255, .50);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: .5px;
}
.s5-smtext {
    line-height: 35px;
    display: block;
    min-width: 170px;
    opacity: 1;
    transform: translateY(0);
    overflow: visible;
    transition: opacity .25s ease, transform .25s ease;
    font-size: 29px;
    font-weight: 400;
    color: #fff;
    letter-spacing: -0.05em;
}
.s5-label.is-active{
  opacity:0;
  visibility:hidden;
}

/* ── Copy panels ──
   Fixed to follow original positioning from screenshots:
   - content sits just below the active rail point
   - each slide has different available width
   - no overflow on Services
── */
.s5-copy{
  position:absolute;
  top:calc(50% + 50px);
  bottom:auto;
  width:auto;
  opacity:0;pointer-events:none;
  transform:translateY(10px);filter:blur(6px)
}

/* Products: original left block position */
.s5-copy[data-i="0"]{
  left:7.2%;
  width:31vw;
  max-width:450px;
}

/* Software: starts near second active point, enough room before Solutions */
.s5-copy[data-i="1"]{
  left:32%;
  width:34vw;
  max-width:500px;
}

/* Solutions: starts after the active square, like the reference */
.s5-copy[data-i="2"]{
  left:49%;
  width:38vw;
  max-width:560px;
}

/* Services: right side with enough remaining space */
.s5-copy[data-i="3"]{
  left:65%;
  right:4%;
  width:auto;
  max-width:470px;
}

.s5-copy.is-active{opacity:1;pointer-events:auto;transform:translateY(0);filter:blur(0)}
.s5-copy::before{
  content:"";
  position:absolute;
  left:0;
  top:.18em;
  color:rgba(255,255,255,.40);
  font-family:'IBM Plex Mono',monospace;
  font-weight:500;
  font-size:13px;
  line-height:1.2;
  letter-spacing:.5px;
}
.s5-copy[data-i="0"]::before{content:"01"}
.s5-copy[data-i="1"]::before{content:"02"}
.s5-copy[data-i="2"]::before{content:"03"}
.s5-copy[data-i="3"]::before{content:"04"}

.s5-title {
    margin: 0 0 28px 36px;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: clamp(38px, 5.4vw, 70px);
    line-height: 65px;
    letter-spacing: -.05em;
    white-space: nowrap;
}
.s5-desc {
    margin: 0 0 19px 36px;
    color: rgba(255, 255, 255);
    line-height: 20px;
    font-size: 13px;
    text-transform: uppercase;
    font-family: 'IBM Plex Mono', monospace !important;
    letter-spacing: .04em;
    white-space: normal;
    max-width: 340px;
}
.s5-copy[data-i="1"] .s5-desc{max-width:330px}
.s5-copy[data-i="2"] .s5-desc{max-width:380px}
.s5-copy[data-i="3"] .s5-desc{max-width:330px}
.s5-cta{
  margin-left:36px;
  display:inline-flex;align-items:center;justify-content:space-between;
  width:139px;padding:7px 12px 7px 16px;background:#fff;color:#000;
  border-radius:2px;text-decoration:none;font-family:'IBM Plex Mono',monospace;
  font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:-.03em;flex-shrink:0;
	border:1px solid #fff;
}
.s5-ctaDot{width:5px;height:5px;background:#000;display:inline-block;flex-shrink:0}

@media(max-width:1024px){
  .s5-copy[data-i="0"]{left:10%;width:45vw}
  .s5-copy[data-i="1"]{left:30%;width:45vw}
  .s5-copy[data-i="2"]{left:44%;width:50vw}
  .s5-copy[data-i="3"]{left:58%;right:5%}
  .s5-title{font-size:clamp(38px,7vw,64px)}
}




@media(max-width:767px){
.s7-header {
    margin-bottom: 40px !important;
} 
	
	#section5{height:100svh;min-height:620px;touch-action:pan-y;}
	
  /* Mobile = vertical timeline, same design as screenshots */
  .s5-railWrap{
    top:0;bottom:0;left:0;right:auto;
    width:72px;height:100%;
    transform:none;overflow:visible;
  }
  .s5-rail{
    left:32px;right:auto;top:0;bottom:0;
    width:1px;height:auto;
    transform:none;
    background:rgba(255,255,255,.28);
  }
  .s5-fill{
    left:32px;top:0;
    width:1px!important;height:0;
    transform:none;
    transition:height 600ms cubic-bezier(.2,.8,.2,1);
  }
  .s5-dot{
    left:32px!important;
    top:20%;
    transform:translate(-50%,-50%);
    transition:top 520ms cubic-bezier(.2,.8,.2,1),width .25s,height .25s,background .25s,border .25s,transform .25s;
  }
  .s5-dot.is-active{
    width:28px;height:28px;
    transform:translate(-50%,-50%);
  }

  .s5-label{
    left:88px!important;
    top:20%;
    width:250px;height:auto;
    transform:translateY(-50%);
    grid-template-columns:24px max-content;
    column-gap:10px;
    font-size:25px;
    line-height:1.05;
    letter-spacing:-.05em;
    transition:top 520ms cubic-bezier(.2,.8,.2,1),opacity .25s ease;
  }
  .s5-num{font-size:13px;line-height:1.05;width:24px}
  .s5-smtext{min-width:170px;overflow:visible}

  .s5-copy{
    left:88px!important;
    right:16px!important;
    width:auto!important;
    max-width:none!important;
    transform:translateY(8px);
  }
  .s5-copy[data-i="0"]{top:22%!important}
  .s5-copy[data-i="1"]{top:25%!important}
  .s5-copy[data-i="2"]{top:36%!important}
  .s5-copy[data-i="3"]{top:39%!important}

  .s5-copy::before{
    top:.34em;
    font-size:11px;
  }
  .s5-title{
    margin:0 0 18px 36px;
    font-size:clamp(46px,11vw,66px);
    line-height:47px;
    letter-spacing:-0.05em;
  }
  .s5-desc{
    margin:0 0 18px 36px;
    max-width:310px!important;
    font-size:12px;
    line-height:1.28;
    letter-spacing:.035em;
  }
  .s5-cta{
    margin-left:36px;
    width:145px;
    padding:8px 12px 8px 15px;
  }
}

@media(max-width:390px){
  .s5-label{left:84px!important;font-size:23px}
  .s5-copy{left:84px!important;right:12px!important}
  .s5-title{font-size:45px}
  .s5-desc{max-width:280px!important;font-size:11.5px}
}

/* =========================================================
   11. SECTION 6 — GLOBAL PRESENCE
   ========================================================= */
.s6-marker{
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
}

.s6-right{
  position: relative;
  font-family: "Inter", system-ui, sans-serif;
}
#section6 .text-xs{
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.28em;
  font-size: 11px;
}

#section6 .s6-left{
  position: relative;
  width: 100%;
  --x1: 15%;
  --x2: 44%;
  --x3: 72%;
  --h1: 34%;
  --h2: 80%;
  --h3: 60%;
  --s6-left-offset: 40px;
}

#section6 .s6-photo{
  position: relative;
  width: 100%;
  aspect-ratio: 696 / 472;
  overflow: hidden;
  border-radius: 2px;
}

#section6 .s6-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#section6 .s6-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#section6 .s6-ml{
  position: absolute;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.6);
}

#section6 .s6-ml1{ left: var(--x1); height: var(--h1); }
#section6 .s6-ml2{ left: var(--x2); height: var(--h2); }
#section6 .s6-ml3{ left: var(--x3); height: var(--h3); }

#section6 .s6-sq{
  width: 21px;
  height: 21px;
  border: 1px solid rgba(255,255,255,0.5);
  position: relative;
  flex-shrink: 0;
}

#section6 .s6-sq::after{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 5px;
  height: 5px;
  background: rgba(255,255,255,1);
}

#section6 .s6-depth{
  position: absolute;
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  letter-spacing: .10em;
  line-height: 1.2;
  white-space: nowrap;
}

#section6 .s6-d1{ left: calc(var(--x1) - 10px); top: calc(100% - var(--h1) - 22px); }
#section6 .s6-d2{ left: calc(var(--x2) - 10px); top: calc(100% - var(--h2) - 22px); }
#section6 .s6-d3{ left: calc(var(--x3) - 10px); top: calc(100% - var(--h3) - 22px); }

#section6 .s6-dtxt{
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  font-family: "IBM Plex Mono", monospace;
	letter-spacing: normal;
}


#section6 .s6-regions{
  position: relative;
  width: 100%;
/*   font-size: 11px; */
  text-transform: uppercase;
  font-weight: 500;
  font-family: "IBM Plex Mono", monospace;
/*   letter-spacing: .08em; */
}

#section6 .s6-regions span{
  position: absolute;
  top: 10px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
}

#section6 .s6-regions .r1{ left: calc(var(--x1) + 15px); }
#section6 .s6-regions .r2{ left: calc(var(--x2) + 15px); }
#section6 .s6-regions .r3{ left: calc(var(--x3) + 15px); }

#section6 .s6-below{
  position: relative;
  width: 100%;
  height: 240px;
  display: block !important;
  overflow: visible;
}

#section6 .s6-vline{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  height: 240px;
  background: #d9d9d9;
  pointer-events: none;
  display: block !important;
  z-index: 2;
}

#section6 .s6-vl1{ left: var(--x1); }
#section6 .s6-vl2{ left: var(--x2); }
#section6 .s6-vl3{ left: var(--x3); }

#section6 .s6-tick{
  position: absolute;
  top: calc(100px - -10px);
  width: 1px;
  height: 21px;
  background: rgba(0,0,0);
  z-index: 3;
  pointer-events: none;
  display: block !important;
}

#section6 .s6-tick.t1{ left: var(--x1); }
#section6 .s6-tick.t2{ left: var(--x2); }
#section6 .s6-tick.t3{ left: var(--x3); }

#section6 .s6-tick.tf1{ left: 0%; }
#section6 .s6-tick.tf4{ left: 29%; }
#section6 .s6-tick.tf7{ left: 57%; }
#section6 .s6-tick.tf11{ left: 88%; }

#section6 .s6-tick.tv1{ left: calc(var(--s6-left-offset, 40px) + 37vw); }
#section6 .s6-tick.tv2{ left: calc(var(--s6-left-offset, 40px) + 43vw); }
#section6 .s6-tick.tv3{ left: calc(var(--s6-left-offset, 40px) + 49vw); }
#section6 .s6-tick.tv4{ left: calc(var(--s6-left-offset, 40px) + 55vw); }
#section6 .s6-tick.tv5{ left: calc(var(--s6-left-offset, 40px) + 61vw); }
#section6 .s6-tick.tv6{ left: calc(var(--s6-left-offset, 40px) + 67vw); }
#section6 .s6-tick.tv7{ left: calc(var(--s6-left-offset, 40px) + 73vw); }
#section6 .s6-tick.tv8{ left: calc(var(--s6-left-offset, 40px) + 79vw); }
#section6 .s6-tick.tv9{ left: calc(var(--s6-left-offset, 40px) + 85vw); }
#section6 .s6-tick.tv10{ left: calc(var(--s6-left-offset, 40px) + 91vw); }
#section6 .s6-tick.tv11{ left: calc(var(--s6-left-offset, 40px) + 97vw); }

#section6 .s6-global-ticks,
#section6 .s6-tick-line,
#section6 .s6-tickbar,
#section6 .s6-regions::after{
  display: none !important;
}

.s6-word{
  opacity: 0;
  transform: translateY(20px);
}

/* @media (min-width: 1280px){
  .s6-title{
    font-size: 56px;
  }
}
 */
/* =========================================================
   12. SECTION 7
   ========================================================= */
#section7{
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.s7{
  background: #E1E4EC80;
  color: #000;
}

.s7-inner{
  max-width: 1400px;
  margin: 0 auto;
}

.s7-header{
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 80px;
}

.s7-marker{
  display: flex;
  gap: 20px;
  align-items: center;
}

.s7-dot{
  width: 7px;
  height: 7px;
  background: #000;
}

.s7-num{
  font-size: 13px;
  opacity: 1;
  color: #000;
  font-family: "IBM Plex Mono", monospace;
}
.s7-partners-label{
  font-size: 13px;
  color: #000;
  font-weight: 500;
  font-family: "IBM Plex Mono", monospace;
  margin-bottom: 10px;
}

.s7-carousel{
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}

.s7-track{
  display: flex;
  gap: 24px;
  will-change: transform;
}

.s-inner{
  min-width: 335px;
  height: 335px;
  margin-bottom: 10px;
  background: #FEFEFE;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius:2px;
}

.s7-card img{
  max-width: 120px;
  max-height: 80px;
  object-fit: contain;
}

.s7-card span{
  margin-top: 20px;
  font-size: 13px;
  letter-spacing: inherit;
  opacity: 1;
  color: #00000080;
  font-weight: 500;
  font-family: "IBM Plex Mono", monospace;
}

.s7-copy{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1200px;
  margin-top: 50px;
}
.s7-copy p{
	color:rgb(0 0 0 / 60%);
}

/* =========================================================
   15. RESPONSIVE
   ========================================================= */
@media (max-width: 1023px){
  .s4-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* @media (min-width: 1201px) and (max-width: 1900px){
  #section4 .s4-cardTitleRow .s4-line{
    height: clamp(33px, 3.9vh, 80px) !important;
  }
#section4 .s4-card {
    gap: 0;
}
#section4  .s4-cardTop {
    margin-bottom: 16px;
}	
  .s4-grid .s4-cardBody{
    padding-top: 0px;
  }

  .s4-cardBody .s4-cardTitle{
    font-size: 24px;
    line-height: 26px;
  }

  .s4-card .s4-imageWrap{
    height: 320px !important;
    aspect-ratio: unset !important;
  }

  .s4-cardBody .s4-cardTitleRow{
    margin-bottom: 5px;
  }
}
 */
.s5-cta:hover {
  transition:all 0.5s;
}
.s5-cta:hover {
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
}

.s5-cta:hover .s5-ctaDot {
    background: #fff !important;
}


@media (min-width: 1201px) and (max-width: 1500px){
.s5-copyWrap .s5-title{
    font-size: 50px;
    line-height: 50px;
    margin: 0 0 20px 0;
}
/* #section4 .s4-cardTitleRow{
    padding-left: 50px;
}
#section4 .s4-cardText{
    text-indent: 50px;
}	 */
.s8-contact .s8-contactList{
    gap: 3px;
}
.s7-inner .s7-copy{
    margin-top: 25px;
}
#section7 .s7-header{
    margin-bottom: 30px;
}
.s5-railWrap .s5-label{
    font-size: 15px;
    line-height: 20px;
  }
}

@media (max-width: 1023px){
  .overlay--s1 .frame--left{ left: 20%; top: 22%; --fw: 45vw; --fh: 240px; }
	.overlay--s1 .m1{ left: 10%; top: 52%; --vh: 26vh; }
  .overlay--s1 .m2{ left: 78%; top: 40%; }

   .overlay--s2 .frame--right{ left: 50%; top: 18%; --fw: 45vw; }
  .overlay--s2 .d1{ left: 6%; top: 34%; --dw: 52vw; --dh: 28vh; width: 504px; height: 331px; }

  .overlay--s3 .h1{ left: 10%; top: 26%; --hw: 34vw; height: 34vh; }
  .overlay--s3 .h2{ right: 6% !important; top: 62% !important; width: 170px; }

  .overlay--s3 .frame--mid{
    left: 50%;
    top: 18%;
    --fw: 45vw;
    --fh: 310px;
    transform: none;
  }

  .overlay--s3 .h1{
    left: 10%;
    top: 26%;
    --hw: 34vw;
    height: 34vh;
  }

  .overlay--s3 .h2{
    right: 6% !important;
    top: 62% !important;
    width: 150px;
    height: 40px;
  }

  .overlay--s3 .h2 .line--h{
    width: 148px !important;
  }

.overlay--s4 .frame--left {
    left: 12%;
    top: 22%;
    --fw: 280px;
    --fh: 310px;
}	
.overlay--s4 .h3{ left: 80%; top: 60%; --hw: 30vw; }
.overlay--s5 .frame--center{ top: 20%; --fw: 45vw; }

.s5-copyWrap{ left: 7%; top: 64%; }
.s5-label{ font-size: 14px; }
	
}

@media (min-width: 768px) and (max-width: 1200px){
#section5 .s5-copy[data-i="0"] {
   left: 7% !important;
}
#section5  .s5-copy[data-i="2"] {
   left: 48%!important;
}
#section5 .s5-copy[data-i="3"] {
   left: 64%;
   right: 5%;
}	
#section5  .s5-title {
   font-size: clamp(38px, 5vw, 64px);
   line-height: 42px;
   margin: 0 0 20px 36px;
}
.s5-copy[data-i="0"] .s5-desc,.s5-copy[data-i="1"] .s5-desc,.s5-copy[data-i="2"] .s5-desc,.s5-copy[data-i="3"] .s5-desc {
    max-width: 245px;
    font-size: 11px;
    left: 15px;
	line-height: 18px;
}	
 #section5 .s5-smtext {
    line-height: 22px;
    font-size: 20px;
}	
 #section5 .s5-label{
    column-gap: 0px;		
}
#section6 .s6-dtxt {
    font-size: 11px;
}
section#section4, section#section7, section#section8 {
    padding: 200px 20px 100px !important;
}	
}
@media (min-width: 1024px) and (max-width: 1200px){
#section8 .s8-form {
        max-width: 500px;
    }
	#section3 .s3-measure {
    left: -14px;
}
section#section3 {
    height: auto;
}
section#section4 .s4-head {
    padding-left: 0;
    padding-right: 0;
}	
#section4 .s4-cardTitleRow,
#section4.s4-cardText {
    padding-left: 45px;
}
#section4 .s4-cardTitle {
    font-size: 20px;
    line-height: 22px;
}
body #section4 .s4-cardBody {
    padding-top: 20px;
}
#section4 .s4-cardTitleRow .s4-line {
    height: clamp(68px, 6.5vh, 80px);
}	
		
.hero-slide .overlay--s2 .frame--right {
    --fw: 300px;
}
.hero-slide .overlay--s3 .h1 {
    left: 25%;
}
.hero-slide .overlay--s3 .frame--mid {
    left: 40%;
}
.hero-slide .overlay--s3 .frame--mid,
.hero-slide .overlay--s4 .frame--left,	
.hero-slide .overlay--s8 .frame--center,
.hero-slide .overlay--s9 .frame--right,
.hero-slide .overlay--s5 .frame--left,
.hero-slide .overlay--s7 .frame--right,
.hero-slide .overlay--s6 .frame--right{
    --fw: 300px;
	--fh: 270px;
}	
.hero-slide .overlay--s5 .m1 {
    top: 40.5% !important;
}	
.hero-slide .overlay--s6 .frame--right {
    left: 50%;
}	
.hero-slide .overlay--s9 .frame--right,.hero-slide .overlay--s7 .frame--right {
    right: 17%;
    top: 28%;
}	
 .overlay--s5 .frame--center{
	  top: 20%; --fw: 45vw; 
}
section#section6{
    padding: 100px 16px 0 !important;
}
}
@media (min-width: 1201px) and (max-width: 1400px){
.overlay--s3 .frame--mid {
    left: 50%;
    --fw: 380px;
}
#section3 .s3-measure {
    left: -15px;
}
}


@media (max-width: 640px){
  .frame{ --fw: 63vw !important; --fh: 262px !important; }

  .overlay--s2 .d1,
  .overlay--s3 .h2,
  .overlay--s1 .m2{
    display:none !important;
  }
  .s4-grid{
    grid-template-columns: 1fr;
  }
}


@media (min-width: 641px) and (max-width: 767px) {
    .hero-slide .overlay--s1 .frame,
	.hero-slide .overlay--s2 .frame,
	.hero-slide .overlay--s3 .frame,
	.hero-slide .overlay--s4 .frame,
	.hero-slide .overlay--s5 .frame,
	.hero-slide .overlay--s6 .frame,
	.hero-slide .overlay--s7 .frame,
	.hero-slide .overlay--s8 .frame,
	.hero-slide .overlay--s9 .frame{		
        --fw: 40vw !important;
}
    .hero-slide .overlay--s2 .frame {
        left: 30% !important;
        --fw: 40vw!important;
    }
.overlay--s7 .m-h, .overlay--s9 .m-h,
.overlay--s7 .m-v, .overlay--s9 .m-v{
    display: none;
}	
.hero-slide  .overlay--s2 .d1 {
        left: 6% !important;
        top: 36% !important;
        --dw: 52vw !important;
        --dh: 33vh !important;
        width: 301px;
        height: 208px !important;
    }	
.hero-slide .overlay--s3 .h2 {
        top: 50% !important;
    }	
}

@media (max-width: 767px){
.hero-slide .hero-overlay .frame{
    left: 0;
     top: 22%;
    --fw: 30vw;
    --fh: 240px;
    margin: auto;
    right: 0;
  }
  .hero-overlay .frame__title,
    .hero-overlay .frame__tag{
    font-size: 10px !important;
  }
 .hero-slide  .overlay--s5 .frame--left{
	   top: 22% !important;
      left: 0%!important;
     right: 0!important;
     margin: auto!important;
  }

  /* Slide 7 mobile - energy */
.hero-slide   .overlay--s6 .frame--right{
	   top: 22% !important;
    left: 0%!important;
     right: 0!important;
     margin: auto!important;
  }

  /* Slide 8 mobile - fjord */
.hero-slide   .overlay--s7 .frame--right{
	   top: 22% !important;
    left: 0%!important;
     right: 0!important;
     margin: auto!important;
  }

  /* Hide measure lines on mobile */
 .hero-slide  .overlay--s5 .m,
.hero-slide   .overlay--s6 .m,
.hero-slide  .hero-slider  .overlay--s7 .m{
    display: none;
  }
	
.hero-slide  .overlay--s1 .frame--left {
    left: 0;
        top: 22%!important;
/*         --fw: 64vw!important; */
        --fh: 240px!important;
        margin: auto!important;
        right: 0!important;
 }
	
.hero-slide  .overlay--s2 .frame--right,
.hero-slide  .overlay--s3 .frame--mid,
.hero-slide .overlay--s4 .frame--left,
.hero-slide .overlay--s5 .frame--center,
.hero-slide .overlay--s8 .frame--center{
        left: 0;
        top: 22%;
        right: 0;
        margin: auto;
}	
.hero-slide  .overlay--s3 .h1,
.hero-slide  .m.m--v.m1.a-measure,
.hero-slide  .overlay--s4 .h3, 
.hero-slide  .overlay--s5 .m5,
.hero-slide  .overlay--s5 .h5,
.hero-slide  .overlay--s8 .h8,
.hero-slide  .overlay--s8 .m8,
.hero-slide  .overlay--s9 .m-h,
.hero-slide  .overlay--s9 .m-v{
    display: none;
}	
	
	
body .s4-cardTitle {
    font-size: 22px;
    line-height: 25px;
}
.hero-headline {
    left: 20px!important;
    bottom: 160px!important;
}	
.__web-inspector-hide-shortcut__, .__web-inspector-hide-shortcut__ * {
    visibility: visible !important;
}	
.quote-widget {
    position: absolute;
    right: 0;
    bottom: 22px;
    width: 90%;
    left: 0;
    margin: auto;
    padding-top: 0 !important;
}	
body .custom-quote-box{
	width:100% !important;	
}
.row {
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    align-items: anchor-center;
}	
.s4-cardTop {
    gap: 12px;
}
body .quote-title {
    font-size: 30px;
    line-height: 32px;
}	
body .custom-title {
    font-size: 13px !important;
    line-height: 15px !important;
}		
#section3{
  --s3-measure-left: 0px;
}	
#section3 .s3-measure-square::after {
    width: var(--s3-inner-dot, 5px);
    height: var(--s3-inner-dot, 5px);
}	
section#section2 .s2-title{
	font-size: 27px;
	line-height: 32px;
	text-indent: 30px;
}
section#section2  .s6-tagline .s6-word {
    font-size: 17px;
    line-height: 20px;
}	
body section#section4,
body section#section6,
body section#section7{
    padding-top: 80px;
	padding-bottom:80px;
}
#section6 .s6-photo {
    aspect-ratio: auto;
}
#section6 .s6-regions,
#section6 .s6-below,
#section6 .s6-overlay {
    display: none!important;
}
.s4-imageWrap {
    height: 411px;
	width:fit-content;
}	
/* #section5 .s5-title {
    margin: 0 0 20px 0;
    font-size: 45px;
    line-height: 47px;
}	 */
.s-inner{
  min-width: 172px;
  height: 172px;
}	
.s7-track{
  gap: 14px;
}	
.s7-marker{
  gap: 12px;
}
#section7 .s7-copy {
    grid-template-columns: 1fr;
    gap: 30px;
}	
body .s4-card {
    gap: 0px;
}
body  .s4-grid {
    gap: clamp(40px, 1vw, 34px) !important;
}	
.s8-imgCard, .s8-contact {
    margin-left: 0;
    max-width: 100%;
}		
.s8-inner{
    grid-template-columns: 1fr;
    gap: 50px;
}	
}
/* Tablet only (768px – 1023px) */
@media only screen 
and (max-width: 991px) 
and (orientation: landscape)
and (max-height: 600px) {
	.headline {
        font-size: 35px!important;
        line-height: 38px!important;
    }
 .hero-slide .overlay--s2 .d1 {
        left: 18%!important;
    }	
	.hero-slide .overlay--s1 .frame--left {
      left: 40%!important;
     top: 33%!important;
     --fw: 34vw!important;
      --fh:150px!important;
}
.hero-slide  .overlay--s1 .m2 {
        left: 26% !important;
        top: 35% !important;
    }	
.hero-slide .overlay--s1 .m1 {
        left: 10%!important;
        top: 43%!important;
        --vh: 21vh!important;
    }	
.hero-slide .overlay--s2 .d1 {
        width: 150px!important;
        height: 150px!important;
    }	
.hero-slide .overlay--s2 .frame--right {
	     top:28% !important;
        --fw: 34vw!important;
        --fh: 150px!important;
}	
.hero-slide .overlay--s3 .frame--mid {
        left: 36%!important;
        top: 28%!important;
        --fw: 34vw!important;
        --fh: 150px!important;
}  
.hero-slide .overlay--s4 .h3 {
        left: 66%!important;
        --hw: 25vw!important;
    }	
.hero-slide .overlay--s4 .frame--left {
        left: 20% !important;
        top: 28% !important;
       --fw: 34vw!important;
        --fh: 140px!important;
 }	
.hero-slide .overlay--s5 .frame--left {
    left: 20%!important;
    top: 30%!important;
    --fw: 34vw!important;
    --fh: 150px!important;
}	
	
.hero-slide .overlay--s6 .frame--right {
    left: 60%!important;
    top: 28%!important;
    --fw: 34vw!important;
    --fh: 150px !important;
}
.hero-slide .overlay--s9 .frame--right {
    right: 11% !important;
}	
.overlay--s6 .m-v .line--v,
.overlay--s7 .m-v .line{
    height: 110px !important;
}
.overlay--s6 .m-v .pin,
.overlay--s7 .m-v .pin{
    top: 110px !important;
}
.overlay--s3 .h1 {
      top: 30% !important;
}
.overlay--s7 .m-v {
    top: 35%!important;
}	
.overlay--s6 .m-v .label,
.overlay--s7 .m-v .label{
    top: 96px !important;
}	
	
.hero-slide .overlay--s7 .frame--right,
.hero-slide	.overlay--s9 .frame--right{
    top: 42%!important;
    --fw: 34vw !important;
    --fh: 130px !important;
}
.hero-slide .overlay--s8 .frame--center{
    --fw: 34vw!important;
    --fh: 150px!important;
}	
.hero-slide .overlay--s6 .m-h,
.hero-slide	.overlay--s6 .m-v,
.hero-slide .overlay--s6 .m-h{
    top: 39%!important;
}
.hero-slide	.overlay--s7 .m-h{
	    top: 35%!important;	
	}	
.hero-slide .overlay--s7 .m-v .line,
.hero-slide .overlay--s9 .m-v .line{
  height: 100px !important;
}
.hero-slide .overlay--s7 .m-v .pin,
.hero-slide .overlay--s9 .m-v .pin {
  background: #fff!important;
  top: 110px;
  left: -2px;
}
.hero-slide .overlay--s7 .m-v .label,
.hero-slide .overlay--s9 .m-v .label{
  top: 85px!important;
}
.hero-slide .overlay--s7 .m-v .pin,
.hero-slide .overlay--s9 .m-v .pin {
  background: #fff!important;
  top:100px !important;
}	
	
.s8-inner {
        width: calc(100% - 0px); /* slightly reduced padding */
        grid-template-columns: 1fr 1fr; /* keep 2 cols */
        gap: 40px; /* reduce spacing */
    }
	#hero .quote-widget{
		display:none !important;
	}	
/* #section5 .s5-title {
    margin: 0 0 15px 0;
    font-size: 45px;
    line-height: 48px;
} */
.s8-form .wpcf7-form .s8-field p {
    flex-direction: column;
}	
#section6 .s6-dtxt {
    font-size: 10px;
}
span.s6-tick {
    opacity: 0;
}	
section#section6,section#section7 {
    padding-top: 100px;
	padding-bottom:100px;
}	
#section3 {
    --s3-measure-left: -15px;
}	
section#section2 .s2-title{
     font-size: 35px;
    line-height: 38px;
	text-indent: 35px;
}	
body section#section4{
    padding: 80px 16px 40px;
}	
body .s4-card {
    gap: 0px;
}	
}
@media (min-width:1024px) and (max-width:1450px) {	
.s8-inner {
    gap: 20px;
}	
body .headline {
    font-size: 80px;
    line-height: 82px;
}	
}
@media (max-width: 980px){
.s8-imgCard,
.s8-contact{
    margin-left: 0;
/*     max-width: 520px; */
}
}




/*------------------------------------ Mobile/Tablet Responsive  ------------------------------------------*/
@media (max-width: 1023px){
.headline {
    font-size: 45px;
    line-height: 47px;
}
#section3, #section4{
    height: auto !important;
}
}
@media (min-width:768px) and (max-width:1023px) {
.overlay--s1 .m2 {
	left: 26% !important;
     top: 27% !important;
}
 .overlay--s1 .m1 {
       top: 29% !important;
}
.overlay--s1 .frame--left {
      left: 45%!important;
    }	
.overlay--s1 .frame--left {
    --fw: 40vw !important;
}
.overlay--s3 .h2 {
        top: 40% !important;
    }	
    .overlay--s3 .frame--mid {
		left: 24% !important;
	}	
.overlay--s5 .frame--left,.overlay--s6 .m-h {
    left: 10% !important;
}
.overlay--s6 .m-v {
    left: calc(10% + 230px / 2)!important;
}	
.overlay--s7 .frame--right,
.overlay--s8 .frame--center,
	.overlay--s9 .frame--right{
    --fw: 310px!important;
    --fh: 270px!important;
}
	.hero-slide .overlay--s1 .frame--left {
      left: 40%!important;
     top: 33%!important;
     --fw: 34vw!important;
      --fh:150px!important;
}
.hero-slide  .overlay--s1 .m2 {
        left: 26% !important;
        top: 35% !important;
    }	
.hero-slide .overlay--s1 .m1 {
        left: 10%!important;
        top: 43%!important;
        --vh: 21vh!important;
    }	
.hero-slide .overlay--s2 .d1 {
        width: 150px!important;
        height: 150px!important;
    }	
.hero-slide .overlay--s2 .frame--right {
	     top:28% !important;
        --fw: 34vw!important;
        --fh: 150px!important;
}	
.hero-slide .overlay--s3 .frame--mid {
        left: 36%!important;
        top: 28%!important;
        --fw: 34vw!important;
        --fh: 150px!important;
}  
.hero-slide .overlay--s4 .h3 {
        left: 66%!important;
        --hw: 25vw!important;
    }	
.hero-slide .overlay--s4 .frame--left {
        left: 20% !important;
        top: 28% !important;
       --fw: 34vw!important;
        --fh: 140px!important;
 }	
.hero-slide .overlay--s5 .frame--left {
/*     left: 35%!important; */
    top: 30%!important;
    --fw: 34vw!important;
    --fh: 150px!important;
}	
.hero-slide .overlay--s6 .frame--right {
    left: 60%!important;
    top: 28%!important;
    --fw: 34vw!important;
    --fh: 150px !important;
}
.hero-slide .overlay--s7 .frame--right,
.hero-slide	.overlay--s9 .frame--right{
    top: 42%!important;
    --fw: 34vw !important;
    --fh: 130px !important;
}
.hero-slide .overlay--s8 .frame--center{
    --fw: 34vw!important;
    --fh: 150px!important;
}		
.hero-slide .overlay--s9 .frame--right {
    right: 11% !important;
}	
.s3-img{
	height:350px!important;	
}	
#section4 .s4-head {
    padding-left: 0;
    padding-right: 0;
}	
#section4 .s4-cardTitleRow .s4-line {
   height: clamp(78px, 6.5vh, 80px);
}	
section#section6,section#section4, section#section7, section#section8 {
    padding-top: 100px !important;
	padding-bottom:100px!important;
}
section#section7 .s7-header {
    margin-bottom: 40px;
}	
section#section7 .s7-marker {
    gap: 0.75rem;
}
section#section8 .s8-inner {
    width: min(1240px, calc(100% - 0px));
    gap: 20px;
}
    body.home .s8-title {
        margin: -25px 0 0 60px !important;
    }
body .s8-title {
        margin: -20px 0 0 71px !important;
    }
section#section2  .s2-title {
    font-size: 35px;
    line-height: 38px;
    text-indent: 50px;
}	
body #section3 {
    --s3-measure-left: -15px;
}	
#section4  .s4-imageWrap {
    height: 400px;
}
#section6 .s6-tick.tv1,
#section6 .s6-tick.tf11,
#section6 .s6-tick.tf7,
#section6 .s6-tick.tv2,
#section6 .s6-tick.tv4,
#section6 .s6-tick.tv5,
#section6 .s6-tick.tv6,
#section6 .s6-tick.tv7,
#section6 .s6-tick.tv9{
    left: 0 !important;
}	
	
.s8-kicker,.s4-cardTop{
  gap: 0.75rem;
}
.s8-footer {
    align-items: flex-start;
    flex-direction: column;
}	
/* .s8-field {
    padding: 30px 0 15px !important;
} */
.s8-form .s8-label {
    min-width: 100px;
}	
/* .s8-title {
    margin: -25px 0 0 100px !important;
}	 */
#section8 .s8-form {
    padding: 20px 0 0px 0!important;
	max-width: 500px;
}	
}



/*Register form */
@media (max-width: 767px) {
#section3 .s3-measure {
    left: 0 !important;
}
#section4 .s4-cardTitleRow .s4-line {
    height: clamp(50px, 6.5vh, 80px);
}		
.s4-cardBody {
    padding-top: 14px;
}	
.s4-cardText {
    text-indent: 30px;
    padding-left: 20px;
	max-width: 400px;
}
#section4 .s4-cardTitleRow {
    padding-left: 50px;
	margin-bottom: 10px;
}	
section#section8 .s8-form .s8-label {
    width: 250px;
}	
	
section#section8.get-quote {
    padding-top: 14rem !important;
}	
    #section8 .s8-inner {
		width: min(1240px, calc(100% - 0px));
        grid-template-columns: 1fr;
        gap: 32px;
        padding-right: 0;
    }	
 #section8  .s8-field {
    padding: 35px 0 10px;
}
#section8 .s8-left {
        padding-left: 0;
        width: 100%;
    }
	#section8 .s8-kicker {
    gap: 12px;
}
   #section8  .s8-social {
    justify-content: space-between;
    width: 100%;
}
    #section8 .s8-right {
        width: 100%;
    }
.s8-footer {
    align-items: flex-start;
    gap: 28px;
    flex-direction: column;
	    margin-top: 50px;
}
    #section8 .s8-header {
        gap: 25px !important;
    }

    #section8 .s8-title {
        font-size: 37px !important;
        line-height: 35px !important;
        max-width: 220px;
		margin: -25px 0 0 80px;
    }

    #section8 .s8-form {
        max-width: 100%;
        width: 100%;
		 padding: 0;
    }

    #section8 .s8-form .wpcf7-form {
        width: 100%;
    }

    #section8 .s8-form input[type="text"],
    #section8 .s8-form input[type="email"],
    #section8 .s8-form input[type="tel"],
    #section8 .s8-form select,
    #section8 .s8-form textarea {
        width: 100%;
        font-size: 13px;
        line-height: 18px;
        padding: 10px 0;
        border: 0;
        border-bottom: 1px solid #A9A9A9;
        border-radius: 0;
        background: transparent;
    }

    #section8 .s8-field.s8-field-app textarea {
        height: 40px;
    }

    #section8 .s8-form .col-2,
    #section8 .s8-form .two-col,
    #section8 .s8-form .form-row,
    #section8 .s8-form .grid-2 {
        display: block !important;
        grid-template-columns: 1fr !important;
    }

    .s8-checkGroup .wpcf7-form-control {
        gap: 8px;
    }

    .s8-checkGroup .wpcf7-list-item-label {
        padding: 8px 10px;
        font-size: 10px;
        line-height: 1.1;
    }
    #section8 .s8-form input[type="submit"],
    #section8 .s8-form button,
    #section8 .s8-form .wpcf7-submit {
        min-height: 32px;
        padding: 0 14px;
        font-size: 10px;
        letter-spacing: 0.08em;
    }
    #section8 .s8-imgCard {
        width: auto;
        max-width: 100%;
        margin-top: 6px;
    }
    #section8 .s8-img {
        width: 100%;
        height: 485px;
        object-fit: cover;
    }
}	










/* =========================================================
   05 HERO — WORD / FRAME / MEASURE ANIMATION HELPERS
   ========================================================= */


/* slide 5 */
.overlay--s5 .frame--left{
  left:20%;
  top: 20%;
  --fw: 395px;
  --fh: 315px;
  border-radius: 2px;
}

.overlay--s5 .m1{
  left: 59.8%;
  top: 50.5%;
  --vh: 28.1vh;
}

.overlay--s5 .m1 .pin{
  left: -2px;
  top: -6px;
}

.overlay--s5 .m1 .label{
  left: 16px;
  top: -9px;
}

.overlay--s5 .m2{
    left: 72.2%;
    top: 40%;
  --vh: 4.75vh;
}

.overlay--s5 .m2 .pin{
  left: -14px;
  top: -19px;
}

.overlay--s5 .m2 .label{
  left: 22px;
  top: -17px;
}
.overlay--s5 .m1 .label,.overlay--s5 .m2 .label {
    margin-top: 0;
}




/* =========================================================
   06 HERO — WORD / FRAME / MEASURE ANIMATION HELPERS
   ========================================================= */

/* slide 6 - improved */
.overlay--s6 .frame--right{
  left: 43%;
  top: 18%;
  --fw: 390px;
  --fh: 310px;
  border-radius: 2px;
}

/* full measure group move down + slightly right */
.overlay--s6 .m-h{
  left:25%;
  top: 55.2%;
  width: 161px;
}

.overlay--s6 .m-h .line--h{
  width: 161px;
}

.overlay--s6 .m-h .label{
  left: 50%;
  top: -35px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 15px;
   letter-spacing:-0.05em;
}

/* bigger square boxes */
.overlay--s6 .m-h .pin{
  left: -16px;
  top: -16px;
  width: 32px;
  height: 32px;
}

.overlay--s6 .m-h .pin--end{
  left: auto;
  right: -16px;
  top: -16px;
}

/* vertical line should start from center of horizontal line */
.overlay--s6 .m-v{
  left: calc(25% + 230px / 2);
  top: 55.2%;
  --vh: 162px;
}

.overlay--s6 .m-v .line--v{
  height: 162px;
}

.overlay--s6 .m-v .pin{
  left: -3px;
  top: 162px;
}

.overlay--s6 .m-v .label{
  left: 16px;
  top: 145px;
  white-space: nowrap;
  font-size: 14px;
}

/* outer square */
.overlay--s6 .pin--outline{
  width: 29px;
  height: 29px;
  border: 1px solid rgba(255,255,255,0.5);
  position: absolute;
}

/* inner small square */
.overlay--s6 .pin--outline::after{
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  background: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* bottom dot (filled) */
.overlay--s6 .m-v .pin{
  width: 6px;
  height: 6px;
  background: #fff;
}






/* =========================================================
   07 and 09. HERO — WORD / FRAME / MEASURE ANIMATION HELPERS
   ========================================================= */

/* FRAME - lower right */
.overlay--s7 .frame--right{
  right: 8%;
  top: 34%;
  --fw: 390px;
  --fh: 310px;
}

/* HORIZONTAL 3KM */
.overlay--s7 .m-h,
.overlay--s9 .m-h{
  left: 9%;
  top: 42%;
  width: 252px;
}

.overlay--s7 .m-h .line--h,
.overlay--s9 .m-h .line--h{
  width: 252px;
}

.overlay--s7 .m-h .label,
.overlay--s9 .m-h .label{
  left: 50%;
  top: -35px;
  transform: translateX(-50%);
}

/* boxes */
.overlay--s7 .m-h .pin,
.overlay--s9 .m-h .pin{
  left: -15px;
  top: -15px;
  width: 29px;
  height: 29px;
  border: 1px solid rgba(255,255,255,.5);
}

.overlay--s7 .m-h .pin--end,
.overlay--s9 .m-h .pin--end {
  left: auto;
  right: -15px;
}

/* inner square */
.overlay--s7 .pin--outline::after,
.overlay--s9 .pin--outline::after{
  content:'';
  position:absolute;
  width:5px;
  height:5px;
  background:#fff;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

/* VERTICAL DROP */
.overlay--s7 .m-v,
.overlay--s9 .m-v{
  left: calc(12% + 150px);
  top: 42%;
}

.overlay--s7 .m-v .line,
.overlay--s9 .m-v .line{
  height: 162px;
}

.overlay--s7 .m-v .pin,
.overlay--s9 .m-v .pin {
  width: 5px;
  height: 5px;
  background: #fff;
  top: 162px;
  left: -2px;
}

.overlay--s7 .m-v .label{
  top: 148px;
  left: 12px;
}
.overlay--s9 .m-v .label{
  top: 150px;
  left: 12px;
}



/* ==========================
   HERO SLIDE 8 - FINAL CHECKED
========================== */

/* Slide 5 positions (center frame + left measures) */
.overlay--s8 .frame--center{ left: 45%; top: 35%; --fw: 489px; --fh: 358px; transform: translateX(-50%); }
.overlay--s8 .m8{ left: 10%; top: 37%; --vh: 38vh; }
.overlay--s8 .h8{ left: 10%; top: 44%; --hw: 18vw; }

.overlay--s8 .m8 .pin {
    left: -2px;
}
.m.m--h.h8 {
    position: relative;
}
.overlay--s8 .h8 {
    position: absolute;
    width: var(--hw, 260px) !important;
    height: 29px;
}
.overlay--s8 .m8 span.label {
    top: -15px;
}
.overlay--s8 .h8 .pin--outline:not(.pin--end) {
    display: none !important;
}
.m.m--h.h8:before {
    content: "";
    width: 1px;
    height: 29px;
    background: rgb(255 255 255 / 50%);
    position: absolute;
    transform: rotate(45deg);
    top: 0px;
}
.overlay--s8 .h8 .pin--outline:not(.pin--end) {
    display: none !important;
}
.overlay--s8 .h8 .line--h {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 156px !important;
    height: 1px !important;
    background: rgba(255, 255, 255, .45) !important;
    transform: translateY(-0.5px) !important;
}

.overlay--s8 .h8 .pin--outline.pin--end {
    position: absolute !important;
    left: 156px !important;
    top: 50% !important;
    right: auto !important;
    width: 29px !important;
    height: 29px !important;
    border: 1px solid rgba(255, 255, 255, .45) !important;
    background: transparent !important;
    transform: translate(-50%, -50%) !important;
    opacity: 1 !important;
}
.overlay--s8 .h8 .pin--outline.pin--end::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    background: #fff;
    transform: translate(-50%, -50%);
}
.overlay--s8 .h8 .label {
    position: absolute !important;
    left: 160px !important;
    top: 50% !important;
    transform: translate(22px, -50%) !important;
    margin: 0 !important;
    font-family: "IBM Plex Mono", monospace;
    font-weight: 400;
    font-size: 15px;
    line-height: 15px;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    opacity: 1 !important;
}

/* Sandeep code mobile scroll */

/* ============================================================
   SECTION 5 — MOBILE ONLY  (v2 — stacked panels, NO sticky)
   REPLACE the previous .m5 block in home.css with this one.

   • 100% scoped to #section5-mobile + a <=767px media query.
   • No position:sticky, no overflow hacks → cannot be broken by
     any parent's overflow, on any browser (incl. older iOS).
   • Each slide is a real full-screen panel; you scroll through
     all four, then the next section flows in. Native scroll only.
   ============================================================ */

/* hidden everywhere by default — desktop never sees it */
#section5-mobile { display: none; }

@media (max-width: 767px) {

  /* show the mobile slider, hide the desktop pinned version */
  #section5-mobile { display: block; background: #000; }
  #section5        { display: none !important; }

  /* one full screen per slide */
  .m5-panel {
    position: relative;
    height: 100svh;
    min-height: 560px;
    overflow: hidden;
    color: #fff;
  }

  .m5-bg {
    position: absolute; inset: 0; z-index: 0;
    background-image: var(--bg);
    background-size: cover; background-position: center;
  }
  .m5-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.60));
  }

  .m5-content {
    position: relative; z-index: 2; height: 100%;
    display: flex; align-items: center; padding: 0 22px;
  }

  /* ---- vertical rail (independent, evenly spaced) ---- */
  .m5-rail { position: absolute; left: 22px; top: 0; bottom: 0; width: 16px; z-index: 3; }
  .m5-line, .m5-fill { position: absolute; left: 0; width: 1px; }
 .m5-line {
        top: 17%;
        height: 100%;
        background: rgba(255, 255, 255, .5);
    }
	
  .m5-fill { top: 24%; background: #fff; }                 /* height set inline per panel */
      .m5-dot {
        position: absolute;
        left: -2px;
        width: 5px;
        height: 5px;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, .55);
    }
.m5-dot.is-active {
        width: 5px;
        height: 5px;
        left: -2px;
        background: #fff;
        outline: 1.5px solid #fff;
        outline-offset: 6px;
    }

  /* ---- copy list ---- */
      .m5-list {
        position: relative;
        width: 100%;
        padding-left: 56px;
        list-style: none;
        margin: 0;
        top: 0px;
           display: flex;
        flex-direction: column;
        gap: 45px;
    }
    .m5-item {
        display: flex;
        position: relative;
        padding: 0px 0 10px 0;
        gap: 20px;
    }

  .m5-num {
    display: block; margin-bottom: 5px;
    font: 600 11px/1 'IBM Plex Mono', ui-monospace, monospace;
    letter-spacing: .5px; opacity: .5;
  }
  .m5-title {
          margin: 0;
        font: 400 22px / 1.05 'Inter', sans-serif;
        letter-spacing: -.05em;
        opacity: 1;
  }
.ms-div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}	
  .m5-item.is-active .m5-title { font-size: 40px; opacity: 1; }

  /* desc + CTA only on the active slide's matching item */
  .m5-desc, .m5-cta { display: none; }
      .m5-item.is-active .m5-desc {
        display: block;
        margin: 12px 0 0;
        max-width: 320px;
        font: 500 11px / 1.5 'IBM Plex Mono', ui-monospace, monospace;
        letter-spacing: .04em;
        text-transform: uppercase;
        font-family: 'IBM Plex Mono' !important;
    }
.m5-item.is-active .m5-cta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-top: 16px;
        background: #fff;
        color: #000;
        text-decoration: none;
        font: 600 12px / 1 'IBM Plex Mono', ui-monospace, monospace;
        letter-spacing: 1px;
        padding: 10px 16px;
        text-transform: uppercase;
        border-radius: 2px;
        min-width: 154px;
    }
  .m5-cta .m5-ctaDot { width: 6px; height: 6px; background: #000; display: inline-block; }
  .m5-cta .m5-arr   { margin-left:auto; }
}