:root{
  --star-radius-lg: 20px;
  --star-shadow-lg: 0 18px 40px rgba(0,0,0,.08);
  --star-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --star-space-md: 1.25rem;
  --star-font-body: Calibri, sans-serif;
  --star-font-heading: "Times New Roman MT Condensed v2", "Times New Roman", serif;
}

.star-hello-card,
.star-split-faq,
.star-stacked-faq,
.star-carousel,
.star-hero-headline,
.star-hero-slideshow{
  font-family: var(--star-font-body);
}

.star-hello-card__title,
.star-split-faq__heading,
.star-split-faq__answer-q,
.star-split-faq__answer-a h1,
.star-split-faq__answer-a h2,
.star-split-faq__answer-a h3,
.star-split-faq__item-text,
.star-split-faq__m-q-text,
.star-stacked-faq__q-text,
.star-stacked-faq__a-inner h1,
.star-stacked-faq__a-inner h2,
.star-stacked-faq__a-inner h3,
.star-hero-headline__logo-text,
.star-hero-headline__line,
.star-hero-slideshow__heading{
  font-family: var(--star-font-heading);
}

/* Reusable “card” style */
.star-card{
  border-radius: var(--star-radius-lg);
  box-shadow: var(--star-shadow-lg);
  background: #fff;
  padding: 1.5rem;
}

/* Simple utility */
.star-muted{
  opacity: .75;
}

/* =========================================================
   Scroll Reveal Utilities (sr-*)
   - Add classes to Beaver modules/rows/cols
   - JS toggles .is-inview when element enters viewport
   ========================================================= */

/* Prevent FOUC: only hide reveals when JS is active */
html.sr-js .sr-reveal {
  opacity: 0;
  transform: translate3d(var(--sr-x, 0), var(--sr-y, 0), 0) scale(var(--sr-scale, 1));
  transition:
    opacity var(--sr-duration, 700ms) var(--sr-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    transform var(--sr-duration, 700ms) var(--sr-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
  will-change: opacity, transform;
}

/* In view state */
html.sr-js .sr-reveal.is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Direction presets */
.sr-from-right     { --sr-x: 90px;   --sr-y: 0px; }
.sr-from-left      { --sr-x: -90px;  --sr-y: 0px; }
.sr-from-up        { --sr-x: 0px;    --sr-y: -70px; }
.sr-from-down      { --sr-x: 0px;    --sr-y: 70px; }
.sr-from-up-right  { --sr-x: 140px;  --sr-y: -110px; } /* your example */

/* Optional polish */
.sr-soft-scale     { --sr-scale: 0.98; }
.sr-fast           { --sr-duration: 450ms; }
.sr-slow           { --sr-duration: 900ms; }

/* Stagger delays */
.sr-delay-1 { transition-delay: 80ms; }
.sr-delay-2 { transition-delay: 160ms; }
.sr-delay-3 { transition-delay: 240ms; }
.sr-delay-4 { transition-delay: 320ms; }

/* Reverse support: class exists for clarity (JS handles toggling) */
.sr-reverse {}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
  html.sr-js .sr-reveal,
  html.sr-js .sr-reveal.is-inview {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}