.introWrapper {background-image: url(/cisiweb2/image/ethics-hub/IMbg2.jpg);background-position: center center;}
.im-guidance-video { width:100%; max-width:960px; margin:28px 0; }
.im-video-frame { position:relative; height:0; padding-bottom:56.25%; overflow:hidden; background:#003f40; border-radius:4px; }
.im-video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
#faqList { --im-teal:#006563; --im-light:#edf7f6; display:block; width:100%; max-width:none; margin:40px 0; font-family:inherit; }
#faqList .titleFAQ { color:var(--im-teal); margin:0 0 24px; font-size:clamp(26px,3vw,32px); line-height:1.25; }
#faqList .faq-card { margin:0; border:0; border-bottom:1px solid #cbdcda; border-radius:0; background:#fff; box-shadow:none; overflow:visible; transition:none; }
#faqList .faq-card:first-of-type { border-top:1px solid #cbdcda; }
#faqList .faq-card:hover { background:#f4f9f8; }
#faqList .faq-card[open] { background:var(--im-light); border-left:0; box-shadow:none; }
#faqList .faq-summary { display:flex; gap:16px; align-items:center; justify-content:space-between; min-height:60px; box-sizing:border-box; padding:18px 20px; font:inherit; font-size:18px; font-weight:600; line-height:1.45; color:var(--im-teal); list-style:none; cursor:pointer; }
#faqList .faq-summary > span:first-child { min-width:0; overflow-wrap:anywhere; }
#faqList .faq-summary::-webkit-details-marker { display:none; }
#faqList .faq-summary::marker { content:""; }
#faqList .faq-summary:focus-visible { outline:3px solid #006563; outline-offset:-3px; border-radius:0; }
#faqList .chevron-icon { display:flex; align-items:center; justify-content:center; flex:0 0 28px; width:28px; height:28px; margin:0; background:transparent; }
#faqList .chevron-icon svg { width:18px; height:18px; stroke:var(--im-teal); fill:none; stroke-width:2; }
#faqList .faq-card[open] .chevron-icon { background:transparent; }
#faqList .faq-card[open] .chevron-icon svg { transform:rotate(180deg); }
#faqList .faq-content { padding:0 20px 22px; border:0; color:inherit; font:inherit; font-size:16px; line-height:1.7; animation:none; }
#faqList .faq-content p { margin:0 0 12px; max-width:100ch; }
#faqList .faq-content p:last-child { margin-bottom:0; }
#faqList .faq-content a { color:var(--im-teal); text-decoration:underline; }
#faqList .badge { display:inline; padding:0; border-radius:0; font:inherit; font-weight:700; background:transparent; color:inherit; white-space:normal; }
@media(max-width:600px) { .im-guidance-video { margin:22px 0; } #faqList { margin:30px 0; } #faqList .faq-summary { padding:16px 12px; font-size:17px; } #faqList .faq-content { padding:0 12px 18px; } }
@media(prefers-reduced-motion:reduce) { #faqList * { animation:none!important; transition:none!important; } }
/* //#92562 - Add 5% margins to both sides of the IntegrityMatters content. */
#im-content { color:inherit; font-family:inherit; line-height:1.7; padding:32px 0 8px; margin-left:5%; margin-right:5%; }
#im-content > p { margin:0 0 22px; }
#im-content .im-benefits-title { color:#006563; font-size:24px; margin:30px 0 14px; }
#im-content > ul { padding-left:24px; margin:0 0 26px; }
#im-content > ul li { margin-bottom:8px; }
/* //#92562 - Preserve the existing button appearance inside the banner. */
#im-content > .btn, #im-content .im-assessment-actions > .btn { display:inline-block; background:#007d7e; border:1px solid #007d7e; border-radius:4px; color:#fff; padding:12px 24px; font:inherit; font-weight:600; line-height:1.5; text-decoration:none; }
/* //#92562 - Preserve the existing button hover appearance. */
#im-content > .btn:hover, #im-content .im-assessment-actions > .btn:hover { background:#006563; border-color:#006563; }
/* //#92562 - Preserve the existing button keyboard focus appearance. */
#im-content > .btn:focus-visible, #im-content .im-assessment-actions > .btn:focus-visible { outline:3px solid #006563; outline-offset:4px; }
#im-content #faqList { margin-top:40px; }
@media(max-width:600px) { #im-content { padding-top:24px; } }

/* //#92562 - IntegrityMatters section headings, feature cards and FAQ layout. */
/* //#92562 - Match the heading colour on the document's reference page. */
#im-content > .im-section-title,
#im-content #faqList .titleFAQ {
    color: #0b8383;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.25;
    margin: 30px 0 18px;
}

/* //#92562 - Four feature boxes using the existing im- naming convention. */
#im-content .im-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    margin: 30px 0;
}

/* //#92562 - Rounded navy-to-blue boxes with white content. */
#im-content .im-feature-card {
    padding: 40px 20px 30px;
    border-radius: 30px;
    background: linear-gradient(135deg, #16192e 0%, #222f59 60%, #2868b6 100%);
    color: #fff;
    text-align: center;
}

/* //#92562 - Reuse the site's Font Awesome icons in white. */
#im-content .im-feature-icon {
    display: block;
    margin: 0 0 20px;
    color: #fff;
    font-size: 100px;
    line-height: 1;
}

/* //#92562 - Keep feature copy aligned and readable inside each box. */
#im-content .im-feature-card p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

/* //#92562 - Display the existing FAQ questions in paired rows. */
#im-content #faqList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

/* //#92562 - Keep the FAQ heading above both columns. */
#im-content #faqList .titleFAQ {
    grid-column: 1 / -1;
    margin: 0 0 8px;
}

/* //#92562 - Match the light rounded FAQ boxes in the document. */
#im-content #faqList .faq-card {
    min-width: 0;
    border: 1px solid #dfe3ea;
    border-radius: 6px;
    background: #f7f9fb;
    overflow: hidden;
}

/* //#92562 - Match the FAQ text and spacing while retaining its controls. */
#im-content #faqList .faq-summary {
    min-height: 70px;
    padding: 20px 24px;
    color: #123647;
}

/* //#92562 - Keep the existing teal chevrons aligned with the new boxes. */
#im-content #faqList .chevron-icon svg {
    stroke: #007d7e;
}

/* //#92562 - Fit the feature boxes to tablet widths. */
@media (max-width: 991px) {
    #im-content .im-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* //#92562 - Stack feature and FAQ boxes on small screens. */
@media (max-width: 600px) {
    #im-content .im-feature-grid,
    #im-content #faqList {
        grid-template-columns: 1fr;
    }
    #im-content .im-feature-grid {
        gap: 20px;
    }
    #im-content #faqList .faq-summary {
        padding: 16px;
    }
}

/* //#92562 - Customer-support link styling moved from the HTML. */
#im-content #faqList .im-support-link {
    color: var(--brand-teal);
    font-weight: 600;
}

/* //#92562 - Student-members note styling moved from the HTML. */
#im-content #faqList .im-faq-note {
    margin-top: 0.4rem;
    font-style: italic;
    color: var(--text-muted);
}

/* //#92562 - Match the ethics portal navy banner without altering the button. */
#im-content .im-assessment-banner {
    position: relative;
    overflow: hidden;
    margin: 28px 0 56px;
    padding: 32px 36px;
    border-radius: 4px;
    background: linear-gradient(135deg, #0c2d6b 0%, #08214f 100%);
    color: #fff;
}

/* //#92562 - Subtle decorative rings from the reference banner. */
#im-content .im-assessment-banner::before,
#im-content .im-assessment-banner::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    border-radius: 50%;
    pointer-events: none;
}

/* //#92562 - Outer decorative ring. */
#im-content .im-assessment-banner::before {
    top: -40px;
    right: -40px;
    width: 240px;
    height: 240px;
    border: 1.5px solid rgba(255, 255, 255, 0.08);
}

/* //#92562 - Inner decorative ring. */
#im-content .im-assessment-banner::after {
    top: -10px;
    right: -10px;
    width: 170px;
    height: 170px;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
}

/* //#92562 - Align banner copy and the original assessment button. */
#im-content .im-assessment-banner-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
}

/* //#92562 - White banner heading matching the reference. */
#im-content .im-assessment-copy h2 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
}

/* //#92562 - Supporting banner copy matching the reference. */
#im-content .im-assessment-copy p {
    max-width: 460px;
    margin: 0;
    color: #d8e2eb;
    font-size: 16px;
    line-height: 1.55;
}

/* //#92562 - Position the button without stretching or resizing it. */
#im-content .im-assessment-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* //#92562 - Stack the banner content on smaller screens. */
@media (max-width: 960px) {
    #im-content .im-assessment-banner-inner {
        grid-template-columns: minmax(0, 1fr);
    }
    #im-content .im-assessment-actions {
        justify-content: flex-start;
    }
}