/*------------------------------------------------------------
    FONTS
-----------------------------------------------------------*/
/* Via google-webfonts-helper */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('../font/inter-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter Bold';
    font-style: normal;
    font-weight: 800;
    src: url('../font/inter-v20-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* -----------------------------------------------------------
   GLOBAL RESET & BASE
----------------------------------------------------------- */
body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: #f8f9fc;
    color: #1a1a1a;
}

a {
    text-decoration: none;
    color: inherit;
    font-family: 'Inter', sans-serif;
}


.button-outline,
.button-clear {
 padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1.2rem;
    display: inline-block;
    font-family: 'Inter', sans-serif;
    border: none;
    cursor: pointer;
    line-height: 1.2;
    -webkit-appearance: none;
    appearance: none;
}


 .button-primary {
    background: #2563eb;
    color: #fff;
    border-radius: 6px;
     font-size: 1.5rem;
    font-weight: 600;
     line-height: 1.2;
    display: inline-block;
    font-family: 'Inter', sans-serif;
}

.button-primary:hover {
    background: #1e4fc7;
    color: #fff;
}

.button-outline {
    border: 2px solid #2563eb;
    color: #2563eb;
}

.button-outline:hover {
    background: #2563eb;
    color: #fff;
}

.button-clear {
    background: #ffffff;
    color: #374151;
}

.button-clear:hover {
    color: #2563eb;
}

/* -----------------------------------------------------------
   HEADER & NAVIGATION
----------------------------------------------------------- */
.header {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    padding-top: 15px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-size: 24px;
    font-weight: 700;
    color: #2563eb;
    display: flex;
    align-items: center;
    padding-bottom: 15px;
    padding-left: 12%;
    font-family: 'Inter Bold', sans-serif;
    gap: 10px;
    text-decoration: none;
}

.logo img {
    display: block;
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 25px;
    align-items: center;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

.nav-links li a {
    font-weight: 500;
    color: #374151;
    text-decoration: none;
}

.nav-links li a:hover {
    color: #2563eb;
}

.nav-actions {
    display: flex;
    gap: 15px;
    align-items: center;
    padding-bottom: 15px;
    padding-right: 10%;
}

/*------------------------------------------------------------
    LANDING PAGE BODY
 -----------------------------------------------------------*/


body {
    font-family: -apple-system, "Inter", "Segoe UI", sans-serif;
    color: var(--navy);
    font-size: 15px;
    line-height: 1.5;
}

section {
    max-width: 5000px;
    margin: 0 auto;
    padding: 64px 24px;
}

h1 { font-size: 40px; line-height: 1.15; margin-bottom: 16px; }
h2 { font-size: 26px; text-align: center; margin-bottom: 8px; }
h3 { font-size: 17px; margin-bottom: 8px; }

.landing-page {
    display: flex;
    flex-direction: column;
    padding: 5% 0;
    background: #eff3fa;
}

.landing-page > * {
    width: 100%;
    margin: 0 auto;
}

/* -----------------------------------------------------------
   MOBILE NAV TOGGLE
----------------------------------------------------------- */
.mobile-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #2563eb;
}

/* -----------------------------------------------------------
   MOBILE RESPONSIVE NAVIGATION
----------------------------------------------------------- */
@media (max-width: 768px) {

    .nav {
        flex-wrap: wrap;
    }

    .mobile-toggle {
        display: block;
    }

    .nav-links,
    .nav-actions {
        width: 100%;
        display: none;
        flex-direction: column;
        text-align: center;
        padding: 15px 0;
        gap: 15px;
    }

    /* When nav-open class is applied to body */
    body.nav-open .nav-links,
    body.nav-open .nav-actions {
        display: flex;
    }

    .nav-links li {
        margin: 10px 0;
    }
}

/*------------------------------------------------------------
  Mobile Additional Styling
------------------------------------------------------------*/

/* Universal vertical stacking for mobile */
@media (max-width: 768px) {

    /* Certification path */
    .path-steps {
        flex-direction: column;
        gap: 20px;
    }

    /* Compliance charts */
    .compliance-visual {
        flex-direction: column;
        align-items: center;
    }

    /* Pricing cards */
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    /* Feature cards */
    .feature-grid {
        grid-template-columns: 1fr;
    }

    /* Partners list */
    .partners ul {
        flex-direction: column;
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .nav-links,
    .nav-actions {
        transition: all 0.3s ease;
        opacity: 0;
    }

    body.nav-open .nav-links,
    body.nav-open .nav-actions {
        opacity: 1;
    }
}

:root {
    --navy: #1e2a5e;
    --blue: #4f63f6;
    --blue-dark: #3949d1;
    --gray-text: #5b6472;
    --border: #e7e9f0;
    --bg-soft: #eef1fd;
    --radius: 14px;
    --shadow: 0 4px 20px rgba(30, 42, 94, 0.06);
}


/* -----------------------------------------------------------
   HERO SECTION
----------------------------------------------------------- */

.hero {
    max-width: 1100px;
    margin: 0 auto;
    padding: 72px 24px 48px;
    text-align: left;
}
.hero h1 { max-width: 640px; color: var(--navy); }
.hero p { max-width: 560px; color: var(--gray-text); font-size: 17px; margin-bottom: 24px; }


.hero-home {
    max-width: 1100px;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    padding: 72px 24px 48px;
    text-align: left;
    padding-bottom: 140px;
}
.hero-content {
    flex: 1 1 auto;
    min-width: 0;
}
.hero-content h1 { max-width: 480px; color: black;font-size: 60px; font-weight: 900;}
.hero-content h1 .hero-highlight { color: var(--blue); }
.hero-content p { max-width: 440px; color: var(--gray-text); font-size: 17px; margin-bottom: 24px; }

.btn, .hero a.btn-light {
    display: inline-block;
    background: var(--blue);
    color: #fff !important;
    padding: 12px 26px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
}

.btn-right{
    text-align: right;
    margin-top: 30px;
}

.btn:hover, .hero a.btn-light:hover { background: var(--blue-dark); }

.hero-visual {
    flex: 0 0 520px;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
}
.hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* -----------------------------------------------------------
   PARTNERS
----------------------------------------------------------- */

.partners { padding-top: 50px; padding-bottom: 50px; background-color: #FFFFFF;}
.partners h2 {
    color: #9aa1b1;
    font-weight: 500;
    letter-spacing: 0.06em;
    font-size: 12px;
    text-transform: uppercase;
    padding-bottom: 20px;
}
.partners ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 48px;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}
.partners li {
    color: #9aa1b1;
    font-weight: 800;
    letter-spacing: 0.06em;
    font-size: 17px;
    text-transform: uppercase;
}
/* -----------------------------------------------------------
   FEATURES GRID
----------------------------------------------------------- */
.features {
    padding: 80px 20px;
    text-align: center;
}

.features h2 {
    padding-top: 10px;
    font-size: 45px;
    font-weight: 900;
    color: black;
}

.features h2 .feature-highlight { color: var(--blue); }

.features h3{
    color: #4b5563;
}

.feature-grid {
    display: grid;
    padding: 100px 100px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 50px;
}

.feature-card {
    background: #ffffff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    text-align: left;
}

.feature-card h3 {
    margin-bottom: 10px;
    color: #000000;
    font-weight: 900;
}
.feature-icon {
    display: inline-flex;
    width: 34px; height: 34px;
    border-radius: 8px;
    background: var(--bg-soft);
    color: var(--blue);
    align-items: center; justify-content: center;
    margin-bottom: 12px;
}


/* -----------------------------------------------------------
   CERTIFICATION PATH
----------------------------------------------------------- */
.path { text-align: center; max-width: 2000px; background-color: #FFFFFF; padding-bottom: 80px;}
.path-steps {
    position: relative;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.path-steps::before {
    content: "";
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: var(--border);
    z-index: 0;
}
.path h2{
    padding-top: 30px;
    font-weight: 900;
    font-size: 35px;
}
.path-step {
    position: relative;
    z-index: 1;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 36px 40px 32px;
}
.path-circle {
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    margin: -58px auto 16px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 6px #fff;
}

.path-step summary {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    list-style: none;
}
.path-step summary::-webkit-details-marker {
    display: none;
}
.path-step summary::marker {
    content: "";
}

.path-step h3 {
    color: var(--navy);
    margin: 0;
    font-weight: 700;
    font-size: 20px;
    display: flex;
    align-items: center;
    text-center: center;
    gap: 8px;
}

.path-chevron {
    width: 16px;
    height: 16px;
    color: var(--gray-text);
    transition: transform 0.25s ease;
}

.path-step.open .path-chevron {
    transform: rotate(180deg);
}


.path-step p {
    color: var(--gray-text);
    font-size: 14px;
    max-width: 900px;
    margin: 0 auto;
    padding-top: 14px;
    line-height: 1.6;
    text-align: center;
}

/* -----------------------------------------------------------
   COMPLIANCE TREND
----------------------------------------------------------- */
.compliance {
    padding: 80px 40px;
    text-align: left;
}

.compliance-visual h2{
    font-size: 23px;
    font-weight: 900;
    padding: 20px;
    color: black;
    text-align: left;
}

.compliance-visual {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 30px;
    width: fit-content;
    margin: 0 auto;
}
.compliance-visual img {
    display: block;
    width: 800px;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* -----------------------------------------------------------
   PRICING
----------------------------------------------------------- */
.pricing {
    padding: 10px 50px;
    text-align: center;
    /*background-color: #FFFFFF;*/
}

.pricing h2{
    font-size: 30px;
    font-weight: 600;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.pricing-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.pricing-card h3,
.pricing-card--featured h3{
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 10px;
}

.price {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #2563eb;
}

.pricing-card ul,
.pricing-card--featured ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.pricing-card ul li,
.pricing-card--featured ul li {
    margin-bottom: 8px;
    color: #4b5563;
}

.pricing-card--featured {
    background: #1a1a2e;
    padding: 30px;
    color: #fff;
    border-color: #1a1a2e;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.30);
}

.pricing-card--featured .pricing-subtitle,
.pricing-card--featured ul li {
    color: #aab0c6;
}

/* -----------------------------------------------------------
   FAQ
----------------------------------------------------------- */
.faq {
    padding: 80px 80px;
}


.faq h2{
    font-weight: 600;
    font-size: 30px;
    padding-bottom: 15px;
}

.faq details p{
    padding-top: 10px;
}

.faq details {
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    background-color: #FFFFFF;
}

.faq summary {
    font-weight: 600;
    cursor: pointer;
}


/* -----------------------------------------------------------
   CONTACT US
----------------------------------------------------------- */

.contact-section {
    padding: 3rem 1.5rem;
    margin: 0 auto;
    background: #ffffff;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .contact-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .contact-section .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .contact-section .col-md-8,
    .contact-section .col-lg-9,
    .contact-section .col-md-4,
    .contact-section .col-lg-3 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


.contact-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}

.contact-card {
    background: #fff;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.08);
    overflow: visible;
}

.contact-card-title {
    font-size: 2.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #2a2a33;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group { margin-bottom: 1.1rem; }

.form-label {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 0.4rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    background: #f8f9fb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    font-size: 0.9rem;
    color: #1a1a2e;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #2563eb;
    background: #fff;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9ca3af;
}

.btn-primary{
    background: #2563eb;
    color: #fff;
    border-radius: 6px;
    padding: 12px 24px;
    font-weight: 600;
    display: inline-block;
    font-family: 'Inter', sans-serif;
}

.btn-controls{
    margin-left: 50px;
    color: #3e4047;
    border-radius: 6px;
    padding: 12px 24px;
    font-weight: 600;
    display: inline-block;
    font-family: 'Inter', sans-serif;
}

.button-lower {
    margin-top: 60px;
}

.btn-submit {
    width: 100%;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.85rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-submit:hover { background: #3861ca; }

/* Sidebar */
.contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sidebar-card {
    background: #f8f9fb;
    border-radius: 12px;
    padding: 1.25rem;
}

.sidebar-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2ff;
    color: #2563eb;
    border-radius: 8px;
    margin-bottom: 0.6rem;
}

.sidebar-card h4 {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 0.3rem;
    color: #1a1a2e;
}

.sidebar-card p {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0 0 0.3rem;
    line-height: 1.4;
}

.sidebar-card a {
    font-size: 0.8rem;
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}

.sidebar-card--highlight {
    background: #e9effa;
}
/* -----------------------------------------------------------
   ERROR
----------------------------------------------------------- */
.error-message {
    color: #d32f2f;
    font-size: 1.5rem;
    margin-top: 0.1rem;
}

.input.error input,
.input.error select,
.input.error textarea {
    border: 1px solid #d32f2f;
    background-color: #fff5f5;
}

/* -----------------------------------------------------------
   Contact Hero
----------------------------------------------------------- */
.contact-hero {
    margin: 0 auto;
    padding: 3rem 22rem 1rem;
    text-align: left;
}

.hero-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #2563eb;
    margin-bottom: 0.75rem;
}

.contact-hero h1 {
    font-size: 5.0rem;
    font-weight: 1000;
    color: #1a1a2e;
    margin: 0 0 0.75rem;
}

.contact-hero p {
    color: #6b7280;
    font-size: 1.5rem;
    line-height: 1.5;
    padding-bottom: 50px;
}

/*FOR ASSESSMENT PAGE HERO*/
/* Desktop & tablet */
.assessment-hero {
    max-width: 900px;        /* keeps hero nicely centered */
    margin: 0 auto;          /* centers horizontally */
    padding: 3rem 2rem 1rem; /* safe padding */
    text-align: center;
}

/* Mobile */
@media (max-width: 768px) {
    .assessment-hero {
        padding: 0 16px !important; /* force override */
        margin-bottom: 20px;
        text-align: center;
    }

    .assessment-hero h1 {
        font-size: 26px;
        margin-bottom: 10px;
    }

    .assessment-hero p {
        font-size: 15px;
        line-height: 1.4;
        margin: 0 auto;
        max-width: 90%;
    }
}

.hero-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #2563eb;
    margin-bottom: 0.75rem;
}


.assessment-hero h1 {
    font-size: 3.7rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 0.75rem;
}

.assessment-hero p {
    padding-top: 10px;
    color: #6b7280;
    font-size: 1.6rem;
    line-height: 1.5;
}

.assessment-hero h3 {
    color: #6b7280;
    font-size: 1.6rem;
    line-height: 1.5;
    font-weight: 400;
}


/* -----------------------------------------------------------
   FAQ
----------------------------------------------------------- */
.faq-section {
    max-width: 700px;
    margin: 3rem auto;
    padding: 0 1.5rem;
}

.faq-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.faq-header h2 {
    font-size: 2.3rem;
    font-weight: 700;
    color: #3e4047;
    margin-bottom: 0.4rem;
}

.faq-header p {
    color: #6b7280;
    font-size: 1rem;
}

.faq-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
}

.faq-item summary {
    font-weight: 600;
    font-size: 1.3rem;
    color: #3e4047;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '⌄';
    float: right;
    color: #6b7280;
    font-weight: 700;
}

.faq-item[open] summary::after {
    content: '−';
}

.faq-item p {
    margin-top: 0.75rem;
    color: #6b7280;
    font-size: 1rem;
    line-height: 1.5;
}



/* -----------------------------------------------------------
   FAQ
----------------------------------------------------------- */

.confirmation-section {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    background: #ffffff;
}

.confirmation-card {
    background: #e5e7f4;
    border-radius: 16px;
    padding: 3rem 2.5rem;
    max-width: 700px;
    width: 100%;
    text-align: center;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.08);
}

.confirmation-card h2 {
    font-size: 2.5rem;
    color: #1a1a2e;
    margin: 0 0 0.6rem;
}

.confirmation-card p {
    color: #6b7280;
    font-size: 1.5rem;
    line-height: 1.5;
    margin: 0 0 1.75rem;
}


/* -----------------------------------------------------------
   FOOTER
----------------------------------------------------------- */
.footer {
    text-align: center;
    padding: 30px;
    background: #0f172a;
    border-top: 1px solid #e5e7eb;
    color: #6b7280;
}
/*Mobile*/
@media (max-width: 720px) {
    .contact-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
}

 main.content{
     flex: 1;
 }
.footer-modern {
    background: #e8f0ff; /* same light blue used in hero */
    padding: 40px 20px;
    margin-top: auto;
    width: 100%;
    text-align: center;
    color: #1a1a2e;
    border-top: 1px solid rgba(0,0,0,0.05);
}

.footer-modern .footer-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
    font-weight: 600;
    color: #2563eb;
}

.footer-modern .footer-links a:hover {
    color: #1e4fc7;
}

.footer-modern p {
    font-size: 0.9rem;
    color: #6b7280;
}

/*-------------------------------------------------------------
   ABOUT
 ------------------------------------------------------------*/
.about {
    text-align: center;
    padding: 3%;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-radius: 12px;
}

.about p {
    width: 100%;
    font-size: 20px;
    font-family: Inter, sans-serif;
}

/*FOR ABOUT PAGE HERO*/

.about-hero {
    margin: 0 auto;
    padding: 6rem 22rem 1rem;
    text-align: center;
}

.hero-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #2563eb;
    margin-bottom: 0.75rem;
}


.about-hero h1 {
    font-size: 5.3rem;
    font-weight: 900;
    color: #000000;
    margin: 0 0 0.75rem;
}

.about-hero h2 {
    font-size: 3.7rem;
    font-weight: 1000;
    color: #1a1a2e;
    margin: 0 0 0.75rem;
}

.about-hero p {
    color: #6b7280;
    font-size: 3rem;
    line-height: 0.8;
}


.who-intro {
    max-width: 850px;
    margin: 40px auto;
    padding-top: 30px;
    padding-bottom: 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.who-eyebrow {
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 1000;
    color: #3e4047;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}

.who-intro h2 {
    font-size: 5.5rem;
    font-weight: 1000;
    color: #1a1a2e;
    line-height: 1.35;
    margin: 0;
}
.who-intro-text {
    flex: 1;
}

.who-intro h2 .highlight {
    color: #2563eb;
}

.who-hero-kicker {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue);
    background: var(--bg-soft);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.about-h p {
    font-size: 1.5rem;
    line-height: 1.75;
    color: #4b5563;
    margin-bottom: 1.25rem;
}

.about {
    max-width: 1300px;
    margin: 2.5rem auto 0;
    text-align: center;
}

.about p {
    font-size: 1.5rem;
    line-height: 1.75;
    color: #4b5563;
    margin-bottom: 1.25rem;
}

.about p:last-child {
    margin-bottom: 0;
}

.who-values {
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.value-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 22px;
    text-align: left;
}
.value-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 8px;
}
.value-card p {
    font-size: 14px;
    color: var(--gray-text);
    margin: 0;
    line-height: 1.5;
}


/*Why us section */
.why-us-intro {
    max-width: 800px;
    margin: 0 auto 3rem;
    text-align: center;
}

.why-us-intro h2 {
    padding-top: 80px;
    font-size: 3.4rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

.why-us-intro h2 .highlight {
    color: #2563eb;
}

.why-us-intro h3 {
    padding-top: 40px;
    font-size: 2.2rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.feature-grid-about {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-card-about {
    display: flex;
    align-items: flex-start;
    gap: 1.7rem;
    background: var(--white, #ffffff);
    border-radius: 14px;
    padding: 2.2rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.feature-card-about:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.feature-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef3ff;
    border-radius: 10px;
}

.feature-text-about h3 {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: #1a1a2e;
}

.feature-text-about p {
    font-size: 1.5rem;
    color: #6b7280;
    margin: 0;
}

.why-us-close {
    padding-top: 45px;
    max-width: 720px;
    margin: 2rem auto 0;
    text-align: center;
    font-size: 2rem;
    color: #1a1a2e;
    font-weight: 500;
}


/*PRICING PAGE*/

.about-pricing {
    margin: 100px 100px;
    text-align: center;
    padding: 3%;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-radius: 12px;
}

.about-pricing p {
    width: 100%;
    font-size: 20px;
    font-family: Inter, sans-serif;
}

.pricing-hero {
    max-width: 1100px;
    margin: 0 auto;
    padding: 72px 24px 48px;
    text-align: left;
}
.pricing-hero h1 { max-width: 640px; color: #000000; font-weight: 900; font-size: 50px;}
.pricing-hero p { max-width: 560px; color: var(--gray-text); font-size: 20px; margin-bottom: 15px; }
.pricing-hero h3 { max-width: 560px; color: #4b5563; font-size: 19px; margin-bottom: 24px; }


/* -----------------------------------------------------------
  Framework Cards
----------------------------------------------------------- */

.framework-card {
    background: var(--framework-bg);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    cursor: pointer;
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Title colour matching Prism blue */
.framework-card .card-title {
    color: #2563eb;
}

/* Hover lift effect */
.framework-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* Selected state — light blue fill */
.framework-card.selected {
    background: #e8f0ff; /* Prism hero gradient light blue */
    border-color: #2563eb;
    box-shadow: 0 6px 18px rgba(37,99,235,0.15);
}

/* Colour themes (still works for unselected state) - May need to be removed for UI changes
.framework-card:nth-child(1) { --framework-bg: #F3F7FF; }
.framework-card:nth-child(2) { --framework-bg: #FFF6E8; }
.framework-card:nth-child(3) { --framework-bg: #E9FFF3; }
.framework-card:nth-child(4) { --framework-bg: #F9E9FF; }
*/
/* Hide the native checkbox */
.modern-check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Custom checkbox container */
.modern-check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 500;
    color: #374151;
}

/* The visual checkbox */
.modern-check-box {
    width: 22px;
    height: 22px;
    border: 2px solid #2563eb;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: #ffffff;
}

/* Checkmark icon */
.modern-check-box::after {
    content: '';
    width: 12px;
    height: 12px;
    background: #2563eb;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* When checked */
.modern-check:checked + .modern-check-box {
    background: #e8f0ff;
    border-color: #1e4fc7;
}

.modern-check:checked + .modern-check-box::after {
    opacity: 1;
}

/* Hover effect */
.modern-check-label:hover .modern-check-box {
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

/* Fullscreen darkened overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.45);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* ensures it sits above everything */
}

/* Modal card */
.modal-card {
    background: #ffffff;
    padding: 28px;
    border-radius: 12px;
    width: 420px;
    max-width: 90%;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    text-align: center;
    animation: modalFadeIn 0.25s ease-out;
}

/* Title */
.modal-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}

/* Buttons */
.modal-actions {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

/* Fade-in animation */
@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.button-outline {
    padding: 10px 18px;
    border: 2px solid #2563eb;
    background: transparent;
    color: #2563eb;
    border-radius: 6px;
    cursor: pointer;
}

.button-primary {
    margin-top: 10px;
    background: #2563eb;
    color: white;
    border-radius: 6px;
    cursor: pointer;
}

.button-primary-started {
    padding: 8px 8px;
    background: #2563eb;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

/* Rating inputs */

/* Modern 0–5 rating selector */
.rating-scale {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.rating-option {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
    color: #374151;
}

.rating-option:hover {
    border-color: #2563eb;
    color: #2563eb;
}

.rating-option.selected {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37,99,235,0.15);
}

/* -----------------------------------------------------------
  REGISTER PAGE
----------------------------------------------------------- */
.register-card {
    width: 100%;
    max-width: 650px;
    margin: 0 auto 60px;
    padding: 50px 55px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.field-help {
    font-size: 13px;
    color: #6b7280;
}
.organisation-card {
    width: 90%;
    max-width: 850px;
    padding: 40px 50px;
}


.terms-card {
    max-width: 900px;
}


.terms-pdf {
    width: 100%;
    height: 600px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}


.terms-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.terms-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.5;
    color: #4b5563;
}

.terms-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    flex-shrink: 0;
    cursor: pointer;
}

.terms-checkbox label {
    cursor: pointer;
}

.message.error {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;

    width: auto;
    max-width: 420px;
    min-width: 280px;

    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    margin-bottom: 0; /* margin doesn't matter now that it's fixed/floating */

    animation: slideDown 0.25s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translate(-50%, -12px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.message.success {
    background: #ecfdf5;
    color: #166534;
    border: 1px solid #bbf7d0;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 18px;
}


.login-form .required > label::after {
    content: " *";
    color: #dc2626;
    font-weight: 600;
}


.password-wrapper {
    position: relative;
}

.password-wrapper .password-toggle {
    position: absolute;
    right: 15px;
    top: 41px;
    cursor: pointer;
    z-index: 10;
}
@media (max-width: 768px) {

    /* Main login/register page */
    .login-page {
        width: 100%;
        min-height: 100vh;
        padding: 20px 12px;
        box-sizing: border-box;

        /* IMPORTANT: stop the desktop two-column layout */
        display: block;
        overflow-x: hidden;
    }

    /* Hide the large desktop-side introduction */
    .login-page > .login-intro {
        display: none;
    }

    /* Register/login card */
    .register-card,
    .login-card,
    .organisation-card,
    .terms-card {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 24px 18px ;
        box-sizing: border-box;
        border-radius: 10px;
    }

    /* Make sure the form itself doesn't overflow */
    .login-form {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Inputs */
    .login-form input:not([type="checkbox"]),
    .login-form select,
    .login-form textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px;
    }

    /* Header */
    .login-header {
        margin-bottom: 20px;
    }

    .login-header h2 {
        font-size: 28px;
        line-height: 1.2;
    }

    .login-header p {
        font-size: 15px;
        line-height: 1.5;
    }

    /* Field help text */
    .field-help {
        font-size: 12px;
        line-height: 1.4;
    }

    /* Password wrapper */
    .password-wrapper {
        position: relative;
        width: 100%;
    }

    .password-wrapper input {
        padding-right: 45px;
    }

    .password-wrapper .password-toggle {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        z-index: 10;
    }



    /* Forgot password area */
    .password-label {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    .forgot-password {
        white-space: nowrap;
    }

    /* Terms */
    .terms-pdf {
        width: 100%;
        height: 450px;
    }

    .terms-actions {
        flex-direction: column;
        gap: 10px;
    }

    .terms-actions button {
        width: 100%;
    }

    .terms-checkbox {
        width: 100%;
        font-size: 13px;
    }

    .terms-checkbox input[type="checkbox"] {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }
}

/*
CONTROLS/CATEGORY UI*/
.progress-bar { background: #e5e7eb; border-radius: 8px; height: 10px; overflow: hidden; margin: 8px 0 40px; }
.progress-fill { background: #2a6496; height: 100%; transition: width 0.3s ease; }
.progress-label { display: flex; justify-content: space-between; font-weight: 600; }

.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.category-card { border: 3px solid #e5e7eb; border-radius: 12px; padding: 25px; text-decoration: none; color: inherit; display: block; }
.category-card h2 { margin: 0 0 12px; font-size: 1.7rem; font-weight: 400; }
.category-progress-bar { background: #e5e7eb; border-radius: 8px; height: 8px; overflow: hidden; }
.category-progress-fill { background: #2563eb; height: 100%; }
.category-count { margin: 8px 0 0; font-size: 0.85rem; color: #555; }

.control-item { border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 10px; overflow: hidden; background: #fff; }
.control-item.open { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb; }
.control-header {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: #f9fafb;
    border: none;
    cursor: pointer;
    text-align: left;
    line-height: normal;
    letter-spacing: normal;
    white-space: normal;
    text-transform: none;
    font-weight: 400;
    font-size: 1rem;
    transition: background 0.15s ease;
}
.control-item.open .control-header {
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
}
.control-code {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 8px 10px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
    background: #94a3b8;
}
.control-code.code-completed { background: #16a34a; }
.control-code.code-partial { background: #2563eb; }
.control-code.code-not-attempted { background: #94a3b8; }
.control-code.code-na { background: #7c3aed; }

.control-heading {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.control-title { font-weight: 700; font-size: 1rem; color: #111827; }
.control-requirement {
    display: none;
    font-size: 0.85rem;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.4;
}
.control-item.open .control-requirement { display: block; }

.control-file-count {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: #6b7280;
    white-space: nowrap;
}
.control-status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 10px 20px;
    margin-right: 6px;
    border-radius: 999px;
    background: #eee;
    white-space: nowrap;
}
.status-completed { background: #dcfce7; color: #166534; }
.status-partial { background: #dbeafe; color: #1e40af; }
.status-not-attempted { background: #f1f5f9; color: #64748b; }
.status-na { background: #ede9fe; color: #5b21b6; }
.status-icon { font-weight: 700; }


.control-body { display: none; padding: 20px; }
.field-group { margin-bottom: 14px; }
.field-group label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 0.9rem; }

.control-item.open .control-body { display: block; }

.chevron { transition: transform 0.2s ease; }
.control-item.open .chevron { transform: rotate(180deg); }

.dropzone { border: 2px dashed #cbd5e1; border-radius: 8px; padding: 24px; text-align: center; color: #64748b; cursor: pointer; }
.dropzone-icon { font-size: 1.4rem; color: #94a3b8; margin-bottom: 6px; }
.browse-link { color: #2563eb; font-weight: 600; }
.dropzone-hint { font-size: 0.75rem; color: #94a3b8; margin-top: 4px; }

.evidence-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: start; }

.evidence-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.evidence-file-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}
.file-icon { font-size: 1.1rem; }
.file-meta { display: flex; flex-direction: column; min-width: 0; }
.file-name { font-size: 0.85rem; font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-sub { font-size: 0.75rem; color: #94a3b8; }

.no-evidence-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 0.85rem;
    color: #475569;
    cursor: pointer;
}

.example-artefact-card {
    border: 1px #9ca3af;
    border-radius: 10px;
    padding: 16px;
    background: #f1f5f9;
    height: 100%;
}
.example-artefact-text { font-size: 0.85rem; color: #475569; margin: 6px 0 0; }
.example-artefact-placeholder { color: #94a3b8; font-style: italic; }


.control-header:focus {
    outline: none;
}
.control-header:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

.btn-back {
    padding: 10px 30px;
}

.controls-overview {
    position: relative;
}
.complete-assessment-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 32px;
}

.complete-assessment-footer .btn {
    padding: 12px 24px;
    box-shadow: 0 4px 12px;
}

.complete-assessment-footer button[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
}

.prism-btn-primary,
.prism-btn-primary:link,
.prism-btn-primary:visited,
.prism-btn-primary:active {
    background-color: #2563eb;
    border: none;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.prism-btn-secondary{
    background-color: #9ca3af;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.prism-btn-primary:hover {
    background-color: #1d4ed8;
    color: #ffffff;
    transform: translateY(-2px);
}

.text-center.justify-right {
    display: flex;
    justify-content: flex-end;
    padding-top: 50px;
    padding-right: 50px;
}

button.prism-btn-disabled,
button.prism-btn-disabled:hover,
button.prism-btn-disabled:focus,
button.prism-btn-disabled[disabled],
button.prism-btn-disabled[disabled]:hover,
button.prism-btn-disabled[disabled]:focus {
    background-color: #e5e7eb;
    border: none;
    color: #9ca3af;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: none;
    cursor: not-allowed;
}



.save-indicator { font-size: 0.8rem; color: #16a34a; }


.page-container {
    padding: 32px 40px 400px;
    max-width: 1100px;
    margin: 0 auto;
}

/*Status category look*/
.status-radio-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.status-radio-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 160px;
    padding: 14px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: #fff;
}

.status-radio-card:hover {
    border-color: #cbd5e1;
}

.status-radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

.radio-dot {
    display: inline-block;
    width: 18px;
    height: 18px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
    transition: border-color 0.15s ease;
    margin: 0;
}

.status-radio-card.active .radio-dot {
    border-color: #2563eb;
}

.status-radio-card.active .radio-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    aspect-ratio: 1/1;
    background: #2563eb;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.radio-text {
    font-weight: 500;
    color: #333;
    font-size: 1.3rem;
    margin:0;
    position: relative;
    top: -3.5px;
    padding-left: 3px;
}

.status-radio-card.active {
    background: #eff6ff;
    border-color: #2563eb;
}

.status-radio-card.active .radio-text {
    color: #2563eb;
}

.evidence-file-card { position: relative; padding-right: 32px; }
.file-delete-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}
.file-delete-btn:hover { background: #fee2e2; color: #dc2626; }

.upload-errors { margin-top: 10px; }
.upload-error-line {
    font-size: 0.8rem;
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 6px 10px;
    margin-top: 6px;
}

.dropzone.dragover { border-color: #2563eb; background: #eff6ff; }

/*-----------------------------------------------------------------
      Assessment Progression side bar
 -----------------------------------------------------------------*/
.contact-section .row {
    gap: 32px; /* adds space between columns */
}

.assessment-sidebar {
    display: block;
    position:absolute;
    top: 430px;
    left: 20px;
    width: 280px;
    z-index: 10;
}

/* Mobile: sidebar becomes full-width at top */
@media (max-width: 768px) {
    .assessment-sidebar {
        position: static;
        width: 100%;
        margin-bottom: 20px;
    }

    /* Accordion becomes full width */
    #riskAssessmentAccordion {
        max-width: 100%;
    }
}

/* Mobile drawer hidden by default */
@media (max-width: 768px) {
    .assessment-sidebar-wrapper {
        display: none; !important;
        background: #fff;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }

    .assessment-sidebar-wrapper.open {
        display: block;
    }
}


.row {
    justify-content: center;
}

#riskAssessmentAccordion {
    max-width: 800px;
    margin: 0 auto; /* centres the accordion */
}
.continue-wrapper {
    text-align: right;
    margin-top: 30px;
}

/* Mobile full-width button */
@media (max-width: 768px) {
    .continue-wrapper {
        position: static;
        text-align: center;
        margin-top: 20px;
    }
}

.progress-toggle-btn {
    background: #2563eb;
    color: white;
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    width: 100%;
    font-size: 16px;
}
.assessment-sidebar {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    width: 280px;
}

.progress-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 8px solid #e5e7eb;
    position: relative;
    margin: 0 auto 20px;
}

.progress-circle span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    font-weight: 700;
    color: #82a7ef;
}

.section-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.section-item {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f3f4f6;
}

.section-item.complete strong {
    color: #16a34a;
}

.section-item.in-progress strong {
    color: #2563eb;
}

.section-item.not-started strong {
    color: #6b7280;
}

/*-----------------------------------------------------------------
      Drop Down UI
 -----------------------------------------------------------------*/
.accordion-item {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin-bottom: 1.7rem;
}

.accordion-item summary {
    width: 100%;
    list-style: none;
}

.accordion-item summary::-webkit-details-marker {
    display: none;
}

.dropdown-select-toggle {
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 56px;
    padding: 0 20px;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 56px;
    color: #212529;
    cursor: pointer;
    text-transform: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.dropdown-select-toggle:focus {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.dropdown-select-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: none;
}

.dropdown-select-icon {
    flex-shrink: 0;
    width: 0;
    height: 0;
    margin-left: 12px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #495057;
    transition: transform 0.15s ease;
}

.accordion-item[open] .dropdown-select-icon {
    transform: rotate(180deg);
}

.accordion-body {
    box-sizing: border-box;
    width: 100%;
    padding: 20px 16px;
}

.col-md-8.col-lg-9 {
    width: 100%;
    max-width: 800px;
    flex: 1 1 auto;
}

/*-----------------------------------------------------------------
      GENERAL FORM UI
 -----------------------------------------------------------------*/

.form-page {
    width: 100%;
    max-width: 80%;
    padding: 50px 55px;
    margin: 0 auto;
    background: #ffffff;
    justify-content: center;
    border-radius: 12px ;
}

.form-container {
    width: 100%;
    max-width: 800px;
    margin: 40px auto;
    padding: 32px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    font-family: inherit;
    font-size: 1.6rem;
}

.form-container h1 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 3rem;
    font-weight: 600;
}

.form-container p {
    margin-bottom: 10px;
    font-size: 1.6rem;
    font-weight: 500;
}

.form-container .form-group {
    margin-bottom: 20px;
}

.form-container label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 1.5rem;
    color: #4b5563;
}

.form-container input,
.form-container select,
.form-container textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8f9fc;
    color: #1a1a1a;
    font-size: 1.5rem;
    font-family: inherit;
}

.form-container .password-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.form-container .forgot-password {
    color: #2563eb;
    font-size: 1.3rem;
    font-weight: 500;
}

.form-container .forgot-password:hover {
    color: #1e4fc7;
}

.form-container button,
.form-container .login-submit {
    width: 100%;
    padding: 14px 20px;
    background-color: #1e4fc7;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1.6rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.form-container button:hover,
.form-container .login-submit:hover {
    background-color: #005fcc;
}

/* Register link area */
.form-container .login-register {
    text-align: center;
    margin-top: 20px;
    font-size: 1.5rem;
    color: #6b7280;
    justify-content: center;
}

.form-container .login-register a {
    color: #2563eb;
    font-weight: 500;
}

.g-recaptcha {
    margin: 0 auto;
    display: block;
}


/* Mobile tweaks */
@media (max-width: 480px) {
    .form-container {
        width: calc(100% - 32px);
        padding: 24px;
        margin: 20px auto;
        border-radius: 16px;
    }

    .form-container h1 {
        font-size: 2.2rem;
    }
}

/*ERROR PAGE UI*/
.error-alert-box {
    border: 2px solid #dc2626;
    background-color: #fef2f2;
    color: #991b1b;
    border-radius: 8px;
    padding: 24px;
    margin: 40px auto;
    max-width: 600px;
    text-align: center;
}

.error-alert-box h2 {
    margin-top: 0;
    color: #b91c1c;
}

.error-alert-box .btn {
    margin-top: 16px;
}


/*Assessment progress view at top of page */
.assessment-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px auto;
    max-width: 700px;
}

.assessment-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 100px;
}

.assessment-step__circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border: 2px solid #d1d5db;
    background-color: #ffffff;
    color: #9ca3af;
    transition: all 0.2s ease;
}

.assessment-step__label {
    margin-top: 8px;
    font-size: 0.85em;
    color: #6b7280;
}

.assessment-step--completed .assessment-step__circle {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.assessment-step--completed .assessment-step__label {
    color: #2563eb;
    font-weight: 600;
}

.assessment-step--active .assessment-step__circle {
    border-color: #2563eb;
    color: #2563eb;
}

.assessment-step--active .assessment-step__label {
    color: #111827;
    font-weight: 600;
}

.assessment-step__connector {
    flex: 1;
    height: 2px;
    background-color: #d1d5db;
    margin: 0 8px;
    margin-bottom: 24px;
    transition: background-color 0.2s ease;
}

.assessment-step__connector--completed {
    background-color: #2563eb;
}

/* -----------------------------------------------------------
   SITE FOOTER (marketing pages)

   Shared footer used by templates/layout/public.php and
   templates/layout/default.php via element/site_footer.php.
   Replaces the .footer-modern block that was duplicated as an
   inline <style> in both layouts.

   The few custom properties below are scoped to this block so it
   stays self-contained.
----------------------------------------------------------- */
.site-footer {
    --footer-brand: #2563eb;
    --footer-bg: #0f172a;
    --footer-line: rgba(255, 255, 255, 0.08);
    --footer-ease: 160ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Side gutter tightens on smaller screens so the link columns
       keep their content width. Overridden in the media queries
       at the end of this block. */
    --footer-gutter: 24px;

    background: var(--footer-bg);
    color: #94a3b8;
    margin-top: auto;
    width: 100%;
    padding: 64px var(--footer-gutter) 0;
}

.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 48px;
}

.site-footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter Bold', sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: #fff;
    margin-bottom: 16px;
}

.site-footer-logo-mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--footer-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.site-footer-tagline {
    font-size: 14px;
    line-height: 1.6;
    max-width: 340px;
    margin: 0 0 24px;
}

.site-footer-social {
    display: flex;
    gap: 12px;
}

.site-footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--footer-ease), color var(--footer-ease);
}

.site-footer-social a:hover {
    background: var(--footer-brand);
    color: #fff;
}

.site-footer-col h6 {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 20px;
}

.site-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.site-footer-col ul a {
    font-size: 14px;
    color: #94a3b8;
    transition: color var(--footer-ease);
}

.site-footer-col ul a:hover {
    color: #fff;
}

.site-footer a:focus-visible {
    outline: 2px solid var(--footer-brand);
    outline-offset: 3px;
    border-radius: 8px;
}

.site-footer-bottom {
    border-top: 1px solid var(--footer-line);
    padding: 24px 0;
    text-align: center;
}

.site-footer-bottom p {
    margin: 0;
    font-size: 13px;
    color: #64748b;
}

@media (max-width: 900px) {
    .site-footer {
        --footer-gutter: 20px;
    }
}

@media (max-width: 768px) {
    .site-footer-inner {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer-brand {
        grid-column: 1 / -1;
    }

    .site-footer-tagline {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .site-footer {
        --footer-gutter: 16px;
    }
}

@media (max-width: 480px) {
    .site-footer-inner {
        grid-template-columns: 1fr;
    }
}