/* A quiet, editorial hierarchy: context recedes so titles, images and prices lead. */
.section-number,
.pricing-kicker,
.work-heading > p:last-child,
.orientation-head span,
.project-type,
.hero-index,
.eyebrow,
.hero-service,
.hero-foot > span,
.pricing-note,
.manifesto-caption,
.manifesto-slogan,
.manifesto-footer,
.pricing-list > article > p,
.pricing-list > article > span,
.contact > .section-number,
.contact .contact-kicker,
.contact-item > span,
.contact footer { opacity: .7; }

.orientation-head span,
.project-type,
.pricing-list > article > p,
.pricing-list > article > span,
.manifesto-caption,
.manifesto-slogan,
.manifesto-footer {
  letter-spacing: .09em;
}

.project-type { font-size: .88em !important; }
.pricing-main > p,
.contact-intro > p:last-child,
.intro-copy { opacity: .78; }

/* Pricing is the second-largest information layer: large values, quieter currency and qualifier. */
.pricing-list h3 { display: flex; align-items: baseline; gap: .18em; }
.pricing-list article:not(:nth-child(3)) h3 { line-height: .9; }
.price-currency {
  font: 500 clamp(1rem, 1.15vw, 1.35rem) var(--font-mono);
  letter-spacing: .06em;
  opacity: .7;
}
.price-number {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: clamp(3.25rem, 4.6vw, 5.8rem) !important;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.075em;
  line-height: .9;
}
.pricing-list h3 small { font-size: clamp(1rem, 1.1vw, 1.25rem) !important; opacity: .7; }
.pricing-list article:nth-child(3) h3 { font-size: clamp(1.25rem, 1.35vw, 1.7rem); opacity: .88; }

/* Structural rules should support the reading order rather than compete with it. */
.work-heading,
.filters,
.orientation-head,
.pricing,
.pricing-main,
.pricing-list,
.pricing-list article,
.contact-details,
.contact-item,
.contact footer { border-color: rgba(25, 33, 29, .5) !important; }

body.theme-dark .work-heading,
body.theme-dark .filters,
body.theme-dark .orientation-head,
body.theme-dark .pricing,
body.theme-dark .pricing-main,
body.theme-dark .pricing-list,
body.theme-dark .pricing-list article,
body.theme-dark .contact-details,
body.theme-dark .contact-item,
body.theme-dark .contact footer { border-color: rgba(238, 240, 234, .5) !important; }

/* The active filter is a white surface in dark mode, never dark text on a dark button. */
body.theme-dark .filter:hover,
body.theme-dark .filter.active {
  color: #161918 !important;
  border-color: #eef0ea !important;
  background: #eef0ea !important;
}

@media (max-width: 700px) {
  .price-number { font-size: clamp(3rem, 14vw, 4.1rem) !important; }
  .project-type { font-size: .84em !important; }
}