/* Local scroll animation with the original reference layout and POND'S page branding. */
:root{
  /* measured with APCA (size- and weight-dependent threshold) against the pearl air of the reel:
     ink 86.8, ink2 84.3, vtext 80.8 — the button violet (67.9) is for fills only, never for text */
  --air:#F4E8EE; --ink:#24121F; --ink2:#301A2C; --vtext:#4A2346; --violet:#7A4B78; --violet-hi:#9A6497; --lilac:#C49BC1;
  --line:rgba(36,18,31,.16); --line-2:rgba(122,75,120,.5);
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Manrope",Helvetica,Arial,sans-serif;
  --expo:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--air);color:var(--ink);font-family:var(--sans);font-weight:500;
  font-size:1.125rem;line-height:1.65;text-rendering:optimizeLegibility}
::selection{background:var(--violet);color:#fff}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--violet-hi);outline-offset:4px}

#film{position:fixed;inset:0;width:100%;height:100%;height:100lvh;display:block;z-index:0;background:var(--air);pointer-events:none}

.veil{position:fixed;inset:0;z-index:60;display:grid;place-content:center;gap:1.4rem;justify-items:center;
  background:var(--air);transition:opacity .6s var(--expo),visibility .6s}
.veil.gone{opacity:0;visibility:hidden}
.veil b{font-family:var(--serif);font-weight:500;letter-spacing:.42em;text-indent:.42em;font-size:1.7rem;color:var(--ink)}
.veil .bar{width:min(190px,46vw);height:2px;background:var(--line)}
.veil .bar span{display:block;height:100%;width:0;background:var(--violet);transition:width .4s var(--expo)}
.veil small{font-size:.875rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink2)}

.prog{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--lilac),var(--violet));z-index:50}

/* ── glass nav (chrome only) ── */
.nav{position:fixed;top:calc(1.1rem + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:46;max-width:calc(100vw - 1.6rem)}
.pill{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.6rem);padding:.5rem .5rem .5rem 1.5rem;border-radius:100px;
  background:rgba(246,245,250,.6);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.75)}
.pill .brand{font-family:var(--serif);font-weight:600;font-size:1.2rem;letter-spacing:.28em;color:var(--ink);white-space:nowrap}
.pill a.link{font-size:.95rem;font-weight:700;letter-spacing:.04em;color:var(--ink);transition:color .3s;white-space:nowrap}
.pill a.link:hover{color:var(--violet)}
@media(max-width:760px){.pill a.link{display:none}.pill{padding:.42rem .42rem .42rem 1.15rem;gap:1rem}.pill .brand{font-size:1.1rem}}
@media(pointer:coarse){.pill{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(246,245,250,.92)}}

/* ── the button: violet from the silk, with its own soft light. The halo breathes on
   opacity only (Law 1) and stops for reduced motion. ── */
.btn,.pbook{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
  border-radius:100px;font-weight:600;color:#fff;letter-spacing:.04em;
  background:linear-gradient(135deg,var(--violet-hi) 0%,var(--violet) 62%,#5F3A5E 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 28px -10px rgba(95,58,94,.7);
  transition:transform .25s var(--expo),box-shadow .35s}
.btn{min-height:56px;padding:0 2rem;font-size:.95rem}
.pbook{min-height:42px;padding:0 1.25rem;font-size:.875rem}
.btn::before,.pbook::before{content:"";position:absolute;inset:-7px;border-radius:inherit;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(226,160,205,.6),rgba(226,160,205,0));filter:blur(10px);
  opacity:.55;animation:halo 3.6s ease-in-out infinite}
.btn:hover,.pbook:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 16px 36px -12px rgba(95,58,94,.8)}
.btn:hover::before,.pbook:hover::before{opacity:1;animation:none}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.btn[disabled]::before{display:none}
@keyframes halo{0%,100%{opacity:.4}50%{opacity:.85}}
.tlink{font-size:1rem;font-weight:700;color:var(--vtext);padding-bottom:3px;border-bottom:2px solid rgba(122,75,120,.35);transition:border-color .35s}
.tlink:hover{border-color:var(--violet)}

/* ── reveals ── */
.ln{display:block;overflow:hidden;padding-bottom:.08em}
.ln>i{display:block;font-style:inherit;transform:translateY(115%);transition:transform 1.2s var(--expo) var(--d,0s)}
.in .ln>i,.ready .hero .ln>i{transform:none}
.rise{opacity:0;transform:translateY(16px);transition:opacity 1.1s ease var(--d,.05s),transform 1.2s var(--expo) var(--d,.05s)}
.in .rise,.ready .hero .rise{opacity:1;transform:none}
.hint{opacity:0;transition:opacity 1s var(--expo) var(--d,.7s)}
.ready .hint{opacity:1}
.ready.scrolled .hint{opacity:0;pointer-events:none;transition:opacity .5s ease}

/* ── type: nothing under 14 px (APCA has no passing contrast below it) ── */
.eyebrow{font-size:.875rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--vtext)}
.display{font-family:var(--serif);font-weight:500;line-height:1.04;letter-spacing:-.01em;color:var(--ink)}
.display em{font-style:italic;font-weight:400}
.body{color:var(--ink2);font-size:1.12rem;font-weight:600;max-width:28em}

/* ── scenes: transparent, the film shows through. Desktop: a left column centred in the
   clean air in front of her profile (the silk now lives behind her, on the right). ── */
.scene{position:relative;z-index:2;min-height:100svh;display:flex;align-items:center;
  padding:6.5rem clamp(1.5rem,3.5vw,4.5rem) 3rem}
.col{width:min(25rem,21vw)}   /* the jar sits centred and large: the column stays left of it (measured at 1440x900: jar from x=0.31) */
.rule{width:56px;height:2px;background:var(--line-2);margin-bottom:1.4rem}
.scene .eyebrow{margin-bottom:1rem}
.scene .display{font-size:clamp(2.2rem,3.1vw,3.4rem);margin-bottom:1.1rem}

.hero .eyebrow{margin-bottom:1.3rem}
.hero .title{font-size:clamp(2.6rem,3.9vw,4.4rem);margin-bottom:1.3rem}
.hero .sub{font-size:1.14rem;font-weight:600;color:var(--ink);max-width:25em}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem;margin-top:2.2rem}
.scroll-hint{position:absolute;left:clamp(1.5rem,6vw,6.5rem);bottom:clamp(1.6rem,5vh,2.6rem);
  display:flex;align-items:center;gap:.7rem;font-size:.875rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.scroll-hint i{width:2px;height:34px;background:linear-gradient(var(--violet),transparent);animation:drop 2.2s var(--expo) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.tlist{border-top:1px solid var(--line);margin-top:.4rem}
.trow{display:grid;grid-template-columns:2.4rem 1fr;gap:.25rem 1rem;padding:1.05rem 0;border-bottom:1px solid var(--line)}
.trow .num{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--vtext);line-height:1.55}
.trow h3{font-family:var(--serif);font-weight:500;font-size:1.4rem;line-height:1.2;color:var(--ink)}
.trow p{grid-column:2;font-size:1.05rem;font-weight:600;color:var(--ink);line-height:1.45}
.trow .meta{grid-column:2;font-size:.875rem;font-weight:700;letter-spacing:.08em;color:var(--vtext);margin-top:.2rem}

.clinic .pull{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(2rem,3.1vw,3rem);line-height:1.18;color:var(--ink)}
.clinic .small{margin-top:1.6rem;font-size:.875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.book .hours{margin-top:1.3rem;font-size:.875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}

.foot{position:relative;z-index:2;min-height:92svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 clamp(1.5rem,6vw,6.5rem) clamp(1.8rem,4vh,2.6rem);
  background:linear-gradient(to bottom,rgba(244,232,238,0) 0%,rgba(244,232,238,.9) 30%,var(--air) 55%)}
.foot-in{width:100%;max-width:76rem;margin:0 auto}
.fmain{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(2rem,5vw,4rem);padding-bottom:2.4rem;border-bottom:1px solid var(--line)}
.flogo{font-family:var(--serif);font-weight:600;font-size:1.8rem;letter-spacing:.3em;margin-bottom:1.2rem}
.ftag{color:var(--ink2);font-size:1.02rem;line-height:1.7;max-width:26em}
.fcol h4{font-size:.875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--vtext);margin-bottom:1.1rem}
.fcol a,.fcol button{display:block;font-size:1.02rem;font-weight:500;color:var(--ink);padding:.3rem 0;text-align:left;transition:color .3s}
.fcol a:hover,.fcol button:hover{color:var(--violet)}
.fcol p{font-size:1rem;line-height:1.7;color:var(--ink2);margin-bottom:.8rem}
.fbar{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center;padding-top:1.5rem}
.fbar span,.flegal a{font-size:.875rem;font-weight:600;color:var(--ink2)}
.flegal{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem}
@media(max-width:820px){.fmain{grid-template-columns:1fr 1fr;gap:2rem 1.5rem}.fmain>div:first-child{grid-column:1/-1}}

/* ── phones: the 9:16 reel keeps her head in the LOWER part of the frame (top of the hair
   at ~0.37 of the height, measured), so every block sits in the clean air at the TOP. ── */
@media(max-aspect-ratio:85/100){
  .scene{align-items:flex-start;padding:calc(5.4rem + env(safe-area-inset-top,0px)) 1.3rem 2rem}
  .col{width:100%;max-width:30rem}
  .rule,.hero .eyebrow,.scroll-hint{display:none}
  .scene .eyebrow{margin-bottom:.4rem}
  .hero .title{font-size:clamp(2.2rem,9.6vw,2.7rem);margin-bottom:.55rem}
  .hero .sub{font-size:1.06rem;line-height:1.45;color:var(--ink)}
  .scene .display{font-size:clamp(1.95rem,8.4vw,2.4rem);margin-bottom:.5rem}
  .body{font-size:1.06rem;line-height:1.5;color:var(--ink)}
  .actions{margin-top:.9rem;gap:1.1rem}
  .btn{min-height:50px;padding:0 1.5rem;font-size:.92rem}
  .tlist{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;border-top:0;margin-top:.2rem}
  .trow{display:block;padding:.5rem 0;border-bottom:1px solid var(--line)}
  .trow .num,.trow p{display:none}
  .trow h3{font-size:1.06rem;line-height:1.2}
  .trow .meta{font-size:.875rem;letter-spacing:.02em;margin-top:.15rem}
  .clinic .pull{font-size:clamp(1.5rem,6.6vw,1.9rem)}
  .clinic .small{margin-top:.7rem}
  .book .hours{display:none}
  .foot{padding-left:1.3rem;padding-right:1.3rem}
  /* on the 9:16 reel the product climbs into the upper half in these beats: headline only */
  .hero .sub,#texture .body,#line .body{display:none}
}
@media(prefers-reduced-motion:reduce){.btn::before,.pbook::before{animation:none}}

/* ── the line: a section of its own on the pearl air (the film has ended above it). Not a
   glass box over the film — content on its own field. ── */
.collection{position:relative;z-index:2;padding:9rem clamp(1.5rem,6vw,6.5rem) 5rem;
  background:linear-gradient(to bottom,rgba(244,232,238,0),rgba(244,232,238,.94) 12%,var(--air) 22%)}
.chead{max-width:44rem;margin:0 auto 3.2rem;text-align:center}
.chead .display{font-size:clamp(2.6rem,4vw,4rem);margin:.8rem 0 1rem}
.chead .body{margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.8rem);max-width:80rem;margin:0 auto}
.pcard{display:flex;flex-direction:column;align-items:center;text-align:center}
.pframe{width:100%;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:#F1E4EB}
.pframe img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--expo)}
@media(hover:hover){.pcard:hover .pframe img{transform:scale(1.035)}}
.pinfo{margin-top:1.1rem}
.pinfo h3{font-family:var(--serif);font-weight:500;font-size:1.45rem;line-height:1.15;color:var(--ink)}
.pinfo .pnote{font-size:.95rem;color:var(--ink2);margin-top:.3rem}
.pinfo .pprice{display:block;font-size:1.1rem;font-weight:700;color:var(--vtext);margin-top:.35rem}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-aspect-ratio:85/100){.collection{padding:6rem 1.3rem 4rem}.chead{margin-bottom:2rem;text-align:left}.chead .display{font-size:2.3rem}}

@media(prefers-reduced-motion:reduce){.ln>i{transform:none}.rise{opacity:1;transform:none}.scroll-hint i{animation:none}}

/* The supplied POND'S photographs: preserve the entire product in each view. */
.pframe img{object-fit:contain;padding:7%;}
.pframe{background:radial-gradient(ellipse at 45% 35%,#FCF6F8,#F1E4EB 75%);}
.skip-link{position:fixed;left:1rem;top:1rem;z-index:70;padding:.65rem 1rem;background:var(--air);border:1px solid var(--line);transform:translateY(-170%);}
.skip-link:focus{transform:none;}
.nojs .ln>i{transform:none;}
.nojs .rise,.nojs .hint{opacity:1;transform:none;}
.nojs .veil{display:none;}
/* Keep the compact landscape hero clear of the bottom scroll cue. */
@media(max-height:650px) and (min-aspect-ratio:85/100){
  .hero .eyebrow,.hero .title{margin-bottom:.8rem;}
  .hero .sub{font-size:1.04rem;line-height:1.5;}
  .hero .actions{margin-top:1.4rem;gap:1rem;}
  .scroll-hint{display:none;}
}
#dbg{position:fixed;left:10px;bottom:10px;z-index:99;font:11px/1.55 ui-monospace,monospace;color:#9FEED6;background:rgba(0,0,0,.74);padding:9px 12px;border:1px solid #333;border-radius:7px;white-space:pre;display:none;pointer-events:none;}