.maktech-thw,
.maktech-thw *{box-sizing:border-box}

.maktech-thw{
  --ts-hw-bg:#f3efe9;
  --ts-hw-ink:#070707;
  width:100%;
  direction:ltr;
}

.maktech-thw .ts-hw{
  position:relative;
  width:100%;
  height:160vh;
  min-height:0;
  background:var(--ts-hw-bg);
  color:var(--ts-hw-ink);
  font-family:"DM Sans",Arial,sans-serif;
}

.maktech-thw .ts-hw__content{
  position:sticky;
  top:0;
  width:100%;
  height:100vh;
  height:100svh;
  min-height:620px;
  overflow:hidden;
  background:var(--ts-hw-bg);
  isolation:isolate;
}

.maktech-thw .ts-hw__relative{
  position:absolute;
  left:0;
  top:50%;
  width:max-content;
  height:auto;
  transform:translate3d(0,-50%,0);
  will-change:transform;
  z-index:3;
}

.maktech-thw .ts-hw__title{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:row;
  align-items:baseline;
  flex-wrap:nowrap;
  width:max-content;
  margin:0;
  padding:0;
  white-space:nowrap;
  font-family:"DM Sans",Arial,sans-serif;
  font-size:clamp(126px,13.2vw,254px);
  line-height:.78;
  letter-spacing:-.073em;
  font-weight:800;
  text-transform:lowercase;
  color:var(--ts-hw-ink);
  /* direction is set dynamically by widget.js (data-heading-direction: auto/ltr/rtl)
     so the flex order of the split-letter spans always matches the sentence's
     actual script, regardless of the page/theme's own text direction. */
}

.maktech-thw .ts-hw__letter{
  position:relative;
  display:inline-block;
  flex:0 0 auto;
  transform-origin:50% 70%;
  will-change:transform;
}

.maktech-thw .ts-hw__space{
  display:inline-block;
  flex:0 0 auto;
  width:.23em;
}

.maktech-thw .ts-hw__sticker{
  position:absolute;
  z-index:7;
  pointer-events:none;
  transform-origin:50% 50%;
  will-change:transform,opacity;
}

.maktech-thw .ts-hw__sticker svg,
.maktech-thw .ts-hw__sticker img{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}

.maktech-thw .ts-hw__sticker--watch{
  width:clamp(78px,7.2vw,138px);
  top:-1.08em;
}

.maktech-thw .ts-hw__sticker--cursor{
  width:clamp(86px,7.8vw,150px);
  top:.38em;
}

.maktech-thw .ts-hw__sticker--phone{
  width:clamp(84px,7.5vw,144px);
  top:-1.04em;
}

.maktech-thw .mthw-extra-sticker{
  width:var(--mthw-w-desktop,130px);
  top:calc(var(--mthw-top-desktop,-1em) - var(--mthw-gap-desktop,0px));
}

.maktech-thw .mthw-extra-sticker img{
  object-fit:contain;
  object-position:center;
}

.maktech-thw .ts-hw__arrow{
  position:absolute;
  z-index:2;
  color:var(--ts-hw-ink);
  pointer-events:none;
}

.maktech-thw .ts-hw__arrow svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
  shape-rendering:geometricPrecision;
}

.maktech-thw .ts-hw__arrow path{
  will-change:stroke-dasharray;
  vector-effect:non-scaling-stroke;
}

.maktech-thw .ts-hw__arrow--main{
  width:clamp(300px,31vw,595px);
  top:clamp(-255px,-13vw,-165px);
}

.maktech-thw .ts-hw__arrow--end{
  width:clamp(112px,10.8vw,205px);
  top:clamp(-230px,-12vw,-150px);
}

.maktech-thw .ts-hw__end-arrow{
  position:absolute;
  z-index:4;
  top:34%;
  width:clamp(46px,4.6vw,76px);
  color:var(--ts-hw-ink);
  pointer-events:none;
  opacity:0;
  will-change:transform,opacity;
}

.maktech-thw .ts-hw__end-arrow svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
  shape-rendering:geometricPrecision;
}

.maktech-thw .ts-hw__end-arrow path{
  will-change:stroke-dasharray;
  vector-effect:non-scaling-stroke;
}

.maktech-thw .ts-hw__end-arrow.is-revealed{
  animation:mthw-end-arrow-bounce 1.6s ease-in-out infinite;
}

@keyframes mthw-end-arrow-bounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(10px); }
}

.maktech-thw .ts-hw__bottom{
  position:absolute;
  z-index:8;
  left:50%;
  top:64vh;
  bottom:auto;
  width:min(92vw,1180px);
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  pointer-events:none;
}

.maktech-thw .ts-hw__secondary-title{
  width:100%;
  margin:0;
  padding:0;
  color:var(--ts-hw-ink);
  font-family:"DM Sans",Arial,sans-serif;
  font-size:clamp(28px,2.9vw,46px);
  line-height:1.18;
  letter-spacing:-.035em;
  font-weight:800;
  text-wrap:balance;
}

.maktech-thw .ts-hw__bottom em{
  font-family:"Lora",Georgia,serif;
  font-style:italic;
  font-weight:500;
}

@media (max-width:1024px){
  .maktech-thw .ts-hw{height:270vh;min-height:0}
  .maktech-thw .ts-hw__title{font-size:clamp(108px,16vw,176px)}
  .maktech-thw .ts-hw__arrow--main{top:clamp(-205px,-16vw,-165px)}
  .maktech-thw .ts-hw__arrow--end{top:clamp(-185px,-14.5vw,-145px)}
  .maktech-thw .ts-hw__bottom{width:92vw;top:61vh;bottom:auto}
  .maktech-thw .ts-hw__secondary-title{font-size:clamp(26px,4.4vw,40px)}
  .maktech-thw .mthw-extra-sticker{width:var(--mthw-w-tablet,110px);top:calc(var(--mthw-top-tablet,-1em) - var(--mthw-gap-tablet,0px))}
}

@media (max-width:767px){
  .maktech-thw .ts-hw{height:260vh;min-height:0}
  .maktech-thw .ts-hw__content{min-height:560px}
  .maktech-thw .ts-hw__relative{top:47%}
  .maktech-thw .ts-hw__title{font-size:clamp(86px,23vw,128px);line-height:.8;letter-spacing:-.068em}
  .maktech-thw .ts-hw__sticker--watch{width:76px;top:-1.15em}
  .maktech-thw .ts-hw__sticker--cursor{width:80px;top:.42em}
  .maktech-thw .ts-hw__sticker--phone{width:78px;top:-1.08em}
  .maktech-thw .ts-hw__arrow--main{width:280px;top:-150px}
  .maktech-thw .ts-hw__arrow--end{width:112px;top:-138px}
  .maktech-thw .ts-hw__bottom{width:92vw;top:58vh;bottom:auto}
  .maktech-thw .ts-hw__secondary-title{font-size:clamp(22px,6.2vw,30px);line-height:1.14}
  .maktech-thw .mthw-extra-sticker{width:var(--mthw-w-mobile,82px);top:calc(var(--mthw-top-mobile,-1em) - var(--mthw-gap-mobile,0px))}
  .maktech-thw .ts-hw__end-arrow{width:38px}
}

@media (max-width:420px){
  .maktech-thw .ts-hw__title{font-size:clamp(78px,22vw,96px)}
  .maktech-thw .ts-hw__arrow--main{top:-142px}
  .maktech-thw .ts-hw__arrow--end{top:-130px}
  .maktech-thw .ts-hw__bottom{width:92vw;top:56vh}
}

@media (prefers-reduced-motion:reduce){
  .maktech-thw .ts-hw{height:100vh;min-height:640px}
  .maktech-thw .ts-hw__content{position:relative}
  .maktech-thw .ts-hw__relative{left:4vw!important;transform:translate3d(0,-50%,0)!important}
  .maktech-thw .ts-hw__letter,
  .maktech-thw .ts-hw__sticker{transform:none!important;opacity:1!important}
  .maktech-thw .ts-hw__end-arrow{opacity:1!important;animation:none!important}
}