/* ---------- Fonts ---------- */
@font-face{font-family:'FixelDisplay';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/fixel-display-600.woff2) format('woff2')}
@font-face{font-family:'FixelDisplay';font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/fixel-display-700.woff2) format('woff2')}
@font-face{font-family:'FixelText';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/fixel-text-400.woff2) format('woff2')}
@font-face{font-family:'FixelText';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/fixel-text-500.woff2) format('woff2')}
@font-face{font-family:'FixelText';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/fixel-text-600.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/montserrat-600.woff2) format('woff2')}

/* ---------- Tokens ---------- */
:root{
  --white:#FFFFFF;
  --grey:#F3F3F5;
  --ink:#000000;
  --pink:#FF00AA;
  --pink-hover:#C9008F;
  --muted:#89898A;
  --faint:rgba(0,0,0,.36);
  --line:rgba(0,0,0,.12);
  --glass:rgba(255,255,255,.62);
  --display:'FixelDisplay','FixelText',-apple-system,'Helvetica Neue',sans-serif;
  --text:'FixelText',-apple-system,'Helvetica Neue',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--text);
  background:var(--white);
  color:var(--ink);
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--pink);color:#fff}

/* ---------- Layout (1920 reference) ---------- */
.wrap{width:min(82.3%,1580px);margin-inline:auto}
.wide{width:min(93.75%,1800px);margin-inline:auto}
.center{text-align:center}
.pink{color:var(--pink)}
section{scroll-margin-top:110px}

/* ---------- Type scale ---------- */
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-0.03em;line-height:1.04;color:var(--ink)}
.t-hero{font-size:clamp(40px,5.21vw,100px);line-height:1;letter-spacing:-0.035em}
.t-96{font-size:clamp(36px,5vw,96px);line-height:1.04;letter-spacing:-0.035em}
.t-80{font-size:clamp(32px,4.17vw,80px);line-height:1.05;letter-spacing:-0.035em}
.t-64{font-size:clamp(28px,3.33vw,64px);line-height:1.08}
.t-60{font-size:clamp(27px,3.13vw,60px);line-height:1.08}
.t-56{font-size:clamp(26px,2.92vw,56px);line-height:1.1}
.body-lg{font-family:var(--text);font-weight:400;font-size:clamp(17px,1.46vw,28px);line-height:1.45;letter-spacing:-0.015em;color:var(--muted)}
.body-md{font-family:var(--text);font-weight:400;font-size:clamp(16px,1.25vw,24px);line-height:1.45;letter-spacing:-0.015em;color:var(--muted)}
.body-sm{font-family:var(--text);font-weight:400;font-size:clamp(14px,1.04vw,20px);line-height:1.5;letter-spacing:-0.01em;color:var(--muted)}
.ink{color:var(--ink)}
.semib{font-weight:600}
.u{text-decoration:underline;text-underline-offset:2px;color:var(--ink);font-weight:500;transition:color .2s}
.u:hover{color:var(--pink)}
@media(max-width:700px){.bd{display:none}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:'Montserrat',var(--text);font-weight:600;font-size:clamp(14px,.83vw,16px);line-height:1;
  height:clamp(44px,2.5vw,48px);padding:0 clamp(22px,1.46vw,28px);
  border-radius:10px;border:1px solid transparent;
  overflow:hidden;white-space:nowrap;
  cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s,color .25s,border-color .25s;
  will-change:transform;
}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn-txt{position:relative;display:block;overflow:hidden}
.btn-txt span{display:block;line-height:1.5;transition:transform .4s cubic-bezier(.76,0,.24,1)}
.btn-txt span:last-child{position:absolute;left:0;top:100%;width:100%;text-align:center}
.btn:hover .btn-txt span{transform:translateY(-100%)}
.btn-pink{background:var(--pink);color:var(--white)}
.btn-pink:hover{background:var(--pink-hover)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:rgba(0,0,0,.4)}
.btn-dark{background:var(--ink);color:var(--white)}
.btn-dark:hover{background:#262626}
.btn .btn-ic{width:26px;height:26px;border-radius:7px;flex:none}
.btn-row{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}

.chip{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;letter-spacing:.02em;
  padding:9px 16px;border-radius:999px;
  background:var(--glass);border:1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 1px 12px rgba(0,0,0,.05);
}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--ink)}

/* ---------- Nav (unchanged, to be updated later) ---------- */
.nav{
  position:fixed;z-index:50;
  top:clamp(12px,1.6vh,22px);
  left:clamp(16px,4.5vw,84px);right:clamp(16px,4.5vw,84px);
  border-radius:18px;
}
.nav::before{
  content:'';position:absolute;inset:0;border-radius:18px;z-index:-1;
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5);
  background:rgba(255,255,255,.42);
  box-shadow:0 8px 28px rgba(0,0,0,.08);
  opacity:1;
}
.nav-inner{
  padding:10px 12px 10px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.wordmark{display:flex;align-items:center;flex-shrink:0}
.nav .logo-img{height:22px}
.logo-img{height:26px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:28px;font-weight:600;font-size:14px}
.nav-links a{color:var(--ink);transition:color .2s}
.nav-links a:hover{color:var(--pink)}
.nav-inner>.btn{height:42px;font-size:14px;padding:0 24px;gap:10px}

/* Hamburger toggle — hidden on desktop, shown once nav-links no longer fit.
   Below that width the section links move into .nav-mobile; the "Enter the
   giveaway" CTA is left out of the dropdown on purpose (her call) — the
   page's own giveaway buttons further down cover anyone on a small screen
   anyway. */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;flex:none;background:transparent;border:none;cursor:pointer;
}
.nav-toggle-bar{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s,opacity .25s}
.nav-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.nav.open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .nav-toggle-bar:nth-child(2){opacity:0}
.nav.open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-mobile{display:none;flex-direction:column;padding:0 20px 14px;gap:2px}
.nav-mobile a{padding:13px 2px;font-weight:600;font-size:15px;color:var(--ink);border-top:1px solid var(--line);transition:color .2s}
.nav-mobile a:first-child{border-top:none}
.nav-mobile a:hover{color:var(--pink)}

/* 1040px, not the previous 820px: with five links plus the CTA, the full row
   (logo + links + button) needs just over 1010px before it wraps onto a
   second line inside .nav-links — measured directly, not guessed. */
@media(max-width:1040px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:flex}
  .nav-inner{padding:8px 8px 8px 18px}
  .nav.open .nav-mobile{display:flex}
}
/* Logo is pinned to its own aspect ratio (flex-shrink:0 on .wordmark, above) so
   it never squishes — but at its 22px desktop-mobile height it's wider than a
   narrow phone has room for next to the hamburger. Shrink it (keeping ratio)
   and tighten the gap instead of letting either squish or get pushed off. */
@media(max-width:400px){
  .nav-inner{gap:10px}
  .nav .logo-img{height:17px}
}

/* ---------- Hero (untouched) ---------- */
.hero{
  position:sticky;top:0;height:100svh;min-height:640px;
  overflow:hidden;background:#E4E4EA;
}
.sheet{
  position:relative;z-index:5;
  background:var(--white);
  border-radius:60px 60px 0 0;
  overflow:hidden;
  box-shadow:0 -24px 60px rgba(0,0,0,.14);
}
.hero-img{
  position:absolute;inset:0;z-index:0;
  background:url(../images/hero-bg.jpg) 50% 14%/cover no-repeat;
}
.fog{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;pointer-events:none}
@media (prefers-reduced-motion:reduce){.fog{display:none}}
/* Touch can't "wipe a circle" the way a cursor can — even scaling the radius to
   the hero's own size (see main.js) never made the gesture read on a phone.
   Skip the effect there entirely: show the sharp photo (same crop fog-source.webp
   was always loaded for) straight away instead of a permanently fogged one. */
@media (pointer:coarse){
  .hero-img{background-image:url(../images/fog-source.webp)}
  .fog,.hero-hint{display:none}
}
.hero-hint{
  position:absolute;bottom:40px;z-index:3;
  right:calc(clamp(16px,4.5vw,84px) + 12px);
  opacity:0;animation:fadeIn 1s ease 1.4s forwards;
}
.hero-hint .chip{
  background:rgba(255,255,255,.7);border-color:rgba(255,255,255,.5);
  padding:13px 22px;font-size:15px;font-weight:600;
}
@keyframes fadeIn{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-hint{animation:none;opacity:1}}


/* ---------- Top grey band (blocks 2–4) ---------- */
.band-top{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(64px,7.81vw,150px);
  border-radius:60px 60px 0 0;
  background:var(--grey);
  padding-bottom:clamp(64px,7.81vw,150px);
}

/* Block 2 — intro */
.intro{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-top:clamp(40px,3.13vw,60px);
  gap:clamp(28px,2.6vw,50px);
  align-self:stretch;
}
.intro .sub strong{color:var(--ink);font-weight:400}
.circle-photo{width:min(52vw,1000px);min-width:min(78vw,420px);margin-top:clamp(20px,3.1vw,60px)}
.circle-photo img{width:100%;height:auto;display:block;pointer-events:none}

/* Block 3 — philosophy card */
.phil{
  position:relative;
  background:var(--white) url(../images/philosophy-bg.webp) center/cover no-repeat;
  border-radius:30px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  min-height:clamp(430px,43vw,826px);
  padding:clamp(56px,4.7vw,90px) 6%;
}
.phil .paw{width:clamp(56px,4.17vw,80px);height:auto;margin-bottom:clamp(48px,4.7vw,90px)}
.phil h3{font-weight:600;letter-spacing:-0.03em;line-height:1.06}
.phil .after{margin-top:clamp(34px,3.4vw,66px);font-weight:400;font-size:clamp(16px,1.25vw,24px);letter-spacing:-0.015em;color:var(--ink)}

/* Block 4 — product + scent */
.prod{align-self:stretch}
.prod-grid{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:center;gap:clamp(24px,3vw,58px);
}
.prod-eyebrow{font-family:var(--display);font-weight:700;font-size:clamp(19px,1.67vw,32px);letter-spacing:-0.02em;margin-bottom:clamp(14px,1.3vw,25px)}
.prod-title{margin-bottom:clamp(18px,1.82vw,35px)}
.prod-copy{color:var(--ink);font-weight:400}
.prod-img{width:100%;height:auto}

.scent-head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:clamp(28px,2.6vw,50px);margin-top:clamp(56px,6.77vw,130px)}
.scent-head p{text-align:right}
@media(min-width:1280px){.scent-head p{white-space:nowrap}}
.scent-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.3vw,25px)}
.scent-card{
  background:var(--white);border-radius:30px;
  padding:clamp(24px,1.98vw,38px);
  display:flex;flex-direction:column;gap:12px;
  min-height:clamp(240px,17.2vw,330px);
}
.scent-card .k{font-weight:400;font-size:clamp(14px,1.04vw,20px);letter-spacing:-0.01em;color:var(--muted)}
.scent-card .v{font-weight:600;font-size:clamp(17px,1.46vw,28px);letter-spacing:-0.02em;line-height:1.3;color:var(--ink)}
.scent-card .thumbs{display:flex;align-items:center;margin-top:auto;padding-top:26px}
.scent-card .thumbs .th{
  width:clamp(52px,3.75vw,72px);height:clamp(52px,3.75vw,72px);border-radius:50%;overflow:hidden;
  background:var(--grey);border:1px solid var(--white);
  margin-left:2px;flex:none;
  opacity:0;transform:translateY(16px) scale(.8);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);
}
.scent-card .thumbs .th:first-child{margin-left:0}
.scent-card .thumbs .th img{width:100%;height:100%;object-fit:cover;display:block}
.scent-card.in .thumbs .th{opacity:1;transform:none}
.scent-card .thumbs .th:nth-child(2){transition-delay:.12s}
.scent-card .thumbs .th:nth-child(3){transition-delay:.24s}
.scent-card .thumbs .th:nth-child(4){transition-delay:.36s}
.scent-card:hover .thumbs .th{transform:translateY(-6px)}
.scent-card:hover .thumbs .th:nth-child(2){transition-delay:.05s}
.scent-card:hover .thumbs .th:nth-child(3){transition-delay:.1s}
.scent-card:hover .thumbs .th:nth-child(4){transition-delay:.15s}

/* ---------- Photo cards ---------- */
.img-card{border-radius:30px;overflow:hidden;background:var(--grey)}
.img-card img{width:100%;height:auto;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.img-card.reveal img,.reveal .img-card img{transform:scale(1.1)}
.img-card.reveal.in img,.reveal.in .img-card img{transform:scale(1)}
.img-card.reveal.in:hover img,.reveal.in .img-card:hover img{transform:scale(1.045)}

/* Block 5 — moment (white) */
.moment{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:clamp(56px,5.94vw,114px);
  padding-block:clamp(84px,7.81vw,150px);
  background:var(--white);
}
.moment-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(24px,2.08vw,40px)}
.pack-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.56vw,30px);width:100%}
.pack-grid figure{display:flex;flex-direction:column;gap:clamp(16px,1.3vw,25px)}
/* Fixed to the photo's own aspect ratio (1600x1067) rather than flex-stretched to
   fill the row: stretching let a longer caption (the Care Guide link added a third
   line) eat into the video's height and shrink it shorter than the photo. */
.pack-video .img-card{aspect-ratio:1600/1067;min-height:0}
.pack-video video{width:100%;height:100%;object-fit:cover;display:block}
.pack-cap{display:flex;gap:clamp(10px,.83vw,16px);align-items:flex-start;text-align:left}
.pack-cap .num{font-weight:600;font-size:clamp(16px,1.25vw,24px);color:var(--muted);letter-spacing:-0.01em;line-height:1.35}
.pack-cap .cap-t{font-weight:600;font-size:clamp(16px,1.25vw,24px);color:var(--pink);letter-spacing:-0.01em;line-height:1.35}
.pack-cap .cap-s{margin-top:6px}
.pack-cap .cap-s a{text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.pack-cap .cap-s a:hover{color:var(--pink)}

/* Block 6 — bottles / giveaway (grey) */
.bottles{background:var(--grey);position:relative;overflow:hidden}
.bottles .wrap{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  align-items:center;gap:clamp(24px,3vw,58px);
  padding-block:clamp(60px,4.7vw,90px);
  min-height:clamp(560px,68.9vw,1323px);
}
.bottles-copy{display:flex;flex-direction:column;align-items:flex-start;position:relative;z-index:1}
/* .btn-row's own content-fit width quietly equals the full column width whenever its
   buttons don't fit on one line (a browser fit-content quirk, not just the widest wrapped
   line) — invisible everywhere else .btn-row is used because those columns are already
   center-aligned, but it makes the buttons visibly re-center away from this column's
   left-aligned text once they wrap on narrow screens. */
.bottles .btn-row{justify-content:flex-start}
.bottles h2{margin-bottom:clamp(20px,2.08vw,40px)}
.bottles .sub{margin-bottom:clamp(26px,2.6vw,50px)}
.bottles .legal{margin-top:clamp(64px,9vw,170px);font-size:clamp(13px,.94vw,18px)}
.bottles .legal p+p{margin-top:6px}
.bottles .legal{max-width:min(100%,640px)}
.bottles .legal-terms{font-size:clamp(11px,.74vw,14px);line-height:1.55}
.bottles .legal-terms p+p,.bottles .legal-terms ul+p{margin-top:5px}
/* mini vertical timeline: each step's own padding-bottom gives the gap below its
   text, so the white space reads as equal even though the steps wrap to different
   numbers of lines (forcing equal row heights kept the circles evenly spaced, but
   left uneven-looking gaps under whichever steps had less text) */
.bottles .vt{--n:clamp(20px,1.5vw,26px);position:relative;list-style:none;margin:14px 0 10px;padding:0;display:grid}
.bottles .vt li{position:relative;padding:0 0 clamp(12px,1vw,18px) calc(var(--n) + 12px)}
.bottles .vt li:last-child{padding-bottom:0}
.bottles .vt li:not(:last-child)::before{content:'';position:absolute;left:calc(var(--n)/2);transform:translateX(-50%);top:calc(var(--n)/2);height:100%;width:1.5px;background:repeating-linear-gradient(180deg,rgba(0,0,0,.35) 0 5px,transparent 5px 10px)}
.bottles .vt i{position:absolute;left:0;top:0;z-index:1;width:var(--n);height:var(--n);border-radius:50%;background:var(--grey);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);font-style:normal;font-weight:600;font-size:clamp(9px,.68vw,12px);display:flex;align-items:center;justify-content:center}
.bottles .vt li:first-child i{background:var(--pink);color:#fff;box-shadow:none}
.bottles .vt p{margin:0;padding-top:calc((var(--n) - 1.5em)/2);font-size:inherit;line-height:1.5;color:var(--ink)}
.bottles .legal-terms .vt+p{margin-top:0}
.bottles .legal .legal-links{margin-top:clamp(16px,1.5vw,28px)}
.bottles .legal .lead{color:var(--ink);font-weight:400;font-size:clamp(13px,.94vw,18px);line-height:1.6}
.bottles .legal strong{font-weight:600;color:var(--ink)}
/* The photo bleeds past the section edges, exactly like the design crop — anchored to
   the bottom-right corner at a fixed percentage of the section's own height, not
   stretched to match the text column. The section's overflow:hidden crops the bleed. */
.bottles-img{position:absolute;right:-1.3%;bottom:-.3%;top:auto;margin:0;height:96.5%;width:auto;max-width:none;display:block;-webkit-mask-image:none;mask-image:none}

/* Block 7 — story (white) */
.story{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:clamp(44px,4.17vw,80px);
  padding-block:clamp(84px,7.81vw,150px);
  background:var(--white);
}
.story-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,4.7vw,90px);align-items:start}
.story-right p+p{margin-top:clamp(16px,1.3vw,25px)}
.fact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.3vw,25px);width:100%}
.fact-card{
  background:var(--grey);border-radius:24px;padding:clamp(22px,1.67vw,32px);
  min-height:clamp(210px,15.6vw,300px);display:flex;flex-direction:column;
}
.fact-tag{align-self:flex-start;background:var(--white);color:var(--pink);font-weight:600;font-size:clamp(13px,.83vw,16px);letter-spacing:-0.01em;padding:10px 18px;border-radius:999px}
.fact-card p{
  margin-top:auto;
  font-weight:500;font-size:clamp(15px,1.15vw,22px);
  letter-spacing:-0.015em;line-height:1.4;color:var(--ink);
}
@media(min-width:901px){.fact-card p{min-height:2.8em}}
.story-close{text-align:center;color:var(--ink);font-weight:500;font-size:clamp(19px,1.88vw,36px);letter-spacing:-0.02em;line-height:1.3;padding-inline:24px;max-width:46em;margin-inline:auto}
.story-cta{margin-top:calc(clamp(44px,4.17vw,80px)*-0.4)}

/* Block 8 — befriend (grey rounded container) */
.befriend{background:var(--white);padding-bottom:clamp(24px,2.6vw,50px)}
.befriend-box{
  background:var(--grey);border-radius:clamp(30px,3.13vw,60px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(64px,7.29vw,140px) clamp(20px,3.13vw,60px);
  gap:clamp(26px,2.6vw,50px);
}
.befriend-box .sub{max-width:1100px}
.app-cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.04vw,20px);
  width:min(65.42vw,1256px);margin-top:clamp(10px,1.3vw,25px);
}
.app-card{
  background:var(--white);border-radius:20px;padding:clamp(18px,1.56vw,30px);
  aspect-ratio:298/332;min-height:220px;
  display:flex;flex-direction:column;text-align:left;
}
.app-card .t{font-weight:600;font-size:clamp(17px,1.35vw,26px);letter-spacing:-0.015em;color:var(--ink)}
.app-card .s{margin-top:4px;font-size:clamp(16px,1.25vw,24px);line-height:1.3;letter-spacing:-0.015em;color:var(--muted)}
.app-card .ic{width:49.4%;max-width:150px;height:auto;margin:auto auto 0}
.befriend-box .btn{margin-top:clamp(14px,2.08vw,40px)}

/* ---------- Footer ---------- */
footer{background:var(--white);padding:clamp(36px,3.13vw,60px) 0 clamp(32px,2.9vw,56px)}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-bottom:clamp(24px,2.08vw,40px)}
.foot-wordmark{height:clamp(18px,1.25vw,24px);width:auto}
.foot-links{display:flex;align-items:center;gap:clamp(20px,2.08vw,40px);font-weight:500;font-size:clamp(15px,1.04vw,20px);flex-wrap:wrap}
.foot-links a{color:#3c3c40;transition:color .2s}
.foot-links a:hover{color:var(--pink)}
.foot-links a.strong{font-weight:700;color:var(--ink)}
.link-roll{display:inline-block}
.link-roll .btn-txt span:last-child{color:var(--pink)}
.link-roll:hover .btn-txt span{transform:translateY(-100%)}
.foot-legal{border-top:1px solid var(--line);padding-top:clamp(24px,2.08vw,40px);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:clamp(13px,.94vw,18px);color:var(--muted);line-height:1.6}
.foot-legal .right{text-align:right}
.foot-legal .u{color:var(--muted);font-weight:400}
.foot-legal .foot-docs a{white-space:nowrap}
.foot-legal .u:hover{color:var(--pink)}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .prod-grid{grid-template-columns:1fr;gap:32px}
  .prod-img{order:2;max-width:640px;margin-inline:auto}
  .scent-cards{grid-template-columns:1fr}
  .scent-head{grid-template-columns:1fr}
  .scent-head p{text-align:left;white-space:normal}
  .pack-grid{grid-template-columns:1fr}
  .pack-video .img-card{flex:none}
  .bottles .wrap{grid-template-columns:1fr;min-height:0;padding-bottom:0}
  .bottles-img{position:static;bottom:auto;height:auto;width:100%;max-width:480px;margin:28px auto 0}
  .bottles .legal-terms{font-size:12.5px}
  .bottles .vt i{font-size:10px}
  .story-grid{grid-template-columns:1fr;gap:20px}
  .fact-cards{grid-template-columns:1fr}
  .fact-card{min-height:190px}
  .app-cards{grid-template-columns:repeat(2,1fr);width:100%}
  .app-card{aspect-ratio:auto;min-height:0}
  .app-card .ic{margin-top:clamp(44px,7.5vw,76px)}
  .foot-legal{flex-direction:column}
  .foot-legal .right{text-align:left}
}
@media(max-width:560px){
  .app-cards{grid-template-columns:1fr}
  .app-card{padding:24px}
  .app-card .ic{margin-top:32px;width:41%}
}

/* ---------- Pink cursor ---------- */
@media (pointer:fine){
  .has-cursor, .has-cursor a, .has-cursor button{cursor:none}
  .cursor-dot{
    position:fixed;left:0;top:0;z-index:99;pointer-events:none;
    width:12px;height:12px;border-radius:50%;
    background:var(--pink);
    transform:translate(-50%,-50%);
    transition:width .25s ease,height .25s ease,background .25s ease,opacity .3s;
    opacity:0;
  }
  .cursor-ring{
    position:fixed;left:0;top:0;z-index:98;pointer-events:none;
    width:38px;height:38px;border-radius:50%;
    border:1.5px solid rgba(255,0,170,.45);
    transform:translate(-50%,-50%);
    transition:width .25s ease,height .25s ease,border-color .25s,opacity .3s;
    opacity:0;
  }
  .cursor-visible .cursor-dot,.cursor-visible .cursor-ring{opacity:1}
  .cursor-hover .cursor-dot{width:40px;height:40px;background:rgba(255,0,170,.28)}
  .cursor-hover .cursor-ring{width:56px;height:56px;border-color:rgba(255,0,170,.7)}
}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}