/* AXIMETRE 2.0.1 — Elementor-aware responsive layer.
 * All selectors are scoped to the plugin; no theme or Elementor rule is changed.
 * Container queries measure the widget's actual usable width, including when an
 * Elementor column is narrower than the browser's viewport.
 */
.axi-root {
  container: axi-page / inline-size;
  display: block;
  min-width: 0;
  max-width: 100%;
}
/* Elementor and many WordPress themes center the widget inside a boxed
 * container. Break out of that box without changing any parent/theme CSS.
 * The JS-controlled width uses documentElement.clientWidth to exclude the
 * browser's scrollbar; 100vw remains the non-JS fallback.
 */
.axi-root.axi-fullbleed {
  position: relative;
  left: 50%;
  width: var(--axi-viewport-width, 100vw);
  max-width: none;
  /* Cancel the 10–12px vertical inset left by the page builder's box. */
  margin-top: -12px;
  margin-bottom: -12px;
  transform: translateX(-50%);
}
/* A slightly more restrained hero avoids crowding the technology map at
 * laptop / desktop widths while retaining the large premium typography. */
.axi-root .axi-lab-intro h1 { font-size: clamp(46px, 4.35vw, 76px); }
.axi-root main,
.axi-root section,
.axi-root .axi-container,
.axi-root .axi-lab-intro,
.axi-root .axi-lab-home-grid > *,
.axi-root .axi-lab-workbench > *,
.axi-root .axi-lab-service-hero-inner > *,
.axi-root .axi-lab-expertise-layout > * {
  min-width: 0;
  max-width: 100%;
}
.axi-root .axi-lab-intro h1,
.axi-root .axi-lab-section-header h2,
.axi-root .axi-lab-catalog-intro h2,
.axi-root .axi-lab-service-hero h1,
.axi-root .axi-lab-bottom-cta h2,
.axi-root .axi-section-heading h2,
.axi-root .axi-contact-hero h1 {
  overflow-wrap: break-word;
  hyphens: auto;
}
.axi-root .axi-lab-terminal,
.axi-root .axi-lab-workbench,
.axi-root .axi-lab-hero-display,
.axi-root .axi-lab-output,
.axi-root .axi-form-wrap { min-width: 0; max-width: 100%; }
.axi-root .axi-lab-terminal-bar > *,
.axi-root .axi-lab-panel-heading > *,
.axi-root .axi-lab-display-top > *,
.axi-root .axi-lab-display-bottom > * { min-width: 0; overflow-wrap: anywhere; }
.axi-root .axi-lab-field input,
.axi-root .axi-lab-field select,
.axi-root .axi-lab-field textarea,
.axi-root .axi-contact-form input,
.axi-root .axi-contact-form textarea { min-width: 0; max-width: 100%; }
.axi-root .axi-lab-preview strong,
.axi-root .axi-lab-mini-grid strong,
.axi-root .axi-lab-choice-grid label,
.axi-root .axi-lab-expertise-list strong { overflow-wrap: anywhere; }
.axi-root .axi-lab-core-visual { max-width: 100%; }
.axi-root .axi-nav-toggle { flex-shrink: 0; }

@container axi-page (max-width: 1180px) {
  .axi-root .axi-container { width: min(calc(100% - 60px), 1080px); }
  .axi-root .axi-lab-home-grid { gap: 4%; }
  .axi-root .axi-lab-intro h1 { font-size: clamp(44px, 5.5cqi, 70px); }
  .axi-root .axi-service-grid,
  .axi-root .axi-lab-preview-grid,
  .axi-root .axi-lab-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .axi-root .axi-footer-top { gap: 25px; }
}

/* Tablets, or an Elementor widget placed inside a narrow desktop column. */
@container axi-page (max-width: 1020px) {
  .axi-root .axi-lab-home-grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 34px;
    padding-block: 70px 74px;
  }
  .axi-root .axi-lab-intro { max-width: 760px; }
  .axi-root .axi-lab-intro h1 { font-size: clamp(48px, 7.15cqi, 76px); }
  .axi-root .axi-lab-hero-display { width: min(100%, 560px); justify-self: center; }
  .axi-root .axi-lab-core-visual { width: min(100%, 410px); }
  .axi-root .axi-lab-service-hero-inner,
  .axi-root .axi-lab-expertise-layout,
  .axi-root .axi-statement-layout,
  .axi-root .axi-detail-grid,
  .axi-root .axi-contact-grid { grid-template-columns: minmax(0, 1fr); gap: 35px; }
  .axi-root .axi-lab-service-hero-inner { padding-block: 78px 65px; }
  .axi-root .axi-lab-service-badge { justify-self: start; width: 210px; padding: 30px 10px; }
  .axi-root .axi-lab-workbench {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "input" "output" "footer";
  }
  .axi-root .axi-lab-workbench-input { border-right: 0; border-bottom: 1px solid #284261; }
  .axi-root .axi-lab-section-header { flex-direction: column; align-items: start; gap: 14px; }
  .axi-root .axi-lab-section-header > p { max-width: 700px; }
  .axi-root .axi-lab-workbench-footer { flex-wrap: wrap; }
  .axi-root .axi-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The complete dark mobile navigation, triggered by widget width. */
@container axi-page (max-width: 980px) {
  .axi-root .axi-container { width: calc(100% - 42px); }
  .axi-root .axi-header { height: 76px; position: relative; z-index: 90; }
  .axi-root .axi-header-inner { gap: 16px; }
  .axi-root .axi-nav-toggle {
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    color: #f1f7ff;
    background: #102a4a;
    border: 1px solid #4c729e;
  }
  .axi-root .axi-nav-toggle span:not(.axi-sr) {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    transition: transform .2s ease;
  }
  .axi-root .axi-nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .axi-root .axi-nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }
  .axi-root .axi-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: auto;
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 13px 21px 21px;
    background: #0c1e37;
    border-bottom: 1px solid #355477;
    box-shadow: 0 20px 35px #0008;
    -webkit-overflow-scrolling: touch;
  }
  .axi-root .axi-nav.is-open { display: flex; }
  .axi-root .axi-nav > a,
  .axi-root .axi-nav-services { display: block; color: #eff6ff; padding: 14px 10px; font-size: 14px; white-space: normal; }
  .axi-root .axi-nav-group { display: block; height: auto; }
  .axi-root .axi-nav-services { padding-block: 14px; }
  .axi-root .axi-nav-dropdown {
    display: grid;
    position: static;
    width: 100%;
    opacity: 1;
    visibility: visible;
    transform: none;
    margin: 0 0 8px;
    padding: 4px 8px;
    border: 1px solid #335579;
    background: #142e50;
    box-shadow: none;
  }
  .axi-root .axi-nav-dropdown a { padding: 11px 10px; min-height: 44px; color: #e1efff; font-size: 13px; }
  .axi-root .axi-nav .axi-nav-cta { margin-top: 12px; text-align: center; color: #fff; }
  .axi-root .axi-section { padding-block: 88px; }
  .axi-root .axi-cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones and small Elementor columns, with touch-friendly one-column controls. */
@container axi-page (max-width: 620px) {
  .axi-root .axi-container { width: calc(100% - 32px); }
  .axi-root .axi-header { height: 68px; }
  .axi-root .axi-brand { gap: 9px; }
  .axi-root .axi-brand-mark { width: 39px; height: 39px; }
  .axi-root .axi-brand-name { font-size: 15px; letter-spacing: .08em; }
  .axi-root .axi-nav { max-height: calc(100dvh - 68px); padding-inline: 16px; }
  .axi-root .axi-lab-home-grid { gap: 27px; padding-block: 54px 65px; }
  .axi-root .axi-lab-eyebrow { flex-wrap: wrap; font-size: 9px; letter-spacing: .09em; }
  .axi-root .axi-lab-live-tag { margin-top: 26px; font-size: 9px; }
  .axi-root .axi-lab-intro h1 { font-size: clamp(33px, 8.25cqi, 48px); line-height: 1.09; letter-spacing: -.055em; }
  .axi-root .axi-lab-intro > p { margin-top: 19px; font-size: 14px; line-height: 1.72; }
  .axi-root .axi-lab-hero-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 25px; }
  .axi-root .axi-lab-button { min-height: 48px; max-width: 100%; }
  .axi-root .axi-lab-hero-actions .axi-lab-button { width: 100%; justify-content: space-between; }
  .axi-root .axi-lab-proof { margin-top: 34px; gap: 6px; }
  .axi-root .axi-lab-proof strong { font-size: 23px; }
  .axi-root .axi-lab-proof span { font-size: 8px; letter-spacing: .04em; overflow-wrap: anywhere; }
  .axi-root .axi-lab-hero-display { padding: 14px; }
  .axi-root .axi-lab-display-top,
  .axi-root .axi-lab-display-bottom { font-size: 7px; letter-spacing: .055em; }
  .axi-root .axi-lab-core-visual { width: min(100%, 330px); }
  .axi-root .axi-lab-float-node { min-width: 29px; min-height: 29px; font-size: 9px; }
  .axi-root .axi-lab-console-section,
  .axi-root .axi-lab-catalog-intro,
  .axi-root .axi-lab-workbench-section { padding-block: 62px 70px; }
  .axi-root .axi-lab-section-header h2,
  .axi-root .axi-lab-catalog-intro h2 { font-size: clamp(29px, 7.8cqi, 42px); }
  .axi-root .axi-lab-terminal-bar,
  .axi-root .axi-lab-panel-heading { padding: 12px; font-size: 9px; letter-spacing: .03em; }
  .axi-root .axi-lab-terminal-inner { padding: 15px; }
  .axi-root .axi-lab-terminal-prompt { font-size: 13px; }
  .axi-root .axi-lab-console-actions { flex-direction: column; align-items: stretch; }
  .axi-root .axi-lab-actions { justify-content: stretch; }
  .axi-root .axi-lab-actions .axi-lab-button { flex: 1 1 130px; }
  .axi-root .axi-lab-output { padding: 16px; }
  .axi-root .axi-lab-workbench-input form { padding: 18px 14px 24px; }
  .axi-root .axi-lab-workbench-controls { flex-direction: column; }
  .axi-root .axi-lab-workbench-controls .axi-lab-button { width: 100%; flex: initial; justify-content: space-between; }
  .axi-root .axi-lab-workbench-output > .axi-lab-output { margin: 14px; min-height: 240px; }
  .axi-root .axi-lab-workbench-output > .axi-lab-output-tools { padding-inline: 14px; }
  .axi-root .axi-lab-workbench-footer { flex-direction: column; align-items: stretch; padding: 16px 14px; }
  .axi-root .axi-lab-workbench-footer > div:first-child { white-space: normal; }
  .axi-root .axi-lab-choice-grid { grid-template-columns: minmax(0, 1fr); }
  .axi-root .axi-lab-service-hero-inner { padding-block: 62px; }
  .axi-root .axi-lab-service-hero h1 { font-size: clamp(35px, 8.4cqi, 52px); }
  .axi-root .axi-lab-service-badge { width: 165px; padding: 19px; }
  .axi-root .axi-lab-service-badge strong { font-size: 45px; }
  .axi-root .axi-lab-bottom-cta > .axi-container,
  .axi-root .axi-cta-inner { flex-direction: column; align-items: stretch; gap: 24px; }
  .axi-root .axi-lab-bottom-cta .axi-lab-button { width: 100%; }
  .axi-root .axi-lab-expertise-notes { padding-block: 58px; }
  .axi-root .axi-section { padding-block: 70px; }
  .axi-root .axi-section-heading { display: block; }
  .axi-root .axi-section-heading > p { margin-top: 20px; }
  .axi-root .axi-service-grid,
  .axi-root .axi-cap-grid,
  .axi-root .axi-approach-grid { grid-template-columns: minmax(0, 1fr); }
  .axi-root .axi-approach-grid > div { margin-right: 0; padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--axi-line); }
  .axi-root .axi-field-row { grid-template-columns: minmax(0, 1fr); }
  .axi-root .axi-form-wrap { padding: 24px 17px; }
  .axi-root .axi-contact-method { display: flex; width: 100%; }
  .axi-root .axi-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  .axi-root .axi-footer-top > div:first-child { grid-column: 1 / -1; }
  .axi-root .axi-footer-bottom { flex-direction: column; }
}

@container axi-page (max-width: 540px) {
  .axi-root .axi-lab-preview-grid,
  .axi-root .axi-lab-mini-grid { grid-template-columns: minmax(0, 1fr); }
  .axi-root .axi-lab-preview { min-height: 138px; }
  .axi-root .axi-lab-preview-icon { margin: 9px 0; }
  .axi-root .axi-lab-preview strong { font-size: 18px; }
  .axi-root .axi-lab-flow-arrow { display: none; }
  .axi-root .axi-lab-flow-step { flex-basis: calc(50% - 4px); }
}

@container axi-page (max-width: 360px) {
  .axi-root .axi-container { width: calc(100% - 24px); }
  .axi-root .axi-brand-name { font-size: 14px; }
  .axi-root .axi-lab-intro h1 { font-size: 32px; }
  .axi-root .axi-lab-display-top,
  .axi-root .axi-lab-display-bottom { gap: 4px; font-size: 6px; }
  .axi-root .axi-lab-button { padding-inline: 12px; gap: 9px; }
  .axi-root .axi-lab-actions { flex-direction: column; }
  .axi-root .axi-lab-actions .axi-lab-button { flex: initial; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .axi-root .axi-nav-toggle span:not(.axi-sr) { transition: none; }
}