/* V11: V9's black gallery, with alternating tonal fields, not a light theme. */
:root {
  --immersive-muted: rgba(247,247,248,.82);
  --immersive-faint: rgba(247,247,248,.7);
  --immersive-line: rgba(226,235,255,.23);
  --immersive-soft-line: rgba(226,235,255,.15);
}

/* Section fields share the selected hero charcoal. */
:root { --immersive-black: #1b191a; --immersive-deep: #1b191a; }
.section-services,
.section-numbers,
.section-services + .section-numbers,
.section-why,
.section-flow,
.section-founder,
.section-faq,
#contact.section-contact,
.photo-marquee,
.photo-marquee + .mobile-hide,
footer { background: #1b191a !important; }

/* Raised surfaces catch a little more light without washing out the dark base. */
.section-services .svc-row:hover,
.section-services .svc-row.active { background: rgba(185,211,255,.09) !important; }
.section-numbers > div > .grid.grid-cols-3 { background: #161b24; }
.section-numbers .work-card { background: #171e29 !important; }
.section-numbers .work-card:hover { background: #202b3a !important; }
.section-faq details[open] { background: #222a36 !important; }
.section-contact form { background: rgba(255,255,255,.075); }
.section-contact > div > div:first-child > p:not(.sec-label) { color: var(--immersive-muted) !important; }
.section-flow > div > p { color: var(--immersive-muted) !important; }