/* ==========================================================================
   Mind Motion Investments — site stylesheet

   Built from the approved design boards (English and Arabic, desktop 1440 and
   mobile 390). Colour, type and spacing come from tokens.css, which is copied
   verbatim out of the brand kit; nothing here hard-codes a brand hex value.

   Two things shape the structure:

   1. No inline styles anywhere. The Content-Security-Policy sets
      style-src 'self', so every rule lives in a stylesheet and the page gains
      nothing from an injected style attribute.

   2. Logical properties throughout (inline-start, padding-inline, and so on).
      The Arabic page is the same markup with dir="rtl"; writing the layout in
      logical terms means it mirrors correctly without a second stylesheet.
   ========================================================================== */

/* ---------------------------------------------------------------- reset -- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--surface-100);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

/* A visible focus ring is a requirement, not a decoration. The brand kit
   specifies 2px solid at 2px offset, at 3:1 against every surface. */
:focus-visible {
  outline: var(--stroke-rule) solid var(--focus);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* --------------------------------------------------------------- layout -- */

:root {
  /* The gutter and rhythm the design uses, stepped down at each breakpoint
     by the media queries at the foot of this file. */
  --gutter: var(--space-5);
  --section-y: var(--space-8);
  --section-gap: var(--space-6);
  --grid-gap: var(--space-5);
  --measure: 68ch;

  --type-display: 44px;
  --type-display-lh: 48px;
  --type-h2: 30px;
  --type-h2-lh: 36px;
  --type-h3: 22px;
  --type-h3-lh: 28px;
  --type-lede: 18px;
  --type-lede-lh: 30px;
  --type-body: 15px;
  --type-body-lh: 24px;
  --type-small: 13px;
  --type-small-lh: 20px;
  --type-eyebrow: 12px;
  --type-eyebrow-lh: 16px;

  /* Secondary ink on a navy field. The light-theme --ink-600 is far too dark
     there, so the brand kit's dark-theme value is the correct pair. About
     8:1 against surface-inverse. */
  --ink-inverse-muted: #a8b2c0;

  --control-height: 48px;
  /* The floor for anything tappable, per the brand's accessibility notes. */
  --tap-target: 44px;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: -100%;
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--brand-700);
  color: var(--on-brand);
  border-radius: var(--radius-sm);
  font-size: var(--type-body);
  font-weight: 500;
  text-decoration: none;
}

.skip-link:focus {
  inset-block-start: var(--space-4);
}

.shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--surface-100);
}

.section {
  display: flex;
  flex-direction: column;
  /* The space between a section's heading block and its content. Stepped up
     at each breakpoint, and overridden per section to match the boards. */
  gap: var(--section-gap);
  padding: var(--section-y) var(--gutter);
}

.section--about { gap: var(--space-6); }
.section--services { gap: var(--space-6); }
.section--industries { gap: var(--space-6); }

.section--sunken {
  background: var(--surface-300);
}

.section--accent {
  background: var(--accent-100);
}

/* The design's 12-column field. Below the desktop breakpoint every child
   collapses to full width, which is what the mobile board shows. */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
}

.section-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-4);
  align-items: end;
}

.section-head__titles {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.section-head__lede {
  grid-column: 1 / -1;
}

/* ------------------------------------------------------------ typography -- */

.eyebrow {
  font-size: var(--type-eyebrow);
  line-height: var(--type-eyebrow-lh);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-600);
  text-transform: uppercase;
}

.eyebrow--inverse {
  color: var(--ink-600);
}

.display {
  font-family: var(--font-display);
  font-size: var(--type-display);
  line-height: var(--type-display-lh);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--type-h2);
  line-height: var(--type-h2-lh);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}

.h3 {
  font-family: var(--font-display);
  font-size: var(--type-h3);
  line-height: var(--type-h3-lh);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-900);
}

.lede {
  font-size: var(--type-lede);
  line-height: var(--type-lede-lh);
  color: var(--ink-600);
  max-width: var(--measure);
}

.body {
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
  color: var(--ink-600);
}

.small {
  font-size: var(--type-small);
  line-height: var(--type-small-lh);
  color: var(--ink-600);
}

.caption {
  font-size: var(--type-small);
  line-height: var(--type-small-lh);
  color: var(--ink-400);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--type-small);
  line-height: var(--type-small-lh);
  color: var(--ink-600);
}

/* The hero's second line, set in the other language. Arabic needs its own
   face and a little more leading than the Latin text around it. */
.alt-script {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--ink-600);
}

[lang='ar'] .display,
[lang='ar'] .h2,
[lang='ar'] .h3,
.display[lang='ar'],
.h2[lang='ar'],
.h3[lang='ar'] {
  /* Source Serif has no Arabic. Naskh is the brand's Arabic display face. */
  font-family: 'Noto Naskh Arabic', var(--font-display);
  letter-spacing: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------- header -- */

.masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  padding-inline: var(--gutter);
  background: var(--surface-100);
  border-block-end: var(--stroke-hairline) solid var(--hairline);
}

.masthead__logo {
  display: flex;
  align-items: center;
  /* A link, and the largest one in the header: it gets a full tap target. */
  min-height: var(--tap-target);
  padding-block: var(--space-2);
}

.masthead__logo img {
  /* The lockup is set by height; width follows its own aspect ratio. The
     brand kit's minimum for the horizontal lockup is 24px tall. */
  height: 24px;
  width: auto;
}

/* The Arabic lockup carries more vertical detail, so the boards set it a
   little taller than the Latin one at the same optical weight. */
[dir='rtl'] .masthead__logo img {
  height: 30px;
}

.masthead__end {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav__link {
  padding-block: 6px;
  /* A transparent spacer, so the link's height never changes between states.
     The visible underline is drawn by motion.css as a pseudo-element, which
     lets it wipe in from the leading edge rather than simply appear. */
  border-block-end: var(--stroke-rule) solid transparent;
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
  font-weight: 500;
  color: var(--ink-900);
  text-decoration: none;
}

.lang-switch {
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
  font-weight: 500;
  color: var(--ink-900);
  text-decoration: none;
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
}

.lang-switch[lang='ar'] {
  font-family: 'IBM Plex Sans Arabic', var(--font-sans);
}

.menu-toggle {
  display: none;
  width: var(--tap-target);
  height: var(--tap-target);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink-900);
  cursor: pointer;
}

.menu-toggle__close {
  display: none;
}

.menu-toggle[aria-expanded='true'] .menu-toggle__open {
  display: none;
}

.menu-toggle[aria-expanded='true'] .menu-toggle__close {
  display: block;
}

/* --------------------------------------------------------------- button -- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding-inline: var(--space-5);
  border: 0;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.button--primary {
  background: var(--brand-700);
  color: var(--on-brand);
}

.button--primary:hover {
  background: var(--brand-900);
  color: var(--on-brand);
}

.button--secondary {
  background: transparent;
  color: var(--brand-700);
  border: var(--stroke-hairline) solid var(--border-strong);
}

.button--secondary:hover {
  background: var(--brand-100);
}

.button--compact {
  min-height: var(--tap-target);
  padding-inline: var(--space-5);
}

.button[aria-disabled='true'],
.button:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Text link with a trailing arrow, used throughout the design. The arrow is
   mirrored in RTL by the transform below, since it points "onward". */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
  font-weight: 500;
  color: var(--brand-700);
  text-decoration: none;
}

.arrow-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.arrow-link svg {
  flex-shrink: 0;
}

[dir='rtl'] .arrow-link svg {
  transform: scaleX(-1);
}

.arrow-link--inverse {
  color: var(--ink-inverse);
}

/* ----------------------------------------------------------------- hero -- */

/*
   Editorial split. The statement and the Stride share one paper field; the
   seven industries run along its foot as a numbered index. Navy is kept for
   the footer, so the page opens light, and the brass symbol is this view's
   one accent, as the guidelines ask.
*/
.hero {
  /* The Stride's height, and from it the clear space the guidelines require
     around the symbol: one stem width, 0.36 of its height. */
  --mark-height: 72px;
  --mark-clear: calc(var(--mark-height) * 0.36);

  display: flex;
  flex-direction: column;
  gap: max(var(--space-7), var(--mark-clear));
  padding: var(--space-7) var(--gutter) 0;
}

.hero__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-6);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero__title {
  margin-block-start: var(--space-4);
  font-size: clamp(44px, 6vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

/* Naskh needs the room its marks sit in. */
[lang='ar'] .hero__title {
  line-height: 1.3;
  letter-spacing: 0;
}

.hero__title-alt {
  margin-block-start: var(--space-4);
  font-size: 20px;
  line-height: 32px;
  align-self: flex-start;
}

.hero__lede {
  margin-block-start: var(--space-5);
  max-width: 560px;
}

.hero__actions {
  margin-block-start: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-6);
  row-gap: var(--space-3);
}

/*
   The Stride, drawn large. Its size is set by height, as the kit sets every
   lockup, and the space around it is never less than one stem width (0.36 of
   its height), the clear space the guidelines require.
*/
.hero__mark {
  /* Leads on a phone, where it stands in for the navy panel's small mark. */
  order: -1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  margin-block-end: max(0px, calc(var(--mark-clear) - var(--space-6)));
}

.hero__mark img {
  height: var(--mark-height);
  width: auto;
  /* The gutter is the paper between the mark and the page edge; top it up
     where it falls short of the clear space. */
  margin-inline-start: max(0px, calc(var(--mark-clear) - var(--gutter)));
}

/* ---- the industry index along the foot of the hero ---- */

.hero-index {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block-end: var(--space-6);
}

.hero-index__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: var(--stroke-rule) solid var(--ink-900);
}

.hero-index__item {
  border-block-end: var(--stroke-hairline) solid var(--hairline);
}

/* Every other cell on a phone opens with a rule, so the two columns read as a
   table rather than two lists that happen to sit side by side. */
.hero-index__item:nth-child(even) {
  border-inline-start: var(--stroke-hairline) solid var(--hairline);
}

.hero-index__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: var(--tap-target);
  height: 100%;
  padding: var(--space-3);
  color: var(--ink-900);
  text-decoration: none;
}

.hero-index__number {
  font-size: 11px;
  line-height: 16px;
  color: var(--ink-400);
}

.hero-index__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}

[dir='rtl'] .hero-index__name {
  font-family: 'Noto Naskh Arabic', var(--font-display);
}

.hero-index__count {
  font-size: var(--type-small);
  line-height: var(--type-small-lh);
  color: var(--ink-600);
}

.hero-index__link:hover {
  background: var(--surface-200);
}

.hero-index__link:hover .hero-index__name {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* Every eyebrow that sits on the navy field. Left at --ink-600 these would
   fail contrast badly, which is what the accessibility suite caught. */
.newsletter .eyebrow,
.footer-col .eyebrow {
  color: var(--ink-inverse-muted);
}

/* The division marker. Its colour comes from a custom property set by the
   per-industry class below, so no inline style is needed. */
.marker {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  background: var(--marker, var(--accent-600));
}

.marker--lg {
  width: 12px;
  height: 12px;
}

/* One rule per industry, matching the slugs seeded into content_items. */
.i-technology { --marker: var(--division-technology); }
.i-ai { --marker: var(--division-ai); }
.i-media { --marker: var(--division-media); }
.i-marketing { --marker: var(--division-marketing); }
.i-construction { --marker: var(--division-construction); }
.i-real-estate { --marker: var(--division-realestate); }
.i-sports { --marker: var(--division-sports); }

/* --------------------------------------------------------------- glance -- */

/* The group at a glance: a statement and four figures, standing where the
   design's photograph placeholder was. It keeps that band's sunken surface,
   so the rhythm of the page between the hero and About is unchanged. */
.glance {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  padding: var(--section-y) var(--gutter);
  background: var(--surface-300);
  border-block-end: var(--stroke-hairline) solid var(--hairline);
}

.glance__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 920px;
}

.glance__statement {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}

[dir='rtl'] .glance__statement {
  font-family: 'Noto Naskh Arabic', var(--font-display);
  letter-spacing: 0;
}

.glance__figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--grid-gap);
}

/* The label comes first in the markup, so a screen reader hears "Industries
   we invest in: 07". Visually the number leads, as a figure should. */
.glance__figure {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-block-start: var(--space-4);
  border-block-start: var(--stroke-rule) solid var(--ink-900);
}

/* The last two echo the MOTION rule under About: thinking, then moving. */
.glance__figure:nth-child(n + 3) {
  border-block-start-color: var(--brand-700);
}

.glance__figure dd {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 52px;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-900);
}

.glance__figure:nth-child(n + 3) dd {
  color: var(--brand-700);
}

.glance__figure dt {
  font-size: var(--type-small);
  line-height: var(--type-small-lh);
  color: var(--ink-600);
}

/* ---------------------------------------------------------------- about -- */

.about__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--grid-gap);
  row-gap: var(--space-6);
}

/* The MIND / MOTION rules that head the four steps. */
.phase {
  padding-block-start: var(--space-4);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.phase--mind {
  border-block-start: var(--stroke-rule) solid var(--ink-900);
}

.phase--motion {
  border-block-start: var(--stroke-rule) solid var(--brand-700);
}

.phase__label {
  font-size: var(--type-eyebrow);
  line-height: var(--type-eyebrow-lh);
  font-weight: 600;
  letter-spacing: 0.12em;
}

.phase--mind .phase__label {
  color: var(--ink-900);
}

.phase--motion .phase__label {
  color: var(--brand-700);
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-inline-end: var(--space-5);
}

/* ---------------------------------------------------------------- quote -- */

.pullquote {
  /* Full width until the desktop grid indents it to columns 2-10. Without
     this it would land in a single column of the 12-column band and set the
     quote one word per line. */
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.pullquote blockquote {
  font-family: var(--font-display);
  font-size: var(--type-h2);
  line-height: var(--type-h2-lh);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}

[dir='rtl'] .pullquote blockquote {
  font-family: 'Noto Naskh Arabic', var(--font-display);
  letter-spacing: 0;
}

/* ------------------------------------------------------------- services -- */

.services__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--grid-gap);
  row-gap: var(--space-7);
}

.service {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block-start: var(--space-5);
  border-block-start: var(--stroke-hairline) solid var(--hairline);
}

.service__icon {
  color: var(--ink-600);
}

.service .h3 {
  margin-block-start: var(--space-1);
}

/* Pushed to the foot of the card, so the links in a row line up however
   long each description runs. */
.service .request-link {
  margin-block-start: auto;
  align-self: flex-start;
}

.services__footer,
.industries__footer {
  padding-block-start: var(--space-5);
  border-block-start: var(--stroke-hairline) solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.services__footer p,
.industries__footer p {
  font-size: var(--type-lede);
  line-height: var(--type-lede-lh);
  color: var(--ink-900);
}

/* ----------------------------------------------------------- industries -- */

/* A row of the seven industries under the heading, each a jump to its own
   block below. It wraps rather than scrolls, so nothing is hidden. */
.sector-jump__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sector-jump__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  padding-inline: var(--space-4);
  background: var(--surface-200);
  border: var(--stroke-hairline) solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: var(--type-small);
  line-height: var(--type-small-lh);
  font-weight: 500;
  color: var(--ink-900);
  text-decoration: none;
}

.sector-jump__link:hover {
  border-color: var(--border-strong);
}

.sectors {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* One industry and the services it offers. The division colour runs along
   its top edge, the same colour as its marker, so each block is
   recognisable at a glance without leaning on colour to carry the name. */
.sector {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--surface-200);
  border: var(--stroke-hairline) solid var(--hairline);
  border-block-start: var(--stroke-brass) solid var(--marker, var(--accent-600));
}

.sector__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.sector__index {
  color: var(--ink-400);
}

.sector__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sector__request {
  margin-block-start: var(--space-2);
  /* On a phone the label can run to two lines; keep it reading as a
     sentence with the arrow at its end, not a centred block. */
  text-align: start;
}

.sector__request svg {
  flex-shrink: 0;
}

[dir='rtl'] .sector__request svg {
  transform: scaleX(-1);
}

.sector__services {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-5);
}

.offer {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block-start: var(--space-4);
  border-block-start: var(--stroke-hairline) solid var(--hairline);
}

.offer__title {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink-900);
}

[dir='rtl'] .offer__title {
  font-family: 'Noto Naskh Arabic', var(--font-display);
}

.offer .request-link {
  margin-block-start: auto;
  align-self: flex-start;
}

/* -------------------------------------------------------------- contact -- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--grid-gap);
  row-gap: var(--space-7);
  align-items: start;
}

.contact__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact__details {
  margin-block-start: var(--space-5);
  border-block-start: var(--stroke-hairline) solid var(--hairline);
}

.contact__row {
  padding-block: var(--space-4);
  border-block-end: var(--stroke-hairline) solid var(--hairline);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

.contact__row dt {
  font-size: var(--type-small);
  line-height: var(--type-small-lh);
  font-weight: 600;
  color: var(--ink-600);
}

.contact__row dd {
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
  color: var(--ink-900);
}

/* How a request works: three numbered steps under the contact details. */
.request-steps {
  margin-block-start: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.request-steps__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  counter-reset: request-step;
}

.request-steps__list li {
  display: grid;
  grid-template-columns: var(--space-7) minmax(0, 1fr);
  align-items: baseline;
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
  color: var(--ink-900);
  counter-increment: request-step;
}

.request-steps__list li::before {
  content: counter(request-step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--type-small);
  line-height: var(--type-small-lh);
  color: var(--brand-700);
}

/* ----------------------------------------------------------------- form -- */

.form-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--surface-200);
  border: var(--stroke-hairline) solid var(--hairline);
}

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5) var(--space-4);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field--wide {
  grid-column: 1 / -1;
}

.field__label {
  font-size: var(--type-small);
  line-height: var(--type-small-lh);
  font-weight: 500;
  color: var(--ink-900);
}

.field__control {
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  background: var(--surface-200);
  border: var(--stroke-hairline) solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
  color: var(--ink-900);
}

textarea.field__control {
  min-height: 128px;
  padding: var(--space-3);
  resize: vertical;
  font-family: inherit;
}

select.field__control {
  /* Keep the native control, but give it the same box as the text inputs. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-600) 50%),
    linear-gradient(135deg, var(--ink-600) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% + 2px),
    calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: var(--space-7);
}

[dir='rtl'] select.field__control {
  background-position: 18px calc(50% + 2px), 13px calc(50% + 2px);
}

.field__control[aria-invalid='true'] {
  border-color: var(--danger-600);
  border-width: var(--stroke-rule);
}

/* The error text is tied to its input by aria-describedby, and never carries
   meaning by colour alone: it is prefixed by a word in the copy itself. */
.field__error {
  font-size: var(--type-small);
  line-height: var(--type-small-lh);
  color: var(--danger-600);
  font-weight: 500;
}

/* The honeypot. Hidden from people in every mode a real browser reports,
   without display:none, which some bots check for. */
.honeypot {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.form-card__footer .caption {
  flex: 1 1 240px;
}

.notice {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-inline-start: var(--stroke-brass) solid var(--accent-600);
  background: var(--surface-300);
}

.notice__title {
  font-weight: 600;
  color: var(--ink-900);
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
}

.notice--success {
  border-inline-start-color: var(--success-600);
  background: var(--success-100);
}

.notice--error {
  border-inline-start-color: var(--danger-600);
  background: var(--danger-100);
}

/* ----------------------------------------------------------- newsletter -- */

.newsletter {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-block-start: var(--stroke-hairline) solid rgb(242 241 237 / 16%);
}

.newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
}

.newsletter__input {
  flex: 1 1 260px;
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  background: transparent;
  border: var(--stroke-hairline) solid rgb(242 241 237 / 40%);
  border-radius: var(--radius-sm);
  color: var(--ink-inverse);
  font-size: var(--type-body);
}

.newsletter__input::placeholder {
  /* A placeholder still has to be readable; 55% ivory on navy does not clear
     4.5:1, so it uses the same muted ink as the surrounding copy. */
  color: var(--ink-inverse-muted);
}

.newsletter__submit {
  background: var(--accent-600);
  color: #ffffff;
}

.newsletter__submit:hover {
  background: var(--accent-600);
  filter: brightness(1.12);
}

.newsletter .caption,
.newsletter .body {
  color: var(--ink-inverse-muted);
}

.newsletter__title {
  color: var(--ink-inverse);
}

/* --------------------------------------------------------------- footer -- */

.site-footer {
  margin-block-start: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-7) var(--gutter) var(--space-6);
  background: var(--surface-inverse);
  color: var(--ink-inverse);
}

.site-footer__logo {
  align-self: flex-start;
  display: flex;
  padding-block: var(--space-3);
}

.site-footer__logo img {
  height: 24px;
  width: auto;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--grid-gap);
  row-gap: var(--space-6);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer-col address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
  color: var(--ink-inverse);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
  color: var(--ink-inverse);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  /* Comfortably past WCAG 2.2's 24px minimum on desktop, and a full 44px
     target below the desktop breakpoint where these are tapped. */
  min-height: var(--tap-target);
}

.footer-col a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-col a[lang='ar'] {
  font-family: 'IBM Plex Sans Arabic', var(--font-sans);
}

.footer-col__current {
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
  color: var(--ink-inverse);
}

.site-footer__legal {
  padding-block-start: var(--space-5);
  border-block-start: var(--stroke-hairline) solid rgb(242 241 237 / 16%);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.site-footer__legal p {
  font-size: var(--type-small);
  line-height: var(--type-small-lh);
  color: var(--ink-inverse-muted);
}

/* ---------------------------------------------------- standalone pages -- */

/* Used by 404, 500, and the newsletter confirmation landings. */
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-9) var(--gutter);
  max-width: 720px;
}

/* ---------------------------------------------------------------- print -- */

@media print {
  .masthead,
  .menu-toggle,
  .form-card,
  .newsletter,
  .skip-link {
    display: none !important;
  }

  body {
    background: #ffffff;
  }

  .site-footer {
    background: #ffffff;
    color: #000000;
  }

  .request-link,
  .sector__request,
  .sector-jump {
    display: none !important;
  }
}

/* ---------------------------------------------------------- breakpoints -- */

/* Tablet and up: the grid starts doing real work. */
@media (min-width: 40rem) {
  :root {
    --gutter: var(--space-6);
    --section-y: 72px;
    --section-gap: var(--space-7);
    --type-display: 48px;
    --type-display-lh: 54px;
    --type-h2: 34px;
    --type-h2-lh: 40px;
  }

  .hero {
    --mark-height: 96px;
    padding-block-start: var(--space-8);
  }

  .hero-index__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Four to a row: a rule opens every cell but the first in each row. */
  .hero-index__item:nth-child(even) {
    border-inline-start: 0;
  }

  .hero-index__item:not(:nth-child(4n + 1)) {
    border-inline-start: var(--stroke-hairline) solid var(--hairline);
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact__row {
    grid-template-columns: 140px minmax(0, 1fr);
    gap: var(--space-4);
  }

  .services__grid,
  .sector__services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .glance__statement {
    font-size: 30px;
    line-height: 40px;
  }

  .about__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .phase {
    grid-column: span 1;
  }

  .site-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop: the 1440 board's proportions. */
@media (min-width: 60rem) {
  :root {
    --gutter: var(--space-8);
    --section-y: var(--space-9);
    --type-display: 56px;
    --type-display-lh: 60px;
    --type-h2: 40px;
    --type-h2-lh: 46px;
  }

  .masthead {
    min-height: 88px;
    gap: var(--space-6);
  }

  .masthead__logo img,
  .site-footer__logo img {
    height: 28px;
  }

  [dir='rtl'] .masthead__logo img {
    height: 35px;
  }

  .masthead__end {
    gap: var(--space-7);
  }

  .nav {
    gap: 36px;
  }

  .menu-toggle {
    display: none;
  }

  .hero {
    --mark-height: clamp(200px, 22vw, 320px);
    gap: max(var(--space-8), var(--mark-clear));
    padding-block-start: var(--space-9);
  }

  .hero__main {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: end;
  }

  .hero__copy {
    grid-column: 1 / span 8;
  }

  .hero__title-alt {
    font-size: 22px;
    line-height: 36px;
  }

  .hero__lede {
    margin-block-start: var(--space-6);
  }

  .hero__actions {
    margin-block-start: var(--space-7);
  }

  /* The mark stands at the far edge, its foot level with the buttons, with
     at least a stem width of paper between it and the index below. */
  .hero__mark {
    order: 0;
    grid-column: 9 / span 4;
    justify-content: flex-end;
    margin-block-end: 0;
  }

  .hero__mark img {
    margin-inline-start: 0;
    margin-inline-end: max(0px, calc(var(--mark-clear) - var(--gutter)));
  }

  .hero-index__list {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .hero-index__item:not(:nth-child(4n + 1)) {
    border-inline-start: 0;
  }

  .hero-index__item + .hero-index__item {
    border-inline-start: var(--stroke-hairline) solid var(--hairline);
  }

  .hero-index__link {
    padding: var(--space-4) var(--space-4) var(--space-5);
    gap: var(--space-2);
  }

  .glance {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: var(--space-8);
  }

  .glance__copy {
    grid-column: 1 / span 9;
  }

  .glance__statement {
    font-size: 36px;
    line-height: 46px;
  }

  .glance__figures {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .glance__figure dd {
    font-size: 64px;
    line-height: 68px;
  }

  .section--about { gap: var(--space-8); }
  .section--services { gap: 56px; }
  .section--industries { gap: var(--space-7); }

  .section-head__titles {
    grid-column: 1 / span 6;
  }

  .section-head__lede {
    grid-column: 7 / span 6;
  }

  .about__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: var(--space-6);
  }

  .phase {
    grid-column: span 2;
  }

  .pullquote {
    grid-column: 2 / span 9;
  }

  .services__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sector {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    padding: var(--space-7);
  }

  .sector__head {
    grid-column: 1 / span 4;
  }

  .sector__services {
    grid-column: 5 / span 8;
    row-gap: var(--space-5);
  }

  .contact {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .contact__intro {
    grid-column: 1 / span 5;
  }

  .contact__form {
    grid-column: 7 / span 6;
  }

  .form-card {
    padding: var(--space-7);
  }

  .site-footer {
    padding: var(--space-8) var(--gutter) var(--space-7);
    gap: var(--space-6);
  }

  .site-footer__logo img {
    height: 32px;
  }

  .footer-col a {
    min-height: 28px;
  }

  .site-footer__columns {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .footer-col--contact {
    grid-column: 1 / span 4;
  }

  .footer-col--company {
    grid-column: 6 / span 2;
  }

  .footer-col--legal {
    grid-column: 8 / span 2;
  }

  .footer-col--language {
    grid-column: 11 / span 2;
  }

  .newsletter {
    padding-block: var(--space-6);
  }

  .newsletter__form {
    max-width: 560px;
  }
}

/* Phone only. */
@media (max-width: 39.99rem) {
  .sector__request {
    align-self: stretch;
    justify-content: space-between;
    padding-inline: var(--space-4);
  }
}

/* Below the desktop breakpoint the nav collapses behind a button. */
@media (max-width: 59.99rem) {
  .menu-toggle {
    display: inline-flex;
  }

  .masthead {
    padding-inline-end: var(--space-2);
  }

  .masthead__end {
    position: fixed;
    inset: 64px 0 auto;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-4) var(--gutter) var(--space-6);
    background: var(--surface-100);
    border-block-end: var(--stroke-hairline) solid var(--hairline);
    /* Collapsed by default; the toggle flips [data-open]. Hidden with
       `display:none` so its links leave the tab order entirely. */
    display: none;
  }

  .masthead__end[data-open='true'] {
    display: flex;
  }

  .nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link,
  .lang-switch {
    min-height: var(--tap-target);
    display: flex;
    align-items: center;
    padding-block: var(--space-3);
    border-block-end: var(--stroke-hairline) solid var(--hairline);
    border-block-start: 0;
  }

  .nav__link[aria-current='page'] {
    border-block-end-color: var(--hairline);
    color: var(--brand-700);
  }

  .masthead__end .button {
    margin-block-start: var(--space-4);
  }
}

/* The masthead is sticky, so anchor targets need room to clear it. */
[id] {
  scroll-margin-block-start: 96px;
}