/* ==========================================================================
   HPB Base Styles — Redesign
   Fonts + design tokens only. No global resets or tag-level rules here —
   the redesign currently touches only header, footer and the homepage
   blocks, so nothing here may cascade onto existing site-wide elements.
   New redesign stylesheets consume the --hpb-* variables below.
   Fill in real values from Figma as the redesign progresses.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts (self-hosted)
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro/be-vietnam-pro-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro/be-vietnam-pro-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro/be-vietnam-pro-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro/be-vietnam-pro-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro/be-vietnam-pro-900.woff2') format('woff2');
}

@font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/bebas-neue/bebas-neue-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/work-sans/work-sans-variable.woff2') format('woff2');
}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/work-sans/work-sans-variable.woff2') format('woff2');
}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/work-sans/work-sans-variable.woff2') format('woff2');
}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/work-sans/work-sans-variable.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   Design tokens — PLACEHOLDER VALUES, replace with real design once available
   Scoped with the hpb- prefix so it's clear these belong to the redesign
   and don't collide with any legacy variables/classes.
   -------------------------------------------------------------------------- */
:root {
    /* Font families */
    --hpb-font-family-base: 'Be Vietnam Pro', sans-serif;
    --hpb-font-family-heading: 'Bebas Neue', sans-serif;
    --hpb-font-family-work-sans: 'Work Sans', sans-serif;

    /* Font weights */
    --hpb-fw-regular: 400;
    --hpb-fw-medium: 500;
    --hpb-fw-semibold: 600;
    --hpb-fw-bold: 700;
    --hpb-fw-black: 900;

    /* Font sizes */
    --hpb-font-size-10: 10px;
    --hpb-font-size-12: 12px;
    --hpb-font-size-14: 14px;
    --hpb-font-size-16: 16px;
    --hpb-font-size-18: 18px;
    --hpb-font-size-20: 20px;
    --hpb-font-size-24: 24px;
    --hpb-font-size-32: 32px;
    --hpb-font-size-40: 40px;
    --hpb-font-size-48: 48px;
    --hpb-font-size-64: 64px;
    --hpb-font-size-74: 74px;

    /* Colors — TODO: replace with real palette */
    --hpb-color-black: #000000;
    --hpb-color-dark: #122239;
    --hpb-color-dark-20: #12223933;
    --hpb-color-dark-50: #12223980;
    --hpb-color-dark-70: #122239B2;
    --hpb-color-dark-80: #122239CC;
    --hpb-color-text-body: #122239B2;
    --hpb-color-text-muted: #777777;
    --hpb-color-border: #e0e0e0;
    --hpb-color-border-2: #C2C6D34D;
    --hpb-color-border-3: #E5E7EB;
    --hpb-color-white: #ffffff;
    --hpb-color-white-10: #FFFFFF1A;
    --hpb-color-white-20: #FFFFFF33;
    --hpb-color-white-30: #FFFFFF4D;
    --hpb-color-white-50: #FFFFFF80;
    --hpb-color-white-60: #FFFFFF99;
    --hpb-color-bg-light: #f7f7f7;
    --hpb-color-red: #D92128;
    --hpb-color-blue: #003870;
    --hpb-color-blue-dark: #1A2332;
    --hpb-color-blue-middle: #004F99;
    --hpb-color-blue-middle-55: #004F998C;
    --hpb-color-blue-light: #EDF1F5;
    --hpb-color-gray: #424751;
    --hpb-color-gray-light: #EEF1F4;
    --hpb-color-subtext: #EEEEEE;
    --hpb-color-label-blue-light: #B1D1FF;


    /* Layout */
    --hpb-page-width: 1728px;
}

.hpb-h1,
.hpb-h2,
.hpb-h3,
.hpb-h4,
.hpb-h5,
.hpb-h6 {
    font-family: var(--hpb-font-family-heading);
    font-weight: var(--hpb-fw-regular);
    text-transform: uppercase;
    line-height: 110%;
    color: var(--hpb-color-black);
}

.hpb-h1 {
    font-size: var(--hpb-font-size-40);
    letter-spacing: -0.0005em;
}

.hpb-h2 {
    font-size: var(--hpb-font-size-32);
    letter-spacing: -0.0005em;
}

.hpb-h3 {
    font-size: var(--hpb-font-size-24);
    letter-spacing: 1px;
}

.hpb-h4 {
    font-size: var(--hpb-font-size-20);
    letter-spacing: 1px;
}

.hpb-h5 {
    font-size: var(--hpb-font-size-18);
    letter-spacing: 1px;
}

.hpb-h6 {
    font-size: var(--hpb-font-size-16);
    letter-spacing: 1px;
}

.hpb-h1 span,
.hpb-h2 span,
.hpb-h3 span,
.hpb-h4 span,
.hpb-h5 span,
.hpb-h6 span {
    color: var(--hpb-color-blue);
}

.hpb-text {
    font-family: var(--hpb-font-family-base);
    font-size: var(--hpb-font-size-14);
    line-height: 22px;
    color: var(--hpb-color-text-body);
    font-weight: var(--hpb-fw-regular);
}

.hpb-subtext {
    font-family: var(--hpb-font-family-base);
    font-size: var(--hpb-font-size-14);
    line-height: 20px;
    font-weight: var(--hpb-fw-regular);
}

.hpb-subtitle {
    padding-left: 20px;
    border-left: 2px solid var(--hpb-color-blue-middle);
    color: var(--hpb-color-gray);
}


.hpb-container {
    width: 100%;
    max-width: 1248px;
    padding: 0 24px;
    margin: 0 auto;
}

.hpb-container-middle {
    width: 100%;
    max-width: 1360px;
    padding: 0 24px;
    margin: 0 auto;
}


.hpb-btn {
    font-family: var(--hpb-font-family-base);
    font-size: var(--hpb-font-size-14);
    line-height: 100%;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    font-weight: var(--hpb-fw-bold);
    padding: 18px 32px;
    border-radius: 4px;
    border: 2px solid transparent;
    transition: all 300ms;
    text-align: center;
    text-decoration: none;
}

.hpb-btn-red {
    background: var(--hpb-color-red);
    border: 2px solid var(--hpb-color-red);
    color: var(--hpb-color-white);
}
.hpb-btn-red:hover {
    background: var(--hpb-color-white);
    color:  var(--hpb-color-red);
}

.hpb-btn-white {
    background: var(--hpb-color-white);
    border: 2px solid var(--hpb-color-white);
    color: var(--hpb-color-dark);
}
.hpb-btn-white:hover {
    background: var(--hpb-color-dark);
    border: 2px solid var(--hpb-color-dark);
    color:  var(--hpb-color-white);
}

.hpb-btn-border {
    background: var(--hpb-color-white);
    border: 2px solid var(--hpb-color-dark);
    color: var(--hpb-color-dark);
}
.hpb-btn-border:hover {
    background: var(--hpb-color-dark);
    color:  var(--hpb-color-white);
}

.hpb-btn-outline-white {
    background: transparent;
    border: 2px solid var(--hpb-color-white);
    color: var(--hpb-color-white);
}
.hpb-btn-outline-white:hover {
    background: var(--hpb-color-white);
    color: var(--hpb-color-dark);
}

.hpb-link-arrow {
    display: inline-flex;
    align-items: center;
    font-family: var(--hpb-font-family-base);
    font-size: var(--hpb-font-size-12);
    line-height: 20px;
    font-weight: var(--hpb-fw-bold);
    letter-spacing: 0.7px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--hpb-color-dark);
    transition: color 300ms;
}
.hpb-link-arrow:hover {
    color: var(--hpb-color-red);
    text-decoration: none;
}
/* Trailing arrow icon only, no text styling — combine with .hpb-btn (which
   has no arrow of its own) or any other element, e.g. class="hpb-btn
   hpb-btn-border hpb-icon-arrow". Recolors via currentColor, so it follows
   whatever `color` the element (or its :hover) already has. .hpb-link-arrow
   includes this automatically. */
.hpb-link-arrow::after,
.hpb-icon-arrow::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 6px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-2.29485e-07 6.75L9.13125 6.75L4.93125 10.95L6 12L12 6L6 6.91406e-07L4.93125 1.05L9.13125 5.25L-2.95052e-07 5.25L-2.29485e-07 6.75Z' fill='%23122239'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-2.29485e-07 6.75L9.13125 6.75L4.93125 10.95L6 12L12 6L6 6.91406e-07L4.93125 1.05L9.13125 5.25L-2.95052e-07 5.25L-2.29485e-07 6.75Z' fill='%23122239'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}


body.home .wrapper {
    background-color: transparent;
    float: inherit;
}

/* The wrapper ends with a trailing <br> that gives legacy page content its gap
   above the redesigned footer. Redesigned sections carry their own bottom
   spacing, so the gap is dropped once one of them has been rendered. Keyed on
   the markup rather than on the page: every section template part opens with
   `class="home-<block>"`, so a new block is covered without touching this. */
.wrapper > section[class^="home-"] ~ br {
    display: none;
}


@media (min-width: 992px) {
    .hpb-h1 {
        font-size: var(--hpb-font-size-64);
    }
    .hpb-h2 {
        font-size: var(--hpb-font-size-48);
    }
    .hpb-h3 {
        font-size: var(--hpb-font-size-32);
    }
    .hpb-h4 {
        font-size: var(--hpb-font-size-24);
    }
    .hpb-h5 {
        font-size: var(--hpb-font-size-20);
    }
    .hpb-h6 {
        font-size: var(--hpb-font-size-18);
    }
    .hpb-text {
        font-size: var(--hpb-font-size-18);
        line-height: 28px;
    }
    .hpb-subtext {
        font-size: var(--hpb-font-size-20);
        line-height: 28px;
    }
    .hpb-btn {
        line-height: 20px;
    }
    .hpb-link-arrow {
        font-size: var(--hpb-font-size-14);
    }
    .hpb-subtitle {
        padding-left: 24px;
    }
}