/* All clamps 320 - 1200 unless noted */



:root {
  --ws-gap: 1.5em;

  --lexia: font-family: 'lexia', serif;
  --switzer: 'Switzer', sans-serif;

  --text-1: clamp(1.5rem, 1.136rem + 1.82vw, 2.5rem);  /* 24 - 40 */
  --text-2: clamp(1.25em, 0.977em + 1.36vw, 2em);      /* 20 - 32 */
  --text-3: clamp(1.125em, 0.989em + 0.68vw, 1.5em);   /* 18 - 24 */
  --text-4: clamp(1.063em, 0.994em + 0.34vw, 1.25em);  /* 17 - 20 */
  --text-5: clamp(1em, 0.955em + 0.23vw, 1.125em);     /* 16 - 18 */

}



/* MISCELLANEOUS ------------------------------ */

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

main {
  overflow: hidden;
}

figure {
  margin: 0;
}

p {
  text-wrap: pretty;
}

ul.ws-flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ws-gap);
}

ul.ws-flex li {
  width: calc( 99.99% / var(--ws-column-count) - ( var(--ws-gap) * ( var(--ws-column-count) - 1 ) / var(--ws-column-count) ) );
}




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

.hero {
  padding-block: clamp(2.5em, 1.182em + 6.59vw, 6.125em) 0;
  position: relative;
  z-index: 0;
}

.hero::before {
  background: url('/images/hiredct/bg-hero.webp') no-repeat center / cover;
  content: '';
  inset: 0 0 53px 0;
  mix-blend-mode: multiply;
  opacity: .1;
  position: absolute;
  z-index: -1;
}

.hero .textbox img {
  max-width: 50%;
}

.hero .button {
  padding-block: .875em;
}

.hero h1 {
  color: var(--ws-midnight);
  margin: 0 0 1em;
}




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

.benefits {
  padding-block: clamp(2.5em, 1.864em + 3.18vw, 4.25em);
  text-align: center;
}

.benefits li {
  margin: 0 0 clamp(1.25em, 1.023em + 1.14vw, 1.875em);
}

.benefits img {
  height: 3.8125em;
  margin: 0 0 clamp(1em, 0.818em + 0.91vw, 1.5em);
  max-width: 3.8125em;
  width: auto;
}

.benefits h2 {
  font-size: var(--text-3);
  font-weight: 600;
  margin: 0 0 .25em;
}

.benefits p {
  color: #666;
  font-size: var(--text-4);
  margin: 0 auto;
  max-width: 14.25em;
}




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

.welcome {
  padding-block: 0 3.25em;
}

.welcome h2 {
  font-size: var(--text-2);
}

.welcome p {
  font-size: var(--text-4);
}




/* RIBBON 4: QUOTE ------------------------------ */

.quote {
  background: rgba(70, 152, 203, .1);
  padding-block: clamp(2.5em, 1.682em + 4.09vw, 4.75em);
  text-align: center;
}
.quote blockquote {
  font-size: 1em;
  margin: 0 auto;
  max-width: 44.4375em;
}

.quote p {
  color: var(--ws-midnight);
  font-size: var(--text-2);
  font-weight: 300;
  line-height: 1.25;
  quotes: '\201c' '\201d';
}

.quote p:first-of-type::before {
  content: open-quote;
}

.quote p:last-of-type::after {
  content: close-quote;
}

.quote cite {
  color: #4A4A4A;
  font-family: var(--switzer);
  font-size: var(--text-4);
  font-weight: 300;
}

.quote cite::before {
  content: '\2014';
  display: block;
}




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

.logos {
  padding-block: clamp(2.5em, 1.682em + 4.09vw, 4.75em);
  text-align: center;
}

.logos h2 {
  font-size: var(--text-2);
  margin: 0 0 1.5em;
}

.logos ul {
  align-items: center;
  justify-content: center;
  row-gap: clamp(2em, 1.273em + 3.64vw, 4em);
}

.logos img {
  max-height: 5.5em;
  max-width: min(100%, 10.25em);
}




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

.form {
  padding-block: 2.75em 3.5em;
  position: relative;
  z-index: 0;
}

.form::before {
  background: rgba(70, 152, 203, .1);
  content: '';
  inset: 0 0 clamp(12em, 2.031em + 11vw, 14.75em) 0; /* 1450 - 1850 */
  position: absolute;
  z-index: -1;
}

.form h2 {
  font-size: var(--text-2);
  margin: 0 0 .75em;
}

.form p {
  font-size: var(--text-4);
  margin: 0 0 1.5em;
}

.form form {
  background: var(--ws-blue-2);
  border-radius: 10px;
  margin: 0 0 3em;
  padding: 2em var(--ws-gap) 0;
}

.form label {
  color: #FFF;
  font-size: var(--text-5);
  font-style: italic;
  font-weight: 300;
  line-height: 1.2;
}

.form :is(input, textarea) {
  background: var(--ws-lt-blue-2);
  margin: 0 0 .625em;
}

form label.checkbox {
  display: block;
  padding-left: 1.25em;
  position: relative;
}

form label.checkbox input {
  left: 0;
  position: absolute;
  top: .32125em;
}

.form button[type="submit"] {
  color: #FFF;
  font-size: var(--text-4);
  transform: translateY(50%);
}

.form button[type="submit"]::before {
  background-color: var(--ws-red);
}

.form button[type="submit"]::after {
  background-image: url('/images/icons/caret-right-white.svg');
}

.form .form-error {
  background: #EE0000;
  color: #FFF;
}

.form .form-wrap em {
  display: inline-block;
  line-height: 1.2;
}





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