/* Raíces — zellige green title card with the photo revealed on the right 40%. */
.mega.dark.rx-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0f4b42;
}

.mega > .rx-hero-visual,
.mega > .rx-hero-shade {
  position: absolute !important;
  inset: 0 0 0 auto;
  width: 40%;
  clip-path: inset(0 0 0 100%);
  animation: raices-image-slide 1.15s cubic-bezier(.72, 0, .17, 1) .28s forwards;
  will-change: clip-path;
}

.mega > .rx-hero-visual {
  z-index: 0 !important;
  overflow: hidden;
  background: #092f2a;
}

.mega > .rx-hero-single {
  background: #092f2a url('raices-sunset.png') center center / cover no-repeat;
}

.rx-piece {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: #092f2a;
  box-shadow: 0 14px 34px rgba(2, 18, 16, .34);
}

.rx-piece img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.82) contrast(1.08) brightness(.86);
}

.rx-piece-1 { inset: -3% 48% auto -6%; height: 28%; clip-path: polygon(0 2%, 98% 0, 94% 97%, 4% 92%); }
.rx-piece-2 { inset: -2% -5% auto 45%; height: 34%; clip-path: polygon(3% 0, 100% 3%, 96% 94%, 0 100%); }
.rx-piece-3 { inset: 20% 43% auto -8%; height: 31%; clip-path: polygon(1% 7%, 100% 0, 95% 94%, 5% 100%); }
.rx-piece-4 { inset: 27% -7% auto 48%; height: 29%; clip-path: polygon(6% 0, 98% 5%, 100% 96%, 0 90%); }
.rx-piece-5 { inset: 44% 46% auto -6%; height: 31%; clip-path: polygon(0 4%, 96% 0, 100% 92%, 5% 100%); }
.rx-piece-6 { inset: 51% -5% auto 43%; height: 28%; clip-path: polygon(4% 0, 100% 8%, 95% 100%, 0 93%); }
.rx-piece-7 { inset: 68% 47% auto -5%; height: 28%; clip-path: polygon(2% 8%, 100% 0, 96% 96%, 0 100%); }
.rx-piece-8 { inset: 73% -6% auto 46%; height: 30%; clip-path: polygon(0 2%, 95% 0, 100% 93%, 5% 100%); }
.rx-piece-9 { inset: 35% 22% auto 25%; height: 22%; z-index: 2; clip-path: polygon(4% 0, 100% 5%, 94% 100%, 0 91%); }
.rx-piece-10 { inset: auto 7% -5% 3%; height: 20%; z-index: 3; clip-path: polygon(1% 8%, 97% 0, 100% 92%, 4% 100%); }

.rx-piece-1 img { object-position: center 35%; }
.rx-piece-2 img { object-position: center 32%; }
.rx-piece-3 img { object-position: center 28%; }
.rx-piece-4 img { object-position: center 38%; }
.rx-piece-5 img { object-position: center 35%; }
.rx-piece-6 img { object-position: center 34%; }
.rx-piece-7 img { object-position: center 28%; }
.rx-piece-8 img { object-position: center 30%; }
.rx-piece-9 img { object-position: center 26%; }
.rx-piece-10 img { object-position: center; }

.rx-hero .signature-title h1 {
  font-size: clamp(88px, 14vw, 218px);
}

.rx-title-stack {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.rx-title-stack h1 {
  margin: 0;
}

.rx-title-tagline {
  margin: clamp(22px, 3vw, 42px) 0 0;
  padding: 0;
  align-self: flex-start;
  font: 600 clamp(20px, 2.5vw, 38px) / 1.05 'Syne', sans-serif;
  letter-spacing: -.035em;
}

.rx-hero .signature-badge {
  transform: translateY(clamp(26px, 4vw, 58px)) rotate(180deg);
  transform-origin: center;
}

.rx-hero .hero-foot {
  justify-content: space-between;
  align-items: flex-end;
}

.rx-hero-meta {
  font: 600 11px 'Syne', sans-serif;
  letter-spacing: .16em;
}

.rx-hero-cta {
  padding: 13px 18px 11px;
  border: 1px solid rgba(244, 240, 229, .72);
  background: rgba(15, 75, 66, .5);
  backdrop-filter: blur(8px);
}

.rx-intro-copy {
  max-width: 630px;
  margin: 34px 0 0;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.55;
  color: #75635b;
}

.rx-acts .rx-act-card {
  position: relative;
  min-height: 620px;
  padding: 0;
  overflow: hidden;
  perspective: 1400px;
  cursor: pointer;
  outline: none;
}

.rx-act-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.2, .72, .18, 1);
}

.rx-act-card:hover .rx-act-inner,
.rx-act-card:focus-visible .rx-act-inner,
.rx-act-card.is-flipped .rx-act-inner {
  transform: rotateY(180deg);
}

.rx-act-face {
  position: absolute;
  inset: 0;
  padding: 40px;
  display: flex;
  flex-direction: column;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.rx-act-front {
  color: #f4f0e5;
  background-position: center;
  background-size: cover;
}

.rx-act-front::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(14, 8, 5, .12), rgba(14, 8, 5, .9));
}

.rx-act-card:nth-child(1) .rx-act-front { background-image: url('raices-03.png'); }
.rx-act-card:nth-child(2) .rx-act-front { background-image: url('raices-share.png?v=64'); background-position: center 58%; }
.rx-act-card:nth-child(3) .rx-act-front { background-image: url('raices-06.png'); }

.rx-act-back {
  transform: rotateY(180deg);
  color: #f4f0e5;
  background: #0f4b42;
  justify-content: flex-end;
}

.rx-act-card:nth-child(2) .rx-act-back { background: #9c4a2e; }
.rx-act-card:nth-child(3) .rx-act-back { background: #25100b; }

.rx-act-face span {
  position: absolute;
  top: 40px;
  left: 40px;
}

.rx-act-front small {
  margin-top: 20px;
  font: 600 11px 'Syne', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244, 240, 229, .78);
}

.rx-act-face h3 {
  font-size: clamp(54px, 6vw, 94px);
  margin-top: auto;
}

.rx-act-back h3 {
  margin: 0 0 32px;
  font-size: clamp(38px, 4.2vw, 66px);
}

.rx-act-back p {
  color: rgba(244, 240, 229, .92);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  max-width: 34ch;
}

.mega > .rx-hero-shade {
  z-index: 1 !important;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(15, 75, 66, .38), transparent 30%),
    linear-gradient(0deg, rgba(3, 25, 22, .38), transparent 54%),
    linear-gradient(180deg, rgba(3, 25, 22, .3), transparent 24%);
}

@keyframes raices-image-slide {
  from { clip-path: inset(0 0 0 100%); }
  to { clip-path: inset(0); }
}

@media (prefers-reduced-motion: reduce) {
  .mega > .rx-hero-visual,
  .mega > .rx-hero-shade {
    clip-path: inset(0);
    animation: none;
  }
}

@media (max-width: 640px) {
  .rx-hero-meta { display: none; }
  .rx-hero .hero-foot { justify-content: flex-end; }
  .rx-title-tagline { font-size: 18px; margin-top: 18px; }
  .rx-acts .rx-act-card { min-height: 520px; }
  .rx-act-face { padding: 30px; }
  .rx-act-face span { top: 30px; left: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .rx-act-inner { transition-duration: .01ms; }
}