.hero {
  position: relative;
  height: 844px;
  background: #050200;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}

.hero__slides,
.hero__slide {
  position: absolute;
  inset: 0;
}

.hero__slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}

.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.hero__media,
.hero__scrim {
  position: absolute;
  inset: 0;
}

.hero__slide > picture {
  position: absolute;
  inset: 0;
}

.hero__media {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center right;
}

.hero__scrim {
  background: linear-gradient(90deg, var(--color-hero-scrim) 0%, rgba(230, 101, 16, 0) 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 622px;
  width: 100%;
  margin-inline: var(--page-pad);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.hero__progress {
  position: absolute;
  left: var(--page-pad);
  right: var(--page-pad);
  bottom: 48px;
  z-index: 2;
  display: flex;
  gap: 8px;
  width: auto;
  height: 4px;
}

.hero__bullet {
  flex: 1;
  height: 4px;
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.24);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.hero__bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-brand-orange);
}

@keyframes heroProgress {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

.page-hero {
  position: relative;
  padding: 199px var(--page-pad) 88px;
  background: var(--color-neutral-gray-900);
  overflow: hidden;
}

.page-hero__stripes {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 0;
  width: min(1125px, 100%);
  height: 344px;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}

.page-hero__glow {
  position: absolute;
  left: 50%;
  top: -226px;
  z-index: 0;
  width: 620px;
  height: 620px;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}

.page-hero__copy {
  position: relative;
  z-index: 1;
  max-width: 936px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page-hero--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.page-hero--center .page-hero__copy {
  align-items: center;
  width: 100%;
}

.page-hero--center .heading-xl {
  font-weight: 400;
}

.page-hero--center .heading-xl .is-strong {
  display: block;
  font-weight: 800;
}

.page-hero--catalog {
  gap: 32px;
}

.page-hero--catalog .lede {
  color: var(--color-neutral-silver-100);
}

.page-hero--catalog .heading-xl,
.contact__intro .heading-xl {
  font-weight: 800;
}

.featured {
  background: var(--color-bg-soft);
  padding: 88px var(--page-pad) 64px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  overflow: visible;
}

.featured__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.featured__head .btn {
  flex-shrink: 0;
}

.featured__copy {
  max-width: 552px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.featured__copy .heading-lg {
  color: var(--color-neutral-gray-900);
}

.featured__copy .lede {
  color: var(--color-neutral-silver-400);
}

.featured__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.featured__carousel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: visible;
}

.featured__viewport {
  overflow: hidden;
  padding: 16px 16px 40px;
  margin: -16px -16px -40px;
  container-type: inline-size;
  touch-action: pan-y;
  user-select: none;
}

.featured__track {
  display: flex;
  gap: 24px;
  overflow: visible;
  padding: 16px 16px 40px;
  margin: -16px -16px -40px;
}

.featured__track .card-product {
  flex: 0 0 calc((100cqw - 48px) / 3);
  width: calc((100cqw - 48px) / 3);
}

.why-rm-band {
  position: relative;
  z-index: 2;
  background: #0a0a0a;
  padding-bottom: 64px;
}

.why-rm-band::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 120px;
  background: var(--color-bg-soft);
}

.why-rm {
  position: relative;
  z-index: 1;
  width: min(1304px, calc(100% - 48px));
  margin: 0 auto -98px;
  padding: 80px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-dark);
  overflow: hidden;
}

.why-rm__watermark {
  position: absolute;
  left: 33%;
  top: -42%;
  width: 70%;
  height: 174%;
  object-fit: contain;
  opacity: 0.08;
  mix-blend-mode: luminosity;
  pointer-events: none;
  z-index: 0;
}

.why-rm__head {
  position: relative;
  z-index: 1;
  max-width: 655px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}

.why-rm__head .heading-md {
  color: var(--color-white);
}

.why-rm__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.why-rm__grid .info-card {
  width: auto;
  margin-right: -1px;
}

.instagram {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 53px;
  min-height: 648px;
  padding: 80px var(--page-pad) 0;
  background: linear-gradient(114deg, #0f0f0f 68%, rgba(30, 30, 30, 0) 99%), #0f0f0f;
  overflow: hidden;
}

.instagram__dots {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(320px, 28%);
  height: 100%;
  background-image: radial-gradient(circle, #b1b1b1 1.15px, transparent 1.4px);
  background-size: 11px 11px;
  background-position: right top;
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 18%, transparent 100%);
  mask-image: linear-gradient(to left, #000 0%, #000 18%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.instagram__copy {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 553px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 0 0 80px;
  align-self: center;
}

.instagram__copy .heading-lg {
  color: var(--color-white);
}

.instagram__copy .btn {
  align-self: flex-start;
}

.instagram__phone {
  position: relative;
  z-index: 1;
  width: min(525px, 100%);
  height: 500px;
  margin-left: auto;
}

.instagram__phone img.instagram__hand {
  position: absolute;
  left: 44px;
  bottom: 0;
  width: 481px;
  height: 440px;
  max-width: none;
  object-fit: contain;
  object-position: bottom;
}

.workshop {
  background: var(--color-bg-soft);
  padding: 88px var(--page-pad);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.workshop__head {
  display: flex;
  align-items: center;
  gap: 28px;
}

.workshop__head .heading-md {
  flex: 1;
  color: var(--color-neutral-gray-900);
}

.workshop__head .lede {
  flex: 1;
  color: var(--color-neutral-silver-700);
}

.workshop__body {
  display: grid;
  grid-template-columns: minmax(280px, 460px) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(32px, 6vw, 116px);
}

.workshop__media {
  position: relative;
  width: 460px;
  max-width: 100%;
  height: 397px;
  overflow: visible;
  background: transparent;
}

.workshop__shots {
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: 452px;
  height: 397px;
}

.workshop__media img.workshop__shot {
  position: static;
  width: 218px;
  height: 397px;
  max-width: none;
  object-fit: contain;
  object-position: center;
  background: transparent;
}

.workshop__badge {
  position: absolute;
  left: 135px;
  top: 145px;
  z-index: 2;
  width: 188px;
  height: 103px;
  padding: 0;
  background: transparent;
}

.workshop__badge-plate {
  position: absolute;
  left: 0;
  top: 0;
  width: 103px;
  height: 188px;
  max-width: none;
  transform: rotate(-90deg);
  transform-origin: 51.5px 51.5px;
}

.workshop__badge-logo {
  position: absolute;
  left: 22px;
  top: 26px;
  width: 144px;
  height: 50px;
  max-width: none;
  object-fit: contain;
}

.workshop__list {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}

.workshop__rows {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.workshop__list .btn {
  display: inline-flex;
  width: auto;
  max-width: none;
  height: auto;
  align-self: flex-start;
  padding: 20px 24px;
}

.about-split {
  display: grid;
  grid-template-columns: minmax(280px, 42.86%) minmax(0, 1fr);
  min-height: 556px;
  background: #e8e8e8;
}

.about-split__hatch {
  height: 91px;
  flex-shrink: 0;
  background-color: var(--color-neutral-black);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--color-neutral-black) 0 5px,
    var(--color-brand-orange) 5px 8px
  );
}

.about-split__quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  padding: 88px var(--page-pad) 88px clamp(32px, 9.8vw, 148px);
  color: var(--color-neutral-silver-700);
}

.about-split__quote p {
  margin: 0;
  max-width: 524px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.64px;
}

.about-split__media {
  display: flex;
  flex-direction: column;
  min-height: 556px;
  overflow: hidden;
}

.about-split__media img {
  width: 100%;
  height: 465px;
  flex: 1;
  object-fit: cover;
}

.about-power {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 45.57%);
  min-height: 736px;
  background-color: var(--color-white);
}

.about-power::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--color-neutral-silver-100) 1px, transparent 1px);
  background-size: 18px 18px;
}

.about-power > * {
  position: relative;
  z-index: 1;
}

.about-power__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  padding: 88px 24px 88px var(--page-pad);
}

.about-power__intro {
  width: 440px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-power__copy .heading-md {
  color: var(--color-neutral-gray-900);
}

.about-power__copy .lede {
  color: var(--color-neutral-silver-700);
}

.about-power__services {
  width: 484px;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
}

.about-power__media {
  position: relative;
  min-width: 0;
  min-height: 736px;
  height: 100%;
  overflow: hidden;
}

.about-power__media picture {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.about-power__photo {
  width: 100%;
  height: 100%;
  max-width: none;
  min-width: 0;
  object-fit: cover;
  object-position: left center;
  mix-blend-mode: darken;
}

.about-power__badge {
  position: absolute;
  left: -51px;
  top: 226px;
  z-index: 2;
  width: 188px;
  height: 103px;
}

.about-power__union {
  position: absolute;
  left: 0;
  top: 0;
  width: 103px;
  height: 188px;
  max-width: none;
  transform: rotate(-90deg);
  transform-origin: 51.5px 51.5px;
}

.about-power__logo {
  position: absolute;
  left: 22px;
  top: 26px;
  width: 144px;
  height: 50px;
  max-width: none;
  object-fit: contain;
}

.pilares {
  display: grid;
  grid-template-columns: minmax(240px, 363px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  padding: 104px var(--page-pad);
  background: linear-gradient(90deg, #1e1e1e 25%, rgba(30, 30, 30, 0) 100%), #1e1e1e;
}

.pilares__intro {
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.pilares__intro .heading-lg {
  color: var(--color-white);
}

.pilares__intro img {
  width: 100%;
  height: 383px;
  object-fit: cover;
  border-radius: 4px;
}

.pilares__list {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pilares__list .info-card {
  width: 100%;
  margin-bottom: -1px;
}

.catalog {
  background: var(--color-bg-soft);
  padding: 40px var(--page-pad) 88px;
  border-top: 1px solid var(--color-neutral-silver-100);
}

.catalog__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.catalog__count {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-neutral-silver-400);
  white-space: nowrap;
}

.catalog__count strong {
  color: var(--color-neutral-gray-900);
  font-weight: 500;
}

.catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 24px;
}

.catalog__empty {
  margin: 0;
  padding: 48px 0 16px;
  color: var(--color-neutral-silver-400);
  font-size: 16px;
}

.catalog__more {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.product-hero {
  display: grid;
  grid-template-columns: minmax(280px, 456px) minmax(0, 1fr);
  gap: 51px;
  padding: 160px var(--page-pad) 88px;
  background: var(--color-white);
}

.product-gallery {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-gallery .carousel-nav {
  margin-top: 24px;
}

.product-gallery__main {
  position: relative;
  height: 412px;
  background: var(--color-neutral-silver-100);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.product-gallery__main > img[data-gallery-main] {
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.product-gallery__main[data-gallery-open] {
  cursor: zoom-in;
}

.product-lightbox {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 56px 120px 88px;
  border: 0;
  background: rgba(15, 15, 15, 0.58);
}

.product-lightbox::backdrop {
  background: rgba(15, 15, 15, 0.28);
}

.product-lightbox[open] {
  display: grid;
  place-items: center;
  touch-action: none;
}

.product-lightbox__frame {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: grid;
  place-items: center;
  touch-action: none;
  cursor: grab;
}

.product-lightbox.is-dragging .product-lightbox__frame,
.product-lightbox__frame.is-dragging {
  cursor: grabbing;
}

.product-lightbox img[data-gallery-lightbox-img] {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 168px);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.product-lightbox__close {
  position: absolute;
  top: 48px;
  right: 48px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-neutral-black);
  color: var(--color-white);
  cursor: pointer;
}

.product-lightbox__close:hover {
  background: var(--color-brand-orange);
}

.product-lightbox__close-icon {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
}

.product-lightbox__close-icon::before,
.product-lightbox__close-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.product-lightbox__close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.product-lightbox__close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.product-lightbox__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 0.45s ease;
}

.product-lightbox__nav.is-prev {
  left: 48px;
}

.product-lightbox__nav.is-next {
  right: 48px;
}

.product-lightbox__nav img {
  width: 56px;
  height: 56px;
  max-width: none;
  transition: filter 0.45s ease;
}

.product-lightbox__nav.is-prev img {
  transform: scaleX(-1) rotate(-90deg);
}

.product-lightbox__nav.is-next img {
  transform: rotate(-90deg);
}

.product-lightbox__nav:hover {
  background: var(--color-brand-orange);
}

.product-lightbox__nav:hover img {
  filter: brightness(0) invert(1);
}

.product-lightbox__nav:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.product-lightbox__nav:disabled img {
  filter: brightness(0) invert(1);
}

.product-lightbox__nav:disabled:hover {
  background: transparent;
}

.product-lightbox__count {
  position: absolute;
  left: 50%;
  bottom: 48px;
  z-index: 2;
  margin: 0;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-white);
}

.product-lightbox__dots {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 2;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

.product-lightbox__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
}

.product-lightbox__dots button.is-active {
  background: var(--color-brand-orange);
}

.product-gallery__thumbs {
  display: flex;
  gap: 8px;
}

.product-gallery__thumbs button {
  flex: 1;
  height: 134px;
  border: 0;
  background: var(--color-neutral-silver-100);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.product-gallery__thumbs button[hidden] {
  display: none;
}

.product-gallery__thumbs button.is-active {
  outline: 1px solid var(--color-brand-orange);
}

.product-gallery__thumbs img {
  width: auto;
  height: auto;
  max-width: 86%;
  max-height: 86%;
  object-fit: contain;
}

.product-info {
  width: auto;
  min-width: 0;
  max-width: 552px;
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding-top: 46px;
}

.product-info .heading-lg {
  color: var(--color-neutral-gray-900);
  font-weight: 800;
}

.product-info .lede {
  color: var(--color-neutral-silver-400);
}

.product-info__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.product-info__cta .btn,
.single-produto .featured__head .btn {
  width: auto;
  align-self: flex-start;
}

.product-info__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  letter-spacing: -0.56px;
  color: var(--color-neutral-silver-400);
}

.product-info__note img {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.product-info__note strong {
  font-weight: 600;
  color: var(--color-brand-orange);
}

.product-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.product-benefits article {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--color-neutral-black);
  border: 1px solid var(--color-neutral-silver-100);
  border-radius: var(--radius-sm);
}

.product-benefits article::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../media/photos/why-rm-hatch.png");
  background-size: cover;
  opacity: 1;
  pointer-events: none;
}

.product-benefits article::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(117deg, #1e1e1e 50%, rgba(30, 30, 30, 0) 100%);
  pointer-events: none;
}

.product-benefits article > * {
  position: relative;
  z-index: 1;
}

.product-benefits img {
  width: 32px;
  height: 32px;
}

.product-benefits p {
  margin: 0;
  color: var(--color-neutral-silver-100);
  font-size: 14px;
}

.contact {
  position: relative;
  overflow: hidden;
  padding: 199px var(--page-pad) 0;
  background: linear-gradient(180deg, var(--color-neutral-black) 0%, var(--color-neutral-gray-900) 100%);
}

.contact .page-hero__stripes,
.contact .page-hero__glow {
  z-index: 0;
}

.contact__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 480px) minmax(0, 1fr);
  gap: 24px 95px;
  align-items: start;
  padding-bottom: 120px;
}

.contact__intro {
  max-width: 456px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 40px;
}

.contact__intro .heading-xl {
  color: var(--color-white);
}

.contact__intro .lede {
  color: var(--color-neutral-silver-100);
}

.contact-card {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 32px;
  background: var(--color-neutral-gray-900);
  border: 1px solid var(--color-neutral-black);
  border-radius: var(--radius-sm);
}

.contact-card + .contact-card {
  margin-top: 24px;
}

.contact-card h2 {
  margin: 0;
  padding-left: 16px;
  border-left: 1px solid var(--color-brand-orange);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.12px;
  text-transform: uppercase;
  color: var(--color-neutral-silver-400);
}

.contact-card p,
.hours-row {
  margin: 0;
  color: var(--color-neutral-silver-100);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.56px;
}

.contact-card .btn--ghost {
  background: var(--color-neutral-silver-700);
  align-self: flex-start;
}

.hours-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  gap: 16px;
  padding: 0 0 16px;
  border-bottom: 1px solid #292929;
  color: var(--color-neutral-silver-400);
}

.hours-row span:last-child {
  flex-shrink: 0;
  text-align: right;
}

.hours-row + .hours-row {
  margin-top: 16px;
}

.hours-row--accent {
  border-bottom: 0;
  padding-bottom: 0;
}

.hours-row--accent span:first-child {
  color: var(--color-brand-orange);
}

.hours-row--accent span:last-child {
  color: var(--color-white);
}

.contact__map {
  --map-cut: 80px;
  position: relative;
  width: min(552px, 100%);
  margin-left: auto;
}

.contact__map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 552 / 546;
  overflow: hidden;
  clip-path: polygon(var(--map-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--map-cut));
  background: var(--color-white);
}

.contact__map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.contact__map-card {
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 471px;
  max-width: calc(100% - 24px);
  padding: 32px;
  background: var(--color-neutral-gray-900);
  border: 1px solid var(--color-neutral-black);
  border-radius: var(--radius-sm);
  color: var(--color-white);
  transform: translate(-50%, -50%);
}

.contact__map-card img {
  width: 34px;
  height: 32px;
  flex: 0 0 34px;
}

.contact__map-card h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.64px;
}

.contact__map-card p {
  margin: 0;
  color: var(--color-neutral-silver-100);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.64px;
}

.contact__city {
  display: inline-flex;
  margin-top: 16px;
  padding: 6px 8px;
  background: var(--color-neutral-black);
  border: 1px solid #292929;
  border-radius: var(--radius-sm);
  font-size: 14px;
  letter-spacing: -0.56px;
  color: var(--color-neutral-silver-100);
}

.contact-assist {
  --assist-src-w: 770;
  --assist-src-h: 446;
  --assist-bg-h: 347;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 770px);
  align-items: stretch;
  background: var(--color-white);
  overflow: visible;
}

.contact-assist__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  height: 0;
  min-height: 100%;
  padding: 32px 32px 32px var(--page-pad);
  background-image: radial-gradient(var(--color-neutral-silver-100) 1px, transparent 1px);
  background-size: 18px 18px;
}

.contact-assist__copy .label-bar {
  color: var(--color-neutral-silver-700);
}

.contact-assist__copy .heading-md {
  color: var(--color-neutral-gray-900);
}

.contact-assist__copy .lede {
  color: var(--color-neutral-silver-700);
}

.contact-assist__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.contact-assist__actions .btn {
  flex: 0 0 auto;
  width: auto;
}

.contact-assist__media {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 770 / 347;
  overflow: visible;
}

.contact-assist__media picture {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% * 446 / 347);
}

.contact-assist__photo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  object-position: bottom center;
  pointer-events: none;
}

.contact-assist__badge {
  left: -94px;
  top: 122px;
}

.legal {
  padding: 199px var(--page-pad) 88px;
  background: var(--color-bg-soft);
  color: var(--color-neutral-gray-900);
  min-height: 600px;
}

.legal h1 {
  margin: 0 0 24px;
}

.legal p {
  max-width: 720px;
  color: var(--color-neutral-silver-700);
}

@media (max-width: 1100px) {
  .hero {
    height: 720px;
  }
  .featured__head,
  .workshop__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .featured__grid,
  .why-rm__grid,
  .catalog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .featured__track .card-product {
    flex-basis: calc((100cqw - 24px) / 2);
    width: calc((100cqw - 24px) / 2);
  }

  .workshop__body,
  .about-split,
  .about-power,
  .pilares,
  .product-hero,
  .contact__layout,
  .contact-assist {
    grid-template-columns: 1fr;
  }

  .product-info {
    max-width: none;
    width: 100%;
  }

  .about-power {
    min-height: 0;
  }

  .about-power__media {
    min-height: 0;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .about-power__media picture {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
  }

  .about-power__photo {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }

  .contact-assist__badge {
    left: 24px;
    top: auto;
    bottom: 24px;
  }

  .contact-assist__media {
    min-height: 0;
    aspect-ratio: 770 / 446;
    overflow: hidden;
  }

  .contact-assist__copy {
    height: auto;
    min-height: 0;
    padding: 48px var(--page-pad);
  }

  .contact-assist__actions {
    flex-wrap: wrap;
  }

  .contact-assist__media picture {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 100%;
  }

  .contact-assist__photo {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  .about-power__services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .service-item {
    width: auto;
  }

  .about-split__quote {
    padding: 48px var(--page-pad);
  }

  .contact__map-card {
    width: calc(100% - 32px);
    left: 50%;
    top: 100%;
    bottom: auto;
    transform: translate(-50%, -50%);
  }

  .hero__content {
    max-width: none;
  }

  .featured {
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
  }

  .featured:has(.featured__carousel) {
    padding-left: calc(var(--page-pad) + 16px);
    padding-right: calc(var(--page-pad) + 16px);
  }

  .featured__copy {
    max-width: none;
  }

  .featured__head .btn {
    width: auto;
    max-width: 100%;
    align-self: flex-start;
  }

  .why-rm-band {
    padding-bottom: 0;
  }

  .why-rm-band::before {
    height: 0;
  }

  .why-rm {
    width: 100%;
    margin: 0;
    padding: 48px var(--page-pad);
    border-radius: 0;
  }

  .instagram {
    grid-template-columns: 1fr;
    justify-items: stretch;
    padding: 64px var(--page-pad) 0;
  }

  .instagram__copy {
    max-width: none;
    width: 100%;
    align-self: stretch;
  }

  .instagram__copy .btn {
    width: auto;
    max-width: 100%;
    align-self: flex-start;
  }

  .instagram__dots {
    inset: 0 0 0 auto;
    width: min(280px, 72%);
    height: 100%;
    background-position: right top;
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 22%, transparent 100%);
    mask-image: linear-gradient(to left, #000 0%, #000 22%, transparent 100%);
  }

  .instagram__phone {
    width: 100%;
    max-width: 525px;
    height: 440px;
    margin-inline: auto;
  }

  .instagram__phone img.instagram__hand {
    left: 50%;
    width: min(481px, 100%);
    height: auto;
    transform: translateX(-50%);
  }

  .workshop {
    padding: 48px var(--page-pad);
  }

  .workshop__list .btn {
    width: 100%;
    align-self: stretch;
  }

  .workshop__media {
    width: 100%;
    height: auto;
  }

  .workshop__badge {
    left: 50%;
    top: auto;
    bottom: 24px;
    transform: translateX(-50%);
  }

  .workshop__shots {
    width: 100%;
    height: auto;
  }

  .workshop__media img.workshop__shot {
    width: 50%;
    height: auto;
  }

  .contact__map {
    width: 100%;
  }

  .contact__map-card {
    width: calc(100% - 32px);
    left: 50%;
    top: 100%;
    bottom: auto;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 720px) {
  .featured__grid,
  .why-rm__grid,
  .catalog__grid,
  .about-power__services {
    grid-template-columns: 1fr;
  }

  .hero {
    height: 692px;
  }

  .hero__slide {
    justify-content: flex-start;
    padding: 160px var(--page-pad) 72px;
  }

  .hero__content {
    margin: 0;
    max-width: none;
    gap: 24px;
  }

  .hero__copy {
    gap: 16px;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .hero__actions .btn {
    width: 100%;
    max-width: 100%;
  }

  .hero__actions .btn--split {
    justify-content: center;
    padding: 16px 24px;
  }

  .hero__actions .btn--split .btn__icon {
    position: static;
    width: 16px;
    height: 16px;
    background: transparent;
  }

  .hero__progress {
    bottom: 48px;
  }

  .hero__media {
    object-position: center;
  }

  .page-hero {
    padding: 120px var(--page-pad) 48px;
  }

  .page-hero--center {
    padding-top: 156px;
    padding-bottom: 48px;
    background: var(--color-surface-dark);
  }

  .page-hero--center .page-hero__stripes,
  .page-hero--center .page-hero__glow {
    display: none;
  }

  .page-hero--center .page-hero__copy {
    gap: 24px;
  }

  .page-hero--center .heading-xl {
    font-size: 32px;
    line-height: 1.08;
    font-weight: 700;
  }

  .page-hero--center .heading-xl .is-strong {
    display: inline;
    font-weight: 700;
  }

  .about-split {
    background: var(--color-bg-soft);
  }

  .about-split__hatch {
    background-color: var(--color-bg-soft);
    background-image: repeating-linear-gradient(
      -45deg,
      var(--color-bg-soft) 0 5px,
      var(--color-brand-orange) 5px 8px
    );
  }

  .about-split__media {
    min-height: 0;
    flex-direction: column-reverse;
  }

  .about-split__media img {
    height: 280px;
    flex: none;
  }

  .about-split__quote {
    padding: 40px var(--page-pad) 48px;
    gap: 16px;
  }

  .about-split__quote p {
    max-width: none;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.45;
  }

  .pilares {
    padding: 48px var(--page-pad);
    gap: 32px;
  }

  .pilares__intro {
    gap: 12px;
  }

  .pilares__intro .heading-lg {
    font-size: 26px;
    line-height: normal;
  }

  .pilares__intro img {
    width: 100%;
    height: 250px;
    margin-top: 20px;
    border-radius: 4px;
  }

  .about-power {
    min-height: 0;
  }

  .about-power::before {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  }

  .about-power__copy {
    width: 100%;
    gap: 24px;
    padding: 48px var(--page-pad);
    background-image: none;
  }

  .about-power__intro {
    width: 100%;
    gap: 24px;
  }

  .about-power__copy .heading-md {
    font-size: 26px;
    line-height: normal;
  }

  .about-power__services {
    width: 100%;
    gap: 48px;
  }

  .about-power__copy > .btn {
    width: auto;
  }

  .about-power__media {
    min-height: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: auto;
    overflow: visible;
  }

  .about-power__media picture {
    display: block;
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
  }

  .about-power__photo {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }

  .page-hero--catalog {
    padding-top: 160px;
    padding-bottom: 40px;
  }

  .product-hero {
    padding: 160px var(--page-pad) 48px;
    gap: 24px;
  }

  .product-info {
    max-width: none;
    width: 100%;
    padding-top: 0;
    gap: 32px;
  }

  .product-gallery__main {
    height: auto;
    aspect-ratio: 312 / 282;
    background: var(--color-neutral-silver-100);
    border: 0;
  }

  .product-gallery__main > img[data-gallery-main] {
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 90%;
  }

  .product-gallery__thumbs button {
    flex: 1;
    height: auto;
    aspect-ratio: 312 / 282;
    min-height: 0;
    background: var(--color-neutral-silver-100);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .product-gallery__thumbs img {
    width: auto;
    height: auto;
    max-width: 86%;
    max-height: 86%;
  }

  .product-lightbox {
    padding: 64px 16px 80px;
  }

  .product-lightbox img[data-gallery-lightbox-img] {
    max-height: calc(100vh - 144px);
  }

  .product-lightbox__close {
    top: 16px;
    right: 16px;
  }

  .product-lightbox__nav {
    display: none;
  }

  .product-lightbox__count {
    bottom: 40px;
  }

  .product-lightbox__dots {
    bottom: 20px;
  }

  .featured {
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
    padding-top: 48px;
    padding-bottom: 40px;
    gap: 24px;
  }

  .featured:has(.featured__carousel) {
    padding-left: calc(var(--page-pad) + 16px);
    padding-right: calc(var(--page-pad) + 16px);
  }

  .catalog {
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
  }

  .featured__head {
    flex-direction: column;
    align-items: stretch;
  }

  .featured__head .btn {
    width: auto;
    max-width: 100%;
    align-self: flex-start;
  }

  .featured__copy {
    max-width: none;
  }

  .search {
    width: 100%;
  }

  .catalog__toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .catalog__count {
    white-space: normal;
  }

  .featured__track .card-product {
    flex-basis: min(340px, calc(100cqw - 50px));
    width: min(340px, calc(100cqw - 50px));
  }

  .why-rm-band {
    padding-bottom: 0;
  }

  .why-rm-band::before {
    height: 0;
  }

  .why-rm {
    width: 100%;
    margin: 0;
    padding: 48px var(--page-pad);
    border-radius: 0;
  }

  .why-rm__grid {
    gap: 16px;
  }

  .why-rm__watermark {
    left: -42%;
    top: 8%;
    width: 210%;
    height: 130%;
    object-fit: contain;
    object-position: 42% 38%;
  }

  .contact__intro,
  .contact-card,
  .contact-assist__copy {
    max-width: none;
  }

  .contact {
    padding: 160px var(--page-pad) 0;
  }

  .contact__layout {
    gap: 32px;
    padding-bottom: 32px;
  }

  .contact__intro {
    gap: 20px;
    margin-bottom: 20px;
  }

  .contact-card + .contact-card {
    margin-top: 20px;
  }

  .contact-card,
  .contact-assist__actions .btn {
    max-width: none;
  }

  .contact-card .btn,
  .contact-assist__actions .btn {
    width: 100%;
  }

  .contact__map {
    --map-cut: 28px;
    width: 100%;
    margin-left: 0;
  }

  .contact__map-frame {
    aspect-ratio: 342 / 345;
    clip-path: polygon(var(--map-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--map-cut));
    border-radius: 0;
    overflow: hidden;
    background: var(--color-neutral-gray-900);
  }

  .contact__map-frame iframe {
    inset: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
  }

  .contact__map-card {
    position: relative;
    z-index: 2;
    left: auto;
    top: auto;
    width: calc(100% - 50px);
    max-width: 292px;
    margin: -16px auto 0;
    padding: 16px;
    transform: none;
  }

  .contact-assist {
    padding: 0;
  }

  .contact-assist__media {
    width: 100%;
  }

  .product-benefits article {
    padding: 16px;
  }

  .workshop {
    padding: 48px var(--page-pad);
    gap: 32px;
  }

  .workshop__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .workshop__list {
    gap: 16px;
  }

  .workshop__list .btn {
    width: 100%;
    align-self: stretch;
    height: 56px;
    padding: 16px 24px;
  }

  .why-rm__head {
    gap: 12px;
    margin-bottom: 32px;
  }

  .workshop__head .btn,
  .instagram__copy .btn {
    width: auto;
    max-width: 100%;
    align-self: flex-start;
  }

  .footer-col--contact {
    flex-basis: auto;
    width: 100%;
    max-width: none;
  }

  .site-footer__inner,
  .site-footer__bar {
    flex-direction: column;
    gap: 32px;
  }

  .footer-cta {
    width: 100%;
  }

  .site-footer__bar {
    align-items: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide,
  .hero__bar,
  .brands__track {
    transition: none;
    animation: none !important;
  }
}