@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/poppins/poppins-500-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/poppins/poppins-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/poppins/poppins-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/poppins/poppins-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.brand-bant {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.brand-bant-strip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.05rem;
    padding: 0.16rem 0.68rem 0.2rem;
    overflow: hidden;
    background: var(--accent);
    color: #ffffff;
    transform: rotate(-2.5deg);
    transform-origin: center;
    transition: transform 0.25s var(--ease-out), background-color 0.2s;
    white-space: nowrap;
}

.brand-bant-word {
    color: #ffffff;
    font-family: var(--font);
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.07em;
    line-height: 1;
}

.brand-bant-tld {
    margin-inline-start: 0.02em;
    color: #2a0606;
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Kutu: the live header's boxed wordmark. Text only; hover never changes size. */
.brand-kutu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6rem;
    padding: 0.18rem 0.78rem 0.22rem;
    border: 1.5px solid var(--ink);
    border-radius: 0.18rem;
    background: transparent;
    color: var(--ink);
    white-space: nowrap;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.brand-kutu-word {
    color: inherit;
    font-family: var(--font);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.07em;
    line-height: 1;
}

.brand-kutu-tld {
    color: var(--accent);
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.site-header .brand:hover .brand-kutu,
.site-header .brand:focus-visible .brand-kutu {
    border-color: var(--accent);
    background: var(--accent-tint);
}

.site-header .brand:hover .brand-kutu-tld,
.site-header .brand:focus-visible .brand-kutu-tld {
    color: var(--accent);
}


/* Sade: the live header wordmark without frame or tagline. */
.brand-text {
    display: inline-flex;
    align-items: center;
    min-height: 2.6rem;
    color: var(--ink);
    transition: opacity 0.2s var(--ease-out);
}

.brand-text-word {
    color: inherit;
    font-family: "Poppins", var(--font);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
}

.brand-text-tld {
    color: var(--accent);
    font-size: 0.62em;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.site-header .brand:hover .brand-text,
.site-header .brand:focus-visible .brand-text {
    opacity: 0.78;
}

@media (max-width: 52rem) {
    .brand-text {
        min-height: 2.3rem;
    }

    .brand-text-word {
        font-size: 1.18rem;
    }
}

@media (max-width: 21rem) {
    .brand-text-word {
        font-size: 1rem;
    }
}

@media (max-width: 52rem) {
    .brand-kutu {
        min-height: 2.3rem;
        padding: 0.14rem 0.62rem 0.18rem;
    }

    .brand-kutu-word {
        font-size: 1.18rem;
    }
}

@media (max-width: 21rem) {
    .brand-kutu-word {
        font-size: 1rem;
    }
}


.site-header .brand-bant-strip,
.wa-topbar .brand-bant-strip {
    min-height: 2.6rem;
    padding: 0.18rem 0.85rem 0.22rem;
}

.site-header .brand-bant-word,
.wa-topbar .brand-bant-word {
    font-size: 1.45rem;
}

.site-footer .brand-bant-strip {
    min-height: 1.75rem;
    padding: 0.12rem 0.55rem 0.16rem;
}

.site-footer .brand-bant-word {
    font-size: 1.04rem;
}

.brand:hover .brand-bant-strip {
    transform: rotate(-1.2deg) translateX(2px);
}

@media (max-width: 52rem) {
    .site-header .brand-bant-strip,
    .wa-topbar .brand-bant-strip {
        min-height: 2.3rem;
        padding-inline: 0.7rem;
    }

    .site-header .brand-bant-word,
    .wa-topbar .brand-bant-word {
        font-size: 1.18rem;
    }

    .site-footer .brand-bant-strip {
        min-height: 1.7rem;
        padding-inline: 0.5rem;
    }

    .site-footer .brand-bant-word {
        font-size: 0.96rem;
    }
}

@media (max-width: 21rem) {
    .site-header .brand-bant-word,
    .wa-topbar .brand-bant-word {
        font-size: 1rem;
    }

    .site-footer .brand-bant-word {
        font-size: 0.84rem;
    }
}