:root {
	--brand-red: #EE001E;
	--accent-red: #FF281E;
	--bg: #F6F0E2;
	--panel-bg: #FFFFFF;
	--highlight: #F8FF3C;
	--text: #000000;
	--muted: #555555;
	--max-width: 1100px;
}

/* Reset & base */
* {
	box-sizing: border-box
}

html,
body {
	height: 100%
}

body {
	font-family: 'Open Sans', Arial, sans-serif;
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.45;
}

/* Page container */
.page {
	max-width: var(--max-width);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Header */
header {
	background: var(--brand-red);
	color: #fff;
	padding: clamp(12px, 2.4vw, 20px);
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

/* Logo area - use a small container rather than absolute positioning */
.logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 6px;
}

.logo img {
    height: 70px;
    background: #fff;
    border-radius: 50%;
}

.header-text {
	flex: 1 1 auto;
	text-align: left;
	padding: 0 8px;
	min-width: 0;
	/* allow text truncation if needed */
}

.header-text h1 {
	margin: 0;
	font-size: clamp(18px, 2.6vw, 26px);
	font-weight: 700;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: -0.02em;
	color: #fff;
}

.header-text p {
	margin: 6px 0 0;
	font-size: clamp(13px, 1.8vw, 17px);
	color: #FFFFFF;
	font-weight: 500;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.highlight {
	background-color: var(--highlight);
	color: #000;
	padding: 3px 8px;
	border-radius: 0;
	font-weight: 600;
	display: inline-block;
}

/* Main */
main {
	text-align: center;
	padding: clamp(18px, 3vw, 40px);
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	background-color: #fff;
}

.card {
	width: 100%;
	background: var(--panel-bg);
	border-radius: 16px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	padding: clamp(18px, 2.6vw, 28px);
	border: 2px solid transparent;
	max-width: 980px;
}

main h2 {
	font-size: clamp(18px, 2.4vw, 24px);
	margin: 0 0 6px;
	color: var(--text);
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
}

main p {
	font-size: clamp(13px, 1.6vw, 16px);
	color: #333333;
	margin: 0 0 18px;
}


/* Calendly responsive wrapper */
.calendly-wrap {
	position: relative;
	width: 100%;
	border-radius: 16px;
	overflow: hidden;
	border: 2px solid var(--accent-red);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	background: var(--panel-bg);
	min-height: 500px;
	/* fallback */
}

/* The inline widget script injects its own iframe; make iframes responsive */
.calendly-wrap iframe,
.calendly-wrap .calendly-inline-widget {
	width: 100% !important;
	height: 100% !important;
	min-height: 500px;
	border: 0 !important;
	display: block;
}

/* Footer */
footer {
	margin-top: 28px;
	padding: 14px;
	font-size: 14px;
	color: var(--muted);
	border-top: 3px solid var(--brand-red);
	background: var(--panel-bg);
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	border-radius: 10px;
	margin-bottom: 20px;
}

footer a {
	color: var(--brand-red);
	text-decoration: none;
	font-weight: 600
}

footer a:hover {
	color: var(--accent-red)
}

/* Layout tweaks for small screens */
@media (max-width: 700px) {
	header {
		padding: 12px;
	}

	.header-text {
		text-align: left;
	}

	.page {
		padding: 12px
	}

	.calendly-wrap {
		min-height: 560px;
	}

	/* taller on mobile for comfortable scrolling */
}

/* Grid for larger screens: header text center on wider screens */
@media (min-width: 900px) {
	header {
		padding: 18px 28px;
	}

	.header-text {
		text-align: center;
	}

	header .header-text {
		margin: 0 auto;
		max-width: 760px;
	}

	main {
		padding: 44px 24px;
	}

	.calendly-wrap {
		min-height: 700px;
	}
}