/* Real Makhoi hero: centred copy, real cut-out dancers round the fire */
.hero{position:relative;overflow:hidden;min-height:640px;display:flex;align-items:center;justify-content:center}
.hero-bg{position:absolute;inset:0;background:var(--rm-spice) center/cover no-repeat;opacity:.34;z-index:0}
.hero-scrim{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 44% 56% at 50% 50%,rgba(30,31,26,.95) 0%,rgba(30,31,26,.90) 45%,rgba(30,31,26,.70) 100%)}
.hero .wrap{position:relative;z-index:3;text-align:center;max-width:620px}
.hero-mark{width:118px;height:118px;border-radius:50%;background:var(--rm-logo) center/cover no-repeat;margin:0 auto 22px;box-shadow:0 10px 34px rgba(0,0,0,.55)}
.hero h1,.hero .kicker,.hero .lead,.hero p{text-align:center}
.hero .cta-row,.hero .btns{justify-content:center!important}
.hero .wrap>*{margin-left:auto;margin-right:auto}
/* every figure shares ONE radius + ONE duration, offset by exactly 1/5 of the cycle:
   locks them 72deg apart permanently, so they can never bunch up or overlap. */
.dance-ring{position:absolute;inset:0;z-index:2;pointer-events:none}
.dancer{position:absolute;top:50%;left:50%;width:var(--rm-cw);height:var(--rm-ch);margin:calc(var(--rm-ch) / -2) 0 0 calc(var(--rm-cw) / -2);transform-origin:center center;animation:orbit 40s linear infinite}
.dancer i{display:block;width:100%;height:100%;background-image:var(--rm-sheet);background-repeat:no-repeat;background-size:calc(var(--rm-cw) * 5) var(--rm-ch);filter:drop-shadow(0 10px 20px rgba(0,0,0,.6));transform-origin:50% 88%}
.p1{animation-delay:0s}.p2{animation-delay:-8s}.p3{animation-delay:-16s}.p4{animation-delay:-24s}.p5{animation-delay:-32s}
.f1 i{background-position:0 0}
.f2 i{background-position:calc(var(--rm-cw) * -1) 0}
.f3 i{background-position:calc(var(--rm-cw) * -2) 0}
.f4 i{background-position:calc(var(--rm-cw) * -3) 0}
.f5 i{background-position:calc(var(--rm-cw) * -4) 0}
.f1 i{animation:dance-a 2.4s ease-in-out infinite}
.f2 i{animation:dance-b 3.1s ease-in-out infinite -.6s}
.f3 i{animation:dance-c 2.7s ease-in-out infinite -1.2s}
.f4 i{animation:dance-b 2.2s ease-in-out infinite -1.8s}
.f5 i{animation:dance-a 3.4s ease-in-out infinite -2.4s}
@keyframes orbit{
 0%{transform:rotate(0deg) translateX(var(--r,340px)) rotate(0deg)}
 25%{transform:rotate(90deg) translateX(calc(var(--r,340px) * .80)) rotate(-90deg)}
 50%{transform:rotate(180deg) translateX(var(--r,340px)) rotate(-180deg)}
 75%{transform:rotate(270deg) translateX(calc(var(--r,340px) * .80)) rotate(-270deg)}
 100%{transform:rotate(360deg) translateX(var(--r,340px)) rotate(-360deg)}}
@keyframes dance-a{
 0%,100%{transform:translateY(0) rotate(-5deg) scale(1,1)}
 25%{transform:translateY(-13px) rotate(3deg) scale(.97,1.05)}
 50%{transform:translateY(-2px) rotate(6deg) scale(1.04,.95)}
 75%{transform:translateY(-15px) rotate(-2deg) scale(.98,1.04)}}
@keyframes dance-b{
 0%,100%{transform:translateY(-3px) rotate(6deg) scale(1.02,.98)}
 30%{transform:translateY(-16px) rotate(-6deg) scale(.96,1.06)}
 60%{transform:translateY(0) rotate(2deg) scale(1.05,.94)}
 80%{transform:translateY(-9px) rotate(-3deg) scale(1,1.02)}}
@keyframes dance-c{
 0%,100%{transform:translateY(-6px) rotate(-3deg) scale(1,1.03)}
 20%{transform:translateY(0) rotate(7deg) scale(1.06,.94)}
 55%{transform:translateY(-18px) rotate(-7deg) scale(.95,1.07)}
 80%{transform:translateY(-4px) rotate(4deg) scale(1.02,.98)}}
@media(max-width:1200px){.dancer{--r:250px;transform:scale(.75)}}
@media(max-width:760px){.dance-ring{display:none}.hero{min-height:auto}}
@media(prefers-reduced-motion:reduce){.dancer,.dancer i{animation:none}.dance-ring{display:none}}
/* fynbos, curving INWARD toward the ring */
.frond{position:absolute;top:50%;z-index:2;width:110px;height:340px;margin-top:-170px;background:var(--rm-frond) center/contain no-repeat;opacity:.9;pointer-events:none}
.frond.l{left:26px;transform:scaleX(-1)}
.frond.r{right:26px}
@media(max-width:1200px){.frond{display:none}}
.lock .em{width:44px;height:44px;flex:none;border-radius:50%;background:var(--rm-logo) center/cover no-repeat}

/* product cards: lift off the background */
.product-card{box-shadow:0 8px 22px rgba(30,31,26,.16),0 2px 6px rgba(30,31,26,.10);border:1px solid rgba(30,31,26,.08)!important}
.product-card:hover{box-shadow:0 18px 40px rgba(30,31,26,.26),0 4px 10px rgba(30,31,26,.14)!important;transform:translateY(-5px)}

/* view-info button + modal */
.btn-info{width:100%;margin-top:8px;background:transparent;border:1.5px solid var(--sage);color:var(--sage-d,#55613a);
  font-family:sans-serif;font-weight:700;font-size:.86rem;padding:9px;border-radius:8px;cursor:pointer}
.btn-info:hover{background:var(--sage);color:#fff}
.pm-back{position:fixed;inset:0;background:rgba(20,21,17,.72);backdrop-filter:blur(3px);z-index:200;display:none;
  align-items:center;justify-content:center;padding:18px}
.pm-back.on{display:flex}
.pm{background:var(--cream,#f4efe4);max-width:640px;width:100%;max-height:88vh;overflow-y:auto;border-radius:16px;
  box-shadow:0 30px 70px rgba(0,0,0,.5);position:relative}
.pm-top{background:var(--char,#1e1f1a);color:var(--cream,#f4efe4);padding:22px 26px;border-radius:16px 16px 0 0;
  border-bottom:3px solid var(--ochre,#b98a3c)}
.pm-top h3{font-size:1.4rem;font-weight:400;margin:0 30px 4px 0}
.pm-top .bot{font-family:sans-serif;font-size:.78rem;letter-spacing:1px;text-transform:uppercase;color:var(--ochre,#b98a3c)}
.pm-x{position:absolute;top:14px;right:16px;background:none;border:0;color:var(--cream,#f4efe4);font-size:1.7rem;
  line-height:1;cursor:pointer;opacity:.75}
.pm-x:hover{opacity:1}
.pm-b{padding:22px 26px 26px}
.pm-b h4{font-family:sans-serif;font-size:.74rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--sage-d,#55613a);
  margin:18px 0 6px}
.pm-b h4:first-child{margin-top:0}
.pm-b p{margin:0;font-size:.97rem;line-height:1.62}
.pm-warn{background:#fdf3e6;border-left:4px solid #c0392b;border-radius:0 8px 8px 0;padding:12px 16px;margin-top:16px}
.pm-warn h4{color:#a5341f;margin-top:0}
.pm-price{font-family:sans-serif;font-weight:800;color:var(--ochre-d,#9c722c);font-size:1.15rem;margin-top:2px}
.pm-dis{font-family:sans-serif;font-size:.76rem;color:var(--muted,#6f6a5c);border-top:1px dashed var(--line,#e0d6c2);
  padding-top:12px;margin-top:20px;line-height:1.5}
.pm-cta{display:block;text-align:center;background:#128C4A;color:#fff;text-decoration:none;font-family:sans-serif;
  font-weight:700;padding:13px;border-radius:9px;margin-top:18px}
.pm-cta:hover{background:#0e6e3a}

.badge-hazard{background:#fdecea;border:1px solid #e6b0aa;border-left:4px solid #c0392b;color:#922b21;
  font-family:sans-serif;font-weight:700;font-size:.72rem;line-height:1.35;padding:7px 9px;border-radius:0 6px 6px 0;margin-top:9px}