/*
 * Shared hero alignment (home, About, Contact and the five service pages).
 *
 * Reference: the approved Document Clearing Services hero. This file only adjusts layout:
 * left alignment, heading/description sizing, vertical rhythm and the position of the photo and
 * its curved divider. Content, images and the mobile/tablet stacked layouts are untouched.
 * Loaded after the page stylesheets so it refines their hero rules.
 */

:root {
	/* Left edge of every hero's content: about 6% of the viewport (115px at 1920, 86px at 1440). */
	--sb-hero-pad: clamp(1.25rem, 6vw, 7.8rem);
}

/* Desktop two-column heroes: About, Contact and the service pages stack below 900px. */
@media (min-width: 900px) {
	.bs-hero__copy,
	.ab-hero__copy,
	.ct-hero__copy { padding-left: var(--sb-hero-pad); }

	/* Photo and curve sit slightly further right, leaving room for the copy. */
	.bs-hero__visual,
	.ab-hero__visual,
	.ct-hero__visual { left: 46%; }

	.bs-hero .breadcrumbs { margin-bottom: 1.4rem; }

	.bs-hero .bs-eyebrow,
	.ab-hero .ab-eyebrow,
	.ct-hero .ct-eyebrow { margin-bottom: 1.35rem; font-size: 0.78rem; letter-spacing: 2px; }

	.bs-hero h1,
	.ab-hero h1,
	.ct-hero h1 { margin-bottom: 1.25rem; font-size: clamp(1.85rem, 3.4vw, 3.1rem); line-height: 1.1; }

	.bs-hero__lead,
	.ab-hero__lead,
	.ct-hero__lead { max-width: min(33.5rem, 38vw); margin-bottom: 1.5rem; font-size: clamp(0.94rem, 1.05vw, 1.06rem); line-height: 1.6; }

	.bs-hero__points,
	.ab-hero__points,
	.ct-hero__points { margin-top: 1.5rem; }

	/* Contact has no button: the points follow the description directly. */
	.ct-hero__points { margin-top: 0; }

	.bs-hero__point-icon,
	.ab-hero__point-icon,
	.ct-hero__point-icon { width: 3rem; height: 3rem; }
}

/* Homepage: stacks below 1024px. */
@media (min-width: 1024px) {
	.hero__content { padding-left: var(--sb-hero-pad); }

	.hero__visual { left: 46%; }

	.hero__eyebrow { margin-bottom: 1.35rem; font-size: 0.78rem; }

	.hero h1 { margin-bottom: 1.25rem; font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.1; }

	.hero__lead { max-width: min(33.5rem, 36vw); margin-bottom: 1.6rem; font-size: clamp(0.95rem, 1.05vw, 1.06rem); line-height: 1.6; }
}

/* Laptops: keep the three trust points compact so they stay on one row where space allows. */
@media (min-width: 900px) and (max-width: 1199px) {
	.bs-hero__points,
	.ab-hero__points,
	.ct-hero__points { gap: 0.8rem 0.9rem; }

	.bs-hero__points li,
	.ab-hero__points li,
	.ct-hero__points li { gap: 0.5rem; font-size: 0.8rem; }

	.bs-hero__point-icon,
	.ab-hero__point-icon,
	.ct-hero__point-icon { width: 2.6rem; height: 2.6rem; }
}