/* ============================================================================
   blocks.css — marketing blocks: hero · section-opener · stat-band ·
   service-index · industry-index · criteria-list · process-stepper ·
   coverage-map · client-wall · cta-band · article-body · sticky-quote
   ========================================================================= */

/* --------------------------------------------------------------------------
   hero-home — full-bleed TYPE composition. No video, no full-viewport photo
   with a centred headline. The h1 is real text and paints before any media,
   because on the old site the LCP element was a 7.8MB video that never loaded.
   ----------------------------------------------------------------------- */
.hero {
  padding-block: var(--sp-8) var(--sp-9);
  border-block-end: var(--rule);
}
@media (min-width: 1024px) { .hero { padding-block: var(--sp-9) var(--sp-10); } }

.hero__grid { align-items: start; }
.hero__meta { grid-column: 1 / 3; }
@media (max-width: 1023px) { .hero__meta { margin-block-end: var(--sp-5); } }
.hero__body { grid-column: 3 / 12; }
@media (min-width: 1280px) { .hero__body { grid-column: 3 / 11; } }

.hero__title { font-size: var(--fs-display); line-height: var(--lh-display); max-inline-size: 16ch; }
.hero__lead { margin-block-start: var(--sp-5); max-inline-size: 54ch; }
.hero__actions { margin-block-start: var(--sp-7); display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.hero__note {
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-5);
  border-block-start: var(--rule);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
}

/* Line-by-line rise, three lines maximum, seen once. Never per-character. */
.hero__line { display: block; overflow: hidden; }
.hero__line > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero__line > span { animation: hero-line 620ms var(--ease-out) backwards; }
  .js .hero__line:nth-child(2) > span { animation-delay: 60ms; }
  .js .hero__line:nth-child(3) > span { animation-delay: 120ms; }
}
@keyframes hero-line { from { transform: translateY(100%); } }

/* hero-page — the template hero for service, industry, country, article. */
.hero-page { padding-block: var(--sp-7) var(--sp-8); border-block-end: var(--rule); }
.hero-page__meta { grid-column: 1 / 3; }
.hero-page__body { grid-column: 3 / 12; }
.hero-page__title { margin-block-start: var(--sp-4); max-inline-size: 20ch; }
.hero-page__lead { margin-block-start: var(--sp-5); }
.hero-page__actions { margin-block-start: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
@media (max-width: 1023px) { .hero-page__meta { margin-block-end: var(--sp-4); } }

/* --------------------------------------------------------------------------
   section-opener
   ----------------------------------------------------------------------- */
.section-opener { margin-block-end: var(--sp-7); }
.section-opener__code { display: block; }
.section-opener__kicker { display: block; margin-block-start: var(--sp-2); }
.section-opener__heading { max-inline-size: 22ch; }
.section-opener__lead { margin-block-start: var(--sp-4); }

/* --------------------------------------------------------------------------
   stat-band — dark ground, figures on scored lines, mono footnote link.
   Numbers are real text in the DOM. Count-up is enhancement only, and there is
   none here: the old site's four counters all rendered as "00000 +".
   ----------------------------------------------------------------------- */
.stat-band { padding-block: var(--sp-9); }
.stat-band__grid { display: grid; gap: var(--sp-7) var(--sp-6); margin-block-start: var(--sp-7); }
@media (min-width: 480px)  { .stat-band__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .stat-band__grid { grid-template-columns: repeat(4, 1fr); } }
.stat-band__item { display: grid; gap: var(--sp-3); align-content: start; }
.stat-band__figure { font-family: var(--font-display); font-size: var(--fs-stat);
  line-height: var(--lh-stat); font-weight: var(--weight-bold);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat-band__label { font-size: var(--fs-small); color: var(--fg-on-dark-muted); max-inline-size: 24ch; }
.stat-band__foot { margin-block-start: var(--sp-8); padding-block-start: var(--sp-5); border-block-start: var(--rule); }
.stat-band__foot .t-meta { color: var(--fg-on-dark-muted); max-inline-size: 78ch; text-transform: none; letter-spacing: 0; }
.stat-band__ref { font-family: var(--font-mono); color: var(--ember); font-size: .75em; vertical-align: super; }

/* Five figures, not four. Two rows of three then two on a laptop reads worse
   than a single band that wraps, so the track is sized rather than counted. */
.stat-band__grid--five { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* --------------------------------------------------------------------------
   by-numbers — the second, separate performance band.

   Deliberately NOT the dark stat band. These are outcome claims about client
   engagements, the headline five are facts about the firm, and rendering them
   in the same device would invite the reader to give both the same weight.
   Lighter ground, qualifier under every figure, and the two figures still
   waiting on a measurement period carry a visible reference mark.
   ----------------------------------------------------------------------- */
.by-numbers__grid {
  display: grid; gap: var(--sp-6) var(--sp-5); margin-block-start: var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.by-numbers__item {
  display: grid; gap: var(--sp-2); align-content: start;
  padding-block-start: var(--sp-4); border-block-start: 2px solid var(--ember);
}
.by-numbers__figure {
  font-family: var(--font-display); font-size: var(--fs-h2);
  font-weight: var(--weight-bold); line-height: 1; font-variant-numeric: tabular-nums;
  unicode-bidi: isolate; direction: ltr;
}
.by-numbers__label { font-size: var(--fs-small); font-weight: var(--weight-semi); }
.by-numbers__qualifier { font-size: var(--fs-small); color: var(--fg-muted); max-inline-size: 26ch; }
.by-numbers__foot { margin-block-start: var(--sp-7); padding-block-start: var(--sp-5); border-block-start: var(--rule); }
.by-numbers__foot .t-meta { text-transform: none; letter-spacing: 0; color: var(--fg-muted); max-inline-size: 78ch; }

/* --------------------------------------------------------------------------
   criteria-list — the scored-line list. Two columns on desktop.
   ----------------------------------------------------------------------- */
.criteria { margin-block-start: var(--sp-6); }
.criteria .scored__label { font-size: var(--fs-small); }
.criteria .scored { padding-block: var(--sp-3); gap: var(--sp-2) var(--sp-4); }
.criteria .scored__track { block-size: 5px; margin-block-start: var(--sp-1); }
.criteria .scored__track::before, .criteria .scored__fill { inset-block-start: 2px; }
.criteria .scored__mark { inline-size: 5px; block-size: 5px; margin-inline-start: -2.5px; }

/* --------------------------------------------------------------------------
   process-stepper — horizontal on desktop, vertical rule on mobile.
   ----------------------------------------------------------------------- */
.stepper { display: grid; gap: 0; margin-block-start: var(--sp-7); }
@media (min-width: 1024px) {
  .stepper { grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-6); }
}
.stepper__step {
  position: relative;
  padding-block: var(--sp-5);
  padding-inline-start: var(--sp-6);
  border-inline-start: 1px solid var(--border);
}
@media (min-width: 1024px) {
  .stepper__step {
    padding-inline-start: 0;
    padding-block-start: var(--sp-6);
    border-inline-start: 0;
    border-block-start: 1px solid var(--border);
  }
}
.stepper__step::before {
  content: "";
  position: absolute;
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--slate);
  inset-inline-start: -4px; inset-block-start: var(--sp-6);
}
@media (min-width: 1024px) {
  .stepper__step::before { inset-inline-start: 0; inset-block-start: -4px; }
}
.stepper__step:first-child::before { background: var(--ember); }
.stepper__n { font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.stepper__name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-display); margin-block-start: var(--sp-2); }
.stepper__duration { font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ember-deep); margin-block-start: var(--sp-2); }
.stepper__body { font-size: var(--fs-small); color: var(--fg-muted); margin-block-start: var(--sp-3); max-inline-size: 44ch; }

/* --------------------------------------------------------------------------
   coverage-map — one SVG Gulf map, six markets as links. Slate fills, ember
   for the active market. Replaces six flag cards and ~1,200 words of filler.
   The map is NOT mirrored under RTL — geography is not direction.
   ----------------------------------------------------------------------- */
.coverage { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 900px) { .coverage { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-9); } }
.coverage__map { direction: ltr; }
.coverage__map svg { inline-size: 100%; block-size: auto; }
.coverage__country {
  fill: var(--seq-2); stroke: var(--bg); stroke-width: 1.5;
  transition: fill var(--dur-hover) var(--ease-out);
  cursor: pointer;
}
.coverage__country:hover, .coverage__country[data-active] { fill: var(--slate); }
.coverage__country[data-hq] { fill: var(--ember); }
.coverage__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; fill: var(--fg-muted); pointer-events: none;
  /* Centred, so one set of coordinates serves both scripts. */
  text-anchor: middle; }
/* Arabic is never uppercased or letter-spaced, and it needs a little more size
   to stay legible at map scale. */
[lang="ar"] .coverage__label { font-family: var(--font-arabic); font-size: 11px;
  letter-spacing: 0; text-transform: none; }
@media (min-width: 768px) {
  /* The name column sizes to its CONTENT, not to a `ch` cap. A 10ch cap fits
     "Saudi Arabia" and forces "المملكة العربية السعودية" onto three lines —
     `ch` is measured from the "0" glyph and means nothing useful in Arabic.
     The description takes whatever is left. */
  .coverage__list .index__row { grid-template-columns: 4.5rem minmax(5rem, 12rem) minmax(0, 1fr) auto; }
}
.coverage__list .index__title { text-wrap: balance; }
.coverage__list .index__title { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }

/* logo-wall was the seven-logo placeholder for _data/partners.json. Both are
   gone: the 2026 profile supplies 104 real, categorised clients and they are
   rendered by .client-wall / .client-names further down this file. Leaving a
   second, dead wall implementation behind is how two of them end up on one
   page. */

/* --------------------------------------------------------------------------
   cta-band
   ----------------------------------------------------------------------- */
.cta-band { padding-block: var(--sp-9); }
.cta-band__inner { display: grid; gap: var(--sp-7); }
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: minmax(0,1fr) auto; gap: var(--sp-9); align-items: center; } }
.cta-band__heading { margin-block-start: var(--sp-3); max-inline-size: 20ch; }
.cta-band__lead { margin-block-start: var(--sp-4); max-inline-size: 52ch; }
.cta-band__actions { display: grid; gap: var(--sp-4); justify-items: start; }
.cta-band__phone {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
  color: var(--fg-on-dark); text-decoration: none; min-block-size: var(--tap);
}
.cta-band__phone svg { inline-size: 18px; block-size: 18px; color: var(--fg-on-dark-muted); }

/* --------------------------------------------------------------------------
   article-body — 68ch measure, sticky ToC in the margin, figures run wider.
   ----------------------------------------------------------------------- */
.article__layout { align-items: start; }
.article__toc { grid-column: 1 / 3; }
@media (min-width: 1024px) {
  .article__toc { position: sticky; inset-block-start: calc(var(--header-h-condensed) + var(--sp-5)); }
}
.article__body { grid-column: 3 / 10; }
.article__toc-title { font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted);
  padding-block-end: var(--sp-3); border-block-end: var(--rule); }
.article__toc ol { list-style: none; padding: 0; margin-block-start: var(--sp-3); display: grid; gap: var(--sp-1); }
.article__toc a {
  display: block; padding-block: var(--sp-2);
  font-size: var(--fs-small); color: var(--fg-muted); text-decoration: none;
  border-inline-start: 2px solid transparent; padding-inline-start: var(--sp-3);
  margin-inline-start: calc(var(--sp-3) * -1);
  transition: color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .article__toc a:hover { color: var(--fg); } }
.article__toc a[aria-current="true"] { color: var(--fg); border-inline-start-color: var(--ember); }

/* Reading progress — a fixed 2px line driven by transform, never width. */
.reading-progress {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: calc(var(--z-header) + 1);
  block-size: 2px; pointer-events: none;
}
.reading-progress__fill {
  block-size: 100%; background: var(--ember);
  transform-origin: left center; transform: scaleX(var(--progress, 0));
  will-change: transform;
}
[dir="rtl"] .reading-progress__fill { transform-origin: right center; }

.article__figure { margin-inline: calc(var(--sp-6) * -1); margin-block: var(--sp-8); }
@media (max-width: 767px) { .article__figure { margin-inline: 0; } }

.article__share { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.article__end { margin-block-start: var(--sp-9); padding-block-start: var(--sp-7); border-block-start: var(--rule-strong); }
.article__prevnext { display: grid; gap: var(--sp-5); margin-block-start: var(--sp-7); }
@media (min-width: 768px) { .article__prevnext { grid-template-columns: 1fr 1fr; } }
.article__prevnext a { display: grid; gap: var(--sp-2); padding: var(--sp-5); border: var(--rule);
  border-radius: var(--r-card); text-decoration: none; color: inherit;
  transition: border-color var(--dur-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .article__prevnext a:hover { border-color: var(--fg); } }
.article__prevnext--next { text-align: end; }

/* --------------------------------------------------------------------------
   sticky-quote — mobile only, after 40% scroll, on service and industry pages.
   ----------------------------------------------------------------------- */
.sticky-quote {
  position: fixed; inset-block-end: 0; inset-inline: 0;
  z-index: var(--z-sticky);
  background: var(--surface);
  border-block-start: var(--rule-strong);
  padding: var(--sp-3) var(--sp-4);
  transform: translateY(100%);
  transition: transform var(--dur-panel) var(--ease-out);
  display: flex; gap: var(--sp-4); align-items: center; justify-content: space-between;
}
.sticky-quote[data-visible] { transform: translateY(0); }
@media (min-width: 768px) { .sticky-quote { display: none; } }
.sticky-quote__label { font-size: var(--fs-small); font-weight: var(--weight-semi); }

/* --------------------------------------------------------------------------
   card media fallback — a typographic composition where no real photograph
   exists. A blank, well-set panel beats a bad stock photo.
   ----------------------------------------------------------------------- */
.card__media-fallback {
  display: grid; place-content: center;
  block-size: 100%; inline-size: 100%;
  background:
    repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 100%) 0 0 / 24px 100%,
    var(--mist);
}
.card__media-code {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--fg-muted);
  background: var(--mist); padding-inline: var(--sp-3); padding-block: var(--sp-1);
}

/* --------------------------------------------------------------------------
   Two-column editorial running text with a pull quote.
   ----------------------------------------------------------------------- */
.editorial-2col { column-gap: var(--sp-8); }
@media (min-width: 1024px) { .editorial-2col { columns: 2; max-inline-size: none; } }
.editorial-2col > * { break-inside: avoid-column; }

/* --------------------------------------------------------------------------
   The one parallax instance permitted on this site. 8% displacement, disabled
   under reduced motion and on touch. If in doubt it is omitted entirely.
   ----------------------------------------------------------------------- */
.parallax { overflow: hidden; }
.parallax__inner { will-change: transform; }
@media (prefers-reduced-motion: reduce), (hover: none) {
  .parallax__inner { transform: none !important; }
}

/* --------------------------------------------------------------------------
   Homepage-specific compositions.
   ----------------------------------------------------------------------- */
.proof { display: grid; gap: var(--sp-7); }
@media (min-width: 900px) { .proof { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sp-9); align-items: start; } }
.proof__heading { margin-block-start: var(--sp-3); max-inline-size: 18ch; }
.proof__lead .t-lead { margin-block-start: var(--sp-4); }

/* Industry index runs two-up from 480px — 14 rows in one column is a long scroll
   on a phone and the rows are short enough to pair. */
@media (min-width: 480px) and (max-width: 1023px) {
  /* Sector names are one or two short words and pair up cleanly even at 360px.
     Service names do not — see the note above. */
  .industry-index { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-4); }
  .industry-index .index__row:nth-child(2) { border-block-start: 0; }
  .industry-index .index__arrow { display: none; }
}

/* --------------------------------------------------------------------------
   Service template blocks.
   ----------------------------------------------------------------------- */
.service-lines {
  display: grid; gap: 0;
  border-block-start: var(--rule-strong);
}
@media (min-width: 640px)  { .service-lines { grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); } }
@media (min-width: 1024px) { .service-lines { grid-template-columns: repeat(2, 1fr); } }
.service-lines__item {
  display: grid; grid-template-columns: 3rem minmax(0,1fr); gap: var(--sp-3);
  align-items: baseline;
  padding-block: var(--sp-4);
  border-block-end: var(--rule);
}
.service-lines__n {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.service-lines__name { font-size: var(--fs-body); font-weight: var(--weight-medium); }

.deliverables { align-items: start; }
.deliverables__body { grid-column: 3 / 8; }
.deliverables__figure { grid-column: 8 / -1; margin: 0; }
@media (max-width: 1023px) { .deliverables__figure { margin-block-start: var(--sp-7); } }
.deliverables__list { margin-block-start: var(--sp-6); display: grid; gap: 0; border-block-start: var(--rule); }
.deliverables__list li {
  display: grid; grid-template-columns: 20px minmax(0,1fr); gap: var(--sp-3);
  align-items: start; padding-block: var(--sp-4); border-block-end: var(--rule);
  font-size: var(--fs-small);
}
.deliverables__list svg { inline-size: 14px; block-size: 14px; color: var(--good); margin-block-start: 4px; }

/* A redacted figure of the real instrument. Structure, never a client's data. */
.report-sample {
  border: var(--rule-strong);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
}
.report-sample__head {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-block-end: var(--rule-strong);
  background: var(--surface-sunk);
}
.report-sample__body { padding: var(--sp-3) var(--sp-5) var(--sp-5); }
.report-sample__body .scored { padding-block: var(--sp-3); }
.report-sample__body .scored + .scored { border-block-start: var(--rule); }

.lead-form { max-inline-size: 640px; }
.lead-form .field { max-inline-size: 100%; }

/* --------------------------------------------------------------------------
   Industry template blocks.
   ----------------------------------------------------------------------- */
.scenarios { display: grid; gap: 0; border-block-start: var(--rule-strong); }
@media (min-width: 1024px) { .scenarios { grid-template-columns: repeat(3, 1fr); column-gap: var(--sp-7); } }
.scenario {
  display: grid; grid-template-columns: 3rem minmax(0,1fr); gap: var(--sp-3);
  padding-block: var(--sp-5); border-block-end: var(--rule); align-items: start;
}
@media (min-width: 1024px) { .scenarios > .scenario:nth-child(-n+3) { border-block-start: 0; } }
.scenario__n { font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); color: var(--fg-muted); font-variant-numeric: tabular-nums;
  padding-block-start: 4px; }
.scenario__name { font-size: var(--fs-h3); }
.scenario__body { margin-block-start: var(--sp-3); font-size: var(--fs-small); color: var(--fg-muted); }

.scorecard-block { align-items: start; }
.scorecard-block__body { grid-column: 3 / 7; }
.scorecard-block__figure { grid-column: 7 / -1; margin: 0; }
@media (max-width: 1023px) { .scorecard-block__figure { margin-block-start: var(--sp-7); } }

/* --------------------------------------------------------------------------
   Country template blocks.
   ----------------------------------------------------------------------- */
.cities { display: grid; gap: 0; border-block-start: var(--rule-strong); }
@media (min-width: 768px) { .cities { grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); } }
.city {
  display: grid; grid-template-columns: 3rem minmax(0,1fr);
  gap: var(--sp-2) var(--sp-3); align-items: baseline;
  padding-block: var(--sp-4); border-block-end: var(--rule);
}
.city__n { font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.city__name { font-size: var(--fs-h3); font-family: var(--font-display);
  font-weight: var(--weight-semi); letter-spacing: var(--tracking-display); }
.city__note { grid-column: 2; font-size: var(--fs-small); color: var(--fg-muted); }

.market-facts { display: grid; gap: 0; border-block-start: var(--rule-strong); margin-block-start: var(--sp-6); }
.market-fact {
  display: grid; gap: var(--sp-2);
  padding-block: var(--sp-5); border-block-end: var(--rule);
}
@media (min-width: 768px) { .market-fact { grid-template-columns: 14rem minmax(0,1fr); gap: var(--sp-6); align-items: baseline; } }
.market-fact__label { font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); }
.market-fact__value { font-size: var(--fs-body); max-inline-size: 60ch; }

.shopper-steps { display: grid; gap: 0; border-block-start: var(--rule-strong); margin-block-start: var(--sp-6); }
.shopper-step {
  display: grid; grid-template-columns: 3rem minmax(0,1fr); gap: var(--sp-2) var(--sp-4);
  padding-block: var(--sp-5); border-block-end: var(--rule);
}
.shopper-step__n { font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); color: var(--fg-muted); font-variant-numeric: tabular-nums;
  padding-block-start: 5px; }
.shopper-step__name { font-size: var(--fs-h3); }
.shopper-step__body { grid-column: 2; font-size: var(--fs-small); color: var(--fg-muted); max-inline-size: 62ch; }

.warnings { display: grid; gap: var(--sp-4); margin-block-start: var(--sp-6); }
.warning-item {
  display: grid; grid-template-columns: 20px minmax(0,1fr); gap: var(--sp-3);
  align-items: start; font-size: var(--fs-body);
  padding-inline-start: var(--sp-5); border-inline-start: 2px solid var(--warning);
  max-inline-size: 68ch;
}
.warning-item svg { inline-size: 16px; block-size: 16px; color: var(--warning); margin-block-start: 5px; }

.service-index__sectors {
  display: block; margin-block-start: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   Article header and byline.
   ----------------------------------------------------------------------- */
.article__header .badge { margin-block-end: var(--sp-4); text-decoration: none; }
.article__byline {
  margin-block-start: var(--sp-7);
  padding-block-start: var(--sp-5);
  border-block-start: var(--rule);
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); align-items: center;
}
.article__byline-text { display: grid; gap: var(--sp-1); justify-items: start; }
.article__byline-meta { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-inline-start: auto; }
.article-prose h2 { scroll-margin-block-start: calc(var(--header-h-condensed) + var(--sp-6)); }

.article__note {
  margin-block-start: var(--sp-8);
  padding: var(--sp-5);
  border-inline-start: 2px solid var(--border-strong);
  background: var(--surface-sunk);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  display: grid; gap: var(--sp-2);
}
[dir="rtl"] .article__note { border-radius: var(--r-card) 0 0 var(--r-card); }

.article__footer-meta {
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-5);
  border-block-start: var(--rule);
  display: grid; gap: var(--sp-5);
}

/* --------------------------------------------------------------------------
   Blog index — featured composition, toolbar, grid.
   ----------------------------------------------------------------------- */
.featured {
  display: grid; gap: var(--sp-6);
  text-decoration: none; color: inherit;
  align-items: center;
}
@media (min-width: 900px) { .featured { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); } }
.featured__media {
  aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden;
  display: grid; place-content: center;
  background:
    repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 100%) 0 0 / 32px 100%,
    repeating-linear-gradient(0deg, var(--border) 0 1px, transparent 1px 100%) 0 0 / 100% 32px,
    var(--mist);
}
.featured__media--photo { display: block; background: var(--mist); }
.featured__media--photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.featured__code {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--fg-muted); background: var(--mist);
  padding-inline: var(--sp-4); padding-block: var(--sp-2);
}
.featured__title { font-size: var(--fs-h1); line-height: var(--lh-h1); margin-block-start: var(--sp-4); max-inline-size: 20ch; }
.featured__standfirst { margin-block: var(--sp-4) var(--sp-5); }
@media (hover: hover) and (pointer: fine) {
  .featured:hover .featured__title { color: var(--ember-deep); }
  .featured:hover .link-arrow__icon { transform: translateX(4px); }
}

.blog-toolbar { display: grid; gap: var(--sp-5); margin-block-end: var(--sp-6); }
@media (min-width: 900px) { .blog-toolbar { grid-template-columns: minmax(0,1fr) 280px; align-items: start; gap: var(--sp-7); } }
.blog-toolbar__filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.blog-toolbar__search { max-inline-size: 100%; }
.blog-count { padding-block-end: var(--sp-4); border-block-end: var(--rule); margin-block-end: var(--sp-6); }
.blog-grid > [hidden] { display: none; }
.blog-empty { margin-block-start: var(--sp-6); }
.blog-empty__suggest { margin-block-start: var(--sp-4); padding-block-start: var(--sp-4); border-block-start: var(--rule); inline-size: 100%; }
.blog-empty__suggest ul { list-style: none; padding: 0; display: grid; gap: var(--sp-2); margin-block-start: var(--sp-3); text-align: start; }

/* --------------------------------------------------------------------------
   Methodology page.
   ----------------------------------------------------------------------- */
.method-nav { list-style: none; padding: 0; margin-block-start: var(--sp-4); display: grid; gap: var(--sp-1); }
@media (min-width: 1024px) { .method-nav { position: sticky; inset-block-start: calc(var(--header-h-condensed) + var(--sp-5)); } }
.method-nav a {
  display: block; padding-block: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--fg-muted); text-decoration: none;
  transition: color var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .method-nav a:hover { color: var(--ember-deep); } }

.method { display: grid; border-block-start: var(--rule-strong); }
.method__stage {
  padding-block: var(--sp-8);
  border-block-end: var(--rule);
  scroll-margin-block-start: calc(var(--header-h-condensed) + var(--sp-6));
}
.method__head { display: grid; grid-template-columns: 4rem minmax(0,1fr); gap: var(--sp-4); align-items: baseline; }
.method__n { font-family: var(--font-mono); font-size: var(--fs-h3); color: var(--ember-deep);
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.method__name { font-size: var(--fs-h2); }
.method__duration { font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted);
  margin-block-start: var(--sp-2); }
.method__summary { margin-block-start: var(--sp-5); font-size: var(--fs-lead); line-height: var(--lh-lead);
  max-inline-size: 60ch; }
.method__detail { margin-block-start: var(--sp-5); }
@media (min-width: 1024px) { .method__detail { margin-inline-start: calc(4rem + var(--sp-4)); } }

/* --------------------------------------------------------------------------
   Team grid — consistent crop ratio is the whole point.
   ----------------------------------------------------------------------- */
.team-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.team-card { display: grid; gap: var(--sp-2); justify-items: start; }
.team-card__photo {
  aspect-ratio: 4 / 5; inline-size: 100%;
  border-radius: var(--r-card);
  background:
    repeating-linear-gradient(135deg, var(--border) 0 1px, transparent 1px 12px),
    var(--mist);
  display: grid; place-content: center;
  margin-block-end: var(--sp-2);
}

/* --------------------------------------------------------------------------
   Contact — two columns, BOTH doing work. The old right column was ~600px of
   dead space.
   ----------------------------------------------------------------------- */
.contact { display: grid; gap: var(--sp-8); }
@media (min-width: 1024px) { .contact { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-9); align-items: start; } }
.contact__form .form { margin-block-start: var(--sp-6); }
.contact__form .field { max-inline-size: 100%; }
.contact__aside { display: grid; gap: var(--sp-6); }
.contact__card { padding: var(--sp-6); border: var(--rule); border-radius: var(--r-card); background: var(--surface); }
.contact__details { display: grid; gap: var(--sp-4); margin-block-start: var(--sp-5); }
.contact__details li { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: var(--sp-3); align-items: start; font-size: var(--fs-small); }
.contact__details svg { inline-size: 18px; block-size: 18px; color: var(--fg-muted); margin-block-start: 2px; }
.contact__details address { font-style: normal; line-height: 1.6; }
.contact__details a { color: var(--fg); text-decoration: none; border-block-end: 1px solid var(--ember); }

.contact__map { margin: 0; }
.map-placeholder {
  position: relative; display: block; inline-size: 100%;
  aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden;
  border: var(--rule); background: var(--mist);
  cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .map-placeholder:hover { border-color: var(--fg); } }
.map-placeholder__grid {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 100%) 0 0 / 28px 100%,
    repeating-linear-gradient(0deg, var(--border) 0 1px, transparent 1px 100%) 0 0 / 100% 28px;
}
.map-placeholder__pin {
  position: absolute; inset-block-start: 42%; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-content: center;
  inline-size: 40px; block-size: 40px; border-radius: 50%;
  background: var(--ember); color: #fff;
}
[dir="rtl"] .map-placeholder__pin { transform: translate(50%, -50%); }
.map-placeholder__pin svg { inline-size: 22px; block-size: 22px; }
.map-placeholder__label {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  display: grid; gap: var(--sp-1);
  padding: var(--sp-4);
  background: var(--surface);
  border-block-start: var(--rule);
  text-align: start;
}
.contact__map-frame { inline-size: 100%; aspect-ratio: 4 / 3; border: var(--rule); border-radius: var(--r-card); }
.contact__map figcaption {
  margin-block-start: var(--sp-3); font-size: var(--fs-small); color: var(--fg-muted);
}
.contact__routing { padding-block-start: var(--sp-5); border-block-start: var(--rule); }
.contact__routing ul { display: grid; gap: var(--sp-1); margin-block-start: var(--sp-3); }

/* --------------------------------------------------------------------------
   Quote builder — the money page.
   ----------------------------------------------------------------------- */
.hero-page--tight { padding-block: var(--sp-7) var(--sp-6); }

.quote { display: grid; gap: var(--sp-8); }
@media (min-width: 1024px) { .quote { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--sp-9); align-items: start; } }

.quote__progress {
  display: grid; gap: 0; list-style: none; padding: 0;
  margin-block-end: var(--sp-7);
  border-block-start: var(--rule-strong);
}
@media (min-width: 640px) { .quote__progress { grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-5); } }
.quote__progress li {
  padding-block: var(--sp-4);
  border-block-end: var(--rule);
  font-size: var(--fs-small);
  color: var(--fg-muted);
  display: flex; align-items: baseline; gap: var(--sp-3);
}
@media (min-width: 640px) { .quote__progress li { border-block-end: 0; border-block-start: 2px solid transparent; margin-block-start: -1px; } }
.quote__progress-n {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); font-variant-numeric: tabular-nums;
}
.quote__progress li[aria-current="step"] { color: var(--fg); font-weight: var(--weight-semi); }
@media (min-width: 640px) { .quote__progress li[aria-current="step"] { border-block-start-color: var(--ember); } }
.quote__progress li[data-done] { color: var(--fg); }
@media (min-width: 640px) { .quote__progress li[data-done] { border-block-start-color: var(--border-strong); } }

.quote__step[hidden] { display: none; }
.quote__step .field { max-inline-size: 100%; }
.quote__step .field select, .quote__step .field input[type="number"],
.quote__step .field input[type="month"] { max-inline-size: 320px; }
.fieldset + .fieldset { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
.quote__nav {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center;
  margin-block-start: var(--sp-7); padding-block-start: var(--sp-5);
  border-block-start: var(--rule);
}

.quote__rail-inner {
  padding: var(--sp-6);
  border: var(--rule); border-radius: var(--r-card);
  background: var(--surface);
}
@media (min-width: 1024px) {
  .quote__rail-inner { position: sticky; inset-block-start: calc(var(--header-h-condensed) + var(--sp-5)); }
}
.quote__reassurance { display: grid; gap: var(--sp-5); list-style: none; padding: 0; }
.quote__reassurance li { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: var(--sp-3); align-items: start; }
.quote__reassurance svg { inline-size: 16px; block-size: 16px; color: var(--good); margin-block-start: 4px; }
.quote__reassurance strong { display: block; font-size: var(--fs-small); margin-block-end: var(--sp-2); }
.quote__reassurance .t-small { color: var(--fg-muted); }
.quote__call { margin-block-start: var(--sp-5); padding-block-start: var(--sp-4); border-block-start: var(--rule); color: var(--fg-muted); }

/* --------------------------------------------------------------------------
   Careers.
   ----------------------------------------------------------------------- */
.why-point { display: grid; gap: var(--sp-3); align-content: start;
  padding-block-start: var(--sp-5); border-block-start: 2px solid var(--border-strong); }
.why-point:first-child { border-block-start-color: var(--ember); }
.why-point__n { font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.why-point__title { font-size: var(--fs-h3); }
.why-point__body { font-size: var(--fs-small); color: var(--fg-muted); }
.job-row__meta { display: block; margin-block-start: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); }

.job-list { display: grid; gap: 0; border-block-start: var(--rule-strong); margin-block-start: var(--sp-6); }
.job-list li { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: var(--sp-3);
  align-items: start; padding-block: var(--sp-4); border-block-end: var(--rule); font-size: var(--fs-body); }
.job-list svg { inline-size: 14px; block-size: 14px; color: var(--slate); margin-block-start: 6px; }

/* --------------------------------------------------------------------------
   Case studies — the card leads with the RESULT, client beneath as proof.
   ----------------------------------------------------------------------- */
.case-card { align-content: start; }
.case-card__result {
  font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: var(--weight-semi); letter-spacing: var(--tracking-display);
  line-height: 1.25;
}
.case-card__client { font-size: var(--fs-small); color: var(--fg-muted); }
@media (min-width: 640px) { .intake-field--wide { grid-column: 1 / -1; } }

/* --------------------------------------------------------------------------
   Legal documents — long-form treatment, 65ch measure, numbered sections.
   ----------------------------------------------------------------------- */
.legal-doc__section { padding-block-end: var(--sp-7); scroll-margin-block-start: calc(var(--header-h-condensed) + var(--sp-6)); }
.legal-doc__section + .legal-doc__section { padding-block-start: var(--sp-7); border-block-start: var(--rule); }
.legal-doc h2 { margin-block-start: 0; display: flex; gap: var(--sp-3); align-items: baseline; }
.legal-doc__n { font-family: var(--font-mono); font-size: var(--fs-body); color: var(--ember-deep); font-variant-numeric: tabular-nums; }
.legal-doc__needs { font-size: var(--fs-small); color: var(--fg-muted); border-inline-start: 2px solid var(--border-strong);
  padding-inline-start: var(--sp-4); }

.search-group + .search-group { margin-block-start: var(--sp-8); }
.search-group__title { padding-block-end: var(--sp-3); }

.thanks-next {
  margin-block-start: var(--sp-7);
  padding: var(--sp-6);
  border: var(--rule); border-radius: var(--r-card);
  background: var(--surface);
  max-inline-size: 62ch;
}

/* ==========================================================================
   MOBILE IS DESIGNED, NOT DERIVED.

   A collapsed desktop layout is the failure state. The first build of this
   homepage came out at 13,962px at 390px — worse than the 12,969px site it
   replaces — because every desktop section simply stacked. The rules below are
   deliberate small-screen decisions, not adaptations.
   ========================================================================== */
@media (max-width: 639px) {

  /* 1. The sector index drops its description. Twelve sectors with a line
        of explanation each is 1,700px of scroll for information a phone user
        is scanning, not reading. Name + code is the scannable form; the
        description is one tap away on the sector page itself. */
  .industry-index .index__desc { display: none; }
  .industry-index .index__row { padding-block: var(--sp-3); }

  /* 2. Article cards lose their typographic placeholder. Three 16:10 thumbnails
        is ~1,400px for images that carry no information. The headline and
        standfirst are the content. A real featured photo is kept. */
  .article-card .card__media:has(.card__media-fallback) { display: none; }
  .article-card { padding: var(--sp-4) 0; border: 0; border-block-end: var(--rule);
    border-radius: 0; gap: var(--sp-2); }
  .cols-3 { gap: 0; }

  /* 3. The featured article's decorative panel goes too (a real photo stays). */
  .featured__media:not(.featured__media--photo) { display: none; }

  /* 4. Index rows tighten and re-flow: the mono code sits ABOVE the title
        rather than beside it, which is the same decision the marginalia makes
        elsewhere on mobile. The arrow stays on the inline end. */
  .index__row {
    padding-block: var(--sp-4); gap: var(--sp-1) var(--sp-3);
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .index__code { grid-column: 1; grid-row: 1; }
  .index__title { grid-column: 1; grid-row: 2; font-size: var(--fs-body); }
  .index__desc { grid-column: 1; grid-row: 3; }
  .index__arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

  /* 5. Section rhythm tightens for dense index sections specifically. The
        manifesto sections keep their air — this is variation, not compression. */
  .section { padding-block: var(--sp-7); }
  .section--tight { padding-block: var(--sp-6); }

  /* 6. The stat band's four figures go 2-up rather than stacking. */
  .stat-band__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-4); }
  .stat-band { padding-block: var(--sp-8); }

  /* 7. Criteria lists tighten — these are checklists being scanned. */
  .criteria .scored { padding-block: var(--sp-2); }

  /* 8. The stepper's per-step body is the detail; on a phone the name and the
        duration carry the point and the body is halved in leading. */
  .stepper__step { padding-block: var(--sp-4); }
  .stepper__body { margin-block-start: var(--sp-2); }

  /* 9. Cities, service lines and scenarios all tighten by one step. */
  .city, .service-lines__item, .scenario, .shopper-step { padding-block: var(--sp-3); }

  /* 10. The footer's five columns are a lot of scroll at the very bottom. Keep
         Company and Get started open; the three taxonomy columns collapse to a
         two-column list at small type, which is how people actually use them. */
  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-4); }
  .site-footer__col a { padding-block: var(--sp-1); min-block-size: 28px; font-size: var(--fs-small); }
  .site-footer { padding-block-start: var(--sp-8); }
  .site-footer__top { gap: var(--sp-7); padding-block-end: var(--sp-6); }
}

/* Between 480 and 639 the industry index pairs up — the rows are short enough
   without their descriptions. */
@media (min-width: 360px) and (max-width: 1023px) {
  /* Sector names are one or two short words and pair up cleanly even at 360px.
     Service names do not — see the note above. */
  .industry-index { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-4); }
  .industry-index .index__row:nth-child(2) { border-block-start: 0; }
  .industry-index .index__arrow { display: none; }
}

@media (max-width: 639px) {
  /* 11. The Gulf map is a 4:3 SVG that renders about 300px tall on a phone and
         carries no information the market list beneath it does not. It is a
         desktop orientation device; on a phone the list IS the map. */
  .coverage__map { display: none; }
  .coverage { gap: 0; }

  /* 12. Hero: actions sit inline (they fit at 390px), the metadata note wraps
         to two lines rather than four, and the display size steps down so a
         three-line h1 does not eat the first screen on its own. */
  .hero { padding-block: var(--sp-6) var(--sp-7); }
  .hero__actions { gap: var(--sp-3); margin-block-start: var(--sp-5); }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__note { margin-block-start: var(--sp-5); padding-block-start: var(--sp-4); gap: var(--sp-2) var(--sp-4); }
  .hero__lead { margin-block-start: var(--sp-4); }

  /* 13. Section openers keep their lead — it is content — but lose a step of
         space above and below it. */
  .section-opener { margin-block-end: var(--sp-5); }
  .section-opener__lead { margin-block-start: var(--sp-3); }

  /* 14. The closing CTA band tightens; it is one headline and one button. */
  .cta-band { padding-block: var(--sp-7); }
  .cta-band__inner { gap: var(--sp-5); }
  .cta-band__lead { margin-block-start: var(--sp-3); }
  .cta-band__actions { gap: var(--sp-3); }

  /* 15. The stat band's footnote is the honest part and stays, but the block
         above it tightens. */
  .stat-band__grid { margin-block-start: var(--sp-5); }
  .stat-band__foot { margin-block-start: var(--sp-6); padding-block-start: var(--sp-4); }

  /* 16. Prose and needs-input blocks tighten by one step. */
  .needs-input--block { padding: var(--sp-4); gap: var(--sp-2); }
  .prose > * + * { margin-block-start: var(--sp-4); }

  /* 17. The footer brand block: the address and the blurb both stay, but the
         social row and the spacing tighten. */
  .site-footer__blurb { margin-block-start: var(--sp-3); }
  .site-footer__address { margin-block-start: var(--sp-4); }
  .site-footer__contact { margin-block-start: var(--sp-4); }
  .site-footer__social { margin-block-start: var(--sp-4); }
  .site-footer__bottom { padding-block: var(--sp-4); gap: var(--sp-3); }
}

@media (max-width: 639px) {
  /* 18. The service index goes two-up and name-only, exactly like the sector
         index. Eight service names are self-describing — "Customer Satisfaction
         Surveys" needs no gloss — and the Measurement / Improvement group
         headings carry the one distinction that is not obvious from a name. */
  .page-home .index .index__desc { display: none; }
  .page-home .index .index__row { padding-block: var(--sp-3); }
  /* Service names do NOT go two-up: "Customer Satisfaction Surveys" does not
     fit in a 167px column at h3 size. Sector names are single words and do.
     This is the difference between designing the small screen and deriving it. */

  /* 19. The stepper is a list on a phone, not four stacked blocks: the step
         name and its duration share a line and the body sits beneath at small
         size. The vertical rule survives — it is what keeps the documentary
         feel that a plain list would lose. */
  .stepper__step { padding-block: var(--sp-3); padding-inline-start: var(--sp-5); }
  .stepper__step::before { inset-block-start: var(--sp-4); }
  .stepper__n { display: none; }
  .stepper__name { display: inline; font-size: var(--fs-body); }
  .stepper__duration { display: inline; margin-inline-start: var(--sp-3); margin-block-start: 0; }
  .stepper__body { font-size: var(--fs-small); margin-block-start: var(--sp-2); }

  /* 20. Coverage list: market name and lead time, two-up. */
  .coverage__list .index__desc { font-size: var(--fs-label); }
  .coverage__list .index__row { padding-block: var(--sp-3); }

  /* 21. Insights: three headlines, no excerpt. The headline is the hook and the
         standfirst is a second copy of it at this size. */
  .page-home .article-card .card__excerpt { display: none; }
  .page-home .article-card .card__title { font-size: var(--fs-body); }

  /* 22. The footer's brand blurb duplicates the hero's lead. The address stays
         — this is a local business and the address is the useful part. */
  .site-footer__blurb { display: none; }
}

@media (max-width: 639px) {
  /* 23. Index sections drop their section-opener lead. Where a list of six
         services follows immediately, a paragraph explaining that there are
         six services is a second copy of the same information. The manifesto
         sections — proof, how it works, coverage — keep theirs, because there
         the lead IS the content. */
  .page-home .section-opener--index .section-opener__lead { display: none; }
}

.blog-pagination { margin-block-start: var(--sp-8); padding-block-start: var(--sp-6); border-block-start: var(--rule); }
.blog-toolbar__filters .chip { text-decoration: none; }

/* --------------------------------------------------------------------------
   pillars / edge / mission-vision / values — the 2026 profile blocks.

   Three lists of paired strings that must not read as three identical grids.
   Pillars are a numbered sequence with a leading rule; the edge is a matrix
   with the index in the margin; values are one dense row. Same tokens, three
   compositions — which is the rule the rest of this site already follows.
   ----------------------------------------------------------------------- */
.pillars__intro { max-inline-size: 62ch; }
.pillars__list {
  list-style: none; padding: 0; margin-block-start: var(--sp-7);
  display: grid; gap: var(--sp-6);
}
@media (min-width: 700px)  { .pillars__list { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7) var(--sp-6); } }
@media (min-width: 1000px) { .pillars__list { grid-template-columns: repeat(4, 1fr); } }
.pillars__item {
  display: grid; gap: var(--sp-2); align-content: start;
  padding-block-start: var(--sp-4); border-block-start: 2px solid var(--ember);
}
/* .pillars__n is retired — the ordinal is now .visually-hidden and the tile
   below marks the item. The rule is kept out rather than left dead. */
.pillars__icon { margin-block-end: var(--sp-1); }
.pillars__name { font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: var(--weight-semi); line-height: var(--lh-heading); }
.pillars__body { font-size: var(--fs-small); color: var(--fg-muted); margin-block-start: var(--sp-1); }
.pillars__link { margin-block-start: var(--sp-2); color: var(--fg-muted); }
.pillars__closing {
  margin-block-start: var(--sp-7); padding-block-start: var(--sp-5);
  border-block-start: var(--rule);
  font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: var(--weight-semi); line-height: var(--lh-heading); max-inline-size: 46ch;
}

.edge { display: grid; gap: 0; margin-block-start: var(--sp-7); border-block-start: var(--rule); }
@media (min-width: 760px) { .edge { grid-template-columns: repeat(2, 1fr); column-gap: var(--sp-8); } }
.edge__item {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4);
  padding-block: var(--sp-5); border-block-end: var(--rule);
  align-items: baseline;
}
/* Takes the cell .edge__n held: column 1, spanning the name and body rows.
   align-self:start so the tile sits level with the heading rather than
   centring itself against a two-line body. */
.edge__icon { grid-row: 1 / 3; align-self: start; }
.edge__name { font-size: var(--fs-body); font-weight: var(--weight-semi); }
.edge__body { grid-column: 2; font-size: var(--fs-small); color: var(--fg-muted); max-inline-size: 46ch; }

.mv { display: grid; gap: var(--sp-7); margin-block-start: var(--sp-6); }
@media (min-width: 820px) { .mv { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); } }
.mv__item { padding-inline-start: var(--sp-5); border-inline-start: 2px solid var(--ember); }
.mv__label { color: var(--fg-muted); }
.mv__text {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-lead); line-height: var(--lh-lead); text-wrap: pretty;
}

.values { list-style: none; padding: 0; margin-block-start: var(--sp-6);
  display: grid; gap: 0; border-block-start: var(--rule); }
@media (min-width: 900px) { .values { grid-template-columns: repeat(5, 1fr); border-block-end: var(--rule); } }
.values__item {
  display: grid; gap: var(--sp-2); align-content: start;
  padding-block: var(--sp-5); border-block-end: var(--rule);
}
@media (min-width: 900px) {
  .values__item { border-block-end: 0; padding-inline-end: var(--sp-5); }
  .values__item + .values__item { border-inline-start: var(--rule); padding-inline-start: var(--sp-5); }
}
.values__code { font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); color: var(--fg-muted); }
.values__name { font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: var(--weight-semi); }
.values__gloss { font-size: var(--fs-small); color: var(--fg-muted); }
.values__note { margin-block-start: var(--sp-5); text-transform: none; letter-spacing: 0;
  color: var(--fg-muted); max-inline-size: 72ch; }

.brand-quote { margin: 0; padding-block: var(--sp-7); }
.brand-quote blockquote { margin: 0; }
.brand-quote p {
  font-family: var(--font-display); font-size: var(--fs-h1);
  font-weight: var(--weight-bold); line-height: var(--lh-heading);
  max-inline-size: 20ch; text-wrap: balance;
}
.brand-quote p::before { content: "“"; color: var(--ember); }
.brand-quote p::after  { content: "”"; color: var(--ember); }

/* --------------------------------------------------------------------------
   client wall / client names — /clients/ and the homepage marquee band.

   Two renderings of the same data. `client-names` is the state the site ships
   in until the logos are cleared in writing: the names set as type, in the
   profile's own categories. It is not a placeholder standing in for the real
   thing — 104 named clients IS the proof, and unlike a logo wall it is
   crawlable, translatable and readable by a screen reader.
   ----------------------------------------------------------------------- */
.client-wall {
  list-style: none; padding: 0; display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); align-items: center;
}
.client-wall__logo {
  display: block; inline-size: 100%; block-size: auto; max-block-size: 48px;
  object-fit: contain;
  /* Greyscale at rest: a wall of full-colour third-party marks fights the page
     and puts four competing accent colours next to --ember. */
  filter: grayscale(1); opacity: .72;
  transition: filter var(--dur-hover) var(--ease-out), opacity var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .client-wall__item:hover .client-wall__logo { filter: grayscale(0); opacity: 1; } }

/* --- marquee — the client carousel ---------------------------------------
   Two rows, opposite directions, CSS only. No JS: a carousel that stops
   working when a script fails is worse than a list.

   The seamless loop is two identical tracks side by side in a flex row, both
   translated by 100% of their OWN width. When the first has travelled fully
   out of view the second is exactly where the first began, so the join is
   invisible and nothing needs measuring. That is why the markup carries a
   duplicate track rather than the CSS faking one.
   ----------------------------------------------------------------------- */
.marquee {
  --marquee-dur: 46s;
  display: grid; gap: var(--sp-5);
  margin-block-start: var(--sp-6);
}

.marquee__row {
  display: flex;
  overflow: hidden;
  /* Fade both edges so items enter and leave rather than being cut off. */
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
  display: flex; flex: 0 0 auto; align-items: center;
  list-style: none; padding: 0; margin: 0;
  gap: var(--sp-6);
  padding-inline-end: var(--sp-6);        /* keeps the gap across the join */
  animation: marquee-x var(--marquee-dur) linear infinite;
  will-change: transform;
}

/* Second row runs the other way. Under RTL every row flips again, so the pair
   stays in counter-motion rather than both ending up the same way round. */
.marquee__row:nth-child(even) .marquee__track { animation-direction: reverse; }
[dir="rtl"] .marquee__track { animation-direction: reverse; }
[dir="rtl"] .marquee__row:nth-child(even) .marquee__track { animation-direction: normal; }

@keyframes marquee-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Pause on hover and on keyboard focus — a name moving away from the cursor is
   the thing people complain about with marquees. focus-within covers tabbing
   into a logo that is also a link, should they ever become links. */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee .client-wall__item { flex: 0 0 auto; display: grid; place-items: center; }
.marquee .client-wall__wordmark {
  font-family: var(--font-display); font-weight: var(--weight-semi);
  font-size: var(--fs-body); white-space: nowrap;
  color: var(--fg); opacity: .72;
  transition: opacity var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .marquee .client-wall__item:hover .client-wall__wordmark { opacity: 1; }
}

/* Reduced motion: a static wrapped grid. The duplicate track is removed
   outright — with nothing moving it is just the same names twice. */
@media (prefers-reduced-motion: reduce) {
  .marquee__row { overflow: visible; mask-image: none; }
  .marquee__track {
    animation: none; flex-wrap: wrap;
    row-gap: var(--sp-4); padding-inline-end: 0;
  }
  .marquee__track[data-marquee-clone] { display: none; }
}

.client-names { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0; }
.client-names__item {
  font-size: var(--fs-small); color: var(--fg);
  padding-inline-end: var(--sp-4); margin-inline-end: var(--sp-4);
  padding-block: var(--sp-1);
  border-inline-end: var(--rule);
}
.client-names__item:last-child { border-inline-end: 0; margin-inline-end: 0; padding-inline-end: 0; }
.client-names--marquee .client-names__item {
  font-family: var(--font-display); font-weight: var(--weight-semi);
  font-size: var(--fs-body);
}

.client-groups { display: grid; gap: var(--sp-7); margin-block-start: var(--sp-6); }
.client-group { padding-block-start: var(--sp-5); border-block-start: var(--rule); }
.client-group[hidden] { display: none; }
.client-group__head { display: flex; align-items: baseline; gap: var(--sp-3); margin-block-end: var(--sp-4); }
.client-group__name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--weight-semi); }
.client-group__count { color: var(--ember); }

.needs-input__list { margin: 0; padding-inline-start: var(--sp-5); display: grid; gap: var(--sp-2); }
.needs-input__list li { font-size: var(--fs-small); }
.needs-input--tight { padding: var(--sp-4); }

/* --------------------------------------------------------------------------
   hub pages — the service and sector layer the 2026 taxonomy added.
   ----------------------------------------------------------------------- */
.hub__tagline {
  margin-block-start: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ember-deep);
}
.hub__outcome {
  font-family: var(--font-display); font-size: var(--fs-h2);
  font-weight: var(--weight-semi); line-height: var(--lh-heading);
  max-inline-size: 30ch; text-wrap: pretty;
}

.capabilities { list-style: none; padding: 0; margin: 0; border-block-start: var(--rule); }
.capability {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3) var(--sp-5);
  align-items: baseline; padding-block: var(--sp-5); border-block-end: var(--rule);
}
.capability__n { font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); color: var(--fg-muted); }
.capability__name {
  font-size: var(--fs-body); font-weight: var(--weight-semi);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.capability__name a { color: inherit; text-decoration: none;
  border-block-end: 1px solid var(--ember); }
.capability__name a:hover { color: var(--ember-deep); }
.capability__desc { color: var(--fg-muted); font-size: var(--fs-small); margin-block-start: var(--sp-2); max-inline-size: 60ch; }
.capability__note { margin-block-start: var(--sp-3); color: var(--fg-muted); max-inline-size: 60ch; }
.capability__arrow { inline-size: 18px; block-size: 18px; color: var(--fg-muted); align-self: center; }
/* A capability whose wording is drafted by us and not yet approved reads as
   provisional at a glance, in the same dashed --warning language the rest of
   the build uses for a fact it will not guess. */
.capability--unapproved { border-inline-start: 2px dashed var(--warning); padding-inline-start: var(--sp-4); }

.badge--new   { background: var(--ember); color: var(--fg-on-dark); border-color: transparent; }
.badge--draft { border: 1px dashed var(--warning); color: var(--warning); background: transparent; }
.hub-up { margin-block-start: var(--sp-3); color: var(--fg-muted); text-transform: none; letter-spacing: 0; max-inline-size: 24ch; }

/* --------------------------------------------------------------------------
   case-feature / case-results — the published case study, on the homepage and
   at the top of its own page. The three figures are the composition; the
   headline is the caption. That is the opposite of how the site this replaces
   presented results, which was a heading reading "Real Results from Mystery
   Shopping" above no numbers at all.
   ----------------------------------------------------------------------- */
.case-feature {
  display: grid; gap: var(--sp-5); text-decoration: none; color: inherit;
  padding: var(--sp-5); border: var(--rule);
  transition: border-color var(--dur-hover) var(--ease-out);
}
@media (min-width: 640px) { .case-feature { gap: var(--sp-6); padding: var(--sp-6); } }
.case-feature:hover { border-color: var(--ember); }
.case-feature__title {
  margin-block-start: var(--sp-3);
  font-family: var(--font-display); font-size: var(--fs-h2);
  font-weight: var(--weight-semi); line-height: var(--lh-heading); max-inline-size: 22ch;
}
/* Three across from 480px. Stacking three three-character figures cost 250px
   of phone scroll to say nothing extra, and the comparison between them is the
   whole point of showing them together.

   Below 480px it goes to one column but stays compact, with the figure and its
   label on the SAME line. Three across does not survive a 320px viewport: the
   card's content column is 233px, so each figure gets about 67px, and
   "satisfaction" is a single unbreakable word wider than that — it pushed the
   page sideways by 54px. Shrinking the figure does not fix it, because the
   figure was never what overflowed. */
.case-results { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.case-results__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-1) var(--sp-4); align-items: baseline;
  padding-block-start: var(--sp-3); border-block-start: 2px solid var(--ember);
}
.case-results__value { font-size: var(--fs-h2); }
.case-results__label { overflow-wrap: anywhere; }

@media (min-width: 480px) {
  .case-results { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
  .case-results__item { grid-template-columns: 1fr; gap: var(--sp-2); padding-block-start: var(--sp-4); }
  .case-results__value { font-size: var(--fs-stat); }
}
@media (min-width: 640px) { .case-results { gap: var(--sp-5); } }
.case-results__value {
  font-family: var(--font-display);
  font-weight: var(--weight-bold); line-height: 1;
  font-variant-numeric: tabular-nums; unicode-bidi: isolate; direction: ltr;
}
.case-results__label { font-size: var(--fs-small); color: var(--fg-muted); }
/* The case-study page's own hero figures. Only larger once there is room —
   below 480px the row layout above governs, and --fs-display there would
   overflow exactly the way three columns did. */
@media (min-width: 480px) { .case-results--large .case-results__value { font-size: var(--fs-display); } }
.case-facts { margin-block-start: var(--sp-7); border-block-start: var(--rule); }
.case-facts__row {
  display: grid; grid-template-columns: minmax(120px, 1fr) 3fr; gap: var(--sp-4);
  padding-block: var(--sp-4); border-block-end: var(--rule);
}
.case-facts dt { font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); }
.case-facts dd { margin: 0; font-size: var(--fs-small); }
.held-case { padding-block: var(--sp-6); border-block-start: var(--rule); }
.held-case__title { margin-block-start: var(--sp-3); font-family: var(--font-display);
  font-size: var(--fs-h3); font-weight: var(--weight-semi); }
.held-case__client { margin-block-start: var(--sp-2); color: var(--fg-muted); font-size: var(--fs-small); }
.held-case__challenge { margin-block-start: var(--sp-4); max-inline-size: 62ch; }

/* A capability or sector page shown directly beneath its hub in the same index.
   Used by the Arabic taxonomy listings, where the two levels share one list
   rather than being separated by a group heading as they are in English. */
.index__row--sub .index__code { color: var(--fg-muted); }
.index__row--sub { padding-inline-start: var(--sp-6); }
.index__row--sub .index__title { font-weight: var(--weight-medium); }


/* --------------------------------------------------------------------------
   Phone-width tightening for the 2026 blocks.

   The homepage gained four sections in this update — the client marquee, the
   four pillars, the published case study and the competitive edge — and each
   of them is a stack of short paired strings, which is the composition that
   costs the most vertical space per word. None is dropped: each does distinct
   routing work and removing one to hit a scroll-height number would trade the
   page's job for a metric. What is trimmed here is the space between them.
   ----------------------------------------------------------------------- */
@media (max-width: 639px) {
  .pillars__list { gap: var(--sp-5); }
  .pillars__item { padding-block-start: var(--sp-3); }
  .pillars__closing { margin-block-start: var(--sp-6); padding-block-start: var(--sp-4); font-size: var(--fs-body); }
  .edge__item { padding-block: var(--sp-4); }
  .values__item { padding-block: var(--sp-4); }
  .by-numbers__grid { gap: var(--sp-5) var(--sp-4); }
  .client-names__item { padding-inline-end: var(--sp-3); margin-inline-end: var(--sp-3); }
}