/* ==========================================================================
   Kalinotech — inner pages
   ========================================================================== */

/* --------------------------------------------------------------- page hero */
.phero {
  position: relative;
  background: var(--night);
  color: #fff;
  padding-block: clamp(140px, 17vh, 210px) clamp(56px, 8vw, 96px);
  overflow: hidden;
}
.phero::before {
  content: "";
  position: absolute;
  inset-inline-end: -12%;
  top: -55%;
  width: 62%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(22, 119, 255, .2), transparent 62%);
  pointer-events: none;
}
.phero::after {
  content: "";
  position: absolute;
  inset-inline-start: -14%;
  bottom: -60%;
  width: 46%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(10, 123, 255, .13), transparent 62%);
  pointer-events: none;
}
.phero__inner { position: relative; z-index: 2; }
.phero .display-2 { max-width: 20ch; margin-top: 18px; }
.phero .lead { margin-top: 20px; color: var(--on-night-2); }
/* The photograph has to melt into the dark on every side — fading one edge
   only leaves the other three as hard cuts, which is what made the picture
   look pasted on. The band fades across, the picture inside it fades down,
   and the two together take the corners with them. Two plain masks, one on
   each box: no mask-composite, so it behaves the same in every browser. */
.phero__media {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  width: 46%;
  height: 100%;
  z-index: 1;
  opacity: .42;
  -webkit-mask-image: linear-gradient(to right, #000 0 34%, rgba(0, 0, 0, .78) 64%, transparent 95%);
  mask-image: linear-gradient(to right, #000 0 34%, rgba(0, 0, 0, .78) 64%, transparent 95%);
}
.phero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 76%, transparent 100%);
}

/* ------------------------------------------------------------ breadcrumbs */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  font-size: .8rem;
  color: var(--on-night-3);
}
.crumbs a { transition: color var(--dur-fast) var(--ease); }
.crumbs a:hover { color: #fff; }
.crumbs li + li::before { content: "/"; margin-inline-end: 10px; opacity: .45; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs [aria-current] { color: var(--amber); }

/* ------------------------------------------------------------------ prose */
.prose { max-width: 74ch; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.5;
  margin-top: 2em;
  padding-top: .6em;
  border-top: 1px solid var(--line);
}
.prose h3 { font-size: var(--fs-h3); font-weight: 700; margin-top: 1.7em; }
.prose p { color: #2C2C2C; }
.prose strong { font-weight: 700; color: var(--ink); }
.prose a { color: var(--amber); text-decoration: underline; text-underline-offset: 4px; }
.prose ul, .prose ol { padding-inline-start: 1.2em; }
.prose ul li { list-style: none; position: relative; padding-inline-start: 20px; }
.prose ul li + li { margin-top: .5em; }
.prose ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .82em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--amber);
}
.prose ol { list-style: decimal; }
.prose ol li { margin-inline-start: .3em; }
.prose ol li + li { margin-top: .5em; }
.prose blockquote {
  border-inline-start: 3px solid var(--amber);
  padding-inline-start: 20px;
  color: var(--ink-2);
  font-size: 1.08em;
}
.prose img, .prose figure { border-radius: var(--r-m); overflow: hidden; }
.prose figcaption { font-size: .85rem; color: var(--ink-2); margin-top: 8px; text-align: center; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 14px; text-align: start; }
.prose th { background: var(--paper-2); font-weight: 700; }
.prose pre {
  background: var(--night);
  color: #E6E6E6;
  padding: 18px;
  border-radius: var(--r-m);
  overflow-x: auto;
  direction: ltr;
  font-size: .88rem;
}
.prose hr { border: none; border-top: 1px solid var(--line); margin-block: 2em; }

/* --------------------------------------------------------- generic layout */
.split {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.side { position: sticky; top: clamp(92px, 13vh, 130px); display: grid; gap: 18px; }
.side__box {
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 22px;
  background: #fff;
}
.side__box h4 { font-size: .95rem; font-weight: 800; margin-bottom: 14px; }
.side__box li + li { margin-top: 10px; }
.side__box a { font-size: .92rem; color: var(--ink-2); transition: color var(--dur-fast) var(--ease); }
.side__box a:hover { color: var(--amber); }
.side__box a[aria-current] { color: var(--amber); font-weight: 600; }

/* --------------------------------------------------------------- bullets */
.bullets { display: grid; gap: 10px; }
.bullets li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: #fff;
  font-size: .95rem;
  line-height: 1.7;
}
.bullets li::before {
  content: "";
  width: 7px; height: 7px;
  margin-top: .62em;
  border-radius: 50%;
  background: var(--amber);
}
[data-nav-dark] .bullets li { background: rgba(255,255,255,.04); border-color: var(--line-night); }
/* a company page carries its own brand colour on its markers and cards */
.company-page .bullets li::before { background: var(--accent); }
.company-page .article__cover { box-shadow: 0 0 0 1px var(--line-2), 0 -4px 0 0 var(--accent); }
.company-page .side__box:first-child { border-top: 3px solid var(--accent); }

.bullets--cols { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 680px) { .bullets--cols { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- index grid */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
.tile {
  display: block;
  border: 1px solid var(--line-2);
  border-radius: var(--r-l);
  background: #fff;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-m); }
.tile__media { aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.tile:hover .tile__media img { transform: scale(1.05); }
.tile__n {
  position: absolute;
  inset-inline-start: 16px;
  top: 16px;
  font-size: .7rem;
  letter-spacing: .16em;
  color: #fff;
  background: rgba(8,10,15,.45);
  backdrop-filter: blur(8px);
  padding: 6px 13px;
  border-radius: var(--r-pill);
  direction: ltr;
}
.tile__body { padding: 22px; }
.tile__body h3 { font-size: var(--fs-h3); font-weight: 800; margin-bottom: 8px; }
.tile__body .latin { font-size: .7rem; letter-spacing: .15em; color: var(--ink-3); display: block; margin-bottom: 10px; }
.tile__body p { font-size: .93rem; color: var(--ink-2); line-height: 1.85; }
.tile__body .link-arrow { margin-top: 14px; }

/* ------------------------------------------------------------- post cards */
.post-card {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--line-2);
  border-radius: var(--r-l);
  background: #fff;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-m); }
.post-card__media { aspect-ratio: 16 / 9; overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__body { padding: 22px; display: grid; align-content: start; gap: 10px; }
.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: .78rem;
  color: var(--ink-3);
  align-items: center;
}
.post-card__meta span { color: var(--amber); font-weight: 600; }
.post-card h3 { font-size: var(--fs-h3); font-weight: 800; line-height: 1.6; }
.post-card p { font-size: .92rem; color: var(--ink-2); }

/* ------------------------------------------------------------- pagination */
.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: clamp(36px, 5vw, 60px);
}
.pager a, .pager span {
  min-width: 42px;
  height: 42px;
  padding-inline: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: .9rem;
  background: #fff;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.pager a:hover { border-color: var(--ink); }
.pager [aria-current] { background: var(--ink); color: #fff; border-color: var(--ink); }
.pager .pager__gap { border: 0; background: none; min-width: 20px; padding: 0; color: var(--ink-3); }
.pager .pager__step { padding-inline: 18px; font-weight: 600; }
.pager .pager__step.is-off { opacity: .4; }
/* the arrow icon points to the end of the reading direction; "previous" flips it */
.pager__step--prev svg { transform: scaleX(-1); }

/* ----------------------------------------------------------- article page */
.article__head { max-width: 74ch; }
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  font-size: .85rem;
  color: var(--on-night-2);
  margin-top: 22px;
}
.article__meta i { display: inline-flex; align-items: center; gap: 7px; font-style: normal; }
.article__cover {
  border-radius: var(--r-l);
  overflow: hidden;
  margin-top: clamp(-70px, -6vw, -40px);
  position: relative;
  z-index: 3;
  box-shadow: var(--shadow-l);
  aspect-ratio: 16 / 8;
}
.article__cover img { width: 100%; height: 100%; object-fit: cover; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.tags i {
  font-style: normal;
  font-size: .8rem;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink-2);
}

/* ------------------------------------------------------------ prev / next */
.updown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: clamp(40px, 5vw, 70px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.updown a {
  display: grid;
  gap: 6px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: #fff;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.updown a:hover { border-color: var(--ink); transform: translateY(-3px); }
.updown span { font-size: .76rem; color: var(--ink-3); letter-spacing: .1em; }
.updown b { font-size: 1rem; font-weight: 700; }
.updown .is-next { text-align: end; }
@media (max-width: 620px) { .updown { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- contact */
.contact { background: var(--paper); }
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(22px, 3.4vw, 48px);
  align-items: start;
}
/* the form sits on an elevated card, lifted into the hero band */
.contact__card {
  position: relative;
  z-index: 3;
  margin-top: calc(var(--section-y) * -1 - 40px);
  padding: clamp(24px, 3.4vw, 48px);
  border-radius: var(--r-l);
  background: #fff;
  box-shadow: 0 30px 80px rgba(8, 10, 15, .12), 0 2px 0 rgba(8, 10, 15, .02);
  scroll-margin-top: 110px;
}
.contact__intro { margin-top: 14px; color: var(--ink-2); }
.contact__card .alert { margin-top: 20px; }
.form { display: grid; gap: 18px; margin-top: 26px; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: grid; gap: 8px; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field > label { font-size: .88rem; font-weight: 600; color: var(--ink); }
.field__req { color: var(--amber); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: #FAFAF8;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.9; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  background: #fff;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(10, 123, 255, .12);
}
.field__error { font-size: .82rem; color: #C62828; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #C62828; }
.form__foot { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.form__note { font-size: .84rem; color: var(--ink-2); }
.hp { position: absolute; inset-inline-start: -9999px; opacity: 0; height: 0; overflow: hidden; }

.alert {
  border-radius: var(--r-m);
  padding: 16px 20px;
  font-size: .93rem;
  border: 1px solid;
}
.alert--ok { background: rgba(46, 125, 50, .07); border-color: rgba(46, 125, 50, .3); color: #22682B; }
.alert--bad { background: rgba(198, 40, 40, .06); border-color: rgba(198, 40, 40, .28); color: #A32020; }

.contact__aside { display: grid; gap: 14px; }
/* the head office on a small dark globe */
.contact__hq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-radius: var(--r-l);
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 30%, rgba(22, 119, 255, .22), transparent 70%),
    var(--night);
  color: #fff;
}
.contact__globe { position: relative; aspect-ratio: 16 / 11; }
.contact__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.contact__hq-copy { display: grid; gap: 6px; padding: 0 22px 22px; }
.contact__hq-copy b { font-size: 1.05rem; font-weight: 800; }
.contact__hq-copy p { font-size: .88rem; line-height: 1.9; color: var(--on-night-2); }

.channels { display: grid; gap: 10px; }
.channel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: #fff;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
a.channel:hover { border-color: var(--amber); transform: translateY(-2px); }
.channel i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(10, 123, 255, .1);
  color: var(--amber);
}
.channel small { display: block; font-size: .76rem; color: var(--ink-3); margin-bottom: 2px; }
.channel b { font-weight: 700; font-size: .95rem; line-height: 1.7; justify-self: start; }
.contact__map { border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line); }
.contact__map iframe { display: block; width: 100%; min-height: 260px; border: 0; }

.contact-steps { background: var(--paper-2); }
.contact-steps__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin-top: clamp(26px, 3.4vw, 44px);
  counter-reset: step;
}
.contact-steps__list li {
  position: relative;
  padding: 26px 24px 28px;
  border-radius: var(--r-l);
  background: #fff;
  border: 1px solid var(--line-2);
}
.contact-steps__list li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 44px;
  inset-inline-end: calc(clamp(14px, 2vw, 24px) * -1);
  width: clamp(14px, 2vw, 24px);
  height: 2px;
  background: var(--amber);
}
.contact-steps__n { font-size: .78rem; font-weight: 700; letter-spacing: .14em; color: var(--amber); direction: ltr; display: block; }
.contact-steps__list b { display: block; margin-top: 10px; font-size: 1.05rem; font-weight: 800; }
.contact-steps__list p { margin-top: 8px; font-size: .9rem; line-height: 1.85; color: var(--ink-2); }

/* -------------------------------------------------------------- presence */
.presence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}
.presence-card {
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 26px;
  background: #fff;
}
.presence-card b { display: block; font-size: 1.15rem; font-weight: 800; margin-bottom: 8px; }
.presence-card .latin { font-size: .72rem; letter-spacing: .16em; color: var(--ink-3); display: block; margin-bottom: 12px; }
.presence-card p { font-size: .93rem; color: var(--ink-2); }

/* ------------------------------------------------------- stat tiles (KPI) */
.kpi-band { background: var(--paper); padding-bottom: 0; }
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
}
.kpi {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: clamp(18px, 2vw, 26px);
  border-radius: var(--r-l);
  background: #fff;
  border: 1px solid var(--line-2);
}
/* proportional figures: this is a standalone number, not a column */
.kpi__value { font-size: clamp(2.1rem, 3.4vw, 2.9rem); font-weight: 800; line-height: 1; color: var(--ink); }
.kpi__value sup { font-size: .5em; color: var(--amber); margin-inline-start: 2px; vertical-align: super; }
.kpi__label { font-size: .9rem; line-height: 1.7; color: var(--ink-2); }
.kpis--dark .kpi { background: rgba(255, 255, 255, .04); border-color: var(--line-night-2); }
.kpis--dark .kpi__value { color: #fff; }
.kpis--dark .kpi__label { color: var(--on-night-2); }

/* -------------------------------------------- part-to-whole: by country */
/* Colour roles for this chart only. The trio was run through the palette
   validator on the white card: it clears the lightness, chroma, colour-blind
   and normal-vision gates; amber and aqua sit just under 3:1 against white,
   which is why every segment also has a legend row, a count and a table. */
.split-chart {
  --surface: #FFFFFF;
  --series-1: #0A3FD1;
  --series-2: #19B5FE;
  --series-3: #1BAF7A;
  --series-0: #9A9A94;              /* "other": neutral, never a fourth hue */
  margin: 0;
  display: grid;
  gap: 18px;
  align-content: start;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--r-l);
  background: var(--surface);
  border: 1px solid var(--line-2);
}
.split-chart__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; align-items: baseline; }
.split-chart__head b { font-size: 1rem; font-weight: 800; color: var(--ink); }
.split-chart__head span { font-size: .84rem; color: var(--ink-2); }
/* one 22px bar, segments separated by a 2px gap of the card surface */
.split-chart__bar {
  display: flex;
  gap: 2px;
  height: 22px;
  background: var(--surface);
  overflow: hidden;
}
.split-chart__seg {
  position: relative;
  flex: var(--n) 1 0;
  min-width: 10px;
  display: grid;
  place-items: center;
  /* a share small enough that its own figure does not fit must not push the
     bar — and through it the page — wider than the screen */
  overflow: hidden;
  outline: none;
  cursor: default;
  transition: filter .2s var(--ease);
}
.split-chart__seg--1 { background: var(--series-1); }
.split-chart__seg--2 { background: var(--series-2); }
.split-chart__seg--3 { background: var(--series-3); }
.split-chart__seg--0 { background: var(--series-0); }
/* square where the bar starts, a 4px rounded end where it finishes */
.split-chart__seg:last-child { border-start-end-radius: 4px; border-end-end-radius: 4px; }
.split-chart__seg em {
  font-style: normal;
  font-size: .8rem;
  font-weight: 800;
  line-height: 1;
  color: #111;                       /* ink clears 4.6:1 or better on every fill */
}
.split-chart__seg:hover, .split-chart__seg:focus-visible { filter: brightness(1.08) saturate(1.05); }
.split-chart__seg:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
/* hover and keyboard focus give the same readout; the value leads */
.split-chart__seg::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  inset-inline-start: 50%;
  translate: 50% 0;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s var(--ease);
  z-index: 3;
}
.split-chart__seg:hover::after, .split-chart__seg:focus-visible::after { opacity: 1; }
.split-chart__legend { display: grid; gap: 8px; }
.split-chart__legend li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  font-size: .9rem;
  color: var(--ink);
}
.split-chart__legend b { font-weight: 800; }
.split-chart__legend small { font-size: .8rem; color: var(--ink-2); min-width: 3.2em; text-align: end; }
.split-chart__key { width: 12px; height: 12px; border-radius: 3px; }
.split-chart__key--1 { background: var(--series-1); }
.split-chart__key--2 { background: var(--series-2); }
.split-chart__key--3 { background: var(--series-3); }
.split-chart__key--0 { background: var(--series-0); }
.split-chart__table summary {
  width: fit-content;
  cursor: pointer;
  font-size: .82rem;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.split-chart__table table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: .86rem; }
.split-chart__table th, .split-chart__table td { padding: 8px 6px; border-bottom: 1px solid var(--line-2); text-align: start; }
.split-chart__table td { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ the live project globe */
.globe-panel {
  background:
    radial-gradient(60% 70% at 25% 50%, rgba(22, 119, 255, .14), transparent 70%),
    var(--night);
  color: #fff;
  overflow: hidden;
}
.globe-panel__in {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
}
.globe-panel__copy .lead { margin-top: 14px; color: var(--on-night-2); }
.globe-panel__places { margin-top: 26px; border-top: 1px solid var(--line-night-2); }
.globe-panel__place {
  display: grid;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-night-2);
  outline: none;
}
.globe-panel__where { display: flex; align-items: center; gap: 8px; }
.globe-panel__where svg { color: var(--amber); flex: none; }
.globe-panel__where b { font-size: 1rem; font-weight: 800; transition: color .25s var(--ease); }
.globe-panel__where small { font-size: .78rem; color: var(--on-night-3); }
.globe-panel__place:hover .globe-panel__where b,
.globe-panel__place:focus-within .globe-panel__where b { color: var(--amber); }
.globe-panel__links { display: flex; flex-wrap: wrap; gap: 6px; }
.globe-panel__links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-night);
  font-size: .82rem;
  color: rgba(255, 255, 255, .86);
  transition: border-color .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease);
}
.globe-panel__links a:hover, .globe-panel__links a:focus-visible {
  border-color: var(--amber);
  background: rgba(10, 123, 255, .1);
  color: #fff;
}
.globe-panel__orb { position: relative; width: 100%; max-width: 640px; aspect-ratio: 1; justify-self: center; }
.globe-panel__halo {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 119, 255, .3), transparent 62%);
  filter: blur(30px);
  pointer-events: none;
}
.globe-panel__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.globe-panel__canvas.is-grabbing, .contact__canvas.is-grabbing { cursor: grabbing; }
.globe-panel__hint {
  position: absolute;
  inset-inline: 0;
  bottom: -4px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--on-night-3);
  pointer-events: none;
}
.globe-panel__hint svg { color: var(--amber); }

/* ------------------------------------------------------ group structure */
.org { display: grid; justify-items: center; }
.org__root {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 14px 18px;
  border-radius: var(--r-l);
  background: var(--night);
  color: #fff;
  box-shadow: 0 18px 44px rgba(8, 10, 15, .18);
}
.org__root::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 2px;
  height: 28px;
  translate: -50% 0;
  background: var(--line);
}
.org__mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--amber);
  color: #FFFFFF;
  font-weight: 900;
  font-size: 1.1rem;
}
.org__root b { display: block; font-size: 1rem; letter-spacing: .06em; }
.org__root small { display: block; font-size: .78rem; color: var(--on-night-2); }
/* one row of companies hanging off a single bus */
.org__kids {
  position: relative;
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 56px;
}
.org__kids::before {
  content: "";
  position: absolute;
  top: -28px;
  inset-inline: calc(100% / var(--n, 6) / 2);
  height: 2px;
  background: var(--line);
}
.org__kids > li { position: relative; }
.org__kids > li::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 50%;
  width: 2px;
  height: 28px;
  translate: -50% 0;
  background: var(--line);
}
.org__node {
  display: grid;
  gap: 4px;
  align-content: start;
  height: 100%;
  padding: 18px 16px;
  border-radius: var(--r-m);
  background: #fff;
  border: 1px solid var(--line-2);
  border-top: 3px solid var(--accent);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.org__node:hover, .org__node:focus-visible { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(8, 10, 15, .1); }
.org__node b { font-size: .92rem; font-weight: 800; justify-self: start; }
.org__node span { font-size: .86rem; line-height: 1.7; color: var(--ink-2); }
.org__node small { font-size: .64rem; line-height: 1.7; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); justify-self: start; }

/* ------------------------------------------------------------ value chain */
.chainband { background: var(--night); color: #fff; }
.chainband .lead { color: var(--on-night-2); }
.chainband__list {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: clamp(34px, 4vw, 56px);
  padding-top: 8px;
}
/* the thread every link hangs on */
.chainband__list::before {
  content: "";
  position: absolute;
  top: 15px;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(to left, var(--amber), rgba(10, 123, 255, .15));
}
.chainband__list li { position: relative; display: grid; gap: 10px; align-content: start; }
.chainband__list li::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--night);
  border: 2px solid var(--amber);
  box-shadow: 0 0 0 5px rgba(10, 123, 255, .12);
  position: relative;
  z-index: 1;
}
.chainband__n { font-size: .74rem; font-weight: 700; letter-spacing: .14em; color: var(--on-night-3); direction: ltr; justify-self: start; }
.chainband__list b { font-size: clamp(.92rem, 1.2vw, 1.05rem); font-weight: 800; line-height: 1.6; }
.chainband__foot { margin-top: 30px; font-size: .84rem; color: var(--on-night-3); }

/* ------------------------------------------------------------ about intro */
.about-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.about-intro__media {
  position: sticky;
  top: 110px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.about-intro__shot { margin: 0; border-radius: var(--r-l); overflow: hidden; background: var(--paper-3); }
.about-intro__shot img { width: 100%; height: 100%; object-fit: cover; }
.about-intro__shot--a { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.about-intro__shot--b, .about-intro__shot--c { aspect-ratio: 1; }
.about-intro__badge {
  position: absolute;
  inset-inline-end: clamp(-18px, -1.4vw, -8px);
  top: 42%;
  display: grid;
  gap: 4px;
  max-width: 250px;
  padding: 16px 20px;
  border-radius: var(--r-m);
  background: var(--night);
  color: #fff;
  box-shadow: 0 18px 44px rgba(8, 10, 15, .24);
}
.about-intro__badge b { font-size: .9rem; letter-spacing: .1em; }
.about-intro__badge span { font-size: .84rem; line-height: 1.8; color: var(--on-night-2); }

/* --------------------------------------------------- companies: bento */
.bento-wrap { padding-top: clamp(28px, 3.4vw, 48px); }
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(230px, 22vw, 300px);
  gap: clamp(12px, 1.4vw, 18px);
}
.bento__tile {
  position: relative;
  grid-column: span 4;
  border-radius: var(--r-l);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: #11151C;
}
.bento__tile:nth-child(6n + 1) { grid-column: span 7; grid-row: span 2; }
.bento__tile:nth-child(6n + 2), .bento__tile:nth-child(6n + 3) { grid-column: span 5; }
.bento__media { position: absolute; inset: 0; z-index: -2; }
.bento__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.bento__tile:hover .bento__media img { transform: scale(1.06); }
.bento__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(5, 7, 11, .9) 0%, rgba(5, 7, 11, .3) 58%, rgba(5, 7, 11, .08) 100%);
  background: linear-gradient(to top, color-mix(in srgb, var(--accent) 64%, #05070B) 0%,
                                      rgba(5, 7, 11, .34) 58%, rgba(5, 7, 11, .08) 100%);
}
/* the brand colour draws a frame on hover and focus */
.bento__tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.bento__tile:hover::before, .bento__tile:focus-visible::before { opacity: 1; }
.bento__tile:focus-visible { outline: none; }
.bento__top {
  position: absolute;
  top: 18px;
  inset-inline: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.bento__n { font-size: .76rem; font-weight: 700; letter-spacing: .14em; direction: ltr; }
.bento__chip {
  max-width: 72%;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bento__body {
  position: absolute;
  inset-inline: 22px 80px;
  bottom: 22px;
  display: grid;
  gap: 6px;
}
.bento__word { font-size: clamp(1.25rem, 2.1vw, 1.8rem); font-weight: 900; line-height: 1.05; justify-self: start; text-align: end; }
.bento__tile:nth-child(6n + 1) .bento__word { font-size: clamp(2rem, 4.2vw, 3.6rem); }
.bento__name { font-size: .92rem; font-weight: 700; color: rgba(255, 255, 255, .92); }
.bento__short {
  display: none;
  max-width: 52ch;
  font-size: .88rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, .8);
}
.bento__tags { display: none; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.bento__tags i {
  font-style: normal;
  font-size: .76rem;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .2);
}
.bento__tile:nth-child(6n + 1) .bento__short { display: block; }
.bento__tile:nth-child(6n + 1) .bento__tags,
.bento__tile:nth-child(6n + 2) .bento__tags,
.bento__tile:nth-child(6n + 3) .bento__tags { display: flex; }
.bento__go {
  position: absolute;
  inset-inline-end: 20px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  transform: scale(.86);
  transition: transform .35s var(--ease);
}
.bento__tile:hover .bento__go, .bento__tile:focus-visible .bento__go { transform: scale(1); }

/* ------------------------------------------------ services: feature rows */
.svc-rows { display: grid; gap: clamp(44px, 6vw, 100px); }
.svc-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(24px, 4vw, 70px);
  align-items: center;
}
.svc-row--flip .svc-row__media { order: 2; }
.svc-row__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--paper-3);
}
.svc-row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.svc-row__media:hover img { transform: scale(1.05); }
.svc-row__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8, 10, 15, .45), transparent 42%);
}
.svc-row__n {
  position: absolute;
  top: 18px;
  inset-inline-start: 22px;
  z-index: 1;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 900;
  line-height: 1;
  color: #fff;
  direction: ltr;
}
.svc-row__latin { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.svc-row__title { margin-top: 10px; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.35; }
.svc-row__title a { transition: color .25s var(--ease); }
.svc-row__title a:hover { color: var(--amber); }
.svc-row__short { margin-top: 14px; line-height: 1.95; color: var(--ink-2); max-width: 54ch; }
.svc-row__list { display: grid; gap: 10px; margin-block: 20px 24px; }
.svc-row__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  font-size: .95rem;
  line-height: 1.8;
}
.svc-row__list li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--amber);
  transform: rotate(45deg) translateY(-2px);
}

/* ------------------------------------------------ process: numbered cells */
.steps-band { background: var(--night); color: #fff; }
.steps-band .lead { color: var(--on-night-2); }
.steps-band__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(30px, 4vw, 52px);
  border: 1px solid var(--line-night-2);
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--line-night-2);
}
.steps-band__list li {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: clamp(22px, 2.6vw, 34px);
  background: var(--night);
  transition: background-color .3s var(--ease);
}
.steps-band__list li:hover { background: #10141C; }
.steps-band__n {
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .42);
  direction: ltr;
  justify-self: start;
  transition: -webkit-text-stroke-color .3s var(--ease), color .3s var(--ease);
}
.steps-band__list li:hover .steps-band__n { color: var(--amber); -webkit-text-stroke-color: var(--amber); }
.steps-band__list b { font-size: 1.05rem; font-weight: 800; }
.steps-band__list p { font-size: .9rem; line-height: 1.85; color: var(--on-night-2); }

/* -------------------------------------------- projects: numbers + list */
.stats-band { background: var(--paper-2); }
.stats-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(12px, 1.4vw, 18px);
  margin-top: clamp(22px, 3vw, 36px);
  align-items: stretch;
}
.stats-band .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* tiles stretch to the chart beside them: figure at the top, label at the foot */
.stats-band .kpi { align-content: space-between; min-height: 150px; }
.projects-list { scroll-margin-top: 90px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 3vw, 36px); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: #fff;
  font-size: .88rem;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip i {
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  font-style: normal;
  font-size: .74rem;
  color: var(--ink-2);
}
.chip:hover { border-color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip.is-on i { background: rgba(255, 255, 255, .16); color: #fff; }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.pcard__place {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(8, 10, 15, .45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: .74rem;
}

/* -------------------------------------------------------------------- 404 */
.nf { min-height: 72vh; display: grid; place-items: center; text-align: center; padding-block: 160px 90px; }
.nf .num { font-size: clamp(5rem, 16vw, 12rem); line-height: .9; color: var(--amber); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; }
  .side { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .phero__media { width: 54%; opacity: .3; }

  .contact__grid { grid-template-columns: 1fr; }
  .contact__card { margin-top: -60px; }
  .contact__aside { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }

  .about-intro__grid { grid-template-columns: 1fr; }
  .about-intro__media { position: relative; top: auto; max-width: 720px; }

  .globe-panel__in { grid-template-columns: 1fr; }
  .globe-panel__orb { max-width: 520px; }

  .org__kids { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; }
  .org__kids::before, .org__kids > li::before { display: none; }

  .chainband__list { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; }
  .chainband__list::before { display: none; }

  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__tile, .bento__tile:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .bento__tile:nth-child(6n + 1) { grid-column: 1 / -1; grid-row: span 2; }

  .svc-row { grid-template-columns: 1fr; }
  .svc-row--flip .svc-row__media { order: 0; }

  .steps-band__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-band__grid { grid-template-columns: 1fr; }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* the numbers are right under the bar in the legend; inside a 10px-wide
     share they would only ever be a clipped digit */
  .split-chart__seg em { display: none; }
  .phero__media { display: none; }
  .phero .display-2 { max-width: 100%; }
  .article__cover { margin-top: -28px; aspect-ratio: 4 / 3; }

  .form__grid { grid-template-columns: 1fr; }
  .contact__card { margin-top: -40px; }
  .contact-steps__list { grid-template-columns: 1fr; }
  .contact-steps__list li::after { display: none; }

  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-intro__badge { position: static; max-width: none; grid-column: 1 / -1; }
  .org__kids { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chainband__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .bento { grid-template-columns: 1fr; grid-auto-rows: 300px; }
  .bento__tile:nth-child(n) { grid-column: auto; grid-row: auto; }
  .bento__tile:nth-child(6n + 1) { grid-row: span 1; }
  .bento__tile:nth-child(6n + 1) .bento__word { font-size: 2rem; }
  .bento__tile .bento__short { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  .steps-band__list { grid-template-columns: 1fr; }
  .pgrid { grid-template-columns: 1fr; }
}