/* ==========================================================================
   Before & after — "The magic is in the edit." (home, section #the-edit)
   One drag-to-compare slider on every screen, glass-capsule handle.
   Images: images/before-after/raw-960|1440.webp, final-960|1440.webp (720×845 crop, 2× upscaled)
           images/before-after/layer-thumbs.webp (layers panel thumbnails, 8 stacked)
   Behaviour: assets/js/before-after.js
   ========================================================================== */
.bfa{--bfa-vh:100vh;--bfa-ease:cubic-bezier(.16,1,.3,1);--bfa-spec:linear-gradient(100deg,#FF7A3D 0%,#FF3D8B 32%,#9B5CFF 66%,#3D9BFF 100%)}
@supports (height:100svh){.bfa{--bfa-vh:100svh}}

.bfa__head{text-align:center;max-width:760px;margin:0 auto clamp(26px,3.4vw,40px)}
.bfa__head .display{text-wrap:balance}
.bfa__head .lead{margin:12px auto 0;max-width:48ch;text-wrap:pretty}

/* the photo is 720×845; its width is capped so the whole frame fits the screen height */
.bfa__stage{width:100%;margin:0 auto;max-width:min(600px,calc((var(--bfa-vh) - 150px) * .852));min-width:min(100%,260px)}
.bfa__gframe{position:relative;border-radius:var(--r-lg,28px);overflow:hidden;background:#0d0b12;isolation:isolate;box-shadow:0 30px 70px -30px rgba(40,10,60,.55),0 0 0 1px var(--line)}
.bfa__gframe::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1px;background:linear-gradient(135deg,#FF7A3D,#FF3D8B 40%,#9B5CFF 75%,#3D9BFF);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;z-index:7}

.bfa__cmp{--p:50%;position:relative;aspect-ratio:720/845;container-type:inline-size;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y;cursor:ew-resize}
.bfa__cmp img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none}
.bfa__before{clip-path:inset(0 calc(100% - var(--p)) 0 0);z-index:1}
.bfa__cmp input{position:absolute;left:0;bottom:0;width:100%;height:1px;opacity:0;margin:0;padding:0;border:0;pointer-events:none}
.bfa__cmp:has(input:focus-visible){outline:2px solid #9B5CFF;outline-offset:4px}

/* handle: hairline + frosted-glass capsule */
.bfa__line,.bfa__knob{position:absolute;left:var(--p);pointer-events:none}
.bfa__line{top:0;bottom:0;z-index:4;width:1.5px;margin-left:-.75px;background:rgba(255,255,255,.92);box-shadow:0 0 10px rgba(255,255,255,.35)}
.bfa__knob{top:50%;z-index:5;translate:-50% -50%;width:clamp(30px,6.4cqw,36px);height:clamp(64px,14cqw,80px);border-radius:999px;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(16px) saturate(1.8);backdrop-filter:blur(16px) saturate(1.8);border:1px solid rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 34px -12px rgba(0,0,0,.65);transition:scale .25s var(--bfa-ease),background .25s}
.bfa__knob svg{display:block;width:60%;height:auto}
.bfa__cmp.is-drag .bfa__knob{scale:1.06;background:rgba(255,255,255,.28)}
@media (hover:hover){.bfa__cmp:hover .bfa__knob{background:rgba(255,255,255,.26)}}

/* Before / After labels: frosted pills on the photo, fading as the divider passes */
.bfa__lab{position:absolute;bottom:clamp(12px,3.6cqw,22px);z-index:3;display:inline-flex;align-items:center;gap:clamp(6px,1.4cqw,9px);
  padding:clamp(7px,1.6cqw,10px) clamp(11px,2.6cqw,16px) clamp(7px,1.6cqw,10px) clamp(9px,2cqw,12px);border-radius:999px;
  background:rgba(16,16,18,.38);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(255,255,255,.18);
  color:#fff;font:600 clamp(11px,2.4cqw,14px)/1 var(--sans);letter-spacing:.01em;white-space:nowrap;pointer-events:none;box-shadow:0 8px 24px -12px rgba(0,0,0,.6);transition:opacity .25s ease}
.bfa__lab i{width:clamp(6px,1.4cqw,8px);aspect-ratio:1;border-radius:50%;flex:none}
.bfa__lab span{opacity:.62;font-weight:500}
.bfa__lab--b{left:clamp(12px,3.6cqw,22px);opacity:var(--ob,1)}
.bfa__lab--b i{background:#A1A1A6}
.bfa__lab--a{right:clamp(12px,3.6cqw,22px);opacity:var(--oa,1)}
.bfa__lab--a i{background:var(--bfa-spec)}

/* Layers panel: live text over the photo, so it stays sharp and is identical on both sides */
.bfa .lp{--u:calc(100cqw / 720);position:absolute;z-index:2;left:calc(457 * var(--u));top:calc(17 * var(--u));width:calc(246 * var(--u));height:calc(601 * var(--u));
  border-radius:calc(15 * var(--u));background:rgba(30,30,33,.9);-webkit-backdrop-filter:blur(calc(14 * var(--u))) saturate(1.2);backdrop-filter:blur(calc(14 * var(--u))) saturate(1.2);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 calc(14 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.35);color:#fff;font-family:var(--sans);pointer-events:none;overflow:hidden}
.bfa .lp__h{position:absolute;left:calc(17 * var(--u));right:calc(17 * var(--u));top:calc(14 * var(--u));display:flex;justify-content:space-between;align-items:center;height:calc(22 * var(--u))}
.bfa .lp__h b{font-size:calc(14.5 * var(--u));font-weight:600}
.bfa .lp__h span{font-size:calc(12.5 * var(--u));color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.bfa .lp ul{list-style:none;margin:0;padding:0;position:absolute;left:0;right:0;top:calc(50 * var(--u))}
.bfa .lp li{display:flex;align-items:center;height:calc(41.6 * var(--u));padding-left:calc(15 * var(--u));gap:calc(9 * var(--u));margin:0}
.bfa .lp li svg.e{width:calc(15 * var(--u));height:calc(15 * var(--u));flex:none;opacity:.92}
.bfa .lp .th{flex:none;width:calc(29 * var(--u));height:calc(37 * var(--u));border-radius:calc(3 * var(--u));background:url(/images/before-after/layer-thumbs.webp) 0 0/100% 800% no-repeat}
.bfa .lp .th--adj{background:none;display:grid;place-items:center}
.bfa .lp .th--adj svg{width:calc(17 * var(--u));height:calc(17 * var(--u))}
.bfa .lp li em{font-style:normal;font-size:calc(13.5 * var(--u));font-weight:500;letter-spacing:.005em;white-space:nowrap;color:#fff}
.bfa .lp li small{margin-left:auto;margin-right:calc(16 * var(--u));font-size:calc(11.5 * var(--u));color:rgba(255,255,255,.5)}

.bfa__acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:clamp(22px,3vw,32px)}
.bfa__acts .pill{margin-top:0}

/* Phones */
@media (max-width:600px){
  .bfa__acts .pill{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.bfa *{transition:none!important}}

/* ==========================================================================
   2026-10-21 "Raw / Real" layout: words left, photo right on wide screens.
   Big "Raw. / Real." type follows the slider (--raw set by before-after.js),
   the photo tilts flat as it scrolls in (--t). Phones: text, then the photo.
   ========================================================================== */
.bfa__big{margin:0;font:800 clamp(64px,10vw,150px)/.86 var(--display);letter-spacing:-.06em;color:var(--ink)}
.bfa__big span{display:block;transition:opacity .2s linear}
.bfa__raw{opacity:calc(.16 + var(--raw,.5) * .84)}
.bfa__real{opacity:calc(.16 + (1 - var(--raw,.5)) * .84)}
.bfa__real em{font-style:normal;background:var(--bfa-spec);-webkit-background-clip:text;background-clip:text;color:transparent}
.bfa__h{margin:22px 0 0;font:600 clamp(20px,2vw,26px)/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)}
.bfa__txt .lead{margin:14px 0 0;max-width:44ch;text-wrap:pretty}
.bfa__meter{display:flex;align-items:center;gap:14px;margin-top:22px;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.bfa__tr{flex:1;max-width:220px;height:3px;border-radius:3px;background:var(--line);position:relative}
.bfa__tr i{position:absolute;left:0;top:0;bottom:0;width:var(--pct,50%);border-radius:3px;background:var(--ink)}
.bfa--rr .bfa__acts{justify-content:flex-start;margin-top:26px}
.bfa--rr .bfa__stage{perspective:1400px;margin-top:clamp(28px,6vw,40px)}
.bfa--rr .bfa__cmp{transform:rotateX(calc(var(--t,0) * 12deg)) scale(calc(1 - var(--t,0) * .05));transform-origin:50% 0;will-change:transform}
@media (min-width:900px),(orientation:landscape) and (max-height:540px){
  .bfa__split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,6vw,88px);align-items:center}
  .bfa--rr .bfa__stage{width:min(500px,calc((var(--bfa-vh) - 140px) * .852));max-width:none;min-width:260px;margin:0}
  .bfa--rr .bfa__cmp{transform:rotateY(calc(var(--t,0) * -16deg)) rotateX(calc(var(--t,0) * 5deg)) scale(calc(1 - var(--t,0) * .06));transform-origin:30% 50%}
}
@media (orientation:landscape) and (max-height:540px){.bfa__big{font-size:clamp(48px,9vh,80px)}.bfa--rr .bfa__stage{width:calc((var(--bfa-vh) - 40px) * .852)}}
@media (prefers-reduced-motion:reduce){.bfa--rr .bfa__cmp{transform:none}}

/* ==========================================================================
   2026-10-21 "Flank" layout on wide screens: "Raw." on the before side of the
   photo, "Real." on the after side, the heading/text/buttons centred below.
   CSS only: the text wrappers become display:contents so their children sit
   on one grid. Phones and landscape phones keep the stacked/two-column layout.
   ========================================================================== */
@media (min-width:900px) and (min-height:541px){
  .bfa--rr .bfa__split{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:clamp(20px,3vw,48px);row-gap:0;align-items:center;max-width:1180px;margin:0 auto}
  .bfa--rr .bfa__txt,.bfa--rr .bfa__big{display:contents}
  .bfa--rr .bfa__raw,.bfa--rr .bfa__real{grid-row:1;font:800 clamp(56px,7.6vw,124px)/.86 var(--display);letter-spacing:-.06em}
  .bfa--rr .bfa__raw{grid-column:1;justify-self:end;text-align:right;color:var(--ink)}
  .bfa--rr .bfa__real{grid-column:3;justify-self:start}
  .bfa--rr .bfa__raw::after,.bfa--rr .bfa__real::after{display:block;margin-top:14px;font:600 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);-webkit-text-fill-color:var(--muted)}
  .bfa--rr .bfa__raw::after{content:"Before \2190"}
  .bfa--rr .bfa__real::after{content:"\2192  After"}
  .bfa--rr .bfa__stage{grid-row:1;grid-column:2;margin:0;width:min(440px,calc((var(--bfa-vh) - 180px) * .852));min-width:260px;max-width:none}
  .bfa--rr .bfa__h,.bfa--rr .bfa__txt .lead,.bfa--rr .bfa__acts{grid-column:1/-1;justify-self:center;text-align:center}
  .bfa--rr .bfa__h{grid-row:2;margin-top:clamp(26px,3vw,38px)}
  .bfa--rr .bfa__txt .lead{grid-row:3;margin:12px auto 0}
  .bfa--rr .bfa__meter{display:none}
  .bfa--rr .bfa__acts{grid-row:4;justify-content:center;margin-top:22px}
  .bfa--rr .bfa__cmp{transform:rotateX(calc(var(--t,0) * 10deg)) scale(calc(1 - var(--t,0) * .05));transform-origin:50% 0}
}

/* 2026-10-21 "Flank" on phones/tablets too: "Raw. | Real." side by side above the photo,
   heading, text and buttons centred below. Landscape phones keep the two-column layout. */
@media (max-width:899px) and (not ((orientation:landscape) and (max-height:540px))){
  .bfa--rr .bfa__split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(10px,3vw,20px);align-items:end}
  .bfa--rr .bfa__txt,.bfa--rr .bfa__big{display:contents}
  .bfa--rr .bfa__raw,.bfa--rr .bfa__real{grid-row:1;font:800 clamp(46px,14vw,92px)/.86 var(--display);letter-spacing:-.06em}
  .bfa--rr .bfa__raw{grid-column:1;justify-self:end;text-align:right;color:var(--ink)}
  .bfa--rr .bfa__real{grid-column:2;justify-self:start}
  .bfa--rr .bfa__raw::after,.bfa--rr .bfa__real::after{display:block;margin-top:10px;font:600 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);-webkit-text-fill-color:var(--muted)}
  .bfa--rr .bfa__raw::after{content:"Before \2190"}
  .bfa--rr .bfa__real::after{content:"\2192  After"}
  .bfa--rr .bfa__stage{grid-row:2;grid-column:1/-1;justify-self:center;margin-top:clamp(18px,5vw,28px)}
  .bfa--rr .bfa__h,.bfa--rr .bfa__txt .lead,.bfa--rr .bfa__acts{grid-column:1/-1;justify-self:center;text-align:center}
  .bfa--rr .bfa__h{grid-row:3;margin-top:24px}
  .bfa--rr .bfa__txt .lead{grid-row:4;margin:10px auto 0}
  .bfa--rr .bfa__meter{display:none}
  .bfa--rr .bfa__acts{grid-row:5;justify-content:center;margin-top:20px;width:100%}
}