/*
 * About "Our team" — Figma "Website" file, "Pointer - About" 5121:9659,
 * node "section-team" 5121:9853 (1062 wide in the 1440 frame); mobile
 * "Our team" 5121:10434 in "Pointer - About mobile" 5121:10347. Shared by
 * /about and /vets/about.
 *
 * A centred label, headline and paragraph, two rows of chips (who we are,
 * what else we are) between dotted rules, and a CTA. The label is
 * .about-label from about-problem.css.
 *   ≥ 992: the desktop frame. The rows are centred in 1064; the rules fade
 *     out over 53.5 at their ends, the middle one over 160. 992–1439 (no
 *     frame) only tightens the chip gaps so the second row fits 912.
 *   < 992: the mobile frame. The rows go full bleed and scroll sideways.
 *     Figma asks "Scroll in sync? How would this work?" (5121:10345): both
 *     rows sit in one scroller, so they do. The row labels are sticky at its
 *     left with a white backdrop, so chips pass under them; a 72 white fade
 *     covers the right edge. 768–991 has no frame and keeps the desktop
 *     copy sizes.
 * The mobile frame words two things differently ("Our team is", "Sound
 * interesting?"); .about-team-wide / -narrow carry both.
 *
 * Entrance animation, from the table beside the frame (5127:13363): each
 * .about-team-reveal fades up 8 over 400ms, cubic-bezier(.22, 1, .36, 1),
 * after its inline --d (label/headline/paragraph 0/80/160ms, row 1 chips
 * 300 + 50 each, row 2 chips 450 + 50 each, CTA 800). Each check's stroke
 * draws in over 250ms ease-out, 250 after its chip. Figma's check is a
 * filled outline, so the markup traces its centreline as a 1.5 stroke.
 * js/about-team.js adds .is-animated (the hidden start) to the section,
 * then .is-in to each group as it scrolls into view: the copy, and the rows
 * with the CTA. On desktop both land at once and the table's timing holds;
 * on mobile the rows sit below the fold and would otherwise finish unseen.
 * Under prefers-reduced-motion it does nothing, so nothing is hidden.
 *
 * Fonts: headline Aeonik Medium (--font-display), the rest Inter.
 */

.about-team {
  --about-team-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* the rows' vertical rhythm: rule, gap, row 1, gap, rule, gap, row 2,
     gap, rule (Figma desktop 20/12/36/12/20/16/36/12/20) */
  --about-team-chip-h: 36rem;
  --about-team-gap-1: 12rem;
  --about-team-gap-2: 12rem;
  --about-team-gap-3: 16rem;
  --about-team-gap-4: 12rem;

  position: relative;
  z-index: 1;
  padding: 116rem 0 108rem;
  overflow-x: clip;
  background-color: #fff;
  color: #666;
  /* Inter (Figma Typography/font/Primary). The token override, not just
     font-family, is what redirects the Webflow element rules. */
  --_colors---family-paragraph: var(--font-ui);
  font-family: var(--font-ui);
  text-align: center;
}

.about-team .container.about-team-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40rem;
}

.about-team-narrow {
  display: none;
}

/* Copy -------------------------------------------------------------------- */

.about-team-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rem;
}

/* Figma: Aeonik Medium 48/1.1, -1.28px, black */
.about-team-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 48rem;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -1.28rem;
  color: #000;
}

/* Figma "Body/M": Inter 16/24, -0.32px, #666, 876 wide */
.about-team-text {
  max-width: 876rem;
  margin: 0;
  font-size: 16rem;
  line-height: 24rem;
  font-weight: 400;
  letter-spacing: -0.32rem;
  color: #666;
}

/* Rows -------------------------------------------------------------------- */

.about-team-rows {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1064rem;
}

/* Figma: 4 dots of #eee, 6 apart, in a 20 tall strip */
.about-team-dots {
  height: 20rem;
  background: radial-gradient(circle, #eee 2rem, rgba(238, 238, 238, 0) 2.25rem) center / 10rem 4rem repeat-x;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--about-team-fade, 53.5rem), #000 calc(100% - var(--about-team-fade, 53.5rem)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--about-team-fade, 53.5rem), #000 calc(100% - var(--about-team-fade, 53.5rem)), transparent);
}

/* The middle rule runs behind the scroller, between the rows */
.about-team-dots-mid {
  --about-team-fade: 160rem;

  position: absolute;
  left: 0;
  right: 0;
  top: calc(20rem + var(--about-team-gap-1) + var(--about-team-chip-h) + var(--about-team-gap-2));
}

.about-team-scroller {
  display: flex;
  flex-direction: column;
  gap: calc(var(--about-team-gap-2) + 20rem + var(--about-team-gap-3));
  margin: var(--about-team-gap-1) 0 var(--about-team-gap-4);
}

.about-team-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rem;
}

/* Figma "Label/L": Inter Medium 16/20, -0.16px, #666 */
.about-team-row-label {
  margin: 0;
  font-size: 16rem;
  line-height: 20rem;
  font-weight: 500;
  letter-spacing: -0.16rem;
  color: #666;
  white-space: nowrap;
}

.about-team-chips {
  display: flex;
  gap: 16rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Figma "Label" 5121:10155: #f5f5f5, #ebebeb hairline (inside, so one off
   our padding), 36 tall, 12/16 padding, Inter Medium 16/20, -0.16px, #222 */
.about-team-chip {
  display: flex;
  align-items: center;
  gap: 8rem;
  height: var(--about-team-chip-h);
  margin: 0;
  padding: 0 15rem 0 11rem;
  border: 1px solid #ebebeb;
  border-radius: 999px;
  background-color: #f5f5f5;
  font-size: 16rem;
  line-height: 20rem;
  font-weight: 500;
  letter-spacing: -0.16rem;
  color: #222;
  white-space: nowrap;
}

/* Figma 5121:9996: 8 left, the check in a 24 box, 4 to the text. The
   check is Figma's "Check" (#007356) as the stroke it outlines. */
.about-team-chip-role {
  gap: 4rem;
  padding-left: 7rem;
}

.about-team-check {
  display: block;
  flex: none;
  width: 24rem;
  height: 24rem;
  overflow: visible;
}

.about-team-check path {
  fill: none;
  stroke: #007356;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}

.about-team-chip-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20rem;
  height: 20rem;
}

.about-team-chip-icon img {
  display: block;
  flex: none;
  width: auto;
  height: 100%;
  max-width: none;
}

/* CTA --------------------------------------------------------------------- */

/* Figma "button-large" 5121:10333: 52 tall, 14/40 padding with the hairline
   inside, a regular question then the semibold action, 6 apart */
.about-team .button-pill.about-team-cta {
  gap: 6rem;
  margin: 0;
  max-height: none;
  padding: 13rem 39rem;
  font-size: 16rem;
  line-height: 24rem;
  letter-spacing: -0.32rem;
}

.about-team-cta-lead {
  font-weight: 400;
}

/* Entrance ---------------------------------------------------------------- */

.about-team.is-animated .about-team-reveal {
  opacity: 0;
  transform: translateY(8rem);
}

.about-team.is-animated .about-team-check path {
  stroke-dashoffset: 1;
}

.about-team.is-animated .is-in .about-team-reveal,
.about-team.is-animated .about-team-reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 400ms var(--about-team-ease) var(--d, 0ms),
    transform 400ms var(--about-team-ease) var(--d, 0ms),
    background-color 0.2s ease;
}

.about-team.is-animated .is-in .about-team-check path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 250ms ease-out calc(var(--d, 0ms) + 250ms);
}

/* ------------------------------------------------------------------ */
/* 992–1439 (no frame): tighter chips, so row 2 fits 912               */
/* ------------------------------------------------------------------ */

@media screen and (min-width: 992px) and (max-width: 1439px) {
  .about-team-row {
    gap: 12rem;
  }

  .about-team-chips {
    gap: 10rem;
  }
}

/* ------------------------------------------------------------------ */
/* < 992: Figma mobile "Team composition" 5121:10441, a shared scroller */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 991px) {
  .about-team {
    /* Figma mobile 20/8/32/12/20/8/32/8/20 */
    --about-team-chip-h: 32rem;
    --about-team-gap-1: 8rem;
    --about-team-gap-2: 12rem;
    --about-team-gap-3: 8rem;
    --about-team-gap-4: 8rem;
    --about-team-label-w: 176rem;
    --about-team-label-pad: 48rem;
  }

  .about-team-br {
    display: none;
  }

  /* full bleed out of the column */
  .about-team-rows {
    width: 100vw;
    max-width: none;
    margin: 0 calc(50% - 50vw);
  }

  /* Figma fade-left: white over 72, solid to 35.9%; fade-right 72 */
  .about-team-dots,
  .about-team-dots-mid {
    -webkit-mask-image: linear-gradient(to right, transparent 25.8rem, #000 72rem, #000 calc(100% - 72rem), transparent);
    mask-image: linear-gradient(to right, transparent 25.8rem, #000 72rem, #000 calc(100% - 72rem), transparent);
  }

  .about-team-rows::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    bottom: 0;
    width: 72rem;
    background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
    pointer-events: none;
  }

  .about-team-scroller {
    position: relative;
    z-index: 1;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .about-team-scroller::-webkit-scrollbar {
    display: none;
  }

  /* Each row as wide as its chips plus room to clear the right fade */
  .about-team-row {
    justify-content: flex-start;
    gap: 0;
    width: max-content;
    min-width: 100%;
    padding-right: 72rem;
  }

  /* Figma "Label/M": Inter Medium 14/18, -0.14px; chips start 120 in.
     Solid white, so chips scrolled under it vanish behind the text. */
  .about-team-row-label {
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    flex: none;
    align-items: center;
    align-self: stretch;
    min-width: var(--about-team-label-w);
    padding: 0 12rem 0 var(--about-team-label-pad);
    background-color: #fff;
    font-size: 14rem;
    line-height: 18rem;
    letter-spacing: -0.14rem;
    text-align: left;
  }

  /* Once the rows scroll, a 24 fade past the label softens the edge the
     chips disappear at. At rest it would fade the first chip, so it comes
     in over the first 24 of scroll; without scroll timelines the edge
     stays hard. */
  @supports (animation-timeline: scroll()) {
    .about-team-row-label::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 100%;
      width: 24rem;
      background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
      pointer-events: none;
      animation: about-team-edge linear both;
      animation-timeline: scroll(nearest inline);
      animation-range: 0 24px;
    }
  }

  @keyframes about-team-edge {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .about-team-row + .about-team-row .about-team-chips {
    gap: 12rem;
  }

  /* Figma "Team label" 5121:10574: 32 tall, Inter Medium 14/18, -0.14px */
  .about-team-chip {
    font-size: 14rem;
    line-height: 18rem;
    letter-spacing: -0.14rem;
  }

  /* 10 to the 12 wide check, 10 to the text: the 24 box at 4, then 4 */
  .about-team-chip-role {
    padding-left: 3rem;
  }
}

/* < 768: Figma mobile "Our team" 5121:10434 */
@media screen and (max-width: 767px) {
  .about-team {
    --about-team-label-w: 120rem;
    --about-team-label-pad: 24rem;

    padding: 64rem 24rem;
  }

  .about-team .container.about-team-content,
  .about-team-copy {
    gap: 16rem;
  }

  .about-team-wide {
    display: none;
  }

  .about-team-narrow {
    display: inline;
  }

  /* Figma: Aeonik Medium 36/1.1, -0.64px */
  .about-team-heading {
    font-size: 36rem;
    letter-spacing: -0.64rem;
  }

  .about-team-br {
    display: inline;
  }

  /* Figma: the composition's own 16 above and below */
  .about-team-rows {
    margin: 16rem calc(50% - 50vw);
  }

  /* Figma "Call to action" 5121:10902: full width, 51 tall */
  .about-team .button-pill.about-team-cta {
    width: 100%;
    padding: 12.5rem 20.5rem;
  }
}