.elementor-50482 .elementor-element.elementor-element-7155246{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-50482 .elementor-element.elementor-element-7155246:not(.elementor-motion-effects-element-type-background), .elementor-50482 .elementor-element.elementor-element-7155246 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-9537715 );}.elementor-50482 .elementor-element.elementor-element-765dd21{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-50482 .elementor-element.elementor-element-765dd21.e-con{--align-self:center;}.elementor-widget-theme-site-logo .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-50482 .elementor-element.elementor-element-9c11300{text-align:start;}.elementor-50482 .elementor-element.elementor-element-9536e77{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-50482 .elementor-element.elementor-element-9536e77.e-con{--align-self:center;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-50482 .elementor-element.elementor-element-e5d2894 .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-50482 .elementor-element.elementor-element-e5d2894 .elementor-nav-menu--dropdown .elementor-item, .elementor-50482 .elementor-element.elementor-element-e5d2894 .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-50482 .elementor-element.elementor-element-765dd21{--width:30%;}.elementor-50482 .elementor-element.elementor-element-9536e77{--width:70%;}}@media(max-width:1024px) and (min-width:768px){.elementor-50482 .elementor-element.elementor-element-9536e77{--width:100%;}}@media(max-width:1024px){.elementor-50482 .elementor-element.elementor-element-7155246{--z-index:500;}.elementor-50482 .elementor-element.elementor-element-765dd21{--z-index:525;}.elementor-widget-theme-site-logo .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-50482 .elementor-element.elementor-element-9c11300 > .elementor-widget-container{margin:0px 0px 0px 40px;}.elementor-50482 .elementor-element.elementor-element-9c11300{text-align:start;}.elementor-50482 .elementor-element.elementor-element-9c11300 img{width:60%;}.elementor-50482 .elementor-element.elementor-element-9536e77{--z-index:550;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-size:var( --e-global-typography-accent-font-size );}.elementor-50482 .elementor-element.elementor-element-e5d2894{width:100%;max-width:100%;}.elementor-50482 .elementor-element.elementor-element-e5d2894 .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-50482 .elementor-element.elementor-element-e5d2894 .elementor-nav-menu--dropdown .elementor-item, .elementor-50482 .elementor-element.elementor-element-e5d2894 .elementor-nav-menu--dropdown .elementor-sub-item{font-size:var( --e-global-typography-text-font-size );}}@media(max-width:767px){.elementor-widget-theme-site-logo .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-size:var( --e-global-typography-accent-font-size );}.elementor-50482 .elementor-element.elementor-element-e5d2894 .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-50482 .elementor-element.elementor-element-e5d2894 .elementor-nav-menu--dropdown .elementor-item, .elementor-50482 .elementor-element.elementor-element-e5d2894 .elementor-nav-menu--dropdown .elementor-sub-item{font-size:var( --e-global-typography-text-font-size );}}
/* Start custom CSS *//* ============================================================
ZEN EX MACHINA -- Global Styles
Version 5.9 * 10 Apr 2026
Pipeline: Figma -> WordPress / Elementor
CHANGELOG v5.9
* Section 15 -- Sub-arrow block-margin reset.
* Elementor widget stylesheet (widget-nav-menu.ver=4.0.12) applies
* margin-block-start: -10px and margin-block-end: 10px to .sub-arrow,
* plus padding: 0 10px. Inside the flex introduced in v5.8, these
* block-axis margins displace the .sub-arrow span below the flex line,
* causing the chevron to render underneath the label rather than inline
* to its right. Fixed by resetting margin-block-start, margin-block-end,
* margin-top, margin-bottom, and padding to 0 with !important on both
* the semantic class scope and the correct element ID scope (e5d2894,
* confirmed via elementor-mcp get-page-structure on post 50482 --
* previous rules used 3f2ed9cd which was incorrect). align-self: center
* added to ensure the span centres correctly within the flex row
* regardless of line-height differences. Width and height constrained
* to 1em (font-relative) via the element ID scope to defeat Elementor's
* own width declaration which was beating the previous auto value.
CHANGELOG v5.8
* Section 15 -- Nav layout fix: two root causes diagnosed via live DOM
* inspection and corrected in this release.
*
* Fix 1 -- Nav wrapper flex direction.
* The Elementor container .zxm-2026-primary-nav (elementor ID 7f29da90)
* had --flex-direction: column set in the Elementor page stylesheet via
* .elementor-48800 .elementor-element-7f29da90. This caused the logo
* container and menu container to stack vertically rather than sit
* side-by-side on a single row. Fixed by overriding the CSS variable
* and the resolved property directly using both the scoped page .elementor-50482
* and the semantic class, with !important to beat the Elementor-generated
* rule. Logo container locked to flex: 0 0 auto with max-width 200px.
* Menu container set to flex: 1 1 auto with justify-content: flex-end
* so it fills remaining space and aligns items to the right.
*
* Fix 2 -- Services nav item wrapping.
* The existing top-level link rule (line ~998 in v5.7) set display: block
* on a.elementor-item. This overrode Elementor's own display: flex on the
* element, causing the .sub-arrow (the caret-down icon) to be
* treated as a block-level child and fall to a second line beneath the
* label. Fixed by changing display: block to display: flex with
* align-items: center and gap: 6px so the sub-arrow sits inline.
* flex-wrap: nowrap added to the UL to prevent items wrapping to a second
* row at mid-range viewport widths.
============================================================ */
/* ============================================================
01 -- GOOGLE FONTS IMPORT
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,600;12..96,700;12..96,800&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap');
/* ============================================================
02 -- DESIGN TOKENS (CSS Custom Properties)
============================================================ */
:root {
/* -- Colour Palette -- */
--color-midnight: #0A1628;
--color-slate: #1C3553;
--color-bronze: #B8860B;
--color-bronze-light: #D4A017;
--color-steel: #7FA8B8;
--color-offwhite: #F0F2F5;
--color-cream: #E8DCC8;
--color-body-dark: #2A3A4C;
--color-white: #FFFFFF;
/* -- Typography -- */
--font-display: 'Bricolage Grotesque', sans-serif;
--font-body: 'Instrument Sans', sans-serif;
--font-mono: 'DM Mono', monospace;
--text-display: clamp(2.5rem, 5.5vw, 5rem);
--text-h1: clamp(2.125rem, 4.5vw, 3.75rem);
--text-h2: clamp(1.688rem, 3.5vw, 2.75rem);
--text-h3: clamp(1.375rem, 2.5vw, 2rem);
--text-h4: clamp(1.188rem, 1.8vw, 1.5rem);
--text-subhead: clamp(1.188rem, 2vw, 1.75rem);
--text-body: clamp(1.0625rem, 1.2vw, 1.1875rem);
--text-small: clamp(0.9375rem, 1vw, 1rem);
--text-label: clamp(0.75rem, 0.9vw, 0.8125rem);
--text-cta: clamp(0.75rem, 0.9vw, 0.8125rem);
--text-mono: 0.8125rem;
/* -- Line Heights -- */
--leading-display: 1.05;
--leading-h1: 1.10;
--leading-h2: 1.15;
--leading-h3: 1.20;
--leading-h4: 1.30;
--leading-subhead: 1.40;
--leading-body: 1.75;
--leading-small: 1.70;
--leading-label: 1.40;
/* -- Letter Spacing -- */
--tracking-tight: -0.01em;
--tracking-normal: 0em;
--tracking-label: 0.12em;
--tracking-eyebrow: 0.20em;
--tracking-cta: 0.12em;
/* -- Spacing -- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 80px;
--space-10: 96px;
--space-11: 128px;
--bento-gap: 16px;
--container-max: 1400px;
--container-pad: 80px;
--section-pad-v: var(--space-11);
--radius: 3px;
--border-width: 1px;
--rule-width: 3px;
--transition-fast: 150ms ease;
--transition-base: 200ms ease;
--transition-slow: 300ms ease;
--shadow-card: 0 2px 16px rgba(0, 0, 0, 0.24);
--shadow-nav: 0 1px 0 rgba(255, 255, 255, 0.06);
/* -- Icons -- */
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
--icon-xl: 32px;
--icon-stroke: 1.5;
}
/* ============================================================
03 -- RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-body-dark); background-color: var(--color-offwhite); -webkit-font-smoothing: antialiased; overflow-x: hidden; width: 100%; }
img, video { display: block; max-width: 100%; }
svg { max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color var(--transition-base); }
ul, ol { list-style: none; }
/* ============================================================
04 -- TYPOGRAPHY
============================================================ */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-tight); }
h1 { font-size: var(--text-h1); line-height: var(--leading-h1); font-weight: 800; }
h2 { font-size: var(--text-h2); line-height: var(--leading-h2); }
h3 { font-size: var(--text-h3); line-height: var(--leading-h3); }
h4 { font-size: var(--text-h4); line-height: var(--leading-h4); font-weight: 600; }
.text-display { font-family: var(--font-display); font-size: var(--text-display); font-weight: 800; line-height: var(--leading-display); }
.text-subhead { font-family: var(--font-body); font-size: var(--text-subhead); font-style: italic; color: var(--color-cream); }
.text-eyebrow { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-bronze); }
p { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body); }
.elementor-heading-title {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: var(--tracking-tight);
}
.text-eyebrow .elementor-heading-title,
.elementor-widget-heading.text-eyebrow .elementor-heading-title {
font-family: var(--font-mono) !important;
font-size: var(--text-label) !important;
letter-spacing: var(--tracking-eyebrow) !important;
text-transform: uppercase;
color: var(--color-bronze) !important;
font-weight: 400;
}
/* ============================================================
05 -- COLOUR UTILITY
============================================================ */
.bg-midnight { background-color: var(--color-midnight) !important; }
.bg-slate { background-color: var(--color-slate) !important; }
.bg-bronze { background-color: var(--color-bronze) !important; }
.bg-bronze-light { background-color: var(--color-bronze-light) !important; }
.bg-steel { background-color: var(--color-steel) !important; }
.bg-cream { background-color: var(--color-cream) !important; }
.bg-offwhite { background-color: var(--color-offwhite) !important; }
.bg-white { background-color: var(--color-white) !important; }
.bg-body-dark { background-color: var(--color-body-dark) !important; }
.zxm-card-midnight { background-color: var(--color-midnight) !important; }
.zxm-card-slate { background-color: var(--color-slate) !important; }
.zxm-card-bronze { background-color: var(--color-bronze) !important; }
.zxm-card-bronze-light { background-color: var(--color-bronze-light) !important; }
.zxm-card-steel { background-color: var(--color-steel) !important; }
.zxm-card-cream { background-color: var(--color-cream) !important; }
.zxm-card-offwhite { background-color: var(--color-offwhite) !important; }
.zxm-card-white { background-color: var(--color-white) !important; }
.text-midnight { color: var(--color-midnight) !important; }
.text-midnight .elementor-heading-title { color: var(--color-midnight) !important; }
.text-slate { color: var(--color-slate) !important; }
.text-slate .elementor-heading-title { color: var(--color-slate) !important; }
.text-bronze { color: var(--color-bronze) !important; }
.text-bronze .elementor-heading-title { color: var(--color-bronze) !important; }
.text-bronze-light { color: var(--color-bronze-light) !important; }
.text-bronze-light .elementor-heading-title { color: var(--color-bronze-light) !important; }
.text-steel { color: var(--color-steel) !important; }
.text-steel .elementor-heading-title { color: var(--color-steel) !important; }
.text-cream { color: var(--color-cream) !important; }
.text-cream .elementor-heading-title { color: var(--color-cream) !important; }
.text-offwhite { color: var(--color-offwhite) !important; }
.text-offwhite .elementor-heading-title { color: var(--color-offwhite) !important; }
.text-body-dark { color: var(--color-body-dark) !important; }
.text-body-dark .elementor-heading-title { color: var(--color-body-dark) !important; }
.text-white { color: var(--color-white) !important; }
.text-white .elementor-heading-title { color: var(--color-white) !important; }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4,
.on-dark p, .on-dark li, .on-dark span { color: var(--color-offwhite); }
/* ============================================================
06 -- LAYOUT
============================================================ */
.site-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.section-pad { padding-block: var(--section-pad-v); }
/* ============================================================
07 -- NAV (legacy semantic nav; Section 15 covers Elementor nav widget)
============================================================ */
.nav { position: sticky; top: 0; z-index: 100; background-color: var(--color-midnight); box-shadow: var(--shadow-nav); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.nav__links { display: flex; align-items: center; gap: var(--space-7); }
.nav__links a { font-size: 0.9375rem; color: var(--color-steel); }
.nav__links a:hover { color: var(--color-white); }
/* ============================================================
08 -- BUTTONS
============================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-cta); text-transform: uppercase; padding: 14px 32px; border-radius: var(--radius); cursor: pointer; transition: background-color var(--transition-base); min-height: 48px; }
.btn--primary { background-color: var(--color-bronze); color: var(--color-midnight); border: 1px solid var(--color-bronze); }
.btn--primary:hover { background-color: var(--color-bronze-light); }
/* ============================================================
09 -- ICONS
============================================================ */
.icon {
display: inline-block;
width: var(--icon-md);
height: var(--icon-md);
flex-shrink: 0;
vertical-align: middle;
fill: currentColor;
stroke-width: var(--icon-stroke);
}
.icon--sm { width: var(--icon-sm) !important; height: var(--icon-sm) !important; }
.icon--md { width: var(--icon-md) !important; height: var(--icon-md) !important; }
.icon--lg { width: var(--icon-lg) !important; height: var(--icon-lg) !important; }
.icon--xl { width: var(--icon-xl) !important; height: var(--icon-xl) !important; }
.icon--block { display: block; vertical-align: unset; }
.icon--inline { display: inline; vertical-align: -0.125em; }
.icon--bronze { color: var(--color-bronze); fill: var(--color-bronze); stroke: var(--color-bronze); }
.icon--white { color: var(--color-white); fill: var(--color-white); stroke: var(--color-white); }
.icon--steel { color: var(--color-steel); fill: var(--color-steel); stroke: var(--color-steel); }
.icon--midnight { color: var(--color-midnight); fill: var(--color-midnight); stroke: var(--color-midnight); }
/* -- Arrow affordances -- */
.arrow-right-up-bronze::after,
.arrow-right-up-white::after,
.arrow-right-up-steel::after {
display: inline-block;
content: "\2197";
vertical-align: middle;
margin-left: 0.25em;
transition: transform var(--transition-base);
}
.arrow-right-up-bronze:hover::after,
.arrow-right-up-white:hover::after,
.arrow-right-up-steel:hover::after { transform: translate(3px, -3px); }
.arrow-right-up-bronze::after { color: var(--color-bronze); }
.arrow-right-up-white::after { color: var(--color-white); }
.arrow-right-up-steel::after { color: var(--color-steel); }
/* -- Arrow affordances: Elementor button widget fix -- */
.arrow-right-up-bronze.elementor-widget-button::after,
.arrow-right-up-white.elementor-widget-button::after,
.arrow-right-up-steel.elementor-widget-button::after {
display: none;
}
.arrow-right-up-bronze .elementor-button-text::after,
.arrow-right-up-white .elementor-button-text::after,
.arrow-right-up-steel .elementor-button-text::after {
display: inline-block;
content: "\2197";
vertical-align: middle;
margin-left: 0.25em;
transition: transform var(--transition-base);
}
.arrow-right-up-bronze:hover .elementor-button-text::after,
.arrow-right-up-white:hover .elementor-button-text::after,
.arrow-right-up-steel:hover .elementor-button-text::after {
transform: translate(3px, -3px);
}
.arrow-right-up-bronze .elementor-button-text::after { color: var(--color-bronze); }
.arrow-right-up-white .elementor-button-text::after { color: var(--color-white); }
.arrow-right-up-steel .elementor-button-text::after { color: var(--color-steel); }
/* ============================================================
10 -- BENTO GRID
============================================================ */
.zxm-bento { display: grid !important; gap: var(--bento-gap) !important; }
.zxm-bento--3col { grid-template-columns: repeat(3, 1fr); }
.zxm-bento > .elementor-element { margin: 0 !important; }
/* ============================================================
11 -- HERO
============================================================ */
.hero-container {
position: relative;
width: 100%;
height: 90dvh;
min-height: 90dvh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.hero-content {
position: absolute;
z-index: 10;
left: 80px;
bottom: 80px;
width: 100%;
max-width: 1200px;
padding: 2rem;
color: var(--color-white);
}
.hero-image {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%; height: 100%;
z-index: 1;
overflow: hidden;
}
.hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
transform-origin: center center;
will-change: transform;
}
.hero-gradient {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(
to right,
rgba(10, 22, 40, 0.82) 0%,
rgba(10, 22, 40, 0.55) 50%,
rgba(10, 22, 40, 0.18) 100%
);
}
/* ============================================================
12 -- RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
:root {
--container-pad: 40px;
--section-pad-v: var(--space-9);
}
}
@media (max-width: 767px) {
:root {
--container-pad: 20px;
--section-pad-v: var(--space-8);
}
.hero-content { left: 20px; bottom: 40px; }
}
/* ============================================================
13 -- ACCESSIBILITY
============================================================ */
.skip-link {
position: absolute;
top: -100%;
left: var(--space-4);
background: var(--color-bronze);
color: var(--color-midnight);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius);
font-weight: 700;
z-index: 9999;
}
.skip-link:focus { top: var(--space-4); }
:focus-visible {
outline: 2px solid var(--color-bronze);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ============================================================
14 -- ZXM INSIGHTS WIDGET
============================================================ */
.zxm-insights-card { position: relative; overflow: hidden; border-radius: var(--radius); }
.zxm-insights-card--no-image { background-color: var(--color-midnight); }
.zxm-insights-card--no-image .zxm-insights-scrim {
background: linear-gradient(160deg, rgba(28,53,83,0.6) 0%, rgba(10,22,40,0) 60%);
}
.zxm-insights-card__image { width: 100%; height: 100%; object-fit: cover; }
.zxm-insights-card--grow .zxm-insights-card__image { transition: transform var(--transition-slow); }
.zxm-insights-card--grow:hover .zxm-insights-card__image { transform: scale(1.04); }
.zxm-insights-card--shrink .zxm-insights-card__image { transform: scale(1.05); transition: transform var(--transition-slow); }
.zxm-insights-card--shrink:hover .zxm-insights-card__image { transform: scale(1.0); }
.zxm-insights-card--fade .zxm-insights-card__image { transition: opacity var(--transition-slow); }
.zxm-insights-card--fade:hover .zxm-insights-card__image { opacity: 0.7; }
.zxm-insights-card--none .zxm-insights-card__image { transition: none; }
.zxm-insights-card__text { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-5); }
.zxm-insights-card--slide .zxm-insights-card__text { transform: translateY(30px); opacity: 0; transition: transform var(--transition-slow), opacity var(--transition-slow); }
.zxm-insights-card--slide:hover .zxm-insights-card__text { transform: translateY(0); opacity: 1; }
.zxm-insights-card--fade-text .zxm-insights-card__text { opacity: 0; transition: opacity var(--transition-slow); }
.zxm-insights-card--fade-text:hover .zxm-insights-card__text { opacity: 1; }
.zxm-insights-card--slide-fade .zxm-insights-card__text { transform: translateY(20px); opacity: 0; transition: transform var(--transition-slow), opacity var(--transition-slow); }
.zxm-insights-card--slide-fade:hover .zxm-insights-card__text { transform: translateY(0); opacity: 1; }
.zxm-insights-card--none-text .zxm-insights-card__text { transition: none; }
/* ============================================================
15 -- GLOBAL NAV (Elementor Nav Menu widget, template 50482)
============================================================ */
/* -- Nav wrapper containers -- */
.zxm-2026-primary-nav.e-con {
flex-direction: row !important;
--flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
padding: 0 !important;
}
.zxm-2026-primary-nav-logo.e-con {
flex: 0 0 auto !important;
width: auto !important;
max-width: 200px !important;
align-items: center !important;
justify-content: flex-start !important;
}
.zxm-2026-primary-nav-menu.e-con {
flex: 1 1 auto !important;
width: auto !important;
max-width: none !important;
justify-content: flex-end !important;
}
/* -- Outer wrapper and bottom border -- */
.zxm-2026-primary-nav .elementor-nav-menu--main,
.zxm-2026-primary-nav .elementor-nav-menu,
.elementor-element-e5d2894 .elementor-nav-menu--main,
.elementor-element-e5d2894 .elementor-nav-menu {
background-color: var(--color-midnight) !important;
border-bottom: 1px solid rgba(184, 134, 11, 0.25) !important;
}
/* -- Nav UL container -- */
.zxm-2026-primary-nav .elementor-nav-menu--main .elementor-nav-menu {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 0;
padding: 0 var(--container-pad);
}
/* -- Top-level nav item links -- */
.zxm-2026-primary-nav .elementor-nav-menu--main a.elementor-item,
.elementor-element-e5d2894 .elementor-nav-menu--main a.elementor-item {
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: var(--text-label) !important;
letter-spacing: var(--tracking-label) !important;
text-transform: uppercase !important;
color: var(--color-offwhite) !important;
text-decoration: none !important;
padding: 22px 20px !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
white-space: nowrap !important;
position: relative !important;
transition: color var(--transition-base) !important;
}
/* -- Sub-arrow (dropdown caret) -----------------------------------------------
v5.9 fix: Elementor widget stylesheet applies margin-block-start: -10px,
margin-block-end: 10px, and padding: 0 10px to .sub-arrow. Inside the
flex these displace the chevron below the label. All block-axis margins
and padding reset to 0. Element ID confirmed as e5d2894 via MCP structure
query -- previous rules targeted 3f2ed9cd which did not match. -- */
.zxm-2026-primary-nav .elementor-nav-menu--main a.elementor-item .sub-arrow,
.elementor-element-e5d2894 .elementor-nav-menu--main a.elementor-item .sub-arrow {
display: inline-flex !important;
align-items: center !important;
align-self: center !important;
flex-shrink: 0 !important;
font-size: 0.65em !important;
margin-block-start: 0 !important;
margin-block-end: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 0 !important;
line-height: 1 !important;
vertical-align: middle !important;
}
/* Element-ID scope beats Elementor's own width declaration */
.elementor-element-e5d2894 .elementor-nav-menu--main a.elementor-item .sub-arrow {
width: 1em !important;
height: 1em !important;
}
/* -- Hover state -- */
.zxm-2026-primary-nav .elementor-nav-menu--main a.elementor-item:hover,
.elementor-element-e5d2894 .elementor-nav-menu--main a.elementor-item:hover {
color: var(--color-bronze) !important;
}
/* -- Active / current page -- */
.zxm-2026-primary-nav .elementor-nav-menu--main a.elementor-item-active,
.zxm-2026-primary-nav .elementor-nav-menu--main a.current-menu-item,
.elementor-element-e5d2894 .elementor-nav-menu--main a.elementor-item-active,
.elementor-element-e5d2894 .elementor-nav-menu--main a.current-menu-item {
color: var(--color-bronze) !important;
}
/* -- Active indicator underline -- */
.zxm-2026-primary-nav .elementor-nav-menu--main a.elementor-item-active::after,
.zxm-2026-primary-nav .elementor-nav-menu--main a.current-menu-item::after {
content: '';
position: absolute;
bottom: 0;
left: 20px;
right: 20px;
height: var(--rule-width);
background-color: var(--color-bronze);
}
/* -- Dropdown panel -- */
.zxm-2026-primary-nav .elementor-nav-menu--main .sub-menu {
background-color: var(--color-slate);
border-top: var(--rule-width) solid var(--color-bronze);
border-radius: 0 0 var(--radius) var(--radius);
box-shadow: var(--shadow-card);
min-width: 220px;
padding: var(--space-2) 0;
}
/* -- Dropdown item links -- */
.zxm-2026-primary-nav .elementor-nav-menu--main .sub-menu a,
.elementor-element-e5d2894 .elementor-nav-menu--main .sub-menu a {
font-family: var(--font-body) !important;
font-weight: 400 !important;
font-size: var(--text-small) !important;
letter-spacing: var(--tracking-normal) !important;
color: var(--color-offwhite) !important;
text-transform: none !important;
padding: 10px 20px !important;
display: block;
transition: color var(--transition-base), background-color var(--transition-base);
}
/* -- Dropdown item hover -- */
.zxm-2026-primary-nav .elementor-nav-menu--main .sub-menu a:hover {
color: var(--color-bronze);
background-color: rgba(184, 134, 11, 0.08);
}
/* -- CTA button item -- */
.zxm-2026-primary-nav .elementor-nav-menu--main .nav-cta > a,
.zxm-2026-primary-nav .elementor-nav-menu--main a.nav-cta {
background-color: var(--color-bronze);
color: var(--color-midnight) !important;
padding: 10px 22px;
border-radius: var(--radius);
margin-left: var(--space-4);
font-weight: 700;
transition: background-color var(--transition-base);
}
.zxm-2026-primary-nav .elementor-nav-menu--main .nav-cta > a:hover,
.zxm-2026-primary-nav .elementor-nav-menu--main a.nav-cta:hover {
background-color: var(--color-bronze-light);
color: var(--color-midnight) !important;
}
/* -- Hamburger toggle (mobile) -- */
.zxm-2026-primary-nav .elementor-menu-toggle {
color: var(--color-offwhite);
background: transparent;
border: 1px solid rgba(240, 242, 245, 0.2);
border-radius: var(--radius);
padding: var(--space-2) var(--space-3);
font-size: 20px;
transition: border-color var(--transition-base), color var(--transition-base);
}
.zxm-2026-primary-nav .elementor-menu-toggle:hover {
border-color: var(--color-bronze);
color: var(--color-bronze);
}
/* -- Mobile nav panel -- */
@media (max-width: 1024px) {
.zxm-2026-primary-nav .elementor-nav-menu--dropdown {
background-color: var(--color-midnight);
border-top: var(--rule-width) solid var(--color-bronze);
}
.zxm-2026-primary-nav .elementor-nav-menu--dropdown a.elementor-item,
.zxm-2026-primary-nav .elementor-nav-menu--dropdown .sub-menu a {
font-family: var(--font-body);
font-size: var(--text-small);
color: var(--color-offwhite);
padding: 14px 24px;
border-bottom: 1px solid rgba(240, 242, 245, 0.07);
text-transform: none;
letter-spacing: var(--tracking-normal);
}
.zxm-2026-primary-nav .elementor-nav-menu--dropdown a:hover {
color: var(--color-bronze);
background-color: rgba(184, 134, 11, 0.06);
}
}
/* ============================================================
END -- ZEN EX MACHINA * v5.9 * April 2026
============================================================ *//* End custom CSS */