:root {
  --lime: #ffff01;
}

.brand {
  align-items: center;
  display: flex;
  gap: 1px;
  width: max-content;
}

.brand img {
  display: block;
  height: 46px;
  object-fit: cover;
  width: 46px;
}

.brand .logo span {
  color: currentColor;
}

.brand .logo {
  display: inline-block;
  transform: translateY(6px);
}

.nav .brand {
  color: #ffff01;
}

.nav .brand .logo {
  color: var(--paper);
}

.nav .brand img {
  filter: brightness(0) saturate(100%) invert(97%) sepia(93%) saturate(1092%) hue-rotate(359deg) brightness(107%) contrast(107%);
}

footer .brand {
  color: var(--ink);
}

.contact {
  background-color: #ffff01;
}

.contact-whatsapp {
  align-items: center;
  background: var(--ink);
  border-radius: 999px;
  color: #ffff01;
  display: flex;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 600;
  gap: 18px;
  margin-top: 72px;
  padding: 17px 24px 18px;
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
  width: max-content;
}

.contact-whatsapp:hover {
  background: var(--paper);
  color: var(--ink);
  transform: translateY(-4px);
}

.contact-whatsapp span {
  font-size: 1.35em;
}

.contact-graphic {
  border: 0;
  border-radius: 0;
  height: clamp(140px, 17vw, 260px);
  position: absolute;
  right: 11vw;
  top: 19%;
  transform: none;
  width: clamp(140px, 17vw, 260px);
}

.contact-graphic::before {
  background: var(--ink);
  border: 0;
  border-radius: 3px 34px 34px 34px;
  content: "";
  height: 35%;
  left: 0;
  position: absolute;
  top: 8%;
  width: 70%;
}

.contact-graphic::after {
  border: 2px solid var(--ink);
  border-radius: 34px 3px 34px 34px;
  bottom: 9%;
  content: "";
  height: 43%;
  position: absolute;
  right: 0;
  width: 76%;
}

.contact-graphic span,
.contact-graphic span::before,
.contact-graphic span::after {
  background: #ffff01;
  border-radius: 50%;
  content: "";
  height: 9px;
  position: absolute;
  top: 20%;
  width: 9px;
}

.contact-graphic span { left: 14%; }
.contact-graphic span::before { left: 24px; top: 0; }
.contact-graphic span::after { left: 48px; top: 0; }

.contact-graphic i {
  background: var(--ink);
  bottom: 29%;
  font-size: 0;
  height: 2px;
  position: absolute;
  right: 13%;
  transform: none;
  width: 43%;
}

.contact-graphic i::after {
  background: var(--ink);
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: 12px;
  width: 68%;
}

.service-list a {
  grid-template-columns: 45px 1fr auto;
}

.service-list a h3 {
  margin-bottom: 13px;
}

.service-list a p {
  color: #65635e;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
  max-width: 300px;
}

/* Minimal browser-window motif for the hero. */
.hero .orb-one {
  background: transparent;
  border: 2px solid var(--coral);
  border-radius: 0;
  box-shadow: inset 0 42px 0 var(--coral);
  height: 25vw;
  mix-blend-mode: normal;
  opacity: 1;
  transform: rotate(-8deg);
  width: 31vw;
}

.hero .orb-one::before {
  background: var(--coral);
  border-radius: 50%;
  box-shadow: 16px 0 0 var(--coral), 32px 0 0 var(--coral);
  content: "";
  height: 7px;
  left: 15px;
  position: absolute;
  top: 16px;
  width: 7px;
}

.hero .orb-one::after {
  background: linear-gradient(var(--coral) 0 0) 20% 35% / 55% 2px no-repeat,
    linear-gradient(var(--coral) 0 0) 20% 52% / 38% 2px no-repeat,
    linear-gradient(var(--coral) 0 0) 20% 69% / 62% 2px no-repeat;
  content: "";
  inset: 42px 0 0;
  position: absolute;
}

.hero-title .word-3 {
  padding-left: 15vw;
  white-space: nowrap;
}

.site-showcase {
  display: grid;
  gap: 2.7vw;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-card .project-info {
  padding-bottom: 42px;
}

.site-browser {
  background: var(--paper);
  color: var(--ink);
  display: block;
  overflow: hidden;
  position: relative;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.site-browser:hover {
  transform: translateY(-8px);
}

.browser-top {
  align-items: center;
  background: #f7f5ef;
  display: grid;
  font: 9px var(--mono);
  grid-template-columns: 48px 1fr 20px;
  height: 43px;
  padding: 0 14px;
}

.browser-top b {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
}

.browser-dots,
.browser-dots::before,
.browser-dots::after {
  background: var(--ink);
  border-radius: 50%;
  content: "";
  display: block;
  height: 5px;
  position: absolute;
  width: 5px;
}

.browser-dots { position: relative; }
.browser-dots::before { left: 9px; }
.browser-dots::after { left: 18px; }

.site-screen {
  height: min(30vw, 390px);
  overflow: hidden;
  padding: 10% 9%;
  position: relative;
}

.more-screen {
  background: #222224;
  color: #ffff01;
}

.more-screen::before,
.more-screen::after {
  border: 1px solid rgba(255, 255, 1, .75);
  border-radius: 50%;
  content: "";
  height: 26vw;
  position: absolute;
  right: -9vw;
  top: 1vw;
  width: 26vw;
}

.more-screen::after {
  height: 17vw;
  right: -4vw;
  top: 5.5vw;
  width: 17vw;
}

.more-screen::before {
  display: none;
}

.more-screen::after {
  display: none;
}

.more-screen p,
.letra-screen p {
  font-size: clamp(3rem, 6.5vw, 7rem);
  font-weight: 700;
  letter-spacing: -.09em;
  line-height: .72;
  margin: 9% 0 0;
  position: relative;
  z-index: 1;
}

.more-screen em,
.letra-screen em {
  font-family: var(--serif);
  font-weight: 500;
}

.more-screen small,
.more-screen i,
.letra-screen small {
  bottom: 9%;
  font: 9px var(--mono);
  left: 9%;
  letter-spacing: .12em;
  position: absolute;
}

.more-screen i {
  left: auto;
  right: 9%;
}

.more-screen small {
  color: #fff;
}

.case-logo {
  display: block;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.more-logo {
  height: 78%;
  margin: 0 auto;
  width: 96%;
}

.letra-logo {
  margin: 9% auto 0;
  width: 88%;
}

.letra-screen {
  background: #e8e1d8;
  color: #211f1e;
}

.letra-screen em { color: var(--coral); }

.news-lines {
  border-top: 1px solid var(--ink);
  bottom: 19%;
  left: 9%;
  position: absolute;
  right: 9%;
}

.news-lines i {
  border-bottom: 1px solid rgba(23, 23, 22, .55);
  display: block;
  height: 17px;
  width: 100%;
}

.news-lines i:nth-child(2) { width: 82%; }
.news-lines i:nth-child(3) { width: 63%; }

@media (max-width: 700px) {
  .contact-graphic {
    height: 108px;
    right: 28px;
    top: 38px;
    width: 108px;
  }

  .contact-graphic span,
  .contact-graphic span::before,
  .contact-graphic span::after {
    height: 6px;
    width: 6px;
  }

  .contact-graphic span::before { left: 18px; }
  .contact-graphic span::after { left: 36px; }

  .hero-title .word-3 {
    font-size: .72em;
    padding-left: 0;
  }

  .site-showcase {
    gap: 0;
    grid-template-columns: 1fr;
  }

  .site-screen { height: 72vw; }
  .more-screen::before { height: 62vw; right: -24vw; top: 3vw; width: 62vw; }
  .more-screen::after { height: 42vw; right: -12vw; top: 14vw; width: 42vw; }
}

@media (max-width: 700px) {
  .hero .orb-one {
    box-shadow: inset 0 30px 0 var(--coral);
    height: 46vw;
    width: 56vw;
  }

  .hero .orb-one::before {
    top: 11px;
  }

  .contact-whatsapp {
    margin-top: 55px;
  }
}

@media (max-width: 700px) {
  footer .brand {
    display: none;
  }
}