:root{
    --bg:#272727;
    --panel:#515050;
    --panel-dark: #515050;
    --sidebar-bottom:#636060;
    --sidebar-top:#272727;
}

*{box-sizing:border-box}

body{
    margin:0;
    font-family: 'Basic', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: bold;
    background:var(--bg);
    color:#eee;
    text-transform:uppercase;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.site{
    display:grid;
    grid-template-columns:clamp(274px, 18vw, 330px) minmax(0, 1fr);
    gap:clamp(36px, 2.8vw, 52px);
    width:min(1700px, calc(100vw - 84px));
    min-height:calc(100vh - clamp(56px, 12vh, 108px));
    margin:clamp(28px, 6vh, 54px) auto;
    align-items:stretch;
    flex:1 0 auto;
}

.sidebar{
    border-radius:24px;
    padding:15px clamp(20px, 1.6vw, 25px);
    background:linear-gradient(180deg, var(--sidebar-top) 0%, #5a5a5a 45%, var(--sidebar-bottom) 100%);
    border:3px solid #e9e9e9;
    min-height:525px;
}

.sidebar-inner{
    height:100%;
    display:flex;
    flex-direction:column;
}

.brand{
    font-size:clamp(12px, 0.82vw, 15px);
    letter-spacing:0;
    color:#fff;
    margin:0 4px 8px;
    line-height:1.4;
    font-weight:400;
    white-space:nowrap;
}

.brand-rule{
    height:3px;
    width:100%;
    background:#fff;
    border:none;
    margin:0 0 40px;
}

.sidebar-nav{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.nav-link{
    color:#fff;
    text-decoration:none;
    font-size:clamp(18px, 1.15vw, 22px);
    line-height:1.1;
    letter-spacing:0;
    transition:opacity 0.15s ease;
    white-space:nowrap;
}

.nav-link:hover{
    opacity:0.75;
}

.nav-link.active{
    text-decoration:underline;
    text-underline-offset:4px;
}

.site-footer{
    position:relative;
    background:rgba(39,39,39,0.96);
    border-top:2px solid rgba(255,255,255,0.75);
    padding:14px 20px 16px;
    margin-top:auto;
}

.footer-nav{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:10px 18px;
    font-size:clamp(12px, 0.8vw, 16px);
    line-height:1.4;
    letter-spacing:0;
}

.footer-nav a{
    color:#fff;
    text-decoration:none;
    transition:opacity 0.15s ease;
}

.footer-nav a:hover{
    opacity:0.75;
}

.footer-divider{
    color:#fff;
    opacity:0.8;
}

.content{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:45px;
    min-width:0;
    min-height:100%;
}

.embed-wrapper{
    flex:1 1 0;
    width:100%;
    height:100%;
    min-height:420px;
}

.embed-frame{
    width:100%;
    height:100%;
    min-height:420px;
    border:0;
    border-radius:14px;
    display:block;
    box-shadow:0 6px 18px rgba(0,0,0,0.25);
}

.embed-top{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    margin-bottom:12px;
}

.embed-visit-btn{
    background:rgb(77, 76, 76);
    color:#fff;
    text-decoration:none;
    padding:10px 14px;
    border-radius:10px;
    font-size:clamp(13px, 0.9vw, 16px);
    letter-spacing:0.6px;
    font-weight:700;
    display:inline-block;
}

.embed-visit-btn:hover{
    opacity:0.9;
}

.columns-row{
    display:flex;
    gap:28px;
    align-items:flex-start;
}

.content-column{
    display:flex;
    justify-content:center;
    align-items:center;
    flex:1;
    min-height:420px;
    padding-top:16px;
    padding-bottom:16px;
}

.side-list-panel{
    background:var(--panel);
    border:2px solid rgba(255,255,255,0.7);
    border-radius:18px;
    width:min(440px, 100%);
    padding:24px 28px;
    margin-right:0;
    box-shadow:0 10px 20px rgba(0,0,0,0.12);
}

.page-contact .side-list-panel{
    width:min(520px, 100%);
    padding:30px 34px;
}

.side-list{
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:12px;
    color:#fff;
    font-size:clamp(15px, 1vw, 20px);
    line-height:1.8;
    letter-spacing:0;
}

.side-list li + li{
    margin-top:8px;
}

.side-list li{
    background: var(--bg);
    border:1px solid rgba(255,255,255,0.06);
    padding:12px 14px;
    border-radius:10px;
    transition:transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.side-list li:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 24px rgba(0,0,0,0.35);
    background: var(--panel); /* keep same color on hover */
}

.side-list li a{
    color:inherit;
    text-decoration:underline crimson;
}

.hero{
    background:var(--panel);
    color:#fff;
    min-height:clamp(260px, 24vh, 250px);
    padding:30px clamp(28px, 3vw, 44px) 24px;
    border-radius:20px;
    text-align:center;
    font-size:clamp(20px, 1.22vw, 24px);
    line-height:1.5;
    letter-spacing:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hero p{
    margin:0;
}

.cards-wrap{
    display:block;
}

.cards{
    background:var(--panel-dark);
    padding:clamp(32px, 3vw, 44px) clamp(22px, 2.4vw, 36px) clamp(34px, 3vw, 44px);
    border-radius:20px;
    display:flex;
    justify-content:space-between;
    align-items:stretch;
    gap:clamp(24px, 2.4vw, 42px);
    min-height:clamp(420px, 46vh, 460px);
}

.card{
    background:#6d6c6c;
    color:#ffffff;
    flex:1 1 0;
    min-height:clamp(290px, 34vh, 340px);
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(20px, 1.25vw, 24px);
    letter-spacing:0;
    text-align:center;
    padding:12px;
    flex-shrink:0;
}

.copyright{
    font-size:clamp(12px, 0.8vw, 16px);
    line-height:1.4;
    letter-spacing:0;
    color:#fff;
    text-align:center;
    margin:0;
}

a {
    color: white;
    text-decoration: underline crimson;
}

@media (max-width:900px){
    .site{
        grid-template-columns:1fr;
        width:auto;
        margin:20px;
    }

    .columns-row{
        flex-direction:column;
        gap:18px;
    }

    .sidebar{
        min-height:auto;
        width:100%;
    }

    .cards{
        flex-direction:column;
        align-items:center;
        min-height:auto;
    }
}