/*
 * EXALCO — site chrome (header, mega menu, search, language, mobile nav, breadcrumb, newsletter, footer,
 * back-to-top, tool rail, sticky audience button, audience gate).
 * Sources: ExalcoHeader.dc.html (variant Η), EXALCO-Idiotis-Homepage v5 Footer v2, EXALCO-Pro-Homepage,
 * EXALCO-Audience-Gate, EXALCO-Erga (breadcrumb). Loaded after base.css; uses its tokens.
 *
 * State classes set by JS: is-scrolled / is-hidden (header), is-open (panels, search, mobile nav, tool-rail tray),
 * is-visible (back-to-top, tool rail), is-hidden (tool rail → sliver), is-sent (newsletter form).
 * Without JS (<html class="no-js">) dropdowns and mega panels open on :hover / :focus-within.
 *
 * 1 Shell · 2 Top bar · 3 Nav row · 4 Mega panels · 5 Language · 6 Search · 7 Mobile nav · 8 Breadcrumb
 * 9 Footer + newsletter · 10 Back to top · 11 Tool rail · 12 Sticky button · 13 Audience gate
 * 14 Responsive · 15 Reduced motion
 */

/* 1. Shell
   ========================================================================== */
.ex-skip-link:focus { z-index: 1000; }
.ex-top-anchor { position: absolute; top: 0; left: 0; width: 0; height: 0; scroll-margin-top: 0; }

.ex-header,
.ex-mobile-nav,
.ex-tool-rail,
.ex-gate { --acc: var(--ex-red); } /* accent variable used inside the design's SVG icons */

.ex-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: var(--ex-z-header);
  background: var(--ex-white);
  transition: transform var(--ex-t-panel) var(--ex-ease-out), box-shadow .25s;
}
.ex-header.is-scrolled { box-shadow: var(--ex-shadow-header); }
.ex-header.is-hidden { transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px))); }
.ex-header.is-hidden:focus-within { transform: none; }

/* Small red chevron shared by the dropdown buttons and the nav items */
.ex-aud__chev,
.ex-lang__chev,
.ex-nav__chev {
  display: block;
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--ex-red);
  border-bottom: 2px solid var(--ex-red);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s;
}
.ex-aud__chev { width: 6px; height: 6px; }
[aria-expanded="true"] > .ex-aud__chev,
[aria-expanded="true"] > .ex-lang__chev,
.no-js .ex-aud:hover .ex-aud__chev,
.no-js .ex-lang:hover .ex-lang__chev { transform: rotate(-135deg) translateY(-1px); }

/* 2. Top bar
   ========================================================================== */
.ex-top-bar { background: var(--ex-white); }
.ex-top-bar__inner {
  display: flex;
  align-items: center;
  gap: clamp(6px, .9vw, 16px);
  height: 46px;
  padding: 0 var(--ex-gutter);
}
.ex-top-bar__aside { display: flex; align-items: center; gap: clamp(6px, .9vw, 16px); margin-left: auto; min-width: 0; }

.ex-aud {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: clamp(196px, 17vw, 258px);
  height: 100%;
}
/* The mockup declares `font: 700 10.5px/1 inherit` here and on the button and CTA below. That shorthand is
   invalid CSS, so browsers drop it and the approved design actually renders at the inherited/default size
   and weight. These rules reproduce what the mockup renders, not what its source intended. */
.ex-aud__prefix { font-size: 16px; font-weight: 400; line-height: normal; letter-spacing: .16em; color: rgba(35, 31, 32, .55); white-space: nowrap; }
.ex-aud__button {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 11px 4px;
  border: 0;
  background: transparent;
  color: var(--ex-ink);
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: .1em;
  white-space: nowrap;
  cursor: pointer;
}
.ex-aud__current { overflow: hidden; text-overflow: ellipsis; }
/* Pro and Industrial headers (EXALCO-Pro-Homepage / EXALCO-Industrial-Homepage): these two mockups set the switcher
   explicitly — 13.3333px / 400 / line-height 1 / 1.6px on both the prefix and the button — and draw a hairline
   under the header. The search button is 5px narrower on each side than in the Idiotis header. */
.ex-header[data-audience="pro"] .ex-aud__prefix,
.ex-header[data-audience="industrial"] .ex-aud__prefix { margin-left: -2px; font-size: 13.3333px; line-height: 1; letter-spacing: 1.6px; }
.ex-header[data-audience="pro"] .ex-aud__button,
.ex-header[data-audience="industrial"] .ex-aud__button { line-height: 1; letter-spacing: 1.6px; }
.ex-header[data-audience="pro"],
.ex-header[data-audience="industrial"] { border-bottom: .5px solid rgba(35, 31, 32, .35); }
.ex-header[data-audience="pro"] .ex-header__tool--search,
.ex-header[data-audience="industrial"] .ex-header__tool--search { padding: 0 clamp(7px, .8vw, 13px); }
.ex-aud__panel {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--ex-z-header-popover);
  min-width: 216px;
  border: 1px solid var(--ex-blue-line);
  background: var(--ex-blue);
  box-shadow: var(--ex-shadow-dropdown);
}
.ex-aud__panel.is-open,
.no-js .ex-aud:hover .ex-aud__panel,
.no-js .ex-aud:focus-within .ex-aud__panel { display: flex; }
.ex-aud__item + .ex-aud__item { border-top: 1px solid var(--ex-blue-line); }
.ex-aud__option {
  display: block;
  padding: 14px 16px;
  border-left: 3px solid transparent;
  color: var(--ex-ink);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .1em;
  white-space: nowrap;
  transition: background var(--ex-t-fast), color var(--ex-t-fast);
}
.ex-aud__option:hover,
.ex-aud__option:focus-visible { background: var(--ex-blue-hover); color: var(--ex-ink); }
.ex-aud__option.is-active { border-left-color: var(--ex-red); font-weight: 800; }

.ex-utils__list { display: flex; align-items: center; gap: clamp(6px, .9vw, 16px); }
.ex-utils__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 clamp(5px, .6vw, 10px);
  color: var(--ex-ink);
  font-size: 13.3333px;
  font-weight: 400;
  letter-spacing: 1.6px;
  white-space: nowrap;
  transition: color var(--ex-t-btn);
}
.ex-utils__link:hover { color: var(--ex-red); }
/* Label without a destination (menu item with URL "#"): not a link, so no pointer and no hover colour. */
.ex-utils__link--static { cursor: default; }
.ex-utils__link--static:hover { color: var(--ex-ink); }
.ex-utils__icon { flex: none; width: 18px; height: 18px; }

.ex-top-bar__cta {
  display: flex;
  flex: none;
  align-items: center;
  padding: 13px 22px;
  background: var(--ex-red);
  color: var(--ex-white);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: .1em;
  white-space: nowrap;
  transition: background var(--ex-t-base);
}
.ex-top-bar__cta:hover,
.ex-top-bar__cta:focus-visible { background: var(--ex-ink); color: var(--ex-white); }

/* 3. Nav row
   ========================================================================== */
.ex-header__row {
  position: relative; /* containing block of the mega panels */
  display: flex;
  align-items: center;
  height: 84px;
  padding: 0 var(--ex-gutter);
  border-top: .5px solid rgba(35, 31, 32, .14);
  border-bottom: 1px solid rgba(35, 31, 32, .14);
  font-size: clamp(11px, .95vw, 14px);
  font-weight: 500;
  letter-spacing: clamp(0em, .05vw, .08em);
  transition: height .28s ease;
}
.ex-header.is-scrolled .ex-header__row { height: 72px; }

.ex-header__logo { display: flex; flex: none; align-items: center; margin-right: clamp(14px, 2.4vw, 40px); }
.ex-header__logo-img { display: block; width: auto; max-width: none; height: clamp(38px, 3.4vw, 50px); }
.ex-header__logo-text { font-size: 22px; font-weight: 900; letter-spacing: .04em; }

.ex-nav { display: flex; flex: none; align-items: center; height: 100%; border-right: 1px solid rgba(35, 31, 32, .13); }
.ex-nav__list { display: flex; align-items: center; height: 100%; }
.ex-nav__item { display: flex; height: 100%; }
.ex-nav__link {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  margin: 0;
  padding: 0 clamp(7px, .95vw, 16px);
  border: 0;
  border-left: 1px solid var(--ex-line-soft);
  background: none;
  color: var(--ex-ink);
  font: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow var(--ex-t-base), color var(--ex-t-fast);
}
.ex-nav__link--static { cursor: default; }
/* Six-item menus (Pro, Industrial): same 16px padding at 1680 as the mockups, but it tightens faster so the row still
   fits at 1440 with the tool labels visible (the mockups overlap there: not a designed state). */
@media (min-width: 1200px) {
  .ex-header[data-audience="pro"] .ex-nav__link,
  .ex-header[data-audience="industrial"] .ex-nav__link { padding: 0 clamp(7px, calc(2.9vw - 33px), 16px); }
}
.ex-nav__link:hover,
.ex-nav__link:focus-visible,
.ex-nav__link[aria-expanded="true"] { box-shadow: inset 0 -3px 0 var(--ex-red); color: var(--ex-red); }
.ex-nav__link--static:hover { box-shadow: none; color: var(--ex-ink); }
/* Active section (functional spec 00.1.6) */
.ex-nav__item.current-menu-item > .ex-nav__link,
.ex-nav__item.current-menu-ancestor > .ex-nav__link,
.ex-nav__item.current-menu-parent > .ex-nav__link,
.ex-nav__item.current_page_parent > .ex-nav__link,
.ex-nav__item.current-page-ancestor > .ex-nav__link { box-shadow: inset 0 -3px 0 var(--ex-red); }

.ex-header__tools { display: flex; flex: none; align-items: center; gap: clamp(2px, .4vw, 8px); height: 100%; margin-left: auto; }
.ex-header__tool {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  height: 100%;
  margin: 0;
  padding: 0 clamp(10px, 1.1vw, 18px);
  border: 0;
  background: transparent;
  color: var(--ex-ink);
  font-size: 13.3333px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1.6px;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--ex-t-btn), box-shadow var(--ex-t-base);
}
.ex-header__tool--login { gap: 8px; padding: 0 clamp(7px, .8vw, 13px); }
.ex-header__tool:hover,
.ex-header__tool:focus-visible,
.ex-header__tool[aria-expanded="true"] { box-shadow: inset 0 -3px 0 var(--ex-red); color: var(--ex-red); }
.ex-header__tool-icon { flex: none; }

.ex-header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--ex-touch);
  height: var(--ex-touch);
  margin: 0;
  padding: 0;
  border: var(--ex-border-w) solid var(--ex-hairline-strong);
  background: transparent;
  color: var(--ex-ink);
  cursor: pointer;
}
.ex-header__burger-box { display: flex; flex-direction: column; gap: 5px; width: 20px; }
.ex-header__burger-box span { display: block; height: 2px; background: currentColor; }
.ex-header__burger-box span:last-child { width: 60%; background: var(--ex-red); }

/* 4. Mega panels (Exalco_Nav_Walker)
   ========================================================================== */
.ex-mega {
  display: none;
  position: absolute;
  top: calc(100% + 1px); /* under the row's 1px bottom border (the row is the containing block), as in the mockup */
  left: 0;
  right: 0;
  z-index: var(--ex-z-mega);
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  border-top: .5px solid rgba(35, 31, 32, .2);
  background: var(--ex-white);
  box-shadow: var(--ex-shadow-mega);
  color: var(--ex-ink);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: normal;
  white-space: normal;
}
.ex-mega.is-open,
.no-js .ex-nav__item:hover > .ex-mega,
.no-js .ex-nav__item:focus-within > .ex-mega { display: block; }

.ex-mega__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 52px);
  padding: 28px var(--ex-gutter) 30px;
}
.ex-mega--has-image .ex-mega__inner { grid-template-columns: minmax(0, 1.65fr) minmax(0, .8fr); }
.ex-mega--list .ex-mega__inner { padding-top: 26px; padding-bottom: 28px; }
.ex-mega--columns .ex-mega__inner { padding-top: 24px; padding-bottom: 26px; }

.ex-mega__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ex-mega--list .ex-mega__head { margin-bottom: 14px; }
.ex-mega__eyebrow,
.ex-mega__col-title { margin: 0; font-size: 13.5px; font-weight: 700; letter-spacing: .1em; color: var(--ex-ink); }
.ex-mega__all { flex: none; margin-left: auto; padding-bottom: 3px; border-bottom: 2px solid var(--ex-red); color: var(--ex-ink); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; }

.ex-mega__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
/* Flat list: fills column by column, --ex-mega-rows rows per column (mockup: 10 items → 4 + 4 + 2) */
/* Two 1fr columns; a third (overflow) column is only as wide as its content, as in the mockup (375 / 375 / 190 at 1680). */
.ex-mega--list .ex-mega__list { grid-template-rows: repeat(var(--ex-mega-rows, 4), auto); grid-auto-flow: column; grid-auto-columns: auto; }
/* Grouped panels (ΥΠΟΣΤΗΡΙΞΗ, ΕΤΑΙΡΕΙΑ, ΚΑΤΑΣΚΕΥΑΣΤΗΣ): a group is two rows tall, so the single links of the other
   column stack beside it instead of starting a new row (mockup: "Ανθρώπινο Δυναμικό" + "Καριέρα" beside "Media"). */
.ex-mega:not(.ex-mega--list) .ex-mega__cell--group { grid-row: span 2; }
.ex-mega:not(.ex-mega--list) .ex-mega__cell > .ex-mega__row:only-child { flex: 1; }
.ex-mega__cell { display: flex; flex-direction: column; min-width: 0; }

.ex-mega__row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--ex-line-soft);
  color: var(--ex-ink);
  transition: padding var(--ex-t-base), color var(--ex-t-fast);
}
a.ex-mega__row:hover,
a.ex-mega__row:focus-visible { padding-left: 8px; color: var(--ex-red); }
/* Labels without a destination (menu items with URL "#": group headers such as "Εργαλεία", items whose page does not exist yet)
   are printed as <span> / <p> by the walker: the arrow cursor of plain text, never the pointer, and no hover feedback. */
.ex-mega__row--static,
.ex-mega__sub-link--static,
.ex-mega__col-title,
.ex-mega-actions__tile--static { cursor: default; }
.ex-mega__icon { flex: none; width: 22px; height: 22px; }
.ex-mega__label { font-size: 13.5px; font-weight: 700; color: inherit; }
.ex-mega__arrow { margin-left: auto; color: var(--ex-red); font-size: 16px; font-weight: 700; } /* 16px as rendered: it sets the 42px row of the icon-less lists */

/* Group: header row + small links */
.ex-mega__sub {
  flex: 1;
  padding: 9px 8px 13px 11px;
  border-bottom: 1px solid var(--ex-line-soft);
  background: linear-gradient(90deg, #FAFAF9 0%, rgba(250, 250, 249, 0) 85%);
}
.ex-mega__sub-list { display: flex; flex-direction: column; border-left: 1px solid var(--ex-red); }
.ex-mega__sub-link { display: flex; align-items: center; padding: 6px 0; color: var(--ex-ink); font-size: 12.5px; font-weight: 600; transition: color var(--ex-t-fast); }
.ex-mega__sub-link::before { content: ""; display: block; flex: none; width: 15px; height: 1px; margin-right: 10px; background: var(--ex-grey-img); }
.ex-mega__sub-arrow { margin-left: auto; color: var(--ex-red); font-weight: 700; opacity: .8; }

/* Titled columns of bulleted links, no image (ΕΡΓΑ) */
.ex-mega__cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 52px); }
.ex-mega__col-title { margin-bottom: 12px; }
.ex-mega__col-link { color: inherit; }
.ex-mega__col-list { display: flex; flex-direction: column; }
.ex-mega__col-list .ex-mega__row { padding-top: 11px; padding-bottom: 11px; }
.ex-mega__bullet { display: block; flex: none; width: 8px; height: 8px; border: 1.5px solid var(--ex-red); }

/* Feature image */
.ex-mega__feature { position: relative; min-height: 250px; overflow: hidden; background: var(--ex-grey-img); }
.home.ex-audience-idiotis .ex-mega__feature { min-height: 300px; } /* Idiotis homepage mockup: 300px; shared header, Pro: 250px */
.ex-mega__feature-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ex-mega__feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(35, 31, 32, 0) 30%, rgba(35, 31, 32, .88)); pointer-events: none; }
.ex-mega__feature-body { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 1; color: var(--ex-white); }
.ex-mega__feature-title { margin: 0; font-size: 21px; font-weight: var(--ex-fw-title); line-height: 1.1; letter-spacing: .01em; }
.ex-mega__feature-link { display: inline-block; margin-top: 12px; padding-bottom: 4px; border-bottom: 2px solid var(--ex-red); color: var(--ex-white); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; transition: border-color var(--ex-t-base); }
.ex-mega__feature-link:hover,
.ex-mega__feature-link:focus-visible { border-color: var(--ex-white); color: var(--ex-white); }

/* Action tiles (menu location mega_actions) */
.ex-mega-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: .5px solid rgba(35, 31, 32, .16); }
.ex-mega-actions__item { display: flex; min-width: 0; }
.ex-mega-actions__tile {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 15px clamp(16px, 2.2vw, 30px);
  border: 0;
  border-left: .5px solid rgba(35, 31, 32, .14);
  background: transparent;
  color: var(--ex-ink);
  font: inherit;
  text-align: left;
  transition: background var(--ex-t-base), color var(--ex-t-fast);
}
a.ex-mega-actions__tile:hover,
a.ex-mega-actions__tile:focus-visible { background: var(--ex-tint); color: var(--ex-red); }
.ex-mega-actions__icon { flex: none; width: 22px; height: 22px; }
.ex-mega-actions__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ex-mega-actions__title { font-size: 13px; font-weight: 700; letter-spacing: .05em; color: inherit; }
.ex-mega-actions__sub { font-size: 11px; color: var(--ex-ink); }
.ex-mega-actions__arrow { margin-left: auto; color: var(--ex-red); font-size: 16px; font-weight: 700; }
/* The first tile is the primary (red) one */
.ex-mega-actions__item:first-child .ex-mega-actions__tile { border-left: 0; background: var(--ex-red); color: var(--ex-white); }
.ex-mega-actions__item:first-child a.ex-mega-actions__tile:hover,
.ex-mega-actions__item:first-child a.ex-mega-actions__tile:focus-visible { background: var(--ex-dark); color: var(--ex-white); }
.ex-mega-actions__item:first-child .ex-mega-actions__sub,
.ex-mega-actions__item:first-child .ex-mega-actions__arrow { color: inherit; }

/* 5. Language dropdown
   ========================================================================== */
.ex-lang { position: relative; display: flex; align-items: center; height: 100%; }
.ex-lang__button { gap: 9px; padding: 0 clamp(10px, 1.1vw, 16px); }
.ex-lang__panel {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--ex-z-header-popover);
  min-width: 206px;
  border: 1px solid var(--ex-blue-line);
  background: var(--ex-blue);
  box-shadow: var(--ex-shadow-dropdown);
  font-weight: 400;
  letter-spacing: normal;
}
.ex-lang__panel.is-open,
.no-js .ex-lang:hover .ex-lang__panel,
.no-js .ex-lang:focus-within .ex-lang__panel { display: block; animation: ex-fade-in .18s ease both; }
.ex-lang__item + .ex-lang__item { border-top: 1px solid var(--ex-blue-line); }
/* Account menu of a logged-in member (spec 00.1.10, not designed): the language dropdown's pattern with the user icon. */
.ex-account__button { gap: 8px; }
.ex-account__name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.ex-account__panel .ex-lang__option { padding: 14px 16px; }
.ex-lang__option { display: flex; align-items: center; gap: 13px; padding: 13px 16px; color: var(--ex-ink); transition: background var(--ex-t-fast); }
.ex-lang__option:hover,
.ex-lang__option:focus-visible { background: var(--ex-blue-hover); color: var(--ex-ink); }
.ex-lang__code {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid rgba(35, 31, 32, .4);
  color: var(--ex-ink);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
}
.is-active > .ex-lang__code { border-color: var(--ex-red); color: var(--ex-red); }
.ex-lang__name { font-size: 13px; font-weight: 600; color: var(--ex-ink); }

@keyframes ex-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* 6. Search band
   ========================================================================== */
.ex-search { position: relative; }
.ex-search__band {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  background: var(--ex-tint);
  transition: max-height .28s ease, visibility 0s .28s;
}
.ex-search.is-open .ex-search__band,
.no-js .ex-search__band { max-height: 72px; visibility: visible; border-bottom: .5px solid rgba(35, 31, 32, .25); transition: max-height .28s ease; }
.ex-search__form { display: flex; align-items: center; gap: 16px; padding: 15px var(--ex-gutter); }
.ex-search__icon { flex: none; color: var(--ex-red); }
.ex-search__input {
  flex: 1;
  min-width: 0;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: var(--ex-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
}
.ex-search__input::placeholder { color: var(--ex-placeholder); opacity: 1; }
.ex-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ex-search__input:focus-visible { outline: none; box-shadow: 0 2px 0 var(--ex-red); }
.ex-search__hint { flex: none; font-size: 11px; letter-spacing: .1em; color: var(--ex-placeholder); }
.ex-search__close {
  flex: none;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: .5px solid var(--ex-line-ink);
  background: var(--ex-white);
  color: var(--ex-ink);
  cursor: pointer;
  transition: border-color var(--ex-t-fast), color var(--ex-t-fast);
}
.ex-search__close:hover,
.ex-search__close:focus-visible { border-color: var(--ex-red); color: var(--ex-red); }
.no-js .ex-search__close,
.no-js .ex-search__hint { display: none; }
.ex-search__suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--ex-z-mega);
  max-height: 60vh;
  overflow-y: auto;
  padding: 16px var(--ex-gutter) 22px;
  background: var(--ex-white);
  box-shadow: var(--ex-shadow-mega);
}

/* 7. Mobile navigation (off-canvas; not designed — proposal)
   ========================================================================== */
.ex-mobile-nav { display: none; }

/* 8. Breadcrumb
   ========================================================================== */
.ex-breadcrumb { border-bottom: .5px solid var(--ex-hairline); background: var(--ex-tint); }
.ex-breadcrumb__trail { padding-top: 11px; padding-bottom: 11px; color: var(--ex-ink); font-size: 12px; font-weight: 500; line-height: 13px; } /* strip: 36px, as rendered */
.ex-breadcrumb__trail a { color: var(--ex-ink); }
.ex-breadcrumb__trail a:hover { color: var(--ex-red); }
.ex-breadcrumb__sep {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 7px 1px; /* + the two word spaces = the mockup's 10px gaps */
  border-right: 1.5px solid var(--ex-red);
  border-bottom: 1.5px solid var(--ex-red);
  transform: rotate(-45deg);
}
.ex-breadcrumb__trail .breadcrumb_last,
.ex-breadcrumb__trail strong { font-weight: 700; color: var(--ex-red); }

/* 9. Footer v2 + newsletter
   ========================================================================== */
.ex-footer {
  --ex-footer-cut: clamp(20px, 3.4vw, 60px);
  position: relative;
  margin-top: -8px;
  background: var(--ex-blue);
  color: var(--ex-ink);
  clip-path: polygon(0 var(--ex-footer-cut), 100% 0, 100% 100%, 0 100%);
}

.ex-newsletter { padding-top: var(--ex-footer-cut); border-bottom: 1px solid var(--ex-blue-line); }
.ex-newsletter__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: var(--ex-space-8);
  padding: clamp(40px, 5vw, 72px) var(--ex-gutter);
}
.ex-newsletter__title { margin: 0; font-size: clamp(30px, 3vw, 48px); font-weight: var(--ex-fw-title); line-height: .98; letter-spacing: -.01em; color: var(--ex-ink); }
.ex-newsletter__text { max-width: 440px; margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--ex-ink); }

.ex-newsletter__form { min-width: 0; }
.ex-newsletter__cats { min-width: 0; margin: 0 0 16px; padding: 0; border: 0; }
.ex-newsletter__label { float: left; width: 100%; margin: 0 0 12px; padding: 0; font-size: 13.5px; font-weight: 700; letter-spacing: .2em; color: var(--ex-ink); }
.ex-newsletter__chips { display: flex; flex-wrap: nowrap; gap: 6px; clear: both; }
.ex-newsletter__chip { position: relative; display: block; margin: 0; cursor: pointer; }
.ex-newsletter__radio { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ex-newsletter__chip-label {
  display: block;
  padding: 11px;
  border-bottom: 2px solid rgba(35, 31, 32, .28);
  color: var(--ex-ink);
  /* Rendered values: <button> with an invalid `font` shorthand in the mockup (see base.css) → 13.33px / 400, 40px high. */
  font-size: var(--ex-fs-control);
  font-weight: 400;
  line-height: normal;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: background var(--ex-t-base), color var(--ex-t-base), border-color var(--ex-t-base), transform var(--ex-t-base);
}
.ex-newsletter__chip:hover .ex-newsletter__chip-label { border-bottom-color: var(--ex-ink); }
.ex-newsletter__radio:checked + .ex-newsletter__chip-label { border-bottom-color: var(--ex-ink); background: var(--ex-ink); color: var(--ex-white); transform: translateY(-2px); }
.ex-newsletter__radio:focus-visible + .ex-newsletter__chip-label { outline: 2px solid var(--ex-red); outline-offset: 3px; }

.ex-newsletter__row { display: flex; gap: 10px; max-width: 560px; }
.ex-newsletter__input {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: var(--ex-border-w) solid var(--ex-blue-line);
  border-radius: 0;
  background: var(--ex-white);
  color: var(--ex-ink);
  font-size: var(--ex-fs-input);
  font-weight: 400;
  line-height: normal; /* 50px high */
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--ex-t-base), background-color var(--ex-t-base), box-shadow var(--ex-t-base);
}
.ex-newsletter__input::placeholder { color: var(--ex-placeholder); opacity: 1; }
.ex-newsletter__input:focus { outline: none; border-color: var(--ex-red); background-color: var(--ex-red-tint); box-shadow: var(--ex-focus-ring); }
.ex-newsletter__input[aria-invalid="true"],
.ex-newsletter__input.is-invalid { border-color: var(--ex-red); }
.ex-newsletter__submit {
  flex: none;
  margin: 0;
  padding: 0 28px;
  border: 0;
  border-radius: 0;
  background: var(--ex-red);
  color: var(--ex-white);
  font-size: var(--ex-fs-control); /* rendered: 13.33px / 400 (see base.css) */
  font-weight: 400;
  line-height: normal;
  letter-spacing: .07em;
  cursor: pointer;
  transition: background var(--ex-t-base);
}
.ex-newsletter__submit:hover,
.ex-newsletter__submit:focus-visible { background: var(--ex-ink); }
.ex-newsletter__submit:disabled,
.ex-newsletter__submit.is-loading { background: rgba(35, 31, 32, .25); cursor: progress; }
.ex-newsletter__fields .ex-field__error { margin: 8px 0 0; }
.ex-newsletter__consent { max-width: 560px; margin-top: 14px; }
.ex-newsletter__consent .ex-checkbox__text { color: var(--ex-ink); }
.ex-newsletter__consent .ex-checkbox__text p { display: inline; margin: 0; }
.ex-newsletter__fields .ex-form-error { max-width: 560px; }
.ex-newsletter__success { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 14px 0; color: var(--ex-ink); font-size: 14px; }
.ex-newsletter__success-category { margin-left: 6px; }
.ex-newsletter__form.is-sent .ex-newsletter__fields { display: none; }

.ex-footer__main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, .8fr) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
  padding: clamp(44px, 5vw, 72px) var(--ex-gutter) 20px;
}
.ex-footer__logo { display: inline-flex; margin-bottom: 20px; }
.ex-footer__logo-img { display: block; width: auto; height: 46px; }
.ex-footer__description { max-width: 300px; margin: 0 0 16px; font-size: 13px; line-height: 1.65; color: var(--ex-ink); }
.ex-footer__address { font-size: 13px; font-style: normal; line-height: 1.75; }
.ex-footer__phone { white-space: nowrap; }
.ex-footer__heading { margin: 0 0 18px; color: var(--ex-ink); font-size: 12px; font-weight: 700; line-height: 13px; letter-spacing: .18em; } /* 13px line, as rendered */
.ex-footer__list { display: flex; flex-direction: column; gap: 11px; font-size: 13.5px; color: var(--ex-ink); }
.ex-footer__link { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: color var(--ex-t-fast); }
.ex-footer__link:hover { color: var(--ex-red); }
.ex-footer__link--static { cursor: default; }
.ex-footer__link--static:hover { color: inherit; }
.ex-footer__socials { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.ex-footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--ex-line-ink);
  color: var(--ex-ink);
  transition: border-color var(--ex-t-base), transform var(--ex-t-base);
}
.ex-footer__social:hover,
.ex-footer__social:focus-visible { border-color: var(--ex-red); color: var(--ex-ink); transform: translateY(-3px); }

.ex-footer__bottom { border-top: 1px solid var(--ex-blue-line); }
.ex-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 20px var(--ex-gutter);
  color: var(--ex-ink);
  font-size: 12px;
}
.ex-footer__credits { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ex-footer__credits-text { letter-spacing: .01em; }
.ex-footer__credits-link { display: flex; align-items: center; gap: 8px; color: var(--ex-ink); }
.ex-footer__credits-mark { flex: none; }
.ex-footer__credits-name { display: flex; flex-direction: column; gap: 1px; }
.ex-footer__credits-name b { font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; }
.ex-footer__credits-tag { font-size: 6px; letter-spacing: .14em; color: rgba(35, 31, 32, .55); }

/* 10. Back to top
   ========================================================================== */
.ex-back-to-top {
  position: fixed;
  right: 22px;
  bottom: 26px;
  z-index: var(--ex-z-back-to-top);
  display: none;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--ex-white);
  box-shadow: var(--ex-shadow-float);
  color: var(--ex-ink);
}
.ex-back-to-top.is-visible,
.no-js .ex-back-to-top { display: flex; }
.ex-back-to-top__corner { position: absolute; width: 16px; height: 16px; transition: all var(--ex-t-slow); }
.ex-back-to-top__corner--tr { top: 0; right: 0; border-top: 2px solid var(--ex-red); border-right: 2px solid var(--ex-red); }
.ex-back-to-top__corner--bl { bottom: 0; left: 0; border-bottom: 2px solid var(--ex-ink); border-left: 2px solid var(--ex-ink); }
.ex-back-to-top__icon { flex: none; transition: transform var(--ex-t-slow); }
.ex-back-to-top:hover,
.ex-back-to-top:focus-visible { color: var(--ex-red); }
.ex-back-to-top:hover .ex-back-to-top__corner,
.ex-back-to-top:focus-visible .ex-back-to-top__corner { width: 52px; height: 52px; border-color: var(--ex-red); }
.ex-back-to-top:hover .ex-back-to-top__icon,
.ex-back-to-top:focus-visible .ex-back-to-top__icon { transform: translateY(-4px); }

/* 11. Tool rail
   ========================================================================== */
.ex-tool-rail {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: var(--ex-z-tool-rail);
  display: flex;
  align-items: stretch;
  pointer-events: none; /* only the tab, ✕, sliver and the open tray react (functional spec 00.2.3) */
  transform: translateY(-50%);
  transition: opacity .35s ease, transform .5s var(--ex-ease-out), visibility 0s;
}
/* With JS the rail slides in after the scroll threshold */
.js .ex-tool-rail:not(.is-visible) { visibility: hidden; opacity: 0; transform: translateY(-50%) translateX(120px); transition: opacity .35s ease, transform .5s var(--ex-ease-out), visibility 0s .5s; }

.ex-tool-rail__body { display: flex; align-items: center; }
/* DOM order is tab → tray (focus order); `order` puts the tray to the left of the tab */
.ex-tool-rail__tray { display: flex; flex-direction: column; gap: 14px; order: 1; padding-right: 14px; pointer-events: none; }
.ex-tool-rail__item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 236px;
  padding: 15px 16px;
  border-left: 2px solid var(--ex-red);
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: -12px 14px 34px rgba(35, 31, 32, .18);
  color: var(--ex-ink);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateX(70px);
  transition:
    transform .5s var(--ex-ease-out) calc(var(--ex-i, 0) * 70ms),
    opacity .4s ease calc(var(--ex-i, 0) * 70ms),
    visibility 0s .5s,
    background var(--ex-t-base),
    color var(--ex-t-base);
}
.ex-tool-rail__item:hover,
.ex-tool-rail__item:focus-visible { background: var(--ex-tint); color: var(--ex-red); }
.ex-tool-rail__icon { display: block; flex: none; width: 26px; height: 26px; }
.ex-tool-rail__text { display: flex; flex-direction: column; line-height: 1.2; }
.ex-tool-rail__title { font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.ex-tool-rail__sub { font-size: 10.5px; color: var(--ex-text-soft); }

/* Open: the hover area is tab + tray, so the pointer can travel onto the cards (mockup bug fixed) */
.ex-tool-rail__tray.is-open,
.no-js .ex-tool-rail__body:hover .ex-tool-rail__tray,
.no-js .ex-tool-rail__body:focus-within .ex-tool-rail__tray { pointer-events: auto; }
.ex-tool-rail__tray.is-open .ex-tool-rail__item,
.no-js .ex-tool-rail__body:hover .ex-tool-rail__item,
.no-js .ex-tool-rail__body:focus-within .ex-tool-rail__item {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    transform .5s var(--ex-ease-out) calc(var(--ex-i, 0) * 70ms),
    opacity .4s ease calc(var(--ex-i, 0) * 70ms),
    visibility 0s,
    background var(--ex-t-base),
    color var(--ex-t-base);
}

.ex-tool-rail__handle-wrap { display: flex; flex-direction: column; align-items: flex-end; order: 2; pointer-events: auto; }
.ex-tool-rail__hide { order: -1; } /* ✕ sits above the tab, after it in the DOM */
.ex-tool-rail__hide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(35, 31, 32, .85);
  color: var(--ex-white);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--ex-t-base);
}
.ex-tool-rail__hide:hover,
.ex-tool-rail__hide:focus-visible { background: var(--ex-ink); }
.ex-tool-rail__handle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 38px;
  margin: 0;
  padding: 18px 0;
  border: 0;
  background: var(--ex-red);
  box-shadow: -12px 10px 30px rgba(35, 31, 32, .28);
  color: var(--ex-white);
  cursor: pointer;
  transform-origin: right center;
  transition: transform .45s var(--ex-ease-out);
}
.ex-tool-rail__handle[aria-expanded="true"],
.no-js .ex-tool-rail__body:hover .ex-tool-rail__handle { transform: perspective(600px) rotateY(-22deg); }
.ex-tool-rail__handle-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10.5px; font-weight: 700; letter-spacing: .34em; }
.ex-tool-rail__chev { display: block; width: 6px; height: 6px; border-right: 1.5px solid var(--ex-white); border-bottom: 1.5px solid var(--ex-white); transform: rotate(135deg); transition: transform .35s; }
.ex-tool-rail__handle[aria-expanded="true"] .ex-tool-rail__chev,
.no-js .ex-tool-rail__body:hover .ex-tool-rail__chev { transform: rotate(-45deg); }

.ex-tool-rail__sliver {
  display: none;
  align-self: center;
  width: 6px;
  height: 120px;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ex-red);
  box-shadow: -8px 6px 18px rgba(35, 31, 32, .25);
  cursor: pointer;
  pointer-events: auto;
}
.ex-tool-rail.is-hidden .ex-tool-rail__body { display: none; }
.ex-tool-rail.is-hidden .ex-tool-rail__sliver { display: block; }
.no-js .ex-tool-rail__hide { display: none; }

/* 12. Sticky audience button (Pro: ONLINE ΑΓΟΡΕΣ)
   ========================================================================== */
.ex-sticky-btn {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: var(--ex-z-tool-rail);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 11px;
  background: var(--ex-ink);
  box-shadow: -10px 8px 22px rgba(35, 31, 32, .28);
  color: var(--ex-white);
  transform: translateY(-50%);
  transition: background var(--ex-t-base);
}
.ex-sticky-btn:hover,
.ex-sticky-btn:focus-visible { background: var(--ex-red); color: var(--ex-white); }
.ex-sticky-btn:hover .ex-sticky-btn__icon circle { fill: var(--ex-white); }
.ex-sticky-btn__icon { display: block; flex: none; width: 20px; height: 20px; }
.ex-sticky-btn__label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10.5px; font-weight: 700; letter-spacing: .28em; white-space: nowrap; }

/* 13. Audience gate (modal, EXALCO-Audience-Gate-Rows)
   ========================================================================== */
.ex-gate {
  position: fixed;
  inset: 0;
  z-index: calc(var(--ex-z-modal) + 10);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vw, 48px);
  overflow-y: auto;
}
/* The dimmed, blurred background is its own element ([data-modal-close]): a click on it closes the gate.
   Fixed, so it stays in place while a tall panel scrolls inside .ex-gate (which must therefore not get a
   transform / filter / backdrop-filter of its own — nor an opacity animation: a filled fade on .ex-gate made it the
   backdrop root and the page behind was not blurred at all. The fade is on the backdrop itself). */
.ex-gate__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(35, 31, 32, .62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: ex-gate-fade .25s ease both;
}
.ex-gate__panel {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  margin: auto;
  overflow: hidden;
  background: #EDEEEE;
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .7);
  animation: ex-gate-rise .4s cubic-bezier(.2, .8, .2, 1) both;
}
.ex-gate__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; /* beta audit v3: logo and heading centred (the heading wraps under the logo at 760px) */
  gap: 20px;
  padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 44px);
  background: var(--ex-ink);
}
.ex-gate__panel:focus { outline: 0; } /* focus target on open, so that no row starts in its focus (filled) state */
.ex-gate__logo { display: block; width: auto; height: clamp(40px, 3.8vw, 56px); }
.ex-gate__heading { flex: 1 1 100%; min-width: 0; text-align: center; } /* beta audit v3: centred under the logo (the mockup aligns it right) */
.ex-gate__eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 8px; color: rgba(255, 255, 255, .65); font-size: 14pt; font-weight: 700; letter-spacing: .22em; }
.ex-gate__eyebrow::before { content: ""; display: block; width: 9px; height: 9px; background: var(--acc, var(--ex-red)); }
.ex-gate__title { margin: 0; color: var(--ex-white); font-size: clamp(20px, 2.2vw, 30px); font-weight: var(--ex-fw-title); line-height: 1; letter-spacing: -.02em; }

.ex-gate__rows { margin: 0; padding: 0; list-style: none; }
.ex-gate__item { margin: 0; padding: 0; }
.ex-gate__row { position: relative; display: flex; align-items: center; padding: clamp(18px, 1.9vw, 28px) clamp(20px, 2.4vw, 38px); overflow: hidden; border-top: 2px solid var(--ex-white); background: var(--ex-blue); color: var(--ex-ink); }
.ex-gate__item:first-child .ex-gate__row { border-top: 0; }
.ex-gate__row-fill { position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; width: 0; background: linear-gradient(100deg, #ED1C24 0%, #B00E13 100%); transition: width .5s cubic-bezier(.4, 0, .15, 1); }
.ex-gate__row-in { position: relative; z-index: 2; display: flex; align-items: center; gap: clamp(16px, 1.8vw, 28px); width: 100%; }
.ex-gate__row-tick { display: flex; flex: none; align-items: center; justify-content: center; width: clamp(42px, 3.4vw, 54px); height: clamp(42px, 3.4vw, 54px); border: 1.5px solid rgba(35, 31, 32, .3); color: var(--ex-ink); transition: background .4s, color .4s, border-color .4s; }
.ex-gate__row-chev { display: block; width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translate(-2px, -1px); }
.ex-gate__row-body { min-width: 0; }
.ex-gate__row-title { color: var(--ex-ink); font-size: clamp(20px, 1.9vw, 32px); font-weight: var(--ex-fw-title); /* Uniform Pro Medium (beta audit v3; mockup 900) */ line-height: 1; letter-spacing: -.02em; transition: color .4s ease; }
.ex-gate__row-text { display: block; max-width: 400px; margin-top: 6px; color: #5A5E5D; font-size: clamp(12px, .95vw, 14px); line-height: 1.5; transition: color .4s ease; }
.ex-gate__row-cta { display: inline-flex; flex: none; align-items: center; gap: 11px; margin-left: auto; color: var(--ex-ink); font-size: 11px; font-weight: 800; letter-spacing: .16em; transition: color .4s ease; }
.ex-gate__row-line { display: block; width: 30px; height: 2px; background: currentColor; }
.ex-gate__row:hover .ex-gate__row-fill,
.ex-gate__row:focus-visible .ex-gate__row-fill { width: 100%; }
.ex-gate__row:hover .ex-gate__row-title,
.ex-gate__row:hover .ex-gate__row-text,
.ex-gate__row:hover .ex-gate__row-cta,
.ex-gate__row:focus-visible .ex-gate__row-title,
.ex-gate__row:focus-visible .ex-gate__row-text,
.ex-gate__row:focus-visible .ex-gate__row-cta { color: var(--ex-white); }
.ex-gate__row:hover .ex-gate__row-tick,
.ex-gate__row:focus-visible .ex-gate__row-tick { border-color: var(--ex-white); background: var(--ex-white); color: var(--ex-red); }
.ex-gate__row:focus-visible { outline-offset: -4px; outline-color: var(--ex-white); }

@keyframes ex-gate-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ex-gate-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

/* 13b. Login dialog (template-parts/global/login-modal.php, beta audit v3). Not designed: the gate's backdrop and
   entrance, a white panel with the member form patterns (base.css + the few .ex-member rules repeated here, as
   components/member.css loads only on the member pages). Tablet / mobile included, needs approval.
   ========================================================================== */
.ex-login-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--ex-z-modal) + 10);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vw, 48px);
  overflow-y: auto;
}
.ex-login-modal[hidden] { display: none; }
.ex-login-modal__backdrop { position: fixed; inset: 0; background: rgba(35, 31, 32, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: ex-gate-fade .25s ease both; }
.ex-login-modal__panel {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  margin: auto;
  padding: clamp(28px, 3vw, 44px);
  border-top: 4px solid var(--ex-red);
  background: var(--ex-white);
  color: var(--ex-ink);
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .7);
  animation: ex-gate-rise .4s cubic-bezier(.2, .8, .2, 1) both;
}
.ex-login-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 1.5px solid rgba(35, 31, 32, .25);
  background: transparent;
  color: var(--ex-ink);
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--ex-t-fast), color var(--ex-t-fast);
}
.ex-login-modal__close:hover,
.ex-login-modal__close:focus-visible { border-color: var(--ex-red); color: var(--ex-red); }
.ex-login-modal .ex-eyebrow { margin-bottom: 10px; }
.ex-login-modal__title.ex-title { margin: 0 0 10px; }
.ex-login-modal__text.ex-text { margin: 0 0 22px; }
.ex-login-modal .ex-form-grid--single { grid-template-columns: minmax(0, 1fr); }
.ex-login-modal .ex-field__error { margin: 0; }
.ex-login-modal .ex-member__check { margin-top: 12px; }
.ex-login-modal .ex-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 22px; }
.ex-login-modal__link { border-bottom: 1.5px solid var(--ex-red); color: var(--ex-ink); font-size: var(--ex-fs-body-sm); font-weight: 500; transition: color var(--ex-t-fast); }
.ex-login-modal__link:hover,
.ex-login-modal__link:focus-visible { color: var(--ex-red); }
.ex-login-modal__register { margin: 26px 0 0; padding-top: 20px; border-top: var(--ex-border-w) solid var(--ex-line); font-size: var(--ex-fs-body-sm); }

/* 14. Responsive (proposal — only the gate has a designed mobile state)
   ========================================================================== */
@media (max-width: 1439px) {
  /* Functional spec 00.4.1: utility labels hide, icons stay (labels remain available to screen readers) */
  .ex-utils__link:not(.ex-utils__link--no-icon) .ex-utils__label,
  .ex-header__tool-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ex-mega__list { gap: 0 28px; }
}

@media (max-width: 1199px) {
  .ex-header__row { height: 72px; }
  .ex-header.is-scrolled .ex-header__row { height: 64px; }
  /* Fluid between 900 and 1199 so the six-item Pro / Industrial menus still fit at 900px. */
  .ex-header__logo-img { height: clamp(30px, 3.2vw, 38px); }
  .ex-nav__link { gap: 5px; padding: 0 clamp(5px, .75vw, 9px); font-size: 11px; }
  .ex-header__logo { margin-right: clamp(10px, 1.2vw, 14px); }
  .ex-header__tool,
  .ex-header__tool--login { padding: 0 clamp(6px, .8vw, 10px); }
  .ex-aud { flex: 0 1 auto; justify-content: flex-start; min-width: 0; }
  .ex-mega--has-image .ex-mega__inner { grid-template-columns: minmax(0, 1fr); }
  .ex-mega__feature { display: none; }
  .ex-mega-actions__sub { display: none; }

  .ex-newsletter__inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ex-newsletter__chips { flex-wrap: wrap; }
  .ex-footer__main { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ex-footer__company { grid-column: 1 / -1; }
  .ex-footer__description { max-width: 520px; }
}

@media (max-width: 899px) {
  /* Header: compact top bar (audience + CTA), logo + search + hamburger; menu moves to the off-canvas panel */
  .ex-top-bar__inner { height: 44px; }
  .ex-aud__prefix,
  .ex-utils { display: none; }
  .ex-aud__button { min-height: 44px; }
  .ex-aud__option { padding: 16px; }
  .ex-top-bar__aside { flex: none; } /* the audience label gives way (ellipsis), not the CTA */
  .ex-top-bar__cta { min-height: var(--ex-touch); padding: 0 14px; font-size: 12px; letter-spacing: .08em; } /* full bar height: 44px tap target */
  .ex-header__row,
  .ex-header.is-scrolled .ex-header__row { height: 64px; }
  .ex-header__logo { min-height: var(--ex-touch); }
  .ex-header__logo-img { height: 36px; }
  .ex-nav,
  .ex-lang,
  .ex-header__tool--login { display: none; }
  .ex-header__tools { gap: 8px; }
  .ex-header__tool--search { justify-content: center; width: var(--ex-touch); height: var(--ex-touch); padding: 0; border: var(--ex-border-w) solid var(--ex-hairline-strong); }
  .ex-header__tool--search:hover,
  .ex-header__tool--search[aria-expanded="true"] { box-shadow: none; border-color: var(--ex-red); }
  .ex-header__burger { display: flex; }
  .ex-search__hint { display: none; }
  .ex-search__close { width: var(--ex-touch); height: var(--ex-touch); }
  .ex-search.is-open .ex-search__band,
  .no-js .ex-search__band { max-height: 76px; }

  .ex-mobile-nav {
    position: fixed;
    inset: 0;
    z-index: var(--ex-z-modal);
    display: block;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s var(--ex-t-panel);
  }
  .ex-mobile-nav.is-open { visibility: visible; pointer-events: auto; transition: none; }
  .ex-mobile-nav__backdrop { position: absolute; inset: 0; background: rgba(35, 31, 32, .6); opacity: 0; transition: opacity var(--ex-t-slow); }
  .ex-mobile-nav.is-open .ex-mobile-nav__backdrop { opacity: 1; }
  .ex-mobile-nav__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: min(420px, 100%);
    padding: 16px var(--ex-gutter) 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ex-white);
    box-shadow: var(--ex-shadow-drawer);
    transform: translateX(100%);
    transition: transform var(--ex-t-panel) var(--ex-ease-out);
  }
  .ex-mobile-nav.is-open .ex-mobile-nav__panel { transform: none; }

  .ex-mobile-nav__head { display: flex; align-items: center; justify-content: space-between; }
  .ex-mobile-nav__title,
  .ex-mobile-nav__kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .24em; color: rgba(35, 31, 32, .55); }
  .ex-mobile-nav__close { width: var(--ex-touch); height: var(--ex-touch); margin: 0; padding: 0; border: var(--ex-border-w) solid var(--ex-hairline-strong); background: transparent; color: var(--ex-ink); font-size: 15px; cursor: pointer; }

  .ex-mobile-nav__aud-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
  .ex-mobile-nav__aud { display: flex; align-items: center; min-height: var(--ex-touch); padding: 0 12px; border-bottom: 2px solid rgba(35, 31, 32, .28); color: var(--ex-ink); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
  .ex-mobile-nav__aud.is-active { border-bottom-color: var(--ex-ink); background: var(--ex-ink); color: var(--ex-white); }

  .ex-mobile-nav__list { border-top: 1px solid var(--ex-line-soft); }
  .ex-mobile-nav__item { border-bottom: 1px solid var(--ex-line-soft); }
  .ex-mobile-nav__row { display: flex; align-items: stretch; }
  .ex-mobile-nav__link {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ex-ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .05em;
    text-align: left;
  }
  .ex-mobile-nav__link--toggle { cursor: pointer; padding-right: 20px; } /* chevron centred on the same axis as the 52px split toggle */
  .ex-mobile-nav__toggle { display: flex; flex: none; align-items: center; justify-content: center; width: 52px; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--ex-line-soft); background: none; cursor: pointer; }
  .ex-mobile-nav__chev { display: block; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--ex-red); border-bottom: 2px solid var(--ex-red); transform: rotate(45deg) translateY(-2px); transition: transform .25s; }
  [aria-expanded="true"] > .ex-mobile-nav__chev { transform: rotate(-135deg) translateY(-1px); }
  .ex-mobile-nav__item.current-menu-item > .ex-mobile-nav__row .ex-mobile-nav__link,
  .ex-mobile-nav__item.current-menu-ancestor > .ex-mobile-nav__row .ex-mobile-nav__link { color: var(--ex-red); }

  .ex-mobile-nav__sub { margin: 0; padding: 0 0 12px; list-style: none; }
  .js .ex-mobile-nav__sub { display: none; }
  .js .ex-mobile-nav__sub.is-open,
  .js .ex-mobile-nav__item.is-open > .ex-mobile-nav__sub { display: block; }
  .ex-mobile-nav__sublink { display: flex; align-items: center; min-height: var(--ex-touch); padding: 0 0 0 14px; border-left: 1px solid var(--ex-red); color: var(--ex-ink); font-size: 14px; font-weight: 600; }
  .ex-mobile-nav__subsub { margin: 0; padding: 0; list-style: none; }
  .ex-mobile-nav__subsublink { display: flex; align-items: center; min-height: 40px; padding: 0 0 0 30px; border-left: 1px solid var(--ex-red); color: var(--ex-text-muted); font-size: 13px; font-weight: 500; }

  /* Labels without a destination (URL "#"). A group header (it has its own sub-list) reads as a caption above its links,
     not as one more link of the list: proposal, the mobile menu is not designed. */
  .ex-mobile-nav__link--static,
  .ex-mobile-nav__sublink--static,
  .ex-mobile-nav__subsublink--static,
  .ex-mobile-nav__util--static { cursor: default; }
  .ex-mobile-nav__sublink--group { min-height: 36px; padding-top: 6px; color: var(--ex-text-soft); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; }

  .ex-mobile-nav__utils { display: flex; flex-direction: column; }
  .ex-mobile-nav__util-list { margin: 0; padding: 0; list-style: none; }
  .ex-mobile-nav__util { display: flex; align-items: center; gap: 12px; min-height: var(--ex-touch); color: var(--ex-ink); font-size: 13px; letter-spacing: 1.6px; }
  .ex-mobile-nav__icon { flex: none; width: 18px; height: 18px; }
  .ex-mobile-nav__langs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .ex-mobile-nav__lang { display: flex; align-items: center; gap: 10px; min-height: var(--ex-touch); padding-right: 10px; }
  .ex-mobile-nav__cta { margin-top: auto; }

  /* Without JS the panel is a static block under the header */
  .no-js .ex-mobile-nav { position: static; visibility: visible; pointer-events: auto; }
  .no-js .ex-mobile-nav__backdrop,
  .no-js .ex-mobile-nav__head,
  .no-js .ex-header__burger { display: none; }
  .no-js .ex-mobile-nav__panel { position: static; width: 100%; box-shadow: none; transform: none; border-bottom: 1px solid var(--ex-line-soft); }

  .ex-breadcrumb__trail a { position: relative; }
  .ex-breadcrumb__trail a::after { content: ''; position: absolute; left: -8px; right: -8px; top: 50%; height: var(--ex-touch); transform: translateY(-50%); } /* 44px tap area */

  .ex-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .ex-footer__col--social { grid-column: 1 / -1; }
  .ex-footer__list { gap: 0; }
  .ex-footer__link,
  .ex-footer__phone,
  .ex-footer__credits-link { display: inline-flex; align-items: center; min-width: var(--ex-touch); min-height: var(--ex-touch); }
  .ex-footer__heading { margin-bottom: 8px; }
  .ex-newsletter__consent { align-items: center; min-height: var(--ex-touch); }
  /* The fixed back-to-top button sits over the bottom-right corner at the end of the page: keep the credits clear of it. */
  .ex-footer__bottom-inner { padding-right: calc(var(--ex-gutter) + 60px); }
  .ex-footer__social { width: var(--ex-touch); height: var(--ex-touch); }
  .ex-newsletter__chip-label { padding: 15px 12px; }

  /* Right-edge widgets: the rail is hidden on small screens (its tools are in the menu); the Pro button stays */
  .ex-tool-rail { display: none; }
  /* Proposal (no mockup): the vertical tab covered the right 44px of the content on a phone (end of the hero title,
     card edges). Below 900px it is a 46px square in the bottom-right corner (clear of the text, which starts at the
     left); once the back-to-top button appears it moves up and sits above it. The label stays in the accessibility tree. */
  .ex-sticky-btn { top: auto; right: 14px; bottom: 16px; justify-content: center; width: 46px; height: 46px; padding: 0; box-shadow: var(--ex-shadow-float); transform: none; transition: background var(--ex-t-base), bottom var(--ex-t-base); }
  .ex-back-to-top.is-visible ~ .ex-sticky-btn { bottom: 72px; }
  .ex-sticky-btn__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; transform: none; }
  .ex-back-to-top { right: 14px; bottom: 16px; width: 46px; height: 46px; }
  .ex-back-to-top:hover .ex-back-to-top__corner { width: 46px; height: 46px; }
}

@media (max-width: 599px) {
  .ex-top-bar__cta { padding: 0 12px; font-size: 11px; }
  .ex-header .ex-aud__button { letter-spacing: 1px; }
  .ex-header { top: 0; } /* the WordPress admin bar is not fixed below 600px */
  .ex-header.is-hidden { transform: translateY(-100%); }
  .ex-newsletter__row { flex-direction: column; }
  .ex-newsletter__submit { min-height: 50px; }
  .ex-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* Gate on phones: compact (client request 2026-11-09, replaces the stacked rows of the mockup's breakpoint).
   Text left, arrow box right on the same line; the «ΕΙΣΟΔΟΣ» label is dropped (the arrow is the call to action,
   the row stays one link). Smaller head, logo and paddings so the three rows fit without scrolling. */
@media (max-width: 640px) {
  .ex-gate { padding: 12px; }
  .ex-gate__head { gap: 12px; padding: 20px 18px; }
  .ex-gate__logo { height: 34px; }
  .ex-gate__eyebrow { margin-bottom: 6px; font-size: 11px; letter-spacing: .18em; }
  .ex-gate__eyebrow::before { width: 7px; height: 7px; }
  .ex-gate__title { font-size: 19px; }
  .ex-gate__row { padding: 14px 16px 14px 18px; }
  .ex-gate__row-in { gap: 14px; }
  .ex-gate__row-body { flex: 1 1 auto; }
  .ex-gate__row-title { font-size: 19px; }
  .ex-gate__row-text { margin-top: 4px; font-size: 12px; line-height: 1.4; }
  .ex-gate__row-tick { order: 2; width: 36px; height: 36px; }
  .ex-gate__row-chev { width: 9px; height: 9px; }
  .ex-gate__row-cta { display: none; }
}

/* 15. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ex-header,
  .ex-header__row,
  .ex-aud__chev,
  .ex-lang__chev,
  .ex-nav__chev,
  .ex-nav__link,
  .ex-header__tool,
  .ex-mega__row,
  .ex-search__band,
  .ex-mobile-nav,
  .ex-mobile-nav__backdrop,
  .ex-mobile-nav__panel,
  .ex-mobile-nav__chev,
  .ex-newsletter__chip-label,
  .ex-footer__social,
  .ex-back-to-top__corner,
  .ex-back-to-top__icon,
  .ex-tool-rail,
  .ex-tool-rail__item,
  .ex-tool-rail__handle,
  .ex-tool-rail__chev,
  .ex-gate__row-fill,
  .ex-gate__row-tick,
  .ex-gate__row-title,
  .ex-gate__row-text,
  .ex-gate__row-cta { transition: none !important; }
  .ex-gate__backdrop,
  .ex-gate__panel,
  .ex-login-modal__backdrop,
  .ex-login-modal__panel,
  .ex-lang__panel { animation: none !important; }
  .ex-tool-rail__handle[aria-expanded="true"],
  .no-js .ex-tool-rail__body:hover .ex-tool-rail__handle { transform: none; }
  a.ex-mega__row:hover,
  a.ex-mega__row:focus-visible { padding-left: 2px; }
  .ex-footer__social:hover,
  .ex-back-to-top:hover .ex-back-to-top__icon,
  .ex-newsletter__radio:checked + .ex-newsletter__chip-label { transform: none; }
}