/* Home hero slider (replaces RevSlider "main-home-slider-1").
   Every number comes from tools/data/source/revslider-main-home-slider-1.json (slide 10; slides 2 and 3
   use identical layers). RevSlider lays layers out on a fixed grid and scales the whole grid down with
   the slider width, never up: desktop grid 1500 x 790, phone grid 480 x 750 (the only levels whose
   values were edited, "e": true). --u is one grid pixel: min(1px, slider width / grid width). */

#banner-wrapper { container-type: inline-size; }

.if-hero {
  --u: min(1px, calc(100cqw / 1500));
  --ease: cubic-bezier(0.645, 0.045, 0.355, 1); /* RevSlider default frame ease, power3.inOut */
  position: relative;
  width: 100%;
  height: calc(790 * var(--u));
  overflow: hidden;
  background: #000;
}

/* Slides: 300 ms fade (def.transition "fade", transitionDuration 300). The outgoing slide stays
   underneath until the incoming one has faded in. */
.if-hero__slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0s linear var(--if-hero-speed, 300ms), visibility 0s linear var(--if-hero-speed, 300ms);
}
.if-hero__slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity var(--if-hero-speed, 300ms) linear;
}

/* Background media: def.background fit "cover", position "center center". */
.if-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Layer 1 "Shape-1": solid rgb(107,74,33) panel, radius 13 13 210 13. Positioned on the grid,
   which is centred in the slider. */
.if-hero__shade {
  position: absolute;
  left: calc(50% + (145 - 750) * var(--u));
  top: calc(182 * var(--u));
  width: calc(661 * var(--u));
  height: calc(423 * var(--u));
  border-radius: 13px 13px 210px 13px;
  background: rgb(107, 74, 33);
}

/* The grid itself; text layers are positioned inside it. */
.if-hero__content {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(1500 * var(--u));
  height: calc(790 * var(--u));
  margin-left: calc(-750 * var(--u));
  color: #fff;
}
.if-hero__content > * { position: absolute; margin: 0; box-sizing: border-box; }

/* Layer 10: kicker. Michroma 22/25, #ffcc00, letter-spacing 1, padding 5 10. */
.if-hero__kicker {
  --from-y: calc(-50 * var(--u));
  left: calc(171 * var(--u));
  top: calc(217 * var(--u));
  padding: calc(5 * var(--u)) calc(10 * var(--u));
  font: 400 calc(22 * var(--u)) / calc(25 * var(--u)) Michroma, sans-serif;
  letter-spacing: calc(1 * var(--u));
  color: #ffcc00;
  white-space: nowrap;
}

/* Layer 12: heading. Centre/middle anchored, x -179, y -65, width 785, Poppins 700 58/64, upper case.
   The source text breaks after "WELCOME TO". */
.if-hero__title {
  --from-y: calc(-50 * var(--u));
  left: calc((750 - 179 - 392.5) * var(--u));
  top: calc((395 - 65) * var(--u));
  width: calc(785 * var(--u));
  transform: translateY(-50%);
  font: 700 calc(58 * var(--u)) / calc(64 * var(--u)) Poppins, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fff;
}
.if-hero__l1 { display: block; }
.if-hero__hl { color: #ffcc00; }

/* Layer 15: text. Centre/middle anchored, x -316, y 60, width 500, Poppins 300 19/24, letter-spacing 1. */
.if-hero__text {
  --from-y: calc(-50 * var(--u));
  left: calc((750 - 316 - 250) * var(--u));
  top: calc((395 + 60) * var(--u));
  width: calc(500 * var(--u));
  transform: translateY(-50%);
  font: 300 calc(19 * var(--u)) / calc(24 * var(--u)) Poppins, sans-serif;
  letter-spacing: calc(1 * var(--u));
  color: #fff;
}

/* Layer 11: button. Centre anchored x -474, top 519, 198 x 56, padding 3 26 0 5, Mulish 500 15/48,
   letter-spacing 0.5, text right, #ffcc00 pill; hover #fd8503. */
.if-hero__btn {
  --from-y: calc(50 * var(--u));
  left: calc((750 - 474 - 99) * var(--u));
  top: calc(519 * var(--u));
  width: calc(198 * var(--u));
  height: calc(56 * var(--u));
  padding: calc(3 * var(--u)) calc(26 * var(--u)) 0 calc(5 * var(--u));
  font: 500 calc(15 * var(--u)) / calc(48 * var(--u)) Mulish, sans-serif;
  letter-spacing: calc(0.5 * var(--u));
  text-align: right;
  color: #fff;
  background: #ffcc00;
  border-radius: 333px;
  text-decoration: none;
  transition: background-color 0.3s;
}
.if-hero__btn:hover, .if-hero__btn:focus { color: #fff; background: #fd8503; text-decoration: none; }

/* Layer 3: the white "+" disc over the button's left end (grid 184, 524; button at 177, 519).
   Font 32, padding 10 14, line height 25, black on white, pill radius. RevSlider's default layer font. */
.if-hero__plus {
  position: absolute;
  left: calc(7 * var(--u));
  top: calc(5 * var(--u));
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  font: 400 calc(32 * var(--u)) / calc(25 * var(--u)) Roboto, sans-serif;
  color: #000;
  background: #fff;
  border-radius: 333px;
}

/* Entrance: every layer fades in (frame_0 opacity 0); the four text/button layers also move from
   --from-y over 1000 ms, the panel and "+" over 300 ms. Keyframes (not transitions) so the first
   slide animates on page load too, and again each time a slide becomes active. */
@keyframes if-hero-in {
  from { opacity: 0; translate: 0 var(--from-y, 0px); }
}
.if-hero__slide.is-active .if-hero__shade { animation: if-hero-in 300ms var(--ease) both; }
.if-hero__slide.is-active .if-hero__kicker,
.if-hero__slide.is-active .if-hero__title,
.if-hero__slide.is-active .if-hero__text,
.if-hero__slide.is-active .if-hero__btn { animation: if-hero-in 1000ms var(--ease) both; }

/* Arrows: 40 px, rgba(0,0,0,0.5), white 20 px chevron, hover #000, 10 px from the slider edge,
   vertically centred + 130 px, always shown (nav.arrows.alwaysOn). */
.if-hero__arrow {
  position: absolute;
  z-index: 2;
  top: calc(50% + 130px);
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: background-color 0.3s;
}
.if-hero__arrow:hover, .if-hero__arrow:focus-visible { background: #000; }
.if-hero__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border: solid #fff;
  border-width: 0 0 2px 2px;
}
.if-hero__arrow--prev { left: 10px; }
.if-hero__arrow--prev::before { transform: translate(-30%, -50%) rotate(45deg); }
.if-hero__arrow--next { right: 10px; }
.if-hero__arrow--next::before { transform: translate(-70%, -50%) rotate(-135deg); }
.if-hero:focus-visible { outline: 2px solid #ffcc00; outline-offset: -2px; }

/* Phone level (RevSlider "m", below 778 px): grid 480 x 750 with its own edited positions and sizes. */
@media (max-width: 777.98px) {
  .if-hero { --u: min(1px, calc(100cqw / 480)); height: calc(750 * var(--u)); }
  .if-hero__shade {
    left: calc(50% + (2 - 204.5) * var(--u));
    top: calc(129 * var(--u));
    width: calc(409 * var(--u));
    height: calc(331 * var(--u));
  }
  .if-hero__content { width: calc(480 * var(--u)); height: calc(750 * var(--u)); margin-left: calc(-240 * var(--u)); }
  .if-hero__kicker {
    --from-y: calc(-15 * var(--u));
    left: calc((240 - 96) * var(--u));
    top: calc(169 * var(--u));
    height: calc(15 * var(--u));
    transform: translateX(-50%);
    padding: calc(1 * var(--u)) calc(3 * var(--u));
    font-size: calc(17 * var(--u));
    line-height: calc(15 * var(--u));
    letter-spacing: 0;
  }
  .if-hero__title {
    --from-y: calc(-15 * var(--u));
    left: calc((240 + 57 - 239) * var(--u));
    top: calc((375 - 127) * var(--u));
    width: calc(478 * var(--u));
    font-size: calc(44 * var(--u));
    line-height: calc(46 * var(--u));
  }
  .if-hero__text {
    --from-y: calc(-15 * var(--u));
    left: calc((240 - 17 - 162.5) * var(--u));
    top: calc((375 - 38) * var(--u));
    width: calc(325 * var(--u));
    font-size: calc(15 * var(--u));
    line-height: calc(19 * var(--u));
    letter-spacing: 0;
  }
  .if-hero__btn {
    --from-y: calc(19 * var(--u));
    left: calc((240 - 107 - 72) * var(--u));
    top: calc(386 * var(--u));
    width: calc(144 * var(--u));
    height: calc(31 * var(--u));
    padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(6 * var(--u)) calc(8 * var(--u));
    font-size: calc(15 * var(--u));
    line-height: calc(15 * var(--u));
    letter-spacing: 0;
  }
  .if-hero__plus {
    left: calc(5 * var(--u));
    top: calc(5 * var(--u));
    padding: calc(7 * var(--u));
    font-size: calc(15 * var(--u));
    font-weight: 900;
    line-height: calc(7 * var(--u));
  }
}

@media (prefers-reduced-motion: reduce) {
  .if-hero__slide, .if-hero__slide.is-active { transition: none; }
  .if-hero__slide.is-active * { animation: none !important; }
}