/*-- variables -- */
:root {
  --white: #fff;
  --ghost: #f1f7fD;
  --gray: #b6C5CD;
  --midGray: #7994A4;
  --darkGray: #4A606D;
  --nightGray: #29363D;
  --jet: #171e22;
  --black: #080B0C;
  --accent: #C424DF;
  --pf: #F0D799;
  --teal: #24B2DF;
  --tf: #B6E095;
  --accentGreen: #57D290;
  --pinkFade: linear-gradient(135deg, var(--accent) 45%, var(--pf) 100%);
  --fadePink: linear-gradient(135deg, var(--pf) 10%, var(--accent) 60%);
  --fadeTeal: linear-gradient(135deg, var(--tf) 0%, var(--teal) 60%);
  --tealFade: linear-gradient(135deg, var(--teal) 50%, var(--tf) 100%);
  --grayFade: linear-gradient(135deg, var(--darkGray) 50%, var(--midGray) 100%);
  --letterFade: linear-gradient(110deg, var(--white) 50%, rgba(255,255,255,0.15) 65%);
  --ptfBorder: linear-gradient(170deg, var(--pf) 0%, var(--teal) 75%, var(--accent) 100%);
}

/* ---- defaults --- */

 html {
      scroll-behavior: smooth;
 }

body {
  color: var(--jet);
  padding-top: 60px;
  background: var(--white);
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  overflow-x: hidden;
}

.gap-filler {
background: var(--jet);
position: absolute;
z-index: -1;
top: 0;
left: 0; right: 0;
height: 100px;
}

/* --- dark theme --- */

.dark, .dark .page-head, .dark .menu-item, .dark footer {
  color: var(--white);
  background-color: var(--jet);
}

.dark section ul li a:hover, section ul li a:focus {
  color: var(--white);
}

.dark .cta, .dark .col button {
  color: var(--jet);
  background-color: var(--white);
}

.dark .col {
  border-color: var(--white);
}

.dark .horz-scroll .scroll ul li img {
  filter: grayscale(100%) brightness(1.2) opacity(70%) invert(100%);
}

a {
  text-decoration: none;
}

h1 {
  font-size: 9em;
  letter-spacing: -0.07em;
  line-height: 0.8em;
  margin: 0;
  padding: 16px 0;
  text-transform: uppercase;
}

h2 {
  font-size: 2.29em;
  letter-spacing: -0.04em;
}

h3 {
    font-weight: 700;
    font-size: 1.3em;
    line-height: 1em;
    letter-spacing: -0.02em;
}

h4 {
  font-size: 1.2em;
}

h5 {
  font-size: 1.2em;
}

.H-Alt {
    font-size: 2.85em;
    font-weight: 700;
    letter-spacing: -0.05em;
}

.stat-number {
    font-size: 1.5em;
    font-weight: 600;
    letter-spacing: -0.06em;
    white-space: nowrap;
}

.stat-number .roll {
    font-size: 2.4em;
    font-weight: 700;
}

p {
  line-height: 150%;
}

.g {
    color: var(--gray);
    font-weight: 300;
}

nav ul, nav ul li {
  list-style: none;
  padding: 0.5em 0;
  margin: 0;
  color: var(--midGray);
}

.hide {
  display: none;
}

section header {
  padding: 32px 0;
  text-align: center;
}

section header h2 {
  text-transform: uppercase;
  color: transparent;
  padding: 0;
  margin: 0;
  display: inline-block;
  position: relative;
  }

/* ---- gradient colors --- */

#benefits.section h2 {
    background: var(--pinkFade) text;
}
#services.section h2,
#work.section h2 {
    background: var(--fadeTeal) text;
    position: relative;
}

.fade {
    background: var(--pinkFade) text;
    color: transparent;
}

/* --- title flourish --- */
#services.section h2:before {
    content: '';
    background: url(img/snap-left.png) no-repeat top left;
    background-size: 100% auto;
    display: block;
    width: 44px;
    height: 53px;
    position: absolute;
    top: -27px;
    left: -42px;
}

#pricing.section h2,
#stats.section h2,
#faq.section h2,
#companies .section-content h2 {
    background: var(--pinkFade) text;
}


section ul li a {
  color: var(--midGray);
  transition: color 0.2s linear 0s;
}

section ul li a:hover, section ul li a:focus  {
  color: var(--jet);
}

.section {
  padding: 64px;
  position: relative;
  z-index: 0;
}

.full {
  position: relative;
  z-index: 0;
}

.fmax {
  max-width: 1000px;
  margin: 64px auto;
  position: relative;
  z-index: 0;
}

/* --- horizontal scroll --- */

.horz-scroll {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 64px;
  margin-top: 64px;
}

.horz-scroll .scroll {
  position: absolute;
  top: 0;
  left: 0;
  width: 2000px;
  height: inherit;
  transform: translate3d(0, 0, 0);
}

.horz-scroll .scroll ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 32px;
  justify-content: space-around;
  animation: horzScroll 64s linear infinite;
}

.horz-scroll .scroll ul li img {
  height: 64px;
  filter: grayscale(100%) brightness(1.2) opacity(50%);
}

@keyframes horzScroll {
  to { 
    transform: translateX(-75%);  
  }
}

/* --- split grid --- */

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

/* --- six grid --- */

.six-grid {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 64px;
}

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

.grid-item i {
    font-size: 2em;
    color: var(--darkGray);
}

.grid-item > * {
  line-height: 140%;
  margin: 0.5em 0;
}

/* --- columns --- */
.columns {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.columns div ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.columns div ul li {
  margin: 0;
  padding: 16px;
  display: flex;
  border-bottom: 1px solid var(--gray);
}

.columns div ul li i {
    padding-right: 8px;
}

.columns .col1 h4, .columns .col1 ul li i {
color: var(--accentGreen);
}

.columns .col2 h4, .columns .col2 ul li i {
color: var(--accent);
}

.columns .col3 h4, .columns .col3 ul li i {
color: var(--midGray);
}

.note {
  color: var(--midGray);
  padding: 32px 0;
}


/* ----------------- Top Nav Bar ------------------- */

.page-head {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 60px;
    background-color: var(--jet);
    color: var(--white);
    z-index: 10;
    box-shadow: 1px 0 64px rgba(0,10,25,0.1);
}

.page-head .left, .page-head .right {
    position: relative;
}

.logo, .logo:hover, .logo:visited {
    font-weight: 700;
    display: inline-block;
    padding: 12px 32px;
    color: var(--darkGray);
    white-space: nowrap;
}

.menu {
    padding: 16px 32px;
    display: flex;
}

.mobile-menu, 
.menu-open, 
.menu-close {
    display: none;
}

.menu-item {
display: inline-block;
padding: 16px;
transition: all 0.2s 0.2s linear;
font-size: 0.9rem;
background-color: inherit;
cursor: hand;
}

.menu-item, .menu-item:visited {
color: var(--white);
}

.menu-item:hover {
    background: var(--tealFade) text;
    color: transparent;
}

.menu-item.current {
    background: var(--fadePink) text;
    color: transparent;
}

.menu-item i {
font-size: 1.4em;
}

/* --- Hero --- */

#hero {
    background: var(--jet);
    color: var(--white);
    position: relative;
    z-index: 0;
}

#hero .section-content {
  text-align: center;
  max-width: 690px;
  position: relative;
  z-index: 2;
  margin: 0 auto;
}

.hp-slogan {
    font-size: 128px;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 0.8em;
    text-transform: uppercase;
    position: relative;
    z-index: 0;
    text-align: left;
    font-family: "Libre Franklin", "Poppins", sans-serif;
}

.hp-slogan .hand {
    position: absolute;
    right: 0;
    top: -69;
    background: url(img/snap-hand.png) no-repeat top left;
    background-size: 100% auto;
    width: 233px;
    height: 264px;
    z-index: 1;
    display: block;
}

.hp-slogan .letter-fade {
    display: block;
    position: relative;
    z-index: 0;
    background: var(--letterFade) text;
    color: transparent;
}

.hp-slogan .new-row {
    display: block;
    position: relative;
    z-index: 2;
    padding-left: 91px;
    word-spacing: -0.08em;
    white-space: nowrap;
}

.hp-slogan .color-fade {
    color: transparent;
    background: var(--ptfBorder) text;
    display: inline-block;
    height: inherit;
    position: relative;
    z-index: 0;
}

 .hp-slogan .color-fade:before {
    content: "SNAP";
    color: inherit;
    background: var(--pinkFade) text;
    position: absolute;
    top: 1px;
    left: 0;
    z-index: 1;
}

.h-marg p {
    font-size: 1.3em;
    padding: 8px;
}

.cta {
  border-radius: 0;
  border: 0;
  padding: 16px 24px;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 16px auto;
  display: inline-block;
  background-color: var(--jet);
  color: var(--white);
}

#hero .cta {
    background-color: var(--accent);
    color: var(--white);
    border-radius: 4px;
}

.hero-bottom-wedge {
    position: absolute;
    top:0; left:0; right: 0; bottom: 0;
    z-index: 2;
    background: url(img/hero-bottom-wedge.svg) no-repeat left bottom;
    background-size: 100% auto;
    transition: all 0.3s 0.2s ease-out;
}

/* --- Motif --- */

.motif {
    position: absolute;
    z-index: 0;
    width: 400px;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

.motif .scene-holder {
    width: 500px;
    height: 100%;
    transform: rotate(-25deg) translateX(140px);
    position: relative;
}

.motif .hider {
position: inherit;
z-index: 1;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(180deg, var(--jet) 0%, transparent 30%, transparent 70%, var(--jet) 100%);
}

.motif .scene-holder .scene {
    width: 350px;
    height: 8000px;
    background: url(img/motif.png) repeat-y left top;
    background-size: 100% auto;
    transform: translate3d(0, 0, 0) translateY(-77%);
    animation: motifScroll 200s linear infinite;
}

@keyframes motifScroll {
  0% { 
    transform: translateY(-1%);  
  }

  100% { 
    transform: translateY(-77%);  
  }
}

/* --- Graphics --- */

.gfx {
    position: absolute;
    z-index: 2;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: left top;
}

.yellow-glow {
    position: absolute;
    z-index: 1;
    top:0; left:0; right:0; bottom: 0;
    background: url(img/yellow-glow.png) no-repeat -250px 150px;
    transition: all 0.3s 0.2s ease-out;
}

.teal-glow {
    position: absolute;
    z-index: 1;
    top:0; left:0; right:0; bottom: 0;
    background: url(img/teal-glow.png) no-repeat 25% -75px;
}

.pink-glow {
    position: absolute;
    z-index: 1;
    top:0; left:0; right:0; bottom: 0;
    background: url(img/pink-glow.png) no-repeat 90% 250px;
}

.blue-green-tetris {
    z-index: 0;
    top: 60%;
    left:-25px;
    width: 103px;
    height: 116px;
    background-image: url(img/blue-green-tetris.png);
}

.line-triangle {
    z-index: 3;
    bottom: -45px;
    right: 10%;
    width: 121px;
    height: 121px;
    background-image: url(img/line-triangle.png);
}

.tictac-x {
    background-image: url(img/tictac-x.png);
    width: 114px;
    height: 136px;
    top: -80px;
    left: 30%;
    animation: slightMove 6s linear infinite;
}

.snake {
    background-image: url(img/snake.png);
    width: 102px;
    height: 110px;
    right: 8px;
    top: -82px;
}

.circle-dot {
    background-image: url(img/circle-dot.png);
    width: 112px;
    height: 119px;
    left: -51px;
    top: -38px;
    z-index: 0;
}
.circle-dot-inside {
    background-image: url(img/circle-dot.png);
    filter: blur(6px);
    width: 112px;
    height: 119px;
    left: -51px;
    top: -41px;
}

.z {
    background-image: url(img/z.png);
    width: 121px;
    height: 96px;
    left: 64px;
    bottom: 15px;
}

.purple-glow {
    background-image: url(img/purple-glow.png);
    width: 306px;
    height: 306px;
    bottom: -50px;
    left: 15px;
}

.green-glow {
    background-image: url(img/green-glow.png);
    width: 306px;
    height: 306px;
    bottom: 250px;
    left: 105px;
}

.two-halves {
    background-image: url(img/two-halves.png);
    width: 123px;
    height: 83px;
    top: -44px;
    left: 5%;
}

.turnt-square {
    background-image: url(img/turnt-square-ns.png);
    width: 76px;
    height: 76px;
    right: -44px;
    top: 200px;
}

.turnt-square-inside {
    background-image: url(img/turnt-square.png);
    width: 100px;
    height: 100px;
    right: -57px;
    top: 193px;
}

.zigzag {
    background-image: url(img/zigzag.png);
    width: 194px;
    height: 162px;
    right: 0;
    bottom: 0;
}

 .star {
    background-image: url(img/star.png);
    width: 123px;
    height: 126px;
    left: 350px;
    top: 50%;
}

.wiggle {
    background-image: url(img/wiggle.png);
    width: 83px;
    height: 124px;
    right: 34px;
    top: -67px;
}

.noodle-ns {
    background-image: url(img/noodle-ns.png);
    width: 65px;
    height: 77px;
    right: -38px;
    top: 354px;
}

.noodle {
    background-image: url(img/noodle.png);
    width: 89px;
    height: 101px;
    right: -53px;
    top: 354px;
}

.stairs {
    background-image: url(img/stairs.png);
    width: 60px;
    height: 104px;
    bottom: 160px;
    left: 42px;
}

.triangle-down {
    background-image: url(img/triangle-down.png);
    width: 134px;
    height: 135px;
    right: -63px;
    top: -150px;
}

@keyframes slightMove {
  0% { 
    transform: translateY(0px) rotate(0deg);  
  }

  50% { 
    transform: translateY(12px) rotate(6deg);  
  }
  
  100% { 
    transform: translateY(0px) rotate(0deg);  
  }
}


/* --- Summary --- */

.team-image {
    max-width: 800px;
}

/* --- Benefits --- */

#benefits {
    background-color: var(--ghost);
}

/* --- Quote --- */

#quote {
    background: url(img/benefits-bottom-shadow.svg) no-repeat left top;
    background-size: 100vw auto;
}

#quote .fmax {
    position: relative;
    z-index: 0;
}

.site-quote {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-radius: 16px;
    border: 1px solid var(--white);
    box-shadow: 0 12px 48px rgba(72,115,147,0.18);
    position: relative;
    z-index: 0;
    max-width: 1000px;
    overflow: hidden;
}

.quotes {
    display: flex;
    position: relative;
    z-index: 2;
    width: calc((100% + 128px) * 3);
    animation: scrollFade 36s linear infinite;
}

.quote-content {
    padding: 64px;
    width: 100%;
}

.quote {
    width: calc(100% - 128px);
}

quote {
    font-weight: 700;
    font-size: 1.8em;
    line-height: 1.3em;
    letter-spacing: -0.02em;
    color: var(--darkGray);
}

.author {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 32px 0 0 0;
}

.author .left i {
  color: var(--gray);
  font-size: 32px;
}

.author .right > * {
  line-height: 120%;
  margin: 0;
}

.author .right p {
  color: var(--midGray);
}

@keyframes scrollFade {
   0% {
    transform: translateX(0%);
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  33% {
    transform: translateX(0%);
    opacity: 0;
  }
  34% {
    transform: translateX(-33%);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  63% {
    opacity: 1;
  }
  66% {
    transform: translateX(-33%);
    opacity: 0;
  }
  67% {
    transform: translateX(-66%);
    opacity: 0;
  }
  68% {
    opacity: 1;
  }
  98% {
    opacity: 1;
  }
  100% {
    transform: translateX(-66%);
    opacity: 0;
  }
}

/* --- Work --- */

#work.section {
overflow: hidden;
}

#work .section-content {
    padding: 32px 0 128px 0;
}

#work .left header {
    text-align: left;
    padding: 0 0 32px 0;
}

.split-frame {
    display: flex;
    gap: 64px;
}

.split-frame .left .content {
    width: 250px;
}

.split-frame ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.split-frame ul li {
    display: block;
    padding: 8px 0;
    color: var(--gray);
}

.carousel {
    width: 2000px;
    height: 600px;
    position: relative;
    z-index: 0;
    overflow: hidden;
    clip-path: polygon(5% 0, 100% 0%, 100% 100%, 0% 100%);
}

.carousel .gallery {
    width: calc((680px + 64px) * 21);
    height: inherit;
    overflow: inherit;
    animation: slowSlide 100s linear infinite;
    display: flex;
    gap: 64px;
    background-color: transparent;
    position: relative;
    z-index: 0;
}

.carousel:after {
    content: '';
    height: 100%;
    width: 200px;
    background: linear-gradient(100deg, rgba(0,0,0,0.3) 10%, transparent 60%);
    position: absolute;
    z-index: 1;
    filter: blur(12px);
    top: 0; bottom: 0; left: 0;
}

.carousel .gallery:hover {
    animation-play-state: paused;
}

.carousel .gallery .gallery-image {
    display: inline-block;
    width: 1000px;
    height: 100%;
}

@keyframes slowSlide {
  0% { 
    transform: translateX(-90.86%);  
  }

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

.carousel img {
    width: inherit;
    height: auto;
}

/* --- Image Zoomer --- PAUSE FOR NOW */

.zoom {
    position: absolute;
    z-index: 10;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0,0,0,0.5);
    width: 100vw;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zoom .gallery .gallery-image {
    width: 100%;
    height: 100%;
    display: block;
}

/* --- Pricing --- */

.three-col {
  display: flex;
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto;
  gap: 16px;
  position: relative;
  z-index: 0;
}

.col {
  text-align: center;
  width: 309px;
  border: 1px solid var(--ghost);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: 0 12px 48px rgba(72,115,147,0.18);
  border-radius: 16px;
  padding: 32px 8px;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
 
 .tier-content {
     position: relative;
     z-index: 2;
  }

.col ul {
  list-style: none;
  margin: 0 16px;
  padding: 8px;
  text-align: left;
}

.col ul li {
  padding: 8px;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
}

.tier1 p, .tier2 p, .tier3 p {
    color: var(--midGray);
}

.tier1 ul li i {
    color: var(--accentGreen);
}

.tier1 .h-alt {
    background: var(--tealFade) text;
    color: transparent;
}

.tier1 .cta {
    background: var(--tealFade);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    display: block;
    width: 80%;
}

.tier2 .h-alt {
    background: var(--fadePink) text;
    color: transparent;
}

.tier2 .cta {
    background: var(--fadePink);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    display: block;
    width: 80%;
}

.tier3 .cta {
    background: var(--grayFade);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    display: block;
    width: 80%;
}

.tier2 ul li i {
    color: var(--accent);
}

.tier3 .h-alt {
    background: var(--grayFade) text;
    color: transparent;
}

.tier3 ul li i {
    color: var(--midGray);
}

/* --- Stat --- */

#stats {
background-color: var(--ghost);
}

.stats-group {
  display: flex;
  justify-content: space-around;
  gap: 8px;
}

.stat {
  text-align: center;
}

.stat p {
  color: var(--midGray);
}

.stat {
  display: inherit;
  flex-direction: column;
  gap: 2px;
}

.stat > * {
  padding: 0;
  margin: 0;
}

/* --- Count animation (Chromium Only) --- */

@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

.stat1, .stat2, .stat3, .stat4 {
  counter-set: num var(--num);
}

.stat1::after, .stat2::after, .stat3::after,
.stat4::after {
   content: counter(num);
}

.stats-group .stat .stat-number {
    background: var(--fadePink) text;
    color: transparent;
}

@keyframes counter {
  from {--num: 0;} to {--num: 149;}
}

@keyframes counter2 {
  from {--num: 0;} to {--num: 20;}
}

@keyframes counter3 {
  from {--num: 0;} to {--num: 95;}
}

@keyframes counter4 {
  from {--num: 0;} to {--num: 4700;}
}

/* --- FAQ --- */

.faq-icon {
  width: 20px;
  height: 20px;
}

#summary {
    background: url(img/benefits-top-wedge.svg) no-repeat right bottom;
    background-size: 100% auto;
}

#work {
    background: url(img/stat-top-wedge.svg) no-repeat left bottom;
    background-size: 100% auto;
}

#faq {
    background: url(img/footer-wedge.svg) no-repeat left bottom;
    background-size: 100% auto;
}

#pricing {
    background: url(img/stat-bottom-shadow.svg) no-repeat left top;
    background-size: 3000px auto;
}

.qa .question {
  display:flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--gray);
  cursor: pointer;
}

.qa label .fa {
  color: var(--midGray);
}

.qa .answer {
  padding: 16px 16px 16px 28px;
  display: grid;
}

.qa .answer .answer-content {
  overflow: hidden;
}

.qa [type="checkbox"]:checked ~ .answer,
.qa [type="checkbox"]:not(:checked) ~ .answer {
  transition: opacity 0.2s linear 0s, grid-template-rows 0.2s linear 0s;
}

.qa [type="checkbox"]:checked ~ .answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

.qa [type="checkbox"]:not(:checked) ~ .answer {
  opacity: 0;
  grid-template-rows: 0fr;
}

.qa [type="checkbox"]:checked ~ .question .faq-icon i {
transform: rotate(90deg);
}

.qa [type="checkbox"]:checked ~ .question .faq-icon i,
.qa [type="checkbox"]:not(:checked) ~ .question .faq-icon i {
  transition: all 0.2s 0.1s linear;
}

  /* --- page footer --- */
  
  .page-foot {
    background-color: var(--ghost);
    padding: 64px;
    position: relative;
  }

  .footer-content {
      text-align: center;
  }
  
   .footer-nav {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  
  .footer-nav h3 {
      margin-top: 0;
    }

  .footer-site-info {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    padding: 64px 0;
  }

  .footer-nav {
    justify-content: space-between;
  }

.footer-nav section {
  text-align: left;
}

.toTop {
  position: absolute;
  display: block;
  color: var(--midGray);
  width: 16px;
  height: 16px;
  bottom: 50px;
  right: 50px;
  transition: all 0.2s linear 0.2s;
}

.toTop:hover {
  transform: translateY(-5px);
}

.copyright {
  color: var(--midGray);
  font-size: 0.9em;
  padding: 8px;
}

.copyright a {
  color: var(--midGray); 
  transition: color 0.2s linear 0s;
}

.copyright a:hover, .copyright a:focus  {
  color: var(--jet);
}

/* --------- gallery images ------------- */

.gallery-image {
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
}

.gallery-image.one {
    background-image: url(img/samples/kinder.jpg);
}

.gallery-image.two {
    background-image: url(img/samples/apphchs-website.jpg);
}

.gallery-image.three {
    background-image: url(img/samples/pcsense-logo.jpg);
}

.gallery-image.four {
    background-image: url(img/samples/venado-visuals.jpg);
}

.gallery-image.five {
    background-image: url(img/samples/alf-website.jpg);
}

.gallery-image.six {
    background-image: url(img/samples/offroad-jacksonville.jpg);
}

.gallery-image.seven {
    background-image: url(img/samples/tapster.jpg);
}

.gallery-image.eight {
    background-image: url(img/samples/mein3-app.jpg);
}

.gallery-image.nine {
    background-image: url(img/samples/adventure-together.jpg);
}

.gallery-image.ten {
    background-image: url(img/samples/innercore-brand.jpg);
}

.gallery-image.eleven {
    background-image: url(img/samples/yeaicons.jpg);
}

.gallery-image.twelve {
    background-image: url(img/samples/gp-logo.jpg);
}

.gallery-image.thirteen {
    background-image: url(img/samples/vegan-valley.jpg);
}

.gallery-image.fourteen {
    background-image: url(img/samples/venado-styleguide.jpg);
}

.gallery-image.fifteen {
    background-image: url(img/samples/mein3-website.jpg);
}

.gallery-image.sixteen {
    background-image: url(img/samples/v1-logo.jpg);
}

.gallery-image.seventeen {
    background-image: url(img/samples/gp-website.jpg);
}

.gallery-image.eighteen {
    background-image: url(img/samples/avalon-paper.jpg);
}

.gallery-image.nineteen {
    background-image: url(img/samples/pcsense.jpg);
}

.gallery-image.twentyone {
    background-image: url(img/samples/kinder.jpg);
}

/* ---------- responsive --------------- */

@media only screen and (max-width: 800px) {
  
  h1 {
    font-size: 3em;
  }
  
  .section {
    padding: 16px;
  }
  
  section h2 {
    padding: 16px 0;
  }
  
  quote {
    text-align: center;
  }
  
  .site-quote {
    padding: 32px;
}
  
  .author {
    justify-content: center;
    padding: 16px 0 0 0;
  }

  .page-head, .mobile-menu, .stats-group, .columns, .three-col, .split-frame {
      flex-direction: column;
  }
  
  .split-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 0.9fr 1fr;
    gap: 0;
    padding: 16px;
    text-align: center;
    max-width: 300px;
    margin: 16px auto;
  }
  
  .six-grid {
    grid-template-area: "grid-item" "grid-item" "grid-item" "grid-item" "grid-item" "grid-item";
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr;
    max-width: 300px;
    margin: 16px auto;
  }
  
  .split-frame .left .content,
      #work header h2 {
      width: 100%;
      text-align: center;
    }
    
    .carousel {
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    box-shadow: 0;
    width: 100%;
    }
    
    .carousel:after {
        background: none;
    }
  
  .right {
      padding-bottom: 32px;
    }
  
  .menu-open {
      display: block;
      position: absolute;
      top: -55px;
      right: 18px;
    }
 
  .page-head, .menu {
      gap: 0;
    }
  
  .page-head {
    align-items: stretch;
  }
  
  .page-head .right {
    width: 100%;
  }
    
    #menuToggle:checked + .mobile-menu {
        padding: 16px 32px;
        box-shadow: 5px 96px 250px 0 rgba(0,0,0,0.15);
        display: flex;
        background-color: var(--jet);
    }
    
    #menuToggle:checked ~ .menu-close {
        display: block;
        position: absolute;
        top: -55px;
        right: 18px;
        z-index: 2;
    }
     #menuToggle:checked ~ .menu-open {
        display: none;
    }
    
    .menu {
        display: none;
    }
  
  .menu-item {
      width: 100%;
      box-sizing: border-box;
      text-align: center;
    }
  
  .three-col {
    gap: 16px;
  }
  
  .col {
    width: 80%;
    margin: 8px auto;
  }
  
  .columns {
      padding: 16px;
    }
    
  .stats-group {
      gap: 32px;
      padding: 32px;
    }
  /* --- Hero Graphics --- */
  
  #hero .section-content {
      margin: 16px auto;
      max-width: 292px;
    }
  
  .hp-slogan {
      font-size: 53px;
    }
    
  .hp-slogan .hand {
      width: 97px;
      height: 100%;
      top: -16px;
    }
    
   .hp-slogan .new-row {
       padding-left: 39px;
    }
    
    .motif {
        opacity: 25%;
    }
    
    .motif .scene-holder .scene {
        animation: none;
    }
    
/* --- Graphics --- */
  
  .blue-green-tetris {
    width: 80px;
    height: 90px;
    transition: all 0.2s 0.1s linear;
}

.line-triangle {
    width: 80px;
    height: 80px;
    transition: all 0.2s 0.1s linear;
}

.tictac-x {
    width: 67px;
    height: 78px;
    top: -40px;
    left: 10%;
}

.snake {
    width: 51px;
    height: 55px;
    right: 0;
    top: -42px;
}

.circle-dot {
    width: 112px;
    height: 119px;
    left: 1px;
    right: auto;
    top: -38px;
    z-index: 0;
}

.circle-dot-inside {
    filter: blur(6px);
    width: 112px;
    height: 119px;
    right: -24px;
    top: -41px;
}

.z {
    width: 60px;
    height: 47px;
    left: 24px;
    top: auto;
    bottom: -10px;
}

.purple-glow {
    width: 153px;
    height: 153px;
    bottom: -10px;
    left: 15px;
}

.green-glow {
    width: 153px;
    height: 153px;
    bottom: -10px;
    left: 15px;
}


.two-halves {
    width: 72px;
    height: 51px;
    top: -24px;
    left: 5%;
}

.turnt-square {
    width: 38px;
    height: 38px;
    right: -14px;
    bottom: 50px;
    top: auto;
}

.turnt-square-inside {
    width: 50px;
    height: 50px;
    right: -22px;
    bottom: 40px;
    top: auto;
}

.zigzag {
    width: 97px;
    height: 81px;
    right: 0px;
    bottom: 300px;
}

 .star {
    width: 62px;
    height: 64px;
    top: 42%;
    left: 250px;
}

.wiggle {
    width: 41px;
    height: 62px;
    right: 7px;
    top: -7px;
}

.noodle-ns {
    width: 65px;
    height: 77px;
    right: -15px;
    top: auto;
    bottom: 80px;
}

.noodle {
    width: 78px;
    height: 98px;
    right: -43px;
    top: auto;
    bottom: 48px;
}

.stairs {
    width: 30px;
    height: 50px;
    
}

.triangle-down {
    right: -10px;
    top: -84px;
    width: 67px;
    height: 68px;
}

/* --- Footer --- */
  
  .page-foot {
    padding: 32px;
  }
  
   .footer-nav {
    flex-direction: column;
     align-items: center;
  }

  .footer-site-info {
    grid-template-columns: 1fr;
  }
  
 .footer-nav section {
  text-align: center;
}

.totop {
    right: calc(50% - 8px);
    bottom: 10px;
}