/* =============================================================================
   Expert Middle East — design system
   One file, one request. Ordered: tokens → reset → typography → layout →
   components → sections → utilities → RTL → motion.

   Written with CSS logical properties (margin-inline, inset-inline-start,
   text-align:start) so the Arabic build is genuinely right-to-left rather than
   a mirrored hack. Adding a rule with `left`/`right` breaks that — use logical
   properties instead.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  /* Brand */
  --eme-red: #da2127;
  --eme-red-dark: #a8141a;
  --eme-red-deep: #7c1b1e;
  --eme-red-ink: #4b1417;
  --eme-ember: #e8702a;
  --eme-obsidian: #1a1c1e;
  --eme-night: #0d0f10;
  --eme-graphite: #4a4d50;
  --eme-chalk: #f2f5f7;
  --eme-white: #ffffff;

  /* Surfaces & lines */
  --eme-bg: var(--eme-white);
  --eme-bg-alt: var(--eme-chalk);
  --eme-bg-dark: var(--eme-obsidian);
  --eme-line: #dde1e5;
  --eme-line-strong: #c3c9cf;
  --eme-line-dark: #2e3235;

  /* Text */
  --eme-text: var(--eme-obsidian);
  --eme-text-muted: #62676c;
  --eme-text-invert: var(--eme-white);
  --eme-text-invert-muted: #a8aeb4;

  /* History page (existing template keeps its own palette) */
  --eme-history-bg: #eeebe5;
  --eme-text-history: #1a1a1a;

  /* Type */
  --eme-font-latin: "Poppins", "Segoe UI", system-ui, sans-serif;
  --eme-font-arabic: "Noto Kufi Arabic", "Segoe UI", system-ui, sans-serif;
  --eme-font: var(--eme-font-latin);

  /* One fluid scale, 360px → 1920px. Every step is larger than the one below
     it at every width (step-1 used to collapse to 1rem, under step-0), and the
     ratio opens up as the screen grows so a wide monitor gets real hierarchy. */
  --eme-step--1: clamp(0.75rem, 0.736rem + 0.064vw, 0.8125rem); /* 12 → 13 */
  --eme-step-0: clamp(0.9375rem, 0.923rem + 0.064vw, 1rem); /* 15 → 16 */
  --eme-step-1: clamp(1rem, 0.978rem + 0.096vw, 1.094rem); /* 16 → 17.5 */
  --eme-step-2: clamp(1.0625rem, 1.005rem + 0.256vw, 1.3125rem); /* 17 → 21 */
  --eme-step-3: clamp(1.1875rem, 1.072rem + 0.513vw, 1.6875rem); /* 19 → 27 */
  --eme-step-4: clamp(1.4375rem, 1.25rem + 0.833vw, 2.25rem); /* 23 → 36 */
  --eme-step-5: clamp(1.75rem, 1.404rem + 1.538vw, 3.25rem); /* 28 → 52 */

  /* Space */
  --eme-space-1: 0.25rem;
  --eme-space-2: 0.5rem;
  --eme-space-3: 0.75rem;
  --eme-space-4: 1rem;
  --eme-space-5: 1.5rem;
  --eme-space-6: 2rem;
  --eme-space-7: 3rem;
  --eme-space-8: 4rem;
  --eme-space-9: 6rem;

  /* The page breathes with the screen: content runs gutter to gutter up to a
     1920px canvas, and only an ultra-wide monitor sees margins beyond that.
     Line length is held by ch caps on text, never by squeezing the layout. */
  --eme-container: 120rem;
  --eme-gutter: clamp(1.25rem, 6vw, 9rem);
  --eme-section: clamp(3.5rem, 7vw, 8rem);

  /* The brand angle: the slash in the logo, the hero blade, the pager bars and
     the plate under each machine all lean by the same amount. */
  --eme-slant: -10deg;

  --eme-header-h: 76px;
  /* The floating bar's top padding (.site-header--over); a cover page clears
     the bar by it too. Phones set it to nothing (see the header). */
  --eme-over-pad: 2rem;
  --eme-z-float: 800;
  --eme-z-header: 900;
  --eme-z-drawer: 950;

  --eme-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --eme-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --eme-fast: 160ms;
  --eme-med: 320ms;
  --eme-slow: 900ms;
}

html[lang="ar"] {
  --eme-font: var(--eme-font-arabic);
}

/* ------------------------------------------------------------------- reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--eme-header-h) + 1rem);
}

/* The canvas: what a phone shows past either end of the page (the bounce, and
   on iOS the strip under the floating toolbar at the foot). It takes the colour
   of the end on show: the footer's dark once the reader is in the lower half
   (site.js sets is-near-foot), the bar's own ground above that, dark where the
   bar floats over a dark cover. The paper page is paper at both ends. */
html {
  background-color: var(--eme-white);
}
html.is-near-foot,
html:has(.site-header--over) {
  background-color: var(--eme-obsidian);
}
html:has(> body.page--paper) {
  background-color: var(--eme-history-bg);
}

body {
  margin: 0;
  background: var(--eme-bg);
  color: var(--eme-text);
  font-family: var(--eme-font);
  font-size: var(--eme-step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
/* A phone number is written left to right in both languages: without this the
   Arabic pages set "+20 100 074 9984" as "9984 074 100 20+". */
a[href^="tel:"] {
  direction: ltr;
  unicode-bidi: isolate;
}
button {
  font: inherit;
  color: inherit;
}

/* The brand is built on right angles. Applied to controls and containers —
   never as a global wildcard, which squares off intentionally circular UI. */
button,
input,
textarea,
select,
.btn,
.card,
.chip,
.panel,
.field__input,
.spec-table,
.badge {
  border-radius: 0;
}

:focus-visible {
  outline: 2px solid var(--eme-red);
  outline-offset: 2px;
}

/* -------------------------------------------------------------- typography */
h1,
h2,
h3,
h4 {
  margin: 0 0 var(--eme-space-4);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.015em;
}
h1 {
  font-size: var(--eme-step-4);
}
h2 {
  font-size: var(--eme-step-3);
}
h3 {
  font-size: var(--eme-step-2);
}
h4 {
  font-size: var(--eme-step-1);
}
h1,
h2,
h3 {
  text-wrap: balance;
}
p {
  margin: 0 0 var(--eme-space-4);
  font-size: var(--eme-step-0);
  line-height: 1.65;
  text-wrap: pretty;
}
p:last-child {
  margin-bottom: 0;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 {
  letter-spacing: 0;
  line-height: 1.35;
}

.lead {
  font-size: var(--eme-step-1);
  line-height: 1.55;
  color: var(--eme-text-muted);
  max-width: 62ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--eme-space-2);
  margin-block-end: var(--eme-space-3);
  font-size: var(--eme-step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--eme-red);
}
.eyebrow::before {
  content: "";
  inline-size: 28px;
  block-size: 2px;
  background: var(--eme-red);
}
html[lang="ar"] .eyebrow {
  letter-spacing: 0;
}
/* An eyebrow that names another page links to it: the rule reaches out on hover. */
a.eyebrow::before {
  transition: inline-size 240ms var(--eme-ease-out);
}
a.eyebrow:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
a.eyebrow:hover::before {
  inline-size: 40px;
}
@media (prefers-reduced-motion: reduce) {
  a.eyebrow::before {
    transition: none;
  }
}

/* ------------------------------------------------------------------ layout */
.container {
  inline-size: 100%;
  max-inline-size: var(--eme-container);
  margin-inline: auto;
  padding-inline: var(--eme-gutter);
}

.section {
  padding-block: var(--eme-section);
}
.section--alt {
  background: var(--eme-bg-alt);
}
.section--dark {
  background: var(--eme-bg-dark);
  color: var(--eme-text-invert);
}
.section--dark .lead,
.section--dark .card__meta {
  color: var(--eme-text-invert-muted);
}
.section--tight {
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

.section-head {
  max-inline-size: 68ch;
  margin-block-end: var(--eme-space-7);
}
.section-head--split {
  max-inline-size: none;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--eme-space-5);
}

/* ---------------------------------------------------- section heads
   One head for the home page's own sections (Solutions by Sector, Why Choose
   Us): a red blade at the brand's angle beside a light lead line and a bold
   title, an optional red tag under them, and an aside (a paragraph or a link)
   standing at the far end, on the line the title ends on. Light by default;
   the dark tone turns the words white. */
.home-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
  align-items: end;
}
.home-head__blade {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  inline-size: clamp(0.5rem, 0.35rem + 0.4vw, 0.8rem);
  margin-block: 0.35em 0.15em;
  background: var(--eme-red);
  transform: skewX(var(--eme-slant));
  transform-origin: 50% 100%;
}
.home-head__title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  color: var(--eme-text);
}
.home-head__lead {
  display: block;
  font-size: clamp(1.125rem, 0.9rem + 0.9vw, 1.875rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--eme-text-muted);
}
.home-head__main {
  display: block;
  font-size: clamp(2rem, 1.4rem + 1.8vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.home-head__tag {
  grid-column: 2;
  grid-row: 2;
  margin: 0.7rem 0 0;
  font-size: var(--eme-step-1);
  font-weight: 500;
  color: var(--eme-red);
}
.home-head__aside {
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-self: end;
  max-inline-size: 44ch;
}
.home-head__aside p {
  margin: 0;
  font-size: var(--eme-step-0);
  line-height: 1.7;
  color: var(--eme-text-muted);
}
.home-head__aside p + .line-link {
  margin-block-start: var(--eme-space-4);
}
html[lang="ar"] .home-head__main {
  line-height: 1.4;
  letter-spacing: 0;
}
html[lang="ar"] .home-head__lead {
  line-height: 1.5;
}
.home-head--dark .home-head__title {
  color: var(--eme-white);
}
.home-head--dark .home-head__lead {
  color: rgba(255, 255, 255, 0.86);
}
.home-head--dark .home-head__aside p {
  color: rgba(255, 255, 255, 0.64);
}
/* The aside stands beside the title only once there is room for both: on a
   tablet it squeezed "Signature Projects" onto two lines. */
@media (max-width: 61.99rem) {
  .home-head {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .home-head__aside {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    margin-block-start: 1.25rem;
  }
}

/* In Arabic the blade stands at the right edge and keeps the brand's lean, so
   its top leans outward: under a tall head on a phone (Contact's title runs to
   four lines) the tip ran off the screen. Leaning about its middle keeps it
   inside the gutter and clear of the title. */
@media (max-width: 35.99rem) {
  html[dir="rtl"] .home-head__blade {
    transform-origin: 50% 50%;
  }
}

.home-head--dark .line-link {
  --link: rgba(255, 255, 255, 0.82);
  --link-hover: var(--eme-white);
}

.grid {
  display: grid;
  gap: var(--eme-space-5);
}
/* The modifier is a ceiling as well as a hint: each track is at least its
   share of the row, so a wide screen gets bigger tiles, never extra columns
   (a --3 grid on the fluid canvas would otherwise run five across). */
.grid--2 {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, max(22rem, (100% - 1.5rem) / 2)), 1fr)
  );
}
.grid--3 {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, max(18rem, (100% - 3rem) / 3)), 1fr)
  );
}
.grid--4 {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, max(14rem, (100% - 4.5rem) / 4)), 1fr)
  );
}
/* Exactly three items (the three factories, three related products) on a
   tablet: three across, rather than two and one left alone on a second row. */
@media (min-width: 48rem) {
  .grid--3:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Five across at container width: a sector row that is one row, not two. */
.grid--5 {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, max(12.5rem, (100% - 6rem) / 5)), 1fr)
  );
}

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--eme-space-4);
  z-index: 1000;
  padding: var(--eme-space-3) var(--eme-space-4);
  background: var(--eme-obsidian);
  color: var(--eme-white);
}
.skip-link:focus {
  inset-block-start: var(--eme-space-3);
}

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--eme-space-2);
  padding: 0.85em 1.7em;
  border: 1px solid transparent;
  background: var(--eme-red);
  color: var(--eme-white);
  font-size: var(--eme-step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background var(--eme-fast) var(--eme-ease),
    color var(--eme-fast) var(--eme-ease),
    border-color var(--eme-fast) var(--eme-ease);
}
.btn:hover {
  background: var(--eme-red-dark);
}
.btn--ghost {
  background: transparent;
  border-color: currentColor;
  color: var(--eme-text);
}
.hero .btn--ghost {
  border-color: white;
  color: var(--eme-white);
}
.btn--ghost:hover {
  background: var(--eme-obsidian);
  border-color: var(--eme-obsidian);
  color: var(--eme-white);
}
.hero .btn--ghost:hover {
  background-color: var(--eme-obsidian);
  border-color: var(--eme-red);
  color: var(--eme-red);
}

.section--dark .btn--ghost {
  color: var(--eme-white);
}
.section--dark .btn--ghost:hover {
  background: var(--eme-white);
  color: var(--eme-obsidian);
}
.btn--dark {
  background: var(--eme-obsidian);
}
.btn--dark:hover {
  background: #000;
}
.btn--sm {
  padding: 0.6em 1.2em;
}
.btn--block {
  inline-size: 100%;
}
html[lang="ar"] .btn {
  letter-spacing: 0;
  text-transform: none;
}

/* A small uppercase link over a hairline, with an arrow that steps forward on
   hover. It takes its colour from --link, so one rule serves light and dark. */
.line-link {
  --link: var(--eme-text);
  --link-hover: var(--eme-red);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding-block: 0.3rem;
  font-size: var(--eme-step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--link);
  border-block-end: 1px solid rgba(128, 128, 128, 0.4);
  border-block-end-color: color-mix(in srgb, var(--link) 30%, transparent);
  transition:
    color var(--eme-fast) var(--eme-ease),
    border-color var(--eme-fast) var(--eme-ease);
}
html[lang="ar"] .line-link {
  letter-spacing: 0;
  text-transform: none;
}
.line-link svg {
  flex: none;
  transition: transform 320ms var(--eme-ease-out);
}
html[dir="rtl"] .line-link svg {
  transform: scaleX(-1);
}
.line-link:hover {
  color: var(--link-hover);
  border-color: var(--eme-red);
}
.line-link:hover svg {
  transform: translateX(5px);
}
html[dir="rtl"] .line-link:hover svg {
  transform: scaleX(-1) translateX(5px);
}
.line-link:focus-visible {
  outline: 2px solid var(--eme-red);
  outline-offset: 4px;
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--eme-space-2);
  font-weight: 600;
  color: var(--eme-red);
}
.link-arrow::after {
  content: "→";
  transition: transform var(--eme-fast) var(--eme-ease);
}
html[dir="rtl"] .link-arrow::after {
  content: "←";
}
.link-arrow:hover::after {
  transform: translateX(4px);
}
html[dir="rtl"] .link-arrow:hover::after {
  transform: translateX(-4px);
}

/* ------------------------------------------------------------------ header */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--eme-z-header);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--eme-line);
  transition:
    box-shadow var(--eme-med) var(--eme-ease),
    background-color var(--eme-med) var(--eme-ease),
    border-color var(--eme-med) var(--eme-ease),
    transform 480ms var(--eme-ease-out);
}
.site-header.is-scrolled {
  box-shadow: 0 10px 30px rgba(26, 28, 30, 0.08);
}
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.5rem);
  block-size: var(--eme-header-h);
}
.site-header__logo {
  flex: none;
  display: inline-flex;
  align-items: center;
}
.site-header__logo img {
  block-size: clamp(28px, 1.5rem + 0.3vw, 36px);
  inline-size: auto;
}
.logo-white {
  display: none;
}

.site-nav {
  display: none;
  align-self: stretch;
  margin-inline-start: auto;
}
.site-nav__list {
  display: flex;
  align-items: stretch;
  gap: clamp(1rem, 1.7vw, 2.5rem);
  block-size: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Each item is as tall as the bar, so the pointer never leaves it on its way
   down into the mega menu. */
.site-nav__list > li {
  display: flex;
  align-items: center;
}
.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-block: 0.5rem;
  font-size: var(--eme-step--1);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--eme-fast) var(--eme-ease);
}
.site-nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background: var(--eme-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms var(--eme-ease-out);
}
html[dir="rtl"] .site-nav__link::after {
  transform-origin: right;
}
.site-nav__link:hover {
  color: var(--eme-red);
}
.site-nav__link:hover::after,
.site-nav__link[aria-current="true"]::after,
.has-mega:focus-within > .site-nav__link::after,
.has-mega:hover > .site-nav__link::after {
  transform: scaleX(1);
}
/* While its menu is open, the item it hangs from stays marked. */
.has-mega:hover > .site-nav__link,
.has-mega:focus-within > .site-nav__link {
  color: var(--eme-red);
}
html[lang="ar"] .site-nav__link {
  letter-spacing: 0;
  text-transform: none;
  font-size: clamp(0.875rem, 0.84rem + 0.13vw, 0.975rem);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.2vw, 1.5rem);
  margin-inline-start: auto;
}
.lang-switch {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--eme-line-strong);
  font-size: var(--eme-step--1);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition:
    border-color var(--eme-fast) var(--eme-ease),
    background-color var(--eme-fast) var(--eme-ease);
}
html[lang="en"] .lang-switch,
html[lang="en"] .drawer__lang {
  font-family: var(--eme-font-arabic);
}
html[lang="ar"] .lang-switch,
html[lang="ar"] .drawer__lang {
  font-family: var(--eme-font-latin);
}
.lang-switch:hover {
  border-color: var(--eme-obsidian);
}
.site-header__cta {
  display: none;
  align-items: center;
  min-block-size: 44px;
  padding: 0.7em 1.35em;
  border: 1px solid var(--eme-red);
  background: var(--eme-red);
  color: var(--eme-white);
  font-size: var(--eme-step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color var(--eme-fast) var(--eme-ease),
    border-color var(--eme-fast) var(--eme-ease),
    color var(--eme-fast) var(--eme-ease);
}
.site-header__cta:hover {
  background: var(--eme-red-dark);
  border-color: var(--eme-red-dark);
}
html[lang="ar"] .site-header__cta {
  letter-spacing: 0;
  text-transform: none;
}

/* Mega menu. The product and sector panels span the bar, measured from the
   container; the short lists (About, Quality) drop from their own item. */
.has-mega:has(> .mega--list) {
  position: relative;
}
.mega {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: var(--eme-gutter);
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
  background: var(--eme-white);
  border: 1px solid var(--eme-line);
  border-block-start: 3px solid var(--eme-red);
  box-shadow: 0 28px 60px rgba(26, 28, 30, 0.16);
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 160ms var(--eme-ease),
    transform 240ms var(--eme-ease-out),
    visibility 0s linear 240ms;
}
.mega--list {
  inset-inline: auto;
  inset-inline-start: -1.5rem;
  min-inline-size: 17rem;
  padding: 1.25rem 1.5rem;
}
.has-mega:hover > .mega,
.has-mega:focus-within > .mega,
.has-mega[data-open="true"] > .mega {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity 200ms var(--eme-ease) 60ms,
    transform 320ms var(--eme-ease-out) 60ms,
    visibility 0s;
}
.mega__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--eme-space-5) var(--eme-space-6);
}
.mega__title {
  display: block;
  margin-block-end: var(--eme-space-2);
  font-size: var(--eme-step-0);
  font-weight: 600;
  line-height: 1.3;
}
.mega__title:hover {
  color: var(--eme-red);
}
.mega__meta {
  font-size: var(--eme-step--1);
  line-height: 1.45;
  color: var(--eme-text-muted);
  margin-block-end: var(--eme-space-3);
  display: none;
}
.mega__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.24rem;
}
.mega__list li {
  line-height: 1;
}
.mega__list a {
  font-size: var(--eme-step--1);
  line-height: 1;
  color: var(--eme-text-muted);
}
.mega__list a:hover {
  color: var(--eme-red);
}
/* The short lists (Projects, Quality & Trust, About) are menus in their own
   right: each entry is a row on one line, tall enough to aim at, marked with a
   red rule on its start edge when pointed at. The panel grows to the longest. */
.mega--list {
  padding: 0.6rem 0;
}
.mega--list .mega__list {
  gap: 0;
}
.mega--list .mega__list li {
  line-height: inherit;
}
.mega--list .mega__list a {
  position: relative;
  display: block;
  padding: 0.62rem 1.5rem;
  font-size: var(--eme-step-0);
  line-height: 1.35;
  color: var(--eme-text);
  white-space: nowrap;
  transition:
    color var(--eme-fast) var(--eme-ease),
    background-color var(--eme-fast) var(--eme-ease);
}
.mega--list .mega__list a::before {
  content: "";
  position: absolute;
  inset-block: 0.55rem;
  inset-inline-start: 0;
  inline-size: 3px;
  background: var(--eme-red);
  transform: scaleY(0);
  transition: transform var(--eme-fast) var(--eme-ease);
}
.mega--list .mega__list a:hover,
.mega--list .mega__list a:focus-visible {
  background: var(--eme-chalk);
  color: var(--eme-red);
}
.mega--list .mega__list a:hover::before,
.mega--list .mega__list a:focus-visible::before {
  transform: none;
}
/* All products at the start, the Services band of that page at the end. */
.mega__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--eme-space-3) var(--eme-space-6);
  margin-block-start: var(--eme-space-5);
  padding-block-start: var(--eme-space-4);
  border-block-start: 1px solid var(--eme-line);
}

/* The menu button: a word and three bars of unequal length that even up when
   pointed at, as on the printed profile. */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-block-size: 44px;
  padding: 0.25rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: var(--eme-step--1);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
html[lang="ar"] .menu-toggle {
  letter-spacing: 0;
}
.menu-toggle__bars {
  display: grid;
  justify-items: end;
  gap: 5px;
  inline-size: 26px;
}
.menu-toggle__bars span {
  display: block;
  block-size: 2px;
  background: currentColor;
  transition: inline-size 320ms var(--eme-ease-out);
}
.menu-toggle__bars span:nth-child(1) {
  inline-size: 62%;
}
.menu-toggle__bars span:nth-child(2) {
  inline-size: 100%;
}
.menu-toggle__bars span:nth-child(3) {
  inline-size: 80%;
}
.menu-toggle:hover .menu-toggle__bars span {
  inline-size: 100%;
}

/* On the home page the bar floats over the hero, carrying only the brand, the
   two actions and the menu. Scrolled, it becomes a dark glass strip and steps
   out of the way while you read down the page. */
.site-header--over {
  position: fixed;
  inset-inline: 0;
  background: transparent;
  backdrop-filter: none;
  border-block-end-color: transparent;
  color: var(--eme-white);
  padding-block-start: var(--eme-over-pad);
  transition: 200ms;
}
/* Phone: the bar sits at the top of the screen, with no air above the logo. */
@media (max-width: 47.99rem) {
  :root {
    --eme-over-pad: 1rem;
  }
}
.site-header--over::before {
  content: "";
  position: absolute;
  inset: 0 0 -70% 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
  transition: opacity var(--eme-med) var(--eme-ease);
}
.site-header--over .site-header__inner {
  block-size: clamp(68px, 3.5rem + 1vw, 88px);
  transition: block-size 480ms var(--eme-ease-out);
}
.site-header--over .logo-default {
  display: none;
}
.site-header--over .logo-white {
  display: block;
}
.site-header--over .site-header__logo img {
  block-size: clamp(30px, 1.25rem + 1vw, 40px);
  transition: block-size 480ms var(--eme-ease-out);
}
.site-header--over .lang-switch {
  border-color: rgba(255, 255, 255, 0);
}
.site-header--over .lang-switch:hover {
  border-color: var(--eme-white);
  background: rgba(255, 255, 255, 0.08);
}
.site-header--over .site-header__cta {
  background: transparent;
  border-color: rgba(255, 255, 255, 0);
}
.site-header--over .site-header__cta:hover {
  background: transparent;
  border-color: rgba(255, 255, 255, 0);
}
.site-header--over.is-scrolled {
  background: rgba(13, 15, 16, 0.86);
  backdrop-filter: blur(14px) saturate(1.2);
  border-block-end-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  padding-block-start: 0rem;
}
.site-header--over.is-scrolled::before {
  opacity: 0;
}
.site-header--over.is-scrolled .site-header__inner {
  block-size: 62px;
}
.site-header--over.is-scrolled .site-header__logo img {
  block-size: 30px;
}
.site-header--over.is-scrolled .site-header__cta {
  background: transparent;
  border-color: rgba(255, 255, 255, 0);
}
.site-header--over.is-hidden {
  transform: translateY(-100%);
  /* Stepped out of the way, it leaves no shadow smudged along the top edge
     (over About's chapter bar, or any light section the page is on). */
  box-shadow: none;
}

/* iOS Safari (26 on) no longer reads theme-color: it carries the colour of a
   bar along the top of the screen up into the status bar, and only a solid
   one. A see-through or blurred bar shows there as a grey band, so on iOS each
   bar is solid, in the colour it already reads as. */
@supports (-webkit-touch-callout: none) {
  .site-header:not(.site-header--over) {
    background: var(--eme-white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header--over.is-scrolled {
    background: rgb(13, 15, 16);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .chapters {
    background: rgb(13, 15, 16);
  }
}

@media (max-width: 29.99rem) {
  .site-header--over .lang-switch {
    display: none;
  }
}
@media (min-width: 48rem) {
  .site-header--over .site-header__cta {
    display: inline-flex;
  }
}
/* The full bar needs 1280px to set seven sections, two actions and the logo
   on one line without crowding; below that the menu carries them. */
@media (min-width: 80rem) {
  .site-nav {
    display: block;
  }
  .site-header:not(.site-header--over) .menu-toggle {
    display: none;
  }
  .site-header__cta {
    display: inline-flex;
  }
  .site-nav + .site-header__actions {
    margin-inline-start: 0;
  }
}

/* ------------------------------------------------------------- menu overlay
   Opens with the brand's own gesture: a red blade crosses the screen at the
   logo's angle and the dark panel follows it in. Sections on the left; the
   pages inside whichever one is pointed at on the right. */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--eme-z-drawer);
  visibility: hidden;
  transition: visibility 0s linear 900ms;
}
.drawer[data-open="true"] {
  visibility: visible;
  transition: visibility 0s;
}
.drawer__blade,
.drawer__panel {
  position: absolute;
  inset: 0;
  clip-path: polygon(115% 0, 115% 0, 100% 100%, 100% 100%);
}
html[dir="rtl"] .drawer__blade,
html[dir="rtl"] .drawer__panel {
  clip-path: polygon(0 0, 0 0, -15% 100%, -15% 100%);
}
.drawer__blade {
  background: var(--eme-red);
  transition: clip-path 620ms var(--eme-ease-out) 180ms;
}
.drawer__panel {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--eme-night);
  color: var(--eme-white);
  transition: clip-path 620ms var(--eme-ease-out);
}
.drawer[data-open="true"] .drawer__blade,
.drawer[data-open="true"] .drawer__panel {
  clip-path: polygon(0 0, 100% 0, 100% 100%, -15% 100%);
}
html[dir="rtl"] .drawer[data-open="true"] .drawer__blade,
html[dir="rtl"] .drawer[data-open="true"] .drawer__panel {
  clip-path: polygon(0 0, 115% 0, 100% 100%, 0 100%);
}
.drawer[data-open="true"] .drawer__blade {
  transition: clip-path 620ms var(--eme-ease-out);
}
.drawer[data-open="true"] .drawer__panel {
  transition: clip-path 760ms var(--eme-ease-out) 110ms;
}

.drawer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eme-space-4);
  min-block-size: 76px;
}
.drawer__logo img {
  block-size: clamp(30px, 1.3rem + 0.5vw, 40px);
  inline-size: auto;
}
.drawer__bar-actions {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}
.drawer__lang {
  font-size: var(--eme-step--1);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}
.drawer__lang:hover {
  color: var(--eme-white);
}
.drawer__close {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-block-size: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--eme-white);
  cursor: pointer;
  font-size: var(--eme-step--1);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
html[lang="ar"] .drawer__close {
  letter-spacing: 0;
}
.drawer__x {
  position: relative;
  inline-size: 26px;
  block-size: 26px;
}
.drawer__x::before,
.drawer__x::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  block-size: 2px;
  background: currentColor;
  transform: rotate(45deg);
  transition: transform 320ms var(--eme-ease-out);
}
.drawer__x::after {
  transform: rotate(-45deg);
}
.drawer__close:hover .drawer__x::before {
  transform: rotate(135deg);
}
.drawer__close:hover .drawer__x::after {
  transform: rotate(45deg);
}

.drawer__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2rem, 5vh, 4rem);
  padding-block: clamp(1.5rem, 6vh, 5rem) clamp(1.5rem, 4vh, 3rem);
}
.drawer__nav {
  position: relative;
}
.drawer__list {
  display: grid;
  gap: clamp(0.25rem, 1vh, 0.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.drawer__link {
  position: relative;
  display: inline-block;
  padding-block: 0.12em;
  font-size: clamp(1.375rem, 1.2rem + 0.65vw, 2rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: rgba(255, 255, 255, 0.58);
  transition:
    color 220ms var(--eme-ease),
    transform 420ms var(--eme-ease-out);
}
html[lang="ar"] .drawer__link {
  letter-spacing: 0;
  line-height: 1.5;
}
/* The marker hangs in the gutter, like punctuation, so the words stay on the
   same edge as the logo above them. */
.drawer__link::before {
  content: "";
  position: absolute;
  inset-inline-start: -0.62em;
  inset-block: 0.3em;
  inline-size: 0.2em;
  background: var(--eme-red);
  transform: skewX(var(--eme-slant)) scaleY(0);
  transition: transform 320ms var(--eme-ease-out);
}
.drawer__link:hover,
.drawer__link:focus-visible,
.drawer__group.is-active > .drawer__link,
.drawer__link[aria-current="true"] {
  color: var(--eme-white);
}
.drawer__group.is-active > .drawer__link::before,
.drawer__link[aria-current="true"]::before {
  transform: skewX(var(--eme-slant)) scaleY(1);
}
/* A section's name, its button at the end of the line, and its pages under
   both. */
.drawer__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1rem;
}
.drawer__fold {
  flex-basis: 100%;
}
/* The button opens the section's pages without leaving for its page. It
   needs the script, so it stands only once the script has marked the menu
   ready; without it every section's pages are listed open. */
.drawer__toggle {
  display: none;
  place-items: center;
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  margin-inline-start: auto;
  padding: 0;
  border: 0px solid rgba(255, 255, 255, 0);
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition:
    background-color var(--eme-fast) var(--eme-ease),
    border-color var(--eme-fast) var(--eme-ease),
    color var(--eme-fast) var(--eme-ease);
}
.drawer.is-ready .drawer__toggle {
  display: inline-grid;
}
.drawer__toggle svg {
  transition: transform 420ms var(--eme-ease-out);
}
/* Hover only where there is one: a tap would leave it stuck on a folded button. */
@media (hover: hover) {
  .drawer__toggle:hover {
    border-color: var(--eme-white);
    color: var(--eme-white);
  }
}
.drawer__toggle[aria-expanded="true"] {
  background: var(--eme-red);
  border-color: var(--eme-red);
  color: var(--eme-white);
}
.drawer__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.drawer__toggle:focus-visible {
  outline: 2px solid var(--eme-white);
  outline-offset: 3px;
}
.drawer__sub {
  display: grid;
  gap: 0.55rem;
  margin: 0.5rem 0 1rem;
  padding: 0;
  list-style: none;
}
.drawer__sub a {
  font-size: var(--eme-step-0);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--eme-fast) var(--eme-ease);
}
.drawer__sub a:hover,
.drawer__sub a:focus-visible {
  color: var(--eme-white);
}

.drawer__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--eme-space-4) clamp(1.25rem, 3vw, 3rem);
  padding-block-start: var(--eme-space-5);
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
}
.drawer__contact {
  font-size: var(--eme-step-0);
  color: rgba(255, 255, 255, 0.78);
}
.drawer__contact:hover {
  color: var(--eme-white);
}
/* The company profile beside the quote: the softer step, outlined. */
.drawer__cta--profile {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--eme-white);
}
.drawer__cta--profile:hover {
  background: var(--eme-white);
  border-color: var(--eme-white);
  color: var(--eme-obsidian);
}
.drawer__social {
  display: flex;
  gap: 0.75rem;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
html[dir="rtl"] .drawer__social {
  margin: 0 auto 0 0;
}
.drawer__social a {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  color: rgba(255, 255, 255, 0.78);
  transition: color var(--eme-fast) var(--eme-ease);
}
.drawer__social a:hover {
  color: var(--eme-white);
}

/* Content follows the panel in: sections first, then the foot. */
.drawer__group,
.drawer__foot {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 200ms var(--eme-ease),
    transform 200ms var(--eme-ease);
}
.drawer[data-open="true"] .drawer__group,
.drawer[data-open="true"] .drawer__foot {
  opacity: 1;
  transform: none;
  transition:
    opacity 500ms var(--eme-ease) calc(380ms + var(--i, 0) * 55ms),
    transform 700ms var(--eme-ease-out) calc(380ms + var(--i, 0) * 55ms);
}
.drawer[data-open="true"] .drawer__foot {
  --i: 8;
}

/* Phones and tablets held upright: the sections stand folded, one line each,
   and a section's button unfolds its pages under it, folding any other. */
@media (max-width: 63.99rem) {
  .drawer.is-ready .drawer__list {
    gap: 0;
  }
  .drawer.is-ready .drawer__group {
    min-block-size: calc(44px + 0.8rem);
    padding-block: 0.4rem;
    border-block-end: 1px solid rgba(255, 255, 255, 0.1);
  }
  .drawer.is-ready .drawer__fold {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition:
      grid-template-rows 380ms var(--eme-ease-out),
      visibility 0s linear 380ms;
  }
  .drawer.is-ready .drawer__group.is-active > .drawer__fold {
    grid-template-rows: 1fr;
    visibility: visible;
    transition:
      grid-template-rows 520ms var(--eme-ease-out),
      visibility 0s;
  }
  .drawer.is-ready .drawer__sub {
    gap: 0;
    min-block-size: 0;
    overflow: hidden;
    margin: 0;
    padding-inline-start: 1rem;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0;
    transition: opacity 200ms var(--eme-ease);
  }
  .drawer.is-ready .drawer__group.is-active .drawer__sub {
    opacity: 1;
    transition: opacity 360ms var(--eme-ease) 120ms;
  }
  .drawer.is-ready .drawer__sub li:first-child {
    margin-block-start: 0.3rem;
  }
  .drawer.is-ready .drawer__sub li:last-child {
    margin-block-end: 0.7rem;
  }
  /* A full-width line each, tall enough for a thumb. */
  .drawer.is-ready .drawer__sub a {
    display: block;
    padding-block: 0.5rem;
  }
}

@media (min-width: 64rem) {
  .drawer__list {
    inline-size: 50%;
  }
  /* A transform on the group would make it the pages list's containing block
     for as long as the entrance runs, so the list would open half-width beside
     the section name and then jump across once it settles. The group only
     fades here; its link does the rising. */
  .drawer__group {
    transform: none;
  }
  .drawer__group > .drawer__link {
    transform: translateY(1.25rem);
    transition:
      color 220ms var(--eme-ease),
      transform 200ms var(--eme-ease);
  }
  .drawer[data-open="true"] .drawer__group > .drawer__link {
    transform: none;
    transition:
      color 220ms var(--eme-ease),
      transform 700ms var(--eme-ease-out) calc(380ms + var(--i, 0) * 55ms);
  }
  .drawer__sub {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    inline-size: 50%;
    margin: 0;
    padding-inline-start: clamp(2rem, 4vw, 5rem);
    padding-block: 0.6rem;
    gap: clamp(0.6rem, 1.6vh, 1.1rem);
    border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
    visibility: hidden;
    transition: visibility 0s linear 260ms;
  }
  .drawer__group.is-active .drawer__sub {
    visibility: visible;
    transition: visibility 0s;
  }
  .drawer__sub li {
    opacity: 0;
    transform: translateX(-0.75rem);
    transition:
      opacity 180ms var(--eme-ease),
      transform 260ms var(--eme-ease);
  }
  html[dir="rtl"] .drawer__sub li {
    transform: translateX(0.75rem);
  }
  .drawer__group.is-active .drawer__sub li {
    opacity: 1;
    transform: none;
    transition:
      opacity 320ms var(--eme-ease) calc(var(--j, 0) * 45ms),
      transform 520ms var(--eme-ease-out) calc(var(--j, 0) * 45ms);
  }
  .drawer__sub a {
    font-size: var(--eme-step-1);
    font-weight: 300;
    letter-spacing: -0.01em;
  }
  /* The pages list keeps its place beside the sections, so its fold steps
     out of the layout. */
  .drawer__fold {
    display: contents;
  }
  /* Here the button points across to the pages it brings up. */
  .drawer.is-ready .drawer__toggle {
    margin-inline-end: clamp(1rem, 2.5vw, 2.5rem);
  }
  .drawer__toggle svg,
  .drawer__toggle[aria-expanded="true"] svg {
    transform: rotate(-90deg);
  }
  html[dir="rtl"] .drawer__toggle svg,
  html[dir="rtl"] .drawer__toggle[aria-expanded="true"] svg {
    transform: rotate(90deg);
  }
}
/* Under a mouse, pointing at a section already brings its pages up. */
@media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
  .drawer.is-ready .drawer__toggle {
    display: none;
  }
}

/* ------------------------------------------------------------- breadcrumbs */
.breadcrumbs {
  padding-block: var(--eme-space-4);
  border-block-end: 1px solid var(--eme-line);
  background: var(--eme-bg-alt);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--eme-step--1);
  color: var(--eme-text-muted);
}
.breadcrumbs li + li::before {
  content: "/";
  margin-inline-end: 0.5rem;
  color: var(--eme-line-strong);
}
.breadcrumbs a:hover {
  color: var(--eme-red);
}
.breadcrumbs [aria-current="page"] {
  color: var(--eme-text);
  font-weight: 600;
}
/* Phones and small tablets: one line, never three. A product's trail wrapped
   to three rows (90px) above its title; here each step shrinks with an
   ellipsis instead, Home never does, and the current page, which is also the
   heading just below, gives way along with the rest. */
@media (max-width: 47.99rem) {
  .breadcrumbs ol {
    flex-wrap: nowrap;
  }
  /* Long steps share the room equally, each capped at its own width so a
     shorter one hands back what it does not need; Home and short steps
     ("Products", "About Us", marked by the template) keep their whole word. */
  .breadcrumbs li {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-inline-size: 0;
    max-inline-size: max-content;
  }
  .breadcrumbs li:first-child,
  .breadcrumbs li.is-short {
    flex: none;
  }
  .breadcrumbs li + li::before {
    flex: none;
  }
  .breadcrumbs a,
  .breadcrumbs [aria-current="page"] {
    display: block;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
/* Touch: the trail's links are 13px words; each gets a finger-height row while
   the bar keeps its height (the padding moves into the links). */
@media (pointer: coarse) {
  .breadcrumbs {
    padding-block: var(--eme-space-1);
  }
  .breadcrumbs ol {
    row-gap: 0;
  }
  .breadcrumbs a,
  .breadcrumbs [aria-current="page"] {
    display: inline-block;
    padding-block: 0.6rem;
  }
}

/* -------------------------------------------------------------------- hero */
.hero {
  position: relative;
  background: var(--eme-obsidian);
  color: var(--eme-white);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media img,
.hero__media .eme-img-pending {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(26, 28, 30, 0.94) 12%,
    rgba(26, 28, 30, 0.72) 52%,
    rgba(26, 28, 30, 0.45) 100%
  );
}
html[dir="rtl"] .hero__media::after {
  background: linear-gradient(
    260deg,
    rgba(26, 28, 30, 0.94) 12%,
    rgba(26, 28, 30, 0.72) 52%,
    rgba(26, 28, 30, 0.45) 100%
  );
}
.hero__inner {
  position: relative;
  padding-block: clamp(4rem, 12vw, 9rem);
  max-inline-size: 60ch;
}
/* A cover page (About): the header floats over the photograph, so the words
   start below the bar — its top padding plus its row — instead of under it. */
.page--cover .hero__inner {
  padding-block-start: calc(
    var(--eme-over-pad) + clamp(68px, 3.5rem + 1vw, 88px) +
      clamp(2.5rem, 8vw, 6rem)
  );
}
.hero__title {
  font-size: var(--eme-step-5);
  margin-block-end: var(--eme-space-5);
}
.hero__sub {
  font-size: var(--eme-step-1);
  color: #d6dade;
  margin-block-end: var(--eme-space-6);
  line-height: 1.2;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eme-space-3);
}

.page-hero {
  background: var(--eme-obsidian);
  color: var(--eme-white);
  padding-block: clamp(2.5rem, 6vw, 5rem);
}
.page-hero__inner {
  /* max-inline-size: 72ch; */
}
.page-hero .lead {
  color: #c9ced3;
}

/* A product family's page: its machine beside the heading, set the way the
   families band sets it: large, past the gutter, and standing across the
   band's foot into the white below (short of the spec strip, which keeps its
   space). Only on a computer screen (a fine pointer, wider than 64rem): on a
   tablet or phone the heading keeps the whole band to itself. */
.page-hero__art {
  display: none;
}
@media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
  .page-hero--art {
    --art-drop: clamp(1.5rem, 3vw, 2.75rem);
    position: relative;
    z-index: 1; /* painted over the section it crosses into */
  }
  .page-hero--art .page-hero__inner > :not(.page-hero__art) {
    max-inline-size: 50%;
  }
  .page-hero__art {
    display: block;
    position: absolute;
    inset-block: 6% calc(var(--art-drop) * -1);
    /* Past the gutter by as much as the band's machine goes past it, wherever
       the 120rem container leaves the content edge on a very wide screen. */
    inset-inline-end: max(
      calc(var(--eme-gutter) * 0.4),
      calc((100% - var(--eme-container)) / 2 + var(--eme-gutter) * 0.4)
    );
    /* Of the content's width, not the screen's: past 120rem the container stops growing. */
    inline-size: calc(min(100%, var(--eme-container)) * 0.46);
    pointer-events: none;
  }
  .page-hero__art picture {
    display: contents;
  }
  .page-hero__img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    object-fit: contain;
    object-position: 50% 100%;
  }
  .page-hero__art--cutout .page-hero__img {
    filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.5));
  }
  /* A family photo with its own background stays inside the band, as a plate. */
  .page-hero__art:not(.page-hero__art--cutout) {
    inset-block: 12%;
    inset-inline-end: var(--eme-gutter);
    inline-size: 40%;
  }
  .page-hero__art:not(.page-hero__art--cutout) .page-hero__img {
    object-fit: cover;
    object-position: 50% 50%;
  }
}

/* --------------------------------------------------------- in numbers ---
   Two rows of large squares, after the company profile: the figure at the top,
   its title and one line of explanation at the bottom, and real space between
   them. The 1px rules are the grid gap showing through the plate underneath,
   so they appear only *between* cells and re-flow themselves at every
   breakpoint — no dangling borders, no box around the block. */

.numbers {
  background: var(--eme-bg-alt);
  color: var(--eme-text);
  padding-block: clamp(2.75rem, 6vw, 5rem);
}

.numbers__head {
  display: flex;
  align-items: center;
  gap: var(--eme-space-4);
  margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
}
.numbers__title {
  margin: 0;
  font-size: var(--eme-step--1);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--eme-text);
  white-space: nowrap;
}
html[lang="ar"] .numbers__title {
  letter-spacing: 0;
  text-transform: none;
}

.numbers__brand {
  color: var(--eme-red);
  font-weight: 700;
}

.numbers__rule {
  position: relative;
  flex: 1;
  block-size: 1px;
  background: var(--eme-line);
}
.numbers__rule::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 32px;
  background: var(--eme-red);
}

.numbers__source {
  font-size: var(--eme-step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eme-text-muted);
  white-space: nowrap;
}
html[lang="ar"] .numbers__source {
  letter-spacing: 0;
  text-transform: none;
}

/* The plate carries the rule colour; the cells paint over it. */
.numbers__plate {
  position: relative;
  background: var(--eme-line);
}

/* The profile's corner mark. Decorative, and the first thing to go when the
   layout gets narrow enough that it would crowd the figures. */
.numbers__mark {
  display: none;
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  transform: translate(35%, -45%);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--eme-red);
}
html[dir="rtl"] .numbers__mark {
  transform: translate(-35%, -45%);
}

.numbers__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 620px) {
  .numbers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .numbers__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.numbers__cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  padding: clamp(1.5rem, 2.8vw, 2.75rem);
  background: var(--eme-white);
}
@media (min-width: 620px) {
  /* Square-ish cells, so the space between figure and title is the design
       rather than a by-product of how long the sentence is. */
  .numbers__cell {
    min-block-size: clamp(15rem, 21vw, 19rem);
  }
  .numbers__mark {
    display: block;
  }
}

.numbers__value {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.1em;
  font-size: clamp(2.4rem, 4.4vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--eme-text);
}
/* Figures are Western digits in both languages, so the Arabic build sets them in
   the Latin face — Poppins' numerals are the brand's numerals — while the unit
   beside them stays Arabic. */
html[lang="ar"] .numbers__value {
  font-family: var(--eme-font-latin);
}

.numbers__figure {
  white-space: nowrap;
}
.numbers__sign {
  font-size: 0.82em;
  font-weight: 700;
  color: var(--eme-red);
}
.numbers__unit {
  font-size: 0.34em;
  font-weight: 500;
  color: var(--eme-red);
  white-space: nowrap;
  letter-spacing: 0px;
}
/* The unit is Arabic wording, so it goes back to the Arabic face beside the
   Latin-set figure. */
html[lang="ar"] .numbers__unit {
  font-size: 0.4em;
  font-family: var(--eme-font-arabic);
}

/* A symbol unit belongs against its figure: "90%", not "90 %". */
.numbers__unit--tight {
  margin-inline-start: -0.06em;
}

.numbers__text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.numbers__label {
  margin: 0;
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--eme-red);
  text-wrap: balance;
}

.numbers__note {
  margin: 0;
  font-size: var(--eme-step--1);
  line-height: 1.55;
  color: var(--eme-text-muted);
  max-inline-size: 40ch;
}

/* ---- the dark tone (home): the plate over a photograph.
   The picture is darkened hard and pushed back further on the side the words
   start from, so every figure keeps its contrast whatever is uploaded. With no
   picture, a near-black stage with a low red glow stands in. */
.numbers--dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #050607;
  color: var(--eme-white);
  padding-block: clamp(4rem, 8vw, 8rem);
}
.numbers--dark::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 3px;
  background: linear-gradient(
    90deg,
    var(--eme-red-ink) 0%,
    var(--eme-red) 62%,
    var(--eme-ember) 100%
  );
}
html[dir="rtl"] .numbers--dark::after {
  background: linear-gradient(
    270deg,
    var(--eme-red-ink) 0%,
    var(--eme-red) 62%,
    var(--eme-ember) 100%
  );
}
.numbers__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.numbers__bg picture {
  display: contents;
}
.numbers__bg-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  filter: brightness(0.5) saturate(0.9);
}
.numbers__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(5, 6, 7, 0.9) 0%,
      rgba(5, 6, 7, 0.62) 55%,
      rgba(5, 6, 7, 0.5) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5, 6, 7, 0.55) 0%,
      rgba(5, 6, 7, 0) 30%,
      rgba(5, 6, 7, 0) 70%,
      rgba(5, 6, 7, 0.6) 100%
    );
}
html[dir="rtl"] .numbers__bg::after {
  background:
    linear-gradient(
      270deg,
      rgba(5, 6, 7, 0.9) 0%,
      rgba(5, 6, 7, 0.62) 55%,
      rgba(5, 6, 7, 0.5) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5, 6, 7, 0.55) 0%,
      rgba(5, 6, 7, 0) 30%,
      rgba(5, 6, 7, 0) 70%,
      rgba(5, 6, 7, 0.6) 100%
    );
}
.numbers__bg--plain {
  background:
    radial-gradient(
      55% 60% at 88% 18%,
      rgba(218, 33, 39, 0.14),
      transparent 70%
    ),
    radial-gradient(
      40% 50% at 10% 100%,
      rgba(232, 112, 42, 0.06),
      transparent 70%
    ),
    linear-gradient(180deg, #0b0c0d 0%, #050607 100%);
}
.numbers__bg--plain::after {
  display: none;
}

/* The head: the company in red over "In Numbers", and one red rule running
   from the title to the edge of the figures. */
.numbers__head--dark {
  align-items: flex-end;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-block-end: clamp(2.5rem, 5vw, 4.5rem);
}
.numbers__kicker {
  margin: 0 0 0.3rem;
  font-size: clamp(1.125rem, 0.9rem + 0.9vw, 1.875rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--eme-red);
}
.numbers--dark .numbers__title {
  font-size: clamp(2rem, 1.4rem + 1.8vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--eme-white);
}
html[lang="ar"] .numbers--dark .numbers__title {
  line-height: 1.4;
  letter-spacing: 0;
}
.numbers--dark .numbers__rule {
  margin-block-end: 0.85rem;
  background: var(--eme-red);
  opacity: 0.85;
}
.numbers--dark .numbers__rule::before {
  display: none;
}

/* The figures. Cells are clear so the stage shows through; the rules between
   them are each cell's own hairline on its leading and top edges, and the
   plate clips the ones that would fall on its outer edge. */
.numbers--dark .numbers__plate {
  background: transparent;
  overflow: hidden;
}
.numbers--dark .numbers__mark {
  display: none;
}
.numbers--dark .numbers__grid {
  gap: 0;
  margin-block-start: -1px;
  margin-inline-start: -1px;
}
.numbers--dark .numbers__cell {
  background: transparent;
  box-shadow: -1px -1px 0 0 rgba(255, 255, 255, 0.16);
  transition: background-color 400ms var(--eme-ease);
}
html[dir="rtl"] .numbers--dark .numbers__cell {
  box-shadow: 1px -1px 0 0 rgba(255, 255, 255, 0.16);
}
.numbers--dark .numbers__cell:hover {
  background: rgba(255, 255, 255, 0.025);
}
.numbers--dark .numbers__value {
  color: var(--eme-white);
}
.numbers--dark .numbers__unit {
  color: rgba(255, 255, 255, 0.86);
}
.numbers--dark .numbers__label {
  color: var(--eme-white);
}
.numbers--dark .numbers__note {
  color: rgba(255, 255, 255, 0.78);
}
.numbers__source--foot {
  margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
  text-align: end;
  color: rgba(255, 255, 255, 0.5);
}

/* ------------------------------------------------------------------- cards */
.card {
  display: flex;
  flex-direction: column;
  background: var(--eme-white);
  border: 1px solid var(--eme-line);
  transition:
    border-color var(--eme-fast) var(--eme-ease),
    transform var(--eme-fast) var(--eme-ease),
    box-shadow var(--eme-fast) var(--eme-ease);
}
.card:hover {
  border-color: var(--eme-line-strong);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(26, 28, 30, 0.08);
}
.card__media {
  position: relative;
  overflow: hidden;
  background: var(--eme-chalk);
}
.card__media img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--eme-space-2);
  padding: var(--eme-space-5);
  flex: 1;
}
.card__title {
  margin: 0;
  font-size: var(--eme-step-1);
}
.card__meta {
  font-size: var(--eme-step--1);
  color: var(--eme-text-muted);
}
.card__foot {
  margin-block-start: auto;
  padding-block-start: var(--eme-space-4);
}
.card__index {
  font-size: var(--eme-step--1);
  font-weight: 600;
  color: var(--eme-red);
}
/* A flat card is a ruled entry, not a box: its words stand on the grid's own
   edge (the card padding had set them 24px in from the heading above) under a
   hairline that turns red on hover, the only sign it is a door. */
.card--flat {
  border: 0;
  background: transparent;
}
.card--flat:hover {
  transform: none;
  box-shadow: none;
}
.card--flat .card__body {
  padding: var(--eme-space-4) 0 0;
  border-block-start: 1px solid var(--eme-line);
  transition: border-color var(--eme-fast) var(--eme-ease);
}
.card--flat:hover .card__body,
.card--flat:focus-within .card__body {
  border-block-start-color: var(--eme-red);
}
.card--flat:hover .card__title {
  color: var(--eme-red);
}

/* Phones: a product or family card becomes a row, the picture a thumbnail
   beside its words. Stacked full width, each card was a screen tall and the
   catalogue ran to 20,000px; as rows it is a list you can read down. */
@media (max-width: 35.99rem) {
  .card--thumb {
    flex-direction: row;
    align-items: stretch;
  }
  .card--thumb:hover {
    transform: none;
  }
  .card--thumb .card__media {
    flex: none;
    display: flex;
    align-items: center;
    inline-size: 40%;
    background: var(--eme-white);
  }
  .card--thumb .card__media picture {
    display: block;
    inline-size: 100%;
  }
  .card--thumb .card__media img {
    object-fit: contain;
  }
  .card--thumb .card__body {
    min-inline-size: 0;
    gap: 0.3rem;
    padding: var(--eme-space-4);
  }
  .card--thumb .card__title {
    font-size: var(--eme-step-0);
    line-height: 1.3;
  }
  .card--thumb .card__meta {
    display: -webkit-box;
    margin: 0;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card--thumb .card__foot {
    padding-block-start: var(--eme-space-2);
  }
}

.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card {
  position: relative;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: end;
  min-block-size: 260px;
  padding: var(--eme-space-5);
  color: var(--eme-white);
  background: var(--eme-graphite);
  overflow: hidden;
}
.tile__media {
  position: absolute;
  inset: 0;
}
.tile__media img,
.tile__media .eme-img-pending {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(26, 28, 30, 0.92) 0%,
    rgba(26, 28, 30, 0.35) 60%,
    rgba(26, 28, 30, 0.15) 100%
  );
}
.tile__body {
  position: relative;
}
.tile__title {
  margin: 0 0 var(--eme-space-1);
  font-size: var(--eme-step-1);
}
.tile__meta {
  font-size: var(--eme-step--1);
  color: #c9ced3;
}

/* --------------------------------------------------------------- spec data */
.spec-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border: 1px solid var(--eme-line);
  background: var(--eme-white);
}
.spec-strip__item {
  padding: var(--eme-space-4) var(--eme-space-5);
  border-inline-end: 1px solid var(--eme-line);
}
.spec-strip__item:last-child {
  border-inline-end: 0;
}
.spec-strip__label {
  font-size: var(--eme-step--1);
  color: var(--eme-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.spec-strip__value {
  font-size: var(--eme-step-1);
  font-weight: 600;
}
html[lang="ar"] .spec-strip__label {
  letter-spacing: 0;
  text-transform: none;
}

.spec-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--eme-step-0);
}
.spec-table caption {
  text-align: start;
  padding-block: var(--eme-space-4) var(--eme-space-2);
  font-weight: 600;
  color: var(--eme-red);
  font-size: var(--eme-step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.spec-table th,
.spec-table td {
  padding: var(--eme-space-3) var(--eme-space-4);
  border-block-end: 1px solid var(--eme-line);
  text-align: start;
  vertical-align: top;
}
.spec-table th {
  inline-size: 38%;
  font-weight: 500;
  color: var(--eme-text-muted);
  background: var(--eme-bg-alt);
}
.table-scroll {
  overflow-x: auto;
}

/* A definition list sizes itself to where it stands (a panel beside the text,
   a card, a full column), so it is its own container: see the query further
   down that stacks label over value when it is narrow. */
.def-list {
  display: grid;
  gap: var(--eme-space-3);
  margin: 0;
  container-type: inline-size;
}
.def-list div {
  display: grid;
  grid-template-columns: minmax(120px, 30%) 1fr;
  gap: var(--eme-space-4);
  padding-block-end: var(--eme-space-3);
  border-block-end: 1px solid var(--eme-line);
}
.def-list dt {
  color: var(--eme-text-muted);
  font-size: var(--eme-step--1);
}
.def-list dd {
  margin: 0;
  font-weight: 500;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eme-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--eme-line-strong);
  font-size: var(--eme-step--1);
  color: var(--eme-text-muted);
}
.chip--solid {
  background: var(--eme-obsidian);
  border-color: var(--eme-obsidian);
  color: var(--eme-white);
}
.chip--red {
  border-color: var(--eme-red);
  color: var(--eme-red);
}

/* ------------------------------------------------- certification marks
   One mark (views/partials/cert-mark.php): the uploaded icon, or a typeset
   seal until it arrives. Everything is sized from --mark-h, set by whatever
   holds the mark, so the same mark serves a 44px label and a 80px register.

   Icons are drawn at --k times the mark height (about the area of a square,
   whatever their shape; see the partial) and multiplied into the page, so a
   logo delivered on a white canvas loses the canvas on every light ground. */
.cert-mark {
  --mark-h: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: var(--mark-h);
  max-inline-size: 100%;
  transition: transform var(--eme-med) var(--eme-ease-out);
}
.cert-mark picture {
  display: contents;
}
.cert-mark__img {
  inline-size: auto;
  block-size: calc(var(--mark-h) * var(--k, 1));
  max-inline-size: min(100%, calc(var(--mark-h) * 2.6));
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* The seal: a square plate cut by the brand slash, the issuing body over the
   number, as the marks on a unit's rating plate are stamped. */
.cert-seal {
  position: relative;
  flex-direction: column;
  gap: calc(var(--mark-h) * 0.05);
  inline-size: var(--mark-h);
  border: 1px solid var(--eme-line-strong);
  background: var(--eme-white);
  color: var(--eme-obsidian);
  font-size: calc(var(--mark-h) * 0.23);
  line-height: 1;
  text-align: center;
  transition:
    border-color var(--eme-med) var(--eme-ease),
    transform var(--eme-med) var(--eme-ease-out);
}
.cert-seal::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 16%;
  inline-size: 30%;
  block-size: max(3px, calc(var(--mark-h) * 0.05));
  background: var(--eme-red);
  transform: skewX(var(--eme-slant));
}
.cert-seal__top {
  font-size: max(0.5rem, calc(var(--mark-h) * 0.14));
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--eme-red);
}
.cert-seal__main {
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cert-seal--xl {
  font-size: calc(var(--mark-h) * 0.34);
}
.cert-seal--l {
  font-size: calc(var(--mark-h) * 0.27);
}
.cert-seal--s {
  font-size: calc(var(--mark-h) * 0.19);
}
/* Codes are Latin whatever the page language: keep Poppins on the Arabic
   pages too, so a seal reads the same in both. */
html[lang="ar"] .cert-seal,
html[lang="ar"] .cert-row__code,
html[lang="ar"] .cert-entry__code,
html[lang="ar"] .cert-inline__code {
  font-family: var(--eme-font-latin);
}

/* ---- the row (views/partials/cert-row.php). How many marks a line holds is
   decided in PHP from how many there are (--row-*), and picked here by the
   width of the row itself; lines are centred so a short last line balances
   under the one above. */
.cert-row {
  --per-row: var(--row-narrow, 3);
  --row-mark-h: clamp(2.75rem, 2.2rem + 1.6vw, 4.25rem);
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cert-row__item {
  display: flex;
  justify-content: center;
  flex: 0 0 calc(100% / var(--per-row));
  min-inline-size: 0;
}
@container (min-width: 34rem) {
  .cert-row__item {
    flex-basis: calc(100% / var(--row-mid, 5));
  }
}
@container (min-width: 64rem) {
  .cert-row__item {
    flex-basis: calc(100% / var(--row-wide, 9));
  }
}
.cert-row__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  inline-size: 100%;
  padding-inline: clamp(0.25rem, 0.1rem + 0.5vw, 0.75rem);
  text-align: center;
  color: inherit;
}
.cert-row__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: var(--row-mark-h);
  margin-block-end: clamp(0.75rem, 0.6rem + 0.4vw, 1.1rem);
}
.cert-row__mark .cert-mark {
  --mark-h: var(--row-mark-h);
}
.cert-row__code {
  font-size: var(--eme-step-0);
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
  transition: color var(--eme-fast) var(--eme-ease);
}
.cert-row__name {
  max-inline-size: 16ch;
  margin-block-start: 0.2rem;
  font-size: var(--eme-step--1);
  line-height: 1.45;
  color: var(--eme-text-muted);
  text-wrap: balance;
}
a.cert-row__link:hover .cert-row__code {
  color: var(--eme-red);
}
a.cert-row__link:hover .cert-mark {
  transform: translate3d(0, -3px, 0);
}
a.cert-row__link:hover .cert-seal {
  border-color: var(--eme-obsidian);
}
.cert-row__link:focus-visible {
  outline: 2px solid var(--eme-red);
  outline-offset: 6px;
}
/* A family's few marks start where the section starts. */
.cert-row--family {
  justify-content: flex-start;
}
.cert-row--family .cert-row__item {
  flex: 0 0 auto;
  inline-size: clamp(8.5rem, 7rem + 4vw, 11rem);
}

/* ---- one standard, explained (views/partials/cert-entry.php): the product
   page and Quality & Trust. Mark and identity on the start side, then what it
   is and how it applies, as columns once there is room for them. */
.cert-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-end: 1px solid var(--eme-line);
}
.cert-entry {
  --mark-col: clamp(3.5rem, 2.6rem + 2.4vw, 5.5rem);
  display: grid;
  grid-template-columns: var(--mark-col) minmax(0, 1fr);
  grid-template-areas: "mark head" "facts facts";
  gap: var(--eme-space-5) clamp(1rem, 0.6rem + 1.4vw, 2rem);
  align-items: start;
  padding-block: clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem);
  border-block-start: 1px solid var(--eme-line);
  scroll-margin-block-start: calc(var(--eme-header-h) + 1.5rem);
}
.cert-entry__mark {
  grid-area: mark;
  display: flex;
  justify-content: center;
}
.cert-entry__mark .cert-mark {
  --mark-h: var(--mark-col);
}
.cert-entry__head {
  grid-area: head;
  align-self: center;
  min-inline-size: 0;
}
.cert-entry__code {
  margin: 0 0 0.3rem;
  font-size: var(--eme-step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eme-red);
}
.cert-entry__name {
  margin: 0;
  font-size: var(--eme-step-3);
  line-height: 1.2;
}
.cert-entry__issuer {
  margin: 0.55rem 0 0;
  font-size: var(--eme-step--1);
  line-height: 1.5;
  color: var(--eme-text-muted);
}
.cert-entry__issuer span {
  font-weight: 600;
  color: var(--eme-text);
}
.cert-entry__facts {
  grid-area: facts;
  display: grid;
  gap: var(--eme-space-5) clamp(1.5rem, 1rem + 2vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin: 0;
}
.cert-entry__fact {
  min-inline-size: 0;
}
.cert-entry__fact dt {
  margin-block-end: 0.4rem;
  font-size: var(--eme-step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eme-text);
}
html[lang="ar"] .cert-entry__fact dt,
html[lang="ar"] .cert-entry__code {
  letter-spacing: 0;
}
.cert-entry__fact dd {
  margin: 0;
  max-inline-size: 60ch;
  font-size: var(--eme-step-0);
  line-height: 1.7;
  color: var(--eme-graphite);
}
.cert-entry__fact--applies {
  grid-column: 1 / -1;
}
.cert-entry__products {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
}
.cert-entry__products a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.25rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--eme-line-strong);
  font-size: var(--eme-step--1);
  font-weight: 500;
  line-height: 1.3;
  color: var(--eme-text);
  transition:
    border-color var(--eme-fast) var(--eme-ease),
    color var(--eme-fast) var(--eme-ease);
}
.cert-entry__products a:hover {
  border-color: var(--eme-red);
  color: var(--eme-red);
}
/* Wide: the mark, who it is, and the facts beside them in one row. */
@media (min-width: 62rem) {
  .cert-entry {
    grid-template-columns: var(--mark-col) minmax(14rem, 0.8fr) minmax(0, 2fr);
    grid-template-areas: "mark head facts";
    align-items: start;
  }
  .cert-entry__head {
    align-self: start;
  }
}

/* A project card beside other content: the same card, laid on its side so a
   proof column costs a strip rather than a screen. */
.card--row {
  flex-direction: row;
  align-items: stretch;
}
.card--row .card__media {
  flex: none;
  inline-size: clamp(7rem, 32%, 12rem);
}
.card--row .card__media img,
.card--row .card__media .eme-img-pending {
  block-size: 100%;
  object-fit: cover;
}
.card--row .card__body {
  padding: var(--eme-space-4) var(--eme-space-5);
}
.card--row .card__meta {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card--row .card__foot {
  margin-block-start: var(--eme-space-3);
}

/* ------------------------------------------------- product page (compacted)
   Six bands instead of eleven. These four components are what let related
   content sit beside what it supports rather than in a band of its own. */

/* Certification marks under the hero CTA. Label scale, one line where the
   viewport allows: they qualify the unit, they are not a section. Each leads
   to its explanation further down the page (#standards). */
.cert-inline {
  margin: var(--eme-space-6) 0 0;
  padding: var(--eme-space-4) 0 0;
  border-block-start: 1px solid var(--eme-line);
}
.cert-inline__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eme-space-3) var(--eme-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--eme-step--1);
  line-height: 1.4;
}
.cert-inline__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: inherit;
}
.cert-inline__item .cert-mark {
  --mark-h: 2.75rem;
  flex: none;
}
.cert-inline__text {
  display: flex;
  flex-direction: column;
}
.cert-inline__code {
  font-weight: 600;
  transition: color var(--eme-fast) var(--eme-ease);
}
.cert-inline__name {
  color: var(--eme-text-muted);
}
a.cert-inline__item:hover .cert-inline__code {
  color: var(--eme-red);
}
.cert-inline__more {
  margin-block-start: var(--eme-space-4);
}

/* Specification groups as columns. Every row stays visible: this is the
   content the page exists to show, so it is never behind a disclosure. */
.spec-cols {
  display: grid;
  gap: var(--eme-space-6) var(--eme-space-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  align-items: start;
}
.spec-cols__title {
  margin-block-end: var(--eme-space-3);
  padding-block-end: var(--eme-space-2);
  border-block-end: 2px solid var(--eme-red);
  font-size: var(--eme-step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eme-red);
}
html[lang="ar"] .spec-cols__title {
  letter-spacing: 0;
  text-transform: none;
}

/* A denser definition list for spec columns and variant blocks: the label
   column narrows so a value keeps its own line at column width. */
.def-list--tight {
  gap: 0;
}
.def-list--tight div {
  grid-template-columns: minmax(6.5rem, 40%) 1fr;
  gap: var(--eme-space-3);
  padding-block: var(--eme-space-3);
}
.def-list--tight div:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

/* Products folded into this page. Ruled blocks rather than cards: they are
   part of this product, not a grid of other things to click. */
.variants {
  display: grid;
  gap: 0;
  margin-block-start: var(--eme-space-8);
  border-block-start: 1px solid var(--eme-line);
}
.variant {
  padding-block: var(--eme-space-6);
  border-block-end: 1px solid var(--eme-line);
  scroll-margin-block-start: calc(var(--eme-header-h) + 2rem);
}
.variant__kind {
  display: block;
  margin-block-end: var(--eme-space-2);
  font-size: var(--eme-step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eme-red);
}
html[lang="ar"] .variant__kind {
  letter-spacing: 0;
  text-transform: none;
}
.variant__title {
  font-size: var(--eme-step-2);
  margin-block-end: var(--eme-space-2);
}
.variant__lead {
  color: var(--eme-text-muted);
  margin-block-end: var(--eme-space-4);
}
.variant p {
  max-inline-size: 70ch;
}
.variant .def-list {
  margin-block-start: var(--eme-space-4);
  max-inline-size: 34rem;
}
/* A section made of selling points rather than prose ("points" in content)
   sets them as the numbered cards; with no overview above, the rule opens
   the band instead of hanging a gap over it. */
.variant__points {
  margin-block-start: var(--eme-space-5);
}
.variant__points .steps__item p:last-child {
  margin-block-end: 0;
}
.variants:first-child {
  margin-block-start: 0;
}
@media (min-width: 900px) {
  .variants {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    column-gap: var(--eme-space-8);
  }
  .variant {
    border-block-end: 0;
  }
}

/* Questions beside the proof, not a screen below it. */
.faq {
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--eme-line);
}
.faq__item {
  border-block-end: 1px solid var(--eme-line);
}
.faq__item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--eme-space-4);
  padding-block: var(--eme-space-4);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__item summary::after {
  content: "+";
  flex: none;
  font-size: var(--eme-step-1);
  font-weight: 400;
  color: var(--eme-red);
  line-height: 1;
  transition: transform var(--eme-fast) var(--eme-ease);
}
.faq__item[open] summary::after {
  content: "\2212";
}
.faq__item summary:hover {
  color: var(--eme-red);
}
.faq__item p {
  margin: 0;
  padding-block-end: var(--eme-space-5);
  color: var(--eme-text-muted);
  max-inline-size: 60ch;
}

/* ----------------------------------------------------------- family slider
   The profile's own product spread, built as a band: dark stage, diagonal
   hairlines, the machine held large against it on a slanted plate, and the
   phrase each family is sold on. The five families are named across the top
   as tabs; the active one fills as the band moves on by itself. Closed by one
   deep-red bar carrying the only call to action.

   Without JavaScript the slides stack and every family is readable; the script
   adds .is-ready, which is what stacks them into one frame. */

.fam-slider {
  --fam-interval: 7s;
  /* The slide's number keeps the share of the screen it has on a 1920 px PC
     (254 px, 13.25%) at every width, so a tablet or phone sees it in the same
     proportion instead of relatively larger and over the heading. */
  --fam-index-size: min(13.25vw, 17rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--eme-obsidian);
  color: var(--eme-white);
  padding-block-start: clamp(3.5rem, 5.5vw, 6rem);
}
.fam-slider--bare {
  padding-block-start: clamp(2rem, 4vw, 4rem);
}

/* The hairlines. A repeating gradient rather than an asset, so the band can
   shift them as the slide changes without loading anything. */
.fam-slider__lines {
  position: absolute;
  inset: -10%;
  z-index: -1;
  background-image: repeating-linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.14) 0 1px,
    transparent 1px 118px
  );
  opacity: 0.55;
  pointer-events: none;
  transition: background-position 1100ms var(--eme-ease-out);
}

.fam-slider__inner {
  position: relative;
}

/* ---- the head: the heading on one side, the five families on the other */
.fam-slider__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.75rem, 3vw, 3rem) clamp(2rem, 6vw, 8rem);
  margin-block-end: clamp(2rem, 3vw, 3rem);
}
.fam-slider__heading h2 {
  margin: 0;
  font-size: var(--eme-step-3);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--eme-white);
}
html[lang="ar"] .fam-slider__heading h2 {
  letter-spacing: 0;
  line-height: 1.3;
}
.fam-slider__heading h1 {
  margin: 0;
  color: var(--eme-white);
}
.fam-slider__intro {
  max-inline-size: 46ch;
  margin: var(--eme-space-4) 0 0;
  font-size: var(--eme-step-1);
  line-height: 1.55;
  color: #c9ced3;
}
.fam-slider__meta {
  margin: 0rem 0 0;
  font-size: var(--eme-step-0);
  color: var(--eme-red);
}

.fam-slider__tabs {
  flex: 1 1 34rem;
  max-inline-size: 62rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(0.75rem, 1.4vw, 1.75rem);
}
.fam-slider__tab {
  display: grid;
  align-content: start;
  gap: 0.9rem;
  min-block-size: 44px;
  padding: 0 0 0.25rem;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  font-size: var(--eme-step--1);
  font-weight: 500;
  line-height: 1.3;
  text-align: start;
  transition: color var(--eme-fast) var(--eme-ease);
}
.fam-slider__tab:hover {
  color: rgba(255, 255, 255, 0.88);
}
.fam-slider__tab[aria-selected="true"] {
  color: var(--eme-white);
}
.fam-slider__tab-bar {
  position: relative;
  display: block;
  block-size: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
}
.fam-slider__tab-fill {
  position: absolute;
  inset: 0;
  background: var(--eme-red);
  transform: scaleX(0);
  transform-origin: left;
}
html[dir="rtl"] .fam-slider__tab-fill {
  transform-origin: right;
}
.fam-slider__tab[aria-selected="true"] .fam-slider__tab-fill {
  transform: none;
}
/* While the band runs itself, the active tab is its clock: the fill is a CSS
   animation, and the script moves on when it ends. Pausing the animation
   pauses the band. */
.fam-slider.is-playing
  .fam-slider__tab[aria-selected="true"]
  .fam-slider__tab-fill {
  animation: fam-progress var(--fam-interval) linear both;
}
.fam-slider.is-paused .fam-slider__tab-fill,
.fam-slider.is-playing:hover .fam-slider__tab-fill,
.fam-slider.is-playing:focus-within .fam-slider__tab-fill {
  animation-play-state: paused;
}
@keyframes fam-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.fam-slider:not(.is-ready) .fam-slider__tabs,
.fam-slider:not(.is-ready) .fam-slider__controls {
  display: none;
}

/* ---- the stage */
.fam-slider__stage {
  display: grid;
  gap: var(--eme-space-8);
}
.fam-slider.is-ready .fam-slider__stage {
  gap: 0;
  cursor: grab;
  touch-action: pan-y;
}
.fam-slider.is-dragging .fam-slider__stage {
  cursor: grabbing;
}
.fam-slider.is-ready .fam-slide {
  grid-area: 1 / 1;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 420ms;
  user-select: none;
}
.fam-slider.is-ready .fam-slide.is-active {
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

.fam-slide {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}

/* ---- the slide number, set large behind the phrase: outlined rather than
   filled, so it reads as a drawn mark on the stage and never competes with the
   words over it. */
.fam-slide__body {
  position: relative;
  isolation: isolate;
}
.fam-slide__index {
  position: absolute;
  z-index: -1;
  inset-block-start: 0;
  inset-inline-start: -0.04em;
  translate: 0 -60%;
  font-size: var(--fam-index-size);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.16);
  pointer-events: none;
  user-select: none;
}

/* ---- the phrase, the name, the line under it */
.fam-slide__phrase {
  margin: 0 0 clamp(1.25rem, 2vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  text-wrap: balance;
}
.fam-slide__lead {
  position: relative;
  font-size: clamp(1.625rem, 1.36rem + 1.15vw, 2.75rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.fam-slide__quote {
  display: inline-block;
  margin-inline-start: 0.06em;
  font-size: 0.78em;
  line-height: 0;
  color: var(--eme-red);
  vertical-align: 0.32em;
}
.fam-slide__sub {
  font-size: clamp(1rem, 0.93rem + 0.26vw, 1.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
html[lang="ar"] .fam-slide__lead,
html[lang="ar"] .fam-slide__sub {
  letter-spacing: 0;
  line-height: 1.4;
}

.fam-slide__title {
  margin: 0 0 var(--eme-space-3);
  font-size: var(--eme-step-1);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--eme-red);
  display: none;
}
.fam-slide__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--eme-fast) var(--eme-ease);
}
.fam-slide__title a:hover {
  color: var(--eme-white);
}
.fam-slide__pitch {
  max-inline-size: 48ch;
  margin: 0;
  font-size: var(--eme-step-0);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}
.fam-slide__more {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-block-start: clamp(1.5rem, 2.5vw, 2.25rem);
  padding-block: 0.35rem;
  font-size: var(--eme-step-0);
  font-weight: 600;
  color: var(--eme-white);
  border-block-end: 1px solid rgba(255, 255, 255, 0.28);
  transition: border-color var(--eme-fast) var(--eme-ease);
}
.fam-slide__more svg {
  transition: transform 320ms var(--eme-ease-out);
}
.fam-slide__more:hover {
  border-color: var(--eme-red);
}
.fam-slide__more:hover svg {
  transform: translateX(6px);
}
html[dir="rtl"] .fam-slide__more svg {
  transform: scaleX(-1);
}
html[dir="rtl"] .fam-slide__more:hover svg {
  transform: scaleX(-1) translateX(6px);
}

/* ---- the machine. A cut-out render stands on a slanted plate at the brand's
   angle; a family cover is a composed picture, so it is cut to the same
   parallelogram and keeps its own plate of light. */
.fam-slide__media {
  position: relative;
  display: block;
  background: var(--eme-white);
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
  user-select: none;
  pointer-events: none;
}
.fam-slide__media img {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  pointer-events: none;
}
.fam-slide__media--cutout {
  background: transparent;
  clip-path: none;
}
.fam-slide__plate {
  display: none;
  position: absolute;
  inset-block: 6% 4%;
  inset-inline: 20% 12%;
  background: linear-gradient(
    180deg,
    var(--eme-red-deep) 0%,
    var(--eme-red-ink) 100%
  );
  transform: skewX(var(--eme-slant));
}
.fam-slide__media--cutout img {
  filter: drop-shadow(0 34px 40px rgba(0, 0, 0, 0.55));
}

/* ---- the entrance. The slide itself only switches visibility; its parts
   arrive in reading order, the plate wipes up and the machine slides in
   from the side the band is moving from. */
.fam-slider.is-ready .fam-slide__body > *,
.fam-slider.is-ready .fam-slide__media img,
.fam-slider.is-ready .fam-slide__media--cutout .fam-slide__plate {
  transition:
    opacity 200ms var(--eme-ease),
    transform 200ms var(--eme-ease),
    clip-path 200ms var(--eme-ease);
}
.fam-slider.is-ready .fam-slide:not(.is-active) .fam-slide__body > * {
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
}
.fam-slider.is-ready .fam-slide:not(.is-active) .fam-slide__media img {
  opacity: 0;
  transform: translate3d(calc(var(--fam-dir, 1) * 3rem), 0, 0) scale(0.97);
}
.fam-slider.is-ready .fam-slide:not(.is-active) .fam-slide__plate {
  clip-path: inset(100% 0 0 0);
}
.fam-slider.is-ready
  .fam-slide:not(.is-active)
  .fam-slide__media:not(.fam-slide__media--cutout) {
  clip-path: polygon(7% 0, 7% 0, 0 100%, 0 100%);
}
html[dir="rtl"]
  .fam-slider.is-ready
  .fam-slide:not(.is-active)
  .fam-slide__media:not(.fam-slide__media--cutout) {
  clip-path: polygon(100% 0, 100% 0, 93% 100%, 93% 100%);
}
.fam-slider.is-ready .fam-slide.is-active .fam-slide__body > * {
  transition:
    opacity 480ms var(--eme-ease) calc(140ms + var(--k, 0) * 70ms),
    transform 760ms var(--eme-ease-out) calc(140ms + var(--k, 0) * 70ms);
}
/* The number moves with the band: in from the side the slide comes from,
   slower than the words, so it settles last. */
.fam-slider.is-ready
  .fam-slide:not(.is-active)
  .fam-slide__body
  > .fam-slide__index {
  opacity: 0;
  transform: translate3d(calc(var(--fam-dir, 1) * 4rem), 0, 0);
}
.fam-slider.is-ready .fam-slide.is-active .fam-slide__body > .fam-slide__index {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms var(--eme-ease) 60ms,
    transform 1200ms var(--eme-ease-out) 40ms;
}
.fam-slide__body > :nth-child(2) {
  --k: 1;
}
.fam-slide__body > :nth-child(3) {
  --k: 2;
}
.fam-slide__body > :nth-child(4) {
  --k: 3;
}
.fam-slider.is-ready .fam-slide.is-active .fam-slide__media img {
  transition:
    opacity 520ms var(--eme-ease) 160ms,
    transform 900ms var(--eme-ease-out) 120ms;
}
.fam-slider.is-ready .fam-slide.is-active .fam-slide__plate {
  transition: clip-path 760ms var(--eme-ease-out) 60ms;
}
.fam-slider.is-ready .fam-slide__media:not(.fam-slide__media--cutout) {
  transition: clip-path 200ms var(--eme-ease);
}
.fam-slider.is-ready
  .fam-slide.is-active
  .fam-slide__media:not(.fam-slide__media--cutout) {
  transition: clip-path 820ms var(--eme-ease-out) 80ms;
}
.fam-slider.is-dragging .fam-slide.is-active * {
  transition: none !important;
}

/* ---- controls: where you are, back, forward */
.fam-slider__controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-start: clamp(2rem, 4vw, 3rem);
}
.fam-slider__count {
  margin: 0 0.5rem;
  font-size: var(--eme-step-0);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--eme-white);
}
.fam-slider__count-total {
  color: rgba(255, 255, 255, 0.45);
}
.fam-slider__arrow {
  display: inline-grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0);
  background: transparent;
  color: var(--eme-white);
  cursor: pointer;
  transition:
    background-color var(--eme-fast) var(--eme-ease),
    border-color var(--eme-fast) var(--eme-ease),
    color var(--eme-fast) var(--eme-ease);
}
.fam-slider__arrow:hover {
  background: var(--eme-white);
  border-color: var(--eme-white);
  color: var(--eme-obsidian);
}
html[dir="rtl"] .fam-slider__arrow svg {
  transform: scaleX(-1);
}

/* ---- the bar that closes the section */
.fam-slider__cta {
  position: relative;
  z-index: 1;
  display: block;
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  background: var(--eme-red-deep);
  color: var(--eme-white);
  text-decoration: none;
  transition: background-color 260ms var(--eme-ease);
}
.fam-slider__cta-inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding-block: clamp(1.5rem, 3.2vw, 3rem);
  font-size: var(--eme-step-2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
html[lang="ar"] .fam-slider__cta-inner {
  letter-spacing: 0;
}
.fam-slider__cta:hover {
  background: var(--eme-red);
}
.fam-slider__cta-arrow {
  flex: none;
  inline-size: clamp(28px, 1.2rem + 1vw, 44px);
  block-size: auto;
  transition: transform 420ms var(--eme-ease-out);
}
.fam-slider__cta:hover .fam-slider__cta-arrow {
  transform: translateX(10px);
}
html[dir="rtl"] .fam-slider__cta-arrow {
  transform: scaleX(-1);
}
html[dir="rtl"] .fam-slider__cta:hover .fam-slider__cta-arrow {
  transform: scaleX(-1) translateX(10px);
}

/* Narrow: the tabs become a strip that scrolls sideways under the heading,
   running out to the screen edge so it reads as more to the side. */
@media (max-width: 47.99rem) {
  .fam-slider__tabs {
    flex-basis: 100%;
    grid-auto-columns: max-content;
    gap: 1.5rem;
    margin-inline: calc(var(--eme-gutter) * -1);
    padding-inline: var(--eme-gutter);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--eme-gutter);
    scrollbar-width: none;
  }
  .fam-slider__tabs::-webkit-scrollbar {
    display: none;
  }
  .fam-slider__tab {
    min-inline-size: 8.5rem;
    scroll-snap-align: start;
  }
}

/* One column (below 62rem): the copy opens the stage, and the slide's number
   rises above the phrase by 60% of its line (0.8 of its size), which put it
   over the tabs. The copy steps down by that much, so the number stands in the
   gap under the tabs. The copy keeps to the top of the stage and the machine
   to its foot, so neither jumps between slides of different lengths. */
@media (max-width: 61.99rem) {
  .fam-slide {
    align-content: space-between;
  }
  .fam-slide__body {
    margin-block-start: calc(var(--fam-index-size) * 0.48);
  }
}

/* Two columns on a narrow desktop or a tablet held sideways (62–80rem): the
   heading above wraps to more lines, and the number, rising 60% of its line
   over the phrase, reached its last one. A fifth of its size more keeps it in
   the gap; wider screens have the room already. */
@media (min-width: 62rem) and (max-width: 79.99rem) {
  .fam-slide__body {
    margin-block-start: calc(var(--fam-index-size) * 0.2);
  }
}

/* A band with no closing bar lets the machine stand over its foot and onto
   the section that follows, as it crosses the red bar where there is one. The
   sides still clip (the hairlines and the machine run past them), so nothing
   reaches the page scrollbar. */
@supports (overflow-x: clip) {
  .fam-slider--open {
    overflow-x: clip;
    overflow-y: visible;
  }
  .fam-slider--open .fam-slider__lines {
    inset-block: 0;
  }
}

/* A page's own band (All Products): the page title is the band's head, and on
   a wide screen the head splits on the slide's own two columns, so the tabs
   stand in the right half, straight over the machine they switch. */
.fam-slider--page {
  padding-block-start: clamp(2.5rem, 6vw, 5rem);
}
@media (min-width: 62rem) {
  .fam-slider--page .fam-slider__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 7rem);
    align-items: end;
  }
  .fam-slider--page .fam-slider__tabs {
    max-inline-size: none;
  }
}

/* Wide: copy and machine side by side. The machine stands on the bottom edge
   and crosses the red bar, the way it sits on the printed page; the controls
   sit under the copy. */
@media (min-width: 62rem) {
  .fam-slide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 7rem);
  }
  .fam-slider__stage {
    position: relative;
  }
  .fam-slide__body {
    padding-block-end: 0rem;
  }
  .fam-slide__media {
    align-self: end;
  }
  .fam-slider .fam-slider__controls {
    position: absolute;
    inset-block-end: 50px;
    inset-inline-start: var(--eme-gutter);
    margin-block-start: 0;
  }
  .fam-slider .fam-slider__cta {
    margin-block-start: 0;
  }
  .fam-slide__media--cutout {
    /* Bleeds past the gutter, and is painted lower than it sits so it crosses
       the red bar. A transform rather than a margin: a negative margin in a
       grid pulls the layout up instead of letting the picture overlap. The
       section clips the excess, so nothing reaches the page scrollbar. */
    margin-inline-end: calc((var(--eme-gutter) * 0.6) * -1);
    transform: translateY(clamp(2rem, 4.5vw, 5rem));
    z-index: 2;
  }
}

/* The arrows are pinned 50px above the stage's foot. Where the machine is not
   much taller than the copy (up to about 1360px wide), the copy is centred low
   enough to run into them, so it keeps their height clear under itself. */
@media (min-width: 62rem) and (max-width: 84.99rem) {
  .fam-slide__body {
    padding-block-end: calc(48px + 50px + 1.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fam-slider__lines,
  .fam-slider__arrow,
  .fam-slider__cta-arrow,
  .fam-slide__more svg {
    transition: none;
  }
  .fam-slider.is-ready .fam-slide .fam-slide__body > *,
  .fam-slider.is-ready .fam-slide .fam-slide__media img,
  .fam-slider.is-ready .fam-slide .fam-slide__plate,
  .fam-slider.is-ready
    .fam-slide
    .fam-slide__media:not(.fam-slide__media--cutout) {
    transform: none !important;
    transition: opacity 1ms linear !important;
  }
  .fam-slider.is-ready .fam-slide .fam-slide__plate {
    clip-path: none !important;
  }
  html
    .fam-slider.is-ready
    .fam-slide
    .fam-slide__media:not(.fam-slide__media--cutout) {
    clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%) !important;
  }
  .fam-slider__cta:hover .fam-slider__cta-arrow,
  .fam-slide__more:hover svg {
    transform: none;
  }
}

/* ------------------------------------------------------------ sector band
   The sectors as slanted panels cut at the brand angle, edge to edge. The
   band's height sets the slant (tan 10° ≈ 0.1763), and every panel overlaps
   its neighbour by exactly that much, so each clip-path edge lands on the next
   one's and the seams are single slanted lines.

   Wide screens: an accordion. The open panel takes most of the width; the
   others stand narrow, in black and white, their names running up the slant.
   Opening swings the name down to horizontal around its first letter and lifts
   the rest in under it.

   Narrow screens: a row panel by panel, the active one centred with a sliver
   of each neighbour showing. It loops (site.js, .is-looping); without the
   script it is a native row that snaps. */

.sector-band {
  --band-h: clamp(30rem, 68vh, 44rem);
  --slant: calc(var(--band-h) * 0.1763);
  --pad: clamp(1.25rem, 2.2vw, 2.75rem);
  --open: 4.2;
  position: relative;
}

.sector-band__stage {
  display: flex;
  block-size: var(--band-h);
  overflow: hidden;
  background: var(--eme-night);
}

.sector-band__panel {
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  min-inline-size: 0;
  margin-inline-start: calc(var(--slant) * -1);
  overflow: hidden;
  color: var(--eme-white);
  text-decoration: none;
  clip-path: polygon(
    var(--slant) 0,
    100% 0,
    calc(100% - var(--slant)) 100%,
    0 100%
  );
  transition: flex-grow 950ms var(--eme-ease-out);
}
.sector-band__panel:first-child {
  margin-inline-start: 0;
}
/* The outer edges of the band stay straight. The lean itself never mirrors in
   Arabic (it is the logo's), so the straight edge swaps ends instead. */
.sector-band__panel:first-child,
html[dir="rtl"] .sector-band__panel:last-child {
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
}
.sector-band__panel:last-child,
html[dir="rtl"] .sector-band__panel:first-child {
  clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
}
.sector-band__panel.is-open {
  flex-grow: var(--open);
}
/* With the script, a sideways pan belongs to the band (a swipe on a touch
   screen opens the next panel) and a vertical one still scrolls the page.
   While a finger swipes, the widths follow it with no transition. */
.sector-band.is-ready .sector-band__stage {
  touch-action: pan-y pinch-zoom;
}
.sector-band.is-swiping .sector-band__panel {
  transition: none;
}

/* The seam: a hairline on the edge each panel lays over its neighbour. */
.sector-band__panel + .sector-band__panel::after,
.sector-band.is-looping .sector-band__panel::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset-block: 0;
  left: 0.5px;
  inline-size: 1px;
  background: rgba(255, 255, 255, 0.5);
  transform: skewX(var(--eme-slant));
  transform-origin: 0 100%;
  pointer-events: none;
}
html[dir="rtl"] .sector-band__panel + .sector-band__panel::after,
html[dir="rtl"] .sector-band.is-looping .sector-band__panel::after {
  left: auto;
  right: calc(var(--slant) + 0.5px);
  transform-origin: 100% 100%;
}

/* ---- the picture */
.sector-band__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #15171a;
}
.sector-band__media picture {
  display: contents;
}
.sector-band__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  filter: grayscale(1) brightness(0.6) contrast(1.05);
  transform: scale(1.08);
  transition:
    filter 1000ms var(--eme-ease),
    transform 1500ms var(--eme-ease-out);
}
.sector-band__panel.is-open .sector-band__img {
  filter: grayscale(0.15) brightness(0.82);
  transform: scale(1.01);
}
/* No photograph yet: a composed plate instead of a hole, hairlines at the
   brand angle over a low red glow. */
.sector-band__media--empty {
  background:
    repeating-linear-gradient(
      100deg,
      rgba(255, 255, 255, 0.06) 0 1px,
      transparent 1px 72px
    ),
    linear-gradient(180deg, #24272a 0%, #131517 100%);
}
.sector-band__media--empty::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    80% 60% at 25% 100%,
    rgba(218, 33, 39, 0.42),
    transparent 70%
  );
  opacity: 0.35;
  transition: opacity 900ms var(--eme-ease);
}
.sector-band__panel.is-open .sector-band__media--empty::after,
.sector-band__panel.is-current .sector-band__media--empty::after {
  opacity: 1;
}
.sector-band__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    0deg,
    rgba(8, 9, 10, 0.92) 0%,
    rgba(8, 9, 10, 0.45) 40%,
    rgba(8, 9, 10, 0.08) 78%
  );
  background-color: rgba(8, 9, 10, 0.3);
  transition: background-color 800ms var(--eme-ease);
}
.sector-band__panel.is-open .sector-band__shade {
  background-color: rgba(8, 9, 10, 0);
}

/* ---- the words. Padding follows the slant: the lower-left corner of a panel
   sits a slant to the left of its upper-left, and the same on the right. The
   left edge is clear by only a quarter slant at the foot, so words standing
   higher up (a two-line name over a list of projects) need half a slant to
   stay inside it. The first panel's left edge is straight and keeps the
   quarter. The lean never mirrors, so these are physical sides in Arabic too. */
.sector-band__content {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: grid;
  justify-items: start;
  padding: 0 calc(var(--pad) + var(--slant)) clamp(1.75rem, 3.4vw, 3rem)
    calc(var(--pad) + var(--slant) * 0.5);
}
.sector-band__panel:first-child .sector-band__content,
html[dir="rtl"] .sector-band__panel:last-child .sector-band__content {
  padding-left: calc(var(--pad) + var(--slant) * 0.25);
}
html[dir="rtl"] .sector-band__panel:first-child .sector-band__content {
  padding-left: calc(var(--pad) + var(--slant) * 0.5);
}

/* The name is set twice. Closed, a label stands up the slant (rotated -80°,
   reading upward, centred in the visible strip). Open, the name lies across
   the panel. They never move into each other: as a panel opens the label fades
   and softens away, and once there is room the name rises into place from
   behind a mask, the way the hero headline does. Closing runs it backwards,
   and the label returns only after the panel has narrowed. */
.sector-band__label,
.sector-band__title {
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}
/* The label runs up the panel, so its length is bounded by the band's height,
   not by the screen's width: on a wide but short window (1536×730) the longest
   name at the width-driven size ran out of the top. The second term keeps the
   longest name (about 24 ems) inside the band at any height. */
.sector-band__label {
  font-size: min(clamp(1rem, 0.8rem + 0.45vw, 1.35rem), var(--band-h) / 28);
  line-height: 1.15;
  letter-spacing: 0.04em;
}
/* Open, the name is the panel's headline: two lines, set larger and tighter. */
.sector-band__title {
  font-size: clamp(1.5rem, 0.95rem + 1.15vw, 2.375rem);
  line-height: 1.04;
  letter-spacing: 0.005em;
}
html[lang="ar"] .sector-band__label,
html[lang="ar"] .sector-band__title {
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
}
html[lang="ar"] .sector-band__title {
  line-height: 1.35;
}

/* Anchored at its lower-left corner (the end of the line in Arabic, which
   reads down the slant with its letters upright), so it grows upward from the
   foot of the panel. The glyphs fall to the left of that corner, hence the
   half-line nudge to the right. */
.sector-band__label {
  position: absolute;
  z-index: 1;
  left: calc((100% - var(--slant)) / 2 + 0.55em);
  bottom: clamp(1.75rem, 3.4vw, 3rem);
  transform-origin: 0 100%;
  rotate: -80deg;
  pointer-events: none;
  transition:
    opacity 700ms var(--eme-ease) 420ms,
    translate 950ms var(--eme-ease-out) 420ms,
    filter 700ms var(--eme-ease) 420ms;
}
.sector-band__panel.is-open .sector-band__label {
  opacity: 0;
  translate: 0 0.9rem;
  filter: blur(6px);
  transition:
    opacity 260ms var(--eme-ease),
    translate 420ms var(--eme-ease),
    filter 300ms var(--eme-ease);
}

/* Each line rises from behind its own mask, the second a beat after the first. */
.sector-band__title {
  display: block;
}
.sector-band__line {
  display: block;
  overflow: hidden;
  padding-block: 0.1em;
  margin-block: -0.1em;
}
.sector-band__line > span {
  display: block;
  opacity: 0;
  translate: 0 110%;
  transition:
    translate 260ms cubic-bezier(0.7, 0, 0.84, 0),
    opacity 200ms var(--eme-ease);
}
.sector-band__panel.is-open .sector-band__line > span {
  opacity: 1;
  translate: 0 0;
  transition:
    translate 950ms var(--eme-ease-out) calc(300ms + var(--l, 0) * 90ms),
    opacity 500ms var(--eme-ease) calc(300ms + var(--l, 0) * 90ms);
}

/* Everything under the name opens with the panel: the row grows from 0fr to
   1fr, so the name is lifted as the body arrives. */
.sector-band__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 850ms var(--eme-ease-out);
}
.sector-band__panel.is-open .sector-band__body {
  grid-template-rows: 1fr;
}
.sector-band__inner {
  display: grid;
  justify-items: start;
  gap: 0.9rem;
  min-block-size: 0;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, 0.75rem, 0);
  transition:
    opacity 250ms var(--eme-ease),
    transform 400ms var(--eme-ease);
}
.sector-band__inner > :first-child {
  margin-block-start: 0.9rem;
}
.sector-band__panel.is-open .sector-band__inner {
  opacity: 1;
  transform: none;
  transition:
    opacity 600ms var(--eme-ease) 440ms,
    transform 900ms var(--eme-ease-out) 400ms;
}
.sector-band__tagline {
  max-inline-size: 34ch;
  font-size: var(--eme-step-0);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.84);
}
.sector-band__more {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding-block: 0.3rem;
  font-size: var(--eme-step-0);
  font-weight: 600;
  border-block-end: 1px solid rgba(255, 255, 255, 0.4);
  transition: border-color var(--eme-fast) var(--eme-ease);
}
.sector-band__more svg {
  transition: transform 320ms var(--eme-ease-out);
}
html[dir="rtl"] .sector-band__more svg {
  transform: scaleX(-1);
}
/* The panel's own link covers it edge to edge; the project links inside lie
   over it. The line at the foot answers to the panel link, not to them. */
.sector-band__hit {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.sector-band__hit:hover ~ .sector-band__content .sector-band__more {
  border-color: var(--eme-red);
}
.sector-band__hit:hover ~ .sector-band__content .sector-band__more svg {
  transform: translateX(6px);
}
html[dir="rtl"]
  .sector-band__hit:hover
  ~ .sector-band__content
  .sector-band__more
  svg {
  transform: scaleX(-1) translateX(6px);
}
/* The clip-path would cut an outline drawn round the panel, so keyboard focus
   is shown on the line at its foot. */
.sector-band__hit:focus-visible {
  outline: none;
}
.sector-band__hit:focus-visible ~ .sector-band__content .sector-band__more {
  outline: 2px solid var(--eme-red);
  outline-offset: 4px;
}

.sector-band__ticks {
  display: none;
}

/* ---- phones and small tablets: a row that snaps */
@media (max-width: 61.99rem) {
  .sector-band {
    --band-h: clamp(24rem, 62svh, 32rem);
    --peek: 9vw;
  }
  .sector-band__stage {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-inline: var(--peek);
    scroll-padding-inline: var(--peek);
    background: transparent;
  }
  .sector-band__stage::-webkit-scrollbar {
    display: none;
  }
  /* 100% is the row inside its peek padding: the same as 100vw minus the
     peeks on a phone, but it stays true on a tablet or a desktop window
     narrower than 62rem, where 100vw also counts the page scrollbar. */
  .sector-band__panel,
  .sector-band__panel:first-child,
  .sector-band__panel:last-child,
  html[dir="rtl"] .sector-band__panel:first-child,
  html[dir="rtl"] .sector-band__panel:last-child {
    flex: 0 0 calc(100% + var(--slant));
    clip-path: polygon(
      var(--slant) 0,
      100% 0,
      calc(100% - var(--slant)) 100%,
      0 100%
    );
    scroll-snap-align: center;
    transition: none;
  }
  .sector-band__panel:first-child {
    margin-inline-start: 0;
  }
  /* Every panel is laid out open; the one in the middle is lit. */
  .sector-band__label {
    display: none;
  }
  /* Here every panel is slanted on both sides, and a slant is close to a
     quarter of a phone's width, so no fixed padding keeps a tall block (a
     two-line name over its tagline) inside it. The block is sheared at the
     brand angle from its foot instead, so each line steps in with the edge
     beside it, and each part is sheared back upright: the words keep their
     shape and stay the same distance from both edges at any height. */
  html[dir] .sector-band__panel:nth-child(n) .sector-band__content {
    padding-left: calc(var(--pad) + var(--slant) * 0.25);
    padding-right: calc(var(--pad) + var(--slant));
    transform: skewX(var(--eme-slant));
    transform-origin: 0 100%;
  }
  .sector-band__title,
  .sector-band__tagline,
  .sector-band__more {
    transform: skewX(calc(var(--eme-slant) * -1));
  }
  .sector-band__title {
    font-size: clamp(1.25rem, 0.9rem + 1.6vw, 1.75rem);
    white-space: normal;
    text-wrap: balance;
  }
  .sector-band__line > span {
    opacity: 1;
    translate: 0 0;
  }
  .sector-band__body {
    grid-template-rows: 1fr;
  }
  .sector-band__inner {
    opacity: 1;
    transform: none;
  }
  .sector-band__img {
    filter: grayscale(1) brightness(0.5);
    transform: none;
  }
  .sector-band__panel.is-current .sector-band__img {
    filter: grayscale(0.15) brightness(0.8);
  }
  .sector-band__content {
    transition: opacity 400ms var(--eme-ease);
  }
  .sector-band__panel:not(.is-current) .sector-band__content {
    opacity: 0.45;
  }
  .sector-band__ticks {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-block-start: 1.25rem;
  }
  .sector-band__tick {
    position: relative;
    inline-size: 11px;
    block-size: 24px;
    padding: 0;
    border: 0;
    background: var(--band-tick, rgba(26, 28, 30, 0.2));
    transform: skewX(var(--eme-slant));
    cursor: pointer;
    transition: background-color var(--eme-fast) var(--eme-ease);
  }
  .sector-band__tick::before {
    content: "";
    position: absolute;
    inset: -10px -2.5px;
  }
  .sector-band__tick[aria-current="true"] {
    background: var(--eme-red);
  }

  /* Moved by the script: clipped, not scrolled, and pulled sideways while a
     vertical pan still scrolls the page. */
  .sector-band.is-looping .sector-band__stage {
    overflow: hidden;
    overflow: clip;
    scroll-snap-type: none;
    touch-action: pan-y pinch-zoom;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
  }
  .sector-band.is-looping .sector-band__panel {
    will-change: transform;
  }
  .sector-band.is-looping .sector-band__img {
    -webkit-user-drag: none;
  }
  .sector-band.is-dragging .sector-band__stage {
    cursor: grabbing;
  }
  .sector-band.is-dragging .sector-band__panel {
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sector-band__panel,
  .sector-band__img,
  .sector-band__label,
  .sector-band__line > span,
  .sector-band__body,
  .sector-band__inner,
  .sector-band__shade {
    transition: none !important;
  }
}

/* ------------------------------------------------------------ product rail
   A family's products in one row, the full width of the screen. The first
   card stands on the page's content edge; the row runs out past the far edge,
   where the next card is cut in half so the row reads as something to move.

   Whole cards in view: 1 on a phone, 2 on a tablet, 3 on a laptop, 4 on a
   wide screen, each with half of the next beside it. Sizes are worked out
   against the rail's own width (a container), so a scrollbar never eats into
   the half card.

   Without JavaScript the row is a native scroll-snap strip. site.js adds
   .is-ready and moves it with transforms, looping (.is-looping); a family
   with no more cards than whole places in view stands still (.is-static). */
.prail {
  --full: 1;
  --per-view: 1.5;
  --prail-gap: clamp(0.875rem, 0.55rem + 0.9vw, 1.5rem);
  --prail-start: max(
    var(--eme-gutter),
    (100cqi - var(--eme-container)) / 2 + var(--eme-gutter)
  );
  --prail-slide: calc(
    (100cqi - var(--prail-start) - var(--full) * var(--prail-gap)) /
      var(--per-view)
  );
  --prail-bg: var(--eme-bg-alt);
  container-type: inline-size;
  position: relative;
}
@media (min-width: 42rem) {
  .prail {
    --full: 2;
    --per-view: 2.5;
  }
}
@media (min-width: 75rem) {
  .prail {
    --full: 3;
    --per-view: 3.5;
  }
}
@media (min-width: 100rem) {
  .prail {
    --full: 4;
    --per-view: 4.5;
  }
}

.prail__viewport {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--prail-start);
  scrollbar-width: none;
  /* Room for a card's hover lift and shadow inside the scroller. */
  padding-block: 0.25rem 1.5rem;
  margin-block: -0.25rem -1.5rem;
}
.prail__viewport::-webkit-scrollbar {
  display: none;
}
.prail__track {
  display: flex;
  gap: var(--prail-gap);
  inline-size: max-content;
  padding-inline: var(--prail-start);
}
.prail__slide {
  display: flex;
  flex: none;
  inline-size: var(--prail-slide);
  scroll-snap-align: start;
}
.prail__slide > .card {
  flex: 1;
  min-inline-size: 0;
}

/* ---- moved by the script. The row is clipped sideways only, so a card's
   shadow still falls below it, and clip (not hidden) so focus can never
   scroll it behind the script's back. */
.prail.is-ready .prail__viewport {
  overflow: visible;
  overflow-x: clip;
  scroll-snap-type: none;
  padding-block: 0;
  margin-block: 0;
}
.prail.is-looping .prail__viewport {
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}
.prail.is-looping .prail__track {
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
}
.prail.is-looping .prail__slide img {
  -webkit-user-drag: none;
}
.prail.is-dragging .prail__viewport {
  cursor: grabbing;
}
/* Nothing under the pointer reacts while the row is being pulled. */
.prail.is-dragging .prail__track {
  pointer-events: none;
}
/* The card that went out past the start edge fades into the margin, so the
   loop shows without a second card competing with the first. */
.prail.is-looping .prail__viewport::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--prail-start);
  background: linear-gradient(
    90deg,
    var(--prail-bg) 30%,
    color-mix(in srgb, var(--prail-bg) 70%, transparent)
  );
  pointer-events: none;
  display: none;
}
html[dir="rtl"] .prail.is-looping .prail__viewport::before {
  background: linear-gradient(
    270deg,
    var(--prail-bg) 30%,
    color-mix(in srgb, var(--prail-bg) 70%, transparent)
  );
}

/* ---- one family after another on the same ground: a hairline between them,
   not a second band of empty space. */
.prail-section + .prail-section {
  padding-block-start: 0;
}
.prail-section + .prail-section .prail-section__head {
  padding-block-start: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  border-block-start: 1px solid var(--eme-line);
}

/* A rail on the plain ground (related products under a product page): the
   card carried round past the start edge fades into white, not chalk. */
.prail-section--plain .prail {
  --prail-bg: var(--eme-bg);
}

/* ---- the card in a rail: upright at every width */
.card--slide .card__media img {
  -webkit-user-drag: none;
}
.card--slide .card__body {
  gap: 0.35rem;
}
.card--slide .card__meta {
  margin: 0;
}

/* ---- where you are, back, forward. Only where the row loops: never without
   a script, never under a family that stands still. Its room is kept from the
   first paint (the count class says at which widths this family will loop),
   so nothing below moves when the script arrives. */
.prail__bar {
  display: none;
  align-items: center;
  gap: var(--eme-space-4) var(--eme-space-5);
  margin-block-start: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}
@media (scripting: enabled) {
  .prail__bar {
    display: flex;
  }
  .prail--n1 .prail__bar {
    display: none;
  }
}
@media (scripting: enabled) and (min-width: 42rem) {
  .prail--n2 .prail__bar {
    display: none;
  }
}
@media (scripting: enabled) and (min-width: 75rem) {
  .prail--n3 .prail__bar {
    display: none;
  }
}
@media (scripting: enabled) and (min-width: 100rem) {
  .prail--n4 .prail__bar {
    display: none;
  }
}
/* A browser that cannot ask whether scripts run learns it from the script. */
.prail.is-looping .prail__bar {
  display: flex;
}
.prail.is-static .prail__bar {
  display: none;
}
.prail__ticks {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.375rem;
  min-inline-size: 0;
}
.prail__tick {
  flex: 0 1 1.375rem;
  min-inline-size: 0.375rem;
  block-size: 0.75rem;
  background: var(--eme-line-strong);
  transform: skewX(var(--eme-slant));
  transition: background-color var(--eme-med) var(--eme-ease);
}
.prail__tick.is-current {
  background: var(--eme-red);
}
.prail__count {
  margin: 0;
  font-family: var(--eme-font-latin);
  font-size: var(--eme-step-0);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.prail__total {
  color: var(--eme-text-muted);
}
.prail__nav {
  display: flex;
  gap: 0.5rem;
}
.prail__arrow {
  display: inline-grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  padding: 0;
  border: 1px solid #ffffff00;
  background: transparent;
  color: var(--eme-text);
  cursor: pointer;
  transition:
    background-color var(--eme-fast) var(--eme-ease),
    border-color var(--eme-fast) var(--eme-ease),
    color var(--eme-fast) var(--eme-ease);
}
.prail__arrow:hover {
  /* background: var(--eme-obsidian);
  border-color: var(--eme-obsidian);
  color: var(--eme-white); */
}
.prail__arrow svg {
  transition: transform 320ms var(--eme-ease-out);
}
html[dir="rtl"] .prail__arrow svg {
  transform: scaleX(-1);
}
.prail__arrow[data-prail-prev]:hover svg {
  transform: translateX(-3px);
}
.prail__arrow[data-prail-next]:hover svg {
  transform: translateX(3px);
}
html[dir="rtl"] .prail__arrow[data-prail-prev]:hover svg {
  transform: scaleX(-1) translateX(-3px);
}
html[dir="rtl"] .prail__arrow[data-prail-next]:hover svg {
  transform: scaleX(-1) translateX(3px);
}
/* Phones: the arrows move to the start of the bar, clear of the WhatsApp
   button that floats over the far corner, and the ticks alone say where you
   are. */
@media (max-width: 41.99rem) {
  .prail__nav {
    order: -1;
  }
  .prail__count {
    display: none;
  }
}
/* A line under the rail (the family page's "also supplied"). */
.prail__note {
  margin-block-start: var(--eme-space-5);
}
.prail__note > p {
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .prail__tick,
  .prail__arrow svg {
    transition: none;
  }
}

/* ---------------------------------------------------------- services band
   More Than Equipment, on All Products. The three services are set as the
   life of one project: a rail runs across the band and each service stands on
   it where it takes over, marked by a red node at the brand's angle. Hairlines
   between the services meet the rail, never a box round them.

   The stage is the family slider's, so the page opens and closes on the same
   dark band: obsidian, its diagonal hairlines, one warm light at the far end.

   Wide: three columns on a horizontal rail. Narrow: the rail stands up the
   inline-start edge and the services follow it, one under another. */
.services {
  --svc-line: rgba(255, 255, 255, 0.12);
  --svc-node-w: 0.625rem;
  --svc-node-h: 1.125rem;
  --svc-gap: clamp(1.75rem, 0.5rem + 3vw, 4rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--eme-section);
  background: var(--eme-obsidian);
  color: var(--eme-white);
}
.services::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    55% 60% at 88% 100%,
    rgba(218, 33, 39, 0.13),
    transparent 70%
  );
}
html[dir="rtl"] .services::before {
  background: radial-gradient(
    55% 60% at 12% 100%,
    rgba(218, 33, 39, 0.13),
    transparent 70%
  );
}
.services__lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.14) 0 1px,
    transparent 1px 118px
  );
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 55%);
  mask-image: linear-gradient(180deg, #000, transparent 55%);
}

/* ---- the head: the title on one side, the promise on the other */
.services__head {
  display: grid;
  gap: var(--eme-space-5) clamp(2rem, 6vw, 8rem);
  align-items: end;
  margin-block-end: clamp(2.75rem, 1.75rem + 3.5vw, 5.5rem);
}
@media (min-width: 62rem) {
  .services__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 46ch);
  }
}
.services__eyebrow {
  margin: 0 0 var(--eme-space-3);
}
.services__title {
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 1.8vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--eme-white);
}
html[lang="ar"] .services__title {
  letter-spacing: 0;
  line-height: 1.35;
}
.services__lead {
  max-inline-size: 46ch;
  margin: 0;
  font-size: var(--eme-step-1);
  line-height: 1.6;
  color: #c9ced3;
}

/* ---- the rail. A hairline, and over it the brand rule, running out from
   the first service and fading past the last: the service life goes on. */
.services__track {
  position: relative;
}
.services__rail {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(var(--svc-node-h) / 2);
  block-size: 1px;
  background: var(--svc-line);
  pointer-events: none;
}
.services__rail-fill {
  position: absolute;
  inset-inline: 0;
  inset-block: -0.5px;
  background: linear-gradient(
    90deg,
    var(--eme-red-ink) 0%,
    var(--eme-red) 38%,
    var(--eme-ember) 78%,
    transparent 100%
  );
  transform-origin: left center;
}
html[dir="rtl"] .services__rail-fill {
  background: linear-gradient(
    270deg,
    var(--eme-red-ink) 0%,
    var(--eme-red) 38%,
    var(--eme-ember) 78%,
    transparent 100%
  );
  transform-origin: right center;
}

/* ---- one service */
.services__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.service {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-inline-size: 0;
}
/* The node: the logo's slash in red, ringed in the stage colour so the rail
   breaks round it. */
.service__node {
  display: block;
  inline-size: var(--svc-node-w);
  block-size: var(--svc-node-h);
  background: var(--eme-red);
  box-shadow: 0 0 0 5px var(--eme-obsidian);
  transform: skewX(var(--eme-slant));
  transition: background var(--eme-med) var(--eme-ease);
}
.service__phase {
  margin: 1.25rem 0 0;
  font-size: var(--eme-step--1);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
html[lang="ar"] .service__phase {
  letter-spacing: 0;
}
.service__top {
  display: flex;
  margin-block-start: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}
.service__icon {
  inline-size: clamp(3.25rem, 2.5rem + 1.6vw, 4.5rem);
  block-size: auto;
  overflow: visible;
  fill: none;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service__icon .acc {
  stroke: var(--eme-red);
}
.service__title {
  margin: clamp(1.25rem, 0.9rem + 1vw, 2rem) 0 0;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.375rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--eme-white);
}
html[lang="ar"] .service__title {
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.6;
}
.service__body {
  max-inline-size: 54ch;
  margin: 0.75rem 0 0;
  font-size: var(--eme-step-0);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.64);
}
.service__body strong,
.service__scope strong {
  font-weight: 600;
  color: var(--eme-white);
  white-space: nowrap;
}

/* What it covers: ruled rows, each marked with a small slash. */
.service__scope {
  align-self: stretch;
  margin: clamp(1.5rem, 1.1rem + 1vw, 2rem) 0 1.75rem;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--svc-line);
}
.service__scope li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 0.85rem;
  padding-block: 0.7rem;
  border-block-end: 1px solid var(--svc-line);
  font-size: clamp(0.8125rem, 0.76rem + 0.14vw, 0.875rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
}
.service__scope li::before {
  content: "";
  display: inline-block;
  inline-size: 0.25rem;
  block-size: 0.7em;
  background: var(--eme-red);
  transform: skewX(var(--eme-slant));
}

/* The way to the page that proves it: at the foot, on one line across the row. */
.service__link {
  --link: rgba(255, 255, 255, 0.82);
  --link-hover: var(--eme-white);
  margin-block-start: auto;
}

.service:hover .service__node,
.service:focus-within .service__node {
  background: var(--eme-ember);
}

/* ---- narrow: the rail stands up the edge, a timeline */
@media (max-width: 63.99rem) {
  .services__rail {
    inset-inline: calc(var(--svc-node-w) / 2) auto;
    inset-block: calc(var(--svc-node-h) / 2) 0;
    inline-size: 1px;
    block-size: auto;
  }
  .services__rail-fill,
  html[dir="rtl"] .services__rail-fill {
    inset-block: 0;
    inset-inline: -0.5px;
    background: linear-gradient(
      180deg,
      var(--eme-red-ink) 0%,
      var(--eme-red) 30%,
      var(--eme-ember) 70%,
      transparent 100%
    );
    transform-origin: center top;
  }
  .services__list {
    row-gap: clamp(3rem, 2rem + 4vw, 4.5rem);
  }
  .service {
    display: grid;
    grid-template-columns: var(--svc-node-w) minmax(0, 1fr);
    column-gap: clamp(1.25rem, 0.75rem + 2vw, 2rem);
    align-items: start;
  }
  .service > * {
    grid-column: 2;
  }
  .service > .service__node {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }
  .service__phase {
    grid-row: 1;
    margin: 0;
  }
  .service__top {
    margin-block-start: 1.5rem;
  }
  .service > .service__link {
    justify-self: start;
  }
}
/* A tablet has the width for what the service covers in two columns. */
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .service__scope {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--svc-gap);
  }
}

/* ---- wide: three columns on the rail, hairlines meeting it */
@media (min-width: 64rem) {
  .services__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .service {
    padding-inline: var(--svc-gap);
  }
  .service:first-child {
    padding-inline-start: 0;
  }
  .service:last-child {
    padding-inline-end: 0;
  }
  .service + .service::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: calc(var(--svc-node-h) / 2) 0;
    inline-size: 1px;
    background: var(--svc-line);
  }
}
/* One set of rows for the three: a name that runs to two lines moves every
   paragraph, list and link after it down together, so the row reads level. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 64rem) {
    .services__list {
      grid-template-rows: repeat(7, auto);
    }
    .service {
      display: grid;
      grid-row: span 7;
      grid-template-rows: subgrid;
      align-items: start;
      justify-items: start;
    }
    .service__top,
    .service__scope {
      justify-self: stretch;
    }
    /* A one-line name sits on its paragraph; the room goes above it. */
    .service__title {
      align-self: end;
    }
    .service__link {
      align-self: end;
    }
  }
}

/* ---- arrival. Armed by site.js only when the band starts below the fold;
   without it (or without motion) the band stands as the server rendered it.
   The rail runs out first, each node lands as it passes, then the service
   rises and its icon draws itself in, the red strokes last. */
.services.is-armed .services__head {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
}
.services.is-armed .services__head.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms var(--eme-ease-out),
    transform 900ms var(--eme-ease-out);
}
.services.is-armed .services__rail-fill {
  transform: scaleX(0);
}
.services.is-armed .services__track.is-in .services__rail-fill {
  transform: none;
  transition: transform 1800ms var(--eme-ease-out) 150ms;
}
.services.is-armed .service__node {
  opacity: 0;
  transform: skewX(var(--eme-slant)) scale(0.2);
}
.services.is-armed .service.is-in .service__node {
  opacity: 1;
  transform: skewX(var(--eme-slant));
  transition:
    opacity 300ms var(--eme-ease) calc(var(--d) * 420ms + 200ms),
    transform 600ms var(--eme-ease-out) calc(var(--d) * 420ms + 200ms),
    background var(--eme-med) var(--eme-ease);
}
.services.is-armed .service > :not(.service__node) {
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
}
.services.is-armed .service.is-in > :not(.service__node) {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms var(--eme-ease-out) calc(var(--d) * 160ms + 350ms),
    transform 900ms var(--eme-ease-out) calc(var(--d) * 160ms + 350ms);
}
.services.is-armed .service__icon > * {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
.services.is-armed .service.is-in .service__icon > * {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1400ms var(--eme-ease-out)
    calc(var(--d) * 160ms + 550ms);
}
.services.is-armed .service.is-in .service__icon > .acc {
  transition-delay: calc(var(--d) * 160ms + 1100ms);
}
/* Side by side, the services land in turn as the rail reaches them; one under
   another, each lands as it is scrolled to, not on a clock the first started. */
.service {
  --d: 0;
}
@media (min-width: 64rem) {
  .service {
    --d: var(--i, 0);
  }
}
@media (max-width: 63.99rem) {
  .services.is-armed .services__rail-fill {
    transform: scaleY(0);
  }
  .services.is-armed .services__track.is-in .services__rail-fill {
    transition-duration: 2600ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  .service__node {
    transition: none;
  }
}

/* ------------------------------------------------------------------- forms */
.form {
  display: grid;
  gap: var(--eme-space-4);
}
.form__row {
  display: grid;
  gap: var(--eme-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
/* Top-aligned: a neighbour's error message makes the row taller, and the
   field beside it must not stretch its input to match. */
.field {
  display: grid;
  align-content: start;
  gap: 0.4rem;
}
.field__label {
  font-size: var(--eme-step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eme-text-muted);
}
html[lang="ar"] .field__label {
  letter-spacing: 0;
  text-transform: none;
}
.field__req {
  margin-inline-start: 0.3em;
  color: var(--eme-red);
}
.field__input {
  inline-size: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--eme-line-strong);
  background: var(--eme-white);
  color: var(--eme-text);
  font: inherit;
  /* Never under 16px: iOS zooms the page into any smaller field on focus. */
  font-size: max(1rem, var(--eme-step-0));
}
.field__input:focus {
  border-color: var(--eme-red);
  outline: none;
  box-shadow: inset 0 -2px 0 var(--eme-red);
}
.field__input[aria-invalid="true"] {
  border-color: var(--eme-red);
  background: #fdf3f3;
}
.field__error {
  font-size: var(--eme-step--1);
  color: var(--eme-red);
}
textarea.field__input {
  min-block-size: 8rem;
  resize: vertical;
}
.field--hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.form__note {
  font-size: var(--eme-step--1);
  color: var(--eme-text-muted);
}
/* The send button and, beside it, when the reply comes. */
.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--eme-space-3) var(--eme-space-5);
  margin-block-start: var(--eme-space-2);
}
.form__actions .form__note {
  margin: 0;
}
/* Sent, waiting for the next page (site.js). */
.btn[aria-disabled="true"] {
  opacity: 0.72;
  cursor: progress;
}
.form-alert {
  padding: var(--eme-space-4);
  border: 1px solid var(--eme-red);
  background: #fdf3f3;
  color: var(--eme-red-dark);
}

/* --------------------------------------------------------------- CTA bands */
.cta-band {
  background: var(--eme-red);
  color: var(--eme-white);
}
.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--eme-space-5);
  padding-block: var(--eme-space-7);
}
.cta-band__text {
  max-inline-size: 52ch;
}
.cta-band__text h2 {
  margin-block-end: var(--eme-space-2);
}
.cta-band .btn {
  background: var(--eme-white);
  color: var(--eme-red);
}
.cta-band .btn:hover {
  background: var(--eme-obsidian);
  color: var(--eme-white);
}
/* Under the two buttons, the company profile for a reader not ready to ask
   for a price (views/partials/cta-band.php). */
.cta-band__go {
  display: grid;
  justify-items: start;
  gap: var(--eme-space-4);
}
.cta-band__profile {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--eme-step--1);
  font-weight: 600;
  color: var(--eme-white);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  transition: text-decoration-color var(--eme-fast) var(--eme-ease);
}
.cta-band__profile:hover {
  text-decoration-color: var(--eme-white);
}
.cta-band__profile svg {
  flex: none;
  transition: transform 320ms var(--eme-ease-out);
}
html[dir="rtl"] .cta-band__profile svg {
  transform: scaleX(-1);
}
.cta-band__profile:hover svg {
  transform: translateX(4px);
}
html[dir="rtl"] .cta-band__profile:hover svg {
  transform: scaleX(-1) translateX(4px);
}
.cta-band__profile:focus-visible {
  outline: 2px solid var(--eme-white);
  outline-offset: 4px;
}

/* The bar is a fixed height, so the page can keep that much clear under its
   last line: without it the footer's closing row sits behind the bar. It pads
   itself past the home indicator on phones that have one. */
.sticky-cta {
  --sticky-h: 3rem;
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--eme-z-float);
  display: flex;
  gap: 1px;
  padding-block-end: env(safe-area-inset-bottom, 0px);
  background: var(--eme-obsidian);
  box-shadow: 0 -8px 24px rgba(26, 28, 30, 0.12);
}
.sticky-cta .btn {
  flex: 1 1 0;
  min-inline-size: 0;
  min-block-size: var(--sticky-h);
  padding-inline: 0.75em;
  white-space: nowrap;
}
@media (max-width: 22.5rem) {
  .sticky-cta .btn {
    letter-spacing: 0.04em;
  }
}
@media (min-width: 1080px) {
  .sticky-cta {
    display: none;
  }
}

.wa-float {
  position: fixed;
  inset-block-end: var(--eme-space-5);
  inset-inline-end: var(--eme-space-5);
  z-index: var(--eme-z-float);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 52px;
  block-size: 52px;
  background: var(--eme-obsidian);
  color: var(--eme-white);
  border: 1px solid var(--eme-line-dark);
  border-radius: 50%;
}
.wa-float:hover {
  background: var(--eme-red);
  border-color: var(--eme-red);
}
/* Where the call/quote bar is shown (the contact page, under 1080px), the
   button stands clear above it. */
@media (max-width: 1079.98px) {
  body:has(> .sticky-cta) .wa-float {
    inset-block-end: calc(var(--eme-space-5) + 56px);
  }
}

/* ------------------------------------------------------------------ footer */
/* Four things and a closing row: the mark and the brand line, what EME makes
   and who EME is, the head office. Hierarchy is colour and weight, not size
   or capitals: titles and the ways to reach us are white, links are the muted
   ink, and both languages read the same (Arabic has no capitals to track). */
.site-footer {
  --footer-line: var(--eme-line-dark);
  background: var(--eme-obsidian);
  color: var(--eme-text-invert-muted);
  padding-block: var(--eme-space-8) var(--eme-space-5);
  font-size: var(--eme-step-0);
  line-height: 1.6;
}
@media (min-width: 48rem) {
  .site-footer {
    font-size: var(--eme-step--1);
  }
}
.site-footer :where(p) {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}
.site-footer a {
  transition: color var(--eme-fast) var(--eme-ease);
}
.site-footer a:hover {
  color: var(--eme-white);
}
/* Below 1080px, on the page that has it, the call/quote bar is fixed over the
   foot of the screen; the footer keeps that much clear so its closing row is
   never behind it. The row sits in the gap between that bar and the WhatsApp
   button above it (which stands 80px up), so neither covers the legal links at
   the end of the page. */
@media (max-width: 1079.98px) {
  body:has(> .sticky-cta) .site-footer {
    padding-block-end: calc(3rem + 0.5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Phone: one column, the lists folded behind their titles. Tablet: the brand
   runs across the top, the lists share a row, the head office lies across the
   foot. 64rem: equal columns, the head office beside the lists. Wide: one row
   of equal columns, the brand first. The lists sit on the same tracks through
   a subgrid, and --lists (set by the template) is how many there are, so a
   third list (Resources, once live) takes a column with no new rule. */
.site-footer__grid {
  display: grid;
  gap: var(--eme-space-7);
}
.site-footer__nav {
  display: grid;
  gap: var(--eme-space-7) var(--eme-space-5);
}
@media (min-width: 48rem) {
  .site-footer__nav {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  /* The ways to reach us on the left, the office and its hours beside them. */
  .site-footer__nap {
    grid-template-columns: max-content minmax(0, max-content);
    column-gap: clamp(2rem, 6vw, 4.5rem);
  }
  .site-footer .site-footer__reach {
    grid-row: span 2;
    align-content: start;
  }
}
@media (min-width: 64rem) {
  .site-footer__grid {
    grid-template-columns: repeat(var(--lists, 2), minmax(0, 1fr)) minmax(
        0,
        1fr
      );
    column-gap: clamp(1.5rem, 3vw, 3.5rem);
  }
  .site-footer__brand {
    grid-column: 1 / -1;
  }
  .site-footer__nav {
    grid-column: span var(--lists, 2);
    grid-template-columns: subgrid;
  }
  .site-footer__nap {
    grid-template-columns: minmax(0, 1fr);
  }
  .site-footer .site-footer__reach {
    grid-row: auto;
  }
}
@media (min-width: 80rem) {
  .site-footer__grid {
    grid-template-columns:
      minmax(0, 1fr) repeat(var(--lists, 2), minmax(0, 1fr))
      minmax(0, 1fr);
  }
  .site-footer__brand {
    grid-column: auto;
  }
}

/* The brand: the mark, the brand line (the one sentence the footer keeps) and
   the social marks. Phone: social beside the mark, the line under both.
   Tablet: one row, a hairline between mark and line, social at the far end.
   Wide: stacked in its column. */
.site-footer__brand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--eme-space-4);
}
.site-footer__brand img {
  block-size: 38px;
  inline-size: auto;
}
.site-footer__line {
  grid-row: 2;
  grid-column: 1 / -1;
  color: var(--eme-white);
  font-weight: 500;
}
/* 44px marks; the outer one is pulled out by its own padding, so the glyph,
   not the hit area, lines up with the edge. */
.site-footer__social {
  display: flex;
  margin: 0;
  margin-inline-end: -12px;
  padding: 0;
  list-style: none;
}
.site-footer__social a {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
}
.site-footer__social svg {
  inline-size: 20px;
  block-size: 20px;
}
@media (min-width: 48rem) {
  .site-footer__brand {
    display: flex;
    gap: var(--eme-space-5);
  }
  .site-footer__line {
    margin-inline-end: auto;
    padding-inline-start: var(--eme-space-5);
    border-inline-start: 1px solid var(--footer-line);
    font-size: var(--eme-step-0);
  }
}
@media (min-width: 80rem) {
  .site-footer__brand {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-items: start;
  }
  .site-footer__line {
    grid-row: auto;
    padding: 0;
    border: 0;
  }
  /* Pulled up by part of its padding: the glyphs sit a line below the text. */
  .site-footer__social {
    margin-block-start: calc(var(--eme-space-1) * -1);
    margin-inline: -12px 0;
  }
}

.site-footer__title {
  margin: 0 0 var(--eme-space-4);
  color: var(--eme-white);
  font-size: inherit;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}
.site-footer__links {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The fold, phone only and only once site.js has run (it adds --folds): the
   title becomes a full-width button, hairlines between the rows. */
.site-footer__toggle {
  display: none;
}
.site-footer__toggle svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}
.site-footer__stem {
  transform-origin: center;
  transition: transform var(--eme-med) var(--eme-ease-out);
}
.site-footer__col.is-open .site-footer__stem {
  transform: scaleY(0);
}
@media (max-width: 47.99rem) {
  .site-footer--folds .site-footer__nav {
    gap: 0;
  }
  .site-footer--folds .site-footer__col {
    border-block-start: 1px solid var(--footer-line);
  }
  .site-footer--folds .site-footer__col:last-child {
    border-block-end: 1px solid var(--footer-line);
  }
  .site-footer--folds .site-footer__title {
    margin: 0;
  }
  .site-footer--folds .site-footer__label {
    display: none;
  }
  .site-footer--folds .site-footer__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eme-space-4);
    inline-size: 100%;
    min-block-size: 3.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
  }
  .site-footer--folds .site-footer__col:not(.is-open) .site-footer__links {
    display: none;
  }
  .site-footer--folds .site-footer__links {
    padding-block-end: var(--eme-space-4);
    animation: site-footer-open var(--eme-med) var(--eme-ease-out);
  }
}
@keyframes site-footer-open {
  from {
    opacity: 0;
    transform: translateY(-0.375rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-footer a,
  .site-footer__stem {
    transition: none;
  }
  .site-footer--folds .site-footer__links {
    animation: none;
  }
}

.site-footer__nap {
  display: grid;
  gap: var(--eme-space-4);
  font-style: normal;
}
.site-footer__nap > span {
  display: block;
  text-wrap: pretty;
}
/* The ways to reach us lead, in white: they are what the column is for. */
.site-footer .site-footer__reach {
  display: grid;
  justify-items: start;
}
.site-footer__reach a {
  color: var(--eme-white);
  font-weight: 500;
}
@media (min-width: 48rem) {
  .site-footer__reach a {
    font-size: var(--eme-step-0);
  }
}
.site-footer__reach a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.site-footer__role {
  display: block;
  color: var(--eme-white);
}

/* Touch: each link gets a finger-sized row instead of a 17px line of text.
   Phone and email links are stacked a line apart on every page (footer,
   location cards), too close to tell apart under a finger, so they get the
   same row. */
@media (pointer: coarse) {
  .site-footer .site-footer__links {
    gap: 0;
  }
  .site-footer__links a,
  .site-footer__legal a,
  a[href^="tel:"]:not(.btn, .drawer__contact),
  a[href^="mailto:"]:not(.btn, .drawer__contact) {
    display: inline-block;
    padding-block: 0.4rem;
  }
}

/* The WhatsApp button stands in the corner beside the closing row, and on a
   phone the row wraps to two or three lines that climb up beside it. Wherever
   the gutter is narrower than the button and its margin, the row keeps that
   much clear at its end, so its words never run under the button. */
.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--eme-space-2) var(--eme-space-5);
  margin-block-start: var(--eme-space-8);
  padding-block-start: var(--eme-space-5);
  padding-inline-end: max(
    0px,
    calc(52px + var(--eme-space-5) + 0.5rem - var(--eme-gutter))
  );
  border-block-start: 1px solid var(--footer-line);
}
/* English on the Arabic site too, so it is set in the Latin face. */
.site-footer__credit {
  font-family: var(--eme-font-latin);
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--eme-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* -------------------------------------------------------- image placeholder */
.eme-img-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  inline-size: 100%;
  background-color: #e7eaed;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(26, 28, 30, 0.045) 0 12px,
    transparent 12px 24px
  );
  color: var(--eme-graphite);
}
.eme-img-pending__mark {
  font-weight: 600;
  letter-spacing: 0.34em;
  font-size: var(--eme-step--1);
  opacity: 0.55;
}

.eme-figure {
  margin: 0;
}
.eme-figure figcaption {
  padding-block-start: var(--eme-space-2);
  font-size: var(--eme-step--1);
  color: var(--eme-text-muted);
}

/* --------------------------------------------------------------- utilities */
.stack > * + * {
  margin-block-start: var(--eme-space-4);
}
.stack-lg > * + * {
  margin-block-start: var(--eme-space-6);
}
.muted {
  color: var(--eme-text-muted);
}
.center {
  text-align: center;
}
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.split {
  display: grid;
  gap: var(--eme-space-7);
  grid-template-columns: 1fr;
}
.split p {
  max-inline-size: 68ch;
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }
  .split--wide-end {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.panel {
  padding: var(--eme-space-5);
  border: 1px solid var(--eme-line);
  background: var(--eme-bg-alt);
}
.panel--dark {
  background: var(--eme-obsidian);
  border-color: var(--eme-line-dark);
  color: var(--eme-white);
}

/* ------------------------------------------- corporate pages (Phase 3) */
.prose {
  max-inline-size: 74ch;
}
/* On a container the cap belongs to the lines, not the box: capping the box
   centred a narrow column on a wide screen, off the edge every other section
   starts from. */
.container.prose {
  max-inline-size: var(--eme-container);
}
.container.prose > * {
  max-inline-size: 74ch;
}
.panel__title {
  margin-block-end: var(--eme-space-2);
  font-size: var(--eme-step-1);
}

/* Numbered cards: pillars, process steps, services. Numbers come from CSS, so a
   list reordered in content renumbers itself. */
.steps {
  display: grid;
  gap: var(--eme-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps__item {
  position: relative;
  padding: var(--eme-space-6) var(--eme-space-5) var(--eme-space-5);
  border-block-start: 3px solid var(--eme-red);
  background: var(--eme-bg);
  counter-increment: step;
}
.section--alt .steps__item {
  background: var(--eme-white);
}
.steps__item::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-block-end: var(--eme-space-3);
  font-size: var(--eme-step-2);
  font-weight: 700;
  line-height: 1;
  color: var(--eme-red);
  font-family: var(--eme-font-latin);
}
.steps__title {
  margin-block-end: var(--eme-space-2);
  font-size: var(--eme-step-1);
}
.steps__item p {
  margin: 0 0 var(--eme-space-3);
  color: var(--eme-text-muted);
}
@media (min-width: 720px) {
  .steps--2,
  .steps--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .steps--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .steps--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Vision statement */
.quote {
  margin: 0;
  padding-inline-start: var(--eme-space-6);
  border-inline-start: 4px solid var(--eme-red);
  max-inline-size: 60ch;
}
.quote blockquote {
  margin: var(--eme-space-3) 0 0;
}
.quote blockquote p {
  margin: 0;
  font-size: var(--eme-step-3);
  line-height: 1.35;
  font-weight: 600;
}

/* Chairman's letter: portrait beside the message, signature at its foot */
.letter {
  display: grid;
  gap: var(--eme-space-7);
  align-items: start;
}
@media (min-width: 900px) {
  .letter {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  }
  .letter__portrait {
    position: sticky;
    inset-block-start: calc(var(--eme-header-h) + var(--eme-space-5));
  }
}
.letter__body p {
  max-inline-size: 68ch;
}
.letter__sign {
  margin-block-start: var(--eme-space-6);
  padding-block-start: var(--eme-space-5);
  border-block-start: 1px solid var(--eme-line);
}
.letter__signature {
  inline-size: min(240px, 70%);
  margin-block-end: var(--eme-space-3);
}
.letter__name {
  margin: 0;
  font-weight: 700;
}
.letter__sign .muted {
  margin: 0;
}

/* Export coverage: Egypt → Africa */
.coverage {
  display: grid;
  gap: var(--eme-space-3);
  margin: var(--eme-space-5) 0 0;
  padding: 0;
  list-style: none;
}
.coverage__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1.4fr);
  gap: var(--eme-space-3);
  align-items: center;
  padding: var(--eme-space-4);
  border: 1px solid var(--eme-line);
  background: var(--eme-bg-alt);
}
.coverage__from {
  font-weight: 700;
}
.coverage__arrow {
  block-size: 2px;
  background: var(--eme-red);
  position: relative;
}
.coverage__arrow::after {
  content: "";
  position: absolute;
  inset-inline-end: -1px;
  inset-block-start: -4px;
  border-block: 5px solid transparent;
  border-inline-start: 8px solid var(--eme-red);
}
.coverage__to {
  color: var(--eme-text-muted);
}

.def-list--compact {
  gap: var(--eme-space-2);
  margin-block-start: var(--eme-space-4);
}
.def-list--compact div {
  grid-template-columns: minmax(96px, 38%) 1fr;
  gap: var(--eme-space-3);
  padding-block-end: var(--eme-space-2);
}
/* Narrow (a panel on a phone): a 120px label column left the value a word
   per line, so the label stands over its value instead. Last, so it outranks
   the tight and compact variants above. */
@container (max-width: 20rem) {
  .def-list div,
  .def-list--tight div,
  .def-list--compact div {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.15rem;
  }
}

.checklist {
  display: grid;
  gap: var(--eme-space-3);
  margin: var(--eme-space-3) 0 0;
  padding: 0;
  list-style: none;
}
.checklist li {
  position: relative;
  padding-inline-start: var(--eme-space-5);
}
.checklist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  inline-size: 0.6rem;
  block-size: 0.6rem;
  background: var(--eme-red);
}

.cta-band__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Sector page: the names in the sector's reference list, under its cards. */
.grid + .sector-refs {
  margin-block-start: var(--eme-space-6);
}
.sector-refs__all {
  margin: var(--eme-space-5) 0 0;
}

/* The chapter bar's height, and the floating header's row once the page has
   moved (.site-header--over.is-scrolled): the bar tucks under it while it
   shows. A page with the bar lands its anchors below both, with room. */
:root {
  --chapters-h: 3.5rem;
  --chapters-under: 62px;
}
:root:has(.chapters) {
  scroll-padding-block-start: calc(
    var(--chapters-under) + var(--chapters-h) + 1.5rem
  );
}

/* ------------------------------------------------------------ chapter bar
   On a cover page (About, Signature Projects), the bar under the cover that
   names the page's chapters, or its sectors. Sticks to the top once the cover has gone by. The header steps away while
   the reader scrolls down and comes back when they scroll up; the bar moves
   down under it and back with the same timing, so the two never overlap. On a
   narrow screen the names scroll sideways and the edge fades to say so. */
.chapters {
  /* Always on the dark stage, whatever page it is on: About's dark tokens. */
  --eme-text: #f3f5f6;
  --eme-text-muted: #a3a9ae;
  --eme-line: rgba(255, 255, 255, 0.1);
  position: sticky;
  inset-block-start: 0;
  z-index: calc(var(--eme-z-header) - 10);
  background: rgb(13 15 16 / 0.97);
  border-block-end: 1px solid var(--eme-line);
  transition: inset-block-start 480ms var(--eme-ease-out);
}
body:has(.site-header.is-scrolled:not(.is-hidden)) .chapters {
  inset-block-start: var(--chapters-under);
}
.chapters__list {
  display: flex;
  gap: clamp(1.25rem, 0.5rem + 2.2vw, 2.75rem);
  block-size: var(--chapters-h);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.chapters__list::-webkit-scrollbar {
  display: none;
}
.chapters__list li {
  display: flex;
  flex: none;
}
.chapters__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--eme-step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--eme-text-muted);
  transition: color var(--eme-fast) var(--eme-ease);
}
html[lang="ar"] .chapters__link {
  letter-spacing: 0;
}
/* The chapter being read: its name in white over a red rule on the hairline. */
.chapters__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background: var(--eme-red);
  transform: scaleX(0);
  transition: transform var(--eme-med) var(--eme-ease-out);
}
.chapters__link:hover,
.chapters__link[aria-current="true"] {
  color: var(--eme-text);
}
.chapters__link[aria-current="true"]::after {
  transform: scaleX(1);
}
.chapters__link:focus-visible {
  outline-offset: -2px;
}
/* History is a page of its own: set apart at the far end, in red, with the
   arrow that leads off the page. */
.chapters__out {
  margin-inline-start: auto;
  padding-inline-start: clamp(1.25rem, 0.5rem + 2.2vw, 2.75rem);
  border-inline-start: 1px solid var(--eme-line);
}
.chapters__out .chapters__link {
  color: #ff5a5f;
}
.chapters__out .chapters__link::after {
  content: none;
}
.chapters__out svg {
  transition: transform var(--eme-med) var(--eme-ease-out);
}
.chapters__out .chapters__link:hover svg {
  transform: translateX(4px);
}
html[dir="rtl"] .chapters__out svg {
  transform: scaleX(-1);
}
html[dir="rtl"] .chapters__out .chapters__link:hover svg {
  transform: scaleX(-1) translateX(4px);
}
@media (max-width: 47.99rem) {
  .chapters .container {
    padding-inline-end: 0;
  }
  .chapters__list {
    padding-inline-end: var(--eme-gutter);
    mask-image: linear-gradient(
      to right,
      #000 calc(100% - 2.5rem),
      transparent
    );
  }
  html[dir="rtl"] .chapters__list {
    mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chapters,
  .chapters__link::after,
  .chapters__out svg {
    transition: none;
  }
}