/* ========================================================================== */
/* 400px and above */

@media only screen
and (min-width: 400px) {

    /* GRIDS ================================================================ */
    .span-2-400		{ grid-column: span 2; }
    .span-3-400		{ grid-column: span 3; }
    .span-4-400		{ grid-column: span 4; }
    .span-6-400		{ grid-column: span 6; }
    .span-8-400		{ grid-column: span 8; }
    .span-9-400		{ grid-column: span 9; }
    .span-10-400	{ grid-column: span 10; }
    .span-12-400	{ grid-column: span 12; }

    .site-nav__ul   {
        gap: var(--space-400-500);
    }

    .hero__img {
        aspect-ratio: 3/2;
    }

}

/* ========================================================================== */
/* 600px and above */

@media only screen
and (min-width: 600px) {

    /* GRIDS ================================================================ */
    .span-1-600		{ grid-column: span 1; }
    .span-2-600		{ grid-column: span 2; }
    .span-3-600		{ grid-column: span 3; }
    .span-4-600		{ grid-column: span 4; }
    .span-5-600		{ grid-column: span 5; }
    .span-6-600		{ grid-column: span 6; }
    .span-7-600		{ grid-column: span 7; }
    .span-8-600		{ grid-column: span 8; }
    .span-9-600		{ grid-column: span 9; }
    .span-10-600	{ grid-column: span 10; }
    .span-12-600	{ grid-column: span 12; }

    .grid-5-600	{ display: grid; grid-template-columns: repeat(5, 1fr); }

    .filmstrip[data-filmstrip-count="5"] .filmstrip__img {
        aspect-ratio: 1;
    }
    .hero__img {
        aspect-ratio: 2/1;
    }
    .hex-feature__col,
    .feature__col   {
        max-width: none;
    }
    .feature__img   {
        aspect-ratio: auto;
    }


}

/* ========================================================================== */
/* 800px and above */

@media only screen
and (min-width: 800px) {

    /* GRIDS ================================================================ */
    .span-1-800 	{ grid-column: span 1; }
    .span-2-800		{ grid-column: span 2; }
    .span-3-800		{ grid-column: span 3; }
    .span-4-800		{ grid-column: span 4; }
    .span-5-800		{ grid-column: span 5; }
    .span-6-800		{ grid-column: span 6; }
    .span-7-800		{ grid-column: span 7; }
    .span-8-800		{ grid-column: span 8; }
    .span-9-800		{ grid-column: span 9; }
    .span-10-800	{ grid-column: span 10; }
    .span-12-800	{ grid-column: span 12; }

    .start-3-span-8-800   { grid-column: 3 / span 8; }


    .site-header__container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .site-logo {
        margin: 0;
    }

    .hero {
        padding: var(--space-600-700) var(--gutter);
    }
    .hero__inner {
        gap: var(--space-400-500);
    }
    .hero__col.alpha {
        text-align: left;
        padding: 0;
        grid-column: 1 / span 6;
        grid-row: 1;
    }
    .hero__col.omega {
        grid-column: 7 / span 6;
        clip-path: polygon( 70.068% 0.007%,29.928% 0.007%,29.928% 0.007%,28.945% 0.079%,27.944% 0.287%,26.942% 0.621%,25.955% 1.07%,24.999% 1.624%,24.093% 2.272%,23.251% 3.002%,22.49% 3.805%,21.828% 4.67%,21.281% 5.586%,1.211% 44.424%,1.211% 44.424%,0.775% 45.411%,0.435% 46.484%,0.193% 47.622%,0.048% 48.801%,-0.001% 50.002%,0.048% 51.203%,0.193% 52.383%,0.435% 53.52%,0.775% 54.593%,1.211% 55.581%,21.281% 94.421%,21.281% 94.421%,21.828% 95.337%,22.49% 96.202%,23.249% 97.005%,24.091% 97.736%,24.997% 98.383%,25.952% 98.937%,26.939% 99.386%,27.942% 99.72%,28.943% 99.928%,29.928% 100%,70.068% 100%,70.068% 100%,71.051% 99.928%,72.052% 99.72%,73.055% 99.386%,74.043% 98.937%,74.999% 98.383%,75.907% 97.736%,76.75% 97.005%,77.511% 96.202%,78.174% 95.337%,78.721% 94.421%,98.791% 55.581%,98.791% 55.581%,99.228% 54.593%,99.567% 53.52%,99.809% 52.383%,99.954% 51.203%,100.003% 50.002%,99.954% 48.801%,99.809% 47.622%,99.567% 46.484%,99.228% 45.411%,98.791% 44.424%,78.719% 5.579%,78.719% 5.579%,78.172% 4.663%,77.51% 3.798%,76.749% 2.995%,75.907% 2.264%,75% 1.617%,74.044% 1.063%,73.056% 0.614%,72.053% 0.28%,71.051% 0.072%,70.066% 0%,70.066% 0.007% );        
    }
    .hero__img {
        aspect-ratio: auto;
    }

    .footer-cta__btn-col {
        padding-bottom: 0;
        padding-right: var(--space-500-600);
        text-align: right;
    }

    .footer-nav__li {
        width: auto
    }

    .p6v-r-800  { padding-right: var(--space-600-700); }
    .p5v-800    { padding: var(--space-500-600) }
    .p4v-800    { padding: var(--space-400-500) }
    .p2v-800    { padding: var(--space-200-300) }
    .m0-800     { margin: 0; }
    .m2v-t-800  { margin-top: var(--space-200-300); }
    .m4v-l-800  { margin-left: var(--space-400-500); }

}

/* ========================================================================== */
/* 1000px and above */

@media only screen
and (min-width: 1000px) {

    /* GRIDS ================================================================ */
    .span-1-1000	{ grid-column: span 1; }
    .span-2-1000	{ grid-column: span 2; }
    .span-3-1000	{ grid-column: span 3; }
    .span-4-1000	{ grid-column: span 4; }
    .span-5-1000	{ grid-column: span 5; }
    .span-6-1000	{ grid-column: span 6; }
    .span-7-1000	{ grid-column: span 7; }
    .span-8-1000	{ grid-column: span 8; }
    .span-9-1000	{ grid-column: span 9; }
    .span-10-1000	{ grid-column: span 10; }
    .span-12-1000	{ grid-column: span 12; }
    
    .grid-7-1000	{ display: grid; grid-template-columns: repeat(7, 1fr); }

    .start-3-span-3-1000   { grid-column: 3 / span 3; }
    .start-3-span-4-1000   { grid-column: 3 / span 4; }
    .start-2-span-5-1000    { grid-column: 2 / span 5; }
    .start-2-span-10-1000   { grid-column: 2 / span 10; }
    .start-4-span-6-1000   { grid-column: 4 / span 6; }

    .filmstrip[data-filmstrip-count="6"] .filmstrip__img,
    .filmstrip[data-filmstrip-count="7"] .filmstrip__img {
        aspect-ratio: 2/3;
    }



}

/* ========================================================================== */
/* 1200px and above */

@media only screen
and (min-width: 1200px) {

    /* GRIDS ================================================================ */
    .span-2-1200	{ grid-column: span 2; }
    .span-3-1200	{ grid-column: span 3; }
    .span-4-1200	{ grid-column: span 4; }
    .span-5-1200	{ grid-column: span 5; }
    .span-6-1200	{ grid-column: span 6; }
    .span-7-1200	{ grid-column: span 7; }
    .span-8-1200	{ grid-column: span 8; }
    .span-9-1200	{ grid-column: span 9; }
    .span-10-1200	{ grid-column: span 10; }
    .span-12-1200	{ grid-column: span 12; }

    .start-3-span-8-1200   { grid-column: 3 / span 8; }


    /* HEADER NAV =========================================================== */
    .page--home .site-header   {
        background-color: transparent;
    }
    .site-logo,
    .thanks-logo {
        height: 84px;
        width: 306px;
    }
    .thanks-logo {
        margin: 0;
    }

    .page--home .site-nav__link { color: #fff; }
    .page--home .site-nav__link:hover { color: var(--tertiary-400); }

    /* PAGE TITLE =========================================================== */
    /* nudge the page title hex up so it's behind the header nav */
    .hero             { margin-top: -116px; padding-top: 0; padding-bottom: 0; }
    .hero__col.alpha  { margin-top: 10rem; padding-top: var(--space-600-700); padding-bottom: var(--space-600-700); }
    .hero__col.omega  {
        grid-column: 7 / span 6; margin-top: -10rem; width: 150%;
        height: calc(100% + 10rem);
        clip-path: polygon( 100% 0%,29.928% 0.007%,29.928% 0.007%,28.945% 0.079%,27.944% 0.287%,26.942% 0.621%,25.955% 1.07%,24.999% 1.624%,24.093% 2.272%,23.251% 3.002%,22.49% 3.805%,21.828% 4.67%,21.281% 5.586%,1.211% 44.424%,1.211% 44.424%,0.775% 45.411%,0.435% 46.484%,0.193% 47.622%,0.048% 48.801%,-0.001% 50.002%,0.048% 51.203%,0.193% 52.383%,0.435% 53.52%,0.775% 54.593%,1.211% 55.581%,21.281% 94.421%,21.281% 94.421%,21.828% 95.337%,22.49% 96.202%,23.249% 97.005%,24.091% 97.736%,24.997% 98.383%,25.952% 98.937%,26.939% 99.386%,27.942% 99.72%,28.943% 99.928%,29.928% 100%,100% 100%,100% 0% ); 
    }
    .hero__col.omega::after {
        background: linear-gradient(180deg, var(--primary-500) 0%, rgba(0,0,0,0) 90%); 
        display: block;
        content: '';
        left: 0; right: 0; top: 0;
        height: 20rem;
        position: absolute;
        z-index: 2;
    }    

    .hero__img    {
        height: 100%;
    }

    .feat-cards__img    {
        height: 100%;
        position: absolute;
    }
    
    .service-group-anchor {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .service-group-anchor__title {
        font-size: var(--text-500);
    }

    .service-group__header-copy {
        border-top-right-radius: var(--rad-m);
    }
 
}

/* ========================================================================== */
/* 1400px and above */

@media only screen
and (min-width: 1400px) {

    /* GRIDS ================================================================ */
    .span-1-1400	{ grid-column: span 1; }
    .span-2-1400	{ grid-column: span 2; }
    .span-3-1400	{ grid-column: span 3; }
    .span-4-1400	{ grid-column: span 4; }
    .span-5-1400	{ grid-column: span 5; }
    .span-6-1400	{ grid-column: span 6; }
    .span-7-1400	{ grid-column: span 7; }
    .span-8-1400	{ grid-column: span 8; }
    .span-9-1400	{ grid-column: span 9; }
    .span-10-1400	{ grid-column: span 10; }
    .span-12-1400	{ grid-column: span 12; }


    .filmstrip[data-filmstrip-count="4"] .filmstrip__img {
        aspect-ratio: 3/2;
    }

    .filmstrip[data-filmstrip-count="8"] .filmstrip__img {
        aspect-ratio: 2/3;
    }



}