/*
 * Weebo skin: the look of the site (type, colour, shapes, header, footer, motion), applied on top
 * of the ported Seocify component styles. The old blue hex values in those files were replaced by
 * the tokens below, so changing a token recolours the whole site.
 */

:root {
	--wb-font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--wb-ink: #0b0a2e;          /* headings, primary buttons, dark panels */
	--wb-text: #3b3d5c;         /* body copy */
	--wb-text-soft: #666880;    /* secondary copy (5.2:1 on white) */
	--wb-accent: #8138ba;       /* the logo's own violet, as the one accent */
	--wb-accent-dark: #672a95;
	--wb-magenta: #bb269a;
	--wb-indigo: #4a2fc9;         /* the cool end of the brand gradient */
	--wb-bg: #ffffff;
	--wb-bg-soft: #f6f5fb;      /* off-white tinted toward the brand */
	--wb-lavender: #ece6ff;
	--wb-line: #e6e5f2;
	--wb-grad-soft: linear-gradient(160deg, #ffffff 0%, #efe9ff 45%, #dcd0ff 100%);
	--wb-grad-brand: linear-gradient(135deg, #bb269a 0%, #8138ba 45%, #4a2fc9 100%);
	--wb-shadow-sm: 0 2px 10px rgba(11, 10, 46, 0.05);
	--wb-shadow-md: 0 16px 40px rgba(11, 10, 46, 0.1);
	--wb-radius-xl: 28px;
	--wb-radius-lg: 20px;
	--wb-radius: 14px;
	--wb-radius-sm: 10px;
	--wb-header-h: 84px;
	--wb-section: clamp(64px, 8vw, 112px);
	--wb-gutter: clamp(16px, 3.5vw, 40px); /* side margin of the content column */
	--wb-content: 1210px;                  /* widest the content column gets */
	--wb-sy: 1;                            /* scales page sections' top/bottom padding (less on phones) */
	--wb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--wb-ease-in: cubic-bezier(0.55, 0, 1, 0.45);
	--wb-fast: 160ms;
	--wb-base: 260ms;
	--wb-slow: 700ms;
}

/* ---------- accessibility helpers ---------- */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
.wb-skip { position: absolute; top: 8px; left: 8px; z-index: 200; padding: 12px 18px; border-radius: 999px; background: var(--wb-ink); color: #fff; font-weight: 600; transform: translateY(-200%); transition: transform var(--wb-fast) var(--wb-ease-out); }
.wb-skip:focus { transform: none; color: #fff; outline-color: #fff; }

/* ---------- type and base ---------- */
body, body :not(i):not(.icon):not([class*="fa-"]):not([class*="icon-"]) { font-family: var(--wb-font); }
html { scroll-behavior: smooth; }
body { color: var(--wb-text); background: var(--wb-bg); font-size: 16px; line-height: 1.7; padding-top: var(--wb-header-h); }
h1, h2, h3, h4, h5, h6, .section-title, .inner-banner-title, .wb-title, .xs-content-title, .entry-title, .single-title, .title-404 {
	color: var(--wb-ink); font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; font-variation-settings: "opsz" 96;
}
h1, h2, .section-title, .inner-banner-title { letter-spacing: -0.035em; line-height: 1.08; }
p, .wb-editor, .entry-content, li { text-wrap: pretty; }
a { transition: color var(--wb-fast) ease; }
::selection { background: rgba(129, 56, 186, 0.2); color: var(--wb-ink); }
:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: 3px; border-radius: 4px; }
.wb-footer :focus-visible, .inner-banner-area :focus-visible { outline-color: var(--wb-accent); }
.hm-values :focus-visible, .wb-sec--process :focus-visible { outline-color: #fff; }
/* One content column for the whole site. Bootstrap containers (header, banner, footer, blog) and the
   rows of the page sections share its width and side margin, so the logo, headings and text start on
   the same line at every screen width. (Section rows pad 10px less: their columns add 10px back.) */
.container { width: 100%; max-width: calc(var(--wb-content) + 2 * var(--wb-gutter)); padding-left: var(--wb-gutter); padding-right: var(--wb-gutter); }
.wb-wrap { max-width: 1240px; }
.wb-sec > .wb-wrap:not(.wb-wrap--full) { max-width: calc(var(--wb-content) + 2 * var(--wb-gutter)); padding-left: calc(var(--wb-gutter) - 10px); padding-right: calc(var(--wb-gutter) - 10px); }
/* A row inside a column cancels that column's padding (like a Bootstrap row), so it keeps the same edges. */
.wb-col > .wb-wrap { width: calc(100% + 20px); margin-left: -10px; margin-right: -10px; }
@media (max-width: 767px) {
	:root { --wb-sy: 0.6; }
	.wb-col > .wb-spacer:first-child { display: none; } /* spacers line up side-by-side columns; stacked, they are just gaps */
}
/* Bootstrap rows inside the 10px-padded page columns were 5px wider than the screen on phones. */
.wb-col .row { margin-right: -10px; margin-left: -10px; }

.wb-editor, .wb-text, .wb-icon-box .elementor-icon-box-description, .wb-toggle .elementor-tab-content, .service-preview-content,
.why-choose-us-block p, .post-list .entry-content, .wb-icon-list .elementor-icon-list-text, .wb-check-list li { color: var(--wb-text-soft); }
.wb-text, .wb-editor { font-size: 1.0625rem; line-height: 1.7; letter-spacing: 0; }
.wb-title { color: var(--wb-ink); }
.wb-title span { color: var(--wb-accent); }

/* Small coloured label above a heading (the old "section subtitle"). */
.wb-label, .xs-heading .section-subtitle, .section-subtitle {
	display: inline-block; margin: 0 0 14px; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; color: var(--wb-accent); font-variation-settings: "opsz" 14;
}
.xs-heading .section-title { font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); font-weight: 600; line-height: 1.1; margin-bottom: 0; }
.xs-heading .line { display: none; }
.xs-heading.is-white .section-subtitle { color: rgba(255, 255, 255, 0.8); }
.xs-heading.is-white .section-title { color: #fff; }

/* ---------- buttons ---------- */
.wb-btn, .btn, .btn.style2, .xs-btn, .sub-btn, .footer-widget .contact-form .submit-btn, .pagination li a, .search-btn {
	transition: transform var(--wb-fast) var(--wb-ease-out), box-shadow var(--wb-base) var(--wb-ease-out),
		background-color var(--wb-base) ease, color var(--wb-base) ease, border-color var(--wb-base) ease;
}
.wb-btn {
	display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent;
	font-size: 0.9375rem; font-weight: 600; line-height: 1; color: #fff; background: var(--wb-ink); white-space: nowrap; cursor: pointer;
}
.wb-btn svg { width: 16px; height: 16px; flex: none; }
.wb-btn:hover { color: #fff; background: var(--wb-accent); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(129, 56, 186, 0.3); }
.wb-btn:active { transform: translateY(0) scale(0.98); box-shadow: none; transition-duration: 80ms; }
.wb-btn--accent { background: var(--wb-accent); }
.wb-btn--accent:hover { background: var(--wb-ink); box-shadow: 0 12px 26px rgba(11, 10, 46, 0.25); }
.wb-btn--ghost { background: #fff; color: var(--wb-ink); border-color: var(--wb-line); }
.wb-btn--ghost:hover { background: #fff; color: var(--wb-accent); border-color: var(--wb-accent); box-shadow: var(--wb-shadow-sm); }
.wb-btn--sm { height: 44px; padding: 0 20px; font-size: 0.875rem; }
.wb-btn--light { background: #fff; color: var(--wb-ink); }
.wb-btn--light:hover { background: var(--wb-lavender); color: var(--wb-ink); box-shadow: none; }

/* The old theme's buttons take the same shape. */
.btn, .btn.style2 { height: 52px; line-height: 52px; padding: 0 30px; border-radius: 999px; border: 0; font-weight: 600; font-size: 0.9375rem; letter-spacing: 0; text-transform: none; }
.btn-primary { background-color: var(--wb-accent); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--wb-ink); color: #fff; }
.btn-secondary { background-color: var(--wb-ink); color: #fff; }
.btn-secondary:hover, .btn-secondary:focus { background-color: var(--wb-accent); color: #fff; }
.btn:hover, .xs-btn:hover, .sub-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(129, 56, 186, 0.28); }
.btn:active, .xs-btn:active, .sub-btn:active { transform: translateY(0) scale(0.98); box-shadow: none; transition-duration: 80ms; }
.xs-single-pricing .btn { background: var(--wb-ink); color: #fff; }
.xs-single-pricing:hover .btn, .xs-single-pricing .btn:hover { background: var(--wb-accent); color: #fff; }
.wb-cta-band__button .xs-btn, .wb-cta-band--soft .wb-cta-band__button .xs-btn { background: var(--wb-ink); color: #fff; font-weight: 600; }
.wb-cta-band__button .xs-btn:hover, .wb-cta-band--soft .wb-cta-band__button .xs-btn:hover { background: var(--wb-accent); color: #fff; }

/* ---------- header ---------- */
.wb-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; transition: box-shadow var(--wb-base) ease, transform var(--wb-base) var(--wb-ease-out); }
.wb-header .xs-header.header-main { background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--wb-line); box-shadow: none; }
.wb-header.sticky-header .xs-header.header-main { box-shadow: 0 8px 30px rgba(11, 10, 46, 0.06); }
.wb-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--wb-header-h); }
.wb-header .xs-logo-wraper { flex: none; }
.wb-header .xs-header.header-main .xs-logo { min-height: 0; padding: 0; }
.wb-header .xs-logo img { display: block; width: 172px; height: auto; }
/* The old theme hid this logo once the header turned sticky and showed a second one; there is only one now. */
.wb-header.nav-sticky.sticky-header .xs-logo > img { display: block; }
.wb-header .xs-logo .logo-sticky { display: none; }
.wb-header .xs-menus { flex: 1; }
.wb-header .xs-menus .nav-menu { display: flex; justify-content: center; gap: 4px; }
.wb-header .xs-header.header-main .xs-menus .nav-menu a { font-family: var(--wb-font); }
.wb-header .xs-header.header-main .xs-menus .nav-menu > li > a { padding: 30px 14px; color: var(--wb-ink); font-size: 0.9375rem; font-weight: 500; text-transform: none; }
.wb-header .xs-header.header-main .xs-menus .nav-menu > li > a:hover, .wb-header .xs-header.header-main .xs-menus .nav-menu > li.active > a { color: var(--wb-accent); }
.wb-header .xs-header.header-main .xs-menus .nav-menu > li > a::before { display: none; }
.wb-header .xs-menus .nav-menu > li > a .submenu-indicator-chevron { border-color: transparent currentColor currentColor transparent; }
/* Services dropdown. The menu item it hangs from is narrow, so an absolutely positioned list would
   wrap to that width; max-content lets it size to its longest label instead. */
/* (Selectors are long on purpose: the ported theme styles these with five classes deep.) */
.wb-header .xs-header.header-main .xs-menus .nav-menu li > .nav-submenu { border-radius: var(--wb-radius); border: 1px solid var(--wb-line); box-shadow: var(--wb-shadow-md); padding: 8px; white-space: nowrap; }
@media (min-width: 992px) { .wb-header .xs-header.header-main .xs-menus .nav-menu li > .nav-submenu { width: max-content; min-width: 260px; margin-top: -8px; } }
.wb-header .xs-header.header-main .xs-menus .nav-menu .nav-submenu > li { float: none; width: auto; border: 0; }
.wb-header .xs-header.header-main .xs-menus .nav-menu .nav-submenu > li > a { display: flex; align-items: center; gap: 12px; float: none; width: auto; border: 0; border-radius: 8px; padding: 10px 12px; background: transparent; color: var(--wb-ink); font-weight: 500; line-height: 1.3; transition: color var(--wb-fast) ease, background var(--wb-fast) ease; }
.wb-header .xs-header.header-main .xs-menus .nav-menu .nav-submenu > li > a:hover, .wb-header .xs-header.header-main .xs-menus .nav-menu .nav-submenu > li > a.active, .wb-header .xs-header.header-main .xs-menus .nav-menu .nav-submenu > li.active > a { background: var(--wb-bg-soft); color: var(--wb-accent); }
.wb-header .xs-header.header-main .xs-menus .nav-menu .nav-submenu > li > a .wb-icon { flex: none; width: 18px; height: 18px; color: var(--wb-accent); }
.wb-header__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.wb-header__search { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--wb-ink); font-size: 18px; transition: background var(--wb-fast) ease, color var(--wb-fast) ease; }
.wb-header__search:hover { background: var(--wb-bg-soft); color: var(--wb-accent); }
/* mobile: the navigation plugin shows its own bar with the cloned logo and a hamburger */
.wb-header .xs-menus .nav-header { background: transparent; }
.wb-header .xs-menus .nav-brand { display: none; }
.wb-header .nav-toggle::before, .wb-header .nav-toggle::after { background-color: var(--wb-ink); box-shadow: 0 .5em 0 0 var(--wb-ink), 0 1em 0 0 var(--wb-ink); }
@media (max-width: 991px) {
	.wb-header__bar { padding-right: calc(var(--wb-gutter) + 40px); }
	.wb-header .xs-logo-wraper { display: block; } /* the old theme hid it here and showed a clone in the nav bar */
	.wb-header .xs-menus { position: static; flex: 0 0 auto; width: 0; }
	.wb-header .xs-menus .nav-header { position: static; }
	.wb-header .nav-toggle { right: var(--wb-gutter); }
	.wb-header .nav-menus-wrapper { border-radius: 0 var(--wb-radius-lg) var(--wb-radius-lg) 0; box-shadow: var(--wb-shadow-md); }
	.wb-header .xs-header.header-main .xs-menus .nav-menu > li > a { padding: 14px 20px; }
	.wb-header .xs-menus .nav-menu { display: block; }
}
@media (max-width: 575px) { .wb-header__actions .wb-btn { display: none; } .wb-header .xs-logo img { width: 140px; } :root { --wb-header-h: 72px; } }
@media (min-width: 576px) { .wb-header .nav-menu > li.wb-nav-phone-only { display: none; } } /* the 'Get a quote' button covers it */

/* ---------- inner-page banner: an inset lavender panel ---------- */
.inner-banner-area { margin: 12px 16px 0; padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 80px); min-height: 0; border-radius: var(--wb-radius-xl); background: var(--wb-grad-soft); overflow: hidden; }
.inner-banner-area .banner-image { background-position: right center; background-size: auto 100%; }
.inner-banner-content { max-width: 820px; }
.inner-banner-title { color: var(--wb-ink); font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.25rem); font-weight: 600; margin-bottom: 18px; overflow: visible; }
.inner-banner-title span { color: var(--wb-accent); }
.breadcumbs > li { color: var(--wb-text-soft); font-size: 0.9375rem; }
.breadcumbs > li > a { color: var(--wb-ink); font-weight: 500; }
.breadcumbs > li > a:hover { color: var(--wb-accent); }
@media (max-width: 767px) { .inner-banner-area .banner-image { opacity: 0.3; } } /* behind the title on phones */

/* ---------- bands and panels ---------- */
.wb-cta-band, .wb-sec--process { margin: 0 16px; border-radius: var(--wb-radius-xl); overflow: hidden; }
.wb-cta-band { padding: clamp(48px, 6vw, 80px) 0; background: var(--wb-grad-soft); }
.wb-cta-band > .wb-bg-overlay { display: none; }
.wb-cta-band .wb-cta-band__title { color: var(--wb-ink); font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.6rem); font-weight: 600; line-height: 1.1; padding: 10px 40px 10px 10px; }
.wb-sec--process { background: var(--wb-ink); color: #fff; }
.wb-sec--process::before { content: ""; position: absolute; inset: auto -10% -40% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(129, 56, 186, 0.45), transparent 70%); pointer-events: none; }
.wb-sec--process .section-title, .wb-sec--process .section-subtitle { color: #fff; }
.wb-sec--process .section-subtitle { color: rgba(255, 255, 255, 0.75); }
.work-process-icon { display: flex; align-items: center; justify-content: center; border-color: rgba(255, 255, 255, 0.18); background-color: rgba(255, 255, 255, 0.08); box-shadow: none; color: #fff; }
.work-process-icon .wb-icon { width: 44px; height: 44px; stroke-width: 1.5; }
/* connectors between the circles: the old theme's cyan, now a faint white rule */
.working-process-group .work-process-icon::before { background-color: rgba(255, 255, 255, 0.22); opacity: 1; }
.working-process-group .work-process-icon::after { border-color: rgba(255, 255, 255, 0.45); }
.single-work-process:hover .work-process-icon { background-color: var(--wb-accent); border-color: var(--wb-accent); transform: translateY(-4px); }
.single-work-process h4 { color: #fff; font-weight: 600; letter-spacing: 0; }
.wb-bg-light { background-color: var(--wb-bg-soft); }
.wb-sec.wb-bg-blue { background-color: var(--wb-ink); }

/* ---------- cards and components used by the inner pages ---------- */
.xs-single-pricing.active { background: var(--wb-grad-brand); border-color: transparent; }
/* the rings in the corner of each plan were blue; lavender on white, translucent white on the gradient */
.xs-single-pricing .pulse-anim { background-color: #e6dcf7; }
.xs-single-pricing .pulse-anim::before { box-shadow: 0 0 0 42px #efe8fa, 0 0 0 84px #f7f3fc; }
.xs-single-pricing.active .pulse-anim { background-color: rgba(255, 255, 255, 0.14); }
.xs-single-pricing.active .pulse-anim::before { box-shadow: 0 0 0 42px rgba(255, 255, 255, 0.09), 0 0 0 84px rgba(255, 255, 255, 0.05); }
.single-service-preview { border-radius: var(--wb-radius-xl); border: 1px solid var(--wb-line); box-shadow: var(--wb-shadow-sm); }
.main-tabs .nav-item .nav-link { border-radius: var(--wb-radius); border-color: var(--wb-line); color: var(--wb-ink); font-weight: 500; }
.main-tabs .nav-item .nav-link:hover { transform: translateY(-3px); box-shadow: var(--wb-shadow-sm); }
/* The old theme sized each tab for a row of five; the tabs now share the row, however many there are. */
@media (min-width: 768px) {
	.main-tabs { flex-wrap: nowrap; gap: 24px; }
	.main-tabs .nav-item { flex: 1; width: auto; }
	.main-tabs .nav-item:not(:last-child) { margin-right: 0; }
}
.xs-single-pricing { border-radius: var(--wb-radius-xl); border: 1px solid var(--wb-line); box-shadow: none; transition: transform var(--wb-base) var(--wb-ease-out), box-shadow var(--wb-base) var(--wb-ease-out); }
.xs-single-pricing:hover { transform: translateY(-6px); box-shadow: var(--wb-shadow-md); }
.xs-single-pricing .xs-title, .xs-single-pricing .price-title { letter-spacing: -0.02em; }
/* Cards in one row grow to the tallest of them, and small icons sit in a slot at least 56px tall
   (the tallest small icon) so the titles line up across the row. */
.wb-col:has(> * > .why-choose-us-block) { align-content: stretch; }
.wb-col > :has(> .why-choose-us-block) { display: flex; }
.why-choose-us-block { flex: 1; padding: 32px 24px; border: 1px solid var(--wb-line); border-radius: var(--wb-radius-lg); background: #fff; transition: transform var(--wb-base) var(--wb-ease-out), box-shadow var(--wb-base) var(--wb-ease-out); }
.why-choose-us-block:hover { transform: translateY(-4px); box-shadow: var(--wb-shadow-md); }
.why-choose-us-block .choose-us-img { display: flex; align-items: center; justify-content: center; min-height: 56px; }
/* Icon tile: a Lucide icon on a soft square that warms to lavender with its card. */
.wb-badge { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 18px; background: var(--wb-bg-soft); color: var(--wb-accent); transition: background var(--wb-base) ease, color var(--wb-base) ease; }
.wb-badge .wb-icon { width: 30px; height: 30px; stroke-width: 1.75; }
.wb-badge--sm { width: 52px; height: 52px; border-radius: 14px; }
.wb-badge--sm .wb-icon { width: 24px; height: 24px; }
.why-choose-us-block:hover .wb-badge, .main-tabs .nav-link:hover .wb-badge { background: var(--wb-lavender); }
.main-tabs .nav-item .nav-link .wb-badge { display: flex; min-height: 0; margin: 0 auto 14px; }
.main-tabs .nav-item .nav-link.active .wb-badge { background: var(--wb-accent); color: #fff; }
.why-choose-us-block .xs-content-title { font-size: 1.25rem; letter-spacing: -0.01em; }
.wb-icon-box .elementor-icon-box-icon { border-radius: 50%; background: var(--wb-bg-soft); transition: transform var(--wb-base) var(--wb-ease-out), background var(--wb-base) ease; }
.wb-icon-box:hover .elementor-icon-box-icon { transform: translateY(-4px); background: var(--wb-lavender); }
.wb-icon-box .elementor-icon { color: var(--wb-accent); }
.wb-check-list .wb-icon { flex-shrink: 0; width: 18px; height: 18px; margin-right: 12px; color: var(--wb-accent); }
.wb-icon { display: inline-block; vertical-align: -0.15em; fill: none; } /* gutenberg-custom.css fills every svg */
.btn .wb-icon, .xs-btn .wb-icon { margin-left: 8px; vertical-align: -0.2em; }
/* Under a post: tags on the left, share buttons flush with the card's right edge (below the tags on phones). */
.single-blog-post .post-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.single-blog-post .post-footer.clearfix::after { content: none; } /* would be an extra flex item */
.single-blog-post .post-footer .post-tags, .single-blog-post .post-footer .social-share { float: none; width: auto; }
.single-blog-post .post-footer .social-share { margin-left: auto; }
.wb-share { display: flex; align-items: center; gap: 8px; }
.post-body .wb-share li { margin: 0; }
.post-body .wb-share li.title { margin-right: 6px; color: var(--wb-text-soft); font-size: 0.9375rem; font-weight: 600; }
@media (max-width: 575px) { .single-blog-post .post-footer .social-share { margin-left: 0; } }
.wb-share li a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--wb-line); color: var(--wb-ink); transition: background var(--wb-fast) ease, color var(--wb-fast) ease, border-color var(--wb-fast) ease, transform var(--wb-fast) var(--wb-ease-out); }
.wb-share li a:hover { background: var(--wb-ink); border-color: var(--wb-ink); color: #fff; transform: translateY(-2px); }
/* headings that changed level for a sane outline keep their old size */
h3.xs-content-title { font-size: 1.5rem; }
.single-work-process h3 { font-size: 1.3333333333rem; font-weight: 700; color: #fff; margin-bottom: 0; }
.meta-featured-post .wb-icon { margin-right: 4px; }
.wb-icon-list .elementor-icon-list-icon .wb-icon { width: var(--e-icon-list-icon-size, 16px); height: var(--e-icon-list-icon-size, 16px); color: var(--wb-accent); stroke-width: 2.5; }
.contact-widget .elementor-icon-box-icon { background: var(--wb-bg-soft); box-shadow: none; border: 1px solid var(--wb-line); }
.contact-widget:hover .elementor-icon-box-icon { background: var(--wb-lavender); border-color: transparent; }
.single-service { border-radius: var(--wb-radius-lg); }
.xs-list.bullet li::before { background-color: var(--wb-accent); }

/* accordion (FAQ, Support) */
.wb-toggle .elementor-toggle { display: grid; gap: 12px; }
.wb-toggle .elementor-toggle-item { border: 1px solid var(--wb-line); border-radius: var(--wb-radius); background: #fff; overflow: hidden; }
.wb-toggle .elementor-tab-title { padding: 18px 20px; font-size: 1.0625rem; font-weight: 600; color: var(--wb-ink); background: #fff; box-shadow: none; transition: color var(--wb-fast) ease, background var(--wb-fast) ease; }
.wb-toggle .elementor-tab-title:hover, .wb-toggle .elementor-tab-title.elementor-active { color: var(--wb-accent); }
.wb-toggle .elementor-tab-content { padding: 0 20px 20px; border: 0; }
.wb-toggle .elementor-toggle-icon-opened, .wb-toggle .elementor-active .elementor-toggle-icon-opened { display: none; }
.wb-toggle .elementor-toggle-icon-closed, .wb-toggle .elementor-active .elementor-toggle-icon-closed { display: block; transition: transform var(--wb-base) var(--wb-ease-out); }
.wb-toggle .elementor-active .elementor-toggle-icon-closed { transform: rotate(180deg); }
.wb-toggle .elementor-toggle-icon .wb-icon { width: 18px; height: 18px; }

/* tabs */
.tab-content > .tab-pane.active { animation: wb-rise 420ms var(--wb-ease-out) both; }

/* post content */
.entry-content blockquote, .entry-content blockquote.wp-block-quote:not(.is-large):not(.is-style-large) { margin: 32px 0; padding: 28px 32px; border: 0; border-radius: var(--wb-radius-lg); background: var(--wb-lavender); color: var(--wb-ink); } /* the second selector outranks gutenberg-custom.css */
/* post body: lists read like the paragraphs around them, with violet markers */
.single-blog-post .entry-content, .single-blog-post .entry-content > p { color: var(--wb-text); }
.single-blog-post .entry-content > p { margin: 0 0 20px; }
.single-blog-post .entry-content :is(ul, ol) { padding-left: 1.4em; margin: 0 0 20px; }
.single-blog-post .entry-content li { margin-bottom: 8px; padding-left: 4px; }
.single-blog-post .entry-content li::marker { color: var(--wb-accent); font-weight: 600; }
.single-blog-post .entry-content h3 { margin: 40px 0 12px; font-size: 1.5rem; letter-spacing: -0.015em; }
.single-blog-post .post-tags .wb-icon { margin-right: 6px; }
.entry-content blockquote > p { margin: 0; font-size: 1.125rem; line-height: 1.6; font-style: normal; font-weight: 500; }
.wp-block-quote::before, .wp-block-pullquote blockquote::before { content: none; } /* an icon-font glyph; the font is gone */
.entry-content blockquote > p::before { content: "\201C"; display: block; font-size: 3rem; line-height: 0.6; margin-bottom: 14px; color: var(--wb-accent); }

/* blog */
main > .xs-section-padding:last-child { padding-bottom: 0; } /* the footer's top margin is the gap below */
.post-list, .widget, .single-blog-post, .comments-area, .comment-respond { border-radius: var(--wb-radius-xl); border-color: var(--wb-line); }
.post-list { box-shadow: none; transition: box-shadow var(--wb-base) var(--wb-ease-out), transform var(--wb-base) var(--wb-ease-out); }
.blog-post-lists .post-list:not(.single-blog-post):hover { box-shadow: var(--wb-shadow-md); transform: translateY(-3px); }
.post-list .post-image { overflow: hidden; }
.post-list .post-image img { display: block; width: 100%; height: auto; transition: transform var(--wb-slow) var(--wb-ease-out); } /* fill the card; the files are narrower than it */
.blog-post-lists .post-list:not(.single-blog-post) .post-image img { aspect-ratio: 16 / 9; object-fit: cover; } /* every card's picture the same shape */
.blog-post-lists .post-list:not(.single-blog-post):hover .post-image img { transform: scale(1.03); }
.post-list .entry-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.025em; line-height: 1.15; }
.post-list .entry-title a, .single-title { color: var(--wb-ink); }
.post-list .entry-title a:hover { color: var(--wb-accent); }
/* In post lists the whole card opens the post: the title link stretches over the card, while the
   category link and the slider arrows sit above it and keep working. */
.blog-post-lists .post-list:not(.single-blog-post) .post-body { position: static; }
.blog-post-lists .post-list:not(.single-blog-post) .meta-featured-post.sticky { position: static; }
.blog-post-lists .post-list:not(.single-blog-post) .entry-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.blog-post-lists .post-list:not(.single-blog-post) :is(.entry-meta a, .owl-nav button) { position: relative; z-index: 2; }
.blog-post-lists .post-list:not(.single-blog-post) .gallery-slider { z-index: auto; } /* owl's own layer would keep its arrows under the card link */
.blog-post-lists .post-list:not(.single-blog-post):hover .entry-title a { color: var(--wb-accent); }
.blog-post-lists .post-list:not(.single-blog-post) .entry-title a:focus-visible { outline: none; }
.blog-post-lists .post-list:not(.single-blog-post):has(.entry-title a:focus-visible) { outline: 2px solid var(--wb-accent); outline-offset: 4px; }
/* Compact list cards (template-parts/post/content.php): stacked while the list is narrow, the cover
   beside the text once there's room. */
.blog-post-lists { container-type: inline-size; }
.blog-post-lists .post-list:not(.single-blog-post) { margin-bottom: 24px; border-radius: var(--wb-radius-lg); }
.blog-post-lists .post-list:not(.single-blog-post) .post-body { padding: 22px 24px 24px; }
.blog-post-lists .post-list:not(.single-blog-post) .entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0 0 10px; font-size: 0.875rem; color: var(--wb-text-soft); }
.blog-post-lists .post-list:not(.single-blog-post) .entry-meta > span { display: inline-flex; align-items: center; gap: 5px; margin: 0; }
.blog-post-lists .post-list:not(.single-blog-post) .post-cat a { color: var(--wb-accent); font-weight: 600; }
.blog-post-lists .post-list:not(.single-blog-post) .entry-title { margin: 0 0 8px; font-size: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.blog-post-lists .post-list:not(.single-blog-post) .entry-content { margin: 0; font-size: 0.9375rem; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.wb-card-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--wb-ink); font-size: 0.9375rem; font-weight: 600; transition: color var(--wb-fast) ease; }
.wb-card-more .wb-icon { width: 15px; height: 15px; transition: transform var(--wb-base) var(--wb-ease-out); }
.blog-post-lists .post-list:hover .wb-card-more { color: var(--wb-accent); }
.blog-post-lists .post-list:hover .wb-card-more .wb-icon { transform: translateX(3px); }
@container (min-width: 460px) {
	.blog-post-lists .post-list:not(.single-blog-post):has(> .post-image) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
	/* the picture fills its half without sizing the card (a lazy image's placeholder size would) */
	.blog-post-lists .post-list:not(.single-blog-post) .post-image { position: relative; min-height: 220px; }
	.blog-post-lists .post-list:not(.single-blog-post) .post-image img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
	.blog-post-lists .post-list:not(.single-blog-post) .post-body { display: flex; align-items: center; padding: 26px 30px; }
}
.entry-meta a, .entry-meta .wb-icon, .meta-date .wb-icon { color: var(--wb-text-soft); }
.entry-meta .wb-icon, .meta-date .wb-icon { width: 15px; height: 15px; margin-right: 2px; }
/* small text links get a 24px-plus hit area without moving the layout */
.entry-meta a, .widget_categories li a, .post-tags a, .breadcumbs > li > a, .widget-post .entry-title a { display: inline-block; padding: 3px 0; margin: -3px 0; }
.widget.widget_categories ul li::before { background-color: #c9b6ff; } /* was the old theme's blue-grey; violet on hover */
.widget { border: 1px solid var(--wb-line); box-shadow: none; }
.widget .xs-title { font-size: 1.25rem; letter-spacing: -0.01em; }
/* Sidebar call to action: the ink panel with a violet glow, like the home page's values panel. */
.widget.wb-promo { position: relative; overflow: hidden; border: 0; background: var(--wb-ink); color: rgba(255, 255, 255, 0.78); }
.wb-promo::before { content: ""; position: absolute; right: -35%; bottom: -55%; width: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(129, 56, 186, 0.55), transparent 70%); pointer-events: none; }
.wb-promo > * { position: relative; }
.wb-promo__title { margin: 0 0 10px; color: #fff; font-size: 1.625rem; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.wb-promo p { margin: 0 0 24px; font-size: 0.9375rem; line-height: 1.6; }
.pagination li a { border-color: var(--wb-line); }
/* Search (sidebar, no-results page, header popup): a rounded field with the button inside it. */
.xs-serach.style2 .input-group { position: relative; flex-wrap: nowrap; }
.xs-serach.style2 input:not([type=submit]) { height: 56px; padding: 0 64px 0 22px; border: 1px solid var(--wb-line); border-radius: 999px; background: #fff; color: var(--wb-ink); font-size: 0.9375rem; transition: border-color var(--wb-fast) ease, box-shadow var(--wb-base) ease; }
.xs-serach.style2 input:not([type=submit])::placeholder { color: var(--wb-text-soft); opacity: 1; }
.xs-serach.style2 input:not([type=submit]):hover { border-color: #d6d3e8; }
.not-found .xs-serach.style2 input:not([type=submit]) { background: #fff; } /* the old theme painted it grey */
.xs-serach.style2 input:not([type=submit]):focus { outline: none; border-color: var(--wb-accent); box-shadow: 0 0 0 4px rgba(129, 56, 186, 0.14); background: #fff; }
.xs-serach.style2 input::-webkit-search-cancel-button { display: none; }
.xs-serach.style2 .search-btn { top: 6px; right: 6px; bottom: 6px; height: auto; width: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--wb-ink); color: #fff; }
.xs-serach.style2 .search-btn:hover, .xs-serach.style2 .search-btn:focus-visible { background: var(--wb-accent); color: #fff; }
.xs-serach.style2 .search-btn .wb-icon { width: 18px; height: 18px; vertical-align: 0; }
.post-navigation { border-radius: var(--wb-radius-lg); }

/* ---------- forms ---------- */
.form-control, .xs-form .form-control, .comment-respond .xs-form .form-control {
	border: 1px solid var(--wb-line); border-radius: var(--wb-radius-sm); background: #fff; color: var(--wb-ink);
	transition: border-color var(--wb-fast) ease, box-shadow var(--wb-base) var(--wb-ease-out), background-color var(--wb-base) ease;
}
.form-control::placeholder { color: var(--wb-text-soft); opacity: 1; }
.form-control:focus, .xs-form .form-control:focus, .comment-respond .xs-form .form-control:focus { border-color: var(--wb-accent); box-shadow: 0 0 0 4px rgba(129, 56, 186, 0.14); background: #fff; }
.form-control.is-invalid, .xs-from .form-control.is-invalid, .xs-form .form-control.is-invalid { border-color: #dc3232; }
.form-control.is-invalid:focus, .xs-from .form-control.is-invalid:focus { box-shadow: 0 0 0 4px rgba(220, 50, 50, 0.14); }
h2.single-title { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2rem); line-height: 1.2; }
.price-table { line-height: 1.1; }
.pricing-header h2.xs-content-title { font-size: 1.5rem; }
.single-bio-thumb .bio-info p { color: var(--wb-text-soft); }
.single-bio-thumb h3 { color: var(--wb-accent); margin-bottom: 2px; font-size: 1.3333333333rem; font-weight: 700; }
/* previous / next post links: the label is a label, the post title is the heading */
.post-navigation .post-nav-title { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--wb-accent); }
.post-navigation h3.post-title { font-size: 1.125rem; margin: 0 0 8px; }
.weebo-form-response { border-radius: var(--wb-radius-sm); animation: wb-rise var(--wb-base) var(--wb-ease-out) both; }
.weebo-field-error { animation: wb-rise var(--wb-base) var(--wb-ease-out) both; }
.weebo-spinner { background-color: var(--wb-ink); }

/* ---------- footer ---------- */
.wb-footer { margin-top: var(--wb-section); border-top: 1px solid var(--wb-line); background: var(--wb-bg); color: var(--wb-text-soft); }
.wb-footer .container { padding-top: 56px; }
.wb-footer__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-bottom: 40px; border-bottom: 1px solid var(--wb-line); }
.wb-footer__brand img { display: block; width: 180px; height: auto; margin-bottom: 16px; }
.wb-footer__brand p { margin: 0; max-width: 36ch; }
.wb-footer__email { font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); font-weight: 600; letter-spacing: -0.03em; color: var(--wb-ink); font-variation-settings: "opsz" 96; }
.wb-footer__email:hover { color: var(--wb-accent); }
.wb-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding: 48px 0; border-bottom: 1px solid var(--wb-line); }
.wb-footer h2 { font-size: 1rem; font-weight: 600; margin: 0 0 12px; letter-spacing: 0; }
.wb-footer ul.menu { list-style: none; margin: 0; padding: 0; }
.wb-footer ul.menu li { margin: 0 0 2px; }
.wb-footer ul.menu a, .wb-footer address a { display: inline-block; padding: 4px 0; color: var(--wb-text-soft); } /* 27px tall hit area */
.wb-footer ul.menu a:hover, .wb-footer address a:hover { color: var(--wb-accent); }
.wb-footer address { font-style: normal; margin: 0; line-height: 1.8; }
.wb-footer__form .form-control { height: 48px; margin-bottom: 10px; padding-left: 16px; }
.wb-footer__form textarea.form-control { height: 96px; padding-top: 12px; }
textarea.form-control { resize: none; } /* fixed height everywhere; no drag handle */
.wb-footer__form .weebo-form-response { margin-top: 12px; }
.wb-footer__form .wb-btn { background: var(--wb-grad-brand); }
.wb-footer__form .wb-btn:hover { background: var(--wb-grad-brand); filter: brightness(1.08); }
.wb-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px 0 32px; font-size: 0.875rem; }
.wb-footer__bottom p { margin: 0; }
.wb-footer__social { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.wb-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--wb-line); color: var(--wb-ink); transition: background var(--wb-fast) ease, color var(--wb-fast) ease, border-color var(--wb-fast) ease, transform var(--wb-fast) var(--wb-ease-out); }
.wb-footer__social a:hover { background: var(--wb-ink); border-color: var(--wb-ink); color: #fff; transform: translateY(-2px); }
@media (max-width: 991px) { .wb-footer__grid { grid-template-columns: 1fr 1fr; } .wb-footer__form { grid-column: 1 / -1; } }
@media (max-width: 575px) { .wb-footer__grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- motion ---------- */
.wb-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--wb-slow) var(--wb-ease-out), transform var(--wb-slow) var(--wb-ease-out); transition-delay: calc(var(--i, 0) * 70ms); will-change: opacity, transform; }
.wb-reveal.is-in { opacity: 1; transform: none; will-change: auto; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: wb-vt-out 160ms var(--wb-ease-in) both; }
::view-transition-new(root) { animation: wb-vt-in 300ms var(--wb-ease-out) both; }
.wb-header { view-transition-name: site-header; }
::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; mix-blend-mode: normal; }
@keyframes wb-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes wb-vt-out { to { opacity: 0; } }
@keyframes wb-vt-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	@view-transition { navigation: none; }
	.wb-reveal { opacity: 1; transform: none; transition: none; }
	.tab-content > .tab-pane.active, .weebo-form-response, .weebo-field-error { animation: none; }
	.wb-btn:hover, .btn:hover, .xs-btn:hover, .sub-btn:hover, .main-tabs .nav-item .nav-link:hover, .xs-single-pricing:hover, .blog-post-lists .post-list:hover,
	.why-choose-us-block:hover, .wb-icon-box:hover .elementor-icon-box-icon, .single-work-process:hover .work-process-icon, .wb-footer__social a:hover { transform: none; }
	.blog-post-lists .post-list:hover .post-image img { transform: none; }
}