h1, h2, h3, h4, h5, h6 {
    color: var(--s1-primary);
    text-wrap: balance;
    &:not(.text-end, .text-center, .offcanvas-title) {
        margin-left: -0.8rem;
    }
}
h1, h2, h3, h4, h5, h6 {
    &.card {
        margin-left: 0rem;
    }
}
.h1, h1 {
    font-size: calc(1.6rem + 1.5vw);
}
.h2, h2 {
    font-size: calc(2.4rem + .9vw);
    margin-bottom: 1.6rem;
}
.h3, h3 {
    font-size: calc(2rem + .6vw);
    margin-bottom: 1.4rem;
    margin-top: 0.8rem;
}
.h4, h4 {
    font-size: calc(1.8rem + .6vw);
    margin-bottom: 1.2rem;
    margin-top: 0.6rem;
}

hr {
    margin: 5rem 20%;
    border-top: 3px solid var(--s1-secondary);
}
.lead {
    font-size: 1.2rem;
    text-wrap: balance;
}
strong.lead,
.lead strong,
strong .lead {
    font-weight: 500;
}

.btn + .btn {
    margin-left: 0.8rem;
}
.btn-group-vertical .btn + .btn {
    margin-left: 0rem;
}
.s1-bleed {
  background: #EDEDED;
  padding: 4rem 0;
  margin: 4rem 0;
}

header {
    /*position: sticky;
    top: 0;*/
    background: white;
    box-shadow: 0 4px 10px rgba(0 0 0 / 0.1);
}

.logo {
    position: relative;
    z-index: 1;
    display: block;
    margin: 0.5rem 0 -2.2rem 0;
}
.logo img {
    filter: drop-shadow(4px 8px 8px rgba(0 0 0 / 0.2));
    width: 100%;
}
.logo:before {
    content: '';
    position: absolute;
    width: auto;
    height: 100%;
    background: white;
    border-radius: 9999px;
    z-index: 0;
    aspect-ratio: 1/1;
    right: 3.6%;
}

.hero {
    position: relative;
    background: linear-gradient(0deg, lch(var(--s1-secondary-l) var(--s1-secondary-ch) / 1) 40%, lch(var(--s1-primary-l) var(--s1-primary-ch) / 0.7) 100%), url('/media/bushland2.jpg?width=2000&height=600&mode=crop');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: color;
    margin-bottom: 2.6rem;
    overflow: hidden;
}
.hm-true .hero {
    clip-path: xywh(0px -20px 100% 105%);
}
.hero:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.5rem;
    height: 3.5rem;
    background-image: url('/media/wavy-mask.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    z-index: 4;
}
.hero * {
    color: white;
    text-shadow: 1px 1px 2px rgba(0 0 0 / 0.4);
    text-wrap: balance;
}
.gold-bkg {
    position: relative;
    background: lch(var(--s1-primary-l) var(--s1-primary-ch) / 0.9);
    background: linear-gradient(90deg, lch(var(--s1-primary-l) var(--s1-primary-ch) / 1) 0%, lch(var(--s1-primary-l) var(--s1-primary-ch) / 0.85) 45%, lch(var(--s1-primary-l) var(--s1-primary-ch) / 0) 95%);
    border-radius: 40px 40px 0 0;
    margin-top: 2rem;
}
.gold-bkg > div {
    position: relative;
}
.gold-bkg .text-area {
    padding-top: 1.6rem;
    padding-bottom: 1.2rem;
}
.hm-true .gold-bkg .text-area {
    padding-top: 2.6rem;
    padding-bottom: 2.2rem;
}
.gold-bkg .portrait {
    position: relative;
    margin-right: -10%;
    margin-top: -10%;
    width: 100%;
    z-index: 4;
    filter: drop-shadow(4px 1px 4px rgba(0 0 0 / 0.4));
}
/*
.gold-bkg .portrait {
    position: relative;
    margin-right: -14%;
    margin-top: -10%;
    width: 100%;
    z-index: 0;
}
*/
.gold-bkg .motiff {
    position: absolute;
    right: -30%;
    bottom: -3rem;
    width: 130%;
    max-width: none;
    opacity: 0.2;
}

.themed {
    border-radius: 50px;
}
.themed-container {
    position: relative;
    margin-bottom: 2.6rem;
}
.themed-container:before,
.themed-container:after {
    background-color: var(--s1-secondary);
    content: '';
    position: absolute;
    aspect-ratio: 1/1;
    border-radius: 9999px;
    box-shadow: 4px 8px 20px rgba(0 0 0 / 0.2);
}
.themed-container:after {
    background-color: white;
}

.themed-container.n1:before {
    width: 19%;
    bottom: -4%;
    left: 66%;
}
.themed-container.n2:before {
    width: 14%;
    bottom: 8%;
    left: 90%;
}
.themed-container.n3:before {
    width: 11%;
    bottom: -3%;
    left: 7%;
}
.themed-container.n4:before {
    width: 10%;
    bottom: -8%;
    left: 17%;
}
.themed-container.n5:before {
    width: 9%;
    bottom: 25%;
    left: 96%;
}
.themed-container.n6:before {
    width: 19%;
    bottom: 18%;
    left: -4%;
}


.themed-container.n1:after {
    width: 9%;
    bottom: 12%;
    left: 96%;
}
.themed-container.n2:after {
    width: 9%;
    bottom: -2%;
    left: 82%;
}
.themed-container.n3:after {
    width: 14%;
    bottom: -7.5%;
    left: 21%;
}
.themed-container.n4:after {
    width: 18%;
    bottom: -6%;
    left: 31%;
}
.themed-container.n5:after {
    width: 17%;
    bottom: -4%;
    left: 73%;
}
.themed-container.n6:after {
    width: 9%;
    bottom: 11%;
    left: 5%;
}

.tag-list {
    list-style-type: none;
    padding: 0;
    margin: 2rem 0 3rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.tag-list li {
    background: white;
    border-radius: 8px;
    padding: 10px 30px;
    margin: 8px 12px;
}

.card {
    box-shadow: 2px 0 26px rgba(0 0 0 / 0.2);
    background-color: white;
    padding: 1.4rem;
    text-wrap: balance;
}
.s1-bleed + .card-list {
    margin-top: -7rem;
}
.card h3 {
    position: relative;
}
.card h3:before {
    content: '';
    position: absolute;
    background-image: url('/media/underline-short.svg');
    background-repeat: no-repeat;
    background-size: contain;
    width: 80px;
    height: 30px;
    bottom: -30px;
    left: calc(50% - 40px);
}
.card-list {
    margin-top: 2.4rem;
    margin-bottom: 2.4rem;
}
.card-list .col {
    margin-bottom: 1.4rem;
}

.dropdown-menu {
    box-shadow: 4px 8px 20px rgba(0 0 0 / 0.2);
}

.cta {
    background-image: url('/media/Valley-HR-Solutions-icon-stroke.svg');
    background-repeat: no-repeat;
    background-position: center 16%;
    background-size: 100%;
    background-blend-mode: soft-light;
}
.cta .lead {
    display: block;
    font-size: 145%;
    margin-bottom: 1.2rem;
}


.form-control {
    box-shadow: 0 0 0 .25rem lch(var(--s1-primary-l) var(--s1-primary-ch) / 0.15);
}
textarea.form-control {
    min-height: 8rem;
}

.btn-group-vertical.tag-links {
    width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 3rem;
}
.service-img {
    height: 180px;
    margin-bottom: -1.1rem;
    position: relative;
    z-index: 1;
    width: auto;
    max-width: none;
}



/* NAVS */
.main_menu a {
    text-decoration: none;
    color: var(--bs-body-color);
    font-size: 1.2rem;
    padding: 1rem 1rem;
}
.main_menu a {
    &:hover,:focus:active {
        color: var(--s1-primary);
    }
}
.main_menu a.active {
    font-family: "Oooh Baby", cursive;
    font-size: 2rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    color: var(--s1-primary);
}

.offcanvas.offcanvas-start {
    width: 315px;
}
.offcanvas-title {
    width: 100%;
}
.offcanvas-title img {
    max-width: 110px;
    margin-left: 1.2rem;
}


footer {
    position: relative;
    background: rgb(237,237,237);
    background: linear-gradient(180deg, rgba(237,237,237,1) 0%, rgba(255,255,255,1) 100%);
    margin-top: 6rem;
    padding-bottom: 1.2rem;
}
footer:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--s1-primary);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, var(--s1-primary) 80%);
}

footer .logo {
    width: 120px;
    margin: 0 0 -3rem 0;
    position: relative;
    top: -4.3rem;
}
.footer_menu {
    margin-bottom: 0.8rem;
    margin-top: 2rem;
}
.footer_menu a.nav-link {
    border-right: 1px solid var(--s1-primary);
    padding: 0px 1rem;
}
.footer_menu li:last-child a.nav-link {
    border-right: none;
}


.system-message {
    width: clamp(300px, 50%, 50%);
    margin: 0 auto;
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .logo {
        margin: 1rem 0 -1.5rem 0;
    }
    .hero {
        margin-bottom: 2rem;
    }
    .gold-bkg {
        margin-top: 4rem;
        margin-left: 2rem;
        margin-right: 2rem;
    }
    .hm-true .gold-bkg {
        margin-top: 8rem;
    }
    .gold-bkg .portrait {
        margin-top: -23%;
        margin-right: -8%;
    }
    /*
    .gold-bkg .portrait {
        margin-top: -25%;
        margin-right: 6%;
    }
    */
    .gold-bkg .motiff {
        right: -26%;
        bottom: -3rem;
        width: 150%;
    }
    .gold-bkg .text-area {
        padding-bottom: 3.2rem;
    }
    .hm-true .gold-bkg .text-area {
        padding-bottom: 4.2rem;
    }
    .cta .lead {
        margin-bottom: 0rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .h2, h2 {
        font-size: 3.2rem;
        margin-bottom: 2rem;
    }
    .h3, h3 {
        font-size: 2.6rem;
    }
    .s1-bleed {
      padding: 6rem 0;
      margin: 6rem 0;
    }
    .gold-bkg .portrait {
        width: 88%;
    }
    .main_menu a {
        padding: 1rem 1.6rem;
    }
    .gold-bkg .motiff {
        right: -22%;
        bottom: -10rem;
        width: 130%;
    }
    .gold-bkg .text-area {
        padding-bottom: 3.8rem;
    }
    .hm-true .gold-bkg .text-area {
        padding-bottom: 4.8rem;
    }
    .card-list {
        margin-top: 4rem;
        margin-bottom: 4rem;
    }
    .card-list > .col {
        width: 30%;
    }
    .card-list.row-cols-lg-3 > .col:nth-child(3n + 2) {
        position: relative;
        top: -2rem;
    }
    .cta {
        background-size: 70%;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .h1, h1 {
        font-size: 3rem;
    }
    .hero {
        margin-bottom: 4.4rem;
        overflow: unset;
    }
    .gold-bkg .motiff {
        right: -13%;
        bottom: -10rem;
        width: 120%;
    }
    .gold-bkg .text-area {
        padding-bottom: 4.2rem;
    }
    .hm-true .gold-bkg .text-area {
        padding-bottom: 6.2rem;
    }
    .cta {
        background-size: 50%;
    }
    .service-img {
        height: 240px;
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .cta {
        background-size: 40%;
    }
}