@charset "UTF-8";
/* Web Solutions 4.0 Compatible */

:root {
    --gap: 1em;
    --grid-columns: repeat(4, 1fr);

	--side-padding: 1.5em;

	--portfolio-column-gutter: calc(((100vw - 3rem) / 4) + 1rem);
    --portfolio-column-width: 7em;
    --ws-gutter: 5%;

    --ws-grid-14: .5rem [wrap-start] repeat(2, 1fr) [wrap-end] .5rem;

    /* Grid */
}

html {
	scroll-padding-top: 3.125em;
}

body {
    background: #fff;
}

body.slideNav {
    overflow: hidden;
}

body.home {
    overflow-x: hidden;
}

.anchor-link {
    top: 0;
}

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

:is(button, .button) {
    font-size: 1em;
}

:is(button, .button, input[type="button"], input[type="submit"], input[type="reset"]).big {
    font-size: 1.125em;
}

p {
    font-size: 1.125em;
}

/* HEADER ------------------------------ */
body>header {
    background: #FFF;
    display: contents;
    position: relative;
    text-align: center;
    z-index: 4;
}

body>header:before {
    background-color: #000;
    content: "";
    display: block;
    height: 100vh;
    left: 100vw;
    opacity: 0;
    position: fixed;
    top: 0;
    transition: left 0ms ease 200ms, opacity .3s ease;
    width: 100vw;
    z-index: 4;
}

body.slideNav>header:before {
    left: 0;
    opacity: .5;
    transition: left 0ms ease 0ms, opacity .3s ease;
}

#brand {
    display: block;
    margin: 0 auto;
    max-width: 15em;
    padding: 1.25em 1em .75em;
    width: 100%;
}

#navContainer {
    -webkit-overflow-scrolling: touch;
    -webkit-transition: left 200ms ease;
    background-color: var(--ws-midnight);
    bottom: 0;
    left: 100%;
    max-height: 100vh;
    overflow: auto;
    position: fixed;
    text-align: left;
    top: 0;
    transition: left 200ms ease;
    width: 75%;
    z-index: 4;
}

body.slideNav #navContainer {
    left: 25%;
}

#navContainer nav {
    display: inline;
}

#navContainer ul {
    display: block;
    margin: 0;
    padding-left: 0;
    width: 100%;
}

#navContainer li {
    border-top: 1px solid rgba(255, 255, 255, 0.125);
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
}

#navContainer li li {
    border: 0;
}

#navContainer a,
#navContainer .menu {
    color: #FFF;
    cursor: pointer;
    display: block;
    font-size: 1.125em;
    line-height: 1.5;
    padding: .75em 1em;
    text-align: left;
	width: 100%;
}

#navContainer a:focus-visible,
#navContainer .menu:focus-visible {
    outline: 2px solid var(--blue);
	outline-offset: -2px;
}

#navContainer button.menu:before,
#navContainer button.menu:after {
    content: none;
}

#navContainer button.menu {
    background: none;
    border-radius: 0;
    box-shadow: none;
    font-weight: 300;
}

#navContainer li>button {
    background: none;
    border-radius: 50%;
    box-shadow: none;
    display: block;
    font-size: 1em;
    height: 2.75em;
    padding: 0;
    position: absolute;
    right: .125em;
    top: .25em;
    width: 2.75em;
}

#navContainer li>button::before,
#navContainer li>button::after {
    background: #FFF;
    border: 0;
    border-radius: 0;
    content: '';
    display: block;
    height: 0.0625rem;
    left: 50%;
    mask: none;
	opacity: 1;
    position: absolute;
    right: auto;
    top: 50%;
    transform-origin: center center;
    width: 50%;
	z-index: 1;
}

#navContainer li>button::after {
    transform: translate(-50%, -50%);
}

#navContainer li>button::before {
    transform: translate(-50%, -50%) rotate(90deg);
}

#navContainer li.open>button {
    transform: rotate(-135deg);
}

#navContainer li.open>button::before {
    transition: transform .2s ease;
}

#navContainer ul li:not(.has-megamenu) ul,
#navContainer .megamenu {
    font-size: 1em;
    height: 0;
    overflow: hidden;
    transition: height .3s ease;
}

#navContainer ul ul a {
    font-size: 1.125em;
    padding: .3755em 1em .375em 2em;
}

#navContainer li.on>a,
#navContainer li.open {
    background-color: rgba(255, 255, 255, .08);
}

#navContainer ul ul li.on a {
    background-color: rgba(255, 255, 255, .16);
}

#navContainer ul ul ul a {
    font-size: 1.125em;
}

#navContainer ul ul ul li.on a {
    background-color: rgba(255, 255, 255, .12);
}

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

#mainnav .megamenu {
    display: block;
    font-size: 1em;
}

#mainnav .megamenu .links {
    padding-bottom: .5em;
}

#mainnav .megamenu .cta {
    content-visibility: hidden;
    display: none;
}

#mainnav .megamenu strong {
    color: rgba(255, 255, 255, .5);
    display: block;
    font-size: 1em;
    font-style: italic;
    font-weight: 300;
    padding-inline: 1.125em;
}

#mainnav>ul>li>.megamenu ul li>a {
    padding: .3125em 1em .3125em 2.375em;
}

#mainnav>ul>li>.megamenu ul li>a::before {
    inset: .625em auto auto 1em;
}

/* MOBILENAV ------------------------------ */

#mobilenav {
    background-color: var(--ws-dk-blue);
	box-shadow: 0 1px 0 0 rgba(255,255,255,0.125);
    display: flex;
    justify-content: space-between;
    position: sticky;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 2;
}

#mobilenav a,
#mobilenav :is(span, button).menu {
    background: none;
    box-shadow: none;
    color: #FFF;
    display: inline-block;
    flex: 1 0 auto;
    font-size: 1em;
    font-weight: 350;
    padding: .625em .375em;
    text-transform: lowercase;
}

#mobilenav a {
    font-weight: 700;
}

#mobilenav > *:focus-visible {
    outline: 2px solid var(--blue);
	outline-offset: -2px;
}

#mobilenav button.menu {
    border-radius: 0;
    line-height: 1.45;
    transition: all 0s ease;
}

#mobilenav button.menu:before,
#mobilenav button.menu:after {
    content: none;
}

#mobilenav :is(span, button) svg {
    fill: #FFF;
    height: 1em;
    margin: 0 0 0 .25em;
    pointer-events: none;
    position: relative;
    top: .25em;
}

/* MAIN ------------------------------ */

main>:is(div, article)>div>#content {
    grid-column: wrap-start / wrap-end;
    grid-row: 1 / 2;
    padding-block: 3em;
}

.blog-template main>:is(div, article)>div>#content {
    padding-top: 0;
}

main>div>div>aside {
    display: none;
}

.twoCol,
.threeCol,
.resCol {
    column-rule: 1px outset rgba(0, 0, 0, .15);
    column-width: 13em;
    columns: auto;
}

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

.formTable :is(tbody, tr) {
    display: block;
}

.formTable td {
    display: block;
    padding: 0;
    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 textarea {
    margin-bottom: 1em;
}

.formTable table td+td {
    padding-left: 0 !important;
}

.photoright.video {
	margin-bottom: 2em;
    margin-inline: 0;
	max-width: 100%;
	width: 100%;
}

.photoleft {
    margin: 0 1em .75em 0;
}

/* Grid Section */
.grid-section {
	padding-inline: var(--side-padding);
}

.grid-section .full-width,
.grid-section .full-screen,
.grid-section .textbox,
.grid-section .services-list,
.grid-section .scroll-links,
.grid-section.value-points .styled-list li,
.grid-section#contact>* {
    grid-column: 1 / span 4;
}

#hero.grid-section,
.hero.grid-section {
	gap: var(--gap);
}

#hero.grid-section:has(.scroll-links),
.hero.grid-section:has(.scroll-links) {
    grid-template-areas:
	"textbox" 
	"scroll-links";
}

.scroll-links ul {
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0;
}

.grid-section>ul {
    margin: 0;
}

.grid-section .texbox {
    grid-row: 1;
}

.grid-section .scroll-links {
    grid-row: 2;
}

.grid-section .stats li,
.grid-section .portfolio-grid li ,
#gallery .grid-gallery li {
    grid-column: span 2;
}


.grid-section.blog-mosaic .portfolio-grid-heading,
body.blog main #blog .portfolio-grid-heading,
.work.mosaic .portfolio-grid-heading {
	aspect-ratio: unset;
	gap: 2em;
    grid-column: span 4;
}

body.blog main #blog .portfolio-grid-heading {
	gap: 1em;
}

.blog-mosaic .portfolio-grid-heading::before, 
.work.mosaic .portfolio-grid-heading::before {
	width: var(--side-padding);
}

.grid-section.results .stats li:last-child:nth-child(odd) {
    grid-column: span 4;
}

body.blog main #blog .portfolio-grid li {
	margin-bottom: 1em;
}

section#blog .portfolio-grid.full-screen li {
	grid-column: 1/-1;
	margin-bottom: 1em;
}

.image-and-text-container .content-wrap {
    grid-column: 1/-1;
    grid-row: 1;
}

.image-and-text-container .image {
    grid-column: 1/-1;
    grid-row: 2;
}

.grid-section .full-screen .image:first-child {
	margin-left: calc(var(--side-padding) * -1);
}

.grid-section .full-screen .image:nth-child(2) {
	margin-right: calc(var(--side-padding) * -1);
}

.grid-section .image-and-text-container .image {
	margin-top: 1em;
	min-height: 30vh;
}

.grid-section.value-points .styled-list .image {
    aspect-ratio: 3/1;
    display: none;
}

.image-and-text-container.subgrid {
    gap: var(--gap);
}

.grid-section .services-list {
	margin-top: 1em;
	column-count: 2;
}

.service-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-inline: var(--ws-gutter);
}

.service-list .textbox {
    width: 100%;
}

.service-list .column>div {
    width: fit-content;
}

.service-list .column-1 ul {
    column-gap: 2em;
    columns: 2;
}

.service-list li>a {
    font-size: clamp(1.063em, 1.016em + 0.23vw, 1.125em);
}

.marketing-plans {
	flex-direction: column;
}


.exposure-web-solutions > div {
	grid-column: 1/-1;
}

.grid-section .marketing-plans > div.plan {
	padding: 2em 1em;
}

.grid-section .team-list {
	gap: var(--gap);
}

#team li:nth-child(even) .thumbnail:before,
#team li:nth-child(n+5):nth-child(odd) .thumbnail:before {background: var(--ws-blue);}
#team li:nth-child(odd) .thumbnail:before,
#team li:nth-child(n+5):nth-child(even) .thumbnail:before {background: var(--ws-blue-2);}

.grid-section .brand-list li {
	grid-column: span 2;
	padding-inline: 1em;
}

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

.engagement ul.ws-flex {
    --ws-column-count: 3;
    row-gap: 1.5em;
}

.engagement li {
    padding-inline: 1em;
}

.engagement li>strong {
    font-size: clamp(1.625em, 1.346em + 1.4vw, 2em);
}

.engagement li>strong::before {
    width: 1em;
}

.portfolio-work .grid-section.small-padding-top {
	padding-top: 0;
}

#services {
    padding-block: 2.5em .5em;
}

#services>ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#services>ul>li {
    margin: 0 0 2.5em;
    min-width: 13.75em;
    padding: 0 1em;
    text-align: center;
    width: calc(50% - 2em);
}

#services h2 {
    font-size: 1.25em;
}

#services ul ul>li>a {
    display: block;
    padding: .3125em 0;
}

#services.lp ul {
    align-items: center;
    flex-direction: column;
}

#services.lp>ul>li {
    max-width: 26em;
    min-width: 0;
    width: 100%;
}

#contact h2 {
	font: var(--heading-large);
}


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

main.cms.interior.grid > #content,
.interior-content .interior-content-container {
	grid-column: 1 / -1;
}

main.cms.interior.grid > aside {
	display: none;
}

main.cms.interior.grid > #content {
	padding: 2em 1em 3em;
}



/* EXPOSURE POPUP ------------------------------ */
#exposure-popup {
    align-items: center;
    display: flex;
}

#exposure-popup .wrap {
    padding-block: 2.25em 2em;
}

#exposure-popup img:first-of-type {
    margin: 0 auto 1em;
    max-width: 12em;
}

#exposure-popup img:last-of-type {
    margin: .5em auto 2em;
    max-width: 13em;
}

#exposure-popup :is(p, em) {
    font-size: 1.125em;
}

#exposure-popup p {
    margin: 0 0 1.25em;
}

#exposure-popup button {
    margin: 0 auto 1em;
}

/* hirEDCT --------------------------------- */
.hiredct-logo {
    width: 50%;
}

.hiredct-title {
    font-size: clamp(1.875rem, 0.9448rem + 4.6512vw, 3.125rem);
}

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

#contact :is(p, td, address, .icon, button, label) {
    font-size: 1.125em;
}

#contact.lp img {
    display: none;
}

/* QUOTES RIBBON ------------------------------ */

#quotes blockquote {
    grid-column: wrap-start / wrap-end;
    grid-template-columns: repeat(2, 1fr);
}

#quotes blockquote p {
    grid-column: 1 / 4;
}

#quotes blockquote cite {
    grid-column: 1 / 4;
}

#quote-fader .dots:has(+ button) {
    left: calc(50% - 0.625rem);
}

#quotes #quote-fader .dots+button {
    font-size: 1em;
    right: calc(50% - 4rem);
}

#content :is(.thankyouTW, .thankyouFB) {
    margin: 0;
    padding: 0%;
    text-align: center;
    width: 100%;
}

#content :is(.thankyouTW, .thankyouFB)>* {
    margin-inline: auto;
}

#content .thankyouFB {
    margin-top: var(--ws-grid-gap);
}

/* Carby ----------------------- */
.carby-website-video {
    grid-column: 2 / 4;
    grid-row: 2;
    top: 2.8125rem;
    width: 99%;
}

:is(button).carby-screen-button {
    bottom: 2.0625rem;
    padding: 26%;
}

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

.lp-work h2 {
    font-size: 1.5rem;
}

.lp-work .ws-grid>ul:nth-child(1) {
    grid-column: 1 / 3;
}

.lp-work .ws-grid>ul:nth-child(2) {
    grid-column: 3 / 5;
}

.lp-work .ws-grid>ul:nth-child(3) {
    grid-column: 1 / 3;
}

.lp-work .ws-grid>ul:nth-child(4) {
    grid-column: 3 / 5;
}

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

/* /web-design/ landing page overrides */
.partner-logos.web-dev-landing ul.ws-flex.five {
    --ws-column-count: 3;
}

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

.icon-list ul {
    display: grid;
    gap: 3em;
    margin-inline: auto;
    max-width: 26em;
}

.icon-list ul>li {
    font-size: 1.3125em;
}

.icon-list ul>li::before {
    width: 2.5em;
}

/* CIRCLE SECTION (T3 service pages) ------------------------------ */

.circle-section {
    padding-block: 3em;
}

.circle-section :is(img:not(.small), .image, .video-circle) {
    margin: 0 auto 2em;
    max-width: 26em;
}

.circle-section.blue {
    padding-block: 0 3em;
}

.circle-section.blue::before {
    height: 2em;
}

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

.design-process .middle {
    padding: 0 8% 12%;
}

.design-process ol {
	padding: 0 0 0 1em;
    width: auto;
}

.design-process ol>li:not(:last-child) {
    margin: 0 0 12.5%;
}

.design-process ol>li:nth-child(1n)::before {
    aspect-ratio: 69 / 116;
    background: url('/images/design-process/left.svg') no-repeat right center / contain;
    inset: -2.75% auto auto -8.5%;
    margin-top: 10%;
    width: 12%;
    z-index: -1;
}

.design-process ol>li:not(:last-child)::after {
    aspect-ratio: 274 / 103;
    background: url('/images/design-process/center-stacked.svg') no-repeat center top / contain;
    content: '';
    inset: 100% auto auto 2.5%;
    position: absolute;
    width: 52%;
    z-index: 1;
}

.design-process ol > li  {
	font-size: 0.875em;
}

.design-process .bottom {
    padding-block: 10% 6.5em;
}

.design-process .bottom .image {
    display: none;
}

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

.featured-blog-post a {
    display: block;
    padding: 3em 1.5em 1.5em;
}

.featured-blog-post h2 {
    margin: 0 0 1em;
}

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

.certifications ul.ws-flex {
    --ws-column-count: 3;
}

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

.stats ul.ws-flex {
    --ws-column-count: 2;
}

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

body>footer  {
	padding-inline: var(--side-padding);
}

body>footer .fatFooter {
    gap: 3em var(--gap);
}

body>footer .fatFooter .icons,
body>footer .fatFooter .icons ul {
    gap: 0 var(--gap);
    grid-template-columns: subgrid;
}

body>footer .fatFooter .icons li {
    grid-column: span 2;
}

body>footer .fatFooter .search {
    grid-column: 1 / 3;
}

body>footer .fatFooter .contact-info {
    grid-column: 3 / -1;
}

body>footer .footer-bottom>* {
    grid-column: 1 / span 4;
}

body>footer .footer-bottom :is(nav, #seoFooter) {
    margin-top: .75em;
}

/* MEDIA QUERIES --------------------------- */

/* 600px */
@media (max-width: 37.5em) {
    #portfolio .grid {
        margin-right: 0;
    }

    #portfolio .stamp {
        align-items: center;
        height: auto;
        justify-content: center;
        margin-bottom: 1rem;
        padding: 2em;
        width: 100%;
    }

    #portfolio h1 {
        max-width: 100%;
    }

    #portfolio h1+p {
        margin-bottom: 0;
    }

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

    .plan-comparison thead tr>th:nth-child(1) {
        padding-bottom: 0;
    }

    .plan-comparison thead tr>th:not(:first-child) {
        padding-bottom: 1.5em;
    }

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

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

    .plan-comparison tr>:is(th, td):nth-child(3) {
        grid-column: 5 / 9;
        grid-row: 3 / 4;
    }

    .plan-comparison tbody tr td:not(:first-child) {
        padding-block: 0 1em;
    }

    .plan-comparison .icon-focus>span:first-child::before,
    .plan-comparison .icon-360>span:first-child::before {
        aspect-ratio: 1;
        content: '';
        display: block;
        height: 1.75em;
        margin-inline: auto;
    }

    .plan-comparison .icon-focus>span:first-child::before {
        background: url('/images/icons/focus.svg') no-repeat center / contain;
    }

    .plan-comparison .icon-360>span:first-child::before {
        background: url('/images/icons/360.svg') no-repeat center / contain;
    }

    .plan-comparison span.check::after,
    .plan-comparison span.dash::after {
        font-size: 1.125em;
        margin-top: .5em;
    }
    .service-list .column-1 ul {
        columns: 1;
    }
    .exposure-web-solutions .images {
        flex-direction: column;
        gap: .5em;
    }
	
	.grid-section .services-list {
		column-count: 1;
	}
	
	.grid-section .team-list li {
		grid-column: span 2;
	}

}

/* 500px */
@media(max-width: 31.25em) {
    h2 {
        font-size: 1.375em;
    }

    h3 {
        font-size: 1.3125em;
    }

    #work.web-dev h2 {
        font-size: 1.25em;
    }

    body>footer .fatFooter {
        row-gap: 2em;
    }

    body>footer .fatFooter .icons,
    body>footer .fatFooter .search,
    body>footer .fatFooter .contact-info {
        grid-column: 1 / -1;
    }

    body>footer .fatFooter .icons li {
        grid-column: span 4;
    }

    body>footer .fatFooter>div:nth-of-type(1n)>*:not(.button) {
        width: 100%;
    }

    body>footer .button {
        align-self: center;
    }

    body>footer .fatFooter label {
        text-align: left;
    }

    body>footer #email-signup a>strong {
        margin: 2.5em auto 1em;
    }
    .hiredct-form {
        padding: 1.5625rem 1.5625rem;
    }
    .partner-logos ul.ws-flex,
    .partner-logos.web-dev-landing ul.ws-flex.five {
        --ws-column-count: 2;
    }

    .partner-logos.web-dev-landing img {
        max-width: min(100%, 9rem);
    }
    .circle-section {
        padding-block: 3em;
    }

    .circle-section :is(img, .image, .video-circle) {
        margin: 0 auto 2em;
        max-width: 22em;
    }

    .circle-section.blue::before {
        height: 5em;
    }

    main .circle-section .badges {
        flex-wrap: wrap;
        justify-content: center;
    }

    main .circle-section .badges>*,
    main .circle-section .badges>*:first-child {
        max-width: calc(50% - .5em);
        width: calc(50% - .5em);
    }

    main .circle-section .badges img {
        display: block;
        margin-inline: auto;
        max-height: 6em;
        width: auto;
    }
    .engagement ul.ws-flex {
        --ws-column-count: 2;
    }

    .certifications ul.ws-flex {
        --ws-column-count: 2;
    }
    	
}

/* 400px */
@media (max-width: 400px) {
    .engagement ul.ws-flex {
        --ws-column-count: 1;
    }
	
	.grid-section .stats li,
	.grid-section .portfolio-grid:not(.partners) li {
		grid-column: span 4;
	}
	
}

/* 380px */
@media (max-width: 23.75em) {
    #mobilenav :is(span, button).menu {
        padding-right: 1em;
    }

    #mobilenav .menu>span {
        border: 0;
        clip: rect(0, 0, 0, 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
	
		
	.grid-section .team-list li {
    	grid-column: span 2;
	}	
	
	#gallery .grid-gallery li {
    	grid-column: span 4;
	}	
	
}

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