:root {
    --content-height-pct: 90%;
    /* Fraction of main height (see main { container-type: size }) for the content height cap; 0.88 ≈ 88%. */
    --content-max-height-ratio: 0.88;
    --content-text-band-top-pct: 43%;
    --content-width-pct: 70%;
    --html-font-size: 2rem;
    --text-color: #707070;
    --text-column-pct: 93%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
    height: 100%;
    margin: 0;
    font-size: var(--html-font-size);
}

body {
    background-image: image-set(
      url("../images/frontTunnel21920-1264.jpg") 1x,
      url("../images/frontTunnel21920-1264@2x.jpg") 2x
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--text-color);
    font-family: "Nunito Sans", system-ui, -apple-system, sans-serif;
    line-height: 1.25;
    height: 100%;
    margin: 0;
    max-height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

main {
    align-items: center;
    container-type: size;
    display: flex;
    flex: 1;
    height: 100%;
    justify-content: center;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* Single aspect-ratio frame: used width is the min of % width and width implied by the height cap so 1438:813 is never broken. */
.content {
    --content-h-cap: min(
      calc(100cqh * var(--content-max-height-ratio)),
      calc(100dvh - 2.5rem)
    );
    aspect-ratio: 1438 / 813;
    background-image: image-set(
      url("../images/gls-na-content-bg-1.png") 1x,
      url("../images/gls-na-content-bg-1@2x.png") 2x
    );
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    height: auto;
    margin: 1rem;
    max-height: var(--content-h-cap);
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    width: min(
      100%,
      var(--content-width-pct),
      calc(var(--content-h-cap) * 1438 / 813)
    );
}

/* Fills .content only; no second aspect-ratio */
.content-inner {
    align-items: stretch;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    text-align: center;
    width: 100%;
}

.content-text-zone h1 {
    color: var(--text-color);
    flex-shrink: 0;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    text-wrap: balance;
}

.content-text-zone .content-lede {
    margin: 0;
    padding: 0;
}

.content-text-zone .footer-note {
    margin: 0;
    padding: 0;
}

.content-text-zone .mark {
    align-self: center;
    background: #707070;
    border-radius: 1px;
    flex-shrink: 0;
    height: 3px;
    margin-inline: auto;
    max-width: 3rem;
    /* max-width: min(12rem, var(--text-column-pct)); */
    width: min(12rem, 100%);
}

.content-text-zone > * {
    max-width: var(--text-column-pct);
    overflow-wrap: break-word;
    width: 100%;
    word-break: break-word;
}

.content-inner > .content-text-zone {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    max-width: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    justify-content: space-evenly;
}

.content-cta-row {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    max-width: var(--text-column-pct);
    min-width: 0;
    width: 100%;
}

.email-contact {
    align-items: center;
    color: #0072b5;
    display: flex;
    flex-direction: row;
    font-weight: bold;
    gap: 0.35rem;
    justify-content: center;
    min-width: 0;
    text-decoration: none;
}

.email-contact:hover {
    text-decoration: underline;
}

.content-inner > .content-top-spacer {
    flex: 0 0 var(--content-text-band-top-pct);
    flex-grow: 0;
    flex-shrink: 0;
    min-height: 0;
    pointer-events: none;
    width: 100%;
}

.email-contact img {
    flex-shrink: 0;
    height: auto;
    max-height: 1.25em;
    width: auto;
}

.page {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    position: relative;
}

/* PNG pair: stacked, opacity crossfade. Height in em tracks the email row.
   Explicit width on __art (not width:auto) fixes possible collapse on some browsers; <a> stays fit-content so CTA spacing matches the original. */
.submit-request-button {
    cursor: pointer;
    display: block;
    line-height: 0;
    margin: 0.25rem;
    max-width: 100%;
    min-width: 0;
    text-decoration: none;
    width: fit-content;
}

.submit-request-button__art {
    aspect-ratio: 336.442 / 99.792;
    display: block;
    height: clamp(1.9rem, 2.5em, 2.7em);
    max-width: 100%;
    position: relative;
    width: min(
        17rem,
        calc(clamp(1.9rem, 2.5em, 2.7em) * 336.442 / 99.792)
    );
}

.submit-request-button__img {
    height: 100%;
    left: 0;
    object-fit: contain;
    object-position: center;
    opacity: 1;
    position: absolute;
    top: 0;
    transition: opacity 0.1s ease;
    width: 100%;
}

.submit-request-button__img--hover {
    opacity: 0;
}

.submit-request-button:hover .submit-request-button__img--default,
.submit-request-button:focus-visible .submit-request-button__img--default {
    opacity: 0;
}

.submit-request-button:hover .submit-request-button__img--hover,
.submit-request-button:focus-visible .submit-request-button__img--hover {
    opacity: 1;
}

.submit-request-button:focus-visible {
    outline: 2px solid #0072b5;
    outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Media queries
   -------------------------------------------------------------------------- */
/* font and content scaling */
/* custom: less than 165px inclusive */
@media (width <= 165px) {}

/* custom: less than 400px inclusive */
@media (width < 400px) {
    html {
        font-size: calc(var(--html-font-size) * 0.05) !important;
    }

    .content {
        margin: 0;
    }

    .content-text-zone > * {
        max-width: 98%;
    }
}

/* ===== BOOTSTRAP xs Extra Small Devices (less than 576px) ===== */
@media (width < 576px) {
    :root {
        --content-width-pct: 100%;
    }

    html {
        font-size: calc(var(--html-font-size) * 0.3) !important;
    }

    .content {
        margin: 0;
    }

    .content-text-zone > * {
        max-width: 98%;
    }

    .content-text-zone .mark {
        max-height: 1px;
        max-width: 2rem;
    }

    .email-contact img {
        max-height: calc(var(--html-font-size) * 0.8) !important;
    }
}

/* custom: greater than 165px */
@media (width > 165px) {}

/* custom: greater than 400px */
@media (width > 400px) {}

/* ===== BOOTSTRAP sm Small Devices (greater than 576px inclusive) ===== */
@media (width >= 576px) {
    html {
        font-size: calc(var(--html-font-size) * 0.3) !important;
    }

    .content {
        margin: 0;
    }

    .content-text-zone > * {
        max-width: 98%;
    }

    .email-contact img {
        max-height: calc(var(--html-font-size) * 0.8) !important;
    }
}

/* custom: greater than 680px */
@media (width > 680px) {}

/* ===== BOOTSTRAP md Medium Devices (greater than 768px inclusive) ===== */
@media (width >= 768px) {
    html {
        font-size: calc(var(--html-font-size) * 0.4) !important;
    }

    .content-text-zone > * {
        max-width: 98%;
    }

    .email-contact img {
        max-height: calc(var(--html-font-size) * 0.8) !important;
    }
}

/* custom: greater than 960px */
@media (width > 960px) {}

/* ===== BOOTSTRAP lg Large Devices (greater than 992px inclusive) ===== */
@media (width >= 992px) {
    html {
        font-size: calc(var(--html-font-size) * 0.5) !important;
    }

    .content-text-zone > * {
        max-width: 98%;
    }

    .email-contact img {
        max-height: calc(var(--html-font-size) * 0.8) !important;
    }
}

/* ===== BOOTSTRAP xl Extra Large Devices (greater than 1200px inclusive) ===== */
@media (width >= 1200px) {
    html {
        font-size: calc(var(--html-font-size) * 0.6) !important;
    }

    .content-text-zone > * {
        max-width: 98%;
    }

    .email-contact img {
        max-height: calc(var(--html-font-size) * 0.8) !important;
    }
}

/* ===== BOOTSTRAP xxl Extra Extra Large Devices (greater than 1400px inclusive) ===== */
@media (width >= 1400px) {
    html {
        font-size: calc(var(--html-font-size) * 0.7) !important;
    }

    .content-text-zone > * {
        max-width: 98%;
    }

    .email-contact img {
        max-height: calc(var(--html-font-size) * 0.8) !important;
    }
}

/* custom: greater than 1920px inclusive */
@media (width >= 1920px) {
    html {
        font-size: calc(var(--html-font-size) * 1) !important;
    }

    .content-text-zone > * {
        max-width: 98%;
    }
}

/* custom: greater than 2560px inclusive */
@media (width >= 2560px) {
    html {
        font-size: calc(var(--html-font-size) * 1.3) !important;
    }

    .content-text-zone > * {
        max-width: 98%;
    }

    .email-contact img {
        max-height: calc(var(--html-font-size) * 0.8) !important;
    }
}

/* custom: greater than 3840px inclusive */
@media (width >= 3840px) {
    html {
        font-size: calc(var(--html-font-size) * 1.7) !important;
    }

    .content-text-zone > * {
        max-width: 98%;
    }

    .email-contact img {
        max-height: calc(var(--html-font-size) * 0.8) !important;
    }
}

/* custom: greater than 4096px inclusive */
@media (width >= 4096px) {
    html {
        font-size: calc(var(--html-font-size) * 2.3) !important;
    }

    .content-text-zone > * {
        max-width: 98%;
    }
}

/* custom: greater than 7680px inclusive */
@media (width >= 7680px) {
    html {
        font-size: calc(var(--html-font-size) * 3.2) !important;
    }

    .content-text-zone > * {
        max-width: 98%;
    }
}