:root {
	/* 1. Global colour variables */
	--violet: #A4ACEB;
	--violet-hover: #8F98E2;
	--violet-press: #7C86D8;
	--cream: #F5F3ED;
	--cream-deep: #EBE8DE;
	--navy: #36396B;
	--navy-soft: #4A4E85;
	--khaki: #E7E5C7;
	--sand-grey: #DBDCCD;
	--text-muted: #6A6D96;
	--text-quiet: #8D90AE;
	--surface-card: #FFFFFF;

	/* 3. Size variables */
	--display-l: 56px;
	--display-m: 40px;
	--display-s: 28px;
	--sub-l: 32px;
	--sub-m: 24px;
	--sub-s: 18px;
	--body-l: 18px;
	--body-m: 16px;
	--body-s: 14px;
	--body-xs: 12px;
	--page-title: clamp(32px, 4.6vw, 56px);

	/* 4. Spacing variables */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;
	--gutter: 24px;
	--section-y: 96px;
	--section-y-tight: 64px;
}

/* 5. Site layout constraints */
.elementor-section-wrap > .elementor-element,
.elementor-location-header > .elementor-element,
.elementor-location-footer > .elementor-element,
main > .elementor-element {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	padding-top: var(--section-y);
	padding-bottom: var(--section-y);
}

/* 6. Typography defaults */
body {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.7;
	color: var(--navy);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Final Six', sans-serif;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--navy);
}

a {
	color: var(--navy);
	text-decoration: none;
	border-bottom: 1px solid var(--navy);
	transition: color 220ms cubic-bezier(.22,.61,.36,1), border-color 220ms cubic-bezier(.22,.61,.36,1);
}
a:hover {
	color: var(--navy-soft);
	border-color: var(--navy-soft);
}

/* 7. Saved text styles */
.eyebrow {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--text-muted);
}

.pull-line {
	font-family: 'Final Six', sans-serif;
	font-weight: 100;
	font-size: 24px;
	line-height: 1.35;
	color: var(--navy);
}

/* 8. Grain overlay class */
.grain {
	position: relative;
}
.grain::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	opacity: 0.14;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
	z-index: 0;
}
