/* ==========================================================================
   EMM Frames 2.0 — design system (child theme)
   1. Fonts            5. Buttons & links     9. Homepage sections
   2. Tokens           6. Header             10. Work grid
   3. Colour worlds    7. Mobile menu        11. Utilities & motion
   4. Base & Divi      8. Footer
   Brand colours read Divi 5 global colours first (single source of truth),
   with the source-file hex values as fallback.
   ========================================================================== */

/* 1. Fonts — self-hosted, OFL. No requests to Google. ===================== */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2-variations"), url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2-variations"), url("../fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* 2. Tokens =============================================================== */
:root {
  /* Brand (source logo files) */
  --emm-dark: var(--gcid-emm-dark, #231f20);
  --emm-white: var(--gcid-emm-white, #ffffff);
  --emm-blue: var(--gcid-emm-blue, #4d5ba8);
  --emm-lime: var(--gcid-emm-lime, #e3e431);
  --emm-orange: var(--gcid-emm-orange, #f04c29);

  /* Functional neutrals (derived from EMM Dark, not brand colours) */
  --emm-dark-2: #2d292a;
  --emm-line-dark: #3d3839;
  --emm-mute-dark: #a39e9f;   /* 6.2:1 on dark */
  --emm-mute: #6b6566;        /* 5.7:1 on white */
  --emm-line: #e4e1e1;
  --emm-paper-2: #f4f3f3;

  /* Type */
  --emm-font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --emm-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --emm-fs-display: clamp(2.75rem, 0.6rem + 9.6vw, 11rem);
  --emm-fs-h1: clamp(2.5rem, 1.2rem + 5.2vw, 6rem);
  --emm-fs-h2: clamp(2rem, 1.2rem + 3.2vw, 4rem);
  --emm-fs-h3: clamp(1.375rem, 1.1rem + 1.1vw, 2.25rem);
  --emm-fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --emm-fs-body: 1.0625rem;
  --emm-fs-small: 0.875rem;
  --emm-fs-label: 0.75rem;
  --emm-lh-body: 1.6;

  /* Space (4px base) */
  --emm-space-1: 0.25rem;
  --emm-space-2: 0.5rem;
  --emm-space-3: 0.75rem;
  --emm-space-4: 1rem;
  --emm-space-5: 1.5rem;
  --emm-space-6: 2rem;
  --emm-space-7: 3rem;
  --emm-space-8: 4rem;
  --emm-space-9: 6rem;
  --emm-space-10: 8rem;
  --emm-section-y: clamp(4.5rem, 2rem + 6.5vw, 8.5rem);

  /* Grid */
  --emm-max: 100rem;                                   /* 1600px */
  --emm-gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);  /* page side margin */
  --emm-grid-gap: clamp(1rem, 0.6rem + 1vw, 1.5rem);
  --emm-measure: 64ch;

  /* Shape & motion */
  --emm-radius: 0;
  --emm-ease: cubic-bezier(0.2, 0.7, 0, 1);
  --emm-dur-ui: 160ms;
  --emm-dur-panel: 320ms;
  --emm-header-h: 4.75rem;

  /* Surface defaults (light) */
  --emm-bg: var(--emm-white);
  --emm-fg: var(--emm-dark);
  --emm-muted: var(--emm-mute);
  --emm-rule: var(--emm-line);
  --emm-focus: var(--emm-blue);
}

/* 3. Colour worlds ======================================================== */
/* --emm-world: accent · --emm-on-world: text on an accent field ·
   --emm-square: the logo square · hover tokens follow the contrast rules. */
:root,
.emm-world--neutral,
.emm-world--brand {
  --emm-world: var(--emm-blue);
  --emm-on-world: var(--emm-white);
  --emm-square: var(--emm-blue);
  --emm-hover-bg: var(--emm-blue);
  --emm-hover-fg: var(--emm-white);
  --emm-hover-sub: var(--emm-white);
  --emm-hover-rule: var(--emm-blue);
  --emm-accent-rule: var(--emm-blue);
  --emm-panel-bg: var(--emm-blue);   /* Diensten panel (dark ground): column fill on hover/focus/current */
  --emm-panel-fg: var(--emm-white);  /* 6.2:1 */
  --emm-panel-sub: var(--emm-white);
  --emm-panel-sq: var(--emm-white);
}
.emm-world--digital {
  --emm-world: var(--emm-lime);
  --emm-on-world: var(--emm-dark);
  --emm-square: var(--emm-lime);
  --emm-hover-bg: var(--emm-lime);
  --emm-hover-fg: var(--emm-dark);
  --emm-hover-sub: var(--emm-dark);
  --emm-hover-rule: var(--emm-lime);
  --emm-accent-rule: var(--emm-dark); /* lime is invisible as a line on white */
  --emm-panel-bg: var(--emm-lime);
  --emm-panel-fg: var(--emm-dark);   /* 12:1 */
  --emm-panel-sub: var(--emm-dark);
  --emm-panel-sq: var(--emm-dark);
}
/* Orange carries only large text (dark 4.48:1), so the hover uses the
   dark cinema ground with orange as the large accent. */
.emm-world--content {
  --emm-world: var(--emm-orange);
  --emm-on-world: var(--emm-dark);
  --emm-square: var(--emm-orange);
  --emm-hover-bg: var(--emm-dark);
  --emm-hover-fg: var(--emm-orange);
  --emm-hover-sub: var(--emm-white);
  --emm-hover-rule: var(--emm-orange);
  --emm-accent-rule: var(--emm-orange);
  /* Panel: an orange fill needs black text: EMM Dark is 4.48:1 (fails AA for the small description),
     black is 5.8:1; white would be 3.6:1. */
  --emm-panel-bg: var(--emm-orange);
  --emm-panel-fg: #000;
  --emm-panel-sub: #000;
  --emm-panel-sq: #000;
}
/* Blue on dark is decorative only (2.6:1): square turns white on dark grounds. */
.emm-world--cloud-security {
  --emm-world: var(--emm-blue);
  --emm-on-world: var(--emm-white);
  --emm-square: var(--emm-blue);
  --emm-hover-bg: var(--emm-dark);
  --emm-hover-fg: var(--emm-white);
  --emm-hover-sub: var(--emm-white);
  --emm-hover-rule: var(--emm-blue);
  --emm-accent-rule: var(--emm-blue);
  --emm-panel-bg: var(--emm-white);
  --emm-panel-fg: var(--emm-dark);   /* 16:1 */
  --emm-panel-sub: var(--emm-dark);
  --emm-panel-sq: var(--emm-blue);   /* 6.2:1 on white */
}

/* Dark surfaces */
.emm-header,
.emm-mobile,
.emm-footer,
.emm .emm-section--dark {
  --emm-bg: var(--emm-dark);
  --emm-fg: var(--emm-white);
  --emm-muted: var(--emm-mute-dark);
  --emm-rule: var(--emm-line-dark);
  --emm-focus: var(--emm-lime);
}
.emm-header .emm-world--cloud-security,
.emm-mobile .emm-world--cloud-security,
.emm-footer .emm-world--cloud-security,
.emm-section--dark .emm-world--cloud-security,
.emm-dot--technology {
  --emm-square: var(--emm-white);
}

/* 4. Base & Divi resets (scoped to body.emm) ============================== */
html { -webkit-text-size-adjust: 100%; }
body.emm {
  font-family: var(--emm-font);
  font-size: var(--emm-fs-body);
  line-height: var(--emm-lh-body);
  color: var(--emm-dark);
  background: var(--emm-white);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}
.emm #page-container { overflow: visible; overflow-x: clip; padding-top: 0 !important; } /* sticky header; Divi sets overflow-y:hidden + JS padding */
.emm #main-content { background: var(--emm-white); }
.emm #main-content .container::before { display: none; }
.emm h1, .emm h2, .emm h3, .emm h4, .emm h5, .emm h6 {
  font-family: var(--emm-font);
  color: inherit;
  padding-bottom: 0;
  margin: 0;
  text-wrap: balance;
  font-weight: 700;
}
.emm p { padding-bottom: 0; }
.emm p + p { margin-top: 0.9em; }
.emm ::selection { background: var(--emm-lime); color: var(--emm-dark); }
.emm img { max-width: 100%; height: auto; }

/* Divi section/row/column/module normalisation for EMM sections */
.emm #main-content .emm-section {
  position: relative;
  scroll-margin-top: var(--emm-header-h);
  padding: var(--emm-section-y) 0;
  background-color: var(--emm-bg);
  color: var(--emm-fg);
}
.emm #main-content .emm-section > .et_pb_row {
  width: 100%;
  max-width: var(--emm-max);
  margin: 0 auto;
  padding: 0 var(--emm-gutter);
}
.emm #main-content .emm-section .et_pb_column {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--emm-grid-gap);
  row-gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem);
  align-items: start;
}
/* Low specificity on purpose (:where) so component rules below can set spacing. */
.emm #main-content .emm-section :where(.et_pb_column > .et_pb_module, .et_pb_column > .et_pb_button_module_wrapper) {
  grid-column: 1 / -1;
  margin: 0;
  min-width: 0;
}
.emm .emm-section .et_pb_text_inner > *:last-child { margin-bottom: 0; }

/* Type roles */
.emm .emm-label,
.emm .emm-label p,
.emm-label {
  font-family: var(--emm-mono);
  font-size: var(--emm-fs-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--emm-muted);
}
.emm .emm-label p::before,
.emm p.emm-label::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-right: 0.7em;
  background: var(--emm-square);
  vertical-align: 0.05em;
}
.emm-mono { font-family: var(--emm-mono); font-size: 0.8125rem; letter-spacing: 0.02em; }
.emm .emm-h2 h2,
.emm .emm-h2 .et_pb_module_heading {
  font-size: var(--emm-fs-h2);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 700;
  max-width: 18ch;
}
.emm .emm-lead,
.emm .emm-lead p {
  font-size: var(--emm-fs-lead);
  line-height: 1.5;
  max-width: 44ch;
}
.emm .emm-body p { max-width: var(--emm-measure); }

/* 5. Buttons & links ====================================================== */
.emm-btn,
body.emm #page-container .emm-btn-primary .et_pb_button,
body.emm #page-container .et_pb_section .et_pb_button.emm-btn-primary,
body.emm #page-container .emm-btn-secondary .et_pb_button,
body.emm #page-container .et_pb_section .et_pb_button.emm-btn-secondary {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.875rem;
  min-height: 3rem;
  padding: 0.75rem 1.375rem;
  border: 1px solid currentColor;
  border-radius: var(--emm-radius);
  font-family: var(--emm-font);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--emm-dur-ui) ease, color var(--emm-dur-ui) ease, border-color var(--emm-dur-ui) ease;
}
/* Primary: solid, logo square as signature; floods with the world colour on hover. */
.emm-btn--primary,
body.emm #page-container .emm-btn-primary .et_pb_button,
body.emm #page-container .et_pb_section .et_pb_button.emm-btn-primary {
  background: var(--emm-fg);
  color: var(--emm-bg);
  border-color: var(--emm-fg);
}
.emm-btn--primary:hover,
body.emm #page-container .emm-btn-primary .et_pb_button:hover,
body.emm #page-container .et_pb_section .et_pb_button.emm-btn-primary:hover {
  background: var(--emm-world);
  color: var(--emm-on-world);
  border-color: var(--emm-world);
}
.emm-btn__sq,
body.emm #page-container .emm-btn-primary .et_pb_button::after,
body.emm #page-container .et_pb_section .et_pb_button.emm-btn-primary::after {
  content: "";
  display: inline-block;
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  background: var(--emm-square);
  position: static;
  opacity: 1;
  margin: 0;
  font-family: var(--emm-font) !important;
  font-size: 0;
  line-height: 0;
  transition: transform var(--emm-dur-ui) var(--emm-ease), background-color var(--emm-dur-ui) ease;
}
.emm-btn--primary:hover .emm-btn__sq,
body.emm #page-container .emm-btn-primary .et_pb_button:hover::after,
body.emm #page-container .et_pb_section .et_pb_button.emm-btn-primary:hover::after {
  background: var(--emm-on-world);
  transform: translateX(0.25rem);
}
.emm-btn--block { display: flex; justify-content: space-between; width: 100%; }
/* Secondary: outline. */
body.emm #page-container .emm-btn-secondary .et_pb_button,
body.emm #page-container .et_pb_section .et_pb_button.emm-btn-secondary { background: transparent; color: var(--emm-fg); }
body.emm #page-container .emm-btn-secondary .et_pb_button:hover,
body.emm #page-container .et_pb_section .et_pb_button.emm-btn-secondary:hover { background: var(--emm-fg); color: var(--emm-bg); }
/* Neutralise Divi's button icon/hover padding for EMM buttons. */
body.emm #page-container .emm-btn-primary .et_pb_button:hover,
body.emm #page-container .emm-btn-secondary .et_pb_button:hover,
body.emm #page-container .et_pb_section .et_pb_button.emm-btn-primary:hover,
body.emm #page-container .et_pb_section .et_pb_button.emm-btn-secondary:hover { padding: 0.75rem 1.375rem; }
body.emm #page-container .emm-btn-secondary .et_pb_button::after,
body.emm #page-container .et_pb_section .et_pb_button.emm-btn-secondary::after { display: none; }
body.emm #page-container .emm-btn-primary .et_pb_button::before,
body.emm #page-container .emm-btn-secondary .et_pb_button::before { display: none; }

/* Arrow link: label + →, no underline. */
.emm-link-arrow,
body.emm #page-container .emm-link-arrow-btn .et_pb_button,
body.emm #page-container .et_pb_section .et_pb_button.emm-link-arrow-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-family: var(--emm-font);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
body.emm #page-container .emm-link-arrow-btn .et_pb_button::after,
body.emm #page-container .et_pb_section .et_pb_button.emm-link-arrow-btn::after {
  content: "→";
  /* !important: Divi forces its icon font (ETmodules, 92 KB) on button pseudo-elements. */
  font-family: var(--emm-font) !important;
  font-size: 1em;
  line-height: 1;
  position: static;
  opacity: 1;
  margin: 0;
  display: inline-block;
  transition: transform var(--emm-dur-ui) var(--emm-ease);
}
body.emm #page-container .emm-link-arrow-btn .et_pb_button:hover,
body.emm #page-container .et_pb_section .et_pb_button.emm-link-arrow-btn:hover { padding: 0; background: none; border: 0; }
.emm-link-arrow span { display: inline-block; transition: transform var(--emm-dur-ui) var(--emm-ease); }
.emm-link-arrow:hover span,
body.emm #page-container .emm-link-arrow-btn .et_pb_button:hover::after,
body.emm #page-container .et_pb_section .et_pb_button.emm-link-arrow-btn:hover::after { transform: translateX(0.25rem); }
.emm-link-arrow:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }

/* Inline links: default / hover / active / focus-visible */
.emm #main-content .et_pb_text a,
.emm-footer__list a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: currentColor;
}
.emm #main-content .et_pb_text a:hover { text-decoration-thickness: 2px; }
/* Case cards and filters are components, not inline text links. */
.emm #main-content .et_pb_text a.emm-case-card__link,
.emm #main-content .et_pb_text .emm-work-filter a { text-decoration: none; }
.emm #main-content .et_pb_text a.emm-case-card__link:hover .emm-case-card__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.emm #main-content .et_pb_text a:active { text-decoration-color: var(--emm-world); }

.emm :focus { outline: none; }
.emm :focus-visible {
  outline: 2px solid var(--emm-focus);
  outline-offset: 3px;
  border-radius: 0;
}

.emm-skip {
  position: absolute;
  left: var(--emm-gutter);
  top: 0.5rem;
  z-index: 1000;
  padding: 0.75rem 1rem;
  background: var(--emm-lime);
  color: var(--emm-dark);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.emm-skip:focus { transform: none; }

/* 6. Header =============================================================== */
.emm-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 100;
  background: var(--emm-bg);
  color: var(--emm-fg);
  border-bottom: 1px solid var(--emm-rule);
  transition: transform var(--emm-dur-panel) var(--emm-ease);
}
.emm-header.is-hidden { transform: translateY(calc(-100% - 1px)); }
.emm-header__bar {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  max-width: var(--emm-max);
  height: var(--emm-header-h);
  margin: 0 auto;
  padding: 0 var(--emm-gutter);
}
.emm-header__logo {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-right: auto;
  color: var(--emm-white);
}
.emm-mark { display: block; height: 1.625rem; width: auto; }
.emm-mark__square { fill: var(--emm-square); }

.emm-nav__list { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.emm-nav__item { position: relative; list-style: none; padding: 0; }
.emm-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0 0.875rem;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--emm-font);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.emm-nav__link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.4em; }
.emm-nav__item.is-current > .emm-nav__link::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--emm-square);
}
.emm-nav__chevron {
  width: 0.4375rem;
  height: 0.4375rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15rem) rotate(45deg);
  transition: transform var(--emm-dur-ui) var(--emm-ease);
}
.emm-nav__toggle[aria-expanded="true"] .emm-nav__chevron { transform: translateY(0.1rem) rotate(-135deg); }
.emm-header__cta { flex: none; }

.emm-menu-toggle {
  display: none;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  min-width: 3rem;
  padding: 0 0.25rem 0 0.75rem;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--emm-font);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}
.emm-menu-toggle__icon { position: relative; width: 1.375rem; height: 0.75rem; }
.emm-menu-toggle__icon::before,
.emm-menu-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
}
.emm-menu-toggle__icon::before { top: 0; }
.emm-menu-toggle__icon::after { bottom: 0; width: 70%; }
.emm-menu-toggle__icon.is-close::before { top: 50%; transform: translateY(-50%) rotate(45deg); }
.emm-menu-toggle__icon.is-close::after { bottom: auto; top: 50%; width: 100%; transform: translateY(-50%) rotate(-45deg); }

/* Diensten panel */
.emm-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--emm-dark-2);
  border-bottom: 1px solid var(--emm-rule);
}
.emm-panel__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
  gap: var(--emm-grid-gap);
  max-width: var(--emm-max);
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--emm-gutter) clamp(2rem, 4vw, 3.5rem);
}
.emm-panel__intro { display: grid; align-content: start; gap: 1rem; }
.emm-panel__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--emm-rule);
}
.emm-panel__item { list-style: none; padding: 0; border-right: 1px solid var(--emm-rule); }
.emm-panel__link {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  height: 100%;
  min-height: 11rem;
  padding: 1.5rem;
  border-top: 3px solid transparent;
  color: var(--emm-white);
  text-decoration: none;
  transition: background-color var(--emm-dur-ui) ease, color var(--emm-dur-ui) ease, border-color var(--emm-dur-ui) ease;
}
.emm-panel__sq { display: inline-block; flex: none; width: 0.75rem; height: 0.75rem; background: var(--emm-square); }
.emm-panel__name { font-size: clamp(1.375rem, 1rem + 0.8vw, 1.875rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.emm-panel__desc { font-family: var(--emm-mono); font-size: 0.8125rem; line-height: 1.5; color: var(--emm-mute-dark); }
/* One interaction for all four worlds: on hover, keyboard focus and the current page the whole column
   fills with its world colour, with text and logo square from the panel tokens (see 3. Colour worlds).
   The general hover tokens are for light grounds (Content/Cloud hover there is dark) and stay untouched. */
.emm-panel__link:hover,
.emm-panel__link:focus-visible,
.emm-panel__link[aria-current="page"] {
  background: var(--emm-panel-bg);
  color: var(--emm-panel-fg);
  border-top-color: var(--emm-panel-bg);
}
.emm-panel__link:is(:hover, :focus-visible, [aria-current="page"]) .emm-panel__desc { color: var(--emm-panel-sub); }
.emm-panel__link:is(:hover, :focus-visible, [aria-current="page"]) .emm-panel__sq { background: var(--emm-panel-sq); }
.emm-panel__link .emm-panel__sq,
.emm-panel__link .emm-panel__desc { transition: background-color var(--emm-dur-ui) ease, color var(--emm-dur-ui) ease; }
/* Featured specialised service (menu class emm-featured): one full-width editorial row below the worlds. */
.emm-panel__inner { row-gap: 0; }
.emm-panel__features { grid-column: 2; list-style: none; margin: 0; padding: 0; border: 1px solid var(--emm-rule); border-bottom: 0; }
.emm-panel__features li { list-style: none; padding: 0; }
.emm-panel__features li + li { border-top: 1px solid var(--emm-rule); }
.emm-panel__feature {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  grid-template-areas: "label label arrow" "title desc arrow";
  align-items: baseline;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: 0.625rem;
  padding: 1.5rem 1.5rem 1.5rem 1.3125rem;
  border-left: 3px solid transparent;
  color: var(--emm-white);
  text-decoration: none;
  transition: background-color var(--emm-dur-ui) ease, border-color var(--emm-dur-ui) ease;
}
.emm-panel__feature-label { grid-area: label; font-family: var(--emm-mono); font-size: var(--emm-fs-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--emm-mute-dark); }
.emm-panel__feature-label::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.7em; background: var(--emm-square); vertical-align: 0.05em; }
.emm-panel__feature-title { grid-area: title; font-size: clamp(1.25rem, 1rem + 0.6vw, 1.625rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.emm-panel__feature-desc { grid-area: desc; font-family: var(--emm-mono); font-size: 0.8125rem; line-height: 1.5; color: var(--emm-mute-dark); }
.emm-panel__feature-arrow { grid-area: arrow; align-self: center; font-size: 1.5rem; line-height: 1; color: var(--emm-world); transition: transform var(--emm-dur-ui) var(--emm-ease); }
.emm-panel__feature:hover,
.emm-panel__feature:focus-visible { background: var(--emm-dark); border-left-color: var(--emm-world); }
.emm-panel__feature:hover .emm-panel__feature-arrow,
.emm-panel__feature:focus-visible .emm-panel__feature-arrow { transform: translateX(0.25rem); }
.emm-panel__feature[aria-current="page"] { border-left-color: var(--emm-world); }
.emm-panel__feature[aria-current="page"] .emm-panel__feature-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; text-decoration-color: var(--emm-world); }
/* You are within this world (e.g. on one of its specialised services): the world's top rule shows. */
.emm-panel__item.is-ancestor > .emm-panel__link { border-top-color: var(--emm-hover-rule); }
/* Specialised services under a world (menu child items): small, secondary, below the world link. */
.emm-panel__item { display: flex; flex-direction: column; }
.emm-panel__item > .emm-panel__link { flex: 1 0 auto; height: auto; }
.emm-panel__sub { list-style: none; margin: 0; padding: 0 1.5rem 1.25rem; }
.emm-panel__sub li { list-style: none; padding: 0; }
.emm-panel__sublink {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  border-top: 1px solid var(--emm-rule);
  color: var(--emm-white);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}
/* The arrow is out of flow, so the hover/current underline stays on the text only. */
.emm-panel__sublink { position: relative; padding-left: 1.5rem; }
.emm-panel__sublink::before { content: "→"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--emm-square); }
.emm-panel__sublink:hover,
.emm-panel__sublink[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }

@media (max-width: 1023px) {
  .emm-nav, .emm-panel { display: none !important; }
  .emm-menu-toggle { display: inline-flex; }
  .emm-header__cta { display: none; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .emm-header__cta { display: inline-flex; }
}
@media (max-width: 639px) {
  :root { --emm-header-h: 4rem; }
  .emm-mark { height: 1.375rem; }
}

/* 7. Mobile menu ========================================================== */
.emm-mobile {
  position: fixed;
  inset: var(--wp-admin--admin-bar--height, 0px) 0 0 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--emm-bg);
  color: var(--emm-fg);
}
.emm-mobile[hidden] { display: none; }
.emm-mobile__bar {
  display: flex;
  align-items: center;
  height: var(--emm-header-h);
  padding: 0 var(--emm-gutter);
  border-bottom: 1px solid var(--emm-rule);
}
.emm-mobile__nav { padding: clamp(1.5rem, 6vw, 3rem) var(--emm-gutter); }
.emm-mobile__list,
.emm-mobile__sub { list-style: none; margin: 0; padding: 0; }
.emm-mobile__item { list-style: none; padding: 0; border-bottom: 1px solid var(--emm-rule); }
.emm-mobile__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 4rem;
  color: inherit;
  font-size: clamp(2rem, 1.2rem + 4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.emm-mobile__item.is-current > .emm-mobile__link::before { content: ""; width: 0.6rem; height: 0.6rem; background: var(--emm-square); }
.emm-mobile__sub { display: grid; gap: 0; padding: 0 0 1.25rem; }
.emm-mobile__sub li { list-style: none; padding: 0; }
.emm-mobile__sublink {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 3rem;
  color: inherit;
  font-size: 1.25rem;
  font-weight: 500;
  text-decoration: none;
}
.emm-mobile__sublink[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.emm-mobile__sub li.is-ancestor > .emm-mobile__sublink { font-weight: 700; }
/* Specialised services under a world: indented to the world's text, smaller and quieter. */
.emm-mobile__subsub { list-style: none; margin: 0 0 0.25rem; padding: 0 0 0 1.625rem; }
.emm-mobile__subsub li { list-style: none; padding: 0; }
.emm-mobile__subsublink {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--emm-muted);
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
}
.emm-mobile__subsublink { position: relative; padding-left: 1.5rem; }
.emm-mobile__subsublink::before { content: "→"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.emm-mobile__subsublink:hover,
.emm-mobile__subsublink[aria-current="page"] { color: var(--emm-fg); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
/* Featured specialised service in the mobile menu: after the four worlds, behind a rule, world accent. */
.emm-mobile__features { list-style: none; margin: 0 0 1.25rem; padding: 1.25rem 0 0; border-top: 1px solid var(--emm-rule); }
.emm-mobile__features li { list-style: none; padding: 0; }
.emm-mobile__feature { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label arrow" "title arrow"; column-gap: 1rem; row-gap: 0.375rem; align-items: center; min-height: 2.75rem; padding: 0.5rem 0 0.5rem 1rem; border-left: 3px solid var(--emm-world); color: inherit; text-decoration: none; }
.emm-mobile__feature-arrow { grid-area: arrow; font-size: 1.25rem; color: var(--emm-world); }
.emm-mobile__feature-label { grid-area: label; font-family: var(--emm-mono); font-size: var(--emm-fs-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--emm-muted); }
.emm-mobile__feature-title { grid-area: title; font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.emm-mobile__feature:hover .emm-mobile__feature-title,
.emm-mobile__feature[aria-current="page"] .emm-mobile__feature-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; text-decoration-color: var(--emm-world); }.emm-mobile__cta { padding: 0 var(--emm-gutter) calc(var(--emm-gutter) + env(safe-area-inset-bottom, 0px)); }
html.emm-menu-open, html.emm-menu-open body { overflow: hidden; }

/* 8. Footer =============================================================== */
.emm-footer {
  background: var(--emm-bg);
  color: var(--emm-fg);
  border-top: 1px solid var(--emm-rule);
}
.emm-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2.3fr));
  gap: var(--emm-space-7) var(--emm-grid-gap);
  max-width: var(--emm-max);
  margin: 0 auto;
  padding: clamp(3.5rem, 6vw, 6rem) var(--emm-gutter) clamp(2.5rem, 4vw, 4rem);
}
.emm-footer__logo { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--emm-white); }
.emm-footer__logo .emm-mark { height: clamp(2.25rem, 1.5rem + 2vw, 3.25rem); }
.emm-footer__tag { margin-top: 1.25rem; font-size: 1.125rem; font-weight: 500; }
.emm-footer__place { margin-top: 0.25rem; color: var(--emm-muted); }
.emm-footer__contact { margin-top: 1.25rem; }
.emm .emm-footer__contact a,
.emm .emm-footer__socials a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--emm-fg); text-decoration: none; font-weight: 500; }
.emm .emm-footer__contact a:hover,
.emm .emm-footer__socials a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.emm-footer__socials { display: flex; flex-wrap: wrap; gap: 0 1.25rem; list-style: none; margin: 0.5rem 0 0; padding: 0; }
.emm-footer__socials li { list-style: none; padding: 0; }
.emm-footer__col { display: grid; align-content: start; gap: 1rem; }
.emm-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.emm-footer__list li { list-style: none; padding: 0; }
.emm .emm-footer__list a {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  color: var(--emm-fg);
  text-decoration: none;
  font-weight: 500;
}
.emm .emm-footer__list a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.emm-footer__question { font-size: 1.125rem; font-weight: 500; line-height: 1.35; max-width: 16ch; }
.emm-footer__project .emm-link-arrow { color: var(--emm-fg); }
.emm-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
  max-width: var(--emm-max);
  margin: 0 auto;
  padding: 1.5rem var(--emm-gutter) calc(1.5rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--emm-rule);
  color: var(--emm-muted);
}
.emm-footer__base a { color: inherit; }
/* "Cookievoorkeuren" reopens the Complianz banner: a button that reads like the links beside it. */
.emm .emm-footer__consent { margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.emm .emm-footer__consent:hover { color: var(--emm-fg); }
.emm .emm-footer__base p { margin: 0; padding: 0; }
.emm-footer__worlds { display: flex; gap: 0.375rem; margin-left: auto; }
.emm-footer__worlds span { width: 0.625rem; height: 0.625rem; background: var(--emm-square); }

@media (max-width: 1023px) {
  .emm-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .emm-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .emm-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emm-footer__project { grid-column: 1 / -1; }
}

/* 9. Homepage sections ==================================================== */
/* 01 Hero */
.emm #main-content .emm-hero { padding: clamp(3.5rem, 2rem + 6vw, 8rem) 0 clamp(3rem, 2rem + 5vw, 7rem); }
.emm .emm-hero__eyebrow { order: 0; }
.emm .emm-hero__title h1,
.emm .emm-hero__title .et_pb_module_heading {
  font-size: var(--emm-fs-display);
  font-weight: 800;
  font-stretch: 100%;
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--emm-fg); /* explicit: in the Divi VB canvas "inherit" resolves to a dark builder wrapper */
}
.emm-dot {
  display: inline-block;
  width: 0.15em;
  height: 0.15em;
  margin-left: 0.04em;
  overflow: hidden;
  vertical-align: baseline;
  line-height: 0;
  color: transparent;
  background: var(--emm-square);
}
.emm-dot--brand { --emm-square: var(--emm-blue); }
.emm-dot--digital { --emm-square: var(--emm-lime); }
.emm-dot--content { --emm-square: var(--emm-orange); }
.emm .emm-hero__lead { grid-column: 1 / span 6 !important; align-self: end; color: var(--emm-fg); }
.emm .emm-hero__lead p { color: var(--emm-fg); }
.emm .emm-section .et_pb_button_module_wrapper:has(> .emm-hero__link) { grid-column: 9 / -1 !important; justify-self: end; align-self: end; }
.emm .emm-section .et_pb_button_module_wrapper:has(> .emm-section-link) { grid-column: 4 / -1 !important; }
.emm .emm-section .et_pb_button_module_wrapper:has(> .emm-cta-button) { grid-column: 1 / -1 !important; }
.emm .emm-hero .emm-hero__rule { border-top: 1px solid var(--emm-rule); }

/* 02 Werk / 04 Uitgelicht / 06 Opdrachtgevers: hidden until real content exists
   (not in the Divi Visual Builder, so editors can still fill them). */
body.emm:not(.et-fb):not(.et-vb):not(.et-bfb) .emm-section--work:not(:has(.emm-case-card, .emm-admin-notice)),
body.emm:not(.et-fb):not(.et-vb):not(.et-bfb) .emm-section--featured:not(:has(img[src]:not([src=""]), video, iframe)),
body.emm:not(.et-fb):not(.et-vb):not(.et-bfb) .emm-section--proof:not(:has(img[src]:not([src=""]), blockquote)) {
  display: none !important;
}

/* Hero eyebrow: one line on desktop, an intentional two-line stack on phones. */
.emm .emm-hero__eyebrow p { display: flex; flex-wrap: wrap; align-items: center; }
.emm .emm-eyebrow__name { color: var(--emm-fg); }
.emm .emm-eyebrow__sep { padding: 0 0.75em; }

/* Hero media frame: brand composition now, showreel/project media later (same Divi Image module).
   Hairline frame + viewfinder corners are CSS so they stay on the container edge at any crop. */
.emm #main-content .emm-hero__media {
  position: relative;
  overflow: hidden;
  background: var(--emm-dark);
  aspect-ratio: 16 / 10;
}
.emm .emm-hero__media .et_pb_image_wrap,
.emm .emm-hero__media img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: right bottom; }
.emm .emm-hero__media::before,
.emm .emm-service-media::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--emm-rule);
  pointer-events: none;
  z-index: 1;
}
.emm .emm-hero__media::after,
.emm .emm-service-media::after {
  content: "";
  position: absolute;
  inset: 0.75rem;
  pointer-events: none;
  z-index: 1;
  --c: var(--emm-fg);
  --l: 1.5rem;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) 2px no-repeat,
    linear-gradient(var(--c), var(--c)) left top / 2px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--l) 2px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 2px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) 2px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 2px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) 2px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 2px var(--l) no-repeat;
}
@media (min-width: 1024px) {
  .emm .emm-hero__eyebrow { grid-row: 1; }
  .emm .emm-hero__title { grid-row: 2; position: relative; z-index: 2; }
  /* Frame height = the first three display lines, so TECHNOLOGY. always runs underneath it. */
  .emm #main-content .emm-hero__media {
    grid-column: 9 / -1 !important;
    grid-row: 2;
    align-self: start;
    aspect-ratio: auto;
    height: calc(var(--emm-fs-display) * (0.86 * 3 - 0.12));
  }
  .emm .emm-hero__lead { grid-row: 3; }
  .emm .emm-section .et_pb_button_module_wrapper:has(> .emm-hero__link) { grid-row: 3; }
}
@media (max-width: 639px) {
  .emm .emm-hero__eyebrow p { display: grid; grid-template-columns: auto 1fr; column-gap: 0.7em; row-gap: 0.35em; }
  .emm .emm-hero__eyebrow p::before { margin-right: 0; align-self: center; }
  .emm .emm-eyebrow__sep { display: none; }
  .emm .emm-eyebrow__role { grid-column: 2; }
  .emm #main-content .emm-hero__media { aspect-ratio: 4 / 3; }
}
/* Section heads: label | heading | link */
.emm .emm-section-label { grid-column: 1 / span 3 !important; padding-top: 0.6em; }
.emm .emm-section-title { grid-column: 4 / span 9 !important; }
.emm .emm-section-link { grid-column: 4 / -1 !important; }

/* 03 Diensten — index rows (stretched link: the whole row is the heading link) */
.emm #main-content .emm-services .et_pb_column { row-gap: 0; }
.emm #main-content .emm-services .emm-section-label,
.emm #main-content .emm-services .emm-section-title { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.emm #main-content .emm-world-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  column-gap: var(--emm-grid-gap);
  isolation: isolate;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem) 0;
  border-top: 1px solid var(--emm-rule);
  transition: color var(--emm-dur-ui) ease, border-color var(--emm-dur-ui) ease;
  --emm-row-pad: clamp(0.75rem, 1.6vw, 1.5rem);
}
.emm #main-content .emm-world-row:last-child,
.emm #main-content .emm-world-row--last { border-bottom: 1px solid var(--emm-rule); }
.emm .emm-world-row .et_pb_text_inner { display: contents; }
.emm .emm-world-row h3 {
  grid-column: 1 / 2;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.6rem + 1vw, 1.5rem);
  font-size: var(--emm-fs-h3);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
/* Numbered world tile: the logo square as a static colour field. The number is
   20px bold (WCAG large text), so dark on orange (4.48:1) passes. */
.emm #main-content .emm-services .et_pb_column { counter-reset: emm-world; }
/* Each world keeps its own number everywhere (home, overview, related services). */
.emm-world--brand { counter-set: emm-world 1; }
.emm-world--digital { counter-set: emm-world 2; }
.emm-world--content { counter-set: emm-world 3; }
.emm-world--cloud-security { counter-set: emm-world 4; }
.emm .emm-world-row h3::before {
  content: counter(emm-world, decimal-leading-zero);
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(2.75rem, 2.1rem + 1.4vw, 3.5rem);
  aspect-ratio: 1;
  background: var(--emm-world);
  color: var(--emm-on-world);
  font-family: var(--emm-font);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--emm-dur-ui) ease, color var(--emm-dur-ui) ease;
}
/* Cloud & Security: dark tile with a blue frame, so it never reads as Brand. */
.emm .emm-world-row.emm-world--cloud-security h3::before {
  background: var(--emm-dark);
  color: var(--emm-white);
  box-shadow: inset 0 0 0 3px var(--emm-blue);
}
.emm #main-content .emm-world-row h3 a { color: inherit; text-decoration: none; }
.emm #main-content .emm-world-row h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.emm .emm-world-row p {
  grid-column: 2 / 3;
  align-self: center;
  padding-right: 3rem;
  font-family: var(--emm-mono);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--emm-muted);
  max-width: none;
}
.emm .emm-world-row p::after {
  content: "→";
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  font-family: var(--emm-font);
  font-size: 1.5rem;
  color: var(--emm-fg);
  transition: transform var(--emm-dur-ui) var(--emm-ease), color var(--emm-dur-ui) ease;
}
/* Hover flood extends past the grid edge; lines and text stay on the grid. */
.emm #main-content .emm-world-row::before {
  content: "";
  position: absolute;
  inset: -1px calc(var(--emm-row-pad) * -1) 0;
  z-index: -1;
  background: var(--emm-hover-bg);
  opacity: 0;
  transition: opacity var(--emm-dur-ui) ease;
}
.emm #main-content .emm-world-row:hover::before,
.emm #main-content .emm-world-row:focus-within::before { opacity: 1; }
.emm #main-content .emm-world-row:hover,
.emm #main-content .emm-world-row:focus-within {
  color: var(--emm-hover-fg);
  border-top-color: var(--emm-hover-rule);
}
.emm #main-content .emm-world-row:hover p,
.emm #main-content .emm-world-row:focus-within p { color: var(--emm-hover-sub); }
.emm #main-content .emm-world-row:hover p::after,
.emm #main-content .emm-world-row:focus-within p::after { color: var(--emm-hover-fg); transform: translateX(0.25rem); }
.emm #main-content .emm-world-row:hover h3::before,
.emm #main-content .emm-world-row:focus-within h3::before { background: var(--emm-hover-fg); color: var(--emm-hover-bg); box-shadow: none; }

.emm #main-content .emm-world-row h3 a:focus-visible { outline: none; }
.emm #main-content .emm-world-row:has(a:focus-visible) { outline: 2px solid var(--emm-focus); outline-offset: 4px; }

/* 05 Studio — dark, with the EMM mark as the one brand moment (tone-on-tone, cropped) */
.emm #main-content .emm-studio {
  overflow: hidden;
  padding-bottom: calc(var(--emm-section-y) + clamp(5rem, 15vw, 17rem));
}
.emm #main-content .emm-studio > .et_pb_row { position: relative; z-index: 1; }
.emm #main-content .emm-studio::after {
  content: "";
  position: absolute;
  left: var(--emm-gutter);
  right: var(--emm-gutter);
  bottom: 0;
  max-width: calc(var(--emm-max) - 2 * var(--emm-gutter));
  margin: 0 auto;
  aspect-ratio: 1552 / 413;
  background: url("../img/emm-mark-tone.svg?v=1") no-repeat center bottom / 100% auto;
  transform: translateY(24%);
  pointer-events: none;
  z-index: 0;
}
.emm .emm-studio-statement h2 { font-size: var(--emm-fs-h2); line-height: 1.02; letter-spacing: -0.03em; max-width: 16ch; }
.emm .emm-studio-text { grid-column: 4 / span 6 !important; }


/* 07 CTA — light ground between the dark Studio and the dark footer */
.emm #main-content .emm-cta { padding: clamp(5rem, 3rem + 7vw, 11rem) 0; }
.emm .emm-cta-title h2 {
  font-size: clamp(2.5rem, 0.8rem + 7vw, 8.5rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.035em;
  max-width: 13ch;
}
.emm .emm-cta-button { grid-column: 1 / -1 !important; }

/* Tablet */
@media (max-width: 1023px) {
  .emm .emm-hero__lead { grid-column: 1 / span 9 !important; }
  .emm .emm-section .et_pb_button_module_wrapper:has(> .emm-hero__link) { grid-column: 1 / -1 !important; justify-self: start; }
  .emm .emm-section .et_pb_button_module_wrapper:has(> .emm-section-link) { grid-column: 1 / -1 !important; }
  .emm .emm-section-label { grid-column: 1 / -1 !important; padding-top: 0; }
  .emm .emm-section-title,
  .emm .emm-section-link,
  .emm .emm-studio-text { grid-column: 1 / -1 !important; }
  .emm #main-content .emm-services .emm-section-label { margin-bottom: 1rem; }
}
/* Mobile: composed, not shrunk */
@media (max-width: 767px) {
  .emm .emm-hero__title h1,
  .emm .emm-hero__title .et_pb_module_heading { font-stretch: 88%; line-height: 0.9; }
  .emm .emm-hero__lead { grid-column: 1 / -1 !important; }
  .emm #main-content .emm-world-row { grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem; }
  .emm .emm-world-row h3,
  .emm .emm-world-row p { grid-column: 1 / -1; }
  .emm .emm-world-row h3 { font-size: 1.75rem; padding-right: 2.5rem; }
  .emm .emm-world-row p { padding-right: 2.5rem; font-size: 0.8125rem; }
  .emm .emm-world-row p::after { top: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); translate: 0 0; font-size: 1.375rem; }
}

/* 05b Studio mark on phones: larger and deliberately cropped, still tone-on-tone (C1 refinement) */
@media (max-width: 639px) {
  .emm #main-content .emm-studio { padding-bottom: calc(var(--emm-section-y) + 30vw); }
  .emm #main-content .emm-studio::after {
    right: auto;
    width: 158vw;
    max-width: none;
    margin: 0;
    transform: translateY(18%);
  }
}

/* 9b. Service pages ======================================================== */
/* Service hero: the page's one large colour field. World tokens come from the
   body class set by the EMM Core page setting (emm_world). */
.emm #main-content .emm-service-hero {
  --h-bg: var(--emm-dark);
  --h-fg: var(--emm-white);
  --h-muted: var(--emm-mute-dark);
  --h-rule: var(--emm-line-dark);
  --h-title: var(--emm-white);
  --emm-bg: var(--h-bg);
  --emm-fg: var(--h-fg);
  --emm-muted: var(--h-muted);
  --emm-rule: var(--h-rule);
  --emm-focus: var(--emm-lime);
  padding: clamp(3rem, 2rem + 5vw, 7rem) 0 clamp(3.5rem, 2rem + 6vw, 8rem);
}
/* Brand: blue field, white type (6.2:1); the square turns white on the field. */
body.emm-world--brand #main-content .emm-service-hero {
  --h-bg: var(--emm-blue);
  --h-muted: var(--emm-white);
  --h-rule: rgba(255, 255, 255, 0.35);
  --emm-square: var(--emm-white);
  --emm-focus: var(--emm-white);
}
/* Digital: lime field, dark type only (12:1). */
body.emm-world--digital #main-content .emm-service-hero {
  --h-bg: var(--emm-lime);
  --h-fg: var(--emm-dark);
  --h-muted: var(--emm-dark);
  --h-rule: rgba(35, 31, 32, 0.28);
  --h-title: var(--emm-dark);
  --emm-square: var(--emm-dark);
  --emm-focus: var(--emm-dark);
}
/* Content: dark cinema ground; orange only as large type and marks (4.48:1, large). */
body.emm-world--content #main-content .emm-service-hero { --h-title: var(--emm-orange); }
/* Cloud & Security: dark and white; blue as decorative line accent. */
body.emm-world--cloud-security #main-content .emm-service-hero { --h-rule: var(--emm-blue); --emm-square: var(--emm-white); }

.emm .emm-service-hero__title h1 {
  font-size: clamp(3rem, 1rem + 7vw, 8rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--h-title);
}
.emm .emm-service-hero__title .emm-dot { --emm-square: var(--emm-world); }
body.emm-world--brand .emm-service-hero__title .emm-dot,
body.emm-world--cloud-security .emm-service-hero__title .emm-dot { --emm-square: var(--emm-white); }
body.emm-world--digital .emm-service-hero__title .emm-dot { --emm-square: var(--emm-dark); }
.emm .emm-service-hero__lead p { color: var(--h-fg); max-width: 40ch; }

.emm #main-content .emm-service-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
/* #main-content: Divi's own image rule otherwise wins and sets width:auto, which crops the art from the left. */
.emm #main-content .emm-service-media .et_pb_image_wrap,
.emm #main-content .emm-service-media img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }

@media (min-width: 1024px) {
  .emm .emm-service-hero__label { grid-column: 1 / span 7 !important; grid-row: 1; }
  .emm .emm-service-hero__title { grid-column: 1 / span 7 !important; grid-row: 2; align-self: end; }
  .emm .emm-service-hero__lead { grid-column: 1 / span 6 !important; grid-row: 3; }
  .emm #main-content .emm-service-media { grid-column: 8 / -1 !important; grid-row: 1 / 4; aspect-ratio: auto; min-height: clamp(22rem, 30vw, 34rem); align-self: stretch; }
}

/* Digital on light grounds: lime squares get a dark outline so they stay visible (lime on white is 1.4:1). */
body.emm-world--digital #main-content .emm-section:not(.emm-section--dark):not(.emm-service-hero) .emm-label p::before { box-shadow: inset 0 0 0 1px var(--emm-dark); }

/* Generic body column in section grids */
.emm .emm-section-body { grid-column: 4 / span 6 !important; }
@media (max-width: 1023px) { .emm .emm-section-body { grid-column: 1 / -1 !important; } }

/* Capabilities: editorial two-column index with an accent rule in the world colour */
.emm #main-content .emm-cap {
  padding-top: 1.25rem;
  border-top: 2px solid var(--emm-accent-rule);
}
.emm .emm-cap h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 0.625rem; }
.emm .emm-cap p { color: var(--emm-muted); max-width: 44ch; }
.emm .emm-cap--a { grid-column: 4 / span 4 !important; }
.emm .emm-cap--b { grid-column: 9 / span 4 !important; }
.emm .emm-section-label--gap { margin-top: clamp(2rem, 1rem + 3vw, 4rem); }
@media (max-width: 1023px) {
  .emm .emm-cap--a { grid-column: 1 / span 6 !important; }
  .emm .emm-cap--b { grid-column: 7 / span 6 !important; }
}
@media (max-width: 639px) {
  .emm .emm-cap--a, .emm .emm-cap--b { grid-column: 1 / -1 !important; }
}

/* Approach: numbered steps on dark (the sequence is real information) */
.emm #main-content .emm-approach .et_pb_column { counter-reset: emm-step; }
.emm #main-content .emm-step {
  counter-increment: emm-step;
  grid-column: span 3 !important;
  position: relative;
  padding-top: 1.5rem;
  border-top: 1px solid var(--emm-rule);
}
.emm #main-content .emm-step::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 3rem;
  height: 3px;
  background: var(--emm-world);
}
.emm .emm-step h3::before {
  content: counter(emm-step, decimal-leading-zero);
  display: block;
  margin-bottom: 1.25rem;
  font-family: var(--emm-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--emm-muted);
}
.emm .emm-step h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.15; margin-bottom: 0.625rem; }
.emm .emm-step p { color: var(--emm-muted); }
@media (max-width: 1023px) { .emm #main-content .emm-step { grid-column: span 6 !important; } }
@media (max-width: 639px) { .emm #main-content .emm-step { grid-column: 1 / -1 !important; } }

/* Service CTA + related worlds in one light section (rows stay contiguous) */
.emm #main-content .emm-cta--service .et_pb_column { row-gap: 0; }
.emm #main-content .emm-cta--service .emm-cta-title { margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.emm #main-content .emm-cta--service .et_pb_button_module_wrapper:has(> .emm-cta-button) { margin-bottom: clamp(4rem, 2rem + 6vw, 8rem); }
.emm #main-content .emm-cta--service .emm-section-label { margin-bottom: 1.5rem; padding-top: 0; }
.emm .emm-cta--service .emm-section-label { grid-column: 1 / -1 !important; }

/* Diensten overview: four world blocks (2 x 2), whole block is the link */
.emm #main-content .emm-worlds .et_pb_column { row-gap: 0; }
.emm #main-content .emm-worlds .emm-section-label,
.emm #main-content .emm-worlds .emm-section-title { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.emm #main-content .emm-world-block {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  gap: 1rem;
  min-height: clamp(16rem, 20vw, 22rem);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) 0;
  border-top: 4px solid var(--emm-accent-rule);
  transition: color var(--emm-dur-ui) ease;
  --emm-row-pad: clamp(0.75rem, 1.6vw, 1.5rem);
}
.emm .emm-world-block--a { grid-column: 1 / span 6 !important; }
.emm .emm-world-block--b { grid-column: 7 / span 6 !important; }
.emm .emm-world-block .et_pb_text_inner { display: grid; gap: 1rem; align-content: start; }
.emm .emm-world-block h2 {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--emm-fs-h2);
  line-height: 1;
  letter-spacing: -0.03em;
}
.emm .emm-world-block h2::before {
  content: counter(emm-world, decimal-leading-zero);
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(2.75rem, 2.1rem + 1.4vw, 3.5rem);
  aspect-ratio: 1;
  background: var(--emm-world);
  color: var(--emm-on-world);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}
.emm .emm-world-block.emm-world--cloud-security h2::before { background: var(--emm-dark); color: var(--emm-white); box-shadow: inset 0 0 0 3px var(--emm-blue); }
.emm #main-content .emm-world-block h2 a { color: inherit; text-decoration: none; }
.emm #main-content .emm-world-block h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.emm .emm-world-block p { max-width: 38ch; font-size: var(--emm-fs-lead); line-height: 1.45; }
.emm .emm-world-block p:last-child { font-family: var(--emm-mono); font-size: 0.8125rem; line-height: 1.6; color: var(--emm-muted); max-width: 52ch; }
.emm .emm-world-block p:last-child::after { content: " →"; font-family: var(--emm-font); font-size: 1.25rem; color: var(--emm-fg); }
.emm #main-content .emm-world-block::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--emm-row-pad) * -1);
  z-index: -1;
  background: var(--emm-hover-bg);
  opacity: 0;
  transition: opacity var(--emm-dur-ui) ease;
}
.emm #main-content .emm-world-block:hover::before,
.emm #main-content .emm-world-block:focus-within::before { opacity: 1; }
.emm #main-content .emm-world-block:hover,
.emm #main-content .emm-world-block:focus-within { color: var(--emm-hover-fg); }
.emm #main-content .emm-world-block:hover p,
.emm #main-content .emm-world-block:focus-within p,
.emm #main-content .emm-world-block:hover p:last-child::after,
.emm #main-content .emm-world-block:focus-within p:last-child::after { color: var(--emm-hover-sub); }
.emm #main-content .emm-world-block:hover h2::before,
.emm #main-content .emm-world-block:focus-within h2::before { background: var(--emm-hover-fg); color: var(--emm-hover-bg); box-shadow: none; }
.emm #main-content .emm-world-block h2 a:focus-visible { outline: none; }
.emm #main-content .emm-world-block:has(a:focus-visible) { outline: 2px solid var(--emm-focus); outline-offset: 4px; }
@media (max-width: 767px) {
  .emm .emm-world-block--a, .emm .emm-world-block--b { grid-column: 1 / -1 !important; }
  .emm #main-content .emm-world-block { min-height: 0; }
  .emm .emm-world-block h2 { font-size: 2rem; }
}
/* E-commerce & Retail Operations (sub-page of Digital): a smaller H1 for the longer headline, hero CTAs and the
   framed warehouse body on the grid. The practice stat (.emm-stat) is also used on Studio. */
.emm .emm-service-hero__title--long h1 { font-size: clamp(2.25rem, 1rem + 4.2vw, 5rem); line-height: 0.95; }
/* Hero CTA on a world-coloured hero: the logo square takes the hero colour (the world square would vanish on the
   dark button), and on hover the button outlines instead of flooding with that same colour. */
body.emm #page-container .emm-service-hero .et_pb_button.emm-btn-primary::after { background: var(--emm-bg); }
body.emm #page-container .emm-service-hero .et_pb_button.emm-btn-primary:hover { background: transparent; color: var(--emm-fg); border-color: var(--emm-fg); }
body.emm #page-container .emm-service-hero .et_pb_button.emm-btn-primary:hover::after { background: var(--emm-fg); }
/* The secondary link sits close under the button (cancels most of the section row gap). */
.emm #main-content .emm-service-hero .et_pb_button_module_wrapper:has(> .emm-service-hero__link) { margin-top: calc(1rem - clamp(1.75rem, 1rem + 2.5vw, 3.5rem)); }
@media (min-width: 1024px) {
  .emm .emm-service-hero .et_pb_button_module_wrapper:has(> .emm-service-hero__cta) { grid-column: 1 / span 7 !important; grid-row: 4; }
  .emm .emm-service-hero .et_pb_button_module_wrapper:has(> .emm-service-hero__link) { grid-column: 1 / span 7 !important; grid-row: 5; }
  .emm #main-content .emm-service-hero:has(.emm-service-hero__cta) .emm-service-media { grid-row: 1 / 6; }
}
.emm #main-content .emm-stat { grid-column: 1 / span 3 !important; }
.emm .emm-stat .emm-stat__num { font-size: clamp(4rem, 2.5rem + 4vw, 7rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; }
.emm .emm-stat .emm-stat__num span { margin-left: 0.15em; font-size: 0.3em; letter-spacing: 0; }
.emm .emm-stat .emm-stat__label { margin-top: 1rem; max-width: 24ch; font-family: var(--emm-mono); font-size: 0.8125rem; line-height: 1.6; letter-spacing: 0.02em; color: var(--emm-muted); }
.emm #main-content .emm-section--framed.emm-warehouse .emm-body { grid-column: 4 / span 6 !important; }
@media (max-width: 1023px) {
  .emm #main-content .emm-stat,
  .emm #main-content .emm-section--framed.emm-warehouse .emm-body { grid-column: 1 / -1 !important; }
}

/* Homepage: E-commerce & Retail Operations, a specialisation within Digital (not a fifth world).
   Lime field with dark type (12:1), the shared media frame with the page's own SVG, thin-line areas. */
.emm #main-content .emm-ecom-feature {
  --emm-bg: var(--emm-lime);
  --emm-fg: var(--emm-dark);
  --emm-muted: var(--emm-dark);
  --emm-rule: rgba(35, 31, 32, 0.28);
  --emm-square: var(--emm-dark);
  --emm-focus: var(--emm-dark);
  background: var(--emm-lime);
  color: var(--emm-dark);
}
.emm .emm-ecom-feature__title h2 { font-size: clamp(2.25rem, 1rem + 4.2vw, 5rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.035em; max-width: 14ch; color: var(--emm-dark); }
.emm .emm-ecom-feature__body p { font-size: var(--emm-fs-lead); line-height: 1.45; max-width: 40ch; }
.emm .emm-ecom-feature__areas ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--emm-grid-gap); list-style: none; margin: 0; padding: 0; counter-reset: emm-area; }
.emm .emm-ecom-feature__areas li { counter-increment: emm-area; list-style: none; margin: 0; padding: 0.875rem 0; border-top: 1px solid var(--emm-rule); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.emm .emm-ecom-feature__areas li::before { content: counter(emm-area, decimal-leading-zero); margin-right: 0.75rem; font-family: var(--emm-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; }
@media (max-width: 479px) { .emm .emm-ecom-feature__areas ul { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1024px) {
  .emm .emm-ecom-feature__label { grid-column: 1 / span 7 !important; grid-row: 1; }
  .emm .emm-ecom-feature__title { grid-column: 1 / span 7 !important; grid-row: 2; }
  .emm .emm-ecom-feature__body { grid-column: 1 / span 6 !important; grid-row: 3; }
  .emm .emm-ecom-feature__areas { grid-column: 1 / span 6 !important; grid-row: 4; }
  .emm .emm-ecom-feature .et_pb_button_module_wrapper:has(> .emm-ecom-feature__link) { grid-column: 1 / span 7 !important; grid-row: 5; }
  .emm #main-content .emm-ecom-feature .emm-service-media { grid-row: 1 / 6; }
}

/* E-commerce feature from 1024px: the frame keeps its own proportion (5:6) and sits centred next to the text,
   instead of stretching to the text height; the composition stays fully inside with room around it. */
@media (min-width: 1024px) {
  .emm #main-content .emm-ecom-feature .emm-service-media { align-self: center; aspect-ratio: 5 / 6; min-height: 0; }
}

/* Homepage: organisations (social proof). (Divi 5 flex columns default to flex-direction: column, hence row.) Monochrome logos (EMM Dark web copies), one fixed optical height per
   logo type, so the row height is known before any script runs (no layout shift). emm.js turns the row into a
   slow marquee; with reduced motion, without JS and in the Visual Builder the logos stay a calm static row. */
.emm #main-content .emm-logos { padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0; border-bottom: 1px solid var(--emm-rule); overflow: hidden; }
.emm #main-content .emm-logos .et_pb_column { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: clamp(3rem, 2rem + 4vw, 6rem); row-gap: 1.5rem; }
.emm #main-content .emm-logos .emm-logos__label { flex: 0 0 100%; margin-bottom: clamp(0.5rem, 1vw, 1rem); }
.emm #main-content .emm-logo { flex: none; width: auto; margin: 0; }
.emm .emm-logo .et_pb_image_wrap { display: block; }
.emm .emm-logo img { display: block; width: auto; max-width: none; height: var(--emm-logo-h, 2.25rem); object-fit: contain; }
.emm .emm-logo--bold img { --emm-logo-h: 1.75rem; }  /* heavy wordmarks look larger at the same height */
.emm .emm-logo--tall img { --emm-logo-h: 4.25rem; }  /* upright logos need more height to read */
.emm .emm-logo--stacked img { --emm-logo-h: 3.5rem; } /* mark + two-line wordmark (light weight) */
@media (max-width: 639px) {
  .emm .emm-logo img { --emm-logo-h: 1.875rem; }
  .emm .emm-logo--bold img { --emm-logo-h: 1.5rem; }
  .emm .emm-logo--tall img { --emm-logo-h: 3.5rem; }
  .emm .emm-logo--stacked img { --emm-logo-h: 2.875rem; }
}
/* Marquee (added by emm.js): two identical halves, the track moves exactly one half. The row is one line from the
   first paint (label above it, out of the flow), so the script never changes its height. Owner's choice: it also
   moves with reduced motion (slow linear slide, no zoom or parallax), always with a visible pause button. */
.emm #main-content .emm-logos .et_pb_column { position: relative; flex-wrap: nowrap; padding-top: 2.25rem; }
.emm #main-content .emm-logos .emm-logos__label { position: absolute; top: 0; left: 0; margin: 0; }
.emm-logos__viewport { flex: 0 0 100%; overflow: hidden; }
.emm-logos__track { display: flex; align-items: center; width: max-content; animation: emm-marquee var(--emm-marquee-dur, 40s) linear infinite; }
.emm-logos__set { display: flex; flex: none; align-items: center; gap: clamp(3rem, 2rem + 4vw, 6rem); padding-right: clamp(3rem, 2rem + 4vw, 6rem); }
.emm-logos__viewport:hover .emm-logos__track,
.emm-logos.is-paused .emm-logos__track { animation-play-state: paused; }
@keyframes emm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* The global reduced-motion rule shortens every animation to 1ms; the marquee keeps its own pace. */
@media (prefers-reduced-motion: reduce) {
  .emm .emm-logos__track { animation-duration: var(--emm-marquee-dur, 40s) !important; animation-iteration-count: infinite !important; }
}
.emm-logos__toggle {
  position: absolute; top: -0.875rem; right: 0;
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--emm-mono); font-size: var(--emm-fs-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--emm-muted);
}
.emm-logos__toggle:hover { color: var(--emm-fg); text-decoration: underline; text-underline-offset: 0.3em; }
/* Phones: label and button do not fit on one line, so the button sits below the row (space reserved up front). */
@media (max-width: 639px) {
  .emm #main-content .emm-logos .et_pb_column { padding-bottom: 2.5rem; }
  .emm-logos__toggle { top: auto; bottom: -0.25rem; }
}
/* Visual Builder: no script runs there, so the logos wrap and stay visible and editable. */
html.et-vb-app-ancestor .emm #main-content .emm-logos .et_pb_column { flex-wrap: wrap; padding-top: 0; }
html.et-vb-app-ancestor .emm #main-content .emm-logos .emm-logos__label { position: static; flex: 0 0 100%; }
/* Homepage: platforms & tools. Supporting proof, typographic (names, no brand logos), one column per world. */
/* Supporting proof, so one step quieter than the main sections: smaller title and less vertical space. */
.emm #main-content .emm-platforms { padding-top: clamp(3.5rem, 2rem + 4vw, 6rem); padding-bottom: clamp(3.5rem, 2rem + 4vw, 6rem); }
.emm .emm-platforms .emm-section-title h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.emm #main-content .emm-platform-group { grid-column: span 3 !important; } /* four worlds, four columns */
/* The intro row runs to the edge (text keeps its measure), so the four groups always start a row together. */
@media (min-width: 1024px) { .emm .emm-platforms .emm-section-body { grid-column: 4 / -1 !important; } }
.emm .emm-platform-group h3 { margin: 0 0 0.75rem; font-family: var(--emm-mono); font-size: var(--emm-fs-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--emm-muted); }
.emm .emm-platform-group h3::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.7em; background: var(--emm-square); vertical-align: 0.05em; }
.emm .emm-platform-group.emm-world--digital h3::before { box-shadow: inset 0 0 0 1px var(--emm-dark); } /* lime on white needs an edge */
.emm .emm-platform-group.emm-world--cloud-security h3::before { background: var(--emm-dark); box-shadow: inset 0 0 0 1px var(--emm-blue); } /* as the Cloud tile elsewhere on light grounds, so it never reads as Brand */
.emm .emm-platform-group ul { list-style: none; margin: 0; padding: 0; }
.emm .emm-platform-group li { list-style: none; margin: 0; padding: 0.75rem 0; border-top: 1px solid var(--emm-rule); font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.emm .emm-platform-group .emm-platform-sub { display: block; margin-top: 0.25rem; font-family: var(--emm-mono); font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.02em; color: var(--emm-muted); }
@media (max-width: 1023px) { .emm #main-content .emm-platform-group { grid-column: span 6 !important; } }
@media (max-width: 639px) { .emm #main-content .emm-platform-group { grid-column: 1 / -1 !important; } }

/* 9c. Shared devices (C3) ================================================= */
/* Keep multi-word terms (e.g. "Identity & access") on one line in mono lists. */
.emm-nowrap { white-space: nowrap; }

/* The frame: EMM's closing device on neutral pages (hairline + viewfinder corners). */
.emm #main-content .emm-section--framed .et_pb_column,
.emm .emm-frame {
  position: relative;
  padding: clamp(2rem, 1rem + 4vw, 5.5rem);
  border: 1px solid var(--emm-rule);
}
.emm #main-content .emm-section--framed .et_pb_column::after,
.emm .emm-frame::after {
  content: "";
  position: absolute;
  inset: 0.75rem;
  pointer-events: none;
  --c: var(--emm-fg);
  --l: 1.5rem;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) 2px no-repeat,
    linear-gradient(var(--c), var(--c)) left top / 2px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--l) 2px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 2px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) 2px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 2px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) 2px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 2px var(--l) no-repeat;
}
.emm #main-content .emm-section--framed .emm-body { grid-column: 1 / span 7 !important; }
@media (max-width: 639px) {
  .emm #main-content .emm-section--framed .et_pb_column,
  .emm .emm-frame { padding: 2.5rem 1.5rem; }
  .emm #main-content .emm-section--framed .emm-body { grid-column: 1 / -1 !important; }
}

/* Mobile rhythm for long lists (C2 refinement) */
@media (max-width: 639px) {
  .emm #main-content .emm-cap {
    position: relative;
    padding-top: 1rem;
    border-top: 1px solid var(--emm-rule);
  }
  .emm #main-content .emm-cap::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 2.5rem;
    height: 3px;
    background: var(--emm-accent-rule);
  }
  .emm .emm-cap h3 { font-size: 1.125rem; margin-bottom: 0.375rem; }
  .emm .emm-cap p { font-size: 0.9375rem; line-height: 1.5; }
  .emm #main-content .emm-service-intro .et_pb_column { row-gap: 1.75rem; }
  /* Approach becomes a numbered timeline: the order is the information. */
  .emm #main-content .emm-approach .et_pb_column { row-gap: 0; }
  .emm #main-content .emm-approach .emm-section-label { margin-bottom: 0.75rem; }
  .emm #main-content .emm-approach .emm-section-title { margin-bottom: 2.25rem; }
  .emm #main-content .emm-step { padding: 0 0 2.25rem 3.25rem; border-top: 0; }
  .emm #main-content .emm-step::after { top: 2.5rem; bottom: 0.5rem; left: 1rem; width: 1px; height: auto; background: var(--emm-rule); }
  .emm #main-content .emm-step:last-child { padding-bottom: 0; }
  .emm #main-content .emm-step:last-child::after { display: none; }
  .emm .emm-step h3::before {
    position: absolute;
    left: -3.25rem; /* Divi's .et_pb_text_inner is position:relative; offset back to the step edge */
    top: -0.2rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin: 0;
    border: 1px solid var(--emm-world);
    color: var(--emm-fg);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
  }
}

/* Studio principles */
.emm #main-content .emm-principle {
  grid-column: span 4 !important;
  position: relative;
  padding-top: 1.5rem;
  border-top: 1px solid var(--emm-rule);
}
.emm #main-content .emm-principle::after { content: ""; position: absolute; top: -1px; left: 0; width: 3rem; height: 3px; background: var(--emm-world); }
.emm .emm-principle h3 { font-size: var(--emm-fs-h3); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 0.75rem; }
.emm .emm-principle p { color: var(--emm-muted); max-width: 36ch; }
@media (max-width: 1023px) { .emm #main-content .emm-principle { grid-column: 1 / -1 !important; } }

/* Werk index */
.emm-work-filter ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 clamp(2rem, 1rem + 2vw, 3rem); padding: 0; }
.emm-work-filter li { list-style: none; padding: 0; }
.emm-work-filter a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--emm-rule); color: var(--emm-fg); font-weight: 500; text-decoration: none; }
.emm-work-filter a:hover { border-color: var(--emm-fg); }
.emm-work-filter a[aria-current] { background: var(--emm-fg); color: var(--emm-bg); border-color: var(--emm-fg); }
.emm-admin-notice { padding: 1rem 1.25rem; border: 1px dashed var(--emm-mute); font-family: var(--emm-mono); font-size: 0.8125rem; line-height: 1.6; color: var(--emm-fg); }
.emm-admin-notice a { color: inherit; }
.emm-case-card__text { display: grid; gap: 0.5rem; justify-items: start; }
.emm-case-card__badge { padding: 0.125rem 0.5rem; background: var(--emm-dark); color: var(--emm-white); font-family: var(--emm-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; }
.emm-work-grid--single { grid-template-columns: minmax(0, 1fr); }
.emm-work-grid--single .emm-case-card { grid-column: 1 / -1 !important; }

/* 9d. Single case ========================================================= */
.emm-case { background: var(--emm-white); color: var(--emm-dark); }
.emm-case__inner { max-width: var(--emm-max); margin: 0 auto; padding: 0 var(--emm-gutter); }
.emm-case-hero {
  --emm-bg: var(--emm-dark);
  --emm-fg: var(--emm-white);
  --emm-muted: var(--emm-mute-dark);
  --emm-rule: var(--emm-line-dark);
  --emm-focus: var(--emm-lime);
  background: var(--emm-bg);
  color: var(--emm-fg);
  padding-top: clamp(3rem, 2rem + 5vw, 7rem);
}
.emm-case-hero__title { margin-top: 1.5rem; font-size: clamp(2.75rem, 1rem + 6vw, 7rem); font-weight: 800; line-height: 0.92; letter-spacing: -0.035em; max-width: 16ch; }
.emm-case-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem var(--emm-grid-gap); margin: clamp(2rem, 1rem + 3vw, 3.5rem) 0 0; padding: 1.5rem 0 clamp(2.5rem, 2rem + 3vw, 4rem); border-top: 1px solid var(--emm-rule); }
.emm-case-meta dt { font-family: var(--emm-mono); font-size: var(--emm-fs-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--emm-muted); }
.emm-case-meta dd { margin: 0.5rem 0 0; font-weight: 500; overflow-wrap: anywhere; }
.emm-case-meta__worlds { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.emm-case-meta__worlds a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; color: inherit; text-decoration: none; }
.emm-case-meta__worlds a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.emm-case-hero__media { margin: 0; background: var(--emm-dark-2); }
.emm-case-hero__media img,
.emm-case-hero__media video { display: block; width: 100%; height: auto; max-height: 88vh; object-fit: cover; }
.emm-case-block { padding: var(--emm-section-y) 0; }
.emm-case-intro__text { max-width: 30ch; font-size: clamp(1.375rem, 1rem + 1.6vw, 2.5rem); font-weight: 500; line-height: 1.28; letter-spacing: -0.015em; }
.emm-case-intro + .emm-case-story { padding-top: 0; }
.emm-case-story .emm-case__inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem var(--emm-grid-gap); }
.emm-case-story__item { padding-top: 1.5rem; border-top: 1px solid var(--emm-line); }
.emm-case-story__heading { display: flex; align-items: center; gap: 0.7em; margin-bottom: 1rem; font-family: var(--emm-mono); font-size: var(--emm-fs-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--emm-mute); }
.emm-case-story__heading::before { content: ""; width: 0.6em; height: 0.6em; background: var(--emm-square); }
.emm-case-story__text p { max-width: 42ch; }
.emm-case-body { background: var(--emm-white); }
.emm-case-result__text { font-size: var(--emm-fs-lead); max-width: 52ch; }
.emm-case-quote figure { margin: 0; max-width: 60rem; }
.emm-case-quote blockquote { margin: 0; padding: 0; border: 0; font-size: clamp(1.5rem, 1rem + 2vw, 3rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.emm-case-quote figcaption { margin-top: 1.5rem; font-family: var(--emm-mono); font-size: 0.875rem; }
.emm-case-quote figcaption span { display: block; color: var(--emm-mute); }
.emm-case-next { border-top: 1px solid var(--emm-line); }
.emm-case-next .emm-label { margin-bottom: 1.5rem; }
.emm-case-cta .emm-case__inner { display: grid; justify-items: start; gap: 2rem; }
.emm-case-cta__title { font-size: clamp(2.25rem, 1rem + 5vw, 6rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.035em; max-width: 14ch; }
@media (max-width: 1023px) {
  .emm-case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emm-case-story .emm-case__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .emm-case-meta { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* Compact hero for task pages (Contact): the form comes first. */
.emm #main-content .emm-service-hero.emm-hero--compact { padding: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) 0; }
.emm .emm-hero--compact .emm-service-hero__title h1 { font-size: clamp(2.5rem, 1rem + 5vw, 5.5rem); }
.emm #main-content .emm-contact { padding-top: clamp(3rem, 2rem + 3vw, 5rem); }

/* 9e. Contact form (native Divi contact form, EMM styling) ================= */
.emm .emm-contact-aside { grid-column: 1 / span 4 !important; }
.emm #main-content .emm-contact-form { grid-column: 6 / -1 !important; }
.emm .emm-contact-steps ol { list-style: none; margin: 1rem 0 0; padding: 0; counter-reset: emm-cstep; display: grid; gap: 1rem; }
.emm .emm-contact-steps li { counter-increment: emm-cstep; display: grid; grid-template-columns: 2rem 1fr; gap: 0.75rem; padding: 0; }
.emm .emm-contact-steps li::before { content: counter(emm-cstep, decimal-leading-zero); font-family: var(--emm-mono); font-size: 0.8125rem; color: var(--emm-mute); padding-top: 0.2rem; }
.emm .emm-contact-form .et_pb_contact { width: 100%; }
.emm .emm-contact-form form.et_pb_contact_form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem var(--emm-grid-gap); margin: 0; }
.emm .emm-contact-form .et_pb_contact_field,
.emm .emm-contact-form .et_pb_contact_field_half,
.emm .emm-contact-form .et_pb_contact_field_last {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.5rem;
  align-content: start;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  clear: none !important;
}
/* Two-up pairs by field ID (Divi 5 renders every field as a full-width flex column). */
.emm .emm-contact-form .et_pb_contact_field:is([data-id="naam"], [data-id="organisatie"], [data-id="email"], [data-id="telefoon"], [data-id="planning"], [data-id="budget"]) { grid-column: span 1; }
.emm .emm-contact-form .et_pb_contact_field[data-type="select"]::after { display: none !important; }
.emm .emm-contact-form p[data-id="et_number"] { grid-column: 1 / -1; }
.emm .emm-contact-form .et_pb_contact_form_label {
  display: block !important;
  position: static !important;
  font-family: var(--emm-font);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--emm-dark);
}
.emm .emm-contact-form .is-required .et_pb_contact_form_label::after { content: " *" / ""; }
.emm .emm-contact-form .input {
  width: 100% !important;
  min-height: 3rem;
  padding: 0.75rem 1rem !important;
  border: 1px solid var(--emm-mute) !important;
  border-radius: 0 !important;
  background: var(--emm-white) !important;
  color: var(--emm-dark) !important;
  font-family: var(--emm-font) !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
}
.emm .emm-contact-form textarea.input { min-height: 10rem; resize: vertical; }
.emm .emm-contact-form select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem !important;
  background: var(--emm-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23231f20' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 1rem center !important;
}
.emm .emm-contact-form .input:focus { border-color: var(--emm-dark) !important; outline: 2px solid var(--emm-blue); outline-offset: 2px; }
.emm .emm-contact-form .has-error .input,
.emm .emm-contact-form .input[aria-invalid="true"] { border: 2px solid var(--emm-orange) !important; }
.emm .emm-field-error,
.emm .emm-form-summary { display: flex; align-items: baseline; gap: 0.5rem; margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--emm-dark); }
.emm .emm-field-error::before,
.emm .emm-form-summary::before { content: ""; flex: none; width: 0.6rem; height: 0.6rem; background: var(--emm-orange); }
.emm .emm-form-summary { grid-column: 1 / -1; font-size: 1rem; font-weight: 600; }
.emm .emm-contact-form .et_contact_bottom_container { grid-column: 1 / -1; display: flex; justify-content: flex-start; float: none !important; margin: 0.5rem 0 0 !important; }
body.emm #page-container .emm-contact-form .et_pb_contact_submit {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.875rem;
  min-height: 3rem;
  margin: 0 !important;
  padding: 0.75rem 1.375rem !important;
  border: 1px solid var(--emm-dark) !important;
  border-radius: 0 !important;
  background: var(--emm-dark) !important;
  color: var(--emm-white) !important;
  font-family: var(--emm-font) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  cursor: pointer;
}
body.emm #page-container .emm-contact-form .et_pb_contact_submit::after {
  content: "" !important;
  position: static !important;
  display: inline-block !important;
  width: 0.625rem;
  height: 0.625rem;
  margin: 0 !important;
  opacity: 1 !important;
  background: var(--emm-square);
  font-family: var(--emm-font) !important;
  font-size: 0 !important;
}
body.emm #page-container .emm-contact-form .et_pb_contact_submit::before { display: none !important; font-family: var(--emm-font) !important; content: none !important; }
body.emm #page-container .emm-contact-form .et_pb_contact_submit:hover { background: var(--emm-blue) !important; border-color: var(--emm-blue) !important; }
body.emm #page-container .emm-contact-form .et_pb_contact_submit:hover::after { background: var(--emm-white); }
/* Spam protection: Divi's native sum question, above the button, in the field style. */
.emm .emm-contact-form .et_contact_bottom_container { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.emm .emm-contact-form .et_pb_contact_right { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; text-align: left; }
.emm .emm-contact-form .et_pb_contact_right p { margin: 0; padding: 0; }
.emm .emm-contact-form .et_pb_contact_right label { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; font-weight: 500; }
.emm .emm-contact-form .emm-captcha__label { font-weight: 500; }
.emm .emm-contact-form .et_pb_contact_captcha_question { font-family: var(--emm-mono); font-weight: 500; }
.emm .emm-contact-form input.et_pb_contact_captcha { width: 5rem !important; min-width: 0; text-align: center; }
.emm .emm-contact-form .et_pb_contact_right .emm-field-error { flex-basis: 100%; }
.emm .emm-contact-form .et-pb-contact-message { grid-column: 1 / -1; margin-bottom: 1.5rem; font-weight: 500; }
.emm .emm-contact-form .et-pb-contact-message:empty { display: none; }
.emm .emm-form-note p { font-size: 0.875rem; color: var(--emm-mute); }
.emm #main-content .emm-form-note { grid-column: 6 / -1 !important; }
.emm #main-content .emm-contact-title { grid-column: 6 / -1 !important; }
.emm .emm-contact-aside__title h2,
.emm .emm-contact-title h2 { font-size: var(--emm-fs-h3); line-height: 1.1; letter-spacing: -0.02em; }
.emm .emm-contact-place { margin-top: 2rem; }
.emm #main-content .emm-studio-intro .emm-section-label--gap { grid-column: 1 / -1 !important; }@media (max-width: 1023px) {
  .emm #main-content .emm-contact-title,
  .emm .emm-contact-aside,
  .emm #main-content .emm-contact-form,
  .emm #main-content .emm-form-note { grid-column: 1 / -1 !important; }
  /* Form first on smaller screens; 'what happens next' follows. */
  .emm #main-content .emm-contact-title { order: 1; }
  .emm #main-content .emm-contact-form { order: 2; }
  .emm #main-content .emm-form-note { order: 3; }
  .emm #main-content .emm-contact-aside__title { order: 4; margin-top: 2rem; }
  .emm #main-content .emm-contact-steps { order: 5; }
}
@media (max-width: 639px) {
  .emm .emm-contact-form .et_pb_contact_field:is([data-id="naam"], [data-id="organisatie"], [data-id="email"], [data-id="telefoon"], [data-id="planning"], [data-id="budget"]) { grid-column: 1 / -1; }
}
/* 10. Work grid =========================================================== */
.emm-work-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2.5rem, 1.5rem + 3vw, 5rem) var(--emm-grid-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.emm-case-card { grid-column: 1 / -1; list-style: none; padding: 0; }
.emm-case-card__link { display: grid; gap: 0.875rem; color: inherit; text-decoration: none; }
.emm-case-card__media { display: block; overflow: hidden; background: var(--emm-paper-2); aspect-ratio: 16 / 9; }
.emm-case-card--4x5 .emm-case-card__media { aspect-ratio: 4 / 5; }
.emm-case-card--1x1 .emm-case-card__media { aspect-ratio: 1 / 1; }
.emm-case-card--239x100 .emm-case-card__media { aspect-ratio: 2.39 / 1; }
.emm-case-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--emm-ease); }
.emm-case-card__link:hover img { transform: scale(1.02); }
.emm-case-card__title { font-size: var(--emm-fs-h3); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.emm-case-card__link:hover .emm-case-card__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.emm-case-card__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; color: var(--emm-muted); }
.emm-case-card__world { display: inline-flex; align-items: center; gap: 0.5rem; }
@media (min-width: 768px) {
  .emm-case-card { grid-column: span 6; }
}
@media (min-width: 1024px) {
  .emm-case-card:nth-child(4n + 1) { grid-column: 1 / span 8; }
  .emm-case-card:nth-child(4n + 2) { grid-column: 9 / span 4; align-self: end; }
  .emm-case-card:nth-child(4n + 3) { grid-column: 1 / span 5; }
  .emm-case-card:nth-child(4n + 4) { grid-column: 6 / span 7; }
}

/* 10b. Text pages (privacy) ================================================ */
.emm #main-content .emm-legal .et_pb_column { row-gap: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); }
@media (min-width: 1024px) {
  .emm #main-content .emm-legal .emm-legal__chapter { grid-column: 1 / span 8; }
}
.emm .emm-legal h2 { margin: 0 0 1rem; font-size: var(--emm-fs-h3); line-height: 1.15; letter-spacing: -0.02em; }
.emm .emm-legal h3 { margin: 1.75rem 0 0.5rem; font-size: 1.125rem; font-weight: 700; }
.emm .emm-legal p,
.emm .emm-legal li { font-size: 1.0625rem; line-height: 1.65; }
.emm .emm-legal p + p { margin-top: 0.875rem; }
.emm .emm-legal ul { margin: 0.75rem 0 0; padding-left: 1.25rem; }
.emm .emm-legal li { padding: 0.125rem 0; }
.emm .emm-legal a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.emm .emm-legal__updated { margin-top: 3rem; color: var(--emm-muted); }

/* Editor-only notes ([emm_editor_note]); never rendered for visitors. */
.emm .emm-editor-note { margin: 1rem 0; padding: 0.75rem 1rem; border: 2px dashed var(--emm-orange); background: #FFF6F3; color: var(--emm-dark); font-size: 0.9375rem; line-height: 1.5; }

/* 10c. Hero showreel (prepared) ============================================
   A Divi Video module with class "emm-hero__media" (or "emm-service-media") fills the
   same frame as the image. emm.js makes it muted/looping/inline, starts it only without
   reduced motion, and adds a pause button (WCAG 2.2.2). Specs: docs/showreel-spec.md. */
.emm .emm-hero__media .et_pb_video_box,
.emm .emm-service-media .et_pb_video_box { position: absolute; inset: 0; }
.emm .emm-hero__media video,
.emm .emm-service-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.emm .emm-hero__media .et_pb_video_overlay,
.emm .emm-service-media .et_pb_video_overlay { display: none !important; }
.emm-video-toggle {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 0;
  background: rgba(35, 31, 32, 0.72);
  color: var(--emm-white);
  font: 500 0.8125rem/1 var(--emm-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.emm-video-toggle:hover { background: var(--emm-dark); border-color: var(--emm-white); }
.emm-video-toggle:focus-visible { outline: 2px solid var(--emm-lime); outline-offset: 2px; }
.emm-video-toggle__icon { width: 0.625rem; height: 0.625rem; background: var(--emm-square); }

/* 10d. Motion prototype (homepage only) ====================================
   Active only with html.emm-motion (set in <head> on the homepage when the visitor does not
   prefer reduced motion). Hero entrance = CSS, so it starts at first paint; transforms,
   opacity and clip-path only (no layout shift). Scroll reveals: assets/js/emm-motion.js. */
.emm .emm-hero__title .emm-line { display: block; }
@keyframes emm-rise { from { opacity: 0; transform: translateY(var(--emm-rise, 0.3em)); } to { opacity: 1; transform: none; } }
@keyframes emm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes emm-frame-draw { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes emm-viewfinder { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .emm-motion .emm-hero__title .emm-line { animation: emm-rise 900ms var(--emm-ease) both; animation-delay: calc(60ms + var(--emm-i, 0) * 90ms); }
  .emm-motion .emm-hero__title .emm-line:nth-child(2) { --emm-i: 1; }
  .emm-motion .emm-hero__title .emm-line:nth-child(3) { --emm-i: 2; }
  .emm-motion .emm-hero__title .emm-line:nth-child(4) { --emm-i: 3; }
  .emm-motion .emm-hero__eyebrow { animation: emm-fade 600ms ease both; }
  .emm-motion .emm-hero__lead,
  .emm-motion .emm-hero .et_pb_button_module_wrapper { --emm-rise: 0.75rem; animation: emm-rise 800ms var(--emm-ease) 520ms both; }
  /* EMM frame: the hairline draws in, the viewfinder corners settle. The image itself stays visible. */
  .emm-motion .emm-hero__media::before { animation: emm-frame-draw 1100ms var(--emm-ease) 200ms both; }
  .emm-motion .emm-hero__media::after { animation: emm-viewfinder 900ms var(--emm-ease) 450ms both; }
  /* Service rows: the number tile starts as an outline and floods with its world colour. */
  .emm-motion-ready .emm-services .emm-world-row h3::before { transition: background-color 700ms var(--emm-ease) 120ms, color 700ms var(--emm-ease) 120ms, box-shadow 700ms var(--emm-ease) 120ms; }
  .emm-motion-ready .emm-services .emm-world-row:not(.is-in) h3::before { background: transparent; color: var(--emm-fg); box-shadow: inset 0 0 0 1px var(--emm-rule); }
  /* Colour worlds: the header's logo square follows the service row on the reading line. */
  .emm-header .emm-mark__square { transition: fill 500ms var(--emm-ease); }
  .emm-header[data-emm-live-world="digital"] .emm-mark__square { fill: var(--emm-lime); }
  .emm-header[data-emm-live-world="content"] .emm-mark__square { fill: var(--emm-orange); }
  .emm-header[data-emm-live-world="cloud-security"] .emm-mark__square { fill: var(--emm-white); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 639px) {
  /* Phones: one short, simple entrance. */
  .emm-motion .emm-hero__title .emm-line { --emm-rise: 0.15em; animation-duration: 600ms; animation-delay: calc(40ms + var(--emm-i, 0) * 50ms); }
  .emm-motion .emm-hero__lead,
  .emm-motion .emm-hero .et_pb_button_module_wrapper { animation-delay: 320ms; animation-duration: 600ms; }
}

/* 11. Utilities & motion ================================================== */
.emm-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .emm *, .emm *::before, .emm *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .emm-header.is-hidden { transform: none; }
  .emm-case-card__link:hover img { transform: none; }
}