/*
Theme Name: XION Child
Theme URI: https://xioncorp.com
Description: XION custom child theme for Tecnologia
Author: XION
Author URI: https://xioncorp.com
Template: tecnologia
Version: 1.1.0
License: GPL v2 or later
*/

/*
 * XION brand tokens — embedded from Confluence page 5931016 (v3) on 2026-09-03.
 * Confluence is the source of truth; this file is a working copy.
 * See CLAUDE.md §3 and .content-cache/branding.md.
 *
 * These custom properties are the single place brand values are set.
 * Elementor global colours/fonts (set via the Elementor kit in wp-admin)
 * should reference the same hex/font values so both layers agree —
 * CLAUDE.md §12: apply globally, never per-widget.
 */
:root {
  /* Colours */
  --xion-navy: #002058;
  --xion-royal-blue: #023FA5;
  --xion-electric-blue: #1996E4;
  --xion-metallic-silver: #E8EEF3;
  --xion-steel-grey: #7A7C83;
  /* UI teal darkened from brand #009F87 for contrast (user directive
     2026-09-03, per services mockup): 5.5:1 on white with white text. */
  --xion-teal: #00614F;
  --xion-teal-dark: #00473A; /* hover/active */
  --xion-teal-light: #009F87; /* breadcrumb/link accent */
  --xion-navy-ink: #0A1A2F; /* dark section surfaces ONLY — never text/buttons/icons */

  /* Typography — Manrope headings/nav/buttons, Inter body/captions/UI */
  --xion-font-heading: 'Manrope', sans-serif;
  --xion-font-body: 'Inter', sans-serif;
  /* kept for existing references; means "heading font" */
  --xion-font-primary: 'Manrope', 'Inter', sans-serif;
  --xion-font-fallback: 'Inter', sans-serif;

  /* Shape — one radius scale, applied consistently */
  --xion-radius-card: 12px;   /* cards, containers, media */
  --xion-radius-control: 8px; /* buttons, inputs */
}

body,
.elementor-widget-text-editor {
  font-family: var(--xion-font-body);
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--xion-font-heading);
  font-weight: 600;
}

h1 {
  font-weight: 700;
}

/*
 * Eyebrow / section label — Manrope 600, uppercase, letter-spaced.
 * Introduces sections above the H2.
 */
.xion-eyebrow {
  font-family: var(--xion-font-heading);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/*
 * Dark band — Navy Ink surface for hero and closing-CTA sections
 * (dark-section rhythm: page bookended in dark, light body between).
 */
.xion-dark-band {
  background-color: var(--xion-navy-ink);
  color: #fff;
}

/* Primary CTA — XION Royal Blue background, white text, Manrope 600 */
.elementor-button.xion-cta-primary,
a.button.xion-cta-primary {
  background-color: var(--xion-royal-blue);
  color: #fff;
  font-family: var(--xion-font-heading);
  font-weight: 600;
  border-radius: var(--xion-radius-control);
}

/* Secondary CTA — XION Teal, controlled accent only */
.elementor-button.xion-cta-secondary,
a.button.xion-cta-secondary {
  background-color: var(--xion-teal);
  color: #fff;
  font-family: var(--xion-font-heading);
  font-weight: 600;
  border-radius: var(--xion-radius-control);
}

/* Outline CTA — transparent, Navy border and text on light surfaces */
.elementor-button.xion-cta-outline,
a.button.xion-cta-outline {
  background-color: transparent;
  border: 1px solid var(--xion-navy);
  color: var(--xion-navy);
  font-family: var(--xion-font-heading);
  font-weight: 600;
  border-radius: var(--xion-radius-control);
}

/* Outline CTA on dark surfaces — white border and text */
.xion-dark-band .elementor-button.xion-cta-outline,
.xion-dark-band a.button.xion-cta-outline {
  border-color: #fff;
  color: #fff;
}

/* ==========================================================================
 * Header — mockup register (inspirations/home/XION DESIRED LOOK.png):
 * modest logo left · flat nav centre · support/phone + Contact button right.
 * User directive 2026-09-03: no dropdowns, single-click navigation.
 * ========================================================================== */

/* Keep the complete header (logo, menu, support and Contact Us) visible while
   page content scrolls beneath it. */
.fixed-header-box {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0;
  z-index: 1000;
  background: #fff;
  transition: background-color 0.24s ease, box-shadow 0.24s ease, backdrop-filter 0.24s ease;
}

/* On scroll, give the header a readable snow-white glass surface while
   retaining a subtle view of the page underneath. */
.fixed-header-box.xion-header-scrolled {
  background: rgba(250, 252, 253, 0.90);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 18px rgba(0, 32, 88, 0.08);
}

body.admin-bar .fixed-header-box {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .fixed-header-box {
    top: 46px;
  }
}

.main-header.layout-logo-menu {
  display: flex;
  align-items: center;
}

.main-header .header-maybe-limit-wrapper {
  width: 100%;
}

/* Slim header (user directive 2026-09-03): kill theme paddings/min-heights
   that inflate it to ~117px; target ≈76px with a 48px logo. */
.main-header.header-content-wrapper,
.main-header .header-maybe-limit-wrapper.header-padding {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.main-header .header-contents {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1360px;
  margin: 0 auto;
  padding: 12px 24px;
}

.main-header .first-row {
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  align-items: center;
}

.logo-wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

.logo-wrapper .logo-tagline {
  display: flex;
  align-items: center;
}

.main-header .second-row {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

/* The theme sizes the logo from the attachment (inline hwstring/min-width) —
   cap it to the mockup's modest proportion. */
.logo-wrapper .logo {
  min-width: 0 !important;
}

.logo-wrapper .logo img.normal-logo {
  width: auto !important;
  height: 54px !important;
  max-height: 54px !important;
  margin: 0 !important;
}

/* Flat nav — Manrope, no dropdown affordances. Desktop/tablet-landscape
   only: below 768px the theme's own mobile menu pattern must stay intact. */
#menus ul ul {
  display: none !important; /* single-click nav — no submenus (user directive) */
}

#menus a {
  font-family: var(--xion-font-heading);
  font-weight: 500;
  font-size: 15px;
  color: var(--xion-navy);
  text-decoration: none;
}

#menus a:hover,
#menus a:focus {
  color: var(--xion-teal);
}

/* Active-page underline (mockup): thin teal rule just below the label */
#menus li.current-menu-item > a,
#menus li.current-menu-ancestor > a,
#menus li.current_page_item > a,
#menus li.current_page_ancestor > a {
  color: var(--xion-teal);
  box-shadow: inset 0 -2px 0 var(--xion-teal);
  padding-bottom: 10px;
}

@media (min-width: 768px) {
  #menus {
    display: flex;
    justify-content: center;
  }

  #menus ul {
    display: flex;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
  }

  #menus ul li {
    margin: 0;
  }

  #menus a {
    padding: 8px 2px;
  }
}

/* Right block: SUPPORT / phone + Contact button */
.xion-header-contact {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

.xion-header-support {
  text-align: left;
  line-height: 1.3;
}

.xion-header-support .xion-support-label {
  font-family: var(--xion-font-heading);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--xion-steel-grey);
  display: block;
}

.xion-header-support .xion-support-phone {
  font-family: var(--xion-font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--xion-navy);
  text-decoration: none;
}

.xion-header-cta {
  display: inline-block;
  background: var(--xion-teal);
  color: #fff !important;
  font-family: var(--xion-font-heading);
  font-weight: 600;
  font-size: 14px;
  /* Match Home's teal CTA: compact, white text and a slightly shorter control. */
  padding: 10px 20px;
  line-height: 1.2;
  border-radius: var(--xion-radius-control);
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Tecnologia applies a more specific header-link colour in some states. */
.main-header .xion-header-cta,
.main-header .xion-header-cta span,
.main-header .xion-header-cta:visited {
  color: #fff !important;
}

.xion-header-cta:hover,
.xion-header-cta:focus {
  background: var(--xion-teal-dark);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0, 97, 79, 0.22);
}

@media (max-width: 1100px) {
  .xion-header-support { display: none; }
}

/* Theme switches to its mobile header (hamburger in the logo row) below
   ~1025px — the logo row goes full-width, so the Contact button is placed
   into that row absolutely, left of the menu toggle. */
@media (max-width: 1024px) {
  .main-header .header-contents {
    position: relative;
    padding: 8px 16px !important; /* theme mobile CSS zeroes it */
  }
  /* Theme stacks the menu toggle below the logo (block flow) → 112px
     header. One flex row: logo left, toggle right. */
  .main-header .first-row { width: 100%; min-height: 0; }
  .logo-wrapper {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .logo-wrapper .mobile-logo-additions {
    display: flex;
    align-items: center;
    float: none;
  }
  /* The collapsed mobile-menu container still reserves ~70px inside the
     header — hide it until the toggle opens the menu. */
  .header-contents:not(:has(#vamtam-fallback-main-menu-toggle.mega-menu-open)) .second-row {
    display: none;
  }
  .xion-header-contact {
    position: absolute;
    right: 72px;
    top: 14px; /* aligned with the 8px-padded logo row; % drifts with the
                  hidden menu container's height */
    transform: none;
    gap: 0;
  }
  .xion-header-cta { padding: 10px 16px; font-size: 13px; }
  /* When the fallback menu is open, get the button out of the way */
  .header-contents:has(#vamtam-fallback-main-menu-toggle.mega-menu-open) .xion-header-contact {
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 767px) {
  .main-header .header-contents { padding: 8px 16px; }
  .xion-header-contact { right: 60px; }
  .xion-header-cta { padding: 8px 12px; font-size: 12px; }
  .logo-wrapper .logo img.normal-logo { height: 42px !important; }
}

/* ==========================================================================
 * Page-design utilities — mockup treatments (dark rounded band, dot motif,
 * angled hero photo, stat band, tinted card section). One system, reused.
 * ========================================================================== */

/* Headings default to XION Navy on light surfaces */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  color: var(--xion-navy);
}

.xion-dark-band h1, .xion-dark-band h2, .xion-dark-band h3,
.xion-dark-band .elementor-heading-title,
.xion-dark-band p,
.xion-dark-band .elementor-widget-text-editor {
  color: #fff;
}

/* Inset rounded band — the mockup's full-width dark rounded section */
.xion-rounded-band {
  max-width: 1360px;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 24px;
  overflow: hidden;
}

@media (max-width: 1400px) {
  .xion-rounded-band { margin-left: 20px !important; margin-right: 20px !important; }
}

@media (max-width: 767px) {
  .xion-rounded-band { border-radius: 16px; margin-left: 12px !important; margin-right: 12px !important; }
}

/* Teal dot motif on dark bands — right-anchored, fading grid */
.xion-dot-motif {
  position: relative;
}

.xion-dot-motif::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 45%;
  background-image: radial-gradient(circle, rgba(0, 159, 135, 0.55) 2px, transparent 2.6px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, transparent 68%);
  mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, transparent 68%);
  pointer-events: none;
}

/* Legacy hero photo: kept for non-landing-page components. Landing heroes
   use .xion-hero-curve below for the shared left-edge arc. */
.xion-hero-photo .elementor-widget-container img,
.elementor .xion-hero-photo img {
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  border-radius: 0 var(--xion-radius-card) var(--xion-radius-card) 0;
  width: 100%;
  height: 420px;
  object-fit: cover;
}

/* Detail-page heroes are now split columns whose photo carries
   .xion-hero-curve, so the image sizing lives with that class. Only the copy
   column needs handling here: keep the H1 from running the full 1200px
   measure, which reads as a wide banner rather than a headline. */
.xion-detail-hero .elementor-widget-heading h1 { max-width: 22ch; }

@media (max-width: 1024px) {
  .xion-hero-photo .elementor-widget-container img,
  .elementor .xion-hero-photo img { height: 320px; }
}

@media (max-width: 767px) {
  .xion-hero-photo .elementor-widget-container img,
  .elementor .xion-hero-photo img {
    clip-path: none;
    border-radius: var(--xion-radius-card);
    height: 240px;
  }
  .xion-detail-hero .elementor-widget-heading h1 { max-width: none; }
}

/* ==========================================================================
 * Hero carousel (Home) — split slides: message left, angular photo right.
 * Behaviour in js/hero-carousel.js.
 * ========================================================================== */
.xion-carousel {
  max-width: 1360px;
  margin: 0 auto;
  padding: 40px 24px 8px;
}

.xion-slides {
  position: relative;
}

.xion-slide {
  display: none;
  align-items: center;
  gap: 32px;
}

.xion-slide.is-active {
  display: flex;
  animation: xion-slide-fade 1s ease;
}

@media (prefers-reduced-motion: reduce) {
  .xion-slide.is-active { animation: none; }
}

@keyframes xion-slide-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.xion-slide-text {
  flex: 0 1 45%;
}

.xion-slide-eyebrow {
  font-family: var(--xion-font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--xion-teal);
  margin: 0 0 14px;
}

.xion-slide-title {
  font-family: var(--xion-font-heading);
  font-weight: 800;
  font-size: 50px;
  line-height: 1.08;
  color: var(--xion-navy);
  margin: 0 0 20px;
}

.xion-slide-copy {
  font-family: var(--xion-font-body);
  font-size: 18px;
  line-height: 1.6;
  color: #4A5568;
  margin: 0 0 28px;
  max-width: 520px;
}

.xion-slide-link {
  margin: 0;
}

.xion-slide-link a {
  color: var(--xion-teal-light);
  font-family: var(--xion-font-heading);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}

.xion-slide-link a:hover,
.xion-slide-link a:focus {
  color: var(--xion-teal-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.xion-slide-media {
  flex: 1 1 55%;
}

.xion-slide-media img,
.elementor .xion-slide-media img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  clip-path: none;
  /* Home stays deliberately angular: a single straight diagonal separates
     copy and imagery, unlike the curved arches on other landing pages. */
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
  border-radius: 0 12px 12px 0;
}

.xion-carousel-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
}

.xion-carousel-prev,
.xion-carousel-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #C9D4DE;
  background: #fff;
  color: var(--xion-navy);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.xion-carousel-prev:hover, .xion-carousel-prev:focus,
.xion-carousel-next:hover, .xion-carousel-next:focus {
  border-color: var(--xion-teal);
  color: var(--xion-teal);
}

.xion-carousel-dots {
  display: flex;
  gap: 10px;
}

.xion-carousel-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #C9D4DE;
  cursor: pointer;
}

.xion-carousel-dots button.is-active {
  background: var(--xion-teal);
}

@media (max-width: 1024px) {
  .xion-slide-title { font-size: 38px; }
  .xion-slide-media img,
  .elementor .xion-slide-media img { height: 360px; }
}

@media (max-width: 767px) {
  .xion-carousel { padding-top: 12px; }
  .xion-slide.is-active { flex-direction: column; align-items: flex-start; gap: 24px; }
  .xion-slide-text { flex-basis: auto; }
  .xion-slide-title { font-size: 30px; }
  .xion-slide-copy { font-size: 16px; }
  .xion-slide-media { width: 100%; }
  .xion-slide-media img,
  .elementor .xion-slide-media img {
    height: 230px;
    clip-path: none;
    border-radius: var(--xion-radius-card);
  }
}

/* Content images: consistent brand radius site-wide */
.elementor-widget-image .elementor-widget-container img {
  border-radius: var(--xion-radius-card);
}

/* Image-box cards (industry/solution grids): uniform image crops so card
   rows align regardless of source aspect ratios */
.elementor .elementor-image-box-img img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: var(--xion-radius-card);
}

/* Rounded photo crops (insights mockups) — specificity beats the Elementor
   img reset, same as .xion-hero-photo. Heights per slot role. */
.xion-photo-round .elementor-widget-container img,
.elementor .xion-photo-round img,
.xion-photo-tile .elementor-widget-container img,
.elementor .xion-photo-tile img,
.xion-photo-feature .elementor-widget-container img,
.elementor .xion-photo-feature img,
.xion-photo-thumb .elementor-widget-container img,
.elementor .xion-photo-thumb img {
  border-radius: var(--xion-radius-card);
  width: 100%;
  object-fit: cover;
}

.xion-photo-round .elementor-widget-container img,
.elementor .xion-photo-round img { height: 380px; }

.xion-photo-tile .elementor-widget-container img,
.elementor .xion-photo-tile img { height: 220px; }

/* Solutions "Explore our solutions" runs four-up as white cards. The photo
   sits inset within the card padding, rounded to the control radius; 170px
   keeps it landscape at the quarter-width measure (220px would be nearly
   square). Below the desktop breakpoint the cards fall back to two-up. */
.elementor .xion-solution-card {
  background: #fff;
  border: 1px solid #E1E7ED;
  border-radius: var(--xion-radius-card);
  padding: 16px 16px 22px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.elementor .xion-solution-card:hover {
  box-shadow: 0 14px 30px rgba(0, 32, 88, 0.10);
  transform: translateY(-3px);
}

.elementor .xion-solution-card .elementor-widget-image img {
  height: 170px;
  border-radius: var(--xion-radius-control);
}

/* Pin the tagline/body/read-more block so the "Read more" lines share a
   baseline across cards whose titles wrap to different depths. */
.elementor .xion-solution-card > .elementor-widget-wrap,
.elementor .xion-solution-card > .elementor-column-wrap > .elementor-widget-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.elementor .xion-solution-card .elementor-widget-text-editor:last-child {
  margin-top: auto;
}

@media (max-width: 1024px) {
  /* !important: Elementor's own per-column width rules load after the child
     theme, so an equal-specificity override loses. */
  .elementor .xion-solution-card { width: 50% !important; }
  .elementor .xion-solution-card .elementor-widget-image img { height: 200px; }
}

@media (max-width: 767px) {
  .elementor .xion-solution-card { width: 100% !important; }
}

/* Flagship feature card for XION Orbit: a full-width white card above the
   three-up row, image left / content right, sharing the card treatment. */
.elementor .xion-solution-flagship {
  background: #fff;
  border: 1px solid #E1E7ED;
  border-radius: var(--xion-radius-card);
  padding: 24px !important;
  margin: 8px 10px 28px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.elementor .xion-solution-flagship:hover {
  box-shadow: 0 14px 30px rgba(0, 32, 88, 0.10);
  transform: translateY(-3px);
}

.elementor .xion-solution-flagship .elementor-widget-image img {
  height: 320px;
  border-radius: var(--xion-radius-control);
}

@media (max-width: 767px) {
  .elementor .xion-solution-flagship { padding: 16px !important; }
  .elementor .xion-solution-flagship .elementor-widget-image img { height: 220px; }
  .elementor .xion-solution-flagship .elementor-column > .elementor-element-populated {
    padding-left: 0 !important;
    padding-top: 16px;
  }
}

/* Explore cards use the full text rail for their image, not a centred
   intrinsic-width image. */
.xion-photo-tile .elementor-widget-image,
.xion-photo-tile .elementor-widget-image .elementor-widget-container {
  display: block;
  width: 100% !important;
  max-width: none !important;
  text-align: left !important;
}
.xion-photo-tile .elementor-widget-image img,
.xion-photo-tile .elementor-widget-image .elementor-widget-container img {
  display: block;
  width: 100% !important;
  max-width: none;
  height: 220px;
  object-fit: cover;
  margin-left: 0;
  margin-right: 0;
}

/* Linking a photo tile makes Elementor wrap the <img> in an inline-block
   <a>. That anchor shrink-to-fits the image's intrinsic ratio, so the
   img's own width:100% resolves against a box the image itself sized —
   circular, and it falls back to auto. The result is cards whose photos
   are each a different width (they only agree on the fixed height), which
   breaks the left rail of the Solutions/Industries/Insights card grids.
   Forcing the anchor to a full-width block gives width:100% something
   real to resolve against, so every crop matches. */
.elementor .xion-photo-tile .elementor-widget-image a,
.elementor .xion-photo-round .elementor-widget-image a,
.elementor .xion-photo-feature .elementor-widget-image a,
.elementor .xion-photo-thumb .elementor-widget-image a,
.elementor .xion-photo-wide .elementor-widget-image a {
  display: block;
  width: 100%;
}

.xion-photo-feature .elementor-widget-container img,
.elementor .xion-photo-feature img { height: 320px; }

.xion-photo-thumb .elementor-widget-container img,
.elementor .xion-photo-thumb img { height: 130px; }

@media (max-width: 767px) {
  .xion-photo-round .elementor-widget-container img,
  .elementor .xion-photo-round img { height: 240px; }
  .xion-photo-feature .elementor-widget-container img,
  .elementor .xion-photo-feature img { height: 220px; }
}

/* Breadcrumb — nested section pages only */
.xion-breadcrumb p {
  font-family: var(--xion-font-body);
  font-size: 13px;
  color: var(--xion-steel-grey);
  margin: 0;
  line-height: 1.6;
}

.xion-breadcrumb a {
  color: var(--xion-teal-light);
  text-decoration: none;
  font-weight: 500;
  border-radius: 4px;
  padding: 2px 4px;
  transition: color 0.2s ease, background-color 0.2s ease, font-weight 0.2s ease;
}

.xion-breadcrumb a:hover,
.xion-breadcrumb a:focus {
  color: var(--xion-teal-dark);
  background-color: rgba(0, 159, 135, 0.14);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Hairline top rule for listing rows */
.xion-hairline-top {
  border-top: 1px solid #E1E7ED;
}

/* ==========================================================================
 * Industries mockup register (inspirations/industries/*.png)
 * ========================================================================== */

/* Hero photo with the large convex curved left edge */
.xion-hero-curve .elementor-widget-container img,
.elementor .xion-hero-curve img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 280px 12px 12px 0;
}

/* Bleed variant (industries index mockup): photo runs to the right
   viewport edge, curve on the left only */
@media (min-width: 1025px) {
  /* Low wide photo band with the semicircular left arc — stays inside the
     boxed container (viewport bleed removed per user correction 2026-09-04). */
  .xion-hero-curve.xion-bleed-right .elementor-widget-container img,
  .elementor .xion-hero-curve.xion-bleed-right img {
    height: 310px;
    border-radius: 310px 12px 12px 0;
  }
}

/* Main landing heroes meet the header — kill the theme's main and
   content-parent top padding (theme sets 50px on .the-content-parent). */
.page-id-9 #main,
.page-id-9 .page-content.the-content-parent,
.page-id-10 #main,
.page-id-10 .page-content.the-content-parent,
.page-id-11 #main,
.page-id-11 .page-content.the-content-parent,
.page-id-12 #main,
.page-id-12 .page-content.the-content-parent,
.page-id-13 #main,
.page-id-13 .page-content.the-content-parent,
.page-id-14 #main,
.page-id-14 .page-content.the-content-parent,
.page-id-15 #main,
.page-id-15 .page-content.the-content-parent {
  padding-top: 0 !important;
}

/* Short teal rule under a card/value title (about mockup) */
.xion-title-rule h3.elementor-heading-title::after,
.xion-title-rule h4.elementor-heading-title::after {
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  background: var(--xion-teal);
  margin-top: 10px;
}

/* Wide low card crops (industries index grid — mockup: ~165px, 8px radius) */
.xion-photo-wide .elementor-widget-container img,
.elementor .xion-photo-wide img {
  width: 100%;
  height: 165px;
  object-fit: cover;
  border-radius: 8px;
}

/* Mockup's blue "Explore this industry →" links — brand Royal Blue */
.xion-link-royal a {
  color: var(--xion-royal-blue);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
}

.xion-link-royal a:hover,
.xion-link-royal a:focus {
  text-decoration: underline;
}

/* Short teal rule under the eyebrow (industries index mockup) —
   scoped to h6, which is what xion_eyebrow() renders */
.xion-eyebrow-underline h6.elementor-heading-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--xion-teal);
  margin-top: 10px;
}

/* 2×2 industry grid: vertical hairline between the cell pairs */
@media (min-width: 768px) {
  .xion-grid-divide > .elementor-container > .elementor-column:nth-child(3) {
    border-left: 1px solid #E1E7ED;
    padding-left: 32px;
  }
}

@media (max-width: 1024px) {
  .xion-hero-curve .elementor-widget-container img,
  .elementor .xion-hero-curve img { height: 320px; border-radius: 200px 12px 12px 0; }
}

@media (max-width: 767px) {
  .xion-hero-curve .elementor-widget-container img,
  .elementor .xion-hero-curve img { height: 220px; border-radius: var(--xion-radius-card); }
}

/* Numbered process step (1-2-3-4 strip) */
.xion-step-num {
  display: inline-flex;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--xion-teal);
  color: #fff;
  font-family: var(--xion-font-heading);
  font-weight: 700;
  font-size: 15px;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

/* Slim dark CTA bar: message left, button right, vertically centred */
.xion-cta-bar .elementor-container {
  align-items: center;
}

/* Vertical hairlines between columns (insights hub tiles) */
@media (min-width: 768px) {
  .xion-vdivide > .elementor-container > .elementor-column + .elementor-column {
    border-left: 1px solid #E1E7ED;
  }
}

/* Two stacked sections forming one visual panel (insights hub case-studies
   block): square off the meeting edges so they read as a single card */
.xion-rounded-band.xion-panel-top {
  border-radius: var(--xion-radius-card) var(--xion-radius-card) 0 0;
  margin-bottom: 0 !important;
}

.xion-rounded-band.xion-panel-mid {
  border-radius: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.xion-rounded-band.xion-panel-bottom {
  border-radius: 0 0 var(--xion-radius-card) var(--xion-radius-card);
  margin-top: 0 !important;
}

/* Solutions flow strip: outlined circle step icons with connector arrows */
.xion-step-circle {
  width: 64px;
  height: 64px;
  border: 1.5px solid #93A9BC;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--xion-navy);
  background: #fff;
}

@media (min-width: 768px) {
  .xion-flow > .elementor-container > .elementor-column .elementor-widget-wrap {
    position: relative;
  }
  .xion-flow > .elementor-container > .elementor-column:not(:last-child) .elementor-widget-wrap::after {
    content: '\2192';
    position: absolute;
    right: -10px;
    top: 30px;
    color: #93A9BC;
    font-size: 20px;
  }
}

/* Arrow-only tile link (insights hub mockup): long teal arrow, no text */
.xion-arrow-only a {
  color: var(--xion-teal);
  font-size: 26px;
  line-height: 1;
  text-decoration: none;
}

.xion-arrow-only a:hover,
.xion-arrow-only a:focus {
  color: var(--xion-teal-dark);
}

/* Stat band — hairline top/bottom, vertical hairlines between columns */
.xion-stat-band {
  border-top: 1px solid #E1E7ED;
  border-bottom: 1px solid #E1E7ED;
}

.xion-stat-band .elementor-column:not(:first-child) {
  border-left: 1px solid #E1E7ED;
}

@media (max-width: 767px) {
  .xion-stat-band .elementor-column { border-left: none !important; }
}

.xion-stat-band .elementor-heading-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--xion-navy);
}

.xion-stat-band .elementor-widget-text-editor p {
  font-size: 13px;
  color: var(--xion-steel-grey);
  margin: 4px 0 0;
}

/* Light teal tinted section (mockup's light-green card section) */
.xion-tint-band {
  background-color: #EAF6F3;
}

/* White card — radius, hairline border, padding */
.xion-card {
  background: #fff;
  border: 1px solid #E1E7ED;
  border-radius: var(--xion-radius-card);
  padding: 28px 24px;
}

/* Home "What we offer" cards: icon in a tinted chip, hover lift, and the
   Learn-more line pinned to a shared baseline. Scoped to the tint band so
   icon-boxes elsewhere keep their plain treatment. */
.xion-tint-band .xion-card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.xion-tint-band .xion-card:hover {
  box-shadow: 0 14px 30px rgba(0, 32, 88, 0.10);
  transform: translateY(-3px);
}

.xion-tint-band .xion-card .elementor-icon-box-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #E3F2EE;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

/* Baseline pinning applies to every card row, not just the tinted one: the
   Services index cards have uneven copy lengths and their "Learn more" lines
   were landing at three different heights (site review 2026-09-05). */
.xion-card > .elementor-widget-wrap,
.xion-card > .elementor-column-wrap > .elementor-widget-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.xion-card .elementor-widget-text-editor:last-child {
  margin-top: auto;
}

/* Text card (Legal hub and similar galleries): button pinned to the baseline. */
.xion-text-card > .elementor-widget-wrap,
.xion-text-card > .elementor-column-wrap > .elementor-widget-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.xion-text-card .elementor-widget-button:last-child {
  margin-top: auto;
}

/* Home services split (photo left, 2x2 icon grid right): breathing room
   between the stacked icon boxes. */
.xion-svc-grid .elementor-widget-icon-box + .elementor-widget-icon-box,
.xion-svc-grid .elementor-widget-icon-box:nth-child(2) {
  margin-top: 28px;
}

@media (max-width: 767px) {
  /* The photo column's 36px desktop gutter has no partner column on mobile. */
  .xion-svc-grid .xion-photo-feature > .elementor-element-populated {
    padding-right: 0 !important;
  }
  .xion-svc-grid .elementor-widget-icon-box:first-child {
    margin-top: 28px;
  }
}

/* Sector chips on the industries teaser: quiet outline pills. */
.xion-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 20px;
}

.xion-chip-row a {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #C9D4DF;
  border-radius: 999px;
  font-family: var(--xion-font-heading);
  font-weight: 600;
  font-size: 13px;
  color: var(--xion-navy);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.xion-chip-row a:hover,
.xion-chip-row a:focus {
  border-color: var(--xion-teal);
  color: var(--xion-teal);
  background: #F2FAF8;
}

/* Icon-box alignment inside cards/rows: left-position icon centred on its
   title line; top-position icon flush left with the text block. */
.xion-card .elementor-icon-box-wrapper,
.xion-icon-left .elementor-icon-box-wrapper {
  align-items: center;
  text-align: left;
}

.xion-card .elementor-position-left .elementor-icon-box-icon,
.xion-icon-left .elementor-position-left .elementor-icon-box-icon {
  margin-right: 14px;
  display: flex;
  align-items: center;
}

.elementor-position-top .elementor-icon-box-icon {
  text-align: left; /* icons align with their left-aligned titles, not centred */
}

.xion-card .elementor-widget-container {
  margin: 0;
}

/* Eyebrow pill (light surface variant) */
.xion-eyebrow-pill {
  display: inline-block;
  background: #fff;
  border: 1px solid #E1E7ED;
  border-radius: 999px;
  padding: 6px 14px;
}

/* Centre auto-width (inline) widgets inside a column */
.xion-center-inline > .elementor-widget-wrap {
  justify-content: center;
}

/* Arrow text link — teal, Manrope 600 */
.xion-link-arrow a {
  font-family: var(--xion-font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--xion-teal);
  text-decoration: none;
}

.xion-link-arrow a:hover,
.xion-link-arrow a:focus {
  text-decoration: underline;
}

/* Icon row — thin-line theme icons, navy, open layout */
.xion-icon-open .elementor-icon {
  color: var(--xion-navy);
  font-size: 44px;
}

.xion-icon-open .elementor-image-box-title,
.xion-icon-open .elementor-icon-box-title {
  color: var(--xion-navy);
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* ==========================================================================
 * Footer — mockup register (inspirations/footer/Screenshot_20260903_160219.png):
 * dark navy band with a subtle teal sweep (gradient policy: dark surfaces
 * only), brand column + 4 link columns, hairline bottom bar
 * with dynamic © year and legal links (which open the legal modal below).
 * ========================================================================== */
.xion-footer {
  background: linear-gradient(115deg, #081527 0%, var(--xion-navy-ink) 55%, #0B2733 100%);
  color: #fff;
  padding: 56px 24px 28px;
  font-family: var(--xion-font-body);
}

.xion-footer-inner {
  max-width: 1320px; /* aligned with the Elementor container width */
  margin: 0 auto;
}

.xion-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr 1.4fr 0.9fr;
  gap: 36px;
  align-items: start;
}

.xion-footer-logo img {
  height: 40px;
  width: auto;
  /* White rendition for the dark band, per the approved footer mockup —
     the master logo's navy letterforms would vanish on Navy Ink. */
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.xion-footer-desc {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: #B8C4D0;
  max-width: 300px;
}

.xion-footer-contact {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: #B8C4D0;
}

.xion-footer-contact a {
  color: #FFFFFF;
  text-decoration: none;
}

.xion-footer-contact a:hover,
.xion-footer-contact a:focus {
  color: var(--xion-teal-light);
  text-decoration: underline;
}

.xion-footer-col-title {
  font-family: var(--xion-font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0 0 16px;
}

.xion-footer-col ul {
  list-style: none;
  margin: 0 !important; /* theme applies margin-left: 24px to footer uls */
  padding: 0 !important;
}

.xion-footer-col li {
  margin: 0 0 12px;
  padding: 0 !important;
  text-indent: 0;
}

.xion-footer-col li::before {
  content: none !important; /* theme list markers */
}

.xion-footer-col a {
  color: #B8C4D0;
  text-decoration: none;
  font-size: 13px;
}

.xion-footer-col a:hover,
.xion-footer-col a:focus {
  color: #fff;
  text-decoration: underline;
}

.xion-footer-col li.current-menu-item > a {
  color: var(--xion-teal-light);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.xion-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: 44px;
  padding-top: 20px;
}

.xion-footer-copyright {
  font-size: 12px;
  color: #8FA0B0;
}

.xion-footer-legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.xion-footer-legal-list a {
  color: #8FA0B0;
  text-decoration: none;
  font-size: 12px;
}

.xion-footer-legal-list a:hover,
.xion-footer-legal-list a:focus {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .xion-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 40px;
  }
  .xion-footer-brand-col { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .xion-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .xion-footer-bottom { flex-direction: column; align-items: flex-start; }
  .xion-footer-legal-list { gap: 14px 20px; }
}

/* ==========================================================================
 * Legal modal — full-screen overlay, page content in a centred panel.
 * ========================================================================== */
html.xion-modal-open,
html.xion-modal-open body {
  overflow: hidden;
}

/* display:flex below beats the UA [hidden] rule — restore it explicitly,
   or the invisible overlay swallows every click on the page. */
.xion-modal[hidden] {
  display: none;
}

.xion-modal {
  position: fixed;
  inset: 0;
  z-index: 100000; /* above the WP admin bar */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 16px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.xion-modal.is-open {
  opacity: 1;
}

.xion-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 21, 39, 0.78);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.xion-modal-panel {
  position: relative;
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 880px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(4, 12, 24, 0.45);
  transform: translateY(12px);
  transition: transform 0.25s ease;
}

.xion-modal.is-open .xion-modal-panel {
  transform: translateY(0);
}

.xion-modal-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
  border-bottom: 1px solid #E1E7ED;
  padding: 18px 28px;
  border-radius: 16px 16px 0 0;
  z-index: 2;
}

.xion-modal-head h2 {
  font-family: var(--xion-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--xion-navy);
  margin: 0;
}

.xion-modal-close {
  border: none;
  background: var(--xion-metallic-silver);
  color: var(--xion-navy);
  font-size: 22px;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  flex: 0 0 auto;
}

.xion-modal-close:hover,
.xion-modal-close:focus {
  background: var(--xion-navy);
  color: #fff;
}

.xion-modal-body {
  padding: 8px 28px 36px;
}

/* Neutralise page-level chrome inside the modal: sections become plain
   stacked content at the panel's width. */
.xion-modal-body .elementor-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.xion-modal-body .elementor-container {
  max-width: 100% !important;
}

/* Legal pages carry a "← Back to Legal" button — meaningless inside the
   modal, where close covers it. Their content has no other buttons. */
.xion-modal-body .elementor-widget-button {
  display: none;
}

.xion-modal-loading {
  padding: 48px 0;
  text-align: center;
  color: var(--xion-steel-grey);
  font-family: var(--xion-font-body);
}

@media (max-width: 600px) {
  .xion-modal { padding: 0; }
  .xion-modal-panel { max-height: 100vh; height: 100%; border-radius: 0; }
  .xion-modal-head { border-radius: 0; }
}