/* ==========================================================================
   Bigmate team page (about_team.html): 2026 redesign
   Designed on the Claude Design canvas "Team Page Redesign", page "C on
   white": one group, framed the way our cameras frame a person. Each photo
   carries a corner bracket and a name tag; the engineers take the top row and
   the leaders the row under them, supporting them; the wall ends in an empty
   navy frame for the many more and the open roles. Selecting a person shows
   their bio under the wall. Loads after home-2026.css and reuses its .hp-hero,
   .hp-shell, .hp-gradient and .hp-cta blocks.
   Prefix: tm-
   ========================================================================== */

:root {
  --tm-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* The card rises into the hero by the lift and hangs into the CTA by the
     overhang; the hero's foot and the CTA's top are sized from the same
     numbers, so they cannot drift apart. */
  --tm-lift: 150px;
  --tm-lift-gap: 56px;
  --tm-overhang: 140px;
  --tm-sec-pad: 96px;
}

/* The brand gradient on a dark ground (as the About, PAS and partners heroes). */
.tm-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 */
.tm-hero.hp-hero { padding-bottom: calc(var(--tm-lift-gap) + var(--tm-lift)); }
.tm-hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-top: 26px; }
.tm-hero__row .hp-hero__lead { max-width: 46ch; }
.tm-hero__row .hp-hero__actions { flex: 0 0 auto; margin-top: 0; }

/* =============================================================== CARD */
.tm-card {
  position: relative; z-index: 2;
  margin-top: calc(-1 * var(--tm-lift)); margin-bottom: calc(-1 * var(--tm-overhang));
  padding: 48px;
  border-radius: var(--hp-radius); background: #fff; box-shadow: var(--hp-sh-lg);
}
.tm-card__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 48px; }
.tm-kicker {
  margin: 0 0 14px; color: var(--hp-muted);
  font-size: var(--hp-label); font-weight: 600; line-height: 1.6;
  letter-spacing: var(--hp-label-track); text-transform: uppercase;
}
.tm-card__title { margin: 0; color: var(--hp-ink); font-size: 40px; font-weight: 700; line-height: 1.12; letter-spacing: -1.1px; text-wrap: balance; }
.tm-card__title em { font-style: normal; }
.tm-card__aside { flex: 0 1 440px; }
.tm-card__aside p { margin: 0; color: var(--hp-body); font-size: 16.5px; line-height: 1.6; text-wrap: pretty; }
/* Only with script, where selecting does something. */
.tm-card__aside .tm-card__hint { display: none; margin-top: 6px; color: var(--hp-muted); font-size: 14px; line-height: 1.5; }
.has-js .tm-card__aside .tm-card__hint { display: block; }

/* =============================================================== WALL */
/* Four across and two down, the engineers first, then the empty frame down
   the fifth column. It is placed explicitly, so the people fill the first
   four columns of both rows around it. */
.tm-wall {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px;
  margin: 44px 0 0; padding: 0; list-style: none;
}
.tm-wall__join { grid-column: 5; grid-row: 1 / span 2; }

/* A person is a button: the photo, plain grey, with the bracket and the name
   tag drawn over it. The colour is the tag's and the bracket's, never the
   person's. */
.tm-person {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  border-radius: var(--hp-radius-sm); overflow: hidden; background: var(--hp-surface);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tm-person img {
  display: block; width: 100%; height: auto; aspect-ratio: 230 / 290;
  /* The team-*.webp crops are cut at 230:290 with the face on the centre
     line and its centre 48% down, so nothing more is cropped here. */
  object-fit: cover; object-position: 50% 50%;
  filter: grayscale(1) contrast(1.04);
  transition: transform 0.6s var(--tm-ease);
}
/* The four corners of the frame, drawn as eight thin bars. It closes in a
   little on the chosen person, as a camera locks on. */
.tm-person__box {
  --bc: rgba(5, 157, 255, 0.8);
  --bt: 2px;
  --bl: 22px;
  position: absolute; inset: 14px; pointer-events: none;
  background:
    linear-gradient(var(--bc), var(--bc)) left top / var(--bl) var(--bt),
    linear-gradient(var(--bc), var(--bc)) left top / var(--bt) var(--bl),
    linear-gradient(var(--bc), var(--bc)) right top / var(--bl) var(--bt),
    linear-gradient(var(--bc), var(--bc)) right top / var(--bt) var(--bl),
    linear-gradient(var(--bc), var(--bc)) left bottom / var(--bl) var(--bt),
    linear-gradient(var(--bc), var(--bc)) left bottom / var(--bt) var(--bl),
    linear-gradient(var(--bc), var(--bc)) right bottom / var(--bl) var(--bt),
    linear-gradient(var(--bc), var(--bc)) right bottom / var(--bt) var(--bl);
  background-repeat: no-repeat;
  transition: inset 0.45s var(--tm-ease);
}
.tm-person__tag {
  position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); box-sizing: border-box;
  padding: 7px 10px 8px; border-radius: 6px;
  background: rgba(4, 19, 73, 0.9); color: #fff;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.tm-person__name { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: -0.2px; }
.tm-person__role { display: block; margin-top: 2px; color: var(--hp-ice); font-size: 11.5px; font-weight: 600; line-height: 1.3; transition: color 0.3s ease; }

.tm-person:hover img { transform: scale(1.03); }
.tm-person:hover .tm-person__box { inset: 11px; }
.has-js .tm-person[aria-pressed="true"] .tm-person__box { --bc: var(--hp-cyan); --bt: 3px; inset: 10px; }
.has-js .tm-person[aria-pressed="true"] .tm-person__tag { background: var(--hp-ice); color: var(--hp-navy); }
.has-js .tm-person[aria-pressed="true"] .tm-person__role { color: var(--hp-navy); }
.tm-person:focus-visible { outline: 3px solid var(--hp-blue-bright); outline-offset: 3px; }

/* The empty frame: the page's one navy card, with a dashed frame where the
   next person would stand. */
.tm-join {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  box-sizing: border-box; height: 100%; padding: 30px 28px;
  border-radius: var(--hp-radius-sm); color: #fff; text-decoration: none;
  background:
    radial-gradient(90% 50% at 100% 0%, rgba(26, 206, 225, 0.28), transparent 66%),
    radial-gradient(80% 50% at 0% 100%, rgba(7, 110, 232, 0.32), transparent 62%),
    var(--hp-navy);
  box-shadow: var(--hp-sh-md);
  transition: box-shadow 0.4s var(--tm-ease);
}
.tm-join::before {
  content: ""; position: absolute; inset: 12px; pointer-events: none;
  border: 1.5px dashed rgba(143, 230, 245, 0.45); border-radius: 6px;
}
.tm-join:hover { color: #fff; box-shadow: var(--hp-sh-hover); }
.tm-join:focus-visible { outline: 3px solid var(--hp-blue-bright); outline-offset: 3px; }
.tm-join > span { position: relative; }
.tm-join .tm-join__frame {
  position: absolute; left: 28px; right: 28px; top: 28px;
  color: rgba(143, 230, 245, 0.75); font-size: var(--hp-label); font-weight: 700; line-height: 1.5;
  letter-spacing: var(--hp-label-track); text-transform: uppercase;
}
.tm-join__k { color: var(--hp-ice); font-size: var(--hp-label); font-weight: 700; line-height: 1.5; letter-spacing: var(--hp-label-track); text-transform: uppercase; }
.tm-join__t { margin-top: 8px; font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -0.5px; }
.tm-join__p { margin-top: 8px; color: rgba(255, 255, 255, 0.74); font-size: 14px; line-height: 1.5; }
.tm-join__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--hp-ice); font-size: 14.5px; font-weight: 600; }
.tm-join__go .hp-icon { font-size: 13px; transition: transform 0.5s var(--tm-ease); }
.tm-join:hover .tm-join__go .hp-icon { transform: translateX(3px); }

/* ================================================================ BIOS */
/* One bio at a time under the wall, for whoever is selected. Without
   script they all show, one after another. */
.tm-bios { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--hp-line); }
.tm-bio { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px 32px; }
.tm-bio + .tm-bio { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--hp-line); }
.has-js .tm-bio { display: none; }
.has-js .tm-bio.is-active { display: grid; margin-top: 0; padding-top: 0; border-top: 0; animation: tmBioIn 0.45s var(--tm-ease); }
@keyframes tmBioIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tm-bio__name { margin: 0; color: var(--hp-ink); font-size: 18px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.3; }
.tm-bio__role { margin: 4px 0 0; color: var(--hp-blue); font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.tm-bio__city { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; color: var(--hp-muted); font-size: 13.5px; line-height: 1.4; }
.tm-bio__pin { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tm-bio__body p { max-width: 72ch; margin: 0; color: var(--hp-body); font-size: 16px; line-height: 1.65; }
.tm-bio__li { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--hp-blue); font-size: 14.5px; font-weight: 600; }
.tm-bio__li svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tm-bio__li:hover { color: var(--hp-navy); }

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

@media (prefers-reduced-motion: reduce) {
  .tm-person img, .tm-person__box, .tm-join, .tm-join__go .hp-icon { transition: none; }
  .tm-person:hover img { transform: none; }
  .has-js .tm-bio.is-active { animation: none; }
}

/* ============================================================ RESPONSIVE */
/* The heading stacks over its line, the empty frame becomes a strip under
   the wall, and the card stops hanging over the CTA (as on the About,
   homepage, PAS and partners pages). */
@media (max-width: 1099px) {
  :root { --tm-lift: 110px; --tm-lift-gap: 40px; }
  .tm-hero__row { flex-direction: column; align-items: flex-start; }
  .tm-sec--team { padding-bottom: var(--tm-sec-pad); }
  .tm-card { margin-bottom: 0; }
  .tm-card__head { flex-direction: column; align-items: flex-start; }
  .tm-card__aside { flex: 0 1 auto; max-width: 60ch; }
  .tm-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tm-wall__join { grid-column: 1 / -1; grid-row: auto; }
  .tm-join { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 20px; padding: 24px 28px; }
  .tm-join .tm-join__frame, .tm-join__p { display: none; }
  .tm-join__k { flex: 1 0 100%; }
  .tm-join__t { margin-top: 0; font-size: 20px; }
  .tm-join__go { margin-top: 0; }
}

@media (max-width: 940px) {
  .tm-wall { gap: 10px; }
  .tm-person__box { inset: 10px; --bl: 16px; }
  .tm-person:hover .tm-person__box { inset: 8px; }
  .has-js .tm-person[aria-pressed="true"] .tm-person__box { inset: 7px; }
  .tm-person__tag { left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 6px 8px 7px; }
  .tm-person__name { font-size: 13px; }
  .tm-person__role { font-size: 11px; }
  .tm-bio { grid-template-columns: minmax(0, 1fr); }
}

/* Phones: two across, so the engineers take the first two rows and the
   leaders the two under them. */
@media (max-width: 760px) {
  :root { --tm-lift: 96px; --tm-sec-pad: 72px; }
  .tm-card { padding: 30px 20px 28px; }
  .tm-card__title { font-size: 30px; letter-spacing: -0.8px; }
  .tm-card__aside p { font-size: 16px; }
  .tm-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; }
  /* Smaller tags, so most roles keep to one line and the faces stay clear. */
  .tm-person__tag { padding: 5px 7px 6px; }
  .tm-person__role { font-size: 10.5px; line-height: 1.25; }
  .tm-bios { margin-top: 28px; padding-top: 22px; }
  .tm-bio__body p { font-size: 15.5px; }
}

/* Landscape phones: the hero is short, so the card barely lifts. */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --tm-lift: 64px; --tm-lift-gap: 28px; }
}