/*
 * Border-box sizing everywhere, matching the assumption Paper's canvas makes
 * when the design was built there. Without this, elements with both a fixed
 * height/max-height and padding (e.g. .dfg-hero) render taller than intended,
 * since padding would otherwise add on top of the specified height.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * Site-wide "fade up" scroll reveal — see assets/js/scroll-animations.js.
 * `.dfg-fade-up` is the class used on plain core-block markup in
 * patterns/*.php (a class is validation-safe there; a raw data attribute on
 * a core/group wrapper is not, since WordPress can't recompute an attribute
 * it doesn't know about — that's the same "block contains invalid content"
 * bug class documented in designsystem.md). `[data-animate="fade-up"]` is
 * used freely inside custom blocks' own render.php instead, since that
 * output is never subject to block-content validation.
 *
 * The hidden starting state is gated behind `html.has-scroll-animations` —
 * a class added by a tiny inline script printed in wp_head() on the front
 * end only (see dfg_blocks_print_scroll_animations_bootstrap() in
 * functions.php). Without that gate, the block editor's canvas and pattern
 * preview thumbnails — which load this same stylesheet but never run the
 * front-end-only reveal script — would show every .dfg-fade-up element
 * stuck at opacity:0 forever, since nothing there ever adds .is-visible.
 */
html.has-scroll-animations .dfg-fade-up,
html.has-scroll-animations [data-animate="fade-up"] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

html.has-scroll-animations .dfg-fade-up.is-visible,
html.has-scroll-animations [data-animate="fade-up"].is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	html.has-scroll-animations .dfg-fade-up,
	html.has-scroll-animations [data-animate="fade-up"] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Centered Text (patterns/centered-text.php) */

.dfg-centered-text {
	display: flex;
	justify-content: center;
	background-color: var(--wp--preset--color--off-white);
	/* 116px doesn't match a spacing token — left literal per the Paper canonical instance */
	padding-block: 116px;
	padding-inline: var(--wp--preset--spacing--3-xl);
}

.dfg-centered-text__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* 28px doesn't match a spacing token (closest are sm=16 / md=24) — left literal */
	gap: 28px;
	/* 70% by Paper's design, but capped at 1440px so it doesn't keep growing
	   past a reasonable content width on very wide monitors */
	max-width: min(70%, 1440px);
	text-align: center;
}

.dfg-centered-text__eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--bold);
	letter-spacing: var(--wp--custom--tracking--widest);
	line-height: var(--wp--custom--leading--ui);
	text-transform: uppercase;
	color: var(--wp--preset--color--oxblood);
}

.dfg-centered-text__lead {
	margin: 0;
	font-weight: var(--wp--custom--font-weight--regular);
	font-size: var(--wp--preset--font-size--3-xl);
	line-height: var(--wp--custom--leading--tight);
	color: var(--wp--preset--color--black);
}

.dfg-centered-text__body {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--leading--normal);
	color: var(--wp--preset--color--charcoal);
}

.dfg-centered-text__logo {
	/* 28px base gap + 52px extra = 80px (--spacing-3xl) total above the logo,
	   matching the larger gap Paper uses between the text stack and the mark */
	margin-top: 52px;
	/* Paper reported no explicit logo dimensions for this instance — sized
	   as a reasonable default brand mark; adjust if the real asset differs. */
	max-width: 180px;
}

@media (max-width: 781px) {
	.dfg-centered-text {
		padding-inline: var(--wp--preset--spacing--md);
	}

	.dfg-centered-text__inner {
		max-width: none;
	}
}

/* Text on Image Cards (patterns/photo-cards.php + dfg/photo-card-grid + dfg/photo-card) */

.dfg-photo-cards {
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--cream);
	gap: var(--wp--preset--spacing--2-xl);
	padding-block: var(--wp--preset--spacing--4-xl);
	padding-inline: var(--wp--preset--spacing--3-xl);
}

.dfg-photo-cards__header {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	/* Content inside a full-bleed color-fill section stays capped at 1440px,
	   centered, even though the background spans the full viewport. */
	max-width: 1440px;
	width: 100%;
	margin-inline: auto;
}

.dfg-photo-cards__eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--bold);
	letter-spacing: var(--wp--custom--tracking--widest);
	line-height: var(--wp--custom--leading--ui);
	text-transform: uppercase;
	color: var(--wp--preset--color--oxblood);
}

.dfg-photo-cards__heading {
	margin: 0;
	font-weight: var(--wp--custom--font-weight--regular);
	font-size: var(--wp--preset--font-size--3-xl);
	line-height: var(--wp--custom--leading--tight);
	color: var(--wp--preset--color--black);
}

/* Tablet artboard built in Paper: less chrome padding to match the header's
   tablet treatment. The 2+1 card grid and heading-size override live on
   dfg/photo-card-grid and dfg/photo-card themselves. */
@media (min-width: 782px) and (max-width: 1024px) {
	.dfg-photo-cards {
		padding-block: var(--wp--preset--spacing--2-xl);
		padding-inline: var(--wp--preset--spacing--lg);
	}
}

@media (max-width: 781px) {
	.dfg-photo-cards {
		gap: var(--wp--preset--spacing--xl);
		padding-block: var(--wp--preset--spacing--3-xl);
		padding-inline: var(--wp--preset--spacing--md);
	}

	.dfg-photo-cards__header {
		/* 12px doesn't match a spacing token (closest are xs=8 / sm=16) — left literal */
		gap: 12px;
	}
}

/* Our Team (patterns/our-team.php + dfg/team-grid + dfg/team-member) */

.dfg-our-team {
	display: flex;
	flex-direction: column;
	/* #6C1F2B in Paper, 1 unit per channel off from --color-oxblood (#6B1F2A) — treated as the oxblood token */
	background-color: var(--wp--preset--color--oxblood);
	gap: var(--wp--preset--spacing--2-xl);
	padding-block: var(--wp--preset--spacing--4-xl);
	padding-inline: var(--wp--preset--spacing--3-xl);
}

.dfg-our-team__header {
	max-width: 1440px;
	width: 100%;
	margin-inline: auto;
}

.dfg-our-team__heading {
	margin: 0;
	font-weight: var(--wp--custom--font-weight--regular);
	font-size: var(--wp--preset--font-size--3-xl);
	line-height: var(--wp--custom--leading--tight);
	text-align: center;
	color: var(--wp--preset--color--white);
}

/* Tablet artboard built in Paper: vertical padding unchanged from desktop,
   just less side padding. The 2x2 grid lives on dfg/team-grid itself. */
@media (min-width: 782px) and (max-width: 1024px) {
	.dfg-our-team {
		padding-inline: var(--wp--preset--spacing--lg);
	}
}

@media (max-width: 781px) {
	.dfg-our-team {
		gap: var(--wp--preset--spacing--xl);
		padding-block: var(--wp--preset--spacing--3-xl);
		padding-inline: var(--wp--preset--spacing--md);
	}
}

/* Video (patterns/video.php + core/cover) */

.dfg-video {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--wp--preset--color--cream);
	gap: var(--wp--preset--spacing--xl);
	padding-block: var(--wp--preset--spacing--4-xl);
	padding-inline: var(--wp--preset--spacing--3-xl);
}

.dfg-video__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
}

.dfg-video__eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--bold);
	letter-spacing: var(--wp--custom--tracking--widest);
	line-height: var(--wp--custom--leading--ui);
	text-transform: uppercase;
	text-align: center;
	color: var(--wp--preset--color--oxblood);
}

.dfg-video__heading {
	margin: 0;
	font-weight: var(--wp--custom--font-weight--regular);
	font-size: var(--wp--preset--font-size--3-xl);
	line-height: var(--wp--custom--leading--tight);
	text-align: center;
	color: var(--wp--preset--color--black);
}

/* Side margin matches the site-wide 32px tablet convention (frame height
   override lives on dfg/video-player itself, in src/video-player/style.scss). */
@media (min-width: 782px) and (max-width: 1024px) {
	.dfg-video {
		padding-inline: var(--wp--preset--spacing--lg);
	}
}

@media (max-width: 781px) {
	.dfg-video {
		gap: var(--wp--preset--spacing--lg);
		/* 100px doesn't match a spacing token (closest is 4xl=96) — left literal */
		padding-block: 100px;
		padding-inline: var(--wp--preset--spacing--md);
	}

	.dfg-video__header {
		/* 12px doesn't match a spacing token (closest are xs=8 / sm=16) — left literal */
		gap: 12px;
	}

	.dfg-video__eyebrow {
		/* 12px/14px doesn't match a type-scale token (closest is xs=14px) — left literal */
		font-size: 12px;
		line-height: 14px;
	}

	.dfg-video__heading {
		/* 34px doesn't match a type-scale token (closest are 2xl=40 / 3xl=52) — left literal */
		font-size: 34px;
	}
}

/* Text Under Image Cards (patterns/text-under-image-cards.php + dfg/image-card-grid + dfg/image-card) */

.dfg-image-cards {
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--off-white);
	gap: var(--wp--preset--spacing--2-xl);
	/* 100px doesn't match a spacing token (closest is 4xl=96) — left literal per the Paper canonical instance */
	padding-block: 100px;
	padding-inline: var(--wp--preset--spacing--3-xl);
}

.dfg-image-cards__header {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	max-width: 1440px;
	width: 100%;
	margin-inline: auto;
}

.dfg-image-cards__eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--bold);
	letter-spacing: var(--wp--custom--tracking--widest);
	line-height: var(--wp--custom--leading--ui);
	text-transform: uppercase;
	color: var(--wp--preset--color--oxblood);
}

.dfg-image-cards__heading {
	margin: 0;
	font-weight: var(--wp--custom--font-weight--regular);
	font-size: var(--wp--preset--font-size--3-xl);
	line-height: var(--wp--custom--leading--tight);
	color: var(--wp--preset--color--black);
}

/* Tablet artboard built in Paper: less chrome padding, matching the other
   grid sections' tablet treatment. Grid columns + image height overrides
   live on dfg/image-card-grid and dfg/image-card themselves. */
@media (min-width: 782px) and (max-width: 1024px) {
	.dfg-image-cards {
		padding-block: var(--wp--preset--spacing--2-xl);
		padding-inline: var(--wp--preset--spacing--lg);
	}
}

@media (max-width: 781px) {
	.dfg-image-cards {
		/* 40px doesn't match a spacing token (closest are lg=32 / xl=48) — left literal */
		gap: 40px;
		padding-block: var(--wp--preset--spacing--3-xl);
		padding-inline: var(--wp--preset--spacing--md);
	}

	.dfg-image-cards__header {
		/* 12px doesn't match a spacing token (closest are xs=8 / sm=16) — left literal */
		gap: 12px;
	}

	.dfg-image-cards__eyebrow {
		/* 12px/14px doesn't match a type-scale token (closest is xs=14px) — left literal */
		font-size: 12px;
		line-height: 14px;
	}

	.dfg-image-cards__heading {
		/* 34px doesn't match a type-scale token (closest are 2xl=40 / 3xl=52) — left literal */
		font-size: 34px;
	}
}

/* Text & Image (patterns/text-image.php) */

.dfg-text-image {
	display: flex;
	background-color: var(--wp--preset--color--off-white);
	/* 116px doesn't match a spacing token — same recurring value as Centered Text */
	padding-block: 116px;
	padding-inline: var(--wp--preset--spacing--3-xl);
}

.dfg-text-image__block {
	gap: var(--wp--preset--spacing--lg);
	align-items: center;
	/* Core defaults to grid-template-columns: 50% 1fr (or 1fr 50% with
	   has-media-on-the-right), which isn't a true 50/50 split once the gap
	   is subtracted from the 1fr track. Force an even split explicitly. */
	grid-template-columns: 1fr 1fr !important;
	/* Content inside a full-bleed color-fill section stays capped at 1440px,
	   centered, even though the background spans the full viewport. */
	max-width: 1440px;
	width: 100%;
	margin-inline: auto;
}

.dfg-text-image__block .wp-block-media-text__content {
	padding: 0;
	display: flex;
	flex-direction: column;
	/* 28px doesn't match a spacing token — same recurring value as Centered Text */
	gap: 28px;
}

/* Image-left variant only (no has-media-on-the-right class) — text sits
   right next to the image with no breathing room otherwise. Drops on
   mobile, where the image stacks above the text instead. */
.dfg-text-image__block:not(.has-media-on-the-right) .wp-block-media-text__content {
	padding-left: 40px;
}

.dfg-text-image__block .wp-block-media-text__media img {
	height: 500px;
	width: 100%;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md);
	box-shadow: 2px 2px 16px var(--wp--custom--shadow--color);
}

.dfg-text-image__eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--bold);
	letter-spacing: var(--wp--custom--tracking--widest);
	line-height: var(--wp--custom--leading--ui);
	text-transform: uppercase;
	color: var(--wp--preset--color--oxblood);
}

.dfg-text-image__heading {
	margin: 0;
	font-weight: var(--wp--custom--font-weight--regular);
	font-size: var(--wp--preset--font-size--3-xl);
	line-height: var(--wp--custom--leading--tight);
	color: var(--wp--preset--color--black);
}

.dfg-text-image__body {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--leading--normal);
	color: var(--wp--preset--color--charcoal);
}

.dfg-text-image__list {
	margin: 0;
	padding-inline-start: 20px;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--leading--normal);
	color: var(--wp--preset--color--charcoal);
}

/* Tablet (782–1024px): each media-text column narrows to ~300-400px, but the
   image height stays a fixed 500px — reduce it so the crop doesn't get so
   tall/narrow relative to its width. Side margin matches the site-wide
   32px tablet convention (desktop 80px / tablet 32px / mobile 24px). */
@media (min-width: 782px) and (max-width: 1024px) {
	.dfg-text-image {
		padding-inline: var(--wp--preset--spacing--lg);
	}

	.dfg-text-image__block .wp-block-media-text__media img {
		height: 380px;
	}
}

@media (max-width: 781px) {
	.dfg-text-image {
		padding-block: var(--wp--preset--spacing--3-xl);
		padding-inline: var(--wp--preset--spacing--md);
	}

	.dfg-text-image__block:not(.has-media-on-the-right) .wp-block-media-text__content {
		padding-left: 0;
	}

	.dfg-text-image__eyebrow {
		/* 12px / 14px line-height don't match tokens — mobile canonical instance is smaller than desktop's --text-xs/--leading-ui */
		font-size: 12px;
		line-height: 14px;
	}

	.dfg-text-image__heading {
		/* 36px doesn't match any type-scale token (not the same as --text-hero-mobile) */
		font-size: 36px;
	}
}

/* Text & Image Collage (patterns/text-image-collage.php) */

.dfg-text-collage {
	display: flex;
	justify-content: center;
	background-color: var(--wp--preset--color--off-white);
	/* 116px doesn't match a spacing token — same recurring value as other editorial sections */
	padding-block: 116px;
	padding-inline: var(--wp--preset--spacing--3-xl);
}

.dfg-text-collage__inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--lg);
	/* Background (.dfg-text-collage, above) spans the full viewport; content
	   stays capped at 1440px, centered. Applying this to .dfg-text-collage
	   itself doesn't work — WordPress's own ".is-layout-constrained > .alignfull
	   { max-width: none }" rule has higher specificity and silently wins. */
	max-width: 1440px;
	width: 100%;
}

.dfg-text-collage__text {
	display: flex;
	flex-direction: column;
	flex: 1;
	/* 28px / 40px don't match spacing tokens — same recurring values as Text & Image */
	gap: 28px;
	padding-right: 40px;
}

/* Image-left variant only (text-image-collage-left.php puts the collage
   first in the DOM, so .dfg-text-collage__text is the last child) — text
   sits right next to the images with no breathing room otherwise. */
.dfg-text-collage__inner > .dfg-text-collage__text:last-child {
	padding-right: 0;
	padding-left: 40px;
}

.dfg-text-collage__eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--bold);
	letter-spacing: var(--wp--custom--tracking--widest);
	line-height: var(--wp--custom--leading--ui);
	text-transform: uppercase;
	color: var(--wp--preset--color--oxblood);
}

.dfg-text-collage__heading {
	margin: 0;
	font-weight: var(--wp--custom--font-weight--regular);
	font-size: var(--wp--preset--font-size--3-xl);
	line-height: var(--wp--custom--leading--tight);
	color: var(--wp--preset--color--black);
}

.dfg-text-collage__body {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--leading--normal);
	color: var(--wp--preset--color--charcoal);
}

/* The 3-image collage itself is the dfg/photo-collage block — see
   src/photo-collage/style.scss. It's a plain div + background-image per
   image (matching Paper's own technique), not core/image, specifically to
   avoid the core image-block CSS conflicts that made a core/image-based
   version of this unreliable to align. */

/* Tablet artboard built in Paper: kept the side-by-side collage layout
   (unlike mobile, which stacks) but with less chrome padding and a smaller
   heading — the 52px desktop size was wrapping to 4 lines in the narrower
   text column. Collage image heights live on dfg/photo-collage itself. */
@media (min-width: 782px) and (max-width: 1024px) {
	.dfg-text-collage {
		padding-block: var(--wp--preset--spacing--2-xl);
		padding-inline: var(--wp--preset--spacing--lg);
	}

	.dfg-text-collage__heading {
		font-size: var(--wp--preset--font-size--2-xl);
	}
}

@media (max-width: 781px) {
	.dfg-text-collage {
		padding-block: var(--wp--preset--spacing--3-xl);
		padding-inline: var(--wp--preset--spacing--md);
	}

	.dfg-text-collage__inner {
		flex-direction: column;
		/* 54px doesn't match a spacing token — mobile canonical instance */
		gap: 54px;
	}

	.dfg-text-collage__text {
		/* Same flex-basis:0%-in-a-column-parent issue as .dfg-photo-collage
		   (see that component's style.scss) — text happens to survive it
		   because real content sets a minimum height, but pin it to auto
		   sizing explicitly rather than relying on that coincidence. */
		flex: none;
		padding-right: 0;
		padding-left: 0;
	}

	.dfg-text-collage__inner .dfg-photo-collage {
		/* Paper's mobile order is image-first, text-second — reorder visually
		   without changing DOM/reading order (keeps text-first for a11y).
		   The mobile height:300px override lives in the block's own style.scss. */
		order: -1;
	}
}

/* Header (parts/header.html) */

.dfg-header {
	display: flex;
	justify-content: center;
	padding-block: var(--wp--preset--spacing--sm);
	padding-inline: var(--wp--preset--spacing--3-xl);
	background-color: var(--wp--preset--color--off-white);
	border-bottom: 1px solid var(--wp--preset--color--tan);
}

.dfg-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1440px;
	width: 100%;
}

.dfg-header__nav .wp-block-navigation__container {
	align-items: center;
	/* 40px between nav links — doesn't match a spacing token, left literal per the Paper canonical instance.
	   The larger 54px gap before the CTA button is handled separately below,
	   since core/navigation only supports a single uniform gap here. */
	gap: 40px;
}

.dfg-header__nav .wp-block-buttons {
	/* Paper's canonical instance has a 54px gap before the button, 14px more
	   than the 40px gap between nav links — added as extra margin on top of
	   the container's own 40px gap rather than changing the gap itself. */
	margin-inline-start: 14px;
}

/* Core's Navigation block CSS sets color via a specificity-boosted
   `.wp-block-navigation-item__content.wp-block-navigation-item__content`
   selector (3 classes). Matching that boost here so our color actually wins
   instead of silently losing the cascade back to inherited body text. */
.dfg-header__nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--charcoal);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: var(--wp--custom--tracking--normal);
}

.dfg-header__cta .wp-block-button__link {
	/* Nav CTA is a smaller variant of Button/Primary in the Paper file (11/24
	   padding vs. the sitewide default 14/28) — the smaller padding is kept,
	   but radius is normalized to the sitewide 8px default rather than
	   Paper's 2px, per explicit request for consistent button corners. */
	padding-block: 11px;
	padding-inline: 24px;
	border-radius: var(--wp--custom--radius--sm);
}

/* Tablet (782–1024px): logo + 2 nav links + CTA are flexWrap:nowrap, so the
   full 80px desktop padding leaves them uncomfortably tight — same content,
   just less side padding to breathe. */
@media (min-width: 782px) and (max-width: 1024px) {
	.dfg-header {
		padding-inline: var(--wp--preset--spacing--lg);
	}
}

@media (max-width: 781px) {
	.dfg-header {
		padding-inline: var(--wp--preset--spacing--md);
	}
}

/* Mobile nav overlay (core's own "mobile" overlayMenu markup): the desktop
   row (nav links + CTA) becomes a centered stack, not a left-aligned list,
   once it opens as a full-screen overlay. Not scoped under .dfg-header__nav
   as an ancestor — that class actually lands on the <ul> itself (a sibling
   of .wp-block-buttons), not on a wrapper around this whole overlay. Safe to
   leave unscoped: the footer nav uses overlayMenu:"never" and never renders
   this markup at all.

   Set via the custom property core's own stylesheet already reads for both
   this element AND the nav `<ul>` inside it
   (`align-items: var(--navigation-layout-justification-setting, ...)`, in
   both cases) rather than an `align-items` declaration of our own — core's
   rules there run 3+ classes of specificity against our 1-2 (`:where()`
   contributes none, but `.is-menu-open` /
   `.wp-block-navigation__responsive-container` still count), so a plain
   `align-items: center` would silently lose the cascade. Setting the
   variable once here works for both since custom properties inherit down
   to the `<ul>` automatically. */
.wp-block-navigation__responsive-container-content {
	--navigation-layout-justification-setting: center;
	display: flex;
	flex-direction: column;
}

.wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	text-align: center;
}

.wp-block-navigation__responsive-container-content .wp-block-buttons {
	justify-content: center;
	/* The 14px desktop offset (see .dfg-header__nav .wp-block-buttons, above)
	   was there to fine-tune spacing in a horizontal row — meaningless once
	   everything is centered in a vertical stack. */
	margin-inline-start: 0;
}

/* Close ("X") button sits flush in the top-right corner by default (core's
   own `.wp-block-navigation__responsive-container-close { top:0; right:0;
   margin:0; padding:0; }`, all single-class rules) — nudge it inward and
   give it a larger, more comfortable tap target. Scoped under `.is-menu-open`
   (2 classes) to beat those single-class core rules on specificity, the same
   pattern core itself uses for `.disable-default-overlay
   .wp-block-navigation__responsive-container-close`. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 1rem;
	right: 1rem;
	padding: 0.5rem;
}

/* Footer (parts/footer.html) */

.dfg-footer {
	display: flex;
	justify-content: center;
	padding: var(--wp--preset--spacing--3-xl);
	background-color: var(--wp--preset--color--black);
}

.dfg-footer__inner {
	display: flex;
	flex-direction: column;
	/* WordPress defaults a vertical/column flex group's align-items to
	   flex-start, which left children shrink-wrapped instead of filling
	   this wrapper's width — override it so __top/__bottom actually stretch. */
	align-items: stretch;
	gap: var(--wp--preset--spacing--xl);
	max-width: 1440px;
	width: 100%;
}

.dfg-footer__top {
	display: flex;
	gap: var(--wp--preset--spacing--lg);
}

.dfg-footer__brand {
	flex: 4 0 0%;
}

.dfg-footer__nav .wp-block-navigation__container {
	flex-direction: column;
	align-items: flex-start;
	/* 14px link gap — doesn't match a spacing token (closest is --spacing-sm at 16px), left literal */
	gap: 14px;
}

.dfg-footer__nav {
	/* Was flex:2 alongside a separate flex:4 CTA sibling in .dfg-footer__top;
	   the CTA button now lives inside this nav block (editable from the same
	   Navigation menu), so this absorbs that 4 share and space-between
	   pushes the button to the far edge, reproducing the original spacing. */
	flex: 6 0 0%;
	justify-content: space-between;
}

/* Same specificity boost as the header nav (see comment there) — without it
   this rule silently loses to core's `.content.content` selector, which is
   how the footer nav links ended up rendering as invisible black-on-black. */
.dfg-footer__nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--xs);
}

.dfg-footer__cta-wrap {
	/* No longer a flex sibling of .dfg-footer__nav — it's nested inside it now
	   (see .dfg-footer__nav comment above) — so this only needs to size to
	   its own content, not claim a flex-basis share of .dfg-footer__top. */
	flex: 0 0 auto;
	justify-content: flex-end;
}

.dfg-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
	padding-top: 40px;
	/* Translucent white hairline on the dark footer — not yet a token in designsystem.md
	   (only --color-tan exists, which is for light sections). Worth formalizing as a
	   "divider on dark" token if this treatment recurs elsewhere (e.g. Testimonials, Video sections). */
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dfg-footer__legal-nav .wp-block-navigation__container {
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--md);
}

.dfg-footer__copyright {
	margin: 0;
	/* 12px is below the documented type-scale minimum (--text-xs = 14px) on this desktop instance;
	   the mobile canonical instance uses 14px for the same content (handled in the media query below). */
	font-size: 12px;
	letter-spacing: 0.02em; /* documented outlier in designsystem.md's Known Outliers */
	line-height: var(--wp--custom--leading--snug);
	/* Muted white on dark — not yet a token in designsystem.md; same "worth formalizing" note as the divider above. */
	color: rgba(255, 255, 255, 0.6);
}

/* Same specificity boost as the header/footer main nav (see comments above) —
   core's `.content.content` selector otherwise wins over a plain 1-class rule. */
.dfg-footer__legal-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.6);
	font-size: 12px;
	letter-spacing: 0.02em;
	line-height: var(--wp--custom--leading--snug);
}

.dfg-footer__legal-nav .wp-block-navigation-item__content:hover {
	text-decoration: underline;
}

/* OneTrust's own script (cdn.cookielaw.org) applies its own styling to
   whatever it finds carrying .ot-sdk-show-settings — on the live domain it
   restyles this item as its own "Cookie Settings" control, overriding the
   rules above. !important forces this one link back in line with its five
   siblings instead of standing out with OneTrust's default look. Targets the
   <li> itself (not just its inner content) since OneTrust sometimes replaces
   the inner markup outright. */
.dfg-footer__legal-nav .ot-sdk-show-settings,
.dfg-footer__legal-nav .ot-sdk-show-settings .wp-block-navigation-item__content {
	all: unset !important;
	display: inline !important;
	color: rgba(255, 255, 255, 0.6) !important;
	font-size: 12px !important;
	font-family: inherit !important;
	letter-spacing: 0.02em !important;
	line-height: var(--wp--custom--leading--snug) !important;
	cursor: pointer !important;
}

.dfg-footer__legal-nav .ot-sdk-show-settings:hover {
	text-decoration: underline !important;
}

/* Content here degrades gracefully at tablet widths already (nav links
   stack vertically regardless of column width), but the side margin should
   still match the site-wide 32px tablet convention. */
@media (min-width: 782px) and (max-width: 1024px) {
	.dfg-footer {
		padding-inline: var(--wp--preset--spacing--lg);
	}
}

@media (max-width: 781px) {
	.dfg-footer {
		align-items: center;
		text-align: center;
		padding-block: 60px;
		padding-inline: var(--wp--preset--spacing--md);
		gap: 40px;
	}

	.dfg-footer__top {
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}

	.dfg-footer__nav {
		/* The CTA button lives inside this nav block now — stack it below the
		   link list instead of side-by-side, matching how they stacked as
		   separate .dfg-footer__top children before. */
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}

	.dfg-footer__cta-wrap {
		justify-content: center;
	}

	.dfg-footer__cta-wrap .wp-block-button__link {
		/* Mobile Footer CTA is smaller than desktop in the Paper file (12/18 vs 14/28) */
		padding-block: 12px;
		padding-inline: 18px;
	}

	.dfg-footer__nav .wp-block-navigation__container {
		align-items: center;
	}

	.dfg-footer__bottom {
		align-items: center;
		/* Mobile canonical instance uses --color-charcoal for this divider instead of translucent white */
		border-top-color: var(--wp--preset--color--charcoal);
		padding-top: 24px;
		gap: 16px;
	}

	.dfg-footer__legal-nav .wp-block-navigation__container {
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}

	.dfg-footer__legal-nav .wp-block-navigation-item__content.wp-block-navigation-item__content,
	.dfg-footer__copyright {
		font-size: var(--wp--preset--font-size--xs);
	}

	.dfg-footer__legal-nav .ot-sdk-show-settings,
	.dfg-footer__legal-nav .ot-sdk-show-settings .wp-block-navigation-item__content {
		font-size: var(--wp--preset--font-size--xs) !important;
	}
}

/* Page Hero Carousel (patterns/page-hero-carousel.php + dfg/image-carousel) */

.dfg-hero-carousel {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--wp--preset--color--off-white);
	gap: var(--wp--preset--spacing--3-xl);
	padding: var(--wp--preset--spacing--3-xl);
}

.dfg-hero-carousel__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--md);
	width: 100%;
	text-align: center;
}

.dfg-hero-carousel__eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--bold);
	letter-spacing: var(--wp--custom--tracking--widest);
	line-height: var(--wp--custom--leading--ui);
	text-transform: uppercase;
	color: var(--wp--preset--color--oxblood);
}

.dfg-hero-carousel__heading {
	margin: 0;
	font-weight: var(--wp--custom--font-weight--regular);
	font-size: var(--wp--preset--font-size--4-xl);
	letter-spacing: var(--wp--custom--tracking--tight);
	line-height: var(--wp--custom--leading--tight);
	color: var(--wp--preset--color--black);
}

.dfg-hero-carousel__body {
	margin: 0;
	max-width: 768px;
	font-size: var(--wp--preset--font-size--base);
	letter-spacing: var(--wp--custom--tracking--tight);
	line-height: var(--wp--custom--leading--normal);
	color: var(--wp--preset--color--black);
}

.dfg-hero-carousel__text .wp-block-buttons {
	justify-content: center;
}

@media (max-width: 781px) {
	.dfg-hero-carousel {
		gap: var(--wp--preset--spacing--3-xl);
		padding-block: var(--wp--preset--spacing--3-xl);
		padding-inline: var(--wp--preset--spacing--md);
	}

	.dfg-hero-carousel__heading {
		font-size: var(--wp--preset--font-size--hero-mobile);
		line-height: var(--wp--custom--leading--tight-mobile);
	}

	.dfg-hero-carousel__body {
		max-width: none;
	}
}

/* Icon Card Grid (patterns/icon-card-grid.php + dfg/benefit-card-grid + dfg/benefit-card) */

.dfg-icon-cards {
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--cream);
	gap: var(--wp--preset--spacing--2-xl);
	/* 100px doesn't match a spacing token (closest is 4xl=96) — left literal per the Paper canonical instance */
	padding-block: 100px;
	padding-inline: var(--wp--preset--spacing--3-xl);
}

.dfg-icon-cards__header {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	max-width: 1440px;
	width: 100%;
	margin-inline: auto;
}

.dfg-icon-cards__eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--bold);
	letter-spacing: var(--wp--custom--tracking--widest);
	line-height: var(--wp--custom--leading--ui);
	text-transform: uppercase;
	color: var(--wp--preset--color--oxblood);
}

.dfg-icon-cards__heading {
	margin: 0;
	font-weight: var(--wp--custom--font-weight--regular);
	font-size: var(--wp--preset--font-size--3-xl);
	line-height: var(--wp--custom--leading--tight);
	color: var(--wp--preset--color--black);
}

/* Side margin matches the site-wide 32px tablet convention (2-column grid
   override lives on dfg/benefit-card-grid itself). */
@media (min-width: 782px) and (max-width: 1024px) {
	.dfg-icon-cards {
		padding-inline: var(--wp--preset--spacing--lg);
	}
}

@media (max-width: 781px) {
	.dfg-icon-cards {
		padding-block: var(--wp--preset--spacing--3-xl);
		padding-inline: var(--wp--preset--spacing--md);
	}
}

/* Centered Testimonials (patterns/centered-testimonials.php + dfg/centered-testimonial) */

.dfg-centered-testimonials {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--wp--preset--color--oxblood);
	/* 40px doesn't match a spacing token (closest are lg=32 / xl=48) — left literal */
	gap: 40px;
	/* 120px doesn't match a spacing token (closest is 4xl=96) — left literal per the Paper canonical instance */
	padding-block: 120px;
	padding-inline: var(--wp--preset--spacing--3-xl);
}

.dfg-centered-testimonials__heading {
	margin: 0;
	font-weight: var(--wp--custom--font-weight--regular);
	font-size: var(--wp--preset--font-size--3-xl);
	letter-spacing: var(--wp--custom--tracking--tight);
	line-height: var(--wp--custom--leading--tight);
	text-align: center;
	color: var(--wp--preset--color--off-white);
}

.dfg-centered-testimonials__list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--3-xl);
	width: 100%;
}

@media (max-width: 781px) {
	.dfg-centered-testimonials {
		padding-block: var(--wp--preset--spacing--3-xl);
		padding-inline: var(--wp--preset--spacing--md);
	}

	.dfg-centered-testimonials__heading {
		font-size: var(--wp--preset--font-size--hero-mobile);
	}
}

/* FAQ (patterns/faq.php + dfg/faq-item) */

.dfg-faq {
	display: flex;
	justify-content: center;
	background-color: var(--wp--preset--color--off-white);
	padding-block: var(--wp--preset--spacing--4-xl);
	padding-inline: var(--wp--preset--spacing--3-xl);
}

.dfg-faq__inner {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--3-xl);
	max-width: 1440px;
	width: 100%;
}

.dfg-faq__intro {
	display: flex;
	flex-direction: column;
	gap: 20px;
	/* 30% by Paper's design, capped so it doesn't keep shrinking/growing oddly at extreme widths */
	width: 30%;
	position: sticky;
	top: var(--wp--preset--spacing--3-xl);
}

.dfg-faq__eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--bold);
	letter-spacing: var(--wp--custom--tracking--widest);
	line-height: var(--wp--custom--leading--ui);
	text-transform: uppercase;
	color: var(--wp--preset--color--oxblood);
}

.dfg-faq__heading {
	margin: 0;
	font-weight: var(--wp--custom--font-weight--regular);
	font-size: var(--wp--preset--font-size--2-xl);
	letter-spacing: var(--wp--custom--tracking--tight);
	line-height: var(--wp--custom--leading--tight);
	color: var(--wp--preset--color--black);
}

.dfg-faq__body {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: var(--wp--custom--leading--relaxed);
	color: var(--wp--preset--color--charcoal);
}

.dfg-faq__list {
	display: flex;
	flex-direction: column;
	width: 70%;
}

/* Tablet artboard built in Paper: the 30/70 sticky split squeezed the
   intro column to ~200px — dropped entirely rather than inventing a new
   "half-sticky" tablet-only behavior, reusing the stacked layout mobile
   already proves at 390px (heading size didn't need mobile's reduction —
   40px still reads fine at the full tablet width). */
@media (min-width: 782px) and (max-width: 1024px) {
	.dfg-faq {
		padding-block: var(--wp--preset--spacing--3-xl);
		padding-inline: var(--wp--preset--spacing--lg);
	}

	.dfg-faq__inner {
		flex-direction: column;
		/* 40px doesn't match a spacing token (closest are lg=32 / xl=48) — left literal */
		gap: 40px;
	}

	.dfg-faq__intro {
		width: 100%;
		position: static;
	}

	.dfg-faq__list {
		width: 100%;
	}
}

@media (max-width: 781px) {
	.dfg-faq {
		padding-block: var(--wp--preset--spacing--3-xl);
		padding-inline: var(--wp--preset--spacing--md);
	}

	.dfg-faq__inner {
		flex-direction: column;
		/* 40px doesn't match a spacing token (closest are lg=32 / xl=48) — left literal */
		gap: 40px;
	}

	.dfg-faq__intro {
		width: 100%;
		gap: var(--wp--preset--spacing--sm);
		position: static;
	}

	.dfg-faq__heading {
		/* 34px doesn't match a type-scale token (closest are 2xl=40 / 3xl=52) — left literal */
		font-size: 34px;
	}

	.dfg-faq__list {
		width: 100%;
	}
}