/*============================================================
  Basic Styles
============================================================*/
/*@-webkit-keyframes MOVE-BG {
   from {
     -webkit-transform: translateX(0);
   }
   to {
     -webkit-transform: translateX(-187%);
   }
}*/
/* @ Background */
html{
	overflow-x: hidden;
	scroll-behavior: smooth;

}

body{
	background-color: #1d2426;
	color:#fff;
	font-family: "Bricolage Grotesque", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "width" 100;
			padding:0px;
	margin:0px;
	overflow-x: hidden;

	}

.wrap {
	-webkit-overflow-scrolling: touch;
  	overflow-y: scroll;
	/*background: #fff;*/
	/* padding:40px auto; */
	margin:0px auto;
	width: 100%;
	overflow-x: hidden;

	/* align:center; */
}

.header {
	/* background-color: #D2CEC1; */
	padding:0px;
	width:100%;
	/* margin:20px; */
	background-color: #F8EDED;
	/* border-radius: 8px; */
	overflow: hidden;
	padding-bottom: 72px;
	align: center;
	/* background-image: url(../img/JDW_header.jpg); */
	/* top:-16px; */
}
.header-block{
		position: relative;
		top: -50px;
		left:75vw;
		width:80px;
		align-items: baseline;
		align-self:center;
}
.header-type{
		position: relative;
		top: 84px;
		left:8vw;
		padding-top:72px;

		/* right:30vw; */
		/* width:150%; */
		align-items: baseline;
		align-self:center;
		z-index:1000;
		width:80%;
}
.header-type p{
	color:#000;
	line-height: 36px;
	margin-bottom: 0px;
}

.header-type h1{
	color:#1d2426;
	font-size: 96px;
	height:auto;
	font-family: "Bricolage Grotesque", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
	margin-top:0px;
	margin-bottom:24px;
	line-height: 84px;

  font-variation-settings:
    "width" 100px;

}


.header-type img{
		max-width: 150%;
		min-width: 90%;
}
.header-grid{
		position: relative;
		top: 94px;
		left:40px;
		/* right:30vw; */
		width:80px;
		align-items: baseline;
		align-self:center;
		height: 50px;
}

.header-sparks{
		position: absolute;
		top: 44px;
		right:5vw;
		/* width:80px; */
		align-items: baseline;
		align-self:center;
}

.header-globe.hvr-grow{
	/* hvr-grow's CSS transition on transform fights our own per-frame JS
	   animations (mouse-follow, blink, click-scale), so disable it here. */
	transition: none;
}
.header-globe{
	position: absolute;
	top: 24px;
	right:15%;
	width:42px;
	cursor: pointer;
}

.globe-dialog{
	display: none;
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 16px;
	width: 240px;
	max-width: 70vw;
	background-color: #F7D6DE;
	border-radius: 8px;
	padding: 24px 20px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	z-index: 1001;
	text-align:center;

}
.globe-dialog.open{
	display: block;
}
.globe-dialog h3{
	margin: 0;
	color: #C9A227;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 16px;
	line-height: 1;
	font-weight: 600;

}
.globe-dialog p{
	margin: 0;
	color: #C9A227;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 12px;
	line-height: 1;
	font-weight: 600;
}
.header-waves{
		position: absolute;
		top: 214px;
		left:50vw;
		align-items: baseline;
		align-self:center;
		z-index: 0;
}

/* .header-block .header-waves .header-globe img{
		width:100%;
} */

.hidden{
     opacity:0;
}
.visible{
     opacity:1;
}

.header-img img{
	width:100%;
	/* margin-bottom: 20px; */
}

.nav {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 400;
	margin-left:0;
	margin-right:0;
	width:100%;
	height:48px;
	/* letter-spacing:2px; */

	font-weight:bold;
	font-size:20px;

	/* background: #1d2426; */
	/*border:2px;
	border-color:#444;
	border-top-style:none;
	border-right-style:none;
	border-bottom-style:solid;
	border-left-style:none;*/

	padding-top: 12px;
	padding-bottom: 12px;
	/* margin-top: 10px;
	margin-bottom: 10px; */
	z-index: 1;

	display: flex;
	align-items: center;
	justify-content: flex-start;

	position: absolute;
	left: 0;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 30px;
	width: 80%;
	margin-left: 8vw;
	position: relative;
	z-index: 1; /* sit above .nav-fixed::after's checkerboard overlay */
}
.nav img {
 position: relative;
 top:1px;
}

/* .nav.nav-fixed (not just .nav-fixed) so this reliably beats the .nav width
   overrides set in the responsive media queries further down, regardless of
   source order - those set .nav to 83%, but the fixed bar must be full-width. */
.nav.nav-fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0;
	padding-top: 12px;
	background: none;
	z-index: 2000;
}
/* The checkerboard lives on two independent layers - ::before (light) and
   ::after (dark) - each fully opaque on its own, crossfaded via opacity.
   Keeping them on separate layers, rather than a translucent dark layer
   stacked on top of an always-present light one, avoids the two patterns
   optically mixing into a muddy grey-on-grey moire; each state still shows
   a single, clean, solid-colored checkerboard, just eased between the two. */
.nav.nav-fixed::before,
.nav.nav-fixed::after {
	content: "";
	position: absolute;
	inset: 0;
	background-size: 4px 4px;
	background-position: 0 0, 2px 2px;
	transition: opacity 0.4s ease;
	pointer-events: none;
}
.nav.nav-fixed::before {
	background-image:
		linear-gradient(45deg, #F8EDED 25%, transparent 25%, transparent 75%, #F8EDED 75%),
		linear-gradient(45deg, #F8EDED 25%, transparent 25%, transparent 75%, #F8EDED 75%);
	opacity: 1;
}
.nav.nav-fixed::after {
	background-image:
		linear-gradient(45deg, #1d2426 25%, transparent 25%, transparent 75%, #1d2426 75%),
		linear-gradient(45deg, #1d2426 25%, transparent 25%, transparent 75%, #1d2426 75%);
	opacity: 0;
}
/* Checkerboard turns dark while the #design section is under the nav;
   back to the usual light color for #info and #impact. */
.nav.nav-fixed.on-design::before {
	opacity: 0;
}
.nav.nav-fixed.on-design::after {
	opacity: 1;
}
.nav a:link{
	color:#000;
	text-decoration:none;
	padding-top:12px;
	padding-bottom:12px;
	transition: color 0.4s ease;
	/* height: 48px; */
	align-items: left;
	/* background-color: #f5f8fa; */

}
/* Nav text turns white over the dark checkerboard so it stays legible. */
.nav.on-design a:link,
.nav.on-design a:visited {
	color: #fff;
}

.nav a:active{
	color:#FF5C58;
	text-decoration:none;
}

.nav a:visited{
	color:#000;
	text-decoration:none;
	transition: color 0.4s ease;
}

.nav a:hover{
	color:#FF5C58;
	/* text-decoration:underline; */
}

/* Nav link for the section currently in view (or just clicked) stays
   highlighted red - wins over both the plain and on-design (white) text. */
.nav a.active,
.nav.on-design a.active {
	color: #FF5C58;
}

.bottom-button{
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-weight:bold;
	font-size:16px;
	letter-spacing:2px;
	display:inline-block;

	margin-right:4%;

	width: 40%;
}
.bottom-button a:link{
	color: #75d1f3;

	width: 100%;

	border-style: solid;
	border-color: #75d1f3;


	display:block;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 15px;
	padding-bottom: 15px;

	text-decoration:none;

}
.bottom-button a:active{
	color: #fff;
	letter-spacing:2px;
	text-decoration:none;
	/*background-image: url(../img/cta-bg-up.jpg);*/

}
.bottom-button a:visited{
	color: #75d1f3;
	letter-spacing:2px;
	text-decoration:none;
	/*background-image: url(../img/cta-bg-down.jpg);*/
	border: 2px;
	border-color: #75d1f3;
}
.bottom-button a:hover{
	color: #000;
	border-style: solid;
	border-color: #000;
	letter-spacing:2px;
	text-decoration:none;
	/* background-color:#c5172e; */
	/* background: url(../img/wash-red-blue.jpg); */
}

.password-input {
		margin-top: 10px;
		display: none;
		float:left;/* Hide password input initially */
		margin-top: 5px;
		margin-bottom:10px;
		left:0px;
		top:20px;

}
.error-message {
		color: red;
		display: none;
		margin-top: 10px;
}
/* Ensure a consistent look when focusing on the input */
input[type="password"] {
		padding: 5px;
		margin-top: 5px;
		margin-bottom:10px;
		left:10px;
		top:10px;
		postion:relative;
		height: 36px;
}
.password-input{
	left:20px;
	position:relative;
	flex-direction: row;
	flex-flow: row;
}

/* Shared password modal (unlocks every .locked-cta on the page) */
.password-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 2000;
	align-items: center;
	justify-content: center;
}
.password-modal-overlay.open {
	display: flex;
}
.password-modal {
	position: relative;
	background: #1d2426;
	color: #fff;
	border-radius: 8px;
	padding: 32px 28px;
	width: 280px;
	max-width: 85vw;
	text-align: center;
	font-family: 'Bricolage Grotesque', sans-serif;
	padding: 64px;

}
.password-modal p {
	margin: 0 0 16px 0;
}
.password-modal h3 {
	font-family: 'Bricolage Grotesque', sans-serif;
	color: #fff;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: 0;
	text-align: center;
	margin: 0 0 20px 0;
}
.password-modal input[type="password"] {
	position: static;
	left: auto;
	top: auto;
	width: 100%;
	box-sizing: border-box;
}
.password-modal .cta-button {
	display: inline-block;
	float: none;
	margin-top: 0;
	left: 0; /* cancel the narrow-viewport .cta-button nudge meant for portfolio rows */
}
.password-modal .error-message {
	margin-top: 12px;
	margin-bottom: 0;
}
.password-modal-close {
	position: absolute;
	top: 8px;
	right: 12px;
	background: none;
	border: none;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

/* Case study overlay: full-screen iframe, replacing the site nav with just
   a small checkerboard back-arrow square while a case study is open. */
.case-study-overlay {
	display: none;
	position: fixed;
	inset: 0;
	/* Must beat .nav's z-index:10000 (set in a responsive media query further
	   down) so the overlay actually covers the nav instead of it bleeding
	   through on top at narrower viewports. */
	z-index: 20000;
	background: #F8EDED;
	opacity: 0;
	transition: opacity 0.4s ease;
}
.case-study-overlay.open {
	display: block;
}
/* .visible is added a frame after .open so the browser has a "before" state
   to transition from - toggling display and opacity in the same instant
   would just snap instead of fading. */
.case-study-overlay.open.visible {
	opacity: 1;
}
.case-study-overlay iframe {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
	opacity: 0;
	transition: opacity 0.5s ease;
}
/* The iframe itself fades in separately once its new page has actually
   loaded, so there's no flash of blank content while it's still fetching. */
.case-study-overlay iframe.loaded {
	opacity: 1;
}
.case-study-back {
	position: fixed;
	top: 0;
	left: 0;
	width: 56px;
	height: 56px;
	z-index: 20001;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #000;
	font-size: 22px;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	overflow: hidden;
}
/* Checkerboard lives on its own layer so it can dim independently of the
   arrow glyph - rests at 20% opacity, fades up to full on hover. */
.case-study-back::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(45deg, #F8EDED 25%, transparent 25%, transparent 75%, #F8EDED 75%),
		linear-gradient(45deg, #F8EDED 25%, transparent 25%, transparent 75%, #F8EDED 75%);
	background-size: 4px 4px;
	background-position: 0 0, 2px 2px;
	opacity: 0.2;
	transition: opacity 0.3s ease;
}
.case-study-back:hover::before {
	opacity: 1;
}
.case-study-back span {
	position: relative;
	z-index: 1; /* keep the arrow glyph above the checkerboard layer */
}
.case-study-back:hover {
	color: #FF5C58;
}
#viewWorkButton {
	cursor: pointer;
	color: #C0DAE0;
	border-style: solid;
	border-color: #C0DAE0;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-weight:bold;
	font-size:16px;
	letter-spacing:2px;
	text-decoration:none;
	/*background: url(../img/cta-bg-down.jpg);*/
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 15px;
	padding-bottom: 15px;

}

.cta-button{
	color: :#fff;
	float: left;
	/*width: 50%;*/
	display:block;
	margin-top: 35px;
	/* background-color:#ececec; */
	border-radius: 4px;
}

.cta-button a:link{
	color: #C0DAE0;
	border-style: solid;
	border-color: #C0DAE0;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-weight:bold;
	font-size:16px;
	letter-spacing:2px;
	text-decoration:none;
	/*background: url(../img/cta-bg-down.jpg);*/
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 15px;
	padding-bottom: 15px;
	border-radius: 8px;


}
.cta-button a:active{
	color: #fff;
	letter-spacing:2px;
	text-decoration:none;
	/*background-image: url(../img/cta-bg-up.jpg);*/

}
.cta-button a:visited{
	color: #C0DAE0;
	letter-spacing:2px;
	text-decoration:none;
	/*background-image: url(../img/cta-bg-down.jpg);*/
	border: 2px;
	border-color: #C0DAE0;
	border-radius: 24px;
}
.cta-button a:hover{
	color: #75d1f3;
	border-style: solid;
	border-color: #75d1f3;
	letter-spacing:2px;
	text-decoration:none;
	/*background-color:#c5172e;*/
	/* background: url(../img/wash-red-white6.jpg); */
}

.poptrox-overlay {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  -webkit-overflow-scrolling: touch !important;
  overflow-y: scroll !important;
}

.poptrox-overlay iframe {
  height: 100%;
  width: 100%;
}
#artgallery {
   line-height:0;
   -webkit-column-count:5; /* split it into 5 columns */
	 -webkit-row-gap:5px; /* give it a 5px gap between columns */
	 -webkit-column-gap:5px; /* give it a 5px gap between columns */
   -moz-column-count:5;
	 -moz-row-gap:5px;
   -moz-column-gap:5px;
   column-count:5;
   column-gap:5px;
	 row-gap:16px;
}
#artgallery img {
   width: 100% !important;
   height: auto !important;
   margin-bottom:5px; /* to match column gap */
}
.content {
	/*background-color:#eef3f7;*/
	padding:10px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:2px;
	color:#fff;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	width:80%;

}

.content h1{
	font-family: 'Bricolage Grotesque', sans-serif;
	text-align:center;
	color:#fff;
	font-size:96px;
	font-weight:bold;

}
.content h1 a:link{
	color:#fff;
	text-decoration:none;
}
.content h1 a:visited{
	color:#fff;
	text-decoration:none;
}
.content h1 a:active{
	color:#fff;
	text-decoration:none;
}
.content h1 a:hover{
	color:#000;
	text-decoration:none;
}
.content h2{
	position: relative;
	/*top:-40px;*/
	text-align:left;
	color:#C0DAE0;
	/*background-color: #000;*/
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size:58px;
	letter-spacing:0px;
	line-height: 70px;
	font-weight: 600;
	margin-bottom:24px;
	margin-top:0px;
}
.content h3{
	text-align:center;
	font-family: 'Bricolage Grotesque', sans-serif;
	color:#C0DAE0;
	font-size:14px;
	line-height:6px;
	font-weight:bold;
	padding-top:0px;
	letter-spacing:2px;
	font-weight: 400;

}
.content h4{
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	text-align:left;
	color:#fff;
	font-size:12px;
	line-height:14px;
	letter-spacing:2px;
}

.content p{
	text-align:left;
	color:#cdcdcd;
	font-size:14px;
	line-height:20px;
	letter-spacing:2px;
	font-color:#fff;
	font-family: 'Poppins', sans-serif;
	/*font-family: 'IBM Plex Mono', monospace;*/

	font-weight: 300;
}

.content img{
	border:none;
	border-radius: 12px;
}

.tooltip{
	width:600px;
	text-align:left;
	background-color:#000;
	font-size:14px;
	line-height:20px;
	letter-spacing:2px;
	font-family: 'Poppins', sans-serif;
	border-radius: 24px;
	padding:24px;
	padding-left:36px;

}

.tooltip p{
	text-align:left;
	color:#fff;
	/*font-family: 'IBM Plex Mono', monospace;*/

	font-weight: 300;
}


.column-left{
	position: relative;
	top:0px;
	width:30%;
	float:left;
}
.column-left a{
	text-decoration: none;
}
.column-left img{
	width:100%;
	float:left;
}
.column-center{
	position: relative;
	top:0px;
	width:30%;
	float:left;
	/* margin-left:5%; */
}
.column-center a{
	text-decoration: none;
}

.column-center img{
	width:100%;
	float:left;
}

.column-right{
	position: relative;
	top:0px;

	width:30%;
	float:right;
}
.column-right a{
	text-decoration: none;
}

.column-right img{
	width:100%;
	float:left;
}
.column-center-text{
	position: relative;
	/*left:0px;*/
	display:inline-block;
	padding:0%;

	/* background-image: url(../img/wash-2line.png); */
	/* background-repeat: no-repeat;
	background-size: 410px 410px;
	background-position: 150px 35px; */

}
.row0{
	z-index: 0;
	margin:20px;
	display:inline-block;

}
.row{
	z-index: 0;
	margin:20px;
	display:inline-block;
	/* .row-right-image (class .aImage) is scaled to 110% by the scroll-reveal
	   animation's resting state - overflow:hidden here (not on .row-right-image
	   itself, which is the element actually being scaled) clips that growth so
	   it doesn't spill past the row. */
	overflow: visible;
}
.bottom-row{
	z-index: 0;
	display:block;
	width:90%;
}

.row-header-text{
	text-align: left;
	width:45vw;
	/* padding-bottom:100px; */
	padding-top:60px;
	padding-left:14%;
	color:#0A3854;
	line-height:48px;
}

.row-left-text{
	/* position: relative;
  left:-10px; */
	/* align:right; */
	display:inline-block;
	float:left;
  padding-right:5%;
	vertical-align:text-top;

	/* background-image: url(../img/wash-2line.png);
	background-repeat: no-repeat;
	background-size: 410px 410px;
	background-position: 35px -300px; */

}
.row-left-text p a:link{
	text-decoration: none;
}
.row-left-text a:link{
	/* color:#fff; */
}
.row-left-text a:visited{
	/* color:#c5172e; */
}
.row-left-text a:active{
	/* color:#c5172e; */
}
.row-left-text a:hover{
	/* color:#c5172e; */
}

.row-left-text1 a:link{
	/* color:#c5172e; */
}
.row-left-text1 a:visited{
	/* color:#c5172e; */
}
.row-left-text1 a:active{
	/* color:#c5172e; */
}
.row-left-text1 a:hover{
	/* color:#c5172e; */
}

.row-right-image{
	/* background-color:#fff; */
	display:inline-block;
	float:right;
	padding:0%;
	width:60%;
	/* the scroll-reveal animation's resting state scales this image to 110%
	   (see the .aImage velocity() call), which visually grows it ~5% past
	   each edge of its own box - clip it here so it doesn't spill past
	   .row on the right. */
	overflow:visible;
}
.row-right-image img{
	align:right;
	width:100%;
	box-sizing: border-box; /* border was adding 40px on top of width:100%, spilling the image past .row-right-image (and .row) on the right */
	border-style: solid;
	border: 20px;
}
.row-right-vertimage{
	background-color:#fff;
	display:inline-block;
	float:right;
	padding:0%;
	width:40%;
}
.row-right-vertimage img{
	align:left;
	width:100%;
	box-sizing: border-box;
	border-style: solid;
	border: 20px;
}
.row-right-text{
	position: relative;
	left:-50px;
	display:inline-block;
	float:right;
	padding:0%;
	width:35%;

	/* background-image: url(../img/wash-2line.png);
	background-repeat: no-repeat;
	background-size: 410px 410px;
	background-position: 0px -300px; */

}


.row-left-text h2{
	left:-8px;
	top:10px;
	position:relative;
}
.row-left-text p{
	left:-4px;
	position:relative;
}
.row-right-text h2{
	margin-left:44px;
	top:10px;
	position:relative;
}
.row-right-text p{
	margin-left:47px;
	position:relative;
}
.row-right-text1{
	position: relative;
	display:inline-block;
	float:right;
	padding:0%;
	width:35%;

}
.row-left-image{
	display:inline-block;
	float:left;
	padding-right:5%;
	width:60%;
}
.row-left-image img{
	align:right;
	width:100%;
	box-sizing: border-box;
	border-style: solid;
	border: 20px;
}
.hover-image{
	z-index:-50;
	position: absolute;
	top:610px;
	left:5%;
}
.hover-image2{
	z-index:-100;
	position: absolute;
	top:680px;
	left:-50px;
}

.hover-image3{
	z-index:-100;
	width:60px;
	position: absolute;
	top:-100px;
	left:100px;
}
.border {
	border:0px;
	border-color:#ccc;
	border-top-style:none;
	border-right-style:none;
	border-bottom-style:solid;
	border-left-style:none;
	margin:80px;
}
.border2 {
	border:1px;
	border-color:#ccc;
	border-top-style:none;
	border-right-style:none;
	border-bottom-style:solid;
	border-left-style:none;
	margin:20px 0px;
}

/* Glitch burst: two layers composited together, over the globe icon.
   Layer A (::before) - the reference black/white glitch texture (img/glitch-noise.png).
   Layer B (::after)  - dispersed rainbow streaks, blend-composited over layer A so
   color only really reads where A is light, muted/inverted where A is dark.
   Both live on pseudo-elements (never on .header-globe itself) so they never fight
   the JS-driven mouse-follow/scale transform already applied to that element.
   Triggered by JS adding/removing the "glitching" class for exactly one burst
   (see glitchGlobe() in index0.html) rather than by :hover, so it plays once for
   ~1s on mouse-over instead of looping for as long as the mouse stays over it. */
.header-globe.glitching::before,
.header-globe.glitching::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 5;
}
.header-globe.glitching::before {
	background-color: transparent;
	background-image: url('../img/glitch-noise.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	mix-blend-mode: multiply;
	opacity: 0.85;
	animation:
		border2-static-jitter 0.12s steps(3, end) 8,
		border2-tear 0.7s steps(7, end) 1;
}
.header-globe.glitching::after {
	/* Layer B: streak concentrated on one diagonal half only, for asymmetry */
	background-color: transparent;
	background-image: repeating-linear-gradient(102deg,
		#FF2E63 0 3%,
		#FFE94A 3% 7%,
		#00E5FF 7% 10%,
		#7CFC6E 10% 15%,
		transparent 15% 26%);
	background-size: 220% 100%;
	clip-path: polygon(0 0, 62% 0, 48% 100%, 0 100%);
	mix-blend-mode: color-dodge;
	opacity: 0;
	animation: border2-rgb-streak-a 0.6s steps(6, end) 2;
}

@keyframes border2-static-jitter {
	0%   { background-position: center; }
	33%  { background-position: calc(50% + 4px) calc(50% - 3px); }
	66%  { background-position: calc(50% - 3px) calc(50% + 2px); }
	100% { background-position: calc(50% + 2px) calc(50% + 4px); }
}
@keyframes border2-tear {
	0%, 100% { clip-path: inset(0 0 0 0); transform: skewX(0deg); }
	8%   { clip-path: inset(40% 62% 20% 0); transform: skewX(0deg); }
	19%  { clip-path: inset(0 0 0 0); transform: skewX(0deg); }
	31%  { clip-path: inset(70% 8% 3% 55%); transform: skewX(-4deg); }
	44%  { clip-path: inset(0 0 0 0); transform: skewX(0deg); }
	57%  { clip-path: inset(5% 40% 75% 0); transform: skewX(3deg); }
	68%  { clip-path: inset(0 0 0 0); transform: skewX(0deg); }
	83%  { clip-path: inset(25% 0 10% 72%); transform: skewX(0deg); }
}
@keyframes border2-rgb-streak-a {
	0%, 100% { opacity: 0; background-position: 0 0; }
	20%  { opacity: 0.85; background-position: -30% 0; }
	45%  { opacity: 0; }
	72%  { opacity: 0.6; background-position: 15% 0; }
}
.border3 {
	border:1px;
	/* border-color:#75d1f3; */
	border-color:#ccc;
	border-top-style:none;
	border-right-style:none;
	border-bottom-style:solid;
	border-left-style:none;
	margin:20px;
}
.border4 {
	border:2px;
	/* border-color:#75d1f3; */
	border-color:#FF5C58;
	border-top-style:none;
	border-right-style:none;
	border-bottom-style:solid;
	border-left-style:none;
	margin:20px;

}
.footer{
	padding-left:25px;
	padding-right:25px;
	height:65px;
}
.footer a:link{
	color:#d13719;
}
.footer a:visited{
	color:#c5172e;
}
.footer a:active{
	color:#c5172e;
}
.footer a:hover{
	color:#75d1f3;
}
.row-footer-left{
	display:inline-block;
	float:left;
	padding-right:5%;
	width:85%;
}
.row-footer-right{
	display:inline-block;
	float:right;
	width:10%;
}
.row-footer-right img{
	align:right;
	top:8px;
	left:8px;
	position:relative;
}


/*============================================================
  Custom Styles - add and override styles below.
============================================================*/

@media (min-width:1000px) {
	.wrap{
		align:center;
	}
	.content {
		width:84%;
	}
	.header {
		width:100%;
		height:400px
		overflow: hidden;
		align: center;
	}
	.header h1{
			/* font-size: 80px; */
	}

	.nav{
		margin-left:auto;
		margin-right:auto;
		width:83%;
		align-items: center;
	}
	.header-type{
		width:50%;
		top:50px;
		position: relative;

	}

	.header-sparks{
		right:4vw;
	}
	.header-globe{
		position: absolute;
		top: -35px;
		right:15%;
		width:36px;
		cursor: pointer;
	}
	.header-globe svg{
			width:100%;
	}
	.header-block{
			position: relative;
			top: -34px;
			left:85vw;
			width:120px;
			align-items: baseline;
			align-self:center;
	}
	.header-block svg{
			width:100%;
	}
	.cta-button{
		position: relative;
		left: -2px;
	}

	/* Two-cell portfolio row layout: a text cell (title + body + CTA, always
	   moving as one block) next to an image cell. Replaces the old
	   float-based .row-right-image/.row-left-text/.cta-button setup, where
	   .cta-button floated as its own independent sibling and could wrap
	   onto its own line separately from .row-left-text at certain widths
	   (visible around ~1158px) instead of staying attached to its text.
	   .row-right-image comes first in the DOM but must render on the right
	   (text on the left) - handled with explicit order below rather than
	   flex-direction:row-reverse, since order reads clearer with only 2 items. */
	.row {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 96px;
	}
	/* 3-column tile grid (Ed Tech / SiriusXM / Type Shop, etc.) - was
	   float:left/right with width:30% + margin-left:5% on the center
	   column only, which put the gutter on one side and left it uneven
	   once .row above became a flex container. Flex items ignore float,
	   so this just replaces the old width/margin math with the same
	   flex gap the row already uses. */
	.column-left,
	.column-center,
	.column-right {
		float: none;
		width: auto;
		margin-left: 0;
		flex: 1 1 0;
	}
	.column-left img,
	.column-center img,
	.column-right img {
		float: none;
		display: block;
	}
	.row-right-image {
		float: none;
		display: block;
		width: 50%;
		order: 2;
	}
	.row-left-text {
		float: none;
		display: block;
		position: static;
		left: auto;
		width: auto;
		flex: 1 1 320px;
		padding-right: 0;
		order: 1;
	}
	/* .row-left-text .cta-button {
		float: none;
		display: block;
		margin-top: 20px;
		left: 0;
	} */
	/* .row-left-text h2/p carry unconditional left:-8px/-4px (base rules,
	   used elsewhere) that don't match .cta-button's left:0 here, leaving
	   the title/body/button a few px out of alignment with each other. */
	.row-left-text h2,
	.row-left-text p {
		left: 0;
	}

	/*.row-left{
		display:inline-block;
		float:left;
		padding-top:0px;
		padding-right:5%;
		width:45%;
	}
	.row-right{
		display:inline-block;
		float:right;
		padding-right:0px;;
		width:50%;
	}*/
}
@media (max-width:1000px) {

	.row-header-text{
		width:80vw;
		padding-left:48px;
	}

	.hover-image {
		visibility:0;
		top:1050px;
	}
	.header-sparks{
		right:3vw;
	}

	.header-block{
			position: relative;
			top: -34px;
			left:80vw;
	}
	.header-globe.hvr-grow{
		display: block;
	}
	.header-globe{
		/* position: relative;
		top: 24px;
		left:35vw; */
		width:36px;
		/* cursor: pointer; */
	}
	.header-waves{
			position: absolute;
			top: 224px;
			left:70vw;
			align-items: baseline;
			align-self:center;
			z-index: 0;
	}

	.header-block img{
			width:100%;
	}

	.hover-image2 {
		visibility:0;
		top:1300px;
	}
	.bottom-button{
		width: 90%;
		margin-bottom:10px;
	}
	.content {
		width:90%;
		padding-left: 16px;
		padding-right: 16px;
		/* #design/.content also carries align="center" in the HTML, which
		   centers .row (display:inline-block) within it - the actual reason
		   padding barely moved anything. This is the real fix. */
		text-align: left;
	}


	.header-img {
		width:100%;
		padding:0px;
		margin-top:20px;
	}
	.header-img img{
		width:100%;
		padding: 0px;
		margin: 0px;
		margin-bottom: 0px;
	}
	.header p{
			font-size: 16px;
			width:100%;
			margin: 6px 0px;
			/* line-height: 60px; */
  }
	.header h1{
			font-size: 60px;
			line-height: 60px;
  }

	.nav{
		z-index:10000;
		font-size:34px;
		margin-left:auto;
		margin-right:auto;
		width:83%;
		align-content: center;
	}
.nav-links{
	font-size:34px;

}

	/* The row divs carry align="center" in the HTML, which the browser maps
	   to text-align:-webkit-center - that centers .row-right-image/
	   .row-left-text as inline-block children within the row's line box
	   whenever they don't fill the full width, which was the real source
	   of the offset (not a margin/padding mismatch). Overriding it here is
	   the actual fix; .row-left-text/.cta-button's own left values are just
	   0 now instead of hand-tuned magic numbers compensating for it. */
	.row {
		text-align: left;
		overflow: visible;
		vertical-align:top;
		max-width:500px;
	}
	.row-left-text{
		float:top;
		padding-top:0px;
		padding-right:0px;
		position:relative;
		left: 0;
		overflow: visible;
		/* background-position: 15px -315px; */
		width:100%;
		vertical-align:top;
	}

	.row-left-text a:link{
		/* color:#c5172e; */
	}
	.row-left-text a:visited{
		/* color:#000; */
	}
	.row-left-text a:active{
		/* color:#000; */
	}
	.row-left-text a:hover{
		/* color:#000; */
	}
	.row-right-text{
		display:inline-block;
		float:none;
		padding-top:10px;
		padding-right:0px;;
		background-position: 0px -315px;
		width:100%;
		vertical-align: middle;
	}
	.row-right-image{
		display:inline-block;
		float:none;
		padding-right:0px;;
		width:100%;
	}
	.column-left,
	.column-center,
	.column-right {
		display: block;
		float: none;
		width: 100%;
		margin-left: 0;
		margin-bottom: 24px;
	}
	.row-left-image{
		display:inline-block;
		float:none;
		padding-right:0px;;
		width:100%;
	}
	.row-right-text1{
		display:inline-block;
		float:none;
		padding-top:10px;
		padding-right:0px;;
		width:100%;
		vertical-align: middle;
	}
	.cta-button{
		position: relative;
		left: 0;
	}


}

/*============================================================
  Impact section
============================================================*/
.impact {
	display: block;
	margin-top: 40px;
	margin-bottom: 80px;
	width: 64%;
}
.impact h3 {
	margin-bottom: 8px;
}
.impact-item {
	margin: 24px 0;
}
.impact-item h1 {
	font-family: 'Bricolage Grotesque', sans-serif;
	color: #FF5C58;
	font-size: 44px;
	line-height: 1.15;
	font-weight: 700;
	text-align: left;
	margin: 0 0 12px 0;
}
.impact-item p {
	margin: 0;
}

/*============================================================
  Industries mind-map (upside-down version of the logo's sunburst mark)
  Rays and capsules are generated in JS (buildIndustriesMap in index0.html)
  from the .industries-moon element's own position, so this only needs to
  style the pieces - the fan geometry itself lives in JS.
============================================================*/
.industries-map {
	/* Full-bleed: the fan needs more width than .impact's 64% column gives
	   it to keep the capsules from overlapping, so this breaks out to the
	   viewport width regardless of the narrower column it sits in. Sized
	   in JS (buildIndustriesMap) against measured pixels rather than a CSS
	   100vw/-50vw trick - that trick's centering depends on the parent
	   column being perfectly centered in the viewport and doesn't account
	   for a reserved scrollbar, both of which visibly skewed it off-center.
	   position:relative here is just what JS needs as a base to offset from. */
	position: relative;
	margin-top: 180px;
}
.industries-moon {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 160px;
	height: 80px;
	box-sizing: border-box;
	background: #FF5C58;
	/* flat top, fully round bottom - the logo's sun half-circle, flipped */
	border-radius: 0 0 80px 80px;
	color: #fff;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 1px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 18px;
	z-index: 2;
}
/* The "Industries" label has been wrapped in a heading tag (h1/h2) more
   than once while this was being tuned - reset the browser's default
   heading sizing/margin/color so whichever one ends up here renders like
   plain text at the size .industries-moon sets, instead of at whatever
   size/color the UA stylesheet gives that tag. An inline style on the tag
   itself still wins over this, same as it would over any other CSS. */
.industries-moon h1,
.industries-moon h2 {
	margin: 0;
	font: inherit;
	color: inherit;
}
.industries-ray {
	position: absolute;
	width: 2px;
	background: #FF5C58;
	transform-origin: top center;
	z-index: 1;
	pointer-events: none;
}
.industries-capsule {
	position: absolute;
	transform: translate(-50%, -50%);
	padding: 10px 22px;
	border: 2px solid #FF5C58;
	border-radius: 999px;
	background: #1d2426;
	color: #fff;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1px;
	white-space: nowrap;
	z-index: 2;
}