/* Hero + carousel — Figma 843:101 (artboard 2000x1096), a full-2000-frame
   section. Sizes use --fpx (design px scaled to the .site/hero width, i.e.
   /2000) so they stay proportional inside the 1140-capped column. Elements sit
   at their exact Figma vertical positions (title 41.8%, BOOK 79.6%, arrows 42%,
   dots 94%) as % of the hero box rather than being naively centred. */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 2000 / 1096;       /* exact hero proportion (was capped too short) */
  max-height: 1096px;
  background: #56296b;
  overflow: hidden;
}
.hero__slides, .hero__slide, .hero__shade { position: absolute; inset: 0; }
.hero__slide {
  background-size: cover;
  background-position: center;   /* per-slide override set inline in the partial */
  opacity: 0;
  transition: opacity .6s ease;
}
.hero__slide.is-active { opacity: 1; }

/* Desktop only (mobile handled later): hero-2.png is 16:9 (1.778) — narrower
   than the 1.825 hero box — so `cover` scales it to fill the width exactly,
   landing the dark frame baked into the image's edges right on the hero's top/
   side edges (reads as a "gap" under the navy nav). Zoom a hair past cover so
   that baked-in border sits outside the hero and the photo fills to the top. */
@media (min-width: 601px) {
  /* Was :nth-child(2) and (6) — the hero-2 pair in the old fixed order. The slide
     order is now shuffled, so the zoom has to travel WITH the image: the partial
     puts .hero__slide--zoom on whichever slides carry that baked border. */
  .hero__slide--zoom { transform: scale(1.035); }
}

/* dark radial overlay (843:118) — elliptical, darkest at the centre for legibility */
.hero__shade {
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 52% 42% at 48% 50%,
    rgba(0,0,0,0.54) 0%,
    rgba(0,0,0,0.47) 13%,
    rgba(0,0,0,0.40) 25%,
    rgba(0,0,0,0.27) 50%,
    rgba(0,0,0,0) 100%);
}

/* (the "original" hover-reveal effect was removed — the hero is now a plain
   8-image carousel: the 4 edited screens followed by the 4 unfiltered originals) */

.hero__content { position: absolute; inset: 0; z-index: 2; }
.hero__lockup { display: none; }   /* mobile only */
.hero__the { display: none; }      /* mobile copy variant */

/* title — Figma font 165px, centred at y 458/1096 = 41.8% */
.hero__title {
  position: absolute;
  left: 50%;
  top: 41.8%;
  transform: translate(-50%, -50%);
  width: 70%;
  text-align: center;
  font-family: var(--font-display);
  color: #fff;
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.hero__line { display: block; font-size: calc(165 * var(--fpx)); }
.hero__line em { font-style: italic; font-weight: 700; }
.hero__line--bold { font-weight: 700; }

/* BOOK — Figma 1313:660 "Frame 15434": 149.983x42.42 box, font 22.539,
   tracking 0.25em (5.6349/22.539), border 2.919. The box hugs the text with
   side padding (34.49 inset - border, minus half the trailing letter-space CSS
   adds after the final K) so the mobile override (which resets padding/font)
   keeps working; height is the exact Figma 42.42. Measured box = 150.2x42.42
   design units vs Figma 149.98x42.42. Centred at y 872/1096 = 79.6%. */
.hero__book {
  position: absolute;
  left: 50%;
  top: 79.6%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: calc(42.42 * var(--fpx));
  padding-inline: calc(28.75 * var(--fpx));
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: calc(22.539 * var(--fpx));
  letter-spacing: 0.25em;
  color: #fff;
  background: #f22233;
  border: calc(2.919 * var(--fpx)) solid #fff;
  border-radius: 999px;
  white-space: nowrap;
}

/* arrows — Figma size 70px, centred at y 462/1096 = 42.2%, x 5.4% / 95.4% */
.hero__arrow {
  position: absolute;
  top: 42.2%;
  transform: translateY(-50%);
  z-index: 3;
  width: calc(70 * var(--fpx));
  height: calc(70 * var(--fpx));
  display: grid;
  place-items: center;
}
.hero__arrow img { width: 92%; height: 92%; }
.hero__arrow--prev { left: 3.6%; }
.hero__arrow--prev img { transform: rotate(-90deg); }   /* up triangle -> left */
.hero__arrow--next { right: 3.6%; }
.hero__arrow--next img { transform: rotate(90deg); }    /* up triangle -> right */

/* dots — Figma at y 1032/1096 = 94.2% */
.hero__dots {
  position: absolute;
  top: 94.2%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  gap: calc(9 * var(--fpx));
}
.hero__dot {
  width: calc(11 * var(--fpx));
  height: calc(11 * var(--fpx));
  border-radius: 50%;
  background: rgba(255,255,255,.55);
}
.hero__dot.is-active { background: #fff; }