/* All clamps 750 - 1200 unless noted */

.anchor-link {
  top: -2em;
}

/* RIBBON 1: HERO RIBBON ------------------------------ */

.hero .textbox {
  align-items: start;
  display: flex;
  flex-direction: column;
  grid-column: wrap-start / 8;
  grid-row: 1 / 2;
  margin-inline: -2.6875em 2em;
}

.hero .textbox img {
  margin: 0 0 clamp(1em, -1.5em + 5.33vw, 2.5em);
}

.hero .button {
  margin-block: auto 1em;
}

.hero h1 {
  font-size: 2.5em;
}

.hero h1>b {
  display: block;
}

.hero .image {
  grid-column: 7 / -1;
  grid-row: 1 / 2;
  margin-inline: 2em -5.625em;
}

.hero .image img {
  display: block;
  margin-right: auto;
  max-width: 52.8125em;
  width: 100%;
}




/* RIBBON 2: BENEFITS ------------------------------ */


.benefits ul {
  display: contents;
}

.benefits  li:nth-child(1) {
  grid-column: 2 / 6;
}

.benefits  li:nth-child(2) {
  grid-column: 6 / 10;
}

.benefits  li:nth-child(3) {
  grid-column: 10 / 14;
}




/* RIBBON 3: WELCOME ------------------------------ */

.welcome {
  align-items: center;
}

.welcome .image {
  align-self: start;
  grid-column: 1 / 7;
  margin-left: -3.625em;
}

.welcome .image img {
  display: block;
  margin-left: auto;
  max-width: 40.6875em;
  width: 100%;
}

.welcome .textbox {
  grid-column: 7 / wrap-end;
  padding-left: clamp(0em, -4.583em + 9.78vw, 2.75em);
}




/* RIBBON 5: LOGOS ------------------------------ */


.logos ul.ws-flex {
  --ws-column-count: 4;
}




/* RIBBON 6: FORM ------------------------------ */

.form .textbox {
  grid-column: wrap-start / 9;
  padding: 1em clamp(1.5em, -0.167em + 3.56vw, 2.5em) 0 0;
}

.form .form-wrap {
  grid-column: 9 / wrap-end;
}

.form .form-wrap>div {
  padding-inline: calc(clamp(0em, -2.5rem + 5.33vw, 1.5em) + var(--ws-gap)) 0;
}

.form form>div {
  padding-inline: clamp(0em, -2.5rem + 5.33vw, 1.5em);
}

.form button[type="submit"]:is(:hover, :focus-visible) {
  color: var(--ws-red);
}

.form button[type="submit"]:is(:hover, :focus-visible)::before {
  background-color: #FFF;
}

.form button[type="submit"]:is(:hover, :focus-visible)::after {
  background-image: url('/images/icons/caret-right-red.svg');
}




/* MAX-WIDTH MEDIA QUERIES ------------------------------ */

/* 1350px */
@media (max-width: 84.375em) {
  .hero h1 {
    font-size: clamp(1.25em, -0.313em + 3.33vw, 2.188em);
  }
}


/* 900px */
@media (max-width: 56.25em) {

  .hero .textbox {
    margin-left: 0;
  }

  .logos ul.ws-flex {
    --ws-column-count: 3;
  }


}


/* -----===== HIREDCT - STYLE-D.CSS =====----- */