/* ICS torn-paper buttons (CSS only). Global modifier ics-btn--torn; mask variant ics-btn--torn-b; colour ics-btn--torn-yellow|-pink|-blue (default black).
   Masks: uploads/ics-torn/btn-torn-mask-a-r2.svg, btn-torn-mask-b-r2.svg (320x64, preserveAspectRatio none).
   Button box stays a plain rectangle (outline/focus ring not clipped); torn silhouette, halftone and paper stack are ::after/::before, masked.
   Text sits above (isolation:isolate; pseudos z -2/-1). Size/padding from ics-btn--m|--s (tokens). Colours from palette tokens.
   Black: dots neutral-500 @60% (2.2:1 vs black), radius 0.9px on 4px grid, fade to 70%. Colour variants keep radius 1.5px, sp-2xs grid, fade 60%. Paper offset 3px is a decor literal. */
.ics-btn.ics-btn--torn {
	position: relative;
	isolation: isolate;
	background: transparent;
	border: 0;
	min-height: 2.75rem;
	color: var(--torn-ink);
	text-decoration: none;
	cursor: pointer;
	transition: transform 160ms ease;
	--torn-fill: var(--neutral-1000);
	--torn-dot: var(--neutral-500);
	--torn-dot-alpha: 60%;
	--torn-dot-r: 0.9px;
	--torn-grid: 4px;
	--torn-paper: var(--neutral-100);
	--torn-ink: var(--yellow-0);
	--torn-fade-end: 70%;
}
.ics-btn.ics-btn--torn::before,
.ics-btn.ics-btn--torn::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	-webkit-mask: url(/wp-content/uploads/ics-torn/btn-torn-mask-a-r2.svg) center / 100% 100% no-repeat;
	mask: url(/wp-content/uploads/ics-torn/btn-torn-mask-a-r2.svg) center / 100% 100% no-repeat;
}
/* paper stack: same silhouette in paper tone, offset down-right */
.ics-btn.ics-btn--torn::before {
	z-index: -2;
	background: var(--torn-paper);
	transform: translate(3px, 3px);
}
/* body: solid fill + halftone dots; fill overlay from the right hides dots, so dots fade out toward the right */
/* dots are clipped to the content box (4px padding): no dot is cut by the silhouette edge or sits on a corner */
.ics-btn.ics-btn--torn::after {
	z-index: -1;
	padding: 4px;
	background:
		linear-gradient(to top right, transparent 0%, var(--torn-fill) var(--torn-fade-end)),
		radial-gradient(circle, var(--torn-dot) var(--torn-dot-r), transparent calc(var(--torn-dot-r) + 0.5px)) 0 0 / var(--torn-grid) var(--torn-grid),
		var(--torn-fill);
	/* colour-mix() dots: browsers without it (Chrome <111, Safari <16.2, Firefox <113) drop this declaration and keep the plain dots above */
	background:
		linear-gradient(to top right, transparent 0%, var(--torn-fill) var(--torn-fade-end)),
		radial-gradient(circle, color-mix(in srgb, var(--torn-dot) var(--torn-dot-alpha), transparent) var(--torn-dot-r), transparent calc(var(--torn-dot-r) + 0.5px)) 0 0 / var(--torn-grid) var(--torn-grid),
		var(--torn-fill);
	background-clip: border-box, content-box, border-box;
}
.ics-btn.ics-btn--torn-b::before,
.ics-btn.ics-btn--torn-b::after {
	-webkit-mask: url(/wp-content/uploads/ics-torn/btn-torn-mask-b-r2.svg) center / 100% 100% no-repeat;
	mask: url(/wp-content/uploads/ics-torn/btn-torn-mask-b-r2.svg) center / 100% 100% no-repeat;
}
/* colour variants (palette tokens; text >= 4.5:1 on each fill) */
.ics-btn.ics-btn--torn-yellow { --torn-fill: var(--yellow-500); --torn-dot: var(--yellow-700); --torn-dot-alpha: 30%; --torn-paper: var(--yellow-0); --torn-ink: var(--neutral-1000); --torn-dot-r: 1.5px; --torn-grid: var(--sp-2xs); --torn-fade-end: 60%; }
.ics-btn.ics-btn--torn-pink { --torn-fill: var(--pink-500); --torn-dot: var(--pink-700); --torn-dot-alpha: 30%; --torn-paper: var(--pink-50); --torn-ink: var(--neutral-1000); --torn-dot-r: 1.5px; --torn-grid: var(--sp-2xs); --torn-fade-end: 60%; }
.ics-btn.ics-btn--torn-blue { --torn-fill: var(--blue-500); --torn-dot: var(--blue-800); --torn-dot-alpha: 30%; --torn-paper: var(--blue-50); --torn-ink: var(--neutral-1000); --torn-dot-r: 1.5px; --torn-grid: var(--sp-2xs); --torn-fade-end: 60%; }
/* states */
@media (hover: hover) {
	.ics-btn.ics-btn--torn:hover { transform: translateY(-2px); --torn-fade-end: 90%; }
}
.ics-btn.ics-btn--torn:active { transform: translateY(1px); --torn-fade-end: 45%; }
.ics-btn.ics-btn--torn:focus-visible { outline: 2px solid var(--neutral-1000); outline-offset: 4px; }
.ics-btn.ics-btn--torn:disabled,
.ics-btn.ics-btn--torn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.ics-btn.ics-btn--torn[aria-busy="true"] { cursor: progress; opacity: 0.75; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.ics-btn.ics-btn--torn,
	.ics-btn.ics-btn--torn:hover,
	.ics-btn.ics-btn--torn:active { transition: none; transform: none; }
}
@media (forced-colors: active) {
	.ics-btn.ics-btn--torn::before,
	.ics-btn.ics-btn--torn::after { display: none; }
	.ics-btn.ics-btn--torn { background: ButtonFace; color: ButtonText; outline: 1px solid ButtonText; }
}

/* form submit buttons (Bricks form cannot take a class): same torn-paper treatment; doubled ids beat form CSS */
#contact-form#contact-form button[type='submit'],
#jn-native-form#jn-native-form button[type='submit'] {
	position: relative;
	isolation: isolate;
	background: transparent;
	border: 0;
	min-height: 2.75rem;
	color: var(--torn-ink);
	cursor: pointer;
	transition: transform 160ms ease;
	--torn-fill: var(--neutral-1000);
	--torn-dot: var(--neutral-500);
	--torn-dot-alpha: 60%;
	--torn-dot-r: 0.9px;
	--torn-grid: 4px;
	--torn-paper: var(--neutral-100);
	--torn-ink: var(--yellow-0);
	--torn-fade-end: 70%;
}
#contact-form#contact-form button[type='submit']::before,
#contact-form#contact-form button[type='submit']::after,
#jn-native-form#jn-native-form button[type='submit']::before,
#jn-native-form#jn-native-form button[type='submit']::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	-webkit-mask: url(/wp-content/uploads/ics-torn/btn-torn-mask-a-r2.svg) center / 100% 100% no-repeat;
	mask: url(/wp-content/uploads/ics-torn/btn-torn-mask-a-r2.svg) center / 100% 100% no-repeat;
}
#contact-form#contact-form button[type='submit']::before,
#jn-native-form#jn-native-form button[type='submit']::before {
	z-index: -2;
	background: var(--torn-paper);
	transform: translate(3px, 3px);
}
#contact-form#contact-form button[type='submit']::after,
#jn-native-form#jn-native-form button[type='submit']::after {
	z-index: -1;
	padding: 4px;
	background:
		linear-gradient(to top right, transparent 0%, var(--torn-fill) var(--torn-fade-end)),
		radial-gradient(circle, var(--torn-dot) var(--torn-dot-r), transparent calc(var(--torn-dot-r) + 0.5px)) 0 0 / var(--torn-grid) var(--torn-grid),
		var(--torn-fill);
	/* colour-mix() dots: browsers without it (Chrome <111, Safari <16.2, Firefox <113) drop this declaration and keep the plain dots above */
	background:
		linear-gradient(to top right, transparent 0%, var(--torn-fill) var(--torn-fade-end)),
		radial-gradient(circle, color-mix(in srgb, var(--torn-dot) var(--torn-dot-alpha), transparent) var(--torn-dot-r), transparent calc(var(--torn-dot-r) + 0.5px)) 0 0 / var(--torn-grid) var(--torn-grid),
		var(--torn-fill);
	background-clip: border-box, content-box, border-box;
}
@media (hover: hover) {
	#contact-form#contact-form button[type='submit']:hover,
	#jn-native-form#jn-native-form button[type='submit']:hover {
		transform: translateY(-2px);
		--torn-fade-end: 90%;
	}
}
#contact-form#contact-form button[type='submit']:active,
#jn-native-form#jn-native-form button[type='submit']:active {
	transform: translateY(1px);
	--torn-fade-end: 45%;
}
#contact-form#contact-form button[type='submit']:focus-visible,
#jn-native-form#jn-native-form button[type='submit']:focus-visible {
	outline: 2px solid var(--neutral-1000);
	outline-offset: 4px;
}
#contact-form#contact-form button[type='submit']:disabled,
#contact-form#contact-form button[type='submit'][aria-disabled="true"],
#jn-native-form#jn-native-form button[type='submit']:disabled,
#jn-native-form#jn-native-form button[type='submit'][aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}
#contact-form#contact-form button[type='submit'][aria-busy="true"],
#jn-native-form#jn-native-form button[type='submit'][aria-busy="true"] {
	cursor: progress;
	opacity: 0.75;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	#contact-form#contact-form button[type='submit'],
	#contact-form#contact-form button[type='submit']:hover,
	#contact-form#contact-form button[type='submit']:active,
	#jn-native-form#jn-native-form button[type='submit'],
	#jn-native-form#jn-native-form button[type='submit']:hover,
	#jn-native-form#jn-native-form button[type='submit']:active {
		transition: none;
		transform: none;
	}
}
@media (forced-colors: active) {
	#contact-form#contact-form button[type='submit']::before,
	#contact-form#contact-form button[type='submit']::after,
	#jn-native-form#jn-native-form button[type='submit']::before,
	#jn-native-form#jn-native-form button[type='submit']::after {
		display: none;
	}
	#contact-form#contact-form button[type='submit'],
	#jn-native-form#jn-native-form button[type='submit'] {
		background: ButtonFace;
		color: ButtonText;
		outline: 1px solid ButtonText;
	}
}