/* ==========================================================================
   RECOGNITION — the directory badge strip, which seven of the twelve firms
   in the audit carry and which is the dominant credibility device in this
   market.

   Drawn, not imaged: a laurel ring in the accent with the body, the rank and
   the category stacked inside it. No logos, partly because logo files would
   be somebody else's marks and partly because a drawn ring survives a rename
   when the real recognition arrives.
   ========================================================================== */

.seal {
  position: relative;
  z-index: 2;
  background: var(--haq-ground, #061019);
  color: #f4efe4;
  padding-block: clamp(46px, 7vh, 78px);
  padding-inline: var(--haq-gutter, clamp(20px, 4vw, 48px));
  border-block-start: 1px solid rgba(244,239,228,.08);
}
.seal-in { max-width: 1080px; margin-inline: auto; }

.seal-head small {
  display: block;
  font-family: Manrope, system-ui, sans-serif;
  font-size: var(--haq-eyebrow, .74rem);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--record-amber, #f49f2e);
}
[dir="rtl"] .seal-head small { letter-spacing: 0; }
.seal-head h2 {
  margin: 12px 0 0;
  font-family: "Instrument Serif", Newsreader, Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 3.8vw, 2.4rem);
  line-height: 1.1;
  max-width: 24ch;
  text-wrap: balance;
}

.seal-list {
  list-style: none;
  margin: clamp(26px, 4.5vh, 40px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3.4vw, 36px);
}
@media (min-width: 780px) { .seal-list { grid-template-columns: repeat(4, 1fr); } }

.seal-item { text-align: center; }
/* The laurel. The first version was a ring with an arc inside it, which read
   as a smiling face, not a wreath. This is the real thing: two branches
   curving up from the base with the leaves attached along the outside, and a
   gap left at the top where a wreath opens. */
.seal-laurel {
  display: block;
  width: 54px;
  height: 49px;
  margin-inline: auto;
  color: var(--record-amber, #f49f2e);
  overflow: visible;
}
.seal-stem { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; opacity: .55; }
.seal-leaf { fill: currentColor; opacity: .8; }
.seal-body {
  margin: 14px 0 0;
  /* Two lines are reserved for every name, so a directory whose name wraps
     does not drop its rank and category below its neighbour's. */
  min-height: 2.8em;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: Manrope, system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.4;
  color: rgba(244,239,228,.6);
}
[dir="rtl"] .seal-body { letter-spacing: 0; }
.seal-rank {
  margin: 8px 0 0;
  font-family: "Instrument Serif", Newsreader, Georgia, serif;
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  line-height: 1.1;
  color: var(--record-amber, #f49f2e);
}
.seal-area {
  margin: 6px 0 0;
  font-family: Manrope, system-ui, sans-serif;
  font-size: .78rem;
  line-height: 1.45;
  color: rgba(244,239,228,.62);
}

/* Entrance, gated. */
@media (prefers-reduced-motion: no-preference) {
  html.seal-js .seal-head > *,
  html.seal-js .seal-item { opacity: 0; translate: 0 12px; }
  html.seal-js .seal.in .seal-head > *,
  html.seal-js .seal.in .seal-item {
    opacity: 1;
    translate: 0 0;
    transition: opacity .5s ease, translate .55s cubic-bezier(.25, .8, .25, 1);
  }
  html.seal-js .seal.in .seal-item:nth-child(1) { transition-delay: .06s; }
  html.seal-js .seal.in .seal-item:nth-child(2) { transition-delay: .13s; }
  html.seal-js .seal.in .seal-item:nth-child(3) { transition-delay: .20s; }
  html.seal-js .seal.in .seal-item:nth-child(4) { transition-delay: .27s; }
}