/* Hero - initial state for animation */
.pg-hero {
  overflow: hidden;
}

/* Children of left column start invisible (we fade them in) */
.pg-hero__fade {
  opacity: 0;
}

/* Headline starts hidden until SplitText runs */
.pg-hero__headline {
  visibility: hidden;
}
.pg-hero__headline.pg-split-ready {
  visibility: visible;
}

.fusion-tb-header > .fusion-fullwidth{
  transform: translateY(-100%);
  background: rgba(11,11,12,0.72);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(237,231,218,0.14);
}


/* Thunder bolt — animated wave fill */
.pg-bolt {
  display: inline-block;
  width: 0.42em;
  height: 1em;
  transform: translateY(0.12em);
  overflow: visible;
  vertical-align: baseline;
}

.pg-bolt svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

.pg-bolt__path {
  fill: none;
  stroke: #8B6914;
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(139, 105, 20, 0.55));
}

.pg-bolt__wave {
  fill: #8B6914;
  filter: drop-shadow(0 0 6px rgba(139, 105, 20, 0.55));
}

/* Prevent the SVG height from making the line taller than line-height */
.pg-hero__headline {
  line-height: 1.2;
}

.pg-hero__headline svg.pg-bolt {
  /* override any baseline rendering quirks */
  max-height: 1em;
}


/* ============================================================
   Homepage Responsive Layout
   ------------------------------------------------------------
   Avada is currently configured with 1024px breakpoints for the
   grid and site content. Keep homepage responsive
   overrides here so mobile/tablet cleanup stays separate from
   the desktop animation setup above.
   ============================================================ */

/* Tablet / 1000px pass
   Goal: use the stacked hero that Avada applies at this breakpoint,
   then let JS animate the image down into its natural position. */
@media (max-width: 1024px) {
  .pg-hero {
    height: auto !important;
    min-height: 0 !important;
  }

  .pg-hero > .fusion-builder-row {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .pg-hero__left {
    --awb-width-medium: 100% !important;
    --awb-width-small: 100% !important;
    --awb-padding-left-medium: 32px !important;
    --awb-spacing-right-medium: 0 !important;
    --awb-spacing-left-medium: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }

  .pg-hero__right {
    --awb-width-medium: 100% !important;
    --awb-width-small: 100% !important;
    --awb-spacing-right-medium: 0 !important;
    --awb-spacing-left-medium: 0 !important;
    aspect-ratio: 1754 / 1241;
    height: auto;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }

  .pg-hero.pg-hero--compact-animating .pg-hero__left {
    box-sizing: border-box;
    min-height: 0 !important;
  }

  .pg-hero.pg-hero--compact-animating .pg-hero__right {
    aspect-ratio: auto;
    box-sizing: border-box;
  }

  .pg-hero__headline {
    --awb-font-size: clamp(58px, 7vw, 72px) !important;
    --awb-margin-bottom: 28px !important;
  }

  .pg-hero .fusion-text-2 {
    --awb-width: min(420px, 100%) !important;
  }

  .ticker__track {
    gap: 32px;
  }

  .ticker__item {
    font-size: 15px;
  }

  .ticker-icon {
    width: 17px;
  }

  .home-elroq-presentation {
    gap: 14px !important;
  }

  .home-elroq-presentation > .fusion-layout-column {
    --awb-width-medium: calc(50% - 7px) !important;
    --awb-spacing-right-medium: 0 !important;
    --awb-spacing-left-medium: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* Phone pass
   Goal: stack the hero intentionally and keep cards/content readable. */
@media (max-width: 640px) {
  .pg-hero__left {
    padding-top: var(--pg-hero-left-pad-top, 96px) !important;
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  .pg-hero__right {
    min-height: 0 !important;
    --awb-spacing-right-small: 0 !important;
    --awb-spacing-left-small: 0 !important;
  }

  .pg-hero__headline {
    --awb-font-size: clamp(42px, 15vw, 62px) !important;
    --awb-margin-bottom: 16px !important;
    max-width: 9.5ch;
    line-height: 1.05;
  }

  .pg-hero__headline .pg-bolt {
    width: 0.34em;
    height: 0.9em;
  }

  .pg-hero .subtitle-w-line {
    --awb-font-size: 14px !important;
  }

  .pg-hero .fusion-text-2 {
    --awb-width: 100% !important;
    font-size: 18px;
    line-height: 1.45;
  }

  .ticker__wrap {
    min-height: 42px;
  }

  .ticker__track {
    gap: 22px;
  }

  .ticker__item {
    font-size: 12px;
  }

  .ticker-icon {
    width: 14px;
  }

  .fusion-builder-row-4,
  .fusion-builder-row-7,
  .fusion-builder-row-8,
  .fusion-builder-row-9 {
    --awb-padding-top: 56px !important;
    --awb-padding-bottom: 56px !important;
  }

  .subtitle-w-line p {
    gap: 12px;
  }

  .subtitle-w-line p:before {
    width: 28px;
  }

  .service-title p,
  .service-title h3 {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
  }

  .service-title p .number,
  .service-title h3 .number {
    padding-right: 0;
  }

  .service-title p > .title-center-out,
  .service-title h3 > .title-center-out {
    display: block;
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
  }

  .home-elroq-presentation {
    gap: 10px !important;
  }

  .home-elroq-presentation > .fusion-layout-column {
    --awb-width-small: 100% !important;
    --awb-padding-top: 16px !important;
    --awb-padding-right: 14px !important;
    --awb-padding-bottom: 16px !important;
    --awb-padding-left: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }

  .home-elroq-presentation .fusion-column-wrapper {
    gap: 8px;
  }

  .home-elroq-presentation .fusion-image-element {
    --awb-max-width: 46px !important;
  }

  .home-elroq-presentation .fusion-text,
  .home-elroq-presentation .fusion-text p {
    margin-bottom: 0 !important;
  }

  .coin-flip {
    max-width: min(72vw, 260px);
    margin-right: auto;
    margin-left: auto;
  }
}

/* Narrow phone pass
   Goal: protect the 400px screenshot width from oversized type. */
@media (max-width: 420px) {
  .pg-hero__left {
    padding-top: var(--pg-hero-left-pad-top, 126px) !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .pg-hero__right {
    min-height: 0 !important;
  }

  .pg-hero__headline {
    --awb-font-size: clamp(38px, 14vw, 56px) !important;
  }

  .ticker__track {
    gap: 18px;
  }

  .ticker__item {
    font-size: 11px;
  }
}