/* Reference-inspired header, rebuilt around the Conica identity. */
.site-header {
    isolation: isolate;
    height: 55px;
    background: #fff;
    border-bottom: 1px solid #dce4f2;
}

.site-header::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    top: 7px;
    width: min(322px, 19.7vw);
    height: 102px;
    clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
    background:
        linear-gradient(135deg, transparent 46%, rgba(0, 175, 233, .14) 46% 48%, transparent 48%),
        linear-gradient(115deg, #080d3f, #10185a 72%, #0676ef);
    background-size: 18px 18px, auto;
    box-shadow: 13px 12px 30px rgba(8, 13, 63, .25);
}

.site-header::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, #10185a 0 14%, #00afe9 24%, transparent 48%);
}

.site-header .nav-wrap {
    width: 100%;
    height: 55px;
    padding-left: min(330px, 20vw);
}

.brand-panel {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: min(310px, 19vw);
    height: 102px;
    justify-content: center;
    padding: 9px 46px 21px 22px;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 93% 100%, 0 100%);
    background:
        repeating-linear-gradient(120deg, transparent 0 13px, rgba(6, 118, 239, .035) 13px 14px),
        linear-gradient(90deg, rgba(6, 118, 239, .05) 1px, transparent 1px),
        linear-gradient(rgba(6, 118, 239, .05) 1px, transparent 1px),
        radial-gradient(circle at 15% 18%, rgba(0, 175, 233, .19), transparent 38%),
        linear-gradient(120deg, #eaf7ff 0%, #fff 66%);
    background-size: auto, 20px 20px, 20px 20px, auto, auto;
    border-left: 5px solid #10185a;
    border-right: 6px solid #0676ef;
    box-shadow: 12px 10px 26px rgba(16, 24, 90, .16), inset -18px 0 28px rgba(6, 118, 239, .045);
}

.brand-panel::before {
    content: "";
    position: absolute;
    right: 22px;
    top: -46px;
    width: 112px;
    height: 112px;
    border: 1px solid rgba(6, 118, 239, .16);
    border-radius: 50%;
    box-shadow: 0 0 0 16px rgba(0, 175, 233, .035), 0 0 0 32px rgba(6, 118, 239, .025);
}

.brand-panel::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 6px;
    background: linear-gradient(90deg, #10185a 0 24%, #0676ef 24% 72%, #00afe9 72%);
}

.brand-panel img {
    position: relative;
    z-index: 1;
    width: 195px;
    height: 66px;
    object-fit: contain;
    filter: drop-shadow(0 6px 9px rgba(16, 24, 90, .16));
    transform: translateY(-4px);
}

.brand-panel .brand-label {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 9px;
    padding: 4px 9px 3px;
    border: 1px solid rgba(6, 118, 239, .16);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(6, 118, 239, .09), rgba(0, 175, 233, .13));
    color: #10185a;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .24em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateX(-63%);
}

.brand-panel .brand-label b {
    color: #00afe9;
    font-size: 11px;
}

.site-header .site-nav {
    width: 100%;
    justify-content: flex-end;
    gap: clamp(18px, 2.2vw, 42px);
    padding: 0 24px;
}

.site-header .site-nav > a:not(.nav-cta) {
    white-space: nowrap;
    font-size: clamp(14px, 1.05vw, 17px);
}

.site-header .nav-cta {
    align-self: stretch;
    min-width: 96px;
    min-height: 55px;
    margin: 0 -24px 0 -5px;
    padding-inline: 17px;
    border-radius: 0;
    background: linear-gradient(150deg, #0676ef, #0059ca);
    font-size: 17px;
}

.home-slider {
    position: relative;
    height: min(650px, calc(100vh - 78px));
    min-height: 540px;
    overflow: hidden;
    background: #080d3f;
    color: #fff;
}

.slider-track,
.slider-slide,
.slide-placeholder,
.slide-overlay {
    position: absolute;
    inset: 0;
}

.slider-slide {
    visibility: hidden;
    opacity: 0;
    transform: scale(1.025);
    transition: opacity .7s ease, transform 1.1s ease, visibility .7s;
}

.slider-slide.is-active {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.slide-placeholder {
    display: grid;
    place-items: end end;
    padding: 28px;
    overflow: hidden;
    background-image: url('../images/placeholder-grid.svg'), linear-gradient(120deg, #10185a, #0879e2 58%, #24c1ef);
    background-position: center;
    background-size: cover;
}

.slide-placeholder::before,
.slide-placeholder::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .15);
}

.slide-placeholder::before {
    width: 48vw;
    height: 48vw;
    right: -7vw;
    bottom: -22vw;
    box-shadow: 0 0 0 70px rgba(255, 255, 255, .035), 0 0 0 140px rgba(255, 255, 255, .025);
}

.slide-placeholder::after {
    width: 30vw;
    height: 30vw;
    left: -7vw;
    top: -14vw;
}

.slide-placeholder span {
    position: relative;
    z-index: 1;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, .28);
    color: rgba(255, 255, 255, .64);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
}

.slide-two .slide-placeholder {
    background-image: url('../images/placeholder-grid.svg'), linear-gradient(120deg, #061442, #075fc9 48%, #00afe9);
}

.slide-three .slide-placeholder {
    background-image: url('../images/placeholder-grid.svg'), linear-gradient(120deg, #151b58, #213fb2 52%, #0789df);
}

.slide-overlay {
    background: linear-gradient(90deg, rgba(3, 7, 37, .36), rgba(3, 7, 37, .1)), linear-gradient(0deg, rgba(3, 7, 37, .42), transparent 70%);
}

.slide-copy {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 55px 110px 100px;
    text-align: center;
    text-shadow: 0 3px 20px rgba(3, 7, 37, .45);
}

.slide-copy p {
    margin: 0 0 14px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(25px, 3vw, 48px);
    line-height: 1.1;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.slide-copy h1,
.slide-copy h2 {
    margin: 0;
    color: #fff;
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: clamp(54px, 6vw, 92px);
    font-style: italic;
    font-weight: 900;
    line-height: .98;
    letter-spacing: -.045em;
    text-transform: uppercase;
}

.slide-copy a {
    min-width: 230px;
    margin-top: 30px;
    padding: 16px 28px;
    border-radius: 5px;
    background: #fff;
    color: #0676ef;
    box-shadow: 0 12px 35px rgba(3, 7, 37, .25);
    font-size: 18px;
    font-weight: 800;
    text-shadow: none;
    transition: transform .2s, background .2s, color .2s;
}

.slide-copy a:hover {
    transform: translateY(-3px);
    background: #10185a;
    color: #fff;
}

.slider-arrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    width: 54px;
    height: 72px;
    display: grid;
    place-items: center;
    border: 0;
    background: rgba(8, 13, 63, .34);
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background .2s;
}

.slider-arrow:hover { background: rgba(8, 13, 63, .78); }
.slider-prev { left: 0; }
.slider-next { right: 0; }

.slider-dots {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 35px;
    display: flex;
    align-items: center;
    gap: 18px;
    transform: translateX(-50%);
}

.slider-dots button {
    width: 16px;
    height: 16px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.slider-dots button.is-active { background: #fff; }

@media (max-width: 1100px) {
    .site-header::before { width: 242px; }
    .site-header .nav-wrap { padding-left: 230px; }
    .brand-panel { width: 230px; padding-right: 38px; }
    .brand-panel img { width: 158px; }
    .site-header .site-nav { gap: 19px; }
    .site-header .site-nav > a:not(.nav-cta) { font-size: 14px; }
}

@media (max-width: 900px) {
    .site-header::before { width: 216px; height: 88px; }
    .site-header,
    .site-header .nav-wrap { height: 72px; }
    .site-header .nav-wrap { padding-left: 0; }
    .brand-panel { width: 205px; height: 88px; padding: 7px 36px 18px 16px; }
    .brand-panel img { width: 148px; height: 58px; }
    .brand-panel .brand-label { bottom: 7px; padding: 3px 7px 2px; font-size: 6px; }
    .site-header .menu-toggle { position: absolute; right: 16px; top: 14px; z-index: 4; }
    .site-header .site-nav { inset: 72px 0 0; padding: 30px 24px; gap: 0; }
    .site-header .site-nav > a:not(.nav-cta),
    .site-header .site-nav .nav-cta { min-height: 0; margin: 0; padding: 18px; border-radius: 0; font-size: 19px; }
    .site-header .site-nav .nav-cta { margin-top: 20px; border-radius: 4px; }
    .home-slider { height: 620px; min-height: 620px; }
}

@media (max-width: 620px) {
    .site-header::before { width: 186px; }
    .brand-panel { width: 176px; padding-right: 30px; }
    .brand-panel img { width: 128px; }
    .brand-panel .brand-label { display: none; }
    .home-slider { height: 570px; min-height: 570px; }
    .slide-copy { padding: 45px 36px 90px; }
    .slide-copy p { font-size: 21px; }
    .slide-copy h1,
    .slide-copy h2 { font-size: 49px; }
    .slide-copy a { min-width: 190px; padding: 14px 22px; font-size: 16px; }
    .slider-arrow { top: auto; bottom: 19px; width: 48px; height: 48px; transform: none; background: transparent; }
    .slider-dots { bottom: 34px; gap: 13px; }
    .slider-dots button { width: 13px; height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .slider-slide { transition: none; }
}