/* V30: explicit surface colours; loaded after the component styles.
   Dark text on paper, light text on ink. Accent text is independent of button fill. */
:root {
  --text-on-paper: #182630;
  --muted-on-paper: #4e5e58;
  --text-on-ink: #f6f4ee;
  --muted-on-ink: #becbd4;
  --accent-on-paper: #af202b;
  --accent-on-ink: #ff858c;
}

/* Labels on light sections must not inherit the default pale eyebrow. */
.content-section .eyebrow,
.franchise-section .eyebrow,
.project .eyebrow,
.faq .eyebrow,
.compass-heading .eyebrow,
.media-story-head .eyebrow {
  color: var(--muted-on-paper);
}
.content-section.technology .eyebrow,
.content-section.detail-faq .eyebrow,
.content-section.customer-questions .eyebrow,
.content-section.customer-cases .eyebrow,
.wood-story .media-story-head .eyebrow,
.content-section.route-lab .eyebrow,
.franchise-section.franchise-dark .eyebrow,
.franchise-section.partner-support .eyebrow {
  color: var(--muted-on-ink);
}

/* The film section previously inherited almost-black text from .experience. */
.direction-six .surface-lab,
.direction-six .lab-copy h2,
.direction-six .lab-copy .text-link {
  color: var(--text-on-ink);
}
.direction-six .lab-copy h2 .muted,
.cinema-tab span,
.cinema-foot > span {
  color: var(--muted-on-ink);
}
.process-caption > span,
.technology .two-panels article > span,
.case-no {
  color: var(--accent-on-ink);
}

/* Keep muted body copy readable on the warm grey and green paper surfaces. */
.direction-six .applications .section-head > p,
.explorer-list button,
.explorer-list > p,
.media-note,
.direction-six .manifesto .statement > span,
.manifesto-bottom > p,
.direction-six .service-hub .section-head > p,
.service-paths p,
.direction-six .beam-banner p:not(.eyebrow),
.proof-facts span,
.proof-note,
.project-intro p:not(.eyebrow),
.project-form label span,
.form-privacy,
.direction-six .faq details p,
.photo-guide > div > p:not(.eyebrow),
.photo-guide li p,
.callback-privacy,
.after-grid p,
.factor-grid p,
.comparison p,
.source-note,
.partner-check-copy > p:not(.eyebrow),
.meet-address > p,
.care-breadcrumb {
  color: var(--muted-on-paper);
}
.compass-heading h2 em {
  color: var(--muted-on-paper);
}
.studio-intro b,
.explorer-list button.active > span,
.explorer-list button.active b,
.service-paths > a > span,
.after-grid article > span {
  color: var(--accent-on-paper);
}
.direction-six .faq details p a { border-bottom-color: currentColor; }

/* White copy needs a sufficiently dark red, including hover/selected states. */
.button:hover { background: #b91b26; }
.compass-control-group.layers button[aria-pressed=true] {
  background: #bb202c;
  border-color: #bb202c;
  color: #fff;
}
.personal-contact .eyebrow,
.personal-contact .contact-panel > p,
.content-section.preparation .eyebrow,
.preparation p,
.care-cta .care-eyebrow {
  color: #fff;
}
.preparation li::before { opacity: 1; }

/* Active links sit on light dropdown panels, even inside the dark header. */
#site-navigation .lw-dropdown a[aria-current=page] { color: #a5262e; }
.detail-page .content-section:is(.technology, .detail-faq, .customer-questions) a:not(.button):hover {
  color: var(--accent-on-ink);
}
@media (max-width: 600px) {
  .explorer-list button.active > span,
  .explorer-list button.active b { color: var(--accent-on-ink); }
}

/* Photo/video labels retain their contrast when the underlying frame changes. */
.film-label,
.explorer-label,
.cinema-record,
.compass-visual-label,
.check-image-label {
  background: #101923eb;
  color: #fff;
  padding: 8px 10px;
  border-radius: 3px;
}
.detail-hero figcaption,
.franchise-hero figcaption { background: #101923eb; color: #fff; }
.direction-six .hero-reels button::after {
  background: linear-gradient(transparent 30%, #080b10e6 80%);
}
.direction-six .home-examples a::after {
  background: linear-gradient(0deg, #08111a 0%, #08111acc 50%, transparent 100%);
}
@media (max-width: 1160px) {
  #site-navigation .lw-dropdown a[aria-current=page] { color: var(--accent-on-ink); }
  #site-navigation .lw-dropdown a[aria-current=page]:hover { color: #fff; }
}
/* Long privacy/storage identifiers must remain readable on narrow screens. */
.legal { overflow-wrap: anywhere; }
.cinema-vignette {
  background: linear-gradient(0deg, #080b10f2, #080b10b3 35%, transparent 70%, #080b1077);
}
#cinema-start small { background: #101923eb; padding: 5px 8px; border-radius: 3px; }
@media (max-width: 600px) {
  .cinema-title h3 { font-size: 26px; line-height: 1.05; margin-top: 8px; }
  #cinema-start { top: 30%; gap: 6px; }
  #cinema-start > span { width: 48px; height: 48px; }
}
@media (max-width: 600px) {
  .direction-six .cinema-screen { aspect-ratio: 1 / 1.2; }
}
@media (max-width: 360px) {
  .direction-six .cinema-screen { aspect-ratio: 1 / 1.35; }
}
.button.light:hover { background: #e5e7df; color: #111820 !important; }