/* ==========================================================================
   Haxter Corporation Cloud
   H27-HX26-MS
   ========================================================================== */

.hxcloud_page {
    --hxcloud_blue: #0067b8;
    --hxcloud_navy: #07162b;
    --hxcloud_black: #0b0b0c;
    --hxcloud_text: #171717;
    --hxcloud_muted: #62666d;
    --hxcloud_border: #e3e5e7;
    --hxcloud_soft: #f6f7f8;
    --hxcloud_white: #ffffff;

    width: 100%;
    background: var(--hxcloud_white);
    color: var(--hxcloud_text);
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Elms Sans",
        Arial,
        sans-serif;
}

.hxcloud_page,
.hxcloud_page * {
    box-sizing: border-box;
}

.hxcloud_page a {
    font-family: inherit !important;
}

/* ==========================================================================
   Header
   ========================================================================== */

.hxcloud_header {
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid var(--hxcloud_border);
    position: sticky;
    top: 0;
    z-index: 80;
}

.hxcloud_header_inner {
    width: min(1460px, calc(100% - 64px));
    min-height: 82px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 42px;
}

.hxcloud_brand {
    display: flex;
    align-items: center;
    text-decoration: none !important;
}

.hxcloud_brand img {
    display: block;
    width: auto;
    height: 48px;
    max-width: 240px;
    object-fit: contain;
}

.hxcloud_nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.hxcloud_nav a,
.hxcloud_header_link {
    color: #41464d !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}

.hxcloud_nav a:hover,
.hxcloud_header_link:hover {
    color: var(--hxcloud_blue) !important;
}

.hxcloud_header_actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.hxcloud_header_primary {
    min-height: 42px;
    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #000000;
    border: 1px solid #000000;

    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 500 !important;

    text-decoration: none !important;
}

.hxcloud_header_primary:hover {
    background: var(--hxcloud_blue);
    border-color: var(--hxcloud_blue);
}

/* ==========================================================================
   Shared
   ========================================================================== */

.hxcloud_eyebrow,
.hxcloud_section_header > p,
.hxcloud_dark_label {
    margin: 0 0 18px;

    color: var(--hxcloud_blue);

    font-size: 12px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.hxcloud_button {
    min-height: 48px;
    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;

    text-decoration: none !important;
}

.hxcloud_button_primary {
    color: #ffffff !important;
    background: #000000;
    border: 1px solid #000000;
}

.hxcloud_button_primary:hover {
    background: var(--hxcloud_blue);
    border-color: var(--hxcloud_blue);
}

.hxcloud_button_secondary {
    color: #171717 !important;
    background: #ffffff;
    border: 1px solid #cfd2d5;
}

.hxcloud_button_secondary:hover {
    color: var(--hxcloud_blue) !important;
    border-color: var(--hxcloud_blue);
}

.hxcloud_inline_link {
    color: var(--hxcloud_blue) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.hxcloud_inline_link:hover {
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hxcloud_hero {
    width: 100%;
    background: #ffffff;
}

.hxcloud_hero_inner {
    width: min(1460px, calc(100% - 80px));
    min-height: 690px;
    margin: 0 auto;
    padding: 108px 0 96px;

    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    gap: 94px;
    align-items: center;
}

.hxcloud_hero_content {
    max-width: 950px;
}

.hxcloud_hero h1 {
    margin: 0;

    color: #000000;

    font-size: clamp(56px, 7vw, 104px);
    line-height: 0.95;
    font-weight: 300;
    letter-spacing: -0.062em;
}

.hxcloud_hero_lead {
    max-width: 820px;
    margin: 34px 0 0;

    color: #4d5259;

    font-size: 20px;
    line-height: 1.58;
    font-weight: 300;
}

.hxcloud_hero_actions {
    margin-top: 34px;

    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.hxcloud_hero_index {
    width: 100%;
    border-top: 1px solid var(--hxcloud_border);
}

.hxcloud_hero_index a {
    display: block;

    padding: 21px 0;

    border-bottom: 1px solid var(--hxcloud_border);

    text-decoration: none !important;
}

.hxcloud_hero_index span {
    display: block;

    color: #000000;

    font-size: 20px;
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: -0.025em;
}

.hxcloud_hero_index strong {
    display: block;

    margin-top: 5px;

    color: var(--hxcloud_muted);

    font-size: 13px;
    line-height: 1.5;
    font-weight: 300;
}

.hxcloud_hero_index a:hover span {
    color: var(--hxcloud_blue);
}

/* ==========================================================================
   Intro
   ========================================================================== */

.hxcloud_intro {
    width: 100%;
    background: var(--hxcloud_soft);
    border-top: 1px solid var(--hxcloud_border);
    border-bottom: 1px solid var(--hxcloud_border);
}

.hxcloud_intro_inner {
    width: min(1320px, calc(100% - 80px));
    margin: 0 auto;
    padding: 100px 0;

    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 70px;
}

.hxcloud_section_label {
    color: var(--hxcloud_blue);

    font-size: 12px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.hxcloud_intro_content h2 {
    max-width: 930px;
    margin: 0;

    color: #000000;

    font-size: clamp(40px, 5vw, 68px);
    line-height: 1.04;
    font-weight: 300;
    letter-spacing: -0.052em;
}

.hxcloud_intro_content p {
    max-width: 860px;
    margin: 28px 0 0;

    color: #53585f;

    font-size: 17px;
    line-height: 1.72;
    font-weight: 300;
}

/* ==========================================================================
   Portfolio
   ========================================================================== */

.hxcloud_portfolio {
    width: 100%;
    background: #ffffff;
}

.hxcloud_portfolio_inner {
    width: min(1460px, calc(100% - 80px));
    margin: 0 auto;
    padding: 108px 0;
}

.hxcloud_section_header {
    max-width: 950px;
    margin-bottom: 68px;
}

.hxcloud_section_header h2 {
    margin: 0;

    color: #000000;

    font-size: clamp(40px, 5vw, 68px);
    line-height: 1.04;
    font-weight: 300;
    letter-spacing: -0.052em;
}

.hxcloud_products {
    border-top: 1px solid var(--hxcloud_border);
}

.hxcloud_product {
    min-height: 148px;

    padding: 34px 0;

    display: grid;
    grid-template-columns: 80px 280px minmax(0, 1fr) auto;
    gap: 34px;
    align-items: center;

    border-bottom: 1px solid var(--hxcloud_border);
}

.hxcloud_product_number {
    color: var(--hxcloud_blue);

    font-size: 12px;
    font-weight: 600;
}

.hxcloud_product_identity span {
    display: block;
    margin-bottom: 7px;

    color: var(--hxcloud_muted);

    font-size: 11px;
    line-height: 1.3;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.065em;
}

.hxcloud_product_identity h3 {
    margin: 0;

    color: #000000;

    font-size: 26px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.03em;
}

.hxcloud_product > p {
    max-width: 720px;
    margin: 0;

    color: #555a61;

    font-size: 15px;
    line-height: 1.65;
    font-weight: 300;
}

.hxcloud_product > a {
    color: var(--hxcloud_blue) !important;

    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;

    text-decoration: none !important;
    white-space: nowrap;
}

.hxcloud_product > a:hover {
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

/* ==========================================================================
   Storage
   ========================================================================== */

.hxcloud_storage {
    width: 100%;
    background: var(--hxcloud_soft);
    border-top: 1px solid var(--hxcloud_border);
    border-bottom: 1px solid var(--hxcloud_border);
}

.hxcloud_storage_inner {
    width: min(1460px, calc(100% - 80px));
    margin: 0 auto;
    padding: 108px 0;
}

.hxcloud_storage_intro {
    max-width: 900px;
}

.hxcloud_storage_intro h2 {
    margin: 0;

    color: #000000;

    font-size: clamp(40px, 5vw, 70px);
    line-height: 1.03;
    font-weight: 300;
    letter-spacing: -0.055em;
}

.hxcloud_storage_levels {
    margin-top: 70px;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    border-top: 1px solid #d8dadd;
    border-bottom: 1px solid #d8dadd;
}

.hxcloud_storage_levels article {
    min-height: 290px;
    padding: 36px 42px 40px 0;
}

.hxcloud_storage_levels article + article {
    padding-left: 42px;
    border-left: 1px solid #d8dadd;
}

.hxcloud_storage_levels span {
    color: var(--hxcloud_blue);

    font-size: 12px;
    font-weight: 600;
}

.hxcloud_storage_levels h3 {
    margin: 34px 0 0;

    color: #000000;

    font-size: 28px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.035em;
}

.hxcloud_storage_levels p {
    margin: 18px 0 0;

    color: #555a61;

    font-size: 15px;
    line-height: 1.68;
    font-weight: 300;
}

/* ==========================================================================
   Computing
   ========================================================================== */

.hxcloud_computing {
    width: 100%;
    background: var(--hxcloud_navy);
    color: #ffffff;
}

.hxcloud_computing_inner {
    width: min(1320px, calc(100% - 80px));
    margin: 0 auto;
    padding: 110px 0;

    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 100px;
}

.hxcloud_dark_label {
    color: #8fc4ea;
}

.hxcloud_computing h2 {
    max-width: 700px;
    margin: 0;

    color: #ffffff;

    font-size: clamp(42px, 5vw, 70px);
    line-height: 1.03;
    font-weight: 300;
    letter-spacing: -0.055em;
}

.hxcloud_computing_copy p {
    max-width: 690px;
    margin: 0 0 24px;

    color: rgba(255,255,255,.72);

    font-size: 17px;
    line-height: 1.72;
    font-weight: 300;
}

.hxcloud_computing_copy a {
    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 500 !important;

    text-decoration: none !important;
}

.hxcloud_computing_copy a:hover {
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

/* ==========================================================================
   Custom
   ========================================================================== */

.hxcloud_custom {
    width: 100%;
    background: #ffffff;
}

.hxcloud_custom_inner {
    width: min(1460px, calc(100% - 80px));
    margin: 0 auto;
    padding: 108px 0;
}

.hxcloud_custom_grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 100px;

    border-top: 1px solid var(--hxcloud_border);

    padding-top: 48px;
}

.hxcloud_custom_statement p {
    max-width: 620px;
    margin: 0;

    color: #111111;

    font-size: clamp(30px, 3vw, 43px);
    line-height: 1.3;
    font-weight: 300;
    letter-spacing: -0.04em;
}

.hxcloud_custom_copy p {
    max-width: 720px;
    margin: 0 0 20px;

    color: #555a61;

    font-size: 16px;
    line-height: 1.72;
    font-weight: 300;
}

/* ==========================================================================
   ARIA
   ========================================================================== */

.hxcloud_aria {
    width: 100%;
    background: #ffffff;
    border-top: 1px solid var(--hxcloud_border);
}

.hxcloud_aria_inner {
    width: min(1460px, calc(100% - 80px));
    margin: 0 auto;
    padding: 108px 0;

    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 96px;
}

.hxcloud_aria_heading h2 {
    margin: 0;

    color: #000000;

    font-size: clamp(40px, 5vw, 68px);
    line-height: 1.04;
    font-weight: 300;
    letter-spacing: -0.052em;
}

.hxcloud_aria_body > p {
    margin: 0 0 22px;

    color: #555a61;

    font-size: 16px;
    line-height: 1.72;
    font-weight: 300;
}

.hxcloud_aria_capabilities {
    margin: 36px 0;

    border-top: 1px solid var(--hxcloud_border);
}

.hxcloud_aria_capabilities span {
    display: block;

    padding: 15px 0;

    border-bottom: 1px solid var(--hxcloud_border);

    color: #25282c;

    font-size: 14px;
    line-height: 1.4;
}

/* ==========================================================================
   Suites
   ========================================================================== */

.hxcloud_suites {
    width: 100%;
    background: var(--hxcloud_soft);
    border-top: 1px solid var(--hxcloud_border);
    border-bottom: 1px solid var(--hxcloud_border);
}

.hxcloud_suites_inner {
    width: min(1460px, calc(100% - 80px));
    margin: 0 auto;
    padding: 108px 0;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .7fr);
    gap: 94px;
}

.hxcloud_suites_content h2 {
    max-width: 840px;
    margin: 0;

    color: #000000;

    font-size: clamp(40px, 5vw, 68px);
    line-height: 1.04;
    font-weight: 300;
    letter-spacing: -0.052em;
}

.hxcloud_suites_content > p:not(.hxcloud_eyebrow) {
    max-width: 820px;
    margin: 26px 0 0;

    color: #555a61;

    font-size: 16px;
    line-height: 1.72;
    font-weight: 300;
}

.hxcloud_suites_scope {
    border-top: 1px solid #d6d9dc;
}

.hxcloud_suites_scope_title {
    margin: 0;
    padding: 20px 0;

    border-bottom: 1px solid #d6d9dc;

    color: #000000;

    font-size: 17px;
    font-weight: 500;
}

.hxcloud_suites_scope ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.hxcloud_suites_scope li {
    padding: 16px 0;

    border-bottom: 1px solid #d6d9dc;

    color: #555a61;

    font-size: 14px;
    line-height: 1.45;
}

/* ==========================================================================
   Statement
   ========================================================================== */

.hxcloud_statement {
    width: 100%;
    background: #000000;
    color: #ffffff;
}

.hxcloud_statement_inner {
    width: min(1320px, calc(100% - 80px));
    margin: 0 auto;
    padding: 112px 0;

    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 100px;
    align-items: end;
}

.hxcloud_statement h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(58px, 7vw, 100px);
    line-height: .93;
    font-weight: 300;
    letter-spacing: -0.062em;
}

.hxcloud_statement_copy p {
    max-width: 680px;
    margin: 0;

    color: #b8bcc1;

    font-size: 17px;
    line-height: 1.72;
    font-weight: 300;
}

.hxcloud_statement_link {
    display: inline-block;
    margin-top: 28px;

    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 500 !important;

    text-decoration: none !important;
}

.hxcloud_statement_link:hover {
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

/* ==========================================================================
   Contact
   ========================================================================== */

.hxcloud_contact {
    width: 100%;
    background: #ffffff;
}

.hxcloud_contact_inner {
    width: min(1460px, calc(100% - 80px));
    margin: 0 auto;
    padding: 108px 0;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 80px;
    align-items: end;
}

.hxcloud_contact h2 {
    max-width: 860px;
    margin: 0;

    color: #000000;

    font-size: clamp(42px, 5vw, 70px);
    line-height: 1.03;
    font-weight: 300;
    letter-spacing: -0.055em;
}

.hxcloud_contact p:not(.hxcloud_eyebrow) {
    max-width: 780px;
    margin: 28px 0 0;

    color: #555a61;

    font-size: 16px;
    line-height: 1.7;
    font-weight: 300;
}

.hxcloud_contact_actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.hxcloud_contact_text {
    color: var(--hxcloud_blue) !important;

    font-size: 14px !important;
    font-weight: 500 !important;

    text-decoration: none !important;
}

.hxcloud_contact_text:hover {
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {

    .hxcloud_header_inner {
        grid-template-columns: auto 1fr;
    }

    .hxcloud_nav {
        display: none;
    }

    .hxcloud_header_actions {
        justify-self: end;
    }

    .hxcloud_hero_inner,
    .hxcloud_computing_inner,
    .hxcloud_aria_inner,
    .hxcloud_suites_inner,
    .hxcloud_statement_inner,
    .hxcloud_contact_inner {
        grid-template-columns: 1fr;
    }

    .hxcloud_hero_inner {
        min-height: auto;
    }

    .hxcloud_product {
        grid-template-columns: 60px 230px minmax(0, 1fr);
    }

    .hxcloud_product > a {
        grid-column: 3;
    }

    .hxcloud_custom_grid {
        grid-template-columns: 1fr;
        gap: 46px;
    }

    .hxcloud_contact_actions {
        justify-content: flex-start;
    }
}

@media (max-width: 820px) {

    .hxcloud_header_inner {
        width: min(100% - 32px, 1460px);
        min-height: 70px;
    }

    .hxcloud_brand img {
        height: 38px;
        max-width: 190px;
    }

    .hxcloud_header_link {
        display: none;
    }

    .hxcloud_header_primary {
        min-height: 38px;
        padding: 0 14px;
    }

    .hxcloud_hero_inner,
    .hxcloud_intro_inner,
    .hxcloud_portfolio_inner,
    .hxcloud_storage_inner,
    .hxcloud_computing_inner,
    .hxcloud_custom_inner,
    .hxcloud_aria_inner,
    .hxcloud_suites_inner,
    .hxcloud_statement_inner,
    .hxcloud_contact_inner {
        width: min(100% - 38px, 1460px);
    }

    .hxcloud_hero_inner {
        padding: 76px 0 72px;
        gap: 54px;
    }

    .hxcloud_intro_inner {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 76px 0;
    }

    .hxcloud_portfolio_inner,
    .hxcloud_storage_inner,
    .hxcloud_custom_inner,
    .hxcloud_aria_inner,
    .hxcloud_suites_inner,
    .hxcloud_contact_inner {
        padding: 78px 0;
    }

    .hxcloud_product {
        grid-template-columns: 44px 1fr;
        gap: 20px;
    }

    .hxcloud_product > p,
    .hxcloud_product > a {
        grid-column: 2;
    }

    .hxcloud_storage_levels {
        grid-template-columns: 1fr;
    }

    .hxcloud_storage_levels article,
    .hxcloud_storage_levels article + article {
        min-height: auto;
        padding: 30px 0;
        border-left: 0;
        border-bottom: 1px solid #d8dadd;
    }

    .hxcloud_storage_levels article:last-child {
        border-bottom: 0;
    }

    .hxcloud_computing_inner,
    .hxcloud_statement_inner {
        padding: 82px 0;
        gap: 52px;
    }
}

@media (max-width: 520px) {

    .hxcloud_header_primary {
        font-size: 11px !important;
    }

    .hxcloud_hero h1 {
        font-size: 50px;
    }

    .hxcloud_hero_lead {
        font-size: 18px;
    }

    .hxcloud_hero_actions,
    .hxcloud_contact_actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hxcloud_button {
        width: 100%;
    }

    .hxcloud_product {
        grid-template-columns: 1fr;
    }

    .hxcloud_product > p,
    .hxcloud_product > a {
        grid-column: auto;
    }

    .hxcloud_product_number {
        margin-bottom: -8px;
    }

    .hxcloud_statement h2 {
        font-size: 58px;
    }
}