/* VAI theme 1.0.12, site styles. Colours only from tokens.css. Desktop values measured on the Figma frames approved
   on 20 Oct 2026 (guBfuSXzgXl4V5TWLDQuDm 82:2 home, 131:2 Perspectives, 135:2 About); phone values from the web
   tokens of style guide 8e (no phone frames were drawn for this round; shown to Isa before go live). */

/* Spacing on the 4 px base unit (guide section 3) and the layout measures of the frames. */
:root {
	--u: var(--vai-space-unit);
	--s2: calc(var(--u) * 2);   /* 8 */
	--s3: calc(var(--u) * 3);   /* 12 */
	--s4: calc(var(--u) * 4);   /* 16 */
	--s5: calc(var(--u) * 5);   /* 20 */
	--s6: calc(var(--u) * 6);   /* 24 */
	--s8: calc(var(--u) * 8);   /* 32 */
	--s10: calc(var(--u) * 10); /* 40 */
	--s12: calc(var(--u) * 12); /* 48 */
	--s14: calc(var(--u) * 14); /* 56 */
	--s16: calc(var(--u) * 16); /* 64 */
	--s20: calc(var(--u) * 20); /* 80 */
	--s24: calc(var(--u) * 24); /* 96 */
	--s28: calc(var(--u) * 28); /* 112 */
	--s30: calc(var(--u) * 30); /* 120 */
	--l-content: 1200px;
	--l-nav-h: 72px;          /* header height, style guide 8e as amended 20 Oct 2026 (was 88, Figma 83:189) */
	--l-nav-phone: 64px;
	--l-mark-nav: 44px;
	--l-mark-foot: 56px;
	--l-col-media: 448px;     /* slide window and service heading column, Figma 131:31 */
	--l-col-text: 640px;      /* text column, Figma 131:42, 135:36 */
	--l-circle: 240px;        /* figure circles, Figma 82:27 */
	--l-tile-h: 360px;        /* Integrator tiles, Figma 82:195 */
	--l-cell-h: 340px;        /* expertise cells, Figma 91:21 */
	--l-arrow: 48px;          /* slide arrows, Figma 112:3 */
	--l-pause: 44px;          /* question pause button: 44 px target (WCAG 2.5.8, 1.0.18); icon 32, Figma 128:27 */
	--l-dot: 8px;
	--l-portrait-w: 480px;
	--l-input: 48px;
	--l-input-font: 16px;     /* 16 px stops iOS zooming into the field */
	--l-icon: 24px;
	--l-line-small: 20px;
	--l-line-label: 15px;
	--m: var(--vai-web-margin-phone);
	--pad: var(--s16);        /* section padding on phones: 64, guide 8e */
	--sec-gap: var(--vai-web-section-gap-phone);
	--card-pad: var(--vai-web-card-pad-phone-y) var(--vai-web-card-pad-phone-x);
	--btn-px: var(--vai-web-button-pad-x-phone);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* motion set approved 20 Oct 2026 (Women in Ports): reveal curve */
	--ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
	--t-h2: 36px; --t-h2-l: 42px; --t-h2-tr: -0.6px;
	--t-h1: clamp(38px, 12vw, 48px); --t-h1-l: 1.17;
	--t-sub: 19px; --t-sub-l: 28px;
	--t-h3: 24px; --t-h3-l: 30px;
}
@media (min-width: 768px) {
	:root {
		--m: 48px;
		--pad: var(--s24);
		--sec-gap: var(--vai-web-section-gap-desktop);
		--card-pad: var(--vai-web-card-pad-desktop);
		--btn-px: var(--vai-web-button-pad-x);
		--t-h2: 48px; --t-h2-l: 56px; --t-h2-tr: -1px;
		--t-h1: 64px; --t-h1-l: 1.19;
		--t-sub: 21px; --t-sub-l: 32px;
		--t-h3: 28px; --t-h3-l: 34px;
	}
}
@media (min-width: 1024px) {
	:root { --m: var(--vai-web-margin-desktop); --pad: var(--s30); --t-h2: 56px; --t-h2-l: 64px; --t-h2-tr: -1.2px; --t-h1: 80px; --t-h1-l: 1.2; }
}

/* Base */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--l-nav-phone); overscroll-behavior-y: none; }
@media (min-width: 1280px) { html { scroll-padding-top: var(--l-nav-h); } }
body { margin: 0; background: var(--vai-white); color: var(--vai-near-black); font-family: var(--vai-font-family); font-weight: 400; font-size: var(--vai-web-type-body); line-height: var(--vai-web-type-body-line); }
*, *::before, *::after { box-sizing: border-box; border-radius: var(--vai-web-radius); }
p, h1, h2, h3, h4, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; }
.wp-site-blocks > * + * { margin-block-start: 0; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--vai-teal-b); outline-offset: 2px; }
.vai-int :focus-visible, .vai-pband :focus-visible, .vai-footer :focus-visible { outline-color: var(--vai-white); }
.vai-skip { position: absolute; left: var(--m); top: -100px; z-index: 100; background: var(--vai-deep-blue); color: var(--vai-white); padding: var(--vai-web-button-pad-y) var(--btn-px); font-weight: 500; text-decoration: none; }
.vai-skip:focus { top: var(--s3); }
.vai-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.vai-muted { color: var(--vai-grey-600); }
.vai-small { font-size: var(--vai-web-type-ribbon); font-weight: 400; line-height: var(--l-line-small); color: var(--vai-grey-600); }
.vai-lead { font-size: var(--t-sub); line-height: var(--t-sub-l); font-weight: 300; }
.vai-wrap { width: 100%; max-width: calc(var(--l-content) + 2 * var(--m)); margin-inline: auto; padding-inline: var(--m); }
.vai-h2 { font-size: var(--t-h2); line-height: var(--t-h2-l); letter-spacing: var(--t-h2-tr); font-weight: 700; color: var(--vai-deep-blue); }
.vai-h3 { font-size: var(--t-h3); line-height: var(--t-h3-l); font-weight: 700; color: var(--vai-deep-blue); }
.vai-sublead { font-size: var(--t-sub); line-height: var(--t-sub-l); font-weight: 300; color: var(--vai-near-black); }
.vai-sublead--muted { color: var(--vai-grey-600); }
.vai-kicker { font-size: var(--vai-web-type-button); line-height: 21px; font-weight: 500; color: var(--vai-grey-600); }

/* Header, Figma 83:189 */
.vai-header-part { position: sticky; top: 0; z-index: 50; } /* the template part wraps the header, so it carries the sticky position */
.vai-nav { position: relative; background: var(--vai-white); border-bottom: 1px solid var(--vai-grey-200); }
.vai-nav__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: calc(var(--l-nav-phone) - 1px); max-width: calc(var(--l-content) + 2 * var(--m)); margin-inline: auto; padding-inline: var(--m) calc(var(--m) - var(--s3)); }
.vai-home { display: flex; flex: none; white-space: nowrap; align-items: center; gap: var(--s3); text-decoration: none; color: var(--vai-deep-blue); font-size: 16px; line-height: 21px; font-weight: 500; min-height: var(--vai-web-target-min); }
.vai-home__mark { width: 36px; height: 36px; flex: none; display: block; }
.vai-nav__menu ul { display: flex; align-items: center; gap: var(--s8); }
.vai-nav__menu a { position: relative; display: inline-flex; align-items: center; min-height: var(--vai-web-target-min); color: var(--vai-deep-blue); font-size: 16px; line-height: 22px; font-weight: 500; text-decoration: none; }
.vai-nav__menu a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 2px; background: var(--vai-teal-b); }
.vai-btn.vai-btn--nav { white-space: nowrap; color: var(--vai-white); padding: var(--s3) 22px; font-size: 16px; line-height: 20px; font-weight: 500; }
.vai-menu-btn { display: inline-flex; align-items: center; gap: var(--s2); font: inherit; font-size: var(--vai-web-type-ribbon); font-weight: 500; color: var(--vai-deep-blue); background: transparent; border: 0; min-height: var(--vai-web-target-min); min-width: var(--vai-web-target-min); padding: 0 var(--s3); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.vai-menu-btn svg { width: var(--l-icon); height: var(--l-icon); }
@media (max-width: 379px) { .vai-menu-btn__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .vai-home { font-size: 15px; } }
@media (max-width: 1279px) {
	.vai-nav__menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--vai-white); border-bottom: 1px solid var(--vai-grey-200); padding: var(--s2) var(--m) var(--s8); max-height: calc(100dvh - var(--l-nav-phone)); overflow-y: auto; overscroll-behavior: contain; }
	.vai-nav.is-open .vai-nav__menu { display: block; }
	.vai-nav__menu ul { flex-direction: column; align-items: flex-start; gap: 0; }
	.vai-nav__menu a { font-size: 18px; }
	.vai-nav__demo { margin-top: var(--s4); }
}
@media (min-width: 1280px) {
	.vai-nav__in { min-height: calc(var(--l-nav-h) - 1px); padding-inline: var(--m); } /* 87 + 1 px hairline = 88, Figma 83:189 */
	.vai-home { gap: 13px; font-size: 18px; }
	.vai-home__mark { width: var(--l-mark-nav); height: var(--l-mark-nav); }
	.vai-menu-btn { display: none; }
	.vai-nav__menu ul { gap: clamp(20px, 2.2vw, 32px); }
	.vai-nav__demo { margin-left: clamp(4px, 0.6vw, 8px); }
}
@media (min-width: 1280px) and (max-width: 1439px) { .vai-nav__menu ul { gap: 20px; } } /* keeps the brand, menu and button on one line at 1280 */

/* Buttons and links */
.vai-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.vai-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--vai-web-target-min); padding: 15px var(--btn-px); background: var(--vai-deep-blue); color: var(--vai-white); border: var(--vai-web-button-outline-width) solid var(--vai-deep-blue); font-family: inherit; font-size: var(--vai-web-type-button); line-height: 21px; font-weight: 500; text-decoration: none; text-align: center; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: transform 140ms var(--ease-out), background-color 160ms ease, color 160ms ease; }
.vai-btn:active { transform: scale(0.97); }
.vai-btn[disabled] { cursor: not-allowed; transform: none; }
.vai-btn--outline { background: transparent; color: var(--vai-deep-blue); }
.vai-btn--light { background: var(--vai-white); color: var(--vai-deep-blue); border-color: var(--vai-white); }
.vai-btn--outline-light { background: transparent; color: var(--vai-white); border-color: var(--vai-white); }
.vai-link { color: var(--vai-teal-b); font-size: var(--vai-web-type-button); font-weight: 400; display: inline-flex; align-items: center; min-height: var(--vai-web-target-min); }
@media (hover: hover) and (pointer: fine) {
	.vai-nav__menu a:not(.vai-btn):hover { text-decoration: underline; text-underline-offset: 6px; }
	.vai-btn:not([disabled]):hover { background: var(--vai-near-black); border-color: var(--vai-near-black); }
	.vai-btn--outline:not([disabled]):hover { background: var(--vai-deep-blue); color: var(--vai-white); border-color: var(--vai-deep-blue); }
	.vai-btn--light:hover, .vai-btn--outline-light:hover { background: var(--vai-grey-200); color: var(--vai-deep-blue); border-color: var(--vai-grey-200); }
	.vai-footer a:hover, .vai-footer__consent:hover { text-decoration: underline; }
}

/* Why it matters now, Figma 82:25 */
.vai-why { background: var(--vai-grey-200); padding-block: var(--pad); }
.vai-why__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s10) var(--s4); margin-top: var(--s8); }
.vai-why__item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.vai-why__circle { width: min(100%, 150px); aspect-ratio: 1; border-radius: 50%; background: var(--vai-white); display: flex; align-items: center; justify-content: center; }
.vai-why__figure { font-size: 36px; line-height: 44px; letter-spacing: -1px; font-weight: 700; color: var(--vai-deep-blue); font-variant-numeric: tabular-nums; }
.vai-why__caption { margin-top: var(--s4); font-size: 15px; line-height: 22px; font-weight: 500; color: var(--vai-near-black); max-width: 262px; flex: 1 0 auto; }
.vai-why__source { margin-top: 14px; font-size: var(--vai-web-type-ribbon); line-height: var(--l-line-small); font-weight: 400; color: var(--vai-grey-600); }
.vai-why__source a { display: inline-flex; min-height: var(--vai-web-target-min); align-items: center; margin-block: calc((var(--l-line-small) - var(--vai-web-target-min)) / 2); }
@media (min-width: 768px) {
	.vai-why { padding-block: var(--s24); }
	.vai-why__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); margin-top: var(--s6); }
	.vai-why__circle { width: min(100%, var(--l-circle)); }
	.vai-why__figure { font-size: clamp(40px, 4.45vw, 64px); line-height: 1.125; letter-spacing: -1.5px; }
	.vai-why__caption { margin-top: var(--s6); font-size: 18px; line-height: 26px; }
}

/* The Alliance Integrator, Figma 82:43 */
.vai-int { position: relative; overflow: hidden; isolation: isolate; background: var(--vai-deep-blue); color: var(--vai-white); padding-block: var(--pad); }
.vai-int__rain { position: absolute; z-index: -2; top: -25px; left: 0; width: max(100%, 1944px); height: calc(100% + 50px); opacity: 0.9; pointer-events: none; }
.vai-int__rain img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.vai-int__scrim { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--vai-deep-blue) 92%, transparent) 0%, color-mix(in srgb, var(--vai-deep-blue) 55%, transparent) 62%, color-mix(in srgb, var(--vai-deep-blue) 15%, transparent) 100%); pointer-events: none; }
.vai-int__title { font-size: var(--t-h2); line-height: var(--t-h2-l); letter-spacing: var(--t-h2-tr); font-weight: 700; color: var(--vai-white); max-width: 900px; } /* 1.0.29 (Isa): same size as every other section title */
.vai-int__lead.vai-int__lead--next { margin-top: var(--s3); }
.vai-int__lead { margin-top: var(--s6); max-width: var(--l-col-text); font-size: var(--t-sub); line-height: var(--t-sub-l); font-weight: 300; }
@media (min-width: 1024px) { .vai-int__lead { max-width: none; white-space: nowrap; } } /* 1.0.29: each lead on one line */
.vai-int__tiles { margin-top: var(--s10); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.vai-int__tile { background: var(--vai-white); color: var(--vai-near-black); padding: var(--s8) var(--s6); }
.vai-int__for { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--vai-teal-b); }
.vai-int__for::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--vai-teal-b); flex: none; }
.vai-int__tile-title { margin-top: var(--s6); font-size: 24px; line-height: 32px; letter-spacing: -0.4px; font-weight: 500; color: var(--vai-deep-blue); }
.vai-int__tile-text { margin-top: var(--s4); font-size: 17px; line-height: 26px; font-weight: 400; }
.vai-int__tile-text, .vai-int__tile-title { text-wrap: pretty; } /* 1.0.25: no single word alone on the last line */
.vai-int__actions { margin-top: var(--s10); }
@media (min-width: 768px) {
	.vai-int__lead { font-size: 26px; line-height: 36px; }
	.vai-int__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); margin-top: var(--s14); }
	.vai-int__tile { min-height: var(--l-tile-h); padding: var(--s8); }
	.vai-int__tile-title { margin-top: 29px; font-size: 28px; line-height: 36px; }
	.vai-int__tile-text { font-size: 18px; line-height: 28px; }
	.vai-int__actions { margin-top: var(--s12); }
}
@media (min-width: 1024px) { .vai-int { padding-block: 110px 100px; } }

/* Questions, Figma 130:2 */
.vai-qs { background: var(--vai-white); padding-block: var(--pad); text-align: center; }
/* 1.0.29 (Isa, 21 Oct 2026): one question in the middle of the strip, the next crossfades in place; no pinned track,
   no controls; the rotation pauses while the pointer or focus is on the strip; reduced motion or no script: static list. */
.vai-qs__stage { display: grid; justify-items: center; gap: var(--s4); }
.vai-qs__q { font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; font-weight: 400; color: var(--vai-deep-blue); text-wrap: balance; max-width: 1100px; }
.vai-qs__q strong { font-weight: 700; color: var(--vai-teal-b); }
.vai-qs.is-live .vai-qs__stage { grid-template-areas: "q"; gap: 0; }
.vai-qs.is-live .vai-qs__q { grid-area: q; opacity: 0; transition: opacity 700ms var(--ease-out); }
.vai-qs.is-live .vai-qs__q.is-on { opacity: 1; }
@media (min-width: 768px) { .vai-qs__q { font-size: 40px; } }
@media (min-width: 1024px) { .vai-qs__q { font-size: 52px; } }

/* Advisory, 1.0.26 (L26, option A Rows): picture full bleed first, then title and three editorial rows on grey. */
.vai-adv { background: var(--vai-grey-200); }
.vai-adv .vai-h2, .vai-exp .vai-h2 { letter-spacing: calc(var(--t-h2-tr) - 0.2px); }
.vai-adv__photo { position: relative; margin: 0; aspect-ratio: 1440 / 900; background: var(--vai-white); }
.vai-adv__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vai-adv__body { padding-block: var(--pad); }
.vai-adv__head .vai-sublead { margin-top: var(--s4); max-width: var(--l-col-text); }
.vai-adv__list { margin-top: var(--s10); }
.vai-adv__service { border-top: 1px solid var(--vai-ramp-neutral-80); padding-block: var(--s8); }
.vai-adv__title { font-size: var(--t-h3); line-height: var(--t-h3-l); letter-spacing: -0.4px; font-weight: 700; color: var(--vai-deep-blue); }
.vai-adv__copy { margin-top: var(--s3); }
.vai-adv__text { font-size: 17px; line-height: 26px; font-weight: 400; color: var(--vai-near-black); max-width: var(--l-col-text); text-wrap: pretty; }
.vai-adv__link { margin-top: var(--s3); font-size: 16px; line-height: 22px; }
.vai-adv__link a { column-gap: 0.3em; display: inline-flex; align-items: center; min-height: var(--vai-web-target-min); margin-block: -11px; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--vai-deep-blue); }
@media (min-width: 768px) {
	.vai-adv__list { margin-top: var(--s14); }
	.vai-adv__text { font-size: 18px; line-height: 28px; }
}
@media (min-width: 1024px) {
	.vai-adv__service { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 10fr); column-gap: var(--s10); padding-block: var(--s10); } /* 448 : 640 */
	.vai-adv__title { text-wrap: balance; }
	.vai-adv__copy { margin-top: 0; }
}
@media (min-width: 1440px) { .vai-adv__service { grid-template-columns: var(--l-col-media) minmax(0, var(--l-col-text)); column-gap: var(--s28); } }
/* "AI generated" label on realistic generated pictures (style guide 8c, AI Act Art. 50(4)). */
.vai-ai-pic { position: relative; }
.vai-ai-label { position: absolute; right: 0; bottom: 0; padding: 2px var(--s2); background: var(--vai-deep-blue); color: var(--vai-white); font-size: var(--vai-web-type-small); line-height: 18px; font-weight: 400; }
.vai-adv__photo .vai-ai-label { bottom: auto; top: 0; }

/* Areas of expertise, Figma 91:18 */
.vai-exp { background: var(--vai-white); padding-block: var(--pad); }
.vai-exp .vai-sublead { margin-top: var(--s4); }
.vai-exp__grid { margin-top: var(--s10); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.vai-exp__cell { padding: var(--s8) var(--s6); }
.vai-exp__photo { padding: 0; aspect-ratio: 588 / 340; background: var(--vai-grey-200); }
.vai-exp__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vai-exp__cell--grey { background: var(--vai-grey-200); color: var(--vai-near-black); }
.vai-exp__cell--teal { background: var(--vai-teal-b); color: var(--vai-white); } /* white on Teal B 4.98:1 */
.vai-exp__cell--blue { background: var(--vai-deep-blue); color: var(--vai-white); }
.vai-exp__title { font-size: 24px; line-height: 32px; letter-spacing: -0.5px; font-weight: 700; color: var(--vai-deep-blue); }
.vai-exp__cell--teal .vai-exp__title, .vai-exp__cell--blue .vai-exp__title { color: var(--vai-white); }
.vai-exp__text { margin: var(--s4) 0 0; font-size: 17px; line-height: 26px; font-weight: 300; max-width: 36em; }
@media (min-width: 768px) {
	.vai-exp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--s6); margin-top: var(--s12); } /* 1.0.17 (Isa, 20 Oct 2026): every tile the same height on every breakpoint; 1fr rows share the tallest cell */
	.vai-exp__cell { min-height: var(--l-cell-h); padding: var(--s12); }
	.vai-exp__photo { min-height: var(--l-cell-h); height: 100%; aspect-ratio: auto; padding: 0; }
	.vai-exp__title { font-size: 30px; line-height: 38px; }
	.vai-exp__text { margin-top: 22px; font-size: 19px; line-height: 28px; }
}

/* Slide window (Perspectives), Figma 112:10 and 131:31: one slide visible, the next ones flow in from the right. */
.vai-car { width: 100%; max-width: var(--l-col-media); }
.vai-car__track { display: flex; gap: var(--s6); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.vai-car__track::-webkit-scrollbar { display: none; }
.vai-car__slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; aspect-ratio: 448 / 560; background: var(--vai-white); }
.vai-car__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vai-car__controls { display: flex; align-items: center; gap: var(--s4); }
.vai-car__controls[hidden] { display: none; }
.vai-arrow { width: var(--l-arrow); height: var(--l-arrow); padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--vai-white); border: 1px solid var(--vai-white); font: 500 20px/24px var(--vai-font-family); cursor: pointer; touch-action: manipulation; transition: transform 140ms var(--ease-out); }
.vai-arrow:active { transform: scale(0.97); }
.vai-arrow[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; }
.vai-arrow--dark { color: var(--vai-deep-blue); border-color: var(--vai-deep-blue); }
.vai-car__controls .vai-dots { margin-left: var(--s4); color: var(--vai-white); }
.vai-car__controls .vai-dot { opacity: 0.4; }
.vai-car__controls .vai-dot.is-current { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .vai-car__track { scroll-behavior: auto; } }

/* Perspectives band (home), Figma 85:2 */
.vai-pband { background: var(--vai-deep-blue); color: var(--vai-white); padding-block: var(--pad); }
.vai-pband__in { display: flex; flex-direction: column; gap: var(--s10); }
.vai-pband__title { font-size: var(--t-h2); line-height: 1; } @media (min-width: 1024px) { .vai-pband__title { line-height: 48px; } }
.vai-pband__title { letter-spacing: -0.8px; font-weight: 700; color: var(--vai-white); }
.vai-pband .vai-sublead { color: var(--vai-white); margin-top: var(--s3); max-width: 480px; }
.vai-pband__head .vai-sublead:first-of-type { margin-top: var(--s8); }
.vai-pband__foot { display: flex; flex-direction: column; gap: var(--s8); }
.vai-pband__links, .vai-post__links { display: flex; flex-wrap: wrap; column-gap: var(--s10); row-gap: 0; }
.vai-pband__links a, .vai-post__links a { column-gap: 0.3em; display: inline-flex; align-items: center; min-height: var(--vai-web-target-min); font-size: var(--vai-web-type-button); line-height: 24px; font-weight: 500; }
@media (max-width: 1023px) {
	.vai-pband__text { display: contents; }
	.vai-pband__head { order: 1; }
	.vai-pband .vai-car { order: 2; }
	.vai-pband__foot { order: 3; margin-top: calc(-1 * var(--s4)); }
}
@media (min-width: 1024px) {
	.vai-pband__in { flex-direction: row; justify-content: space-between; align-items: stretch; gap: var(--s12); }
	.vai-pband__text { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: var(--s3); }
	.vai-pband__foot { gap: var(--s10); }
	.vai-pband .vai-car { flex: 0 0 var(--l-col-media); }
}

/* Contact, Figma 82:138 */
.vai-contact { background: var(--vai-white); padding-block: var(--pad); }
.vai-contact__lead { margin-top: var(--s6); max-width: var(--l-col-text); }
.vai-contact .vai-actions { margin-top: var(--s8); }
.vai-contact__note { margin-top: var(--s4); }
.vai-contact__mail { margin-top: var(--s6); font-size: var(--vai-web-type-button); line-height: 24px; color: var(--vai-deep-blue); }
.vai-contact__mail a { display: inline-flex; align-items: center; min-height: var(--vai-web-target-min); }
@media (min-width: 1024px) { .vai-contact { padding-block: 130px 76px; } .vai-contact .vai-actions { margin-top: 36px; } }

/* Footer, Figma 83:210 */
.vai-footer { background: var(--vai-deep-blue); color: var(--vai-white); padding: var(--s16) var(--m) var(--s12); }
.vai-footer > * { max-width: var(--l-content); margin-inline: auto; }
.vai-footer__top { display: flex; flex-direction: column; gap: var(--s10); }
.vai-footer__home { display: inline-flex; align-items: center; gap: 17px; color: var(--vai-white); text-decoration: none; font-size: 20px; line-height: 27px; font-weight: 500; align-self: flex-start; min-height: var(--vai-web-target-min); }
.vai-footer__mark { width: 48px; height: 48px; flex: none; display: block; }
.vai-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.vai-footer__nav ul { display: flex; flex-direction: column; gap: var(--s2); }
.vai-footer__nav li { line-height: 24px; }
.vai-footer__nav a { display: inline-flex; align-items: center; min-height: var(--l-icon); font-size: 16px; line-height: 24px; font-weight: 400; text-decoration: none; }
.vai-footer__bottom { margin-top: var(--s12); padding-top: var(--s6); border-top: 1px solid color-mix(in srgb, var(--vai-white) 25%, transparent); display: flex; flex-direction: column; gap: var(--s4); }
.vai-footer__legal { font-size: var(--vai-web-type-ribbon); line-height: var(--l-line-small); font-weight: 400; }
.vai-footer__legal-nav ul { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.vai-footer__legal-nav a, .vai-footer__consent { display: inline-flex; align-items: center; min-height: var(--l-icon); font-size: var(--vai-web-type-ribbon); line-height: var(--l-line-small); font-weight: 400; text-decoration: none; }
@media (min-width: 1024px) {
	.vai-footer { padding: var(--s20) var(--m) 52px; }
	.vai-footer__top { flex-direction: row; justify-content: space-between; align-items: flex-start; }
	.vai-footer__home { gap: 17px; font-size: 22px; min-height: var(--l-mark-foot); }
	.vai-footer__mark { width: var(--l-mark-foot); height: var(--l-mark-foot); }
	.vai-footer__nav { flex: 0 0 560px; grid-template-columns: 280px 280px; gap: 0; }
	.vai-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; margin-top: var(--s8); }
}

/* Page intro (Perspectives, Recovery, Build, Security), Figma 131:26 */
.vai-intro { background: var(--vai-white); padding-block: var(--pad) var(--s16); }
.vai-intro__title { font-size: var(--t-h1); line-height: var(--t-h1-l); font-weight: 700; color: var(--vai-deep-blue); }
.vai-intro__line { max-width: var(--l-col-text); }
.vai-intro__title + .vai-intro__line { margin-top: var(--s6); }
.vai-intro__line + .vai-intro__line { margin-top: var(--s2); }
@media (min-width: 1024px) { .vai-intro { padding-block: var(--s30) var(--s24); } }

/* Perspectives posts, Figma 131:30 */
.vai-posts { background: var(--vai-grey-200); padding-block: var(--pad); }
.vai-post { display: flex; flex-direction: column; gap: var(--s10); }
.vai-post[hidden] { display: none; }
.vai-post__media { display: flex; flex-direction: column; gap: var(--s6); }
.vai-dots--buttons { gap: 0; margin-left: 2px; color: var(--vai-deep-blue); }
.vai-dot-btn { width: 44px; height: 44px; margin: -10px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; color: var(--vai-deep-blue); touch-action: manipulation; }
.vai-dot-btn[aria-current="true"] .vai-dot { opacity: 1; }
.vai-post__controls .vai-dots { margin-left: 0; }
.vai-post__series { font-size: 16px; line-height: 19px; font-weight: 500; color: var(--vai-deep-blue); }
.vai-post__title { margin-top: var(--s4); font-size: 30px; line-height: 36px; font-weight: 700; color: var(--vai-deep-blue); }
.vai-post__date { margin-top: var(--s4); font-size: 16px; line-height: 19px; font-weight: 400; color: var(--vai-grey-600); }
.vai-post__body { margin-top: var(--s8); display: flex; flex-direction: column; gap: var(--s4); max-width: 560px; }
.vai-post__body p { font-size: 18px; line-height: 27px; font-weight: 400; }
.vai-post__key { font-weight: 500 !important; color: var(--vai-deep-blue); }
.vai-post__sources { margin-top: var(--s6); font-size: var(--vai-web-type-ribbon); line-height: 17px; color: var(--vai-grey-600); }
.vai-post__links { margin-top: var(--s8); color: var(--vai-deep-blue); }
.vai-post__nav { margin-top: var(--s12); display: flex; gap: var(--s4); }
@media (min-width: 1024px) {
	.vai-post { flex-direction: row; gap: var(--s28); align-items: flex-start; }
	.vai-post__media { flex: 0 0 var(--l-col-media); }
	.vai-post__text { flex: 1 1 var(--l-col-text); padding-top: var(--s5); }
	.vai-post__title { font-size: 40px; line-height: 48px; }
	.vai-post__links { margin-top: 36px; }
}

/* About, Figma 135:26 */
.vai-atop { background: var(--vai-white); padding-block: var(--pad); }
.vai-atop__lead { margin-top: var(--s8); max-width: 900px; font-size: 22px; line-height: 1.4; font-weight: 300; color: var(--vai-near-black); }
.vai-atop__fact { margin-top: var(--s5); font-size: 18px; line-height: 22px; font-weight: 500; color: var(--vai-deep-blue); }
.vai-atop__purpose { margin-top: var(--s16); }
.vai-atop__purpose-text { margin-top: 15px; max-width: 1100px; font-size: 22px; line-height: 1.3; font-weight: 300; color: var(--vai-near-black); }
.vai-atop__purpose-text strong { font-weight: 700; color: var(--vai-deep-blue); }
.vai-atop__vm { margin-top: var(--s12); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s10); }
.vai-atop__statement { margin-top: 15px; font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--vai-deep-blue); max-width: 560px; }
@media (min-width: 768px) {
	.vai-atop__lead, .vai-atop__purpose-text, .vai-atop__statement { font-size: 28px; }
	.vai-atop__purpose { margin-top: var(--s20); }
	.vai-atop__vm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s20); margin-top: var(--s16); }
}

/* About, founder chapter, Figma 135:34 */
.vai-founder { background: var(--vai-grey-200); padding-block: var(--pad); }
.vai-founder__row { display: flex; flex-direction: column; gap: var(--s10); }
.vai-founder__portrait { width: 100%; max-width: var(--l-portrait-w); aspect-ratio: 480 / 600; background: var(--vai-white); }
.vai-founder__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vai-founder__story { margin-top: var(--s8); font-size: 18px; line-height: 27px; font-weight: 400; }
.vai-founder__slogan { margin-top: var(--s8); font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--vai-deep-blue); }
.vai-quote-box { position: relative; margin-top: var(--s10); background: var(--vai-white); padding: var(--s8); }
.vai-quote-box::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--vai-teal-b); transform-origin: top; }
.vai-quote-box blockquote p { font-size: 20px; line-height: 1.4; font-weight: 300; color: var(--vai-deep-blue); }
.vai-quote-box figcaption { margin-top: var(--s4); font-size: 16px; line-height: 19px; font-weight: 500; color: var(--vai-grey-600); }
.vai-timeline { position: relative; margin-top: var(--s16); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s8); padding-left: var(--s8); }
.vai-timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 0; width: 1px; background: var(--vai-deep-blue); }
.vai-timeline__item { position: relative; }
.vai-timeline__item::before { content: ""; position: absolute; left: calc(-1 * var(--s8)); top: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--vai-teal-b); }
.vai-timeline__year { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--vai-deep-blue); }
.vai-timeline__text { margin-top: var(--s2); font-size: 16px; line-height: 24px; font-weight: 400; max-width: 360px; }
@media (min-width: 768px) {
	.vai-founder__slogan { font-size: 28px; }
	.vai-quote-box blockquote p { font-size: 24px; }
	.vai-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-left: 0; padding-top: 34px; gap: var(--s10) var(--s6); }
	.vai-timeline::before { left: 0; right: 0; top: 6px; bottom: auto; width: auto; height: 1px; }
	.vai-timeline__item::before { left: 0; top: -34px; }
	.vai-timeline__year { font-size: 28px; line-height: 34px; }
}
@media (min-width: 1024px) {
	.vai-founder__row { flex-direction: row; gap: var(--s20); align-items: flex-start; }
	.vai-founder__portrait { flex: 0 0 var(--l-portrait-w); height: 600px; }
	.vai-founder__text { flex: 1 1 var(--l-col-text); }
	.vai-founder .vai-h2 { line-height: 68px; }
	.vai-timeline { margin-top: 90px; }
	.vai-timeline__text { margin-top: var(--s2); max-width: 172px; }
}

/* About lists, Figma 135:60 */
.vai-alists { background: var(--vai-white); padding-block: var(--pad) 0; }
.vai-alists__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s12); }
.vai-alists__col { display: flex; flex-direction: column; gap: var(--s12); }
.vai-alists__group ul { margin-top: var(--s5); display: flex; flex-direction: column; gap: 10px; }
.vai-alists__group li { font-size: 17px; line-height: 1.5; font-weight: 400; max-width: 560px; }
@media (min-width: 1024px) { .vai-alists { padding-block: var(--s30) var(--s6); } .vai-alists__cols { grid-template-columns: minmax(0, 520px) minmax(0, 560px); justify-content: space-between; column-gap: var(--s12); } .vai-alists__col { gap: 50px; } }

/* Recovery, Build, Security pages: approved text in the approved page style */
.vai-service { background: var(--vai-white); padding-block: 0 var(--pad); }
.vai-service__rows { border-top: 1px solid var(--vai-grey-200); }
.vai-service__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding-block: var(--s8); border-bottom: 1px solid var(--vai-grey-200); }
.vai-service__row p { font-size: 18px; line-height: 27px; max-width: var(--l-col-text); }
.vai-service__note { margin-top: var(--s8); color: var(--vai-grey-600); font-size: 18px; line-height: 27px; }
.vai-entry { background: var(--vai-grey-200); padding-block: var(--pad); }
.vai-entry__in { display: flex; flex-direction: column; gap: var(--s8); }
.vai-entry .vai-sublead { margin-top: var(--s4); max-width: var(--l-col-text); }
@media (min-width: 1024px) {
	.vai-service__row { grid-template-columns: var(--l-col-media) minmax(0, var(--l-col-text)); gap: var(--s28); padding-block: var(--s12); }
	.vai-entry__in { flex-direction: row; justify-content: space-between; align-items: flex-end; }
}

/* Plain pages (legal notice, privacy, cookies, request, 404) */
.vai-page { padding: var(--pad) var(--m); }
.vai-page > * { max-width: 760px; margin-inline: auto; }
.vai-page__title { font-size: var(--t-h2); line-height: var(--t-h2-l); letter-spacing: var(--t-h2-tr); font-weight: 700; color: var(--vai-deep-blue); margin-bottom: var(--sec-gap); }
.vai-page__content > * + * { margin-top: var(--vai-web-card-gap); }
.vai-page__content h2 { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--vai-deep-blue); margin-top: var(--sec-gap); }
.vai-page__content ul { list-style: disc; padding-left: 1.2em; }
.vai-page .vai-sec { padding: 0; display: flex; flex-direction: column; gap: var(--sec-gap); }
.vai-form { display: flex; flex-direction: column; gap: var(--vai-web-card-gap); }
.vai-field { display: flex; flex-direction: column; gap: var(--s2); }
.vai-field label, .vai-check label { font-size: var(--vai-web-type-ribbon); font-weight: 400; line-height: var(--l-line-small); }
.vai-field input { height: var(--l-input); padding: 0 var(--vai-web-card-gap); border: 1px solid var(--vai-grey-600); background: var(--vai-white); font: inherit; font-size: var(--l-input-font); color: var(--vai-near-black); }
.vai-check { display: flex; gap: var(--s3); align-items: flex-start; flex-wrap: wrap; }
.vai-check .vai-field__error { flex-basis: 100%; }
.vai-radios { border: 0; padding: 0; margin: 0; }
.vai-radios legend { font-size: var(--vai-web-type-ribbon); line-height: var(--l-line-small); padding: 0; margin-bottom: var(--s2); }
.vai-radio { display: flex; gap: var(--s3); align-items: center; min-height: 44px; }
.vai-radio input { width: var(--l-icon); height: var(--l-icon); margin: 0; flex: none; accent-color: var(--vai-deep-blue); }
.vai-radio label { font-size: 17px; line-height: 26px; font-weight: 300; }
.vai-field__error { margin: 0; font-size: var(--vai-web-type-ribbon); line-height: var(--l-line-small); color: var(--vai-error); font-weight: 400; }
.vai-field input[aria-invalid="true"], .vai-radios[aria-invalid="true"] .vai-radio input, .vai-check input[aria-invalid="true"] { outline: 2px solid var(--vai-error); outline-offset: 2px; }
.vai-check input { width: var(--l-icon); height: var(--l-icon); margin: 0; flex: none; accent-color: var(--vai-deep-blue); border-radius: var(--vai-web-radius-checkbox); }
.vai-form .vai-btn { align-self: flex-start; }

/* 1.0.15: footer at the foot of the screen on short pages (404, search) */
.wp-site-blocks { min-height: 100dvh; display: flex; flex-direction: column; }
.wp-site-blocks > .vai-main { flex: 1 0 auto; }
/* 1.0.15: search results, same plain page layout as the 404 and legal pages */
.vai-search__form .wp-block-search__inside-wrapper { display: flex; gap: var(--s3); border: 0; padding: 0; }
.vai-search__form .wp-block-search__input { flex: 1 1 auto; min-width: 0; height: var(--l-input); padding: 0 var(--vai-web-card-gap); border: 1px solid var(--vai-grey-600); border-radius: 0; background: var(--vai-white); font: inherit; font-size: var(--l-input-font); color: var(--vai-near-black); }
.vai-search__form .wp-block-search__button { margin: 0; min-height: var(--vai-web-target-min); padding: 0 var(--btn-px); background: var(--vai-deep-blue); color: var(--vai-white); border: var(--vai-web-button-outline-width) solid var(--vai-deep-blue); border-radius: 0; font: inherit; font-size: var(--vai-web-type-button); font-weight: 500; cursor: pointer; touch-action: manipulation; transition: transform 140ms var(--ease-out), background-color 160ms ease; }
.vai-search__form .wp-block-search__button:active { transform: scale(0.97); }
.vai-search__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--vai-grey-200); }
.vai-search__list > li { border-bottom: 1px solid var(--vai-grey-200); }
.vai-search__title { margin: 0; font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.4px; }
.vai-search__title a { display: block; padding-block: var(--s4); color: var(--vai-deep-blue); text-decoration: none; }
.vai-search__pages { margin-top: var(--s6); display: flex; gap: var(--s4); }
.vai-search__pages a, .vai-search__pages span { display: inline-flex; align-items: center; min-height: var(--vai-web-target-min); color: var(--vai-teal-b); }
@media (hover: hover) and (pointer: fine) {
	.vai-search__title a:hover { text-decoration: underline; text-underline-offset: 6px; }
	.vai-search__form .wp-block-search__button:hover { background: var(--vai-near-black); border-color: var(--vai-near-black); }
}
.vai-accent { display: block; color: var(--vai-teal-b); }
/* Hero, unchanged from 1.0.11 (approved; Figma 82:3 matches 55:2), and the request page of 1.0.11. */
/* 1.0.30 (Isa, 22 Oct 2026, 19:01, hero option 4: "Use this. I love it... it gives some character to the page"): the full bleed mark in full deep blue, cropped at the right edge, with the headline, lead, tagline and actions in one column on the left, on white. Replaces the 4.5% tint of 1.0.11 to 1.0.29 (Isa, 22 Oct 18:45: "this very clear and almost transparent big logo... is not what I agreed"). Text never sits on the disc, so the contrast pairs are the page pairs (deep blue and Teal B on white). */
.vai-hero--mark { position: relative; overflow: hidden; isolation: isolate; padding: var(--s14) var(--m) var(--s16); min-height: min(700px, calc(100svh - 96px)); display: flex; align-items: center; }
.vai-hero__bg { --mw: 1180px; position: absolute; z-index: -1; width: var(--mw); height: auto; aspect-ratio: 1; left: calc(50% + 120px); top: 50%; transform: translateY(-50%); pointer-events: none; } /* desktop: 1180 px disc, its left edge 120 px right of the page centre (clear of the 620 px headline column at every width from 1024), running off the right edge, centred on the hero height; preview of 22 Oct 19:00 at 1547 px: disc edge at 878 px, here 893 px */
.vai-hero__bg-disc { fill: var(--vai-deep-blue); opacity: 1; }
.vai-hero--mark .vai-hero__row { width: 100%; max-width: var(--l-content); margin-inline: auto; display: flex; flex-direction: column; gap: var(--s6); align-items: flex-start; }
.vai-hero--mark .vai-hero__h1 { font-size: var(--vai-web-type-hero-phone); line-height: var(--vai-web-type-hero-phone-line); letter-spacing: var(--vai-web-type-hero-phone-track); font-weight: 700; color: var(--vai-deep-blue); margin: 0; max-width: 600px; }
.vai-hero__who { font-size: 19px; line-height: 26px; font-weight: 300; color: var(--vai-deep-blue); margin: 0; }
.vai-hero__side { position: relative; display: flex; flex-direction: column; gap: var(--s4); max-width: 460px; }
.vai-hero__lead { font-size: 21px; line-height: 28px; font-weight: 300; color: var(--vai-near-black); margin: 0; }
.vai-hero__tagline { color: var(--vai-teal-b); }
.vai-hero__lead, .vai-hero__who { text-wrap: pretty; }
.vai-hero--mark .vai-hero__side .vai-hero__lead, .vai-hero--mark .vai-hero__side .vai-hero__who { font-size: 21px; line-height: 28px; }
@media (min-width: 1024px) { .vai-hero--mark .vai-hero__side .vai-hero__lead, .vai-hero--mark .vai-hero__side .vai-hero__who { font-size: 22px; line-height: 30px; } }
.vai-hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); margin: 0; }
.vai-hero__link { color: var(--vai-deep-blue); }
@media (max-width: 1023px) {
	.vai-hero--mark { display: block; padding-bottom: 0; min-height: 0; }
	.vai-hero--mark .vai-hero__row { position: relative; z-index: 1; }
	.vai-hero--mark > .vai-hero__bg:last-child { --mw: 130vw; position: relative; display: block; width: var(--mw); left: 10vw; right: auto; top: auto; transform: none; margin-top: var(--s6); margin-bottom: calc(var(--mw) * -0.43); } /* phone and tablet: the mark below the column, first dots at the right of the text, running off the right edge, the lower part cut by the band below; the selector outranks WordPress's :root :where(.is-layout-flow) > :last-child margin reset */
	@media (min-width: 600px) { .vai-hero--mark > .vai-hero__bg:last-child { --mw: 100vw; left: 30vw; } }
}
@media (min-width: 1024px) {
	.vai-hero--mark { min-height: min(760px, calc(100svh - 96px)); padding: var(--s24) var(--m); }
	.vai-hero--mark .vai-hero__h1 { font-size: 56px; line-height: 64px; letter-spacing: -0.6px; max-width: 560px; }
	.vai-hero__who { font-size: 22px; line-height: 30px; }
	.vai-hero__lead { font-size: 22px; line-height: 30px; }
	@media (max-width: 1279px) { .vai-hero__bg { --mw: 820px; left: calc(50% + 168px); } } /* 1024 to 1279 (tablet landscape): a smaller disc, 820 px, its left edge 168 px right of the centre, so two full dot columns show and the headline keeps clear (1.0.31, Isa 22 Oct 19:33: on the iPad landscape only one column showed) */
}
@media (min-width: 1440px) {
	.vai-hero--mark .vai-hero__h1 { font-size: var(--vai-web-type-hero); line-height: var(--vai-web-type-hero-line); letter-spacing: var(--vai-web-type-hero-track); max-width: 620px; } /* w-hero 64/72 on three lines in the 620 px column */
}




.vai-request { display: flex; flex-direction: column; gap: var(--sec-gap); }
.vai-request__form { max-width: 560px; }
.vai-field textarea { padding: var(--s2) var(--vai-web-card-gap); border: 1px solid var(--vai-grey-600); background: var(--vai-white); font: inherit; font-size: var(--l-input-font); color: var(--vai-near-black); resize: vertical; min-height: 120px; }
.vai-choice { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.vai-choice legend { font-size: var(--vai-web-type-ribbon); font-weight: 500; padding: 0; margin-bottom: var(--s2); }
.vai-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.vai-notice { border-top: var(--vai-web-card-rule) solid var(--vai-teal-b); background: var(--vai-grey-200); padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--s2); }
.vai-notice--error { border-top-color: var(--vai-error); }
.vai-notice__title { font-weight: 500; color: var(--vai-near-black); margin: 0; }
.vai-inline-link { color: var(--vai-deep-blue); text-underline-offset: 3px; }
/* 1.0.11 check fix: form buttons and choice inputs take the Inter family and the text colour (button.vai-btn rendered in the browser default face). */
.vai-btn { font-family: inherit; }
.vai-check input { color: inherit; font: inherit; }
/* 1.0.11 check fix: keep the word space before an arrow inside the flex link (Figma 55:2 "Demo on request →"). */
.vai-link { column-gap: 0.3em; }
/* 1.0.11 check fix: no single word left on the last line of the request page title and lead. */
.vai-page--request .vai-page__title, .vai-request .vai-lead { text-wrap: balance; }
.vai-page--request > * { max-width: var(--l-content); } /* 1.0.17: the request page uses the full content width for the three tiles */
.vai-request .vai-lead { max-width: var(--l-col-text); }
.vai-notice__title { text-wrap: balance; }
.vai-notice:focus { outline: none; }
.vai-notice:focus-visible { outline: 2px solid var(--vai-deep-blue); outline-offset: 2px; }

.vai-hero__link { text-underline-offset: 4px; }

/* Motion set approved 20 Oct 2026 (Women in Ports set, adapted, no backdrop drift). Only with the script and
   without reduced motion: html gets the class vai-motion. Reveal: opacity and a 14 px rise, 0.32 s. */
html.vai-motion .vai-reveal { opacity: 0; transform: translateY(14px); transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out); transition-delay: calc(var(--vai-i, 0) * 60ms); }
html.vai-motion .vai-reveal.is-in { opacity: 1; transform: none; }
html.vai-motion .vai-hero__h1, html.vai-motion .vai-hero__side { animation: vai-rise 320ms var(--ease-out) both; }
html.vai-motion .vai-hero__h1 { animation-delay: 120ms; }
html.vai-motion .vai-hero__side { animation-delay: 260ms; }
@keyframes vai-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html.vai-motion .vai-quote-box::before { transform: scaleY(0); transition: transform 320ms var(--ease-out) 200ms; }
html.vai-motion .vai-quote-box.is-in::before { transform: none; }
/* Code rain: a slow drift while the band is on screen (Isa, 19 Oct 2026: "a small animation is fine"). */
html.vai-motion .vai-int__rain img { animation: vai-rain 30s var(--ease-in-out) infinite alternate; animation-play-state: paused; will-change: transform; }
html.vai-motion .vai-int.is-live .vai-int__rain img { animation-play-state: running; }
@keyframes vai-rain { from { transform: translateY(-24px); } to { transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) {
	.vai-btn, .vai-arrow { transition: none; }
	.vai-btn:active, .vai-arrow:active { transform: none; }
}
.vai-service__action { margin-top: var(--s10); }

@media (min-width: 1280px) { .vai-timeline { grid-template-columns: repeat(6, minmax(0, 172px)); justify-content: start; gap: var(--s6) 28px; } } /* stops every 200 px, Figma 136:2 to 136:17 */


/* 1.0.17: request page (Isa, 20 Oct 2026). Two choice tiles and the code rain graphic, then the registration form.
   Colours and sizes from the tokens; tile links deep blue underlined (Teal B on grey 200 fails 4.5:1). */
.vai-footer__consent { background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; font-size: var(--vai-web-type-ribbon); line-height: var(--l-line-small); font-weight: 400; cursor: pointer; }
.vai-footer__consent:focus-visible { outline: 2px solid var(--vai-white); outline-offset: 2px; }
.vai-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.vai-choice-tile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); padding: var(--s6) var(--s5); background: var(--vai-grey-200); color: var(--vai-near-black); border: 2px solid var(--vai-grey-200); text-align: left; text-decoration: none; font: inherit; cursor: pointer; width: 100%; }
.vai-choice-tile--demo { background: var(--vai-white); border-color: var(--vai-deep-blue); }
.vai-choice-tile.is-open { background: var(--vai-white); border-color: var(--vai-deep-blue); }
.vai-choice-tile:focus-visible { outline: 2px solid var(--vai-deep-blue); outline-offset: 2px; }
.vai-choice-tile__title { font-size: var(--t-h3); line-height: var(--t-h3-l); font-weight: 500; color: var(--vai-near-black); }
.vai-choice-tile__body { font-size: 17px; line-height: 26px; font-weight: 300; }
.vai-choice-tile__cta { display: inline-flex; align-items: center; justify-content: center; min-height: var(--vai-web-target-min); margin-top: var(--s2); padding: 13px 28px; font-size: var(--vai-web-type-button); line-height: 21px; font-weight: 400; background: var(--vai-white); color: var(--vai-deep-blue); border: var(--vai-web-button-outline-width) solid var(--vai-deep-blue); text-decoration: none; transition: transform 140ms var(--ease-out); } /* 1.0.18: the tile actions are buttons (Isa, 20 Oct 2026, "more visible, a button"; Figma 148:3 v2) */
.vai-choice-tile--link .vai-choice-tile__cta { background: var(--vai-deep-blue); color: var(--vai-white); }
.vai-choice-tile:hover .vai-choice-tile__cta, .vai-choice-tile:focus-visible .vai-choice-tile__cta { transform: translateY(-1px); }
.vai-choice-tile:active .vai-choice-tile__cta { transform: scale(0.98); }
.vai-choice-tile__note { font-size: 12px; line-height: 18px; color: var(--vai-grey-600); }
.vai-choices__graphic { margin: 0; background: var(--vai-deep-blue); aspect-ratio: 588 / 340; overflow: hidden; }
.vai-choices__graphic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vai-demo-form { max-width: none; border-top: var(--vai-web-card-rule) solid var(--vai-deep-blue); padding-top: var(--s8); }
.vai-demo-form__title { font-size: var(--t-h3); line-height: var(--t-h3-l); font-weight: 500; }
.vai-form__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vai-web-card-gap); }
.vai-field select { height: var(--l-input); padding: 0 var(--vai-web-card-gap); border: 1px solid var(--vai-grey-600); background: var(--vai-white); font: inherit; font-size: var(--l-input-font); color: var(--vai-near-black); border-radius: 0; }
.vai-field select:focus-visible, .vai-field input:focus-visible, .vai-field textarea:focus-visible { outline: 2px solid var(--vai-deep-blue); outline-offset: 2px; }
@media (min-width: 768px) {
	.vai-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--s6); }
	.vai-choice-tile { padding: var(--s8); gap: var(--s4); }
	.vai-choices__graphic { aspect-ratio: auto; height: 100%; }
	.vai-demo-form { max-width: 1032px; }
	.vai-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
}

/* 1.0.18: Complianz consent banner on the VAI tokens (council M2, Isa 20 Oct 2026). Inter, square, deep blue filled
   accept, outline deny, near black text; the floating pill is hidden because the footer carries "Manage consent". */
#cmplz-cookiebanner-container .cmplz-cookiebanner, .cmplz-cookiebanner { font-family: var(--vai-font-family) !important; background: var(--vai-white) !important; color: var(--vai-near-black) !important; border: 1px solid var(--vai-grey-200) !important; border-radius: 0 !important; box-shadow: none !important; }
.cmplz-cookiebanner .cmplz-header, .cmplz-cookiebanner .cmplz-title, .cmplz-cookiebanner .cmplz-message, .cmplz-cookiebanner .cmplz-categories, .cmplz-cookiebanner .cmplz-links, .cmplz-cookiebanner .cmplz-links a, .cmplz-cookiebanner .cmplz-category-title, .cmplz-cookiebanner .cmplz-description-functional { font-family: inherit !important; color: var(--vai-near-black) !important; font-size: 14px !important; line-height: 20px !important; }
.cmplz-cookiebanner .cmplz-title { font-size: 17px !important; line-height: 24px !important; font-weight: 700 !important; }
.cmplz-cookiebanner .cmplz-links a { text-decoration: underline !important; color: var(--vai-deep-blue) !important; }
.cmplz-cookiebanner .cmplz-btn { font-family: inherit !important; font-size: 17px !important; line-height: 21px !important; font-weight: 400 !important; border-radius: 0 !important; padding: 13px 28px !important; min-height: 47px !important; box-shadow: none !important; }
.cmplz-cookiebanner .cmplz-btn.cmplz-accept { background: var(--vai-deep-blue) !important; color: var(--vai-white) !important; border: 1.5px solid var(--vai-deep-blue) !important; }
.cmplz-cookiebanner .cmplz-btn.cmplz-deny, .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences, .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences { background: var(--vai-white) !important; color: var(--vai-deep-blue) !important; border: 1.5px solid var(--vai-deep-blue) !important; }
.cmplz-cookiebanner .cmplz-close { width: 44px !important; height: 44px !important; color: var(--vai-deep-blue) !important; }
.cmplz-cookiebanner .cmplz-category .cmplz-always-active, .cmplz-cookiebanner .cmplz-always-active { color: var(--vai-grey-600) !important; font-size: 14px !important; }
.cmplz-cookiebanner input:focus-visible, .cmplz-cookiebanner .cmplz-btn:focus-visible, .cmplz-cookiebanner a:focus-visible { outline: 2px solid var(--vai-deep-blue) !important; outline-offset: 2px !important; }
#cmplz-manage-consent, .cmplz-manage-consent.cmplz-show { display: none !important; } /* the floating pill; the footer button reopens the banner */
.vai-entry .vai-sublead, .vai-service__row p, .vai-page-intro p { text-wrap: pretty; } /* 1.0.27: no single word alone on the last line (Build page) */
/* Why it matters, 1.0.27 (L25), 1.0.28: four figures in the approved four columns, every figure on one line at one size,
   circles slightly larger; closing line on patients. */
.vai-why__figure { white-space: nowrap; }
.vai-why__caption { text-wrap: pretty; }
.vai-why__close { margin-top: var(--s12); text-wrap: balance; }
@media (min-width: 768px) { .vai-why__circle { width: min(100%, 264px); } }