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

:root {
  --ws-gutter: 5%;

  --portfolio-column-width: 7em;
  --portfolio-column-gutter: calc(((100vw - 3rem) / 4) + 1rem);
  --ws-grid-14: .5rem  [wrap-start] repeat(2, 1fr) [wrap-end] .5rem;
}

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


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;
  position: relative;
  text-align: center;
  z-index: 4;
  display: contents;
}

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

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

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

#navContainer nav {
  display: inline;
}

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

#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;
  font-size: 1.125em;
  line-height: 1.5;
  padding: .75em 1em;
  display: block;
  text-align: left;
  width: 100%
}

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

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

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

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

#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 .column-1 {
  padding-bottom: .5em;
}

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

#mainnav .megamenu strong {
  color: rgba(255,255,255,.5);
  display: block;
  font-style: italic;
  font-size: 1em;
  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);
  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 {
  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 button.menu {
  line-height: 1.45;
  border-radius: 0;
  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);
  columns: auto;
  column-width: 13em;
}

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

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

.formTable td {
  display: block;
  width: 100%;
  padding: 0;
}

.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 {
  margin: 0 0 .75em 1em;
}

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



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

body>footer {
  font-size: 1rem;
}


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

body>footer .fatFooter>div:nth-child(1) { grid-column: 2 / 4; }
body>footer .fatFooter>div:nth-child(2) { grid-column: 2 / 3; }
body>footer .fatFooter>div:nth-child(3) { grid-column: 3 / 4; }


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




/* DASHED LINE ANIMATIONS ------------------------------ */
:is(#services, #photo, #cta) svg {
  content-visibility: hidden;
  display: none;
}



/* SHARED ------------------------------ */
.pageHeader {
  height: 5em;
}



/* HERO ------------------------------ */
#hero {
  padding-block: 3em 4em;
}

#hero h1,
.home #hero span.title {
  position: relative;
  z-index: 1;
}


/* home, /web-design/ and /web-development/ landing pages */
#hero {
  min-height: 60dvh;
}

#hero .textbox {
  padding-block: clamp(3em, 2.273em + 3.64vw, 5em) clamp(3em, 1.909em + 5.45vw, 6em);
}

#hero .textbox :is(h1, span.title) {
  font-size: clamp(1.875em, 1.41em + 2.33vw, 2.5em);
}

#hero .textbox :is(p, span.text) {
  font-size: 1.375em;
}




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

.interior-hero {
  padding-block: 3.5em;
}





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

.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 {
  columns: 2;
  column-gap: 2em;
}

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




/* MARKETING PLANS ------------------------------ /
* - Homepage ribbon 3
*/
.marketing-plans>div:not(.textbox)+div {
  margin: 3.5em 0 0;
}




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

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

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

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

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




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

#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 {
  min-width: 0;
  max-width: 26em;
  width: 100%;
}



/* HOMEPAGE > WORK (sliderr) ------------------------------ */
#work a.more {
  min-width: clamp(9em, 6em + 12.8vw, 12em)
}

#work span {
  font-size: 1.125em;
}



/* PORTFOLIO GRID ------------------------------ */
#portfolio :is(.stamp, .grid-item) {
  width: calc(50% - .5rem);
}

.creative #portfolio {
  margin: 0 0 3em;
}




/* HOMEPAGE > BRANDS ------------------------------ */
#brands {
  padding-block: 3em 2em;
  text-align: center;
}

.home #brands {
  padding-block: 3em 2em;
}

#brands.work {
  padding-block: 3em 4em;
}

#brands li {
  padding-inline: 1em;
}

#brands li:nth-child(2n+1) { grid-column: 2 / 3; }
#brands li:nth-child(2n+2) { grid-column: 3 / 4; }




/* HOMEPAGE > PHOTO ------------------------------ */
#photo {
  height: max(20em, 60vw);
}

#photo h2 {
  font-size: max(1.25em, 3.5vw);
  top: max(3em, 13vw);
}



/* 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 .contact-info {
  margin-bottom: 2em;
}

#contact.lp img {
  display: none;
}




/* HOMEPAGE > CTA ------------------------------ */

#cta .clouds {
  width: 64vw;
}

#cta img {
  position: absolute;
  right: 3.5em;
  top: max(3em, 10.5vw);
  width: clamp(5em, 3.171em + 3.9vw, 10em);
}




/* QUOTES RIBBON ------------------------------ */
#quotes {
  padding-block: 3em 3.5em;
}

#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) {
  padding: 0%;
  margin: 0;
  width: 100%;
  text-align: center;
}

#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 {
  padding: 26%;
  bottom: 2.0625rem;
}




/* 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 {
  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:last-child::after {
  aspect-ratio: 302 / 124;
  background: url('/images/design-process/center-stacked-arrow.svg') no-repeat center top / contain;
  content: '';
  inset: 100% auto auto 0%;
  position: absolute;
  width: 57.25%;
  z-index: 1;
}

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




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

/* 600px */
@media (max-width: 600px) {

  #portfolio .grid {
    margin-right: 0;
  }

  #portfolio .stamp {
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 2em;
    margin-bottom: 1rem;
    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;
    display: block;
    content: '';
    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;
  }

}



/* 500px */
@media( max-width: 31.25em ) {

  h1 { font-size: 1.625em; }
  h2 { font-size: 1.375em; }
  h3 { font-size: 1.3125em; }

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

  body>footer .fatFooter>div:nth-child(1)>ul {
  	columns: 1;
  }

  body>footer .fatFooter>div:nth-of-type(1n) {
    grid-column: wrap-start / wrap-end;
    padding-inline: 0;
  }

  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 */
  .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 (T3 service pages) ------------------------------ */

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




/* 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;
    position: absolute;
    padding: 0;
    width: 1px;
  }
}




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