/* ============================================================================
   QX MEDIA — COMPONENTS
   Built to the official design handoff.

   All box-model properties are LOGICAL (inline-start/end), which is the whole RTL
   strategy: the Arabic layout mirrors for free and there is no second stylesheet.
   ========================================================================= */

/* ============================================================================
   NAV — fixed, 80px, transparent over the hero then solid cream after 40px
   ========================================================================= */

.qx-nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 60;
  background: transparent;
  border-block-end: 1px solid transparent;
  transition:
    background 0.45s ease,
    border-color 0.45s ease;
}

.qx-nav.is-solid {
  background: var(--qx-nav-solid);
  border-block-end-color: var(--qx-ink-12);
}

.qx-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-inline: var(--qx-pad-x);
  block-size: 80px;
}

.qx-nav__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* The mark is wide (859x463, 1.855:1). Height is set and the width scales, so it is never
   squashed toward the old square monogram's proportions. */
.qx-nav__logo img {
  block-size: 30px;
  inline-size: auto;
  object-fit: contain;
}

/* The cream mark only exists for the dark state; it is stacked in the same place rather
   than laid out beside the gradient one. */
.qx-nav__mark--cream {
  display: none;
}

.qx-nav--dark .qx-nav__mark {
  display: none;
}

.qx-nav--dark .qx-nav__mark--cream {
  display: block;
}

/* ---- Dark state --------------------------------------------------------
   Held while the homepage's near-black 3D hero occupies the viewport. The nav stays
   transparent throughout: going solid cream over a black scene for five screens of
   scroll would put a bright bar across the whole hero. */

.qx-nav--dark .qx-nav__links a,
.qx-nav--dark .qx-lang {
  color: rgba(240, 223, 194, 0.85);
}

.qx-nav--dark .qx-lang {
  border-block-end-color: rgba(240, 223, 194, 0.4);
}

.qx-nav--dark .qx-nav__links a:hover,
.qx-nav--dark .qx-nav__links .current-menu-item > a,
.qx-nav--dark .qx-lang:hover {
  color: var(--qx-terracotta);
  border-block-end-color: var(--qx-terracotta);
}

.qx-nav--dark .qx-btn--ink {
  color: var(--qx-warm-cream);
  border-color: rgba(240, 223, 194, 0.5);
}

.qx-nav--dark .qx-btn--ink:hover {
  background: var(--qx-warm-cream);
  color: var(--qx-charcoal);
  border-color: var(--qx-warm-cream);
}

.qx-nav--dark .qx-burger__bar {
  background: var(--qx-warm-cream);
}

/* While dark, the scrolled-solid treatment is suppressed. */
.qx-nav--dark.is-solid {
  background: transparent;
  border-block-end-color: transparent;
}

.qx-nav__links {
  display: flex;
  align-items: center;
  gap: 38px;
  font-family: var(--qx-latin);
  font-size: 13.5px;
  letter-spacing: 0.08em;
}

html[lang^='ar'] .qx-nav__links {
  font-family: var(--qx-arabic);
  font-weight: 500;
  font-size: 15.5px;
  letter-spacing: 0;
}

/* When a WordPress menu is assigned, wp_nav_menu emits <li> elements straight into this
   flex row. `display: contents` removes their boxes so the <a> becomes the flex item —
   which also kills the list markers that were rendering as bullets between nav links. */
.qx-nav__links li {
  display: contents;
  list-style: none;
}

.qx-nav__links a {
  color: var(--qx-ink);
}

.qx-nav__links a:hover,
.qx-nav__links .current-menu-item > a {
  color: var(--qx-burgundy);
}

.qx-nav__end {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 0 0 auto;
}

/* The language toggle always renders in the OTHER language's typeface — "EN" in
   Prole on Arabic pages, "عربي" in Camel on English pages. */
.qx-lang {
  font-family: var(--qx-latin);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--qx-ink);
  border-block-end: 1px solid var(--qx-ink-40);
  padding-block-end: 2px;
  transition:
    color 0.35s var(--qx-ease),
    border-color 0.35s var(--qx-ease);
}

html[lang^='ar'] .qx-lang {
  font-family: var(--qx-arabic);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
}

.qx-lang:hover {
  color: var(--qx-burgundy);
  border-block-end-color: var(--qx-burgundy);
}

/* ---- Mobile nav --------------------------------------------------------
   Below 920px the handoff hides the desktop links and the nav CTA
   ([data-desktop] in the reference) and shows a 44x44 hamburger that opens a
   full-screen menu panel. The 80px bar then holds only the mark, the language
   toggle and the menu button. */

/* Two bars of unequal width, 26px over 18px, flush to the same edge — a stepped mark
   rather than a generic three-line hamburger. The handoff aligns them to the physical
   left in both directions, so the alignment is stated per direction rather than
   logically. 44x44 is the tap target; the bars are the visible part. */
.qx-burger {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
}

[dir='rtl'] .qx-burger {
  align-items: flex-end;
}

.qx-burger__bar {
  display: block;
  block-size: 1.5px;
  inline-size: 26px;
  background: var(--qx-ink);
  transition: transform 0.35s var(--qx-ease);
}

.qx-burger__bar:last-child {
  inline-size: 18px;
}

/* ---- The full-screen menu panel --------------------------------------- */

.qx-panel {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  background: var(--qx-cream);
  padding: 0 6vw 48px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.qx-panel[hidden] {
  display: none;
}

.qx-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: 80px;
  flex: 0 0 auto;
}

.qx-panel__logo {
  block-size: 28px;
  inline-size: auto;
  object-fit: contain;
}

.qx-panel__close {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  margin-inline-end: -10px; /* optical: pull the glyph flush with the 6vw gutter */
  font-family: var(--qx-latin);
  font-size: 30px;
  line-height: 1;
  color: var(--qx-ink);
}

.qx-panel__nav {
  display: flex;
  flex-direction: column;
  margin-block-start: 32px;
}

.qx-panel__nav li {
  display: contents;
  list-style: none;
}

.qx-panel__nav a {
  font-family: var(--qx-latin);
  font-size: 30px;
  line-height: 1.2;
  color: var(--qx-ink);
  padding-block: 14px;
  border-block-end: 1px solid rgba(34, 32, 33, 0.14);
}

html[lang^='ar'] .qx-panel__nav a {
  font-family: var(--qx-arabic);
  font-weight: 700;
  line-height: 1.5;
}

/* Pinned to the bottom of the panel, whatever the link count. */
.qx-panel__foot {
  margin-block-start: auto;
  padding-block-start: 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.qx-panel__mail {
  font-family: var(--qx-latin);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--qx-ink-60);
}

@media (max-width: 920px) {
  .qx-nav__links,
  .qx-nav__cta {
    display: none;
  }

  .qx-burger {
    display: inline-flex;
  }
}

@media (min-width: 921px) {
  .qx-panel {
    display: none;
  }
}

/* ============================================================================
   HERO
   ========================================================================= */

.qx-hero {
  position: relative;
  overflow: hidden;
  padding-block: 180px 0;
  padding-inline: var(--qx-pad-x);
  min-block-size: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.qx-hero__body {
  position: relative;
  max-inline-size: var(--qx-max-narrow);
}

.qx-hero__label {
  margin-block-end: 36px;
}

.qx-hero__lead {
  margin-block-start: 36px;
  max-inline-size: 580px;
}

.qx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 36px;
  margin-block-start: 52px;
}

/* The four-stat row that closes the hero. */
.qx-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 48px;
  border-block-start: 1px solid var(--qx-ink-16);
  margin-block-start: 96px;
}

.qx-stats > div {
  padding-block: 36px;
}

/* ============================================================================
   SERVICE ROWS — numbered, hairline-separated, tinted on hover
   ========================================================================= */

.qx-svc {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: baseline;
  gap: 28px;
  padding: 38px 12px;
  border-block-start: 1px solid var(--qx-ink-16);
  color: var(--qx-ink);
  transition: background 0.4s ease;
}

.qx-svc:last-child {
  border-block-end: 1px solid var(--qx-ink-16);
}

.qx-svc:hover {
  background: rgba(234, 218, 192, 0.55);
  color: var(--qx-ink);
}

.qx-svc__n {
  font-family: var(--qx-latin);
  font-size: 15px;
  color: var(--qx-burgundy);
}

.qx-svc__name {
  display: block;
  font-family: var(--qx-latin);
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.25;
}

html[lang^='ar'] .qx-svc__name {
  font-family: var(--qx-arabic);
  font-weight: 700;
  line-height: 1.5;
}

.qx-svc__meta {
  display: block;
  margin-block-start: 10px;
  font-size: 15px;
  color: var(--qx-ink-60);
}

html[lang^='ar'] .qx-svc__meta {
  font-family: var(--qx-arabic);
  font-weight: 300;
}

.qx-svc__arrow {
  font-family: var(--qx-latin);
  font-size: 22px;
  color: var(--qx-burgundy);
}

/* The arrow points the way the language reads. */
[dir='rtl'] .qx-svc__arrow {
  transform: scaleX(-1);
  display: inline-block;
}

/* The compact phone treatment for these rows lives in the 760px block at the end of
   this file, alongside the rest of the mobile layout. */

/* ============================================================================
   CASE STUDY CARDS — a hairline grid on burgundy
   ========================================================================= */

.qx-cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--qx-warm-25);
  border: 1px solid var(--qx-warm-25);
}

.qx-case {
  background: var(--qx-burgundy);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.qx-case__client {
  font-family: var(--qx-latin);
  font-size: 21px;
  letter-spacing: 0.16em;
}

.qx-case__sector {
  font-size: 14px;
  margin-block-start: 6px;
  color: var(--qx-warm-65);
}

html[lang^='ar'] .qx-case__sector {
  font-family: var(--qx-arabic);
  font-weight: 300;
}

.qx-case__metric {
  font-size: 16px;
  margin-block-start: 10px;
}

html[lang^='ar'] .qx-case__metric {
  font-family: var(--qx-arabic);
  font-weight: 500;
}

.qx-case__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  font-size: 14px;
  color: rgba(234, 218, 192, 0.7);
}

html[lang^='ar'] .qx-case__sub {
  font-family: var(--qx-arabic);
  font-weight: 300;
}

.qx-case__note {
  font-size: 15px;
  line-height: 1.9;
  color: var(--qx-warm-75);
}

html[lang^='ar'] .qx-case__note {
  font-family: var(--qx-arabic);
  font-weight: 300;
}

/* The "join our client list" button under the grid, centred per the handoff. */
.qx-cases__foot {
  display: flex;
  justify-content: center;
  margin-block-start: 64px;
}

/* ============================================================================
   CLIENT WORDMARK STRIP
   ========================================================================= */

.qx-clients {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  margin-block-start: 48px;
}

.qx-clients span {
  font-family: var(--qx-latin);
  font-size: 19px;
  letter-spacing: 0.18em;
  color: var(--qx-ink-40);
  transition: color 0.4s var(--qx-ease);
}

.qx-clients span:hover {
  color: var(--qx-burgundy);
}

/* ============================================================================
   PROCESS — three numbered steps
   ========================================================================= */

.qx-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 56px;
  margin-block-start: 64px;
}

.qx-step__n {
  font-family: var(--qx-latin);
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--qx-burgundy);
  display: block;
  margin-block-end: 20px;
  padding-block-end: 20px;
  border-block-end: 1px solid var(--qx-ink-16);
}

.qx-step h3 {
  margin-block-end: 14px;
}

/* ============================================================================
   TESTIMONIAL
   ========================================================================= */

/* The handoff centres the whole testimonial block inside a 1000px measure. */
.qx-quote__fig {
  margin: 0;
  max-inline-size: 1000px;
  margin-inline: auto;
  text-align: center;
}

.qx-quote {
  margin: 0;
  font-family: var(--qx-latin);
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.55;
  color: var(--qx-warm-cream);
}

html[lang^='ar'] .qx-quote {
  font-family: var(--qx-arabic);
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.9;
}

.qx-quote__mark {
  font-family: var(--qx-latin);
  font-size: 72px;
  line-height: 1;
  color: var(--qx-gold);
  display: block;
  margin-block-end: 12px;
}

.qx-quote__by {
  margin-block-start: 36px;
  font-size: 15px;
  color: var(--qx-warm-65);
}

html[lang^='ar'] .qx-quote__by {
  font-family: var(--qx-arabic);
  font-weight: 300;
}

/* Partner badges — bordered chips, centred, always Latin.
   `dir="ltr"` is set in the markup: these are Latin wordmarks and must not reorder
   inside an RTL paragraph. */
.qx-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-block-start: 88px;
}

.qx-badges span {
  font-family: var(--qx-latin);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(234, 218, 192, 0.8);
  border: 1px solid rgba(234, 218, 192, 0.3);
  padding: 11px 22px;
}

/* On a light ground the chip border and text become ink instead. */
.qx-badges--onLight span {
  color: var(--qx-ink-70);
  border-color: rgba(34, 32, 33, 0.25);
}

/* ============================================================================
   FINAL CTA
   ========================================================================= */

.qx-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.qx-cta__inner {
  position: relative;
  max-inline-size: 900px;
  margin-inline: auto;
}

.qx-cta__lead {
  margin-block-start: 32px;
  margin-inline: auto;
  max-inline-size: 560px;
}

.qx-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 36px;
  margin-block-start: 52px;
}

/* ============================================================================
   FOOTER
   ========================================================================= */

.qx-footer {
  background: var(--qx-charcoal);
  color: var(--qx-warm-cream);
  padding: 100px var(--qx-pad-x) 48px;
}

.qx-footer__grid {
  max-inline-size: var(--qx-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 64px;
}

/* Tablet: the three columns no longer fit at 2fr 1fr 1fr, but stacking all three is what
   made the footer so tall. The brand block takes the full width and the two link columns
   sit beside each other — the same shape the 760px block keeps on phones. */
@media (max-width: 920px) {
  .qx-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px 32px;
  }

  .qx-footer__grid > div:first-child {
    grid-column: 1 / -1;
  }
}

/* inline-block so the link box hugs the artwork. Left in LTR, right in RTL, flush with the
   tagline beneath it — a stretched box would centre the mark instead. */
.qx-footer__logo {
  display: inline-block;
  align-self: flex-start;
}

.qx-footer__logo img {
  block-size: 40px;
  inline-size: auto;
  object-fit: contain;
}

.qx-footer__tag {
  margin-block-start: 24px;
  max-inline-size: 380px;
  font-size: 15px;
  color: var(--qx-warm-72);
}

html[lang^='ar'] .qx-footer__tag {
  font-size: 16px;
}

.qx-footer__col .qx-label {
  margin-block-end: 22px;
  color: var(--qx-terracotta);
}

.qx-footer__list {
  display: grid;
  gap: 14px;
  font-size: 15px;
}

.qx-footer__list a {
  color: var(--qx-warm-72);
}

.qx-footer__list a:hover {
  color: var(--qx-gold);
}

.qx-footer__base {
  max-inline-size: var(--qx-max);
  margin-inline: auto;
  margin-block-start: 72px;
  padding-block-start: 28px;
  border-block-start: 1px solid var(--qx-warm-25);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  font-size: 13px;
  color: var(--qx-warm-65);
}

/* ============================================================================
   INTERIOR PAGES — About, Services, Contact
   (About.dc.html, Services.dc.html, Contact.dc.html)
   ========================================================================= */

/* The page hero: same idea as the homepage's but shorter, and without the 88vh floor. */
.qx-phero {
  position: relative;
  overflow: hidden;
  padding: 200px var(--qx-pad-x) 120px;
}

.qx-phero__body {
  position: relative;
  max-inline-size: var(--qx-max-narrow);
}

.qx-phero__lead {
  margin-block-start: 36px;
  max-inline-size: 620px;
}

/* A two-column editorial split: label + heading against running text. */
.qx-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 64px;
  align-items: start;
}

.qx-split__paras {
  display: grid;
  gap: 28px;
}

/* The team photograph. Rendered only when the page has a featured image — an empty
   drop-zone is worse than no section, so the template omits the figure entirely
   rather than shipping the design file's placeholder. */
.qx-figure {
  margin: 0;
  margin-block-start: 64px;
}

.qx-figure img {
  inline-size: 100%;
  block-size: clamp(280px, 44vw, 560px);
  object-fit: cover;
}

/* Numbered value rows: number, title, description. */
.qx-val {
  display: grid;
  grid-template-columns: 72px 1fr 1.2fr;
  gap: 28px;
  align-items: baseline;
  padding: 36px 12px;
  border-block-start: 1px solid var(--qx-ink-16);
}

.qx-val:last-child {
  border-block-end: 1px solid var(--qx-ink-16);
}

.qx-val__n {
  font-family: var(--qx-latin);
  font-size: 15px;
  color: var(--qx-burgundy);
}

.qx-val__title {
  font-family: var(--qx-latin);
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.3;
}

html[lang^='ar'] .qx-val__title {
  font-family: var(--qx-arabic);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.5;
}

.qx-val__body {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--qx-ink-65);
}

html[lang^='ar'] .qx-val__body {
  font-family: var(--qx-arabic);
  font-weight: 300;
  font-size: 15.5px;
  line-height: 2;
}

/* The burgundy stat band on the About page. */
.qx-statrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 48px;
}

.qx-statrow .qx-stat {
  font-size: clamp(40px, 4vw, 56px);
}

.qx-statrow .qx-stat__cap {
  margin-block-start: 10px;
  font-size: 15px;
  color: var(--qx-warm-75);
}

/* Services page: one full-width row per service, number + name against copy + sub-list. */
.qx-srow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 56px;
  padding-block: 64px;
  border-block-start: 1px solid var(--qx-ink-16);
}

.qx-srow:last-child {
  border-block-end: 1px solid var(--qx-ink-16);
}

.qx-srow__n {
  font-family: var(--qx-latin);
  font-size: 15px;
  color: var(--qx-burgundy);
}

.qx-srow__name {
  margin-block-start: 16px;
}

.qx-srow__body {
  margin-block-end: 28px;
  font-family: var(--qx-latin);
  font-size: 15.5px;
  line-height: 1.9;
  color: rgba(34, 32, 33, 0.75);
}

html[lang^='ar'] .qx-srow__body {
  font-family: var(--qx-arabic);
  font-weight: 300;
  font-size: 16.5px;
  line-height: 2.1;
}

.qx-srow__list {
  display: flex;
  flex-direction: column;
}

.qx-srow__list li {
  font-family: var(--qx-latin);
  font-size: 14px;
  letter-spacing: 0.04em;
  padding-block: 14px;
  border-block-start: 1px solid var(--qx-ink-12);
}

html[lang^='ar'] .qx-srow__list li {
  font-family: var(--qx-arabic);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
}

.qx-srow__list li:last-child {
  border-block-end: 1px solid var(--qx-ink-12);
}

/* A centred closing band, used for the Services page's dark CTA and the About CTA. */
.qx-close {
  text-align: center;
}

.qx-close__inner {
  max-inline-size: 800px;
  margin-inline: auto;
}

.qx-close__lead {
  margin-block-start: 28px;
  margin-inline: auto;
  max-inline-size: 480px;
}

.qx-close__action {
  margin-block-start: 48px;
}

/* ============================================================================
   CONTACT PAGE
   ========================================================================= */

.qx-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

@media (max-width: 900px) {
  .qx-contact {
    grid-template-columns: 1fr;
    gap: 56px;
  }
}

.qx-detail {
  display: grid;
  gap: 26px;
  margin-block-start: 44px;
}

.qx-detail__row .qx-label {
  margin-block-end: 8px;
  font-size: 11px;
  letter-spacing: 0.22em;
}

.qx-form {
  display: grid;
  gap: 26px;
}

.qx-field label {
  display: block;
  font-family: var(--qx-latin);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qx-burgundy);
  margin-block-end: 10px;
}

html[lang^='ar'] .qx-field label {
  font-family: var(--qx-arabic);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

.qx-field input,
.qx-field select,
.qx-field textarea {
  inline-size: 100%;
  font: inherit;
  color: var(--qx-ink);
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--qx-ink-40);
  border-radius: 0;
  padding-block: 12px;
  transition: border-color 0.35s var(--qx-ease);
}

.qx-field textarea {
  min-block-size: 120px;
  resize: vertical;
}

.qx-field input:focus,
.qx-field select:focus,
.qx-field textarea:focus {
  outline: none;
  border-block-end-color: var(--qx-burgundy);
}

.qx-form button {
  justify-self: start;
}

/* ============================================================================
   ARTICLE / PROSE — the 31 existing journal articles
   ========================================================================= */

.qx-article {
  padding: 170px var(--qx-pad-x) var(--qx-sec);
}

.qx-prose {
  max-inline-size: 68ch;
  font-size: 17px;
  line-height: 1.9;
  color: var(--qx-ink-78);
}

html[lang^='ar'] .qx-prose {
  max-inline-size: 58ch;
  font-size: 19px;
  line-height: 2.1;
}

.qx-prose > * + * {
  margin-block-start: 1.4em;
}

.qx-prose :is(h2, h3, h4) {
  color: var(--qx-ink);
  margin-block-start: 2em;
}

.qx-prose h2 {
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.3;
}

html[lang^='ar'] .qx-prose h2 {
  font-weight: 700;
  line-height: 1.5;
}

.qx-prose h3 {
  font-size: 23px;
}

.qx-prose a {
  color: var(--qx-burgundy);
  border-block-end: 1px solid var(--qx-ink-40);
}

.qx-prose ul li,
.qx-prose ol li {
  margin-block-start: 0.5em;
  padding-inline-start: 1.2em;
  position: relative;
}

/* A middle dot, not an em dash. The list marker is the one place a dash was still
   rendering as visible copy, on all 31 journal articles, and the brief takes dashes out of
   blog copy too. `·` is already the separator the design uses in the service rows. */
.qx-prose ul li::before {
  content: '·';
  position: absolute;
  inset-inline-start: 0;
  color: var(--qx-burgundy);
}

.qx-prose ol {
  counter-reset: qx;
}

.qx-prose ol li {
  counter-increment: qx;
}

.qx-prose ol li::before {
  content: counter(qx) '.';
  position: absolute;
  inset-inline-start: 0;
  color: var(--qx-burgundy);
  font-family: var(--qx-latin);
}

.qx-prose img {
  margin-block: 2em;
}

.qx-prose blockquote {
  margin-block: 2em;
  padding-inline-start: 24px;
  border-inline-start: 2px solid var(--qx-burgundy);
  font-size: 21px;
  color: var(--qx-ink);
}

/* Journal index cards */
.qx-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--qx-ink-16);
  border: 1px solid var(--qx-ink-16);
  margin-block-start: 56px;
}

.qx-card {
  background: var(--qx-cream);
  padding: 40px 36px;
  display: grid;
  gap: 14px;
  align-content: start;
  transition: background 0.4s ease;
}

.qx-card:hover {
  background: rgba(234, 218, 192, 0.55);
}

.qx-card__date {
  font-family: var(--qx-latin);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--qx-burgundy);
  direction: ltr;
}

.qx-card__title {
  font-family: var(--qx-latin);
  font-size: 23px;
  line-height: 1.35;
}

html[lang^='ar'] .qx-card__title {
  font-family: var(--qx-arabic);
  font-weight: 700;
  line-height: 1.6;
}

.qx-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 56px;
  font-family: var(--qx-latin);
  font-size: 14px;
}

.qx-pagination .page-numbers {
  padding: 10px 18px;
  border: 1px solid var(--qx-ink-16);
}

.qx-pagination .page-numbers.current {
  background: var(--qx-burgundy);
  border-color: var(--qx-burgundy);
  color: var(--qx-cream);
}

/* ============================================================================
   MOBILE — 760px and below

   The round-2 brief: "the mobile experience must be compact and use side-by-side
   layouts instead of one item per row." So this block does two things.

   1. Cuts the vertical rhythm hard: 150px section padding becomes 76px, the hero
      loses its 88vh floor, and the type scale steps down. That alone removes
      roughly a third of the page height.
   2. Puts things beside each other. Every grid that `auto-fit` would collapse to
      one column is pinned to two: the hero stats, the About stat row, the case
      cards (third spanning full width), the three process steps, and the footer's
      menu and contact columns. The numbered list rows keep their number in a
      narrow 26px column with the description wrapping under the title instead of
      claiming a column of its own.

   Tap targets stay at 44px minimum throughout.
   ========================================================================= */

@media (max-width: 760px) {
  :root {
    --qx-pad-x: 6vw;
    --qx-sec: 76px;
    --qx-sec-sm: 76px;
    --qx-sec-lg: 76px;
  }

  /* ---- Type scale ----------------------------------------------------- */

  .qx-display,
  html[lang^='ar'] .qx-display {
    font-size: clamp(33px, 9.2vw, 44px);
    line-height: 1.25;
  }

  .qx-h2,
  html[lang^='ar'] .qx-h2,
  .qx-h2--lg,
  html[lang^='ar'] .qx-h2--lg {
    font-size: clamp(23px, 6.4vw, 31px);
    line-height: 1.35;
  }

  html[lang^='ar'] :is(.qx-h2, .qx-h2--lg) {
    line-height: 1.55;
  }

  .qx-body,
  html[lang^='ar'] .qx-body {
    font-size: 15.5px;
    line-height: 1.95;
  }

  .qx-h3,
  html[lang^='ar'] .qx-h3 {
    font-size: 19px;
  }

  .qx-quote,
  html[lang^='ar'] .qx-quote {
    font-size: 21px;
    line-height: 1.8;
  }

  .qx-quote__mark {
    font-size: 56px;
  }

  /* ---- Hero ----------------------------------------------------------- */

  .qx-hero {
    padding-block-start: 112px;
    min-block-size: 0;
  }

  .qx-hero__actions {
    gap: 20px;
    margin-block-start: 40px;
  }

  .qx-hero__actions .qx-btn {
    inline-size: 100%;
    text-align: center;
  }

  /* ---- Stat rows: 2x2, not a four-storey stack ------------------------ */

  .qx-stats {
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
    margin-block-start: 44px;
  }

  .qx-stats > div {
    padding-block: 20px;
  }

  .qx-stats .qx-stat {
    font-size: 28px;
  }

  .qx-stats .qx-stat__cap {
    font-size: 12px;
    line-height: 1.55;
    margin-block-start: 4px;
  }

  /* ---- Case cards: 2 across, the third spanning the full width -------- */

  .qx-cases {
    grid-template-columns: 1fr 1fr;
  }

  .qx-case {
    padding: 24px 16px;
    gap: 16px;
  }

  .qx-case:last-child {
    grid-column: 1 / -1;
  }

  .qx-case .qx-stat--lg {
    font-size: 32px;
  }

  .qx-case__client {
    font-size: 17px;
    letter-spacing: 0.12em;
  }

  .qx-case__metric {
    font-size: 14px;
    margin-block-start: 8px;
  }

  .qx-case__sub {
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12px;
  }

  .qx-case p {
    font-size: 13.5px;
    line-height: 1.7;
  }

  /* ---- Process: 2 across ---------------------------------------------- */

  .qx-steps {
    grid-template-columns: 1fr 1fr;
    gap: 26px 20px;
    margin-block-start: 44px;
  }

  .qx-step__n {
    margin-block-end: 14px;
    padding-block-end: 14px;
  }

  .qx-step h3 {
    margin-block-end: 12px;
  }

  .qx-step .qx-body--sm {
    font-size: 13.5px;
    line-height: 1.85;
  }

  /* ---- Numbered list rows: narrow number column, text wraps under ------ */

  .qx-svc {
    grid-template-columns: 26px 1fr auto;
    gap: 0 14px;
    padding: 22px 2px;
  }

  .qx-svc__name {
    font-size: 19px;
  }

  .qx-svc__meta {
    font-size: 13px;
    margin-block-start: 6px;
  }

  .qx-svc__arrow {
    font-size: 18px;
  }

  /* ---- Client strip and badges ---------------------------------------- */

  .qx-clients {
    justify-content: flex-start;
    gap: 16px 26px;
    margin-block-start: 32px;
  }

  .qx-clients span {
    font-size: 15px;
  }

  .qx-badges {
    gap: 8px;
    margin-block-start: 44px;
    padding-block-start: 32px;
  }

  /* Border colour is deliberately not restated here — it differs between the dark and
     the light ground, and an override would flatten both to one. */
  .qx-badges span {
    font-size: 9px;
    letter-spacing: 0.12em;
    padding: 7px 10px;
  }

  /* ---- Footer: menu and contact share a row -------------------------- */

  .qx-footer {
    padding-block: 76px 40px;
  }

  .qx-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 20px;
  }

  .qx-footer__grid > div:first-child {
    grid-column: 1 / -1;
  }

  .qx-footer__base {
    margin-block-start: 44px;
    font-size: 12px;
  }

  /* ---- Contact ------------------------------------------------------- */

  .qx-contact {
    gap: 44px 24px;
  }

  .qx-form {
    gap: 24px;
  }

  .qx-form .qx-btn {
    inline-size: 100%;
    text-align: center;
  }

  /* ---- Interior pages ------------------------------------------------- */

  .qx-phero {
    padding-block: 112px 76px;
  }

  .qx-split {
    gap: 32px;
  }

  .qx-figure {
    margin-block-start: 32px;
  }

  .qx-figure img {
    block-size: 62vw;
  }

  /* Values rows collapse to a 26px number column with the description wrapping
     under the title rather than claiming a column of its own. */
  .qx-val {
    grid-template-columns: 26px 1fr;
    gap: 4px 12px;
    padding: 22px 0;
  }

  .qx-val__title,
  html[lang^='ar'] .qx-val__title {
    font-size: 19px;
  }

  .qx-val__body,
  html[lang^='ar'] .qx-val__body {
    grid-column: 2;
    font-size: 13.5px;
    line-height: 1.85;
  }

  /* The About page's stat band: 2x2, same as the hero's. */
  .qx-statrow {
    grid-template-columns: 1fr 1fr;
    gap: 30px 20px;
  }

  .qx-statrow .qx-stat {
    font-size: 30px;
  }

  .qx-statrow .qx-stat__cap {
    font-size: 12px;
    line-height: 1.55;
    margin-block-start: 4px;
  }

  .qx-srow {
    gap: 22px;
    padding-block: 40px;
  }

  .qx-srow__body,
  html[lang^='ar'] .qx-srow__body {
    font-size: 15.5px;
    line-height: 1.95;
    margin-block-end: 20px;
  }

  .qx-close__action {
    margin-block-start: 36px;
  }

  .qx-close__action .qx-btn {
    inline-size: 100%;
    text-align: center;
  }

  /* ---- Watermarks: never let min-inline-size force a horizontal scroll - */

  .qx-watermark {
    min-inline-size: 0;
    inline-size: 76vw;
  }

  .qx-watermark--cta {
    min-inline-size: 0;
    inline-size: 64vw;
  }

  /* ---- Articles ------------------------------------------------------- */

  .qx-article {
    padding-block-start: 112px;
  }
}

/* The narrowest phones: two columns of case-card body copy stop being readable
   below roughly 360px, so those go back to one. Everything else holds. */
@media (max-width: 359px) {
  .qx-cases,
  .qx-steps {
    grid-template-columns: 1fr;
  }
}