/* Tejori — welcome band (home + product; --g variant for the guarantees page) */

.wel {
  background: var(--c-cream);
}

.wel__in {
  padding-block: 5.208vw;
}

.wel__logo {
  line-height: 1;
}

.wel__logo img {
  display: inline;
  width: 18.646vw;
}

.wel__h {
  margin: .521vw 0 0;
  font-size: 2.083vw;
  font-weight: 700;
  line-height: 2.344vw;
  letter-spacing: 0;
  color: var(--c-txt);
}

/* the highlighted word sets its own line box, which makes the heading taller */
.wel__h strong {
  line-height: 1;
  color: var(--c-green);
}

.wel__d {
  margin: 1.302vw 0 0;
  font-size: 1.146vw;
  font-weight: 400;
  line-height: 1.719vw;
  letter-spacing: 0;
  color: var(--c-txt);
}

.wel__list {
  margin-top: 1.302vw;
}

.wel__list li {
  position: relative;
  padding-left: 1.563vw;
  font-size: 1.146vw;
  font-weight: 400;
  line-height: 1.719vw;
  letter-spacing: 0;
  color: var(--c-mute);
}

.wel__list li::before {
  content: "";
  position: absolute;
  top: .833vw;
  left: 0;
  width: .313vw;
  height: .313vw;
  padding: .104vw;
  background: var(--c-green);
  border-radius: 50%;
}

.wel__btn {
  margin-top: 2.604vw;
  background: #000;
  color: #fff;
  --btn-hover: var(--c-green);
  padding: .369vw .521vw;
}

.wel__btn .btn__in {
  gap: .781vw;
}

.wel__btn svg {
  height: 1.458vw;
}

/* ---------- projects variant ---------- */

.wel--p .wel__in {
  padding-block: 3.125vw;
}

.wel--p .wel__d--main {
  max-width: 76.875vw;
  font-size: 1.667vw;
  line-height: 2.083vw;
}

/* ---------- guarantees variant ---------- */

.wel--g {
  position: relative;
  overflow: hidden;
  margin-top: -3.385vw;
  background: none;
}

.wel--g::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  padding: 29.245vw 21.406vw;
  background: url(../img/bgg.webp) center / cover no-repeat;
}

.wel--g .wel__c {
  max-width: 60.677vw;
}

.wel--g .wel__logo {
  padding-top: 2.604vw;
}

/* only the guarantees layout shows this photo, and only on small screens;
   it runs at its own size and is allowed to spill past the column */
.wel__wall {
  display: none;
}

.wel__wall img {
  display: inline;
  max-width: none;
}

@media (max-width: 767px) {
  .wel .wrap {
    max-width: 100%;
    padding-inline: 4.545vw;
  }

  .wel__in {
    padding-block: 9.091vw;
  }

  .wel__logo img {
    width: 40.619vw;
  }

  .wel__h {
    margin-top: 3.409vw;
    font-size: 5.455vw;
    line-height: 4.091vw;
  }

  .wel__d {
    margin-top: 3.409vw;
    font-size: 3.409vw;
    line-height: 5.114vw;
  }

  .wel__list {
    margin-top: 6.818vw;
  }

  .wel__list li {
    padding-left: 4.091vw;
    font-size: 3.409vw;
    line-height: 5.114vw;
  }

  .wel__list li + li {
    margin-top: 6.818vw;
  }

  .wel__list li::before {
    top: 2.273vw;
    width: 1.364vw;
    height: 1.364vw;
    padding: .682vw;
  }

  .wel__btn {
    margin-top: 9.091vw;
    padding: 1.591vw 3.409vw;
  }

  .wel__btn .btn__in {
    gap: 5vw;
    justify-content: center;
  }

  .wel__btn .btn__in svg {
    width: 8.759vw;
    height: 6.58vw;
  }

  .wel--p .wel__in {
    padding-block: 9.091vw;
  }

  .wel--p .wel__d--main {
    max-width: 100%;
    margin-top: 4.545vw;
    font-size: 3.409vw;
    line-height: 150%;
  }

  .wel--p .wel__d--alt {
    font-size: 2.727vw;
  }

  .wel--p .wel__list {
    display: none;
  }

  .wel--p .wel__btn {
    margin-top: 6.818vw;
  }

  .wel--g {
    margin-top: 0;
  }

  .wel--g::before {
    display: none;
  }

  .wel--g .wel__c {
    max-width: 100%;
  }

  .wel--g .wel__logo {
    padding-top: 0;
  }

  .wel--g .wel__btn {
    margin-top: 0;
  }

  .wel--g .wel__wall {
    display: block;
    padding-top: 6.818vw;
  }
}