@charset "UTF-8";

:root {
	--ws-blue: #4698CB;
	--ws-blue-AA: #307CAB;
	--ws-blue-rgb: 70,152,203;
	--ws-blue-2: #005C96;
	--ws-blue-2-rgb: 0,92,150;

	--ws-dk-blue-3: #153C63;
	--ws-dk-blue: #173B63;
	--ws-dk-blue-rgb: 23,59,99;
	--ws-dk-blue-5: #24394D;

	--ws-lt-blue: #F3FAFE;
	--ws-lt-blue-2: #BFD4E9;
	--ws-lt-blue-3: #9CABB5;
	--ws-lt-blue-4: #83A7C5;
	--ws-lt-blue-5: #D9E7EF;

	--ws-gold: #D19000;
	--ws-gold-rgb: 209,144,0;

	--ws-green: #66BC29;
	--ws-green-rgb: 102,188,41;
	--ws-green-2: #5BA725;
	--ws-green-2-rgb: 91,167,37;
	--ws-green-AA: #338808;
	--ws-green-AA-rgb: 51,136,8;
	--ws-dk-green: #2D7808; /* AA on #E8E8E8 (/work/ and /blog/ filters) */

	--ws-red: #C5003E;
	--ws-red-rgb: 197,0,62;

	--ws-navy: #004B87;
	--ws-navy-rgb: 0,75,135;

	--ws-midnight: #072039;
	--ws-midnight-rgb: 7,32,57;

	--ws-gray: #333333;
	--ws-lt-gray: #757575;

	--ws-light: #E8E8E8;
	--ws-light-rgb: 232,232,232;
	--ws-light-2: #F2F6FB;


	--ws-grid-inner: [wrap-start] repeat(12, minmax(0, 1fr)) [wrap-end];
	--ws-grid-gap: 1rem;
	--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);
	--ws-radial-gradient-1: radial-gradient(circle at 91% 21%, rgba(var(--ws-navy-rgb), .8) 0%, var(--ws-navy) 100%);
	--ws-radial-gradient-2: radial-gradient(circle at left bottom, #A1C5DB 0%, var(--ws-blue) 100%);
	--ws-header-space: calc(1em + 1.3125em + 1.3125em);
}



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

@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: 200 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 {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

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

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

figure {
	margin: 0;
}

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;
	vertical-align: middle;
	text-align: left
}

body {
	background: #FFF;
	overflow-x: hidden;
}

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

#skipNavigation:focus,#skipNavigation:active {
	top: 0;
}

iframe[src="/management/login/persistSession.aspx"] {
	display: none
}

/*page widths*/
.wrap {
	margin-inline: auto;
	max-width: clamp(75em, -2em + 88vw, 108em);
	padding-inline: var(--ws-gutter);
	position: relative;
	width: 100%;
}

.wrap.full {
	max-width: 100%;
	padding-inline: 0;
}

body>header>aside {
	position: absolute;
}



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

/* Switzer Light */
.home #hero div.title, .block-testimonial>*, #careers-4 li>div>span, #tour h2>span, #exposure-popup em, #blog.t3 .textbox h2,
:is(h1, h2, h3):has(:is(b, span)), #mainnav a, blockquote footer, .portfolio-landing figcaption, body>footer a, #sidenav>ul>li>a,
.case-study blockquote :is(cite,footer) {
	font-family: 'Switzer', 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-style: italic;
	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, #hero .textbox 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, .home #hero div.title>b, .engagement li strong  {
	font-family: 'lexia', serif;
	font-style: normal;
	font-weight: 800;
}





/* TYPOGRAPHY ----------------------------- */

h1 {font-size: clamp(1.75em, 1.077em + 3.36vw, 3.6em); }
h2, .highlight h1 { font-size: clamp(1.5em, 1.227em + 1.36vw, 2.25em); }
h3 { font-size: clamp(1.3125em, 1.199em + 0.57vw, 1.625em); }
h4, .interior h1 { 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); }

blockquote p {
	font-size: 1.1875em;
}

.content p {
	font-size: clamp(1.125em, 1.08em + 0.23vw, 1.25em);
}

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

.content p .button {
	font-size: 1em;
}


h1 {
	color: var(--ws-midnight);
}

h2, h3, h4, h5, h6 {
	color: var(--ws-midnight);
}

a {
	color: var(--ws-blue-AA);
	text-decoration: none
}

.content :is(p, li) a:not(.button):focus-visible,
.content :is(p, li) a:not(.button):focus-visible * {
	color: var(--ws-green-AA);
}

.content :is(p, li) a:not(.button) {
  text-decoration: underline;
	text-decoration-thickness: .0625em;
  text-underline-offset: .125em;
}

a * {
	color: inherit;
	text-decoration: inherit;
}

p {
	text-wrap: pretty;
}

p,h1,h2,h3,h4,h5, h6, hr,.content ul,.contentEditor ul,blockquote,dd,ol, figure {
	margin-block: 0 1em
}
h1,h2,h3,h4,h5, h6 {
	margin-bottom: .5em
}

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

.single h1 {
	margin: 0;
}

:is(h1, h2, h3, h4, h5, h6) a {
	display: block;
}

:is(p, ul, ol, h1, h2, h3, h4, h5, h6, blockquote) + :is(h2, h3, h4, h5, h6) {
	margin-top: 1.25rem;
}

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

u {
	text-decoration: none;
}

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

figure + hr {
	margin-top: 2.5em
}

.intro, .blogCredits + p, .blogCredits + figure + p {
	line-height: 1.33;
}

.intro p {
	font-size: 1em;
}

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

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

.red, .wsManagementHidden {
	color: var(--ws-red);
}

.dk-blue {
	color: var(--ws-dk-blue);
}

.green-AA {
	color: var(--ws-green-AA);
}

.lt-blue {
	color: var(--ws-blue);
}

blockquote {
	margin: 2em 0;
}

blockquote, blockquote p {
	color: var(--ws-blue);
}

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

.anchor-link {
	position: relative;
}

.mb {
	margin-bottom: .5em;
}

.d-block {
	display: block;
}

.gray-bg {
	background-image: linear-gradient(180deg, #FFF 0%, var(--ws-light) 100%);
}




/* GRID ------------------------------ */
.ws-grid {
	display: grid;
	grid-auto-flow: dense;
	grid-gap: var(--ws-grid-gap);
	grid-template-columns: var(--ws-grid-14);
}

.ws-grid > * {
	grid-column: wrap-start / wrap-end;
}



/* FLEXBOX COLUMNS ------------------------------ */
.ws-flex {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws-gap);
}

.ws-flex>:is(article,div,li) {
	width: calc( 99.9% / var(--ws-column-count) - ( var(--ws-gap) * ( var(--ws-column-count) - 1 ) / var(--ws-column-count) ) );
}




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

#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 ------------------------------ */

.gray-bg {
	background: #F9F9F9;
}


.interior main>:is(div, article) {
	background: #FFF;
	position: relative;
	z-index: 4;
}

.interior main.cms>:is(div, article) {
	background: transparent;
	z-index: 0;
}

body[class*='management-'] .pageHeader {
	z-index: 1;
}

main, .mceContentBody {
	background: #FFF;
	position: relative;
	z-index: 0;
}

#content > section:not(.circle-section) {
	clear: both;
}

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

/* content */
.content {
	word-wrap: break-word;
}

.content .photoright, .content .photoleft {
	max-width: 50%;
	height: auto;
}

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

.content img.phototreatment {
	max-width: 50%;
	height: auto;
}

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

.content figure.phototreatment img {
	max-width: 100%;
	width: auto;
	height: auto;
}

img.phototreatment,img.photoright,img.photoleft,.photoright img,.photoleft img {
	max-width: 100%;
	height: auto;
}

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

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

.muted {
	opacity: 0.5;
	filter: alpha(opacity=50)
}

.highlight > div , .content .highlight > div {
	background: #F2F2F2;
	border-radius: .5em;
	padding: 1.5em 1.5em 1.5em;
	margin: 1em 0
}
.highlight :first-child{
	margin-top: 0;
}

.highlight h2{
	margin-top: 1.5em;
	font-size: 1.25em;
}

.highlight h3 {
	color: var(--ws-midnight);
	font-size: 1.125em;
}

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

.content table {
	width: 100%
}

.shareIcons {
	display: inline-block;
	position: relative;
	overflow: auto
}

.shareIcons a {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: .2em;
	box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, .2);
	display: block;
	float: left;
	margin: 0 .5em 1em 0;
	height: 20px;
	width: 20px;
}

.shareIcons a:hover {
	background-color: #F03C5E
}

.shareFacebook {
	background-color: #3b5998;
	background-image: url('/images/icons/64x64/facebook.png')
}

.shareTwitter {
	background-color: #00aced;
	background-image: url('/images/icons/64x64/twitter.png')
}

.shareLinkedin {
	background-color: #007bb6;
	background-image: url('/images/icons/64x64/linkedin.png')
}

.shareGoogle {
	background-color: #dd4b39;
	background-image: url('/images/icons/64x64/google-plus.png')
}

#tinymce ul li {
	list-style: disc;
	list-style-position: inside;
	padding-left: 1em;
}

nav ul {
	margin: 0
}

/* addon classes */
.clearFloats {
	clear: both
}

.nobr {
	white-space: nowrap
}

.twoCol, .threeCol, .resCol {
	column-rule: 1px outset rgba(0,0,0,.15);
	column-gap: 2em;
}

.req {
	color: #c00;
}

#contact .req {
	color: var(--ws-lt-blue-2);
}

.textIcon {
	background: #999;
	background-color: rgba(0,0,0,.2);
	font-size: .8em;
	line-height: 1em;
	display: inline-block;
	padding: .2em .4em;
	border-radius: .5em;
	color: #FFF;
}

.textIcon:hover {
	background: #666;
	background-color: rgba(0,0,0,.4);
	color: #FFF;
}

.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

.videoContainer {
	width: 100%;
	height: 0;
	line-height: 0;
	position: relative;
	padding-top: 56.25%;
}

.videoContainer.ratio-4-3 {
	padding-top: 75%;
}

.videoContainer iframe {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

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



/* BUTTONS AND FORMS ---------------------------- */
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: 0;
	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;
}

textarea {
	display: block;
	resize: vertical;
}

select option {
	padding: 0 .2em
}

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

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


:is(button, .button, input[type="button"], input[type="submit"], input[type="reset"]) {
	background: transparent;
	border: 0;
	border-radius: 3em;
	color: var(--ws-midnight);
	cursor: pointer;
	font-size: clamp(1.125em, 1.08em + 0.23vw, 1.25em);
	padding: 0.6em 2.25em .65em 1.5em;
	position: relative;
	text-decoration: none;
	line-height: 1.1;
	z-index: 0;
}

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

:is(button, .button, input[type="button"], input[type="submit"], input[type="reset"]).dark:before{
	border-color: rgba(255,255,255,.25);
}

:is(button, .button, input[type="button"], input[type="submit"], input[type="reset"])::before {
	border: var(--ws-lt-blue-2) 2px solid;
}

:is(#hero, #cta) :is(button, .button, input[type="button"], input[type="submit"], input[type="reset"])::before {
	border-color: rgba(255,255,255,.2);
}

:is(button, .button, input[type="button"], input[type="submit"], input[type="reset"]):is(.white, .big)::before {
	background-color: #FFF;
}

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

:is(button, .button)::before {
	background: transparent;
	border-radius: 3em;
	content: '';
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

:is(button, .button, input[type="button"], input[type="submit"], input[type="reset"])::after {
	background: var(--ws-midnight);
	content: '';
	height: 1em;
	mask: url('/images/icons/caret-right-white.svg') no-repeat 50% 50% / .5em auto;
	position: absolute;
	right: 1.125em;
	top: 50%;
	transform: translateY(-50%);
	width: 1em;
}

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

:is(button, .button).shadow {
	box-shadow: 0 .125em 1em 0 rgba(0,0,0,.15);
}


/* Red buttons */
:is(button, .button).red {
	color: #FFF;
}

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

:is(button, .button).red::after,
:is(button, .button).blue::after {
	background: #FFF;
}


/* Blue buttons */
:is(button, .button).blue {
	color: #FFF;
}

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

/* White buttons */
:is(button, .button).white:not(:hover,:focus-visible)::after {
	background: var(--ws-midnight);
}


/* ----- */

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

.button {
	display: inline-block;
}

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

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

.formTable, .formTable table {
	width: 100%;
}

.formTable input[type="text"], .formTable input[type="password"], .formTable input[type="tel"], .formTable input[type="number"], .formTable input[type="email"], .formTable input[type="url"], .formTable input[type="search"], .formTable textarea {
	width: 100%;
}

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

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

.formTable.right td {
	width: auto
}

.subjClass {
	display: none !important;
}

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

#Captcha label {
	padding-left: 0;
}

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

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

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




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

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

.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 a {
	color: var(--ws-midnight);
	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;
}

.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 {
	pointer-events: none;
}

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

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

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




/* PAGEHEADER ------------------------------ */

.pageHeader {
	background: #FFF;
	overflow: hidden;
	position: relative;
	width: 100%;
	z-index: 0;
}

.pageHeader::before {
	background-image: linear-gradient(180deg, rgba(255,255,255,1) 0%, #CCDBE7 100%);
	bottom: 0;
	content: '';
	height: 400%;
	left: 0;
	opacity: .23;
	position: absolute;
	width: 100%;
}





/* ALERT ------------------------------ */
#alertApp {
	background: #990000;
	cursor: pointer;
	position: relative;
	width: 100%;
	padding: .5rem 2.5rem;
	z-index: 1;
}

#alertApp:hover {
	background: #660000;
}

#alertApp.alertStatic {
	cursor: default;
}

#alertApp h1 {
	color: #FFF;
	font-size: .9375rem;
	line-height: 1.25rem;
	margin: 0 auto;
	padding: .1875rem .3125rem;
	text-align: center;
}

#alertApp:hover h1,#alertApp.expand h1 {
	color: #FFF;
}

#alertApp #alertDesc {
	height: 0;
	overflow: hidden;
}

#alertApp p {
	color: #FFF;
	font-size: .9375rem;
	line-height: 1.5;
	margin: 0;
	padding: .5rem 0 .75rem;
	position: relative;
	text-align: center;
	z-index: 1;
}




/* POPOVER ------------------------------ */
#popover {
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 1em;
	background: rgba(0,0,0,0.9);
	display: flex;
	justify-content: center;
	align-items: center;
}

#popover .container {
	max-width: 40em;
	position: relative;
}

#popover .container .close {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: -1.5em;
	width: 1.5em;
	height: 1.5em;
	font-size: 2.25em;
	line-height: 1.5em;
	text-align: right;
	color: #FFF;
}

#popover .container .close:hover {
	opacity: 0.5;
}

#popover .container .popover-wrap {
	padding: 2em;
	text-align: left;
	background: #FFF;
	border-radius: 4px;
	max-width: 40em;
}

#popover .container .popover-wrap .popover-content {
	max-height: 75vh;
	overflow: auto;
}

#popover .container .popover-wrap :is(h1, h2, h3, h4) {
	margin: 0 auto 0.75rem;
}

#popover .container .popover-wrap img {
	max-width: 100%;
	height: auto;
	margin: 0 auto 1rem;
}




/* MANAGEMENT ------------------------------ */
#wysiwygBody {
	background: #FFF;
}

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

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

.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 {
	position: relative;
	bottom: -2px;
}

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

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

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

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

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

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

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

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

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

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

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

.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 {
	position: relative;
	bottom: -2px;
}

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

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

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

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

.sortRow th {
	cursor: pointer;
}

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

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

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





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

body>footer {
	background: var(--ws-midnight);
	border-top: .25rem solid #FFF;
	position: relative;
}

body>footer a {
	color: #FFF;
}

body>footer .fatFooter {
	padding-block: 3em;
	position: relative;
}

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

body>footer .fatFooter>div:nth-child(1)>ul {
	columns: 2;
	column-gap: 2em;
	text-align: left;
}

body>footer .column>strong {
	color: var(--ws-dk-blue);
}

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(--ws-green-AA);
	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(--ws-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(--ws-dk-blue);
	opacity: 1;
}

body>footer label {
	color: var(--ws-blue-2);
	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 ::placeholder {
	color: #CCC;
	font-size: 1rem;
	font-style: italic;
}

body>footer #search button {
	aspect-ratio: 1;
	background: var(--ws-dk-green) url('/images/icons/search-white.svg') no-repeat calc(50% + .0625em) 50% / auto 55%;
	border: 0;
	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 #seoFooter:empty {
	display: none;
}

body>footer .footer-bottom {
	background: #FFF;
	padding-block: .8125em;
}

body>footer :is(.footer-bottom, .footer-bottom a) {
	color: #666;
}

body>footer .footer-bottom a {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 2px;
}

body>footer .footer-bottom a.on {
	color: var(--ws-dk-blue);
	text-decoration-color: var(--ws-green);
}

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




/* hirEDCT ---------------------------------- */
.hiredct-title {
	color: var(--ws-green);
	font-family: 'Switzer', sans-serif;
	font-weight: 200;
}
.hiredct-form {
	background-image: var(--ws-radial-gradient-1);
	border-radius: 10px;
	padding: 1.5625rem 3.125rem;
}
.hiredct-form label{
	color: #FFF;
	font-style: italic;
}
.hiredct-form .red-quired {
	color: #FF0000;
}
.hiredct-form p {
	color: #FFF;
	margin-bottom: 0.5rem;
}
.hiredct-form .required-key {
	font-size: 1rem;
	font-style: italic;
}
.hiredct-form input, .hiredct-form textarea {
	background-color: var(--ws-lt-blue-2);
	margin-bottom: 0.4375rem;
}
.hiredct-form button {
	position: absolute;
	margin-top: 0.375rem;
}
.form-bottom {
	font-style: italic;
	font-size: 1rem;
	margin: 2.9375rem 0 0 3.1875rem;
	color: #666666;
}

:is(button, .button).hiredct-button {
	color: #FFF;
}

:is(button, .button).hiredct-button::before {
	background: var(--ws-red);
}

:is(button, .button).hiredct-button::after {
	mask-image: url('/images/icons/caret-right-white.svg');
}




/* TRANSITIONS ------------------------------ */
a, a *, a::before, a::after, button, .button, :is(button, .button)::before, :is(button, .button)::after,
input[type="button"], input[type="submit"], .rsFullscreenBtn, #alertApp, #alertApp span, #alertDesc,
#navContainer li, #navContainer li>span, #mobile-filters .filters, #careers-4 li span, #careers-4 li>div::after,
#quotes .fader ul>li, #popover .container .close, body.transparent-header>header::after {
	transition: all .3s ease
}

#timeline li::before, #timeline li :is(a>img, img), #timeline .images img.show {
	transition: all .75s ease;
}

input:focus, select:focus, textarea:focus {
	transition: background-color .3s ease;
}

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




/* FORM ERROR ------------------------------ */
.form-error {
	color: var(--ws-red);
	font-size: 0.9375em;
	margin-bottom: 0.25rem;
}

.reverse .form-error {
	background: var(--ws-red);
	color: #FFF;
}

fieldset label:first-of-type input:focus {
	outline: 1px solid var(--ws-red);
}

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

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

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

#ContactForm .form-error {
	border: 2px solid var(--ws-lt-blue-3);
	border-radius: .25rem .25rem 0 0;
	margin-bottom: 0;
	font-size: .8em;
	font-style: italic;
	padding: .3125em .75em;
}

.customer-support #ContactForm .form-error {
	background: var(--ws-green-AA);
	border-color: var(--ws-green-AA);
	color: #FFF;
}


#ContactForm .form-error+:is(input, textarea) {
	border-radius: 0 0 .25rem .25rem;
}

#team h3>em{
	font-weight: 400;
}


/* KEYFRAME ANIMATIONS ------------------------------ */
@keyframes bounce {
	0% { transform: scale(1);	}
	50% {	transform: scale(1.05); }
	100% { transform: scale(1);	}
}

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

@keyframes rise {
	100% { transform: translateY(-1.5em); 	}
}

@keyframes sink {
	0% { transform: translateY(-1.5em); }

	100% { transform: translateY(0); }
}

@keyframes float {
	0% { transform: translateY(-1.5em);	}
	100% { transform: translateY(-1em); }
}




/* PLAY / PAUSE BUTTONS ------------------------------ */

button.play-pause {
	background: var(--ws-red) url('/images/icons/control-pause.svg') no-repeat center / contain;
	border-radius: 50%;
	padding: 0;
	position: absolute;
	z-index: 2;
}

button.play-pause:is(:hover,:focus) {
	opacity: 1;
}

button.play-pause:is(.on, .paused) {
	background: var(--ws-blue) url('/images/icons/control-play.svg') no-repeat center / contain;
}

button.play-pause:before,
button.play-pause:after {
	display: none;
}

#hero button.play-pause {
	aspect-ratio: 1;
	background-color: transparent;
	inset: auto auto 1rem 1rem;
	opacity: .25;
	width: 2rem;
}

#tour button.play-pause {
	aspect-ratio: 1;
	background-color: transparent !important;
	grid-column: 1 / 5;
	inset: auto .5rem .5rem auto;
	opacity: .5;
	width: 2rem;
}

.video-circle button.play-pause {
	aspect-ratio: 1;
	background-size: 80% !important;
	height: 20%;
	inset: 4% auto auto 1%;
	opacity: .9;
	transition: all .3s ease, background-position 0s;
}

.video-circle button.play-pause.on {
	background-color: var(--ws-blue);
	background-position: calc(60%) 50% !important;
}




/* HERO ------------------------------ */

#hero {
	box-shadow: inset 0 -2px 1px #FFF;
	position: relative;
	width: 100%;
	z-index: 1;
}

#hero video {
	background: no-repeat center / cover;
}

#hero .video-anchor-link {
	position: absolute;
	padding: 0;
	width: 2rem;
	height: 2rem;
	z-index: 2;
	bottom: 1rem;
	right: 1rem;
	background: url('/images/icons/control-down.svg') no-repeat center / contain;
	opacity: .25;
}

#hero .video-anchor-link:is(:hover,:focus) {
	opacity: 1;
}



/* homepage only */
#hero.home {
	background: #072039
}
#hero.home video {
	background: #B9B8B3;
	opacity: .2;
}

#hero.home .textbox {
	text-align: center;
}

#hero.home .textbox span.title {
	margin: 0 0 .375em;
	text-wrap: pretty;
}

#hero.home .textbox :is(span, p).text {
	line-height: 1.143;
	margin: 0 auto;
	text-shadow: 0 0 .75em rgba(0, 0, 0, 0.5);
}

#hero.home .video::before {
	background: #072039;
	mix-blend-mode: color;
	content: '';
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}
#hero.home .video::after {
	background: rgba(0,0,0,1);
	content: '';
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}



/* home, /web-design/ and /web-development/ pages */

#hero:not(.home) video {
	background-image: url('/images/home/placeholder-desktop-lp.webp');
}

#hero::before {
	background: linear-gradient(180deg, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.738) 19%, hsla(0, 0%, 0%, 0.541) 34%, hsla(0, 0%, 0%, 0.382) 47%, hsla(0, 0%, 0%, 0.278) 56.5%, hsla(0, 0%, 0%, 0.194) 65%, hsla(0, 0%, 0%, 0.126) 73%, hsla(0, 0%, 0%, 0.075) 80.2%, hsla(0, 0%, 0%, 0.042) 86.1%, hsla(0, 0%, 0%, 0.021) 91%, hsla(0, 0%, 0%, 0.008) 95.2%, hsla(0, 0%, 0%, 0.002) 98.2%,	hsla(0, 0%, 0%, 0) 100%);
	content: '';
	height: 10em;
	inset: 0 0 auto 0;
	opacity: .75;
	pointer-events: none;
	position: absolute;
	z-index: 2;
}

#hero .video {
	grid-column: 1 / -1;
	inset: 0;
	position: absolute;
	z-index: 0;
}

#hero video {
	height: 100%;
	inset: 0 auto auto 0;
	line-height: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

#hero .textbox {
	align-self: center;
	grid-row: 1 / -1;
}

#hero .textbox {
	position: relative;
	z-index: 2;
}

#hero .textbox :is(h1, span.title) {
	text-shadow: 0 0 .5em rgba(0, 0, 0, 0.5);
	color: #FFF;
	display: block;
	font-weight: 650;
	line-height: 1;
	margin: 0 0 .75em;
	position: relative;
	text-wrap: balance;
	z-index: 4;
}

#hero .textbox :is(p, span.text) {
	color: #FFF;
	margin: 0 0 1.5em;
}

#hero :is(button.play-pause, .video-anchor-link) {
	grid-column: 1 / -1;
}



/* Scroll to next section button (home & /services/) */
.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::before {
	border: 0;
}


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




/* INTERIOR HERO ------------------------------ /
* - T2 service pages, About, Careers, Timeline
*/

.interior-hero {
	background: var(--ws-midnight);
	text-align: center;
}

.interior-hero img {
	aspect-ratio: 1;
	width: 3em;
}

.interior-hero span.icon {
	aspect-ratio: 1;
	background: var(--ws-blue);
	display: block;
	margin: 0 auto .5em;
	mask: no-repeat center / contain;
	width: 3em;
}

.interior-hero.expertise h1 {
	color: var(--ws-blue);
	display: table;
	margin: 0 auto .5em;
	padding-inline: 1.3125em;
	position: relative;
}

.interior-hero.expertise h1::before {
	aspect-ratio: 1;
	background: var(--ws-blue);
	content: '';
	display: inline-block;
	height: 1.1em;
	inset: .2em auto auto 0;
	margin-right: .25em;
	mask: no-repeat center / contain;
	position: relative;
	top: .2em;
}

.interior-hero.expertise h1::after {
	aspect-ratio: 24 / 4;
	background: url('/images/icons/blue-dots.svg') no-repeat center / contain;
	content: '';
	display: block;
	margin: .5em auto 0;
	opacity: .65;
	width: 1.5rem;
}

.interior-hero h1.white {
	color: #FFF;
	font-size: clamp(1.75em, 1.477em + 1.36vw, 2.5em);
}

.interior-hero h2 {
	color: #FFF;
	font-size: clamp(1.5em, 0.955em + 2.73vw, 3em);
	margin-top: 0;
}

.interior-hero p {
	color: #FFF;
	font-size: clamp(1.125em, 1.034em + 0.45vw, 1.375em);
	margin: 0 auto 2em;
	max-width: 56.6875rem;
}

.interior-hero ul.anchor-links li>a {
	background-position: right 1.5em center;
	font-size: clamp(0.85em, 0.705em + 0.73vw, 1.25em);
	padding: .25em 2.125em .25em 1.5em;
	position: relative;
	text-decoration: none;
	z-index: 0;
}

.interior-hero ul.anchor-links li>a>span {
	color: inherit !important;
}

.interior-hero .textbox p:last-child {
	margin-bottom: 0;
}

.interior-hero .textbox + ul {
	margin-top: 2em;
}

.interior-hero ul#careers .button::before {
	border-color: rgba(255,255,255,.2);
}





/* SERVICE LIST ------------------------------ /
* - Homepage, Service page ribbon 1
*/

.service-list {
	padding: clamp(3em, 1.182em + 9.09vw, 8em) 1.5em;
	position: relative;
}

.service-list .textbox {
	grid-column: 1 / -1;
	margin-inline: auto;
	max-width: 68em;
	text-align: center;
}

.service-page .service-list .textbox {
	margin-inline: auto;
	max-width: 45em;
}

.service-list .textbox h1 {
	font-size: clamp(1.5em, 1.136em + 1.82vw, 2.5em);
	margin: 0 0 .5rem;
	text-wrap: pretty;
}

.service-list h2 {
	text-wrap: pretty;
}

.service-list .column>div {
	margin: 0 auto;
	max-width: 70.875em;
}

.service-list .column h2 {
	font-size: 1.5em;
}

.service-list .column-1 ul {
	margin: 0;
}

.service-list li {
	margin: 0 0 .125em;
}

.service-list li>a {
	color: #FFF;
	display: table;
	line-height: 1.1;
	padding: .3125em 1.375em .3125em 1.5em;
	position: relative;
	z-index: 0;
}

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

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

.service-list :is(button, .button).red::after {
	background: #FFF;
	mask-image: url('/images/icons/caret-down-white.svg');
	right: 1.5em;
	top: 50%;
}

.service-list.dk-blue {
	background: var(--ws-midnight);
}

.service-list.dk-blue :is(h1, h2, p, li>a) {
	color: #FFF;
}





/* SERVICE ICONS ------------------------------ /
* - Homepage, Services, Services Megamenu, /web-design/, /web-development/
*/

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

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

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

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

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

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

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

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

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

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

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

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

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

.icon-list li.marketing::before,
li.expertise-content-development>a::before,
.expertise-content-development .interior-hero.expertise h1::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 .interior-hero.expertise h1::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 .interior-hero.expertise h1::before {
	mask-image: url('/images/icons/social.svg') !important;
}

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

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

.icon-list li.wordpress::before,
li.expertise-wordpress-development>a::before,
.expertise-wordpress-development .interior-hero.expertise h1::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 .interior-hero.expertise h1::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; }




/* MARKETING PLANS ------------------------------ /
* - Homepage ribbon 3
*/

.marketing-plans {
	padding-block: clamp(1.5em, 0.955em + 2.73vw, 3em) clamp(4em, 2.727em + 6.36vw, 7.5em);
}

.marketing-plans>div.plan {
	background: #FFF;
	border-radius: .5em;
	padding: 3em 1.5em 4em;
	position: relative;
	text-align: center;
}

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

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

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

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

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

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

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


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

.marketing-plans .button {
	font-size: 1em;
	inset: 100% auto auto 50%;
	padding: .6875em 2.625em .75em 1.625em;
	position: absolute;
	transform: translate(-50%,-50%);
	white-space: nowrap;
}

.marketing-plans .button::before {
	border: 0;
}




/* ENGAGEMENT ------------------------------ /
* - Homepage ribbon 4
*/

.engagement {
	background: var(--ws-green-2);
	border-top: .25em solid #FFF;
	padding-block: clamp(3em, 2.5em + 2.5vw, 4.375em) clamp(3em, 1.682em + 6.59vw, 6.625em);
	position: relative;
	text-align: center;
	z-index: 0;
}

.engagement>div {
	overflow: hidden;
	--ws-gap: 1rem;
}


.engagement .textbox {
	margin: 0 auto clamp(2em, 1.273em + 3.64vw, 4em);
	max-width: 51em;
}

.engagement h2 {
	color: #FFF;
	margin: 0 0 .5em;
	text-wrap: pretty;
}

.engagement p {
	color: #FFF;
	font-size: clamp(1.25em, 1.205em + 0.23vw, 1.375em);
}

.engagement ul.ws-flex {
	justify-content: center;
	position: relative;
}

.engagement li {
	display: flex;
	flex-direction: column;
	background: #FFF;
	border-radius: .5em;
	color: #666;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding-block: 1.375em .5em;
}

.engagement li>strong {
	color: var(--ws-midnight);
	display: block;
	line-height: 1;
	margin: 0 0 .1875em;
}

.engagement li>strong::before {
	aspect-ratio: 1;
	background: var(--ws-blue);
	content: '';
	display: block;
	margin: 0 auto 0;
	mask: no-repeat center / contain;
	height: .93em;
}

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

.engagement li>span {
	color: #666;
	display: block;
	line-height: 1.2;
	margin: 0 0 1em;
	text-wrap: balance;
}

.engagement .button.white {
	font-size: 1em;
	inset: auto auto 0 50%;
	margin: 1.875em 0 0;
	padding: .6875em 2.25em .75em 1.25em;
	position: absolute;
	transform: translate(-50%,50%);
	z-index: 1;
}

.engagement .button.white::before {
	background: var(--ws-light);
	border: 0;
}

.engagement em {
	margin-top: auto;
	opacity: .65;
}

.engagement abbr {
	text-decoration: none;
}



/* SERVICES ------------------------------ */

#services ul {
	display: contents;
}

#services img {
	height: 6em;
	margin: 0 0 1em;
	width: auto;
	aspect-ratio: 17 / 20;
}

#services h2 {
	color: var(--ws-blue-2)
}

#services ul ul>li>a {
	background: #FFF;
	mask: url('/images/icons/caret-right-white.svg') no-repeat right .75em center / .5em auto;
	color: var(--ws-gray);
	padding: .125em 2em .1875em 0;
	position: relative;
	z-index: 0;
}

#services ul ul>li>a::before {
	background: var(--ws-red);
	border-radius: 2em;
	content: '';
	height: 100%;
	left: -.75em;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}

body:not(.home) #services {
	clip-path: circle(500vw at 50% calc(100% - 500vw));
	background: #FFF;
}

#services.lp h2 {
	margin: 0 0 .25rem;
}

#services p {
	font-size: clamp(1.125em, 1.082em + 0.19vw, 1.25em); /* 360 - 1400 */
	line-height: 1.33;
}




/* HOMEPAGE > WORK (slider) ------------------------------ */
#work {
	display: flex;
	padding-block: 1em 2em;
	position: relative;
	z-index: 1;
}

#work.lp {
	padding-top: 0;
}

#work .slider {
	overflow-x: auto;
	padding-block: 1.75em 0; margin-bottom: 0.5em;
}

#work .slider::-webkit-scrollbar {
	display: none;
}

#work .slider {
	scrollbar-width: none;
}

#work ul {
	display: flex;
}

#work li {
	padding-inline: .125em;
}

#work li a {
	min-width: 18.75em;
}

#work li.thin a {
	min-width: 12.375em;
}

#work li a::after {
	content: '';
	display: block;
	padding: 0 0 100%;
}

#work li.thin a::after {
	padding: 0 0 151.9%;
}

#work li:nth-of-type(even) {
	position: relative;
	top: -1em;
}

#work li>a {
	display: block;
	position: relative;
	width: 100%;
}

#work img {
	height: 100%;
	object-fit: cover;
	position: absolute;
	width: auto;
}

#work .textbox {
	background: rgba(1,15,29,.86);
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: space-between;
	left: 0;
	opacity: 0;
	padding: 1.25em;
	position: absolute;
	top: 0;
	transition: opacity .5s ease;
	width: 100%;
}

#work .textbox::before {
	content: '';
	display: block;
	height: 2em;
}

#work .textbox h3 {
	color: #FFF;
	font-size: 1.375em;
	margin: 0;
	text-align: center;
}

#work .textbox p {
	color: rgba(255,255,255,.7);
	font-size: 1em;
	line-height: 1;
	margin: 0;
}




/* QUOTES RIBBON (Home, About Page) ------------------------------ */
#quotes {
	background: var(--ws-midnight);
	padding-block: clamp(3em, 1.909em + 5.45vw, 6em);
	position: relative;
}

#quotes.red {
	background: var(--ws-red);
	border-block: .5rem solid #FFF;
}

#quotes .fader {
	display: contents;
}

#quotes .fader .prev {
	opacity: 0;
}

#quotes blockquote {
	align-content: center;
	align-items: center;
	align-self: center;
	display: grid;
	grid-gap: var(--ws-grid-gap);
	margin: 0;
}

#quotes blockquote :is(p, cite) {
	color: #FFF;
}

#quotes blockquote p {
	font-size: clamp(1.25em, 0.977em + 1.36vw, 2em);
	line-height: 1.25;
	position: relative;
	quotes: '\201c' '\201d';
	z-index: 0;
}

#quotes blockquote cite {
	font-size: clamp(1.125em, 0.989em + 0.68vw, 1.5em);
	padding-left: 1em;
	position: relative;
}

#quotes blockquote cite::before {
	content: '\2014';
	left: 0;
	position: absolute;
}

#quotes blockquote p:first-of-type::before {
	color: rgba(255,255,255,.15);
	content: open-quote;
	font-size: 4.625em;
	margin: 0 0 0 -.375em;
	position: absolute;
	line-height: 1;
	top: -0.1875em;
}

#quotes.lp blockquote p:first-of-type::before {
	font-size: 10em;
	margin: 0 0 0 -.25em;
	top: -.35em;
}

#quotes blockquote p:last-of-type::after {
	color: #FFF;
	content: close-quote;
	margin: 0 0 0 .125em;
}


/* Homepage */
#quotes.home {
	background: var(--ws-light-2);
	border-top: .25em solid #FFF;
	padding-block: clamp(2.5em, 1.955em + 2.73vw, 4em);
}

#quotes.home blockquote :is(p, cite),
#quotes.home blockquote p:last-of-type::after {
	color: var(--ws-midnight);
}

#quotes.home blockquote p:first-of-type::before {
	color: #E5EDF5;
	font-size: 12em;
	left: .15em;
	top: -.375em;
	z-index: -1;
}


/* First block ----- */
#work a.more {
	align-items: flex-end;
	border-right: 4px solid #FFF;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 1.375em;
	position: relative;
	z-index: 0;
}

#work a.more::before {
	background: var(--ws-red);
	content: '';
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}

.home #work a.more {
	margin-top: 1em;
}

#work a {
	color: #fff;
}

#work :is(h2, h2>b, span) {
	color: inherit;
	text-align: right;
}

#work h2 {
	line-height: 1;
	max-width: 4em;
}

#work.web-dev h2 {
	max-width: 5.5em;
}

#work span, .t3 h2+span {
	background: url('/images/icons/caret-right-white.svg') no-repeat 95%  calc(50% + .0625em) / .55em auto;
	font-size: clamp(1em, 0.909em + 0.45vw, 1.25em);
	padding-right: 1.125em;
	color: #FFF !important;
}






/* PORTFOLIO GRID ------------------------------ */
body.portfolio-landing {
	background: #FFF;
}

#portfolio {
	background-color: var(--ws-light);
	position: relative;
	z-index: 0;
}

#portfolio .wrap {
	max-width: 100%;
	overflow: hidden;
	padding-inline: 1rem;
	position: static;
}

#portfolio .wrap li::before {
	background: #fff;
	content: '';
	display: block;
	height: 200vh;
	left: auto;
	mask: none;
	position: absolute;
	right: 100%;
	top: -2em;
	width: var(--ws-grid-gap);
	z-index: -1;
}

#portfolio .wrap li::after {
	background: #fff;
	content: '';
	display: block;
	height: var(--ws-grid-gap);
	left: 0;
	position: absolute;
	top: 100%;
	width: 100%;
	z-index: -1;
}

#portfolio .wrap::before {
	background: #fff;
	content: '';
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	width: var(--ws-grid-gap);
	height: 100%;
}

#portfolio .wrap::after {
	background: #fff;
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	height: var(--ws-grid-gap);
	width: 100%;
}

.portfolio-button {
	text-align: center;
	padding-bottom:5em
}

.portfolio-button button::after {
	background: var(--ws-midnight);
}

#portfolio .grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0;
	overflow: visible;
	z-index: 2;
	justify-content: space-between;
	top: 0;
	gap: 1em;
}

#portfolio .grid-item {
	line-height: 0;
	margin: 0 0 1rem;
	padding: 0;
	transition: none !important;
}

#masonryGrid .grid-item>a {
	display: block;
	position: relative;
	text-decoration: none;
}


#masonryGrid .grid-item>a::before {
	box-shadow: inset 0 0 3rem #000;
	content: '';
	height: 100%;
	left: 0;
	opacity: .07;
	position: absolute;
	top: 0;
	width: 100%;
}

#portfolio .grid-item img {
	height: auto;
	width: 100%;
}

#portfolio .stamp {
	background: var(--ws-green-AA);
	left: 0;
	padding: var(--ws-grid-gap);
	position: absolute;
	top: 0;
	z-index: 2;
}

#portfolio h1 {
	color: #FFF;
	font-size: clamp(1.5em, 1.318em + 0.91vw, 2em);
	margin-bottom: .25rem;
}

#portfolio .stamp p {
	color: #FFF;
	line-height: 1.25;
}

:is(#portfolio, .lp-work) .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;
	top: 0;
	transition: opacity .5s ease;
	width: 100%;
}

:is(#portfolio, .lp-work) .textbox::before {
	content: '';
	display: block;
}

#portfolio .textbox::before {
	height: 2em;
}

#portfolio .textbox h2 {
	color: #FFF;
	margin: 0;
	text-align: center;
}

:is(#portfolio, .lp-work) .textbox p {
	color: rgba(255,255,255,.7);
	line-height: 1;
	margin: 0;
	text-transform: lowercase;
}

#portfolio .row {
	margin: 4em auto 2em;
	text-align: center;
}


#new-items-link {
	text-align: center;
}

#new-items-link a {
	display: inline-block;
	margin-top: 0.75rem;
}






/* HOMEPAGE > BRANDS ------------------------------ */

#brands {
	row-gap: 4em;
}

#brands.digital-marketing {
	background: #FAFAFA;
	padding-block: clamp(3em, 2.654em + 1.54vw, 4em); /* 360 - 1400 */
}

#brands.work {
	background: #FFF;
	clip-path: circle(500vw at 50% calc(100% - 500vw));
}

#brands h2 {
	margin: 0 0 .25em;
	text-align: center;
}

#brands p {
	color: #666;
}

#brands ul {
	display: contents;
}

#brands li {
	align-items: center;
	display: grid;
	justify-content: center;
}

#brands li::before {
	display: none;
}




/* HOMEPAGE > PHOTO ------------------------------ */
#photo {
	background: radial-gradient(circle at top right, #F0F9FF 16%, #E2F1FB 100%);
	clip-path: circle(500vw at 50% calc(100% - 500vw));
	overflow: hidden;
	position: relative;
}

#photo .inner {
	bottom: .25em;
	clip-path: circle(500vw at 50% calc(100% - 500vw));
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

#photo .inner::after {
	background: url('/images/home/office.webp') no-repeat center bottom / cover;
	content: '';
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

#photo h2 {
	position: relative;
}

#photo.lp {
	clip-path: none;
}

#photo.lp .inner {
	bottom: 0;
	clip-path: none;
}

#photo.lp svg {
	z-index: 0;
}




/* EXPOSURE POPUP ------------------------------ */
#exposure-popup {
	backdrop-filter: blur(5px);
	background: rgba(255,255,255,.8);
	bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 5;
}

#exposure-popup.hidden {
	content-visibility: hidden;
	display: none;
}

#exposure-popup .wrap {
	align-items: center;
	background: #FFF;
	box-shadow: 0 .25em 1em 0 rgba(0,0,0,.2);
	display: flex;
	justify-content: center;
	max-width: calc(61.5em + 2 * var(--ws-gutter));
}

#exposure-popup .wrap>div {
	max-width: 36.5em;
	text-align: center;
}

#exposure-popup :is(em, button ) {
	display: table;
	margin-inline: auto;
}

#exposure-popup em {
	color: var(--ws-blue-2);
}

#exposure-popup p {
	line-height: 1.33;
	text-align: left;
}

#exposure-popup button {
	box-shadow: 0 0 .5em 0 rgba(var(--ws-navy-rgb),0.25);
	color: var(--ws-blue);
}



/* FOOTER / BLOG POPUP ------------------------------ */
.popover-signup {
	align-content: stretch;
	align-items: center;
	backdrop-filter: blur(4px);
	background-color: rgba(1,15,29,.9);
	bottom: 0;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	left: 0;
	opacity: 0;
	padding: 1rem;
	position: fixed;
	pointer-events: none;
	right: 0;
	text-align: center;
	top: 0;
	transition: all .3s ease .1s, visibility 0s ease;
	visibility: hidden;
	z-index: 5;
}

.popover-signup.show {
	opacity: 1;
	pointer-events: all;
	visibility: visible;
	transition: all .3s ease .1s, visibility 0s ease;
}

.popover-signup>div {
	background-color: #fff;
	border-radius: .25rem;
	max-width: 35rem;
	overflow: hidden;
}

.popover-signup input {
	max-width: 12em;
}

.popover-signup figure {
	background-color: var(--ws-red);
	margin: 0;
	max-width: none;
	padding: 1rem 0 2rem;
}

.popover-signup figcaption {
	color: #fff;
	font-size: 2rem;
	font-style: normal;
	font-weight: 300
}

.popover-signup svg {
	height: auto;
	max-width: 7rem;
	width: auto;
}

.popover-signup h2 {
	bottom: 0;
	color: #000;
	font-size: 1.5em;
	font-weight: 600;
	line-height: 2rem;
	margin: 0;
	max-width: none;
}

.popover-signup>div>div {
	padding: 2rem;
	position: relative
}

.popover-signup>div>div>div {
	margin-top: 1rem
}

.popover-signup button,.popover-signup .button {
	font-size: 1rem;
	height: auto;
	margin: 0 1em 0 0;
}

.popover-signup .popover-signup-thanks {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	padding-bottom: 2em;
	pointer-events: none;
	opacity: 0;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-content: stretch;
	align-items: center
}

.popover-signup.popover-completed .popover-signup-thanks {
	pointer-events: inherit;
	opacity: 1
}




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

#contact {
	background: var(--ws-blue-2);
	overflow: hidden;
	padding-block: clamp(3em, 1.545em + 7.27vw, 7em) clamp(3em, 2.091em + 4.55vw, 5.5em);
	position: relative;
	z-index: 0;
}

#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: clamp(1.125em, 1.08em + 0.23vw, 1.25em);
	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.lp {
	overflow: hidden;
}

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

#contact a:is(:hover, :focus-visible) {
	text-decoration: underline;
}

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

#contact label {
	color: #FFF;
	display: block;
}

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

#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);
}




/* CAREERS PAGE CTA ------------------------------ */

#cta {
	background-color: var(--ws-blue-2);
	padding-block: clamp(3em, 2.273em + 3.64vw, 5em);
}

#cta>div {
	position: relative;
}

#cta h2 {
	color: #FFF;
	margin: 0 0 1em;
}

#cta h2>b {
	display: block;
	font-size: 1.125em;
}

#cta .button {
	z-index: 3;
}

#cta img {
	height: auto;
	transform: rotate(-40deg);
	width: 5.75em;
}




/* CAREERS-4 ------------------------------ */

#careers-4 li {
	width:calc(100% - var(--ws-grid-gap) * 2);
	place-self: center;
	margin-block: var(--ws-grid-gap);
	aspect-ratio: 1;
}




/* LP WORK RIBBON ------------------------------ /
* -home, /web-design/, and /web-development/
*/

.lp-work {
	overflow: hidden;
}

.lp-work.home {
	padding-block: clamp(3em, 1.909em + 5.45vw, 6em) clamp(3em, 2.409em + 2.95vw, 4.625em);
}

.lp-work h2 {
	margin: 0 0 1.125em;
	text-wrap: balance;
}

.lp-work.home h2 {
	text-align: center;
}

.lp-work ul {
	margin: 0;
}

.lp-work .grid-item.short img {
	aspect-ratio: 1;
}

.lp-work .grid-item.long img {
	aspect-ratio: 329 / 500;
}

.lp-work li>a {
	display: block;
	line-height: 0;
	position: relative;
}

.lp-work strong.title {
	align-self: center;
	color: #FFF;
	line-height: 1;
	margin: 0;
	text-align: center;
}

.lp-work .button {
	display: table;
	margin: 3em auto 0;
}




/* PARTNER LOGOS RIBBON ------------------------------ /
* - /web-design/
*/

.partner-logos {
	padding-block: clamp(2em, 1.455em + 2.73vw, 3.5em) clamp(3em, 2.636em + 1.82vw, 4em);
}

.partner-logos .wrap {
	max-width: 60em;
}

.partner-logos h2 {
	margin: 0 0 1.25em;
	text-align: center;
}

.partner-logos ul.ws-flex {
	align-items: center;
	justify-content: center;
	row-gap: 2.5em;
	--ws-gap: 1.5em;
	--ws-column-count: 3;
}

.content .partner-logos li {
	margin: 0;
	padding: 0;
}

.partner-logos li::before {
	display: none;
}

.partner-logos img {
	display: block;
	max-height: 6em;
	max-width: min(100%,11rem);
	margin-inline: auto;
	object-fit: contain;
}

.partner-logos:not(.web-dev-landing) img {
	width: auto;
}


/* /web-design/ landing page overrides */
.partner-logos.web-dev-landing {
	--ws-spacing: clamp(2.5rem, 1.591rem + 4.55vw, 5rem);
}

.partner-logos.web-dev-landing .wrap {
	--ws-gutter: 1.5em;
	max-width: calc(74rem + 2 * var(--ws-gutter));
}

.partner-logos.web-dev-landing h2 {
	margin: 0 0 var(--ws-spacing);
}

.partner-logos.web-dev-landing ul.ws-flex.five {
	row-gap: var(--ws-spacing);
}

.partner-logos.web-dev-landing img {
	max-height: 5.5rem;
}



/* ICON LIST RIBBON (T2 service pages) ------------------------------ */

.icon-list {
	padding-block: clamp(3em, 2.364em + 3.18vw, 4.75em);
	text-align: center;
}

.icon-list ul>li {
	color: #666;
	margin: 0;
	padding-inline: 0;
	text-wrap: pretty;
}

.icon-list ul>li::before {
	aspect-ratio: 1;
	content:  '';
	display: block;
	height: 2.5em;
	margin: -.5em auto .25em;
	mask: no-repeat center / contain;
	position: static;
}

.icon-list ul>li>:is(b,strong) {
	color: #000;
}

.icon-list ul>li:nth-child(1)::before {	background: var(--ws-green); }
.icon-list ul>li:nth-child(2)::before {	background: var(--ws-red); }
.icon-list ul>li:nth-child(3)::before {	background: var(--ws-blue); }

.icon-list li.laptop-binary::before { mask-image: url('/images/icons/icon-list/laptop-binary.svg'); }
.icon-list li.filter-circle-dollar::before { mask-image: url('/images/icons/icon-list/filter-circle-dollar.svg'); }
.icon-list li.envelope-open::before { mask-image: url('/images/icons/icon-list/envelope-open.svg'); }
.icon-list li.arrows-down-to-people::before { mask-image: url('/images/icons/icon-list/arrows-down-to-people.svg'); }
.icon-list li.globe::before { mask-image: url('/images/icons/icon-list/globe.svg'); }
.icon-list li.hourglass-start::before { mask-image: url('/images/icons/icon-list/hourglass-start.svg'); }
.icon-list li.split::before { mask-image: url('/images/icons/icon-list/split.svg'); }
.icon-list li.ad::before { mask-image: url('/images/icons/icon-list/ad.svg'); }
.icon-list li.circle-dashed::before { mask-image: url('/images/icons/icon-list/circle-dashed.svg'); }
.icon-list li.dollar-sign::before { mask-image: url('/images/icons/icon-list/dollar-sign.svg'); }
.icon-list li.bars::before { mask-image: url('/images/icons/icon-list/bars.svg'); }
.icon-list li.head-side-brain::before { mask-image: url('/images/icons/icon-list/head-side-brain.svg'); }
.icon-list li.blog::before { mask-image: url('/images/icons/icon-list/blog.svg'); }
.icon-list li.share-square::before { mask-image: url('/images/icons/icon-list/share-square.svg'); }
.icon-list li.palette::before { mask-image: url('/images/icons/icon-list/palette.svg'); }
.icon-list li.bolt::before { mask-image: url('/images/icons/icon-list/bolt.svg'); }
.icon-list li.glasses::before { mask-image: url('/images/icons/icon-list/glasses.svg'); }
.icon-list li.user-viewfinder::before { mask-image: url('/images/icons/icon-list/user-viewfinder.svg'); }
.icon-list li.chart-mixed-up-circle-dollar::before { mask-image: url('/images/icons/icon-list/chart-mixed-up-circle-dollar.svg'); }
.icon-list li.magnet::before { mask-image: url('/images/icons/icon-list/magnet.svg'); }
.icon-list li.lightbulb-dollar::before { mask-image: url('/images/icons/icon-list/lightbulb-dollar.svg'); }
.icon-list li.bullseye-arrow::before { mask-image: url('/images/icons/icon-list/bullseye-arrow.svg'); }
.icon-list li.arrow-down-wide-short::before { mask-image: url('/images/icons/icon-list/arrow-down-wide-short.svg'); }
.icon-list li.arrow-up-right-dots::before { mask-image: url('/images/icons/icon-list/arrow-up-right-dots.svg'); }
.icon-list li.bag-shopping::before { mask-image: url('/images/icons/icon-list/bag-shopping.svg'); }
.icon-list li.basket-shopping::before { mask-image: url('/images/icons/icon-list/basket-shopping.svg'); }
.icon-list li.browser::before { mask-image: url('/images/icons/icon-list/browser.svg'); }
.icon-list li.cart-shopping::before { mask-image: url('/images/icons/icon-list/cart-shopping.svg'); }
.icon-list li.chart-line-up::before { mask-image: url('/images/icons/icon-list/chart-line-up.svg'); }
.icon-list li.circle-check::before { mask-image: url('/images/icons/icon-list/circle-check.svg'); }
.icon-list li.envelope-circle-check::before { mask-image: url('/images/icons/icon-list/envelope-circle-check.svg'); }
.icon-list li.face-frown::before { mask-image: url('/images/icons/icon-list/face-frown.svg'); }
.icon-list li.face-smile::before { mask-image: url('/images/icons/icon-list/face-smile.svg'); }
.icon-list li.gauge-high::before { mask-image: url('/images/icons/icon-list/gauge-high.svg'); }
.icon-list li.laptop-arrow-down::before { mask-image: url('/images/icons/icon-list/laptop-arrow-down.svg'); }
.icon-list li.laptop-mobile::before { mask-image: url('/images/icons/icon-list/laptop-mobile.svg'); }
.icon-list li.message-check::before { mask-image: url('/images/icons/icon-list/message-check.svg'); }
.icon-list li.mobile::before { mask-image: url('/images/icons/icon-list/mobile.svg'); }
.icon-list li.octagon-exclamation::before { mask-image: url('/images/icons/icon-list/octagon-exclamation.svg'); }
.icon-list li.outlet::before { mask-image: url('/images/icons/icon-list/outlet.svg'); }
.icon-list li.rocket-launch::before { mask-image: url('/images/icons/icon-list/rocket-launch.svg'); }
.icon-list li.shield-check::before { mask-image: url('/images/icons/icon-list/shield-check.svg'); }
.icon-list li.sneaker-running::before { mask-image: url('/images/icons/icon-list/sneaker-running.svg'); }
.icon-list li.thumbs-up::before { mask-image: url('/images/icons/icon-list/thumbs-up.svg'); }
.icon-list li.video::before { mask-image: url('/images/icons/icon-list/video.svg'); }
.icon-list li.wordpress-simple-brands::before { mask-image: url('/images/icons/icon-list/wordpress-simple.svg'); }
.icon-list li.xmark-to-slot::before { mask-image: url('/images/icons/icon-list/xmark-to-slot.svg'); }




/* CIRCLE SECTION (T3 service pages) ------------------------------ */
.circle-section {
	background: var(--ws-midnight);
	position: relative;
	z-index: 0;
}

.circle-section:nth-of-type(1n).dark {
	background: var(--ws-midnight);
}

.circle-section img {
	align-self: start;
	width: 100%;
}

.circle-section h2 {
	margin: 0 0 .25em;
}

.circle-section p.intro {
	font-size: clamp(1.1875em, 1.119em + 0.34vw, 1.375em);
}

.circle-section:nth-of-type(1n).white a:not(.button) {
	color: var(--ws-blue-AA);
}

.circle-section:nth-of-type(even),
.circle-section:nth-of-type(1n).white {
	background: #FFF;
}

.circle-section:nth-of-type(3),
.circle-section:nth-of-type(5),
.circle-section:nth-of-type(4).dark {
	background: var(--ws-blue-2);
}

.circle-section.dark :is(h2, p, li),
.circle-section.dark :is(h2, p, li) a,
.circle-section:is(:nth-of-type(1), :nth-of-type(3), :nth-of-type(5)) :is(h2, p, li),
.circle-section:is(:nth-of-type(1), :nth-of-type(3), :nth-of-type(5)) :is(h2, p, li) a {
	color: #FFF;
}

.circle-section.dark :is(h2, p, li) a:focus-visible,
.circle-section.dark :is(h2, p, li) a:focus-visible *,
.circle-section:is(:nth-of-type(1), :nth-of-type(3), :nth-of-type(5)) :is(h2, p, li) a:focus-visible,
.circle-section:is(:nth-of-type(1), :nth-of-type(3), :nth-of-type(5)) :is(h2, p, li) a:focus-visible * {
  color: var(--ws-lt-blue-2) !important;
}

.circle-section.dark ul li::before,
.circle-section:nth-of-type(3) ul li::before,
.circle-section:nth-of-type(5) ul li::before,
.circle-section:nth-of-type(4).dark ul li::before {
	background: var(--ws-lt-blue-2);
}

.circle-section.white h2 {
	color: var(--ws-dk-blue);
}

.circle-section:not(:is(.blue, .dark)):nth-of-type(even) p.intro {
	color: var(--ws-midnight);
}

.circle-section.white :is(p, li) {
	color: var(--ws-gray);
}

.circle-section a:not(.button) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.1em;
}

.circle-section .video-circle {
	display: block;
	position: relative;
	width: 100%;
	align-self: start;
	line-height: 0;
}

.circle-section .video-circle video {
	aspect-ratio: 1;
	clip-path: inset(2px 2px);
	width: 100%;
}

.circle-section :is(p:not(.intro), li) {
	font-size: clamp(1.125em, 1.08em + 0.23vw, 1.25em);
}

.content .circle-section ul li {
	padding-left: .875em;
}

.content .circle-section ul li::before {
	left: 0;
	top: .5em;
}

.circle-section ul li em {
	display: block;
	font-size: .8em;
}


/* If the 4th circle-section is the last circle-section -> blue bg instead of white */
.circle-section:nth-of-type(4).last {
	background-color: var(--ws-dk-blue);
}



/* Learn more about... links to Web Solutions site */
.circle-section hr {
	border-top: 1px solid #979797;
	margin-block: 3em .25em;
	opacity: .37;
}

.circle-section:nth-of-type(1n) hr + p {
	font-size: 1em;
}

.circle-section hr + p>a:not(.button),
.circle-section:nth-of-type(1n).white hr + p>a {
	color: rgba(102,102,102,.65);
	font-style: italic;
	text-decoration: none;
}

.circle-section hr + p>a::after {
	background: url('/images/icons/external-link.svg') no-repeat right center / auto .8125em;
	content: '';
	opacity: .5;
	padding-left: 1.25em;
}

.circle-section:nth-of-type(odd) hr + p>a,
.circle-section:nth-of-type(1n).dark hr + p>a {
	color: rgba(255,255,255,.65);
}

.circle-section:nth-of-type(odd) hr + p>a::after,
.circle-section:nth-of-type(1n).dark hr + p>a::after {
	background-image: url('/images/icons/external-link-blue.svg')
}


/* Google & MS Partners badges */
.circle-section .partners {
	align-items: center;
	display: flex;
	gap: clamp(.5em, .2273em + 1.36vw, 1.25em);
	justify-content: center;
	margin: 2.5em 0 0;
}

.circle-section .partners a {
	display: block;
	width: min(25%, 8em);
}

.circle-section .partners>a>img {
	margin: 0;
	width: 100%;
}

.circle-section .partners>img {
	flex: 1 1 auto;
	align-self: center;
	max-width: min(65%, 21em) !important;
	object-fit: contain;
	margin: 0 !important;
	max-height: 8em;
}




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

.badges {
	align-items: center;
	display: flex;
	gap: 1em;
	justify-content: space-between;
	margin-top: 1.5em;
}

main .circle-section .badges>*:first-child {
	max-width: min(11em, calc(33.33% - 1em));
	width: 25%;
}

main .circle-section .badges>* {
	max-width: min(6em, calc(30% - 1em));
	width: 20%;
}


img.small {
	display: block;
	margin-inline: auto;
	max-width: min(8em,100%);
}



/* LP CIRCLE SECTION RIBBON ------------------------------ /
* -/web-design/ and /web-development/
*/
.circle-section.blue {
	background: var(--ws-blue-2);
	overflow: hidden;
}

.circle-section.blue.dk-blue {
	background: var(--ws-midnight);
}

.circle-section.blue::before {
	background: #FFF;
	content: '';
	inset: 0 0 auto;
	position: absolute;
	z-index: -1;
}

.home .circle-section.blue::before {
	background: var(--ws-light-2);
}

.circle-section.blue :is(h2,p,li) {
	color: #FFF;
}

.circle-section.blue h2 {
	margin: 0 0 .75em;
	text-wrap: balance;
}


.circle-section.blue li {
	font-size: clamp(1.125em, 1.08em + 0.23vw, 1.25em);
	margin: 0 0 .4375em;
	padding-left: 1.5em;
	position: relative;
}

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

.circle-section.blue li:nth-child(1)::before { mask-image: url('/images/icons/check.svg'); }
.circle-section.blue li:nth-child(2)::before { mask-image: url('/images/icons/trophy.svg'); }
.circle-section.blue li:nth-child(3)::before { mask-image: url('/images/icons/gear.svg'); }
.circle-section.blue li:nth-child(4)::before { mask-image: url('/images/icons/group.svg'); }
.circle-section.blue li:nth-child(5)::before { mask-image: url('/images/icons/user.svg'); }
.circle-section.blue li:nth-child(6)::before { mask-image: url('/images/icons/headset.svg'); }
.circle-section.blue li:nth-child(7)::before { mask-image: url('/images/icons/money-bill.svg'); }



/* DESIGN PROCESS RIBBON ------------------------------ /
* - /web-design/ and /about/approach/ landing pages
*/

.design-process {
	padding-block: clamp(3rem, 2.273rem + 3.64vw, 5rem) 3rem;
	row-gap: 0;
}

.design-process .intro {
	margin: 0 0 2em;
}

.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:last-child::before {
	aspect-ratio: 79.673 / 303.5;
	background: url('/images/design-process/2col-bottom.svg') no-repeat center / contain;
	content: '';
	inset: 0 auto auto -15%;
	margin-top: 6%;
	position: absolute;
}

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

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

.design-process ol>li>div::before {
	align-items: center;
	aspect-ratio: 1;
	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(--ws-red); }
.design-process ol>li:nth-child(3n+2)>div::before { background: var(--ws-blue-2); }
.design-process ol>li:nth-child(3n+3)>div::before { background: var(--ws-blue); }

.design-process ol>li strong {
	color: var(--ws-midnight);
	display: block;
	font-size: 1.5em;
	line-height: 1.33;
}

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

/* Bottom */
.design-process .bottom {
	background: var(--ws-blue-2);
	grid-column: 1 / -1;
	padding-block: 7rem clamp(3rem, 2.091rem + 4.55vw, 5.5rem);
}

.design-process .bottom img {
	display: block;
	margin-inline: auto;
	width: 6.4375em;
}

.design-process .bottom h2 {
	color: #FFF;
	font-size: clamp(1.75rem, 1.568rem + 0.91vw, 2.25rem);
	line-height: 1.1;
	text-wrap: balance;
}

.design-process .bottom p {
	color: #FFF;
	font-size: clamp(1.25rem, 1.205rem + 0.23vw, 1.375rem);
	margin: 0 0 1.5rem;
}

.design-process .bottom .button {
	font-size: 1.25rem;
	padding: .5em 3em .5em 1.875em;
}

.design-process .bottom .button::before {
	border-color: #FFF;
}

.design-process .bottom .button::after {
	background-image: url('/images/icons/caret-down-red.svg');
	right: 1.75rem;
}




/* PLAN COMPARISON RIBBON ------------------------------ /
* - /about/approach/ page
*/

.plan-comparison>div {
	border-block: .25rem solid #EDEDED;
	padding-block: .5em 0;
}

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





/* FEATURED BLOG POST RIBBON ------------------------------ /
* - /manufacturing-web-design/
*/

.featured-blog-post {
	background: var(--ws-blue);
}

.featured-blog-post h2 {
	color: #FFF;
	line-height: 1.3;
	text-wrap: pretty;
}

.featured-blog-post h2 > span {
	border-bottom: 1px solid rgba(255,255,255,.36);
	display: block;
	font-size: .61em;
	font-weight: 300;
	margin: 0 0 .25em;
	padding: 0 0 .25em;
}

.featured-blog-post span.link {
	background: url('/images/icons/caret-right-white.svg') no-repeat 95% calc(50% + .125em) / .55em auto;
	color: #FFF !important;
	font-size: clamp(1em, 0.909em + 0.45vw, 1.25em);
	padding-right: 1.5em;
	transition: all .3s ease;
}

.featured-blog-post figure {
	line-height: 0;
	margin: 0;
}

.featured-blog-post figure img {
	aspect-ratio: 1022 / 400;
	height: 100%;
	object-fit: cover;
	width: 100%;
}




/* STATS RIBBON ------------------------------ /
* - Industry templates ( i.e. /manufacturing-web-design/ )
* - Homepage
*/

.stats {
	padding-block: clamp(2em, 1.273em + 3.64vw, 4em);
	text-align: center;
}

.stats .textbox {
	margin: 0 auto 2em;
	max-width: 64em;
}

.stats h1 {
	font-size: clamp(1.5em, 1.136em + 1.82vw, 2.5em);
	margin: 0 0 .25em;
}

.stats ul.ws-flex {
	justify-content: center;
	margin: 0 0 clamp(2em, 0.636em + 6.82vw, 5.75em);
	--ws-gap: 1em;
}

.stats ul.ws-flex>li {
	background: #FFF;
	border-radius: .5em;
	padding: 2.25em .625em 2.625em;
}

.stats ul.ws-flex>li span {
	display: block;
	font-size: clamp(1em, 0.955em + 0.23vw, 1.125em);
	text-wrap: pretty;
}

.stats ul.ws-flex>li span::before {
	aspect-ratio: 1;
	background: var(--ws-blue);
	content: '';
	display: block;
	margin: 0 auto .5em;
	mask: no-repeat center / contain;
	height: 2.5em;
	width: auto;
}

.stats ul.ws-flex>li span.stopwatch::before { mask-image: url('/images/icons/stopwatch.svg'); }
.stats ul.ws-flex>li span.bullseye::before { mask-image: url('/images/icons/bullseye.svg'); }
.stats ul.ws-flex>li span.bars::before { mask-image: url('/images/icons/bars.svg'); }
.stats ul.ws-flex>li span.pointer::before { mask-image: url('/images/icons/pointer.svg'); }
.stats ul.ws-flex>li span.mobile::before { mask-image: url('/images/icons/mobile.svg'); }

.stats ul.ws-flex>li span.head-side::before { mask-image: url('/images/icons/head-side.svg'); }
.stats ul.ws-flex>li span.bolt::before { mask-image: url('/images/icons/bolt.svg'); }
.stats ul.ws-flex>li span.chart-line-down::before { mask-image: url('/images/icons/chart-line-down.svg'); }
.stats ul.ws-flex>li span.mobile-sharp::before { mask-image: url('/images/icons/mobile-sharp.svg'); }
.stats ul.ws-flex>li span.signs::before { mask-image: url('/images/icons/signs.svg'); }

.stats ul.ws-flex>li span.bullseye-full::before { mask-image: url('/images/icons/bullseye-full.svg'); }
.stats ul.ws-flex>li span.thumbs-up-full::before { mask-image: url('/images/icons/thumbs-up-full.svg'); }
.stats ul.ws-flex>li span.wordpress-full::before { mask-image: url('/images/icons/wordpress-full.svg'); }
.stats ul.ws-flex>li span.people-roof-full::before { mask-image: url('/images/icons/people-roof-full.svg'); }
.stats ul.ws-flex>li span.handshake-full::before { mask-image: url('/images/icons/handshake-full.svg'); }

.stats .button.red.scroll-down {
	inset: auto;
	padding-inline: 1.5em 2.25em;
	position: relative;
	transform: none;
	white-space: normal;
}

.stats .button.red.scroll-down::after {
	right: 1em;
}


/* Homepage */
.home .stats {
	padding-block: clamp(3em, 1.909em + 5.45vw, 6em) 0;
	position: relative;
	z-index: 0;
}

.home .stats::before {
	background: var(--ws-midnight);
	content: '';
	height: 1.25em;
	inset: auto 0 0 0;
	position: absolute;
	z-index: -1;
}

.home .stats ul.ws-flex {
	margin: 0;
}




/* CERTIFICATIONS RIBBON ------------------------------ /
* - /expertise/
* - Industry templates ( i.e. /manufacturing-web-design/ )
*/

.certifications {
	background: #FFF;
	padding-block: clamp(3em, 2.273em + 3.64vw, 5em);
	text-align: center;
}

.certifications.industry-template {
	padding-block: 0 clamp(3em, 2.273em + 3.64vw, 5em);
}

.certifications h2 {
	margin: 0 0 2.5em;
}

.certifications ul.ws-flex {
	align-items: center;
	justify-content: center;
	row-gap: clamp(3em, 2em + 5vw, 5.75em);
	--ws-gap: 1.5em;
	--ws-column-count: 5;
}

.certifications ul.ws-flex img {
	display: block;
	margin-inline: auto;
	max-height: 6.125em;
	max-width: 11em;
}





/* EXPOSURE - WEB SOLUTIONS RIBBON ------------------------------ /
* - /expertise/web-development/
*/

.exposure-web-solutions {
	background: rgba(var(--ws-midnight-rgb), .08);
	padding-block: clamp(3em, 2.5em + 2.5vw, 4.375em) clamp(3em, 2.682em + 1.59vw, 3.875em);
	position: relative;
	text-align: center;
	z-index: 1;
}

.exposure-web-solutions>div {
	max-width: 56.625em;
	margin-inline: auto;
}

.exposure-web-solutions h2 {
	margin: 0 0 .25em;
}

.exposure-web-solutions p {
	font-size: clamp(1.125em, 1.034em + 0.45vw, 1.375em);
}

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

.exposure-web-solutions figure img {
	height: 2em;
}

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

.exposure-web-solutions 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 .button {
	font-size: 1.125em;
	inset: auto auto 0 50%;
	padding: 0.45em 2.375em .5em 1.25em;
	position: absolute;
	transform: translate(-50%,50%);
}

.exposure-web-solutions .button::after {
	background: #FFF;
	mask: url('/images/icons/external-link.svg') no-repeat center / auto .875em;
	opacity: .5;
}



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

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

	@keyframes icon-sink {
		100% { transform: translateY(.5em); }
	}

	@keyframes icon-hang {
		0% { transform: translateY(.5em); }
		50% {	transform: translateY(.125em); }
		100% { transform: translateY(.5em); }
	}

}



/* Portfolio Logo Animations ------------------ */

.hevc-version { display: none; }

@media not all and (min-resolution:.001dpcm) { @media {
	.hevc-version { display: block; }
	.webm-version { display: none; }
}}




/* ----~~~~~===== WEB SOLUTIONS - STYLE.CSS =====~~~~~----- */