/* MainstageV6 — Castle Windows hero (Figma hero-section 15301:34324).
   Scoped rhythm overrides plus the design's background wash and title divider.
   Colors flow through tokens only (--black, --accent). */

.mstg.v6 {

	/* Design rhythm at 1920: 40px below the stat band, 24px title → divider,
	   32px subtext → button. Mobile ends of the fluid calcs keep the
	   mainstage-tools defaults.
	   Top padding is the design's 231px averaged with the 75px that used to sit
	   under the button (see .btn-con): the two framed the copy block unevenly,
	   so both now run at the midpoint. Splitting rather than matching the larger
	   value keeps the section exactly as tall as it was. */
	--mstg-tls-pd-v-tp: 153;
	--mstg-tls-pd-v-bt: 40;
	--mstg-tls-pd-v-bt-mbl: 50;
	--mstg-tls-mrg-tp-sp-2: 24;
	--mstg-tls-mrg-tp-sp-4: 32;

	/* The design's video/photo renders at full strength under a single 60%
	   black wash — override the framework's image-opacity dimmer and put the
	   wash on the wrapper div only (the inner <picture> is also .bg).
	   --vid-bg-o is the video's equivalent dimmer (make.css ships .4 site-wide);
	   without it the background video would be dimmed twice. */
	--mstg-img-bg-o: 1;
	--vid-bg-o: 1;

	> .bg::after {
		content: '';
		position: absolute;
		inset: 0;
		background-color: hsl(from var(--black) h s l / 0.6);
	}

	/* Divider between title and subtext: 3px line — 16px tick — window mark —
	   tick — line, all in the accent color. Drawn as a mask so the color stays
	   a token. */
	.txt-bx > em::before {
		content: '';
		display: block;
		height: 24px;
		margin-bottom: 24px;
		background-color: var(--accent);
		mask:
			url("data:image/svg+xml,%3Csvg width='44' height='24' viewBox='0 0 44 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35.8305 0.46875C35.8594 1.68386 35.8419 2.98007 35.8361 4.23L35.853 23.9972L8.23393 24L8.24141 0.0028125L8.72087 0.0046875C17.3273 0.0285901 25.7389 0.00783006 35.352 0H35.8193L35.8305 0.46875ZM43.9991 0.0028125L43.9916 0.490312C43.946 3.28888 43.9593 6.11692 43.9767 8.95125C43.994 11.784 44.0152 14.6242 43.9842 17.4384L43.9795 18.1884C43.976 19.9313 44.0177 21.7454 43.9739 23.4966L43.9636 23.9044L43.5608 23.9606L43.4982 23.9691L43.4832 23.9709C43.2811 23.9923 42.9109 23.9966 42.5701 23.9972H42.5673L41.5943 23.9925C40.254 23.9863 38.9131 23.9879 37.5727 23.9972L37.0904 24L37.0895 0L43.9991 0.0028125ZM6.95163 16.4503L6.95724 21.0394C6.95823 21.6679 6.99087 22.9083 6.93201 23.5566L6.89182 23.9934L0.517695 23.985H0.0644036L0.0401035 23.5312C-0.0341358 22.1412 0.0173828 20.255 0.0176725 18.8747V3.96187L0.00271859 2.32031C-0.000553852 1.71032 0.00372262 1.09166 0.0344957 0.627187V0.621562L0.0485151 0.448125L0.0830961 0.005625L6.95724 0.0046875L6.95163 16.4503ZM9.63493 22.5919H21.428V12.7266H9.63306L9.63493 22.5919ZM22.8299 22.5909H34.4492L34.4398 12.7266H22.8299V22.5909ZM38.4914 22.5863C39.5274 22.5817 40.5637 22.5805 41.5999 22.5853C41.7989 22.5857 42.1603 22.5916 42.5682 22.5909C42.5732 22.5909 42.5782 22.59 42.5832 22.59C42.5915 21.8175 42.5902 21.0433 42.585 20.2622C42.5788 19.3255 42.5717 18.3783 42.5822 17.4225C42.6131 14.6231 42.5922 11.7963 42.5748 8.95969C42.5593 6.44105 42.5478 3.91527 42.5776 1.40719H38.4914V22.5863ZM1.41026 1.41094C1.39615 2.23373 1.41867 3.24068 1.41961 3.96L1.42054 18.8747C1.4203 20.0239 1.39106 21.3896 1.414 22.5797L5.56092 22.5844C5.563 22.2753 5.56326 21.9423 5.55998 21.6319L5.55437 21.0441V21.0413L5.5497 16.4513L5.55344 1.41094H1.41026ZM9.63213 11.3203H21.428V1.41937C17.4364 1.42139 13.5458 1.41967 9.62933 1.41094L9.63213 11.3203ZM22.8299 1.41844V11.3203H34.4398L34.4342 5.46844L34.4323 4.84406V4.84219C34.4324 3.68126 34.4475 2.53537 34.4389 1.40719C30.401 1.41139 26.5652 1.41593 22.8299 1.41844Z' fill='%23000'/%3E%3C/svg%3E") center / 44px 24px no-repeat,
			linear-gradient(#000, #000) calc(50% - 46px) center / 16px 3px no-repeat,
			linear-gradient(#000, #000) calc(50% + 46px) center / 16px 3px no-repeat,
			linear-gradient(#000, #000) left center / max(0px, calc(50% - 62px)) 3px no-repeat,
			linear-gradient(#000, #000) right center / max(0px, calc(50% - 62px)) 3px no-repeat;
	}

	/* Matches the space above the title so the copy block sits evenly between the
	   header and the stat band. Reuses the top padding's own fluid calc rather
	   than a second literal, so the two stay equal at every width instead of only
	   at 1920 (the old flat 4.6875rem/75px was the desktop end of that curve, and
	   is still what both sides resolve to at the 320px mobile end). */
	.btn-con {
		margin-bottom: var(--mstg-tls-pd-v-tp-clc);
	}

	/* Andersen Certified Contractor badge — design pins it 40px from the
	   section's bottom-right corner (Figma node 15301:34335). Hidden on small
	   screens where it would sit on the stacked stat tiles. */
	.mstg-bdg {
		position: absolute;
		right: 2.5rem;
		bottom: 2.5rem;
		width: 5.25rem;
		height: auto;
		z-index: 1;

		@media screen and (width < 768px) {
			display: none;
		}
	}

}