/* About us page. Loaded only on /about-us/ via $page['css']. */

.ab-hero__photo { aspect-ratio: 4 / 3.2; }
.ab-hero__note { margin-top: 16px; display: flex; gap: 10px; align-items: center; font-size: .92rem; color: var(--muted); }
.ab-hero__note i { color: var(--brand); }

/* What we believe */
.ab-intro { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(48px, 6vw, 88px); }
.ab-intro .eyebrow { grid-column: 1 / -1; }
.ab-intro__lead { max-width: 32em; }

.ab-principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: ab; border-top: 1px solid var(--text); }
.ab-principle { counter-increment: ab; padding: 28px 28px 8px 0; }
.ab-principle + .ab-principle { padding-left: 28px; border-left: 1px solid var(--line); }
.ab-principle::before {
  content: counter(ab, decimal-leading-zero); display: block; margin-bottom: 22px;
  font: italic 400 2.8rem/1 var(--font-serif); color: var(--emerald);
}
.ab-principle h3 { font-size: var(--fs-h4); }
.ab-principle p { margin-top: 10px; color: var(--muted); font-size: .97rem; }

/* How we work */
.ab-remote__photo { aspect-ratio: 4 / 3.2; }
.ab-ways { display: grid; gap: 16px; margin-top: 4px; }
.ab-ways li { display: flex; gap: 14px; align-items: flex-start; color: var(--muted); }
.ab-ways i { flex: 0 0 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--mint); color: var(--brand); font-size: .9rem; }
.ab-ways strong { color: var(--text); font-weight: 600; }

/* Why a team outside Newport */
.ab-newport { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ab-newport .section-title { max-width: 14ch; }
.ab-newport a { color: var(--citron); font-weight: 500; }

/* Who we suit: a bento grid, with the two photos set among the cards (cards reuse .tile) */
.ab-fit {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px);
  grid-template-areas: "photo c1 c2" "photo c3 c4" "c5 c5 team";
}
.ab-fit__photo { position: relative; min-height: 220px; border-radius: var(--radius); overflow: hidden; }
.ab-fit__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* the photo fills its cell rather than setting its size */
.ab-fit__photo--tall { grid-area: photo; }
.ab-fit__photo--team { grid-area: team; }
.ab-fit__card--1 { grid-area: c1; }
.ab-fit__card--2 { grid-area: c2; }
.ab-fit__card--3 { grid-area: c3; }
.ab-fit__card--4 { grid-area: c4; }
.ab-fit__card--5 { grid-area: c5; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 22px; align-content: center; }
.ab-fit__card--5 .tile__icon { grid-row: span 2; margin-bottom: 0; }
.ab-fit__card--5 h3 { align-self: end; }
.ab-fit .tile:not(.tile--accent) { background: var(--paper); border-color: transparent; } /* cards read as panels on the white section */
/* Lift with translate: the scroll reveal leaves an inline transform on each card, which would cancel a transform lift */
.ab-fit .tile { transition: translate .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.ab-fit .tile:hover { translate: 0 -4px !important; }

/* The closing enquiry section sits straight after "Working together" */
#enquire { padding-top: 0; }

/* Working together: two columns, the second set a little lower */
.ab-expect { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); align-items: start; padding-bottom: clamp(0px, 4vw, 48px); }
.ab-expect__item {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px 18px; padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius); background: var(--white); border: 1px solid var(--line-soft);
}
/* The second column sits lower. Relative positioning (not a margin) keeps both rows their natural
   height, so cards stack with the same gap as the columns; the grid's bottom padding makes room for
   the shift. (Not translate: the scroll reveal animates transforms and would reset it.) */
.ab-expect__item:nth-child(even) { position: relative; top: clamp(0px, 4vw, 48px); }
.ab-expect__icon { grid-row: span 2; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--mint); color: var(--brand); }
.ab-expect__item h3 { font-size: var(--fs-h4); align-self: center; }
.ab-expect__item p { color: var(--muted); }
.ab-links { display: flex; flex-wrap: wrap; gap: 16px 36px; margin-top: clamp(40px, 5vw, 72px); }

@media (max-width: 1023px) {
  .ab-intro, .ab-newport { grid-template-columns: minmax(0, 1fr); }
  .ab-intro { align-items: start; }
  .ab-intro__lead { margin-top: 22px; }
  .ab-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-principle:nth-child(3) { padding-left: 0; border-left: 0; }
  .ab-principle:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ab-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "photo team" "c1 c2" "c3 c4" "c5 c5"; }
  .ab-fit__photo { min-height: 260px; }
}
@media (max-width: 599px) {
  .ab-principles { grid-template-columns: minmax(0, 1fr); }
  .ab-principle, .ab-principle + .ab-principle { padding: 24px 0 8px; border-left: 0; }
  .ab-principle + .ab-principle { border-top: 1px solid var(--line); }
  .ab-expect { grid-template-columns: minmax(0, 1fr); }
  .ab-expect { padding-bottom: 0; }
  .ab-expect__item:nth-child(even) { top: 0; }
  .ab-expect__item { grid-template-columns: minmax(0, 1fr); }
  .ab-expect__icon { grid-row: auto; }
  .ab-fit { grid-template-areas: "photo team" "c1 c1" "c2 c2" "c3 c3" "c4 c4" "c5 c5"; }
  .ab-fit__photo { min-height: 180px; }
  .ab-fit__card--5 { display: block; }
  .ab-fit__card--5 .tile__icon { margin-bottom: 22px; }
}