/* ============================================================
   /about-us: the person, the name, the method

   Built on css/system.css, in the same language as /schedule: mono
   kickers, framed photographs (a gold corner, a dot grid), tiles on
   white bands. Real material only: three photographs of the work,
   the client logos, and the 3W Loop drawn in its own colors. The
   template's 3D cube, cartoon figures and world map are gone.

   One 1240px wrap, like every other page.
   ============================================================ */

.ab { font-family: var(--pt-font); color: var(--pt-ink); }
.ab-wrap { width: 100%; max-width: var(--pt-maxw); margin-inline: auto; }
.ab-k {
  font-family: var(--pt-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--pt-primary); margin: 0;
}
.ab-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.ab-band { padding: var(--pt-section) var(--pt-gutter); }
.ab-band.white { background: var(--pt-surface); border-top: 1px solid var(--pt-border); border-bottom: 1px solid var(--pt-border); }
.ab-head { max-width: 760px; margin: 0 0 clamp(32px, 4vw, 48px); }
.ab-head h2, .ab-person-text h2 {
  font-size: var(--pt-fs-h2); font-weight: 700; line-height: 1.08; letter-spacing: -0.015em;
  margin: 0; color: var(--pt-ink); text-wrap: balance;
}
.ab-head .ab-lead { margin-top: 16px; }
.ab-lead { font-size: var(--pt-fs-lead); line-height: 1.55; color: var(--pt-ink-muted); margin: 0; max-width: var(--pt-measure); }
.ab-lead a, .ab-text a { color: var(--pt-primary); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ab-lead a:hover, .ab-text a:hover { color: var(--pt-primary-hover); }
.ab-text { font-size: 16.5px; line-height: 1.65; color: var(--pt-ink-muted); margin: 0; }

/* a photograph, framed the way /schedule frames its calendar */
.ab-photo { position: relative; margin: 0; }
.ab-photo::before {
  content: ""; position: absolute; left: -14px; top: -14px; width: 76px; height: 76px; z-index: 0;
  border-top: 2px solid var(--pt-gold); border-left: 2px solid var(--pt-gold); border-top-left-radius: 26px;
}
.ab-photo::after {
  content: ""; position: absolute; right: -20px; bottom: -20px; width: 148px; height: 148px; z-index: 0;
  background-image: radial-gradient(rgba(77, 83, 196, 0.32) 1.6px, transparent 1.6px);
  background-size: 14px 14px; border-radius: 10px;
}
.ab-photo img {
  position: relative; z-index: 1; display: block; width: 100%; height: auto;
  border-radius: var(--pt-r-card); box-shadow: var(--pt-shadow-lift); object-fit: cover;
}
.ab-photo figcaption {
  position: relative; z-index: 1; margin: 14px 4px 0; text-align: left;
  font-family: var(--pt-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--pt-ink-soft);
}

/* ---------- hero ---------- */
.ab-hero {
  position: relative; overflow: hidden;
  /* the nav floats over this band (css/nav.css), so its height comes first */
  padding: calc(var(--nav-h, 103px) + clamp(24px, 3.5vw, 56px)) var(--pt-gutter) clamp(48px, 6vw, 80px);
}
.ab-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(36% 56% at 78% 40%, rgba(77, 83, 196, 0.13), transparent 72%),
    radial-gradient(30% 42% at 4% 96%, rgba(220, 185, 88, 0.16), transparent 70%);
}
.ab-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
.ab-hero .pt-eyebrow { margin-bottom: 20px; }
.ab-hero h1 {
  font-size: var(--pt-fs-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em;
  margin: 0 0 22px; color: var(--pt-ink); max-width: 14ch; text-wrap: balance;
}
.ab-hero .ab-lead { max-width: 58ch; }
.ab-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.ab-stats {
  list-style: none; margin: clamp(32px, 4vw, 44px) 0 0; padding: 22px 0 0;
  border-top: 1px solid var(--pt-border);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.ab-stats b { display: block; }
.ab-stats .n {
  font-size: var(--pt-fs-stat); font-weight: 700; line-height: 1; letter-spacing: -0.02em;
  color: var(--pt-primary); font-variant-numeric: tabular-nums;
}
.ab-stats .l { display: block; margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--pt-ink-muted); }

.ab-hero-photo { max-width: 540px; justify-self: end; width: 100%; }
/* who is in the photo, as a card over its lower edge */
.ab-photo .ab-id {
  position: absolute; z-index: 2; left: -22px; bottom: 26px; margin: 0;
  display: grid; justify-items: start; gap: 2px; padding: 12px 16px;
  background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: var(--pt-r-tile);
  box-shadow: var(--pt-shadow-card);
}
.ab-id b { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--pt-ink); }
.ab-id span { font-family: var(--pt-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pt-ink-soft); }

/* ---------- client logos: the /schedule bar, inside the hero ----------
   It sat in a band of its own under the hero, where the hero's colour wash
   stopped in a hard line along the top of the card. */
.ab-proof {
  position: relative; z-index: 1; margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 14px 32px;
  padding: 22px 26px; background: rgba(255, 255, 255, 0.72); border: 1px solid var(--pt-border);
  border-radius: var(--pt-r-tile);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ab-proof .ab-k { line-height: 1.5; }
.ab-logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 18px 22px; margin: 0; padding: 0; list-style: none; }
.ab-logos li { display: flex; align-items: center; min-height: 28px; }
.ab-logos img {
  display: block; height: 24px; width: auto; max-width: 100%; object-fit: contain; object-position: left center;
  /* one tone for ten brands: pale logos (Bayer's light blue and green) darken, dark ones stay put */
  filter: grayscale(1) brightness(0.62) contrast(1.15); opacity: 0.78;
  transition: filter var(--pt-fast) var(--pt-ease), opacity var(--pt-fast) var(--pt-ease);
}
.ab-logos li:hover img { filter: none; opacity: 1; }
/* Bank Millennium's logo is a solid block: lifted, it sits in the same grey as the wordmarks */
.ab-logos img.is-block { height: 22px; filter: grayscale(1) brightness(2.1); opacity: 0.7; }

/* ---------- why "ProductTrio": three threes ---------- */
.ab-threes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ab-three {
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px 24px 26px; background: var(--pt-canvas); border: 1px solid var(--pt-border); border-radius: var(--pt-r-card);
}
.ab-three h3 { font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; margin: 0; color: var(--pt-ink); }
.ab-three .ab-text { font-size: 15.5px; line-height: 1.6; }
.ab-trio { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ab-trio li {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px;
  border-radius: var(--pt-r-pill); background: var(--pt-surface); border: 1px solid var(--pt-border);
  font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--pt-ink);
}
.ab-trio li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pt-primary); }
.ab-trio li:nth-child(2)::before { background: var(--pt-gold); }
.ab-trio li:nth-child(3)::before { background: #3e6b4b; }

/* ---------- the person ---------- */
.ab-person { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.ab-person-photo { max-width: 400px; }
.ab-person-photo img { aspect-ratio: 4 / 5; }
.ab-linkedin {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; margin-top: 18px;
  font-size: 15px; font-weight: 600; color: var(--pt-primary); text-decoration: none;
}
.ab-linkedin svg { width: 18px; height: 18px; flex: none; }
.ab-linkedin:hover { color: var(--pt-primary-hover); }
.ab-linkedin:focus-visible { outline: 2px solid var(--pt-primary); outline-offset: 3px; border-radius: 4px; }
.ab-person-text .pt-eyebrow { margin-bottom: 16px; }
.ab-person-text h2 { margin-bottom: 26px; }
.ab-name { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 12px; color: var(--pt-ink); }
.ab-person-text > .ab-text { font-size: 17px; line-height: 1.7; }
.ab-subs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.ab-sub { padding: 20px 22px; background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: var(--pt-r-tile); }
.ab-sub h3 { font-size: 17px; font-weight: 700; line-height: 1.3; margin: 0 0 10px; color: var(--pt-ink); }
.ab-sub .ab-text { font-size: 15px; line-height: 1.6; }
.ab-sub .ab-sub-note { margin: -4px 0 12px; font-size: 14px; color: var(--pt-ink-soft); }
.ab-countries { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ab-countries li {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 6px;
  border-radius: var(--pt-r-pill); background: var(--pt-canvas); border: 1px solid var(--pt-border);
  font-size: 13.5px; line-height: 1.2; color: var(--pt-ink);
}
/* the country code is drawn by CSS, so the list reads as plain country names */
.ab-countries li::before {
  content: attr(data-cc); font-family: var(--pt-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--pt-primary); background: var(--pt-tint); border-radius: var(--pt-r-pill); padding: 3px 6px;
}

/* ---------- how I work: the 3W Loop, in its own colors ---------- */
.ab-loop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
.ab-step {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 26px 24px 24px; background: var(--pt-canvas); border: 1px solid var(--pt-border); border-radius: var(--pt-r-card);
}
.ab-step .w {
  align-self: flex-start; padding: 9px 18px; border-radius: var(--pt-r-pill); border: 2px solid currentColor;
  font-family: var(--pt-mono); font-size: 14px; font-weight: 600; letter-spacing: 0.12em; line-height: 1;
}
.ab-step.where .w { color: var(--pt-primary); background: #eeeefb; }
.ab-step.why .w { color: #9a7616; background: #fbf0d6; }
.ab-step.whether .w { color: #3e6b4b; background: #e6f0e6; }
.ab-step h3 { font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; margin: 8px 0 0; color: var(--pt-ink); }
.ab-step .i { font-family: var(--pt-mono); font-size: 12.5px; letter-spacing: 0.02em; color: var(--pt-ink-soft); margin: 0; }
.ab-step .ab-text { font-size: 15.5px; line-height: 1.6; margin-top: 4px; }
/* the arrow to the next question */
.ab-step:not(:last-child)::after {
  content: ""; position: absolute; top: 47px; right: -35px; width: 26px; height: 2px; background: var(--pt-ink);
}
.ab-step:not(:last-child)::before {
  content: ""; position: absolute; top: 42px; right: -37px; z-index: 1;
  border-left: 10px solid var(--pt-ink); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
/* and the way back: the result is the next Where */
.ab-return {
  position: relative; margin: 0 calc(100% / 6) 0; height: 46px;
  border: 2px solid var(--pt-ink); border-top: 0; border-radius: 0 0 16px 16px;
}
.ab-return::before {
  content: ""; position: absolute; left: -8px; top: -2px;
  border-bottom: 11px solid var(--pt-ink); border-left: 7px solid transparent; border-right: 7px solid transparent;
}
.ab-return span {
  position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  padding: 0 14px; background: var(--pt-surface); white-space: nowrap;
  font-family: var(--pt-mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--pt-ink);
}
.ab-loop-more { margin: 36px 0 0; }

/* ---------- methodologies ---------- */
.ab-methods { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.ab-methods-side { position: sticky; top: calc(var(--nav-h, 103px) + 28px); }
.ab-methods-side .ab-head { margin-bottom: 36px; }
.ab-method-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; counter-reset: m; }
.ab-method {
  counter-increment: m; display: flex; flex-direction: column; gap: 10px;
  padding: 22px 22px 24px; background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: var(--pt-r-tile);
  box-shadow: var(--pt-shadow-card);
}
.ab-method::before {
  content: counter(m, decimal-leading-zero); font-family: var(--pt-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--pt-primary);
}
.ab-method h3 { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0; color: var(--pt-ink); }
.ab-method .by { align-self: flex-start; }
.ab-method .ab-text { font-size: 15px; line-height: 1.6; }

/* ---------- fit ---------- */
.ab-fit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ab-fit li {
  display: flex; flex-direction: column; gap: 12px; padding: 24px;
  background: var(--pt-canvas); border: 1px solid var(--pt-border); border-radius: var(--pt-r-card);
}
.ab-fit .mark {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--pt-tint); color: var(--pt-primary);
}
.ab-fit .mark svg { width: 18px; height: 18px; }
.ab-fit h3 { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0; color: var(--pt-ink); }
.ab-fit .ab-text { font-size: 15.5px; line-height: 1.6; }
.ab-fit li.no { background: transparent; border-style: dashed; border-color: var(--pt-border-strong); }
.ab-fit li.no .mark { background: rgba(179, 38, 30, 0.08); color: #b3261e; }

/* ---------- the close: one team, one number ---------- */
.ab-close-band { padding: 0 var(--pt-gutter) var(--pt-section); }
.ab-close {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: end;
  padding: clamp(36px, 5vw, 64px);
}
.ab-close h2 {
  font-size: var(--pt-fs-h2); font-weight: 700; line-height: 1.08; letter-spacing: -0.015em;
  margin: 0; color: var(--pt-ink-on-dark); text-wrap: balance;
}
.ab-close p:not(.pt-eyebrow):not(.pt-friction) { font-size: 17px; line-height: 1.65; color: var(--pt-ink-on-dark-muted); margin: 0 0 24px; }

/* ---------- motion: one staggered arrival, nothing after ---------- */
@keyframes ab-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ab-hero-copy, .ab-hero-photo { animation: ab-rise var(--pt-slow) var(--pt-ease) both; }
.ab-hero-photo { animation-delay: 90ms; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .ab-proof { grid-template-columns: minmax(0, 1fr); }
  .ab-threes, .ab-fit { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
  .ab-methods { grid-template-columns: minmax(0, 1fr); }
  .ab-methods-side { position: static; }
  .ab-methods-side .ab-photo { max-width: 560px; }
}
@media (max-width: 900px) {
  .ab-hero-grid, .ab-person, .ab-close { grid-template-columns: minmax(0, 1fr); }
  .ab-hero-photo { justify-self: start; }
  .ab-photo .ab-id { left: 12px; }
  .ab-subs { grid-template-columns: minmax(0, 1fr); }
  /* the loop runs down the page: arrows point down, the way back is a line on the left */
  .ab-loop { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 620px; }
  .ab-step:not(:last-child)::after { top: auto; bottom: -32px; right: auto; left: 44px; width: 2px; height: 24px; }
  .ab-step:not(:last-child)::before {
    top: auto; bottom: -36px; right: auto; left: 39px;
    border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 10px solid var(--pt-ink); border-bottom: 0;
  }
  /* the way back becomes a line of text under the last step */
  .ab-return { height: auto; margin: 22px 0 0; border: 0; border-radius: 0; }
  .ab-return::before { display: none; }
  .ab-return span { position: static; transform: none; display: inline-flex; gap: 10px; padding: 0; background: none; white-space: normal; }
  .ab-return span::before { content: "\21BA"; color: var(--pt-primary); font-weight: 600; }
}
@media (max-width: 600px) {
  .ab-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-stats { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ab-stats li { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: baseline; gap: 12px; }
  .ab-stats .l { margin-top: 0; }
  .ab-method-list { grid-template-columns: minmax(0, 1fr); }
  .ab-photo::before { left: -8px; top: -8px; width: 52px; height: 52px; }
  .ab-photo::after { right: -10px; bottom: -10px; width: 96px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-hero-copy, .ab-hero-photo { animation: none; }
  .ab-logos img { transition: none; }
}