/* ==========================================================================
   EXALCO — base.css
   Foundation layer: fonts, tokens, reset, layout, shared components.
   Values measured from the RENDERED mockups (_design/EXALCO-Idiotis-Homepage v5 Footer v2.dc.html is the
   approved reference; inner pages follow the most common inner-page value). Reference: STYLEGUIDE.md.

   Why some values look odd (13.3333px, weight 400, line-height normal): the mockups style every native
   <button>, <input>, <select> and <textarea> with `font: 700 12px/1 inherit`. That shorthand is invalid CSS,
   browsers drop it, and those elements render at the browser default — 13.3333px / 400 / line-height normal in
   Uniform Pro. The client approved what is on screen, so the controls below reproduce the rendered values,
   not the source values. Text the mockups set with valid declarations (links styled as buttons, headings,
   eyebrows) keeps its declared size and weight. Measurements: qa/captures/foundation/.
   Breakpoints (only these): 1439 / 1199 / 899 / 599 (max-width).
   ========================================================================== */

/* 1. Fonts
   ========================================================================== */
@font-face { font-family: 'Uniform Pro'; src: url('../fonts/UniformPro-Lgt.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Uniform Pro'; src: url('../fonts/UniformPro-Reg.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Uniform Pro'; src: url('../fonts/UniformPro-Med.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Uniform Pro'; src: url('../fonts/UniformPro-Bld.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Uniform Pro'; src: url('../fonts/UniformPro-Blk.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Uniform Pro'; src: url('../fonts/UniformPro-Ult.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

/* 2. Tokens
   ========================================================================== */
:root {
  /* Brand */
  --ex-red: #DF192B;
  --ex-red-tint: #FDF4F5;            /* focused input background, error box */
  --ex-red-line: #F0DADE;            /* border of red-tint boxes */
  --ex-red-soft: #F2A0A6;            /* red kicker on dark photos / dark sections */
  --ex-ink: #231F20;                 /* text, dark buttons, hard shadows */
  --ex-dark: #20232B;                /* dark section background */
  --ex-blue: #D4E1F0;                /* light-blue sections, footer, dropdown panels */
  --ex-blue-line: #B9CEE6;           /* borders on light blue */
  --ex-blue-hover: #C3D6EC;          /* hover row on light blue */
  --ex-white: #fff;

  /* Greys */
  --ex-tint: #F4F5F5;                /* tinted section background */
  --ex-grey: #CED4D3;                /* brand grey */
  --ex-grey-img: #DCE0DF;            /* image placeholder background */
  --ex-line: #E3E7E6;                /* card border */
  --ex-line-input: #D5DAD9;          /* form control border */
  --ex-line-soft: #E9ECEB;           /* list row separators */
  --ex-hairline: rgba(35, 31, 32, .12);   /* 0.5px section separators */
  --ex-hairline-strong: rgba(35, 31, 32, .22);
  --ex-line-ink: rgba(35, 31, 32, .3);    /* chip / icon-button border */
  --ex-text-muted: #5A5E5D;          /* body copy on white */
  --ex-text-soft: #8A9291;           /* card sub-lines */
  --ex-placeholder: #9AA3A2;         /* placeholders, dates */

  /* Context colours — redefined by .ex-section--dark / .ex-on-dark */
  --ex-fg: var(--ex-ink);
  --ex-fg-muted: var(--ex-text-muted);
  --ex-fg-soft: var(--ex-text-soft);
  --ex-kicker: var(--ex-red);
  --ex-shadow-hard: var(--ex-ink);   /* colour of the offset button shadow */
  --ex-outline-border: var(--ex-ink);
  --ex-chip-border: var(--ex-line-ink);
  --ex-chip-bg: var(--ex-white);
  --ex-chip-active-bg: var(--ex-red);
  --ex-chip-active-fg: var(--ex-white);
  --ex-focus: var(--ex-red);

  /* Typography */
  --ex-font: 'Uniform Pro', Helvetica, Arial, sans-serif;
  --ex-fs-hero: clamp(42px, 4.4vw, 76px);      /* h1 homepage hero, lh .96 */
  --ex-fs-banner: clamp(32px, 3.4vw, 58px);    /* h1 inner banner, lh .98 (13 of 15 inner mockups) */
  --ex-fs-banner-lg: clamp(36px, 3.8vw, 64px); /* h1 of the Products and Erga landing banners only */
  --ex-fs-h2-lg: clamp(30px, 3.2vw, 52px);     /* h2 Idiotis homepage, lh 1 */
  --ex-fs-h2-md: clamp(28px, 2.8vw, 44px);     /* h2 everywhere else, lh 1.05 */
  --ex-fs-h3: clamp(22px, 2vw, 32px);          /* sub-section title, lh 1.1 */
  --ex-fs-h4: clamp(20px, 1.9vw, 28px);        /* small title (success, panels) */
  --ex-fs-h2: var(--ex-fs-h2-md);              /* contextual: switched by .ex-scale-lg */
  --ex-lh-h2: 1.05;
  --ex-fs-lead: clamp(15px, 1.1vw, 17.5px);    /* hero / banner intro, lh 1.55 */
  --ex-fs-body: 15px;                          /* section copy, lh 1.6 */
  --ex-fs-body-sm: 13.5px;                     /* small copy, lh 1.65 */
  --ex-fs-rich: 14.5px;                        /* article body, lh 1.75 */
  --ex-fs-eyebrow: 13.5px;                     /* 700, .24em */
  --ex-fs-control: 13.3333px;                  /* rendered size of every native control in the mockups (see top) */
  --ex-fs-btn: 13.5px;                         /* link-buttons (<a>): 700, .08em */
  --ex-fs-link: 11.5px;                        /* arrow link: 700, .12em (13px / .1em on the Idiotis homepage) */
  --ex-link-pad: 4px;                          /* arrow link: text → red underline */
  --ex-fs-chip: var(--ex-fs-control);          /* 400, .06em */
  --ex-fs-kicker: 10.5px;                      /* 700, .18em */
  --ex-fs-meta: 12px;
  --ex-fs-card-title: 16.5px;                  /* 700, .01em */
  --ex-fs-card-sub: 12.5px;
  --ex-fs-input: var(--ex-fs-control);
  --ex-ls-title: -.015em;
  --ex-fw-title: 500;                /* display titles: Uniform Pro Medium (client feedback 2026-10-20; mockups 900) */
  --ex-ls-eyebrow: .24em;
  --ex-ls-btn: .08em;
  --ex-ls-link: .12em;

  /* Spacing */
  --ex-space-1: 4px;
  --ex-space-2: 8px;
  --ex-space-3: 12px;
  --ex-space-4: 14px;                /* card grid gap, button row gap */
  --ex-space-5: 18px;
  --ex-space-6: 24px;
  --ex-space-7: 38px;
  --ex-space-8: clamp(28px, 4vw, 64px);       /* two-column gap */
  --ex-gutter: clamp(16px, 3.4vw, 64px);      /* page side padding */
  --ex-container-max: none;                   /* design is full-bleed + gutter */
  --ex-measure: 520px;                        /* paragraph max width */
  --ex-measure-wide: 860px;                   /* banner text / narrow container */
  --ex-section-y-sm: clamp(28px, 3.4vw, 52px);
  --ex-section-y-md: clamp(40px, 4.6vw, 72px);
  --ex-section-y-lg: clamp(48px, 5.4vw, 88px);
  --ex-section-y-xl: clamp(56px, 6vw, 96px);
  --ex-section-y: var(--ex-section-y-md);     /* contextual: switched by .ex-scale-lg */
  --ex-head-gap: 30px;                        /* section head → content */
  --ex-head-eyebrow-gap: 8px;                 /* eyebrow → title inside a section head */
  --ex-eyebrow-gap: 18px;                     /* eyebrow → title elsewhere */
  --ex-banner-h: 521px;                       /* inner banner height (Products) */
  --ex-scroll-offset: 160px;                  /* anchor offset under the sticky header */

  /* Shape */
  --ex-radius: 0;                    /* the design has no rounded corners */
  --ex-border-w: 1.5px;
  --ex-touch: 44px;

  /* Shadows */
  /* Offset of the hard hover shadow. The mockups mix 5px (Idiotis teasers, Products, Erga, Career) and 6px (every hero
     button of the three homepages, every outline button, Anakainizo, Quiz): one value, 6px, the more frequent one.
     The shadow itself is composed in the :hover rules, not here: a custom property declared on :root is resolved on
     :root, so a --ex-shadow-btn built here kept the ink colour inside .ex-on-dark / .ex-section--dark (invisible). */
  --ex-shadow-btn-offset: 6px;
  --ex-shadow-card: 0 22px 44px -24px rgba(35, 31, 32, .4);
  --ex-shadow-float: 0 10px 26px -10px rgba(35, 31, 32, .4);
  --ex-shadow-header: 0 12px 34px rgba(35, 31, 32, .1);
  --ex-shadow-dropdown: 0 24px 48px -16px rgba(35, 31, 32, .28);
  --ex-shadow-mega: 0 30px 50px -18px rgba(35, 31, 32, .28);
  --ex-shadow-drawer: -24px 0 60px rgba(0, 0, 0, .35);
  --ex-focus-ring: 0 0 0 3px rgba(223, 25, 43, .12);

  /* Motion */
  --ex-t-fast: .15s;                 /* colour changes */
  --ex-t-btn: .18s;                  /* button / arrow movement */
  --ex-t-base: .2s;                  /* borders, backgrounds, card lift */
  --ex-t-slow: .3s;
  --ex-t-panel: .4s;                 /* header slide, drawers */
  --ex-t-dot: .3s;                   /* button dot expand */
  --ex-t-bounce: .35s;               /* card hover (bouncy) */
  --ex-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  /* Arrow inside the expanded button dot (red on a white dot / white on a red dot). */
  --ex-arrow-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DF192B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  --ex-arrow-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  --ex-ease: ease;
  --ex-ease-out: cubic-bezier(.2, .7, .2, 1);
  --ex-ease-in-out: cubic-bezier(.77, 0, .18, 1);
  --ex-reveal-y: 46px;
  --ex-reveal-t: .7s;

  /* Layers (mockup values) */
  --ex-z-raised: 2;                  /* overlays inside a card / slide */
  --ex-z-controls: 6;                /* slider arrows / dots */
  --ex-z-popover: 40;                /* in-page dropdown panels */
  --ex-z-tool-rail: 55;
  --ex-z-back-to-top: 56;
  --ex-z-header: 60;
  --ex-z-mega: 70;
  --ex-z-header-popover: 80;         /* language / audience dropdown in the header */
  --ex-z-modal: 90;
}

/* Idiotis homepage scale (approved reference): larger h2, taller sections. */
.ex-scale-lg {
  --ex-fs-link: 13px;
  --ex-ls-link: .1em;
  --ex-link-pad: 5px;
  --ex-fs-h2: var(--ex-fs-h2-lg);
  --ex-lh-h2: 1;
  --ex-section-y: var(--ex-section-y-lg);
  --ex-head-gap: 38px;
  --ex-head-eyebrow-gap: 18px;
}

/* 3. Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.is-scroll-locked { overflow: hidden; } /* set by core.js lockScroll() while a modal, lightbox or the mobile menu is open */

html, body { margin: 0; }

body {
  background: var(--ex-white);
  color: var(--ex-ink);
  font-family: var(--ex-font);
  font-size: 16px;
  /* line-height stays `normal`, as in the mockups: set it where the mockup sets it. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; transition: color var(--ex-t-fast); }
a:hover { color: var(--ex-red); }

::selection { background: var(--ex-red); color: var(--ex-white); }

img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; vertical-align: middle; }

button, input, select, textarea { font-family: inherit; }
button { color: inherit; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }

/* :where() keeps this at zero specificity: `ul[class]` used to out-rank every single-class rule, so the padding or
   margin a component set on its own <ul> (tool-rail tray, mobile sub-menu, footer socials …) was silently dropped. */
:where(ul[class], ol[class]) { list-style: none; margin: 0; padding: 0; }

[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--ex-focus); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

[id] { scroll-margin-top: var(--ex-scroll-offset); }

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  white-space: nowrap;
}
/* WordPress's skip-link behaviour, limited to links: a focusable form control carrying the class (search submit, a
   hidden radio) would otherwise pop up as a white box at the top-left corner when it receives focus. */
a.screen-reader-text:focus {
  background: var(--ex-white);
  clip: auto !important;
  clip-path: none;
  color: var(--ex-ink);
  font-size: 14px;
  font-weight: 700;
  height: auto;
  left: 8px;
  padding: 15px 23px 14px;
  top: 8px;
  white-space: normal;
  width: auto;
  z-index: 100000;
}

/* 4. Layout
   ========================================================================== */
.ex-main { display: block; min-height: 40vh; }

.ex-container {
  width: 100%;
  max-width: var(--ex-container-max);
  margin-inline: auto;
  padding-inline: var(--ex-gutter);
}
/* Left-aligned reading column (banner text, plain pages). */
.ex-container--narrow { max-width: calc(var(--ex-measure-wide) + 2 * var(--ex-gutter)); margin-inline: 0; }
/* Full-bleed: no gutter (image/text splits that touch the viewport edges). */
.ex-container--bleed { padding-inline: 0; }

.ex-section { position: relative; padding-block: var(--ex-section-y); background: var(--ex-white); color: var(--ex-fg); }
.ex-section--sm { --ex-section-y: var(--ex-section-y-sm); }
.ex-section--md { --ex-section-y: var(--ex-section-y-md); }
.ex-section--lg { --ex-section-y: var(--ex-section-y-lg); }
.ex-section--xl { --ex-section-y: var(--ex-section-y-xl); }
.ex-section--flush { padding-block: 0; }
.ex-section--flush-top { padding-top: 0; }
.ex-section--flush-bottom { padding-bottom: 0; }

.ex-section--tint {
  background: var(--ex-tint);
  border-top: .5px solid var(--ex-hairline);
  border-bottom: .5px solid var(--ex-hairline);
}
.ex-section--blue { background: var(--ex-blue); }
.ex-section--dark { background: var(--ex-dark); }
.ex-section--accent-top { border-top: 2px solid var(--ex-red); }
.ex-scale-lg .ex-section--dark { --ex-section-y: var(--ex-section-y-xl); }

/* Dark context: every base component reads these variables. */
.ex-section--dark,
.ex-on-dark {
  --ex-fg: var(--ex-white);
  --ex-fg-muted: rgba(255, 255, 255, .72);
  --ex-fg-soft: rgba(255, 255, 255, .72);
  --ex-kicker: var(--ex-red-soft);
  --ex-shadow-hard: rgba(255, 255, 255, .9);
  --ex-outline-border: rgba(255, 255, 255, .85);
  --ex-chip-border: rgba(255, 255, 255, .28);
  --ex-chip-bg: transparent;
  --ex-chip-active-bg: var(--ex-white);
  --ex-chip-active-fg: var(--ex-ink);
  --ex-focus: var(--ex-white);
  color: var(--ex-fg);
}
/* Light island inside a dark section (e.g. a white card). */
.ex-on-light {
  --ex-fg: var(--ex-ink);
  --ex-fg-muted: var(--ex-text-muted);
  --ex-fg-soft: var(--ex-text-soft);
  --ex-kicker: var(--ex-red);
  --ex-shadow-hard: var(--ex-ink);
  --ex-outline-border: var(--ex-ink);
  --ex-chip-border: var(--ex-line-ink);
  --ex-chip-bg: var(--ex-white);
  --ex-chip-active-bg: var(--ex-red);
  --ex-chip-active-fg: var(--ex-white);
  --ex-focus: var(--ex-red);
  color: var(--ex-fg);
}

/* Generic card grid */
.ex-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ex-space-4); }
.ex-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ex-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ex-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ex-grid > [hidden] { display: none !important; }

/* Media box: image always covers its box (the mockup's image-slot pattern). */
.ex-media { position: relative; display: block; overflow: hidden; background: var(--ex-grey-img); }
.ex-media > img,
.ex-media > picture > img,
.ex-media > video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ex-media--16x9 { aspect-ratio: 16 / 9; }
.ex-media--4x3 { aspect-ratio: 4 / 3; }
.ex-media--3x2 { aspect-ratio: 3 / 2; }
.ex-media--1x1 { aspect-ratio: 1 / 1; }
.ex-media--card { height: clamp(210px, 20vw, 270px); }     /* product / category card image */
.ex-media--tile { height: clamp(240px, 24vw, 340px); }     /* project tile */

/* 5. Typography components
   ========================================================================== */
.ex-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--ex-eyebrow-gap);
  font-size: var(--ex-fs-eyebrow);
  font-weight: 700;
  line-height: normal; /* as rendered: no line-height in the mockups */
  letter-spacing: var(--ex-ls-eyebrow);
  color: var(--ex-fg);
}
.ex-eyebrow > svg { flex: none; width: 20px; height: 20px; }
.ex-eyebrow--tight { margin-bottom: 8px; }
.ex-eyebrow--flush { margin-bottom: 0; }

.ex-title {
  margin: 0;
  font-size: var(--ex-fs-h2);
  font-weight: var(--ex-fw-title);
  line-height: var(--ex-lh-h2);
  letter-spacing: var(--ex-ls-title);
  color: var(--ex-fg);
}
.ex-title--hero { font-size: var(--ex-fs-hero); line-height: .96; }
.ex-title--banner { font-size: var(--ex-fs-banner); line-height: .98; }
.ex-title--banner-lg { font-size: var(--ex-fs-banner-lg); line-height: .98; }
.ex-title--lg { font-size: var(--ex-fs-h2-lg); line-height: 1; }
.ex-title--md { font-size: var(--ex-fs-h2-md); line-height: 1.05; }
.ex-title--sm { font-size: var(--ex-fs-h3); line-height: 1.1; }
.ex-title--xs { font-size: var(--ex-fs-h4); line-height: 1.15; letter-spacing: -.01em; }
.ex-nowrap { white-space: nowrap; }

.ex-lead {
  margin: 0;
  max-width: 430px;
  font-size: var(--ex-fs-lead);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ex-fg-muted);
}
.ex-lead--wide { max-width: none; line-height: 1.65; color: var(--ex-fg); }

.ex-text {
  margin: 0;
  max-width: var(--ex-measure);
  font-size: var(--ex-fs-body);
  line-height: 1.6;
  color: var(--ex-fg-muted);
}
.ex-text--sm { font-size: var(--ex-fs-body-sm); line-height: 1.65; }
.ex-text--wide { max-width: none; }
.ex-text--strong { color: var(--ex-fg); }
.ex-text + .ex-text { margin-top: 14px; }

/* Small category label above a card title */
.ex-kicker {
  font-size: var(--ex-fs-kicker);
  font-weight: 700;
  line-height: normal; /* rendered (12px line at 10.5px); was 1.2 */
  letter-spacing: .18em;
  color: var(--ex-kicker);
}
.ex-meta { font-size: var(--ex-fs-meta); color: var(--ex-placeholder); }

/* Boxed label (article tag, product badge) */
.ex-tag {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 4px 8px;
  border: var(--ex-border-w) solid var(--ex-red);
  font-size: 9.5px;
  font-weight: 800;
  line-height: normal; /* rendered (11px line at 9.5px); was 1.2 */
  letter-spacing: .14em;
  color: var(--ex-red);
}
.ex-tag--solid { padding: 7px 12px; border: 0; background: var(--ex-red); color: var(--ex-white); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }
.ex-tag--ink { padding: 5.5px 12px; border-color: var(--ex-ink); color: var(--ex-ink); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }

/* 5b. Inline rich text — bold, italic and links typed into body copy
   --------------------------------------------------------------------------
   The short body-copy fields are minimal editors (bold, italic, link). exalco_rich() (inc/template-tags.php) prints
   their content INSIDE the text element each section already has, so size, line-height and colour are inherited and
   nothing here changes the box of a line: no padding, no border, underlines are text-decoration.
   - <strong> / <b>: the browser's `bolder`, relative to the copy around it (400 / 500 → 700, 700+ → 900). Uniform Pro
     ships 300, 400, 500, 700, 800, 900. Copy set in 300 would only reach 400, so sections with light copy raise it.
   - <em> / <i>: Uniform Pro has no italic cut; the browser slants the upright face.
   - <a class="ex-rt-link"> (the class is added by exalco_rich): text colour of the copy, underlined in brand red on
     light backgrounds and in the text colour on dark / red / photo backgrounds (.ex-on-dark, .ex-section--dark, or a
     section that sets --ex-rt-underline). Hover / focus: red on light, white with a thicker underline on dark.
   Block-editor content (.ex-rich-text) keeps its own rules in section 12. */
.ex-rt-link {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ex-rt-underline, var(--ex-red));
  text-decoration-thickness: 1.5px;
  text-underline-offset: .2em;
  text-decoration-skip-ink: auto;
  overflow-wrap: anywhere; /* a pasted URL as link text must not push a narrow column wider */
  transition: color var(--ex-t-fast), text-decoration-color var(--ex-t-fast);
}
.ex-rt-link:hover,
.ex-rt-link:focus-visible { color: var(--ex-rt-hover, var(--ex-red)); text-decoration-color: currentColor; }
.ex-section--dark,
.ex-on-dark { --ex-rt-underline: currentColor; --ex-rt-hover: var(--ex-white); }
.ex-section--dark .ex-rt-link:hover,
.ex-section--dark .ex-rt-link:focus-visible,
.ex-on-dark .ex-rt-link:hover,
.ex-on-dark .ex-rt-link:focus-visible { text-decoration-thickness: 2.5px; }
/* A light panel inside a dark block goes back to the light-background link. */
.ex-section--dark .ex-on-light,
.ex-on-dark .ex-on-light { --ex-rt-underline: var(--ex-red); --ex-rt-hover: var(--ex-red); }

/* 6. Buttons and links
   ========================================================================== */
.ex-btn {
  /* Hover (beta audit v3, replaces the "Dot Expand" of client feedback 2026-10-20): no dot. The arrow of the label
     (.ex-btn__arrow) grows a circle behind it and turns to the circle's colour; a button without an arrow gets the same
     arrow-in-a-circle sliding in at the right edge, its right padding shrinking so that the button keeps its width
     (no layout shift). It replaces the offset hard shadow of the mockups. --ex-btn-px is the horizontal padding of the mockup. */
  --ex-btn-px: 28px;
  --ex-btn-gap: .32em;
  --ex-btn-dot-open: 22px;
  --ex-btn-dot-bg: var(--ex-white);
  --ex-btn-dot-fg: var(--ex-red);
  --ex-btn-dot-arrow: var(--ex-arrow-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ex-btn-gap); /* one word space: in the mockups the arrow is part of the label text (12px made every arrow button 7.7px wider) */
  margin: 0;
  padding: 17px calc(var(--ex-btn-px) - var(--ex-btn-gap)) 17px var(--ex-btn-px);
  border: 0;
  border-radius: var(--ex-radius);
  background: var(--ex-red);
  color: var(--ex-white);
  font-family: inherit;
  /* Rendered values of the primary CTA (see below): 13.33px / 400. */
  font-size: var(--ex-fs-control);
  font-weight: 400;
  line-height: normal; /* 16px line: 50px high with the 17px padding, as rendered */
  letter-spacing: var(--ex-ls-btn);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: padding var(--ex-t-dot) var(--ex-ease-out), background var(--ex-t-btn), color var(--ex-t-btn), border-color var(--ex-t-btn);
}
/* Button without an arrow: the circle is a zero-width flex item at rest (the gap before it comes off the right padding). */
.ex-btn::after {
  content: '';
  flex: none;
  width: 0;
  height: var(--ex-btn-dot-open);
  margin: -10px 0; /* the circle (22px) is taller than the text line: keep it out of the button height */
  border-radius: 50%;
  background: var(--ex-btn-dot-bg) var(--ex-btn-dot-arrow) center / 62% no-repeat;
  transform: scale(0);
  transition: width var(--ex-t-dot) var(--ex-ease-out), transform var(--ex-t-dot) var(--ex-ease-out);
}
.ex-btn:hover,
.ex-btn:focus-visible { color: var(--ex-white); padding-right: calc(var(--ex-btn-px) - var(--ex-btn-gap) - var(--ex-btn-dot-open)); }
.ex-btn:hover::after,
.ex-btn:focus-visible::after { width: var(--ex-btn-dot-open); transform: none; }
.ex-btn:active::after { transform: rotate(-45deg); }
/* Button with an arrow: the arrow itself is animated; the 22px box is pulled back by 4px a side so that at rest the
   arrow sits one word space after the label, as in the mockups. */
.ex-btn:has(.ex-btn__arrow) { padding-right: var(--ex-btn-px); }
.ex-btn:has(.ex-btn__arrow)::after { display: none; }
.ex-btn__arrow {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--ex-btn-dot-open);
  height: var(--ex-btn-dot-open);
  margin: -10px -4px;
  line-height: 1;
  transition: color var(--ex-t-dot), transform var(--ex-t-dot) var(--ex-ease-out);
}
.ex-btn__arrow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--ex-btn-dot-bg);
  transform: scale(0);
  transition: transform var(--ex-t-dot) var(--ex-ease-out);
}
.ex-btn:hover .ex-btn__arrow,
.ex-btn:focus-visible .ex-btn__arrow { color: var(--ex-btn-dot-fg); transform: translateX(4px); }
.ex-btn:hover .ex-btn__arrow::before,
.ex-btn:focus-visible .ex-btn__arrow::before { transform: none; }
.ex-btn:has(.ex-btn__arrow):hover,
.ex-btn:has(.ex-btn__arrow):focus-visible { padding-right: var(--ex-btn-px); }
/* Rendered weight. In the mockups a CTA built as a native <button> renders at 13.33px / 400 (its `font` shorthand is
   invalid, see top of file) and a CTA built as an <a> at 13.5px / 700 (valid declarations). Measured over 19 mockups:
   - red primary CTA: 400 in the Idiotis hero slider and CTA banner and on every inner page (form submits, wizard "next",
     Career, Showroom …); 700 only in the Idiotis quiz / tools teasers, the Pro and Industrial heroes and Anakainizo;
   - outline button: 700 everywhere (hero second action, Pro "MEMBER'S AREA" …) except the Articles "load more" (400).
   So the base follows the variant: primary (and dark) regular, outline / light bold — the hero pair of the approved
   Idiotis homepage. Use the modifiers for the listed exceptions: .ex-btn--bold on a primary, .ex-btn--regular on an outline. */
.ex-btn--outline,
.ex-btn--light,
.ex-btn.ex-btn--bold { font-size: var(--ex-fs-btn); font-weight: 700; }
.ex-btn.ex-btn--regular { font-size: var(--ex-fs-control); font-weight: 400; }

.ex-btn--primary { background: var(--ex-red); color: var(--ex-white); }

.ex-btn--outline {
  --ex-btn-px: 26px;
  --ex-btn-dot-bg: var(--ex-red);
  --ex-btn-dot-fg: var(--ex-white);
  --ex-btn-dot-arrow: var(--ex-arrow-white);
  padding-block: 15px;
  border: 2px solid var(--ex-outline-border);
  background: transparent;
  color: var(--ex-fg);
}
.ex-btn--outline:hover,
.ex-btn--outline:focus-visible { border-color: var(--ex-red); color: var(--ex-red); }
.ex-section--dark .ex-btn--outline:hover,
.ex-section--dark .ex-btn--outline:focus-visible,
.ex-on-dark .ex-btn--outline:hover,
.ex-on-dark .ex-btn--outline:focus-visible { --ex-btn-dot-bg: var(--ex-white); --ex-btn-dot-fg: var(--ex-red); --ex-btn-dot-arrow: var(--ex-arrow-red); border-color: var(--ex-red); background: var(--ex-red); color: var(--ex-white); }
.ex-on-light .ex-btn--outline:hover,
.ex-on-light .ex-btn--outline:focus-visible { --ex-btn-dot-bg: var(--ex-red); --ex-btn-dot-fg: var(--ex-white); --ex-btn-dot-arrow: var(--ex-arrow-white); border-color: var(--ex-red); background: transparent; color: var(--ex-red); }

/* Outline for use over a photo (white border, white text) regardless of context. */
.ex-btn--light { --ex-btn-px: 26px; --ex-btn-dot-bg: var(--ex-red); --ex-btn-dot-fg: var(--ex-white); --ex-btn-dot-arrow: var(--ex-arrow-white); padding-block: 15px; border: 2px solid var(--ex-white); background: transparent; color: var(--ex-white); }
/* Rendered hover (EXALCO-Anakainizo banner "ΖΗΤΗΣΤΕ ΠΡΟΣΦΟΡΑ"): border and text turn red; no fill. */
.ex-btn.ex-btn--light:hover,
.ex-btn.ex-btn--light:focus-visible { border-color: var(--ex-red); background: transparent; color: var(--ex-red); }

.ex-btn--dark { background: var(--ex-ink); color: var(--ex-white); }
.ex-btn--dark:hover,
.ex-btn--dark:focus-visible { background: var(--ex-red); }

/* Compact button (44px high): card / list actions and wizard navigation — mockups: Career "ΑΙΤΗΣΗ ΓΙΑ ΤΗ ΘΕΣΗ"
   14px 24px, Anakainizo 15px 24px, Quote "ΣΥΝΕΧΕΙΑ" 14px 26px. Same font as the default size. */
.ex-btn--sm { --ex-btn-px: 24px; padding-block: 14px; }
.ex-btn--sm.ex-btn--outline,
.ex-btn--sm.ex-btn--light { --ex-btn-px: 22px; padding-block: 12px; }
.ex-btn--block { display: flex; width: 100%; }

.ex-btn:disabled,
.ex-btn[aria-disabled="true"],
.ex-btn.is-loading { background: rgba(35, 31, 32, .25); color: var(--ex-white); cursor: not-allowed; padding-right: calc(var(--ex-btn-px) - var(--ex-btn-gap)); }
.ex-btn:disabled::after,
.ex-btn[aria-disabled="true"]::after,
.ex-btn.is-loading::after { width: 0; transform: scale(0); }
.ex-btn:disabled .ex-btn__arrow,
.ex-btn[aria-disabled="true"] .ex-btn__arrow,
.ex-btn.is-loading .ex-btn__arrow { color: inherit; transform: none; }
.ex-btn:disabled .ex-btn__arrow::before,
.ex-btn[aria-disabled="true"] .ex-btn__arrow::before,
.ex-btn.is-loading .ex-btn__arrow::before { transform: scale(0); }
.ex-btn:disabled:has(.ex-btn__arrow),
.ex-btn[aria-disabled="true"]:has(.ex-btn__arrow),
.ex-btn.is-loading:has(.ex-btn__arrow) { padding-right: var(--ex-btn-px); }
.ex-btn.is-loading { cursor: progress; }

.ex-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ex-space-4); }

/* Text link with red underline and arrow */
.ex-link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  flex: none;
  padding: 0 0 var(--ex-link-pad);
  border: 0;
  border-bottom: 2px solid var(--ex-red);
  background: none;
  color: var(--ex-fg);
  font-family: inherit;
  font-size: var(--ex-fs-link);
  font-weight: 700;
  line-height: normal;
  letter-spacing: var(--ex-ls-link);
  cursor: pointer;
  transition: color var(--ex-t-fast);
}
.ex-link-arrow:hover,
.ex-link-arrow:focus-visible { color: var(--ex-red); }
.ex-link-arrow__arrow { display: inline-block; transition: transform var(--ex-t-btn); }
.ex-link-arrow:hover .ex-link-arrow__arrow,
.ex-link-arrow:focus-visible .ex-link-arrow__arrow { transform: translateX(5px); }
.ex-link-arrow--sm { padding-bottom: 3px; font-size: 10.5px; letter-spacing: .1em; }   /* card "ΔΙΑΒΑΣΤΕ ΤΟ ΑΡΘΡΟ →" */
.ex-link-arrow--md { padding-bottom: 4px; font-size: 12px; letter-spacing: .1em; }     /* featured article */
.ex-link-arrow--lg { padding-bottom: 5px; font-size: 13px; letter-spacing: .1em; }     /* Idiotis homepage size, anywhere */
/* Red, no underline — the "ΔΕΙΤΕ ΠΕΡΙΣΣΟΤΕΡΑ →" line inside cards */
.ex-link-arrow--plain { padding-bottom: 0; border-bottom: 0; color: var(--ex-red); font-size: 11px; letter-spacing: .1em; }

/* Chips / filter pills */
.ex-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 11px 18px;
  border: var(--ex-border-w) solid var(--ex-chip-border);
  border-radius: var(--ex-radius);
  background: var(--ex-chip-bg);
  color: var(--ex-fg);
  font-family: inherit;
  /* Rendered values: every chip in the mockups is a <button> with an invalid `font` shorthand (see top). */
  font-size: var(--ex-fs-chip);
  font-weight: 400;
  line-height: normal; /* 16px line: 40px high */
  letter-spacing: .06em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--ex-t-fast), color var(--ex-t-fast), border-color var(--ex-t-fast), transform var(--ex-t-fast);
}
.ex-chip:hover,
.ex-chip:focus-visible { border-color: var(--ex-red); color: var(--ex-red); transform: translateY(-2px); }
.ex-chip.is-active,
.ex-chip[aria-pressed="true"],
.ex-chip[aria-selected="true"],
.ex-chip[aria-current="true"] { border-color: var(--ex-chip-active-bg); background: var(--ex-chip-active-bg); color: var(--ex-chip-active-fg); }
.ex-section--dark .ex-chip:not(.is-active):not([aria-pressed="true"]):not(:hover):not(:focus-visible),
.ex-on-dark .ex-chip:not(.is-active):not([aria-pressed="true"]):not(:hover):not(:focus-visible) { color: rgba(255, 255, 255, .8); }
.ex-section--dark .ex-chip.is-active,
.ex-on-dark .ex-chip.is-active { transform: translateY(-2px); }
.ex-section--dark .ex-chip:hover,
.ex-on-dark .ex-chip:hover { border-color: var(--ex-white); color: var(--ex-white); }
.ex-section--dark .ex-chip.is-active:hover,
.ex-on-dark .ex-chip.is-active:hover { color: var(--ex-ink); }
/* Idiotis homepage: slightly narrower chips (11px 16px). */
.ex-scale-lg .ex-chip { padding-inline: 16px; }
/* Small bold chip — the only chips with a valid font in the mockups (Pro homepage project filter): 12px / 700 / .1em, 36px high. */
.ex-chip--bold { font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .1em; }

/* 7. Section head (eyebrow + title left, link / filters right)
   ========================================================================== */
.ex-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: var(--ex-head-gap);
}
.ex-section-head__main { min-width: 0; }
.ex-section-head .ex-eyebrow { margin-bottom: var(--ex-head-eyebrow-gap); }
.ex-section-head__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; flex: none; max-width: 100%; }
.ex-section-head__aside .ex-chips { justify-content: flex-end; }
.ex-section-head--lg { --ex-fs-h2: var(--ex-fs-h2-lg); --ex-lh-h2: 1; --ex-head-gap: 38px; --ex-head-eyebrow-gap: 18px; }
.ex-section-head--sm { --ex-fs-h2: var(--ex-fs-h3); --ex-lh-h2: 1.1; --ex-head-gap: 18px; }
.ex-section-head--tight { --ex-head-gap: 18px; }
.ex-section-head--flush { margin-bottom: 0; }

/* Plain page head: used by 404 / search / fallback templates (no banner image). */
.ex-page-head { padding-block: var(--ex-section-y-md) var(--ex-section-y-sm); border-bottom: .5px solid var(--ex-hairline-strong); }
.ex-page-head .ex-eyebrow { margin-bottom: 16px; }
.ex-page-head .ex-title { text-transform: uppercase; } /* every title of the design is in capitals */
.ex-page-head__text { margin-top: 20px; }

/* 8. Cards
   ========================================================================== */
.ex-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: var(--ex-border-w) solid var(--ex-line);
  background: var(--ex-white);
  color: var(--ex-ink);
  transition: border-color var(--ex-t-base), box-shadow var(--ex-t-base);
}
/* Hover (client feedback 2026-10-20, replaces the mockups' ink border + lift): the white text panel rises diagonally
   into the photo (bouncy, like hover.dev "Bouncy Card Features") and a red rule draws along the bottom edge. The
   photo is clipped rather than the panel transformed, so the whole-card link overlay keeps covering the card. */
.ex-card::after {
  content: '';
  position: absolute;
  left: calc(var(--ex-border-w) * -1);
  right: calc(var(--ex-border-w) * -1);
  bottom: calc(var(--ex-border-w) * -1);
  z-index: 2;
  height: 3px;
  background: var(--ex-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ex-t-slow) var(--ex-ease-out);
  pointer-events: none;
}
.ex-card:hover::after,
.ex-card:focus-within::after { transform: scaleX(1); }
.ex-card__media { flex: none; width: 100%; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path var(--ex-t-bounce) var(--ex-ease-bounce); }
.ex-card:hover .ex-card__media,
.ex-card:focus-within .ex-card__media { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ex-card-rise, 18px)), 0 100%); }
.ex-card__body { display: flex; flex: 1; flex-direction: column; padding: 20px 24px; }
.ex-card__body--row { flex-direction: row; align-items: center; gap: 16px; }
/* line-height normal on both lines, as rendered (title 20px, sub-line 15px). */
.ex-card__title { margin: 0; font-size: var(--ex-fs-card-title); font-weight: 700; line-height: normal; letter-spacing: .01em; color: var(--ex-ink); }
.ex-card__sub { margin: 4px 0 0; font-size: var(--ex-fs-card-sub); line-height: normal; color: var(--ex-text-soft); }
.ex-card__arrow { display: inline-block; flex: none; margin-left: auto; font-size: 18px; font-weight: 700; color: var(--ex-red); transition: transform var(--ex-t-btn); }
.ex-card:hover .ex-card__arrow,
.ex-card:focus-within .ex-card__arrow { transform: translateX(5px); }
/* Whole card clickable: put this class on the title's <a>. */
.ex-card__link { color: inherit; }
.ex-card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.ex-card__link:hover { color: inherit; }
.ex-card__link:focus-visible { outline: none; }
.ex-card:has(.ex-card__link:focus-visible) { outline: 2px solid var(--ex-focus); outline-offset: 3px; }
/* Soft-shadow variant (article list on tinted background) */
.ex-card--soft { border: .5px solid rgba(35, 31, 32, .16); }
.ex-card--soft:hover,
.ex-card--soft:focus-within { border-color: rgba(35, 31, 32, .16); box-shadow: var(--ex-shadow-card); }
.ex-card--static:hover,
.ex-card--static:focus-within { border-color: var(--ex-line); }
.ex-card--soft::after,
.ex-card--static::after { content: none; }
.ex-card--soft .ex-card__media,
.ex-card--static .ex-card__media { clip-path: none; }

/* Photo tile with text over a gradient (projects) */
.ex-tile { position: relative; display: block; overflow: hidden; background: var(--ex-dark); color: var(--ex-white); }
.ex-tile:hover { color: var(--ex-white); }
.ex-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--ex-z-raised);
  background: linear-gradient(to top, rgba(35, 31, 32, .88) 0%, rgba(35, 31, 32, .05) 55%);
  pointer-events: none;
}
.ex-tile > img,
.ex-tile__media > img { transition: transform .6s var(--ex-ease-out); }
.ex-tile__body { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 3; }
.ex-tile__kicker { font-size: var(--ex-fs-kicker); font-weight: 700; line-height: normal; letter-spacing: .2em; color: var(--ex-red-soft); }
.ex-tile__title { margin: 6px 0 0; font-size: 19px; font-weight: var(--ex-fw-title); line-height: 1.2; letter-spacing: .01em; color: var(--ex-white); }
.ex-tile__sub { margin: 2px 0 0; font-size: 13px; color: rgba(255, 255, 255, .72); }

/* 9. Forms
   ========================================================================== */
.ex-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ex-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ex-field--full { grid-column: 1 / -1; }
.ex-field__label { font-size: 10.5px; font-weight: 700; line-height: normal; letter-spacing: .2em; color: var(--ex-fg); } /* rendered: 12px line (was 1.2 = 12.6px, +0.6px per field row) */
.ex-field__hint { font-size: 12px; line-height: 1.5; color: var(--ex-fg-muted); }

/* File field (career CV, quote attachments): the designed dashed drop-box of the Career mockup, built around a real
   (visible) file input so it works without JS.
   JS adds .is-filled on [data-ex-file] when a file is chosen. */
.ex-field--file {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: var(--ex-border-w) dashed #B8BFBE;
  background: var(--ex-tint);
  transition: border-color var(--ex-t-base), background var(--ex-t-base);
}
.ex-field--file:hover,
.ex-field--file:focus-within,
.ex-field--file.is-filled { border-color: var(--ex-red); }
.ex-field--file.is-filled { background: var(--ex-red-tint); }
.ex-field__file-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 2px solid var(--ex-red);
  color: var(--ex-red);
}
.ex-field__file-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ex-field__file-label { font-size: 13.5px; font-weight: 800; line-height: normal; color: var(--ex-ink); cursor: pointer; }
.ex-field__file-hint { margin: 0; font-size: 11.5px; line-height: normal; color: var(--ex-text-muted); }
.ex-field__file-input {
  max-width: 100%;
  margin-top: 7px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ex-ink);
  cursor: pointer;
}
.ex-field__file-input::file-selector-button {
  margin: 0 12px 0 0;
  padding: 9px 14px;
  border: var(--ex-border-w) solid var(--ex-ink);
  border-radius: var(--ex-radius);
  background: var(--ex-white);
  color: var(--ex-ink);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
  transition: border-color var(--ex-t-fast), color var(--ex-t-fast);
}
.ex-field__file-input:hover::file-selector-button { border-color: var(--ex-red); color: var(--ex-red); }

/* With JS the box is the designed one (72px: icon, label, hint — no native "choose file" row): the whole box is the
   label's hit area, the native input stays in the tab order but is drawn only once a file is chosen, when it takes
   the place of the hint and shows the file name (the mockup swaps the label for the file name). */
.js .ex-field--file { position: relative; }
.js .ex-field__file-label::after { content: ""; position: absolute; inset: 0; cursor: pointer; }
.js .ex-field__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  overflow: hidden;
}
/* Focus ring and invalid state are drawn on the box, not around the file name. */
.js .ex-field__file-input,
.js .ex-field__file-input:focus-visible,
.js .ex-field__file-input[aria-invalid="true"] { border: 0; outline: 0; background: none; box-shadow: none; }
.js .ex-field--file:has(.ex-field__file-input[aria-invalid="true"]) { border-style: solid; border-color: var(--ex-red); }
.js .ex-field__file-input::file-selector-button { display: none; }
.js .ex-field--file.is-filled .ex-field__file-hint { display: none; }
.js .ex-field--file.is-filled .ex-field__file-input {
  position: static;
  width: auto;
  height: auto;
  opacity: 1;
  font-size: 11.5px;
  font-weight: 700;
  line-height: normal;
  color: var(--ex-ink);
}
.js .ex-field--file:has(.ex-field__file-input:focus-visible) { outline: 2px solid var(--ex-focus); outline-offset: 2px; }
@media (max-width: 899px) {
  .ex-field__file-input::file-selector-button { padding: 13px 16px; }
}
@media (max-width: 599px) {
  .ex-field--file { align-items: flex-start; padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-field--file,
  .ex-field__file-input::file-selector-button { transition: none; }
}


.ex-input,
.ex-select,
.ex-textarea {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 15px 16px;
  border: var(--ex-border-w) solid var(--ex-line-input);
  border-radius: var(--ex-radius);
  background-color: var(--ex-white);
  color: var(--ex-ink);
  font-family: inherit;
  /* Rendered values (see top): 13.33px, line-height normal → inputs are 48px high. */
  font-size: var(--ex-fs-input);
  font-weight: 400;
  line-height: normal;
  -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-textarea { min-height: 112px; resize: vertical; }
.ex-input::placeholder,
.ex-textarea::placeholder { color: var(--ex-placeholder); opacity: 1; }
.ex-input:focus,
.ex-select:focus,
.ex-textarea:focus { outline: none; border-color: var(--ex-red); background-color: var(--ex-red-tint); box-shadow: var(--ex-focus-ring); }
.ex-input.is-invalid,
.ex-select.is-invalid,
.ex-textarea.is-invalid,
.ex-input[aria-invalid="true"],
.ex-select[aria-invalid="true"],
.ex-textarea[aria-invalid="true"] { border-color: var(--ex-red); }
.ex-input:disabled,
.ex-select:disabled,
.ex-textarea:disabled { background-color: var(--ex-tint); color: var(--ex-text-soft); cursor: not-allowed; }

.ex-select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23DF192B' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  cursor: pointer;
}
.ex-select::-ms-expand { display: none; }
/* Filter dropdown look (Erga): ink border, bold caps label */
.ex-select--filter { min-width: 230px; padding: 13px 44px 13px 16px; border-color: var(--ex-ink); letter-spacing: .05em; } /* 13.33px / 400, 44px high */

.ex-checkbox { display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; }
.ex-checkbox__input { flex: none; width: 13px; height: 13px; margin: 3px 3px 3px 4px; accent-color: var(--ex-red); cursor: pointer; } /* rendered: native 13px box + default margin */
.ex-checkbox__text { font-size: 12px; line-height: 1.6; color: var(--ex-fg-muted); }
.ex-checkbox__text a { border-bottom: var(--ex-border-w) solid var(--ex-red); font-weight: 700; color: var(--ex-fg); }
.ex-checkbox__text a:hover { color: var(--ex-red); }

.ex-field__error { font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--ex-red); }
.ex-form-error {
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--ex-red-line);
  background: var(--ex-red-tint);
  color: var(--ex-red);
  font-size: var(--ex-fs-body-sm);
  font-weight: 500;
  line-height: 1.5;
}
.ex-form-success { color: var(--ex-fg); }
.ex-form-success__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 10px 0 22px;
  border: 2.5px solid var(--ex-red);
  color: var(--ex-red);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.ex-form-success__title { margin: 0 0 8px; font-size: var(--ex-fs-h4); font-weight: var(--ex-fw-title); line-height: 1.15; letter-spacing: -.01em; }
.ex-form-success__text { max-width: var(--ex-measure); margin: 0 0 22px; font-size: var(--ex-fs-body-sm); line-height: 1.65; }
.ex-form-actions { margin-top: 20px; }

/* WordPress core search form (get_search_form) wrapped in .ex-search-form */
.ex-search-form form { display: flex; gap: 10px; max-width: 560px; }
.ex-search-form label { flex: 1; min-width: 0; }
.ex-search-form input[type="search"],
.ex-search-form input[type="text"] {
  display: block;
  width: 100%;
  padding: 15px 16px;
  border: var(--ex-border-w) solid var(--ex-line-input);
  border-radius: var(--ex-radius);
  background-color: var(--ex-white);
  color: var(--ex-ink);
  font-size: var(--ex-fs-input);
  line-height: normal;
  -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-search-form input[type="search"]::placeholder,
.ex-search-form input[type="text"]::placeholder { color: var(--ex-placeholder); opacity: 1; }
.ex-search-form input[type="search"]:focus,
.ex-search-form input[type="text"]:focus { outline: none; border-color: var(--ex-red); background-color: var(--ex-red-tint); box-shadow: var(--ex-focus-ring); }
.ex-search-form input[type="submit"],
.ex-search-form button[type="submit"] {
  flex: none;
  padding: 0 28px;
  min-height: 48px;
  border: 0;
  border-radius: var(--ex-radius);
  background: var(--ex-red);
  color: var(--ex-white);
  font-size: var(--ex-fs-control);
  font-weight: 400;
  letter-spacing: .07em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--ex-t-base);
}
.ex-search-form input[type="submit"]:hover,
.ex-search-form button[type="submit"]:hover { background: var(--ex-ink); }

/* 10. Lists of entries, pagination
   ========================================================================== */
.ex-entry-list { border-top: 1px solid var(--ex-line-soft); }
.ex-entry { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 0; border-bottom: 1px solid var(--ex-line-soft); }
.ex-entry__title { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.25; letter-spacing: -.005em; }
.ex-entry__title a { transition: color var(--ex-t-fast); }
.ex-entry__excerpt { max-width: var(--ex-measure-wide); font-size: var(--ex-fs-body-sm); line-height: 1.65; color: var(--ex-text-muted); }
.ex-entry__excerpt p { margin: 0; }

.ex-empty { max-width: var(--ex-measure); font-size: var(--ex-fs-body); line-height: 1.6; color: var(--ex-fg-muted); }

.navigation.pagination { margin-top: 30px; }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ex-touch);
  height: var(--ex-touch);
  padding: 0 12px;
  border: var(--ex-border-w) solid var(--ex-line-ink);
  background: var(--ex-white);
  color: var(--ex-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  transition: background var(--ex-t-fast), color var(--ex-t-fast), border-color var(--ex-t-fast);
}
.navigation.pagination a.page-numbers:hover,
.navigation.pagination a.page-numbers:focus-visible { border-color: var(--ex-red); color: var(--ex-red); }
.navigation.pagination .page-numbers.current { border-color: var(--ex-red); background: var(--ex-red); color: var(--ex-white); }
.navigation.pagination .page-numbers.dots { border-color: transparent; background: none; }

/* 11. Rich text (WYSIWYG fields, post content)
   ========================================================================== */
.ex-rich-text { font-size: var(--ex-fs-rich); line-height: 1.75; color: var(--ex-fg); overflow-wrap: break-word; min-width: 0; }
.ex-rich-text pre { max-width: 100%; overflow-x: auto; }
.ex-rich-text iframe,
.ex-rich-text video,
.ex-rich-text embed,
.ex-rich-text object { max-width: 100%; }
.ex-rich-text .wp-block-table { margin: 0 0 26px; overflow-x: auto; }
.ex-rich-text .wp-block-table table { margin-bottom: 0; }
.ex-rich-text > * { margin-top: 0; margin-bottom: 22px; }
.ex-rich-text > *:last-child { margin-bottom: 0; }
.ex-rich-text p { margin: 0 0 22px; }
.ex-rich-text p:last-child { margin-bottom: 0; }
/* Intro paragraph of an article */
.ex-rich-text .is-lead,
.ex-rich-text--lead > p:first-child { font-size: clamp(16px, 1.25vw, 18.5px); font-weight: 500; line-height: 1.7; }
.ex-rich-text h2,
.ex-rich-text h3,
.ex-rich-text h4 { margin: 1.6em 0 .6em; font-weight: var(--ex-fw-title); letter-spacing: var(--ex-ls-title); color: var(--ex-fg); }
.ex-rich-text h2 { font-size: var(--ex-fs-h3); line-height: 1.1; }
.ex-rich-text h3 { font-size: var(--ex-fs-h4); line-height: 1.15; letter-spacing: -.01em; }
.ex-rich-text h4 { font-size: 19px; font-weight: 800; line-height: 1.25; letter-spacing: .01em; }
.ex-rich-text > h2:first-child,
.ex-rich-text > h3:first-child,
.ex-rich-text > h4:first-child { margin-top: 0; }
.ex-rich-text a { border-bottom: var(--ex-border-w) solid var(--ex-red); font-weight: 700; color: var(--ex-fg); }
.ex-rich-text a:hover { color: var(--ex-red); }
.ex-rich-text strong,
.ex-rich-text b { font-weight: 700; }
.ex-rich-text ul,
.ex-rich-text ol { margin: 0 0 22px; padding: 0 0 0 22px; }
.ex-rich-text ul { list-style: none; padding-left: 0; }
/* Block-editor lists carry a class (wp-block-list), so the reset for classed lists removes their numbers: restore them. */
.ex-rich-text ol { list-style: decimal; }
.ex-rich-text ul > li { position: relative; padding-left: 22px; }
.ex-rich-text ul > li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--ex-red); }
.ex-rich-text li { margin-bottom: 8px; }
.ex-rich-text li:last-child { margin-bottom: 0; }
.ex-rich-text li > ul,
.ex-rich-text li > ol { margin: 8px 0 0; }
.ex-rich-text ol > li::marker { font-weight: 700; color: var(--ex-red); }
.ex-rich-text blockquote {
  margin: 30px 0;
  padding: 4px 0 4px clamp(16px, 1.8vw, 26px);
  border-left: 2px solid var(--ex-red);
  font-size: clamp(16px, 1.25vw, 18.5px);
  font-weight: 500;
  line-height: 1.6;
}
.ex-rich-text blockquote p { margin-bottom: 10px; }
.ex-rich-text blockquote cite { display: block; font-size: var(--ex-fs-meta); font-style: normal; font-weight: 700; letter-spacing: .1em; color: var(--ex-fg-muted); }
.ex-rich-text hr { height: 0; margin: 30px 0; border: 0; border-top: .5px solid var(--ex-hairline-strong); }
.ex-rich-text img { max-width: 100%; height: auto; }
.ex-rich-text figure { margin: 0 0 26px; }
.ex-rich-text figure img { display: block; width: 100%; }
.ex-rich-text figcaption,
.ex-rich-text .wp-caption-text { margin-top: 10px; font-size: var(--ex-fs-meta); line-height: 1.5; color: var(--ex-text-soft); }
.ex-rich-text .wp-caption { max-width: 100%; }
.ex-rich-text iframe,
.ex-rich-text video { display: block; width: 100%; border: 0; }
.ex-rich-text .wp-block-embed__wrapper,
.ex-rich-text .wp-video { position: relative; }
.ex-rich-text table { width: 100%; margin: 0 0 26px; border-collapse: collapse; font-size: var(--ex-fs-body-sm); line-height: 1.5; }
.ex-rich-text th,
.ex-rich-text td { padding: 12px 16px; border-bottom: 1px solid var(--ex-line-soft); text-align: left; vertical-align: top; }
.ex-rich-text th { font-size: var(--ex-fs-kicker); font-weight: 700; letter-spacing: .18em; }

/* Alignments (classic editor + block editor) */
.ex-rich-text .alignleft { float: left; max-width: 50%; margin: 6px 26px 18px 0; }
.ex-rich-text .alignright { float: right; max-width: 50%; margin: 6px 0 18px 26px; }
.ex-rich-text .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.ex-rich-text .alignwide,
.ex-rich-text .alignfull { width: 100%; max-width: none; }
.ex-rich-text .has-text-align-center { text-align: center; }
.ex-rich-text .has-text-align-right { text-align: right; }
.ex-rich-text::after { content: ''; display: table; clear: both; }

/* Galleries: block gallery and classic [gallery]; 2 columns 16:9, 3+ columns 4:3 */
.ex-rich-text .wp-block-gallery,
.ex-rich-text .gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ex-space-4); margin: 0 0 26px; padding: 0; list-style: none; }
.ex-rich-text .wp-block-gallery.columns-1,
.ex-rich-text .gallery-columns-1 { grid-template-columns: minmax(0, 1fr); }
.ex-rich-text .wp-block-gallery.columns-2,
.ex-rich-text .gallery-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ex-rich-text .wp-block-gallery.columns-4,
.ex-rich-text .gallery-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ex-rich-text .wp-block-gallery .wp-block-image,
.ex-rich-text .wp-block-gallery .blocks-gallery-item,
.ex-rich-text .gallery .gallery-item { position: relative; width: auto !important; margin: 0 !important; padding: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--ex-grey-img); }
.ex-rich-text .wp-block-gallery .wp-block-image::before,
.ex-rich-text .gallery .gallery-item::before { content: none; }
.ex-rich-text .wp-block-gallery.columns-1 .wp-block-image,
.ex-rich-text .wp-block-gallery.columns-2 .wp-block-image,
.ex-rich-text .wp-block-gallery.columns-2 .blocks-gallery-item,
.ex-rich-text .gallery-columns-1 .gallery-item,
.ex-rich-text .gallery-columns-2 .gallery-item { aspect-ratio: 16 / 9; }
.ex-rich-text .wp-block-gallery img,
.ex-rich-text .gallery img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border: 0; object-fit: cover; }
.ex-rich-text .wp-block-gallery a,
.ex-rich-text .gallery a { position: absolute; inset: 0; border: 0; }
.ex-rich-text .wp-block-gallery figcaption,
.ex-rich-text .gallery .gallery-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0; padding: 22px 14px 10px; background: linear-gradient(to top, rgba(35, 31, 32, .88), rgba(35, 31, 32, 0)); color: var(--ex-white); }
.ex-rich-text .gallery br { display: none; }

/* 12. Scroll reveal
   Visible by default. Only when <html class="js"> is set does .reveal start hidden;
   JS adds .in when the element enters the viewport (mockup keyframes `rvu`).
   ========================================================================== */
@keyframes ex-rvu {
  from { opacity: 0; transform: translateY(var(--ex-reveal-y)); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ex-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.js .reveal:not(.in) { opacity: 0; transform: translateY(var(--ex-reveal-y)); }
.js .reveal.in { animation: ex-rvu var(--ex-reveal-t) var(--ex-ease-out) both; }

/* 13. Responsive
   ========================================================================== */
@media (max-width: 1439px) {
  :root { --ex-scroll-offset: 140px; }
}

@media (max-width: 1199px) {
  :root { --ex-banner-h: 420px; --ex-scroll-offset: 120px; }
  .ex-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  :root { --ex-banner-h: 340px; --ex-scroll-offset: 80px; --ex-fs-input: 16px; }
  .ex-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .ex-grid--3,
  .ex-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-btn,
  .ex-chip { min-height: var(--ex-touch); }
  /* One-line consent rows are 19-38px high: 44px tap area through a pseudo-element of the label (nothing moves). */
  .ex-checkbox { position: relative; }
  .ex-checkbox::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 100%; min-height: var(--ex-touch); transform: translateY(-50%); }
  .ex-checkbox__text a { position: relative; z-index: 1; }
  /* 44px tap area without moving the underline away from the text: the hit area grows, the box does not. */
  a.ex-link-arrow,
  button.ex-link-arrow,
  .ex-entry__title a { position: relative; }
  a.ex-link-arrow::after,
  button.ex-link-arrow::after,
  .ex-entry__title a::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: var(--ex-touch); transform: translateY(-50%); }
  .ex-section-head { align-items: flex-start; flex-direction: column; gap: 18px; }
  .ex-section-head__aside { align-items: flex-start; }
  .ex-section-head__aside .ex-chips { justify-content: flex-start; }
  .ex-chips--scroll { flex-wrap: nowrap; margin-inline: calc(-1 * var(--ex-gutter)); padding-inline: var(--ex-gutter); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ex-chips--scroll::-webkit-scrollbar { display: none; }
  /* A scrolling chip row inside a section head: the aside is a content-sized flex column, so the row took the width of
     all its chips and widened the page (/etaireia/kariera/ 523px at 375). The aside spans the head and the row scrolls. */
  .ex-section-head__aside:has(> .ex-chips--scroll) { display: block; align-self: stretch; width: 100%; min-width: 0; }
  .ex-checkbox__input { width: 20px; height: 20px; margin-top: 0; }
  .ex-select--filter { min-width: 0; }
  .ex-rich-text .wp-block-gallery.columns-4,
  .ex-rich-text .gallery-columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-rich-text .alignleft,
  .ex-rich-text .alignright { float: none; max-width: 100%; margin: 0 0 22px; }
}

@media (max-width: 599px) {
  :root { --ex-banner-h: 280px; }
  .ex-grid--3,
  .ex-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .ex-grid--keep-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-form-grid { grid-template-columns: minmax(0, 1fr); }
  .ex-btn-row--stack { flex-direction: column; align-items: stretch; }
  .ex-btn-row--stack .ex-btn { width: 100%; }
  .ex-card__body { padding: 18px 20px; }
  .ex-search-form form { flex-direction: column; }
  .ex-rich-text .wp-block-gallery,
  .ex-rich-text .gallery,
  .ex-rich-text .wp-block-gallery.columns-2,
  .ex-rich-text .gallery-columns-2,
  .ex-rich-text .wp-block-gallery.columns-4,
  .ex-rich-text .gallery-columns-4 { grid-template-columns: minmax(0, 1fr); }
  .ex-rich-text .wp-block-gallery .wp-block-image,
  .ex-rich-text .gallery .gallery-item { aspect-ratio: 16 / 9; }
}

/* 14. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal,
  .js .reveal:not(.in),
  .js .reveal.in { opacity: 1; transform: none; animation: none; }
  .ex-btn,
  .ex-btn::after,
  .ex-btn__arrow,
  .ex-btn__arrow::before,
  .ex-chip,
  .ex-card,
  .ex-card::after,
  .ex-card__media,
  .ex-card__arrow,
  .ex-link-arrow__arrow,
  .ex-tile > img,
  .ex-tile__media > img,
  .ex-input,
  .ex-select,
  .ex-textarea { transition: none; }
  .ex-btn:hover,
  .ex-btn:focus-visible,
  .ex-chip:hover,
  .ex-chip:focus-visible,
  .ex-chip.is-active,
  .ex-card:hover,
  .ex-card:focus-within,
  .ex-card:hover .ex-card__arrow,
  .ex-link-arrow:hover .ex-link-arrow__arrow { transform: none; }
}

/* 15. JS fallback (added by the wiring stage — inc/enqueue.php)
   ==========================================================================
   The inline head script sets `html.js` before first paint; assets/js/main.js adds `html.js-ready` once every module has
   initialised. If that has not happened after 4 seconds (blocked, failed or very slow script), the head script adds
   `html.js-fallback` and the rules below undo what the stylesheets hide or collapse under `.js`, and switch the site
   chrome back to its `.no-js` behaviour (hover menus, static mobile menu). `:not(.js-ready)` makes the block inert again
   if the script does arrive later. Every selector mirrors a `.js …` / `.no-js …` rule of the file named above it and must
   be kept in step with it. Deliberately not restored: the tool rail (global.css), which stays hidden.
   This block lives in base.css on purpose: it is the only stylesheet loaded on every page; the prefix
   `html.js-fallback:not(.js-ready)` out-ranks the later files. */

/* base.css — scroll reveal */
html.js-fallback:not(.js-ready) .reveal,
html.js-fallback:not(.js-ready) .reveal:not(.in) { opacity: 1; transform: none; animation: none; }

/* global.css — header dropdowns, mega panels, search band, back-to-top */
html.js-fallback:not(.js-ready) .ex-aud:hover .ex-aud__chev,
html.js-fallback:not(.js-ready) .ex-lang:hover .ex-lang__chev { transform: rotate(-135deg) translateY(-1px); }
html.js-fallback:not(.js-ready) .ex-aud:hover .ex-aud__panel,
html.js-fallback:not(.js-ready) .ex-aud:focus-within .ex-aud__panel { display: flex; }
html.js-fallback:not(.js-ready) .ex-nav__item:hover > .ex-mega,
html.js-fallback:not(.js-ready) .ex-nav__item:focus-within > .ex-mega { display: block; }
html.js-fallback:not(.js-ready) .ex-lang:hover .ex-lang__panel,
html.js-fallback:not(.js-ready) .ex-lang:focus-within .ex-lang__panel { display: block; }
html.js-fallback:not(.js-ready) .ex-search__band { max-height: 76px; visibility: visible; border-bottom: .5px solid rgba(35, 31, 32, .25); }
html.js-fallback:not(.js-ready) .ex-search__close,
html.js-fallback:not(.js-ready) .ex-search__hint { display: none; }
html.js-fallback:not(.js-ready) .ex-back-to-top { display: flex; }

/* global.css — mobile navigation: static block under the header, every sub-menu open */
@media (max-width: 899px) {
  html.js-fallback:not(.js-ready) .ex-mobile-nav { position: static; visibility: visible; pointer-events: auto; }
  html.js-fallback:not(.js-ready) .ex-mobile-nav__backdrop,
  html.js-fallback:not(.js-ready) .ex-mobile-nav__head,
  html.js-fallback:not(.js-ready) .ex-header__burger { display: none; }
  html.js-fallback:not(.js-ready) .ex-mobile-nav__panel { position: static; width: 100%; box-shadow: none; transform: none; border-bottom: 1px solid var(--ex-line-soft); }
  html.js-fallback:not(.js-ready) .ex-mobile-nav__sub { display: block; }
}

/* sections/job_openings.css, sections/programme_categories.css — accordions open */
html.js-fallback:not(.js-ready) .ex-job-openings__panel { grid-template-rows: 1fr; }
html.js-fallback:not(.js-ready) .ex-job-openings__panel-inner { visibility: visible; }
html.js-fallback:not(.js-ready) .ex-programme-categories__card > .ex-programme-categories__panel { display: block; }

/* sections/quiz_wizard.css, sections/quote_wizard.css — every step in order; the quote form keeps its native submit */
html.js-fallback:not(.js-ready) .ex-quiz-wizard__step:not(.is-active),
html.js-fallback:not(.js-ready) .ex-quote-wizard__step:not(.is-active) { display: block; margin-bottom: 40px; }
html.js-fallback:not(.js-ready) .ex-quote-wizard__form .ex-quote-wizard__submit { display: inline-flex; }
html.js-fallback:not(.js-ready) .ex-quiz-wizard__stepper,
html.js-fallback:not(.js-ready) .ex-quiz-wizard__actions,
html.js-fallback:not(.js-ready) .ex-quote-wizard__stepper,
html.js-fallback:not(.js-ready) .ex-quote-wizard__step.ex-quote-wizard__step--review,
html.js-fallback:not(.js-ready) .ex-quote-wizard__back,
html.js-fallback:not(.js-ready) .ex-quote-wizard__form .ex-quote-wizard__next { display: none; }

/* sections/timeline.css — the track scrolls natively again (the arrows need the script) */
html.js-fallback:not(.js-ready) .ex-timeline__track { scrollbar-width: auto; cursor: auto; }

/* templates/post-single.css — article photo gallery scrolls sideways */
html.js-fallback:not(.js-ready) .ex-post-gallery__viewport { overflow-x: auto; scroll-snap-type: x mandatory; }

/* Wide tables in editor content (article body, plain pages): below 600px a bare table becomes its own horizontal
   scroller so the page keeps the viewport width. */
@media (max-width: 599px) {
  .ex-rich-text > table { display: block; max-width: 100%; overflow-x: auto; }
}