/* Linked titles read as headings, not body links. */
.wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}
.wp-block-post-title a:hover,
.wp-block-post-title a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}

.sg-eyebrow {
	margin-bottom: calc(-1 * var(--wp--preset--spacing--30));
	font-weight: 600;
}
.sg-eyebrow a {
	color: var(--wp--preset--color--forest);
	text-decoration: none;
}
.sg-eyebrow a::before {
	content: "\2190\00a0";
}
.sg-eyebrow a:hover {
	text-decoration: underline;
}

.sg-hero__lede {
	max-width: 46rem;
}

/* Cards: equal heights within a row, details pushed to the bottom. */
.sg-card {
	height: 100%;
	border-radius: 4px;
}
.sg-card > .sg-facts {
	margin-top: auto;
}
.sg-cards .wp-block-post-featured-image img {
	transition: transform 0.3s ease;
}
.sg-cards .wp-block-post-featured-image {
	overflow: hidden;
}
.sg-cards .wp-block-post-featured-image a:hover img {
	transform: scale(1.03);
}
.sg-reviews > li,
.sg-reviews .sg-review {
	height: 100%;
}
.sg-review.has-background {
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.sg-cards .wp-block-post-featured-image img {
		transition: none;
	}
}

/* Header, page and footer meet edge to edge; sections set their own padding. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Home page sections sit edge to edge. */
.sg-home > * {
	margin-block-start: 0;
}

/* Small label above a section heading. */
.sg-kicker {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta);
}
.has-forest-background-color .sg-kicker {
	color: var(--wp--preset--color--clay);
}

/* "All projects" style links at the end of a section heading row. */
.sg-more {
	margin: 0;
	font-weight: 600;
}
.sg-more a::after {
	content: "\00a0\2192";
}

.sg-promises h2 {
	position: relative;
	padding-top: 0.9rem;
}
/* A short terracotta rule above each promise, like the sill in the logo. */
.sg-promises h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2.25rem;
	height: 4px;
	background: var(--wp--preset--color--terracotta);
}

.sg-step__number {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--terracotta);
}

.sg-project-meta {
	margin-top: var(--wp--preset--spacing--30);
}
.sg-project-meta + .wp-block-post-title {
	margin-top: 0.35rem;
}

.sg-area-links > li {
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid rgb(30 36 34 / 0.15);
}
.sg-area-links .wp-block-post-title {
	margin: 0;
}
/* At least 24px tall, so neighbouring links are easy to tap. */
.sg-area-links .wp-block-post-title a,
.sg-footer-link a {
	display: inline-block;
	padding-block: 0.2rem;
}

/* Outline buttons keep the brand colours. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid currentColor;
	background: transparent;
	color: var(--wp--preset--color--forest);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--white);
}

/* The quote link in the main menu reads as a button on wide screens. */
@media (min-width: 600px) {
	/* Two classes on the item so this beats core's link colour for navigation items. */
	.wp-block-navigation .wp-block-navigation-item.sg-nav-cta > .wp-block-navigation-item__content {
		padding: 0.55em 1.1em;
		border-radius: 4px;
		background: var(--wp--preset--color--terracotta);
		color: var(--wp--preset--color--white);
	}
	.wp-block-navigation .wp-block-navigation-item.sg-nav-cta > .wp-block-navigation-item__content:hover {
		background: var(--wp--preset--color--forest);
		text-decoration: none;
	}
}

/* On phones the hero photo is wide rather than tall, so the first screen isn't all photo. */
@media (max-width: 781px) {
	.sg-hero-photo img {
		aspect-ratio: 4 / 3 !important;
	}
}

.sg-footer-links {
	margin: 0;
}
.sg-footer-link {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
}
.site-footer .sg-footer-link a:hover {
	text-decoration: underline;
}
.sg-footer-note {
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid rgb(247 242 234 / 0.15);
}