@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

body {
	font-family: 'DM Sans', sans-serif;
}

h1,
h2,
h3 {
	font-family: 'Space Grotesk', sans-serif;
}

.section-title {
	margin-bottom: 1.25rem;
	color: #102a43;
	font-family: 'Space Grotesk', sans-serif;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.section-title::after {
	content: '';
	display: block;
	width: 2.5rem;
	height: .2rem;
	margin-top: .6rem;
	background: #2f80ed;
}

.label,
.eyebrow,
.date,
.project-number {
	color: #2f80ed;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.label {
	margin-bottom: .3rem;
}

.contact-link {
	display: block;
	color: #2f80ed;
}

.contact-link:hover {
	text-decoration: underline;
}

.tag {
	border-radius: 999px;
	background: #dcecfb;
	padding: .45rem .7rem;
	color: #174a75;
	font-size: .75rem;
	font-weight: 600;
}

.job-title {
	margin-top: .3rem;
	color: #102a43;
	font-size: 1.05rem;
	font-weight: 700;
}

.job-copy {
	margin-top: .55rem;
	color: #64748b;
	font-size: .92rem;
	line-height: 1.65;
}

.timeline {
	border-left: 1px solid #cbd5e1;
	padding-left: 1.25rem;
}

.timeline-item {
	position: relative;
}

.timeline-item::before {
	content: '';
	position: absolute;
	top: .2rem;
	left: -1.6rem;
	width: .65rem;
	height: .65rem;
	border: 3px solid white;
	border-radius: 999px;
	background: #2f80ed;
	box-shadow: 0 0 0 1px #2f80ed;
}

.project-card {
	border: 1px solid #dbe4ec;
	border-radius: .65rem;
	padding: 1.1rem;
	transition: border-color 180ms ease, transform 180ms ease;
}

.project-card:hover {
	border-color: #2f80ed;
	transform: translateY(-2px);
}

.project-number {
	display: block;
	margin-bottom: 1.5rem;
}

.space-y-7> :not([hidden])~ :not([hidden]) {
	margin-top: 1rem;
}

.print-url {
	display: none;
}

.project-print-url {
	display: none;
}

@media print {
	@page {
		size: A4 portrait;
		margin: 127mm;
	}

	body,
	h1,
	h2,
	h3 {
		font-family: Arial, Helvetica, Calibri, Lato, sans-serif !important;
	}

	html,
	body {
		width: 210mm;
		height: 297mm;
		min-height: 0;
		background: white;
	}

	body {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	main {
		width: 100%;
		max-width: none;
		padding: 0;
	}

	article {
		display: grid !important;
		grid-template-columns: 40% 60%;
		grid-template-rows: 50mm auto;
		width: 100%;
		height: auto;
		min-height: 0;
		box-sizing: border-box;
		border-radius: 0;
		box-shadow: none;
	}

	article>div {
		display: contents !important;
	}

	header {
		grid-column: 1;
		grid-row: 1;
		align-self: start;
		box-sizing: border-box;
		width: 100%;
		min-height: 50mm;
		margin: 0;
		padding-top: 10px !important;
		padding-right: 16px !important;
		padding-bottom: 5px !important;
		padding-left: 22px !important;
		background: #f4f7fa !important;
		color: #4a4a4a !important;
	}

	header h1 {
		font-size: 1.45rem !important;
		line-height: 1.05 !important;
		color: #2f80ed !important;
	}

	header>div:first-child {
		display: none;
	}

	header>div:last-child {
		max-width: 100%;
	}

	header>div:last-child>p:first-child {
		margin-bottom: .35rem;
		color: #2f80ed !important;
	}

	header>div:last-child>p:nth-child(3) {
		margin-top: .25rem;
		font-size: .68rem;
		line-height: 1.2;
		color: #2f80ed !important;
	}

	header>div:last-child>div {
		margin-top: .5rem;
	}

	header nav {
		margin-top: .45rem;
	}

	header>div:last-child>div,
	header nav {
		font-size: .62rem;
		color: #4a4a4a !important;
	}

	header nav {
		gap: .25rem !important;
	}

	header nav a {
		padding: .2rem .4rem;
		font-size: .58rem;
		line-height: 1.2;
		color: #333333 !important;
		border-color: #cccccc !important;
	}

	.print-url {
		display: inline;
	}

	.screen-label {
		display: none;
	}

	.profile-link {
		border: 0;
		padding: 0;
		color: #333333 !important;
	}

	.profile-link::before {
		content: '•';
		display: inline-block;
		margin-right: .35rem;
		color: #999999;
	}

	a[href^="tel:"] svg {
		display: none;
	}

	a[href^="tel:"]::before {
		content: '☎ ';
		color: #2f80ed;
		margin-right: .3rem;
	}

	address p:first-child svg {
		display: none;
	}

	address p:first-child::before {
		content: '';
		display: inline-block;
		width: 1.2em;
		height: 1.2em;
		margin-right: .3rem;
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232f80ed"><path d="M12 0C7.58 0 4 3.58 4 8c0 5.25 8 16 8 16s8-10.75 8-16c0-4.42-3.58-8-8-8zm0 11c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/></svg>');
		background-repeat: no-repeat;
		background-size: contain;
		vertical-align: middle;
	}

	aside,
	article>div>div {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
		padding-left: 22px !important;
		padding-right: 22px !important;
	}

	aside {
		grid-column: 1;
		grid-row: 2;
		background: #f4f7fa !important;
		padding-top: 14px !important;
		margin: 0 !important;
	}

	article>div>div {
		grid-column: 2;
		grid-row: 1 / span 2;
		min-width: 0;
		min-height: 0;
	}

	aside {
		font-size: .75rem;
	}

	aside>section {
		margin-top: 1.3rem !important;
	}

	aside>section:first-child {
		margin-top: 0 !important;
	}

	aside .space-y-5> :not([hidden])~ :not([hidden]) {
		margin-top: .7rem;
	}

	.tag {
		padding: .3rem .5rem;
		font-size: .69rem;
	}

	article>div>div>section:first-child {
		margin-top: 0;
	}

	article>div>div>section:first-child p {
		font-size: .74rem;
		line-height: 1.25;
	}

	article>div>div>section {
		margin-top: .4rem !important;
	}

	.job-copy {
		font-size: .75rem;
		line-height: 1.25;
	}

	.job-title {
		font-size: .87rem;
	}

	.section-title {
		margin-bottom: .55rem;
		font-size: .71rem;
	}

	.section-title::after {
		width: 1.8rem;
		height: .14rem;
		margin-top: .35rem;
	}

	.eyebrow,
	.date,
	.project-number,
	.label {
		font-size: .62rem;
	}

	.job-copy {
		margin-top: .3rem;
	}

	article>div>div>section:first-child p+p {
		margin-top: .45rem;
	}

	.space-y-12> :not([hidden])~ :not([hidden]) {
		margin-top: .5rem !important;
	}

	section {
		break-inside: avoid;
	}

	.timeline-item,
	.project-card {
		break-inside: avoid;
	}

	.timeline {
		gap: .75rem !important;
	}

	.space-y-12> :not([hidden])~ :not([hidden]) {
		margin-top: .5rem !important;
	}

	.timeline.space-y-8> :not([hidden])~ :not([hidden]) {
		margin-top: .45rem;
	}

	.space-y-7> :not([hidden])~ :not([hidden]) {
		margin-top: .65rem;
	}

	.project-card {
		border: 0;
		padding: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.project-card .project-number,
	.project-card .job-title,
	.project-card .job-copy {
		display: none;
	}

	.project-print-url {
		display: block;
		color: #2f80ed;
		font-size: .72rem;
		font-weight: 600;
		line-height: 1.25;
		overflow-wrap: anywhere;
	}

	.project-number {
		margin-bottom: .35rem;
	}

	article>div>div>section:last-child {
		margin-bottom: 0 !important;
	}

	/* Keep the printed composition inside one physical A4 page. */
	html,
	body,
	main,
	article {
		width: 210mm !important;
		max-width: 210mm !important;
		height: 297mm !important;
		min-height: 0 !important;
		margin: 0 !important;
	}

	main {
		padding: 0 !important;
	}

	article {
		overflow: hidden !important;
	}

	article>div>div {
		overflow: hidden;
		page-break-after: avoid;
	}

	article,
	article>div,
	header,
	aside,
	section {
		page-break-after: avoid;
	}

	article>div>div>section:first-child p {
		font-size: .84rem;
		line-height: 1.22;
	}

	article>div>div .job-copy {
		font-size: .82rem;
		line-height: 1.22;
	}

	article>div>div .job-title {
		font-size: .94rem;
	}

	article>div>div .section-title {
		font-size: .75rem;
	}

	article>div>div>section {
		margin-top: .25rem !important;
	}

	article>div>div .timeline.space-y-8> :not([hidden])~ :not([hidden]) {
		margin-top: .22rem;
	}

	article>div>div .space-y-7> :not([hidden])~ :not([hidden]) {
		margin-top: .35rem;
	}

	article>div>div>section:first-child p+p {
		margin-top: .25rem;
	}

	/* Improve right-column readability while preserving the single A4 page. */
	article>div>div>section:first-child p {
		font-size: .83rem;
		line-height: 1.28;
	}

	article>div>div .job-copy {
		font-size: .81rem;
		line-height: 1.28;
	}

	article>div>div .job-title {
		font-size: .93rem;
	}

	article>div>div .section-title {
		font-size: .75rem;
	}

	article>div>div>section {
		margin-top: .3rem !important;
	}

	article>div>div .timeline.space-y-8> :not([hidden])~ :not([hidden]) {
		margin-top: .3rem;
	}

	article>div>div .space-y-7> :not([hidden])~ :not([hidden]) {
		margin-top: .45rem;
	}

	article>div>div>section:first-child p+p {
		margin-top: .3rem;
	}
}