/* =========================================================
   Facts carousel
   ========================================================= */


/* Headline: taller, thinner, tighter letter spacing */
.facts-title{
  font-size: 1.2rem;           /* taller than .85rem */
  line-height: 1.2;            /* compact but readable */
  font-weight: 300;            /* thinner */
  letter-spacing: .01em;       /* closer letters */
  opacity: 1;
  text-transform: uppercase;
  margin: 2rem 0 2rem 0;      /* a touch more space to the carousel */
}

/* ----- Wrapper (meld into section, no visible box) -------- */
.facts-wrap{
  position: relative;
  overflow: hidden;
  border: none;                 /* no box */
  border-radius: 0;             /* no frame */
  background: transparent;      /* blend with section */
  height: auto;                /* fixed height as requested */
  margin-top: .7rem;            /* space under title */
}

/* ----- Track: horizontal swipe, snap, hidden scrollbars ---- */
.facts-track{
  display: flex;
  gap: .75rem;                              /* slide spacing */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 .75rem;                        /* same L/R inset as other carousels */
  scroll-padding-left: .75rem;
  scroll-padding-right: .75rem;

  /* hide scrollbars (all engines) */
  scrollbar-width: none;                    /* Firefox */
  -ms-overflow-style: none;                 /* IE/Edge legacy */
}
.facts-track::-webkit-scrollbar{            /* WebKit */
  display: none;
}

/* ----- Slides: one per viewport, no peeking ---------------- */
.facts-card{
  flex: 0 0 100%;
  display: grid;
  grid-auto-rows: min-content;
  align-content: center;
  justify-items: center;
  scroll-snap-align: start;
  border-radius: .5rem;
}

/* ----- Big number: outline-only (no fill), centered -------- */
.facts-number{
  font-size: 5.0rem;                        /* presence */
  font-weight: 800;
  line-height: 1;
  margin: .35rem 0 1rem 0;

  /* outline-only */
  color: transparent;                       /* no fill */
  -webkit-text-stroke: 2px var(--text);     /* visible stroke color */

  /* non-WebKit fallback: halo outline */
  text-shadow:
    1px 0 0 var(--text),  -1px 0 0 var(--text),
    0 1px 0 var(--text),   0 -1px 0 var(--text),
    1px 1px 0 var(--text), -1px -1px 0 var(--text),
    1px -1px 0 var(--text), -1px 1px 0 var(--text);
}

/* ----- Unit: larger than body, more gap before text -------- */
.facts-unit{
  font-size: 1.1rem;
  font-weight: 600;
  opacity: .9;
  margin: .25rem 0 .6rem 0;                 /* more space before facts-text */
}

/* ----- Text: centered, tight above dots -------------------- */
.facts-text{
  font-size: .95rem;
  text-align: center;
  opacity: .9;
  margin: 0;                                 /* keep it tight so dots sit closer */
}

/* ----- Dots: pill-active like sights carousel -------------- */
.facts-dots{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .75rem;                               /* farther apart */
  padding: .2rem 0 .15rem;                   /* less space between text and dots */
}

.facts-dot{
  appearance: none;
  border: 0;
  padding: .35rem;                           /* larger tap target */
  background: transparent;
  cursor: pointer;
}

.facts-dot::before{
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #7a7a7a;
  opacity: .7;
  transition: width .18s ease, opacity .18s ease, background-color .18s ease;
}

.facts-dot.active::before{
  width: 18px;                               /* pill for active */
  background: #f5f5f5;
  opacity: .95;
}