/* =============================================================================
   Home — the hero stage and the welcome plate that follows it.

   One visual system with the rest of the site: the brand angle (--eme-slant)
   cuts the blade behind the headline, the pager bars, the wipe between slides
   and the menu overlay. Photography is set in greyscale so brand red is the
   only colour on the stage, unless the back office turns a slide to colour.
   ========================================================================== */

/* -------------------------------------------------------------------- hero */
.home-hero {
  --hero-interval: 7s;
  --rail-h: clamp(3rem, 2.6rem + 0.9vw, 3.875rem);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  block-size: 100vh;
  block-size: 100svh;
  min-block-size: 36rem;
  max-block-size: 75rem;
  overflow: hidden;
  container-type: size;
  background: var(--eme-night);
  color: var(--eme-white);
}

/* ---- dragging. The stage answers to a mouse or a finger: the picture moves a
   little, the words more, and both settle back on release. */
.home-hero {
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.home-hero a,
.home-hero button {
  cursor: pointer;
}
.home-hero.is-dragging {
  cursor: grabbing;
}
.home-hero img {
  -webkit-user-drag: none;
}
.home-hero__frame.is-active {
  transform: translate3d(calc(var(--drag, 0) * 0.3px), 0, 0);
}
.home-hero__slides {
  opacity: var(--drag-fade, 1);
  transform: translate3d(calc(var(--drag, 0) * 0.7px), 0, 0);
}
.home-hero.is-releasing .home-hero__frame,
.home-hero.is-releasing .home-hero__slides {
  transition:
    transform 620ms var(--eme-ease-out),
    opacity 420ms var(--eme-ease);
}

/* ---- the pictures */
.home-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.home-hero__frame {
  position: absolute;
  inset: 0;
  visibility: hidden;
  overflow: hidden;
  background: var(--eme-night);
}
.home-hero__frame.is-active,
.home-hero__frame.is-leaving {
  visibility: visible;
}
.home-hero__frame.is-leaving {
  z-index: 1;
}
/* The incoming picture is cut in along the brand angle, over the outgoing one. */
.home-hero__frame.is-active {
  z-index: 2;
}
.home-hero.is-moving .home-hero__frame.is-active {
  animation: hero-wipe 1150ms var(--eme-ease-out) both;
}
html[dir="rtl"] .home-hero.is-moving .home-hero__frame.is-active {
  animation-name: hero-wipe-rtl;
}
@keyframes hero-wipe {
  from {
    clip-path: polygon(118% 0, 118% 0, 100% 100%, 100% 100%);
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, -18% 100%);
  }
}
@keyframes hero-wipe-rtl {
  from {
    clip-path: polygon(0 0, 0 0, -18% 100%, -18% 100%);
  }
  to {
    clip-path: polygon(0 0, 118% 0, 100% 100%, 0 100%);
  }
}

.home-hero__frame picture {
  display: block;
  block-size: 100%;
}
.home-hero__photo {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  filter: grayscale(1) contrast(1.08) brightness(0.84);
}
/* A slide the back office set to colour keeps the same dimming under the words. */
.home-hero__frame--color .home-hero__photo {
  filter: contrast(1.04) brightness(0.84);
}
/* A tablet or phone held upright may have its own picture (HeroSlides::DEVICES,
   same queries); the frame then carries a crop for it. */
@media (orientation: portrait) and (min-width: 48rem) {
  .home-hero__photo {
    object-position: var(--focus-t, var(--focus, 50% 50%));
  }
}
@media (orientation: portrait) and (max-width: 47.99rem) {
  .home-hero__photo {
    object-position: var(--focus-m, var(--focus, 50% 50%));
  }
}
/* A slow settle while a slide is up: the camera easing in, not a zoom effect. */
.home-hero__frame.is-active .home-hero__photo,
.home-hero__frame.is-leaving .home-hero__photo {
  animation: hero-settle 9s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
@keyframes hero-settle {
  from {
    transform: scale(1.12);
  }
  to {
    transform: scale(1.02);
  }
}

/* ---- the region. A vector map drawn from Natural Earth in a known projection
   (tools/region-map.php); the factory pins, the routes from head office and the
   three highlighted countries are all placed from real coordinates by the same
   projection, so nothing drifts at any size. The plate keeps the map's
   proportions and covers the stage from the right, so any crop falls on the
   open Atlantic under the headline. */
.home-hero__map {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(
    ellipse 90% 100% at 66% 36%,
    #000 55%,
    rgba(0, 0, 0, 0.35) 100%
  );
  mask-image: radial-gradient(
    ellipse 90% 100% at 66% 36%,
    #000 55%,
    rgba(0, 0, 0, 0.35) 100%
  );
}
.home-hero__map-plate {
  position: absolute;
  right: 0;
  top: 50%;
  inline-size: max(100cqw, 100cqh * var(--ratio));
  aspect-ratio: var(--ratio);
  transform: translateY(-50%);
}
.home-hero__map-img,
.home-hero__map-overlay {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
}
.home-hero__map-overlay {
  overflow: visible;
}
.home-hero__map-overlay path {
  vector-effect: non-scaling-stroke;
}
.home-hero__country {
  fill: rgba(218, 33, 39, 0.16);
  stroke: rgba(218, 33, 39, 0.6);
  stroke-width: 1;
  stroke-linejoin: round;
}
.home-hero__route {
  fill: none;
  stroke: var(--eme-red);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.home-hero__frame.is-active .home-hero__country {
  animation: hero-fade 900ms var(--eme-ease) 350ms both;
}
.home-hero__frame.is-active .home-hero__route {
  animation: hero-route 1500ms var(--eme-ease-out) 950ms both;
}
.home-hero__frame.is-active .home-hero__route + .home-hero__route {
  animation-delay: 1150ms;
}
@keyframes hero-fade {
  from {
    opacity: 0;
  }
}
@keyframes hero-route {
  to {
    stroke-dashoffset: 0;
  }
}

/* A pin is a point with no size, at its coordinate; the dot is centred on it
   and the label hangs below, away from the routes that arc above. */
.home-hero__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  inline-size: 0;
  block-size: 0;
}
.home-hero__pin-dot {
  position: absolute;
  left: 0;
  top: 0;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--eme-red);
  box-shadow: 0 0 0 3px rgba(218, 33, 39, 0.25);
  transform: translate(-50%, -50%);
}
.home-hero__pin--hq .home-hero__pin-dot {
  inline-size: 14px;
  block-size: 14px;
  background: var(--eme-white);
  box-shadow: 0 0 0 3px var(--eme-red);
}
.home-hero__pin-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--eme-red);
  animation: hero-ping 2.6s var(--eme-ease-out) infinite;
}
@keyframes hero-ping {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  to {
    transform: scale(4);
    opacity: 0;
  }
}
.home-hero__pin-label {
  position: absolute;
  top: 12px;
  left: -3px;
  display: grid;
  gap: 1px;
  font-size: var(--eme-step--1);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
  text-align: left;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}
.home-hero__pin--flip .home-hero__pin-label {
  left: auto;
  right: -3px;
  text-align: right;
}
.home-hero__pin-label strong {
  color: var(--eme-white);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html[lang="ar"] .home-hero__pin-label {
  direction: rtl;
}
html[lang="ar"] .home-hero__pin-label strong {
  letter-spacing: 0;
}
.home-hero__frame.is-active .home-hero__pin {
  animation: hero-pin 700ms var(--eme-ease-out) both;
  animation-delay: calc(650ms + var(--n, 0) * 150ms);
}
.home-hero__pin:nth-of-type(2) {
  --n: 1;
}
.home-hero__pin:nth-of-type(3) {
  --n: 2;
}
@keyframes hero-pin {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Arabic sets the headline on the right, under the eastern pin: the map rides
   higher so Oman's label clears it. */
html[dir="rtl"] .home-hero__map-plate {
  top: 41%;
}

/* Upright screens: the map is sized by the spread of the factories rather than
   by the screen, the cluster sits in the upper third, the plate fades out at
   its own edges. */
@container (orientation: portrait) {
  .home-hero__map-plate,
  html[dir="rtl"] .home-hero__map-plate {
    right: auto;
    left: 50%;
    top: 27%;
    inline-size: 200cqw;
    transform: translate(calc(var(--cx) * -1%), calc(var(--cy) * -1%));
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0%,
      #000 22%,
      #000 68%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      transparent 0%,
      #000 22%,
      #000 68%,
      transparent 100%
    );
  }
  .home-hero__map {
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* Benghazi and Cairo sit a few pixels apart at this size: the pins, routes
     and outlined countries carry it, and the tagline names all three. */
  .home-hero__pin-label {
    display: none;
  }
}

/* ---- the shade that keeps the words legible */
.home-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      0deg,
      rgba(8, 9, 10, 0.9) 0%,
      rgba(8, 9, 10, 0.5) 24%,
      rgba(8, 9, 10, 0) 56%
    ),
    linear-gradient(
      90deg,
      rgba(8, 9, 10, 0.72) 0%,
      rgba(8, 9, 10, 0.28) 42%,
      rgba(8, 9, 10, 0) 68%
    );
}
html[dir="rtl"] .home-hero__shade {
  background:
    linear-gradient(
      0deg,
      rgba(8, 9, 10, 0.9) 0%,
      rgba(8, 9, 10, 0.5) 24%,
      rgba(8, 9, 10, 0) 56%
    ),
    linear-gradient(
      270deg,
      rgba(8, 9, 10, 0.72) 0%,
      rgba(8, 9, 10, 0.28) 42%,
      rgba(8, 9, 10, 0) 68%
    );
}

/* ---- the words */
.home-hero__body {
  grid-row: 1;
  align-self: end;
  display: grid;
  gap: clamp(1.75rem, 4.5cqh, 3.25rem);
  padding-block: 7rem clamp(1.75rem, 5cqh, 3.75rem);
}
.home-hero__copy {
  position: relative;
}
.home-hero__slides {
  display: grid;
}
.home-hero__slide {
  position: relative;
  grid-area: 1 / 1;
  align-self: end;
  visibility: hidden;
}
.home-hero__slide.is-active,
.home-hero__slide.is-leaving {
  visibility: visible;
}

/* The title size is shared: the blade is measured in it, and the pager below
   is set out from the blade's foot with the same number, so the two stay on
   one line at every width and in both languages. */
.home-hero {
  --hero-title: var(--eme-step-5);
  --blade-foot: -0.92;
}
html[lang="ar"] .home-hero {
  --hero-title: clamp(1.5rem, 1.25rem + 1.2vw, 2.75rem);
  --blade-foot: -0.26;
}
.home-hero__title {
  position: relative;
  margin: 0;
  font-size: var(--hero-title);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--eme-white);
  text-wrap: balance;
}
html[lang="ar"] .home-hero__title {
  line-height: 1.3;
  letter-spacing: 0;
}
/* The blade: the red slash of the logo, standing behind the first letters
   from the small title down to the link. It is measured in the title's size
   and leans from its foot (transform-origin at the bottom), so its outer lower
   corner sits exactly --blade-foot title-sizes from the text: in English that
   is the left corner, in Arabic the right one, since the brand's lean does not
   mirror. On a narrow screen it never passes the edge of the screen. */
.home-hero__slide::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-start: max(
    calc(var(--blade-foot) * var(--hero-title)),
    calc(4px - var(--eme-gutter))
  );
  inset-block: calc(var(--hero-title) * -0.3) calc(var(--hero-title) * -0.1);
  inline-size: calc(var(--hero-title) * 1.2);
  background: var(--eme-red);
  transform: skewX(var(--eme-slant));
  transform-origin: 50% 100%;
}
html[lang="ar"] .home-hero__slide::before {
  inset-block: calc(var(--hero-title) * -0.15) calc(var(--hero-title) * -0.05);
}
.home-hero__line {
  display: block;
  overflow: hidden;
  padding-block: 0.06em 0.1em;
  margin-block: -0.06em -0.1em;
}
.home-hero__line > span {
  display: block;
}
/* The small title leads, above the big one. */
.home-hero__tag {
  margin: 0 0 0.45em;
  font-size: clamp(1rem, 0.91rem + 0.4vw, 1.375rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.8);
  max-inline-size: none;
}
html[lang="ar"] .home-hero__tag {
  letter-spacing: 0;
  line-height: 1.5;
}
.home-hero__link {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-block-start: 0.6rem;
  padding-block: 0.4rem;
  font-size: var(--eme-step-0);
  font-weight: 600;
  color: var(--eme-white);
  border-block-end: 1px solid rgba(255, 255, 255, 0.4);
  transition: border-color var(--eme-fast) var(--eme-ease);
}
.home-hero__link svg {
  transition: transform 320ms var(--eme-ease-out);
}
.home-hero__link:hover {
  border-color: var(--eme-red);
}
.home-hero__link:hover svg {
  transform: translateX(6px);
}
html[dir="rtl"] .home-hero__link svg {
  transform: scaleX(-1);
}
html[dir="rtl"] .home-hero__link:hover svg {
  transform: scaleX(-1) translateX(6px);
}

/* ---- how a slide arrives and leaves. Keyframes rather than transitions, so
   the first slide plays on load with no script, and each later slide replays
   the same entrance when it becomes active. */
.home-hero__slide.is-active::before {
  animation: hero-blade-in 900ms var(--eme-ease-out) both;
}
.home-hero__slide.is-active .home-hero__tag {
  animation: hero-fade-up 800ms var(--eme-ease-out) 120ms both;
}
.home-hero__slide.is-active .home-hero__line > span {
  animation: hero-rise 1000ms var(--eme-ease-out) both;
  animation-delay: calc(220ms + var(--i, 0) * 90ms);
}
.home-hero__slide.is-active .home-hero__link {
  animation: hero-fade-up 900ms var(--eme-ease-out) 480ms both;
}
.home-hero__slide.is-leaving::before {
  animation: hero-blade-out 420ms cubic-bezier(0.7, 0, 0.84, 0) both;
}
.home-hero__slide.is-leaving .home-hero__line > span {
  animation: hero-sink 420ms cubic-bezier(0.7, 0, 0.84, 0) both;
}
.home-hero__slide.is-leaving .home-hero__tag,
.home-hero__slide.is-leaving .home-hero__link {
  animation: hero-fade-out 300ms var(--eme-ease) both;
}
@keyframes hero-blade-in {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes hero-blade-out {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(0 0 100% 0);
  }
}
@keyframes hero-rise {
  from {
    transform: translate3d(0, 108%, 0);
  }
  to {
    transform: none;
  }
}
@keyframes hero-sink {
  from {
    transform: none;
  }
  to {
    transform: translate3d(0, -108%, 0);
  }
}
@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 0.9rem, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes hero-fade-out {
  to {
    opacity: 0;
  }
}

/* ---- pager: one slanted bar per slide; the current one fills red as the
   slide runs, which is also the timer the script waits on. */
/* The ticks start where the blade stands: same offset, same foot, same lean. */
.home-hero__pager {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-inline-start: max(
    calc(var(--blade-foot) * var(--hero-title)),
    calc(4px - var(--eme-gutter))
  );
}
.home-hero__ticks {
  display: flex;
  gap: 5px;
}
.home-hero__tick {
  position: relative;
  inline-size: 13px;
  block-size: 30px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.78);
  transform: skewX(var(--eme-slant));
  transform-origin: 50% 100%;
  cursor: pointer;
  transition: background-color var(--eme-fast) var(--eme-ease);
}
.home-hero__tick::before {
  content: "";
  position: absolute;
  inset: -8px -2.5px;
}
.home-hero__tick:hover {
  background: var(--eme-white);
}
.home-hero__tick[aria-current="true"] {
  background: rgba(255, 255, 255, 0.25);
}
.home-hero__tick-fill {
  position: absolute;
  inset: 0;
  background: var(--eme-red);
  transform: scaleY(0);
  transform-origin: bottom;
}
.home-hero__tick[aria-current="true"] .home-hero__tick-fill {
  transform: none;
}
.home-hero.is-playing
  .home-hero__tick[aria-current="true"]
  .home-hero__tick-fill {
  animation: hero-progress var(--hero-interval) linear both;
}
.home-hero.is-paused .home-hero__tick-fill {
  animation-play-state: paused !important;
}
@keyframes hero-progress {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
.home-hero__count {
  margin: 0;
  font-size: var(--eme-step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.6);
}
.home-hero__count span {
  color: var(--eme-white);
}
.home-hero__toggle {
  display: inline-grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: var(--eme-white);
  cursor: pointer;
  transition:
    border-color var(--eme-fast) var(--eme-ease),
    background-color var(--eme-fast) var(--eme-ease);
  display: none;
}
.home-hero__toggle[hidden] {
  display: none;
}
.home-hero__toggle:hover {
  border-color: var(--eme-white);
  background: rgba(255, 255, 255, 0.08);
}
.home-hero__icon-play,
.home-hero.is-stopped .home-hero__icon-pause {
  display: none;
}
.home-hero.is-stopped .home-hero__icon-play {
  display: block;
}

/* ---- social marks, above the end of the rail */
.home-hero__social {
  position: absolute;
  inset-inline-end: calc(var(--eme-gutter) - 6px);
  inset-block-end: calc(var(--rail-h) + clamp(1rem, 3cqh, 2rem));
  display: none;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-hero__social a {
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  color: rgba(255, 255, 255, 0.86);
  transition:
    color var(--eme-fast) var(--eme-ease),
    transform 320ms var(--eme-ease-out);
}
.home-hero__social svg {
  inline-size: clamp(22px, 1.1rem + 0.3vw, 28px);
  block-size: auto;
}
.home-hero__social a:hover {
  color: var(--eme-white);
  transform: translateY(-2px);
}

/* ---- the rail: every section, spread edge to edge along the foot of the
   hero, with the brand rule running under it. */
.home-hero__rail {
  grid-row: 2;
  position: relative;
  display: none;
  background: rgba(8, 9, 10, 0.58);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}
.home-hero__rail::after,
.welcome::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"] .home-hero__rail::after,
html[dir="rtl"] .welcome::after {
  background: linear-gradient(
    270deg,
    var(--eme-red-ink) 0%,
    var(--eme-red) 62%,
    var(--eme-ember) 100%
  );
}
.home-hero__rail-list {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1.25rem;
  margin-block: 0;
  list-style: none;
}
.home-hero__rail a {
  position: relative;
  display: inline-flex;
  align-items: center;
  block-size: var(--rail-h);
  font-size: clamp(0.8125rem, 0.765rem + 0.2vw, 0.9375rem);
  font-weight: 300;
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.86);
  white-space: nowrap;
  transition: color var(--eme-fast) var(--eme-ease);
}
html[lang="ar"] .home-hero__rail a {
  letter-spacing: 0;
  font-size: clamp(0.8125rem, 0.765rem + 0.2vw, 0.9375rem);
}
.home-hero__rail a::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: -1px;
  block-size: 2px;
  background: var(--eme-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 360ms var(--eme-ease-out);
}
html[dir="rtl"] .home-hero__rail a::before {
  transform-origin: right;
}
.home-hero__rail a:hover,
.home-hero__rail a:focus-visible {
  color: var(--eme-white);
}
.home-hero__rail a:hover::before,
.home-hero__rail a:focus-visible::before {
  transform: scaleX(1);
}

/* The rail and the social marks rise in once the headline has landed. */
.home-hero__rail,
.home-hero__social,
.home-hero__pager {
  animation: hero-fade-up 900ms var(--eme-ease-out) 700ms both;
}

@media (min-width: 56.25rem) {
  .home-hero__rail {
    display: block;
  }
}
@media (min-width: 64rem) {
  .home-hero__social {
    display: flex;
  }
}

/* ----------------------------------------------------------------- welcome
   Deep red, edge to edge. The heading faces the wordmark; one red rule runs
   through the founding dates from screen edge to screen edge. */
.welcome {
  position: relative;
  overflow: clip;
  background: var(--eme-red-deep);
  color: var(--eme-white);
  padding-block: clamp(3.5rem, 7vw, 7.5rem);
}
.welcome__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "rule" "brand" "body" "link";
  align-items: end;
}
.welcome__head {
  grid-area: head;
}
.welcome__kicker {
  margin: 0 0 0.15em;
  font-size: clamp(0.9375rem, 0.88rem + 0.2vw, 1.125rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.welcome__title {
  margin: 0;
  font-size: clamp(1.375rem, 1.2rem + 0.55vw, 1.875rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--eme-white);
}
html[lang="ar"] .welcome__kicker,
html[lang="ar"] .welcome__title {
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.45;
}
.welcome__rule {
  grid-area: rule;
  margin: clamp(0.75rem, 1.2vw, 1.25rem) 0 clamp(2.25rem, 4vw, 4rem);
  font-size: var(--eme-step-0);
  line-height: 1.3;
}
.welcome__rule > span {
  position: relative;
  display: inline-block;
}
.welcome__rule > span::before,
.welcome__rule > span::after {
  content: "";
  position: absolute;
  inset-block-start: 55%;
  inline-size: 100vw;
  block-size: 1px;
  background: var(--eme-red);
}
.welcome__rule > span::before {
  inset-inline-end: calc(100% + clamp(1rem, 2.5vw, 2.75rem));
  transform-origin: right;
}
.welcome__rule > span::after {
  inset-inline-start: calc(100% + clamp(1rem, 2.5vw, 2.75rem));
  transform-origin: left;
}
html[dir="rtl"] .welcome__rule > span::before {
  transform-origin: left;
}
html[dir="rtl"] .welcome__rule > span::after {
  transform-origin: right;
}
.welcome__bar {
  margin-inline: 0.45em;
  color: rgba(255, 255, 255, 0.55);
}

.welcome__brand {
  grid-area: brand;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(1rem, 2vw, 2rem) clamp(1.25rem, 2.2vw, 2.25rem);
  margin-block-end: 2rem;
}
.welcome__mark {
  display: grid;
  margin: 0;
  line-height: 0.92;
  text-transform: uppercase;
  display: none;
}
.welcome__mark-top {
  font-size: clamp(1.5rem, 1.33rem + 0.5vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.005em;
}
.welcome__mark-sub {
  font-size: clamp(0.9rem, 0.83rem + 0.3vw, 1.2rem);
  font-weight: 300;
  letter-spacing: 0.01em;
}
html[lang="ar"] .welcome__mark {
  line-height: 1.25;
}
.welcome__statement {
  flex: 1 1 18rem;
  /* max-inline-size: 38ch; */
  margin: 0;
  font-size: var(--eme-step-1);
  line-height: 1.38;
  color: rgba(255, 255, 255, 0.94);
}
.welcome__statement strong,
.welcome__body strong {
  font-weight: 700;
  color: var(--eme-white);
}

.welcome__body {
  grid-area: body;
  display: grid;
  gap: 1.25rem;
}
.welcome__body p {
  max-inline-size: 62ch;
  margin: 0;
  font-size: var(--eme-step-0);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}
.welcome__link {
  grid-area: link;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-block-start: clamp(2.25rem, 4vw, 3.5rem);
  padding-block: 0.4rem;
  font-size: var(--eme-step-0);
  font-weight: 600;
  color: var(--eme-white);
  border-block-end: 1px solid rgba(255, 255, 255, 0.45);
  transition: border-color var(--eme-fast) var(--eme-ease);
  display: none;
}
.welcome__link svg {
  transition: transform 320ms var(--eme-ease-out);
}
.welcome__link:hover {
  border-color: var(--eme-white);
}
.welcome__link:hover svg {
  transform: translateX(6px);
}
html[dir="rtl"] .welcome__link svg {
  transform: scaleX(-1);
}
html[dir="rtl"] .welcome__link:hover svg {
  transform: scaleX(-1) translateX(6px);
}

@media (min-width: 62rem) {
  .welcome__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "head brand"
      "rule rule"
      "body body"
      "link link";
    column-gap: clamp(2.5rem, 4.5vw, 6rem);
  }
  .welcome__brand {
    flex-wrap: nowrap;
    align-items: flex-end;
    margin-block-end: 0;
  }
  .welcome__mark {
    margin-block-end: 0.1em;
  }
  .welcome__body {
    grid-template-columns: subgrid;
    column-gap: inherit;
  }
  .welcome__body p {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
  html[lang="ar"] .welcome__body p {
    text-align: justify;
    text-justify: inter-word;
  }
}

/* The rule draws out from the dates, and the rest settles in, once the plate
   scrolls into view. Armed by the script only when the plate starts below the
   fold, so a reader who lands on it (or has no script) sees it complete. */
.welcome.is-armed .welcome__rule > span::before,
.welcome.is-armed .welcome__rule > span::after {
  transform: scaleX(0);
}
.welcome.is-armed .welcome__head,
.welcome.is-armed .welcome__rule > span,
.welcome.is-armed .welcome__brand,
.welcome.is-armed .welcome__body,
.welcome.is-armed .welcome__link {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
}
.welcome.is-armed.is-in .welcome__rule > span::before,
.welcome.is-armed.is-in .welcome__rule > span::after {
  transform: none;
  transition: transform 1600ms var(--eme-ease-out) 350ms;
}
.welcome.is-armed.is-in .welcome__head,
.welcome.is-armed.is-in .welcome__rule > span,
.welcome.is-armed.is-in .welcome__brand,
.welcome.is-armed.is-in .welcome__body,
.welcome.is-armed.is-in .welcome__link {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms var(--eme-ease) var(--d, 0ms),
    transform 1000ms var(--eme-ease-out) var(--d, 0ms);
}
.welcome.is-armed .welcome__rule > span {
  --d: 120ms;
}
.welcome.is-armed .welcome__brand {
  --d: 200ms;
}
.welcome.is-armed .welcome__body {
  --d: 320ms;
}
.welcome.is-armed .welcome__link {
  --d: 420ms;
}

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .home-hero *,
  .home-hero *::before,
  .home-hero *::after,
  .home-hero__rail,
  .home-hero__social,
  .home-hero__pager {
    animation: none !important;
  }
  .home-hero__route {
    stroke-dashoffset: 0;
  }
  .home-hero__frame.is-active,
  .home-hero__slides {
    transform: none;
  }
  .home-hero__slide.is-leaving {
    visibility: hidden;
  }
  .welcome.is-armed *,
  .welcome.is-armed *::before,
  .welcome.is-armed *::after {
    transition: none !important;
  }
}

/* Phone: the blade and the slide ticks hang in the margin beside the words,
   and on a narrow screen that margin is only the gutter, so they used to run
   to the screen's edge. Here the words step in by the blade's reach instead,
   and the blade and ticks stand on the gutter line, under the logo. In Arabic
   the blade's outer corner is its top (the lean does not mirror), so there it
   and the ticks lean from the top: that corner stays on the line and the foot
   leans in under the words. */
@media (max-width: 47.99rem) {
  .home-hero__body {
    padding-inline-start: calc(
      var(--eme-gutter) - var(--blade-foot) * var(--hero-title)
    );
  }
  .home-hero__slide::before {
    inset-inline-start: calc(var(--blade-foot) * var(--hero-title));
  }
  .home-hero__pager {
    margin-inline-start: calc(var(--blade-foot) * var(--hero-title));
  }
  html[dir="rtl"] .home-hero__slide::before,
  html[dir="rtl"] .home-hero__tick {
    transform-origin: 50% 0;
  }
}

/* A phone held sideways (or any window under ~512px tall): the 36rem floor put
   the headline below the fold, leaving only the photograph and the small
   title. The stage drops to the screen's height and the words close up under
   a slimmer bar, so the statement, its link and the pager are all in the
   first view. */
@media (orientation: landscape) and (max-height: 32rem) {
  .home-hero {
    min-block-size: 20rem;
  }
  .site-header--over {
    padding-block-start: 0.5rem;
  }
  .home-hero__body {
    gap: 1rem;
    padding-block-start: calc(clamp(68px, 3.5rem + 1vw, 88px) + 1.5rem);
  }
  .home-hero__tag {
    margin-block-end: 0.3em;
  }
}
/* The smallest of them (320–360px tall): a slimmer bar and a slightly smaller
   statement, or the small title slides under the logo. */
@media (orientation: landscape) and (max-height: 22.5rem) {
  .site-header--over {
    padding-block-start: 0.25rem;
  }
  .site-header--over .site-header__inner {
    block-size: 56px;
  }
  .home-hero {
    --hero-title: 1.625rem;
  }
  /* Arabic sets taller lines (1.3 against 0.98), so it steps down further. */
  html[lang="ar"] .home-hero {
    --hero-title: 1.375rem;
  }
  .home-hero__body {
    gap: 0.75rem;
  }
}

/* Touch: the pause button and the slide's link get a finger-sized target. */
@media (pointer: coarse) {
  .home-hero__toggle {
    inline-size: 44px;
    block-size: 44px;
  }
  .home-hero__link {
    min-block-size: 44px;
  }
}
/* The WhatsApp button would sit on the rail; it arrives once the hero is
   behind (the header carries the quote request until then). */
.route-home .wa-float {
  transition:
    opacity var(--eme-med) var(--eme-ease),
    transform var(--eme-med) var(--eme-ease-out),
    visibility 0s;
}
.route-home:not(.is-past-hero) .wa-float {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity var(--eme-fast) var(--eme-ease),
    transform var(--eme-fast) var(--eme-ease),
    visibility 0s linear var(--eme-fast);
}

/* The section heads (.home-head) live in site.css: Quality & Trust uses them too. */

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

/* ---- arrival, for any section marked data-arm: armed by the script only
   when the section starts below the fold, then each [data-reveal] part
   settles as it scrolls in, the blade rising last. */
[data-arm].is-armed [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
}
[data-arm].is-armed [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms var(--eme-ease) calc(var(--d, 0) * 140ms),
    transform 1000ms var(--eme-ease-out) calc(var(--d, 0) * 140ms);
}
[data-arm].is-armed .home-head__blade {
  transform: skewX(var(--eme-slant)) scaleY(0);
}
[data-arm].is-armed .is-in .home-head__blade {
  transform: skewX(var(--eme-slant));
  transition: transform 900ms var(--eme-ease-out) 200ms;
}

/* ------------------------------------------------------ solutions by sector
   Under the head, one line that reads the band before it opens: how many
   sectors, how to open them (a small glyph of the band itself, its bars
   widening in turn), and the way to all of them.

   Set dark, on the stage Our Clients and Why Choose Us stand on, so the
   photographs, the logos and the pillars read as one dark run; a low red
   light rises behind the head, and the band's peeks on a phone fall on the
   same black. */
.sector-section {
  --sector-bg: #07080a;
  --sector-line: rgba(255, 255, 255, 0.12);
  --band-tick: rgba(255, 255, 255, 0.22);
  padding-block-end: 0;
  color: var(--eme-white);
  background:
    radial-gradient(
      45% 55% at 12% 0%,
      rgba(218, 33, 39, 0.12),
      transparent 70%
    ),
    var(--sector-bg);
}
html[dir="rtl"] .sector-section {
  background:
    radial-gradient(
      45% 55% at 88% 0%,
      rgba(218, 33, 39, 0.12),
      transparent 70%
    ),
    var(--sector-bg);
}
.sector-section .line-link {
  --link: rgba(255, 255, 255, 0.82);
  --link-hover: var(--eme-white);
}
.sector-section .sector-band {
  padding-block-end: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 62rem) {
  .sector-section .sector-band {
    padding-block-end: 0;
  }
}
.sector-meta {
  --d: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-block-start: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
  padding-block: 1rem;
  border-block-start: 1px solid var(--sector-line, var(--eme-line));
}
.sector-meta__count {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0;
  font-size: var(--eme-step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eme-text-muted);
  display: none;
}
.sector-meta__count strong {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--eme-red);
  font-variant-numeric: tabular-nums;
}
html[lang="ar"] .sector-meta__count {
  letter-spacing: 0;
}
.sector-meta__hint {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: var(--eme-step--1);
  color: rgba(255, 255, 255, 0.6);
}
.sector-meta__glyph {
  display: flex;
  gap: 3px;
  inline-size: 3rem;
  block-size: 1rem;
}
.sector-meta__glyph i {
  --glyph-idle: rgba(255, 255, 255, 0.24);
  flex: 1 1 0;
  background: var(--glyph-idle);
  transform: skewX(var(--eme-slant));
  animation: sector-glyph 8s var(--eme-ease) infinite;
}
.sector-meta__glyph i:nth-child(2) {
  animation-delay: 2s;
}
.sector-meta__glyph i:nth-child(3) {
  animation-delay: 4s;
}
.sector-meta__glyph i:nth-child(4) {
  animation-delay: 6s;
}
@keyframes sector-glyph {
  0%,
  30%,
  100% {
    flex-grow: 1;
    background: var(--glyph-idle);
  }
  8%,
  22% {
    flex-grow: 4;
    background: var(--eme-red);
  }
}
.sector-meta__touch {
  display: none;
}
/* The hint names the gesture the band answers to, which is set by its layout
   as well as the pointer: below 62rem the band is a row to swipe even under a
   mouse, and "point at a sector" would promise an accordion that is not there. */
@media (hover: none), (pointer: coarse), (max-width: 61.99rem) {
  .sector-meta__point {
    display: none;
  }
  .sector-meta__touch {
    display: inline;
  }
}
/* A phone: the count on its own line, the hint and the link sharing the next. */
@media (max-width: 47.99rem) {
  .sector-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.9rem 1rem;
  }
  .sector-meta__count {
    grid-column: 1 / -1;
  }
  .sector-meta .line-link {
    justify-self: end;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sector-meta__glyph i {
    animation: none;
  }
  .sector-meta__glyph i:first-child {
    flex-grow: 4;
    background: var(--eme-red);
  }
}

/* ------------------------------------------------------------------ clients
   "Our Clients": the logo wall, white logos on black, set straight onto a
   dark stage beside the six groups it is arranged in. The picture's black
   drops out into the section, so the logos stand on the background itself,
   not on a plate, and the stage runs on into Why Choose Us below it.

   The index hangs its numbers in a lane as wide as the head's blade and gap,
   so every label starts on the line the title starts on.

   Phone: head, the wall edge to edge, the index. Tablet: the head across,
   the index and the wall side by side. Desktop: the words in the start
   column, held in view while the tall wall scrolls past them. */
.clients {
  /* the Why Choose Us stage, so the two read as one dark run */
  --clients-bg: #07080a;
  --clients-line: rgba(255, 255, 255, 0.12);
  --clients-glow-x: 50%;
  --clients-gap: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
  --lane: calc(
    clamp(0.5rem, 0.35rem + 0.4vw, 0.8rem) +
      clamp(1rem, 0.6rem + 1.2vw, 1.75rem)
  );
  isolation: isolate;
  color: var(--eme-white);
  /* a low light behind the wall, so the logos sit in a lit space */
  background:
    radial-gradient(
      40% 45% at var(--clients-glow-x) 55%,
      rgba(255, 255, 255, 0.05),
      transparent 72%
    ),
    var(--clients-bg);
}
@media (min-width: 48rem) {
  .clients {
    --clients-glow-x: 74%;
  }
  html[dir="rtl"] .clients {
    --clients-glow-x: 26%;
  }
}
.clients .line-link {
  --link: rgba(255, 255, 255, 0.82);
  --link-hover: var(--eme-white);
}
.clients__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "lede" "board" "list";
  gap: var(--clients-gap);
}
.clients__text {
  display: contents;
}
.clients__lede {
  grid-area: lede;
}
.clients__list {
  grid-area: list;
}
.clients__board {
  grid-area: board;
  margin: 0;
}

/* ---- the head: the intro under the title, on its line */
.clients__intro {
  grid-column: 2;
  grid-row: 2;
  margin: clamp(1rem, 0.8rem + 0.6vw, 1.4rem) 0 0;
  max-inline-size: 46ch;
  font-size: var(--eme-step-0);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.64);
}

/* ---- the index: hairlines between the groups, never a box round them */
.clients__index {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-end: 1px solid var(--clients-line);
}
.clients__group {
  display: grid;
  grid-template-columns: var(--lane) minmax(0, 1fr);
  align-items: baseline;
  align-content: start;
  padding-block: clamp(0.75rem, 0.6rem + 0.3vw, 0.95rem);
  border-block-start: 1px solid var(--clients-line);
}
.clients__num {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--eme-step--1);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--eme-red);
  font-variant-numeric: tabular-nums;
}
.clients__label {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: var(--eme-step-0);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--eme-white);
}
.clients__names {
  grid-column: 2;
  margin: 0.3rem 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}
html[lang="ar"] .clients__label {
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.6;
}
.clients__more {
  margin-block-start: clamp(1.25rem, 0.9rem + 0.8vw, 1.75rem);
  margin-inline-start: var(--lane);
}

/* ---- the wall. "Lighten" keeps whichever is lighter, the picture or the
   stage behind it: the white logos stay white, and the picture's black gives
   way to the section's own ground and light, so there is no edge to see. */
.clients__img {
  inline-size: 100%;
  mix-blend-mode: lighten;
}
.clients__caption {
  margin-block-start: 0.85rem;
  font-size: var(--eme-step--1);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

/* Blending only reaches the stage while nothing between the picture and the
   section becomes a layer of its own, which a fading or moving board would
   (the black would show as a box until it settled). So the board holds
   still, and the picture and its caption arrive on their own. */
[data-arm].is-armed .clients__board[data-reveal] {
  opacity: 1;
  transform: none;
}
[data-arm].is-armed .clients__board .clients__img,
[data-arm].is-armed .clients__board .clients__caption {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
}
[data-arm].is-armed .clients__board.is-in .clients__img,
[data-arm].is-armed .clients__board.is-in .clients__caption {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms var(--eme-ease),
    transform 1000ms var(--eme-ease-out);
}

/* A phone held sideways: across the full width the wall would run three
   screens tall, so it keeps a portrait phone's width, centred. */
@media (max-width: 47.99rem) and (orientation: landscape) {
  .clients__board {
    inline-size: min(100%, 26rem);
    margin-inline: auto;
  }
}
@media (min-width: 48rem) {
  .clients__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "lede lede" "list board";
    column-gap: clamp(2rem, 4vw, 3rem);
    align-items: start;
  }
}
@media (min-width: 62rem) {
  .clients__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    grid-template-areas: "text board";
    column-gap: clamp(3rem, 6vw, 8rem);
  }
  .clients__text {
    grid-area: text;
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 1.25rem + 1.2vw, 2.75rem);
  }
  .clients__board {
    justify-self: end;
    inline-size: 100%;
    max-inline-size: 46rem;
  }
}
/* Held in view only where the words fit on the screen under the header:
   about 52rem tall on a small desktop, 49rem from 80rem wide, where the
   names run on one line. On a shorter screen they simply lead the plate. */
@media (min-width: 62rem) and (min-height: 60rem),
  (min-width: 80rem) and (min-height: 56.25rem) {
  .clients__text {
    position: sticky;
    inset-block-start: calc(var(--eme-header-h) + 1.5rem);
  }
}

/* No image yet: the index alone, across the width. */
.clients--text .clients__inner {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "lede" "list";
}
@media (min-width: 48rem) {
  .clients--text .clients__index {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 4rem);
  }
}
@media (min-width: 62rem) {
  .clients--text .clients__inner {
    grid-template-areas: "text";
  }
  .clients--text .clients__text {
    position: static;
  }
  .clients--text .clients__index {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ------------------------------------------- standards we are held to
   The marks as they stand along the foot of a unit's rating plate, on the
   dark run that Our Clients and Why Choose Us begin, so the page closes on
   one stage before the red call. A shade lighter than that stage, under the
   brand rule that closes Why Choose Us, so it reads as the next plate.

   The marks are grouped as Quality & Trust's register groups them. Each
   group stands under a dimension line, the drawing office's mark for "this
   span", with its number and name; the line draws itself as the group
   arrives. Side by side where every mark fits on one line: each group as
   wide as its marks, so all marks share one width, and the heads share a
   row, so the marks line up however a name wraps. One group under another
   where they do not fit. */
.cert-band {
  --eme-text: #f3f5f6;
  --eme-text-muted: #a3a9ae;
  --eme-line: rgba(255, 255, 255, 0.1);
  --eme-line-strong: rgba(255, 255, 255, 0.24);
  --plate-rule: rgba(255, 255, 255, 0.2);
  --plate-tick: rgba(255, 255, 255, 0.42);
  background: var(--eme-night);
  color: var(--eme-text);
}
.cert-plate {
  container: plate / inline-size;
  margin-block-start: clamp(2.75rem, 2rem + 2.5vw, 4.75rem);
}
.cert-plate__groups {
  display: grid;
  row-gap: clamp(2.75rem, 2.25rem + 1.5vw, 3.75rem);
}
.cert-plate__head {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
  padding-block-end: 1.1rem;
  font-size: var(--eme-step--1);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
html[lang="ar"] .cert-plate__head {
  font-size: var(--eme-step-0);
  letter-spacing: 0;
  text-transform: none;
}
.cert-plate__num {
  font-family: var(--eme-font-latin);
  font-variant-numeric: tabular-nums;
  color: var(--eme-red);
}
/* The dimension line: a hairline between two ticks along the head's foot. */
.cert-plate__head::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -4px;
  block-size: 9px;
  border-inline: 1px solid var(--plate-tick);
  background: linear-gradient(var(--plate-rule), var(--plate-rule)) 50% 50% /
    100% 1px no-repeat;
  transform-origin: 0 50%;
}
html[dir="rtl"] .cert-plate__head::after {
  transform-origin: 100% 50%;
}
[data-arm].is-armed .cert-plate__head::after {
  transform: scaleX(0);
}
[data-arm].is-armed .is-in .cert-plate__head::after {
  transform: none;
  transition: transform 1100ms var(--eme-ease-out)
    calc(var(--d, 0) * 140ms + 250ms);
}
/* Between a phone and the one-line plate, a group under its head would leave
   three marks adrift on a wide line: the head stands beside them instead, as
   a datasheet's label column, and the dimension line runs over the whole
   group. */
@container plate (min-width: 36rem) and (max-width: 73.99rem) {
  .cert-plate__groups {
    row-gap: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  }
  .cert-plate__group {
    position: relative;
    display: grid;
    grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
    column-gap: clamp(1.25rem, 3cqi, 3rem);
    align-items: start;
    padding-block-start: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  }
  .cert-plate__head {
    position: static;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
  }
  .cert-plate__head::after {
    inset-block: -4px auto;
  }
}
@container plate (min-width: 74rem) {
  .cert-plate__groups {
    grid-template-columns: var(--cols, repeat(3, minmax(0, 1fr)));
    grid-template-rows: auto auto;
    column-gap: clamp(1.25rem, 2vw, 2.5rem);
    row-gap: 0;
  }
  .cert-plate__group {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
  .cert-plate__head {
    align-self: end;
  }
  .cert-plate .cert-row__link {
    padding-inline: 0.25rem;
  }
}

/* The marks on the dark: the seal turns to an outline, and an uploaded icon
   (multiplied into a light page elsewhere) is drawn as a white mark instead:
   greyed, turned negative and screened, so its ink reads white and a white
   canvas drops away. */
.cert-band .cert-seal {
  background: rgba(255, 255, 255, 0.025);
  color: var(--eme-white);
}
.cert-band a.cert-row__link:hover .cert-seal {
  border-color: rgba(255, 255, 255, 0.72);
}
.cert-band .cert-mark__img {
  mix-blend-mode: screen;
  filter: grayscale(1) invert(1) brightness(1.3);
  opacity: 0.88;
  transition: opacity var(--eme-fast) var(--eme-ease);
}
.cert-band a.cert-row__link:hover .cert-mark__img {
  opacity: 1;
}
/* ------------------------------------------------------------------ pillars
   "Why choose us", set like the Infinity product features: a wide black-and-
   white photograph, the headline rising over its lower edge, then the four
   pillars two by two, each with a line icon, its number and a way in.

   The stage behind the grid carries a faint vertical grain, the light streaks
   of the company profile's page 10. */
.pillars {
  --pillars-bg: #07080a;
  --pillars-line: rgba(255, 255, 255, 0.12);
  --overlap: clamp(3.25rem, 2rem + 4.5vw, 7.5rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--pillars-bg);
  color: var(--eme-white);
  padding-block-end: clamp(4rem, 8vw, 8rem);
}
.pillars::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 0 1px,
      transparent 1px 11px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.022) 0 2px,
      transparent 2px 43px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03) 0 1px,
      transparent 1px 97px
    ),
    radial-gradient(
      60% 45% at 50% 70%,
      rgba(255, 255, 255, 0.035),
      transparent 70%
    );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 22%,
    #000 55%,
    #000 80%,
    transparent
  );
  mask-image: linear-gradient(
    180deg,
    transparent 22%,
    #000 55%,
    #000 80%,
    transparent
  ); */
}
/* The brand rule closes the section, as it closes In Numbers. */
.pillars::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"] .pillars::after {
  background: linear-gradient(
    270deg,
    var(--eme-red-ink) 0%,
    var(--eme-red) 62%,
    var(--eme-ember) 100%
  );
}

/* ---- the photograph */
.pillars__photo {
  position: relative;
  z-index: -1;
  block-size: clamp(15rem, 44vh + 4vw, 32rem);
}
.pillars__photo picture {
  display: contents;
}
.pillars__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: 50% 38%;
  filter: grayscale(1) brightness(1.1) contrast(1.15);
}
/* Dark at the top, so the photograph opens out of the stage it shares with
   the Clients section above, and solid at the foot, where the headline
   stands on it. */
.pillars__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--pillars-bg) 0%,
    rgba(7, 8, 10, 0.25) 14%,
    rgba(7, 8, 10, 0) 40%,
    rgba(7, 8, 10, 0.7) 80%,
    var(--pillars-bg) 100%
  );
}
.pillars__photo--plain {
  background:
    radial-gradient(
      50% 70% at 85% 35%,
      rgba(218, 33, 39, 0.16),
      transparent 70%
    ),
    radial-gradient(
      45% 60% at 12% 60%,
      rgba(255, 255, 255, 0.05),
      transparent 70%
    );
}
.pillars__photo--plain::after {
  display: none;
}

/* ---- the head (a .home-head, dark) rises over the photograph's foot */
.pillars__inner {
  position: relative;
  margin-block-start: calc(var(--overlap) * -1);
}

/* ---- the four pillars themselves live in assets/css/pillars.css, shared with
   About (loaded by views/partials/pillars.php). On Home the icons are drawn in
   white alone: the accent strokes take the icon's own ink, not red. */
.pillars .pillar__icon .acc {
  stroke: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .line-link svg {
    transition: none;
  }
}