/* ===========================================================================
   Zemora AI - brand interaction layer
   ---------------------------------------------------------------------------
   Loads on every page. Fixes three things:

   1. hello-elementor's reset.css sets `a { color: #c36 }` (crimson) and
      `a:hover { color: #336 }` (dark navy, near-invisible on our ground).
      Any link without a more specific rule inherited that - including the
      SEO contextual links and the linked product headings on the home page.

   2. Link colour now uses the brand secondary, sampled from the Zemora
      wordmark and site icon: both resolve to #0CCACF as their only non-white
      colour. The design system already renders that hue as #22D3EE
      (--e-global-color-accent), which is reused rather than duplicated.
      Contrast on the two dark grounds: 11.2:1 on #05060D, 10.0:1 on #11142A.

   3. Navigation active state, in the same brand colour, with the indicator
      drawn on a pseudo-element so it cannot shift layout.

   Semantic red is untouched: nothing here targets form validation,
   .wpcf7-not-valid-tip, error or destructive states.
   ======================================================================== */

:root {
  /* Sampled from ZEMORA-1-scaled.png and zIcon.png. */
  --z-brand-logo-cyan:        #0ccacf;
  /* Design-system rendering of the same hue, already in the Elementor kit. */
  --z-brand-secondary:        #22d3ee;
  --z-brand-secondary-hover:  #67e8f9;
  --z-brand-secondary-soft:   rgba(34, 211, 238, 0.14);
  --z-brand-accent-purple:    #a78bfa;
}

/* ---------------------------------------------------------------- links -- */

/* Base reset.
   hello-elementor's reset.css declares `a { color: #c36 }` at specificity
   (0,0,1). Rather than chase every context that inherits it - the footer
   contact links, the skip link, thumbnail wrappers and card links were all
   crimson - neutralise it once here. This file loads after reset.css, so the
   same specificity wins on order.
   Anything with its own colour rule is unaffected: those are all class-based
   and therefore more specific. */
a {
  color: inherit;
}
a:hover,
a:active {
  color: inherit;
}

/* Footer contact column: grey text, brand on hover, matching the top bar. */
.elementor-161 .elementskit-infobox a,
.zemora-footer-contact a,
.elementor-widget-elementskit-page-list a {
  color: #a4a9c5;
  text-decoration: none;
  transition: color 170ms ease;
}
.elementor-161 .elementskit-infobox a:hover,
.zemora-footer-contact a:hover,
.elementor-widget-elementskit-page-list a:hover {
  color: var(--z-brand-secondary);
}

/* The skip link is the first thing a keyboard user reaches. It must be
   legible against the dark ground the moment it appears. */
.skip-link.screen-reader-text:focus,
a.skip-link:focus {
  color: #05060d !important;
  background: var(--z-brand-secondary) !important;
  padding: 12px 20px !important;
  border-radius: 0 0 8px 0 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  z-index: 100000 !important;
  text-decoration: none !important;
}

/* Anchors inside headings take the heading's colour, never the reset crimson.
   The product and use-case headings on the home page are links. */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.elementor-heading-title a {
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
.elementor-heading-title a:hover {
  color: var(--z-brand-secondary);
}

/* Contextual links in body copy. */
.elementor-widget-text-editor a,
.zemora-hero-sub a,
.zemora-lp-prose a,
.zemora-usecase-body a,
.zemora-faq-answer a,
.zemora-blog-intro a,
.zemora-section-sub a,
.zemora-lp-card .zemora-usecase-body a,
.zemora-cta-disclaimer a,
.zemora-cta-fallback a {
  color: var(--z-brand-secondary);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color 170ms ease, text-decoration-color 170ms ease;
}

.elementor-widget-text-editor a:hover,
.zemora-hero-sub a:hover,
.zemora-lp-prose a:hover,
.zemora-usecase-body a:hover,
.zemora-faq-answer a:hover,
.zemora-blog-intro a:hover,
.zemora-section-sub a:hover,
.zemora-cta-disclaimer a:hover,
.zemora-cta-fallback a:hover {
  color: var(--z-brand-secondary-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* Blog listing. The thumbnail wrapper carries no text, so the crimson never
   showed - but it would surface the moment an image failed and alt text
   rendered. Titles get the heading treatment: white, brand on hover. */
.elementskit-entry-thumb,
.elementskit-entry-thumb:hover,
.elementskit-post-image-card a:has(> img) {
  color: inherit;
}
.elementskit-post-image-card .elementskit-post-body h2 a,
.elementskit-post-image-card .elementskit-post-body h3 a {
  color: #ffffff;
  text-decoration: none;
}
.elementskit-post-image-card .elementskit-post-body h2 a:hover,
.elementskit-post-image-card .elementskit-post-body h3 a:hover {
  color: var(--z-brand-secondary);
}
.elementskit-post-image-card .elementskit-btn,
.elementskit-post-image-card .elementskit-post-body a.elementskit-btn {
  text-decoration: none;
}

/* Buttons are a separate system and must not inherit the link treatment. */
.elementor-button,
.elementor-button-link,
a.elementor-button,
.zemora-btn-primary a,
.zemora-btn-secondary a,
.wpcf7-submit {
  text-decoration: none !important;
}
.zemora-btn-primary .elementor-button:hover,
.zemora-btn-secondary .elementor-button:hover {
  text-decoration: none !important;
}

/* --------------------------------------------------- navigation states -- */

/* Active top-level item. The indicator is a pseudo-element, so turning it on
   and off never changes the header's height or the item's box. */
.elementskit-navbar-nav > li.zemora-nav-active > a,
.elementskit-navbar-nav > li.zemora-nav-active > a:hover {
  color: var(--z-brand-secondary) !important;
}
.elementskit-navbar-nav > li.zemora-nav-active {
  position: relative;
}
.elementskit-navbar-nav > li.zemora-nav-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--z-brand-secondary);
  pointer-events: none;
}

/* ------------------------------------------------------------ dropdown -- */

/* The panel shipped with ElementsKit's light default: rgb(244,244,244) with a
   #dadada border, while the individual items were dark (#11142A). The panel's
   15px/25px padding therefore drew a white frame around every dark row - the
   "white space" in the menu. The panel is now the surface and the items are
   transparent rows on it, which is how a dark dropdown should be built.
   Elementor writes its widget CSS at (0,3,x), so these need !important. */
.elementskit-navbar-nav .elementskit-submenu-panel {
  background-color: #0a0c17 !important;
  border: 1px solid rgba(139, 92, 246, 0.22) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5),
              0 2px 8px rgba(0, 0, 0, 0.35) !important;
  padding: 8px !important;
  min-width: 252px !important;
  margin-top: 10px !important;
  overflow: hidden;
}

/* Bridge the 10px gap between the parent item and the panel, so the pointer
   can travel to the panel without the menu closing under it. */
.elementskit-navbar-nav > li > .elementskit-submenu-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

/* Rows: transparent on the panel surface, not their own dark blocks. */
.elementskit-navbar-nav .elementskit-submenu-panel > li > a {
  background-color: transparent !important;
  color: #a4a9c5 !important;
  padding: 10px 14px !important;
  border-radius: 9px !important;
  border: 0 !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease !important;
}

/* Hover: brand tint, white text. Distinct from the active row below. */
.elementskit-navbar-nav .elementskit-submenu-panel > li > a:hover,
.elementskit-navbar-nav .elementskit-submenu-panel > li > a:focus-visible,
.elementskit-navbar-nav .elementskit-submenu-panel > li:hover > a {
  background-color: rgba(34, 211, 238, 0.10) !important;
  color: #ffffff !important;
}

/* Active child: brand text on a slightly stronger tint.
   ElementsKit renders the current row at #707070 !important from a selector
   carrying six classes, so the tint applied but the text stayed grey and the
   row read as disabled. The doubled class below raises this to seven classes,
   which is what it takes to win without hardcoding the widget's element id
   (that id changes if the header template is rebuilt). */
.zemora-nav .zemora-menu .elementskit-navbar-nav .elementskit-submenu-panel
  > li.menu-item.current-menu-item.current-menu-item > a,
.zemora-nav .zemora-menu .elementskit-navbar-nav .elementskit-submenu-panel
  > li.menu-item.zemora-nav-active-child.zemora-nav-active-child > a {
  color: var(--z-brand-secondary) !important;
  background-color: var(--z-brand-secondary-soft) !important;
  font-weight: 600 !important;
}

/* Same treatment when that row is also hovered. */
.zemora-nav .zemora-menu .elementskit-navbar-nav .elementskit-submenu-panel
  > li.menu-item.current-menu-item.current-menu-item > a:hover {
  color: #ffffff !important;
  background-color: rgba(34, 211, 238, 0.20) !important;
}

/* The caret next to a parent item was #021343 - near-black on a near-black
   bar. Inherit the item colour so it tracks idle, hover and active. */
.elementskit-navbar-nav > li > a .elementskit-submenu-indicator,
.elementskit-navbar-nav > li > a .ekit-submenu-indicator-icon,
.elementskit-navbar-nav > li > a .icon-down-arrow1,
.elementskit-navbar-nav > li:hover > a .elementskit-submenu-indicator,
.elementskit-navbar-nav > li.zemora-nav-active > a .elementskit-submenu-indicator {
  color: currentColor !important;
  fill: currentColor !important;
  opacity: 0.75;
}
.elementskit-navbar-nav > li > a:hover .elementskit-submenu-indicator { opacity: 1; }

/* Hover must read as distinct from active: white text, no indicator. */
.elementskit-navbar-nav > li:not(.zemora-nav-active) > a:hover {
  color: #ffffff !important;
}

/* --------------------------------------------------------------- forms -- */

/* The accessible <label> wrappers added around each control default to
   display: inline, so they collapsed to their content width - the select
   rendered as a narrow centred pill and the two-column row stacked. The
   wrapper has to be a block that carries the width the control expects. */
.zemora-cta-form .zemora-field,
.zemora-contact-form .zemora-field {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Restore the two-up row. Contact Form 7 runs wpautop over the form, which
   wraps both labels in a single <p> - so the row ends up with one child and
   flex has nothing to distribute. Both the wrapped and unwrapped shapes are
   handled rather than relying on which one CF7 happens to emit. */
.zemora-cta-form .form-row,
.zemora-cta-form .form-row > p {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  align-items: flex-start !important;
  width: 100% !important;
  margin: 0 !important;
}
.zemora-cta-form .form-row > .zemora-field,
.zemora-cta-form .form-row > p > .zemora-field {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

@media (max-width: 600px) {
  .zemora-cta-form .form-row,
  .zemora-cta-form .form-row > p {
    flex-direction: column !important;
    gap: 0 !important;
  }
}

/* ------------------------------------------------------------ headings -- */

/* The theme set typography_text_transform: capitalize on ~19 heading widgets
   on the home page alone, which rendered authored sentence-case copy as
   "Small Teams Spend 60% Of Their Week On The Same Three Tasks." Capitalising
   of / on / the / at is a typographic error, and the copy is already written
   with the correct capitalisation, so the transform is simply removed. */
.elementor-widget-heading .elementor-heading-title,
.zemora-h2,
.zemora-h2 .elementor-heading-title,
.zemora-lp-h1,
.zemora-lp-h1 .elementor-heading-title,
.zemora-usecase-title,
.zemora-usecase-title .elementor-heading-title,
.zemora-product-name,
.zemora-product-name .elementor-heading-title,
.zemora-member-name,
.zemora-card-title,
.zemora-section-title,
.ekit-heading--title,
.ekit-heading--subtitle,
.elementskit-section-title,
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-list .elementor-icon-list-text {
  text-transform: none !important;
}

/* Labels that are genuinely set in caps keep their treatment - the rule above
   would otherwise flatten them too. */
.zemora-eyebrow,
.zemora-eyebrow .elementor-heading-title,
.zemora-card-eyebrow,
.zemora-card-eyebrow .elementor-heading-title,
.zemora-stage-label,
.zemora-stage-label .elementor-heading-title,
.footer-col-title,
.footer-col-title .elementor-heading-title,
[class*="zemora-"][class*="eyebrow"] {
  text-transform: uppercase !important;
}

/* ------------------------------------------------------------- spacing -- */

/* Section headers are flex containers with gap: 20px, but their children also
   still carry margin-bottom: 18px from before the container was flexed - so
   every gap was being applied twice. The FAQ header measured 286px tall for
   ~190px of text, which is where the dead space above each section's content
   came from. Let gap own the spacing. */
/* Doubled class names: the Customizer CSS is inlined at wp_head priority 101,
   after enqueued stylesheets, so a single-class rule with !important still
   loses to it on source order. Two classes wins on specificity instead. */
.zemora-section-header.zemora-section-header {
  gap: 14px !important;
  margin-bottom: 40px !important;
}
.zemora-section-header.zemora-section-header > * {
  margin-bottom: 0 !important;
}

/* Nested section padding.
   The Customizer applies section padding to `.zemora-section` and to anything
   matching [class*="zemora-"][class*="-wrap"]. On the FAQ that stacked three
   deep - #faqs (100px) + .zemora-faq-wrap (128px) + an inner section (100px) -
   putting 328px of dead space above the accordion. Only the outermost section
   should carry the vertical rhythm. */
/* Section wrappers carry their own id (#faqs, #team, …) and a topic class such
   as .zemora-faq rather than .zemora-section, so an ancestor selector on
   .zemora-section misses them. Match the nested wrap itself. */
.zemora-faq-wrap.zemora-faq-wrap,
.zemora-section [class*="zemora-"][class*="-wrap"],
.zemora-section .zemora-section {
  padding-block: 0 !important;
}
.zemora-faq-wrap > .e-con-inner > .elementor-element {
  padding-block: 0 !important;
}

/* ==========================================================================
   Zemora Connect console mock (.zcx)
   --------------------------------------------------------------------------
   Replaces the old zc-* block. Built as a flex column at full height so the
   panel distributes its space instead of leaving ~250px empty at the bottom
   when the text column is taller. The stat strip is real content filling
   what used to be void - and reuses the figures the previous block already
   carried, rather than inventing new ones.
   ========================================================================= */

.zcx {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  min-height: 420px;
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, #1a1f3a 0%, #0a0c17 100%);
  border: 1px solid rgba(139, 92, 246, 0.18);
  font-family: 'Space Grotesk', sans-serif;
}

.zcx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.14);
}
.zcx-url {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.zcx-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: #22d3ee;
  white-space: nowrap;
}
.zcx-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
}

/* Slack is spread between every band rather than pooled in one gap: the
   panel stretches to the text column, and space-between keeps head, calls,
   flow, stats and footer evenly separated at any height. */
.zcx { justify-content: space-between; }
.zcx-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.zcx-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(139, 92, 246, 0.12);
}
.zcx-row--live { border-color: rgba(34, 211, 238, 0.42); }

.zcx-av {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 700;
  color: #cdd3e6;
  background: rgba(255, 255, 255, 0.06);
}
.zcx-av--ai { background: #22d3ee; color: #05060d; }

.zcx-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.zcx-txt b { font-size: 13.5px; font-weight: 700; color: #fff; }
.zcx-txt em {
  font-style: normal;
  font-size: 12px;
  color: #6a7196;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.zcx-tag {
  flex: 0 0 auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
}
.zcx-tag--live { background: rgba(34, 211, 238, 0.14); color: #22d3ee; }
.zcx-tag--ai   { background: rgba(34, 211, 238, 0.9);  color: #05060d; font-weight: 700; }
.zcx-tag--hold { background: rgba(251, 146, 60, 0.16); color: #fb923c; }

.zcx-flow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(139, 92, 246, 0.1);
}
.zcx-flow i { font-style: normal; color: #6a7196; font-size: 13px; }
.zcx-node {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  padding: 5px 10px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  color: #a4a9c5;
  white-space: nowrap;
}
.zcx-node--end { background: rgba(34, 211, 238, 0.16); color: #22d3ee; }

/* The strip that fills what used to be dead space. */
.zcx-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.zcx-stats > div {
  padding: 12px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(139, 92, 246, 0.12);
  text-align: center;
}
.zcx-stats b {
  display: block;
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.zcx-stats span {
  display: block;
  margin-top: 2px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: #6a7196;
}

.zcx-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(139, 92, 246, 0.14);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: #6a7196;
}
.zcx-foot i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
}

@media (max-width: 767px) {
  .zcx { min-height: 0; padding: 16px; gap: 12px; }
  .zcx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .zcx-stats b { font-size: 16px; }
  .zcx-row { padding: 10px 12px; }
}

/* ------------------------------------------------------------ team art -- */

/* The three headshots have different backdrops (light, dark and blue), so the
   row read as three unrelated images. A consistent ring and ground gives them
   a common frame without touching the source photos. */
.zemora-member-photo img,
.zemora-team-card img,
.zemora-team .elementor-widget-image img {
  border-radius: 50% !important;
  border: 2px solid rgba(139, 92, 246, 0.32) !important;
  background: #11142a !important;
  object-fit: cover;
}

/* ---------------------------------------------------------------- focus -- */

a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--z-brand-secondary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------- header layout -- */

/* At 1280 the six nav items measure 654px against 1214px of container with
   270px to spare, yet the list wrapped onto a second line.
   The three header columns are laid out by Elementor with space-between and
   deliberately sized containers; an earlier attempt to re-flex them squeezed
   the nav to 272px and spilled the items across the logo. So the columns are
   left exactly as they are and only the list is stopped from wrapping. */
@media (min-width: 1025px) {
  .zemora-nav .elementskit-navbar-nav {
    flex-wrap: nowrap !important;
  }
  .zemora-nav .elementskit-navbar-nav > li,
  .zemora-nav .elementskit-navbar-nav > li > a {
    white-space: nowrap;
  }
}

/* Slightly tighter item spacing on the narrower desktop range, which is where
   the wrap was happening. */
@media (min-width: 1025px) and (max-width: 1365px) {
  .zemora-nav .elementskit-navbar-nav > li > a {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* --------------------------------------------------------- header seam -- */

/* The two bars sit flush (gap measured 0px) but read as separated, because
   they were painted differently: the top bar solid #0A0C17, the nav
   rgba(5,6,13,.85) over a blur - and the top bar carried its own bottom
   border, drawing a line straight through the middle of the header.
   One surface, one edge, at the bottom. */
.zemora-topbar.zemora-topbar {
  background: rgba(8, 10, 18, 0.88) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 0 !important;
}
.zemora-nav.zemora-nav {
  background: rgba(8, 10, 18, 0.88) !important;
  border-bottom: 1px solid rgba(139, 92, 246, 0.14) !important;
  /* Requested: no vertical padding on the nav bar. Horizontal padding is
     kept so the logo and CTA still clear the viewport edges. The header
     offset script measures the bar, so the body padding and anchor
     scroll-offset follow the new height automatically. */
  padding-block: 0 !important;
}

/* The CTA's widget wrapper carries linear-gradient(transparent -> cyan) and is
   340px wide, while the button inside it is 135px - so it painted a faint slab
   across the header to the left of the button. The gradient belongs to the
   button, which has its own; the wrapper should paint nothing. */
.zemora-nav .elementor-widget-button,
.zemora-nav .elementor-widget-button > .elementor-widget-container,
.zemora-nav .elementor-widget-button .elementor-button-wrapper {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* A hairline between the bars, set inside the header rather than as a border
   on the top bar, so it reads as a divider instead of an edge. */
.zemora-topbar.zemora-topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(139, 92, 246, 0.07);
  pointer-events: none;
}

/* ------------------------------------------------------ header container - */

/* The header bars are full-bleed by design, but their contents should line up
   with the 1280px grid the rest of the site uses instead of drifting to the
   edges of a 2560px display. */
.zemora-topbar > .e-con-inner,
.zemora-nav > .e-con-inner {
  max-width: 1280px !important;
  margin-inline: auto !important;
  width: 100% !important;
}

@media (min-width: 1600px) {
  .zemora-topbar { padding-inline: max(32px, calc((100vw - 1280px) / 2)) !important; }
  .zemora-nav    { padding-inline: max(32px, calc((100vw - 1280px) / 2)) !important; }
}

/* --------------------------------------------------------- no overflow -- */

/* Dropdown panels near the right edge would otherwise extend past the
   viewport. Anchor the last two groups to their right edge instead. */
@media (min-width: 1025px) {
  .elementskit-navbar-nav > li:nth-last-child(-n+2) .elementskit-submenu-panel {
    left: auto !important;
    right: 0 !important;
  }
}

/* Two genuine overflow causes, fixed at source rather than clipped:

   1. The home page hero intro widget carries a hard max-width: 560px from
      Elementor with no responsive override, so on a 390px viewport it ran
      208px past the edge and the copy was cut off mid-word.
   2. The blog listing uses a bootstrap-style row with negative side margins,
      which pushed the grid 5px wide.

   overflow-x: clip below is a backstop for anything added later - it is not
   what is holding these two together. */
@media (max-width: 1024px) {
  .zemora-hero .elementor-widget,
  .zemora-hero .elementor-widget-text-editor,
  .zemora-hero .elementor-widget-heading {
    max-width: 100% !important;
  }
}

.ekit-row.post-items {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* At 320px the header row needs 306px of content (logo 110 + CTA 135 +
   toggle 45 + gaps) inside a 286px inner box, so the toggle was pushed 3px
   past the edge. Rather than drop the CTA, each piece gives back a little.
   Measured after: 88 + 108 + 45 + gaps fits with room to spare. */
@media (max-width: 380px) {
  .zemora-nav,
  .zemora-nav.elementor-element {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .zemora-nav > .e-con-inner { gap: 6px !important; }

  .zemora-logo img,
  .zemora-nav .zemora-logo img { width: 88px !important; height: auto !important; }

  .zemora-nav .elementor-button {
    padding: 9px 12px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
  .elementskit-menu-hamburger,
  .elementskit-menu-hamburger.elementskit-menu-toggle {
    padding: 8px !important;
    min-width: 38px;
    min-height: 38px;
  }
}

html, body { overflow-x: clip; }

/* ------------------------------------------------------- mobile menu ---- */

/* Everything in this block is mobile-only.
   An earlier revision left the toggle and panel rules unscoped, which put a
   654x60 slab of #0A0C17 behind the desktop nav (the menu container is only
   meant to be a surface once it becomes the off-canvas panel) and forced the
   hamburger visible at 1440px. Both now stay inside the media query. */
@media (max-width: 1024px) {
  /* ElementsKit ships the toggle with an orange border (#FF5E13) and black
     bars, which on a near-black header reads as an orange box containing
     nothing. */
  .elementskit-menu-hamburger,
  .elementskit-menu-hamburger.elementskit-menu-toggle {
    border: 1px solid rgba(139, 92, 246, 0.28) !important;
    background: rgba(139, 92, 246, 0.10) !important;
    border-radius: 10px !important;
    padding: 10px !important;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background-color 160ms ease, border-color 160ms ease;
  }
  .elementskit-menu-hamburger:hover {
    background: rgba(34, 211, 238, 0.14) !important;
    border-color: var(--z-brand-secondary) !important;
  }

  /* The three bars are spans with a background colour, not a font glyph. */
  .elementskit-menu-hamburger .elementskit-menu-hamburger-icon {
    background-color: #ffffff !important;
    height: 2px !important;
    border-radius: 2px !important;
  }
  .elementskit-menu-hamburger:hover .elementskit-menu-hamburger-icon {
    background-color: var(--z-brand-secondary) !important;
  }

  /* Off-canvas panel: site ground, not the default light card. */
  .elementskit-menu-offcanvas-elements,
  .elementskit-navbar-nav-default .elementskit-menu-container {
    background-color: #0a0c17 !important;
  }
}

/* On desktop the menu container is just a wrapper around the list - it must
   not paint anything. ElementsKit gives it a background and a gradient that
   showed as a lighter block behind the nav items. */
@media (min-width: 1025px) {
  .elementskit-menu-container,
  .elementskit-navbar-nav-default .elementskit-menu-container,
  .elementskit-menu-offcanvas-elements {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }
}

.elementskit-menu-close {
  color: #ffffff !important;
  border: 1px solid rgba(139, 92, 246, 0.28) !important;
  border-radius: 10px !important;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.elementskit-menu-close:hover {
  color: var(--z-brand-secondary) !important;
  border-color: var(--z-brand-secondary) !important;
}

.elementskit-menu-overlay {
  background-color: rgba(5, 6, 13, 0.72) !important;
  backdrop-filter: blur(2px);
}

/* Stacked panel rows read as a list, with separators rather than cards. */
@media (max-width: 1024px) {
  /* ElementsKit sets the stacked rows to #000000, which is invisible on the
     dark off-canvas panel - only the active item was readable. */
  .elementskit-navbar-nav > li > a,
  .elementskit-navbar-nav > li.menu-item > a {
    color: #a4a9c5 !important;
    font-size: 16px !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.10) !important;
  }
  .elementskit-navbar-nav > li > a:hover,
  .elementskit-navbar-nav > li.menu-item > a:hover {
    color: #ffffff !important;
  }
  .elementskit-navbar-nav > li.zemora-nav-active > a {
    color: var(--z-brand-secondary) !important;
  }

  /* Submenu expand control: visible affordance, brand on interaction. */
  .elementskit-navbar-nav .elementskit-submenu-indicator,
  .elementskit-navbar-nav .ekit-menu-dropdown-icon {
    color: #a4a9c5 !important;
    border-color: rgba(139, 92, 246, 0.28) !important;
    opacity: 1 !important;
  }
  .elementskit-navbar-nav .elementskit-submenu-indicator:hover,
  .elementskit-navbar-nav .ekit-menu-dropdown-icon:hover {
    color: var(--z-brand-secondary) !important;
    border-color: var(--z-brand-secondary) !important;
  }

  /* Rows inside an expanded group sit one step in and one step quieter. */
  .elementskit-navbar-nav .elementskit-submenu-panel > li > a {
    color: #8c93ad !important;
    font-size: 15px !important;
    padding: 10px 14px !important;
  }
  .elementskit-navbar-nav .elementskit-submenu-panel > li > a:hover {
    color: #ffffff !important;
  }
  .elementskit-navbar-nav .elementskit-submenu-panel {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    padding: 4px 0 8px 12px !important;
  }
}

/* ------------------------------------------------------------- touch ---- */

@media (max-width: 1024px) {
  /* Comfortable tap targets in the mobile panel. */
  .elementskit-navbar-nav li a {
    min-height: 44px;
    display: flex !important;
    align-items: center;
  }
  /* The submenu toggle is a real control; give it a real target. */
  .elementskit-navbar-nav .elementskit-submenu-indicator {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  /* Active indicator becomes a left rule in the stacked panel, where a
     bottom border would read as a separator between items. */
  .elementskit-navbar-nav > li.zemora-nav-active::after {
    left: 0;
    right: auto;
    top: 6px;
    bottom: 6px;
    width: 2px;
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
  .elementor-heading-title a,
  .elementor-widget-text-editor a,
  .zemora-lp-prose a { transition: none !important; }
}