/* About and Global Partnerships only. Shared colours and type scale stay in landing.css and system.css. */
:is(.about-page, .partnerships-page) main {
  --company-gap: clamp(32px, 5vw, 80px);
}
:is(.about-page, .partnerships-page) .page-intro { padding-bottom: 64px; }
:is(.about-page, .partnerships-page) .section { padding-block: clamp(56px, 6vw, 88px); }
.company-kicker {
  display: block;
  margin-bottom: 24px;
  color: var(--editorial-muted);
  font: 600 10px/1.5 var(--font-mono);
  letter-spacing: .15em;
  text-transform: uppercase;
}
:is(.about-page, .partnerships-page) .page-intro__copy h1 > span { color: var(--editorial-muted); }

/* An asymmetric photo opening, with the original photograph and copy. */
.about-page .page-intro__grid { grid-template-columns: 1fr 1fr; gap: var(--company-gap); }
.about-page .page-intro__copy > p { max-width: 42ch; }
.about-page .industry-photo img { aspect-ratio: 8 / 5; object-position: 68% center; border-radius: 4px; }
.company-head { margin-bottom: 40px; }
.company-head h2 { max-width: 22ch; margin: 0; text-wrap: balance; }
.company-principles .delivery-line { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--company-gap); border: 0; }
.company-principles .delivery-line article {
  padding: 26px 0 0;
  border: 0;
  border-top: 1px solid var(--rule);
}
.company-principles .delivery-line h3 { display: flex; align-items: center; gap: 14px; min-height: 42px; margin: 0 0 14px; }
.company-principles .delivery-line p { max-width: calc(36ch + 56px); padding-left: 56px; text-wrap: pretty; }

/* The map shares the paper canvas with the introduction, beside the copy. */
.partnerships-page .page-intro__grid {
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: var(--company-gap);
}
.partnerships-page .page-intro__copy h1 { max-width: 19ch; margin-bottom: 24px; }
.partnerships-page .page-intro__copy > p { max-width: 44ch; text-wrap: pretty; }
.world-map {
  --map-dot: #b4c4cf;
  --map-ink: var(--editorial-ink);
  --map-paper: var(--paper);
  min-width: 0;
  margin: 0;
}
html[data-site-theme="dark"] .world-map { --map-dot: #3d586a; }
/* Crop Antarctica while retaining the existing map's equirectangular coordinates. */
.world-map__canvas { position: relative; width: 100%; max-width: 960px; margin: 0 auto; aspect-ratio: 90 / 38; }
.world-map__dots {
  position: absolute;
  inset: 0;
  background: var(--map-dot);
  -webkit-mask: url("../assets/company/world-dots.svg") top center / 100% auto no-repeat;
  mask: url("../assets/company/world-dots.svg") top center / 100% auto no-repeat;
}
.world-map__route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.world-map__route path {
  fill: none;
  stroke: var(--map-ink);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: .65;
}
.world-map__route .world-map__route--presence { stroke-dasharray: none; opacity: .9; }
.world-map__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 8px;
  height: 8px;
  border: 2px solid var(--map-paper);
  border-radius: 50%;
  background: var(--map-ink);
  box-sizing: content-box;
  box-shadow: 0 0 0 1px var(--map-dot);
  transform: translate(-50%, -50%);
}
.world-map__pin--hq { width: 10px; height: 10px; box-shadow: 0 0 0 1px var(--map-dot), 0 0 0 6px color-mix(in srgb, var(--map-ink) 7%, transparent); }
.world-map__pin--illustrative { width: 6px; height: 6px; border: 1px solid var(--map-ink); background: var(--map-paper); box-shadow: 0 0 0 3px var(--map-paper); }
.world-map__label {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  padding: 2px 5px;
  background: var(--map-paper);
  color: var(--map-ink);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  transform: translateX(-50%);
}
.world-map__label > span { display: block; color: var(--editorial-muted); font: 9px/1.6 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.world-map__pin--uk .world-map__label { top: auto; bottom: calc(100% + 10px); }
.world-map__pin--hq .world-map__label { top: auto; bottom: calc(100% + 12px); left: 10px; transform: none; }
.world-map__pin--uae .world-map__label { left: auto; right: 9px; top: 5px; transform: none; }
.world-map__pin--singapore .world-map__label { left: auto; right: 8px; transform: none; }
.world-map__pin--australia .world-map__label { left: auto; right: 0; transform: none; }
.world-map__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 28px;
  padding: 22px 0 0;
  color: var(--editorial-muted);
  font: 10px/1.5 var(--font-mono);
}
.world-map__legend > span:not(.sr-only) { display: inline-flex; align-items: center; gap: 9px; }
.world-map__key { width: 6px; height: 6px; border: 1px solid var(--map-ink); border-radius: 50%; background: var(--map-ink); }
.world-map__key--illustrative { background: transparent; }

/* Capabilities and principles share the same open, unnumbered columns. */
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--company-gap); }
.service-grid article { padding: 26px 0 0; border-top: 1px solid var(--rule); }
.service-grid h3 { display: flex; align-items: center; gap: 14px; min-height: 42px; margin: 0 0 14px; }
.service-grid p { max-width: calc(37ch + 56px); padding-left: 56px; text-wrap: pretty; }
.service-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 9px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 5%, var(--paper));
  color: var(--accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A single image and a single paragraph close each page. */
.company-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 32px var(--company-gap);
}
.company-split__media { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); }
.company-split__media img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.company-split__copy h2 { max-width: 22ch; margin: 0 0 24px; text-wrap: balance; }
.company-split__copy > p { max-width: 44ch; text-wrap: pretty; }
.company-split__copy .editorial-text-link { margin-top: 28px; }

@media (max-width: 980px) {
  .about-page .page-intro__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .about-page .industry-photo img { aspect-ratio: 4 / 3; }
  .partnerships-page .page-intro__grid { gap: 32px; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 32px; }
  .company-split { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  :is(.about-page, .partnerships-page) .page-intro { padding-top: 116px; }
  :is(.about-page, .partnerships-page) .page-intro { padding-bottom: 40px; }
  .about-page .page-intro__grid, .partnerships-page .page-intro__grid, .company-split { grid-template-columns: 1fr; gap: 36px; }
  .company-kicker { margin-bottom: 18px; }
  .about-page .industry-photo img { aspect-ratio: 4 / 3; }
  .company-principles .delivery-line { grid-template-columns: 1fr; gap: 24px; }
  .company-principles .delivery-line article { padding: 24px 0 0; }
  .company-head { margin-bottom: 28px; }
  .world-map { margin-top: 6px; }
  .world-map__pin { width: 6px; height: 6px; }
  .world-map__pin--hq { width: 8px; height: 8px; }
  .world-map__pin--illustrative { width: 4px; height: 4px; }
  .world-map__label { font-size: 10px; padding: 1px 3px; top: calc(100% + 7px); }
  .world-map__label > span { font-size: 8px; }
  .world-map__pin--hq .world-map__label { left: 5px; bottom: calc(100% + 10px); }
  .world-map__pin--uk .world-map__label { left: auto; right: 0; transform: none; bottom: calc(100% + 7px); }
  .world-map__pin--uae .world-map__label { right: 6px; top: 0; }
  .world-map__pin--singapore .world-map__label { right: 8px; top: 2px; }
  .world-map__pin--australia .world-map__label { top: calc(100% + 5px); }
  .world-map__legend { justify-content: flex-start; gap: 10px 18px; margin-top: 10px; padding: 15px 0 0; font-size: 9px; }
  .service-grid { gap: 24px; }
  .company-split__copy h2 { max-width: 24ch; }
}
@media (max-width: 480px) {
  .service-grid { grid-template-columns: 1fr; }
}