/* ============================================================
   ABOUT US
   ------------------------------------------------------------
   The reference computed every grid from a measured width in
   JavaScript. These are the same breakpoints as media queries,
   so the layout is right in the first paint and stays right
   with scripting off.

   Breakpoints, from the handoff: 1180 (values 5 -> 3), 1000
   (hero and split stack, values 3 -> 2), 900 (recognition and
   CTA stack), 860 (timeline stacks), 700 (team stacks), 620
   (values and certs to the narrowest).
   ============================================================ */

/* ---------- shared section furniture ---------- */

.ab-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--accent-wash);
  border-radius: 99px;
  padding: 7px 16px;
  margin-bottom: 16px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.ab-eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.ab-eyebrow--dark { background: var(--accent-on-dark); color: var(--accent); }

.ab-head { text-align: center; max-width: 760px; margin: 0 auto clamp(28px, 3.4vw, 42px); }
.ab-head__text { font-size: 16px; line-height: 1.72; color: var(--ink-body); margin: 0; text-wrap: pretty; }

.ab-h2 {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: -1px;
  text-wrap: balance;
}
.ab-h2--dark { color: var(--on-navy-primary); }

.ab-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 9px;
}

.ab-tile {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ab-btn {
  white-space: nowrap;
  background: var(--brand);
  color: var(--on-navy-primary);
  font-size: 15.5px;
  font-weight: 700;
  padding: 16px 30px;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(4, 100, 173, .24);
  transition: background var(--transition);
}
.ab-btn:hover { background: var(--brand-dark); color: var(--on-navy-primary); }

.ab-btn-quiet {
  white-space: nowrap;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  padding: 16px 4px;
  border-bottom: 2px solid var(--accent);
}
.ab-btn-quiet:hover { color: var(--brand); }

/* ---------- hero ---------- */

.ab-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.ab-hero__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

.ab-hero__card {
  position: absolute;
  right: -6px;
  bottom: 4px;
  background: var(--surface);
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 1px 2px rgba(20, 35, 47, .04), 0 8px 22px rgba(20, 35, 47, .07);
}
.ab-hero__year {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent-wash);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}

/* ---------- why we exist ---------- */

.ab-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.ab-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ab-compare__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.ab-compare__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 14.5px;
}
.ab-mark {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-mark--no  { background: var(--border); }
.ab-mark--yes { background: var(--brand); }

.ab-note {
  background: var(--ink-navy);
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  gap: 14px;
  align-items: stretch;
  box-shadow: 0 14px 32px rgba(3, 36, 74, .22);
}
.ab-note__bar { flex: none; width: 6px; border-radius: 3px; background: var(--accent); }
.ab-note__text p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--on-navy-primary);
  margin: 0;
  font-weight: 600;
}
.ab-note__text strong,
.ab-note__text em { color: var(--accent); font-style: normal; }

/* ---------- mission and vision ---------- */

.ab-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(20, 35, 47, .04), 0 8px 22px rgba(20, 35, 47, .07);
}
.ab-card__media { position: relative; }
.ab-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ab-card__strip { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; }
.ab-card__body { padding: 26px 28px 30px; }
.ab-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ab-card__title { font-size: 26px; font-weight: 800; color: var(--ink); margin: 0; letter-spacing: -.7px; }
.ab-card__text p { font-size: 16.5px; line-height: 1.72; color: var(--ink-body); margin: 0; text-wrap: pretty; }
.ab-card__text p + p { margin-top: 14px; }
.ab-card__text strong { color: var(--ink); }

/* ---------- values ---------- */

.ab-values { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ab-value {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand);
  border-radius: 16px;
  padding: 24px 22px;
  box-shadow: 0 1px 2px rgba(20, 35, 47, .04), 0 8px 22px rgba(20, 35, 47, .07);
  transition: transform 170ms ease, box-shadow 170ms ease;
}
.ab-value:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(20, 35, 47, .06), 0 18px 40px rgba(4, 100, 173, .16);
}
.ab-value__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ab-value__head .ab-tile { width: 50px; height: 50px; }
.ab-value__n { font-size: 13px; font-weight: 800; color: var(--ink-muted); letter-spacing: .04em; }
.ab-value__t { font-size: 17px; line-height: 1.3; font-weight: 800; color: var(--ink); margin: 0 0 8px; letter-spacing: -.3px; }
.ab-value__d { font-size: 14.5px; line-height: 1.6; color: var(--ink-body); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .ab-value { transition: none; }
  .ab-value:hover { transform: none; }
}

/* ---------- story ---------- */

.ab-story__lead p {
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.55;
  color: var(--ink);
  font-weight: 600;
  margin: 0;
  letter-spacing: -.3px;
  text-wrap: pretty;
}
.ab-story__lead strong,
.ab-story__lead em { color: var(--brand); font-style: normal; }
.ab-story__body p { font-size: 16px; line-height: 1.72; color: var(--ink-body); margin: 0; }
.ab-story__body p + p { margin-top: 14px; }
.ab-story__body strong { color: var(--ink); }

.ab-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-timeline__line {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 27px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-pale), var(--brand));
}
.ab-milestone { position: relative; display: flex; flex-direction: column; align-items: center; }
.ab-milestone__pill {
  position: relative;
  z-index: 1;
  height: 56px;
  min-width: 56px;
  padding: 0 16px;
  border-radius: 99px;
  border: 4px solid var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.3px;
}
.ab-milestone__card {
  margin-top: 16px;
  width: 100%;
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(20, 35, 47, .04), 0 8px 22px rgba(20, 35, 47, .07);
}
.ab-milestone__text { font-size: 15px; line-height: 1.66; color: var(--ink-body); margin: 0; }

.ab-aside {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--ink-muted);
  border-radius: 14px;
  padding: 22px 24px;
}
.ab-aside__text p { font-size: 15px; line-height: 1.66; color: var(--ink-body); margin: 0; }
.ab-aside__text p + p { margin-top: 12px; }
.ab-aside__text strong { color: var(--ink); }

/* ---------- recognition ---------- */

.ab-rec { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.ab-rec__text p { font-size: 16.5px; line-height: 1.72; color: var(--on-navy-tertiary); margin: 0; max-width: 560px; }
.ab-rec__text strong { color: var(--on-navy-primary); }
.ab-rec__plate {
  justify-self: center;
  background: var(--surface);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .28);
  width: min(100%, 250px);
}
.ab-rec__plate img { display: block; width: 100%; height: auto; }

/* ---------- team ---------- */

/*
 * Flex rather than grid, so a short last row centres instead of hugging the
 * left. Five people are three and two: in a grid the second row sat under the
 * first two columns with a card-sized hole beside it, which reads as a card
 * that failed to load rather than as the end of the team.
 *
 * The basis is computed from the gap, so three cards fill the row exactly at
 * every width the clamp produces.
 */
.ab-team {
  --ab-gap: clamp(16px, 2vw, 24px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ab-gap);
}
.ab-team > * { flex: 0 1 calc((100% - 2 * var(--ab-gap)) / 3); }
.ab-person {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(20, 35, 47, .04), 0 8px 22px rgba(20, 35, 47, .07);
}
.ab-person__media { padding: 22px 22px 0; }
.ab-person__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top center;
  border-radius: 14px 14px 0 0;
}
.ab-person__body { padding: 20px 24px 26px; border-top: 4px solid var(--brand); flex: 1; }
.ab-person__name { font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -.4px; }
.ab-person__role {
  display: inline-block;
  margin: 8px 0 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 7px;
  padding: 5px 10px;
}
.ab-person__bio { font-size: 14.5px; line-height: 1.62; color: var(--ink-body); margin: 0; }

/* ---------- clients ---------- */

.ab-clients { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ab-client {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-client .logo-tile { width: 100%; height: 100%; }

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

.ab-cta {
  background: linear-gradient(120deg, #03244A 0%, #0464AD 100%);
  border-radius: 24px;
  padding: clamp(30px, 4.4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  box-shadow: 0 24px 50px rgba(3, 36, 74, .24);
}
.ab-cta__title {
  font-size: clamp(26px, 3.1vw, 40px);
  line-height: 1.1;
  font-weight: 800;
  color: var(--on-navy-primary);
  margin: 0 0 14px;
  letter-spacing: -1.1px;
}
.ab-cta__text { font-size: 17px; line-height: 1.66; color: #D4E6F6; margin: 0; max-width: 560px; }
.ab-cta__action { justify-self: end; }
.ab-cta__btn {
  display: inline-block;
  white-space: nowrap;
  background: var(--accent);
  color: var(--accent-ink-darkest);
  font-size: 16.5px;
  font-weight: 800;
  padding: 18px 34px;
  border-radius: 12px;
  box-shadow: 0 12px 26px rgba(240, 165, 0, .34);
  transition: background var(--transition);
}
.ab-cta__btn:hover { background: #FFB81F; color: var(--accent-ink-darkest); }

/* ---------- certifications ---------- */

.ab-certs__label {
  text-align: center;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 18px;
}
.ab-certs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ab-cert {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  box-shadow: 0 1px 2px rgba(20, 35, 47, .04), 0 8px 22px rgba(20, 35, 47, .07);
}
.ab-cert img { max-width: 100%; max-height: 62px; width: auto; height: auto; object-fit: contain; }

/* ---------- breakpoints ---------- */

@media (max-width: 1180px) {
  .ab-values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1040px) {
  .ab-clients { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .ab-hero,
  .ab-split { grid-template-columns: 1fr; }
  .ab-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-certs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Five values into two columns leaves the fifth alone on its row. It
     takes the full width instead, which reads as the end of the list
     rather than as a card that failed to line up. */
  .ab-values > .ab-value:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .ab-rec { grid-template-columns: 1fr; }
  .ab-rec__plate { justify-self: start; }
  .ab-cta { grid-template-columns: 1fr; }
  .ab-cta__action { justify-self: start; }
}

@media (max-width: 860px) {
  .ab-timeline { grid-template-columns: 1fr; }
  /* Stacked, there is nothing left for the line to connect. */
  .ab-timeline__line { display: none; }
  .ab-milestone { align-items: flex-start; }
}

@media (max-width: 820px) {
  .ab-clients { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .ab-team > * { flex-basis: 100%; }
}

@media (max-width: 620px) {
  .ab-values { grid-template-columns: 1fr; }
  .ab-certs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .ab-clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-compare { grid-template-columns: 1fr; }
  .ab-hero__card { position: static; margin-top: 14px; right: auto; bottom: auto; }
}