/* ============================================================
   HOME HERO - the hero and the benefit strip of the home page (view_homepage.php), scoped to .page_view_homepage.
   The top information bar, header, buttons and footer are the shared site chrome (site-chrome.css), the same on every page.
   ============================================================ */

.page_view_homepage .hx-hero svg,
.page_view_homepage .hx-benefits svg {
    display: block;
}

.page_view_homepage .hx-play {
    display: inline-flex;
    width: 28px;
    height: 28px;
}

.page_view_homepage .hx-play svg {
    width: 28px;
    height: 28px;
}

.page_view_homepage .hx-hero .hx-btn:focus-visible {
    outline-color: #ffffff;
}

/* ---------- hero ---------- */

.page_view_homepage .hx-hero {
    --hx-h: clamp(540px, 42vw, 700px);
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--hx-h);
    overflow: hidden;
    color: #ffffff;
    background: #1b1f26;
}

.page_view_homepage .hx-hero__media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
}

.page_view_homepage .hx-hero__wall {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* the door picture is a 1920 x 760 canvas with the door in its left part; it is placed so the door stands on the right of the hero */

.page_view_homepage .hx-hero__door {
    position: absolute;
    top: 50%;
    left: calc(78% - var(--hx-h) * .773);
    width: auto;
    height: calc(var(--hx-h) * 1.12);
    max-width: none;
    transform: translateY(-50%);
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55));
}

/* depth behind the door: a soft light and a darker right edge (decoration only - no image is invented) */

.page_view_homepage .hx-hero__media::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:
        radial-gradient(46% 70% at 78% 52%, rgba(135, 180, 62, .16), rgba(135, 180, 62, 0) 70%),
        linear-gradient(270deg, rgba(5, 10, 24, .55) 0%, rgba(5, 10, 24, 0) 24%);
    pointer-events: none;
}

.page_view_homepage .hx-hero__shade {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(14, 28, 63, .96) 0%, rgba(14, 28, 63, .88) 34%, rgba(14, 28, 63, .5) 56%, rgba(14, 28, 63, .06) 80%),
        linear-gradient(0deg, rgba(14, 28, 63, .5) 0%, rgba(14, 28, 63, 0) 38%);
}

.page_view_homepage .hx-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: clamp(56px, 6vw, 96px);
    padding-bottom: clamp(56px, 6vw, 96px);
}

.page_view_homepage .hx-hero__copy {
    max-width: 800px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

/* the existing H1 text, visible: the eyebrow-sized line above the marketing headline */

.page_view_homepage .hx-hero__h1 {
    display: block;
    max-width: 640px;
    margin: 0 0 26px;
    padding: 0;
    font: 700 clamp(14px, 1.1vw, 17px)/1.5 "Montserrat", "Segoe UI", Arial, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ffffff;
}

.page_view_homepage .hx-hero__h1::before {
    content: "";
    display: inline-block;
    width: 56px;
    height: 3px;
    margin-right: 16px;
    vertical-align: middle;
    background: var(--hx-green);
    border-radius: 2px;
}

.page_view_homepage .hx-hero__h1 em {
    font-style: normal;
    color: var(--hx-green);
}

.page_view_homepage .hx-hero__headline {
    margin: 0 0 26px;
    padding: 0;
    font: 800 clamp(2.5rem, 4.4vw, 4.125rem)/1.06 "Montserrat", "Segoe UI", Arial, sans-serif;
    letter-spacing: -.022em;
    color: #ffffff;
}

.page_view_homepage .hx-hero__headline span {
    display: block;
    white-space: nowrap;
}

.page_view_homepage .hx-hero__headline strong {
    font-weight: 800;
    color: var(--hx-green);
}

.page_view_homepage .hx-hero__lead {
    max-width: 560px;
    margin: 0 0 36px;
    font: 500 clamp(1rem, 1.25vw, 1.1875rem)/1.65 "Montserrat", "Segoe UI", Arial, sans-serif;
    color: rgba(255, 255, 255, .94);
}

.page_view_homepage .hx-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    text-shadow: none;
}

/* ---------- benefit strip ---------- */

.page_view_homepage .hx-benefits {
    background: #fbfbfa;
    border-bottom: 1px solid var(--hx-line);
}

.page_view_homepage .hx-benefits__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.page_view_homepage .hx-benefit {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 28px clamp(16px, 2vw, 32px);
    border-left: 1px solid var(--hx-line);
}

.page_view_homepage .hx-benefit:first-child {
    padding-left: 0;
    border-left: 0;
}

.page_view_homepage .hx-benefit__ico {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    color: var(--hx-green-btn);
    background: var(--hx-green-tint);
    border-radius: 50%;
}

.page_view_homepage .hx-benefit__ico svg {
    width: 28px;
    height: 28px;
}

.page_view_homepage .hx-benefit__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.page_view_homepage .hx-benefit__text strong {
    font: 800 1.1875rem/1.2 "Montserrat", "Segoe UI", Arial, sans-serif;
    color: var(--hx-navy);
}

.page_view_homepage .hx-benefit__text span {
    font: 500 .9375rem/1.4 "Montserrat", "Segoe UI", Arial, sans-serif;
    color: var(--hx-muted);
}

/* ---------- tablet and phone ---------- */

@media (max-width: 1099px) {
    /* the door becomes a dimmed backdrop so the text on top of it stays readable */

    .page_view_homepage .hx-hero__door {
            left: auto;
            right: -14%;
            height: 82%;
            opacity: .4;
        }

    .page_view_homepage .hx-hero__shade {
            background: linear-gradient(90deg, rgba(14, 28, 63, .94) 0%, rgba(14, 28, 63, .86) 58%, rgba(14, 28, 63, .62) 100%);
        }
}

@media (max-width: 991px) {
    /* the navigation becomes a dropdown under the header; it is hidden from keyboard and screen readers until opened */

    .page_view_homepage .hx-benefits__list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

    .page_view_homepage .hx-benefit {
            padding: 22px 16px;
            border-bottom: 1px solid var(--hx-line);
        }

    .page_view_homepage .hx-benefit:nth-child(odd) {
            padding-left: 0;
            border-left: 0;
        }

    .page_view_homepage .hx-benefit:nth-last-child(-n+2) {
            border-bottom: 0;
        }
}

@media (max-width: 767px) {
    .page_view_homepage .hx-hero {
            --hx-h: 560px;
            min-height: 0;
        }

    .page_view_homepage .hx-hero__door {
            right: -34%;
        }

    .page_view_homepage .hx-hero__shade {
            background: linear-gradient(180deg, rgba(14, 28, 63, .8) 0%, rgba(14, 28, 63, .88) 100%);
        }

    .page_view_homepage .hx-hero__inner {
            padding-top: 48px;
            padding-bottom: 48px;
        }

    .page_view_homepage .hx-hero__headline {
            font-size: clamp(2.2rem, 10.5vw, 2.9rem);
        }

    .page_view_homepage .hx-hero__headline span {
            display: inline;
            white-space: normal;
        }

    .page_view_homepage .hx-hero__actions {
            flex-direction: column;
            gap: 14px;
        }

    .page_view_homepage .hx-hero__actions .hx-btn {
            width: 100%;
        }
}

@media (max-width: 479px) {
    .page_view_homepage .hx-benefit {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
            padding: 20px 12px;
        }

    .page_view_homepage .hx-benefit:nth-child(odd) {
            padding-left: 0;
        }

    .page_view_homepage .hx-benefit__ico {
            width: 48px;
            height: 48px;
        }

    .page_view_homepage .hx-benefit__ico svg {
            width: 24px;
            height: 24px;
        }
}