/* index-v1d/about — the About page (Figma 611:37760), in Figma px inside the
   1728×1117 frame, scaled to fit by about/main.js. */

.about { background: #eee; }
.ab-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 1728px;
  height: 1117px;
  overflow: hidden;
  transform-origin: 0 0;
  color: #010103;
  user-select: text;
  -webkit-user-select: text;
}

/* ---- Trails: the coloured back of each piece, and its diagonal band ---- */

.ab-cap { position: absolute; display: block; }
/* (Figma's code anchors the band at its box's left (justify-start), which
   puts it half off its box; centred, it fills the box as in Figma's own
   render — the diagonal from the card's back to the card. Its width, which
   animates, is its length along the trail.) */
.ab-band-wrap {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-band-turn { flex: none; display: block; }
.ab-band { display: block; position: relative; }

/* ---- Cards (Figma: grey, #acacac, 4px corners) ---- */

.ab-card {
  position: absolute;
  margin: 0;
  background: #acacac;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  overflow: clip;
  border-radius: 4px;
  font-style: normal;
}
.ab-label {
  margin: 0;
  font: 400 11px/normal var(--mono);
  text-transform: uppercase;
  white-space: nowrap;
}
.ab-card--why { left: 1348px; top: 385px; width: 340px; padding: 26px; }
.ab-card--why .ab-label { text-transform: none; }
.ab-prose, .ab-sign { font: 500 14px/normal var(--sans); }
.ab-prose p { margin: 0; }
.ab-prose p + p { margin-top: 1.2em; } /* (Figma: an empty line between) */
.ab-sign { margin: 0; line-height: 1.5; }

.ab-card--services { left: 1085.94px; top: 133px; padding: 26px; white-space: nowrap; }
.ab-card--awards { left: 529px; top: 327px; padding: 26px; white-space: nowrap; }
.ab-card--features { left: 867px; top: 726px; padding: 26px; white-space: nowrap; }
.ab-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ab-list li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font: 500 13px/normal var(--sans);
}
.ab-list li span { font: 400 8px/normal var(--mono); }

.ab-intro {
  position: absolute;
  left: 25px;
  top: 29px;
  width: 401px;
  margin: 0;
  font: 500 16px/normal var(--sans);
  color: #1a1a1a;
}

.ab-piece { position: absolute; display: block; max-width: none; }
.ab-piece--stickers { left: 1185.93px; top: 710.97px; }
.ab-piece--name { left: 105.06px; top: 366.04px; }
.ab-piece--logo { left: 734.05px; top: 152.02px; }

/* TPE / SGP: two columns, square corners. */
.ab-card--addresses {
  left: 1012.94px;
  top: 577px;
  width: 316px;
  padding: 16px;
  flex-direction: row;
  gap: 24px;
  border-radius: 0;
}
.ab-card--addresses div { flex: 1 0 0; min-width: 1px; display: flex; flex-direction: column; gap: 6px; }
.ab-card--addresses .ab-label { text-transform: none; }
.ab-card--addresses p { margin: 0; font: 400 11px/1.35 var(--sans); }
.ab-card--addresses a { font: 400 10px/normal var(--mono); color: inherit; text-decoration: none; white-space: nowrap; }

.ab-card--logos { left: 573.94px; top: 29px; border-radius: 0; gap: 0; }
.ab-card--logos img { display: block; }

.ab-card--contact { left: 147.94px; top: 876px; padding: 16px; gap: 0; border-radius: 0; }
.ab-card--contact a {
  font: 500 40px/1.15 var(--sans);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.ab-card--contact a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Our team: tear-off tabs, one already taken. */
.ab-team {
  position: absolute;
  left: 59px;
  top: 544px;
  width: 300px;
  border-radius: 4px;
  overflow: clip;
}
.ab-team .ab-label {
  padding: 22px 22px 18px;
  background: #acacac;
  border-radius: 4px 4px 0 0;
}
.ab-team ul { margin: 0; padding: 0; list-style: none; display: flex; }
.ab-team li {
  position: relative;
  flex: 1 0 0;
  min-width: 1px;
  height: 150px;
  background: #acacac;
  border-top: 1px dashed rgba(1, 1, 3, 0.6);
  border-right: 1px dashed rgba(1, 1, 3, 0.6);
}
.ab-team li:first-child { border-bottom-left-radius: 4px; }
.ab-team li:last-child { border-right: 0; border-bottom-right-radius: 4px; }
.ab-team li:has(+ .is-taken) { border-right: 0; }
.ab-team li.is-taken { background: none; border: 0; }
.ab-team li span {
  position: absolute;
  left: 15.6px;
  bottom: 6px;
  writing-mode: vertical-rl;
  rotate: 180deg;
  font: 400 8px/12px var(--mono);
  white-space: nowrap;
}