@charset "UTF-8";
/*
Theme Name: Digitalogicx
Theme URI: https://digitalogicx.com/
Author: Digitalogicx
Author URI: https://digitalogicx.com/
Description: High-performance custom block theme for Digitalogicx — a Chicago PPC management and custom web development agency. Zero plugin dependencies, native light/dark mode, built-in lead capture, and LocalBusiness schema.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: digitalogicx
Tags: block-theme, full-site-editing, business, one-column, custom-colors, dark-mode, accessibility-ready
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Every color the site uses resolves through these variables. theme.json
   points its palette at them, so flipping `data-theme` recolors every block
   — core blocks included — with no extra stylesheet.
   ========================================================================== */

:root {
	color-scheme: light;

	/* Brand — fixed across both modes */
	--dlx-brand: #fe4c1c;
	--dlx-brand-600: #e83e0f;
	--dlx-brand-700: #c8330b;
	--dlx-brand-soft: #fff1ec;
	--dlx-brand-ring: rgba(254, 76, 28, 0.32);

	/* Light mode surfaces */
	--dlx-ink: #262c32;
	--dlx-bg: #ffffff;
	--dlx-surface: #f7f8f9;
	--dlx-surface-2: #ffffff;
	--dlx-text: #3d454d;
	--dlx-muted: #6b757f;
	--dlx-border: #e5e8eb;
	--dlx-border-strong: #d2d7dc;

	/* Panels stay dark in both modes — used for high-contrast sections */
	--dlx-panel: #262c32;
	--dlx-panel-2: #2f363d;
	--dlx-panel-text: #eef1f3;
	--dlx-panel-muted: #a4aeb7;
	--dlx-panel-border: rgba(255, 255, 255, 0.1);

	--dlx-shadow-soft: 0 1px 2px rgba(38, 44, 50, 0.04), 0 8px 24px -12px rgba(38, 44, 50, 0.14);
	--dlx-shadow-lift: 0 2px 4px rgba(38, 44, 50, 0.05), 0 18px 40px -18px rgba(38, 44, 50, 0.24);
	--dlx-header-bg: rgba(255, 255, 255, 0.82);

	/* Typography — system stack renders instantly, zero network cost.
	   Swap in a self-hosted family here and nothing else needs to change. */
	--dlx-font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--dlx-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--dlx-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--dlx-gutter: clamp(1.25rem, 5vw, 3rem);
	--dlx-header-h: 74px;
	--dlx-ease: cubic-bezier(0.2, 0.6, 0.3, 1);
	--dlx-t: 180ms var(--dlx-ease);
}

:root[data-theme="dark"] {
	color-scheme: dark;

	--dlx-brand-soft: rgba(254, 76, 28, 0.14);

	--dlx-ink: #f2f5f7;
	--dlx-bg: #15191d;
	--dlx-surface: #1c2126;
	--dlx-surface-2: #222830;
	--dlx-text: #c3ccd4;
	--dlx-muted: #8d99a4;
	--dlx-border: #2c333a;
	--dlx-border-strong: #3a424a;

	--dlx-panel: #1c2126;
	--dlx-panel-2: #242b32;
	--dlx-panel-text: #f2f5f7;
	--dlx-panel-muted: #9aa5b0;
	--dlx-panel-border: rgba(255, 255, 255, 0.08);

	--dlx-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
	--dlx-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.4), 0 18px 40px -18px rgba(0, 0, 0, 0.8);
	--dlx-header-bg: rgba(21, 25, 29, 0.82);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--dlx-header-h) + 1.5rem);
}

body {
	margin: 0;
	background-color: var(--dlx-bg);
	color: var(--dlx-text);
	font-family: var(--dlx-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
}

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

svg {
	vertical-align: middle;
}

a {
	color: var(--dlx-brand);
	transition: color var(--dlx-t);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2.5px solid var(--dlx-brand);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection {
	background: var(--dlx-brand);
	color: #fff;
}

.dlx-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.9rem 1.4rem;
	background: var(--dlx-brand);
	color: #fff;
	font-weight: 650;
	border-radius: 0 0 10px 0;
	text-decoration: none;
}

.dlx-skip-link:focus {
	left: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

/* Block themes wrap every template part in a div. That box would trap the
   sticky header inside its own height, so we take the wrapper out of the
   layout entirely and let the header position against the viewport. */
.dlx-shell {
	display: contents;
}

/* The page shell must span the viewport edge to edge.

   This is a guarantee, not a preference. The templates set `main` and the
   post-content block to a flow layout so the editor does not constrain them,
   but re-saving a template in the Site Editor can silently reintroduce a
   constrained layout — which caps `.entry-content` at contentSize and traps
   every full-width section inside a narrow column. These declarations make
   that failure impossible, whatever the editor writes into the template. */
.dlx-shell-main,
.dlx-shell-main > .entry-content,
.dlx-shell-main > .wp-block-post-content {
	display: block;
	width: auto;
	max-width: none !important;
	margin-inline: 0 !important;
}

/* Horizontal gutter. Owned here rather than taken from theme.json root
   padding, so it applies identically to every section regardless of whether
   WordPress decided a given container qualified for `has-global-padding`.
   The two-class specificity keeps it ahead of core's global-padding rule. */
.dlx-shell-main .dlx-hero,
.dlx-shell-main .dlx-pagehead,
.dlx-shell-main .dlx-section,
.dlx-shell-main .dlx-strip {
	padding-inline: var(--dlx-gutter);
}

.dlx-section {
	padding-block: var(--wp--preset--spacing--80);
	position: relative;
}

.dlx-section--tight {
	padding-block: var(--wp--preset--spacing--60);
}

.dlx-section--flush-top {
	padding-block-start: 0;
}

/* Sections whose background differs from the page need to bleed edge-to-edge
   while keeping their inner content on the grid. */
.dlx-bleed {
	margin-inline: calc(var(--dlx-gutter) * -1);
	padding-inline: var(--dlx-gutter);
}

.dlx-panel {
	background: var(--dlx-panel);
	color: var(--dlx-panel-text);
}

.dlx-panel :where(h1, h2, h3, h4, h5, h6) {
	color: var(--dlx-panel-text);
}

.dlx-panel :where(p, li) {
	color: var(--dlx-panel-muted);
}

/* Block-level on purpose.

   As an inline-flex box this ignored the `margin-inline: auto` that the block
   editor's constrained layout puts on every child to centre it — auto margins
   compute to zero on inline-level boxes. In a narrow prose column that left
   the eyebrow pinned to the section's left edge while the heading underneath
   sat centred in its 860px column, roughly 220px to the right of it.

   As a block it occupies the same column as its siblings, so it lines up with
   the heading in left-aligned sections and still centres inside `.dlx-center`.
   The leading rule becomes an inline-block rather than a flex child. */
.dlx-eyebrow {
	display: block;
	font-family: var(--dlx-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--dlx-brand);
	margin: 0 0 0.75rem;
}

.dlx-eyebrow::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 2px;
	margin-right: 0.5rem;
	vertical-align: 0.28em;
	background: currentColor;
	border-radius: 2px;
}

.dlx-lede {
	font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.1875rem);
	line-height: 1.62;
	color: var(--dlx-muted);
	max-width: 60ch;
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	text-decoration: none !important;
	transition: background-color var(--dlx-t), border-color var(--dlx-t), transform var(--dlx-t), box-shadow var(--dlx-t), color var(--dlx-t);
	will-change: transform;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	box-shadow: 0 10px 30px -12px var(--dlx-brand-ring);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--dlx-brand) !important;
	color: var(--dlx-brand) !important;
}

/* Arrow affordance on primary CTAs — signals action without an icon font. */
.dlx-cta-arrow .wp-block-button__link::after {
	content: "";
	width: 15px;
	height: 15px;
	flex: none;
	background: currentColor;
	transition: transform var(--dlx-t);
	-webkit-mask: var(--dlx-arrow) center / contain no-repeat;
	mask: var(--dlx-arrow) center / contain no-repeat;
	--dlx-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

.dlx-cta-arrow .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

.dlx-panel .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--dlx-panel-border) !important;
	color: var(--dlx-panel-text) !important;
}

/* ==========================================================================
   5. HEADER — sticky on every breakpoint
   ========================================================================== */

.dlx-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: var(--dlx-header-bg);
	border-bottom: 1px solid transparent;
	transition: border-color var(--dlx-t), box-shadow var(--dlx-t), background-color var(--dlx-t);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.dlx-header {
		-webkit-backdrop-filter: saturate(180%) blur(16px);
		backdrop-filter: saturate(180%) blur(16px);
	}
}

.dlx-header.is-stuck {
	border-bottom-color: var(--dlx-border);
	box-shadow: 0 4px 20px -12px rgba(38, 44, 50, 0.3);
}

.dlx-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	max-width: var(--wp--style--global--wide-size, 1220px);
	margin-inline: auto;
	padding-inline: var(--dlx-gutter);
	min-height: var(--dlx-header-h);
}

.dlx-header__brand {
	display: inline-flex;
	align-items: center;
	flex: none;
	margin-inline-end: auto;
}

.dlx-header__brand a,
.dlx-header__brand .wp-block-site-logo a {
	display: block;
	line-height: 0;
}

.dlx-header__brand img {
	height: clamp(30px, 4.4vw, 38px);
	width: auto;
}

/* Logo swap: exactly one variant is ever in the layout.

   These selectors are deliberately element+class and scoped to the brand
   wrapper. A bare `.dlx-logo--dark` (0,1,0) loses to the `.dlx-header__brand
   img` rule above (0,1,1), which left BOTH logos rendered — the dark logo's
   wordmark is invisible on a light background, so all that showed was a ghost
   of its orange arrow and "x" floating under the real logo. */
.dlx-header__brand img.dlx-logo--light {
	display: block;
}

.dlx-header__brand img.dlx-logo--dark {
	display: none;
}

:root[data-theme="dark"] .dlx-header__brand img.dlx-logo--light {
	display: none;
}

:root[data-theme="dark"] .dlx-header__brand img.dlx-logo--dark {
	display: block;
}

/* Same guard for the text fallback used when no logo has been uploaded. */
.dlx-header__brand .dlx-logo-text {
	font-family: var(--dlx-font-display);
	font-size: 1.25rem;
	font-weight: 750;
	letter-spacing: -0.03em;
	color: var(--dlx-ink);
}

/* --- Desktop navigation --- */

.dlx-nav {
	display: none;
}

.dlx-nav ul {
	display: flex;
	align-items: center;
	gap: clamp(0.25rem, 1.4vw, 1rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.dlx-nav a {
	display: block;
	padding: 0.6rem 0.75rem;
	font-family: var(--dlx-font-display);
	font-size: 0.9375rem;
	font-weight: 550;
	letter-spacing: -0.01em;
	color: var(--dlx-ink);
	text-decoration: none;
	border-radius: 8px;
	transition: color var(--dlx-t), background-color var(--dlx-t);
	white-space: nowrap;
}

.dlx-nav a:hover,
.dlx-nav .current-menu-item > a,
.dlx-nav .current-menu-ancestor > a {
	color: var(--dlx-brand);
}

.dlx-nav__item {
	position: relative;
}

.dlx-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	padding: 0.6rem 0.75rem;
	font-family: var(--dlx-font-display);
	font-size: 0.9375rem;
	font-weight: 550;
	border-radius: 8px;
}

.dlx-nav__toggle::after {
	content: "";
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--dlx-t);
}

.dlx-nav__item.is-open > .dlx-nav__toggle::after {
	transform: translateY(1px) rotate(-135deg);
}

.dlx-nav__item.is-open > .dlx-nav__toggle,
.dlx-nav__toggle:hover {
	color: var(--dlx-brand);
}

/* --- Mega dropdown --- */

.dlx-submenu {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	translate: -50% 0;
	width: min(92vw, 500px);
	padding: 0.6rem;
	background: var(--dlx-surface-2);
	border: 1px solid var(--dlx-border);
	border-radius: 18px;
	box-shadow: var(--dlx-shadow-lift);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--dlx-t), transform var(--dlx-t), visibility var(--dlx-t);
	display: grid;
	gap: 0.25rem;
}

.dlx-nav__item.is-open > .dlx-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dlx-submenu__link {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 0.9rem;
	align-items: start;
	padding: 0.85rem 0.9rem;
	border-radius: 13px;
	text-decoration: none;
	transition: background-color var(--dlx-t);
}

.dlx-submenu__link:hover {
	background: var(--dlx-surface);
}

.dlx-submenu__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--dlx-brand-soft);
	color: var(--dlx-brand);
}

.dlx-submenu__icon svg {
	width: 20px;
	height: 20px;
}

.dlx-submenu__title {
	display: block;
	font-family: var(--dlx-font-display);
	font-weight: 650;
	font-size: 0.9375rem;
	color: var(--dlx-ink);
	letter-spacing: -0.015em;
	margin-bottom: 0.15rem;
}

.dlx-submenu__desc {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--dlx-muted);
}

/* --- Header actions --- */

.dlx-header__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: none;
}

.dlx-header__phone {
	display: none;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--dlx-font-display);
	font-size: 0.9375rem;
	font-weight: 650;
	color: var(--dlx-ink);
	text-decoration: none;
	letter-spacing: -0.015em;
	padding: 0.5rem 0.6rem;
	border-radius: 9px;
	transition: color var(--dlx-t);
}

.dlx-header__phone:hover {
	color: var(--dlx-brand);
}

.dlx-header__phone svg {
	width: 16px;
	height: 16px;
	color: var(--dlx-brand);
	flex: none;
}

.dlx-header__cta {
	display: none;
	align-items: center;
	gap: 0.5rem;
	padding: 0.72rem 1.35rem;
	background: var(--dlx-brand);
	color: #fff;
	font-family: var(--dlx-font-display);
	font-size: 0.875rem;
	font-weight: 650;
	letter-spacing: -0.005em;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--dlx-t), transform var(--dlx-t), box-shadow var(--dlx-t);
}

.dlx-header__cta:hover {
	background: var(--dlx-brand-600);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px -12px var(--dlx-brand-ring);
}

/* --- Color mode toggle --- */

.dlx-mode {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: var(--dlx-surface);
	border: 1px solid var(--dlx-border);
	border-radius: 50%;
	color: var(--dlx-ink);
	cursor: pointer;
	flex: none;
	transition: background-color var(--dlx-t), border-color var(--dlx-t), color var(--dlx-t);
}

.dlx-mode:hover {
	border-color: var(--dlx-brand);
	color: var(--dlx-brand);
}

.dlx-mode svg {
	width: 18px;
	height: 18px;
	position: absolute;
	transition: opacity var(--dlx-t), transform var(--dlx-t);
}

.dlx-mode__sun {
	opacity: 0;
	transform: rotate(-70deg) scale(0.5);
}

.dlx-mode__moon {
	opacity: 1;
	transform: rotate(0) scale(1);
}

:root[data-theme="dark"] .dlx-mode__sun {
	opacity: 1;
	transform: rotate(0) scale(1);
}

:root[data-theme="dark"] .dlx-mode__moon {
	opacity: 0;
	transform: rotate(70deg) scale(0.5);
}

/* --- Burger --- */

.dlx-burger {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: var(--dlx-surface);
	border: 1px solid var(--dlx-border);
	border-radius: 12px;
	color: var(--dlx-ink);
	cursor: pointer;
	flex: none;
}

.dlx-burger__box {
	position: relative;
	width: 18px;
	height: 12px;
}

.dlx-burger__box span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 220ms var(--dlx-ease), opacity 120ms linear, top 220ms var(--dlx-ease);
}

.dlx-burger__box span:nth-child(1) { top: 0; }
.dlx-burger__box span:nth-child(2) { top: 5px; }
.dlx-burger__box span:nth-child(3) { top: 10px; }

.dlx-burger[aria-expanded="true"] .dlx-burger__box span:nth-child(1) {
	top: 5px;
	transform: rotate(45deg);
}

.dlx-burger[aria-expanded="true"] .dlx-burger__box span:nth-child(2) {
	opacity: 0;
}

.dlx-burger[aria-expanded="true"] .dlx-burger__box span:nth-child(3) {
	top: 5px;
	transform: rotate(-45deg);
}

/* ==========================================================================
   6. MOBILE DRAWER
   ========================================================================== */

.dlx-drawer {
	position: fixed;
	inset: var(--dlx-header-h) 0 0;
	z-index: 190;
	background: var(--dlx-bg);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--dlx-gutter) var(--dlx-gutter) 3rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity 220ms var(--dlx-ease), transform 220ms var(--dlx-ease), visibility 220ms;
	-webkit-overflow-scrolling: touch;
}

.dlx-drawer.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

body.dlx-locked {
	overflow: hidden;
}

.dlx-drawer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dlx-drawer__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1.05rem 0;
	border-bottom: 1px solid var(--dlx-border);
	background: none;
	border-inline: 0;
	border-top: 0;
	font-family: var(--dlx-font-display);
	font-size: 1.3125rem;
	font-weight: 650;
	letter-spacing: -0.028em;
	color: var(--dlx-ink);
	text-decoration: none;
	cursor: pointer;
	text-align: left;
}

.dlx-drawer__link[aria-expanded]::after {
	content: "";
	width: 10px;
	height: 10px;
	border-right: 2.5px solid var(--dlx-muted);
	border-bottom: 2.5px solid var(--dlx-muted);
	transform: translateY(-3px) rotate(45deg);
	transition: transform var(--dlx-t);
	flex: none;
}

.dlx-drawer__link[aria-expanded="true"]::after {
	transform: translateY(2px) rotate(-135deg);
	border-color: var(--dlx-brand);
}

.dlx-drawer__sub {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 260ms var(--dlx-ease);
}

.dlx-drawer__sub > div {
	overflow: hidden;
}

.dlx-drawer__sub.is-open {
	grid-template-rows: 1fr;
}

.dlx-drawer__sub a {
	display: block;
	padding: 0.85rem 0 0.85rem 1.1rem;
	border-left: 2px solid var(--dlx-border);
	margin-left: 0.25rem;
	font-size: 1rem;
	font-weight: 500;
	color: var(--dlx-muted);
	text-decoration: none;
}

.dlx-drawer__sub a:hover {
	color: var(--dlx-brand);
	border-left-color: var(--dlx-brand);
}

.dlx-drawer__foot {
	margin-top: 2rem;
	display: grid;
	gap: 0.75rem;
}

.dlx-drawer__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1.05rem 1.5rem;
	border-radius: 999px;
	font-family: var(--dlx-font-display);
	font-size: 1rem;
	font-weight: 650;
	text-decoration: none;
	background: var(--dlx-brand);
	color: #fff;
}

.dlx-drawer__cta--ghost {
	background: transparent;
	color: var(--dlx-ink);
	border: 1.5px solid var(--dlx-border-strong);
}

.dlx-drawer__meta {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--dlx-border);
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--dlx-muted);
}

/* ==========================================================================
   7. HEADER BREAKPOINT
   ========================================================================== */

@media (min-width: 1000px) {
	.dlx-nav {
		display: block;
	}

	.dlx-burger {
		display: none;
	}

	.dlx-header__phone,
	.dlx-header__cta {
		display: inline-flex;
	}

	.dlx-drawer {
		display: none;
	}
}

@media (min-width: 1000px) and (max-width: 1150px) {
	.dlx-header__phone {
		display: none;
	}
}

/* ==========================================================================
   8. CARDS & GRIDS
   ========================================================================== */

.dlx-grid {
	display: grid;
	gap: clamp(1rem, 2.2vw, 1.75rem);
}

.dlx-grid--2 { grid-template-columns: 1fr; }
.dlx-grid--3 { grid-template-columns: 1fr; }
.dlx-grid--4 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 640px) {
	.dlx-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.dlx-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
	.dlx-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.dlx-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.dlx-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: clamp(1.4rem, 2.5vw, 2rem);
	background: var(--dlx-surface-2);
	border: 1px solid var(--dlx-border);
	border-radius: 20px;
	transition: border-color var(--dlx-t), transform var(--dlx-t), box-shadow var(--dlx-t);
	height: 100%;
}

.dlx-card:hover {
	border-color: var(--dlx-border-strong);
	transform: translateY(-3px);
	box-shadow: var(--dlx-shadow-soft);
}

.dlx-card h3,
.dlx-card h4 {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
}

/* WordPress's constrained-layout rule puts `margin-inline: auto !important` on
   every child of a group. These cards are flex columns, and in a flex column
   an auto inline margin overrides `align-items: stretch` — so any short child
   (a heading, a button, an icon) collapses to fit-content and centres itself
   while long paragraphs stay full width. The result is headings that look
   centred and body copy that doesn't. Two classes of specificity to outrank
   core's rule, which is itself flagged important. */
.dlx-shell-main .dlx-card > *,
.dlx-shell-main .dlx-service-card > *,
.dlx-shell-main .dlx-quote > * {
	margin-inline: 0 !important;
	max-width: 100%;
}

.dlx-card p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.62;
	color: var(--dlx-muted);
}

.dlx-card__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background: var(--dlx-brand-soft);
	color: var(--dlx-brand);
	margin-bottom: 0.35rem;
	flex: none;
}

.dlx-card__icon svg {
	width: 23px;
	height: 23px;
}

/* Numbered process cards */
.dlx-card__num {
	font-family: var(--dlx-font-display);
	font-size: 0.8125rem;
	font-weight: 750;
	letter-spacing: 0.08em;
	color: var(--dlx-brand);
	margin-bottom: 0.25rem;
}

.dlx-card--link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.dlx-card--feature {
	background: var(--dlx-panel);
	border-color: transparent;
	color: var(--dlx-panel-text);
}

.dlx-card--feature h3,
.dlx-card--feature h4 {
	color: var(--dlx-panel-text);
}

.dlx-card--feature p {
	color: var(--dlx-panel-muted);
}

/* Service cards on the home page get a bit more presence. */
.dlx-service-card {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	padding: clamp(1.6rem, 3vw, 2.4rem);
	background: var(--dlx-surface-2);
	border: 1px solid var(--dlx-border);
	border-radius: 24px;
	transition: border-color var(--dlx-t), transform var(--dlx-t), box-shadow var(--dlx-t);
	height: 100%;
}

.dlx-service-card:hover {
	border-color: var(--dlx-brand);
	transform: translateY(-4px);
	box-shadow: var(--dlx-shadow-lift);
}

.dlx-service-card__media {
	border-radius: 16px;
	overflow: hidden;
	background: var(--dlx-surface);
	aspect-ratio: 16 / 9;
	display: grid;
	place-items: center;
}

.dlx-service-card__media svg,
.dlx-service-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dlx-service-card ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
}

.dlx-service-card li {
	position: relative;
	padding-left: 1.65rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--dlx-text);
}

/* ==========================================================================
   9. CHECK LISTS
   ========================================================================== */

.dlx-checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}

.dlx-checks li,
.dlx-service-card li {
	position: relative;
	padding-left: 1.9rem;
	line-height: 1.55;
}

.dlx-checks li::before,
.dlx-service-card li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--dlx-brand-soft);
	-webkit-mask: none;
	mask: none;
}

.dlx-checks li::after,
.dlx-service-card li::after {
	content: "";
	position: absolute;
	left: 4px;
	top: calc(0.28em + 4px);
	width: 10px;
	height: 10px;
	background: var(--dlx-brand);
	-webkit-mask: var(--dlx-check) center / contain no-repeat;
	mask: var(--dlx-check) center / contain no-repeat;
	--dlx-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.dlx-panel .dlx-checks li {
	color: var(--dlx-panel-text);
}

/* Negative list — same rhythm as .dlx-checks, opposite signal. Used for the
   "we're the wrong call if…" column, which qualifies leads out on purpose. */
.dlx-checks--no li::before {
	background: rgba(107, 117, 127, 0.16);
}

.dlx-checks--no li::after {
	background: var(--dlx-muted);
	--dlx-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* Attribution / context line under statistics and pricing tables. Small and
   quiet, but present — every figure on this site should be traceable. */
.dlx-source {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--dlx-muted);
	max-width: 74ch;
}

.dlx-source.has-text-align-center,
.dlx-stats + .dlx-source {
	margin-inline: auto;
	text-align: center;
}

.dlx-stats + .dlx-source {
	margin-top: 1.25rem;
}

.dlx-panel .dlx-source {
	color: var(--dlx-panel-muted);
}

/* ==========================================================================
   10. STATS
   ========================================================================== */

.dlx-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--dlx-border);
	border: 1px solid var(--dlx-border);
	border-radius: 20px;
	overflow: hidden;
}

@media (min-width: 900px) {
	.dlx-stats--4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.dlx-stats--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.dlx-stat {
	background: var(--dlx-surface-2);
	padding: clamp(1.3rem, 2.6vw, 2rem);
	text-align: center;
}

.dlx-stat__value {
	display: block;
	font-family: var(--dlx-font-display);
	font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem);
	font-weight: 750;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--dlx-brand);
	margin-bottom: 0.5rem;
	font-variant-numeric: tabular-nums;
}

.dlx-stat__label {
	display: block;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--dlx-muted);
}

.dlx-panel .dlx-stats {
	background: var(--dlx-panel-border);
	border-color: var(--dlx-panel-border);
}

.dlx-panel .dlx-stat {
	background: var(--dlx-panel);
}

.dlx-panel .dlx-stat__label {
	color: var(--dlx-panel-muted);
}

/* ==========================================================================
   11. FAQ ACCORDION — native <details>, zero JS
   ========================================================================== */

.dlx-faq {
	display: grid;
	gap: 0.75rem;
}

.dlx-faq details {
	background: var(--dlx-surface-2);
	border: 1px solid var(--dlx-border);
	border-radius: 16px;
	overflow: hidden;
	transition: border-color var(--dlx-t);
}

.dlx-faq details[open] {
	border-color: var(--dlx-border-strong);
}

.dlx-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: clamp(1.05rem, 2vw, 1.4rem) clamp(1.15rem, 2.2vw, 1.6rem);
	cursor: pointer;
	list-style: none;
	font-family: var(--dlx-font-display);
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
	font-weight: 650;
	letter-spacing: -0.02em;
	color: var(--dlx-ink);
	transition: color var(--dlx-t);
}

.dlx-faq summary::-webkit-details-marker {
	display: none;
}

.dlx-faq summary:hover {
	color: var(--dlx-brand);
}

.dlx-faq summary::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	position: relative;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
	color: var(--dlx-brand);
	transition: transform 240ms var(--dlx-ease);
}

.dlx-faq details[open] summary::after {
	transform: rotate(135deg);
}

/* Answer body — covers both the core/details block (which puts paragraphs
   directly inside <details>) and hand-written markup using .dlx-faq__body. */
.dlx-faq details > :not(summary),
.dlx-faq__body {
	padding-inline: clamp(1.15rem, 2.2vw, 1.6rem);
	color: var(--dlx-muted);
	font-size: 0.9375rem;
	line-height: 1.68;
	max-width: 72ch;
	margin-block: 0 0.9rem;
}

.dlx-faq details > :not(summary):last-child,
.dlx-faq__body {
	padding-bottom: clamp(1.15rem, 2.2vw, 1.5rem);
	margin-bottom: 0;
}

.dlx-faq__body > :first-child { margin-top: 0; }
.dlx-faq__body > :last-child { margin-bottom: 0; }

.dlx-faq details a {
	font-weight: 550;
}

/* ==========================================================================
   12. TESTIMONIALS
   ========================================================================== */

.dlx-quote {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	padding: clamp(1.5rem, 2.8vw, 2.1rem);
	background: var(--dlx-surface-2);
	border: 1px solid var(--dlx-border);
	border-radius: 20px;
	height: 100%;
}

.dlx-quote__stars {
	display: flex;
	gap: 3px;
	color: var(--dlx-brand);
}

.dlx-quote__stars svg {
	width: 16px;
	height: 16px;
}

.dlx-quote blockquote,
.dlx-quote > p:not([class]) {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1rem;
	line-height: 1.68;
	color: var(--dlx-text);
	flex: 1;
}

.dlx-quote__who {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding-top: 1rem;
	border-top: 1px solid var(--dlx-border);
}

.dlx-quote__avatar {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--dlx-brand-soft);
	color: var(--dlx-brand);
	font-family: var(--dlx-font-display);
	font-weight: 750;
	font-size: 0.9375rem;
	flex: none;
	letter-spacing: -0.02em;
}

.dlx-quote__name {
	display: block;
	font-family: var(--dlx-font-display);
	font-weight: 650;
	font-size: 0.9375rem;
	color: var(--dlx-ink);
	letter-spacing: -0.015em;
}

.dlx-quote__role {
	display: block;
	font-size: 0.8125rem;
	color: var(--dlx-muted);
	margin-top: 0.1rem;
}

/* ==========================================================================
   13. FORMS
   ========================================================================== */

.dlx-form {
	display: grid;
	gap: 1.1rem;
}

.dlx-form__row {
	display: grid;
	gap: 1.1rem;
}

@media (min-width: 640px) {
	.dlx-form__row--2 {
		grid-template-columns: 1fr 1fr;
	}
}

.dlx-field {
	display: grid;
	gap: 0.45rem;
}

.dlx-field > label {
	font-family: var(--dlx-font-display);
	font-size: 0.8125rem;
	font-weight: 650;
	letter-spacing: 0.01em;
	color: var(--dlx-ink);
}

.dlx-field .dlx-req {
	color: var(--dlx-brand);
}

.dlx-field input,
.dlx-field select,
.dlx-field textarea {
	width: 100%;
	padding: 0.92rem 1.05rem;
	font-family: inherit;
	font-size: 1rem; /* 16px min — stops iOS zoom-on-focus */
	line-height: 1.4;
	color: var(--dlx-ink);
	background: var(--dlx-bg);
	border: 1.5px solid var(--dlx-border);
	border-radius: 12px;
	transition: border-color var(--dlx-t), box-shadow var(--dlx-t);
	appearance: none;
	-webkit-appearance: none;
}

.dlx-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b757f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 17px;
	padding-right: 2.75rem;
	cursor: pointer;
}

.dlx-field textarea {
	min-height: 130px;
	resize: vertical;
}

.dlx-field input::placeholder,
.dlx-field textarea::placeholder {
	color: var(--dlx-muted);
	opacity: 0.75;
}

.dlx-field input:focus,
.dlx-field select:focus,
.dlx-field textarea:focus {
	outline: none;
	border-color: var(--dlx-brand);
	box-shadow: 0 0 0 4px var(--dlx-brand-ring);
}

.dlx-field.has-error input,
.dlx-field.has-error select,
.dlx-field.has-error textarea {
	border-color: #dc2626;
}

.dlx-field__error {
	font-size: 0.8125rem;
	color: #dc2626;
	min-height: 0;
}

/* Honeypot — visually gone, still focusable-free for real users. */
.dlx-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.dlx-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: 100%;
	padding: 1.05rem 2rem;
	font-family: var(--dlx-font-display);
	font-size: 1rem;
	font-weight: 650;
	color: #fff;
	background: var(--dlx-brand);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color var(--dlx-t), transform var(--dlx-t), box-shadow var(--dlx-t);
}

.dlx-form__submit:hover:not(:disabled) {
	background: var(--dlx-brand-600);
	transform: translateY(-2px);
	box-shadow: 0 12px 30px -12px var(--dlx-brand-ring);
}

.dlx-form__submit:disabled {
	opacity: 0.62;
	cursor: not-allowed;
	transform: none;
}

.dlx-form__submit .dlx-spinner {
	display: none;
	width: 17px;
	height: 17px;
	border: 2.5px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: dlx-spin 700ms linear infinite;
}

.dlx-form.is-sending .dlx-spinner {
	display: block;
}

@keyframes dlx-spin {
	to { transform: rotate(360deg); }
}

.dlx-form__note {
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--dlx-muted);
	text-align: center;
	margin: 0;
}

.dlx-form__alert {
	display: none;
	padding: 1rem 1.15rem;
	border-radius: 12px;
	font-size: 0.9375rem;
	line-height: 1.55;
	border: 1.5px solid transparent;
}

.dlx-form__alert.is-visible {
	display: block;
}

.dlx-form__alert.is-success {
	background: rgba(22, 163, 74, 0.1);
	border-color: rgba(22, 163, 74, 0.35);
	color: #15803d;
}

.dlx-form__alert.is-error {
	background: rgba(220, 38, 38, 0.09);
	border-color: rgba(220, 38, 38, 0.32);
	color: #dc2626;
}

:root[data-theme="dark"] .dlx-form__alert.is-success { color: #4ade80; }
:root[data-theme="dark"] .dlx-form__alert.is-error { color: #f87171; }

/* Form on a dark panel */
.dlx-panel .dlx-field > label { color: var(--dlx-panel-text); }
.dlx-panel .dlx-field input,
.dlx-panel .dlx-field select,
.dlx-panel .dlx-field textarea {
	background: rgba(255, 255, 255, 0.04);
	border-color: var(--dlx-panel-border);
	color: var(--dlx-panel-text);
}
.dlx-panel .dlx-form__note { color: var(--dlx-panel-muted); }

/* ==========================================================================
   14. CONTACT DETAILS
   ========================================================================== */

.dlx-contact-list {
	display: grid;
	gap: 1.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dlx-contact-item {
	display: grid;
	grid-template-columns: 46px 1fr;
	gap: 1rem;
	align-items: start;
}

.dlx-contact-item__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background: var(--dlx-brand-soft);
	color: var(--dlx-brand);
	flex: none;
}

.dlx-contact-item__icon svg {
	width: 21px;
	height: 21px;
}

.dlx-contact-item__label {
	display: block;
	font-family: var(--dlx-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--dlx-muted);
	margin-bottom: 0.3rem;
}

.dlx-contact-item__value,
.dlx-contact-item a {
	font-family: var(--dlx-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--dlx-ink);
	text-decoration: none;
	line-height: 1.5;
	font-style: normal;
}

.dlx-contact-item a:hover {
	color: var(--dlx-brand);
}

/* --- Externally hosted form (LeadConnector / CRM embed) ----------------- */

/* The wrapper reserves the configured height up front. The provider's script
   then measures the real form and resizes the frame. Without the reservation
   the iframe would start at zero and snap to full height mid-load, which is
   both a layout-shift penalty and a good way to move the submit button out
   from under someone's thumb. */
/* The embedded form is transparent, so this panel IS the form's background.
   Everything the visitor reads as "the form" is painted here.

   It stays light in BOTH color modes on purpose. The form's own text colors
   are fixed inside the CRM (#101828 headings, #344054 labels, #667085 help
   text) and cannot be restyled from this page — the iframe is cross-origin.
   Those greys sit at 9–18:1 against a light panel and about 1.3:1 against the
   dark theme surface, i.e. invisible. So the panel does not follow dark mode;
   it reads as a sheet of paper resting on the dark page instead.

   If the form's text is ever switched to a light color inside the CRM, flip
   these two variables and the panel will follow the theme again. */
.dlx-embed {
	--dlx-embed-paper: #ffffff;
	--dlx-embed-tint: #fff6f2;

	position: relative;
	min-height: var(--dlx-embed-h, 692px);
	padding: 6px;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(254, 76, 28, 0.16);
	background:
		radial-gradient(120% 78% at 100% 0%, rgba(254, 76, 28, 0.09), transparent 62%),
		radial-gradient(90% 60% at 0% 100%, rgba(38, 44, 50, 0.05), transparent 60%),
		linear-gradient(180deg, var(--dlx-embed-paper) 0%, var(--dlx-embed-tint) 100%);
	box-shadow:
		0 1px 2px rgba(38, 44, 50, 0.04),
		0 14px 36px -22px rgba(254, 76, 28, 0.4);
}

/* Brand rule across the top of the panel. */
.dlx-embed::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--dlx-brand) 0%, #ff8a5c 60%, rgba(254, 76, 28, 0.35) 100%);
	pointer-events: none;
	z-index: 2;
}

.dlx-embed__frame {
	display: block;
	position: relative;
	z-index: 1;
	width: 100%;
	min-height: var(--dlx-embed-h, 692px);
	border: 0;
	/* Transparent so the panel above shows through. The provider writes an
	   inline height as it resizes; never fight it. */
	background: transparent;
}

/* On the dark theme the panel keeps its light face but needs a deeper shadow
   and a warmer edge to sit convincingly on a dark page. */
:root[data-theme="dark"] .dlx-embed {
	border-color: rgba(254, 76, 28, 0.3);
	box-shadow:
		0 2px 6px rgba(0, 0, 0, 0.45),
		0 22px 56px -26px rgba(0, 0, 0, 0.9);
}

/* --- Map ---------------------------------------------------------------- */

.dlx-map {
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--dlx-border);
	background: var(--dlx-surface);
	aspect-ratio: 16 / 10;
}

.dlx-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	filter: grayscale(0.15);
}

.dlx-map__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0.9rem 0 0;
	font-size: 0.875rem;
}

.dlx-map__actions a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--dlx-muted);
	text-decoration: none;
	font-weight: 550;
	transition: color var(--dlx-t);
}

.dlx-map__actions a:hover {
	color: var(--dlx-brand);
}

.dlx-map__actions svg {
	color: var(--dlx-brand);
	flex: none;
}

:root[data-theme="dark"] .dlx-map iframe {
	filter: grayscale(0.4) invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.9);
}

/* ==========================================================================
   15. LOGO / TRUST STRIP
   ========================================================================== */

.dlx-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.5rem, 5vw, 3.5rem);
}

.dlx-trust__item {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--dlx-font-display);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--dlx-muted);
	opacity: 0.85;
	transition: opacity var(--dlx-t), color var(--dlx-t);
}

.dlx-trust__item:hover {
	opacity: 1;
	color: var(--dlx-ink);
}

.dlx-trust__item svg {
	width: 20px;
	height: 20px;
	color: var(--dlx-brand);
	flex: none;
}

/* ==========================================================================
   16. HERO
   ========================================================================== */

.dlx-hero {
	position: relative;
	padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 8vw, 7rem);
	overflow: hidden;
}

.dlx-hero__grid {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: center;
}

@media (min-width: 1000px) {
	.dlx-hero__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	}
}

.dlx-hero h1 {
	margin: 0 0 1.25rem;
}

.dlx-hero .dlx-lede {
	margin: 0 0 2rem;
}

.dlx-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-bottom: 2rem;
}

.dlx-hero__proof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.5rem;
	font-size: 0.875rem;
	color: var(--dlx-muted);
}

.dlx-hero__proof span {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.dlx-hero__proof svg {
	width: 16px;
	height: 16px;
	color: var(--dlx-brand);
	flex: none;
}

.dlx-hero__visual {
	position: relative;
}

.dlx-hero__visual svg,
.dlx-hero__visual img {
	width: 100%;
	height: auto;
	display: block;
}

/* Ambient brand glow behind the hero art — pure CSS, no image cost. */
.dlx-hero::before {
	content: "";
	position: absolute;
	top: -18%;
	right: -12%;
	width: min(52vw, 640px);
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(254, 76, 28, 0.16) 0%, rgba(254, 76, 28, 0) 68%);
	pointer-events: none;
	z-index: -1;
}

.dlx-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.45rem 0.95rem 0.45rem 0.5rem;
	background: var(--dlx-surface);
	border: 1px solid var(--dlx-border);
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 550;
	color: var(--dlx-text);
	margin-bottom: 1.5rem;
	letter-spacing: -0.005em;
}

.dlx-badge__dot {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--dlx-brand);
	color: #fff;
	flex: none;
}

.dlx-badge__dot svg {
	width: 12px;
	height: 12px;
}

/* ==========================================================================
   17. FOOTER
   ========================================================================== */

.dlx-footer {
	background: var(--dlx-panel);
	color: var(--dlx-panel-muted);
	padding-block: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.dlx-footer__inner {
	max-width: var(--wp--style--global--wide-size, 1220px);
	margin-inline: auto;
	padding-inline: var(--dlx-gutter);
}

.dlx-footer__top {
	display: grid;
	gap: clamp(2.5rem, 5vw, 3.5rem);
	padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 760px) {
	.dlx-footer__top {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1040px) {
	.dlx-footer__top {
		grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
	}
}

.dlx-footer__logo {
	height: 34px;
	width: auto;
	margin-bottom: 1.25rem;
	display: block;
}

.dlx-footer p {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--dlx-panel-muted);
	margin: 0 0 1rem;
	max-width: 40ch;
}

.dlx-footer__heading {
	font-family: var(--dlx-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 1.15rem;
}

.dlx-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}

.dlx-footer a {
	color: var(--dlx-panel-muted);
	text-decoration: none;
	font-size: 0.9375rem;
	transition: color var(--dlx-t);
}

.dlx-footer a:hover {
	color: var(--dlx-brand);
}

.dlx-footer address {
	font-style: normal;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--dlx-panel-muted);
}

.dlx-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.75rem;
	border-top: 1px solid var(--dlx-panel-border);
	font-size: 0.8125rem;
	color: var(--dlx-panel-muted);
}

.dlx-footer__bottom nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.dlx-footer__bottom a {
	font-size: 0.8125rem;
}

.dlx-social {
	display: flex;
	gap: 0.6rem;
	margin-top: 1.5rem;
}

.dlx-social a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--dlx-panel-border);
	color: var(--dlx-panel-text);
	transition: background-color var(--dlx-t), color var(--dlx-t), border-color var(--dlx-t);
}

.dlx-social a:hover {
	background: var(--dlx-brand);
	border-color: var(--dlx-brand);
	color: #fff;
}

.dlx-social svg {
	width: 17px;
	height: 17px;
}

/* ==========================================================================
   18. MOBILE STICKY CALL BAR — high-intent conversion aid
   ========================================================================== */

.dlx-callbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 180;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--dlx-border);
	border-top: 1px solid var(--dlx-border);
	transform: translateY(100%);
	transition: transform 260ms var(--dlx-ease);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.dlx-callbar.is-visible {
	transform: translateY(0);
}

.dlx-callbar a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1rem 0.75rem;
	background: var(--dlx-bg);
	font-family: var(--dlx-font-display);
	font-size: 0.9375rem;
	font-weight: 650;
	color: var(--dlx-ink);
	text-decoration: none;
	letter-spacing: -0.015em;
}

.dlx-callbar a:last-child {
	background: var(--dlx-brand);
	color: #fff;
}

.dlx-callbar svg {
	width: 17px;
	height: 17px;
	flex: none;
}

.dlx-callbar a:first-child svg {
	color: var(--dlx-brand);
}

@media (min-width: 1000px) {
	.dlx-callbar {
		display: none;
	}
}

/* Keep the call bar from covering the last scrap of content. */
@media (max-width: 999px) {
	body.dlx-has-callbar .dlx-footer__bottom {
		padding-bottom: 5rem;
	}
}

/* ==========================================================================
   19. MOTION — reveal on scroll
   ========================================================================== */

.dlx-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 620ms var(--dlx-ease), transform 620ms var(--dlx-ease);
}

.dlx-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* If JS never runs, content must still be visible. */
.no-js .dlx-reveal {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.dlx-reveal {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   20. EDITORIAL / SINGLE POST
   ========================================================================== */

.dlx-prose > * + * {
	margin-block-start: 1.35em;
}

.dlx-prose :where(h2, h3, h4) {
	margin-block-start: 2em;
	margin-block-end: 0.65em;
}

.dlx-prose img {
	border-radius: 16px;
}

/* ==========================================================================
   21. PAGE HEADER (inner pages)
   ========================================================================== */

.dlx-pagehead {
	padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 3.5rem);
	border-bottom: 1px solid var(--dlx-border);
	background: var(--dlx-surface);
}

.dlx-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--dlx-muted);
	margin-bottom: 1rem;
	list-style: none;
	padding: 0;
}

.dlx-breadcrumb a {
	color: var(--dlx-muted);
	text-decoration: none;
}

.dlx-breadcrumb a:hover {
	color: var(--dlx-brand);
}

.dlx-breadcrumb li:not(:last-child)::after {
	content: "/";
	margin-left: 0.5rem;
	color: var(--dlx-border-strong);
}

.dlx-breadcrumb li {
	display: inline-flex;
	align-items: center;
}

/* ==========================================================================
   22. ILLUSTRATIONS
   The bundled SVG art is printed inline and colored entirely through these
   classes, so a single set of shapes serves both light and dark mode.
   ========================================================================== */

.dlx-art {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

.dlx-art__panel        { fill: var(--dlx-surface-2); }
.dlx-art__soft         { fill: var(--dlx-surface); }
.dlx-art__muted        { fill: var(--dlx-border-strong); }
.dlx-art__ink          { fill: var(--dlx-ink); }
.dlx-art__brand        { fill: var(--dlx-brand); }
.dlx-art__brand-soft   { fill: var(--dlx-brand-soft); }
.dlx-art__stroke       { stroke: var(--dlx-border); }
.dlx-art__brand-stroke { stroke: var(--dlx-brand); }

/* Elements that carry both a fill and a stroke class. */
.dlx-art__panel.dlx-art__stroke,
.dlx-art__soft.dlx-art__stroke {
	stroke-width: 1.25;
}

.dlx-art-frame {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	background: var(--dlx-surface);
	border: 1px solid var(--dlx-border);
	padding: clamp(1rem, 2.5vw, 1.75rem);
}

.dlx-art-frame--flush {
	padding: 0;
}

.dlx-art-frame--map {
	aspect-ratio: 600 / 420;
	padding: 0;
}

.dlx-art-frame--map .dlx-art {
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   23. UTILITIES
   ========================================================================== */

/* Marks a claim that has not been verified yet. Visible enough that it cannot
   ship by accident, quiet enough that it doesn't wreck the design while the
   real content is still being gathered.

   `display: inline` matters: as an inline-block with `white-space: nowrap`,
   a long note became one very wide box that pushed the whole document past
   the viewport and broke the page layout. */
.dlx-placeholder {
	display: inline;
	background: rgba(217, 119, 6, 0.13);
	box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.3);
	color: #b45309;
	padding: 0.15em 0.45em;
	border-radius: 4px;
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

:root[data-theme="dark"] .dlx-placeholder {
	background: rgba(251, 191, 36, 0.14);
	box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.28);
	color: #fbbf24;
}

.dlx-center { text-align: center; }
.dlx-narrow { max-width: 720px; margin-inline: auto; }
.dlx-mw-56 { max-width: 56ch; }
.dlx-mt-0 { margin-top: 0 !important; }
.dlx-mb-0 { margin-bottom: 0 !important; }

.dlx-center .dlx-lede,
.dlx-center .dlx-mw-56 {
	margin-inline: auto;
}

.dlx-center .dlx-eyebrow::before {
	display: none;
}

@media print {
	.dlx-header,
	.dlx-footer,
	.dlx-callbar,
	.dlx-drawer,
	.dlx-mode {
		display: none !important;
	}
}