/*
 * Styling for dynamically-rendered legacy page content — ANY page using
 * template-legacy-dynamic.php (see that file and edge_clean_legacy_content()
 * in functions.php). This content's inline style="" attributes and
 * <style> blocks have already been stripped server-side, so these rules
 * can style it directly — no !important war needed, unlike the earlier
 * override-stylesheet experiment on the old, un-stripped content.
 *
 * Built by studying the REAL content of three real pages
 * (chatgpt-use-case-design, generative-ai-development,
 * hire-chatgpt-developers), not just one — the class names below are
 * the ones that actually repeat across real pages built with the old
 * page-builder (UAGB / Ultimate Addons for Gutenberg, Cool Timeline,
 * Zoho forms), so this same stylesheet should hold up reasonably well
 * on the next page converted this way too, not just these three.
 *
 * Scoped under body.edge-legacy-dynamic .legacy-content so it can never
 * affect any other page.
 */

/* Our theme's shared body background is dark navy by default (it's
   meant to blend with the dark header/footer on every facelift page),
   which made dark, readable text here look invisible — this block needs
   its own light background regardless of that site-wide default.
   overflow-x:hidden lives here (not on .legacy-content) so it only
   guards against the sub-pixel horizontal scrollbar the full-bleed
   breakout technique below can introduce, without clipping that same
   technique — .legacy-content is a narrow, centered container, and an
   element that needs to bleed full-width has to actually escape ITS
   bounds; overflow:hidden on .legacy-content itself was clipping every
   full-bleed section (the section-background bands, and the hero) at
   .legacy-content's own 1100px edge instead of the true viewport edge,
   leaving a plain white margin down both sides instead of a full-width
   band/hero. */
body.edge-legacy-dynamic {
	background: #fff;
	overflow-x: hidden;
}

/* One content width for every section, matching live (~1360px of
   content). Previously 1100px, with wide components individually
   broken out of it, which left section widths inconsistent. */
body.edge-legacy-dynamic .legacy-content {
	max-width: calc(1360px + 2 * var(--gutter, 20px));
	box-sizing: border-box;
	margin-inline: auto;
	padding: 56px var(--gutter, 20px);
	font-family: var(--font-body);
	color: var(--color-ink);
	line-height: 1.75;
	background: #fff;
}

/* Hero + contact form side by side (real site shows these as two
   columns, not stacked). Earlier investigation wrongly assumed the
   contact form (.contact-bnr-form) was a separate top-level section
   with trust-badges in between — it's actually a direct sibling of
   the hero-text block (both children of the same wrapper), with the
   trust-badges nested INSIDE the hero-text block itself. That makes
   this safe to generalize: scoped to whichever container directly
   holds a .contact-bnr-form child, so it only ever activates on pages
   that actually have this form placed next to hero content, and has
   zero effect anywhere else. */
/* flex-wrap:nowrap here, not wrap — both columns' flex-basis values
   comfortably fit side by side at this container's width (measured:
   ~880px of content in a ~983px row), but flex-wrap still triggered a
   wrap anyway (an unexplained browser quirk, not an actual space
   shortage — confirmed by forcing nowrap and seeing both columns
   render at their expected width with room to spare). The media
   query below restores stacking at narrow viewports where the columns
   genuinely wouldn't fit. */
body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .contact-bnr-form) {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 40px;
}

@media (max-width: 780px) {
	body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .contact-bnr-form) {
		flex-wrap: wrap;
	}
}

body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .contact-bnr-form) > .contact-bnr-form {
	flex: 1 1 360px;
	min-width: 0;
	box-sizing: border-box;
}

body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .contact-bnr-form) > *:not(.contact-bnr-form) {
	flex: 2 1 480px;
	min-width: 0;
}

/* ==========================================================================
   Hero (dark navy, matching the theme's own .service-hero component —
   see template-parts/service-hero-form.php and its CSS in main.css,
   the purpose-built "real content page" pattern this theme already
   ships, used as the exact reference for every value below instead of
   guessing from the homepage). The hero-with-form wrapper identified
   above doubles as "the hero section" — darkened and given full-bleed
   background here; its own ancestor (the true top-level section) has
   its padding zeroed so this can bleed flush to the page edges without
   a lighter gap around it.
   ========================================================================== */

body.edge-legacy-dynamic .legacy-content > .wp-block-uagb-container:has(.contact-bnr-form) {
	padding-top: 0;
	padding-bottom: 0;
}

/* .legacy-content's own top padding (56px, unconditional, for every
   other page/section) still left a plain white gap above the hero
   even with the wrapper's own padding zeroed above — it's the
   grandparent, not the wrapper, that was adding it. Zeroed only when
   the page actually opens with this hero, so every other page keeps
   its normal top spacing. */
body.edge-legacy-dynamic .legacy-content:has(> .wp-block-uagb-container .contact-bnr-form) {
	padding-top: 0;
}

body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .contact-bnr-form) {
	position: relative;
	z-index: 0;
	padding: clamp(48px, 6.25vw, 100px) 0 clamp(32px, 4vw, 60px);
	box-sizing: border-box;
}

body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .contact-bnr-form)::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	background: var(--color-ink);
	z-index: -1;
}

body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .contact-bnr-form) h1,
body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .contact-bnr-form) h2 {
	color: var(--color-heading);
}

body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .contact-bnr-form) h5,
body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .contact-bnr-form) h6,
body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .contact-bnr-form) p {
	color: var(--color-muted);
}

/* Trust badges: the theme's own reference (service-hero-form.php)
   renders these as a plain icon+label row divided by a vertical
   border, not a pill — replacing the pill treatment entirely rather
   than adapting it. Real per-badge icons here are drawn white (the
   "-white.webp" set, designed for exactly this dark background), so
   the dark-circle badge trick used elsewhere to fix them on a WHITE
   background would be redundant/wrong here — shown plain and small
   instead, matching .service-hero__badge-icon. */
/* Re-checked against the real live production page (not the unused
   .service-hero pilot template) — production actually shows these as
   filled rounded pills, not a plain divider list. Reverting to the
   pill shape here too, just re-tinted for the dark hero (a light
   translucent fill instead of the light-theme's var(--color-surface)
   solid gray, white text instead of ink). */
body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .contact-bnr-form) .wp-block-columns:has(img[width="28"]) {
	background: rgba(255, 255, 255, 0.08);
}

body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .contact-bnr-form) .wp-block-columns:has(img[width="28"]) .wp-block-column p {
	color: var(--color-white) !important;
	font-size: 15px;
	line-height: 1.4;
}

body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .contact-bnr-form) .wp-block-columns:has(img[width="28"]) {
	padding: 6px 18px 6px 6px;
	gap: 10px;
}

body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .contact-bnr-form) .wp-block-columns:has(img[width="28"]) img {
	width: 36px;
	height: 36px;
}

body.edge-legacy-dynamic .legacy-content .wp-block-columns:has(img[width="28"]) .wp-block-column p,
body.edge-legacy-dynamic .legacy-content .wp-block-columns:has(img[width="28"]) figure {
	margin: 0;
}

body.edge-legacy-dynamic .legacy-content .wp-block-columns:has(img[width="28"]) .wp-block-column p {
	align-self: center;
}

/* Tighter row-gap for the badges list itself (the theme's own
   .service-hero__badges uses gap:14px 0) — the generic 24px used for
   card-grid rows elsewhere is too loose for a compact divider list,
   especially once labels wrap to their own line in this narrower
   two-column hero. */
body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .contact-bnr-form) .wp-block-uagb-container.uagb-layout-flex {
	gap: 14px 0;
	align-items: flex-start;
}

/* The generic .uagb-layout-flex rule sets align-items:stretch (needed
   elsewhere, e.g. equal-height tech-stack panels) — here it silently
   stretched each badge wrapper to match the tallest item sharing its
   wrapped flex line, adding up to ~28px of dead space inside wrappers
   whose own text was shorter than a neighbor's, which read as huge
   gaps between badges even though the real gap (checked directly) was
   the intended 14px. flex-start stops that stretch. */
body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .contact-bnr-form) .wp-block-uagb-container.uagb-layout-flex > .wp-block-uagb-container:has(> .wp-block-columns) {
	align-self: flex-start;
}

/* Award/rating logo row (Owl Carousel) — plain on the dark background
   like .service-hero__awards, not boxed in light-gray cards (that
   treatment was borrowed from the homepage's white-background logo
   strip, which doesn't apply on a dark hero). */
body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .contact-bnr-form) .owl-carousel {
	margin-top: 32px;
}

body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .contact-bnr-form) .owl-carousel .owl-item {
	height: 80px;
}

/* No color filter — these are full-color award badges (DesignRush,
   G2, Goodfirms, etc.), each already drawn with its own light/white
   background baked in, so they read fine directly on the dark hero;
   force-inverting them (fine for simple monochrome icons elsewhere)
   destroyed their actual artwork here. */
body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .contact-bnr-form) .owl-carousel .owl-item img {
	max-height: 80px;
}

/* Form card: a barely-there glass panel on the dark hero (matching
   .service-hero__form-card) instead of a solid white card, plus dark-
   theme input styling so the form doesn't look like a pasted-in light
   widget against the dark background. */
body.edge-legacy-dynamic .legacy-content .contact-bnr-form {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--color-border-light);
	border-radius: 16px;
	padding: 28px;
}

body.edge-legacy-dynamic .legacy-content .contact-bnr-form p,
body.edge-legacy-dynamic .legacy-content .contact-bnr-form label,
body.edge-legacy-dynamic .legacy-content .contact-bnr-form div {
	color: var(--color-white);
}

body.edge-legacy-dynamic .legacy-content .contact-bnr-form input[type="text"],
body.edge-legacy-dynamic .legacy-content .contact-bnr-form input[type="email"],
body.edge-legacy-dynamic .legacy-content .contact-bnr-form input[type="tel"],
body.edge-legacy-dynamic .legacy-content .contact-bnr-form textarea,
body.edge-legacy-dynamic .legacy-content .contact-bnr-form select {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--color-border-light);
	color: var(--color-white);
}

body.edge-legacy-dynamic .legacy-content .contact-bnr-form input::placeholder,
body.edge-legacy-dynamic .legacy-content .contact-bnr-form textarea::placeholder {
	color: var(--color-text-muted-light);
}

/* Form layout matched to the live site: placeholder-only fields (every
   input already carries a placeholder + aria-label), name/company/email
   paired two-up, no file-upload row, centred title and submit. */
body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container.contact-bnr-form {
	align-self: center;
	margin: 0;
	padding: 32px;
}

body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .contact-bnr-form) .wp-block-uagb-container,
body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .contact-bnr-form) .owl-carousel {
	margin-bottom: 0;
}

body.edge-legacy-dynamic .legacy-content .contact-bnr-form .zcwf_col_fld input[type="submit"] {
	width: auto;
	min-width: 180px;
	padding: 12px 40px;
}

body.edge-legacy-dynamic .legacy-content .contact-bnr-form form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

body.edge-legacy-dynamic .legacy-content .contact-bnr-form form > * {
	grid-column: 1 / -1;
	margin: 0;
}

body.edge-legacy-dynamic .legacy-content .contact-bnr-form form > input[type="text"],
body.edge-legacy-dynamic .legacy-content .contact-bnr-form form > input[type="hidden"],
body.edge-legacy-dynamic .legacy-content .contact-bnr-form .zcwf_col_lab,
body.edge-legacy-dynamic .legacy-content .contact-bnr-form .zcwf_col_help,
body.edge-legacy-dynamic .legacy-content .contact-bnr-form .fileupload_row,
body.edge-legacy-dynamic .legacy-content .contact-bnr-form .wfrm_fld_dpNn {
	display: none;
}

body.edge-legacy-dynamic .legacy-content .contact-bnr-form .zcwf_row:has(#First_Name),
body.edge-legacy-dynamic .legacy-content .contact-bnr-form .zcwf_row:has(#Last_Name),
body.edge-legacy-dynamic .legacy-content .contact-bnr-form .zcwf_row:has(#Company),
body.edge-legacy-dynamic .legacy-content .contact-bnr-form .zcwf_row:has(#Email) {
	grid-column: span 1;
}

body.edge-legacy-dynamic .legacy-content .contact-bnr-form .zcwf_row,
body.edge-legacy-dynamic .legacy-content .contact-bnr-form .zcwf_col_fld {
	margin: 0;
	padding: 0;
	width: 100%;
}

body.edge-legacy-dynamic .legacy-content .contact-bnr-form .zcwf_col_fld input,
body.edge-legacy-dynamic .legacy-content .contact-bnr-form .zcwf_col_fld textarea {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
}

body.edge-legacy-dynamic .legacy-content .contact-bnr-form .zcwf_col_fld textarea {
	min-height: 96px;
}

body.edge-legacy-dynamic .legacy-content .contact-bnr-form .zcwf_title {
	margin: 0 0 6px;
	font-family: var(--font-heading, inherit);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}

body.edge-legacy-dynamic .legacy-content .contact-bnr-form .zcwf_row:has([type="submit"]) .zcwf_col_fld {
	display: flex;
	justify-content: center;
}

@media (max-width: 600px) {
	body.edge-legacy-dynamic .legacy-content .contact-bnr-form form {
		grid-template-columns: 1fr;
	}

	body.edge-legacy-dynamic .legacy-content .contact-bnr-form .zcwf_row {
		grid-column: 1 / -1 !important;
	}
}

/* Section background rhythm — alternate white/light-gray full-width
   bands behind top-level sections instead of one long uniform white
   scroll, matching the new homepage (which alternates dark-navy,
   light-gray and white bands). Each direct child of .legacy-content is
   already one real "section" in the original page-builder's own model
   (a top-level UAGB root container — alignfull/uagb-is-root-container)
   regardless of what page this template renders, so it's a reliable,
   generic hook rather than something page-specific. The background is
   painted full-bleed via a ::before breakout (left/right:50% + negative
   50vw margins) since .legacy-content itself stays width-constrained. */
body.edge-legacy-dynamic .legacy-content > .wp-block-uagb-container {
	position: relative;
	z-index: 0;
	padding-top: 40px;
	padding-bottom: 40px;
}

/* Alternating gray bands removed: the old page-builder often splits
   one visual section across several top-level blocks (e.g. two rows of
   stat cards), so strict even/odd banding cut sections in half. Rhythm
   now comes from cards, CTAs and banners on a single white page. A
   top-level block with no section heading is a continuation of the one
   above it, so it doesn't get a second full section gap. */
body.edge-legacy-dynamic .legacy-content > .wp-block-uagb-container:not(:has(h1, h2)) {
	padding-top: 0;
}

/* The old page-builder's "animate on scroll" library (AOS) hides these
   elements at low opacity until its JS marks them .aos-animate on
   scroll-into-view — unreliable in this simplified render, so content
   was sitting permanently near-invisible. Force everything visible
   instead of depending on that library triggering correctly. */
body.edge-legacy-dynamic .legacy-content [data-aos] {
	opacity: 1 !important;
	transform: none !important;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/* Bumped up from 32px to read closer to the new homepage's section
   headlines ("Five practices. One accountable team.", etc.), which
   run noticeably larger/bolder than this template's original sizing —
   part of why the converted pages felt visually flatter by comparison. */
body.edge-legacy-dynamic .legacy-content h1,
body.edge-legacy-dynamic .legacy-content h2 {
	font-size: 38px;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--color-ink);
	margin: 64px 0 20px;
}

body.edge-legacy-dynamic .legacy-content h1:first-child,
body.edge-legacy-dynamic .legacy-content h2:first-child {
	margin-top: 0;
}

/* The old page-builder's "advanced heading" block (.uagb-heading-text)
   isn't always rendered as an actual heading tag — it's frequently a
   plain <p> used for a long intro paragraph or a testimonial quote.
   Sizing every element with this class as a 32px/600 heading (matching
   it purely by class, regardless of tag) made body-length paragraphs
   render as giant bold headings. Real heading tags (h1-h6) are already
   sized correctly above/below by tag; this is the fallback for every
   other tag carrying the class. */
body.edge-legacy-dynamic .legacy-content p.uagb-heading-text,
body.edge-legacy-dynamic .legacy-content div.uagb-heading-text,
body.edge-legacy-dynamic .legacy-content span.uagb-heading-text {
	font-size: 17px;
	line-height: 1.7;
	font-weight: 400;
	color: var(--color-body-muted);
	margin: 0 0 16px;
}

body.edge-legacy-dynamic .legacy-content h3,
body.edge-legacy-dynamic .legacy-content h4,
body.edge-legacy-dynamic .legacy-content .uagb-ifb-title {
	font-size: 20px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--color-ink);
	margin: 0 0 10px;
}

body.edge-legacy-dynamic .legacy-content h5,
body.edge-legacy-dynamic .legacy-content h6 {
	font-size: 17px;
	line-height: 1.5;
	font-weight: 500;
	color: var(--color-body-muted);
	margin: 0 0 16px;
}

body.edge-legacy-dynamic .legacy-content p,
body.edge-legacy-dynamic .legacy-content .uagb-ifb-desc,
body.edge-legacy-dynamic .legacy-content li {
	font-size: 16px;
	color: var(--color-body-muted);
	margin: 0 0 16px;
}

/* WordPress's own core "text color" utility classes (has-white-color,
   has-black-color, etc. — confirmed on real content: a paragraph with
   has-white-color, meant for a dark section that no longer exists in
   this simplified single-background layout) are real classes, not
   page-builder inline junk, so edge_clean_legacy_content() correctly
   leaves them alone — but WP's own global-styles-inline-css defines
   every one of them with !important, which would otherwise make text
   invisible against our uniform white content background. This need to
   win outranks preserving an arbitrary original color choice that no
   longer has the dark backdrop it assumed. */
body.edge-legacy-dynamic .legacy-content p[class*="has-"][class*="-color"],
body.edge-legacy-dynamic .legacy-content h1[class*="has-"][class*="-color"],
body.edge-legacy-dynamic .legacy-content h2[class*="has-"][class*="-color"],
body.edge-legacy-dynamic .legacy-content h3[class*="has-"][class*="-color"],
body.edge-legacy-dynamic .legacy-content li[class*="has-"][class*="-color"] {
	color: var(--color-body-muted) !important;
}

body.edge-legacy-dynamic .legacy-content a {
	color: var(--color-orange);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* A UAGB image block with no actual <img> inside (confirmed: a
   "footer-logo" block on this page containing nothing but a stray
   &nbsp;, no image ever uploaded) is empty content, not a styling
   gap — sitting inside a dark section, its own reserved block height
   showed up as an unexplained solid-color empty bar. Hiding it loses
   nothing, since there's nothing real inside it to show. */
body.edge-legacy-dynamic .legacy-content .wp-block-uagb-image:not(:has(img)) {
	display: none;
}

/* "Global Generative AI Delivery Capabilities" — production renders this
   as a bold, solid-color CTA card (a solid red panel), not a plain
   light-gray text block. Its paragraph carries WP's own has-white-color
   class, which only makes sense against a dark backdrop — the exact
   backdrop our blanket has-*-color override above strips away on the
   (correct) assumption that no dark sections exist elsewhere on this
   page. This one section is the exception: restore a dark ink card here
   and win back white text over the blanket override. .uagb-position__sticky
   is this block's own wrapper class (confirmed unique to this section on
   this page) rather than an autogenerated block hash, so it stays stable
   across content edits. */
body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container.uagb-position__sticky {
	position: relative;
	background: var(--color-ink);
	border-radius: 16px;
	padding: clamp(32px, 4vw, 56px);
	margin: 0;
	overflow: hidden;
	box-sizing: border-box;
}

body.edge-legacy-dynamic .legacy-content .uagb-position__sticky > .wp-block-columns {
	gap: clamp(32px, 4vw, 56px);
	margin: 0;
}

body.edge-legacy-dynamic .legacy-content .uagb-position__sticky .uagb-heading-text {
	font-size: clamp(26px, 2.6vw, 36px);
	margin: 0 0 16px;
}

body.edge-legacy-dynamic .legacy-content .uagb-position__sticky img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 12px;
}

body.edge-legacy-dynamic .legacy-content .uagb-position__sticky figure {
	margin: 0;
}

body.edge-legacy-dynamic .legacy-content .uagb-position__sticky .uagb-heading-text {
	color: #fff;
}

body.edge-legacy-dynamic .legacy-content .uagb-position__sticky p[class*="has-"][class*="-color"] {
	color: #fff !important;
}

body.edge-legacy-dynamic .legacy-content .uagb-position__sticky strong {
	color: inherit;
}

body.edge-legacy-dynamic .legacy-content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
}

/* A recurring shared icon set (legacy-of-innovation-white.webp,
   tailored-solutions-white.webp, etc. — the same "-white" icons used on
   the homepage's dark hero) is drawn white-on-transparent, designed to
   sit on a dark background. On this white content background they were
   otherwise invisible; a small dark badge behind them restores the
   contrast they were designed for. */
body.edge-legacy-dynamic .legacy-content img[src*="-white.webp"],
body.edge-legacy-dynamic .legacy-content img[src*="-white.png"] {
	background: var(--color-ink);
	border-radius: 50%;
	padding: 6px;
	box-sizing: content-box;
}

body.edge-legacy-dynamic .legacy-content mark {
	background: none;
	color: var(--color-orange);
	font-weight: 600;
}

body.edge-legacy-dynamic .legacy-content ul,
body.edge-legacy-dynamic .legacy-content ol {
	padding-left: 22px;
	margin: 0 0 20px;
}

body.edge-legacy-dynamic .legacy-content strong {
	color: var(--color-ink);
	font-weight: 600;
}

/* ==========================================================================
   Generic UAGB layout containers — the plumbing every other component
   sits inside. Forces a clean, comfortably-spaced flex flow instead of
   whatever exact pixel layout the original inline styles specified
   (those are gone now, so without this these would otherwise just stack
   with cramped default browser spacing).
   ========================================================================== */

body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container,
body.edge-legacy-dynamic .legacy-content .wp-block-uagb-call-to-action {
	display: block;
	max-width: 100%;
	margin: 0 0 32px;
	padding: 0;
}

/* Wrappers nest 3–5 deep and each added its own 32px bottom margin,
   piling up 100px+ of dead space at the end of sections. Only spacing
   between siblings is wanted, so the last child of any wrapper gets none. */
body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container > :last-child,
body.edge-legacy-dynamic .legacy-content .uagb-container-inner-blocks-wrap > :last-child {
	margin-bottom: 0;
}

/* WordPress core columns (wp:columns) used as an icon+label row (e.g.
   the hero's trust-point list) — the real site (wildnetedge.com) styles
   this whole pattern as a single rounded "pill" (icon + label packed
   together, several pills wrapping in a row), not two side-by-side
   columns with a gap. Every previous attempt to fix the gap by
   resizing the icon column's own flex properties collapsed the text
   column to one character per line (confirmed 3 times — see project
   memory) — always because the column was being resized while its
   parent still had a wide, fixed available width to redistribute.
   This avoids that trap entirely by never touching .wp-block-column's
   flex properties: instead the OUTER wrapper is shrunk to content size
   (flex: 0 0 auto, scoped so it only affects wrappers whose direct
   child is a trust-point .wp-block-columns, not unrelated flex
   siblings like the tech-stack category panels), and .wp-block-columns
   becomes a shrink-to-fit inline-flex pill. With no extra row-width
   left to distribute, WP core's own flex-basis:0/flex-grow:1 on each
   column naturally settles to just its content's size — no override,
   no collapse risk.

   IMPORTANT: .wp-block-columns is also reused elsewhere in real
   content for an unrelated pattern — a long-text column paired with a
   button column (confirmed on this same page, a "Learn More" CTA next
   to a paragraph) that ALSO happens to contain a decorative photo
   nested somewhere inside it, so an earlier version of this scoping
   (:has(.wp-block-uagb-image), matching any image at all) matched
   that pattern too and broke it exactly the same way. Trust-point
   icons consistently carry width="28" as an HTML attribute (small
   fixed-size badge icons), while real content photos don't, so
   :has(img[width="28"]) is the precise signal — every rule here uses
   it to match only the icon+label trust-point shape. Applying the
   pill/display:contents treatment to the other pattern squeezed its
   button into near-zero width, wrapping its label one character per
   line — the same collapse failure mode as before, just on a button
   instead of a text column this time.

   This specific rule can't use that same :has(img[width="28"]) check
   though — nesting :has() inside :has() (":has(> .wp-block-columns
   :has(img...))") turned out to be invalid selector syntax in this
   browser engine (confirmed via page.evaluate: el.matches() throws
   "not a valid selector"), silently dropping the whole rule with no
   error anywhere visible, ever since it was first written. It was
   NEVER actually applying — .same-height-logo tech-stack panels don't
   contain a .wp-block-columns at all, so plain :has(> .wp-block-columns)
   (single-level, valid) is already an unambiguous match for trust-point
   wrappers within this .uagb-layout-flex scope, with no need for the
   nested image check. */
body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container.uagb-layout-flex > .wp-block-uagb-container:has(> .wp-block-columns) {
	flex: 0 0 auto;
	margin: 0;
}

/* Padding/icon/font kept compact — this sits inside the narrower hero
   column now that the hero splits into two columns with the contact
   form (see .contact-bnr-form rules above), so more pills need to fit
   per row in less width to avoid collapsing to one-per-row like the
   old wider single-column hero allowed. */
/* margin:0 resets WP core's own default block-spacing margin-bottom
   on .wp-block-columns (normally harmless — it collapses invisibly
   into a plain block parent's own margin — but this element is a
   flex item here, e.g. inside the hero's badge list, and flex items
   never collapse a child's margin into their own box, so it was
   silently adding ~28px of real height inside each badge wrapper,
   making a tight 14px row-gap look like a huge gap between badges). */
body.edge-legacy-dynamic .legacy-content .wp-block-columns:has(img[width="28"]) {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	max-width: 100%;
	gap: 8px;
	margin: 0;
	background: var(--color-surface);
	border-radius: 999px;
	padding: 6px 14px 6px 6px;
}

/* Even shrink-wrapped, WP core's flex-grow:1 on both .wp-block-column
   still splits the pill's width evenly between icon and label,
   leaving a gap when the icon column's content is much narrower than
   the label's. display:contents removes the column as a flex
   participant entirely (its children become direct flex items of
   .wp-block-columns instead), so each is sized purely by its own
   content — without setting a single flex property on the column
   itself, carrying none of the collapse risk noted above. */
body.edge-legacy-dynamic .legacy-content .wp-block-columns:has(img[width="28"]) .wp-block-column {
	display: contents;
}

body.edge-legacy-dynamic .legacy-content .wp-block-columns .wp-block-uagb-image {
	display: flex;
}

body.edge-legacy-dynamic .legacy-content .wp-block-columns:has(img[width="28"]) img {
	width: 22px;
	height: 22px;
}

body.edge-legacy-dynamic .legacy-content .wp-block-columns:has(img[width="28"]) .wp-block-column p {
	margin: 0;
	font-size: 13px;
	line-height: 1.3;
	color: var(--color-ink);
}

body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container__inner-blocks-wrap,
body.edge-legacy-dynamic .legacy-content .uagb-container-inner-blocks-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 24px;
}

body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container__inner-blocks-wrap > *,
body.edge-legacy-dynamic .legacy-content .uagb-container-inner-blocks-wrap > * {
	flex: 1 1 260px;
	min-width: 0;
}

/* Re-checked against the real live production page: a section intro
   — a heading immediately followed by exactly one paragraph, nothing
   else in the same wrap — is one LEFT-aligned, full-width column, not
   a 2-column flex split (the generic rule above was giving it a 50/50
   split, heading left / paragraph right — fine when both were similar
   length, but left a large dead gap under a short heading whenever
   the paragraph ran much longer, confirmed on "The Growing Impact of
   Generative AI"). It's also NOT centered — a first attempt at this
   fix centered it, matching an unused redesign template rather than
   the page that's actually live; reverted to plain left-aligned block
   flow instead. Detected via :first-child:nth-last-child(2), i.e.
   "the first of exactly two children" — deliberately narrow
   (heading-led two-child wraps only) so it doesn't touch the many
   actual 2+ card grids that reuse this same generic wrap class. */
body.edge-legacy-dynamic .legacy-content .uagb-container-inner-blocks-wrap:has(> .wp-block-uagb-advanced-heading:first-child:nth-last-child(2)) {
	flex-direction: column;
}

/* flex:1 1 260px from the generic sibling rule sets a *height* basis
   once the axis flips to column above — resetting it back to auto so
   the heading/paragraph just take their natural content height. */
body.edge-legacy-dynamic .legacy-content .uagb-container-inner-blocks-wrap:has(> .wp-block-uagb-advanced-heading:first-child:nth-last-child(2)) > * {
	flex: 0 1 auto;
}

/* UAGB marks a container's own "Row/flex layout" setting with this
   class directly (no separate inner-blocks-wrap div in that case) —
   without matching it, its children fall back to the block/stacked
   default above and lose their intended side-by-side layout (seen on
   the tech-stack category row and the "Industries We Support" grid,
   which uses its own equivalent wrapper class). */
body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container.uagb-layout-flex {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 24px;
}

body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container.uagb-layout-flex > * {
	flex: 1 1 260px;
	min-width: 0;
}

/* .services-card-widget is only ever used for card grids (never the
   content-hugging trust-point pills, which use .uagb-layout-flex
   above) — CSS Grid instead of flex here, since a flex row's lone
   trailing item (e.g. a 7th card after two full rows of 3) stretches
   to fill the whole row via flex-grow, while production keeps it at
   normal column width. Grid's auto-fit naturally leaves a short last
   row's empty cells blank instead of stretching the remaining
   item(s) into them, matching production exactly. */
body.edge-legacy-dynamic .legacy-content .services-card-widget {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	align-items: stretch;
}

@media (min-width: 1024px) {
	body.edge-legacy-dynamic .legacy-content .services-card-widget {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

body.edge-legacy-dynamic .legacy-content .services-card-widget > * {
	margin: 0;
}

/* Some real card grids (confirmed: the "Why Choose WildnetEdge" grid)
   don't carry .services-card-widget OR .uagb-layout-flex at all — the
   original editor apparently never toggled a "row/flex layout" option
   for this specific block, leaving it a plain block container whose
   card-wrapper children just stacked full-width, one per row, with no
   grid/columns whatsoever. Detected structurally instead of by a
   marker class: any container whose children are themselves
   containers that directly wrap an info-box card is a card row,
   regardless of which layout classes the original editor happened to
   apply. */
body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .wp-block-uagb-container > .wp-block-uagb-info-box) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	align-items: stretch;
}

@media (min-width: 1024px) {
	body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .wp-block-uagb-container > .wp-block-uagb-info-box) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .wp-block-uagb-container > .wp-block-uagb-info-box) > .wp-block-uagb-container {
	display: flex;
	flex-direction: column;
	margin: 0;
}

body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .wp-block-uagb-container > .wp-block-uagb-info-box) > .wp-block-uagb-container > .wp-block-uagb-info-box {
	flex: 1 1 auto;
	margin: 0;
}

/* Equal-height cards: the builder nests each card 2–4 wrappers deep, and
   none of them passed the grid cell's height down, so cards in a row
   ended at different heights. Every wrapper that leads to exactly one
   card now stretches as a column, and the card fills what's left. */
body.edge-legacy-dynamic .legacy-content .uagb-container-inner-blocks-wrap > .wp-block-uagb-container:has(.wp-block-uagb-info-box):not(:has(.wp-block-uagb-info-box ~ .wp-block-uagb-info-box, .wp-block-uagb-container ~ .wp-block-uagb-container)) {
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
}

body.edge-legacy-dynamic .legacy-content .uagb-container-inner-blocks-wrap > .wp-block-uagb-container:has(.wp-block-uagb-info-box):not(:has(.wp-block-uagb-info-box ~ .wp-block-uagb-info-box, .wp-block-uagb-container ~ .wp-block-uagb-container)) :is(.wp-block-uagb-container, .uagb-container-inner-blocks-wrap):has(.wp-block-uagb-info-box) {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	margin-bottom: 0;
}

body.edge-legacy-dynamic .legacy-content .uagb-container-inner-blocks-wrap > .wp-block-uagb-container:has(.wp-block-uagb-info-box):not(:has(.wp-block-uagb-info-box ~ .wp-block-uagb-info-box, .wp-block-uagb-container ~ .wp-block-uagb-container)) .wp-block-uagb-info-box {
	flex: 1 1 auto;
	margin-bottom: 0;
}


/* ==========================================================================
   Info-box / feature cards (wp:uagb/info-box) — by far the most common
   real component across every page checked: 127 instances across just
   three pages. Two layout variants exist in the real content:
   icon-above-title (icon stacked on top, centered) and icon-left-title
   (small icon beside the title, used for things like tech-stack badges).
   ========================================================================== */

/* Card style matches the new homepage's design system (a soft-shadow
   card, no hairline border, generous radius — see its case-study
   cards) rather than a white card with a visible border, which read
   as flatter/rougher by comparison. White rather than the section's
   --color-surface tone so the card still reads as a distinct surface
   now that alternating sections below can themselves be
   --color-surface — a shadow (not a color swap) is what keeps it
   looking like a card either way. */
body.edge-legacy-dynamic .legacy-content .wp-block-uagb-info-box {
	background: #fff;
	border: 1px solid #E6E9EE;
	box-shadow: 0 8px 24px rgba(10, 22, 40, 0.05);
	border-radius: 16px;
	padding: 28px;
	margin: 0 0 24px;
	flex: 1 1 260px;
	min-width: 0;
}

body.edge-legacy-dynamic .legacy-content .uagb-ifb-content {
	display: flex;
	flex-direction: column;
}

body.edge-legacy-dynamic .legacy-content .uagb-infobox-icon-above-title .uagb-ifb-content {
	align-items: flex-start;
	text-align: left;
}

/* Icon-above-title icons: give the icon its own fixed-size dark badge
   instead of styling the <img> directly. Two real problems this fixes
   at once: (1) some of these source images carry a broken/blank
   width="" height="0" attribute pair from the original page-builder
   markup — height:auto alone still collapsed to ~0px because a
   presentational height="0" attribute combined with an empty width
   left no intrinsic ratio to size from; a fixed box guarantees a
   visible icon area regardless. (2) many of these icons (e.g. the
   Industries section's) are drawn white/transparent, meant to sit on a
   dark background like the homepage hero — invisible on this white
   card background otherwise. */
body.edge-legacy-dynamic .legacy-content .uagb-infobox-icon-above-title .uagb-ifb-image-content {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: var(--color-ink);
	border-radius: 50%;
	padding: 8px;
	box-sizing: border-box;
	margin-bottom: 16px;
}

body.edge-legacy-dynamic .legacy-content .uagb-infobox-icon-above-title .uagb-ifb-image-content img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
}

body.edge-legacy-dynamic .legacy-content .uagb-ifb-title-wrap {
	margin: 0 0 8px;
}

body.edge-legacy-dynamic .legacy-content .uagb-ifb-title {
	margin: 0;
}

/* Real site gives service/industry card headings a short underline
   accent rather than no divider at all — scoped to icon-above-title
   (the real content-card shape) so it doesn't clutter the small
   icon-left-title tech-stack chips, which share the same title class. */
body.edge-legacy-dynamic .legacy-content .uagb-infobox-icon-above-title .uagb-ifb-title {
	display: inline-block;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--color-orange);
}

/* icon-left-title variant: small icon + title sit side by side (this is
   the shape the tech-stack "badges" use — Java, Python, AWS, etc.) */
body.edge-legacy-dynamic .legacy-content .uagb-infobox-icon-left-title .wp-block-uagb-info-box,
body.edge-legacy-dynamic .legacy-content.uagb-infobox-icon-left-title {
	padding: 14px 18px;
}

body.edge-legacy-dynamic .legacy-content .uagb-ifb-left-title-image {
	display: flex;
	align-items: center;
	gap: 12px;
}

body.edge-legacy-dynamic .legacy-content .uagb-infobox-icon-left-title .uagb-ifb-content,
body.edge-legacy-dynamic .legacy-content .uagb-infobox-icon-left-title .wp-block-uagb-info-box {
	flex-direction: row;
}

body.edge-legacy-dynamic .legacy-content .uagb-infobox-icon-left-title.wp-block-uagb-info-box {
	display: flex;
	align-items: center;
	background: var(--color-surface);
	box-shadow: none;
	padding: 14px 20px;
	flex: 0 1 auto;
}

body.edge-legacy-dynamic .legacy-content .uagb-infobox-icon-left-title .uagb-ifb-left-title-image img {
	width: 32px;
}

body.edge-legacy-dynamic .legacy-content .uagb-infobox-icon-left-title .uagb-ifb-title {
	font-size: 15px;
	font-weight: 500;
	color: var(--color-body-muted);
}

/* ==========================================================================
   Buttons (wp:uagb/buttons) — cover every class variant seen in the real
   content rather than just one, since the block generates a different
   wrapper depending on how many buttons are in the group.
   ========================================================================== */

body.edge-legacy-dynamic .legacy-content .wp-block-uagb-buttons__link,
body.edge-legacy-dynamic .legacy-content .uagb-buttons-repeater,
body.edge-legacy-dynamic .legacy-content a.uagb-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
	background: var(--color-orange);
	color: #fff !important;
	text-decoration: none !important;
	padding: 12px 22px;
	border-radius: 8px;
	font-weight: 500;
	margin: 4px 8px 12px 0;
}

body.edge-legacy-dynamic .legacy-content .uagb-buttons__outer-wrap,
body.edge-legacy-dynamic .legacy-content .uagb-buttons__wrap,
body.edge-legacy-dynamic .legacy-content .uagb-buttons-layout-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ==========================================================================
   Recognizable named sections from the old page-builder — real,
   repeated class names this project already identified while
   investigating the old content, now safe to style directly (their
   inline styles are stripped).
   ========================================================================== */

/* Image + text intro, as on the live site: image at its own aspect
   ratio, vertically centred beside the copy; long copy (the block's own
   .srb-scrolled-block marker) scrolls inside a fixed-height column
   instead of stretching the whole row. */
body.edge-legacy-dynamic .legacy-content .choice-section {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 48px;
	padding: 40px 0;
}

body.edge-legacy-dynamic .legacy-content .choice-section > * {
	flex: 1 1 320px;
	margin-bottom: 0;
}

body.edge-legacy-dynamic .legacy-content .choice-section img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 16px;
}

body.edge-legacy-dynamic .legacy-content .choice-section figure {
	margin: 0;
}

body.edge-legacy-dynamic .legacy-content .srb-scrolled-block {
	max-height: 300px;
	overflow-y: auto;
	padding-right: 16px;
	margin-bottom: 0;
	scrollbar-width: thin;
	scrollbar-color: var(--color-orange) var(--color-surface);
}

body.edge-legacy-dynamic .legacy-content .srb-scrolled-block::-webkit-scrollbar {
	width: 4px;
}

body.edge-legacy-dynamic .legacy-content .srb-scrolled-block::-webkit-scrollbar-thumb {
	background: var(--color-orange);
	border-radius: 4px;
}

body.edge-legacy-dynamic .legacy-content .srb-scrolled-block::-webkit-scrollbar-track {
	background: var(--color-surface);
}

/* CTA banner: full-width navy card with its editor-set photo on the
   right, fading into the navy the way live fades red into the photo. */
body.edge-legacy-dynamic .legacy-content .partner-card-section::before {
	display: none;
}

body.edge-legacy-dynamic .legacy-content .partner-card-section .partner-inner-card {
	position: relative;
	z-index: 0;
	overflow: hidden;
	background-color: var(--color-ink);
	background-image: var(--edge-bg, none);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 100%;
	color: #fff;
	border-radius: 16px;
	padding: clamp(40px, 4vw, 64px) clamp(24px, 5vw, 80px);
	margin: 0;
}

body.edge-legacy-dynamic .legacy-content .partner-card-section .partner-inner-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, var(--color-ink) 45%, rgba(10, 22, 40, 0.9) 65%, rgba(10, 22, 40, 0.15) 100%);
}

body.edge-legacy-dynamic .legacy-content .partner-card-section .partner-inner-card > * {
	max-width: 760px;
}

body.edge-legacy-dynamic .legacy-content .partner-card-section .partner-inner-card h2.uagb-heading-text {
	font-size: clamp(28px, 3vw, 44px);
	line-height: 1.15;
	margin: 0 0 12px;
}

body.edge-legacy-dynamic .legacy-content .partner-card-section .partner-inner-card p.uagb-heading-text {
	color: rgba(255, 255, 255, 0.85);
	font-size: 18px;
	margin: 0 0 28px;
}

@media (max-width: 700px) {
	body.edge-legacy-dynamic .legacy-content .partner-card-section .partner-inner-card {
		background-image: none;
	}
}

body.edge-legacy-dynamic .legacy-content .partner-inner-card .uagb-heading-text {
	color: #fff;
}

/* The generic <strong> rule elsewhere unconditionally sets a dark ink
   color, meant for the page's normal white background — inside this
   dark card it made a heading wrapped in <strong> render dark-on-dark
   and effectively invisible (confirmed: "Start Building with
   Generative AI Today" was rendering with zero visible contrast). */
body.edge-legacy-dynamic .legacy-content .partner-inner-card strong {
	color: inherit;
}

/* .services-card wraps exactly one .wp-block-uagb-info-box (confirmed
   on real content) — that info-box already renders its own white
   bordered card via the generic info-box rule above, so giving
   .services-card the same card treatment produced a visible
   card-inside-a-card (double border, doubled padding). It only needs
   to behave as a grid item here, not a second card. display:flex is
   for its OWN child (the info-box) below, not for its own sizing —
   .services-card-widget's grid-template-columns handles that now. */
body.edge-legacy-dynamic .legacy-content .services-card {
	display: flex;
	min-width: 0;
}

/* Row siblings are stretched to equal height (.services-card-widget
   above uses CSS Grid, whose rows stretch items by default), but a
   plain block child doesn't fill a stretched grid item's height on
   its own — grow the actual visible card to match, so equal-height
   rows don't leave the border stopping short. */
body.edge-legacy-dynamic .legacy-content .services-card > .wp-block-uagb-info-box {
	flex: 1 1 auto;
}

/* Industries grid: tried an alternating orange/white highlight card
   treatment here (matching the real site's red/black checkerboard),
   but the user preferred uniform white cards, matching the plain
   main services grid — reverted. */

/* .same-height-logo groups a category heading (e.g. "Languages") with
   several icon+label chips (each already its own small card via the
   icon-left-title info-box rules below) — this IS a single real card,
   but its children need to wrap into a row instead of the block
   default's one-chip-per-full-width-row stack. */
/* Laid out like the live site: every category side by side as an
   equal-height column, a solid header bar, then a plain icon + label
   list (no per-tool pill). */
body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .wp-block-uagb-container.same-height-logo) {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}

body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .services-title-widget + .wp-block-uagb-container > .same-height-logo) > .services-title-widget {
	text-align: center;
}

body.edge-legacy-dynamic .legacy-content .same-height-logo {
	background: #fff;
	border: 1px solid #E6E9EE;
	box-shadow: 0 8px 24px rgba(10, 22, 40, 0.05);
	border-radius: 16px;
	padding: 0 0 12px;
	margin: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-width: 0;
}

body.edge-legacy-dynamic .legacy-content .same-height-logo > .wp-block-uagb-advanced-heading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 72px;
	margin: 0 0 8px;
	padding: 12px 16px;
	background: var(--color-ink);
	text-align: center;
}

body.edge-legacy-dynamic .legacy-content .same-height-logo > .wp-block-uagb-advanced-heading .uagb-heading-text {
	margin: 0;
	font-size: 17px;
	line-height: 1.35;
	color: #fff;
}

body.edge-legacy-dynamic .legacy-content .same-height-logo .uagb-infobox-icon-left-title.wp-block-uagb-info-box {
	flex: 0 0 auto;
	margin: 0;
	padding: 14px 20px;
	background: none;
	border: 0;
	box-shadow: none;
	border-radius: 0;
}

body.edge-legacy-dynamic .legacy-content .same-height-logo .uagb-ifb-left-title-image {
	display: flex;
	align-items: center;
	gap: 14px;
}

body.edge-legacy-dynamic .legacy-content .same-height-logo .uagb-ifb-image-content img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
}

body.edge-legacy-dynamic .legacy-content .same-height-logo .uagb-ifb-title {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	color: var(--color-ink);
}

@media (max-width: 1200px) {
	body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .wp-block-uagb-container.same-height-logo) {
		grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	}
}

/* ==========================================================================
   Timeline (Cool Timeline plugin — wp:cp-timeline blocks). Some of this
   content is the plugin's own unfilled demo/placeholder copy rather than
   real business content (confirmed while investigating a real page), so
   this is a basic, readable treatment rather than a deep redesign.
   ========================================================================== */

/* Process section, laid out like the live site: heading + intro (and
   the faint "timemap" growth-chart graphic) pinned on the left; on the
   right a scrollable timeline of large outline numbers, a dot on a thin
   rail, and a card per step. */
body.edge-legacy-dynamic .legacy-content .experience-section > .wp-block-uagb-container {
	display: grid;
	grid-template-columns: minmax(280px, 5fr) 7fr;
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
	margin: 0;
}

body.edge-legacy-dynamic .legacy-content .experience-section > .wp-block-uagb-container > .wp-block-uagb-container {
	margin: 0;
	min-width: 0;
}

body.edge-legacy-dynamic .legacy-content .experience-section > .wp-block-uagb-container > .wp-block-uagb-container:first-child {
	position: sticky;
	top: 110px;
}

body.edge-legacy-dynamic .legacy-content .wp-block-uagb-image.timemap {
	margin: 24px 0 0;
	opacity: 0.35;
	pointer-events: none;
}

body.edge-legacy-dynamic .legacy-content .wp-block-uagb-image.timemap img {
	width: 100%;
	height: auto;
}

body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body,
body.edge-legacy-dynamic .legacy-content .ctlb-wrapper {
	display: block;
	margin: 0;
	padding: 0;
	background: none;
}

body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body::before,
body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body::after,
body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .timeline-block-detail::before,
body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .timeline-block-detail::after,
body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .story-details::before,
body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .story-details::after {
	display: none;
}

body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .cool-timeline-block-list {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-height: 560px;
	overflow-y: auto;
	padding: 4px 16px 4px 0;
	scrollbar-width: thin;
	scrollbar-color: var(--color-orange) var(--color-surface);
}

body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .cool-timeline-block-list > .swiper-slide {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
}

body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .timeline-content {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .timeline-block-timeline.ctl-row {
	display: grid;
	grid-template-columns: 96px 20px minmax(0, 1fr);
	column-gap: 20px;
	align-items: start;
	margin: 0;
	position: relative;
}

/* Thin rail through every step's dot column. */
body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .timeline-block-timeline.ctl-row::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: -28px;
	left: calc(96px + 20px + 9px);
	width: 2px;
	background: #E6E9EE;
}

body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .cool-timeline-block-list > .swiper-slide:last-child .timeline-block-timeline.ctl-row::before {
	bottom: 0;
}

body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .timeline-block-timeline .ctl-6 {
	width: auto;
	max-width: none;
	flex: none;
	margin: 0;
	padding: 0;
	order: 0;
}

body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .timeline-block-time {
	grid-column: 1;
	text-align: right;
	min-width: 0;
}

body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .timeline-content .story-time {
	display: block;
	height: auto;
	width: auto;
	padding: 0;
	margin: 4px 0 0;
	text-align: inherit;
}

body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .timeline-block-timeline.ctl-row::after {
	display: none;
}

body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .timeline-block-timeline.ctl-row > * {
	grid-row: 1;
}

body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper.one-sided .timeline-content .timeline-block-icon {
	align-self: start;
	top: auto;
	left: auto;
	transform: none;
	margin: 22px 0 0;
}

body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper.one-sided .timeline-content .ctl-row .story-details {
	width: auto;
	border: 1px solid #E6E9EE;
	padding: 28px 32px;
	text-align: left;
}

body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper.one-sided .timeline-content .ctl-row .story-details::before {
	display: none;
}

body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .story-time p {
	margin: 0;
	font-family: var(--font-heading, inherit);
	font-size: 56px;
	font-weight: 600;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--color-ink);
}

body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .timeline-block-icon {
	grid-column: 2;
	position: relative;
	z-index: 1;
	width: 20px;
	height: 20px;
	margin: 18px 0 0;
	border-radius: 50%;
	background: var(--color-orange);
	box-shadow: 0 0 0 5px rgba(255, 102, 0, 0.15);
	color: transparent;
}

body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .timeline-block-icon svg {
	display: none;
}

body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .timeline-block-detail {
	grid-column: 3;
}

body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .story-details {
	background: #fff;
	border: 1px solid #E6E9EE;
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(10, 22, 40, 0.05);
	padding: 28px 32px;
}

body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .ctlb-block-title {
	margin: 0 0 10px;
	font-size: 20px;
	line-height: 1.35;
	color: var(--color-ink);
}

body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .ctlb-block-desc {
	margin: 0;
	font-size: 16px !important;
	line-height: 1.7;
}

@media (max-width: 900px) {
	body.edge-legacy-dynamic .legacy-content .experience-section > .wp-block-uagb-container {
		grid-template-columns: 1fr;
	}

	body.edge-legacy-dynamic .legacy-content .experience-section > .wp-block-uagb-container > .wp-block-uagb-container:first-child {
		position: static;
	}

	body.edge-legacy-dynamic .legacy-content .wp-block-uagb-image.timemap {
		display: none;
	}
}

@media (max-width: 600px) {
	body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .timeline-block-timeline.ctl-row {
		grid-template-columns: 20px minmax(0, 1fr);
		column-gap: 16px;
	}

	body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .timeline-block-timeline.ctl-row::before {
		left: 9px;
	}

	body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .timeline-block-time {
		grid-column: 2;
		text-align: left;
		margin-bottom: 12px;
	}

	body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .timeline-block-icon {
		grid-column: 1;
		grid-row: 1;
	}

	body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .timeline-block-detail {
		grid-column: 2;
	}

	body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .story-time p {
		font-size: 40px;
	}

	body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .timeline-block-timeline.ctl-row > .timeline-block-detail {
		grid-row: 2;
	}

	body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper.one-sided .timeline-content .ctl-row .story-details {
		margin: 0;
		padding: 22px;
	}

	body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .story-details {
		padding: 22px;
	}
}

/* ==========================================================================
   Sliders/carousels (Swiper-based). The slider JS may not reliably
   re-initialize in this simplified render, so this is a safe fallback:
   a plain horizontally-scrollable row instead of a stack of slides
   collapsed on top of each other or hidden entirely.
   ========================================================================== */

body.edge-legacy-dynamic .legacy-content .swiper,
body.edge-legacy-dynamic .legacy-content .swiper-container {
	overflow-x: auto;
	margin: 0 0 32px;
}

body.edge-legacy-dynamic .legacy-content .swiper-wrapper {
	display: flex;
	gap: 20px;
}

body.edge-legacy-dynamic .legacy-content .swiper-slide {
	flex: 0 0 280px;
}

/* Owl Carousel logo sliders, left running as real carousels like the
   live site: owl.js sets each slot's width inline, we only centre and
   cap the logo inside it. Owl's own CSS forces item images to
   width:100%, which stretched square badges across the whole slot. */
body.edge-legacy-dynamic .legacy-content .owl-stage-outer {
	overflow: hidden;
}

body.edge-legacy-dynamic .legacy-content .owl-carousel .owl-stage {
	display: flex;
	align-items: center;
}

body.edge-legacy-dynamic .legacy-content .owl-carousel .owl-item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 90px;
}

body.edge-legacy-dynamic .legacy-content .owl-carousel .owl-item img {
	width: auto !important;
	max-width: 100%;
	max-height: 90px;
	margin: 0 auto;
	object-fit: contain;
}

/* Confirmed root cause on the "4.5 ★ / stat counters / logos" review
   card: this page reuses the same logo-showcase widget twice, and both
   copies render with the literal duplicate id="logo-showcase-wrap-94"
   (a widget bug in the source content, not ours to fix at the markup
   level — confirmed two elements share this id). jQuery's ID selector
   ($("#logo-showcase-wrap-94").owlCarousel(...)) only ever binds to the
   FIRST element with that id, so the second copy (this review card's
   logo row) never runs through owl.js and never gets .owl-loaded —
   Owl's own base CSS hides any un-initialized .owl-carousel via
   display:none to avoid a flash of unwrapped content, so this second
   copy stayed permanently invisible, collapsing the whole card around
   it. Forcing it visible and laying its raw .lsw-logo-items children
   out as a plain flex row sidesteps needing owl.js to run at all —
   same "static row over broken JS" fallback already used above for the
   other carousel, sized to match its .owl-item:not(.cloned) height. */
body.edge-legacy-dynamic .legacy-content .owl-carousel:not(.owl-loaded) {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 32px;
}

body.edge-legacy-dynamic .legacy-content .owl-carousel:not(.owl-loaded) .lsw-logo-items {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70px;
}

body.edge-legacy-dynamic .legacy-content .owl-carousel:not(.owl-loaded) .lsw-logo-items-thumb {
	display: flex;
	align-items: center;
	height: 100%;
}

body.edge-legacy-dynamic .legacy-content .owl-carousel:not(.owl-loaded) img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
}

/* ==========================================================================
   FAQ accordion (wp:uagb/faq). Its plus/minus toggle icon SVGs carry no
   width/height attribute or CSS of their own here — the sizing normally
   comes from the plugin's per-post generated stylesheet, which this
   template deliberately blocks (see edge_should_block_legacy_per_page_handle()
   in functions.php). Left unconstrained, each icon rendered at its raw
   ~980x1120px intrinsic size — on a real page with ~15 FAQ items this
   alone was responsible for roughly 17,000px of the page's total
   height. Both the "plus" and "active/minus" icon also render
   simultaneously (their visibility is normally toggled by the
   accordion's own JS), so only one is shown here as a static state.
   ========================================================================== */

/* Accordion like the live site: question left, +/- right, one answer
   open at a time (assets/js/legacy-content.js does the toggling and
   adds .edge-faq-ready; without it every answer simply stays visible). */
body.edge-legacy-dynamic .legacy-content .uagb-faq__outer-wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

body.edge-legacy-dynamic .legacy-content .uagb-faq-item {
	margin: 0;
	padding: 0;
	background: #fff;
	border: 1px solid #E6E9EE;
	border-radius: 12px;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

body.edge-legacy-dynamic .legacy-content .uagb-faq-item.uagb-faq-item-active {
	background: var(--color-surface);
	border-color: var(--color-surface);
}

body.edge-legacy-dynamic .legacy-content .uagb-faq-questions {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 28px;
	cursor: pointer;
}

body.edge-legacy-dynamic .legacy-content .uagb-faq-questions:focus-visible {
	outline: 2px solid var(--color-orange);
	outline-offset: -2px;
	border-radius: 12px;
}

body.edge-legacy-dynamic .legacy-content .uagb-question {
	font-weight: 600;
	font-size: 18px;
	line-height: 1.4;
	color: var(--color-ink);
	text-align: left;
}

body.edge-legacy-dynamic .legacy-content .uagb-faq-icon-wrap svg {
	display: block;
	width: 16px;
	height: 16px;
	fill: var(--color-ink);
	flex-shrink: 0;
}

body.edge-legacy-dynamic .legacy-content .uagb-faq-questions .uagb-icon-active.uagb-faq-icon-wrap,
body.edge-legacy-dynamic .legacy-content .uagb-faq-item-active .uagb-faq-questions .uagb-icon.uagb-faq-icon-wrap {
	display: none;
}

body.edge-legacy-dynamic .legacy-content .uagb-faq-item-active .uagb-faq-questions .uagb-icon-active.uagb-faq-icon-wrap {
	display: block;
}

body.edge-legacy-dynamic .legacy-content .uagb-faq-item-active .uagb-faq-icon-wrap svg {
	fill: var(--color-orange);
}

body.edge-legacy-dynamic .legacy-content .uagb-faq-content {
	margin: 0;
	padding: 0 28px 24px;
}

body.edge-legacy-dynamic .legacy-content .edge-faq-ready .uagb-faq-item:not(.uagb-faq-item-active) .uagb-faq-content {
	display: none;
}

body.edge-legacy-dynamic .legacy-content .uagb-faq-content p {
	margin: 0;
	font-size: 16px;
	line-height: 1.75;
}

@media (max-width: 600px) {
	body.edge-legacy-dynamic .legacy-content .uagb-faq-questions {
		padding: 18px 20px;
	}

	body.edge-legacy-dynamic .legacy-content .uagb-question {
		font-size: 16px;
	}

	body.edge-legacy-dynamic .legacy-content .uagb-faq-content {
		padding: 0 20px 20px;
	}
}

/* ==========================================================================
   Success-stories widget (.stories-widget / .slider-mu / .tab-past): a
   horizontal accordion like the live site, done in CSS alone. The
   .tab-active story (set in the markup) is open by default; hovering or
   focusing another one opens it instead. Collapsed stories show their
   .tab-hover-menu title as a vertical label. Stacked cards on mobile.
   ========================================================================== */
body.edge-legacy-dynamic .legacy-content .stories-widget .slider-mu {
	display: flex;
	gap: 12px;
	height: 440px;
}

body.edge-legacy-dynamic .legacy-content .tab-past {
	position: relative;
	flex: 0 0 76px;
	min-width: 0;
	overflow: hidden;
	border-radius: 16px;
	background: var(--color-surface);
	border: 1px solid #E6E9EE;
	transition: flex-basis 0.5s ease, flex-grow 0.5s ease, background-color 0.3s ease;
	cursor: pointer;
}

body.edge-legacy-dynamic .legacy-content .tab-past.tab-active,
body.edge-legacy-dynamic .legacy-content .slider-mu:hover .tab-past:hover,
body.edge-legacy-dynamic .legacy-content .slider-mu .tab-past:focus-within {
	flex: 1 1 auto;
	background: var(--color-ink);
	border-color: var(--color-ink);
	cursor: default;
}

body.edge-legacy-dynamic .legacy-content .slider-mu:has(.tab-past:hover) .tab-past.tab-active:not(:hover),
body.edge-legacy-dynamic .legacy-content .slider-mu:focus-within .tab-past.tab-active:not(:focus-within) {
	flex: 0 0 76px;
	background: var(--color-surface);
	border-color: #E6E9EE;
}

body.edge-legacy-dynamic .legacy-content .tab-past .hover-content {
	position: absolute;
	inset: 0 auto 0 0;
	width: min(640px, calc(100vw - 200px));
	display: flex;
	align-items: flex-end;
	padding: clamp(28px, 4vw, 56px);
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
}

body.edge-legacy-dynamic .legacy-content .tab-past.tab-active .hover-content,
body.edge-legacy-dynamic .legacy-content .slider-mu:hover .tab-past:hover .hover-content,
body.edge-legacy-dynamic .legacy-content .slider-mu .tab-past:focus-within .hover-content {
	opacity: 1;
	visibility: visible;
	transition-delay: 0.2s;
}

body.edge-legacy-dynamic .legacy-content .slider-mu:has(.tab-past:hover) .tab-past.tab-active:not(:hover) .hover-content,
body.edge-legacy-dynamic .legacy-content .slider-mu:focus-within .tab-past.tab-active:not(:focus-within) .hover-content {
	opacity: 0;
	visibility: hidden;
	transition-delay: 0s;
}

body.edge-legacy-dynamic .legacy-content .tab-past h2 {
	margin: 0 0 14px;
	font-size: clamp(24px, 2.4vw, 34px);
	line-height: 1.25;
	color: #fff;
}

body.edge-legacy-dynamic .legacy-content .tab-past p {
	margin: 0 0 24px;
	color: rgba(255, 255, 255, 0.75);
	font-size: 17px;
}

body.edge-legacy-dynamic .legacy-content .tab-past p:empty {
	display: none;
}

body.edge-legacy-dynamic .legacy-content .tab-past .hover-content a {
	display: inline-flex;
	align-items: center;
	padding: 12px 26px;
	border-radius: 8px;
	background: var(--color-orange);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

body.edge-legacy-dynamic .legacy-content .tab-hover-menu {
	position: absolute;
	inset: 28px 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--font-heading, inherit);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-ink);
	overflow: hidden;
	transition: opacity 0.2s ease;
}

body.edge-legacy-dynamic .legacy-content .tab-past.tab-active .tab-hover-menu,
body.edge-legacy-dynamic .legacy-content .slider-mu:hover .tab-past:hover .tab-hover-menu,
body.edge-legacy-dynamic .legacy-content .slider-mu .tab-past:focus-within .tab-hover-menu {
	opacity: 0;
}

body.edge-legacy-dynamic .legacy-content .slider-mu:has(.tab-past:hover) .tab-past.tab-active:not(:hover) .tab-hover-menu,
body.edge-legacy-dynamic .legacy-content .slider-mu:focus-within .tab-past.tab-active:not(:focus-within) .tab-hover-menu {
	opacity: 1;
}

@media (max-width: 800px) {
	body.edge-legacy-dynamic .legacy-content .stories-widget .slider-mu {
		flex-direction: column;
		height: auto;
	}

	body.edge-legacy-dynamic .legacy-content .stories-widget .tab-past {
		flex: none !important;
		background: var(--color-ink) !important;
		border-color: var(--color-ink) !important;
	}

	body.edge-legacy-dynamic .legacy-content .stories-widget .tab-past .hover-content {
		position: static;
		width: auto;
		padding: 28px;
		opacity: 1 !important;
		visibility: visible !important;
	}

	body.edge-legacy-dynamic .legacy-content .stories-widget .tab-hover-menu {
		display: none;
	}
}

/* Section header with a button (Success Stories, Testimonials): heading
   left, button right on one row, as on live. */
body.edge-legacy-dynamic .legacy-content .services-title-widget:has(> .wp-block-uagb-container > .wp-block-uagb-buttons) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	margin-bottom: 40px;
}

body.edge-legacy-dynamic .legacy-content .services-title-widget:has(> .wp-block-uagb-container > .wp-block-uagb-buttons) > * {
	flex: 0 1 auto;
	margin: 0;
}

body.edge-legacy-dynamic .legacy-content .services-title-widget:has(> .wp-block-uagb-container > .wp-block-uagb-buttons) .uagb-heading-text {
	margin: 0;
}

/* ==========================================================================
   Testimonial cards (.testimonial-flip-card inside the slick carousel),
   as on live: a tall client photo, with the quote, name and role fading
   in over it on hover/focus. Touch screens can't hover, so there the
   quote sits over the photo permanently. The slide itself only carries
   side padding (slick measures slide widths; margins would break it).
   ========================================================================== */
body.edge-legacy-dynamic .legacy-content .wp-block-cb-slide.testimonial-flip-card {
	position: relative;
	height: 470px;
	margin: 0;
	padding: 0 8px;
	border: 0;
	box-sizing: border-box;
}

body.edge-legacy-dynamic .legacy-content .testimonial-flip-card .monial-over-image {
	max-width: none;
	height: 100%;
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	background: var(--color-surface);
}

body.edge-legacy-dynamic .legacy-content .testimonial-flip-card .monial-over-image figure,
body.edge-legacy-dynamic .legacy-content .testimonial-flip-card .monial-over-image img {
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}

body.edge-legacy-dynamic .legacy-content .testimonial-flip-card .monial-over-box {
	position: absolute;
	inset: 0 8px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 6px;
	margin: 0;
	padding: 28px;
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(10, 22, 40, 0.55) 0%, rgba(10, 22, 40, 0.95) 45%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

body.edge-legacy-dynamic .legacy-content .testimonial-flip-card:hover .monial-over-box,
body.edge-legacy-dynamic .legacy-content .testimonial-flip-card:focus-within .monial-over-box {
	opacity: 1;
}

body.edge-legacy-dynamic .legacy-content .testimonial-flip-card .monial-over-box > * {
	margin: 0;
}

body.edge-legacy-dynamic .legacy-content .testimonial-flip-card .monial-over-box p.uagb-heading-text {
	margin: 0;
	color: #fff;
	font-size: 15px;
	line-height: 1.65;
}

body.edge-legacy-dynamic .legacy-content .testimonial-flip-card .monial-over-box > :first-child p.uagb-heading-text {
	margin-bottom: 12px;
}

body.edge-legacy-dynamic .legacy-content .testimonial-flip-card .monial-over-box h5.uagb-heading-text {
	margin: 0;
	color: var(--color-orange);
	font-size: 17px;
}

body.edge-legacy-dynamic .legacy-content .testimonial-flip-card .monial-over-box > :last-child p.uagb-heading-text {
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
}

@media (hover: none) {
	body.edge-legacy-dynamic .legacy-content .testimonial-flip-card .monial-over-box {
		opacity: 1;
	}
}

body.edge-legacy-dynamic .legacy-content .monila-slid .slick-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

body.edge-legacy-dynamic .legacy-content .monila-slid .slick-dots li {
	margin: 0;
}

body.edge-legacy-dynamic .legacy-content .monila-slid .slick-dots button {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #D5DAE1;
	font-size: 0;
	cursor: pointer;
}

body.edge-legacy-dynamic .legacy-content .monila-slid .slick-dots .slick-active button {
	width: 28px;
	border-radius: 5px;
	background: var(--color-orange);
}

/* ==========================================================================
   Embedded forms (Zoho lead forms and similar). These already carry
   their own scoped <style> block, stripped along with everything else —
   give inputs/buttons a minimally decent look so the form is at least
   usable until any embedded form gets its own proper redesign.
   ========================================================================== */

/* input[type=file] can't be restyled directly cross-browser (its
   "Choose File" control is a browser-internal shadow part), so this
   styles just that internal button via the standard pseudo-element
   plus its older WebKit-only equivalent, instead of leaving it as a
   bare unstyled OS control next to the other, fully-styled fields. */
body.edge-legacy-dynamic .legacy-content input[type="file"] {
	font-family: inherit;
	font-size: 14px;
	color: var(--color-body-muted);
	margin-bottom: 12px;
}

body.edge-legacy-dynamic .legacy-content input[type="file"]::file-selector-button,
body.edge-legacy-dynamic .legacy-content input[type="file"]::-webkit-file-upload-button {
	background: var(--color-orange);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 10px 16px;
	font-weight: 500;
	font-size: 14px;
	margin-right: 12px;
	cursor: pointer;
}

body.edge-legacy-dynamic .legacy-content input[type="text"],
body.edge-legacy-dynamic .legacy-content input[type="email"],
body.edge-legacy-dynamic .legacy-content input[type="tel"],
body.edge-legacy-dynamic .legacy-content textarea,
body.edge-legacy-dynamic .legacy-content select {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--color-surface);
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	margin-bottom: 12px;
}

/* Some pages render the Zoho form's submit control as <input
   type="submit"> instead of <button type="submit"> (confirmed on
   generative-ai-development) — without this it fell back to the
   browser's bare default button styling, a tiny gray unbranded box. */
body.edge-legacy-dynamic .legacy-content button[type="submit"],
body.edge-legacy-dynamic .legacy-content input[type="submit"] {
	background: var(--color-orange);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 12px 24px;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
}

/* Some embedded forms rely on a class from their own now-stripped
   <style> block to hide internal tracking fields (lead source, IP
   address, UTM params) that aren't meant to be seen or filled in by a
   real visitor — restoring just that one rule rather than leaving them
   exposed. */
body.edge-legacy-dynamic .legacy-content .wfrm_fld_dpNn {
	display: none;
}

/* The Zoho lead form's tracking tokens (xnQsjsdp, xmIwtLD, actionType,
   returnURL) and its Reset button aren't hidden via that class at all —
   they use a raw inline style="display:none" directly on the <input>,
   which is exactly the kind of inline style this template strips at
   the source. Restoring by name/value rather than by a stripped class,
   since these fields never carried one. */
body.edge-legacy-dynamic .legacy-content input[name="xnQsjsdp"],
body.edge-legacy-dynamic .legacy-content input[name="xmIwtLD"],
body.edge-legacy-dynamic .legacy-content input[name="actionType"],
body.edge-legacy-dynamic .legacy-content input[name="returnURL"],
body.edge-legacy-dynamic .legacy-content input.zcwf_button[type="reset"] {
	display: none;
}

/* Same story: this error message is only meant to appear after a failed
   captcha check, controlled by the form's own (now-stripped) inline
   visibility:hidden — restoring the hidden default. The form's own JS
   still toggles it visible on a real failure; only the resting state
   needed restoring. */
body.edge-legacy-dynamic .legacy-content [id^="recapErr"] {
	visibility: hidden;
}

/* ==========================================================================
   Stat counters (wp:uagb/counter — "4,100+ Clients" style figures). The
   actual number only exists as a data-to-value="4100" attribute; it's
   normally animated in by the plugin's own per-post JS (counting up
   from 0 on scroll-into-view), which this template blocks along with
   its per-post CSS. edge_clean_legacy_content() now writes the final
   figure (with its thousands delimiter) in server-side; this is only a
   fallback for any counter it couldn't fill. */
body.edge-legacy-dynamic .legacy-content .uagb-counter-block-number:empty::before {
	content: attr(data-to-value);
}

body.edge-legacy-dynamic .legacy-content .wp-block-uagb-counter__number {
	font-size: 40px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--color-ink);
}

body.edge-legacy-dynamic .legacy-content .wp-block-uagb-counter__title {
	color: var(--color-body-muted);
	font-size: 15px;
}

/* The counter row (e.g. Clients / Countries / Projects / Experts) is a
   set of sibling .wp-block-uagb-container wrappers with no shared flex
   ancestor class, so they stack full-width by the generic container
   rule above by default; lay them out as a row instead. Also covers
   the single "4.5 ★ based on 1200+ reviews" line above it, which
   shares the same wrapper class — harmless there since it's a single
   child. */
/* Real site wraps the whole ratings+counters block in one card, with
   the star-rating line centered on top, then the counters centered
   below separated by thin dividers — not 4 equal-width stretched
   columns edge to edge. */
body.edge-legacy-dynamic .legacy-content .review-inner-box {
	background: #fff;
	border: 1px solid var(--color-surface);
	border-radius: 16px;
	padding: 32px;
}

body.edge-legacy-dynamic .legacy-content .home-second {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
}

body.edge-legacy-dynamic .legacy-content .home-second > * {
	flex: 0 0 auto;
	min-width: 0;
}

body.edge-legacy-dynamic .legacy-content .home-second > *:not(:last-child) {
	padding-right: 32px;
	border-right: 1px solid var(--color-surface);
}

/* .home-second is itself a flex child of a generic UAGB row
   (.uagb-container-inner-blocks-wrap, styled above with flex:1 1 260px
   per child) alongside its "4.5 ★ based on 1200+ reviews" sibling —
   that generic rule squeezed the whole counter row into half the
   content width. Each .home-second block reads better taking its own
   full-width row, with a divider separating the two rows. */
body.edge-legacy-dynamic .legacy-content .uagb-container-inner-blocks-wrap > .home-second {
	flex: 1 1 100%;
}

body.edge-legacy-dynamic .legacy-content .uagb-container-inner-blocks-wrap > .home-second:not(:first-child) {
	border-top: 1px solid var(--color-surface);
	padding-top: 24px;
	margin-top: 8px;
}

/* Review card, matched to the live site's structure: one centered
   rating line, a centered 4-up counter row with vertical dividers and a
   rule underneath, then the award logos spread evenly across the full
   card width. */
body.edge-legacy-dynamic .legacy-content .review-inner-box {
	padding: clamp(40px, 4vw, 64px) clamp(24px, 4vw, 64px);
	box-sizing: border-box;
	box-shadow: 0 12px 40px rgba(10, 22, 40, 0.06);
}

/* No alternating gray band behind the review card — it sits straight
   under the hero on the page background. */
body.edge-legacy-dynamic .legacy-content > .review-section::before {
	display: none;
}

body.edge-legacy-dynamic .legacy-content .partner-card-section .partner-inner-card {
	box-sizing: border-box;
}

body.edge-legacy-dynamic .legacy-content .review-inner-box > .uagb-container-inner-blocks-wrap {
	flex-direction: column;
	align-items: stretch;
	gap: 40px;
}

body.edge-legacy-dynamic .legacy-content .review-inner-box > .uagb-container-inner-blocks-wrap > * {
	flex: 0 0 auto;
}

body.edge-legacy-dynamic .legacy-content .review-inner-box .home-second:first-child .uagb-heading-text {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	font-size: 26px;
	text-align: center;
}

body.edge-legacy-dynamic .legacy-content .review-inner-box .home-second:first-child .uagb-heading-text img {
	display: inline-block;
	width: 22px;
	height: auto;
	margin: 0;
}

body.edge-legacy-dynamic .legacy-content .review-inner-box .uagb-container-inner-blocks-wrap > .home-second:not(:first-child) {
	gap: 0;
	flex-wrap: nowrap;
	border-top: 0;
	border-bottom: 1px solid var(--color-surface);
	padding: 0 0 32px;
	margin: 0 auto;
	width: 100%;
	max-width: 1000px;
}

body.edge-legacy-dynamic .legacy-content .review-inner-box .home-second:not(:first-child) > * {
	flex: 1 1 0;
	padding: 8px 24px;
	text-align: center;
}

body.edge-legacy-dynamic .legacy-content .review-inner-box .home-second:not(:first-child) > *:not(:last-child) {
	padding-right: 24px;
	border-right: 1px solid var(--color-surface);
}

body.edge-legacy-dynamic .legacy-content .review-inner-box .wp-block-uagb-counter__number {
	font-size: clamp(36px, 3.6vw, 52px);
	line-height: 1.1;
	margin-bottom: 12px;
}

body.edge-legacy-dynamic .legacy-content .review-inner-box .wp-block-uagb-counter__title {
	font-size: 18px;
	color: var(--color-ink);
}

body.edge-legacy-dynamic .legacy-content .review-inner-box .owl-carousel:not(.owl-loaded) {
	justify-content: space-between;
	gap: 24px 32px;
}

body.edge-legacy-dynamic .legacy-content .review-inner-box .owl-carousel:not(.owl-loaded) .lsw-logo-items {
	height: 88px;
}

@media (max-width: 700px) {
	body.edge-legacy-dynamic .legacy-content .review-inner-box .uagb-container-inner-blocks-wrap > .home-second:not(:first-child) {
		flex-wrap: wrap;
	}

	body.edge-legacy-dynamic .legacy-content .review-inner-box .home-second:not(:first-child) > * {
		flex: 1 1 50%;
		border-right: 0 !important;
	}

	body.edge-legacy-dynamic .legacy-content .review-inner-box .owl-carousel:not(.owl-loaded) {
		justify-content: center;
	}

	body.edge-legacy-dynamic .legacy-content .review-inner-box .home-second:first-child .uagb-heading-text {
		flex-wrap: wrap;
		font-size: 20px;
	}
}

/* Card titles that are links (Industries grid) read as headings, not
   underlined inline links; the whole title still clicks through. */
body.edge-legacy-dynamic .legacy-content .uagb-ifb-title a {
	color: inherit;
	text-decoration: none;
}

body.edge-legacy-dynamic .legacy-content .uagb-ifb-title a:hover {
	color: var(--color-orange);
}

/* "Why Choose" intro: heading left, paragraph right, as on live. The
   heading's wrapper reuses .home-second (the review card's counter
   class), so its counter row styling is reset here. */
body.edge-legacy-dynamic .legacy-content .whyedge-row {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
}

body.edge-legacy-dynamic .legacy-content .whyedge-row > * {
	min-width: 0;
	margin: 0;
}

body.edge-legacy-dynamic .legacy-content .whyedge-row .home-second {
	display: block;
	padding: 0;
	border: 0;
}

body.edge-legacy-dynamic .legacy-content .whyedge-row .home-second > * {
	padding: 0;
	border: 0;
}

body.edge-legacy-dynamic .legacy-content .whyedge-row h3.uagb-heading-text {
	margin: 0;
	font-size: clamp(30px, 3vw, 42px);
	line-height: 1.2;
}

body.edge-legacy-dynamic .legacy-content .whyedge-row p.uagb-heading-text {
	margin: 0;
	font-size: 18px;
	line-height: 1.7;
}

/* Live highlights the "On-Demand Developers" card as the one solid
   accent in the grid (always the second card in this block). */
body.edge-legacy-dynamic .legacy-content .home-second-inner-container > .wp-block-uagb-container:last-child > .wp-block-uagb-container:nth-child(2) .wp-block-uagb-info-box {
	justify-content: center;
	background: var(--color-orange);
	border-color: var(--color-orange);
	text-align: center;
}

body.edge-legacy-dynamic .legacy-content .home-second-inner-container > .wp-block-uagb-container:last-child > .wp-block-uagb-container:nth-child(2) .uagb-ifb-content {
	align-items: center;
	justify-content: center;
	height: 100%;
}

body.edge-legacy-dynamic .legacy-content .home-second-inner-container > .wp-block-uagb-container:last-child > .wp-block-uagb-container:nth-child(2) :is(.uagb-ifb-title, .uagb-ifb-desc) {
	margin: 0;
	padding: 0;
	border: 0;
	color: #fff;
	font-size: clamp(28px, 2.6vw, 38px);
	font-weight: 600;
	line-height: 1.25;
}

body.edge-legacy-dynamic .legacy-content .home-second-inner-container > .wp-block-uagb-container:last-child > .wp-block-uagb-container:nth-child(2) .uagb-ifb-title-wrap {
	border: 0;
	padding: 0;
	margin: 0;
}

body.edge-legacy-dynamic .legacy-content .home-second-inner-container > .wp-block-uagb-container:last-child > .wp-block-uagb-container:nth-child(2) .uagb-ifb-title-wrap::after {
	display: none;
}

@media (max-width: 800px) {
	body.edge-legacy-dynamic .legacy-content .whyedge-row {
		grid-template-columns: 1fr;
	}
}

body.edge-legacy-dynamic .legacy-content .monila-slid.slick-dotted {
	margin-bottom: 0;
}

body.edge-legacy-dynamic .legacy-content .monila-slid .slick-dots {
	position: static;
	width: auto;
}

body.edge-legacy-dynamic .legacy-content .monila-slid .slick-dots button::before {
	display: none;
}

/* FAQ-schema plugin output (.faqsu-*) that the_content appends after the
   page's own FAQ: placeholder "FAQ title" entries plus unrelated
   cloud-migration Q&A, identical on every converted page. The live site
   doesn't show it either. */
body.edge-legacy-dynamic .legacy-content > section:has(> .faqsu-faq-single) {
	display: none;
}

/* Any section header made of a heading block plus a buttons block (FAQ,
   and pages without the .services-title-widget marker): one row. */
body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .wp-block-uagb-container > .wp-block-uagb-advanced-heading h2):has(> .wp-block-uagb-container > .wp-block-uagb-buttons) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	margin-bottom: 40px;
}

body.edge-legacy-dynamic .legacy-content .wp-block-uagb-container:has(> .wp-block-uagb-container > .wp-block-uagb-advanced-heading h2):has(> .wp-block-uagb-container > .wp-block-uagb-buttons) > * {
	flex: 0 1 auto;
	margin: 0;
}

/* Phone sizing, matched to the live site's mobile density: tighter card
   padding, smaller body and heading type, and the timeline keeps its
   own scroll area rather than running thousands of pixels. */
@media (max-width: 600px) {
	body.edge-legacy-dynamic .legacy-content .wp-block-uagb-info-box {
		padding: 22px;
	}

	body.edge-legacy-dynamic .legacy-content .uagb-ifb-title {
		font-size: 18px;
	}

	body.edge-legacy-dynamic .legacy-content .uagb-ifb-desc,
	body.edge-legacy-dynamic .legacy-content p.has-medium-font-size,
	body.edge-legacy-dynamic .legacy-content .srb-scrolled-block {
		font-size: 15px !important;
		line-height: 1.65;
	}

	body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .cool-timeline-block-list {
		max-height: 520px;
		padding-right: 8px;
	}

	body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper .ctlb-block-desc {
		font-size: 15px !important;
	}

	body.edge-legacy-dynamic .legacy-content .stories-widget .tab-past h2 {
		font-size: 21px;
	}

	body.edge-legacy-dynamic .legacy-content .stories-widget .tab-past p {
		font-size: 15px;
		margin-bottom: 18px;
	}

	body.edge-legacy-dynamic .legacy-content .stories-widget .tab-past .hover-content {
		padding: 22px;
	}

	body.edge-legacy-dynamic .legacy-content .partner-card-section .partner-inner-card p.uagb-heading-text,
	body.edge-legacy-dynamic .legacy-content .whyedge-row p.uagb-heading-text {
		font-size: 16px;
	}

	body.edge-legacy-dynamic .legacy-content > .wp-block-uagb-container {
		padding-top: 28px;
		padding-bottom: 28px;
	}

	body.edge-legacy-dynamic .legacy-content > .wp-block-uagb-container:not(:has(h1, h2)) {
		padding-top: 0;
	}
}

body.edge-legacy-dynamic .legacy-content .same-height-logo > .wp-block-uagb-advanced-heading strong {
	color: inherit;
}

body.edge-legacy-dynamic .legacy-content .partner-card-section .blog-slider-widget,
body.edge-legacy-dynamic .legacy-content .partner-card-section .partner-inner-card {
	width: 100%;
	max-width: none;
}

@media (max-width: 600px) {
	body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper.one-sided .timeline-content .timeline-block-detail {
		/* The plugin forces 40px padding and its own sizes with !important below 767px. */
		padding: 0 !important;
		width: auto !important;
	}

	body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper.one-sided .timeline-content .story-time p {
		font-size: 40px !important;
		line-height: 1 !important;
	}

	body.edge-legacy-dynamic .legacy-content .cool-vertical-timeline-body.ctlb-wrapper.one-sided .timeline-content .timeline-block-icon {
		position: relative !important;
		left: auto !important;
		top: auto !important;
	}
}