/* ============ FOLD 05 · Six reasons (carousel) ============ */

.reasons {
	    padding-top: 0px !important;
  position: relative;
  padding: 2.7818rem 0 8rem;   /* room for the agenda waves that rise into this section */
  background: #194376;
}

.reasons__inner {
  position: relative;
  display: flex; flex-direction: column; gap: 2.8688rem;
  padding: 5.3567rem 0 3.8958rem;
  overflow: hidden;
}

/* ---- Header ---- */
.reasons__head { margin-bottom: 2.6rem; display: flex; flex-direction: column; align-items: center; gap: 0.487rem; padding: 0 1.4609rem; text-align: center; }
.reasons__eyebrow {
  font-weight: 700; font-size: 12px; line-height: normal; letter-spacing: 0.1741rem;
  text-transform: uppercase; color: var(--white);
}
.reasons__title {
  padding-top: 0.8522rem;
  font-weight: 700; font-size: 4rem; line-height: 1.14; letter-spacing: normal;
  color: var(--white); white-space: nowrap;
}
.reasons__sub {
  padding-top: 1.2rem;
  font-weight: 500; font-size: 20px; line-height: 1.4; white-space: nowrap;
  color: #bfd9ee;
}

/* ---- Track (centred carousel) ----
   The active card sits in the centre at 100%; the others shrink to --reason-scale.
   JS (initReasonsCarousel) sets the track offset and each card's transform. */
.reasons { --reason-scale: 0.8; --reason-speed: 0.8s; --reason-dim: 0.5; }

.reasons__viewport { position: relative; width: 100%; touch-action: pan-y; cursor: grab; }
.reasons__viewport.is-dragging { cursor: grabbing; }
.reasons__track {
  display: flex; align-items: center; gap: 2.3472rem;
  width: max-content;
  transition: transform var(--reason-speed) cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.reasons__viewport.is-dragging .reasons__track,
.reasons__viewport.is-dragging .reason-card { transition: none; }

.reason-card {
  position: relative;
  flex-shrink: 0;
  display: flex; flex-direction: column;
  width: 52.3332rem; height: 43.3792rem;
  border-radius: 1.5827rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.035);
  -webkit-backdrop-filter: blur(0.3477rem); backdrop-filter: blur(0.3477rem);
  box-shadow: 0 1.4609rem 3.6523rem 0 rgba(6, 18, 35, 0.45);
  user-select: none;
  transform-origin: 50% 50%;
  transition: transform var(--reason-speed) cubic-bezier(0.22, 1, 0.36, 1),
              opacity var(--reason-speed) cubic-bezier(0.22, 1, 0.36, 1);
}
/* Figma "glass" edge: light rim, brightest top-left (light angle -45°) */
.reason-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: 0.1rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.22) 35%, rgba(255,255,255,0.18) 65%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

.reason-card__media { padding: 1.3909rem; }
.reason-card__frame {
  overflow: hidden;
  border-radius: 0.6955rem;
  aspect-ratio: 1672 / 941;
  background: rgba(255, 255, 255, 0.08);   /* shows while an image is missing */
  transform: translateZ(0);                /* keeps the rounded clip crisp while zooming */
}
.reason-card__img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Zoom the photo on hover */
.reason-card:hover .reason-card__img { transform: scale(1.08); }

.reason-card__body { display: flex; flex-direction: column; gap: 0.9739rem; padding: 1.3909rem 2.7818rem 2.7818rem; }
.reason-card__title {
  height: 2.1914rem; margin-bottom: 0.8522rem;
  font-weight: 700; font-size: 2.4349rem; line-height: normal; letter-spacing: -0.0183rem;
  color: var(--sunset-50); white-space: nowrap;
}
.reason-card__text { font-weight: 500; font-size: 1.4rem; line-height: 1.4; color: var(--sunset-50); }

/* ---- Arrows + beach-ball dots ---- */
.reasons__controls { display: flex; align-items: center; justify-content: center; gap: 1.7386rem; }

.reasons__arrow {
  display: flex; align-items: center; justify-content: center;
  width: 4.3466rem; height: 4.3466rem;
  background: var(--white);
  border: 0.0869rem solid #dff4fd;
  border-radius: 50%;
  filter: drop-shadow(0 0.1739rem 0.2608rem rgba(23, 63, 107, 0.05)) drop-shadow(0 0.8693rem 1.0432rem rgba(23, 63, 107, 0.07));
  transition: opacity 0.3s, transform 0.2s;
}
.reasons__arrow img { width: 1.5648rem; height: 1.5648rem; }
.reasons__arrow:disabled { opacity: 0.28; cursor: default; }
.reasons__arrow:not(:disabled):hover { transform: scale(1.06); }

.reasons__dots { position: relative; width: 14.9523rem; height: 1.4778rem; }
/* Dots: small centred circles; the active one becomes the beach-ball bubble */
.reasons__dot {
  position: absolute; top: 50%; left: calc(50% + var(--x));
  display: grid; place-items: center;
  width: 1.4778rem; height: 1.4778rem;
  transform: translate(-50%, -50%);
  transition: width 0.35s, height 0.35s;
}
.reasons__dot::before {
  content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--white); opacity: 0.45;
  transition: opacity 0.3s, transform 0.3s;
}
.reasons__dot:hover::before { opacity: 0.8; transform: scale(1.25); }
.reasons__dot img { display: none; width: 100%; height: 100%; }
.reasons__dot.is-active { width: 2.2907rem; height: 2.2907rem; }
.reasons__dot.is-active::before { display: none; }
.reasons__dot.is-active img { display: block; }

/* ---- 3D beach ball (js/ball3d.js) — sits on the centred card's top-right corner ---- */
.reasons .ball3d { left: 89.48rem; top: -8.236rem; width: 20rem; height: 20rem; }   /* relative to the card row */