main{color: var(--primary)}
.banner{background: var(--background);position:relative}
.banner-static-image{position:absolute;display: flex;}
/* Scoped to .banner.searchbar to outrank home.css `.banner h1 { font-size: 60px }`
   which can leak into this page after a client-side nav from the homepage
   (Next.js precedence-default link hoisting). Legacy rule was a bare `h1`. */
.banner.searchbar h1{font-size:46px;margin-bottom:10px}
h2{font-size:36px;margin-bottom:20px;color: var(--white)}
.headline-wrapper {position: relative;z-index: 1;flex-direction: column;justify-content: center;align-items: center;padding:70px 0;display:flex}
.headline-wrapper p{opacity: 0.5;font-weight: 600;font-size: 16px;}
.recommendation-page{background: var(--white)}
.recommendation-page-container{display: flex;position: relative;}
.how-recommendation-work{padding:45px 55px;background: var(--primary);color: var(--white); text-align: center;}
.how-recommendation-work ul{display: flex;gap: 100px; margin-top: 50px; justify-content: center; position: relative;}
.how-recommendation-work ul:before {content: "";border-bottom: 2px dotted #fff;width: 70%;display: inline-block;position: absolute;top: 20px;opacity: 0.5;}
.how-recommendation-work ul li{width: 300px; position: relative}
.how-recommendation-work ul li h3{font-size:16px;color: var(--white);font-weight:600}
.how-recommendation-work ul li::before{content: "2"; background: #fff; color: var(--primary); padding: 6px 15px; border-radius: 50%; display: inline-block; margin-bottom: 20px; font-size: 18px;}
.how-recommendation-work ul li:first-child:before{content: "1";}
.how-recommendation-work ul li:last-child:before{content: "3";}
.recommendation-form{padding:50px;width: calc(100% - 534px);background: var(--white); margin: 0 auto;}
.form-group > label{font-size:16px}
.form-group > label.error{font-size:14px}
.form-row{display: flex;flex-direction: row;gap: 30px;}
.recommendation-form input{width:100%;height:44px;border: 1px solid var(--border-color);border-radius: var(--border-radius);padding: 0 20px;font-size: 14px;color: var(--primary);}
.form-group{margin-bottom:30px}
label.required::after{content:"*";color:#FF3032;margin-left: 4px;}
select{width:100%;height:44px}
.select2-container--default .select2-selection--single{height:44px;border-color: var(--border-color);color: var(--primary)}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height: normal;display: flex;height: 44px;align-items: center;color: var(--primary);font-size: 14px;padding-left:20px}
.select2-container--default .select2-selection--single .select2-selection__arrow b,.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border: solid var(--primary);border-width: 0 2px 2px 0;display: inline-block;padding: 3px;transform: rotate(45deg);-webkit-transform: rotate(45deg);margin: 3px -0 0 -15px;}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #FDF6E9;
    color: var(--primary);
}
.select2-container--default .select2-results__option--selected {
    background-color: #FDF6E9;
    color: var(--primary);
}
.select2-results__option{padding: 0 0 0 10px;height: 34px;display: flex;align-items: center;margin: 0 10px 2px 10px;border-radius: var(--border-radius);}
.select2-dropdown{border-color: var(--border-color)}
.select2-results__options{margin-top:2px;color: var(--primary)}
.select2-container--default .select2-search--dropdown .select2-search__field{border-color: var(--border-color)}
textarea{border:1px solid var(--border-color);border-radius: var(--border-radius);width:100%;height:82px;resize: none;font-size:14px;color: var(--secondary);padding:10px 20px}
button.submit_btn{background: var(--primary);width:100%;height:55px;display: flex;justify-content: center;align-items: center;color: var(--white);font-size:16px;font-weight:600;border-radius: var(--border-radius);cursor: pointer}
button.submit_btn:hover,button.submit_btn:focus{background: var(--black-hover)}
.process-steps {background: var(--primary);}
.trusted-by-company-container{display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 80px 0}
.trusted-by-company-container h3{line-height: normal;margin-bottom:60px;font-weight:400}
.trusted-by-company{display: flex;justify-content: center;align-items: center;gap: 49px;}
.recommendation-thanks{display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 30px;text-align: center;}
.recommendation-thanks h3{font-size: 36px;padding-top:50px}
.recommendation-thanks p{width:100%;max-width:485px;font-size:16px;color: var(--gray)}
.form-group .select2-container, .form-group .select2-selection {
    width: 100% !important;
}
@media (max-width:1279px){

    h1{font-size: 34px;max-width: 960px;text-align: center;}
    .headline-wrapper{padding:60px 0}
    .headline-wrapper p{max-width:960px;font-weight:400;text-align: center;line-height: 28px;}
    .recommendation-form{width:100%;order:1}
    .form-row .form-group{width:50%}

}

@media (max-width:1024px) {
    .recommendation-page-container{margin: 0 30px;flex-direction: column;}
    .trusted-by-company{flex-wrap: wrap;}
    .select2-results__option{width:auto}
    .how-recommendation-work ul{gap: 40px}

}
@media (max-width:767px) {
    .headline-wrapper {padding: 44px 0;align-items: flex-start;}
    .headline-wrapper p {text-align: left;line-height:24px;}
    .recommendation-page-container{top:0;margin:0;border: none;box-shadow: none;}
    .banner{min-height:auto}
    main .container{padding:0 27px}
    h1{text-align:left}
    .recommendation-form{padding:35px 0}
    .form-row .form-group{width:100%}
    .form-row{flex-direction:column;gap:0}
    .how-recommendation-work p{width:100% !important;padding:0 20px}
    .how-recommendation-work ul{flex-wrap: wrap; gap: 100px;}
    .how-recommendation-work ul:before {display: none;}
    .how-recommendation-work ul li::after{    content: "";border-left: 2px dotted #fff;height: 60px;display: inline-block;position: absolute;top: 107px;opacity: 0.5;}
    .how-recommendation-work ul li:nth-child(2)::after{top: 130px;}
    .how-recommendation-work ul li:last-child:after{display: none;}
    .trusted-by-company-container{padding:65px 0}
    .recommendation-thanks h3{padding-top:20px}
    .recommendation-thanks svg{height:auto;width:100%}

}
@media (max-width:480px) {
    .how-recommendation-work{padding: 45px 0;}
    .recommendation-thanks{gap:10px}
}

/* Native <select> styling — added 2026-05-08 because the new app uses
   plain <select> instead of the legacy Select2 jQuery plugin. The
   .select2-* rules above target Select2's generated DOM and don't apply
   to native selects. These rules give the same visual treatment as the
   legacy text inputs (44px height, gold border on focus, custom dropdown
   chevron) but on native <select>, no JS dependency.
   See src/app/company-recommendation/RecommendationForm.tsx. */
.recommendation-form select.form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 44px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0 40px 0 20px;
    font-size: 14px;
    color: var(--primary);
    background-color: var(--white);
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 10px 6px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23171923' d='M1.073.25-.018 1.341l4.586 4.586 4.586-4.586L8.063.25 4.568 3.745z'/%3E%3C/svg%3E");
    cursor: pointer;
    line-height: 44px;
    font-family: var(--primary-font);
}
.recommendation-form select.form-select:focus {
    outline: none;
    border-color: var(--secondary);
}
.recommendation-form select.form-select:invalid,
.recommendation-form select.form-select option[value=""] {
    color: var(--gray);
}
/* Restore the placeholder option color when an option IS selected. */
.recommendation-form select.form-select:not([value=""]) {
    color: var(--primary);
}