.hero {
  position: relative;
  min-height: var(--hero-min-height, 760px);
  overflow: hidden;
  isolation: isolate;
}

.hero__slides {
  position: relative;
  min-height: inherit;
}

.hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: var(--hero-justify, flex-start);
  align-items: var(--hero-align, flex-end);
  color: var(--hero-text-color, #ffffff);
}

/* Empty state — when no image and no video, make overlay fully opaque so the section isn't transparent */
.hero__slide--no-media .hero__overlay {
  opacity: 1;
}

/* Section padding driven by CSS vars so container-boxed can override just the inline value */
.hero__slide {
  --hero-pad-block: var(--hsElevate--spacing--48, 48px);
  --hero-pad-inline: var(--hsElevate--spacing--24, 24px);
  padding: var(--hero-pad-block) var(--hero-pad-inline);
}

@media (min-width: 768px) {
  .hero__slide {
    --hero-pad-block: var(--hsElevate--spacing--80, 80px);
    --hero-pad-inline: var(--hsElevate--spacing--64, 64px);
  }
}

.hero--padding-compact .hero__slide  {
  --hero-pad-block: var(--hsElevate--spacing--16, 16px);
  --hero-pad-inline: var(--hsElevate--spacing--12, 12px);
}
.hero--padding-spacious .hero__slide {
  --hero-pad-block: var(--hsElevate--spacing--96, 96px);
  --hero-pad-inline: var(--hsElevate--spacing--48, 48px);
}

@media (min-width: 768px) {
  .hero--padding-compact .hero__slide  {
    --hero-pad-block: var(--hsElevate--spacing--32, 32px);
    --hero-pad-inline: var(--hsElevate--spacing--24, 24px);
  }
  .hero--padding-spacious .hero__slide {
    --hero-pad-block: var(--hsElevate--spacing--144, 144px);
    --hero-pad-inline: var(--hsElevate--spacing--96, 96px);
  }
}

/* Container width — Boxed aligns content with the site menu container (section-wide setting) */
.hero--container-boxed .hero__slide {
  padding-inline: max(var(--hero-pad-inline), calc((100% - var(--hsElevate--container--maxWidth, 1296px)) / 2));
}

/* Fade transition (default) */
.hero--transition-fade .hero__slide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.hero--transition-fade .hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Slide transition (horizontal) — direction-aware so 2-slide carousels don't cross.
   JS toggles .hero--going-backward on the root for backward navigation; the snap-reset
   in module.js parks the incoming slide on the matching side before animation starts. */
.hero--transition-slide .hero__slide {
  transform: translateX(100%);
  pointer-events: none;
  /* Longer + softer than the original ease-out — gives the slide a cushioned glide instead of a snap. */
  transition: transform 0.75s cubic-bezier(0.65, 0, 0.35, 1);
}
.hero--transition-slide .hero__slide.is-prev {
  transform: translateX(-100%);
}
.hero--transition-slide.hero--going-backward .hero__slide {
  transform: translateX(-100%);
}
.hero--transition-slide.hero--going-backward .hero__slide.is-prev {
  transform: translateX(100%);
}
.hero--transition-slide .hero__slide.is-active {
  transform: translateX(0);
  pointer-events: auto;
}

/* Single-slide: no transition, always visible */
.hero:not(.hero--is-slider) .hero__slide {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.hero__media,
.hero__overlay {
  position: absolute;
  inset: 0;
}

.hero__media { z-index: -2; }

.hero__media img,
.hero__media-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-image-position, center center);
  display: block;
}

@media (max-width: 767px) {
  .hero__media img,
  .hero__media-video {
    object-position: var(--hero-image-position-mobile, var(--hero-image-position, center center));
  }
}

.hero__overlay {
  z-index: -1;
  background-color: var(--hero-overlay-color, #131313);
  opacity: var(--hero-overlay-opacity, 0.45);
}

@media (max-width: 767px) {
  .hero__overlay {
    background-color: var(--hero-overlay-color-mobile, var(--hero-overlay-color, #131313));
    opacity: var(--hero-overlay-opacity-mobile, var(--hero-overlay-opacity, 0.45));
  }
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--hero-content-max-width, 620px);
  text-align: var(--hero-text-align, left);
  color: var(--hero-text-color, #ffffff);
  display: flex;
  flex-direction: column;
  gap: var(--hsElevate--spacing--20, 20px);
}

.hero__content h1,
.hero__content h2,
.hero__content h3,
.hero__content h4,
.hero__content h5,
.hero__content h6,
.hero__content .hero__body,
.hero__content .hero__body p,
.hero__content .hero__body li,
.hero__content .hero__body a {
  color: var(--hero-text-color, #ffffff);
}

.hero__eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--hsElevate--body--small__fontSize, 0.875rem);
  font-weight: 600;
  opacity: 0.85;
}

.hero__heading { margin: 0; }

/* Heading highlight — gradient text effect on a portion of the heading.
   display: inline (not inline-block) so the span wraps naturally with adjacent text. */
.hero__heading-highlight {
  background: linear-gradient(135deg, var(--hl-start, #DFFD0A), var(--hl-end, #F5FCC2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline;
}
.hero__content .hero__heading-highlight {
  color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__heading-highlight,
  .hero__content .hero__heading-highlight {
    color: var(--hl-start, #DFFD0A);
    background: none;
  }
}

.hero--heading-large .hero__heading {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.hero--heading-display .hero__heading {
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.025em;
}

.hero__body {
  font-size: var(--hsElevate--body--large__fontSize, 1.0625rem);
  line-height: var(--hsElevate--body__lineHeight, 1.55);
}

.hero__body p:last-child { margin-bottom: 0; }

.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hsElevate--spacing--12, 12px);
  margin-top: var(--hsElevate--spacing--8, 8px);
  justify-content: var(--hero-justify, flex-start);
}

/* Layout only. Colours, borders, fonts, and the hover wipe all come from the theme
   via .hs-elevate-button + .hs-elevate-button--{variant} classes added in module.html. */
.hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  cursor: pointer;
  transition: transform 0.15s ease;
  padding: 0.85rem 1.6rem;
  line-height: 1;
}
.hero__button:active { transform: translateY(1px); }

/* Button size variants
   Small = base; Medium and Large step up font + padding. */
.hero__button--size-small  { /* = base */ }
.hero__button--size-medium { font-size: 1.15em; padding: 1.1rem 2.2rem; }
.hero__button--size-large  { font-size: 1.3em;  padding: 1.35rem 2.7rem; }

.hero__button-icon {
  display: inline-flex;
  align-items: center;
  font-size: 0.95em;
}
.hero__button-icon svg { width: 1em; height: 1em; fill: currentColor; }

/* Tertiary buttons only — strip the side padding so the text-link style aligns with surrounding text. */
.hero__button.hs-elevate-button--tertiary { padding-left: 0; padding-right: 0; }

/* ===========================
   Hover wipe (hero buttons)
   The theme's own button CSS lives in a React bundle that is currently frozen at
   an old version, so the wipe defined there can't reach the page yet. The hero
   module CSS, by contrast, deploys fresh on every cms upload — so we define the
   same wipe here, scoped to .hero__button, to guarantee it works on the hero.

   A 200%-wide gradient (hover colour | base colour) slides on hover via
   background-position, reading as a smooth left-to-right fill.
   =========================== */
.hs-elevate-button.hs-elevate-button--primary,
.hs-elevate-button.hs-elevate-button--secondary,
.hs-elevate-button.hs-elevate-button--accent {
  transition: color 0.6s cubic-bezier(0.65,0,0.35,1),
              background-position 0.6s cubic-bezier(0.65,0,0.35,1);
  /* Wider than 200% so the diagonal edge fully clears the button at both ends. */
  background-size: 250% 100%;
  background-position: right center;
  background-repeat: no-repeat;
}
/* --wipe-angle is swapped by JS: 120deg ("/") on hover-in, 60deg ("\") on hover-out. */
.hs-elevate-button.hs-elevate-button--primary {
  background-image: linear-gradient(var(--wipe-angle, 120deg),
    var(--hsElevate--button--primary__hover--backgroundColor,#fff) 0%,
    var(--hsElevate--button--primary__hover--backgroundColor,#fff) 50%,
    var(--hsElevate--button--primary__backgroundColor,#DFFD0A) 50%,
    var(--hsElevate--button--primary__backgroundColor,#DFFD0A) 100%);
}
.hs-elevate-button.hs-elevate-button--secondary {
  background-image: linear-gradient(var(--wipe-angle, 120deg),
    var(--hsElevate--button--secondary__hover--backgroundColor,#fff) 0%,
    var(--hsElevate--button--secondary__hover--backgroundColor,#fff) 50%,
    var(--hsElevate--button--secondary__backgroundColor,transparent) 50%,
    var(--hsElevate--button--secondary__backgroundColor,transparent) 100%);
}
.hs-elevate-button.hs-elevate-button--accent {
  background-image: linear-gradient(var(--wipe-angle, 120deg),
    var(--hsElevate--button--accent__hover--backgroundColor,#fff) 0%,
    var(--hsElevate--button--accent__hover--backgroundColor,#fff) 50%,
    var(--hsElevate--button--accent__backgroundColor,currentColor) 50%,
    var(--hsElevate--button--accent__backgroundColor,currentColor) 100%);
}
.hs-elevate-button.hs-elevate-button--primary:hover,
.hs-elevate-button.hs-elevate-button--secondary:hover,
.hs-elevate-button.hs-elevate-button--accent:hover {
  background-position: left center;
}

/* Slider navigation arrows */
.hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.35);
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  cursor: pointer;
  z-index: 3;
  padding: 0;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.hero__nav:hover { background: rgba(0, 0, 0, 0.6); }
.hero__nav:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.hero__nav--prev { left: clamp(12px, 2vw, 24px); }
.hero__nav--next { right: clamp(12px, 2vw, 24px); }

/* Indicator: Dots */
.hero__indicator--dots {
  position: absolute;
  bottom: clamp(20px, 3.5vh, 36px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.hero__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.hero__dot.is-active {
  background: #ffffff;
  transform: scale(1.15);
}
.hero__dot:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

/* Indicator: Numbers */
.hero__indicator--numbers {
  position: absolute;
  bottom: clamp(20px, 3.5vh, 36px);
  right: clamp(20px, 3.5vw, 36px);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--hero-text-color, #ffffff);
  font-size: 0.95rem;
  font-weight: 600;
  font-feature-settings: "tnum";
  letter-spacing: 0.05em;
  z-index: 3;
}
.hero__indicator--numbers .hero__indicator-sep {
  opacity: 0.5;
}

/* Indicator: Progress bar */
.hero__indicator--progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  z-index: 3;
}
.hero__indicator-progress-fill {
  height: 100%;
  background: #ffffff;
  width: 0;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Push dots up if scroll indicator is also present */
.hero--has-scroll-indicator .hero__indicator--dots {
  bottom: clamp(72px, 9vh, 108px);
}

/* Scroll indicator */
.hero__scroll-indicator {
  position: absolute;
  bottom: clamp(16px, 3vh, 32px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--hero-text-color, #ffffff);
  cursor: pointer;
  z-index: 3;
  padding: 0;
  animation: hero-scroll-bounce 1.8s ease-in-out infinite;
  opacity: 0.85;
}
.hero__scroll-indicator:hover { opacity: 1; }
.hero__scroll-indicator:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

@keyframes hero-scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}

/* Content fade-up animation when hero enters viewport (JS adds .hero--animate when supported) */
.hero--animate .hero__content {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero--animate .hero__content--in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hero--animate .hero__content {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Screen reader live region for slider announcements */
.hero__sr-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide,
  .hero__nav,
  .hero__dot,
  .hero__button { transition: none; }
  .hero__scroll-indicator { animation: none; }
  .hero__media-video { display: none; }
}