/* Home page: ported from the staging Elementor page (post 53). Each block
   names the staging container it mirrors. */

/* Hero [1fb15bf]: slideshow photo under a #2596BE overlay at 75%. */
.home-hero {
    --min-height: 50rem;
    --justify: center;
    --align: center;
    --overlay-color: #2596BE;
    --overlay-opacity: 0.75;
    overflow: hidden;
}

/* [f25ba96] */
.home-hero-inner {
    --justify: flex-start;
    --align: center;
    --pt: 0%;
    --pr: 0%;
    --pb: 0%;
    --pl: 0%;
    z-index: 20;
}

.home-hero-title {
    align-self: flex-start;
    width: 55%;
    max-width: 55%;
    font-size: 4rem;
    font-weight: 600;
    color: var(--nd-white);
}

.home-hero-text {
    align-self: flex-start;
    width: 35%;
    max-width: 35%;
    font-size: 1.25rem;
    color: var(--nd-white);
}

/* [eaee498] */
.home-hero-buttons {
    --justify: flex-start;
    --align: stretch;
    --row-gap: 0px;
    --col-gap: 2px;
    --min-height: 0px;
    --pr: 0px;
    --pl: 0px;
}

.home-hero-button {
    align-self: center;
    width: 150px;
    max-width: 150px;
}

/* Intro [e34e0c5] > [b2b9a38] */
.home-intro-row {
    --justify: flex-start;
    --row-gap: 50px;
    --col-gap: 50px;
    --mt: 5rem;
    --mb: 5rem;
    --pt: 0px;
    --pr: 0px;
    --pb: 0px;
    --pl: 0px;
    --self: center;
}

.home-intro-lead {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2em;
    color: var(--color-primary);
}

.home-intro-lead h3 {
    margin-block: 0.5rem 1rem;
}

.home-intro-text {
    align-self: flex-start;
    font-size: 18px;
    color: var(--text-secondary);
}

/* Stats band [8c2c5fd] > [a4510a0] */
.home-stats {
    --justify: center;
    --pt: 20px;
    --pr: 20px;
    --pb: 20px;
    --pl: 20px;
    background-color: var(--color-primary);
}

.home-stats-row {
    --justify: space-evenly;
    --align: center;
    --row-gap: 0px;
    --col-gap: 0px;
    --pt: 20px;
    --pr: 20px;
    --pb: 20px;
    --pl: 20px;
}

.stat {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: stretch;
    align-self: stretch;
    flex: 1 0 auto;
    gap: 0.2rem;
}

.stat-title {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: var(--fs-secondary);
    font-weight: 600;
    line-height: 1.2em;
    color: var(--nd-white);
}

.stat-number {
    display: flex;
    flex: 1;
    justify-content: center;
    font-size: var(--fs-primary);
    font-weight: 600;
    line-height: 1;
    color: var(--nd-white);
}

/* Recent work [575fec2] > [5e48f6b] */
.home-work-inner {
    --justify: flex-start;
    --mt: 5rem;
    --mb: 5rem;
    --self: center;
}

/* [80209ab] */
.home-work-head {
    --wrap: wrap;
}

.home-work-title {
    width: 100%;
    max-width: 100%;
    margin-bottom: 5px;
    font-size: var(--fs-h2);
    color: var(--color-primary);
}

.home-work-text {
    font-size: var(--fs-text);
    color: var(--text-secondary);
}

/* [03778b0] */
.home-mosaic {
    --wrap: wrap;
}

.mosaic-lg {
    --pt: 10px;
    --pr: 10px;
    --pb: 10px;
    --pl: 10px;
}

.mosaic-side {
    --justify: space-between;
    --self: center;
}

.mosaic-row {
    --justify: space-between;
    --align: center;
    --self: center;
}

/* Flip boxes (fade effect). */
.work-tile {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background-color: #1ABC9C;
    color: var(--nd-white);
}

.work-tile-lg { height: 520px; }
.mosaic-row .work-tile { flex: 1 1 0; }
.work-tile-top { margin-bottom: 10px; flex: 0 0 auto; }
.work-tile-bottom { margin-top: 10px; flex: 0 0 auto; }

.work-tile-back {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 35px;
    text-align: center;
    background-color: rgba(0, 159, 227, 0.72);
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.work-tile:hover .work-tile-back,
.work-tile:focus-visible .work-tile-back {
    opacity: 1;
}

.work-tile-label {
    display: block;
    margin-bottom: 20px;
    font-size: var(--fs-secondary);
    font-weight: 600;
    line-height: 1.2em;
}

.work-tile-btn {
    align-self: center;
    padding: 10px 20px;
}

/* Partners [b9406ec] > [07edf56] */
.home-partners {
    background-color: var(--bg-secondary);
}

.partners-card {
    --justify: flex-start;
    --align: center;
    --mt: 5rem;
    --mb: 5rem;
    --pt: 20px;
    --pr: 20px;
    --pb: 20px;
    --pl: 20px;
    --self: center;
    background-color: var(--nd-white);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

.partners-title {
    width: 100%;
    padding: 20px;
    font-size: 24px;
    line-height: 1.2em;
    text-align: center;
    color: var(--color-primary);
}

/* Divider [b072df3]: a 1px line at 80% width. */
.partners-divider {
    width: 100%;
    padding: 1px;
}

.partners-divider span {
    width: 80%;
    margin: 2px auto;
    border-top: 1px solid var(--color-primary);
}

/* [40272d6] */
.partner-logos {
    --justify: space-between;
    --align: stretch;
    --wrap: wrap;
    --pt: 20px;
    --pr: 20px;
    --pb: 20px;
    --pl: 20px;
    --self: stretch;
    --grow: 1;
    --shrink: 0;
    list-style: none;
    margin: 0;
}

.partner-logo {
    flex: 1 0 auto;
    width: 25%;
    max-width: 25%;
    padding: 10px;
}

.partner-logo img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: contain;
}

@media (min-width: 768px) {
    .home-hero-inner { --width: 80%; }
    .home-intro-row { --width: 80%; }
    .home-stats-row { --width: 75%; }
    .home-work-inner { --width: 80%; }
    .mosaic-lg { --width: 66.66666%; }
    .mosaic-side { --width: 33.3333%; }
    .partners-card { --width: 80%; }
}

@media (max-width: 1024px) {
    .home-hero-title { width: 100%; max-width: 100%; font-size: 36px; }
    .home-hero-text { font-size: 16px; }
    .home-intro-row { --row-gap: 10px; --col-gap: 10px; --mt: 2rem; --mb: 2rem; }
    .home-intro-lead { font-size: 20px; }
    .home-intro-text { font-size: 16px; }
    .home-stats-row { --justify: flex-start; }
    .home-work-inner { --min-height: 0px; }
    .home-work-head { --dir: column; --justify: center; --self: center; }
    .home-work-title { margin-bottom: 0; text-align: center; }
    .home-work-text { margin-top: 20px; text-align: center; }
    .mosaic-row { --dir: column; }
    .work-tile, .work-tile-lg { height: 320px; }
    .mosaic-row .work-tile { flex: 0 0 auto; }
    .mosaic-row .work-tile-first { margin-bottom: 10px; }
    .partners-card { --min-height: 0px; }
    .partners-title { font-size: 20px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .home-hero-inner { --width: 80%; }
    .home-intro-row { --width: 90%; }
    .home-stats-row { --width: 90%; }
    .home-work-inner { --width: 90%; }
    .home-work-head { --width: 95%; }
    .mosaic-lg, .mosaic-side { --width: 100%; }
    .partners-card { --width: 90%; }
}

@media (max-width: 767px) {
    .home-hero {
        --min-height: 80vh;
        --pt: 0px;
        --pr: 0px;
        --pb: 0px;
        --pl: 0px;
        --self: center;
    }

    .home-hero-inner { --justify: center; --row-gap: 20px; --col-gap: 0px; }
    .home-hero-title { text-align: center; font-size: 31px; line-height: 1.2em; }

    .home-hero-text {
        align-self: center;
        width: 80%;
        max-width: 80%;
        text-align: center;
        font-size: 18px;
        line-height: 1.2em;
    }

    .home-hero-buttons {
        --wrap-mobile: nowrap;
        --pt: 0px;
        --pb: 0px;
    }

    .home-hero-button { width: 100%; max-width: 100%; text-align: center; }
    .home-intro-row { --mt: 2rem; --mb: 2rem; }
    .home-intro-lead { font-size: 16px; }
    .home-intro-text { font-size: 14px; line-height: 1.2em; }

    .home-stats { --justify: center; --align: center; --wrap-mobile: nowrap; }

    .home-stats-row {
        --dir: row;
        --justify: center;
        --row-gap: 15px;
        --col-gap: 15px;
        --self: flex-start;
        --grow: 1;
        --shrink: 0;
    }

    .stat { align-self: center; text-align: center; }
    .stat-title { display: block; text-align: center; }
    .partner-logo { width: 50%; max-width: 50%; }
    .partners-title { font-size: 16px; }
}