/* ==========================================================================
   Concept Media — Inner pages: shared foundations
   (The Agency, Services, Our Work, Contact; ships to WordPress as-is).
   Built on tokens.css, base.css and layout.css. Each page adds its own
   stylesheet for its personality; this file holds only what they share.
   ========================================================================== */

.inner-page { background: var(--cm-black); }

/* Page label: "● The Agency", the first line of every inner page */
.page-label {
  display: inline-flex; align-items: center; gap: var(--space-3); margin: 0;
  font-size: var(--text-label); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--cm-ink-200);
}
:lang(ar) .page-label { text-transform: none; font-size: 15px; font-weight: var(--weight-semibold); }
.page-label__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--cm-orange); box-shadow: 0 0 0 4px rgba(255, 92, 0, 0.18); }

/* Heavy/thin display line used for section titles on inner pages */
.inner-display {
  margin: 0; font-family: var(--font-display);
  font-size: var(--text-display-l); line-height: var(--leading-display); letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.inner-display > span { display: block; }

/* Scroll reveals (inner.js adds .has-reveal only when motion is allowed).
   Opacity only, never visibility: links inside stay keyboard-focusable. */
.has-reveal [data-reveal] {
  opacity: 0; transform: translateY(var(--reveal-distance));
  transition: opacity var(--dur-reveal) var(--ease-standard), transform var(--dur-cinematic) var(--ease-out);
}
.has-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* 404 page (404.html): the message, the button and the Arabic note spaced as separate lines */
.not-found-page .ag-hero__intro { display: grid; gap: var(--space-5); justify-items: start; }
.not-found-page .ag-hero__intro p { margin: 0; }
.not-found-page .ag-hero__intro [lang="ar"] { justify-self: stretch; display: grid; gap: var(--space-2); justify-items: start; }