/* Custom properties */

            :root {
                font-family: system-ui;
                color-scheme: light;
                scroll-behavior: smooth;
                
                /* E-TEAM brand colors */
                --E-TEAM-red: #841617;
                --E-TEAM-gray: #bfbfbf;
                --E-TEAM-black: #000000;
                --E-TEAM-blah: rgb(0,0,0);

                --color-bg: white;
                --color-text: #444444;
                --color-text-lighter: #666666;
                --color-text-darker: #111111;
                --color-text-alt: #fefefe;
                --color-accent: var(--E-TEAM-red, #841617);
                --color-link: var(--E-TEAM-red, #841617);
                --color-link-visited: #9c9c9c;
                --color-link-active: #b75556;
                --color-dark: #444444;
                --color-dark-highlight: #999999;
                --color-light: #fefefe;
                --color-light-highlight: #ffffff;

                --shadow-x: 1rem;
                --shadow-y: 1rem;
                --shadow-spread: .5rem;
                --shadow-color: rgba(0,0,0,.03);

                --gutter: var(--space-xs-s);
                --border-radius: 1rem;
                --inner-border-radius: calc(var(--border-radius) / 2);
                --transition-base: 25ms ease-out;
                --transition-movement: 20ms linear;
                --transition-bounce: 50ms cubic-bezier(0.5, 0.05, 0.2, 1.5);

                --box-border: 1px #ccc;

                --anim-default: ease-out;
                --anim-default-dur: 25ms;
                
                /* --measure: 75ch; */
                --measure: auto;

                --underline-weight: .0125em;

                /* Type Scale and Type Related Styles */

                /* @link https://utopia.fyi/type/calculator?c=320,16,1.25,1240,16,1.5,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

                --step--2: clamp(0.70rem, calc(1.08rem + -0.47vw), 0.99rem);
                --step--1: clamp(0.94rem, calc(1.09rem + -0.19vw), 1.05rem);
                --step-0: clamp(1.13rem, calc(1.08rem + 0.21vw), 1.25rem);
                --step-1: clamp(1.20rem, calc(1.05rem + 0.78vw), 1.67rem);
                --step-2: clamp(1.28rem, calc(0.97rem + 1.57vw), 2.22rem);
                --step-3: clamp(1.37rem, calc(0.84rem + 2.66vw), 2.96rem);
                --step-4: clamp(1.46rem, calc(0.63rem + 4.15vw), 3.95rem);
                --step-5: clamp(1.56rem, calc(0.32rem + 6.18vw), 5.26rem);
                --step-6: clamp(1.66rem, calc(-0.12rem + 8.92vw), 7.01rem);

                --tracking: -0.05ch;
                --tracking-s: -0.075ch;
                --font-base: system-ui, sans-serif;

                /* Space Scale */

                --space-3xs: clamp(0.25rem, calc(0.25rem + 0.00vw), 0.25rem);
                --space-2xs: clamp(0.50rem, calc(0.50rem + 0.00vw), 0.50rem);
                --space-xs: clamp(0.75rem, calc(0.75rem + 0.00vw), 0.75rem);
                --space-s: clamp(1.00rem, calc(1.00rem + 0.00vw), 1.00rem);
                --space-m: clamp(1.50rem, calc(1.50rem + 0.00vw), 1.50rem);
                --space-l: clamp(2.00rem, calc(2.00rem + 0.00vw), 2.00rem);
                --space-xl: clamp(3.00rem, calc(3.00rem + 0.00vw), 3.00rem);
                --space-2xl: clamp(4.00rem, calc(4.00rem + 0.00vw), 4.00rem);
                --space-3xl: clamp(6.00rem, calc(6.00rem + 0.00vw), 6.00rem);

                /* One-up pairs */
                --space-3xs-2xs: clamp(0.25rem, calc(0.16rem + 0.43vw), 0.50rem);
                --space-2xs-xs: clamp(0.50rem, calc(0.41rem + 0.43vw), 0.75rem);
                --space-xs-s: clamp(0.75rem, calc(0.66rem + 0.43vw), 1.00rem);
                --space-s-m: clamp(1.00rem, calc(0.83rem + 0.87vw), 1.50rem);
                --space-m-l: clamp(1.50rem, calc(1.33rem + 0.87vw), 2.00rem);
                --space-l-xl: clamp(2.00rem, calc(1.65rem + 1.74vw), 3.00rem);
                --space-xl-2xl: clamp(3.00rem, calc(2.65rem + 1.74vw), 4.00rem);
                --space-2xl-3xl: clamp(4.00rem, calc(3.30rem + 3.48vw), 6.00rem);

                /* Custom pairs */
                --space-s-l: clamp(1.00rem, calc(0.65rem + 1.74vw), 2.00rem);
                --space-m-xl: clamp(1.50rem, calc(0.98rem + 2.61vw), 3.00rem);
                --space-l-2xl: clamp(2.00rem, calc(1.30rem + 3.48vw), 4.00rem);

            }

            @media (prefers-color-scheme: dark) {
                body {
                    color: black;
                }
            }

            /* @media (prefers-color-scheme: dark) {
                :root {
                    --color-bg: white;
                    --color-text: #444444;
                    --color-text-lighter: #666666;
                    --color-text-darker: #111111;
                    --color-text-alt: #fefefe;
                    --color-accent: var(--E-TEAM-red, #841617);
                    --color-link: var(--E-TEAM-red, #841617);
                    --color-link-visited: #370404;
                    --color-link-active: #b75556;
                    --color-dark: #232323;
                    --color-dark-highlight: #999999;
                    --color-light: #fefefe;
                    --color-light-highlight: #ffffff;
                }
            } */

            body {
                background-color: #fff;;
            }

            /* Temp Placement */

            .sr-only, .visually-hidden, .vh {
                border: 0;
                clip: rect(0, 0, 0, 0);
                height: 0;
                padding: 0;
                margin: 0;
                overflow: hidden;
                position: absolute;
                width: 1px;
                white-space: nowrap;
                color:white;
                }

            /* Reset */
                
                    /* Box sizing rules */
                    *,
                    *::before,
                    *::after {
                    box-sizing: border-box;
                    }

                    /* Remove default margin */
                    body,
                    h1,
                    h2,
                    h3,
                    h4,
                    p,
                    figure,
                    blockquote,
                    dl,
                    dd {
                    margin: 0;
                    }

                    /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
                    [role='list'] {
                    list-style: none;
                    padding: 0;
                    }

                    [role="contentinfo"] {
                        margin-block-start: var(--space-l-xl);
                    }

                    /* Set core root defaults */
                    html:focus-within {
                    scroll-behavior: smooth;
                    }

                    /* Set core body defaults */
                    body {
                    min-height: 100vh;
                    text-rendering: optimizeLegibility;
                    line-height: 1.5;
                    }

                    /* A elements that don't have a class get default styles */
                    a:not([class]) {
                    text-decoration-skip-ink: auto;
                    text-decoration-thickness: 2px;
                    }

                    /* Make images easier to work with */
                    img,
                    picture {
                    max-width: 100%;
                    max-inline-size: 100%;
                    display: block;
                    }

                    /* Inherit fonts for inputs and buttons */
                    input,
                    button,
                    textarea,
                    select {
                    font: inherit;
                    }

                    /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
                    @media (prefers-reduced-motion: true) {
                    html:focus-within {
                    scroll-behavior: auto;
                    }
                    
                    *,
                    *::before,
                    *::after {
                        animation-duration: 0.01ms !important;
                        animation-iteration-count: 1 !important;
                        transition-duration: 0.01ms !important;
                        scroll-behavior: auto !important;
                    }

                    /* Animate focus state to increase visibility of currently selected item. */
                    @media
                    (prefers-reduced-motion: no-preference) {
                     :focus-visible {
                       transition: outline-offset .25s ease;
                       outline-offset: 5px;
                     }
                   }

              }      

              *[hidden] {
                display: none;
              }

            /* End of Reset */

            /* Global */


            *::selection {
                background-color: blue;
                color: var(--color-text-alt);
            }

            *:not(img)::selection {
                background-color: var(--color-accent);
                color: var(--color-text-alt);
            }

            img::selection {
                background-color: var(--E-TEAM-gray);
            }

            table {
                border: solid 1px var(--color-medium);
            }

            table th { 
                background-color: var(--color-medium);
                color: #454545;
                border: 0;
            }

            table th, table td {
                padding: var(--space-xs-s);
                border: none;
            }

            figcaption {
                padding-block-start: var(--space-xs, 5px);
            }

            figcaption > span {
                font-weight: 600;
                margin-inline-end: .5ch;
            }

            /* Load in fonts */

            @font-face {
                font-family:'Rowan';
                src:url(../fonts/Rowan-Variable.woff2) format("woff2");
                font-display:swap;
               }
            @font-face {
                font-family:'RowanItalic';
                src:url(../fonts/Rowan-VariableItalic.woff2) format("woff2");
                font-display:swap;
            }

            
             /* Temp for preview purposes only. */

            svg {max-height: 1rem; max-width: 1rem;}

            /* Layout Primitives */

            .box {
                padding: var(--space-s);
                border: var(--box-border) solid;
                color: var(--color-dark);
                background-color: var(--color-light);
                outline: 0.125rem solid transparent;
                outline-offset: -0.125rem;
            }

            .box * {
                color: inherit;
            }

            .box.invert {
                color: var(--color-light);
                background-color: var(--color-dark);
            }

            .center {
                box-sizing: content-box;
                margin-inline: auto;
                max-inline-size: var(--measure);
                display:flex;
                flex-direction: column;
                align-items: center;
              }

            .cluster {
            display: flex;
            flex-wrap: wrap;
            gap: var(--gutter, var(--space-s, 1rem));
            justify-content: var(--cluster-horizontal-alignment, flex-start);
            align-items: var(--cluster-vertical-alignment, center);
            }

            /* Reel */

            .reel {
                display: flex;
                block-size: auto;
                overflow-x: auto;
                overflow-y: hidden;
                scrollbar-color: #fff #000;
              }
              
              .reel::-webkit-scrollbar {
                block-size: 1rem;
              }
              
              .reel::-webkit-scrollbar-track {
                background-color: #000;
              }
              
              .reel::-webkit-scrollbar-thumb {
                background-color: #000;
                background-image: linear-gradient(#000 0, #000 0.25rem, #fff 0.25rem, #fff 0.75rem, #000 0.75rem);
              }
              
              .reel > * {
                flex: 0 0 auto;
              }
              
              
              .reel > img {
                block-size: 100%;
                flex-basis: auto;
                width: auto;
              }
              
              .reel > * + * {
                margin-inline-start: 1rem;
              }
              
              .reel.overflowing {
                padding-block-end: 1rem;
              }

            /* Sidebar */

            .with-sidebar {
                display: flex;
                flex-wrap: wrap;
                gap: var(--space-s-l);
            }

            .with-sidebar > :first-child {
                flex-grow: 1;
            }

            .with-sidebar > :last-child {
                flex-basis: 0;
                flex-grow: 999;
                min-inline-size: 50%;
            }

            .with-sidebar-right {
                display: flex;
                flex-wrap: wrap;
                gap: var(--space-s-l);
            }

            .with-sidebar-right > :last-child {
                flex-basis: 20%;
                flex-grow: 1;
                aspect-ratio: 16 / 9;
            }

            .with-sidebar-right > :first-child {
                flex-basis: 0;
                flex-grow: 999;
                min-inline-size: 50%;
            }


            /* Stack */

            .stack {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
            }

            .stack > * {
                margin-block: 0;
            } 

            .stack > * + * {
                --space: var(--space-l-2xl, 1.5rem);
                margin-block-start: var(--space);
            }

            .stack > p + p {
                margin-block-start: var(--space-s, 1rem);
            }

            /* Switcher */

            .switcher {
                display: flex;
                flex-wrap: wrap;
                gap: 1rem;
                }

            .switcher > * {
            flex-grow: 1;
            flex-basis: calc(( 30rem - 100%) * 999);
            }

            .switcher > :nth-last-child(n+ 5),
            .switcher > :nth-last-child(n+ 5) ~ * {
            flex-basis: 100%;
            }

            /* Cover */

            .cover {
            display: flex;
            flex-direction: column;
            min-block-size: 75vh;
            padding: 1rem;
            }

            .cover > * {
            margin-block: 1rem;
            }

            .cover > :first-child:not(h1) {
            margin-block-start: 0;
            }

            .cover > :last-child:not(h1) {
            margin-block-end: 0;
            }

            .cover > h1 {
            margin-block: auto;
            }

            /* Frame */

            .frame {
                --n: 16;
                --d: 9;
                aspect-ratio: var(--n) / var(--d);
                overflow: hidden;
                display: flex;
                justify-content: center;
                align-items: center;
              }
              
              .frame > img,
              .frame > video {
                inline-size: 100%;
                block-size: 100%;
                object-fit: cover;
              }

            /* Imposters - Absolute and Fixed */

              .imposter-abs {
                position: absolute;
                inset-block-start: 50%;
                inset-inline-start: 50%;
                transform: translate(-50%, -50%);
              }
              
              .imposter-abs.contain {
                --margin: 0px;
                overflow: auto;
                max-inline-size: calc(100% - (var(--margin) * 2));
                max-block-size: calc(100% - (var(--margin) * 2));
              }
                
              .imposter-fxd {
                position: fixed;
                inset-block-start: 50%;
                inset-inline-start: 50%;
                transform: translate(-50%, -50%);
              }
              
              .imposter-fxd.contain {
                --margin: 0px;
                overflow: auto;
                max-inline-size: calc(100% - (var(--margin) * 2));
                max-block-size: calc(100% - (var(--margin) * 2));
              }

            /* Icon */
            
            .icon {
                width: 0.75em;
                width: 1cap;
                height: 0.75em;
                height: 1cap;
              }
              
              .with-icon {
                display: inline-flex;
                align-items: baseline;
              }
              
              .with-icon .icon {
                margin-inline-end: 1rem;
              }

              /**********

              Example usage:
                <span class="with-icon">
                <svg class="icon">
                    <use href="/path/to/icons.svg#my-icon"></use>
                </svg>
                Close
                </span>

              **********/

            .center {
                box-sizing: content-box;
                margin-inline: auto;
                max-inline-size: var(--measure);
            }

            .card {
                display: flex;
                flex-direction: column;
                gap: 1rem 0;
                padding: var(--space-s-m);
                border: none;
                background-color: var(--color-light-highlight);
                border-radius: var(--border-radius);
                max-width: 30ch;
                background-color: var(--color-light);
                justify-items: center;
            }

            .grid {
                display: grid;
                grid-gap: 1rem;
              }
              
              @supports (width: min(250px, 100%)) {
                .grid {
                  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
                }
              }

            /* / END of Primitives */

            /* Global classes */

            /* Link classes */
            
            a {
                color: var(--color-link);
                text-decoration-color: var(--color-link);
                transition: all var(--transition-base) ease-in-out;
            }

            a:visited {color:var(--color-link-visited);}
            *:focus-visible {outline-offset: .25rem; outline: dotted 3px; -moz-outline-radius: .25rem;}

            a:not([class]):visited {
                color: var(--color-link-visited);
                text-decoration-color: var(--color-link-visited);
            }

            a:not([class]):active {
                color: var(--color-link-active);
                text-decoration-color: var(--color-link-active);
                
            }

            /* Only use on devices that can conveniently hover. */
            @media (hover) {

                        a:not([class]):hover, a:not([class]):focus-visible, a.no-skip-ink:hover {
                            color: var(--color-link-active); 
                            text-decoration-color: var(--color-link);               
                        }

            }

            a.dark-bg-link { text-decoration-color: var(--color-text-alt); color: var(--color-text-alt);}
            a.dark-bg-link:visited { color: var(--color-text-alt);}

            hr.divider {
                margin: var(--space-3xl) auto var(--space-2xl) auto;
                min-height: .125rem;
                border-radius: var(--border-radius);
                display: block;
                border: none;
                background-color: var(--E-TEAM-gray);
                width: 100%;
            }

            /* Start Typography */

            body { font-size: var(--step-0);} /* MARKER */
            p, blockquote, ul, ol, dl, figcaption { font-family: 'Rowan', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; }
            h1, h2, h3, h4, h5, h6 {font-family: "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif", system-ui, -apple-system; color: var(--color-accent, #841617); text-wrap: balance;}
            figure.blockquote-container {
                border-left: solid 1ch var(--color-accent);
                padding-inline-start: var(--space-m-l);
            }
            blockquote {
                position: relative;
                quotes: auto;
                text-align: center;
                max-width: fit-content;
                padding: var(--space-m-l);
                --measure: 100%;
                text-wrap: balance;
                /* background-color: #bfbfbf44; */
            }
            blockquote::before {
                content: open-quote;
                position: absolute;
                top: 0;
                left: 0;
                font-size: var(--step-2);
                opacity: .5;
            }

            blockquote::after {
                content: close-quote;
                position: absolute;
                font-size: var(--step-2);
                top: 0;
                right: 0;
                opacity: .5;
            }
            
            h1.superh1 { font-size: var(--step-6)}
            h1 {font-size: var(--step-6); }
            h2 {font-size: var(--step-4); }
            h3 {font-size: var(--step-2); font-weight: 500;}
            h4 {font-size: var(--step-1);}
            h5 {font-size: var(--step-0);}
            h6 {font-size: var(--step--0); text-transform: uppercase;}
            h1, h2, h3 {line-height: 1.1;}
            em {font-family: "RowanItalic"; padding-inline-end: 3px; padding-inline-end: .25ch;}
            p {max-width: var(--measure);}
            .ui, button, input[type="submit"] { font-family:"Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif", system-ui, -apple-system;}

            main {
                background-color: var(--color-light-highlight);
                min-height: 75vh;
                min-height: 75dvh;
                max-width: 95%;
                margin-inline: auto;
                margin-block: 0 !important;
                border-radius: var(--border-radius);
            }

            button, .link-button, input[type="submit"] {
                display: block;
                background-color: var(--color-accent);
                border: none;
                padding: var(--space-s);
                border-radius: var(--border-radius);
                color: var(--color-text-alt);
                font-weight: 600;
                text-transform: uppercase;
                cursor: pointer;
                transition: transform var(--transition-base);
            }

            button:active, .link-button:active, input[type="submit"]:active {
                transform: scale(.95);
            }

            .condensed-button {
                padding: var(--space-2xs) var(--space-xs);
            }

            #MainMenuButton {
                margin-inline-start: 1rem;
                display: flex;
                flex-flow: row;
                align-items: center;
                vertical-align: baseline;
            }

            #MainMenuButton svg {
                padding-top:2px;
                margin-inline-end: .5ch;
            }

            form {
                /* padding: var(--space-2xs) var(--space-m); */
                /* margin-block: var(--space-m); */
                max-width: max-content;
            }

            form li {
                margin-block-end: 1rem;
            }

            form li label {
                display: block;
                font-weight: 500;
            }

            form li label span {
                display: block;
                font-weight: 400;
                font-size: 16px;
                margin-block-end: 1rem;
                color: var(--color-text);
                max-width: var(--measure);
            }

            input, select, textarea {
                display: block;
                padding: .5rem;
                width: 100%;
                max-width: 35ch;
            }

            fieldset {
                padding-inline: 2rem;
            }

            input.accomodates-long-name {
                width: 45ch;
            }

            video, audio {
                border-radius: var(--border-radius);
            }

            /* Utility classes */

            .smaller-text { font-size: var(--step--1); margin-block-end: var(--space-s-l); }

            .no-margin {
                margin:0;
            }

            .remove-border {
                border: none;
            }

            .no-outline {
                outline-width: 0;
            }

            .normal-case {
                text-transform: unset;
            }

            .reel {
                scrollbar-color: var(--color-accent) var(--color-light);
                scrollbar-width: thin;
                scrollbar-gutter: stable both-edges;
            }

            /* .auto-grid {
                display: grid;
                grid-template-columns: repeat(
                    var(--grid-placement, auto-fill),
                    minmax(var(--grid-min-item-size, 16rem), 1fr)
                );
                gap: var(--gutter, var(--space-s, 1rem));
            } */

            .sr-only, .visually-hidden, .vh {
                border: 0;
                clip: rect(0, 0, 0, 0);
                height: 0;
                padding: 0;
                margin: 0;
                overflow: hidden;
                position: absolute;
                width: 1px;
                white-space: nowrap;
                color:white;
                }

            .wrapper {
                max-width: 80rem;
                margin-inline: auto;
                padding-inline: var(--space-m);
                padding-block: var(--space-s-l);
            }

            .full-bleed {
                width: 98dvw;
                padding-inline: 0;
                margin-left: calc(50% - 49vw);
            }  

            .skip-link {
                transition: transform var(--anim-default, "ease-out") var(--anim-default-dur, ".33s");
            }

            .skip-link:focus {
                overflow: auto;
                clip: unset;
                width: min-content;
                height: auto;
                padding: var(--space-m);
                display: block;
                position: absolute;
                top:0; 
                left: 1rem;
                background-color: #000000;
                color: white;
                z-index: 10;
            }

            .contain {
                max-width: fit-content;
                height: auto;
            }

            .rounded-corners {
                border-radius: var(--border-radius);
            }

            .inner-rounded-corners {
                border-radius: var(--inner-border-radius);
            }

            .clipped-circle {
                clip-path: circle(49%);
            }

            .sentence { max-width: auto;}

            .auto-size { object-fit:cover; }

            h3.header-emphasis-toggle {
                position: relative;
            }

            .base-text-bump {
                font-size: var(--step-1);
            }

            .disabled-text {
                color: gainsboro;
            }

            .staff-photos {
                grid-template-columns: repeat(auto-fit, minmax(min(25%, 100%), 1fr));
                gap: var(--space-2xl);
            }

            .staff-member {
                margin-block-end: 1rem;
            }

            .staff-member a {
                text-decoration: none;
            }

            .staff-member a img {
                text-align: center;
                vertical-align: middle;
            }

            .staff-photo-thumb {
                display: flex;
                flex-flow: column;
                align-items: center;
            }

            /* Only use on devices that can conveniently hover. */
            @media (hover) {

            .staff-member a:hover {
                /* outline: solid 5px var(--E-TEAM-red);
                border-radius: 1rem; */
            }

        }

            .staff-member a img, .eteam-client a img {
                transition: transform .25s cubic-bezier(0.075, 0.52, 0.165, 1);
            }

            .staff-member  p {text-align: center;}

            /* Only use on devices that can conveniently hover. */
            @media (hover) {

            .staff-member:hover {
                cursor: pointer;
            }

        }

            .staff-name {
                font-family: 'Rowan';
                color: var(--color-text-darker),#444;
                text-decoration:none; font-size: var(--step-2);
                font-weight: 400;
                line-height: 1.1;
                margin-block-end: .5rem;
                transition: all .25s cubic-bezier(0.075, 0.52, 0.165, 1);
                margin-block-start: var(--space-2xs-xs, 12px);
            }

            .staff-title {
                font-family: 'Rowan';
                font-weight: 600;
                line-height: 1.2; 
                transition: all .25s cubic-bezier(0.075, 0.52, 0.165, 1);
                margin-block: 0;
            }
            .staff-photo {display: block; border-radius: 49%; clip-path: circle(49%); }
            .staff-photo {transition: all .25s cubic-bezier(0.075, 0.52, 0.165, 1);}

            /* Only use on devices that can conveniently hover. */
            @media (hover) {

            .staff-member:hover a img, .eteam-client:hover a img {
                transform: scale(1.15) translateY(-.05rem);
            }
            .staff-member:hover > a > .staff-name {
                color: #841617;
                font-weight: 600;
            }
            .staff-member:hover > a > p + p, .staff-name:hover + p {
                font-weight: 600;
                /* letter-spacing: .125ch; */
            }

        }
            .staff-name {
                color: var(--E-TEAM-red, #841617);
                transition: all .25s cubic-bezier(0.075, 0.52, 0.165, 1);
            }
            .project-addl-info-list li strong {
                display: inline-block;
                min-width: 20ch;
            }

            .dot-wrapper {
                background-color: var(--E-TEAM-red);
                color:white;
                aspect-ratio: 1 / 1;
                clip-path: circle(49%);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-content: center;
                padding: .5rem;
                min-width: 9ch;
                text-align: center;
                font-weight: 600;
                font-size: var(--step--1);
            }


            .no-skip-ink{
                text-decoration-skip-ink: none;
                /* text-decoration-thickness: 2px; */
            }

            /* Animations */

            .cta-link::after {
                content:'\2192';
                display: inline-block;
                text-decoration: none;
                transition: margin-inline-start var(--transition-base);
                margin-inline-start: 0;
            }

            .cta-link::after {
                margin-inline-start: 0.66ch;
            }

            /* Only use on devices that can conveniently hover. */
            @media (hover) {

            li:hover .cta-link::after {
                margin-inline-start: 1ch;  
            }

        }

            .simple-accordion {
                border: solid 1px var(--color-dark-highlight);
                padding-inline: 1rem;
                border-radius: var(--border-radius);
            }

            .simple-accordion svg {
                transition: transform var(--transition-base);
                min-width: 16px;
                min-height: 16px;
            }

            @media (prefers-reduced-animation = "false") {

            }

            .simple-accordion > dt > a {
                display: block;
                position: relative;
            }

            .simple-accordion > dd {
                /* height: 0;
                visibility: collapse; */
                transition: all var(--transition-bounce);
            }

            [aria-expanded="true"] .vert {
                display: none;
            }

            .simple-accordion > dt {
                font-size: var(--step-1);
                font-weight: 600;
                transition: all var(--transition-base);
                padding-block: var(--space-s);
                border-top: solid 1px var(--color-dark-highlight);
            }

            .simple-accordion > dt:first-of-type {
                border:none;
            }

            .simple-accordion dt > button {
                all: inherit;
                display: flex;
                width: 100%;
                cursor: pointer;
                border: none;
                padding-block: 0;
            }

            .simple-accordion dt > button:active svg, .simple-accordion button:focus-visible {
                outline-offset: .25rem;
                outline: dotted 3px var(--color-accent);
                transform: none;
            }

            .simple-accordion dt  > button > svg {
                align-self: center;
                margin-inline-start: auto;
            }

            /* Only use on devices that can conveniently hover. */
            @media (hover) {
            .simple-accordion > dt > button:hover > svg, .simple-accordion button:focus-visible svg {
                fill: var(--color-accent);
                transform: scale(1.0675);
            }
        }

            .simple-accordion dd {
                padding-block-end: var(--space-s-m);
            }

                        /* Only use on devices that can conveniently hover. */
            @media (hover) {
            .simple-accordion dt:hover, .simple-accordion dt:focus-within {
                color: var(--color-accent);
            }
        }

            /* Block styles */


            .footnotes {
                font-size: var(--step--1);
            }

            .inline-footnote {
                text-decoration: none;
            }

            .back-to-top-link {
                display: flex;
                text-align: center;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                min-height: 1.5rem;
                aspect-ratio: 1/1; 
                position: fixed; 
                right: 1rem; 
                bottom: 1rem;
                background-color: #841617cc;
                /* outline: solid 2px #cdcdcd99; */
                text-decoration: none;
                padding: .125ch 1ch;
                font-size: var(--step-2);
                font-weight: 700;
                border-radius: 50%;
                transition: all 200ms;
                color: white;
                outline: solid 0 transparent;
                visibility: hidden;
                opacity: 0;
            }

            .back-to-top-link:visited { color: white; }
   

            .back-to-top-link[data-visible = true] {
                opacity: 1;
                visibility: visible;
            }


            /* Only use on devices that can conveniently hover. */
            @media (hover) {

         .back-to-top:hover { color: #841617; }

            .back-to-top-link:hover {
                background-color: #ffffffcc;
                color: #841617;
                background-blend-mode: screen;
                /* outline: solid 2px var(--color-accent); */
            }

            .back-to-top-link:hover i {
                display: inline-block;
                transform: translateY(-3px);
            }

        }

            .page-wrapper {
                position:relative;
            }

            .page-wrapper::before {
                position: fixed;
                bottom: 0;
                height:auto;
                width: 100%;
                content: '';
            }

            /* .header-emphasis {
                display: block;
                position: relative;
            }

            .header-emphasis::before {
                content:"";
                display: inline-block;
                position: absolute;
                bottom:0;
                left: -.125em;
                height: 1em;
                width: 100%;
                margin-left: -100%;
                background-image: linear-gradient(90deg, var(--color-light) 50%, transparent), url('../img/vtr/ui/eteam_dots_bg_mask.svg');
                background-position: center right;
                background-size: contain;
                background-repeat: no-repeat;
            }

            .header-emphasis::after {
                content:"";
                display: inline-block;
                position: relative;
                top:.125em;
                right: -.125em;
                height: 1em;
                width: 100%;
                margin-right: -100%;
                background-image: linear-gradient(90deg, var(--color-light) 50%, transparent), url('../img/vtr/ui/eteam_dots_bg_mask.svg');
                background-position: center right;
                background-size: contain;
                background-repeat: no-repeat;
                transform: rotate(180deg);
            } */

            .page-header {
                padding-block: var(--space-s-l);
                /* border-bottom: dotted 6px var(--E-TEAM-gray); */
                position: sticky;
            }

            .site-footer {
                background-color: var(--color-dark-highlight);
                margin-block-start: var(--space-2xl);
                padding-block-start: var(--space-s);
                padding-block-end: var(--space-s);
            }

            .site-footer section {
                gap: var(--space-2xl);
            }

            .site-footer h4 {
                margin-block: 0 1rem;
                color: var(--color-accent)
            }

            .site-footer h5 {
                color: var(--color-accent);
                margin-block: var(--space-s-l); 
                text-transform: none;
            }

            .site-footer a {
                font-weight: 600;
            }

            .social-nav ul {
                --cluster-horizontal-alignment: space-between; 
            }

            .elim-margin-block {
                margin-block: 0;
            }

            .footer-stack label {
                margin-block-end: 0;
            }

            .footer-stack > * + * {
                margin-block-start: var(--space-m);
            }

            .primary-nav-wrapper {
                display: flex;
                flex-direction: row-reverse;
                margin-inline-start: auto;
                align-items: space-between;
            }

            .primary-nav {
                margin-block: var(--space-2xs);
                margin-inline-start: auto;
                gap: .5rem 0;
            }

            .primary-nav a {
                text-decoration: none;
                padding: var(--space-2xs) var(--space-2xs);
                transition: background-color var(--transition-base);
                border-radius: var(--border-radius);
            }

            /* Only use on devices that can conveniently hover. */
            @media (hover) {

            .primary-nav a:hover, .primary-nav a:focus-visible {
                background-color: var(--color-accent);
                color: white;
            }

        }

            .primary-nav a:active {
                background-color: var(--color-accent);
                color: white;
                box-shadow: inset 2px 2px rgba(0,0,0,.14);
            }

            .primary-nav a.current-page {
                background-color: var(--color-accent);
                color: white;
            }

            /* @media (prefers-color-scheme: dark) {
                .primary-nav a, .primary-nav a:visited {color: #dedede;}
            } */

            *[hidden],#MainMenuButton[hidden] {
                display: none;
            }

            .breadcrumb { 
                padding-block: var(--space-s);
                padding-inline: var(--space-m);
                border: solid 1px #dedede;
                border-radius: var(--border-radius); 
            }

            .breadcrumb li {
                position: relative;
            }

            .breadcrumb li::before {
                display: inline;
                content: "|";
                color: var(--color-dark-highlight)
            }

            .breadcrumb li:first-of-type::before {
                margin-right: 0;
                content: '';
                display: none;
            }

            .breadcrumb ul, .breadcrumb li {
                margin-block: 0;
                display: flex;
                flex-direction: row;
                gap: 0 1rem;
            }

            .page-actions-container {
                background-image: linear-gradient(var(--color-light-highlight) 50%, var(--color-dark-highlight) 50%);
                margin-block-start: var(--space-l-2xl);
            }

            .page-actions {
                position: relative;
                max-width: fit-content;
            }

            .page-actions a {
                min-width: 9.5rem;
                max-width: 12rem;
                text-align: center;
                color: var(--color-link);
                text-decoration: none;
            }

            .article-list li{
                margin-block-end: var(--space-l);
            }

            .article-list li picture{
                color: black;
            }

            .article-list li h2 {
                font-size: var(--step-3)
            }

            .pagination {
                margin-block: var(--space-m-xl);
            }

            .pagination ol {
                gap: var(--space-xl) var(--space-m);
            }

            .pagination li a{
                padding: var(--space-xs) var(--space-s) ;
                outline: solid 1px var(--E-TEAM-gray);
                border-radius: var(--inner-border-radius);
                text-decoration: none;
                margin-bottom: 1rem;
            }

            .pagination li a.current-page{
                color: var(--color-light);
                font-weight: 600;
                background-color: var(--E-TEAM-gray);
            }

            /* Only use on devices that can conveniently hover. */
            @media (hover) {

            .pagination li a:not([class="current-page"]):hover, .pagination li a:not([class="current-page"]):focus-visible {
                color: black;
            }

        }

            .eteam-logo img {
                color: white;
            }

            .eteam-logo img:last-of-type {
                display: none;
            }

            .project-list h3 {
                font-size: var(--step-1)
            }

            .project-list img {
                box-shadow: .125rem .125rem 3px #00000044;
            }

            /* @media (prefers-color-scheme: dark) {
                .eteam-logo img:first-of-type {
                    display:none;
                }

                .eteam-logo img:last-of-type {
                    display:block;
                }
            } */

             /* OU Domain Header and Footer */
             /* OU Website styles for global header and footer */
             .domain-header { background-color: #212121 !important; /*box-shadow: 0 4px 20px 0 rgba(0,0,0,.14),0 7px 12px -5px rgba(33,33,33,.46);*/ color: #fff; position: relative; z-index: 3;            }
             .domain-header nav { display: flex; flex-direction: row-reverse; } /* This could be moved to a domain style. */
             .domain-header nav ul { list-style: none; white-space: nowrap; display: flex; margin: 0 auto; padding-inline-start: 0;}
             @media screen and (min-width: 768px) {
             .domain-header nav ul { list-style: none; white-space: nowrap; display: flex; margin: unset; padding-inline-start: 0;}
             }
             .domain-header nav ul li { margin-bottom: 0; }
                         /* Only use on devices that can conveniently hover. */
            @media (hover) {
             .domain-header nav ul li:hover:not(.wordmark) { background-color: white;}
             .domain-header nav ul li:hover svg {fill:black;}
            }
             .domain-header nav ul li i {padding-top: .25rem;}
             .domain-header nav ul li i svg {max-height: 12px; min-width: 13.5px; width: auto; fill: white;}
             .domain-header nav ul li a { padding: .5rem; color: white; text-decoration: none;}
                         /* Only use on devices that can conveniently hover. */
            @media (hover) {
             .domain-header nav ul li a:hover { text-decoration: underline;}
            }
             .wordmark {
             background-image: url('../img/rst/ui/ou-wordmark.png');
             background-position: 50%;
             background-repeat: no-repeat;
             background-size: contain;
             height: auto;
             margin-top: 2px;
             text-indent: -99999px;
             width: 16rem;
             }

             .domain-footer, .domain-footer ul {
                font-family: Arial, Helvetica, sans-serif;
                letter-spacing: 0;
            }

            .domain-footer ul.link-list {
                line-height: 2.25;
            }

            .domain-header nav, .domain-footer nav {
                max-width: 1270px;
                margin-inline: auto;
            }

            .domain-footer, .domain-footer a {
                color: rgba(255,255,255, .8);
                min-height: 10rem;
                text-decoration: none;
                font-size: .875rem;
            }

            .domain-footer {
                padding-bottom: 0;
                background-color: #444444;
            }

                        /* Only use on devices that can conveniently hover. */
            @media (hover) {
            .domain-footer a:hover, .domain-footer a:focus-visible {
                color: white;
            }
        }

            .domain-footer ul {
                list-style: none;
                padding-left: 0;
            }

            .domain-footer h6 {
                font-size: .75rem;
                font-weight: normal;
                padding-bottom: .25rem;
                margin-bottom: 1rem;
                text-decoration: underline;
                text-underline-offset: .5rem;
            }

            .social-icon-list {
                justify-content: center;
            }

            .social-icon {
                display: block;
                width: 60px;
                height: 60px;
                margin: 6px;
            }

            .copyright-footer {
                background-color: var(--color-dark);
                color: var(--color-light);
                text-align: center;
                margin-block-start: var(--space-s);
                margin-inline: -1rem;
            }

            .project-list article p:first-of-type, .project-list article h3 {
                margin-block-start: var(--space-s-l);
            }

            .circular-button {
                clip-path: circle(49%); 
                line-height: .9; 
                aspect-ratio: 1/1;
                line-height: 1.125;
            }

            .circular-button span {
                font-size: .875rem;
            }

            .circular-button strong {
                text-transform: uppercase;
            }

            .big-number-display {
                
            }

            .big-data-number {
                font-size: var(--step-6);
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                font-weight: 900;
                color: var(--E-TEAM-gray)
            }

            .staff-list {
                grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr))
            }

            .staff-list h3 {
                color: var(--E-TEAM-black);
                font-weight: 300;
                text-transform: uppercase;
            }

            .staff-title { 
                color: var(--E-TEAM-black);
            } 

            .staff-list li {
                text-align: center;
            }

            #js-dialog-content {
                overflow-y: auto;
                padding-inline-end: 10px;
                scrollbar-color: var(--E-TEAM-red, #841617);
            }

            #js-dialog-content p {
                max-width: 85ch;
            }

            #js-dialog-content p:last-of-type {
                margin-block-end: 0;
            }

            dialog {
                height: fit-content;
                width: fit-content;
                min-width: 350px;
                font-size: 16px;
                padding: 2rem;
                border: 0;
                border-radius: 1rem;
                /* transition-behavior: allow-discrete; */
                transition: all .33s ease-in-out;
            }

            .dialog-grid {
                display: grid;
                grid-template-rows: auto clamp(5rem, 50vh, 520px);
            }

            /* Open state of the dialog  */
            dialog:open {
            opacity: 1;
            transform: scaleY(1);
            padding-block-start: 2rem;
            }

            /* Closed state of the dialog   */
            /* dialog {
            opacity: 0;
            transform: scaleY(0);
            transition:
                opacity 0.33s ease-out,
                transform 0.33s ease-out,
                overlay 0.33s ease-out allow-discrete,
                display 0.33s ease-out allow-discrete;
            /* Equivalent to
            transition: all 0.33s allow-discrete; */
    

            /* Before open state  */
            /* Needs to be after the previous dialog:open rule to take effect,
                as the specificity is the same */
            /* @starting-style {
            dialog:open {
                opacity: 0;
                transform: scaleX(0);
            }
            } */

            /* Transition the :backdrop when the dialog modal is promoted to the top layer */
            /* dialog::backdrop {
            background-color: rgb(0 0 0 / 0%);
            transition:
                /* display 0.33s allow-discrete,
                overlay 0.33s allow-discrete, 
                background-color 0.33s;
            /* Equivalent to
            transition: all 0.33s allow-discrete; */

            dialog:open::backdrop {
            background-color: rgb(0 0 0 / 80%);
            }

            /* This starting-style rule cannot be nested inside the above selector
            because the nesting selector cannot represent pseudo-elements. */
/* 
            @starting-style {
            dialog:open::backdrop {
                background-color: rgb(0 0 0 / 0%);
            }
            } */

/* 
            ::backdrop {
                background-color: var(--E-TEAM-red, #841617);
            } */

            .dialog-header {
                line-height: 1.1;
                margin-block-end: 1rem;
            }

            dialog button {
                margin-block-start: var(--space-m-l) !important;
                margin-inline: auto;
                font-size: 1.25em;
            }

            .construction-message {
                display: flex;
                flex-direction: row;
            }

            .construction-message p {
                padding: 1rem;
                border: solid 2px var(--E-TEAM-red, #841617);
                background-color: #ffffffbb;
                border-radius: 8px;
                font-size: .8rem;
                width: fit-content;
                margin-inline: auto;
                letter-spacing: .25px;
                box-shadow: 0 .25rem .25rem 0 #00000033;
            }

            #shareButton {
                text-align: center;
                vertical-align: middle;
            }

            .intro-bg {
                background-color: #841617;
                margin-inline: -2.5%;
                position: relative;
                overflow: hidden;
                margin-block-end: 3rem;
            }

            .intro-bg h1, .intro-bg p {
                color: white;
            }

            .intro-bg section div.construction-message p {
                color: #000000;
                text-align: center;
            }

            .contact-type {
                font-weight: 500;
            }

            .eteam-client {
                cursor: pointer;
            }

            .js-vis-only {
                display: none;
            }

            @media screen and (max-width: 414px) {
                dialog {max-width: 90%;}
                .logo-link {width: 100%;}
                .eteam-logo {display: inline-block; width: 100%;}
                .eteam-logo img {width: 100%;}
            }

            .mission-statement {
                font-weight: 600;
            }

            a[href^="tel"] {
                color: inherit; 
                text-decoration: none;
            }