/* ==========================================================================
   Bigmate About page (about_who_and_mission.html): 2026 redesign
   Designed on the Claude Design canvas "About Page Redesign", page "A with
   photo tiles": four photo tiles rise into the hero, one line runs down the
   history from 1996 into the mission, the three ways are the homepage's, and
   the team card hangs over the closing CTA. Loads after home-2026.css and
   reuses its .hp-hero, .hp-ctx, .hp-shell, .hp-section__title, .hp-textlink
   and .hp-cta blocks; this file only adds what the page needs.
   Prefix: ab-
   ========================================================================== */

:root {
  --ab-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* The tiles rise into the hero by the lift; the hero's foot is sized from
     the same numbers, so they cannot drift apart. */
  --ab-lift: 150px;
  --ab-lift-gap: 56px;
  --ab-tile-h: 360px;
  /* The timeline: years right-aligned in the first column, the line centred
     in the second, the text from the third. The line and its dots are placed
     from these, and each era draws its own run of line down through the gap
     to the next dot, so the gap and the run are one number. */
  --ab-years: 110px;
  --ab-line: 60px;
  --ab-era-gap: 72px;
  --ab-sec-pad: 128px;
  --ab-fig-w: 440px;
  /* How far the team card hangs into the CTA. */
  --ab-overhang: 140px;
}

.ab-anchor { scroll-margin-top: calc(var(--nv-offset, 80px) + 24px); }

/* The brand gradient on a dark ground (as the PAS, hub, partners and contact
   heroes do). */
.ab-accent {
  display: block; width: fit-content; padding-bottom: 2px;
  background: linear-gradient(95deg, var(--hp-ice) 0%, var(--hp-cyan) 38%, var(--hp-blue-bright) 72%, var(--hp-violet) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* =============================================================== HERO */
/* The homepage hero with the headline across the full width and the lead
   and buttons on one row under it. The ghost is a mining excavator rather
   than the homepage's dragline. */
.ab-hero.hp-hero { padding-bottom: calc(var(--ab-lift-gap) + var(--ab-lift)); }
.ab-hero .hp-hero__ghost {
  right: -180px; top: -40px; width: 1100px; height: 700px;
  background-image: url(../images/partners/path-excavator.webp);
  background-position: 50% 60%;
  opacity: 0.42;
  -webkit-mask-image: radial-gradient(58% 62% at 60% 44%, #000 20%, transparent 74%);
  mask-image: radial-gradient(58% 62% at 60% 44%, #000 20%, transparent 74%);
}
.ab-hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-top: 26px; }
.ab-hero__row .hp-hero__lead { max-width: 44ch; }
.ab-hero__row .hp-hero__actions { flex: 0 0 auto; margin-top: 0; }

/* ============================================================== TILES */
/* The homepage's context tiles, lifted across the seam. The section needs
   flow-root or the tiles' negative margin collapses through it and drags the
   white up over the hero. Only the tiles lift. */
.ab-sec { position: relative; display: flow-root; background: #fff; }
.ab-tiles {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr)); gap: 16px;
  margin-top: calc(-1 * var(--ab-lift));
}
.ab-tiles .hp-ctx { height: var(--ab-tile-h); box-shadow: var(--hp-sh-lg); }
.ab-tiles .hp-ctx--lead { box-shadow: 0 30px 70px rgba(4, 19, 73, 0.24); }
.ab-tiles .hp-ctx__img { object-position: 50% 50%; }
.ab-tiles .ab-tile--team .hp-ctx__img { object-position: 28% 62%; }
.ab-tiles .ab-tile--award .hp-ctx__img { object-position: 50% 38%; }

/* ============================================================ HISTORY */
.ab-history { padding-bottom: var(--ab-sec-pad); }
.ab-history__head { margin-top: 104px; padding-left: calc(var(--ab-years) + var(--ab-line)); }
.ab-lead { margin: 18px 0 0; max-width: 62ch; color: var(--hp-body); font-size: 18px; line-height: 1.6; text-wrap: pretty; }

.ab-eras { display: flex; flex-direction: column; gap: var(--ab-era-gap); margin: 72px 0 0; padding: 0; list-style: none; }
.ab-era {
  display: grid; align-items: start;
  grid-template-columns: var(--ab-years) var(--ab-line) minmax(0, 1fr) var(--ab-fig-w);
}
.ab-era__when { margin: 0; text-align: right; }
.ab-era__year { display: block; color: var(--hp-ink); font-size: 20px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.ab-era__until { display: block; color: var(--hp-muted); font-size: 13.5px; line-height: 1.4; }

/* The line and its dot. The run starts at the dot's centre and ends at the
   next era's, or at the foot of the section for the last one, where the
   mission's own run picks it up. */
.ab-era__mark { position: relative; align-self: stretch; }
.ab-era__mark::before {
  content: ""; position: absolute; left: calc(var(--ab-line) / 2 - 1px); top: 15px; bottom: calc(-1 * var(--ab-era-gap)); width: 2px;
  background: linear-gradient(180deg, var(--hp-cyan), var(--hp-blue));
}
.ab-era:last-child .ab-era__mark::before { bottom: calc(-1 * var(--ab-sec-pad)); background: var(--hp-blue); }
.ab-era__mark::after {
  content: ""; position: absolute; left: calc(var(--ab-line) / 2 - 8px); top: 7px; width: 16px; height: 16px; box-sizing: border-box;
  border-radius: 50%; background: #fff; border: 3px solid var(--hp-blue);
}

.ab-era__body { padding-right: 56px; }
.ab-era__body--wide { grid-column: 3 / -1; padding-right: 0; }
.ab-era__title { margin: 0; color: var(--hp-ink); font-size: 30px; font-weight: 700; letter-spacing: -0.7px; line-height: 1.2; }
.ab-era__text { margin: 14px 0 0; max-width: 70ch; color: var(--hp-body); font-size: 17px; line-height: 1.6; }

.ab-miles { margin: 22px 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--hp-line); }
.ab-miles li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 18px; padding: 14px 0; border-top: 1px solid var(--hp-line); }
.ab-miles__y { color: var(--hp-blue); font-size: 15px; font-weight: 700; line-height: 1.6; font-variant-numeric: tabular-nums; }
.ab-miles__t { color: var(--hp-body); font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.ab-miles a { color: var(--hp-ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(7, 110, 232, 0.35); text-underline-offset: 3px; }
.ab-miles a:hover { color: var(--hp-blue); text-decoration-color: currentColor; }

.ab-era__fig { margin: 0; }
.ab-era__fig img { display: block; width: 100%; height: auto; aspect-ratio: 440 / 290; object-fit: cover; border-radius: var(--hp-radius); background: var(--hp-surface); }
.ab-era__fig figcaption { margin-top: 10px; color: var(--hp-muted); font-size: 13.5px; line-height: 1.45; }

/* The 2016 photo: the moment an early WARNY machine integration test worked.
   A round magnifier on the celebration, linked by a line to a ring on it in
   the wide shot. All real pixels (a close crop of the same frame), placed in
   percentages of the 440 x 290 frame so it holds at any width. */
.ab-moment, .ab-inset, .ab-split { position: relative; overflow: hidden; aspect-ratio: 440 / 290; border-radius: var(--hp-radius); background: var(--hp-surface); }
.ab-era__fig .ab-moment > img, .ab-era__fig .ab-inset > img, .ab-era__fig .ab-split > img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.ab-moment__ring {
  position: absolute; left: 52.05%; top: 65.5%; width: 9.09%; height: 15.17%;
  border-radius: 50%; border: 2px solid var(--hp-ice); box-shadow: 0 0 0 1px rgba(2, 16, 47, 0.4);
}
.ab-moment__line {
  position: absolute; left: 29.09%; top: 73.8%; width: 23.2%; height: 2px;
  background: var(--hp-ice); box-shadow: 0 0 0 1px rgba(2, 16, 47, 0.3);
  transform: rotate(-2deg); transform-origin: left center;
}
.ab-moment__mag {
  position: absolute; left: 2.73%; top: 54.48%; width: 26.36%; aspect-ratio: 1; overflow: hidden;
  border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 8px 24px rgba(2, 16, 47, 0.4);
}
.ab-era__fig .ab-moment__mag img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.ab-moment__tag {
  position: absolute; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: var(--hp-radius-pill);
  background: rgba(255, 255, 255, 0.92); color: var(--hp-navy);
  font-size: 10px; font-weight: 700; line-height: 1.5; letter-spacing: var(--hp-label-track); text-transform: uppercase;
}

/* The 2022 photo: the team on site at Curragh, with the 2024 award night set
   into the lower right, clear of the engineers and the bucket. Two real
   photos, placed, not blended. */
.ab-inset__card {
  position: absolute; right: 3.2%; bottom: 5%; width: 38%; aspect-ratio: 440 / 434; overflow: hidden;
  border-radius: 10px; box-shadow: 0 0 0 3px #fff, 0 10px 26px rgba(2, 16, 47, 0.45);
}
.ab-era__fig .ab-inset__card img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }

/* The 2026 photo: the EVAS pilot excavator on the left, the Equinix
   partnership video on the right, cut on a diagonal from 72% at the top to
   60% at the bottom. The excavator is cropped to the left 72% so the whole
   machine sits clear of the cut. The white edge is a drop shadow of the
   clipped image, so it stays the same width at any size. */
.ab-era__fig .ab-split > img { width: 72%; }
.ab-split__b { position: absolute; inset: 0 0 0 60%; filter: drop-shadow(-4px 0 0 #fff); }
.ab-era__fig .ab-split__b img {
  width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0;
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}

/* ============================================================ MISSION */
/* Navy. The history's line comes in over the top edge and ends on a filled
   dot at "2026, Today", in the same columns as the eras above. */
.ab-mission { position: relative; overflow: hidden; background: var(--hp-navy); }
.ab-mission::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 90% at 90% 0%, rgba(26, 206, 225, 0.16), transparent 62%),
    radial-gradient(50% 70% at 0% 100%, rgba(7, 110, 232, 0.22), transparent 60%);
}
.ab-mission__inner { position: relative; padding-top: 120px; padding-bottom: var(--ab-sec-pad); }
.ab-mission__grid {
  display: grid; align-items: start;
  grid-template-columns: var(--ab-years) var(--ab-line) minmax(0, 1fr) 500px;
}
.ab-mission .ab-era__year { color: #fff; }
.ab-mission .ab-era__until { color: var(--hp-ice); }
.ab-mission .ab-era__mark::before { top: -120px; bottom: auto; height: 135px; background: linear-gradient(180deg, var(--hp-blue), var(--hp-ice)); }
.ab-mission .ab-era__mark::after {
  left: calc(var(--ab-line) / 2 - 9px); top: 6px; width: 18px; height: 18px; border: 0;
  background: var(--hp-ice); box-shadow: 0 0 0 6px rgba(143, 230, 245, 0.22);
}
.ab-mission__body { padding-right: 56px; }
.ab-mission__title { margin: 0; color: #fff; font-size: 52px; font-weight: 700; line-height: 1.08; letter-spacing: -1.6px; }
.ab-mission__body p { margin: 16px 0 0; color: rgba(255, 255, 255, 0.78); font-size: 17px; line-height: 1.65; text-wrap: pretty; }
.ab-mission__body .ab-mission__title + p { margin-top: 26px; }

.ab-principles {
  display: flex; flex-direction: column; gap: 30px; margin: 0; padding: 38px 36px; list-style: none;
  border-radius: var(--hp-radius); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(143, 230, 245, 0.18);
}
.ab-principles li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 0 18px; }
.ab-principles li::before { content: ""; width: 14px; height: 2px; margin-top: 13px; background: var(--hp-cyan); }
.ab-principles h3 { margin: 0; color: #fff; font-size: 19px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.35; }
.ab-principles p { margin: 6px 0 0; color: rgba(255, 255, 255, 0.74); font-size: 15.5px; line-height: 1.55; }

/* =============================================================== WAYS */
/* The homepage's three ways, word for word, at section scale. The team card
   follows on the same ground and hangs over the CTA. */
.ab-ways { display: flow-root; padding-top: 120px; background: var(--hp-surface); }
.ab-ways .hp-ways__kicker { margin-bottom: 12px; }
.ab-ways__card {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 44px; padding: 40px 4px 42px;
  border-radius: var(--hp-radius); background: #fff; box-shadow: var(--hp-sh-sm);
}
.ab-way { display: block; padding: 4px 36px 0; color: inherit; }
.ab-way + .ab-way { border-left: 1px solid var(--hp-line); }
.ab-way__num { display: block; color: var(--hp-blue); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; transition: color 0.25s ease; }
.ab-way__title { margin: 10px 0 0; color: var(--hp-ink); font-size: 24px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.25; transition: color 0.25s ease; }
.ab-way__body { margin: 8px 0 0; max-width: 34ch; color: var(--hp-body); font-size: 16px; line-height: 1.55; }
.ab-way .hp-textlink { margin-top: 18px; }
.ab-way:hover .ab-way__num, .ab-way:hover .ab-way__title { color: var(--hp-blue-deep); }
.ab-way:focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 6px; border-radius: 6px; }

/* =============================================================== TEAM */
/* The heading sits top left and the photos share its corner of the card:
   Graham's photo starts under "behind" (--ab-nest in from the left, below
   the first line of the heading, which ends --ab-l1 down), beside "Bigmate."
   and the line under it. "We're hiring" closes the corner under them, at the
   foot of the card, in the same narrow column. */
.ab-team {
  --ab-l1: 56px;
  --ab-nest: 184px;
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr);
  margin-top: 72px; margin-bottom: calc(-1 * var(--ab-overhang)); padding: 48px;
  border-radius: var(--hp-radius); background: #fff; box-shadow: var(--hp-sh-lg);
}
.ab-team__intro { grid-area: 1 / 1; }
.ab-team__title { max-width: 320px; margin: 0; color: var(--hp-ink); font-size: 40px; font-weight: 700; line-height: 1.12; letter-spacing: -1.1px; }
.ab-team__title em { font-style: normal; }
.ab-team__intro > p { max-width: calc(var(--ab-nest) - 16px); margin: 14px 0 0; color: var(--hp-body); font-size: 16.5px; line-height: 1.6; text-wrap: balance; }
.ab-team__hiring {
  grid-area: 1 / 1; align-self: end; justify-self: start; box-sizing: border-box; width: calc(var(--ab-nest) - 16px);
  padding-top: 18px; border-top: 1px solid var(--hp-line);
}
.ab-team__hiring h3 { margin: 0; color: var(--hp-ink); font-size: 16px; font-weight: 700; line-height: 1.3; }
.ab-team__hiring p { margin: 6px 0 0; color: var(--hp-body); font-size: 14.5px; line-height: 1.5; text-wrap: balance; }
.ab-team__hiring .hp-textlink { margin-top: 10px; font-size: 14.5px; }


/* Mark in front, Graham and Greg smaller and tucked in behind him, their
   photos centred on his and each caption under its own photo. Past Greg the
   line carries on: Eugene, Mitchell and Blake, each smaller and tucked
   behind the one before, until Blake sits on the navy card that ends the
   line and carries the link. The photos stay plain grey, like the leaders';
   the colour is the card's. Mark is
   first in the markup, so he is read first.
   The photos are sized in units (--u) so their proportions and the centring
   offsets hold at any width. The card's readable part is a fixed 170px, and
   crosses the team card's right edge by about 55px where the window has room
   (--out: the 48px padding plus 56); elsewhere it stays 8px inside. */
.ab-team__people { grid-area: 1 / 1; margin-left: var(--ab-nest); container-type: inline-size; }
.ab-leaders {
  --out: 40px;
  --u: min(1.13px, calc((100cqi + var(--out) - 170px) / 828));
  --lw: calc(256 * var(--u));
  --sw: calc(200 * var(--u));
  --tk: calc(36 * var(--u));
  display: grid; justify-content: center; align-items: start;
  /* Graham's photo top (31.7 units below Mark's) lands just under the
     heading's first line. */
  margin-top: calc(var(--ab-l1) - 31.7 * var(--u));
  /* A tucked track is only the part left showing: the negative margin
     widens the figure back to its full width, under its neighbour. The last
     track holds the rest of the team (100 + 80 + 64 units of photo, then the
     card's 170px) less what spills out to the right. */
  grid-template-columns: calc(var(--sw) - var(--tk)) var(--lw) calc(var(--sw) - var(--tk)) calc(244 * var(--u) + 170px - var(--out));
}
@media (min-width: 1420px) {
  .ab-leaders { --out: 104px; }
}
.ab-leader { position: relative; z-index: 1; grid-row: 1; margin: 0; }
.ab-leader img { display: block; width: 100%; height: auto; aspect-ratio: 230 / 290; object-fit: cover; object-position: 50% 30%; border-radius: var(--hp-radius-sm); filter: grayscale(1) contrast(1.04); background: var(--hp-surface); }
.ab-leader figcaption { padding-top: 20px; text-align: center; }
.ab-leader--lead { grid-column: 2; z-index: 2; }
.ab-leader--lead img { aspect-ratio: 300 / 370; box-shadow: 0 0 0 6px #fff, var(--hp-sh-sm); }
/* Half the difference in photo height, so the side photos sit on Mark's
   centre line. */
.ab-leader--left, .ab-leader--right { margin-top: calc((var(--lw) * 370 / 300 - var(--sw) * 290 / 230) / 2); }
.ab-leader--left { grid-column: 1; margin-right: calc(-1 * var(--tk)); }
.ab-leader--left figcaption { padding-right: var(--tk); }
.ab-leader--right { grid-column: 3; margin-left: calc(-1 * var(--tk)); }
/* A little wider than the part of Greg's photo left showing, so his title
   keeps to one line; Mark's caption and the tail's sit clear of it. */
.ab-leader--right figcaption { margin: 0 -22px; padding-left: var(--tk); }
.ab-leader--right img { object-position: 50% 40%; }
.ab-leader__name { display: block; color: var(--hp-ink); font-size: 17px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.3; }
.ab-leader__role { display: block; margin-top: 4px; color: var(--hp-blue); font-size: 14px; font-weight: 600; line-height: 1.4; }
.ab-leader--lead .ab-leader__name { font-size: 22px; }
.ab-leader--lead .ab-leader__role { font-size: 15px; }

/* The rest of the team. Eugene is tucked 32 units behind Greg and centred on
   Mark; the flex row centres everything after him on him. */
.ab-more {
  position: relative; z-index: 0; grid-column: 4; grid-row: 1; display: block; color: inherit;
  margin-left: calc(-32 * var(--u));
  margin-top: calc((var(--lw) * 370 / 300 - 132 * var(--u) * 290 / 230) / 2);
}
.ab-more__stack { position: relative; display: flex; align-items: center; }
.ab-more__p {
  position: relative; display: block; flex: 0 0 auto; overflow: hidden;
  border-radius: var(--hp-radius-sm); background: var(--hp-surface); box-shadow: 0 0 0 4px #fff;
  transition: transform 0.5s var(--ab-ease);
}
.ab-more__p img { display: block; width: 100%; height: auto; aspect-ratio: 230 / 290; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.04); }
.ab-more__p:nth-child(1) { z-index: 3; width: calc(132 * var(--u)); }
.ab-more__p:nth-child(2) { z-index: 2; width: calc(104 * var(--u)); margin-left: calc(-24 * var(--u)); }
.ab-more__p:nth-child(3) { z-index: 1; width: calc(82 * var(--u)); margin-left: calc(-18 * var(--u)); }
.ab-more:hover .ab-more__p:nth-child(2) { transform: translateX(3px); }
.ab-more:hover .ab-more__p:nth-child(3) { transform: translateX(6px); }

/* The card that ends the line: it starts under the middle of Mitchell, so
   Blake sits on it, and runs on for 170px past him. Its height is between
   Blake's and Mitchell's. */
.ab-more__card {
  position: relative; z-index: 0; flex: 0 0 auto; box-sizing: border-box;
  width: calc(116 * var(--u) + 170px); height: clamp(92px, calc(124 * var(--u)), 118px);
  margin-left: calc(-116 * var(--u));
  padding: 0 14px 0 calc(116 * var(--u) + 18px);
  display: flex; flex-direction: column; justify-content: center;
  border-radius: var(--hp-radius-sm); color: #fff;
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(26, 206, 225, 0.3), transparent 66%),
    radial-gradient(60% 80% at 20% 100%, rgba(7, 110, 232, 0.28), transparent 62%),
    var(--hp-navy);
  box-shadow: 0 0 0 4px #fff, var(--hp-sh-md);
  transition: box-shadow 0.35s ease;
}
.ab-more:hover .ab-more__card { box-shadow: 0 0 0 4px #fff, var(--hp-sh-hover); }

.ab-more__k { color: rgba(255, 255, 255, 0.72); font-size: 12px; line-height: 1.35; }
.ab-more__t { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: -0.3px; white-space: nowrap; }
.ab-more__go { color: var(--hp-ice); font-size: 13px; transition: transform 0.5s var(--ab-ease); }
.ab-more:hover .ab-more__go { transform: translateX(3px); }
.ab-more:focus-visible { outline: none; }
.ab-more:focus-visible .ab-more__card { outline: 3px solid var(--hp-blue-bright); outline-offset: 4px; }

/* =================================================================== CTA */
/* The site's closing block on a close-up of a dozer blade. It opens lower by
   the overhang so the team card lands in its top. */
.ab-cta .hp-cta__bg img { object-position: 50% 55%; transform-origin: 50% 55%; }
@media (min-width: 1100px) {
  .ab-cta .hp-cta__inner { padding-top: calc(128px + var(--ab-overhang)); }
}

/* ============================================================ RESPONSIVE */
/* Laptops: a smaller heading, so its corner leaves the photos more room. */
@media (min-width: 1100px) and (max-width: 1419px) {
  .ab-team { --ab-l1: 48px; }
  .ab-team__title { max-width: 272px; font-size: 34px; letter-spacing: -0.9px; }
}

@media (max-width: 1220px) {
  :root { --ab-fig-w: 380px; }
  .ab-mission__grid { grid-template-columns: var(--ab-years) var(--ab-line) minmax(0, 1fr) 440px; }
}

/* The photos drop under their era, the principles under the mission, and
   the team card stops overhanging (a wide-screen device, as on the homepage,
   PAS and partners pages). */
@media (max-width: 1099px) {
  :root { --ab-lift: 110px; --ab-lift-gap: 40px; --ab-tile-h: 250px; --ab-sec-pad: 96px; }
  .ab-hero__row { flex-direction: column; align-items: flex-start; }
  /* Four tiles, so a clean two by two: the homepage's quad lets its lead tile
     span the row here, which would leave the award on its own. */
  .ab-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-tiles .hp-ctx--lead { grid-column: auto; }
  .ab-history__head { margin-top: 80px; }
  .ab-era { grid-template-columns: var(--ab-years) var(--ab-line) minmax(0, 1fr); }
  .ab-era__body { padding-right: 0; }
  .ab-era__fig { grid-column: 3; margin-top: 28px; max-width: 560px; }
  .ab-mission__inner { padding-top: 96px; }
  .ab-mission .ab-era__mark::before { top: -96px; height: 111px; }
  .ab-mission__grid { grid-template-columns: var(--ab-years) var(--ab-line) minmax(0, 1fr); }
  .ab-mission__body { padding-right: 0; }
  .ab-principles { grid-column: 3; margin-top: 36px; }
  .ab-ways { padding: 96px 0 72px; }
  /* The heading above, the photos under it. */
  .ab-team { gap: 40px; margin-bottom: 0; margin-top: 56px; }
  .ab-team__intro, .ab-team__people, .ab-team__hiring { grid-area: auto; }
  .ab-team__hiring { width: auto; justify-self: stretch; }
  .ab-team__people { margin-left: 0; }
  .ab-team__title, .ab-team__intro > p { max-width: none; }
  .ab-leaders { margin-top: 0; }
}

@media (max-width: 940px) {
  .ab-ways__card { grid-template-columns: minmax(0, 1fr); padding: 8px 4px; }
  .ab-way { padding: 26px 28px; }
  .ab-way + .ab-way { border-left: 0; border-top: 1px solid var(--hp-line); }
}

@media (max-width: 760px) {
  :root { --ab-years: 48px; --ab-line: 36px; --ab-era-gap: 56px; --ab-sec-pad: 72px; --ab-tile-h: 196px; --ab-lift: 96px; }
  .ab-tiles { gap: 12px; }
  .ab-tiles .hp-ctx__body { left: 16px; right: 16px; bottom: 14px; }
  .ab-tiles .hp-ctx__name, .ab-tiles .hp-ctx--lead .hp-ctx__name { font-size: 16px; letter-spacing: -0.3px; }
  .ab-tiles .hp-ctx__act { display: none; }
  .ab-history__head { margin-top: 64px; padding-left: 0; }
  .ab-lead { font-size: 16.5px; }
  .ab-eras { margin-top: 48px; }
  .ab-era__year { font-size: 15px; }
  .ab-era__until { font-size: 11.5px; }
  .ab-era__title { font-size: 23px; letter-spacing: -0.4px; }
  .ab-era__text { font-size: 16px; }
  .ab-miles li { display: block; padding: 12px 0; }
  .ab-miles__y { display: block; font-size: 13.5px; }
  .ab-miles__t { display: block; margin-top: 2px; font-size: 15px; }
  .ab-era__fig { margin-top: 22px; }
  .ab-mission__inner { padding-top: 72px; }
  .ab-mission .ab-era__mark::before { top: -72px; height: 87px; }
  .ab-mission__title { font-size: 34px; letter-spacing: -1px; }
  .ab-mission__body p { font-size: 16px; }
  .ab-principles { grid-column: 1 / -1; padding: 28px 24px; gap: 24px; }
  .ab-ways { padding: 72px 0 56px; }
  .ab-way { padding: 22px 20px; }
  .ab-way__title { font-size: 21px; }
  .ab-team { padding: 30px 20px 28px; gap: 32px; margin-top: 40px; }
  .ab-team__title { font-size: 30px; letter-spacing: -0.8px; }
  .ab-leader figcaption { padding-top: 14px; }
  .ab-leader__name { font-size: 14px; }
  .ab-leader__role { font-size: 12px; }
  .ab-leader--lead .ab-leader__name { font-size: 17px; }
  .ab-leader--lead .ab-leader__role { font-size: 12.5px; }
  .ab-leader--lead img { box-shadow: 0 0 0 4px #fff, var(--hp-sh-sm); }
  /* Three across, and the rest of the team becomes a row under them. */
  .ab-leaders {
    --lw: min(144px, 44.6cqi);
    --sw: min(106px, 34.2cqi);
    --tk: min(20px, 6.5cqi);
    grid-template-columns: calc(var(--sw) - var(--tk)) var(--lw) calc(var(--sw) - var(--tk));
  }
  .ab-more { grid-column: 1 / -1; grid-row: 2; margin: 28px 0 0; }
  .ab-more__p:nth-child(1) { width: 64px; }
  .ab-more__p:nth-child(2) { width: 52px; margin-left: -12px; }
  .ab-more__p:nth-child(3) { width: 42px; margin-left: -9px; }
  .ab-more:hover .ab-more__p { transform: none; }
  .ab-more__card { flex: 1 1 auto; width: auto; height: 72px; margin-left: -40px; padding: 0 12px 0 52px; }
  .ab-more__t { font-size: 16px; }
  .ab-leader--right figcaption { margin: 0; }
}

/* Landscape phones: the hero is short, so the tiles barely lift. */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --ab-lift: 64px; --ab-lift-gap: 28px; --ab-tile-h: 170px; }
  .ab-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .ab-tiles .hp-ctx__act { display: none; }
  .ab-tiles .hp-ctx__name, .ab-tiles .hp-ctx--lead .hp-ctx__name { font-size: 15px; }
}