/* ==================================================================
   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;

  /* 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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  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;
}

/* 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);
}

/* ==================================================================
   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: 10px; height: 10px;
  opacity: .55;
  transition: transform var(--itec-dur) var(--itec-ease);
}
.itec-nav__caret svg { width: 100%; height: 100%; }
.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;
}
.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-s5) var(--itec-s8) var(--itec-s6); }
.itec-nav__pane { display: none; }
.itec-nav__pane.is-on { display: block; }

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

/* Multi-column, not grid.
   The bullet lists are very uneven - Cybersecurity has 8 children,
   Finance has 3. In a grid every row is forced to the tallest card,
   which wasted ~250px and pushed the panel off a laptop screen.
   Column packing balances them by height instead. */
.itec-nav__cards {
  display: block;
  column-count: 5;
  column-gap: var(--itec-s5);
}

.itec-nav__card {
  display: block;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: var(--itec-s4);
  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 > a {
  margin-top: var(--itec-s2);
  padding-top: var(--itec-s3);
  border-top: 1px solid var(--itec-line-soft);
  font-weight: 600;
  color: var(--itec-ink);
}
.itec-nav__bullets li.is-divider > a::before { top: 20px; opacity: 1; }

/* ==================================================================
   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);
}

/* ==================================================================
   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;
}

.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 */
}
.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-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 { column-count: 4; }
}

@media (max-width: 1024px) {
  .itec-nav__inner { gap: var(--itec-s5); }

  /* Nav and search collapse into the drawer. The CTA stays - it is the
     primary conversion action and there is room for it until 640px. */
  .itec-nav__list { display: none; }
  .itec-nav__tools .itec-nav__icon-btn:not(.itec-nav__burger) { display: none; }
  .itec-nav__tools .itec-nav__burger { display: grid; }
}

@media (max-width: 900px) {
  .itec-nav__cards { column-count: 3; }
}

@media (max-width: 640px) {
  .itec-nav { --itec-bar-h: 72px; --itec-logo-h: 38px; }
  .itec-nav__inner { padding-inline: var(--itec-s4); }
  .itec-nav__tools .itec-nav__cta { display: none; }  /* lives in the drawer footer */

}

/* ---------- 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__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 {
  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__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__acc-btn: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;
}