/* Expert Middle East — Signature Projects.
   A cover and the sector bar, as About opens, then one chapter per category, after the company profile's Signature Projects pages: the
   number and title, the reference list of every project in it, and its
   photo plates (case studies, which open, and captioned photographs). */

/* ----------------------------------------------------------- the opening */
/* The page opens as About does: its cover (site.css, .hero on a .page--cover,
   the header floating over it) and under it About's chapter bar (site.css,
   .chapters), here naming the sectors with how many projects each holds. */
/* The count hangs at the top of its name, like an index, so it reads as the
   name's and never as the next one's. */
.proj-bar__count {
  position: relative;
  inset-block-start: -0.5em;
  margin-inline-start: 0.3rem;
  font-family: var(--eme-font-latin);
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: #ff6166;
  transition: color var(--eme-fast) var(--eme-ease);
}
.chapters__link[aria-current="true"] .proj-bar__count {
  color: var(--eme-text-muted);
}
.proj-bar__link--empty {
  opacity: 0.6;
}
/* Six names with their counts: closer set than About's five, so they fit one
   line from a laptop up; narrower, the bar scrolls sideways (site.css). */
.proj-bar .chapters__list {
  gap: 1.6rem;
}
@media (min-width: 62rem) {
  .proj-bar .chapters__list {
    gap: clamp(0.875rem, -0.25rem + 1.5vw, 2.25rem);
  }
  .proj-bar .chapters__link {
    letter-spacing: 0.03em;
  }
  html[lang="ar"] .proj-bar .chapters__link {
    letter-spacing: 0;
  }
}
/* Whenever the names run past the edge (the script says so), the edge fades,
   as it does on a phone. */
.proj-bar .chapters__list.is-scrollable {
  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}
html[dir="rtl"] .proj-bar .chapters__list.is-scrollable {
  mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
}

/* ---------------------------------------------------------------- the book */
/* The chapters stay on the dark ground the head opens on, as the profile's
   Signature Projects spreads do: one category to a chapter, its reference
   list beside its photographs, the side swapping from one chapter to the
   next. */
.proj-book {
  --proj-ground: var(--eme-night);
  --proj-ground-alt: #141719;
  --proj-rule: rgba(255, 255, 255, 0.11);
  --proj-muted: #a8aeb4;
  --proj-soft: #c9ced3;
  /* The brand red is a mark on this ground; set as small text it needs this
     lighter tint to stay readable (6:1 on --proj-ground). */
  --proj-red-text: #ff6166;
  background: var(--proj-ground);
  color: var(--eme-white);
}

.proj-ch {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 7rem);
  border-block-start: 1px solid var(--proj-rule);
}
.proj-ch:nth-of-type(even) {
  background: var(--proj-ground-alt);
}
.proj-ch[hidden] {
  display: none;
}
/* The bar's hairline already closes the cover; the first chapter needs no second. */
.proj-ch:first-of-type,
.proj-ch[hidden] + .proj-ch {
  border-block-start: 0;
}
.proj-ch__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3rem);
}

.proj-ch__text {
  display: grid;
  gap: clamp(2rem, 3.5vw, 2.75rem);
}

/* ---- the heading: the chapter's number, as the profile numbers them */
.proj-ch__head {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  justify-items: start;
}
.proj-ch__num {
  font-family: var(--eme-font-latin);
  font-size: clamp(3.75rem, 2.6rem + 4.2vw, 7rem);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.42);
  margin-bottom: -70px;
  opacity: 0.2;
}
.proj-ch__heading {
  display: grid;
  gap: 0.6rem;
}
.proj-ch__title {
  margin: 0;
  max-inline-size: 20ch;
  font-size: clamp(1.75rem, 1.15rem + 2vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--eme-white);
  text-wrap: balance;
}
html[lang="ar"] .proj-ch__title {
  max-inline-size: 22ch;
  line-height: 1.45;
  letter-spacing: 0;
}
.proj-ch__count {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font-size: var(--eme-step--1);
  font-weight: 600;
  color: var(--proj-muted);
}
.proj-ch__count::before {
  content: "";
  inline-size: 18px;
  block-size: 2px;
  background: var(--eme-red);
}
.proj-ch__intro {
  max-inline-size: 52ch;
  margin: 0;
  font-size: var(--eme-step-1);
  line-height: 1.65;
  color: var(--proj-soft);
  text-wrap: pretty;
}

/* ---- the reference list: every project in the category, one to a line */
.ref-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--proj-rule);
}
.ref {
  position: relative;
  padding-inline-start: 1.35rem;
  border-block-end: 1px solid var(--proj-rule);
}
/* The profile's red bullet, leaning at the brand's angle. */
.ref::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.1rem;
  inset-block-start: calc(0.85rem + 0.6em);
  inline-size: 6px;
  block-size: 6px;
  background: var(--eme-red);
  transform: skewX(var(--eme-slant));
}
.ref__text {
  display: block;
  padding-block: 0.85rem;
  font-size: var(--eme-step-0);
  line-height: 1.5;
}
.ref__name {
  font-weight: 600;
  color: var(--eme-white);
}
.ref__note {
  color: var(--proj-muted);
}
/* "Name | note", the bar drawn as a hairline rather than typed. */
.ref__note::before {
  content: "";
  display: inline-block;
  inline-size: 1px;
  block-size: 0.95em;
  margin-inline: 0.65rem;
  vertical-align: -0.12em;
  background: rgba(255, 255, 255, 0.32);
}

/* A case study is a link to its page, and says so at the end of its line. */
.ref__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: inherit;
  text-decoration: none;
}
.ref__tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--eme-step--1);
  font-weight: 600;
  color: var(--proj-red-text);
}
.ref__tag svg {
  transition: transform 320ms var(--eme-ease-out);
}
html[dir="rtl"] .ref__tag svg {
  transform: scaleX(-1);
}
.ref--topic .ref__name {
  transition: color var(--eme-fast) var(--eme-ease);
}
.ref__link:hover .ref__name {
  color: var(--proj-red-text);
}
.ref__link:hover .ref__tag svg {
  transform: translateX(5px);
}
html[dir="rtl"] .ref__link:hover .ref__tag svg {
  transform: scaleX(-1) translateX(5px);
}
.ref__link:focus-visible {
  outline: 2px solid var(--eme-red);
  outline-offset: 4px;
}
/* Arriving from a link to one project, its line lights up for a moment. */
.ref:target {
  animation: ref-found 2600ms var(--eme-ease) both;
}
@keyframes ref-found {
  0%,
  35% {
    background-color: rgba(218, 33, 39, 0.24);
  }
  100% {
    background-color: rgba(218, 33, 39, 0);
  }
}

.proj-ch__foot {
  max-inline-size: 52ch;
  margin: 1.1rem 0 0;
  font-size: var(--eme-step--1);
  line-height: 1.6;
  color: var(--proj-muted);
}
.proj-ch__none {
  margin: 0 0 1rem;
  color: var(--proj-soft);
}
.proj-ch .line-link {
  --link: var(--eme-white);
  --link-hover: var(--proj-red-text);
}

/* ---- the sector brief: what the sector's page used to say, in small print:
   one line on the sector, under its list. */
.proj-brief {
  max-inline-size: 60ch;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--proj-rule);
  font-size: var(--eme-step--1);
  line-height: 1.65;
  color: var(--proj-muted);
  text-wrap: pretty;
}

/* ---- the sector's statement (Healthcare & Pharma) */
.proj-statement {
  margin-block-end: clamp(0.75rem, 1.5vw, 1.25rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid rgba(218, 33, 39, 0.4);
  background:
    radial-gradient(
      120% 140% at 0% 0%,
      rgba(218, 33, 39, 0.2),
      transparent 60%
    ),
    rgba(255, 255, 255, 0.02);
}
html[dir="rtl"] .proj-statement {
  background:
    radial-gradient(
      120% 140% at 100% 0%,
      rgba(218, 33, 39, 0.2),
      transparent 60%
    ),
    rgba(255, 255, 255, 0.02);
}
.proj-statement__title {
  max-inline-size: 30ch;
  margin: 0 0 0.85rem;
  font-size: var(--eme-step-3);
  font-weight: 700;
  line-height: 1.25;
  color: var(--eme-white);
  text-wrap: balance;
}
html[lang="ar"] .proj-statement__title {
  line-height: 1.6;
}
.proj-statement__body {
  max-inline-size: 68ch;
  margin: 0;
  line-height: 1.75;
  color: var(--proj-soft);
  text-wrap: pretty;
}
.proj-statement__body strong {
  font-weight: 600;
  color: var(--eme-white);
}

/* ---- the photo plates: a photograph, its title and one line under it */
.plates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
}
.plate {
  position: relative;
  isolation: isolate;
  display: block;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--eme-obsidian);
  color: var(--eme-white);
  text-decoration: none;
}
.plate--wide,
.plate--pano,
.plate--lone {
  grid-column: 1 / -1;
}
.plate--pano {
  aspect-ratio: 12 / 5;
}
.plate--lone {
  aspect-ratio: 4 / 3;
}
.plate--tall {
  aspect-ratio: 1;
}
.plate__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.plate__media picture {
  display: contents;
}
.plate__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transition: transform 1300ms var(--eme-ease-out);
}
/* A dark floor under the caption, and a breath of shade at the top for the badge. */
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      0deg,
      rgba(8, 9, 10, 0.88) 0%,
      rgba(8, 9, 10, 0.45) 34%,
      rgba(8, 9, 10, 0) 62%
    ),
    linear-gradient(180deg, rgba(8, 9, 10, 0.35) 0%, rgba(8, 9, 10, 0) 26%);
}
.plate__cap {
  --pad: clamp(1rem, 2vw, 1.5rem);
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: grid;
  justify-items: start;
  gap: 0.3rem;
  padding: var(--pad);
  padding-inline-start: calc(var(--pad) + 0.95rem);
}
/* The profile's red caption mark, leaning at the brand's angle. */
.plate__cap::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--pad);
  inset-block-start: calc(var(--pad) + 0.15em);
  inline-size: 4px;
  block-size: 1.15em;
  background: var(--eme-red);
  transform: skewX(var(--eme-slant));
  font-size: var(--eme-step-2);
}
.plate__title {
  font-size: var(--eme-step-2);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}
.plate__sub {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  max-inline-size: 48ch;
  font-size: var(--eme-step--1);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}
.plate--wide .plate__title,
.plate--lone .plate__title {
  font-size: var(--eme-step-3);
}
.plate--wide .plate__cap::before,
.plate--lone .plate__cap::before {
  font-size: var(--eme-step-3);
}
.plate--wide .plate__sub,
.plate--lone .plate__sub {
  font-size: var(--eme-step-0);
}
html[lang="ar"] .plate__title {
  line-height: 1.5;
}

/* A case study is the plate that opens: badged, and it moves under the pointer. */
.plate__badge {
  position: absolute;
  z-index: 1;
  inset-block-start: clamp(0.85rem, 1.6vw, 1.25rem);
  inset-inline-start: clamp(0.85rem, 1.6vw, 1.25rem);
  padding: 0.3rem 0.85rem;
  font-size: var(--eme-step--1);
  font-weight: 600;
  line-height: 1.3;
  color: var(--eme-white);
}
.plate__badge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--eme-red);
  transform: skewX(var(--eme-slant));
}
.plate__go {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-block-start: 0.55rem;
  padding-block: 0.2rem;
  font-size: var(--eme-step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-block-end: 1px solid rgba(255, 255, 255, 0.4);
  transition: border-color var(--eme-fast) var(--eme-ease);
}
html[lang="ar"] .plate__go {
  letter-spacing: 0;
  text-transform: none;
}
.plate__go svg {
  transition: transform 320ms var(--eme-ease-out);
}
html[dir="rtl"] .plate__go svg {
  transform: scaleX(-1);
}
.plate--topic:hover .plate__img,
.plate--topic:focus-visible .plate__img {
  transform: scale(1.05);
}
.plate--topic:hover .plate__go {
  border-color: var(--eme-red);
}
.plate--topic:hover .plate__go svg {
  transform: translateX(5px);
}
html[dir="rtl"] .plate--topic:hover .plate__go svg {
  transform: scaleX(-1) translateX(5px);
}
.plate--topic:focus-visible {
  outline: 2px solid var(--eme-red);
  outline-offset: 3px;
}

/* ---- a phone: upright plates take the full width, square */
@media (max-width: 35.99rem) {
  .plate--tall {
    grid-column: 1 / -1;
  }
  .plate--wide,
  .plate--lone {
    aspect-ratio: 4 / 3;
  }
  .plate--pano {
    aspect-ratio: 2 / 1;
  }
  .plate__sub {
    -webkit-line-clamp: 2;
  }
  .ref__link {
    align-items: flex-start;
  }
  .ref__tag {
    padding-block-start: 0.95rem;
  }
  .ref__tag span {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .ref--topic .ref__link {
    padding-inline-end: 0.25rem;
  }
}

/* ---- a desktop: the list beside the photographs, sides swapping */
@media (min-width: 62rem) {
  .proj-ch--split .proj-ch__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "text media";
    column-gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
  }
  .proj-ch--split.proj-ch--flip .proj-ch__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "media text";
  }
  .proj-ch__text {
    grid-area: text;
  }
  .proj-ch__media {
    grid-area: media;
  }
  /* The shorter column stays in view while the longer one passes (the script
     sets it only where the column fits the screen). */
  .proj-ch__text.is-sticky,
  .proj-ch__media.is-sticky {
    position: sticky;
    inset-block-start: calc(var(--eme-header-h) + 2rem);
  }
  /* A category without photographs: its heading beside a two-column list. */
  .proj-ch--text .proj-ch__text {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
  }
  .proj-ch--text .ref-list {
    columns: 2;
    column-gap: clamp(2rem, 3vw, 3rem);
  }
  .proj-ch--text .ref {
    break-inside: avoid;
  }
}

/* ---- filtering in place: the chapter that opens settles in */
.proj-ch.is-entering .proj-ch__grid {
  animation: ch-in 640ms var(--eme-ease-out) both;
}
@keyframes ch-in {
  from {
    opacity: 0;
    transform: translate3d(0, 1.25rem, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .plate__img,
  .plate__go svg,
  .ref__tag svg,
  .proj-ch.is-entering .proj-ch__grid,
  .ref:target {
    animation: none;
  }
  .ref:target {
    background-color: rgba(218, 33, 39, 0.16);
  }
}