/* FS Main Banner — flow lines hero */

.fs-main-banner {
  --fs-orange: #F7931E;
  --fs-red-orange: #F26522;
  --fs-charcoal: #211A21;
  --fs-bg: #FFFFFF;
  --fs-heading: #211A21;
  --fs-text: #211A21;
  --fs-eyebrow: #58504E;
  --fs-ease: cubic-bezier(.22, 1, .36, 1);
  --fs-step: .12s;

  position: relative;
  overflow: hidden;
  background: var(--fs-bg);
  color: var(--fs-text);
  isolation: isolate;
}

.fs-main-banner--charcoal {
  --fs-bg: #211A21;
  --fs-heading: #FFFFFF;
  --fs-text: #FFFFFF;
  --fs-eyebrow: #B0AAA8;
}

.fs-main-banner__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.fs-main-banner__inner {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(56px, 6.9vw, 96px) clamp(20px, 5.2vw, 73px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.fs-main-banner__eyebrow {
  margin: 0;
  font-size: clamp(calc(var(--fs-eyebrow-size) * 0.9), 1.07vw, var(--fs-small-size));
  line-height: 1.4;
  letter-spacing: .1em;
  /* text-transform: uppercase; */
  color: var(--fs-eyebrow);
}

.fs-main-banner__heading {
  font-family: var(--fs-heading-font);
  margin: 14px 0 0;
  font-size: clamp(calc(var(--fs-h1-size) * 0.5), 8.43vw, calc(var(--fs-h1-size) * 1.35));
  line-height: 1.1;
  font-weight: var(--fs-h1-weight);
  letter-spacing: -.025em;
  color: var(--fs-heading);
}

/* Each line is a mask; the inner span slides up through it.
   Padding/negative margin stops descenders being clipped. */
.fs-main-banner__line {
  display: block;
  overflow: hidden;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}

.fs-main-banner__line-inner {
  display: inline-block;
}

.fs-main-banner__highlight {
  color: var(--fs-orange);
}

.fs-main-banner__desc {
  margin: clamp(24px, 3.15vw, 44px) 0 0;
  max-width: 860px;
  font-size: clamp(var(--fs-body-size), 1.72vw, calc(var(--fs-body-size) * 1.4));
  line-height: 1.5;
  color: var(--fs-text);
}

.fs-main-banner__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  margin-top: clamp(28px, 3.15vw, 44px);
}

/* Buttons: colours, size and shape come from the global .fs-btn styles
   (Theme settings > Buttons). The lift and sheen below are banner-only extras. */
.fs-main-banner__btn {
  position: relative;
  overflow: hidden;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, background-size .4s var(--fs-ease), transform .3s var(--fs-ease), box-shadow .3s ease;
}

.fs-main-banner__btn span {
  position: relative;
  z-index: 1;
}

/* Light sheen that sweeps across once after load and again on hover */
.fs-main-banner__btn:not(.fs-btn--link)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  pointer-events: none;
}

.fs-main-banner__btn:not(.fs-btn--link):hover,
.fs-main-banner__btn:not(.fs-btn--link):focus-visible {
  transform: translateY(-2px);
}

.fs-main-banner__btn.fs-btn--primary:hover,
.fs-main-banner__btn.fs-btn--primary:focus-visible {
  box-shadow: 0 10px 24px -12px var(--fs-btn-primary-bg-hover);
}

.fs-main-banner__btn:not(.fs-btn--link):hover::after {
  animation: fs-banner-sheen .8s ease;
}

.fs-main-banner__btn:active {
  transform: translateY(0);
}

/* Entrance animations (only when "Animate text" is on) */
.fs-main-banner--anim .fs-main-banner__eyebrow {
  animation: fs-banner-rise .8s var(--fs-ease) .1s both;
}

.fs-main-banner--anim .fs-main-banner__line-inner {
  animation: fs-banner-line 1s var(--fs-ease) calc(.2s + var(--i, 0) * var(--fs-step)) both;
}

.fs-main-banner--anim .fs-main-banner__desc {
  animation: fs-banner-rise .9s var(--fs-ease) calc(.35s + var(--fs-lines, 2) * var(--fs-step)) both;
}

.fs-main-banner--anim .fs-main-banner__btn {
  animation: fs-banner-rise .8s var(--fs-ease) calc(.5s + var(--fs-lines, 2) * var(--fs-step)) both;
}

.fs-main-banner--anim .fs-main-banner__btn:not(.fs-btn--link)::after {
  animation: fs-banner-sheen 1s ease calc(1.3s + var(--fs-lines, 2) * var(--fs-step)) both;
}

.fs-main-banner--anim .fs-main-banner__link {
  animation: fs-banner-rise .8s var(--fs-ease) calc(.6s + var(--fs-lines, 2) * var(--fs-step)) both;
}

/* Highlight word fills from heading colour to the orange gradient */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .fs-main-banner--anim .fs-main-banner__highlight {
    color: transparent;
    background-image:
      linear-gradient(90deg, var(--fs-orange) 0%, var(--fs-orange) 60%, var(--fs-red-orange) 100%),
      linear-gradient(var(--fs-heading), var(--fs-heading));
    background-size: 0% 100%, 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    animation: fs-banner-fill .9s var(--fs-ease) calc(.75s + var(--i, 0) * var(--fs-step)) forwards;
  }
}

@keyframes fs-banner-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@keyframes fs-banner-line {
  from { transform: translateY(110%); }
  to { transform: none; }
}

@keyframes fs-banner-fill {
  to { background-size: 100% 100%, 100% 100%; }
}

@keyframes fs-banner-sheen {
  from { left: -60%; }
  to { left: 130%; }
}

@media (max-width: 767px) {
  /* Keep body copy readable where lines run behind it */
  .fs-main-banner__canvas { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .fs-main-banner *,
  .fs-main-banner *::after {
    animation: none !important;
    transition: none !important;
  }
  .fs-main-banner--anim .fs-main-banner__highlight {
    background-size: 100% 100%, 100% 100%;
  }
}