/* About block, shared by /about (AI mode) and the standard home (/work#about).
   Editorial zigzag after perryw-2023.webflow.io/info: statement headline, framed photos,
   short titled stories set beside each picture. */
.ab { --ab-ink: #F4F2EC; --ab-muted: #A9A59C; --ab-line: rgba(255, 255, 255, .12);
  width: min(1120px, calc(100% - 2 * var(--ax-pad, 24px))); margin-inline: auto; color: var(--ab-ink); }
.about-v5 { padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 4rem); }

.ab-lead { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: end; }
.ab-eyebrow { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.1rem; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ab-muted); }
.ab-eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--ax-brand, #FFCD29); box-shadow: 0 0 12px rgba(255, 205, 41, .7); }
.ab-title { margin: 0; max-width: 14ch; font-size: clamp(2.2rem, 5.4vw, 4.4rem); font-weight: 600; line-height: 1.04; letter-spacing: -.04em; color: var(--ab-ink); text-wrap: balance; }
.ab-head { align-self: start; position: sticky; top: calc(var(--ax-head-h, 72px) + 2rem); }
/* The lead photo's caption, above it rather than under. Centred on the picture, like
   the four .ab-cap descriptions on the paired photos below. */
.ab-caption { margin: 0 0 .9rem; font-size: .9rem; line-height: 1.45; color: var(--ab-muted); text-align: center; }

/* The figure is a plain box; `.ab-frame` is the card. They were one element until the
   descriptions arrived: a caption inside the frame sat on the card's own bed, and the
   description belongs under the picture on the page, not in the container with it.
   The frame is what carries `overflow: hidden`, which is what clips the hover zoom. */
.ab-img { margin: 0; }
.ab-frame { display: block; border-radius: 14px; overflow: hidden; background: #111; border: 1px solid var(--ab-line); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.ab-img img { display: block; width: 100%; height: auto; transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.ab-img:hover img { transform: scale(1.025); }
/* Image descriptions on the four paired photos, under the frame and centred on it. The
   lead photo's caption is a <p class="ab-caption"> above it instead, which is why these
   start at the second image. */
.ab-cap {
  margin-top: .75rem; text-align: center;
  font-size: .85rem; line-height: 1.45; color: var(--ab-muted);
}

.ab-pairs { display: flex; flex-direction: column; gap: clamp(3rem, 9vw, 7.5rem); margin-top: clamp(3rem, 9vw, 7.5rem); }
.ab-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; }
.ab-pair .ab-img { width: 88%; }
.ab-pair.is-flip .ab-img { order: 2; justify-self: end; }
.ab-pair.is-flip .ab-text { order: 1; }
.ab-text { max-width: 46ch; }
.ab-text h3, .ab-text h2 { margin: 0 0 1rem; font-size: clamp(1.1rem, 1.7vw, 1.35rem); font-weight: 600; letter-spacing: -.015em; color: var(--ab-ink); }
.ab-text p { margin: 0 0 .9rem; font-size: clamp(.95rem, 1.15vw, 1.02rem); line-height: 1.65; color: var(--ab-muted); }
.ab-text p:last-child { margin-bottom: 0; }

/* Testimonials that follow the block on /about */
.about-quotes { padding-bottom: clamp(3rem, 7vw, 5rem); }

@media (max-width: 860px) {
  .ab-lead, .ab-pair { grid-template-columns: 1fr; }
  .ab-head { position: static; }
  .ab-pair .ab-img, .ab-pair.is-flip .ab-img { order: 0; width: 100%; justify-self: stretch; }
  .ab-pair.is-flip .ab-text { order: 1; }
  .ab-pairs { gap: 3rem; margin-top: 3rem; }
}
@media (min-width: 1920px) { .ab { width: min(1360px, calc(100% - 2 * var(--ax-pad, 24px))); } }
@media (prefers-reduced-motion: reduce) { .ab-img img { transition: none; } }

/* Standard home: the block sits inside the About section */
.st-about .ab { width: 100%; }
.st-about .ab-head { top: calc(var(--ax-head-h, 72px) + 1.5rem); }
/* DF4: body line under "What people say…" with 24px rhythm to the cards */
.about-quotes .cs-closing h2 { margin-bottom: 24px; }
.quotes-lead { max-width: 60ch; margin: 0 auto 40px; font-size: clamp(.95rem, 1.2vw, 1.05rem); line-height: 1.6; color: #B4B4B4; text-align: center; }
.st-quotes-h + .quotes-lead { margin: -0.25rem 0 40px; text-align: left; margin-left: 0; }
/* .cs-closing is a case study's sign-off, where 96px under the rule is right. Here it
   is a section heading a little way down the About page, and that much air read as a
   gap rather than as a break. */
.about-quotes .cs-closing { padding-top: var(--sp-12); }
.st-quotes-h { margin-bottom: 24px; }

/* Content feedback: Experience list below About me (after perryw-2023.webflow.io/info) */
.ab-exp { margin-top: clamp(3.5rem, 9vw, 7rem); }
.ab-exp-h { margin: 0 0 clamp(1.25rem, 3vw, 2rem); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ab-muted); }
.ab-exp-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--ab-line); }
.ab-exp-row { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem minmax(0, 1.35fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: baseline; padding: clamp(1.1rem, 2.4vw, 1.6rem) 0; border-top: 1px solid var(--ab-line); }
.ab-exp-row p { margin: 0; }
.ab-exp-co { font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 600; letter-spacing: -.015em; color: var(--ab-ink); }
.ab-exp-title { margin-top: .3rem !important; font-size: .92rem; line-height: 1.45; color: var(--ab-muted); }
.ab-exp-date { font-size: .9rem; color: var(--ab-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ab-exp-desc { font-size: clamp(.95rem, 1.15vw, 1.02rem); line-height: 1.65; color: var(--ab-muted); max-width: 52ch; }
.ab-exp-row:first-child .ab-exp-date { color: var(--ab-ink); }
@media (max-width: 860px) {
  .ab-exp-row { grid-template-columns: 1fr auto; row-gap: .6rem; }
  .ab-exp-desc { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .ab-exp-row { grid-template-columns: 1fr; row-gap: .45rem; }
}