.hc {
    --hc-navy: #08173f;
    --hc-blue: #3e6c9b;
    --hc-bg: #f5f8fb;
    --hc-panel: #dce8f3;
    --hc-border: #c6d5e3;
    --hc-muted: #6684a1;
    margin: 0 auto;
    font-family: inherit;
    color: var(--hc-navy);
    box-sizing: border-box;
}
.hc *, .hc *::before, .hc *::after { box-sizing: border-box; }

.hc-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    margin-bottom: 38px;
}
.hc-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .28em;
    line-height: 1;
    margin-bottom: 18px;
	color:#3e6c9b;
}
.hc-heading h2 {
    margin: 0;
    font-size: clamp(34px, 3.1vw, 46px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.04em;
    color: var(--hc-navy);
}
.hc-arrows { display:flex; gap:8px; }
.hc-arrow {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--hc-border);
    background: transparent;
    color: var(--hc-navy);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition: background .2s, color .2s;
}
.hc-arrow:hover { background: var(--hc-navy); color:#fff; }
.hc-arrow span {
    font-size: 27px;
    line-height: 1;
    font-family: Arial, sans-serif;
    font-weight: 300;
    margin-top: -2px;
}

.hc-viewport { overflow:hidden; }
.hc-track {
    display:flex;
    transition: transform .55s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}
.hc-slide {
    flex: 0 0 100%;
    min-width: 100%;
    min-height: 234px;
    padding: 52px 64px;
    background: var(--hc-panel);
    border: 1px solid var(--hc-border);
    display:grid;
    grid-template-columns: 32% 1fr;
    align-items:center;
    gap: 4%;
}
.hc-year {
    font-size: clamp(64px, 6vw, 78px);
    line-height: .9;
    font-weight: 800;
    color: var(--hc-blue);
    letter-spacing: -.045em;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}
.hc-year-line {
    width:64px;
    height:1px;
    background:#91b0cc;
    margin-top:24px;
}
.hc-copy h3 {
    margin:0 0 20px;
    font-size: clamp(27px, 2.2vw, 34px);
    line-height:1.05;
    font-weight:800;
    letter-spacing:-.03em;
    color:var(--hc-navy);
}
.hc-description {
    max-width: 660px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--hc-muted);
}
.hc-description p { margin:0 0 8px; }
.hc-description p:last-child { margin-bottom:0; color:#08173fb3; max-width:500px;}

.hc-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:28px;
}
.hc-dots { display:flex; gap:9px; align-items:center; }
.hc-dot {
    width:24px;
    height:6px;
    border:0;
    padding:0;
    background:#c4cdd7;
    cursor:pointer;
    transition: width .25s, background .25s;
}
.hc-dot.is-active {
    width:40px;
    background:var(--hc-navy);
}
.hc-counter {
    font-size:10px;
    letter-spacing:.24em;
    color:#91a9bf;
    white-space:nowrap;
}
.hc-current { color:#7c9ab4; }

.history-empty {
    padding:30px;
    border:1px dashed #bbb;
    text-align:center;
}

@media (max-width: 700px) {
    .hc-heading {
        align-items:flex-start;
        margin-bottom:24px;
    }
    .hc-eyebrow { font-size:9px; margin-bottom:12px; }
    .hc-heading h2 { font-size:32px; }
    .hc-arrows { flex-shrink:0; }
    .hc-arrow { width:40px; height:40px; }
    .hc-slide {
        min-height: 360px;
        padding:38px 28px;
        grid-template-columns:1fr;
        gap:34px;
        align-content:center;
    }
    .hc-year { font-size:60px; }
    .hc-year-line { margin-top:14px; }
    .hc-copy h3 { font-size:27px; margin-bottom:14px; }
    .hc-description { font-size:15px; }
}