/* Buttons sit in the slot. Items align to the top, so a button with a note
   under it doesn't push its neighbours out of line. */
.xN_ptZnlEpWOQkbYs6AP {
  --_gap: 0.75rem;

  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: var(--tt-buttons-justify, flex-start);
  gap: var(--_gap);
  box-sizing: border-box;
}

/* Webflow wraps slot content in one element; display: contents lets each
   button become a flex item of the group. */
.xN_ptZnlEpWOQkbYs6AP ::slotted(*) {
  display: contents;
}

.xN_ptZnlEpWOQkbYs6AP[data-gap="x-small"] { --_gap: 0.25rem; }
.xN_ptZnlEpWOQkbYs6AP[data-gap="small"] { --_gap: 0.5rem; }
.xN_ptZnlEpWOQkbYs6AP[data-gap="large"] { --_gap: 1rem; }
.xN_ptZnlEpWOQkbYs6AP[data-gap="x-large"] { --_gap: 1.5rem; }

/* Space above: same scale as the site's .top-* utilities (scss/base/_globals.scss). */
.xN_ptZnlEpWOQkbYs6AP[data-space-above="xx-small"] { margin-top: 1rem; }
.xN_ptZnlEpWOQkbYs6AP[data-space-above="x-small"] { margin-top: 1.5rem; }
.xN_ptZnlEpWOQkbYs6AP[data-space-above="small"] { margin-top: 2rem; }
.xN_ptZnlEpWOQkbYs6AP[data-space-above="normal"] { margin-top: 3rem; }
.xN_ptZnlEpWOQkbYs6AP[data-space-above="medium"] { margin-top: 4rem; }
.xN_ptZnlEpWOQkbYs6AP[data-space-above="large"] { margin-top: 6rem; }
.xN_ptZnlEpWOQkbYs6AP[data-space-above="x-large"] { margin-top: 8rem; }

/* Without Align (Auto) the group follows the component around it. */
.xN_ptZnlEpWOQkbYs6AP[data-align="left"] { justify-content: flex-start; }
.xN_ptZnlEpWOQkbYs6AP[data-align="center"] { justify-content: center; }
.xN_ptZnlEpWOQkbYs6AP[data-align="right"] { justify-content: flex-end; }

@media (max-width: 479px) {
  .xN_ptZnlEpWOQkbYs6AP[data-space-above="normal"] { margin-top: 2.5rem; }
  .xN_ptZnlEpWOQkbYs6AP[data-space-above="medium"] { margin-top: 3rem; }
  .xN_ptZnlEpWOQkbYs6AP[data-space-above="large"] { margin-top: 5rem; }
  .xN_ptZnlEpWOQkbYs6AP[data-space-above="x-large"] { margin-top: 6rem; }

  .xN_ptZnlEpWOQkbYs6AP[data-stack] {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Values from the live site's .tt-single-client-quote (research/quote-staging.md):
   Tobias italic 300 with "ss01" and "ss03", 2.4rem on desktop (Large), max
   width 44rem, 1.5rem to the author, a Text button below.

   Every gradient has two sets, picked with the --tt-dark space toggle (see
   Button.module.css). Dark keeps the live colors, which the site lightens
   with plus-lighter. Light uses deeper stops, so even the lightest part of
   the text keeps 3:1 against white (enough for text this large). A new tone
   is one more [data-color] block with --_d-g and --_g. */
.iMPYXi8t1gEL_o3CfHJW {
  --_size: clamp(1.9rem, 1.433rem + 1.559vw, 2.4rem);
  --_width: var(--tt-width-lg, 44rem);
  --_align: center;
  --_items: center;

  --_d-fg: var(--tt-dark) var(--white-a-100, #fff);
  --_d-muted: var(--tt-dark) var(--white-a-60, rgba(255, 255, 255, 0.65));
  --_d-line: var(--tt-dark) rgba(255, 255, 255, 0.2);
  --_fg: var(--_d-fg, var(--black-a-100, #0d0d0d));
  --_muted: var(--_d-muted, var(--black-a-60, rgba(13, 13, 13, 0.6)));
  --_line: var(--_d-line, rgba(13, 13, 13, 0.15));
  --_g: none;

  /* Dark text over dark backgrounds glows with plus-lighter, like on the site. */
  --_d-blend: var(--tt-dark) plus-lighter;
  --_blend: var(--_d-blend, normal);

  --_t: 0.7s cubic-bezier(0.22, 1, 0.36, 1);

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: var(--_items);
  gap: 1.5rem;
  width: 100%;
  max-width: var(--_width);
  margin: 0 auto;
  color: var(--_fg);
  text-align: var(--_align);
}

.iMPYXi8t1gEL_o3CfHJW *,
.iMPYXi8t1gEL_o3CfHJW *::before,
.iMPYXi8t1gEL_o3CfHJW *::after {
  box-sizing: border-box;
}

.yeySIUYH48cjymxrZuPF {
  display: block;
}

/* ---------- Background ---------- */

.iMPYXi8t1gEL_o3CfHJW[data-background="light"] {
  --tt-dark: initial;
}

.iMPYXi8t1gEL_o3CfHJW[data-background="dark"] {
  --tt-dark: ;
}

/* ---------- Size and width ---------- */

/* Fluid between 479px and 992px, like the heading scale. */
.iMPYXi8t1gEL_o3CfHJW[data-size="small"] { --_size: clamp(1.3rem, 1.02rem + 0.936vw, 1.6rem); }
.iMPYXi8t1gEL_o3CfHJW[data-size="medium"] { --_size: clamp(1.6rem, 1.226rem + 1.248vw, 2rem); }

.iMPYXi8t1gEL_o3CfHJW[data-width="medium"] { --_width: var(--tt-width-md, 36rem); }
.iMPYXi8t1gEL_o3CfHJW[data-width="x-large"] { --_width: var(--tt-width-xl, 52rem); }

/* ---------- Align ---------- */

.iMPYXi8t1gEL_o3CfHJW[data-align="left"] {
  --_align: start;
  --_items: flex-start;
  margin-left: 0;
}

@media (max-width: 767px) {
  .iMPYXi8t1gEL_o3CfHJW[data-mobile-align="left"] {
    --_align: start;
    --_items: flex-start;
    margin-left: 0;
  }

  .iMPYXi8t1gEL_o3CfHJW[data-mobile-align="center"] {
    --_align: center;
    --_items: center;
    margin-left: auto;
  }
}

/* ---------- Text ---------- */

.iMPYXi8t1gEL_o3CfHJW [data-part="text"],
.iMPYXi8t1gEL_o3CfHJW [data-part="text"] p {
  margin: 0;
  padding: 0;
  border: 0;
}

.iMPYXi8t1gEL_o3CfHJW [data-part="text"] {
  max-width: 100%;
  color: var(--_fg);
  font-family: var(--tt-font-serif, var(--_text-sizes---text-serif-ff, "Tobias", Georgia, serif));
  font-size: var(--_size);
  line-height: 1.2;
  font-weight: 300;
  font-style: italic;
  font-feature-settings: "ss01" on, "ss03" on;
  text-wrap: balance;
  mix-blend-mode: var(--_blend);
}

.iMPYXi8t1gEL_o3CfHJW[data-blend="none"] { --_blend: normal; }
.iMPYXi8t1gEL_o3CfHJW[data-blend="plus-lighter"] { --_blend: plus-lighter; }

/* ---------- Colors ---------- */

.iMPYXi8t1gEL_o3CfHJW[data-color="blue-purple"] {
  --_d-g: var(--tt-dark) linear-gradient(135deg, hsl(226 88% 52%) 10%, hsl(216 100% 66%) 32%, hsl(263 100% 64%) 91%);
  --_g: var(--_d-g, linear-gradient(135deg, #1f4ae0 10%, #2563eb 32%, #7a3cf0 91%));
}

.iMPYXi8t1gEL_o3CfHJW[data-color="blue-pink"] {
  --_d-g: var(--tt-dark) linear-gradient(135deg, #2d5eff 10%, #dc7bff 60%);
  --_g: var(--_d-g, linear-gradient(135deg, #2d5eff 10%, #a43fd6 60%));
}

.iMPYXi8t1gEL_o3CfHJW[data-color="red-blue"] {
  --_d-g: var(--tt-dark) linear-gradient(135deg, #6e7dff 10%, #d65d87 60%);
  --_g: var(--_d-g, linear-gradient(135deg, #5260f0 10%, #c4466f 60%));
}

/* Without background-clip: text the text keeps the solid color above. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .iMPYXi8t1gEL_o3CfHJW:not([data-color="solid"]) [data-part="text"] {
    background-image: var(--_g);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* The caret follows color, so it would be invisible while editing. */
    caret-color: var(--_fg);
  }

  /* Words: each word paints its slice of the block's gradient (useWordGradient). */
  .iMPYXi8t1gEL_o3CfHJW[data-reveal-style="words"]:not([data-color="solid"]) [data-part="text"] {
    position: relative;
    background-image: none;
  }

  .iMPYXi8t1gEL_o3CfHJW[data-reveal-style="words"]:not([data-color="solid"]) [data-part="word"] {
    background-image: var(--_g);
    background-size: var(--_tw, 100%) var(--_th, 100%);
    background-position: calc(-1 * var(--_x, 0px)) calc(-1 * var(--_y, 0px));
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

/* ---------- Author ---------- */

.iMPYXi8t1gEL_o3CfHJW [data-part="author"] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  text-align: start;
}

.iMPYXi8t1gEL_o3CfHJW [data-part="photo"] {
  display: block;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
}

.iMPYXi8t1gEL_o3CfHJW [data-part="details"] {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.8rem;
  line-height: 1.15;
}

.iMPYXi8t1gEL_o3CfHJW [data-part="name"] {
  color: var(--_fg);
  font-weight: 600;
}

.iMPYXi8t1gEL_o3CfHJW [data-part="role"] {
  color: var(--_muted);
}

.iMPYXi8t1gEL_o3CfHJW [data-part="logo"] {
  display: block;
  flex: none;
  width: auto;
  max-width: 8rem;
  height: 1.5rem;
  object-fit: contain;
}

/* A fine line between the person and the company logo. */
.iMPYXi8t1gEL_o3CfHJW [data-part="details"] + [data-part="logo"] {
  margin-left: 0.25rem;
  padding-left: 1rem;
  border-left: 1px solid var(--_line);
  box-sizing: content-box;
}

/* ---------- Action ---------- */

/* The Button Group inside follows the alignment. */
.iMPYXi8t1gEL_o3CfHJW [data-part="action"] {
  --tt-buttons-justify: var(--_items, center);
  margin-top: 0.5rem;
}

.iMPYXi8t1gEL_o3CfHJW [data-part="action"][data-empty] {
  display: none;
}

/* ---------- Reveal ----------
   Armed only below the fold (useScrollReveal). Fade: the text rises 12px and
   sharpens from a 6px blur; author and action follow. Words: the same per
   word, one after the other. At rest nothing keeps a filter or transform. */

.iMPYXi8t1gEL_o3CfHJW[data-reveal] [data-part="text"],
.iMPYXi8t1gEL_o3CfHJW[data-reveal] [data-part="author"],
.iMPYXi8t1gEL_o3CfHJW[data-reveal] [data-part="action"],
.iMPYXi8t1gEL_o3CfHJW[data-reveal] [data-part="word"] {
  transition:
    opacity var(--_t),
    transform var(--_t),
    filter var(--_t);
}

.iMPYXi8t1gEL_o3CfHJW[data-reveal="armed"][data-reveal-style="fade"] [data-part="text"],
.iMPYXi8t1gEL_o3CfHJW[data-reveal="armed"] [data-part="author"],
.iMPYXi8t1gEL_o3CfHJW[data-reveal="armed"] [data-part="action"] {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(6px);
}

.iMPYXi8t1gEL_o3CfHJW[data-reveal="in"] [data-part="author"] { transition-delay: 0.15s; }
.iMPYXi8t1gEL_o3CfHJW[data-reveal="in"] [data-part="action"] { transition-delay: 0.25s; }

.iMPYXi8t1gEL_o3CfHJW [data-part="word"] {
  display: inline-block;
}

.iMPYXi8t1gEL_o3CfHJW[data-reveal="armed"] [data-part="word"] {
  opacity: 0;
  transform: translateY(0.3em);
  filter: blur(4px);
}

/* Capped, so long statements don't take ages. */
.iMPYXi8t1gEL_o3CfHJW[data-reveal="in"] [data-part="word"] {
  transition-delay: calc(min(var(--_i), 24) * 40ms);
}