/* ==========================================================
   STRATUM EV
   LEGAL & COMPLIANCE CENTRE
========================================================== */

html{

    scroll-behavior:smooth;
}

:root{

    --legal-bg:#050A14;

    --legal-card:#0E1625;

    --legal-border:rgba(255,255,255,.08);

    --legal-blue:#2F80ED;

    --legal-light:#EEF4FF;

    --legal-text:#D8E3F3;

    --legal-muted:#8A9BB5;

    --legal-radius:20px;

    --legal-shadow:
        0 12px 40px rgba(0,0,0,.35);

}

/* ==========================================================
   HERO IMAGE
========================================================== */

.hero-media{

    position:relative;

    width:100%;

    height:420px;

    overflow:hidden;

    border-radius:0 0 20px 20px;

    background:#050A14;

}

.legal-progress{

    position:fixed;

    top:72px;

    left:0;

    width:100%;

    height:4px;

    background:rgba(255,255,255,.05);

    z-index:9998;

}

.legal-progress-bar{

    width:0;

    height:100%;

    background:linear-gradient(

        90deg,

        #2F80ED,

        #48C6EF

    );

    transition:width .1s linear;

}

.hero-media img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center top;

}

.legal-page{

    background:var(--legal-bg);

    color:var(--legal-text);

    padding-bottom:120px;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            180deg,

            rgba(5,10,20,.20),

            rgba(5,10,20,.45),

            rgba(5,10,20,.75),

            rgba(5,10,20,.95)

        );

}

.legal-hero{

    text-align:center;

    max-width:900px;

    margin:-35px auto 0;

    position:relative;

    z-index:5;

    padding:0 20px 90px;

}

.legal-hero h1{

    font-size:60px;

    font-weight:800;

    line-height:1.1;

    margin:18px 0;

}

.legal-hero p{

    max-width:760px;

    margin:25px auto;

    font-size:20px;

    line-height:1.8;

    color:var(--legal-muted);

}

.legal-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

    border-radius:999px;

    background:rgba(47,128,237,.12);

    border:1px solid rgba(47,128,237,.35);

    color:#79B4FF;

    font-weight:700;

    letter-spacing:.15em;

    font-size:.82rem;

    text-transform:uppercase;

}

.legal-search{

    position:relative;

    display:flex;

    justify-content:center;

    margin-top:45px;

}

.legal-search-icon{

    position:absolute;

    left:calc(50% - 300px);

    top:50%;

    transform:translateY(-50%);

    width:18px;

    height:18px;

    stroke:#8A9BB5;

    fill:none;

    stroke-width:2;

}

.legal-search input{

    width:100%;

    max-width:640px;

    padding:18px 22px 18px 55px;

    border:none;

    border-radius:15px;

    background:#111C2F;

    color:white;

    font-size:16px;

}

.legal-search input:focus{

    box-shadow:

        0 0 0 3px

        rgba(47,128,237,.3);

}

.legal-layout{

    display:grid;

    grid-template-columns:

        300px

        1fr;

    gap:70px;

    width:min(1500px,92%);

    margin:auto;

}

.legal-sidebar{

    position:sticky;

    top:120px;

    height:max-content;

}

.legal-sidebar-card{

    background:var(--legal-card);

    border-radius:20px;

    padding:30px;

    border:1px solid var(--legal-border);

    box-shadow:var(--legal-shadow);

}

.legal-sidebar h3{

    font-size:22px;

    margin-bottom:12px;

}

.legal-sidebar-text{

    color:var(--legal-muted);

    line-height:1.6;

    margin-bottom:28px;

}

.legal-nav{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.legal-status{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#56657D;

    flex-shrink:0;

    transition:

        background .3s,

        transform .3s,

        box-shadow .3s;

}


.legal-nav a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 18px;

    border-radius:12px;

    text-decoration:none;

    color:var(--legal-text);

    transition:.3s;

    border-left:3px solid transparent;

}

.legal-reading{

    margin-bottom:25px;

    font-size:.9rem;

    color:var(--legal-muted);

}

.legal-reading strong{

    display:block;

    margin-top:8px;

    color:white;

    font-size:22px;

}

.legal-nav a:hover{

    background:rgba(47,128,237,.12);

    border-left-color:var(--legal-blue);

    color:white;

}

.legal-nav a:hover .legal-status{

    transform:scale(1.3);

}

.legal-nav a.active{

    background:rgba(47,128,237,.15);

    border-left:3px solid var(--legal-blue);

    color:white;

    font-weight:700;

}

.legal-nav a.active .legal-status{

    background:var(--legal-blue);

    box-shadow:

        0 0 14px

        rgba(47,128,237,.5);

}

.legal-nav a.completed{

    opacity:1;

}

.legal-nav a.completed .legal-status{

    background:#2ECC71;

}

.legal-content{

    display:flex;

    flex-direction:column;

    gap:40px;

}

.legal-introduction{

    background:var(--legal-card);

    border-radius:20px;

    padding:40px;

    border:1px solid var(--legal-border);

}

.legal-introduction h2{

    margin-bottom:18px;

}

.legal-introduction p{

    line-height:1.9;

    color:var(--legal-muted);

}

.legal-summary{

    display:grid;

    grid-template-columns:

        repeat(4,1fr);

    gap:20px;

}

.legal-summary div{

    background:var(--legal-card);

    border-radius:16px;

    padding:22px;

    border:1px solid var(--legal-border);

}

.legal-summary strong{

    display:block;

    margin-bottom:10px;

}

.legal-divider{

    border:none;

    height:1px;

    background:rgba(255,255,255,.08);

}

.legal-section{

    background:var(--legal-card);

    border-radius:22px;

    padding:55px;

    border:1px solid var(--legal-border);

    box-shadow:var(--legal-shadow);

    transition:.35s ease;

}

.legal-section h2{

    font-size:38px;

    margin-bottom:14px;

}

.legal-section h3{

    margin-top:40px;

    margin-bottom:15px;

    font-size:24px;

    color:white;

}

.legal-section ul{

    margin:20px 0;

    padding-left:28px;

}

.legal-section:hover{

    transform:translateY(-4px);

    border-color:rgba(47,128,237,.35);

}

.legal-section li{

    margin-bottom:14px;

    color:var(--legal-muted);

    line-height:1.8;

}

.legal-updated{

    display:inline-block;

    margin-bottom:35px;

    padding:8px 16px;

    border-radius:999px;

    background:rgba(47,128,237,.15);

    color:#79B4FF;

    font-weight:600;

}

.legal-section p{

    line-height:2;

    font-size:17px;

    color:var(--legal-muted);

}

.legal-back-top{

    margin-top:50px;

    text-align:center;

}

.legal-back-top a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:16px 28px;

    border-radius:999px;

    background:#111C2F;

    color:#EEF4FF;

    text-decoration:none;

    font-weight:600;

    transition:all .3s ease;

}

.legal-back-top a:hover{

    background:var(--legal-blue);

}

/* ==========================================
   COMPANY TABLE
========================================== */

.legal-table{

    width:100%;

    border-collapse:collapse;

    margin-top:30px;

}

.legal-table th{

    width:240px;

    padding:18px;

    text-align:left;

    background:#111C2F;

    color:#EEF4FF;

}

.legal-table td{

    padding:18px;

    color:var(--legal-muted);

    border-bottom:1px solid rgba(255,255,255,.08);

}

/* ==========================================
   VERSION HISTORY
========================================== */

.legal-timeline{

    margin-top:30px;

}

.timeline-item{

    padding:25px;

    border-left:4px solid var(--legal-blue);

    background:#111C2F;

    border-radius:0 16px 16px 0;

}


/* ==========================================
   RESOURCE SVG ICONS
========================================== */

.resource-icon{

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 22px;

    border-radius:14px;

    background:rgba(47,128,237,.12);

    color:#78B3FF;

    transition:.35s;

}

.resource-icon svg{

    width:26px;

    height:26px;

    stroke:currentColor;

}

.legal-resource-card:hover .resource-icon{

    background:#2F80ED;

    color:white;

    transform:translateY(-4px);

}

.legal-resource-card:hover .resource-icon svg{

    transform:scale(1.08);

    transition:.35s;

}

/*--- LEGAL SEARCH ---*/

.legal-search{

    position:relative;

}

.legal-search-icon{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    width:18px;

    height:18px;

    stroke:#7C90B8;

    fill:none;

    stroke-width:2;

    pointer-events:none;

}

.legal-search input{

    padding-left:52px;

}

/* ==========================================
   SEARCH RESULTS
========================================== */

.legal-section.search-match{

    border-color:#2F80ED;

    box-shadow:
        0 0 0 1px rgba(47,128,237,.45),
        0 18px 45px rgba(47,128,237,.15);

    transition:
        border-color .25s,
        box-shadow .25s;

}

.legal-search input.searching{

    border:1px solid rgba(47,128,237,.45);

    box-shadow:
        0 0 0 3px rgba(47,128,237,.15);

}

/*----------- h3 --------------*/

.legal-resource-card h3{

    font-size:20px;

    margin-bottom:12px;

    line-height:1.35;

}

/*-------- p -----------------------*/
.legal-resource-card p{

    font-size:15px;

    line-height:1.7;

    color:var(--legal-muted);

    flex:1;

}

/* ==========================================
   RELATED RESOURCES
========================================== */

.legal-resource-grid{

    display:grid;

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

    gap:22px;

    margin-top:35px;

}

@media (max-width:1000px){

    .legal-resource-grid{

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

    }

}

@media (max-width:650px){

    .legal-resource-grid{

        grid-template-columns:1fr;

    }

}

.legal-resource-card{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    min-height:180px;

    padding:24px;

    border-radius:18px;

    text-decoration:none;

    color:var(--legal-text);

    background:linear-gradient(
        180deg,
        #162133,
        #111A2A
    );

    border:1px solid rgba(255,255,255,.08);

    transition:.30s ease;

    overflow:hidden;

}

.legal-resource-card:hover{

    transform:translateY(-5px);

    border-color:var(--legal-blue);

    box-shadow:0 12px 30px rgba(47,128,237,.2);

}

/* ==========================================
   LEGAL INFO BOX
========================================== */

.legal-info-box{

    margin:30px 0 40px;

    padding:24px;

    border-left:4px solid var(--legal-blue);

    background:rgba(47,128,237,.08);

    border-radius:0 16px 16px 0;

}

.legal-info-box strong{

    display:block;

    margin-bottom:12px;

    color:#EEF4FF;

    font-size:18px;

}

.legal-info-box p{

    margin:0;

    color:var(--legal-text);

}


/* ==========================================
   SECTION ANCHORS
========================================== */

.legal-anchor{

    margin-left:12px;

    text-decoration:none;

    color:var(--legal-muted);

    opacity:0;

    transition:.3s;

}

.legal-section:hover .legal-anchor{

    opacity:1;

}

.legal-anchor:hover{

    color:var(--legal-blue);

}

/* ==========================================
   SEARCH HIGHLIGHT
========================================== */

.legal-highlight{

    border:1px solid rgba(47,128,237,.45);

    box-shadow:

        0 0 30px rgba(47,128,237,.20);

}

/* ===========================================
   RELATED RESOURCES
=========================================== */

.legal-resource-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:24px;

    margin-top:45px;

}

.legal-resource-card{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    min-height:170px;

    padding:26px;

    border-radius:18px;

    text-decoration:none;

    color:var(--legal-text);

    background:linear-gradient(
        180deg,
        #162133 0%,
        #111A2A 100%
    );

    border:1px solid rgba(255,255,255,.08);

    transition:.35s ease;

    overflow:hidden;

}

.legal-resource-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        #2F80ED,
        #63B3FF
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.legal-resource-card:hover{

    transform:translateY(-8px);

    border-color:rgba(47,128,237,.45);

    box-shadow:
        0 18px 45px rgba(0,0,0,.45);

}

.legal-resource-card:hover::before{

    transform:scaleX(1);

}

.resource-icon{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:rgba(47,128,237,.15);

    color:#79B4FF;

    font-size:22px;

    margin-bottom:18px;

}

.legal-resource-card h3{

    font-size:18px;

    margin-bottom:14px;

    color:white;

}

.legal-resource-card p{

    font-size: 15px;

    color:var(--legal-muted);

    line-height:1.7;

    flex:1;

}

.resource-arrow{

    align-self:flex-end;

    font-size:22px;

    margin-top:auto;

    color:#5FA8FF;

    transition:.3s;

}

.legal-resource-card:hover .resource-arrow{

    transform:translateX(8px);

}

/* ==========================================
   PRINT STYLES
========================================== */

@media print{

    body{

        background:white;

        color:black;

    }

    header,
    footer,
    .legal-sidebar,
    .legal-search,
    .legal-progress,
    .legal-back-top{

        display:none;

    }

    .legal-layout{

        display:block;

        width:100%;

    }

    .legal-content{

        width:100%;

    }

    .legal-section{

        page-break-inside:avoid;

        border:none;

        box-shadow:none;

        margin-bottom:50px;

        background:white;

    }

    .legal-section h2{

        color:black;

    }

    .legal-section p,
    .legal-section li{

        color:#333;

    }

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1200px){

    .legal-layout{

        grid-template-columns:260px 1fr;

        gap:40px;

        width:95%;

    }

    .legal-hero{

        padding:60px 24px 70px;

    }

    .legal-hero h1{

        font-size:52px;

    }

    .legal-summary{

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

    }

    .legal-resource-grid{

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

    }

}

/* ==========================================================
   LARGE TABLET
========================================================== */

@media (max-width:992px){

    .legal-layout{

        grid-template-columns:1fr;

        gap:35px;

    }

    .legal-sidebar{

        position:relative;

        top:auto;

        order:-1;

    }

    .legal-sidebar-card{

        padding:24px;

    }

    .legal-nav{

        display:grid;

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

        gap:12px;

    }

    .legal-nav a{

        margin:0;

    }

    .legal-content{

        gap:30px;

    }

    .legal-resource-grid{

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

    }

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    .legal-hero{

        padding:45px 20px 55px;

    }

    .legal-hero h1{

        font-size:40px;

    }

    .legal-hero p{

        font-size:17px;

        line-height:1.7;

    }

    .legal-search input{

        font-size:15px;

        padding:16px 18px 16px 50px;

    }

    .legal-layout{

        width:94%;

        gap:24px;

    }

    .legal-sidebar-card{

        padding:20px;

    }

    .legal-nav{

        grid-template-columns:1fr;

    }

    .legal-summary{

        grid-template-columns:1fr;

    }

    .legal-summary div{

        padding:18px;

    }

    .legal-introduction{

        padding:26px;

    }

    .legal-section{

        padding:26px;

    }

    .legal-section h2{

        font-size:28px;

    }

    .legal-section h3{

        font-size:20px;

        margin-top:28px;

    }

    .legal-section table{

        display:block;

        overflow-x:auto;

    }

    .legal-resource-grid{

        grid-template-columns:1fr;

    }

    .legal-resource-card{

        min-height:160px;

    }

    .legal-back-top{

        margin-top:35px;

    }

}

/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:480px){

    .legal-hero{

        padding:35px 18px 45px;

    }

    .legal-badge{

        font-size:.72rem;

        padding:8px 16px;

    }

    .legal-hero h1{

        font-size:34px;

    }

    .legal-hero p{

        font-size:15px;

    }

    .legal-search input{

        font-size:14px;

    }

    .legal-sidebar-card{

        padding:18px;

    }

    .legal-reading{

        font-size:14px;

    }

    .legal-introduction{

        padding:22px;

    }

    .legal-section{

        padding:22px;

    }

    .legal-section h2{

        font-size:24px;

    }

    .legal-section h3{

        font-size:18px;

    }

    .legal-resource-card{

        min-height:150px;

        padding:20px;

    }

    .resource-icon{

        width:42px;

        height:42px;

    }

    .resource-icon svg{

        width:20px;

        height:20px;

    }

    .resource-arrow{

        font-size:18px;

    }

}

@media (max-width:900px){

    .hero-media{

        height:260px;

    }

}

@media (max-width:1100px){

    .legal-layout{

        grid-template-columns:1fr;

    }

    .legal-sidebar{

        position:relative;

        top:auto;

    }

    .legal-summary{

        grid-template-columns:

            repeat(2,1fr);

    }

}

@media (max-width:700px){

    .legal-hero h1{

        font-size:42px;

    }

    .legal-summary{

        grid-template-columns:1fr;

    }

}