/* === Values Hand Carousel === */
#values .values-stage {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: auto;
  min-height: clamp(420px, 46vw, 600px);
  padding-bottom: 0;      /* remove extra space we added before */
  margin-bottom: 0;
  display: grid;
  place-items: center;
  isolation: isolate;
  perspective: 1000px; /* 3D perspective */
  --belt-offset-y: -200px; /* this is the hieght of the cards above the hand needs to be negative = a bit above center; tune -20px..+10px */
}

#values .hand-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 2;
}

#values .hand {
  width: min(520px, 42vw);
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.35));
  opacity: .95;
  transform: translateZ(0);
}

#values .ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

#values .value-item {
  position: absolute;
  transform: translate(-50%, -50%) scale(.92);
  will-change: transform, filter, opacity;
  transition: filter .2s ease, opacity .25s ease;
}

#values .card {
  min-width: 220px;
  max-width: 280px;
  padding: 14px 16px;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius, 18px);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  color: #0f1c2e; /* keep text readable */
}

#values .card h3 {
  margin: 0 0 6px;
  font-size: clamp(16px, 1.4vw, 18px);
  letter-spacing: .2px;
}

#values .card p {
  margin: 0;
  font-size: clamp(13px, 1.05vw, 14px);
  line-height: 1.45;
  opacity: .9;
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}

#values .value-item.active .card {
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  border-color: rgba(255, 255, 255, .45);
}

#values .value-item.active .card p {
  max-height: 160px;
}

/* Depth cues */
#values .value-item.front {
  z-index: 3;
  filter: none;
  opacity: 1;
}

#values .value-item.back {
  z-index: 1;
  filter: saturate(.85) brightness(.9) blur(.2px);
  opacity: .85;
}

#values .hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: .2px;
  opacity: .65;
}

/* === Solid blue variant for the Values carousel (overrides frosted) === */
#values .card.solid-card {
  background: #2a5d9f;       /* mid blue */
  color: #fff;

  /* kill any frosted styles */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-image: none;
  border: none;

  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  border-radius: var(--radius, 12px);
}

/* typography inside solid cards */
#values .card.solid-card h3 { color: #fff; }
#values .card.solid-card p  { color: #f2f6fb; }

/* optional: slightly lighter when active at center */
#values .value-item.active .card.solid-card {
  background: #3b75bf;
  box-shadow: 0 14px 36px rgba(0,0,0,0.25);
}

@media (prefers-reduced-motion: reduce) {
  #values .values-stage { aspect-ratio: auto; }
}

/* Tighten spacing for the Values section only */
#values.section {
  padding-top: 36px;   /* optional: keep some breathing room */
  padding-bottom: 0px;/* main fix: remove the big gap under the hand */
  border-bottom: none; /* optional: avoids a stray divider line here */
}

.values-container {
  padding-bottom: 0;          /* remove extra bottom padding */
  margin-bottom: 0;           /* collapse section spacing */
}

/* =========================
   VALUES CAROUSEL — Tablet (≤1024px)
   ========================= */
@media (max-width: 1024px) {
  #values .values-stage {
    min-height: clamp(380px, 52vw, 520px);
    perspective: 900px;
    --belt-offset-y: -140px; /* bring cards closer to hand */
  }

  #values .hand { width: min(480px, 52vw); }

  /* Cards: ease crowding */
  #values .card { min-width: 200px; max-width: 260px; padding: 12px 14px; }
  #values .card h3 { font-size: clamp(16px, 1.6vw, 18px); }
  #values .card p  { font-size: clamp(13px, 1.2vw, 14px); }

  /* Lighten the frosted effect for perf on mid devices */
  #values .card:not(.solid-card) {
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
  }
}

/* =========================
   VALUES CAROUSEL — Phones (≤640px)
   ========================= */
@media (max-width: 640px) {
  /* Stage: tighter height and belt closer to center */
  #values .values-stage {
    min-height: clamp(320px, 75vw, 460px);
    --belt-offset-y: -90px;
  }

  /* Hand smaller to free vertical space */
  #values .hand { width: min(380px, 68vw); filter: drop-shadow(0 12px 28px rgba(0,0,0,.28)); }

  /* Cards: narrower + slightly larger text for readability */
  #values .card { min-width: 180px; max-width: 220px; padding: 12px 12px; }
  #values .card h3 { font-size: clamp(16px, 4.2vw, 18px); }
  #values .card p  { font-size: clamp(13px, 3.8vw, 15px); line-height: 1.5; }

  /* Reduce depth filter on back items for clarity on small screens */
  #values .value-item.back { filter: saturate(.95) brightness(.98) blur(0); opacity: .9; }

  /* Hint spacing */
  #values .hint { bottom: 6px; font-size: 11px; }

  /* Section padding: keep it tight so no big gap below the hand */
  #values.section { padding-top: 28px; padding-bottom: 0; }
}

/* =========================
   VALUES CAROUSEL — Small phones (≤480px)
   ========================= */
@media (max-width: 480px) {
  #values .values-stage {
    min-height: clamp(300px, 82vw, 420px);
    --belt-offset-y: -70px; /* bring cards a bit lower so titles don't clip */
  }

  #values .hand { width: min(320px, 76vw); opacity: .98; }

  /* Make cards more compact but readable */
  #values .card       { min-width: 160px; max-width: 200px; padding: 10px 10px; border-radius: 14px; }
  #values .card h3    { margin: 0 0 4px; font-size: clamp(15px, 4.8vw, 17px); letter-spacing: .15px; }
  #values .card p     { max-height: 140px; font-size: clamp(13px, 4.2vw, 14px); }

  /* If performance dips on older phones, kill blur entirely on frosted variant */
  #values .card:not(.solid-card) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255,255,255,.9);
    color: #0f1c2e;
  }

  /* The “hint” can crowd — hide on very small screens */
  #values .hint { display: none; }
}

/* =========================
   Respect reduced motion
   ========================= */
@media (prefers-reduced-motion: reduce) {
  #values .value-item { transition: none; }
  #values .card p { transition: none; }
}