/* ==========================================================================
   Opus AV — Services page styles
   Page-specific overrides only. Shared inner-page styles live in inner.css.
   ========================================================================== */


/* ── Masthead watermark — bars mark from page-relative path ─────────────── */

.page-masthead::after {
  background-image: url('../../logos/opus-av-bars-mark.svg');
}


/* ── Service section counter labels ─────────────────────────────────────── */

/* Each service section has a large decorative index number in the background */
.service-section {
  position: relative;
}

.service-section__index {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

.service-section__index::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
}


/* ── 01 · Audio Systems — light surface ─────────────────────────────────── */

.service-audio {
  background: var(--surface-default);
}


/* ── 02 · Visual Systems — dark surface ─────────────────────────────────── */

.service-visual {
  background: var(--opus-charcoal);
}

.service-visual h2 {
  color: var(--opus-white);
}

.service-visual p {
  color: var(--opus-mist);
}

.service-visual .kit-list li {
  color: var(--opus-mist);
  border-bottom: var(--hairline-dark);
}

.service-visual .kit-list li:last-child {
  border-bottom: none;
}


/* ── 03 · Stage & Lighting — soft (mist) surface ────────────────────────── */

.service-stage {
  background: var(--surface-soft);
}


/* ── 04 · Sensory Rooms — light surface, teal accent ────────────────────── */

.service-sensory {
  background: var(--surface-default);
}

/* Sensory sections use the teal accent for the eyebrow and kit markers */
.service-sensory .service-section__index {
  color: var(--accent-sensory);
}

.service-sensory .kit-list li::before {
  background: var(--accent-sensory);
}


/* ── 05 · Service & Maintenance — dark surface ───────────────────────────── */

.service-maintenance {
  background: var(--opus-charcoal);
}

.service-maintenance h2 {
  color: var(--opus-white);
}

.service-maintenance p {
  color: var(--opus-mist);
}

.service-maintenance .kit-list li {
  color: var(--opus-mist);
  border-bottom: var(--hairline-dark);
}

.service-maintenance .kit-list li:last-child {
  border-bottom: none;
}


/* ── Services layout — text + kit list side by side ─────────────────────── */

.service-body {
  margin-top: var(--space-3);
}

.service-body p + p {
  margin-top: var(--space-2);
}

.service-kit-head {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
  margin-top: var(--space-4);
}

/* On dark sections the kit heading inherits accent correctly */
.service-visual .service-kit-head,
.service-maintenance .service-kit-head {
  color: var(--accent);
}

/* Sensory kit heading uses teal */
.service-sensory .service-kit-head {
  color: var(--accent-sensory);
}


/* ── Partners section — light surface for contrast after dark maintenance ── */
/* The partners section follows a dark section on this page; switch to mist   */
/* so there is a clear visual break between the two dark expanses.             */

.partners {
  background: var(--surface-soft);
  color: var(--text-default);
}

.partners__header .eyebrow  { color: var(--accent); }
.partners__header h2         { color: var(--text-strong); }
.partners__header p          { color: var(--text-default); }

.partners__firms {
  background: rgba(31, 31, 31, 0.07); /* grid seam on light */
}

.partners__firm {
  background: var(--surface-soft);
}

.partners__firm h3 {
  color: var(--text-strong);
}

.partners__firm p {
  color: var(--text-default);
}

/* Logos shown as dark silhouettes on light background */
.partners__firm-logo {
  filter: brightness(0);
  opacity: 0.72;
}
.partners__firm:hover .partners__firm-logo {
  opacity: 0.92;
}

.partners__firm-tag {
  color: var(--accent);
}

.partners__firm .cta--link {
  color: rgba(31, 31, 31, 0.35);
}
.partners__firm .cta--link:hover {
  color: var(--accent);
}

.partners__accreds {
  border-top-color: rgba(31, 31, 31, 0.12);
}

.partners__accreds-label {
  color: rgba(31, 31, 31, 0.28);
}

.partners__accred {
  color: rgba(31, 31, 31, 0.50);
}

.partners__accred-logo {
  filter: brightness(0);
  opacity: 0.50;
}