body {

  font-size: 17px;

}

.section-label {

  font-size: 13px;

}

.hero-copy,

.intro-copy p,

.services-head > p,

.projects-head > p,

.contact-main > p:not(.section-label) {

  font-size: 19px;

}

.button,

.text-link {

  font-size: 14px;

}

.service-card > p {

  font-size: 17px;

}

.service-card li {

  font-size: 16px;

}

.project-overlay p {

  font-size: 13px;

}

.client-line span {

  font-size: 12px;

}

.client-line b {

  font-size: 14px;

}

.why-list p {

  font-size: 16px;

}

.contact-details a,

.contact-details p {

  font-size: 17px;

}

.intro {

  position: relative;

  overflow: hidden;

  grid-template-columns: 1.12fr 0.88fr;

  grid-template-rows: auto auto;

  row-gap: 44px;

  padding-top: 105px;

  padding-bottom: 82px;

}

.intro:before {

  content: "";

  position: absolute;

  width: 500px;

  height: 500px;

  border-radius: 50%;

  left: -320px;

  bottom: -340px;

  border: 1px solid rgba(23, 62, 111, 0.14);

  box-shadow:

    0 0 0 65px rgba(23, 62, 111, 0.025),

    0 0 0 130px rgba(189, 213, 74, 0.025);

  animation: introOrbit 14s ease-in-out infinite;

}

.intro:after {

  content: "";

  position: absolute;

  right: -12%;

  top: -30%;

  width: 52%;

  height: 110%;

  background: radial-gradient(

    ellipse,

    rgba(23, 62, 111, 0.09),

    transparent 67%

  );

  animation: introGlow 9s ease-in-out infinite;

}

.intro-title,

.intro-copy,

.credential-row {

  position: relative;

  z-index: 2;

}

.intro-title h2 span {

  position: relative;

}

.intro-title h2 span:after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: -10px;

  height: 2px;

  background: linear-gradient(90deg, #bdd54a, transparent);

  transform-origin: left;

  animation: accentPulse 3s ease-in-out infinite;

}

.intro-copy {

  border-left: 1px solid rgba(23, 62, 111, 0.2);

  padding: 8px 0 0 42px;

}

.intro-copy p {

  font-size: 16px;

  line-height: 1.65;

}

.intro-lead {

  font-size: 18px !important;

  color: #22384f !important;

}

.credential-row {

  grid-column: 1/-1;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  border-top: 1px solid rgba(23, 62, 111, 0.22);

  border-bottom: 1px solid rgba(23, 62, 111, 0.22);

}

.credential-row article {

  padding: 22px 28px;

  display: flex;

  align-items: center;

  gap: 18px;

  transition:

    background 0.35s ease,

    transform 0.35s ease;

}

.credential-row article + article {

  border-left: 1px solid rgba(23, 62, 111, 0.18);

}

.credential-row article:hover {

  background: rgba(255, 255, 255, 0.62);

  transform: translateY(-5px);

}

.credential-row strong {

  font-family: Georgia, serif;

  color: #173e6f;

  font-size: 29px;

}

.credential-row span {

  text-transform: uppercase;

  letter-spacing: 1.3px;

  font-size: 12px;

  color: #657383;

  font-weight: 700;

}

.reveal-item {

  opacity: 0.08;

  will-change: transform, opacity;

  transition:

    opacity 1.15s cubic-bezier(0.22, 0.7, 0.15, 1),

    transform 1.35s cubic-bezier(0.22, 0.7, 0.15, 1);

}

.intro-title.reveal-item {

  transform: translate3d(-52vw, 0, 0);

}

.intro-copy.reveal-item {

  transform: translate3d(52vw, 0, 0);

}

.credential-row.reveal-item {

  transform: translate3d(0, 140px, 0);

}

.intro.is-visible .reveal-item {

  opacity: 1;

  transform: translate3d(0, 0, 0);

}

.intro.is-visible .intro-copy {

  transition-delay: 0.18s;

}

.intro.is-visible .credential-row {

  transition-delay: 0.38s;

}

@keyframes introOrbit {

  0%,

  100% {

    transform: translate3d(0, 0, 0) rotate(0);

  }

  50% {

    transform: translate3d(30px, -25px, 0) rotate(8deg);

  }

}

@keyframes introGlow {

  0%,

  100% {

    opacity: 0.4;

    transform: translateX(0);

  }

  50% {

    opacity: 1;

    transform: translateX(-35px);

  }

}

@keyframes accentPulse {

  0%,

  100% {

    transform: scaleX(0.38);

    opacity: 0.55;

  }

  50% {

    transform: scaleX(1);

    opacity: 1;

  }

}

@media (max-width: 800px) {

  body {

    font-size: 16px;

  }

  .hero-copy,

  .services-head > p,

  .projects-head > p {

    font-size: 17px;

  }

  .intro-copy p {

    font-size: 15px;

  }

  .intro {

    grid-template-rows: auto;

    padding-top: 72px;

    padding-bottom: 62px;

    row-gap: 32px;

  }

  .intro-copy {

    border-left: 0;

    padding: 0;

  }

  .credential-row {

    grid-template-columns: 1fr;

  }

  .credential-row article + article {

    border-left: 0;

    border-top: 1px solid rgba(23, 62, 111, 0.18);

  }

  .credential-row article {

    padding: 14px 10px;

  }

  .credential-row strong {

    font-size: 24px;

  }

  .intro-title.reveal-item {

    transform: translate3d(-105vw, 0, 0);

  }

  .intro-copy.reveal-item {

    transform: translate3d(105vw, 0, 0);

  }

}

@media (prefers-reduced-motion: reduce) {

  .intro:before,

  .intro:after,

  .intro-title h2 span:after {

    animation: none;

  }

  .reveal-item {

    opacity: 1;

    transform: none;

  }

}
