/*-- -------------------------- -->
<---         Quote Hero         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #quote-hero {
    padding: clamp(9rem, 20vw, 12rem) 1rem clamp(3rem, 6vw, 5rem);
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  #quote-hero .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  #quote-hero .cs-title {
    font-family: 'Inter', sans-serif;
    /* 40px - 70px */
    font-size: clamp(2.5rem, 6vw, 4.375rem);
    font-weight: 600;
    line-height: 1.08571429em;
    letter-spacing: -1px;
    color: #fff;
    margin: 0;
  }
  #quote-hero .cs-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #quote-hero .cs-background:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: linear-gradient(180deg, #000000 2%, rgba(0, 0, 0, 0) 41%), linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 47%);
  }
  #quote-hero .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #quote-hero {
    padding: 12.5rem clamp(1rem, 3vw, 2.5rem) 5rem;
    min-height: 29.875rem;
    display: flex;
    align-items: flex-end;
  }
}
/*-- -------------------------- -->
<---        Quote Form          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #quote-form {
    background-color: #fff;
    padding: clamp(3.75rem, 10vw, 6.25rem) 1rem 3.125rem;
    overflow: hidden;
    /* ===== Section Header ===== */
    /* ===== Progress Indicator ===== */
    /* Active step */
    /* Completed step */
    /* Two-step mode: hide third step and last line */
    /* ===== Form ===== */
    /* Form Steps */
    /* Name row always side by side */
    /* Sub-labeled fields (First/Last) */
    /* ===== Searchable Dropdown ===== */
    /* ===== Custom Radio Buttons ===== */
    /* ===== Yes/No Toggle Buttons ===== */
    /* ===== Step Header ===== */
    /* ===== Form Action Buttons ===== */
    /* ===== Error State ===== */
    /* ===== CTA Banner ===== */
  }
  #quote-form .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    position: relative;
  }
  #quote-form .cs-watermark {
    width: 18.75rem;
    height: auto;
    position: absolute;
    bottom: 12.5rem;
    left: -5rem;
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
    display: none;
  }
  #quote-form .cs-section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    position: relative;
    z-index: 1;
  }
  #quote-form .cs-section-title {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  #quote-form .cs-topper {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.16666667em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #3D64FD;
  }
  #quote-form .cs-title {
    font-family: 'Inter', sans-serif;
    /* 28px - 48px */
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.16666667em;
    color: #1A1A1A;
    margin: 0;
  }
  #quote-form .cs-text {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75em;
    color: #1A1A1F;
    margin: 0;
    max-width: 40.625rem;
  }
  #quote-form .cs-progress {
    width: 100%;
    max-width: 31.25rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
  #quote-form .cs-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }
  #quote-form .cs-progress-circle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 2px solid #D1D5DB;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #9CA3AF;
    transition: all 0.3s;
  }
  #quote-form .cs-progress-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #9CA3AF;
    text-align: center;
    white-space: nowrap;
    transition: color 0.3s;
  }
  #quote-form .cs-progress-line {
    flex: 1;
    height: 2px;
    background: #D1D5DB;
    margin-top: 1.25rem;
    position: relative;
    min-width: 2.5rem;
  }
  #quote-form .cs-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: #3D64FD;
    transition: width 0.4s ease;
  }
  #quote-form .cs-progress-step.cs-active .cs-progress-circle {
    border-color: #3D64FD;
    color: #3D64FD;
  }
  #quote-form .cs-progress-step.cs-active .cs-progress-label {
    color: #3D64FD;
  }
  #quote-form .cs-progress-step.cs-completed .cs-progress-circle {
    background: #3D64FD;
    border-color: #3D64FD;
    color: transparent;
    font-size: 0;
  }
  #quote-form .cs-progress-step.cs-completed .cs-progress-circle::after {
    content: '\2713';
    font-size: 1rem;
    color: #fff;
  }
  #quote-form .cs-progress-step.cs-completed .cs-progress-label {
    color: #3D64FD;
  }
  #quote-form .cs-progress.cs-two-steps > :nth-child(4),
  #quote-form .cs-progress.cs-two-steps > :nth-child(5) {
    display: none;
  }
  #quote-form .cs-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  #quote-form .cs-form-step {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  #quote-form .cs-form-step.cs-active {
    display: flex;
  }
  #quote-form .cs-form-fields {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  #quote-form .cs-field-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  #quote-form .cs-field-row-always {
    flex-direction: row;
  }
  #quote-form .cs-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
  }
  #quote-form .cs-field-sub {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
  }
  #quote-form .cs-sublabel {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    color: #5F5F62;
    padding-left: 0.125rem;
  }
  #quote-form .cs-label {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5em;
    color: #1A1A1A;
  }
  #quote-form .cs-required {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: #FF4747;
    margin-left: 0.125rem;
  }
  #quote-form .cs-input {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.71428571em;
    color: #1A1A1A;
    background-color: #F8F8F8;
    border: none;
    border-radius: 0.5rem;
    height: 3.5rem;
    padding: 0 1.5rem;
    box-sizing: border-box;
    width: 100%;
    transition: box-shadow 0.3s;
  }
  #quote-form .cs-input::placeholder {
    color: #5F5F62;
  }
  #quote-form .cs-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px #3D64FD;
  }
  #quote-form .cs-select-wrapper {
    position: relative;
    width: 100%;
  }
  #quote-form .cs-select {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.71428571em;
    color: #5F5F62;
    background-color: #F8F8F8;
    border: none;
    border-radius: 0.5rem;
    height: 3.5rem;
    padding: 0 3rem 0 1.5rem;
    box-sizing: border-box;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: box-shadow 0.3s;
    /* When a real option is selected */
  }
  #quote-form .cs-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px #3D64FD;
  }
  #quote-form .cs-select:not(:invalid) {
    color: #1A1A1A;
  }
  #quote-form .cs-select-arrow {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    pointer-events: none;
  }
  #quote-form .cs-searchable-select {
    position: relative;
    width: 100%;
  }
  #quote-form .cs-searchable-input-wrapper {
    position: relative;
    width: 100%;
  }
  #quote-form .cs-searchable-trigger {
    cursor: pointer;
    padding-right: 3rem !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  #quote-form .cs-searchable-arrow {
    transition: transform 0.2s;
  }
  #quote-form .cs-searchable-select.cs-open .cs-searchable-arrow {
    transform: translateY(-50%) rotate(180deg);
  }
  #quote-form .cs-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 17.5rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    /* Scrollbar styling */
  }
  #quote-form .cs-dropdown::-webkit-scrollbar {
    width: 6px;
  }
  #quote-form .cs-dropdown::-webkit-scrollbar-track {
    background: transparent;
  }
  #quote-form .cs-dropdown::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 3px;
  }
  #quote-form .cs-dropdown-group {
    padding: 0.25rem 0;
  }
  #quote-form .cs-dropdown-group + .cs-dropdown-group {
    border-top: 1px solid #E5E7EB;
  }
  #quote-form .cs-dropdown-group-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.5rem 1rem 0.25rem;
  }
  #quote-form .cs-dropdown-item {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1A1A1A;
    padding: 0.625rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s;
  }
  #quote-form .cs-dropdown-item:hover,
  #quote-form .cs-dropdown-item.cs-highlighted {
    background-color: #F0F4FF;
    color: #3D64FD;
  }
  #quote-form .cs-dropdown-item.cs-selected {
    color: #3D64FD;
    font-weight: 600;
  }
  #quote-form .cs-dropdown-item.cs-selected::after {
    content: '\2713';
    float: right;
    font-size: 0.75rem;
  }
  #quote-form .cs-dropdown-other {
    border-top: 1px solid #E5E7EB;
    font-style: italic;
    color: #5F5F62;
  }
  #quote-form .cs-dropdown-other:hover,
  #quote-form .cs-dropdown-other.cs-highlighted {
    color: #3D64FD;
  }
  #quote-form .cs-dropdown-empty {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: #9CA3AF;
    padding: 1rem;
    text-align: center;
  }
  #quote-form .cs-searchable-select.cs-error .cs-searchable-trigger {
    box-shadow: 0 0 0 2px #FF4747;
  }
  #quote-form .cs-other-specify-field {
    animation: cs-slide-down 0.2s ease;
  }
  @keyframes cs-slide-down {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  #quote-form .cs-textarea {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.71428571em;
    color: #1A1A1A;
    background-color: #F8F8F8;
    border: none;
    border-radius: 0.5rem;
    min-height: 7.5rem;
    padding: 1rem 1.5rem;
    box-sizing: border-box;
    width: 100%;
    resize: vertical;
    transition: box-shadow 0.3s;
  }
  #quote-form .cs-textarea::placeholder {
    color: #5F5F62;
  }
  #quote-form .cs-textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px #3D64FD;
  }
  #quote-form .cs-radio-group {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0.25rem 0;
  }
  #quote-form .cs-radio-vertical {
    flex-direction: column;
    gap: 0.75rem;
  }
  #quote-form .cs-radio-label {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
  }
  #quote-form .cs-radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  #quote-form .cs-radio-custom {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 2px solid #D1D5DB;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.2s;
  }
  #quote-form .cs-radio-custom::after {
    content: '';
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: #3D64FD;
    transform: scale(0);
    transition: transform 0.2s;
  }
  #quote-form .cs-radio-input:checked + .cs-radio-custom {
    border-color: #3D64FD;
  }
  #quote-form .cs-radio-input:checked + .cs-radio-custom::after {
    transform: scale(1);
  }
  #quote-form .cs-radio-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1A1A1A;
    line-height: 1.42857143em;
  }
  #quote-form .cs-toggle-group {
    display: flex;
    gap: 0.75rem;
  }
  #quote-form .cs-toggle-label {
    cursor: pointer;
  }
  #quote-form .cs-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  #quote-form .cs-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 5rem;
    height: 2.5rem;
    padding: 0 1.25rem;
    border: 1px solid #D1D5DB;
    border-radius: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1A1A1A;
    background: #fff;
    transition: all 0.2s;
  }
  #quote-form .cs-toggle-input:checked + .cs-toggle-btn {
    background: #3D64FD;
    border-color: #3D64FD;
    color: #fff;
  }
  #quote-form .cs-step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #E5E7EB;
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
  }
  #quote-form .cs-step-heading {
    font-family: 'Inter', sans-serif;
    font-size: 1.375rem;
    font-weight: 600;
    color: #1A1A1A;
    margin: 0;
  }
  #quote-form .cs-step-badge {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #3D64FD;
    background: rgba(61, 100, 253, 0.1);
    padding: 0.375rem 0.75rem;
    border-radius: 6.25rem;
    white-space: nowrap;
  }
  #quote-form .cs-form-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    width: 100%;
  }
  #quote-form .cs-btn {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.14285714em;
    text-align: center;
    border-radius: 0.5rem;
    padding: 0 2rem;
    height: 2.875rem;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    border: none;
  }
  #quote-form .cs-btn-primary {
    color: #fff;
    background-color: #3D64FD;
  }
  #quote-form .cs-btn-primary:hover {
    background-color: #2D4FE0;
  }
  #quote-form .cs-btn-outline {
    color: #3D64FD;
    background: transparent;
    border: 1px solid #3D64FD;
  }
  #quote-form .cs-btn-outline:hover {
    background: #3D64FD;
    color: #fff;
  }
  #quote-form .cs-error {
    box-shadow: 0 0 0 2px #FF4747 !important;
  }
  #quote-form .cs-radio-group.cs-error {
    box-shadow: none !important;
    outline: 2px solid #FF4747;
    outline-offset: 4px;
    border-radius: 0.25rem;
  }
  #quote-form .cs-cta-banner {
    background-color: #3D64FD;
    border-radius: 1rem;
    padding: 2.125rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    box-sizing: border-box;
  }
  #quote-form .cs-cta-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  #quote-form .cs-cta-badge {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.16666667em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #FAFBFC;
    border: 1px solid #FAFBFC;
    border-radius: 1rem;
    padding: 0.5rem 0.625rem;
    display: inline-block;
    align-self: flex-start;
  }
  #quote-form .cs-cta-title {
    font-family: 'Inter', sans-serif;
    /* 24px - 36px */
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 600;
    line-height: 1.22222222em;
    letter-spacing: -0.03125rem;
    color: #fff;
    margin: 0;
  }
  #quote-form .cs-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  #quote-form .cs-button-white {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.14285714em;
    text-align: center;
    text-decoration: none;
    color: #1A1A1F;
    background-color: #fff;
    padding: 0 2.25rem;
    height: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    transition: background-color 0.3s;
  }
  #quote-form .cs-button-white:hover {
    background-color: #E8EBEF;
  }
  #quote-form .cs-button-outline {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.14285714em;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: transparent;
    border: 1px solid #fff;
    padding: 0 2.25rem;
    height: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    transition: background-color 0.3s, color 0.3s;
  }
  #quote-form .cs-button-outline:hover {
    background-color: #fff;
    color: #1A1A1F;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #quote-form .cs-field-row {
    flex-direction: row;
    gap: 0.75rem;
  }
  #quote-form .cs-progress-label {
    font-size: 0.75rem;
  }
  #quote-form .cs-step-heading {
    font-size: 1.5rem;
  }
  #quote-form .cs-cta-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  #quote-form .cs-cta-buttons {
    flex-direction: row;
    flex-shrink: 0;
    gap: 1.5rem;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #quote-form {
    padding: 6.25rem 3.75rem 3.125rem;
  }
  #quote-form .cs-watermark {
    display: block;
    width: 26.125rem;
    left: -8.75rem;
    bottom: 18.75rem;
  }
  #quote-form .cs-form-fields {
    max-width: 52.875rem;
    margin: 0 auto;
  }
  #quote-form .cs-form-actions {
    max-width: 52.875rem;
  }
  #quote-form .cs-cta-banner {
    padding: 2.125rem 3.625rem;
  }
  #quote-form .cs-cta-title {
    max-width: 27.125rem;
  }
}