/* Site styles — extracted from index.html. The noscript-scoped
x-dc{display:none} rule deliberately stays inline: unscoped here
it would hide the app for everyone. */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* NOTE: --lx-site-bg is consumed by an inline style= in index.html, so its
url() resolves against the DOCUMENT, not this stylesheet — keep it
document-relative (assets/img/...). legal.css is the opposite case: its
variable is used inside legal.css itself, so it stays ../img/... */
:root {
--lx-bg: #FBFCFF;
--lx-alt: linear-gradient(180deg, rgba(244,247,255,0.55) 0%, rgba(251,252,255,0.62) 100%);
--lx-text: #0d1220;
--lx-text2: #4a5570;
--lx-text3: #5b6580;
--lx-gold-dim: #7A5D18; /* was #A8842F = 3.41:1 on --lx-bg (fails WCAG AA).
#7A5D18 = 6.01:1 and is the value [data-lx-theme="light"]
already uses, so no new colour enters the palette. */
--lx-surface: rgba(255, 255, 255, 0.78);
--lx-surface-soft: rgba(255, 255, 255, 0.72);
--lx-surface-solid: #ffffff;
--lx-border: rgba(2, 33, 121, 0.08);
--lx-border-soft: rgba(2, 33, 121, 0.07);
--lx-border-input: rgba(2, 33, 121, 0.12);
--lx-nav: rgba(251, 252, 255, 0.82);
--lx-inset: inset 0 1px 0 #fff;
--lx-site-bg: url('assets/img/hero/bg-light.jpg');
--lx-site-op: 0.13;
--lx-ctrl: #4a5570;
--lx-brand: #022179;
--lx-eyebrow: 12.5px;
--lx-eyebrow-w: 700;
--lx-link: 11px;
--lx-cap: 10.5px;
--lx-name: 0.98rem;
}
[data-lx-theme="light"] { --lx-gold-dim: #7A5D18; }
[data-lx-theme="dark"] {
--lx-bg: #0e1017;
--lx-alt: linear-gradient(180deg, rgba(21,25,38,0.6) 0%, rgba(14,16,23,0.68) 100%);
--lx-text: #EEF2FF;
--lx-text2: rgba(232, 238, 255, 0.68);
--lx-text3: rgba(232, 238, 255, 0.58);
--lx-gold-dim: #D9B863;
--lx-surface: rgba(255, 255, 255, 0.05);
--lx-surface-soft: rgba(255, 255, 255, 0.038);
--lx-surface-solid: #171a25;
--lx-border: rgba(211, 223, 255, 0.11);
--lx-border-soft: rgba(211, 223, 255, 0.09);
--lx-border-input: rgba(211, 223, 255, 0.14);
--lx-nav: rgba(14, 16, 23, 0.82);
--lx-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);
--lx-site-bg: url('assets/img/hero/bg-dark.jpg');
--lx-site-op: 0.17;
--lx-ctrl: rgba(232, 238, 255, 0.66);
--lx-brand: #8FB0FF;
}
img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
body { background: var(--lx-bg, #FBFCFF); font-family: 'DM Sans', sans-serif; -webkit-font-smoothing: antialiased; transition: background 0.5s ease; }
a { color: #022179; text-decoration: none; }
a:hover { color: #C9A227; }
:root { color-scheme: light; }
[data-lx-theme="dark"] { color-scheme: dark; }
option { background: #ffffff; color: #0d1220; }
[data-lx-theme="dark"] option { background: #171a25; color: #EEF2FF; }
/* Contact sits on the deep-navy field, so it carries the dark token set */
#contact {
--lx-text: #ffffff;
--lx-text2: rgba(232, 238, 255, 0.7);
--lx-text3: rgba(232, 238, 255, 0.6);
--lx-gold-dim: #E4C77A;
--lx-brand: #EBEFFF;
--lx-surface: rgba(255, 255, 255, 0.06);
--lx-surface-soft: rgba(255, 255, 255, 0.05);
--lx-border: rgba(211, 223, 255, 0.16);
--lx-border-soft: rgba(211, 223, 255, 0.12);
--lx-border-input: rgba(211, 223, 255, 0.2);
--lx-inset: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#contact input::placeholder, #contact textarea::placeholder { color: rgba(232, 238, 255, 0.42); }
#contact select { color: #EBEFFF; }
.lx-badge-logo { mix-blend-mode:normal!important;filter:none!important;background:rgba(255,255,255,0.95);padding:4px 6px;border-radius:3px;box-shadow:0 8px 22px -14px rgba(2,11,38,0.8); }
[data-lx-theme="dark"] a { color: #A8C4FF; }
[data-lx-theme="dark"] a:hover { color: #F2DCA4; }
/* Arabic legibility: Cairo needs more weight and no latin letter-spacing */
[dir="rtl"] {
--lx-eyebrow: 16px;
--lx-eyebrow2: 15px;
--lx-btn: 14px;
--lx-eyebrow-w: 700;
--lx-link: 13px;
--lx-cap: 12.5px;
--lx-name: 17.5px;
}
[dir="rtl"] * { letter-spacing: normal !important; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { font-weight: 600 !important; }
[dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] a, [dir="rtl"] span,
[dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] textarea,
[dir="rtl"] select, [dir="rtl"] option, [dir="rtl"] label { font-weight: 400 !important; }
[dir="rtl"] p { line-height: 2.05; }
[dir="rtl"] [style*="text-transform: uppercase"] { font-weight: 700 !important; }
[dir="rtl"] [style*="text-transform:uppercase"] { font-weight: 700 !important; }
[dir="rtl"] .lx-fab { right: auto !important; left: 32px !important; }
::selection { background: #D9B863; color: #04113a; }
@keyframes lx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes lx-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes lx-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
img, canvas, video { max-width: 100%; }
.lx-sr-only { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }
.lx-form-status { min-height:22px; font-size:0.9rem; line-height:1.6; color:#F7E6B8; }
@media (max-width: 1180px) {
.lx-navrow { flex-wrap: wrap !important; height: auto !important; padding-top: 14px !important; padding-bottom: 14px !important; row-gap: 12px !important; justify-content: center !important; }
.lx-navlist { flex-wrap: wrap !important; justify-content: center !important; }
}
@media (max-width: 1024px) {
.lx-2col { grid-template-columns: 1fr !important; gap: 52px !important; }
.lx-3col { grid-template-columns: 1fr 1fr !important; gap: 44px !important; }
/* was 92px — more than the 76px desktop uses. The ladder now only ever
tightens as the viewport narrows: 76 (desktop) -> 64 -> 48. */
section { padding-top: 64px !important; padding-bottom: 64px !important; }
/* the logo strip is one row, not a content section */
.lx-technologies { padding-top: 22px !important; padding-bottom: 22px !important; }
}
@media (max-width: 760px) {
.lx-wrap { padding-left: 20px !important; padding-right: 20px !important; }
.lx-3col { grid-template-columns: 1fr !important; gap: 40px !important; }
section { padding-top: 48px !important; padding-bottom: 48px !important; }
.lx-technologies { padding-top: 18px !important; padding-bottom: 18px !important; }
.lx-navrow { display:grid !important; grid-template-columns:auto minmax(0,1fr) auto !important; justify-items:center !important; padding:12px 14px !important; row-gap:10px !important; }
.lx-navrow > .lx-badge-logo:first-child { grid-column:1; grid-row:1; height:34px !important; }
.lx-navrow > a { grid-column:2; grid-row:1; }
.lx-navrow > a img { height:48px !important; max-width:170px !important; }
.lx-navrow > .lx-badge-logo:last-child { grid-column:3; grid-row:1; height:34px !important; }
.lx-navlist { grid-column:1 / -1; width:100%; gap:8px !important; flex-wrap:nowrap !important; justify-content:center !important; overflow-x:auto; overflow-y:hidden; padding:3px 2px 6px; scrollbar-width:none; }
.lx-navlist::-webkit-scrollbar { display:none; }
.lx-navlist:first-of-type { grid-row:2; }
.lx-navlist:nth-of-type(2) { grid-row:3; }
.lx-navlist li { flex:0 0 auto; }
.lx-navlist a { font-size:12.5px !important; }
.lx-navlist a[href="{{ infoLinks.contact }}"] { padding:9px 12px !important; }
.lx-navlist > li > button { padding:9px 11px !important; }
.lx-navlist li div button { width:24px !important; height:24px !important; }
#contact .lx-form-card { padding:30px 22px !important; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior:auto !important; animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}
.lx-content-section{padding:110px 0;position:relative;background:transparent}
.lx-content-section>.lx-wrap{max-width:1320px;margin:auto;padding:0 32px}
.lx-reading{max-width:1000px!important}
.lx-heading{font-size:clamp(1.7rem,3.2vw,2.9rem);font-weight:300;line-height:1.45;color:var(--lx-text);margin-bottom:28px;text-wrap:pretty}
.lx-copy{font-size:1rem;font-weight:400;line-height:1.95;color:var(--lx-text2);margin:0 0 24px;overflow-wrap:break-word;white-space:pre-line}
.lx-content-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:26px;margin-top:38px}
.lx-content-card{padding:34px;border:1px solid var(--lx-border);border-radius:3px;background:var(--lx-surface);box-shadow:0 30px 60px -40px rgba(2,33,121,.4);backdrop-filter:blur(16px)}
.lx-content-card h3{font-size:1.08rem;line-height:1.5;color:var(--lx-text);margin-bottom:18px}
.lx-dark{background:linear-gradient(150deg,#022179,#04113a 55%,#020b26);--lx-text:#fff;--lx-text2:#d3dfff;--lx-surface:rgba(255,255,255,.06);--lx-border:rgba(211,223,255,.2)}
.lx-action{display:inline-flex;align-items:center;padding:16px 26px;background:linear-gradient(135deg,#f7e6b8,#d9b863 42%,#a8842f);border-radius:2px;color:#04113a!important;font-weight:600;line-height:1.6;white-space:normal}
.lx-logo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:24px;margin:38px 0 65px}
.lx-client{padding:20px;background:#fff;border:1px solid var(--lx-border);border-radius:3px;text-align:center;color:#022179}
.lx-client img{display:block;width:100%;height:160px;object-fit:contain;margin:0 auto 12px}
.lx-client figcaption{font-size:.9rem;line-height:1.6;overflow-wrap:anywhere}
.lx-footer-link{color:#d3dfff!important;font-size:.94rem;line-height:1.6}
.lx-pause{border:1px solid #d9b863;background:#04113a;color:#f7e6b8;padding:8px 12px;border-radius:2px;font:inherit;font-size:.8rem;cursor:pointer}
#home [class="lx-wrap"]{align-items:center;flex-wrap:wrap}
#home{min-height:840px!important;height:auto!important;padding-top:100px!important;padding-bottom:150px!important}
.lx-slide h1{line-height:1.35!important}.lx-slide p{font-weight:400!important}
.lx-navlist{flex-wrap:wrap!important;overflow:visible!important}.lx-navrow{height:auto!important;min-height:84px}
nav{position:relative!important}
p{overflow-wrap:break-word}main{outline:none}main>div,main>section{min-width:0}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4{line-height:1.6!important}
[dir=rtl] p{line-height:2.05!important}a[href^="mailto:"],a[href^="tel:"]{direction:ltr;unicode-bidi:isolate}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #c9a227!important;outline-offset:4px;box-shadow:0 0 0 6px rgba(2,33,121,.25)}
.lx-skip{position:absolute;top:-100px;left:12px;padding:14px;background:#fff;color:#022179;z-index:1000}.lx-skip:focus{top:8px}
#contact p,#contact label{color:#e0e7ff!important}#contact input::placeholder,#contact textarea::placeholder{color:#cad4ef}
footer a,footer p{color:#bec9e7!important}
@media(max-width:760px){[style*="min-width:320px"]{min-width:0!important}main [style*="grid-template-columns:repeat(auto-fill"]{grid-template-columns:1fr!important}.lx-fab{bottom:18px!important;right:18px!important;width:50px!important;height:50px!important}[dir=rtl] .lx-fab{left:18px!important;right:auto!important}#home{padding-top:62px!important;padding-bottom:130px!important;min-height:920px!important}.lx-navlist{white-space:normal}.lx-ceorow>div,.lx-ceorow2>div{padding-left:20px!important;padding-right:20px!important}}
/* Reserve a clear lane for the floating contact control on narrow screens. */
@media(max-width:1024px){main .lx-wrap,footer .lx-wrap{padding-inline-end:104px!important}}
@media(max-width:760px){main .lx-wrap,footer .lx-wrap{padding-inline-end:72px!important;padding-inline-start:20px!important}}
.lx-extra-nav{font-size:13px;font-weight:500;color:var(--lx-text);white-space:nowrap}
.lx-navlist{flex-wrap:wrap;justify-content:center;gap:14px!important;flex-shrink:1!important}.lx-navrow{height:auto!important;min-height:84px;padding-top:12px!important;padding-bottom:12px!important}
.lx-content-section{padding:76px 0}.lx-heading{font-size:clamp(1.7rem,3vw,2.7rem)!important;line-height:1.6!important}.lx-copy{line-height:1.95}
.lx-technologies{background:#04113a;color:#d3dfff;padding:30px 0}.lx-technologies h2{font-size:14px;text-align:center;font-weight:500;margin-bottom:26px;color:#d9b863}.lx-brand-grid{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}.lx-marquee{display:flex;flex:0 0 auto;align-items:center;gap:38px;padding-inline-end:38px;animation:lx-scroll 40s linear infinite}/* marquee runs continuously — pause on hover/focus removed at the owner's
request. Note this drops the WCAG 2.2.2 pause affordance for the strip. */@keyframes lx-scroll{to{transform:translateX(-100%)}}[dir=rtl] .lx-marquee{animation-name:lx-scroll-rtl}@keyframes lx-scroll-rtl{to{transform:translateX(100%)}}.lx-brand{display:flex;flex:0 0 auto;align-items:center;justify-content:center;background:#fff;border-radius:12px;padding:13px 20px;box-shadow:0 12px 26px -18px rgba(2,11,38,0.95)}.lx-brand img{object-fit:contain;height:26px;width:auto;max-width:120px}
.lx-social{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}.lx-social a{display:grid;place-items:center;width:44px;height:44px;background:#fff;border:1px solid #d9b863;border-radius:50%;transition:box-shadow .2s}.lx-social a:hover{box-shadow:0 0 0 3px #d9b863}.lx-social img{width:22px;height:22px}.lx-social-ico{width:22px;height:22px;background-size:contain;background-repeat:no-repeat;background-position:center;display:block}
.lx-leaders{display:grid;grid-template-columns:1fr 1fr;gap:30px}.lx-leader{text-align:center;padding:32px;background:var(--lx-surface);border:1px solid var(--lx-border);border-radius:3px}.lx-leader img{width:130px;height:130px;border-radius:50%;object-fit:cover;object-position:top;border:3px solid #d9b863}.lx-leader h1,.lx-leader h2{font-size:1.3rem;margin-top:18px}.lx-leader p{color:var(--lx-gold-dim);margin-top:8px}.lx-founder{margin-top:40px;padding:38px;background:linear-gradient(150deg,#022179,#04113a);color:#fff;border-radius:3px}.lx-founder .lx-copy{color:#d3dfff;margin-top:20px}.lx-signoff{margin-top:22px}
.lx-service-num{font-size:1.8rem;color:var(--lx-gold-dim)}.lx-service-card{color:var(--lx-text);display:flex;flex-direction:column;gap:16px}.lx-more{color:var(--lx-gold-dim);margin-top:auto}.lx-section-action{margin-top:30px}#services a{padding:28px!important}#services a p{font-size:.95rem!important}#process [data-reveal]{transform:none!important;transition:box-shadow .2s!important}#process [data-reveal]:hover{box-shadow:0 8px 24px -12px #b48c37!important}#process h3{line-height:1.7}#contact{padding-top:80px!important}footer{padding-top:60px!important}
@media(max-width:760px){.lx-leaders{grid-template-columns:1fr}.lx-founder{padding:24px}.lx-marquee{gap:22px;padding-inline-end:22px}.lx-brand{padding:11px 16px}.lx-content-section{padding:50px 0}#home{min-height:780px!important}.lx-navrow{gap:10px!important}.lx-navlist{gap:12px!important}}
.lx-dark a.lx-content-card,.lx-dark a.lx-content-card h2,.lx-dark a.lx-content-card span{color:#eef3ff!important}
#home-services .lx-content-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1024px){#home-services .lx-content-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){#home-services .lx-content-grid{grid-template-columns:1fr}}
.lx-social-top{margin:0;gap:8px}
.lx-social-top a{width:30px;height:30px;background:#fff;border-color:rgba(201,169,106,0.45)}
.lx-social-top .lx-social-ico{width:16px;height:16px}
.lx-social-top a:hover{box-shadow:0 0 0 2px #d9b863}
.lx-eyebrow-line{font-size:var(--lx-eyebrow2,11px);font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--lx-gold-dim,#A8842F);margin:0 0 18px;line-height:1.9}
.lx-points{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:10px}
.lx-points li{position:relative;padding-inline-start:20px;font-size:.95rem;font-weight:400;line-height:1.85;color:var(--lx-text2)}
.lx-points li::before{content:"";position:absolute;inset-inline-start:0;top:.72em;width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#d9b863,#a8842f)}
.lx-content-grid article.lx-content-card{display:flex;flex-direction:column}
.lx-content-card .lx-more{display:inline-block;margin-top:auto;color:var(--lx-gold-dim,#A8842F);font-weight:600;font-size:.9rem}
.lx-content-card .lx-service-num{display:block;margin-bottom:10px}
/* ============================================================
MOTION SYSTEM — ui-ux-pro-max: motion-consistency, spring-physics,
exit-faster-than-enter, scale-feedback, state-transition,
transform-performance. Transform/opacity only; the global
prefers-reduced-motion block above neutralises all of it.
============================================================ */
:root{
--mo-enter:cubic-bezier(0.16,1,0.3,1); /* expo-out: the house curve */
--mo-spring:cubic-bezier(0.34,1.56,0.64,1); /* slight overshoot, interactive only */
--mo-fast:170ms; /* press / exit (~60% of base) */
--mo-base:240ms; /* hover state (DB: subtle hover 200-250ms) */
}
/* press feedback — scale-feedback (0.95–1.05), exit faster than enter */
.lx-action,.lx-more,.lx-footer-link,.lx-navlist a,.lx-extra-nav a,
.lx-brand,.lx-client,.lx-social a,.lx-social-top a{
transition:transform var(--mo-base) var(--mo-enter),
box-shadow var(--mo-base) var(--mo-enter),
color var(--mo-base) var(--mo-enter),
opacity var(--mo-base) var(--mo-enter);
}
.lx-action:active,.lx-more:active,.lx-footer-link:active,
.lx-navlist a:active,.lx-extra-nav a:active{
transform:scale(0.97);
transition-duration:var(--mo-fast);
}
/* CTA — lift on hover, settle with a touch of spring */
.lx-action:hover{transform:translateY(-2px);transition-timing-function:var(--mo-spring)}
/* nav links — gold underline sweeps in from the reading edge (RTL-aware) */
.lx-navlist a,.lx-extra-nav a,.lx-footer-link{position:relative}
.lx-navlist a::after,.lx-extra-nav a::after,.lx-footer-link::after{
content:"";position:absolute;inset-inline:0;bottom:-3px;height:1px;
background:var(--lx-gold-dim,#C9A227);
transform:scaleX(0);transform-origin:left;
transition:transform var(--mo-base) var(--mo-enter);
}
[dir=rtl] .lx-navlist a::after,
[dir=rtl] .lx-extra-nav a::after,
[dir=rtl] .lx-footer-link::after{transform-origin:right}
.lx-navlist a:hover::after,.lx-navlist a:focus-visible::after,
.lx-extra-nav a:hover::after,.lx-extra-nav a:focus-visible::after,
.lx-footer-link:hover::after,.lx-footer-link:focus-visible::after{transform:scaleX(1)}
/* client + tech logos — lift out of the row */
.lx-brand:hover,.lx-client:hover{transform:translateY(-3px)}
/* "Learn more" — arrow nudges toward the reading direction */
.lx-more:hover{transform:translateX(3px)}
[dir=rtl] .lx-more:hover{transform:translateX(-3px)}
/* Card hover — the template carries style-hover="" with a gold border + raised
shadow, but the renderer strips that attribute, so the design never fired.
Re-expressed here against a[data-reveal] (the clickable cards); the generated
.scp6 class is not stable enough to target.
!important is required because the reveal script writes transform/border/
box-shadow as inline styles — same approach the existing #process rule uses. */
a[data-reveal]{will-change:transform}
a[data-reveal]:hover,a[data-reveal]:focus-visible{
transform:translateY(-4px) scale(1)!important;
border-color:rgba(201,169,106,0.55)!important;
}
a[data-reveal]:active{transform:translateY(-1px) scale(0.995)!important;transition-duration:var(--mo-fast)!important}
/* ============================================================
HERO — the whole slide used to move as one 22px block. The four
children now enter in sequence (DB: Stagger List / hierarchy-motion).
Driven purely off aria-hidden="false", which the renderer already
sets on the active slide — no JS, and the text node is never
touched, so the i18n exact-text lookup keeps working.
============================================================ */
/* FAIL-SAFE: children are visible by default. The entrance is an animation
that ENDS on the visible state, so if it never runs (old browser, a render
that drops the attribute, reduced motion) the hero text is still readable.
The earlier version defaulted the children to opacity:0 and left them stuck
invisible after a slide change — never gate real content behind a selector. */
.lx-slide[aria-hidden="false"] > *{animation:lx-slide-in .6s var(--mo-enter) both}
.lx-slide[aria-hidden="false"] > *:nth-child(1){animation-delay:.08s}
.lx-slide[aria-hidden="false"] > *:nth-child(2){animation-delay:.20s}
.lx-slide[aria-hidden="false"] > *:nth-child(3){animation-delay:.32s}
.lx-slide[aria-hidden="false"] > *:nth-child(4){animation-delay:.44s}
@keyframes lx-slide-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* the 56px gold rule beside the eyebrow draws itself in */
.lx-slide[aria-hidden="false"] > *:nth-child(1) > span:first-child{
animation:lx-rule-draw .9s var(--mo-enter) .12s both;
transform-origin:left;
}
[dir=rtl] .lx-slide[aria-hidden="false"] > *:nth-child(1) > span:first-child{transform-origin:right}
@keyframes lx-rule-draw{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
/* gold CTA — revives @keyframes lx-shimmer, which was defined in this
file and never referenced once. Sweeps on hover only, so it reads as
a response rather than a permanently blinking button. */
.lx-slide a[href*="contact"]{background-size:200% 100%!important}
.lx-slide a[href*="contact"]:hover{
animation:lx-shimmer 1.1s var(--mo-enter);
box-shadow:0 26px 56px -14px rgba(217,184,99,0.85)!important;
}
/* card hover was 4px — too small to register. */
a[data-reveal]:hover,a[data-reveal]:focus-visible{
transform:translateY(-8px) scale(1.01)!important;
box-shadow:0 46px 84px -34px rgba(0,0,0,0.75),0 0 0 1px rgba(201,169,106,0.45)!important;
}
/* ============================================================
TECHNOLOGIES STRIP — logo wall
============================================================ */
/* heading sat 26px above the strip; they now read as one unit */
.lx-technologies{padding:24px 0}
.lx-technologies h2{margin-bottom:10px}
/* The white cards are gone. Straight transparency would erase the dark
marks (Apple, Amazon) on #04113a, so every logo is normalised to one
white silhouette instead — the standard monochrome logo wall. All ten
brand files are SVG, so the filter has clean alpha to work with. */
.lx-brand{
background:transparent!important;box-shadow:none!important;
border-radius:0!important;padding:0!important;
}
.lx-brand img{
filter:brightness(0) invert(1);
opacity:.58;
transition:opacity var(--mo-base) var(--mo-enter),transform var(--mo-base) var(--mo-enter);
}
.lx-brand:hover img{opacity:1;transform:translateY(-2px)}
.lx-marquee{gap:48px;padding-inline-end:48px;min-width:100%} /* min-width guarantees one copy is never narrower than the
strip, so the seam can't open a gap on an ultra-wide monitor. 30 logos per
copy (2220px) already covers 1920; this is the belt-and-braces for wider. */
/* Pause control: hidden from view as asked, but NOT removed — the hero
auto-advances, and WCAG 2.2.2 requires a pause mechanism. It still takes
keyboard focus and reveals itself on focus or hover. */
.lx-pause{
opacity:0;
transition:opacity var(--mo-base) var(--mo-enter);
}
.lx-pause:hover,.lx-pause:focus-visible{opacity:1}
/* ============================================================
MOBILE NAVIGATION (≤1024px)
The site had no mobile menu at all — the full nav wrapped into three
rows and ate ~40% of a 375px viewport before the hero began.
Built on the EXISTING markup: both .lx-navlist elements are already
direct children of .lx-navrow, so they become the panel. No link is
duplicated, so the i18n exact-text lookup is untouched.
============================================================ */
.lx-burger{display:none}
@media (max-width:1024px){
/* --- the trigger --- */
.lx-burger{
display:flex;flex-direction:column;justify-content:center;gap:5px;
width:48px;height:48px; /* ≥44×44 touch target */
padding:0 12px;box-sizing:border-box;
background:transparent;border:1px solid var(--lx-border,rgba(2,33,121,0.12));
border-radius:3px;cursor:pointer;flex-shrink:0;order:-1;
}
.lx-burger span{
display:block;height:1.5px;width:100%;background:var(--lx-text);
transition:transform var(--mo-base) var(--mo-spring),
opacity var(--mo-fast) var(--mo-enter);
}
/* morph into an X */
.lx-navrow[data-menu="open"] .lx-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.lx-navrow[data-menu="open"] .lx-burger span:nth-child(2){opacity:0;transform:scaleX(0)}
.lx-navrow[data-menu="open"] .lx-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.lx-burger:focus-visible{outline:2px solid var(--lx-gold-dim);outline-offset:3px}
/* --- header collapses to logo + trigger --- */
.lx-navrow{flex-wrap:wrap;height:auto!important;min-height:72px;row-gap:0}
.lx-badge-logo{display:none}
.lx-navlist{
display:none!important; /* the markup carries style="display:flex" inline */
flex-direction:column!important;align-items:stretch!important;
width:100%;flex-basis:100%;gap:0!important;
flex-wrap:nowrap!important;overflow:visible!important;
}
/* --- open state: the two lists become one panel --- */
.lx-navrow[data-menu="open"] .lx-navlist{display:flex!important}
.lx-navrow[data-menu="open"]{
padding-bottom:18px;
border-bottom:1px solid rgba(201,169,106,0.35);
}
.lx-navrow[data-menu="open"] .lx-navlist:first-of-type{
padding-top:10px;border-top:1px solid var(--lx-border-soft,rgba(2,33,121,0.07));margin-top:8px;
}
.lx-navlist li{width:100%}
.lx-navrow[data-menu="open"] .lx-navlist a{
display:flex;align-items:center;min-height:52px; /* comfortable tap row */
font-size:15px!important;padding:0 4px;
}
.lx-navrow[data-menu="open"] .lx-navlist a::after{bottom:12px}
/* --- entrance: rows cascade in (DB Stagger List, 60ms each) --- */
.lx-navrow[data-menu="open"] .lx-navlist li{
animation:lx-menu-row .5s var(--mo-enter) both;
}
@keyframes lx-menu-row{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.lx-navrow[data-menu="open"] .lx-navlist li:nth-child(1){animation-delay:.04s}
.lx-navrow[data-menu="open"] .lx-navlist li:nth-child(2){animation-delay:.10s}
.lx-navrow[data-menu="open"] .lx-navlist li:nth-child(3){animation-delay:.16s}
.lx-navrow[data-menu="open"] .lx-navlist li:nth-child(4){animation-delay:.22s}
.lx-navrow[data-menu="open"] .lx-navlist li:nth-child(5){animation-delay:.28s}
/* the CTA and the controls want breathing room once stacked */
.lx-navrow[data-menu="open"] .lx-navlist li:has(> a[href*="contact"]){margin-top:14px}
.lx-navrow[data-menu="open"] .lx-navlist li > a[href*="contact"]{justify-content:center}
/* body scroll lock companion class (set by JS) */
body.lx-menu-lock{overflow:hidden}
}
/* ============================================================
LUXURY LAYER — three additions, all transform/opacity only and
all inheriting the global prefers-reduced-motion reset above.
============================================================ */
/* 1 — gold rule draws itself under every section heading (20 of them)
as the heading scrolls in. .is-in is set by the observer in index.html. */
.lx-heading{position:relative}
.lx-heading::after{
content:"";position:absolute;inset-inline-start:0;bottom:-16px;
width:clamp(48px,7vw,84px);height:2px;
background:linear-gradient(90deg,var(--lx-gold-dim),rgba(201,169,106,0));
transform:scaleX(0);transform-origin:left;
transition:transform .85s var(--mo-enter) .12s;
}
[dir=rtl] .lx-heading::after{
transform-origin:right;
background:linear-gradient(270deg,var(--lx-gold-dim),rgba(201,169,106,0));
}
.lx-heading.is-in::after{transform:scaleX(1)}
/* 2 — reading progress: a hairline of gold across the very top */
#lx-progress{
position:fixed;inset-block-start:0;inset-inline-start:0;
height:2px;width:100%;z-index:90;transform:scaleX(0);transform-origin:left;
background:linear-gradient(90deg,#A8842F,#D9B863 45%,#F7E6B8);
pointer-events:none;will-change:transform;
}
[dir=rtl] #lx-progress{transform-origin:right}
/* 3 — the sticky header settles as you leave the hero */
nav[aria-label="Main navigation"]{
transition:box-shadow .45s var(--mo-enter),backdrop-filter .45s var(--mo-enter);
}
html.lx-scrolled nav[aria-label="Main navigation"]{
box-shadow:0 10px 34px -22px rgba(2,11,38,.85),0 1px 0 rgba(201,169,106,.28);
}
html.lx-scrolled .lx-navrow{transition:height .45s var(--mo-enter)}
/* ============================================================
Requested 2026-09-15
============================================================ */
/* The "Global Companies & Technologies" line is removed from view. Kept in the
DOM (screen-reader only) so the section still has a heading for assistive
tech and document outline — same technique as the existing .lx-sr-only. */
.lx-technologies h2{
position:absolute!important;width:1px!important;height:1px!important;
padding:0!important;margin:-1px!important;overflow:hidden!important;
clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
/* Body copy was rendering at 68% opacity against the dark field while headings
sat at full strength — that gap is what read as "dim". Secondary and tertiary
text now match --lx-text exactly on every dark surface. */
[data-lx-theme="dark"]{
--lx-text2: #EEF2FF;
--lx-text3: #EEF2FF;
}
#contact{
--lx-text2: #ffffff;
--lx-text3: #ffffff;
}
/* Card titles carry the brand gold. Uniform white copy (set above) removed the
step between a card's title and its body — this puts it back with colour
instead of opacity, so nothing gets dimmer. The token adapts per theme:
#D9B863 on dark (9.58:1) and #7A5D18 on light (6.01:1). */
.lx-content-card h3{color:var(--lx-gold-dim)}
/* Service demo card. Opaque and lifted: the site texture layer is position:fixed with
z-index:0, which PAINTS ABOVE static content — so without a positive z-index here that
17% background image washed over the video. width/height + aspect-ratio reserve the box. */
.lx-demo{
position:relative;z-index:2;isolation:isolate;
margin:0 0 34px;padding:12px;border-radius:6px;
background:linear-gradient(160deg,#0b1d52 0%,#04113a 55%,#020a22 100%);
border:1px solid rgba(201,169,106,.6);
box-shadow:
inset 0 1px 0 rgba(247,230,184,.18),
0 0 0 1px rgba(2,11,38,.9),
0 30px 70px -30px rgba(0,0,0,.95),
0 0 70px -24px rgba(201,169,106,.35);
}
.lx-demo video{
display:block;width:100%;height:auto;aspect-ratio:16/9;
border-radius:3px;background:#030b26;
}