:root:is(html) {

	--bdr-stl: solid; /* { friendly: 'Border Style', group: 'Borders' } */
	--bdr-w: 1px; /* { min: 1, max: 4, step: 1, friendly: 'Border Width', group: 'Borders' } */
	--bdr-clr-o: 0.3; /* { min: 0.05,  max: 1, step: 0.05, friendly: 'Border Opacity', group: 'Borders' } */
	--bg-bx-o: 0.9;  /* { min: .2, max: 1, step: 0.05, friendly: 'Like/Unlike Box Opacity', group: 'Calculations' } */

	--img-fg-sat: 1; /* { min: 0, max: 1, step: 0.1, friendly: 'Saturation - Foreground Imagery', group: 'Images' } */
	--img-fg-sep: 0; /* { min: 0, max: 1, step: 0.1, friendly: 'Sepia - Foreground Imagery', group: 'Images' } */
	--img-fg-brt: 1; /* { min: 0, max: 1.5, step: 0.1, friendly: 'Brightness - Foreground Imagery', group: 'Images' } */
	--img-fg-con: 1; /* { min: 0, max: 1.5, step: 0.1, friendly: 'Contrast - Foreground Imagery', group: 'Images' } */
	--img-fg-blr: 0px; /* { min: 0, max: 10, step: .1, friendly: 'Blur - Foreground Imagery', group: 'Images' } */
	--img-fg-o: 1; /* { min: .2, max: 1, step: 0.05, friendly: 'Opacity - Foreground Imagery', group: 'Images' } */

	--img-bg-o: 0.2; /* { min: .2, max: 1, step: 0.05, friendly: 'Opacity - Background Imagery', group: 'Images' } */
	--img-bg-sat: 1; /* { min: 0, max: 1, step: 0.1, friendly: 'Saturation - Background Imagery', group: 'Images' } */
	--img-bg-sep: 0; /* { min: 0, max: 1, step: 0.1, friendly: 'Sepia - Background Imagery', group: 'Images' } */
	--img-bg-brt: 1; /* { min: 0, max: 1.5, step: 0.1, friendly: 'Brightness - Background Imagery', group: 'Images' } */
	--img-bg-con: 1; /* { min: 0, max: 1.5, step: 0.1, friendly: 'Contrast - Background Imagery', group: 'Images' } */
	--img-bg-blr: 0px; /* { min: 0, max: 10, step: .1, friendly: 'Blur - Background Imagery', group: 'Images' } */

	--dk-ptrn-bg: url("/media/patterns/light-pattern.png"); /* { readonly: true } */
	--dk-ptrn-o: 1; /* { readonly: true } */
	--dk-ptrn-blnd: unset; /* { readonly: true } */

	--lt-ptrn-bg: url("/media/patterns/dark-pattern.png"); /* { readonly: true } */
	--lt-ptrn-o: 1; /* { readonly: true } */
	--lt-ptrn-blnd: unset; /* { readonly: true } */

	--mstg-img-bg-o: 0.2; /* { min: .2, max: 1, step: 0.05, friendly: 'Opacity - Mainstage Background Imagery', group: 'Images' } */
	--mstg-img-bg-sat: 1; /* { min: 0, max: 1, step: 0.1, friendly: 'Saturation - Mainstage Background Imagery', group: 'Images' } */
	--mstg-img-bg-sep: 0; /* { min: 0, max: 1, step: 0.1, friendly: 'Sepia - Mainstage Background Imagery', group: 'Images' } */
	--mstg-img-bg-brt: 1; /* { min: 0, max: 1.5, step: 0.1, friendly: 'Brightness - Mainstage Background Imagery', group: 'Images' } */
	--mstg-img-bg-con: 1; /* { min: 0, max: 1.5, step: 0.1, friendly: 'Contrast - Mainstage Background Imagery', group: 'Images' } */
	--mstg-img-bg-blr: 0px; /* { min: 0, max: 10, step: .1, friendly: 'Blur - Mainstage Background Imagery', group: 'Images' } */

	--vid-bg-o: .4; /* { min: .2, max: 1, step: 0.05, friendly: 'Video Background Opacity', group: 'Calculations' } */

	--btn-txt-clr-lt: var(--text-alt); /* { friendly: 'Light Theme - Button V1 Text Color', group: 'Colors' } */
	--btn-bg-clr-lt: var(--buttons); /* { friendly: 'Light Theme - Button V1 BG Color', group: 'Colors' } */
	--btn-txt-clr-lt-alt: var(--text-alt); /* { friendly: 'Light Theme - Button V1 Alt Text Color', group: 'Colors' } */
	--btn-bg-clr-lt-alt: var(--main-bg-alt); /* { friendly: 'Light Theme - Button V1 Alt BG Color', group: 'Colors' } */

	--btn-txt-clr-dk: var(--text-alt); /* { friendly: 'Dark Theme - Button V1 Text Color', group: 'Colors' } */
	--btn-bg-clr-dk: var(--buttons); /* { friendly: 'Dark Theme - Button V1 BG Color', group: 'Colors' } */
	--btn-txt-clr-dk-alt: var(--text); /* { friendly: 'Dark Theme - Button V1 Alt Text Color', group: 'Colors' } */
	--btn-bg-clr-dk-alt: var(--main-bg); /* { friendly: 'Dark Theme - Button V1 Alt BG Color', group: 'Colors' } */



	--frm-bdr-stl: solid; /* { friendly: 'Form Input Border Style', group: 'Borders' } */
	--frm-bdr-w: 2px; /* { min: 1, max: 4, step: 1, friendly: 'Form Input Border Width', group: 'Borders' } */
	--frm-bdr-rds: 0.44rem; /* { min: 0,  max: 5, step: 0.1, friendly: 'Form Input Border Radius', group: 'Borders' } */

	--flx-gap: 3.889rem; /* { min: 4, max: 9, step: 0.1, friendly: 'Flex Gap Amount',group: 'Spacing' } */

	--g-cnt-k-ttl-m: 0.8rem; /* { min: 0.2, max: 2, step: 0.05, friendly: 'Kicker + Title Margin', group: 'Spacing' } */
	--g-cnt-ttl-ttl-m: 0.55rem; /* { min: 0.2, max: 1, step: 0.05, friendly: 'Title Margin', group: 'Spacing' } */
	--g-cnt-ttl-cnt-m: 1rem; /* { min: 0.5, max: 1.5, step: 0.05, friendly: 'Content Margin', group: 'Spacing' } */
	--g-cnt-full-img-m: 1.5rem; /* { min: 1, max: 3, step: 0.05, friendly: 'Full Content Image Top/Bottom Margin', group: 'Spacing' } */

	--g-trn-sp: .3s; /* { min: 0, max: 1, step: 0.05, friendly: 'Default Transition Speed', group: 'Other' } */
	--g-trn-tf: ease; /* { friendly: 'Default Transition Timing Function', group: 'Other' } */

	--grd-sp: 1.778rem; /* { min: 1, max: 2.5, step: 0.001, friendly: 'Grid Display Item Spacing', group: 'Spacing' } */
	--grd-sml-mpt: .5; /* { min: 0.1, max: 1, step: 0.1, friendly: 'Grid Small Multiplier', group: 'Spacing' } */
	--grd-lrg-mpt: 1.5; /* { min: 1, max: 2, step: 0.1, friendly: 'Grid Large Multiplier', group: 'Spacing' } */
	--grd-sp-sml: calc(var(--grd-sp) * var(--grd-sml-mpt)); /* { readonly: true } */
	--grd-sp-lrg: calc(var(--grd-sp) * var(--grd-lrg-mpt)); /* { readonly: true } */
	--grd-sp-dyn: var(--grd-sp); /* { readonly: true } */

	--mn-t: 75rem; /* { min: 15, max: 100, step: 1, friendly: 'Main Thin Value', group: 'Other' } */
	--mn-w: 89rem; /* { min: 15, max: 100, step: 1, friendly: 'Main Wide Value', group: 'Other' } */
	--mn-f: 22.5rem; /* { min: 15, max: 100, step: .1, friendly: 'Main Full Value', group: 'Other' } */
	--mn_ch-w: 85ch; /* { readonly: true } */
	--mn-sys: var(--mn-t); /* { readonly: true } */

	--mn_min: calc(var(--vw_) * 0.7); /* { readonly: true } */
	--mn_min-t: calc(var(--vw_) * 0.41); /* { readonly: true } */
	--mn_max: calc(var(--vw_) * 0.938); /* { readonly: true } */

	--st-w: 1920px; /* { friendly: 'Site Outer Max Width', group: 'Other' } */
	--vw_: min(100vw, var(--st-w)); /* { readonly: true } */

	--py-i-s: 1.4rem; /* { type: 'range', min: 1, max: 3, step: 0.1, friendly: 'Payment Icon Font Size', group: 'Calculations' } */

	--rvw-str-clr: #FFD80A; /* { friendly: 'Review Star Colors', group: 'Colors' } */
	--rvw-str-s: 1rem; /* { min: 1, max: 4, step: 0.1, friendly: 'Review Star Font Size', type: 'range' } */
	--rvw-str-o: .5; /* { min: .2, max: .9, step: 0.001, friendly: 'Review Opacity For Inactive Stars' } */

	--sl-trn-sp: .6s; /* { min: .3, max: 2, step: 0.1, friendly: 'Scrolling List Transition Speed', group: 'Other' } */
	--sl-trn-tf: ease; /* { friendly: 'Scrolling List Timing Function', group: 'Other' } */
	--sl-sa-s: 3.556rem; /* { type: 'range', min: 1, max: 3, step: 0.1, friendly: 'Scrolling Arrows Font Size', group: 'Calculations' } */

	--so-i-s: 1.4rem; /* { type: 'range', min: 1, max: 3, step: 0.1, friendly: 'Social Media Icon Font Size', group: 'Calculations' } */

    --sp-hp: 2rem; /* { min: 60, max: 120, step: 1, friendly: 'Horizontal Padding Desktop', group: 'Spacing' } */
	--sp-vp: 3.5rem; /* { min: 60, max: 125, step: 1, friendly: 'Vertical Padding Desktop', group: 'Spacing' } */
	--sp-qk: 1rem; /* { min: 0.5, max: 1.5, step: 0.25, friendly: 'Quick Spacing', group: 'Spacing' } */
	--sp-vm: 45; /* { min: 30, max: 60, step: 1, friendly: 'Vertical Margin Desktop', group: 'Spacing' } */
	--sp-vm-mbl: 30; /* { min: 20, max: 40, step: 1, friendly: 'Vertical Margin Mobile', group: 'Spacing' } */

	--sp-vp-min: 6.4%; /* { readonly: true } */
	--sp-vp-max: 10%; /* { readonly: true } */
	--sp-vp-mn: 6.4; /* { readonly: true } */
	--sp-vp-mx: 10; /* { readonly: true } */
	--sp-hp-min: 8%; /* { readonly: true } */
	--sp-hp-max: 10%; /* { readonly: true } */
	--sp-hp-mn: 8%; /* { readonly: true } */
	--sp-hp-mx: 10%; /* { readonly: true } */

	--sp-vp-mmc: clamp(calc(var(--sp-vp-mn) * 1vw), var(--sp-vp), calc(var(--sp-vp-mx) * 1vw));  /* { readonly: true } */

	--sp-vm-clc: calc((var(--sp-vm-mbl) * 1px) + (var(--sp-vm) - var(--sp-vm-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */

	--tag-pd-v: 0.4em ; /* { min: 0.3,  max: 1, step: 0.1, friendly: 'Tag Vertical Padding', group: 'Calculations' } */
    --tag-pd-h: 1em; /* { min: 0.3,  max: 1.5, step: 0.1, friendly: 'Tag Horizontal Padding', group: 'Calculations' } */
	--tag-bdr-rds: 5em; /* { min: 0,  max: 5, step: 0.1, friendly: 'Tag Border Radius', group: 'Calculations' } */

	--bg-bx-bdr-thc: 4px; /* { min: 1,  max: 20, step: 1, friendly: 'BG Box Border Width' } */
	--bg-bx-bdr-clr-o: 1; /* { min: 0.1,  max: 1, step: .1, friendly: 'BG Box Border Opacity' } */

	--three-8ths: 36.4%;  /* Override to match Design */

}


header:has(.hdr[data-colors="primary-light"]) + main > section[data-colors="primary-light"][class*="pd_v"]:not(.bg-image):first-child,
header:has(.hdr[data-colors="alternate-light"]) + main > section[data-colors="alternate-light"][class*="pd_v"]:not(.bg-image):first-child,
header:has(.hdr[data-colors="primary-dark"]) + main > section[data-colors="primary-dark"][class*="pd_v"]:not(.bg-image):first-child,
header:has(.hdr[data-colors="alternate-dark"]) + main > section[data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image):first-child {
	padding-top: clamp(calc(var(--sp-vp-min) * 0.5), var(--sp-vp), calc(var(--sp-vp-max) * 0.5) );
}

main:has( > section:last-child:is([data-colors="primary-light"][class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-light"][class*="pd_v"]:not(.bg-image):first-child,
main:has( > section:last-child:is([data-colors="alternate-light"][class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="alternate-light"][class*="pd_v"]:not(.bg-image):first-child,
main:has( > section:last-child:is([data-colors="primary-dark"][class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-dark"][class*="pd_v"]:not(.bg-image):first-child,
main:has( > section:last-child:is([data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image):first-child,
main:has( > form:last-child > section:is([data-colors="primary-light"][class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-light"][class*="pd_v"]:not(.bg-image):first-child,
main:has( > form:last-child > section:is([data-colors="alternate-light"][class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="alternate-light"][class*="pd_v"]:not(.bg-image):first-child,
main:has( > form:last-child > section:is([data-colors="primary-dark"][class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-dark"][class*="pd_v"]:not(.bg-image):first-child,
main:has( > form:last-child > section:is([data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image):first-child{
	padding-top: 0;
}

/* Waiting on PR */
.tag:not(:has(a)), .tag a {
	border: var(--bdr-stl) var(--bdr-w) hsl(from var(--text-color) h s l / var(--bdr-clr-o));
}

/* END Waiting on PR */

:where(.sd-zn, .cnt-zn) > * + * {
    margin-top: calc(var(--sp-vm-clc)* 1.6);
}

.grd:has(> [data-item="nr"]) {
	--itm-val: 100 !important;

	+ div {
		display: none;
	}
}

.pg-nv.start.end {
  display: none;
}

.bg-bx.pattern-bg {
    background-color: transparent;
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("/media/foreground/bg-bx-pattern.png");
        opacity: .5;
		background-size: 200px 200px;
		background-position: top left;
		background-repeat: repeat;
		mix-blend-mode: multiply;
        z-index: -1;
    }

    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--inner-theme);
        z-index: -2;
    }
}

.flr-pattern {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.1;
	background-repeat: repeat;
	background-size: 23px 14px;
}

[data-colors*="-light"] .flr-pattern {
	opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cpath d='M63.013 11.8212L53.5814 39.3639H9.43156L0 11.8212L18.9903 22.2591L31.5065 0L44.0227 22.2613L63.013 11.8234V11.8212Z' fill='%23000000'/%3E%3C/svg%3E");
}

[data-colors*="-dark"] .flr-pattern {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cpath d='M63.013 11.8212L53.5814 39.3639H9.43156L0 11.8212L18.9903 22.2591L31.5065 0L44.0227 22.2613L63.013 11.8234V11.8212Z' fill='%23ffffff'/%3E%3C/svg%3E");
}


@media screen and (width >= 700px) {
	:root {
		--fnt-s-mtp: 1 !important;
	}
}


@media screen and (width >= 1280px) {
	:root {
		--mn_min: calc(var(--vw_) * 0.6); /* { readonly: true } */
	}


	/* Sets up system module widths to be easier to change */
	[class*="mn_"].sys_w {
		max-width: clamp(var(--mn_min), var(--mn-sys), var(--mn_max));
	}

	/* normal */
	[data-colors="primary-light"][class*="pd_v"]:not(.bg-image) + [data-colors="primary-light"][class*="pd_v"]:not(.bg-image),
	[data-colors="alternate-light"][class*="pd_v"]:not(.bg-image) + [data-colors="alternate-light"][class*="pd_v"]:not(.bg-image),
	[data-colors="primary-dark"][class*="pd_v"]:not(.bg-image) + [data-colors="primary-dark"][class*="pd_v"]:not(.bg-image),
	[data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image) + [data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image) {
	    padding-top: 0;
	}

	/* plus a form */
	[data-colors="primary-light"][class*="pd_v"]:not(.bg-image) + form [data-colors="primary-light"][class*="pd_v"]:not(.bg-image),
	[data-colors="alternate-light"][class*="pd_v"]:not(.bg-image) + form [data-colors="alternate-light"][class*="pd_v"]:not(.bg-image),
	[data-colors="primary-dark"][class*="pd_v"]:not(.bg-image) + form [data-colors="primary-dark"][class*="pd_v"]:not(.bg-image),
	[data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image) + form [data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image) {
	    padding-top: 0;
	}

	/* form plus (Doesn't work in FF) */
	form:has( [data-colors="primary-light"][class*="pd_v"]:not(.bg-image) ) + [data-colors="primary-light"][class*="pd_v"]:not(.bg-image),
	form:has( [data-colors="alternate-light"][class*="pd_v"]:not(.bg-image) ) + [data-colors="alternate-light"][class*="pd_v"]:not(.bg-image),
	form:has( [data-colors="primary-dark"][class*="pd_v"]:not(.bg-image) ) + [data-colors="primary-dark"][class*="pd_v"]:not(.bg-image),
	form:has( [data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image) ) + [data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image) {
	    padding-top: 0;
	}

	/* form plus form (Doesn't work in FF) */
	form:has( [data-colors="primary-light"][class*="pd_v"]:not(.bg-image) ) + form > [data-colors="primary-light"][class*="pd_v"]:not(.bg-image) ,
	form:has( [data-colors="alternate-light"][class*="pd_v"]:not(.bg-image) ) + form > [data-colors="alternate-light"][class*="pd_v"]:not(.bg-image),
	form:has( [data-colors="primary-dark"][class*="pd_v"]:not(.bg-image) ) + form > [data-colors="primary-dark"][class*="pd_v"]:not(.bg-image) ,
	form:has( [data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image) ) + form > [data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image)  {
	    padding-top: 0;
	}

}

@media screen and (width < 1280px) {
	:root {
		--sp-vp-max-mbl: 16%; /* { readonly: true } */
	}

	/* Footer padding if last panel is full-mbl */
	main:has( > section:last-child:is([data-colors="primary-light"].full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-light"][class*="pd_v"]:not(.bg-image):first-child,
	main:has( > section:last-child:is([data-colors="alternate-light"].full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="alternate-light"][class*="pd_v"]:not(.bg-image):first-child,
	main:has( > section:last-child:is([data-colors="primary-light"].wht-bg.full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-light"].wht-bg[class*="pd_v"]:not(.bg-image):first-child,
	main:has( > section:last-child:is([data-colors="primary-dark"].full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-dark"][class*="pd_v"]:not(.bg-image):first-child,
	main:has( > section:last-child:is([data-colors="alternate-dark"].full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image):first-child,
	main:has( > section:last-child:is([data-colors="primary-dark"].blk-bg.full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-dark"].blk-bg[class*="pd_v"]:not(.bg-image):first-child,
	main:has( > form:last-child > section:is([data-colors="primary-light"].full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-light"][class*="pd_v"]:not(.bg-image):first-child,
	main:has( > form:last-child > section:is([data-colors="alternate-light"].full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="alternate-light"][class*="pd_v"]:not(.bg-image):first-child,
	main:has( > form:last-child > section:is([data-colors="primary-light"].wht-bg.full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-light"].wht-bg[class*="pd_v"]:not(.bg-image):first-child,
	main:has( > form:last-child > section:is([data-colors="primary-dark"].full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-dark"][class*="pd_v"]:not(.bg-image):first-child,
	main:has( > form:last-child > section:is([data-colors="alternate-dark"].full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image):first-child,
	main:has( > form:last-child > section:is([data-colors="primary-dark"].blk-bg.full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-dark"].blk-bg[class*="pd_v"]:not(.bg-image):first-child {
		padding-top: var(--pd-v);
	}
}


/* ── Gutter pattern + body containing block (visible past 1920px cap) ── */

body, html {
    background-color: #999999;
    color: #fff;
}

body {
    position: relative;
}

@media (min-width: 1920px) {
    :root:is(html) {
        --mn_max: calc(var(--vw_) * 0.85);
    }

    html::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        background-image: url(/media/brand/logo-gutter-tile.png);
        background-size: 320px 520px;
        background-repeat: repeat;
        filter: grayscale(1) opacity(.18);
        pointer-events: none;
    }
}