.lightbox {
    position:fixed;
    inset:0;
    z-index:200;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(6,16,30,.9);
    backdrop-filter:blur(6px);
    padding:20px
}

.lightbox.open {
    display:flex
}

.lightbox img {
    max-width:92vw;
    max-height:86vh;
    border-radius:8px;
    box-shadow:0 30px 80px rgba(0,0,0,.6);
    object-fit:contain
}

.lb-close {
    position:absolute;
    top:20px;
    right:26px;
    width:46px;
    height:46px;
    border-radius:50%;
    background:rgba(255,255,255,.14);
    border:none;
    color:#fff;
    font-size:24px;
    cursor:pointer;
    display:grid;
    place-items:center;
    transition:.2s
}

.lb-close:hover {
    background:var(--red)
}

.lb-prev,.lb-next {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:52px;
    height:52px;
    border-radius:50%;
    background:rgba(255,255,255,.14);
    border:none;
    color:#fff;
    font-size:26px;
    cursor:pointer;
    display:grid;
    place-items:center;
    transition:.2s
}

.lb-prev:hover,.lb-next:hover {
    background:var(--red)
}

.lb-prev {
    left:20px
}

.lb-next {
    right:20px
}

.lb-prev svg,.lb-next svg {
    width:24px;
    height:24px
}

.lb-count {
    position:absolute;
    bottom:22px;
    left:50%;
    transform:translateX(-50%);
    color:#fff;
    font-size:14px;
    font-weight:600
}

.modal {
    position:fixed;
    inset:0;
    z-index:100;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px
}

.modal.open {
    display:flex
}

.modal-backdrop {
    position:absolute;
    inset:0;
    background:rgba(10,44,77,.62);
    animation:fadeIn .25s ease
}

.modal-card {
    position:relative;
    z-index:2;
    background:var(--modal-bg);
    border:1px solid var(--modal-border);
    box-shadow:0 30px 80px -20px rgba(10,44,77,.35);
    padding:40px 36px 34px;
    max-width:420px;
    width:100%;
    border-radius:4px;
    text-align:center;
    animation:popIn .35s cubic-bezier(.2,.8,.2,1)
}

.modal-card::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:linear-gradient(90deg,var(--red),var(--blue-lt))
}

.modal-close {
    position:absolute;
    top:14px;
    right:14px;
    background:none;
    border:none;
    color:var(--modal-close);
    font-size:20px;
    cursor:pointer;
    line-height:1;
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:2px;
    transition:.2s
}

.modal-close:hover {
    color:var(--text-h1);
    background:rgba(10,44,77,.08)
}

.modal-title {
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--red);
    font-weight:700;
    margin-bottom:14px
}

.modal-phone {
    display:block;
    font-size:30px;
    font-weight:800;
    color:var(--modal-phone);
    letter-spacing:0;
    margin-bottom:6px
}

.modal-phone:hover {
    color:var(--accent-blue)
}

.modal-sub {
    font-size:12px;
    color:var(--modal-sub);
    margin-bottom:26px
}

.modal-call {
    width:100%;
    justify-content:center;
    font-size:14px;
    padding:16px
}

.modal-alt {
    margin-top:18px;
    font-size:12px;
    color:var(--modal-alt)
}

.modal-alt a {
    color:var(--modal-alt-link);
    font-weight:700
}