/*
Theme Name: DFI2026
Theme URI: https://dfiproductions.com
Author: DFI Productions
Author URI: https://dfiproductions.com
Description: Bare-bones classic WordPress theme for DFI Productions. Built from scratch as a clean foundation.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: dfi2026
*/

* {
	box-sizing: border-box;
}

html {
	overflow-x: clip;
	overflow-anchor: none;
}

.site-header-sentinel {
	height: 1px;
	margin-bottom: -1px;
}

body {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	margin: 0;
	overflow-x: clip;
	font-family: var(--dfi-site-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	line-height: 1.5;
	color: #111;
	background: #fff;
}

h2 {
	font-family: var(--dfi-h2-font, inherit);
	color: var(--dfi-h2-color, inherit);
	font-weight: var(--dfi-h2-weight, 700);
}

h3 {
	color: var(--dfi-h3-color, inherit);
	font-weight: var(--dfi-h3-weight, 700);
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

.site-footer {
	position: relative;
	overflow: hidden;
	background: var(--dfi-footer-bg, #222222);
	border-top: var(--dfi-footer-border-top-width, 0) solid var(--dfi-footer-border-top-color, transparent);
}

.site-header {
	background: var(--dfi-header-bg, #ffffff);
	font-family: var(--dfi-header-font, inherit);
}

/* Sub-page title banner (inc/page-title.php) — full-width, directly
   below the nav on every singular page/post except the front page. */

.dfi-page-title {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--dfi-pt-padding, 4rem) 1rem;
	background-image: var(--dfi-pt-bg-image, none);
	background-size: cover;
	background-position: var(--dfi-pt-bg-position, center);
	border-top: var(--dfi-pt-border-top-width, 0) solid var(--dfi-pt-border-top-color, transparent);
	border-bottom: var(--dfi-pt-border-bottom-width, 0) solid var(--dfi-pt-border-bottom-color, transparent);
	overflow: hidden;
}

.dfi-page-title__overlay {
	position: absolute;
	inset: 0;
	background: var(--dfi-pt-overlay, transparent);
	z-index: 0;
}

.dfi-page-title__heading {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: var(--dfi-pt-title-size, 2.5rem);
	color: var(--dfi-pt-text-color, #ffffff);
	text-shadow: 0 0 var(--dfi-pt-shadow-blur, 0px) var(--dfi-pt-shadow-color, transparent);
}

/* Standard layout, mobile overrides — same breakpoint used for the
   header/nav/footer elsewhere in the theme. Border color/style stay
   shared with desktop; only the width longhand is overridden here. */
@media (max-width: 768px) {
	.dfi-page-title {
		padding: var(--dfi-pt-padding-mobile, 2rem) 1rem;
		background-position: var(--dfi-pt-bg-position-mobile, center);
		border-top-width: var(--dfi-pt-border-top-width-mobile, 0);
		border-bottom-width: var(--dfi-pt-border-bottom-width-mobile, 0);
	}

	.dfi-page-title__heading {
		font-size: var(--dfi-pt-title-size-mobile, 1.75rem);
	}
}

/* Enhanced sub-page title layout — opt-in per page (see the "Page Title
   Options" meta box). Overrides the standard banner's centered-over-
   image look above with a left-aligned text column and the image
   right-justified, faded into the wash color on its left edge. */

.dfi-page-title--enhanced {
	justify-content: flex-start;
	text-align: left;
	padding: 0;
	background-image: none;
	background: var(--dfi-pt-enhanced-wash, #ffffff);
	min-height: var(--dfi-pt-enhanced-height, 32rem);
}

.dfi-page-title__enhanced-text {
	position: relative;
	z-index: 1;
	width: var(--dfi-pt-enhanced-text-width, 50%);
	box-sizing: border-box;
	padding: 3rem 4vw;
}

.dfi-page-title__enhanced-small {
	margin: 0 0 0.75rem;
	font-size: var(--dfi-pt-enhanced-small-size, 1rem);
	line-height: var(--dfi-pt-enhanced-small-line-height, 1);
	color: var(--dfi-pt-enhanced-small-color, #4a90d9);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.dfi-page-title__enhanced-sep {
	display: block;
	width: 48px;
	height: 3px;
	margin: 0 0 1.5rem;
	background: var(--dfi-pt-enhanced-small-color, #4a90d9);
}

.dfi-page-title__enhanced-headline {
	margin: 0 0 1.25rem;
	font-size: var(--dfi-pt-enhanced-headline-size, 2.75rem);
	font-weight: var(--dfi-pt-enhanced-headline-weight, 400);
	line-height: var(--dfi-pt-enhanced-headline-line-height, 1);
	color: var(--dfi-pt-enhanced-headline-color, #1a1a1a);
}

.dfi-page-title__enhanced-subtext {
	margin: 0;
	font-size: var(--dfi-pt-enhanced-subtext-size, 1.1rem);
	line-height: var(--dfi-pt-enhanced-subtext-line-height, 1);
	color: var(--dfi-pt-enhanced-subtext-color, #444444);
}

.dfi-page-title__enhanced-headline:last-child,
.dfi-page-title__enhanced-subtext:last-child {
	margin-bottom: 0;
}

.dfi-page-title__enhanced-image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--dfi-pt-enhanced-image-width, 60%);
	background-size: cover;
	background-position: var(--dfi-pt-bg-position, center);
}

.dfi-page-title__enhanced-image::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, var(--dfi-pt-enhanced-wash, #ffffff) 0%, var(--dfi-pt-enhanced-wash, #ffffff) 12%, transparent 55%);
}

/* Mobile: no room for the side-by-side split, so the image runs full
   width and the text overlays its bottom edge instead of sitting beside
   it — a semi-transparent panel behind the text keeps it readable
   without needing the desktop fade (which only makes sense running
   left-to-right across extra horizontal space this layout no longer
   has). */

@media (max-width: 900px) {
	.dfi-page-title--enhanced {
		display: block;
		position: relative;
		min-height: var(--dfi-pt-enhanced-height-mobile, 26rem);
	}

	.dfi-page-title__enhanced-image {
		position: absolute;
		inset: 0;
		width: 100%;
	}

	.dfi-page-title__enhanced-image::before {
		content: none;
	}

	.dfi-page-title__enhanced-text {
		position: absolute;
		z-index: 1;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		padding: var(--dfi-pt-enhanced-mobile-text-padding-vertical, 1.75rem) var(--dfi-pt-enhanced-mobile-text-padding-horizontal, 1.25rem);
		background: var(--dfi-pt-enhanced-mobile-bg, rgba(255,255,255,0.85));
	}

	.dfi-page-title__enhanced-small {
		font-size: var(--dfi-pt-enhanced-small-size-mobile, var(--dfi-pt-enhanced-small-size, 1rem));
		line-height: var(--dfi-pt-enhanced-small-line-height-mobile, 1);
	}

	.dfi-page-title__enhanced-headline {
		font-size: var(--dfi-pt-enhanced-headline-size-mobile, var(--dfi-pt-enhanced-headline-size, 2.75rem));
		line-height: var(--dfi-pt-enhanced-headline-line-height-mobile, 1);
	}

	.dfi-page-title__enhanced-subtext {
		font-size: var(--dfi-pt-enhanced-subtext-size-mobile, var(--dfi-pt-enhanced-subtext-size, 1.1rem));
		line-height: var(--dfi-pt-enhanced-subtext-line-height-mobile, 1);
	}
}

/* Breaks an element out of .site-main's max-width to span the full
   viewport, regardless of how deeply it's nested in constrained
   content. Reusable beyond just Side-by-Side Boxes.

   Uses --dfi-viewport-width (assets/js/full-bleed.js) instead of the
   100vw unit directly — 100vw includes the scrollbar's reserved space,
   but the page's actual visible width doesn't, so a raw 100vw bleeds a
   few pixels past the true right edge and throws off the left/right
   balance. The JS measures document.documentElement.clientWidth, which
   excludes the scrollbar (and naturally reflects pages short enough to
   have no scrollbar at all), keeping the two edges symmetric either
   way. The 100vw fallback only applies for the instant before that JS
   runs or if it's unavailable. */

.dfi-full-bleed {
	width: var(--dfi-viewport-width, 100vw);
	margin-left: calc(50% - (var(--dfi-viewport-width, 100vw) / 2));
	margin-right: calc(50% - (var(--dfi-viewport-width, 100vw) / 2));
}

/* Side-by-Side Box shortcode (inc/side-by-side.php) */

.dfi-side-by-side {
	display: flex;
	align-items: stretch;
	gap: var(--dfi-sbs-gap, 0px);
}

.dfi-side-by-side__box {
	flex: 1 1 50%;
	box-sizing: border-box;
	min-height: var(--dfi-sbs-box-min-size, 400px);
	display: flex;
	align-items: center;
	padding: var(--dfi-sbs-box-padding, 3rem);
	background: var(--dfi-sbs-box-bg, transparent);
	background-repeat: no-repeat;
	background-size: var(--dfi-sbs-box-bg-size, auto);
	background-position: var(--dfi-sbs-box-bg-position, center);
}

.dfi-side-by-side__content {
	width: 100%;
	color: var(--dfi-sbs-text-color, #111111);
}

@media (max-width: 768px) {
	.dfi-side-by-side {
		flex-direction: column;
	}
}

.site-main {
	flex: 1 0 auto;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

/* .dfi-blog-page-header/.dfi-blog-grid (archive.php, home.php) don't
   get an .entry-content wrapper of their own, so they need the same
   padding .entry-content gets below — .dfi-blog-grid's own
   .dfi-full-bleed variant already overrides this with its own more
   specific (padding: 0 ...) rule, so its full-width case is unaffected. */

.dfi-blog-page-header,
.dfi-blog-grid {
	padding: 1rem;
}

/* .entry-content itself carries no padding — it's applied per direct
   child instead (below), skipping .dfi-full-bleed ones (Side-by-Side,
   Image Text Panel), so those can sit completely flush: against the
   header/footer above/below, and against the viewport's left/right
   edges. A shared .entry-content padding can't do this on its own —
   the negative-margin breakout that makes .dfi-full-bleed span the
   viewport (see that rule) only ever touches left/right margin, never
   top/bottom, so a full-bleed block still picked up a 1rem gap above/
   below from any padding still sitting on its container.

   Left/right padding is safe to give every non-full-bleed child
   independently — unlike vertical spacing, adjacent horizontal padding
   on siblings doesn't add up, each is just its own inset from the same
   edges. Top/bottom padding, on the other hand, only goes on the
   first/last child specifically: giving it to every child would stack
   between ordinary elements in the middle (one's padding-bottom plus
   the next one's padding-top), where previously there was none —
   between-sibling spacing there has always come from the elements' own
   margins, not .entry-content's padding, and stays that way. */

.entry-content > *:not(.dfi-full-bleed) {
	padding-left: 1rem;
	padding-right: 1rem;
}

.entry-content > *:not(.dfi-full-bleed):first-child {
	padding-top: 1rem;
}

.entry-content > *:not(.dfi-full-bleed):last-child {
	padding-bottom: 1rem;
}

/* Header row: logo left, nav + mobile toggle right */

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1rem;
	transition: padding 0.3s ease;
}

/* Sticky, collapsible header (opt-in via Header & Navigation options).
   Pinning is pure CSS; assets/js/sticky-header.js toggles .is-scrolled
   once the page has scrolled past the top bar's height. */

.site-header--sticky {
	position: sticky;
	top: 0;
	z-index: 900;
}

.site-header--sticky .custom-logo {
	transition: height 0.3s ease;
}

.site-header--sticky.is-scrolled .site-header__inner {
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
}

.site-header--sticky.is-scrolled .custom-logo {
	height: calc(var(--dfi-logo-height, 70px) * 0.55);
}

/* Home Page Logo Override (opt-in via Header & Navigation options): lets
   the front page show a bigger "uncollapsed" logo than the rest of the
   site. --dfi-logo-height-home is only printed into :root at all when the
   option is on, so this falls back to the normal --dfi-logo-height
   otherwise — no PHP branch needed here. min-width-scoped so it never
   fights with the mobile logo size below; :not(.is-scrolled) means it
   backs off once collapsed, same as the un-overridden logo does. */

@media (min-width: 769px) {
	body.home .site-header:not(.is-scrolled) .custom-logo {
		height: var(--dfi-logo-height-home, var(--dfi-logo-height, 70px));
	}
}

/* Transparent home header (opt-in, front page only, meant to pair with
   a Vimeo video assigned to that page): the header floats over the top
   of the video instead of pushing it down, transparent until scrolled,
   then behaves like the normal sticky/collapsed header — solid
   background, pinned to the viewport. .site-hero-wrap is the
   positioning context the header's absolute state anchors to. */

.site-hero-wrap {
	position: relative;
}

.site-header--transparent-home {
	position: absolute;
	inset: 0 0 auto 0;
	background: transparent;
	transition: background-color 0.3s ease;
	z-index: 20;
}

.site-header--transparent-home.is-scrolled {
	position: fixed;
	inset: 0 0 auto 0;
	background: var(--dfi-header-bg, #ffffff);
	z-index: 900;
}

/* Top-level nav items get their own color while the header is
   transparent (readable over a video/photo), fading back to the
   normal nav color once scrolled/filled in — .primary-menu a already
   has a color transition, so this just supplies the override value.

   Desktop only (matches the theme's usual 768px breakpoint): the
   transparent header is a desktop-only effect (the mobile menu is an
   opaque slide-out panel, not floating over the video), but
   .site-header--transparent-home is set by PHP off is_front_page(),
   not viewport width, so without this media query these selectors'
   extra specificity over .primary-menu a's own mobile color rule
   (style.css's mobile block below) would win at any width and leak
   both the transparent nav color and its text-shadow into the mobile
   flyout menu. */

@media (min-width: 769px) {
	.site-header--transparent-home:not(.is-scrolled) .primary-menu > li > a {
		color: var(--dfi-transparent-nav-color, #ffffff);
		text-shadow: 0 0 var(--dfi-transparent-nav-shadow-blur, 0px) var(--dfi-transparent-nav-shadow-color, transparent);
	}

	.site-header--transparent-home:not(.is-scrolled) .primary-menu > li > a:hover,
	.site-header--transparent-home:not(.is-scrolled) .primary-menu > li > a:focus {
		color: var(--dfi-transparent-nav-hover-color, #cccccc);
	}
}

/* Mobile counterpart of the above: unlike the nav list (an opaque
   slide-out panel on mobile, handled entirely above), the header bar
   itself — and the hamburger/X toggle button sitting in it — stays
   transparent on mobile too, floating over the video the same as
   desktop, right up until .is-scrolled fills it in. Reuses
   --dfi-transparent-nav-color rather than a separate hardcoded white,
   so it stays in sync with the Transparent Nav Text Color option
   (which already defaults to white) instead of drifting from it if
   that's ever changed. */

@media (max-width: 768px) {
	.site-header--transparent-home:not(.is-scrolled) .menu-toggle__icon {
		color: var(--dfi-transparent-nav-color, #ffffff);
	}
}

.site-branding {
	min-width: 0;
}

.custom-logo {
	display: block;
	height: var(--dfi-logo-height, 70px);
	width: var(--dfi-logo-width, auto);
}

/* Header Logo Overlay: an alternate logo shown only while the header is
   transparent over the Vimeo video, cross-fading to the regular logo as
   the header fills in on scroll (see the "Header Logo Overlay" option
   under Header & Navigation). Only present in the markup at all when a
   transparent-home header has an overlay image set. */

.site-branding__logo-stack {
	position: relative;
	display: inline-block;
}

.site-branding__logo-stack .custom-logo {
	transition: opacity 0.3s ease, height 0.3s ease;
}

.site-branding__overlay-logo {
	position: absolute;
	inset: 0;
	height: 100%;
	width: auto;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.site-header--transparent-home:not(.is-scrolled) .site-branding__logo-stack .custom-logo {
	opacity: 0;
}

.site-header--transparent-home:not(.is-scrolled) .site-branding__overlay-logo {
	opacity: 1;
}

.site-title {
	margin: 0;
	font-size: 1.25rem;
}

.site-description {
	margin: 0;
	font-size: 0.85rem;
}

/* Mobile hamburger toggle */

.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0.25rem;
	cursor: pointer;
	line-height: 1;
}

.menu-toggle__icon {
	font-size: var(--dfi-toggle-size, 1.5rem);
	color: var(--dfi-toggle-color, #111111);
}

.mobile-menu-close {
	display: none;
}

.menu-toggle__icon--close {
	display: none;
}

.site-header.nav-is-open .menu-toggle__icon--open {
	display: none;
}

.site-header.nav-is-open .menu-toggle__icon--close {
	display: inline-block;
}

/* Primary menu — desktop: horizontal row with hover dropdowns */

.primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--dfi-nav-gap, 1.5rem);
}

.primary-menu li {
	position: relative;
}

.primary-menu a {
	display: block;
	text-decoration: none;
	white-space: nowrap;
	font-size: var(--dfi-nav-size, 1rem);
	font-weight: var(--dfi-nav-weight, 400);
	color: var(--dfi-nav-color, #111111);
	padding: 0.5rem 0;
	/* Always a real (if zero/transparent) shadow value, never the literal
	   none keyword — see the transparent-header override below for why:
	   browsers don't reliably transition to/from none. */
	text-shadow: 0 0 0 transparent;
	transition: color 0.2s ease-in, text-shadow 0.3s ease;
}

.primary-menu > li > a:hover,
.primary-menu > li > a:focus {
	color: var(--dfi-nav-hover-color, #555555);
}

.primary-menu .sub-menu {
	list-style: none;
	margin: var(--dfi-dropdown-spacing, 0px) 0 0;
	padding: var(--dfi-dropdown-padding, 8px);
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--dfi-dropdown-bg, #ffffff);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	z-index: 20;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: none;
	transition: opacity var(--dfi-dropdown-speed, 200ms) ease, transform var(--dfi-dropdown-speed, 200ms) ease, visibility 0s linear var(--dfi-dropdown-speed, 200ms);
}

/* Invisible bridge over the gap created by --dfi-dropdown-spacing, so
   moving the pointer from the nav item into the dropdown doesn't lose
   :hover in the empty space between them. */
.primary-menu > li > .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(-1 * var(--dfi-dropdown-spacing, 0px));
	height: var(--dfi-dropdown-spacing, 0px);
}

.primary-menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
	margin: 0;
}

.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition-delay: 0s;
}

/* Animation variants: starting (hidden) transform per type. The visible
   state above always wins (higher specificity), so this only affects
   the closed/entering position, letting the transition animate between. */
.main-navigation[data-dropdown-anim="slide-down"] .sub-menu {
	transform: translateY(-10px);
}

.main-navigation[data-dropdown-anim="slide-up"] .sub-menu {
	transform: translateY(10px);
}

.main-navigation[data-dropdown-anim="zoom"] .sub-menu {
	transform: scale(0.95);
	transform-origin: top left;
}

.main-navigation[data-dropdown-anim="none"] .sub-menu {
	transition: none;
}

.primary-menu .sub-menu li:not(:last-child) > a {
	border-bottom: var(--dfi-dropdown-sep-width, 0px) solid var(--dfi-dropdown-sep-color, transparent);
}

.primary-menu .sub-menu a {
	padding: 0.5rem 1.25rem;
	font-size: var(--dfi-dropdown-size, 0.95rem);
	font-weight: var(--dfi-dropdown-weight, 400);
	color: var(--dfi-dropdown-color, #111111);
	background-color: var(--dfi-dropdown-item-bg, transparent);
}

.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus {
	color: var(--dfi-dropdown-hover-color, #555555);
	background-color: var(--dfi-dropdown-item-hover-bg, transparent);
}

.submenu-toggle {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 2.5rem;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--dfi-mobile-arrow-color, inherit);
}

.submenu-toggle i {
	transition: transform 0.15s ease;
}

/* Mobile: hamburger flyout */

@media (max-width: 768px) {
	.menu-toggle {
		display: inline-flex;
		position: relative;
		z-index: 1001;
	}

	.custom-logo {
		height: var(--dfi-logo-height-mobile, 50px);
		width: var(--dfi-logo-width-mobile, auto);
	}

	.site-header--sticky.is-scrolled .custom-logo {
		height: calc(var(--dfi-logo-height-mobile, 50px) * 0.55);
	}

	.site-header__inner {
		flex-wrap: wrap;
	}

	body.dfi-nav-open {
		overflow: hidden;
	}

	/* Off-canvas slide-in panel, full height, overlays everything. */
	.main-navigation {
		position: fixed;
		top: 0;
		left: 0;
		width: var(--dfi-mobile-panel-width, 80%);
		max-width: 100%;
		height: 100vh;
		height: 100dvh;
		background-color: var(--dfi-mobile-panel-bg, #ffffff);
		background-image:
			linear-gradient(var(--dfi-mobile-panel-overlay, rgba(0, 0, 0, 0)), var(--dfi-mobile-panel-overlay, rgba(0, 0, 0, 0))),
			var(--dfi-mobile-panel-bg-image, none);
		background-size: cover;
		background-position: var(--dfi-mobile-panel-bg-position, center);
		overflow-y: auto;
		z-index: 1000;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
		box-shadow: none;
	}

	.site-header.nav-is-open .main-navigation {
		transform: translateX(0);
		box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
	}

	.mobile-menu-close {
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		padding: 1rem;
		background: none;
		border: 0;
		cursor: pointer;
		font-size: 1.5rem;
		color: var(--dfi-mobile-nav-color, #111111);
	}

	.primary-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
		padding-bottom: 2rem;
	}

	.primary-menu a {
		font-size: var(--dfi-mobile-nav-size, 1.1rem);
		font-weight: var(--dfi-mobile-nav-weight, 600);
		color: var(--dfi-mobile-nav-color, #111111);
		background-color: var(--dfi-mobile-nav-item-bg, transparent);
		padding: 0.85rem 1.25rem;
	}

	.primary-menu > li > a:hover,
	.primary-menu > li > a:focus {
		color: var(--dfi-mobile-nav-hover-color, #555555);
		background-color: var(--dfi-mobile-nav-item-hover-bg, transparent);
	}

	.primary-menu > li:not(:last-child) > a,
	.primary-menu .sub-menu li:not(:last-child) > a {
		border-bottom: var(--dfi-mobile-sep-width, 0px) solid var(--dfi-mobile-sep-color, transparent);
	}

	.menu-item-has-children > a {
		padding-right: 2.5rem;
	}

	.primary-menu .sub-menu {
		position: static;
		display: none;
		min-width: 0;
		box-shadow: none;
		background: var(--dfi-mobile-sub-bg, transparent);
		padding: 0;
		margin: 0;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		transition: none;
	}

	.primary-menu .sub-menu a {
		font-size: var(--dfi-mobile-sub-size, 0.95rem);
		font-weight: var(--dfi-mobile-sub-weight, 400);
		color: var(--dfi-mobile-sub-color, #333333);
		background-color: var(--dfi-mobile-sub-item-bg, transparent);
		padding-left: 2.25rem;
	}

	.primary-menu .sub-menu a:hover,
	.primary-menu .sub-menu a:focus {
		color: var(--dfi-mobile-sub-hover-color, #555555);
		background-color: var(--dfi-mobile-sub-item-hover-bg, transparent);
	}

	.primary-menu > li > .sub-menu::before {
		display: none;
	}

	.primary-menu li.submenu-is-open > .sub-menu {
		display: block;
	}

	.submenu-toggle {
		display: flex;
	}

	.submenu-is-open > .submenu-toggle i {
		transform: rotate(180deg);
	}
}

.top-bar {
	position: relative;
	width: 100%;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 1rem;
	background: var(--dfi-topbar-bg, #222222);
	font-family: var(--dfi-header-font, inherit);
	overflow: hidden;
}

.top-bar__left {
	min-width: 0;
	display: flex;
	align-items: center;
	padding: 0.4rem 0 0.4rem 1rem;
}

.top-bar__address {
	color: var(--dfi-address-color, #ffffff);
	font-size: var(--dfi-address-size, 0.85rem);
	font-weight: var(--dfi-address-weight, 400);
	white-space: nowrap;
	font-variant-numeric: lining-nums;
}

.top-bar__right {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.4rem 1rem;
	z-index: 1;
}

.top-bar__accent {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--dfi-topbar-accent-bg, transparent);
	z-index: 0;
}

.top-bar__accent--angled {
	left: -2.5rem;
	clip-path: polygon(2.5rem 0, 100% 0, 100% 100%, 0 100%);
}

.top-bar__social {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.top-bar__social-link {
	display: inline-flex;
	color: var(--dfi-social-color, #ffffff);
	font-size: var(--dfi-social-size, 1rem);
	line-height: 1;
	text-decoration: none;
}

.top-bar__phone {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--dfi-phone-color, #ffffff);
	font-size: var(--dfi-phone-size, 0.85rem);
	font-weight: var(--dfi-phone-weight, 400);
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
}

.top-bar__phone-icon {
	font-size: var(--dfi-phone-icon-size, 1rem);
}

.top-bar__phone-label {
	font-size: var(--dfi-phone-size, 0.85rem);
}

.top-bar__phone-number {
	font-size: var(--dfi-phone-size, 0.85rem);
	font-variant-numeric: lining-nums tabular-nums;
}

@media (max-width: 600px) {
	.top-bar__phone-label,
	.top-bar__phone-number {
		display: none;
	}
}

/* Address text and icon sizes (social + phone) get their own mobile
   size, same 768px breakpoint the rest of the theme uses — separate
   from the 600px rule just above, which hides the phone number/label
   text entirely rather than resizing it (so there's no Mobile size for
   that specific text, just the icon beside it). */

@media (max-width: 768px) {
	.top-bar__address {
		font-size: var(--dfi-address-size-mobile, 0.85rem);
	}

	.top-bar__social-link {
		font-size: var(--dfi-social-size-mobile, 1rem);
	}

	.top-bar__phone-icon {
		font-size: var(--dfi-phone-icon-size-mobile, 1rem);
	}
}

/* Site footer: logo, contact-info lines, credit link, diagonal underlay */

.site-footer__underlay,
.site-footer__underlay-stripe {
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--dfi-footer-underlay-width-pct, 45%);
	pointer-events: none;
}

.site-footer__underlay--right,
.site-footer__underlay-stripe--right {
	right: 0;
}

.site-footer__underlay--left,
.site-footer__underlay-stripe--left {
	left: 0;
}

.site-footer__underlay {
	z-index: 1;
}

.site-footer__underlay-stripe {
	z-index: 0;
	background: var(--dfi-footer-underlay-stripe-color, #ffffff);
}

.site-footer__underlay--color.site-footer__underlay--right {
	background: var(--dfi-footer-underlay-fill, transparent);
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--dfi-footer-underlay-cut, 0) 100%);
}

.site-footer__underlay--color.site-footer__underlay--left {
	background: var(--dfi-footer-underlay-fill, transparent);
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--dfi-footer-underlay-cut, 0)) 100%, 0 100%);
}

.site-footer__underlay-stripe--right {
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--dfi-footer-underlay-cut, 0) 100%);
	transform: translateX(calc(var(--dfi-footer-underlay-stripe-width, 8px) * -1));
}

.site-footer__underlay-stripe--left {
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--dfi-footer-underlay-cut, 0)) 100%, 0 100%);
	transform: translateX(var(--dfi-footer-underlay-stripe-width, 8px));
}

/* "Wide at Bottom" — the mirror image of the default "Wide at Top" cut above. */

.site-footer__underlay--color.site-footer__underlay--right.site-footer__underlay--angle-bottom {
	clip-path: polygon(var(--dfi-footer-underlay-cut, 0) 0, 100% 0, 100% 100%, 0 100%);
}

.site-footer__underlay--color.site-footer__underlay--left.site-footer__underlay--angle-bottom {
	clip-path: polygon(0 0, calc(100% - var(--dfi-footer-underlay-cut, 0)) 0, 100% 100%, 0 100%);
}

.site-footer__underlay-stripe--right.site-footer__underlay-stripe--angle-bottom {
	clip-path: polygon(var(--dfi-footer-underlay-cut, 0) 0, 100% 0, 100% 100%, 0 100%);
}

.site-footer__underlay-stripe--left.site-footer__underlay-stripe--angle-bottom {
	clip-path: polygon(0 0, calc(100% - var(--dfi-footer-underlay-cut, 0)) 0, 100% 100%, 0 100%);
}

.site-footer__underlay--image.site-footer__underlay--right,
.site-footer__underlay--image.site-footer__underlay--left {
	background-image: var(--dfi-footer-underlay-image, none);
	background-size: cover;
	background-position: center;
}

.site-footer__main {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding: 2rem 2rem 2rem;
}

.site-footer__logo img {
	display: block;
	width: var(--dfi-footer-logo-width, auto);
	height: var(--dfi-footer-logo-height, 50px);
}

.site-footer__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

.site-footer__info-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--dfi-footer-text-color, #ffffff);
	font-size: var(--dfi-footer-text-size, 0.95rem);
	font-weight: var(--dfi-footer-text-weight, 400);
}

.site-footer__info-icon {
	flex-shrink: 0;
	width: calc(var(--dfi-footer-icon-size, 1rem) * 1.3);
	text-align: center;
	color: var(--dfi-footer-icon-color, #ffffff);
	font-size: var(--dfi-footer-icon-size, 1rem);
}

.site-footer__info-text {
	color: inherit;
	text-decoration: none;
}

a.site-footer__info-text:hover,
a.site-footer__info-text:focus {
	opacity: 0.8;
}

.site-footer__social {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.25rem;
}

.site-footer__social-link {
	display: inline-flex;
	color: var(--dfi-footer-icon-color, #ffffff);
	font-size: var(--dfi-footer-icon-size, 1rem);
	line-height: 1;
	text-decoration: none;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus {
	opacity: 0.8;
}

.site-footer__credit {
	position: absolute;
	left: 50%;
	bottom: 0.5rem;
	transform: translateX(-50%);
	z-index: 2;
	text-align: center;
}

.site-footer__credit a {
	font-size: 0.7rem;
	color: var(--dfi-footer-text-color, #ffffff);
	opacity: 0.5;
	text-decoration: underline;
}

.site-footer__credit a:hover,
.site-footer__credit a:focus {
	opacity: 0.8;
}

@media (max-width: 768px) {
	.site-footer__underlay,
	.site-footer__underlay-stripe {
		display: none;
	}

	.site-footer__main {
		flex-direction: column;
		justify-content: center;
		text-align: center;
		padding: 1.5rem 1rem 0.5rem;
	}

	.site-footer__logo img {
		height: var(--dfi-footer-logo-height-mobile, 40px);
		width: var(--dfi-footer-logo-width-mobile, auto);
	}

	.site-footer__info {
		align-items: center;
	}

	.site-footer__info-row {
		font-size: var(--dfi-footer-text-size-mobile, 0.95rem);
	}

	.site-footer__info-icon {
		width: calc(var(--dfi-footer-icon-size-mobile, 1rem) * 1.3);
		font-size: var(--dfi-footer-icon-size-mobile, 1rem);
	}

	.site-footer__social-link {
		font-size: var(--dfi-footer-icon-size-mobile, 1rem);
	}

	.site-footer__credit {
		position: static;
		left: auto;
		bottom: auto;
		transform: none;
		margin-top: 1.5rem;
		padding-bottom: 0.5rem;
	}
}

/* Blog (home.php, archive.php, single.php, inc/blog-options.php) */

.dfi-blog-page-header {
	max-width: 720px;
	margin: 0 auto 3rem;
	text-align: center;
}

.dfi-blog-page-header__title {
	font-size: 2.5rem;
	margin: 0 0 0.75rem;
	color: var(--dfi-blog-title-color, #131313);
}

.dfi-blog-page-header__intro {
	color: var(--dfi-blog-excerpt-color, #5b5b5b);
	font-size: 1.05rem;
	line-height: 1.7;
}

.dfi-blog-page-header__intro p:last-child {
	margin-bottom: 0;
}

.dfi-blog-empty {
	text-align: center;
	padding: 3rem 0;
	color: var(--dfi-blog-excerpt-color, #5b5b5b);
}

/* Grid */

.dfi-blog-grid {
	display: grid;
	grid-template-columns: repeat(var(--dfi-blog-columns, 3), minmax(0, 1fr));
	column-gap: var(--dfi-blog-gap-h, 28px);
	row-gap: var(--dfi-blog-gap-v, 40px);
	margin: 0 0 2.5rem;
}

.dfi-blog-grid.dfi-full-bleed {
	padding: 0 var(--dfi-blog-gap-h, 28px);
}

@media (max-width: 900px) {
	.dfi-blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.dfi-blog-grid {
		grid-template-columns: 1fr;
	}
}

/* Card */

.dfi-blog-card {
	display: flex;
	flex-direction: column;
	background: var(--dfi-blog-card-bg, #ffffff);
	border-radius: var(--dfi-blog-card-radius, 16px);
	overflow: hidden;
	box-shadow: var(--dfi-blog-card-shadow, none);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dfi-blog-card:hover,
.dfi-blog-card:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--dfi-blog-card-shadow-hover, none);
}

.dfi-blog-card__image-link {
	display: block;
}

.dfi-blog-card__image {
	position: relative;
	display: block;
	aspect-ratio: var(--dfi-blog-image-ratio, 3/2);
	overflow: hidden;
	background: #e5e5e5;
}

.dfi-blog-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.dfi-blog-card__img--placeholder {
	background: #f2f2f2;
	background: linear-gradient(135deg, color-mix(in srgb, var(--dfi-blog-accent, #c0392b) 25%, #f2f2f2), color-mix(in srgb, var(--dfi-blog-accent, #c0392b) 8%, #f2f2f2));
}

.dfi-blog-card:hover .dfi-blog-card__img,
.dfi-blog-card:focus-within .dfi-blog-card__img {
	transform: scale(1.06);
}

.dfi-blog-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 0.35em 0.9em;
	border-radius: 999px;
	background: var(--dfi-blog-badge-bg, rgba(255,255,255,0.92));
	color: var(--dfi-blog-badge-color, #131313);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.dfi-blog-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.5rem 1.5rem 1.75rem;
}

.dfi-blog-card__meta {
	margin: 0 0 0.6rem;
	font-size: 0.85rem;
	color: var(--dfi-blog-meta-color, #8a8a8a);
}

.dfi-blog-card__meta-sep {
	margin: 0 0.4em;
}

.dfi-blog-card__title {
	margin: 0 0 0.6rem;
	font-size: 1.3rem;
	line-height: 1.35;
}

.dfi-blog-card__title a {
	color: var(--dfi-blog-title-color, #131313);
	text-decoration: none;
}

.dfi-blog-card__title a:hover {
	color: var(--dfi-blog-accent, #c0392b);
}

.dfi-blog-card__excerpt {
	margin: 0 0 1.1rem;
	color: var(--dfi-blog-excerpt-color, #5b5b5b);
	line-height: 1.65;
	flex: 1 1 auto;
}

.dfi-blog-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	align-self: flex-start;
	color: var(--dfi-blog-accent, #c0392b);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
}

.dfi-blog-card__more span {
	transition: transform 0.2s ease;
}

.dfi-blog-card__more:hover span {
	transform: translateX(4px);
}

/* Pagination (core the_posts_pagination() output) */

.pagination.navigation {
	display: flex;
	justify-content: center;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border-radius: 999px;
	background: #fff;
	border: 1px solid #e2e2e2;
	color: var(--dfi-blog-title-color, #131313);
	text-decoration: none;
	font-size: 0.9rem;
}

.pagination .page-numbers.current {
	background: var(--dfi-blog-accent, #c0392b);
	border-color: var(--dfi-blog-accent, #c0392b);
	color: #fff;
}

.pagination .page-numbers:not(.current):not(.dots):hover {
	border-color: var(--dfi-blog-accent, #c0392b);
	color: var(--dfi-blog-accent, #c0392b);
}

/* Single post hero */

.dfi-blog-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: var(--dfi-blog-hero-height, 46vh);
	background-size: cover;
	background-position: center;
	color: var(--dfi-blog-hero-title, #ffffff);
}

.dfi-blog-hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--dfi-blog-hero-overlay, rgba(10,10,10,0.5));
}

.dfi-blog-hero__content {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
	padding: 3rem 1.5rem;
	text-align: center;
	width: 100%;
}

.dfi-blog-hero__category {
	display: inline-block;
	margin-bottom: 1rem;
	padding: 0.35em 1em;
	border-radius: 999px;
	background: rgba(255,255,255,0.16);
	backdrop-filter: blur(6px);
	color: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
}

.dfi-blog-hero__title {
	margin: 0 0 0.75rem;
	font-size: clamp(2rem, 4vw, 3.25rem);
	line-height: 1.2;
	color: var(--dfi-blog-hero-title, #ffffff);
}

.dfi-blog-hero__meta {
	margin: 0;
	color: var(--dfi-blog-hero-meta, rgba(255,255,255,0.85));
	font-size: 0.95rem;
}

/* Single post layout: article + sidebar */

.dfi-blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 3.5rem;
	align-items: start;
	padding-top: 3rem;
}

.dfi-blog-article__header {
	margin-bottom: 2rem;
}

.dfi-blog-article__title {
	font-size: 2.25rem;
	line-height: 1.25;
	margin: 0 0 0.75rem;
	color: var(--dfi-blog-title-color, #131313);
}

.dfi-blog-content {
	font-size: 1.08rem;
	line-height: 1.8;
	color: #2c2c2c;
}

.dfi-blog-content p {
	margin: 0 0 1.4em;
}

.dfi-blog-content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.dfi-blog-content h2,
.dfi-blog-content h3,
.dfi-blog-content h4 {
	margin: 1.8em 0 0.7em;
	line-height: 1.35;
}

.dfi-blog-content blockquote {
	margin: 1.8em 0;
	padding: 0.25em 0 0.25em 1.4em;
	border-left: 4px solid var(--dfi-blog-accent, #c0392b);
	font-style: italic;
	color: #4a4a4a;
}

.dfi-blog-taxonomies {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 2.5rem 0 0;
}

.dfi-blog-pill {
	display: inline-block;
	padding: 0.4em 1em;
	border-radius: 999px;
	background: #f2f2f2;
	color: var(--dfi-blog-title-color, #131313);
	font-size: 0.85rem;
	text-decoration: none;
}

.dfi-blog-pill:hover {
	background: var(--dfi-blog-accent, #c0392b);
	color: #fff;
}

.dfi-blog-pill--tag {
	background: transparent;
	border: 1px solid #d8d8d8;
}

.dfi-blog-post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid #e5e5e5;
}

.dfi-blog-post-nav__link {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.25rem;
	border-radius: 12px;
	background: #f7f7f7;
	text-decoration: none;
	transition: background 0.2s ease;
}

.dfi-blog-post-nav__link:hover {
	background: #efefef;
}

.dfi-blog-post-nav__link--next {
	text-align: right;
	grid-column: 2;
}

.dfi-blog-post-nav__label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--dfi-blog-accent, #c0392b);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.dfi-blog-post-nav__title {
	color: var(--dfi-blog-title-color, #131313);
	font-size: 0.95rem;
	line-height: 1.4;
}

/* Sidebar — styles the core block widgets already configured in Blog
   Sidebar (Search, Categories, Recent Posts, Archives, Recent Comments)
   generically, since they render as core blocks rather than classic
   widget markup. */

.dfi-blog-sidebar .widget {
	margin-bottom: 2.5rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid #ececec;
}

.dfi-blog-sidebar .widget:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.dfi-blog-sidebar .widget h2,
.dfi-blog-sidebar .widget-title {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	color: var(--dfi-blog-sidebar-title, #131313);
}

.dfi-blog-sidebar .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dfi-blog-sidebar .widget li {
	padding: 0.5rem 0;
	border-bottom: 1px solid #f2f2f2;
	font-size: 0.92rem;
}

.dfi-blog-sidebar .widget li:last-child {
	border-bottom: 0;
}

.dfi-blog-sidebar .widget a {
	color: #3a3a3a;
	text-decoration: none;
}

.dfi-blog-sidebar .widget a:hover {
	color: var(--dfi-blog-accent, #c0392b);
}

.dfi-blog-sidebar .wp-block-search__input {
	width: 100%;
	padding: 0.65rem 0.9rem;
	border: 1px solid #ddd;
	border-radius: 8px 0 0 8px;
}

.dfi-blog-sidebar .wp-block-search__button {
	border-radius: 0 8px 8px 0;
	background: var(--dfi-blog-accent, #c0392b);
	border: 1px solid var(--dfi-blog-accent, #c0392b);
	color: #fff;
}

@media (max-width: 900px) {
	.dfi-blog-layout {
		grid-template-columns: 1fr;
	}

	.dfi-blog-sidebar {
		border-top: 1px solid #e5e5e5;
		padding-top: 2.5rem;
	}

	.dfi-blog-post-nav {
		grid-template-columns: 1fr;
	}

	.dfi-blog-post-nav__link--next {
		grid-column: 1;
		text-align: left;
	}
}

/* Services Grid block (inc/services-block.php, inc/blocks/services/) —
   two columns with a divider line between them and between rows, one
   column on mobile. */

.dfi-services {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.dfi-services__item {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	padding: 2.25rem 2rem;
	border-bottom: 1px solid #e2e2e2;
}

.dfi-services__item:nth-child(odd) {
	border-right: 1px solid #e2e2e2;
}

/* Last row (1 or 2 items, whichever the grid happens to end on) shouldn't
   carry the divider that separates it from a row below it, since there
   isn't one — matched without needing to know the total item count. */
@media (min-width: 769px) {
	.dfi-services__item:nth-child(2n+1):nth-last-child(-n+2),
	.dfi-services__item:nth-child(2n+1):nth-last-child(-n+2) ~ .dfi-services__item {
		border-bottom: 0;
	}
}

.dfi-services__icon {
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
}

.dfi-services__icon--placeholder {
	background: #eee;
}

.dfi-services__body {
	min-width: 0;
}

.dfi-services__title {
	margin: 0 0 0.5rem;
	font-size: 1.2rem;
	line-height: 1.3;
}

.dfi-services__desc {
	margin: 0;
	color: #666;
	line-height: 1.65;
}

.dfi-services__desc p {
	margin: 0;
}

@media (max-width: 768px) {
	.dfi-services {
		grid-template-columns: 1fr;
	}

	/* Full Width Breakout (the block's own toggle) escapes .entry-content's
	   padding entirely, same as any other .dfi-full-bleed element — fine
	   on desktop, but on mobile that left only .dfi-services__item's own
	   0.5rem between the content and the actual screen edge. This restores
	   an even inset (1rem here + the item's own 0.5rem = 1.5rem total),
	   matching what non-full-width Services already gets from
	   .entry-content's own 1rem + the same 0.5rem — full width in layout
	   terms, not edge-to-edge. */
	.dfi-services.dfi-full-bleed {
		padding: 0 1rem;
	}

	.dfi-services__item {
		padding: 1.75rem 0.5rem;
	}

	.dfi-services__item:nth-child(odd) {
		border-right: 0;
	}

	.dfi-services__item:last-child {
		border-bottom: 0;
	}
}

/* Process Steps block (inc/process-steps-block.php) — a vertical
   numbered timeline. One connecting line runs down the left through
   each number badge; .dfi-process-steps__item--last stops it short so
   it doesn't dangle past the final step. */

.dfi-process-steps {
	max-width: 640px;
}

.dfi-process-steps__item {
	position: relative;
	display: flex;
	gap: 1.25rem;
	padding-bottom: 2rem;
}

.dfi-process-steps__item--last {
	padding-bottom: 0;
}

.dfi-process-steps__marker {
	position: relative;
	flex: 0 0 auto;
	width: 2.75rem;
	display: flex;
	justify-content: center;
}

.dfi-process-steps__marker::before {
	content: '';
	position: absolute;
	top: 2.75rem;
	bottom: -2rem;
	left: 50%;
	width: 1px;
	background: #e2e2e2;
	transform: translateX(-0.5px);
}

.dfi-process-steps__item--last .dfi-process-steps__marker::before {
	display: none;
}

.dfi-process-steps__num {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: #4a90d9;
	color: #ffffff;
	font-size: 1.15rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-variant-numeric: tabular-nums;
}

.dfi-process-steps__body {
	min-width: 0;
	padding-top: 0.3rem;
}

.dfi-process-steps__title {
	margin: 0 0 0.35rem;
	font-size: 1.15rem;
	line-height: 1.3;
}

.dfi-process-steps__desc {
	margin: 0;
	color: #666666;
	line-height: 1.55;
}

.dfi-process-steps__desc p {
	margin: 0;
}

/* Two Columns (Desktop) option: the two .dfi-process-steps__col wrappers
   are always in the markup once enabled, but only actually split into
   side-by-side columns above the mobile breakpoint — below it they're
   plain stacked blocks, so the steps read as one continuous 1-2-3-4-5-6
   list in DOM order, same as the single-column layout. */

@media (min-width: 769px) {
	.dfi-process-steps--two-col {
		max-width: none;
		display: flex;
		gap: 3rem;
	}

	.dfi-process-steps--two-col .dfi-process-steps__col {
		flex: 1 1 0;
		min-width: 0;
	}

	/* Stops the left column's connector at its own last item instead of
	   running into the gap before the right column starts. Left off the
	   base .dfi-process-steps__item--last rule above because that class
	   also removes the bottom padding, which is still wanted here to
	   match the right column's row height. */
	.dfi-process-steps__item--col-end .dfi-process-steps__marker::before {
		display: none;
	}
}

/* Image Text Panel block (inc/image-text-panel-block.php) — a full-width
   background image with a semi-transparent text box over it. The image
   itself is only ever applied at desktop widths (see the min-width rule
   below) rather than unconditionally set and then overridden on mobile —
   it's an inline custom property either way, and overriding an inline
   style needs !important, which this sidesteps entirely. */

.dfi-image-text-panel {
	display: flex;
	align-items: center;
	min-height: var(--dfi-itp-box-min-height, 26rem);
	background-color: #f4f4f4;
	background-size: cover;
	background-position: var(--dfi-itp-bg-position, right center);
}

@media (min-width: 769px) {
	.dfi-image-text-panel {
		background-image: var(--dfi-image-text-panel-bg, none);
	}

	.dfi-image-text-panel__box {
		width: var(--dfi-itp-box-width, 70%);
	}

	.dfi-image-text-panel__text {
		font-size: var(--dfi-itp-text-size, 1.2vw);
		font-weight: 500;
	}
}

/* Fully visible by default — assets/js/image-text-panel.js is what opts
   a box into the hidden/offset starting state below (adding
   .dfi-reveal-pending itself, before observing it), and only once it's
   confirmed prefers-reduced-motion is off and IntersectionObserver is
   supported. That way a blocked or failed script just leaves the box in
   its plain, always-visible default rather than stuck invisible. */
.dfi-image-text-panel__box {
	margin: 3rem 4vw;
	padding: 2.5rem 3rem;
	background: var(--dfi-itp-box-bg-color, rgba(255, 255, 255, 0.88));
	border-radius: var(--dfi-itp-box-radius, 12px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.dfi-image-text-panel__box.dfi-reveal-pending {
	opacity: 0;
	transform: translateY(28px);
}

.dfi-image-text-panel__box.dfi-reveal-pending.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.dfi-image-text-panel__heading {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 1.25rem;
	padding: 1em;
	font-family: var(--dfi-site-font, inherit);
	font-size: var(--dfi-itp-heading-size, 2rem);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: var(--dfi-itp-heading-text-color, #ffffff);
	background: var(--dfi-itp-heading-bg-color, #4a90d9);
	border-radius: var(--dfi-itp-heading-radius, 6px);
}

.dfi-image-text-panel__text {
	margin: 0;
	font-family: var(--dfi-site-font, inherit);
	color: var(--dfi-itp-text-color, #444444);
	line-height: 1.65;
}

/* No image, no min-height reserved for one, and the box loses its
   background/padding — on the page's own white, a semi-transparent
   white panel would just be a very faint box around plain text. */
@media (max-width: 768px) {
	.dfi-image-text-panel {
		display: block;
		min-height: 0;
		background-color: transparent;
	}

	.dfi-image-text-panel__box {
		max-width: none;
		margin: 0;
		/* Top only pulled way down (2px) so the heading's edge-to-edge
		   color band sits almost flush against whatever's above it on
		   mobile — left/right/bottom unchanged. */
		padding: 2px 1.25rem 1.75rem;
		background: transparent;
	}

	.dfi-image-text-panel__heading {
		/* Break out of .dfi-image-text-panel__box's own 1.25rem horizontal
		   padding (below) so the color band spans the true screen edges
		   instead of stopping at the box's inset — matches that padding
		   value exactly, the standard negative-margin escape trick. The
		   heading's own 1em padding (base rule, shared with desktop) keeps
		   the text itself comfortably clear of those edges either way.

		   width: auto is required here, not cosmetic — the base rule sets
		   width: 100%, and when width/margin-left/margin-right are ALL
		   non-auto at once, CSS's box-model over-constraint rule silently
		   discards the specified margin-right and recomputes it to make
		   the numbers balance against that fixed 100% width, instead of
		   honoring -1.25rem. That's why the band was reaching the left
		   edge but falling short on the right. With width back to auto,
		   the browser derives it FROM both margins instead, so both sides
		   actually extend by the same 1.25rem. */
		width: auto;
		margin-left: -1.25rem;
		margin-right: -1.25rem;
		font-size: var(--dfi-itp-heading-size-mobile, 5vw);
		color: var(--dfi-itp-heading-text-color, #ffffff);
		background: var(--dfi-itp-heading-bg-color, #4a90d9);
		border-radius: 0;
	}

	.dfi-image-text-panel__text {
		font-size: var(--dfi-itp-text-size-mobile, 1rem);
	}
}

/* Service Area Links block (inc/service-area-links-block.php): button
   links to a chosen menu item's children. Colors are per-block-instance,
   set via inline custom properties on the wrapper rather than :root —
   same technique as Side-by-Side's boxes, since more than one instance
   of this block can appear on a page with different colors each. */

.dfi-service-area-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.85rem;
}

.dfi-service-area-links__item {
	display: inline-block;
	padding: 0.85rem 1.6rem;
	border-radius: 10px;
	color: var(--dfi-sal-text, #ffffff);
	background: var(--dfi-sal-bg, #4a90d9);
	text-decoration: none;
	font-weight: 600;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dfi-service-area-links__item:hover,
.dfi-service-area-links__item:focus {
	transform: scale(1.08);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}