/*============================================================
  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; */
	position: relative; /* anchors .header-scroll-down */
}
/* Same checkerboard-square button as .case-study-back, pointed down as a
   scroll cue instead of left as a close/back action. Positioned within
   .header (not fixed) - it's part of this section, not a persistent
   overlay control. */
.header-scroll-down {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 56px;
	height: 56px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #000;
	font-size: 22px;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
}
/* .case-study-back's checkerboard is #F8EDED - this section's own
   background color, so that same fill would be invisible here. Dark
   instead, for contrast against the light header. */
.header-scroll-down::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(45deg, #1d2426 25%, transparent 25%, transparent 75%, #1d2426 75%),
		linear-gradient(45deg, #1d2426 25%, transparent 25%, transparent 75%, #1d2426 75%);
	background-size: 4px 4px;
	background-position: 0 0, 2px 2px;
	opacity: 0.2;
	transition: opacity 0.3s ease;
}
.header-scroll-down:hover::before {
	opacity: 1;
}
.header-scroll-down span {
	position: relative;
	z-index: 1; /* keep the arrow glyph above the checkerboard layer */
}
.header-scroll-down:hover {
	color: #FF5C58;
}
.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: absolute;
		top: 94px;
		right:40px;
		/* right:30vw; */
		align-items: baseline;
		align-self:center;
}
/* Compound selector (not just .header-globe) so this reliably beats the
   plain .header-globe{width:...} rules elsewhere (base, and the
   min-width:1000px override) regardless of source order - this icon
   should stay ~50px everywhere, independent of those. The img itself
   still needs its own width since it doesn't inherit the container's
   box size (see the removed .header-grid svg{fill} note below - same
   <img>-is-opaque issue applies to sizing, not just color). */
.header-globe.header-grid{
	width: 50px;
}
.header-grid img{
	display: block;
	width: 100%;
	height: auto;
}
/* .header-grid svg{fill:#000} previously here did nothing - the grid mark
   is loaded via <img src="...svg">, not inlined, so the page's CSS can't
   reach into it at all, and the SVG's own paths use stroke, not fill,
   anyway. Colored directly in img/jw-2024-gridball.svg instead
   (stroke="white" -> stroke="#000"), since it's only used here. */

.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), so disable it here. */
	transition: none;
}
.header-globe{
	position: absolute;
	top: 22px;
	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: 16px;
	/* background-color:#ececec; */
	/* border-radius: 4px; */
}

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


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

}
.cta-button a:visited{
	color: #C0DAE0;
	text-decoration:none;
	/*background-image: url(../img/cta-bg-down.jpg);*/
	border-color: #C0DAE0;
	border-radius: 24px;
}
.cta-button a:hover{
	color: #fff;
	border-style: solid;
	border-color: #fff;
	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:90%;

}

.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: 48px;
	font-weight: 600;
	margin-bottom:24px;
	margin-top:0px;
}
.content h3{
	text-align:center;
	font-family: 'Bricolage Grotesque', sans-serif;
	color:#C0DAE0;
	font-size:24px;
	line-height:6px;
	font-weight:bold;
	padding-top:0px;
	letter-spacing:2px;
	font-weight: 400;

}

.content h4{
	text-align:left;
	font-family: 'Bricolage Grotesque', sans-serif;
	color:#C0DAE0;
	font-size:18px;
	line-height:6px;
	font-weight:bold;
	padding-top:0px;
	letter-spacing:0px;
	font-weight: 400;

}
.content h5{
	font-family: 'Poppins', sans-serif;
	font-weight: 200;
	text-align:left;
	color:#FF5C58;
	font-size:12px;
	line-height:12px;
	letter-spacing:3px;
	text-transform:uppercase;
}

.content h6{
}

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

	font-weight: 300;
}

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

.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;
}


/* .grid-tile replaces the old column-left/center/right float setup (30%
   width + float:left/right, one of them floated the opposite way) with a
   flex grid - see .row0 below and its min-width:1000px override. Mobile
   (this base rule) stacks tiles full-width in a single column; the
   min-width:1000px override below turns .row0 into a flex row and these
   into equal flex items instead. */
.grid-tile{
	position: relative;
	width: 100%;
	margin-bottom: 24px;
}
.grid-tile a{
	text-decoration: none;
}
.grid-tile img{
	/* width:100% + height:auto (no object-fit) keeps each image at its own
	   natural aspect ratio - never stretched or cropped to fit the tile. */
	display: block;
	width:100%;
	height: auto;
}
.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;
	line-height: 48px;
}
.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:79%;
	}
	.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: 22px;
		right:25%;
		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;
		/* nowrap, not wrap: at row widths under ~832px (image's 50% +
		   text's 320px flex-basis + this 96px gap), wrap let the image cell
		   drop to its own line below the text instead of shrinking - well
		   above the max-width:1000px breakpoint that already handles
		   stacking for real mobile widths, so this was an unwanted second,
		   earlier stacking point. */
		flex-wrap: nowrap;
		gap: 96px;
	}
	/* 3-column tile grid (Ed Tech / SiriusXM / Type Shop, and the stat-tile
	   rows on the editorial article pages) - always 3 across here
	   (min-width:1000px), stacked to 1 column on mobile via the base
	   .grid-tile{width:100%} rule. Its own (smaller) gap, not .row's 96px -
	   3 cells means 2 gaps eating into the row instead of .row's 1, and
	   .row0 can now run much wider than .row ever does (full-bleed on the
	   article pages), so a fixed 96px stopped being proportional. Fluid
	   between 24px and 56px so it actually scales with the row's own width
	   instead of sitting at one fixed size regardless of viewport. */
	.row0 {
		display: flex;
		gap: clamp(24px, 4vw, 56px);
	}
	.grid-tile {
		width: auto;
		margin-bottom: 0;
		flex: 1 1 0;
	}
	.row-right-image {
		float: none;
		display: block;
		width: 50%;
		min-width: 0; /* flex items default to min-width:auto, which can hold this at its image's intrinsic size and block shrinking instead */
		order: 2;
	}
	.row-left-text {
		float: none;
		display: block;
		position: static;
		left: auto;
		width: auto;
		min-width: 0;
		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) {

	/* Sets the nav checkerboard's square size to 3px on mobile (up from the
	   base 2px) - background-size is the full 2x2-tile repeat unit, so it's
	   6px along with a matching 3px background-position offset that
	   staggers the second gradient into the checker pattern. */
	.nav.nav-fixed::before,
	.nav.nav-fixed::after {
		background-size: 6px 6px;
		background-position: 0 0, 3px 3px;
	}

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

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

	.header-block{
			position: relative;
			top: -34px;
	}
	.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:85%;
		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;
	}
	/* #impact carries both .content and .impact - .impact{width:64%} (base,
	   unconditional, defined further down the file) was winning the tie over
	   .content's width here regardless of viewport, since equal-specificity
	   class selectors resolve by source order and .impact's is textually
	   later, even though this rule is the one actually scoped to mobile.
	   Using the #impact id here (instead of repeating .impact) beats that
	   outright on specificity, so position in the file stops mattering -
	   same fix pattern as .nav.nav-fixed elsewhere in this file. */
	#impact {
		width:85%;
	}


	.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{
	/* 34px (plus the base rule's 30px gap) made "Info Design Impact" wider
	   than the screen on mobile, pushing "Impact" off the right edge -
	   sized down here so all three fit with room to spare next to the
	   header-grid icon in the corner. */
	font-size:20px;
	gap:16px;
}

	/* 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%;
	}
	/* .grid-tile's base rule (width:100%, block-stacked) already handles
	   mobile - .row0 only becomes a flex row at min-width:1000px above, so
	   nothing extra is needed here. */
	.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;
	/* Rays are rebuilt (height/rotation) every time the resolver nudges
	   nodes apart, on hover in and back out - transition those so the whole
	   spoke swings smoothly instead of snapping. */
	transition: height 0.25s ease, transform 0.25s ease;
}
.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;
	cursor: default;
	/* left/top change whenever this or a neighboring capsule is
	   hovered (see buildIndustriesMap/resolveOverlaps) - transition the
	   move itself, not just the hover scale below. */
	transition: left 0.25s ease, top 0.25s ease, transform 0.2s ease, border-color 0.2s ease;
}
.industries-capsule.is-hovered {
	transform: translate(-50%, -50%) scale(1.15);
	border-color: #fff;
	z-index: 3;
}

/*============================================================
  Editorial case-study article layout (mural.html,
  mobility-strategy.html, etc.) - a wide, left-aligned headline
  over a narrow, centered reading column, with images breaking out
  to the full article width. Every selector here is prefixed with
  .article so it reliably beats the shared .content h1/h2/h3/h4/p
  rules (same specificity otherwise, and those are defined earlier
  in this file) without touching them - .content is also what
  index.html's own headings depend on.
============================================================*/
.article {
	max-width: 100%;
	margin: 0 auto;
	margin-top: 120px;
	padding: 0 48px;
	box-sizing: border-box;
}
/* .header-title (h1/h2/h4) and the lede <p> are two flex children with an
   equal flex-basis, so with both present they split ~50/50 - title/kicker
   on the left, description on the right - and with only .header-title
   present (no <p> in the markup at all, like edtech1.html), it just takes
   the full width on its own. flex-wrap lets that same pair stack instead
   of squeezing once the row can't fit both at a reasonable width. */
.article .article-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 48px;
	text-align: left;
	margin-bottom: 40px;
}
.article .article-header .header-title {
	flex: 1 1 320px;
	min-width: 0.25;
}
.article .article-header h1 {
	font-family: 'Bricolage Grotesque', sans-serif;

	font-weight: 700;
	font-size: 72px;
	line-height: 0.9;
	color: #fff;
	text-align: left;
	margin: 0 0 16px 0;
}
.article .article-header h4 {
	font-family: 'Poppins', sans-serif;
	font-weight: 200;
	text-align:left;
	color:#FF5C58;
	font-size:12px;
	line-height:12px;
	letter-spacing:4px;
	text-transform:uppercase;
}
.article .article-header p {
	flex: 1 1 320px;
	min-width: 0;
	margin: 0;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 20px;
	line-height: 1.5;
	color: #cdcdcd;
	text-align: left;
}
/* Width tokens, applied directly to whatever div needs them, rather than
   fixed to specific content types: .body-width is the narrow, centered
   reading column - paragraphs, and any heading that runs with them, per
   the note above about headings still getting the 600px wrap. .full-width
   is for anything meant to break out to .article's own edges instead -
   images (which already default to this, see the bare img rule below,
   without needing the class), the stat-tile row, etc. */
.article .body-width {
	max-width: 720px;
	margin: 40px auto;
	text-align: left;
}
.article .full-width {
	width: 100%;
	margin: 32px 0;
}
.article .body-width h2 {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.2;
	color: #fff;
	text-align: left;
	margin: 0 0 16px 0;
}
.article .body-width h3 {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 600;
	font-size: 19px;
	line-height: 1.3;
	color: #fff;
	text-align: left;
	margin: 0 0 8px 0;
}
.article .body-width p {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 17px;
	line-height: 1.7;
	color: #cdcdcd;
	text-align: left;
	margin: 0 0 16px 0;
}
.article .body-width p:last-child {
	margin-bottom: 0;
}
/* Images default to full-width, breaking out of the 600px text column -
   already direct children of .article, not .body-width, in the markup -
   without needing the .full-width class explicitly, though it's there for
   any other element (see .row0 below) that needs the same treatment. */
.article > img {
	display: block;
	width: 100%;
	margin: 32px 0;
}
.article .grid-tile h3 {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.3;
	color: #fff;
	text-align: left;
	margin: 0 0 8px 0;
}
.article .grid-tile p {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: #cdcdcd;
	text-align: left;
	margin: 0;
}
/* Pull-quote: the block itself runs full-width like an image, but the
   quote text stays in the same 600px measure as the surrounding body copy
   (centered within the wider block lands it at the same left edge as
   .body-width text above/below it), with generous padding so it reads as
   its own editorial callout rather than a regular text block. Scoped
   under .article since .tooltip is shared with other pages that haven't
   moved to this layout. */
.article .tooltip {
	width: 100%;
	box-sizing: border-box;
	padding: 64px 80px;
	margin: 32px 0;
}
.article .tooltip p {
	max-width: 600px;
	margin: 0 auto;
	text-align: left;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 22px;
	line-height: 1.6;
	letter-spacing: normal;
}

@media (max-width: 700px) {
	.article {
		padding: 0 24px;
		margin-top: 64px;
	}
	.article .article-header h1 {
		font-size: 34px;
	}
	.article .tooltip {
		padding: 40px 32px;
	}
}