/*
Theme Name: Elxao
Theme URI: https://elxao.com
Description: Custom editorial theme for Elxao - Global Marketing Operations. Features GSAP animations, smooth scrolling, and sophisticated typography.
Version: 1.0.0
Author: ELXAO
Author URI: https://elxao.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elxao
Tags: custom-design, editorial, creative, one-page

This theme requires:
- WordPress 5.0 or higher
- PHP 7.4 or higher
*/

/*
 * All styles are loaded inline in the templates for performance.
 * This file is required by WordPress for theme recognition.
 */

/* ==========================================================
   GLOBAL RESET
   ========================================================== */

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

html {
	min-height: 100%;
	position: relative;
	width: 100%;
	overflow-x: visible;
	/* Without this, an unstyled/transparent root paints its canvas using
	   the OS's prefers-color-scheme instead of this site's own light
	   design — on iOS in Dark Mode that canvas defaults to black, which
	   Safari also draws into during overscroll bounce and its automatic
	   toolbar tinting, regardless of an explicit <meta name="theme-color">
	   override. Declaring the site as light and giving the canvas its own
	   real white background (not just "transparent") stops the OS default
	   from ever showing through, on any page. */
	color-scheme: light;
	background: var(--white, #ffffff);
}

body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	position: relative;
	background: transparent;
	width: 100%;
	overflow-x: visible;
	padding-bottom: var(--elxao-footer-reveal-height);
}

/* Footer reveal effect uses a dynamic measured height. */
:root {
	--elxao-footer-reveal-height: 0px;
}

/* CONTENT LAYER — always above the fixed footer */
.elxao-page-layer {
	position: relative;
	z-index: 1;
	background: var(--white);
	min-height: 100vh;
	overflow-x: clip;
	padding-bottom: clamp(180px, 22vh, 320px);
}

/* Fallback for older browsers: keep horizontal overflow contained without impacting sticky in modern browsers. */
@supports not (overflow: clip) {
	.elxao-page-layer { overflow-x: hidden; }
}

/* ==========================================================
   STANDARD PAGES (default page.php)
   Ensures normal typography and avoids fixed-header overlap.
   ========================================================== */

.elxao-std-page {
	padding-top: calc(64px + var(--wp-admin--admin-bar--height, 0px));
	padding-left: var(--margin);
	padding-right: var(--margin);
	padding-bottom: clamp(180px, 22vh, 320px);
	font-family: var(--font);
	color: var(--black);
}

.elxao-std-page__inner {
	max-width: 860px;
	margin: 0 auto;
}

.elxao-std-page h1,
.elxao-std-page h2,
.elxao-std-page h3 {
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 28px 0 12px 0;
}

.elxao-std-page h1 { font-size: clamp(32px, 4vw, 56px); }
.elxao-std-page h2 { font-size: clamp(20px, 2.2vw, 28px); }
.elxao-std-page h3 { font-size: 18px; }

.elxao-std-page p,
.elxao-std-page li {
	font-size: 16px;
	line-height: 1.7;
	letter-spacing: -0.01em;
	color: var(--grey);
}

.elxao-std-page p { margin: 0 0 14px 0; }
.elxao-std-page ul,
.elxao-std-page ol { margin: 0 0 16px 20px; }

.elxao-std-page a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ==========================================================
   SHARED TOKENS + GRID + CANONICAL FOOTER
   Ensures all pages match the front-page footer.
   ========================================================== */

/* Regular (100–499): covers normal, light and medium weights */
@font-face {
	font-family: 'ELXAO Space';
	src:
		url('assets/fonts/elxao-space.woff2') format('woff2'),
		url('assets/fonts/elxao-space.ttf') format('truetype');
	font-weight: 100 499;
	font-style: normal;
	font-display: swap;
	unicode-range: U+00A0, U+202F, U+2009, U+200A;
}

/* Bold (500–900): covers semibold, bold, extrabold, black weights */
@font-face {
	font-family: 'ELXAO Space';
	src:
		url('assets/fonts/elxao-space-bold.woff2') format('woff2'),
		url('assets/fonts/elxao-space-bold.ttf') format('truetype');
	font-weight: 500 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+00A0, U+202F, U+2009, U+200A;
}

:root {
	--font: 'ELXAO Space', 'Helvetica Neue', 'HelveticaNeue', 'Helvetica Neue LT Pro', Helvetica, Arial, sans-serif;
	--font-mono: 'Helvetica Neue', 'HelveticaNeue', 'Helvetica Neue LT Pro', Helvetica, Arial, sans-serif;
	--elxao-logo-tracking: 0.18em;
	--black: #0B0B0B;
	--white: #FFFFFF;
	--grey: #5A5A5A;
	--grey-rule: #E8E8E8;
	--bg-alt: #F7F7F7;
	--margin: clamp(24px, 5vw, 64px);
	--col-gap: clamp(16px, 2vw, 32px);
	--max-width: 1440px;
	--duration-fast: 0.3s;
	--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================
   MONEY TYPOGRAPHY (shared across calculators)
   Prevents currency wrapping/splitting under external CSS.
   ========================================================== */

.elxao-money {
	display: inline-block !important;
	white-space: nowrap !important;
	letter-spacing: normal !important;
	/* Make U+202F visibly readable even in Helvetica-like stacks. */
	word-spacing: 0.14em !important;
	/* Force the space-only font to actually be used for U+202F/U+00A0 glyphs. */
	font-family: 'ELXAO Space', 'Helvetica Neue', 'HelveticaNeue', 'Helvetica Neue LT Pro', Helvetica, Arial, sans-serif !important;
}

.elxao-money-amount,
.elxao-money-currency {
	display: inline !important;
	white-space: nowrap !important;
	letter-spacing: normal !important;
	font-family: inherit !important;
}

/* Calculator result rows can inherit aggressive editorial letter-spacing; neutralize it here. */
.elxao-ads-result,
.elxao-seo-result,
.elxao-social-result,
.elxao-website-result,
.elxao-crm-result,
.elxao-branding-result,
.elxao-analytics-result,
.elxao-quote-result {
	letter-spacing: normal !important;
	word-spacing: normal !important;
}

/* ==========================================================
   CALCULATOR RESULTS — consistent color + alignment
   ========================================================== */

:root {
	--elxao-calculator-result-label: var(--grey, #5A5A5A);
	--elxao-calculator-result-value: var(--black, #141413);
	--elxao-calculator-result-max-width: 560px;
	--elxao-calculator-result-row-padding: 6px;
	--elxao-calculator-result-row-gap: 12px;
	--elxao-calculator-result-inline-gap: 10px;
	--elxao-calculator-field-border: var(--grey-rule, #E8E8E8);
	--elxao-calculator-chip-bg: #ffffff;
	--elxao-calculator-chip-border: var(--grey-rule, #E8E8E8);
	--elxao-calculator-chip-text: var(--black, #141413);
}

/* Keep result blocks left-aligned and not stretched too wide (reduces huge space-between gaps). */
.elxao-ads-wrapper #elxao-ads-result-content,
.elxao-seo-wrapper #elxao-seo-result-content,
.elxao-social-wrapper #elxao-social-result-content,
.elxao-website-wrapper #elxao-website-result-content,
.elxao-crm-wrapper #elxao-crm-result-content,
.elxao-branding-wrapper #elxao-branding-result-content,
.elxao-analytics-wrapper #elxao-analytics-result-content,
.elxao-quote-wrapper #elxao-quote-result-content {
	text-align: left !important;
	max-width: var(--elxao-calculator-result-max-width);
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Slightly tighter vertical rhythm for results. */
.elxao-ads-result,
.elxao-seo-result,
.elxao-social-result,
.elxao-website-result,
.elxao-crm-result,
.elxao-branding-result,
.elxao-analytics-result,
.elxao-quote-result {
	margin-top: 24px !important;
	padding-top: 16px !important;
}

/* Standard row spacing across calculators that use price rows. */
.elxao-ads-wrapper .elxao-ads-price-row,
.elxao-seo-wrapper .elxao-seo-price-row,
.elxao-social-wrapper .elxao-social-price-row,
.elxao-website-wrapper .elxao-website-price-row,
.elxao-crm-wrapper .elxao-crm-price-row,
.elxao-branding-wrapper .elxao-branding-price-row,
.elxao-analytics-wrapper .elxao-analytics-price-row {
	padding: var(--elxao-calculator-result-row-padding) 0 !important;
	gap: var(--elxao-calculator-result-row-gap);
}

/* Left-align both label + value within rows (no "space-between" look). */
.elxao-ads-wrapper .elxao-ads-price-row,
.elxao-seo-wrapper .elxao-seo-price-row,
.elxao-social-wrapper .elxao-social-price-row,
.elxao-website-wrapper .elxao-website-price-row,
.elxao-crm-wrapper .elxao-crm-price-row,
.elxao-branding-wrapper .elxao-branding-price-row,
.elxao-analytics-wrapper .elxao-analytics-price-row {
	justify-content: flex-start !important;
	align-items: baseline !important;
	gap: var(--elxao-calculator-result-inline-gap) !important;
	flex-wrap: wrap;
}

.elxao-ads-wrapper .elxao-ads-price-label,
.elxao-seo-wrapper .elxao-seo-price-label,
.elxao-social-wrapper .elxao-social-price-label,
.elxao-website-wrapper .elxao-website-price-label,
.elxao-crm-wrapper .elxao-crm-price-label,
.elxao-branding-wrapper .elxao-branding-price-label,
.elxao-analytics-wrapper .elxao-analytics-price-label {
	flex: 0 0 auto;
}

.elxao-ads-wrapper .elxao-ads-price-value,
.elxao-seo-wrapper .elxao-seo-price-value,
.elxao-social-wrapper .elxao-social-price-value,
.elxao-website-wrapper .elxao-website-price-value,
.elxao-crm-wrapper .elxao-crm-price-value,
.elxao-branding-wrapper .elxao-branding-price-value,
.elxao-analytics-wrapper .elxao-analytics-price-value {
	flex: 0 0 auto;
	text-align: left !important;
}

.elxao-ads-wrapper .elxao-ads-price-row:last-child,
.elxao-seo-wrapper .elxao-seo-price-row:last-child,
.elxao-social-wrapper .elxao-social-price-row:last-child,
.elxao-website-wrapper .elxao-website-price-row:last-child,
.elxao-crm-wrapper .elxao-crm-price-row:last-child,
.elxao-branding-wrapper .elxao-branding-price-row:last-child,
.elxao-analytics-wrapper .elxao-analytics-price-row:last-child {
	padding-top: 10px !important;
}

/* Unified label/value colors. */
.elxao-ads-wrapper .elxao-ads-price-label,
.elxao-seo-wrapper .elxao-seo-price-label,
.elxao-social-wrapper .elxao-social-price-label,
.elxao-website-wrapper .elxao-website-price-label,
.elxao-crm-wrapper .elxao-crm-price-label,
.elxao-branding-wrapper .elxao-branding-price-label,
.elxao-analytics-wrapper .elxao-analytics-price-label,
.elxao-quote-wrapper .elxao-quote-price-label,
.elxao-quote-wrapper .elxao-quote-breakdown-row {
	color: var(--elxao-calculator-result-label) !important;
}

.elxao-ads-wrapper .elxao-ads-price-value,
.elxao-seo-wrapper .elxao-seo-price-value,
.elxao-social-wrapper .elxao-social-price-value,
.elxao-website-wrapper .elxao-website-price-value,
.elxao-crm-wrapper .elxao-crm-price-value,
.elxao-branding-wrapper .elxao-branding-price-value,
.elxao-analytics-wrapper .elxao-analytics-price-value,
.elxao-quote-wrapper .elxao-quote-breakdown-row.fee,
.elxao-quote-wrapper .elxao-quote-price,
.elxao-quote-wrapper .elxao-quote-delivery strong {
	color: var(--elxao-calculator-result-value) !important;
}

/* Quote calculator: left-align the "total" and "delivery" blocks to match other calculators. */
.elxao-quote-wrapper .elxao-quote-total,
.elxao-quote-wrapper .elxao-quote-delivery {
	text-align: left !important;
}

.elxao-quote-wrapper .elxao-quote-result-content {
	gap: 12px !important;
}

/* Quote breakdown rows: align fee/value to the left (no space-between). */
.elxao-quote-wrapper .elxao-quote-breakdown-row {
	justify-content: flex-start !important;
	align-items: baseline;
	gap: var(--elxao-calculator-result-inline-gap);
	flex-wrap: wrap;
}

.elxao-quote-wrapper .elxao-quote-breakdown-row > span:last-child {
	margin-left: 0 !important;
	text-align: left !important;
}

/* ==========================================================
   CALCULATOR MULTI-SELECTS — consistent border + chips
   Ads/SEO use custom classes; Quote uses generic .elxao-multiselect.
   ========================================================== */

.elxao-ads-wrapper .elxao-ads-multiselect-selected,
.elxao-seo-wrapper .elxao-seo-multiselect-selected,
.elxao-quote-wrapper .elxao-multiselect-selected {
	border-color: var(--elxao-calculator-field-border) !important;
	border-radius: 0 !important;
	background: #ffffff !important;
	padding: 10px 14px !important;
	min-height: 42px;
}

.elxao-ads-wrapper .elxao-ads-multiselect-selected:hover,
.elxao-seo-wrapper .elxao-seo-multiselect-selected:hover,
.elxao-quote-wrapper .elxao-multiselect-selected:hover {
	border-color: var(--black, #141413) !important;
}

.elxao-seo-wrapper .elxao-seo-multiselect-wrapper.is-open .elxao-seo-multiselect-selected,
.elxao-ads-wrapper .elxao-ads-multiselect.is-open .elxao-ads-multiselect-selected,
.elxao-quote-wrapper .elxao-multiselect.is-open .elxao-multiselect-selected {
	border-color: var(--black, #141413) !important;
	box-shadow: none !important;
}

.elxao-ads-wrapper .elxao-ads-multiselect-dropdown,
.elxao-seo-wrapper .elxao-seo-multiselect-dropdown,
.elxao-quote-wrapper .elxao-multiselect-dropdown {
	border-color: var(--elxao-calculator-field-border) !important;
	border-radius: 0 !important;
}

.elxao-ads-wrapper .elxao-ads-multiselect-placeholder,
.elxao-seo-wrapper .elxao-seo-multiselect-placeholder,
.elxao-quote-wrapper .elxao-multiselect-placeholder {
	color: var(--grey, #5A5A5A) !important;
}

/* Selected entities (chips/tags) */
.elxao-ads-wrapper .elxao-ads-multiselect-tag,
.elxao-seo-wrapper .elxao-seo-multiselect-tag,
.elxao-quote-wrapper .elxao-multiselect-tag {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 4px 8px !important;
	background: var(--elxao-calculator-chip-bg) !important;
	border: 1px solid var(--elxao-calculator-chip-border) !important;
	color: var(--elxao-calculator-chip-text) !important;
	border-radius: 0 !important;
	font-size: 12px !important;
	font-weight: 500 !important;
}

.elxao-ads-wrapper .elxao-ads-multiselect-tag .tag-label,
.elxao-seo-wrapper .elxao-seo-multiselect-tag .tag-label,
.elxao-quote-wrapper .elxao-multiselect-tag .tag-label {
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.elxao-ads-wrapper .elxao-ads-multiselect-tag-remove,
.elxao-seo-wrapper .elxao-seo-multiselect-tag-remove,
.elxao-quote-wrapper .elxao-multiselect-tag-remove {
	color: var(--grey, #5A5A5A) !important;
	opacity: 1 !important;
	font-size: 14px !important;
}

.elxao-ads-wrapper .elxao-ads-multiselect-tag-remove:hover,
.elxao-seo-wrapper .elxao-seo-multiselect-tag-remove:hover,
.elxao-quote-wrapper .elxao-multiselect-tag-remove:hover {
	color: #dc2626 !important;
}

/* Spacing is now embedded in markup (copyable); keep pseudo-elements off to avoid duplicates. */
.elxao-money.is-suffix .elxao-money-currency::before,
.elxao-money.is-prefix .elxao-money-currency::after {
	content: "" !important;
}

/*
  Some browsers render U+202F extremely thin (especially between digits).
  When we wrap those spaces in JS (result blocks only), give them a stable width.
*/
.elxao-ads-result .elxao-fr-space,
.elxao-seo-result .elxao-fr-space,
.elxao-social-result .elxao-fr-space,
.elxao-website-result .elxao-fr-space,
.elxao-crm-result .elxao-fr-space,
.elxao-branding-result .elxao-fr-space,
.elxao-analytics-result .elxao-fr-space,
.elxao-quote-result .elxao-fr-space {
	display: inline-block;
	width: 0.16em;
	white-space: nowrap;
	letter-spacing: 0 !important;
}

/* ==========================================================
   HEADER — matches main page behavior
   ========================================================== */

.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	height: clamp(54px, calc(0.25vw + 53px), 58px);
	background: transparent;
	mix-blend-mode: difference;
	font-family: var(--font);
	font-weight: 400;
	line-height: 1.2;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body.admin-bar .header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.header,
.header *,
.header a,
.header .logo,
.header .nav a {
	color: #FFFFFF !important;
}

/* Prevent page-level link styling from leaking into the header (e.g., underline defaults on some templates). */
.header a,
.header a:hover,
.header a:focus,
.header a:active {
	text-decoration: none !important;
}

.header .grid {
	height: 100%;
	align-items: center;
	grid-template-columns: auto 1fr;
}

.header .logo {
	font-size: clamp(22px, calc(0.57vw + 20px), 31px);
	font-weight: 400;
	/* Was -0.03em — actively tightening, same touching-letters issue as the
	   homepage hero wordmark. Opened up by the same +0.03em. */
	letter-spacing: 0em;
	text-transform: none;
	font-kerning: normal;
	grid-column: 1;
}


.header .nav {
	grid-column: 2;
	display: flex;
	gap: 0;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: nowrap;
	white-space: nowrap;
}

.header .nav a {
	position: relative;
	display: inline-block;
	font-size: clamp(22px, calc(0.57vw + 20px), 31px);
	font-weight: 400 !important;
	letter-spacing: -0.03em;
	margin-left: clamp(8px, 1vw, 15px);
	opacity: 1;
	transition: opacity 0.25s ease;
}

.header .nav a:first-child {
	margin-left: 0;
}

.header .nav a:hover { opacity: 0.6; }

/* Shared header markup includes 2 spans; keep only the normal text (matches front-page behavior). */
.header .nav .nav-text-hover { display: none; }
.header .nav .nav-text { display: inline; }

/* Cart link - text based, count appears inline */
.header .nav .cart-link {
	position: relative;
	isolation: isolate;
}

/* Hamburger Menu Button */
.btn-hamburger {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	position: relative;
	z-index: 1001;
	width: 32px;
	height: 32px;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
}

.hamburger-line {
	display: block;
	width: 18px;
	height: 1px;
	background: #FFFFFF;
	transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-hamburger[aria-expanded="true"] .hamburger-line:first-child {
	transform: translateY(3px) rotate(45deg);
}

.btn-hamburger[aria-expanded="true"] .hamburger-line:last-child {
	transform: translateY(-3px) rotate(-45deg);
}

/* Mobile Navigation Drawer */
.mobile-nav-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-nav-overlay.open {
	opacity: 1;
	visibility: visible;
}

.mobile-nav {
	position: fixed;
	top: 0;
	right: 0;
	width: min(420px, 100vw);
	max-width: 420px;
	height: 100%;
	background: var(--white);
	z-index: 1000;
	padding: 24px;
	box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
	transform: translateX(100%);
	will-change: transform;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	overflow-y: auto;
}

.mobile-nav.open {
	transform: translateX(0);
}

/* The site sets no global body font-family (every section declares its
   own — see the .elxao-login-modal fix below for the same issue), so on
   pages whose own template never sets one on <body> (e.g. page-contact.php),
   this drawer's inherited text falls back to the browser's default serif
   instead of the brand font. Mobile-nav lives outside every page template's
   own content wrapper, so it can't rely on any of those per-page rules —
   it needs its own, same as the login modal. */
.mobile-nav,
.mobile-nav * {
	font-family: var(--font);
}

.mobile-nav-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--grey-rule);
}

.mobile-nav-title {
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--grey);
}

.mobile-nav-close {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	position: relative;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.close-line {
	position: absolute;
	width: 16px;
	height: 1px;
	background: var(--black);
	transition: all 0.2s ease;
}

.close-line:first-child {
	transform: rotate(45deg);
}

.close-line:last-child {
	transform: rotate(-45deg);
}

.mobile-nav-close:hover .close-line {
	opacity: 0.5;
}

.mobile-nav-links {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.mobile-nav-links a {
	color: var(--black) !important;
	text-shadow: none !important;
	mix-blend-mode: normal !important;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -0.01em;
	padding: 16px 0;
	border-bottom: 1px solid var(--grey-rule);
	transition: opacity 0.2s ease;
	text-decoration: none !important;
}

.mobile-nav-links a:first-child {
	border-top: 1px solid var(--grey-rule);
}

.mobile-nav-links a:hover {
	opacity: 0.5;
}

/* Mobile nav language switcher */
.mobile-nav-lang {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--grey-rule);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.05em;
}

.mobile-lang-link {
	text-decoration: none;
	color: var(--black);
	transition: opacity 0.2s ease;
}

.mobile-lang-link:hover {
	opacity: 0.6;
}

.mobile-lang-link.active {
	font-weight: 500;
}

.mobile-lang-divider {
	color: var(--grey);
}

@media (max-width: 1024px) {
	.header .nav { display: none; }
	.header .grid {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.btn-hamburger { display: flex; }
}

@media (max-width: 640px) {
	.header { height: 54px; }
	.header .nav { display: none; }
	.header .grid {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.header .logo { font-size: 22px; }
	.btn-hamburger { display: flex; }
}

.grid {
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--margin);
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--col-gap);
}

/* ==========================================================
   FOOTER — matches front-page
   ========================================================== */

.footer-wrapper {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 0; /* Footer sits behind content */
	height: auto;
	pointer-events: none;
}

.footer {
	background: var(--black);
	color: var(--white);
	padding: 80px 0 48px;
	position: relative;
	height: auto;
	font-family: var(--font);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	pointer-events: auto; /* Footer links are clickable */
}

.footer::before {
	display: none;
}

.footer .grid {
	row-gap: 28px;
	position: relative;
	z-index: 1;
}

.footer-brand {
	grid-column: 1 / 4;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.footer-logo {
	/* Matched to .header .logo exactly, per request — was font-size:18px,
	   font-weight:500, letter-spacing:var(--elxao-logo-tracking) (0.18em),
	   text-transform:uppercase. */
	font-size: clamp(22px, calc(0.57vw + 20px), 31px);
	font-weight: 400;
	letter-spacing: 0em;
	text-transform: none;
	font-kerning: normal;
	margin: 0;
}

.footer-tagline {
	font-size: 14px;
	color: rgba(255,255,255,0.5);
	line-height: 1.7;
	max-width: 280px;
}

.footer-links {
	grid-column: 10 / 13;
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-end;
}

.footer-col h5 {
	display: none;
}

.footer-col ul {
	list-style: none;
	display: flex;
	flex-direction: row;
	gap: 14px;
	align-items: center;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
}

.footer-col li {
	position: relative;
	margin: 0;
	padding: 0;
}

.footer-col li + li {
	padding-left: 14px;
}

.footer-col li + li::before {
	content: '';
	display: none;
}

.footer-col a {
	font-family: var(--font-mono);
	font-size: 11px;
	color: rgba(255,255,255,0.4);
	letter-spacing: 0.02em;
	transition: color var(--duration-fast) var(--ease-out-quint);
	text-decoration: none;
	white-space: nowrap;
}

.footer-col a:hover {
	color: rgba(255,255,255,0.9);
}

.footer-newsletter {
	grid-column: 1 / 13;
	display: block;
	padding: clamp(56px, 7vh, 92px) 0 0 0;
	border: none;
	border-top: 1px solid rgba(255,255,255,0.08);
	border-radius: 0;
	background: transparent;
	position: relative;
	overflow: visible;
}

.footer-newsletter::after {
	display: none;
}

.newsletter-bar {
	display: grid;
	grid-template-columns: 2.1fr 1fr;
	grid-template-rows: auto auto;
	column-gap: clamp(24px, 5vw, 84px);
	row-gap: 14px;
	align-items: baseline;
}

.newsletter-copy .t-label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.35);
	margin: 0 0 20px 0;
	font-weight: 400;
}

.newsletter-title {
	margin: 0;
	font-family: var(--font);
	font-weight: 300;
	font-size: clamp(13px, 1.55vw, 22px);
	letter-spacing: -0.03em;
	line-height: 1.12;
	color: rgba(255,255,255,1);
	text-wrap: balance;
	grid-column: 1;
	grid-row: 1;
	max-width: 100%;
}

.newsletter-desc {
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255,255,255,0.55);
	letter-spacing: -0.005em;
	font-weight: 300;
	margin: 16px 0 0 0;
	max-width: 48ch;
}

.newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: stretch;
	max-width: 100%;
	margin: 0;
	position: relative;
}

.newsletter-form::before,
.newsletter-form > label:not(.elxao-sr-only) {
	display: none;
}

.elxao-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Ensure the RGPD consent label inside the form remains visible. */
.newsletter-form label.newsletter-consent-label {
	display: flex;
}

.newsletter-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 28px;
	position: relative;
	grid-column: 2;
	grid-row: 1;
	padding-bottom: 0;
}

.newsletter-rule {
	height: 1px;
	background: rgba(255,255,255,0.28);
	transition: background-color 220ms var(--ease-out-quint);
}

.newsletter-rule--title {
	grid-column: 1;
	grid-row: 2;
}

.newsletter-rule--form {
	grid-column: 2;
	grid-row: 2;
}

.newsletter-form:focus-within .newsletter-rule {
	background: rgba(255,255,255,0.6);
}

.newsletter-field {
	position: relative;
	flex: 1;
	min-width: min(340px, 100%);
	padding-bottom: 0;
}

/* Keep focus feedback subtle + editorial: only brighten the bar rule. */
.newsletter-field::before,
.newsletter-field::after {
	display: none;
}

.newsletter-input {
	width: 100%;
	padding: 0 0 4px 0;
	border-radius: 0;
	border: none;
	border-bottom: 1px solid transparent;
	background: transparent;
	color: var(--white);
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0;
	line-height: 1.15;
	text-align: left;
	transition: color 220ms var(--ease-out-quint);
	-webkit-appearance: none;
	appearance: none;
}

.newsletter-input:focus {
	outline: none;
	border-color: transparent;
	box-shadow: none;
	background: transparent;
}

.newsletter-input::placeholder {
	color: rgba(255,255,255,0.42);
	font-weight: 300;
}

.newsletter-submit {
	margin-top: 0;
	padding: 0 0 4px 0;
	background: transparent;
	color: rgba(255,255,255,0.95);
	border: none;
	border-radius: 0;
	cursor: pointer;
	font-size: 11px;
	font-family: var(--font-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 400;
	box-shadow: none;
	transition: opacity 200ms var(--ease-out-quint);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.newsletter-submit:hover {
	opacity: 0.72;
}

.newsletter-submit:active {
	opacity: 0.6;
}

.newsletter-submit:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.newsletter-submit-arrow {
	opacity: 0.75;
	transform: translateX(0);
	transition: transform 240ms var(--ease-out-quint), opacity 240ms var(--ease-out-quint);
}

.newsletter-submit:hover .newsletter-submit-arrow {
	opacity: 1;
	transform: translateX(4px);
}

/* Newsletter RGPD Consent Checkbox */
.newsletter-consent {
	grid-column: 2;
	grid-row: 3;
	margin: 10px 0 0 0;
}

.newsletter-consent-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: 11px;
	line-height: 1.6;
	color: rgba(255,255,255,0.45);
	letter-spacing: 0.005em;
}

.newsletter-consent-label input[type="checkbox"] {
	margin-top: 2px;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	accent-color: var(--white);
	cursor: pointer;
	/* Safari can add a default border/inner shadow when combined with global form styles.
	   Keep native checkbox UI but strip any extra chrome. */
	-webkit-appearance: checkbox;
	appearance: checkbox;
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
	outline: none;
}

.newsletter-consent-label span {
	flex: 1;
}

.newsletter-consent-label a {
	color: rgba(255,255,255,0.7);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.newsletter-consent-label a:hover {
	color: var(--white);
}

.newsletter-status {
	grid-column: 2;
	grid-row: 4;
	margin: 10px 0 0 0;
	min-height: 1.2em;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	color: rgba(255,255,255,0.35);
}

.newsletter-form.is-success .newsletter-field::before {
	background: rgba(255,255,255,0.9);
	transform: scaleX(1);
}

.newsletter-form.is-error .newsletter-field::before {
	background: rgba(255,120,120,0.9);
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.newsletter-rule,
	.newsletter-submit-arrow {
		transition: none;
	}
}

@media (min-width: 1025px) {
	.newsletter-bar {
		grid-template-columns: minmax(0, 1fr) minmax(420px, 640px);
		column-gap: clamp(18px, 3vw, 64px);
	}
}

.footer-bottom {
	grid-column: 1 / 13;
	padding-top: 72px;
	border-top: 1px solid rgba(255,255,255,0.06);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.footer-bottom p {
	font-family: var(--font-mono);
	font-size: 10px;
	color: rgba(255,255,255,0.28);
	letter-spacing: 0.04em;
	margin: 0;
}

.footer-coords {
	font-family: var(--font-mono);
	font-size: 9px;
	color: rgba(255,255,255,0.22);
	letter-spacing: 0.1em;
}

/* Match the front-page footer layout on tablet/mobile for all pages */
@media (max-width: 1024px) {
	.footer { padding: 120px 0 60px; }
	.footer-brand { grid-column: 1 / -1; }
	.footer-links {
		grid-column: 1 / -1;
		align-items: flex-start;
	}
	.footer-newsletter {
		grid-column: 1 / -1;
		padding: 56px 0 0 0;
	}
	.newsletter-bar {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto auto;
		column-gap: 0;
		row-gap: 14px;
		align-items: start;
	}
	.newsletter-title {
		grid-column: 1;
		grid-row: 1;
		max-width: none;
		white-space: normal;
	}
	.newsletter-row {
		grid-column: 1;
		grid-row: 2;
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}
	.newsletter-rule--title {
		display: none;
	}
	.newsletter-rule--form {
		grid-column: 1;
		grid-row: 3;
	}
	.newsletter-consent {
		grid-column: 1;
		grid-row: 4;
		margin-top: 0;
	}
	.newsletter-status {
		grid-column: 1;
		grid-row: 5;
		margin-top: 0;
	}
	.footer-bottom {
		flex-direction: column;
		gap: 16px;
		align-items: flex-start;
	}
}

@media (max-width: 768px) {
	.footer-logo { display: none; }
	.footer-links { align-items: flex-start; }
	.footer-col ul {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
	}
	.footer-col a {
		white-space: nowrap;
		font-size: 10px;
	}
	.footer-col li + li { padding-left: 0; }
	.footer-col li + li::before { content: none; }

	.footer-newsletter {
		grid-template-columns: 1fr;
	}

	.footer-bottom {
		flex-direction: column;
		gap: 12px;
		align-items: flex-start;
	}
}

/* ==========================================================
   LANGUAGE SWITCHER (WPML ready)
   Aligned with header logo using --margin for editorial harmony
   ========================================================== */

.lang-switcher {
	position: fixed;
	bottom: clamp(28px, 4vh, 40px);
	left: var(--margin);
	font-family: var(--font);
	font-size: clamp(12px, calc(0.2vw + 11px), 14px);
	font-weight: 400;
	letter-spacing: 0.12em;
	display: flex;
	gap: 6px;
	align-items: baseline;
	z-index: 1000;
	mix-blend-mode: difference;
}

/* All lang-switcher elements must be white (inverts to black on light backgrounds) */
.lang-switcher,
.lang-switcher *,
.lang-link,
.lang-divider {
	color: #FFFFFF !important;
}

.lang-link {
	text-decoration: none;
	transition: opacity 0.3s ease;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.lang-link:hover {
	opacity: 0.5;
}

.lang-link.active {
	font-weight: 500;
}

.lang-divider {
	opacity: 0.4;
	font-weight: 300;
}

/* Keep visible on mobile but adjust positioning */
@media (max-width: 768px) {
	.lang-switcher {
		bottom: calc(20px + env(safe-area-inset-bottom));
		left: calc(var(--margin) + env(safe-area-inset-left));
		font-size: 11px;
		letter-spacing: 0.1em;
		z-index: 9999;
		mix-blend-mode: normal;
		padding: 10px 16px;
		border: 1px solid rgba(0,0,0,0.08);
		background: rgba(255,255,255,0.95);
		border-radius: 999px;
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		box-shadow: 0 2px 12px rgba(0,0,0,0.06);
	}

	.lang-switcher,
	.lang-switcher *,
	.lang-link,
	.lang-divider {
		color: #0B0B0B !important;
	}
	
	.lang-divider {
		opacity: 0.3;
	}
}

/* ==========================================================
   COOKIE CONSENT - Hide manage consent button on mobile
   ========================================================== */
@media (max-width: 768px) {
	/* Hide cookie consent management button on mobile after user decision */
	#cmplz-manage-consent,
	.cmplz-manage-consent {
		display: none !important;
	}
}

/* ==========================================================
   LOGIN MODAL — Full-screen editorial overlay
   No image. Same restrained type system as the Solutions/About
   pages: thin hairlines, uppercase micro-labels, generous white
   space, black-on-white.
   ========================================================== */

body.elxao-modal-open {
    overflow: hidden;
}

/* The site sets no global body font-family (every section declares its own),
   so without this the modal's inherited text (labels, links, footer copy)
   falls back to the browser's default serif. Same override used by .solutions-hero. */
.elxao-login-modal,
.elxao-login-modal * {
    font-family: var(--font);
}

.elxao-login-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease-out-quint), visibility 0s linear 0.4s;
}

.elxao-login-modal.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.4s var(--ease-out-quint), visibility 0s linear 0s;
}

.elxao-login-modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--white);
}

.elxao-login-modal-panel {
    position: relative;
    height: 100%;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 6vw, 64px);
    overflow-y: auto;
}

/* Large, thin cross treated as a signature mark rather than a utility icon. */
.elxao-login-modal-close {
    position: fixed;
    top: clamp(0px, 1vw, 12px);
    right: clamp(-8px, 2.2vw, 28px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--black);
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.5s var(--ease-out-quint);
}

.elxao-login-modal-close:hover {
    opacity: 0.4;
    transform: rotate(90deg);
}

.elxao-login-modal-inner {
    width: 100%;
    max-width: 400px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s var(--ease-out-quint), transform 0.5s var(--ease-out-quint);
}

.elxao-login-modal.is-open .elxao-login-modal-inner {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

/* Header */
.elxao-login-modal .elxao-auth-header {
    margin-bottom: 48px;
    text-align: left;
}

.elxao-auth-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(11,11,11,0.4);
    margin-bottom: 22px;
}

.elxao-auth-title {
    margin: 0 0 18px 0;
    font-size: clamp(40px, 5.5vw, 60px);
    font-weight: 400;
    letter-spacing: -0.045em;
    line-height: 1;
    color: var(--black);
    font-family: var(--font);
}

.elxao-auth-subtitle {
    margin: 0;
    max-width: 340px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(11,11,11,0.55);
    letter-spacing: -0.01em;
    font-weight: 300;
}

/* Notice / error message */
.elxao-auth-notice {
    margin: 0 0 32px 0;
    padding: 14px 0;
    border: none;
    border-bottom: 1px solid rgba(11,11,11,0.08);
    background: transparent;
    color: var(--black);
    font-size: 14px;
    letter-spacing: -0.01em;
    line-height: 1.5;
    font-weight: 400;
    text-align: left;
}

.elxao-auth-notice--error {
    color: #b44;
}

.elxao-auth-notice--success {
    color: rgba(11,11,11,0.65);
}

/* Form */
.elxao-form-field {
    position: relative;
    margin-bottom: 28px;
}

.elxao-form-field label {
    display: block;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(11,11,11,0.45);
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.elxao-form-field.is-focused label {
    color: var(--black);
}

.elxao-form-field input[type="text"],
.elxao-form-field input[type="password"] {
    width: 100%;
    padding: 14px 0;
    border: none;
    border-bottom: 1px solid rgba(11,11,11,0.12);
    border-radius: 0;
    background: transparent;
    color: var(--black);
    font-family: var(--font);
    font-size: 17px;
    letter-spacing: -0.01em;
    outline: none;
    transition: border-color 0.35s ease;
}

.elxao-form-field input::placeholder {
    color: rgba(11,11,11,0.25);
    font-weight: 300;
}

.elxao-form-field input:focus {
    border-bottom-color: var(--black);
}

.elxao-form-field input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.elxao-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
}

.elxao-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.elxao-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--black);
    cursor: pointer;
}

.elxao-checkbox span {
    font-size: 14px;
    color: rgba(11,11,11,0.6);
    letter-spacing: -0.01em;
    font-weight: 300;
}

.elxao-auth-link {
    font-size: 14px;
    color: rgba(11,11,11,0.5);
    text-decoration: none;
    letter-spacing: -0.01em;
    font-weight: 300;
    transition: color 0.25s ease;
}

.elxao-auth-link:hover {
    color: var(--black);
}

/* Submit button */
.elxao-auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 18px 32px;
    border: 1px solid var(--black);
    background: var(--black);
    color: var(--white);
    border-radius: 0;
    font-family: var(--font);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.35s var(--ease-out-quint);
}

.elxao-auth-submit svg {
    transition: transform 0.35s var(--ease-out-quint);
}

.elxao-auth-submit:hover {
    background: transparent;
    color: var(--black);
}

.elxao-auth-submit:hover svg {
    transform: translateX(4px);
}

.elxao-auth-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Footer */
.elxao-auth-footer {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(11,11,11,0.06);
    text-align: left;
}

.elxao-auth-footer p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(11,11,11,0.5);
    letter-spacing: -0.01em;
    font-weight: 300;
}

.elxao-auth-footer a {
    color: var(--black);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: opacity 0.25s ease;
}

.elxao-auth-footer a:hover {
    opacity: 0.6;
}

/* Tablet */
@media (max-width: 900px) {
    .elxao-login-modal-panel {
        padding: 40px 24px 56px;
        align-items: flex-start;
    }

    .elxao-login-modal-inner {
        margin-top: 120px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .elxao-login-modal .elxao-auth-header {
        margin-bottom: 36px;
    }

    .elxao-auth-title {
        font-size: 34px;
    }

    .elxao-login-modal-close {
        top: clamp(0px, 1vw, 8px);
        right: clamp(-8px, 1vw, 4px);
        width: 76px;
        height: 76px;
    }

    .elxao-login-modal-close svg {
        width: 52px;
        height: 52px;
    }

    .elxao-form-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* ===========================================================
   RTL LAYOUT FIXES (Arabic, Hebrew)
   ===========================================================
   The site had zero RTL-specific CSS anywhere prior to this block —
   dir="rtl" was only ever used to flip document-level text direction,
   so every LTR-authored physical-position/spacing rule below was
   silently broken for ar/he. Scoped entirely under [dir="rtl"] (or via
   logical properties that auto-adapt) so LTR languages are untouched. */

/* --- Header nav: item spacing used physical margin-left, which stays
   on the geometric left even though flexbox reverses the nav's visual
   item order under RTL — the gap ends up on the wrong side of each
   item (adjacent items read as run-together, e.g. "Solutions"/"About").
   margin-inline-start is direction-aware and needs no [dir="rtl"]
   override — it already resolves to the correct physical side for
   both LTR and RTL. */
.header .nav a {
    margin-left: 0;
    margin-inline-start: clamp(8px, 1vw, 15px);
}

.header .nav a:first-child {
    margin-inline-start: 0;
}

/* --- Editorial text blocks (Solutions page chapter copy, and any other
   section reusing this component): text-align was hardcoded left, so
   ar/he paragraphs kept correct right-to-left glyph order within each
   line but the block itself stayed left-aligned — every line starts at
   a different point instead of sharing one consistent right edge. */
[dir="rtl"] .editorial-copy-block {
    text-align: right;
}

/* --- Marquee / ticker bands (homepage .marquee-section, Solutions page
   .solutions-proof-band — both reuse the generic .marquee-* class names
   — the Contact page's own bespoke .contact-watermark-* markup, and the
   "Get in touch" CTA's .slider-label) all repeat their content across
   display:flex containers, animated with GSAP xPercent transforms or a
   translateX() @keyframes loop. Flexbox auto-reverses child order AND
   flips which physical edge is flex-start under RTL, but the transform
   math (GSAP xPercent / @keyframes translateX) has no idea that
   happened, so the loop's spatial assumptions break — visually this is
   the "text arrives, then disappears instead of running constantly"
   symptom. Originally this list only covered .slider-label itself and
   the generic .marquee-* names; two real gaps caused the fix to not
   fully take hold:
     1. .slider-label-container (the *parent* of .slider-label) is
        itself a flex container with a single flex item — under RTL
        that item flex-starts from the right instead of the left, so
        .slider-label's own (now-LTR-internal) content sat mostly
        outside the visible overflow:hidden window regardless of the
        child-level fix.
     2. Contact's marquee never uses the .marquee-* names at all — it's
        independently built as .contact-watermark-track /
        .contact-watermark-collection, so the fix above never matched
        it in the first place.
   None of these containers hold real prose needing RTL flow (each item
   is a short, independent, usually-repeated label), so locking them to
   direction:ltr removes the mismatch without affecting how Arabic/
   Hebrew glyphs render inside each item. */
[dir="rtl"] .marquee-scroll,
[dir="rtl"] .marquee-collection,
[dir="rtl"] .marquee-content,
[dir="rtl"] .slider-label,
[dir="rtl"] .slider-label-container,
[dir="rtl"] .contact-watermark-track,
[dir="rtl"] .contact-watermark-collection {
    direction: ltr;
}

/* --- Slider drag-arrow icon: a static SVG authored pointing right (the
   LTR "drag right to unlock" affordance). The actual drag direction is
   now mirrored for RTL (see initSliderButton() in solutions-service-
   types.php), so the icon needs to visually point left to match. A
   horizontal flip works regardless of the exact path data. */
[dir="rtl"] .slider-arrow svg {
    transform: scaleX(-1);
}

/* --- "Get in touch" CTA slider: the round handle and the scrolling
   label next to it are positioned with physical left/margin-left,
   assuming handle-on-left, text-starting-after-it. Mirrored for RTL so
   the handle sits on the right and the label starts from the right. */
[dir="rtl"] .slider-handle {
    left: auto;
    right: 6px;
}

[dir="rtl"] .slider-label-container {
    margin-left: 0;
    margin-right: calc(var(--handle-size) + 8px);
}

/* --- Slider "fill" overlay: a child of .slider-handle, anchored to the
   track's left edge (left:0) with a matching left-square/right-round
   border-radius, that reveals itself via its own translateX as the
   handle drags — creating a trailing fill bar behind the handle. Mirrored
   to anchor right instead, with the rounded corner swapped to the
   leading (left) edge, since progress now runs right-to-left. The
   translateX values themselves are computed by the RTL-aware JS in
   initSliderButton() (front-page.php), not by CSS. */
[dir="rtl"] .slider-overlay {
    left: auto;
    right: 0;
    border-radius: 1000px 0 0 1000px;
}

/* --- Contact page split-panel: the two panels are grid columns 1/2,
   which correctly swap visual sides under RTL grid auto-placement (no
   fix needed there — growing grid column 1 still grows the "email"
   panel, just now on the right). The absolutely-positioned divider
   between them does NOT participate in grid reversal, so its
   hardcoded left:62.5%/37.5% (authored for "email panel is visually on
   the left") point at the wrong panel once RTL flips which side email
   actually renders on. Swapped so the divider still tracks whichever
   panel is actually active. */
[dir="rtl"] .contact-split[data-active="email"] .contact-divider {
    left: 37.5%;
}

[dir="rtl"] .contact-split[data-active="call"] .contact-divider {
    left: 62.5%;
}