/* APPIOS visual refinement — titles and service photography only. */
h1,
h2 {
  line-height: .90;
}

h3 {
  line-height: 1;
}

.home-hero h1 { font-size: calc(clamp(5rem, 8.4vw, 10rem) - .17rem); }
.projects-hero h1,
.resources-hero h1,
.simple-hero h1 { font-size: calc(clamp(4.6rem, 7.5vw, 9rem) - .17rem); }
.case-hero h1 { font-size: calc(clamp(4.8rem, 7.2vw, 8.7rem) - .17rem); }
.article-hero h1 { font-size: calc(clamp(4.4rem, 7vw, 8.2rem) - .17rem); }
.contact-hero__copy h1 { font-size: calc(clamp(4.5rem, 7vw, 8.5rem) - .17rem); }
.legal-hero h1 { font-size: calc(clamp(4.5rem, 7vw, 8rem) - .17rem); }
.section-heading h2 { font-size: calc(clamp(3.1rem, 5.4vw, 6.4rem) - .17rem); }
.editorial-split__copy h2 { font-size: calc(clamp(3.4rem, 5vw, 6rem) - .17rem); }
.belief__copy h2 { font-size: calc(clamp(4rem, 7vw, 8rem) - .17rem); }
.team-process__content h2 { font-size: calc(clamp(4rem, 6.6vw, 8rem) - .17rem); }
.results__copy h2 { font-size: calc(clamp(4rem, 6vw, 7.3rem) - .17rem); }
.newsletter-band h2 { font-size: calc(clamp(3.2rem, 4.6vw, 5.6rem) - .17rem); }
.cta-band h2 { font-size: calc(clamp(3.8rem, 6vw, 7.2rem) - .17rem); }
.system-statement h2 { font-size: calc(clamp(3.4rem, 5.5vw, 6.4rem) - .17rem); }
.case-challenge h2,
.case-results h2 { font-size: calc(clamp(3.8rem, 5.6vw, 6.4rem) - .17rem); }
.service-intro h2,
.service-detail__copy h2 { font-size: calc(clamp(3.5rem, 5.2vw, 6.2rem) - .17rem); }
.manifesto h2,
.culture-note h2 { font-size: calc(clamp(3.8rem, 5.7vw, 7rem) - .17rem); }
.featured-resource h2 { font-size: calc(clamp(3.3rem, 5vw, 5.8rem) - .17rem); }
.downloads__intro h2 { font-size: calc(clamp(3rem, 4.5vw, 5rem) - .17rem); }
.article-section h2 { font-size: calc(clamp(2.5rem, 4vw, 4.4rem) - .17rem); }

.service-detail__visual {
  isolation: isolate;
  background: var(--ink);
}

.service-detail__photo,
.service-detail__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.service-detail__photo {
  z-index: 0;
  display: block;
  object-fit: cover;
  object-position: center;
}

.service-detail__shade {
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 9, 16, .18), rgba(11, 9, 16, .62));
}

.service-detail__visual > .icon {
  position: relative;
  z-index: 3;
  width: 5rem;
  height: 5rem;
  padding: 1rem;
  border: 1px solid rgba(244, 239, 230, .72);
  border-radius: 50%;
  color: var(--ivory);
  background: rgba(11, 9, 16, .28);
  backdrop-filter: blur(8px);
}

.service-detail__visual .orbit {
  display: none;
}

.service-detail__number {
  z-index: 3;
  color: var(--lime);
  text-shadow: 0 2px 18px rgba(11, 9, 16, .7);
}

#strategy .service-detail__photo { object-position: 50% 48%; }
#web .service-detail__photo { object-position: 50% 44%; }
#content .service-detail__photo { object-position: 50% 46%; }
#performance .service-detail__photo { object-position: 50% 46%; }
#tracking .service-detail__photo { object-position: 50% 50%; }
#growth .service-detail__photo { object-position: 50% 48%; }

@media (max-width: 720px) {
  h1,
  h2 { line-height: .92; }

  .service-detail__visual > .icon {
    width: 4.25rem;
    height: 4.25rem;
  }
}

/* Project cards: keep editorial photography while guaranteeing readable copy. */
.project-card__shade {
  display: block !important;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(11, 9, 16, .10) 0%,
    rgba(11, 9, 16, .34) 42%,
    rgba(11, 9, 16, .92) 100%
  ) !important;
}

.project-card__content,
.project-card__content h3,
.project-card__content p,
.project-card__content .text-link,
.project-card__content .project-card__metrics span {
  color: var(--ivory) !important;
  text-shadow: 0 2px 16px rgba(11, 9, 16, .78);
}

.project-card__content .project-card__meta,
.project-card__content .project-card__metrics strong {
  color: var(--lime) !important;
}

.project-card__content .tag-list span {
  color: var(--ivory) !important;
  border-color: rgba(244, 239, 230, .82) !important;
  background: rgba(11, 9, 16, .22);
}

/* Keep the longer Nexo headline inside its card at desktop/tablet widths. */
.project-card--long-title h3 {
  max-width: 100%;
  font-size: clamp(1.9rem, 2.55vw, 3rem);
  line-height: .98;
  text-wrap: balance;
  overflow-wrap: normal;
}

@media (max-width: 720px) {
  .project-card--long-title h3 {
    font-size: clamp(2rem, 9vw, 2.65rem);
    line-height: 1;
  }
}