.calendar-hub{
    background:#f5f7fa;
    color:#0d2d55;
    overflow:hidden;
}

/* HERO */
.calendar-hero{
    min-height:430px;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
        radial-gradient(circle at 78% 30%,rgba(255,255,255,.09),transparent 24%),
        linear-gradient(118deg,#071d38 0%,#0d2d55 57%,#123c70 100%);
}

.calendar-hero:after{
    content:"";
    position:absolute;
    width:480px;
    height:480px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;
    right:-80px;
    top:-170px;
}

.calendar-hero__inner{
    position:relative;
    z-index:2;
    padding-top:70px;
    padding-bottom:70px;
}

.calendar-hero__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#fff;
    font-size:12px;
    font-weight:800;
    letter-spacing:.16em;
    margin-bottom:22px;
}

.calendar-hero__eyebrow:before{
    content:"";
    width:34px;
    height:3px;
    background:#e3212b;
}

.calendar-hero h1{
    margin:0;
    color:#fff;
    font-size:clamp(56px,7vw,92px);
    line-height:.84;
    letter-spacing:-.055em;
    font-weight:900;
}

.calendar-hero h1 span{
    color:#fff;
    opacity:.96;
}

.calendar-hero p{
    max-width:530px;
    color:rgba(255,255,255,.72);
    font-size:16px;
    line-height:1.75;
    margin:28px 0 0;
}

.calendar-hero__meta{
    display:flex;
    align-items:center;
    gap:13px;
    margin-top:27px;
    color:#fff;
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
}

.calendar-hero__meta i{
    display:block;
    width:4px;
    height:4px;
    background:#e3212b;
    border-radius:50%;
}

.calendar-hero__number{
    position:absolute;
    right:4%;
    bottom:-33px;
    color:rgba(255,255,255,.035);
    font-weight:900;
    font-size:190px;
    line-height:1;
    letter-spacing:-.08em;
    pointer-events:none;
}


/* SELECTION */
.calendar-select{
    padding:82px 0 95px;
}

.calendar-section-heading{
    margin-bottom:40px;
}

.calendar-section-heading > span{
    color:#e3212b;
    font-size:11px;
    letter-spacing:.18em;
    font-weight:900;
}

.calendar-section-heading h2{
    font-size:34px;
    letter-spacing:-.035em;
    margin:8px 0 8px;
    color:#0d2d55;
}

.calendar-section-heading p{
    margin:0;
    color:#68788d;
    font-size:14px;
}

.calendar-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}

.calendar-card{
    min-height:430px;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:30px;
    border-radius:7px;
    text-decoration:none;
    overflow:hidden;
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.calendar-card:hover{
    transform:translateY(-6px);
    box-shadow:0 22px 55px rgba(7,29,56,.16);
}

.calendar-card--yks{
    background:
        linear-gradient(135deg,rgba(255,255,255,.03),transparent),
        #0d2d55;
    color:#fff;
}

.calendar-card--lgs{
    background:
        linear-gradient(135deg,rgba(255,255,255,.08),transparent),
        #17824c;
    color:#fff;
}

.calendar-card:before{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    right:-90px;
    bottom:-80px;
}

.calendar-card__top,
.calendar-card__body,
.calendar-card__bottom{
    position:relative;
    z-index:2;
}

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

.calendar-card__tag{
    border:1px solid rgba(255,255,255,.25);
    border-radius:50px;
    padding:8px 12px;
    font-size:9px;
    font-weight:800;
    letter-spacing:.13em;
}

.calendar-card__arrow{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    color:#fff;
    font-size:19px;
    transition:.2s;
}

.calendar-card:hover .calendar-card__arrow{
    background:#fff;
    color:#0d2d55;
}

.calendar-card__code{
    color:rgba(255,255,255,.6);
    font-size:11px;
    font-weight:900;
    letter-spacing:.2em;
    margin-bottom:10px;
}

.calendar-card h3{
    margin:0;
    color:#fff;
    font-size:44px;
    line-height:.98;
    letter-spacing:-.045em;
}

.calendar-card__body p{
    max-width:340px;
    margin:18px 0 0;
    color:rgba(255,255,255,.68);
    line-height:1.65;
    font-size:13px;
}

.calendar-card__bottom{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    border-top:1px solid rgba(255,255,255,.16);
    padding-top:21px;
}

.calendar-stat{
    display:flex;
    align-items:flex-end;
    gap:9px;
}

.calendar-stat strong{
    color:#fff;
    font-size:42px;
    line-height:.8;
}

.calendar-stat span{
    color:rgba(255,255,255,.6);
    font-size:9px;
    font-weight:900;
    letter-spacing:.14em;
}

.calendar-open{
    display:flex;
    align-items:center;
    gap:13px;
    color:#fff;
    font-size:10px;
    font-weight:900;
    letter-spacing:.1em;
}

.calendar-open b{
    font-size:19px;
}

.calendar-card__ghost{
    position:absolute;
    right:-12px;
    top:120px;
    color:rgba(255,255,255,.035);
    font-size:145px;
    line-height:1;
    font-weight:900;
    letter-spacing:-.08em;
    pointer-events:none;
}


/* INFO */
.calendar-info{
    background:#fff;
    padding:65px 0;
    border-top:1px solid #e7ebf0;
}

.calendar-info__inner{
    display:grid;
    grid-template-columns:80px 1fr 1fr;
    align-items:center;
    gap:30px;
}

.calendar-info__number{
    font-size:54px;
    font-weight:900;
    color:#e7ebf0;
}

.calendar-info span{
    color:#e3212b;
    font-size:10px;
    font-weight:900;
    letter-spacing:.17em;
}

.calendar-info h2{
    margin:7px 0 0;
    font-size:29px;
    line-height:1.05;
    letter-spacing:-.035em;
}

.calendar-info p{
    margin:0;
    color:#69798d;
    font-size:13px;
    line-height:1.75;
    max-width:430px;
}


/* MOBILE */
@media(max-width:760px){

    .calendar-hero{
        min-height:400px;
    }

    .calendar-hero__inner{
        padding-top:58px;
        padding-bottom:58px;
    }

    .calendar-hero h1{
        font-size:52px;
    }

    .calendar-hero p{
        font-size:14px;
    }

    .calendar-hero__number{
        font-size:110px;
        right:-15px;
    }

    .calendar-select{
        padding:58px 0 65px;
    }

    .calendar-section-heading h2{
        font-size:28px;
    }

    .calendar-grid{
        grid-template-columns:1fr;
    }

    .calendar-card{
        min-height:380px;
        padding:24px;
    }

    .calendar-card h3{
        font-size:38px;
    }

    .calendar-card__ghost{
        font-size:105px;
    }

    .calendar-info__inner{
        grid-template-columns:1fr;
        gap:15px;
    }

    .calendar-info__number{
        display:none;
    }
}