/* Webseed theme – components & effects.
   Rules: logical properties only (margin-inline, padding-inline-start, inset-inline, text-align:start)
   so the same CSS works in LTR and RTL. Physical directions only where an effect must flip (:dir()).
   Motion: base styles are the calm, finished state; animation lives in @media (prefers-reduced-motion: no-preference)
   or starts hidden only under .js, with a static fallback at the end of this file. */

:root {
	--ws-gutter: var(--wp--preset--spacing--l);
	--ws-wrap: 75rem;
	--ws-wide: 82.5rem;
	--ws-sec: clamp(2.75rem, 1.5rem + 4.2vw, 5.5rem);
	--ws-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--ws-ink: var(--wp--preset--color--ink);
	--ws-slate: var(--wp--preset--color--slate);
	--ws-blue: var(--wp--preset--color--blue);            /* dusty blue: decorative / large accents */
	--ws-blue-mid: var(--wp--preset--color--blue-mid);    /* large text on light (3:1+) */
	--ws-blue-deep: var(--wp--preset--color--blue-deep);  /* links and small text (AA) */
	--ws-sand: var(--wp--preset--color--sand);
	--ws-misty: var(--wp--preset--color--misty);
	--ws-paper: var(--wp--preset--color--paper);
	--ws-c-mist: var(--wp--preset--color--c-mist);
	--ws-c-sand: var(--wp--preset--color--c-sand);
	--ws-c-blush: var(--wp--preset--color--c-blush);
	--ws-mauve: var(--wp--preset--color--mauve);
	--ws-crimson: var(--wp--preset--color--crimson);
	--ws-crimson-deep: var(--wp--preset--color--crimson-deep);
	--ws-coral: var(--wp--preset--color--coral);
	--ws-coral-text: var(--wp--preset--color--coral-text);
	--ws-green: var(--wp--preset--color--green);
	--ws-line: var(--wp--preset--color--line);
	--ws-hero-light: #e1dcd8;   /* matches the sections below the hero */
	--ws-hero-dark: #010102;    /* black of the hero image */
	}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-block-start: 4.5rem; }
body { margin: 0; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { max-inline-size: 100%; }
html .wp-site-blocks > * + * { margin-block-start: 0; }
.ws-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


:focus-visible { outline: 3px solid var(--ws-blue-deep); outline-offset: 3px; border-radius: 4px; box-shadow: 0 0 0 6px rgb(127 155 184 / 0.45); }
.ws-hero :focus-visible, .ws-cta :focus-visible, .ws-section--dark :focus-visible, .ws-footer :focus-visible,
.is-menu-open :focus-visible { outline-color: var(--ws-c-mist); }

.ws-grid { display: grid; gap: var(--ws-gutter); }
.ws-wrap { max-inline-size: var(--ws-wrap); margin-inline: auto; }
.ws-wrap--wide { max-inline-size: var(--ws-wide); }
.ws-main :is(.ws-why__item, .ws-step, .ws-experience__box, .ws-price, .ws-footer__col, .ws-grid, .ws-steps, .ws-why__list, .ws-light__grid, .ws-split, .ws-hero__inner, .ws-hero__copy, .ws-planted__copy, .ws-chips, .ws-points, .ws-proof, .ws-proof__row, .ws-pricing__more, .ws-included, .ws-extras) > * { margin-block: 0; }
.ws-main .wp-block-post-content > .alignfull { margin-block: 0; }
.wp-site-blocks .ws-rot-words { display: none; } /* word list for the hero rotator; visible in the editor only */

/* ---------- Header ---------- */
.wp-site-blocks > header { position: sticky; inset-block-start: 0; z-index: 50; border-block-end: 1px solid rgb(28 28 30 / 0.08); }
/* blur on a pseudo-element: backdrop-filter on the header itself would trap the fixed mobile-menu overlay */
.wp-site-blocks > header::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: rgb(248 247 245 / 0.88); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px);
}
.admin-bar .wp-site-blocks > header { inset-block-start: var(--wp-admin--admin-bar--height, 32px); }
.ws-header { max-inline-size: calc(var(--ws-wide) + 2 * var(--ws-gutter)); margin-inline: auto; padding: 0.65rem var(--ws-gutter); gap: 1rem; }
.ws-header > * { margin-block: 0; }
.ws-logo { margin: 0; flex: none; }
.ws-logo a { display: block; line-height: 0; }
.ws-logo img, .ws-logo svg { block-size: 2.4rem; inline-size: auto; display: block; }
.ws-logo__pulse { fill: none; stroke: #fff; stroke-width: 30; stroke-linecap: round; stroke-dasharray: 0.16 1.2; stroke-dashoffset: 0.16; opacity: 0; filter: drop-shadow(0 0 22px #fff) drop-shadow(0 0 8px #fff); }
.ws-logo__node { transform-box: fill-box; transform-origin: center; }
.ws-header__right { gap: clamp(0.75rem, 2vw, 1.75rem); }
.ws-nav .wp-block-navigation__container { gap: clamp(0.9rem, 2vw, 1.9rem); }
.ws-nav .wp-block-navigation-item__content { color: var(--ws-ink); text-decoration: none; padding-block: 0.4rem; position: relative; }
.ws-nav .wp-block-navigation-item__content::after {
	content: ""; position: absolute; inset-inline: 0; inset-block-end: 0.1rem; block-size: 2px; border-radius: 2px;
	background: var(--ws-blue); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s var(--ws-ease);
}
.ws-nav .wp-block-navigation-item__content:dir(rtl)::after { transform-origin: 100% 50%; }
.ws-nav .wp-block-navigation-item__content:hover::after, .ws-nav .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.ws-nav .wp-block-navigation-item.ws-nav-cta { display: none; }
.ws-header .ws-header__cta { display: none; margin: 0; }
.ws-header__cta .wp-block-button__link {  padding-block: 0.65em; padding-inline: 1.25em; white-space: nowrap; }
@media (min-width: 900px) { .ws-header .ws-header__cta { display: flex; } }

.ws-nav .wp-block-navigation__responsive-container-open, .ws-nav .wp-block-navigation__responsive-container-close { color: var(--ws-ink); }
.ws-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--gradient--night); color: var(--ws-paper); padding: 1.25rem var(--ws-gutter); }
.ws-nav .is-menu-open .wp-block-navigation-item__content { color: var(--ws-paper);   }
.ws-nav .is-menu-open .wp-block-navigation__responsive-container-close { color: var(--ws-paper); }
.ws-nav .is-menu-open .wp-block-navigation__container, .ws-nav .is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; }
.ws-nav .is-menu-open .wp-block-navigation__container { gap: 1.1rem; }
.ws-nav .is-menu-open .wp-block-navigation-item.ws-nav-cta { display: block; margin-block-start: 1.25rem; }
.ws-nav .is-menu-open .ws-nav-cta .wp-block-navigation-item__content { display: inline-block; background: var(--ws-paper); color: var(--ws-ink); border-radius: 999px; padding: 0.75rem 1.5rem;  }
.ws-nav .is-menu-open .ws-nav-cta .wp-block-navigation-item__content::after { display: none; }

/* language dropdown ([ws_lang]): "NL ▾" button + list of full names */
.ws-nav .wp-block-polylang-navigation-language-switcher { display: none; }
.ws-nav .is-menu-open .wp-block-polylang-navigation-language-switcher { display: block; margin-block-start: 1rem; }
.ws-nav .is-menu-open .wp-block-polylang-navigation-language-switcher .wp-block-navigation-item__content {   opacity: 0.8; }
.ws-nav .is-menu-open .wp-block-polylang-navigation-language-switcher.current-lang .wp-block-navigation-item__content { opacity: 1;  color: var(--ws-c-mist); }

/* header over the dark hero (Home, at the top): dark bar, light text, white logo wordmark; light again after the hero (.ws-head-past, set in main.js) */
.home .wp-site-blocks > header { transition: border-color 0.3s; }
.home .wp-site-blocks > header::before { transition: background-color 0.3s; }
.home .wp-site-blocks > header:not(.ws-head-past) { border-block-end-color: rgb(255 255 255 / 0.1); }
.home .wp-site-blocks > header:not(.ws-head-past)::before { background: rgb(1 1 2 / 0.94); }
.home header:not(.ws-head-past) .ws-logo path[fill="#1C1C1E"] { fill: #fff; }
.home header:not(.ws-head-past) .ws-nav .wp-block-navigation-item__content, .home header:not(.ws-head-past) .ws-nav .wp-block-navigation__responsive-container-open { color: #fff; }
.home header:not(.ws-head-past) .ws-nav .is-menu-open .wp-block-navigation-item__content { color: var(--ws-paper); }
.home header:not(.ws-head-past) .ws-nav .wp-block-navigation-item__content::after { background: var(--ws-coral); }
.home header:not(.ws-head-past) .ws-langdd__btn { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.4); }
.home header:not(.ws-head-past) .ws-langdd__btn:hover, .home header:not(.ws-head-past) .ws-langdd.is-open .ws-langdd__btn { border-color: #fff; }
.home header:not(.ws-head-past) .ws-header__cta .wp-block-button__link { background: #fff; color: var(--ws-ink); }
.home header:not(.ws-head-past) :focus-visible { outline-color: var(--ws-c-mist); }

/* ---------- Buttons ---------- */
.wp-block-button__link { text-decoration: none; transition: transform 0.25s var(--ws-ease), background-color 0.25s, color 0.25s, box-shadow 0.25s; }
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: var(--wp--preset--shadow--soft); }
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--ws-ink); border: 2px solid currentColor; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--ws-ink); color: var(--ws-paper); border-color: var(--ws-ink); }
.ws-cta .wp-block-button__link { background: var(--ws-crimson); color: #fff; box-shadow: 0 0 0 2px rgb(248 247 245 / 0.85); }
.ws-cta .wp-block-button__link:hover { background: var(--ws-crimson-deep); color: #fff; }
.wp-block-button__link:active { background: var(--ws-slate); }

/* ---------- Generic sections ---------- */
.ws-section { position: relative; padding-block: var(--ws-sec); padding-inline: var(--ws-gutter); }
.ws-section { background: var(--wp--preset--gradient--sand); }
.ws-section--mist, .ws-section--fresh { background: var(--wp--preset--gradient--misty); }
.ws-section--dark { background: var(--wp--preset--gradient--night); color: var(--ws-misty); }
.ws-section--dark h2, .ws-section--dark h3 { color: var(--ws-paper); }
.ws-section__title {  margin-block-end: clamp(1.5rem, 1rem + 2vw, 2.5rem); text-wrap: balance; }
.ws-eyebrow {     color: var(--ws-blue-deep); margin-block-end: 0.6rem; }
.ws-section--dark .ws-eyebrow { color: var(--ws-misty); }

/* ---------- 1. Hero ---------- */
.ws-hero {
	position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center;
	min-block-size: clamp(36rem, calc(100svh - 4.3rem), 62rem);
	padding-block: clamp(2.5rem, 1rem + 4vw, 4.5rem); padding-inline: var(--ws-gutter);
	color: var(--ws-ink); background: var(--ws-hero-light);
}
.ws-hero__inner { inline-size: 100%; position: relative; display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem); align-items: center; }
.ws-hero__copy { display: grid; gap: 1.25rem; justify-items: start; }
.ws-hero__title strong { font-weight: inherit; }
.ws-hero__lead { max-inline-size: 34rem; margin-block-end: 0.5rem; }
.ws-hero__buttons { gap: 0.9rem; }

/* hero on the dark tree image: picture (AVIF/WebP, art-directed mobile crop) + CSS fade into the warm light page colour.
   Mobile: tree on top, text below on a dark-to-light fade, browser on the light part. Desktop: tree left, fade to the right. */
.ws-hero { --hero-fg: #fff; --hero-lead: #d6dae0; --hero-accent: #ff7a73; color: var(--hero-fg); }
.ws-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -4; pointer-events: none;
	background: linear-gradient(180deg, var(--ws-hero-dark) 0, var(--ws-hero-dark) calc(100% - 22.5rem), var(--ws-hero-light) calc(100% - 13rem));
}
.ws-hero__bg { position: absolute; inset: 0 0 auto; block-size: 26rem; z-index: -3; pointer-events: none; margin: 0; display: block; }
.ws-hero__bg img { display: block; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; object-position: 50% 50%; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.ws-hero__title { color: var(--hero-fg); }
.ws-hero__title strong { color: var(--hero-accent); }
.ws-hero__lead { color: var(--hero-lead); }
.ws-hero__copy { position: relative; }
.ws-hero__copy::before {
	content: ""; position: absolute; inset: -2.5rem -2rem; z-index: -1; pointer-events: none; border-radius: 50%;
	background: radial-gradient(closest-side, rgb(1 1 2 / 0.6), rgb(1 1 2 / 0.35) 55%, transparent);
}
.ws-hero__buttons .wp-block-button__link { background: #fff; color: var(--ws-ink); }
.ws-hero__buttons .wp-block-button__link:hover { background: var(--ws-c-mist); }
.ws-hero__buttons .is-style-outline .wp-block-button__link { background: transparent; color: #fff; border: 1.5px solid rgb(255 255 255 / 0.7); }
.ws-hero__buttons .is-style-outline .wp-block-button__link:hover { background: rgb(255 255 255 / 0.14); }
.ws-hero__inner { padding-block-start: 20.5rem; }
.ws-visual { margin-block-start: 1rem; }
@media (min-width: 960px) {
	.ws-hero::before { display: none; }
	/* the image has a transparent background: a dark layer fades into the warm page colour (CSS, not baked in) and the glowing lines stay faintly visible on the right */
	.ws-hero__bg { inset: 0; block-size: auto; container-type: size; overflow: hidden; }
	.ws-hero__bg::before {
		content: ""; position: absolute; inset: 0;
		background: linear-gradient(to right, var(--ws-hero-dark) 0, var(--ws-hero-dark) 38%, rgb(1 1 2 / 0.72) 49%, rgb(1 1 2 / 0.3) 60%, rgb(1 1 2 / 0) 76%);
	}
	/* tree trunk stays at 40% of the hero, tree height = hero height. Physical `left`: the picture is never mirrored (it contains Latin text). */
	.ws-hero__bg img {
		position: absolute; inset-block: 0; left: calc(40cqw - 0.7368 * 100cqh); inline-size: auto; block-size: 100%; object-fit: fill;
		-webkit-mask-image: linear-gradient(to right, #000 0, #000 40%, rgb(0 0 0 / 0.55) 56%, rgb(0 0 0 / 0.26) 100%);
		mask-image: linear-gradient(to right, #000 0, #000 40%, rgb(0 0 0 / 0.55) 56%, rgb(0 0 0 / 0.26) 100%);
	}
	.ws-hero__inner { padding-block-start: 0; }
	.ws-visual { margin-block-start: 0; }
	/* Arabic: mirrored, text-free image (hero-ar-*): tree + white text on the right over the dark part, browser frame on the light left, fade to the left. */
	.ws-hero:dir(rtl) .ws-hero__bg::before { background: linear-gradient(to left, var(--ws-hero-dark) 0, var(--ws-hero-dark) 38%, rgb(1 1 2 / 0.72) 49%, rgb(1 1 2 / 0.3) 60%, rgb(1 1 2 / 0) 76%); }
	.ws-hero:dir(rtl) .ws-hero__bg img { left: auto; right: calc(40cqw - 0.7368 * 100cqh); -webkit-mask-image: linear-gradient(to left, #000 0, #000 40%, rgb(0 0 0 / 0.55) 56%, rgb(0 0 0 / 0.26) 100%); mask-image: linear-gradient(to left, #000 0, #000 40%, rgb(0 0 0 / 0.55) 56%, rgb(0 0 0 / 0.26) 100%); }
}

/* wires follow the tree: warm amber near the roots, soft blue towards the browser */
.ws-defs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.ws-hero .ws-circuit--wide .ws-circuit__lines path { stroke: url(#wsg-wide); }
.ws-hero .ws-circuit--tall .ws-circuit__lines path { stroke: url(#wsg-tall); }
.ws-hero .ws-bw-wires .ws-circuit__lines path { stroke: url(#wsg-bw); opacity: 0.95; }
.ws-hero .ws-circuit__lines path:nth-child(even) { opacity: 0.6; }
.ws-hero .ws-circuit__dots circle { fill: #F2C48A; stroke: #F2A65A; }
.ws-hero .ws-circuit__signals path { filter: drop-shadow(0 0 3px rgb(242 166 90 / 0.8)) drop-shadow(0 0 8px #fff); }

/* rotating word (JS builds .ws-rot) */
.ws-rot {
	/* 1.5em window with -0.15em margins keeps the line height of 1.2em but gives ascenders and descenders full room;
	   the edge fade only starts beyond the letters (letters live in roughly 25%-89% of the window). */
	display: inline-block; overflow: hidden; vertical-align: bottom; block-size: 1.5em; margin-block: -0.15em; line-height: 1.5;
	-webkit-mask-image: linear-gradient(transparent 12%, #000 22%, #000 91%, transparent 100%); mask-image: linear-gradient(transparent 12%, #000 22%, #000 91%, transparent 100%);
}
.ws-rot__in { display: flex; flex-direction: column; transform: translateY(calc(var(--r, 0) * -1.5em)); transition: transform 0.7s var(--ws-ease); }
.ws-rot__in > span { block-size: 1.5em; line-height: 1.5; white-space: nowrap; align-self: flex-start; } /* shrink to the word so the highlight gradient spans exactly the word */
.ws-bw:dir(rtl) .bw-tag { direction: ltr; }
.ws-rot__in.is-reset { transition: none; }

/* split headline words (JS wraps words in .w) */
.js .ws-words:not(.is-split) { opacity: 0; }
.ws-words .w { display: inline-block; }

/* circuit wires */
.ws-circuit { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: -1; pointer-events: none; }
.ws-circuit:dir(rtl) { scale: -1 1; } /* keep the wires away from right-aligned text */
.ws-circuit--tall { display: none; }
@media (max-width: 959px) { .ws-circuit--wide { display: none; } .ws-circuit--tall { display: block; } }
.ws-circuit__lines path { fill: none; stroke: var(--ws-blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.ws-circuit__lines path:nth-child(even) { stroke: var(--ws-slate); opacity: 0.45; }
.ws-circuit__signals path { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.05 1; stroke-dashoffset: 0; opacity: 0; filter: drop-shadow(0 0 3px rgb(74 85 96 / 0.55)) drop-shadow(0 0 8px #fff); }
.ws-circuit__dots circle { fill: var(--ws-c-blush); stroke: var(--ws-slate); stroke-width: 2; filter: drop-shadow(0 0 6px rgb(235 205 186 / 0.9)); }

/* hero visual: a browser window that builds itself */
.ws-visual { position: relative; inline-size: min(100%, 34rem); margin-inline: auto; }
.ws-bw { display: block; inline-size: 100%; block-size: auto; overflow: visible; filter: drop-shadow(0 26px 34px rgb(28 28 30 / 0.22)); }
.ws-bw-wires { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; display: none; pointer-events: none; z-index: -1; }
.ws-bw:dir(rtl) { scale: 1; }
.ws-bw-wires:dir(rtl) { scale: -1 1; } /* the wires leave the frame towards the tree, which is on the right in Arabic */
.bw-el { fill: var(--f); fill-opacity: 1; stroke: #7F9BB8; stroke-width: 1.5; stroke-dasharray: 4 4; stroke-opacity: 0; }
.bw-online text { font-family: inherit; }
.bw-tag { font: 600 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; fill: #3F5B78; opacity: 0; letter-spacing: 0; pointer-events: none; }
.bw-ring { transform-box: fill-box; transform-origin: center; opacity: 0.35; }
@media (min-width: 960px) {
	.ws-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
	.ws-visual { inline-size: 100%; max-inline-size: 36rem; margin-inline-end: 0; }
	.ws-bw-wires { display: block; }
}

/* ---------- 2. Statement ---------- */
.ws-statement { padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem); }
.ws-statement__big {     color: var(--ws-ink); max-inline-size: 38ch; text-wrap: balance; }
.ws-statement__big strong { position: relative; display: inline-block;  color: var(--ws-coral-text); }
.ws-statement__big strong::after {
	content: ""; position: absolute; inset-inline: 0; inset-block-end: -0.06em; block-size: 4px; border-radius: 99px; background: var(--ws-coral); transform-origin: 0 50%;
}
.ws-statement__big strong:dir(rtl)::after { transform-origin: 100% 50%; }
.js .ws-statement__big strong::after { transform: scaleX(0); transition: transform 1.1s var(--ws-ease) 0.5s; }
.js .ws-statement__big.is-visible strong::after { transform: scaleX(1); }
.ws-statement__small { max-inline-size: 52rem; color: var(--ws-slate); margin-block-start: clamp(1.25rem, 1rem + 1vw, 2rem) !important; }

/* ---------- Cards ---------- */
.ws-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem); }
.ws-card {
	position: relative; overflow: hidden; padding: clamp(1.5rem, 1rem + 1.8vw, 2.5rem); border-radius: var(--wp--custom--radius--l);
	border: 1.5px solid transparent; background: var(--card, var(--ws-paper));
	box-shadow: var(--wp--preset--shadow--soft);
	transition: translate 0.35s var(--ws-ease), box-shadow 0.35s var(--ws-ease), border-color 0.35s;
}
.ws-card:hover, .ws-card:focus-within { translate: 0 -6px; box-shadow: var(--wp--preset--shadow--lift); border-color: var(--ws-blue); }
.ws-card--websites, .ws-card--simple { --card: var(--ws-c-mist); }
.ws-card--webshops, .ws-card--care { --card: var(--ws-c-sand); }
.ws-card--custom, .ws-card--honest { --card: var(--ws-c-blush); }
/* soft glow that follows the pointer (JS sets --mx/--my) */
.ws-card::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.35s;
	background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 0%), rgb(248 247 245 / 0.55), transparent 60%);
}
.ws-card:hover::after { opacity: 1; }
.ws-card h3 { margin-block: 0 0.6rem;  }
.ws-card p { margin: 0; color: var(--ws-slate); }
.ws-card::before {
	content: ""; display: block; inline-size: 4rem; block-size: 4rem; margin-block-end: 1.5rem; border-radius: 1.2rem;
	background: var(--ws-ic) center / 56% no-repeat, var(--ws-slate);
}
.ws-card--websites { --ws-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 9h18M7 6.5h.01M10 6.5h.01'/%3E%3C/svg%3E"); }
.ws-card--webshops { --ws-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.3 11h10.3l2-8H6.2'/%3E%3Ccircle cx='9' cy='19' r='1.4'/%3E%3Ccircle cx='17' cy='19' r='1.4'/%3E%3C/svg%3E"); }
.ws-card--custom { --ws-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 8l-4 4 4 4M16 8l4 4-4 4M13.5 5l-3 14'/%3E%3C/svg%3E"); }
.ws-price::before { display: none; }

/* ---------- 4. Light by design (+ live proof) ---------- */
.ws-light { overflow: hidden; }
.ws-light::before {
	content: ""; position: absolute; inset-block-start: -30%; inset-inline-end: -10%; inline-size: 55%; aspect-ratio: 1; pointer-events: none;
	background: radial-gradient(closest-side, rgb(201 218 234 / 0.18), transparent); filter: blur(10px);
}
.ws-light__grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); align-items: center; position: relative; }
.ws-light__copy { display: grid; gap: 1rem; }
.ws-light__copy h2 { color: var(--ws-paper); }
.ws-light__copy p:not(.ws-eyebrow) { color: var(--ws-misty); max-inline-size: 38rem; }
.ws-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.ws-points li {
	position: relative; padding: 1.3rem 1.5rem; padding-inline-start: 4.75rem; margin: 0;
	   color: var(--ws-paper);
	border-radius: 1.25rem; background: rgb(248 247 245 / 0.07); border: 1px solid rgb(248 247 245 / 0.16);
	transition: background-color 0.3s, translate 0.3s var(--ws-ease), border-color 0.3s;
}
.ws-points li:hover { background: rgb(248 247 245 / 0.12); translate: 0 -3px; border-color: var(--ws-c-mist); }
.ws-points li::before {
	content: ""; position: absolute; inset-inline-start: 1.25rem; inset-block-start: 50%; inline-size: 2.5rem; block-size: 2.5rem; translate: 0 -50%;
	border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 56% no-repeat, var(--ws-c-mist);
}
.ws-proof { margin-block-start: clamp(2rem, 1.2rem + 3vw, 3.5rem); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border-radius: 1.5rem; background: var(--ws-paper); color: var(--ws-ink); box-shadow: 0 24px 48px -24px rgb(28 28 30 / 0.5); display: grid; gap: 1.1rem; position: relative; }
.ws-section--dark .ws-proof .ws-eyebrow { color: var(--ws-blue-deep); }
.ws-proof__row { display: grid; gap: 0.4rem 1.5rem; align-items: center; grid-template-columns: 1fr; }
.ws-proof__label { font-weight: 700; color: var(--ws-ink); }
.ws-proof__figs { display: flex; flex-wrap: wrap; gap: 0 0.6rem; align-items: baseline;  font-variant-numeric: tabular-nums;  color: var(--ws-ink); }
.ws-proof__figs > * { margin: 0; }
.ws-proof__sep { opacity: 0.5; }
.ws-proof__note { margin: 0;  color: var(--ws-slate); }
.ws-bar { block-size: 1.1rem; border-radius: 99px; background: var(--ws-c-mist); overflow: hidden; }
.ws-bar i { display: block; block-size: 100%; inline-size: var(--w, 100%); border-radius: inherit; transition: inline-size 1.6s var(--ws-ease) 0.3s; }
.ws-proof__row--this .ws-bar i { background: var(--ws-blue-deep); }
.ws-proof__row--avg .ws-bar i { background: var(--ws-mauve); }
.ws-proof__row--avg .ws-proof__figs { color: var(--ws-ink); }
.js .ws-proof:not(.is-visible) .ws-bar i { inline-size: 0; }
@media (min-width: 760px) { .ws-proof__row { grid-template-columns: 12rem 1fr 19rem; } }

/* ---------- 5. Planted to grow ---------- */
.ws-split { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); align-items: center; }
.ws-planted__copy { display: grid; gap: 1.1rem; }
.ws-planted__copy p { color: var(--ws-slate); max-inline-size: 36rem; }
.ws-key-wrap { margin: 0; }
.ws-key { display: block; inline-size: 100%; block-size: auto; border-radius: 1.75rem; box-shadow: var(--wp--preset--shadow--lift); }
.ws-leaf path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.ws-leaf__nodes g { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.ws-leaf, .ws-leaf__glow { transform-box: fill-box; transform-origin: center; }
.ws-leaf__glow { opacity: 0; }

/* ---------- 6. How it works (scroll progress) ---------- */
.ws-steps { display: grid; gap: 1.75rem; counter-reset: ws-step; position: relative; }
.ws-step { position: relative; counter-increment: ws-step; padding-inline-start: 4rem; }
.ws-step > * { margin-block: 0; }
.ws-step h3 { margin-block-end: 0.4rem; color: var(--ws-ink);  }
.ws-step p { color: var(--ws-slate);  }
.ws-step::before {
	content: counter(ws-step); position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 2.75rem; block-size: 2.75rem;
	display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; z-index: 1;
	background: var(--ws-crimson); box-shadow: 0 6px 16px -8px rgb(163 18 42 / 0.6);
	transition: background-color 0.4s, box-shadow 0.4s, scale 0.4s var(--ws-ease), opacity 0.4s;
}
/* one continuous track from circle 1 to circle 5; --p (0-1) is the scroll fill, set by JS; --ws-end only used in the vertical layout */
.ws-steps::before, .ws-steps::after { content: ""; position: absolute; border-radius: 3px; pointer-events: none; inset-inline-start: calc(1.375rem - 1.5px); inline-size: 3px; inset-block-start: 1.375rem; inset-block-end: var(--ws-end, 3rem); }
.ws-steps::before { background: var(--ws-line); }
.ws-steps::after { background: var(--ws-crimson); transform: scaleY(var(--p, 1)); transform-origin: 50% 0; }
.js .ws-step:not(.is-lit)::before { background: transparent; color: var(--ws-slate); box-shadow: inset 0 0 0 2px var(--ws-slate); }
.js .ws-step.is-lit::before { scale: 1.08; box-shadow: 0 0 0 5px rgb(163 18 42 / 0.2), 0 8px 20px -8px rgb(163 18 42 / 0.7); }
.js .ws-step:not(.is-lit) h3 { color: var(--ws-slate); }
.ws-step h3 { transition: color 0.4s; }

/* ---------- 7. Why Webseed ---------- */
.ws-why__title { margin-block-end: 0;   color: var(--ws-slate);  }
.ws-why__title strong { display: block;    
	background: linear-gradient(120deg, var(--ws-blue-deep), var(--ws-ink) 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ws-why__list { display: grid; }
.ws-why__item { padding-block: 1.3rem; border-block-start: 1px solid var(--ws-line); position: relative; }
.ws-why__item:last-child { border-block-end: 1px solid var(--ws-line); }
.ws-why__item h3 { color: var(--ws-ink); margin-block-end: 0.35rem; padding-inline-start: 1.7rem; position: relative;  }
.ws-why__item h3::before {
	content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.42em; inline-size: 0.85rem; block-size: 0.85rem; border-radius: 50% 0 50% 0;
	background: var(--ws-blue); transition: rotate 0.4s var(--ws-ease), background-color 0.3s;
}
.ws-why__item:hover h3::before { rotate: 90deg; background: var(--ws-slate); }
.ws-why__item p { color: var(--ws-slate); padding-inline-start: 1.7rem; }

/* illustration: the leaf in the centre, five reasons around it; the reason being read lights up (main.js sets data-active) */
.ws-why__side { display: grid; gap: 1.25rem; align-content: start; }
.ws-why__ill { margin: 0; }
.ws-why__svg { max-inline-size: 17rem; }
.ws-why__svg:dir(rtl) { scale: -1 1; }
.ws-why .wi { color: var(--ws-slate); }
.ws-why .ww { stroke: var(--ws-blue); }
.ws-why__ill[data-active="0"] .wi-0, .ws-why__ill[data-active="1"] .wi-1, .ws-why__ill[data-active="2"] .wi-2, .ws-why__ill[data-active="3"] .wi-3, .ws-why__ill[data-active="4"] .wi-4 { color: var(--ws-crimson); filter: drop-shadow(0 0 9px rgb(127 155 184 / 0.95)); }
.ws-why__ill[data-active="0"] .ww-0, .ws-why__ill[data-active="1"] .ww-1, .ws-why__ill[data-active="2"] .ww-2, .ws-why__ill[data-active="3"] .ww-3, .ws-why__ill[data-active="4"] .ww-4 { stroke: var(--ws-crimson); stroke-width: 4; opacity: 1; }
.ws-why__item { transition: opacity 0.4s; }
@media (min-width: 860px) { .ws-why__svg { max-inline-size: 22rem; } }
@media (prefers-reduced-motion: no-preference) {
	.ws-why .wi { transition: color 0.4s, filter 0.4s; }
	.ws-why .ww { transition: stroke 0.4s, stroke-width 0.4s; }
}

/* ---------- 8. Experience ---------- */
.ws-experience { padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem); }
.ws-experience__box {
	padding-block: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); padding-inline: clamp(1.5rem, 1rem + 3vw, 3.5rem); border-radius: 1.75rem;
	border-inline-start: 8px solid var(--ws-mauve); background: var(--wp--preset--gradient--night); color: var(--ws-paper); position: relative; overflow: hidden;
}
.ws-experience__box::after { content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -10%; inline-size: 45%; aspect-ratio: 1; background: radial-gradient(closest-side, rgb(201 218 234 / 0.2), transparent); pointer-events: none; }
.ws-experience__box p { max-inline-size: 58rem; color: var(--ws-misty); margin: 0; position: relative; }
.ws-experience__box .ws-eyebrow { color: var(--ws-misty); margin-block-end: 0.75rem; }

/* ---------- 9. Who we build for (marquee) ---------- */
.ws-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.ws-chips li {
	display: inline-flex; align-items: center; gap: 0.9rem; margin: 0; padding: 0.85rem 1.6rem 0.85rem 0.85rem; border-radius: 1.25rem;
	background: var(--chip, var(--ws-paper)); border: 1.5px solid transparent;   color: var(--ws-ink); box-shadow: var(--wp--preset--shadow--soft);
	white-space: nowrap; transition: translate 0.3s var(--ws-ease), border-color 0.3s, box-shadow 0.3s;
}
.ws-chips li:dir(rtl) { padding: 0.85rem 0.85rem 0.85rem 1.6rem; }
.ws-chips li:hover { translate: 0 -4px; border-color: var(--ws-blue-deep); box-shadow: var(--wp--preset--shadow--lift); }
.ws-chips li::before {
	content: ""; flex: none; inline-size: 3.1rem; block-size: 3.1rem; border-radius: 1rem;
	background: var(--ws-ic) center / 56% no-repeat, var(--ws-slate);
}
.ws-chips li:nth-child(3n+1) { --chip: var(--ws-c-mist); }
.ws-chips li:nth-child(3n+2) { --chip: var(--ws-c-sand); }
.ws-chips li:nth-child(3n) { --chip: var(--ws-c-blush); }
.ws-chips li:nth-child(1) { --ws-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1'/%3E%3C/svg%3E"); }
.ws-chips li:nth-child(2) { --ws-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11V8a2 2 0 012-2h10a2 2 0 012 2v3M3 12a2 2 0 014 0v2h10v-2a2 2 0 014 0v5H3zM6 17v2M18 17v2'/%3E%3C/svg%3E"); }
.ws-chips li:nth-child(3) { --ws-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 10-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.ws-chips li:nth-child(4) { --ws-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M10 3l1.8 5.2L17 10l-5.2 1.8L10 17l-1.8-5.2L3 10l5.2-1.8zM18 15l.8 2.2L21 18l-2.2.8L18 21l-.8-2.2L15 18l2.2-.8z'/%3E%3C/svg%3E"); }
.ws-chips li:nth-child(5) { --ws-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v7a2 2 0 002 2M5 3v6M9 3v6M7 12v9M17 21V3c-2.2 1.6-3 4-3 7 0 2 1 3 3 3'/%3E%3C/svg%3E"); }
.ws-chips li:nth-child(6) { --ws-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8M15 7h6v6'/%3E%3C/svg%3E"); }
.ws-chips li:nth-child(7) { --ws-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6.5' rx='8' ry='3'/%3E%3Cpath d='M4 6.5v11c0 1.7 3.6 3 8 3s8-1.3 8-3v-11M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E"); }

.ws-marquee { overflow: hidden; margin-inline: calc(var(--ws-gutter) * -1); padding-block: 0.75rem 1.5rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ws-marquee__track { display: flex; inline-size: max-content; }
.ws-marquee .ws-chips { flex-wrap: nowrap; flex: none; padding-inline-end: 1rem; }
.ws-marquee .ws-chips[aria-hidden="true"] { display: flex; }

/* ---------- Pricing ---------- */
.ws-pricing { --ws-card-pad: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); }
.ws-price-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: clamp(1rem, 0.6rem + 1.6vw, 2rem); }
.ws-price { display: grid; gap: 0.6rem; align-content: start; padding: var(--ws-card-pad); }
.ws-price > * { margin-block: 0; }
.ws-price__label {     color: var(--ws-blue-deep); }
.ws-price__amount {
	    font-variant-numeric: tabular-nums;
	color: var(--ws-ink);
}
.ws-price-cards > :nth-child(2) { --card: var(--ws-c-sand); }
.ws-price__ex { font-weight: 500; color: var(--ws-slate); white-space: nowrap; }
.ws-price__yearly {  color: var(--ws-ink);  }
.ws-price__unit {  color: var(--ws-slate);  }
.ws-price--featured {
	--card: var(--ws-paper); border: 3px solid var(--ws-blue);
	box-shadow: 0 2px 4px rgb(28 28 30 / 6%), 0 28px 56px -22px rgb(127 155 184 / 0.7);
}
.ws-price__cta { margin-block-start: 1rem !important; }
.ws-pricing__note { margin-block-start: 1.25rem; color: var(--ws-slate);  }
.ws-pricing__more { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); margin-block-start: clamp(1.75rem, 1.2rem + 2vw, 3rem); align-items: start; }
.ws-included h3 {  margin-block-end: 1rem; }
.ws-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.ws-checklist li { position: relative; margin: 0; padding-inline-start: 2.1rem; }
.ws-checklist li::before {
	content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.25em; inline-size: 1.35rem; block-size: 1.35rem; border-radius: 50%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 62% no-repeat, var(--ws-blue-deep);
}
.ws-extras { border-radius: 1.25rem; background: var(--ws-paper); border: 1.5px solid var(--ws-line); box-shadow: var(--wp--preset--shadow--soft); padding: 0; overflow: hidden; }
.ws-extras summary { cursor: pointer; padding: 1.2rem 1.5rem;   color: var(--ws-ink); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.ws-extras summary::-webkit-details-marker { display: none; }
.ws-extras summary::after { content: ""; flex: none; inline-size: 0.7rem; block-size: 0.7rem; border-inline-end: 3px solid var(--ws-blue-deep); border-block-end: 3px solid var(--ws-blue-deep); rotate: 45deg; transition: rotate 0.3s var(--ws-ease); margin-block-end: 0.25rem; }
.ws-extras[open] summary::after { rotate: -135deg; margin-block-end: -0.25rem; }
.ws-extras > :not(summary) { margin-inline: 1.5rem; }
.ws-extras .wp-block-table { margin-block: 0 1rem; }
.ws-extras table { inline-size: 100%; border-collapse: collapse;  }
.ws-extras th, .ws-extras td { text-align: start; padding: 0.7rem 0.5rem; border-block-end: 1px solid var(--ws-line); }
.ws-extras th {    color: var(--ws-blue-deep); }
.ws-extras td:last-child, .ws-extras th:last-child { text-align: end; font-weight: 700; white-space: nowrap; }
.ws-extras > p { color: var(--ws-slate);  padding-block-end: 1.25rem; margin-block: 0; }

/* ---------- 10. Closing call to action ---------- */
.ws-cta { color: var(--ws-paper); text-align: center; overflow: hidden; isolation: isolate; background: var(--wp--preset--gradient--night); background-size: 300% 300%; }
.ws-cta::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(40% 70% at 15% 20%, rgb(127 155 184 / 0.35), transparent 70%), radial-gradient(40% 70% at 90% 90%, rgb(140 115 119 / 0.35), transparent 70%);
}
.ws-cta__inner { max-inline-size: 52rem; }
.ws-cta__inner > * + * { margin-block-start: 1rem; }
.ws-cta h2 { color: var(--ws-paper); text-wrap: balance; }
.ws-cta p { color: var(--ws-misty); }
.ws-cta .wp-block-buttons { justify-content: center; margin-block-start: 1.75rem; }

/* ---------- Footer ---------- */
.wp-site-blocks > footer { margin: 0; }
.ws-footer { background: #3F4852; color: rgb(248 247 245 / 0.85); padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) var(--ws-gutter) var(--wp--preset--spacing--l); }
.ws-footer a { color: var(--ws-paper); text-decoration: none; }
.ws-footer a:hover { text-decoration: underline; text-decoration-color: var(--ws-c-mist); text-underline-offset: 0.25em; }
.ws-footer__grid { max-inline-size: var(--ws-wrap); margin-inline: auto; gap: var(--wp--preset--spacing--xl); }
.ws-footer__grid > * { display: grid; gap: 0.9rem; align-content: start; }
.ws-footer__grid > * > * { margin-block: 0; }
.ws-footer__logo { line-height: 0; }
.ws-footer__logo img { block-size: 2.4rem; inline-size: auto; }
.ws-footer__text { max-inline-size: 20rem; }
.ws-footer__title {    color: var(--ws-misty);  }
.ws-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ws-footer__list li { margin: 0; }
.ws-footer__address { color: var(--ws-paper); }
.ws-contact { display: block; inline-size: fit-content; font-weight: 700; color: var(--ws-ink); text-decoration: underline; text-decoration-color: var(--ws-blue); text-underline-offset: 0.25em; }
.ws-footer .ws-contact { color: var(--ws-paper); }
.wp-block-post-content .ws-contact { display: inline; color: var(--ws-blue-deep); }
.ws-footer__bar {
	max-inline-size: var(--ws-wrap); margin-inline: auto; margin-block-start: var(--wp--preset--spacing--xl); padding-block-start: 1.25rem;
	border-block-start: 1px solid rgb(248 247 245 / 0.2);  gap: 0.75rem 1.5rem; align-items: center;
}
.ws-footer__bar p, .ws-footer__links p { margin: 0; }
.ws-footer__links { gap: 0.5rem 1.25rem; align-items: center; }
.ws-lang, .ws-lang ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.75rem; }
.ws-lang a { font-weight: 700; }

/* ---------- Regular pages: tinted title band + body, both in the header's container ---------- */
.ws-page { min-block-size: 55vh; }
.ws-page { display: flex; flex-direction: column; }
.ws-page > * { margin-block: 0; }
.ws-page > .ws-pagebody { flex: 1; }
.ws-pagehero { position: relative; overflow: hidden; isolation: isolate; background: var(--wp--preset--gradient--misty); padding-block: clamp(2rem, 1.2rem + 3.4vw, 4rem); padding-inline: var(--ws-gutter); border-block-end: 1px solid rgb(20 18 58 / 0.06); }
.ws-pagehero::before { content: ""; position: absolute; inset-block: -60% -60%; inset-inline-end: -8%; inline-size: 46%; z-index: -1; background: radial-gradient(closest-side, rgb(235 205 186 / 0.55), transparent); pointer-events: none; }
.ws-pagehero::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; inline-size: min(34rem, 60%); block-size: 4px; background: linear-gradient(90deg, var(--ws-blue), transparent); }
.ws-pagehero__in, .ws-pagebody__in { max-inline-size: var(--ws-wide); margin-inline: auto; }
.ws-pagehero__in > * { margin-block: 0; }
.ws-pagehero__in > * + * { margin-block-start: 0.9rem; }
.ws-pagehero h1 {  text-wrap: balance; }
.ws-pagehero p { color: var(--ws-slate); max-inline-size: 44rem; }
.ws-pagebody { background: var(--wp--preset--color--sand); padding-block: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem); padding-inline: var(--ws-gutter); min-block-size: 30vh; }
.ws-pagebody__in > * { margin-block: 0; }
.ws-pagebody .wp-block-post-content > * + * { margin-block-start: 1.1rem; }
.ws-pagebody .wp-block-post-content > :where(p, ul, ol, h2, h3, h4, blockquote, details) { max-inline-size: 58rem; }
.ws-pagebody .wp-block-post-content h2 {  margin-block-start: 2rem; }
.ws-pagebody .wp-block-post-content h3 { margin-block-start: 1.5rem; }
.ws-pagebody .wp-block-post-content :where(h2, h3, h4) { scroll-margin-block-start: 6.5rem; }

/* long legal pages: sticky contents + text card */
.ws-legal { display: grid; gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); align-items: start; }
.ws-legal > * { margin-block: 0; }
.ws-legal__body { background: #fff; border-radius: 1.5rem; border: 1px solid var(--ws-line); box-shadow: var(--wp--preset--shadow--soft); padding: clamp(1.25rem, 0.8rem + 2.2vw, 3rem); min-inline-size: 0; }
.ws-pagebody .ws-legal__body .wp-block-post-content > h2:first-child { margin-block-start: 0; }
.ws-legal:not(:has(.wp-block-post-content > *)) { display: none; }
.ws-legal__toc:empty, .ws-legal__toc:not(:has(.ws-toc)) { display: none; }
.ws-toc { background: #fff; border: 1px solid var(--ws-line); border-radius: 1.25rem; padding: 1.25rem 1.25rem 1.1rem; box-shadow: var(--wp--preset--shadow--soft); }
.ws-toc__label { margin: 0 0 0.6rem;     color: var(--ws-blue-deep); }
.ws-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; counter-reset: toc; }
.ws-toc li { margin: 0; counter-increment: toc; }
.ws-toc a { display: grid; grid-template-columns: 1.6rem 1fr; padding: 0.4rem 0.5rem; border-radius: 0.6rem; color: var(--ws-ink); text-decoration: none;    }
.ws-toc a::before { content: counter(toc); color: var(--ws-blue-deep); font-weight: 800; font-variant-numeric: tabular-nums; }
.ws-toc a:hover { background: var(--wp--preset--color--sand); }
.ws-toc a[aria-current="true"] { background: var(--wp--preset--color--misty); }
@media (min-width: 960px) {
	.ws-legal { grid-template-columns: 17rem minmax(0, 1fr); }
	.ws-legal__toc { position: sticky; inset-block-start: 6.5rem; }
}

/* ---------- Page band subtitle + sections pages ---------- */
.ws-pagehero__in > .ws-pagehero__lead { color: var(--ws-slate); max-inline-size: 48rem; margin-block: 0.9rem 0; }
.ws-pagehero__lead p, p.ws-pagehero__lead { margin: 0; }
.ws-page--sections > .wp-block-post-content { margin: 0; }
.ws-page--sections .wp-block-post-content > * { margin-block: 0; }
.ws-page--sections .ws-pagehero { margin-block-end: 0; }

/* ---------- Services: alternating sections with illustrations ---------- */
.ws-svc__grid { align-items: center; }
.ws-svc__copy { display: grid; gap: 1.1rem; align-content: center; }
.ws-svc__copy > * { margin-block: 0; }
.ws-svc__copy .ws-section__title { margin-block-end: 0; }
.ws-svc__lead { color: var(--ws-slate); }
.ws-section--dark .ws-svc__lead { color: var(--ws-misty); }
.ws-section--dark .ws-checklist li { color: var(--ws-misty); }
.ws-section--dark .ws-checklist li::before { background-color: var(--ws-blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1B4B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
.ws-ill { margin: 0; }
.ws-ill__svg { display: block; inline-size: 100%; max-inline-size: 34rem; block-size: auto; margin-inline: auto; overflow: visible; }
.ws-ill .wire { fill: none; stroke: var(--ws-blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.ws-ill .pulse { fill: none; stroke: var(--ws-blue-deep); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0.05 1; opacity: 0; filter: drop-shadow(0 0 4px rgb(127 155 184 / 0.9)); }
.ws-ill .node { fill: var(--ws-blue); stroke: var(--ws-blue); stroke-width: 2; }
.ws-section--dark .ws-ill .wire { stroke: var(--ws-blue); }
.ws-section--dark .ws-ill .pulse { stroke: #fff; filter: drop-shadow(0 0 5px #fff); }
.ws-ill__blink { transform-box: fill-box; transform-origin: center; opacity: 0; }
@media (min-width: 860px) { .ws-svc--rev .ws-svc__grid > :first-child { order: 2; } }

/* ---------- About ---------- */
.ws-about__grid { align-items: center; }
.ws-about__copy { display: grid; gap: 1.1rem; }
.ws-about__copy > * { margin-block: 0; }
.ws-about__copy p:not(.has-medium-font-size) { color: var(--ws-slate); }
.ws-leafcard { margin: 0; inline-size: 100%; aspect-ratio: 1; max-inline-size: 26rem; margin-inline: auto; display: grid; place-items: center; border-radius: 2rem; background: var(--wp--preset--gradient--fresh); position: relative; overflow: hidden; box-shadow: var(--wp--preset--shadow--soft); }
.ws-leafcard::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 45%, rgb(201 218 234 / 0.5), transparent 70%); }
.ws-leafcard__svg { inline-size: 72%; block-size: auto; position: relative; overflow: visible; }
.ws-leafcard__halo { opacity: 0; transform-box: fill-box; transform-origin: center; }
.ws-leafcard__pulses path { stroke-dasharray: 0.1 1; stroke-dashoffset: 0.1; opacity: 0; }
.ws-card--simple { --ws-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5zM3 13l9 5 9-5M3 17.5l9 5 9-5'/%3E%3C/svg%3E"); }
.ws-card--care { --ws-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E"); }
.ws-card--honest { --ws-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4zM8 9.5h8M8 12.5h5'/%3E%3C/svg%3E"); }

/* ---------- Contact ---------- */
.ws-contact__lead { max-inline-size: 46rem; color: var(--ws-slate); margin-block-end: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.ws-contact__grid { display: grid; gap: clamp(1.25rem, 1rem + 2vw, 2.5rem); align-items: start; }
.ws-contact__grid > * { margin-block: 0; }
.ws-contact__form { background: #fff; border: 1px solid var(--ws-line); border-radius: 1.5rem; padding: clamp(1.25rem, 0.8rem + 2.2vw, 2.5rem); box-shadow: var(--wp--preset--shadow--soft); }
.ws-contact__details { display: grid; gap: 0.85rem; align-content: start; }
.ws-contact__details::before { display: none; }
.ws-contact__details > * { margin-block: 0; }
.ws-contact__details .ws-contact { color: var(--ws-ink);  }
@media (min-width: 900px) { .ws-contact__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .ws-contact__details { position: sticky; inset-block-start: 6.5rem; } }

/* form (webseed-contact plugin markup) */
.ws-cf__form { display: grid; gap: 1.1rem; }
.ws-cf__field { margin: 0; display: grid; gap: 0.4rem; }
.ws-cf label {  color: var(--ws-ink);  }
.ws-cf__req { color: var(--ws-blue-deep); }
.ws-cf input[type="text"], .ws-cf input[type="email"], .ws-cf input[type="tel"], .ws-cf select, .ws-cf textarea {
	inline-size: 100%; font-family: inherit; color: var(--ws-ink); background: var(--ws-paper); border: 2px solid var(--ws-line); border-radius: 0.9rem; padding: 0.8rem 1rem; transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.ws-cf textarea { resize: vertical; min-block-size: 9rem; }
.ws-cf input:hover, .ws-cf select:hover, .ws-cf textarea:hover { border-color: var(--wp--preset--color--blue); }
.ws-cf input:focus-visible, .ws-cf select:focus-visible, .ws-cf textarea:focus-visible { outline: 3px solid var(--ws-blue-deep); box-shadow: 0 0 0 6px rgb(127 155 184 / 0.45); outline-offset: 1px; border-color: var(--ws-blue-deep); background: #fff; }
.ws-cf [aria-invalid="true"] { border-color: #b3261e; background: #fff7f6; }
.ws-cf__hint {  color: var(--ws-slate); }
.ws-cf__err { color: #b3261e;   }
.ws-cf__err:empty { display: none; }
.ws-cf__field--check { grid-template-columns: auto 1fr; align-items: start; column-gap: 0.75rem; }
.ws-cf__field--check label { font-weight: 500; color: var(--ws-ink); }
.ws-cf__field--check input { inline-size: 1.4rem; block-size: 1.4rem; margin-block-start: 0.15rem; accent-color: var(--ws-blue-deep); }
.ws-cf__field--check .ws-cf__err { grid-column: 2; }
.ws-cf__summary { margin: 0; padding: 0.85rem 1rem; border-radius: 0.9rem; background: #fdecea; color: #7a1a14; font-weight: 700; }
.ws-cf__summary[hidden], .ws-cf__success[hidden], .ws-cf__form[hidden] { display: none; }
.ws-cf__success { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border-radius: 1.25rem; background: #ECFDF3; border-inline-start: 8px solid #16A34A; color: #14532D;  font-weight: 700; }
.ws-cf__hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.ws-cf__actions { margin: 0; }
.ws-cf__actions button { border: 0; cursor: pointer; font-family: inherit;  }
.ws-cf__actions button[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ws-ease), transform 0.8s var(--ws-ease), translate 0.35s var(--ws-ease), box-shadow 0.35s var(--ws-ease), background-color 0.3s, border-color 0.3s; transition-delay: var(--d, 0ms), var(--d, 0ms), 0s, 0s, 0s, 0s; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Layout breakpoints (mobile first) ---------- */
@media (min-width: 600px) { .ws-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) {
	.ws-light__grid { grid-template-columns: 1.05fr 1fr; gap: var(--wp--preset--spacing--xxl); }
	.ws-split { grid-template-columns: 1fr 1.1fr; gap: var(--wp--preset--spacing--xxl); }
	.ws-split--why { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); align-items: start; }
	.ws-why__side { position: sticky; inset-block-start: 6rem; }
	.ws-pricing__more { grid-template-columns: 1fr 1fr; }
	.ws-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
	.ws-step { padding-inline-start: 0; padding-block-start: 3.75rem; }
	.ws-steps::before, .ws-steps::after { inset-block: calc(1.375rem - 1.5px) auto; block-size: 3px; inline-size: auto; inset-inline-start: 1.375rem; inset-inline-end: calc((100% - 6rem) / 5 - 1.375rem); }
	.ws-steps::after { transform: scaleX(var(--p, 1)); transform-origin: 0 50%; background: var(--ws-crimson); }
	.ws-steps:dir(rtl)::after { transform-origin: 100% 50%; background: var(--ws-crimson); }
	.ws-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; }
}

/* ---------- Animation (only when motion is allowed) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.ws-cta { animation: ws-shift 18s ease-in-out infinite alternate; }
	.ws-cta { animation-duration: 14s; }

	.ws-words .w { opacity: 0; transform: translateY(0.45em); animation: ws-word 0.9s var(--ws-ease) forwards; animation-delay: calc(var(--i) * 110ms + 200ms); }
	.js .ws-words:not(.is-split) { animation: ws-failsafe 0s 2.5s forwards; }

	.ws-circuit__lines path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ws-draw 3.4s cubic-bezier(0.5, 0, 0.2, 1) forwards; animation-delay: calc(0.5s + var(--i) * 0.3s); }
	.ws-circuit__signals path { animation: ws-signal 5.5s linear infinite; animation-delay: calc(3.6s + var(--i) * 0.9s); }
	.ws-circuit__dots circle { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); animation: ws-dot 0.7s var(--ws-ease) forwards, ws-glow 3.4s ease-in-out infinite; animation-delay: calc(3.4s + var(--i) * 0.3s), calc(4.2s + var(--i) * 0.3s); }

	.ws-visual { animation: bw-float 8s ease-in-out infinite; }
	.bw-stage { animation: bw-stage 18s linear 1 forwards; }
	.bw-a { animation: bw1 18s linear 1 forwards; } .bw-b { animation: bw2 18s linear 1 forwards; } .bw-c { animation: bw3 18s linear 1 forwards; }
	.bw-d { animation: bw4 18s linear 1 forwards; } .bw-e { animation: bw5 18s linear 1 forwards; } .bw-f { animation: bw6 18s linear 1 forwards; }
	.bw-tag-1 { animation: bw-tag1 18s linear 1 forwards; } .bw-tag-2 { animation: bw-tag2 18s linear 1 forwards; }
	.bw-tag-3 { animation: bw-tag3 18s linear 1 forwards; } .bw-tag-4 { animation: bw-tag4 18s linear 1 forwards; }
	.bw-online { animation: bw-online 18s linear 1 forwards; transform-box: fill-box; transform-origin: center; }
	.bw-ring { animation: bw-ring 1.8s ease-out infinite; }

	.ws-logo__pulse { animation: ws-light 3.5s ease-in-out infinite; animation-delay: calc(var(--i) * 0.06s + 1s); }
	.ws-logo__node { animation: ws-node 3.5s ease-out infinite; animation-delay: calc(var(--n) * 0.06s + 1s); }
	.ws-logo:hover .ws-logo__pulse, .ws-logo:focus-visible .ws-logo__pulse { animation: ws-light-run 1.1s ease-in-out 1; animation-delay: calc(var(--i) * 0.06s); }
	.ws-logo:hover .ws-logo__node, .ws-logo:focus-visible .ws-logo__node { animation: ws-node-run 1.1s ease-out 1; animation-delay: calc(var(--n) * 0.06s); }


	.ws-key-wrap.is-drawing .ws-leaf path { animation: ws-draw 1.5s cubic-bezier(0.6, 0, 0.25, 1) forwards; animation-delay: calc(0.35s + var(--i) * 0.5s); }
	.ws-key-wrap.is-drawing .ws-leaf__nodes g { animation: ws-dot 0.6s var(--ws-ease) forwards; animation-delay: calc(2.4s + var(--i) * 0.2s); }
	.ws-key-wrap.is-drawing .ws-leaf { animation: ws-pulse 3.6s ease-in-out 4.2s infinite; }
	.ws-key-wrap.is-drawing .ws-leaf__glow { animation: ws-glow-pulse 3.6s ease-in-out 4.2s infinite; }

	.ws-marquee__track { animation: ws-scroll 48s linear infinite; }
	.ws-marquee__track:dir(rtl) { animation-name: ws-scroll-rtl; }
	.ws-marquee:hover .ws-marquee__track, .ws-marquee:focus-within .ws-marquee__track { animation-play-state: paused; }

	.ws-cta .wp-block-button__link { animation: ws-cta-glow 2.8s ease-in-out infinite; }
	.ws-ill .wire { stroke-dasharray: 1; stroke-dashoffset: 1; }
	.ws-ill.is-visible .wire { animation: ws-draw 2.2s cubic-bezier(0.5, 0, 0.2, 1) forwards; animation-delay: calc(0.2s + var(--i) * 0.3s); }
	.ws-ill .node { opacity: 0; transform-box: fill-box; transform-origin: center; }
	.ws-ill.is-visible .node { animation: ws-dot 0.6s var(--ws-ease) forwards; animation-delay: calc(2s + var(--i) * 0.3s); }
	.ws-ill.is-visible .pulse { animation: ws-signal 5s linear infinite; animation-delay: calc(2.6s + var(--i) * 0.8s); }
	.ws-ill__float { animation: bw-float 7s ease-in-out infinite; }
	.ws-ill__bar { transform-box: fill-box; transform-origin: 0 50%; animation: ws-bar 6s ease-in-out infinite; }
	.ws-ill__blink { animation: ws-blink 2.4s ease-out infinite; animation-delay: calc(var(--i) * 0.6s); }
	.ws-leafcard__icon { animation: bw-float 8s ease-in-out infinite; transform-box: fill-box; }
	.ws-leafcard__halo { animation: ws-halo 6s ease-out infinite; }
	.ws-leafcard__halo--2 { animation-delay: 3s; }
	.ws-leafcard__pulses path { animation: ws-logo-idle 4s ease-in-out infinite; animation-delay: calc(var(--i) * 0.08s + 0.8s); }

}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js .reveal { opacity: 1; transform: none; transition: none; }
	.js .ws-words:not(.is-split) { opacity: 1; }
	.ws-circuit__lines path { stroke-dasharray: none; }
	.ws-circuit__signals, .ws-ill .pulse { display: none; }
	.ws-leaf path { stroke-dashoffset: 0; opacity: 1; }
	.ws-leaf__nodes g { transform: none; }
	.ws-leaf__glow { opacity: 0.35; }
	.js .ws-statement__big strong::after { transform: none; transition: none; }
	.ws-marquee { -webkit-mask-image: none; mask-image: none; margin-inline: 0; overflow: visible; }
	.ws-marquee__track { inline-size: auto; }
	.ws-marquee .ws-chips { flex-wrap: wrap; padding-inline-end: 0; }
	.ws-marquee .ws-chips[aria-hidden="true"] { display: none; }
	.ws-bar i, .ws-step::before, .ws-rot__in { transition: none; }
	.ws-bw-wires .ws-circuit__lines path { stroke-dasharray: none; }
}

/* ---------- Keyframes ---------- */
@keyframes ws-shift { to { background-position: 100% 60%; } }
@keyframes ws-drift { to { transform: translate3d(7%, 5%, 0) scale(1.12); } }
@keyframes ws-draw { 0% { opacity: 1; stroke-dashoffset: 1; } 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes ws-signal { 0% { opacity: 1; stroke-dashoffset: 0.05; } 100% { opacity: 1; stroke-dashoffset: -1; } }
@keyframes ws-dot { 0% { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.35); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ws-glow { 0%, 100% { filter: drop-shadow(0 0 4px rgb(235 205 186 / 0.7)); } 50% { filter: drop-shadow(0 0 12px rgb(235 205 186 / 1)); } }
@keyframes ws-word { to { opacity: 1; transform: none; } }
@keyframes ws-failsafe { to { opacity: 1; } }
@keyframes ws-sweep { to { background-position: -300% 0; } }
@keyframes ws-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes ws-glow-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.8; } }
@keyframes ws-scroll { to { transform: translateX(-50%); } }
@keyframes ws-scroll-rtl { to { transform: translateX(50%); } }
@keyframes ws-cta-glow { 0%, 100% { box-shadow: 0 0 0 2px rgb(248 247 245 / 0.85), 0 0 0 2px rgb(229 72 77 / 0.6); } 50% { box-shadow: 0 0 0 2px rgb(248 247 245 / 0.85), 0 0 0 16px rgb(229 72 77 / 0), 0 0 34px 6px rgb(229 72 77 / 0.45); } }
@keyframes ws-bar { 0% { transform: scaleX(0.15); } 70%, 100% { transform: scaleX(1); } }
@keyframes ws-blink { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes ws-halo { 0% { opacity: 0.5; transform: scale(0.94); } 100% { opacity: 0; transform: scale(1.12); } }
@keyframes bw-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes bw-ring { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.8); opacity: 0; } }
@keyframes bw1 {
	0%, 3% { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)); fill-opacity: 0; stroke-opacity: 0.85; animation-timing-function: cubic-bezier(0.3, 1.45, 0.5, 1); }
	8% { opacity: 1; transform: translate(0, 0); fill-opacity: 0; stroke-opacity: 0.85; }
	27% { fill-opacity: 0; stroke-opacity: 0.85; }
	33%, 45% { opacity: 1; transform: none; fill-opacity: 1; stroke-opacity: 0; }
	48% { opacity: 0; fill-opacity: 1; stroke-opacity: 0; }
	50%, 53% { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)); fill-opacity: 0; stroke-opacity: 0.85; animation-timing-function: cubic-bezier(0.3, 1.45, 0.5, 1); }
	58% { opacity: 1; transform: translate(0, 0); fill-opacity: 0; stroke-opacity: 0.85; }
	77% { fill-opacity: 0; stroke-opacity: 0.85; }
	83%, 100% { opacity: 1; transform: none; fill-opacity: 1; stroke-opacity: 0; }
}
@keyframes bw2 {
	0%, 6% { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)); fill-opacity: 0; stroke-opacity: 0.85; animation-timing-function: cubic-bezier(0.3, 1.45, 0.5, 1); }
	11% { opacity: 1; transform: translate(0, 0); fill-opacity: 0; stroke-opacity: 0.85; }
	27% { fill-opacity: 0; stroke-opacity: 0.85; }
	33%, 45% { opacity: 1; transform: none; fill-opacity: 1; stroke-opacity: 0; }
	48% { opacity: 0; fill-opacity: 1; stroke-opacity: 0; }
	50%, 56% { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)); fill-opacity: 0; stroke-opacity: 0.85; animation-timing-function: cubic-bezier(0.3, 1.45, 0.5, 1); }
	61% { opacity: 1; transform: translate(0, 0); fill-opacity: 0; stroke-opacity: 0.85; }
	77% { fill-opacity: 0; stroke-opacity: 0.85; }
	83%, 100% { opacity: 1; transform: none; fill-opacity: 1; stroke-opacity: 0; }
}
@keyframes bw3 {
	0%, 9% { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)); fill-opacity: 0; stroke-opacity: 0.85; animation-timing-function: cubic-bezier(0.3, 1.45, 0.5, 1); }
	14% { opacity: 1; transform: translate(0, 0); fill-opacity: 0; stroke-opacity: 0.85; }
	27% { fill-opacity: 0; stroke-opacity: 0.85; }
	33%, 45% { opacity: 1; transform: none; fill-opacity: 1; stroke-opacity: 0; }
	48% { opacity: 0; fill-opacity: 1; stroke-opacity: 0; }
	50%, 59% { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)); fill-opacity: 0; stroke-opacity: 0.85; animation-timing-function: cubic-bezier(0.3, 1.45, 0.5, 1); }
	64% { opacity: 1; transform: translate(0, 0); fill-opacity: 0; stroke-opacity: 0.85; }
	77% { fill-opacity: 0; stroke-opacity: 0.85; }
	83%, 100% { opacity: 1; transform: none; fill-opacity: 1; stroke-opacity: 0; }
}
@keyframes bw4 {
	0%, 12% { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)); fill-opacity: 0; stroke-opacity: 0.85; animation-timing-function: cubic-bezier(0.3, 1.45, 0.5, 1); }
	17% { opacity: 1; transform: translate(0, 0); fill-opacity: 0; stroke-opacity: 0.85; }
	27% { fill-opacity: 0; stroke-opacity: 0.85; }
	33%, 45% { opacity: 1; transform: none; fill-opacity: 1; stroke-opacity: 0; }
	48% { opacity: 0; fill-opacity: 1; stroke-opacity: 0; }
	50%, 62% { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)); fill-opacity: 0; stroke-opacity: 0.85; animation-timing-function: cubic-bezier(0.3, 1.45, 0.5, 1); }
	67% { opacity: 1; transform: translate(0, 0); fill-opacity: 0; stroke-opacity: 0.85; }
	77% { fill-opacity: 0; stroke-opacity: 0.85; }
	83%, 100% { opacity: 1; transform: none; fill-opacity: 1; stroke-opacity: 0; }
}
@keyframes bw5 {
	0%, 15% { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)); fill-opacity: 0; stroke-opacity: 0.85; animation-timing-function: cubic-bezier(0.3, 1.45, 0.5, 1); }
	20% { opacity: 1; transform: translate(0, 0); fill-opacity: 0; stroke-opacity: 0.85; }
	27% { fill-opacity: 0; stroke-opacity: 0.85; }
	33%, 45% { opacity: 1; transform: none; fill-opacity: 1; stroke-opacity: 0; }
	48% { opacity: 0; fill-opacity: 1; stroke-opacity: 0; }
	50%, 65% { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)); fill-opacity: 0; stroke-opacity: 0.85; animation-timing-function: cubic-bezier(0.3, 1.45, 0.5, 1); }
	70% { opacity: 1; transform: translate(0, 0); fill-opacity: 0; stroke-opacity: 0.85; }
	77% { fill-opacity: 0; stroke-opacity: 0.85; }
	83%, 100% { opacity: 1; transform: none; fill-opacity: 1; stroke-opacity: 0; }
}
@keyframes bw6 {
	0%, 18% { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)); fill-opacity: 0; stroke-opacity: 0.85; animation-timing-function: cubic-bezier(0.3, 1.45, 0.5, 1); }
	23% { opacity: 1; transform: translate(0, 0); fill-opacity: 0; stroke-opacity: 0.85; }
	27% { fill-opacity: 0; stroke-opacity: 0.85; }
	33%, 45% { opacity: 1; transform: none; fill-opacity: 1; stroke-opacity: 0; }
	48% { opacity: 0; fill-opacity: 1; stroke-opacity: 0; }
	50%, 68% { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)); fill-opacity: 0; stroke-opacity: 0.85; animation-timing-function: cubic-bezier(0.3, 1.45, 0.5, 1); }
	73% { opacity: 1; transform: translate(0, 0); fill-opacity: 0; stroke-opacity: 0.85; }
	77% { fill-opacity: 0; stroke-opacity: 0.85; }
	83%, 100% { opacity: 1; transform: none; fill-opacity: 1; stroke-opacity: 0; }
}
@keyframes bw-tag1 {
	0%, 8% { opacity: 0; }
	10.3333%, 12.6667% { opacity: 0.9; }
	15%, 58% { opacity: 0; }
	60.3333%, 62.6667% { opacity: 0.9; }
	65%, 100% { opacity: 0; }
}
@keyframes bw-tag2 {
	0%, 12% { opacity: 0; }
	14.3333%, 16.6667% { opacity: 0.9; }
	19%, 62% { opacity: 0; }
	64.3333%, 66.6667% { opacity: 0.9; }
	69%, 100% { opacity: 0; }
}
@keyframes bw-tag3 {
	0%, 17% { opacity: 0; }
	19%, 21% { opacity: 0.9; }
	23%, 67% { opacity: 0; }
	69%, 71% { opacity: 0.9; }
	73%, 100% { opacity: 0; }
}
@keyframes bw-tag4 {
	0%, 22% { opacity: 0; }
	23.6667%, 25.3333% { opacity: 0.9; }
	27%, 72% { opacity: 0; }
	73.6667%, 75.3333% { opacity: 0.9; }
	77%, 100% { opacity: 0; }
}
@keyframes bw-stage { 0% { opacity: 0; } 2% { opacity: 1; } 45% { opacity: 1; } 48%, 50% { opacity: 0; } 52% { opacity: 1; } 100% { opacity: 1; } }
@keyframes bw-online { 0%, 34% { opacity: 0; transform: scale(0.6); } 36% { opacity: 1; transform: scale(1.1); } 37%, 45% { opacity: 1; transform: scale(1); } 48%, 84% { opacity: 0; transform: scale(0.6); } 86% { opacity: 1; transform: scale(1.1); } 87%, 100% { opacity: 1; transform: scale(1); } }
@keyframes ws-text-sweep { to { background-position: 100% 0; } }
@keyframes ws-light { 0% { opacity: 1; stroke-dashoffset: 0.16; } 30% { opacity: 1; stroke-dashoffset: -1.05; } 30.1%, 100% { opacity: 0; stroke-dashoffset: -1.05; } }
@keyframes ws-light-run { 0% { opacity: 1; stroke-dashoffset: 0.16; } 100% { opacity: 1; stroke-dashoffset: -1.05; } 100.1% { opacity: 0; } }
@keyframes ws-node { 0%, 18% { transform: scale(1); filter: none; } 28% { transform: scale(1.55); filter: drop-shadow(0 0 60px #fff) drop-shadow(0 0 20px #fff); } 46%, 100% { transform: scale(1); filter: none; } }
@keyframes ws-node-run { 0%, 45% { transform: scale(1); filter: none; } 62% { transform: scale(1.55); filter: drop-shadow(0 0 60px #fff) drop-shadow(0 0 20px #fff); } 100% { transform: scale(1); filter: none; } }
@keyframes ws-logo-run { 0% { opacity: 1; stroke-dashoffset: 0.1; } 100% { opacity: 1; stroke-dashoffset: -1; } }
@keyframes ws-logo-idle { 0% { opacity: 1; stroke-dashoffset: 0.1; } 30% { opacity: 1; stroke-dashoffset: -1; } 30.1%, 100% { opacity: 0; stroke-dashoffset: -1; } }

.ws-included { display: grid; gap: 1rem; align-content: start; }
.ws-extras td:last-child, .ws-extras th:last-child { white-space: normal; }
.ws-extras .ws-price__ex { display: block; white-space: normal; font-weight: 500; }
.ws-extras .wp-block-table :is(th, td) { border-inline: 0; }
.ws-extras .wp-block-table table { border: 0; }

/* ---------- Section rhythm: diagonal gradients (lighter top-left); sand, misty blue and slate alternate ---------- */
.ws-statement { background: var(--wp--preset--gradient--sand-strong); }
.ws-planted, .ws-why, .ws-audience, .ws-about, .ws-svc:not(.ws-section--mist):not(.ws-section--dark), .ws-contactpage { background: var(--wp--preset--gradient--sand); }
.ws-what, .ws-steps-section, .ws-experience, .ws-pricing, .ws-beliefs { background: var(--wp--preset--gradient--misty); }
.ws-pagebody { background: var(--wp--preset--gradient--sand); }
.ws-legal__body, .ws-toc, .ws-contact__form, .ws-extras { background: #fff; }

/* ---------- Price switch (business / private) ---------- */
.ws-pv__p { display: none; }
html[data-prices="private"] .ws-pv__b { display: none; }
html[data-prices="private"] .ws-pv__p { display: inline; }
.ws-switch { display: none; position: relative; inline-size: fit-content; max-inline-size: 100%; padding: 0.3rem; border-radius: 999px; background: var(--ws-paper); border: 2px solid var(--ws-ink); box-shadow: var(--wp--preset--shadow--soft); margin-block-end: clamp(1.25rem, 1rem + 1vw, 2rem); }
.js .ws-switch { display: inline-flex; }
.ws-switch__btn { font-family: inherit;   cursor: pointer; border: 0; background: transparent; color: var(--ws-ink); padding: 0.7rem 1.35rem; border-radius: 999px; min-block-size: 2.75rem; transition: background-color 0.25s, color 0.25s; }
.ws-switch__btn:hover { background: var(--ws-c-mist); }
.ws-switch__btn[aria-pressed="true"] { background: var(--ws-ink); color: var(--ws-paper); }
.ws-switch__btn[aria-pressed="true"]:hover { background: var(--ws-slate); }
.ws-price__nojs { margin: 0; padding: 0.75rem 1rem; border-radius: 0.9rem; background: var(--ws-paper); color: var(--ws-ink); border: 1.5px solid var(--ws-line); font-weight: 600; max-inline-size: 44rem; }
.js .ws-price__nojs { display: none; }
.ws-pricing .ws-wrap > .ws-switch, .ws-pricing .ws-wrap > p.ws-price__nojs { margin-block-end: clamp(1rem, 0.8rem + 1vw, 1.75rem); }
@media (max-width: 480px) { .ws-switch { display: none; } .js .ws-switch { display: flex; inline-size: 100%; } .ws-switch__btn { flex: 1; padding-inline: 0.5rem;  } }

/* ---------- Language dropdown: "NL ▾" ([ws_lang]) ---------- */
.ws-langdd { position: relative; display: inline-block; }
.ws-langdd__btn { font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.8rem; border-radius: 999px; border: 1.5px solid var(--ws-line); background: var(--ws-paper); color: var(--ws-ink); transition: border-color 0.2s, background-color 0.2s; }
.ws-langdd__btn:hover, .ws-langdd.is-open .ws-langdd__btn { border-color: var(--ws-blue-deep); }
.ws-langdd__code { direction: ltr; unicode-bidi: isolate; }
.ws-langdd__caret { inline-size: 0.5rem; block-size: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; margin-block-start: -0.25rem; transition: rotate 0.25s var(--ws-ease); }
.ws-langdd.is-open .ws-langdd__caret { rotate: -135deg; margin-block-start: 0.15rem; }
.ws-langdd__list { margin: 0; padding: 0.4rem; list-style: none; min-inline-size: 11rem; background: #fff; border: 1px solid var(--ws-line); border-radius: 1rem; box-shadow: var(--wp--preset--shadow--lift); color: var(--ws-ink); }
.ws-langdd__list li { margin: 0; }
.ws-langdd__list a { display: block; padding: 0.55rem 0.8rem; border-radius: 0.6rem; color: var(--ws-ink); text-decoration: none; }
.ws-langdd__list a:hover { background: var(--wp--preset--color--sand); }
.ws-langdd__list a[aria-current] { background: var(--wp--preset--color--misty); }
.js .ws-langdd__list { position: absolute; z-index: 60; inset-block-start: calc(100% + 0.5rem); inset-inline: 0 auto; translate: var(--shift, 0) 0; max-inline-size: calc(100vw - 16px); display: none; }
.js .ws-langdd.is-up .ws-langdd__list { inset-block: auto calc(100% + 0.5rem); } /* main.js picks up/down and sets --shift so the menu stays inside the viewport */
.js .ws-langdd.is-open .ws-langdd__list { display: block; animation: ws-pop 0.18s var(--ws-ease); }
html:not(.js) .ws-langdd__btn { display: none; }
html:not(.js) .ws-langdd__list { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0; background: none; border: 0; box-shadow: none; min-inline-size: 0; }
@keyframes ws-pop { from { opacity: 0; translate: 0 -0.35rem; } }
/* footer: dark background, opens upward */
.ws-footer .ws-langdd__btn { background: transparent; color: var(--ws-paper); border-color: rgb(248 247 245 / 0.35); }
.ws-footer .ws-langdd__btn:hover, .ws-footer .ws-langdd.is-open .ws-langdd__btn { border-color: var(--ws-paper); }
.ws-footer .ws-langdd__list a { color: var(--ws-ink); }
html:not(.js) .ws-footer .ws-langdd__list a { color: var(--ws-paper); }
@media (max-width: 599px) { .ws-header .ws-langdd { display: none; } }
@media (prefers-reduced-motion: reduce) { .ws-langdd__caret, .ws-langdd__btn { transition: none; } .js .ws-langdd.is-open .ws-langdd__list { animation: none; } }

/* RTL pages: numbers with units (live proof) stay left to right; prices/company values are isolated in the shortcodes (<bdi dir="ltr">) */
.ws-proof__kb { direction: ltr; unicode-bidi: isolate; }
.ws-proof__kb:dir(rtl) { text-align: right; }
.ws-proof__req { unicode-bidi: isolate; }