/* ══════════════════════════════════════════════════════════════════════════
   Our Team — page-local styles. First build 2026-10-08.

   The page is the client's journey rather than an org chart, and each section
   is the same device: ONE LEAD PORTRAIT plus a STACK of the rest of that team.
   PK's idea, 8 October, and it is what lets everybody appear without the page
   becoming the roster he did not want.

   TWO MARKERS, both deliberately loud. They exist so a demo review can catch
   what is provisional — a reviewer cannot question what looks finished:
     .is-scamp        a placeholder image standing in for a photograph not yet
                      taken. Gold dashed frame, corner badge.
     .is-unconfirmed  a face we have ASSUMED the identity of. Red dashed ring
                      and a "confirm?" flag.
   Both must be gone before launch. The pre-launch sweep greps for them.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ───────────────────────────────────────────────────────────────── */
.tm-hero { background: var(--ink-950); color: var(--ink-50); padding: 104px 0 84px; }
.tm-hero__inner { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
/* MATCHES .hero h1 EXACTLY (styles.css line 353). This hero was built before
   the others were in view and inherited the global h1 - Open Sans, sentence
   case - which made it the only hero on the site in a different typeface and
   without the two-tone. PK caught it 12 Oct. If the hero type ever changes,
   change it in both places or this drifts again. */
.tm-hero h1 {
  font-family: 'Oswald', sans-serif;
  font-weight: 700; text-transform: uppercase;
  line-height: .95; letter-spacing: -.01em;
  font-size: var(--hero-size);
  margin: 0 0 20px;
}
/* The accent goes on the PAYOFF line, same as the homepage putting it on
   "start commanding your market" rather than the setup. Here the claim is
   the tenure, not the people. */
.tm-hero__accent { color: var(--green-400); }
.tm-hero__lead {
  max-width: 58ch;
  font-size: var(--hero-lead); line-height: 1.65;
  color: rgba(255, 255, 255, .82);
}

/* ── A section ──────────────────────────────────────────────────────────── */
.tm { padding: var(--section-pad); }
.tm--alt { background: var(--ink-100); }
.tm__inner {
  max-width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
/* Alternate which side the people sit on, so seven sections do not march. */
.tm--alt .tm__inner { direction: rtl; }
.tm--alt .tm__inner > * { direction: ltr; }

.tm__copy h2,
.tm-group h2 { color: var(--green-700); }
.tm__copy h2 { margin: 0 0 18px; }
.tm__copy p { max-width: 46ch; }

/* ── The lead portrait ──────────────────────────────────────────────────── */
.tm__lead { margin: 0; }
.tm__lead img {
  display: block; width: 100%; max-width: 360px; height: auto; aspect-ratio: 1; object-fit: cover;
  object-position: 50% 18%;            /* heads sit high in these crops */
  background: var(--ink-200); border-radius: 4px;
}
.tm__lead figcaption,
.tm__peer figcaption {
  margin-top: 14px; font-family: 'Oswald', sans-serif;
  font-size: 19px; font-weight: 600; color: var(--green-700);
}
.tm__lead figcaption span,
.tm__peer figcaption span {
  display: block; font-family: 'Open Sans', sans-serif;
  font-size: 14px; font-weight: 400; color: var(--ink-600); margin-top: 3px;
}

/* ── Two peers side by side, where a section has no lead ────────────────── */
.tm__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.tm__peer { margin: 0; }
.tm__peer img {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  object-position: 50% 18%; background: var(--ink-200); border-radius: 4px;
}

/* ── The stack: everybody else on that team ─────────────────────────────── */
.tm__with { margin-top: 26px; }
.tm-stack { display: flex; list-style: none; margin: 0; padding: 0; }
.tm-stack__item { margin-left: -18px; position: relative; }
.tm-stack__item:first-child { margin-left: 0; }
.tm-stack__item img {
  display: block; width: 88px; height: 88px; border-radius: 50%;
  object-fit: cover; object-position: 50% 16%;
  background: var(--ink-200); border: 3px solid #fff;
}
.tm--alt .tm-stack__item img { border-color: var(--ink-100); }
/* The name is for screen readers and for hover; the real names are the
   paragraph below, because a row of faces with no text is decoration. */
.tm-stack__name {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.tm__withnames { margin: 14px 0 0; font-size: 15px; color: var(--ink-700); max-width: 46ch; }
.tm__withnames strong { color: var(--ink-900); font-weight: 600; }

/* ── The group shot ─────────────────────────────────────────────────────── */
.tm-group { padding: var(--section-pad); background: var(--ink-50); }
.tm-group__inner { max-width: var(--shell); margin: 0 auto; }
.tm-group__fig { margin: 40px 0 0; }
.tm-group__fig img {
  display: block; width: 100%; height: auto; border-radius: 4px;
  background: var(--ink-200);
}
.tm-group__fig figcaption {
  margin-top: 14px; font-size: 15px; color: var(--ink-600);
}

/* ══════════════════════════════════════════════════════════════════════════
   MARKERS — loud on purpose. Delete the markup, not these rules.
   ══════════════════════════════════════════════════════════════════════════ */

/* A placeholder for a photograph not yet taken. */
.is-scamp { position: relative; }
.is-scamp img { outline: 3px dashed var(--gold-700); outline-offset: -3px; }
.is-scamp::after {
  content: 'SCAMP — replace before launch';
  position: absolute; top: 10px; left: 10px;
  background: var(--gold-700); color: #fff;
  font: 700 11px/1 'Open Sans', sans-serif; letter-spacing: .1em;
  text-transform: uppercase; padding: 6px 9px; border-radius: 3px;
}

/* No photograph of this person exists yet. A DIFFERENT problem from an
   assumed identity, and the demo asks a different question about each:
   this one is "can somebody get me a photo of Dan", the one below is
   "is this actually Max". Collapsing them would waste the review. */
.tm-stack__item.is-nophoto img { border-color: var(--gold-700); }
.tm-stack__item.is-nophoto::after {
  content: 'no photo';
  position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
  background: var(--gold-700); color: #fff;
  font: 700 9px/1 'Open Sans', sans-serif; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 6px; border-radius: 3px;
  white-space: nowrap;
}

/* A face whose identity we have assumed. */
.tm-stack__item.is-unconfirmed img { border-color: var(--red, #8c2b1e); }
.tm-stack__item.is-unconfirmed::after {
  content: 'confirm?';
  position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
  background: #8c2b1e; color: #fff;
  font: 700 9px/1 'Open Sans', sans-serif; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 6px; border-radius: 3px;
  white-space: nowrap;
}

/* ── Narrow ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .tm__inner { grid-template-columns: 1fr; gap: 36px; }
  .tm--alt .tm__inner { direction: ltr; }
  .tm-hero { padding: 72px 0 56px; }
  .tm__lead img { max-width: none; }
}

/* A scamp is a sheet of instructions, not a portrait — cropping it square cuts
   off the shot description, which is the half that tells the team what to take.
   Let it show whole and keep its own proportions. */
.tm__lead.is-scamp img,
.tm__peer.is-scamp img { object-fit: contain; aspect-ratio: 3 / 2; background: var(--ink-100); }

/* A peer row of four — section 5, where there is no hierarchy to show.
   Two up at tablet so faces never fall below a readable size. */
.tm__pair--4 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.tm__pair--4 figcaption { font-size: 16px; }
.tm__pair--4 figcaption span { font-size: 13px; }

/* ── A claim that has not been verified ─────────────────────────────────────
   Same purpose as .is-scamp and .is-unconfirmed: make the provisional thing
   visible, because a reviewer cannot question what reads as finished. The
   question itself is in data-claim and prints above the sentence. */
.claim-check { position: relative; border-left: 3px solid #8c2b1e; padding-left: 14px; }
.claim-check::before {
  content: 'CHECK — ' attr(data-claim);
  display: block; margin-bottom: 8px;
  font: 700 11px/1.45 'Open Sans', sans-serif; letter-spacing: .04em;
  text-transform: uppercase; color: #8c2b1e;
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO — rebuilt 12 October 2026 to PK's composition.

   Copy left, two overlapping photograph cards right, ambient loop behind.

   THE DEVICE, and why it is built this way. An earlier attempt blended
   photographs into a background image and it failed: two structured images
   on top of each other produce mush and neither reads. These cards are
   REGIONS instead — hard-edged, fully opaque, sitting ON the background
   rather than mixed into it. Nothing overlaps semantically, so nothing
   turns to mush.

   FOUR IMAGES IN THE FOOTPRINT OF TWO. The two card positions never move.
   Only the photograph inside each one changes, on a slow cross-fade. That
   is what lets four pictures run in a space that would be cluttered by
   four cards.
   ══════════════════════════════════════════════════════════════════════════ */

/* COMPACT SCALE, not the base. The site runs two hero tiers: 72px on the
   homepage, Why PAconnect and the AI pages - the pages that argue - and
   50px via .hero--compact on the five service pages. Matching .hero h1
   alone picked up the typeface but left this at the homepage size, which
   PK spotted immediately as overpowering. These two pages support rather
   than argue, so they belong with the service tier.
   Set as variables rather than hardcoded so they track any future change
   to the compact scale. */
.tm-hero {
  position: relative; overflow: hidden;
  --hero-size: 50px;
  --hero-lead: 17px;
}

/* ── The ambient layer ──────────────────────────────────────────────────── */
.tm-hero__bg { position: absolute; inset: 0; z-index: 0; }
.tm-hero__bg::after {
  /* Scrim. Weighted left, because that is where the type is: the right side
     stays brighter so the cards have something to sit against. */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(10,12,10,.68) 0%, rgba(10,12,10,.58) 42%, rgba(10,12,10,.28) 100%);
}
.tm-hero__video,
.tm-hero__bg { background: var(--ink-950); }
.tm-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* Only revealed once video-layer.js has a playable source; until then the
     poster shows through, which is the same picture. */
  opacity: .9;
}

.tm-hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 56px; align-items: center;
}
.tm-hero__copy { min-width: 0; }

/* ── The cards ──────────────────────────────────────────────────────────── */
.tm-hero__cards {
  position: relative;
  width: min(100%, 540px);
  aspect-ratio: 4 / 3;
  justify-self: end;
  /* The whole group fades in after the headline has had a beat. Matches the
     cabling hero's rhythm: headline, lead, then the proof photographs. It is
     deliberately NOT gated on the video, which arrives in idle time and on
     many visitors never arrives at all. */
  /* No group fade any more: each card now fades itself in, so an outer fade
     would only double it. */
}

.tm-card {
  position: absolute; margin: 0;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 50px rgba(0,0,0,.5);
  /* A faint light edge, so a dark photograph does not dissolve into a dark
     hero. Same trick as the cabling page. */
  outline: 1px solid rgba(255,255,255,.18); outline-offset: -1px;
}
.tm-card img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Position A - upper left, the larger of the two. */
.tm-card--1, .tm-card--3 { left: 0; top: 0; width: 63%; aspect-ratio: 4 / 5; }
/* Position B - lower right, clipping A's corner. Overlap reduced from 26% to
   18% on 12 Oct: at the wider setting the lower card buried the technician in
   the rack photograph almost entirely, which defeated the point of using it. */
.tm-card--2, .tm-card--4 { right: 0; bottom: 2%; width: 55%; aspect-ratio: 4 / 3; }

/* Focal points: the rack work sits centre-left, the lift pair sit high. */
.tm-card--1 img { object-position: 60% 50%; }
.tm-card--3 img { object-position: 50% 35%; }

/* ── The two waves ──────────────────────────────────────────────────────── */
/* 16s so it is noticed rather than watched. Each pair holds for roughly six
   seconds and the cross-fade takes a second and a half. */
/* CARDS ARRIVE ONE AT A TIME, not as pairs (PK, 12 Oct). The lower card
   covers part of the upper one by design, so if both appear together the
   photograph underneath is never really seen. Bringing them in individually
   gives each one about two seconds on its own first, which is the whole
   reason for using four pictures rather than two.

   The pattern per cycle: A arrives, holds alone, B arrives over it, both
   hold, both leave. Then the same again with the second pair. Fades stay
   short - roughly three quarters of a second - because two photographs
   sharing a position look like mush while they overlap.

   All four sit at opacity 0 at both 0% and 100%, so the loop has no seam. */
@keyframes tmIn1 { 0%,0% {opacity:0} 5% {opacity:1} 44% {opacity:1} 48%,100% {opacity:0} }
@keyframes tmIn2 { 0%,11% {opacity:0} 16% {opacity:1} 44% {opacity:1} 48%,100% {opacity:0} }
@keyframes tmIn3 { 0%,48% {opacity:0} 53% {opacity:1} 92% {opacity:1} 96%,100% {opacity:0} }
@keyframes tmIn4 { 0%,59% {opacity:0} 64% {opacity:1} 92% {opacity:1} 96%,100% {opacity:0} }
.tm-card--1 { animation: tmIn1 12s ease-in-out infinite; }
.tm-card--2 { animation: tmIn2 12s ease-in-out infinite; }
.tm-card--3 { animation: tmIn3 12s ease-in-out infinite; }
.tm-card--4 { animation: tmIn4 12s ease-in-out infinite; }

/* ── Narrow: one slot, all four through it ──────────────────────────────── */
/* NOT a cut-down layout. Same four pictures, same idea, one lane instead of
   two - which costs the vertical space of a single image rather than four,
   and keeps each photograph big enough to read. */
@media (max-width: 900px) {
  .tm-hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .tm-hero__cards { width: 100%; max-width: none; aspect-ratio: 16 / 10; justify-self: stretch; }
  .tm-card { inset: 0; width: auto; aspect-ratio: auto; }
  /* Same reasoning as the desktop waves: short fades, long holds. Four
     changes in a cycle means four chances to look washed out. */
  @keyframes tmQ1 { 0%,23% {opacity:1} 25%,98% {opacity:0} 100% {opacity:1} }
  @keyframes tmQ2 { 0%,23% {opacity:0} 25%,48% {opacity:1} 50%,100% {opacity:0} }
  @keyframes tmQ3 { 0%,48% {opacity:0} 50%,73% {opacity:1} 75%,100% {opacity:0} }
  @keyframes tmQ4 { 0%,73% {opacity:0} 75%,98% {opacity:1} 100% {opacity:0} }
  .tm-card--1 { animation: tmQ1 16s ease-in-out infinite; }
  .tm-card--2 { animation: tmQ2 16s ease-in-out infinite; }
  .tm-card--3 { animation: tmQ3 16s ease-in-out infinite; }
  .tm-card--4 { animation: tmQ4 16s ease-in-out infinite; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
/* Anyone who has asked for less movement gets the first pair, held. They do
   not lose the hero, only the cycle. */
@media (prefers-reduced-motion: reduce) {
  .tm-hero__cards, .tm-card { animation: none; }
  .tm-card--3, .tm-card--4 { opacity: 0; }
}