/*
  Join Our Team section.
  Source: Figma node 27:72 (desktop 1361 × 657).

  Two-column layout: left column is text (eyebrow, heading, paragraph,
  three check bullets, CTA button); right column is a photo wrapper
  containing the team photo + decorative dotted circles + an overlapping
  testimonial card hanging off the photo's bottom-left.

  Stacks vertically below 900px. Decorative circles are hidden on
  smaller widths so the photo column doesn't get cluttered.
*/

.text-cta-with-photo-testimonial {
  padding-block: var(--section-padding-block);
  /* Clip horizontal overflow only — the deco-ring clusters extend 85px
     to the left of the photo column (TL) and 85px to the right (BR).
     Between 1100px and ~1624px viewport widths the rings spill past the
     viewport edge and create a page-wide horizontal scrollbar. `clip`
     (vs `hidden`) doesn't create a scroll container, so the testimonial
     card's vertical overflow into the next section continues to work. */
  overflow-x: clip;
}

/* At ≥1100px the testimonial card is position:absolute with
   `bottom: -12%` of the photo column, so it visually overflows the
   section's normal 40px bottom padding into the next section. Pad
   the section's bottom enough to absorb the overflow + leave the
   usual 40px of breathing room below the card. */
@media (min-width: 1100px) {
  .text-cta-with-photo-testimonial {
    padding-bottom: clamp(80px, 8vw, 128px);
  }
}

.text-cta-with-photo-testimonial__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-inline);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}

/* Side-by-side at ≥900px — text on the left, photo cluster on the right. */
@media (min-width: 900px) {
  .text-cta-with-photo-testimonial__inner {
    grid-template-columns: 585fr 629fr;
    column-gap: clamp(var(--space-7), 6vw, 147px);
  }
}

/* ---------------------------------------------------------------
   Left column — text
   --------------------------------------------------------------- */
.text-cta-with-photo-testimonial__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* The text column is a flex column with default align-items: stretch,
   which makes inline-flex children (the CTA button) stretch to full
   width. Pin the button to its content size so it matches the other
   site-wide buttons. */
.text-cta-with-photo-testimonial__text > .btn {
  align-self: flex-start;
}

.text-cta-with-photo-testimonial__eyebrow {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-heading);
  margin: 0;
}

.text-cta-with-photo-testimonial__eyebrow-slash {
  color: var(--color-green-2);
  margin-right: 0.25em;
}

.text-cta-with-photo-testimonial__heading {
  font-family: var(--font-family-display);
  /* Inverse of why-infleqtion: "Join" is the semibold accent green,
     "Our Team" stays the regular navy. */
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  margin: 0;
  color: var(--color-text-heading);
}

.text-cta-with-photo-testimonial__heading-accent {
  color: var(--color-green-2);
  font-weight: var(--font-weight-semibold);
}

.text-cta-with-photo-testimonial__description {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-body);
  margin: 0;
}

/* ---------------------------------------------------------------
   Bullet list
   --------------------------------------------------------------- */
.text-cta-with-photo-testimonial__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4_5);
}

.text-cta-with-photo-testimonial__bullet {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.text-cta-with-photo-testimonial__bullet-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 4px; /* visually align with the bullet-title baseline */
}

.text-cta-with-photo-testimonial__bullet-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.text-cta-with-photo-testimonial__bullet-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-semibold);
  line-height: 1.33;
  color: var(--color-text-heading);
  margin: 0;
}

.text-cta-with-photo-testimonial__bullet-text {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 1.25;
  color: var(--color-text-body);
  margin: 0;
}

/* ---------------------------------------------------------------
   Right column — photo + decorative circles + testimonial card
   --------------------------------------------------------------- */
.text-cta-with-photo-testimonial__photo {
  position: relative;
  /* Local stacking context so the small rings' negative z-index stays
     scoped inside this column (and doesn't slip behind the page bg). */
  isolation: isolate;
}

.text-cta-with-photo-testimonial__photo-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 586 / 520;
  border-radius: 8px;
  object-fit: cover;
}

/* Decorative dotted-ring clusters at the top-left and bottom-right of
   the team photo. Matched-pair pattern reusing the alt-second-level-
   hero-intro SVGs (deco-br-small / deco-br-large) so each cluster
   carries a small + large ring. Hidden below 1100px to avoid clutter. */
.text-cta-with-photo-testimonial__deco {
  position: absolute;
  pointer-events: none;
  display: none;
}

@media (min-width: 1100px) {
  .text-cta-with-photo-testimonial__deco {
    display: block;
  }
}

.text-cta-with-photo-testimonial__deco-ring {
  position: absolute;
  display: block;
}

/* Top-left cluster — mirror of BR across the diagonal. Cluster size
   matches the large ring (214×213); positioned slightly outside the
   photo's top-left corner. */
.text-cta-with-photo-testimonial__deco--tl {
  top: -60px;
  left: -85px;
  width: 214px;
  height: 213px;
}

.text-cta-with-photo-testimonial__deco-ring--tl-large {
  left: 0;
  top: 0;
  width: 214px;
  height: 213px;
  z-index: 1;  /* large rings paint on top of the photo */
  animation: join-team-spin-ccw 28s linear infinite;
}

.text-cta-with-photo-testimonial__deco-ring--tl-small {
  left: 150px;
  top: 0;
  width: 141px;
  height: 146px;
  z-index: -1;  /* small rings tuck behind the photo */
  animation: join-team-spin 20s linear infinite;
}

/* Bottom-right cluster — anchored to the bottom-right corner of the
   photo, overhanging into the page padding by 85px. */
.text-cta-with-photo-testimonial__deco--br {
  right: -85px;
  bottom: -60px;
  width: 214px;
  height: 213px;
}

.text-cta-with-photo-testimonial__deco-ring--br-large {
  right: 45px;
  bottom: 0;
  width: 214px;
  height: 213px;
  z-index: 1;  /* large rings paint on top of the photo */
  animation: join-team-spin-ccw 28s linear infinite;
}

.text-cta-with-photo-testimonial__deco-ring--br-small {
  right: 189px;
  bottom: 0;
  width: 141px;
  height: 146px;
  z-index: -1;  /* small rings tuck behind the photo */
  animation: join-team-spin 20s linear infinite;
}

/* Slow clockwise spin used by the small rings. */
@keyframes join-team-spin {
  to { transform: rotate(360deg); }
}

/* Counter-clockwise counterpart used by the large rings. */
@keyframes join-team-spin-ccw {
  to { transform: rotate(-360deg); }
}


/* Testimonial card: white pill-cornered card overlapping the photo's
   bottom-left. Positioned absolutely on wider widths; falls back to
   in-flow below the photo on narrow widths. */
.text-cta-with-photo-testimonial__testimonial {
  background-color: var(--color-background);
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  padding: var(--space-7_5);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: calc(-1 * var(--space-10)); /* overlap the photo on mobile */
  margin-inline: var(--space-6);
  position: relative;
  z-index: 1;
}

@media (min-width: 1100px) {
  .text-cta-with-photo-testimonial__testimonial {
    position: absolute;
    left: -8%;
    bottom: -12%;
    width: 72%;
    margin: 0;
    padding: 32px;
  }
}

.text-cta-with-photo-testimonial__testimonial-quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.text-cta-with-photo-testimonial__testimonial-quote-mark {
  display: block;
  width: 23px;
  height: auto;
  color: var(--color-green-2); /* the SVG uses currentColor for the glyph */
}

.text-cta-with-photo-testimonial__testimonial-text {
  font-family: var(--font-family-display);
  font-size: clamp(20px, 18px + 0.4vw, 24px);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  color: var(--color-text-heading);
  margin: 0;
}

.text-cta-with-photo-testimonial__testimonial-credit {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.text-cta-with-photo-testimonial__testimonial-name {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-medium);
  line-height: 1.1;
  color: var(--color-text-heading);
  margin: 0;
}

.text-cta-with-photo-testimonial__testimonial-position {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  color: var(--color-text-body);
  margin: 0;
}

/* ---------------------------------------------------------------
   Scroll-driven reveal stagger
   Text column reveals first; photo + testimonial overlay follow
   ~0.15s later so the heading lands before the image enters.
   --------------------------------------------------------------- */
.text-cta-with-photo-testimonial__photo { --reveal-delay: 0.15s; }

/* ---------------------------------------------------------------
   Testimonial: scroll-linked slide-up
   The card starts 200px below its natural position and slides into
   place tied to the user's scroll progress through the section.
   `animation-timeline: view()` scrubs the animation as the element
   moves through the viewport. Browsers without view-timeline support
   (Firefox today) skip the slide entirely and render the card in
   its resting state — acceptable fallback.
   --------------------------------------------------------------- */
@keyframes testimonial-slide-up {
  from { transform: translateY(200px); }
  to   { transform: translateY(0); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .text-cta-with-photo-testimonial__testimonial {
      animation: testimonial-slide-up linear both;
      animation-timeline: view();
      /* Start when the card's top edge enters viewport bottom,
         finish when it's ~halfway through its scroll-through. */
      animation-range: entry 0% cover 50%;
    }
  }
}

/* ---------------------------------------------------------------
   Tablet (768–1099px): drive the testimonial slide off the PHOTO,
   not the card itself.
   In this range the card sits in-flow just below the photo, so its own
   view() timeline wouldn't start until the card scrolls in — noticeably
   after the photo. Instead bind the slide to a named view-timeline on
   the photo image (hoisted to the shared .__photo ancestor via
   timeline-scope, since the card is a sibling, not a descendant). The
   card is then already showing and moving into place as soon as the
   photo's bottom edge reaches the viewport. Only the timeline + range
   are overridden here; the animation shorthand carries over from above.
   --------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 768px) and (max-width: 1099.98px) {
    .text-cta-with-photo-testimonial__photo {
      timeline-scope: --tcwpt-photo;
    }

    .text-cta-with-photo-testimonial__photo-image {
      view-timeline: --tcwpt-photo block;
    }

    .text-cta-with-photo-testimonial__testimonial {
      animation-timeline: --tcwpt-photo;
      /* ease-out over a wide scroll window so the card glides into
         place and decelerates at the end, instead of tracking scroll
         1:1 (linear) and snapping to rest. Range spans almost the whole
         time the photo is in view, to slow the slide right down in this
         in-flow state only. */
      animation-timing-function: ease-out;
      animation-range: entry 20% contain 100%;
    }
  }
}