body {
	font-size:16px;
	background:#f2f2f2;
	padding:0rem;
	padding-top:2rem;
	padding-bottom:2rem;
	margin:0rem;
	font-family:'Comic Neue', Arial, Helvetica, sans-serif;
	min-width:320px;
}
.colorholder {
	background: #987F69;
}

.frame {
	display:flex;
	flex:1;
	flex-wrap:wrap;
	max-width:1440px;
	margin-left:auto;
	margin-right:auto;
	background:#fff;
	padding:2rem;
	position:relative;
	min-width:320px;
}
.back {
   font-family:'Bangers', Arial, Helvetica, sans-serif;
	font-size:1.8rem;
  color: #fff;
  text-decoration:none;
  z-index:1200;
  --f: .5em; /* control the folded part*/
  --r: .8em; /* control the ribbon shape */
  
  position: absolute;
  top: 20px;
  left: calc(-1*var(--f));
  padding-inline: .25em;
  line-height: 1.8;
  background: #d31b20;
  border-bottom: var(--f) solid #0005;
  border-right: var(--r) solid #0000;
  clip-path: 
    polygon(0 0,0 calc(100% - var(--f)),var(--f) 100%,
      var(--f) calc(100% - var(--f)),100% calc(100% - var(--f)),
      calc(100% - var(--r)) calc(50% - var(--f)/2),100% 0);
}

header, main, footer {
	display:flex;
	flex:1 100%;
	flex-wrap:wrap;
	min-height:400px;
	margin-bottom:1rem;
	position:relative;
	overflow:hidden;
}
header {
	background:#ff8d00;
	background:#d8fafa;
	background-image:url('../img/burstbacker3.png'); 
	background-position:top center;
	background-size:100%;
	--a: 3rem; /* control the shape (can be percentage) */
  clip-path: polygon(0 0,100% 0,100% calc(100% - var(--a)),0 100%);
  padding-top:4rem;

}
.casestudy header {
	align-content:flex-start;
}


main {
	--b: 3rem; /* control the shape (can be percentage) */
  clip-path: polygon(0 var(--b),0 calc(100% - var(--b)),100% 100%,100% 0);
  background: #fff;
  margin-top:-2rem;
  justify-content: space-between;
}

footer {
	background-color:#31281d;
	background-image:url('../img/background/robotbacker.png');
	background-size:auto 150%;
	background-position:top right;
	background-repeat:no-repeat;
	 --c: 3rem; /* control the shape (can be percentage) */
  clip-path: polygon(0 0,100% var(--c),100% 100%,0 100%);
  margin-top:-2rem;
}
#herorobot {
	position:absolute;
	bottom:-4rem;
	left:44%;
	height:60%;
}
footer h5 {
	font-family:'Bangers', Arial, Helvetica, sans-serif;
	font-size:3rem;
	width:30%;
	color:#fff;
	margin-left:2rem;
}
footer h5 .social {
	margin-top:1rem;
	flex:1 100%;
}
footer h5 .social a img {
	max-width:44px;
}
.home header h1, .home header h2, .casestudy header h1, .casestudy header h2, .casestudy2 header h1, .casestudy2 header h2 {
	display:flex;
	flex:1 100%;
	font-family:'Bangers', Arial, Helvetica, sans-serif;
	justify-content: center;
	color:#1c2f50;
	margin-block-start: 0em;
    margin-block-end: 0em;
    z-index:400;
}

.cloud {
	position:absolute;
	top:-2rem;
	right:-2rem;
	transform:rotate(180deg);
	  height: 180px; /* control the size */
    aspect-ratio: 1.8;
    --g: radial-gradient(50% 50%, #000 98%, #0000) no-repeat;
    mask: var(--g) 100% 100%/30% 60%,var(--g) 70% 0/50% 100%,var(--g) 0 100%/36% 68%,var(--g) 27% 18%/26% 40%,linear-gradient(#000 0 0) bottom/67% 58% no-repeat;
    background: #fff;
    z-index:399;
}

.cloud2 {
	position:absolute;
	top:-2rem;
	left:-5rem;
	transform:rotate(170deg);
	  height: 200px; /* control the size */
    aspect-ratio: 1.8;
    --g: radial-gradient(50% 50%, #000 98%, #0000) no-repeat;
    mask: var(--g) 100% 100%/30% 60%,var(--g) 70% 0/50% 100%,var(--g) 0 100%/36% 68%,var(--g) 27% 18%/26% 40%,linear-gradient(#000 0 0) bottom/67% 58% no-repeat;
    background: #fff;
    z-index:399;
}

.cloud3 {
	position:absolute;
	bottom:-3rem;
	right:10%;
	  height: 300px; /* control the size */
    aspect-ratio: 1.8;
    --g: radial-gradient(50% 50%, #000 98%, #0000) no-repeat;
    mask: var(--g) 100% 100%/30% 60%,var(--g) 70% 0/50% 100%,var(--g) 0 100%/36% 68%,var(--g) 27% 18%/26% 40%,linear-gradient(#000 0 0) bottom/67% 58% no-repeat;
    background: #fff;
    z-index:399;
}

.cloud4 {
	position:absolute;
	bottom:-2rem;
	left:10%;
	  height: 240px; /* control the size */
    aspect-ratio: 1.8;
    --g: radial-gradient(50% 50%, #000 98%, #0000) no-repeat;
    mask: var(--g) 100% 100%/30% 60%,var(--g) 70% 0/50% 100%,var(--g) 0 100%/36% 68%,var(--g) 27% 18%/26% 40%,linear-gradient(#000 0 0) bottom/67% 58% no-repeat;
    background: #fff;
    z-index:399;
}
.cloud5 {
	position:absolute;
	bottom:0rem;
	left:calc(50% - 228px);
	  height: 260px; /* control the size */
    aspect-ratio: 1.8;
    --g: radial-gradient(50% 50%, #000 98%, #0000) no-repeat;
    mask: var(--g) 100% 100%/30% 60%,var(--g) 70% 0/50% 100%,var(--g) 0 100%/36% 68%,var(--g) 27% 18%/26% 40%,linear-gradient(#000 0 0) bottom/67% 58% no-repeat;
    background: #fff;
    z-index:399;
}


.home header h1 {
	font-size:8rem;
}

.home header h2 {
	font-size:3rem;
}


.home main article {
	display:flex;
	flex:0 calc(50% - 1rem);
	min-height:300px;
	background:#ccc;
	margin-bottom:2rem;
	z-index:500;
	overflow:hidden;
}

.home main article.smaller{
	display:flex;
	flex:0 calc(46%);
	min-height:300px;
	background:#ccc;
}
.home main article.larger {
	display:flex;
	flex:0 calc(54%);
	min-height:300px;
	background:#ccc;
}

.home main article.intro {
	font-size:1.5rem;
	padding:3rem;
	flex:0 calc(50% - 8rem);
	align-items:center;
	align-content:center;
	padding-top:4rem;
	padding-right:4rem;
	background-color:#d31b20;
	background-image:url('../img/background/textbacker2.png');
	background-position:top center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	color:#fff;
	flex-wrap:wrap;
	position:relative;
	overflow:visible;
}
.notch-fill {
	position:absolute;
	right:-40px;
	z-index: 501;
	width:40px;
  height: 80px;
  aspect-ratio: cos(30deg);
  clip-path: polygon(0 0,100% 50%,0 100%);
  background: #d31b20;
  top:calc(50% - 40px);
  bottom:calc(50% - 40px);
}
.home main article a {
	display:flex;
	flex:1;
	position:relative;
}
.readthestory2 {
	display:none;
	position:absolute;
	right:0px;
	bottom:3rem;
  font-family:'Bangers', Arial, Helvetica, sans-serif;
	font-size:1.8rem;
  color: #fff;

  --r: .8em; /* control the cutout */
  
  border-block: .5em solid #0000;
  padding-inline: calc(var(--r) + .25em) .5em;
  line-height: 1.8;
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%,0 calc(100% - .25em),var(--r) 50%,0 .25em);
  background:
   radial-gradient(.2em 50% at right,#000a,#0000) border-box,
   #d31b20 padding-box; /* the color  */
  width: fit-content;
}

.auto .readthestory2, .citystreet .readthestory2 {
	right:unset;
	left:0px;
	 padding-inline: .5em calc(var(--r) + .25em); 
  clip-path: polygon(100% 0,0 0,0 100%,100% 100%,100% calc(100% - .25em),calc(100% - var(--r)) 50%,100% .25em);
  background:
   radial-gradient(.2em 50% at left,#000a,#0000) border-box,
   #d31b20 padding-box; /* the color  */
  width: fit-content;
}
.home main article a:hover .readthestory2 {
	display:flex;
}
.home.mobile main article a .readthestory2 {
	display:flex;
}
.casestudy main {
	justify-content: space-between;
}
.casestudy main article, .casestudy2 main article  {
	flex:0 calc(50%);
	background:#ccc;
	min-height:260px;
	margin-bottom:2rem;
	justify-content: space-between;
	display:flex;
	align-items:stretch;
	position:relative;
	overflow:hidden;
}
.casestudy2 main article {
	flex:1 100%;
	flex-wrap:wrap;
	flex-direction:row;
	background-repeat:no-repeat;
	
}
.casestudy2 main article .left, .casestudy2 main article .right {
	display:flex;
	flex:1 40%;
	max-width:50%;
	position:relative;
	z-index:400;
}
.casestudy2 main article.role {
	background-image:url('../img/csback/Role.png');
	background-repeat:none;
	background-size:100% 100%;
	background-position:center center;
}
.casestudy2 main article.research {
	background-image:url('../img/csback/research-back.png');
		background-repeat:none;
	background-size:100% 100%;
	background-position:center center;
}
.casestudy2 main article.research img{
	max-height:400px;
	margin-left:auto;
	margin-right:auto;
}
.casestudy2 main article.swap {
	flex-direction:row-reverse;
}
.casestudy2 main article.role .right {
	background:#1c2f5080;
}
.casestudy2 main article .text {
	flex:1 calc(60% - 8rem);
	padding:4rem;
	color:#fff;
	font-size:1.25rem;
	flex-wrap:wrap;
	align-content: center;
}
.casestudy2 main article.research .text {
	background:#0456a0f2;
}
.casestudy2 main article.usertesting {
	background:#e0fbfb;
	background-image:url('../img/csback/ustestback.png');
	background-position:top center;
	background-size:100% 100%;
	background-repaat:no-repeat;
}
.casestudy2 main article.strategy {
	background:#e0fbfb;
}
.casestudy2 main article.strategy .text{
	color:#121212;
}
.casestudy2 main article.usertesting .text{
	color:#121212;
}
.casestudy2 main article.outcome {
	background:#121212;
}
.casestudy2 main article.design {
	background:#e98d8f;
	background-image:url('../img/csback/designbacker.png');
	background-size:auto 100%;
	background-position:top right;
	background-repeat:no-repeat;
}
.casestudy2 main article.design .text {
	background:#d31b20f2;
	padding-top:5rem;
}
.casestudy2 main article .caption {
	position:absolute;
	top:0px;
	left:0px;
	bottom:unset;
	max-width:fit-content;
	padding:1rem;
	padding-left:1rem;
	padding-right:1.5rem;
	color:#121212;
	z-index:402;
	  --p: 1rem; /* control the shape (can be percentage) */
  clip-path: polygon(0 0,100% 0,calc(100% - var(--p)) 100%,0 100%);
}
.casestudy2 main article.role .caption {
	top:2rem;
	transform:rotate(-2.5deg);
	left:-1rem;
	padding-left:2rem;
	padding-top:2rem;
}
.casestudy2 main article img {
	max-width:100%;
	height:auto;
	position:relative;
}
.casestudy2 main article.outcome {
	margin-bottom: -2rem;
}
.casestudy2 main article.outcome .text {
	padding-top:5rem;
	padding-bottom:7rem;
}
.casestudy header {
	min-height:unset;
	padding-bottom:12rem;
}
.casestudy .slant-left {
	
}

.casestudy .description {
	display:flex;
	flex:1 100%;
	flex-wrap:wrap;
	overflow:visible;
	position:relative;
	z-index:900;
	justify-content: center;
	align-content:center;
	height:200px;
}
.casestudy2 header {
	align-items:space-around;
	align-content:flex-start;
}
.casestudy header h1, .casestudy2 header h1  {
	font-size:4.5rem;
	margin-left:4rem;
	margin-right:4rem;
}
.casestudy2 header h1 {
	line-height:4.3rem;
}
.casestudy header h2, .casestudy2 header h2 {
	font-family:'Comic Neue', Arial, Helvetica, sans-serif;
	font-size:1.5rem;
	max-width:calc(800px - 6rem);
	margin-left:auto;
	margin-right:auto;
	padding-left:3rem;
	padding-right:3rem;

}
.casestudy2 header h2 {
	font-size:1.25rem;
}

.casestudy main article:first-child {
	padding-top:2rem;
}
.casestudy article h3 {
	display:flex;
	flex:1;
	padding:2rem;
	max-width:20%;
	font-family:'Bangers', Arial, Helvetica, sans-serif;
	font-size:3rem;
	justify-content: center;
	align-items:center;
	align-content:center;
}
.casestudy article p {
	display:flex;
	flex:1;
	max-width:calc(770px + 4rem);
	padding:2rem;
	align-items:center;
	align-content:center;
}

.metricstripe {
	display:flex;
	flex:1 100%;
	flex-wrap:wrap;
	max-height:0px;
	overflow:visible;
	margin-bottom:0rem;
	position:absolute;
	width:100%;
	z-index:900;
	justify-content: center;
	align-content:baseline;
	bottom:-.5rem;

}

.metric3 {
		position:relative;
		margin-top:-180px;
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
	align-items:center;
	align-content:center;
	flex:1 20%;
	max-width:20%;
	height: 180px; /* control the size */
    aspect-ratio: 1.8;
    --g: radial-gradient(50% 50%, #000 98%, #0000) no-repeat;
    mask: var(--g) 100% 100%/30% 60%,var(--g) 70% 0/50% 100%,var(--g) 0 100%/36% 68%,var(--g) 27% 18%/26% 40%,linear-gradient(#000 0 0) bottom/67% 58% no-repeat;
    background: #fff;
    margin-bottom:-1rem;
    margin-right:-2rem;
}
.metric3.center {
	bottom:1rem;
}
.metric3.flip {
	 transform:scale(-1,1);
	 margin-left:-3rem;
}
.metric3 .desc, .metric3 .number {
	color:#121212;
	flex:1 100%;
	text-align: center;
}
.metric3 .desc {
	color:#1c2f50;
	display:flex;
	flex:1 calc(100% - 4rem);
	justify-content:center;
	text-align:center;
	font-size:1rem;
	margin-bottom:1rem;
	padding-left:2rem;
	padding-right:2rem;
	z-index:401;
}
.metric3 .number {
	font-family:'Bangers', Arial, Helvetica, sans-serif;
	font-size:3rem;
	color:#1c2f50;
	display:flex;
	flex:1 100%;
	justify-content:center;
	padding-top:1rem;
	z-index:401;
}
.metric3.flip .number, .metric3.flip .desc {
	 transform:scale(-1,1);
}

.casestudy main article.metrics, .casestudy main article.gallery {
	flex:1 100%;
	background:#ccc;
	min-height:200px;
}
.casestudy main article.metrics {
	display:flex;
	justify-content: space-between;
	background:#fff;
}
.casestudy main article.metrics .impacts {
	flex:1 calc(25% - 1.5rem);
	max-width:calc(25% - 1.5rem);
	background:#000;
	justify-content:center;
	align-items:flex-end;
	align-content:flex-end;
	display:flex;
	flex-wrap:wrap;	
}
.casestudy main article.metrics .impacts .number {
	font-family:'Bangers', Arial, Helvetica, sans-serif;
	font-size:5rem;
	color:#fff;
	display:flex;
	flex:1 100%;
	justify-content:center;
}
.casestudy main article.metrics .impacts .desc {
	color:#fff;
	display:flex;
	flex:1 100%;
	justify-content:center;
	font-size:1.5rem;
	margin-bottom:1rem;
}
.casestudy main article.gallery {
	--p: 2rem; /* control the shape (can be percentage) */
  clip-path: polygon(0 var(--p),0 100%,100% calc(100% - var(--p)),100% 0);
  margin-top:-4rem;
  margin-bottom:-4rem;
  z-index:800;
  background:#fff;
}
.casestudy main article.gallery2 {
	--p: 2rem; /* control the shape (can be percentage) */
  clip-path: polygon(0 calc(100% - var(--p)),0 0,100% var(--p),100% 100%);
  margin-top:-4rem;
  margin-bottom:-4rem;
  z-index:800;
  background:#fff;
}
.casestudy main article.smaller {
	flex:1 calc(30% - 1rem);
	display:flex;
	margin-right:2rem;
	background:#1c2f50;
	color:#fff;
	font-family:'Bangers', Arial, Helvetica, sans-serif;
	font-size:3rem;
	justify-content: center;
	align-content:center;
	align-items:center;
	min-height:400px;
	position:relative;
}
.casestudy main article.larger {
	flex:1 calc(70% - 9rem);
	max-width:calc(770px + 8rem);
	padding:4rem;
	font-size:1.25rem;
	align-items:center;
	align-content:center;
}
.casestudy main article.slant-left, .casestudy main article.right-slant, .casestudy main article.slant-right, .casestudy main article.left-slant, .casestudy main article.trapezoid {
	margin-right:0rem;
	
}
.casestudy main article.left-slant .comic-caption {
	padding-left:3.5rem;
}
.csimage {
	position:absolute;
	z-index:400;

}
.cstitle {
	z-index:401;
	text-shadow:
                0 0 5px #1c2f50,
                0 0 10px #1c2f50,
                0 0 20px #1c2f50,
                0 0 40px #1c2f50,
                0 0 80px #1c2f50;
}
.casestudy main article.smaller.utest {
	background-image:url('../img/csback/utestback.png');
	background-position:bottom left;
	background-size:100% 100%;
	background-repeat:no-repeat;
}
.utest .csimage {
	bottom:0px;
	left:0px;
}
.casestudy main article.smaller.resstrat {
	background-image:url('../img/csback/researchback.png');
	background-position:bottom left;
	background-size:100% 100%;
	background-repeat:no-repeat;
}
.resstrat .csimage {
	top:0px;
	left:auto;
	right:auto;
	height:80%;
}
.casestudy main article.smaller.design {
	background-image:url('../img/csback/designback.png');
	background-position:bottom left;
	background-size:100% 100%;
	background-repeat:no-repeat;
}
.design .csimage {
	bottom:0px;
	left:auto;
	right:auto;
	width:80%;
}
img.leftside {
	left:0px;
	bottom:0px;
	height:100%;
}

.casestudy main article.role {
	flex:1 100%;
	background-image:url('../img/csback/role.png');
	background-position:top left;
	background-size:100% auto;
	background-repeat:no-repeat;
	position:relative;
	justify-content: center;
	align-items:center;
	align-content:center;
	padding-top:4rem;
	padding-bottom:2rem;
}
.casestudy main article img {
	position:absolute;
	
	z-index:400;
}
.casestudy main article.role img {
	width:31%;
	left:0px;
	bottom:0px;
}
.casestudy main article.research img {
	width:20%;
	left:40%;
	bottom:0px;
}

.casestudy main article.research {
	background-image:url('../img/csback/research-back.png');
	background-position:top center;
	background-size:100% 100%;
	background-repeat:no-repeat;
}
.casestudy main article.strategy {
	background:#e0fbfb;
}
.casestudy main article.design {
	background:#fde9d8;

}
.casestudy main article.design img {
	height:100%;
	right:0px;
	bottom:0px;
}
.casestudy main article.outcome{
	background-color:#121212;
	background-image:url('../img/csback/outcomeback.png');
	background-position:center right;
	background-size:auto 120%;
	background-repeat:no-repeat;
	margin-bottom:0rem;
}
.casestudy main article.usertesting {
	background:#e0fbfb;
	background-image:url('../img/csback/ustestback.png');
	background-position:center center;
	background-size:100% 100%;
	background-repeat:no-repeat;
}
.casestudy main article.usertesting img {
	width:40%;
	left:0px;
	bottom:0px;
}

.casestudy main article.role .description {
	padding:3rem;
	flex:1;
	max-width:calc(770px + 6rem);
	font-size:1.25rem;
	background:#fff;
	color:#121212;
	max-height:fit-content;
	margin-left:auto;
	margin-right:2rem;
	box-shadow:2px 4px 2px #121212;

}
.casestudy main article.strategy .description, .casestudy main article.usertesting .description {
		padding:3rem;
	flex:1;
	max-width:calc(770px + 6rem);
	font-size:1.25rem;
	
	background:#fff;
	color:#121212;
	max-height:fit-content;
	margin:0px;
	margin-top:.75rem;
	margin-left:auto;
	margin-right:2rem;
	box-shadow:2px 4px 2px #121212;

}
.casestudy main article.full {
	flex:1 100%;
}
.casestudy main article.research .description1 {
	font-size:1.25rem;
	z-index:401;
	width:30%;
	max-height:fit-content;
	margin-top:10%;
	margin-left:calc(10%);
  --b: 3em; /* tail dimension */

  --p: 77%;  /* main position (0%:top 100%:bottom) */
  --r: 1.2em; /* the radius */

  padding: 1em;
  border-radius: var(--r)/var(--r) min(var(--r),var(--p) - var(--b)/4) min(var(--r),100% - var(--p) - var(--b)/4) var(--r);
  background: #fff; /* the main color */
  position: relative;
}
.casestudy main article.research .description1:before {
  content: "";
  position: absolute;
  left: 100%;
  top: clamp(var(--b)/-2,var(--p) - 3*var(--b)/4,100% - var(--b));
  width: var(--b);
  aspect-ratio: 1;
  background: inherit;
  --g:#000 calc(100% - 1px),#0000;
  -webkit-mask: 
    radial-gradient(circle closest-side at 88% 12%,var(--g)),
    radial-gradient(20% 20% at 55% 52%,var(--g)),
    radial-gradient(25% 25% at 0 75%,var(--g));

}
.casestudy main article.research .description2 {
	font-size:1.25rem;
	z-index:401;
	width:30%;
	max-height:fit-content;
	margin-top:5%;
	margin-bottom:5%;
	margin-right:10%;
  --b: 3em; /* tail dimension */

  --p: 50%;  /* main position (0%:top 100%:bottom) */
  --r: 1.2em; /* the radius */

  padding: 1em;
  border-radius: var(--r)/min(var(--r),var(--p) - var(--b)/4) var(--r) var(--r) min(var(--r),100% - var(--p) - var(--b)/4);
  background: #fff; /* the main color */
  position: relative;
}
.casestudy main article.research .description2:before {
  content: "";
  position: absolute;
  right: 100%;
  top: clamp(0%,var(--p) - var(--b)/4,100% - var(--b)/2);
  width: var(--b);
  aspect-ratio: 1;
  background: inherit;
  --g:#000 calc(100% - 1px),#0000;
  -webkit-mask: 
    radial-gradient(circle closest-side at 12% 88%,var(--g)),
    radial-gradient(20% 20% at 45% 48%,var(--g)),
    radial-gradient(25% 25% at 100% 25%,var(--g));

}
.casestudy main article.design {
	align-items:flex-start;
	align-content:center;
}
.casestudy main article.design .caption {

}
.casestudy main article.design .description {
	font-size:1.25rem;
  /* tail dimension */
  --b: 4em;   /* base */
  --h: 10em; /* height */
  --t: .8;    /* thickness (from 0 to 1) */

  --p: 78%;  /* main position (0%:top 100%:bottom) */
  --r: 1.2em; /* the radius */
  margin-left:2rem;
  margin-top:auto;
	margin-bottom:1rem;
  max-width:calc(770px + 6rem);
  padding: 3rem;
  max-height:fit-content;
  border-radius: var(--r)/var(--r) min(var(--r),var(--p) - (1 - var(--t))*var(--b)/2) min(var(--r),100% - var(--p) - (1 - var(--t))*var(--b)/2) var(--r);
  background: #fff; /* the main color */
  position: relative;
}
.casestudy main article.design .description:before {
  content: "";
  position: absolute;
  left: 100%;
  top: clamp(-1*var(--t)*var(--b),var(--p) - (var(--t) + 1)*var(--b)/2,100% - var(--b));
  width: var(--h);
  height: var(--b);
  background: inherit;
  border-bottom-right-radius: 100%;
  -webkit-mask: radial-gradient(105% calc(var(--t)*100%) at 0 0,#0000 99%,#000 101%);

}

.casestudy main article .comic-caption, .casestudy2 main article .comic-caption {
	z-index:402;
	--p: 2rem; /* control the shape (can be percentage) */
  height: fit-content;
  padding:1rem;	
  padding-top:.5rem;
  padding-right:2.5rem;
  padding-left:2rem;
  clip-path: polygon(0 0,100% 0,calc(100% - var(--p)) 100%,0 100%);
  font-size:1.5rem;
  color:#121212;
  background:#ffd066;
  position:absolute;
  font-weight:bold;
  left:-1rem;
  font-variant: small-caps;
  max-height:fit-content;
}
.comic-caption .firstcapital, .casestudy2 .caption .firstcapital {
	font-family:'Bangers', Arial, Helvetica, sans-serif;
	font-size:2rem;
	padding-top:5px;
	margin-right:2px;
	font-variant: unset;
	color:#8d1215;
	margin-top:2rem;
}
.comic-caption.slant-up {
	transform:rotate(-2.5deg);
	padding-top:2.5rem !important;
	top:1rem;
}


.slant-left {
	--r: 2rem; /* control the shape (can be percentage) */
  clip-path: polygon(0 0,calc(100% - var(--r)) 0,100% 100%,0 100%);

}
.right-slant {
	 --s: 2rem; /* control the shape (can be percentage) */
  clip-path: polygon(0 0,100% 0,100% 100%,var(--s) 100%);
}

.slant-right {
	  --t: 2rem; /* control the shape (can be percentage) */
  clip-path: polygon(0 0,100% 0,calc(100% - var(--t)) 100%,0 100%);
}

.left-slant {
	  --u: 2rem; /* control the shape (can be percentage) */
  clip-path: polygon(var(--u) 0,100% 0,100% 100%,0 100%);

}
.notch {
	 --b: 80px; /* base */
  --h: 40px; /* height  */
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%,0 calc(50% + var(--b)/2),var(--h) 50%,0 calc(50% - var(--b)/2));
}
.trapezoid {
--p: 2rem; /* control the shape (can be percentage) */
  clip-path: polygon(var(--p) 100%,calc(100% - var(--p)) 100%,100% 0,0 0);
  flex:0 calc(34%);
}
.caption {
	position:absolute;
	bottom:0px;
	width:calc(100% - 4rem);
	padding:2rem;
	background:#ffd066;
	font-size:1.2rem;
	color:#121212;
}

.citybridge {
	background:#fcefd6;
	background-image:url('../img/background/bridgecity12.png');
	background-size:100% 100%;
	background-position:right top;
	background-repeat: no-repeat;


}
.citystreet {
	background:#0049b0;
	background:#e0ba73;
	background:#fcd5c2;
	background-image:url('../img/background/citybacker3.svg');
	background-size:100% auto;
	background-position:center bottom;
	background-repeat: no-repeat;
	min-height:500px;


}
.citystreet object {
	margin-top:2rem;
}
.stormswirl {
	background:#0049b0;
	background:#e0ba73;
	background:#fcd5c2;
	background-image:url('../img/background/swirl.png');
	background-size:100% 100%;
	background-position:center bottom;
	background-repeat: no-repeat;
	max-height:600px;


}
.citystreet object {
	max-width:80%;
	margin-top:8%;
}

.impact {
	background-color:#e0fbfb;
	background-image:url('../img/background/cranedisasterbwback2.png');
	background-size:100% 100%;
	background-position:left top;
	background-repeat:no-repeat;
}

.impact object {
	position:absolute;
	left:0px;
	bottom:0px;
	width:70%;
}
.impact .caption {
	padding-bottom: 3rem;
    padding-right: 2rem;
    transform: rotate(2deg);
}
.stormswirl .caption {
 	padding-left:4rem;
}

.auto {
	background-color:#170c00;
	background-image:url('../img/autoback2.png');
	background-size:100% 100%;
	background-position:center bottom;
	background-repeat:no-repeat;
	max-height:600px;
}
.auto object {
	margin-left:-14rem;
	margin-top:4rem;
	flex:1 150%;
}
.citystreet .caption {
	bottom:unset;
	top:0px;
	padding-right:4rem;
	width:calc(100% - 6rem);
}
.auto .caption {
	bottom:unset;
	top:0px;
	padding-right:4rem;
	width:calc(100% - 6rem);
}

.home main article.bottom-fix {
	margin-bottom:0rem !important;
}
.home.mobile article object.dtop {
	display:none !important;
}
.home article object.dtop {
	display:flex !important;
}
.home article object.mbile {
	display:none !important;
}
.home.mobile article object.mbile {
	display:flex!important;
}

.casestudy2 main article.gallery {
	flex:1 100%;
	flex-wrap:wrap;
	background:#ffe19d;
	background-image:url('../img/csback/galleryback.png');
	background-position:bottom center;
	background-size:100% auto;
	background-repeat:no-repeat;
	padding-left:5%;
	padding-top:1rem;
}
.casestudy2 main article.gallery .border {
	border-left:4px solid #fff;
	border-right:4px solid #fff;
}
.casestudy2 main article.gallery .one {
	width:95%;
	margin-bottom:1rem;
}
.casestudy2 main article.gallery .two {
	width:45%;
	margin-right:5%;
	margin-bottom:1rem;
}
.casestudy2 main article.gallery .four {
	width:19.5%;
	margin-right:5%;
	margin-bottom:1rem;
}
.casestudy2 main article.gallery.nda {
	background-color:#7d003640;
	background-image:url('../img/csback/ndabacker.png');
	background-size:100% 100%;
	background-position:center center;
	background-repeat:no-repeat;
	overflow:visible
}
.casestudy2 main article.gallery.nda img {
	position:absolute;
	bottom:-16px;
	right:0px;
	max-width:30%;
}
.casestudy2 main article.gallery.nda .story {
	position:relative;
	background:#fff;
	color:#121212;
	padding:2rem;
	margin-top:24px;
	margin-left:auto;
	margin-right:25%;
	width:30%;
	max-width:calc(770px + 4rem);
	max-height:fit-content;
	font-size:1.25rem;
  /* tail dimension */
  --b: 3em;   /* base */
  --h: 3em; /* height */
  --t: .6;    /* thickness (from 0 to 1) */

  --p: 70%;  /* main position (0%:top 100%:bottom) */
  --r: 1.2em; /* the radius */


  padding: 1em;
  border-radius: var(--r)/var(--r) min(var(--r),var(--p) - (1 - var(--t))*var(--b)/2) min(var(--r),100% - var(--p) - (1 - var(--t))*var(--b)/2) var(--r);
  position: relative;
}
.casestudy2 main article.gallery.nda .story:before {
  content: "";
  position: absolute;
  left: 100%;
  top: clamp(-1*var(--t)*var(--b),var(--p) - (var(--t) + 1)*var(--b)/2,100% - var(--b));
  width: var(--h);
  height: var(--b);
  background: inherit;
  border-bottom-right-radius: 100%;
  -webkit-mask: radial-gradient(105% calc(var(--t)*100%) at 0 0,#0000 99%,#000 101%);

}

@media screen and (max-width: 1534px) {
.back {
	--f:0rem;
}
.metric3.flip {
	margin-left:0rem;
}
}

@media screen and (max-width: 1440px) {
body {
	padding:0rem;
	margin:0rem;

}
.frame {
	padding:0rem;
	margin:0rem;
	padding-left:1rem;
	padding-right:1rem;
}
.metric3 {
	max-width:25%;
	width:25%;
}
.casestudy main article.role .description, .casestudy main article.strategy .description, .casestudy main article.usertesting .description {
	max-width:55%;
	margin-bottom:1rem;
}
.casestudy2 main article.gallery.nda img {
	max-width:40%;
}
.casestudy2 main article.gallery.nda .story {
	margin-right:30%;
}
}

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

.home main article, .home main article.intro, .home main article.smaller, .home main article.larger {
	flex:1 100%;
	
}

.slant-left, .right-slant, .left-slant, .slant-right, .notch {
	clip-path:unset;
}
.notch-fill {display:none;}
.home main article.smaller.bottom-fix {
	margin-bottom:2rem !important;
}
.auto {
	background-position:top center;
}
.auto object {
	margin-top:0rem;
}
.auto .caption {
	top:unset;
	bottom:0rem;
}
header {
	padding-top:2rem;
	align-items:space-around;
	align-content:flex-end;
	min-height:unset;
}
.home header h1 {
	font-size:5rem;
}
.home header h2 {
	font-size:2rem;
	margin-bottom:1rem;
	text-align:center;
}
.impact {
	min-height:500px;
}
.impact object {
	width:60%;
}
.impact .caption {
	padding-left:3rem;
	padding-right:2rem;
	left: -1rem;
    padding-bottom: 4rem;
}
.casestudy main article.role {
	background-size:auto 100%;
}
.casestudy main article.role .description, .casestudy main article.strategy .description, .casestudy main article.usertesting .description {
	max-width:45%;
	padding-top:6rem;
	padding-bottom:6rem;
}
.casestudy main article.role img {
	width:unset;
	height:100%;
}
.casestudy main article.research img {
	left:0px;
	width:40%;
}
.casestudy main article.research {
	flex-wrap:wrap;
	align-items:space-around;
}
.casestudy main article.research .description1, .casestudy main article.research .description2 {
	margin-left:40%;
	width:50%;
	margin-bottom:-4rem;
}
.casestudy main article.research .description1:before {
	display:none;
}
.casestudy main article.research .description2 {
	margin-top:-2rem;
	margin-right:unset;
	width:calc(50% + 1rem);
}
.casestudy main article.research .description2:before {
	content: "";
  position: absolute;
  right: 100%;
  top: clamp(var(--b)/-2,var(--p) - 3*var(--b)/4,100% - var(--b));
  width: var(--b);
  aspect-ratio: 1;
  background: inherit;
  --g:#000 calc(100% - 1px),#0000;
  -webkit-mask: 
    radial-gradient(circle closest-side at 12% 12%,var(--g)),
    radial-gradient(20% 20% at 45% 52%,var(--g)),
    radial-gradient(25% 25% at 100% 75%,var(--g));
}
.casestudy main article.design .description {
	margin-right:2rem;
	--b: 3em;   /* base */
  --h: 1.8em; /* height */
  --t: .6;    /* thickness (from 0 to 1) */

  --p: 84%;  /* main position (0%:left 100%:right) */
  --r: 1.2em; /* the radius */


  padding: 1em;
  border-radius: min(var(--r),var(--p) - (1 - var(--t))*var(--b)/2) min(var(--r),100% - var(--p) - (1 - var(--t))*var(--b)/2) var(--r) var(--r)/var(--r);
  background: #fff; /* the main color */
  position: relative;
}
.casestudy main article.design .description:before {
	display:block;
	 content: "";
  position: absolute !important;
  top:-1.6rem;
  left: clamp(0%,var(--p) - (1 - var(--t))*var(--b)/2,100% - (1 - var(--t))*var(--b));
  width: var(--b);
  height: var(--h);
  background: inherit;
  border-top-left-radius: 100%;
  -webkit-mask: radial-gradient(calc(var(--t)*100%) 105% at 100% 100%,#0000 99%,#000 101%);
}

.casestudy2 main article.swap {
	flex-direction:row;
}
.casestudy2 main article .left, .casestudy2 main article .right {
	flex:1 100%;
	max-width:unset;
}
.casestudy2 main article .text {
	padding:2rem;
	flex:1 calc(100% - 4rem);
}
.casestudy2 main article {
	padding-left:0px;
	padding-right:0px;
}
.casestudy2 main article.design .text {
	padding-top:3rem;
}
.casestudy2 main article.usertesting .text {
	background:#e0fbfb;
}
.casestudy2 main article.research img {
	margin-left:auto;
	margin-right:auto;
}
.casestudy2 header {
	padding-bottom:13rem;
}
.casestudy2 header h2 {
	margin-left:4rem;
	margin-right:4rem;
	max-width:unset;
	padding-left:0px;
	padding-right:0px;
}
.casestudy2 main article.role .caption {
	    transform: rotate(-4deg);
	    padding-top:1.5rem;
}
.casestudy2 main article.gallery .two {
	width:90%;
	margin-bottom:1rem;
}
.casestudy2 main article.gallery .four {
	width:45%;
	margin-right:5%;
	margin-bottom:1rem;
}
.casestudy2 main article.gallery.nda img {
	max-width:50%;
}
.casestudy2 main article.gallery.nda .story {
	margin-right:35%;
	width:35%;
}
}

@media screen and (max-width: 767px) {
.home header h1 {
	font-size:4rem;
} 
footer h5 {
	font-size:2.5rem;
}
.impact {
	min-height:400px;
}
.impact object {
	width:70%;
}
.stormswirl .caption {
	padding-left:2rem;
}
.citystreet .caption {
	top:unset;
	bottom:0px;
}
.citystreet {
	background-position:top;
}
.citystreet object {
	margin-top:-20%;
}
.home main article a .readthestory2 {
	top:1rem;
	bottom:unset;
}
.casestudy header, .casestudy2 header {
	padding-bottom:17rem;
}
.casestudy header h1, .casestudy2 header h1 {
	font-size:3rem;
	line-height:3.1rem;
	margin-top:48px;
	margin-left:32px;
}
.casestudy header h2, .casestudy2 header h2 {
	font-size:1.2rem;
	padding-left:0px;
	padding-right:0px;
	margin-left:32px;
	margin-right:32px;
}
.metricstripe {
	bottom:-3rem;
	left:-1rem;
}
.metric3 {
	flex:1 50%;
	max-width:fit-content;
	max-height:140px;
	min-width:50%;
}
.metric3.flip {
	margin-left:unset;
	margin-right:unset;
}

.metric3.one, .metric3.two {
display:flex;
bottom:8rem;
}
.metric3.two, .metric3.four {
	margin-left:-4rem;
}
.metric3.three, .metric3.four {
	transform: scale(1,-1);
	display: flex;
  flex-wrap: wrap;
}
.metric3.flip.three .number, .metric3.flip.three .desc, .metric3.four .number, .metric3.four .desc {
	transform: scale(1,-1) !important;
	flex:1 100%;
}
.metric3.flip.three .number, .metric3.four .number {
	margin-bottom:-6rem;
}
.casestudy main article.role {
	padding-bottom:0rem;
	padding-top:8rem;
}
.casestudy main article.role .description {
	font-size:1.1rem;
	box-shadow:unset;
	margin-left:0px;
	margin-right:0px;
	padding-bottom:5rem;
	background:#ffffff;
	max-width:unset;
	padding-top:3rem;
	margin-bottom:-3rem;
}
.casestudy main article.role img {
	bottom:unset;
	left:unset;
	top:-3rem;
	right:0px;
	width:100%;
	height:auto;
}
.casestudy main article .comic-caption.slant-up {
	transform: rotate(-4deg);
}
.casestudy main article.strategy .description, .casestudy main article.usertesting .description {
	margin-top: 12rem;
    width: 100%;
    box-shadow: unset;
    margin-right: 0px;
    padding-top: 4rem;
    max-width:unset;
    margin-bottom:-2rem;
}
.casestudy main article.strategy img{
		left: 0px;
    top: 0px;
    bottom: unset;
    width: 100%;
    height: auto;
}
.casestudy main article.usertesting img {
	bottom: unset;
    width: 100%;
    margin-top: -18%;
}
.casestudy main article.strategy img {
	height:50%;
	width:auto;
	margin-top:0px;
}
.casestudy main article.usertesting img {
	height:50%;
	width:auto;
	margin-top:0px;
}
.casestudy2 main article.role .caption {
	    transform: rotate(-5deg);

}
.casestudy2 main article.gallery.nda img {
	max-width:70%;
}
.casestudy2 main article.gallery.nda .story {
	margin-right:50%;
	width:40%;
}
}

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

.frame {
	padding-left:.5rem;
	padding-right:.5rem;
}
.home header h1 {
	font-size:3rem;
}
.home header h2 {
	font-size:1.5rem;
	margin-bottom:1rem;
	text-align:center;
}
.home main article {
	margin-bottom:.5rem;
}
.home main article.intro {
	font-size:1.25rem !important;
	min-height:200px;
	padding-top:5rem !important;
}
.home main article.smaller.bottom-fix {
	margin-bottom:.5rem !important;
}
.home main, .home footer {
	margin-top:-3.5rem;
}
.impact {
	min-height:360px;
}
.impact object {
	width:70%;
}
.auto {
	max-height:360px;
	background-position:bottom;
}
.metric3.two, .metric3.four {
	margin-left:unset;
}

.casestudy main article .description {
	font-size:1rem !important;
	padding-left:1rem !important;
	padding-right:1rem !important;
}
.casestudy main article.role .description {
	padding-top:4rem;
	padding-bottom:5rem !important;
	background:#fffffff7;
}
.casestudy main article .comic-caption.slant-up {
	transform: rotate(-5deg);
	padding-top:2rem !important;
}
.casestudy2 main article.design {
	background-position:top right;
	background-size:130% auto;
}
.casestudy2 main article.role .caption {
	    transform: rotate(-6.5deg);
}
.casestudy2 main article.gallery .four {
	width:90%;
	margin-bottom:1rem;
}
.casestudy2 main article.gallery.nda img {
	max-width:100%;
	right:-20%;
}
.casestudy2 main article.gallery.nda .story {
	margin-right:40%;
	width:50%;
}
}

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

.frame {
	padding-left:0rem;
	padding-right:.0rem;
}
.home header h1 {
	font-size:3rem;
	justify-content:center;
}
.home header h2 {
	font-size:1.5rem;
	margin-bottom:1rem;
	text-align:center;
}
.metric3 .number {
	font-size:2rem;
}
.metric3 .desc {
	font-size:1rem;
}
.metric3.flip.three .number, .metric3.four .number
 {
        margin-bottom: -7.5rem;

}
    .casestudy main article .comic-caption.slant-up {
        transform: rotate(-7deg);
        padding-top: 1.5rem !important;
    }
.casestudy2 main article.role .caption {
	    transform: rotate(-8deg);
}
}