@charset "UTF-8";

:root {	
	
	/* Colors */
	--navy: #002B46;
	--midnight: #072039;
	--green: #66BC29;
	--accessible-green: #338808;
	--light-blue: #4698CB;
	--light-blue-grey: #EBEDEF;
	--blue: #005C96;
	--grey: #333333;
	--light-grey: #666666;
	
	/* Text Sizes */
	--heading-large: 700 clamp(2em, 5vw, 3.125em) / 1.1 'Switzer', sans-serif; /* 32 - 50px */
	--heading-medium: 700 clamp(1.75em, 4vw, 2.25em) / 1.2 'Switzer', sans-serif; /* 28 - 36px */
	--heading-small: 700 clamp(1.125em, 3vw, 1.5em) / 1.4 'Switzer', sans-serif; /* 18 - 24px */
	
	--text-large: clamp(1.125em, 2.5vw, 1.375em); /* 18 - 22px */
	--text-medium: clamp(1.125em, 2.25vw, 1.25em); /* 18 - 20px */
	--text-regular: clamp(1em, 2vw, 1.125em); /* 16 - 18px */
	
	/* Rounded Corners */
	--border-radius-large: clamp(2em, 6vw, 4.375em); /* 32 - 70px */
	--border-radius-medium: clamp(0.5em, 2vw, 1.25em); /* 8 - 20px */
	--border-radius-small: clamp(0.25em, 1vw, 0.625em); /* 4 - 10px */
	--border-radius-pill: 20em; 
	--border-radius-circle: 50%;
	
	/* Fonts */
	--lexia: 'lexia', serif;
	--switzer: 'Switzer', sans-serif;
	--text-shadow: 0px 0px 32px rgba(0,0,0,0.50);
	
	/* Images & Videos */
	--bg-mix-blend-mode: luminosity;
	--bg-transform-rotate: rotate(-10deg);
	--bg-opacity: 0.1;
	--bg-gradient: linear-gradient(264deg, rgba(8,33,58,0.00) 34%, var(--midnight) 87%);
	--bg-video-opacity: 0.4;

	--bounce: bounce .25s cubic-bezier(.215,.61,.355,1) ;
	--nav-bounce: nav-bounce .25s cubic-bezier(.215,.61,.355,1) ;
	--padding-top: clamp(3em, 2.045em + 4.77vw, 9vw) /*clamp(3em, 2.045em + 4.77vw, 5.625em)*/;
	--padding-bottom: clamp(3em, 2.273em + 3.64vw, 8vw) /*clamp(3em, 2.273em + 3.64vw, 5em)*/;
	--transition: ease all 200ms;

	/* v14 compat aliases — keep legacy selectors that reference --ws-* working */
	--ws-blue: var(--light-blue);
	--ws-blue-AA: #307CAB;
	--ws-blue-2: var(--blue);
	--ws-dk-blue: var(--navy);
	--ws-lt-blue-2: #BFD4E9;
	--ws-midnight: var(--midnight);
	--ws-navy: var(--navy);
	--ws-green: var(--green);
	--ws-green-2: var(--accessible-green);
	--ws-green-AA: #338808;
	--ws-dk-green: #2D7808;
	--ws-red: #C5003E;
	--ws-gray: var(--grey);
	--ws-lt-gray: var(--light-grey);
	--ws-light: #E8E8E8;
	--ws-light-2: var(--light-blue-grey);
	--ws-shadow: 0 1px 1px rgba(0,0,0,.015), 0 2px 2px rgba(0,0,0,.015), 0 4px 4px rgba(0,0,0,.015), 0 8px 8px rgba(0,0,0,.015), 0 16px 16px rgba(0,0,0,.015);
}


/* FONTS ------------------------------ */

@font-face {
	font-display: swap;
	font-family: 'lexia';
	font-style: normal;
	font-weight: 300;
	src: url('/fonts/Lexia_W_Lt.woff2') format('woff2'), url('/fonts/Lexia_W_Lt.woff') format('woff');
}
@font-face {
	font-display: swap;
	font-family: 'lexia';
	font-style: italic;
	font-weight: 300;
	src: url('/fonts/Lexia_W_LtIt.woff2') format('woff2'), url('/fonts/Lexia_W_LtIt.woff') format('woff');
}
@font-face {
	font-display: swap;
	font-family: 'lexia';
	font-style: normal;
	font-weight: 400;
	src: url('/fonts/Lexia_W_Rg.woff2') format('woff2'), url('/fonts/Lexia_W_Rg.woff') format('woff');
}
@font-face {
	font-display: swap;
	font-family: 'lexia';
	font-style: italic;
	font-weight: 400;
	src: url('/fonts/Lexia_W_It.woff2') format('woff2'), url('/fonts/Lexia_W_It.woff') format('woff');
}
@font-face {
	font-display: swap;
	font-family: 'lexia';
	font-style: normal;
	font-weight: 600;
	src: url('/fonts/Lexia_W_Bd.woff2') format('woff2'), url('/fonts/Lexia_W_Bd.woff') format('woff');
}
@font-face {
	font-display: swap;
	font-family: 'lexia';
	font-style: italic;
	font-weight: 600;
	src: url('/fonts/Lexia_W_BdIt.woff2') format('woff2'), url('/fonts/Lexia_W_BdIt.woff') format('woff');
}
@font-face {
	font-display: swap;
	font-family: 'lexia';
	font-style: normal;
	font-weight: 800;
	src: url('/fonts/Lexia_W_Blk.woff2') format('woff2'), url('/fonts/Lexia_W_Blk.woff') format('woff');
}

@font-face {
	font-display: swap;
	font-family: 'Switzer';
	font-style: normal;
	font-weight: 300 700;
	src: url('/fonts/Switzer-Variable.woff2') format('woff2-variations'), url('/fonts/Switzer-Variable.woff') format('woff');
}

@font-face {
	font-display: swap;
	font-family: 'Switzer';
	font-style: italic;
	font-weight: 300 700;
	src: url('/fonts/Switzer-VariableItalic.woff2') format('woff2-variations'), url('/fonts/Switzer-VariableItalic.woff') format('woff');
}


html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	margin: 0;
	overflow-x: hidden;
	padding: 0;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
}

img {
	border: 0;
	height: auto;
	max-width: 100%;
}

ul {
	padding-left: 0;
}

ul li {
	list-style: none;
}

html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt,
dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hr {
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
}

table {
	border-collapse: collapse;
}

td, th {
	empty-cells: show;
	text-align: left;
	vertical-align: top;
}

#skipNavigation {
	background: #FFF;
	color: #000;
	left: 0;
	padding: .5em;
	position: absolute;
	top: -1000px;
	z-index: 10;
}

#skipNavigation:focus {
	top: 0;
}


/* text */
body, .text, input, button, select, textarea, blockquote cite {
	font-family: 'Switzer', sans-serif;
	line-height: 1.45;
	color: var(--grey);
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.lexia {
	font-family: var(--lexia);
}

.switzer {
	font-family: var(--switzer);
}


/* TYPEFACES ------------------------------ */

/* Switzer Light */
.home #hero div.title, .block-testimonial>*, #careers-4 li>div>span, #tour h2>span, #exposure-popup em, #blog.t3 .textbox h2,
#mainnav a, blockquote footer, .portfolio-landing figcaption, body>footer a, #sidenav>ul>li>a,
.case-study blockquote :is(cite,footer) {
	font-family: 'Switzer', sans-serif;
	font-style: normal;
	font-weight: 300;
}

/* Switzer Light Italic */
.articleList article h2 + time, .news time, #contact td:first-of-type, #contact label,
.search section time, .team-profile h3>span {
	font-style: italic;
	font-weight: 300;
}

/* Switzer Regular */
button, .button, input[type="button"], input[type="submit"], input[type="reset"], ul.anchor-links li>a,
.interior-hero h1 {
	font-style: normal;
	font-weight: 400;
}

/* Switzer Regular Italic */
figcaption, blockquote cite {
	font-style: italic;
	font-weight: 400;
}

.case-study blockquote p {
	font-family: 'Switzer', sans-serif;
	font-style: italic;
	font-weight: 600;
}

/* Switzer Bold */
h1, h2, h3, :is(h1, h2, h3)>:is(b, span), body>footer .column>strong, #mainnav>ul>li:nth-child(-n+3)>a, #contact td a, b, strong,
.team-profile h3, .design-process ol>li>div::before {
	font-family: 'Switzer', sans-serif;
	font-style: normal;
	font-weight: 700;
}

/* Lexia Light */
.intro, .intro p, #timeline li>p, #exposure-popup :is(p, .press-release), .blogCredits + p, .blogCredits + figure + p,
#tactics p, #contact p.lexia, #hero:not(.home) .textbox p, .portfolioRight p, .blog-grid p, .engagement li>span,
#contact .contact-info ol>li {
	font-family: 'lexia', serif;
	font-style: normal;
	font-weight: 300;
}

/* Lexia Light Italic */
#quotes blockquote p {
	font-family: 'lexia', serif;
	font-weight: 400;
}

/* Lexia Italic */
blockquote {
	font-family: 'lexia', serif;
	font-style: italic;
	font-weight: 400;
}

/* Lexia Medium */
.intro :is(p>b, p>strong),
.interior-hero p>b, #exposure-popup p>b, .portfolioRight p strong {
	font-family: 'lexia', serif;
	font-style: normal;
	font-weight: 600;
}

/* Lexia Bold */
#contact strong.title {
	font-family: 'lexia', serif;
	font-style: normal;
	font-weight: 600;
}

/* Lexia Bold Italic */
#quotes blockquote p>b {
	font-family: 'lexia', serif;
	font-style: italic;
	font-weight: 600;
}

/* Lexia ExtraBold */
.tour h2, #quotes blockquote p:first-of-type::before,
#timeline li>strong, #results h3>b, #results h3, .engagement li strong {
	font-family: 'lexia', serif;
	font-style: normal;
	font-weight: 800;
}

.text {
	font-size: 1rem;
}

h1, h2, h3, h4, h5, h6, th {
	line-height: 1;
}

h1, 
.heading-large {
	font: var(--heading-large);
}

h2,
.heading-medium {
	font: var(--heading-medium);
}

th .heading-medium {
	color:var(--midnight);
}

h3 { font-size: clamp(1.3125em, 1.199em + 0.57vw, 1.625em); }
h4 { font-size: clamp(1.25em, 1.159em + 0.45vw, 1.5em); }
h5, th { font-size: clamp(1.125em, 1.011em + 0.57vw, 1.438em); }
h6 { font-size: clamp(1.125em, 1.011em + 0.57vw, 1.438em); }

.heading-large span,
.heading-medium span {
	display: block;
	font-size: 0.48em;
	font-weight: 400;
}

a {
	color: var(--blue);
	text-decoration: none;
}
a * { color: inherit; text-decoration: inherit; }

a:is(:hover, :focus), a:is(:hover, :focus) * {
	color: var(--accessible-green);
}

.content :is(p, li) a:not(.button) {
	text-decoration: underline;
	text-decoration-thickness: from-font;
	text-underline-offset: .125em;
}
.content :is(p, li) a:not(.button):focus-visible,
.content :is(p, li) a:not(.button):focus-visible * { color: var(--accessible-green); }

p,h1,h2,h3,h4,hr,.content ul,.contentEditor ul,blockquote,dd,ol {
	margin-block: 0 1rem;
}

:is(p, ul, ol, blockquote, aside, div, section) + :is(h2, h3, h4, h5, h6) {
	margin-top: 2em;
}

.textColor, h1, h2, h3, h4, h5, h6, th, dt {
	color: #31659B;
}

em, i, q, cite, .italic {
	font-style: italic;
}

b, strong {
	font-weight: 700;
}

u {
	text-decoration: none;
}

hr {
	border: 0;
	border-top: 2px dashed rgba(0,0,0,.15);
	clear: both;
	margin-block: 1.75em;
	padding-top: 1px;
}

p {
	font-size: 1em;
}

sup, sub {
	font-size: .6em;
	line-height: 1;
	position: relative;
	vertical-align: baseline;
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

.clearFloats {
	clear: both;
}

.nobr {
	white-space: nowrap;
}

.twoCol, .threeCol, .resCol {
	column-gap: 2em;
	column-rule: none;
}

:is(.twoCol, .threeCol, .resCol) li {
	break-inside: avoid-column;
}

.req {
	color: #C00;
}

.content :is(.photoright, .photoleft) {
	height: auto;
	max-width: min(50%, 21.875em);
}

.content :is(.photoright, .photoleft) img {
	float: none;
	height: auto;
	margin: 0;
	max-width: 100%;
}

.content figure.photo-fullwidth {
	text-align: center;
	width: 100%;
}

.content figure.photo-fullwidth img {
	width: auto;
}

.photoright {
	clear: right;
	float: right;
}

.photoleft {
	clear: left;
	float: left;
}

.muted {
	opacity: 0.5;
}

small, .textSm {
	font-size: .8em;
}

.content table {
	width: 100%;
}

.text-align-center {
	text-align: center;
}

/* HEADER  ------------------------------ */

#mainnav>ul>li>.megamenu ul li>a {
	position: relative;
	text-align: left;
	z-index: 0;
}

#mainnav>ul>li>.megamenu ul li>a::before {
	aspect-ratio: 1;
	background: var(--ws-blue);
	content: '';
	height: 1.2em;
	mask: no-repeat center / contain;
	position: absolute;
}



/* MAIN ------------------------------ */
main {
	background: #FFF;
	position: relative;
	z-index: 0;
}

img[src=""] {
	background: red;
}

/* Grid Section */
.grid-section {
	display: grid;
	float: none;
	gap: var(--gap);
	grid-template-columns: var(--grid-columns);
	margin: 0;
	max-width: 100%;
	padding: var(--padding-top) var(--gap) var(--padding-bottom);
	position: relative;
	width: 100%;
}

.grid-section.small-padding-top {
	padding-top: calc(var(--gap) * 2);
}

.grid-section .textbox {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	grid-area: textbox;
}

.our-work.grid-section .textbox.full-width {
	max-width: 100%;
	text-align: center;
}

.grid-section .scroll-links {grid-area: scroll-links;}
.grid-section .styled-list {grid-area: styled-list;}
.grid-section .services-list {grid-area: services-list;}
.grid-section .stats {grid-area: stats;}
.grid-section .portfolio-grid {grid-area: portfolio;}
.grid-section .image-and-text-container {grid-area: image-and-text;}
.grid-section .award-list {grid-area: award-list;}
.grid-section .brand-list {grid-area: brand-list;}
.grid-section .team-list {grid-area: team-list;}
.grid-section .table {grid-area: table;}
.grid-section .process {grid-area: process;}
.grid-section .button-container {grid-area: button;}

.grid-section .subheading {
    color: var(--ws-blue);
	display: flex;
	gap: 0.25em;
    font-size: clamp(1.25em, 1.159em + 0.45vw, 1.5em);
    font-weight: 400;
	margin: 0 0 .5em;
    position: relative;
}

.grid-section .subheading:before {
    aspect-ratio: 1;
    background: currentColor;
    content: '';
    display: inline-block;
    height: 1.1em;
    mask: no-repeat center / contain;
    mask-image: none;
}

.grid-section h2 {
	color: var(--navy);
}

.grid-section p {
	color: var(--grey);
    font-family: var(--lexia);
    font-size: var(--text-large);
    line-height: 1.45em;
}

.grid-section a:not(.button) {
	text-decoration: underline;
	text-decoration-thickness: from-font;
}

.grid-section.bg-dark p a {
	color: currentColor;
}

.grid-section.bg-dark p a:is(:hover, :focus-visible) {
	text-decoration-color: var(--ws-green);
}

.grid-section li {
	font-size: var(--text-medium);
}
.grid-section:not(#hero) li .button,
.grid-section:not(#hero) .image-and-text-container li .button {
	font-size: 1em;
}

.grid-section .textbox .button {
	margin-top: 1em;
}

.grid-section .subgrid {
	display: grid;
	gap: var(--gap);
	grid-template-columns: subgrid;
}

.grid-section .full-screen .image {
	align-self: stretch;
	overflow: clip;
	position: relative;
}

.grid-section .full-screen .image:first-child {
	border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
	margin-left: calc(var(--gap) * -1);
}

.grid-section .full-screen .image:nth-child(2) {
	border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
	margin-right: calc(var(--gap) * -1);
}

.grid-section .full-screen .image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.grid-section .full-screen .image.anchor-top img {
	object-position: center top;
}

.grid-section .button-container {
	margin-top: 1em;
}

.grid-section > *:not(.image-container, .video-container) {
	position: relative;
	z-index: 1;
}

.grid-section .scroll-links li {
	font-size: 1em;
}

.grid-section .video-container {
    height: 100%;
    left: 0;
    mix-blend-mode: var(--bg-mix-blend-mode);
    opacity: var(--bg-opacity);
    position: absolute;
    top: 0;
    width: 100%;
}

.grid-section .video-container:after {
	content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
	background: var(--bg-gradient);
}

.grid-section .video-container video {
	height: 100%;
	left: 0;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	width: 100%;
}

.grid-section.video .play-pause {
	background: url('/images/icons/control-pause.svg') no-repeat center / contain;
    border-radius: 50%;
	box-shadow: none;
    height: 1.5em;
	opacity: 0.25;
    padding: 0;
	position: absolute;
	bottom: calc(var(--border-radius-large) / 2);
	right: calc(var(--border-radius-large) / 2);
    width: 1.5em;
    z-index: 2;
}

.grid-section.video .play-pause:before,
.grid-section.video .play-pause:after {
	display: none;
}

.grid-section.video .play-pause:is(:hover, :focus-visible) {
	opacity: 1;
}

.grid-section.video .play-pause.paused {
    background: url('/images/icons/control-play.svg') no-repeat center / contain;
	opacity: 1;
}

.grid-section .image-container {
    aspect-ratio: 16/9;
    height: calc(120% + var(--padding-top));
	top: 0;
    left: 15%;
    mix-blend-mode: var(--bg-mix-blend-mode);
    opacity: var(--bg-opacity);
    position: absolute;
    transform: var(--bg-transform-rotate);
    transform-origin: 0 0;
	width: 100%;
}

.grid-section .image-container.no-transform {
    height: 100%;
    transform: none;
	width: 100%;
}

.grid-section .image-container img {
    display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top left;
}

.grid-section .image-container.no-transform img {
    object-position: center;
}

.grid-section .image-container:after {
	content: "";
    position:absolute;
	display: block;
	width: 100%;
	height: 100%;
	background: var(--bg-gradient);
	top: 0;
	left: 0;
}

#hero.grid-section p,
.hero.grid-section p {
	font-family: var(--switzer);
}

.grid-section.value-points {
	grid-template-areas: 
		"textbox"
		"styled-list"
	;
}

.grid-section.value-points .styled-list li {
	background: #fff;
	border-radius: var(--border-radius-medium);
	line-height: 1.375em;
	overflow: clip;
	padding: 1em 1.25em 1.25em;
	position: relative;
}

.grid-section.value-points .styled-list li b {
	color: var(--blue);
}

.grid-section.value-points .styled-list img {
    height: calc(100% + 0.125em);
    left: -0.0625em;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: -0.0625em;
    width: calc(100% + 0.125em);
}

.grid-section.value-points .styled-list li.masked {
	background: var(--green);
}

.grid-section.value-points .styled-list li.masked img {
    opacity: 0.25;
}

.grid-section.services {
	grid-template-areas: 
		"textbox"
		"services-list"
	;
}

.brand-list a:is(:hover, :focus-visible) img {
	transform: scale(1.05);
}

.services-list li>a:not(.button) {
	color: #FFF;
	display: table;
	font-size: var(--text-regular);
	line-height: 1.1;
	padding: .3125em 1.375em .3125em 1.5em;
	position: relative;
	text-decoration: none;
	z-index: 0;
}

.bg-white .services-list li>a:not(.button):not(:hover,:focus-visible) {
	color: var(--ws-blue-AA);
}

.services-list li>a::before {
	aspect-ratio: 1;
	background: var(--light-blue);
	content: '';
	height: 1.2em;
	inset: .25em auto auto 0;
	mask: no-repeat center / contain;
	position: absolute;
}

.services-list li>a::after {
	background: var(--accessible-green);
	border-radius: 2em;
	content: '';
	height: 100%;
	left: -1.125em;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}

.services-list li>a:is(:hover,:focus-visible) {
	color: #FFF;
	text-decoration-color: transparent;
}

.services-list li>a:is(:hover,:focus-visible)::before {
	background: #FFF;
}

.services-list li>a:is(:hover,:focus-visible)::after {
	animation: var(--bounce);
	opacity: 1;
}

.grid-section.results {
	grid-template-areas: 
		"textbox"
		"stats"
		"button"
	;
}

.grid-section.results .stats {
	margin-top: 0;
}

.grid-section.results .stats li {
	background: var(--light-blue-grey);
	border-radius: var(--border-radius-small);
    display: flex;
    flex-direction: column;
	font-size: 1em;
	gap: 0.25em;
	padding: 1.5em 1em 1em;
    text-align: center;
}

.bg-grey.grid-section.results .stats li,
.bg-dark.grid-section.results .stats li {
	background: #fff;
}

.grid-section.results .stats .heading-large {
    color: var(--navy);
}

.grid-section.results .stats .heading-large span {
	display: inline;
    font-size: inherit;
	font-weight: inherit;
}

.grid-section.results .stats li>strong::before {
	aspect-ratio: 1;
	background: var(--green);
	content: '';
	display: block;
	margin: 0 auto 0;
	mask: no-repeat center / contain;
	height: 0.64em;
}

.grid-section.results .stats li:nth-child(1)>strong::before { mask-image: url('/images/icons/seo.svg'); }
.grid-section.results .stats li:nth-child(2)>strong::before { mask-image: url('/images/icons/blog.svg'); }
.grid-section.results .stats li:nth-child(3)>strong::before { mask-image: url('/images/icons/check-regular.svg'); mask-size: 100% auto; }
.grid-section.results .stats li:nth-child(4)>strong::before { mask-image: url('/images/icons/dollar.svg'); }
.grid-section.results .stats li:nth-child(5)>strong::before { mask-image: url('/images/icons/instagram.svg'); }

.grid-section.results .stats li.stopwatch>strong::before { mask-image: url('/images/icons/stopwatch.svg'); }
.grid-section.results .stats li.bullseye>strong::before { mask-image: url('/images/icons/bullseye.svg'); }
.grid-section.results .stats li.bars>strong::before { mask-image: url('/images/icons/bars.svg'); }
.grid-section.results .stats li.pointer>strong::before { mask-image: url('/images/icons/pointer.svg'); }
.grid-section.results .stats li.mobile>strong::before { mask-image: url('/images/icons/mobile.svg'); }

.grid-section.results .stats li.head-side>strong::before { mask-image: url('/images/icons/head-side.svg'); }
.grid-section.results .stats li.bolt>strong::before { mask-image: url('/images/icons/bolt.svg'); }
.grid-section.results .stats li.chart-line-down>strong::before { mask-image: url('/images/icons/chart-line-down.svg'); }
.grid-section.results .stats li.mobile-sharp>strong::before { mask-image: url('/images/icons/mobile-sharp.svg'); }
.grid-section.results .stats li.signs>strong::before { mask-image: url('/images/icons/signs.svg'); }

.grid-section.results .stats li.bullseye-full>strong::before { mask-image: url('/images/icons/bullseye-full.svg'); }
.grid-section.results .stats li.thumbs-up-full>strong::before { mask-image: url('/images/icons/thumbs-up-full.svg'); }
.grid-section.results .stats li.wordpress-full>strong::before { mask-image: url('/images/icons/wordpress-full.svg'); }
.grid-section.results .stats li.people-roof-full>strong::before { mask-image: url('/images/icons/people-roof-full.svg'); }
.grid-section.results .stats li.handshake-full>strong::before { mask-image: url('/images/icons/handshake-full.svg'); }

.grid-section.results .stats .lexia {
	font-size: var(--text-regular);
	display: block;
	margin-bottom: 1em;
	line-height: 1.25em;
}

.grid-section.results .stats em {
	color: var(--light-grey);
	margin-top: auto;
	opacity: 0.65;
}

.grid-section.results .stats abbr {
	text-decoration: none;
}

.grid-section.our-work {
	grid-template-areas: 
		"textbox"
		"portfolio"
		"button"
	;
}

.grid-section.mosaic {
	grid-template-areas: none;
}

.portfolio-grid {
	display: grid;
	gap: var(--gap);
	grid-template-columns: subgrid;
}

.portfolio-grid.partners {
	gap: 0;
	margin: 0 0 calc(var(--padding-bottom) / 2 * -1);
}

.portfolio-grid li {
	/* align-items: center; */
	display: flex;
	justify-content: center;
}

.portfolio-grid li>a {
	aspect-ratio: 1;
	border-radius: var(--border-radius-medium);
	line-height: 0;
	overflow: clip;
	position: relative;
	width: 100%;
}

.portfolio-grid.partners li>a {
	align-items: center;
	display: flex;
	justify-content: center;
}

.portfolio-grid img {
	aspect-ratio: 1;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

.portfolio-grid li > img {
	border-radius: var(--border-radius-medium);
	object-fit: contain;
	object-position: center;
}

.portfolio-grid.partners li > a:is(:hover, :focus-visible) {
	box-shadow: 0 0 0 2px var(--light-blue-grey);
}

.portfolio-grid.partners li img {
	max-width: 12.5em;
}

.portfolio-grid .textbox {
	background: rgba(1,15,29,.86);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	left: 0;
	opacity: 0;
	padding: clamp(1.125rem, 0.917rem + 0.44vw, 1.25rem);
	position: absolute;
	text-decoration: none;
	top: 0;
	transition: opacity .5s ease;
	width: 100%;
}

.portfolio-grid a:is(:hover, :focus-visible) .textbox {
	opacity: 1;
}

.portfolio-grid .textbox::before {
	content: '';
	display: block;
}

.portfolio-grid .textbox strong.title {
	align-self: center;
	color: #FFF;
	font-size: clamp(1em, 0.375em + 1.33vw, 1.375em);
	font-weight: 700;
	line-height: 1;
	margin: 0;
	text-align: center;
}

.portfolio-grid .textbox p {
	color: rgba(255,255,255,.7);
	font-size: clamp(1rem, 0.792rem + 0.44vw, 1.125rem);
	font-family: var(--switzer);
	line-height: 1;
	margin: 0;
}

.mosaic .portfolio-grid-heading :is(h1, h2) {
	color: var(--navy);
	margin: 0;
}

.mosaic .portfolio-grid-heading :is(h1, h2) b {
	font-weight: 700;
}

.mosaic .portfolio-grid-heading p {
	color: var(--grey);
	margin: 0;
}

.mosaic .portfolio-grid {
	display: contents;
	grid-area: auto;
}

.content .mosaic .portfolio-grid li {
	margin: 0;
	padding-left: 0;
}

.content .mosaic .portfolio-grid li::before {
	display: none;
}

.work.mosaic .portfolio-grid-heading {
	max-width: none;
}

.work.mosaic .portfolio-grid-heading h1 {
	font: var(--heading-medium);
}

.work.mosaic .portfolio-grid-heading h1 b {
	display: block;
	font-weight: 700;
}

.blog-mosaic .portfolio-grid-heading,
.work.mosaic .portfolio-grid-heading {
	aspect-ratio: 1;
	background: var(--accessible-green);
	border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
	color: #FFF;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(1.5em, 1.143em + 1.79vw, 3em) 1em;
	position: relative;
}

.blog-mosaic .portfolio-grid-heading:before,
.work.mosaic .portfolio-grid-heading:before {
	background: var(--accessible-green);
	content: "";
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	transform: translateX(-100%);
	top: 0;
	width: var(--gap);
}

.blog-mosaic .portfolio-grid-heading :is(h1, h2),
.blog-mosaic .portfolio-grid-heading p,
.work.mosaic .portfolio-grid-heading :is(h1, h2),
.work.mosaic .portfolio-grid-heading p {
	color: inherit;
	font-family: var(--switzer);
}

.blog-mosaic .portfolio-grid-heading .button {
	align-self: flex-start;
	background: none;
	box-shadow: none;
	color: #FFF;
	font-weight: 400;
	padding-inline: 0;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-transform: lowercase;
	z-index: 1;
}

.blog-mosaic .portfolio-grid-heading .button::before {
	display: none;
}

.blog-mosaic .portfolio-grid-heading .button::after {
	background: #FFF;
}

.blog-mosaic .portfolio-grid-heading .button:is(:hover, :focus-visible) {
	color: #FFF;
	text-decoration-color: currentColor;
}

.blog-mosaic .portfolio-grid li > a {
	border-radius: 0;
	color: var(--navy);
	line-height: 1.2;
	overflow: visible;
	text-decoration: none;
}

.blog-mosaic .portfolio-grid img {
	border-radius: var(--border-radius-medium);
	display: block;
	line-height: 0;
	border: 2px solid transparent;
}

.blog-mosaic .portfolio-grid.news img {
	aspect-ratio: 20/13;
  	object-fit: contain;
}

.blog-mosaic .portfolio-grid a:is(:hover, :focus-visible) img {
	border-color: var(--accessible-green);
}

.blog-mosaic .portfolio-grid .textbox {
	background: none;
	color: var(--navy);
	display: block;
	font-size: var(--text-large);
	height: auto;
	opacity: 1;
	padding: 0.5em 0.5em 0;
	position: static;
	transition: none;
	width: auto;
}

.blog-mosaic .portfolio-grid a:is(:hover, :focus-visible) .textbox,
.blog-mosaic .portfolio-grid a:is(:hover, :focus-visible) .textbox * {
	color: var(--accessible-green);
}

.blog-mosaic .portfolio-grid .textbox::before {
	display: none;
}

.blog-mosaic .portfolio-grid .textbox strong.title {
	align-self: auto;
	color: currentColor;
	font-size: 1em;
	line-height: 1.1;
	text-align: left;
}

.blog-mosaic .portfolio-grid .textbox p {
	color: var(--grey);
	font-family: var(--switzer);
	font-size: 0.75em;
	line-height: 1.2;
	margin: .8em 0 0;
	text-transform: none;
}

.content .work.mosaic .portfolio-grid li > a:not(.button) {
	text-decoration: none;
}

.content .work.mosaic .portfolio-grid li > a:not(.button):is(:hover, :focus-visible),
.content .work.mosaic .portfolio-grid li > a:not(.button):is(:hover, :focus-visible) * {
	color: inherit;
	text-decoration: none;
}

.content .work.mosaic .portfolio-grid li > a:not(.button):is(:hover, :focus-visible) .textbox strong.title {
	color: #FFF;
}

.content .work.mosaic .portfolio-grid li > a:not(.button):is(:hover, :focus-visible) .textbox p {
	color: rgba(255,255,255,.7);
}

.portfolio-button {
	padding: 2em 0 0;
	text-align: center;
}

.grid-section.awards {
	grid-template-areas: 
		"textbox"
		"award-list"
	;
}

.award-list {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
}

.grid-section.brands {
	grid-template-areas: 
		"textbox"
		"brand-list"
	;
}

.brand-list {
	display: grid;
	gap: var(--gap);
	grid-template-columns: var(--grid-columns);
}

.brand-list li {
	align-items: center;
	aspect-ratio: 16 / 9;
	display: flex;
	justify-content: center;
}

.brand-list li a {
	display: flex;
	justify-content: center;
}

.brand-list li img {
	display: block;
}

.no-bullets li,
.content .no-bullets li {
	margin: 0;
	padding: 0;
}

.no-bullets li:before,
.content .no-bullets li:before {
	display: none;
}

#quotes #quote-fader blockquote {
    float: none;
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
    max-width: 100%;
    opacity: 0;
    text-align: left;
    transition: ease all 1s;
    width: 100%;
}

#quotes #quote-fader blockquote.on {
	opacity: 1;
}

#quotes blockquote *,
blockquote.grid-section * {
	color: var(--grey);
	font-style: normal;
	text-align: left;
}

#quotes blockquote p :is(b, strong),
blockquote.grid-section p :is(b, strong) {
	color: var(--blue);
}

#quotes blockquote *,
#quotes blockquote p :is(b, strong),
blockquote.bg-blue *,
blockquote.bg-blue p :is(b, strong) {
	color:#fff;
}

#quotes blockquote p,
blockquote.grid-section p {
	font-family: var(--switzer);
	font-size: var(--text-large);
	margin-bottom: 1.75em;
	position: relative;
	z-index: 1;
}

#quotes blockquote p:first-child:before,
blockquote.grid-section p:first-child:before {
    aspect-ratio: 142/115;
    background: var(--blue);
    content: "";
    display: block;
    left: 0;
    mask-image: url(/images/icons/quotes.svg);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    opacity: 0.1;
    position: absolute;
    top: 0;
    transform: translate(-25%, -55%);
    width: clamp(4.688rem, 3.188rem + 7.5vw, 8.813rem);
    z-index: -1;
}

#quotes blockquote p:first-child:before,
blockquote.grid-section.bg-blue p:first-child:before {
    background: currentColor;
}

#quotes blockquote p:last-of-type:after,
blockquote.grid-section p:last-of-type:after {
    content: "\201D";
	color: currentColor;
}

#quotes blockquote footer,
blockquote.grid-section footer {
	font-size: 1em;
	padding-left: 1em;
}

#quotes blockquote footer:before,
blockquote.grid-section footer:before {
	content: "—";
	left: 0;
	position: absolute;
}

#quotes blockquote footer span,
blockquote.grid-section footer span {
	display: inline-block;
}

.grid-section.image-and-text {
	grid-template-areas: 
		"textbox"
		"image-and-text"
	;
}

.grid-section .image-and-text-container .image {
	min-height: 40vh;
}

.grid-section .image-and-text-container .button {
	font-size: 1em;
}

.grid-section .image-and-text-container p:not(:last-child) {
	margin-bottom: 1em;
}

.grid-section .image-and-text-container :is(p, li) {
	font-family: var(--switzer);
}

.grid-section .image-and-text-container ul {
	margin: 0;
}

.grid-section.careers .image-and-text-container ul.no-bullets {
	display: flex;
	flex-direction: column;
	gap: 0.3125em;
}

.grid-section .marketing-plans {
	display: flex;
}

.grid-section .marketing-plans>div.plan {
	background: #fff;
	border-radius: var(--border-radius-small);
	padding: 3em 1.5em 4em;
	position: relative;
	text-align: center;
}

.grid-section .marketing-plans .plan :is(h2, h3) {
	margin: 0 0 .625em;
	text-align: center;
}

.grid-section .marketing-plans .plan :is(h2, h3)::before {
	aspect-ratio: 1;
	content: '';
	display: block;
	height: 1.875em;
	mask: no-repeat center / contain;
	margin: 0 auto .125em;
}

.grid-section .marketing-plans .plan-1 :is(h2, h3)::before {
	background: var(--ws-navy);
	mask-image: url('/images/icons/focus.svg');
}

.grid-section .marketing-plans .plan-2 :is(h2, h3)::before {
	background: var(--ws-red);
	mask-image: url('/images/icons/360.svg');
}


.grid-section .marketing-plans ul {
	margin-inline: auto;
	max-width: 100%;
	width: fit-content;
}

.grid-section .marketing-plans ul>li {
	line-height: 1.4;
	padding-left: 1.125em;
	position: relative;
	text-align: left;
}

.grid-section .marketing-plans :is(p.intro, ul>li) {
	font-size: clamp(1.188em, 0.667em + 1.11vw, 1.5em); /* 750 - 1200 */
}


.grid-section .marketing-plans ul>li::before {
	aspect-ratio: 1;
	background: var(--ws-blue);
	content: '';
	height: .6875em;
	left: 0;
	mask: url('/images/icons/check.svg') no-repeat center / contain;
	position: absolute;
	top: .375em;
}


.plan-comparison tr {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
}

.plan-comparison tr:first-of-type {
	align-items: center;
}

.plan-comparison tbody>tr:nth-child(odd) {
	background: #F2F2F2;
}

.plan-comparison tr>:is(th, td)  {
	padding: 1em;
}

.plan-comparison tr>:is(th, td):nth-child(1) { grid-column: 1 / 9; }
.plan-comparison tr>:is(th, td):nth-child(2) { grid-column: 9 / 10; }
.plan-comparison tr>:is(th, td):nth-child(3) { grid-column: 10 / 11; }

.plan-comparison tr>:is(th, td):not(:first-child) {
	padding-inline: .5em;
	text-align: center;
}

.plan-comparison th {
	font-size: 1em;
}

.plan-comparison img {
	aspect-ratio: 1;
	width: clamp(1.875em, 1.761em + 0.57vw, 2.1875em);
}

.plan-comparison h2 {
	font-size: clamp(1.5em, 1.227em + 1.36vw, 2.25em);
	margin: 0;
}

.plan-comparison :is(strong, i) {
	color: #515151;
	display: block;
	font-size: 1.125em;
}

.plan-comparison strong.heading {
	color: var(--ws-midnight);
	font-size: clamp(1em, 0.955em + 0.23vw, 1.125em);
}

.plan-comparison span.check::after,
.plan-comparison span.dash::after {
	aspect-ratio: 1;
	content: '';
	display: block;
	margin-inline: auto;
	mask: no-repeat center / contain;
	width: 1.5em;
}

.plan-comparison span.check::after {
	background: var(--ws-blue);
	mask-image: url('/images/icons/check.svg');
}

.plan-comparison span.dash::after {
	background: #CCC;
	mask-image: url('/images/icons/minus.svg');
}

.design-process {
	grid-template-areas:
		"textbox"
		"process"
	;
}

.design-process ol {
	counter-reset: design-process-counter;
	list-style: none;
	padding: 0;
	width: 100%;
}

.design-process ol>li {
	counter-increment: design-process-counter;
	overflow: visible;
	position: relative;
}

.design-process ol>li::before {
	content: '';
	display: block;
	position: absolute;
}

.design-process ol>li:nth-child(even) {
	margin-left: auto;
}

.design-process ol>li>div {
	background: #fff;
	border-radius: var(--border-radius-small);
	padding: 7% max(10%, 2rem) 9%;
}

.design-process ol>li>div::before {
	align-items: center;
	aspect-ratio: 1;
	background: var(--green);
	border: 5px solid #FFF;
	border-radius: 50%;
	color: #FFF;
	content: counter(design-process-counter);
	display: flex;
	font-size: 1.5em;
	inset: 0 auto auto 0;
	justify-content: center;
	line-height: 1;
	margin-top: 3.5%;
	position: absolute;
	transform: translateX(-50%);
	width: 2.3125em;
	z-index: 3;
}
/* 
.design-process ol>li:nth-child(3n+1)>div::before { background: var(--green); }
.design-process ol>li:nth-child(3n+2)>div::before { background: var(--ws-blue); }
.design-process ol>li:nth-child(3n+3)>div::before { background: var(--midnight); } */

.design-process ol>li strong,
.bg-dark.design-process ol>li strong {
	color: var(--ws-midnight);
	display: block;
	font: var(--heading-medium);
	line-height: 1.33;
}

.bg-dark.design-process ol>li strong {
	font: var(--heading-small);
}

.design-process ol>li p {
	font-size: 1.25em;
	line-height: 1.25em;
	margin: 0;
}

.bg-dark.design-process ol>li p {
	color: var(--grey);
}

.grid-section ul.bullets li {
	margin: 0 0 .5em;
	position: relative;
	padding-left: 1.875em;
}

.grid-section  ul.bullets li:before {
	aspect-ratio: 1;
	background: var(--accessible-green);
	color: var(--ws-blue);
	content: '\2022';
	height: .5em;
	left: .875em;
	mask: url('/images/icons/caret-right-white.svg') no-repeat center / contain;
	top: .4375em;
	position: absolute;
}

.grid-section  :is(.bullets, .icon-list) + .button-container {
	margin-top: 2em;
}

.bg-white {
	background: #fff;
}

.bg-grey {
	background: var(--light-blue-grey);
}

.bg-blue {
	background: var(--blue);
}

.bg-dark {
	background: var(--midnight);
}

.bg-blue :is(h1, h2, p, li),
.bg-dark :is(h1, h2, p, li) {
	color:#fff;
}

.bg-clip {
	margin-bottom: calc(var(--border-radius-large) * -1);
	overflow: clip;
}

.bg-clip + * {
	padding-top: calc(var(--border-radius-large ) + var(--padding-top));
}

.bg-clip + .small-padding-top {
	padding-top: calc(var(--border-radius-large ) + 2em);
}

.bg-clip.bottom-left {
	border-bottom-left-radius: var(--border-radius-large);
}

.bg-clip.bottom-right {
	border-bottom-right-radius: var(--border-radius-large);
}

.scroll-links ul {
	display: flex;
	flex-direction: column;
	gap: 0.875em;
}

.image-and-text-container .styled-list {
	display: grid;
	gap: 0;
	grid-column: 1/-1;
	grid-template-columns: subgrid;
}

.image-and-text-container .styled-list ul {
	display: grid;
	gap: var(--gap);
	grid-column: 1/-1;
	grid-template-columns: repeat(auto-fill, minmax(min(17.75em, 100%), 1fr));
	margin: 0;
}

.image-and-text-container .styled-list li {
	background: #fff;
	border-radius: var(--border-radius-medium);
	color: var(--grey);
	font-size: var(--text-regular);
	line-height: 1.375em;
	overflow: clip;
	padding: 1em 1.25em 1.25em;
	position: relative;
}

.bg-white .image-and-text-container .styled-list li {background: var(--light-blue-grey);}
.bg-grey .image-and-text-container .styled-list li {background: #fff;}

.image-and-text-container .styled-list li:nth-child(odd):last-child {
	grid-column: 1/-1;
}

.image-and-text-container .styled-list li:before {
	display: none;
}

.image-and-text-container .styled-list li :is(b, strong) {
	color: var(--navy);
}

.image-and-text-container .styled-list li a,
.image-and-text-container .styled-list li a * {
	text-decoration: underline;
	text-decoration-thickness: from-font;
	text-underline-offset: 0.125em;
}

.image-and-text-container .styled-list li a:is(:hover, :focus-visible),
.image-and-text-container .styled-list li a:is(:hover, :focus-visible) * {
	color: var(--accessible-green);
}

.grid-gallery li,
.grid-gallery li a {
	aspect-ratio: 1;
	border-radius: var(--border-radius-small);
	background: var(--blue);
	display: block;
	overflow: clip;
	position: relative;
}

.grid-gallery li img {
    height: 100%;
    inset: 0;
    object-fit: cover;
    object-position: center;
    position: absolute;
    transition: var(--transition);
    width: 100%;
}

.grid-gallery li a:is(:hover, :focus-visible) img {
    opacity: 0.5;
	transform: scale(1.1);
}

#gallery .grid-gallery li span {
    color: #fff;
	font-size: var(--text-large);
    left: 0;
    padding: 0 1em;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
	transition: var(--transition);
    width: 100%;
	z-index: 1;
}

#gallery .grid-gallery li:hover span {
    opacity: 0;
}

#gallery .grid-gallery li span + img {
    opacity: 0.15;
	transition: var(--transition);
}

#gallery .grid-gallery li:hover span + img {
    opacity: 1;
}

#gallery .grid-gallery li:is(:nth-child(8n+1), :nth-child(8n+8)) { background: var(--midnight); }
#gallery .grid-gallery li:is(:nth-child(8n+2), :nth-child(8n+7)) { background: var(--blue); }
#gallery .grid-gallery li:is(:nth-child(8n+3), :nth-child(8n+6)) { background: var(--accessible-green); }
#gallery .grid-gallery li:is(:nth-child(8n+4), :nth-child(8n+5)) { background: var(--blue); }


/* Home Grid Sections */
.grid-section.video .textbox {
	justify-content: flex-end;
	grid-row: 1;
}







/* GENERIC INTERIOR CONTENT ------------------------------ */

.interior-content {
	padding: var(--padding-top) var(--gap) var(--padding-bottom);
}

:is(.interior-content, .cms) :is(h1, h2, h3, h4, h5) {
	color: var(--midnight);
}

:is(.interior-content, .cms) h2 { font-size: clamp(1.5em, 1.227em + 1.36vw, 2.25em); }
:is(.interior-content, .cms) h3 { font-size: clamp(1.3125em, 1.199em + 0.57vw, 1.625em); }
:is(.interior-content, .cms) h4 { font-size: clamp(1.25em, 1.159em + 0.45vw, 1.5em); }
:is(.interior-content, .cms) h5,
:is(.interior-content, .cms) th { font-size: clamp(1.125em, 1.011em + 0.57vw, 1.438em); }
:is(.interior-content, .cms) h6 { font-size: clamp(1.125em, 1.011em + 0.57vw, 1.438em); }

:is(.interior-content, .cms) p.intro, 
:is(.interior-content, .cms) .intro, 
.blogCredits + p, 
.blogCredits + figure + p {
	font-size: clamp(1.25em, 1.159em + 0.45vw, 1.5em);
}

:is(.interior-content, .cms) p,
:is(.interior-content, .cms) ul > li,
:is(.interior-content, .cms) ol > li {
	font-size: clamp(1.125em, 1.08em + 0.23vw, 1.25em);
}

:is(.interior-content, .cms) p .button,
:is(.interior-content, .cms) ul > li .button,
:is(.interior-content, .cms) ol > li .button {
	font-size: 1em;
}

:is(.interior-content, .cms) blockquote {
	margin: 2em 0;
}

:is(.interior-content, .cms) :is(.photoright, .photoleft) blockquote {
	max-width: 100%;
}

:is(.interior-content, .cms) blockquote, 
:is(.interior-content, .cms) blockquote p {
	color: var(--blue);
}

:is(.interior-content, .cms) blockquote footer {
	border-top: 2px dashed var(--ws-light);
	color: var(--ws-gray);
	font-size: 1rem;
	margin-top: 1em;
	padding-top: 1em;
}

:is(.interior-content, .cms) blockquote p:first-of-type::before {
	content: open-quote;
}

:is(.interior-content, .cms) blockquote p:last-of-type::after {
	content: close-quote;
}

:is(.interior-content, .cms) p .button,
:is(.interior-content, .cms) p button {
	font-size: 1em;
}




/* FADER ------------------------------ */

.fader-controls {
    align-items: center;
    display: flex;
    gap: 0.75em;
    margin: calc(var(--padding-bottom) / 2) 0 calc(var(--padding-bottom) * -1);
	padding-bottom: calc(var(--padding-bottom) / 2);
}

.fader-controls ul {
    align-items: center;
    display: flex;
    gap: 0;
    justify-content: center;
    margin: 0;
}

.fader-controls button {
    align-items: center;
    background: none;
    box-shadow: none;
    display: flex;
    height: 1.6875em;
    justify-content: center;
    padding: 0;
    width: 1.6875em;
}

.fader-controls .dots button:before {
    aspect-ratio: 1;
    background: rgba(255,255,255,.2);
    border: 2px solid rgba(255,255,255,.25);
    border-radius: 50%;
    content: "";
    display: block;
    height: .5em;
    opacity: 1;
    position: relative;
    width: .5em;
}

.fader-controls .dots button:is(:hover, :focus-visible):before {
    background: rgba(255,255,255,.2);
    border: 2px solid #fff;
}

.fader-controls .dots .active button:before {
    background: #fff;
	border: 2px solid #fff;
}

.fader-controls button:after {
    display: none;
}

.fader-controls .play-pause {
    background-color: #fff;
    mask-image: url('/images/icons/control-pause.svg');
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 75% auto;
    opacity: .5;
}

.fader-controls .play-pause.paused {
    mask-image: url('/images/icons/control-play.svg');
}



/* EXPOSURE / WEBSOLUTIONS ------------------------------ */
.exposure-web-solutions > div {
	text-align: center;
}

.exposure-web-solutions .images {
	align-items: center;
	display: flex;
	justify-content: space-between;
	line-height: 0;
	margin: 3em auto;
	max-width: 32.5em;
}

.exposure-web-solutions .images figure {
	margin: 0;
}

.exposure-web-solutions .images figure:first-child {
	display: contents;
}

.exposure-web-solutions .images figure:first-child::after {
	background: var(--ws-blue);
	content: '';
	display: inline-block;
	height: 2.125em;
	margin-inline: auto;
	mask: url('/images/icons/plus.svg') no-repeat center / 1.3125em auto;
	width: 3.5em;
}

.exposure-web-solutions .images img {
	height: 2em;
	width: auto;
}

.exposure-web-solutions .button:after {
    background: #FFF;
    mask-image: url('/images/icons/external-link.svg');
    opacity: .5;
}




/* CONTACT RIBBON ------------------------------ */

#contact {
	background: var(--blue);
	overflow: hidden;
	position: relative;
	z-index: 0;
}

#contact:before {
    background: url(/images/contact-bg-2.png) no-repeat center / cover;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    mix-blend-mode: multiply;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
}

.grid-section#contact {
	align-items: center;
}

.grid-section#contact button {
	box-shadow: none;
}

body.contact .grid-section#contact button:before {
	background: var(--accessible-green);
}

.grid-section#contact button:is(:hover, :focus-visible) {
	background: var(--midnight);
	color: #fff;
}

.grid-section#contact button:before {
	background: var(--midnight);
}

#quotes + #contact {
    border-top: .25em solid #FFF;
}

#contact h1,
.careers-send-us-your-resume h1 {
  font-size: clamp(1.75em, 1.477em + 1.36vw, 2.5em);
}

#contact .contact-info p {
	margin: 0 0 2em;
}

/* Contact steps */
#contact .contact-info ol {
	list-style: none;
	max-width: 27.875rem;
	padding: 0;
}

#contact .contact-info ol>li {
	border-top: 2px dashed #e0e0e0;
	color: #FFF;
	font-size: clamp(1.125em, 1.034em + 0.45vw, 1.375em);
	margin: 0;
	padding: .75em 0 .75em 2em;
}

#contact .contact-info ol>li:first-child {
	border-top-style: solid;
}

#contact .contact-info ol>li::before {
	aspect-ratio: 1;
	content: '';
	height: 1.45em;
	inset: .75em auto auto 0;
	mask: no-repeat center / contain;
}

#contact .contact-info ol>li:nth-child(1)::before {	background: var(--ws-green); mask-image: url('/images/icons/number-1.svg'); }
#contact .contact-info ol>li:nth-child(2)::before {	background: var(--ws-blue); mask-image: url('/images/icons/number-2.svg'); }
#contact .contact-info ol>li:nth-child(3)::before {	background: var(--ws-blue-2); mask-image: url('/images/icons/number-3.svg'); }



/* Contact icons */
#contact .icon {
	background: no-repeat .125em .1875em / auto 1em;
	color: #FFF;
	display: block;
	font-size: var(--text-regular);
	padding-left: 1.5625em;
}

#contact .icon.phone { background-image: url('/images/icons/phone.svg?v=2'); }
#contact .icon.clock { background-image: url('/images/icons/clock.svg?v=2'); }
#contact .icon.location { background-image: url('/images/icons/location.svg?v=2'); }

#contact a:not(.button) {
	text-underline-offset: 0.125em;
}

#contact a:not(.button):is(:hover, :focus-visible) {
	text-decoration-color: rgba(255,255,255,0.5);
}

#contact.lp {
	overflow: hidden;
}

#contact :is(h1, h2, p, address, td, a) {
	color: #FFF;
}

#contact hr {
	border-top: 2px dashed rgba(255,255,255,.2);
	margin: .5em 0;
}

#contact label {
	color: #FFF;
	display: block;
	font-size: var(--text-regular);
	font-style: italic;
	font-weight: 300;
}

#contact .req {
	color: #FFF;
}

#contact small {
	font-family: var(--switzer);
	font-size: 0.75em;
}

#contact :is(input, textarea, select) {
	background-color: rgba(255,255,255,.85);
	color: #000;
	margin: 0 0 .5em;
	padding: .25em .75em;
	transition: all .3s ease;
}

#contact :is(input, textarea, select):focus {
	background-color: #FFF;
	border-color: transparent;
}

#contact select {
	margin: 0 0 1.75em;
	padding: .25em 2.75em .25em .75em;
	width: 100%;
}

#contact select:invalid {
	font-style: italic;
}

#contact select:invalid option:not(:first-child) {
	font-style: normal;
}

#contact textarea {
	margin: 0 0 1.25em;
}

#contact button::before {
	border: 0;
}

#contact.lp h2 {
	color: #FFF;
	font-size: clamp(1.5em, 1.154em + 1.54vw, 2.5em); /* 360 - 1400 */
	font-weight: 300;
}

#contact .contact-info h2 {
	margin-top: 0;
}

#contact.lp h2>b {
	display: block;
}

#contact form h2 + div {
	margin-top: 2em;
}

#contact strong.title {
	color: #FFF;
	display: block;
	font-size: clamp(1.5em, 1.318em + 0.91vw, 2em);
	line-height: 1;
	margin: 0 0 .75em;
}

#contact.lp img {
	bottom: -8em;
	left: -20em;
	left: calc(50% - clamp(55em, 46.923em + 17.23vw, 62em)); /* 360 - 1400 */
	position: absolute;
	transform: scale(1.25);
}

#contact button[type="submit"] {
	font-size: clamp(1.125em, 1.08em + 0.23vw, 1.25em);
}





/* TEAM LIST ------------------------------ */
#team {
	grid-template-areas:
		"textbox"
		"team-list"
		"button"
	;
}

#team .team-list li a {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 1.5);
	text-decoration: none;
}

#team .team-list li .thumbnail {
    border-bottom-left-radius: var(--border-radius-medium);
    border-bottom-right-radius: var(--border-radius-medium);
    overflow: clip;
}

#team .team-list .thumbnail {
    position: relative;
}

#team .team-list .thumbnail:before {
    aspect-ratio: 1;
    border-radius: var(--border-radius-medium);
    bottom: 0;
    content: "";
    display: block;
    position: absolute;
	transition: var(--transition);
    width: 100%;
}

#team .team-list li a:is(:hover, :focus-visible) .thumbnail:before {
    background: var(--green);
}

#team .team-list .thumbnail img {
    display: block;
    filter: grayscale(1);
    height: auto;
    max-width: 100%;
    position: relative;
}

#team .team-list a:is(:hover, :focus) img{
    filter: grayscale(0);
}

#team .team-list h3 {
    color: #000;
    font-size: var(--text-medium);
    margin: 0;
    text-align: center;
}

#team .team-list h3 em {
    color: #666;
    display: block;
    font-size: .7em;
    font-weight: 300;
    margin-top: 0.5em;
}

#team .team-list li a:is(:hover, :focus-visible) em {
    color: var(--accessible-green);
}



/* ICON LIST ------------------------------ */
.icon-list li {
	margin-bottom: 0.875em;
	padding-left: 1.5em;
	position: relative;
}

.icon-list li::before {
	aspect-ratio: 1;
	background: var(--green);
	content: '';
	height: 1em;
	left: 0;
	mask: no-repeat center / contain;
	position: absolute;
	top: .25em;
}

.icon-list li.check:before {mask-image: url(/images/icons/icon-list/check.svg)}
.icon-list li.trophy:before {mask-image: url(/images/icons/icon-list/trophy.svg)}
.icon-list li.code:before {mask-image: url(/images/icons/icon-list/code.svg)}
.icon-list li.people:before {mask-image: url(/images/icons/icon-list/people.svg)}
.icon-list li.person:before {mask-image: url(/images/icons/icon-list/person.svg)}
.icon-list li.headphones:before {mask-image: url(/images/icons/icon-list/headphones.svg)}
.icon-list li.dollar-bill:before {mask-image: url(/images/icons/icon-list/dollar-bill.svg)}
.icon-list li.chart:before {mask-image: url(/images/icons/icon-list/chart.svg)}
.icon-list li.handshake:before {mask-image: url(/images/icons/icon-list/handshake.svg); height: 1.125em; top: 0.125em;}


/* list */
.content ol ol li {
	list-style: lower-alpha;
}

.content ul li {
	padding-left: 2em;
	position: relative;
}

.content ul li::before {
	content: '\203A';
	display: inline-block;
	height: 1em;
	left: .5em;
	position: absolute;
	text-align: center;
	top: 0;
	width: 1em;
}

.content ul li ul li:before {
	opacity: .5;
}

.content :is(ol, ul) li li {
	font-size: 1em;
}


/* addon classes */
.clearfix::after {
	clear: both;
	content: '';
	display: table;
}

.videoContainer {
	aspect-ratio: 16 / 9;
	line-height: 0;
	position: relative;
	width: 100%;
}

.videoContainer.ratio-4-3 {
	aspect-ratio: 4 / 3; /* 4:3 full-frame */
}

/* Build out the space for videos when editing a CMS page */
#tinymce .videoContainer { aspect-ratio: 16 / 9 !important; }
#tinymce .videoContainer.ratio-4-3 { aspect-ratio: 4 / 3 !important; }


.videoContainer iframe,
#tinymce .mce-preview-object {
	border: 0;
	bottom: 0;
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}

body:not(.contentEditor) .sr-only {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

body.contentEditor .sr-only {
    outline: 1px dotted #31659B;
}

body.contentEditor .sr-only::before {
    content: "SR: ";
    font-style: italic;
    font-size: 0.65em;
    opacity: 0.6;
}

#wysiwygBody {
	background: #FFF;
}

.wsNew {
	background-color: #FFC700;
	color: #222;
	display: inline-block;
	font-size: .7em;
	font-style: italic;
	height: 1.5em;
	line-height: 1.5em;
	margin: .3em 0;
	overflow: visible;
	padding: 0 .3em;
	vertical-align: top;
}

td.right, th.right {
	text-align: right;
}

/* FORMS AND INPUTS ------------------------------ */
input, button, select, textarea {
	font-size: 1em;
	line-height: 1.2em;
}

input:is([type="button"], [type="date"], [type="submit"], [type="text"], [type="reset"], [type="password"], [type="tel"], [type="number"], [type="email"], [type="url"], [type="search"]), textarea, select {
	border-radius: 0;
	outline: none;
}

input[type="text"], input[type="password"], input[type="tel"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], textarea, select, input[type="button"], input[type="submit"], input[type="reset"] {
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
}

input[type="text"], input[type="password"], input[type="tel"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], textarea, select {
	border: 1px solid transparent;
	background-color: rgba(0,0,0,.05);
	border-radius: .25rem;
	font-size: clamp(1em, 0.955em + 0.23vw, 1.125em);
	line-height: 1.5;
	padding: .512em 1em;
	width: 100%;
}

select::-ms-expand {
	display: none;
}

select {
	background-image: url('/images/icons/select-arrows.svg');
	background-repeat: no-repeat;
	background-position: calc(100% - .875em) 50%;
	padding-right: 2.15rem;
	width: auto;
	-webkit-appearance: none;
	-moz-appearance: none;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, textarea:focus, select:focus {
	background-color: #F8F8F8;
	border-color: var(--light-blue);
}

textarea {
	display: block;
	resize: vertical;
}

:is(input:is([type="text"], [type="date"], [type="password"], [type="tel"], [type="number"], [type="email"], [type="url"], [type="search"]), textarea, select):focus-visible {
	background-color: #F8F8F8;
}

:is(button, .button, input:is([type="button"], [type="submit"], [type="reset"])):focus-visible {
	background-color: #F03C5E;
	color: #FFF;
}

select option {
	padding: 0 .2em;
}

button, 
.button, 
input:is([type="button"], [type="submit"], [type="reset"]) {
	align-items: center;
    background: #fff;
    border: 0;
    border-radius: var(--border-radius-pill);
	box-shadow: inset 0 0 0 2px var(--light-blue);
    color: var(--navy);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--text-medium);
	gap: 0.35em;
    line-height: 1;
    padding: .55em 1.25em;
	position: relative;
	z-index:0;
}

button:before, 
.button:before {
	background: var(--blue);
	border-radius: var(--border-radius-pill);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
	opacity: 0;
    width: 100%;
	z-index: -1;
	transition: var(--transition);
}

button:is(:hover, :focus-visible):before, 
.button:is(:hover, :focus-visible):before {
	animation: var(--bounce);
    opacity: 1;
}

button:is(:hover, :focus-visible), 
.button:is(:hover, :focus-visible) {
	color: #fff;
}

button.green, 
.button.green {
	background: var(--accessible-green);
	box-shadow: none;
	color: #fff;
}

button:after, 
.button:after {
    background: var(--green);
    content: "";
    display: block;
    height: 0.65em;
    mask: url(/images/icons/caret-right-white.svg) no-repeat center / 100% 100%;
	transition: var(--transition);
    width: 0.65em;
}

button.scroll-link:after, 
.button.scroll-link:after {
    background: currentColor;
	height: 0.48em;
	transform: rotate(90deg);
	width: 0.48em;
}


/* v14 compat — button color variants & extras (layer on top of v15 base) */

:is(button, .button, input:is([type="button"], [type="submit"], [type="reset"])).dark {
	color: #FFF;
}

:is(button, .button, input:is([type="button"], [type="submit"], [type="reset"])).dark {
	background: transparent;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}

:is(button, .button).red {
	box-shadow: none;
	color: #FFF;
}

:is(button, .button).red::before {
	background: var(--ws-green-AA);
	opacity: 1;
}

:is(button, .button).blue {
	box-shadow: none;
	color: #FFF;
}

:is(button, .button).blue::before {
	background: var(--ws-blue-2);
	opacity: 1;
}

:is(button, .button).white {
	background: #FFF;
	color: var(--navy);
}

:is(button, .button).shadow {
	box-shadow: 0 .125em 1em 0 rgba(0,0,0,.15), inset 0 0 0 2px var(--light-blue);
}

:is(button, .button).big {
	font-size: clamp(1.125em, 1.08em + 0.23vw, 1.25em);
	padding: .65em 1.75em;
}

/* Scroll-down button (used on hero and service pages) */
.button.red.scroll-down {
	font-size: clamp(1.125em, 1.08em + 0.23vw, 1.25em);
	inset: auto auto 0 50%;
	padding: .5em 2.625em .5em 2em;
	position: absolute;
	transform: translate(-50%,50%);
	white-space: nowrap;
}

.button.red.scroll-down::after {
	mask-image: url('/images/icons/caret-down-white.svg');
}

/* Management-area form buttons (red) */
:is(body[class*='management-'], .ga4-support) :is(input[type="submit"], input[type="clear"], .wsFormButton),
input[value="Login"] {
	background-color: var(--ws-red);
	color: #FFF;
}

.grid {
	display: grid;
  	grid-auto-flow: dense;	
	grid-template-columns: var(--grid-columns);
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}




/* v14 compat — form additions */

label, legend {
	font-size: 1.125em;
}

button img {
	height: 1em;
	vertical-align: top;
	width: auto;
}

input.bulky,
.bulky {
	font-size: 1.2em;
	padding: .4em .6em;
}

#Form1 fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

#Form1 fieldset legend {
	float: left;
	font-weight: 700;
	padding: 0;
	width: 100%;
}

#paragraphDescriptor {
	display: inline-block;
	font-size: inherit;
	margin-bottom: 0;
}

input[type="submit"] {
	background-color: var(--ws-light);
}


.formTable,
:where(.formTable, .form-flex) :where(input:where([type="text"], [type="password"], [type="tel"], [type="number"], [type="email"], [type="url"], [type="search"]), table, textarea, select) {
	width: 100%;
}

#ContactForm fieldset {
	margin: .5em 0 0;
	border: 0;
	padding: 0;
}

#ContactForm fieldset legend {
	padding: 0;
}

#ContactForm fieldset table {
	margin-left: 2em;
}


.subjClass {
	display: none !important;
}

#Captcha label {
	padding-left: 0;
}

:is(.formEdit, .formBuilder) select {
	width: 40%;
}

.formTable table td {
	padding-bottom: 0;
}

.formTable.right td:first-child {
	text-align: right;
	width: 1%;
}

.formTable.right td {
	width: auto;
}


/* Forms - without tables ----- */
form.narrow .form-flex,
.narrow.form-flex {
	max-width: 18.75em;
}

.form-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.form-flex fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	width: 100%;
}

.form-flex fieldset legend {
	float: left;
	width: 100%;
}

.form-flex>div {
	margin: 0 0 .75em;
}

.form-flex .full {
	width: 100%;
}

.form-flex>div>label:first-of-type {
	display: block;
}

/* Checkboxes, radios */
.form-flex>div>fieldset>label {
	display: inline-block;
}



/* MANAGEMENT ------------------------------ */
.contentEditor {
	background: #FFF;
	min-width: 100%;
}

hr + .manage {
	margin-top: -1em;
}

.manage {
	border-bottom: 1px solid rgba(0,0,0,.2);
	line-height: 1.3;
	width: 100%;
}

.manage th {
	border-bottom: 1px solid rgba(0,0,0,.2);
	text-align: left;
}

.manage th.right {
	text-align: right;
}

.manage th.sort {
	cursor: pointer;
}

.manage th.sort img {
	margin-left: 5px;
}

.manage th img {
	bottom: -2px;
	position: relative;
}

.manage td,.manage th {
	padding: 5px 5px 5px 0;
}

.manage td:first-child {
	padding-left: .8em;
}

.manage img.preload {
	border: solid 1px #fff;
	display: none;
	position: absolute;
	top: 0;
	z-index: 10;
}

.manage td.icons img {
	bottom: -2px;
	margin-left: 5px;
	position: relative;
}

.manage td:first-child.icons img {
	margin-left: 0;
}

.manage td:first-child.icons {
	padding-inline: 3px;
}

.manage td:nth-child(2) {
	hyphens: auto;
	overflow-wrap: break-word;
	word-break: break-word;
	word-wrap: break-word;
}

.manage td.icons a:first-child img {
	margin-left: 0;
}

.manage td.icons input {
	bottom: 2px;
	margin-left: 5px;
	position: relative;
}

.manage .hidden {
	color: #900;
	font-style: italic;
}

.manageButton {
	padding: 10px 0;
	text-align: right;
}

.alternate tbody tr:nth-child(even), .even {
	background: #FFF;
}

.alternate tbody tr:nth-child(odd), .odd {
	background: rgba(0,0,0,.06);
}

.manage + hr, .manage + .manageLinks + hr {
	margin-top: 50px;
}

.manageLinks {
	margin-top: 10px;
}

.manageLinks select {
	max-width: 20em;
}

.manageLinks a {
	white-space: nowrap;
}

.manageLinks a img {
	bottom: -2px;
	position: relative;
}

.manageLinks button {
	margin-left: 5px;
}

.manageButtons {
	padding: 10px 0;
	text-align: right;
}

.wsReturnToButton {
	float: right;
	margin-top: -3.5em;
}

.manage.rightFirstChild td:first-child {
	text-align: right;
}

.sortRow th {
	cursor: pointer;
}

.manageEllipsis {
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 200px;
}

.manage colgroup col {
	width: auto !important;
}

#wsManagementBar a[target="_blank"]::after {
	display: none;
}


/* PAGINATION ------------------------------ */

.pagination {
	margin: 1em 0 0;
	text-align: center;
}

main>.pagination:last-child {
	padding-bottom: 3em;
}

.pagination li {
	display: inline-block;
}

.pagination li.dots {
	margin-inline: .0625em;
}

.content .pagination li {
	font-size: 1em;
	margin: 0;
	padding: 0;
}

.content .pagination ul li::before {
	display: none;
}

.pagination :is(.first, .last) {
	display: none;
}

.pagination li a {
	display: block;
	font-size: clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem);
	font-weight: 400;
	line-height: 1;
	padding: .3em .475em;
	position: relative;
	z-index: 0;
}

.content .pagination a {
	text-decoration: none !important;
}

.pagination a:not(.prev, .next)::before {
	aspect-ratio: 1;
	border-radius: 50%;
	content: '';
	height: 100%;
	inset: 50% 0 0 50%;
	pointer-events: none;
	position: absolute;
	transform: translate(-50%,-50%);
	z-index: -1;
}

.pagination li.on a {
	color: #333;
	pointer-events: none;
}

.pagination li.on a::before {
	background: var(--ws-light);
}

.pagination a:is(.prev,.next) {
	background: var(--ws-green);
	mask: no-repeat 50% calc(50% + .0625em) / auto .75em;
}

.pagination a:is(.prev,.next):is(:hover, :focus-visible) {
	background: var(--ws-midnight);
}

.pagination a[disable] {
	background: #EDEDED !important;
}

.pagination a.prev {
	margin-right: .1875em;
	mask-image: url('/images/icons/caret-left-white.svg');
}

.pagination a.next {
	margin-left: .1875em;
	mask-image: url('/images/icons/caret-right-white.svg');
}

.pagination a.older {
	float: left;
}








/* FORM ERRORS ------------------------------ */
.form-error {
	color: #EE0000;
	font-size: 0.9375em;
}

.reverse .form-error {
	background: #EE0000;
	color: #FFF;
}

fieldset label:first-of-type input:focus {
	outline: 1px solid #EE0000;
}

.formError {
	background-color: #000;
	border: 0;
	border-radius: 10px;
	box-shadow: 0 2px 2px #333;
	color: #FFF;
	display: none;
	margin: 0 0 2px;
	padding: .3125em .625em;
	z-index: 5;
}

.formError p {
	font-size: .9em;
	margin: 0;
}

.formError em {
	border: 10px solid;
	border-color: #000 transparent transparent;
	bottom: -1.0625em;
	display: block;
	height: 0;
	left: 2.5em;
	position: absolute;
	width: 0;
}



/* ICONS ------------------------------ */

.icon-list li.advertising::before,
li.expertise-digital-advertising>a::before,
.expertise-digital-advertising h1.subheading::before {
	mask-image: url('/images/icons/advertising.svg') !important;
}

.icon-list li.analytics::before,
li.expertise-data-analytics>a::before,
.expertise-data-analytics h1.subheading::before,
li.expertise-digital-marketing>a::before,
.expertise-digital-marketing h1.subheading::before {
	mask-image: url('/images/icons/analytics.svg') !important;
}

.icon-list li.branding::before,
li.expertise-branding>a::before,
.expertise-branding h1.subheading::before {
	mask-image: url('/images/icons/branding.svg') !important;
}

.icon-list li.campaigns::before,
li.expertise-campaigns>a::before,
.expertise-campaigns h1.subheading::before {
	mask-image: url('/images/icons/campaigns.svg') !important;
}

.icon-list li.cms::before,
li.expertise-cms-solutions>a::before,
.expertise-cms-solutions h1.subheading::before {
	mask-image: url('/images/icons/cms.svg') !important;
}

.icon-list li.design::before,
li.expertise-web-design>a::before,
.expertise-web-design h1.subheading::before {
	mask-image: url('/images/icons/design.svg') !important;
}

.icon-list li.development::before,
li.expertise-custom-development>a::before,
.expertise-custom-development h1.subheading::before {
	mask-image: url('/images/icons/development.svg') !important;
}

.icon-list li.ecommerce::before,
li.expertise-ecommerce>a::before,
.expertise-ecommerce h1.subheading::before {
	mask-image: url('/images/icons/ecommerce.svg') !important;
}

.icon-list li.email::before,
li.expertise-email-marketing>a::before,
.expertise-email-marketing h1.subheading::before {
	mask-image: url('/images/icons/email.svg') !important;
}

.icon-list li.graphic-design::before,
li.expertise-graphic-design>a::before,
.expertise-graphic-design h1.subheading::before,
li.expertise-creative-services>a::before,
.expertise-creative-services h1.subheading::before  {
	mask-image: url('/images/icons/graphic.svg') !important;
}

.icon-list li.hosting::before,
li.expertise-managed-hosting>a::before,
.expertise-managed-hosting h1.subheading::before {
	mask-image: url('/images/icons/hosting.svg') !important;
}

.icon-list li.lead::before,
li.expertise-lead-generation>a::before,
.expertise-lead-generation h1.subheading::before {
	mask-image: url('/images/icons/lead.svg') !important;
}

.icon-list li.maintenance::before,
li.expertise-support-services>a::before,
.expertise-support-services h1.subheading::before {
	mask-image: url('/images/icons/maintenance.svg') !important;
}

.icon-list li.marketing::before,
li.expertise-content-development>a::before,
.expertise-content-development h1.subheading::before {
	mask-image: url('/images/icons/marketing.svg') !important;
}

.icon-list li.seo::before,
li.expertise-search-engine-optimization>a::before,
.expertise-search-engine-optimization h1.subheading::before {
	mask-image: url('/images/icons/seo.svg') !important;
}

.icon-list li.social::before,
li.expertise-social-media-marketing>a::before,
.expertise-social-media-marketing h1.subheading::before {
	mask-image: url('/images/icons/social.svg') !important;
}

.icon-list li.strategy::before,
li.expertise-strategy>a::before,
.expertise-strategy h1.subheading::before {
	mask-image: url('/images/icons/strategy.svg') !important;
}

.icon-list li.video::before,
li.expertise-video-production>a::before,
.expertise-video-production h1.subheading::before {
	mask-image: url('/images/icons/video.svg') !important;
}

.icon-list li.wordpress::before,
li.expertise-wordpress-development>a::before,
.expertise-wordpress-development h1.subheading::before {
	mask-image: url('/images/icons/wordpress.svg') !important;
}

.icon-list li.application::before,
li.expertise-mobile-app-development>a::before,
.expertise-mobile-app-development h1.subheading::before {
	mask-image: url('/images/icons/application.svg') !important;
}

.icon-list li.traffic-light::before { mask-image: url('/images/icons/traffic-light.svg') !important; }
.icon-list li.line-graph::before { mask-image: url('/images/icons/line-graph.svg') !important; }
.icon-list li.key::before { mask-image: url('/images/icons/key.svg') !important; }





/* TRANSITIONS ------------------------------ */

a, a *, a::before, a::after, button, .button, input:is([type="button"], [type="submit"], [type="reset"]),
:is(input, select, textarea):focus, #navContainer li, #popover .close,
body.transparent-header>header::after {
	transition: var(--transition);
}

.stop-transitions * {
	transition: none !important;
}





/* FOOTER ------------------------------ */

body>footer {
	background: var(--midnight);
	padding: 3em var(--gap) 2em;
	position: relative;
}

body>footer a {
	color: #FFF;
}

body>footer .fatFooter {
	position: relative;
}

body>footer .fatFooter > div ul {
	margin: 0;
}

body>footer .fatFooter .icons ul {
	columns: 2;
	column-gap: 2em;
	text-align: left;
}

body>footer .column>strong {
	color: var(--navy);
}

body>footer .fatFooter a {
	display: table;
	position: relative;
	padding: .1875em 1.375em .1875em 1.5em;
	z-index: 0;
}

body>footer .fatFooter a::after {
	background: var(--accessible-green);
	border-radius: 1em;
	content: '';
	height: 100%;
	left: -1.125em;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}

body>footer .icon a::before,
body>footer .column.icons a::before,
body>footer :is(a, address).icon::before {
	aspect-ratio: 1;
	background: var(--light-blue);
	content: '';
	height: 1em;
	inset: .4375em auto auto 0;
	mask: no-repeat center / contain;
	position: absolute;
}

body>footer .fatFooter .contact a::before { mask-image: url('/images/icons/sales.svg'); }
body>footer .fatFooter .support a::before { mask-image: url('/images/icons/question.svg'); }
body>footer .fatFooter .careers a::before { mask-image: url('/images/icons/careers.svg'); }
body>footer .fatFooter .login a::before { mask-image: url('/images/icons/login.svg'); }
body>footer .fatFooter a.phone::before { mask-image: url('/images/icons/telephone.svg'); }
body>footer .fatFooter address::before { mask-image: url('/images/icons/marker.svg'); }

body>footer .social a {
	aspect-ratio: 1;
	display: flex;
	justify-content: center;
	margin: 0 !important;
	padding: 0;
	position: relative;
	width: 1.25em;
}

body>footer .social a::after {
	display: none;
}

body>footer ul.social {
	display: flex;
	gap: 1em;
	margin-block: 0 1.625em;
}

body>footer ul.social li {
	margin: 0 .5em 0 0;
}

body>footer address {
	color: #FFF;
	margin: .125em 0 1.5em;
	padding-left: 1.3125em;
	position: relative;
}

body>footer .column li.on a::after {
	background: var(--blue);
	opacity: 1;
}

body>footer label {
	color: var(--blue);
	display: block;
	margin: 0 0 .125em;
}

body>footer form {
	margin: 0 0 1em;
	max-width: 13.4375em;
	position: relative;
	width: 100%;
}

body>footer button::before,
body>footer button::after {
	display: none;
}

body>footer #search button {
	aspect-ratio: 1;
	background: var(--green) url('/images/icons/search-white.svg') no-repeat calc(50% + .0625em) 50% / auto 55%;
	border: 0;
	box-shadow: none;
	height: 1.625rem;
	inset: 50% .125rem auto auto;
	padding: 0;
	position: absolute;
	transform: translateY(-50%);
}

body>footer #email-signup a>strong {
	margin: 0 0 .75em;
	max-width: 15em;
	transition: none;
}

body>footer input:is([type='search'], [type='email']) {
	background: #FFF;
	border-radius: 2em;
	height: 1.875rem;
	font-size: 1em;
	padding-block: .125em;
	width: 100%;
}

body>footer ::-webkit-input-placeholder {
  	color: #666;
  	font-size: 1rem;
	font-style: italic;
	opacity: 1;
}
body>footer ::-moz-placeholder {
  	color: #666;
  	font-size: 1rem;
	font-style: italic;
	opacity: 1;
}
body>footer :-ms-input-placeholder {
  	color: #666;
  	font-size: 1rem;
	font-style: italic;
	opacity: 1;
}
body>footer :-moz-placeholder {
  	color: #666;
  	font-size: 1rem;
	font-style: italic;
	opacity: 1;
}

body>footer #seoFooter:empty {
	display: none;
}

body>footer .footer-bottom {
	color: #fff;
	padding-top: 2.5em;
}

body>footer .footer-bottom ul {
	margin: 0;
}

body>footer .footer-bottom a {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: from-font;
	text-underline-offset: 0.125em;
}

body>footer .footer-bottom a.on {
	color: #fff;
	text-decoration-color: currentColor;
}

body>footer .footer-bottom nav>ul>li {
	display: inline-block;
}

body>footer .footer-bottom nav>ul>li:not(:last-child)::after {
	content: '|';
	margin-inline: .3125em;
}

body>footer .footer-bottom #seoFooter {
	color: #718BA2;
	font-size: 0.875em;
}

body>footer .footer-bottom #seoFooter a {
	color: currentColor;
}






/* COOKIEBOT PLUGIN OVERRIDES ------------------------------ */

#CybotCookiebotDialog {
	border-radius: 0 !important;
	box-shadow: 0 0 0 1000em rgba(0,0,0,0.5) !important;
}

#CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept, 
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonAccept, 
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize, 
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
#CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton,
#CookiebotWidget #CookiebotWidget-widgetContent #CookiebotWidget-buttons #CookiebotWidget-btn-change {
	background: var(--ws-green-AA) !important;
	border-color: var(--ws-green-AA) !important;
	border-width: 1px !important;
	color:#fff !important;
	opacity: 1 !important;
}

#CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton:is(:hover, :focus-visible),
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept:is(:hover, :focus-visible), 
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonAccept:is(:hover, :focus-visible), 
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll:is(:hover, :focus-visible),
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize:is(:hover, :focus-visible), 
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection:is(:hover, :focus-visible),
#CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton:is(:hover, :focus-visible),
#CookiebotWidget #CookiebotWidget-widgetContent #CookiebotWidget-buttons #CookiebotWidget-btn-change:is(:hover, :focus-visible) {
	background: var(--ws-blue-2) !important;
	border-color: var(--ws-blue-2) !important;
	color:#fff !important;
	opacity: 1 !important;
}

#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonIABContainerToggleHide, 
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonIABContainerToggleShow, 
#CybotCookiebotDialog a::after, 
#CybotCookiebotDialog a::before, 
#CybotCookiebotDialog button::after, 
#CybotCookiebotDialog button::before {
	display: none !important;
}

#CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton:is(:hover, :focus-visible) {
	background-color: var(--ws-blue-2) !important;
  	color: #fff !important;
}

#CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
	background: var(--ws-green-AA) !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyContentText a, 
#CybotCookiebotDialog #CybotCookiebotDialogDetailFooter a, 
#CybotCookiebotDialog #CybotCookiebotDialogDetailBulkConsentList dt a, 
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonIABDescription a, 
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieLink, 
#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonIABHeaderViewPartnersLink, 
#CybotCookiebotDialogDetailBodyContentTextAbout a,
#CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails a,
#CybotCookiebotDialogBodyLevelButtonsSelectPane label:not([for="CybotCookiebotDialogBodyLevelButtonNecessary"]) .CybotCookiebotDialogBodyLevelButtonDescription:hover,
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink:hover,
#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentCookieContainerButton:hover, 
#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentIABv2Tab:hover, 
#CybotCookiebotDialogDetailBodyContentCookieContainerTypes .CybotCookiebotDialogDetailBodyContentCookieProvider:not(.CybotCookiebotDialogDetailBodyContentCookieInfoCount):hover,
#CookiebotWidget #CookiebotWidget-widgetContent .CookiebotWidget-consent-details button {
	color: var(--ws-green-AA) !important;
}

#CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails a::after {
	border-color: currentColor !important;
}

#CybotCookiebotDialog a:hover::after, 
#CybotCookiebotDialog a:hover::before, 
#CybotCookiebotDialog button:hover::after, 
#CybotCookiebotDialog button:hover::before {
	border-color: #372008 !important;
}

#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
	border-color: var(--ws-green-AA) !important;
	color: var(--ws-green-AA) !important;
}

/* consent box */
#CookiebotWidget .CookiebotWidget-body .CookiebotWidget-consents-list li.CookiebotWidget-approved svg {
	fill: var(--ws-green-AA) !important;
}

#CookiebotWidget .CookiebotWidget-consent-details button {
	border: 0 !important;
}

#CookiebotWidget #CookiebotWidget-widgetContent #CookiebotWidget-buttons #CookiebotWidget-btn-withdraw {
	border-color: var(--ws-green-AA) !important;
}

#CookiebotWidget #CookiebotWidget-widgetContent #CookiebotWidget-buttons #CookiebotWidget-btn-withdraw:is(:hover, :focus-visible) {
	border-color: var(--ws-blue-2) !important;
}

#CookiebotWidget .CookiebotWidget-header .CookiebotWidget-close:before,
#CookiebotWidget .CookiebotWidget-header .CookiebotWidget-close:after,
#CookiebotWidget:not(.CookiebotWidget-open) .CookiebotWidget-logo:before,
#CookiebotWidget:not(.CookiebotWidget-open) .CookiebotWidget-logo:after,
#CookiebotWidget .CookiebotWidget-consent-details button:before,
#CookiebotWidget .CookiebotWidget-consent-details button:after,
#CookiebotWidget #CookiebotWidget-buttons button:before,
#CookiebotWidget #CookiebotWidget-buttons button:after {
	display: none !important;
}




/* ANIMATIONS ------------------------------ */

@media screen and (prefers-reduced-motion: no-preference) {

	@keyframes bounce {
		0% { transform: scale(1);	}
		50% {	transform: scale(1.05); }
		100% { transform: scale(1);	}
	}
	
	@keyframes nav-bounce {
		0% { transform: scale(1) translateY(-50%);	}
		50% {	transform: scale(1.05) translateY(-50%); }
		100% { transform: scale(1) translateY(-50%);	}
	}	

}