/**
 * VH Citizenship — Typography (VHC-P8 revision)
 *
 * Matches vhcitizenship.com's own typography exactly, per explicit owner
 * request: Geologica for every heading level (h1-h6) + system Helvetica
 * for body copy — replacing the earlier VHC-P3 IBM Plex Serif/Sans
 * pairing. IBM Plex Sans Arabic is kept as-is (production has no Arabic
 * version to match against, and Geologica has no Arabic glyph coverage).
 * Helvetica is not self-hosted — matches production's own approach,
 * which declares only `font-family:"Helvetica"` and relies on the
 * platform's system font (true Helvetica on macOS/iOS, browser/OS
 * substitution — typically Arial — on Windows/Android, same as
 * production itself renders for those visitors).
 */

@font-face {
	font-family: 'IBM Plex Sans Arabic';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/ibm-plex-sans-arabic-400.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
	font-family: 'IBM Plex Sans Arabic';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/ibm-plex-sans-arabic-600.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/**
 * Geologica — sitewide heading font (VHC-P8 revision, owner request:
 * match vhcitizenship.com's actual typography exactly). Production's
 * Elementor Kit uses Geologica for every heading level h1-h6 and
 * Helvetica for body copy; the site previously used IBM Plex Serif for
 * headings instead (a deliberate VHC-P3 pairing) but the owner asked for
 * the original site's own fonts rather than that pairing. Files
 * self-hosted, in wp-content/uploads/2023/06/ (the Elementor Kit's
 * original font upload); all 5 weights confirmed byte-identical to
 * production's own files and copied here rather than adding a fresh
 * dependency. Previously only 600/700 were present (scoped to the
 * mega-menu only); 300/400/500 added to cover all heading levels.
 */
@font-face {
	font-family: 'Geologica';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/geologica-300.woff2') format('woff2');
}
@font-face {
	font-family: 'Geologica';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/geologica-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Geologica';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/geologica-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Geologica';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/geologica-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Geologica';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/geologica-700.woff2') format('woff2');
}
/**
 * VH Citizenship — Design Tokens
 * Implements VHC-P1-003 (color/typography/motion) and VHC-P1-002 (responsive/spacing/layout).
 * Single source of truth: every color, size, and spacing value used anywhere in the new
 * component/utility layer must reference one of these custom properties, never a hardcoded value.
 * Existing site visuals are UNCHANGED by this file alone — it only defines variables until
 * P3+ components/utilities reference them.
 */

:root {
	/* ---------------------------------------------------------------------
	 * COLOR — kept exactly from the existing Elementor Kit (VHC-P0-004 §3),
	 * extended into a full semantic system (VHC-P1-003 §1).
	 * ------------------------------------------------------------------- */
	--vhc-color-primary: #0F2317;          /* deep forest green — existing kit Accent 1, unchanged */
	--vhc-color-accent-gold: #BB7822;      /* existing kit Accent 2, unchanged */
	--vhc-color-accent-gold-muted: #D6A04E;/* lighter gold, formalized from the site's own hand-typed hover value */
	--vhc-color-neutral: #5F6567;          /* existing kit Accent 3, unchanged */
	--vhc-color-surface-tint: #E4EDF3;     /* existing kit Accent 4, unchanged */

	--vhc-color-bg: #FAFAF8;               /* warm off-white default page background */
	--vhc-color-bg-dark: var(--vhc-color-primary);
	--vhc-color-surface: #F5F3EE;          /* card/panel background on light sections */
	--vhc-color-surface-dark: #17352E;     /* card/panel background on dark sections */

	--vhc-color-text: #14201B;             /* near-black, green undertone */
	--vhc-color-text-inverse: #F5F3EE;
	--vhc-color-text-muted: var(--vhc-color-neutral);

	--vhc-color-border: #E2DFD6;
	--vhc-color-border-dark: rgba(245, 243, 238, 0.16);

	--vhc-color-success: #3F6B4E;
	--vhc-color-warning: #A85D2E;
	--vhc-color-error: #8C3B2E;
	--vhc-color-focus-ring: rgba(187, 120, 34, 0.6); /* gold, 60% */

	/* ---------------------------------------------------------------------
	 * TYPOGRAPHY — fluid scale per VHC-P1-002 §4 / VHC-P1-003 §2.
	 * VHC-P8 revision: matches vhcitizenship.com's own Elementor Kit
	 * typography exactly (owner request) — Geologica (self-hosted, all
	 * heading levels) + system Helvetica (body/UI), replacing the earlier
	 * VHC-P3 IBM Plex Serif/Sans pairing. IBM Plex Sans Arabic is
	 * unchanged (Arabic companion) — see vhc-fonts.css for @font-face.
	 * ------------------------------------------------------------------- */
	--vhc-font-display: "Geologica", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--vhc-font-body: "Helvetica", Arial, sans-serif;
	--vhc-font-arabic: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif; /* loaded only on Arabic-locale pages, VHC-P1-003 §2.4 */

	--vhc-fs-display: clamp(2.5rem, 1.7rem + 3.5vw, 5rem);
	--vhc-fs-h1: clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
	--vhc-fs-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
	--vhc-fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
	--vhc-fs-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);
	--vhc-fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	--vhc-fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
	--vhc-fs-caption: clamp(0.8125rem, 0.8rem + 0.1vw, 0.875rem);
	--vhc-fs-label: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
	--vhc-fs-nav: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
	--vhc-fs-button: clamp(0.9375rem, 0.9rem + 0.1vw, 1.0625rem);
	--vhc-fs-stat: clamp(2rem, 1.6rem + 2vw, 3.5rem);

	--vhc-lh-heading: 1.25;
	--vhc-lh-body: 1.6;
	--vhc-lh-body-ar: 1.75; /* Arabic needs more vertical breathing room, VHC-P1-003 §2.4 */

	--vhc-ls-label: 0.05em; /* Latin all-caps labels only — never applied to Arabic, §2.4 */

	/* ---------------------------------------------------------------------
	 * SPACING — fluid scale per VHC-P1-002 §5. Every margin/padding in the
	 * new component/utility layer uses one of these, never an arbitrary value.
	 * ------------------------------------------------------------------- */
	--vhc-space-3xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.375rem);
	--vhc-space-2xs: clamp(0.5rem, 0.46rem + 0.2vw, 0.625rem);
	--vhc-space-xs: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
	--vhc-space-sm: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
	--vhc-space-md: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);   /* = --space-block in VHC-P1-002 */
	--vhc-space-lg: clamp(2rem, 1.6rem + 2vw, 4rem);
	--vhc-space-xl: clamp(3rem, 2rem + 4vw, 8rem);          /* = --space-section-y in VHC-P1-002 */
	--vhc-space-gap: clamp(1rem, 0.85rem + 0.75vw, 1.75rem);

	/* ---------------------------------------------------------------------
	 * LAYOUT — content widths per VHC-P1-002 §3.
	 * ------------------------------------------------------------------- */
	--vhc-width-reading: clamp(20rem, 90vw, 42rem);   /* ~65-75ch prose */
	--vhc-width-content: clamp(20rem, 92vw, 80rem);   /* ~1280px standard section */
	--vhc-width-wide: clamp(20rem, 96vw, 96rem);      /* ~1536px, for grids that want more room */
	--vhc-width-table: clamp(20rem, 95vw, 90rem);
	--vhc-width-form: clamp(20rem, 90vw, 34rem);
	--vhc-width-form-wide: clamp(20rem, 92vw, 44rem); /* multi-step / two-column field rows */
	--vhc-gutter: clamp(1rem, 0.85rem + 2vw, 3rem);

	/* ---------------------------------------------------------------------
	 * SHAPE
	 * ------------------------------------------------------------------- */
	--vhc-radius-sm: 4px;
	--vhc-radius-md: 8px;
	--vhc-radius-lg: 16px;
	--vhc-radius-pill: 999px;
	--vhc-border-width: 1px;
	--vhc-shadow-sm: 0 1px 2px rgba(15, 35, 23, 0.06);
	--vhc-shadow-md: 0 4px 16px rgba(15, 35, 23, 0.08);
	--vhc-shadow-lg: 0 12px 32px rgba(15, 35, 23, 0.12);

	/* ---------------------------------------------------------------------
	 * MOTION — tiers per VHC-P1-003 §3. Durations/easing only; the Tier
	 * system's actual triggers/usage rules live in VHC-P1-003 and are
	 * implemented as primitives in vhc-a11y-motion.css.
	 * ------------------------------------------------------------------- */
	--vhc-duration-micro: 180ms;   /* Tier 1 */
	--vhc-duration-entrance: 500ms;/* Tier 2 */
	--vhc-ease-out: ease-out;
	--vhc-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
	--vhc-reveal-distance: 20px;
	--vhc-stagger-step: 70ms;

	/* ---------------------------------------------------------------------
	 * LAYERING — a single z-index scale so future components never guess.
	 * ------------------------------------------------------------------- */
	--vhc-z-base: 1;
	--vhc-z-header: 100;
	--vhc-z-dropdown: 200;
	--vhc-z-mega-menu: 210;
	--vhc-z-modal-backdrop: 900;
	--vhc-z-modal: 910;
	--vhc-z-popup: 920;
	--vhc-z-toast: 950;
}

/* Dark-section contrast pairing (Constitution Article 1.3 — used selectively, never default) */
[data-vhc-surface="dark"] {
	--vhc-color-bg: var(--vhc-color-bg-dark);
	--vhc-color-surface: var(--vhc-color-surface-dark);
	--vhc-color-text: var(--vhc-color-text-inverse);
	--vhc-color-text-muted: #A9B2AC;
	--vhc-color-border: var(--vhc-color-border-dark);
}

/* Arabic type scale — line-height/letter-spacing adjustments only (VHC-P1-003 §2.4).
   Font-family swap and RTL layout live in vhc-base.css / [dir="rtl"]. */
:root[lang="ar"],
[dir="rtl"] {
	--vhc-lh-body: var(--vhc-lh-body-ar);
	--vhc-ls-label: 0em; /* never track Arabic text */
}
/**
 * VH Citizenship — Global Typography Application (VHC-P3 §2)
 *
 * Applies the fluid IBM Plex system to the site's actual rendered
 * elements sitewide — the deliberate boundary P2 held back (foundation
 * tokens only) is now crossed by explicit P3 authorization.
 *
 * Scope note: this is CSS-only — no page's Elementor content/structure
 * is touched. Programme pages (P4 scope) inherit consistent typography
 * as a side effect of this global rule, which is desired; their layout,
 * sections, and copy remain untouched (that is what "don't redesign
 * programme pages yet" actually protects).
 *
 * Specificity: `html body` prefix + `!important` on font-family/size is
 * used deliberately — Elementor's Kit defaults and many per-widget
 * inline overrides would otherwise win the cascade, which is exactly
 * what this file exists to replace with one coherent system.
 */

html body {
	font-family: var(--vhc-font-body);
	font-size: var(--vhc-fs-body);
	line-height: var(--vhc-lh-body);
	color: var(--vhc-color-text);
}

html body h1,
html body .elementor-heading-title.elementor-size-xxl,
html body .elementor-heading-title.elementor-size-xl {
	font-family: var(--vhc-font-display) !important;
	font-size: var(--vhc-fs-h1) !important;
	line-height: var(--vhc-lh-heading) !important;
	font-weight: 500;
	text-wrap: balance;
	letter-spacing: -0.01em;
}

html body h2,
html body .elementor-heading-title.elementor-size-large {
	font-family: var(--vhc-font-display) !important;
	font-size: var(--vhc-fs-h2) !important;
	line-height: var(--vhc-lh-heading) !important;
	font-weight: 600;
	text-wrap: balance;
}

html body h3,
html body .elementor-heading-title.elementor-size-medium {
	font-family: var(--vhc-font-display) !important;
	font-size: var(--vhc-fs-h3) !important;
	line-height: var(--vhc-lh-heading) !important;
	font-weight: 500;
}

/* h4-h6: production (vhcitizenship.com) uses Geologica for every heading
   level, not just h1-h3 — matched here rather than the body font this
   rule previously used. */
html body h4,
html body h5,
html body h6,
html body .elementor-heading-title.elementor-size-small {
	font-family: var(--vhc-font-display) !important;
	font-size: var(--vhc-fs-h4) !important;
	line-height: var(--vhc-lh-heading) !important;
	font-weight: 500;
}

html body p,
html body li,
html body .elementor-widget-text-editor {
	font-size: var(--vhc-fs-body);
	line-height: var(--vhc-lh-body);
}

/* Lead paragraph — opt-in via .vhc-text-lead (already defined in vhc-base.css);
   also applied automatically to the first paragraph directly following an H1
   in an editorial content block, a common "intro paragraph" pattern. */
html body h1 + p {
	font-size: var(--vhc-fs-lead);
	line-height: var(--vhc-lh-body);
	color: var(--vhc-color-text-muted);
}

/* Navigation */
html body nav,
html body .elementor-nav-menu {
	font-family: var(--vhc-font-body);
	font-size: var(--vhc-fs-nav);
}

/* Buttons / CTAs */
html body .elementor-button,
html body button,
html body input[type="submit"] {
	font-family: var(--vhc-font-body);
	font-size: var(--vhc-fs-button);
}

/* Forms */
html body input,
html body select,
html body textarea,
html body label {
	font-family: var(--vhc-font-body);
	font-size: var(--vhc-fs-body);
}

/* Editorial metadata (dates, author lines, captions) */
html body .vhc-meta,
html body figcaption,
html body .elementor-widget-image-caption {
	font-family: var(--vhc-font-body);
	font-size: var(--vhc-fs-caption);
	color: var(--vhc-color-text-muted);
}

/* Statistics */
html body .vhc-stat-number {
	font-family: var(--vhc-font-display);
	font-size: var(--vhc-fs-stat);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	line-height: 1.1;
}

/* Quotes / testimonials (if retained per page — never fabricated, Constitution Article 4.12) */
html body blockquote,
html body .vhc-quote {
	font-family: var(--vhc-font-display);
	font-size: var(--vhc-fs-lead);
	font-style: italic;
	line-height: var(--vhc-lh-body);
}

/* Footer */
html body footer,
html body .elementor-location-footer {
	font-family: var(--vhc-font-body);
	font-size: var(--vhc-fs-body);
}

/* NOT applied blanket to .elementor-widget-text-editor (removed — real
   regression, confirmed live: on content-heavy pages, text-editor widgets
   are used to hold whole mixed sections (tables, multi-column layouts),
   not just flowing prose, so a blanket max-width here caps entire page
   sections to reading width instead of just paragraph text. The P1-002 §3
   reading-width goal still applies, but only via the opt-in .vhc-editorial
   / .vhc-container--reading classes (vhc-base.css) on content deliberately
   marked as prose, never blanket-applied to every text-editor widget. */

/* Numerals: IBM Plex's tabular figures are used automatically wherever
   .vhc-text-stat/.vhc-stat-number is applied (font-variant-numeric above);
   default body text uses proportional (non-tabular) figures, the correct
   choice for prose per standard typographic practice. */

/* VHC-P7-019: the homepage hero's Elementor "Animated Headline" widget
   requires white-space:nowrap on its rotating phrase for its width-morph
   animation to work, which is fine at the English/French phrase lengths
   the size was originally tuned for — but several Arabic rotating phrases
   (e.g. "العائلات ذات الثروات الكبيرة") render meaningfully wider than
   their English/French equivalents at the same font-size and overflow
   past the mobile viewport edge, making the hero heading unreadable.
   French phrases fit at every breakpoint tested and are intentionally
   left untouched. Scoped to the dynamic-text span only (the static
   before/highlighted text is unaffected) and to narrow viewports only —
   desktop/tablet already have enough width for the widest Arabic phrase. */
@media (max-width: 480px) {
	html[lang="ar"] body .elementor-headline-dynamic-text {
		font-size: 20px !important;
	}
	/* Belt-and-braces: the "rotate" style positions each phrase with its
	   own internal offset math (verified: even after the font-size fix
	   above, the widest phrases still computed a negative left edge in
	   testing, not just a transient mid-transition artifact) — clip at
	   the H1 level so no phrase can ever visually spill past the
	   viewport or overlap neighbouring content, regardless of the
	   plugin's own positioning for any given phrase. */
	html[lang="ar"] body .elementor-widget-animated-headline .elementor-headline {
		overflow-x: hidden;
		max-width: 100%;
	}
}
/**
 * VH Citizenship — Base, Layout Primitives & Typography Utilities
 * Implements VHC-P1-002 (responsive/layout) and VHC-P1-003 (typography), scoped
 * deliberately: this file (a) fixes genuine cross-viewport BUGS globally, and
 * (b) ships new, OPT-IN layout/typography classes for P3+ to build with.
 *
 * It intentionally does NOT override the site's existing global heading/body
 * font-size rendering — per VHC-P2 §22, sitewide visible typography/UI is P3's
 * scope ("Global UI"). Applying the fluid --vhc-fs-* scale to bare h1–h6/body
 * selectors today would visibly re-style every existing page; that is a P3
 * decision made with the actual current Kit typography values in hand, not a
 * P2 foundation change. See docs/Website Bible/02-P2-Foundation-Implementation/.
 */

/* ---------------------------------------------------------------------
 * GLOBAL BUG FIXES — safe everywhere, fix real overflow/clipping defects
 * without changing any deliberate design choice (color, spacing, layout).
 * These are the direct "root system" fixes for VHC-P1-002's target problem.
 * ------------------------------------------------------------------- */
/* Note: per the CSS Overflow spec, pairing overflow-x:hidden here with an
   unset overflow-y forces overflow-y to also compute as non-visible
   (auto) — true of "clip" too, not just "hidden". Investigated this as a
   suspect for an Elementor Pro sticky/motion-fx element misbehaving on
   the homepage's legacy timeline section (VHC-P0-004 §2's flagged
   "Premium Timeline" block, already slated for full replacement —
   VHC-P1-006). Confirmed NOT the cause (removing overflow-x live didn't
   restore its sticky behavior) — see that element's own targeted fix
   instead. Left as overflow-x:hidden: it's the proven fix for the real,
   QA-verified header/mobile-nav overflow bugs from the P3 header rebuild,
   and unwinding it isn't worth reopening those without cause. */
html, body {
	overflow-x: hidden;
	max-width: 100%;
}

/* VHC-P8: sitewide, not a deliberate color choice being overridden — every
   component that styles its own links (footer, mega-menu, cards, etc.)
   already sets an explicit color/color:inherit for the UNvisited state,
   but none defined :visited, so the browser's own built-in default
   visited-link color (a dark purple) was winning for any link a visitor's
   browser considers already-visited. Invisible-to-unreadable on this
   site's dark surfaces (confirmed live: footer links to already-visited
   pages rendering near-black on the dark green footer background) and a
   genuine WCAG contrast failure regardless of surface. Real navigation
   sites don't rely on visited-state color differentiation as a UX
   affordance, so inheriting the same color as unvisited is correct
   everywhere, not just a footer-specific patch. */
a:visited {
	color: inherit;
}

img, video, iframe, embed, object, svg {
	max-width: 100%;
	height: auto;
}

/* VHC-P8: the parent theme's legacy `.main-container img{display:block}`
   (beratung/vamtam/assets/css/dist/fallback/all.css) ties in specificity with
   Elementor's own `.elementor-widget-image img{display:inline-block}` and
   wins on source order, silently defeating Elementor's built-in image-align
   control (text-align only affects inline/inline-block children — a
   block-level image ignores it and always renders flush to the start edge
   regardless of the widget's Left/Center/Right alignment setting). Confirmed
   live: a right-aligned diagonal "value props" image on the Homepage's
   service-tab sections rendered flush-left instead, landing underneath its
   own icon-box cards so only a thin sliver showed. Restoring inline-block
   here only changes horizontal position for already-misaligned Elementor
   image widgets — box sizing (width/height) is identical between block and
   inline-block for an element with an explicit width, so already-correctly-
   positioned images are unaffected. */
.elementor-widget-image .elementor-widget-container img {
	display: inline-block;
}

*, *::before, *::after {
	box-sizing: border-box;
}

/* Prevent long unbroken strings (URLs, long programme/country names) from
   forcing horizontal overflow at narrow widths. */
h1, h2, h3, h4, h5, h6, p, li, blockquote {
	overflow-wrap: break-word;
	word-break: normal;
}

/* Homepage "Premium Timeline" section (VHC-P0-004 §2): a decorative
   scroll-following connector line (Elementor icon widget, data-id
   045991d) never activates its sticky/motion-fx behavior — stays in
   normal document flow as an empty ~100px-tall full-width block between
   steps 3 and 4, visible as a stray blank bar (reported directly).
   Root cause is inside Elementor Pro's own sticky-init JS, not this
   theme's CSS (verified: removing the html/body overflow-x rule live
   didn't restore it) — not worth deep-diagnosing proprietary plugin JS
   for one decorative flourish on content already slated for full
   replacement (VHC-P1-006's Process Timeline component, task tracked
   separately). Hidden here as the immediate fix. */
[data-id="045991d"] {
	display: none;
}

/* A table wider than its container scrolls internally — the page itself
   never scrolls horizontally (VHC-P1-002 §6/§8). Opt-in wrapper class for
   any table content added/edited going forward. */
.vhc-table-scroll {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------------
 * RTL FOUNDATION — logical properties, applied globally where safe
 * (VHC-P1-002 §9, VHC-P1-004 §5). Existing hardcoded left/right rules
 * inside parent-theme/Elementor CSS are NOT rewritten in P2 (that is
 * page-by-page work); this establishes the correct pattern going forward
 * and fixes the few global, safe cases.
 * ------------------------------------------------------------------- */
html[dir="rtl"] {
	text-align: right;
}

/* Directional icons (arrows/chevrons) — opt-in class for new components;
   mirrors automatically under RTL rather than needing a duplicate asset. */
.vhc-icon-directional {
	transform: scaleX(1);
}
html[dir="rtl"] .vhc-icon-directional {
	transform: scaleX(-1);
}

/* ---------------------------------------------------------------------
 * LAYOUT PRIMITIVES (VHC-P1-002 §3, VHC-P1-006) — new, opt-in classes.
 * Existing Elementor sections are untouched; these exist for P3+ to use
 * so future pages use the system instead of inventing new dimensions.
 * ------------------------------------------------------------------- */
.vhc-container {
	width: 100%;
	max-width: var(--vhc-width-content);
	margin-inline: auto;
	padding-inline: var(--vhc-gutter);
}
.vhc-container--wide {
	max-width: var(--vhc-width-wide);
}
.vhc-container--reading {
	max-width: var(--vhc-width-reading);
}
.vhc-container--table {
	max-width: var(--vhc-width-table);
}
.vhc-container--form {
	max-width: var(--vhc-width-form);
}
.vhc-container--form-wide {
	max-width: var(--vhc-width-form-wide);
}

.vhc-section {
	padding-block: var(--vhc-space-xl);
}
.vhc-section--tight {
	padding-block: var(--vhc-space-lg);
}
.vhc-section--large {
	padding-block: calc(var(--vhc-space-xl) * 1.5);
}

.vhc-grid {
	display: grid;
	gap: var(--vhc-space-gap);
	grid-template-columns: repeat(auto-fit, minmax(clamp(16rem, 30vw, 20rem), 1fr));
}
.vhc-grid--2up {
	grid-template-columns: repeat(auto-fit, minmax(clamp(16rem, 40vw, 26rem), 1fr));
}

.vhc-flex-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vhc-space-gap);
	align-items: center;
}

.vhc-split {
	display: grid;
	gap: var(--vhc-space-lg);
	grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
	.vhc-split {
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}
}

.vhc-editorial {
	max-width: var(--vhc-width-reading);
	margin-inline: auto;
	line-height: var(--vhc-lh-body);
}

/* ---------------------------------------------------------------------
 * TYPOGRAPHY UTILITIES — the fluid scale, available opt-in (VHC-P1-003 §2).
 * Use on new elements now; sitewide adoption on existing headings/body
 * copy is a deliberate P3 "Global UI" decision, not made silently here.
 * ------------------------------------------------------------------- */
.vhc-text-display { font-family: var(--vhc-font-display); font-size: var(--vhc-fs-display); line-height: var(--vhc-lh-heading); }
.vhc-text-h1 { font-family: var(--vhc-font-display); font-size: var(--vhc-fs-h1); line-height: var(--vhc-lh-heading); }
.vhc-text-h2 { font-family: var(--vhc-font-display); font-size: var(--vhc-fs-h2); line-height: var(--vhc-lh-heading); }
.vhc-text-h3 { font-family: var(--vhc-font-display); font-size: var(--vhc-fs-h3); line-height: var(--vhc-lh-heading); }
.vhc-text-h4 { font-family: var(--vhc-font-display); font-size: var(--vhc-fs-h4); line-height: var(--vhc-lh-heading); }
.vhc-text-body { font-family: var(--vhc-font-body); font-size: var(--vhc-fs-body); line-height: var(--vhc-lh-body); }
.vhc-text-lead { font-family: var(--vhc-font-body); font-size: var(--vhc-fs-lead); line-height: var(--vhc-lh-body); }
.vhc-text-caption { font-family: var(--vhc-font-body); font-size: var(--vhc-fs-caption); color: var(--vhc-color-text-muted); }
.vhc-text-label { font-family: var(--vhc-font-body); font-size: var(--vhc-fs-label); letter-spacing: var(--vhc-ls-label); text-transform: uppercase; }
.vhc-text-stat { font-family: var(--vhc-font-display); font-size: var(--vhc-fs-stat); font-variant-numeric: tabular-nums; line-height: 1.1; }

/* Arabic-locale pages: swap the body font family; line-height/letter-spacing
   already handled by the [lang="ar"] token overrides in vhc-tokens.css. */
html[lang="ar"] .vhc-text-display,
html[lang="ar"] .vhc-text-h1,
html[lang="ar"] .vhc-text-h2,
html[lang="ar"] .vhc-text-h3,
html[lang="ar"] .vhc-text-h4 {
	font-family: var(--vhc-font-arabic);
}
html[lang="ar"] .vhc-text-body,
html[lang="ar"] .vhc-text-lead,
html[lang="ar"] .vhc-text-caption {
	font-family: var(--vhc-font-arabic);
}
/**
 * VH Citizenship — Component Foundation
 * Implements VHC-P1-006 Part B / VHC-P2 §13: new, opt-in `.vhc-*` classes for
 * P3+ to build the real components on. Nothing here is applied to existing
 * markup — it is available for new/modified work per VHC-P1-010's
 * "Containers-first, tokens-only" Elementor governance.
 * Every rule uses tokens from vhc-tokens.css — no hardcoded colors/sizes.
 */

/* Buttons */
.vhc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vhc-space-2xs);
	font-family: var(--vhc-font-body);
	font-size: var(--vhc-fs-button);
	font-weight: 500;
	line-height: 1;
	padding: var(--vhc-space-sm) var(--vhc-space-md);
	border-radius: var(--vhc-radius-sm);
	border: var(--vhc-border-width) solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--vhc-duration-micro) var(--vhc-ease-out),
		color var(--vhc-duration-micro) var(--vhc-ease-out),
		border-color var(--vhc-duration-micro) var(--vhc-ease-out),
		transform var(--vhc-duration-micro) var(--vhc-ease-out);
	white-space: normal; /* buttons grow to fit translated/long text, VHC-P1-002 §6 */
}
.vhc-btn--primary {
	background-color: var(--vhc-color-accent-gold);
	color: var(--vhc-color-primary);
}
.vhc-btn--primary:hover {
	background-color: var(--vhc-color-accent-gold-muted);
}
/* --secondary/--ghost/--link use --vhc-color-text (not the fixed
   --vhc-color-primary) deliberately: --color-text is remapped by
   [data-vhc-surface="dark"] (vhc-tokens.css, Constitution Article 1.3),
   so these variants stay legible on both light and dark sections without
   a separate "on-dark" modifier class. --primary keeps working everywhere
   too since gold-on-anything reads fine, which is why it's the one used
   for the header/footer CTAs that sit directly on the dark surface. */
.vhc-btn--secondary {
	background-color: transparent;
	border-color: currentColor;
	color: var(--vhc-color-text);
}
.vhc-btn--secondary:hover {
	background-color: var(--vhc-color-text);
	color: var(--vhc-color-bg);
}
.vhc-btn--ghost {
	background-color: transparent;
	color: var(--vhc-color-text);
	padding-inline: var(--vhc-space-2xs);
}
.vhc-btn--ghost:hover {
	color: var(--vhc-color-accent-gold);
}
/* Tertiary-tier CTA: text + directional icon, no chrome — the funnel's
   lowest-pressure link-style call to action ("Explore all programmes →"),
   formalized from the pattern already used ad hoc in the mega menu and
   footer (VHC-P1-008 funnel-stage CTA hierarchy). */
.vhc-btn--link {
	background: none;
	border-color: transparent;
	color: var(--vhc-color-accent-gold);
	padding-inline: 0;
	gap: 0.35em;
}
.vhc-btn--link:hover {
	color: var(--vhc-color-accent-gold-muted);
	text-decoration: underline;
}
.vhc-btn--link .vhc-icon-directional {
	transition: transform var(--vhc-duration-micro) var(--vhc-ease-out);
}
.vhc-btn--link:hover .vhc-icon-directional {
	transform: translateX(0.2em);
}
html[dir="rtl"] .vhc-btn--link:hover .vhc-icon-directional {
	transform: translateX(-0.2em);
}

/* Disabled state — reduced-contrast, no pointer/hover affordance. Used
   for actions gated behind a precondition (e.g. a submit button mid-
   validation), not for permanently-unavailable options like the Arabic
   language toggle, which uses aria-disabled with its own "Soon" styling. */
.vhc-btn:disabled,
.vhc-btn[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* Links (inline text links, distinct from buttons) */
.vhc-link {
	color: var(--vhc-color-primary);
	text-decoration: underline;
	text-decoration-color: var(--vhc-color-accent-gold);
	text-underline-offset: 0.15em;
	transition: color var(--vhc-duration-micro) var(--vhc-ease-out);
}
.vhc-link:hover {
	color: var(--vhc-color-accent-gold);
}

/* CTA groups — a row of buttons that wraps gracefully, never overlapping (VHC-P1-002 §6) */
.vhc-cta-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vhc-space-sm);
	align-items: center;
}

/* Cards */
.vhc-card {
	background-color: var(--vhc-color-surface);
	border: var(--vhc-border-width) solid var(--vhc-color-border);
	border-radius: var(--vhc-radius-md);
	padding: var(--vhc-space-md);
	height: 100%; /* intrinsic equal-height via CSS Grid stretch, VHC-P1-002 §6 */
}
.vhc-card--elevated {
	box-shadow: var(--vhc-shadow-md);
	border-color: transparent;
}

/* Badges */
.vhc-badge {
	display: inline-flex;
	align-items: center;
	font-family: var(--vhc-font-body);
	font-size: var(--vhc-fs-label);
	letter-spacing: var(--vhc-ls-label);
	text-transform: uppercase;
	padding: var(--vhc-space-3xs) var(--vhc-space-xs);
	border-radius: var(--vhc-radius-pill);
	background-color: var(--vhc-color-surface-tint);
	color: var(--vhc-color-primary);
}
.vhc-badge--gold {
	background-color: var(--vhc-color-accent-gold);
	color: var(--vhc-color-primary);
}

/* Section labels (eyebrow text above a heading) */
.vhc-section-label {
	display: block;
	font-size: var(--vhc-fs-label);
	letter-spacing: var(--vhc-ls-label);
	text-transform: uppercase;
	color: var(--vhc-color-accent-gold);
	margin-block-end: var(--vhc-space-2xs);
}

/* Breadcrumbs — closes VHC-P0-007 §8's missing-breadcrumb gap, wired via
   Rank Math's rank_math_get_breadcrumbs() (functions.php, hooked to
   elementor/theme/after_do_header) rather than hand-authored per page, so
   BreadcrumbList schema (VHC-P1-007 §3) and the visible trail stay in
   sync automatically. Rank Math renders <p class="vhc-breadcrumbs"> with
   inline <a>/<span class="separator">/<span class="last"> — targeted
   directly, not nested divs. */
.vhc-breadcrumbs-bar {
	border-block-end: 1px solid var(--vhc-color-border);
	background-color: var(--vhc-color-surface);
}
.vhc-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vhc-space-3xs);
	font-size: var(--vhc-fs-caption);
	color: var(--vhc-color-text-muted);
	padding-block: var(--vhc-space-xs);
	margin: 0;
}
.vhc-breadcrumbs a {
	color: var(--vhc-color-text-muted);
	text-decoration: none;
}
.vhc-breadcrumbs a:hover {
	color: var(--vhc-color-primary);
	text-decoration: underline;
}
.vhc-breadcrumbs .last {
	color: var(--vhc-color-text);
	font-weight: 500;
}
.vhc-breadcrumbs .separator {
	display: inline-flex;
	color: var(--vhc-color-accent-gold);
	opacity: 0.7;
}
/* mirrors automatically under RTL since it's just inline flex + logical gap */

/* Surface panels (callouts, "important considerations" blocks per VHC-P1-006) */
.vhc-panel {
	background-color: var(--vhc-color-surface);
	border-inline-start: 3px solid var(--vhc-color-accent-gold);
	border-radius: var(--vhc-radius-sm);
	padding: var(--vhc-space-sm) var(--vhc-space-md);
}
.vhc-panel--warning {
	border-inline-start-color: var(--vhc-color-warning);
}

/* Tables (comparison table foundation, VHC-P1-006) */
.vhc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--vhc-fs-body);
}
.vhc-table th,
.vhc-table td {
	padding: var(--vhc-space-xs) var(--vhc-space-sm);
	border-block-end: var(--vhc-border-width) solid var(--vhc-color-border);
	text-align: start; /* logical — respects RTL automatically */
}
.vhc-table th {
	font-weight: 600;
	color: var(--vhc-color-primary);
}
.vhc-table--sticky-col th:first-child,
.vhc-table--sticky-col td:first-child {
	position: sticky;
	inset-inline-start: 0;
	background-color: var(--vhc-color-bg);
}

/* Accordion foundation (FAQ component, VHC-P1-006 — fixes the ARIA semantic
   split found in VHC-P0-010 §3: role/expanded state live on the actual
   focusable trigger element, not split across a wrapper and an inner link). */
.vhc-accordion-item {
	border-block-end: var(--vhc-border-width) solid var(--vhc-color-border);
}
/* Elementor's global Kit CSS (post-5.css) applies a default <button> padding/
   border (~1.75em/0.875em) that beats plain-class rules on specificity —
   confirmed bug during the VHC-P3 header rebuild (see vhc-header.css); any
   future <button>-based component needs !important on the properties the
   Kit also declares, or it silently inherits oversized Kit padding. */
.vhc-accordion-trigger {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: var(--vhc-space-sm);
	background: none !important;
	border: none !important;
	text-align: start;
	font-family: var(--vhc-font-body);
	font-size: var(--vhc-fs-body) !important;
	font-weight: 600;
	color: var(--vhc-color-primary);
	padding: var(--vhc-space-sm) 0 !important;
	cursor: pointer;
}
.vhc-accordion-trigger[aria-expanded="true"] .vhc-accordion-icon {
	transform: rotate(180deg);
}
.vhc-accordion-icon {
	transition: transform var(--vhc-duration-micro) var(--vhc-ease-out);
	flex-shrink: 0;
}
.vhc-accordion-panel {
	padding-block-end: var(--vhc-space-sm);
	line-height: var(--vhc-lh-body);
}
.vhc-accordion-panel[hidden] {
	display: none;
}

/* Icon treatment */
.vhc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--vhc-color-accent-gold);
}
.vhc-icon--circle {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: var(--vhc-color-surface-tint);
}
/**
 * VH Citizenship — Accessibility & Motion Foundation
 * Implements VHC-P1-009 §8 (accessibility) and VHC-P1-003 §3 (motion).
 * The focus system and reduced-motion rule apply GLOBALLY (safe — pure
 * accessibility improvements, not a visual redesign). The reveal/hover
 * motion primitives are new, opt-in classes for P3+ (per VHC-P2 §16 —
 * "do not add spectacular homepage animations yet").
 */

/* ---------------------------------------------------------------------
 * FOCUS SYSTEM — global, every focusable element (VHC-P1-009 §8, Constitution
 * Article 7.20). Uses :focus-visible so mouse users don't see a ring on
 * click, only keyboard users do — the correct modern pattern.
 * ------------------------------------------------------------------- */
:focus-visible {
	outline: 2px solid var(--vhc-color-focus-ring);
	outline-offset: 2px;
	border-radius: var(--vhc-radius-sm);
}

/* ---------------------------------------------------------------------
 * SKIP LINK — new addition (not a header redesign), injected via
 * wp_body_open() in functions.php. Visually hidden until focused.
 * ------------------------------------------------------------------- */
.vhc-skip-link {
	position: absolute;
	inset-block-start: -100px;
	inset-inline-start: 0;
	z-index: var(--vhc-z-toast);
	background-color: var(--vhc-color-primary);
	color: var(--vhc-color-text-inverse);
	padding: var(--vhc-space-xs) var(--vhc-space-sm);
	font-family: var(--vhc-font-body);
	font-size: var(--vhc-fs-body);
	text-decoration: none;
	border-radius: 0 0 var(--vhc-radius-sm) 0;
	transition: inset-block-start var(--vhc-duration-micro) var(--vhc-ease-out);
}
.vhc-skip-link:focus {
	inset-block-start: 0;
}

/* ---------------------------------------------------------------------
 * REDUCED MOTION — global override, respected without exception
 * (Constitution Article 8.22). This is a global safety net on top of
 * Elementor's own already-correct `.animated{animation:none!important}`
 * rule (VHC-P0-010 §3) — it also covers any new `.vhc-reveal`/`.vhc-hover-*`
 * primitives below.
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.vhc-reveal,
	.vhc-hover-lift,
	.vhc-hover-scale,
	*[class*="vhc-"] {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------
 * MOTION PRIMITIVES — Tier 1 (micro-interaction) and Tier 2 (entrance)
 * only, per VHC-P1-003 §3.1. Tier 3/4 (scroll storytelling, signature
 * hero moment) are explicitly P3+ scope, not built here.
 * ------------------------------------------------------------------- */

/* Tier 1 — micro-interactions (hover/focus primitives) */
.vhc-hover-lift {
	transition: transform var(--vhc-duration-micro) var(--vhc-ease-out);
}
.vhc-hover-lift:hover {
	transform: translateY(-2px);
}
.vhc-hover-scale {
	transition: transform var(--vhc-duration-micro) var(--vhc-ease-out);
}
.vhc-hover-scale:hover {
	transform: scale(1.02);
}

/* Tier 2 — entrance reveal (paired with an IntersectionObserver-driven
   `.is-visible` class added at implementation time, per VHC-P1-003 §3.2).
   RTL-safe: uses a plain opacity/translateY, not a directional slide, so
   it needs no mirroring — directional entrance variants are added at
   implementation time only where actually used.

   Progressive enhancement, gated on `.js` (added to <html> by an inline
   wp_head script, functions.php): content is visible by DEFAULT — the
   hidden-until-revealed state only applies once JS confirms it can also
   reveal it again. This avoids ever hiding content behind motion if JS
   fails to load, without needing a `no-js` class on <html> at all (no
   header.php edit required). */
.js .vhc-reveal {
	opacity: 0;
	transform: translateY(var(--vhc-reveal-distance));
	transition: opacity var(--vhc-duration-entrance) var(--vhc-ease-entrance),
		transform var(--vhc-duration-entrance) var(--vhc-ease-entrance);
}
.js .vhc-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.vhc-reveal-group > * {
	transition-delay: calc(var(--vhc-stagger-index, 0) * var(--vhc-stagger-step));
}

/* Belt-and-suspenders: if `.js` somehow ends up on <html> but the
   IntersectionObserver script itself fails after that point, content
   must still not be permanently invisible. */
.no-js .vhc-reveal {
	opacity: 1;
	transform: none;
}
/**
 * VH Citizenship — Forms Foundation
 * Implements VHC-P1-008 §3.2 / VHC-P2 §14. Targets Fluent Forms' real markup
 * classes directly (confirmed against the installed plugin's own CSS) so the
 * two existing, genuinely well-built forms (VHC-P0-009 §3.1, VHC-P0-010 §3 —
 * "Check My Eligibility", "Private Consultation Premium 3-Step") are
 * preserved exactly as-is structurally and simply re-skinned to the new
 * token system. No field, label, or validation logic is changed — only
 * presentation. RTL is inherited from Fluent Forms' own shipped RTL
 * stylesheets (fluent-forms-public-rtl.css) plus the logical properties
 * used throughout this file.
 */

.fluentform {
	font-family: var(--vhc-font-body);
	max-width: var(--vhc-width-form);
}
.fluentform.ff-form-full-width,
.fluentform[data-form-width="wide"] {
	max-width: var(--vhc-width-form-wide);
}
/* Multi-step forms (Fluent Forms' own .ff-form-has-steps marker) are not
   simple 1-column field stacks — this site's two multi-step forms
   ("Contact form" goal-selection grid, "Get a Consultation" 3-step form)
   use multi-column card/field grids that need the full column width, not
   the ~544px cap meant for a plain contact form. Confirmed live: without
   this, a 3-column goal-card grid rendered squeezed into roughly 40% of
   its available width with the rest empty.
   Fluent Forms puts .ff-form-has-steps on the inner <form>, not the outer
   .fluentform wrapper that actually carries the max-width — a plain
   compound selector (.fluentform.ff-form-has-steps) never matches since
   both classes are never on the same element. :has() targets the wrapper
   by its descendant instead (Baseline-supported across current browsers). */
.fluentform:has(.ff-form-has-steps) {
	max-width: none;
}

.fluentform .ff-el-group {
	margin-block-end: var(--vhc-space-md);
}

/* Labels — preserves the existing correct <label for> association
   (VHC-P0-010 §3); this only restyles appearance. */
.fluentform .ff-el-input--label label,
.fluentform .ff-el-form-check-label {
	font-family: var(--vhc-font-body);
	font-size: var(--vhc-fs-label);
	font-weight: 600;
	color: var(--vhc-color-text);
	margin-block-end: var(--vhc-space-3xs);
	display: inline-block;
}

/* Field heights/spacing — consistent across text/select/textarea inputs */
.fluentform .ff-el-form-control {
	width: 100%;
	min-height: 3rem;
	padding: var(--vhc-space-xs) var(--vhc-space-sm);
	font-family: var(--vhc-font-body);
	font-size: var(--vhc-fs-body);
	color: var(--vhc-color-text);
	background-color: var(--vhc-color-bg);
	border: var(--vhc-border-width) solid var(--vhc-color-border);
	border-radius: var(--vhc-radius-sm);
	transition: border-color var(--vhc-duration-micro) var(--vhc-ease-out),
		box-shadow var(--vhc-duration-micro) var(--vhc-ease-out);
}
.fluentform textarea.ff-el-form-control {
	min-height: 8rem;
}

/* Focus — consistent with the global focus system (vhc-a11y-motion.css),
   restated here with a subtle border/shadow since inputs benefit from a
   stronger visible state than the thin global outline alone. */
.fluentform .ff-el-form-control:focus-visible {
	border-color: var(--vhc-color-accent-gold);
	box-shadow: 0 0 0 3px var(--vhc-color-focus-ring);
	outline: none;
}

/* Validation errors */
.fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--vhc-color-error);
}
.fluentform .error {
	display: block;
	font-size: var(--vhc-fs-caption);
	color: var(--vhc-color-error);
	margin-block-start: var(--vhc-space-3xs);
}

/* Success state */
.fluentform .ff-message-success {
	background-color: var(--vhc-color-surface);
	border-inline-start: 3px solid var(--vhc-color-success);
	border-radius: var(--vhc-radius-sm);
	padding: var(--vhc-space-sm) var(--vhc-space-md);
	color: var(--vhc-color-text);
	font-family: var(--vhc-font-body);
}

/* Consent / privacy checkbox presentation — legible, not an afterthought */
.fluentform .ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	gap: var(--vhc-space-2xs);
	font-size: var(--vhc-fs-caption);
	font-weight: 400;
	color: var(--vhc-color-text-muted);
}
.fluentform .ff-el-form-check-label input[type="checkbox"] {
	margin-block-start: 0.2em;
	flex-shrink: 0;
}

/* Submit button — reuses the shared button tokens/component (vhc-components.css) */
.fluentform .ff_submit_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--vhc-font-body);
	font-size: var(--vhc-fs-button);
	font-weight: 500;
	padding: var(--vhc-space-sm) var(--vhc-space-lg);
	border-radius: var(--vhc-radius-sm);
	background-color: var(--vhc-color-accent-gold);
	color: var(--vhc-color-primary);
	border: none;
	cursor: pointer;
	transition: background-color var(--vhc-duration-micro) var(--vhc-ease-out),
		transform var(--vhc-duration-micro) var(--vhc-ease-out);
}
.fluentform .ff_submit_btn:hover {
	background-color: var(--vhc-color-accent-gold-muted);
	transform: translateY(-1px);
}

/* Responsive field rows — two-column field groups (e.g. First/Last name)
   collapse to one column below the point they'd become cramped, per
   VHC-P1-002 §6, rather than at a fixed Elementor breakpoint. */
.fluentform .ff-t-container-2-col,
.fluentform .ff-grid-2 {
	display: grid;
	gap: 0 var(--vhc-space-sm);
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

/* Phone field (country selector) container — foundation only; the actual
   qualification/consultation-form phone-country-selector component is
   built in the funnel work (VHC-P1-008 §3.2), not P2. */
.fluentform .ff-phone-container {
	display: flex;
	gap: var(--vhc-space-2xs);
}