/* =====================================================
   Assessment Page
   Global Styles
===================================================== */

.assessment-page {
    background: #ffffff;
}


/* =====================================================
   Section Spacing
===================================================== */

.assessment-page section {
    padding: 50px 0;
}

.assessment-page section:nth-child(even) {
    background: #f8fafc;
}


/* =====================================================
   Container
===================================================== */

.assessment-page .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}


/* =====================================================
   Section Headings
===================================================== */

.section-heading {
    max-width: 850px;
    margin: 0 auto 60px;
    text-align: center;
}

.section-eyebrow {
    display: inline-block;
    margin-bottom: 18px;

    color: #b18024;

    font-size: 0.85rem;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;
}

.section-heading h2 {
    margin: 0 0 24px;

    color: #051f45;

    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
}

.section-text {
    margin: 0 auto 20px;

    max-width: 760px;

    color: #5a6178;

    font-size: 1.125rem;
    line-height: 1.8;
}

.section-text:last-child {
    margin-bottom: 0;
}


/* =====================================================
   Utility Classes
===================================================== */

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-60 {
    margin-top: 60px;
}


/* =====================================================
   Cards
===================================================== */

.assessment-card,
.benefit-card,
.faq-card,
.stat-card,
.assessment-info-card {
    background: #ffffff;

    border: 1px solid #e8ecf2;
    border-radius: 12px;

    box-shadow: 0 12px 32px rgba(5, 31, 69, 0.06);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}



/* =====================================================
   Lists
===================================================== */

.assessment-page ul,
.assessment-page ol {
    margin: 0;
    padding-left: 22px;
}

.assessment-page li {
    margin-bottom: 12px;

    color: #5a6178;
    line-height: 1.7;
}


/* =====================================================
   Images
===================================================== */

.assessment-page img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* =====================================================
   Links
===================================================== */

.assessment-page a {
    color: #b18024;
    text-decoration: none;
    transition: color 0.3s ease;
}

.assessment-page a:hover {
    color: #8f6518;
}


/* =====================================================
   Dividers
===================================================== */

.section-divider {
    width: 80px;
    height: 4px;

    margin: 24px auto 0;

    background: #b18024;
    border-radius: 999px;
}



/* =====================================================
   Assessment Introduction
===================================================== */

.assessment-intro {
    background: #ffffff;
}

.assessment-intro .section-heading {
    margin-bottom: 0;
}


/* =====================================================
   Assessment Overview
===================================================== */

.assessment-overview {
    background: #f8fafc;
    padding: 80px 0;
}


/* =====================================================
   Assessment Grid
===================================================== */

.assessment-grid {

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 30px;

}

/* -------------------------------------
   Row 1
------------------------------------- */

.assessment-card:nth-child(1) {
    grid-column: 1 / 4;
}

.assessment-card:nth-child(2) {
    grid-column: 4 / 7;
}

/* -------------------------------------
   Row 2
------------------------------------- */

.assessment-card:nth-child(3) {
    grid-column: 1 / 3;
}

.assessment-card:nth-child(4) {
    grid-column: 3 / 5;
}

.assessment-card:nth-child(5) {
    grid-column: 5 / 7;
}


/* =====================================================
   Assessment Cards
===================================================== */

.assessment-card {

    position: relative;

    padding: 40px 35px;

    background: #ffffff;

    border: 1px solid #e6e9ef;

    border-radius: 12px;

    box-shadow: 0 8px 24px rgba(5,31,69,.05);

    overflow: hidden;

    transition: all .3s ease;

}


.assessment-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: #b18024;

}


/* =====================================================
   Card Header
===================================================== */

.assessment-card-header {

    display: flex;

    align-items: center;

    gap: 22px;

    margin-bottom: 24px;

}


/* =====================================================
   Number
===================================================== */

.assessment-icon {

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 68px;

    height: 68px;

    border-radius: 50%;

    background: rgba(177,128,36,.10);

    color: #b18024;

    font-size: 1.75rem;

    font-weight: 700;

    line-height: 1;

}


/* =====================================================
   Title
===================================================== */

.assessment-card-header h3 {

    margin: 0;

    color: #051f45;

    font-size: clamp(1.7rem, 2vw, 2rem);

    font-weight: 700;

    line-height: 1.2;

}


/* =====================================================
   Description
===================================================== */

.assessment-card p {

    margin: 0;

    color: #5a6178;

    font-size: 1.1rem;

    line-height: 1.8;

}


/* =====================================================
   Highlight
===================================================== */

.assessment-highlight {

    margin-top: 70px;

}

.assessment-highlight-content {

    max-width: 900px;

    margin: 0 auto;

    padding: 45px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e6e9ef;

    border-radius: 12px;

    box-shadow: 0 8px 24px rgba(5,31,69,.05);

}

.assessment-highlight-content h3 {

    margin-bottom: 18px;

    color: #051f45;

}

.assessment-highlight-content p {

    margin: 0;

    color: #5a6178;

    line-height: 1.8;

}

/* =====================================================
   Highlight Box
===================================================== */

.assessment-highlight {

    margin-top: 70px;

}

.assessment-highlight-content {

    background: linear-gradient(
        135deg,
        #051f45,
        #12315e
    );

    color: #ffffff;

    padding: 55px 60px;

    border-radius: 16px;

    text-align: center;

    box-shadow: 0 24px 50px rgba(5,31,69,.18);

}

.assessment-highlight-content h3 {

    margin-top: 0;
    margin-bottom: 20px;

    color: #ffffff;

    font-size: 2rem;

}

.assessment-highlight-content p {

    max-width: 760px;

    margin: 0 auto;

    color: rgba(255,255,255,.92);

    font-size: 1.05rem;

    line-height: 1.9;

}




/* =====================================================
   Assessment Form Section
===================================================== */

.assessment-form-section {
    background: #f8fafc;
}

.assessment-form-header {
    max-width: 850px;
    margin: 0 auto 60px;
    text-align: center;
}



/* =====================================================
   Form Wrapper
===================================================== */

.assessment-form-wrapper {

    max-width: 1050px;

    margin: 0 auto;

    padding: 40px 55px 55px;

    background: #ffffff;

    border-radius: 16px;

    border: 1px solid #e8ecf2;

    box-shadow: 0 20px 50px rgba(5,31,69,.08);

}


/* =====================================================
   WPForms
===================================================== */

.assessment-form-wrapper .wpforms-container {
    margin: 0;
}

.assessment-form-wrapper .wpforms-field{

    padding-bottom:34px;

    border-bottom:1px solid #edf2f7;

}

.assessment-form-wrapper .wpforms-field-label {

    color: #051f45 !important;

    font-weight: 600 !important;
    font-size: 1.15rem;
    line-height: 1.5;

}

.assessment-form-wrapper input[type=text],
.assessment-form-wrapper input[type=email],
.assessment-form-wrapper input[type=number],
.assessment-form-wrapper input[type=tel],
.assessment-form-wrapper input[type=url],
.assessment-form-wrapper textarea,
.assessment-form-wrapper select {

    border: 1px solid #d6dce5 !important;

    border-radius: 8px !important;

    padding: 14px 16px !important;

    font-size: 1rem !important;

    transition: all .3s ease;

}

.assessment-form-wrapper input[type="radio"]{

    width:22px;

    height:22px;

    margin-right:12px;

}

.assessment-form-wrapper textarea {
    min-height: 140px;
}

.assessment-form-wrapper input:focus,
.assessment-form-wrapper textarea:focus,
.assessment-form-wrapper select:focus {

    border-color: #b18024 !important;

    box-shadow: 0 0 0 3px rgba(177,128,36,.18) !important;

}

.assessment-form-wrapper .wpforms-field-description {

    color: #5a6178;

    font-size: .9rem;

}


/* =====================================================
   Radio & Checkbox
===================================================== */

.assessment-form-wrapper .wpforms-field-radio ul,
.assessment-form-wrapper .wpforms-field-checkbox ul {

    padding-left: 0;

}

.assessment-form-wrapper .wpforms-field-radio li,
.assessment-form-wrapper .wpforms-field-checkbox li {

    margin-bottom: 12px;

}


/* =====================================================
    Buttons
===================================================== */

/* Next / Previous Buttons */

.assessment-form-wrapper .wpforms-page-button,
.assessment-form-wrapper button.wpforms-page-button {

    background: #b18024 !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 8px;

    padding: 16px 34px;

    font-size: 1rem;
    font-weight: 700;

    transition: all .25s ease;
}

.assessment-form-wrapper .wpforms-page-button:hover,
.assessment-form-wrapper button.wpforms-page-button:hover {

    background: #8f6518 !important;

    transform: translateY(-2px);

}

/* Submit */

.assessment-form-wrapper .wpforms-submit-container {

    text-align: center;

    margin-top: 40px;

}

.assessment-form-wrapper button.wpforms-submit {

    background: #b18024 !important;

    color: #ffffff !important;

    border: none !important;

    border-radius: 8px !important;

    padding: 16px 40px !important;

    font-size: 1rem !important;

    font-weight: 700 !important;

    transition: all .3s ease;

}

.assessment-form-wrapper button.wpforms-submit:hover {

    background: #8f6518 !important;

    transform: translateY(-2px);

}


/* =====================================================
   WPForms Progress Bar
===================================================== */

.assessment-form-wrapper .wpforms-pagebreak-center {
    margin-bottom: 55px;
}

.assessment-form-wrapper .wpforms-pagebreak-center .wpforms-page-indicator-steps {
    margin-bottom: 12px;
    font-size: .95rem;
    font-weight: 600;
    color: #051f45;
}

.assessment-form-wrapper .wpforms-page-indicator {
    width: 100%;
}

.assessment-form-wrapper .wpforms-page-indicator-page-progress-wrap {
    width: 100%;
    height: 18px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.assessment-form-wrapper .wpforms-page-indicator-page-progress {
    height: 100%;
    background: #b18024 !important;
    border-radius: 999px;
    transition: width .4s ease;
}

.wpforms-pagebreak-center + h3{

    color:#051f45;

    font-size:2.5rem;

    font-weight:700;

    margin-bottom:18px;

    line-height:1.2;

}

/* =====================================================
   Next Steps
===================================================== */

.assessment-next-steps {
    margin: 80px 0;
}

.assessment-next-step-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 60px;
    box-shadow: 0 12px 35px rgba(5,31,69,.08);
}

.assessment-next-step-card .section-eyebrow {
    color: #b18024;
    text-align: center;
    margin-bottom: 10px;
}

.assessment-next-step-card h1 {
    color: #051f45;
    text-align: center;
    margin-bottom: 15px;
}

.next-step-intro {
    text-align: center;
    color: #5a6178;
    max-width: 700px;
    margin: 0 auto 50px;
    font-size: 1.1rem;
}

.next-step-grid {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.next-step-item {
    display: grid;
    grid-template-columns: 80px 1px 90px 1fr;
    align-items: center;
    gap: 28px;

    padding: 30px 35px;

    background: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: 16px;

    transition: .25s ease;
}

.step-number {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #b18024;
    color: #fff;

    font-size: 1.5rem;
    font-weight: 700;

    border-radius: 50%;
}

.step-divider {
    width: 1px;
    height: 70px;
    background: #d9b15b;
}

.step-icon {
    text-align: center;
    font-size: 3rem;
    color: #051f45;
}

.step-content h3 {
    margin: 0 0 10px;
    color: #051f45;
    font-size: 1.55rem;
}

.step-content p {
    margin: 0;
    color: #5a6178;
    line-height: 1.8;
}



/* =====================================================
   Assessment FAQ
===================================================== */

.assessment-faq {
    background: #ffffff;
}


/* =====================================================
   FAQ Grid
===================================================== */

.faq-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 30px;

}


/* =====================================================
   FAQ Card
===================================================== */

.faq-card {

    position: relative;

    padding: 35px;

    overflow: hidden;

}

.faq-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 5px;
    height: 100%;

    background: #b18024;

}

.faq-card h3 {

    margin: 0 0 18px;

    color: #051f45;

    font-size: 1.3rem;

    line-height: 1.4;

}

.faq-card p {

    margin: 0;

    color: #5a6178;

    line-height: 1.8;

}


/* =====================================================
   Final Assessment CTA
===================================================== */

.assessment-final {

    padding: 50px;

}

.assessment-final-card {

    max-width: 900px;

    margin: 0 auto;

    padding: 70px;

    text-align: center;

    background: linear-gradient(
        135deg,
        #051f45,
        #12315e
    );

    border-radius: 18px;

    box-shadow: 0 24px 60px rgba(5,31,69,.18);

}


/* =====================================================
   Eyebrow
===================================================== */

.assessment-final .section-eyebrow {

    display: inline-block;

    margin-bottom: 20px;

    color: #d7b15b;

    font-size: .9rem;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}


/* =====================================================
   Heading
===================================================== */

.assessment-final-card h2 {

    margin-top: 0;
    margin-bottom: 24px;

    color: #ffffff;

    font-size: clamp(2rem,4vw,3rem);

}


/* =====================================================
   Intro Text
===================================================== */

.assessment-final-card p {

    max-width: 720px;

    margin: 0 auto 35px;

    color: rgba(255,255,255,.92);

    font-size: 1.1rem;

    line-height: 1.9;

}


/* =====================================================
   Benefits List
===================================================== */

.assessment-final-list {

    list-style: none;

    margin: 0 auto 45px;

    padding: 0;

    max-width: 500px;

}

.assessment-final-list li {

    position: relative;

    margin-bottom: 18px;

    padding-left: 34px;

    text-align: left;

    color: rgba(255,255,255,.92);

    font-size: 1.05rem;

}

.assessment-final-list li::before {
    content: "\2714";   /* ✓ */

    position: absolute;
    left: 0;

    color: #ffffff;
    font-weight: 700;
    font-size: 1.1rem;
}


/* =====================================================
   Button
===================================================== */

.assessment-final .btn-primary {

    min-width: 240px;
    background: #b18024;
    color: #ffffff;

}

.assessment-final .btn-primary:hover {

    background: #8f6518;

    color: #ffffff;

    transform: translateY(-2px);

}

/* =====================================================
   Future Accordion Support
===================================================== */

.faq-card button {

    all: unset;

    display: block;

    width: 100%;

    cursor: pointer;

}

.faq-card button:hover {

    background: #8f6518;

    color: #ffffff;

    transform: translateY(-2px);

}