/* ============================================================
   MTE Redesign — v3 "Bruegel grade"
   Editorial European modernism. Restraint over ornament.
   Yellow used sparingly. No theatre.
   ============================================================ */

:root {
  --mte-ink: #0a0c1e;
  --mte-ink-2: #131739;
  --mte-cream: #f3efe4;
  --mte-paper: #f8f5ec;
  --mte-signal: #eeff00;
  --mte-rust: #b54218;
  /* mist darkened from #7a7f93 (≈3.4:1 fails AA) to #5a5f73 (~5.0:1 passes AA) */
  --mte-mist: #5a5f73;
  --mte-line: rgba(10, 12, 30, 0.10);
  --mte-line-strong: rgba(10, 12, 30, 0.20);
  --mte-line-light: rgba(243, 239, 228, 0.14);

  --mte-display: "Fraunces", "Times New Roman", serif;
  --mte-body: "IBM Plex Sans", "Söhne", -apple-system, system-ui, sans-serif;
  --mte-mono: "IBM Plex Mono", "JetBrains Mono", "SF Mono", Menlo, monospace;

  --mte-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   GLOBAL CANVAS
   ============================================================ */
html, body {
  background: var(--mte-paper) !important;
  color: var(--mte-ink) !important;
}

body {
  font-family: var(--mte-body) !important;
  font-feature-settings: "ss01", "kern", "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.003em;
  overflow-x: clip;
}

/* Subtle grain (kept — barely there) */
.mte-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
  opacity: 0.4;
  mix-blend-mode: multiply;
  filter: url(#mte-grain);
}

/* Scanlines — REMOVED */
.mte-scanlines { display: none !important; }

/* ============================================================
   REMOVE ALL THE THEATRE — status bar, edge rails, jump nav,
   side rails, hero chrome, ghost numerals, intro curtain,
   custom cursor, crosshairs, ticker
   ============================================================ */
.mte-status-bar,
.mte-edge-rail,
.mte-edge-progress,
.mte-jump-nav,
.mte-side-rail,
.mte-hero-chrome,
.mte-hero-ghost,
.mte-hero-ticker,
.mte-hero-underline,
.mte-intro,
.brz-section[data-mte-cross]::before,
.brz-section[data-mte-cross]::after {
  display: none !important;
}
body.mte-has-statusbar { padding-top: 0 !important; }
body.mte-has-statusbar .brz-section:first-of-type { top: 0 !important; }

@media (hover: hover) and (pointer: fine) {
  body, a, button, .brz-btn, [role=button] { cursor: auto !important; }
  input, textarea { cursor: text !important; }
}

/* ============================================================
   TYPOGRAPHY — disciplined editorial scale
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.brz [class*="brz-tp-lg-heading"],
.brz [class*="brz-tp-sm-heading"],
.brz [class*="brz-tp-xs-heading"] {
  font-family: var(--mte-display) !important;
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144 !important;
  letter-spacing: -0.022em !important;
  line-height: 0.98 !important;
  font-weight: 600 !important;
  color: var(--mte-ink) !important;
}

/* Hero H1 — confident but not screaming */
.brz .brz-tp-lg-heading1,
.brz [class*="brz-tp-lg-heading1"] {
  font-size: clamp(3.5rem, 9vw, 8rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.035em !important;
  font-weight: 700 !important;
}

/* Section H2 — restrained */
.brz .brz-tp-lg-heading2,
.brz [class*="brz-tp-lg-heading2"] {
  font-size: clamp(2.2rem, 4.5vw, 4rem) !important;
  line-height: 0.98 !important;
  font-weight: 600 !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}
.brz .brz-tp-lg-heading3 { font-size: clamp(1.6rem, 3vw, 2.5rem) !important; line-height: 1.05 !important; font-weight: 600 !important; }
.brz .brz-tp-lg-heading4 { font-size: clamp(1.3rem, 2.2vw, 1.75rem) !important; font-weight: 600 !important; }

.brz [class*="brz-tp-lg-heading"] {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
  hyphens: none !important;
}

/* Italic em accent inside headings — kept, but no rust by default (more restrained) */
.brz h1 em, .brz h2 em, .brz h3 em {
  font-style: italic !important;
  font-variation-settings: "SOFT" 90, "opsz" 144 !important;
  color: var(--mte-ink) !important;
  font-weight: 400 !important;
}

/* Body / paragraph */
.brz p,
.brz .brz-rich-text p,
.brz [class*="brz-tp-lg-paragraph"] {
  font-family: var(--mte-body) !important;
  font-size: clamp(1rem, 1.05vw, 1.0625rem) !important;
  line-height: 1.65 !important;
  letter-spacing: -0.003em !important;
  color: var(--mte-ink) !important;
  font-weight: 400 !important;
}

/* Subtitle / lead — sans, not italic */
.brz [class*="brz-tp-lg-subtitle"] {
  font-family: var(--mte-body) !important;
  font-weight: 400 !important;
  font-size: clamp(1.05rem, 1.25vw, 1.2rem) !important;
  line-height: 1.55 !important;
  letter-spacing: -0.005em !important;
  color: var(--mte-ink-2) !important;
}

/* Eyebrow / abovetitle */
.brz [class*="brz-tp-lg-abovetitle"],
.brz [class*="abovetitle"] {
  font-family: var(--mte-mono) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--mte-ink-2) !important;
  opacity: 0.7;
}

/* No drop caps — too theatrical for institutional */
.mte-section--light .mte-lead-block::first-letter,
.brz .mte-dropcap p:first-of-type::first-letter,
.brz [class*="brz-tp-lg-subtitle"]:first-letter { all: unset; }

/* ============================================================
   COLOR REMAP — same palette but yellow is used much less
   ============================================================ */
.brz {
  --brz-global-color1: 19, 23, 57 !important;
  --brz-global-color2: 10, 12, 30 !important;
  --brz-global-color3: 181, 66, 24 !important;       /* rust replaces yellow for color3 - more restrained */
  --brz-global-color4: 19, 23, 57 !important;
  --brz-global-color5: 243, 239, 228 !important;
  --brz-global-color6: 122, 127, 147 !important;     /* mist */
  --brz-global-color7: 122, 127, 147 !important;
  --brz-global-color8: 248, 245, 236 !important;
}

/* ============================================================
   NAV / HEADER — confident, quiet
   ============================================================ */
.brz-section:first-of-type {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  background: rgba(10, 12, 30, 0.85) !important;
  border-bottom: 0 !important;
  transition: background 0.3s ease !important;
}
.brz-section:first-of-type::before,
.brz-section:first-of-type::after { display: none !important; }

body.mte-scrolled .brz-section:first-of-type {
  background: rgba(10, 12, 30, 0.94) !important;
}

.brz nav a,
.brz [class*="brz-menu"] a,
.brz .brz-mm-menu__item a,
header a {
  font-family: var(--mte-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  position: relative !important;
  transition: color 0.2s ease !important;
  color: var(--mte-cream) !important;
}
.brz nav a::after,
.brz .brz-mm-menu__item a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -5px;
  height: 1px;
  background: var(--mte-cream);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--mte-ease-out);
}
.brz nav a:hover::after,
.brz .brz-mm-menu__item a:hover::after { transform: scaleX(1); }
.brz nav a:hover,
.brz .brz-mm-menu__item a:hover { color: #fff !important; }

/* ============================================================
   DARK / LIGHT SECTION RULES
   ============================================================ */
.brz-section.mte-section--dark,
.brz-section.mte-section--dark p,
.brz-section.mte-section--dark .brz-rich-text,
.brz-section.mte-section--dark [class*="brz-tp-lg-paragraph"],
.brz-section.mte-section--dark [class*="brz-tp-lg-subtitle"] {
  color: var(--mte-cream) !important;
}
.brz-section.mte-section--dark h1,
.brz-section.mte-section--dark h2,
.brz-section.mte-section--dark h3,
.brz-section.mte-section--dark h4,
.brz-section.mte-section--dark h5,
.brz-section.mte-section--dark h6,
.brz-section.mte-section--dark [class*="brz-tp-lg-heading"] {
  color: var(--mte-paper) !important;
}
.brz-section.mte-section--dark [class*="abovetitle"],
.brz-section.mte-section--dark .mte-section-num {
  color: var(--mte-cream) !important;
  opacity: 0.6;
}
.brz-section.mte-section--dark .mte-section-num::before {
  background: var(--mte-cream) !important;
  opacity: 0.4;
}
.brz-section.mte-section--dark span[style*="color"] { color: inherit !important; }

/* ============================================================
   BUTTONS — quiet by default, hover lift
   ============================================================ */
.brz .brz-btn,
.brz a.brz-btn,
.brz button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.7rem !important;
  font-family: var(--mte-mono) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 1rem 1.8rem !important;
  border-radius: 0 !important;
  border: 1px solid var(--mte-ink) !important;
  background: var(--mte-ink) !important;
  color: var(--mte-cream) !important;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}
.brz .brz-btn::before { display: none !important; }
/* No injected ::after arrow — many Brizy buttons already have their own
   icon/arrow inside, which would cause double-arrow bugs. Hover shifts the
   whole button text slightly instead. */
.brz .brz-btn::after { content: none !important; }
.brz .brz-btn:hover {
  background: var(--mte-cream) !important;
  color: var(--mte-ink) !important;
  border-color: var(--mte-ink) !important;
}

.brz [class*="brz-bg-color1"] .brz-btn,
.brz [class*="brz-bg-color2"] .brz-btn,
[style*="background-color: rgba(var(--brz-global-color2)"] .brz-btn,
.mte-section--dark .brz-btn {
  background: transparent !important;
  color: var(--mte-cream) !important;
  border-color: var(--mte-cream) !important;
}
.mte-section--dark .brz-btn:hover {
  background: var(--mte-cream) !important;
  color: var(--mte-ink) !important;
  border-color: var(--mte-cream) !important;
}

/* ============================================================
   FORMS — refined hairlines
   ============================================================ */
.brz input[type="text"],
.brz input[type="email"],
.brz input[type="tel"],
.brz textarea,
.forminator-input,
.forminator-textarea {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--mte-line) !important;
  border-radius: 0 !important;
  padding: 0.9rem 0 !important;
  font-family: var(--mte-body) !important;
  font-size: 1rem !important;
  color: var(--mte-ink) !important;
  transition: border-color 0.3s ease !important;
}
.mte-section--dark input[type="text"],
.mte-section--dark input[type="email"],
.mte-section--dark input[type="tel"],
.mte-section--dark textarea,
.mte-section--dark .forminator-input,
.mte-section--dark .forminator-textarea {
  color: var(--mte-cream) !important;
  border-bottom-color: var(--mte-line-light) !important;
}
.brz input:focus, .brz textarea:focus,
.forminator-input:focus, .forminator-textarea:focus {
  outline: 2px solid var(--mte-ink) !important;
  outline-offset: 4px !important;
  border-bottom-color: var(--mte-ink) !important;
  box-shadow: none !important;
}
.mte-section--dark input:focus, .mte-section--dark textarea:focus {
  outline-color: var(--mte-signal) !important;
  border-bottom-color: var(--mte-cream) !important;
}

/* ============================================================
   GLOBAL FOCUS OUTLINES (WCAG 2.4.7 / 2.4.11) — applied to ALL
   interactive elements, with high-contrast color
   ============================================================ */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--mte-ink) !important;
  outline-offset: 3px !important;
  border-radius: 1px;
}
.mte-section--dark :focus-visible,
.brz-section.mte-section--dark :focus-visible,
.mte-colophon :focus-visible,
.mte-fallback-nav :focus-visible {
  outline-color: var(--mte-signal) !important;
}

/* ============================================================
   SKIP-TO-CONTENT LINK (WCAG 2.4.1)
   ============================================================ */
.mte-skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--mte-ink);
  color: var(--mte-paper) !important;
  font-family: var(--mte-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1rem 1.5rem;
  z-index: 100000;
  text-decoration: none !important;
  border: 2px solid var(--mte-signal);
}
.mte-skip-link:focus {
  top: 0;
  outline: 2px solid var(--mte-signal) !important;
}

.forminator-label {
  font-family: var(--mte-mono) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--mte-ink-2) !important;
  font-weight: 500 !important;
  margin-bottom: 0.4rem !important;
  opacity: 0.7;
}
.mte-section--dark .forminator-label { color: var(--mte-cream) !important; opacity: 0.6; }

.forminator-button-submit {
  background: var(--mte-ink) !important;
  color: var(--mte-cream) !important;
  font-family: var(--mte-mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
  border: 1px solid var(--mte-ink) !important;
  padding: 1rem 1.8rem !important;
  transition: all 0.25s ease !important;
}
.forminator-button-submit:hover {
  background: var(--mte-cream) !important;
  color: var(--mte-ink) !important;
  border-color: var(--mte-ink) !important;
}

/* ============================================================
   SECTION DIVIDER — single hairline rule, no animation
   ============================================================ */
.mte-eq-divider {
  display: block;
  height: 1px;
  background: transparent;
  padding: 0;
  margin: 0;
  position: relative;
}
.mte-eq-divider span {
  display: none !important;
}
/* When section above is light and below is dark (or vice versa),
   show a quiet rule */
.mte-eq-divider::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--mte-line);
}

/* ============================================================
   LINKS — subtle underline that softens on hover
   ============================================================ */
.brz .brz-rich-text a,
.brz p a {
  color: inherit !important;
  text-decoration: none !important;
  background-image: linear-gradient(to right, currentColor 0%, currentColor 100%) !important;
  background-size: 100% 1px !important;
  background-position: 0 calc(100% - 1px) !important;
  background-repeat: no-repeat !important;
  padding-bottom: 2px !important;
  transition: opacity 0.25s ease !important;
}
.brz .brz-rich-text a:hover { opacity: 0.6; }

/* ============================================================
   IMAGES — quiet treatment
   ============================================================ */
.brz img { filter: contrast(1.02) saturate(1.02); }

/* Logos hover: subtle desaturation toggle */
.mte-section--light .brz-image,
.brz-section .brz-image {
  transition: transform 0.35s var(--mte-ease-out), opacity 0.3s ease !important;
}
.mte-section--light .brz-image:hover {
  transform: translateY(-2px);
}

/* ============================================================
   ICONS — quieter hover
   ============================================================ */
.brz-icon-svg {
  transition: transform 0.35s var(--mte-ease-out) !important;
}
.brz .brz-wrapper:hover .brz-icon-svg,
.brz .brz-icon__container:hover .brz-icon-svg {
  transform: scale(1.06) !important;
}

/* No more pulsing yellow on color3 elements */
.brz [style*="background-color: rgba(var(--brz-global-color3)"] {
  box-shadow: none !important;
  animation: none !important;
}

/* ============================================================
   COOKIE BANNER (hidden on local dev)
   ============================================================ */
.cky-consent-container,
.cky-modal,
.cky-consent-bar,
.cky-revisit-bottom-left,
.cky-revisit-bottom-right,
.cky-overlay,
#cookie-law-info-bar,
#cookie-law-info-again,
#cky-consent {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* ============================================================
   PARTNERS MARQUEE — slower, smaller, no ornaments
   ============================================================ */
.mte-marquee {
  overflow: hidden;
  position: relative;
  padding: 1.25rem 0;
  border-top: 1px solid var(--mte-line);
  border-bottom: 1px solid var(--mte-line);
  margin: 3rem 0 1rem;
  background: transparent;
}
.mte-marquee::before, .mte-marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.mte-marquee::before { left: 0; background: linear-gradient(to right, var(--mte-paper), transparent); }
.mte-marquee::after { right: 0; background: linear-gradient(to left, var(--mte-paper), transparent); }
.mte-marquee__track {
  display: flex;
  gap: 3.5rem;
  animation: mte-marquee 75s linear infinite;
  width: max-content;
}
.mte-marquee__item {
  font-family: var(--mte-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--mte-ink);
  white-space: nowrap;
  opacity: 0.7;
}
.mte-marquee__item::after { content: none; }
@keyframes mte-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   COLOPHON FOOTER — refined, no ghost watermark, no theatre
   ============================================================ */
.mte-colophon {
  position: relative;
  background: var(--mte-ink);
  color: var(--mte-cream);
  padding: 6rem 6vw 2.5rem;
  overflow: hidden;
  border-top: 1px solid var(--mte-line-light);
}
/* NO ghost MTE letters — too theatrical */
.mte-colophon::before { display: none !important; }
.mte-colophon::after { display: none !important; }

.mte-colophon__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 2.4fr 1fr 1fr 1fr;
  gap: 4rem;
  max-width: 1400px;
  margin: 0 auto;
}
/* Brand column — logo + tagline */
.mte-colophon__brand-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.mte-colophon__logo {
  display: inline-block;
  width: 220px;
  height: auto;
  opacity: 0.95;
  transition: opacity 0.25s ease;
  text-decoration: none;
  line-height: 0;
  /* The cropped-mte-final-logo.jpg has the same navy bg as the colophon,
     so it blends in seamlessly */
}
.mte-colophon__logo:hover { opacity: 1; }
.mte-colophon__logo img {
  display: block;
  width: 100%;
  height: auto;
}
/* Hidden — legacy class no longer used */
.mte-colophon__brand { display: none !important; }
.mte-colophon__tagline {
  font-family: var(--mte-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--mte-cream);
  opacity: 0.65;
  max-width: 38ch;
  margin-bottom: 0;
}
.mte-colophon__col-title {
  font-family: var(--mte-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mte-cream);
  opacity: 0.5;
  margin-bottom: 1.25rem;
  display: block;
}
.mte-colophon__col-title::before { content: none; }
.mte-colophon__list {
  list-style: none;
  margin: 0; padding: 0;
}
.mte-colophon__list li {
  margin-bottom: 0.6rem;
  font-family: var(--mte-body);
  font-size: 0.95rem;
}
.mte-colophon__list a {
  color: var(--mte-cream);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.25s ease;
  display: inline-block;
}
.mte-colophon__list a:hover { opacity: 1; }
.mte-colophon__list a:hover::before { content: none; }

.mte-colophon__address {
  font-family: var(--mte-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--mte-cream);
  opacity: 0.85;
  font-style: normal;
}

.mte-colophon__base {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  border-top: 1px solid var(--mte-line-light);
  margin-top: 4rem;
  padding-top: 1.75rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--mte-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mte-cream);
  opacity: 0.5;
  flex-wrap: wrap;
}
.mte-colophon__base a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.25s ease;
}
.mte-colophon__base a:hover { opacity: 0.6; }
.mte-colophon__base-mark { display: none !important; }

body.mte-has-colophon .brz-section.mte-original-footer {
  display: none !important;
}

/* Hide the Brizy <footer class="brz-footer"> when the unified MTE colophon
   is rendered. The Brizy footer block ships an empty .brz-bg-color child
   whose computed background-color is solid black (#000), which paints a
   ~117px-tall full-width black band between the contact form and the
   colophon. The colophon already contains the copyright + Privacy link,
   so the Brizy footer block is redundant and safe to remove visually. */
body.mte-has-colophon footer.brz-footer {
  display: none !important;
}

/* ============================================================
   COLOPHON TERMINUS — nothing renders below the unified colophon
   ============================================================
   Brizy injects ~20 .brz-popup2 sibling divs after the colophon (popups,
   social bars, scroll-to-top widgets) that can briefly flash on load or
   leak red social icons / cream background below the colophon. The
   colophon is meant to be the page terminus. This sibling-combinator
   rule hides every element that follows the colophon in the same parent,
   robust against future Brizy injections. */
body.mte-has-colophon .mte-colophon ~ * {
  display: none !important;
}

/* Ensure the html/body background is dark beneath the colophon so any
   future gap (rubber-band scroll, overscroll, sub-pixel rounding) shows
   the colophon's --mte-ink rather than the cream --mte-paper. */
body.mte-has-colophon {
  background: var(--mte-ink) !important;
}
html:has(body.mte-has-colophon) {
  background: var(--mte-ink) !important;
}

/* No spectrum bars */
.mte-spectrum { display: none !important; }

/* ============================================================
   SCROLL REVEAL — subtler, faster
   ============================================================ */
.mte-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--mte-ease-out), transform 0.6s var(--mte-ease-out);
}
.mte-reveal.is-visible { opacity: 1; transform: translateY(0); }
@keyframes mte-safety-reveal {
  to { opacity: 1; transform: translateY(0); }
}
.mte-reveal { animation: mte-safety-reveal 0.01s linear 1.2s forwards; }
.mte-reveal.is-visible { animation: none; }

/* ============================================================
   SECTION NUMBER EYEBROW — REMOVED (use real names or none)
   ============================================================ */
.mte-section-num { display: none !important; }

/* New mature eyebrow: just the section name in small caps mono,
   left-aligned above the heading. Injected via JS for select sections. */
.mte-eyebrow {
  font-family: var(--mte-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mte-ink);
  opacity: 0.5;
  margin-bottom: 1.25rem;
  display: inline-block;
}
.mte-section--dark .mte-eyebrow { color: var(--mte-cream); }

/* ============================================================
   NEWS — clean dispatch with date only
   ============================================================ */
.mte-news-meta {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.8rem;
  margin: 1rem 0 -0.5rem;
  font-family: var(--mte-mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mte-ink);
  opacity: 0.55;
}
.mte-news-meta::before, .mte-news-meta::after { content: none; }
.mte-news-num, .mte-news-tag {
  font-family: var(--mte-mono);
  font-weight: 500;
  color: var(--mte-ink);
  letter-spacing: 0.16em;
}

.mte-news-item {
  position: relative;
  padding: 2.5rem 0;
  border-top: 1px solid var(--mte-line);
  transition: opacity 0.25s ease;
}
.mte-news-item:first-of-type { border-top: none; }
.mte-news-item:hover { opacity: 0.85; }
.mte-news-item h2, .mte-news-item h3 {
  transition: opacity 0.25s ease;
}

/* No activities-extra (it was duplicate anyway) */
.mte-activities-extra { display: none !important; }

/* ============================================================
   HERO — quiet ambience (no overlays, no chrome)
   ============================================================ */
.brz-section:nth-of-type(2)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 75%, rgba(10, 12, 30, 0.4));
  z-index: 2;
}

/* Hero title — quieter than before */
.brz-section:nth-of-type(2) [class*="brz-tp-lg-heading1"] {
  text-shadow: 0 4px 60px rgba(0,0,0,0.35);
}

/* ============================================================
   ARTICLE HEADER — injected on single news posts
   ============================================================ */
.mte-article-header {
  background: var(--mte-paper);
  padding: 6rem 6vw 2.5rem;
  border-bottom: 1px solid var(--mte-line);
}
.mte-article-header__inner {
  max-width: 880px;
  margin: 0 auto;
}
.mte-article-meta {
  font-family: var(--mte-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mte-ink);
  opacity: 0.6;
  margin-bottom: 1.25rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.mte-article-cat { color: var(--mte-rust); opacity: 1; }
.mte-article-sep { opacity: 0.4; }
.mte-article-title {
  font-family: var(--mte-display) !important;
  font-size: clamp(2.25rem, 5vw, 4rem) !important;
  font-weight: 600 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.025em !important;
  color: var(--mte-ink) !important;
  margin: 0 !important;
}

/* ============================================================
   STATUTES PAGE (injected by SEO plugin)
   ============================================================ */
.mte-page-statutes {
  background: var(--mte-paper);
  min-height: 60vh;
  padding-bottom: 4rem;
}
.mte-page-statutes .mte-article-body__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 6vw;
  font-family: var(--mte-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--mte-ink);
}
.mte-page-statutes .mte-lead {
  font-family: var(--mte-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem) !important;
  line-height: 1.45 !important;
  margin: 0 0 2rem !important;
  color: var(--mte-ink) !important;
}
.mte-page-statutes ul {
  margin: 1.5rem 0 2.5rem;
  padding-left: 1.5rem;
}
.mte-page-statutes li {
  margin-bottom: 0.5rem;
}

/* Document download card */
.mte-doc-card {
  background: var(--mte-ink);
  color: var(--mte-cream);
  padding: 2rem 2rem;
  margin: 3rem 0;
  display: flex;
  align-items: center;
  gap: 2rem;
  border: 1px solid var(--mte-ink);
  transition: background 0.25s ease;
}
.mte-doc-card__meta { flex: 1; }
.mte-doc-card__type {
  font-family: var(--mte-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mte-cream);
  opacity: 0.5;
  margin-bottom: 0.5rem;
}
.mte-doc-card__title {
  font-family: var(--mte-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--mte-cream);
  margin-bottom: 0.4rem;
}
.mte-doc-card__desc {
  font-family: var(--mte-body);
  font-size: 0.92rem;
  color: var(--mte-cream);
  opacity: 0.65;
}
.mte-doc-card__btn {
  font-family: var(--mte-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mte-ink);
  background: var(--mte-cream);
  padding: 1rem 1.6rem;
  border: 1px solid var(--mte-cream);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.mte-doc-card__btn:hover {
  background: transparent;
  color: var(--mte-cream);
}
@media (max-width: 600px) {
  .mte-doc-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
}

.mte-article-back {
  margin-top: 4rem;
  font-family: var(--mte-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ============================================================
   UNIFIED FALLBACK NAV
   Used by virtual pages (Statutes, Resources, Members, etc.) AND
   injected on Brizy pages to replace the legacy Brizy nav.
   ============================================================ */
.mte-fallback-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2vw;
  background: rgba(10, 12, 30, 0.92);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  /* No border — the blur + opacity carries the separation */
  border-bottom: 0;
  font-family: var(--mte-mono);
}
.mte-fallback-nav__logo {
  display: inline-block;
  line-height: 0;
  width: 130px;
  opacity: 0.95;
  flex-shrink: 0;
}
.mte-fallback-nav__logo img {
  display: block;
  width: 100%;
  height: auto;
}
.mte-fallback-nav__links {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.mte-fallback-nav__links a {
  font-family: var(--mte-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mte-cream);
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
  padding: 0.4rem 0;
  min-height: 24px;
}
.mte-fallback-nav__links a:hover { color: #fff; }
.mte-fallback-nav__cta,
.mte-fallback-nav .mte-fallback-nav__cta,
.mte-fallback-nav__links a.mte-fallback-nav__cta,
.brz nav a.mte-fallback-nav__cta,
header a.mte-fallback-nav__cta {
  background: var(--mte-signal) !important;
  color: var(--mte-ink) !important;
  padding: 0.55rem 0.95rem !important;
  border: 1px solid var(--mte-signal) !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.mte-fallback-nav__cta:hover,
.mte-fallback-nav .mte-fallback-nav__cta:hover,
.mte-fallback-nav__links a.mte-fallback-nav__cta:hover,
.brz nav a.mte-fallback-nav__cta:hover,
header a.mte-fallback-nav__cta:hover {
  background: var(--mte-cream) !important;
  border-color: var(--mte-cream) !important;
  color: var(--mte-ink) !important;
}
.mte-fallback-nav__cta::after { display: none !important; }
.mte-fallback-nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--mte-signal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--mte-ease-out);
}
.mte-fallback-nav__links a:hover::after { transform: scaleX(1); }

/* Active page indicator — aria-current="page" link, also tagged .is-current.
   A subtle signal-yellow underscore matches the hover treatment but stays
   on, keeping the colour palette tight. */
.mte-fallback-nav__links a[aria-current="page"],
.mte-fallback-nav__links a.is-current {
  color: var(--mte-signal);
}
.mte-fallback-nav__links a[aria-current="page"]::after,
.mte-fallback-nav__links a.is-current::after {
  transform: scaleX(1);
}
/* The CTA "Apply" already has a signal-yellow background, so when it is
   the current page we use the cream ink instead, so the active state is
   visible on the yellow chip. */
.mte-fallback-nav__links a.mte-fallback-nav__cta[aria-current="page"],
.mte-fallback-nav__links a.mte-fallback-nav__cta.is-current {
  color: var(--mte-ink) !important;
  box-shadow: inset 0 -2px 0 0 var(--mte-ink);
}

/* Mobile hamburger toggle */
.mte-nav-toggle,
.brz button.mte-nav-toggle,
.brz a.mte-nav-toggle,
.mte-fallback-nav .mte-nav-toggle {
  display: none !important;
  background: none !important;
  border: none !important;
  padding: 0.5rem !important;
  cursor: pointer;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.mte-nav-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--mte-cream);
  transition: transform 0.3s, opacity 0.3s;
}
.mte-nav-open .mte-nav-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.mte-nav-open .mte-nav-toggle span:nth-child(2) { opacity: 0; }
.mte-nav-open .mte-nav-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Hide the original Brizy nav section when unified nav takes over */
.brz-section.mte-brizy-nav-hidden { display: none !important; }

/* ============================================================
   HOME HERO CTA STRIP (injected by JS on /)
   ============================================================ */
.mte-home-cta-strip {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  z-index: 10;
  background: linear-gradient(to top, rgba(10, 12, 30, 0.94) 55%, rgba(10, 12, 30, 0) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 1.5rem 4vw 1.75rem;
}
.mte-home-cta-strip__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.mte-home-cta-strip__facts {
  display: flex;
  gap: 2.5rem;
}
.mte-home-cta-strip__fact { display: flex; flex-direction: column; gap: 0.3rem; }
.mte-home-cta-strip__num {
  font-family: var(--mte-mono);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  color: var(--mte-cream);
  letter-spacing: 0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mte-home-cta-strip__label {
  font-family: var(--mte-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mte-cream);
  opacity: 0.55;
}
.mte-home-cta-strip__ctas {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.mte-home-cta-strip__primary,
.mte-home-cta-strip__secondary {
  font-family: var(--mte-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0.95rem 1.5rem;
  text-decoration: none !important;
  background-image: none !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.mte-home-cta-strip__primary {
  background: var(--mte-signal);
  color: var(--mte-ink) !important;
  border: 1px solid var(--mte-signal);
}
.mte-home-cta-strip__primary:hover {
  background: var(--mte-cream);
  border-color: var(--mte-cream);
}
.mte-home-cta-strip__secondary {
  background: transparent;
  color: var(--mte-cream) !important;
  border: 1px solid var(--mte-cream);
}
.mte-home-cta-strip__secondary:hover {
  background: var(--mte-cream);
  color: var(--mte-ink) !important;
}
@media (max-width: 768px) {
  .mte-home-cta-strip { position: static; padding: 2rem 5vw; }
  .mte-home-cta-strip__facts { gap: 1.5rem; }
  .mte-home-cta-strip__ctas { width: 100%; }
  .mte-home-cta-strip__primary,
  .mte-home-cta-strip__secondary { flex: 1; justify-content: center; }
}

/* Mobile: links collapse into a dropdown */
@media (max-width: 880px) {
  .mte-nav-toggle,
  .brz button.mte-nav-toggle,
  .mte-fallback-nav .mte-nav-toggle { display: inline-flex !important; }
  .mte-fallback-nav { flex-wrap: wrap; padding: 0.75rem 4vw; }
  .mte-fallback-nav__links {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }
  .mte-nav-open .mte-fallback-nav__links {
    max-height: 600px;
    padding-top: 1.25rem;
  }
  .mte-fallback-nav__links li { width: 100%; }
  .mte-fallback-nav__links a {
    display: block;
    width: 100%;
    padding: 0.85rem 0;
    font-size: 0.78rem;
    border-bottom: 1px solid var(--mte-line-light);
    min-height: 44px;
  }
  .mte-fallback-nav__links a::after { display: none; }
}
.mte-article-back a {
  color: var(--mte-ink) !important;
  text-decoration: none;
  background: none !important;
  padding: 0 !important;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.mte-article-back a:hover { opacity: 1; }

/* ============================================================
   VIRTUAL PAGES (Resources / Members / Board / Projects / Press releases)
   Shared shell styling
   ============================================================ */
.mte-virtual-page { padding-bottom: 4rem; }
/* Bottom breathing room between virtual-page body content and the dark colophon.
   Targets the <main> wrapper so the gap sits ABOVE the colophon (the body-level
   rule above puts space below it). Applies to every virtual page, with or
   without a CTA block. Bumped from 6rem to 9rem to give the Transparency
   section on /board/ (and any page ending with a prose block) a clear gap
   before the dark colophon's top edge. */
.mte-virtual-page > main { padding-bottom: 9rem; }
/* Board page in particular ends with a single .mte-prose Transparency block.
   Give that block additional bottom margin so the gap before the colophon
   reads as deliberate, not abrupt. */
.mte-page-board .mte-prose:last-child { margin-bottom: 5rem; }
.mte-page { background: var(--mte-paper); }
.mte-page .mte-article-header { background: var(--mte-paper); padding: 5rem 6vw 3rem; }
.mte-page-lede {
  font-family: var(--mte-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.45;
  color: var(--mte-ink);
  opacity: 0.85;
  max-width: 56ch;
  margin: 1.5rem 0 0;
}
.mte-page-body__inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 3rem 6vw 0;
}
.mte-page-body__inner--wide {
  max-width: 1200px;
}

/* Generic prose block */
.mte-prose {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--mte-line);
}
.mte-prose h2 {
  font-family: var(--mte-display);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.mte-prose p {
  font-family: var(--mte-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 0 0 1rem;
}

/* Generic CTA block at the end of pages — editorial, open (no card) */
.mte-cta-block {
  margin-top: 6rem;
  margin-bottom: 6rem;
  padding: 2.5rem 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--mte-line);
  position: relative;
}
.mte-cta-block::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 64px; height: 1px;
  background: var(--mte-ink);
}
.mte-cta-block__eyebrow {
  font-family: var(--mte-mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mte-ink);
  opacity: 0.5;
  margin: 0 0 1rem;
  font-weight: 500;
}
.mte-cta-block__title {
  font-family: var(--mte-display);
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.85rem;
  max-width: 22ch;
}
.mte-cta-block p {
  font-family: var(--mte-body);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0 0 1.75rem;
  max-width: 54ch;
  color: var(--mte-ink-2);
}

/* ============================================================
   RESOURCES PAGE
   ============================================================ */
.mte-res-group {
  margin-bottom: 4rem;
}
.mte-res-group__title {
  font-family: var(--mte-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mte-ink);
  opacity: 0.55;
  margin: 0 0 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--mte-line);
  font-weight: 500;
}
.mte-res-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.mte-res-card {
  position: relative;
  display: block;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--mte-line);
  text-decoration: none;
  color: var(--mte-ink);
  transition: padding-left 0.3s var(--mte-ease-out), background 0.25s ease;
  background: transparent !important;
  background-image: none !important;
}
.mte-res-card:hover {
  padding-left: 1rem;
  background: rgba(10, 12, 30, 0.03) !important;
}
.mte-res-card--forthcoming { opacity: 0.55; pointer-events: none; }
.mte-res-card__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mte-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mte-ink);
  opacity: 0.55;
  margin-bottom: 0.65rem;
}
.mte-res-card__source { color: var(--mte-rust); opacity: 1; font-weight: 500; }
.mte-res-card__sep { opacity: 0.4; }
.mte-res-card__title {
  font-family: var(--mte-display);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin: 0 0 0.5rem;
  color: var(--mte-ink);
}
.mte-res-card__desc {
  font-family: var(--mte-body);
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--mte-ink-2);
  margin: 0 0 0.5rem;
  max-width: 70ch;
}
.mte-res-card__topic {
  font-family: var(--mte-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mte-ink);
  opacity: 0.5;
  border: 1px solid var(--mte-line-strong);
  padding: 0.25rem 0.5rem;
  display: inline-block;
}
.mte-res-card__arrow {
  position: absolute;
  top: 1.75rem;
  right: 0;
  font-family: var(--mte-body);
  font-size: 1.1rem;
  color: var(--mte-ink);
  opacity: 0.4;
  transition: transform 0.3s var(--mte-ease-out), opacity 0.25s ease;
}
.mte-res-card:hover .mte-res-card__arrow {
  opacity: 1;
  transform: translateX(4px);
}

/* ============================================================
   MEMBERS DIRECTORY
   ============================================================ */
.mte-members-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
}
@media (max-width: 760px) {
  .mte-members-grid { grid-template-columns: 1fr; }
}
.mte-member-card {
  background: var(--mte-cream);
  padding: 2rem;
  border: 1px solid var(--mte-line);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: transform 0.3s var(--mte-ease-out), box-shadow 0.3s ease;
}
.mte-member-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(10, 12, 30, 0.06);
}
.mte-member-card__logo {
  /* Optical-size container: fixed height, centered both axes so logos of any
     aspect ratio occupy similar visual weight. Width is the full card column,
     centering is handled by justify-content; per-logo max-width caps below
     keep wide one-row marks from overpowering tall/square marks. */
  height: 80px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0.5rem;
}
.mte-member-card__logo img {
  /* Baseline: cap height to 64px (leaving 16px breathing room inside the 80px
     box) and cap width to ~46% of the card so very wide one-row logos sit at
     an optical weight comparable to square / tall ones. */
  max-height: 64px;
  max-width: 46%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
  mix-blend-mode: multiply;
}
/* Per-logo optical-size overrides (only for logos that fall outside the
   target 5,500–8,500 px² optical area at the baseline rule). */

/* MusicTech Germany — tall portrait mark (ratio 0.77). At baseline it would
   render ~49x64 = 3,136 px². Push height up so it reads at the same weight. */
.mte-member-card__logo img[src*="Logo-MusicTech-Germany"] {
  max-height: 76px;
  max-width: 60%;
}

/* Music Tech France — square mark (ratio 1.0). Lift slightly so the square
   doesn't read smaller than the wide marks next to it. */
.mte-member-card__logo img[src*="logo-MusicTechFrance"] {
  max-height: 72px;
  max-width: 50%;
}

/* Music Tech UK — near-square (ratio 0.96). Same treatment as France. */
.mte-member-card__logo img[src*="Music-Technology-UK"] {
  max-height: 72px;
  max-width: 50%;
}

/* M.E.S.O. — square mark (ratio 1.0). Same treatment as France. */
.mte-member-card__logo img[src*="MESO-Black"] {
  max-height: 72px;
  max-width: 50%;
}

/* Music Tech Netherlands — ultra-wide one-row lockup (ratio 5.91). Without
   a tighter cap it eats the whole card width; constrain it. */
.mte-member-card__logo img[src*="musictechnetherlands"] {
  max-height: 38px;
  max-width: 80%;
}
.mte-member-card__country {
  font-family: var(--mte-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mte-rust);
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.mte-member-card__name {
  font-family: var(--mte-display);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0 0 0.75rem;
  color: var(--mte-ink);
}
.mte-member-card__desc {
  font-family: var(--mte-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--mte-ink-2);
  margin: 0 0 0.75rem;
  flex: 1;
}
.mte-member-card__link {
  font-family: var(--mte-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--mte-ink) !important;
  text-decoration: none !important;
  background: none !important;
  padding: 0 !important;
  opacity: 0.85;
  transition: opacity 0.25s ease;
}
.mte-member-card__link:hover { opacity: 1; }

/* ============================================================
   BOARD PAGE
   ============================================================ */
.mte-board-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}
@media (max-width: 760px) {
  .mte-board-grid { grid-template-columns: 1fr; }
}
.mte-board-card {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.5rem;
  border: 1px solid var(--mte-line);
  background: var(--mte-cream);
}
.mte-board-card__photo,
.mte-board-card__photo-placeholder {
  width: 90px;
  height: 90px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--mte-ink);
  border-radius: 0;
}
.mte-board-card__photo-placeholder {
  background: var(--mte-line-strong);
  position: relative;
}
.mte-board-card__photo-placeholder::after {
  content: "···";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--mte-paper);
  font-size: 1.5rem;
  letter-spacing: 4px;
}
.mte-board-card__role {
  font-family: var(--mte-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mte-rust);
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.mte-board-card__detail {
  font-family: var(--mte-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--mte-ink);
  line-height: 1.3;
}
.mte-board-card__org {
  font-family: var(--mte-body);
  font-size: 0.85rem;
  color: var(--mte-mist);
  margin-top: 0.3rem;
}

/* ============================================================
   GENERAL ASSEMBLY LIST (Board page)
   ============================================================ */
.mte-assembly-list {
  list-style: none;
  margin: 1.5rem 0 3rem;
  padding: 0;
  border-top: 1px solid var(--mte-ink);
}
.mte-assembly-row {
  display: grid;
  grid-template-columns: 1.2fr 2fr 1.5fr;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--mte-line);
}
@media (max-width: 760px) {
  .mte-assembly-row { grid-template-columns: 1fr; gap: 0.25rem; }
}
.mte-assembly-row__country {
  font-family: var(--mte-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mte-rust);
  font-weight: 500;
}
.mte-assembly-row__org {
  font-family: var(--mte-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--mte-ink);
}
.mte-assembly-row__role {
  font-family: var(--mte-body);
  font-size: 0.95rem;
  color: var(--mte-ink-2);
}

/* ----------------------------------------------------------------
   BOARD PAGE — vertical rhythm
   Single hairline per section transition. The header's bottom
   border is the divider below the lede; the assembly list's last-
   row bottom border is the divider between assembly and the next
   section. The generic .mte-prose border-top is suppressed inside
   .mte-page-board so we never get stacked hairlines.
   ---------------------------------------------------------------- */
.mte-page-board .mte-article-header {
  padding-bottom: 5rem; /* ~5rem from lede to the header's bottom hairline */
}
.mte-page-board .mte-page-body__inner {
  padding-top: 3rem; /* ~3rem from header hairline to first heading */
}
.mte-page-board .mte-prose {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.mte-page-board .mte-prose h2 {
  margin-bottom: 1.25rem; /* heading -> body content */
}
.mte-page-board .mte-prose + .mte-prose {
  margin-top: 5rem; /* section -> section gap when two prose blocks are adjacent */
}
.mte-page-board .mte-assembly-list {
  margin: 1.5rem 0 5rem; /* row hairline -> next heading ~5rem */
}
.mte-page-board .mte-assembly-list + .mte-prose {
  margin-top: 0; /* assembly bottom hairline already provides the divider; 5rem comes from list margin-bottom */
}

/* ============================================================
   PROJECTS INDEX
   ============================================================ */
.mte-projects-list { list-style: none; padding: 0; margin: 0; }
.mte-project-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--mte-line);
}
.mte-project-row:first-child { border-top: none; padding-top: 0; }
@media (max-width: 760px) {
  .mte-project-row { grid-template-columns: 1fr; gap: 0.75rem; }
}
.mte-project-row__meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--mte-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mte-project-row__year {
  font-family: var(--mte-display);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 500;
  color: var(--mte-ink);
  letter-spacing: -0.01em;
  text-transform: none;
}
.mte-project-row__tag { color: var(--mte-ink); opacity: 0.6; }
.mte-project-row__status {
  display: inline-block;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--mte-line-strong);
  width: fit-content;
  font-size: 0.6rem;
  margin-top: 0.4rem;
}
.mte-project-row__status--live { background: var(--mte-ink); color: var(--mte-cream); border-color: var(--mte-ink); }
.mte-project-row__status--forthcoming { color: var(--mte-rust); border-color: var(--mte-rust); }
.mte-project-row__status--in-planning { color: var(--mte-ink); opacity: 0.6; }

.mte-project-row__name {
  font-family: var(--mte-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  color: var(--mte-ink);
}
.mte-project-row__name a {
  color: inherit;
  text-decoration: none;
  background: none !important;
  padding: 0 !important;
  transition: opacity 0.2s ease;
}
.mte-project-row__name a:hover { opacity: 0.65; }
.mte-project-row__desc {
  font-family: var(--mte-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--mte-ink-2);
  margin: 0;
  max-width: 60ch;
}

/* ============================================================
   PRESS CENTER (virtual page)
   ============================================================ */
.mte-page-press .mte-press-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--mte-line);
}
@media (max-width: 760px) { .mte-page-press .mte-press-contact { grid-template-columns: 1fr; gap: 2rem; } }
.mte-press-contact__label {
  font-family: var(--mte-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mte-rust);
  margin-bottom: 0.6rem;
  font-weight: 500;
}
.mte-press-contact__value {
  display: block;
  font-family: var(--mte-display);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
  color: var(--mte-ink) !important;
  background: none !important;
  text-decoration: none !important;
  padding: 0 !important;
  word-break: break-all;
}
.mte-press-contact__value:hover { color: var(--mte-rust) !important; }
.mte-press-contact__address {
  font-family: var(--mte-display);
  font-size: 1.2rem;
  font-style: normal;
  line-height: 1.4;
  color: var(--mte-ink);
  margin-bottom: 0.75rem;
}
.mte-press-contact__note {
  font-family: var(--mte-body);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--mte-ink-2);
}

.mte-press-section {
  margin-bottom: 3.5rem;
}
.mte-press-section__title {
  font-family: var(--mte-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.mte-press-section__copy {
  font-family: var(--mte-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--mte-ink);
  margin: 0 0 1.25rem;
  max-width: 65ch;
}
.mte-press-copy-btn {
  font-family: var(--mte-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  color: var(--mte-ink);
  border: 1px solid var(--mte-ink);
  padding: 0.65rem 1.2rem !important;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  min-height: 38px;
}
.mte-press-copy-btn:hover { background: var(--mte-ink); color: var(--mte-paper); }

.mte-press-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0;
}
@media (max-width: 760px) { .mte-press-facts { grid-template-columns: 1fr; } }
.mte-press-facts > div {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--mte-line);
}
.mte-press-facts > div:nth-child(-n+2) { border-top: none; }
@media (max-width: 760px) { .mte-press-facts > div:nth-child(2) { border-top: 1px solid var(--mte-line); } }
.mte-press-facts dt {
  font-family: var(--mte-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mte-ink-2);
  font-weight: 500;
  padding-top: 0.2rem;
}
.mte-press-facts dd {
  font-family: var(--mte-body);
  font-size: 1rem;
  color: var(--mte-ink);
  margin: 0;
}

.mte-press-logo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
@media (max-width: 760px) { .mte-press-logo-grid { grid-template-columns: 1fr; } }
.mte-press-logo {
  display: flex;
  flex-direction: column;
  background: none !important;
  text-decoration: none !important;
  padding: 0 !important;
  border: 1px solid var(--mte-line);
  transition: transform 0.3s var(--mte-ease-out), box-shadow 0.3s ease;
}
.mte-press-logo:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(10, 12, 30, 0.06);
}
.mte-press-logo__preview {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.mte-press-logo__preview--dark { background: var(--mte-ink); }
.mte-press-logo__preview--light { background: var(--mte-cream); }
.mte-press-logo__preview img { max-width: 100%; max-height: 100%; }
.mte-press-logo__meta {
  padding: 1rem 1.25rem;
  background: var(--mte-paper);
  border-top: 1px solid var(--mte-line);
}
.mte-press-logo__name {
  font-family: var(--mte-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mte-ink);
  font-weight: 500;
  margin-bottom: 0.3rem;
}
.mte-press-logo__format {
  font-family: var(--mte-body);
  font-size: 0.85rem;
  color: var(--mte-mist);
}

/* ============================================================
   APPLY (membership application) PAGE
   ============================================================ */
.mte-apply-steps {
  list-style: none;
  margin: 2rem 0 3rem;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
.mte-apply-steps > li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--mte-line);
}
.mte-apply-steps > li:first-child { border-top: 1px solid var(--mte-ink); }
.mte-apply-steps__num {
  font-family: var(--mte-display);
  font-size: 2rem;
  font-style: italic;
  font-weight: 500;
  color: var(--mte-ink);
  line-height: 1;
}
.mte-apply-steps__body h3 {
  font-family: var(--mte-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  letter-spacing: -0.015em;
}
.mte-apply-steps__body p {
  font-family: var(--mte-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--mte-ink-2);
  margin: 0;
}

.mte-apply-form {
  background: var(--mte-cream);
  padding: 2.5rem;
  margin-top: 3rem;
  border: 1px solid var(--mte-line);
}
.mte-apply-form__title {
  font-family: var(--mte-display);
  font-size: clamp(1.75rem, 2.8vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0 0 1.75rem;
}
.mte-apply-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 600px) { .mte-apply-form__row { grid-template-columns: 1fr; gap: 0 ; } }
.mte-apply-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}
.mte-apply-form__field label {
  font-family: var(--mte-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mte-ink);
  opacity: 0.7;
  font-weight: 500;
}
.mte-apply-form__field input,
.mte-apply-form__field textarea {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--mte-line-strong) !important;
  padding: 0.7rem 0 !important;
  font-family: var(--mte-body) !important;
  font-size: 1rem !important;
  color: var(--mte-ink) !important;
  border-radius: 0 !important;
  width: 100%;
}
.mte-apply-form__field input:focus,
.mte-apply-form__field textarea:focus {
  outline: 2px solid var(--mte-ink) !important;
  outline-offset: 4px !important;
  border-bottom-color: var(--mte-ink) !important;
}
.mte-apply-form__field textarea { resize: vertical; min-height: 120px; }
.mte-apply-form__submit {
  margin-top: 1.5rem;
  background: var(--mte-ink);
  color: var(--mte-cream);
  font-family: var(--mte-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--mte-ink);
  padding: 1.1rem 2rem !important;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  min-height: 48px;
}
.mte-apply-form__submit:hover {
  background: var(--mte-cream);
  color: var(--mte-ink);
}
.mte-apply-form__submit:disabled { opacity: 0.6; cursor: default; }
.mte-apply-form__status {
  margin-top: 1rem;
  font-family: var(--mte-body);
  font-size: 0.95rem;
}

/* ============================================================
   PRESS RELEASES LIST
   ============================================================ */
.mte-releases-list { list-style: none; padding: 0; margin: 0; }
.mte-release-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 2rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--mte-line);
}
.mte-release-row:first-child { border-top: none; padding-top: 0; }
@media (max-width: 760px) {
  .mte-release-row { grid-template-columns: 1fr; gap: 0.5rem; }
}
.mte-release-row__date {
  font-family: var(--mte-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mte-rust);
  font-weight: 500;
  padding-top: 0.25rem;
}
.mte-release-row__title {
  font-family: var(--mte-display);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}
.mte-release-row__desc {
  font-family: var(--mte-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--mte-ink-2);
  margin: 0 0 1rem;
}
.mte-release-row__pdf {
  font-family: var(--mte-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none !important;
  background: none !important;
  padding: 0.6rem 1.2rem !important;
  border: 1px solid var(--mte-ink);
  display: inline-block;
  color: var(--mte-ink) !important;
  transition: background 0.2s ease, color 0.2s ease;
}
.mte-release-row__pdf:hover {
  background: var(--mte-ink);
  color: var(--mte-cream) !important;
}

/* ============================================================
   NEWS ARCHIVE: year markers + date stamps
   ============================================================ */
.mte-news-year {
  font-family: var(--mte-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.025em;
  color: var(--mte-ink);
  opacity: 0.6;
  margin: 3rem 0 1rem;
  padding-bottom: 0.5rem;
  line-height: 1;
}
.mte-news-date {
  font-family: var(--mte-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mte-rust);
  font-weight: 500;
  margin-bottom: 0.5rem;
  opacity: 0.9;
}

/* ============================================================
   NEWSLETTER MODAL
   ============================================================ */
.mte-modal {
  position: fixed;
  inset: 0;
  z-index: 99000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mte-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mte-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 30, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mte-modal__panel {
  position: relative;
  z-index: 2;
  background: var(--mte-paper);
  width: 480px;
  max-width: calc(100vw - 2rem);
  padding: 3rem 2.5rem 2.5rem;
  transform: translateY(20px);
  transition: transform 0.4s var(--mte-ease-out);
  border: 1px solid var(--mte-line-strong);
}
.mte-modal.is-open .mte-modal__panel { transform: translateY(0); }
.mte-modal__close {
  position: absolute;
  top: 12px; right: 16px;
  width: 32px; height: 32px;
  background: none;
  border: none;
  font-size: 1.4rem;
  font-family: var(--mte-body);
  line-height: 1;
  color: var(--mte-ink);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  padding: 0 !important;
}
.mte-modal__close:hover { opacity: 1; background: none !important; }
.mte-modal__eyebrow {
  font-family: var(--mte-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mte-rust);
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.mte-modal__title {
  font-family: var(--mte-display) !important;
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 0.75rem !important;
  color: var(--mte-ink) !important;
}
.mte-modal__lede {
  font-family: var(--mte-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--mte-ink-2);
  margin: 0 0 1.75rem;
}
.mte-modal__form { display: flex; flex-direction: column; gap: 1rem; }
.mte-modal__field { display: flex; flex-direction: column; gap: 0.4rem; }
.mte-modal__field label {
  font-family: var(--mte-mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mte-ink);
  opacity: 0.6;
  font-weight: 500;
}
.mte-modal__field input {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--mte-line-strong) !important;
  padding: 0.7rem 0 !important;
  font-family: var(--mte-body) !important;
  font-size: 1rem !important;
  color: var(--mte-ink) !important;
  width: 100%;
  border-radius: 0 !important;
}
.mte-modal__field input:focus {
  outline: none;
  border-bottom-color: var(--mte-ink) !important;
}
.mte-modal__consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-family: var(--mte-body);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--mte-ink);
  margin-top: 0.25rem;
  cursor: pointer;
}
.mte-modal__consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--mte-ink);
}
.mte-modal__consent a { color: var(--mte-ink); }
.mte-modal__form button {
  margin-top: 0.75rem;
  background: var(--mte-ink);
  color: var(--mte-cream);
  font-family: var(--mte-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--mte-ink);
  padding: 1rem 1.5rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  min-height: 44px;
}
.mte-modal__form button:disabled { opacity: 0.7; cursor: default; }
.mte-modal__form button:hover {
  background: var(--mte-cream);
  color: var(--mte-ink);
}
.mte-modal__legal {
  font-family: var(--mte-body);
  font-size: 0.75rem;
  color: var(--mte-mist);
  margin: 0.75rem 0 0;
  line-height: 1.45;
}
.mte-modal__legal a { color: var(--mte-ink); }

/* ============================================================
   ACTIVITY ICON ENHANCEMENT — drop the stock Brizy icons,
   show numbered cards instead for a more editorial feel.
   This is layered ON TOP of Brizy's existing icons.
   ============================================================ */
.mte-section--dark .brz-icon__container {
  /* Calmer icon presentation: smaller, less colorful */
  padding: 0 !important;
}
.mte-section--dark .brz-icon-svg {
  /* Make icons quieter — opacity rather than yellow tint */
  opacity: 0.8 !important;
}

/* ============================================================
   PULL QUOTE — kept but subtler
   ============================================================ */
.mte-pullquote {
  font-family: var(--mte-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.4rem, 2.2vw, 2rem) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.012em !important;
  color: var(--mte-ink) !important;
  border-left: 2px solid var(--mte-ink) !important;
  padding-left: 1.4rem !important;
  margin: 2rem 0 !important;
  position: relative;
  opacity: 0.9;
}
.mte-pullquote::before { content: none; }

/* ============================================================
   SELECTION + SCROLLBAR
   ============================================================ */
::selection { background: var(--mte-ink); color: var(--mte-paper); }
::-moz-selection { background: var(--mte-ink); color: var(--mte-paper); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--mte-paper); }
::-webkit-scrollbar-thumb { background: var(--mte-line-strong); border: 2px solid var(--mte-paper); }
::-webkit-scrollbar-thumb:hover { background: var(--mte-ink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
  .brz [class*="brz-tp-lg-heading1"] {
    font-size: clamp(2.5rem, 11vw, 4.5rem) !important;
  }
  .brz [class*="brz-tp-lg-heading2"] {
    font-size: clamp(1.8rem, 8vw, 3rem) !important;
  }
  .mte-marquee__item { font-size: 0.95rem; }
  .mte-colophon__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .mte-colophon { padding: 4rem 6vw 2rem; }
  .mte-colophon__base {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
}

@media (max-width: 600px) {
  .brz [class*="brz-tp-lg-heading1"] {
    font-size: clamp(2.2rem, 13vw, 3.5rem) !important;
    letter-spacing: -0.025em !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .mte-marquee__track { animation: none; }
}

/* --- Home Members row 2 — repack to 6 columns when MTN is injected --- */
/* The base Brizy row has 5 columns @ max-width:20%. When we append a 6th
   column for Music Technology Norway at runtime, repack all 6 onto one
   line at ~16.66% width so the grid stays visually balanced.            */
.brz-section#Members .brz-row--inner[data-mte-mtn-row="1"] > .brz-columns {
  max-width: 16.6666% !important;
  flex-basis: 16.6666% !important;
}
@media (max-width: 991px) {
  /* Brizy collapses to its own breakpoints below desktop; allow natural
     wrapping (2 or 3 per row) by releasing the override.                */
  .brz-section#Members .brz-row--inner[data-mte-mtn-row="1"] > .brz-columns {
    max-width: 50% !important;
    flex-basis: 50% !important;
  }
}

/* ============================================================
   KILL SECTION-BOUNDARY HAIRLINES NEAR DARK SECTIONS
   ============================================================
   .mte-eq-divider is a deliberate 1px hairline placed between
   every Brizy section. Its ::after paints rgba(10,12,30,0.10) —
   a "quiet rule" intended to read on LIGHT sections. Because the
   divider sits OUTSIDE any section (directly in the cream root
   container), between two dark sections it renders as a
   cream-on-dark sliver (the white-line bug below the home CTA
   strip). Fix: collapse the divider whenever either adjacent
   section is dark; only keep it where both sides are light.
   ============================================================ */
.mte-eq-divider:has(+ .mte-section--dark),
.mte-section--dark + .mte-eq-divider {
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  background: transparent !important;
}
.mte-eq-divider:has(+ .mte-section--dark)::after,
.mte-section--dark + .mte-eq-divider::after {
  content: none !important;
  display: none !important;
}

/* ============================================================
   QA P1 VISUAL FIXES (2026-05-21)
   ============================================================
   Four targeted fixes deployed via QA marathon. Each block is
   self-contained so it can be diff-reviewed in isolation. Do
   not interleave with unrelated rules.
   ============================================================ */

/* --- 1. Partner logos: subtle backdrop card on TABLET only.
   On 481–991px viewports the partner logos render as pale/white
   marks on cream paper and visually disappear. A faint ink-tinted
   card behind each logo restores affordance without touching
   desktop or mobile. Scoped to #Partners; the audit hint
   `section.brz-css-hhnpwz` actually pointed at a dark section,
   so we use the stable section id instead.                       */
@media (min-width: 481px) and (max-width: 991px) {
  #Partners .brz-image,
  #Partners .brz-image__wrapper,
  #Partners .brz-img.lazyload {
    background: rgba(10, 12, 30, 0.06) !important;
    border-radius: 8px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }
  /* Nested .brz-img inside an already-padded wrapper would
     double the pad. Only the outermost picture wrapper gets the
     card; reset inner img-level paint. */
  #Partners .brz-image .brz-img.lazyload {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
}

/* --- 2. VALUE PROPOSITION ↔ MEMBERS rhythm on tablet.
   On 768px the Mission (VALUE PROPOSITION) section sits flush
   against the Members heading because Brizy's section padding
   collapses on tablet. Restore vertical rhythm by adding the
   missing breathing room to the Members section heading wrapper
   and giving Mission a touch of bottom padding.                  */
@media (min-width: 481px) and (max-width: 991px) {
  .brz-section#Members {
    padding-top: 5rem !important;
  }
  .brz-section#Mission {
    padding-bottom: 4rem !important;
  }
  /* Ensure any eq-divider between them is visible — restore the
     hairline if it was collapsed (both are light sections so the
     dark-collapse rule above does not apply, but be defensive). */
  .brz-section#Mission + .mte-eq-divider {
    height: 1px !important;
    margin: 0 !important;
  }
}

/* --- 3. Contact form input borders: lift alpha from 0.14 to 0.45
   and use signal-yellow on focus (a11y visible focus + brand).
   Scoped to dark sections AND forminator (the actual form library
   on this site is Forminator, not raw <form>).                   */
.mte-section--dark form input[type="text"],
.mte-section--dark form input[type="email"],
.mte-section--dark form input[type="tel"],
.mte-section--dark form textarea,
.mte-section--dark .forminator-input,
.mte-section--dark .forminator-textarea,
.brz-section.mte-section--dark form input[type="text"],
.brz-section.mte-section--dark form input[type="email"],
.brz-section.mte-section--dark form textarea {
  border-bottom: 1px solid rgba(243, 239, 228, 0.45) !important;
  background: transparent !important;
  color: var(--mte-cream) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.mte-section--dark form input[type="text"]:focus,
.mte-section--dark form input[type="email"]:focus,
.mte-section--dark form input[type="tel"]:focus,
.mte-section--dark form textarea:focus,
.mte-section--dark .forminator-input:focus,
.mte-section--dark .forminator-textarea:focus,
.brz-section.mte-section--dark form input:focus,
.brz-section.mte-section--dark form textarea:focus {
  border-bottom-color: var(--mte-signal) !important;
  outline: 2px solid transparent !important;
  outline-offset: 4px !important;
  box-shadow: 0 1px 0 0 var(--mte-signal) !important;
}

/* --- 4. Mobile: 44×44 minimum hit area for ALL interactives.
   Strategy: small icon links (`.brz-a` inside icon containers,
   footer/colophon text links, mobile dropdown) get an invisible
   hit-area expansion via ::before with negative inset. Visual
   layout is untouched. The home CTA strip and unified nav already
   set their own min-height: 44px (lines 1133, 1189) so the
   :not() exclusions prevent double-shadowing.                   */
@media (max-width: 768px) {
  a:not(.mte-home-cta-strip__primary):not(.mte-home-cta-strip__secondary),
  button,
  input[type="button"],
  input[type="submit"],
  [role="button"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    position: relative;
  }
  /* Restore default block/inline behavior for elements that must
     remain inline-flow text (article body links). */
  .brz-rich-text a,
  .mte-page-lede a,
  .mte-rich-prose a {
    display: inline;
    min-height: 0;
  }
  /* Transparent hit-area expansion for the tiny icon and footer
     links. ::before sits behind the visible label, captures taps,
     and never changes layout (the parent is position: relative). */
  a.brz-a::before,
  .mte-colophon__columns a::before,
  .mte-colophon__list a::before,
  .mte-colophon__base a::before,
  .mte-fallback-nav__links a::before,
  .mte-newsletter-trigger::before {
    content: "";
    position: absolute;
    inset: -13px -8px;
    background: transparent;
    z-index: 1;
  }
  /* Brizy popup close button — make tappable. */
  .brz-popup2__close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================================
 * v5.2 MOBILE UI/UX PASS
 *
 * Six bug classes addressed:
 *   1. Brizy text-align:justify on mobile → ugly word gaps. Disable below 768px.
 *   2. <a class="is-empty"> wrapping body paragraphs (Brizy quirk) — paints a
 *      faux gradient "underline" and inherits the wrong color. Strip it.
 *   3. .mte-res-grid: `1fr` track expands beyond container when card content
 *      has long unbreakable strings → 519px grid inside 335px viewport. Use
 *      minmax(0,1fr) so 1fr can shrink below min-content.
 *   4. .mte-res-card forced display:flex on mobile via cascade — restore block
 *      so internal layout flows top-to-bottom on narrow viewports.
 *   5. Brizy Forminator contact form: input field text + borders too low-
 *      contrast on cream background. Bump contrast on mobile.
 *   6. Footer wordmark logo can overlap link columns on the narrowest
 *      viewports — center it and give it its own row at <520px.
 * ========================================================================== */
@media (max-width: 768px) {
  /* (1) Kill Brizy's `text-align: justify` on small screens.
   *     Brizy emits .brz-text-xs-justify on rich-text blocks at the XS
   *     breakpoint; that creates river-wide word gaps when lines are short.
   *     Left-align is the standard mobile-readability baseline. */
  body.mte-preview-mode [class*="brz-text-xs-justify"],
  body.mte-preview-mode .brz-rich-text [class*="brz-text-lg-justify"],
  body.mte-preview-mode .brz-rich-text p[style*="text-align: justify"],
  body.mte-preview-mode .brz-rich-text h1[style*="text-align: justify"],
  body.mte-preview-mode .brz-rich-text h2[style*="text-align: justify"],
  body.mte-preview-mode .brz-rich-text h3[style*="text-align: justify"],
  body.mte-preview-mode .brz-rich-text h4[style*="text-align: justify"] {
    text-align: left !important;
    text-justify: none !important;
    word-spacing: normal !important;
  }

  /* (2) Defang <a class="is-empty"> when Brizy uses it to wrap entire
   *     paragraphs (it shouldn't, but Brizy does). The faux background
   *     gradient becomes a fake underline that smears across multiple
   *     wrapped lines; the inherited color may differ from the body color.
   *     Restore the parent's natural text style. */
  body.mte-preview-mode .brz-rich-text a.is-empty {
    background-image: none !important;
    background: transparent !important;
    text-decoration: none !important;
    color: inherit !important;
  }
  /* And the deeper edge case: Brizy sometimes nests <a class="is-empty">
   *  around <span> chunks with their own background-image underlines. */
  body.mte-preview-mode .brz-rich-text a.is-empty span,
  body.mte-preview-mode .brz-rich-text a.is-empty * {
    background-image: none !important;
    color: inherit !important;
  }
}

/* (3) Resources grid track must shrink below min-content. The `1fr` shorthand
 *     resolves to minmax(auto, 1fr) which respects min-content, so a long
 *     unbreakable URL or title can blow the grid past its container. Switch
 *     to minmax(0, 1fr) to force shrink. Applies at all viewports — desktop
 *     is unaffected since content fits anyway. */
.mte-res-grid {
  grid-template-columns: minmax(0, 1fr);
}

/* (4) .mte-res-card sometimes computes display:flex from the cascade. On
 *     mobile we explicitly want block so .meta / .title / .desc / .topic
 *     stack predictably; ensure the inline children wrap naturally. */
@media (max-width: 768px) {
  .mte-res-card,
  body.mte-preview-mode .mte-res-card {
    display: block !important;
    min-width: 0;
  }
  .mte-res-card__title,
  .mte-res-card__desc,
  .mte-res-card__topic {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }
  /* Tighten meta row so DATE · SOURCE doesn't wrap awkwardly */
  .mte-res-card__meta {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }
}

/* (5) Brizy Forminator contact form on mobile — bump contrast so fields
 *     are unmissable on the cream background. Keeps the desktop styling
 *     untouched. */
@media (max-width: 768px) {
  body.mte-preview-mode .forminator-ui input[type="text"],
  body.mte-preview-mode .forminator-ui input[type="email"],
  body.mte-preview-mode .forminator-ui input[type="tel"],
  body.mte-preview-mode .forminator-ui input[type="url"],
  body.mte-preview-mode .forminator-ui textarea,
  body.mte-preview-mode .forminator-ui select,
  body.mte-preview-mode .forminator-input input,
  body.mte-preview-mode .forminator-textarea textarea {
    background: #ffffff !important;
    border: 1px solid rgba(10, 12, 30, 0.35) !important;
    color: var(--mte-ink) !important;
    -webkit-text-fill-color: var(--mte-ink) !important;
  }
  body.mte-preview-mode .forminator-ui input::placeholder,
  body.mte-preview-mode .forminator-ui textarea::placeholder {
    color: rgba(10, 12, 30, 0.5) !important;
    opacity: 1;
  }
  body.mte-preview-mode .forminator-ui .forminator-label,
  body.mte-preview-mode .forminator-ui label {
    color: var(--mte-ink) !important;
    font-weight: 500;
  }
}

/* (6) Footer wordmark logo: center under the columns on the narrowest
 *     viewports rather than overlapping. Only kicks in below 520px so the
 *     desktop right-aligned look is preserved. */
@media (max-width: 520px) {
  .mte-site-footer__brand,
  .mte-site-footer__logo,
  .mte-footer__brand-logo,
  .mte-site-footer img[alt*="Music Tech Europe"],
  .mte-site-footer img[alt*="MTE"] {
    position: static !important;
    float: none !important;
    margin: 1.5rem auto 0 !important;
    display: block !important;
    max-width: 200px !important;
    height: auto !important;
  }
  .mte-site-footer {
    text-align: left;
  }
}

/* (7) News article: suppress the duplicate title that comes from the legacy
 *     Brizy article-header block. We render our own .mte-article-title in
 *     the cream header band; the Brizy embedded body sometimes repeats the
 *     post title as an <h1> at the top of its rich-text. Hide that on mobile
 *     to avoid the triple-title stack. We only target H1s that match the
 *     post title via [data-mte-dupe-title="hide"] which the JS adds. */
@media (max-width: 768px) {
  body.mte-preview-mode .mte-article-body > .brz-section:first-child .brz-rich-text h1:first-child,
  body.mte-preview-mode .mte-article-body [data-mte-dupe-title="hide"] {
    display: none !important;
  }
}

/* (8) Catch-all overflow guard: prevent any rogue child from forcing
 *     horizontal scroll on the body. Brizy frequently emits elements with
 *     hardcoded widths that overflow on mobile; clipping at body level is
 *     the last line of defence. */
@media (max-width: 768px) {
  body.mte-preview-mode {
    overflow-x: hidden;
  }
  body.mte-preview-mode img,
  body.mte-preview-mode video,
  body.mte-preview-mode iframe {
    max-width: 100%;
    height: auto;
  }
}

/* ============================================================================
 * v5.3 — QA wave fixes (responsive + a11y + perf)
 *
 * Findings synthesised from 4 parallel QA agents (perf / responsive / a11y /
 * functional). Headline issues addressed below; each block explains the
 * source of truth and the fix's blast radius.
 * ========================================================================== */

/* (1) Triple article H1 — duplicate-title stack on single news posts.
 *     Two sources were emitting <h1 class="mte-article-title">:
 *       a) mte_page_news_article() in mte-pages.php (the virtual-page header)
 *       b) the wp_footer JS injection in mte-seo-aeo.php (now removed)
 *     And the Brizy editorial post body sometimes adds a third <h1> with the
 *     same title text. Source (a) is now the single H1 we render server-side;
 *     this rule hides any duplicate H1 inside the article body. It's keyed
 *     loosely (any H1 inside .mte-article-body__inner) because editors put
 *     it inside spans / multiple wrappers — hard to target precisely. */
.mte-article-body__inner h1,
.mte-article-body__inner .brz-rich-text h1 {
    display: none !important;
}

/* Brizy editorial bodies often repeat the post title as an H2 (e.g.
 * "The Official Launch of Music Tech Europe" rendered in a 54px heading
 * at the top of the post body). Hide brz-section children that the
 * runtime hider flagged as containing a duplicate title — set by the JS
 * `hideDuplicateBrizyTitle` function which matches H1/H2 text against the
 * canonical .mte-article-title text and tags the closest <section>. */
.mte-article-body__inner .brz-section[data-mte-dupe-title-section="1"] {
    display: none !important;
}

/* (2) Home @ 320px: CTA-strip facts row clips the 4th item.
 *     `.mte-home-cta-strip__facts` is a flex row with gap: 2.5rem — at the
 *     iPhone-SE/Galaxy-Fold-cover width of 320px, 4 facts + gaps blow past
 *     the viewport. Convert to a 2x2 grid below 360px so all four facts
 *     stay visible. */
@media (max-width: 360px) {
    .mte-home-cta-strip__facts {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem 1.25rem;
    }
}

/* (3) Academy projects card contrast (axe-core: 1.86-1.96:1 on home).
 *     The original .mte-project-row painted cream text on a near-white
 *     background — fails WCAG AA. Earlier v5.3 attempt flipped it to
 *     cream-on-navy which passes AA at ~14:1 but looks like a foreign
 *     modal floating on a cream page (per user feedback "buggy").
 *
 *     Better: keep the light card aesthetic and put DARK text on it.
 *     ink (#0a0c1e) on cream (#f3efe4) = ~17:1 contrast — solid AAA.
 *     Add a subtle border + ink-2 accent for visual depth. */
.mte-project-row,
.mte-projects-list .mte-project-row {
    background-color: var(--mte-cream) !important;
    color: var(--mte-ink) !important;
    border: 1px solid var(--mte-line-strong);
    box-shadow: 0 1px 0 rgba(10, 12, 30, 0.04);
}
.mte-project-row .mte-project-row__name,
.mte-project-row a.mte-project-row__name,
.mte-project-row h2,
.mte-project-row h3 {
    color: var(--mte-ink) !important;
}
.mte-project-row .mte-project-row__desc,
.mte-project-row p {
    color: var(--mte-ink-2) !important;
}
.mte-project-row .mte-project-row__status,
.mte-project-row .mte-project-row__year,
.mte-project-row .mte-project-row__meta {
    color: var(--mte-ink-2) !important;
    opacity: 0.7;
}

/* (4) .mte-article-cat chip contrast (axe-core: 2.55:1 on 6/9 pages).
 *     The orange/rust chip wasn't passing AA. Bump font-weight + opacity so
 *     the rust hue (#b54218 on cream) clears 4.5:1. */
.mte-article-cat {
    color: var(--mte-rust) !important;
    opacity: 1 !important;
    font-weight: 600 !important;
}

/* (5) Resources card meta contrast (axe-core: 45 violations from .65 opacity
 *     on dark text). Tighten to .8 opacity floor — preserves the subtle
 *     hierarchy without sliding below AA. */
.mte-res-card__meta,
.mte-res-card__topic {
    opacity: 0.85 !important;
}

/* (6) Article hero duplicate "navy-on-navy" rendering (a11y agent: 1.46:1
 *     contrast). This was the same source as (1) — Brizy embedded post
 *     content was rendering a second title in dark navy on a dark navy
 *     background. (1) already hides that inside .mte-article-body__inner.
 *     This is a belt-and-braces rule covering Brizy's own .brz-section that
 *     might sit above the body container. */
.mte-page-article .brz-section h1,
.mte-page-article .brz-section h1 span {
    color: var(--mte-cream);
}

/* (7) Two-empty-H3/H4 placeholders on home (a11y agent: Brizy swiper
 *     template emits empty heading shells). Hide empty headings everywhere
 *     in preview so screen readers don't announce silent stops. */
body.mte-preview-mode .brz-rich-text h1:empty,
body.mte-preview-mode .brz-rich-text h2:empty,
body.mte-preview-mode .brz-rich-text h3:empty,
body.mte-preview-mode .brz-rich-text h4:empty,
body.mte-preview-mode .brz-rich-text h5:empty,
body.mte-preview-mode .brz-rich-text h6:empty {
    display: none !important;
}

/* ============================================================================
 * v5.3 — Projects page restructure (Featured + Work Areas + Recent)
 *
 * The single-project layout was sparse. The new layout has 3 sections:
 *   1. Featured project (big card)
 *   2. Work areas (6-card grid based on statutes §3 activity areas)
 *   3. Recent activities (timeline of news posts)
 * ========================================================================== */

/* (1) Featured Project hero card */
.mte-projects-featured {
    margin: 2.5rem 0 4rem;
}
.mte-projects-featured__label {
    font-family: var(--mte-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mte-ink-2);
    opacity: 0.6;
    margin-bottom: 0.85rem;
}
.mte-projects-featured__card {
    background: var(--mte-cream);
    border: 1px solid var(--mte-line-strong);
    border-left: 4px solid var(--mte-rust);
    padding: 2.5rem 2.5rem 2.25rem;
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(10, 12, 30, 0.04);
}
.mte-projects-featured__meta {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-family: var(--mte-mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mte-ink-2);
    margin-bottom: 1rem;
}
.mte-projects-featured__year { font-weight: 600; }
.mte-projects-featured__tag { opacity: 0.65; }
.mte-projects-featured__status {
    margin-left: auto;
    padding: 0.3rem 0.7rem;
    background: var(--mte-signal);
    color: var(--mte-ink);
    font-weight: 600;
    border-radius: 2px;
}
.mte-projects-featured__name {
    font-family: var(--mte-display);
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
    color: var(--mte-ink);
}
.mte-projects-featured__name a {
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.25s var(--mte-ease-out);
}
.mte-projects-featured__name a:hover {
    border-bottom-color: var(--mte-rust);
}
.mte-projects-featured__desc {
    font-family: var(--mte-body);
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--mte-ink-2);
    margin: 0;
    max-width: 70ch;
}

/* (2) Work areas section header */
.mte-projects-section {
    margin: 4rem 0 2rem;
}
.mte-projects-section__title {
    font-family: var(--mte-display);
    font-size: clamp(1.4rem, 2vw, 1.85rem);
    font-weight: 600;
    letter-spacing: -0.018em;
    color: var(--mte-ink);
    margin: 0 0 0.5rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--mte-line);
}
.mte-projects-section__intro {
    font-family: var(--mte-body);
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--mte-ink-2);
    opacity: 0.75;
    margin: 0 0 2rem;
    max-width: 70ch;
}

/* (3) Work areas grid — 6 cards in a responsive 3-col / 2-col / 1-col grid */
.mte-work-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}
@media (max-width: 900px) {
    .mte-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .mte-work-grid { grid-template-columns: 1fr; }
}
.mte-work-card {
    background: var(--mte-cream);
    border: 1px solid var(--mte-line);
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    transition: border-color 0.25s var(--mte-ease-out), transform 0.25s var(--mte-ease-out);
}
.mte-work-card:hover {
    border-color: var(--mte-ink-2);
    transform: translateY(-2px);
}
.mte-work-card__icon {
    width: 26px;
    height: 26px;
    color: var(--mte-rust);
    margin-bottom: 0.9rem;
}
.mte-work-card__title {
    font-family: var(--mte-display);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: var(--mte-ink);
    margin: 0 0 0.55rem;
}
.mte-work-card__desc {
    font-family: var(--mte-body);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--mte-ink-2);
    margin: 0 0 1rem;
    flex-grow: 1;
}
.mte-work-card__evidence {
    font-family: var(--mte-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mte-rust);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    align-self: flex-start;
    transition: opacity 0.2s ease;
}
.mte-work-card__evidence:hover { opacity: 0.7; }

/* (4) Recent activities list — date column + clickable title */
.mte-activities-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mte-activity-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 1.25rem;
    align-items: baseline;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--mte-line);
}
.mte-activity-row:last-child { border-bottom: none; }
.mte-activity-row__date {
    font-family: var(--mte-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mte-ink-2);
    opacity: 0.75;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.mte-activity-row__month { font-weight: 600; }
.mte-activity-row__year { opacity: 0.65; }
.mte-activity-row__link {
    font-family: var(--mte-display);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.3;
    color: var(--mte-ink);
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s var(--mte-ease-out);
}
.mte-activity-row__link:hover {
    border-bottom-color: var(--mte-rust);
}
.mte-activity-row__arrow {
    color: var(--mte-rust);
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.mte-activity-row__link:hover .mte-activity-row__arrow {
    opacity: 1;
    transform: translateX(2px);
}

@media (max-width: 520px) {
    .mte-activity-row {
        grid-template-columns: 70px 1fr;
        gap: 0.85rem;
        padding: 0.9rem 0;
    }
    .mte-projects-featured__card { padding: 1.5rem 1.25rem; }
}