/*
 * Portfolio design layer ("Lime Night"). Loads after site.css.
 * Tokens come from the palette (--as-*); everything here is layout + components.
 */
.dz, .dz * { box-sizing: border-box; }
:root { --dz-pad: clamp(24px, 4vw, 48px); --dz-r: 24px; --dz-grid: color-mix(in srgb, var(--as-text) 5%, transparent); --dz-line: color-mix(in srgb, var(--as-border) 70%, transparent); --dz-dim: color-mix(in srgb, var(--as-muted) 78%, transparent); }
html { scroll-behavior: smooth; }
body { background: var(--as-bg); color: var(--as-text); font-family: var(--as-font); -webkit-font-smoothing: antialiased; }
body.elementor-default .site-main, .site-main { max-width: none; }
.dz-wrap { width: 100%; max-width: calc(var(--as-container, 1200px) + 2 * var(--dz-pad)); margin: 0 auto; padding-inline: var(--dz-pad); }
.dz-sec { padding-block: clamp(40px, 4.5vw, 60px); }
.dz-sec--tight { padding-block: clamp(24px, 2.8vw, 36px); }
.dz-hero + .dz-sec, .dz-sec#plugins, [id="plugins"] + .dz-sec, .dz-sec:first-of-type { padding-top: clamp(18px, 2vw, 28px); }
.dz-mono { font-family: var(--as-mono); font-weight: var(--as-mw); }
.dz-eyebrow { font-family: var(--as-mono); font-size: 14px; color: var(--as-accent-ink); margin: 0; font-weight: var(--as-mw); }
.dz-eyebrow--dim { color: var(--as-muted); }
.dz-h1, .dz-h2, .dz-h3 { font-family: var(--as-font-display); font-weight: var(--as-dw); margin: 0; color: var(--as-text); text-wrap: balance; }
.dz-h1 { font-size: clamp(42px, 6vw, 84px); line-height: 1; letter-spacing: -0.036em; }
.dz-h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.05; letter-spacing: -0.03em; }
.dz-h3 { font-size: 24px; line-height: 1.2; font-weight: calc(var(--as-dw) - 100); letter-spacing: -0.01em; }
.dz-hl { color: var(--as-accent); }
.dz-lead { font-size: 20px; line-height: 1.6; color: var(--as-muted); margin: 0; max-width: 720px; }
.dz-p { font-size: 15px; line-height: 1.6; color: var(--as-muted); margin: 0; }
.dz a { color: inherit; }

/* ---------- buttons ---------- */
.dz-btn, a.dz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 0 28px; border-radius: 999px; background: var(--as-accent); color: var(--as-on-accent); font: 600 17px/1 var(--as-font); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .2s var(--as-ease), background .2s, border-color .2s; white-space: nowrap; }
.dz-btn:hover { background: var(--as-accent-hover); color: var(--as-on-accent); transform: translateY(-1px); }
.dz-btn--sm { height: 44px; padding: 0 20px; font-size: 16px; }
.dz-btn--lg { height: 56px; }
.dz-btn--block { display: flex; width: 100%; }
.dz-btn--ghost, a.dz-btn--ghost { background: transparent; color: var(--as-text); border-color: var(--as-border); }
.dz-btn--ghost:hover { background: var(--as-surface); color: var(--as-text); border-color: var(--as-muted); }
.dz-btn--dark, a.dz-btn--dark { background: #07090f; color: #fff; }
.dz-btn--dark:hover { background: #151b27; color: #fff; }
.dz-link { font-size: 16px; font-weight: 600; color: var(--as-text); text-decoration: none; white-space: nowrap; }
.dz-link:hover { color: var(--as-accent-ink); }
.dz-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.dz :focus-visible, .dz-hd :focus-visible, .dz-menu :focus-visible, .dz-ft :focus-visible { outline: 2px solid var(--as-accent-ink); outline-offset: 3px; }

/* ---------- logo ---------- */
.dz-logo__bg { fill: var(--as-surface-2); stroke: var(--as-border); }
.dz-logo text { font-family: var(--as-font-display); }
.dz-logo__t { fill: var(--as-text); }
.dz-logo__s { fill: var(--as-accent-ink); }
:root[data-theme="dark"] .dz-logo__s { fill: var(--as-accent); }

/* ---------- header ---------- */
#asx-site-header { z-index: 100; background: transparent; }
.dz-hd { position: relative; height: 88px; border-bottom: 1px solid var(--dz-line); background: color-mix(in srgb, var(--as-bg) 88%, transparent); font-family: var(--as-font); }
html[data-blur="off"] .dz-hd { background: var(--as-bg); }
.dz-hd::before { content: ""; position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
html[data-blur="off"] .dz-hd::before { display: none; }
.dz-hd__in { height: 100%; max-width: calc(var(--as-container, 1200px) + 2 * var(--dz-pad)); margin: 0 auto; padding-inline: var(--dz-pad); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.dz-hd__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--as-text); }
.dz-hd__name { font-family: var(--as-font-display); font-size: 20px; font-weight: calc(var(--as-dw) - 100); letter-spacing: -0.015em; }
.dz-hd__nav { display: flex; align-items: center; gap: 36px; font-size: 16px; font-weight: 500; }
.dz-hd__link { color: var(--as-muted); text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease; }
.dz-hd__link:hover { color: var(--as-text); border-bottom-color: var(--as-accent); }
.dz-hd__link[aria-current="page"] { color: var(--as-text); font-weight: 600; border-bottom-color: var(--as-accent); }
.dz-hd__nav .asx-cta { margin-left: 0; }
/* Neutralize Hello Elementor reset.css aggressive #c36 pink button rules */
html body [type=button],
html body [type=reset],
html body [type=submit],
html body button {
	background-color: transparent;
	border: none;
	color: inherit;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

[type=button]:focus,
[type=button]:hover,
[type=button]:active,
[type=submit]:focus,
[type=submit]:hover,
[type=submit]:active,
button:focus,
button:hover,
button:active,
html body [type=button]:focus,
html body [type=button]:hover,
html body [type=button]:active,
html body [type=submit]:focus,
html body [type=submit]:hover,
html body [type=submit]:active,
html body button:focus,
html body button:hover,
html body button:active {
	background-color: var(--as-accent);
	color: var(--as-on-accent);
	border-color: var(--as-accent);
	text-decoration: none;
}

button.asx-top,
.asx-top,
html body button.asx-top,
html body [type=button].asx-top {
	border: none !important;
	outline: none !important;
}

.dz-hd__burger { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--as-border); border-radius: 999px; background: var(--as-surface); align-items: center; justify-content: center; cursor: pointer; color: var(--as-text); transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important; }
.dz-hd__burger svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* Open burger button (resting: surface, hover: accent) */
html body .dz-hd__burger:not(.dz-hd__burger--close),
html body button.dz-hd__burger:not(.dz-hd__burger--close),
html body [type=button].dz-hd__burger:not(.dz-hd__burger--close) {
	background-color: var(--as-surface) !important;
	color: var(--as-text) !important;
	border-color: var(--as-border) !important;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
html body .dz-hd__burger:not(.dz-hd__burger--close):hover,
html body button.dz-hd__burger:not(.dz-hd__burger--close):hover,
html body [type=button].dz-hd__burger:not(.dz-hd__burger--close):hover,
html body .dz-hd__burger:not(.dz-hd__burger--close):focus,
html body button.dz-hd__burger:not(.dz-hd__burger--close):focus,
html body [type=button].dz-hd__burger:not(.dz-hd__burger--close):focus,
html body .dz-hd__burger:not(.dz-hd__burger--close):active,
html body button.dz-hd__burger:not(.dz-hd__burger--close):active,
html body [type=button].dz-hd__burger:not(.dz-hd__burger--close):active,
html body .dz-hd__burger:not(.dz-hd__burger--close):focus-visible,
html body button.dz-hd__burger:not(.dz-hd__burger--close):focus-visible,
html body [type=button].dz-hd__burger:not(.dz-hd__burger--close):focus-visible {
	background-color: var(--as-accent) !important;
	color: var(--as-on-accent) !important;
	border-color: var(--as-accent) !important;
}

/* Close cross button (resting: ACCENT like 'hire me', hover: ACCENT HOVER) */
html body .dz-hd__burger--close,
html body button.dz-hd__burger--close,
html body [type=button].dz-hd__burger--close,
.dz-menu__bar .dz-hd__burger--close,
.dz-menu__bar button.dz-hd__burger--close,
.dz-menu__bar [type=button].dz-hd__burger--close {
	background-color: var(--as-accent) !important;
	color: var(--as-on-accent) !important;
	border-color: var(--as-accent) !important;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
html body .dz-hd__burger--close:hover,
html body button.dz-hd__burger--close:hover,
html body [type=button].dz-hd__burger--close:hover,
html body .dz-hd__burger--close:focus,
html body button.dz-hd__burger--close:focus,
html body [type=button].dz-hd__burger--close:focus,
html body .dz-hd__burger--close:active,
html body button.dz-hd__burger--close:active,
html body [type=button].dz-hd__burger--close:active,
html body .dz-hd__burger--close:focus-visible,
html body button.dz-hd__burger--close:focus-visible,
html body [type=button].dz-hd__burger--close:focus-visible,
.dz-menu__bar .dz-hd__burger--close:hover,
.dz-menu__bar button.dz-hd__burger--close:hover,
.dz-menu__bar [type=button].dz-hd__burger--close:hover,
.dz-menu__bar .dz-hd__burger--close:focus,
.dz-menu__bar button.dz-hd__burger--close:focus,
.dz-menu__bar [type=button].dz-hd__burger--close:focus,
.dz-menu__bar .dz-hd__burger--close:active,
.dz-menu__bar button.dz-hd__burger--close:active,
.dz-menu__bar [type=button].dz-hd__burger--close:active {
	background-color: var(--as-accent-hover) !important;
	color: var(--as-on-accent) !important;
	border-color: var(--as-accent-hover) !important;
}
html body button.asx-tt,
html body .asx-tt {
	background-color: var(--as-surface);
	color: var(--as-text);
	border-color: var(--as-border);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
html body button.asx-tt:hover,
html body .asx-tt:hover,
html body button.asx-tt:focus,
html body .asx-tt:focus,
html body button.asx-tt:active,
html body .asx-tt:active,
html body button.asx-tt:focus-visible,
html body .asx-tt:focus-visible {
	background-color: var(--as-accent) !important;
	color: var(--as-on-accent) !important;
	border-color: var(--as-accent) !important;
}
.dz-hd button.asx-tt { margin: 0; }

/* ---------- mobile menu ---------- */
.dz-menu { position: fixed; inset: 0; z-index: 200; background: var(--as-bg); display: flex; flex-direction: column; overflow-y: auto; }
.dz-menu[hidden] { display: none; }
.dz-menu__bar { height: 64px; flex-shrink: 0; padding: 0 16px 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--dz-line); }
.dz-menu__bar .dz-hd__burger { display: inline-flex; }
.dz-menu__nav { padding: 32px 20px 0; display: flex; flex-direction: column; }
.dz-menu__nav a { display: flex; align-items: baseline; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--dz-line); text-decoration: none; color: var(--as-text); }
.dz-menu__nav span { font-family: var(--as-font-display); font-size: 40px; font-weight: var(--as-dw); letter-spacing: -0.03em; }
.dz-menu__nav small { font-family: var(--as-mono); font-size: 13px; color: var(--dz-dim); font-weight: var(--as-mw); }
.dz-menu__nav a[aria-current="page"] span { color: var(--as-accent-ink); }
.dz-menu__foot { margin-top: auto; padding: 24px 20px 32px; display: flex; flex-direction: column; gap: 18px; }
.dz-seg,
.e-con.dz-seg,
.elementor-widget.dz-seg {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 4px;
	border-radius: 999px;
	background: var(--as-surface);
	border: 1px solid var(--as-border);
	width: 100%;
	box-sizing: border-box;
}
.dz-seg button,
html body .dz-seg button,
html body .dz-seg [type=button] {
	height: 44px;
	padding: 0 20px;
	margin: 0;
	border: 0 !important;
	border-radius: 999px;
	background: transparent !important;
	color: var(--as-muted) !important;
	font: 500 15px/1 var(--as-font);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: none !important;
	width: 100%;
	box-sizing: border-box;
	transition: background-color 0.15s ease, color 0.15s ease !important;
}
html body .dz-seg button:not([aria-pressed="true"]):hover,
html body .dz-seg button:not([aria-pressed="true"]):focus,
html body .dz-seg button:not([aria-pressed="true"]):active {
	background: transparent !important;
	color: var(--as-text) !important;
	border: 0 !important;
	box-shadow: none !important;
}
html body .dz-seg button[aria-pressed="true"],
html body .dz-seg button[aria-pressed="true"]:focus,
html body .dz-seg button[aria-pressed="true"]:hover,
html body .dz-seg button[aria-pressed="true"]:active {
	background: var(--as-accent) !important;
	color: var(--as-on-accent) !important;
	font-weight: 600;
	border: 0 !important;
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}
.dz-seg svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.dz-menu__links { display: flex; gap: 20px; font-size: 14px; font-weight: 600; }
.dz-menu__links a { color: var(--as-muted); text-decoration: none; }
html.dz-menu-open, html.dz-menu-open body { overflow: hidden; }

/* ---------- footer ---------- */
.dz-ft { border-top: 1px solid var(--dz-line); font-size: 14px; color: var(--as-muted); background: var(--as-bg); }
.dz-ft__in { max-width: calc(var(--as-container, 1200px) + 2 * var(--dz-pad)); margin: 0 auto; padding: 48px var(--dz-pad); display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.dz-ft__who { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.dz-ft__who strong { color: var(--as-text); font-weight: 600; }
.dz-ft__brand p { margin: 0; }
.dz-ft__nav { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: flex-end; }
.dz-ft__nav a { color: var(--as-muted); text-decoration: none; }
.dz-ft__nav a:hover { color: var(--as-text); }

/* ---------- hero ---------- */
.dz-hero { padding: clamp(44px, 5vw, 64px) 0 clamp(18px, 2vw, 28px); background-image: none !important; }
html[data-decor="off"] .dz-hero { background-image: none; }
.dz-hero .dz-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 2vw, 22px); }
.dz-hero--split .dz-wrap { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; }
.dz-hero__txt { display: flex; flex-direction: column; gap: 20px; max-width: 800px; align-items: flex-start; }
.dz-hero .dz-h1 { max-width: 1120px; }

/* ---------- cards / bento ---------- */
.dz-card { background: var(--as-surface); border: 1px solid var(--as-border); border-radius: var(--dz-r); padding: 28px; display: flex; flex-direction: column; gap: 14px; color: var(--as-text); text-decoration: none; }
a.dz-card { transition: transform .25s var(--as-ease), border-color .25s; }
a.dz-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--as-accent) 55%, var(--as-border)); color: var(--as-text); }
html[data-hover="off"] a.dz-card:hover { transform: none; }
.dz-card--accent { background: var(--as-accent); color: var(--as-on-accent); border-color: var(--as-accent); justify-content: space-between; }
.dz-card--alt { background: var(--as-surface-2); }
.dz-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.dz-c3 { grid-column: span 3; } .dz-c4 { grid-column: span 4; } .dz-c5 { grid-column: span 5; } .dz-c6 { grid-column: span 6; } .dz-c7 { grid-column: span 7; } .dz-c8 { grid-column: span 8; } .dz-c12 { grid-column: span 12; }
.dz-r2 { grid-row: span 2; }
.dz-cap { font-family: var(--as-mono); font-size: 15px; color: var(--as-muted); font-weight: var(--as-mw); }
.dz-card--accent .dz-cap { color: inherit; }
.dz-big { font-family: var(--as-font-display); font-size: 64px; line-height: 1; font-weight: var(--as-dw); letter-spacing: -0.03em; }
.dz-t24 { font-family: var(--as-font-display); font-size: 24px; line-height: 1.2; font-weight: calc(var(--as-dw) - 100); }
.dz-t22 { font-family: var(--as-font-display); font-size: 22px; line-height: 1.25; font-weight: calc(var(--as-dw) - 100); }
.dz-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--as-accent); display: inline-block; }
.dz-live { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.dz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dz-chip { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--as-border); color: var(--as-text); }
.dz-pl { padding: 0; list-style: none; margin: 0; display: flex; flex-direction: column; }
.dz-pl__head { display: flex; justify-content: space-between; padding: 0 6px 12px; font-family: var(--as-mono); font-size: 13px; color: var(--as-muted); font-weight: var(--as-mw); }
.dz-pl li { display: flex; align-items: center; gap: 14px; padding: 12px 6px; border-top: 1px solid var(--dz-line); }
.dz-pl__ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--as-surface-2); color: var(--as-text); display: flex; align-items: center; justify-content: center; font-family: var(--as-font-display); font-weight: var(--as-dw); }
.dz-pl__ic { transition: background .2s, color .2s, transform .2s var(--as-ease); }
.dz-pl li:hover .dz-pl__ic, .dz-card:hover > .dz-pcard-head .dz-pl__ic { background: var(--as-accent); color: var(--as-on-accent); }
html[data-hover="off"] .dz-pl li:hover .dz-pl__ic { background: var(--as-surface-2); color: var(--as-text); }
.dz-pl b { display: block; font-weight: 600; }
.dz-pl small { display: block; font-size: 13px; color: var(--as-muted); }
.dz-term { font-family: var(--as-mono); font-size: 14px; gap: 12px; font-weight: var(--as-mw); }
.dz-term .dim { color: var(--as-muted); } .dz-term .q { color: var(--as-accent-ink); } .dz-term .ok { color: var(--as-success, #3ddc84); }

/* ---------- marquee / logos ---------- */
.dz-logos { border-block: 1px solid var(--dz-line); padding-block: 40px; }
.dz-logos .dz-wrap { display: flex; align-items: center; gap: 48px; }
.dz-logos__lab { flex-shrink: 0; font-family: var(--as-mono); font-size: 13px; color: var(--as-muted); font-weight: var(--as-mw); }
.dz-logos__row { display: flex; flex-wrap: wrap; column-gap: 40px; row-gap: 12px; font-family: var(--as-font-display); font-size: 22px; font-weight: calc(var(--as-dw) - 100); color: var(--dz-dim); }
.dz-marq { overflow: hidden; flex: 1; min-width: 0; }
.dz-marq__track { display: flex; width: max-content; gap: 40px; animation: dz-marq 36s linear infinite; }
.dz-marq__track > * { white-space: nowrap; }
@keyframes dz-marq { to { transform: translateX(calc(-50% - 20px)); } }
.dz-marq:hover .dz-marq__track { animation-play-state: paused; }

/* ---------- section head, grids ---------- */
.dz-head { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(20px, 3vw, 32px); margin-bottom: clamp(22px, 2.6vw, 34px); }
.dz-head__txt { display: flex; flex-direction: column; gap: 16px; max-width: 800px; }
.dz-grid { display: grid; gap: 16px; }
.dz-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dz-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dz-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dz-svc { position: relative; padding: 32px; gap: 16px; cursor: pointer; }
.dz-svc .dz-n { font-family: var(--as-mono); font-size: 14px; color: var(--as-accent-ink); font-weight: var(--as-mw); }
.dz-svc .dz-go { margin-top: auto; font-size: 15px; font-weight: 600; }
.dz-svc .dz-go a,
.dz-svc a.dz-go__link {
	color: var(--as-text);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color 0.15s ease, transform 0.15s ease;
}
.dz-svc .dz-go a::after,
.dz-svc a.dz-go__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}
.dz-svc:hover .dz-go a,
.dz-svc:hover a.dz-go__link {
	color: var(--as-accent);
	transform: translateX(4px);
}

/* Clickable plugin & service card enhancements */
.dz-card.dz-svc {
	position: relative;
	cursor: pointer;
	transition: transform 0.25s var(--as-ease), border-color 0.25s ease, box-shadow 0.25s ease;
}
.dz-card.dz-svc:not(:has(a)) {
	cursor: default;
}
.dz-card.dz-svc:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--as-accent) 55%, var(--as-border));
	box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.08);
}
html[data-hover="off"] .dz-card.dz-svc:hover {
	transform: none;
}
.dz-card.dz-svc .dz-h3 a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}
.dz-card.dz-svc:hover .dz-h3 a {
	color: var(--as-accent);
}
.dz-card.dz-svc .dz-h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.dz-card.dz-svc .dz-links,
.dz-card.dz-svc .dz-links a,
.dz-card.dz-svc .dz-chips {
	position: relative;
	z-index: 2;
}
.dz-card.dz-svc .dz-links a:hover {
	color: var(--as-accent);
}

/* ---------- Dynamic Services Grid (CPT & SCF) ---------- */
.dz-services-grid {
	gap: 24px;
}
.dz-svc-tier {
	padding: 44px;
	border-radius: 28px;
	display: flex;
	flex-direction: column;
	background: var(--as-surface);
	border: 1px solid var(--as-border);
	transition: transform 0.3s var(--as-ease), border-color 0.3s ease, box-shadow 0.3s ease;
}
.dz-svc-tier:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--as-accent) 60%, var(--as-border));
	box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.1);
}
.dz-svc-tier__num {
	/* Match the step numbers ("01"–"04") in "How a project runs". */
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	color: var(--as-muted);
	letter-spacing: normal;
	margin-bottom: 20px;
}
.dz-svc-tier__title {
	margin: 0 0 16px;
	font-family: var(--as-font-display);
	font-size: 26px;
	line-height: 1.25;
	font-weight: var(--as-dw);
	color: var(--as-text);
	letter-spacing: -0.02em;
}
.dz-svc-tier__desc {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--as-muted);
}
.dz-svc-tier__list {
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.dz-svc-tier__list li {
	position: relative;
	padding-left: 20px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--as-text);
}
.dz-svc-tier__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--as-accent);
}
.dz-svc-tier__foot {
	margin-top: auto;
	padding-top: 24px;
	border-top: 1px solid var(--as-border);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.dz-svc-tier__label {
	font-family: inherit;
	font-size: 16px;
	color: var(--as-muted);
}
.dz-svc-tier__price {
	font-family: var(--as-mono);
	font-size: 14px;
	font-weight: 700;
	color: var(--as-text);
	letter-spacing: 0.02em;
}
@media (max-width: 900px) {
	.dz-services-grid {
		grid-template-columns: 1fr;
	}
	.dz-svc-tier {
		padding: 32px 24px;
	}
	.dz-svc-tier__title {
		font-size: 22px;
	}
}

/* ---------- work cards ---------- */
.dz-work { padding: 0; overflow: hidden; gap: 0; }
.dz-work__vis { height: 260px; background: var(--as-surface-2); display: flex; align-items: center; justify-content: center; gap: 16px; padding: 24px; }
.dz-work__body { padding: 32px; display: flex; flex-direction: column; gap: 10px; }
.dz-work__body h3 { margin: 0; font-family: var(--as-font-display); font-size: 28px; font-weight: calc(var(--as-dw) - 100); }
.dz-mini { width: 220px; max-width: 100%; background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.dz-mini small { font-size: 12px; color: var(--as-muted); }
.dz-mini b { font-weight: 600; font-size: 15px; }
.dz-pill { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--as-accent); color: var(--as-on-accent); font-size: 13px; font-weight: 600; }
.dz-pill--off { background: var(--as-surface-2); color: var(--as-muted); }
.dz-warn { color: #d9622a; font-size: 12px; font-weight: 600; }
:root[data-theme="dark"] .dz-warn { color: #ff9f6b; }
.dz-tab { display: flex; flex-wrap: wrap; gap: 8px; } 
.dz-block { height: 56px; border-radius: 10px; background: var(--as-surface-2); border: 1px solid var(--as-border); }
.dz-blocks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.dz-input { height: 40px; border: 1px solid var(--as-border); border-radius: 8px; background: var(--as-surface); display: flex; align-items: center; padding: 0 12px; font-size: 12px; color: var(--as-muted); }

/* ---------- blog ---------- */
.dz-post { padding: 32px; border-radius: 24px; gap: 14px; }
.dz-post .dz-cat { font-family: var(--as-mono) !important; font-size: 14px; color: var(--as-accent-ink); font-weight: 600; line-height: 1.4; }
:root[data-theme="dark"] .dz-post .dz-cat { color: var(--as-accent); }
.dz-post h3 { margin: 0; font-family: var(--as-font-display); font-size: 23px; line-height: 1.3; font-weight: calc(var(--as-dw) - 100); }
.dz-post .dz-date { margin-top: auto; font-family: var(--as-mono) !important; font-size: 14px; color: var(--as-muted); font-weight: var(--as-mw, 400); line-height: 1.4; }
.dz-feat { display: grid; grid-template-columns: 1fr 1fr; padding: 0; overflow: hidden; border-radius: 32px; gap: 0; }
.dz-feat__vis { background: var(--as-surface-2); min-height: 400px; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 40px; }
.dz-feat__txt { padding: 56px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.dz-feat__txt h2 { margin: 0; font-family: var(--as-font-display); font-size: 40px; line-height: 1.1; font-weight: var(--as-dw); letter-spacing: -0.03em; }

/* ---------- CTA band ---------- */
.dz-cta { background: var(--as-accent); color: var(--as-on-accent); border-radius: 32px; padding: 64px 80px; display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.dz-cta h2 { margin: 0; font-family: var(--as-font-display); font-size: clamp(32px, 3.6vw, 48px); line-height: 1.04; font-weight: var(--as-dw); letter-spacing: -0.03em; max-width: 760px; color: inherit; }
.dz-cta p { margin: 12px 0 0; font-size: 17px; font-weight: 500; }
.dz-cta .dz-mailto { display: block; margin-top: 14px; font-family: var(--as-mono); font-size: 14px; color: inherit; font-weight: var(--as-mw); }

/* ---------- reduced / responsive ---------- */
@media (max-width: 1100px) {
	:root { --dz-pad: 32px; }
	.dz-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dz-c3, .dz-c4 { grid-column: span 6; }
	.dz-c5, .dz-c7, .dz-c8 { grid-column: span 12; }
	.dz-r2 { grid-row: auto; }
	.dz-logos .dz-wrap { flex-direction: column; align-items: flex-start; gap: 16px; }
	.dz-cta { padding: 48px 40px; }
	.dz-feat { grid-template-columns: 1fr; }
	.dz-feat__vis { min-height: 260px; }
}
@media (max-width: 900px) {
	.dz-hd__nav { display: none; }
	.dz-hd { height: 64px; }
	.dz-hd__in { padding-inline: 20px 16px; }
	.dz-hd__brand svg { width: 34px; height: 34px; }
	.dz-hd__name { font-size: 18px; }
	.dz-hd__burger { display: inline-flex; }
	.dz-ft__in { flex-direction: column; padding-inline: 20px; }
	.dz-ft__nav { justify-content: flex-start; gap: 8px 20px; }
}
@media (max-width: 720px) {
	:root { --dz-pad: 20px; }
	.dz-sec { padding-block: 56px; }
	.dz-hero { padding: 40px 0 32px; background-size: 40px 40px; }
	.dz-hero--split .dz-wrap { flex-direction: column; align-items: stretch; gap: 24px; }
	.dz-lead { font-size: 17px; }
	.dz-h1 { letter-spacing: -0.034em; }
	.dz-actions { flex-direction: column; align-self: stretch; }
	.dz-actions .dz-btn { width: 100%; height: 52px; font-size: 16px; }
	.dz-g2, .dz-g3, .dz-g4 { grid-template-columns: 1fr; }
	.dz-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.dz-bento > * { grid-column: span 1; }
	.dz-bento > .dz-c12, .dz-bento > .dz-c5, .dz-bento > .dz-c7, .dz-bento > .dz-c8, .dz-bento > .dz-term, .dz-bento > .dz-wide { grid-column: span 2; }
	.dz-card { padding: 20px; border-radius: 20px; }
	.dz-big { font-size: 36px; }
	.dz-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
	.dz-work__vis { height: 170px; padding: 16px; gap: 10px; }
	.dz-work__body { padding: 20px; }
	.dz-work__body h3 { font-size: 21px; }
	.dz-mini { padding: 12px; width: 50%; }
	.dz-post { padding: 20px; border-radius: 20px; }
	.dz-post h3 { font-size: 19px; }
	.dz-feat__txt { padding: 22px; }
	.dz-feat__txt h2 { font-size: 24px; }
	.dz-feat__meta { gap: 6px 10px; }
	.dz-feat .dz-cat,
	.dz-feat .dz-feat-tag,
	.dz-feat .dz-date { font-size: 13.5px; }
	.dz-cta { flex-direction: column; align-items: stretch; padding: 32px 24px; border-radius: 24px; gap: 16px; }
	.dz-cta .dz-btn { width: 100%; height: 52px; font-size: 16px; }
	.dz-logos { padding-block: 32px; }
	.dz-logos__row { column-gap: 18px; row-gap: 8px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.dz-marq__track { animation: none; }
	.dz-btn, a.dz-card { transition: none; }
}

/* ---------- GSAP: hide hero heading until it is split (fails open after 2.5s) ---------- */
html.asx-gsap .dz-hero .dz-h1 { visibility: hidden; animation: dz-open 0s linear 2.5s forwards; }
@keyframes dz-open { to { visibility: visible; } }
@media (prefers-reduced-motion: reduce) { html.asx-gsap .dz-hero .dz-h1 { visibility: visible; animation: none; } }

/* ======================================================================
   More components: search, filters, pager, forms, lists, post page
   ====================================================================== */
.dz-search { display: flex; flex-direction: column; gap: 8px; width: 360px; max-width: 100%; }
.dz-search label, .dz-form label { font-size: 14px; font-weight: 600; color: var(--as-text); }
.dz-search input, .dz-form input[type="text"], .dz-form input[type="email"], .dz-form select, .dz-form textarea { width: 100%; height: 52px; padding: 0 18px; border: 1px solid var(--as-border); border-radius: 999px; background: var(--as-surface); color: var(--as-text); font: 400 16px var(--as-font); box-shadow: none; }
.dz-form select, .dz-form input[type="text"], .dz-form input[type="email"] { border-radius: 14px; height: 48px; }
.dz-form textarea { height: auto; min-height: 140px; border-radius: 14px; padding: 14px 18px; resize: vertical; }
.dz-search input:focus, .dz-form input:focus, .dz-form select:focus, .dz-form textarea:focus { outline: 2px solid var(--as-accent-ink); outline-offset: 2px; border-color: transparent; }
.dz-posts { transition: opacity .2s ease; }
.dz-posts.is-loading { opacity: 0.55; pointer-events: none; }
.dz-posts .dz-search { margin-bottom: 24px; }
.dz-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 48px; }
.dz-fchip { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--as-border); color: var(--as-text); text-decoration: none; font-size: 15px; font-weight: 600; transition: border-color .2s, background .2s; }
.dz-fchip:hover { border-color: var(--as-muted); }
.dz-fchip[aria-current="true"] { background: var(--as-accent); color: var(--as-on-accent); border-color: var(--as-accent); }

/* ---------- Sticky Work Filter Bar ---------- */
.dz-sticky-filter-bar { position: fixed; top: var(--header-h, 88px); left: 0; right: 0; width: 100%; z-index: 95; background: color-mix(in srgb, var(--as-bg) 96%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--as-border); padding: 10px 0; transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1), opacity .2s ease; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
body.admin-bar .dz-sticky-filter-bar { top: calc(var(--header-h, 88px) + 32px); }
@media (max-width: 782px) { body.admin-bar .dz-sticky-filter-bar { top: calc(var(--header-h, 88px) + 46px); } }
.dz-sticky-filter-bar.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.dz-sticky-filter-bar .dz-wrap { display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.dz-sticky-filter-bar .dz-wrap::-webkit-scrollbar { display: none; }
.dz-sticky-filter-bar .dz-filter { margin: 0 !important; display: flex; gap: 8px; flex-wrap: nowrap; white-space: nowrap; }
.dz-sticky-filter-bar .dz-fchip { height: 38px; padding: 0 16px; font-size: 14px; background: var(--as-surface); cursor: pointer; }
.dz-sticky-filter-bar .dz-fchip:hover { border-color: var(--as-muted); }
.dz-sticky-filter-bar .dz-fchip[aria-current="true"] { background: var(--as-accent); color: var(--as-on-accent); border-color: var(--as-accent); }
#plugins, #open-source, #client-sites, [id="plugins"], [id="open-source"], [id="client-sites"] { scroll-margin-top: calc(var(--header-h, 88px) + 68px); }
.dz-posts .dz-feat { margin-bottom: 16px; }
.dz-feat__vis {
	padding: 0 !important;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: stretch;
	justify-content: center;
	background: var(--as-surface-2);
	min-height: 400px;
}
.dz-feat__vis img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.dz-feat:hover .dz-feat__vis img {
	transform: scale(1.03);
}
.dz-feat__placeholder {
	width: 100%;
	height: 100%;
	min-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--as-surface-2) 0%, var(--as-surface) 100%);
	position: relative;
}
.dz-feat__ph-mark {
	font-family: var(--as-font-display);
	font-size: 72px;
	font-weight: 800;
	color: var(--as-accent);
	opacity: 0.3;
}
.dz-feat__mark { font-family: var(--as-font-display); font-weight: var(--as-dw); font-size: 36px; color: var(--as-accent-ink); letter-spacing: -0.03em; padding: 24px; text-align: center; }
.dz-feat__meta {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
	font-family: var(--as-mono);
}
.dz-feat .dz-cat {
	font-family: var(--as-mono) !important;
	font-size: 14px;
	color: var(--as-accent-ink);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.01em;
}
:root[data-theme="dark"] .dz-feat .dz-cat {
	color: var(--as-accent);
}
.dz-feat .dz-feat-tag,
.dz-feat .dz-date {
	font-family: var(--as-mono) !important;
	font-size: 14px;
	color: var(--as-muted);
	font-weight: var(--as-mw, 400);
	line-height: 1.4;
	letter-spacing: -0.01em;
	display: inline-flex;
	align-items: center;
}
.dz-feat .dz-lead { font-size: 17px; line-height: 1.65; }
.dz-more { font-size: 16px; font-weight: 600; }
a.dz-feat:hover { transform: none; }

/* ---------- Blog Archive Bar & Search ---------- */
.dz-posts__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-bottom: 32px;
	flex-wrap: wrap;
	width: 100%;
	max-width: 100%;
}
.dz-posts__bar .dz-filter {
	margin-bottom: 0;
}
.dz-posts__bar .dz-search {
	margin-bottom: 0;
	flex-shrink: 0;
	min-width: 260px;
}
.dz-posts__bar .dz-search label {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.dz-posts__bar .dz-search__box {
	position: relative;
	display: flex;
	align-items: center;
}
.dz-posts__bar .dz-search__box::before {
	content: "";
	position: absolute;
	left: 16px;
	width: 16px;
	height: 16px;
	background: currentColor;
	opacity: 0.45;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z'/%3E%3C/svg%3E") no-repeat center / contain;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z'/%3E%3C/svg%3E") no-repeat center / contain;
	pointer-events: none;
}
.dz-posts__bar .dz-search input {
	height: 44px;
	padding: 0 16px 0 42px;
	font-size: 14px;
	border-radius: 999px;
	background: var(--as-surface);
	border: 1px solid var(--as-border);
	color: var(--as-text);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.dz-posts__bar .dz-search input:focus {
	border-color: var(--as-accent);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-accent) 25%, transparent);
}

/* ---------- Category Filter Horizontal Slider ---------- */
.dz-filter-slider {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
	flex: 1 1 auto;
	max-width: 100%;
	width: 100%;
}

.dz-posts__bar .dz-filter-slider {
	flex: 1 1 0;
	min-width: 0;
	max-width: 100%;
}

.dz-filter--slider {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	gap: 8px !important;
	padding: 4px 2px 6px 2px !important;
	margin: 0 !important;
	cursor: grab;
	touch-action: pan-x;
	overscroll-behavior-x: contain;
}

.dz-filter--slider.is-dragging {
	cursor: grabbing !important;
	user-select: none !important;
	scroll-behavior: auto !important;
}

.dz-filter--slider::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

.dz-filter--slider .dz-fchip {
	flex-shrink: 0 !important;
	white-space: nowrap !important;
	user-select: none;
}

/* Edge Fade Hints (Shows subtle fade when content overflows) */
.dz-filter-slider::before,
.dz-filter-slider::after {
	content: "";
	position: absolute;
	top: 2px;
	bottom: 4px;
	width: 32px;
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.22s ease;
}

.dz-filter-slider::before {
	left: 0;
	background: linear-gradient(to right, var(--as-bg, #0d1117) 0%, transparent 100%);
}

.dz-filter-slider::after {
	right: 0;
	background: linear-gradient(to left, var(--as-bg, #0d1117) 0%, transparent 100%);
}

.dz-filter-slider.can-scroll-left::before {
	opacity: 1;
}

.dz-filter-slider.can-scroll-right::after {
	opacity: 1;
}

/* Slider Arrow Buttons for desktop / mouse users */
.dz-filter-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%) scale(0.9);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--as-border);
	background: var(--as-surface);
	color: var(--as-text);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 4;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	padding: 0;
}

.dz-filter-arrow:hover {
	background: var(--as-accent);
	color: var(--as-on-accent);
	border-color: var(--as-accent);
	transform: translateY(-50%) scale(1.08);
}

.dz-filter-arrow--prev {
	left: -6px;
}

.dz-filter-arrow--next {
	right: -6px;
}

.dz-filter-slider.can-scroll-left .dz-filter-arrow--prev {
	opacity: 0.95;
	visibility: visible;
}

.dz-filter-slider.can-scroll-right .dz-filter-arrow--next {
	opacity: 0.95;
	visibility: visible;
}

@media (max-width: 768px) {
	.dz-posts__bar {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		width: 100%;
		max-width: 100%;
	}
	.dz-posts__bar .dz-filter-slider {
		width: 100%;
		max-width: 100%;
	}
	.dz-posts__bar .dz-search {
		width: 100%;
		min-width: 0;
	}
	.dz-filter-arrow {
		display: none !important; /* Touch swipe takes priority on mobile */
	}
	.dz-filter-slider::before {
		width: 20px;
	}
	.dz-filter-slider::after {
		width: 24px;
	}
}

/* ---------- Blog Cart Mock Visual (Featured Post) ---------- */
.dz-feat__cartmock {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 24px;
	background: color-mix(in srgb, var(--as-surface) 60%, var(--as-bg));
	border-radius: 12px;
	border: 1px solid var(--as-border);
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	align-content: center;
}
.dz-mock-card {
	background: var(--as-surface);
	border: 1px solid var(--as-border);
	border-radius: 10px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.dz-mock-head {
	font-family: var(--as-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--as-muted);
}
.dz-mock-card strong {
	font-size: 14px;
	font-weight: 700;
	color: var(--as-text);
}
.dz-mock-pill {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 3px 8px;
	border-radius: 999px;
	font-family: var(--as-mono);
	font-size: 11px;
	font-weight: 600;
}
.dz-mock-pill--green {
	background: color-mix(in srgb, var(--as-success, #3ddc84) 15%, transparent);
	color: var(--as-success, #22c55e);
	border: 1px solid color-mix(in srgb, var(--as-success, #3ddc84) 30%, transparent);
}
.dz-mock-pill--gray {
	background: color-mix(in srgb, var(--as-muted) 15%, transparent);
	color: var(--as-muted);
	border: 1px solid var(--as-border);
}

/* ---------- Skeleton Shimmer Loader ---------- */
@keyframes dzShimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}
.dz-skeleton-grid {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.dz-skeleton-card {
	pointer-events: none;
	user-select: none;
}
.dz-skeleton-feat {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 32px;
	padding: 32px;
}
@media (max-width: 768px) {
	.dz-skeleton-feat {
		grid-template-columns: 1fr;
	}
}
.dz-skel-vis,
.dz-skel-line,
.dz-skel-title {
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--as-surface) 92%, var(--as-border)) 0%,
		color-mix(in srgb, var(--as-surface-hover) 80%, var(--as-accent)) 50%,
		color-mix(in srgb, var(--as-surface) 92%, var(--as-border)) 100%
	);
	background-size: 200% 100%;
	animation: dzShimmer 1.4s infinite linear;
	border-radius: 6px;
}
.dz-skel-vis {
	min-height: 220px;
	border-radius: 12px;
}
.dz-skel-txt {
	display: flex;
	flex-direction: column;
	gap: 14px;
	justify-content: center;
}
.dz-skel-line {
	height: 14px;
}
.dz-skel-title {
	height: 28px;
	margin: 6px 0;
	width: 85%;
}
.dz-skel-w30 { width: 30%; }
.dz-skel-w40 { width: 40%; }
.dz-skel-w60 { width: 60%; }
.dz-skel-w80 { width: 80%; }
.dz-skel-w90 { width: 90%; }

/* ---------- Blog Empty State ---------- */
.dz-posts-empty {
	text-align: center;
	padding: 56px 24px;
	border: 1px dashed var(--as-border);
	border-radius: 16px;
	background: color-mix(in srgb, var(--as-surface) 40%, transparent);
	margin: 20px 0;
}
.dz-posts-empty .dz-p {
	margin-bottom: 20px;
	color: var(--as-muted);
	font-size: 16px;
}
.dz-reset-btn {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--as-accent);
	color: var(--as-on-accent) !important;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: transform .15s ease, background .2s ease;
}
.dz-reset-btn:hover {
	background: var(--as-accent-hover);
	transform: translateY(-2px);
}

.dz-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; font-size: 15px; font-weight: 600; flex-wrap: wrap; }
.dz-pager__side { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--as-border); color: var(--as-text); text-decoration: none; }
.dz-pager__side.is-off { color: var(--dz-dim); border-color: var(--dz-line); }
.dz-pager__nums { display: flex; gap: 8px; }
.dz-pager__n { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--as-border); color: var(--as-text); text-decoration: none; }
.dz-pager__n[aria-current="page"] { background: var(--as-accent); color: var(--as-on-accent); border-color: var(--as-accent); }
.dz-pager__count { display: none; font-family: var(--as-mono); font-size: 13px; color: var(--as-muted); font-weight: var(--as-mw); }

/* form */
.dz-form p { margin: 0 0 18px; }
.dz-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dz-form label { display: block; margin-bottom: 8px; }
.dz-form .dz-btn { height: 52px; }
.dz-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dz-note { margin: 0 0 20px; padding: 14px 18px; border-radius: 14px; font-size: 15px; font-weight: 500; border: 1px solid var(--as-border); }
.dz-note--ok { border-color: var(--as-success, #3ddc84); background: color-mix(in srgb, var(--as-success, #3ddc84) 12%, transparent); }
.dz-note--err { border-color: #e5484d; background: color-mix(in srgb, #e5484d 12%, transparent); }

/* lists */
.dz-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--as-text); }
.dz-check li { display: flex; gap: 10px; }
.dz-check li::before { content: ""; flex: 0 0 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--as-accent-ink); }
.dz-price { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--dz-line); display: flex; justify-content: space-between; font-size: 14px; color: var(--as-muted); }
.dz-price b { color: var(--as-text); font-weight: 600; }
.dz-svc--lg,
#website-development,
#plugin-development,
#woocommerce,
#speed-optimization { padding: 40px; scroll-margin-top: 96px; }
.dz-svc--lg .dz-h3 { font-size: 28px; }
.dz-step { padding: 24px; gap: 10px; border-radius: 20px; }
.dz-step .dz-n { font-family: var(--as-mono); font-size: 13px; color: var(--as-accent-ink); font-weight: var(--as-mw); }
.dz-step h3 { margin: 0; font-family: var(--as-font-display); font-size: 20px; font-weight: calc(var(--as-dw) - 100); }
.dz-band { border-block: 1px solid var(--dz-line); }
.dz-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 64px; align-items: start; }
.dz-faq__item { padding: 22px 0; border-top: 1px solid var(--dz-line); }
.dz-faq__item:last-child { border-bottom: 1px solid var(--dz-line); }
.dz-faq__item h3 { margin: 0 0 8px; font-family: var(--as-font-body, var(--as-font)); font-size: 17px; font-weight: 600; }
.dz-faq__item p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--as-muted); }
.dz-contact { background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 32px; padding: 64px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
.dz-contact__txt { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.dz-contact__txt a { color: var(--as-text); font-size: 16px; }
.dz-contact__txt .dim { color: var(--as-muted); font-size: 16px; }
.dz-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 32px; padding: 28px 0; border-top: 1px solid var(--dz-line); align-items: start; }
.dz-rows .dz-row:last-child { border-bottom: 1px solid var(--dz-line); }
.dz-row h3 { margin: 0; font-family: var(--as-font-display); font-size: 22px; font-weight: calc(var(--as-dw) - 100); }
.dz-row small { display: block; margin-top: 4px; font-size: 14px; color: var(--as-muted); }
.dz-row p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--as-muted); }
.dz-row .dz-tags { font-family: var(--as-mono); font-size: 13px; color: var(--as-muted); font-weight: var(--as-mw); }
.dz-row--exp { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); }
.dz-row--exp h3 { font-size: 20px; }
.dz-row--exp .dz-tags { font-size: 13px; }
.dz-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 6px; background: var(--as-accent); color: var(--as-on-accent); font: 600 12px/1.4 var(--as-font); vertical-align: middle; }
.dz-tcard { display: grid; grid-template-columns: 5fr 7fr; padding: 0; overflow: hidden; border-radius: 32px; gap: 0; }
.dz-tcard__vis { background: var(--as-surface-2); padding: 48px; display: flex; flex-direction: column; gap: 12px; justify-content: center; font-family: var(--as-mono); font-size: 14px; font-weight: var(--as-mw); }
.dz-tcard__txt { padding: 48px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.dz-links { display: flex; gap: 20px; font-size: 14px; font-weight: 600; flex-wrap: wrap; }
/* Pushes a widget (e.g. the links row) to the bottom of a flex card. */
.dz-push, .elementor-widget.dz-push { margin-top: auto; }
.dz-links a { color: var(--as-text); }
.dz-photo { border: 2px dashed var(--as-border); border-radius: 32px; aspect-ratio: 3 / 4; background: var(--as-surface); display: flex; align-items: center; justify-content: center; color: var(--as-muted); font-size: 14px; width: 100%; overflow: hidden; }
.dz-photo img { width: 100%; height: 100%; object-fit: cover; }
.dz-skills { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dz-skill { padding: 28px; border-radius: 24px; gap: 14px; }
.dz-hero--about .dz-wrap { flex-direction: row; align-items: center; justify-content: space-between; gap: 64px; }
.dz-hero--about .dz-hero__txt { max-width: 760px; }
.dz-hero--about .dz-photo { max-width: 416px; flex-shrink: 0; }
.dz-pcard-head { display: flex; align-items: center; gap: 14px; }
.dz-plugs-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* ---------- single post ---------- */
body.single-post .site-main, body.single-post main#content { max-width: none; padding: 0; margin: 0; }
body.single-post .page-header { background-image: none !important; margin: 0; padding: 72px max(var(--dz-pad), calc((100% - var(--as-container, 1200px)) / 2)) 40px; }
body.single-post .page-header .entry-title { font-family: var(--as-font-display); font-weight: var(--as-dw); font-size: clamp(34px, 5vw, 64px); line-height: 1.04; letter-spacing: -0.034em; max-width: 960px; color: var(--as-text); margin: 0; text-wrap: balance; }
body.single-post .page-content { max-width: calc(720px + 2 * var(--dz-pad)); margin: 0 auto; padding: 24px var(--dz-pad) 56px; font-size: 18px; line-height: 1.75; color: var(--as-text); }
body.single-post .page-content > p, body.single-post .page-content li { color: color-mix(in srgb, var(--as-text) 86%, var(--as-muted)); }
body.single-post .page-content h2 { font-family: var(--as-font-display); font-size: 32px; line-height: 1.15; font-weight: var(--as-dw); letter-spacing: -0.02em; margin: 56px 0 16px; color: var(--as-text); scroll-margin-top: 110px; }
body.single-post .page-content h3 { font-family: var(--as-font-display); font-size: 24px; font-weight: calc(var(--as-dw) - 100); margin: 40px 0 12px; }
body.single-post .page-content a { color: var(--as-accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.single-post .page-content img { max-width: 100%; height: auto; border-radius: 20px; }
body.single-post .page-content blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--as-accent); color: var(--as-muted); font-size: 20px; }
body.single-post .page-content :not(pre) > code { font-family: var(--as-mono); font-size: .88em; padding: 2px 7px; border-radius: 6px; background: var(--as-surface-2); border: 1px solid var(--as-border); font-weight: var(--as-mw); }
body.single-post .page-content pre { font-family: var(--as-mono); font-size: 14px; line-height: 1.65; padding: 22px 24px; border-radius: 16px; background: var(--as-surface); border: 1px solid var(--as-border); overflow-x: auto; color: var(--as-text); margin: 28px 0; font-weight: var(--as-mw); }
body.single-post .page-content pre code { background: none; border: 0; padding: 0; font-size: inherit; }
body.single-post .post-tags { max-width: calc(720px + 2 * var(--dz-pad)); margin: 0 auto; padding: 0 var(--dz-pad); display: flex; gap: 8px; flex-wrap: wrap; }
body.single-post .post-tags .tag-links a, body.single-post .post-tags a { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--as-border); font-size: 13px; font-weight: 600; color: var(--as-text); text-decoration: none; }
body.single-post .post-tags .tag-links { display: flex; gap: 8px; flex-wrap: wrap; }
body.single-post .post-tags .tag-links::before { content: none; }
body.single-post .post-navigation { max-width: calc(720px + 2 * var(--dz-pad)); margin: 40px auto 0; padding: 0 var(--dz-pad); }
body.single-post .post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.single-post .post-navigation a { display: block; padding: 20px; border: 1px solid var(--as-border); border-radius: 16px; background: var(--as-surface); color: var(--as-text); text-decoration: none; font-weight: 600; }
body.single-post .post-navigation .nav-next { text-align: right; }
body.single-post .comments-area { max-width: calc(720px + 2 * var(--dz-pad)); margin: 56px auto 0; padding: 0 var(--dz-pad); }
.dz-readbar,
#asx-site-header .dz-readbar {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 2.5px;
	background: var(--as-accent);
	transform: scaleX(0);
	transform-origin: 0 50%;
	z-index: 30;
	pointer-events: none;
}
body:not(.single-post) .dz-readbar {
	display: none !important;
}
.dz-postmeta { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 14px; color: var(--as-muted); }
.dz-postmeta .dz-av { width: 32px; height: 32px; border-radius: 50%; background: var(--as-accent); color: var(--as-on-accent); display: inline-flex; align-items: center; justify-content: center; font: 700 12px var(--as-font); }
.dz-postmeta strong { color: var(--as-text); }
.dz-postcta { max-width: calc(var(--as-container, 1200px) + 2 * var(--dz-pad)); margin: 64px auto 0; padding: 0 var(--dz-pad) 96px; }

@media (max-width: 1100px) {
	.dz-split { grid-template-columns: 1fr; gap: 32px; }
	.dz-contact { grid-template-columns: 1fr; padding: 40px; gap: 32px; }
	.dz-row { grid-template-columns: 1fr; gap: 10px; }
	.dz-tcard { grid-template-columns: 1fr; }
	.dz-hero--about .dz-wrap { flex-direction: column; align-items: flex-start; gap: 32px; }
	.dz-hero--about .dz-photo { max-width: 360px; }
}
@media (max-width: 720px) {
	.dz-search { width: 100%; }
	.dz-form__row { grid-template-columns: 1fr; gap: 0; }
	.dz-filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--dz-pad)); padding-inline: var(--dz-pad); margin-bottom: 28px; scrollbar-width: none; }
	.dz-fchip { flex-shrink: 0; padding: 0 16px; font-size: 14px; }
	.dz-pager { justify-content: space-between; }
	.dz-pager__nums { display: none; }
	.dz-pager__count { display: inline; }
	.dz-skills, .dz-plugs-2 { grid-template-columns: 1fr; }
	.dz-contact { padding: 24px; border-radius: 24px; }
	.dz-tcard__vis, .dz-tcard__txt { padding: 24px; }
	.dz-svc--lg { padding: 24px; }
	body.single-post .page-content { font-size: 17px; }
	body.single-post .page-content h2 { font-size: 26px; margin-top: 40px; }
	body.single-post .post-navigation .nav-links { grid-template-columns: 1fr; }
}
.dz-sec--blog { padding-top: 0; }
.dz-marq { width: 100%; }
@media (max-width: 720px) {
	.dz-marq__track { width: auto; flex-wrap: wrap; animation: none !important; transform: none !important; gap: 8px 18px; }
	.dz-marq__track > [aria-hidden="true"] { display: none; }
}
@media (max-width: 720px) {
	.dz-work__vis { height: auto; min-height: 170px; overflow: hidden; }
	.dz-t24 { font-size: 20px; }
	.dz-t22 { font-size: 19px; }
	.dz-tab { gap: 6px; }
	.dz-tab .dz-pill { height: 30px; padding: 0 10px; font-size: 12px; }
	.dz-blocks .dz-block:nth-child(n+5) { display: none; }
	.dz-block { height: 36px; }
}
.dz-hero .dz-filter { margin-inline: 0; padding-inline: 0; width: 100%; margin-bottom: 0; }
.dz-postmeta { flex-wrap: wrap; row-gap: 4px; }
.dz-postmeta span, .dz-postmeta strong { white-space: nowrap; }
/* ---------- Comments & Comment Form (Full Theme Design Parity) ---------- */
.dz-comments-wrap,
#comments.dz-comments-wrap,
.comments-area {
	font-size: 16px;
	margin-top: 48px;
}

.dz-comments-wrap .title-comments,
.comments-area .title-comments {
	font-family: var(--as-font-display);
	font-size: clamp(22px, 3vw, 26px);
	font-weight: var(--as-dw, 700);
	letter-spacing: -0.025em;
	color: var(--as-text);
	margin: 0 0 24px;
}

/* Override Hello Elementor's theme.css #comments comment list styles */
.dz-comments-wrap #comments .comment-list,
.dz-comments-wrap .comment-list,
#comments .comment-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 44px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
}

.dz-comments-wrap .comment-list .comment,
#comments .comment-list .comment {
	list-style: none !important;
	position: relative;
}

/* Individual Comment Card */
.dz-comments-wrap #comments .comment .comment-body,
.dz-comments-wrap .comment-body,
#comments .comment .comment-body {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	padding: clamp(20px, 3.5vw, 28px) !important;
	padding-inline-start: clamp(20px, 3.5vw, 28px) !important;
	padding-inline-end: clamp(20px, 3.5vw, 28px) !important;
	padding-block-start: clamp(20px, 3.5vw, 28px) !important;
	padding-block-end: clamp(20px, 3.5vw, 28px) !important;
	background: var(--as-surface) !important;
	border: 1px solid var(--as-border) !important;
	border-block-end: none !important;
	border-bottom: none !important;
	border-radius: 20px !important;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.dz-comments-wrap .comment-body:hover,
#comments .comment-body:hover {
	border-color: color-mix(in srgb, var(--as-accent) 35%, var(--as-border)) !important;
}

.dz-comments-wrap .comment-meta,
#comments .comment-meta {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin-block-end: 14px !important;
	margin-bottom: 14px !important;
	flex-wrap: wrap !important;
}

.dz-comments-wrap .comment-author,
#comments .comment-author {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--as-text) !important;
	line-height: 1 !important;
}

.dz-comments-wrap #comments .comment .avatar,
.dz-comments-wrap .comment-author .avatar,
#comments .comment .avatar {
	position: static !important;
	float: none !important;
	left: auto !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	border: 2px solid var(--as-border) !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
}

.dz-comments-wrap .comment-author .says,
#comments .comment-author .says {
	display: none !important;
}

.dz-comments-wrap .comment-metadata,
#comments .comment-metadata {
	font-size: 13px !important;
	color: var(--as-muted) !important;
	line-height: 1 !important;
}

.dz-comments-wrap .comment-metadata a,
#comments .comment-metadata a {
	color: var(--as-muted) !important;
	text-decoration: none !important;
	transition: color .15s ease;
}

.dz-comments-wrap .comment-metadata a:hover,
#comments .comment-metadata a:hover {
	color: var(--as-text) !important;
}

.dz-comments-wrap .comment-content,
#comments .comment-content {
	font-size: 15px !important;
	line-height: 1.65 !important;
	color: var(--as-text) !important;
	margin: 0 0 16px !important;
}

.dz-comments-wrap .comment-content p,
#comments .comment-content p {
	margin: 0 0 12px !important;
}

.dz-comments-wrap .comment-content p:last-child,
#comments .comment-content p:last-child {
	margin-bottom: 0 !important;
}

.dz-comments-wrap .reply,
#comments .reply {
	display: flex !important;
	justify-content: flex-end !important;
	margin: 0 !important;
}

.dz-comments-wrap .reply a,
#comments .reply a {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 6px 18px !important;
	border-radius: 999px !important;
	border: 1px solid var(--as-border) !important;
	background: color-mix(in srgb, var(--as-border) 25%, transparent) !important;
	font: 600 13px/1 var(--as-font) !important;
	color: var(--as-text) !important;
	text-decoration: none !important;
	transition: all .2s ease !important;
}

.dz-comments-wrap .reply a:hover,
#comments .reply a:hover {
	border-color: var(--as-accent) !important;
	background: var(--as-accent) !important;
	color: var(--as-on-accent) !important;
	transform: translateY(-1px) !important;
}

.dz-comments-wrap .comment-list .children,
#comments .children {
	list-style: none !important;
	padding-inline-start: clamp(16px, 3vw, 32px) !important;
	padding-left: clamp(16px, 3vw, 32px) !important;
	margin-top: 16px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	border-left: 2px solid var(--as-border) !important;
	position: relative !important;
}

.dz-comments-wrap ol.comment-list .children:before,
#comments ol.comment-list .children:before {
	content: none !important;
}

/* ========================================================
   COMMENT FORM CARD (#respond) - Premium Theme Card Style
   ======================================================== */
.dz-comments-wrap #respond,
.comments-area #respond,
#respond.comment-respond {
	margin-top: clamp(48px, 6vw, 60px) !important;
	padding: clamp(24px, 4vw, 36px) !important;
	border: 1px solid var(--as-border) !important;
	border-radius: 24px !important;
	background: var(--as-surface) !important;
	position: relative !important;
	box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.05) !important;
}

/* When reply form is nested inside a comment thread */
.comment-list .comment #respond,
.comment-list li #respond,
#comments .comment #respond {
	margin-top: 24px !important;
	margin-bottom: 24px !important;
}

#respond .comment-reply-title {
	font-family: var(--as-font-display) !important;
	font-size: clamp(22px, 3vw, 26px) !important;
	font-weight: var(--as-dw, 700) !important;
	letter-spacing: -0.025em !important;
	color: var(--as-text) !important;
	margin: 0 0 20px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
}

#respond .dz-cancel-reply-wrap {
	display: inline-flex !important;
	margin-left: auto !important;
}

#respond #cancel-comment-reply-link,
#respond .dz-cancel-reply-btn {
	display: inline-flex;
	align-items: center;
	padding: 6px 16px !important;
	margin-left: auto !important;
	border: 1px solid var(--as-border) !important;
	border-radius: 999px !important;
	background: color-mix(in srgb, var(--as-border) 35%, transparent) !important;
	color: var(--as-muted) !important;
	font: 600 13px/1 var(--as-font) !important;
	text-decoration: none !important;
	transition: all .2s ease !important;
}

#respond #cancel-comment-reply-link:hover,
#respond .dz-cancel-reply-btn:hover {
	color: var(--as-text) !important;
	border-color: var(--as-accent) !important;
	background: color-mix(in srgb, var(--as-accent) 15%, transparent) !important;
}

#respond #cancel-comment-reply-link[style*="none"],
#respond .dz-cancel-reply-btn[style*="none"] {
	display: none !important;
}

/* User status / logged in note */
#respond .logged-in-as {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 8px 12px !important;
	font-size: 13.5px !important;
	color: var(--as-muted) !important;
	padding: 12px 18px !important;
	margin: 0 0 22px !important;
	background: color-mix(in srgb, var(--as-border) 20%, transparent) !important;
	border: 1px solid var(--as-border) !important;
	border-radius: 14px !important;
	line-height: 1.5 !important;
}

#respond .logged-in-as a {
	color: var(--as-text) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	border-bottom: 1px solid color-mix(in srgb, var(--as-text) 30%, transparent) !important;
	transition: color .15s ease, border-color .15s ease !important;
}

#respond .logged-in-as a:hover {
	color: var(--as-accent) !important;
	border-bottom-color: var(--as-accent) !important;
}

#respond .logged-in-as .required-field-message {
	margin-left: auto !important;
	font-size: 12px !important;
	opacity: 0.8 !important;
}

#respond .comment-notes {
	font-size: 13.5px !important;
	color: var(--as-muted) !important;
	margin: 0 0 20px !important;
}

/* Form fields & inputs */
#respond .comment-form p {
	margin: 0 0 18px !important;
}

#respond .comment-form label {
	display: block !important;
	font: 600 14px/1.4 var(--as-font) !important;
	margin-bottom: 8px !important;
	color: var(--as-text) !important;
}

#respond .comment-form label .required {
	color: var(--as-accent) !important;
	font-weight: 700 !important;
	margin-left: 2px !important;
}

#respond .comment-form input[type="text"],
#respond .comment-form input[type="email"],
#respond .comment-form input[type="url"] {
	width: 100% !important;
	height: 48px !important;
	padding: 0 18px !important;
	border: 1px solid var(--as-border) !important;
	border-radius: 14px !important;
	background: var(--as-surface) !important;
	color: var(--as-text) !important;
	font: 400 15px/1 var(--as-font) !important;
	box-shadow: none !important;
	outline: none !important;
	transition: border-color .2s ease, outline .2s ease, box-shadow .2s ease !important;
}

#respond .comment-form textarea {
	width: 100% !important;
	height: auto !important;
	min-height: 140px !important;
	padding: 14px 18px !important;
	border: 1px solid var(--as-border) !important;
	border-radius: 16px !important;
	background: var(--as-surface) !important;
	color: var(--as-text) !important;
	font: 400 15px/1.65 var(--as-font) !important;
	box-shadow: none !important;
	outline: none !important;
	resize: vertical !important;
	transition: border-color .2s ease, outline .2s ease, box-shadow .2s ease !important;
}

#respond .comment-form input[type="text"]:focus,
#respond .comment-form input[type="email"]:focus,
#respond .comment-form input[type="url"]:focus,
#respond .comment-form textarea:focus {
	outline: 2px solid var(--as-accent-ink, var(--as-accent)) !important;
	outline-offset: 2px !important;
	border-color: transparent !important;
	background: var(--as-surface) !important;
	color: var(--as-text) !important;
}

/* Rating Field in Comment Form */
#respond .dz-rating-field,
.dz-rating-field {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 14px 20px !important;
	margin-bottom: 22px !important;
	border: 1px solid var(--as-border) !important;
	border-radius: 14px !important;
	background: color-mix(in srgb, var(--as-border) 18%, transparent) !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
}

.dz-rating-field .dz-rating-label {
	margin-bottom: 0 !important;
	font: 600 14px/1 var(--as-font) !important;
	color: var(--as-text) !important;
}

.dz-rating-stars {
	display: inline-flex !important;
	flex-direction: row-reverse !important;
	justify-content: flex-end !important;
	align-items: center !important;
	gap: 6px !important;
	line-height: 1 !important;
}

.dz-rating-stars input[type="radio"] {
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
}

.dz-rating-stars label {
	font-size: 26px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	color: var(--as-border) !important;
	transition: color .15s ease, transform .15s ease !important;
	margin: 0 !important;
}

.dz-rating-stars input[type="radio"]:checked ~ label {
	color: #f59e0b !important;
}

.dz-rating-stars:hover label {
	color: var(--as-border) !important;
}

.dz-rating-stars label:hover,
.dz-rating-stars label:hover ~ label {
	color: #fbbf24 !important;
}

.dz-rating-stars label:hover {
	transform: scale(1.22) !important;
}

/* Cookies consent */
#respond .comment-form .comment-form-cookies-consent {
	display: flex !important;
	gap: 12px !important;
	align-items: flex-start !important;
	font-size: 13.5px !important;
	line-height: 1.5 !important;
	color: var(--as-muted) !important;
	margin: 18px 0 !important;
}

#respond .comment-form .comment-form-cookies-consent input[type="checkbox"] {
	accent-color: var(--as-accent) !important;
	width: 18px !important;
	height: 18px !important;
	margin-top: 2px !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
}

#respond .comment-form .comment-form-cookies-consent label {
	margin: 0 !important;
	font-weight: 400 !important;
	font-size: 13.5px !important;
	line-height: 1.5 !important;
	color: var(--as-muted) !important;
	cursor: pointer !important;
}

/* Submit button */
#respond .comment-form .form-submit {
	margin: 22px 0 0 !important;
}

#respond .comment-form input[type="submit"],
#respond .comment-form .submit {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 52px !important;
	padding: 0 34px !important;
	border-radius: 999px !important;
	background: var(--as-accent) !important;
	color: var(--as-on-accent) !important;
	border: 0 !important;
	font: 600 16px/1 var(--as-font) !important;
	cursor: pointer !important;
	letter-spacing: -0.01em !important;
	box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--as-accent) 35%, transparent) !important;
	transition: transform .2s var(--as-ease), background .2s, box-shadow .2s !important;
}

#respond .comment-form input[type="submit"]:hover,
#respond .comment-form .submit:hover,
#respond .comment-form input[type="submit"]:focus,
#respond .comment-form .submit:focus {
	background: var(--as-accent-hover) !important;
	color: var(--as-on-accent) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 22px -3px color-mix(in srgb, var(--as-accent) 45%, transparent) !important;
}

#respond .comment-form input[type="submit"]:active,
#respond .comment-form .submit:active {
	transform: translateY(0) !important;
	background: var(--as-accent-hover) !important;
}

/* Guest form columns (Name & Email side-by-side on desktop) */
@media (min-width: 641px) {
	#respond .comment-form:has(.comment-form-author) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 16px;
	}
	#respond .comment-form .comment-notes,
	#respond .comment-form .logged-in-as,
	#respond .comment-form .dz-rating-field,
	#respond .comment-form .comment-form-comment,
	#respond .comment-form .comment-form-url,
	#respond .comment-form .comment-form-cookies-consent,
	#respond .comment-form .form-submit {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	#respond.comment-respond {
		padding: 22px 18px !important;
		border-radius: 18px !important;
	}
	.dz-rating-field {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 8px !important;
	}
}

/* Post & Comment Star Rating elements */
.dz-post-rating-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(245, 158, 11, 0.12); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.25); font-size: 13px; font-weight: 700; text-decoration: none; transition: transform .15s ease, background .15s ease; }
.dz-post-rating-badge:hover { transform: translateY(-1px); background: rgba(245, 158, 11, 0.2); }
.dz-post-rating-badge .dz-star-icon { font-size: 13px; color: #f59e0b; }

.dz-rating-summary { display: flex; align-items: center; gap: 16px; padding: 18px 24px; margin-bottom: 28px; border: 1px solid var(--as-border); border-radius: 20px; background: var(--as-surface); }
.dz-rating-summary__score { font-family: var(--as-font-display); font-size: 38px; font-weight: 800; line-height: 1; color: var(--as-text); }
.dz-rating-summary__meta { display: flex; flex-direction: column; gap: 3px; }
.dz-rating-summary__stars { color: #f59e0b; font-size: 18px; letter-spacing: 2px; line-height: 1; }
.dz-rating-summary__stars .dz-star--off { color: var(--as-border); opacity: 0.5; }
.dz-rating-summary__count { font-size: 13px; color: var(--as-muted); font-weight: 500; }

.dz-comment-rating { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dz-comment-rating .dz-stars-group { color: #f59e0b; font-size: 14px; letter-spacing: 1.5px; }
.dz-comment-rating .dz-star--off { color: var(--as-border); opacity: 0.5; }
.dz-comment-rating .dz-rating-val { font-size: 11px; font-weight: 700; color: #f59e0b; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.2); padding: 1px 6px; border-radius: 6px; }

.dz-after-post { padding-top: 72px; }
/* Never show the floating light/dark button when the header already has one. */
body:has(.dz-hd .asx-tt) .asx-tt--float { display: none; }

/* Featured (full-width) work card */
.dz-work--wide { grid-column: 1 / -1; }
@media (min-width: 901px) {
	.dz-work--wide { flex-direction: row; align-items: stretch; }
	.dz-work--wide .dz-work__vis, .dz-work--wide .dz-work__body { flex: 1 1 50%; }
	.dz-work--wide .dz-work__vis { height: auto; min-height: 280px; }
	.dz-work--wide .dz-work__body { justify-content: center; }
}

/* Chip hover */
.dz-chip { transition: background-color .2s var(--as-ease, ease), border-color .2s var(--as-ease, ease), color .2s var(--as-ease, ease), transform .2s var(--as-ease, ease); cursor: default; }
.dz-chip:hover { background: var(--as-accent); border-color: var(--as-accent); color: var(--as-on-accent); transform: translateY(-2px); }

/* Client-site links inside project rows */
.dz .dz-row h3 a, .dz .dz-row .elementor-heading-title a { color: inherit; text-decoration: none; background: linear-gradient(var(--as-accent), var(--as-accent)) 0 100% / 0 3px no-repeat; transition: background-size .25s var(--as-ease, ease); }
.dz .dz-row h3 a:empty, .dz .dz-row .elementor-heading-title a:empty { display: none !important; }
.dz .dz-row h3 a::after, .dz .dz-row .elementor-heading-title a::after { content: "\00a0\2197"; font-size: .7em; color: var(--as-muted); }
.dz .dz-row h3 a.dz-link--internal::after { content: "\00a0\2192" !important; }
.dz .dz-row h3 a:hover, .dz .dz-row .elementor-heading-title a:hover { background-size: 100% 3px; }
.dz .dz-row p a, .dz .dz-row .elementor-widget-container p a { color: var(--as-text); text-decoration: underline; text-decoration-color: var(--as-border); text-underline-offset: 4px; text-decoration-thickness: 2px; transition: text-decoration-color .2s; }
.dz .dz-row p a:hover, .dz .dz-row .elementor-widget-container p a:hover { text-decoration-color: var(--as-accent); }
.dz .dz-row .dz-links a { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--as-text); text-decoration: none !important; background: none !important; transition: color .2s ease, transform .2s ease; }
.dz .dz-row .dz-links a:hover { color: var(--as-accent); transform: translateX(3px); }

/* Body text weight (Settings > Fonts) */
body, .dz { font-weight: var(--as-bw, 400); }

/* Readable states in light mode (neon accent is too pale for text) */
body .dz-fchip { color: var(--as-text); }
body .dz-fchip:hover { color: var(--as-text); border-color: var(--as-text); }
body .dz-fchip[aria-current="true"], body .dz-fchip[aria-current="true"]:hover { color: var(--as-on-accent); border-color: var(--as-accent); }
body .dz-fchip[aria-current="true"]:hover { background: var(--as-accent-hover); }
body .dz-hd__brand, body .dz-hd__brand:hover { color: var(--as-text); }
body .dz-hd__link { color: var(--as-muted); }
body .dz-hd__link:hover, body .dz-hd__link[aria-current="page"] { color: var(--as-text); border-bottom-color: var(--as-accent); }

/* ---------- Fluent Forms, styled like .dz-form ---------- */
:is(.dz-ff, .dz-contact) .fluentform { font-family: var(--as-font); color: var(--as-text); }
:is(.dz-ff, .dz-contact) .fluentform .ff-t-container { display: flex; gap: 16px; margin: 0; }
:is(.dz-ff, .dz-contact) .fluentform .ff-t-cell { flex: 1 1 0 !important; min-width: 0; padding: 0; }
:is(.dz-ff, .dz-contact) .fluentform .ff-el-group { margin: 0 0 18px; }
:is(.dz-ff, .dz-contact) .fluentform .ff-el-input--label { margin: 0 0 8px; padding: 0; }
:is(.dz-ff, .dz-contact) .fluentform .ff-el-input--label label { display: block; margin: 0; font: 600 14px/1.4 var(--as-font); color: var(--as-text); }
:is(.dz-ff, .dz-contact) .fluentform .ff-el-input--label.ff-el-is-required label::after { content: none; }
:is(.dz-ff, .dz-contact) .fluentform .ff-el-form-control { width: 100%; height: 48px; padding: 0 18px; border: 1px solid var(--as-border); border-radius: 14px; background: var(--as-surface); color: var(--as-text); font: 400 16px var(--as-font); box-shadow: none; line-height: normal; }
:is(.dz-ff, .dz-contact) .fluentform select.ff-el-form-control:not([size]):not([multiple]) { height: 48px; }
:is(.dz-ff, .dz-contact) .fluentform select.ff-el-form-control { padding-right: 40px; }
:is(.dz-ff, .dz-contact) .fluentform textarea.ff-el-form-control { height: auto; min-height: 140px; padding: 14px 18px; resize: vertical; }
:is(.dz-ff, .dz-contact) .fluentform .ff-el-form-control::placeholder { color: var(--as-muted); }
:is(.dz-ff, .dz-contact) .fluentform .ff-el-form-control:focus { outline: 2px solid var(--as-accent-ink); outline-offset: 2px; border-color: transparent; background: var(--as-surface); color: var(--as-text); box-shadow: none; }
:is(.dz-ff, .dz-contact) .fluentform .ff-el-is-error .ff-el-form-control { border-color: #e5484d; }
:is(.dz-ff, .dz-contact) .fluentform .ff-el-is-error .text-danger, .dz-ff .fluentform .error.text-danger { margin-top: 6px; font-size: 13px; font-weight: 500; color: #e5484d; }
:is(.dz-ff, .dz-contact) .fluentform .ff_submit_btn_wrapper { margin: 6px 0 0; }
:is(.dz-ff, .dz-contact) .fluentform form.frm-fluent-form .ff-btn-submit.ff-btn-submit { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; margin: 0; border: 1px solid transparent; border-radius: 999px; background: var(--as-accent); color: var(--as-on-accent); font: 600 17px/1 var(--as-font); box-shadow: none; text-decoration: none; cursor: pointer; transition: transform .2s var(--as-ease), background .2s; }
:is(.dz-ff, .dz-contact) .fluentform form.frm-fluent-form .ff-btn-submit.ff-btn-submit:hover, :is(.dz-ff, .dz-contact) .fluentform form.frm-fluent-form .ff-btn-submit.ff-btn-submit:focus { background: var(--as-accent-hover); color: var(--as-on-accent); transform: translateY(-1px); opacity: 1; }
:is(.dz-ff, .dz-contact) .fluentform .ff-message-success { margin: 0 0 20px; padding: 14px 18px; border: 1px solid var(--as-success, #3ddc84); border-radius: 14px; background: color-mix(in srgb, var(--as-success, #3ddc84) 12%, transparent); box-shadow: none; color: var(--as-text); font-size: 15px; font-weight: 500; }
:is(.dz-ff, .dz-contact) .fluentform .ff-message-success p { margin: 0; }
:is(.dz-ff, .dz-contact) .fluentform .ff-errors-in-stack { border-radius: 14px; }
@media (max-width: 720px) { :is(.dz-ff, .dz-contact) .fluentform .ff-t-container { flex-direction: column; gap: 0; } }

/* ---------- Single Post Layout ("Live Preview" Parity) ---------- */
.dz-single-article { display: block; width: 100%; }
.dz-page-top,
.e-con.dz-page-top,
section.dz-page-top,
.elementor-element.dz-page-top {
	--padding-top: clamp(72px, 6.5vw, 104px) !important;
	--padding-bottom: 24px !important;
	--padding-block-start: clamp(72px, 6.5vw, 104px) !important;
	--padding-block-end: 24px !important;
	padding-top: clamp(72px, 6.5vw, 104px) !important;
	padding-bottom: 24px !important;
	padding-block: clamp(72px, 6.5vw, 104px) 24px !important;
	border-bottom: none !important;
	background: var(--as-bg);
}
.dz-gridbg {
	background-color: var(--as-bg);
	background-image: none !important;
}
.dz-page-top .dz-wrap,
.dz-page-top .e-con.dz-wrap,
.dz-page-top .e-con {
	gap: 0 !important;
	row-gap: 0 !important;
}
.dz-page-top .elementor-widget,
.dz-page-top .elementor-widget:not(:last-child) {
	margin-block-end: 0 !important;
}
.dz-post-head { display: flex; flex-direction: column; gap: 0 !important; max-width: 900px; }
.dz-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--as-muted); font-family: var(--as-mono); margin: 0 0 20px 0 !important; }
.dz-crumbs a { color: var(--as-muted); text-decoration: none; transition: color .15s; }
.dz-crumbs a:hover { color: var(--as-text); text-decoration: underline; }
.dz-cat-pill { display: inline-flex; align-items: center; font-family: var(--as-mono); font-size: 13px; font-weight: var(--as-mw, 500); color: var(--as-accent-ink); text-decoration: none; width: fit-content; margin: 0 0 12px 0 !important; }
:root[data-theme="dark"] .dz-cat-pill { color: var(--as-accent); }
.dz-post-title { font-family: var(--as-font-display); font-size: clamp(34px, 5.2vw, 62px); line-height: 1.08; font-weight: var(--as-dw, 800); letter-spacing: -0.03em; color: var(--as-text); margin: 0 0 18px 0 !important; text-wrap: balance; }
.dz-page-lede { font-size: clamp(17px, 1.6vw, 20px); color: color-mix(in srgb, var(--as-text) 82%, var(--as-muted)); max-width: 68ch; margin: 0 0 36px 0 !important; line-height: 1.65; }
.dz-post-meta { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; color: var(--as-muted); font-size: 15px; margin: 0 0 36px 0 !important; }
.dz-author-mini { display: flex; align-items: center; gap: 10px; color: var(--as-text); font-weight: 600; }
.dz-avatar { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--as-accent); color: var(--as-on-accent); display: inline-flex; align-items: center; justify-content: center; font-family: var(--as-font-display); font-weight: 800; font-size: 14px; overflow: hidden; }
.dz-avatar--lg { width: 60px; height: 60px; font-size: 20px; }
.dz-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.dz-avatar--has-img { background: transparent; }
.dz-meta-sep { opacity: 0.5; }

.dz-cover-wrap { margin-top: 0 !important; border-radius: 24px; overflow: hidden; border: 1px solid var(--as-border); background: var(--as-surface-2); max-height: 480px; margin-bottom: 32px; width: 100%; display: block; }
.dz-cover-img { width: 100%; height: auto; max-height: 480px; object-fit: cover; display: block; }
.dz-cover-fallback { display: flex !important; align-items: center; justify-content: center; min-height: 280px; padding: 48px 32px; text-align: center; background: var(--as-surface-2); border: 1px solid var(--as-border); }
.dz-cover-fallback__inner { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 680px; }
.dz-cover-pill { display: inline-flex; align-items: center; padding: 4px 14px; border-radius: 999px; background: var(--as-surface); border: 1px solid var(--as-border); font-family: var(--as-mono); font-size: 13px; color: var(--as-accent-ink); font-weight: 600; }
:root[data-theme="dark"] .dz-cover-pill { color: var(--as-accent); }
.dz-cover-title { font-family: var(--as-font-display); font-size: clamp(24px, 3.2vw, 36px); font-weight: 700; color: var(--as-text); margin: 0; line-height: 1.2; text-wrap: balance; }

.dz-post-layout-sec,
.e-con.dz-post-layout-sec { padding-block: 0 clamp(56px, 6vw, 88px) !important; }
.dz-post-layout,
.e-con.dz-post-layout { display: flex !important; flex-direction: row !important; justify-content: space-between !important; gap: clamp(36px, 5vw, 72px) !important; padding-block: 0 !important; align-items: flex-start !important; width: 100% !important; }
.dz-post-main,
.e-con.dz-post-main { flex: 1 1 0% !important; min-width: 0 !important; max-width: 76ch !important; }
.dz-toc-sidebar,
.e-con.dz-toc-sidebar { width: 260px !important; flex-shrink: 0 !important; position: sticky !important; top: calc(var(--header-h, 88px) + 32px) !important; display: flex !important; flex-direction: column !important; gap: 20px !important; }
.dz-toc { display: flex; flex-direction: column; gap: 4px; }
.dz-toc-title { font-family: var(--as-mono); font-size: 13px; color: var(--as-muted); margin-bottom: 8px; font-weight: var(--as-mw, 500); }
.dz-toc a {
	text-decoration: none !important;
	color: var(--as-muted) !important;
	font-size: 14px;
	line-height: 1.45;
	padding: 7px 12px 7px 14px;
	border-left: 2px solid var(--as-border);
	border-radius: 0 8px 8px 0;
	background: transparent;
	display: block;
	transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.dz-toc a:hover:not(.active),
body .dz-toc a:hover:not(.active) {
	color: var(--as-text) !important;
	border-left-color: var(--as-accent-ink, var(--as-accent)) !important;
	background: color-mix(in srgb, var(--as-surface-2, #ebeef3) 70%, transparent) !important;
	transform: translateX(2px);
}
.dz-toc a.active,
body .dz-toc a.active {
	color: var(--as-on-accent) !important;
	border-left-color: transparent !important;
	background: var(--as-accent) !important;
	font-weight: 600 !important;
	border-radius: 8px !important;
	transform: translateX(3px);
}
:root[data-theme="dark"] .dz-toc a.active,
:root[data-theme="dark"] body .dz-toc a.active {
	color: var(--as-on-accent) !important;
	border-left-color: transparent !important;
	background: var(--as-accent) !important;
}
:root[data-theme="dark"] .dz-toc a:hover:not(.active),
:root[data-theme="dark"] body .dz-toc a:hover:not(.active) {
	color: var(--as-text, #f2f4f8) !important;
	border-left-color: var(--as-accent, #b8f34a) !important;
	background: color-mix(in srgb, var(--as-surface-2, #182030) 75%, transparent) !important;
}
.dz-toc-mobile { display: none; border: 1px solid var(--as-border); border-radius: 16px; background: var(--as-surface); margin-bottom: 32px; }
.dz-toc-mobile summary { cursor: pointer; padding: 14px 18px; font-weight: 600; color: var(--as-text); font-family: var(--as-font); }
.dz-toc-mobile nav { display: flex; flex-direction: column; padding: 0 18px 14px; }
.dz-toc-mobile nav a { padding-block: 10px; border-top: 1px solid var(--as-border); text-decoration: none; color: var(--as-muted); font-size: 15px; border-radius: 6px; padding-inline: 8px; transition: color .15s, background .15s; }
.dz-toc-mobile nav a:hover:not(.active) { color: var(--as-text) !important; }
.dz-toc-mobile nav a.active { color: var(--as-on-accent) !important; font-weight: 600; background: var(--as-accent) !important; border-radius: 6px; }

.dz-share { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.dz-share a { font-size: 13px; font-weight: 600; text-decoration: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--as-border); background: var(--as-surface); color: var(--as-text); transition: background .2s, border-color .2s; }
.dz-share a:hover { border-color: var(--as-accent); background: var(--as-surface-2); }

.dz-prose { font-size: 18px; line-height: 1.8; color: color-mix(in srgb, var(--as-text) 88%, var(--as-muted)); display: block; }
.dz-prose p { margin: 0 0 24px 0 !important; line-height: 1.8; }
.dz-prose h2,
.dz-prose--case-study h2 { font-family: var(--as-font-display); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.25; font-weight: var(--as-dw, 800); letter-spacing: -0.025em; color: var(--as-text) !important; margin-top: 52px !important; margin-bottom: 18px !important; display: block !important; }
.dz-prose h2,
.dz-prose h3,
#prose h2,
#prose h3,
.prose h2,
.prose h3,
.dz-post-main h2,
.dz-post-main h3,
.dz-prose--case-study h2 {
	scroll-margin-top: calc(var(--header-h, 88px) + 28px) !important;
}
.dz-prose > h2:first-child,
.dz-prose--case-study > h2:first-child { margin-top: 0 !important; }
.dz-prose h3,
.dz-prose--case-study h3 { font-family: var(--as-font-display); font-size: 23px; line-height: 1.35; font-weight: 700; color: var(--as-text) !important; margin-top: 36px !important; margin-bottom: 14px !important; display: block !important; }
.dz-prose strong, .dz-prose b { color: var(--as-text); }
.dz-prose ul, .dz-prose ol { margin: 16px 0 28px 0 !important; padding-left: 24px; display: flex; flex-direction: column; gap: 10px; }
.dz-prose li { font-size: 18px; line-height: 1.7; }
.dz-prose code:not(pre code) { font-family: var(--as-mono); font-size: 0.88em; background: var(--as-surface-2); padding: 0.16em 0.44em; border-radius: 6px; border: 1px solid var(--as-border); color: var(--as-text); }
.dz-prose a { color: var(--as-accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:root[data-theme="dark"] .dz-prose a { color: var(--as-accent); }
.dz-prose blockquote { margin: 36px 0 !important; padding: 10px 0 10px 24px; border-left: 3px solid var(--as-accent); color: var(--as-muted); font-size: 20px; font-style: italic; line-height: 1.6; }

.dz-codeblock { background: #0b0e14; color: #f2f4f8; border-radius: 18px; overflow: hidden; font-size: 14px; border: 1px solid var(--as-border); margin-block: 28px !important; }
.dz-code-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px 8px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-family: var(--as-mono); font-size: 13px; color: #8a93a6; }
.dz-codeblock pre { margin: 0; padding: 20px; overflow-x: auto; line-height: 1.65; background: none; border: none; }
.dz-codeblock code { font-family: var(--as-mono); background: none; padding: 0; color: inherit; font-size: 14px; border: none; }
.dz-copy { height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); background: transparent; color: #f2f4f8; font: 600 13px/1 var(--as-font); cursor: pointer; transition: background .15s, border-color .15s; }
.dz-copy:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.4); }

.dz-post-end { display: flex; flex-direction: column; gap: 32px; padding-top: 48px; border-top: 1px solid var(--as-border); margin-top: 48px; }
.dz-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.dz-tags a { font-size: 13px; font-weight: 600; text-decoration: none; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--as-border); color: var(--as-text); background: var(--as-surface); transition: background .2s, border-color .2s; }
.dz-tags a:hover { border-color: var(--as-accent); background: var(--as-surface-2); }

.dz-author-card { display: flex; gap: 24px; padding: clamp(24px, 3vw, 36px); align-items: flex-start; border-radius: 24px; background: var(--as-surface); border: 1px solid var(--as-border); margin-top: 48px !important; margin-bottom: 24px !important; }
.dz-author-card__body { display: flex; flex-direction: column; gap: 8px; }
.dz-author-card strong { font-family: var(--as-font-display); font-size: 20px; color: var(--as-text); font-weight: 700; }
.dz-author-card p { color: var(--as-muted); font-size: 15px; line-height: 1.6; margin: 0; }
.dz-author-links { display: flex; gap: 18px; flex-wrap: wrap; font-weight: 600; font-size: 14px; margin-top: 4px; }
.dz-author-links a { color: var(--as-text); text-decoration: none; }
.dz-author-links a:hover { color: var(--as-accent-ink); }
:root[data-theme="dark"] .dz-author-links a:hover { color: var(--as-accent); }

.dz-post-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dz-post-nav a { padding: 24px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; border-radius: 20px; border: 1px solid var(--as-border); background: var(--as-surface); transition: border-color .2s; }
.dz-post-nav a:hover { border-color: var(--as-accent); }
.dz-post-nav__next { text-align: right; }
.dz-post-nav span { font-family: var(--as-mono); font-size: 13px; color: var(--as-muted); font-weight: var(--as-mw, 500); }
.dz-post-nav b { font-family: var(--as-font-display); font-size: 18px; line-height: 1.3; color: var(--as-text); font-weight: 700; }

.dz-sec--related { padding-block: 72px 0; border-top: 1px solid var(--as-border); }
.dz-sec--related .dz-sec--related { padding-block: 0 !important; border-top: none !important; }
.e-con.dz-sec--related:has(.elementor-shortcode:empty),
.e-con.dz-sec--related:not(:has(.dz-grid)) { display: none !important; }

/* ---------- CTA Box (100% Matches User Sample Image 4) ---------- */
.dz-cta-section,
section.dz-cta-section { padding-block: clamp(56px, 6vw, 88px) clamp(64px, 8vw, 104px); width: 100%; }
.e-con.dz-cta-section { padding-block: clamp(56px, 6vw, 88px) clamp(64px, 8vw, 104px) !important; }
.dz-cta-section .dz-cta-section { padding-block: 0 !important; }
.dz-cta {
	background: var(--as-accent);
	color: #ffffff;
	border-radius: 32px;
	padding: clamp(40px, 5vw, 64px) clamp(28px, 5vw, 64px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--as-accent) 45%, transparent);
}
.dz-cta h2 {
	margin: 0;
	font-family: var(--as-font-display);
	font-size: clamp(28px, 3.8vw, 44px);
	line-height: 1.08;
	font-weight: var(--as-dw, 800);
	letter-spacing: -0.03em;
	max-width: 680px;
	color: #ffffff !important;
}
/* Ensure Elementor Button Widget container never acts as a button or has background/hover */
.elementor-widget-button.dzb,
.elementor-widget-button.dzb--dark,
.dz-cta .elementor-widget-button,
.dz-cta .elementor-widget-button.dzb,
.dz-cta .elementor-widget-button.dzb--dark,
.dz-cta .dzb,
.dz-cta .dzb--dark {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	transform: none !important;
	padding: 0 !important;
	height: auto !important;
}

.elementor-widget-button.dzb:hover,
.elementor-widget-button.dzb--dark:hover,
.dz-cta .elementor-widget-button:hover,
.dz-cta .elementor-widget-button.dzb:hover,
.dz-cta .elementor-widget-button.dzb--dark:hover,
.dz-cta .dzb:hover,
.dz-cta .dzb--dark:hover {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	transform: none !important;
}

.dz-cta .dz-btn--dark,
.dz-cta a.dz-btn--dark,
.dz-cta .dz-btn,
.dz-cta a.dz-btn,
.dz-cta .elementor-button,
.dz-cta .dzb--dark .elementor-button,
.dz-cta .elementor-widget-button .elementor-button {
	background: #07090f !important;
	color: #ffffff !important;
	border-radius: 999px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-decoration: none !important;
	font-weight: 700 !important;
	padding: 0 36px !important;
	height: 56px !important;
	font-size: 16px !important;
	border: 1px solid transparent !important;
	flex-shrink: 0 !important;
	white-space: nowrap !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16) !important;
	transition: transform .2s var(--as-ease), background .2s, box-shadow .2s, color .2s !important;
}
.dz-cta .dz-btn--dark:hover,
.dz-cta a.dz-btn--dark:hover,
.dz-cta .dz-btn:hover,
.dz-cta a.dz-btn:hover,
.dz-cta .elementor-button:hover,
.dz-cta .dzb--dark .elementor-button:hover,
.dz-cta .elementor-widget-button .elementor-button:hover,
.dz-cta .dz-btn--dark:focus,
.dz-cta a.dz-btn--dark:focus,
.dz-cta .elementor-button:focus,
.dz-cta .dzb--dark .elementor-button:focus {
	background: #151b27 !important;
	color: #ffffff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}

@media (max-width: 1023px) {
	.dz-post-layout,
	.e-con.dz-post-layout { flex-direction: column !important; gap: 0 !important; padding-top: 24px !important; }
	.dz-post-main,
	.e-con.dz-post-main { max-width: 100% !important; width: 100% !important; }
	.dz-toc-sidebar,
	.e-con.dz-toc-sidebar { display: none !important; }
	.dz-toc-mobile { display: block !important; }
}
@media (max-width: 800px) {
	.dz-cta {
		flex-direction: column;
		align-items: stretch;
		padding: 36px 24px;
		border-radius: 24px;
		gap: 24px;
	}
	.dz-cta h2 {
		font-size: clamp(26px, 6.5vw, 36px);
		line-height: 1.1;
		max-width: 100%;
	}
	.dz-cta .elementor-widget-button {
		width: 100% !important;
	}
	.dz-cta .dz-btn--dark,
	.dz-cta a.dz-btn--dark,
	.dz-cta a.dz-btn,
	.dz-cta .dz-btn,
	.dz-cta .elementor-button,
	.dz-cta .dzb--dark .elementor-button {
		width: 100% !important;
		height: 52px !important;
		font-size: 16px !important;
	}
}
@media (max-width: 719px) {
	.dz-page-top,
	.e-con.dz-page-top,
	section.dz-page-top,
	.elementor-element.dz-page-top {
		--padding-top: 36px !important;
		--padding-bottom: 24px !important;
		--padding-block-start: 36px !important;
		--padding-block-end: 24px !important;
		padding-top: 36px !important;
		padding-bottom: 24px !important;
		padding-block: 36px 24px !important;
	}
	.dz-post-nav { grid-template-columns: 1fr; }
	.dz-post-nav__next { text-align: left; }
	.dz-author-card { flex-direction: column; gap: 16px; padding: 24px; }
	.dz-prose { font-size: 17px; }
}

/* ---------- Single Case Study Layout ---------- */
.dz-single-case-study { display: block; width: 100%; }
.dz-back-link { font-family: var(--as-mono); font-size: 14px; color: var(--as-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color .15s; margin: 0 0 24px 0 !important; font-weight: var(--as-mw, 500); }
.dz-back-link:hover { color: var(--as-text); text-decoration: underline; }
.dz-eyebrow { font-family: var(--as-mono); font-size: 13px; font-weight: 700; color: var(--as-accent-ink); text-transform: uppercase; letter-spacing: 0.08em; display: inline-block !important; margin: 0 0 10px 0 !important; }
:root[data-theme="dark"] .dz-eyebrow { color: var(--as-accent); }
.dz-facts-card { display: flex; flex-direction: column; gap: 20px; padding: clamp(24px, 3vw, 36px); border-radius: 24px; background: var(--as-surface); border: 1px solid var(--as-border); margin-top: 0 !important; }
.dz-facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dz-fact { display: flex; flex-direction: column; gap: 6px; }
.dz-fact__label { font-family: var(--as-mono); font-size: 11px; color: var(--as-muted); font-weight: var(--as-mw, 500); text-transform: uppercase; letter-spacing: 0.06em; }
.dz-fact__value { font-size: 15px; color: var(--as-text); font-weight: 600; line-height: 1.45; }
.dz-facts-actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--as-border); align-items: center; }
.dz-facts-actions .dz-btn { height: 44px; padding: 0 24px; font-size: 15px; font-weight: 600; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; white-space: nowrap; box-sizing: border-box; }
.dz-facts-actions .dz-btn--accent { background: var(--as-accent); color: var(--as-on-accent); }
.dz-facts-actions .dz-btn--accent:hover { background: var(--as-accent-hover); transform: translateY(-1px); }
.dz-facts-actions .dz-btn--ghost { background: transparent; color: var(--as-text); border: 1px solid var(--as-border); }
.dz-facts-actions .dz-btn--ghost:hover { background: var(--as-surface-2); border-color: var(--as-muted); transform: translateY(-1px); }
.dz-case-study-body { max-width: 820px; margin-inline: auto; padding-block: clamp(40px, 5vw, 64px) 0; }
.dz-prose--case-study h2 { font-size: clamp(26px, 2.8vw, 36px); margin-top: 52px !important; margin-bottom: 18px !important; }
.dz-case-study-nav { margin-top: 64px; }

@media (max-width: 900px) {
	.dz-facts-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
	.dz-post-head { gap: 14px; }
	.dz-facts-grid { grid-template-columns: 1fr; gap: 12px; }
	.dz-facts-card { padding: 20px; margin-top: 16px; }
	.dz-facts-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
	.dz-facts-actions .dz-btn,
	.dz-facts-actions a.dz-btn { width: 100% !important; height: 48px; justify-content: center; font-size: 15px; }
}

/* ---------- Elementor Kit & Dark Mode Color Invariant ---------- */
body[class*="elementor-kit-"] :is(h1, h2, h3, h4, h5, h6, .dz-post-title, .dz-h1, .dz-h2, .dz-h3, .elementor-heading-title),
.elementor-kit-5 :is(h1, h2, h3, h4, h5, h6, .dz-post-title, .dz-h1, .dz-h2, .dz-h3) {
	color: var(--as-text) !important;
}

:root[data-theme="dark"] body[class*="elementor-kit-"] :is(h1, h2, h3, h4, h5, h6, .dz-post-title, .dz-h1, .dz-h2, .dz-h3, .elementor-heading-title),
:root[data-theme="dark"] .elementor-kit-5 :is(h1, h2, h3, h4, h5, h6, .dz-post-title, .dz-h1, .dz-h2, .dz-h3),
:root[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6).dz-post-title,
:root[data-theme="dark"] .dz-post-title,
:root[data-theme="dark"] .dz-prose :is(h1, h2, h3, h4, h5, h6),
:root[data-theme="dark"] .dz-prose--case-study :is(h1, h2, h3, h4, h5, h6),
:root[data-theme="dark"] .dz-fact__value {
	color: var(--as-text, #f2f4f8) !important;
}

:root[data-theme="dark"] .dz-page-lede,
:root[data-theme="dark"] .dz-prose p,
:root[data-theme="dark"] .dz-fact__label {
	color: color-mix(in srgb, var(--as-text) 82%, var(--as-muted)) !important;
}

:root[data-theme="dark"] .dz-facts-card {
	background: var(--as-surface, #0f131c) !important;
	border-color: var(--as-border, #1f2635) !important;
}

/* ==========================================================================
   Refinements: Responsive Order, Contrast, Hover Effects & Typography
   ========================================================================== */

/* 1. About Page Hero: Responsive ordering configured natively via Elementor Container JSON (flex_direction_tablet: column-reverse, order_tablet: start) */

/* 2. Experience Dates Font Size & Readability */
.dz-row--exp .dz-tags,
.dz-row--exp div.dz-tags,
.dz-row--exp .elementor-widget-text-editor .dz-tags,
.dz-row--exp .e-con.dz-tags,
body .dz-row--exp .dz-tags {
	font-family: var(--as-mono) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	color: var(--as-text) !important;
	letter-spacing: -0.01em !important;
}

/* 3. "How I work", Services & Plugin Cards Hover Lift Effect */
.dz-step,
.e-con.dz-step {
	transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease !important;
	cursor: default;
}
.dz-svc,
.e-con.dz-svc,
.dz-card.dz-svc,
.dz-svc--lg,
.e-con.dz-svc--lg,
.dz-tcard,
.e-con.dz-tcard,
.dz-card.dz-tcard {
	transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease !important;
	cursor: pointer;
	position: relative;
}
.dz-step:hover,
.e-con.dz-step:hover,
.dz-svc:hover,
.e-con.dz-svc:hover,
.dz-card.dz-svc:hover,
.dz-svc--lg:hover,
.e-con.dz-svc--lg:hover,
.dz-tcard:hover,
.e-con.dz-tcard:hover,
.dz-card.dz-tcard:hover {
	transform: translateY(-6px) !important;
	border-color: var(--as-border-strong, var(--as-accent, rgba(255, 255, 255, 0.25))) !important;
	box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.4), 0 0 0 1px color-mix(in srgb, var(--as-accent) 30%, transparent) !important;
}
.dz-card.dz-svc .dz-h3 a,
.dz-card.dz-svc .elementor-heading-title a,
.dz-svc .dz-h3 a,
.dz-svc .elementor-heading-title a,
.dz-card.dz-tcard .dz-h3 a,
.dz-card.dz-tcard .elementor-heading-title a,
.dz-tcard .dz-h3 a,
.dz-tcard .elementor-heading-title a {
	color: inherit;
	text-decoration: none !important;
	transition: color 0.2s ease;
}
.dz-card.dz-svc:hover .dz-h3 a,
.dz-card.dz-svc:hover .elementor-heading-title a,
.dz-svc:hover .dz-h3 a,
.dz-svc:hover .elementor-heading-title a,
.dz-svc--lg:hover .dz-h3 a,
.dz-svc--lg:hover .elementor-heading-title a,
.dz-card.dz-tcard:hover .dz-h3 a,
.dz-card.dz-tcard:hover .elementor-heading-title a,
.dz-tcard:hover .dz-h3 a,
.dz-tcard:hover .elementor-heading-title a {
	color: var(--as-accent) !important;
}
.dz-card.dz-tcard .dz-h3 a::after,
.dz-tcard .dz-h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.dz-card.dz-tcard .dz-links,
.dz-card.dz-tcard .dz-links a,
.dz-tcard .dz-links,
.dz-tcard .dz-links a {
	position: relative;
	z-index: 2;
}




/* 4. "Teams I've built with" Label Typography */
.dz-logos__lab,
.e-con.dz-logos__lab,
.elementor-widget.dz-logos__lab,
.elementor-widget.dz-logos__lab p,
body .dz-logos__lab {
	font-family: var(--as-font-body, var(--as-font)) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
	color: var(--as-muted) !important;
	flex-shrink: 0 !important;
}

/* 5. Accent Cards & Metrics Contrast Invariant (8+ yrs, Experience, WordPress in production) */
.dz-card--accent,
.e-con.dz-card--accent,
body .dz-card--accent,
body .e-con.dz-card--accent {
	background: var(--as-accent) !important;
	color: var(--as-on-accent) !important;
	border-color: var(--as-accent) !important;
}

.dz-card--accent :is(p, span, div, h1, h2, h3, h4, .dz-cap, .dz-big, .elementor-heading-title, .elementor-widget-text-editor p),
.e-con.dz-card--accent :is(p, span, div, h1, h2, h3, h4, .dz-cap, .dz-big, .elementor-heading-title, .elementor-widget-text-editor p),
body .dz-card--accent :is(p, span, div, h1, h2, h3, h4, .dz-cap, .dz-big, .elementor-heading-title, .elementor-widget-text-editor p) {
	color: var(--as-on-accent) !important;
}

.dz-card--accent .dz-cap,
.e-con.dz-card--accent .dz-cap {
	opacity: 0.82 !important;
	font-weight: 600 !important;
}

/* 6. CTA Sections High Contrast ("Let's build something" B.Tech line & "Hire a WordPress developer who ships") */
.dz-cta,
.e-con.dz-cta,
body .dz-cta,
body .e-con.dz-cta {
	background: var(--as-accent) !important;
	color: var(--as-on-accent) !important;
}

.dz-cta :is(h2, h3, .elementor-heading-title),
body .dz-cta :is(h2, h3, .elementor-heading-title) {
	color: var(--as-on-accent) !important;
}

.dz-cta :is(p, .dz-mailto, a.dz-mailto, .elementor-widget-text-editor p),
body .dz-cta :is(p, .dz-mailto, a.dz-mailto, .elementor-widget-text-editor p) {
	color: var(--as-on-accent) !important;
	opacity: 0.9 !important;
}

.dz-cta :is(.dz-mailto:hover, a.dz-mailto:hover) {
	opacity: 1 !important;
	text-decoration: underline !important;
}

/* ==========================================================================
   7. Floating WhatsApp Action Button (FAB) - Bottom Right
   ========================================================================== */
.asx-wa-float-wrap {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 998;
	display: flex;
	align-items: center;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.asx-wa-float {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	outline: none;
	pointer-events: auto;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.asx-wa-float__btn {
	width: 52px;
	height: 52px;
	border-radius: 999px;
	background: linear-gradient(135deg, #25D366 0%, #1da851 100%);
	color: #ffffff !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.42), 0 2px 6px rgba(0, 0, 0, 0.14);
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background 0.2s ease;
	position: relative;
	z-index: 2;
}

.asx-wa-float__icon {
	width: 28px;
	height: 28px;
	display: block;
	color: #ffffff;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
	transition: transform 0.2s ease;
}

/* Tooltip Badge */
.asx-wa-float__tooltip {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%) translateX(6px);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: var(--as-surface, #ffffff);
	border: 1px solid var(--as-border, rgba(0, 0, 0, 0.08));
	border-radius: 999px;
	color: var(--as-text, #111111);
	font-family: var(--as-font-body, var(--as-font, sans-serif));
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.01em;
	white-space: nowrap;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	z-index: 1;
}

.asx-wa-float__status {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #25D366;
	box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.3);
	display: inline-block;
	flex-shrink: 0;
}

/* Hover & Focus States */
.asx-wa-float:hover .asx-wa-float__btn,
.asx-wa-float:focus-visible .asx-wa-float__btn {
	transform: translateY(-3px) scale(1.06);
	box-shadow: 0 10px 28px rgba(37, 211, 102, 0.58), 0 4px 10px rgba(0, 0, 0, 0.2);
}

.asx-wa-float:hover .asx-wa-float__icon {
	transform: scale(1.08);
}

.asx-wa-float:hover .asx-wa-float__tooltip,
.asx-wa-float:focus-visible .asx-wa-float__tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0);
	transition-delay: 0s;
}

.asx-wa-float:active .asx-wa-float__btn {
	transform: translateY(0) scale(0.96);
}

.asx-wa-float:focus-visible {
	outline: none;
}

.asx-wa-float:focus-visible .asx-wa-float__btn {
	outline: 3px solid var(--as-accent, #25D366);
	outline-offset: 3px;
}

/* Stacking: Back-to-Top keeps the bottom corner; WhatsApp sits above it once Back-to-Top is shown. */
.asx-wa-float-wrap {
	transition: opacity 0.2s ease, visibility 0.2s ease, bottom 0.25s ease;
}
body:has(button.asx-top.is-visible) .asx-wa-float-wrap {
	bottom: 88px;
}

/* Hide floating controls when full-screen mobile menu is open */
html.dz-menu-open button.asx-top,
html.dz-menu-open .asx-top,
html.dz-menu-open .asx-wa-float-wrap,
body.dz-menu-open button.asx-top,
body.dz-menu-open .asx-top,
body.dz-menu-open .asx-wa-float-wrap,
body:has(#asx-menu:not([hidden])) button.asx-top,
body:has(#asx-menu:not([hidden])) .asx-top,
body:has(#asx-menu:not([hidden])) .asx-wa-float-wrap,
html:has(#asx-menu:not([hidden])) button.asx-top,
html:has(#asx-menu:not([hidden])) .asx-top,
html:has(#asx-menu:not([hidden])) .asx-wa-float-wrap {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
	.asx-wa-float-wrap {
		bottom: 18px;
		right: 18px;
	}
	.asx-wa-float__btn {
		width: 48px;
		height: 48px;
	}
	.asx-wa-float__icon {
		width: 25px;
		height: 25px;
	}
	.asx-wa-float__tooltip {
		display: none !important;
	}
	button.asx-top,
	.asx-top {
		bottom: 18px;
		right: 18px;
	}
	body:has(button.asx-top.is-visible) .asx-wa-float-wrap {
		bottom: 76px;
	}
}