.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

body {
  overflow-x: hidden;
}

.paper-texture {
  background-color: #dce8ec;
  background-image:
    radial-gradient(circle at 15% 18%, rgba(255, 253, 248, 0.56), transparent 26%),
    radial-gradient(circle at 86% 72%, rgba(242, 223, 183, 0.32), transparent 24%),
    linear-gradient(120deg, rgba(31, 95, 143, 0.08), transparent 18%, rgba(255, 253, 248, 0.2) 48%, rgba(155, 122, 47, 0.07) 72%, transparent),
    url("https://www.transparenttextures.com/patterns/felt.png");
}

.paper-texture::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(108deg, transparent 0 16%, rgba(31, 95, 143, 0.055) 18%, transparent 22% 46%, rgba(255, 253, 248, 0.22) 50%, transparent 56% 76%, rgba(155, 122, 47, 0.05) 78%, transparent 82%),
    radial-gradient(ellipse at 50% 18%, rgba(255, 253, 248, 0.38), transparent 42%);
  content: "";
  opacity: 0.42;
  pointer-events: none;
}

.watercolor-border-vignette {
  mask-image: linear-gradient(to right, black 60%, transparent 100%);
  opacity: 0.6;
  pointer-events: none;
}

.watercolor-border-vignette-right {
  mask-image: linear-gradient(to left, black 60%, transparent 100%);
  opacity: 0.6;
  pointer-events: none;
}

.mobile-watercolor-top {
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  opacity: 0.3;
  pointer-events: none;
}

.page-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.96) 0%, rgba(255, 253, 248, 0.8) 48%, rgba(216, 237, 246, 0.38) 100%),
    url("assets/personal-hero-abstract-blue-gold.png") center / cover no-repeat;
}

.page-hero::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(194, 212, 184, 0.42), transparent 30%),
    linear-gradient(180deg, rgba(255, 253, 248, 0.06), rgba(255, 253, 248, 0.22));
  content: "";
  pointer-events: none;
}

.service-shape {
  border-radius: 9999px;
}

.service-shape:nth-child(2) {
  border-radius: 44% 56% 48% 52% / 55% 42% 58% 45%;
}

.service-shape:nth-child(3) {
  border-radius: 55% 45% 60% 40% / 45% 56% 44% 55%;
}

.service-shape:nth-child(4) {
  border-radius: 42% 58% 48% 52% / 60% 48% 52% 40%;
}

.research-row {
  border-top: 1px solid rgba(117, 129, 135, 0.3);
}

.research-row:last-child {
  border-bottom: 1px solid rgba(117, 129, 135, 0.3);
}

@media (max-width: 767px) {
  .page-hero {
    background-position: center;
  }

  .page-hero::after {
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.14), rgba(255, 253, 248, 0.42));
  }
}