@charset "UTF-8";

/* UX Brighton / Danny Hope Ltd Brand Variables */
:root {
	/* Cool Grey Scale */
	--color-cool-grey-95: #010F15;
	--color-cool-grey-90: #1A272C;
	--color-cool-grey-80: #343F44;
	--color-cool-grey-70: #4B565A;
	--color-cool-grey-60: #616E73;
	--color-cool-grey-50: #7B858A;
	--color-cool-grey-40: #8C979C;
	--color-cool-grey-30: #A5B0B5;
	--color-cool-grey-20: #C7D0D4;
	--color-cool-grey-10: #E6E7E8;
	--color-cool-grey-5: #F0F2F2;
	--color-cool-grey-2: #F8F9FA;

	/* Red */
	--color-ux-red-minus-3: #420015;
	--color-ux-red-minus-2: #63001E;
	--color-ux-red-minus-1: #8C0028;
	--color-ux-red: #C9003A;
	--color-ux-red-plus-1: #E4003D;
	--color-ux-red-plus-2: #FF0040;
	--color-ux-red-plus-3: #FF4058;
	--color-ux-red-plus-4: #FF7276;
	--color-ux-red-plus-5: #FF9594;
	--color-ux-red-plus-6: #FFD1CF;

	/* Blue */
	--color-ux-blue-minus-5: #04134A;
	--color-ux-blue-minus-4: #082B62;
	--color-ux-blue-minus-3: #084071;
	--color-ux-blue-minus-2: #0C679C;
	--color-ux-blue-minus-1: #0D7EB2;
	--color-ux-blue: #108BC1;
	--color-ux-blue-plus-1: #2DA5DB;
	--color-ux-blue-plus-2: #60BFEB;
	--color-ux-blue-plus-3: #A1DCF4;
	--color-ux-blue-plus-4: #E1F7FF;

	/* Green */
	--color-ux-green-minus-6: #002300;
	--color-ux-green-minus-5: #004000;
	--color-ux-green-minus-4: #004C00;
	--color-ux-green-minus-3: #006300;
	--color-ux-green-minus-2: #008C00;
	--color-ux-green-minus-1: #00B400;
	--color-ux-green: #00CB00;
	--color-ux-green-plus-1: #2BE71E;
	--color-ux-green-plus-2: #7BF862;
	--color-ux-green-plus-3: #D7FBC9;

	/* Amber */
	--color-ux-amber-minus-6: #330900;
	--color-ux-amber-minus-5: #6D1600;
	--color-ux-amber-minus-4: #A22900;
	--color-ux-amber-minus-3: #CF4000;
	--color-ux-amber-minus-2: #ED5600;
	--color-ux-amber-minus-1: #FF7209;
	--color-ux-amber: #FFA039;
	--color-ux-amber-plus-1: #FFBD63;
	--color-ux-amber-plus-2: #FFE399;
	--color-ux-amber-plus-3: #FFFDD8;

	/* Purple */
	--color-ux-purple-minus-7: #040008;
	--color-ux-purple-minus-6: #0E001D;
	--color-ux-purple-minus-5: #1B0038;
	--color-ux-purple-minus-4: #240049;
	--color-ux-purple-minus-3: #37006E;
	--color-ux-purple-minus-2: #430079;
	--color-ux-purple-minus-1: #4F0083;
	--color-ux-purple: #60008E;
	--color-ux-purple-plus-1: #711199;
	--color-ux-purple-plus-2: #862AA8;
	--color-ux-purple-plus-3: #9941B4;
	--color-ux-purple-plus-4: #CB87D5;
	--color-ux-purple-plus-5: #E0AFE4;
	--color-ux-purple-plus-6: #F3DAF4;
	--color-ux-purple-plus-7: #FBEEFB;

	/* Semantic */
	--color-heading: #1A272C;
	--color-text: #343F44;
	--color-link: #010F15;
	--color-link-hover: #C9003A;
	--color-bg: #FAFBFC;
	--color-callout-bg: #FFFDD8;
}

/* Base */
* {
	box-sizing: border-box;
}

html {
	font-size: 18px;
	line-height: 1.5;
}

body {
	margin: 0;
	padding: 2rem;
	font-family: "Museo Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 400;
	color: var(--color-text);
	background-color: var(--color-bg);
}

/* Logo */
.logo {
	display: block;
	width: 120px;
	height: auto;
	margin-bottom: 1.5rem;
}

/* Typography */
h1 {
	font-size: 2rem;
	font-weight: 900;
	color: var(--color-heading);
	margin: 0 0 2rem;
	line-height: 1.2;
}

h2 {
	font-size: 1.5rem;
	font-weight: 900;
	color: var(--color-heading);
	margin: 0 0 1rem;
}

p {
	margin: 0 0 1rem;
}

a {
	color: var(--color-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color 0.15s ease;
}

a:hover {
	color: var(--color-link-hover);
}

/* Layout */
.container {
	max-width: 640px;
	margin: 0 auto;
	padding: 2rem 0;
}

/* Callout Card */
.callout {
	background-color: var(--color-callout-bg);
	border-radius: 0.5rem;
	padding: 2rem;
	margin-top: 3rem;
}

.callout h2 {
	margin-top: 0;
}

.callout p:last-of-type {
	margin-bottom: 1.5rem;
}

/* Contact Links */
.contact-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.contact-links a {
	font-weight: 500;
}

/* Button */
.button {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	background-color: var(--color-ux-blue);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	border-radius: 0.25rem;
	transition: background-color 0.15s ease;
	margin-bottom: 1.5rem;
}

.button:hover {
	background-color: var(--color-ux-blue-minus-1);
	color: #fff;
}

/* Responsive */
@media (max-width: 480px) {
	html {
		font-size: 16px;
	}

	body {
		padding: 1rem;
	}

	.callout {
		padding: 1.5rem;
	}

	.contact-links {
		flex-direction: column;
		gap: 0.75rem;
	}
}