/* Design tokens (Phase 1). Values are unchanged; only how they're
   referenced changes - zero visual diff is the goal. */
:root {
  --color-brand-rgb: 255, 1, 108; /* brand pink/magenta, formerly hard-coded 59x */
}

/* Phase 1 raw tokens: one custom property per distinct existing
   value, no merging. Generated for review - see docs/css-audit.md
   and testing/token-specimen.html for proposed consolidation. */
:root {
  /* grays (hex + rgba/rgb, R=G=B) */
  --gray-0-a0: rgba(0, 0, 0, 0);
  --gray-0-a0p01: rgba(0, 0, 0, 0.01);
  --gray-0-a0p2: rgba(0, 0, 0, 0.2);
  --gray-0-a0p3: rgba(0, 0, 0, 0.3);
  --gray-0-a0p4: rgba(0, 0, 0, 0.4);
  --gray-0-ap04: rgba(0, 0, 0, .04);
  --gray-0-ap07: rgba(0, 0, 0, .07);
  --gray-0-ap1: rgba(0, 0, 0, .1);
  --gray-0-ap17: rgba(0, 0, 0, .17);
  --gray-0-ap5: rgba(0, 0, 0, .5);
  --gray-0-ap7: rgba(0, 0, 0, .7);
  --gray-000: #000;
  --gray-10-ap5: rgba(20, 20, 20, .5);
  --gray-10-ap9: rgba(20, 20, 20, .9);
  --gray-100-a0: rgba(100, 100, 100, 0);
  --gray-100-a0p1: rgba(100, 100, 100, 0.1);
  --gray-100-a0p4: rgba(100, 100, 100, 0.4);
  --gray-100-a0p7: rgba(100, 100, 100, 0.7);
  --gray-100-a1: rgba(100, 100, 100, 1);
  --gray-100-ap8: rgba(100, 100, 100, .8);
  --gray-120-a1: rgba(140, 140, 140, 1);
  --gray-120-ap2: rgba(140, 140, 140, .2);
  --gray-120-ap3: rgba(140, 140, 140, .3);
  --gray-120-ap4: rgba(140, 140, 140, .4);
  --gray-120-ap5: rgba(140, 140, 140, .5);
  --gray-140-a1: rgba(140, 140, 140, 1);
  --gray-140-ap4: rgba(140, 140, 140, .4);
  --gray-150-a1: rgba(140, 140, 140, 1);
  --gray-160-a1: rgba(180, 180, 180, 1);
  --gray-160-ap7: rgba(180, 180, 180, .7);
  --gray-160-ap8: rgba(180, 180, 180, .8);
  --gray-180-a0: rgba(180, 180, 180, 0);
  --gray-180-a1: rgba(180, 180, 180, 1);
  --gray-180-ap4: rgba(180, 180, 180, .4);
  --gray-190-a1: rgba(180, 180, 180, 1);
  --gray-20-a1: rgba(20, 20, 20, 1);
  --gray-20-ap1: rgba(20, 20, 20, .1);
  --gray-20-ap15: rgba(20, 20, 20, .15);
  --gray-20-ap2: rgba(20, 20, 20, .2);
  --gray-20-ap235: rgba(20, 20, 20, .235);
  --gray-20-ap3: rgba(20, 20, 20, .3);
  --gray-20-ap4: rgba(20, 20, 20, .4);
  --gray-20-ap5: rgba(20, 20, 20, .5);
  --gray-20-ap8: rgba(20, 20, 20, .8);
  --gray-20-ap9: rgba(20, 20, 20, .9);
  --gray-20-ap95: rgba(20, 20, 20, .95);
  --gray-220-a1: rgba(230, 230, 230, 1);
  --gray-222: #222;
  --gray-245-a1: rgba(230, 230, 230, 1);
  --gray-255-a0: rgba(255, 255, 255, 0);
  --gray-255-a0p9: rgba(255, 255, 255, 0.9);
  --gray-255-a1: rgba(255, 255, 255, 1);
  --gray-255-ap2: rgba(255, 255, 255, .2);
  --gray-255-ap4: rgba(255, 255, 255, .4);
  --gray-255-ap5: rgba(255, 255, 255, .5);
  --gray-255-ap6: rgba(255, 255, 255, .6);
  --gray-255-ap8: rgba(255, 255, 255, .8);
  --gray-333: #333;
  --gray-40-ap2: rgba(50, 50, 50, .2);
  --gray-40-ap4: rgba(50, 50, 50, .4);
  --gray-41: rgb(50, 50, 50);
  --gray-444: #444;
  --gray-50-a1: rgba(50, 50, 50, 1);
  --gray-50-ap05: rgba(50, 50, 50, .05);
  --gray-52-a0p8: rgba(50, 50, 50, 0.8);
  --gray-60-a1: rgba(50, 50, 50, 1);
  --gray-666: #666;
  --gray-68-a1: rgba(70, 70, 70, 1);
  --gray-70-a0p286: rgba(70, 70, 70, 0.286);
  --gray-80-a1: rgba(70, 70, 70, 1);
  --gray-80-ap4: rgba(70, 70, 70, .4);
  --gray-80-ap8: rgba(70, 70, 70, .8);
  --gray-888: #888;
  --gray-aaa: #aaa;
  --gray-ccc: #ccc;
  --gray-ddd: #ddd;
  --gray-eee: #eee;
  --gray-fff: #fff;

  /* font sizes */
  --fs-1p05rem: 1rem;
  --fs-1p15rem: 1.1rem;
  --fs-1p1rem: 1.1rem;
  --fs-1p2rem: 1.2rem;
  --fs-1p3rem: 1.35rem;
  --fs-1p4rem: 1.35rem;
  --fs-1p5rem: 1.6rem;
  --fs-1p6rem: 1.6rem;
  --fs-1p7rem: 1.6rem;
  --fs-1p8rem: 2rem;
  --fs-1rem: 1rem;
  --fs-2p1rem: 2rem;
  --fs-2p2rem: 2rem;
  --fs-2p3rem: 2rem;
  --fs-2p4rem: 2rem;
  --fs-2p6rem: 3rem;
  --fs-2rem: 2rem;
  --fs-3p2rem: 3rem;
  --fs-3p5rem: 3rem;
  --fs-3rem: 3rem;
  --fs-4p2rem: 4rem;
  --fs-4rem: 4rem;
  --fs-5rem: 6rem;
  --fs-6rem: 6rem;
  --fs-7rem: 6rem;
  --fs-9rem: 6rem;
  --fs-p75rem: .8rem;
  --fs-p85rem: .8rem;
  --fs-p8rem: .8rem;
  --fs-p95rem: .9rem;
  --fs-p9rem: .9rem;

  /* motion: semantic duration tokens (Phase 2b). Everything that moves uses
     these, so the reduced-motion override below covers the whole site.
     Never use var() inside an @property initial-value (CLAUDE.md rule 10). */
  --motion-fast: 0.3s;
  --motion-base: 0.5s;
  --motion-slow: 1s;
  --motion-stagger: 0.05s; /* delay between items in a cascade */

  --ease-default: ease;
  --ease-in-out: ease-in-out;
  --ease-out: ease-out;
  --ease-linear: linear;
  --ease-cubic: cubic-bezier(.22,.68,.32,1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0.01ms;
    --motion-base: 0.01ms;
    --motion-slow: 0.01ms;
    --motion-stagger: 0ms;
  }
}

@property --gradient-start {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(100, 100, 100, 0.1);
}

@property --gradient-middle {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(80, 80, 80, .4);
}

@property --gradient-end {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(80, 80, 80, .4);
}


html, body{
	overflow-x: hidden;
  	overflow-x: clip !important;
	padding: 0px;
	margin: 0px;
	width: 100%;
}


html{
	scroll-behavior: smooth;
}

body{
	font-family: "Lato", sans-serif;
	overflow-x: clip;
}

h3, ul, li, div, a, h2, h1, p{
	letter-spacing: .05rem;
}

ul, li{
	list-style: none;
	margin: 0 auto;
    padding: 0;
}

section{
	max-width: 1366px;
	margin:0 auto;
}

div{
	text-align: center;
}

h1{
	text-shadow: 1px 1px var(--gray-333), -1px -1px var(--gray-333), 1px -1px var(--gray-333), -1px 1px var(--gray-333), 0px 0px 1rem var(--gray-140-ap4);
    font-size: var(--fs-5rem);
    color: var(--gray-255-a1);
    margin: 0 auto;
}

h2{
	font-style: italic;
    margin-bottom: 0;
    padding: 0px;
    font-size: var(--fs-2rem);
}

h3{
    font-weight: 300;
    font-style: normal;
    font-size: var(--fs-1p4rem);
    line-height: 2.4rem;
    text-align: center;
}

h5, h6{
	margin: 0 auto;
	font-weight: 500;
}

h5{
    font-size: var(--fs-2rem);
    margin-top: 2rem;
}

h6{
    color: var(--gray-150-a1);
    margin-top: 3rem;
    font-weight: 300;
    font-size: var(--fs-1p4rem);
    font-style: italic;
}

form{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: space-around;
    justify-content: space-between;
    align-items: flex-start;
    margin-left: -4%;
}

form ul{
	width: 103%;
}

div.contactForm{
	width:80%;
	max-width:45rem;
}

div.contactForm h3{
	visibility:visible;
	height:auto;
	width:auto;
	margin-bottom: 2rem;
}

div.contactForm #form input, div.contactForm #form textarea{
	width: 100%;
    padding: .5rem;
    font-size: var(--fs-1p2rem);
    margin-bottom: 1.7rem;
    border-radius: .5rem;
    border: var(--gray-160-ap7) solid .15rem;
    box-shadow: 5px 5px 4px 0px var(--gray-120-ap2) inset;
}

div.contactForm #form input:focus, div.contactForm #form textarea:focus, div.contactForm #form input:active, div.contactForm #form textarea:active, div.contactForm #form input:focus-visible, div.contactForm #form textarea:focus-visible{
	width: 100%;
    border: var(--gray-180-a1) 0.1em solid; 
    box-shadow: 5px 5px 4px 0px var(--gray-120-ap4) inset;
}

div.contactForm #form textarea{
	height: 5rem;
}

div.contactForm #form input{
    height: 2.3rem;
}

div.contactForm #form label{
	margin-bottom: .6rem;
	font-size:var(--fs-1rem);
	color: var(--gray-888);
}

div.contactForm #form button{
    padding: 3rem;
    height: auto;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    font-weight: 300;
    font-style: normal;
    font-size: var(--fs-1p2rem);
    line-height: 2.5rem;
    width: auto;
    width: fit-content;
    padding: .8rem 1rem .8rem 1rem;
    background-color: var(--gray-fff);
    border-radius: .5rem;
    border: var(--gray-180-a1) 0.1em solid;
    color: var(--gray-140-a1);
    text-decoration: none;
    transition: all var(--motion-base);
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    margin-right: 0;
}

div.contactForm #form button:hover{
    border: rgba(var(--color-brand-rgb), 1) 0.1em solid; 
    color: rgba(var(--color-brand-rgb), 1);
 	padding-left:.85rem;
 	padding-right:1.85rem;
 }

div.contactForm #form button:hover svg{
	margin-left: 1.5rem;
	margin-right:-.9rem;
}


div.caseStudies h6{
	line-height: 2rem;
}

a{
    background: none;
    border: none;
    cursor: pointer;
}


/*--- Project Title ---*/

li h1, li h5, div.projectTitle ul li{
	display: inline-block;
}


div.projectTitle ul{
	margin: 0;
	height: fit-content;
	/*margin-left: -3rem;*/
    text-align: center;
	
}

div.projectTitle li span{
    font-weight: 200;
    font-size: var(--fs-4rem);
}

div.projectTitle h5{
	margin-top:1.5rem;
	
}

div.caseStudies div.projectTitle h5{
	font-size: var(--fs-1p4rem);
	
}


#coverLetter div.projectTitle h5{
	font-size: var(--fs-1p3rem);
}

#coverLetter div.projectTitle h5 a{
	color: var(--gray-100-a1);
	transition: color var(--motion-base);
	cursor: pointer;
}

div.projectTitle h5 a{
    color: var(--gray-180-a1);
    font-weight: 300;
    font-style: oblique;
    text-decoration: none;
    transition: color var(--motion-base);
}

div.projectTitle h5 a:hover, #coverLetter div.projectTitle h5 a:hover{
	color: rgba(var(--color-brand-rgb), 1);
}

div.projectTitle{
	margin: 1rem;
}










/*--- Top of site - home ---*/

section header{

}

section.interior header{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
    margin-bottom: -12px;
    position: sticky;
    top:0;
    height:83px;
    padding-top:10px;
        background-color: var(--gray-255-ap8);
    padding-left: 20px;
    padding-right: 20px;
    z-index: 1;
}

section.landing header{
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

section.int header{
	flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
    margin-bottom: unset;
    position: unset;
    top: 0;
    height: auto;
    padding-top: unset;
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
}


section header div.topGraphic{
	width:100%;
	min-height: 83px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../images/HeaderGraphic.png);
    background-position: top;
}

section header div.logo{
    z-index: 1;
    padding-top: 5rem;
    position: relative;
    
}

section.int header div.logo{
	height: 5rem;
    padding-top: 0;
    z-index: 100000;
    z-index: 9099;
}

section.interior header div.logo{
    padding-top: 0rem;
    /*--width: 33%;--*/
    text-align: left;
    align-items: flex-start;
    align-content: space-between;
}

section header div, ul.vertCards li a div, div.relatedProjs, div.relatedProjs div{
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    display: flex;
}

div.relatedProjs, div.relatedProjs div{
    max-width:52rem;
    width: 100%;;
}


section header div.watercolor{
    z-index: 0;
    overflow: hidden;
    margin-top: -320px;
    width: 100%;
    height: 250px;
}

section.interior header div.watercolor{
    margin-top: 0px;
    width: 100%;
    height: 80px;
}


section header div.watercolor img{
	display: flex;
	width:50%;
    margin-top: 30rem;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    flex-direction: column;
}

section header div.watercolor img.dashed{
	width: 50%;
    position: absolute;
    margin-top: 310px;
}

section.interior header div.watercolor img.dashed{
    width: 40%;
    margin-top: 88px;
}


section header div.logo svg.buttonLogo{
	width: 9em;
	overflow:visible;
	transition: all var(--motion-base);
}

section.int header div.logo svg.buttonLogo{
	margin-left: -1rem;
    width: 6em;
    background: transparent;
}

section header div.logo svg path.hasStroke{
stroke: var(--gray-68-a1);
transition: all var(--motion-base);
}


section header div.logo svg:hover path.hasStroke{
stroke:rgba(var(--color-brand-rgb), 1);
}

section header div.logo svg path.updateFill{
fill:var(--gray-68-a1);
transition: all var(--motion-base);
}

section header div.logo svg:hover path.updateFill{
fill:rgba(var(--color-brand-rgb), 1);
}

section.interior header div.logo svg.buttonLogo{
	width: 6em;
}

section header div.ww2c{
    padding-top: 4em;
    border-top: var(--gray-20-ap3) 0.01em solid;
    background-image: url(../images/Trees_crppd.png);
    background-position: 50% 0%;
    background-size: 63%;
    background-color: var(--gray-fff);
    background-repeat: no-repeat;
    width: 100%;
}

section.interior header div.ww2c{
    padding-top: 0rem;
    border-top: none;
    background-image: none;
    background-position: 0%;
    background-color: var(--gray-255-a0);
    background-repeat: no-repeat;
    width: auto;
}

section.interior header div.ww2c img.ww2cLogo:hover, section header div.ww2c img.ww2cLogo:hover{
	
}


img.slashed{
    width: 6rem;
    margin-top: 2rem;
    margin-bottom: 3rem;
}

section header div.ww2c img.slashed{
    margin-top: 5rem;
    margin-bottom: 2rem;
    padding: 0rem 1rem;
    background-color: var(--gray-fff);
    z-index: 1000;
}


section header div.ww2c img.ww2cLogo{
    width: 33rem;
    transition: opacity calc(var(--motion-slow) * 2);
}

section header div.ww2c img.color{
    opacity: 0;
    position: relative;
    margin-top: -7.3rem;
}

section header div.ww2c:hover img.color{
	opacity:1;
}

section header div.ww2c img.noColor{
    opacity: 1;
}

section header div.ww2c:hover img.noColor{
	opacity:0;
}

section.interior header div.ww2c img.ww2cLogo{
    width: 15rem;
}

section.interior header div.ww2c img.color{
    opacity: 0;
    position: absolute;
    margin-left: -15rem;
}

section.landing header div.intro{
	background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../images/BGWatercolors.jpg);
    background-position: 50% 7%;
    padding-bottom: 7em;
    margin-top:4rem;
	background-attachment: fixed;
}

section.landing header div.intro div.introBlurb{
	/*background-color: var(--gray-255-ap2);*/
    padding: 3rem;
    border-radius: .5rem;
    border: solid .1rem var(--gray-20-ap2);
    /*background-image: linear-gradient(to bottom middle, var(--gray-255-a0), var(--gray-255-ap2));*/
	width: 75%;
	border-right:none;
	border-left:none;
    border-bottom:none;
}

section.landing header div.intro h3{
	text-wrap: pretty;
    
}

section.landing header div.introBlurb h3.hi{
	margin-top: 2rem;
}

section.landing header div.introBlurb h3.hi a,
section.landing header div.introBlurb h3.hi a:visited{
	text-decoration: none;
	border-bottom: var(--gray-ccc) solid .1rem;
	color: var(--gray-20-a1);
	transition: color var(--motion-base);
}

section.landing header div.introBlurb h3.hi a:hover{
	color: rgba(var(--color-brand-rgb), 1);
}



section.landing header div.intro hr{
    text-align: center;
    border-width: .1rem;
    width: 90%;
    margin-bottom: 0rem;
    opacity: .5;

}

section.landing header div.intro img.diamond{
    margin-top: -38rem;
    float: initial;
    position: absolute;
}

section.landing header div.intro div.divider{
	margin-top: 3rem;
    margin-bottom: 2rem;
}

div.line{
	width: 100%;
    margin-top: 81px;
    position: absolute;
    align-items: flex-start;
    border-top: var(--gray-0-ap7) solid .06rem;
}


div.intro h3 span{
	font-style:italic;;
}

div.intro h3 span.hello{
	display: block;
    margin-top: 1rem;
}

div.intro img.slashed{
    margin-top: 6rem;
    height: auto;
    width: 6rem;
    margin-bottom: 0;
}

div.workStudies img.slashed{
    height: auto;
    width: 6rem;
    margin-bottom: 3rem;
}

.int div.intro{
	display: flex;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    align-content: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

div.intro p, ul.vertCards li a p,  div.relatedProjs ul li a p{
    width: 55%;
    font-weight: 300;
    padding-top: 1rem;
    color: var(--gray-444);
    font-size: var(--fs-1p1rem);
    line-height: 2rem;
    text-wrap: pretty;

    width: 72%;
    font-size: var(--fs-1p4rem);
    font-weight: 300;
    line-height: 2.3rem;

}

div.intro p{
margin:0 auto;

}

div.intro p.workDesc{
    margin-bottom: 3rem;

}

div.intro h2.prodEx{
    margin-top: 1rem;

}


div.intro p.large{
    width: 72%;
    font-weight: 300;
    font-size: var(--fs-1p4rem);
    line-height: 2.4rem;
    text-align:left;
    margin-bottom: 0;
}

div.intro p.medium{
    width: 72%;
    margin-bottom: 0;
}

div.intro p.xtrMargin{
    margin-bottom: 1rem;
}

div.intro p.workedFor{	
	width: 80%;
    margin-top: 2rem;
	font-style: italic;
}

div.intro p.recents{
	border-top: solid .01rem var(--gray-20-ap1);
    padding-top: 2rem;
    width: 72%;
}

div.intro p.education{
	text-align: center;
    width: 100%;
}

div.intro p a{
	text-decoration: none;
    font-weight: 400;
    border-bottom: var(--gray-ccc) solid .1rem;
    color: var(--gray-20-a1);
    transition: color var(--motion-base);
}

div.intro p a:hover{
color:rgba(var(--color-brand-rgb), 1);
}


section.landing header div.intro ul, ul.vertCards, div.relatedProjs ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
}



/*--- Buttons ---*/

li.button{

    
}

li.button a, #career button a{
	height: auto;
	display: inline-block;
	cursor: pointer;
    text-align: center;
    font-weight: 300;
    font-style: normal;
    font-size: var(--fs-1p2rem);
    line-height: 2.5rem;
    width: auto;
    width: 200px;
    padding: .8rem 0 .8rem 0;
    margin-right: 50px;
    background-color: var(--gray-fff);
    border-radius: .5rem;
    border: var(--gray-180-a1) 0.1em solid; 
    color: var(--gray-140-a1);
    text-decoration: none;
	transition: all var(--motion-base);
}

.caseStudies, .projs{
	width: 100%;
    /*max-width: 47rem;*/
}

.int .caseStudies{
	max-width: 62rem;
    
}

.art .caseStudies{
	max-width: 45rem;
}

img.cseStudyLogo {
    max-width: 15rem;
    margin: 2rem 1rem;
}

img.block{
    max-width: 8rem;
    filter: brightness(0.1);
    opacity: .6;
}

.featureDeet .caseStudies{
	max-width: 45rem;
}

div.intro div.homer{
	max-width: 60rem;
}

.heroStudies, .projs{
	max-width:none;
	/*margin-bottom: 4rem;*/
}



.products{
	 max-width: 720px;
}

.intro .prods{
     max-width: none;
}

.intro .prods ul.homeProds{
     width: 90%;
}

section.interior .articleS{
	max-width:850px;
}

.caseStudies h5{
    text-align: left;
}


.caseStudies ul{
	margin-top: 3rem;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
	align-items: flex-start;
    padding-inline-start: 0px;
    margin-bottom: 0;
}

#b1CaseStudies ul{
	justify-content: center;
}

section.landing header div.intro .heroStudies ul, ul.vertCards, div.relatedProjs ul{
	justify-content: center;
    width: 75%;
    margin-top: 2rem;
}

ul.vertCards {
    max-width: 48rem;

}

section.landing header div.intro .heroStudies ul.homeProds{
    justify-content: center;
    width: 90%;

}

section.landing header div.intro .heroStudies ul.landingCases, section.landing div.projs .heroStudies ul.v2, div.relatedProjs ul{
	justify-content: center;
    width: 100%;
}

section.landing header div.intro .heroStudies ul.landingCases li a.border {
    min-height: 21rem;
    height: 21rem;
}

section.landing header div.intro .heroStudies ul.v2 li a.border, section.landing div.projs .heroStudies ul.v2 li a.border, div.relatedProjs ul li a.border{
    overflow: visible;
    background-image: none;
    min-height: 15rem;
    height: 20rem;
    border:none;
    background-color: var(--gray-255-a0);
    align-items: flex-start;
}

section.landing header div.intro .heroStudies ul.v2 li a.border img, section.landing div.projs .heroStudies ul.v2 li a.border img, div.relatedProjs ul li a img{
    display: block;
    position: absolute;
    z-index: 1000;
    height: auto;
    width: 20rem;
    transition: all var(--motion-base);
}

section.landing header div.intro .heroStudies ul.v2 li a.border:hover img, section.landing div.projs .heroStudies ul.v2 li a.border:hover img, div.relatedProjs ul li a:hover img{
    width: 19.2rem;
    margin-top: -.2rem;
    transition: all var(--motion-base);
}


section.landing header div.intro .heroStudies ul.landingCases li a:hover div.studyHighlight {
    margin-top: 0;
    margin-bottom: 0;
}



.heroStudies h2{
	margin-top:6rem;
	color:var(--gray-666);
}

div.prods h2{

    margin-top: 0;
}

.heroStudies h2.caseIntro{
    margin-top: 2rem;
}


/*-----Case Study Cards-----*/

section.landing header div div.caseCards ul{

    justify-content: space-evenly;
    align-items: flex-start;
    margin: 0;
    margin-top:2rem;
    align-content: space-around;

}

.caseCards ul li{
    width: 47%;
    text-align: left;
    margin: 0;
    height: stretch;
    margin-bottom: 2rem;
}

ul#cardList li{
    flex-shrink: 0;

}

.caseCards ul li a{
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: space-around;
    align-items: flex-start;
    min-height:0;
    text-decoration: none;
    filter: grayscale(100%);
    transition: filter var(--motion-base) var(--ease-in-out);
    background-size: cover;
    height: stretch;
}

.caseCards ul li a:hover{
    filter: grayscale(0%);
}

.caseCards ul li a div{
    padding: 2rem;
    
}
    

.caseCards ul li a div.cardImage{
    height: stretch;
    text-align: left;
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-end;
    width: stretch;
    --gradient-start: rgba(77, 39, 39, 0);
    --gradient-middle: rgba(70, 70, 70, 0.286);
    --gradient-end: rgba(80, 80, 80, .8);

    background-image: linear-gradient(to left, var(--gradient-start), var(--gradient-middle), var(--gradient-end));

    
    transition: --gradient-start var(--motion-base) var(--ease-default), --gradient-end var(--motion-base) var(--ease-default), --gradient-middle var(--motion-base) var(--ease-default);

}

.caseCards ul li a:hover div.cardImage{
    --gradient-start: rgba(100, 100, 100, 0);
    --gradient-middle: rgba(135, 0, 56, 0);
    --gradient-end: rgba(255, 1, 108, .6);
}

.AIAdopt{
    background-image: url(../images/caseStudies/AiTransform.jpg);

}

div.cseStudy .AIAdopt{
    background-position-y: 100%;
}

.designSystems {
    background-image: url(../images/caseStudies/designSystems.jpg);

}

div.cseStudy .designSystems{
    background-position-y: 81%;
}

.DiscoveryDeliver {
    background-image: url(../images/caseStudies/discoveryDelivery.jpg);

}

div.cseStudy .DiscoveryDeliver{
    background-position-y: 50%;
}


.playerCoach {
    background-image: url(../images/caseStudies/PlayerCoach.jpg);
}

div.cseStudy .playerCoach{
    background-position-y: 80%;
}



.SystemsThinker {
    background-image: url(../images/caseStudies/systemsThinker.jpg);
    background-position-y: 30%;
}


.designVisions {
    background-image: url(../images/caseStudies/designVision.jpg);
}

div.cseStudy .designVisions{
    background-position-y: 50%;
}

.crossFunctionalCAB{
    background-image: url(../images/caseStudies/CrossFunctionalCAB.jpg);
    background-position-y: 80%;

}

div.cseStudy .crossFunctionalCAB{
    background-position-y: 50%;
}

.craftAcumen{
    background-image: url(../images/caseStudies/craftAcumen.jpg);

}

div.cseStudy .craftAcumen{
    background-position-y: 50%;
}

.dataVisualization{
    background-image: url(../images/caseStudies/dataVisualization.jpg);

}

div.cseStudy .dataVisualization{
    background-position-y: 50%;
}

.eCommerce{
    background-image: url(../images/caseStudies/eCommerce.jpeg);

}

div.cseStudy .eCommerce{
    background-position-y: 60%;
}

.leadershipScale{
    background-image: url(../images/caseStudies/leadershipScale.jpg);

}

div.cseStudy .leadershipScale{
    background-position-y: 50%;
}


.researchPractice{
    background-image: url(../images/caseStudies/researchPractice.jpg);
    background-position-y: 40%;
}

div.cseStudy .researchPractice{
    background-position-y: 50%;
}

.customerSuccess{
    background-image: url(../images/caseStudies/customerSuccess.jpg);
    background-position-y: 50%;
}

div.cseStudy .customerSuccess{
    background-position-y: 50%;
}



.caseCards ul li a div.cardContent{
    height: stretch;
    border-top:solid .01rem var(--gray-255-ap4);
    --gradient-start: rgba(100, 100, 100, 0.7);
    --gradient-end: rgba(20, 20, 20, .95);
    background-image: linear-gradient(to left, var(--gradient-start), var(--gradient-end));
    transition: --gradient-start var(--motion-base) var(--ease-default), --gradient-end var(--motion-base) var(--ease-default), padding-bottom var(--motion-base) var(--ease-default), margin-top var(--motion-base) var(--ease-default);
    justify-content: flex-start;
}

.caseCards ul li a:hover div.cardContent{
    margin-top:-1rem;
    padding-bottom:3rem;
    --gradient-start: rgba(52, 52, 52, 0.8);
    --gradient-end: rgb(47, 0, 19, 1);

}


.caseCards ul li a p {
    margin: 0;
    padding:0;
    color: var(--gray-fff);
    font-style: normal;
    width: 100%;
    text-decoration: none;
    text-align: left;
}

.caseCards ul li a div.cardImage p {

}

.caseCards ul li a div.cardImage p.tit{
    text-wrap: pretty;
    width: 80%;
    line-height: 2.5rem;
    margin-bottom: .4rem;
    font-size: var(--fs-2p1rem);
    font-weight: 400;
    text-shadow: .03rem .03rem 1rem var(--gray-20-ap9);
    transition: all var(--motion-base);
}

.caseCards ul li a:hover div.cardImage p.tit{
    text-shadow: .03rem .03rem 1.2rem var(--gray-20-a1);
}

.caseCards ul li a p.label{
    width: auto;
    text-align: center;
    font-size: var(--fs-1p6rem);
    font-weight: 500;
    font-style: normal;
    line-height: 1.9rem;
}

.caseCards ul li a p.label span {
    margin: 0 auto;
    background-color: var(--gray-40-ap4);
    width: fit-content;
    border: var(--gray-255-ap6) solid .1rem;
    padding: .01rem .6rem;
    border-radius: 1rem;
    display: block;
    font-size: var(--fs-p75rem);
    font-style: italic;
    font-weight: 300;
    text-align: center;
    margin-bottom: .5rem;
}

.caseCards ul li a div.cardContent p{
    font-size: var(--fs-1p1rem);
    line-height: 1.6rem;
    font-weight: 300;
    transition: all var(--motion-base);
}

.caseCards ul li a:hover div.cardContent p.sum{



}

.caseCards ul li a div.cardContent p.rmore{
    margin-top: .7rem;
    font-style: italic;
    text-decoration: underline;
    font-weight: 300;
}

.caseCards ul li a div.cardContent p.rmore:visited, .caseCards ul li a:visited{
    color: var(--gray-255-a1);
}




/*-----------------------------*/





.heroStudies ul li, ul.vertCards li, div.relatedProjs ul li{
	margin-right:.5rem;
	margin-left:.5rem;
	width: 30%;
}

.heroStudies ul li li{

	width: 25%;
}



.caseStudies li a{
	display: flex;
    background-color: var(--gray-255-a1);
    height:auto;
    /*min-height: 23rem;*/
    min-width: 21.5rem;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: center;
    overflow:hidden;
    transition: border var(--motion-base);
    text-decoration:none;
    cursor: pointer;
}

.intro .heroStudies h6, .tabcontent .heroStudies h6{
	font-size: var(--fs-1p2rem);
	line-height:1.6rem;
}

.intro .heroStudies ul li a.border, .tabcontent .heroStudies ul li a.border, ul.vertCards li a.border{
	min-width: 0;
	min-height: 23rem;
	height: 23rem;
}

.intro .heroStudies ul.homeProds{
    width: auto;

}
   


.intro .heroStudies ul.homeProds li{
    width: 23%;
}


.intro .heroStudies ul.homeProds li a.border{
    width: 100%;
    min-width: 8rem;
    height: auto;
    min-height: 10rem;

}



.tabcontent .products ul li a.border{
    height: 19rem;
    min-height:0;
}

.tabcontent .products ul li a.border{
    height: 15rem;
}

    
.tabcontent .products, .tabcontent .heroStudies {
    max-width: 720px;
    max-width: 76%;
	}
	
.tabcontent .heroStudies ul li {
    width: 30%;
}

.tabcontent .heroStudies ul li a p.statDeet, .tabcontent .heroStudies ul li a p.stat {
    text-align: center;
}

.tabcontent .products ul li{
	width: 46%;
}

.intro .heroStudies ul li a, ul.vertCards li a, div.relatedProjs ul li a{
    filter: grayscale(1);
    transition: all var(--motion-base);
    background-size: 55rem;
    background-position: 30% 96%;
}

.intro .heroStudies ul li a:hover, ul.vertCards li a:hover{
    filter: grayscale(0);
    background-size: 51rem;
}

.intro .heroStudies ul li  a.o4aRV, ul.vertCards li a.o4aRV,  {
    background-image: url(../images/CompanyVisuals/Agents/RV_thumb.png);
    background-size: 28rem;
    background-position: 99% 0%;

}

.intro .heroStudies ul li a.o4aRV:hover, ul.vertCards li a.o4aRV:hover{
    background-size: 29rem;
    filter: none;
}

.intro .heroStudies ul li a.ssConvo, ul.vertCards li a.ssConvo {
    background-image: url(../images/CompanyVisuals/SelfServe/convo_thumb.png);
    background-size: 22rem;
    background-position: 14% -14%;
}

.intro .heroStudies ul li a.ssConvo:hover, ul.vertCards li a.ssConvo:hover{
    background-size: 23rem;
    filter: none;
}

.intro .heroStudies ul li a.mediumHCAI, ul.vertCards li a.mediumHCAI {
    background-image: url(../images/Articles/AI-hero.jpg);
    background-size: 60rem;
    background-position: 20% 46%;
}

.intro .heroStudies ul li a.mediumHCAI:hover, ul.vertCards li a.mediumHCAI:hover{
    background-size: 61rem;

}

.intro .heroStudies ul li a.AITrust, ul.vertCards li a.AITrust {
    background-image: url(../images/Articles/gnome.jpg);
    background-position: 70% 96%;
}

.intro .heroStudies ul li a.AIConvo, ul.vertCards li a.AIConvo {
    background-image: url(../images/Articles/convoFlow/hero.jpg);
    background-position: 30% 96%;
}

.intro .heroStudies ul li a.AISafety, ul.vertCards li a.AISafety {
    background-image: url(../images/Articles/PsychSafety/hero.png);
    background-position: 30% 96%;
}




/*---- Case Study Backgrounds ---*/


.intro .heroStudies ul li a.playerCoach, ul.vertCards li a.playerCoach {
    background-image: url(../images/caseStudies/PlayerCoach.jpg);
    background-size: 64rem;
    background-position: 0% 0%;
}

.intro .heroStudies ul li a.playerCoach:hover, ul.vertCards li a.playerCoach:hover{
    background-size: 65rem;
    background-position: 0% 0%;
}

.intro .heroStudies ul li a.AITeam, ul.vertCards li a.AITeam {
    background-image: url(../images/caseStudies/AiTransform.jpg);
    background-size: 60rem;
    background-position: 30% 96%;
}

.intro .heroStudies ul li a.AITeam:hover, ul.vertCards li a.AITeam:hover {
    background-size: 61rem;
    background-position: 30% 96%; 

}

.intro .heroStudies ul li a.DiscoveryDeliver, ul.vertCards li a.DiscoveryDeliver {
    background-image: url(../images/caseStudies/discoveryDelivery.jpg);
    background-size: 72rem;
    background-position: 60% 86%;
}

.intro .heroStudies ul li a.DiscoveryDeliver:hover, ul.vertCards li a.DiscoveryDeliver:hover {
    background-size: 73rem;
    background-position: 60% 86%; 
}


.intro .heroStudies ul li a.SystemsThinker, ul.vertCards li a.SystemsThinker {
    background-image: url(../images/caseStudies/systemsThinker.jpg);
    background-size: 61rem;
    background-position: 30% 96%;
}

.intro .heroStudies ul li a.SystemsThinker:hover, ul.vertCards li a.SystemsThinker:hover {
    background-size: 62rem;
    background-position: 30% 96%;
}   

.intro .heroStudies ul li a.designSystems, ul.vertCards li a.designSystems {
    background-image: url(../images/caseStudies/designSystems.jpg);
    background-size: 60rem;
    background-position: 30% 96%;
}

.intro .heroStudies ul li a.designSystems:hover, ul.vertCards li a.designSystems:hover {
    background-size: 61rem;
    background-position: 30% 96%;
}

.intro .heroStudies ul li a.dataViz, ul.vertCards li a.dataViz {
    background-image: url(../images/caseStudies/DataVisualization.jpg);
    background-size: 60rem;
    background-position: 70% 96%;
}

.intro .heroStudies ul li a.dataViz:hover, ul.vertCards li a.dataViz:hover {
    background-size: 61rem;
    background-position: 70% 96%;
}

.intro .heroStudies ul li a.designVisions, ul.vertCards li a.designVisions {
    background-image: url(../images/caseStudies/designVision.jpg);
    background-size: 72rem;
    background-position: 60% 86%;
}

.intro .heroStudies ul li a.designVisions:hover, ul.vertCards li a.designVisions:hover {
    background-size: 73rem;
    background-position: 60% 86%; 
}

.intro .heroStudies ul li a.AITrust:hover, .intro .heroStudies ul li a.AIConvo:hover, ul.vertCards li a.AITrust:hover, ul.vertCards li a.AIConvo:hover{
    background-size: 51rem;
    filter: none;
}


.intro .heroStudies ul li a.o4aLCS {
    background-image: url(../images/CompanyVisuals/Agents/LC_thumb.png);
    background-size: 16rem;
    filter: grayscale(1);
    background-position: 10% 10%;
}

.intro .heroStudies ul li a.o4aLCS:hover{
    background-size: 17rem;
    filter: none;
}

.heroStudies ul li a div.studyHighlight, section.landing div.projs .heroStudies ul.v2 li a.border div.studyHighlight, ul.vertCards li a div.studyHighlight, div.relatedProjs ul li a.border div.studyHighlight{
    display: flex;
    border-top: solid .1rem var(--gray-20-ap2);
    height: auto;
    padding: 1rem;
    padding-top: 0;
    width: 100%;
    --gradient-start: rgba(25, 14, 14, 0.4);
    --gradient-end: rgba(80, 80, 80, .8);
    background-image: linear-gradient(to bottom right, var(--gradient-start), var(--gradient-end));
    margin-bottom: 0;
    /*margin-top: 60%;*/
    flex-wrap: nowrap;
    justify-content: space-evenly;
    transition: all var(--motion-slow);
    flex-direction: column;
    cursor: pointer;
}

ul.vertCards li a div.studyHighlight{
    width: stretch;
}


section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight, div.relatedProjs ul li a.border div.studyHighlight{
    padding-top: 10rem;
    margin-top: 7rem;
    background-image: linear-gradient(to bottom right, var(--gradient-start), var(--gradient-end));
    transition: all var(--motion-base);
    transition: --gradient-start var(--motion-base) var(--ease-default), --gradient-end var(--motion-base) var(--ease-default);
    justify-content: flex-start;
    height: 0;
    border-bottom: solid .1rem var(--gray-20-ap2);
    border-top: none;
}


section.landing header div.intro .heroStudies ul.v2 li a.border:hover div.studyHighlight,  div.relatedProjs ul li a.border:hover div.studyHighlight{
    padding-top: 10.2rem;
    background-image: linear-gradient(to bottom right, var(--gradient-start), var(--gradient-end));
    --gradient-start: rgba(255, 136, 0, 0.1);
    --gradient-end: rgba(255, 1, 108, .6);
}

.tabcontent .heroStudies ul li a div.studyHighlight{
	margin-top: 70%;
}

.heroStudies ul li a:hover div.studyHighlight, ul.vertCards li a:hover div.studyHighlight{
	background-image: linear-gradient(to bottom right, var(--gradient-start), var(--gradient-end));
    --gradient-start: rgba(100, 100, 100, 0.4);
    --gradient-end: rgba(255, 1, 108, .7);
	margin-top: 90%;
}

.successes ul li a:hover div.studyHighlight p{

}

.successes ul li a:hover div.studyHighlight p.label, .successes ul li a:hover div.studyHighlight p.statDeet{

}

.successes ul li a:hover div.studyHighlight p.stat{

}

.successes ul li a div.studyHighlight p, ul.vertCards li a div.studyHighlight p,  div.relatedProjs ul li a div.studyHighlight p{
    transition: all var(--motion-base);
}

.successes ul li a div.studyHighlight p.sum{
    opacity:0;
    display:none;
    font-size: var(--fs-p9rem);
    line-height: 1.15rem;
    text-align: left;
    margin-bottom: -6rem;
    transition: all var(--motion-base);
    transition-behavior: allow-discrete;
}

.successes ul li a:hover div.studyHighlight p.sum{
    opacity:1;
    display:block;
    transition: all var(--motion-base);
    transition-behavior: allow-discrete;
    margin-bottom: 0;
}

.heroStudies ul li a:hover div.studyHighlight p, ul.vertCards li a:hover div.studyHighlight p, div.relatedProjs ul li a.border:hover div.studyHighlight p{
    padding-bottom: .2rem;
}

.projs .products ul li a div.studyHighlight {
    margin-top: 50%;
    padding-top: 1rem;
    }

.projs .products ul li a:hover div.studyHighlight{
	margin-top: 45%;
}



.heroStudies ul li a p, ul.vertCards li a p, div.relatedProjs ul li a p{
	margin:0;
	color: var(--gray-fff);
    font-style: normal;
    width: 100%;
    text-decoration: none;
    transition: all var(--motion-fast);
}

.heroStudies ul li a:hover p{
	
}

.heroStudies ul li a p.label, ul.vertCards li a p.label, div.relatedProjs ul li a div.studyHighlight p.label{
    margin: 0 auto;
    width: auto;
    text-align: center;
    font-size: var(--fs-1p6rem);
    font-weight: 500;
    font-style: normal;
        margin-bottom: .6rem;
    line-height: 1.9rem;
}

    .products ul li a p.label {
		font-size:var(--fs-1p7rem);
    }


.heroStudies ul li a p.label span, ul.vertCards li a p.label span,  div.relatedProjs ul li a div.studyHighlight p.label span{
    margin: 0 auto;
    background-color: var(--gray-40-ap2);
    width: fit-content;
    border: var(--gray-255-ap6) solid .1rem;
    padding: .01rem .6rem;
    border-radius: 1rem;
    border-radius: .5rem;
    display: block;
    font-size: var(--fs-p75rem);
    font-style: italic;
    font-weight: 300;
    text-align: center;
    margin-bottom: .5rem;
}

.products ul li a p.label span {
	display: inline-block;
	vertical-align: middle;
	margin-right:1rem;
}

.products ul.homeProds li a p.label span {
    margin-right: 0;
}

section.landing header div.intro .heroStudies ul.v2 li, div.relatedProjs ul li{
height: 26rem;
width: 31%;
}

div.relatedProjs ul li{
width: 45%;
}

section.landing div.projs .heroStudies ul.v2 li{
height: 26rem;
}
    

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight p.label, section.landing div.projs .heroStudies ul.v2 li a.border div.studyHighlight p.label, div.relatedProjs ul li a div.studyHighlight p.label{
    margin-bottom: 0;
    font-size: var(--fs-1rem);
    text-align: left;
    color: var(--gray-444);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: space-around;
    align-items: center;
    padding-top: .8rem;
}


section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight p.label span, section.landing div.projs .heroStudies ul.v2 li a.border div.studyHighlight p.label span, div.relatedProjs ul li a div.studyHighlight p.label span{
    padding: 0rem .5rem;
    font-size: var(--fs-p85rem);
    margin-bottom: 0;
    background-color: rgb(214 214 214 / 60%);
    visibility: hidden;
    transition: all var(--motion-base);
    margin-top: -.5rem;
}

section.landing header div.intro .heroStudies ul.v2 li a.border:hover div.studyHighlight p.label span, section.landing div.projs .heroStudies ul.v2 li a.border:hover div.studyHighlight p.label span, div.relatedProjs ul li a.border:hover div.studyHighlight p.label span{
    color: var(--gray-fff);
    background-color:rgba(var(--color-brand-rgb), 1);
    visibility: visible;
    margin-top: 0rem;
}

section.landing .products ul.homeProds li a.border div.studyHighlight p.label span{
        margin-right: 0;
        margin-bottom:0;

}

section.landing .products ul.homeProds li a.border div.studyHighlight p.label{
        margin-bottom:0;
        padding-top: 0;

}

section.landing .products ul.homeProds li a.border div.studyHighlight{
       padding: 1rem;

}

section.landing .products ul.homeProds li a.border div.studyHighlight{
    background-image: linear-gradient(to bottom right, var(--gradient-start), var(--gradient-end));
    transition: all var(--motion-base);
    transition: margin-bottom var(--motion-base) var(--ease-default);
    transition: --gradient-start var(--motion-base) var(--ease-default), --gradient-end var(--motion-base) var(--ease-default);
    --gradient-start: rgba(100, 100, 100, 0.4);
    --gradient-end: rgba(80, 80, 80, .8);
    margin-bottom: 0%;
}

section.landing .products ul.homeProds li a.border:hover div.studyHighlight{
    background-image: linear-gradient(to bottom right, var(--gradient-start), var(--gradient-end));
    --gradient-start: rgba(100, 100, 100, 0.4);
    --gradient-end: rgba(255, 1, 108, .7);
    margin-top: 0;
    margin-bottom: 0%;
}

    


    

.projs .products ul li a.financial div.studyHighlight, .projs .products ul li a.twoLines div.studyHighlight{
	 margin-top: 40%;
}

.projs .products ul li a.financial:hover div.studyHighlight{
	 margin-top: 35%;
     margin-top:0%;
}

.projs .products ul li a.journals div.studyHighlight {
	 margin-top: 30%;
     
}

.projs .products ul li a.journals:hover div.studyHighlight{
	 margin-top: 40%;
     margin-top:0%;

}
      

.projs .products ul li a.financial p.label, .projs .products ul li a.journals p.label, .projs .products ul li a.twoLines p.label {
 	font-size: var(--fs-1p7rem);
    padding: 0;
    text-align: left;
    margin: 0;
}

.projs .products ul li a.financial p.label span, .projs .products ul li a.journals p.label span, .projs .products ul li a.twoLines p.label span {
	display:block;
	margin: 0;
	margin-bottom: .2rem;
}

.heroStudies ul li a p.stat, ul.vertCards li a p.stat,  div.relatedProjs ul li a div.studyHighlight p.stat{
    text-align: center;
	line-height: 2.5rem;
    margin-bottom: -.4rem;
    font-size: var(--fs-2p4rem);
    font-weight: 600;
    padding-top: .6rem;
    border-top: var(--gray-255-ap5) solid .1rem;
    text-shadow: .03rem .03rem .1rem var(--gray-20-ap5);
    transition: all var(--motion-fast);
}

 ul.vertCards li a p.stat{
    font-size: var(--fs-2p2rem);
 }

.heroStudies ul li a:hover p.stat{

}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight p,  div.relatedProjs ul li a.border div.studyHighlight p{
    color:var(--gray-444);
}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight p.company, section.landing div.projs .heroStudies ul.v2 li a.border div.studyHighlight p.company, div.relatedProjs ul li a.border div.studyHighlight p.company{
    font-size: var(--fs-1rem);
    line-height: 1.3rem;
    font-style: italic;
    padding-top: 2rem;
}

div.relatedProjs ul li a.border div.studyHighlight p.company {
    text-align: center;

}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight p.stat, section.landing div.projs .heroStudies ul.v2 li a.border div.studyHighlight p.stat, div.relatedProjs ul li a.border div.studyHighlight p.stat{
    font-size: var(--fs-1p4rem);
    padding-top: 0;
    line-height: 1.5rem;
    border-top: none;
    text-shadow: none;
}


.heroStudies ul li a p.statDeet, ul.vertCards li a p.statDeet{
    padding-top:1rem;
    padding-bottom: 1rem;
    font-weight: 600;
    text-shadow: .03rem .03rem .1rem var(--gray-20-ap5);
    font-size: var(--fs-1p1rem);
       line-height: 1.4rem;
}

ul.vertCards li a p.statDeet{
    text-align: center;

}

.heroStudies ul li a p.sum{
    display:none;
}

.heroStudies ul li a:hover p.sum{
    display:block;
}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight p.statDeet, section.landing div.projs .heroStudies ul.v2 li a.border div.studyHighlight p.statDeet{
    font-weight: 400;
    padding-top: .5rem;
}

section.landing header div.intro .heroStudies ul.v2 li a.border:hover div.studyHighlight p, div.relatedProjs ul li a.border:hover div.studyHighlight p{
    color: rgba(var(--color-brand-rgb), 1);
    transition: all var(--motion-base);
}





.caseStudies ul li, ul.vertCards li, div.relatedProjs ul li{
	margin-bottom: .8rem;
}

.successes ul li {
    /*width: 100%;*/
}
section.landing header div.intro .heroStudies .successes ul.metricS{
    width: 100%;

}

.successes ul.metricS li:first-child{
        align-items: flex-end;
}

.landing .successes ul.metricS li:first-child{
        align-items: flex-end;
        border-right: var(--gray-0-ap1) solid .01rem;
}

section.landing .successes ul.metricS li:first-child p{
        text-align:right;
        padding-right: 2.3rem;
}

.successes ul.metricS li {
    width: 48%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
}

.successes ul.metricS li p{
    text-align: left;
    width: 100%;
}

section.landing .successes ul.metricS li p{
    margin-top: 0;
    text-align: left;
    color: var(--gray-0-ap5);
    padding-left: 1.5rem;
    width: 100%;

}

section.landing .successes ul.metricS li p.statIcon{
    color: var(--gray-000);
    font-size: var(--fs-3rem);
    margin-bottom: .7rem;
}

.articleS ul li{
	/*width:47%;*/
	margin-right:1rem;
}

.articleS ul li a.article, .successes ul li a, ul.vertCards li a{
	background-color: var(--gray-255-ap5);
    padding: 1rem;
    color: var(--gray-444);
    text-decoration: none;
    min-width: auto;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    transition: all var(--motion-fast);
}

.landing .successes ul li a, ul.vertCards li a, div.relatedProjs ul li a{
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: space-around;
    align-items: flex-end;
    min-height:0;
}

div.relatedProjs ul li a{
    text-decoration: none;
}

div.relatedProjs ul li a:hover{
    filter: none;
}

.articleS ul li a.article:hover, .successes ul li a:hover, ul.vertCards li a:hover{
	background-color: var(--gray-255-ap8);

}

.successes ul li a div{
	width:47%;
}

.successes ul li div.study div{
	width:100%;
}

.successes ul li div.study{
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: space-around;
    align-items: flex-start;
    min-height: 0;
    height: auto;
    padding: 1rem;
    
}

.successes div.study{
	transition: all var(--motion-slow);
    display: inline-block;
    width: auto;
}

.landing .successes div.study{
    width: 100%;
}


.successes div.study:hover div.successThumb img{
	width: 20rem;
}

.successes ul li div.study div{
	border-top: none;
}

.successes ul li div.study p{
	font-size: var(--fs-1p2rem);
	line-height: 1.9rem;
    margin-bottom: .5rem;
}

.successes ul li div.study p.readTime, .successes ul li div.study a.readTime{
	margin-bottom:.5rem;
	margin-top: .5rem;
    font-style: italic;
    font-size: var(--fs-1rem);
    width: fit-content;
    padding: .3rem .8rem .3rem .8rem;
    background-color: var(--gray-fff);
    border-radius: 1rem;
   	border: var(--gray-220-a1) 0.1em solid;
    color: var(--gray-140-a1);
    font-weight: 300;
        
}

.successes ul li div.study div ul.tags{
	margin:0;
	justify-content: left;
	margin-top: 1.5rem;
    margin-bottom: .5rem;
}

.successes ul li div.study div ul.tags li{
    font-size: var(--fs-p9rem);
    display: inline-block;
    margin: 0;
    margin-right: 1rem;
    margin-bottom: .5rem;
    width: fit-content;
    padding: .5rem .8rem .4rem .8rem;
    background-color: var(--gray-eee);
    border-radius: 2rem;
    color: var(--gray-140-a1);
}

.successes ul li a div{

}

.successes ul li div.study div ul.tags{
	/*margin-bottom:1.4rem;*/
}

.successes ul li div.study div ul.CSHeader{
    align-content: flex-start;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-top:0;
    margin-bottom: .7rem;
}

.successes ul li div.study div ul.CSHeader li{
	margin:0;
}


.successes ul li div.study div ul.statS, .successes ul li div.metric div ul.statS{
	border-top: none;
    padding-top: 1.5rem;
    margin-top: 0;
}

.successes ul li div.metric div ul.statS{
    /*gap: 10px;
    overflow: hidden;*/
    flex-wrap: nowrap;
}

.successes ul.studyMetricsBorder{

    margin-top: 1rem;
}

.successes ul li.studyMetrics, .successes ul li div.metric{
    width: 100%;
}

.successes ul li div.study div ul.metricS{
    padding-top: .5rem;
    margin-top: 0;
}

.successes ul li a div ul, .successes ul li div.study div ul, .successes ul li div.metric div ul{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    justify-content: space-around;
    align-items: flex-start;
}

 .successes ul li div.metric div ul{
    justify-content: center;
    justify-content: space-evenly;
 }

.successes ul li a div ul li{
	width:47%;
}

.successes ul li div.study div ul li, .successes ul li div.metric div ul li{
    /*padding-right: 3%;*/
    margin: 0 auto;
    margin-right: 0;
    margin-left: 0;
    width: auto;
   /*border-right: var(--gray-0-ap1) solid .01rem;*/
}

.successes ul li div.metric div ul li{
    /*padding-left: 4%;
    padding-right: 4%;
    margin-left: 0;*/
    margin-bottom: 2rem;

}

.successes ul li div.study div ul li.borderDiv, .successes ul li div.metric div ul li.borderDiv{
    display: inline-block;
    padding-right: 0;
    height: max-content;
    height: stretch;
    height: -webkit-fill-available;
    max-height: max-content;
    width: 0rem;
    border-right: var(--gray-0-ap1) solid .01rem;
}


.successes ul li div.metric div ul.statS li{
    
}

/*
.successes ul li div.metric div ul.statS li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -5px; /* Centers the divider directly in the middle of your flex gap */
  /*top: 10%;
  height: 80%;
  width: .01rem;
  background-color: var(--gray-0-ap1);
}*/

.successes ul li div.study div ul li:last-child, .successes ul li div.metric div ul li:last-child{
    border-right: none;
}

.successes ul li div.study div ul.CSHeader li{
	width:100%;
}


.successes ul li a div ul li p, .successes ul li div.study div ul li p, .successes ul li div.metric div ul li p{
    margin:0;
}

.successes ul li a div ul li p.stat, .successes ul li div.study div ul li p.stat, .successes ul li div.metric div ul li p.stat{
    font-size: var(--fs-2rem);
    font-weight: 600;
}

.successes ul li div.metric div ul li p.stat{
        /*white-space: nowrap;*/
    text-align:center;
        color: var(--gray-222);
}

.successes ul li a div ul li p.statDeet, .successes ul li div.study div ul li p.statDeet, .successes ul li div.metric div ul li p.statDeet{
    font-style: italic;
    text-align: center;
    font-size: var(--fs-1rem);
}

.successes ul li div.metric div ul li p.statDeet{
    text-align: center;
    line-height: 1.3rem;
    text-wrap: pretty;
}

.successes div.study p.statLanding{
    height: 1rem;
    /* padding-left: 2rem; */
    padding-top: 0;
    font-style: italic;
    font-size: var(--fs-1rem);
    margin-bottom: 0;
}

.successes div.study p.statLandingDeet{
    height: 5rem;
    font-size: var(--fs-1p7rem);
    font-weight: 800;
    
}


.articleS ul li a.article div.blogThumb img{
	filter: grayscale(1);
	transition: all var(--motion-fast);
}

.successes ul li div.successThumb a.CSButton{
    margin-top: 1.3rem;
    font-weight: 300;
    font-style: italic;
    font-size: var(--fs-1p1rem);
    width: auto;
    /*width: fit-content;*/
    padding: 1rem 1.5rem 1rem 1.5rem;
    background-color: var(--gray-fff);
    border-radius: .5rem;
    border: var(--gray-180-a1) 0.1em solid;
    color: var(--gray-140-a1);
    transition: all var(--motion-fast);
	    
}

.successes ul li div.successThumb a.CSButton:hover{
	border: rgba(var(--color-brand-rgb), 1) 0.1em solid; 
	padding: 1.2rem 1.7rem 1.2rem 1.7rem;
	color: rgba(var(--color-brand-rgb), 1);
}

.successes:hover ul li div.successThumb img{
	
}


.successes ul li div.successThumb img{
		transition: all var(--motion-fast);
	    max-width: 20rem;
	    width: -webkit-fill-available;
}

.successes ul li div.successThumb img.bordr{
    border-radius: .5rem;
    border: var(--gray-0-ap17) solid .01rem;
}






.articleS ul li a.article h4, .successes ul li a h4, .successes ul li div.study h4{
	margin: 0;
    font-weight: 400;
    font-size: var(--fs-1p6rem);
    line-height: 2rem;
    text-align: left;
    transition: all var(--motion-fast);
}

.articleS ul li a.article p, .successes ul li a p{
	line-height: 1.9rem;
    font-size: var(--fs-1p3rem);
    transition: all var(--motion-fast);
}

.articleS ul li a.article p.readTime, .successes ul li a p.readTime{
	margin-top: .5rem;
    margin-bottom: 0;
    font-style: italic;
    font-size: var(--fs-1rem);
}

.articleS ul li a.article:hover p, .articleS ul li a.article:hover h4{
	color: rgba(var(--color-brand-rgb), 1);

}

.articleS ul li a.article:hover div.blogThumb img{
	filter: grayscale(0);
}



.border{
	border: var(--gray-180-ap4) 0.1em solid;
    border-radius: .5rem;
    transition: border var(--motion-base);
}

.border:hover{
	border: rgba(var(--color-brand-rgb), 1) 0.1em solid; 
}

.caseStudies ul.fullWidth li a{
    justify-content: flex-start;
	overflow:scroll;
	/*display: inline-block;*/
}

.caseStudies div.study div p a{
    font-style: italic;
    border-bottom: none;
}

.blog ul.fullWidth li a{
    width: 100%;
    width: -webkit-fill-available;
}

.caseStudies ul.shorterHeight li a{
	min-height: fit-content;
}

.caseStudies ul.sameGroup{
	margin-top: 0rem;
}

a.cropped{
	max-height: 22rem;
}

a.video{
	max-height: 25.5rem;
	width:auto;
}

.caseStudies ul li a.video {
	max-height: fit-content;
}



a.video video{
	width:100%;
}

.caseStudies ul.fullWidth{
    display:block;
}

.caseStudies ul.shorter{
    margin-top:1rem;
}


li.button a path.cls-3, li.button button a path.cls-3{
	fill: var(--gray-80-a1);
	stroke: transparent;
}



li.button a:hover, #career button a:hover{
    border: rgba(var(--color-brand-rgb), 1) 0.1em solid; 
    color: rgba(var(--color-brand-rgb), 1);
 	padding-left:.85rem;
 	padding-right:.85rem;
 
}





.caseStudies ul.fullWidth p.label, .caseStudies p.label {
    font-size: var(--fs-1rem);
	font-style: oblique;
    text-align: center;
    margin: 0 auto;
    margin-top: .5rem;
    margin-bottom: 1rem;
    line-height: 1.5rem;
    
}

.homer ul.fullWidth p.label{
    margin-top: -.5rem;
    font-size: var(--fs-1rem);
    width: 100%;
    font-style: italic;
    font-weight: 400;


}



.caseStudies ul.fullWidth p.arrow, .caseStudies p.arrow {
	font-size: var(--fs-1p2rem);
	font-style:normal;
}

 .caseStudies p.label {
    margin-top: -1rem;
}


 .caseStudies li a{
    background-repeat: no-repeat;
    transition: all var(--motion-base);
}

.landing .caseStudies li a, ul.vertCards li a{
    min-height: 23rem;
    cursor: pointer;
}

 .caseStudies ul li a img{
	width: 100%;
	height: 100%;
}

 .caseStudies ul li a img.thumb{
	width: 21rem;
}


.caseStudies ul li a.o4a{
	background-image: url(../images/CompanyVisuals/Agents/thumb.png);
    background-size: 36rem;
    filter: grayscale(1);
    background-position: 1% 50%;
}

.caseStudies ul li a.o4a:hover{
    background-size: 38rem;
    filter: none;
}

.caseStudies ul li a.o4aRV{
	background-image: url(../images/CompanyVisuals/Agents/RV_thumb.png);
    background-size: 23rem;
    filter: grayscale(1);
    background-position: 100% 100%;
    min-height: 23rem;
}

.caseStudies ul li a.o4aRV:hover{
    background-size: 25rem;
    filter: none;
}

.caseStudies ul li a.ssConvo{
	background-image: url(../images/CompanyVisuals/SelfServe/convo_thumb.png);
    background-size: 21rem;
    filter: grayscale(1);
    background-position: 0% 0%;
    min-height: 23rem;
}

.caseStudies ul li a.ssConvo:hover{
    background-size: 23rem;
    filter: none;
}

.caseStudies ul li a.o4aLCS{
	background-image: url(../images/CompanyVisuals/Agents/LC_thumb.png);
    background-size: 23rem;
    filter: grayscale(1);
    background-position: 100% 100%;
    min-height: 23rem;
}

.caseStudies ul li a.o4aLCS:hover{
    background-size: 25rem;
    filter: none;
}

.caseStudies ul li a.ss{
    background-image: url(../images/CompanyVisuals/SelfServe/thumb.png);
    background-size: 24rem;
    filter: grayscale(1);
    background-position: 99% 40%;
}

.caseStudies ul li a.ss:hover{
    background-size: 26rem;
    filter: none;
}

.caseStudies ul li a.vce{
    background-image: url(../images/CompanyVisuals/Voice/thumb.png);
    background-size: 22rem;
    filter: grayscale(1);
    background-position: 1% 50%;
}

.caseStudies ul li a.vce:hover{
    background-size: 24rem;
    filter: none;
}


.caseStudies ul li a.e470{
    background-image: url(../images/CompanyVisuals/Usability/thumb.jpg);
    background-size: 39rem;
    filter: grayscale(1);
    background-position: 101% 50%;
}

.caseStudies ul li a.e470:hover{
    background-size: 40rem;
    filter: none;
}

.caseStudies ul li a.journals{
    background-image: url(../images/CompanyVisuals/ImpactJournals/thumb.jpg);
    background-size: 39rem;
    filter: grayscale(1);
    background-position: 100% 41%;
}

.caseStudies ul li a.journals:hover{
    background-size: 40em;
    filter: none;
}

.caseStudies ul li a.exRedesign{
    background-image: url(../images/CompanyVisuals/Exadel/web/thumb.jpg);
    background-size: 40rem;
    filter: grayscale(1);
    background-position: 101% 40%;
}

.caseStudies ul li a.exRedesign:hover{
    background-size: 41rem;
    filter: none;
}

.caseStudies ul li a.financial{
    background-image: url(../images/CompanyVisuals/FinancialEnterprise/thumb.jpg);
    background-size: 34rem;
    filter: grayscale(1);
    background-position: 101% 5%;
}

.caseStudies ul li a.financial:hover{
    background-size: 35rem;
    filter: none;
}

.caseStudies ul li a.CALm{
    background-image: url(../images/CompanyVisuals/CalMatters/Landing_@2x.jpg);
    background-size: 34rem;
    filter: grayscale(1);
    background-position: 101% 5%;
}

.caseStudies ul li a.CALm:hover{
    background-size: 35rem;
    filter: none;
}

.caseStudies ul li a.gator{
    background-image: url(../images/CompanyVisuals/Gatorade/swtb/thumb.png);
    background-size: 23rem;
    filter: grayscale(1);
    background-position: 1% 50%;
}

.caseStudies ul li a.gator:hover{
    background-size: 25rem;
    filter: none;
}

.caseStudies ul li a.vans{
    background-image: url(../images/CompanyVisuals/Vans/web/thumb.png);
    background-size: 23rem;
    filter: grayscale(1);
    background-position: 1% 50%;
}

.caseStudies ul li a.vans:hover{
    background-size: 25rem;
    filter: none;
}

.caseStudies ul li a.threeM{
    background-image: url(../images/CompanyVisuals/3M/008.jpg);
    background-size: 23rem;
    filter: grayscale(1);
    background-position: 1% 50%;
}

.caseStudies ul li a.threeM:hover{
    background-size: 25rem;
    filter: none;
}

.caseStudies ul li a.VSA{
    background-image: url(../images/CompanyVisuals/VSA/web/home_dateSelection_thumb.jpg);
    background-size: 23rem;
    filter: grayscale(1);
    background-position: 1% 50%;
}

.caseStudies ul li a.VSA:hover{
    background-size: 25rem;
    filter: none;
}


.leader ul li p.label{
	margin-top: 0;

}

.caseStudies ul li a.enlargedScroll{
	max-height: none;
    padding-bottom: 100px;
    padding: 50px;
    display: block;
    margin: 0 auto;
    height: 100%;
    text-align: center;
    background-color: var(--gray-100-ap8);
    position: fixed;
    top: -1%;
    left: -1%;
    border: #ff4200 solid .01em;
    z-index: 10000;
    box-shadow: 0px 0px 50px 0px var(--gray-0-a0p3);
}

.caseStudies ul li a.enlargedScroll video{
	width:94%;
	height:93%;
}

.caseStudies ul li a.video {
	width:100%;
	padding:0px;
}

.caseStudies ul li a.enlargedScroll img{
	height:auto;
}

.caseStudies ul li a.enlarged {
	max-height: none;
    padding-bottom: 100px;
    padding: 50px;
    display: block;
    width: 95%;
    margin: 0 auto;
    height: 100%;
    text-align: center;
    background-color: var(--gray-100-ap8);
    position: fixed;
    top: -1%;
    left: -1%;
    border: #ff4200 solid .01em;
    z-index: 10000;
    box-shadow: 0px 0px 50px 0px var(--gray-0-a0p3);
}


.caseStudies ul li a.enlarged img {
    width: auto;
    height: inherit;

}

.caseStudies ul li a.enlarged img.vertHeight{

}





.caseStudies ul li a.vertHeight img{

}


li button:hover, li span:where(.careerLink):hover{
	/*background-image: linear-gradient(rgba(var(--color-brand-rgb), 1), rgba(255, 130, 13, 1));*/

}

#career button{
    background: none;
    border: none;
    width:auto;
    margin-top: 2rem;
}

#career button a{
	width:auto;
	margin-right:0px;
	padding-left:.85rem;
 	padding-right:.85rem;
}

#career button a:hover{
	padding-left:1.85rem;
 	padding-right:1.85rem;
}


/*--- Button SVG---*/

li.button a img, li.button a svg, #career button a svg, li.button button svg{
	margin-left: .6rem;
    display: inline-block;
    vertical-align: text-top;
    height: 1.7rem;
    transition: all var(--motion-base);
}

li.button a:hover svg,  #career button a:hover svg{
	margin-left: 1.5rem;
	margin-right:-.9rem;
}

li.button a:hover svg.rotated{
	margin-left: .6rem;
	margin-right:0rem;
	margin-top:.5rem;
	margin-bottom:-.5rem;
}

a.return, a.return div.Back2Top, a.return div.Back2Top svg, a.return div.Back2Top div.b2t{
	transition: all var(--motion-base);
}

a.return:hover div.Back2Top svg{
	margin-bottom:.5rem;
	opacity:1;
}

a.return:hover div.Back2Top{
    top: 86%;
    border-radius: .5rem;
    background-color: var(--gray-255-ap5);     
    border: solid rgba(var(--color-brand-rgb), 1) .1rem;

}

a.return:hover div.Back2Top div.b2t{
	color:rgba(var(--color-brand-rgb), 1);
}


.cls-1 {
        fill: none;
      }

.cls-2 {
        /*clip-path: url(#clippath);*/
      }

.cls-3 {
      }

.cls-4 {
        opacity: .5;
      }

li.button a:hover svg .cls-3,li.button a:hover svg .cls-4, a.return div.Back2Top svg .cls-3, a.return div.Back2Top svg .cls-4{
	transition: all var(--motion-base);
}


li.button a:hover svg .cls-3, #career button a:hover svg .cls-3, a.return:hover div.Back2Top svg .cls-3{
 fill: rgba(var(--color-brand-rgb), 1);
}

li.button a:hover svg .cls-4,  #career button a:hover svg .cls-4{
 opacity: .8;
}



li.button a img.rotated, li.button a svg.rotated{
    rotate: 90deg;
}



/*--- About ---*/

div.Back2TopShell{
	height:0;
    position: sticky;
    top: 100%; /* pinned to the viewport bottom; div.Back2Top lifts itself above it */
    left: 100%;
    z-index:10000;
}

/* Without this the inline-block link sits on the shell's text baseline,
   ~15px below the shell's pinned bottom edge. */
div.Back2TopShell > a.return{
    vertical-align: top;
}

/* Short pages (contact, success) hold the button directly in <body> so it
   stays pinned to the end of the page. There's no content padding to
   absorb the mobile -20px margin-right, so keep it 1rem from the edge. */
body > div.Back2TopShell div.Back2Top{
    margin-right: 1rem;
}

a.landing div.Back2Top{

}

div.Back2Top{
    display: flex;
    width: 3rem;
    flex-direction: column;
    align-content: center;
    justify-content: space-around;
    padding: .2rem;
    padding-top: .8rem;
    padding-bottom: .4rem;
    align-items: center;
    border-radius: .5rem;
    background-color: var(--gray-255-ap5);     
    border: solid var(--gray-0-a0p2) .1rem;
    float:right;
    margin-right:1rem;
   	z-index: 100000;
    /* Sits above the viewport bottom by its own height plus 1rem, at any window height. */
    transform: translateY(calc(-100% - 1rem));
}

a.return{
	text-decoration:none;
	position: sticky;
    top: 100%;
    left: 100%;
    display: inline-block;
    height: 0rem;
    z-index:100000;
}

div.Back2Top .b2t{
    margin-top: .5rem;
    color:var(--gray-180-a1);
}


div.Back2Top .b2t span{
	display: block;
	font-weight: 100;
    font-family: "Satisfy", cursive;
    font-size: var(--fs-1rem);
}

div.Back2Top svg{
	rotate:-90deg;
	margin-bottom:0rem;
	opacity:.5;
}

div.Back2Top svg .cls-4 {
    opacity: .8;
    
}

#leadership{
    margin-top: 1rem;
	display: flex;
    vertical-align: top;
    align-items: flex-start;
}

div.resume{
    text-align: center;
    margin: 0 auto;
    max-width: 1120px;
    margin-bottom: 0rem;
}

div.resume ul{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 3rem;
}

div.resume ul.resItem{
	/*margin-top:3rem;*/
	padding-bottom: 3.5rem;
	border-bottom: solid .01rem var(--gray-ddd);
	flex-wrap: nowrap;
}

div.resume ul.resItem:last-of-type{
	border-bottom:none;
}

div.resume ul li{
	text-align:left;
	padding: 0px;
    margin: 0px;
    margin-right: 3rem;
}


div.resume ul li div.logoRes{
    border-radius: .7rem;
    border: var(--gray-190-a1) 0.1em solid;
    height: 17rem;
    display: flex;
    padding: 2rem;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding-top: 2.3rem;
    /* width: 75%; */
    transition: all var(--motion-base);
    overflow: clip;
    filter: grayscale(1);
}

div.resume ul li div.logoRes:hover{
	cursor: pointer;
	border: rgba(var(--color-brand-rgb), 1) 0.1em solid;
	filter: grayscale(0);
	
}

div.resume ul li div.logoRes span{
	transition: all var(--motion-fast);
}

div.resume ul li div.logoRes:hover span{
	color: rgba(var(--color-brand-rgb), 1);
}

div.resume ul li div.logoRes:hover img{
	width:
}

div.resume ul li.bullets, div.resume ul li.bullets li{
	margin: 0;
}

div.resume ul li.bullets{
	width: 62%;
}


div.resume ul li h4, div.resume ul li p, div.resume ul li{
	color: var(--gray-666);
    font-weight: 300;
    line-height: 2rem;
}

div.resume ul li h4{
	font-family: 'Lato';
    font-size: var(--fs-1p5rem);
    margin: 0px;
    font-style:italic;
}

div.resume ul li p, div.resume ul li{
	width: fit-content;
    font-size: var(--fs-1p2rem);
}

div.resume ul li p span, div.resume ul li span{
	font-style:italic;
	font-size: var(--fs-1rem);
    font-weight: 300;
    color: var(--gray-aaa);
    display: block;
}

div.resume ul li p.timeline span{
	display:inline-block;
}

div.resume ul li p.timeline{
	font-size: var(--fs-1rem);
	margin-top: 0;
    margin-bottom: .5rem;
}

div.resume ul li p.role{
	margin-bottom: 0;
	margin-top:.5rem;
    font-size: var(--fs-1p7rem);
}


div.resume ul li div.logo{

}




div.resume ul li div.logo p{
    color: rgba(var(--color-brand-rgb), 1);
    font-size: var(--fs-1rem);
    height: 0px;
    /*position: absolute;*/
    top: 11rem;
    /*visibility: hidden;*/
    /*opacity: 0;*/
    width: 100%;
    margin: 0;
    transition: all var(--motion-base);
    
    margin-top: -3rem;
    margin-bottom: 2rem;
}


div.resume ul a:hover, div.resume ul a{
	text-decoration: none;
}

div.resume ul li.prods ul.prodButtons{

}

div.resume ul li.prods ul.prodButtons li{

}

div.resume ul li.prods ul.prodButtons li a{

}

div.resume ul li div.logo{
	/*filter: grayscale(1);*/
	height: auto;
	transition: all var(--motion-base);
}


div.resume ul li div.logo img{
	max-width: 19rem;
	max-height: 15rem;
	margin-top: -2rem;
}



div.resume ul li div.logo svg path.cls-1{
	fill:var(--gray-222);
}

div.resume ul li div.logo svg path.inner{
	fill:var(--gray-fff);
}

div.resume ul ul{
	text-align:left;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 0px;
}

div.resume ul ul li{
	/*list-style: circle;*/
}

div.resume ul li.bullets li{
	/*margin-left: 1.3rem;*/
	    line-height: 1.4rem;
}

div.resume ul li.bullets li.noBullets{
	list-style:none;
	margin-left:0;
	width: 100%;
}

div.resume ul li.bullets li ul.resTags{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

div.resume ul li.bullets li ul.resTags li{
	font-size: var(--fs-p9rem);
    display: inline-block;
    margin: 0;
    margin-right: 1rem;
    width: fit-content;
    padding: .2rem .6rem .1rem .6rem;
    background-color: var(--gray-eee);
    border-radius: .7rem;
    color: var(--gray-140-a1);

}

div.resume ul li.bullets li ul.statS{
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    
}


div.resume ul li.bullets li ul.statS li{
    margin: 0;
    color:var(--gray-444);
    font-weight: 400;
} 

div.resume ul li.bullets li ul.statS li span{
	font-size: var(--fs-1rem);
    display: block;
	line-height: 1.3rem;
	color:var(--gray-aaa);
	font-weight: 300;
}

div.resume ul li.bullets li ul.statS li.teamStat{
	display: flex;
    border: solid var(--gray-ddd) .1rem;
    padding: .2rem .4rem;
    margin-right: 1rem;
    width: 7rem;
    /* min-width: 16%; */
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
} 

div.resume ul li.bullets li.contributions{
    margin-bottom: 1rem;
    font-size: var(--fs-1p1rem);
    font-weight: 300;
    color: var(--gray-444);
    line-height: 1.4rem;
}

div.resume ul li.bullets li.topMargin{
    margin-top: 1rem;
}

div.resume ul li.bullets li.contributions span{
	font-size:var(--fs-1rem);
	font-weight:300;
	color:var(--gray-aaa);
	display:block;
}

div.resume ul li.bullets li ul.statS li p{
	margin:0;
	line-height: 1.6rem;
} 

div.resume ul li.bullets li ul.statS li p.stat{
    font-size: var(--fs-1p3rem);
    font-weight: 400;
} 

div.resume ul li.bullets li ul.statS li p.statDeet {
    font-style: italic;
    width: 115%;
    text-align: center;
    font-size: var(--fs-1rem);
} 

div.resume ul li.bullets li ul.prodButtons{
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}

div.resume ul li.prods ul.prodButtons{
	display: flex;
    margin-top: 1.5rem;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-evenly;
    align-items: center;
    width: 27rem;
}



div.resume ul li.bullets li ul.prodButtons li, div.resume ul li.prods ul.prodButtons li{
	margin:0;
	margin-left: .5rem;
    margin-right: .5rem;
    width: auto;
}

div.resume ul li.prods ul.prodButtons li{
	margin-bottom: 1.5rem;
    /* margin: 0; */
    width: fit-content;
}

div.resume ul li.bullets li ul.prodButtons li a, div.resume ul li.prods ul.prodButtons li a{
    font-weight: 300;
    font-style: italic;
    font-size: var(--fs-1p1rem);
    width: auto;
    padding: .3rem 1rem .3rem 1rem;
    background-color: var(--gray-fff);
    border-radius: .5rem;
    border: var(--gray-190-a1) 0.1em solid;
    color: var(--gray-140-a1);
    transition: all var(--motion-fast);
}


div.resume ul li.prods ul.prodButtons li a{
    padding: .6rem 1rem .6rem 1rem;
}

div.resume ul li.prods ul.prodButtons li a:hover{
	cursor: pointer;
	border: rgba(var(--color-brand-rgb), 1) 0.1em solid;
	color:rgba(var(--color-brand-rgb), 1);
	font-size:var(--fs-1p15rem);
}

div.about{ 
	max-width: 1080px;
	margin: 0 auto;
	z-index: 1000;
	width:100%;
}

div.about ul{

}

div.about ul.bio li h2{
	color: var(--gray-666);
    padding-left: 2rem;
    width: 100%;
    text-align: left;
	max-width:45rem;
}

div.about ul.bio{
    display: flex;
    margin-top: 3rem;
    margin-right:0px;
    width:100%;
}

div.about ul.bio::before {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    z-index: -1;
    background: url(../images/watercolor_lighter.png) 0 0 no-repeat;
    transform: rotate(00deg);
    opacity: .7;
    background-size: 19%;
    background-position: -1% 0rem;
}

div.about ul.bio li{
    display: flex;
    width: fit-content;
    list-style: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: center;
}

div.about ul.bio li p{
	max-width: 45rem;
	color: var(--gray-666);
	font-size: var(--fs-1p4rem);
    font-weight: 300;
    line-height: 2rem;
    padding: 0px 2rem;
    padding-right: 4rem;
}

div.resume h2{
	font-size: var(--fs-3p5rem);
    margin-top: 6rem;
	color: var(--gray-666);
    width: 100%;
    text-align: left;
	max-width:45rem;
}


div.resume p.experience{
    font-style: italic;
    line-height: 2rem;
	font-size: var(--fs-1p1rem);
	width:100%;
	font-weight: 300;
	color: var(--gray-444);
	text-align:left;
	margin-bottom: -1.5rem;
}

div.resume p.experience a{
	text-decoration: none;
    font-weight: 400;
    border-bottom: var(--gray-ccc) solid .1rem;
    color: var(--gray-20-a1);
    transition: color var(--motion-base);
}

div.resume p.experience a:hover {
    color: rgba(var(--color-brand-rgb), 1);
}


div.about ul.bio li p.education{
    padding: 0;
    padding-top: 2rem;
    padding-left: 2rem;
    margin: 0;
    font-style: italic;
    font-size: var(--fs-1p1rem);
    width: 17rem;
}

div.about ul.bio li p.education img{
	opacity: .6;
	display:inline-block;
}

div.about ul.bio li p.education img.virginiaTech{
	width: 1.8rem;

}

div.about ul.bio li p.education img.SCAD{
    width: 3.7rem;
    
}




div.about img.dashed{
	display:none;
    text-align: center;
    margin: auto;
    max-width: 1060px;
    position: absolute;
    margin-top: -22px;
    margin-left: 5rem;
}

section.landing header div.intro ul.treeBadge{
	margin-top:-6.5rem;

}

li.badge img.aboutIntro{
	position: absolute;
    margin-top: -39px;
    margin-left: -4px; 
}

div.intro li.badge img.aboutIntro{
    margin-bottom: -.6rem;
    margin-left: -1.6rem;
    position: unset;
    margin-top:0rem;
}


div.about, div.about div{
	text-align: left;
}

div.years span{
    display: flex;
    padding-left: .1rem;
    font-weight: 100;
    font-family: "Satisfy", cursive;
    font-size: var(--fs-p85rem);
}

div.intro div.years span{
	display: flex;
    padding-left: .1rem;
    font-weight: 100;
    font-family: "Satisfy", cursive;
    font-size: var(--fs-1p2rem);
    line-height: 1rem;
    height: min-content;
}

div.intro div.years span.designing{
    font-size: var(--fs-p9rem);
    font-style: normal;
    font-weight: 600;
    font-family: "Lato", sans-serif;
    font-variant: all-small-caps;

}

div.years{
    padding-left: 10px;
    padding-bottom: 10px;
    margin: -.1rem;
    background-color: var(--gray-fff);
    width: 43px;
    font-size: var(--fs-1p7rem);
    font-weight: 300;
    border-left: var(--gray-222) solid 0.1rem;
    border-right: var(--gray-222) solid 0.1rem;
    border-bottom: var(--gray-222) solid 0.1rem;
}

div.intro div.years{
	padding-right:10px;
	padding-top: .5rem;
    line-height: 2.2rem;
    padding-left: 10px;
    padding-bottom: 10px;
    margin: -.1rem;
    background-color: var(--gray-fff);
    width: 43px;
    font-size: var(--fs-2p3rem);
    font-weight: 300;
    border-left: var(--gray-20-ap4) solid 0.1rem;
    border-right: var(--gray-20-ap4) solid 0.1rem;
    border-bottom: var(--gray-20-ap4) solid 0.1rem;
}


div.about img.profilePic{
	width: 20rem;
    opacity: 1;
    transition: all var(--motion-base);
}


div.about a.profilePicShell:hover img.profilePic{
    opacity: 0;
    transition: all var(--motion-base);
}

div.about img.profilePicClr{

	opacity: 0;
    position: absolute;
    margin-left: -20rem;
    width: 20rem;
    transition: all var(--motion-base);
}

div.about a.profilePicShell:hover img.profilePicClr{
    opacity: 1;
    transition: all var(--motion-base);
}

div.about a.profilePicShell{
	transition: all var(--motion-base);
}

/*--- Experience Nav ---*/

.tab {
    /*overflow: hidden;*/
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: flex-end;
    border-bottom: var(--gray-666) solid .07rem;
    padding-bottom: 10px;
    background-color: var(--gray-fff);
}

.floatNav{
	width: fit-content;
	
}

.sticky-container .floatNav{

}

.floatNav .tab {
    overflow: visible;
    border-radius: .5rem;
    padding: 1rem;
	height: fit-content;
	border: none;
	background-color: transparent;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: start;
	align-items: start;
  	box-shadow: none;
  	z-index: 1;
}



.floatNav .tab button.dropdown{
	display:inline-block;
	text-align:left;
}

.floatNav .tab button.dropdown img, .floatNav .tab button.dropdown svg{
	width:4rem;
	opacity:.7;
	
}

.floatNav .tab button.dropdown svg, .floatNav .tab button.dropdown svg .cls-1, .floatNav .tab button.dropdown svg .cls-2, .floatNav .tab button.dropdown svg .cls-3{
	transition:all var(--motion-base);
	overflow: visible;
}

.floatNav:hover .tab button.dropdown img, .floatNav:hover .tab button.dropdown svg, .floatNav:hover .tab button.dropdown svg .cls-2, .floatNav:hover .tab button.dropdown svg p{
	color: rgba(var(--color-brand-rgb), 1);
	fill: rgba(var(--color-brand-rgb), 1);
}

.floatNav .tab button.dropdown svg .cls-1{
	fill: var(--gray-50-a1);
}

.floatNav:hover .tab button.dropdown svg .cls-3, .floatNav:hover .tab button.dropdown svg .cls-1, .floatNav:hover .tab button.dropdown svg .cls-2{
	stroke: rgba(var(--color-brand-rgb), 1);
}

.floatNav:hover .tab button.dropdown svg .cls-1{
	fill: rgba(var(--color-brand-rgb), 1);
}




.floatNav .hide{
	display:none;
}


.mainNav{
	width:100%;
    padding-top: .7rem;
}

.int .mainNav{
    padding-top: 0;
	width: 94%;
}

.mainNav .tab{
    z-index: 100;
	border:none;
	background-color:transparent;
	width:85%;
	padding: 0;
	box-shadow:none;
        margin-bottom: .6rem;
}

.interior .mainNav .tab{
	/*width:92%;*/
        /*margin-bottom: .6rem;*/

}


.sticky-container{
	top: 0;
    z-index: 9098;
    height: 60px;
    position: sticky;
}

.sticky-nav{
	top: -10px;
    z-index: 9099;
    left:0;
    margin-left:-1.5rem;
    height: 0px;
    position: sticky;
}

.tab button.dropdown{
	display:none;
}

.tab button.dropdown span{
    margin-left: 1rem;
    padding: .2rem .4rem;
    border-radius: .5rem;
    border: var(--gray-120-ap3) .12rem solid;
}

button, .tab button, .tab > span, span:where(.careerLink){
	background:none;
	border:none;
}

/* Every image and video carries its real pixel size as width/height
   attributes (added at build time, astro/integrations/media-size.mjs), so
   the browser reserves its space before the file arrives and the page
   doesn't jump as images load (Phase 2b step 8). Those attributes would
   also fix the height, so wherever CSS sets only the width the height
   follows the proportions instead, as before. :where() keeps this at zero
   specificity, so any rule that sets a height still wins. */
:where(img[width][height], video[width][height]) {
	height: auto;
}

/* Nav items are <span class="tablinks"> wrappers (Phase 2b step 4: they
   were <button>s around links, which hid the links from screen readers and
   made two Tab stops per item). These are the browser's own button styles
   that the site never overrode, so the items look exactly as before.
   :where() keeps this at zero specificity, like browser defaults. */
:where(.tab > span.tablinks) {
	padding: 1px 6px;
	box-sizing: border-box;
	cursor: default;
	letter-spacing: normal;
}

/* Same for the mega menu's "View my full career journey" (a <span> since
   the same change; it sits in the dark menu, so its button text color,
   centering and inline-block need restoring too). */
:where(span.tablinks.careerLink) {
	display: inline-block;
	padding: 1px 6px;
	box-sizing: border-box;
	cursor: default;
	letter-spacing: normal;
	text-align: center;
	color: buttontext;
}



.tablinks{
	transition: all var(--motion-fast);
}

div.primeButtons, div.showMore{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}

div.showMore{
    position: relative;
    z-index: 1001;
    box-shadow: 0px -10px 21px 0px var(--gray-255-a0p9);
    margin-top: 0rem;
    padding-top: 2rem;
    border-top: solid .01rem var(--gray-20-ap3);
}

.int div.showMore {
    margin-bottom: 4rem;
}

ul#cardList{
    overflow: hidden;
}

/* Show more / Show less (Phase 2b step 5b): the list opens and closes
   with the same grid-template-rows technique and timing as the mega
   menu's project sections. The wrapper is a two-row grid the list spans:
   row 1 is the collapsed height (1.5 cards, measured by show-more.js),
   and the panel clips the list to the rows' height;
   row 2 grows 0fr -> 1fr, i.e. to exactly the rest of the list's real
   height. Opening takes --motion-base; closing is a little quicker (0.7x).
   Reduced motion: the tokens are ~0, so it simply opens/closes. Until the
   script runs (or without JavaScript) the wrapper is a plain block and
   the whole list shows, as before.
   The wrapper must not change the layout around the list: it opts out of
   the centered flex layout `section header div` gives every div on the
   homepage, and while it's a grid it carries the list's own margins (a
   grid keeps its items' margins inside, so they'd no longer merge with the
   neighbors' margins the way the list's did). */
.cardListPanel {
    display: block;
    align-items: normal;
    align-content: normal;
    justify-content: normal;
    flex-wrap: nowrap;
    flex-direction: row;
}

.cardListPanel.collapsible {
    display: grid;
    grid-template-rows: var(--collapsed-height) 0fr;
    margin-top: var(--list-margin-top);
    margin-bottom: var(--list-margin-bottom);
    overflow: hidden;
    transition: grid-template-rows calc(var(--motion-base) * 0.7) var(--ease-cubic);
}

.cardListPanel.collapsible.expanded {
    grid-template-rows: var(--collapsed-height) 1fr;
    transition: grid-template-rows var(--motion-base) var(--ease-cubic);
}

/* The list keeps its natural height (start, not stretched to the grid
   area: its cards use height: stretch and would grow to fill it); the
   panel clips it to the rows' height. */
.cardListPanel.collapsible > ul#cardList {
    grid-row: 1 / 3;
    align-self: start;
    margin-top: 0;
    margin-bottom: 0;
}

.introBlurb button, div.showMore button{
    border: var(--gray-10-ap9) 0.04em solid;
    margin-right: 2rem;
    padding: 0;
    border-radius: .5rem;
    background-color: var(--gray-255-a0);
}

.introBlurb button{
        margin-bottom: 1rem;
        border:none;
}

button#expandBtn{
    display: block;

}

button#collapseBtn{
    display: none;
    
}

div.primeButtons button:first-child{
/*background-color: var(--gray-41);*/
}

div.primeButtons button:first-child a{
background-color: var(--gray-41);
color: var(--gray-fff);
}

div.primeButtons button:first-child a:hover{
color: rgba(var(--color-brand-rgb), 1);
background-color: var(--gray-255-a1);
}

div.primeButtons button:first-child:hover {
/*background-color: rgba(var(--color-brand-rgb), 1);*/
}



/* :not(:where(.accordion)) keeps "About" accordion links styled as body copy links, at the same specificity */
button:not(:where(.accordion)) a, span:where(.careerLink) a, .tab button a, .introBlurb button a, div.showMore button .btnLabel, .tab > span a{
  background-color: inherit;

  display: inline-block;
  border: var(--gray-180-a0) 0.1em solid;
  color: var(--gray-100-a1);
  outline: none;
  cursor: pointer;
  padding: .8rem .8rem;
  transition:all var(--motion-base);
  margin-top: 10px;
  text-decoration: none;
  font-weight: 500;
  font-style: italic;
  font-size: var(--fs-1p2rem);
}

.introBlurb button a, div.showMore button .btnLabel{
    margin-top: 0px;
    border-radius: .5rem;
    border: var(--gray-180-a0) 0.1em solid;
}

.introBlurb button a{
    border: var(--gray-100-a1) 0.1em solid;
}


/*------- Animated Glow Button ---*/

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* Reusable Global Component Class */

/* The pseudo-element consumes the variables automatically */

@keyframes spinGlow {
  to { --angle: 360deg; }
}

/*-------*/

.introBlurb button:hover a, div.showMore button:hover .btnLabel{
    
   color:rgba(var(--color-brand-rgb), 1) ;
   background-color: var(--gray-255-a1);
   /*
   box-shadow: 
    0 0 10px rgba(var(--color-brand-rgb), .6), 
    0 0 30px rgba(var(--color-brand-rgb), 0.3), 
    0 0 60px rgba(var(--color-brand-rgb), 0.1);*/


}

.introBlurb button:hover a::before{

}

.introBlurb button:hover a span, div.showMore button:hover .btnLabel span{
margin-left:.1rem;
}

.floatNav .tab button a, .floatNav .tab > span a{
	background-color:var(--gray-245-a1);
}

.mainNav .tab button a, .mainNav .tab > span a{
	padding: 0.6rem .8rem;
    font-size: var(--fs-1rem);
}

.mainNav .tab button a span, .mainNav .tab > span a span{
	display:inline-block;
	visibility:hidden;
	transition: all var(--motion-fast);
	width:0%;
	opacity:0;
}

.tab button.dropdown{
	background-color: inherit;
  border: var(--gray-180-a0) 0.1em solid; 
  color: var(--gray-140-a1);
  cursor: pointer;
  transition: all var(--motion-base); 
  text-decoration: none;
  font-weight: 300;
  font-style: normal;
  font-size: var(--fs-1p2rem);	
  padding: 0;
  margin-top: 0px;
  width:100%;
  position: relative;
}


button:not(:where(.accordion)) a:hover, span:where(.careerLink) a:hover, .tab button a:hover, .tab button a.current, div.showMore button:hover,
button:not(:where(.accordion)) a:focus-visible, span:where(.careerLink) a:focus-visible, .tab button a:focus-visible, div.showMore button:focus-visible, .tab > span a:hover, .tab > span a.current, .tab > span a:focus-visible{
    background-color: var(--gray-fff);
  border-radius: .5rem;
  border: rgba(var(--color-brand-rgb), 1) 0.07em solid;
  /*padding: .75rem .7rem;*/
  color: rgba(var(--color-brand-rgb), 1);
  /*
   box-shadow: 
    0 0 5px rgba(var(--color-brand-rgb), .6), 
    0 0 15px rgba(var(--color-brand-rgb), 0.3), 
    0 0 30px rgba(var(--color-brand-rgb), 0.1);
    */
}

/* Button glow (Phase 2b idea #1). A spinning gradient behind the button,
   outside its edge. Sequenced so the white background arrives first:
   hover-in  - background over --motion-base, glow fades in --motion-fast
               later (overlapping the background's last 0.2s);
   hover-out - glow fades over --motion-fast, then the background follows.
   Strength comes only from the --glow-* tokens below, so later tuning is a
   change of token values, not new rules. (Tony chose the current soft glow,
   option A, over a thin-stroke option B on 2026-10-15.) */
:root {
  --glow-color-1: rgb(255, 1, 136);
  --glow-color-2: rgb(255, 166, 0);
  --glow-speed: 4s;
  --glow-blur: 4px;
  --glow-spread: 2px;
  --glow-opacity: 0.6;
}

/* Every glow button is a positioning/3D context at rest (not only on
   hover), so the glow layer below can exist - invisible - before it's
   needed, and fade in rather than pop in. */
button:not(:where(.accordion)) a, span:where(.careerLink) a, .tab button a, div.showMore button, .tab > span a{
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
}

button:not(:where(.accordion)) a::before, span:where(.careerLink) a::before, .tab button a::before, div.showMore button::before, .tab > span a::before{
  content: "";
  position: absolute;
  inset: calc(var(--glow-spread) * -1);
  border-radius: calc(.5rem + var(--glow-spread));
  background: conic-gradient(
    from var(--angle),
    var(--glow-color-1),
    var(--glow-color-2),
    var(--glow-color-1)
  );
  z-index: -1;
  filter: blur(var(--glow-blur));
  transform: translateZ(-1px);
  pointer-events: none;
  opacity: 0;
  /* Paused while hidden, so fading out never snaps the angle back to 0. */
  animation: spinGlow var(--glow-speed) linear infinite paused;
  /* Leaving: the glow goes first. */
  transition: opacity var(--motion-fast) var(--ease-default);
}

/* Current page: glow always on, no sequence. */
.tab button a.current::before, .tab > span a.current::before{
  opacity: var(--glow-opacity);
  animation-play-state: running;
}

/* Keyboard focus: the same sequence as hover, on every device. */
button:not(:where(.accordion)) a:focus-visible::before, span:where(.careerLink) a:focus-visible::before, .tab button a:focus-visible::before, div.showMore button:focus-visible::before, .tab > span a:focus-visible::before{
  opacity: var(--glow-opacity);
  animation-play-state: running;
  transition: opacity var(--motion-base) var(--ease-default) var(--motion-fast);
}

@media (hover: hover) {
  /* Arriving: background first, glow --motion-fast later. */
  button:not(:where(.accordion)) a:hover::before, span:where(.careerLink) a:hover::before, .tab button a:hover::before, div.showMore button:hover::before, .tab > span a:hover::before{
    opacity: var(--glow-opacity);
    animation-play-state: running;
    transition: opacity var(--motion-base) var(--ease-default) var(--motion-fast);
  }

  /* Leaving: the background waits for the glow to fade. */
  button:not(:where(.accordion)) a, span:where(.careerLink) a, .tab button a, div.showMore button, .tab > span a{
    transition: all var(--motion-base) var(--ease-default) var(--motion-fast);
  }
  button:not(:where(.accordion)) a:hover, span:where(.careerLink) a:hover, .tab button a:hover, div.showMore button:hover, .tab > span a:hover{
    transition: all var(--motion-base) var(--ease-default) 0s;
  }
}
button:not(:where(.accordion)) a:focus-visible, span:where(.careerLink) a:focus-visible, .tab button a:focus-visible, div.showMore button:focus-visible, .tab > span a:focus-visible{
  transition: all var(--motion-base) var(--ease-default) 0s;
}

.mainNav .tab button a:hover, .mainNav .tab button a.current, .mainNav .tab > span a:hover, .mainNav .tab > span a.current{
    padding: .5rem .7rem;
    padding-left:.5rem;
    padding-right:1rem;
}

.mainNav .tab button a:hover span, .mainNav .tab button a.current span, .mainNav .tab > span a:hover span, .mainNav .tab > span a.current span{
	visibility:visible;
	opacity:1;
	transition: all var(--motion-fast);
	width:3%;
}


.mainNav .tab button.dropdown{
	text-align:left;
		height: 3rem;
}

.mainNav .tab button.dropdown svg{
	width: 3.7rem;
}




.tabcontent {
  animation: fadeEffect var(--motion-slow); /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}


/*----Work Mega Menu-----*/


div.megaMenu{
    padding-top: 3rem;;
    width: 100%;
    display: block;
    visibility: hidden;
    opacity: 0;
    top: 0%;
    left:0%;
    transform: translateY(-18px);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity var(--motion-base) var(--ease-cubic),
                transform var(--motion-base) var(--ease-cubic),
                visibility 0s var(--ease-linear) var(--motion-base);
    z-index: 1;
    position: fixed;
    text-align: left;
    margin: 0 auto;
    padding-bottom: 3rem;
    background-color: var(--gray-255-a0p9);
    background-image: url(../images/BGWatercolors.jpg);
    background-position: 0% 0%;
    background-size: cover;
    background-repeat: no-repeat;
    border-bottom:rgba(var(--color-brand-rgb), .7) solid .01rem;
    border-top:rgba(var(--color-brand-rgb), .7) solid .01rem;
}

div.megaMenu.isActive{
        z-index: 1000000;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity var(--motion-base) var(--ease-cubic),
                transform var(--motion-base) var(--ease-cubic),
                visibility 0s var(--ease-linear) 0s;
}

div.megaMenu .tablinks{

    position: relative;
    top: 1.2rem;
    /* position: absolute; */
    right: -45px;
}

div.megaMenu .tablinks.closer{
    position: absolute;
    left: 90%;
    right: auto;
    top: auto;
}

div.megaMenu button a, div.megaMenu span:where(.careerLink) a{
font-size: var(--fs-1rem);
background-color: var(--gray-255-ap2);
}
    

div.megaMenu ul{
    max-width: 1140px;
    padding-left: 2rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-around;
    align-items: flex-start;
    
}

div.megaMenu ul.containerUL{
padding-left: 4rem;

}

div.megaMenu ul li{
    margin: 0 auto;
    text-align: left;
    width: 47%;
    
}

div.megaMenu ul li.Stdies{
width: 30%;
    
}

div.megaMenu ul li.Prjs{
    width: 66%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    
}

div.megaMenu ul li.Prjs ul.colmns{
width:300px;
    
}

div.megaMenu ul li.Prjs ul.colmn {
    display:none;
}


div.megaMenu ul li h5, div.megaMenu ul li p{
    width: -webkit-fill-available;
     font-size:var(--fs-1rem);
     font-weight: 300;
    
}

div.megaMenu ul li h5{
    font-size: var(--fs-1p7rem);
    font-weight: 300;
    
}

div.megaMenu ul li p{
    font-style: italic;
    font-size: var(--fs-1rem);
    font-weight: 300;
    
}

div.megaMenu ul li ul{
    padding-left: 0;
    margin: 0 auto;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: flex-start;
    align-items: flex-start;
       width: 100%;
    padding-top: 1rem;
    border-top: var(--gray-20-ap15) solid .01rem;

}

div.megaMenu ul li ul li{
    color: var(--gray-20-ap9);
    width: 100%;
    margin-bottom: .5rem;
}

div.megaMenu ul li.Prjs ul li{
    margin-left:.2rem;
}



div.megaMenu ul li ul li a{
    color: var(--gray-20-ap8);

    text-decoration: none;
    font-weight: 400;
    border-bottom: var(--gray-ccc) solid .1rem;
    transition: color var(--motion-base);
    
}

div.megaMenu ul li ul li a:hover, div.megaMenu ul li ul li a:focus-visible{
color: rgba(var(--color-brand-rgb), 1);
border-bottom: rgba(var(--color-brand-rgb), 1) solid .1rem;

}

div.megaMenu ul li ul li.sectionHdr a {
   
}

div.megaMenu ul li ul li.sectionHdr a.sectionAnchor {
    display: inline-block;
    width: 100%;
    cursor: pointer;
}


div.megaMenu ul li ul li.sectionHdr{
    margin-top: 1rem;
    font-weight: 300;
    font-style: italic;
    font-size: var(--fs-p95rem);
    margin-left: 0;
    cursor: pointer;
 
}

div.megaMenu ul li ul li.sectionHdr.expanded{
    width:;
}


div.megaMenu ul li ul li.sectionHdr ul.nestyGroup{
    border-top: none;
    margin-right:0;
}

div.megaMenu ul li ul li.sectionHdr ul.nestyGroup li{
    margin-right:0;
}

div.megaMenu ul li ul li.sectionHdr a.sectionAnchor span{
    line-height: 0;
    display: inline-block;
    transform: rotate(0deg);
    width: 0;
    font-weight: 300;
    font-style: normal;
    height: 0;
    float: inline-end;
    font-size: var(--fs-1p2rem);
    position: relative;
    left: -4.9%;
    margin-top: .15rem;
    transition: transform var(--motion-fast) var(--ease-default), left var(--motion-fast) var(--ease-default), margin-top var(--motion-fast) var(--ease-default);
}

div.megaMenu ul li ul li.sectionHdr.expanded a.sectionAnchor span{
    transform: rotate(134deg);
    left: -4%;
    margin-top: 0;
}

div.darkModeMenu{
    background-color: rgb(15, 15, 15, 90%);
    background-image: url(../images/BGWatercolors2.png);
        background-position: -19rem -37rem;
    background-size: 130%;
    color: var(--gray-fff);
}

div.darkModeMenu button.closer{
    display: inline-block;
    border: var(--gray-180-a0) 0.1em solid;
    color: var(--gray-fff);
    outline: none;
    cursor: pointer;
    padding: .8rem .8rem;
    transition: all var(--motion-base);
    margin-top: 10px;
    text-decoration: none;
    font-weight: 500;
    font-style: italic;
    font-size: var(--fs-1rem);
    background-color: var(--gray-255-ap2);

}

div.darkModeMenu button.closer:hover, div.darkModeMenu button.closer:focus-visible{
    background-color: var(--gray-255-a0p9);
    border-radius: .5rem;
    border: rgba(var(--color-brand-rgb), 1) 0.07em solid;
    padding: .75rem .7rem;
    color: rgba(var(--color-brand-rgb), 1);

}

div.darkModeMenu button a, div.darkModeMenu span:where(.careerLink) a, div.darkModeMenu a{
    color: var(--gray-fff);

}

div.darkModeMenu ul li ul li a {
    color: var(--gray-fff);
    text-decoration: none;
    font-weight: 300;
    border-bottom: var(--gray-255-ap6) solid .01rem;
    transition: color var(--motion-base);
}

div.darkModeMenu ul li ul li a:hover, div.darkModeMenu ul li ul li a:focus-visible {
    color: rgba(var(--color-brand-rgb), 1);
    border-bottom: rgba(var(--color-brand-rgb), 1) solid .01rem;
}

div.darkModeMenu ul li h5 {
    text-shadow: 0 0 .95rem var(--gray-0-ap5);
    font-size: var(--fs-1p7rem);
    font-weight: 400;
}

div.darkModeMenu button a:hover, div.darkModeMenu button a:focus-visible, div.darkModeMenu span:where(.careerLink) a:hover, div.darkModeMenu span:where(.careerLink) a:focus-visible {
    background-color: var(--gray-255-a0p9);
    border-radius: .5rem;
    border: rgba(var(--color-brand-rgb), 1) 0.07em solid;
    padding: .75rem .7rem;
    color: rgba(var(--color-brand-rgb), 1);
}

/*--- Experience Sections ---*/


.landing .tabcontent {
    display: flex;
    overflow:hidden;
    /* width: 100%; */
    text-align: center;
    margin: auto 0;
    /* display: none; */
    padding: 2rem 0px;
    border-top: none;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
	position: relative;
}

section.wrk div.wrk{
    padding-bottom:0;
    
}

section.wrk div.intro{
    margin-bottom: 2rem;

} 

.int .tabcontent{
	overflow: visible;
}

.int #Ozmo{
	overflow: hidden;
}

.landing .noBefore{
	padding: 0px;
    margin-bottom: 1rem;
}

.landing #Ozmo{
	padding-top: 8rem;
}

.interior .tabcontent{
	padding:6rem 0px;
	display: flex;
    /* width: 100%; */
    text-align: center;
    margin: auto 0;
    /* display: none; */
    border-top: none;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
	position: relative;

}

.interior .cseStudy {
    padding: 0px 0px;
    padding-bottom: 6rem;
}

.interior .blog p span{
	background-color: var(--gray-50-ap05);
    margin: 2rem 0px;
    border-top: var(--gray-ccc) .01rem solid;
    border-bottom: var(--gray-ccc) .01rem solid;
    padding: 1rem 1.5rem;
    line-height: 2.5rem;
    font-weight: 500;
    font-size: var(--fs-1p6rem);
    display: block;
}

.interior .blog p.label{
    z-index: 9099;
    margin: 0;
    margin-bottom: -1rem;
}

.interior .blog ul.vertCards p.label{
    margin: 0 auto;
    margin-bottom: .6rem;
}


.interior .cseStudy p.label span{
    margin: 0;
    color: var(--gray-fff);
    /* margin: 0 auto; */
    background-color: var(--gray-40-ap4);
    width: fit-content;
    border: var(--gray-255-ap6) solid .1rem;
    padding: .01em .6rem;
    border-radius: 1rem;
    display: block;
    font-size: var(--fs-p75rem);
    font-style: italic;
    font-weight: 300;
    text-align: center;
    margin-bottom: .5rem;
    line-height: 1.9rem;
}

.interior .cseStudy ul.vertCards p.label span{
    margin: 0 auto;
}

.interior .blog h5, .interior .featureWalk h5, .featureDeet div.tabcontent h5{
	padding-top:3rem;
	max-width: 45rem;
    width: 100%;
    text-align: left;
    margin-block-start: 0rem;
}

.interior .blog ol{
    max-width:45rem;
    width:100%;
}

.interior .blog ol.bulletted{
	list-style-position: inside;
    margin-block-start: 0rem;
    margin-left: 0px;
}



.interior .blog ol.bulletted li{
	list-style: disc;

}

.interior .blog ol.decimal li{
	list-style: decimal;

}

.interior .blog ol h6{
    text-align: left;
    font-weight: 500;
    color: var(--gray-444);
    margin-top: 2rem;
}

.interior .blog ol.bulletted li:first-child h6{
	margin-top: 1rem;
}

.interior .blog ol h6 span{
    font-style: normal;
    font-size: var(--fs-1p5rem);
	
}

.interior .blog h1, .interior h1, .int h1{
	width:95%;
    color: var(--gray-150-a1);
    text-shadow: none;
}


.interior .studyHero h1 {
    width:auto;
}

.interior div.projectTitle h1 {
	width:auto;
}


.interior .blog h2{
	font-weight:500;
}



.interior .tabcontent p span.reminder{

}

.interior #IJ{
    padding-top: 2rem;
}

.tabcontent::before {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    top: -3%;
    left: 0%;
    z-index: -1;
    background: url(../images/BGWatercolors.png) 0 0 no-repeat;
    transform: rotate(30deg);
    background-size: 70%;
    background-position: 0% 0rem;
}

div.intro .noBefore::before{
	position:initial;
	background:none;
	transform:none;
}


section header .noBefore div.logos {
    
}

section header .noBefore div.logos div.logo{
	padding: .7rem;
	width:auto;
    max-width: 6.5rem;
    max-height: 3.5rem;

}

section header .noBefore div.logos div.verti{
    max-width: 2.5rem;
    max-height: 4.5rem;
	aspect-ratio: 1/1;
}


section header .noBefore div.logos div.logo img{
    width: 100%;
    height: auto;
	filter: brightness(0.6);
    opacity: 0.6;
    transition: all var(--motion-fast);
    display:block;
}

section header .noBefore div.logos div.threem img {

}

section header .noBefore div.logos div.f{

}

section header .noBefore div.logos div.threem{

}

section header .noBefore div.logos div.e img {

}

section header .noBefore div.logos div.va img {
	width:75%;
}

    

.interior .tabcontent::before{
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    top: -3%;
    left: 0%;
    z-index: -1;
    background: url(../images/BGWatercolors.png) 0 0 no-repeat;
    transform: none;
    background-size: 80%;
    background-position: 0% 0rem;
}


.int #coverLetter::before{
    top: -27%;
    left: 0%;
    z-index: -1;
    background: url(../images/BGWatercolors.png) 0 0 no-repeat;
    transform: none;
    background-size: 60%;
    background-position: 0% -27rem;
}

.blg #coverLetter::before{
    top: -7%;
    left: 0%;
    background-position: 0% 3rem;
}

.wrk #coverLetter::before{
    top: -26%;
    left: 0%;
    background-position: 120% -37rem;
}

.abt #coverLetter::before{
    background-position: 60% -31rem;
}

.art #coverLetter::before{
    background-position: 30% -17rem;
    top: -2.5%;
}

#coverLetter h2{
	color: var(--gray-666);
    font-weight: 300;
        margin-bottom: 1rem;
}

#coverLetter h2.subTitle{
    text-shadow: .03rem .03rem 1rem var(--gray-20-ap9);
    margin-top: 1rem;
    color: var(--gray-fff);
    z-index: 1001;
    text-align: left;
    max-width: 45rem;
    width: 100%;
    font-weight: 400;
 }   

.interior .cseStudy h1 {
    color: var(--gray-222);
    text-align: left;
    line-height: 4.5rem;
    max-width: 45rem;
    margin-top: .5rem;
    font-size: var(--fs-4p2rem);
    width: 100%;
}

.interior #coverLetter::before, .int #coverLetter::before{
	opacity: .60;
}

.art #coverLetter::before{
	opacity: .80;
}

.contact .tabcontent::before{
    width: 80%;
    height: 100%;
    content: "";
    position: absolute;
    top: -33%;
    left: 0%;
    z-index: -1;
    background: url(../images/BGWatercolors.png) 0 0 no-repeat;
    transform: none;
    background-size: 80%;
    background-position: 0% 0rem;
}

.success .tabcontent::before{
	display:none;
}

#VT::before{
    top: -35%;
    left: 0%;
    z-index: -1;
    transform: rotate(-110deg);
    background-size: 70%;

}

.logo img{
    width: auto;

	
}

.interior .logo img{
	max-width: 12rem;
}

.hero img{
    width: 90%;
    max-width: 1130px;
    margin-bottom: -1rem;
}

#coverLetter .hero{
	width: 100%;
    max-width: 1366px;
    height: 10rem;
    margin-top: 3rem;
}

.articleHero{
	width: 100%;
    max-width: 1366px;
    height: auto;
    margin-top: 3rem;
}

.studyHero{
        margin-top: 0;
}

.newTop{
    z-index: 1000;
    height: 18rem;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: -6rem;
    background-size: cover;
    filter: grayscale(100%);
    transition: all var(--motion-base);
    /* Astro-only addition (Phase 2 §4/§7 decision 2): lets Hero.astro set the
       per-study image via an inline --hero-image custom property instead of a
       hardcoded per-study CSS class. Not present in the legacy css/main.css -
       intentional, documented divergence, not drift. */
    background-image: var(--hero-image);
}

.newTop:hover{
    filter: grayscale(0%);
}

.studyHero img{
    filter: grayscale(100%);
    transition: all var(--motion-base);
}

.studyHero:hover img{
    filter: grayscale(0%);

}

.studyHero:hover div.gradientShade{
    opacity:0;
    transition: all var(--motion-base);
}


.interior .studyHero h1{
    padding-left: 3rem;
    padding-right: 4rem;
    z-index: 10;
    line-height: 9rem;
    font-size: var(--fs-9rem);
    color: var(--gray-fff);
    position: absolute;
    margin-left: 0;
    text-align: left;
}

.interior .studyHero div.gradientShade{
    opacity:1;
    position: relative;
    z-index: 9;
    margin-bottom: -22rem;
    min-height: 22rem;
    background-image: linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
    --gradient-start: rgba(0, 0, 0, 0.3);
    --gradient-end: rgba(0, 0, 0, 0);
}

.interior .newTop div.gradientShade {
    z-index: 9;
    margin-bottom: -32.5rem;
    min-height: 18rem;
    background-image: linear-gradient(to top, var(--gradient-start), var(--gradient-end));
    --gradient-start: rgba(0, 0, 0, 0.4);
    --gradient-end: rgba(0, 0, 0, 0);
    transition: --gradient-start calc(var(--motion-slow) * 1.5) var(--ease-in-out), --gradient-end calc(var(--motion-slow) * 1.5) var(--ease-in-out);
}

.interior .newTop:hover div.gradientShade {
    --gradient-start: rgba(0, 0, 0, 0);
    --gradient-end: rgba(0, 0, 0, 0);
   transition: --gradient-start var(--motion-slow) var(--ease-in-out), --gradient-end var(--motion-slow) var(--ease-in-out);
}

.interior .studyHero h2{
    text-align: left;
    padding-left: 3rem;

}

.articleHero img{
	width: 100%;
}


#coverLetter .hero img{
	width:40%;
	filter: brightness(0);
}






#OzmoAgents .hero img{
	width: 70%;
}

#Gatorade .hero img{
	width: 100%;
	max-width:none;
}

#Gatorade .hero{
	width: 62%;
}

#Modea .hero img{
 width: 100%;
}

#VT .hero img{
	width: 100%;
}

.interior .hero img{
	max-width: 100%;
}

#IJ div.hero{
    width: 70%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

#IJ .hero img{
	display: block;
    margin-bottom: -7rem;
    text-align: center;
    width: 110%;
}

#red .hero img{
	margin-bottom: -2rem;
}

.tabcontent h3{
	visibility: hidden;
	height: 0px;
	margin:0px;
	/* width: 45rem; */
}

.tabcontent p, .tabcontent ul.bullets li{
    max-width: 45rem;
    width: 100%;
    color: var(--gray-666);
    font-size: var(--fs-1p4rem);
    font-weight: 300;
    line-height: 2.3rem;
    text-align: left;
}

.tabcontent p.tip{
    margin-top:3rem;
}


.tabcontent p.snapShot{
    margin-top: 0;
    font-size: var(--fs-1p1rem);
    line-height: 1.6rem;
    padding: 1rem .8rem;
    max-width: none;
    width: auto;
    display: block;
    border-radius: .5rem;
    background-color: var(--gray-0-ap04);

}

.tabcontent p.snapShot span{
    display: inline-block;
    font-style: italic;
    font-size: var(--fs-1p1rem);
  
}

.tabcontent p.experience{
	    text-align: center;
}

.blog p, .featureWalk p{
	width:100%;
}

.blog p.sectionHeader{
    margin-bottom: 0;
}

.blog h6, .int h6{
	text-align: left;
    max-width: 45rem;
    width: 100%;
}


div.mediumLink p{
	margin-bottom: 0px;
}

div.mediumLink p a{
    font-style: italic;
    font-size: var(--fs-1p3rem);
}


.tabcontent ul.bullets li{
	list-style-type: circle;
	list-style-position: inside;
	margin-bottom:1rem;
}


.tabcontent p.reminder{
	font-style: italic;
    font-size: var(--fs-1p2rem);
}

.tabcontent p.note span.reminder{
	font-style: italic;
}
.tabcontent p a{
	text-decoration: none;
    color: var(--gray-160-a1);
    transition: color var(--motion-base);
    display: inline;
}

.tabcontent p.reminder a, .tabcontent p.note span.reminder a{

}



span.icon{
	font-size: var(--fs-1p3rem);
}

.tabcontent p.reminder a:hover, .tabcontent p.note span.reminder a:hover{
	text-decoration: none;
    color: rgba(var(--color-brand-rgb), 1);
}

p.note{    
    display: inline-block;
    font-size: var(--fs-1p05rem);
    line-height: 1.5rem;
}

div.intro p.note{
    display: inline-block;
    font-size: var(--fs-1rem);
    line-height: 1.5rem;
    font-style: italic;
    width: auto;
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    font-style: italic;
    color: var(--gray-50-a1);
    max-width: 47rem;
    display: inline-block;
    font-size: var(--fs-1p05rem);
    line-height: 1.5rem;
    border: var(--gray-0-ap07) .01rem solid;
    background-color: var(--gray-0-a0p01);
    cursor: pointer;
    padding: .8rem;
    width: 100%;
    text-align: left;
    outline: none;
    transition: var(--motion-base);
}

.accordion span{
    float: right;
    font-style: normal;

}

.accordion span.closed{
    display: inline-block;

}

.accordion span.opened{
   display: none;

}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.accordion:hover {
  border:rgba(var(--color-brand-rgb), 1) .01rem solid;
}

/* One standard gap between the project title and the About accordion, mirroring the gap
   below it: the title's own 1rem bottom margin is dropped and the accordion carries the token. */
.tabcontent div.projectTitle:has(+ h3 + button.accordion) {
    margin-bottom: 0;
}

.tabcontent div.projectTitle + h3 + button.accordion {
    margin-top: var(--content-pad-desktop, 2rem);
}

/* One standard gap between the About accordion and whatever starts the page body
   (role line, metrics block or heading); the first block's own top margin is dropped
   so the gap is the same on every project page. */
.tabcontent .accordion {
    margin-bottom: var(--content-pad-desktop);
}

.tabcontent .accordion + *, .tabcontent .accordion + .caseStudies > ul:first-child {
    margin-top: 0;
}

.tabcontent button.accordion + h5 { /* matches .featureDeet div.tabcontent h5's specificity; later in the file, so it wins */
    padding-top: 0;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    font-style: normal;
    padding: 0 18px;
    display: none;
    overflow: hidden;
}

.interior div.divider, .int div.divider{
	margin-top:3rem;
}

.interior #coverLetter div.divider, .int #coverLetter div.divider{
	margin-bottom: 3rem;
}



.tabcontent div.logo, .tabcontent div.projectTitle{
    display: block;
    width: 100%;
}

.tabcontent div.logo h1{
    width: 100%;
    font-weight: 900;
    -webkit-text-stroke: .07rem var(--gray-20-ap8);
    color: var(--gray-255-a1);
    text-shadow: 0rem 0rem .3rem var(--gray-20-ap235);
    padding-top: 1rem;
}

#coverLetter div.projectTitle{
	/*--position: sticky;--*/
    top: 0;
    z-index: 10000;
}

.interior .tabcontent div.logo{
	margin-bottom: 2rem;

}

.tabcontent div.logos, section header div.logos{
    margin-bottom: .5rem;
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-evenly;
    align-items: center;
    height:9rem;
}

section header .noBefore div.logos{
    height:auto;
    flex-direction: row;
    flex-wrap: nowrap;
}

.tabcontent div.logos div{
	padding: 1rem;
    width: auto;
}

.tabcontent div.logos div img{
	opacity: 0.7;
    max-width: 8rem;
    max-height: 3.5rem;
    transition: all var(--motion-fast);
}

.tabcontent div.logos div a:hover img{
	opacity: 0.9;
    max-width: 8.2rem;
    max-height: 3.7rem;
}

.tabcontent div.logos div.threem img{
	width:4.5rem;
}

.tabcontent div.logos div.vans img{
	width:5.5rem;
}

.tabcontent div.logos div.o img, .tabcontent div.logos div.e img{
	opacity: .5;
}

.tabcontent div.logos div.o a:hover img{
	opacity: 0.7;
}

#Ozmo::before{
	background-size: 90%;
    top: -30%;
    background-position: -12% 0rem;

}

.interior #Ozmo::before{
    background-size: 90%;
    top: -10%;
    background-position: 0% 0rem;
    
}

#IJ::before{

}

.logo svg .inner{
	fill:none;
}

#Ozmo .logo svg{
	margin-top: 35px;
    margin-bottom: 25px;
    max-width: 25rem;
	filter: drop-shadow( 0px 0px 2px var(--gray-0-ap5));
}

#Ozmo .logo svg path, #Ozmo .logo svg rect, #Ozmo .logo svg polygon {
    stroke-width: .035rem;
}

#BlockOne{
	background-size: 73%;
    background-position: 60% -10rem;
}


#BlockOne .hero img, #OzmoSelfServe .hero img{
	max-width: 1000px;
}

#red .hero img{
    margin-left: -7rem;
    max-width: 1000px;
    width: 140%;
}

#BlockOne .hero img{
	width:100%;
}

#Voice .hero img{
	width:100%;
	max-width:980px;
}

#BlockOne .logo img{
	max-width: 11rem;
	filter: drop-shadow( 0px 0px 2px var(--gray-0-ap5));
}

#BlockOne .logo svg{
	margin-top: 35px;
    margin-bottom: 25px;
    max-width: 12rem;
	filter: drop-shadow( 0px 0px 2px var(--gray-0-ap5));
}

#BlockOne .logo svg path, #BlockOne .logo svg rect, #BlockOne .logo svg polygon {
    stroke-width: .2rem;
}



#Exadel::before{
	transform: rotate(70deg);
	top: -15%;
    left: -47%;
}

#Exadel div.logo{
    margin-top: 15px;
    margin-bottom: 20px;
}

#Exadel .hero img{
	max-width: 1260px;
	margin-bottom: 1rem;
}

#Freelance .hero img{
    max-width: 1300px;
    margin-bottom: 1rem;
    margin-left: -5rem;
    width: 116%;
}



#Exadel .logo img{
	max-width: 30rem;
	filter: drop-shadow( 0px 0px 2px var(--gray-0-ap5));
}

#Exadel .logo .cls-2{
    stroke: var(--gray-10-ap5);
    stroke-width: 0.45rem;
    fill: var(--gray-fff);
}

#Exadel .logo svg{
	max-width: 35rem;
	filter: drop-shadow( 0px 0px 2px var(--gray-0-ap5));
}

#Exadel .logo svg path, #Exadel .logo svg rect, #Exadel .logo svg polygon{
	    stroke: var(--gray-120-ap5);
    stroke-width: .001rem;
}

.logo svg path, .logo svg rect, .logo svg polygon{
        stroke-width: .02rem;
}

.logo svg.buttonLogo path, .logo svg.buttonLogo rect, .logo svg.buttonLogo polygon{
    stroke-width: .05rem;
}


#Motive .logo svg{
	max-width: 30rem;
	filter: drop-shadow( 0px 0px 2px var(--gray-0-ap5));
}

#Motive .logo svg path, #Motive .logo svg rect, #Motive .logo svg polygon{
	fill: var(--gray-fff);
}

#Motive .logo{
	margin-top: 3rem;
}

#Proof .logo svg, #Modea .logo svg, #VT .logo svg{
    overflow: visible;
	max-width: 30rem;
	filter: drop-shadow( 0px 0px 2px var(--gray-0-ap5));
}



#Modea .logo svg{
	max-width: 38rem;
}

#VT .logo svg{
	max-width: 38rem;
	}

#Proof .logo svg path, #Proof .logo svg rect, #Proof .logo svg polygon{
        stroke-width: 0rem;
}

#Modea .logo svg path, #Modea .logo svg rect, #Modea .logo svg polygon{
	    stroke-width: .05rem;
}

#VT .logo svg path, #VT .logo svg rect, #VT .logo svg polygon{
	stroke-width: .017rem;
}



#Modea .logo{
	padding-top: 2rem;
    padding-bottom: 2rem;
}

#VT .logo{
	padding-top: 4rem;
    padding-bottom: 2rem;
}

#Proof .logo{
	margin-top: 3rem;
}

#career::before{
    opacity: 0.4;
    width: 60%;
    height: 130%;
    top: 0%;
    left: 10%;
    transform: rotate(40deg);
    background-size: 71%;
    background-position: 0% 0rem;
}

#career{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}



div#career p{
    display: block;
}



#Motive::before{
	top: -11%;
    transform: rotate(-90deg);
    /* background-size: 59%; */
    background-position: 100% 14rem;
}




#Proof{
	background-size: 73%;
    background-position: 60% -10rem;
}



#Modea{
	background-size: 73%;
    background-position: 60% -10rem;
}


/* ------- Dropdown Button ------ */




.dropdown button{
	border: none;
    background: none;
}



footer{
    margin: 0 auto;
    max-width: 1366px;
	border-top: var(--gray-0-ap1) solid .01rem;
}

footer div{
    display: flex;
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;

}

footer div.divider{
	margin-top: -2.95rem;
}


footer div h3{
	font-size: var(--fs-1p1rem);
    line-height: 2rem;
    font-style: italic;
	width: 40%;
}

footer div p{


}

footer div a, ul.bio p a, .tabcontent p a{
    text-decoration: none;
    font-weight: 300;
    border-bottom: var(--gray-ccc) solid .1rem;
    color: var(--gray-60-a1);
    transition: all var(--motion-base);
}

footer div a:hover, ul.bio p a:hover, .tabcontent p a:hover{
	text-decoration: none;
    color: rgba(var(--color-brand-rgb), 1);
}

.tabcontent p strong a{
    font-weight: 500;

}

footer div a.logoFooter{
	padding: 3rem;
}

footer div a.logoFooter img{
    filter: grayscale(1);
    width: 20rem;
    transition: all var(--motion-base);
}

footer div a.logoFooter img:hover{
    filter: grayscale(0);
    width: 21rem;
}











/* ------- Media Queries ------ */

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

	a.video{
		width:100%;
	}

}


@media only screen and (max-width: 1290px) {
	.exp div.experienceJumper{
		margin: 0 auto;
		padding-left: 2rem;
		padding-right: 2rem;
	}

}



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

.interior .studyHero h1{
    padding-left: 3rem;
    padding-right: 3rem;
    z-index: 10;
    line-height: 7rem;
    font-size: var(--fs-7rem);
    color: var(--gray-fff);
    position: absolute;
    margin-left: 0;
    text-align: left;
}

div.resume ul li.bullets li ul.resTags {
    flex-wrap: wrap;
}

div.resume ul li.prods ul.prodButtons {
    width: auto;
}

div.resume ul li.bullets li ul.resTags li {
	margin-top: 1rem;
}

div.resume ul li p.timeline {
    margin-bottom: 0;
}

div.resume ul li.prods ul.prodButtons {
	flex-wrap: wrap;
	margin-top:0;
}

div.resume ul li.prods ul.prodButtons li{
	margin-top:1.5rem;
}

.exp div.experienceJumper{
	padding-left: 3rem;
	padding-right: 3rem;
	}

.floatNav{

}

.floatNav .tablinks{
	text-align: left;
    width: 160%;
}

.floatNav .tab button.dropdown{
	display:inline-block;
	width: auto;
}

.floatNav .tab{
    overflow: visible;
    border-radius: .5rem;
    padding: 1rem;
	height: fit-content;
	flex-direction: column;
	flex-wrap: nowrap;
	min-width: fit-content;
    width: 1rem;
}


	div.resume {
    	padding: 0rem 3rem;
    	margin: 0;
    	padding-bottom:0;
	}
	
	div.resume ul {
    	flex-direction: column;
   	 	align-content: center;
   	 	/*margin-bottom: 6rem;*/
	}
	div.resume h2{
		margin: 0 auto;
   		text-align: center;
	}

	
	
	div.resume ul li.bullets, div.resume p.experience, div.resume ul li.prods {
   		margin: 0 auto;
    	padding: 2rem;
    	padding-bottom:0;
    	width: 65%;
	}
	
	div.resume ul li.bullets {
    	padding-top: 0;
	}
	
	div.resume ul li.prods ul.prodButtons {
		margin-bottom: 1.2rem;
   		justify-content: flex-start;
    	align-items: center;
	}
	
	div.resume ul li.prods ul.prodButtons li{
	margin-right:1rem;
	margin-bottom: 0;
}
	

	
	div.resume p.experience{
		text-align:center;
	}
	
	
	div.resume ul a {
		width:100%;
	}
	
	div.intro p.workedFor {

    	margin-bottom: 1rem;
	}
}






@media only screen and (max-width: 1100px) {

div.megaMenu ul.containerUL {
    padding-left: 3rem;
}

    div.megaMenu ul li.Stdies {
    width: 39%;
}

    div.megaMenu.isActive{
        height: 90vh;
        overflow-y: auto;

    }

div.megaMenu ul li ul li.sectionHdr ul.nestyGroup{
    display:none;
}

    div.megaMenu ul li.Prjs ul.colmns {
    display:none;
}

    div.megaMenu ul li.Prjs ul.colmn {
    padding-bottom:3rem;
    display:flex;
    width: 100%;
}

div.megaMenu ul li.Prjs {
    width: 47%;
}

div.megaMenu .tablinks {
    left:-3%;
    display: block;
}


div.megaMenu ul li ul li {
    margin-left: 0;
    text-align: left;
    width: 90%;
}

	.wrk #coverLetter::before {
    	top: -26%;
    	left: 0%;
    	background-position: 120% -27rem;
	}
	
#Ozmo::before {
    background-size: 90%;
    top: -20%;
    background-position: -12% 10rem;
}

	section header .noBefore div.logos {
    	flex-wrap: wrap;
	}

	li.badge {
    	margin-left: 2rem;
	}
	
	section.landing header div.intro ul.treeBadge li.badge {
		margin:0 auto;
		width: auto;
	}
	
	.interior #BlockOne .hero img {
    	/*width: 85%;*/
	}
	

	
	
	.heroStudies ul li, ul.vertCards li {
    	width: 30%;
    }

}

@media only screen and (max-width: 1080px) {
   
section.landing header div.intro .heroStudies ul.v2 li a.border img, div.relatedProjs ul li a.border img {
    width: 18.9rem;
}

    section.landing header div.intro .heroStudies ul.v2 li a.border:hover img, div.relatedProjs ul li a.border:hover img {
    width: 18rem;
}

section.landing header div.intro .heroStudies ul.v2 li, div.relatedProjs ul li {
    height: 25.8rem;
}



}

@media only screen and (max-width: 1010px) {
   
section.landing header div.intro .heroStudies ul.v2 li a.border img, div.relatedProjs ul li a.border img  {
    width: 17.8rem;
}

    section.landing header div.intro .heroStudies ul.v2 li a.border:hover img, div.relatedProjs ul li a.border:hover img  {
    width: 17rem;
}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight, div.relatedProjs ul li a.border div.studyHighlight  {
    padding-top: 9rem;
}

section.landing header div.intro .heroStudies ul.v2 li a.border:hover div.studyHighlight, div.relatedProjs ul li a.border:hover div.studyHighlight {
    padding-top: 9.2rem;
}

}

@media only screen and (max-width: 960px) {

    .int #Ozmo{
	overflow: visible;
}

.landing .tabcontent{
        width: auto;

}

section.landing header div div.caseCards ul{
        flex-direction: column;
        align-items: center;
        flex-wrap: nowrap;
}

.caseCards ul li{
        margin-bottom: 1rem;
        width: 90%;

}

.heroStudies ul li a p.stat {
    line-height: 2rem;
    font-size: var(--fs-2p2rem);
}

div.intro div.homer{
	max-width: 95%;
}

.int .caseStudies{
    max-width:720px;
}

section.landing header div.intro .heroStudies ul.v2 li, div.relatedProjs ul li {
    height: 24.8rem;
}

section.landing header div.intro .heroStudies ul.v2 li a.border img , div.relatedProjs ul li a.border img{
    width: 16.6rem;
}

section.landing header div.intro .heroStudies ul.v2 li a.border:hover img, div.relatedProjs ul li a.border:hover img {
    width: 16rem;
}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight, div.relatedProjs ul li a.border div.studyHighlight {
    padding-top: 8rem;
}

section.landing header div.intro .heroStudies ul.v2 li a.border:hover div.studyHighlight, div.relatedProjs ul li a.border:hover div.studyHighlight {
    padding-top: 8.2rem;
}

section.landing header div.intro .heroStudies ul, ul.vertCards {
    	width: 95%;
    
}

ul.vertCards{
        width: 106%;
        max-width: 48rem;
        margin: 0;
        margin-top: 1rem;

}

div.intro p.large {
    width: 90%;
}

div.intro p {
    width: auto;
    
    }

div.resume ul li.prods {
	padding: 0;
    	width: 100%;
	}

section .exp {
	    margin: 2rem 6rem 0rem 6rem;
	    top: 10px;
}

.exp div.experienceJumper{

	}
	
	.experienceJumper button.dropdown{
		display:inline-block;
		font-style:italic;
	}
	
	.experienceJumper button.dropdown span{
		font-style:normal;
	}
	
	.experienceJumper {
    	overflow: visible;
    	border-radius: .5rem;
    	padding: 1rem;
		height: fit-content;
		background-color: var(--gray-255-a0p9);
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
  		min-width: 160px;
  		z-index: 1;
	}
	
	.experienceJumper {
		border: var(--gray-120-a1) solid .01rem;
  		box-shadow: 0px 8px 16px 0px var(--gray-0-a0p2);

}

	.experienceJumper .hide{
		display:none;
		transition: all var(--motion-fast);
	}

	.landing .tabcontent div.hero img {
   		margin-left: -5.5rem;
        min-width: 130%;
	}
	
	.landing #BlockOne .hero img {
    	/* max-width: 1000px; */
    	min-width: 140%;
		margin-left: -9.5rem;
	}
	
	.landing #Exadel .hero img {
		margin-left: -6.5rem;
	}

    .landing #Freelance .hero img {
        margin-left: -9rem;
        min-width: 142%;
    }

	section header div.ww2c img.slashed {
    	margin-top: 3rem;
    	margin-bottom: -1rem;
	}

	div.resume ul li.bullets{
		width:100%;
		padding:0;
	}
	
	
	
	#OzmoAgents .hero img{
		width: 80%;
	}
	
	.sticky-nav {
		width:fit-content;
		float: right;
        margin-right: -8px;
        transition: all var(--motion-base);
	}

    .floatNavMegaExpanded{
        margin-right: -17rem;

    }

	.floatNav .tab button.dropdown {
    	text-align: right;
	}
	
	.floatNav .tablinks {
        text-align: right;
        width: auto;
    }
    
    .floatNav .tab {
    	justify-content: start;
    	align-items: end;
    	width:auto;
	}

}

@media only screen and (max-width: 895px) {

.interior .studyHero h1{
    padding-left: 3rem;
    padding-right: 3rem;
    z-index: 10;
    line-height: 6rem;
    font-size: var(--fs-6rem);
    color: var(--gray-fff);
    position: absolute;
    margin-left: 0;
    text-align: left;
}



section.landing header div.intro .heroStudies ul.v2 li a.border img, div.relatedProjs ul li a.border img {
    width: 15.5rem;
}
    
    section.landing header div.intro .heroStudies ul.v2 li a.border:hover img, div.relatedProjs ul li a.border:hover img {
    width: 15rem;
}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight, div.relatedProjs ul li a.border div.studyHighlight {
    padding-top: 7rem;
}

section.landing header div.intro .heroStudies ul.v2 li a.border:hover div.studyHighlight, div.relatedProjs ul li a.border:hover div.studyHighlight {
    padding-top: 7.2rem;
}
	
	.mainNav .hide, .mainNav .tablinks{
		display:none;
	}

	.mainNav .tab{
		align-items: start;
		padding-top: 1rem;
    	padding-left: 1rem;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: center;
		height: fit-content;
		width:100%;
		overflow:visible;
	}
	

	.mainNav .tab button.dropdown {
    	text-align: left;
    	padding-left: 1.3rem;
	}

	.mainNav .tab button.dropdown svg {
    
	}

	.mainNav .tab button.dropdown span {
    	float: right;
    	margin-left: 0rem;
    	margin-right: 1rem;
	}
	

	
	.mainNav .tab button.dropdown h6{
		width: fit-content;
    	margin: 0px;
    	padding: 0px;
    	font-style: normal;
    	font-size: var(--fs-p8rem);
    	margin-bottom: .4rem;
	}
	
	.mainNav .tab button.dropdown{
		display:inline-block;
	}
	
	#OzmoAgents .hero img{
		width: 90%;
	}

}

@media only screen and (max-width: 875px) {
	.mainNav {
		
	}
	
	

}

@media only screen and (max-width: 850px) {




.successes ul li div.metric div ul li {
    padding-left: 4%;
    padding-right: 4%;
}

.interior .studyHero h1{
    padding-left: 0;
    margin-bottom: 1.5rem;
    padding-right: 3rem;
    z-index: 10;
    line-height: 4rem;
    font-size: var(--fs-4rem);
    color: var(--gray-150-a1);
    position: revert;
    margin-left: 0;
    text-align: left;
}

.interior .studyHero h2{
    text-align: left;
    padding-left: 0;

}

.interior .studyHero div.gradientShade {
    display: none;
}

section.landing header div.intro .heroStudies ul.v2 li, div.relatedProjs ul li {
    height: 24.8rem;
    width: 47%;
}

section.landing header div.intro .heroStudies ul.v2 li.hideable {
    display: none;
}

section.landing header div.intro .heroStudies ul.v2 li a.border img, div.relatedProjs ul li a.border img {
    width: 15.5rem;
}

section.landing header div.intro .heroStudies ul.v2 li a.border:hover img, div.relatedProjs ul li a.border:hover img {
    width: 15rem;
}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight, div.relatedProjs ul li a.border div.studyHighlight {
    padding-top: 6rem;
}

section.landing header div.intro .heroStudies ul.v2 li a.border:hover div.studyHighlight, div.relatedProjs ul li a.border:hover div.studyHighlight {
    padding-top: 6.2rem;
}

 .successes ul.metricS li {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
}

.landing .successes ul.metricS li:first-child {
    align-items: flex-end;
    border-right:0;
}

section.landing .successes ul.metricS li p, section.landing .successes ul.metricS li:first-child p  {
    padding-left:0;
    padding-right:0;
    text-align: center;
}

div.about ul.bio li h2 {
    text-align: center;
    padding: 0px 2rem;
    width:auto;
    width: -webkit-fill-available;
}


section.landing header div.intro div.introBlurb {
    width: 70%;
}

.mainNav .tab button.dropdown{
	display:inline-block;
}

.sticky-container {
	margin: 0rem 4rem;
}

.hide{
	display:none;
}

.mainNav .tab{
    overflow: visible;
    border-radius: .5rem;
	height: fit-content;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
  	min-width: 160px;
  	z-index: 1;
}



	#coverLetter .hero{
   		height: auto;
	}
	
	#coverLetter .hero img {
   		width: 80%;
	}


	
	.caseStudies li a {
    	min-height: 0;
	}	

	div.about ul.bio {
   		flex-direction: column;
	}
	
	.tabcontent div.logo {
    	/*width: auto;*/
	}
	
	.tabcontent div.logos {
    	flex-wrap: wrap;
    	height: auto;
    }
    
    section header .noBefore div.logos {
    height: auto;
}
    
    section header .noBefore div.logos div.g, section header .noBefore div.logos div.c{

	}
	
	section header .noBefore div.logos div.threem, section header .noBefore div.logos div.vans{
		width: 15%;

	}

div.about img.profilePic {
    margin-top: -2rem;
    width: 23rem;
}

div.about img.profilePicClr {
    margin-top: -2rem;
    position: absolute;
    margin-left: -23rem;
    width: 23rem;
    transition: opacity var(--motion-base);
}

div.about ul.bio li {
    width: fit-content;
    list-style: none;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}

div.about ul.bio::before {
        width: 100%;
        height: 100%;
        content: "";
        position: absolute;
        z-index: -1;
        background: url(../images/watercolor_lighter.png) 0 0 no-repeat;
        transform: rotate(00deg);
        opacity: .7;
        background-size: 60%;
        background-position: 50% -2rem;
}


.tabcontent::before {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    top: -3%;
    left: 0%;
    z-index: -1;
    background: url(../images/BGWatercolors.png) 0 0 no-repeat;
    transform: rotate(30deg);
    background-size: 70%;
    background-position: 0% 0rem;
}

div.about ul.bio li {
    display: flex;
    width: fit-content;
    list-style: none;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}

div.about ul.bio li p{
	padding-right:2rem;
}

div.about ul.bio li p.education {
    padding: 2rem;
    width: auto;
    padding-top: 2rem;
    margin: 0;
    font-style: italic;
    font-size: var(--fs-1p1rem);
}

section header div.topGraphic {
    background-size: 80rem;
}

#leadership {
    /*padding: 0rem 1rem;*/
}


.landing .tabcontent, .interior .tabcontent {
    padding: 2rem 2rem;
}

.newTop {
    width: 120%;
}

.landing .noBefore{
	width:100%;
	padding: 0rem;
	margin:0 auto;
}
  
#IJ div.hero {
    width: 100%;
}

div.Back2Top {
    margin-right: -20px;
}

a.landing div.Back2Top {
    margin-right: 10px;
}
	
    #red .hero img {
    width: 100%;
    margin-left:0;
}

div.about ul.bio li p.experience {
    width: auto;
}

footer div h3{
	width: 70%;
}

#Gatorade .hero {
    width: 90%;
}

div.projectTitle ul {
   /*--text-align: right;--*/
}

section.interior header div.ww2c {
/*--display:none;--*/
}
  
}


@media only screen and (max-width: 770px) {

    div.megaMenu .tablinks.closer {
            top: 1.2rem;
            left: 86%;
    }

div.megaMenu.isActive {
   /*width: 100%;*/
    height: 94vh;
    overflow-y: auto;
}

div.megaMenu ul.containerUL {
     padding-left: 3rem;
    overflow: scroll;
}

   

div.megaMenu ul {
    flex-direction: column;
}

div.megaMenu ul li.Stdies {
    width: 100%;
}

div.megaMenu ul li.Prjs {
        width: 100%;
}

div.megaMenu ul li ul {
    width: 100%;
}

    div.intro p.recents {
    width: 88%;
    text-align: left;
}

section.landing header div.intro .heroStudies ul.homeProds li a.border div.studyHighlight p.label{
    line-height: 1.6rem;

}

    section.landing header div.intro .heroStudies ul, div.tabcontent .heroStudies ul {
        /*width: 100%;*/
        margin-top: 2rem;
    }

.heroStudies ul li a p.statDeet {
    	line-height: 1.5rem;
    }
    
    .heroStudies ul li a p.stat {
    font-size: var(--fs-2p2rem);
    }
    
    .tabcontent .products ul li a div.studyHighlight {
    margin-top: 55%;
    }
    


section.landing header div.intro div.introBlurb {
    width: 80%;
    }
    
section.landing header div.intro div.introBlurb{
	
}


div.intro p {
    width: 88%;
    width:auto;
    
}

.heroStudies ul li a p.label {
	    font-size: var(--fs-1p3rem);
    }
    

div.resume ul li.bullets li ul.statS li.teamStat {
	    width: 6.7rem;
}

.successes ul li div.study {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-around;
    align-items: flex-start;
    min-height: 0;
    height: auto;
    padding: 1rem;
}

.successes ul li div.study p.readTime {
    margin-bottom: .9rem;
    
}

.successes ul li div.study div ul.statS {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}

.successes ul li div.study div ul.metricS {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    justify-content: space-around;
    align-items: center;
}

.successes ul li div.study div ul.metricS li p {
    text-align: center;
    margin: 0;
}

.successes ul li div.study div ul li {
        width: 100%;
        padding-right: 0;
        padding: 3% 0%;
        border-bottom: var(--gray-0-ap1) solid .01rem;
        border-right: none;

}

.successes ul li div.study div ul li.borderDiv {
        display: none;

}

.successes ul li div.study div ul li:last-child {
    border-bottom: none;
}

.successes ul li div.study div {
    width: 100%;
}

.successes ul li div.study div ul.CSHeader {
    flex-wrap: wrap;

}


.successes ul li div.study div ul.CSHeader li.border{
	border: var(--gray-180-a1) 0.09em solid;
    border-radius: .5rem;
    transition: border var(--motion-base);
}


.successes ul li div.successThumb img {
	display:none;
}

	.interior #coverLetter div.divider {
        margin-bottom: 1rem;
        margin-top: 2rem;
	}

	p.blogIntro{
		width:95%;
	}

	.caseStudies ul {
    	/*flex-direction: column;*/
  }
  
  .tabcontent .heroStudies ul{
		flex-direction: row;
  }
  
  .landing .tabcontent div.hero img {
   		margin-left: -3.5rem;
        min-width: 128%;
	}
	
	.landing #Modea .hero img {
        min-width: 135%;
	}
	
	.landing #BlockOne .hero img {
        margin-left: -8rem;
    }

    .landing #Freelance .hero img {
        margin-left: -7.5rem;
        min-width: 142%;
    }
    
    img.slashed {
    	/*margin-top: 0;*/
    	/*margin-bottom: 0;*/
	}
	
	section header div.watercolor img {
    	width: 70%;
    }
    
    h1 {
   		font-size: var(--fs-4rem);
   		line-height: 4.3rem;
    }

.interior .cseStudy h1 {
    color: var(--gray-222);
    text-align: left;
    line-height: 4rem;
    max-width: 45rem;
    margin-top: .5rem;
    font-size: var(--fs-3p5rem);
    width: 100%;
}

#coverLetter h2.subTitle {
   font-size:var(--fs-1p8rem);
}
    
    div.projectTitle li span {
    	font-size: var(--fs-2p3rem);
	}
    
    .articleS ul li {
    	width: 90%;
   		margin-right: 1rem;
	}
}

@media only screen and (max-width: 710px) {

.projs .products ul li a.twoLines div.studyHighlight {
    margin-top: 0%;
}

.successes ul li div.metric div ul li {
    padding-left: 3%;
    padding-right: 3%;
}



section.landing header div.intro .heroStudies ul.homeProds li {
    width: 30%;
}


section.landing header div.intro .heroStudies ul.homeProds li a div.studyHighlight{
   height: auto;
       align-items: center;
    align-content: center;
            width: 100%;

}

section.landing header div.intro .heroStudies ul.homeProds li a div.studyHighlight p{
    padding-left: 0;
    text-align: center;
}

section.landing header div.intro .heroStudies ul.homeProds li a div.studyHighlight p.label{

}

section.landing header div.intro .heroStudies ul.v2 li, div.relatedProjs ul li {
    height: auto;
    width: 100%;
}

section.landing header div.intro .heroStudies ul.v2 li.hideable {

}

section.landing header div.intro .heroStudies ul.v2 li a.border, div.relatedProjs ul li a.border{
        display: flex;
        width: 100%;
        height: 17rem;
        text-align: center;
        margin: 0 auto;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
}

    

section.landing header div.intro .heroStudies ul.v2 li a.border img, div.relatedProjs ul li a.border img {
    position: unset;
    
}

section.landing header div.intro .heroStudies ul.v2 li a.border:hover img {
    
}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight, div.relatedProjs ul li a.border div.studyHighlight {
    padding-bottom: 0rem;
    padding-top: 3rem;
    width: 48%;
}

section.landing header div.intro .heroStudies ul.v2 li a.border:hover div.studyHighlight, div.relatedProjs ul li a.border:hover div.studyHighlight {
    padding-top: 3rem;
    width: 48%;
}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight p, div.relatedProjs ul li a.border div.studyHighlight p, div.relatedProjs ul li a.border div.studyHighlight p.company, div.relatedProjs ul li a.border div.studyHighlight p.stat, div.relatedProjs ul li a.border div.studyHighlight p.label {
    position: relative;
    text-align: left;
    top: -9.5rem;
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: space-around;
    align-items: flex-start;
    left: .6rem;
}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight p.label span, div.relatedProjs ul li a.border div.studyHighlight p.label span {
    margin-left:0;
    width: 70%;
}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight p.company, div.relatedProjs ul li a.border div.studyHighlight p.company{
    padding-top: 4.8rem;
}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight p.stat, div.relatedProjs ul li a.border div.studyHighlight p.stat {
    padding-top: 1rem;
    color:var(--gray-fff);
}

section.landing header div.intro .heroStudies ul.v2 li a.border:hover div.studyHighlight p.stat, div.relatedProjs ul li a.border:hover div.studyHighlight p.stat {
    color: rgba(var(--color-brand-rgb), 1);
}


section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight p.label, div.relatedProjs ul li a.border div.studyHighlight p.label {
    padding-top: 2.3rem;
}

section.landing header div.intro {
    background-size: cover;
    }

.products ul li a p.label span {
        display: block;
        margin: 0;
        text-align: left;

}

    .tabcontent .products ul li a div.studyHighlight {
        margin-top: 50%;
    }

    .products ul li a p.label {
    	padding-left: 1rem;
        display: flex;
        margin: 0;
        text-align: left;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: flex-start;
        align-items: flex-start;
    }
    
       .tabcontent .heroStudies ul {
        flex-direction: column;
    }


    .heroStudies ul li, .tabcontent .heroStudies ul li, ul.vertCards li {
    	margin-bottom:2rem;
        width: 95%;
    }
    
    .tabcontent .heroStudies ul li {
        width: 100%;
    }
    
    .intro .heroStudies ul li a.border, .tabcontent .heroStudies ul li a.border, ul.vertCards li a.border {
    min-height: 14rem;
    height: 14rem;
}

ul.vertCards li a.border {
        min-height: fit-content;
        height: fit-content;
    }
  
  .heroStudies ul li a p.stat {
    	font-size: var(--fs-2p1rem);
    }
    
    .tabcontent .products ul li a div.studyHighlight {
    /* margin-top: 40%; */
	}
    
    .heroStudies ul li a div.studyHighlight, .tabcontent .heroStudies ul li a div.studyHighlight, .tabcontent .products ul li a div.studyHighlight, ul.vertCards li a div.studyHighlight {
    border-right: solid .1rem var(--gray-20-ap2);
    height: 100%;
    padding: .5rem;
    width: 56%;
    margin-top: 0%;

    }
    
    .heroStudies ul li a:hover div.studyHighlight, .tabcontent .heroStudies ul li a:hover div.studyHighlight, .tabcontent .products ul li a:hover div.studyHighlight, ul.vertCards li a:hover div.studyHighlight {
    border-right: solid .1rem var(--gray-20-ap2);
    width: 60%;
    margin-top: 0%;
    margin-bottom: 0%;
    }

    .heroStudies ul li a:hover div.studyHighlight p, ul.vertCards li a:hover div.studyHighlight p {
    padding-bottom: 0;
    }

    ul.vertCards li a:hover div.studyHighlight p {
    padding-bottom: .2rem;
    }

    .landing .successes ul li a, ul.vertCards li a {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: flex-start;
    min-height: 0;
}
    
    .heroStudies ul li a p.label {
        padding-top:0;
        margin-bottom:0;
    }
    
    .heroStudies ul li a p.stat {
        padding-top:1.2rem;
    }
    
    .heroStudies ul li a{
     justify-content: flex-start;
    }
    
    .intro .heroStudies ul li a.o4aRV, .tabcontent .heroStudies ul li a.o4aRV{
    background-size: 18rem;
   }
  
  .intro .heroStudies ul li a.o4aRV:hover, .tabcontent .heroStudies ul li a.o4aRV:hover{
    background-size: 19rem;
   }
  
  .intro .heroStudies ul li a.o4aLCS, .tabcontent .heroStudies ul li a.o4aLCS{
    background-size: 17rem;
    background-position: 100% 10%;
  }
  
  .intro .heroStudies ul li a.o4aLCS:hover, .tabcontent .heroStudies ul li a.o4aLCS:hover{
    background-size: 18rem;
    background-position: 100% 10%;
  }
  
  .intro .heroStudies ul li a.ssConvo, .tabcontent .heroStudies ul li a.ssConvo{
    background-size: 20rem;
    background-position: 121% 16%;
    }
    
.intro .heroStudies ul li a.ssConvo:hover, .tabcontent .heroStudies ul li a.ssConvo:hover{
    background-size: 21rem;
    background-position: 121% 16%;
    }

section.landing header div.intro .heroStudies ul.v2 li a.border, div.relatedProjs ul li a.border {
        display: flex;
        width: 100%;
        height: 31rem;
        text-align: center;
        margin: 0 auto;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
}

    

section.landing header div.intro .heroStudies ul.v2 li a.border img, div.relatedProjs ul li a.border img {
    position: absolute;
    width: 24rem;
}

section.landing header div.intro .heroStudies ul.v2 li a.border:hover img, div.relatedProjs ul li a.border:hover img {
    width: 24rem;
}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight, div.relatedProjs ul li a.border div.studyHighlight {
        padding-top: 0rem;
        margin-top: 13rem;
        height: 9rem;
        width: 84%;
}

section.landing header div.intro .heroStudies ul.v2 li a.border:hover div.studyHighlight, div.relatedProjs ul li a.border:hover div.studyHighlight {
    padding-top: 0;
    width: 84%;
}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight p, div.relatedProjs ul li a.border div.studyHighlight p, div.relatedProjs ul li a.border div.studyHighlight p.company, div.relatedProjs ul li a.border div.studyHighlight p.stat, div.relatedProjs ul li a.border div.studyHighlight p.label {
        position: relative;
        text-align: center;
        top: 7.5rem;
        width: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: space-around;
        align-items: flex-start;
        left: 0;
}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight p.label span, div.relatedProjs ul li a.border div.studyHighlight p.label span {
        margin: 0 auto;
        width: 70%;
        visibility: visible;
}

 div.relatedProjs ul li a.border div.studyHighlight p.label span {
        color:var(--gray-444);
}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight p.company, div.relatedProjs ul li a.border div.studyHighlight p.company {
            padding-top: 2.4rem;
}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight p.stat, div.relatedProjs ul li a.border div.studyHighlight p.stat {
    padding-top: 0;
}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight p.label, div.relatedProjs ul li a.border div.studyHighlight p.label {
    padding-top: 1.3rem;
    
}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight p.stat, div.relatedProjs ul li a.border div.studyHighlight p.stat {
    color:var(--gray-444);
}


}

@media only screen and (max-width: 640px) {

    .landing #Freelance .hero img {
        margin-left: -7rem;
        min-width: 142%;
    }


section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight p.stat, div.relatedProjs ul li a.border div.studyHighlight p.stat {
    color:var(--gray-444);
}

    .newTop {
    margin-bottom: -5.6rem;
    }

.interior .cseStudy h1 {
        color: var(--gray-222);
        text-align: left;
        line-height: 3.2rem;
        max-width: 45rem;
        margin-top: .5rem;
        font-size: var(--fs-3rem);
        width: 100%;
}

.tabcontent {
        padding: 4rem 1.5rem;
    }

.successes ul li div.metric div ul li {
        width:100%;
        margin-bottom: 2rem;
        border-right: none;

}


.successes ul li div.metric div ul.statS {
    flex-wrap: wrap;
}

div.metric div ul li p.stat, .successes ul li div.metric div ul li p.statDeet {
    text-align:center;
}

section.landing header div.intro .heroStudies ul.v2 li {
    height: auto;
    width: 100%;
}

section.landing header div.intro .heroStudies ul.v2 li.hideable {

}

section.landing header div.intro .heroStudies ul.v2 li a.border, div.relatedProjs ul li a.border {
        display: flex;
        width: 100%;
        height: 31rem;
        text-align: center;
        margin: 0 auto;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
}

    

section.landing header div.intro .heroStudies ul.v2 li a.border img, div.relatedProjs ul li a.border img {
    position: absolute;
    width: 24rem;
}

section.landing header div.intro .heroStudies ul.v2 li a.border:hover img, div.relatedProjs ul li a.border:hover img {
    width: 24rem;
}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight, div.relatedProjs ul li a.border div.studyHighlight {
        padding-top: 0rem;
        margin-top: 13rem;
        height: 9rem;
        width: 84%;
}

section.landing header div.intro .heroStudies ul.v2 li a.border:hover div.studyHighlight, div.relatedProjs ul li a.border:hover div.studyHighlight {
    padding-top: 0;
    width: 84%;
}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight p, div.relatedProjs ul li a.border div.studyHighlight p, div.relatedProjs ul li a.border div.studyHighlight p.company, div.relatedProjs ul li a.border div.studyHighlight p.stat, div.relatedProjs ul li a.border div.studyHighlight p.label {
        position: relative;
        text-align: center;
        top: 7.5rem;
        width: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: space-around;
        align-items: flex-start;
        left: 0;
}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight p.label span, div.relatedProjs ul li a.border div.studyHighlight p.label span {
        margin: 0 auto;
        width: 70%;
        visibility: visible;
}

 div.relatedProjs ul li a.border div.studyHighlight p.label span {
        color:var(--gray-444);
}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight p.company, div.relatedProjs ul li a.border div.studyHighlight p.company {
            padding-top: 2.4rem;
}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight p.stat, div.relatedProjs ul li a.border div.studyHighlight p.stat {
    padding-top: 0;
}

section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight p.label, div.relatedProjs ul li a.border div.studyHighlight p.label {
    padding-top: 1.3rem;
    
}


}

@media only screen and (max-width: 600px) {
div.megaMenu{


    }


  body {

  }

      section.landing header div.intro .heroStudies ul.homeProds li {
        width: 46%;
    }
  
  .interior #coverLetter div.divider, .int #coverLetter div.divider {
    margin-bottom: 1rem;
    margin-top: 0rem;
    }
  
   
  
  #top .tabcontent .logo svg {
        max-width: 20rem;
        max-height: 8rem;
}
  
  	section header div.topGraphic {
    	background-size: 230%;
	}
	
	.landing #BlockOne .hero img {
        margin-left: -6.5rem;
        min-width: 150%;
    }
    
    #red .hero img {
    margin-left:0;
    max-width: 1000px;
    width: 100%;
}
    
    section.interior header div.ww2c img.ww2cLogo {
    	width: 15rem;
	}
  
}

@media only screen and (max-width: 570px) {

            .landing #Freelance .hero img {
        margin-left: -6.5rem;
                min-width: 151%;
    }


	div.resume p.experience {
        padding: 0;
    	width: 100%;
    }

	div.resume ul li span {
    	/*display: inline-block;*/
    	/*width: 15rem;*/
    }

	div.resume ul li.prods div.logoRes a img{
	
		margin-left: -1.25rem;
	}
	
	div.resume ul li div.logo p{
		line-height:1.5rem;
		
	}

	    div.resume ul li.prods ul.prodButtons li{
    	width:100%;
    	margin-right: 0;
    }
    
    div.resume ul li.prods ul.prodButtons li a{
    	display:inline-block;
    	width:90%;
    }

	div.resume ul li.bullets li ul.statS li.teamStat {
        width: 8.7rem;
    }

	section header div.ww2c img.ww2cLogo {
   		width: 28rem;
	}
	
	section header div.ww2c img.color {
    	margin-top: -6.3rem;
	}
	
	
	.landing #Exadel .hero img {
        margin-left: -3.5rem;
    }
    
    footer div a.logoFooter img {
    	width: 23rem;
	}
	
	section header div.watercolor img {
    	width: 100%;
    }
    
    section header div.logo {
	    padding-top: 2rem;
	}
	
	
    
    #IJ .hero img {
    margin-bottom: -5rem;
}

#coverLetter .hero img {
    width: 95%;
}

    .introBlurb button {
    margin: 0;;
    margin-bottom: 1.3rem;
    /*width: 100%;*/
}

   .introBlurb button a{
    width: auto;
}
  
}

@media only screen and (max-width: 490px) {

    div.megaMenu{


    }

    div.megaMenu.isActive {
        height: 89vh;
    }

                .landing #Freelance .hero img {
        margin-left: -6.5rem;
                min-width: 158%;
    }

    .interior .cseStudy h1 {
         color: var(--gray-222);
        text-align: left;
        line-height: 3rem;
        max-width: 45rem;
        margin-top: .5rem;
        font-size: var(--fs-2p6rem);
        width: 100%;
}

#coverLetter h2.subTitle {
   font-size:var(--fs-1p5rem);
}

.tabcontent {
        padding: 4rem 1.2rem;
    }

    section.landing header div.intro .heroStudies ul.homeProds {
        display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
    align-items: center;
}

    section.landing header div.intro .heroStudies ul.homeProds li {
        width: 44%;
    }


	div.intro img.slashed {
    margin-bottom: 0rem;
    margin-top: 0rem;
    }
    
    section.landing header div.intro{
    	margin-top: 8rem;
    }

    section.landing header div.intro div.introBlurb {
        margin: 1rem;
        margin-top: 0;
        width: auto;
        padding: 1.5rem;
    }
    
        section.landing header div.intro h3 {
        width:100%;
    }
    
    section.landing header div.intro ul.treeBadge {
    margin-top: -7.5rem;
}


    .heroStudies ul li a div.studyHighlight, .tabcontent .products ul li a div.studyHighlight, ul.vertCards li a div.studyHighlight
 {
        width: 100%;
        
    }

    ul.vertCards li a div.studyHighlight
 {
        width: 96%;
        
    }
    

    .heroStudies ul li a:hover div.studyHighlight{

         width: 100%;
    }

ul.vertCards li a:hover div.studyHighlight {

         width: 95%;
    }


	div.resume ul li.bullets li ul.statS li.teamStat {
        width: 10.7rem;
        margin-bottom:1rem;
    }
    


div.resume ul li.bullets li ul.statS {
    flex-wrap: wrap;
}

	
	h1{
		line-height: 3.7rem;
    	font-size: var(--fs-3p2rem);
	}

	section header div.ww2c img.ww2cLogo {
   		width: 21rem;
	}
	
	section header div.ww2c img.color {
    	margin-top: -4.6rem;
	}
	
	div.intro ul li, ul.vertCards li {
		margin-bottom: 2rem;
    	width: 90%;
	}

    ul.vertCards li {
    	width: 100%;
	}

	li.button a {
		margin-right:0;
	    width: 80%;
	}
	
	section.landing header div.intro ul, ul.vertCards {
		width:100%;
    	display: flex;
    	flex-direction: column;
    	flex-wrap: nowrap;
    	align-content: space-between;
   	 	align-items: center;
    	margin-top: 4rem;
    	justify-content: space-around;
	}
	
	div.about ul.bio li p.experience {
	    width: 87%;
	}
	
	    section .exp {
        margin: 1rem 4rem 0rem 4rem;
    }
    
        .exp div.experienceJumper {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .tab button.dropdown span {
		float:right;
	}
	
	.experienceJumper button.dropdown {
        font-size: var(--fs-1p1rem);
    	font-style: italic;
    }


}

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

                    .landing #Freelance .hero img {
        margin-left: -6rem;
        min-width: 170%;
    }

    section.landing header div.intro .heroStudies ul.v2 li a.border, div.relatedProjs ul li a.border{

        height: 27rem;
    }

    section.landing header div.intro .heroStudies ul.v2 li a.border img, div.relatedProjs ul li a.border img {
        position: absolute;
        width: 22rem;
    }

    section.landing header div.intro .heroStudies ul.v2 li a.border:hover img, div.relatedProjs ul li a.border:hover img {
        position: absolute;
        width: 22.1rem;
    }

    section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight, div.relatedProjs ul li a.border div.studyHighlight {

        margin-top: 10rem;
        height: 8rem;

    }



    section.interior header div.ww2c img.ww2cLogo {
    	width: 12rem;
	}
	
	h1{
		line-height: 3.5rem;
    	font-size: var(--fs-3rem);
	}
	
	}



@media only screen and (max-width: 375px) {

    section.landing header div.intro .heroStudies ul.v2 li a.border, div.relatedProjs ul li a.border {

        height: 23rem;
    }

    section.landing header div.intro .heroStudies ul.v2 li a.border img, div.relatedProjs ul li a.border img {
        position: absolute;
        width: 16rem;
    }

    section.landing header div.intro .heroStudies ul.v2 li a.border:hover img, div.relatedProjs ul li a.border:hover img {
        position: absolute;
        width: 16.1rem;
    }

    section.landing header div.intro .heroStudies ul.v2 li a.border div.studyHighlight, div.relatedProjs ul li a.border div.studyHighlight {

        margin-top: 5rem;
        height: 8rem;

    }
div.about a.profilePicShell:hover img.profilePic {
    opacity: 1;
    transition: all var(--motion-base);
}
        div.about img.profilePicClr {
        display: none;
    }

	
	}

/*----------Animations-----------------*/



@keyframes fadeIn {
       from { opacity: 0; display: none; }
       to { opacity: .9; display: inline-block; }
     }
     
@keyframes fadeOut {
       from { opacity: .9; display:  inline-block; }
       to { opacity: 0; display:none; }
     }
     
@keyframes slideDown {
       from { top: 30px; }
       to { top: -10px; }
     }
     
@keyframes parallax {
  from { background-position: 0 0; }
  to { background-position: 0 100%; }
}

.floatNav .tab .dropdown, .floatNav div.tab{
    /* animation: fadeIn ease-in; Define the animation to be played */
   /* animation-timeline: scroll(root block); Link the animation to the document's vertical scroll */
   /*  animation-range: 0px 80px; Define the scroll range for the animation */
}


.sticky-nav, .floatNav div.tab {
   /* animation: slideDown ease-in;  Define the animation to be played */
   /* animation-timeline: scroll(root block);  Link the animation to the document's vertical scroll */
   /* animation-range: 0px 100px;  Define the scroll range for the animation */
}


.fade-on-scroll {
          opacity: 0;
          transition: opacity var(--motion-base) var(--ease-in-out);
        }

.fade-on-scroll.visible {
          opacity: 1;
        }
        
.fade-on-scroll.visible.floatNavMegaExpanded {
    margin-left: -8.5rem;
}


@keyframes scale-a-lil {
  from {
    scale: .5;
  }
}
  
@media (prefers-reduced-motion: no-preference) {
  figure img {
    animation: scale-a-lil linear both;
    animation-timeline: view();
    animation-range: 25vh 75vh;
  }
}
/* === Uniform, responsive logos inside .noBefore === */

/* 0) Site-wide (keep if you already have similar) */
img { max-width: 100%; height: auto;}

/* 1) Mobile-first layout for the logo strip */
.noBefore {
  --logo-max-h: clamp(28px, 9vw, 56px);   /* uniform visual height on phones, scales up a bit */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  align-items: center;
}

/* 2) Each cell centers its logo and never clips */
.noBefore > * {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;                 /* critical for Safari shrink */
  min-height: 0;
  overflow: visible !important; /* avoid clipping */
  position: static !important;  /* neutralize any abs positioning that can cause overlap */
  line-height: 0;               /* remove inline-img gap */
}

/* 3) Make images/SVGs uniform height, no cropping, no overlap */
.noBefore img,
.noBefore svg {
  height: var(--logo-max-h);  /* all logos same visual height */
  width: auto;                /* keep aspect ratio */
  max-width: 100%;            /* don’t spill the cell horizontally */
  object-fit: contain;        /* never crop */
}

/* 4) Kill hard-coded attributes if present in HTML */
.noBefore img[width],
.noBefore img[height] {
  width: auto !important;
  height: auto !important;
}

/* 5) iOS/Safari flex/grid shrink quirk guard */
@supports (-webkit-touch-callout: none) {
  .noBefore > * { min-width: 0; min-height: 0; }
}

/* 6) Scale up gracefully on tablets/desktops */
@media (min-width: 640px) {
  .noBefore {
    --logo-max-h: clamp(36px, 6vw, 72px); /* bump allowable height */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
  }
}
@media (min-width: 1024px) {
  .noBefore { --logo-max-h: clamp(40px, 4vw, 84px); }
}


/* === Mobile reset for the collage in .noBefore === */
@media (max-width: 640px) {
  .noBefore {
    display: grid !important;
    gap: 16px;
    align-items: center;
  }

  /* Nuke absolute layout & transforms from desktop collage */
  .noBefore * {
    position: static !important;
    inset: auto !important;        /* top/right/bottom/left */
    transform: none !important;
    float: none !important;
    z-index: auto !important;
    min-width: 0 !important;       /* Safari shrink fix */
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Make all logos render at a uniform visual size */
  .noBefore img,
  .noBefore svg {
    height: 48px;                  /* tweak to taste: 40–56px works well */
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
  }

  /* If any logos are CSS background images, size them sanely */
  .noBefore [style*="background-image"] {
    width: 100%;
    height: 48px;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
  }

  /* Kill hard-coded HTML width/height if present */
  .noBefore img[width],
  .noBefore img[height] {
    width: auto !important;
    height: auto !important;
  }
}

/* Optional: slightly taller logos on larger phones/tablets */
@media (min-width: 480px) and (max-width: 640px) {
  /*.noBefore img,
  .noBefore svg,
  .noBefore [style*="background-image"],
  .noBefore .bg-logo { height: 56px; } */
}


@media (max-width: 640px) {
  .noBefore * {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
  }

  .noBefore {
    display: grid;
    gap: 16px;
  }

  .noBefore img {
  o;
    object-fit: contain;
  }
}


/* ===== Astro-only additions below this line ===== */
/* Not present in the legacy css/main.css - intentional, documented
   divergences from the Phase 1 original, per docs/phase-2-plan.md. */

/* Case-study body prose links: NOT a new rule. `.tabcontent p a`
   (css/main.css, unchanged, already in the legacy stylesheet) already
   styles every link inside a <p> within the #coverLetter.tabcontent.
   cseStudy wrapper - muted gray-160, color-transitions to the brand
   pink on hover, no border-bottom. An earlier commit here added a
   second, conflicting `.cseStudy p a` rule (border-bottom treatment
   copied from index.html's unrelated div.intro p a) that happened to
   win the cascade by appearing later in the file - removed. Matches
   Tony's own styled prototype, which adds no link CSS of its own at
   all and just relies on the existing `.tabcontent p a` rule.

   Jump-to-section menu (off by default, per-page opt-in via content
   frontmatter - see astro/src/components/blocks/JumpToMenu.astro).
   Modeled on Tony's own prototype styling, including its one new rule,
   p.jumpTo (added here as-is, matching his values exactly). */
p.jumpTo {
    font-size: 1rem;
    font-style: oblique;
    margin: 0 auto;
    margin-top: .5rem;
    margin-bottom: -1rem;
    line-height: 1.5rem;
}

/* scroll-margin-top keeps a jumped-to heading clear of the sticky/
   floating header; harmless on every other heading id too (e.g. the
   pre-existing #Projs related-projects heading) since it has no visual
   effect unless something actually scrolls to that id. */
.cseStudy [id] {
    scroll-margin-top: 4rem;
}

/* Smooth-scroll only when the jump menu is actually on the page
   (detected via its one distinctive class, p.jumpTo), and only when
   the visitor hasn't asked for reduced motion. screenshot.js's
   stabilizePage() already forces scroll-behavior:auto during capture,
   so this doesn't affect visual-regression testing either way. */
@media (prefers-reduced-motion: no-preference) {
    html:has(.jumpTo) {
        scroll-behavior: smooth;
    }
}

/* Inline links inside case-study h6 headings (e.g. "Most recently at
   Ozmo, I was brought on to...") aren't covered by the pre-existing
   .tabcontent p a rule (css/main.css line ~5327) - that one requires
   a <p> ancestor, and this link sits directly in an <h6>. Currently
   unstyled otherwise, so it was rendering as a bare browser-default
   link (underlined, default blue/visited-purple). Same treatment as
   that rule's already-established values, extended to h6 specifically
   per Tony's request, with a matching :visited state and hover-to-
   brand-color for consistency with every other instance of this same
   link pattern across the site. */
.cseStudy h6 a,
.cseStudy h6 a:visited {
    text-decoration: none;
    border-bottom: var(--gray-ccc) solid .1rem;
    color: var(--gray-60-a1);
    transition: all var(--motion-base);
}

.cseStudy h6 a:hover {
    color: rgba(var(--color-brand-rgb), 1);
}

/* Phase 2 standardization (docs/standards.md §1): names for the content-well
   pattern already used by 41 of 43 legacy pages (1366px max-width, centered,
   32px -> 19px responsive side padding). Not yet consumed by a Container
   component here - case-study pages already get these values from the
   legacy .tabcontent/#coverLetter rules (also generalized below to drop
   their .interior-only scoping, see docs/standards.md §1 and §5). Added now
   so future page types can reference the same values instead of repeating
   the literals. */
:root {
    --content-max-width: 1366px;
    --content-pad-desktop: 2rem;
    --content-pad-mobile: 1.2rem;
}

/* BackToTop (docs/standards.md §3): previously `div.Back2TopShell` was
   `position: sticky` inside each page's own content column, always
   visible. Now rendered once in BaseLayout, outside any content column, so
   it needs real viewport-fixed positioning - and the fade-in is new
   (.fade-on-scroll/.visible already existed for the sticky-nav reveal;
   BackToTop reuses that same pattern via its own #backToTop id, so this
   doesn't change the nav's existing behavior). */
#backToTop {
    position: fixed;
    top: auto;
    left: auto;
    right: 1rem;
    bottom: 1rem;
    height: auto;
    z-index: 100000;
}

/* a.return's own rule (css/main.css) is `position: sticky; top: 81%;
   left: 100%` - written for the old layout, where BackToTop sat inline in
   the page's scrollable content column and those percentages resolved
   against that column. Now that #backToTop is a small `position: fixed`
   box, that same sticky/top/left combination resolves against the
   document's full scroll height/width instead, pushing the actual button
   thousands of pixels down-and-right of the fixed box - the box itself
   then collapses to the small sliver of empty space around it, which is
   all that was ever on screen. Neutralized to a plain static child. */
#backToTop a.return {
    position: static;
    top: auto;
    left: auto;
    height: auto;
}

/* #backToTop is already pinned 1rem above the viewport bottom, so drop the
   legacy lift (div.Back2Top's translateY), which would double it. */
#backToTop div.Back2Top {
    transform: none;
}

/* At <=850px legacy pulls div.Back2Top 20px right (margin-right: -20px) to
   sit in the content column's padding; against #backToTop's fixed 1rem
   inset that put the button 4px past the window's right edge. */
@media only screen and (max-width: 850px) {
    #backToTop div.Back2Top {
        margin-right: 0;
    }
}

/* Hamburger menu items cascade in (Phase 2b idea #3).
   Opening: each item fades in and slides --nav-slide-from (20px) toward
   its place, starting --motion-stagger after the one above, so six items
   finish in about a third of a second. Closing: no cascade; all items fade
   out together, quickly. Closed items stay display:none (as before);
   @starting-style gives the open animation its starting point, and
   transition-behavior: allow-discrete lets display wait for the fade-out.
   Browsers without @starting-style simply show/hide the items instantly.
   Links stay clickable throughout. Reduced motion: the tokens are ~0. */
.floatNav {
    --nav-slide-from: -20px;                       /* menu on the left: items come from the left */
    --nav-item-in: calc(var(--motion-fast) / 3);   /* 0.1s per item */
    --nav-items-out: calc(var(--motion-fast) / 2); /* 0.15s, all together */
}

@media only screen and (max-width: 960px) {
    .floatNav {
        --nav-slide-from: 20px;                    /* menu on the right: items come from the right */
    }
}

.floatNav .tab > span.tablinks {
    opacity: 1;
    transform: none;
    transition: opacity var(--nav-item-in) var(--ease-out) calc(var(--i, 0) * var(--motion-stagger)),
                transform var(--nav-item-in) var(--ease-out) calc(var(--i, 0) * var(--motion-stagger)),
                display var(--nav-item-in) allow-discrete;
}

@starting-style {
    .floatNav .tab > span.tablinks {
        opacity: 0;
        transform: translateX(var(--nav-slide-from));
    }
}

.floatNav .tab > span.tablinks.hide {
    display: none;
    opacity: 0;
    transform: none;
    transition: opacity var(--nav-items-out) var(--ease-default),
                display var(--nav-items-out) allow-discrete;
}

/* Cascade order, top to bottom. nth-of-type counts only the item spans
   (the hamburger <button> doesn't count); the first item keeps --i: 0. */
.floatNav .tab > span.tablinks:nth-of-type(2) { --i: 1; }
.floatNav .tab > span.tablinks:nth-of-type(3) { --i: 2; }
.floatNav .tab > span.tablinks:nth-of-type(4) { --i: 3; }
.floatNav .tab > span.tablinks:nth-of-type(5) { --i: 4; }
.floatNav .tab > span.tablinks:nth-of-type(6) { --i: 5; }

/* Mega menu project sections open and close smoothly (Phase 2b idea #2).
   Each list sits in a .nestyPanel grid whose single row animates between
   0fr and 1fr, i.e. to the list's real height, whatever it is. Closing is
   a little quicker than opening (0.7x). The list also fades: in slightly
   after the panel starts opening, out quickly as it closes. Once shut,
   the panel is visibility:hidden, so its links leave the Tab order.
   prefers-reduced-motion: the tokens are ~0, so it simply opens/closes. */
div.megaMenu li.sectionHdr .nestyPanel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows calc(var(--motion-base) * 0.7) var(--ease-cubic),
                visibility 0s linear calc(var(--motion-base) * 0.7);
}

div.megaMenu li.sectionHdr.expanded .nestyPanel {
    grid-template-rows: 1fr;
    /* inherit, not visible: a visible child would show through the closed
       (visibility:hidden) menu and its links would be tabbable. */
    visibility: inherit;
    transition: grid-template-rows var(--motion-base) var(--ease-cubic),
                visibility 0s linear 0s;
}

/* display:flex (the list's normal layout) overrides the <=1100px
   "ul.nestyGroup {display:none}": the panel does the hiding now. The list's
   1rem top padding can't shrink with the row, so it closes with it. */
div.megaMenu li.sectionHdr .nestyPanel > ul.nestyGroup {
    display: flex;
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
    transition: opacity calc(var(--motion-fast) * 0.7) var(--ease-default),
                padding-top calc(var(--motion-base) * 0.7) var(--ease-cubic);
}

div.megaMenu li.sectionHdr.expanded .nestyPanel > ul.nestyGroup {
    opacity: 1;
    padding-top: 1rem;
    transition: opacity var(--motion-base) var(--ease-default) calc(var(--motion-fast) * 0.3),
                padding-top var(--motion-base) var(--ease-cubic);
}

@media (prefers-reduced-motion: reduce) {
    #backToTop {
        transition: none;
    }

    /* The nav/button glow spins forever; hold it still (still visible).
       Here, after the spin rule, so it wins at equal specificity. */
    button:not(:where(.accordion)) a::before, span:where(.careerLink) a::before, .tab button a::before, div.showMore button::before,
    button:not(:where(.accordion)) a:hover::before, span:where(.careerLink) a:hover::before, .tab button a:hover::before,
    .tab button a.current::before, div.showMore button:hover::before, .tab > span a::before, .tab > span a:hover::before, .tab > span a.current::before{
        animation: none;
    }
}

/* Project hero sizing (docs/project-hero-sizes.md), replacing every
   #<wrapperId> .hero img per-page rule with two named sizes. Values are
   the real measured rendered widths of the legacy "standard"/"compact"
   tier clusters (testing/layout-reports/hero-audit.json) at each
   viewport, not recomputed percentages - the .hero container's own width
   isn't a clean 100%/some-fraction of the content column (confirmed via
   direct measurement), so matching the previously-approved pixel outcome
   directly is more reliable than re-deriving a percentage against an
   unpredictable container. */
.hero img.heroSize-standard {
    width: 979px;
    max-width: none;
    margin: 0 0 -1rem; /* keep the site-wide .hero img overlap (was dropped by margin: 0) */
}

.hero img.heroSize-compact {
    width: 847px;
    max-width: none;
    margin: 0 0 -1rem; /* keep the site-wide .hero img overlap (was dropped by margin: 0) */
}

@media only screen and (max-width: 768px) {
    .hero img.heroSize-standard {
        width: 672px;
    }

    .hero img.heroSize-compact {
        width: 634px;
    }
}

@media only screen and (max-width: 480px) {
    .hero img.heroSize-standard {
        width: 322px;
    }

    .hero img.heroSize-compact {
        width: 293px;
    }
}