/* "Real results" before/after section (reusable). Needs port.css (vars, .kicker, .h2, .reveal).
   Placeholders live in img/results/: see README-PHOTOS.md for what to replace. */
.rr{position:relative}
.port .sec.rr, .port.sec.rr{background:linear-gradient(180deg,var(--bk2),#140b0b 60%,var(--bk2));border-top:1px solid var(--line)}
.rr--nested{padding:clamp(56px,8vw,96px) 0 0}
.rr .head{margin-bottom:clamp(28px,4vw,44px)}
.port .rr__row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.port .rr__card{display:flex;flex-direction:column;background:#171717;border:1px solid var(--line);border-radius:var(--r);padding:12px 12px 20px;box-shadow:0 40px 80px -40px #000;transition:border-color .4s}
.port .rr__card:hover{border-color:rgba(255,0,0,.55)}
.port .rr__pics{display:grid;grid-template-columns:1fr 1fr;gap:4px;border-radius:12px;overflow:hidden;margin-bottom:18px}
.port .rr__pic{margin:0;position:relative;aspect-ratio:3/4;background:#2a2a2a}
.port .rr__pic img{width:100%;height:100%;object-fit:cover}
.port .rr__lab{position:absolute;left:8px;bottom:8px;font:700 .62rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:6px 8px;border-radius:99px;background:rgba(0,0,0,.72);color:#fff}
.port .rr__pic--after .rr__lab{background:var(--red)}
.port .rr__cap{font:400 1.35rem/1.15 var(--disp);text-transform:uppercase;letter-spacing:.01em;margin:0 6px 10px}
.port .rr__q{color:var(--g);font-size:.9rem;margin:0 6px}
.rr .ph{white-space:normal;font:inherit;font-weight:700;letter-spacing:0;text-transform:none;font-size:.82em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.port .rr__cap .ph{font-family:var(--sans);font-size:.6em;vertical-align:.2em}
.port .rr__note{margin:22px 0 0}
.port .rr__dots{display:none}
/* phone: horizontal swipe carousel */
@media(max-width:759px){
 .port .rr__row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:14px;margin-inline:-20px;padding:0 20px 4px;scroll-padding-inline:20px}
 .port .rr__row::-webkit-scrollbar{display:none}
 .port .rr__card{flex:0 0 86%;scroll-snap-align:start}
 .port .rr__dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
 .port .rr__dots i{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.25);transition:width .3s var(--ease),background .3s}
 .port .rr__dots i.on{width:22px;background:var(--red)}
}
.rr .rr__cap .ph, .rr .rr__q .ph{text-transform:none;letter-spacing:0}
.rr--guides{padding:clamp(40px,6vw,64px) 0 clamp(40px,5vw,56px)}