.elementor-kit-8{--e-global-color-primary:#E8B54D;--e-global-color-secondary:#37D6C4;--e-global-color-text:#F3EFE6;--e-global-color-accent:#070B18;--e-global-color-goldsft:#F4D48E;--e-global-color-surface:#0D1428;--e-global-color-surfdeep:#131F42;--e-global-color-cardbg:#111A33;--e-global-color-mutedtx:#8E96AD;--e-global-color-linegld:rgba(232,181,77,0.14);--e-global-color-linesub:rgba(255,255,255,0.07);--e-global-typography-primary-font-family:"Unbounded";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Unbounded";--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"IBM Plex Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"IBM Plex Mono";--e-global-typography-accent-font-size:12.5px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:0.22em;--e-global-typography-heroh1-font-family:"Unbounded";--e-global-typography-heroh1-font-size:clamp(2.4rem, 6vw, 4.6rem);--e-global-typography-heroh1-font-weight:600;--e-global-typography-heroh1-line-height:1.1em;--e-global-typography-heroh1-letter-spacing:-0.01em;--e-global-typography-sech2-font-family:"Unbounded";--e-global-typography-sech2-font-size:clamp(1.8rem, 4vw, 2.8rem);--e-global-typography-sech2-font-weight:600;--e-global-typography-sech2-line-height:1.18em;--e-global-typography-bandh2-font-family:"Unbounded";--e-global-typography-bandh2-font-size:clamp(1.7rem, 3.5vw, 2.6rem);--e-global-typography-bandh2-font-weight:600;--e-global-typography-bandh2-line-height:1.2em;--e-global-typography-statnum-font-family:"Unbounded";--e-global-typography-statnum-font-size:clamp(1.4rem, 2.6vw, 2rem);--e-global-typography-statnum-font-weight:600;--e-global-typography-cardh3-font-family:"Unbounded";--e-global-typography-cardh3-font-size:19px;--e-global-typography-cardh3-font-weight:600;--e-global-typography-cardh3-line-height:1.3em;--e-global-typography-monoterm-font-family:"IBM Plex Mono";--e-global-typography-monoterm-font-size:13px;--e-global-typography-monoterm-font-weight:400;--e-global-typography-monoterm-line-height:2.05em;--e-global-typography-ardisp-font-family:"Amiri";--e-global-typography-ardisp-font-weight:400;--e-global-typography-arbody-font-family:"Tajawal";--e-global-typography-arbody-font-weight:400;background-color:#070B18;color:#F3EFE6;font-family:"IBM Plex Sans", Sans-serif;font-size:16px;font-weight:400;line-height:1.6em;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 p{margin-block-end:0px;}.elementor-kit-8 a{text-decoration:none;}.elementor-kit-8 h1{font-family:"Unbounded", Sans-serif;font-weight:600;}.elementor-kit-8 h2{font-family:"Unbounded", Sans-serif;font-weight:600;}.elementor-kit-8 h3{font-family:"Unbounded", Sans-serif;font-weight:600;}.elementor-kit-8 h4{font-family:"Unbounded", Sans-serif;font-weight:600;}.elementor-kit-8 h5{font-family:"Unbounded", Sans-serif;font-weight:600;}.elementor-kit-8 h6{font-family:"Unbounded", Sans-serif;font-weight:600;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;--container-default-padding-top:72px;--container-default-padding-right:18px;--container-default-padding-bottom:72px;--container-default-padding-left:18px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1060px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;}}@media(max-width:660px){.elementor-kit-8{--e-global-typography-monoterm-font-size:12px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;}}
/* Start custom CSS *//* Gold highlight word inside headings (design-system rule) */
h1 em, h2 em, h3 em, .elementor-heading-title em {
  font-style: normal;
  color: var(--e-global-color-primary);
}

/* Active SECTION. Elementor colours only the exact current item, so a service page
   left the Services parent looking inactive. Its generated per-widget .elementor-kit-8 is
   higher specificity and loads after the kit, hence !important on a state override. */
.elementor-nav-menu li.current-menu-ancestor > a.elementor-item,
.elementor-nav-menu li.current-menu-parent > a.elementor-item,
.elementor-nav-menu li.current-page-ancestor > a.elementor-item,
.elementor-nav-menu li.current-menu-item > a.elementor-item {
  color: var(--e-global-color-primary) !important;
  fill: var(--e-global-color-primary) !important;
}

/* Visible keyboard focus. Elementor ships none, and removing focus affordance fails WCAG. */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible,
.elementor-item:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--e-global-color-primary) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* Skip link reachable on focus rather than permanently off-screen. */
.skip-link:focus {
  position: fixed !important;
  top: 12px; left: 12px;
  width: auto; height: auto;
  padding: 12px 20px;
  background: var(--e-global-color-primary);
  color: var(--e-global-color-accent);
  z-index: 9999;
  clip: auto; clip-path: none;
}

/* Burger renders ~33px; WCAG/touch guidance wants 44x44 and Elementor exposes
   no padding control for the toggle.
   MUST stay inside the dropdown band: Elementor hides the toggle at >=1061px with a
   NON-important `display:none`, so an unscoped `display:...!important` here beats it
   and the burger shows on desktop alongside the full nav. */
@media (max-width: 1060px) {
  .elementor-menu-toggle {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* Footer link rows sit ~21px tall; give them breathing room on touch. */
@media (max-width: 660px) {
  .elementor-location-footer .elementor-icon-list-item > a {
    min-height: 40px;
    display: flex;
    align-items: center;
  }
}

/* ---- MOBILE ACCESSIBILITY ---------------------------------------------
   The original design uses 10.5-11.5px mono labels (service tag pills,
   timezone captions, terminal chrome). Faithful on desktop, but below a
   readable floor on a phone. Raised to 12px on mobile ONLY via per-widget
   typography_font_size_mobile - desktop is untouched. ------------------ */
@media (max-width: 660px) {
  /* phone / email / map links inside office cards need a real hit area */
  .elementor-widget-text-editor a[href^="tel:"],
  .elementor-widget-text-editor a[href^="mailto:"],
  .elementor-widget-text-editor a[href*="maps.google"] {
    display: inline-block;
    min-height: 32px;
    line-height: 32px;
  }
}

/* Elementor form selects render ~40px and expose no padding control. */
.elementor-field-type-select select.elementor-field,
select.elementor-field-textual {
  min-height: 44px;
}

/* ---- LINK COLOUR ------------------------------------------------------
   Hello Elementor's reset.css ships a bare `a { color: #CC3366 }`. Every link
   without an explicit Elementor colour inherits that magenta - 473 of them
   site-wide, including the whole footer nav, all four office phone numbers and
   the footer email. Specificity (0,0,1) here matches the reset but loads later,
   so it wins; every per-widget Elementor rule is higher and is unaffected. */
a {
  color: inherit;
}

/* Contact links stay identifiable as links, in brand gold - matching the
   treatment the home-page offices strip already uses. */
.elementor-widget-text-editor a[href^="tel:"],
.elementor-widget-text-editor a[href^="mailto:"],
.elementor-widget-text-editor a[href*="maps.google"],
.elementor-widget-icon-list a[href^="tel:"],
.elementor-widget-icon-list a[href^="mailto:"] {
  color: var(--e-global-color-goldsft);
}

/* Visually-hidden heading. Used to give the home offices strip a section H2 so the
   outline does not jump H1 -> H3. Elementor's own .elementor-screen-only only
   partially applied to a widget wrapper (width collapsed to 1px but position/clip
   did not), leaving a 1px x 64px sliver - so this is defined here explicitly. */
.ain-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---- ARTICLE BODY RHYTHM ---------------------------------------------
   Hello Elementor's reset sets `p { margin: 0 }`, and the theme-post-content
   widget exposes no paragraph-spacing control (308 controls, none for it), so
   consecutive paragraphs ran together with zero separation and H2s sat 8px
   under the preceding text. Scoped to article bodies only. ------------- */
.elementor-widget-theme-post-content p {
  margin: 0 0 1.15em;
}
.elementor-widget-theme-post-content p:last-child {
  margin-bottom: 0;
}
.elementor-widget-theme-post-content h2,
.elementor-widget-theme-post-content h3,
.elementor-widget-theme-post-content h4 {
  margin-top: 1.7em;
  margin-bottom: .55em;
}
.elementor-widget-theme-post-content > *:first-child {
  margin-top: 0;
}
.elementor-widget-theme-post-content ul,
.elementor-widget-theme-post-content ol {
  margin: 0 0 1.15em 1.25em;
}
.elementor-widget-theme-post-content li {
  margin-bottom: .4em;
}
.elementor-widget-theme-post-content blockquote {
  margin: 1.6em 0;
  padding-left: 22px;
  border-left: 3px solid var(--e-global-color-primary);
  font-style: normal;
}

/* ---- RELATED POSTS GRID ----------------------------------------------
   The block asks for 3 related articles in 3 columns, but the site has only
   3 posts, so each article can show at most 2 - and a 3-track 1fr grid
   left-weights them, leaving ~400px of dead space. These quantity queries
   match the track count to the card count on desktop only (tablet is already
   2-up, mobile 1-up). If :has() is unsupported the grid simply stays 3-track,
   which is the current behaviour, so this degrades safely. ------------- */
@media (min-width: 1061px) {
  .elementor-element-ainrel07 .elementor-posts-container:has(> .elementor-post:last-child:nth-child(1)) {
    grid-template-columns: minmax(0, 385px);
    justify-content: center;
  }
  .elementor-element-ainrel07 .elementor-posts-container:has(> .elementor-post:last-child:nth-child(2)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- MOBILE MENU CTA --------------------------------------------------
   The header "Book Appointment" button is hidden below 1061px, so without
   this there is nothing on a phone or tablet that opens the appointment
   popup. It is a normal Primary-menu item, so it appears inside Elementor's
   dropdown; it is hidden again on desktop where the real button exists.

   Specificity note: the active-state rule above sets `color: … !important`
   at (0,3,1). This rule matches that specificity AND loads later, so a
   visitor already on /contact/ does not get gold text on a gold pill. ---- */
.elementor-nav-menu li.ain-menu-cta > a.elementor-item {
  margin: 16px 20px 8px;
  padding: 13px 20px !important;
  min-height: 44px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* !important: Elementor's own `li:last-child a` rule (0,4,1) sets the bottom
     corners to the dropdown radius, which left the pill 10/10/14/14. */
  border-radius: 10px !important;
  font-weight: 600;
  background-color: var(--e-global-color-primary);
  color: var(--e-global-color-accent) !important;
  fill: var(--e-global-color-accent) !important;
}
.elementor-nav-menu li.ain-menu-cta > a.elementor-item:hover,
.elementor-nav-menu li.ain-menu-cta > a.elementor-item:focus-visible {
  background-color: var(--e-global-color-goldsft);
  color: var(--e-global-color-accent) !important;
}

@media (min-width: 1061px) {
  .ain-menu-cta { display: none !important; }
}

/* ---- MOBILE DROPDOWN: SUBMENU AFFORDANCE ------------------------------
   Elementor renders the expand control as a 24x34 span immediately after the
   label, leaving ~240px of dead row to its right and a target well under 44px.
   Push it to the right edge, give it a real target, and let it rotate. Then
   indent the second level so a child does not look like a parent. ------- */
@media (max-width: 1060px) {
  .elementor-location-header .elementor-nav-menu--dropdown .sub-arrow {
    margin-left: auto;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .elementor-location-header .elementor-nav-menu--dropdown .sub-arrow svg {
    transition: transform .18s ease;
  }
  .elementor-location-header .elementor-nav-menu--dropdown a[aria-expanded="true"] .sub-arrow svg {
    transform: rotate(180deg);
  }

  /* second level: nested, with a hairline rail so the hierarchy reads */
  .elementor-location-header .elementor-nav-menu--dropdown ul.sub-menu {
    box-shadow: inset 2px 0 0 var(--e-global-color-linegld);
    background-color: rgba(255, 255, 255, 0.02);
  }
  .elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item {
    padding-left: 34px !important;
  }
}


/* Legal + long-form lists: Elementor resets li margins to 0, which runs
   multi-line bullets together. paragraph_spacing only targets <p>. */
.elementor-widget-text-editor ul li,
.elementor-widget-text-editor ol li { margin-bottom: 10px; }
.elementor-widget-text-editor ul li:last-child,
.elementor-widget-text-editor ol li:last-child { margin-bottom: 0; }
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol { margin: 0 0 15px; padding-left: 22px; }


/* narrow-tablet button padding: between 661 and 767px the 2-col card grids leave
   buttons ~206-234px wide, which is 1-6px short for labels like 'Learn more' and
   'Request a demo'. Trim the 30px side padding rather than shortening the labels. */
@media (min-width:661px) and (max-width:767px){
  .elementor-widget-button .elementor-button{ padding-left:20px !important; padding-right:20px !important; }
}


/* Card title link hit area. The linked card headings render 24px tall: that meets
   WCAG 2.2 AA target size (24x24) but is tight for a thumb. Vertical padding on an
   INLINE element grows the hit area without changing the line box, so nothing moves.
   Do not switch these to inline-block - long titles would stop wrapping cleanly. */
.elementor-widget-heading .elementor-heading-title a{ padding-top:9px; padding-bottom:9px; }

/* Footer social icons were 38x38, just under the 44px comfortable touch target. */
[data-elementor-type="footer"] .elementor-social-icon{ min-width:44px; min-height:44px; }


/* Reading measure. At 1440 the long-form columns ran 106-116 characters per line
   against a comfortable 45-75. Capping the paragraph rather than the container keeps
   every existing layout width intact. Verified first that no body prose on the site is
   centre-aligned, so a max-width cannot strand a centred block. */
.elementor-widget-text-editor p,
.elementor-widget-text-editor li{ max-width:72ch; }


/* Body prose links. The sitewide `a{color:inherit}` that killed Hello Elementor's
   magenta reset also removed every cue from links inside copy - they rendered in the
   same muted grey as the sentence, with no underline and no hover change. That is
   WCAG 1.4.1 (colour alone, and here not even colour). Contact links were already
   handled; ordinary body links were missed. */
.elementor-widget-text-editor a:not([class]),
.elementor-widget-theme-post-content a:not([class]){
  color: var(--e-global-color-goldsft);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.elementor-widget-text-editor a:not([class]):hover,
.elementor-widget-theme-post-content a:not([class]):hover{ color: var(--e-global-color-primary); }


/* design-token corrections (from the consistency review)
   - service-card bullet lists were #B9C0D4, an off-system grey sitting beside mutedtx
   - form submit hover flipped label to #ffffff on gold: ~1.9:1, a WCAG failure on the
     one control that matters most. Keep the ink label on hover. */
.elementor-widget-icon-list .elementor-icon-list-text{ color: var(--e-global-color-mutedtx); }
.elementor-button[type="submit"]:hover,
.elementor-button[type="submit"]:focus-visible{
  background-color: var(--e-global-color-goldsft);
  color: var(--e-global-color-accent);
}
.elementor-button[type="submit"]:hover svg *{ fill: var(--e-global-color-accent); }/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Unbounded';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('https://ainetworks.net/wp-content/uploads/2026/09/unbounded-var.woff2') format('woff2');
}
@font-face {
	font-family: 'Unbounded';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('https://ainetworks.net/wp-content/uploads/2026/09/unbounded-var.woff2') format('woff2');
}
@font-face {
	font-family: 'Unbounded';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('https://ainetworks.net/wp-content/uploads/2026/09/unbounded-var.woff2') format('woff2');
}
@font-face {
	font-family: 'Unbounded';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('https://ainetworks.net/wp-content/uploads/2026/09/unbounded-var.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('https://ainetworks.net/wp-content/uploads/2026/09/ibmplexsans-var.woff2') format('woff2');
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('https://ainetworks.net/wp-content/uploads/2026/09/ibmplexsans-var.woff2') format('woff2');
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('https://ainetworks.net/wp-content/uploads/2026/09/ibmplexsans-var.woff2') format('woff2');
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('https://ainetworks.net/wp-content/uploads/2026/09/ibmplexsans-var.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('https://ainetworks.net/wp-content/uploads/2026/09/ibmplexmono-400.woff2') format('woff2');
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('https://ainetworks.net/wp-content/uploads/2026/09/ibmplexmono-500.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Amiri';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('https://ainetworks.net/wp-content/uploads/2026/09/amiri-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Amiri';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('https://ainetworks.net/wp-content/uploads/2026/09/amiri-700.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Tajawal';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('https://ainetworks.net/wp-content/uploads/2026/09/tajawal-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Tajawal';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('https://ainetworks.net/wp-content/uploads/2026/09/tajawal-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Tajawal';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('https://ainetworks.net/wp-content/uploads/2026/09/tajawal-700.woff2') format('woff2');
}
/* End Custom Fonts CSS */