/* capco — SCENES experiment (docs/motion-scenes.md). Everything is scoped under html.capco-scenes, a class scenes.js adds only
   while the experiment is running (front page, phones, no reduced motion): without the script none of this applies.
   Header and bottom audience bar are deliberately untouched. */
html.capco-scenes .capco-scene-live { will-change: opacity, transform; }   /* only the composition in charge and its neighbours */
/* spacing rule: space measured by scenes.js after a single-screen composition, so the next one cannot enter before it has rested */
html.capco-scenes .capco-scene-end { margin-bottom: var(--capco-scene-gap, 0px) !important; }

@media (max-width: 767px) {
	/* natural flow: the client band's content hugs the top edge of the band (it appears high on the screen and rests early) */
	html.capco-scenes .capco-trust.capco-trust { justify-content: flex-start !important; padding-top: var(--capco-scene-inset, 24px) !important; padding-bottom: 24px !important; }
	/* only on devices where the composition does not fit (scenes.js measures it): tighter client grid */
	html.capco-scenes .capco-trust.capco-scenes-compact .elementor-widget-text-editor { margin-bottom: var(--s-40, 40px) !important; }
	html.capco-scenes .capco-trust.capco-scenes-compact .capco-logos__list { gap: 28px 24px !important; }
	html.capco-scenes .capco-trust.capco-scenes-compact .capco-logos__list img { height: 36px !important; max-height: 36px; }
	html.capco-scenes .capco-trust.capco-scenes-compact .elementor-widget-button { margin-top: var(--s-32, 32px) !important; }
}

/* ── black ⇄ white between sections (CONFIG.blend) ── */
@media (max-width: 767px) {
	/* backdrop: one fixed colour plane behind everything, cross-faded by scenes.js; the sections that painted their own black become transparent */
	html.capco-scenes.capco-blend--backdrop, html.capco-scenes.capco-blend--backdrop body { background: transparent !important; }
	html.capco-scenes.capco-blend--backdrop .capco-backdrop { position: fixed; inset: 0; z-index: -1; background: #080808; pointer-events: none; }
	html.capco-scenes.capco-blend--backdrop .capco-hero:not(.capco-hero--inner) { background: transparent !important; }
	html.capco-scenes.capco-blend--backdrop .capco-trust::after { background: transparent !important; }
	/* while the colour is crossing, the chrome stops filtering what is beneath (a backdrop-filter re-renders every frame over a changing
	   colour and looks muddy on the greys): solid black in the dark tone, white via the catalogue mode once the tone turns light */
	html.capco-scenes.capco-blend--backdrop[data-capco-blending] body:not(.capco-catalogue) .capco-header, html.capco-scenes.capco-blend--backdrop[data-capco-blending] body:not(.capco-bar-catalogue) .capco-audience { background: #080808 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
	/* gradient: a static black → white band at the bottom of the black block (on the hero, which never fades — a pseudo-element of the
	   incoming section would fade with it) */
	html.capco-scenes.capco-blend--gradient .capco-hero:not(.capco-hero--inner)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--capco-blend-h, 220px); background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 100%); pointer-events: none; z-index: 5; }
}

/* ── test panel (?scenes=debug) ── */
.capco-scenes-hud { position: fixed; left: 8px; right: 8px; top: calc(var(--capco-hdr, 84px) + 6px); z-index: 2000; font: 500 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: #E4FCF0; background: rgba(10,10,10,.88); border: 1px solid rgba(113,227,178,.45); border-radius: 8px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.capco-scenes-hud * { box-sizing: border-box; font: inherit; color: inherit; }
.capco-scenes-hud__head, .capco-scenes-hud__head:hover, .capco-scenes-hud__head:focus { display: block; width: 100%; margin: 0; padding: 7px 10px; text-align: left; white-space: normal; background: transparent; border: 0; border-radius: 0; color: #71E3B2; cursor: pointer; }
.capco-scenes-hud__body { padding: 2px 10px 10px; max-height: calc(100svh - var(--capco-hdr, 84px) - 130px); overflow-y: auto; }
.capco-scenes-hud.is-folded .capco-scenes-hud__body { display: none; }
.capco-scenes-hud__row { display: grid; grid-template-columns: 78px 1fr 44px; align-items: center; gap: 8px; margin: 0; padding: 3px 0; }
.capco-scenes-hud__row input[type="range"] { width: 100%; margin: 0; accent-color: #36B37C; }
.capco-scenes-hud__row input[type="checkbox"] { justify-self: start; width: 16px; height: 16px; margin: 0; accent-color: #36B37C; }
.capco-scenes-hud__row select { width: 100%; padding: 3px 6px; background: #1C1C1C; border: 1px solid #36B37C; border-radius: 4px; }
.capco-scenes-hud__row output { text-align: right; }
.capco-scenes-hud__btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.capco-scenes-hud__btns button, .capco-scenes-hud__btns button:hover, .capco-scenes-hud__btns button:focus { margin: 0; padding: 5px 9px; background: #1C1C1C; color: #E4FCF0; border: 1px solid #36B37C; border-radius: 999px; font-weight: 700; cursor: pointer; }
.capco-scenes-hud__line { position: fixed; left: 0; right: 0; z-index: 1999; height: 0; border-top: 1px dashed #E8794A; pointer-events: none; }
.capco-scenes-hud__line::after { content: attr(data-label); position: absolute; right: 6px; top: -15px; font: 700 10px/1 ui-monospace, Menlo, monospace; color: #E8794A; }

/* ── article / story pages (hero "the News card opens", 2026-11-11): the same colour plane on EVERY width — black under the hero, white
   under the text — so the hero's photo and words can fade out over it and the chrome follows the colour ── */
html.capco-scenes.capco-blend--backdrop:has(body.capco-ahero-page), html.capco-scenes.capco-blend--backdrop body.capco-ahero-page { background: transparent !important; }
html.capco-scenes.capco-blend--backdrop body.capco-ahero-page .capco-backdrop { position: fixed; inset: 0; z-index: -1; background: #080808; pointer-events: none; }
html.capco-scenes.capco-blend--backdrop body.capco-ahero-page .capco-hero.capco-article-hero { background: transparent !important; }
html.capco-scenes.capco-blend--backdrop[data-capco-blending] body.capco-ahero-page:not(.capco-catalogue) .capco-header, html.capco-scenes.capco-blend--backdrop[data-capco-blending] body.capco-ahero-page:not(.capco-bar-catalogue) .capco-audience { background: #080808 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }