/* Happy Switch page (Figma frame 2114:2652). rem = Figma px / 27.97 */

.sw-page {
  background-color: #f7f7f7;
}

/* ---------- Scroll-driven switch title ---------- */
.sw-hero {
  height: 260vh;
  position: relative;
}

.sw-hero-stage {
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.sw-hero-lime,
.sw-hero-cover {
  position: absolute;
  inset: 0;
}

.sw-hero-lime {
  background-color: var(--fosfo);
}

.sw-hero-cover {
  background-color: #f7f7f7;
}

.sw-title {
  aspect-ratio: 2529 / 1441;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.sw-title img {
  max-width: none;
  display: block;
  position: absolute;
}

.sw-t0 { left: 6.53%; top: 36.83%; width: 8.58%; height: 21.71%; }
.sw-t1 { left: 15.56%; top: 42.51%; width: 7.41%; height: 16.28%; }
.sw-t2 { left: 23.8%; top: 42.51%; width: 7.53%; height: 21.96%; }
.sw-t3 { left: 31.96%; top: 42.51%; width: 7.53%; height: 21.96%; }
.sw-t4 { left: 38.98%; top: 42.75%; width: 7.64%; height: 21.97%; }
.sw-t5 { left: 48.81%; top: 37.84%; width: 7.19%; height: 21.63%; }
.sw-t6 { left: 55.76%; top: 43.54%; width: 16.9%; height: 15.65%; }
.sw-t7 { left: 71.85%; top: 38.97%; width: 6.05%; height: 20.5%; }
.sw-t8 { left: 77.72%; top: 43.46%; width: 6.8%; height: 16.01%; }
.sw-t9 { left: 84.17%; top: 35.96%; width: 9.3%; height: 23.09%; }

.sw-title .sw-knob {
  top: 36.55%;
  left: 65.87%;
  width: 2.15%;
  height: 3.77%;
}

.sw-title .sw-pill {
  top: 35.28%;
  left: 65.15%;
  width: 7.15%;
  height: 6.3%;
  transform: rotate(180deg);
}

/* ---------- Text blocks ---------- */
.sw-intro {
  padding: 4.47rem 3.22rem 0;
}

.sw-intro-title {
  color: #121212;
  letter-spacing: -.05em;
  width: 100%;
  max-width: 77.33rem;
  margin: 0;
  font-family: Barlow, sans-serif;
  font-size: 6.79rem;
  font-weight: 500;
  line-height: 1.02;
}

.sw-serif {
  font-family: Playfair Display, serif;
  font-style: italic;
  font-weight: 500;
}

.sw-gallery {
  justify-content: center;
  padding-top: 6.29rem;
  display: flex;
}

.sw-gallery img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 35.07rem;
  height: auto;
  display: block;
}

.sw-block {
  text-align: center;
  padding: 0 1.6rem;
}

.sw-block.is-interruptor {
  padding-top: 11.66rem;
}

.sw-block.is-mapear {
  padding-top: 16.27rem;
}

.sw-block.is-flexible {
  padding-top: 16.37rem;
}

.sw-heading {
  color: #121212;
  letter-spacing: -.09em;
  margin: 0 auto;
  font-family: Barlow, sans-serif;
  font-size: 4.576rem;
  font-weight: 500;
  line-height: 1.17;
}

.sw-heading .sw-serif.is-tight {
  letter-spacing: -.006em;
}

.sw-heading.is-flexible {
  max-width: 50.94rem;
}

.sw-body {
  color: #000;
  letter-spacing: -.04em;
  margin: .39rem auto 0;
  font-family: Barlow, sans-serif;
  font-size: 1.966rem;
  font-weight: 400;
  line-height: 1.15;
}

.sw-body.is-w1 {
  max-width: 41.41rem;
}

.sw-body.is-w2 {
  max-width: 53.62rem;
}

.sw-body.is-flexible {
  max-width: 41.41rem;
  margin-top: .79rem;
}

.sw-body .u-mark {
  padding: 0;
}

/* ---------- Hand-drawn strokes (drawn once on view, see inline script) ---------- */
.sw-anchor {
  position: relative;
  display: inline-block;
}

.u-draw {
  pointer-events: none;
  overflow: visible;
  position: absolute;
}

.u-draw path {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--dur, 1s) cubic-bezier(.22, .61, .36, 1) var(--delay, 0s);
}

.u-draw.is-in path {
  stroke-dashoffset: 0;
}

.sw-circle {
  width: 4.83em;
  height: 1.39em;
  top: 50%;
  left: 50%;
  transform: translate(-46%, -44%) rotate(4.47deg) skewX(-1.74deg);
}

.sw-mapear-line {
  width: 3.163em;
  height: .204em;
  bottom: .02em;
  left: -.04em;
  transform: rotate(3.2deg) skewX(-1.25deg);
}

.sw-arrow {
  width: 1.84em;
  height: .28em;
  top: 50%;
  left: 100%;
  margin-left: .12em;
  margin-top: -.12em;
}

.sw-arrow-line {
  width: 1.82em;
  height: .137em;
  top: 0;
  right: 0;
  transform: rotate(178.45deg) scaleX(-1);
}

.sw-arrow-head {
  width: .415em;
  height: .277em;
  top: -.06em;
  left: 0;
  transform: rotate(179.24deg) scaleX(-1);
}

.sw-squiggle {
  width: .857em;
  height: 1.149em;
  top: -.62em;
  left: 1.03em;
  transform: rotate(104.08deg) skewX(3.86deg);
}

.sw-squiggle-tip {
  width: .203em;
  height: .267em;
  top: .08em;
  left: .83em;
  transform: rotate(104.08deg) skewX(3.86deg);
}

.sw-tu-line {
  width: 9.94em;
  height: .278em;
  top: 1.44em;
  left: .2em;
  transform: rotate(1.63deg) skewX(-.64deg);
}

/* ---------- Stages: stacked sticky bands ---------- */
.sw-stages {
  margin-top: 15.3rem;
  position: relative;
}

.sw-stage {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  min-height: 34rem;
  padding: 2rem 1.6rem;
  display: flex;
  position: sticky;
  top: 0;
}

.sw-stage.is-1 {
  color: #d9d9d9;
  background-color: #121212;
}

.sw-stage.is-2 {
  color: #121212;
  background-color: var(--fosfo);
}

.sw-stage.is-3 {
  color: #121212;
  background-color: #e4e4e4;
}

.sw-stage-title {
  letter-spacing: -.05em;
  margin: 0;
  font-family: Playfair Display, serif;
  font-size: 4.576rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.17;
}

.sw-stage-text {
  letter-spacing: -.04em;
  max-width: 44.52rem;
  margin: 1.29rem 0 0;
  font-family: Barlow, sans-serif;
  font-size: 1.43rem;
  font-weight: 300;
  line-height: 1.15;
}

.sw-stage-text strong {
  font-size: 1.966rem;
  font-weight: 600;
  display: block;
}

.sw-stage-tag {
  letter-spacing: -.05em;
  margin-top: 1.25rem;
  padding: .01em .45em .06em;
  font-family: Playfair Display, serif;
  font-size: 1.716rem;
  font-weight: 400;
  line-height: 1.17;
  display: inline-block;
}

.sw-stage.is-1 .sw-stage-tag {
  color: #121212;
  background-color: var(--fosfo);
}

.sw-stage.is-2 .sw-stage-tag {
  color: #f7f7f7;
  background-color: #121212;
}

.sw-stage.is-3 .sw-stage-tag {
  color: #121212;
  background-color: #f7f7f7;
}

/* ---------- Closing ---------- */
.sw-closing {
  z-index: 1;
  background-color: #f7f7f7;
  padding: 12.94rem 1.6rem 8.33rem;
  position: relative;
}

.sw-closing .sw-heading {
  max-width: 87.06rem;
}

.sw-closing-line {
  display: block;
}

.sw-postit {
  object-fit: cover;
  width: 100%;
  max-width: 67.32rem;
  aspect-ratio: 1883 / 1021;
  height: auto;
  margin: 5.61rem auto 0;
  display: block;
}

.sw-heading.is-planes {
  max-width: 57.31rem;
  margin-top: 4.36rem;
}

.sw-body.is-tu {
  max-width: 49.01rem;
  margin-top: 2.82rem;
}

@media screen and (max-width: 991px) {
  .sw-hero {
    height: 220vh;
  }

  .sw-intro {
    padding: 64px 32px 0;
  }

  .sw-intro-title {
    font-size: 60px;
  }

  .sw-gallery {
    padding-top: 56px;
  }

  .sw-gallery img {
    width: 70%;
  }

  .sw-block {
    padding-left: 32px;
    padding-right: 32px;
  }

  .sw-block.is-interruptor,
  .sw-block.is-mapear,
  .sw-block.is-flexible {
    padding-top: 120px;
  }

  .sw-heading {
    font-size: 52px;
  }

  .sw-heading.is-flexible {
    max-width: 600px;
  }

  .sw-body,
  .sw-body.is-w1,
  .sw-body.is-w2,
  .sw-body.is-flexible,
  .sw-body.is-tu {
    max-width: 640px;
    font-size: 24px;
  }

  .sw-stages {
    margin-top: 120px;
  }

  .sw-stage-title {
    font-size: 56px;
  }

  .sw-stage-text {
    max-width: 600px;
    font-size: 20px;
  }

  .sw-stage-text strong {
    font-size: 26px;
  }

  .sw-stage-tag {
    font-size: 24px;
  }

  .sw-closing {
    padding: 120px 32px 96px;
  }

  .sw-postit {
    max-width: 100%;
    margin-top: 56px;
  }

  .sw-heading.is-planes {
    margin-top: 56px;
  }
}

@media screen and (max-width: 767px) {
  .sw-hero {
    height: 200vh;
  }

  .sw-intro {
    padding: 48px 20px 0;
  }

  .sw-intro-title {
    font-size: 40px;
  }

  .sw-gallery img {
    width: 100%;
  }

  .sw-block {
    padding-left: 20px;
    padding-right: 20px;
  }

  .sw-block.is-interruptor,
  .sw-block.is-mapear,
  .sw-block.is-flexible {
    padding-top: 88px;
  }

  .sw-heading {
    font-size: 36px;
  }

  .sw-body,
  .sw-body.is-w1,
  .sw-body.is-w2,
  .sw-body.is-flexible,
  .sw-body.is-tu {
    font-size: 19px;
  }

  .sw-arrow,
  .sw-squiggle,
  .sw-squiggle-tip {
    display: none;
  }

  .sw-stages {
    margin-top: 88px;
  }

  .sw-stage {
    padding: 32px 20px;
  }

  .sw-stage-title {
    font-size: 42px;
  }

  .sw-stage-text {
    font-size: 17px;
  }

  .sw-stage-text strong {
    font-size: 21px;
  }

  .sw-stage-tag {
    font-size: 19px;
  }

  .sw-closing {
    padding: 88px 20px 72px;
  }

  .sw-postit {
    margin-top: 40px;
  }

  .sw-heading.is-planes {
    margin-top: 40px;
  }
}

.sw-arrow svg {
  overflow: visible;
  position: absolute;
}