/*
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);
}

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%;
	padding: 1rem;
	max-width: 1280px;
	margin: 0 auto;
}

/* 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. */

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

.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);
}

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

.custom-logo {
	display: block;
	height: var(--dfi-logo-height, 70px);
	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;
	transition: color 0.2s ease-in;
}

.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);
	}

	.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;
	}
}

/* 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(var(--dfi-footer-underlay-stripe-width, 8px));
}

.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(calc(var(--dfi-footer-underlay-stripe-width, 8px) * -1));
}

/* "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: 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);
	}

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

	.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;
	}

	.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: 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;
		padding: 1.75rem 1.25rem;
		background: transparent;
	}

	.dfi-image-text-panel__heading {
		font-size: var(--dfi-itp-heading-size-mobile, 5vw);
		color: var(--dfi-itp-heading-color-mobile, #4a90d9);
		background: transparent;
	}

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