/* =========================================================
   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);
}

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

/* body{
  overscroll-behavior-y: none;
}
 */
.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: 140px 16px 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: 40px;
  bottom: 40px;
}

.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; } }

/* =========================================================
   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: 43%; top: 20%; --fw: 390px; --fh: 310px; }
.overlay--s1 .m1{ left: 8%; top: 35%; --vh: 34vh; }
.overlay--s1 .m1 .pin{ left: -2px; top: -6px; }
.overlay--s1 .m2{ left: 20%; top: 25%; --vh: 9vh; }
.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: 7px;
  --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,.55);
  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) * 60%) !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;
}

.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;
}

/* slide 3 */
.overlay--s3 .frame--mid{
  left: 52%;
  top: 26%;
  --fw: 390px;
  --fh: 310px;
  transform: none;
}

/* keep original position values */
.overlay--s3 .h1{
  left: 35%;
  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: 172px;
  height: 40px;
}

.overlay--s3 .h2 .line--h{
  position:absolute;
  left: 0 !important;
  top: 20px !important;
  width: 170px !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: 56%; top: 52%; --hw: 17.1vw; }

.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: 7px !important;
  height: 7px !important;
  background: #fff !important;
  border-radius: 1px !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: 32px;
  bottom: 32px;
  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: -1px;
  bottom: 0;
  width: var(--s3-square, 20px);
  height: var(--s3-square, 20px);
  border: 1px solid rgba(255,255,255,1);
}

#section3 .s3-measure-square::after{
  content: "";
  position: absolute;
  width: var(--s3-inner-dot, 6px);
  height: var(--s3-inner-dot, 6px);
  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, 10px) + 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;
}

.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: 52%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: .95;
}

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

#section4 .s4-cardTitleRow{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  padding-left: 40px;
}

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

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

#section4 .s4-cardTitleRow .s4-line{
  position: absolute;
  left: 10px;
  bottom: calc(100% - 13px);
  width: 1px;
  height: clamp(40px, 6.5vh, 80px);
  background: #ADADAD;
  transform-origin: bottom;
  transform: scaleY(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: 40px;
}

/* =========================================================
   10. SECTION 5
   ========================================================= */
#section5{
  position: relative;
/*   overscroll-behavior: contain; */
}

html.snap-off-temp{
  scroll-snap-type: none !important;
}

body.s5-lock{
  scroll-snap-type: none !important;
}

#section5 .s5-bg,
#section5 .s5-bgA,
#section5 .s5-bgB{
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: opacity, transform;
}

.s5-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.s5-bgA,
.s5-bgB{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: opacity 450ms ease;
}

.s5-bgB{
  opacity: 0;
}

.s5-bgOverlay,
.s5-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.25), rgba(0,0,0,0));
}

.s5-railWrap{
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 80px;
  pointer-events: none;
}

.s5-rail{
  position: absolute;
  left: 0%;
  right: 0%;
  top: 53%;
  height: 1px;
  background: rgba(255,255,255,.35);
  transform: translateY(-50%);
  z-index: 1;
}

.s5-fill{
  position: absolute;
  left: 0%;
  top: 53%;
  height: 1px;
  background: rgb(255 255 255 / 50%);
  transform: translateY(-50%);
  z-index: 2;
  transition: width 600ms cubic-bezier(.2,.8,.2,1);
}

.s5-progress{
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 1px;
  background: #fff;
  transform-origin: left center;
  transform: translateY(-50%) scaleX(0);
  transition: transform 600ms cubic-bezier(.2,.8,.2,1);
}

.s5-dot{
  position: absolute;
  top: 53%;
  width: 5px;
  height: 5px;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
  cursor: pointer;
  will-change: transform;
  box-sizing: border-box;
  pointer-events: auto;
}

.s5-dot[data-i="0"]{ left: 8%; }
.s5-dot[data-i="1"]{ left: calc(8% + (84% / 3) * 1); }
.s5-dot[data-i="2"]{ left: calc(8% + (84% / 3) * 2); }
.s5-dot[data-i="3"]{ left: calc(8% + 84%); }

.s5-dot.is-active{
  background: transparent;
  padding: 8px !important;
  border: 1px solid #fff;
  transform: translateY(2px) scale(1.5);
  margin-top: -10px;
}

.s5-dot.is-active::after{
  content: " ";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 5px;
  height: 5px;
  background: #fff;
}

.s5-label{
  position: absolute;
  top: calc(50% + 20px);
  transform: translateX(-50%);
  color: rgba(255,255,255,1);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 29px;
  line-height: 35px;
  letter-spacing: -0.05em;
}

.s5-num{
  display: inline-block;
  width: 26px;
  color: rgba(255,255,255,.55);
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .22em;
}

.s5-l1{ left: 11.5%; }
.s5-l2{ left: 39.5%; }
.s5-l3{ left: 67.5%; }
.s5-l4{ left: 95.5%; }

.s5-copyWrap{
  position: absolute;
  bottom: 120px;
  transform: none;
}

.s5-kicker{
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .75;
}

.s5-title{
  margin: 0 0 30px 0;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 70px;
  line-height: 65px;
  letter-spacing: -0.05em;
  vertical-align: middle;
}

.s5-desc{
  max-width: 320px;
  margin-bottom: 18px;
  color: #fff;
  line-height: 1.55;
  font-size: 13px;
  text-transform: uppercase;
  font-family: "IBM Plex Mono", monospace;
}
.s5-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6.5px 23px;
    background: #fff;
    color: #000;
    border-radius: 2px;
    text-decoration: none;
    font-family: "IBM Plex Mono", monospace;
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: -0.03em;
}
.s5-ctaDot{
  width: 5px;
  height: 5px;
  border-radius: 0;
  background: #000;
  display: inline-block;
}
.s5-ctaArrow{
  margin-left: 10px;
  opacity: .8;
}

.s5-frame{
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.s5-content{
  position: relative;
  margin-top: 18px;
  max-width: 720px;
  min-height: 260px;
}

.s5-frame.is-active{
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#section5 .s5-dot[data-i="0"].is-active ~ .s5-l1 .s5-smtext,
#section5 .s5-dot[data-i="1"].is-active ~ .s5-l2 .s5-smtext,
#section5 .s5-dot[data-i="2"].is-active ~ .s5-l3 .s5-smtext,
#section5 .s5-dot[data-i="3"].is-active ~ .s5-l4 .s5-smtext{
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: .3s ease;
}

/* =========================================================
   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: 3px;
  height: 3px;
  background: rgba(255,255,255,0.8);
}

#section6 .s6-depth{
  position: absolute;
  display: inline-flex;
  align-items: flex-end;
  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;
}

#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: 198px;
  display: block !important;
  overflow: visible;
}

#section6 .s6-vline{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  height: 200px;
  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 - 7px);
  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: #f2f3f4;
  color: #000;
}

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

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

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

.s7-dot{
  width: 6px;
  height: 6px;
  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;
}

.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;
}

/* =========================================================
   13. SECTION 8
   ========================================================= */
#section8{
  position: relative;
  z-index: 2;
  background: #fff;
}

.s8{
  background: #fff;
  color: #0b0b0b;
}

.s8-inner{
  width: min(1240px, calc(100% - 80px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 70px;
  align-items: start;
}

.s8-kicker{
  display: inline-flex;
  align-items: center;
  gap: 20px;
}

.s8-kickerDot{
  width: 7px;
  height: 7px;
  background: #000;
  display: inline-block;
  border-radius: 0;
}

.s8-kickerNum{
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  font-weight: 500;
  opacity: 1;
}

.s8-title{
  margin: -25px 0 0 110px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 70px;
  line-height: 65px;
  letter-spacing: -0.05em;
}

.s8-form {
    max-width: 690px;
    padding: 40px 0 100px 0;
}


.s8-field{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
      padding: 45px 0 15px;
  border-bottom: 1px solid #717171;
}

.s8-label{
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  opacity: 1;
  color: #000;
}

.s8-input{
  border: 0;
  outline: none;
  background: transparent;
  padding: 8px 0;
  font-size: 15px;
  color: #717171;
  font-weight: 400;
  font-family: "Inter", sans-serif;
  letter-spacing: -0.02em;
}

.s8-input::placeholder{
  color: #717171;
}

.s8-btn {
    margin-top: 50px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0 15px 0 10px;
    background: #000;
    color: #fff;
    border: 1px solid #000;
    border-radius: 2px;
    cursor: pointer;
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    min-width: 164px;
    justify-content: space-around;
    height: 30px;
}

.s8-btnDot{
  width: 5px;
  height: 5px;
  background: #fff;
  display: inline-block;
}



.s8-btnArrow{
  margin-left: 6px;
}

	span.wpcf7-not-valid-tip {
    display: block;
    width: 100%;
    color: red;
    font-size: 13px;
}
form.wpcf7-form.invalid	.wpcf7-response-output {
    border: 2px solid orange;
    padding: 10px;
    margin-top: 20px;
    font-size: 14px;
}	
/* remove CF7 default spacing */
.s8-form .wpcf7-form p{
  margin:0;
}

.s8-form .wpcf7-form br{
  display:none;
}
.s8-form .s8-label {
    margin: 0;
    display: block;
    width: inherit;
}
.s8-form .wpcf7-form p {
    margin: 0;
	  display: flex;
    width: 100%;
}


.s8-footer {
    margin-top: 100px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.s8-follow{
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 120px;
}

.s8-followDot{
  width: 7px;
  height: 7px;
  background: #000;
  display: inline-block;
}

.s8-followLabel{
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  color: #000;
}

.s8-social{
  display: flex;
  flex-wrap: wrap;
  gap: 27px;
}

.s8-socialLink{
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  color: #717171;
  text-decoration: none;
}

.s8-socialLink:hover{
  color: #0b0b0b;
}

.s8-imgCard{
  width: 100%;
  max-width: 335px;
  margin-left: auto;
}

.s8-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

.s8-contact{
  max-width: 335px;
  margin-top: 24px;
  margin-left: auto;
}

.s8-contactRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 14px;
}

.s8-contactTitle{
  font-size: 13px;
  text-transform: uppercase;
  font-family: "IBM Plex Mono", monospace;
  color: #000;
}

.s8-contactSq{
  width: 7px;
  height: 7px;
  background: #000;
  display: inline-block;
}

.s8-contactList{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-left: 40px;
}

.s8-contactItem{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 14px;
  align-items: start;
}

.s8-contactKey,
.s8-contactVal{
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: -0.02em;
  color: #717171;
}

.s8-contactVal:hover{
  color: #0b0b0b;
}

/* =========================================================
   14. SECTION 9
   ========================================================= */
.s9{
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #000;
}

.s9-bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  will-change: transform;
}

.s9-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.18);
}

.s9-center{
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 6vw, 96px);
  padding: 0 24px;
  text-align: center;
}

.s9-word{
  display: inline-block;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(18px) scale(1.06);
  filter: blur(10px);
  will-change: transform, opacity, filter;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.05em;
  font-size: clamp(34px, 3.3vw, 64px);
  line-height: 41px;
}

.s9-dot{
  opacity: .85;
}

.s9.is-active .s9-word{
  animation: s9PopIn 900ms cubic-bezier(.2,.8,.2,1) forwards;
}

.s9.is-active .s9-word:nth-child(1){ animation-delay: 320ms; }
.s9.is-active .s9-word:nth-child(2){ animation-delay: 820ms; }
.s9.is-active .s9-word:nth-child(3){ animation-delay: 1320ms; }

@keyframes s9PopIn{
  0%{
    opacity: 0;
    transform: translateY(18px) scale(1.08);
    filter: blur(10px);
  }
  70%,
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* =========================================================
   15. RESPONSIVE
   ========================================================= */
@media (max-width: 1200px){
  .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(40px, 4.2vh, 80px) !important;
  }

  .s4-grid .s4-cardBody{
    padding-top: 10px;
  }

  .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;
  }
}

@media (min-width: 1201px) and (max-width: 1500px){
  .s5-copyWrap .s5-title{
    font-size: 50px;
    line-height: 50px;
    margin: 0 0 20px 0;
  }

  .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%; --vh: 12vh; }

   .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: 58%; top: 58%; --hw: 30vw; }

  .overlay--s5 .frame--center{ top: 20%; --fw: 45vw; }

  .s5-copyWrap{ left: 7%; top: 64%; }
  .s5-label{ font-size: 14px; }
	
}
@media (min-width: 1024px) and (max-width: 1200px){
.overlay--s2 .frame--right {
    --fw: 300px;
}
.overlay--s3 .h1 {
    left: 25%;
}
.overlay--s3 .frame--mid {
    left: 40%;
    --fw: 300px;
}
  .overlay--s5 .frame--center{ top: 20%; --fw: 45vw; }	
}

@media (min-width: 1201px) and (max-width: 1400px){
.overlay--s3 .frame--mid {
    left: 50%;
    --fw: 380px;
}
#section3 {
    --s3-measure-left: -14px;
	}
}


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

  .overlay--s2 .d1,
  .overlay--s3 .h2,
  .overlay--s1 .m2{
    display:none !important;
  }
/* 
  .overlay--s2 .frame--right{ left: 7%; top: 14%; } */

/*   .overlay--s3 .frame--mid{ left: 7%; top: 14%; transform:none; } */
/*   .overlay--s3 .h1{ left: 7%; top: 60%; height: 24vh; } */
/* 
  .overlay--s4 .frame--left{ left: 7%; top: 14%; } */
/*   .overlay--s4 .h3{ left: 7%; top: 60%; --hw: 17.1vw; } */
/* 
  .overlay--s5 .frame--center{ left: 7%; top: 14%; transform: none; } */
/*   .overlay--s5 .m5,
  .overlay--s5 .h5{ left: 7%; } */

  .s4-grid{
    grid-template-columns: 1fr;
  }
}


@media (max-width: 767px){
.overlay--s1 .frame--left {
    left: 0;
        top: 22%;
        --fw: 60vw;
        --fh: 240px;
        margin: auto;
        right: 0;
 }
	
.overlay--s2 .frame--right,
.overlay--s3 .frame--mid,
	.overlay--s4 .frame--left,
	.overlay--s5 .frame--center{
        left: 0;
        top: 22%;
        right: 0;
        margin: auto;
}	
.overlay--s3 .h1,
.m.m--v.m1.a-measure,
.overlay--s4 .h3, 
.overlay--s5 .m5,
.overlay--s5 .h5 {
    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: 22px !important;
    line-height: 26px !important;
}	
.s5-dot.is-active::after {
    top: 6px;
    left: 6px;
    width: 4px;
    height: 4px;
}	
#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: 353 / 411;
}
#section6 .s6-regions,
#section6 .s6-below,
#section6 .s6-overlay {
    display: none!important;
}
.s4-imageWrap {
    height: 411px;
}	
#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: 9px;
}
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 (min-width: 768px) and (max-width: 1023px) {
    .s8-inner {
        width: calc(100% - 0px); /* slightly reduced padding */
        grid-template-columns: 1fr 1fr; /* keep 2 cols */
        gap: 40px; /* reduce spacing */
    }
#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: 10px;
}	
}
@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; */
}
}
@media (max-width:1023px) {
body section#section8{
	padding: 80px 16px 80px;	
}
}

@media (max-width: 768px){
  .s5-rail{ left: 6%; right: 6%; }
/*   .s5-copyWrap{ left: 6%; right: 6%; max-width: 92vw; top: 70%; } */
  .s5-label{ display: none; }
}



/*------------------------------------ Mobile/Tablet Responsive  ------------------------------------------*/
@media (max-width: 1023px){
.headline {
    font-size: 45px;
    line-height: 47px;
}	
}
@media (min-width:768px) and (max-width:1023px) {
.s8-kicker{
  gap: 15px;
}
.s8-footer {
    align-items: flex-start;
    flex-direction: column;
}	
.s8-field {
    padding: 35px 0 15px !important;
	grid-template-columns: 130px 1fr;
}	
/* .s8-title {
    margin: -25px 0 0 100px !important;
}	 */
.s8-form {
    padding: 40px 0 0px 0!important;
	max-width: 350px;
}	
}



/*Register form */
@media (max-width: 767px) {
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;
    }

    /* CF7 rows/fields */
    #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;
    }

    /* if your form uses 2 columns on desktop, force single column on mobile */
    #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;
    }

    /* checkbox buttons like screenshot */
    .s8-checkGroup .wpcf7-form-control {
        gap: 8px;
    }

    .s8-checkGroup .wpcf7-list-item-label {
        padding: 8px 10px;
        font-size: 10px;
        line-height: 1.1;
    }
    /* submit button */
    #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;
    }
    /* image card */
    #section8 .s8-imgCard {
        width: 100%;
        max-width: 100%;
        margin-top: 6px;
    }
    #section8 .s8-img {
        width: 100%;
        height: 485px;
        object-fit: cover;
    }
}