/* xftech Elementor bridge: keeps the static design language while using native Elementor elements. */

/* ---------- Elementor neutralisation inside converted pages ----------
   This file is loaded BEFORE the converted stylesheet so that any rule in the
   original design wins a specificity tie. */

/* Containers default to normal block flow, exactly like the original markup.
   Any display:flex / display:grid declared by the design stylesheet then wins
   the specificity tie because styles.css loads after this file. */
.elementor-page :where(.e-con) { display: block; width: auto; }

/* Containers: remove Elementor's default padding/gap so the original spacing
   rules from styles.css control the layout. */
.elementor-page .e-con {
  --flex-direction: row;
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
  --margin-top: 0px;
  --margin-right: 0px;
  --margin-bottom: 0px;
  --margin-left: 0px;
}

/* Widgets contribute no extra spacing and must not create a positioning context
   for absolutely positioned design elements (overlays, card images). Keeping
   this at one-class specificity lets the design stylesheet override it. */
.elementor-page :where(.elementor-widget) {
  position: static;
  width: auto;
  margin: 0;
}
.elementor-page .elementor-widget-container { margin: 0; }

/* Rich-text widgets: let the original element participate directly in the
   parent grid/flex layout, exactly as it did in the static markup. The wrapper
   must never become a grid/flex item or a box of its own, otherwise design
   selectors such as `.company-proof-grid div` land on the wrapper. */
.elementor-page .elementor-widget-text-editor { display: contents !important; }

/* Headings: the design classes are applied to the widget wrapper, so the inner
   heading tag inherits them. Typography is intentionally NOT reset here: the
   design sets it through bare tag rules (h1-h4), and Elementor's global
   typography is aligned with the design (Sora / DM Sans) in the Kit. */
:is(h1, h2, h3, h4, h5, h6).elementor-heading-title {
  padding: 0;
  margin: 0;
  color: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

/* Astra applies its own per-tag line-height to Elementor headings
   (1.4em for h1, 1.3em for h2...), which breaks the design's tight heading
   rhythm. Mirror the design's global values at the same specificity as the
   design's section rules so styles.css still wins those ties. */
.elementor-widget-heading :is(h1, h2, h3, h4) { line-height: 1.08; }
.elementor-widget-heading :is(h5, h6) { line-height: 1.6; }
.elementor-page .elementor-widget-image { line-height: 0; }

/* Hero background images: the class moved from the <img> to the image widget. */
.elementor-widget-image.hero-slide-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Block-level anchors converted to containers get a transparent overlay link. */
.xf-link-host { position: relative; }
.xf-link-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
}

/* ---------- XPRO header ---------- */
/* The design header is fixed and the page reserves its height (main padding in
   the static build). Elementor pages get the same reservation here. */
.elementor-page { padding-top: var(--header-h); }

#xf-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  background: rgba(244, 246, 240, 0.96);
  border-bottom: 1px solid rgba(17, 21, 17, 0.09);
  box-shadow: 0 1px 0 rgba(24, 32, 25, 0.06);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
#xf-header.is-scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 30px rgba(17, 21, 17, 0.07);
}
#xf-header .xf-utility-bar { flex: 0 0 var(--utility-h); }
#xf-header .xf-nav-bar { flex: 0 0 var(--nav-h); }
.xf-utility-bar {
  background: #101510;
  color: rgba(248, 245, 240, 0.82);
  font-size: 13px;
}
.xf-utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 40px;
}
.xf-utility-links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.xf-utility-links a { color: inherit; display: inline-flex; align-items: center; gap: 7px; }
.xf-utility-links a:hover { color: #fff; }
.xf-utility-right { display: flex; align-items: center; gap: 18px; }
.xf-utility-right .xpro-elementor-social-icons { display: flex; align-items: center; gap: 12px; }
.xf-utility-right .xpro-elementor-social-icons a { color: rgba(248, 245, 240, 0.72); font-size: 12px; }
.xf-utility-right .xpro-elementor-social-icons a:hover { color: var(--signal); }
.xf-utility-social .xpro-social-icon-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.xf-utility-social .xpro-social-icon-wrapper li { margin: 0; }
.xf-utility-social .xpro-social-icon {
  color: rgba(248, 245, 240, 0.72);
  font-size: 12px;
  line-height: 1;
  transition: color 0.2s ease;
}
.xf-utility-social .xpro-social-icon:hover { color: var(--signal); }
.xf-language { color: rgba(248, 245, 240, 0.72); white-space: nowrap; }
.xf-language select {
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 13px;
  padding: 2px 0;
}
.xf-language select option { color: var(--ink); }

.xf-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 78px;
}
.xf-brand .elementor-widget-container { line-height: 1; }
.xf-brand a, .xf-brand span { text-decoration: none; }
.xf-brand-title,
.xf-brand .xpro-site-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink) !important;
}
.xf-brand-title::before,
.xf-brand .xpro-site-title::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 4px rgba(196, 140, 91, 0.16);
}
.xf-brand .xpro-site-title-text::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 2px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: baseline;
}
.xf-menu { flex: 1 1 auto; display: flex; justify-content: center; }
.xf-menu .xpro-elementor-horizontal-navbar-wrapper { width: 100%; display: flex; justify-content: center; }
.xf-menu .xpro-elementor-horizontal-navbar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.xf-menu .xpro-elementor-horizontal-navbar-nav > li > a {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  padding: 8px 0;
}
.xf-menu .xpro-elementor-horizontal-navbar-nav > li > a:hover,
.xf-menu .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a { color: var(--signal-deep); }
.xf-nav-cta .xpro-elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  padding: 13px 22px;
  font-weight: 600;
  font-size: 14px;
}
.xf-nav-cta .xpro-elementor-button:hover { background: var(--signal-deep); color: #fff; }

/* ---------- XPRO footer ---------- */
.xf-footer {
  background: #101510;
  color: rgba(248, 245, 240, 0.76);
  padding: 76px 0 26px;
}
.xf-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
  gap: 52px;
}
.xf-footer .xf-footer-title {
  color: rgba(248, 245, 240, 0.46);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 18px;
}
.xf-footer a { color: rgba(248, 245, 240, 0.78); }
.xf-footer a:hover { color: var(--signal); }
.xf-footer-brand p { max-width: 320px; margin: 18px 0 22px; }
.xf-footer-links { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.xf-footer-contact { display: flex; flex-direction: column; gap: 16px; font-size: 14px; }
.xf-footer-contact small { display: block; color: rgba(248, 245, 240, 0.42); font-size: 12px; margin-top: 2px; }
.xf-footer-social .xpro-elementor-social-icons { display: flex; gap: 14px; }
.xf-footer-social .xpro-social-icon-wrapper {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.xf-footer-social .xpro-social-icon { color: rgba(248, 245, 240, 0.78); font-size: 15px; }
.xf-footer-social .xpro-social-icon:hover { color: var(--signal); }
.xf-footer-bottom {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: rgba(248, 245, 240, 0.42);
  font-size: 12px;
}
.xf-footer-bottom a { color: inherit; }
.xf-footer-brand .xf-brand-title { color: var(--paper) !important; }

@media (max-width: 1024px) {
  .xf-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .xf-utility-inner { justify-content: center; }
  .xf-utility-links { gap: 12px; font-size: 12px; }
  .xf-utility-right { display: none; }
  .xf-nav-bar { min-height: 66px; }
  .xf-footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .xf-footer-bottom { flex-direction: column; }
}

/* ---------- XPRO header/footer markup mapped onto the design classes ----------
   The theme-builder templates reuse the design's own header/footer classes
   (.site-header, .utility-bar, .header-inner, .site-footer, .footer-top...).
   Only the markup produced by XPRO widgets needs bridging. */
.site-header .brand { margin: 0; }
.site-header .brand .xpro-site-title {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}
.site-header .brand .xpro-site-title::before,
.site-footer .brand .xpro-site-title::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 50%, transparent 0 4.5px, var(--paper) 4.6px 6.4px, transparent 6.5px),
    radial-gradient(circle at 76% 76%, var(--signal) 0 3px, transparent 3.1px),
    var(--ink);
}
.site-header .brand .xpro-site-title-text::after,
.site-footer .brand .xpro-site-title-text::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 3px;
  border-radius: 50%;
  background: var(--signal-deep);
  vertical-align: baseline;
}

/* Horizontal menu -> desktop nav */
.site-header .desktop-nav { margin-left: auto; }
.site-header .desktop-nav .xpro-elementor-horizontal-navbar-wrapper {
  display: flex;
  width: 100%;
}
.site-header .desktop-nav .xpro-elementor-horizontal-navbar-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-header .desktop-nav .xpro-elementor-horizontal-navbar-nav > li { margin: 0; }
.site-header .desktop-nav .xpro-elementor-horizontal-navbar-nav > li > a {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 27px 0 25px;
  color: #4d564f;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}
.site-header .desktop-nav .xpro-elementor-horizontal-navbar-nav > li > a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 18px;
  left: 0;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}
.site-header .desktop-nav .xpro-elementor-horizontal-navbar-nav > li > a:hover,
.site-header .desktop-nav .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a {
  color: var(--ink);
}
.site-header .desktop-nav .xpro-elementor-horizontal-navbar-nav > li > a:hover::after,
.site-header .desktop-nav .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a::after {
  transform: scaleX(1);
}

/* Header call to action */
/* The design class sits on the widget wrapper here; its inline padding belongs
   on the anchor inside, where the design put it. */
.site-header .header-cta { padding-inline: 0; }
.site-header .header-cta .xpro-elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 18px;
  margin: 0;
  color: var(--paper);
  background: var(--ink);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background 180ms ease;
}
.site-header .header-cta .xpro-elementor-button:hover { background: var(--signal-deep); color: #fff; }
.site-header .header-cta .xpro-elementor-button-inner { gap: 12px; }
.site-header .header-cta .xpro-elementor-button-media svg { width: 18px; height: 18px; }
.site-header .header-cta .xpro-elementor-button-media { margin-left: 0; }

/* Utility social icons */
.site-header .utility-social .xpro-social-icon-wrapper,
.site-header .utility-actions .xpro-social-icon-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-header .utility-social .xpro-social-icon,
.site-header .utility-actions .xpro-social-icon {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: var(--ink);
  border: 1px solid rgba(24, 32, 25, 0.28);
  border-radius: 50%;
  font-size: 9px;
  line-height: 1;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.site-header .utility-social .xpro-social-icon:hover,
.site-header .utility-actions .xpro-social-icon:hover {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
/* The design uses two-letter labels (in / ig / yt ...) inside the circles,
   not brand glyphs. */
.site-header .utility-social .xpro-social-icon svg { display: none; }
/* Elementor gives form controls a drop shadow; the design has none. */
.language-switcher select { box-shadow: none; }
.site-header .utility-social .xpro-social-icon .xpro-social-icon-title {
  display: block;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

/* Footer */
.site-footer .brand .xpro-site-title {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
}
.site-footer .brand .xpro-site-title::before {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 4.5px, var(--ink) 4.6px 6.4px, transparent 6.5px),
    radial-gradient(circle at 76% 76%, var(--blue) 0 3px, transparent 3.1px),
    var(--signal);
}
.site-footer .brand .xpro-site-title-text::after { background: var(--signal); }
.site-footer .footer-social .xpro-social-icon-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}
.site-footer .footer-social .xpro-social-icon {
  display: inline-flex;
  width: auto !important;
  height: auto !important;
  align-items: center;
  gap: 6px;
  padding: 0 0 2px !important;
  color: rgba(255, 255, 255, 0.7);
  background: none !important;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0 !important;
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
}
.site-footer .footer-social .xpro-social-icon svg { display: none !important; }
.site-footer .footer-social .xpro-social-icon:hover {
  color: var(--signal);
  border-color: var(--signal);
}
.site-footer .footer-top > .e-con { min-width: 0; }

/* Elementor containers centre their children on the cross axis by default.
   The design header is a flex column whose two bars must span the full width. */
.site-header { align-items: stretch; }
/* Elementor's `.e-con.e-flex` sets `flex-direction: var(--flex-direction)`
   at two-class specificity, so the design's `column` needs the same weight. */
.site-header.e-con { flex-direction: column; flex-wrap: nowrap; }
/* The header reserves --header-h including its 1px rule; with Elementor's
   default wrapping a 1px overflow would push the nav bar into a second column
   of the flex layout (off-canvas to the right). */
/* Only the bar itself must span the header; `.container` elements
   (utility-inner, header-inner) keep the design's capped width. */
.site-header > .utility-bar { width: 100%; }

/* ---------- Horizontal menu responsive behaviour ----------
   XPRO collapses the menu into an off-canvas drawer at 1024px, while the
   design switches to a full-width panel under the fixed header at 960px.
   Between those two widths the design still shows the inline nav, so the
   widget's drawer mode is neutralised there. */
@media (min-width: 961px) and (max-width: 1024px) {
  .site-header .desktop-nav .xpro-elementor-horizontal-navbar-wrapper {
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    padding: 0;
    overflow: visible;
    text-align: left;
    background: none;
    transform: none;
    z-index: auto;
  }
  .site-header .desktop-nav .xpro-elementor-horizontal-menu-toggler-wrapper,
  .site-header .desktop-nav .xpro-elementor-horizontal-menu-close,
  .site-header .desktop-nav .xpro-elementor-horizontal-menu-overlay { display: none !important; }
  .site-header .desktop-nav .xpro-elementor-horizontal-navbar-nav {
    flex-direction: row;
    align-items: center;
    padding-top: 0;
  }
  .site-header .desktop-nav .xpro-elementor-horizontal-navbar-nav > li { width: auto; }
  .site-header .desktop-nav .xpro-elementor-horizontal-navbar-nav > li > a {
    display: inline-block;
    width: auto;
    min-height: 0;
    padding: 27px 0 25px;
    border: 0;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
  }
}

@media (max-width: 960px) {
  /* The design hides the inline nav and shows a hamburger; the widget keeps
     its own toggler inside .desktop-nav, so keep the widget visible. */
  .site-header .desktop-nav {
    display: block;
    margin-left: auto;
  }
  .site-header .desktop-nav .xpro-elementor-horizontal-navbar-wrapper {
    top: var(--header-h);
    width: 100%;
    max-width: 100%;
    height: calc(100dvh - var(--header-h));
    padding: 24px;
    overflow-y: auto;
    text-align: left;
    background: var(--paper);
    border-top: 1px solid var(--line);
  }
  .site-header .desktop-nav .xpro-elementor-horizontal-menu-overlay,
  .site-header .desktop-nav .xpro-elementor-horizontal-menu-close { display: none !important; }
  .site-header .desktop-nav .xpro-elementor-horizontal-navbar-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding-top: 0;
    counter-reset: navitem;
  }
  .site-header .desktop-nav .xpro-elementor-horizontal-navbar-nav > li {
    width: 100%;
    counter-increment: navitem;
  }
  .site-header .desktop-nav .xpro-elementor-horizontal-navbar-nav > li > a {
    display: flex;
    width: 100%;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0 4px;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
  }
  .site-header .desktop-nav .xpro-elementor-horizontal-navbar-nav > li > a::after {
    position: static;
    height: auto;
    background: none;
    transform: none;
    content: counter(navitem, decimal-leading-zero);
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
  }

  /* Hamburger matches the design's 44px outlined button. */
  .site-header .desktop-nav .xpro-elementor-horizontal-menu-toggler-wrapper {
    display: block;
    margin: 0;
  }
  .site-header .desktop-nav .xpro-elementor-horizontal-menu-toggler {
    position: relative;
    display: grid;
    width: 44px !important;
    height: 44px !important;
    padding: 0;
    place-items: center;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 0 !important;
    line-height: 1;
    cursor: pointer;
  }
  /* The design renders its three bars inline, which reads as one short line. */
  .site-header .desktop-nav .xpro-elementor-horizontal-menu-toggler i {
    display: block;
    width: 30px;
    height: 2px;
    margin: 0;
    background: var(--ink);
    transition: opacity 180ms ease;
  }
  .site-header .desktop-nav .xpro-elementor-horizontal-menu-toggler::before,
  .site-header .desktop-nav .xpro-elementor-horizontal-menu-toggler::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 19px;
    height: 2px;
    background: var(--ink);
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: transform 180ms ease, opacity 180ms ease;
  }
  .site-header .desktop-nav .xpro-elementor-horizontal-navbar-wrapper.active
    ~ .xpro-elementor-horizontal-menu-toggler-wrapper i { opacity: 0; }
  .site-header .desktop-nav .xpro-elementor-horizontal-navbar-wrapper.active
    ~ .xpro-elementor-horizontal-menu-toggler-wrapper .xpro-elementor-horizontal-menu-toggler::before {
      opacity: 1;
      transform: translate(-50%, -50%) rotate(45deg);
    }
  .site-header .desktop-nav .xpro-elementor-horizontal-navbar-wrapper.active
    ~ .xpro-elementor-horizontal-menu-toggler-wrapper .xpro-elementor-horizontal-menu-toggler::after {
      opacity: 1;
      transform: translate(-50%, -50%) rotate(-45deg);
    }
}

/* The XPRO widget ships its own mobile palette (grey drawer, grey links) as
   per-element CSS at high specificity; the design's paper-on-ink palette has
   to win explicitly. */
@media (max-width: 960px) {
  .site-header .desktop-nav .xpro-elementor-horizontal-navbar-wrapper,
  .site-header .desktop-nav .xpro-elementor-horizontal-menu-responsive-tablet {
    width: 100% !important;
    max-width: 100% !important;
    background-color: var(--paper) !important;
  }
  .site-header .desktop-nav .xpro-elementor-horizontal-navbar,
  .site-header .desktop-nav .xpro-elementor-horizontal-navbar-nav { width: 100%; }
  .site-header .desktop-nav .xpro-elementor-horizontal-navbar-nav > li > a,
  .site-header .desktop-nav .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a {
    color: var(--ink) !important;
    background: transparent !important;
    border-bottom-color: var(--line) !important;
  }
  .site-header .desktop-nav .xpro-elementor-horizontal-navbar-nav > li > a:hover {
    color: var(--signal-deep) !important;
  }
}

/* The design's mobile panel ends with a full-width dark CTA. xftech.js moves
   this native XPRO button widget into the menu drawer. */
.site-header .mobile-panel-cta { display: none; }
.site-header .xpro-elementor-horizontal-navbar .mobile-panel-cta {
  display: block;
  margin-top: 28px;
}
@media (min-width: 961px) {
  .site-header .xpro-elementor-horizontal-navbar .mobile-panel-cta { display: none; }
}
.site-header .mobile-panel-cta .elementor-widget-container { width: 100%; }
.site-header .mobile-panel-cta .xpro-elementor-button {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  color: var(--white);
  background: var(--ink);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.site-header .mobile-panel-cta .xpro-elementor-button:hover { background: #2b332d; color: var(--white); }

/* ---------------------------------------------------------------------------
   Contact page: native WPForms widget dressed as the design's .form-grid.
   WPForms Lite renders the four Lite fields plus two anti-spam fields; the
   layout is rebuilt on the field container so no HTML widget is needed.
   --------------------------------------------------------------------------- */
.contact-wpform .wpforms-container { margin-bottom: 0; }
.contact-wpform .wpforms-form { margin: 0; }
.contact-wpform .wpforms-field-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.contact-wpform .wpforms-field {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.contact-wpform .wpforms-field-name { grid-column: 1; }
.contact-wpform .wpforms-field-email { grid-column: 2; }
.contact-wpform .wpforms-field-text,
.contact-wpform .wpforms-field-textarea { grid-column: 1 / -1; }
/* Anti-spam honeypots are not visible in the design. */
.contact-wpform .wpforms-field[data-field-id="5"],
.contact-wpform .wpforms-field[data-field-id="6"] { display: none; }
.contact-wpform .wpforms-field-label {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}
.contact-wpform .wpforms-required-label { color: inherit; font-weight: inherit; }
.contact-wpform .wpforms-field input[type="text"],
.contact-wpform .wpforms-field input[type="email"],
.contact-wpform .wpforms-field input[type="tel"],
.contact-wpform .wpforms-field textarea {
  width: 100%;
  padding: 14px 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  outline: none;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.contact-wpform .wpforms-field textarea { min-height: 150px; resize: vertical; }
.contact-wpform .wpforms-field input:focus,
.contact-wpform .wpforms-field textarea:focus {
  background: var(--white);
  border-color: var(--ink);
  box-shadow: none;
}
.contact-wpform .wpforms-field input::placeholder,
.contact-wpform .wpforms-field textarea::placeholder { color: #8a928a; opacity: 1; }
.contact-wpform .wpforms-field-description {
  margin: 6px 0 0;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.5;
}
.contact-wpform .wpforms-submit-container { padding: 0; margin-top: 20px; text-align: left; }
.contact-wpform .wpforms-submit {
  display: inline-flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 22px;
  color: var(--white);
  background: var(--ink);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background-color 180ms ease;
}
.contact-wpform .wpforms-submit:hover { background: #2b332d; color: var(--white); }
.contact-wpform .wpforms-submit::after {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  content: "";
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 680px) {
  .contact-wpform .wpforms-field-container { grid-template-columns: 1fr; }
  .contact-wpform .wpforms-field-name,
  .contact-wpform .wpforms-field-email { grid-column: 1 / -1; }
}
/* ---------------------------------------------------------------------------
   Contact page: native WPForms widget dressed as the design's .form-grid.
   WPForms Lite renders the four Lite fields plus two anti-spam fields; the
   layout is rebuilt on the field container so no HTML widget is needed.
   The ID prefix outranks WPForms' own `div.wpforms-container-full` selectors.
   --------------------------------------------------------------------------- */
.contact-wpform .wpforms-container.wpforms-container-full { margin: 0; }
.contact-wpform #wpforms-form-435 { margin: 0; }
.contact-wpform #wpforms-form-435 .wpforms-field-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.contact-wpform #wpforms-form-435 .wpforms-field {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.contact-wpform #wpforms-form-435 .wpforms-field-name { grid-column: 1; }
.contact-wpform #wpforms-form-435 .wpforms-field-email { grid-column: 2; }
.contact-wpform #wpforms-form-435 .wpforms-field-text,
.contact-wpform #wpforms-form-435 .wpforms-field-textarea { grid-column: 1 / -1; }
/* Anti-spam honeypots are not visible in the design. */
.contact-wpform #wpforms-form-435 .wpforms-field[data-field-id="5"],
.contact-wpform #wpforms-form-435 .wpforms-field[data-field-id="6"] { display: none; }
.contact-wpform #wpforms-form-435 .wpforms-field-label {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
}
.contact-wpform #wpforms-form-435 .wpforms-required-label { color: inherit; font-weight: inherit; }
.contact-wpform #wpforms-form-435 .wpforms-field input[type="text"],
.contact-wpform #wpforms-form-435 .wpforms-field input[type="email"],
.contact-wpform #wpforms-form-435 .wpforms-field input[type="tel"],
.contact-wpform #wpforms-form-435 .wpforms-field textarea {
  width: 100%;
  max-width: 100%;
  height: auto;
  padding: 14px 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  outline: none;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.contact-wpform #wpforms-form-435 .wpforms-field textarea {
  height: 150px;
  min-height: 150px;
  resize: vertical;
}
.contact-wpform #wpforms-form-435 .wpforms-field input:focus,
.contact-wpform #wpforms-form-435 .wpforms-field textarea:focus {
  background: var(--white);
  border-color: var(--ink);
  box-shadow: none;
}
.contact-wpform #wpforms-form-435 .wpforms-field input::placeholder,
.contact-wpform #wpforms-form-435 .wpforms-field textarea::placeholder {
  color: #8a928a;
  opacity: 1;
}
.contact-wpform #wpforms-form-435 .wpforms-field-description {
  margin: 6px 0 0;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.5;
}
.contact-wpform #wpforms-form-435 .wpforms-submit-container {
  padding: 0;
  margin: 20px 0 0;
  text-align: left;
}
.contact-wpform #wpforms-form-435 .wpforms-submit {
  display: inline-flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 22px;
  color: var(--white);
  background: var(--ink);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background-color 180ms ease;
}
.contact-wpform #wpforms-form-435 .wpforms-submit:hover {
  background: #2b332d;
  color: var(--white);
}
.contact-wpform #wpforms-form-435 .wpforms-submit::after {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  content: "";
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 680px) {
  .contact-wpform #wpforms-form-435 .wpforms-field-container { grid-template-columns: 1fr; }
  .contact-wpform #wpforms-form-435 .wpforms-field-name,
  .contact-wpform #wpforms-form-435 .wpforms-field-email { grid-column: 1 / -1; }
}
.contact-wpform #wpforms-confirmation-435 {
  margin: 0;
  padding: 12px 14px;
  color: #243019;
  background: rgba(196, 140, 91, 0.34);
  border: 1px solid rgba(196, 140, 91, 0.25);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
}
.contact-wpform #wpforms-confirmation-435 p { margin: 0; font-size: 12px; line-height: 1.5; }

/* ---------------------------------------------------------------------------
   The static design fills every media frame with `width/height: 100%` on the
   image. Elementor's `.elementor-widget-image img` rules reset that height to
   auto, leaving a strip of empty container below the photo. Restore the fill
   for every media component the design defines.
   --------------------------------------------------------------------------- */
.elementor-page :is(.hero-visual, .range-card, .service-preview-media, .about-preview-media,
  .page-hero-media, .about-split-media, .series-image, .solution-image, .blog-featured-media,
  .blog-card-media, .article-lead-image, .product-catalog-media, .product-hero-media,
  .support-hero-media, .support-download-media, .support-case-media, .support-hub-media,
  .about-strength-media, .about-company-image) img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The image widget and its optional link sit between the sized frame and the
   image, so they must inherit the frame height for `height: 100%` to resolve. */
.elementor-page :is(.hero-visual, .range-card, .service-preview-media, .about-preview-media,
  .page-hero-media, .about-split-media, .series-image, .solution-image, .blog-featured-media,
  .blog-card-media, .article-lead-image, .product-catalog-media, .product-hero-media,
  .support-hero-media, .support-download-media, .support-case-media, .support-hub-media,
  .about-strength-media, .about-company-image) :is(.elementor-widget-image, .elementor-widget-image a) {
  height: 100%;
}
.elementor-page :is(.hero-visual, .range-card, .service-preview-media, .about-preview-media,
  .page-hero-media, .about-split-media, .series-image, .solution-image, .blog-featured-media,
  .blog-card-media, .article-lead-image, .product-catalog-media, .product-hero-media,
  .support-hero-media, .support-download-media, .support-case-media, .support-hub-media,
  .about-strength-media, .about-company-image) .elementor-widget-image a {
  display: block;
}