/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, svg {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* TOKENS */

:root {
 
  /* COLOR */
  --color-primary: #444;
  --color-secondary: #e94f37;
  --color-text: #444;
  --color-gray: #888;
  --color-background: #f9f9f9;
  --color-box-background: #fff;

  /* CONTENT BOX */
  --border-box-size: .5px;
  --border-box-style: solid;
  --border-box-radius: 8px;
  --border-box-color: #ccc;
  --shadow-box: 0 8px 24px rgba(0,0,0,0.08);

  /* BUTTON */
  --color-button-text-hover: #e5e5e5;
  --color-button-hover: #444;
  --color-button-border: #444;
  --border-button-size: 1px;
  --border-radius-button: 4px;

  /* IMAGE */
  --border-image-radius: 8px;
  --shadow-image: drop-shadow(5px 5px 15px rgba(0,0,0,.5));

  /* TEXT */

  /* Body */
  --font-family-body: 'Inter', Arial, Helvetica, sans-serif;
  --font-size-body: 1.1rem;
  --font-weight-body: 300;
  --font-line-height-body: 1.65em;

  /* Large */
  --font-size-large: 1.25rem;
  --font-line-height-large: 1.9rem;

  /* Small */
  --font-size-small: 0.875rem;
  --font-line-height-small: 1.35rem;

  /* Body (Mobile) */
  --font-size-body-mobile: 1.2rem;

  /* Header */
  --font-family-header: 'Playfair Display', Times New Roman, serif;
  --font-weight-header: 200;

  /* H1 */
  --font-size-h1: 2.1rem;
  --line-height-h1: 2.6rem;
  /* H2 */
  --font-size-h2: 1.4rem;
  --line-height-h2: 2rem;
  /* H3 */
  --font-size-h3: 1.4rem;
  --line-height-h3: 1.45rem;

  /* STYLE */

  /* Misc */
  --border-divider-style: dotted;

  /* Menu */
  --bar-bg: #f0efdf;

/* DARK MODE */
[data-theme="dark"] {
  /*--color-bg: #121212;*/
  }
}

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--font-line-height-body);
  font-weight: var(--font-weight-body);
  color: var(--color-text);
  background: url('../img/human-anatomy.png') no-repeat var(--color-background);
  background-size: 600px;
  background-position: -120px 80px;
}
.large {
  font-size: var(--font-size-large);
  line-height: var(--font-line-height-large);
}
ol, ul {
  list-style: none;
}
/*blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}*/
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: var(--color-secondary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
strong.highlight {
  background-color: rgba(255,83,6, .2);
  font-weight: 400 !important;
}
em {
  font-style: italic;
}
.middle {
  text-align: center;
}
.right {
  text-align: right;
}

.contentBox {
  border: var(--border-box-size) var(--border-box-style) var(--border-box-color);
  border-radius: var(--border-box-radius);
  background: var(--color-box-background);
  box-shadow: var(--shadow-box);
}

.userTesting {
  margin: 0 auto;
  text-align: center;
}
.userTesting ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.userTesting li {
  /*flex-basis: auto;
  flex: 1 0 150px;*/
}
.userTesting img {
  max-width: 200px;
}
.clear {
  clear: both;
}
/* ---- RESET END ------*/

.homeGrid {
  display: grid;
  max-width: 1280px;
  min-height: calc(100vh - 188px);
  margin: 0 auto;
  padding: 4.5em 2em 3em;
  grid-template-columns: 1fr 440px;
  grid-auto-rows: max-content;
  grid-gap: 0px 120px;
  grid-template-areas:
    "main rightCol";
}

.heroGrid {
  display: grid;
  max-width: 1280px;
  min-height: calc(100vh - 188px);
  margin: 0 auto;
  padding: 4.5em 2em 3em;
  grid-template-columns: 1fr;
  grid-auto-rows: max-content;
  grid-template-areas: "main";
}

.main {
  grid-area: main;
}

.rightCol {
  grid-area: rightCol;
  padding-top: 1.5em;
}
.workGrid {
  display: grid;
  max-width: 1280px;
  min-height: calc(100vh - 188px);
  margin: 0 auto;
  padding: 4.5em 2em 3em;
  grid-template-columns: 50% 50%;
  /*grid-template-columns: 1fr 700px;*/
  grid-auto-rows: max-content;
  grid-gap: 75px 75px;
  grid-template-areas:
    "hero hero"
    "heroBlurb heroBlurb"
    "roleBoxLeft roleBoxRight"
    "outcome outcome"
    "liftCol lift"
    "origin originCol"
    "problem problemCol"
    "solutionCol solution"
    "prototype prototypeCol"
    "quoteBox quoteBox"
    "subscribe subscribe";
}
ul.workCta {
  display: flex;
  align-items: center;
  flex-direction: row;
  list-style-type: none;
  margin-top: -80px;
}
ul.workCta li:first-child {
  margin: 0 4em 0 12.5em;
}
.contentBox {
  background: var(--color-box-background);
  border: var(--border-box-size) var(--border-box-style) var(--border-box-color);
  border-radius: var(--border-box-radius);
  box-shadow: var(--shadow-box);
  padding: 1.4em;
}
.roleBoxRight {
  grid-area: roleBoxRight;
}
.roleBoxLeft {
  grid-area: roleBoxLeft;
}
/*.myRole {
  padding: .3em .3em .3em 1em;
}*/
.hero {
  grid-area: hero;
}
.heroBlurb {
  grid-area: heroBlurb;
  margin-top: -2em;
}
.heroBlurb h2 {
  padding: 0 4em;
}

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

.hero-section {
  max-width: 1280px;
  margin: 0 auto;
}

.hero-wrapper {
  background: var(--color-box-background);
  border: var(--border-box-size) var(--border-box-style) var(--border-box-color);
  border-radius: 24px;
  position: relative;
  box-shadow: var(--shadow-box);
}

.stats-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 72px;
  align-items: start;
  padding: 28px 70px 0px 70px;
}

.stats-left,
.stats-right {
  display: flex;
  flex-direction: column;
  gap: 32px;
  text-align: center;
}

.stat-item {
  width: 100%;
  margin: 0 auto;
  padding-bottom: 32px;
}

.stats-left .stat-item:first-child,
.stats-right .stat-item:first-child {
  border-bottom: var(--border-box-size) var(--border-box-style) var(--border-box-color);
}

.stat-number {
  font-family: var(--font-family-body);
  font-size: 5rem;
  font-weight: 700;
  color: var(--color-secondary);
  line-height: 1;
}

.stat-label {
  font-family: var(--font-family-body);
  font-size: var(--font-size-large);
  color: var(--color-primary);
  margin-bottom: 16px;
}

.stat-description {
  font-family: var(--font-family-body);
  font-size: var(--font-size-small);
  color: var(--color-gray);
  line-height: var(--font-line-height-body);
}

.center-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  margin-top: -52px;
}

.image-circle {
  width: 408px;
  height: 408px;
  flex-shrink: 0;
  position: relative;
}

.image-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tagline {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  color: var(--color-primary);
  text-align: center;
  margin: 0;
}

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

/* ---- BUTTON START -----*/
a.animated-button:link, a.animated-button:visited {
  position: relative;
  display: block;
  padding: .7em;
  border-radius: var(--border-radius-button);
  font-size: var(--font-size-body);
  color: var(--color-primary);
  text-decoration: none;
  overflow: hidden;
  text-align: center;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
  content: "";
  position: absolute;
  height: 0%;
  left: 50%;
  top: 50%;
  width: 150%;
  z-index: -1;
  -webkit-transition: all 0.75s ease 0s;
  -moz-transition: all 0.75s ease 0s;
  -o-transition: all 0.75s ease 0s;
  transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
  color: var(--color-button-text-hover);
  text-shadow: none;
  border: var(--border-button-size) var(--border-box-style) var(--border-box-color);
  background: var(--color-button-hover);
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
  height: 450%;
}
a.animated-button.victoria-one {
  border: var(--border-button-size) var(--border-box-style) var(--color-button-border);
  font-size: var(--font-size-body);
  padding: .7em .9em;
}
a.animated-button.victoria-one:after {
  background: var(--color-button-hover);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}
a.portfolioButt {
  max-width: 10em;
}

/* ---- Button End -----*/

.subscribe {
  grid-area: subscribe;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}
.quoteBox {
  grid-area: quoteBox;
  border-top: 1px dotted #ccc;
  border-bottom: 1px dotted #ccc;
  padding: 1.25em 0 .75em;
}
.origin {
  grid-area: origin;
}
.originCol {
  grid-area: originCol;
}
.prototype {
  grid-area: prototype;
}
.prototypeCol {
  grid-area: prototypeCol;
}
.problem {
  grid-area: problem;
}
.problemCol {
  grid-area: problemCol;
}
.solution {
  grid-area: solution;
}
.solutionCol {
  grid-area: solutionCol;
}
.outcome {
  grid-area: outcome;
}
/*.outcomeCol {
  grid-area: outcomeCol;
}*/
.lift {
  grid-area: lift;
}
.liftCol {
  grid-area: liftCol;
}
.lift ul {
  list-style: disc;
  padding-left: 1em;
}
.workGrid img {
  border-radius: var(--border-image-radius);
}
img.imgShadow {
  -webkit-filter: var(--shadow-image);
  filter: var(--shadow-image);
}
header {
  width: 100%;
  position: fixed;
  z-index: 5;
  background: url('../img/stay-human-bg.png') rgba(0,0,0, .9) center center no-repeat;
  background-size: 100% 100%;
}
header .hfContainer {
  height: 50px !important;
}
.logo {
  max-width: 260px;
  height: auto;
  display: block;
}
.logoNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logoNav li:first-child {
  position: relative;
  z-index: 4;
}
.title {
  font-family: var(--font-family-body);
  color: rgba(255,255,255,.25);
  font-weight: 200;
  font-size: 1.3em;
  letter-spacing: .18rem;
  text-transform: uppercase;
/*  mix-blend-mode: overlay;*/
}
footer {
  width: 100%;
  background: url('../img/stay-human-bg.png') rgba(0,0,0, .9
  ) center center no-repeat;
  background-size: 100% 100%;
  color: rgba(255,255,255,.25);
  padding: .5em 0;
}
.footerText {
  min-width: 500px;
  font-size: .8rem;
  line-height: 1.3rem;
  font-weight: 300;
  color: rgba(255,255,255,.5);
  text-align: right;
}
.footerText img {
  display: inline-block;
  max-width: 12px;
}
ul.footerContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
footer ul .socialCol {
  display: flex;
  justify-content: left;
  align-items: center;
  flex-direction: row;
}
footer ul .socialCol li {
  margin-right: 1.5em;
  height: 30px;
}
.socialIcon {
  fill: #e85037;
  /*fill: rgba(233,79,55,.8);*/
}

/* Sliding Underline Nav */

nav {
    font-family: var(--font-family-body);
    font-weight: 300;
    position: relative;
}
nav .line {
    height: 2px;
    position: absolute;
    bottom: 0;
    /*margin: 4px 0 0 0;*/
    background: var(--color-secondary);
}
nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
}
nav ul li {
    margin: 0 40px 0 0;*/
    opacity: .4;
    margin-right: 1.5em;
    font-size: 1.12rem;
    color: rgba(255,255,255,.25);
    transition: all 0.4s ease;
}
/*nav ul li:hover {
    opacity: .7;
}*/
nav ul li a.active {
    color: var(--color-secondary);
}
nav ul li:last-child {
    margin-right: 0;
}
nav ul li a {
    text-decoration: none;
    color: #fff;
    display: block;
}

/* Mobile Hamburger Menu */
.hamburger-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  display: none; /* Hidden by default for larger screens */
  cursor: pointer;
}
.hamburger-menu .menu-icon {
  transform: scale(1.1);
}

.menu-icon {
  position: relative;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
.menu-icon .menu-icon__cheeckbox {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  z-index: 2;
  -webkit-touch-callout: none;
  position: absolute;
  opacity: 0;
}
.menu-icon div {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 22px;
  height: 12px;
}
.menu-icon span {
  position: absolute;
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--bar-bg, #000);
  border-radius: 1px;
  transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);
}
.menu-icon span:first-of-type {
  top: 0;
}
.menu-icon span:last-of-type {
  bottom: 0;
}
.menu-icon.active span:first-of-type,
.menu-icon .menu-icon__cheeckbox:checked + div span:first-of-type {
  transform: rotate(45deg);
  top: 5px;
}
.menu-icon.active span:last-of-type,
.menu-icon .menu-icon__cheeckbox:checked + div span:last-of-type {
  transform: rotate(-45deg);
  bottom: 5px;
}
.menu-icon.active:hover span:first-of-type, .menu-icon.active:hover span:last-of-type, .menu-icon:hover .menu-icon__cheeckbox:checked + div span:first-of-type, .menu-icon:hover .menu-icon__cheeckbox:checked + div span:last-of-type {
  width: 24px;
}

.hfContainer {
  max-width: 1280px;
  padding: 4px 2em 0;
  margin: 0 auto;
}
.accent {
  color: #999;
}
blockquote {
  /*font-family: 'Playfair Display', Georgia, serif;*/
  font-style: italic;
  text-align: center;
  font-size: .9em;
  line-height: 1.65em;
}
.rightCol blockquote {
  border-left: 1px dotted #ccc;
  border-top: none;
  padding-left: 1.7em;
}
.quoteBox blockquote {
  padding: 3em 8em 1em;
  /*border-top: 1px dotted #ccc;*/
}
blockquote::before {
  content: '“';
  font-family: var(--font-family-header);
  font-weight: 500;
  font-style: italic;
  font-size: 6.5em;
  color: var(--color-gray);
  display: block;
}
.blurbTitle {
  font-style: italic;
  font-size: .9em;
  line-height: 1.4em;
  display: block;
  margin-top: -.2em;
  color: var(--color-gray);
}
.blurbTitle.textRight {
  text-align: center;
  margin-top: 0;
}
blockquote img {
  -webkit-clip-path: circle(36px at center);
  clip-path: circle(36px at center);
  margin: .75em auto;
  display: block;
}
h1 {
  font-family: var(--font-family-header);
  font-weight: var(--font-weight-header);
  font-size: var(--font-size-h1);
  color: var(--color-text);
  line-height: var(--line-height-h1);
}
h2 {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-header);
  font-size: var(--font-size-h2);
  color: var(--color-gray);
  line-height: var(--line-height-h2);
  margin: .5em 0;
}
h3 {
  font-family: var(--font-family-header);
  font-weight: var(--font-weight-header);
  font-size: var(--font-size-h3);
  color: var(--color-text);
  line-height: var(--line-height-h3);
}
/*img.profile {
  -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 20%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 20%);
  max-width: 600px;
}*/
img.profile {
  max-width: 500px;
  width: 100%;
  /*clip-path: circle(48% at 50% 50%);*/
  /*clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);*/
  /*clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
  max-width: 500px;*/
}
strong {
  font-weight: 700;
}
.emphasis {
  font-size: 1.2em;
}
figcaption {
  font-size: .8em;
  font-style: italic;
  color: var(--color-gray);
  margin: 0 auto;
  text-align: center;
  max-width: 60%;
  line-height: 1.4em;
}

/* ----- FORM ----- */

form label {
  font-size: var(--font-size-small);
}

input[type=checkbox] {
  max-height: 50px !important;
  margin: 0 !important;
}
input[type=text], textarea, #mc_embed_signup .mc-field-group input {
  min-width: 85%;
  padding: .7em;
  border: 0;
  -webkit-border-radius:0; 
  border-radius:0;
  color: var(--color-text);
  border-bottom: 1px solid #333;
  border-top: .5px solid #666;
  box-shadow: none;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  margin-bottom: .8rem;
  background: rgba(255,255,255,.5);
}
textarea {
  resize: none;
}
input[type=text]:focus, textarea:focus, #mc_embed_signup .mc-field-group input:focus {
  border: 0;
  border-bottom: 2px solid #122B3E;
  border-top: .5px solid #666;
  background: rgba(255,255,255,1);
  outline: none;
}
input::placeholder, textarea::placeholder, #mc_embed_signup .mc-field-group input::placeholder {
  color: #aaa;
}
input[type=submit], input[type=submit]:visited, input[type=submit]:active {
  background: var(--color-box-background);
  border-radius: var(--border-radius-button);
  border: var(--border-button-size) var(--border-box-style) var(--color-button-border);
  padding: .7em;
  margin-top: .8rem;
  font-size: var(--font-size-body);
  color: var(--color-primary);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
  -webkit-transition: all 0.75s ease 0s;
  -moz-transition: all 0.75s ease 0s;
  -o-transition: all 0.75s ease 0s;
  transition: all 0.75s ease 0s;
}
input[type=submit]:hover {
  color: var(--color-button-text-hover);
  background: var(--color-button-hover);
  border: var(--border-button-size) var(--border-box-style) var(--color-button-border);
  cursor: pointer;
}
input[type=submit]:focus {
  border: var(--border-button-size) inset var(--color-background);
  border: var(--border-button-size) var(--border-box-style) var(--color-button-border);
}
#mc_embed_signup .mc-field-group input {
  margin-bottom: 0 !important;
}
#thankYou, #thankYou img {
  width: 100%;
  height: auto;
}

/*----- FORM VALIDATION --------*/

.form-error {
  border-top: .5px solid var(--color-secondary) !important;
  border-bottom: 1px solid var(--color-secondary) !important;
  background-color: rgba(233, 79, 55, 0.1) !important;
}
input[type=text].form-error:focus, textarea.form-error:focus {
  border-bottom: 2px solid var(--color-secondary) !important;
}
input.form-error::placeholder, textarea.form-error::placeholder {
  color: rgba(233,79,55, .8);
}

/* Optional: Add a subtle animation when error appears */
.form-error {
  animation: shake 0.3s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Validation message styling */
#validation-message {
  background-color: rgba(233, 79, 55, 0.1);
  border-left: 4px solid var(--color-secondary);
  color: var(--color-secondary);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: var(--font-size-small);
  line-height: 1.5;
  max-width: 83%;
}

/*------MAILCHIMP----------*/

#mc_embed_signup {
  padding: .25em;
  margin-top: 1.75em;
}
body.workPage #mc_embed_signup {
  margin-top: 0;
}
.mce_inline_error {
  background: inherit;
}
.subscribeForm {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 1.5em;
}
#mc_embed_signup input[type=submit] {
  margin: 0 0 0 .35em;
}
#mc_embed_signup p.small {
  font-size: .75em;
  line-height: 1.4em;
  color: #666;
}
/*#mc_embed_signup_scroll p:first-child {
  font-family: 'Playfair Display', serif;
  color: #0d273b;
  font-size: 1.2em;
}*/
iframe #rc-anchor-container .rc-anchor-light {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* MC Provided */

/* MailChimp Form Embed Code - Classic - 12/17/2015 v10.7 */
 #mc_embed_signup form {
    display:block;
     position:relative;
     text-align:left;
     margin: 20px
}
 #mc_embed_signup h2 {
    font-weight:bold;
     padding:0;
     margin:15px 0;
     font-size:1.4em;
}
 #mc_embed_signup .button {
    clear:both;
     background-color: var(--color-box-background);
     border: 0 none;
     border-radius: var(--border-radius-button);
     transition: all 0.23s ease-in-out 0s;
     color: #FFFFFF;
     cursor: pointer;
     display: inline-block;
     font-size:15px;
     font-weight: normal;
     height: 32px;
     line-height: 32px;
     margin: 0 5px 10px 0;
     padding: 0 22px;
     text-align: center;
     text-decoration: none;
     vertical-align: top;
     white-space: nowrap;
     width: fit-content;
     width: -moz-fit-content;
}
 #mc_embed_signup .button:hover {
    background-color:#333;
}
 #mc_embed_signup .small-meta {
    font-size: 11px;
}
 #mc_embed_signup .nowrap {
    white-space:nowrap;
}
 #mc_embed_signup .size1of2 {
    clear:none;
     float:left;
     display:inline-block;
     width:46%;
     margin-right:4%;
}
 * html #mc_embed_signup .size1of2 {
    margin-right:2%;
    /* Fix for IE6 double margins. */
}
 #mc_embed_signup .mc-field-group label {
    display:block;
     margin-bottom:3px;
}
/* Input Form */
 #mc_embed_signup .mc-field-group input {
    padding: .7em;
    /*padding-inline: 0;
    padding-block: 0;*/
    font-size: var(--font-size-body);
}
/* Input Form */
 #mc_embed_signup #mce-success-response {
  font-size: .8em;
  line-height: 1.5em;
  font-weight: normal;
  padding: .25 0 1em;
}
/* Lloyd Christmas gif */
#successImg {
  max-width: 440px;
  margin: 0 auto;
}
#successImg img {
  width: 100%;
  height: auto;
}
 #mc_embed_signup div#mce-responses {
    float:left;
     top:-1.4em;
     padding:0em .5em 0em .5em;
     overflow:hidden;
     width:90%;
     margin: 0 5%;
     clear: both;
}
 #mc_embed_signup div.response {
     margin:1em auto;
     padding:1em .5em .5em 0;
     top:-1.5em;
     color: #666;
     line-height: 1.5em;
     font-size: .8em;
     z-index:1;
     width:80%;
}
 #mc_embed_signup #mce-error-response {
    display:none;
}
 #mc_embed_signup #mce-success-response {
    color:#529214;
     display:none;
}
 #mc_embed_signup label.error {
    display:block;
     float:none;
     width:auto;
     margin-left:1.05em;
     text-align:left;
     padding:.5em 0;
}
 #mc_embed_signup .helper_text {
    color: #8d8985;
     margin-top: 2px;
     display: inline-block;
     padding: 3px;
     background-color: rgba(255,255,255,0.85);
     -webkit-border-radius: var(--border-radius-box);
     -moz-border-radius: var(--border-radius-box);
     border-radius: var(--border-radius-box);
     font-size: 14px;
     font-weight: normal;
     z-index: 1;
}
 #mc_embed_signup #num-subscribers {
    font-size:1.1em;
}
 #mc_embed_signup #num-subscribers span {
    padding:.5em;
     border:1px solid #ccc;
     margin-right:.5em;
     font-weight:bold;
}
 #mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {
    display:inline-block;
     padding:3px;
     background-color:rgba(255,255,255,0.85);
     -webkit-border-radius: var(--border-radius-box);
     -moz-border-radius: var(--border-radius-box);
     border-radius: var(--border-radius-box);
     font-size:14px;
     font-weight:normal;
     z-index:1;
     color:#e85c41;
     text-indent: 4%;
     display: none !important;
}
 #mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error {
    border:2px solid red;
     border-radius: 0;
}

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

    @media only screen  
      and (max-width: 1300px) {

      .hero-wrapper {
        margin-top: 0;
        padding-top: 150px;
      }

      .stats-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: start;
      }

      .center-image {
        grid-column: 1 / -1;
        order: 1;
        margin-top: -200px;
      }

      .image-circle {
        width: 380px;
        height: 380px;
      }

      .tagline {
        grid-column: 1 / -1;
        order: 2;
        margin-bottom: 20px;
      }

      .stats-left,
      .stats-right {
        display: contents;
      }

      .stats-left .stat-item:nth-child(1) {
        order: 3;
        grid-column: 1;
      }

      .stats-right .stat-item:nth-child(1) {
        order: 4;
        grid-column: 2;
      }

      .stats-left .stat-item:nth-child(2) {
        order: 5;
        grid-column: 1;
      }

      .stats-right .stat-item:nth-child(2) {
        order: 6;
        grid-column: 2;
      }

      .stats-left .stat-item:first-child,
      .stats-right .stat-item:first-child {
        padding-bottom: 40px;
        border-bottom: var(--border-box-size) var(--border-box-style) var(--border-box-color);
      }

      .stats-left .stat-item:last-child,
      .stats-right .stat-item:last-child {
        border-bottom: none;
      }

      .stat-number {
        font-size: 4.8rem;
      }

      .stat-label {
        font-size: 1.125rem;
      }

      .stat-description {
        font-size: 0.9375rem;
      }

      .tagline {
        font-size: 1rem;
      }

      ul.workCta {
        flex-direction: column;
        margin-top: -90px;
      }
      ul.workCta li:first-child {
        margin: 0;
        margin-bottom: 1.2em;
      }
      nav {
        display: block;
      }
      .workGrid {
      grid-template-columns: minmax(320px, 1fr);
      grid-template-areas:
        "hero hero"
        "heroBlurb heroBlurb"
        "roleBoxLeft roleBoxRight"
        "outcome outcome"
        "liftCol liftCol"
        "lift lift"
        "problemCol problemCol"
        "problem problem"
        "solutionCol solutionCol"
        "solution solution"
        "prototypeCol prototypeCol"
        "prototype prototype"
        "quoteBox quoteBox"
        "subscribe subscribe";
      padding: 4em 1.5em 0em;
      grid-gap: 50px 75px;
    }
    #mc_embed_signup {
      margin-bottom: 2.5em;
    }
  }

/* ----- Hide title -----*/
@media only screen  
  and (max-width: 1190px) {

    .title {
      display: none;
    }

    .heroGrid {
      grid-template-columns: minmax(320px, 1fr);
      grid-template-areas:
        "main";
      padding: 4em 1.5em 2em;
    }
    .hero-wrapper {
      margin-top: 0;
      padding-top: 150px;
      padding-bottom: 40px;
    }
}

@media only screen  
  and (max-width: 984px) {

    body {
        background-size: 60%;
        background-position: -100px 80px;
      }
  /*.homeGrid {
    grid-template-columns: minmax(320px, 1fr);
    grid-template-areas:
      "main"
      "rightCol";
    padding: 4em 1.5em 2em;
  }*/

    /* ----- Hero Start -----*/

    .stats-container {
      display: flex;
      flex-direction: column;
      gap: 30px;
      align-items: center;
    }

    .stats-left,
    .stats-right {
      width: 100%;
      gap: 30px;
    }

    .stats-left .stat-item:first-child, .stats-right .stat-item:first-child, .stats-left .stat-item:last-child {
      padding-bottom: 30px;
      border-bottom: var(--border-box-size) var(--border-box-style) var(--border-box-color);
    }
    .stats-right .stat-item:last-child {
      border-bottom: none;
      padding-bottom: 0 !important;
    }

    .center-image {
      order: 1;
      margin-top: -200px;
    }

    .image-circle {
      width: 300px;
      height: 300px;
    }

    .tagline {
      order: 2;
    }

    .stats-left {
      order: 3;
    }

    .stats-right {
      order: 4;
    }

    .stat-number {
      font-size: 4rem;
    }

    .stat-label {
      font-size: 1.0625rem;
    }

    .stat-description {
      font-size: var(--font-size-small);
    }

    .tagline {
      font-size: 0.9375rem;
      line-height: 1.5rem;
    }

  /* ----- Hero End -----*/

    footer .hfContainer {
      padding: 0 2em;
    }
    .hamburger-menu {
        display: block; /* Show on mobile screens */
        position: relative;
        z-index: 2;
      }
    #myLinks {
      display: none;
    }
    .logoNav {
      align-items: normal;
    }
    nav {
      font-size: 1.3em;
      line-height: 2em;
      position: absolute;
      left: 0;
      width: 100%;
      height: 100vh;
      /*position: fixed;*/
      z-index: 2;
      background: url('../img/stay-human-bg.png') #181818 center center no-repeat;
      background-size: 100% 100%;
      }
    nav ul {
      flex-direction: column;
      align-items: center;
      margin-top: 3.5em;
    }
    nav ul li {
      margin-right: 0;
    }
    nav ul li:last-child {
      margin-left: 0;
    }
    ul.workCta {
        margin-top: -70px;
      }
    .blurbTitle.textRight {
      text-align: center;
    }
    .title {
      display: none;
    }
    .homeGrid {
      grid-template-columns: minmax(320px, 1fr);
      grid-template-areas:
        "main"
        "rightCol"
    }
    .workGrid {
      grid-template-columns: minmax(320px, 1fr);
      grid-template-areas:
        "hero"
        "heroBlurb"
        "roleBoxLeft"
        "roleBoxRight"
        "outcome"
        "liftCol"
        "lift"
        "problemCol"
        "problem"
        "solutionCol"
        "solution"
        "prototypeCol"
        "prototype"
        "quoteBox"
        "subscribe";
      padding: 4em 1.5em 0em;
      grid-gap: 50px 75px;
    }
    .origin figure {
      width: 100%;
      padding: 0;
    }
    .quoteBox blockquote {
      padding: 2em 0 0;
    }
    .rightCol {
      text-align: center;
      margin-top: 3em;
      padding-top: 3em;
      border-top: var(--border-box-size) var(--border-box-style) var(--border-box-color);
    }
    .footerText {
      text-align: center;
      font-size: .7rem;
    }
    blockquote {
      border-left: none;
      padding-left: 0 !important;
      border-left: 0 !important;
      border-top: 1px dotted #ccc;
      padding-top: 3em;
    }
    body.contactPage blockquote {
      padding: 0;
      border: 0;
    }
    body.workPage blockquote {
      border: 0;
    }

    .heroBlurb {
      margin-top: -.9em;
    }
    .heroBlurb h2 {
      font-size: 1.1em;
    }
    figcaption {
      max-width: 90%;
    }
    footer {
      width: 100%;
      padding: .5em 0;
    }
    footer ul .footerContent {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
    }
    footer ul .socialCol {
      display: flex;
      justify-content: left;
      align-items: center;
      flex-direction: row;
    }
    footer ul .socialCol li {
      margin-right: 1.5em;
      height: 30px;
    }
    .footerText {
      font-size: .7em;
      color: rgba(255,255,255,.5);
      line-height: 1.3em;
      text-align: center;
    }
    .footerText img {
      display: inline-block;
      max-width: 12px;
    }
    #mc_embed_signup_scroll {
      text-align: center;
    }
    #mc_embed_signup {
      margin-bottom: 2.5em;
    }
    .subscribeForm {
      flex-direction: column;
      justify-content: center;
    }
    #mc_embed_signup input[type=submit] {
    margin: .5em 0 0 .35em;
    }
  }

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

@media only screen 
  and (min-width: 415px)
  and (max-width: 784px) {

    ul.workCta {
      margin-top: -30px;
    }
  .logoNav {
    flex-direction: row;
  }
  .workGrid, .homeGrid {
    padding-top: 4em;
  }
  body.contactPage blockquote {
    padding: 0;
    border: 0;
  }
  .heroBlurb h2 {
    padding: 0;
  }
  body {
    font-size: var(--font-size-body-mobile);
  }
  nav {
    padding: 0;
    margin: 0 auto;
  }
  nav ul {
    justify-content: center;
  }
  /*nav ul li {
    margin-left: 1em;
  }
  nav ul li:first-child {
    margin-left: 0;
  }*/
/*  #myLinks {
    display: block;
  }*/
  a.animated-button.victoria-one {
    padding: .5em .7em;
  }
  header {
    text-align: center;
  }
  input[type=text], textarea {
  min-width: 92%;
  }
  .title {
    display: none;
  }
  ul.footerContent {
    flex-direction: column;
  }
  ul.socialCol {
    padding-bottom: 1em;
    justify-content: center;
  }
  ul.socialCol li:last-child {
    margin-right: 0;
  }
  #mc_embed_signup_scroll {
    text-align: center;
  }
  #mc_embed_signup {
    margin-bottom: 2.5em;
  }
  .subscribeForm {
    flex-direction: column;
    justify-content: center;
  }
}

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

@media only screen 
  and (max-width: 414px) {

    /*----- Hero Start -----*/

    .hero-wrapper {
      padding-top: 130px;
    }

    .center-image {
      margin-top: -154px;
    }

    .image-circle {
      width: 220px;
      height: 220px;
    }

    .stat-number {
      font-size: 3rem;
    }

    .stat-label {
      font-size: var(--font-size-body);
    }

    .stat-description {
      font-size: 0.8125rem;
    }

    .tagline {
      font-size: var(--font-size-small);
    }

    /*----- Hero End -----*/

      ul.workCta {
        margin-top: 0;
      }
    .homeGrid, .workGrid {
      grid-gap: 30px 75px;
      padding: 7em 1em .75em;
    }
    .rightCol {
      margin-top: 3em;
      padding-top: 3em;
      border-top: 1px dotted #ccc;
    }
    .logoNav {
      flex-direction: column;
    }
    .quoteBox {
      padding-bottom: .25em;
    }
    h1 {
      font-size: 1.7em;
    }
    .heroBlurb h2 {
      padding: 0;
    }
    nav {
      width: 100%;
      margin-top: -6px;
    }
    nav ul {
      display: block;
      justify-content: center;
    }
    nav ul li, footer nav ul li {
      display: inline-block;
      margin-left: 0;
      font-size: 1em;
    }
    a.animated-button.victoria-one {
      padding: .6em;
    }
    .logo {
      margin-top: 6px;
      max-width: 90%;
      margin-right: 0;
    }
    .grid {
      padding-top: 4em;
    }
    .hfContainer {
      padding: .25em 1em !important;
      text-align: center;
    }
    .footerText {
      text-align: center;
      margin-bottom: .75em;
      font-size: .65em;
    }
    footer ul .footerContent {
      padding-bottom: 1em;
    }
    input[type=text], textarea {
    min-width: 90%;
    }
    ul.footerContent {
        flex-direction: column;
    }
    ul.socialCol {
      padding-bottom: 1em;
      justify-content: center;
    }
    ul.socialCol li:last-child {
      margin-right: 0;
    }
    #mc_embed_signup_scroll {
      text-align: center;
    }
    #mc_embed_signup {
      margin-bottom: 2.5em;
    }
    .subscribeForm {
      flex-direction: column;
      justify-content: center;
    }
  }