/**
 * Section-break / scattered-squares separator image.
 *
 * Both `.hitek-section-break` (About Us) and `.hitek-separator-squares`
 * (front-page, Why Hi-Tek Data, etc.) resolve to a full-bleed red-mosaic
 * image that scales with the viewport.
 *
 * At ≤767px we swap to a mobile-optimized asset (attachment 325) so the
 * squares read cleanly at narrow widths instead of squashing the 1440×249
 * desktop art. Pair is authored as two `core/image` blocks inside the
 * wp_block with the --desktop / --mobile modifier classes.
 */
.hitek-section-break img,
.hitek-separator-squares img {
	display: block;
	width: 100%;
	height: auto;
}

/* Responsive art-direction swap. WP core has no block attr for this. */
.hitek-separator-squares--mobile {
	display: none;
}

@media (max-width: 767.98px) {
	.hitek-separator-squares--desktop {
		display: none;
	}
	.hitek-separator-squares--mobile {
		display: block;
	}
}

/* Non-hero page-title treatment (Privacy Policy, etc.).
 *
 * Figma spec (node 33111:6386): Avenir Next Condensed Bold, 28px,
 * letter-spacing -0.28px, uppercase, line-height 1.2. Theme.json fluid
 * typography rewrites inline 28px into a clamp() that collapses to ~18px
 * at 430w — no preset hits 28px at mobile — so pin it via utility class. */
.hitek-page-title {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.28px;
	text-transform: uppercase;
}