/* ==========================================================================
   Texium Solutions — Design System
   Single source of truth for design tokens + global components.
   Header/footer stylesheets and Elementor content both consume these
   tokens. Do not declare new raw values in component files — add a
   token here first.
   ========================================================================== */

:root {
	/* ---- Color: brand (light mode) ---- */
	--texium-primary: #123B8F;
	--texium-primary-dark: #09275F;
	--texium-primary-light: #2F6BFF;

	--texium-accent: #00A9D6;
	--texium-accent-bright: #19C8F0;

	/* ---- Color: text (light mode) ---- */
	--texium-heading: #071A41;
	--texium-text: #16213D;
	--texium-text-muted: #64748B;
	--texium-text-inverse: #F5F9FF;
	--texium-text-inverse-muted: rgba(245, 249, 255, 0.72);

	/* ---- Color: surfaces (light mode) ---- */
	--texium-background: #FFFFFF;
	--texium-background-soft: #F5F8FC;
	--texium-background-alt: #F5F8FC;
	--texium-surface: #FFFFFF;
	--texium-surface-dark: #071A41;

	--texium-border: #DCE5F2;
	--texium-border-strong: rgba(18, 59, 143, 0.24);
	--texium-border-inverse: rgba(245, 249, 255, 0.16);

	--texium-success: #16A085;

	/* ---- Color: brand (dark mode) ---- */
	--texium-dark-primary: #2F6BFF;
	--texium-dark-primary-light: #4D8DFF;

	--texium-dark-accent: #00C8F0;
	--texium-dark-accent-bright: #35D9FF;

	/* ---- Color: surfaces (dark mode) ---- */
	--texium-dark-background: #050B18;
	--texium-dark-background-soft: #081326;

	--texium-dark-surface: #0B1930;
	--texium-dark-surface-elevated: #102340;

	--texium-dark-heading: #FFFFFF;
	--texium-dark-text: #F5F9FF;
	--texium-dark-text-muted: #9BAAC2;

	--texium-dark-border: #203555;

	/* ---- X motif ----
	   The X from the Texium logo, expressed as reusable gradient tokens.
	   Keep usage subtle: hero backgrounds, section shapes, image masks,
	   CTA backgrounds, dividers, glass surfaces, hover states. */
	--texium-x-blue: #123B8F;
	--texium-x-cyan: #00A9D6;
	--texium-x-bright: #19C8F0;

	--texium-x-gradient: linear-gradient(135deg, var(--texium-x-blue), var(--texium-x-cyan));
	--texium-x-gradient-premium: linear-gradient(135deg, var(--texium-x-blue), var(--texium-primary-light), var(--texium-x-cyan));
	--texium-x-gradient-dark: linear-gradient(135deg, var(--texium-x-blue), var(--texium-x-cyan), var(--texium-dark-accent-bright));

	/* ---- Color: glass (light mode) ---- */
	--texium-glass-background: rgba(255, 255, 255, 0.72);
	--texium-glass-background-dark: rgba(11, 25, 48, 0.65);
	--texium-glass-border: rgba(18, 59, 143, 0.10);
	--texium-glass-border-dark: rgba(0, 200, 240, 0.14);
	--texium-glass-blur: 20px;
	--texium-glass-shadow: 0 12px 32px rgba(7, 26, 65, 0.10);
	--texium-focus-ring: rgba(18, 59, 143, 0.14);
	--texium-accent-tint: rgba(0, 169, 214, 0.08);
	--texium-dot-color: rgba(18, 59, 143, 0.14);
	--texium-dot-size: 1.5px;
	--texium-dot-gap: 22px;

	/* ---- Mega menu / card system ----
	   Fixed palette for the Services/Resources/About Us mega menus and
	   the card-based widgets built alongside them (Sub-Services Grid,
	   Services Carousel). Deliberately separate from --texium-primary/
	   --texium-heading/--texium-border (close but not identical hex
	   values) so this system can be themed on its own without changing
	   those tokens' many other site-wide uses. */
	--texium-megacard-navy: #102A5C;
	--texium-megacard-blue: #165DCE;
	--texium-megacard-blue-dark: #0F46A0;
	--texium-megacard-soft-blue: #EAF5FC;
	--texium-megacard-white: #FFFFFF;
	--texium-megacard-border: #D9E5F2;
	--texium-megacard-desc: #667892;

	/* ---- Color: glass (dark mode) ---- */
	--texium-dark-glass-background: rgba(11, 25, 48, 0.65);
	--texium-dark-glass-border: rgba(0, 200, 240, 0.14);
	--texium-dark-glass-blur: 20px;

	/* ---- Typography: families ---- */
	--texium-font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--texium-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--texium-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

	/* ---- Typography: scale (fluid, clamps between mobile/desktop) ---- */
	--texium-font-size-display: clamp(2.75rem, 2rem + 3.2vw, 5rem);
	--texium-font-size-h1: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
	--texium-font-size-h2: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
	--texium-font-size-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
	--texium-font-size-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
	--texium-font-size-lg: 1.125rem;
	--texium-font-size-md: 1rem;
	--texium-font-size-sm: 0.875rem;
	--texium-font-size-xs: 0.75rem;

	/* ---- Typography: weights ---- */
	--texium-weight-regular: 400;
	--texium-weight-medium: 500;
	--texium-weight-semibold: 600;
	--texium-weight-bold: 700;

	/* ---- Typography: line-height / tracking ---- */
	--texium-leading-tight: 1.15;
	--texium-leading-heading: 1.25;
	--texium-leading-body: 1.65;
	--texium-tracking-tight: -0.02em;
	--texium-tracking-normal: 0;
	--texium-tracking-wide: 0.08em;

	/* ---- Layout ---- */
	--texium-container-width: 1280px;
	--texium-container-padding: clamp(1.25rem, 4vw, 3rem);

	/* ---- Spacing scale ---- */
	--texium-space-xs: 8px;
	--texium-space-sm: 12px;
	--texium-space-md: 16px;
	--texium-space-lg: 24px;
	--texium-space-xl: 32px;
	--texium-space-2xl: 48px;
	--texium-space-3xl: 64px;
	--texium-space-4xl: 96px;
	--texium-space-5xl: 128px;

	/* ---- Radius ---- */
	--texium-radius-sm: 8px;
	--texium-radius-md: 12px;
	--texium-radius-lg: 18px;
	--texium-radius-xl: 24px;
	--texium-radius-pill: 999px;

	/* ---- Shadows (light mode) ---- */
	--texium-shadow-sm: 0 4px 16px rgba(7, 26, 65, 0.06);
	--texium-shadow-md: 0 12px 32px rgba(7, 26, 65, 0.10);
	--texium-shadow-lg: 0 24px 60px rgba(7, 26, 65, 0.14);
	--texium-shadow-glow: 0 0 0 1px rgba(0, 169, 214, 0.25), 0 0 32px rgba(0, 169, 214, 0.18);

	/* ---- Shadows (dark mode) — deeper, controlled, never black-heavy ---- */
	--texium-dark-shadow-sm: 0 4px 16px rgba(2, 6, 16, 0.32);
	--texium-dark-shadow-md: 0 12px 32px rgba(2, 6, 16, 0.42);
	--texium-dark-shadow-lg: 0 24px 60px rgba(2, 6, 16, 0.52);

	/* ---- Motion ---- */
	--texium-transition-fast: 180ms ease;
	--texium-transition-normal: 280ms ease;
	--texium-transition-slow: 450ms ease;
	--texium-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	/* ---- Z-index scale ---- */
	--texium-z-header: 100;
	--texium-z-overlay: 200;
	--texium-z-modal: 300;
}

/* ==========================================================================
   Dark mode
   Light is the theme default regardless of OS preference. Dark mode is
   opt-in only, activated by the header toggle setting
   data-theme="dark" on <html> (see assets/js/theme.js). Remaps the
   semantic tokens above onto the dark palette so components (buttons,
   cards, glass, forms) need no dark-mode specific CSS of their own.
   ========================================================================== */

:root[data-theme='dark'] {
	--texium-primary: var(--texium-dark-primary);
	--texium-primary-dark: var(--texium-primary-light);
	--texium-primary-light: var(--texium-dark-primary-light);

	--texium-accent: var(--texium-dark-accent);
	--texium-accent-bright: var(--texium-dark-accent-bright);

	--texium-heading: var(--texium-dark-heading);
	--texium-text: var(--texium-dark-text);
	--texium-text-muted: var(--texium-dark-text-muted);

	--texium-background: var(--texium-dark-background);
	--texium-background-soft: var(--texium-dark-background-soft);
	--texium-background-alt: var(--texium-dark-background-soft);
	--texium-surface: var(--texium-dark-surface);
	--texium-surface-dark: var(--texium-dark-surface-elevated);

	--texium-border: var(--texium-dark-border);
	--texium-border-strong: rgba(0, 200, 240, 0.28);

	--texium-x-gradient: linear-gradient(135deg, var(--texium-x-blue), var(--texium-x-cyan), var(--texium-dark-accent-bright));

	--texium-glass-background: var(--texium-dark-glass-background);
	--texium-glass-border: var(--texium-dark-glass-border);
	--texium-glass-blur: var(--texium-dark-glass-blur);

	--texium-shadow-sm: var(--texium-dark-shadow-sm);
	--texium-shadow-md: var(--texium-dark-shadow-md);
	--texium-shadow-lg: var(--texium-dark-shadow-lg);

	--texium-focus-ring: rgba(0, 200, 240, 0.22);
	--texium-accent-tint: rgba(0, 200, 240, 0.10);
	--texium-dot-color: rgba(0, 200, 240, 0.16);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--texium-background);
	color: var(--texium-text);
	font-family: var(--texium-font-body);
	font-size: var(--texium-font-size-md);
	line-height: var(--texium-leading-body);
	font-weight: var(--texium-weight-regular);
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1,
h2,
.texium-h1,
.texium-h2 {
	font-family: var(--texium-font-heading);
	color: var(--texium-heading);
	font-weight: var(--texium-weight-bold);
	line-height: var(--texium-leading-heading);
	letter-spacing: var(--texium-tracking-tight);
	margin: 0 0 var(--texium-space-sm);
}

h3,
h4,
h5,
h6,
.texium-h3,
.texium-h4 {
	font-family: var(--texium-font-heading);
	color: var(--texium-heading);
	font-weight: var(--texium-weight-semibold);
	line-height: var(--texium-leading-heading);
	letter-spacing: var(--texium-tracking-tight);
	margin: 0 0 var(--texium-space-sm);
}

.texium-display {
	font-family: var(--texium-font-heading);
	font-size: var(--texium-font-size-display);
	font-weight: var(--texium-weight-bold);
	line-height: var(--texium-leading-tight);
	letter-spacing: var(--texium-tracking-tight);
	color: var(--texium-heading);
}

.texium-stat {
	font-family: var(--texium-font-heading);
	font-weight: var(--texium-weight-bold);
	line-height: var(--texium-leading-tight);
	letter-spacing: var(--texium-tracking-tight);
	color: var(--texium-heading);
}

h1,
.texium-h1 {
	font-size: var(--texium-font-size-h1);
}

h2,
.texium-h2 {
	font-size: var(--texium-font-size-h2);
}

h3,
.texium-h3 {
	font-size: var(--texium-font-size-h3);
}

h4,
.texium-h4 {
	font-size: var(--texium-font-size-h4);
}

p {
	margin: 0 0 var(--texium-space-sm);
	color: var(--texium-text);
	font-weight: var(--texium-weight-regular);
}

.texium-body-lg {
	font-size: var(--texium-font-size-lg);
	line-height: var(--texium-leading-body);
	font-weight: var(--texium-weight-regular);
}

.texium-body-sm {
	font-size: var(--texium-font-size-sm);
	line-height: var(--texium-leading-body);
	color: var(--texium-text-muted);
	font-weight: var(--texium-weight-regular);
}

.texium-body-medium {
	font-weight: var(--texium-weight-medium);
}

.texium-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--texium-space-xs);
	font-family: var(--texium-font-body);
	font-size: var(--texium-font-size-xs);
	font-weight: var(--texium-weight-semibold);
	letter-spacing: var(--texium-tracking-wide);
	text-transform: uppercase;
	color: var(--texium-primary);
	margin-bottom: var(--texium-space-sm);
}

.texium-eyebrow::before {
	content: '';
	width: 1.25rem;
	height: 1px;
	background: currentColor;
}

.texium-caption {
	font-size: var(--texium-font-size-xs);
	color: var(--texium-text-muted);
	line-height: var(--texium-leading-body);
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.texium-container {
	width: 100%;
	max-width: var(--texium-container-width);
	margin-inline: auto;
	padding-inline: var(--texium-container-padding);
}

.texium-section {
	padding-block: var(--texium-space-2xl);
}

/* ==========================================================================
   Buttons
   All buttons share radius, typography, spacing, and transition tokens.
   Variants only change color/surface treatment.
   ========================================================================== */

.texium-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--texium-space-xs);
	font-family: var(--texium-font-body);
	font-size: var(--texium-font-size-sm);
	font-weight: var(--texium-weight-semibold);
	letter-spacing: var(--texium-tracking-normal);
	line-height: 1;
	white-space: nowrap;
	padding: 0.9rem 1.75rem;
	border-radius: var(--texium-radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	transition: box-shadow var(--texium-transition-fast), background-color var(--texium-transition-fast),
		border-color var(--texium-transition-fast), color var(--texium-transition-fast);
}

.texium-btn:focus-visible {
	outline: 2px solid var(--texium-accent);
	outline-offset: 3px;
}

/* Shine sweep — a light band travels across the button on hover instead
   of any translate/scale movement. Shared by primary and secondary. */
.texium-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		115deg,
		transparent 30%,
		rgba(255, 255, 255, 0.35) 48%,
		rgba(255, 255, 255, 0.55) 50%,
		rgba(255, 255, 255, 0.35) 52%,
		transparent 70%
	);
	transform: translateX(-130%);
	pointer-events: none;
}

.texium-btn:hover::before {
	transform: translateX(130%);
	transition: transform var(--texium-transition-slow) var(--texium-ease-out);
}

.texium-btn > * {
	position: relative;
	z-index: 2;
}

/* Primary */
.texium-btn--primary {
	background: var(--texium-primary);
	color: var(--texium-text-inverse);
	box-shadow: var(--texium-shadow-sm);
}

.texium-btn--primary:hover {
	background: var(--texium-primary-light);
	box-shadow: var(--texium-shadow-md);
}

/* Secondary */
.texium-btn--secondary {
	background: transparent;
	color: var(--texium-heading);
	border-color: var(--texium-border-strong);
}

.texium-btn--secondary:hover {
	border-color: var(--texium-primary);
	color: var(--texium-primary);
}

.texium-btn--secondary::before {
	background: linear-gradient(
		115deg,
		transparent 30%,
		rgba(18, 59, 143, 0.08) 48%,
		rgba(0, 169, 214, 0.14) 50%,
		rgba(18, 59, 143, 0.08) 52%,
		transparent 70%
	);
}

/* Text / link */
.texium-btn--text {
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--texium-primary);
	font-weight: var(--texium-weight-semibold);
	gap: var(--texium-space-xs);
}

.texium-btn--text::after {
	content: '\2192';
	display: inline-block;
	transition: transform var(--texium-transition-fast);
}

.texium-btn--text:hover::after {
	transform: translateX(3px);
}

/* ==========================================================================
   X motif
   Reusable, restrained applications of the Texium logo's X gradient.
   Use for hero backgrounds, section shapes, dividers, hover accents —
   never as a large literal "X" glyph repeated across sections.
   ========================================================================== */

.texium-x-gradient-text {
	background: var(--texium-x-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.texium-x-divider {
	width: 2.5rem;
	height: 2px;
	background: var(--texium-x-gradient);
	border-radius: var(--texium-radius-pill);
}

.texium-x-glow {
	position: relative;
}

.texium-x-glow::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: var(--texium-x-gradient);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity var(--texium-transition-normal);
	pointer-events: none;
}

.texium-x-glow:hover::before {
	opacity: 1;
}

/* ==========================================================================
   Dotted pattern background
   Full-bleed, muted texture for section backgrounds (e.g. a hero
   Container). Apply directly to the section wrapper.

   Painted on a ::after pseudo-element (not ::before — Elementor's own
   .e-con::before rule sets `content: var(--background-overlay)`, which
   resolves to `none` when no Background Overlay is configured and wins
   the cascade, silently suppressing any ::before content added here).
   Positioned behind the section's real content (z-index: 0 vs 1), so
   the optional edge-fade mask only ever affects the decorative dots —
   never the buttons/text, which mask-image would otherwise also fade
   out if applied to the element itself.
   ========================================================================== */

.texium-pattern-dots {
	position: relative;
}

.texium-pattern-dots::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: radial-gradient(var(--texium-dot-color) var(--texium-dot-size), transparent var(--texium-dot-size));
	background-size: var(--texium-dot-gap) var(--texium-dot-gap);
	background-position: 0 0;
	background-repeat: repeat;
}

/* Fades the dots toward the edges instead of a hard-edged tile, so the
   pattern reads as an ambient texture rather than a repeating graphic.
   Applied only to the ::after layer, so it never touches real content. */
.texium-pattern-dots--fade::after {
	-webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
	mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
}

.texium-pattern-dots > * {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   Glass system
   Use sparingly: navigation overlays, floating elements, selected panels.
   ========================================================================== */

.texium-glass {
	background: var(--texium-glass-background);
	border: 1px solid var(--texium-glass-border);
	backdrop-filter: blur(var(--texium-glass-blur));
	-webkit-backdrop-filter: blur(var(--texium-glass-blur));
	box-shadow: var(--texium-glass-shadow);
	border-radius: var(--texium-radius-lg);
}

.texium-glass--dark {
	background: var(--texium-glass-background-dark);
	border-color: var(--texium-glass-border-dark);
	color: var(--texium-text-inverse);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.texium-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--texium-space-sm);
	background: var(--texium-surface);
	border: 1px solid var(--texium-border);
	border-radius: var(--texium-radius-lg);
	padding: var(--texium-space-lg);
	box-shadow: var(--texium-shadow-sm);
	overflow: hidden;
	isolation: isolate;
	transition: transform var(--texium-transition-normal), box-shadow var(--texium-transition-normal),
		border-color var(--texium-transition-normal);
}

.texium-card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		115deg,
		transparent 30%,
		rgba(0, 169, 214, 0.1) 48%,
		rgba(0, 169, 214, 0.16) 50%,
		rgba(0, 169, 214, 0.1) 52%,
		transparent 70%
	);
	transform: translateX(-130%);
	pointer-events: none;
}

.texium-card:hover::before {
	transform: translateX(130%);
	transition: transform var(--texium-transition-slow) var(--texium-ease-out);
}

.texium-card > * {
	position: relative;
	z-index: 2;
}

.texium-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--texium-shadow-lg);
	border-color: var(--texium-border-strong);
}

.texium-card__icon {
	width: 2.75rem;
	height: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--texium-radius-md);
	background: var(--texium-background-alt);
	color: var(--texium-primary);
}

.texium-card__title {
	font-family: var(--texium-font-heading);
	font-size: var(--texium-font-size-h4);
	color: var(--texium-heading);
	margin: 0;
}

.texium-card__body {
	font-size: var(--texium-font-size-sm);
	color: var(--texium-text-muted);
	margin: 0;
}

.texium-card--glass {
	background: var(--texium-glass-background);
	border-color: var(--texium-glass-border);
	backdrop-filter: blur(var(--texium-glass-blur));
	-webkit-backdrop-filter: blur(var(--texium-glass-blur));
}

/* ==========================================================================
   Forms (base — Elementor Form widget inherits these)
   ========================================================================== */

.texium-site input[type='text'],
.texium-site input[type='email'],
.texium-site input[type='tel'],
.texium-site input[type='url'],
.texium-site textarea,
.texium-site select {
	width: 100%;
	font-family: var(--texium-font-body);
	font-size: var(--texium-font-size-sm);
	color: var(--texium-text);
	background: var(--texium-surface);
	border: 1px solid var(--texium-border-strong);
	border-radius: var(--texium-radius-sm);
	padding: 0.85rem 1rem;
	transition: border-color var(--texium-transition-fast), box-shadow var(--texium-transition-fast);
}

.texium-site input:focus,
.texium-site textarea:focus,
.texium-site select:focus {
	outline: none;
	border-color: var(--texium-primary);
	box-shadow: 0 0 0 3px var(--texium-focus-ring);
}

/* ==========================================================================
   Inline SVG illustrations (see [texium_svg])
   ========================================================================== */

.texium-svg {
	width: 100%;
}

.texium-svg svg {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   Motion / reveal utilities
   ========================================================================== */

.texium-reveal {
	opacity: 0;
	transform: translateY(16px);
	filter: blur(10px);
	transition:
		opacity var(--texium-transition-slow),
		transform var(--texium-transition-slow),
		filter var(--texium-transition-slow);
}

.texium-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}

/* Section-level blurred reveal. Applied to every top-level content
   section by theme.js. The blur is softer and the travel shorter than
   the per-item .texium-reveal, since a whole section moving far reads
   as sluggish; `will-change` is dropped once revealed so long pages do
   not hold a compositor layer per section.

   Sections start visible and are only hidden once JS confirms it will
   animate them, so content is never stranded invisible if the script
   fails to load or IntersectionObserver is unavailable. */

.texium-section-reveal {
	opacity: 0;
	transform: translateY(24px);
	filter: blur(12px);
	will-change: opacity, transform, filter;
	transition:
		opacity 700ms var(--texium-ease-out),
		transform 700ms var(--texium-ease-out),
		filter 700ms var(--texium-ease-out);
}

.texium-section-reveal.is-visible {
	opacity: 1;
	transform: none;
	filter: blur(0);
	will-change: auto;
}

.texium-skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	z-index: var(--texium-z-modal);
	background: var(--texium-primary);
	color: var(--texium-text-inverse);
	padding: var(--texium-space-xs) var(--texium-space-sm);
	border-radius: var(--texium-radius-sm);
}

.texium-skip-link:focus {
	left: var(--texium-space-sm);
	top: var(--texium-space-sm);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.texium-reveal,
	.texium-section-reveal {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

/* ==========================================================================
   Responsive container padding safety
   ========================================================================== */

@media (max-width: 782px) {
	.texium-section {
		padding-block: var(--texium-space-xl);
	}
}