/* About page (about.html). Every rule is scoped to .about-page; shared parts (header language
   pills, compact footer, buttons, the .media-split layout) live in components.css. Mobile first:
   < 480 single column · ≥ 480 two-column cards · ≥ 768 side-by-side sections, horizontal
   process · ≥ 1024 four-column rows (the approved desktop layout). */

/* ----------------------------------------------------------- Shared pieces */

.about-page .ab-eyebrow {
  color: var(--color-brand);
  font-size: clamp(15px, 0.3vw + 13px, 17px);
  font-weight: 700;
  line-height: 1.6;
}

.about-page .ab-heading {
  margin-block-start: 4px;
  font-size: clamp(26px, 1.9vw + 15px, 40px);
  font-weight: var(--weight-display);
  line-height: 1.4;
}

.about-page .ab-section-head {
  display: grid;
  justify-items: center;
  text-align: center;
}

.about-page .ab-section-head__text {
  margin-block-start: 6px;
  font-size: clamp(16px, 0.3vw + 14px, 18px);
  line-height: 1.8;
}

/* ------------------------------------------------------------------ Hero */

.about-page .ab-hero {
  border-bottom: var(--rule);
}

.about-page .ab-hero__content {
  padding-block: var(--space-8) 0;
}

.about-page .ab-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  line-height: 1.6;
}

.about-page .ab-crumbs__list li + li::before {
  content: "/";
  margin-inline: 8px;
}

.about-page .ab-crumbs__link {
  display: inline-block;
  padding-block: 2px;
  margin-block: -2px;
}

.about-page .ab-crumbs__link:hover {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.about-page .ab-crumbs [aria-current="page"] {
  color: var(--color-brand);
  font-weight: 600;
}

.about-page .ab-hero__title {
  margin-block-start: 10px;
  color: var(--color-brand);
  font-size: clamp(40px, 3.4vw + 27px, 72px);
  font-weight: var(--weight-display);
  line-height: 1.25;
}

.about-page .ab-hero__subtitle {
  margin-block-start: 8px;
  font-family: var(--font-heading);
  font-size: clamp(18px, 0.8vw + 15px, 26px);
  font-weight: var(--weight-heading);
  line-height: 1.55;
}

.about-page .ab-hero__text {
  margin-block-start: 14px;
  font-size: clamp(16px, 0.3vw + 14px, 18px);
  line-height: 1.9;
}

.about-page .ab-hero__cta {
  margin-block-start: 24px;
}

.about-page .ab-hero__media {
  align-self: end;
}

@media (min-width: 768px) {
  .about-page .ab-hero__content {
    padding-block: var(--space-8);
  }
}

/* ----------------------------------------------------------------- Intro */

.about-page .ab-intro {
  padding-block: var(--space-10) var(--space-6);
  scroll-margin-top: var(--space-2);
}

.about-page .ab-intro__text {
  margin-block-start: 14px;
  font-size: clamp(16px, 0.3vw + 14px, 18px);
  line-height: 1.95;
}

.about-page .ab-intro__closing {
  margin-block-start: 20px;
  color: var(--color-brand);
  font-family: var(--font-heading);
  font-size: clamp(20px, 0.8vw + 16px, 27px);
  font-weight: var(--weight-heading);
  line-height: 1.6;
}

.about-page .ab-intro__signature {
  margin-block-start: 4px;
  font-size: clamp(15px, 0.3vw + 13px, 17px);
  font-weight: 600;
}

.about-page .ab-intro__figure {
  gap: 8px;
}

.about-page .ab-intro__caption {
  padding-inline: var(--gutter);
  font-size: var(--fs-small);
  line-height: 1.6;
}

@media (min-width: 768px) {
  .about-page .ab-intro__caption {
    padding-inline: 0;
    text-align: center;
  }
}

/* ---------------------------------------------------------- Capabilities */

.about-page .ab-capabilities {
  padding-block: var(--space-6) var(--space-10);
}

.about-page .ab-capabilities__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: var(--rule);
  border-radius: 12px;
}

.about-page .ab-capability {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  padding: 28px 16px;
  text-align: center;
}

.about-page .ab-capability + .ab-capability {
  border-top: var(--rule);
}

.about-page .ab-capability__icon,
.about-page .ab-value__icon {
  width: 52px;
  height: 52px;
  margin-block-end: 8px;
}

.about-page .ab-capability__title,
.about-page .ab-value__title {
  font-size: clamp(19px, 0.4vw + 16px, 22px);
  line-height: 1.5;
}

.about-page .ab-capability__text,
.about-page .ab-value__text {
  font-size: clamp(15px, 0.2vw + 13px, 16px);
  line-height: 1.7;
}

@media (min-width: 480px) {
  .about-page .ab-capabilities__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-page .ab-capability + .ab-capability {
    border-top: 0;
  }

  .about-page .ab-capability:nth-child(even) {
    border-inline-start: var(--rule);
  }

  .about-page .ab-capability:nth-child(n + 3) {
    border-top: var(--rule);
  }
}

@media (min-width: 1024px) {
  .about-page .ab-capabilities__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-block: 12px;
  }

  .about-page .ab-capability:nth-child(n + 3) {
    border-top: 0;
  }

  .about-page .ab-capability + .ab-capability {
    border-inline-start: var(--rule);
  }
}

/* ---------------------------------------------------------------- Values */

.about-page .ab-values {
  padding-block: var(--space-6) var(--space-10);
}

.about-page .ab-values__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-block-start: var(--space-8);
}

.about-page .ab-value {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  padding: 32px 18px 28px;
  border: var(--rule);
  border-radius: var(--radius-panel);
  text-align: center;
}

@media (min-width: 480px) {
  .about-page .ab-values__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .about-page .ab-values__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}

/* --------------------------------------------------------------- Process */
/* A collaboration process, not a company history: five steps joined by a line. Vertical on
   narrow screens, horizontal from 768px. */

.about-page .ab-process {
  padding-block: var(--space-6) var(--space-12);
}

.about-page .ab-process__steps {
  position: relative;
  display: grid;
  gap: 22px;
  width: fit-content;
  margin: var(--space-8) auto 0;
  padding: 0;
  list-style: none;
}

.about-page .ab-process__steps::before {
  content: "";
  position: absolute;
  inset-block: 10px;
  inset-inline-start: 7px;
  width: 2px;
  background: var(--color-brand);
}

.about-page .ab-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

.about-page .ab-step__dot {
  flex: none;
  width: 16px;
  height: 16px;
  border: 3px solid var(--color-white);
  border-radius: 50%;
  background: var(--color-brand);
  box-sizing: content-box;
  margin-inline-start: -3px;
}

.about-page .ab-step__title {
  font-family: var(--font-heading);
  font-size: clamp(18px, 0.4vw + 15px, 21px);
  font-weight: var(--weight-heading);
  line-height: 1.5;
}

@media (min-width: 768px) {
  .about-page .ab-process__steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    width: auto;
    margin-block-start: var(--space-10);
  }

  .about-page .ab-process__steps::before {
    inset-block: 10px auto;
    inset-inline: 10%;
    width: auto;
    height: 2px;
  }

  .about-page .ab-step {
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }

  .about-page .ab-step__dot {
    margin-inline-start: 0;
  }
}

/* ------------------------------------------------------------------ Team */

.about-page .ab-team {
  padding-block: var(--space-6) var(--space-10);
}

.about-page .ab-team__text {
  margin-block-start: 12px;
  font-size: clamp(16px, 0.3vw + 14px, 18px);
  line-height: 1.95;
}

.about-page .ab-team__cta {
  margin-block-start: 24px;
}

/* ---------------------------------------------------------- Technologies */

.about-page .ab-tech {
  padding-block: var(--space-8) var(--space-10);
}

.about-page .ab-tech__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-block-start: var(--space-8);
  padding: 0;
  list-style: none;
}

.about-page .ab-tech__item {
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 6px 10px;
  border: var(--border);
  border-radius: var(--radius-control);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}

@media (min-width: 600px) {
  .about-page .ab-tech__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* One row with thin separators, as approved, once all eight names fit. */
@media (min-width: 1024px) {
  .about-page .ab-tech__list {
    display: flex;
    justify-content: space-between;
    gap: 0;
  }

  .about-page .ab-tech__item {
    flex: 1 1 0;
    min-height: 44px;
    padding: 4px 12px;
    border: 0;
    border-radius: 0;
    font-size: clamp(19px, 0.6vw + 13px, 22px);
  }

  .about-page .ab-tech__item + .ab-tech__item {
    border-inline-start: var(--border);
  }
}

/* ------------------------------------------------------------------- CTA */

.about-page .ab-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: var(--rule);
}

/* Decorative drawing behind the call to action — the only absolutely positioned block. */
.about-page .ab-cta__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
}

.about-page .ab-cta__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
}

.about-page .ab-cta__inner {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding-block: clamp(40px, 4vw, 60px) clamp(44px, 4.4vw, 64px);
  text-align: center;
}

.about-page .ab-cta__title {
  color: var(--color-brand);
  font-size: clamp(22px, 1.5vw + 15px, 36px);
  font-weight: var(--weight-display);
  line-height: 1.45;
}

.about-page .ab-cta__text {
  font-size: clamp(16px, 0.3vw + 14px, 18px);
  line-height: 1.8;
}

.about-page .ab-cta .button {
  min-width: 180px;
  margin-block-start: 14px;
}

/* Headings beside an illustration sit in a narrower column than the centred section heads. */
.about-page .media-split .ab-heading {
  font-size: clamp(24px, 1.4vw + 15px, 34px);
}