/* V25 — independent desktop/mobile imagery and precise focal-point framing. */
.sr-focus-bg {
  background-position: var(--sr-x-desktop, 50%) var(--sr-y-desktop, 50%) !important;
}

.sr-focus-image {
  object-position: var(--sr-x-desktop, 50%) var(--sr-y-desktop, 50%) !important;
}

.sr-ritual__rail article::before {
  background-position: var(--sr-x-desktop, 50%) var(--sr-y-desktop, 50%);
}

.sr-ritual__rail article .sr-ritual__motion {
  object-position: var(--sr-x-desktop, 50%) var(--sr-y-desktop, 50%);
}

@media (max-width: 780px) {
  .sr-hero__image {
    background-image: var(--sr-mobile-image) !important;
  }

  .sr-focus-bg {
    background-position: var(--sr-x-mobile, 50%) var(--sr-y-mobile, 50%) !important;
  }

  .sr-focus-image {
    object-position: var(--sr-x-mobile, 50%) var(--sr-y-mobile, 50%) !important;
  }

  .sr-ritual__rail article::before {
    background-position: var(--sr-x-mobile, 50%) var(--sr-y-mobile, 50%);
  }

  .sr-ritual__rail article .sr-ritual__motion {
    object-position: var(--sr-x-mobile, 50%) var(--sr-y-mobile, 50%);
  }
}

/* Keep every CTA legible when its colour treatment inverts. */
.sr-site .sr-button:hover,
.sr-site .sr-button:focus-visible,
.sr-site .sr-button:active {
  color: #fff !important;
}

.sr-site .sr-button--sand:hover,
.sr-site .sr-button--sand:focus-visible,
.sr-site .sr-button--footer:hover,
.sr-site .sr-button--footer:focus-visible {
  color: #fff !important;
  background: var(--sr-forest) !important;
  border-color: var(--sr-forest) !important;
}

@media (min-width: 901px) {
  /* The profile layer must span the full explorer so each hut owns its third. */
  .sr-hut-map .sr-hut-profiles {
    width: 100%;
    max-width: none;
  }
}