:root {
  --mf-orange-start: #ffb12c;
  --mf-orange-mid: #fb9817;
  --mf-orange-end: #e97800;
  --mf-orange-ink: #171717;
}

/* Linguagem visual comum das grandes superfícies laranja. */
.services,
.manifesto,
.quote {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--mf-orange-ink);
  background:
    linear-gradient(145deg, var(--mf-orange-start) 0%, var(--mf-orange-mid) 52%, var(--mf-orange-end) 100%);
}

.services::before,
.manifesto::before,
.quote::before {
  content: "MF";
  position: absolute;
  z-index: -1;
  top: clamp(46px, 7vw, 105px);
  right: clamp(28px, 6vw, 105px);
  color: rgb(23 23 23 / 12%);
  font: 900 clamp(145px, 18vw, 290px) / .72 Arial, Helvetica, sans-serif;
  letter-spacing: -.14em;
  pointer-events: none;
}

.services::after,
.manifesto::after,
.quote::after {
  content: "";
  position: absolute;
  z-index: -2;
  width: clamp(440px, 47vw, 760px);
  aspect-ratio: 1;
  right: clamp(-190px, -7vw, -55px);
  top: clamp(-175px, -8vw, -65px);
  border-radius: 50%;
  border: 1px solid rgb(23 23 23 / 18%);
  pointer-events: none;
}

.services > *,
.manifesto > *,
.quote > * {
  position: relative;
  z-index: 1;
}

.services .kicker,
.services .service-list span {
  color: rgb(23 23 23 / 72%);
}

.services .service-list article {
  border-color: rgb(23 23 23 / 25%);
}

.services .service-list p {
  color: rgb(23 23 23 / 72%);
}

.services .service-list article:hover h3 {
  transform: translateX(6px);
}

.services .service-list h3 {
  transition: transform .22s ease;
}

.manifesto {
  background:
    linear-gradient(145deg, var(--mf-orange-start) 0%, var(--mf-orange-mid) 52%, var(--mf-orange-end) 100%);
}

.quote .kicker {
  color: rgb(23 23 23 / 68%);
}

.quote .quote-intro {
  color: rgb(23 23 23 / 72%);
}

.quote .quote-form input,
.quote .quote-form select,
.quote .quote-form textarea {
  border-color: rgb(23 23 23 / 32%);
  background: rgb(245 244 239 / 92%);
}

.quote .quote-form input:focus,
.quote .quote-form select:focus,
.quote .quote-form textarea:focus {
  outline: 2px solid rgb(23 23 23 / 55%);
  outline-offset: 2px;
}

/* Na segunda superfície, a composição alterna para o lado esquerdo. */
.manifesto::before {
  right: auto;
  left: clamp(28px, 6vw, 105px);
}

.manifesto::after {
  right: auto;
  left: clamp(-190px, -7vw, -55px);
}

@media (max-width: 760px) {
  .services::before,
  .manifesto::before,
  .quote::before {
    top: 34px;
    right: 22px;
    font-size: clamp(105px, 35vw, 175px);
  }

  .services::after,
  .manifesto::after,
  .quote::after {
    width: 520px;
    right: -260px;
    top: -85px;
  }

  .manifesto::before {
    right: auto;
    left: 22px;
  }

  .manifesto::after {
    right: auto;
    left: -260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services .service-list h3 {
    transition: none;
  }
}

/* Ações dos cartões: mesma linguagem de "Abrir galeria". */
.portfolio-grid article .project-detail-link {
  position: static;
  right: auto;
  bottom: auto;
  display: inline-block;
  align-self: flex-start;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  margin: 0 0 0 15px;
  color: var(--ink);
  font: 16px/normal Georgia, serif;
  cursor: pointer;
}

.portfolio-grid article .project-detail-link:hover {
  background: transparent;
  color: #8a5000;
}

/* Hero mais luminoso, conservando contraste onde existe texto. */
.hero-image {
  z-index: 0;
  background:
    linear-gradient(90deg,
      rgb(0 0 0 / 62%) 0%,
      rgb(0 0 0 / 38%) 43%,
      rgb(0 0 0 / 8%) 100%),
    url("assets/R3VS0090.JPG") center / cover !important;
  filter: saturate(.94) brightness(1.08);
}

/* Apontamentos de marca sobre a fotografia, deliberadamente discretos. */
.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: -150px;
  bottom: -360px;
  width: 720px;
  height: 720px;
  border: 3px solid rgb(255 173 39 / 22%);
  border-radius: 50%;
  pointer-events: none;
}

.hero::before {
  content: "MF";
  position: absolute;
  z-index: 1;
  right: 54px;
  bottom: 24px;
  color: rgb(255 173 39 / 22%);
  font: 900 clamp(120px, 12vw, 210px)/.78 Arial, Helvetica, sans-serif;
  letter-spacing: -.14em;
  pointer-events: none;
  user-select: none;
}

.hero-content::before {
  content: "";
  position: absolute;
  left: calc(10vw - 22px);
  top: 126px;
  width: 3px;
  height: 72px;
  background: #ffad27;
  border-radius: 3px;
}

.hero-stamp,
.hero-stamp small {
  color: #ffad27;
}

@media (max-width: 760px) {
  .hero-image {
    background:
      linear-gradient(90deg,
        rgb(0 0 0 / 60%) 0%,
        rgb(0 0 0 / 34%) 70%,
        rgb(0 0 0 / 16%) 100%),
      url("assets/R3VS0090.JPG") center / cover !important;
  }

  .hero::after {
    right: -320px;
    bottom: -420px;
    opacity: .75;
  }

  .hero::before {
    right: 20px;
    bottom: 18px;
    font-size: 105px;
  }

  .hero-content::before {
    left: calc(8vw - 12px);
    top: 102px;
    height: 56px;
    width: 2px;
  }
}