/* ==========================================================================
   Home page
   1. Hero carousel
   2. Our Services — editorial offerings mosaic
   3. About — editorial identity, mission band, stat ledger
   4. Our Leadership — board register
   5. Member Testimonials — glass carousel
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero carousel — full-screen cross-fade with slow Ken Burns zoom
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  height: calc(100vh - var(--nav-h) - var(--topbar-h));
  height: calc(100svh - var(--nav-h) - var(--topbar-h));
  min-height: 34rem;
  overflow: hidden;
  background-color: var(--clr-primary-deep);
}

.hero__slides,
.hero__slide {
  position: absolute;
  inset: 0;
}

/* Cross-fade */
.hero__slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1200ms ease, visibility 1200ms;
}

.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* Media layer — Ken Burns runs while the slide is active */
.hero__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.hero__media--1 {
  background-image: url("../../images/hero1.jfif");
}

.hero__media--2 {
  background-image: url("../../images/hero2.jfif");
}

.hero__media--3 {
  background-image: url("../../images/hero3.jfif");
}

.hero__media--4 {
  background-image: url("../../images/hero4.jfif");
}

.hero__slide.is-active .hero__media {
  animation: hero-zoom 9s ease-out forwards;
}

/* Alternate zoom direction for quiet variety */
.hero__slide:nth-child(even) .hero__media {
  transform-origin: 30% center;
}

.hero__slide:nth-child(odd) .hero__media {
  transform-origin: 70% center;
}

@keyframes hero-zoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08);
  }
}

/* Dark scrim — heavier on the left where the content sits */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(5, 26, 16, 0.82) 0%,
    rgba(5, 26, 16, 0.62) 40%,
    rgba(5, 26, 16, 0.32) 70%,
    rgba(5, 26, 16, 0.18) 100%
  );
}

/* ----- Content ----- */

.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  padding-bottom: var(--space-3xl); /* room for the controls */
}

.hero__eyebrow {
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-accent);
}

.hero__title {
  max-width: 15em;
  margin-top: var(--space-md);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  color: var(--clr-white);
}

.hero__text {
  max-width: 54ch;
  margin-top: var(--space-lg);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

/* Content settles in gently after the fade */
.hero__eyebrow,
.hero__title,
.hero__text,
.hero__actions {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 700ms ease, transform 700ms ease;
}

.hero__slide.is-active .hero__eyebrow {
  opacity: 1;
  transform: none;
  transition-delay: 300ms;
}

.hero__slide.is-active .hero__title {
  opacity: 1;
  transform: none;
  transition-delay: 420ms;
}

.hero__slide.is-active .hero__text {
  opacity: 1;
  transform: none;
  transition-delay: 540ms;
}

.hero__slide.is-active .hero__actions {
  opacity: 1;
  transform: none;
  transition-delay: 660ms;
}

/* ----- Controls ----- */

.hero__footer {
  position: absolute;
  inset-inline: 0;
  bottom: var(--space-xl);
}

.hero__footer-inner {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Desktop: dots sit left, arrows gather right */
.hero__dots {
  order: -1;
  margin-right: auto;
  display: flex;
  gap: var(--space-xs);
}

.hero__dot {
  width: 1.75rem;
  height: 0.1875rem;
  padding: 0;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.35);
  transition: background-color var(--transition), width var(--transition);
}

.hero__dot:hover {
  background-color: rgba(255, 255, 255, 0.65);
}

.hero__dot.is-active {
  width: 2.75rem;
  background-color: var(--clr-accent);
}

.hero__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: var(--clr-white);
  transition: background-color var(--transition), border-color var(--transition);
}

.hero__arrow:hover {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.7);
}

.hero__arrow svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* ----- Responsive ----- */

@media (max-width: 64rem) {
  .hero {
    height: calc(100vh - var(--nav-h));
    height: calc(100svh - var(--nav-h));
  }
}

/* ----- Mobile-first hero (phones) ----- */

@media (max-width: 48rem) {
  .hero {
    height: 88vh;
    height: 88svh;
    min-height: 33rem;
    max-height: 46rem;
  }

  /* Focal points per slide — keep faces clear of text and heavy scrim */
  .hero__media--1 {
    background-position: 75% 22%;
  }

  .hero__media--2 {
    background-position: 42% 25%;
  }

  .hero__media--3 {
    background-position: 50% 18%;
  }

  .hero__media--4 {
    background-position: 55% 20%;
  }

  /* Gentler zoom on small screens */
  .hero__slide.is-active .hero__media {
    animation-name: hero-zoom-mobile;
  }

  /* Bottom-weighted scrim — darkest where the text sits, light where faces live */
  .hero__scrim {
    background: linear-gradient(
      to top,
      rgba(5, 26, 16, 0.9) 0%,
      rgba(5, 26, 16, 0.58) 55%,
      rgba(5, 26, 16, 0.26) 100%
    );
  }

  /* ----- Content — spacious, narrow, scannable ----- */

  .hero__content {
    padding-inline: var(--space-lg);
    padding-bottom: var(--space-3xl);
  }

  .hero__eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.16em;
  }

  .hero__title {
    margin-top: var(--space-lg);
    font-size: clamp(1.9rem, 8.5vw, 2.5rem);
    line-height: 1.15;
  }

  /* Let headings wrap naturally on narrow screens */
  .hero__title br {
    display: none;
  }

  .hero__text {
    max-width: 34ch;
    margin-top: var(--space-lg);
    font-size: 0.9375rem;
  }

  /* Extended clause is desktop-only — mobile keeps one scannable sentence */
  .hero__text-ext {
    display: none;
  }

  /* Eyebrow, paragraph and buttons fade in place; only the heading rises */
  .hero__eyebrow,
  .hero__text,
  .hero__actions {
    transform: none;
  }

  .hero__title {
    transform: translateY(0.75rem);
  }

  .hero__slide.is-active .hero__title {
    transform: none;
  }

  /* ----- Buttons — thumb-sized, stacked ----- */

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 24rem;
    gap: var(--space-sm);
    margin-top: var(--space-2xl);
  }

  .hero__actions .btn {
    justify-content: center;
    min-height: 3.125rem;
    border-radius: var(--radius-lg);
  }

  /* ----- Controls — one centered pill: ‹ dots › ----- */

  .hero__footer {
    bottom: max(var(--space-lg), env(safe-area-inset-bottom));
  }

  .hero__footer-inner {
    width: fit-content;
    margin-inline: auto;
    gap: var(--space-sm);
    padding: 0.375rem 0.625rem;
    background-color: rgba(6, 35, 22, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
  }

  .hero__dots {
    order: 0;
    margin-right: 0;
    gap: 0.375rem;
  }

  .hero__dot {
    width: 1.125rem;
  }

  .hero__dot.is-active {
    width: 1.875rem;
  }

  .hero__arrow {
    width: 2.25rem;
    height: 2.25rem;
    border-color: transparent;
  }
}

@keyframes hero-zoom-mobile {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.06);
  }
}

/* --------------------------------------------------------------------------
   2. Our Services — editorial offerings mosaic
   Hierarchy: one wide feature (Savings), one tall second (Loans),
   four compact supporting cards. Index numerals 01–06 carry the journey.
   -------------------------------------------------------------------------- */

.section-eyebrow {
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-primary);
}

/* ----- Section canvas — layered light, not flat paint ----- */

.offerings {
  padding-block: calc(var(--space-4xl) + var(--space-md));
  background:
    radial-gradient(
      56rem 28rem at 18% -4rem,
      rgba(10, 110, 61, 0.05),
      transparent 62%
    ),
    linear-gradient(180deg, #f6faf7 0%, #f0f5f1 100%);
}

/* ----- Header — anchored by a hairline, annual-report register ----- */

.offerings__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  margin-bottom: var(--space-2xl);
  border-bottom: 1px solid rgba(16, 33, 24, 0.07);
}

.offerings__heading {
  max-width: 44rem;
}

.offerings .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  letter-spacing: 0.16em;
}

.offerings .section-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--clr-accent);
}

.offerings__title {
  max-width: 20ch;
  margin-top: var(--space-md);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.offerings__intro {
  max-width: 38rem;
  margin-top: var(--space-lg);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--clr-muted);
}

.offerings__all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
  margin-bottom: 0.125rem;
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  color: var(--clr-primary);
  white-space: nowrap;
  transition: color var(--transition);
}

.offerings__all svg {
  width: 1rem;
  height: 1rem;
  transition: transform 300ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.offerings__all:hover {
  color: var(--clr-primary-dark);
}

.offerings__all:hover svg {
  transform: translateX(0.3125rem);
}

/* ----- Mosaic grid — wider row gap separates the two tiers ----- */

.offerings__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-xl) var(--space-lg);
}

/* ----- Card base — floating elevation, responsive edge ----- */

.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--clr-white);
  border: 1px solid rgba(16, 33, 24, 0.05);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 1px rgba(16, 33, 24, 0.03),
    0 4px 12px -6px rgba(16, 33, 24, 0.06),
    0 16px 40px -24px rgba(16, 33, 24, 0.14);
  overflow: hidden;
  transition:
    transform 320ms cubic-bezier(0.2, 0.6, 0.2, 1),
    box-shadow 320ms cubic-bezier(0.2, 0.6, 0.2, 1),
    border-color 320ms ease;
}

.offer-card:hover {
  transform: translateY(-0.5rem);
  border-color: rgba(10, 110, 61, 0.22);
  box-shadow:
    0 2px 3px rgba(16, 33, 24, 0.04),
    0 12px 24px -12px rgba(16, 33, 24, 0.12),
    0 32px 72px -28px rgba(16, 33, 24, 0.28);
}

.offer-card:focus-within {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}

/* ----- Imagery — tinted, seamed into the card, slow Ken Burns hover ----- */

.offer-card__media {
  position: relative;
  overflow: hidden;
}

.offer-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Focal points measured from the photography — faces stay clear */
.offer-card--feature .offer-card__media img {
  object-position: 60% 25%;
}

.offer-card--tall .offer-card__media img {
  object-position: 50% 30%;
}

/* Quiet brand tint unifies the photography; it lifts on hover so the
   image subtly brightens */
.offer-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(6, 67, 42, 0.07);
  transition: opacity 500ms ease;
}

/* Soft seam — three stops for a photographic falloff into the body */
.offer-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.4) 10%,
    rgba(255, 255, 255, 0) 28%
  );
}

.offer-card:hover .offer-card__media::before {
  opacity: 0;
}

.offer-card:hover .offer-card__media img {
  transform: scale(1.06);
}

/* ----- Card typography ----- */

.offer-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: var(--space-lg);
}

/* Index numeral with trailing hairline — the journey motif */
.offer-card__num {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  color: var(--clr-primary);
}

.offer-card__num::after {
  content: "";
  width: 1.5rem;
  height: 1px;
  background-color: rgba(10, 110, 61, 0.35);
}

.offer-card__title {
  margin-top: var(--space-sm);
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  transition: color 250ms ease;
}

.offer-card:hover .offer-card__title {
  color: var(--clr-primary);
}

.offer-card__text {
  margin-top: var(--space-sm);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--clr-muted);
}

.offer-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: auto;
  padding-top: var(--space-md);
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  color: var(--clr-primary);
  transition: color 250ms ease;
}

.offer-card__link svg {
  width: 1rem;
  height: 1rem;
  transition: transform 300ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.offer-card:hover .offer-card__link {
  color: var(--clr-primary-dark);
}

.offer-card:hover .offer-card__link svg {
  transform: translateX(0.3125rem);
}

/* Whole card is clickable — the link stretches over it */
.offer-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ----- 01 · Feature — wide, image bleeds right ----- */

.offer-card--feature {
  grid-column: span 7;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  min-height: 26rem;
}

.offer-card--feature .offer-card__body {
  padding: var(--space-2xl);
  justify-content: center;
}

.offer-card--feature .offer-card__title {
  margin-top: var(--space-sm);
  font-size: clamp(1.875rem, 2.4vw, 2.25rem);
}

.offer-card--feature .offer-card__text {
  max-width: 30rem;
  margin-top: var(--space-md);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* Feature seam runs along the image's left edge, toward the body */
.offer-card--feature .offer-card__media::after {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.4) 9%,
    rgba(255, 255, 255, 0) 26%
  );
}

.offer-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-lg);
}

.offer-card__meta li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  color: var(--clr-text);
}

.offer-card__meta li::before {
  content: "";
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background-color: var(--clr-accent);
}

.offer-card--feature .offer-card__link {
  margin-top: var(--space-xl);
  padding-top: 0;
}

/* ----- 02 · Tall second feature ----- */

.offer-card--tall {
  grid-column: span 5;
}

.offer-card--tall .offer-card__media {
  aspect-ratio: 16 / 10;
}

.offer-card--tall .offer-card__body {
  padding: var(--space-xl);
}

.offer-card--tall .offer-card__title {
  font-size: 1.5rem;
}

/* ----- 03–06 · Compact ensemble — taller, more breathing room ----- */

.offer-card--compact {
  grid-column: span 3;
}

.offer-card--compact .offer-card__media {
  aspect-ratio: 4 / 3;
}

.offer-card--compact .offer-card__body {
  padding: var(--space-xl) var(--space-lg);
}

/* ----- Scroll reveal — card rises while the image unveils ----- */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.75rem);
  transition:
    opacity 750ms ease,
    transform 750ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.js [data-reveal] .offer-card__media {
  clip-path: inset(0 0 16% 0);
  transition: clip-path 950ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.js [data-reveal] .offer-card__media img {
  transform: scale(1.07);
}

html.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

html.js [data-reveal].is-revealed .offer-card__media {
  clip-path: inset(0 0 0 0);
}

html.js [data-reveal].is-revealed .offer-card__media img {
  transform: none;
}

/* ----- Responsive ----- */

@media (max-width: 64rem) {
  .offerings__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .offer-card--feature {
    grid-column: span 12;
  }

  .offer-card--tall {
    grid-column: span 12;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
  }

  .offer-card--tall .offer-card__media {
    aspect-ratio: auto;
    order: -1;
  }

  /* Tall card is image-left here — seam runs along the image's right edge */
  .offer-card--tall .offer-card__media::after {
    background: linear-gradient(
      to left,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.4) 9%,
      rgba(255, 255, 255, 0) 26%
    );
  }

  .offer-card--compact {
    grid-column: span 6;
  }
}

@media (max-width: 40rem) {
  .offerings__grid {
    gap: var(--space-md);
  }

  .offer-card--feature,
  .offer-card--tall {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .offer-card--feature .offer-card__media,
  .offer-card--tall .offer-card__media {
    order: -1;
    aspect-ratio: 16 / 9;
  }

  /* Stacked image-on-top — seam returns to the bottom edge */
  .offer-card--feature .offer-card__media::after,
  .offer-card--tall .offer-card__media::after {
    background: linear-gradient(
      to top,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.4) 10%,
      rgba(255, 255, 255, 0) 28%
    );
  }

  .offer-card--feature .offer-card__body,
  .offer-card--tall .offer-card__body {
    padding: var(--space-lg);
  }

  .offer-card--feature .offer-card__title {
    font-size: 1.375rem;
  }

  /* Compact cards become slim horizontal rows */
  .offer-card--compact {
    grid-column: span 12;
    display: grid;
    grid-template-columns: 7rem 1fr;
  }

  .offer-card--compact .offer-card__media {
    aspect-ratio: auto;
    height: 100%;
  }

  /* Image-left rows — seam runs along the image's right edge */
  .offer-card--compact .offer-card__media::after {
    background: linear-gradient(
      to left,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.4) 12%,
      rgba(255, 255, 255, 0) 30%
    );
  }

  .offer-card--compact .offer-card__body {
    padding: var(--space-md) var(--space-lg);
  }

  .offer-card--compact .offer-card__num,
  .offer-card--compact .offer-card__text {
    display: none;
  }

  .offer-card--compact .offer-card__title {
    margin-top: 0;
    font-size: 1.0625rem;
  }

  .offer-card--compact .offer-card__link {
    padding-top: var(--space-xs);
    font-size: 0.875rem;
  }
}

/* --------------------------------------------------------------------------
   3. About — editorial identity, mission band, stat ledger
   -------------------------------------------------------------------------- */

.about {
  background-color: var(--clr-white);
}

.about__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--space-3xl);
}

/* ----- Left: typographic column ----- */

.about .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  letter-spacing: 0.16em;
}

.about .section-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--clr-accent);
}

.about__title {
  max-width: 20ch;
  margin-top: var(--space-md);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.about__text {
  max-width: 36rem;
  margin-top: var(--space-lg);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--clr-muted);
}

/* Trust ledger — line entries, not feature cards */
.about__trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg) var(--space-xl);
  margin-top: var(--space-2xl);
}

.about__trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(16, 33, 24, 0.08);
}

.about__trust-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
  border-radius: 50%;
  background-color: var(--clr-primary-tint);
  color: var(--clr-primary);
}

.about__trust-check svg {
  width: 0.75rem;
  height: 0.75rem;
}

.about__trust-item strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--clr-ink);
}

.about__trust-item div > span {
  display: block;
  margin-top: var(--space-2xs);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--clr-muted);
}

/* ----- Right: layered photographic composition ----- */

.about__visual {
  position: relative;
}

/* Tint slab behind the main plate — depth without decoration */
.about__visual::before {
  content: "";
  position: absolute;
  top: 2rem;
  right: -1.5rem;
  bottom: -1.5rem;
  left: 2.5rem;
  border-radius: var(--radius-lg);
  background-color: var(--clr-primary-tint);
}

.about__photo {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.about__photo--main {
  position: relative;
  aspect-ratio: 4 / 3;
  box-shadow:
    0 1px 1px rgba(16, 33, 24, 0.03),
    0 16px 40px -24px rgba(16, 33, 24, 0.2);
}

.about__photo--main img {
  object-position: 70% 30%;
}

/* Framed household photo overlapping the corner */
.about__photo--overlap {
  position: absolute;
  bottom: -2.5rem;
  left: -2.5rem;
  width: 46%;
  aspect-ratio: 4 / 3;
  border: 0.25rem solid var(--clr-white);
  box-shadow:
    0 2px 3px rgba(16, 33, 24, 0.05),
    0 24px 48px -20px rgba(16, 33, 24, 0.28);
}

.about__photo--overlap img {
  object-position: 45% 30%;
}

/* Floating promise chip */
.about__badge {
  position: absolute;
  top: 1.5rem;
  right: -1rem;
  padding: var(--space-sm) var(--space-lg);
  background-color: var(--clr-white);
  border: 1px solid rgba(16, 33, 24, 0.05);
  border-radius: var(--radius-md);
  box-shadow:
    0 2px 3px rgba(16, 33, 24, 0.05),
    0 16px 32px -16px rgba(16, 33, 24, 0.2);
}

.about__badge-label {
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-accent-dark);
}

.about__badge-text {
  margin-top: 0.125rem;
  font-size: 1rem;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--clr-ink);
}

/* Photos unveil with the same mask language as the service cards */
html.js [data-reveal] .about__photo {
  clip-path: inset(0 0 14% 0);
  transition: clip-path 950ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.js [data-reveal] .about__photo img {
  transform: scale(1.07);
}

html.js [data-reveal].is-revealed .about__photo {
  clip-path: inset(0 0 0 0);
}

html.js [data-reveal].is-revealed .about__photo img {
  transform: none;
}

/* ----- Mission band — the seal ----- */

.about__mission {
  position: relative;
  margin-top: calc(var(--space-3xl) + 1rem);
  padding: var(--space-2xl) clamp(var(--space-lg), 5vw, var(--space-3xl));
  background-color: var(--clr-primary-deep);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Soft interior lighting */
.about__mission::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    40rem 20rem at 85% -20%,
    rgba(255, 255, 255, 0.07),
    transparent 65%
  );
}

.about__mission-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clr-accent);
}

.about__mission-label::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--clr-accent);
}

.about__mission-quote {
  position: relative;
  max-width: 44ch;
  margin-top: var(--space-lg);
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--clr-white);
}

/* ----- Stat ledger ----- */

.about__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-3xl);
}

/* Categories on ONE line — auto-fit with a 0 minimum makes the grid always
   create exactly as many columns as there are .about__stat children, so
   adding a 7th (or 8th) category no longer means coming back to bump a
   hardcoded column count, and it never wraps regardless of how many the
   backend renders. Cramped columns step the figure and label down a size
   and pull the dividers closer instead of ever giving up the single row. */
.about__stats--six {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--space-md);
}

/* Grid, not the reversed flex column the four-across version uses. Reversed
   flex packs to the BOTTOM, so a label that runs to two lines pushes its
   figure up and that one number floats above the row. Rows pin the figure to
   the top of every column instead, and the labels hang below it — they can
   wrap freely without moving a single number. */
.about__stats--six .about__stat {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  padding-left: var(--space-sm);
}

.about__stats--six .about__stat-value {
  grid-row: 1;
  font-size: clamp(1.5rem, 2.2vw, 2.125rem);
}

.about__stats--six .about__stat-label {
  grid-row: 2;
  font-size: 0.75rem;
  line-height: 1.35;
}

.about__stat {
  display: flex;
  flex-direction: column-reverse;
  padding-left: var(--space-lg);
  border-left: 1px solid rgba(16, 33, 24, 0.12);
}

.about__stat-value {
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--clr-ink);
  font-variant-numeric: tabular-nums;
}

.about__stat-label {
  margin-top: var(--space-xs);
  font-size: 0.875rem;
  font-weight: var(--fw-medium);
  color: var(--clr-muted);
}

/* ----- Responsive ----- */

@media (max-width: 64rem) {
  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  /* Room for the overlapping frame's overhang */
  .about__visual {
    margin-bottom: 2.5rem;
    margin-left: 2.5rem;
  }

  /* Same technique as the six-column variant below: stay on one line and
     shrink the figures instead of dropping to two rows. Only true phone
     widths (see the 40rem query below) give up the single line. */
  .about__stats {
    gap: var(--space-md);
  }

  .about__stat-value {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
  }

  /* Still one line — auto-fit already tracks however many categories
     there are; this just shrinks the figures further so it stays that
     way as the viewport narrows. */
  .about__stats--six {
    gap: var(--space-sm) var(--space-md);
  }

  .about__stats--six .about__stat-value {
    font-size: clamp(1rem, 3vw, 1.5rem);
  }

  .about__stats--six .about__stat-label {
    font-size: 0.6875rem;
  }
}

@media (max-width: 40rem) {
  .about__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl) var(--space-lg);
  }

  .about__stats--six {
    gap: var(--space-xs) var(--space-sm);
  }

  .about__stats--six .about__stat {
    padding-left: var(--space-xs);
  }

  .about__stats--six .about__stat-value {
    font-size: clamp(0.75rem, 4.5vw, 1.125rem);
  }

  .about__stats--six .about__stat-label {
    font-size: 0.625rem;
    line-height: 1.2;
  }

  .about__trust {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .about__visual {
    margin-left: var(--space-lg);
  }

  .about__photo--overlap {
    left: -1.5rem;
    bottom: -1.75rem;
    width: 52%;
  }

  .about__badge {
    top: 1rem;
    right: 0.75rem;
    padding: var(--space-xs) var(--space-md);
  }

  .about__mission {
    margin-top: var(--space-3xl);
  }

  .about__mission-quote {
    font-size: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   4. Our Leadership — board register
   Horizontal portrait-plate cards; the President spans full width,
   supporting executives share the row below at reduced scale.
   -------------------------------------------------------------------------- */

.leadership {
  background-color: var(--clr-white);
}

.leadership__header {
  max-width: 44rem;
  margin-bottom: var(--space-2xl);
}

.leadership .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  letter-spacing: 0.16em;
}

.leadership .section-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--clr-accent);
}

.leadership__title {
  max-width: 20ch;
  margin-top: var(--space-md);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.leadership__intro {
  max-width: 38rem;
  margin-top: var(--space-lg);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--clr-muted);
}

/* ----- Card base — portrait plate left, identity right ----- */

.leader-card {
  display: grid;
  grid-template-columns: minmax(0, 13rem) 1fr;
  background-color: var(--clr-white);
  border: 1px solid rgba(16, 33, 24, 0.05);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 1px rgba(16, 33, 24, 0.03),
    0 4px 12px -6px rgba(16, 33, 24, 0.06),
    0 16px 40px -24px rgba(16, 33, 24, 0.14);
  overflow: hidden;
  transition:
    transform 320ms cubic-bezier(0.2, 0.6, 0.2, 1),
    box-shadow 320ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.leader-card:hover {
  transform: translateY(-0.375rem);
  box-shadow:
    0 2px 3px rgba(16, 33, 24, 0.04),
    0 24px 56px -24px rgba(16, 33, 24, 0.24);
}

.leader-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.leader-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  transition: transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Soft grounding gradient at the base of each portrait */
.leader-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(6, 32, 20, 0.22) 0%,
    rgba(6, 32, 20, 0) 38%
  );
}

.leader-card:hover .leader-card__media img {
  transform: scale(1.05);
}

.leader-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-xl);
}

.leader-card__role {
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-primary);
}

.leader-card__name {
  position: relative;
  margin-top: var(--space-sm);
  padding-bottom: var(--space-xs);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  transition: color 250ms ease;
}

/* Thin accent rule draws beneath the name on hover */
.leader-card__name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.5rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--clr-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 350ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.leader-card:hover .leader-card__name {
  color: var(--clr-primary);
}

.leader-card:hover .leader-card__name::after {
  transform: scaleX(1);
}

.leader-card__bio {
  margin-top: var(--space-sm);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--clr-muted);
}

.leader-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  color: var(--clr-primary);
  transition: color 250ms ease;
}

.leader-card__link svg {
  width: 1rem;
  height: 1rem;
  transition: transform 300ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.leader-card__link:hover {
  color: var(--clr-primary-dark);
}

.leader-card__link:hover svg {
  transform: translateX(0.3125rem);
}

/* ----- Featured — the President's card ----- */

.leader-card--featured {
  grid-template-columns: minmax(0, 22rem) 1fr;
  margin-bottom: var(--space-lg);
}

.leader-card--featured .leader-card__body {
  padding: var(--space-2xl);
}

.leader-card--featured .leader-card__name {
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
}

.leader-card--featured .leader-card__bio {
  max-width: 30rem;
  font-size: 1.0625rem;
}

/* ----- Supporting row ----- */

.leadership__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

/* ----- Responsive ----- */

@media (max-width: 64rem) {
  .leadership__grid {
    grid-template-columns: 1fr;
  }

  .leader-card--featured {
    grid-template-columns: minmax(0, 18rem) 1fr;
  }
}

@media (max-width: 40rem) {
  .leader-card,
  .leader-card--featured {
    grid-template-columns: 1fr;
  }

  .leader-card__media {
    aspect-ratio: 4 / 4.5;
  }

  .leader-card__body,
  .leader-card--featured .leader-card__body {
    padding: var(--space-lg);
  }
}

/* --------------------------------------------------------------------------
   5. Member Testimonials — glass carousel on deep green
   Center-stage carousel: full-emphasis center card, receding sides.
   Glass used sparingly (cards + controls); drifting light orbs behind.
   -------------------------------------------------------------------------- */

.testimonials {
  position: relative;
  background:
    radial-gradient(
      50rem 26rem at 80% -10%,
      rgba(255, 255, 255, 0.06),
      transparent 65%
    ),
    var(--clr-primary-deep);
  overflow: hidden;
}

/* ----- Drifting light orbs ----- */

.testimonials__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

.testimonials__glow--gold {
  top: -8rem;
  right: 8%;
  width: 24rem;
  height: 24rem;
  background-color: rgba(233, 161, 59, 0.13);
}

.testimonials__glow--green {
  bottom: -10rem;
  left: -6rem;
  width: 30rem;
  height: 30rem;
  background-color: rgba(20, 150, 85, 0.16);
}

@media (prefers-reduced-motion: no-preference) {
  .testimonials__glow--gold {
    animation: glow-drift 18s ease-in-out infinite alternate;
  }

  .testimonials__glow--green {
    animation: glow-drift 24s ease-in-out infinite alternate-reverse;
  }
}

@keyframes glow-drift {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(2.5rem, -2rem);
  }
}

.testimonials > .container {
  position: relative;
}

/* ----- Header ----- */

.testimonials__header {
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: var(--space-2xl);
  text-align: center;
}

.testimonials__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  letter-spacing: 0.16em;
  color: var(--clr-accent);
}

.testimonials__eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--clr-accent);
}

.testimonials__title {
  max-width: 22ch;
  margin-inline: auto;
  margin-top: var(--space-md);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--clr-white);
}

.testimonials__intro {
  max-width: 38rem;
  margin-inline: auto;
  margin-top: var(--space-lg);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

/* ----- Carousel stage ----- */

.tcarousel__stage {
  position: relative;
  height: 26rem;
  margin-top: var(--space-2xl);
}

.tcarousel__item {
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  width: min(100%, 26rem);
  margin-inline: auto;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition:
    transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 700ms ease;
}

.tcarousel__item.is-center {
  opacity: 1;
  transform: none;
  z-index: 3;
  pointer-events: auto;
}

.tcarousel__item.is-left,
.tcarousel__item.is-right {
  opacity: 0.4;
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
}

.tcarousel__item.is-left {
  transform: translateX(-74%) scale(0.88);
}

.tcarousel__item.is-right {
  transform: translateX(74%) scale(0.88);
}

/* ----- Card — glass, medallion, stars ----- */

.tcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  margin-top: 2.25rem; /* room for the overlapping medallion */
  position: relative;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 1rem;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.35);
  transition:
    background-color 300ms ease,
    border-color 300ms ease,
    transform 320ms cubic-bezier(0.2, 0.6, 0.2, 1),
    box-shadow 320ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.tcarousel__item.is-center .tcard:hover {
  transform: translateY(-0.25rem);
  background-color: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 32px 64px -28px rgba(0, 0, 0, 0.45);
}

/* Gold quotation mark behind the medallion */
.tcard__mark {
  position: absolute;
  top: -1.25rem;
  right: 1.25rem;
  font-size: 4rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--clr-accent);
  opacity: 0.35;
  pointer-events: none;
}

/* Circular member medallion, overlapping the card's top edge.
   Swap the initials for an <img> to use a real member photo. */
.tcard__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-top: calc(-1 * var(--space-2xl) - 2.25rem);
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--clr-primary-dark);
  border: 2px solid var(--clr-accent);
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.4);
  font-size: 1.125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--clr-accent);
  transition: transform 320ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.tcard__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tcarousel__item.is-center .tcard:hover .tcard__avatar {
  transform: scale(1.06);
}

.tcard__stars {
  display: flex;
  gap: 0.25rem;
  margin-top: var(--space-md);
}

.tcard__stars svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: var(--clr-accent);
  opacity: 0.9;
}

.tcard__quote {
  display: flex;
  align-items: center;
  flex: 1;
  margin-top: var(--space-md);
  font-size: 0.9875rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
}

.tcard__author {
  margin-top: var(--space-lg);
}

.tcard__author strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  color: var(--clr-white);
}

.tcard__author small {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ----- Controls — glass arrows, minimal dots ----- */

.tcarousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xl);
  margin-top: var(--space-xl);
}

.tcarousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.375rem; /* 54px — effortless target */
  height: 3.375rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--clr-white);
  transition:
    background-color var(--transition),
    border-color var(--transition),
    transform 200ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.tcarousel__arrow:hover {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

.tcarousel__arrow:active {
  transform: scale(0.95);
}

.tcarousel__arrow:focus-visible,
.tcarousel__dot:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 3px;
}

.tcarousel__arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}

.tcarousel__dots {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.tcarousel__dot {
  width: 0.625rem;
  height: 0.625rem;
  padding: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transition:
    background-color var(--transition),
    width var(--transition);
}

.tcarousel__dot:hover {
  background-color: rgba(255, 255, 255, 0.55);
}

.tcarousel__dot.is-active {
  width: 1.5rem;
  border-radius: 999px;
  background-color: var(--clr-accent);
}

/* ----- Closing CTA row ----- */

.testimonials__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.testimonials__cta-text {
  font-size: 1.125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--clr-white);
}

/* ----- Responsive ----- */

/* Tablet — same layout, slightly tighter breathing */
@media (max-width: 64rem) {
  .tcarousel__stage {
    margin-top: var(--space-xl);
  }

  .tcarousel__item {
    width: min(100%, 23rem);
  }

  .tcarousel__item.is-left {
    transform: translateX(-56%) scale(0.86);
  }

  .tcarousel__item.is-right {
    transform: translateX(56%) scale(0.86);
  }

  .tcard {
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
  }

  .tcarousel__controls {
    gap: var(--space-xl);
  }
}

/* Mobile — dedicated compact card, not a scaled-down desktop */
@media (max-width: 40rem) {
  .tcarousel__stage {
    height: 23rem; /* card lands ≈ 340–370px */
    margin-top: var(--space-lg);
  }

  .tcarousel__item {
    width: min(100%, 22rem);
  }

  /* One voice at a time on phones */
  .tcarousel__item.is-left,
  .tcarousel__item.is-right {
    opacity: 0;
    pointer-events: none;
  }

  .tcarousel__item.is-left {
    transform: translateX(-30%) scale(0.85);
  }

  .tcarousel__item.is-right {
    transform: translateX(30%) scale(0.85);
  }

  /* Compact proportions */
  .tcard {
    padding: var(--space-lg) var(--space-md) var(--space-md);
    margin-top: 1.75rem;
  }

  .tcard__avatar {
    width: 3.5rem;
    height: 3.5rem;
    margin-top: calc(-1 * var(--space-lg) - 1.75rem);
    font-size: 1rem;
  }

  .tcard__mark {
    top: -0.875rem;
    right: 1rem;
    font-size: 2.75rem;
  }

  .tcard__stars {
    margin-top: var(--space-sm);
  }

  .tcard__stars svg {
    width: 0.75rem;
    height: 0.75rem;
  }

  .tcard__quote {
    margin-top: var(--space-sm);
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  .tcard__author {
    margin-top: var(--space-md);
  }

  .tcarousel__controls {
    gap: var(--space-lg);
    margin-top: var(--space-lg);
  }

  .tcarousel__arrow {
    width: 3rem;
    height: 3rem;
  }

  .testimonials__cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .testimonials__cta .btn {
    width: 100%;
    justify-content: center;
    min-height: 3.125rem;
    border-radius: var(--radius-lg);
  }
}

/* ==========================================================================
   Partners marquee — sits flush under the page hero
   ========================================================================== */
.partners {
  background-color: var(--clr-white);
  border-bottom: 1px solid var(--clr-border);
  padding-block: var(--space-lg);
}

.partners__inner {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.partners__label {
  flex-shrink: 0;
  margin: 0;
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-muted);
}

.partners__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.partners__track {
  display: flex;
  width: max-content;
  animation: partners-scroll 30s linear infinite;
}

.partners__viewport:hover .partners__track {
  animation-play-state: paused;
}

.partners__list {
  display: flex;
  align-items: center;
  gap: var(--space-3xl);
  margin: 0;
  padding: 0 var(--space-3xl) 0 0;
  list-style: none;
}

.partners__item {
  display: flex;
  align-items: center;
  height: 2.5rem;
  white-space: nowrap;
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  color: var(--clr-muted);
  opacity: 0.75;
  filter: grayscale(1);
  transition: opacity var(--transition), filter var(--transition), color var(--transition);
}

.partners__item:hover {
  opacity: 1;
  filter: none;
  color: var(--clr-primary);
}

.partners__item img {
  max-height: 2.5rem;
  width: auto;
}

@keyframes partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 40rem) {
  .partners__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
  .partners__label {
    text-align: center;
  }
  .partners__list {
    gap: var(--space-2xl);
    padding-right: var(--space-2xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .partners__track {
    animation: none;
  }
}