/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://ten-e.acdev3.com/
 Description:  TEN-E child theme for Hello Elementor — CPTs, ACF fields, and custom functionality.
 Author:       TEN-E / AimClear
 Template:     hello-elementor
 Version:      1.2.7
 Text Domain:  hello-elementor-child
*/

/* Override Hello Elementor's parent reset.css, which forces button:focus and
   button:hover to pink (#c36). Never edit the parent theme; neutralize it here
   (child style.css loads after the parent reset). */
button:focus, button:hover,
[type=button]:focus, [type=button]:hover,
[type=submit]:focus, [type=submit]:hover {
  background-color: #F8971D;
  color: inherit;
}
a[class*="eael-wrapper-link-"] { z-index: 1 !important; }
/* Arrow button — hover / active / focus.
   Wrapper is width:fit-content, so the arrow must keep its box (opacity, never
   display:none) or the pill collapses and the button's calc() re-resolves. */
.request-block.request-block,
.alt-request-block.alt-request-block {
  overflow: hidden;                 /* clips the now-invisible arrow once the button expands */
  transition: background-color .3s;
}
.request-block.request-block .request-button,
.alt-request-block.alt-request-block .alt-request-button {
  position: relative;
  z-index: 1;
  transition: background-color .3s, color .3s, width .3s;
}
/* duplicates a property also settable in the Elementor GUI; move there later */
.alt-request-block.alt-request-block .alt-request-button {
  white-space: nowrap;
}
.request-block.request-block .request-arrow,
.alt-request-block.alt-request-block .alt-request-arrow {
  transition: opacity .3s;
}
.request-block.request-block:hover,
.request-block.request-block:focus-within,
.request-block.request-block:active,
.alt-request-block.alt-request-block:hover,
.alt-request-block.alt-request-block:focus-within,
.alt-request-block.alt-request-block:active {
  background-color: #00446A;
}
.request-block.request-block:hover .request-button,
.request-block.request-block:focus-within .request-button,
.request-block.request-block:active .request-button,
.alt-request-block.alt-request-block:hover .alt-request-button,
.alt-request-block.alt-request-block:focus-within .alt-request-button,
.alt-request-block.alt-request-block:active .alt-request-button {
  width: 100%;
  flex: 0 0 auto;
  background-color: #00446A;
  color: #FFFFFF;
}
.request-block.request-block:hover .request-arrow,
.request-block.request-block:focus-within .request-arrow,
.request-block.request-block:active .request-arrow,
.alt-request-block.alt-request-block:hover .alt-request-arrow,
.alt-request-block.alt-request-block:focus-within .alt-request-arrow,
.alt-request-block.alt-request-block:active .alt-request-arrow {
  opacity: 0;
}

/* Header interactives (nav titles, mega-menu pills, SmartCabinet button):
   animate color-only properties so no hover snaps. */
#tene-header a,
#tene-header button,
#tene-header .e-n-menu-title-container,
#tene-header .e-n-menu-dropdown-icon {
  transition: color .3s, background-color .3s, border-color .3s, opacity .3s;
}

/* ---------- Global header ----------
   Moved here from tene-core.css so it loads on every page (the plugin CSS is only
   enqueued on-demand by shortcodes, i.e. the homepage). Applied to the Elementor
   header template via CSS ID "tene-header". */
/* =========================================
   TEN-E sticky header
   ========================================= */
:root{
  --tene-header-bg: #19262D;              /* opaque state (global "890b524" navy) */
  --tene-header-shadow: 0 2px 18px rgba(0,0,0,.18);
  --tene-ease: cubic-bezier(.4,0,.2,1);
  --tene-dur: .35s;
  --tene-header-h: 96px;                  /* fallback; real height measured in header-sticky.js */
  --tene-header-bg-start: rgba(25, 38, 45, 0);  /* translucent starting state (tune opacity) */
}

#tene-header{
  position: absolute;            /* start: full-width translucent bar overlaying the hero */
  top: 0; left: 0; right: 0; width: 100%;
  z-index: 100;
  background-color: var(--tene-header-bg-start);   /* translucent */
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transition:
    background-color var(--tene-dur) var(--tene-ease),
    box-shadow       var(--tene-dur) var(--tene-ease);
}

/* keep clear of the WP admin bar (32px, 46px, then it stops being fixed) */
.admin-bar #tene-header{ top: 32px; }
@media screen and (max-width: 782px){ .admin-bar #tene-header{ top: 46px; } }
@media screen and (max-width: 600px){ .admin-bar #tene-header{ top: 0; } }

/* scrolled / stuck: fix to the viewport + go solid */
#tene-header.is-stuck,
#tene-header.elementor-sticky--effects{
  position: fixed;
  background-color: var(--tene-header-bg);
  box-shadow: var(--tene-header-shadow);
}

/* stuck only: the logo (e-svg widget 2a0e774) goes white on the navy bar;
   the last path inverts (ink fill, white stroke) */
#tene-header.is-stuck a[data-id="2a0e774"] svg path,
#tene-header.elementor-sticky--effects a[data-id="2a0e774"] svg path{
  fill: #fff;
}
#tene-header.is-stuck a[data-id="2a0e774"] svg path:last-child,
#tene-header.elementor-sticky--effects a[data-id="2a0e774"] svg path:last-child{
  fill: #19262d;
  stroke: white;
}

/* stuck only: nav pill goes ink (background on the rounded widget wrapper)
   with white primary items. The n-menu widget colors its titles/icons via
   these custom properties; the id selector outranks the widget's own rules */
#tene-header.is-stuck .elementor-widget-n-menu,
#tene-header.elementor-sticky--effects .elementor-widget-n-menu{
  background-color: #19262d;
  --n-menu-title-color-normal: #fff;
  --n-menu-icon-color: #fff;
  --n-menu-dropdown-indicator-color-normal: #fff;
  --n-menu-toggle-icon-color: #d0dde5;
}

/* mobile hamburger: light-blue when stuck (direct fallback for svg glyphs
   that don't pick up the toggle-icon custom property) */
#tene-header.is-stuck .e-n-menu-toggle-icon,
#tene-header.elementor-sticky--effects .e-n-menu-toggle-icon{
  color: #d0dde5;
}
#tene-header.is-stuck .e-n-menu-toggle-icon svg,
#tene-header.elementor-sticky--effects .e-n-menu-toggle-icon svg{
  fill: #d0dde5;
}

/* smooth gap collapse for the <=530px stacked (grid) layout */
#header-container{
  transition: row-gap var(--tene-dur) var(--tene-ease);
}

/* in-page anchors shouldn't land under the fixed header */
html{ scroll-padding-top: 120px; }

@media (prefers-reduced-motion: reduce){
  #tene-header, #tene-header *,
  .request-block, .request-block *,
  .alt-request-block, .alt-request-block *{ transition: none !important; }
}

/* Header keeps its translucent start on EVERY page (no per-page solid override).
   The old :has(.tene-hero) fallback was removed: only the homepage hero carries
   that class, so it mis-fired on category/standard/industry singles (which have
   heroes too) and forced the bar solid. Genuinely hero-less pages that need the
   top offset should be handled per-page (by page id) rather than globally. */

/* Small phones: lay the header container out as a grid. */
/* @media (max-width: 530px) {
  #header-container {
    display: grid;
  }
  .elementor-18 #header-container .elementor-element.elementor-element-dc4ddeb.elementor-element{
      order: initial;
      margin-left: auto;
  }
  #header-container .e-043f088-8484e61{
    grid-column-start: span 2;
    width: 100%;
    justify-content: space-between;
  }
} */

/* ---------- Chip ----------
   Moved here from tene-core.css so it loads on every page (used by the carousel tabs
   and by chips built directly in Elementor). */
.tene-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 999px;
  background: #EFF3F6;
  border: none;
  font-size: 16px;
  font-weight: 500;
  font-family: Inter, sans-serif;
  color: #00446A;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.tene-chip:hover, .tene-chip:focus-visible { background: #00446A; color: #fff!important;text-decoration: none!important; }
.tene-chip:hover .tene-chip__icon, .tene-chip:focus-visible .tene-chip__icon { color: #F8971D; }
.tene-chip--active { background: #00446A; color: #fff; }
.tene-chip__icon { width: 12px; height: 12px; flex-shrink: 0; transition: color 0.2s; }
/* white variant (used in quick links) */
.tene-chip--white { background: #fff; color: #00446A; }
.tene-chip--white:hover, .tene-chip--white:focus-visible { background: #D0DDE5; }

/* ==========================================================================
   Hero art system
   Decorative polygon layer (container background) plus the page featured image
   rendered above it inside a polygon mask, via ::after and a CSS custom
   property (--tene-hero-img, printed by tene-core hero-image.php). No img
   elements or Image widgets: swap the photo by changing the featured image.
   Positioning matches Figma frame 597:3239. If the visual is off, calibrate
   background-position and the mask position/size, keeping the mask-size aspect
   locked at 915.417:805.656.
   ========================================================================== */
.tene-hero.e-con {
  position: relative;
  overflow: hidden;
  background: #19262d;
}
.tene-hero.e-con >.e-flex.e-child {
  z-index: 1;
}
/* Decorative polygon layer: own pseudo-element so it can be positioned and
   rotated independently of the photo (::after) and the content. */
.tene-hero.e-con::before {
  content: '';
  position: absolute;
  top: -401px;
  /* Desktop: offset right of center. Centering happens in the <=1024 block. */
  left: 50%;
  margin-left: -175px;
  width: 1507px;
  height: 1485px;
  background: url('/wp-content/uploads/2026/08/Hero_PolyBackground.svg')
    top left / 100% auto no-repeat;
  /* Nudge/rotate this layer as needed, e.g. transform: rotate(-2deg); */
  pointer-events: none;
  z-index: 0;
  transform: rotate(-19deg);
}
.tene-hero::after {
  content: '';
  position: absolute;
  top: 0;
  /* Desktop: left edge at page center. Centering happens in the <=1024 block. */
  left: 50%;
  width: 1022px;
  height: 723px;
  background: var(--tene-hero-img, url('/wp-content/uploads/2026/08/hero-fallback.jpg'))
    center right / cover no-repeat;
  -webkit-mask: url('/wp-content/uploads/2026/08/Image_Poly.svg')
    108.42px -46.968px / 915.417px 805.656px no-repeat;
  mask: url('/wp-content/uploads/2026/08/Image_Poly.svg')
    108.42px -46.968px / 915.417px 805.656px no-repeat;
  pointer-events: none;
  z-index: 0;
}
.tene-hero > .e-con-inner,
.tene-hero .tene-hero__content {
  position: relative;
  z-index: 1;
}
@media (max-width: 1024px) {
  /* .tene-hero::after {
    width: 720px;
    height: 478px;
    -webkit-mask-size: 605px 533px;
    mask-size: 605px 533px;
  } */
  /* Tablet/mobile: keep both stacked art layers, but lay a gradient scrim over
     them for legibility. It rides on .e-con-inner (z-index 1), so it sits above
     the polygon/photo (z-index 0) and behind the hero content. Uses the hero bg
     color (#19262d) at rising opacity so the images still read through it. */
  .tene-hero > .e-con-inner {
    background: linear-gradient(
      180deg,
      rgba(25, 38, 45, 0.35) 0%,
      rgba(25, 38, 45, 0.80) 100%
    );
  }
  /* Translucent art on tablet/mobile so it recedes behind the scrim + content. */
  .tene-hero.e-con::before,
  .tene-hero::after {
    opacity: 0.3;
  }
  /* Center both art layers on page center (margin-left = -width/2). */
  .tene-hero.e-con::before { margin-left: -753.5px; }
  .tene-hero::after { margin-left: -544px; }
}
@media (max-width: 767px) {
  .tene-hero.e-con::before { width: 990px; height: 975px; margin-left: -495px; }
}

/* ==========================================================================
   Contact page (ID 67) — scoped so these only load on that page. Moved out of
   the Elementor page payload / inline <style> so tweaks don't require a rebuild.
   NOTE: the .elementor-element-a0000XX rules target build_contact.py's
   deterministic nid() ids — keep in sync if that build's structure changes.
   ========================================================================== */
.page-id-67 .tene-cc-tile{width:45px;height:45px;flex:0 0 45px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;}
.page-id-67 .tene-cc-tile svg{height:20px;width:auto;}
.page-id-67 .tene-labchips{display:flex;flex-wrap:wrap;gap:12px;}
.page-id-67 .tene-labchip{display:inline-flex;align-items:center;background:#EFF3F6;border:1.5px solid #749CB2;border-radius:20px;padding:9px 28px;font-family:Inter,sans-serif;font-weight:500;font-size:16px;color:#00253A;white-space:nowrap;}

/* Gravity Forms — base */
.gform_wrapper.gform_wrapper .gfield_label{font-family:Inter,sans-serif;font-size:16px;font-weight:600;color:#00253A;margin-bottom:8px;}
.gform_wrapper.gform_wrapper .gfield_required{color:#F8971D;}
.gform_wrapper.gform_wrapper input[type=text],.gform_wrapper.gform_wrapper input[type=email],.gform_wrapper.gform_wrapper input[type=tel],.gform_wrapper.gform_wrapper select,.gform_wrapper.gform_wrapper textarea{width:100%;background:#fff;border:1px solid #749CB2;border-radius:8px;padding:0 16px;height:50px;font-family:Inter,sans-serif;font-size:16px;color:#00253A;box-sizing:border-box;}
.gform_wrapper.gform_wrapper textarea{height:146px;padding:12px 16px;line-height:1.45;}
.gform_wrapper.gform_wrapper .gform_footer{margin-top:8px;}
.gform_wrapper.gform_wrapper .gform_footer input[type=submit],.gform_wrapper.gform_wrapper .gform_footer button{background:#F8971D;color:#00253A;border:none;border-radius:28.5px;padding:14px 40px;font-family:Inter,sans-serif;font-weight:500;font-size:16px;cursor:pointer;transition:background .2s,color .2s;}
.gform_wrapper.gform_wrapper .gform_footer input[type=submit]:hover,.gform_wrapper.gform_wrapper .gform_footer button:hover{background:#00446A;color:#fff;}

/* Gravity Forms — Figma parity */
.gform_wrapper.gform_wrapper .gform_fields{row-gap:30px !important;}
.gform_wrapper.gform_wrapper .gfield_label{margin-bottom:8px !important;}
/* Hide GF's own asterisk whatever markup variant renders it (bare text
   node or .gfield_required_text) - font-size 0 catches both; the orange
   asterisk is drawn once by ::after. Fixes the double ** on required. */
.gform_wrapper.gform_wrapper .gfield_required{font-size:0;color:transparent;}
.gform_wrapper.gravity-theme .gfield_required .gfield_required{display:none;}
.gform_wrapper.gform_wrapper .gfield_required::after{content:"*";color:#F8971D;font-weight:600;font-size:15px;line-height:1;margin-left:2px;}
.gform_wrapper.gform_wrapper .ginput_container_phone .ginput_country-selector_container{display:none !important;}
.gform_wrapper.gform_wrapper .ginput_container_phone .gform-phone__input-wrapper{display:block !important;}
.gform_wrapper.gform_wrapper .ginput_container_phone .gform-field-label--type-sub{display:none !important;}
.gform_wrapper.gform_wrapper .ginput_container_phone .gform-phone{border:0 !important;padding:0 !important;}
.gform_wrapper.gform_wrapper .ginput_container_phone input{width:100% !important;padding-left:16px !important;}
.gform_wrapper.gform_wrapper select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2300253A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M6 13l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:18px 18px;padding-right:46px !important;}
.gform_wrapper.gform_wrapper textarea{height:150px !important;min-height:150px !important;font-size:16px !important;line-height:1.45 !important;}
.gform_wrapper.gform_wrapper .gform_footer{display:inline-flex !important;align-items:center;background:#D9E4EB;border-radius:34px;padding:4px !important;margin-top:45px !important;width:auto !important;}
.gform_wrapper.gform_wrapper .gform_footer input[type=submit],
.gform_wrapper.gform_wrapper .gform_footer button{border-radius:28px !important;margin:0 !important;}
.gform_wrapper.gform_wrapper .gform_footer::after{content:"";width:48px;height:48px;flex:0 0 48px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2300253A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:22px 22px;}

/* Promoted from the RFQ page's (2492) Elementor custom CSS 2026-09-03 so every
   Gravity Form gets them: legend hide, section breaks, checkbox grid + sizing,
   input focus states. Only the form-specific #field_2_8 alignment fix stayed
   on the page. */
.gform_wrapper.gform_wrapper .gform_required_legend{display:none;}
.gform_wrapper.gform_wrapper .gsection{border-bottom:0;margin:32px 0 4px;padding:0;}
.gform_wrapper.gform_wrapper .gform_fields > .gsection:first-child{margin-top:0;}
.gform_wrapper.gform_wrapper .gsection_title{font-size:14px;line-height:1.2;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:#00446A;margin:0;}
.gform_wrapper.gform_wrapper .gfield--type-checkbox .gfield_checkbox{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 24px;}
.gform_wrapper.gform_wrapper .gfield_checkbox input[type=checkbox]{width:18px;height:18px;border:1px solid #D0DDE5;border-radius:4px;}
.gform_wrapper.gform_wrapper .gform_fields input:focus,
.gform_wrapper.gform_wrapper .gform_fields select:focus,
.gform_wrapper.gform_wrapper .gform_fields textarea:focus{border-color:#58859E;outline:none;}
@media (max-width:767px){
  .gform_wrapper.gform_wrapper .gfield--type-checkbox .gfield_checkbox{grid-template-columns:1fr;}
}

/* Elementor element-id targeted (build_contact.py nid() ids) */
.page-id-67 .elementor-element-a000037 > .e-con-inner{background:#D9E4EB;border-radius:34px;padding:4px !important;align-items:center;}
.page-id-67 .elementor-element-a000036{display:none !important;}
.page-id-67 .elementor-element-a000037 > .e-con-inner::after{content:"";width:48px;height:48px;flex:0 0 48px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2300253A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:22px 22px;}
.page-id-67 .elementor-element-a000037{width:auto !important;}
.page-id-67 .elementor-element-a000037 > .e-con-inner{width:auto !important;}

/* Links that wrap a button shouldn't get the global hover underline */
.elementor-kit-7 a:has(> button):hover,
.elementor-kit-7 a:has(> .e-button-base):hover {
	text-decoration: none;
}

/* Send Message: expand-over-arrow hover, matching .request-block */
.gform_wrapper.gform_wrapper .gform_footer{padding: 0 !important;}
.gform_wrapper.gform_wrapper .gform_footer::after {
	flex-shrink: 1;          /* arrow slot is currently flex: 0 0 48px */
	min-width: 0;
	transition: opacity .2s ease;
}
.gform_wrapper.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper.gform_wrapper .gform_footer button {
	flex: 0 0 calc(100% - 48px);   /* 48px = the ::after arrow slot */
	transition: background .2s ease, color .2s ease, flex-basis .3s ease;
}
.gform_wrapper.gform_wrapper .gform_footer:hover input[type="submit"],
.gform_wrapper.gform_wrapper .gform_footer:hover button,
.gform_wrapper.gform_wrapper .gform_footer:focus-within input[type="submit"],
.gform_wrapper.gform_wrapper .gform_footer:focus-within button {
	flex-basis: 100%;
	background-color: #00446A;
	color: #fff;
}
.gform_wrapper.gform_wrapper .gform_footer:hover::after,
.gform_wrapper.gform_wrapper .gform_footer:focus-within::after {
	opacity: 0;
}
/* Disabled submit: the pale slate that used to be the default. Placed after
   the hover/expand rules so a disabled button never recolors or expands. */
.gform_wrapper.gform_wrapper .gform_footer input[type=submit]:disabled,
.gform_wrapper.gform_wrapper .gform_footer button:disabled,
.gform_wrapper.gform_wrapper .gform_footer:hover input[type=submit]:disabled,
.gform_wrapper.gform_wrapper .gform_footer:hover button:disabled,
.gform_wrapper.gform_wrapper .gform_footer:focus-within input[type=submit]:disabled,
.gform_wrapper.gform_wrapper .gform_footer:focus-within button:disabled {
	background: #749CB2;
	color: #001B2A;
	cursor: not-allowed;
	flex-basis: calc(100% - 48px);
}

/* Header buttons: no underline on hover */
div#tene-header .elementor-button:hover {
	text-decoration: none !important;
}

/* Footer links: orange on hover/focus. Scoped to Elementor Pro's theme-builder
   footer wrapper, so it applies whichever footer template is active. */
.elementor-location-footer a:hover,
.elementor-location-footer a:focus-visible {
	color: #F8971D!important;
}


/* Mobile-only Smart Cabinet element — hide above the mobile breakpoint */
@media (min-width: 769px){
  #mobileSmartCabinet{ display: none !important; }
}

/* =========================================
   Services mega-menu dropdown alignment (both headers: #2197 and #18)
   Elementor's mega-menu JS writes an inline `left` on the dropdown panel each
   time it opens, computed to centre the panel under its menu item (and clamp
   it to the viewport). Any extra margin here stacks on top of that offset and
   shoves the panel to the right, so no margin — but keep --align-self:
   flex-start: Elementor's generated post-18.css sets --align-self: center on
   the same container, and letting that win would re-introduce a second offset.
   NOTE: the element-ID classes below are Elementor element IDs. If either Services
   dropdown container is rebuilt in the editor, these selectors must be updated.
   ========================================= */
@media (min-width: 1250px) {
  #tene-header .elementor-element.elementor-element-90744ca.e-con,  /* Header #2197 */
  #tene-header .elementor-element.elementor-element-a4319ad.e-con { /* Header #18   */
    --align-self: flex-start;
  }
}

/* =========================================================================
   TEN-E — light hero polygon: legibility-safe decor (<= 1024px)
   v2: the polygon is re-attached to the hero image widget (::after behind it)
   instead of a bottom band. Desktop (>= 1025px) untouched; dark .tene-hero
   heroes unaffected. The section background stays killed and --tene-decor-url
   stays defined here because the ::after below depends on it.
   ========================================================================= */
@media (max-width: 1024px) {

  /* kill the drifting section background (Elementor rule is (0,4,0)) */
  body .elementor-element.tene-hero-light.e-con:not(.elementor-motion-effects-element-type-background) {
    background-image: none;
  }

  /* retire the v1 bottom-band layer */
  body .elementor-element.tene-hero-light.e-con::before { content: none; }

  body .elementor-element.tene-hero-light.e-con {
    --tene-decor-url: url("/wp-content/uploads/2026/07/tene-services-poly-endcta.svg");
    --tene-decor-size: 70vw;   /* same 70% the desktop background uses */
    --padding-bottom: 64px;

    position: relative;
    isolation: isolate;        /* keeps the z:-1 decor above the section bg */
    overflow: hidden;          /* fallback for older Safari */
    overflow: clip;
  }

  body .elementor-element.tene-hero-light .elementor-widget-image { position: relative; }

  body .elementor-element.tene-hero-light .elementor-widget-image::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    width: var(--tene-decor-size);
    aspect-ratio: 2391 / 2307;
    left:   calc(-1 * var(--tene-decor-size) * 0.12);   /* shape's left edge = image's left edge */
    bottom: calc(-1 * var(--tene-decor-size) * 0.254);
    background: var(--tene-decor-url) 50% 50% / 100% auto no-repeat;
  }

  /* content always above the decor */
  body .elementor-element.tene-hero-light.e-con > .e-con-inner,
  body .elementor-element.tene-hero-light.e-con > .elementor-element {
    position: relative;
    z-index: 1;
  }
}

@media (max-width: 767px) {
  body .elementor-element.tene-hero-light.e-con {
    /* keeps the shape's bottom inside the section as it scales up */
    --padding-bottom: max(56px, calc(var(--tene-decor-size) * 0.131 + 16px));
  }
  body .elementor-element.tene-hero-light .elementor-widget-image::after {
    left: auto;                                        /* stacked: bleed off the right instead */
    right: calc(-1 * var(--tene-decor-size) * 0.269);
  }
}

/* Breadcrumbs: force 12px links (EA widget typography overrides) */
.eael-breadcrumbs__content a{font-size:12px!important; 
    font-weight: 500;}

/* =========================================================================
   Self-hosted Inter (variable font, weights 100-900 + italics), replacing
   fonts.googleapis.com (performance + GDPR). Files in assets/fonts/.
   Elementor's Google Fonts option can be switched off once this is verified:
   these declarations use the same family name, so either source renders
   identically in the meantime.
   ========================================================================= */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-var-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-var-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-var-roman-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-var-roman-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================
   Main nav: shared "sliding pill" hover indicator
   A single pill element lives in the nav and travels/resizes to whichever item is
   hovered or focused, instead of each item fading its own background. The rules that
   blank Elementor's per-item backgrounds are scoped to .has-tene-pill, which nav-pill.js
   adds, so the stock hover behaviour survives if the JS never runs.
   ========================================= */
#tene-header .tene-nav-pill { display: none; }

@media (min-width: 1025px) {
  #tene-header .e-n-menu-heading { position: relative; }
  #tene-header .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title { position: relative; z-index: 1; }

  #tene-header .e-n-menu-heading.has-tene-pill > .e-n-menu-item > .e-n-menu-title,
  #tene-header .e-n-menu-heading.has-tene-pill > .e-n-menu-item > .e-n-menu-title:hover,
  #tene-header .e-n-menu-heading.has-tene-pill > .e-n-menu-item > .e-n-menu-title.e-current {
    background-color: transparent !important;
  }
  #tene-header .e-n-menu-heading.has-tene-pill .e-n-menu-title:has(.e-n-menu-title-container:focus),
  #tene-header .e-n-menu-heading.has-tene-pill .e-n-menu-title:has(.e-n-menu-dropdown-icon:focus) {
    background-color: transparent !important;
  }

  #tene-header .e-n-menu-heading.has-tene-pill .tene-nav-pill {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
    width: var(--pill-w, 0px);
    height: var(--pill-h, 100%);
    border-radius: 50px;
    background-color: var(--e-global-color-primary, #00446A);
    opacity: var(--pill-o, 0);
    transform: translate3d(var(--pill-x, 0px), var(--pill-y, 0px), 0);
    transition: transform .42s cubic-bezier(.32, .72, 0, 1),
                width     .42s cubic-bezier(.32, .72, 0, 1),
                opacity   .22s ease;
    will-change: transform, width;
  }

  /* first paint and resize re-measures jump instead of animating */
  #tene-header .tene-nav-pill.is-static { transition: none !important; }

  /* The item the pill sits behind (nav-pill.js tags it .tene-pill-on) keeps
     white text and a white dropdown chevron even without :hover — e.g. while
     the pointer is down inside the open megamenu panel. The n-menu widget
     colors its titles/indicators via these custom properties. */
  #tene-header .e-n-menu-heading.has-tene-pill > .e-n-menu-item > .e-n-menu-title.tene-pill-on {
    --n-menu-title-color-normal: #fff;
    --n-menu-title-color-hover: #fff;
    --n-menu-title-color-active: #fff;
    --n-menu-dropdown-indicator-color-normal: #fff;
    --n-menu-dropdown-indicator-color-hover: #fff;
    --n-menu-dropdown-indicator-color-active: #fff;
    color: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  #tene-header .tene-nav-pill { transition: opacity .2s ease !important; }
}