/* apply a natural box layout model to all elements, but allowing components to change */
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

:root {
    --header-height-mobile: 9.6rem;
    --header-height-desktop: 8.4rem;
}

html {
    font-size: 62.5%;
}
body {
    font-size: 1.6em;
    line-height: 2;
    font-family: 'Raleway', Arial, Helvetica, sans-serif;
    font-optical-sizing: auto;
    padding-top: calc(var(--header-height-mobile) + 2rem);
}
@media (min-width: 900px) {
    body {
        padding-top: calc(var(--header-height-desktop) + 6rem);
    }
}
html,body {
    height: 100%;
    display: flex;
    flex-direction: column;
}
body > main {
    padding-bottom: 4rem;
}
@media (min-width: 900px) {
    body > main {
        flex-grow: 1;
        align-content: center;
    }
}
img, svg {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
p {
    margin: 2rem 0;
}
h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
}

h1 {
    color: #1F5C9D;
    font-size: 3rem;
    line-height: 1.5;
    text-transform: uppercase;
    margin-top: 0;
}

form {
    max-width: 40rem;
}
    form > div + div {
        margin-top: 1rem;
    }

label {
    display: block;
}

input[type=text],
textarea {
    width: 100%;
    padding: .25em .5em;
    border: 1px solid #1F5C9D;
    border-radius: .3rem;
    background: #e8eef6;
}

textarea {
    min-height: 6em;
}

input[type=submit] {
    margin-top: 2rem;
    padding: .25em 1em;
    border: 0;
    border-radius: .3rem;
    color: white;
    font-weight: bold;
    background: #1F5C9D;
    text-transform: uppercase;
}

:root {
    --o-container--x-padding: 3rem;
}

.o-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 140rem;
    padding-left: var(--o-container--x-padding);
    padding-right: var(--o-container--x-padding);
}

.c-header {
    position: fixed;
    width: 100%;
    top: 0;
    color: #1F5C9D;
    background: white;
    border-bottom: 1px solid #1F5C9D;
    z-index: 1000;
}
    .c-header .o-container {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    .c-header__logo {}
        .c-header__logo svg {
            width: 100%;
            height: auto;
        }
    .c-header__menu-toggle {
        appearance: none;
        border: 0;
        padding: 0;
        margin: 0;
        background: none;
    }
        .c-header__menu-toggle svg:first-child {

        }
        .c-header__menu-toggle svg:last-child {
            display: none;
        }
    .c-header__menu {
    }
        .c-header__menu__copy {
            margin: 0;
        }
        .c-header__menu a {
            color: inherit;
            text-decoration: none;
            text-transform: uppercase;
        }

    @media (max-width: 899px) {
        .c-header .o-container {
            display: flex;
            flex-direction: column;
        }
        .c-header__mobile-top {
            width: 100%;
            display: flex;
            justify-content: space-between;
            gap: 2rem;
        }
        .c-header__logo svg {
            max-width: 30rem;
        }
        .c-header__menu {
            display: none;
            flex-grow: 1;
            flex-direction: column;
            margin-top: 6rem;
            margin-left: calc(-1 * var(--o-container--x-padding));
            margin-right: calc(-1 * var(--o-container--x-padding));
        }
            .c-header__menu nav {
                flex-grow: 1;
                display: flex;
                flex-direction: column;
                text-align: left;
                gap: 3rem;
            }
            .c-header__menu a {
                padding: .5rem var(--o-container--x-padding);
                font-size: 3rem;
                line-height: 1;
                border-bottom: 1px solid white;
            }
            .c-header__menu__copy {
                background: white;
                color: #1F5C9D;
                margin-bottom: -1.5rem;
                padding: 1rem var(--o-container--x-padding);
            }
        .c-header.is-show-menu {
            background: #1F5C9D;
            color: white;
        }
        .c-header.is-show-menu .o-container {
            height: 100vh;
        }
        .c-header.is-show-menu .c-header__logo svg .name path {fill:white;}
        .c-header.is-show-menu .c-header__menu {
            display: flex;
        }
        .c-header.is-show-menu .c-header__menu-toggle svg:first-child {
            display: none;
        }
        .c-header.is-show-menu .c-header__menu-toggle svg:last-child {
            display: block;
        }
    }
    @media (min-width: 900px) {
        .c-header .o-container {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }
        .c-header__logo svg {
            width: 22.5vw;
            max-width: 40.8rem;
        }
        .c-header__menu-toggle {
            display: none;
        }
        .c-header__menu {
        }
            .c-header__menu nav {
                display: flex;
                gap: 3rem;
            }
            .c-header__menu__copy {
                display: none;
            }
    }

.c-footer {
    margin-top: auto;
    padding: 1rem 0;
    color: white;
    background: #1F5C9D;
}
    .c-footer .o-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .c-footer__social-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        text-align: center;
        border: 1px solid white;
    }

.c-heading-underlined {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #1F5C9D;
}
    .c-heading-underlined p:last-child {
        margin-bottom: 0;
    }
.c-secondary-text {
    font-size: 2rem;
    color: #666;
    font-weight: 600;
}

.c-mobile-section-heading {
    padding: 1rem var(--o-container--x-padding);
    margin-top: -2rem;
    margin-left: calc(-1 * var(--o-container--x-padding));
    margin-right: calc(-1 * var(--o-container--x-padding));
    color: white;
    text-transform: uppercase;
    background-color: #1F5C9D;
}
    @media (min-width: 900px) {
        .c-mobile-section-heading {
            display: none;
        }
    }

.c-project-back {
    display: block;
    margin-left: auto;
    margin-bottom: 3rem;
    width: 3rem;
    height: 3rem;
    line-height: 1;
    color: white;
    background: #1F5C9D;
}

@keyframes projects-grid-from-right {
    from {
        transform: translate(100vw, 0);
    }
    to {
        transform: translate(0, 0);
    }
}
@keyframes projects-grid-from-left {
    from {
        transform: translate(-100vw, 0);
    }
    to {
        transform: translate(0, 0);
    }
}
@keyframes projects-grid-to-right {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(100vw, 0);
    }
}
@keyframes projects-grid-to-left {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(-100vw, 0);
    }
}
.c-projects-grid {
    --per-page: 2;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 4rem;
    padding: 2rem 0;
    overflow: hidden;
}
    .c-projects-grid a {
        flex-grow: 1;
    }
    .c-projects-grid a:not(.is-active):not(.is-animating) {
        display: none;
    }
    .c-projects-grid a.is-animating {
        animation-duration: 1s;
        
    }
    .c-projects-grid a.is-from-right {
        animation-name: projects-grid-from-right;
    }
    .c-projects-grid a.is-from-left {
        animation-name: projects-grid-from-left;
    }
    .c-projects-grid a.is-to-right {
        animation-name: projects-grid-to-right;
    }
    .c-projects-grid a.is-to-left {
        animation-name: projects-grid-to-left;
    }
    .c-projects-grid img {
        width: 100%;
    }

    @media (hover: hover) {
        .c-projects-grid img {
            filter: grayscale();
            transition: filter .5s ease;
        }
        .c-projects-grid a:hover img {
            filter: none;
        }
    }

    @media (min-width: 600px) {
        .c-projects-grid {
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            --per-page: 4;
        }
    }

    @media (min-width: 1000px) {
        .c-projects-grid {
            grid-template-columns: 1fr 1fr 1fr;
            --per-page: 6;
        }
    }

.c-projects-grid-nav {
    margin: 2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
}
    .c-projects-grid-nav button {
        appearance: none;
        border: 0;
        background: none;
        padding: 0;
        margin: 0;
        color: black;
    }
    .c-projects-grid-nav button:disabled {
        color: grey;
    } 
    .c-projects-grid-nav button svg {
        width: 3.5rem;
    }
    .c-projects-grid-nav button:not(:disabled):hover {
        color: #1F5C9D;
    }

.c-text-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
}
.c-text-image__image {
    order: -1;
    width: 70%;
    text-align: center;
}
    @media (min-width: 900px) {
        .c-text-image {
            flex-direction: row;
            gap: 9rem;
        }
        .c-text-image__text {
            flex-basis: 60%;
        }
        .c-text-image__image {
            flex-basis: 40%;
            order: initial;
        }
    }
    @media (min-width: 1400px) {
        .c-text-image {
            gap: 13rem;
        }
		
		/*
 * === MOBILE-SPECIFIC OVERRIDES FOR UX CASE STUDIES SECTION ===
 * These styles disable the custom scroll behavior on smaller screens,
 * allowing the content to stack and scroll naturally with the page.
 */
@media (max-width: 768px) {
    /* Target the main 'cases' section that currently controls the 100vh height and overflow */
    section#cases {
        height: auto !important; /* Allow the section to expand naturally */
        overflow: visible !important; /* Allow content to flow outside, enabling natural page scroll */
        padding-top: 30px !important; /* Adjust padding for mobile aesthetics */
        padding-bottom: 30px !important; /* Adjust padding for mobile aesthetics */
        /* If you have 'position: relative;' on #cases and it's causing issues,
           you might need 'position: static !important;', but start without it. */
    }

    /* Target the container that holds all the case studies, which has a max-height and internal scroll */
    .case-studies-all {
        max-height: none !important; /* Remove the fixed max-height */
        overflow-y: visible !important; /* Allow case studies to flow naturally without an internal scrollbar */
        padding-right: 0 !important; /* Remove potential padding added for the scrollbar on desktop */
    }

    /* Important: This rule is crucial! Your 'body' has 'height: 100%; display: flex; flex-direction: column;'
       which, combined with 'section#cases' having 'height: 100vh; overflow: hidden;', locks the scroll.
       We need to revert the body to standard block behavior on mobile for natural scrolling. */
    html, body {
        height: auto !important; /* Allow html/body to expand naturally */
        display: block !important; /* Revert to default block display */
        flex-direction: initial !important; /* Remove flex direction */
    }

    /* Also, ensure main content doesn't fight with the footer or get weird flex behavior */
    body > main {
        flex-grow: initial !important; /* Remove flex-grow on main content */
        align-content: initial !important; /* Remove align-content */
    }
}
    }