/* ==================================================================
   Itec Mega Nav
   The approved Concept 4 design, namespaced for WordPress.

   Every selector is scoped under .itec-nav and every custom property is
   prefixed --itec-. That matters here: dropping unprefixed .nav, .row,
   .panel or --s1 into a live theme is how you break somebody else's
   layout three pages away.
   ================================================================== */

.itec-nav {
  /* Brand, sampled from the Itec logo */
  --itec-orange:      #F29C1F;
  --itec-orange-dk:   #D9860C;
  --itec-orange-tint: #FEF6EA;

  --itec-ink:        #26262A;
  --itec-ink-2:      #5C5C63;
  --itec-ink-3:      #8A8A92;
  --itec-line:       #E6E6EA;
  --itec-line-soft:  #F1F1F4;
  --itec-surface:    #FFFFFF;
  --itec-surface-2:  #FAFAFB;
  --itec-surface-3:  #F5F5F7;

  /* 4px spacing scale */
  --itec-s1: 4px;  --itec-s2: 8px;  --itec-s3: 12px; --itec-s4: 16px;
  --itec-s5: 20px; --itec-s6: 24px; --itec-s8: 32px;

  --itec-r-sm: 6px; --itec-r-md: 10px; --itec-r-lg: 14px;

  --itec-t-xs: 12px; --itec-t-sm: 13px; --itec-t-md: 14px;
  --itec-t-lg: 15px; --itec-t-xl: 17px;

  --itec-shadow: 0 1px 2px rgba(20,20,30,.04),
                 0 12px 28px -8px rgba(20,20,30,.14),
                 0 32px 64px -24px rgba(20,20,30,.18);

  --itec-ease: cubic-bezier(.32,.72,0,1);
  --itec-dur:  180ms;

  /* Overridden per instance by the brand palette. Sites in the group do
     not share a typeface, and the one that does not use Inter already
     loads its own - so this names a family rather than fetching one. */
  --itec-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Measured off the live header at 1440px: container 1140px, logo 63px
     tall, row 103px. Matched here so the new nav lands in roughly the
     same place on the page as the one it replaces. */
  --itec-bar-h:  100px;
  --itec-logo-h: 60px;
  --itec-shell:  1140px;

  position: relative;
  z-index: 100;
  font-family: var(--itec-font);
  font-size: var(--itec-t-md);
  line-height: 1.5;
  color: var(--itec-ink);
}

/* Sticky header.
   position:sticky is no use here - a sticky element can only travel
   inside its parent's box, and .itec-nav is only as tall as the bar, so
   it would never move. Fixed positioning plus a min-height on the root
   to hold the space open is what actually works inside an Elementor
   header, where the ancestor chain collapses once the bar leaves flow. */
.itec-nav--sticky { min-height: var(--itec-bar-h); }

.itec-nav--sticky .itec-nav__bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

/* Sticky, with a contact strip above the bar.
   Fixing the bar at top:0 from the first paint would park it straight
   over the strip, which is exactly what it did. The strip should scroll
   away and the bar should pin behind it - and "has the page scrolled
   past an element" is not something CSS can ask, so the is-pinned class
   comes from initSticky() in the script.

   While pinned the bar is out of flow, so padding-bottom stands in for
   it. That keeps the page from jumping by the bar's height at the moment
   it pins, without anything having to know how tall the strip is. */
.itec-nav--sticky.itec-nav--has-topbar .itec-nav__bar { position: static; }

/* The min-height that holds the bar's space in the no-strip case has to
   go, or it double-counts: it sizes the content box, so it stacks on top
   of the padding below rather than being absorbed by it, and the page
   grew by the difference the moment the bar pinned. Unpinned the bar is
   in flow and reserves its own space; pinned the padding does it. */
.itec-nav--sticky.itec-nav--has-topbar { min-height: 0; }

.itec-nav--sticky.itec-nav--has-topbar.is-pinned { padding-bottom: var(--itec-bar-h); }
.itec-nav--sticky.itec-nav--has-topbar.is-pinned .itec-nav__bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
body.admin-bar .itec-nav--sticky.itec-nav--has-topbar.is-pinned .itec-nav__bar { top: 32px; }

/* Clear the WordPress admin bar for logged-in users. */
body.admin-bar .itec-nav--sticky .itec-nav__bar { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .itec-nav--sticky .itec-nav__bar { top: 46px; }
}

/* ---------- scoped reset -----------------------------------------
   Themes style bare element selectors aggressively, so the nav needs
   its own baseline. Getting the STRENGTH of that baseline right took
   two goes, and the shape below is deliberate.

   Written ".itec-nav button" the reset scores (0,1,1) and out-ranks
   ".itec-nav__trigger" at (0,1,0) - it silently wipes the component's
   own padding and font size.

   Written ":where(.itec-nav) button" it scores (0,0,1), which ties with
   the Attesa theme's inline rule:

       button, input[type="button"], ... { background-color: #f8991d }

   and loses on source order, because the theme prints that inline after
   the plugin stylesheet. That is what turned every nav item into an
   orange pill.

   ".itec-nav :where(button)" scores (0,1,0): high enough to beat any
   bare element selector a theme throws at it, low enough that the
   component rules below still win on source order. Keep it this way.  */

.itec-nav *,
.itec-nav *::before,
.itec-nav *::after { box-sizing: border-box; }

.itec-nav :where(ul, ol) {
  list-style: none;
  margin: 0;
  padding: 0;
}
.itec-nav :where(li) { margin: 0; padding: 0; list-style: none; }
.itec-nav :where(li)::before { content: none; }

.itec-nav :where(a) {
  color: inherit;
  text-decoration: none;
  box-shadow: none;
}
.itec-nav :where(a:hover) { text-decoration: none; }

.itec-nav :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  border-radius: 0;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  min-height: 0;
  width: auto;
}
.itec-nav :where(button:hover, button:focus) { background: none; }

.itec-nav :where(h4, h5) { margin: 0; font-family: inherit; }

.itec-nav :where(svg) { display: block; flex: 0 0 auto; }

.itec-nav :focus-visible {
  outline: 2px solid var(--itec-orange);
  outline-offset: 2px;
  border-radius: var(--itec-r-sm);
}

.itec-nav__notice {
  padding: var(--itec-s4);
  border: 1px dashed var(--itec-orange);
  border-radius: var(--itec-r-md);
  background: var(--itec-orange-tint);
  color: var(--itec-ink-2);
}

/* ==================================================================
   CONTACT STRIP
   A thin band above the bar carrying a phone number, an email address
   and the social accounts. Optional, and only rendered when at least one
   of those has been supplied - an empty strip is just a coloured band.
   ================================================================== */

.itec-nav__topbar {
  position: relative;
  z-index: 51;
  font-size: var(--itec-t-xs);
  line-height: 1.4;
}

.itec-nav__topbar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--itec-s3) var(--itec-s6);
  max-width: var(--itec-shell);
  margin-inline: auto;
  padding: var(--itec-s2) var(--itec-s6);
}

.itec-nav__contact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--itec-s2) var(--itec-s5);
}

.itec-nav__contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--itec-s2);
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--itec-dur) var(--itec-ease);
}
.itec-nav__contact-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--itec-orange);
}

/* Social marks.
   Sized from the icon rather than given a fixed box, so swapping the
   16px mark for a larger one does not need the tile resized too. */
.itec-nav__socials {
  display: flex;
  align-items: center;
  gap: var(--itec-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.itec-nav__socials li { margin: 0; }

.itec-nav__social {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: var(--itec-r-sm);
  background: var(--itec-orange);
  color: #fff;
  transition: background var(--itec-dur) var(--itec-ease),
              transform var(--itec-dur) var(--itec-ease);
}
.itec-nav__social:hover {
  background: var(--itec-orange-dk);
  transform: translateY(-1px);
}
.itec-nav__social svg { display: block; }

/* Dark variant. Charcoal picks up the nav strip Tiyende's current header
   uses, and gives the orange marks something to sit against. */
.itec-nav__topbar--dark {
  background: var(--itec-ink);
  color: #fff;
}
.itec-nav__topbar--dark .itec-nav__contact-link { color: rgba(255,255,255,.88); }
.itec-nav__topbar--dark .itec-nav__contact-link:hover { color: #fff; }

.itec-nav__topbar--light {
  background: var(--itec-surface-2);
  color: var(--itec-ink-2);
  border-bottom: 1px solid var(--itec-line-soft);
}
.itec-nav__topbar--light .itec-nav__contact-link { color: var(--itec-ink-2); }
.itec-nav__topbar--light .itec-nav__contact-link:hover { color: var(--itec-orange-dk); }

/* ==================================================================
   BAR
   ================================================================== */

.itec-nav__bar {
  position: relative;
  z-index: 50;
  background: var(--itec-surface);
  box-shadow: 0 1px 0 var(--itec-line), 0 2px 12px rgba(20,20,30,.04);
}

.itec-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--itec-s8);
  height: var(--itec-bar-h);
  max-width: var(--itec-shell);
  margin-inline: auto;
  padding-inline: var(--itec-s6);
}

.itec-nav__logo { flex: 0 0 auto; display: block; line-height: 0; }
.itec-nav__logo img {
  display: block;
  height: var(--itec-logo-h);
  width: auto;
  max-width: none;
}
.itec-nav__logo-text {
  font-size: var(--itec-t-xl);
  font-weight: 700;
  line-height: 1;
  color: var(--itec-ink);
}

/* Nav list.
   AUTO-WIDTH: each item is sized by its own text plus a constant
   horizontal padding. No fixed widths, no equal-width columns. Long
   labels take more room, so the optical gap between words stays even. */
/* The nav takes the space between logo and tools and centres itself in
   it, rather than sitting flush against the logo. That puts the block
   just left of the container's centre, which is where the live header
   has it. */
.itec-nav__primary {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  height: 100%;
}

.itec-nav__list {
  display: flex;
  align-items: center;
  gap: var(--itec-s1);
  height: 100%;
}
.itec-nav__item { position: relative; display: flex; height: 100%; }

.itec-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--itec-s2);
  height: 100%;
  padding-inline: var(--itec-s4);   /* the constant - this is the rule */
  position: relative;
  font-size: var(--itec-t-lg);
  font-weight: 500;
  color: var(--itec-ink);
  white-space: nowrap;
  transition: color var(--itec-dur) var(--itec-ease);
}
.itec-nav__trigger:hover { color: var(--itec-orange); }

/* Underline inset to the text box, so it reads as belonging to the
   word rather than floating around the padding. */
.itec-nav__trigger::after {
  content: '';
  position: absolute;
  left: var(--itec-s4); right: var(--itec-s4); bottom: 0;
  height: 2px;
  background: var(--itec-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--itec-ease);
}
.itec-nav__trigger[aria-expanded="true"] { color: var(--itec-orange); }
.itec-nav__trigger[aria-expanded="true"]::after,
.itec-nav__item.is-current > .itec-nav__trigger::after { transform: scaleX(1); }

.itec-nav__caret {
  display: block;
  width: 12px; height: 12px;
  opacity: .85;
  transition: transform var(--itec-dur) var(--itec-ease),
              opacity var(--itec-dur) var(--itec-ease);
}
/* Heavier stroke than the icon default - at this size a 1.7 stroke reads
   as a smudge rather than a chevron. */
.itec-nav__caret svg { width: 100%; height: 100%; stroke-width: 2.6; }
.itec-nav__trigger[aria-expanded="true"] .itec-nav__caret { transform: rotate(180deg); opacity: 1; }

.itec-nav__tools {
  display: flex;
  align-items: center;
  gap: var(--itec-s2);
  flex: 0 0 auto;
}

.itec-nav__icon-btn {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--itec-ink-2);
  transition: background var(--itec-dur) var(--itec-ease),
              color var(--itec-dur) var(--itec-ease);
}
.itec-nav__icon-btn:hover { background: var(--itec-surface-3); color: var(--itec-ink); }

.itec-nav__cta {
  display: inline-flex;
  align-items: center;
  padding: var(--itec-s3) var(--itec-s6);
  background: var(--itec-orange);
  color: #fff;
  border-radius: var(--itec-r-sm);
  font-size: var(--itec-t-md);
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--itec-dur) var(--itec-ease),
              transform var(--itec-dur) var(--itec-ease);
}
.itec-nav__cta:hover {
  background: var(--itec-orange-dk);
  color: #fff;
  transform: translateY(-1px);
}

.itec-nav__burger { display: none; }

/* ==================================================================
   PANELS
   ================================================================== */

.itec-nav__panel {
  position: absolute;
  top: calc(100% + 1px);
  z-index: 40;
  background: var(--itec-surface);
  border: 1px solid var(--itec-line);
  border-radius: var(--itec-r-lg);
  box-shadow: var(--itec-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 160ms var(--itec-ease),
              transform 200ms var(--itec-ease),
              visibility 0s linear 200ms;
  overflow: hidden;
}
.itec-nav__panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

/* ALIGNMENT, rule 1
   Narrow dropdowns align to the trigger's TEXT, not its padding box.
   The pull-left equals (panel padding + row padding + border), so the
   first character of the first row lands on the same optical x as the
   first character of the label. */
.itec-nav__panel--drop {
  width: max-content;
  min-width: 260px;
  max-width: 360px;
  padding: var(--itec-s3);
  left: calc(var(--itec-s4) - var(--itec-s3) - var(--itec-s4) - 1px);
}

/* ALIGNMENT, rule 2
   Wide panels ignore the trigger and align to the page container. A
   mega panel hanging off a centred trigger looks accidental. */
.itec-nav__panel--wide {
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(calc(100vw - 48px), var(--itec-shell));
  /* Hard guard: never run off the bottom of a 768px-tall laptop. */
  max-height: calc(100vh - var(--itec-bar-h) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Reserve the scrollbar track whether or not it is needed. Without this,
     expanding a section pushes the panel past its max-height, the scrollbar
     appears, and every column shifts left by its width - which reads as the
     whole menu jumping. */
  scrollbar-gutter: stable;
}
.itec-nav__panel--wide.is-open { transform: translateX(-50%) translateY(0); }

.itec-nav__panel--wide::-webkit-scrollbar { width: 10px; }
.itec-nav__panel--wide::-webkit-scrollbar-thumb {
  background: var(--itec-line);
  border-radius: 999px;
  border: 3px solid var(--itec-surface);
}

@media (prefers-reduced-motion: reduce) {
  .itec-nav__panel,
  .itec-nav__panel.is-open { transition-duration: 1ms; }
}

/* ---------- simple dropdown -------------------------------------- */

.itec-nav__blurb {
  padding: var(--itec-s3) var(--itec-s4) var(--itec-s4);
  margin-bottom: var(--itec-s2);
  border-bottom: 1px solid var(--itec-line-soft);
  font-size: var(--itec-t-sm);
  color: var(--itec-ink-3);
}

.itec-nav__row {
  display: block;
  padding: var(--itec-s3) var(--itec-s4);
  border-radius: var(--itec-r-sm);
  transition: background var(--itec-dur) var(--itec-ease);
}
.itec-nav__row:hover { background: var(--itec-orange-tint); }
.itec-nav__row strong {
  display: block;
  font-size: var(--itec-t-md);
  font-weight: 550;
  color: var(--itec-ink);
}
.itec-nav__row span {
  display: block;
  margin-top: 1px;
  font-size: var(--itec-t-sm);
  line-height: 1.4;
  color: var(--itec-ink-3);
}
.itec-nav__row:hover strong { color: var(--itec-orange-dk); }

/* Third level inside a simple dropdown.
   Indented and quieter than its parent, so the hierarchy reads without
   needing a second panel (Insights > Podcasts > Beyond Techspectations). */
.itec-nav__subrows {
  margin: 0 0 var(--itec-s2) 0;
  padding-left: var(--itec-s6);
}
.itec-nav__subrows a {
  display: block;
  position: relative;
  padding: var(--itec-s2) var(--itec-s4);
  font-size: var(--itec-t-sm);
  color: var(--itec-ink-3);
  border-radius: var(--itec-r-sm);
  transition: background var(--itec-dur) var(--itec-ease),
              color var(--itec-dur) var(--itec-ease);
}
.itec-nav__subrows a::before {
  content: '';
  position: absolute;
  left: 2px; top: 50%;
  width: 8px; height: 1px;
  background: var(--itec-line);
}
.itec-nav__subrows a:hover {
  background: var(--itec-orange-tint);
  color: var(--itec-orange-dk);
}

/* ==================================================================
   SEARCH
   ================================================================== */

.itec-nav__sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.itec-nav__search-panel {
  position: absolute;
  top: calc(100% + 1px);
  right: var(--itec-s6);
  z-index: 45;
  display: flex;
  gap: var(--itec-s2);
  width: min(420px, calc(100vw - 48px));
  padding: var(--itec-s3);
  background: var(--itec-surface);
  border: 1px solid var(--itec-line);
  border-radius: var(--itec-r-lg);
  box-shadow: var(--itec-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 160ms var(--itec-ease),
              transform 200ms var(--itec-ease),
              visibility 0s linear 200ms;
}
.itec-nav__search-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.itec-nav .itec-nav__search-panel input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 var(--itec-s4);
  border: 1px solid var(--itec-line);
  border-radius: var(--itec-r-sm);
  background: var(--itec-surface);
  font-size: var(--itec-t-md);
  font-family: inherit;
  color: var(--itec-ink);
}
.itec-nav .itec-nav__search-panel input[type="search"]:focus {
  outline: 2px solid var(--itec-orange);
  outline-offset: -1px;
  border-color: var(--itec-orange);
}
.itec-nav .itec-nav__search-panel button[type="submit"] {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 var(--itec-s5);
  background: var(--itec-orange);
  color: #fff;
  border: 0;
  border-radius: var(--itec-r-sm);
  font-size: var(--itec-t-md);
  font-weight: 600;
}
.itec-nav .itec-nav__search-panel button[type="submit"]:hover {
  background: var(--itec-orange-dk);
}

/* ==================================================================
   MEGA PANEL - tabs
   ================================================================== */

.itec-nav__tabs {
  display: flex;
  align-items: center;
  gap: var(--itec-s1);
  padding: var(--itec-s3) var(--itec-s8) 0;
  background: var(--itec-surface-2);
  border-bottom: 1px solid var(--itec-line);
}

.itec-nav__tab {
  position: relative;
  padding: var(--itec-s3) var(--itec-s5) var(--itec-s4);
  font-size: var(--itec-t-md);
  font-weight: 550;
  color: var(--itec-ink-3);
  white-space: nowrap;
  transition: color var(--itec-dur) var(--itec-ease);
}
.itec-nav__tab::after {
  content: '';
  position: absolute;
  left: var(--itec-s3); right: var(--itec-s3); bottom: -1px;
  height: 2px;
  background: var(--itec-orange);
  transform: scaleX(0);
  transition: transform 200ms var(--itec-ease);
}
.itec-nav__tab:hover { color: var(--itec-ink); }
.itec-nav__tab[aria-selected="true"] { color: var(--itec-orange-dk); font-weight: 650; }
.itec-nav__tab[aria-selected="true"]::after { transform: scaleX(1); }

.itec-nav__all {
  display: inline-flex;
  align-items: center;
  gap: var(--itec-s2);
  margin-left: auto;
  padding-bottom: var(--itec-s4);
  font-size: var(--itec-t-sm);
  font-weight: 600;
  color: var(--itec-orange-dk);
  white-space: nowrap;
}
.itec-nav__all svg {
  width: 14px; height: 14px;
  transition: transform var(--itec-dur) var(--itec-ease);
}
.itec-nav__all:hover { color: var(--itec-orange-dk); }
.itec-nav__all:hover svg { transform: translateX(3px); }

.itec-nav__panes { padding: var(--itec-s4) var(--itec-s8) var(--itec-s5); }
.itec-nav__pane { display: none; }
.itec-nav__pane.is-on { display: block; }

/* ==================================================================
   MEGA PANEL - "By solution" cards
   ================================================================== */

/* Fixed columns, filled server side.
   CSS column-count balanced beautifully but rebalanced on every change, so
   opening one card threw the others into different columns - the layout
   visibly jumped. A grid holds position but forces every row to the tallest
   card, costing ~150px. Dealing the cards into columns in PHP gives both:
   nothing moves, and the balance is still close to optimal. */
.itec-nav__cards {
  display: flex;
  align-items: flex-start;
  gap: var(--itec-s5);
}
.itec-nav__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--itec-s3);
}

.itec-nav__card {
  display: block;
  border: 1px solid var(--itec-line);
  border-radius: var(--itec-r-md);
  background: var(--itec-surface);
  overflow: hidden;
}

.itec-nav__card-head {
  display: flex;
  align-items: center;
  gap: var(--itec-s3);
  padding: var(--itec-s4);
  background: var(--itec-surface-2);
  border-bottom: 1px solid var(--itec-line);
  transition: background var(--itec-dur) var(--itec-ease);
}
.itec-nav__card-head strong {
  font-size: var(--itec-t-md);
  font-weight: 650;
  line-height: 1.25;
  color: var(--itec-ink);   /* explicit: inheriting from the <a> meant a
                               visited card title picked up the theme's
                               link colour */
}
.itec-nav__card-head:hover { background: var(--itec-orange-tint); }
.itec-nav__card-head:hover strong { color: var(--itec-orange-dk); }

.itec-nav__card-icon {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: 0 0 auto;
  border-radius: var(--itec-r-sm);
  background: var(--itec-orange-tint);
  color: var(--itec-orange-dk);
  font-style: normal;
  transition: background var(--itec-dur) var(--itec-ease),
              color var(--itec-dur) var(--itec-ease);
}
.itec-nav__card-head:hover .itec-nav__card-icon {
  background: var(--itec-orange);
  color: #fff;
}

/* Bullets.
   Markers are drawn with ::before rather than list-style, so wrapped
   text lines up flush under itself instead of under the bullet. That
   is a real readability difference on the longer cyber labels. */
.itec-nav__bullets { padding: var(--itec-s2) var(--itec-s4) var(--itec-s3); }

.itec-nav__bullets a {
  display: block;
  position: relative;
  padding: 5px 0 5px var(--itec-s4);
  font-size: var(--itec-t-sm);
  line-height: 1.45;
  color: var(--itec-ink-2);
  transition: color var(--itec-dur) var(--itec-ease);
}
.itec-nav__bullets a::before {
  content: '';
  position: absolute;
  left: 3px; top: 12px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--itec-orange);
  opacity: .55;
  transition: opacity var(--itec-dur) var(--itec-ease),
              transform var(--itec-dur) var(--itec-ease);
}
.itec-nav__bullets a:hover { color: var(--itec-orange-dk); }
.itec-nav__bullets a:hover::before { opacity: 1; transform: scale(1.5); }

/* A trailing "Products" item reads as a different kind of destination
   from the service links above it, so it is set apart. The renderer
   decides which item gets .is-divider, from the label - keying off the
   href meant the rule appeared under Security but not under Print,
   purely because their Products pages are slugged differently. */
.itec-nav__bullets li.is-divider {
  margin-top: var(--itec-s2);
  padding-top: var(--itec-s3);
  border-top: 1px solid var(--itec-line-soft);
}

/* The rule and the space above it sit on the li, not on whatever the li
   happens to contain. The item renders three ways - a plain link, a link
   beside a caret, or a full-width toggle - and hanging the padding off
   each of those in turn left the bullet dot, which is positioned from
   the top of its own label, sitting low by however much padding that
   shape had absorbed. On the li, every shape keeps the padding it has
   everywhere else in the list and the dot needs no correction at all. */
.itec-nav__bullets li.is-divider > a,
.itec-nav__bullets li.is-divider > .itec-nav__bullet-row > a {
  font-weight: 600;
  color: var(--itec-ink);
}
.itec-nav__bullets li.is-divider > a::before,
.itec-nav__bullets li.is-divider > .itec-nav__bullet-row > a::before { opacity: 1; }

/* Both shapes park their caret on the same vertical line. The row shape
   centres its caret in a 22px column, which sat it 2px in from the card
   edge and 2px low next to the toggle shape - enough to read as a wobble
   when two pillars sit side by side. */
.itec-nav__bullets li.is-divider > .itec-nav__bullet-row > .itec-nav__bullet-toggle {
  justify-content: flex-end;
  padding-top: 3px;
}

/* Expandable bullets.
   Anything with children collapses by default, so the panel keeps the
   height it had before the product pages were surfaced. Two shapes: a
   page-less item (Products) where the whole row toggles, and an item that
   has both a page and children (Managed Print, Mitel) where the label
   navigates and a separate caret expands. */

.itec-nav__bullet-row {
  display: flex;
  align-items: flex-start;
  gap: var(--itec-s1);
}
.itec-nav__bullet-row > a { flex: 1 1 auto; min-width: 0; }

.itec-nav__bullet-toggle {
  display: flex;
  align-items: center;
  gap: var(--itec-s2);
  padding: 3px 0;
  color: var(--itec-ink-2);
  transition: color var(--itec-dur) var(--itec-ease);
}
.itec-nav__bullet-toggle.is-label {
  width: 100%;
  justify-content: space-between;
  padding-left: 0;
}
.itec-nav__bullet-row .itec-nav__bullet-toggle {
  flex: 0 0 auto;
  width: 22px;
  justify-content: center;
  padding: 5px 0;
}
.itec-nav__bullet-toggle:hover { color: var(--itec-orange-dk); }

/* Given a tinted disc so it reads as a control rather than decoration. */
.itec-nav__bullet-caret {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--itec-orange-dk);
  background: var(--itec-orange-tint);
  transition: transform var(--itec-dur) var(--itec-ease),
              background var(--itec-dur) var(--itec-ease),
              color var(--itec-dur) var(--itec-ease);
}
.itec-nav__bullet-caret svg { width: 10px; height: 10px; stroke-width: 2.8; }
.itec-nav__bullet-toggle:hover .itec-nav__bullet-caret {
  background: var(--itec-orange);
  color: #fff;
}
.itec-nav__bullet-toggle[aria-expanded="true"] .itec-nav__bullet-caret {
  transform: rotate(180deg);
  background: var(--itec-orange);
  color: #fff;
}

/* The label on a page-less bullet, e.g. "Products". */
.itec-nav__bullet-label {
  display: block;
  position: relative;
  padding: 5px 0 5px var(--itec-s4);
  font-size: var(--itec-t-sm);
  line-height: 1.45;
  font-weight: 600;
  color: var(--itec-ink);
  text-align: left;
}
.itec-nav__bullet-label::before {
  content: '';
  position: absolute;
  left: 3px; top: 12px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--itec-orange);
}
/* Nesting reads only if the indent is deliberate: parent text sits at
   32px, children at 44px, with a dash tying them together. */
.itec-nav__bullet-sub {
  margin: 0 0 var(--itec-s1);
  padding-left: var(--itec-s4);
}
.itec-nav__bullet-sub[hidden] { display: none; }

.itec-nav__bullet-sub a,
.itec-nav__bullet-sub .itec-nav__bullet-label {
  display: block;
  position: relative;
  width: 100%;
  padding: 2px 0 2px var(--itec-s3);
  font-size: var(--itec-t-xs);
  line-height: 1.4;
  font-weight: 400;
  color: var(--itec-ink-3);
  transition: color var(--itec-dur) var(--itec-ease);
}
.itec-nav__bullet-sub .itec-nav__bullet-label {
  font-weight: 600;
  color: var(--itec-ink-2);
}
.itec-nav__bullet-sub a::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 1px;
  background: var(--itec-line);
  border-radius: 0;
  transition: background var(--itec-dur) var(--itec-ease);
}
.itec-nav__bullet-sub .itec-nav__bullet-label::before { content: none; }
.itec-nav__bullet-sub a:hover { color: var(--itec-orange-dk); }
.itec-nav__bullet-sub a:hover::before { background: var(--itec-orange); }

/* A fourth level, e.g. Mitel > Mitel Contact Centre. Shown with its
   parent rather than carrying another toggle. */
.itec-nav__bullet-sub--2 { padding-left: var(--itec-s3); }
.itec-nav__bullet-sub--2 a { font-size: 11px; color: var(--itec-ink-3); }
.itec-nav__bullet-sub--2 a::before { width: 4px; }

/* ==================================================================
   MEGA PANEL - "By product" columns
   ================================================================== */

.itec-nav__columns {
  display: grid;
  /* The six product families have to sit on ONE row, or the pane grows
     to 685px and overruns the viewport guard. With the container at
     1140px that needs a 150px track and a 24px gap - at 160/32 it wraps
     to five and the second row costs 226px. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--itec-s5) var(--itec-s6);
  align-items: start;
}
.itec-nav__column h4 {
  margin: 0 0 var(--itec-s3);
  padding-bottom: var(--itec-s2);
  border-bottom: 1px solid var(--itec-line-soft);
  font-size: var(--itec-t-xs);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--itec-ink-3);
}
.itec-nav__column-link {
  display: block;
  padding: var(--itec-s2) 0;
  font-size: var(--itec-t-md);
  color: var(--itec-ink-2);
  transition: color var(--itec-dur) var(--itec-ease),
              padding-left var(--itec-dur) var(--itec-ease);
}
.itec-nav__column-link:hover {
  color: var(--itec-orange-dk);
  padding-left: var(--itec-s2);
}
.itec-nav__column-link.is-label {
  color: var(--itec-ink);
  font-weight: 600;
}
.itec-nav__column h4 a { color: inherit; }
.itec-nav__column h4 a:hover { color: var(--itec-orange-dk); }

/* Products that carry their own children, e.g. Mitel, I-Suite. */
.itec-nav__column-kids {
  display: block;
  padding-left: var(--itec-s4);
  margin-bottom: var(--itec-s1);
}
.itec-nav__column-kids a {
  display: block;
  position: relative;
  padding: 2px 0 2px var(--itec-s3);
  font-size: var(--itec-t-xs);
  color: var(--itec-ink-3);
}
.itec-nav__column-kids a::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 1px;
  background: var(--itec-line);
}
.itec-nav__column-kids a:hover { color: var(--itec-orange-dk); }
.itec-nav__column-kids a:hover::before { background: var(--itec-orange); }

/* ==================================================================
   MEGA PANEL - "By industry" tiles
   ================================================================== */

.itec-nav__tiles {
  display: grid;
  /* 160px keeps all six industries on one row at 1140px. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--itec-s3);
}
.itec-nav__tile {
  display: block;
  padding: var(--itec-s4);
  border: 1px solid var(--itec-line);
  border-radius: var(--itec-r-md);
  transition: border-color var(--itec-dur) var(--itec-ease),
              background var(--itec-dur) var(--itec-ease);
}
.itec-nav__tile:hover {
  border-color: var(--itec-orange);
  background: var(--itec-orange-tint);
}
.itec-nav__tile strong {
  display: block;
  font-size: var(--itec-t-md);
  font-weight: 600;
}
.itec-nav__tile span {
  display: block;
  margin-top: 1px;
  font-size: var(--itec-t-xs);
  color: var(--itec-ink-3);
}

/* ==================================================================
   MOBILE DRAWER
   ================================================================== */

.itec-nav__scrim {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(20,20,30,.5);
  opacity: 0;
  transition: opacity 220ms var(--itec-ease);
}
.itec-nav__scrim.is-open { opacity: 1; }

.itec-nav__drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 9999;
  width: min(420px, 88vw);
  background: var(--itec-surface);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 280ms var(--itec-ease);
}
.itec-nav__drawer.is-open { transform: none; }

.itec-nav__drawer[hidden],
.itec-nav__scrim[hidden] { display: none; }

.itec-nav__drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--itec-s4);
  padding: var(--itec-s4) var(--itec-s5);
  border-bottom: 1px solid var(--itec-line);
  flex: 0 0 auto;
}
.itec-nav__drawer-title { font-size: var(--itec-t-lg); font-weight: 700; }

.itec-nav__drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--itec-s3) var(--itec-s4) var(--itec-s8);
}

.itec-nav__drawer-foot {
  flex: 0 0 auto;
  padding: var(--itec-s4) var(--itec-s5);
  border-top: 1px solid var(--itec-line);
}
.itec-nav__drawer-foot .itec-nav__cta {
  width: 100%;
  justify-content: center;
}

/* Search, sitting open at the top of the drawer rather than behind an
   icon. The bar hides it because space up there is contested; here
   nothing competes for the width. */
.itec-nav__drawer-search {
  flex: 0 0 auto;
  display: flex;
  gap: var(--itec-s2);
  padding: var(--itec-s3) var(--itec-s5);
  border-bottom: 1px solid var(--itec-line);
}
.itec-nav .itec-nav__drawer-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 var(--itec-s3);
  border: 1px solid var(--itec-line);
  border-radius: var(--itec-r-sm);
  background: var(--itec-surface);
  font: inherit;
  font-size: var(--itec-t-md);
  color: var(--itec-ink);
}
.itec-nav .itec-nav__drawer-search input[type="search"]:focus {
  outline: none;
  border-color: var(--itec-orange);
  box-shadow: 0 0 0 3px var(--itec-orange-tint);
}
.itec-nav .itec-nav__drawer-search button[type="submit"] {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 var(--itec-s4);
  border: 0;
  border-radius: var(--itec-r-sm);
  background: var(--itec-orange);
  color: #fff;
  font: inherit;
  font-size: var(--itec-t-sm);
  font-weight: 600;
  cursor: pointer;
}

/* Contact details in the drawer foot. The strip itself is desktop-only:
   two lines of contact plus a row of icons is a lot of a phone screen to
   spend before the visitor has seen anything. */
.itec-nav__drawer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--itec-s1);
  margin-top: var(--itec-s3);
}
.itec-nav__drawer-contact .itec-nav__contact-link {
  font-size: var(--itec-t-sm);
  color: var(--itec-ink-2);
}
.itec-nav__drawer-contact .itec-nav__contact-link:hover { color: var(--itec-orange-dk); }

.itec-nav__socials--drawer { margin-top: var(--itec-s3); }

.itec-nav__acc-btn {
  display: flex;
  align-items: center;
  gap: var(--itec-s3);
  width: 100%;
  padding: var(--itec-s4) var(--itec-s3);
  border-bottom: 1px solid var(--itec-line-soft);
  font-size: var(--itec-t-lg);
  font-weight: 550;
  min-height: 52px;                 /* comfortably over the 44px minimum */
}

/* An item with both a page and a submenu: the label navigates, the caret
   opens. Two separate targets, because a touch device has no hover to
   distinguish the two intents. */
.itec-nav__acc-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--itec-line-soft);
}
.itec-nav__acc-row .itec-nav__acc-btn {
  flex: 1 1 auto;
  border-bottom: 0;
}
.itec-nav__acc-toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  min-height: 52px;
  color: var(--itec-orange-dk);
  border-left: 1px solid var(--itec-line-soft);
}
.itec-nav__acc-toggle .itec-nav__caret { width: 14px; height: 14px; opacity: 1; }
.itec-nav__acc-toggle:hover { color: var(--itec-orange-dk); }
.itec-nav__acc-toggle[aria-expanded="true"] { color: var(--itec-orange-dk); }
.itec-nav__acc-toggle[aria-expanded="true"] .itec-nav__caret { transform: rotate(180deg); }
.itec-nav__acc-btn .itec-nav__caret { margin-left: auto; }
.itec-nav__acc-btn[aria-expanded="true"] { color: var(--itec-orange-dk); }

.itec-nav__acc-panel { padding: var(--itec-s2) 0 var(--itec-s4) var(--itec-s5); }
.itec-nav__acc-panel[hidden] { display: none; }
.itec-nav__acc-panel a {
  display: block;
  padding: var(--itec-s3);
  min-height: 44px;
  font-size: var(--itec-t-md);
  color: var(--itec-ink-2);
}
.itec-nav__acc-panel a:hover { color: var(--itec-orange-dk); }
.itec-nav__acc-label {
  display: block;
  padding: var(--itec-s3);
  font-size: var(--itec-t-md);
  font-weight: 600;
  color: var(--itec-ink);
}
/* Drawer depth. One step per level, so five levels of menu stay legible
   without the labels marching off the right edge. */
.itec-nav__acc-panel .itec-nav__acc-d2 { padding-left: var(--itec-s5); }
.itec-nav__acc-panel .itec-nav__acc-d3 {
  padding-left: var(--itec-s8);
  font-size: var(--itec-t-sm);
  color: var(--itec-ink-3);
}
.itec-nav__acc-panel .itec-nav__acc-d4 {
  padding-left: 44px;
  font-size: var(--itec-t-xs);
  color: var(--itec-ink-3);
}

.itec-nav__acc-panel h5 {
  margin: var(--itec-s3) 0 var(--itec-s1);
  padding-left: var(--itec-s3);
  font-size: var(--itec-t-xs);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--itec-ink-3);
}

/* Set while the drawer is open, to stop the page scrolling behind it. */
body.itec-nav-locked { overflow: hidden; }

/* ==================================================================
   BREAKPOINTS
   ================================================================== */

@media (max-width: 1180px) {
  .itec-nav__cards { flex-wrap: wrap; }
  .itec-nav__col { flex: 1 1 200px; }
}

/* Collapse to the built-in drawer.
   Scoped to drawer mode on purpose. In hide mode the nav disappears at
   its own breakpoint instead, and if that breakpoint is set lower than
   1024 these rules would otherwise strip the menu out while the bar was
   still on screen - a band of widths with no navigation at all. */
@media (max-width: 1024px) {
  .itec-nav--mobile-drawer .itec-nav__inner { gap: var(--itec-s5); }
  .itec-nav--mobile-drawer .itec-nav__list { display: none; }
  .itec-nav--mobile-drawer .itec-nav__tools .itec-nav__icon-btn:not(.itec-nav__burger) { display: none; }
  .itec-nav--mobile-drawer .itec-nav__tools .itec-nav__burger { display: grid; }
}

/* In hide mode the bar has to stay usable all the way down to whatever
   breakpoint was chosen, so it tightens rather than collapsing. This
   keeps everything on one line to roughly 880px. */
@media (max-width: 1120px) {
  .itec-nav--mobile-bar,
  .itec-nav--mobile-hide {
    --itec-logo-h: 46px;
    --itec-bar-h: 80px;
  }
  .itec-nav--mobile-bar .itec-nav__inner,
  .itec-nav--mobile-hide .itec-nav__inner { gap: var(--itec-s5); padding-inline: var(--itec-s4); }
  .itec-nav--mobile-bar .itec-nav__trigger,
  .itec-nav--mobile-hide .itec-nav__trigger {
    padding-inline: var(--itec-s3);
    font-size: var(--itec-t-md);
  }
  .itec-nav--mobile-bar .itec-nav__trigger::after,
  .itec-nav--mobile-hide .itec-nav__trigger::after {
    left: var(--itec-s3); right: var(--itec-s3);
  }
  .itec-nav--mobile-bar .itec-nav__cta,
  .itec-nav--mobile-hide .itec-nav__cta { padding-inline: var(--itec-s4); }
  .itec-nav--mobile-bar .itec-nav__icon-btn,
  .itec-nav--mobile-hide .itec-nav__icon-btn { width: 34px; height: 34px; }
}

/* Bar mode on a phone. The menu links and the hamburger are gone - the
   site's own mobile menu covers navigation - so what is left is the logo
   and the two utilities, which need to be smaller to sit comfortably. */
@media (max-width: 640px) {
  .itec-nav--mobile-bar {
    --itec-bar-h: 74px;
    --itec-logo-h: 44px;
  }
  .itec-nav--mobile-bar .itec-nav__inner { padding-inline: var(--itec-s3); }
  .itec-nav--mobile-bar .itec-nav__cta {
    padding: var(--itec-s2) var(--itec-s4);
    font-size: var(--itec-t-sm);
  }
}

@media (max-width: 400px) {
  .itec-nav--mobile-bar {
    --itec-bar-h: 68px;
    --itec-logo-h: 40px;
  }
  .itec-nav--mobile-bar .itec-nav__inner { gap: var(--itec-s3); }
  .itec-nav--mobile-bar .itec-nav__icon-btn { width: 30px; height: 30px; }
}

@media (max-width: 640px) {
  /* Drawer mode only. The CTA is dropped here because it reappears in the
     drawer footer - in bar mode there is no drawer, so it has to stay. */
  .itec-nav--mobile-drawer { --itec-bar-h: 72px; --itec-logo-h: 38px; }
  .itec-nav__inner { padding-inline: var(--itec-s4); }
  .itec-nav--mobile-drawer .itec-nav__tools .itec-nav__cta { display: none; }
}

/* ---------- print ------------------------------------------------- */

@media print {
  .itec-nav__panel,
  .itec-nav__drawer,
  .itec-nav__scrim,
  .itec-nav__tools { display: none !important; }
}

/* ==================================================================
   THEME ARMOUR - interactive states

   The base reset above handles a theme styling bare `button` or `a`,
   which score (0,0,1). It cannot handle the theme's PSEUDO-CLASS rules:

       button:hover { background-color:#3f3e40 }   (0,1,1)
       a:hover      { color:#f8991d; text-decoration:underline }  (0,1,1)

   Those out-rank both the (0,1,0) reset and the (0,1,1) component
   rules - the component ties and then loses, because the theme prints
   its CSS inline after the plugin stylesheet.

   The doubled .itec-nav.itec-nav below is deliberate: it costs nothing
   at runtime and lifts these to (0,2,x), which clears the theme without
   resorting to !important. Keep this block LAST in the file.
   ================================================================== */

.itec-nav.itec-nav :where(a):hover,
.itec-nav.itec-nav :where(a):focus {
  text-decoration: none;
}

.itec-nav.itec-nav .itec-nav__bullet-toggle:hover,
.itec-nav.itec-nav .itec-nav__bullet-toggle:focus,
.itec-nav.itec-nav .itec-nav__trigger:hover,
.itec-nav.itec-nav .itec-nav__trigger:focus,
.itec-nav.itec-nav .itec-nav__tab:hover,
.itec-nav.itec-nav .itec-nav__tab:focus,
.itec-nav.itec-nav .itec-nav__acc-btn:hover,
.itec-nav.itec-nav .itec-nav__acc-btn:focus,
.itec-nav.itec-nav .itec-nav__acc-toggle:hover,
.itec-nav.itec-nav .itec-nav__acc-toggle:focus {
  background: none;
  box-shadow: none;
  border-color: transparent;
}

.itec-nav.itec-nav .itec-nav__trigger:hover { color: var(--itec-orange); }
.itec-nav.itec-nav .itec-nav__trigger[aria-expanded="true"] { color: var(--itec-orange); }

.itec-nav.itec-nav .itec-nav__tab:hover { color: var(--itec-ink); }
.itec-nav.itec-nav .itec-nav__tab[aria-selected="true"] { color: var(--itec-orange-dk); }

.itec-nav.itec-nav .itec-nav__icon-btn:hover,
.itec-nav.itec-nav .itec-nav__icon-btn:focus {
  background: var(--itec-surface-3);
  color: var(--itec-ink);
  box-shadow: none;
}

/* The CTA is an <a>, so the theme's link colour applies to it too and
   turned the label orange on an orange button - invisible. White in
   every state, including :visited, which themes also like to restyle. */
.itec-nav.itec-nav .itec-nav__cta,
.itec-nav.itec-nav .itec-nav__cta:link,
.itec-nav.itec-nav .itec-nav__cta:visited,
.itec-nav.itec-nav .itec-nav__cta:hover,
.itec-nav.itec-nav .itec-nav__cta:focus,
.itec-nav.itec-nav .itec-nav__cta:active {
  color: #fff;
  text-decoration: none;
  border: 0;
}
.itec-nav.itec-nav .itec-nav__cta { background: var(--itec-orange); }
.itec-nav.itec-nav .itec-nav__cta:hover,
.itec-nav.itec-nav .itec-nav__cta:focus { background: var(--itec-orange-dk); }

.itec-nav.itec-nav .itec-nav__search-panel button[type="submit"],
.itec-nav.itec-nav .itec-nav__search-panel button[type="submit"]:hover {
  color: #fff;
}

/* ------------------------------------------------------------------
   Visited links

   Attesa lists :visited alongside :link in one rule:

       blockquote::before, a, a:visited, ... { color:#f8991d }

   at (0,1,1). That ties the component rules and wins on source order,
   so any menu item whose page had been visited turned orange - which
   reads as an active state and is thoroughly confusing.

   :visited can only ever change colour-ish properties, so restating the
   colour per component is enough. getComputedStyle deliberately reports
   the unvisited colour, so this cannot be verified from the console -
   check it by eye against a page you have actually opened.
   ------------------------------------------------------------------ */

.itec-nav.itec-nav .itec-nav__trigger:visited      { color: var(--itec-ink); }
.itec-nav.itec-nav .itec-nav__row:visited strong   { color: var(--itec-ink); }
.itec-nav.itec-nav .itec-nav__card-head:visited    { color: var(--itec-ink); }
.itec-nav.itec-nav .itec-nav__bullets a:visited    { color: var(--itec-ink-2); }
.itec-nav.itec-nav .itec-nav__bullets li.is-divider > a:visited { color: var(--itec-ink); }
.itec-nav.itec-nav .itec-nav__topbar--dark .itec-nav__contact-link:visited { color: rgba(255,255,255,.88); }
.itec-nav.itec-nav .itec-nav__topbar--light .itec-nav__contact-link:visited { color: var(--itec-ink-2); }
.itec-nav.itec-nav .itec-nav__drawer-contact .itec-nav__contact-link:visited { color: var(--itec-ink-2); }
.itec-nav.itec-nav .itec-nav__social:visited { color: #fff; }
.itec-nav.itec-nav .itec-nav__bullets li.is-divider > .itec-nav__bullet-row > a:visited { color: var(--itec-ink); }
.itec-nav.itec-nav .itec-nav__subrows a:visited    { color: var(--itec-ink-3); }
.itec-nav.itec-nav .itec-nav__column-link:visited  { color: var(--itec-ink-2); }
.itec-nav.itec-nav .itec-nav__tile:visited         { color: var(--itec-ink); }
.itec-nav.itec-nav .itec-nav__acc-panel a:visited  { color: var(--itec-ink-2); }
.itec-nav.itec-nav .itec-nav__bullet-sub a:visited { color: var(--itec-ink-3); }
.itec-nav.itec-nav .itec-nav__acc-btn:visited      { color: var(--itec-ink); }
.itec-nav.itec-nav .itec-nav__trigger:visited      { color: var(--itec-ink); }
.itec-nav.itec-nav .itec-nav__all:visited          { color: var(--itec-orange-dk); }

/* ------------------------------------------------------------------
   Logo sizing

   Elementor's frontend stylesheet styles `img` inside .elementor at
   (0,1,1), which beat the (0,1,1) component rule on source order and
   collapsed the SVG to 2.6x1px. The logo is an SVG with a viewBox and
   no intrinsic pixel size, so once height is forced the width follows
   the aspect ratio on its own - 34px tall gives 90px wide.
   ------------------------------------------------------------------ */

.itec-nav.itec-nav .itec-nav__logo img {
  display: block;
  height: var(--itec-logo-h);
  width: auto;
  min-width: 0;
  max-width: none;
  max-height: none;
  object-fit: contain;
  /* Left, not centre. If the image has not resolved its intrinsic size
     yet the box can be wider than the artwork, and contain would centre
     it - which reads as a logo that is not left aligned. */
  object-position: left center;
}

.itec-nav.itec-nav .itec-nav__bullet-toggle {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  min-height: 0;
  color: var(--itec-orange-dk);
}