/* === Features carousel ===
   A horizontal scroll container with CSS snap points. The panel in the middle
   faces you; its neighbours peek in at the sides, turned away in 3D. All the
   movement is ordinary scrolling, so trackpad swipes, touch, the arrows, the
   dots and the keyboard all drive it the same way, and none of it interferes
   with scrolling the page. */

.feat-scroll {
  position: relative;
  background: var(--bg);
  padding: 92px 0 72px;
  overflow: hidden;          /* the flowing background bleeds past the edges */
  --pw: min(860px, 78vw);    /* panel width; the rest is the neighbours peeking */
}

.feat-sticky { position: relative; }

/* --- Flowing background --- */
.feat-flow {
  position: absolute;
  inset: -5% -10%;
  width: 120%;
  height: 110%;
  pointer-events: none;
  z-index: 0;
}
.feat-flow path {
  stroke-dasharray: 2400;
  stroke-dashoffset: calc(2400 - (var(--p, 0) * 2400));
  transform: translate3d(calc(var(--p, 0) * -120px), 0, 0);
  transition: stroke-dashoffset 0.3s linear, transform 0.3s linear;
}
.feat-flow-blob {
  transform: translate3d(calc(var(--p, 0) * -180px), calc(var(--p, 0) * 30px), 0);
  transition: transform 0.35s ease-out;
}
.feat-flow-blob-2 {
  transform: translate3d(calc(var(--p, 0) * 160px), calc(var(--p, 0) * -40px), 0);
}

/* --- Heading --- */
.feat-head {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
  flex-shrink: 0;
}
.feat-head h2 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  color: var(--navy);
  margin-bottom: 10px;
}
.feat-head p { font-size: 1.02rem; color: var(--muted); line-height: 1.6; }
.feat-head { margin-bottom: 40px; }

/* --- Stage, arrows, track --- */
.feat-stage { position: relative; z-index: 1; }

.feat-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* A two-finger sideways swipe on a trackpad would otherwise trigger the
     browser's back gesture once the carousel reaches its end. */
  overscroll-behavior-x: contain;
  padding: 14px 0 22px;
}
.feat-viewport::-webkit-scrollbar { display: none; }
.feat-viewport:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 14px; }

.feat-track {
  display: flex;
}
/* Leading and trailing space so the first and last panels can sit centred.
   Spacer flex items rather than padding on the track: a flex container's
   trailing padding is not counted in its scrollable width, which left the last
   panel unable to reach the middle and the carousel resting between the last
   two. */
.feat-track::before,
.feat-track::after {
  content: '';
  flex: 0 0 calc((100% - var(--pw)) / 2);
}

.feat-panel {
  flex: 0 0 var(--pw);
  max-width: var(--pw);
  padding: 0 16px;
  scroll-snap-align: center;
  /* Stop at each panel rather than letting one hard swipe fly past several. */
  scroll-snap-stop: always;
}

.feat-panel-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 40px 44px;
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 44px;
  align-items: center;
  box-shadow: 0 18px 50px rgba(30,41,59,0.07);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transition: box-shadow 0.3s ease;
}
.feat-panel.is-active .feat-panel-inner { box-shadow: 0 26px 70px rgba(30,41,59,0.13); }

.feat-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(30,41,59,0.10);
  transition: background 0.2s, color 0.2s, transform 0.2s, opacity 0.2s;
}
.feat-arrow svg { width: 22px; height: 22px; }
.feat-arrow:hover:not(:disabled) { background: var(--teal); color: #fff; transform: translateY(-50%) scale(1.06); }
.feat-arrow:disabled { opacity: 0.3; cursor: default; }
.feat-arrow-prev { left: max(16px, calc((100% - var(--pw)) / 2 - 62px)); }
.feat-arrow-next { right: max(16px, calc((100% - var(--pw)) / 2 - 62px)); }

.feat-art {
  width: 250px;
  height: 250px;
  justify-self: center;
  border-radius: 36px;
  background: linear-gradient(150deg, var(--teal-light), #f2f9f9);
  border: 1px solid rgba(42,125,125,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Fill the tile edge to edge; the artwork is cropped by the tile's radius. */
.feat-art .lottie-slot {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feat-art .lottie-slot svg { width: 100% !important; height: 100% !important; }
/* Fallback icon (no Lottie file) should not blow up to fill the tile. Scoped to
   slots the loader hasn't filled: once Lottie swaps its own SVG in, that is
   also an only child and would otherwise be pinned to this size. */
.feat-art .lottie-slot:not([data-loaded]) > svg:only-child { width: 110px !important; height: 110px !important; }

.feat-num {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--teal);
  line-height: 1;
  margin-bottom: 14px;
}
.feat-num i { font-style: normal; font-size: 0.9rem; color: var(--muted); margin-left: 4px; }
.feat-copy h3 {
  font-family: var(--font-heading);
  font-size: 2rem;
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 14px;
}
.feat-copy p { font-size: 1.05rem; color: var(--muted); line-height: 1.75; max-width: 520px; }

/* The turn and fade are written by features.js every frame from the scroll
   position, so there is no transition here to lag behind it. Left untouched
   the panels sit flat and fully visible, which is also the no-JS result. */
.feat-panel-inner {
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* --- Progress --- */
.feat-nav {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  padding-top: 28px;
}
.feat-dots { display: flex; gap: 10px; }
.feat-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(30,41,59,0.16);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.feat-dot:hover { background: rgba(42,125,125,0.5); }
.feat-dot.active { background: var(--teal); transform: scale(1.45); }
.feat-rail {
  width: 190px;
  height: 3px;
  border-radius: 2px;
  background: rgba(30,41,59,0.1);
  overflow: hidden;
}
.feat-rail-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 2px;
  background: var(--teal);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
  transition: transform 0.1s linear;
}


@media (max-width: 980px) {
  .feat-scroll { --pw: min(560px, 88vw); padding: 70px 0 56px; }
  .feat-panel-inner {
    grid-template-columns: 1fr;
    gap: 26px;
    text-align: center;
    justify-items: center;
    padding: 32px 28px;
  }
  /* Swiping is the natural move on a touch screen, and the arrows would sit
     over the panels at this width. */
  .feat-arrow { display: none; }
  .feat-copy p { max-width: 560px; }
  .feat-art { width: 220px; height: 220px; border-radius: 34px; }
  .feat-copy h3 { font-size: 1.5rem; }
  .feat-copy p { font-size: 0.98rem; }
  .feat-head h2 { font-size: 1.7rem; }
}

@media (max-width: 640px) {
  .feat-scroll { --pw: 90vw; padding: 54px 0 44px; }
  .feat-panel { padding: 0 8px; }
  .feat-panel-inner { padding: 26px 20px; border-radius: 18px; }
  .feat-art { width: 170px; height: 170px; border-radius: 28px; }
  .feat-art .lottie-slot:not([data-loaded]) > svg:only-child { width: 80px !important; height: 80px !important; }
  .feat-num { font-size: 1.6rem; }
  .feat-copy h3 { font-size: 1.35rem; }
  .feat-rail { width: 130px; }
}

/* Reduced motion: no pinning, no sideways movement, just a readable stack. */
@media (prefers-reduced-motion: reduce) {
  .feat-panel-inner { transform: none !important; opacity: 1 !important; }
  /* No turn, no smooth scrolling; the carousel still works by arrows, dots and
     keyboard, it just moves instantly. */
  .feat-viewport { scroll-behavior: auto; }
  .feat-flow path, .feat-flow-blob { transform: none; stroke-dashoffset: 0; }
  .feat-nav { display: none; }
}