/* =========================================================
   Xpert IT - Elementor bridge layer
   Maps Elementor / Elementor Pro widget output onto the
   ported Xpert IT design system (xpertit-design-system.css).
   Tokens come from :root in the design-system file.
   ========================================================= */

/* ---------- Astra chrome removal (Elementor owns the canvas) ---------- */
/* Scoped to Astra's own IDs. The Elementor footer template carries the
   .site-footer class from the port, so matching that class here hid the
   Theme Builder footer on every page. */
#masthead,
#colophon,
.ast-above-header,
.ast-below-header,
.ast-single-entry-banner { display: none !important; }

.site-content .ast-container,
.ast-page-builder-template .site-content > .ast-container { padding: 0 !important; max-width: none !important; }

#page, #content, .site-content { background: transparent; }

body, .ast-page-builder-template .site-content { overflow-x: hidden; }

/* ---------- Section rhythm utilities ---------- */
.xp-section { padding-block: var(--section, clamp(3.5rem, 8vw, 7rem)); }
.xp-section--tight { padding-block: calc(clamp(3.5rem, 8vw, 7rem) * 0.55); }
.xp-section--flush-top { padding-top: 0; }
.xp-section--flush-bottom { padding-bottom: 0; }

/* Grounds */
.xp-bg   { background: var(--bg); }
.xp-bg2  { background: var(--bg-2); }
.xp-bg3  { background: var(--bg-3); }

/* Measure helpers */
.xp-measure  { max-width: 62ch; }
.xp-measure-lead { max-width: 46ch; }

/* Elementor strips margins from headings/text; restore the reference rhythm */
.xp-stack > .elementor-widget:not(:last-child) { margin-bottom: 0; }

/* ---------- Header ---------- */
.xp-header {
  transition: background .3s, box-shadow .3s, height .3s;
}
/* Elementor Pro sticky adds this class once the header leaves the top */
.xp-header.elementor-sticky--effects {
  background: rgba(8, 9, 28, 0.72) !important;
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 1px 0 var(--line), var(--shadow-sm);
}
.xp-header.elementor-sticky--effects .xp-logo img { height: 80px; }
.xp-logo img {
  height: 104px;
  width: auto;
  transition: height .3s;
}

/* ---------- Nav menu (Elementor Pro) ---------- */
.xp-nav .elementor-nav-menu > li > a.elementor-item {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  position: relative;
  padding: 0.3rem 0;
  transition: color .2s;
  fill: #fff;
}
.xp-nav .elementor-nav-menu > li > a.elementor-item::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--grad);
  transition: width .25s var(--ease);
}
.xp-nav .elementor-nav-menu > li > a.elementor-item:hover::after,
.xp-nav .elementor-nav-menu > li > a.elementor-item.elementor-item-active::after,
.xp-nav .elementor-nav-menu > li.current-menu-item > a.elementor-item::after { width: 100%; }

/* Kill Elementor's own underline/pointer animation so ours is the only one */
.xp-nav .e--pointer-underline .elementor-item:after,
.xp-nav .e--pointer-framed .elementor-item:before { display: none; }

.xp-nav .elementor-nav-menu .sub-arrow { margin-left: 0.35rem; }
.xp-nav .elementor-nav-menu .sub-arrow svg,
.xp-nav .elementor-nav-menu .sub-arrow i { transition: transform .25s var(--ease); opacity: .85; }
.xp-nav .elementor-nav-menu > li:hover > a .sub-arrow svg,
.xp-nav .elementor-nav-menu > li:hover > a .sub-arrow i { transform: rotate(180deg); }

/* Desktop dropdown panel */
.xp-nav .elementor-nav-menu--dropdown,
.xp-nav .elementor-nav-menu--main .sub-menu {
  background: var(--surface) !important;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 0.55rem;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.02);
  min-width: 220px;
}
.xp-nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item {
  display: block;
  padding: 0.6rem 0.9rem !important;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.xp-nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item:hover,
.xp-nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item:focus-visible {
  background: var(--grad-soft);
  color: #fff;
}
.xp-nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item::after { display: none; }

/* Mobile drawer */
.xp-nav .elementor-menu-toggle {
  color: #fff;
  background: transparent;
}
.xp-nav .elementor-menu-toggle svg { fill: #fff; width: 28px; height: 28px; }
.xp-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container {
  background: var(--bg) !important;
  background-image: radial-gradient(90% 60% at 80% 0%, rgba(139,47,255,0.25), transparent 60%) !important;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.xp-nav .elementor-nav-menu--dropdown a.elementor-item,
.xp-nav .elementor-nav-menu--dropdown a.elementor-sub-item {
  color: #fff !important;
  font-weight: 700;
  font-size: 1.15rem;
  padding: 0.75rem 1.25rem !important;
}
.xp-nav .elementor-nav-menu--dropdown a.elementor-sub-item {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85) !important;
}
.xp-nav .elementor-nav-menu--dropdown a.elementor-item::after { display: none; }

/* ---------- Buttons (Elementor Button widget -> .btn) ---------- */
.xp-btn .elementor-button {
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 1.5rem;
  background: var(--grad);
  background-size: 180% 180%;
  color: var(--btn-fg);
  border: none;
  border-radius: 999px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(120,50,255,0.4);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-position .5s var(--ease);
}
.xp-btn .elementor-button:hover,
.xp-btn .elementor-button:focus {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(180,40,220,0.5);
  background-position: 100% 0;
  color: var(--btn-fg);
}
.xp-btn .elementor-button:active { transform: translateY(0); }
.xp-btn .elementor-button-icon { transition: transform .25s var(--ease); display: inline-flex; }
.xp-btn .elementor-button:hover .elementor-button-icon { transform: translateX(4px); }
.xp-btn .elementor-button-content-wrapper { align-items: center; gap: 0.55rem; }

/* Ghost */
.xp-btn--ghost .elementor-button {
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.xp-btn--ghost .elementor-button:hover {
  box-shadow: inset 0 0 0 1.5px transparent;
  background: var(--grad-soft);
}
/* Solid white (used on the gradient CTA band) */
.xp-btn--light .elementor-button {
  background: #fff;
  --btn-fg: #0b0b24;
  color: #0b0b24;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.xp-btn--light .elementor-button:hover { background: #fff; color: #0b0b24; }
/* Outline on light/gradient grounds */
.xp-btn--outline-light .elementor-button {
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.4);
}
.xp-btn--outline-light .elementor-button:hover {
  background: rgba(255,255,255,0.14);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.8);
}
/* Large */
.xp-btn--lg .elementor-button { padding: 1.05rem 1.9rem; font-size: 1.05rem; }

/* Text link with sliding arrow */
.xp-textlink .elementor-button {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  box-shadow: none;
  padding: 0;
  font-weight: 700;
}
.xp-textlink .elementor-button:hover { transform: none; box-shadow: none; }
.xp-textlink .elementor-button-icon { -webkit-text-fill-color: var(--g-pink); color: var(--g-pink); }

/* ---------- FAQ (Elementor Accordion, nested + legacy) ---------- */
.xp-faq { max-width: 820px; margin-inline: auto; }

/* Nested accordion (details/summary) */
.xp-faq .e-n-accordion-item {
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.xp-faq .e-n-accordion-item-title {
  padding: 1.35rem 0;
  background: transparent;
  font-family: var(--font);
  font-weight: 700;
  color: #fff;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  gap: 1rem;
}
.xp-faq .e-n-accordion-item-title-text { font-weight: 700; color: #fff; }
.xp-faq .e-n-accordion-item-title-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  display:flex;align-items:center;justify-content:center;
  background: var(--grad-soft);
  color: #fff;
  transition: transform .3s var(--ease), background .3s;
}
.xp-faq details[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon {
  transform: rotate(45deg);
  background: var(--grad);
}
.xp-faq .e-n-accordion-item-title-icon svg { width: 14px; height: 14px; fill: #fff; }
.xp-faq .e-n-accordion-item > .elementor-element,
.xp-faq .e-n-accordion-item-content { padding: 0 0 1.35rem; }
.xp-faq .e-n-accordion-item-content p { color: var(--grey-600); font-size: 0.98rem; }

/* Legacy accordion */
.xp-faq .elementor-accordion { border: none; }
.xp-faq .elementor-accordion-item {
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.xp-faq .elementor-tab-title {
  padding: 1.35rem 0;
  background: transparent !important;
  font-weight: 700;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
}
.xp-faq .elementor-tab-title a,
.xp-faq .elementor-tab-title .elementor-accordion-title { color: #fff; }
.xp-faq .elementor-tab-content {
  background: transparent !important;
  border: none;
  padding: 0 0 1.35rem;
  color: var(--grey-600);
  font-size: 0.98rem;
}
.xp-faq .elementor-accordion-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  display:flex !important;align-items:center;justify-content:center;
  background: var(--grad-soft);
  color: #fff;
  transition: transform .3s var(--ease), background .3s;
}
.xp-faq .elementor-active .elementor-accordion-icon {
  transform: rotate(45deg);
  background: var(--grad);
}

/* ---------- Forms (Elementor Pro Form -> reference form) ---------- */
.xp-form .elementor-field-group > label.elementor-field-label {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink);
  margin-bottom: 0.45rem;
}
.xp-form .elementor-field-group .elementor-field,
.xp-form .elementor-field-group .elementor-field-textual {
  background: var(--bg-3);
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: var(--font);
  font-size: 0.98rem;
  padding: 0.85rem 1rem;
  line-height: 1.5;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.xp-form .elementor-field-group .elementor-field::placeholder { color: var(--grey-400); }
.xp-form .elementor-field-group .elementor-field:focus {
  outline: none;
  background: var(--surface-hi);
  border-color: var(--g-purple);
  box-shadow: 0 0 0 3px rgba(139,47,255,0.2);
}
.xp-form .elementor-field-group select.elementor-field-textual { color: #fff; }
.xp-form .elementor-field-group select.elementor-field-textual option { background: var(--bg-3); color: #fff; }

/* Submit button reuses the primary pill */
.xp-form .elementor-button[type="submit"] {
  background: var(--grad);
  background-size: 180% 180%;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  padding: 0.95rem 1.6rem;
  box-shadow: 0 10px 26px rgba(120,50,255,0.4);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-position .5s var(--ease);
}
.xp-form .elementor-button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(180,40,220,0.5);
  background-position: 100% 0;
}

/* Validation + success states */
.xp-form .elementor-message { font-family: var(--font); font-size: 0.95rem; }
.xp-form .elementor-message-danger,
.xp-form .elementor-field-group .elementor-field.elementor-error { color: var(--red); }
.xp-form .elementor-field-group .elementor-field.elementor-error { border-color: var(--red); }
.xp-form .elementor-message-success {
  color: var(--green);
  background: rgba(34,211,138,0.08);
  border: 1px solid rgba(34,211,138,0.28);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
}

/* ---------- Counter widget -> reference metric ---------- */
.xp-metric .elementor-counter-number-wrapper {
  font-family: var(--font);
  font-weight: 900;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.xp-metric .elementor-counter-title {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--grey-600);
  margin-top: 0.5rem;
}

/* ---------- Full-bleed image band ---------- */
.xp-band { width: 100vw; margin-left: calc(50% - 50vw); line-height: 0; }
.xp-band img { width: 100%; height: auto; display: block; }

/* ---------- Icon plate (gradient-washed square) ---------- */
.xp-plate {
  width: 54px; height: 54px;
  border-radius: 14px;
  display:flex;align-items:center;justify-content:center;
  background: var(--grad-soft);
  border: 1px solid var(--line);
  overflow: hidden;
}
.xp-plate img { width: 30px; height: 30px; object-fit: contain; }
.xp-plate--lg { width: 84px; height: 84px; border-radius: 18px; }
.xp-plate--lg img { width: 48px; height: 48px; }

/* ---------- Gradient text + eyebrow on Elementor headings ---------- */
.xp-gradient-text .elementor-heading-title,
.xp-gradient-text .elementor-widget-container > *,
.xp-gradient-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.xp-eyebrow .elementor-heading-title,
.xp-eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* On the gradient CTA band, accents must go solid white */
.cta-band .xp-gradient-text .elementor-heading-title,
.cta-band .xp-eyebrow .elementor-heading-title {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
}

/* ---------- Hero ---------- */
.xp-hero { position: relative; min-height: 100svh; color: #fff; overflow: hidden; }
.xp-hero-overlay::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,7,27,0.72) 0%, rgba(6,7,27,0.58) 45%, rgba(6,7,27,0.92) 100%);
  z-index: 0;
  pointer-events: none;
}
.xp-hero > .e-con-inner { position: relative; z-index: 1; }

/* Elementor background video should always cover */
.xp-hero .elementor-background-video-container,
.xp-hero .elementor-background-video-hosted { z-index: 0; }
.xp-hero .elementor-background-video-hosted {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------- Headings inside Elementor inherit the reference scale ---------- */
.elementor-widget-heading .elementor-heading-title { font-family: var(--font); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .xp-header, .xp-logo img,
  .xp-btn .elementor-button,
  .xp-plate { transition: none !important; }
  .glow-border::before, .glow-border::after { animation: none !important; }
}

/* ---------- Reference component classes on Elementor elements ----------
   Elementor wraps every widget in .elementor-widget-container, which sits
   between a reference parent and its expected child. These rules let the
   ported selectors (.pillar__icon img, .plan .btn, etc.) keep matching. */

.pillar__icon > .elementor-widget-container,
.svc-card__icon > .elementor-widget-container,
.xp-plate > .elementor-widget-container {
  width: 100%; height: 100%;
  display:flex;align-items:center;justify-content:center;
}
.pillar__icon > .elementor-widget-container img,
.svc-card__icon > .elementor-widget-container img { width: 100%; height: 100%; object-fit: cover; }

/* Elementor image widgets are inline-block figures by default */
.pillar__icon figure, .svc-card__icon figure,
.pillar__icon .elementor-image, .svc-card__icon .elementor-image { width: 100%; height: 100%; margin: 0; }

/* Cards built as Elementor containers keep the reference lift on hover */
.pillar, .svc-card, .step, .plan { height: 100%; }

/* Featured plan tag sits outside the card box */
.plan { overflow: visible; }

/* Brand chips are flex children, not grid items, in the reference */
.brands > .elementor-element { display: flex; }

/* Icon-list rows: reference uses .ic spans, Elementor uses its own markup */
.xp-ticks .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }
.xp-ticks .elementor-icon-list-item { font-weight: 600; }
.xp-ticks .elementor-icon-list-text { color: #fff; }

/* Compare / plan lists inherit the reference type scale */
.compare__col .elementor-icon-list-text { color: rgba(255,255,255,0.85); font-size: 0.92rem; }
.plan__list .elementor-icon-list-text { color: var(--grey-600); font-size: 0.94rem; }
.plan__list .elementor-icon-list-icon { margin-top: 2px; }

/* A button widget pinned to the bottom of a plan card */
.plan > .elementor-widget-button { margin-top: auto; }
.plan .xp-btn .elementor-button { width: 100%; justify-content: center; }

/* Design rule: a card already ringed by the rotating glow-border does not
   also stack a resting drop shadow. Hover depth is kept for the lift. */
.glow-border.pillar,
.glow-border.svc-card,
.glow-border.brand-chip,
.glow-border.plan--featured,
.glow-border.threat,
.glow-border.why-service { box-shadow: none; }

.glow-border.pillar:hover,
.glow-border.svc-card:hover,
.glow-border.brand-chip:hover,
.glow-border.plan--featured:hover,
.glow-border.threat:hover,
.glow-border.why-service:hover { box-shadow: var(--shadow); }

/* ---------- Fixed header overlay ---------- */
/* The reference header is position:fixed over the hero video. Elementor Pro
   renders the header part in normal flow, so restore the overlay here and
   treat .is-scrolled as the glass state (same rules as sticky--effects). */
body .xp-header {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  height: var(--nav-h);
  min-height: var(--nav-h);
}
.xp-header.is-scrolled {
  background: rgba(8, 9, 28, 0.72) !important;
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 1px 0 var(--line), var(--shadow-sm);
  height: 72px;
  min-height: 72px;
}
.xp-header.is-scrolled .xp-logo img { height: 80px; }

/* Anchor targets must clear the fixed bar. Replaces the reference's
   JS smooth-scroll offset with native CSS. */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Footer ---------- */
.site-footer .footer-link p { margin: 0; }
.site-footer .footer-link a {
  color: var(--grey-600);
  font-size: 0.95rem;
  transition: color .2s var(--ease);
}
.site-footer .footer-link a:hover { color: #fff; }

/* ---------- Inner-page heroes (Elementor container ports) ---------- */
/* The reference .why-hero/.page-hero apply their overlay + dot matrix via
   pseudo-elements on the SECTION; as Elementor containers that still works,
   but the photo hero's left-fade overlay was a child div. Recreate it as a
   ::before on the boxed container so the background image reads through. */
.xp-photo-hero { position: relative; isolation: isolate; }
.xp-photo-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(6,7,27,0.78) 0%, rgba(6,7,27,0.5) 34%, rgba(6,7,27,0.12) 62%, rgba(6,7,27,0) 100%),
              linear-gradient(180deg, rgba(6,7,27,0.4), rgba(6,7,27,0.55));
}
/* Elementor sets the boxed background image on the ::before of e-con-boxed;
   push the photo behind our overlay. */
.xp-photo-hero.e-con > .e-con-inner { position: relative; z-index: 1; }

/* Gradient-dot page hero: dot matrix + radial washes on the section. */
.xp-page-hero { position: relative; isolation: isolate; overflow: hidden;
  background-image: radial-gradient(90% 120% at 85% -10%, rgba(255,62,165,0.22), transparent 55%),
                    radial-gradient(90% 120% at 10% 0%, rgba(42,107,255,0.24), transparent 55%); }
.xp-page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(80% 80% at 70% 10%, #000, transparent 70%);
  mask-image: radial-gradient(80% 80% at 70% 10%, #000, transparent 70%);
}
.xp-page-hero.page-hero__center { text-align: center; }
.xp-page-hero.page-hero__center .why-hero__inner,
.xp-page-hero.page-hero__center .elementor-widget-text-editor { margin-inline: auto; }

/* ---------- Pains grid ---------- */
.pain { height: 100%; }

/* ---------- Approach numbered cards ---------- */
.approach-item { height: 100%; }
.approach-item .approach__num,
.approach .num {
  font-weight: 800; font-size: 2rem; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Split editorial (checklist + stepline) ---------- */
.split-col .elementor-widget:not(:last-child) { margin-bottom: 1rem; }
.checklist .elementor-icon-list-items { display: flex; flex-direction: column; gap: 0.85rem; }
.checklist .elementor-icon-list-text { color: #eef0ff; font-weight: 500; font-size: 1rem; }
.checklist .elementor-icon-list-icon { color: var(--g-pink); }

/* Stepline rows */
.stepline-item { display: flex; gap: 1rem; align-items: flex-start; }
.stepline-item .stepline__n {
  width: 34px; height: 34px; border-radius: 50%; background: var(--grad);
  color: #fff; font-weight: 800; font-size: 0.85rem;
  display:flex;align-items:center;justify-content:center; flex-shrink: 0;
}
.stepline-item b { color: #fff; display: block; }
.stepline-item span,
.stepline-item p { font-size: 0.92rem; color: var(--grey-600); margin: 0; }

/* text-link on a button widget */
.xp-textlink .elementor-button {
  background: var(--grad) !important; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; box-shadow: none !important;
  padding: 0 !important; font-weight: 700;
}
.xp-textlink .elementor-button:hover { transform: none; }
.xp-textlink .elementor-button svg,
.xp-textlink .elementor-button .elementor-button-icon { -webkit-text-fill-color: var(--g-pink); color: var(--g-pink); transition: transform .25s var(--ease); }
.xp-textlink .elementor-button:hover .elementor-button-icon { transform: translateX(4px); }

/* ---------- Cybersecurity page ---------- */
.threat { height: 100%; }
.threat .threat__icon > .elementor-widget-container,
.cyber-pillar .cyber-pillar__icon > .elementor-widget-container { width: 100%; height: 100%; display:flex;align-items:center;justify-content:center; }
/* Threat icon: contained glyph, not cover */
.threat .threat__icon img { width: 58%; height: 58%; object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(77,159,255,0.6)); }
.cyber-pillar .cyber-pillar__icon img { width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(139,47,255,0.35)); }

/* Cyber pillars are borderless, centred, not surface cards */
.cyber-pillar { background: none !important; border: none !important; box-shadow: none !important;
  text-align: center; }
.cyber-pillar .elementor-widget-text-editor,
.cyber-pillar p { max-width: 22ch; margin-inline: auto; }

/* Full-bleed media band inside a section: break past the boxed container
   and mask top+bottom into the section ground. */
.cyber-media { position: relative; width: 100vw; left: 50%; transform: translateX(-50%);
  line-height: 0; margin-block: clamp(2rem,4vw,3rem); }
.cyber-media img { width: 100%; height: clamp(300px,44vw,620px); object-fit: cover; display: block; }
.cyber-media::before, .cyber-media::after { content: ""; position: absolute; left: 0; right: 0;
  height: 38%; pointer-events: none; }
.cyber-media::before { top: 0; background: linear-gradient(180deg, var(--bg-2), transparent); }
.cyber-media::after { bottom: 0; background: linear-gradient(180deg, transparent, var(--bg-2)); }

/* ---------- Why Xpert IT page ---------- */
.why-service { height: 100%; text-align: center; }
.why-service .why-service__icon > .elementor-widget-container { width: 100%; height: 100%; display:flex;align-items:center;justify-content:center; }
.why-service .why-service__icon img { width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(139,47,255,0.3)); }
.why-value { height: 100%; }
.why-value .why-value__num,
.why-value .approach__num { font-size: 1.8rem; margin-bottom: 0.4rem; }

/* Full-bleed image band with no mask (why page footer band) */
.why-image-band { position: relative; width: 100vw; left: 50%; transform: translateX(-50%); line-height: 0; }
.why-image-band img { width: 100%; height: auto; display: block; }

/* ---------- Contact page ---------- */
.contact-grid { align-items: start; }

/* Info card: icon plate + stacked label/value */
.info-card { flex-direction: row !important; align-items: flex-start; height: auto; }
.info-card .info-card__ic {
  width: 46px; height: 46px; border-radius: 12px; background: var(--grad-soft);
  color: #fff; display:flex;align-items:center;justify-content:center; flex-shrink: 0;
}
.info-card .info-card__ic .elementor-icon,
.info-card .info-card__ic i, .info-card .info-card__ic svg { color: #fff; fill: #fff; font-size: 20px; }
.info-card .info-card__body b { color: #fff; display: block; font-size: 1rem; margin-bottom: 2px; }
.info-card .info-card__body a,
.info-card .info-card__body span,
.info-card .info-card__body p { color: var(--grey-600); font-size: 0.95rem; margin: 0; }
.info-card .info-card__body a:hover { color: #fff; }

/* Elementor Pro form -> reference field styling */
.xp-form .elementor-form { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.6rem,3vw,2.5rem); box-shadow: var(--shadow); }
.xp-form .elementor-field-group > label { font-weight: 600; font-size: 0.88rem; color: #fff; margin-bottom: 0.4rem; }
.xp-form .elementor-field-group .elementor-field-required .elementor-mark-required::after,
.xp-form .elementor-mark-required .elementor-field-label::after { color: var(--g-pink); }
.xp-form .elementor-field-textual {
  width: 100%; padding: 0.85rem 1rem; border: 1.5px solid var(--line-2);
  border-radius: var(--radius-sm); font: inherit; color: #fff; background: var(--bg-3);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.xp-form .elementor-field-textual::placeholder { color: var(--grey-400); }
.xp-form select.elementor-field-textual option { background: var(--bg-3); color: #fff; }
.xp-form .elementor-field-textual:focus {
  outline: none; border-color: var(--g-purple); background: var(--surface-hi);
  box-shadow: 0 0 0 4px rgba(139,47,255,0.2);
}
.xp-form textarea.elementor-field-textual { resize: vertical; min-height: 130px; }
.xp-form .elementor-button { width: 100%; justify-content: center; }
.xp-form .elementor-field-type-html p { font-size: 0.82rem; color: var(--grey-400); margin: 0.4rem 0 0; }

/* Map iframe with the reference dark filter */
.xp-map iframe, .xp-map .elementor-custom-embed, iframe.xp-map__frame {
  border: 1px solid var(--line); width: 100%; height: 380px; border-radius: var(--radius);
  box-shadow: var(--shadow-sm); filter: invert(0.92) hue-rotate(180deg) saturate(0.85) contrast(0.95);
}


/* === prototype-exact text styles (added by Claude) === */
/* Elementor sets colour on the widget wrapper; the design system's p{color:...}
   was overriding it on every text widget. */
.elementor-widget-text-editor p { color: inherit; }
.hero__lead p { color: rgba(255,255,255,0.82); font-size: 20px; line-height: 32px; margin: 0; }
.xp-ticks .elementor-icon-list-text { font-size: 0.95rem; font-weight: 600; color: rgba(255,255,255,0.92); }
.elementor-widget-button .elementor-button { line-height: 1.6; }


/* === brand logo sizing (SVGs without intrinsic width/height) === */
/* The brand SVGs carry a viewBox but no width/height, so inside a
   shrink-to-fit flex item they collapse to 0. Give them an explicit box. */
.brand-chip .elementor-widget-image { width: 100%; }
.brand-chip .elementor-widget-image img { width: 100%; height: 144px; object-fit: contain; max-width: 340px; margin-inline: auto; }
/* Nothing on the page should depend on JS to become visible. */
.elementor-invisible { visibility: visible !important; }


/* === Full width header (Sept 2026 reference) === */
.xp-logo-tight img { display: block; width: 100%; height: auto; }

/* Thin line chevron instead of the heavy Font Awesome glyph */
.xp-nav--full .elementor-nav-menu--main .sub-arrow { margin-left: 0.5rem; display: inline-flex; align-items: center; }
.xp-nav--full .elementor-nav-menu--main .sub-arrow i,
.xp-nav--full .elementor-nav-menu--main .sub-arrow svg { display: none; }
.xp-nav--full .elementor-nav-menu--main .sub-arrow::before {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s var(--ease);
}
.xp-nav--full .elementor-nav-menu--main > li:hover > a .sub-arrow::before { transform: translateY(1px) rotate(225deg); }

/* CTA: red to blue with the darker centre from the reference */
.xp-btn-spark .elementor-button {
  background-image: linear-gradient(90deg, #C8343B 0%, #5A2440 30%, #2A4F7A 68%, #4E9CCE 100%) !important;
  background-size: 160% 100% !important;
  background-position: 0 0;
  white-space: nowrap;
  transition: background-position .45s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.xp-btn-spark .elementor-button:hover,
.xp-btn-spark .elementor-button:focus-visible {
  background-position: 100% 0;
  box-shadow: 0 12px 30px -6px rgba(78,156,206,0.45);
}

/* === Full width header: glass once scrolled (Elementor Pro sticky) === */
.xp-header-full {
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), -webkit-backdrop-filter .3s var(--ease), backdrop-filter .3s var(--ease);
}
.xp-header-full.elementor-sticky--effects {
  background-color: rgba(6, 7, 27, 0.55) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)) !important;
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  backdrop-filter: saturate(170%) blur(18px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 10px 30px -10px rgba(0,0,0,0.55);
}
@media (prefers-reduced-motion: reduce) {
  .xp-header-full { transition: none !important; }
}

/* === Header: mobile and tablet drawer === */
.elementor-nav-menu--main .xp-menu-cta { display: none !important; }

.xp-nav--full .elementor-menu-toggle { border-radius: 10px; padding: 6px; }
.xp-nav--full .elementor-menu-toggle:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 2px; }

.xp-nav--full .elementor-nav-menu--dropdown.elementor-nav-menu__container {
  background-color: rgba(6, 7, 27, 0.94) !important;
  background-image: radial-gradient(90% 60% at 85% 0%, rgba(139,47,255,0.18), transparent 60%) !important;
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  backdrop-filter: saturate(170%) blur(18px);
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 24px 40px -12px rgba(0,0,0,0.6);
  overscroll-behavior: contain;
}
.xp-nav--full .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
  max-height: calc(100vh - 110px);
  max-height: calc(100dvh - 110px);
}
.xp-nav--full .elementor-nav-menu--dropdown a.elementor-item,
.xp-nav--full .elementor-nav-menu--dropdown a.elementor-sub-item {
  min-height: 52px;
  display: flex;
  align-items: center;
  font-size: 17px;
}
.xp-nav--full .elementor-nav-menu--dropdown .sub-menu {
  background: rgba(255,255,255,0.03) !important;
  border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important;
}
.xp-nav--full .elementor-nav-menu--dropdown a.elementor-sub-item {
  min-height: 46px;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding-left: 36px !important;
  color: rgba(255,255,255,0.78) !important;
}

/* Thin chevron in the drawer, flips when the submenu is open */
.xp-nav--full .elementor-nav-menu--dropdown .sub-arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -12px -12px -12px auto; padding: 0 !important; }
.xp-nav--full .elementor-nav-menu--dropdown .sub-arrow i,
.xp-nav--full .elementor-nav-menu--dropdown .sub-arrow svg { display: none; }
.xp-nav--full .elementor-nav-menu--dropdown .sub-arrow::before {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s var(--ease);
}
.xp-nav--full .elementor-nav-menu--dropdown a.highlighted .sub-arrow::before { transform: translateY(2px) rotate(225deg); }

/* CTA inside the drawer */
.xp-nav--full .elementor-nav-menu--dropdown li.xp-menu-cta { padding: 20px 20px 24px; border: 0; }
.xp-nav--full .elementor-nav-menu--dropdown li.xp-menu-cta > a.elementor-item {
  justify-content: center;
  min-height: 52px;
  padding: 0 1.25rem !important;
  border-radius: 999px;
  background: var(--grad) !important;
  box-shadow: 0 10px 26px rgba(120,50,255,0.4);
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fff !important;
  border: 0 !important;
}
.xp-nav--full .elementor-nav-menu--dropdown li.xp-menu-cta > a.elementor-item:hover { background: var(--grad) !important; filter: brightness(1.08); }

@media (max-width: 767px) {
  .xp-header-full .xp-logo-tight img { max-width: 130px; }
}
.xp-nav--full .elementor-nav-menu--dropdown.elementor-nav-menu__container { padding: 0 !important; border-radius: 0 !important; min-width: 0 !important; }
/* Tablet keeps the header button, so the drawer CTA is phone only */
@media (min-width: 768px) {
  .xp-nav--full .elementor-nav-menu--dropdown li.xp-menu-cta { display: none !important; }
}
.xp-nav--full .elementor-nav-menu--dropdown a { text-transform: none !important; letter-spacing: 0 !important; }
.xp-nav--full .elementor-nav-menu--dropdown li.xp-menu-cta > a.elementor-item { white-space: nowrap; }

/* ---------- FAQ accordion: each item is a pillar card with the glow-border ring ----------
   Classes are added per item by xpertit_faq_glow_items() when the Nested
   Accordion widget carries the faq-glow class. */
.faq-glow { --faq-text-indent: 45px; }
.faq-glow .e-n-accordion { display: flex; flex-direction: column; gap: 14px; }
.faq-glow .e-n-accordion-item.pillar { padding: 0; height: auto; margin: 0; }
.faq-glow .e-n-accordion-item.pillar:hover { transform: translateY(-3px); }
.faq-glow .e-n-accordion-item > .e-n-accordion-item-title {
  border: 0 !important; background: transparent !important;
  padding: 18px 22px !important; border-radius: inherit;
}
/* Static ring: keep the spectrum colours, no rotation and no travelling light */
.faq-glow .e-n-accordion-item.glow-border::before { animation: none !important; opacity: 0.6; }
.faq-glow .e-n-accordion-item.glow-border::after { display: none !important; }
.faq-glow .e-n-accordion-item.glow-border:hover::before { opacity: 0.85; }
/* Answer lines up with the question text, not the icon */
.faq-glow .e-n-accordion-item > [role="region"] { padding: 0 22px 18px var(--faq-text-indent, 22px) !important; }
.faq-glow .e-n-accordion-item > [role="region"] .e-con,
.faq-glow .e-n-accordion-item > [role="region"] .e-con-inner { padding: 0 !important; }
.faq-glow .e-n-accordion-item > [role="region"] p:last-child { margin-bottom: 0; }
.faq-glow .e-n-accordion-item > [role="region"] { border: 0 !important; background: transparent !important; }