/* Import CSS partials here.
 * Example: @import 'partials/footer.css';
 */

/* Home Hero: swap full nav row for logo+hamburger below the mobile breakpoint. */
.gf-hero-nav-mobile {
	display: none;
}

@media (max-width: 767px) {
	.gf-hero-nav-desktop {
		display: none;
	}

	.gf-hero-nav-mobile {
		display: flex;
	}
}

/* Home Features 2: two-column layout (text + overlapping card stack). The
 * naturally-responsive flex-wrap reflows the two columns to stacked at
 * narrow widths, so no separate mobile/desktop markup is needed. Card
 * gradients/solid fills and the drop-shadow have no matching theme.json
 * token -- these are section-specific brand accent colors introduced by
 * this Figma section only (not added to theme.json since the task did not
 * call for a new global preset). */
.gf-features-2-columns {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
}

.gf-features-2-col-text {
	flex: 1 1 480px;
	max-width: 637px;
}

.gf-features-2-col-cards {
	flex: 1 1 380px;
	max-width: 460px;
	width: 100%;
}

.gf-features-2-cards {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.gf-features-2-card {
	border-radius: var(--wp--custom--border--rounded-medium);
	box-shadow: 4px 4px 7.8px rgba(0, 0, 0, 0.25);
	/* Figma 33366:15136/15476: cards are ~264px tall on a 111-112px step —
	 * a 153px overlap stack on BOTH viewports; only the last card's body is
	 * fully exposed. position:relative makes each later card paint over the
	 * previous one's text, not just its background. */
	margin-bottom: -153px;
	position: relative;
	width: 100%;
}

/* The parent group's default 24px flow gap would dilute the -153px overlap
 * to 129px; the stack owns its spacing entirely. */
.gf-features-2-cards > * + * {
	margin-block-start: 0;
}

.gf-features-2-card:last-child {
	margin-bottom: 0;
}

.gf-features-2-card-1,
.gf-features-2-card-4 {
	background-image: linear-gradient(180deg, #365af4 0%, #011bb8 100%);
}

.gf-features-2-card-2 {
	background-color: #365af4;
}

/* HFT-3: the card-2 heading wraps to 2 lines, which squeezes the icon under
 * flexWrap: nowrap; keep the icon at its intrinsic size instead. */
.gf-features-2-card-2 .wp-block-image {
	flex-shrink: 0;
}

.gf-features-2-card-3 {
	background-image: linear-gradient(180deg, #000000 41.8%, #666666 100%);
}

/* Home Features 3: "Icon Card" component re-shares the exact gradient
 * accents introduced by Home Features 2 (same Figma component, same
 * section-specific brand colors -- not theme.json tokens, see note above). */
.gf-features-3-bg {
	background-image: linear-gradient(180deg, #9fbdff 0%, rgba(255, 249, 243, 0.9) 34%);
	padding: 32px 16px;
}

@media (min-width: 1024px) {
	.gf-features-3-bg {
		padding: 100px 120px;
	}
}

.gf-features-3-heading {
	font-size: 39.5px;
	letter-spacing: -1.185px;
	line-height: 1.01;
}

@media (min-width: 768px) {
	.gf-features-3-heading {
		font-size: 48px;
		letter-spacing: -0.48px;
		line-height: 1.2;
	}
}

.gf-features-3-cards {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
}

.gf-features-3-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
}

.gf-features-3-card {
	border-radius: var(--wp--custom--border--rounded-medium);
	box-shadow: 4px 4px 7.8px rgba(0, 0, 0, 0.25);
	flex: 1 1 300px;
	min-width: 240px;
}

.gf-features-3-card-1 {
	background-image: linear-gradient(180deg, #000000 41.8%, #666666 100%);
}

.gf-features-3-card-2,
.gf-features-3-card-3,
.gf-features-3-card-4 {
	background-image: linear-gradient(180deg, #365af4 0%, #011bb8 100%);
}

.gf-features-3-card-4 {
	flex: 1 1 100%;
}

@media (min-width: 1024px) {
	.gf-features-3-card-4-inner {
		align-items: flex-end;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.gf-features-3-card-4-label-heading {
		flex: 0 0 415px;
	}

	.gf-features-3-card-4-inner > p {
		flex: 1 1 auto;
	}
}

.gf-features-3-card-heading {
	font-size: 27px;
	line-height: 1.3;
}

@media (min-width: 768px) {
	.gf-features-3-card-heading {
		font-size: 36px;
	}
}

.gf-features-3-icon-circle {
	align-items: center;
	background-color: var(--wp--preset--color--white);
	border: 3px solid var(--wp--preset--color--theme-07);
	border-radius: var(--wp--custom--border--rounded-full);
	display: flex;
	height: 46px;
	justify-content: center;
	width: 46px;
}

/* Home Split Content 1 (33366:15113 desktop / 33366:15453 mobile): CTA-photo
 * card overlapping a full-bleed blue gradient panel. The section gradient
 * angle and the photo/text overlap amount both change between breakpoints in
 * Figma; neither the gradient nor the -103px/-44px overlap has a matching
 * theme.json token, so they're literal values here (same precedent as the
 * Home Features 2/3 card gradients above -- section-specific brand accents,
 * not global tokens). */
.gf-split-content-1-bg {
	background-color: rgb(0, 20, 106);
	background-image: linear-gradient(-49.53deg, rgb(0, 20, 106) 18.314%, rgb(1, 27, 184) 57.393%);
	border-radius: 0 0 32px 32px;
	overflow: hidden;
	padding: 48px 16px;
	position: relative;
}

@media (min-width: 1024px) {
	.gf-split-content-1-bg {
		background-image: linear-gradient(-18.1deg, rgb(0, 20, 106) 18.314%, rgb(1, 27, 184) 57.393%);
		padding: 120px;
	}
}

.gf-split-content-1-bg::before {
	background-image: url(../images/gf-split-content-1-noise.jpg);
	background-size: cover;
	content: "";
	inset: 0;
	mix-blend-mode: color-dodge;
	opacity: 0.46;
	pointer-events: none;
	position: absolute;
}

.gf-split-content-1-inner {
	align-items: center;
	display: flex;
	flex-direction: column;
	margin-inline: auto;
	max-width: 1200px;
	position: relative;
}

@media (min-width: 1024px) {
	.gf-split-content-1-inner {
		flex-direction: row;
		justify-content: center;
	}
}

.gf-split-content-1-photo {
	border-radius: 32px;
	box-shadow: 6px 4px 8.6px rgba(0, 0, 0, 0.23);
	height: 380px;
	margin-bottom: -44px;
	overflow: hidden;
	position: relative;
	width: 100%;
	z-index: 1;
}

@media (min-width: 1024px) {
	.gf-split-content-1-photo {
		flex: 1 1 0;
		height: 602px;
		margin-bottom: 0;
		margin-right: -103px;
	}
}

.gf-split-content-1-photo::after {
	background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 52%);
	content: "";
	inset: 0;
	position: absolute;
}

@media (min-width: 1024px) {
	.gf-split-content-1-photo::after {
		background-image: linear-gradient(to left, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 42%);
	}
}

.gf-split-content-1-photo-img {
	height: 100%;
	margin: 0;
	width: 100%;
}

.gf-split-content-1-photo-img img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.gf-split-content-1-content {
	position: relative;
	width: 100%;
	z-index: 2;
}

@media (min-width: 1024px) {
	.gf-split-content-1-content {
		max-width: 596px;
	}
}

.gf-split-content-1-cta {
	padding-left: 0;
}

@media (min-width: 1024px) {
	.gf-split-content-1-cta {
		padding-left: 184px;
	}
}

.gf-split-content-1-button {
	background-color: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--border--rounded-full);
	width: fit-content;
}

.gf-split-content-1-button p {
	white-space: nowrap;
}

.gf-split-content-1-arrow-circle {
	align-items: center;
	background-color: #131313;
	border-radius: var(--wp--custom--border--rounded-full);
	display: flex;
	height: 33px;
	justify-content: center;
	width: 33px;
}

/* Home Feature Grid Cards (33366:15246 desktop / 33366:15585+15592+15611+15630
 * mobile): dark "our work" showcase -- kicker/heading/body over a #181818
 * background, followed by a row of framed project cards. #181818 has no
 * matching theme.json token (closest preset "black" is #000000); kept
 * literal here, same precedent as the section-specific brand colors in
 * Home Features 2/3 and Home Split Content 1 above. The Figma desktop frame
 * additionally shows two unrelated project photos bleeding in at the left/
 * right edges of the card row (a carousel peek effect from OTHER, unlabeled
 * portfolio pieces); those were intentionally not built -- the mobile frames
 * are unambiguous about this section's own content being a 3-card grid
 * (1 real card "Log Cabin Supply" + 2 unfilled placeholder "Project" cards,
 * confirmed via Figma's own broken-image placeholder graphic on the raw
 * asset export), so the row here mirrors that instead of the desktop bleed. */
.gf-feature-grid-cards-bg {
	background-color: #181818;
}

.gf-feature-grid-cards-header {
	padding: 48px 16px 32px;
	/* Figma mobile (33366:15585) insets this header 16px from the viewport
	 * edge; the parent's root global padding (24px) would stack on top of the
	 * 16px here for a 40px inset, wrapping the body copy 5 lines vs Figma's 4.
	 * Escape it the same way alignfull does. !important required: core's
	 * constrained-layout child rule sets margin-inline auto !important.
	 * Markup alignfull is not an option — it would widen the desktop header
	 * content from the passed 960px to 1200px. */
	margin-left: calc(-1 * var(--wp--style--root--padding-left, 24px)) !important;
	margin-right: calc(-1 * var(--wp--style--root--padding-right, 24px)) !important;
}

@media (min-width: 1024px) {
	.gf-feature-grid-cards-header {
		padding: 94px 120px 0;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

.gf-feature-grid-cards-heading {
	font-size: 39.5px;
	letter-spacing: -1.185px;
	line-height: 1.01;
}

@media (min-width: 768px) {
	.gf-feature-grid-cards-heading {
		font-size: 48px;
		letter-spacing: -0.48px;
		line-height: 1.2;
	}
}

.gf-feature-grid-cards-cards {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	padding: 32px 16px 48px;
}

@media (min-width: 1024px) {
	.gf-feature-grid-cards-cards {
		align-items: stretch;
		flex-direction: row;
		gap: 33px;
		justify-content: center;
		padding: 69px 60px;
	}
}

.gf-feature-grid-cards-card {
	background-color: #181818;
	flex: 1 1 100%;
}

@media (min-width: 1024px) {
	.gf-feature-grid-cards-card {
		flex: 1 1 360px;
		max-width: 390px;
	}
}

.gf-feature-grid-cards-card-heading {
	font-size: 27px;
	font-weight: 700;
	line-height: 1.3;
}

@media (min-width: 768px) {
	.gf-feature-grid-cards-card-heading {
		font-size: 33px;
		font-weight: 600;
		line-height: 1.2;
	}
}

.gf-feature-grid-cards-pills {
	row-gap: var(--wp--preset--spacing--20);
}

.gf-feature-grid-cards-pill {
	border-radius: var(--wp--custom--border--rounded-full);
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.42);
	padding: 0 12px;
}

@media (min-width: 1024px) {
	.gf-feature-grid-cards-pill {
		padding: 0 21px;
	}
}

.gf-feature-grid-cards-pill-1 {
	background-color: var(--wp--preset--color--theme-07);
}

.gf-feature-grid-cards-pill-2 {
	background-color: #011bb8;
}

.gf-feature-grid-cards-pill-3 {
	background-color: #9fbdff;
}

.gf-feature-grid-cards-pill-4 {
	background-color: #fff9f3;
}

/* Figma top-corner radius (19.71px) doesn't land on rounded-small/medium/large;
 * kept literal per the section's own precedent for out-of-scale values. */
.gf-feature-grid-cards-frame {
	border: 11px solid #181818;
	border-radius: 19.71px 19.71px 0 0;
	box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
	height: 255px;
	overflow: hidden;
}

@media (min-width: 1024px) {
	.gf-feature-grid-cards-frame {
		height: 398px;
	}
}

.gf-feature-grid-cards-frame .wp-block-image,
.gf-feature-grid-cards-frame img {
	height: 100%;
	margin: 0;
	width: 100%;
}

.gf-feature-grid-cards-frame img {
	object-fit: cover;
	object-position: top;
}

.gf-feature-grid-cards-frame-placeholder {
	background-color: #ebeef2;
}