/*
 * CI textures — subtle paper / dot overlays for solid-color sections.
 *
 * Applied per section as an isolated ::after overlay so the blend only affects
 * that section's background and the content stays above it, unblended.
 *
 * Two hooks: the reusable classes .hd-tex-paper / .hd-tex-dots (use these on
 * markup we control, e.g. the theme-builder header/footer), and the Elementor
 * element-id classes for the front-page sections (Elementor does not reliably
 * render _css_classes on top-level containers, but always renders the id class).
 */

.hd-tex-paper,
.hd-tex-dots,
.elementor-element-introSec,
.elementor-element-planSec,
.elementor-element-faqSec,
.elementor-element-metricsSec,
.elementor-element-timelineSec,
.elementor-element-ctaSec {
	position: relative;
	isolation: isolate; /* keep the blend local to this section */
}

/* Content above the texture, crisp and unblended */
.hd-tex-paper > *,
.hd-tex-dots > *,
.elementor-element-introSec > *,
.elementor-element-planSec > *,
.elementor-element-faqSec > *,
.elementor-element-metricsSec > *,
.elementor-element-timelineSec > *,
.elementor-element-ctaSec > * {
	position: relative;
	z-index: 1;
}

.hd-tex-paper::after,
.hd-tex-dots::after,
.elementor-element-introSec::after,
.elementor-element-planSec::after,
.elementor-element-faqSec::after,
.elementor-element-metricsSec::after,
.elementor-element-timelineSec::after,
.elementor-element-ctaSec::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* Paper grain on light surfaces: near-white texture multiplied into the colour */
.hd-tex-paper::after,
.elementor-element-introSec::after,
.elementor-element-planSec::after,
.elementor-element-faqSec::after {
	background: url("tex/papier.jpg") center / cover no-repeat;
	mix-blend-mode: multiply;
	opacity: 0.5;
}

/* Dot grid: the dots are dark (as in the design), multiplied into the colour
   so they darken it subtly — same technique as the paper, different texture.
   Fixed tile size instead of cover: cover ties the dot scale to the section
   height, which blew the dots up on tall mobile sections (customer note
   2026-08). Figma renders the grid at ~5px pitch on every breakpoint; the
   texture's native pitch is 12.7px, so 1920px wide ≈ 0.39× hits that. */
.hd-tex-dots::after,
.elementor-element-metricsSec::after,
.elementor-element-timelineSec::after,
.elementor-element-ctaSec::after {
	background: url("tex/grain.png") top left / 1920px auto repeat;
	mix-blend-mode: multiply;
	opacity: 0.6;
}