/* Quality & Trust — the page a tender or audit file is built from.

   Four worlds, one after another, each with the job it does:
     the cover       obsidian, lit red from the far corner, and the way to
                     each part with how much it holds
     the register    white paper: the case beside an index of every mark,
                     then each standard explained, grouped under a heavy rule
                     (the look of a compliance schedule in a submittal)
     the checks      chalk, on a rail with the brand slash at each step, in the
                     order a unit meets them (the Services band's language)
     the clients     the dark stage of the home page's Our Clients, where the
                     logo wall's black drops into the page

   The marks and the explained entries are site-wide components (site.css:
   .cert-mark, .cert-row, .cert-entry); only their arrangement lives here. */

/* ------------------------------------------------------------ the cover */
.q-hero {
  background:
    radial-gradient(
      45% 90% at 88% 0%,
      rgba(218, 33, 39, 0.16),
      transparent 72%
    ),
    var(--eme-obsidian);
}
html[dir="rtl"] .q-hero {
  background:
    radial-gradient(
      45% 90% at 12% 0%,
      rgba(218, 33, 39, 0.16),
      transparent 72%
    ),
    var(--eme-obsidian);
}

/* The way in: each part by name, one line on what it holds, and an arrow
   that steps down on hover. Three equal columns over a hairline that turns
   red under the one pointed at; one under another on a phone. */
.q-jump {
  margin-block-start: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}
.q-jump ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0 clamp(1.25rem, 0.8rem + 2vw, 3rem);
  max-inline-size: 68rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.q-jump a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label arrow" "note note";
  column-gap: 1rem;
  row-gap: 0.3rem;
  align-items: start;
  block-size: 100%;
  padding-block: 1rem 1.25rem;
  border-block-start: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--eme-white);
  transition: border-color var(--eme-fast) var(--eme-ease);
}
.q-jump__label {
  grid-area: label;
  font-size: var(--eme-step-1);
  font-weight: 600;
  line-height: 1.35;
  transition: color var(--eme-fast) var(--eme-ease);
}
.q-jump__note {
  grid-area: note;
  font-size: var(--eme-step--1);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.66);
}
.q-jump__arrow {
  grid-area: arrow;
  align-self: center;
  block-size: 1.1rem;
  color: rgba(255, 255, 255, 0.55);
  transition:
    transform var(--eme-med) var(--eme-ease-out),
    color var(--eme-fast) var(--eme-ease);
}
.q-jump a:hover {
  border-color: var(--eme-red);
}
.q-jump a:hover .q-jump__arrow {
  color: var(--eme-red);
  transform: translate3d(0, 4px, 0);
}
.q-jump a:focus-visible {
  outline: 2px solid var(--eme-red);
  outline-offset: 4px;
}
@media (max-width: 47.99rem) {
  .q-jump a {
    padding-block: 0.85rem 1rem;
  }
}

/* ------------------------------------------------ the case, and the index */
.q-intro__grid {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
@media (min-width: 62rem) {
  .q-intro__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(3rem, 6vw, 8rem);
    align-items: start;
  }
}
.q-intro__text p {
  max-inline-size: 60ch;
  color: var(--eme-graphite);
}
.q-intro__text .q-intro__first {
  max-inline-size: 36ch;
  margin-block-end: var(--eme-space-5);
  font-size: var(--eme-step-3);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--eme-text);
}
html[lang="ar"] .q-intro__text .q-intro__first {
  letter-spacing: 0;
  line-height: 1.75;
}
.q-intro__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  padding-block-end: 0.75rem;
  border-block-end: 1px solid var(--eme-line);
  font-size: var(--eme-step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.q-intro__count {
  font-weight: 500;
  color: var(--eme-text-muted);
}
html[lang="ar"] .q-intro__label {
  letter-spacing: 0;
}
.cert-row--index {
  --row-mark-h: clamp(2.5rem, 2.1rem + 1vw, 3.25rem);
  row-gap: clamp(1.5rem, 1.1rem + 1vw, 2rem);
}

/* ---------------------------------------------------------- the register */
.q-intro + .q-register {
  padding-block-start: 0;
}
.q-head {
  margin-block-end: clamp(2.5rem, 1.75rem + 2.5vw, 4.5rem);
}

/* A group opens under a heavy rule, the slash cutting it where it starts. */
.q-group + .q-group {
  margin-block-start: clamp(3.5rem, 2.5rem + 3vw, 6rem);
}
.q-group__head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem 2rem;
  align-items: baseline;
  padding-block: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem)
    clamp(1.5rem, 1.1rem + 1vw, 2.25rem);
  border-block-start: 2px solid var(--eme-obsidian);
  padding-top: 50px;
}
.q-group__head::before {
  content: "";
  position: absolute;
  inset-block-start: -2px;
  inset-inline-start: 0;
  inline-size: clamp(2.5rem, 1.8rem + 2vw, 4rem);
  block-size: 4px;
  background: var(--eme-red);
  transform: skewX(var(--eme-slant));
  transform-origin: 0 100%;
}
.q-group__title {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: var(--eme-step-4);
  font-weight: 600;
  line-height: 1.15;
}
.q-group__count {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: var(--eme-step-4);
  font-weight: 300;
  line-height: 1;
  color: var(--eme-text-muted);
  font-variant-numeric: tabular-nums;
  font-family: var(--eme-font-latin);
  display: none;
}
.q-group__body {
  grid-column: 1 / -1;
  margin: 0;
  max-inline-size: 60ch;
  color: var(--eme-text-muted);
}
@media (min-width: 62rem) {
  .q-group__head {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) auto;
  }
  .q-group__body {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  .q-group__count {
    grid-column: 3;
  }
}

/* The applied claim reads darker than the general description beside it. */
.q-register .cert-entry__fact:nth-child(2) dd {
  color: var(--eme-text);
}

/* Certificate copies: one dark plate closing the register, cut by the slash. */
.q-request {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  margin-block-start: clamp(3rem, 2rem + 3vw, 5rem);
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem)
    clamp(1.5rem, 0.9rem + 3vw, 3.5rem);
  background: var(--eme-obsidian);
  color: var(--eme-white);
  display: none;
}
.q-request::before {
  content: "";
  position: absolute;
  inset-block: -1rem;
  inset-inline-start: -0.4rem;
  z-index: -1;
  inline-size: clamp(0.6rem, 0.45rem + 0.4vw, 0.9rem);
  background: var(--eme-red);
  transform: skewX(var(--eme-slant));
}
.q-request__text {
  flex: 1 1 26rem;
  min-inline-size: 0;
}
.q-request__title {
  margin: 0 0 0.5rem;
  font-size: var(--eme-step-3);
  color: var(--eme-white);
}
.q-request__text p {
  max-inline-size: 58ch;
  margin: 0;
  color: #c9ced3;
}
.q-request__btn {
  flex: none;
}

/* ------------------------------------------------------------ the checks
   The rail and its steps are the shared track (assets/css/track.css); only the
   arrival of this section's head is set here. */
.q-testing.is-armed .q-head {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
}
.q-testing.is-armed .q-head.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms var(--eme-ease-out),
    transform 900ms var(--eme-ease-out);
}

/* ----------------------------------------------------------- the clients */
.q-trust {
  --stage: #07080a;
  --stage-line: rgba(255, 255, 255, 0.12);
  --lane: clamp(2.25rem, 2rem + 0.8vw, 2.75rem);
  isolation: isolate;
  background: var(--stage);
  color: var(--eme-white);
}
.q-trust__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "board" "text";
  gap: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);
}
.q-trust__text {
  grid-area: text;
  min-inline-size: 0;
}
.q-trust__board {
  grid-area: board;
  margin: 0;
  /* Sticky makes it a layer of its own, and a blend only reaches what is
     painted inside that layer: so the board carries the stage (and a low
     light behind the logos) itself. */
  background:
    radial-gradient(
      60% 45% at 50% 50%,
      rgba(255, 255, 255, 0.05),
      transparent 72%
    ),
    var(--stage);
}
.q-trust__img {
  inline-size: 100%;
  mix-blend-mode: lighten;
}
.q-trust__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;
}
@media (max-width: 47.99rem) and (orientation: landscape) {
  .q-trust__board {
    inline-size: min(100%, 26rem);
    margin-inline: auto;
  }
}
@media (min-width: 62rem) {
  .q-trust__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "text board";
    column-gap: clamp(3rem, 6vw, 8rem);
    align-items: start;
  }
  /* Held in view while the groups scroll past. A wall taller than the space
     under the header would keep its foot out of sight until the section
     ended, so its offset turns negative by the difference: it scrolls with
     the page until its foot is on screen, then holds there. Its height is
     its column's width (as .q-trust__body lays it out) times the picture's
     own ratio (--board-ratio, from the view), plus the caption. */
  .q-trust__board {
    --board-w: min(
      44rem,
      (
          min(100vw, var(--eme-container)) - 2 * var(--eme-gutter) -
            clamp(3rem, 6vw, 8rem)
        ) /
        2
    );
    --board-h: calc(var(--board-w) * var(--board-ratio, 1.6) + 2.5rem);
    position: sticky;
    inset-block-start: min(
      calc(var(--eme-header-h) + 1.5rem),
      calc(100vh - var(--board-h) - 1.5rem)
    );
    justify-self: end;
    inline-size: 100%;
    max-inline-size: 44rem;
  }
}
.q-trust--text .q-trust__body {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "text";
}

.q-trust__intro {
  max-inline-size: 62ch;
  margin-block-end: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  font-size: var(--eme-step-1);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.76);
}
.q-trust__groups {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-end: 1px solid var(--stage-line);
}
.q-trust__group {
  display: grid;
  grid-template-columns: var(--lane) minmax(0, 1fr);
  align-items: baseline;
  padding-block: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem)
    clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  border-block-start: 1px solid var(--stage-line);
}
.q-trust__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;
  font-family: var(--eme-font-latin);
}
.q-trust__title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: var(--eme-step-1);
  font-weight: 600;
  line-height: 1.4;
  color: var(--eme-white);
}
.q-trust__copy {
  grid-column: 2;
  max-inline-size: 60ch;
  margin: 0.45rem 0 0;
  font-size: var(--eme-step-0);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.66);
}
.q-trust__names {
  grid-column: 2;
  margin: 0.85rem 0 0;
  font-size: 0.875rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.82);
}
.q-trust__including {
  margin-inline-end: 0.5rem;
  font-weight: 700;
  color: var(--eme-white);
}
.q-trust__name {
  display: inline-block;
}
.q-trust__sep {
  margin-inline-end: 0.35em;
  color: rgba(255, 255, 255, 0.38);
}

/* Arrival of the clients: the head, then the groups; the board holds still
   (a fading layer would show the picture's black as a box until it settled). */
.q-trust.is-armed [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
}
.q-trust.is-armed [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms var(--eme-ease-out),
    transform 900ms var(--eme-ease-out);
}