/**
 * VLINZZA Components — rendered styles.
 *
 * Loaded only on a request that actually renders one of the four components
 * (see vlzc_enqueue_on_render). Every value reads a child-theme token first and
 * falls back to a literal, so the plugin stays usable if the token layer is
 * absent and never becomes a second source of design truth.
 *
 * No component media query is defined here. Component width is decided by the
 * layout that holds the component — that is what makes an Icon Box usable in a
 * one-, two-, three- or four-column grid without change.
 */

/* ------------------------------------------------------ Asset Foundations */

/* --------------------------------------------------------------- Icon Box */

.vlz-iconbox {
	display: flex;
	flex-direction: column;
	gap: var(--vlz-space-2xs, 0.5rem);
}

.vlz-iconbox__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	margin-block-end: var(--vlz-space-3xs, 0.25rem);
	border-radius: var(--vlz-radius-md, 0.5rem);
	background: var(--vlz-color-primary-soft, #e8f2fa);
	color: var(--vlz-color-primary, #1e7dbf);
}

.vlz-iconbox__title {
	margin: 0;
	color: var(--vlz-color-heading, inherit);
	font-family: inherit;
	line-height: var(--vlz-leading-heading, 1.25);
}

.vlz-iconbox__text {
	margin: 0;
	color: var(--vlz-color-text-muted, #555);
	line-height: var(--vlz-leading-body, 1.6);
}

.vlz-iconbox__link {
	align-self: flex-start;
	margin: 0;
	color: var(--vlz-color-link, #1e7dbf);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.vlz-iconbox__link:hover,
.vlz-iconbox__link:focus-visible {
	color: var(--vlz-color-link-hover, #145a8c);
}

/* Compact, centered feature tiles for split-scroll service sidebars. */
.vlz-iconbox--compact-centered {
	align-items: center;
	gap: 0;
	padding: 20px 10px 19px;
	text-align: center;
}

.vlz-iconbox--compact-centered .vlz-iconbox__icon {
	inline-size: 40px;
	block-size: 40px;
	margin: 0 0 13px;
	border-radius: 0;
	background: transparent;
	color: #0051ff;
}

.vlz-iconbox--compact-centered .vlz-icon {
	inline-size: 40px;
	block-size: 40px;
}

.vlz-iconbox--compact-centered .vlz-iconbox__title {
	color: #686868;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}

/*
 * The reference renders exactly one visible label per feature item: its
 * whole card is wrapped in a single anchor and the only text node is a
 * plain-colored heading (no separate blue "read more" link underneath).
 * This pattern's icon-box instances therefore carry `linkText`/`linkUrl`
 * only (no `title`) so the component's title+link logic renders a single
 * element here — styled to match the reference's label exactly rather
 * than the component's generic accent-link default.
 */
.vlz-iconbox--compact-centered .vlz-iconbox__link {
	align-self: center;
	color: #686868;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.4s;
}

.vlz-iconbox--compact-centered .vlz-iconbox__link:hover,
.vlz-iconbox--compact-centered .vlz-iconbox__link:focus-visible {
	color: #333;
}

/* On an inverted section the icon plate has to invert with it. */
.vlz-section--invert .vlz-iconbox__icon {
	background: rgba(255, 255, 255, 0.12);
	color: var(--vlz-color-text-invert, #fff);
}

.vlz-section--invert .vlz-iconbox__title {
	color: var(--vlz-color-text-invert, #fff);
}

.vlz-section--invert .vlz-iconbox__text {
	color: var(--vlz-color-text-invert-muted, rgba(255, 255, 255, 0.78));
}

/* ------------------------------------------------------------ Rich List Item */
/*
 * Generic titled-item shape: title + optional paragraph + optional bold
 * helper label + optional variable-length checklist (rendered as one
 * <br>-joined paragraph — see vlzc_render_rich_list_item()). Page-agnostic;
 * carries no TPL-B-01/TikTok-specific naming or values.
 */

.vlz-rich-list-item {
	display: flex;
	flex-direction: column;
	gap: var(--vlz-space-2xs, 0.5rem);
}

.vlz-rich-list-item__title {
	margin: 0;
	color: var(--vlz-color-heading, inherit);
	font-family: inherit;
	line-height: var(--vlz-leading-heading, 1.25);
}

.vlz-rich-list-item__text {
	margin: 0;
	color: var(--vlz-color-text-muted, #555);
	line-height: var(--vlz-leading-body, 1.6);
}

.vlz-rich-list-item__checklist {
	margin: 0;
	color: var(--vlz-color-text, #333);
	line-height: var(--vlz-leading-body, 1.6);
}

.vlz-rich-list-item__checklist strong {
	color: var(--vlz-color-heading, inherit);
}

/* ------------------------------------------------------------ Metric Card */

.vlz-metric {
	display: flex;
	flex-direction: column;
	gap: var(--vlz-space-3xs, 0.25rem);
	padding: var(--vlz-space-md, 1rem);
	border: var(--vlz-border-width, 1px) solid var(--vlz-color-border, #e2e6ea);
	border-radius: var(--vlz-radius-lg, 0.75rem);
	background: var(--vlz-color-surface, #fff);
}

.vlz-metric__value {
	margin: 0;
	color: var(--vlz-color-primary, #1e7dbf);
	font-family: inherit;
	font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
	font-weight: 700;
	line-height: var(--vlz-leading-tight, 1.1);
}

.vlz-metric__label {
	margin: 0;
	color: var(--vlz-color-heading, #1a1a1a);
	font-weight: 600;
}

.vlz-metric__note {
	margin: 0;
	color: var(--vlz-color-text-muted, #555);
	font-size: 0.875em;
}

.vlz-section--invert .vlz-metric {
	border-color: var(--vlz-color-border-invert, rgba(255, 255, 255, 0.24));
	background: rgba(255, 255, 255, 0.06);
}

.vlz-section--invert .vlz-metric__value,
.vlz-section--invert .vlz-metric__label {
	color: var(--vlz-color-text-invert, #fff);
}

.vlz-section--invert .vlz-metric__note {
	color: var(--vlz-color-text-invert-muted, rgba(255, 255, 255, 0.78));
}

/* A square, borderless metric variant for image-backed heroes. */
.vlz-metric--hero-dark {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	min-block-size: 98px;
	padding: 10px;
	border: 0;
	border-radius: 0;
	background: rgba(20, 32, 52, 0.7);
	color: #fff;
}

.vlz-metric--hero-dark .vlz-metric__icon {
	display: flex;
	flex: 0 0 60px;
	align-items: center;
	justify-content: center;
	inline-size: 60px;
	block-size: 60px;
}

.vlz-metric--hero-dark .vlz-icon {
	display: block;
	inline-size: 60px;
	block-size: 60px;
}

.vlz-metric--hero-dark .vlz-metric__content {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0;
	align-content: center;
	flex: 1 1 auto;
	min-inline-size: 0;
}

.vlz-metric--hero-dark .vlz-metric__value {
	margin: 0;
	color: #fff;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 0.9;
}

.vlz-metric--hero-dark .vlz-metric__label {
	margin: 8px 0 0;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.4;
}

.vlz-metric--hero-dark .vlz-metric__note {
	margin: 6px 0 0;
	color: #fff;
	font-size: 0.8rem;
	line-height: 1.4;
}

/*
 * Generic three-line Hero copy weighting. The metric-card structure remains
 * value / label / note, while this opt-in container makes the middle label
 * the strongest line for non-numeric strategic copy. Existing numeric Hero
 * cards remain unchanged unless their wrapper explicitly opts in.
 */
.vlz-hero-indicators--middle-emphasis .vlz-metric--hero-dark .vlz-metric__value {
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.4;
}

.vlz-hero-indicators--middle-emphasis .vlz-metric--hero-dark .vlz-metric__label {
	margin-top: 4px;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

.vlz-hero-indicators--middle-emphasis .vlz-metric--hero-dark .vlz-metric__note {
	margin-top: 4px;
	font-size: 0.85rem;
	font-weight: 400;
	opacity: 0.92;
}

/*
 * Page-scoped Hero indicator re-weighting (LinkedIn Ads, TPL-B-01 Batch 2
 * LEVEL 2 pilot -- the proposed LEVEL 2 Hero direction: icon + 3-line text,
 * middle line bold/emphasized). The shared `.vlz-metric--hero-dark` default
 * above always renders `value` (DOM-first) as the boldest/biggest field --
 * correct for numeric metrics, wrong for this 3-line copy pattern where the
 * MIDDLE line ("label") is the one that should read as the emphasized
 * message. Additive only: swaps which slot carries the heavier weight/larger
 * size inside this one scoped container; the shared default and every other
 * page using `.vlz-metric--hero-dark` are untouched. Same `vlinzza/metric-card`
 * block/markup as everywhere else -- no new component.
 */
.vlz-hero-indicators--linkedin .vlz-metric--hero-dark .vlz-metric__value {
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.4;
}

.vlz-hero-indicators--linkedin .vlz-metric--hero-dark .vlz-metric__label {
	margin-top: 4px;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

/*
 * Same LEVEL 2/3 Hero-indicator re-weighting, applied to TikTok Ads (TPL-B-01
 * Batch 3 LEVEL 3 Pilot, 2026-08-16) per the task brief's owner-approved
 * "middle line BOLD" Hero content. Identical rule to the LinkedIn Ads modifier
 * above, scoped to its own page className -- additive only, 0 change to the
 * shared default or the LinkedIn Ads modifier.
 */
.vlz-hero-indicators--tiktok-ads .vlz-metric--hero-dark .vlz-metric__value {
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.4;
}

.vlz-hero-indicators--tiktok-ads .vlz-metric--hero-dark .vlz-metric__label {
	margin-top: 4px;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

/*
 * Same LEVEL 2/3 Hero-indicator re-weighting, applied to Snapchat Ads
 * (TPL-B-01 Batch 3 LEVEL 3, 2026-08-16) per the task brief's owner-approved
 * "middle line BOLD" Hero content. Identical rule to the TikTok Ads/LinkedIn
 * modifiers above, scoped to its own page className -- additive only, 0
 * change to the shared default or any other page's modifier.
 */
.vlz-hero-indicators--snapchat-ads .vlz-metric--hero-dark .vlz-metric__value {
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.4;
}

.vlz-hero-indicators--snapchat-ads .vlz-metric--hero-dark .vlz-metric__label {
	margin-top: 4px;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

.vlz-hero-indicators--linkedin .vlz-metric--hero-dark .vlz-metric__note {
	margin-top: 4px;
	font-size: 0.85rem;
	font-weight: 400;
	opacity: 0.92;
}

/*
 * Same LEVEL 2/3 Hero-indicator re-weighting, applied to X Ads (TPL-B-01
 * Batch 3 LEVEL 3, 2026-08-16) per the task brief's owner-approved
 * "middle line BOLD" Hero content. Identical rule to the TikTok Ads/
 * Snapchat Ads/LinkedIn modifiers above, scoped to its own page className
 * -- additive only, 0 change to the shared default or any other page's
 * modifier.
 */
.vlz-hero-indicators--x-ads .vlz-metric--hero-dark .vlz-metric__value {
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.4;
}

.vlz-hero-indicators--x-ads .vlz-metric--hero-dark .vlz-metric__label {
	margin-top: 4px;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

/* ----------------------------------------------------- Dark image Hero */

.vlz-dark-image-hero {
	position: relative;
	isolation: isolate;
	direction: rtl;
	overflow: clip;
	color: #fff;
}

.vlz-dark-image-hero::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(0, 3, 32);
	content: "";
	opacity: 0.6;
}

.vlz-dark-image-hero h1,
.vlz-dark-image-hero p {
	font-family: inherit;
}

/*
 * Specificity note (SEO-EXPERT-TPL-B-01 final refinement, 2026-08-14):
 * Elementor's global kit CSS ships a sitewide `.elementor-kit-9 h1 { color: … }`
 * rule at (0,1,1) — the `elementor-kit-9`/`elementor-default` body classes are
 * present on every page, including pages with zero Elementor content, because
 * Elementor enqueues its kit stylesheet globally. A bare `.vlz-dark-image-hero__title`
 * class selector is only (0,1,0), so it lost to Elementor's rule regardless of
 * load order, which is why the Hero H1 rendered the Elementor kit's navy
 * (`rgb(40, 62, 113)`) instead of this rule's white. Qualifying the selector
 * with its own section class raises this to (0,2,0), which outranks (0,1,1)
 * unconditionally — no `!important`, no page-specific override needed.
 */
.vlz-dark-image-hero .vlz-dark-image-hero__title {
	margin: 0 0 20px;
	max-width: 740px;
	color: #fff;
	font-size: 33px;
	font-weight: 600;
	line-height: 1.5;
}

.vlz-dark-image-hero__lead {
	margin: 0 0 19px;
	max-width: 740px;
	color: #fff;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.7;
}

.vlz-dark-image-hero__prompt {
	margin: 0;
	color: #fff;
	font-size: 24px;
	line-height: 1.7;
}

.vlz-dark-image-hero .vlz-hero-buttons {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin-block-start: 40px;
}

.vlz-dark-image-hero .vlz-contact-action {
	align-self: stretch;
	inline-size: 100%;
	margin-block: 0;
	padding-inline: 10px;
}

.vlz-dark-image-hero .vlz-contact-action__link {
	block-size: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 67px;
	padding: 14px 12px;
	border: 1px solid transparent;
	border-radius: 27px !important;
	color: #fff;
	font-family: inherit;
	font-size: 21px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	transition: color 0.4s, background-color 0.4s, border-color 0.4s;
}

.vlz-dark-image-hero .vlz-contact-action--primary-filled .vlz-contact-action__link {
	background: #1b73b0 !important;
}

.vlz-dark-image-hero .vlz-contact-action--primary-filled .vlz-contact-action__link:hover {
	background: rgba(20, 32, 52, 0.86);
}

.vlz-dark-image-hero .vlz-contact-action--secondary-outline .vlz-contact-action__link {
	gap: 0.45em;
	border-color: #1b73b0;
	background: transparent !important;
	font-size: 23px;
	white-space: nowrap;
}

.vlz-dark-image-hero .vlz-contact-action__icon {
	display: inline-block;
	inline-size: 14px;
	block-size: 14px;
	background: currentColor;
	content: "";
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.vlz-dark-image-hero .vlz-contact-action--secondary-outline .vlz-contact-action__link:hover {
	background: #1b73b0 !important;
}

.vlz-dark-image-hero .vlz-contact-action__link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* -------------------------------- Homepage Problem / Value (TPL-C-02) */
.vlz-homepage-problem-value {
	box-sizing: border-box;
	direction: rtl;
	padding: 90px 0 42px;
	background: #fff;
	color: #142034;
}

.vlz-homepage-problem-value__container {
	box-sizing: border-box;
	inline-size: min(1280px, calc(100% - 40px));
	margin-inline: auto;
}

.vlz-homepage-problem-value__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.69fr) minmax(0, 1fr);
	align-items: center;
	gap: 30px;
}

.vlz-homepage-problem-value__narrative {
	grid-column: 1;
}

.vlz-homepage-problem-value__visual {
	grid-column: 2;
	text-align: center;
}

.vlz-homepage-problem-value__title {
	margin: 0 0 35px;
	color: #142034;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.28;
	text-align: right;
}

.vlz-homepage-problem-value__text {
	margin: 0 0 18px;
	color: #142034;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.65;
	text-align: right;
}

.vlz-homepage-problem-value__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-block-start: 42px;
}

.vlz-homepage-problem-value__actions > .vlz-contact-action {
	margin: 0;
}

.vlz-homepage-problem-value .vlz-contact-action__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 67px;
	border: 1px solid #1b73b0;
	border-radius: 27px;
	font-size: 21px;
	line-height: 1;
	text-decoration: none;
}
.vlz-homepage-problem-value.vlz-homepage-problem-value .vlz-contact-action__link,
.vlz-homepage-solutions-gateway.vlz-homepage-solutions-gateway .vlz-contact-action__link {
	min-block-size: 60px;
	padding-inline: 10px;
	font-size: 19px;
}

.vlz-homepage-problem-value .vlz-contact-action--primary-filled .vlz-contact-action__link {
	background: #1b73b0;
	color: #fff;
}

.vlz-homepage-problem-value .vlz-contact-action--secondary-outline .vlz-contact-action__link {
	gap: .45em;
	color: #1b73b0;
	background: transparent;
}

.vlz-homepage-problem-value__image {
	margin: 0;
}

.vlz-homepage-problem-value__image img {
	display: block;
	inline-size: min(505px, 100%);
	block-size: auto;
	margin-inline: auto;
}

/* ----------------------------- Homepage Solutions Gateway (TPL-C-02) */
.vlz-homepage-solutions-gateway { position:relative; z-index:1; isolation:isolate; direction:rtl; min-block-size:788px; padding:100px 0; color:#fff; background:#142034 var(--vlz-bg-bloc2, url("/wp-content/uploads/2021/07/bgbloc2.jpg")) center / cover no-repeat; }
.vlz-homepage-solutions-gateway::before { position:absolute; inset:0; z-index:-1; background:rgba(20,32,52,.92); content:""; }
.vlz-homepage-solutions-gateway__container { position:relative; z-index:2; inline-size:min(1325px,calc(100% - 40px)); margin-inline:auto; }
.vlz-homepage-solutions-gateway__transition-art { position:absolute; z-index:1; left:11.2%; inset-block-end:-284px; inline-size:373px; margin:0; pointer-events:none; }
.vlz-homepage-solutions-gateway__transition-art img { display:block; inline-size:100%; block-size:auto; }
.vlz-homepage-solutions-gateway__grid { display:grid; grid-template-columns:1fr 1fr; min-block-size:588px; align-items:center; gap:20px; }
.vlz-homepage-solutions-gateway__cta { grid-column:1; }
.vlz-homepage-solutions-gateway__content { grid-column:2; }
.vlz-homepage-solutions-gateway__title { margin:0 0 20px; color:#fff; font-size:35px; line-height:1.7; }
.vlz-homepage-solutions-gateway__text,.vlz-homepage-solutions-gateway__list { margin:0; color:#fff; font-size:18px; line-height:1.7; text-align:right; }
.vlz-homepage-solutions-gateway__text a { color:#fff; text-decoration:underline; }
.vlz-homepage-solutions-gateway__list { margin-block-start:20px; padding-inline-start:24px; }
.vlz-homepage-solutions-gateway__list li { margin-block:10px; }

.vlz-homepage-performance { direction:rtl; padding:118px 0 44px; background:#fff; color:#666; }
.vlz-homepage-performance__container { inline-size:min(1397px,calc(100% - 40px)); margin-inline:auto; }
.vlz-homepage-performance__narrative { max-inline-size:698px; margin-left:auto; margin-right:139px; }
.vlz-homepage-performance__title { margin:0 0 20px; font-size:44.8px; line-height:60px; color:rgba(0,0,0,.8); }
.vlz-homepage-performance__text { margin:0 0 19px; font-size:18px; line-height:27px; color:#666; }
.vlz-homepage-performance__group-title { margin:10px 0 30px; color:#283e71; font-size:39px; line-height:54.6px; text-align:center; }
.vlz-homepage-performance__units { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px; margin:0; }
.vlz-homepage-performance__unit { --vlz-performance-color:#06b37c; min-block-size:293px; padding:20px; background:transparent; border:0; color:#656565; text-align:center; }
.vlz-homepage-performance__units > .wp-block-group { margin-block-start:0; }
.vlz-homepage-performance__unit--coral { --vlz-performance-color:#ff7070; }
.vlz-homepage-performance__unit--blue { --vlz-performance-color:#0906b3; }
.vlz-homepage-performance__unit--magenta { --vlz-performance-color:#ed28eb; }
.vlz-homepage-performance__icon { display:grid; place-items:center; inline-size:80px; block-size:80px; box-sizing:border-box; margin:0 auto; border:1px solid var(--vlz-performance-color); border-radius:50%; color:var(--vlz-performance-color); font-style:normal; font-weight:400; line-height:1; }
.vlz-homepage-performance__icon::before { display:block; }
.vlz-homepage-performance__icon--badge::before { content:""; display:block; inline-size:40.00px; block-size:40.00px; background-color:currentColor; -webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-badge.svg") no-repeat center / contain; mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-badge.svg") no-repeat center / contain; }
.vlz-homepage-performance__icon--graph::before { content:""; display:block; inline-size:31.91px; block-size:40.00px; background-color:currentColor; -webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-graph.svg") no-repeat center / contain; mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-graph.svg") no-repeat center / contain; }
.vlz-homepage-performance__icon--tools::before { content:""; display:block; inline-size:39.76px; block-size:40.02px; background-color:currentColor; -webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-tools.svg") no-repeat center / contain; mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-tools.svg") no-repeat center / contain; }
.vlz-homepage-performance__icon--graph-two::before { content:""; display:block; inline-size:39.92px; block-size:40.00px; background-color:currentColor; -webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-graph-two.svg") no-repeat center / contain; mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-graph-two.svg") no-repeat center / contain; }
.vlz-homepage-performance__icon--handshake::before { content:""; display:block; inline-size:46.64px; block-size:39.88px; background-color:currentColor; -webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-handshake.svg") no-repeat center / contain; mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-handshake.svg") no-repeat center / contain; }
.vlz-homepage-performance__unit h3 { margin:12px 0 13px; color:var(--vlz-performance-color); font-size:18px; font-weight:700; line-height:25.2px; }
.vlz-homepage-performance__unit p { margin:0; color:#656565; font-size:16px; line-height:24px; }
/* TPL-C-01 Website Design (Local Page 313) - page-instance-only CTA, Legacy parity fix.
   Reference Page 298 / Digital Marketing Company Page 310 do not carry this markup,
   so this rule has no effect on either page. */
.vlz-homepage-performance__actions { margin-block-start:24px; }
.vlz-homepage-performance .vlz-contact-action__link { display:inline-flex; align-items:center; justify-content:center; min-block-size:52px; padding-inline:40px; border-radius:40px; background:#6adfd7; color:#fff; font-size:17.6px; font-weight:700; text-decoration:none; }
.vlz-homepage-performance .vlz-contact-action__link:hover, .vlz-homepage-performance .vlz-contact-action__link:focus-visible { background:#54cfc6; }
@media(max-width:1024px){.vlz-homepage-solutions-gateway__transition-art{left:calc(50% - 182px);inset-block-end:-217px;inline-size:373px}.vlz-homepage-performance{padding-block:53px 25px}.vlz-homepage-performance__narrative{max-inline-size:436px;margin-left:auto;margin-right:10px}.vlz-homepage-performance__title{font-size:44.8px;line-height:50px}.vlz-homepage-performance__units{grid-template-columns:repeat(2,minmax(0,1fr));}.vlz-homepage-performance__unit:nth-child(3),.vlz-homepage-performance__unit:nth-child(4){display:none}.vlz-homepage-performance__unit:last-child{grid-column:auto;inline-size:145px;justify-self:start;min-block-size:512px;}}
@media(max-width:767px){.vlz-homepage-solutions-gateway__transition-art{left:0;inset-block-end:169px;inline-size:327px}.vlz-homepage-performance{padding-block:26px 170px}.vlz-homepage-performance__container{inline-size:min(327px,calc(100% - 40px))}.vlz-homepage-performance__narrative{max-inline-size:none;margin-inline:auto}.vlz-homepage-performance__title{font-size:20px;line-height:50px;text-align:center}.vlz-homepage-performance__text{font-size:18px;line-height:27px}.vlz-homepage-performance__group-title{margin:10px 0 30px;font-size:39px;line-height:54.6px}.vlz-homepage-performance__units{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.vlz-homepage-performance__unit{min-block-size:0;padding:8px}.vlz-homepage-performance__unit:nth-child(3),.vlz-homepage-performance__unit:nth-child(4){display:block}.vlz-homepage-performance__unit h3{font-size:15px;line-height:21px}.vlz-homepage-performance__unit p{font-size:12px;line-height:20.4px}.vlz-homepage-performance__unit:last-child{grid-column:auto;inline-size:auto;justify-self:stretch;min-block-size:0;}}
.vlz-homepage-operating-method { direction:rtl; padding:98px 0 170px; background:#23334d; color:#fff; }
.vlz-homepage-operating-method__container { display:grid; grid-template-columns:1fr 1fr; align-items:start; inline-size:min(1140px,calc(100% - 40px)); margin-inline:auto; direction:ltr; }
.vlz-homepage-operating-method__intro { display:flex; grid-row:1; grid-column:2; align-self:start; align-items:center; min-block-size:888px; margin:0; padding-inline:15px; direction:rtl; }
.vlz-homepage-operating-method__intro-text { inline-size:100%; max-inline-size:540px; margin:10px 0; color:#666; font-size:24px; line-height:45px; }
.vlz-homepage-operating-method__timeline { position:relative; display:grid; grid-row:1; grid-column:1; gap:12px; margin:0; padding-block-start:28px; padding-inline:100px 15px; direction:ltr; }
.vlz-homepage-operating-method__timeline::before { position:absolute; inset-block:62px 177px; inset-inline-end:72px; inline-size:1px; background:rgba(255,255,255,.42); content:""; }
.vlz-homepage-operating-method__item { position:relative; display:grid; grid-template-columns:minmax(0,332px) 75px; column-gap:20px; align-items:start; min-block-size:253px; padding:20px 20px 0 8px; }
.vlz-homepage-operating-method__item:first-child,.vlz-homepage-operating-method__item:last-child { min-block-size:278px; }
.vlz-homepage-operating-method__icon { position:relative; z-index:1; display:grid; grid-row:1; grid-column:2; place-items:center; inline-size:75px; block-size:75px; margin-block-start:5px; border-radius:50%; background:#6adfd7; color:#fff; font-style:normal; font-weight:400; line-height:1; }
.vlz-homepage-operating-method__icon::before { display:block; }
.vlz-homepage-operating-method__icon--target::before { content:""; display:block; inline-size:43.07px; block-size:43.07px; background-color:currentColor; -webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-target.svg") no-repeat center / contain; mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-target.svg") no-repeat center / contain; }
.vlz-homepage-operating-method__icon--tools::before { content:""; display:block; inline-size:44.72px; block-size:45.02px; background-color:currentColor; -webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-tools.svg") no-repeat center / contain; mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-tools.svg") no-repeat center / contain; }
.vlz-homepage-operating-method__icon--idea::before { content:""; display:block; inline-size:39.33px; block-size:44.91px; background-color:currentColor; -webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-idea.svg") no-repeat center / contain; mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-idea.svg") no-repeat center / contain; }
.vlz-homepage-operating-method__content { grid-row:1; grid-column:1; padding-block-start:0; direction:rtl; text-align:right; }
.vlz-homepage-operating-method__content h3 { margin:0 0 30px; color:#fff; font-size:21px; font-weight:700; line-height:25px; }
.vlz-homepage-operating-method__content p { margin:0; color:#fff; font-size:16px; line-height:24px; }
@media (max-width:1024px) { .vlz-homepage-operating-method { padding:0 0 10px; } .vlz-homepage-operating-method__container { display:block; inline-size:100%; } .vlz-homepage-operating-method__intro { display:flex; min-block-size:140px; margin:0 0 120px; padding-inline:15px; } .vlz-homepage-operating-method__intro-text { max-inline-size:none; margin:10px 0; color:#fff; font-size:24px; line-height:45px; } .vlz-homepage-operating-method__timeline { gap:0; padding:0 42.6px 0 22.6px; } .vlz-homepage-operating-method__timeline::before { inset-block:57px 158px; inset-inline-end:79.6px; } .vlz-homepage-operating-method__item { grid-template-columns:minmax(0,1fr) 75px; column-gap:20px; min-block-size:215px; padding:20px 0 0 8px; } .vlz-homepage-operating-method__item:first-child,.vlz-homepage-operating-method__item:last-child { min-block-size:215px; } .vlz-homepage-operating-method__icon { inline-size:75px; block-size:75px; margin-block-start:0; font-size:45px; } .vlz-homepage-operating-method__content h3 { margin-block-end:30px; } .vlz-homepage-operating-method__content p { color:rgb(110,123,129); font-size:18px; line-height:25px; } .vlz-homepage-operating-method__item:nth-child(3) .vlz-homepage-operating-method__content p { font-size:15px; } }
@media (max-width:767px) { .vlz-homepage-operating-method { padding:103px 0 118px; } .vlz-homepage-operating-method__container { inline-size:100%; } .vlz-homepage-operating-method__intro { min-block-size:230px; margin-block-end:120px; padding-inline:15px; } .vlz-homepage-operating-method__intro-text { margin:10px 0; font-size:24px; line-height:45px; } .vlz-homepage-operating-method__timeline { padding:0 42.6px 0 22.6px; } .vlz-homepage-operating-method__timeline::before { inset-block:58px 332px; inset-inline-end:79.6px; } .vlz-homepage-operating-method__item { grid-template-columns:minmax(0,1fr) 75px; column-gap:20px; min-block-size:390px; padding:20px 0 0 8px; } .vlz-homepage-operating-method__item:first-child,.vlz-homepage-operating-method__item:last-child { min-block-size:390px; } .vlz-homepage-operating-method__icon { inline-size:75px; block-size:75px; margin-block-start:0; font-size:45px; } .vlz-homepage-operating-method__content h3 { margin-block-end:30px; font-size:21px; line-height:25px; } }
.vlz-homepage-solutions-gateway .vlz-contact-action__link { display:flex; align-items:center; justify-content:center; min-block-size:62px; border-radius:27px; background:#1b73b0; color:#fff; font-size:20px; text-decoration:none; }

/* ------------------------- Homepage Mid Inquiry Form (TPL-C-02 / Section 6) */
.vlz-homepage-mid-form { box-sizing:border-box; direction:rtl; padding:96px 0; background:var(--vlz-color-ink,#1b2538); color:#fff; }
.vlz-homepage-mid-form__container { inline-size:min(1280px,calc(100% - 64px)); margin-inline:auto; }
.vlz-homepage-mid-form__grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:88px; align-items:center; }
.vlz-homepage-mid-form__copy { text-align:right; }
.vlz-homepage-mid-form__eyebrow { margin:0 0 35px; color:#fff; font-size:43px; font-weight:700; line-height:1.2; }
.vlz-homepage-mid-form__title { max-inline-size:none; margin-block:0 18px !important; margin-inline:0 !important; color:var(--vlz-color-primary,#1e7dbf); font-size:30px; font-weight:700; line-height:1.4; transform:rotate(4.82deg); transform-origin:center; }
.vlz-homepage-mid-form__arrow { margin-block:0 !important; margin-inline:0 !important; line-height:0; }
.vlz-homepage-mid-form__arrow img { display:block; max-inline-size:100%; height:auto; }
.vlz-homepage-mid-form__arrow--blue { inline-size:224px; margin-block:2px 6px !important; margin-inline-start:auto !important; margin-inline-end:0 !important; opacity:.92; }
.vlz-homepage-mid-form__arrow--green { inline-size:76px; margin-block:0 !important; margin-inline:0 6px !important; opacity:.92; align-self:flex-end; }
.vlz-homepage-mid-form__text { max-inline-size:300px; margin-block:0 !important; margin-inline:0 !important; color:#2fd6a0; font-size:21px; line-height:1.55; transform:rotate(4.82deg); transform-origin:center; }
.vlz-homepage-mid-form__support { display:flex; flex-direction:column; align-items:flex-start; gap:22px; margin-block-start:34px; }
.vlz-homepage-mid-form__cta-row { display:flex; align-items:center; gap:14px; align-self:flex-end; }
.vlz-homepage-mid-form__cta-row > * { margin-block-start:0 !important; }
.vlz-homepage-mid-form__support .vlz-contact-action__link { display:inline-flex; align-items:center; justify-content:center; min-block-size:66px; padding-inline:32px; border-radius:999px; background:var(--vlz-color-primary,#1e7dbf); color:#fff; font-size:23px; font-weight:700; text-decoration:none; }
.vlz-homepage-mid-form__form { box-sizing:border-box; padding:0; background:transparent; color:#fff; }
.vlz-homepage-mid-form__form .wpcf7 { direction:rtl; }
.vlz-homepage-mid-form__form .wpcf7-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; }
.vlz-homepage-mid-form__form .wpcf7-form p { display:flex; flex-direction:column; gap:.25rem; margin:0 0 26px; }
.vlz-homepage-mid-form__form .wpcf7-form p:nth-of-type(5),.vlz-homepage-mid-form__form .wpcf7-form p:nth-of-type(6),.vlz-homepage-mid-form__form .wpcf7-response-output { grid-column:1 / -1; }
.vlz-homepage-mid-form__form .wpcf7-form p br { display:none; }
.vlz-homepage-mid-form__form label { color:#fff; font-size:16px; font-weight:400; line-height:1.5; text-align:right; }
.vlz-homepage-mid-form__form .wpcf7-form-control-wrap { display:block; inline-size:100%; }
.vlz-homepage-mid-form__form .wpcf7-form-control,.vlz-homepage-mid-form__form select.wpcf7-form-control { box-sizing:border-box; inline-size:100%; min-block-size:3.35rem; padding-inline:.25rem; border:0; border-block-end:1px solid var(--vlz-color-text-invert-muted,rgba(255,255,255,.4)); border-radius:0; background:transparent; color:#fff; font-size:18px; line-height:1.5; transition:border-color 120ms ease; }
.vlz-homepage-mid-form__form textarea.wpcf7-form-control { block-size:6rem; min-block-size:6rem; resize:vertical; }
.vlz-homepage-mid-form__form input.wpcf7-form-control::placeholder,.vlz-homepage-mid-form__form textarea.wpcf7-form-control::placeholder { color:var(--vlz-color-text-invert-muted,rgba(255,255,255,.78)); }
.vlz-homepage-mid-form__form input.wpcf7-form-control:not(.wpcf7-submit):focus,.vlz-homepage-mid-form__form select.wpcf7-form-control:focus,.vlz-homepage-mid-form__form textarea.wpcf7-form-control:focus { outline:none; border-block-end:2px solid var(--vlz-color-primary,#1e7dbf); background:transparent; color:#fff; }
.vlz-homepage-mid-form__form select.wpcf7-form-control { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left .25rem center; background-size:10px 7px; padding-inline-start:1.25rem; }
.vlz-homepage-mid-form__form select.wpcf7-form-control { color-scheme:dark; }
.vlz-homepage-mid-form__form select.wpcf7-form-control option { color:#fff; background-color:#1b2538; }
.vlz-homepage-mid-form__form select.wpcf7-form-control option:checked,
.vlz-homepage-mid-form__form select.wpcf7-form-control option:hover,
.vlz-homepage-mid-form__form select.wpcf7-form-control option:focus { color:#1b2538; background-color:#2fd6a0; }
.vlz-homepage-mid-form__form .wpcf7-submit { display:block; inline-size:100%; min-block-size:56px; border:1px solid #2fd6a0; border-radius:999px; background:#2fd6a0; color:#fff; font-size:19px; font-weight:700; line-height:1.2; cursor:pointer; transition:background-color 150ms ease,border-color 150ms ease; }
.vlz-homepage-mid-form__form .wpcf7-submit:hover,.vlz-homepage-mid-form__form .wpcf7-submit:focus-visible { outline:0; background:var(--vlz-color-primary,#1e7dbf); border-color:var(--vlz-color-primary,#1e7dbf); }
.vlz-homepage-mid-form__form .wpcf7-not-valid-tip { display:block; margin-block-start:6px; color:#ffb4ab; font-size:14px; line-height:1.4; }
@media (max-width:1024px) { .vlz-homepage-mid-form { padding-block:78px; } .vlz-homepage-mid-form__container { inline-size:min(1120px,calc(100% - 48px)); } .vlz-homepage-mid-form__grid { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:48px; } .vlz-homepage-mid-form__title { font-size:35px; } .vlz-homepage-mid-form__arrow--blue { inline-size:120px; } .vlz-homepage-mid-form__arrow--green { inline-size:64px; } }
@media (max-width:767px) { .vlz-homepage-mid-form { padding-block:64px; } .vlz-homepage-mid-form__container { inline-size:min(345px,calc(100% - 40px)); } .vlz-homepage-mid-form__grid { grid-template-columns:1fr; gap:42px; } .vlz-homepage-mid-form__eyebrow { margin-block-end:24px; font-size:34px; } .vlz-homepage-mid-form__title { font-size:30px; line-height:1.4; } .vlz-homepage-mid-form__arrow--blue { inline-size:96px; margin:0 auto 6px 0; } .vlz-homepage-mid-form__arrow--green { inline-size:52px; } .vlz-homepage-mid-form__text { font-size:18px; max-inline-size:none; } .vlz-homepage-mid-form__support { justify-content:flex-end; } .vlz-homepage-mid-form__form .wpcf7-form { grid-template-columns:1fr; gap:0; } .vlz-homepage-mid-form__form p { margin-block-end:24px; } }
@media (max-width:1024px) { .vlz-homepage-solutions-gateway { min-block-size:auto; padding-block:70px; } .vlz-homepage-solutions-gateway__grid { grid-template-columns:1fr; min-block-size:0; gap:45px; } .vlz-homepage-solutions-gateway__cta { grid-column:1; grid-row:2; } .vlz-homepage-solutions-gateway__content { grid-column:1; grid-row:1; } }
@media (max-width:767px) { .vlz-homepage-solutions-gateway { padding-block:50px; } .vlz-homepage-solutions-gateway__container { inline-size:min(325px,calc(100% - 40px)); } .vlz-homepage-solutions-gateway__title { font-size:26px; line-height:1.4; } .vlz-homepage-solutions-gateway__text,.vlz-homepage-solutions-gateway__list { font-size:17px; line-height:1.6; } }

@media (max-width: 1024px) {
	.vlz-homepage-problem-value {
		padding-block: 70px 32px;
	}

	.vlz-homepage-problem-value__grid {
		grid-template-columns: 1fr;
		gap: 45px;
	}

	.vlz-homepage-problem-value__visual {
		grid-column: 1;
		grid-row: 1;
	}

	.vlz-homepage-problem-value__narrative {
		grid-column: 1;
		grid-row: 2;
	}
}

@media (max-width: 767px) {
	.vlz-homepage-problem-value {
		padding-block: 50px 26px;
	}

	.vlz-homepage-problem-value__container {
		inline-size: min(325px, calc(100% - 40px));
	}

	.vlz-homepage-problem-value__grid {
		gap: 30px;
	}

	.vlz-homepage-problem-value__title {
		margin-block-end: 25px;
		font-size: 23px;
		line-height: 1.4;
	}

	.vlz-homepage-problem-value__text {
		font-size: 17px;
		line-height: 1.6;
	}

	.vlz-homepage-problem-value__actions {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-block-start: 30px;
	}

	.vlz-homepage-problem-value .vlz-contact-action__link {
		min-block-size: 64px;
		font-size: 18px;
	}
}

@media (max-width: 1024px) {
	.vlz-dark-image-hero .vlz-contact-action {
		padding-inline: 5px;
	}

	.vlz-dark-image-hero .vlz-contact-action--secondary-outline .vlz-contact-action__link {
		padding-inline: 6px;
		font-size: 21px;
	}

	/*
	 * The 2-column hero button grid leaves ~140px of label width at this
	 * breakpoint. "تحدث مع خبير سيو" measures ~153px at the base 21px/12px
	 * padding, so it wraps to 2 lines. Recovering the same 6px inline
	 * padding already given to the secondary-outline button (not a font-size
	 * cut) is enough to fit it on 1 line, per the one-line-CTA remedy order:
	 * fix width/spacing before touching approved copy.
	 */
	.vlz-dark-image-hero .vlz-contact-action--primary-filled .vlz-contact-action__link {
		padding-inline: 6px;
	}

	/*
	 * Content Writing Company CTA update (2026-08-16): the Owner-final Primary
	 * CTA "طوّر محتوى علامتك" still wraps to 2 lines in the 2-column hero
	 * button grid at this breakpoint even with the padding recovery above.
	 * Scoped to this page only (`vlz-dark-image-hero--content-writing`
	 * modifier, applied only on Content Writing Company's own hero section) —
	 * stacks the 2 hero buttons to 1-per-row instead of shrinking the font,
	 * so the full-width label has room. 0 change to any other family page
	 * using the shared `.vlz-dark-image-hero` pattern.
	 */
	.vlz-dark-image-hero--content-writing .vlz-hero-buttons {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.vlz-dark-image-hero--content-writing .vlz-contact-action {
		padding-inline: 0;
	}

	/*
	 * TPL-D-01 SEO Company Hero (2026-08-23): the 2-column hero button grid
	 * leaves too little width at this breakpoint for the longer of the two
	 * Owner-approved CTA labels ("انطلق نحو الصفحة الأولى"), which overlaps
	 * the primary button instead of wrapping cleanly — a genuine Legacy
	 * responsive defect (confirmed reproduced identically on Legacy itself
	 * at 768px), not something to carry into the rebuild per the project's
	 * "do not transfer Legacy errors" rule. Scoped to this page only
	 * (`vlz-dark-image-hero--seo-company` modifier) — stacks the 2 hero
	 * buttons to 1-per-row, same remedy already used for Content Writing
	 * Company above. 0 change to any other family page using the shared
	 * `.vlz-dark-image-hero` pattern.
	 */
	.vlz-dark-image-hero--seo-company .vlz-hero-buttons {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.vlz-dark-image-hero--seo-company .vlz-contact-action {
		padding-inline: 0;
	}
}

@media (max-width: 767px) {
	.vlz-dark-image-hero__title {
		font-size: 24px;
		line-height: 1.5;
	}

	.vlz-dark-image-hero__lead,
	.vlz-dark-image-hero__prompt {
		font-size: 22px;
		line-height: 1.7;
	}

	.vlz-dark-image-hero .vlz-hero-buttons {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.vlz-dark-image-hero .vlz-contact-action {
		padding-inline: 0;
	}

	.vlz-dark-image-hero .vlz-contact-action__link,
	.vlz-dark-image-hero .vlz-contact-action--secondary-outline .vlz-contact-action__link {
		min-block-size: 71px;
		font-size: 18px;
	}

	.vlz-metric--hero-dark {
		min-block-size: 92px;
	}
}

/* Contact Action: host-independent base contract. */
.vlz-contact-action {
	box-sizing: border-box;
	max-inline-size: 100%;
	margin-block: 0;
}

.vlz-contact-action__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-inline-size: 100%;
	min-block-size: 60px;
	padding: 12px 28px;
	gap: 0.45em;
	border: 1px solid var(--vlz-color-primary, #1e7dbf);
	border-radius: var(--vlz-radius-pill, 999px);
	background: var(--vlz-color-primary, #1e7dbf);
	color: #fff;
	font-family: "IBM Plex Sans Arabic", Arial, sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.vlz-contact-action--primary-filled .vlz-contact-action__link {
	background: var(--vlz-color-primary, #1e7dbf);
	color: #fff;
}

.vlz-contact-action--secondary-outline .vlz-contact-action__link {
	background: transparent;
	color: var(--vlz-color-primary, #1e7dbf);
}

.vlz-contact-action .vlz-contact-action__link:hover,
.vlz-contact-action .vlz-contact-action__link:focus-visible {
	border-color: var(--vlz-color-link-hover, #145a8c);
	background: var(--vlz-color-link-hover, #145a8c);
	color: #fff;
}

.vlz-contact-action__link:focus-visible {
	outline: 3px solid var(--vlz-color-primary, #1e7dbf);
	outline-offset: 3px;
}

.vlz-contact-action__icon {
	display: inline-block;
	flex: 0 0 auto;
	inline-size: 14px;
	block-size: 14px;
	background: currentColor;
	content: "";
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.vlz-contact-action--auto {
	inline-size: auto;
}

.vlz-contact-action--full,
.vlz-contact-action--full .vlz-contact-action__link {
	inline-size: 100%;
}

.vlz-contact-action--regular .vlz-contact-action__link {
	min-block-size: 48px;
}

.vlz-contact-action__warning {
	padding: 0.75rem;
	border: 1px solid #b32d2e;
	color: #b32d2e;
}

/* ---------------------------------------------------------- FAQ Accordion */

/*
 * Native Core Details is the interaction owner. These rules provide the
 * reusable service-family shell and the approved rounded-card deviation; they
 * intentionally do not add JavaScript or emulate disclosure semantics.
 */
.vlz-faq-section {
	direction: rtl;
	margin-block: 0;
	padding-inline: 10px;
	background: var(--vlz-color-surface, #fff);
}

.vlz-faq-section__container {
	box-sizing: border-box;
	max-inline-size: 1140px;
	margin-inline: auto;
	padding-block: 10px;
}

.vlz-faq-section__title {
	margin: 0 0 20px;
	color: #283e71;
	font-family: "IBM Plex Sans Arabic", Arial, sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
	text-align: start;
}

.vlz-faq {
	display: grid;
	gap: 12px;
}

.vlz-faq .vlz-faq__item {
	box-sizing: border-box;
	margin: 0;
	border: var(--vlz-border-width, 1px) solid var(--vlz-color-border, #e2e6ea);
	border-radius: var(--vlz-radius-pill);
	background: var(--vlz-color-surface, #fff);
	color: #666;
	overflow: visible;
	transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.vlz-faq .vlz-faq__item > summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 15px;
	min-block-size: 48px;
	padding: 15px;
	color: inherit;
	line-height: 1.15;
	list-style: none;
	text-align: start;
	white-space: normal;
	overflow-wrap: break-word;
	transition: color 0.3s ease-in-out;
}

.vlz-faq .vlz-faq__item > summary::-webkit-details-marker {
	display: none;
}

.vlz-faq .vlz-faq__item > summary::after {
	align-self: center;
	color: #000;
	content: "+";
	font-family: Arial, sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
}

.vlz-faq .vlz-faq__item[open] > summary::after {
	content: "−";
}

.vlz-faq .vlz-faq__item[open] {
	border-color: var(--vlz-color-border-strong, #c7d0d9);
	border-radius: var(--vlz-radius-lg);
	height: auto;
	overflow: visible;
}

.vlz-faq .vlz-faq__item:hover {
	border-color: var(--vlz-color-primary, #1e7dbf);
}

.vlz-faq .vlz-faq__item > summary:focus-visible {
	outline: var(--vlz-focus-width, 3px) solid var(--vlz-color-focus, #005fcc);
	outline-offset: var(--vlz-focus-offset, 2px);
	border-radius: var(--vlz-radius-pill);
}

.vlz-faq .vlz-faq__item[open] > summary:focus-visible {
	border-radius: var(--vlz-radius-lg);
}

.vlz-faq .vlz-faq__item[open] > .vlz-faq__answer {
	margin-block-start: 0;
}

.vlz-faq .vlz-faq__answer {
	padding: 0 15px 15px;
	color: #333;
	line-height: 1.7;
}

.vlz-faq .vlz-faq__answer > :first-child {
	margin-block-start: 0;
}

.vlz-faq .vlz-faq__answer > :last-child {
	margin-block-end: 0;
}

.vlz-faq .vlz-faq__answer a {
	color: var(--vlz-color-link, #1e7dbf);
}

@media (max-width: 767px) {
	.vlz-faq-section__title {
		font-size: 22px;
	}

	.vlz-faq .vlz-faq__item > summary {
		padding-inline: 15px;
	}
}

/* ------------------------------- Compatibility — SEO Expert stale FAQ boundary */

/*
 * FAQ -> Section 9 boundary correction (App sync-drift instance only).
 *
 * A stale FAQ block revision on App Page 37373 predates this Pattern and is
 * still wrapped in the generic `.vlz-section.vlz-section--alt` utility
 * classes (not `.vlz-faq-section`) directly under GeneratePress' own
 * `.entry-content`. Every other top-level Section on that page is a
 * GenerateBlocks element and never matches GeneratePress' default
 * `.entry-content > [class*="wp-block-"]:not(:last-child):not(.wp-block-heading)
 * { margin-bottom: 1.5em }` content-spacing rule; this one Group block does,
 * because it is a plain core `wp-block-group`, and leaks a 25.5px
 * margin-bottom that was never part of its own design. Local's canonical
 * page does not need this rule (its content root is `.vlz-content`, not
 * `.entry-content`, so the selector below never matches there); it exists
 * only to neutralise this one incidental leak without altering the current
 * background/padding/container width of this still-generic-classed
 * instance. See SEO-EXPERT-TPL-B-01-FAQ-SECTION-9-BOUNDARY-CORRECTION.md.
 */
.entry-content > .wp-block-group.vlz-section.vlz-section--alt {
	margin-bottom: 0;
}

/* --------------------------------- Predecessor fragments for CTA Unit — SEO Company Methodology (Transaction B) */

.vlz-seo-company-methodology__image {
	margin: 0 auto 28px;
	text-align: center;
	width: 100% !important;
}

.vlz-seo-company-methodology .vlz-ctaunit--soft-panel h2 {
	color: #fff !important;
	font-size: clamp(24px, 2vw, 30px) !important;
	line-height: 1.42;
	margin: 0 0 16px;
	max-inline-size: none !important;
}

.vlz-seo-company-methodology .vlz-ctaunit--soft-panel p {
	color: rgba(255, 255, 255, .88) !important;
	font-size: 17px;
	line-height: 1.8;
	margin: 0 0 22px;
	max-inline-size: none !important;
}

.vlz-seo-company-methodology .vlz-ctaunit--soft-panel .vlz-contact-action {
	max-inline-size: none !important;
}

.vlz-seo-company-methodology__actions .vlz-contact-action--primary-filled .vlz-contact-action__link {
	background: #1e7dbf !important;
	border: 1px solid #1e7dbf !important;
	color: #fff !important;
}

.vlz-seo-company-methodology__actions .vlz-contact-action--primary-filled .vlz-contact-action__link:hover {
	background: #0b365f !important;
	border-color: #0b365f !important;
	color: #fff !important;
}

.vlz-seo-company-methodology__actions .vlz-contact-action--secondary-outline .vlz-contact-action__link {
	background: transparent !important;
	border: 1px solid #fff !important;
	color: #fff !important;
}

.vlz-seo-company-methodology__actions .vlz-contact-action--secondary-outline .vlz-contact-action__link:hover {
	background: #fff !important;
	border-color: #fff !important;
	color: #0f467f !important;
}

/* --------------------------- Predecessor fragments for CTA Unit / Trust-Sticky Tone — SEO Company Trust (Transaction C) */

.vlz-seo-company-trust .vlz-ctaunit--trust-sticky p {
	margin: 0 0 28px;
	font-size: 18px;
	line-height: 1.7;
}

.vlz-seo-company-trust .vlz-ctaunit--trust-sticky .vlz-contact-action__link {
	min-block-size: 50px;
	padding-inline: 28px;
	border-radius: 28px !important;
	white-space: nowrap;
}

/* --------------------------- Predecessor fragments for CTA Unit / Trust-Sticky Tone — SEO Company Differentiation (Transaction D) */

.vlz-seo-company-differentiation .vlz-ctaunit--trust-sticky .vlz-contact-action__link {
	min-block-size: 50px;
	padding-inline: 28px;
	border-radius: 28px !important;
	white-space: nowrap;
}

/* --------------------------------------------------------------- CTA Unit */

.vlz-ctaunit {
	display: flex;
	flex-direction: column;
	gap: var(--vlz-space-sm, 0.75rem);
	padding: var(--vlz-space-lg, 1.5rem);
	border-radius: var(--vlz-radius-lg, 0.75rem);
}

.vlz-ctaunit--accent {
	background: var(--vlz-color-primary-soft, #e8f2fa);
}

.vlz-ctaunit--plain {
	border: var(--vlz-border-width, 1px) solid var(--vlz-color-border, #e2e6ea);
	background: transparent;
}

/* Reusable Section 2 CTA variants. Their layout is deliberately contextual. */
.vlz-ctaunit--soft-panel {
	min-block-size: 528px;
	padding: 80px 40px;
	border-radius: 0;
	background: #f2f2f3 var(--vlz-bg-download-2, url('/wp-content/uploads/2021/07/download-2.png')) 100% 0 / contain no-repeat;
	background-color: #f2f2f3;
}

/*
 * Specificity note: theme.json's global `elements.button` style also targets
 * `.wp-block-button .wp-block-button__link` (0,2,0) and is printed AFTER this
 * component stylesheet in the cascade (global styles load later than the
 * component layer — see the G-4 note above). A same-specificity, later rule
 * wins by source order, so the two `.vlz-ctaunit--*` button rules below are
 * intentionally written against the block's own wrapper classes
 * (`.wp-block-vlinzza-cta-unit.vlz-ctaunit--*`) to reach (0,3,0) and beat the
 * global default without an `!important`. Radius stays pill-shaped on
 * purpose — INTENTIONAL OWNER-APPROVED DEVIATION: all Section 2 CTA buttons
 * use rounded corners regardless of the source reference's per-button radius.
 */
/*
 * Visual Reopen — secondary banner composition: Reference/Legacy are a
 * two-column Elementor inner-section here (proven via DOM, not assumed):
 * the visible content (heading + paragraph, NO button -- see report) sits
 * in a column that is exactly half the banner's width, on the physical
 * LEFT side, leaving the right half of the `download-2.png` background
 * image visible and unobstructed (its `background-position: 100% 0` also
 * anchors it to the right). This component previously ran the heading/
 * paragraph/button the FULL width of the padded box, covering the whole
 * image edge-to-edge -- a materially different composition, which is what
 * the "text over the image looks different" report was actually seeing.
 * `max-inline-size: 50%` + `margin-inline-start: auto` reproduces the same
 * half-column-on-the-left composition without any absolute positioning,
 * spacer, or min-height. RTL note: `margin-inline-start` is `margin-right`
 * here, so `auto` pushes the box away from the right, i.e. to the left --
 * the correct direction for this element (the opposite direction was used
 * for the first image, whose reference position is mirrored -- see report).
 */
.wp-block-vlinzza-cta-unit.vlz-ctaunit--soft-panel h2 {
	max-inline-size: 50%;
	margin-inline-start: auto;
	color: #333;
	font-size: 45px;
}

.wp-block-vlinzza-cta-unit.vlz-ctaunit--soft-panel p {
	max-inline-size: 50%;
	margin-inline-start: auto;
	color: #716c80;
	font-size: 22px;
	line-height: 1.55;
}

/*
 * Zone 3B: button converted from a static wp:button (hardcoded
 * #seo-evaluation href) to vlinzza/contact-action (slot=expert-contact),
 * so its href is Boost2-resolved (WhatsApp) instead of hardcoded, matching
 * the reference's actual live destination and the Zone 2/3A convention.
 * Selectors updated from .wp-block-button__link to the component's own
 * .vlz-contact-action__link; colors/radius unchanged from the prior rule.
 *
 * Visual Reopen note: an earlier pass in this same audit initially could
 * not find a button in Reference's DOM and nearly reported it as an
 * un-matched local addition -- a `a[class*="button"]` selector missed
 * Reference's actual class (`elementskit-btn`, no literal "button"
 * substring). A wider query proved the button DOES exist in Reference, in
 * the SAME column as the heading/paragraph, directly below the paragraph,
 * spanning the column's full width (~345px of ~365px) rather than a fixed
 * 300px -- corrected below to `inline-size: 100%` of its own (now
 * 50%-constrained) column instead of a fixed min-width.
 */
.wp-block-vlinzza-cta-unit.vlz-ctaunit--soft-panel .vlz-contact-action {
	display: block;
	/*
	 * This button's pattern attribute is `"width":"auto"`, which applies
	 * `.vlz-contact-action--auto { inline-size: auto }` -- that disables the
	 * flex-column `align-items: stretch` this wrapper would otherwise get
	 * from `.vlz-ctaunit`, so the button shrank to its own text width.
	 * `inline-size: 100%` here (this selector's 3-class specificity already
	 * beats the 1-class `--auto` rule) restores full-width-of-column sizing;
	 * `max-inline-size: 50%` then caps that at the half-column width.
	 */
	inline-size: 100%;
	max-inline-size: 50%;
	margin-inline-start: auto;
	text-align: start;
}

.wp-block-vlinzza-cta-unit.vlz-ctaunit--soft-panel .vlz-contact-action__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: 46px;
	padding-inline: 40px;
	font-size: 16px;
	background: #41d58c;
	color: #fff;
	border-radius: var(--vlz-radius-pill, 999px);
	transition: background-color 0.4s, color 0.4s;
}

.wp-block-vlinzza-cta-unit.vlz-ctaunit--soft-panel .vlz-contact-action__link:hover,
.wp-block-vlinzza-cta-unit.vlz-ctaunit--soft-panel .vlz-contact-action__link:focus-visible {
	background: #26b16d;
	color: #fff;
}

.vlz-ctaunit--brand-sticky {
	position: sticky;
	top: 160px;
	max-inline-size: 350px;
	margin-inline: auto;
	min-block-size: 533px;
	padding: 100px 15px 70px;
	border-radius: 100px 5px 5px;
	background: #1e7dbf var(--vlz-bg-services-details, url('/wp-content/uploads/2021/06/03_Services-Details.png')) 100% 100% no-repeat;
	color: #fff;
}

/*
 * Zone 2 final correction: `.vlz-split-scroll-service-body :is(p,
 * .vlz-service-step) { color: #666; ... }` (main-column body-copy rule)
 * carries higher specificity (one class + a compound :is() whose highest
 * argument is itself a class) than this variant's plain
 * `:is(h1..h6, p) { color: inherit }` (one class + a tag-only :is()), so it
 * was winning the cascade and painting the card's white paragraph text as
 * low-contrast grey on the blue background — the owner-reported defect.
 * Re-scoped with the block class added so this rule out-specifies the
 * page-level one without `!important` and without touching the main-column
 * rule or any other component/tone.
 */
.wp-block-vlinzza-cta-unit.vlz-ctaunit--brand-sticky :is(h1, h2, h3, h4, h5, h6, p) {
	color: inherit;
}

/*
 * Zone 2 final closure: both buttons in this card are now `vlinzza/
 * contact-action` (button 1 was a static core `wp:button` until the CTA
 * destination fix in this round; see the report). Sizing/shape is shared;
 * colour is keyed off each button's own `appearance` variant class below so
 * the two keep the reference's two-tone hierarchy (lighter green primary,
 * darker green secondary) instead of collapsing to one identical colour.
 * Spacing: the first button keeps the same 20px gap under the paragraph
 * that the old `wp:buttons` wrapper produced; the second keeps its own
 * previous 12px gap under the first.
 */
.vlz-ctaunit--brand-sticky .vlz-contact-action:first-of-type {
	margin-block: 20px 0;
}

.vlz-ctaunit--brand-sticky .vlz-contact-action + .vlz-contact-action {
	margin-block-start: 12px;
}

.wp-block-vlinzza-cta-unit.vlz-ctaunit--brand-sticky .vlz-contact-action__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: 46px;
	border-radius: var(--vlz-radius-pill, 999px);
	color: #fff;
	text-decoration: none;
	transition: background-color 0.4s, color 0.4s;
}

/*
 * !important, narrowly scoped to these two 3-class compound selectors only:
 * GeneratePress prints `a.wp-block-button__link:not(.has-background)` and
 * core prints a `:root :where(...)` global button colour, both of which
 * otherwise repaint these buttons back to the site's default blue/grey and
 * reproduce the low-contrast "text barely visible" defect the owner
 * reported. The scope (three required classes each) cannot leak to any
 * button outside this component/tone, so this does not become a general
 * button override.
 */
.wp-block-vlinzza-cta-unit.vlz-ctaunit--brand-sticky .vlz-contact-action--primary-filled .vlz-contact-action__link {
	background: #41d58c !important;
	color: #fff !important;
}

.wp-block-vlinzza-cta-unit.vlz-ctaunit--brand-sticky .vlz-contact-action--secondary-outline .vlz-contact-action__link {
	background: #1ebf7a !important;
	color: #fff !important;
}

.wp-block-vlinzza-cta-unit.vlz-ctaunit--brand-sticky .vlz-contact-action--primary-filled .vlz-contact-action__link:hover,
.wp-block-vlinzza-cta-unit.vlz-ctaunit--brand-sticky .vlz-contact-action--primary-filled .vlz-contact-action__link:focus-visible {
	background: #26b16d !important;
	color: #fff !important;
}

.wp-block-vlinzza-cta-unit.vlz-ctaunit--brand-sticky .vlz-contact-action--secondary-outline .vlz-contact-action__link:hover,
.wp-block-vlinzza-cta-unit.vlz-ctaunit--brand-sticky .vlz-contact-action--secondary-outline .vlz-contact-action__link:focus-visible {
	background: #189367 !important;
	color: #fff !important;
}

@media (max-width: 1024px) {
	.vlz-ctaunit--brand-sticky {
		position: static;
	}
}

/*
 * Section 5 / Zone A -- Sticky Trust Panel.
 *
 * This is an additive `vlinzza/cta-unit` tone.  It intentionally owns only
 * Zone A's measured surface, CTA treatment, and responsive sticky mechanism;
 * it does not alter the render contract or any existing tone.
 */
.vlz-ctaunit--trust-sticky {
	position: sticky;
	top: 160px;
	max-inline-size: 350px;
	min-block-size: 612px;
	margin-inline: auto;
	padding: 100px 25px 70px;
	border-radius: 5px 5px 5px 100px;
	background: #26b16d var(--vlz-bg-contentmarketing, url('/wp-content/uploads/2021/07/contentmarketing-bg.png')) 100% 100% no-repeat;
	color: #fff;
}

.wp-block-vlinzza-cta-unit.vlz-ctaunit--trust-sticky :is(h1, h2, h3, h4, h5, h6, p) {
	color: inherit;
}

.wp-block-vlinzza-cta-unit.vlz-ctaunit--trust-sticky h2 {
	font-size: 22px;
	font-weight: 700;
	line-height: 30.8px;
}

.wp-block-vlinzza-cta-unit.vlz-ctaunit--trust-sticky p {
	font-size: 22px;
	line-height: 1.55;
}

.vlz-ctaunit--trust-sticky .vlz-contact-action:first-of-type {
	margin-block: 20px 0;
}

.vlz-ctaunit--trust-sticky .vlz-contact-action + .vlz-contact-action {
	margin-block-start: 12px;
}

.wp-block-vlinzza-cta-unit.vlz-ctaunit--trust-sticky .vlz-contact-action__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: 46px;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.4s, color 0.4s;
}

.wp-block-vlinzza-cta-unit.vlz-ctaunit--trust-sticky .vlz-contact-action--primary-filled .vlz-contact-action__link {
	background: #41d58c !important;
	border: 1px solid #41d58c;
	border-radius: 5px;
	color: #fff !important;
}

.wp-block-vlinzza-cta-unit.vlz-ctaunit--trust-sticky .vlz-contact-action--secondary-outline .vlz-contact-action__link {
	background: #1e7dbf !important;
	border: 0;
	border-radius: 27px;
	color: #fff !important;
}

.wp-block-vlinzza-cta-unit.vlz-ctaunit--trust-sticky .vlz-contact-action--primary-filled .vlz-contact-action__link:hover,
.wp-block-vlinzza-cta-unit.vlz-ctaunit--trust-sticky .vlz-contact-action--primary-filled .vlz-contact-action__link:focus-visible {
	background: #26b16d !important;
	border-color: #41d58c;
	color: #fff !important;
}

.wp-block-vlinzza-cta-unit.vlz-ctaunit--trust-sticky .vlz-contact-action--secondary-outline .vlz-contact-action__link:hover,
.wp-block-vlinzza-cta-unit.vlz-ctaunit--trust-sticky .vlz-contact-action--secondary-outline .vlz-contact-action__link:focus-visible {
	background: rgba(2, 1, 1, 0.59) !important;
	color: #fff !important;
}

@media (max-width: 1024px) {
	.vlz-ctaunit--trust-sticky {
		position: static;
		max-inline-size: none;
		min-block-size: 628px;
	}
}

@media (max-width: 767px) {
	.vlz-ctaunit--trust-sticky {
		min-block-size: 450px;
		padding: 70px 15px 48px;
	}
}

/* Local-only Zone A QA geometry. Not a Section 5 implementation. */
.vlz-zone-a-local-qa {
	direction: rtl;
	padding: 260px 0 1100px;
}

.vlz-zone-a-local-qa__container {
	inline-size: min(1140px, 100vw);
	max-inline-size: 1140px;
	margin-inline: auto;
}

.vlz-zone-a-local-qa__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	align-items: stretch;
}

.vlz-zone-a-local-qa__panel-column,
.vlz-zone-a-local-qa__travel {
	min-inline-size: 0;
}

.vlz-zone-a-local-qa__panel-column {
	padding-inline: 15px;
}

.vlz-zone-a-local-qa__travel {
	min-block-size: 2200px;
	padding-inline: 15px;
}

@media (max-width: 1024px) {
	.vlz-zone-a-local-qa {
		padding: 20px 0 88px;
	}

	.vlz-zone-a-local-qa__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.vlz-zone-a-local-qa__travel {
		min-block-size: 1200px;
	}
}

@media (max-width: 767px) {
	.vlz-zone-a-local-qa {
		padding: 0;
	}

	.vlz-zone-a-local-qa__panel-column,
	.vlz-zone-a-local-qa__travel {
		padding-inline: 0;
	}
}

@media (max-width: 767px) {
	.vlz-ctaunit--soft-panel {
		min-block-size: 0;
		padding: 48px 24px;
	}

	/*
	 * Visual Reopen — mobile: Reference's own two-column Elementor section
	 * stacks to a full-width single column below its own breakpoint (proven
	 * live at 390px: column width == section width there, vs. exactly half
	 * at both 1440 and 768). Without this reset the fixed 50% + min-inline-
	 * size:300px button overflowed off-screen at 390px. Matches this
	 * project's own existing mobile breakpoint for this variant.
	 */
	.wp-block-vlinzza-cta-unit.vlz-ctaunit--soft-panel h2,
	.wp-block-vlinzza-cta-unit.vlz-ctaunit--soft-panel p,
	.wp-block-vlinzza-cta-unit.vlz-ctaunit--soft-panel .vlz-contact-action {
		max-inline-size: none;
		margin-inline-start: 0;
	}
}

.vlz-ctaunit > * {
	margin-block: 0;
}

/* ------------------------- Predecessor fragments for Split-scroll/service-step — SEO Company Methodology (Transaction B) */

.vlz-seo-company-methodology {
	background: #f7f8fa;
	direction: rtl;
	padding: 88px 24px;
}

.vlz-seo-company-methodology .vlz-service-step {
	margin: 0;
	padding: 0 0 44px;
	position: relative;
}

@media (max-width: 1024px) {
	.vlz-seo-company-methodology {
		padding-block: 64px;
	}
}

@media (max-width: 767px) {
	.vlz-seo-company-methodology {
		padding: 48px 16px;
	}
}

/* ------------------- Predecessor fragments for Split-scroll/service-step — SEO Company Trust (Transaction C) */

.vlz-seo-company-trust .vlz-service-step {
	margin: 0;
	padding: 0 0 32px;
}

.vlz-seo-company-trust .vlz-service-step h3 {
	box-sizing: border-box;
	inline-size: 100%;
	margin: 0 0 14px;
	padding: 16px 24px;
	background: #eef6f7;
	color: #1e7dbf;
	font-size: 21px;
	line-height: 1.45;
}

.vlz-seo-company-trust .vlz-service-step p {
	margin: 0;
	color: #53646b;
	font-size: 17px;
	line-height: 1.75;
}

/* ------------------- Predecessor fragments for Split-scroll/service-step — SEO Company Differentiation (Transaction D) */

.vlz-seo-company-differentiation .vlz-service-step {
	margin: 0;
	padding: 0 0 32px;
}

.vlz-seo-company-differentiation .vlz-service-step h3 {
	box-sizing: border-box;
	inline-size: 100%;
	margin: 0 0 14px;
	padding: 16px 24px;
	background: #eef6f7;
	color: #1e7dbf;
	font-size: 21px;
	line-height: 1.45;
}

.vlz-seo-company-differentiation .vlz-service-step p {
	margin: 0;
	color: #53646b;
	font-size: 17px;
	line-height: 1.75;
}

/* ------------------------------------------------ Split-scroll service body */

.vlz-split-scroll-service-body {
	direction: rtl;
	padding: 65px 0 88px;
}

.vlz-split-scroll-service-body__container {
	max-width: 1140px;
	margin-inline: auto;
}

.vlz-split-scroll-service-body__grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	/*
	 * Zone 2 sticky root cause: `align-items: start` sized the sidebar grid
	 * item to its OWN content (benefits card + CTA card, back to back with no
	 * slack), so the CTA card's containing block (the sidebar) was never
	 * taller than the card itself and position:sticky had ~0px of travel
	 * range regardless of scroll position. `stretch` (the grid default)
	 * makes the sidebar match the taller main column's height instead,
	 * giving the sticky card real room to travel while the reader scrolls
	 * through the main column, matching the reference's split-scroll
	 * behaviour. Scoped to this one grid only; main column's own internal
	 * layout is unaffected because it already fills the row (it is the
	 * tallest track).
	 */
	align-items: stretch;
}

.vlz-split-scroll-service-body__main {
	min-inline-size: 0;
	padding-inline-start: 15px;
}

.vlz-split-scroll-service-body__sidebar {
	min-inline-size: 0;
	margin-block-start: -162px;
	padding-inline-end: 15px;
}

.vlz-split-scroll-service-body__image {
	margin: 0 0 24px;
}

/*
 * Visual Reopen — image geometry: the actual <img> pixel size (626x417) was
 * already identical to Reference/Legacy; the bug was alignment inside the
 * wider figure wrapper. In this RTL section `margin-inline-start` maps to
 * `margin-right`, which pushed the image flush to the LEFT (inline-end),
 * leaving a ~119px gap on the right. Reference/Legacy sit flush RIGHT
 * (inline-start) with the gap on the left. `margin-inline-end: auto` is the
 * RTL-correct equivalent that reproduces that.
 */
.vlz-split-scroll-service-body__image img {
	display: block;
	max-inline-size: 100%;
	margin-inline-end: auto;
}

.vlz-split-scroll-service-body__heading {
	margin: 24px 0;
	color: #333;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.53;
}

/*
 * Zone 3B: the Methodology heading is a larger size in the reference than
 * the Zone 3A intro heading, even though both share the base heading class
 * above. A second modifier class (added only to the Methodology instance,
 * Zone 3A's heading untouched) overrides just the size/line-height at equal
 * specificity, winning by later source order -- no !important needed.
 */
.vlz-split-scroll-service-body__heading--lg {
	font-size: 45px;
	line-height: 1.4;
}

.vlz-split-scroll-service-body :is(p, .vlz-service-step) {
	color: #666;
	font-size: 17px;
	line-height: 1.75;
}

.vlz-split-scroll-service-body .vlz-split-scroll-service-body__lead {
	color: #716c80;
	font-size: 22px;
	line-height: 1.82;
}

/* Zone 3B: Methodology intro paragraph -- same lead color/size family as
 * Zone 3A's lead paragraph, but the reference uses a different line-height
 * for this specific instance (34px at 22px vs 40px), so it gets its own
 * class rather than reusing/coupling with vlz-split-scroll-service-body__lead. */
.vlz-split-scroll-service-body .vlz-split-scroll-service-body__methodology-intro {
	color: #716c80;
	font-size: 22px;
	line-height: 1.545;
}

.vlz-split-scroll-service-body__actions {
	display: flex;
	gap: 20px;
	margin: 30px 0 42px;
}

.vlz-split-scroll-service-body__actions > * {
	flex: 1 1 0;
	margin: 0;
}

.vlz-split-scroll-service-body__actions .vlz-contact-action__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 58px;
	border: 1px solid #1e7dbf;
	/* Zone 3B, evidenced owner note: these Zone 3A CTA pair buttons were
	 * square (radius 0) while the project's established Section-2-wide
	 * rounded-button convention (see .vlz-ctaunit--soft-panel /
	 * --brand-sticky, both OWNER-APPROVED DEVIATIONs from the reference's
	 * own non-rounded per-button radii) was not applied here. Radius-only
	 * change, no content/order/text touched. */
	border-radius: var(--vlz-radius-pill, 999px);
	background: #1e7dbf;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.4s, color 0.4s;
}

.vlz-split-scroll-service-body__actions .vlz-contact-action--secondary-outline .vlz-contact-action__link {
	background: transparent;
	color: #000;
}

.vlz-split-scroll-service-body__actions .vlz-contact-action__link:hover,
.vlz-split-scroll-service-body__actions .vlz-contact-action__link:focus-visible {
	background: rgba(2, 1, 1, 0.59);
	color: #fff;
}

.vlz-split-scroll-service-body__actions .vlz-contact-action--secondary-outline .vlz-contact-action__link:hover,
.vlz-split-scroll-service-body__actions .vlz-contact-action--secondary-outline .vlz-contact-action__link:focus-visible {
	background: #1e7dbf;
	color: #fff;
}

/*
 * Zone 3C: Reference has no divider line between steps at all (verified via
 * screenshot -- plain whitespace, ~40px between a step's paragraph and the
 * next step's heading). The border-top divider here was a local addition,
 * not a parity match; removed. Spacing switched from padding+border to a
 * margin between consecutive steps so it doesn't add space before the
 * first step or after the last one.
 */
.vlz-service-step {
	scroll-margin-top: 180px;
}

.vlz-service-step + .vlz-service-step {
	margin-block-start: 40px;
}

.vlz-service-step h3 {
	margin: 0 0 20px;
	color: #333;
	font-size: 25px;
	font-weight: 600;
	line-height: 1.4;
}

/*
 * `.vlz-split-scroll-service-body :is(p, .vlz-service-step) { color:#666;
 * font-size:17px; line-height:1.75; }` (main-column body-copy rule) has
 * higher specificity (0,2,0: ancestor class + a compound :is() whose
 * highest argument is itself a class) than a plain `.vlz-service-step p`
 * (0,1,1), so it silently won here too -- same defect pattern already
 * fixed for the Zone 2 sticky card's paragraph. Re-scoped with the ancestor
 * class repeated to reach (0,2,1) and out-specify it without !important.
 */
.vlz-split-scroll-service-body .vlz-service-step p {
	margin: 0;
	color: #716c80;
	font-size: 18px;
	line-height: 1.89;
}

.vlz-split-scroll-service-body__benefits-card {
	background: #f2f2f3;
	border-radius: 5px;
	max-inline-size: 350px;
	margin-inline: auto;
	margin-block-end: 30px;
}

.vlz-split-scroll-service-body__sidebar-title {
	margin: 0;
	padding: 35px 15px 20px;
	color: #333;
	font-size: 24px;
	text-align: center;
}

.vlz-split-scroll-service-body__features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin: 0 auto;
	max-width: 350px;
	padding-block-end: 20px;
}

.vlz-split-scroll-service-body__features > * {
	min-inline-size: 0;
}

@media (max-width: 1024px) {
	.vlz-split-scroll-service-body {
		padding: 65px 0 88px;
	}

	.vlz-split-scroll-service-body__grid {
		grid-template-columns: 1fr;
	}

	.vlz-split-scroll-service-body__main {
		order: 1;
		padding-inline: 15px;
	}

	.vlz-split-scroll-service-body__sidebar {
		order: 2;
		margin-block-start: 40px;
		padding-inline: 15px;
	}
}

@media (max-width: 767px) {
	.vlz-split-scroll-service-body {
		padding: 0 16px 48px;
	}

	.vlz-split-scroll-service-body__container {
		max-width: 100%;
	}

	.vlz-split-scroll-service-body__main {
		order: 2;
		padding: 0;
	}

	.vlz-split-scroll-service-body__sidebar {
		order: 1;
		margin: 0 0 36px;
		padding: 0;
	}

	.vlz-split-scroll-service-body__heading {
		font-size: 26px;
	}

	.vlz-split-scroll-service-body__actions {
		flex-direction: column;
		gap: 20px;
	}
}

/* ---------------------------------------- SEO Company — Methodology Variant (Transaction B) */

.vlz-seo-company-methodology__columns {
	align-items: stretch;
	column-gap: 0;
	margin: 0 auto;
	max-width: 1383px;
}

.vlz-seo-company-methodology__columns > .vlz-split-scroll-service-body__main {
	flex-basis: 58% !important;
	min-inline-size: 0;
	padding: 0;
	padding-inline-end: 32px;
}

.vlz-seo-company-methodology__columns > .vlz-seo-company-methodology__cta-column {
	align-self: start;
	flex-basis: 42% !important;
	min-inline-size: 0;
	padding: 0;
	position: sticky;
	top: 116px;
}

.vlz-seo-company-methodology .wp-block-vlinzza-cta-unit.vlz-ctaunit--soft-panel {
	background: #0f467f;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 18px;
	box-shadow: 0 18px 42px rgba(23, 75, 91, .11);
	padding: 34px;
}

.vlz-seo-company-methodology__image img {
	display: block;
	height: auto;
	margin: 0 auto;
	max-height: 360px;
	max-width: 100% !important;
	width: auto !important;
}

.vlz-seo-company-methodology__actions {
	display: flex;
	flex-wrap: nowrap !important;
	gap: 12px;
	justify-content: stretch;
}

.vlz-seo-company-methodology__actions > .vlz-contact-action {
	flex: 1 1 0;
	margin: 0;
	min-inline-size: 0;
	width: auto !important;
}

.vlz-seo-company-methodology__actions .vlz-contact-action__link {
	align-items: center;
	display: flex;
	justify-content: center;
	min-block-size: 54px;
	text-align: center;
	text-decoration: none !important;
	white-space: nowrap;
}

.vlz-seo-company-methodology__actions .vlz-contact-action__link:visited,
.vlz-seo-company-methodology__actions .vlz-contact-action__link:hover,
.vlz-seo-company-methodology__actions .vlz-contact-action__link:focus,
.vlz-seo-company-methodology__actions .vlz-contact-action__link:focus-visible {
	text-decoration: none !important;
}

.vlz-seo-company-methodology__actions .vlz-contact-action__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.vlz-seo-company-methodology .vlz-split-scroll-service-body__methodology-intro {
	margin-block-end: 52px;
}

.vlz-seo-company-methodology .vlz-service-step + .vlz-service-step {
	margin-block-start: 4px;
}

.vlz-seo-company-methodology .vlz-service-step:not(:last-child)::after {
	background: #d6e2e7;
	content: "";
	inset-block: auto 0;
	inset-inline: 0;
	position: absolute;
	height: 1px;
	width: auto;
}

.vlz-seo-company-methodology .vlz-seo-company-methodology__number {
	display: none;
}

.vlz-seo-company-methodology .vlz-service-step h3 {
	color: #1e7dbf;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
	margin: 0 0 14px;
}

.vlz-seo-company-methodology .vlz-service-step p:not(.vlz-seo-company-methodology__number) {
	color: #53646b;
	font-size: 18px;
	line-height: 1.85;
	margin: 0;
}

@media (max-width: 1024px) {
	.vlz-seo-company-methodology__columns {
		flex-direction: column;
		row-gap: 44px;
	}

	.vlz-seo-company-methodology__columns > .vlz-split-scroll-service-body__main,
	.vlz-seo-company-methodology__columns > .vlz-seo-company-methodology__cta-column {
		flex-basis: 100% !important;
		width: 100%;
	}

	.vlz-seo-company-methodology__columns > .vlz-split-scroll-service-body__main {
		padding-inline-end: 0;
	}

	.vlz-seo-company-methodology__columns > .vlz-split-scroll-service-body__main {
		order: 1;
	}

	.vlz-seo-company-methodology__columns > .vlz-seo-company-methodology__cta-column {
		order: 2;
		position: static;
	}

	.vlz-seo-company-methodology .vlz-split-scroll-service-body__methodology-intro {
		margin-block-end: 40px;
	}

	.vlz-seo-company-methodology .vlz-service-step {
		padding-block-end: 36px;
	}
}

@media (max-width: 767px) {
	.vlz-seo-company-methodology .wp-block-vlinzza-cta-unit.vlz-ctaunit--soft-panel {
		padding: 26px;
	}

	.vlz-seo-company-methodology__image img {
		max-width: 88%;
		width: 88%;
	}

	.vlz-seo-company-methodology .vlz-service-step {
		padding-block-end: 32px;
	}

	.vlz-seo-company-methodology .vlz-service-step h3 {
		font-size: 20px;
	}

	.vlz-seo-company-methodology .vlz-service-step p:not(.vlz-seo-company-methodology__number) {
		font-size: 16px;
	}

	.vlz-seo-company-methodology__actions {
		flex-direction: column;
	}

	.vlz-seo-company-methodology .vlz-split-scroll-service-body__methodology-intro {
		margin-block-end: 36px;
	}
}

/* ----------------------------------------------------- Section Title Band */

.vlz-section-title-band {
	position: relative;
	isolation: isolate;
	overflow: clip;
	background-image: var(--vlz-bg-contentmarketingservice, url("/wp-content/uploads/2021/06/bgcontentMarketingservice.jpg"));
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 83px 0 140px;
}

.vlz-section-title-band::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(2, 1, 1);
	content: "";
	opacity: 0.56;
}

.vlz-section-title-band__container {
	max-width: 1140px;
	margin-inline: auto;
}

/*
 * App verification (2026-08-10) found Elementor's global Kit CSS injects
 * `.elementor-kit-9 h2 { color:...; font-size:22px; font-weight:bold; }`
 * site-wide (specificity 0,1,1), which beat this rule's original plain
 * `.vlz-section-title-band__title` (0,1,0) on App. Not a Local-vs-App file
 * difference -- the same class of load-order issue already fixed elsewhere
 * in this project (Zone 2 sticky card, Zone 3C step paragraph). Fixed the
 * same way: a repeated ancestor/self class (Gutenberg always adds
 * `wp-block-heading` to `core/heading` output) reaches (0,2,0) and wins
 * without `!important`.
 */
.wp-block-heading.vlz-section-title-band__title {
	margin: 0;
	color: #fff;
	font-size: 36px;
	font-weight: 300;
	line-height: 1.4;
	/* Alignment is owned by Gutenberg's native block-level text-align control
	   (the wp:heading "textAlign":"center" attribute -> .has-text-align-center,
	   a core WordPress style). This component intentionally does not declare
	   its own text-align, so an editor's alignment toolbar choice always wins
	   deterministically instead of racing this rule on CSS load order. */
}

@media (max-width: 767px) {
	.vlz-section-title-band {
		padding: 0;
	}

	.wp-block-heading.vlz-section-title-band__title {
		font-size: 32px;
	}
}

/* ------------------------------------------------------------ Benefit Cards */
/*
 * Section 4 Zone 1 (COMPONENT-MAPPING-SEO-EXPERT-SECTION-4.md §12/§13/§18).
 * `.vlz-benefit-cards` owns the negative-margin overlap with the preceding
 * Section Title Band -- same mechanism as that Pattern's own overlap
 * precedent (a plain `margin-top` on the section itself, never a compensating
 * change on the section before it). No rule below touches
 * `.vlz-split-scroll-service-body*` / `.vlz-section-title-band*` /
 * `.vlz-dark-image-hero*`.
 */

.vlz-benefit-cards {
	position: relative;
	margin-block-start: -115px;
	padding: 0 0 35px;
}

.vlz-benefit-cards__container {
	max-width: 1140px;
	margin-inline: auto;
}

/*
 * Grid mechanics are authored here rather than relied on from Gutenberg's own
 * generated grid CSS -- same convention already used for
 * `.vlz-split-scroll-service-body__features` (also a `core/group`
 * `layout:{type:"grid"}` block). Column-gap 0 / row-gap 20px reproduces the
 * reference's measured 0px horizontal gap between the three former Elementor
 * columns and 20px vertical gap between the two stacked cards per column.
 */
.vlz-benefit-cards__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 0;
	row-gap: 20px;
}

.vlz-benefit-cards__card {
	background: #fff;
	border: 1px solid #f5f5f5;
	border-radius: 0;
	padding: 50px 40px 25px;
	text-align: center;
}

.vlz-benefit-cards__card .vlz-iconbox {
	align-items: center;
	gap: 0;
}

.vlz-benefit-cards__card .vlz-iconbox__icon {
	inline-size: 99px;
	block-size: 99px;
	margin: 0 auto 20px;
	border: 9px solid #fff;
	border-radius: 50%;
	background: #f5f5f5;
	color: var(--vlz-color-primary, #1e7dbf);
	box-shadow: 0 0 2px rgb(39, 49, 113);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.vlz-benefit-cards__card .vlz-icon {
	inline-size: 44px;
	block-size: 44px;
}

.vlz-benefit-cards__card .vlz-iconbox__title {
	margin: 0 0 12px;
	color: var(--vlz-color-heading, #1a1a1a);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
}

.vlz-benefit-cards__card .vlz-iconbox__text {
	margin: 0;
	color: var(--vlz-color-text-muted, #555);
	font-size: 15px;
	line-height: 1.67;
}

/*
 * Hover contract (Component Mapping §9): one unified rule wins for all six
 * cards -- icon-circle color inversion, 6/6, not the reference's inconsistent
 * 3/6. CSS-only, no front-end JavaScript.
 */
.vlz-benefit-cards__card:hover .vlz-iconbox__icon {
	background: var(--vlz-color-primary, #1e7dbf);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.vlz-benefit-cards__card .vlz-iconbox__icon {
		transition: none;
	}
}

/*
 * Column-collapse breakpoint is deliberately separate from the overlap/
 * actions-row breakpoint below it -- Visual Discovery measured the cards
 * already at 1 column at 768px itself, unlike Section 3's own "Tablet =
 * Desktop" behaviour.
 */
@media (max-width: 1024px) {
	.vlz-benefit-cards__container {
		padding-inline: 15px;
	}
}

/*
 * Live LocalWP QA finding: Core's `layout:{type:"grid",columnCount:3}` support
 * prints its own unconditional `.wp-container-core-group-is-layout-*{grid-
 * template-columns:repeat(3,...)}` rule via `core-block-supports-inline-css`,
 * equal specificity (0,1,0) to a plain `.vlz-benefit-cards__grid` override and
 * placed after this stylesheet in `<head>` -- it wins by source order at 768px
 * regardless of the media query matching. Same class of defect already fixed
 * elsewhere in this project (Section 3's Elementor-Kit heading rule, Zone 2's
 * sticky card, Zone 3C's step paragraph): a repeated ancestor class reaches
 * (0,2,0) and wins deterministically without `!important`.
 */
@media (max-width: 768px) {
	.vlz-benefit-cards__container .vlz-benefit-cards__grid {
		grid-template-columns: 1fr;
	}
}

/*
 * T2-R04 (T2-ISS-010): below 768px the Section Title Band has zero padding, so
 * its height is only its heading (1-3+ lines) and the fixed overlap used to
 * cover the heading. The overlap is declared once (`--vlz-band-overlap`) and the
 * band that is immediately followed by a (non-flush) Benefit Cards section
 * reserves exactly that overlap plus the same 25px clearance the 768px+ band
 * padding gives (140px - 115px), whatever the heading height. Standalone bands
 * and `--flush-band` sections are untouched.
 */
@media (max-width: 767px) {
	.vlz-section-title-band,
	.vlz-benefit-cards {
		--vlz-band-overlap: 90px;
	}

	.vlz-benefit-cards {
		margin-block-start: calc(-1 * var(--vlz-band-overlap));
	}

	.vlz-section-title-band:has(+ .vlz-benefit-cards:not(.vlz-benefit-cards--flush-band)) {
		padding-block-end: calc(var(--vlz-band-overlap) + 25px);
	}
}

/*
 * TPL-B-01 Batch 2 LEVEL 2 -- Owner visual-regression repair (Content Writing
 * Company / Brand Identity Logo Design). On these two pages the preceding
 * Section Title Band is a bare Legacy-faithful heading only (~45px tall, no
 * paragraph/CTA content -- verified against Legacy, not a content-porting
 * defect), far shorter than the ~150-270px band the shared `-115px/-90px`
 * overlap above assumes (tuned against LinkedIn Ads/Content Marketing
 * Company's taller title bands, both of which carry a paragraph + CTA row).
 * At the mismatched height the fixed overlap rides the card grid up over the
 * title-band heading and touches the end of the Split-Scroll Service Body
 * above it. A scoped modifier removes the overlap ONLY where this second
 * className is present; the base `.vlz-benefit-cards` rule (and therefore
 * LinkedIn Ads/Content Marketing Company/Social Media Management, none of
 * which carry this modifier) is untouched.
 */
.vlz-benefit-cards.vlz-benefit-cards--flush-band {
	margin-block-start: 0;
}

/*
 * Zone 2 -- contact-action row. Same live convention as
 * `.vlz-split-scroll-service-body__actions` (flex row, 2 full-width
 * `vlinzza/contact-action` buttons, rounded-pill OWNER-APPROVED DEVIATION,
 * stack only at <=767px) -- values reused, not reinvented, per Component
 * Mapping §11/§12. No `vlinzza/contact-action` attribute/render touched.
 */
.vlz-benefit-cards__actions {
	display: flex;
	gap: 20px;
	margin-block-start: 30px;
}

.vlz-benefit-cards__actions > * {
	flex: 1 1 0;
	margin: 0;
}

.vlz-benefit-cards__actions .vlz-contact-action__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 58px;
	border: 1px solid var(--vlz-color-primary, #1e7dbf);
	border-radius: var(--vlz-radius-pill, 999px);
	background: var(--vlz-color-primary, #1e7dbf);
	color: #fff;
	text-decoration: none;
	transition: background-color 0.4s, color 0.4s;
}

.vlz-benefit-cards__actions .vlz-contact-action--secondary-outline .vlz-contact-action__link {
	background: transparent;
	color: #000;
}

.vlz-benefit-cards__actions .vlz-contact-action__link:hover,
.vlz-benefit-cards__actions .vlz-contact-action__link:focus-visible {
	background: rgba(2, 1, 1, 0.59);
	color: #fff;
}

.vlz-benefit-cards__actions .vlz-contact-action--secondary-outline .vlz-contact-action__link:hover,
.vlz-benefit-cards__actions .vlz-contact-action--secondary-outline .vlz-contact-action__link:focus-visible {
	background: var(--vlz-color-primary, #1e7dbf);
	color: #fff;
}

@media (max-width: 767px) {
	.vlz-benefit-cards__actions {
		flex-direction: column;
		gap: 20px;
	}
}

/*
 * Local-only Section 5 Zones B/C/D QA composition. This scopes the reference
 * content-column treatment to its fixture and leaves the reusable service-step
 * and icon-box component contracts unchanged for existing sections.
 */
.vlz-section5-content-local-qa {
	direction: rtl;
	padding-block: 20px 88px;
}

.vlz-section5-content-local-qa__shell {
	inline-size: min(1140px, 100%);
	margin-inline: auto;
}

.vlz-section5-content-local-qa__content {
	box-sizing: border-box;
	inline-size: 66.666667%;
	min-inline-size: 0;
	margin-inline-start: auto;
}

.vlz-section5-content-local-qa__intro {
	margin: 0 0 40px;
	color: #333;
	font-size: 24px;
	font-weight: 700;
	text-align: right;
}

.vlz-section5-content-local-qa .vlz-service-step h3 {
	color: #333;
	font-size: 22px;
	font-weight: 700;
	line-height: 30.8px;
	text-align: right;
}

.vlz-section5-content-local-qa .vlz-service-step p {
	color: #716c80;
	font-size: 18px;
	line-height: 34px;
	text-align: right;
}

.vlz-section5-content-local-qa .vlz-iconbox {
	margin-block-start: 40px;
	align-items: flex-start;
}

.vlz-section5-content-local-qa .vlz-iconbox__icon {
	inline-size: auto;
	block-size: auto;
	margin: 0 0 12px;
	border-radius: 0;
	background: transparent;
	color: #26b16d;
}

.vlz-section5-content-local-qa .vlz-iconbox__text {
	color: #716c80;
	font-size: 18px;
	line-height: 34px;
	text-align: right;
}

@media (max-width: 1024px) {
	.vlz-section5-content-local-qa__content {
		inline-size: 100%;
	}
}

@media (max-width: 767px) {
	.vlz-section5-content-local-qa {
		padding-block: 0;
	}
}

/*
 * Local-only Section 5 Zone E QA composition. The parent owns the row/stack
 * behavior and visual context; contact-action retains its existing slots,
 * appearances, renderer, and Boost2 data resolution.
 */
.vlz-section5-zone-e-local-qa {
	box-sizing: border-box;
	direction: rtl;
	inline-size: min(760px, 100%);
	margin-inline: auto;
}

.vlz-section5-zone-e-local-qa__actions {
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;
	inline-size: calc(100% - 50px);
	margin-inline: auto;
}

.vlz-section5-zone-e-local-qa__actions > * {
	align-self: flex-start;
	flex: 1 1 0;
	min-inline-size: 0;
	margin: 0;
}

.vlz-section5-zone-e-local-qa__actions .vlz-contact-action__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: 76px;
	border: 1px solid #1e7dbf;
	border-radius: 27px;
	color: #fff;
	font-size: 21px;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}

.vlz-section5-zone-e-local-qa__actions .vlz-contact-action--primary-filled .vlz-contact-action__link {
	border: 0;
	background: #1e7dbf;
}

.vlz-section5-zone-e-local-qa__actions .vlz-contact-action--secondary-outline .vlz-contact-action__link {
	min-block-size: 80px;
	background: transparent;
	color: #000;
	font-size: 23px;
}

.vlz-section5-zone-e-local-qa__actions .vlz-contact-action--primary-filled .vlz-contact-action__link:hover,
.vlz-section5-zone-e-local-qa__actions .vlz-contact-action--primary-filled .vlz-contact-action__link:focus-visible {
	background: rgba(2, 1, 1, 0.59);
	color: #fff;
}

.vlz-section5-zone-e-local-qa__actions .vlz-contact-action--secondary-outline .vlz-contact-action__link:hover,
.vlz-section5-zone-e-local-qa__actions .vlz-contact-action--secondary-outline .vlz-contact-action__link:focus-visible {
	background: #1e7dbf;
	color: #fff;
}

@media (max-width: 1024px) {
	.vlz-section5-zone-e-local-qa__actions {
		inline-size: calc(100% - 30px);
	}
}

@media (max-width: 767px) {
	.vlz-section5-zone-e-local-qa__actions {
		flex-direction: column;
		gap: 16px;
	}
}

/*
 * ------------------------------------------------- LinkedIn Ads S02 "Professional
 * Benefits" cards (TPL-B-01 Batch 2 LEVEL 2 pilot -- Owner visual refinement).
 * Same `vlinzza/icon-box` component S04's own cards use (`.vlz-benefit-cards__card`
 * above is the direct visual model this reuses: centered icon-circle, centered
 * heading, sharp corners, no border-radius). CSS-only -- no JS, no per-card
 * background images, no new component. Card differentiation is 4 subtle tints
 * derived from the theme's own existing color tokens (theme.json `primary`/
 * `accent`/`ink`), not arbitrary new colors.
 */
.vlz-linkedin-pro-benefits {
	column-gap: 20px;
	row-gap: 20px;
}

.vlz-linkedin-pro-benefits .vlz-iconbox {
	align-items: center;
	text-align: center;
	gap: 0;
	height: 100%;
	padding: 36px 28px 30px;
	border: 1px solid rgba(27, 37, 56, 0.06);
	box-sizing: border-box;
}

.vlz-linkedin-pro-benefits .vlz-iconbox__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 76px;
	block-size: 76px;
	margin: 0 auto 18px;
	border: 7px solid #fff;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7);
	color: #1e7dbf; /* theme.json primary */
	box-shadow: 0 0 2px rgb(39, 49, 113);
}

.vlz-linkedin-pro-benefits .vlz-icon {
	inline-size: 36px;
	block-size: 36px;
}

.vlz-linkedin-pro-benefits .vlz-iconbox__title {
	margin: 0 0 10px;
	color: #1b2538; /* theme.json ink */
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

/*
 * Body copy is intentionally NOT forced center -- long Arabic paragraphs read
 * better ragged-edge (start-aligned) than centered; only the icon and the
 * short heading above are centered, per the task's own readability rule.
 */
.vlz-linkedin-pro-benefits .vlz-iconbox__text {
	margin: 0;
	color: #66707c; /* theme.json text-muted */
	font-size: 14.5px;
	line-height: 1.7;
	text-align: right;
}

/* Four subtle, distinct tints -- all derived from the existing primary/accent/ink hues. */
.vlz-linkedin-benefit--1 { background: #eaf3fb; } /* very light blue (near theme.json primary-soft) */
.vlz-linkedin-benefit--2 { background: #e7f7f5; } /* very light blue-cyan */
.vlz-linkedin-benefit--3 { background: #e6f8f3; } /* very light cyan-teal (near theme.json accent) */
.vlz-linkedin-benefit--4 { background: #eef1fb; } /* very light blue-violet (near theme.json ink, lightened) */

@media (max-width: 767px) {
	.vlz-linkedin-pro-benefits {
		grid-template-columns: 1fr !important;
	}

	.vlz-linkedin-pro-benefits .vlz-iconbox {
		padding: 28px 20px 24px;
	}
}

/*
 * ------------------------------------------------- Generic reusable 4-item icon-benefit
 * group (TPL-B-01 Batch 2 LEVEL 2 -- Content Marketing Company). Same visual treatment
 * as `.vlz-linkedin-pro-benefits` above (centered icon-circle, centered heading,
 * un-forced RTL body, sharp corners) but under a family-wide reusable class name, not a
 * page-specific one, so Content Writing Company / Brand Identity Logo Design can reuse it
 * directly if their own Legacy S02 turns out to contain the same 4-item shape. The
 * LinkedIn-specific rule above is left untouched (additive-only, 0 regression risk to the
 * already-approved LinkedIn Ads page).
 */
.vlz-icon-benefit-group {
	column-gap: 20px;
	row-gap: 20px;
}

.vlz-icon-benefit-group .vlz-iconbox {
	align-items: center;
	text-align: center;
	gap: 0;
	height: 100%;
	padding: 36px 28px 30px;
	border: 1px solid rgba(27, 37, 56, 0.06);
	box-sizing: border-box;
}

.vlz-icon-benefit-group .vlz-iconbox__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 76px;
	block-size: 76px;
	margin: 0 auto 18px;
	border: 7px solid #fff;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7);
	color: #1e7dbf; /* theme.json primary */
	box-shadow: 0 0 2px rgb(39, 49, 113);
}

.vlz-icon-benefit-group .vlz-icon {
	inline-size: 36px;
	block-size: 36px;
}

.vlz-icon-benefit-group .vlz-iconbox__title {
	margin: 0 0 10px;
	color: #1b2538; /* theme.json ink */
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

.vlz-icon-benefit-group .vlz-iconbox__text {
	margin: 0;
	color: #66707c; /* theme.json text-muted */
	font-size: 14.5px;
	line-height: 1.7;
	text-align: right;
}

.vlz-icon-benefit--1 { background: #eaf3fb; }
.vlz-icon-benefit--2 { background: #e7f7f5; }
.vlz-icon-benefit--3 { background: #e6f8f3; }
.vlz-icon-benefit--4 { background: #eef1fb; }

@media (max-width: 767px) {
	.vlz-icon-benefit-group {
		grid-template-columns: 1fr !important;
	}

	.vlz-icon-benefit-group .vlz-iconbox {
		padding: 28px 20px 24px;
	}
}

/* ------------------- Predecessor fragments for Trust Methodology Sticky — SEO Company Trust (Transaction C) */

.vlz-seo-company-trust {
	padding: 80px 0 88px;
	background: #fff;
}

.vlz-seo-company-trust__container {
	max-inline-size: 1280px;
	padding-inline: 20px;
}

.vlz-seo-company-trust__grid {
	direction: ltr;
	grid-template-columns: minmax(360px, .6fr) minmax(0, 1fr);
	column-gap: 56px;
	align-items: start;
}

.vlz-seo-company-trust__trust,
.vlz-seo-company-trust__content {
	padding-inline: 0;
}

.vlz-seo-company-trust__intro {
	margin: 0 0 16px;
	color: #283e71;
	font-size: clamp(27px, 2.25vw, 34px);
	line-height: 1.35;
}

.vlz-seo-company-trust__lead {
	margin: 0 0 48px;
	color: #53646b;
	font-size: 17px;
	line-height: 1.8;
}

@media (max-width: 1024px) {
	.vlz-seo-company-trust {
		padding-block: 64px;
	}

	.vlz-seo-company-trust__grid {
		direction: rtl;
		grid-template-columns: minmax(0, 1fr);
		row-gap: 44px;
	}
}

@media (max-width: 767px) {
	.vlz-seo-company-trust {
		padding: 48px 16px;
	}

	.vlz-seo-company-trust__intro {
		font-size: 25px;
	}

	.vlz-seo-company-trust__lead,
	.vlz-seo-company-trust .vlz-service-step p {
		font-size: 16px;
	}
}

/* ------------------- Predecessor fragments for Trust Methodology Sticky — SEO Company Differentiation (Transaction D) */

.vlz-seo-company-differentiation {
	padding: 80px 0 88px;
	background: #fff;
}

.vlz-seo-company-differentiation__container {
	max-inline-size: 1280px;
	padding-inline: 20px;
}

.vlz-seo-company-differentiation__grid {
	direction: rtl;
	grid-template-columns: minmax(0, 1fr) minmax(360px, .6fr);
	column-gap: 56px;
	align-items: start;
}

.vlz-seo-company-differentiation__lead {
	margin: 0 0 48px;
	color: #53646b;
	font-size: 17px;
	line-height: 1.8;
}

@media (max-width: 1024px) {
	.vlz-seo-company-differentiation {
		padding-block: 64px;
	}

	.vlz-seo-company-differentiation__grid {
		grid-template-columns: 1fr;
		row-gap: 44px;
	}

	.vlz-seo-company-differentiation__content {
		order: 1;
	}

	.vlz-seo-company-differentiation__trust {
		order: 2;
	}
}

@media (max-width: 767px) {
	.vlz-seo-company-differentiation {
		padding: 48px 16px;
	}

	.vlz-seo-company-differentiation__lead,
	.vlz-seo-company-differentiation .vlz-service-step p {
		font-size: 16px;
	}
}

/* ---------------------------------------------------------------- Trust Methodology Sticky */

/*
 * Final, reusable composition for a sticky trust offer beside an RTL
 * methodology/value column. The existing trust-sticky tone owns the card;
 * this pattern owns only section geometry, content styling, and its closing
 * contact row.
 */
.vlz-trust-methodology {
	direction: rtl;
	padding-block: 20px 88px;
}

.vlz-trust-methodology__container {
	max-inline-size: 1140px;
	margin-inline: auto;
}

.vlz-trust-methodology__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	align-items: stretch;
}

.vlz-trust-methodology__trust,
.vlz-trust-methodology__content {
	min-inline-size: 0;
}

.vlz-trust-methodology__trust {
	padding-inline: 15px;
}

.vlz-trust-methodology__intro {
	margin: 0 0 40px;
	color: #333;
	font-size: 24px;
	font-weight: 700;
	text-align: right;
}

.vlz-trust-methodology .vlz-service-step h3 {
	color: #333;
	font-size: 22px;
	font-weight: 700;
	line-height: 30.8px;
	text-align: right;
}

.vlz-trust-methodology .vlz-service-step p {
	color: #716c80;
	font-size: 18px;
	line-height: 34px;
	text-align: right;
}

.vlz-trust-methodology .vlz-iconbox {
	margin-block-start: 40px;
	align-items: flex-start;
}

.vlz-trust-methodology .vlz-iconbox__icon {
	inline-size: auto;
	block-size: auto;
	margin: 0 0 12px;
	border-radius: 0;
	background: transparent;
	color: #26b16d;
}

.vlz-trust-methodology .vlz-iconbox__text {
	color: #716c80;
	font-size: 18px;
	line-height: 34px;
	text-align: right;
}

.vlz-trust-methodology__actions {
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;
	inline-size: calc(100% - 50px);
	margin-inline: auto;
}

.vlz-trust-methodology__actions > * {
	align-self: flex-start;
	flex: 1 1 0;
	min-inline-size: 0;
	margin: 0;
}

.vlz-trust-methodology__actions .vlz-contact-action__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: 76px;
	border: 1px solid #1e7dbf;
	border-radius: 27px;
	color: #fff;
	font-size: 21px;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}

.vlz-trust-methodology__actions .vlz-contact-action--primary-filled .vlz-contact-action__link {
	border: 0;
	background: #1e7dbf;
}

.vlz-trust-methodology__actions .vlz-contact-action--secondary-outline .vlz-contact-action__link {
	min-block-size: 80px;
	background: transparent;
	color: #000;
	font-size: 23px;
}

.vlz-trust-methodology__actions .vlz-contact-action--primary-filled .vlz-contact-action__link:hover,
.vlz-trust-methodology__actions .vlz-contact-action--primary-filled .vlz-contact-action__link:focus-visible {
	background: rgba(2, 1, 1, 0.59);
	color: #fff;
}

.vlz-trust-methodology__actions .vlz-contact-action--secondary-outline .vlz-contact-action__link:hover,
.vlz-trust-methodology__actions .vlz-contact-action--secondary-outline .vlz-contact-action__link:focus-visible {
	background: #1e7dbf;
	color: #fff;
}

@media (max-width: 1024px) {
	.vlz-trust-methodology__grid {
		grid-template-columns: 1fr;
	}

	.vlz-trust-methodology__trust {
		order: 1;
		padding-inline: 15px;
	}

	.vlz-trust-methodology__content {
		order: 2;
	}

	.vlz-trust-methodology__actions {
		inline-size: calc(100% - 30px);
	}
}

@media (max-width: 767px) {
	.vlz-trust-methodology {
		padding-block: 0;
	}

	.vlz-trust-methodology__container {
		max-inline-size: 100%;
	}

	.vlz-trust-methodology__trust {
		padding-inline: 0;
	}

	.vlz-trust-methodology__actions {
		flex-direction: column;
		gap: 16px;
	}
}

/* ---------------------------------------------- SEO Company — Trust Variant (Transaction C) */

.vlz-seo-company-trust__trust,
.vlz-seo-company-trust__content {
	direction: rtl;
}

.vlz-seo-company-trust .vlz-service-step + .vlz-service-step {
	padding-block-start: 4px;
}

.vlz-seo-company-trust .vlz-service-step:not(:last-child)::after {
	content: none;
}

.vlz-seo-company-trust .vlz-ctaunit--trust-sticky {
	max-inline-size: none;
	min-block-size: 0;
	padding: 48px 34px;
	background-image: none;
}

.vlz-seo-company-trust .vlz-ctaunit--trust-sticky h3 {
	margin: 0 0 16px;
	font-size: 27px;
	font-weight: 700;
	line-height: 1.35;
}

@media (max-width: 1024px) {
	.vlz-seo-company-trust .vlz-seo-company-trust__content {
		order: 1;
	}

	.vlz-seo-company-trust .vlz-seo-company-trust__trust {
		order: 2;
	}

	.vlz-seo-company-trust .vlz-ctaunit--trust-sticky {
		padding: 42px 34px;
	}
}

@media (max-width: 767px) {
	.vlz-seo-company-trust__container {
		padding-inline: 0;
	}

	.vlz-seo-company-trust .vlz-service-step {
		padding-block-end: 28px;
	}

	.vlz-seo-company-trust .vlz-ctaunit--trust-sticky {
		min-block-size: 0;
		padding: 36px 24px;
	}

	.vlz-seo-company-trust .vlz-ctaunit--trust-sticky h3 {
		font-size: 24px;
	}

	.vlz-seo-company-trust .vlz-ctaunit--trust-sticky .vlz-contact-action__link {
		white-space: normal;
	}
}

/*
 * VLINZZA — Dark CTA Band
 *
 * Generic, reusable pattern presentation. The two existing contact-action
 * instances retain their Boost2 destination ownership; this scope only owns
 * the shared visual rail, shell, and responsive composition.
 */
.vlz-dark-cta-band {
	position: relative;
	margin-block: 0;
	padding-block: 100px 160px;
	background-color: #000;
	color: #fff;
	direction: rtl;
}

.vlz-dark-cta-band::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: rgba(2, 1, 1, 0.7);
	background-image: var(--vlz-bg-khabir-seo, url("/wp-content/uploads/2025/05/خبير-سيو-فلينزا-الصدارة-لا-تنتظر-احدا-1.png"));
	background-size: auto;
	background-position: 0% 0%;
	background-repeat: repeat;
	background-attachment: scroll;
	opacity: 0.25;
	content: "";
	pointer-events: none;
}

/*
 * Page-scoped background-image override for LinkedIn Ads (TPL-B-01 Batch 2 LEVEL 2
 * Pilot). Legacy's own S06 background is a different asset than the shared default
 * above (confirmed via computed `background-image` on Legacy's own
 * `.elementor-background-overlay`); overlay color/opacity and size/position/repeat
 * are already identical to the shared rule, so only the image URL is overridden
 * here. Additive only -- the shared `.vlz-dark-cta-band::before` default above and
 * every other family page using it (unmodified) are untouched.
 */
.vlz-dark-cta-band--linkedin::before {
	background-image: var(--vlz-bg-contentmk, url("/wp-content/uploads/2021/07/bgcontentmk.jpg"));
}

/*
 * Page-scoped background-image override for Content Writing Company (TPL-B-01
 * Batch 2 LEVEL 2 -- Owner Visual Review Corrections). This page's build source
 * was cloned from Page 128 (SEO Service Provider pilot), which never had its
 * own `.vlz-dark-cta-band` wrapper className touched -- it inherited the
 * shared default `::before` background above verbatim, which is the SEO
 * Service Provider's own SEO-branded asset (correct on that page, wrong here).
 * Live-verified against Legacy's own `.elementor-background-overlay` on
 * https://legacy.vlinzza.com/content-writing-company/: Legacy's actual S06
 * background is the SAME asset already used by the LinkedIn Ads override
 * above (`bgcontentmk.jpg`) -- reused here, not duplicated. Overlay
 * color/opacity/size/position/repeat already match the shared rule; only the
 * image URL differs. Additive only -- the shared default and every other
 * family page using it unmodified are untouched.
 */
.vlz-dark-cta-band--content-writing::before {
	background-image: var(--vlz-bg-contentmk, url("/wp-content/uploads/2021/07/bgcontentmk.jpg"));
}

/*
 * Page-scoped background-image override for Brand Identity Logo Design
 * (TPL-B-01 Fresh Rebuild, 2026-08-16). Live-verified via getComputedStyle
 * on https://legacy.vlinzza.com/brand-identity-logo-design/'s own
 * `.elementor-background-overlay`: Legacy's actual S06 background is the
 * SAME asset already used by the LinkedIn Ads and Content Writing Company
 * overrides above (`bgcontentmk.jpg`) -- reused, not duplicated. Overlay
 * color/opacity/size/position/repeat already match the shared rule; only
 * the image URL differs. Additive only -- the shared default and every
 * other family page using it unmodified are untouched.
 */
.vlz-dark-cta-band--brand-identity::before {
	background-image: var(--vlz-bg-contentmk, url("/wp-content/uploads/2021/07/bgcontentmk.jpg"));
}

/*
 * Page-scoped background-image override for Social Media Management (TPL-B-01
 * Fresh Rebuild, 2026-08-16). Live-verified via getComputedStyle on
 * https://legacy.vlinzza.com/social-media-management-service/'s own
 * `.elementor-background-overlay`: Legacy's actual S06 background is the
 * SAME asset already used by the LinkedIn Ads / Content Writing Company /
 * Brand Identity Logo Design overrides above (`bgcontentmk.jpg`) -- reused,
 * not duplicated. Overlay color/opacity/size/position/repeat already match
 * the shared rule; only the image URL differs. Additive only -- the shared
 * default and every other family page using it unmodified are untouched.
 */
.vlz-dark-cta-band--social-media-management::before {
	background-image: var(--vlz-bg-contentmk, url("/wp-content/uploads/2021/07/bgcontentmk.jpg"));
}

/*
 * Page-scoped background-image override for Content Marketing Company
 * (TPL-B-01 Batch 2 LEVEL 2 -- Final Pre-Sync Fixes, Fix A). Live-verified
 * via getComputedStyle on
 * https://legacy.vlinzza.com/content-marketing-company/'s own
 * `.elementor-background-overlay` for the real dark CTA band section:
 * Legacy's actual S06 background is the SAME asset already used by the
 * LinkedIn Ads / Content Writing Company / Brand Identity Logo Design /
 * Social Media Management overrides above (`bgcontentmk.jpg`) -- reused, not
 * duplicated. Overlay color/opacity/size/position/repeat already match the
 * shared rule; only the image URL differs. Additive only -- the shared
 * default and every other family page using it unmodified are untouched.
 */
.vlz-dark-cta-band--content-marketing::before {
	background-image: var(--vlz-bg-contentmk, url("/wp-content/uploads/2021/07/bgcontentmk.jpg"));
}

/*
 * Page-scoped background-image override for TikTok Ads (TPL-B-01 Batch 3
 * LEVEL 3 Pilot, 2026-08-16). Live-verified via getComputedStyle on
 * https://legacy.vlinzza.com/tiktok-advertising-services/'s own
 * `.elementor-background-overlay` for S06: the SAME shared asset already used
 * by LinkedIn Ads / Content Writing Company / Brand Identity Logo Design /
 * Social Media Management / Content Marketing Company (`bgcontentmk.jpg`) --
 * reused, not duplicated. Additive only -- the shared default and every other
 * family page using it unmodified are untouched.
 */
.vlz-dark-cta-band--tiktok-ads::before {
	background-image: var(--vlz-bg-contentmk, url("/wp-content/uploads/2021/07/bgcontentmk.jpg"));
}

/*
 * Snapchat Ads (TPL-B-01 Batch 3 LEVEL 3, 2026-08-16) -- same shared
 * `bgcontentmk.jpg` background CONFIRMED live via getComputedStyle on
 * Legacy's own S06. Reused, not duplicated. Additive only -- the shared
 * default and every other family page using it unmodified are untouched.
 */
.vlz-dark-cta-band--snapchat-ads::before {
	background-image: var(--vlz-bg-contentmk, url("/wp-content/uploads/2021/07/bgcontentmk.jpg"));
}

/*
 * X Ads (TPL-B-01 Batch 3 LEVEL 3, 2026-08-16) -- same shared
 * `bgcontentmk.jpg` background CONFIRMED live via getComputedStyle on
 * Legacy's own S06 (https://legacy.vlinzza.com/x-ads-servers/). Reused, not
 * duplicated. Additive only -- the shared default and every other family
 * page using it unmodified are untouched.
 */
.vlz-dark-cta-band--x-ads::before {
	background-image: var(--vlz-bg-contentmk, url("/wp-content/uploads/2021/07/bgcontentmk.jpg"));
}

/*
 * Instagram Ads (TPL-C-01, Sections 7+9 re-discovery / pre-FAQ image
 * correction task, 2026-08-22) -- the pre-FAQ closing-statement band
 * (`.vlz-dark-cta-band--closing-statement`) previously shipped with 0
 * background image (the `--reduced` content variant had stripped the
 * `::before` background context entirely at build time). Live-verified via
 * getComputedStyle on `.elementor-background-overlay` inside
 * `[data-id="71691ed3"]` at https://legacy.vlinzza.com/instagram-ads-services/:
 * Legacy's actual pre-FAQ band background is the SAME shared asset already
 * used by the LinkedIn Ads / Content Writing Company / Brand Identity Logo
 * Design / Social Media Management / Content Marketing Company / TikTok Ads /
 * Snapchat Ads / X Ads overrides above (`bgcontentmk.jpg`) -- reused, not
 * duplicated. Overlay color/opacity/size/position/repeat already match the
 * shared rule; only the image URL differs. Additive only -- the shared
 * default and every other family page using it unmodified are untouched.
 */
.vlz-dark-cta-band--instagram-ads::before {
	background-image: var(--vlz-bg-contentmk, url("/wp-content/uploads/2021/07/bgcontentmk.jpg"));
}

/*
 * About page (contract §22) — the shared default `::before` background is the
 * SEO-family "خبير سيو فلينزا الصدارة لا تنتظر احدا" watermark artwork, which
 * is thematically mismatched on a general company-About closing CTA. No
 * page-specific replacement image was approved for this band, so the
 * background image is cleared here (solid dark fill only) rather than
 * reusing SEO-branded artwork out of context. Additive only.
 */
.vlz-dark-cta-band--about::before {
	background-image: none;
}

.vlz-dark-cta-band__container {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	inline-size: min(1140px, 100%);
	margin-inline: auto;
}

.vlz-dark-cta-band__layout {
	display: grid;
	grid-template-columns: minmax(0, 2.52fr) minmax(0, 1fr);
	direction: rtl;
}

.vlz-dark-cta-band__content {
	box-sizing: border-box;
	padding-inline: 10px;
}

.vlz-dark-cta-band__title {
	margin-block: 0 20px;
	color: #fff;
	font-family: "IBM Plex Sans Arabic", Arial, sans-serif;
	font-size: 35px;
	font-weight: 700;
	line-height: 70px;
	text-align: right;
}

.vlz-dark-cta-band__text {
	margin-block: 10px 30px;
	color: #fff;
	font-family: "IBM Plex Sans Arabic", Arial, sans-serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 37.4px;
	text-align: right;
}

.vlz-dark-cta-band__actions {
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;
	margin: 0;
}

.vlz-dark-cta-band__actions > * {
	flex: 1 1 0;
	min-inline-size: 0;
	margin: 0;
}

.vlz-dark-cta-band__actions .vlz-contact-action__link,
.vlz-dark-cta-band__actions .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 60px;
	border: 0;
	border-radius: 27px;
	background: #1e7dbf;
	color: #fff;
	font-family: "IBM Plex Sans Arabic", Arial, sans-serif;
	font-size: 21px;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.4s, color 0.4s;
}

.vlz-dark-cta-band__actions .wp-block-button {
	display: flex;
}

.vlz-dark-cta-band__actions .vlz-contact-action__link:hover,
.vlz-dark-cta-band__actions .vlz-contact-action__link:focus-visible,
.vlz-dark-cta-band__actions > .wp-block-button.vlz-dark-cta-band__contact-button > .wp-block-button__link:not(.has-background):hover,
.vlz-dark-cta-band__actions > .wp-block-button.vlz-dark-cta-band__contact-button > .wp-block-button__link:not(.has-background):focus-visible {
	background: rgba(2, 1, 1, 0.59);
	color: #fff;
}

.vlz-dark-cta-band__actions .vlz-contact-action__link:focus-visible,
.vlz-dark-cta-band__actions .wp-block-button__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.vlz-dark-cta-band__layout {
		display: block;
	}

	.vlz-dark-cta-band__companion {
		display: none;
	}

	.vlz-dark-cta-band__title {
		font-size: 22px;
		line-height: 44px;
	}

	.vlz-dark-cta-band__text {
		font-size: 18px;
		line-height: 30.6px;
	}

	.vlz-dark-cta-band__actions {
		align-items: stretch;
		flex-direction: column;
		gap: 20px;
	}

	.vlz-dark-cta-band__actions .vlz-contact-action__link,
	.vlz-dark-cta-band__actions .wp-block-button__link {
		min-block-size: 72px;
		font-size: 18px;
	}
}

/*
 * VLINZZA — Dark CTA Band — Homepage Consultation variant (TPL-C-02 Section 8)
 *
 * Homepage-specific instance of the shared Dark CTA Band grammar above.
 * Additive only -- every rule here is scoped under
 * `.vlz-dark-cta-band--homepage-consultation` / its own child classes and
 * does not change the generic pattern or any other page using it.
 *
 * Background: Legacy's own `.elementor-element-611784ba` composes a
 * full-strength `bg1.jpg` cover image plus a SEPARATE `rgb(11,32,56)` /
 * `.79` overlay layer (live-verified via getComputedStyle on
 * https://legacy.vlinzza.com/, not the generic pattern's combined
 * image+color-at-25%-opacity shortcut) -- reproduced below as two stacked
 * background layers at full opacity so the tint math matches exactly.
 * `bg1.jpg` already exists in the canonical asset library
 * (`wp-content/uploads/2021/06/bg1.jpg`); no new asset was created.
 */
.vlz-dark-cta-band--homepage-consultation {
	padding-block: 71px 143px;
}

.vlz-dark-cta-band--homepage-consultation::before {
	background-image: linear-gradient(rgba(11, 32, 56, 0.79), rgba(11, 32, 56, 0.79)), var(--vlz-bg-bg1, url("/wp-content/uploads/2021/06/bg1.jpg"));
	background-size: cover, cover;
	background-position: 50% 50%, 50% 50%;
	background-repeat: no-repeat, no-repeat;
	background-attachment: scroll, scroll;
	opacity: 1;
}

/*
 * Owner Visual Correction (2026-08-19) -- Legacy's real two-column split is
 * an EQUAL 570px/570px (measured live: `.elementor-container` = 1140px,
 * `elementor-element-17e8ea15` content column = 570px on the LEFT,
 * `elementor-element-bd99b93` empty decorative column = 570px on the RIGHT),
 * not the generic pattern's unrelated 2.52fr/1fr split (which produced an
 * 816px/324px column pair with content on the RIGHT). The generic pattern's
 * grid places its first source-order item (content) into grid-template-
 * columns' first track, which under `direction:rtl` is the physically
 * RIGHT-most track -- opposite of Legacy's physical LEFT-side content column.
 * Fixed here, scoped to this modifier only: equal 1fr/1fr tracks, plus an
 * `order` swap so content lands in the LEFT track and the empty companion
 * lands in the RIGHT track, matching Legacy's own physical layout exactly.
 * Does not change the generic 2.52fr/1fr pattern used by any other page.
 */
.vlz-dark-cta-band--homepage-consultation .vlz-dark-cta-band__layout {
	align-items: center;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.vlz-dark-cta-band--homepage-consultation .vlz-dark-cta-band__content {
	order: 2;
}

.vlz-dark-cta-band--homepage-consultation .vlz-dark-cta-band__companion {
	order: 1;
}

/*
 * Legacy's real content column is vertically centered in the section
 * (`elementor-section-content-middle`) with a uniform 20px gap between the
 * eyebrow, divider, title, paragraph and action row (measured live); the
 * generic pattern's `__content` group has no such gap/centering because it
 * normally holds only a title + paragraph + full-width action row.
 */
.vlz-dark-cta-band__content--homepage-consultation {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-inline: 0;
	/*
	 * Owner Visual Correction (2026-08-19): without an explicit `inline-size`
	 * this grid item's automatic minimum size (its children's own min-content,
	 * driven by the fixed-530px divider/eyebrow/paragraph caps) was live-
	 * verified to overflow a narrower grid track at Tablet/Mobile (negative
	 * `x`, clipped off the left edge) instead of shrinking to the 384px
	 * track. Forcing `inline-size: 100%` + `min-inline-size: 0` makes this
	 * item genuinely stretch to its own grid track at every breakpoint; the
	 * `min(530px, 100%)` cap on its children (below) still applies inside
	 * that track, so Desktop's exact 530px content width is unaffected.
	 */
	inline-size: 100%;
	min-inline-size: 0;
}

/*
 * Same WordPress `is-layout-constrained` global-layout-support conflict
 * already registered as CSS-debt for Section 7's rail cards (see
 * `REBUILD-ISSUES-LESSONS-LEARNED.md`) -- live-verified here too: this
 * group's `layout:{"type":"constrained"}` attribute (kept for parity with
 * the shared Dark CTA Band shell) makes WordPress inject
 * `.is-layout-constrained > :where(...) { max-width: ...; margin-left/
 * right: auto !important }` plus a `margin-block-start` block-gap rule on
 * every child, which independently re-centers/widens each child and stacks
 * with this column's own flex `gap`. `!important` is used only on the two
 * properties WordPress itself marks `!important` in the injected rule.
 * MANDATORY RECHECK during the project-wide Final CSS Cleanup after
 * Elementor removal, same as the existing Section 7 entry.
 */
/*
 * Owner Visual Correction (2026-08-19): the prior `max-inline-size: none`
 * fully removed WordPress's injected width cap instead of replacing it with
 * Legacy's own measured value, letting every child (eyebrow/title/paragraph/
 * action row) stretch to the full column width and re-wrap its text
 * differently from Legacy. Legacy's own text elements are 530px wide inside
 * their 570px content column (measured live, `elementor-element-9fba847` /
 * `12e4c8bc` etc.) -- reproduced here as an explicit 530px cap so wrapping
 * matches, instead of an unconstrained full-width column. `min(530px, 100%)`
 * (not a bare `530px`) so the cap never exceeds its own grid track at
 * narrower Tablet/Mobile widths -- a bare `530px` was live-verified to push
 * the column to a negative `x` (off-screen left clip) once the 570px desktop
 * column track itself shrinks below 530px.
 */
.vlz-dark-cta-band__content--homepage-consultation > * {
	max-inline-size: min(530px, 100%) !important;
	margin-inline: 0 !important;
	margin-block-start: 0;
}

/*
 * Eyebrow + divider are Legacy content that does not exist in the generic
 * Dark CTA Band pattern (measured live, `elementor-element-49422870` /
 * `776d4c92`): a large bold pre-heading and a short accent-colored rule,
 * both visible at all three measured breakpoints.
 */
.vlz-dark-cta-band__eyebrow {
	margin-block: 0;
	color: #fff;
	font-family: "IBM Plex Sans Arabic", Arial, sans-serif;
	font-size: 70.2px;
	font-weight: 700;
	line-height: 98.28px;
	text-align: right;
}

/*
 * `hr.vlz-dark-cta-band__divider` (element + class) is used instead of the
 * plain class so this beats core's own `.wp-block-separator` `border`
 * shorthand and margin regardless of stylesheet load order -- a genuine
 * conflict, not unnecessary specificity (verified live: the plain-class
 * version was silently zeroed out by core's separator defaults).
 */
hr.vlz-dark-cta-band__divider {
	inline-size: 530px;
	max-inline-size: 100%;
	margin-block: 0;
	margin-inline: 0;
	border: 0;
	border-block-start: 3px solid #1e7dbf;
}

/*
 * Homepage title/paragraph sizes measured live against Legacy's own
 * `9fba847` / `12e4c8bc` -- close to but not identical to the generic
 * pattern's tokens, and the paragraph is justified (not right-aligned)
 * on this Section only.
 */
.vlz-dark-cta-band__title--homepage-consultation {
	margin-block: 0;
	font-size: 32.4px;
	line-height: 45.36px;
}

.vlz-dark-cta-band__text--justify {
	margin-block: 0;
	font-size: 19.2px;
	line-height: 30.72px;
	text-align: justify;
}

/*
 * Section 8 has exactly one action (WhatsApp `expert-contact`), fixed-width
 * and centered under the right-aligned copy -- Legacy's own
 * `elementor-align-center` button wrapper, not the generic pattern's
 * full-width equal-share action row.
 */
.vlz-dark-cta-band__actions--single {
	justify-content: center;
}

.vlz-dark-cta-band__actions--single > * {
	flex: 0 0 auto;
}

.vlz-dark-cta-band__actions--single .vlz-contact-action__link {
	inline-size: auto;
	min-block-size: 52px;
	padding-inline: 30px;
	font-size: 18px;
}

@media (max-width: 767px) {
	/*
	 * Legacy removes the section's own top/bottom padding entirely at
	 * mobile (measured `padding: 0px` on `611784ba`) rather than scaling
	 * the desktop 71px/143px band down -- the section wraps tightly
	 * around the stacked content with no extra breathing room.
	 */
	.vlz-dark-cta-band--homepage-consultation {
		padding-block: 0;
	}

	hr.vlz-dark-cta-band__divider {
		inline-size: 350px;
	}

	.vlz-dark-cta-band__title--homepage-consultation {
		font-size: 36px;
		line-height: 50.4px;
	}
}

/*
 * VLINZZA — Dark CTA Band — Centered Dual Action Variant
 * (TPL-D-01 SEO Company Section 5, Owner-approved redesign, 2026-08-24)
 *
 * Reusable Variant of the shared Dark CTA Band grammar above: centered H2,
 * centered short paragraph, exactly two centered actions. Additive only --
 * every rule here is scoped under `.vlz-dark-cta-band--centered-dual` / its
 * own child classes and does not change the generic pattern, the Homepage
 * Consultation variant, or any other page using either.
 *
 * No background image: the shared `::before` decorative layer is removed
 * entirely for this Variant (`content: none`) and replaced with a plain
 * solid navy background-color using the same `rgb(11, 32, 56)` token
 * already established by the Homepage Consultation variant's own overlay
 * tint above -- an existing design-system color, not a new one.
 */
.vlz-dark-cta-band--centered-dual {
	padding-block: 72px;
	background-color: rgb(11, 32, 56);
}

.vlz-dark-cta-band--centered-dual::before {
	content: none;
}

.vlz-dark-cta-band__content--centered-dual {
	max-inline-size: min(860px, 100%);
	margin-inline: auto;
	padding-inline: 10px;
	text-align: center;
}

.vlz-dark-cta-band__title--centered-dual {
	margin-block: 0 16px;
	text-align: center;
}

.vlz-dark-cta-band__text--centered-dual {
	margin-block: 0 32px;
	text-align: center;
}

.vlz-dark-cta-band__actions--centered-dual {
	justify-content: center;
}

.vlz-dark-cta-band__actions--centered-dual > * {
	flex: 0 0 auto;
	margin: 0;
}

@media (min-width: 768px) {
	.vlz-dark-cta-band__actions--centered-dual .vlz-contact-action__link {
		inline-size: auto;
		min-inline-size: 240px;
		padding-inline: 40px;
	}
}

/*
 * Secondary Outline presentation on this Variant's dark navy background --
 * the base `.vlz-dark-cta-band__actions .vlz-contact-action__link` rule
 * fills every action with the same solid blue regardless of `appearance`,
 * so an explicit white-outline override is required here for Button 2 to
 * read as visually distinct from Button 1, matching every other scope's
 * own secondary-outline override in this file (e.g. `.vlz-dark-image-hero
 * .vlz-contact-action--secondary-outline .vlz-contact-action__link`).
 */
.vlz-dark-cta-band--centered-dual .vlz-contact-action--secondary-outline .vlz-contact-action__link {
	border-width: 2px;
	border-style: solid;
	border-color: #fff;
	background: transparent;
	color: #fff;
}

.vlz-dark-cta-band--centered-dual .vlz-contact-action--secondary-outline .vlz-contact-action__link:hover,
.vlz-dark-cta-band--centered-dual .vlz-contact-action--secondary-outline .vlz-contact-action__link:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

@media (max-width: 767px) {
	.vlz-dark-cta-band--centered-dual {
		padding-block: 56px;
	}

	.vlz-dark-cta-band__title--centered-dual {
		font-size: 22px;
		line-height: 44px;
	}

	.vlz-dark-cta-band__text--centered-dual {
		font-size: 18px;
		line-height: 30.6px;
	}
}

/*
 * VLINZZA — Dark CTA Band — Deep Teal tone modifier
 * (TPL-D-01 SEO Company Section 8, Owner-approved, 2026-08-24)
 *
 * Generic, reusable Dark CTA Band color modifier -- NOT scoped to a single
 * page. Overrides only `background-color`; every other rule (padding,
 * centered composition, button treatment, responsive behavior) is inherited
 * unchanged from whichever layout modifier (e.g. `--centered-dual`) is
 * combined with it on the same section. Does not touch `.vlz-dark-cta-band`
 * (base), `--centered-dual` (Section 5), or `--homepage-consultation` --
 * additive only. Source order matters: this rule is appended after
 * `--centered-dual` above so it wins the `background-color` cascade when
 * both classes are present on the same element (equal specificity, later
 * source wins) without needing `!important` or a compound selector.
 */
.vlz-dark-cta-band--deep-teal {
	background-color: #174B5B;
}

/* ===================================================================
 * VLINZZA — Contact Form Panel (Section 9)
 *
 * Two-column RTL panel: illustration + heading + the existing CF7
 * shortcode. Section/media/content geometry is fully specified below.
 * Field-fill/height/radius/text-color and the heading color reuse
 * existing tokens (Component Mapping §13, exact measured matches).
 * The submit-button fill (rgb(47,214,160)) has no existing token match
 * and is applied as a documented section-local override value, per the
 * Component Mapping §13/§23 non-blocking decision — not invented, not
 * silently promoted to a new global token.
 *
 * KNOWN GAP: the CF7 form's own 2-column → 1-column field-grid markup
 * (Component Mapping §10/§17 — owned by CF7's generated HTML, not this
 * Pattern's blocks) could not be inspected live this task because the
 * LocalWP runtime was unreachable. Do not guess its selectors; confirm
 * the live form's field-wrapper markup before adding that rule.
 * =================================================================== */

.vlz-contact-panel {
	position: relative;
	direction: rtl;
	padding-block: var(--vlz-section-space, 5rem);
	background-color: var(--vlz-color-ink, #1b2538);
	color: var(--vlz-color-text-invert, #fff);
}

.vlz-contact-panel__container {
	box-sizing: border-box;
	max-inline-size: 1400px;
	margin-inline: auto;
	padding-inline: var(--vlz-container-gutter, 2.25rem);
}

.vlz-contact-panel__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
}

.vlz-contact-panel__media,
.vlz-contact-panel__content {
	flex: 1 1 50%;
	min-inline-size: 0;
}

.vlz-contact-panel__media {
	align-self: center;
}

.vlz-contact-panel__image img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.vlz-contact-panel__content {
	box-sizing: border-box;
	padding-inline: 1.25rem;
}

.vlz-contact-panel .vlz-contact-panel__title {
	margin-block: 0 var(--vlz-stack-space, 1.5rem);
	color: var(--vlz-color-text-invert, #fff);
	font-size: 37.8px;
	font-weight: 700;
	line-height: 45.36px;
	text-align: center;
}

.vlz-contact-panel__form .wpcf7-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 20px;
}

/*
 * Live-verified field order on the existing CF7 form (name, email, country,
 * phone, budget-select, submit) — the 5th/6th <p> (select + submit) span
 * both grid columns; the first four pair up as name+email / country+phone.
 * Desktop AND Tablet both stay 2-column (Component Mapping §10/§11 — the
 * grid collapses to 1-column only at the Mobile step below).
 */
.vlz-contact-panel__form .wpcf7-form p:nth-of-type(5),
.vlz-contact-panel__form .wpcf7-form p:nth-of-type(6),
.vlz-contact-panel__form .wpcf7-form .wpcf7-response-output {
	grid-column: 1 / -1;
}

.vlz-contact-panel__form .wpcf7-form p {
	margin: 0 0 20px;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

/* Round 2 §5 fix: CF7's own generated markup puts a <br> between the
 * <label> and the field wrapper (`<label>…</label><br><span class=
 * "wpcf7-form-control-wrap">…`). As a flex item inside p{flex-direction:
 * column;gap}, that <br> was taking up a full line-height plus two gaps —
 * the actual cause of the oversized label-to-control space, not the gap
 * value itself. Collapsing it (not removed from the DOM — CF7 owns the
 * markup) is what actually closes the gap while keeping the small
 * intentional 0.25rem breathing room above from the flex `gap`. */
.vlz-contact-panel__form .wpcf7-form p br {
	display: none;
}

/*
 * §7/§8 (Round 1) + Round 2 §4/§6/§7 Field visual refinement — restored to
 * the original legacy look: transparent/section-colored fill, no full
 * rectangular border, underline only, full row width. Labels already sit
 * above each field in the form template (unchanged). Applies to
 * text/email/tel/select alike, and to every interaction state (default,
 * focus, active, valid, autofill).
 */
.vlz-contact-panel__form .wpcf7-form-control-wrap {
	display: block;
	inline-size: 100%;
}

.vlz-contact-panel__form .wpcf7-form-control,
.vlz-contact-panel__form select.wpcf7-form-control {
	inline-size: 100%;
	min-block-size: var(--vlz-control-height, 3rem);
	padding-inline: 0.25rem;
	border: none;
	border-block-end: 1px solid var(--vlz-color-text-invert-muted, rgba(255, 255, 255, 0.4));
	border-radius: 0;
	background-color: transparent;
	color: var(--vlz-color-text-invert, #fff);
	font-size: var(--vlz-control-font-size, 16px);
	transition: border-color 120ms ease;
}

.vlz-contact-panel__form input.wpcf7-form-control::placeholder {
	color: var(--vlz-color-text-invert-muted, rgba(255, 255, 255, 0.78));
}

/* Visible-but-restrained focus state (§8) — underline brightens; not just
 * a colour shift, so it stays legible for keyboard users. */
.vlz-contact-panel__form .wpcf7-form-control:focus-visible {
	outline: none;
	border-block-end-color: var(--vlz-color-primary, #1e7dbf);
	border-block-end-width: 2px;
}

/*
 * Input background visual regression fix — root cause identified live via
 * DOM/CSSOM forensics (real click-focus + real typing on Local, not
 * simulated): GeneratePress' own dynamically-generated global form-field
 * CSS (an unscoped, theme-wide `input[type="text"|"email"|"url"|"password"
 * |"search"|"tel"|"number"], textarea, select` + its own `:focus` variant,
 * injected inline — not a file this project owns or may edit) sets
 * `color: var(--contrast)` and `background-color: var(--base-2)` (a near-
 * white token) specifically ON FOCUS. Its `:focus` selector's specificity
 * is (0,2,1) — one class-level attribute selector + one pseudo-class + the
 * bare `input` element selector. The existing default-state rule above is
 * (0,2,0) (two classes only, no element selector) — it already correctly
 * beats GP's own *default*-state rule (0,1,1) on the class-count digit
 * alone, which is why the field is transparent at rest, but at the
 * `:focus` digit-count tie (2 vs 2) the decision falls to the element-
 * selector digit, where GP's bare `input` element selector (1) beats ours
 * (0) — independent of stylesheet load order. `select` was never affected
 * because its own rule above already includes the `select` element
 * selector, matching GP's specificity on that same digit.
 *
 * Fix: add the same technique already used for `select` — qualify with
 * the `input` element type — to every input-affecting interactive state,
 * giving (0,3,1), which beats GP's (0,2,1) purely on specificity (no
 * `!important`, no stylesheet reordering, no edit to GeneratePress files).
 * `:active`/`:valid`/`:invalid` are included defensively even though no
 * competing GP rule was found for them in this forensic pass — they cost
 * nothing and close the same class of regression pre-emptively.
 *
 * `:not(.wpcf7-submit)` is required: CF7's submit tag also renders as
 * `<input class="wpcf7-form-control wpcf7-submit" type="submit">`, and a
 * submit input has no value constraints, so it always matches `:valid`.
 * Without this exclusion the defensive `:valid` line above would have
 * permanently zeroed out the submit button's own teal background — caught
 * live during this task's own responsive QA pass, not shipped silently.
 */
.vlz-contact-panel__form input.wpcf7-form-control:not(.wpcf7-submit):focus,
.vlz-contact-panel__form input.wpcf7-form-control:not(.wpcf7-submit):focus-visible,
.vlz-contact-panel__form input.wpcf7-form-control:not(.wpcf7-submit):active,
.vlz-contact-panel__form input.wpcf7-form-control:not(.wpcf7-submit):valid,
.vlz-contact-panel__form input.wpcf7-form-control:not(.wpcf7-submit):invalid {
	background-color: transparent;
	color: var(--vlz-color-text-invert, #fff);
}

/* Round 2 §6/§7 — Chrome/Chromium autofill paints its own opaque
 * background (usually pale yellow/white) that no `background-color` rule
 * can override directly; the only reliable cross-browser technique is an
 * enormous inset box-shadow of the panel's own fill, combined with
 * `-webkit-text-fill-color` so the autofilled text stays readable. This
 * does not disable autofill — values still populate and submit normally,
 * only the visual paint is corrected. */
.vlz-contact-panel__form input.wpcf7-form-control:-webkit-autofill,
.vlz-contact-panel__form input.wpcf7-form-control:-webkit-autofill:hover,
.vlz-contact-panel__form input.wpcf7-form-control:-webkit-autofill:focus,
.vlz-contact-panel__form input.wpcf7-form-control:-webkit-autofill:active {
	-webkit-text-fill-color: var(--vlz-color-text-invert, #fff);
	-webkit-box-shadow: 0 0 0 1000px var(--vlz-color-ink, #1b2538) inset;
	box-shadow: 0 0 0 1000px var(--vlz-color-ink, #1b2538) inset;
	caret-color: var(--vlz-color-text-invert, #fff);
	transition: background-color 9999s ease-in-out 0s;
}

.vlz-contact-panel__form select.wpcf7-form-control {
	appearance: none;
	-webkit-appearance: none;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 0.25rem center;
	background-size: 10px 7px;
	padding-inline-start: 1.25rem;
}

/* Native <option> popups are OS/browser-rendered and outside CSS control
 * (§13 — no heavy hacks attempted to restyle them); the closed control
 * itself (what stays on-page) is what §11 requires to match the dark
 * panel, and is fully covered above. */
.vlz-contact-panel__form select.wpcf7-form-control option {
	color: #1b2538;
	background-color: #fff;
}

.vlz-contact-panel__form label {
	color: var(--vlz-color-text-invert, #fff);
	font-size: 14px;
}

/*
 * §9 Submit button — same teal/green fill, pill radius, full width.
 * Hover moves to the project's own existing primary blue token (not a
 * new/guessed colour, not black). Focus is keyboard-visible and does not
 * rely on hover alone.
 */
.vlz-contact-panel__form .wpcf7-submit {
	display: block;
	inline-size: 100%;
	border: 1px solid #2fd6a0;
	border-radius: 999px;
	background-color: #2fd6a0;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.vlz-contact-panel__form .wpcf7-submit:hover {
	background-color: var(--vlz-color-primary, #1e7dbf);
	border-color: var(--vlz-color-primary, #1e7dbf);
}

.vlz-contact-panel__form .wpcf7-submit:focus-visible {
	outline: 2px solid var(--vlz-color-primary, #1e7dbf);
	outline-offset: 2px;
	background-color: var(--vlz-color-primary, #1e7dbf);
	border-color: var(--vlz-color-primary, #1e7dbf);
}

@media (max-width: 1024px) {
	.vlz-contact-panel__row {
		flex-wrap: wrap;
	}

	.vlz-contact-panel__media,
	.vlz-contact-panel__content {
		flex-basis: 100%;
	}
}

@media (max-width: 767px) {
	.vlz-contact-panel .vlz-contact-panel__title {
		font-size: 36px;
		line-height: 1.3;
	}

	.vlz-contact-panel__form .wpcf7-form {
		grid-template-columns: 1fr;
	}

	.vlz-contact-panel__form .wpcf7-form p:nth-of-type(5),
	.vlz-contact-panel__form .wpcf7-form p:nth-of-type(6) {
		grid-column: 1 / -1;
	}
}

/* ---------------------------------------------- SEO Company — Differentiation Variant (Transaction D) */

.vlz-seo-company-differentiation__content,
.vlz-seo-company-differentiation__trust {
	direction: rtl;
}

.vlz-seo-company-differentiation__intro {
	margin: 0 0 16px;
	color: #283e71;
	font-size: clamp(27px, 2.25vw, 34px);
	line-height: 1.35;
}

.vlz-seo-company-differentiation .vlz-ctaunit--trust-sticky {
	max-inline-size: none;
	min-block-size: 0;
	padding: 28px 34px;
	gap: 12px;
	background-image: none;
}

@media (max-width: 767px) {
	.vlz-seo-company-differentiation__container {
		padding-inline: 0;
	}

	.vlz-seo-company-differentiation .vlz-ctaunit--trust-sticky {
		padding: 36px 24px;
	}
}

/* ----------------------------- Homepage Section 7 — Sticky Storytelling */

/*
 * Legacy identity: root `79700cbf`, scrolling column `1e11f52e` (physically
 * right at 1440), sticky/benefits column `84b915` (physically left), sticky
 * node `#sticky-column` (`position:sticky; top:144px`, live-confirmed on
 * 2026-08-19). DOM order matches the Split Scroll Service Body precedent:
 * the scrolling column is authored first so RTL places it on the right
 * without any explicit column-order property.
 */
.vlz-homepage-sticky-storytelling {
	direction: rtl;
	padding-block: 20px 88px;
}

.vlz-homepage-sticky-storytelling__container {
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: 20px;
}

.vlz-homepage-sticky-storytelling__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	/*
	 * Same root cause and fix as `.vlz-split-scroll-service-body__grid`:
	 * `stretch` (the grid default) gives the sticky-parent column the full
	 * row height so `#pin` has real scroll travel instead of ~0px.
	 */
	align-items: stretch;
}

.vlz-homepage-sticky-storytelling__story,
.vlz-homepage-sticky-storytelling__rail {
	min-inline-size: 0;
}

.vlz-homepage-sticky-storytelling__panel {
	padding-block: 15px;
	text-align: center;
}

.vlz-homepage-sticky-storytelling__panel--last {
	padding-block-end: 0;
}

.vlz-homepage-sticky-storytelling__panel-image {
	margin: 0 0 15px;
}

.vlz-homepage-sticky-storytelling__panel-image img {
	display: block;
	width: 100%;
	aspect-ratio: 680 / 453;
	object-fit: cover;
}

/*
 * Reference parity fix (2026-08-19 Section 7 visual QA): the reference's
 * seven story-panel icons sit in a filled circle plate, not a bare glyph.
 * Values read directly from the live reference's computed styles
 * (`.elementor-icon-box-icon .elementor-icon`): 88px circle, #e1ecff fill,
 * ~30px glyph. Scoped to this pattern only -- the shared
 * `.vlz-iconbox--compact-centered` variant used elsewhere is untouched.
 */
.vlz-homepage-sticky-storytelling__panel .vlz-iconbox__icon {
	inline-size: 88px;
	block-size: 88px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: #e1ecff;
	color: #6a9df5;
}

.vlz-homepage-sticky-storytelling__panel .vlz-icon {
	inline-size: 30px;
	block-size: 30px;
}

.vlz-homepage-sticky-storytelling__panel .vlz-iconbox__title {
	max-inline-size: 513px;
	margin: 0 auto 45px;
	color: #000;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}

/*
 * Reference parity correction (2026-08-19 FULL RECONCILIATION): the
 * reference constrains each story paragraph to a narrower inner column
 * (`.elementor-icon-box-description`, read live as a fixed 513px, inside a
 * 713px story column — not the full column width). A percentage was
 * rejected in favor of this fixed px cap after live-checking Mobile
 * (390px): there the reference's paragraph runs ~90% of the viewport, not
 * ~72% — i.e. it is genuinely a fixed max-width that only clips on wide
 * columns, not a proportional width. `margin-inline: auto` centers it
 * inside the (wider) story column exactly as the reference does.
 */
.vlz-homepage-sticky-storytelling__panel p {
	max-inline-size: 513px;
	margin-inline: auto;
	margin-block: 0;
	color: #000;
	font-size: 20px;
	line-height: 34px;
	text-align: center;
}

/*
 * Reference parity correction (2026-08-19 FULL RECONCILIATION): the
 * reference does NOT use one uniform icon-circle color for all seven story
 * panels — each of the 7 `.elementor-icon` circles was read live with its
 * own distinct background/glyph color pair. Applied here in DOM order
 * (panel 1 = "بناء علامة تجارية" ... panel 7 = "تحسين معدل التحويل"),
 * matching the reference exactly, including panels 6 and 7 which the
 * reference itself gives the same color pair (not a local simplification).
 */
.vlz-homepage-sticky-storytelling__panel:nth-of-type(1) .vlz-iconbox__icon {
	background: #e1ecff;
	color: #93b9f9;
}

.vlz-homepage-sticky-storytelling__panel:nth-of-type(2) .vlz-iconbox__icon {
	background: #edf9f8;
	color: #55d8cd;
}

.vlz-homepage-sticky-storytelling__panel:nth-of-type(3) .vlz-iconbox__icon {
	background: #f5faef;
	color: #9de349;
}

.vlz-homepage-sticky-storytelling__panel:nth-of-type(4) .vlz-iconbox__icon {
	background: rgba(224, 104, 223, 0.41);
	color: #a420a3;
}

.vlz-homepage-sticky-storytelling__panel:nth-of-type(5) .vlz-iconbox__icon {
	background: rgba(75, 234, 225, 0.36);
	color: #13b4ab;
}

.vlz-homepage-sticky-storytelling__panel:nth-of-type(6) .vlz-iconbox__icon,
.vlz-homepage-sticky-storytelling__panel:nth-of-type(7) .vlz-iconbox__icon {
	background: #fdeded;
	color: #e48484;
}

/*
 * Reference parity fix (2026-08-19 Section 7 visual QA): the reference
 * tints its whole sticky-rail column edge-to-edge with a pale panel
 * (`.elementor-background-overlay` on the rail's own column, read live as
 * rgb(242, 246, 252)) -- the rail here had no background at all. The tint
 * goes on the full-height `__rail`, not the sticky `__pin`, so it fills the
 * row via the grid's existing `align-items: stretch` exactly as the
 * reference's column-height overlay does.
 */
.vlz-homepage-sticky-storytelling__rail {
	position: relative;
	background: #f2f6fc;
}

/*
 * Left rail final closure (2026-08-19, FULL-WIDTH BACKGROUND OWNERSHIP):
 * live edge measurement proved the reference's tint is owned by the
 * section's own full-bleed (`alignfull`) outer box, not by the padded
 * `__container`/`__rail` -- reference root and tint both start at the same
 * physical outer edge (0 == 0 at 1440 viewport), split exactly 50/50 at the
 * grid's own column boundary (712.4 / 1424.8 == 50%, live-measured). Local's
 * `__container`'s `padding-inline: 20px` was leaving `__rail`'s own
 * background inset from the section's true full-bleed edge (measured
 * 92.4px vs the section's own 72.4px outer edge -- a 20px white strip).
 * Fixed at Desktop only (>=1025px, i.e. above the 1024px stacking
 * breakpoint below) by moving the tint to a 50/50 split gradient on the
 * full-bleed section root itself -- the same 50% split holds regardless of
 * `__container`'s own max-width/padding because both are centered with
 * equal insets. `__rail`'s own background is neutralized at this
 * breakpoint only, so there is a single background owner per breakpoint,
 * never two. Tablet/Mobile keep the pre-existing `__rail`-scoped
 * background unchanged (already reference-correct once the grid stacks --
 * see the "FINAL LEFT-RAIL BACKGROUND OWNERSHIP CORRECTION" report, this
 * pattern's Section 7 doc, Tablet/Mobile sections).
 */
@media (min-width: 1025px) {
	.vlz-homepage-sticky-storytelling {
		background: linear-gradient(to right, #f2f6fc 50%, transparent 50%);
	}

	.vlz-homepage-sticky-storytelling__rail {
		background: transparent;
	}
}

.vlz-homepage-sticky-storytelling__pin {
	position: sticky;
	top: 144px;
	max-inline-size: 568px;
	margin-inline: auto;
}

.vlz-homepage-sticky-storytelling__pin-title {
	margin: 0 0 40px;
	color: #283e71;
	font-size: 44.8px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.vlz-homepage-sticky-storytelling__benefits {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/*
 * Reference parity correction (2026-08-19 FULL RECONCILIATION, supersedes
 * the earlier icon-only-plate fix below): live DOM inspection of the
 * reference (`.elementskit-infobox`, read directly, not inferred from a
 * screenshot) proves the WHOLE row — icon plate + title — is one single
 * white card, not an icon plate with the title floating outside it:
 * `.elementskit-infobox` itself is `550x85px, #fff, border-radius:5px`,
 * flex row, and the icon plate + title both live inside that one card.
 * Icon-right, title-left row — the rail's six benefit items only.
 *
 * Left-rail geometry reconciliation (2026-08-19, FINAL): the reference's
 * six cards are all IDENTICAL width/height (live-measured 549.9x84.6px,
 * zero variance) and evenly gapped 20px -- the card width does not shrink
 * or grow with title length. Local was NOT doing this: `.vlz-iconbox` is a
 * direct child of `.vlz-homepage-sticky-storytelling__benefits`, a
 * `wp-block-group` carrying WordPress's own `is-layout-constrained` class,
 * whose global-styles rule
 * (`.is-layout-constrained > :where(...){max-width:...!important;
 * margin-left:auto!important;margin-right:auto!important}`) forced EVERY
 * card to shrink-wrap its content width and re-center itself with auto
 * margins -- producing the exact "cards are not fixed/equal size, gaps are
 * inconsistent" defect from the owner's screenshots (measured pre-fix:
 * card width varying 306-418px, centered, pitch 133px against this file's
 * own `gap:24px`). The same block-gap layout support was ALSO adding its
 * own `margin-block-start` on every card on top of the flex `gap` here
 * (measured pre-fix: 24px margin-top stacked onto the 24px flex gap =
 * 48px, not 24px), which is the second half of the same defect. Both are
 * neutralized below with `!important` at higher specificity than the
 * `(0,1,0)` WordPress rule so every card gets the single, fixed, equal
 * geometry the reference uses -- entirely independent of title length.
 */
.vlz-homepage-sticky-storytelling__benefits .vlz-iconbox {
	flex-direction: row;
	align-items: center;
	gap: 16px;
	inline-size: 100% !important;
	max-inline-size: none !important;
	margin: 0 !important;
	padding: 12px 16px;
	background: #fff;
	border-radius: 5px;
}

/*
 * Reference parity fix (2026-08-19 Section 7 visual QA): the reference's
 * six rail items present each icon in a soft white plate
 * (`.elementskit-info-box-icon`, read live as 61x61, #fff, 5px radius)
 * around a 31px glyph, not a bare icon. Scoped to this pattern's rail only.
 * The plate's own #fff fill sits flush against the card's #fff fill added
 * above — matching the reference's computed style exactly (its icon plate
 * is white-on-white too, not visually separated from the card).
 */
.vlz-homepage-sticky-storytelling__benefits .vlz-iconbox__icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	inline-size: 61px;
	block-size: 61px;
	margin: 0;
	border-radius: 5px;
	background: #fff;
	color: #7a7a7a;
}

.vlz-homepage-sticky-storytelling__benefits .vlz-icon {
	inline-size: 31px;
	block-size: 31px;
}

.vlz-homepage-sticky-storytelling__benefits .vlz-iconbox__title {
	color: #000;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.4;
	text-align: right;
}

@media (max-width: 1024px) {
	.vlz-homepage-sticky-storytelling__grid {
		grid-template-columns: 1fr;
	}

	.vlz-homepage-sticky-storytelling__pin {
		max-inline-size: none;
	}
}

@media (max-width: 767px) {
	.vlz-homepage-sticky-storytelling {
		padding-block: 15px 60px;
	}

	.vlz-homepage-sticky-storytelling__container {
		padding-inline: 15px;
	}

	.vlz-homepage-sticky-storytelling__pin-title {
		font-size: 28px;
	}

	/*
	 * Accepted responsive divergence (contract §10.D): the fixed global
	 * contact bar occupies the same mobile viewport band the rail's short
	 * travel range would pin into, so mobile intentionally gets a static
	 * serial flow instead of the reference's technically-present but
	 * ~72px-of-travel sticky. See Section 7 report §6 for the live
	 * mobile measurement this overrides.
	 */
	.vlz-homepage-sticky-storytelling__pin {
		position: static;
	}
}

/* ------------------------------------------- Homepage Results / Proof (Section 9) */

/*
 * Section 9 — "نتائج شركائنا بالأرقام". FINAL CORRECTIVE REBUILD,
 * re-measured live 2026-08-19 against `.elementor-element-2abfbbd` on
 * legacy.vlinzza.com at Desktop 1440x900 / Tablet 768x1024 / Mobile 390x844
 * (see SECTION-9-IMPLEMENTATION-AND-FINAL-QA report §"FINAL CORRECTIVE
 * REBUILD" addendum for the full evidence chain). Corrects the prior
 * implementation's two owner-flagged structural gaps:
 *
 * 1. Each proof panel is NOT a single centered stack (value/label above a
 *    note paragraph). Live DOM shows two independent 50/50 sub-columns per
 *    panel: a "stat part" (metric value + short label, centered within its
 *    half) and a "body part" (the full justified supporting sentence,
 *    unpadded, filling its half edge-to-edge) — exactly half the panel
 *    width each (356px of 712.5px at Desktop, confirmed again at Tablet:
 *    377px of 753px).
 * 2. The two parts alternate side per panel via real DOM order (not a CSS
 *    reverse hack), same RTL convention as the rest of this section — first
 *    DOM child renders on the right:
 *      Panel 1 (89%):  stat right / body left  (stat first in DOM)
 *      Panel 2 (75%):  stat left  / body right (body first in DOM)
 *      Panel 3 (99%):  stat right / body left  (stat first in DOM, same as 1)
 *
 * Edge-to-edge 50/50 outer grid unchanged (no container max-width/padding),
 * unlike Section 7's centered 1400px container. Outer DOM order: heading
 * rail (`__media`) first, stat column (`__stats`) second — first-in-DOM
 * sits physically on the right in this RTL section, same convention.
 */
.vlz-homepage-results-proof {
	direction: rtl;
}

.vlz-homepage-results-proof__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	/* stretch gives the sticky-parent columns real scroll travel, same fix as the other two homepage sticky patterns. */
	align-items: stretch;
}

.vlz-homepage-results-proof__media,
.vlz-homepage-results-proof__stats {
	min-inline-size: 0;
}

/*
 * Heading rail sticky pin. `top:144px` matches the fixed site header offset
 * already used by `.vlz-homepage-sticky-storytelling__pin` and
 * `.vlz-split-scroll-service-body`'s own pin — same header, same offset.
 *
 * OWNER-APPROVED INTENTIONAL DIVERGENCE FROM LEGACY (FINAL OWNER CORRECTIVE
 * PASS, 2026-08-19): Legacy's own asymmetric padding (71.25px near edge /
 * 192.375px far edge) previously used here left almost no visible margin on
 * the column's near (right) edge, reading as text hugging that edge. The
 * owner explicitly approved a design improvement over Legacy parity: real,
 * visible, roughly symmetric inner margins on BOTH sides of the right
 * column, with the text block itself capped narrower than the column and
 * centered inside the remaining space. This is a deliberate deviation, not
 * a parity defect fix — do not revert to Legacy's own asymmetric measure.
 */
.vlz-homepage-results-proof__pin {
	position: sticky;
	top: 144px;
	padding-block: 71px;
	padding-inline: 60px;
}

.vlz-homepage-results-proof__title {
	max-inline-size: 480px;
	margin-block: 0 20px;
	margin-inline: auto;
	color: rgba(0, 0, 0, 0.8);
	font-size: 46.4px;
	font-weight: 700;
	line-height: 1.066;
	text-align: right;
}

/*
 * FINAL OWNER VISUAL FIX V2 (2026-08-19): re-measured live against Legacy's
 * actual widget (`.elementor-element-60e43e9`, an h2 heading, not a plain
 * paragraph) at 1440x900. Legacy content box = 428.875px, letter-spacing
 * 0.15px, both wrap to the same 3 lines already at the previously-set
 * 457px box — the extra ~8px and missing letter-spacing were a residual
 * precision gap, not a line-count defect (re-confirmed: 3 lines both
 * before and after this change). Tightened `__pin` inline-end padding by
 * +8px and added the letter-spacing to close that gap exactly rather than
 * leaving an unexplained variance.
 */
.vlz-homepage-results-proof__lead {
	max-inline-size: 480px;
	margin-block: 0;
	margin-inline: auto;
	color: #000;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.15px;
	text-align: justify;
}

/*
 * Stat column: three sequential panels. Panels 1 and 2 (89%, 75%) are each
 * `position:sticky; top:0` — a standard sibling stacked-sticky release,
 * live-confirmed reproducible twice on Legacy: panel 2's own opaque white
 * background covers panel 1 as the page scrolls, both release together at
 * the section's bottom edge. Panel 3 (99%) is normal flow, matching Legacy
 * (`.elementor-element-840a02a` computed `position:relative`). Panels 1/2
 * carry Legacy's own fixed height (542px, `overflow:visible`) so the
 * next-panel-covers-previous-panel choreography matches exactly — Legacy's
 * panel content (≈660px) is genuinely taller than the panel's own sticky
 * box and overflows underneath the panel that covers it, not a hack.
 */
/*
 * FINAL OWNER VISUAL FIX V2 (2026-08-19): Legacy panels are NOT flat white.
 * Each panel carries its own `.elementor-background-overlay` sibling div —
 * a solid color at `opacity:0.5` sitting behind the content layer, not
 * `opacity` on the panel itself (that would also fade the text). Live-
 * measured per panel at 1440x900 (`getComputedStyle` on the actual overlay
 * node, reproduced against `.elementor-element-6f2c61a` / `-ec90cd1` /
 * `-840a02a`): Panel 1 (89%) `rgb(209,216,200)`, Panel 2 (75%)
 * `rgb(188,217,243)`, Panel 3 (99%) `rgb(219,208,188)`, all at 0.5 opacity
 * over Legacy's own white section background.
 *
 * ROOT-CAUSE FIX — FINAL OWNER CORRECTIVE PASS (2026-08-19): the previous
 * pass reproduced this tint as `background: rgba(r,g,b,0.5)` directly on
 * each sticky panel. That is itself genuinely translucent — during the
 * sticky takeover, Panel 2 sits stacked above Panel 1 in the SAME viewport
 * region, and Panel 2's own 50%-alpha background let Panel 1's text bleed
 * through it (confirmed: this was the real cause of the reported panel
 * content bleed/overlap, not a z-index or stacking-context bug). Panel 3
 * is not sticky/stacked so its own alpha never bled, but is corrected here
 * too for consistency.
 *
 * Fix: use the pre-composited OPAQUE equivalent of each tint over white
 * (`opaque = 0.5*tint + 0.5*white`) as a plain, fully opaque
 * `background-color`. This keeps the exact same visible tint (identical to
 * the old rgba-over-white result) while making each panel surface a true
 * occluder that cannot let the panel underneath show through, regardless
 * of scroll position. No `opacity` is applied to the panel itself, so text
 * stays full-opacity (rule: never fade the whole panel). `isolation:
 * isolate` + explicit `z-index` on the two sticky panels make the takeover
 * order (2 above 1) explicit rather than relying on implicit DOM-order
 * stacking.
 */
.vlz-homepage-results-proof__stat {
	background: #fff;
}

.vlz-homepage-results-proof__stat--1 {
	/* rgb(209,216,200) @ 0.5 over #fff, pre-composited opaque */
	background: rgb(232, 236, 228);
}

.vlz-homepage-results-proof__stat--2 {
	/* rgb(188,217,243) @ 0.5 over #fff, pre-composited opaque */
	background: rgb(222, 236, 249);
}

.vlz-homepage-results-proof__stat--3 {
	/* rgb(219,208,188) @ 0.5 over #fff, pre-composited opaque */
	background: rgb(237, 232, 222);
}

.vlz-homepage-results-proof__stat--1,
.vlz-homepage-results-proof__stat--2 {
	position: sticky;
	top: 0;
	height: 542px;
	overflow: visible;
	isolation: isolate;
}

.vlz-homepage-results-proof__stat--1 {
	z-index: 1;
}

.vlz-homepage-results-proof__stat--2 {
	z-index: 2;
}

.vlz-homepage-results-proof__stat--3 {
	position: relative;
	z-index: 3;
}

/*
 * Two-part row: stat part + body part, each exactly half the panel width,
 * no gap (Legacy's two sub-columns sit flush, 356px + 356px = 712.5px).
 * DOM order alone controls which side each part renders on (see file
 * header); `--reverse` panels (Panel 2) simply emit body markup before
 * stat markup, same as Legacy, so no `row-reverse`/`order` trick is needed
 * at this breakpoint.
 */
.vlz-homepage-results-proof__stat-row {
	display: flex;
	align-items: center;
	height: 100%;
}

.vlz-homepage-results-proof__stat-part,
.vlz-homepage-results-proof__body-part {
	flex: 1 1 50%;
	min-inline-size: 0;
}

.vlz-homepage-results-proof__stat-part {
	padding-inline: 20px;
	text-align: center;
}

.vlz-homepage-results-proof__body-part {
	padding-inline: 40px;
}

/*
 * `vlinzza/metric-card` (variant "default") is reused for value + label
 * only; the reference's per-stat "note" is a full justified sentence, not
 * the component's short muted caption, so the border/background/padding
 * card chrome is stripped here and the figures are restyled instead of the
 * shared default look. Each stat keeps a distinct value color, matching
 * Legacy's own three distinct colors (green/blue/gold).
 *
 * OWNER-APPROVED INTENTIONAL DIVERGENCE FROM LEGACY (FINAL OWNER CORRECTIVE
 * PASS, 2026-08-19): Legacy itself stacks value above label vertically. The
 * owner explicitly approved a design improvement over Legacy parity — value
 * and label sit in ONE horizontal visual row instead ("75%  التسويق
 * الرقمي"), not a vertical stack. The percentage stays the visually
 * dominant element (larger, bold, distinct color); the label is a smaller
 * supporting element beside it, not equal weight. `vlinzza/metric-card`
 * renders value before label in the DOM (`inc/blocks.php`); this section is
 * `direction:rtl`, so the first flex child (the value) sits on the right
 * and the label sits to its left — "percentage then title" reading
 * right-to-left, matching the requested composition without any markup
 * change. `flex-wrap:wrap` is a narrow-width safety net only (Tablet/
 * narrow Desktop content), not the intended normal rendering. Do not
 * revert this to a vertical stack citing Legacy parity — it is an approved
 * deviation, recorded here so it is not silently reverted later.
 */
.vlz-homepage-results-proof__metric.vlz-metric {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	column-gap: 14px;
	row-gap: 6px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.vlz-homepage-results-proof__metric .vlz-metric__value {
	margin: 0;
	font-size: 52px;
	line-height: 1;
	white-space: nowrap;
}

.vlz-homepage-results-proof__metric .vlz-metric__label {
	margin: 0;
	color: #374046;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
}

.vlz-homepage-results-proof__stat--1 .vlz-metric__value {
	color: #a0d58f;
}

.vlz-homepage-results-proof__stat--2 .vlz-metric__value {
	color: #81b2de;
}

.vlz-homepage-results-proof__stat--3 .vlz-metric__value {
	color: #e0ab4d;
}

.vlz-homepage-results-proof__note {
	margin: 0;
	color: #666;
	font-size: 19px;
	line-height: 1.9;
	text-align: justify;
}

@media (max-width: 1024px) {
	.vlz-homepage-results-proof__grid {
		grid-template-columns: 1fr;
	}

	.vlz-homepage-results-proof__pin {
		position: sticky;
	}

	/*
	 * Tablet re-confirmed live: the two-part alternating row survives the
	 * outer grid stacking to one column — panels stay row-split (377px +
	 * 377px of 753px), they do not collapse to a vertical stack yet.
	 */
	.vlz-homepage-results-proof__stat-part,
	.vlz-homepage-results-proof__body-part {
		padding-inline: 20px;
	}
}

@media (max-width: 767px) {
	/*
	 * Accepted responsive divergence (same rationale already documented on
	 * `.vlz-homepage-sticky-storytelling__pin` and confirmed again live for
	 * this Section on 2026-08-19): Mobile computes `position:relative`/
	 * `static` for every sticky node in this Section, full serial order,
	 * 0 horizontal overflow at 390px.
	 *
	 * The alternating two-part row also collapses to a single column at
	 * this breakpoint — but Legacy does NOT keep each panel's desktop side
	 * order; live DOM confirms all three panels render stat-part above
	 * body-part on Mobile regardless of their Desktop/Tablet side, so
	 * `order` overrides DOM position here rather than following it.
	 */
	.vlz-homepage-results-proof__pin {
		position: static;
		padding: 30px 20px;
	}

	.vlz-homepage-results-proof__stat--1,
	.vlz-homepage-results-proof__stat--2 {
		position: static;
		height: auto;
	}

	.vlz-homepage-results-proof__title {
		font-size: 30px;
	}

	.vlz-homepage-results-proof__stat-row {
		flex-direction: column;
	}

	.vlz-homepage-results-proof__stat-part {
		order: 0;
		padding: 30px 20px 0;
	}

	.vlz-homepage-results-proof__body-part {
		order: 1;
		padding: 20px 20px 30px;
	}

	/*
	 * Mobile keeps the OWNER-APPROVED one-row value+label composition
	 * (see the shared `.vlz-homepage-results-proof__metric.vlz-metric`
	 * rule above) rather than reverting to a vertical stack. Sizes are
	 * reduced from Desktop's 52px/21px so the row fits the narrower
	 * ~350px stat-part width at 390px viewport without overflow or
	 * crushed typography; `flex-wrap:wrap` on the shared rule is the
	 * safety net if a particular label is long enough to need 2 lines.
	 */
	.vlz-homepage-results-proof__metric .vlz-metric__value {
		font-size: 44px;
	}

	.vlz-homepage-results-proof__metric .vlz-metric__label {
		font-size: 19px;
	}
}

/*
 * TPL-D-01 SEO Company — SECTIONS 1+2 OWNER REVIEW CORRECTION (2026-08-23).
 * Owner visual review rejected the initial Local implementation (numeric
 * metric cards; undersized Section 2 CTAs). Two page-scoped, additive-only
 * fixes below — 0 change to any shared selector or any other page.
 */

/*
 * CORRECTION 1 — Hero cards, Owner-override content (§6/§7/§24 of the
 * correction task). The 3 real Legacy metrics (10,000 / 130,000 / +200)
 * are REPLACED by 3 Owner-authored text lines each, middle line bold —
 * identical re-weighting technique already proven and owner-approved on
 * the LinkedIn Ads / TikTok Ads / Snapchat Ads / X Ads Hero indicators
 * above (`.vlz-hero-indicators--linkedin` etc., see comment at line ~273):
 * same shared `.vlz-metric--hero-dark` markup and same `vlinzza/metric-card`
 * block for every card, only `value`/`label` font-weight and size are
 * re-weighted inside this one page-scoped container so the MIDDLE line
 * (`label`) reads as the emphasized message instead of the top line
 * (`value`), which is the default's numeric-metric weighting. No new
 * component; no other page using `.vlz-metric--hero-dark` is touched.
 */
.vlz-hero-indicators--seo-company .vlz-metric--hero-dark .vlz-metric__value {
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.4;
}

.vlz-hero-indicators--seo-company .vlz-metric--hero-dark .vlz-metric__label {
	margin-top: 4px;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

.vlz-hero-indicators--seo-company .vlz-metric--hero-dark .vlz-metric__note {
	margin-top: 4px;
	font-size: 0.85rem;
	font-weight: 400;
	opacity: 0.92;
}

/*
 * CORRECTION 3 — Section 2 CTA buttons (§12/§13/§14/§15 of the correction
 * task). The previous implementation reused `.vlz-benefit-cards__actions`
 * styling (via the `vlz-benefit-cards__actions` wrapper class on this
 * page's own CTA row), which pairs with the `vlz-contact-action--auto`
 * width variant to produce 0 horizontal padding and a shrink-to-content
 * button (~119px wide) — undersized, cramped, not touch-friendly, and
 * visually far weaker than Legacy's substantial pill buttons (Legacy:
 * ~318px wide, ~69-71px tall, ~25px uniform padding, 18px text). Per the
 * correction task's explicit instruction NOT to force this page's CTAs
 * into `.vlz-benefit-cards__actions` styling, this page's CTA row wrapper
 * class was changed to its own page-scoped class
 * (`vlz-seo-company-supporting__actions`) and given its own Variant rule
 * below, reusing the project's established full-width contact-action
 * pill-button contract (same shape/sizing convention as
 * `.vlz-homepage-problem-value .vlz-contact-action__link`) rather than
 * inventing new button chrome. Brand colors (primary blue fill / outline)
 * are kept per the already-recorded, non-blocking Owner-flagged deviation
 * from Legacy's one-off green/navy pair (see the Local Implementation
 * report §I.4) — only size/padding/balance are corrected here.
 */
.vlz-seo-company-supporting__actions {
	display: flex;
	gap: 20px;
	margin-block-start: 30px;
}

.vlz-seo-company-supporting__actions > * {
	flex: 1 1 0;
	margin: 0;
}

.vlz-seo-company-supporting__actions .vlz-contact-action__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 66px;
	padding-inline: 24px;
	border: 1px solid var(--vlz-color-primary, #1e7dbf);
	border-radius: var(--vlz-radius-pill, 999px);
	background: var(--vlz-color-primary, #1e7dbf);
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}

.vlz-seo-company-supporting__actions .vlz-contact-action--secondary-outline .vlz-contact-action__link {
	background: transparent;
	color: var(--vlz-color-primary, #1e7dbf);
}

.vlz-seo-company-supporting__actions .vlz-contact-action__link:hover,
.vlz-seo-company-supporting__actions .vlz-contact-action__link:focus-visible {
	background: rgba(2, 1, 1, 0.59);
	border-color: rgba(2, 1, 1, 0.59);
	color: #fff;
}

.vlz-seo-company-supporting__actions .vlz-contact-action--secondary-outline .vlz-contact-action__link:hover,
.vlz-seo-company-supporting__actions .vlz-contact-action--secondary-outline .vlz-contact-action__link:focus-visible {
	background: var(--vlz-color-primary, #1e7dbf);
	color: #fff;
}

@media (max-width: 767px) {
	.vlz-seo-company-supporting__actions {
		flex-direction: column;
		gap: 16px;
	}
}

/*
 * TPL-D-01 SEO Company — Sections 3 + 4 (Local implementation).
 * `.vlz-seo-company-diagnostic` (Section 3 — "لماذا يتراجع ترتيب موقعك"، 1
 * intro text card + 2 `vlinzza/icon-box` cards) and
 * `.vlz-seo-company-diagnostic-technical` (Section 4 — "سيو داخلي يختبئ خلف
 * تصميم جميل"، 3 `vlinzza/icon-box` cards, no separate section heading — the
 * first card's own title carries that role, matching Legacy). Same
 * `core/group` grid + page-scoped card wrapper mechanism already used for
 * `.vlz-benefit-cards__grid`/`__card` — no new component, additive-only, 0
 * change to any existing selector.
 *
 * Legacy re-measured this task at genuine Desktop 1440x900 / Tablet 768x1024
 * / Mobile 390x844: both sections stay 3 EQUAL columns side-by-side at
 * Tablet (768px, no stacking) and only stack to 1 column at Mobile. This is
 * the opposite of `.vlz-benefit-cards__grid`'s own 768px stack breakpoint,
 * so the collapse rule below intentionally uses `max-width: 767px`, not
 * 768px, to match this page's own measured contract instead of copying the
 * other component's breakpoint value.
 *
 * OWNER VISUAL CORRECTION (this task) — every value below was re-measured
 * directly against Legacy's computed styles (not guessed, not copied from
 * `.vlz-benefit-cards__card`, which is a visually different, bordered/
 * shadowed "card" pattern Legacy does NOT use here):
 * - Icon + title + description are all CENTER-aligned inside each icon-box
 *   (`text-align:center` measured on the Legacy widget wrapper, the title,
 *   and the description alike) — NOT right/`start`-aligned. This is
 *   distinct from Section 3's own intro column (heading+paragraph, not an
 *   icon-box), which Legacy keeps right-aligned/RTL-default, confirmed
 *   separately (`text-align:right`, `direction:rtl`) and left unchanged.
 * - Each of the 5 icons carries its OWN distinct Legacy color (not the
 *   project's primary blue) — see the 5 modifier rules below, each keyed to
 *   a `className` already set on that exact `vlinzza/icon-box` block
 *   instance (not `:nth-child`, which the project's own CSS rule forbids as
 *   brittle).
 * - All 5 card titles were re-measured and are genuinely the SAME Legacy
 *   color, `rgb(40, 62, 113)` — re-verified live against Legacy computed
 *   styles for every one of the 5 titles individually, not assumed; there is
 *   no per-card title color variation in Legacy itself.
 * - Icon size 50x50px (not 60px), no circular background/border-radius —
 *   Legacy renders a bare icon glyph, not a filled badge.
 * - Intro heading 22px/700 (not 26px); intro paragraph and icon-box
 *   description both 18px/line-height 27px (not 15px) — re-measured, not
 *   estimated.
 *
 * FINAL VISUAL GROUPING CORRECTION (closing task) — the prior "0 card
 * chrome" finding above measured the wrong Legacy element:
 * `.elementor-widget-wrap` (the shared column-level wrap, transparent by
 * design) instead of `.elementor-widget-container` (Elementor's per-widget
 * Advanced>Background/Padding/Box-Shadow wrapper, a DIRECT CHILD of each
 * icon-box widget, one level deeper). Re-measured on all 5 Legacy icon-box
 * widgets (`37c0068`,`99987ea`,`c69accc`,`ab09a0d`,`4ac7c62`) individually —
 * every one of them DOES carry real card chrome at that level:
 *   background: rgb(255,255,255) (white) — 5/5
 *   padding: 35px (uniform 4 sides on 4/5; last card 17px/35px/25px, a
 *     Legacy-side per-widget override, not reproduced — 35px uniform used)
 *   box-shadow: 0 0 7px 2px rgba(0,0,0,0.14) (soft ambient, no offset) — 5/5
 *   border: none, border-radius: 0 — 5/5
 * This white+shadow card sits on the SECTION's own background, which is
 * ALSO not plain white in Legacy: both `b21798b` and `b236047` measured
 * `background: rgba(248,248,248,0.67)` (a light grey wash). The white card
 * against the grey section is exactly what makes each unit read as a
 * contained block (figure-ground contrast) even though there is 0 border —
 * confirmed by measurement, not assumed from appearance. Card chrome + the
 * section wash are restored below, scoped to `.vlz-seo-company-diagnostic`
 * / `-technical` and their own `__card` descendants only. The intro column
 * (heading+paragraph+arrow, Legacy widgets `cf11c76`/`91cca74`/`f92d8ff`)
 * was re-checked and confirmed to carry 0 background/padding/shadow in
 * Legacy — left uncarded, unchanged.
 */
.vlz-seo-company-diagnostic,
.vlz-seo-company-diagnostic-technical {
	padding: 60px 0;
	background: rgba(248, 248, 248, 0.67);
}

.vlz-seo-company-diagnostic__container,
.vlz-seo-company-diagnostic-technical__container {
	max-width: 1140px;
	margin-inline: auto;
	padding-inline: 20px;
}

.vlz-seo-company-diagnostic__grid,
.vlz-seo-company-diagnostic-technical__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 30px;
	row-gap: 30px;
	align-items: start;
}

.vlz-seo-company-diagnostic__intro h2 {
	margin: 0 0 16px;
	color: #283e71;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
}

.vlz-seo-company-diagnostic__intro p {
	margin: 0;
	color: var(--vlz-color-text-muted, #555);
	font-size: 18px;
	line-height: 27px;
}

/*
 * Decorative arrow (Legacy widget `f92d8ff`, `icon-arrow-left`, no text/
 * link) — restored per Owner review. Legacy: color rgb(40,62,113) (same
 * navy as the headings), 50x50px, right-aligned within the intro column,
 * placed after the paragraph. Reproduced as a plain inline SVG (Core HTML
 * block) — no new Custom Block, per the task's explicit instruction.
 */
.vlz-seo-company-diagnostic__arrow {
	margin-block-start: 20px;
	text-align: right;
	color: #283e71;
}

.vlz-seo-company-diagnostic__arrow svg {
	inline-size: 50px;
	block-size: 50px;
}

.vlz-seo-company-diagnostic__card,
.vlz-seo-company-diagnostic-technical__card {
	background: #fff;
	padding: 35px;
	box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.14);
	border-radius: 0;
}

.vlz-seo-company-diagnostic__card .vlz-iconbox,
.vlz-seo-company-diagnostic-technical__card .vlz-iconbox {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0;
}

.vlz-seo-company-diagnostic__card .vlz-iconbox__icon,
.vlz-seo-company-diagnostic-technical__card .vlz-iconbox__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 50px;
	block-size: 50px;
	margin-block-end: 15px;
	color: var(--vlz-color-primary, #1e7dbf);
}

.vlz-seo-company-diagnostic__card .vlz-icon,
.vlz-seo-company-diagnostic-technical__card .vlz-icon {
	inline-size: 50px;
	block-size: 50px;
}

.vlz-seo-company-diagnostic__card .vlz-iconbox__title,
.vlz-seo-company-diagnostic-technical__card .vlz-iconbox__title {
	margin: 0 0 30px;
	color: #283e71;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.vlz-seo-company-diagnostic__card .vlz-iconbox__text,
.vlz-seo-company-diagnostic-technical__card .vlz-iconbox__text {
	margin: 0;
	color: var(--vlz-color-text-muted, #555);
	font-size: 18px;
	line-height: 27px;
	text-align: center;
}

/* Individual per-card icon colors — re-extracted live from Legacy computed styles, not guessed. */
.vlz-diagnostic-icon--intent .vlz-iconbox__icon {
	color: #0c4703;
}

.vlz-diagnostic-icon--search-language .vlz-iconbox__icon {
	color: #55acee;
}

.vlz-diagnostic-icon--onpage .vlz-iconbox__icon {
	color: #3b5999;
}

.vlz-diagnostic-icon--authority .vlz-iconbox__icon {
	color: #db0000;
}

.vlz-diagnostic-icon--technical .vlz-iconbox__icon {
	color: #000000;
}

@media (max-width: 767px) {
	.vlz-seo-company-diagnostic__container .vlz-seo-company-diagnostic__grid,
	.vlz-seo-company-diagnostic-technical__container .vlz-seo-company-diagnostic-technical__grid {
		grid-template-columns: 1fr;
	}
}

/* ===================================================================
 * VLINZZA — Service Scope Table (TPL-D-01 SEO Company Section 6)
 *
 * Generic, reusable, content-editable service-scope explainer. A real
 * `core/table` (`<table>`/`<thead>`/`<tbody>`/`<th>`) is used on
 * Desktop/Tablet; a native `<details>` grouped accordion (zero JS) is
 * used on Mobile. Both live in server-rendered HTML at all times; only
 * one is ever visually shown, switched purely by the breakpoint below.
 * `display:none` also removes the hidden copy from the accessibility
 * tree (no duplicate screen-reader reading / tab stops), while leaving
 * the markup in the raw HTML search engines crawl — nothing is removed
 * from the DOM by JavaScript. Not a pricing/comparison-table look: no
 * card shadows, no plan-column styling, no price figures.
 *
 * VISUAL REFINEMENT PASS (TPL-D-01 §6 visual-refinement-and-QA) — CSS
 * only, no markup/content/architecture change. Legacy's Section 6 was
 * used strictly as a design-LANGUAGE reference (section-as-one-block
 * presence, light background, white intro panel, unified table
 * surface, commercial polish) — never its pricing structure/content,
 * which stays explicitly rejected per §B/§C above. Every rule below
 * remains scoped under `.vlz-service-scope` / its descendants; no core
 * block, global heading, or global button style was touched.
 *
 * FINAL VISUAL HIERARCHY CORRECTION PASS (TPL-D-01 §6 final-visual-
 * hierarchy-correction) — CSS only, still no markup/content change.
 * Adds: centered Desktop header/group/service-name cells, a 3-column
 * background-tint identity system, and Mobile pill/chip containers for
 * the service-title and the "يشمل"/"النطاق" labels so Mobile reads as
 * 4 distinct hierarchy levels instead of continuous paragraphs.
 *
 * FINAL OWNER VISUAL CLOSURE PASS (TPL-D-01 §6 final-owner-visual-
 * closure) — CSS only, no markup/content change. Removes the intro
 * white-card treatment (plain paragraph on Section background); replaces
 * the 3-column tint system with the owner's exact final Desktop colors
 * (#FFFFFF / #EDF5FC / #E3EDF6, continuous by column including the
 * group-header row via a hard-stop background gradient — no 4th color,
 * no accent rail); unifies every table border to #C7D5E3; and updates
 * the Mobile group header / service-title box / "يشمل" / "النطاق" label
 * colors and centers Mobile body text per the owner's final grammar.
 * =================================================================== */

.vlz-service-scope {
	padding-block: var(--vlz-section-space, 5rem);
	background-color: #eef3f9;
	direction: rtl;
}

.vlz-service-scope__container {
	max-inline-size: 1140px;
	margin-inline: auto;
	padding-inline: 20px;
}

.vlz-service-scope__title {
	margin: 0 0 28px;
	max-inline-size: 760px;
	color: var(--vlz-color-heading, #1b2538);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.35;
}

/* Owner final decision: NO card/panel treatment. Plain paragraph sitting
 * directly on the Section background — no background, border, shadow, or
 * radius. Only readable max-width, comfortable line-height and spacing. */
.vlz-service-scope__intro {
	margin: 0 0 36px;
	max-inline-size: 780px;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--vlz-color-text-muted, #555);
	line-height: var(--vlz-leading-body, 1.7);
}

/* ------------------------------------------------------- Desktop table */

/* Unified white table surface — the table now reads as one contained
 * component instead of a grid sitting directly on the page. */
.vlz-service-scope__table-fig {
	margin: 0 0 40px;
	overflow: hidden;
	border: 1px solid #c7d5e3;
	border-radius: 10px;
	background: #fff;
}

.vlz-service-scope__table {
	inline-size: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}

/* Unified border system — one color (#c7d5e3) everywhere, 1px, connected
 * inner/outer grid. No fragmented/mismatched border colors. */
.vlz-service-scope__table th,
.vlz-service-scope__table td {
	padding: 20px 22px;
	overflow-wrap: break-word;
	text-align: start;
	vertical-align: top;
	line-height: var(--vlz-leading-body, 1.7);
	border-block-end: 1px solid #c7d5e3;
}

.vlz-service-scope__table th:not(:last-child),
.vlz-service-scope__table td:not(:last-child) {
	border-inline-end: 1px solid #c7d5e3;
}

/* Header row: centered, bold, navy text, same background as its own
 * column (continuity — no independent header color). A 2px bottom
 * border (still the same border color family) is the only allowed
 * extra weight, purely for hierarchy. */
.vlz-service-scope__table thead th {
	color: var(--vlz-color-heading, #1b2538);
	font-weight: 700;
	text-align: center;
	vertical-align: middle;
	padding-block: 22px;
	border-block-end: 2px solid #c7d5e3;
}

.vlz-service-scope__table tbody tr:last-child td {
	border-block-end: none;
}

/* -------------------------------------------------------------------
 * Column color system (Desktop) — OWNER FINAL DECISION. Three columns,
 * each with ONE continuous color running header-to-last-row. No 4th
 * color, no independent group-row tint, no accent rail. Column 1
 * (مجال العمل) = #ffffff (small titles column). Column 2 (ماذا يشمل) =
 * #edf5fc (very light blue — carries the most text). Column 3 (كيف
 * يتحدد نطاقه) = #e3edf6 (quiet blue-gray). Header and body share the
 * same column background — continuity, not two different rows of
 * color. */

/* Column balance: مجال العمل ~20% / ماذا يشمل ~50% / كيف يتحدد نطاقه ~30% */
.vlz-service-scope__table th:nth-child(1),
.vlz-service-scope__table td:nth-child(1) {
	inline-size: 20%;
}

.vlz-service-scope__table th:nth-child(2),
.vlz-service-scope__table td:nth-child(2) {
	inline-size: 50%;
}

.vlz-service-scope__table th:nth-child(3),
.vlz-service-scope__table td:nth-child(3) {
	inline-size: 30%;
}

.vlz-service-scope__table thead th:nth-child(1),
.vlz-service-scope__table tbody tr:not(.vlz-service-scope__group-row) td:nth-child(1) {
	background: #ffffff;
}

.vlz-service-scope__table thead th:nth-child(2),
.vlz-service-scope__table tbody tr:not(.vlz-service-scope__group-row) td:nth-child(2) {
	background: #edf5fc;
}

.vlz-service-scope__table thead th:nth-child(3),
.vlz-service-scope__table tbody tr:not(.vlz-service-scope__group-row) td:nth-child(3) {
	background: #e3edf6;
}

.vlz-service-scope__table td {
	color: var(--vlz-color-text-muted, #444);
}

/* Column 1 body cells read as an actual "titles" column — centered,
 * bold, vertically centered. Background comes from the column-continuity
 * rule above (no separate tint), scoped to real data rows only
 * (`:not(.vlz-service-scope__group-row)`) so the group-header row below
 * keeps its own gradient treatment instead of inheriting a single-column
 * background through `nth-child`. */
.vlz-service-scope__table tbody tr:not(.vlz-service-scope__group-row) td:nth-child(1) {
	color: var(--vlz-color-heading, #1b2538);
	font-weight: 700;
	text-align: center;
	vertical-align: middle;
}

/* Columns 2/3 body text stays start-aligned/RTL — long text is never
 * centered on Desktop. */

/* Group-header rows (colspan="3", one physical cell): the 3 column
 * colors must still read as CONTINUOUS underneath the centered group
 * title, so a hard-stop background gradient reproduces the exact same
 * three column colors/boundaries (20% / 70% / 100%) instead of a 4th
 * independent group color. No accent rail, no separate tint — text is
 * simply centered, bold, and slightly larger over the same 3 colors. */
.vlz-service-scope__group-row td {
	background: linear-gradient(
		to left,
		#ffffff 0%,
		#ffffff 20%,
		#edf5fc 20%,
		#edf5fc 70%,
		#e3edf6 70%,
		#e3edf6 100%
	);
	color: var(--vlz-color-heading, #1b2538);
	font-weight: 700;
	font-size: 1.05em;
	text-align: center;
	vertical-align: middle;
	padding-block: 20px;
	border-inline-end: none;
	border-inline-start: none;
}

@media (max-width: 990px) {
	.vlz-service-scope__table-fig {
		display: none;
	}
}

/* -------------------------------------------------- Mobile accordion */

.vlz-service-scope__accordion {
	display: none;
}

@media (max-width: 990px) {
	.vlz-service-scope__accordion {
		display: block;
	}
}

.vlz-service-scope__group {
	margin-block-end: 12px;
	border: 1px solid rgba(11, 32, 56, 0.1);
	border-radius: var(--vlz-radius-md, 0.5rem);
	background: #fff;
	overflow: hidden;
}

/* Mobile Group header — full-width summary area, centered text, bold,
 * rounded container (inherited from .vlz-service-scope__group above),
 * `+`/`−` indicator on the side, large touch target. */
.vlz-service-scope__group > summary {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 18px 44px;
	min-block-size: 52px;
	background: #dceaf7;
	color: #0f2f57;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.4;
	text-align: center;
	list-style: none;
	cursor: pointer;
}

.vlz-service-scope__group > summary::-webkit-details-marker {
	display: none;
}

.vlz-service-scope__group > summary::after {
	content: "+";
	position: absolute;
	inset-inline-end: 20px;
	flex: 0 0 auto;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--vlz-color-primary, #1e7dbf);
}

.vlz-service-scope__group[open] > summary::after {
	content: "\2212";
}

.vlz-service-scope__group-body {
	padding: 4px 18px 6px;
}

.vlz-service-scope__service {
	padding-block: 16px 0;
	text-align: center;
}

/* Service-title container — LEVEL 2 of the mandatory 4-level Mobile
 * hierarchy (Group → Service title → Label → Body text). A distinct,
 * centered, bold, medium-radius Title Box — not a small capsule/pill,
 * not clickable, not a CTA button. */
.vlz-service-scope__service-name {
	display: block;
	inline-size: fit-content;
	max-inline-size: 100%;
	margin-block: 0 14px;
	margin-inline: auto;
	padding: 10px 22px;
	border-radius: 12px;
	background: #ffffff;
	border: 1px solid #c7d5e3;
	color: #0f2f57;
	font-weight: 700;
	text-align: center;
}

/* "يشمل" / "النطاق" labels — LEVEL 3 of the hierarchy. Compact,
 * non-interactive, centered, rounded Label Box containers (not plain
 * text), each carrying the same column-family tint its Desktop column
 * uses, so the visual grammar matches between Desktop and Mobile. */
.vlz-service-scope__service-label {
	display: inline-block;
	inline-size: fit-content;
	margin-block: 0 8px;
	margin-inline: auto;
	padding: 5px 16px;
	border-radius: 999px;
	color: #0f2f57;
	font-weight: 700;
	font-size: 0.8rem;
}

/* "يشمل" — column-2 family tint (the content column it introduces). */
.vlz-service-scope__service-name + .vlz-service-scope__service-label {
	background: #edf5fc;
}

/* "النطاق" — column-3 family tint: distinct but quiet, immediately after
 * the light internal divider. */
.vlz-service-scope__divider-light + .vlz-service-scope__service-label {
	background: #e3edf6;
}

/* Owner final decision: Mobile body text ("ماذا يشمل" / "كيف يتحدد
 * نطاقه" content) is centered, not start-aligned, so it never reads as
 * continuous connected paragraphs. */
.vlz-service-scope__service-text {
	margin-inline: auto;
	max-inline-size: 34rem;
	color: var(--vlz-color-text-muted, #555);
	line-height: var(--vlz-leading-body, 1.7);
	text-align: center;
}

/* Internal divider ("يشمل" ↔ "النطاق") — light. */
.vlz-service-scope__divider-light {
	margin: 14px 0;
	border: none;
	border-block-start: 1px solid #d5e0ea;
	opacity: 1;
}

/* Service-to-service divider — clearly stronger, with more spacing. */
.vlz-service-scope__divider-strong {
	margin: 22px 0 0;
	border: none;
	border-block-start: 2px solid #c7d5e3;
	opacity: 1;
}

.vlz-service-scope__service:last-child .vlz-service-scope__divider-strong {
	display: none;
}

/* ------------------------------------------------------------- CTA block */

.vlz-service-scope__cta {
	margin-block-start: 16px;
	padding: 40px 32px;
	max-inline-size: 100%;
	border: 1px solid rgba(11, 32, 56, 0.07);
	border-radius: var(--vlz-radius-lg, 16px);
	background: #fff;
	text-align: center;
}

.vlz-service-scope__cta-title {
	margin: 0 0 12px;
	color: var(--vlz-color-heading, #1b2538);
}

.vlz-service-scope__cta-text {
	margin: 0 auto 24px;
	max-inline-size: 640px;
	color: var(--vlz-color-text-muted, #555);
	line-height: var(--vlz-leading-body, 1.7);
}

.vlz-service-scope__cta-actions {
	justify-content: center;
}

.vlz-service-scope__cta-actions .vlz-contact-action__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-inline-size: 240px;
	min-block-size: 60px;
	padding-inline: 40px;
	border: 0;
	border-radius: 27px;
	background: var(--vlz-color-primary, #1e7dbf);
	color: #fff;
	font-family: "IBM Plex Sans Arabic", Arial, sans-serif;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
}

.vlz-service-scope__cta-actions .vlz-contact-action__link:hover,
.vlz-service-scope__cta-actions .vlz-contact-action__link:focus-visible {
	background: var(--vlz-color-link-hover, #145a8c);
	color: #fff;
}

.vlz-service-scope__cta-actions .vlz-contact-action__link:focus-visible {
	outline: 2px solid var(--vlz-color-primary, #1e7dbf);
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.vlz-service-scope {
		padding-block: 48px;
	}

	.vlz-service-scope__title {
		font-size: 24px;
		line-height: 34px;
	}

	.vlz-service-scope__cta {
		padding: 32px 20px;
	}

	.vlz-service-scope__cta-actions .vlz-contact-action__link {
		inline-size: 100%;
	}
}

/* ===================================================================
 * VLINZZA — SEO Company Section 7 (TPL-D-01) — Services/Focus-Areas
 * Icon-Box Grid, page-scoped
 *
 * Reuses the existing global `vlinzza/icon-box` Custom Block (default
 * variant, no new Component/Variant created) for all 9 items — a plain
 * icon + title + paragraph, no new markup capability was needed.
 *
 * Legacy reference (`elementor-element-32c24e29`, 9 ElementsKit icon-
 * boxes, 3-column grid) carries genuinely ZERO card chrome: measured
 * live at `.elementor-widget-container` on all 9 widgets — background
 * transparent, padding 0, box-shadow none, border-radius 0, section
 * background also transparent/white. Icon/title/paragraph are all
 * center-aligned (re-measured live, not assumed); icon color is the
 * project's own primary blue `#1e7dbf` (uniform across all 9, not
 * per-item like the diagnostic grid in Sections 3/4).
 *
 * OWNER-APPROVED INTENTIONAL DEVIATION from that plain-card reference:
 * each card gets a soft, light, brand-compatible tinted background
 * covering the entire card body (not a strip/header/icon-only tint).
 * Only 4 tones are used, assigned by an explicit `--tone-a/b/c/d`
 * modifier class per card (not `:nth-child`, which this project's own
 * CSS convention already treats as brittle — see the diagnostic-grid
 * comment above) and simply repeated across the 9 cards (A,B,C,D,A,
 * B,C,D,A) — no rainbow, no 9 distinct colors, no colors outside the
 * existing light-blue/blue-gray family already used elsewhere on this
 * exact page (Section 6's `#EDF5FC`/`#E3EDF6` column tints, Sections
 * 3/4's grey-wash section background). Section background itself stays
 * white/transparent, matching the Legacy reference — the cards alone
 * carry the new color, not the section.
 * ===================================================================
 */
.vlz-seo-company-services-grid {
	padding: 60px 0;
	background: #fff;
}

.vlz-seo-company-services-grid__container {
	max-width: 1140px;
	margin-inline: auto;
	padding-inline: 20px;
}

.vlz-seo-company-services-grid__container .vlz-seo-company-services-grid__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 30px;
	row-gap: 30px;
	align-items: stretch;
}

.vlz-seo-company-services-grid__card {
	padding: 35px;
	border-radius: 14px;
	border: 1px solid rgba(199, 213, 227, 0.5);
}

.vlz-seo-company-services-grid__card .vlz-iconbox {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0;
}

.vlz-seo-company-services-grid__card .vlz-iconbox__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 50px;
	block-size: 50px;
	margin-block-end: 15px;
	color: var(--vlz-color-primary, #1e7dbf);
}

.vlz-seo-company-services-grid__card .vlz-icon {
	inline-size: 50px;
	block-size: 50px;
}

.vlz-seo-company-services-grid__card .vlz-iconbox__title {
	margin: 0 0 12px;
	color: #1a1a1a;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.vlz-seo-company-services-grid__card .vlz-iconbox__text {
	margin: 0;
	color: var(--vlz-color-text-muted, #555);
	font-size: 15px;
	line-height: 1.7;
	text-align: center;
}

/* 4-tone soft palette — light blue / blue-gray / soft neutral blue family only. */
.vlz-seo-company-services-grid__card--tone-a {
	background: #f4f8fc;
}

.vlz-seo-company-services-grid__card--tone-b {
	background: #edf5fc;
}

.vlz-seo-company-services-grid__card--tone-c {
	background: #eaf2f8;
}

.vlz-seo-company-services-grid__card--tone-d {
	background: #f3f7fb;
}

@media (max-width: 767px) {
	.vlz-seo-company-services-grid__container .vlz-seo-company-services-grid__grid {
		grid-template-columns: 1fr;
	}
}

/*
 * Section 7 heading — Owner decision (2026-08-24, heading-addition task):
 * Legacy's own Section 7 root carries no independent heading, but the
 * Owner explicitly decided this rebuilt Section needs one. No intro
 * paragraph was authorized (may be added later — do not add a placeholder
 * here). Color/size/weight match the plain, unstyled section-heading
 * precedent already used twice on this same page
 * (`.vlz-seo-company-diagnostic__intro h2` / `-technical`, navy
 * `#283e71`, `22px`/`700`) — centered here per the Owner's explicit
 * alignment decision for this heading only. No background/card/border/
 * divider/eyebrow/icon, per the Owner's explicit "plain heading" brief.
 */
.vlz-seo-company-services-grid__heading {
	margin: 0 0 40px;
	color: #283e71;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

/* ============================================================================
 * ABOUT PAGE (من نحن) — Local Clean Rebuild
 * ABOUT-PAGE-LOCAL-CLEAN-REBUILD-AND-FINAL-QA.md / ABOUT-PAGE-DEEP-VISUAL-
 * CONTENT-AUDIT-AND-REBUILD-CONTRACT.md. No new Component: Hero reuses
 * `.vlz-dark-image-hero` (dark-image-hero-metrics.php grammar, single CTA,
 * no metrics); Narrative+Principles is a VARIANT of the homepage-problem-
 * value-narrative grid shell; Values/Principles both REUSE `vlinzza/icon-box`
 * inside a `core/group` grid (same mechanism as `.vlz-benefit-cards__grid` /
 * `.vlz-split-scroll-service-body__features`); the closing band reuses
 * `.vlz-dark-cta-band` verbatim, trimmed to one action per the Owner's CTA-
 * reduction instruction. All rules below are additive and page-scoped.
 */

.vlz-about-hero__container {
	box-sizing: border-box;
	inline-size: min(900px, calc(100% - 40px));
	margin-inline: auto;
}

.vlz-about-hero__actions {
	margin-block-start: 40px;
	max-inline-size: 340px;
}

.vlz-about-hero__actions .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 67px;
	padding: 14px 12px;
	border-radius: 27px;
	background: #1b73b0;
	color: #fff;
	font-family: inherit;
	font-size: 21px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.4s;
}

.vlz-about-hero__actions .wp-block-button__link:hover,
.vlz-about-hero__actions .wp-block-button__link:focus-visible {
	background: rgba(20, 32, 52, 0.86);
}

@media (max-width: 767px) {
	.vlz-about-hero__actions {
		max-inline-size: none;
	}

	.vlz-about-hero__actions .wp-block-button__link {
		min-block-size: 64px;
		font-size: 18px;
	}
}

/* Narrative + 3 Principles Cards — Owner-approved redesign replacing the two
   removed stock images (contract §26). */
.vlz-about-narrative {
	box-sizing: border-box;
	direction: rtl;
	padding: 90px 0;
	background: #fff;
	color: #142034;
}

.vlz-about-narrative__container {
	box-sizing: border-box;
	inline-size: min(1280px, calc(100% - 40px));
	margin-inline: auto;
}

.vlz-about-narrative__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	align-items: center;
	gap: 40px;
}

.vlz-about-narrative__title {
	margin: 0 0 22px;
	color: #142034;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.35;
	text-align: right;
}

.vlz-about-narrative__text {
	margin: 0;
	color: #142034;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.7;
	text-align: right;
}

.vlz-about-narrative__principles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.vlz-about-narrative__principles .vlz-iconbox {
	align-items: flex-start;
	gap: 14px;
	box-sizing: border-box;
	padding: 28px 22px;
	background: #fff;
	border: 1px solid #eef0f4;
	border-radius: 10px;
	box-shadow: 0 4px 18px rgba(20, 32, 52, 0.06);
	text-align: right;
}

.vlz-about-narrative__principles .vlz-iconbox__icon {
	inline-size: 46px;
	block-size: 46px;
	border-radius: 50%;
	background: rgba(30, 125, 191, 0.1);
	color: var(--vlz-color-primary, #1e7dbf);
}

.vlz-about-narrative__principles .vlz-icon {
	inline-size: 22px;
	block-size: 22px;
}

.vlz-about-narrative__principles .vlz-iconbox__title {
	margin: 0 0 8px;
	color: #142034;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.vlz-about-narrative__principles .vlz-iconbox__text {
	margin: 0;
	color: #555;
	font-size: 14.5px;
	line-height: 1.6;
}

@media (max-width: 1024px) {
	.vlz-about-narrative__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

@media (max-width: 767px) {
	.vlz-about-narrative {
		padding: 50px 0;
	}

	.vlz-about-narrative__container {
		inline-size: min(325px, calc(100% - 40px));
	}

	.vlz-about-narrative__title {
		font-size: 23px;
	}

	.vlz-about-narrative__container .vlz-about-narrative__principles {
		grid-template-columns: 1fr;
	}
}

/* More Than a Workplace — dark culture narrative band, no CTA (mismatched
   proposal-form CTA removed per contract §17). */
.vlz-about-culture {
	box-sizing: border-box;
	direction: rtl;
	padding: 90px 0;
	background: #142034;
	color: #fff;
}

.vlz-about-culture__container {
	box-sizing: border-box;
	inline-size: min(860px, calc(100% - 40px));
	margin-inline: auto;
	text-align: center;
}

.vlz-about-culture__eyebrow {
	margin: 0 0 12px;
	color: #6adfd7;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.vlz-about-culture__title {
	margin: 0 0 20px;
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.4;
}

.vlz-about-culture__text {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 18px;
	line-height: 1.75;
}

@media (max-width: 767px) {
	.vlz-about-culture {
		padding: 55px 0;
	}

	.vlz-about-culture__title {
		font-size: 22px;
	}

	.vlz-about-culture__text {
		font-size: 16px;
	}
}

/* Vision / Goals — plain heading+paragraph pair, no manufactured cards. */
.vlz-about-mission {
	box-sizing: border-box;
	direction: rtl;
	padding: 80px 0;
	background: #fff;
	color: #142034;
}

.vlz-about-mission__container {
	box-sizing: border-box;
	inline-size: min(1140px, calc(100% - 40px));
	margin-inline: auto;
}

.vlz-about-mission__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 50px;
}

.vlz-about-mission__title {
	margin: 0 0 16px;
	color: #142034;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	text-align: right;
}

.vlz-about-mission__text {
	margin: 0;
	color: #555;
	font-size: 17px;
	line-height: 1.7;
	text-align: right;
}

@media (max-width: 767px) {
	.vlz-about-mission {
		padding: 50px 0;
	}

	.vlz-about-mission__container {
		inline-size: min(325px, calc(100% - 40px));
	}

	.vlz-about-mission__grid {
		grid-template-columns: 1fr;
		gap: 34px;
	}
}

/* Company Values — 6-card icon grid. Deliberately flatter/denser than the
   Principles cards above (no border/shadow/circle-icon, tighter gap, tinted
   section background) so the two grids read as visually distinct despite
   sharing the same vlinzza/icon-box block (contract §21). */
.vlz-about-values {
	box-sizing: border-box;
	direction: rtl;
	padding: 20px 0 90px;
	background: #f7f8fa;
	color: #142034;
}

.vlz-about-values__container {
	box-sizing: border-box;
	inline-size: min(1140px, calc(100% - 40px));
	margin-inline: auto;
}

.vlz-about-values__title {
	margin: 0 0 14px;
	color: #142034;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.vlz-about-values__lead {
	margin: 0 0 40px;
	color: #555;
	font-size: 17px;
	line-height: 1.6;
	text-align: center;
}

.vlz-about-values__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 28px;
	row-gap: 34px;
}

.vlz-about-values__grid .vlz-iconbox {
	align-items: flex-start;
	gap: 12px;
	text-align: right;
}

.vlz-about-values__grid .vlz-iconbox__icon {
	inline-size: 40px;
	block-size: 40px;
	color: #1e7dbf;
}

.vlz-about-values__grid .vlz-icon {
	inline-size: 24px;
	block-size: 24px;
}

.vlz-about-values__grid .vlz-iconbox__title {
	margin: 0 0 6px;
	color: #142034;
	font-size: 17px;
	font-weight: 700;
}

.vlz-about-values__grid .vlz-iconbox__text {
	margin: 0;
	color: #555;
	font-size: 14.5px;
	line-height: 1.6;
}

@media (max-width: 1024px) {
	.vlz-about-values__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * Same Core inline-CSS specificity gotcha already documented above for
 * `.vlz-benefit-cards__grid` (`core-block-supports-inline-css` prints its own
 * unconditional 3-column rule at 768px, equal (0,1,0) specificity, after this
 * stylesheet) — double-qualifying the selector reaches (0,2,0) and wins
 * deterministically without `!important`.
 */
@media (max-width: 767px) {
	.vlz-about-values {
		padding-block: 10px 55px;
	}

	.vlz-about-values__container {
		inline-size: min(325px, calc(100% - 40px));
	}

	.vlz-about-values__container .vlz-about-values__grid {
		grid-template-columns: 1fr;
	}
}

/*
 * ABOUT PAGE — Final Dark CTA — Owner Polish Fixes
 * (ABOUT-PAGE-FINAL-CTA-POLISH-FIXES.md, 2026-08-31)
 *
 * Three Owner-flagged defects on the closing `.vlz-dark-cta-band--about`
 * band, fixed here as an About-scoped addendum -- additive only, no shared
 * selector below is touched:
 *
 * 1. Centering: reuses the existing `--centered-dual` Dark CTA Band Variant
 *    grammar already shipped for TPL-D-01 SEO Company Section 5
 *    (`.vlz-dark-cta-band__content--centered-dual` etc., see above) for the
 *    text alignment/max-width. The section itself intentionally does NOT
 *    get the `--centered-dual` modifier class (that would also swap the
 *    background to navy, an unrelated, unapproved change) -- it keeps its
 *    own `--about` solid-black treatment (`::before { background-image:
 *    none }` above) untouched.
 * 2. Two buttons: plain `core/button` with explicit hrefs (/proposal-form/,
 *    /contact/) rather than `vlinzza/contact-action`, because this project's
 *    Boost2 config resolves `contact-action` slots to WhatsApp/phone
 *    destinations, not these two real page slugs (the exact defect already
 *    fixed once for this page's Hero CTA, contract §16 item 2 of the Local
 *    Clean Rebuild report).
 * 3. Hover/focus: ROOT CAUSE of the black-on-black defect is the shared base
 *    rule `.vlz-dark-cta-band__actions .wp-block-button__link:hover` (~line
 *    2773 above), which sets `background: rgba(2, 1, 1, 0.59)` -- a
 *    near-black tint that reads correctly on every OTHER family page using
 *    this component (all light-section card/action groups reuse the exact
 *    same rgba(2,1,1,.59) hover, e.g. `.vlz-benefit-cards__actions`,
 *    `.vlz-split-scroll-service-body__actions`) but disappears into this
 *    band's own solid `#000` background specifically. That base rule is
 *    used by ~12 other family pages (LinkedIn/TikTok/Snapchat/X Ads,
 *    Content Writing, Brand Identity, SMM, Content Marketing, Instagram
 *    Ads, Homepage Consultation, Centered Dual, Deep Teal) and was NOT
 *    reported as defective on any of them -- per the "no global fix without
 *    evidence" rule, it is left untouched here and overridden only for this
 *    page's own two buttons below, reusing colors already approved
 *    elsewhere in this same file for dark-section hover states rather than
 *    inventing new ones (`rgba(20, 32, 52, .86)`-style navy lighten already
 *    used on this page's own Hero CTA hover above; the white-overlay
 *    secondary-outline hover already used by `--centered-dual` at line
 *    ~3107).
 *
 * Specificity note: the parent theme's own `generatepress-bridge.css` ships
 * an unconditional default+hover/focus/active color rule for every plain
 * `core/button` on the site (`.wp-block-button:not(.vlz-btn) >
 * .wp-block-button__link:not(.has-background)`, live-verified at (0,4,0)
 * default / (0,5,0) hover/focus/active -- it also has its own `:hover`
 * treatment, a legitimate darker preset token, not the black defect). The
 * selectors below are written against this page's own real DOM ancestry
 * (section -> container -> content -> actions -> button -> link) so they
 * land at (0,6,0), safely above that bridge rule regardless of stylesheet
 * load order, without `!important` and without touching the bridge file.
 */
.vlz-dark-cta-band--about .vlz-dark-cta-band__container .vlz-about-final-cta .vlz-about-final-cta__actions {
	flex-wrap: wrap;
	row-gap: 20px;
}

.vlz-dark-cta-band--about .vlz-dark-cta-band__container .vlz-about-final-cta .vlz-about-final-cta__actions .vlz-about-final-cta__button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	inline-size: auto;
	min-inline-size: 200px;
	padding-inline: 36px;
	min-block-size: 60px;
	border: 2px solid transparent;
	border-radius: 27px;
	font-family: "IBM Plex Sans Arabic", Arial, sans-serif;
	font-size: 21px;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}

/* Button 1 -- Primary Filled ("اطلب عرضًا" -> /proposal-form/). Default fill
   is the project's own primary blue token, unchanged from the base rule. */
.vlz-dark-cta-band--about .vlz-dark-cta-band__container .vlz-about-final-cta .vlz-about-final-cta__actions .vlz-about-final-cta__button--primary .wp-block-button__link {
	border-color: var(--vlz-color-primary, #1e7dbf);
	background: var(--vlz-color-primary, #1e7dbf);
	color: #fff;
}

.vlz-dark-cta-band--about .vlz-dark-cta-band__container .vlz-about-final-cta .vlz-about-final-cta__actions .vlz-about-final-cta__button--primary .wp-block-button__link:hover,
.vlz-dark-cta-band--about .vlz-dark-cta-band__container .vlz-about-final-cta .vlz-about-final-cta__actions .vlz-about-final-cta__button--primary .wp-block-button__link:focus-visible {
	border-color: #3d97d6;
	background: #3d97d6;
	color: #fff;
}

.vlz-dark-cta-band--about .vlz-dark-cta-band__container .vlz-about-final-cta .vlz-about-final-cta__actions .vlz-about-final-cta__button--primary .wp-block-button__link:active {
	border-color: #17618f;
	background: #17618f;
	color: #fff;
}

/* Button 2 -- Secondary Outline ("تواصل معنا" -> /contact/), matching the
   dark-safe outline treatment already established for this band's own
   `--centered-dual` variant. */
.vlz-dark-cta-band--about .vlz-dark-cta-band__container .vlz-about-final-cta .vlz-about-final-cta__actions .vlz-about-final-cta__button--secondary .wp-block-button__link {
	border-color: #fff;
	background: transparent;
	color: #fff;
}

.vlz-dark-cta-band--about .vlz-dark-cta-band__container .vlz-about-final-cta .vlz-about-final-cta__actions .vlz-about-final-cta__button--secondary .wp-block-button__link:hover,
.vlz-dark-cta-band--about .vlz-dark-cta-band__container .vlz-about-final-cta .vlz-about-final-cta__actions .vlz-about-final-cta__button--secondary .wp-block-button__link:focus-visible {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.vlz-dark-cta-band--about .vlz-dark-cta-band__container .vlz-about-final-cta .vlz-about-final-cta__actions .vlz-about-final-cta__button--secondary .wp-block-button__link:active {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

.vlz-dark-cta-band--about .vlz-dark-cta-band__container .vlz-about-final-cta .vlz-about-final-cta__actions .vlz-about-final-cta__button .wp-block-button__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media (min-width: 768px) {
	.vlz-dark-cta-band--about .vlz-dark-cta-band__container .vlz-about-final-cta .vlz-about-final-cta__actions .vlz-about-final-cta__button .wp-block-button__link {
		min-inline-size: 220px;
	}
}

@media (max-width: 767px) {
	.vlz-dark-cta-band--about .vlz-dark-cta-band__container .vlz-about-final-cta .vlz-about-final-cta__actions {
		align-items: stretch;
	}

	.vlz-dark-cta-band--about .vlz-dark-cta-band__container .vlz-about-final-cta .vlz-about-final-cta__actions .vlz-about-final-cta__button .wp-block-button__link {
		min-block-size: 60px;
		font-size: 18px;
	}
}

/* ===========================================================================
 * VLINZZA — Request Service (Local Clean Rebuild + CF7)
 *
 * Source: REQUEST-SERVICE-LOCAL-CLEAN-REBUILD-CF7-AND-FINAL-QA task.
 * Two-column row: Intro/"What happens next" content (dark) is the FIRST DOM
 * child, the CF7 form (white) is the SECOND. In an `rtl` flex row the first
 * child sits at the visual right and the second at the visual left, which is
 * exactly the required Desktop layout (Form left / Intro right) with no
 * `order` hacks needed at that breakpoint. Below 1024px both columns stack
 * and `order` flips the form back to first, satisfying the Owner's
 * Form-First mobile requirement.
 * ========================================================================= */
.vlz-request-service {
	direction: rtl;
	padding-block: var(--vlz-section-space, 5rem);
	background-color: var(--vlz-color-surface, #fff);
}

.vlz-request-service__container {
	box-sizing: border-box;
	max-inline-size: 1400px;
	margin-inline: auto;
	padding-inline: var(--vlz-container-gutter, 2.25rem);
}

/* Native group blocks inherit WordPress flow-layout block gap; spacing inside this section is owned by the rules below. */
.vlz-request-service .wp-block-group > * {
	margin-block-start: 0;
}

.vlz-request-service__header {
	max-inline-size: var(--vlz-measure, 68ch);
	margin-block-end: var(--vlz-space-lg, 2.5rem);
}

.vlz-request-service__title {
	margin-block: 0 0.5rem;
	color: var(--vlz-color-heading, #1b2538);
}

.vlz-request-service__lead {
	margin-block: 0;
	color: var(--vlz-color-text-muted, #5b6472);
}

.vlz-request-service__row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--vlz-space-lg, 2.5rem);
}

.vlz-request-service__intro-col,
.vlz-request-service__form-col {
	flex: 1 1 460px;
	min-inline-size: 0;
	box-sizing: border-box;
}

/*
 * Live-verified desktop placement, RTL row: `order:1` (main-axis-start) lands
 * at the visual RIGHT and a higher order value lands further toward the
 * visual LEFT — the reverse of an LTR row's usual left-to-right reading, but
 * confirmed directly via `getBoundingClientRect().left` on this exact page,
 * not assumed. Form needs the higher order value to land on the visual LEFT
 * (required layout); Intro gets the lower value to land on the visual RIGHT.
 * The `max-width:1024px` rule further below overrides both back to
 * Form-first when the row stacks into a single column.
 */
.vlz-request-service__intro-col {
	order: 1;
}

.vlz-request-service__form-col {
	order: 2;
}

/* ---------- Right column: Intro + What Happens Next (dark) ---------- */
.vlz-request-service__intro-col {
	background-color: var(--vlz-color-ink, #1b2538);
	color: var(--vlz-color-text-invert, #fff);
	border-radius: var(--vlz-radius-lg, 12px);
	padding: var(--vlz-space-lg, 2.5rem);
}

.vlz-request-service__intro-heading {
	margin-block: 0 1rem;
	color: var(--vlz-color-text-invert, #fff);
}

.vlz-request-service__intro-text {
	margin-block: 0 1.5rem;
	color: var(--vlz-color-text-invert-muted, rgba(255, 255, 255, 0.82));
	line-height: var(--vlz-leading-body, 1.75);
}

.vlz-request-service__intro-list {
	margin: 0 0 2.5rem;
	padding-inline-start: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	color: var(--vlz-color-text-invert-muted, rgba(255, 255, 255, 0.82));
}

.vlz-request-service__intro-list li {
	line-height: var(--vlz-leading-body, 1.75);
}

.vlz-request-service__steps-heading {
	margin-block: 0 1.25rem;
	color: var(--vlz-color-text-invert, #fff);
	padding-block-start: 1.75rem;
	border-block-start: 1px solid rgba(255, 255, 255, 0.16);
}

.vlz-request-service__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	counter-reset: vlz-rs-step;
}

/* Block row (not flex) so the whole row stays a valid text target in the editor; the number badge is absolutely placed. */
.vlz-request-service__step {
	position: relative;
	min-block-size: 2rem;
	padding-block-start: 0.35rem;
	padding-inline-start: 2.9rem;
}

.vlz-request-service__step::before {
	counter-increment: vlz-rs-step;
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	content: counter(vlz-rs-step);
	flex: 0 0 auto;
	inline-size: 2rem;
	block-size: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--vlz-color-primary, #1e7dbf);
	color: #fff;
	font-weight: var(--vlz-weight-bold, 700);
	font-size: 14px;
}

.vlz-request-service__step-text {
	padding-block-start: 0.35rem;
	color: var(--vlz-color-text-invert-muted, rgba(255, 255, 255, 0.9));
	line-height: var(--vlz-leading-body, 1.75);
}

/* ---------- Left column: CF7 form (white surface) ---------- */
.vlz-request-service__form-col {
	background-color: var(--vlz-color-surface, #fff);
	border: 1px solid var(--vlz-color-border, #e4e7ec);
	border-radius: var(--vlz-radius-lg, 12px);
	box-shadow: var(--vlz-shadow-sm, 0 1px 2px rgba(16, 24, 40, 0.05));
	padding: var(--vlz-space-lg, 2.5rem);
}

.vlz-request-service__form-col .wpcf7-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 20px;
}

/* Live field order: name, email, country, phone (pairs), then budget,
 * service, how-found, message and submit each span the full row. */
.vlz-request-service__form-col .wpcf7-form .wpcf7-response-output {
	grid-column: 1 / -1;
}

/* CF7 autop renders every field of this form inside ONE <p> (label, control, label, control...), so that <p> is the field grid: name+email and country+phone share a row (label row, then control row); everything else spans the full width. */
.vlz-request-service__form-col .wpcf7-form p {
	grid-column: 1 / -1;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.4rem 20px;
}

.vlz-request-service__form-col .wpcf7-form p > label,
.vlz-request-service__form-col .wpcf7-form p > .wpcf7-form-control-wrap,
.vlz-request-service__form-col .wpcf7-form p > .wpcf7-submit {
	grid-column: 1 / -1;
}

.vlz-request-service__form-col .wpcf7-form p > .wpcf7-form-control-wrap {
	margin-block-end: 0.85rem;
}

.vlz-request-service__form-col .wpcf7-form p > label:nth-of-type(1),
.vlz-request-service__form-col .wpcf7-form p > label:nth-of-type(2) {
	grid-row: 1;
}

.vlz-request-service__form-col .wpcf7-form p > .wpcf7-form-control-wrap:nth-of-type(1),
.vlz-request-service__form-col .wpcf7-form p > .wpcf7-form-control-wrap:nth-of-type(2) {
	grid-row: 2;
}

.vlz-request-service__form-col .wpcf7-form p > label:nth-of-type(3),
.vlz-request-service__form-col .wpcf7-form p > label:nth-of-type(4) {
	grid-row: 3;
}

.vlz-request-service__form-col .wpcf7-form p > .wpcf7-form-control-wrap:nth-of-type(3),
.vlz-request-service__form-col .wpcf7-form p > .wpcf7-form-control-wrap:nth-of-type(4) {
	grid-row: 4;
}

.vlz-request-service__form-col .wpcf7-form p > label:nth-of-type(1),
.vlz-request-service__form-col .wpcf7-form p > .wpcf7-form-control-wrap:nth-of-type(1),
.vlz-request-service__form-col .wpcf7-form p > label:nth-of-type(3),
.vlz-request-service__form-col .wpcf7-form p > .wpcf7-form-control-wrap:nth-of-type(3) {
	grid-column: 1;
}

.vlz-request-service__form-col .wpcf7-form p > label:nth-of-type(2),
.vlz-request-service__form-col .wpcf7-form p > .wpcf7-form-control-wrap:nth-of-type(2),
.vlz-request-service__form-col .wpcf7-form p > label:nth-of-type(4),
.vlz-request-service__form-col .wpcf7-form p > .wpcf7-form-control-wrap:nth-of-type(4) {
	grid-column: 2;
}

.vlz-request-service__form-col .wpcf7-form p br {
	display: none;
}

.vlz-request-service__form-col .wpcf7-form label {
	color: var(--vlz-color-heading, #1b2538);
	font-size: 14px;
	font-weight: var(--vlz-weight-semibold, 600);
}

.vlz-request-service__form-col .wpcf7-form label span[aria-hidden="true"] {
	color: var(--vlz-color-danger, #d92d20);
}

.vlz-request-service__form-col .wpcf7-form-control-wrap {
	display: block;
	inline-size: 100%;
}

.vlz-request-service__form-col .wpcf7-form-control,
.vlz-request-service__form-col select.wpcf7-form-control,
.vlz-request-service__form-col textarea.wpcf7-form-control {
	inline-size: 100%;
	box-sizing: border-box;
	min-block-size: var(--vlz-control-height, 3rem);
	padding-inline: 0.9rem;
	padding-block: 0.6rem;
	border: 1px solid var(--vlz-color-border, #d0d5dd);
	border-radius: var(--vlz-radius-sm, 8px);
	background-color: var(--vlz-color-surface, #fff);
	color: var(--vlz-color-text, #1b2538);
	font-size: var(--vlz-control-font-size, 16px);
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.vlz-request-service__form-col textarea.wpcf7-form-control {
	min-block-size: 7.5rem;
	resize: vertical;
}

.vlz-request-service__form-col input.wpcf7-form-control::placeholder,
.vlz-request-service__form-col textarea.wpcf7-form-control::placeholder {
	color: var(--vlz-color-text-muted, #667085);
}

.vlz-request-service__form-col .wpcf7-form-control:focus-visible {
	outline: none;
	border-color: var(--vlz-color-primary, #1e7dbf);
	box-shadow: 0 0 0 3px rgba(30, 125, 191, 0.16);
}

.vlz-request-service__form-col select.wpcf7-form-control {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%231b2538' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 0.9rem center;
	background-size: 10px 7px;
	padding-inline-start: 2rem;
}

.vlz-request-service__form-col select.wpcf7-form-control option {
	color: #1b2538;
	background-color: #fff;
}

.vlz-request-service__form-col .wpcf7-submit {
	display: block;
	inline-size: 100%;
	min-block-size: var(--vlz-control-height, 3rem);
	border: 1px solid #2fd6a0;
	border-radius: 999px;
	background-color: #2fd6a0;
	color: #fff;
	font-size: 18px;
	font-weight: var(--vlz-weight-bold, 700);
	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.vlz-request-service__form-col .wpcf7-submit:hover {
	background-color: var(--vlz-color-primary, #1e7dbf);
	border-color: var(--vlz-color-primary, #1e7dbf);
}

.vlz-request-service__form-col .wpcf7-submit:focus-visible {
	outline: 2px solid var(--vlz-color-primary, #1e7dbf);
	outline-offset: 2px;
	background-color: var(--vlz-color-primary, #1e7dbf);
	border-color: var(--vlz-color-primary, #1e7dbf);
}

.vlz-request-service__form-col .wpcf7-submit:active {
	background-color: var(--vlz-color-primary-strong, #185f92);
	border-color: var(--vlz-color-primary-strong, #185f92);
}

.vlz-request-service__form-col .wpcf7-not-valid-tip {
	color: var(--vlz-color-danger, #d92d20);
	font-size: 13px;
}

.vlz-request-service__form-col .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.9rem 1.1rem;
	border-radius: var(--vlz-radius-sm, 8px);
	font-size: 14px;
}

.vlz-request-service__form-col form.sent .wpcf7-response-output {
	border: 1px solid #2fd6a0;
	color: #067647;
	background-color: rgba(47, 214, 160, 0.1);
}

.vlz-request-service__form-col form.invalid .wpcf7-response-output,
.vlz-request-service__form-col form.failed .wpcf7-response-output,
.vlz-request-service__form-col form.spam .wpcf7-response-output {
	border: 1px solid var(--vlz-color-danger, #d92d20);
	color: var(--vlz-color-danger, #d92d20);
	background-color: rgba(217, 45, 32, 0.08);
}

/* Tablet + Mobile: stack the two columns, Form always first regardless of
 * DOM order (Owner requirement: Form-first once stacked). */
@media (max-width: 1024px) {
	.vlz-request-service__row {
		flex-direction: column;
	}

	.vlz-request-service__form-col {
		order: -1;
	}

	.vlz-request-service__intro-col {
		order: 2;
	}
}

@media (max-width: 767px) {
	.vlz-request-service {
		padding-block: var(--vlz-space-xl, 3rem);
	}

	.vlz-request-service__form-col,
	.vlz-request-service__intro-col {
		padding: var(--vlz-space-md, 1.75rem);
	}

	.vlz-request-service__form-col .wpcf7-form {
		grid-template-columns: 1fr;
	}

	.vlz-request-service__form-col .wpcf7-form p {
		grid-template-columns: 1fr;
	}

	.vlz-request-service__form-col .wpcf7-form p > label:nth-of-type(n),
	.vlz-request-service__form-col .wpcf7-form p > .wpcf7-form-control-wrap:nth-of-type(n) {
		grid-column: 1;
		grid-row: auto;
	}
}

/* =====================================================================
 * CONTACT — Local Clean Rebuild (`_project/scripts/build-contact.php`).
 * Source: CONTACT-DEEP-VISUAL-CONTENT-FORM-AUDIT-AND-REBUILD-CONTRACT.md.
 *
 * Layout: CSS Grid, not flex — the required stacking order differs from
 * the simple two-column reorder used by `.vlz-request-service` (Mobile/
 * Tablet must show Intro -> Buttons -> Form -> Social, i.e. Social moves
 * to the very end even though it sits inside the same visual "right
 * column" as Intro/Buttons at Desktop). Grid areas let each of the 4
 * blocks be placed independently per breakpoint without any DOM reorder,
 * so source/tab order stays fixed and only the visual placement changes.
 *
 * OWNER VISUAL DECISION — NO WHITE FORM: the form surface and every field
 * use dark-navy tokens at every interaction state (default, focus, typed,
 * autofill) — see `.vlz-contact-page__form-col` block below, which reuses
 * the exact autofill/specificity fix already proven on
 * `.vlz-contact-panel__form` (components.css ~L3257-3356) rather than
 * inventing a new technique.
 * ===================================================================== */
.vlz-contact-page {
	direction: rtl;
	padding-block: var(--vlz-section-space, 5rem);
	background-color: #1c2d47;
}

.vlz-contact-page__container {
	box-sizing: border-box;
	max-inline-size: 1400px;
	margin-inline: auto;
	padding-inline: var(--vlz-container-gutter, 2.25rem);
}

.vlz-contact-page__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas:
		"intro form"
		"buttons form"
		"social form";
	align-items: start;
	gap: var(--vlz-space-lg, 2.5rem) var(--vlz-space-xl, 3rem);
}

.vlz-contact-page__intro { grid-area: intro; }
.vlz-contact-page__buttons { grid-area: buttons; }
.vlz-contact-page__social { grid-area: social; }
.vlz-contact-page__form-col { grid-area: form; }

/* ---------- Intro (H1 + lead) ---------- */
.vlz-contact-page__title {
	margin-block: 0 0.75rem;
	color: var(--vlz-color-text-invert, #fff);
}

.vlz-contact-page__lead {
	margin-block: 0;
	color: var(--vlz-color-text-invert-muted, rgba(255, 255, 255, 0.82));
	line-height: var(--vlz-leading-body, 1.75);
}

/* ---------- 3 contact buttons ----------
 * OWNER CORRECTION (2026-08-31, "CONTACT — FINAL BUTTON/SOCIAL VISUAL
 * CORRECTIONS + JS-QA COMPLIANCE"): the prior PASS's buttons were rejected
 * on visual review as oversized full-width bars. Re-sized to a moderate,
 * fixed-width CTA (matches the project's own `.vlz-contact-action--regular`
 * 48px reference height, `inc/blocks.php` ~L1080-1082) instead of stretching
 * to the full right-column width, and centered in the column. Still
 * vertically stacked at every breakpoint. Actions/hrefs unchanged —
 * CSS-only. */
.vlz-contact-page__buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.vlz-contact-page__buttons .vlz-contact-action--auto,
.vlz-contact-page__buttons .vlz-contact-action__link {
	inline-size: 16.25rem; /* 260px fixed CTA width — identical for all 3 */
	max-inline-size: 100%;
}

.vlz-contact-page__buttons .vlz-contact-action__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 3rem; /* 48px — same as the project's regular CTA size */
	padding-inline: 1.5rem;
	padding-block: 0.5rem;
	border-radius: 999px;
	font-size: 15px;
	font-weight: var(--vlz-weight-semibold, 600);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 120ms ease, filter 120ms ease;
}

/* Owner-approved 3-color palette (Phone/WhatsApp/Email), already proven
 * elsewhere on this project (Proposal Form / About CTA polish) — reused
 * verbatim, not invented for this page. Order matches source/DOM order:
 * 1 = Phone, 2 = WhatsApp, 3 = Email(temporary, reuses WhatsApp action). */
.vlz-contact-page__buttons .vlz-contact-action:nth-of-type(1) .vlz-contact-action__link {
	background-color: #1b73b0;
	color: #fff;
}

.vlz-contact-page__buttons .vlz-contact-action:nth-of-type(1) .vlz-contact-action__link:hover,
.vlz-contact-page__buttons .vlz-contact-action:nth-of-type(1) .vlz-contact-action__link:focus-visible {
	background-color: #15568a;
}

.vlz-contact-page__buttons .vlz-contact-action:nth-of-type(2) .vlz-contact-action__link {
	background-color: #2fae62;
	color: #fff;
}

.vlz-contact-page__buttons .vlz-contact-action:nth-of-type(2) .vlz-contact-action__link:hover,
.vlz-contact-page__buttons .vlz-contact-action:nth-of-type(2) .vlz-contact-action__link:focus-visible {
	background-color: #24894c;
}

.vlz-contact-page__buttons .vlz-contact-action:nth-of-type(3) .vlz-contact-action__link {
	background-color: #6adfd7;
	color: #0c2233;
}

.vlz-contact-page__buttons .vlz-contact-action:nth-of-type(3) .vlz-contact-action__link:hover,
.vlz-contact-page__buttons .vlz-contact-action:nth-of-type(3) .vlz-contact-action__link:focus-visible {
	background-color: #54cfc6;
}

.vlz-contact-page__buttons .vlz-contact-action__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.vlz-contact-page__buttons .vlz-contact-action__link:active {
	filter: brightness(0.92);
}

/* ---------- Social platforms ----------
 * OWNER CORRECTION (2026-08-31, "CONTACT — FINAL BUTTON/SOCIAL VISUAL
 * CORRECTIONS + JS-QA COMPLIANCE"):
 * 1) The "منصات التواصل الاجتماعي" heading is removed — no heading of any
 *    kind sits above the icons now (owner defect #2). The `<h2>` block was
 *    deleted from `_project/scripts/build-contact.php`; the border/spacing
 *    it used to carry now lives on this container instead.
 * 2) The circular icon-only treatment from the prior PASS is replaced with
 *    the exact visual language already live on the Legacy/App site footer
 *    (Elementor `social-icons` widget, element `3c088252` — read live from
 *    `legacy.vlinzza.com`/`vlinzza.com` output + their
 *    `post-22716.css`/`widget-social-icons-*.css`, not guessed): square
 *    shape (no radius), solid black-80%-opacity background, white glyph,
 *    small (~31px) icon box, centered row, hover -> white background /
 *    brand-blue glyph. No Elementor added — same inline-SVG links as
 *    before, CSS-only re-skin. */
.vlz-contact-page__social {
	margin-block-start: 1.75rem;
	padding-block-start: 1.75rem;
	border-block-start: 1px solid rgba(255, 255, 255, 0.16);
}

.vlz-contact-page__social-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.vlz-contact-page__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	padding: 0;
	border-radius: 0; /* footer uses Elementor's "square" shape — sharp corners */
	background-color: rgba(0, 0, 0, 0.8); /* footer: #000000CC */
	border: none;
	color: #fff;
	text-decoration: none;
	transition: background-color 120ms ease, color 120ms ease;
}

.vlz-contact-page__social-link svg {
	inline-size: 0.75rem; /* 12px, matches footer's --icon-size */
	block-size: 0.75rem;
	fill: currentColor;
}

.vlz-contact-page__social-link:hover,
.vlz-contact-page__social-link:focus-visible {
	background-color: transparent;
	color: #1DA1F2;
}

.vlz-contact-page__social-link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Transaction F — approved brand-glyph parity modifier (Theme currently
 * still wins here via `!important`; this establishes the Plugin's own correct
 * rules for the future ownership switch without changing today's output). */
.vlz-contact-page__social-link {
	border-radius: 2px;
	background-color: #252a31;
}
.vlz-contact-page__social-link svg {
	display: none;
}
.vlz-contact-page__social-link::after {
	font-family: "Vlinzza FAB";
	font-weight: 400;
	font-style: normal;
	font-size: 18px;
	line-height: 1;
}
.vlz-contact-page__social-item:nth-child(1) .vlz-contact-page__social-link::after { content: "\f39e"; }
.vlz-contact-page__social-item:nth-child(2) .vlz-contact-page__social-link::after { content: "\f099"; }
.vlz-contact-page__social-item:nth-child(3) .vlz-contact-page__social-link::after { content: "\f16d"; }
.vlz-contact-page__social-item:nth-child(4) .vlz-contact-page__social-link::after { content: "\f0e1"; }
.vlz-contact-page__social-link:focus-visible {
	outline: 2px solid #1DA1F2;
	outline-offset: 3px;
}

/* ---------- Form column (dark navy surface, per Owner mandate) ---------- */
.vlz-contact-page__form-col {
	background-color: #16233a;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--vlz-radius-lg, 12px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	padding: var(--vlz-space-lg, 2.5rem);
}

.vlz-contact-page__form-col .wpcf7-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.vlz-contact-page__form-col .wpcf7-form p {
	margin: 0 0 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.vlz-contact-page__form-col .wpcf7-form p br {
	display: none;
}

.vlz-contact-page__form-col .wpcf7-form label {
	color: var(--vlz-color-text-invert, #fff);
	font-size: 14px;
	font-weight: var(--vlz-weight-semibold, 600);
}

.vlz-contact-page__form-col .wpcf7-form label span[aria-hidden="true"] {
	color: #ff8a80;
}

.vlz-contact-page__form-col .wpcf7-form-control-wrap {
	display: block;
	inline-size: 100%;
}

/* Fields: a shade lighter than the dark form surface (#16233a), per the
 * Owner's explicit §22 direction — never transparent-to-black, never white,
 * at any state. */
.vlz-contact-page__form-col .wpcf7-form-control,
.vlz-contact-page__form-col select.wpcf7-form-control,
.vlz-contact-page__form-col textarea.wpcf7-form-control {
	inline-size: 100%;
	box-sizing: border-box;
	min-block-size: var(--vlz-control-height, 3rem);
	padding-inline: 0.9rem;
	padding-block: 0.6rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--vlz-radius-sm, 8px);
	background-color: #25395a;
	color: #fff;
	font-size: var(--vlz-control-font-size, 16px);
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.vlz-contact-page__form-col textarea.wpcf7-form-control {
	min-block-size: 8rem;
	resize: vertical;
}

.vlz-contact-page__form-col input.wpcf7-form-control::placeholder,
.vlz-contact-page__form-col textarea.wpcf7-form-control::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.vlz-contact-page__form-col select.wpcf7-form-control {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 0.9rem center;
	background-size: 10px 7px;
	padding-inline-start: 1.75rem;
}

.vlz-contact-page__form-col select.wpcf7-form-control option {
	background-color: #16233a;
	color: #fff;
}

/* Same element-selector specificity technique already proven on
 * `.vlz-contact-panel__form` (see the long comment at components.css
 * ~L3296-3330) to beat GeneratePress' own unscoped, higher-specificity
 * `input:focus` rule that would otherwise repaint the field near-white on
 * focus/typing/valid/invalid. */
/* `:valid`/`:invalid` kept at the same shade as the field's own resting
 * background (not the lighter focus shade below) so an untouched required
 * field doesn't visually read as "already focused" purely from HTML5
 * validity state — only genuine focus/active elevate to the lighter tone. */
.vlz-contact-page__form-col input.wpcf7-form-control:not(.wpcf7-submit):valid,
.vlz-contact-page__form-col input.wpcf7-form-control:not(.wpcf7-submit):invalid {
	background-color: #25395a;
	color: #fff;
}

.vlz-contact-page__form-col input.wpcf7-form-control:not(.wpcf7-submit):focus,
.vlz-contact-page__form-col input.wpcf7-form-control:not(.wpcf7-submit):focus-visible,
.vlz-contact-page__form-col input.wpcf7-form-control:not(.wpcf7-submit):active {
	background-color: #2c4467;
	color: #fff;
}

.vlz-contact-page__form-col textarea.wpcf7-form-control:focus,
.vlz-contact-page__form-col textarea.wpcf7-form-control:focus-visible,
.vlz-contact-page__form-col select.wpcf7-form-control:focus,
.vlz-contact-page__form-col select.wpcf7-form-control:focus-visible {
	background-color: #2c4467;
}

.vlz-contact-page__form-col .wpcf7-form-control:focus-visible {
	outline: none;
	border-color: var(--vlz-color-primary, #4fb3e8);
	box-shadow: 0 0 0 3px rgba(79, 179, 232, 0.35);
}

/* Chrome/Chromium autofill — same inset-box-shadow technique already
 * proven on `.vlz-contact-panel__form` (components.css ~L3340-3356),
 * filled with this form's own field background instead of `--vlz-color-ink`
 * so autofilled fields match the rest of the (non-white) field states. */
.vlz-contact-page__form-col input.wpcf7-form-control:-webkit-autofill,
.vlz-contact-page__form-col input.wpcf7-form-control:-webkit-autofill:hover,
.vlz-contact-page__form-col input.wpcf7-form-control:-webkit-autofill:focus,
.vlz-contact-page__form-col input.wpcf7-form-control:-webkit-autofill:active {
	-webkit-text-fill-color: #fff;
	-webkit-box-shadow: 0 0 0 1000px #2c4467 inset;
	box-shadow: 0 0 0 1000px #2c4467 inset;
	caret-color: #fff;
	transition: background-color 9999s ease-in-out 0s;
}

.vlz-contact-page__form-col .wpcf7-submit {
	inline-size: 100%;
	min-block-size: 3.25rem;
	margin-block-start: 0.5rem;
	border: none;
	border-radius: 999px;
	background-color: var(--vlz-color-primary, #1e7dbf);
	color: #fff;
	font-size: 16px;
	font-weight: var(--vlz-weight-bold, 700);
	cursor: pointer;
	transition: background-color 120ms ease;
}

.vlz-contact-page__form-col .wpcf7-submit:hover {
	background-color: #4fb3e8;
}

.vlz-contact-page__form-col .wpcf7-submit:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.vlz-contact-page__form-col .wpcf7-submit:active {
	background-color: #15618f;
}

.vlz-contact-page__form-col .wpcf7-not-valid-tip {
	color: #ff8a80;
	font-size: 13px;
	margin-block-start: 0.25rem;
}

.vlz-contact-page__form-col .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.85rem 1rem;
	border-radius: var(--vlz-radius-sm, 8px);
	font-size: 14px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: #fff;
}

.vlz-contact-page__form-col form.sent .wpcf7-response-output {
	background-color: rgba(47, 174, 98, 0.18);
	border-color: #2fae62;
}

.vlz-contact-page__form-col form.invalid .wpcf7-response-output,
.vlz-contact-page__form-col form.failed .wpcf7-response-output,
.vlz-contact-page__form-col form.spam .wpcf7-response-output {
	background-color: rgba(255, 138, 128, 0.18);
	border-color: #ff8a80;
}

/* ---------- Tablet + Mobile: stack, fixed order Intro -> Buttons -> Form
 * -> Social (task mandate) — matches request-service's own 1024px stacking
 * breakpoint convention (also covers the exact 768px tablet width the
 * contract flagged as a genuine pre-existing cramped-column defect). ---- */
@media (max-width: 1024px) {
	.vlz-contact-page__row {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"intro"
			"buttons"
			"form"
			"social";
	}

	/* Buttons are already vertically stacked + full-width at every
	 * breakpoint (see `.vlz-contact-page__buttons` above) — nothing
	 * breakpoint-specific left to override here. */
}

@media (max-width: 767px) {
	.vlz-contact-page {
		padding-block: var(--vlz-space-xl, 3rem);
	}

	.vlz-contact-page__form-col {
		padding: var(--vlz-space-md, 1.75rem);
	}
}

/* --------------------------------------------------- Thank-You Master Pattern */
/*
 * One shared shell for all 5 Thank-You pages (THANK-YOU-DEEP-VISUAL-
 * FUNCTIONAL-AUDIT-AND-MASTER-VARIANT-CONTRACT.md §18-20, §30). Single-
 * column, centered, bounded vertical rhythm — deliberately simpler than the
 * current live App page's 2-column split, which this pattern replaces.
 * Reuses `vlz-iconbox` (checkmark, enlarged + recolored here only) and
 * `vlz-ctaunit` (tone "plain", stripped of its panel chrome here so a single
 * CTA button doesn't look like a bordered box) rather than inventing new
 * component CSS.
 */
.vlz-thankyou {
	padding-block: var(--vlz-space-3xl, 5rem) var(--vlz-space-2xl, 4rem);
}

.vlz-thankyou__container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--vlz-space-md, 1.75rem);
	max-inline-size: 640px;
	margin-inline: auto;
	padding-inline: var(--vlz-container-gutter, 2.25rem);
	text-align: center;
}

/* Success icon: real checkmark, quiet circle chrome — not the brand logo. */
.vlz-thankyou__container .vlz-iconbox {
	align-items: center;
	gap: 0;
}

.vlz-thankyou__container .vlz-iconbox__icon {
	inline-size: 88px;
	block-size: 88px;
	margin: 0;
	border-radius: var(--vlz-radius-pill, 999px);
	background: #e1ecff;
	color: var(--vlz-color-primary, #1e7dbf);
}

.vlz-thankyou__container .vlz-iconbox__icon .vlz-icon {
	inline-size: 36px;
	block-size: 36px;
	stroke-width: 2.5;
}

.vlz-thankyou__title {
	margin: 0;
}

.vlz-thankyou__text {
	margin: 0;
	max-inline-size: 46ch;
	color: var(--vlz-color-text-muted, #555);
	line-height: var(--vlz-leading-body, 1.6);
}

/* CTA: same `vlz-ctaunit` component/grammar as every other page's CTA row,
 * with its "plain" panel chrome (border + padding) removed — a single
 * confirmation-page button doesn't need a bordered box around it. */
.vlz-thankyou__actions.vlz-ctaunit--plain {
	padding: 0;
	border: 0;
	background: transparent;
}

.vlz-thankyou__actions .wp-block-buttons {
	justify-content: center;
}

@media (max-width: 767px) {
	.vlz-thankyou {
		/* Confirmation must be visible with minimal scroll past the header
		 * (contract §20/§30 — fixes the current live page's one-viewport-of-
		 * pure-header-before-content defect). */
		padding-block: var(--vlz-space-xl, 3rem) var(--vlz-space-lg, 2.5rem);
	}

	.vlz-thankyou__container {
		gap: var(--vlz-space-sm, 1.25rem);
	}

	.vlz-thankyou__actions .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.vlz-thankyou__actions .wp-block-buttons .wp-block-button {
		width: 100%;
		flex-basis: 100%;
	}

	.vlz-thankyou__actions .wp-block-button__link {
		display: block;
		width: 100%;
	}
}

/* Reference-based visual reconstruction: overrides the former centered
 * checkmark layout above. Scoped to the new shared master markup only. */
.vlz-thankyou { padding-block: clamp(3.5rem, 8vw, 7.5rem) clamp(3rem, 6vw, 5rem); }
.vlz-thankyou__container {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
	gap: clamp(3rem, 9vw, 8rem);
	align-items: center;
	max-inline-size: 1120px;
	text-align: start;
}
.vlz-thankyou__content { max-inline-size: 620px; }
.vlz-thankyou__title { margin: 0; font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1.25; }
.vlz-thankyou__divider { inline-size: clamp(72px, 18%, 120px); margin: 1.25rem 0 1.5rem; border: 0; border-block-start: 3px solid var(--vlz-color-primary, #1e7dbf); }
.vlz-thankyou__text { margin: 0 0 .85rem; max-inline-size: 52ch; color: var(--vlz-color-text-muted, #555); font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.85; }
.vlz-thankyou__actions.vlz-ctaunit--plain { margin-block-start: 1.85rem; padding: 0; border: 0; background: transparent; }
.vlz-thankyou__actions .wp-block-buttons { justify-content: flex-start; }
.vlz-thankyou__brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; padding: clamp(1.5rem, 4vw, 3.25rem); border-inline-start: 1px solid rgba(30, 125, 191, .18); text-align: center; }
.vlz-thankyou__brand-mark { color: var(--vlz-color-primary, #1e7dbf); font-family: Arial, sans-serif; font-size: clamp(2.4rem, 5.3vw, 4.6rem); font-weight: 800; letter-spacing: .12em; line-height: 1; }
.vlz-thankyou__socials { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; }
.vlz-thankyou__social { display: inline-flex; align-items: center; justify-content: center; inline-size: 36px; block-size: 36px; border-radius: 2px; background: #252a31; color: #fff; font-family: Arial, sans-serif; font-size: 1.05rem; font-weight: 700; line-height: 1; text-decoration: none; transition: background-color .2s ease, transform .2s ease; }
.vlz-thankyou__social--linkedin { font-size: .82rem; }
.vlz-thankyou__social:hover, .vlz-thankyou__social:focus-visible { background: var(--vlz-color-primary, #1e7dbf); color: #fff; transform: translateY(-2px); }
.vlz-thankyou__social:focus-visible { outline: 3px solid rgba(30, 125, 191, .35); outline-offset: 3px; }

/* Final social-state parity: this stylesheet is enqueued after the child
 * theme, so it must retain the approved Font Awesome hover/focus contract. */
.vlz-thankyou__social:hover,
.vlz-thankyou__social:focus-visible {
	background: transparent;
	color: #1DA1F2;
	outline: 0;
	transform: none;
}
.vlz-thankyou__social:focus-visible {
	outline: 2px solid #1DA1F2;
	outline-offset: 3px;
}

/* Transaction F — approved brand-glyph parity: the pre-existing Arial
 * letter modifiers above are unused (markup carries no `--facebook`/`--twitter`/
 * `--instagram`/`--linkedin` class), so without this the box renders empty.
 * This reproduces the Theme's exact glyph mechanism now that this family is
 * prepared for Plugin ownership. */
.vlz-thankyou__social::after {
	font-family: "Vlinzza FAB";
	font-weight: 400;
	font-style: normal;
	font-size: 18px;
	line-height: 1;
}
.vlz-thankyou__social:nth-child(1)::after { content: "\f39e"; }
.vlz-thankyou__social:nth-child(2)::after { content: "\f099"; }
.vlz-thankyou__social:nth-child(3)::after { content: "\f16d"; }
.vlz-thankyou__social:nth-child(4)::after { content: "\f0e1"; }

@media (max-width: 900px) {
	.vlz-thankyou__container { grid-template-columns: 1fr; gap: 3rem; }
	.vlz-thankyou__content { max-inline-size: 680px; margin-inline: auto; }
	.vlz-thankyou__brand { border-inline-start: 0; border-block-start: 1px solid rgba(30, 125, 191, .18); padding-block-start: 2.5rem; }
}
@media (max-width: 767px) { .vlz-thankyou__brand-mark { font-size: 2.35rem; } }

/*
 * HERO-CARDS-VISUAL-CORRECTION-DMA-AND-INSTAGRAM-ADS-APP-ONLY (2026-09-12): narrow,
 * page-scoped correction. These two pages combine `.vlz-dark-image-hero--homepage`
 * (this Hero pattern's numeric-stat layout -- small label caption first via
 * `order:-1`, then a large bold-sized value figure) with
 * `.vlz-hero-indicators--middle-emphasis` (a separate, page-agnostic modifier already
 * used on 20+ other pages for a 3-line "normal / bold-middle / normal" strategic-copy
 * card, with NO order override and body-text-scale sizing). The homepage-scoped rule
 * (equal specificity, later in this file) was winning for these two pages only, so the
 * bold middle line rendered first instead of in the middle, and the first line rendered
 * at a large metric-figure size instead of body-text size. Four OTHER pages also
 * combine both classes and are intentionally left unaffected -- this correction is
 * scoped by body.page-id to touch only the two pages in this task's authorized scope.
 * Values mirror the already-approved, already-live middle-emphasis computed style
 * (verified live on the SEO Expert reference page, stable across Desktop/Tablet/
 * Mobile: 15.2px/400, 18.4px/700, 13.6px/400) -- no new visual language, no
 * metric-card/global change, icons untouched.
 */
body.page-id-37500 .vlz-hero-indicators--middle-emphasis .vlz-metric--hero-dark .vlz-metric__value,
body.page-id-37505 .vlz-hero-indicators--middle-emphasis .vlz-metric--hero-dark .vlz-metric__value {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.4;
}

body.page-id-37500 .vlz-hero-indicators--middle-emphasis .vlz-metric--hero-dark .vlz-metric__label,
body.page-id-37505 .vlz-hero-indicators--middle-emphasis .vlz-metric--hero-dark .vlz-metric__label {
	order: 0;
	margin: 4px 0 0;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

body.page-id-37500 .vlz-hero-indicators--middle-emphasis .vlz-metric--hero-dark .vlz-metric__note,
body.page-id-37505 .vlz-hero-indicators--middle-emphasis .vlz-metric--hero-dark .vlz-metric__note {
	margin: 4px 0 0;
	font-size: 0.85rem;
	font-weight: 400;
	opacity: 0.92;
}


/* T2-R11B-01 — Contact page native Social Links compatibility.
 * Scope is limited to C27 on Page 37588 through the existing page root.
 * Core Social Link owns the editable URL/label; these rules preserve the
 * approved visual contract without raw HTML in post_content. */
.vlz-contact-page .vlz-contact-page__buttons.wp-block-group,
.vlz-contact-page .vlz-contact-page__form-col.wp-block-group {
	margin-block-start: 0;
	margin-block-end: 0;
}

.vlz-contact-page .vlz-contact-page__social-list.wp-block-social-links {
	margin: 0;
	padding: 0;
	gap: 0.5rem;
}
.vlz-contact-page .vlz-contact-page__social-list .wp-social-link {
	margin: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	line-height: 0;
}
.vlz-contact-page .vlz-contact-page__social-list .wp-block-social-link.wp-social-link .wp-block-social-link-anchor {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	padding: 0;
	border-radius: 2px;
	background-color: #252a31;
	color: #fff;
	text-decoration: none;
	transition: background-color 120ms ease, color 120ms ease;
}
.vlz-contact-page .vlz-contact-page__social-list .wp-block-social-link-anchor svg { display: none; }
.vlz-contact-page .vlz-contact-page__social-list .wp-block-social-link-anchor::after {
	font-family: "Vlinzza FAB";
	font-weight: 400;
	font-style: normal;
	font-size: 18px;
	line-height: 1;
}
.vlz-contact-page .vlz-contact-page__social-list .wp-social-link:nth-child(1) .wp-block-social-link-anchor::after { content: "\f39e"; }
.vlz-contact-page .vlz-contact-page__social-list .wp-social-link:nth-child(2) .wp-block-social-link-anchor::after { content: "\f099"; }
.vlz-contact-page .vlz-contact-page__social-list .wp-social-link:nth-child(3) .wp-block-social-link-anchor::after { content: "\f16d"; }
.vlz-contact-page .vlz-contact-page__social-list .wp-social-link:nth-child(4) .wp-block-social-link-anchor::after { content: "\f0e1"; }
.vlz-contact-page .vlz-contact-page__social-list .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:hover,
.vlz-contact-page .vlz-contact-page__social-list .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:focus-visible {
	background-color: transparent;
	color: #1da1f2;
}
.vlz-contact-page .vlz-contact-page__social-list .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:focus-visible {
	outline: 2px solid #1da1f2;
	outline-offset: 3px;
}
/* T2-R11A — Thank-You native authoring: core/social-links + native groups.
 * Mirrors the approved Contact social-icon mechanism; scoped to .vlz-thankyou. */
.vlz-thankyou .vlz-thankyou__socials.wp-block-social-links {
	margin: 0;
	padding: 0;
	gap: .65rem;
	justify-content: center;
}
.vlz-thankyou .vlz-thankyou__socials .wp-social-link {
	margin: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	line-height: 0;
}
.vlz-thankyou .vlz-thankyou__socials .wp-block-social-link.wp-social-link .wp-block-social-link-anchor {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	padding: 0;
	border-radius: 2px;
	background-color: #252a31;
	color: #fff;
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease;
}
.vlz-thankyou .vlz-thankyou__socials .wp-block-social-link-anchor svg { display: none; }
.vlz-thankyou .vlz-thankyou__socials .wp-block-social-link-anchor::after {
	font-family: "Vlinzza FAB";
	font-weight: 400;
	font-style: normal;
	font-size: 18px;
	line-height: 1;
}
.vlz-thankyou .vlz-thankyou__socials .wp-social-link:nth-child(1) .wp-block-social-link-anchor::after { content: "\f39e"; }
.vlz-thankyou .vlz-thankyou__socials .wp-social-link:nth-child(2) .wp-block-social-link-anchor::after { content: "\f099"; }
.vlz-thankyou .vlz-thankyou__socials .wp-social-link:nth-child(3) .wp-block-social-link-anchor::after { content: "\f16d"; }
.vlz-thankyou .vlz-thankyou__socials .wp-social-link:nth-child(4) .wp-block-social-link-anchor::after { content: "\f0e1"; }
.vlz-thankyou .vlz-thankyou__socials .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:hover,
.vlz-thankyou .vlz-thankyou__socials .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:focus-visible {
	background-color: transparent;
	color: #1DA1F2;
	outline: 0;
	transform: none;
}
.vlz-thankyou .vlz-thankyou__socials .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:focus-visible {
	outline: 2px solid #1DA1F2;
	outline-offset: 3px;
}
/* T2-R11A — parity with the former single Custom HTML block (visual only). */
.vlz-thankyou .vlz-thankyou__brand { margin-block-start: 0; }
.vlz-thankyou .vlz-thankyou__actions.vlz-ctaunit--plain { margin-block-start: 3.7rem; }
.vlz-thankyou .vlz-thankyou__actions .wp-block-button__link { text-align: start; }

/* R-E / F-006 Icon Picker — additive icon variants (card icon, mask technique identical to the existing --badge/--graph/--target rules).
 * Only keys without a dedicated class in a family get a --pick-<key> rule; existing classes are untouched. */
.vlz-homepage-performance__icon--pick-idea::before{content:"";display:block;inline-size:40px;block-size:40px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-idea.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-idea.svg") no-repeat center / contain}
.vlz-homepage-performance__icon--pick-target::before{content:"";display:block;inline-size:40px;block-size:40px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-target.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-target.svg") no-repeat center / contain}
.vlz-homepage-performance__icon--pick-check::before{content:"";display:block;inline-size:40px;block-size:40px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-check.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-check.svg") no-repeat center / contain}
.vlz-homepage-performance__icon--pick-search::before{content:"";display:block;inline-size:40px;block-size:40px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-search.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-search.svg") no-repeat center / contain}
.vlz-homepage-performance__icon--pick-chart::before{content:"";display:block;inline-size:40px;block-size:40px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-chart.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-chart.svg") no-repeat center / contain}
.vlz-homepage-performance__icon--pick-shield::before{content:"";display:block;inline-size:40px;block-size:40px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-shield.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-shield.svg") no-repeat center / contain}
.vlz-homepage-performance__icon--pick-clock::before{content:"";display:block;inline-size:40px;block-size:40px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-clock.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-clock.svg") no-repeat center / contain}
.vlz-homepage-performance__icon--pick-sitemap::before{content:"";display:block;inline-size:40px;block-size:40px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-sitemap.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-sitemap.svg") no-repeat center / contain}
.vlz-homepage-performance__icon--pick-money-bag::before{content:"";display:block;inline-size:40px;block-size:40px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-money-bag.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-money-bag.svg") no-repeat center / contain}
.vlz-homepage-performance__icon--pick-bolt::before{content:"";display:block;inline-size:40px;block-size:40px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-bolt.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-bolt.svg") no-repeat center / contain}
.vlz-homepage-performance__icon--pick-document::before{content:"";display:block;inline-size:40px;block-size:40px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-document.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-document.svg") no-repeat center / contain}
.vlz-homepage-performance__icon--pick-audit::before{content:"";display:block;inline-size:40px;block-size:40px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-audit.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-audit.svg") no-repeat center / contain}
.vlz-homepage-performance__icon--pick-growth::before{content:"";display:block;inline-size:40px;block-size:40px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-growth.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-growth.svg") no-repeat center / contain}
.vlz-homepage-performance__icon--pick-wrench::before{content:"";display:block;inline-size:40px;block-size:40px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-wrench.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-wrench.svg") no-repeat center / contain}
.vlz-homepage-performance__icon--pick-step-chat::before{content:"";display:block;inline-size:40px;block-size:40px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-step-chat.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-step-chat.svg") no-repeat center / contain}
.vlz-homepage-performance__icon--pick-step-audit::before{content:"";display:block;inline-size:40px;block-size:40px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-step-audit.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-step-audit.svg") no-repeat center / contain}
.vlz-homepage-performance__icon--pick-step-brief::before{content:"";display:block;inline-size:40px;block-size:40px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-step-brief.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-step-brief.svg") no-repeat center / contain}
.vlz-homepage-performance__icon--pick-step-check::before{content:"";display:block;inline-size:40px;block-size:40px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-step-check.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-step-check.svg") no-repeat center / contain}
.vlz-homepage-performance__icon--pick-step-tools::before{content:"";display:block;inline-size:40px;block-size:40px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-step-tools.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-step-tools.svg") no-repeat center / contain}
.vlz-homepage-performance__icon--pick-step-trend::before{content:"";display:block;inline-size:40px;block-size:40px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-step-trend.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-step-trend.svg") no-repeat center / contain}
.vlz-homepage-operating-method__icon--pick-badge::before{content:"";display:block;inline-size:45px;block-size:45px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-badge.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-badge.svg") no-repeat center / contain}
.vlz-homepage-operating-method__icon--pick-graph::before{content:"";display:block;inline-size:45px;block-size:45px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-graph.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-graph.svg") no-repeat center / contain}
.vlz-homepage-operating-method__icon--pick-graph-two::before{content:"";display:block;inline-size:45px;block-size:45px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-graph-two.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-graph-two.svg") no-repeat center / contain}
.vlz-homepage-operating-method__icon--pick-handshake::before{content:"";display:block;inline-size:45px;block-size:45px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-handshake.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/elementskit-handshake.svg") no-repeat center / contain}
.vlz-homepage-operating-method__icon--pick-check::before{content:"";display:block;inline-size:45px;block-size:45px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-check.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-check.svg") no-repeat center / contain}
.vlz-homepage-operating-method__icon--pick-search::before{content:"";display:block;inline-size:45px;block-size:45px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-search.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-search.svg") no-repeat center / contain}
.vlz-homepage-operating-method__icon--pick-chart::before{content:"";display:block;inline-size:45px;block-size:45px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-chart.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-chart.svg") no-repeat center / contain}
.vlz-homepage-operating-method__icon--pick-shield::before{content:"";display:block;inline-size:45px;block-size:45px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-shield.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-shield.svg") no-repeat center / contain}
.vlz-homepage-operating-method__icon--pick-clock::before{content:"";display:block;inline-size:45px;block-size:45px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-clock.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-clock.svg") no-repeat center / contain}
.vlz-homepage-operating-method__icon--pick-sitemap::before{content:"";display:block;inline-size:45px;block-size:45px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-sitemap.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-sitemap.svg") no-repeat center / contain}
.vlz-homepage-operating-method__icon--pick-money-bag::before{content:"";display:block;inline-size:45px;block-size:45px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-money-bag.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-money-bag.svg") no-repeat center / contain}
.vlz-homepage-operating-method__icon--pick-bolt::before{content:"";display:block;inline-size:45px;block-size:45px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-bolt.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-bolt.svg") no-repeat center / contain}
.vlz-homepage-operating-method__icon--pick-document::before{content:"";display:block;inline-size:45px;block-size:45px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-document.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-document.svg") no-repeat center / contain}
.vlz-homepage-operating-method__icon--pick-audit::before{content:"";display:block;inline-size:45px;block-size:45px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-audit.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-audit.svg") no-repeat center / contain}
.vlz-homepage-operating-method__icon--pick-growth::before{content:"";display:block;inline-size:45px;block-size:45px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-growth.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-growth.svg") no-repeat center / contain}
.vlz-homepage-operating-method__icon--pick-wrench::before{content:"";display:block;inline-size:45px;block-size:45px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-wrench.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-wrench.svg") no-repeat center / contain}
.vlz-homepage-operating-method__icon--pick-step-chat::before{content:"";display:block;inline-size:45px;block-size:45px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-step-chat.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-step-chat.svg") no-repeat center / contain}
.vlz-homepage-operating-method__icon--pick-step-audit::before{content:"";display:block;inline-size:45px;block-size:45px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-step-audit.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-step-audit.svg") no-repeat center / contain}
.vlz-homepage-operating-method__icon--pick-step-brief::before{content:"";display:block;inline-size:45px;block-size:45px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-step-brief.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-step-brief.svg") no-repeat center / contain}
.vlz-homepage-operating-method__icon--pick-step-check::before{content:"";display:block;inline-size:45px;block-size:45px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-step-check.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-step-check.svg") no-repeat center / contain}
.vlz-homepage-operating-method__icon--pick-step-tools::before{content:"";display:block;inline-size:45px;block-size:45px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-step-tools.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-step-tools.svg") no-repeat center / contain}
.vlz-homepage-operating-method__icon--pick-step-trend::before{content:"";display:block;inline-size:45px;block-size:45px;background-color:currentColor;-webkit-mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-step-trend.svg") no-repeat center / contain;mask:url("/wp-content/plugins/vlinzza-components/assets/icons/pick-step-trend.svg") no-repeat center / contain}
/* /R-E / F-006 */