/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--paddingSM);
  padding: var(--paddingSM) var(--paddingLG);
  font-family: var(--font);
  font-size: var(--textCallout);
  font-weight: 600;
  letter-spacing: var(--ls-btn);
  text-decoration: none;
  cursor: pointer;
  border: var(--borderThickness) solid transparent;
  border-radius: var(--radiusSM);
  transition:
    background var(--trans),
    color var(--trans),
    border-color var(--trans),
    transform var(--trans);
  line-height: 1;
  white-space: nowrap;
  appearance: none;
}

.btn--primary {
  background: var(--secondary);
  color: var(--basicText);
  border-color: var(--secondary);
}

.btn--primary:hover {
  background: transparent;
  color: var(--secondary);
  transform: translateY(calc(var(--borderThickness) * -1));
}

.btn--outline {
  background: transparent;
  color: var(--text);
  border-color: var(--divider);
}

.btn--outline:hover {
  border-color: var(--text);
  color: var(--text);
  transform: translateY(calc(var(--borderThickness) * -1));
}

.btn--secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--divider);
}

.btn--secondary:hover {
  border-color: var(--text);
}

.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}

.btn--ghost:hover {
  color: var(--text);
}

.btn--sm {
  font-size: var(--textBody);
  padding: var(--paddingXS) var(--paddingMD);
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--paddingXS);
  font-size: var(--textBody);
  font-weight: 600;
  color: var(--secondary);
  text-decoration: none;
  letter-spacing: var(--ls-link);
  transition: gap var(--trans);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.btn-link:hover {
  gap: var(--paddingSM);
}

/* ── ICON BUTTONS ── */
.btn-icon-only,
.icon-btn {
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  appearance: none;
  flex-shrink: 0;
  padding: 0;
  width: var(--iconLG);
  height: var(--iconLG);
}

.icon-btn svg {
  width: var(--iconSM);
  height: var(--iconSM);
  fill: currentColor;
  stroke-width: 2;
}

.icon-btn--outline {
  background: var(--themeBaseBackground);
  color: var(--themeBaseMuted);
}

.icon-btn--outline:hover {
  border-color: var(--text);
  color: var(--text);
}

/* ── CARD ── */
.card {
  background: var(--bg-card);
  border: var(--borderThickness) solid var(--border-card);
  border-radius: var(--radiusLG);
  overflow: hidden;
  display: block;
  transition:
    transform var(--trans),
    box-shadow var(--trans),
    border-color var(--trans);
}

.card:hover {
  transform: translateY(var(--hover-lift));
  border-color: var(--secondary);
}

.card:hover .card__img img {
  transform: scale(1.03);
}

.card--padded {
  display: flex;
  flex-direction: column;
  gap: var(--paddingMD);
  padding: var(--paddingLG);
}

/* ── CARD IMAGE BLOCK ── */
.card__img {
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
  background: var(--surface-subtle);
}

.card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--trans);
}

.card__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--textH2);
  font-weight: 800;
  color: var(--surface-emphasis);
}

.card__overlay {
  background: linear-gradient(
    to top,
    rgba(var(--hero-rgb), 0.92) 0%,
    rgba(var(--hero-rgb), 0.6) 55%,
    transparent 100%
  );
  bottom: 0;
  left: 0;
  padding: var(--paddingLG) var(--paddingLG) var(--paddingLG);
  position: absolute;
  right: 0;
}

.card__overlay .card__subtitle {
  color: rgba(var(--basicText-rgb), 0.55);
  font-size: var(--textCaption);
  font-weight: 700;
  letter-spacing: calc(var(--borderThickness) / 2);
  margin: 0 0 var(--paddingSM);
  text-transform: uppercase;
}

.card__overlay .card__title {
  color: var(--basicText);
  display: block;
  font-size: var(--textHeadline);
  font-weight: 800;
  letter-spacing: calc(0.3px * -1);
  line-height: 1.2;
  margin: 0 0 var(--paddingSM);
}

.card__overlay .card__desc {
  color: rgba(var(--basicText-rgb), 0.65);
  font-size: var(--textFootnote);
  line-height: 1.5;
  margin: 0 0 calc(var(--paddingMD) - var(--borderThickness));
}

.card__overlay .card__link {
  color: var(--brandPrimary);
  font-size: var(--textFootnote);
  font-weight: 700;
  letter-spacing: calc(var(--borderThickness) / 4);
  text-decoration: none;
}

.card__featured-badge {
  background: var(--brandPrimary);
  border-radius: var(--borderThickness);
  color: var(--basicText);
  font-size: var(--textCaption);
  font-weight: 700;
  left: var(--paddingMD);
  letter-spacing: calc(var(--borderThickness) / 2);
  padding: var(--paddingXS) var(--paddingSM);
  pointer-events: none;
  position: absolute;
  text-transform: uppercase;
  top: var(--paddingMD);
  z-index: 10;
}

.card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--paddingMD);
  padding: var(--paddingLG);
}

.card__subtitle {
  font-size: var(--textBody);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.card__subtitle:has(span) {
  font-size: var(--textCallout);
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: stretch;
  gap: var(--paddingSM);
  flex-wrap: wrap;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

.card__subtitle span {
  display: flex;
  align-items: center;
  gap: var(--paddingSM);
  padding: var(--paddingXS) 0;
  white-space: nowrap;
  font-weight: 400;
}

.card__subtitle svg {
  width: var(--textHeadline);
  height: var(--textHeadline);
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  opacity: 0.4;
  flex-shrink: 0;
}

.card__title {
  font-size: var(--textH3);
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  text-decoration: none;
  display: block;
}

.card__title:hover {
  color: var(--secondary);
}

.card__desc {
  line-height: 1.6;
  margin: 0;
  font-size: var(--textBody);
  font-weight: 400;
  color: var(--text-muted);
}

.card__link {
  align-self: flex-start;
  margin: 0 auto;
}

/* ── CARD GRID ── */
.card-grid {
  display: grid;
  gap: var(--paddingLG);
  width: 100%;
}

.card-grid--gap-md {
  gap: var(--paddingMD);
}

.card-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-grid--equal > .card {
  height: 100%;
}

/* ── MEDIA GRID ── */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--paddingSM);
  width: 100%;
}

.media-card {
  aspect-ratio: 16/9;
  border-radius: var(--radiusMD);
  display: block;
  overflow: hidden;
  position: relative;
}

.media-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--trans);
}

.media-card:hover img {
  transform: scale(1.03);
}

.media-card[hidden] {
  display: none;
}

/* ── SURFACE ── */
.surface {
  display: flex;
  padding: var(--paddingLG);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--paddingMD);
  align-self: stretch;
  background: var(--surface);
  border-radius: var(--radiusLG);
}

/* ── SECTION HEADER (editorial style) ── */
.section-header {
  display: flex;
  align-items: center;
  gap: var(--paddingLG);
  margin-bottom: var(--paddingLG);
}

.section-header__label {
  font-size: var(--textBody);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--secondary);
  white-space: nowrap;
}

.section-header__line {
  flex: 1;
  height: var(--borderThickness);
  background: var(--divider);
}

/* ── PAGE HEADER ── */
.page-header {
  padding-top: var(--paddingXL);
  padding-bottom: var(--paddingXL);
  min-width: 0;
}

.page-header__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--paddingXS);
  font-size: var(--textBody);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: var(--paddingMD);
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.page-header__mark::before {
  content: "";
  display: inline-block;
  width: var(--paddingMD);
  height: var(--paddingMD);
  flex: 0 0 auto;
  background: var(--mark-arrow-icon) center / contain no-repeat;
}

.page-header__title {
  font-size: var(--textTitles);
  font-weight: 800;
  letter-spacing: var(--ls-heading);
  color: var(--text);
  line-height: 0.9;
  margin: 0;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.page-header__subtitle {
  font-size: var(--textHeadline);
  font-weight: 400;
  color: var(--text-muted);
  margin-top: var(--paddingLG);
  max-width: 60ch;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.page-header__two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--paddingXL);
  align-items: start;
  min-width: 0;
}

/* ── TESTIMONIAL CARD ── */
.testimonial-card {
  background: var(--bg-card);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: var(--paddingMD);
  padding: var(--paddingXL) 0;
}

.testimonial-card::before {
  content: "";
  display: block;
  width: var(--paddingLG);
  height: var(--paddingXS);
  background: var(--secondary);
  border-radius: var(--borderThickness);
  flex-shrink: 0;
}

/* Figma order: accent bar → quote → author → role */
.testimonial-card__quote {
  order: 1;
  font-size: var(--textCallout);
  font-weight: 400;
  font-style: normal;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}

.testimonial-card__author {
  order: 2;
  font-size: var(--textCallout);
  font-weight: 700;
  color: var(--text);
  margin-top: var(--paddingSM);
}

.testimonial-card__subtitle {
  order: 3;
  font-size: var(--textBody);
  font-weight: 400;
  color: var(--text-muted);
}

.testimonial-card
  :is(
    .testimonial-card__quote,
    .testimonial-card__author,
    .testimonial-card__subtitle,
    [data-type-text],
    .type-effect__text,
    .type-effect__reserve
  ) {
  color: inherit;
}

.testimonial-card__quote,
.testimonial-card__author {
  color: var(--text);
}

.testimonial-card__subtitle {
  color: var(--text-muted);
}

[data-type-text] {
  display: grid;
  position: relative;
}

.type-effect__text,
.type-effect__reserve {
  grid-area: 1 / 1;
}

.type-effect__reserve {
  visibility: hidden;
}

.is-typing .type-effect__text::after {
  animation: type-effect-caret 0.75s steps(1) infinite;
  background: currentColor;
  content: "";
  display: inline-block;
  height: 1em;
  margin-left: 3px;
  transform: translateY(0.12em);
  width: var(--borderThickness);
}

@keyframes type-effect-caret {
  50% {
    opacity: 0;
  }
}

.testimonial-slider {
  --testimonial-progress-duration: 6000ms;
  position: relative;
}

.testimonial-section {
  background: var(--themeBasePrimary);
  color: var(--text);
  border-top: var(--borderThickness) solid var(--divider);
  padding: var(--paddingLG) var(--paddingXL)
    calc(var(--paddingXL) + var(--paddingLG));
  position: relative;
  z-index: 1;
}

.testimonial-section--tab-dots {
  padding-bottom: var(--paddingXL);
  z-index: 2;
}

.testimonial-section__slider {
  --testimonial-arrow-size: var(--iconLG);
  overflow: visible;
  position: relative;
  width: 100%;
}

.testimonial-section__viewport {
  overflow: hidden;
  width: 75%;
  margin: 0 auto;
}

.testimonial-section .testimonial-track {
  display: flex;
  gap: 0;
  transition: transform var(--trans);
  width: 100%;
}

.testimonial-section .testimonial-slide {
  box-sizing: border-box;
  flex: 0 0 100%;
  min-width: 100%;
  padding: 0;
}

.testimonial-section .testimonial-card {
  background-color: transparent;
  color: inherit;
  display: block;
  overflow: visible;
  padding: 0;
  position: relative;
}

.testimonial-section .testimonial-card::before {
  display: none;
}

.testimonial-section .testimonial-card__inner {
  display: flex;
  align-items: center;
  gap: var(--paddingXL);
}

.testimonial-section .testimonial-card__avatar {
  width: var(--min-photo-h-lg);
  height: var(--min-photo-h-lg);
  min-width: var(--min-photo-h-lg);
  border-radius: var(--radiusFull);
  background: var(--surface-subtle);
  box-shadow: none;
  opacity: 0;
  overflow: hidden;
  transform: translateY(var(--paddingSM));
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
  transition-delay: 0s;
}

.testimonial-section .testimonial-slide.is-current .testimonial-card__avatar {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.28s;
}

.testimonial-section .testimonial-card__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-section .testimonial-card__avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--min-photo-h-lg);
  height: var(--min-photo-h-lg);
  color: var(--surface-emphasis);
  font-size: var(--textH2);
  font-weight: 800;
}

.testimonial-section .testimonial-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  gap: var(--paddingSM);
}

.testimonial-section .testimonial-card__bar {
  width: calc(var(--inputField) * 0.75);
  height: var(--borderThickness);
  background: var(--secondary);
  border-radius: 0;
  flex-shrink: 0;
}

.testimonial-section .testimonial-card__quote {
  margin: 0;
  order: initial;
}

.testimonial-section .testimonial-card__name-block {
  display: flex;
  align-items: stretch;
}

.testimonial-section .testimonial-card__name-bar {
  display: none;
}

.testimonial-section .testimonial-card__author {
  color: var(--text-muted);
  font-size: var(--textCaption);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  order: initial;
  text-transform: uppercase;
}

.testimonial-section .testimonial-card__subtitle {
  color: var(--text-soft-50);
  font-size: var(--textCaption);
  font-weight: 500;
  letter-spacing: var(--ls-link);
  line-height: 1.2;
  margin-top: 0;
  order: initial;
  text-transform: uppercase;
}

.testimonial-section .testimonial-controls {
  display: contents;
  align-items: center;
  justify-content: center;
  gap: var(--paddingMD);
  margin-top: 0;
  position: static;
}

.testimonial-section .testimonial-dots {
  display: flex;
  align-items: center;
  gap: var(--paddingMD);
  justify-content: flex-start;
  width: auto;
  margin: 0 auto;
  position: absolute;
  bottom: -110px;
  transform: translateX(-50%);
  left: 50%;
}

.testimonial-section--tab-dots .testimonial-dots {
  bottom: -38px;
  z-index: 3;
}

.testimonial-section .testimonial-btn {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: rgba(var(--basicText-rgb), 0.86);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: var(--testimonial-arrow-size);
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--testimonial-arrow-size);
  z-index: 2;
}

.testimonial-section .testimonial-btn:hover,
.testimonial-section .testimonial-btn:focus-visible {
  color: var(--brandPrimary);
}

.testimonial-section .testimonial-btn svg {
  fill: none;
  height: var(--iconLG);
  stroke: currentColor;
  width: var(--iconLG);
}

.testimonial-section .testimonial-btn--prev {
  left: 0;
}

.testimonial-section .testimonial-btn--next {
  right: 0;
}

.rm-pagination__dot-item {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  height: var(--iconLG);
  justify-content: center;
  width: auto;
}

.testimonial-dot {
  appearance: none;
  background: rgba(var(--basicText-rgb), 0.24);
  border: none;
  border-radius: var(--radiusFull);
  cursor: pointer;
  height: var(--iconXS);
  opacity: 0.75;
  padding: 0;
  width: var(--iconXS);
}

/* single sliding pill overlay — width/left driven by JS */
.testimonial-dot-pill {
  background: rgba(var(--basicText-rgb), 1);
  border-radius: var(--radiusFull);
  height: var(--iconXS);
  left: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  z-index: 2;
}

.testimonial-dot-pill::before {
  background: var(--brandPrimary);
  border-radius: inherit;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 0;
}

.testimonial-slider.is-counting .testimonial-dot-pill::before {
  animation: testimonial-dot-fill var(--testimonial-progress-duration) linear
    forwards;
}

.testimonial-slider.is-paused .testimonial-dot-pill::before {
  animation: none;
  width: 0;
}

@keyframes testimonial-dot-fill {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@media (max-width: 1199px) {
  .testimonial-section__viewport {
    width: 100%;
  }

  .testimonial-section .testimonial-card__inner {
    gap: var(--paddingLG);
    min-height: auto;
  }

  .testimonial-section .testimonial-card__avatar {
    height: var(--min-photo-h);
    min-width: var(--min-photo-h);
    width: var(--min-photo-h);
  }
}

@media (max-width: 767px) {
  .testimonial-section {
    height: auto;
  }
  .testimonial-section .testimonial-card__inner {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--paddingMD);
  }

  .testimonial-section .testimonial-card__avatar {
    aspect-ratio: 1;
    height: var(--min-photo-h);
    min-width: 0;
    width: var(--min-photo-h);
  }

  .testimonial-section .testimonial-controls {
    margin-top: var(--paddingMD);
  }

  .testimonial-section .testimonial-btn {
    height: var(--iconLG);
    top: 50%;
    width: var(--iconLG);
  }

  .testimonial-section .testimonial-btn svg {
    height: var(--iconLG);
    width: var(--iconLG);
  }
}

/* ── PROCESS STEPS ── */
.process-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--paddingLG);
  width: 100%;
  justify-content: center;
  align-items: stretch;
  margin: 0 auto;
}

.process-step {
  flex: 1 1 var(--size-job-sidebar-sm);
  min-width: min(100%, var(--size-job-sidebar-sm));
  padding: var(--paddingMD) var(--paddingLG);
  border-left: var(--borderThickness) solid var(--divider);
}
.process-step:first-child {
  border-left: none;
  padding-left: 0;
}
.process-step:last-child {
  border-right: none;
}

.process-step__num {
  font-size: var(--textH1);
  font-family: var(--font-heading);
  font-size: var(--textH1);
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.09375rem;
  margin: 0;
}

.process-step__title {
  font-size: var(--textH3);
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.process-step__desc {
  font-size: var(--textBody);
  color: var(--text-muted);
  line-height: 1.6;
}

/* ── FILTER BAR / CHIPS ── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--paddingMD);
  padding: var(--paddingMD) 0;
  width: 100%;
  border-bottom: var(--borderThickness) solid var(--divider);
}

.filter-bar[hidden] {
  display: none;
}

.filter-chips {
  display: flex;
  align-items: center;
  gap: var(--paddingSM);
  flex-wrap: wrap;
  min-width: 0;
}

.filter-bar__count {
  font-size: var(--textBody);
  color: var(--text-muted);
  margin-left: auto;
  white-space: nowrap;
}

.chip.filter-chip {
  position: relative;
  padding: var(--paddingXS) var(--paddingMD);
  border: var(--borderThickness) solid transparent;
  border-radius: var(--radiusFull);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--textBody);
  font-weight: 500;
  letter-spacing: var(--ls-link);
  transition:
    background-color var(--trans),
    border-color var(--trans),
    color var(--trans);
}

.chip.filter-chip .chip-content {
  display: flex;
  align-items: center;
  gap: var(--paddingXS);
}

.chip.filter-chip .chip-label {
  color: currentColor;
  line-height: 1.25;
}

.chip.filter-chip .chip-icon {
  display: none;
}

.chip.filter-chip:hover {
  color: var(--text);
}

.chip.filter-chip.is-selected,
.chip.filter-chip[aria-pressed="true"],
.chip.filter-chip[data-selected="true"] {
  color: var(--text);
  border-bottom: var(--borderThickness) solid var(--secondary);
  border-radius: 0;
  color: var(--secondary);
}

.chip-divider {
  width: calc(var(--borderThickness) / 2);
  height: var(--buttonsSmall);
  background: var(--divider);
  flex-shrink: 0;
}

/* ── RESPONSIVE ── */

@media (max-width: 1199px) {
  .card-grid--3-to-2-to-1,
  .card-grid--2 {
    grid-template-columns: 1fr;
  }

  .page-header__two-col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .media-grid {
    grid-template-columns: 1fr;
  }
  .card__overlay .card__desc {
    height: 3em;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .process-step {
    border: none;
    flex-basis: 100%;
    border-left: none;
    padding-left: 0;
  }
  .testimonial-section .testimonial-dots {
    bottom: -10px;
    gap: var(--paddingSM);
  }
}