/* Built Logic — About page, website pass v5 (12 Sep 2026).

   Four components only: one centred company introduction, one equal-weight team
   carousel at the same content width, one capability/responsibility section
   with a single Book a Strategy Call, and the shared compact footer. The v4
   internal-workflow example and the detached responsibility row are removed.

   The carousel itself is the shared `.bl-team` component in bl-visual.css and
   bl-visual.js. This file only sets the page-level container: the spacing above
   it and, scoped to `.ab-team`, the card width that makes exactly three
   complete cards fill the available track at desktop width. No other component
   class is restyled here.

   Locked palette only: #232A31, #FAFAF8, #1B3A5B, #AFC4DD, #586069, #E5E5E2,
   hover #17314D. */

.page-about {
  --ab-line: var(--bl-line-strong, rgba(35,42,49,.18));
  --ab-radius-card: var(--bl-radius-card, 12px);
}

/* ------------------------------------------------- company introduction */

.ab-lead {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

.ab-lead__title {
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.ab-lead__body {
  max-width: 640px;
  margin-inline: auto;
  margin-top: 20px;
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.6;
  color: #232A31;
}

/* ----------------------------------------------- team carousel, page frame */

.ab-team { margin-top: 40px; }

@media (min-width: 900px) { .ab-team { margin-top: 56px; } }

/* Container geometry: three complete cards, no clipped fourth at the right
   edge. The gap is restated locally so the division is deterministic, and the
   track's side padding is dropped so the first snap position is 0 and card one
   is not shaved by the scroll offset. Vertical padding stays for the ring. */
.ab-team .bl-team__track {
  --ab-team-gap: 20px;
  gap: var(--ab-team-gap);
  padding-inline: 0;
  /* v6: the track is a flex row, so by default every card stretched to the
     tallest one. The tallest is a capability reservation with a three-line
     note, and that height was inherited by Kristian's and Sophie's cards: the
     blank band below a short caption on mobile, and the reason the controls had
     the whole card to centre against. Each card is now its own height and every
     caption sits directly under its own picture. The frames still share one
     aspect ratio and one top edge, so no height is animated or reserved. */
  align-items: flex-start;
}

.ab-team .bl-team__card {
  flex: 0 0 calc((100% - 2 * var(--ab-team-gap)) / 3);
}

/* Fewer cards than the row holds (two today): centre them rather than leave a
   gap on the right. "safe" keeps a scrolling row start-aligned, so a longer
   team still scrolls from its first card. */
@media (min-width: 768px) {
  .ab-team .bl-team__track { justify-content: safe center; }
  .ab-team.bl-team--static .bl-team__track { justify-content: center; }
}

/* One complete card per view; a peeking edge would cut the next card's name. */
@media (max-width: 767px) {
  .ab-team .bl-team__track { --ab-team-gap: 14px; }
  .ab-team .bl-team__card { flex: 0 0 100%; }
}

/* v6: the short caption is centred under its own picture. The reservation's
   longer description stays left-aligned and within the card's own width: a
   three-line sentence reads worse centred, and it must not stretch to the
   carousel. */
.ab-team .bl-team__name,
.ab-team .bl-team__role { text-align: center; }

/* The capability reservations carry a one-line description of the capability
   being reserved. Real profiles have no note, so the rule is scoped to the
   reservation variant and cannot add anything to a person's card. */
.bl-team__card--reservation .ab-team__note {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: #586069;
}

/* ------------------------------- capability and responsibility, one unit */

.ab-expertise {
  max-width: 900px;
  margin-inline: auto;
  padding: 28px 24px;
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius-card);
  background: #FAFAF8;
}

/* v6: the introduction sits on the panel's axis. Centred geometry only: the
   capability cells below keep their left-aligned text, because .ab-expertise
   itself is never centred. */
.ab-expertise__head { text-align: center; }

.ab-expertise__title {
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.12;
  margin: 0;
}

/* 58ch in the paragraph's own font, inside the 55-65 character target. */
.ab-expertise__body {
  max-width: 58ch;
  margin: 14px auto 0;
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.6;
  color: #586069;
}

.ab-expertise__list {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 26px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--ab-line);
}

.ab-expertise__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.ab-expertise__mark {
  margin-top: 2px;
  color: #586069;
  flex: 0 0 auto;
}

.ab-expertise__label {
  margin: 0;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  color: #232A31;
}

.ab-expertise__text {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: #586069;
}

/* v6: one centred action, at least 32px clear of the last capability row. */
.ab-expertise__action { margin-top: 32px; text-align: center; }

@media (min-width: 900px) {
  .ab-expertise { padding: 36px 40px; }
  .ab-expertise__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 24px;
    margin-top: 30px;
    padding-top: 28px;
  }
  .ab-expertise__action { margin-top: 36px; }
}

/* ---------------------------------------------------------- section rhythm */

.ab-section { padding-block: 56px 88px; }
.ab-section--lead { padding-block: 104px 0; }

/* v6: on mobile the carousel's control row is the last thing in the section
   above, so this top padding is the whole gap between the controls and the
   capability panel: 48px, the handoff's 40-48 band. */
@media (max-width: 767px) {
  #expertise .ab-section { padding-top: 48px; }
}

@media (min-width: 900px) {
  .ab-section { padding-block: 72px 112px; }
  .ab-section--lead { padding-block: 132px 0; }
}

/* ---------------------------------------------- refresh (25 Sep 2026) */
/* Rules: 03_Marketing/Website/website-refresh-rules.md. The introduction
   gets the homepage's Light Blue field and halftone dots; the expertise panel
   becomes a tinted sheet of icon cards. Shared pieces live in bl-visual.css. */

.ab-hero { overflow: hidden; }
.ab-hero::before { content: ''; position: absolute; z-index: 0; right: -12vw; top: 40px; width: min(44vw, 620px); aspect-ratio: 1; border-radius: 50%; background: rgba(175, 196, 221, 0.28); pointer-events: none; }
.ab-hero::after { content: ''; position: absolute; z-index: 0; left: 3vw; top: 150px; width: min(22vw, 300px); height: min(14vw, 200px); border-radius: 28px; background-image: radial-gradient(#1B3A5B 1.3px, transparent 1.6px); background-size: 16px 16px; opacity: .3; pointer-events: none; }
.ab-hero > * { z-index: 1; }

.page-about .ab-expertise { max-width: 1080px; padding: clamp(32px, 4vw, 56px) clamp(20px, 4vw, 56px); border: 0; border-radius: clamp(20px, 3vw, 36px); background: var(--bl-tint); }
.page-about .ab-expertise__list { gap: 16px; border-top: 0; padding-top: 0; margin-top: clamp(26px, 3vw, 36px); }
.page-about .ab-expertise__item { grid-template-columns: 48px minmax(0, 1fr); gap: 18px; padding: 22px; }
.page-about .ab-expertise__label { font-size: 18px; margin-top: 2px; }
.page-about .ab-expertise__action .bl-alt { margin-top: 18px; }

@media (min-width: 900px) {
  .page-about .ab-expertise__list { column-gap: 16px; row-gap: 16px; }
}
@media (max-width: 760px) {
  .ab-hero::before { width: 90vw; right: -45vw; top: 20px; }
  .ab-hero::after { display: none; }
}