/* ==========================================================================
   Welcome (/) — full-screen hero slider · Figma 15:27
   Text block 2:787 sits at x406 y356 (478×285) inside the left half of the
   1290 container: a 660px column starting at the container edge, centred text
   (centre x645). Arrows at x315 / x1606, counter at y1028, footer at y1058.
   ========================================================================== */

.hero {
  --hero-col: 660px;                  /* 315 → 975: text centred at x645 */
  --hero-shift: 76px;                 /* lifts the centred block so the headline top lands at y356 */
  --fs-script: clamp(3.25rem, 2rem + 3.4vw, 5rem);
}
.hero.screen.has-footer {
  padding-bottom: calc(var(--footer-bottom) + 28px + var(--sp-6) + var(--hero-shift));
}

/* the screen bg lives inside each slide; the track must fill the screen */
.hero .slider__track,
.hero .slider__slide,
.hero .screen__content { display: flex; flex-direction: column; flex: 1 0 auto; }
.hero .slider__track { position: static; }
.hero .slider__slide { justify-content: center; }
.hero .slider__slide:not(.is-active) { position: absolute; }
.hero .screen__content { justify-content: center; }

/* ---------- text column ---------- */
.hero__body {
  width: 100%;
  max-width: var(--hero-col);
  text-align: center;
}
.hero__title {
  width: 100%;
  max-width: none;
  margin-left: auto; margin-right: auto;
  text-align: center;
}
.hero__title > span { display: block; white-space: nowrap; }
.hero__title .rule {
  margin-right: 1.5rem;
  margin-top: -.25em;              /* 2:792 sits ~mid x-height */
}
.hero__title .script {
  display: inline-block;
  width: 0;                        /* hangs past the centred rule + word, as in Figma */
  white-space: nowrap;
  font-size: var(--fs-script);
  line-height: .7;
  vertical-align: baseline;
  margin-left: -.35em;             /* Figma: script word overlaps the end of the last line */
  transform: translateY(.06em);
  position: relative; z-index: 1;
}
.hero__sub {
  margin-top: 2rem;                /* 566 → 598 */
  line-height: 55px;               /* 2:791 */
  text-transform: capitalize;
}
.hero__btn { margin-top: .75rem; min-width: 230px; }   /* 22:537 230×50 at y664 */

/* ---------- arrows at Figma positions (2:405 x315 / 2:407 x1606) ---------- */
.hero .slider__arrow { top: calc(50% - var(--hero-shift) / 2 - 32px); }
.hero .slider__arrow--prev { left: max(1rem, calc((100% - var(--container)) / 2)); }
.hero .slider__arrow--next { right: max(1rem, calc((100% - var(--container)) / 2 - 59px)); }

/* ---------- counter 2:794: active number carries a thin diagonal stroke ---------- */
.hero .slider__counter { gap: 22px; letter-spacing: .14em; }
.hero .slider__counter button { position: relative; }
.hero .slider__counter button[aria-current="true"]::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 39px; height: 1px;
  background: var(--c-gold);
  transform: translate(-50%, -50%) rotate(-36deg);
  pointer-events: none;
}

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .hero { --hero-shift: 40px; --hero-col: 560px; }
}
@media (max-width: 991px) {
  .hero { --hero-shift: 24px; --hero-col: none; }
  .hero__body { max-width: none; }
  .hero .slider__arrow { top: auto; bottom: calc(var(--footer-bottom) + 28px + 4px); transform: none; }
  .hero .slider__arrow--prev { left: var(--gutter); }
  .hero .slider__arrow--next { right: var(--gutter); }
  .hero .slider__counter { padding: 0 96px; }
}
@media (max-width: 767px) {
  .hero { --hero-shift: 16px; }
  .hero__title > span { white-space: normal; }
  .hero__title .rule { width: 56px; margin-right: 1rem; }
  .hero__sub { line-height: 1.6; margin-top: 1.25rem; }
  .hero .slider__arrow { bottom: calc(var(--footer-bottom) + 24px); }
  .hero .slider__arrow--next { right: var(--gutter); }
}
@media (max-width: 479px) {
  .hero__title .rule { display: none; }
  .hero__title .script { width: auto; margin-left: -.1em; font-size: 2.75rem; }
  .hero .slider__counter { bottom: calc(var(--footer-bottom) + 48px); }
  .hero .slider__arrow { bottom: calc(var(--footer-bottom) + 44px); }
  .hero .slider__arrow--prev { width: 40px; height: 48px; }
  .hero__btn { min-width: 0; }
}