/*
 * Venda "clean futuristic" layer — sits on top of the Elementor design without moving anything.
 * Principles: generous whitespace, calm typography, thin precise lines, one accent at a time,
 * subtle motion that never blocks content. Venda palette: navy #171D2E, blue #0052FF, lime #C6FF00.
 * Motion only runs when <html> has .venda-motion (set early in <head> unless the visitor prefers reduced motion).
 */
:root {
  --vm-navy: #171D2E;
  --vm-blue: #0052FF;
  --vm-lime: #C6FF00;
  --vm-ink: #171D2E;
  --vm-muted: rgba(23, 29, 46, .68);
  --vm-line: rgba(23, 29, 46, .1);
  --vm-line-dark: rgba(244, 244, 244, .14);
  --vm-ease: cubic-bezier(.22, .61, .36, 1);
  --vm-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- Typography: calmer, tighter, better balanced ---------- */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.elementor-heading-title, .elementor-widget-theme-post-title .elementor-heading-title,
.venda-svc-card__title, .venda-why__title, .venda-faq__intro h2, .venda-newsletter__title {
  text-wrap: balance;
  letter-spacing: -0.02em;
}
h1.elementor-heading-title { letter-spacing: -0.03em; }
.elementor-widget-text-editor p, .venda-prose p, .venda-why__text p { text-wrap: pretty; }

/* Eyebrow labels (small uppercase headings): a precise mono label with a short accent line. Set by venda-modern.js. */
.venda-label .elementor-heading-title, .venda-label .elementor-icon-box-title, .venda-label, .venda-label p {
  font-family: var(--vm-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
}
.venda-label .elementor-heading-title::before, .venda-eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-right: 10px;
  vertical-align: middle;
  background: currentColor;
  opacity: .6;
}
.venda-eyebrow { font-family: var(--vm-mono); letter-spacing: .14em; }

/* Long centered paragraphs get a comfortable reading width (class set by venda-modern.js). */
.venda-measure { max-width: 68ch; margin-inline: auto; }

/* ---------- Header: floating glass bar that firms up on scroll ---------- */
.elementor-location-header .e-con.e-parent { transition: box-shadow .35s var(--vm-ease), background-color .35s var(--vm-ease), backdrop-filter .35s; }
html.venda-scrolled .elementor-location-header .e-con.e-parent > .e-con-inner > .e-con:first-child,
html.venda-scrolled .elementor-location-header .e-con.e-parent > .e-con:first-child {
  box-shadow: 0 10px 30px -12px rgba(23, 29, 46, .18);
}
@supports (backdrop-filter: blur(8px)) {
  html.venda-scrolled .elementor-location-header .e-con.e-parent > .e-con-inner > .e-con:first-child,
  html.venda-scrolled .elementor-location-header .e-con.e-parent > .e-con:first-child {
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
  }
}
/* Nav links: thin underline that draws in */
.elementor-location-header .elementor-nav-menu--main .elementor-item,
.elementor-location-header .e-n-menu-title-text { position: relative; }
.elementor-location-header .elementor-nav-menu--main .elementor-item::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1px;
  background: var(--vm-blue); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--vm-ease);
}
.elementor-location-header .elementor-nav-menu--main .elementor-item:hover::after,
.elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active::after { transform: scaleX(1); }

/* ---------- Buttons: same shapes and positions, crisper feedback ---------- */
.elementor-button, .venda-btn, .venda-newsletter__button {
  transition: transform .25s var(--vm-ease), box-shadow .25s var(--vm-ease), background-color .25s, color .25s, border-color .25s !important;
  will-change: transform;
}
.elementor-button:hover, .venda-btn:hover, .venda-newsletter__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(0, 82, 255, .45);
}
.elementor-button:active, .venda-btn:active { transform: translateY(0); box-shadow: none; }
.elementor-button .elementor-button-icon svg, .elementor-button .elementor-button-icon i { transition: transform .25s var(--vm-ease); }
.elementor-button:hover .elementor-button-icon svg, .elementor-button:hover .elementor-button-icon i { transform: translateX(3px); }
.elementor-button:focus-visible, .venda-btn:focus-visible, a:focus-visible { outline: 2px solid var(--vm-blue); outline-offset: 3px; }

/* ---------- Cards: precise lines, gentle lift, image drift ---------- */
.e-con.venda-card, .venda-svc-card, a.venda-svc-child, .venda-aside-card, .venda-faq__item {
  transition: transform .35s var(--vm-ease), box-shadow .35s var(--vm-ease), border-color .35s var(--vm-ease), background-color .35s;
}
.e-loop-item > .e-con.venda-card--loop:hover, .venda-liftable:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -28px rgba(23, 29, 46, .35);
}
.e-loop-item .venda-card--loop img, .e-con.venda-card .elementor-widget-image img { transition: transform .8s var(--vm-ease); }
.e-loop-item:hover .venda-card--loop img, .e-con.venda-card:hover .elementor-widget-image img { transform: scale(1.03); }

/* ---------- Dark sections: a faint technical grid + soft blue glow (class set by venda-modern.js) ---------- */
.venda-dark { position: relative; isolation: isolate; }
.venda-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background-image:
    radial-gradient(60% 50% at 85% 0%, rgba(0, 82, 255, .22), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 100%);
}

/* ---------- Content links: underline that grows ---------- */
.elementor-widget-text-editor a:not(.elementor-button), .venda-prose a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .35s var(--vm-ease);
  box-shadow: inset 0 -1px 0 rgba(0, 82, 255, .3);
}
.elementor-widget-text-editor a:not(.elementor-button):hover, .venda-prose a:hover { background-size: 100% 1px; }

/* ---------- Scroll reveal ---------- */
html.venda-motion .venda-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .8s var(--vm-ease), transform .8s var(--vm-ease);
  transition-delay: calc(var(--vm-i, 0) * 70ms);
}
html.venda-motion .venda-reveal.is-visible { opacity: 1; transform: none; }

/* Hero: a slow, barely-there light sweep behind the first section (no layout impact, GPU only) */
html.venda-motion .venda-hero-glow { position: relative; isolation: isolate; }
html.venda-motion .venda-hero-glow::after {
  content: ""; position: absolute; inset: -10% -5% auto; height: 70%; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 60% at 20% 30%, rgba(0, 82, 255, .10), transparent 70%),
              radial-gradient(30% 50% at 80% 20%, rgba(198, 255, 0, .10), transparent 70%);
  animation: vm-drift 18s ease-in-out infinite alternate;
}
@keyframes vm-drift { from { transform: translate3d(-2%, 0, 0); } to { transform: translate3d(2%, 3%, 0); } }

/* Scroll progress hairline */
.venda-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 10000; pointer-events: none;
  background: linear-gradient(90deg, var(--vm-blue), var(--vm-lime)); transform-origin: 0 50%; transform: scaleX(var(--vm-progress, 0)); }

@media (prefers-reduced-motion: reduce) {
  .elementor-button, .venda-btn, .e-con.venda-card, .venda-svc-card { transition: none !important; }
  .elementor-button:hover, .venda-btn:hover, .e-con.venda-card:hover { transform: none !important; }
  .venda-progress { display: none; }
}
@media print {
  html.venda-motion .venda-reveal { opacity: 1 !important; transform: none !important; }
  .venda-progress { display: none; }
}

/* =====================================================================
 * Layout rhythm (2026.10.17) — consistent gutters, spacing and titles on every page.
 * ===================================================================== */

/* Page titles: the merged stylesheet carried a page-level "hide title" (--page-title-display:none)
   into every page, which hid the H1 title widget on services, sub-services, industries, posts and
   case studies. Title widgets placed in a layout are meant to show. */
.elementor-widget-theme-post-title.elementor-page-title:not([class*="elementor-hidden-"]) { display: block; }

/* Side gutter at every width (the harmony layer only applied it ≤1024px). Between ~1025px and
   1460px the 1400px boxed width otherwise ran edge-to-edge. Wider screens are unaffected. */
:root { --vm-gutter: clamp(16px, 3.6vw, 56px); --vm-section-y: clamp(56px, 7vw, 104px); }
@media (min-width: 1025px) {
  [data-elementor-type]:not([data-elementor-type="header"]) > .e-con.e-parent {
    padding-inline-start: max(var(--vm-gutter), var(--padding-inline-start, 0px));
    padding-inline-end: max(var(--vm-gutter), var(--padding-inline-end, 0px));
  }
}

/* The last section never sits flush on the footer. */
[data-elementor-type="wp-page"] > .e-con.e-parent:last-child,
[data-elementor-type="wp-post"] > .e-con.e-parent:last-child,
[data-elementor-type="single-page"] > .e-con.e-parent:last-child,
[data-elementor-type="single-post"] > .e-con.e-parent:last-child {
  padding-block-end: max(var(--vm-section-y), var(--padding-block-end, 0px));
}

/* Titles promoted from H2 to the page's H1 keep the H2 size they were designed at
   (low specificity, so a widget's own typography still wins). */
.elementor-kit-9 :where(.venda-h1-promoted) h1 {
  font-size: var(--e-global-typography-vamtam_h2-font-size);
  line-height: var(--e-global-typography-vamtam_h2-line-height);
  letter-spacing: var(--e-global-typography-vamtam_h2-letter-spacing);
}

/* Long-form copy blocks (SEO articles inside pages) keep a comfortable line length (set by venda-modern.js). */
.venda-readable { max-width: 76ch; margin-inline: auto; }
.venda-readable h2, .venda-readable h3 { margin-top: 1.6em; margin-bottom: .5em; letter-spacing: -0.015em; text-wrap: balance; }
.venda-readable p, .venda-readable li { line-height: 1.75; }

/* ---------- Industries hub (/web-design-for-industries/) ---------- */
.elementor-38 .elementor-element-b6ffad9 { padding-inline: 0 !important; }
.elementor-38 .elementor-element-0b80fb5 { padding-inline: 0 !important; }
.elementor-38 .elementor-element.elementor-element-48536bd { width: min(100%, 880px) !important; max-width: 880px; margin-inline: auto; }
.elementor-38 .elementor-element-48536bd p { max-width: 64ch; margin-inline: auto; }
.elementor-38 .elementor-element-48536bd :is(h1, h3):first-of-type {
  font-size: clamp(34px, 2rem + 2.2vw, 58px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  text-wrap: balance;
}
.elementor-38 .elementor-element-48536bd p { font-size: 17px; line-height: 1.65; }
/* Industry cards: 4 across on desktop (8 industries = two even rows), numbered, equal height. */
.elementor-38 .elementor-element-2ffb700 .elementor-loop-container { counter-reset: venda-industry; }
@media (min-width: 1200px) {
  .elementor-38 .elementor-element.elementor-element-2ffb700 .elementor-loop-container.elementor-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 24px !important; }
}
.elementor-38 .elementor-element-2ffb700 .e-loop-item { counter-increment: venda-industry; }
.elementor-38 .elementor-element-2ffb700 .elementor-element-d1484e6::before {
  content: counter(venda-industry, decimal-leading-zero);
  display: block; margin-bottom: 22px;
  font-family: var(--vm-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--vm-blue);
}
.elementor-38 .elementor-element-bf8ec37 { padding-block: var(--vm-section-y) clamp(32px, 4vw, 56px) !important; }
.elementor-38 .elementor-element-4382529 > .e-con-inner, .elementor-38 .elementor-element-4382529 { gap: 24px; }
.elementor-38 .elementor-element-395705b, .elementor-38 .elementor-element-60178b3 { border-radius: var(--venda-radius-lg, 24px); }

/* ---------- Industry detail pages: hero card breathes, section heads line up ---------- */
.parent-pageid-38 .elementor > .e-parent > .e-child:nth-child(2) .elementor-widget-theme-post-title .elementor-heading-title {
  font-size: clamp(32px, 1.6rem + 2vw, 52px); line-height: 1.1; letter-spacing: -0.03em; max-width: 22ch;
}
.parent-pageid-38 .elementor > .e-parent > .e-child:nth-child(2) { padding-inline: clamp(24px, 4.5vw, 72px) !important; }

/* =====================================================================
 * Contrast (2026.10.18) — no text disappears into its background.
 * ===================================================================== */
:root { --vm-on-dark: #FFFFFF; --vm-on-dark-muted: rgba(255, 255, 255, .82); --vm-on-dark-accent: #8AB0FF; }

/* Links inside headings stay plain (no growing underline on titles). */
.elementor-widget-text-editor :is(h1, h2, h3, h4) a:not(.elementor-button) { background-image: none; box-shadow: none; }

/* Dark sections: headings and copy that kept the default navy colour become light; the
   brand blue becomes a lighter blue that stays readable on navy. Classes set by venda-modern.js. */
.venda-on-dark { color: var(--vm-on-dark) !important; }
.venda-on-dark-muted { color: var(--vm-on-dark-muted) !important; }
.venda-on-dark-accent { color: var(--vm-on-dark-accent) !important; }

/* Light sections: the pale grey used for small labels was too faint (2.6:1). */
.venda-service-title-group .venda-service-num { color: #64748B !important; }
.venda-service-item.is-active .venda-service-title-group .venda-service-num { color: var(--vm-blue) !important; }
.venda-brand-slider-divider .venda-divider-text { color: #64748B !important; }
.elementor-form .elementor-field-type-html p { color: #4B5563 !important; }

/* =====================================================================
 * Industries hub hero (2026.10.19) — light background, dark text, centred.
 * ===================================================================== */
body .elementor-38 .elementor-element.elementor-element-6eae162 {
  background-color: #F4F6FB !important;
  background-image:
    radial-gradient(55% 70% at 50% 0%, rgba(0, 82, 255, .08), transparent 70%),
    linear-gradient(rgba(23, 29, 46, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 29, 46, .04) 1px, transparent 1px) !important;
  background-size: auto, 56px 56px, 56px 56px !important;
  border-bottom: 1px solid rgba(23, 29, 46, .08);
}
body .elementor-38 .elementor-element.elementor-element-6eae162::before { display: none !important; }
body .elementor-38 .elementor-element.elementor-element-6eae162 :is(.e-con, .elementor-widget) { text-align: center; }
body .elementor-38 .elementor-element.elementor-element-6eae162 .e-con { align-items: center !important; }
/* Eyebrow: lime is unreadable on light — brand blue instead */
body .elementor-38 .elementor-element.elementor-element-6eae162 .elementor-icon-box-wrapper { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-align: center; }
body .elementor-38 .elementor-element.elementor-element-6eae162 .elementor-icon-box-title,
body .elementor-38 .elementor-element.elementor-element-6eae162 .elementor-icon-box-title span { color: var(--vm-blue) !important; }
/* Title, copy and emphasis: navy on light */
body .elementor-38 .elementor-element.elementor-element-6eae162 :is(h1, h2, h3),
body .elementor-38 .elementor-element.elementor-element-6eae162 :is(h1, h2, h3) :is(b, strong, span) { color: var(--vm-navy) !important; }
body .elementor-38 .elementor-element.elementor-element-6eae162 :is(h1, h3) a { color: var(--vm-blue) !important; }
body .elementor-38 .elementor-element.elementor-element-6eae162 p { color: rgba(23, 29, 46, .74) !important; text-align: center; margin-inline: auto; }
body .elementor-38 .elementor-element.elementor-element-6eae162 p :is(b, strong) { color: var(--vm-navy) !important; }
body .elementor-38 .elementor-element.elementor-element-6eae162 .elementor-widget-button .elementor-button-wrapper { text-align: center; display: flex; justify-content: center; }

/* =====================================================================
 * Animated headline (2026.10.20) — rotating words always visible.
 * Letter-by-letter Elementor animations (blinds, wave, rotate-2/3, scale, type) hide each word
 * (opacity 0) and reveal it letter by letter; our lightweight rotator swaps whole words instead,
 * so the active word must be shown here (the fade between words is kept).
 * ===================================================================== */
.elementor-headline .elementor-headline-dynamic-text { transition: opacity .45s var(--vm-ease); }
.elementor-headline .elementor-headline-dynamic-text.elementor-headline-text-active:not(.elementor-headline-text-fading-out) { opacity: 1 !important; }
.elementor-headline .elementor-headline-dynamic-text:not(.elementor-headline-text-active),
.elementor-headline .elementor-headline-dynamic-text.elementor-headline-text-fading-out { opacity: 0 !important; }
.elementor-headline .elementor-headline-dynamic-text:empty { display: none; }