/* JUN Aesthetic - Before/After + Gallery sections. Load AFTER css/style.css */
.ba-section,.jun-gallery{
  --sec-head:'Cinzel',Georgia,serif; --sec-body:'Poppins','Helvetica Neue',Arial,sans-serif;
  --c-olive-deep:var(--olive-deep,#545943); --c-brown:var(--brown,#2B2621); --c-ivory:var(--ivory,#F7F3EC); --c-beige:var(--beige,#EAE0CC);
  font-family:var(--sec-body);
}
/* ---------- BEFORE / AFTER ---------- */
.ba-section{background:linear-gradient(180deg,var(--c-olive-deep) 0%,var(--c-brown) 100%);padding:90px 6vw}
.ba-container{max-width:1200px;margin:0 auto}
.ba-header{text-align:center;margin-bottom:56px}
.ba-title{color:#fff;font-family:var(--sec-head);font-size:clamp(1.7rem,4vw,2.6rem);font-weight:500;letter-spacing:.02em;line-height:1.2;margin:0 0 14px}
.ba-subtitle{color:rgba(247,243,236,.75);font-size:1rem;max-width:520px;margin:0 auto;line-height:1.6}
.ba-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;max-width:980px;margin:0 auto}
@media(max-width:720px){.ba-grid{grid-template-columns:1fr;gap:24px}}
.ba-card{position:relative;width:100%;aspect-ratio:4/3;border-radius:14px;overflow:hidden;box-shadow:0 20px 40px -12px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.08);background:var(--c-olive-deep);user-select:none;cursor:ew-resize;touch-action:pan-y}
.ba-card--static{cursor:default}
.ba-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;pointer-events:none;display:block;-webkit-user-drag:none}
.ba-img-before{z-index:1}
.ba-img-after-wrap{position:absolute;top:0;left:0;width:50%;height:100%;overflow:hidden;z-index:2}
.ba-img-after-wrap .ba-img{max-width:none;width:200%}
.ba-divider{position:absolute;top:0;left:50%;width:3px;height:100%;background:#fff;transform:translateX(-50%);z-index:3;box-shadow:0 0 12px rgba(0,0,0,.4);pointer-events:none}
.ba-handle{position:absolute;top:50%;left:50%;width:46px;height:46px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);z-index:4;box-shadow:0 6px 18px rgba(0,0,0,.35);pointer-events:none}
.ba-handle::before,.ba-handle::after{content:'';position:absolute;top:50%;margin-top:-6px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent}
.ba-handle::before{left:10px;border-right:8px solid var(--c-brown)}
.ba-handle::after{right:10px;border-left:8px solid var(--c-brown)}
.ba-tag{position:absolute;top:16px;padding:6px 14px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;border-radius:30px;z-index:5;pointer-events:none}
.ba-tag-before{left:16px;background:rgba(43,38,33,.75);color:#fff;backdrop-filter:blur(4px)}
.ba-tag-after{right:16px;background:#fff;color:var(--c-brown)}
.ba-label{position:absolute;bottom:0;left:0;width:100%;padding:40px 18px 16px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.65));color:#fff;font-size:15px;font-weight:600;z-index:5;pointer-events:none}
.ba-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:#fff;font-size:11px;letter-spacing:.06em;padding:6px 14px;border-radius:100px;z-index:6;pointer-events:none;opacity:.9;transition:opacity .4s ease}
.ba-card.dragging .ba-hint{opacity:0}
.ba-cta{text-align:center;margin-top:52px}
.ba-btn{display:inline-block;background:var(--c-ivory);color:var(--c-brown);font-weight:600;font-size:15px;letter-spacing:.5px;text-decoration:none;padding:16px 40px;border-radius:50px;transition:transform .25s ease,box-shadow .25s ease;box-shadow:0 10px 25px -8px rgba(255,255,255,.3)}
.ba-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(255,255,255,.45);color:var(--c-brown)}
/* ---------- GALLERY ---------- */
.jun-gallery{padding:110px 6vw;background:var(--c-ivory)}
.jun-gallery .section-intro h2{font-family:var(--sec-head);font-weight:500;letter-spacing:.02em}
.jun-gallery .section-intro p,.jun-gallery .eyebrow{font-family:var(--sec-body)}
.lightbox{position:fixed;inset:0;z-index:9999;background:rgba(20,17,14,.92);display:none;align-items:center;justify-content:center;padding:24px}
.lightbox.open{display:flex}
.lightbox-img{max-width:min(92vw,1100px);max-height:86vh;border-radius:8px;object-fit:contain}
.lightbox-close,.lightbox-nav{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:50%;width:46px;height:46px;font-size:1.4rem;cursor:pointer}
.lightbox-close{top:20px;right:20px}
.lightbox-nav.prev{left:20px;top:50%;transform:translateY(-50%)}
.lightbox-nav.next{right:20px;top:50%;transform:translateY(-50%)}
.lightbox-close:hover,.lightbox-nav:hover{background:rgba(255,255,255,.25)}

/* Fix: images with the clip-reveal effect never became visible in some browsers */
.clip-reveal.reveal{ clip-path: inset(0 0 0 0); }

/* Real <img> tags that fill a frame (used by the About image) */
.has-img{ position:relative; background:var(--beige,#EAE0CC); }
.fill-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- GALLERY: every photo shown in full, uncropped ---------- */
.jun-gallery-grid{max-width:1240px;margin:56px auto 0;column-count:3;column-gap:16px}
.jun-gallery-item{position:relative;display:block;width:100%;margin:0 0 16px;padding:0;border:0;border-radius:10px;overflow:hidden;cursor:zoom-in;background:var(--c-beige);break-inside:avoid;-webkit-column-break-inside:avoid}
.jun-gallery-item img{display:block;width:100%;height:auto;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.jun-gallery-item:hover img,.jun-gallery-item:focus-visible img{transform:scale(1.04)}
@media(max-width:860px){.jun-gallery{padding:80px 6vw}.jun-gallery-grid{column-count:2;column-gap:10px}.jun-gallery-item{margin-bottom:10px}}

/* ---------- "YOUR SKIN HAS A STORY": clear video beside the text ---------- */
.consultation-cta--video .leaf-decor-cta{display:none}
.cta-split{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:minmax(0,44%) 1fr;gap:clamp(32px,6vw,80px);align-items:center;text-align:left}
.cta-video{position:relative;z-index:2;justify-self:center;width:100%;max-width:calc(72vh * var(--ar,.5625));aspect-ratio:var(--ar,.5625);border-radius:18px;overflow:hidden;background:var(--brown,#2B2621);box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.cta-video video{display:block;width:100%;height:100%;object-fit:contain;background:transparent}
.cta-video-sound{position:absolute;right:12px;bottom:12px;z-index:3;border:0;border-radius:100px;padding:8px 14px;font:500 12px/1 var(--sec-body,'Poppins',sans-serif);letter-spacing:.04em;color:#fff;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);cursor:pointer}
.cta-video-sound:hover{background:rgba(0,0,0,.75)}
.cta-copy{position:relative;z-index:2;max-width:520px}
.cta-split.no-video{grid-template-columns:1fr;text-align:center}
.cta-split.no-video .cta-copy{margin:0 auto}
.cta-split.no-video .section-eyebrow{justify-content:center !important}
@media(max-width:860px){
  .cta-split{grid-template-columns:1fr;text-align:center;gap:36px}
  .cta-video{max-width:min(320px,calc(60vh * var(--ar,.5625)))}
  .cta-copy{margin:0 auto}
  .cta-split .section-eyebrow{justify-content:center !important}
}