/* FENARA — Collection (index.html) page styles */
/* The hero is CREAM now, so the first paint must be cream too — an obsidian
   html background here was the black flash before the hero painted. */
html{background:#FAF8F5}
body{background:#FAF8F5;font-weight:400;letter-spacing:.01em;line-height:1.55}
/* ---------- TYPE ---------- */
.eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;color:var(--obsidian);opacity:.78}
.eyebrow-num{display:flex;gap:16px;align-items:baseline}
.eyebrow-num em{font-style:normal;font-size:11px;letter-spacing:.32em;opacity:.4;font-weight:500;font-variant-numeric:tabular-nums;color:inherit}
.tag{font-size:10px;letter-spacing:.4em;text-transform:uppercase;font-weight:600}
.h-display{font-weight:300;letter-spacing:-.02em;line-height:.95}
.h-italic{font-style:italic;font-weight:300}
.body{font-size:15px;line-height:1.7;color:var(--obsidian);opacity:.92;font-weight:400}
.body.lg{font-size:17px;line-height:1.75}
.rule{height:1px;background:currentColor;opacity:.15;width:60px;display:block}


/* ---------- CONCIERGE ---------- */
.concierge{
  position:fixed;right:24px;bottom:24px;z-index:120;
  display:flex;flex-direction:column;align-items:flex-end;gap:14px;
  pointer-events:none; /* container is click-through; only the bubble/open popup catch clicks */
}
.concierge .pop{
  background:var(--cream);color:var(--obsidian);
  border:1px solid rgba(43,41,38,.1);
  border-radius:18px;padding:18px 20px 16px;width:300px;
  box-shadow:0 30px 60px -20px rgba(43,41,38,.25);
  transform-origin:bottom right;transform:scale(.92) translateY(8px);opacity:0;pointer-events:none;
  transition:opacity .3s, transform .3s cubic-bezier(.2,.7,0,1);
}
.concierge.open .pop{opacity:1;transform:none;pointer-events:auto}.concierge .pop .ph{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.concierge .pop .av{width:30px;height:30px;border-radius:50%;background:#0F0E0D;position:relative;overflow:hidden;flex-shrink:0}
.concierge .pop .av::before{content:"";position:absolute;inset:0;background:url('assets/swirl.jpg') center/cover no-repeat;mix-blend-mode:screen;opacity:.9}
.concierge .pop .pn{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.concierge .pop .ps{font-size:10px;letter-spacing:.04em;opacity:.55;margin-top:2px;text-transform:none}
.concierge .pop .msg{font-size:13.5px;line-height:1.55;margin:8px 0 14px}
.concierge .pop .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.concierge .pop .chip{font-size:10.5px;letter-spacing:.06em;border:1px solid rgba(43,41,38,.15);padding:7px 11px;border-radius:999px;cursor:pointer;background:transparent;font-family:inherit;transition:all .25s}
.concierge .pop .chip:hover{background:var(--obsidian);color:var(--cream);border-color:var(--obsidian)}
.concierge .pop .send{display:flex;align-items:center;gap:8px;border-top:1px solid rgba(43,41,38,.1);padding-top:10px}
.concierge .pop input{flex:1;border:none;background:transparent;font-family:inherit;font-size:13px;outline:none;color:inherit;padding:6px 2px}
.concierge .pop input::placeholder{opacity:.5}
.concierge .pop .go{background:var(--obsidian);color:var(--cream);border:none;border-radius:999px;padding:6px 10px;cursor:pointer;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.concierge .bubble{
  pointer-events:auto;
  display:flex;align-items:center;gap:10px;
  background:var(--obsidian);color:var(--cream);
  border:1px solid var(--obsidian);
  padding:12px 18px 12px 14px;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  box-shadow:0 18px 40px -16px rgba(43,41,38,.4);
  transition:transform .3s, background .3s;
}
.concierge .bubble:hover{transform:translateY(-2px)}
.concierge .bubble .av{width:26px;height:26px;border-radius:50%;background:#000;position:relative;overflow:hidden;flex-shrink:0}
.concierge .bubble .av::before{content:"";position:absolute;inset:0;background:url('assets/swirl.jpg') center/cover no-repeat;mix-blend-mode:screen;opacity:.95}
.concierge .bubble .dot{position:absolute;right:10px;top:10px;width:7px;height:7px;border-radius:50%;background:#C9A961;box-shadow:0 0 0 3px rgba(201,169,97,.25)}

/* ---------- HERO ---------- */
.hero{
  position:sticky;top:0;z-index:1;height:100vh;min-height:720px;background:#000;color:#fff;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
/* In category-detail mode there's no min-height:100vh sibling below to give the
   sticky hero room to release, so it stays pinned and overlaps the detail
   content. Drop the pin there — hero just scrolls away normally, and the
   detail view (back button etc.) appears cleanly below the fixed nav. */
body.detail-mode .hero{position:relative}
/* Notes by Founders is a top-level collection moment — hide it while a
   category's full detail view is open (body.detail-mode), show it again on
   the top-level collection grid. */
body.detail-mode .founders{display:none}
.hero .swirl-wrap{
  position:absolute;
  width:128vmin;height:128vmin;
  left:50%;top:50%;margin-left:-64vmin;margin-top:-64vmin;
  border-radius:50%;overflow:hidden;
}
.hero .swirl{
  position:absolute;inset:0;
  background:url('assets/swirl-hero.jpg') center/cover no-repeat;
  /* Present from first paint alongside the header. The image is a BASELINE
     (non-progressive) JPEG, so it decodes straight to its final dark swirl
     with no bright low-res pass — no grey/white flash. */
  opacity:.4;
  animation:slowSpin 80s linear infinite;
}
.hero .swirl-wrap::after{
  content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center, transparent 0%, transparent 30%, #000 80%);
  pointer-events:none;
}
@keyframes slowSpin{to{transform:rotate(360deg)}}
.hero-inner{position:relative;z-index:2;text-align:center;padding:0 24px;display:flex;flex-direction:column;align-items:center;gap:34px}
.hero .logo-hero{width:min(60vw,640px);opacity:1;aspect-ratio:1304/352}
.hero .logo-hero img{width:100%;height:100%;display:block;opacity:1;object-fit:contain}
.hero .tagline{font-size:14px;letter-spacing:.45em;text-transform:uppercase;font-weight:400;opacity:.85;white-space:nowrap}
/* entrance animation — only applied when .replay class is set.
   Sequence: the swirl fades up first, THEN the wordmark + tagline reveal over it. */
@keyframes heroSwirlIn{0%{opacity:0}100%{opacity:.4}}
/* No blur filter here: on the bright wordmark over black, blur() spread the
   strokes into a white haze that peaked mid-reveal (opacity rising while still
   blurred) and read as a white flash. Clean fade + rise + subtle scale instead. */
@keyframes heroLogoIn{0%{opacity:0;transform:translateY(24px) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes heroTagIn{0%{opacity:0;transform:translateY(10px);letter-spacing:.64em}100%{opacity:.85;transform:translateY(0);letter-spacing:.45em}}
@keyframes heroHintIn{0%{opacity:0}100%{opacity:.55}}
.hero.replay .logo-hero img{animation:heroLogoIn 1.8s .3s cubic-bezier(.22,.61,.18,1) both}
.hero.replay .tagline{animation:heroTagIn 1.2s .9s cubic-bezier(.22,.61,.18,1) both}
.hero.replay .hint{animation:heroHintIn 1s 1.8s cubic-bezier(.22,.61,.18,1) both}
.hero .tagline::before,.hero .tagline::after{content:"—";opacity:.5;margin:0 18px}
.hero .hint{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:.55;
  animation:none;opacity:.55;
}
.hero .hint i{display:block;width:1px;height:42px;background:linear-gradient(to bottom,#fff,transparent);animation:drip 2.4s ease-in-out infinite}
@keyframes drip{0%,100%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1)}}

/* ---------- SECTIONS ---------- */
section{position:relative}

/* ---------- BRAND INTRO ---------- */
.intro{
  background:var(--cream);padding:150px 6vw;position:relative;overflow:hidden;
}
.intro .swirl-bg{
  position:absolute;right:-20%;top:-20%;width:90%;aspect-ratio:1;
  background:url('assets/swirl-hero.svg') center/cover no-repeat;
  filter:invert(1);mix-blend-mode:multiply;opacity:.14;
  pointer-events:none;
}
.intro-grid{position:relative;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 2fr;gap:80px;align-items:start}
.intro h2{
  font-size:clamp(40px,5.2vw,76px);font-weight:300;letter-spacing:-.025em;line-height:1.05;
}
.intro h2 i{font-style:italic;color:var(--teal);font-weight:300}
.intro .positioning{margin-top:42px;max-width:560px;font-size:17px;line-height:1.75;opacity:.92}

/* ---------- FEEL (5 pillars — single-viewport editorial) ---------- */
.feel{
  background:#0F0E0D;color:var(--cream);
  min-height:100vh;padding:120px 6vw 80px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
}
.feel::before{
  content:"";position:absolute;left:-30%;top:10%;width:80%;aspect-ratio:1;
  background:url('assets/swirl.jpg') center/cover no-repeat;
  mix-blend-mode:screen;opacity:.08;filter:blur(2px);
  pointer-events:none;animation:slowSpin 220s linear infinite;
}
.feel .top{max-width:1280px;margin:0 auto 40px;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;position:relative}
.feel .top h2{font-size:clamp(34px,4.2vw,60px);font-weight:300;letter-spacing:-.025em;line-height:1.05;margin-top:18px}
.feel .top h2 i{font-style:italic;color:#C9A961;font-weight:300}
.feel .top .lead{max-width:380px;font-size:13.5px;line-height:1.7;opacity:.86;align-self:end}
.feel .eyebrow{color:var(--cream)}
.feel .eyebrow-num em{color:var(--cream)}

/* asymmetric editorial grid — equal-size pillars */
.pillars{
  max-width:1280px;margin:0 auto;width:100%;flex:1;position:relative;
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;
  max-height:520px;
}
.pillar{
  position:relative;overflow:hidden;border-radius:6px;
  background:rgba(250,248,245,.04);border:1px solid rgba(250,248,245,.08);
  padding:30px 26px;display:flex;flex-direction:column;justify-content:flex-start;
  transition:transform .6s cubic-bezier(.2,.7,0,1), background .4s;
  cursor:default;min-height:0;
}
.pillar:nth-child(odd){background:rgba(201,169,97,.06)}
.pillar:hover{transform:translateY(-4px);background:rgba(250,248,245,.07)}
.pillar .orb{
  position:absolute;background:url('assets/swirl.jpg') center/cover no-repeat;
  mix-blend-mode:screen;pointer-events:none;
  right:-30%;top:-25%;width:110%;aspect-ratio:1;opacity:.28;
  transition:transform 1.2s cubic-bezier(.2,.7,0,1), opacity .6s;
}
.pillar:nth-child(2) .orb{left:-30%;top:auto;bottom:-25%;right:auto;opacity:.22}
.pillar:nth-child(3) .orb{right:-25%;top:auto;bottom:-25%;opacity:.26}
.pillar:nth-child(4) .orb{left:-25%;top:-30%;right:auto;opacity:.22}
.pillar:nth-child(5) .orb{right:-30%;bottom:-25%;top:auto;opacity:.28}
.pillar:hover .orb{transform:scale(1.08) rotate(8deg);opacity:.4}

.pillar .lead-row{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
.pillar .num{font-size:10px;letter-spacing:.32em;opacity:.5;font-weight:500;font-variant-numeric:tabular-nums}
.pillar .pip{width:7px;height:7px;border-radius:50%;background:#C9A961;opacity:.65}
.pillar h3{font-weight:400;font-size:clamp(22px,2.2vw,28px);letter-spacing:.04em;line-height:1;text-transform:uppercase;position:relative;z-index:2;margin:98px 0 0}
.pillar .copy{position:relative;z-index:2;font-size:12.5px;line-height:1.65;opacity:.88;margin-top:14px}

/* no per-card overrides — all 5 are equal */

/* ---------- EIGHT WEEKS — swirl maturation ---------- */
.cure{
  background:#EDE6E8;padding:130px 6vw;position:relative;overflow:hidden;
}
.cure .head{max-width:1280px;margin:0 auto 56px;display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:end}
.cure .head h2{font-size:clamp(40px,5.2vw,80px);font-weight:300;letter-spacing:-.025em;line-height:1;margin-top:24px}
.cure .head h2 i{font-style:italic;color:var(--teal);font-weight:300}
.cure .head .lead{font-size:16px;line-height:1.75;opacity:.92;max-width:520px;align-self:end}

/* swirl portraits on a curved line */
.weeks{
  position:relative;max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:repeat(6,1fr);gap:0;align-items:end;
  padding:24px 0 72px;
}
.weeks::before{
  content:"";position:absolute;left:6%;right:6%;top:50%;height:1px;
  background:repeating-linear-gradient(to right,rgba(43,41,38,.25) 0 6px,transparent 6px 12px);
  pointer-events:none;
}
.week{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;
  padding:0 6px;justify-content:flex-end;
}
.week .disc-zone{
  width:100%;height:170px;display:flex;align-items:flex-end;justify-content:center;
}
.week .disc{
  position:relative;border-radius:50%;overflow:hidden;aspect-ratio:1;
  flex-shrink:0;max-width:100%;
  background:#0F0E0D;
  box-shadow:0 18px 40px -20px rgba(43,41,38,.4);
  transition:transform .6s cubic-bezier(.2,.7,0,1);
}
.week:hover .disc{transform:scale(1.06)}
.week .disc::before{
  content:"";position:absolute;inset:0;
  background:url('assets/swirl.jpg') center/cover no-repeat;
  mix-blend-mode:screen;
}
.week .disc::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(250,248,245,.18);pointer-events:none;
}

/* progressive maturation: size grows, swirl gets more saturated/visible */
.w1 .disc{width:64px;background:#ADC8C8}
.w1 .disc::before{opacity:.3;filter:blur(2px)}
.w2 .disc{width:78px;background:#7EAAAA}
.w2 .disc::before{opacity:.48;filter:blur(1.2px)}
.w3 .disc{width:94px;background:#508888}
.w3 .disc::before{opacity:.62;filter:blur(.6px)}
.w4 .disc{width:112px;background:#336666}
.w4 .disc::before{opacity:.76}
.w5 .disc{width:132px;background:#225050}
.w5 .disc::before{opacity:.88}
.w6 .disc{width:160px;background:#1B4D4D}
.w6 .disc::before{opacity:1}
.w6 .disc{box-shadow:0 28px 60px -20px rgba(27,77,77,.55),0 0 0 1px rgba(27,77,77,.35)}

.week .meta{text-align:center;display:flex;flex-direction:column;gap:6px}
.week .lbl{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;font-weight:500;opacity:.5}
.week .n{font-weight:300;font-size:28px;letter-spacing:-.02em;line-height:1;color:var(--obsidian);font-variant-numeric:tabular-nums}
.week.w6 .n{color:var(--teal);font-weight:400}
.week.w6 .lbl{color:var(--teal);opacity:.9}

.week .tick{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;opacity:.6;margin-top:6px;width:100%;min-height:14px;text-align:center;line-height:1.4;white-space:nowrap}
.week.w1 .tick::after{content:"Saponification"}
.week.w2 .tick::after{content:"Evaporation"}
.week.w3 .tick::after{content:"Hardening"}
.week.w4 .tick::after{content:"pH balances"}
.week.w5 .tick::after{content:"Scent settles"}
.week.w6 .tick::after{content:"Cured";color:var(--teal);opacity:1}

.cure .quote{max-width:760px;margin:60px auto 0;text-align:center;font-size:clamp(22px,2.4vw,32px);font-weight:300;font-style:italic;line-height:1.45;color:var(--obsidian)}
.cure .quote em{font-style:normal;color:var(--teal)}
.cure .cite{text-align:center;margin-top:28px;font-size:10px;letter-spacing:.32em;text-transform:uppercase;opacity:.5}
.cure .develops{max-width:1100px;margin:8px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:64px;align-items:start}
.cure .develops .dp{display:flex;flex-direction:column;gap:16px;padding-top:24px;border-top:1px solid rgba(27,77,77,.22)}
.cure .develops .dp .rule{display:none}
.cure .develops .dp h3{font-weight:400;font-size:22px;letter-spacing:-.012em;line-height:1.25;color:var(--obsidian)}
.cure .develops .dp h3 em{font-style:normal;color:var(--teal)}
.cure .develops .dp p{font-size:13.5px;line-height:1.74;color:var(--obsidian);opacity:.9;margin:0}

/* ---------- PRODUCTS ---------- */
.products{
  background:var(--cream);padding:130px 0 140px;position:relative;overflow:hidden;
}
.products .head{padding:0 6vw;max-width:1280px;margin:0 auto 72px;display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:end}
.products .head h2{font-size:clamp(40px,5.2vw,80px);font-weight:300;letter-spacing:-.025em;line-height:1;margin-top:24px}
.products .head h2 i{font-style:italic;color:var(--teal);font-weight:300}
.products .head .lead{max-width:380px;font-size:14px;line-height:1.75;opacity:.9;align-self:end}

.bar-grid{
  padding:0 6vw;max-width:1400px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.bar{
  position:relative;min-height:520px;border-radius:4px;
  perspective:1700px;
  transition:transform .5s cubic-bezier(.2,.7,0,1);
}
.bar:hover{transform:translateY(-6px)}
.bar-inner{
  position:relative;width:100%;height:100%;min-height:520px;
  transition:transform .85s cubic-bezier(.6,.04,.18,1);transform-style:preserve-3d;
}
.bar.flipped .bar-inner{transform:rotateY(180deg)}
.bar-face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:4px;overflow:hidden;background:var(--alabaster);
  padding:42px 28px 36px;display:flex;flex-direction:column;gap:24px;
}
.bar-back{transform:rotateY(180deg);justify-content:space-between;cursor:pointer}
.bar .swatch{
  width:100%;aspect-ratio:1.1/1;border-radius:2px;position:relative;overflow:hidden;
  background:#ddd;
  display:flex;align-items:center;justify-content:center;
}
.bar .swatch::before{
  content:"";position:absolute;inset:0;
  background:url('assets/swirl.jpg') center/cover no-repeat;
  mix-blend-mode:overlay;opacity:.55;
}
.bar .swatch::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(0,0,0,.1));
}
.bar .swatch .sl{
  position:relative;z-index:2;font-size:10px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;color:#fff;mix-blend-mode:difference;opacity:.6;
}

.bar.cool .swatch{background:linear-gradient(135deg,#A8C3C7,#4F7378)}
.bar.tropic .swatch{background:linear-gradient(135deg,#E8D9C0,#B89572)}
.bar.noir .swatch{background:linear-gradient(135deg,#3A3A3D,#0C0C0E)}
.bar.green .swatch{background:linear-gradient(135deg,#9CAE93,#4D5F47)}

.bar .num{font-size:10px;letter-spacing:.32em;text-transform:uppercase;font-weight:500;opacity:.4;font-variant-numeric:tabular-nums}
.bar h3{font-weight:400;font-size:24px;letter-spacing:-.005em;line-height:1.1}
.bar .notes{font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.7;font-weight:500}
.bar .desc{font-size:13px;line-height:1.65;opacity:.9;margin-top:8px}
.bar .more{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid rgba(43,41,38,.1);padding-top:18px;font-size:10px;letter-spacing:.32em;text-transform:uppercase;font-weight:500;
  cursor:pointer;width:100%;background:transparent;border-left:none;border-right:none;border-bottom:none;font-family:inherit;color:inherit;
}
.bar .more span{opacity:.7;transition:opacity .3s}
.bar .more:hover span{opacity:1}
.bar .more svg{width:18px;height:10px;opacity:.7;transition:transform .3s}
.bar:hover .more svg{transform:translateX(6px)}

/* flip accents per theme */
.bar.cool{--accent:#4F7378}
.bar.tropic{--accent:#B0854F}
.bar.noir{--accent:#5A5A60}
.bar.green{--accent:#536A4B}

/* back face */
.bar-back .bk-head{display:flex;flex-direction:column;gap:8px}
.bar-back .bk-accent{width:40px;height:3px;border-radius:2px;background:var(--accent);margin-bottom:4px}
.bar-back .bk-desc{font-size:13px;line-height:1.7;opacity:.92}
.bar-back .bk-spec{list-style:none;display:flex;flex-direction:column;margin-top:auto}
.bar-back .bk-spec li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid rgba(43,41,38,.1)}
.bar-back .bk-spec li span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.5;font-weight:500;white-space:nowrap}
.bar-back .bk-spec li em{font-style:normal;font-size:12px;text-align:right;opacity:.85;letter-spacing:.01em}
.bar-back .flip-back{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:transparent;border:none;border-top:1px solid rgba(43,41,38,.14);cursor:pointer;font-family:inherit;
  padding:18px 0 0;color:var(--accent);
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;
  transition:opacity .25s;
}
.bar-back .flip-back .fb-label{display:inline-flex;align-items:center;gap:12px}
.bar-back .flip-back svg{width:18px;height:10px;transform:rotate(180deg);transition:transform .3s}
.bar-back .flip-back:hover svg{transform:rotate(180deg) translateX(-6px)}
.bar-back .flip-back .fb-hint{font-size:9px;letter-spacing:.18em;opacity:.45;font-weight:500}

/* ---------- INGREDIENTS / VALUE — swirl medallions ---------- */
.value{
  background:var(--silk);padding:130px 6vw;position:relative;overflow:hidden;
}
.value::before{
  content:"";position:absolute;right:-25%;top:30%;width:70%;aspect-ratio:1;
  background:url('assets/swirl.jpg') center/cover no-repeat;
  filter:invert(1);mix-blend-mode:multiply;opacity:.05;
  pointer-events:none;animation:slowSpin 240s linear infinite;
}
.value-grid{max-width:1280px;margin:0 auto;position:relative}
.value .head{display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:end;margin-bottom:120px}
.value .head h2{font-size:clamp(40px,5.2vw,80px);font-weight:300;letter-spacing:-.025em;line-height:1;margin-top:24px}
.value .head h2 i{font-style:italic;color:var(--cognac);font-weight:300}
.value .head .lead{font-size:14px;line-height:1.75;opacity:.92;max-width:420px;align-self:end}

/* medallions — smaller, text below, readable */
.values{
  display:grid;grid-template-columns:repeat(3,1fr);gap:60px 48px;align-items:start;position:relative;
}
.val{
  position:relative;display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center;
}
.val .medal{
  position:relative;width:min(170px,38vw);max-width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:var(--mc,#0F0E0D);
  box-shadow:0 14px 30px -16px rgba(43,41,38,.35);
  transition:transform .8s cubic-bezier(.2,.7,0,1), box-shadow .6s;
}
.val:hover .medal{transform:scale(1.04) rotate(-6deg);box-shadow:0 22px 40px -18px rgba(43,41,38,.5)}
.val .medal::before{
  content:"";position:absolute;inset:0;
  background:url('assets/swirl.jpg') center/cover no-repeat;
  mix-blend-mode:screen;opacity:.85;
  filter:saturate(.9);
  transition:transform 1.2s cubic-bezier(.2,.7,0,1);
}
.val:hover .medal::before{transform:scale(1.12) rotate(12deg)}
.val .medal::after{
  content:"";position:absolute;inset:7px;border-radius:50%;
  border:1px solid rgba(250,248,245,.22);pointer-events:none;
}
.val .medal .vn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  color:rgba(250,248,245,.9);font-size:11px;letter-spacing:.34em;font-weight:600;
}
.val .body{display:flex;flex-direction:column;gap:8px;max-width:260px}
.val .cap{font-size:10px;letter-spacing:.34em;text-transform:uppercase;font-weight:600;color:var(--mc,var(--cognac));opacity:.95}
.val h3{font-weight:400;font-size:19px;letter-spacing:-.005em;line-height:1.2;color:var(--obsidian)}
.val p{font-size:13px;line-height:1.6;color:var(--obsidian);opacity:.88;margin:0}

/* brand color tints per medallion */
.val.v1{--mc:#1B4D4D}
.val.v2{--mc:#2C3E50}
.val.v3{--mc:#8B5A3C}
.val.v4{--mc:#6B2C3C}
.val.v5{--mc:#5C6F4F}
.val.v6{--mc:#2B2926}

/* ---------- FIND YOUR BAR (recommender) ---------- */
.bespoke{
  background:#0F0E0D;color:var(--cream);padding:130px 6vw 140px;position:relative;overflow:hidden;
}
.bespoke .swirl-bg{
  position:absolute;right:-25%;top:50%;transform:translateY(-50%);width:80%;aspect-ratio:1;
  background:url('assets/swirl.jpg') center/cover no-repeat;
  mix-blend-mode:screen;opacity:.14;
  pointer-events:none;
  -webkit-mask:radial-gradient(circle at 50% 50%, #000 34%, transparent 66%);
  mask:radial-gradient(circle at 50% 50%, #000 34%, transparent 66%);
}
/* fade the swirl texture into solid before the footer so the boundary is seamless */
.bespoke::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:240px;
  background:linear-gradient(to bottom, rgba(15,14,13,0), #0F0E0D);
  pointer-events:none;z-index:1;
}
.bespoke-grid{z-index:2}
.bespoke-grid{position:relative;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1.15fr;gap:100px;align-items:start}
.bespoke .left .eyebrow{color:var(--gold);opacity:1;font-weight:500}
.bespoke .eyebrow-num em{color:var(--gold);opacity:.7}
.bespoke h2{font-size:clamp(40px,5vw,72px);font-weight:300;letter-spacing:-.025em;line-height:1.05;margin-top:32px}
.bespoke h2 i{font-style:italic;color:var(--gold);font-weight:300}
.bespoke .copy{margin-top:30px;font-size:15px;line-height:1.8;opacity:.88;max-width:460px}

/* recommender card */
.picker{background:rgba(250,248,245,.04);border:1px solid rgba(250,248,245,.1);padding:42px;position:relative;border-radius:6px}
.picker .pl{font-size:10px;letter-spacing:.32em;text-transform:uppercase;font-weight:500;opacity:.55;margin-bottom:18px;display:flex;align-items:center;gap:14px}
.picker .pl em{font-style:normal;width:24px;height:1px;background:var(--gold);opacity:.7}
.picker h3{font-size:22px;font-weight:300;letter-spacing:-.005em;margin-bottom:24px;line-height:1.3}
.picker .group{margin-bottom:18px}
.picker .gl{font-size:10px;letter-spacing:.32em;text-transform:uppercase;font-weight:500;opacity:.55;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.picker .gl .n{opacity:.45;font-variant-numeric:tabular-nums}
.picker .opts{display:flex;flex-wrap:wrap;gap:6px}
.picker .opt{
  padding:9px 14px;border:1px solid rgba(250,248,245,.18);font-size:11.5px;letter-spacing:.04em;
  cursor:pointer;background:transparent;color:inherit;font-family:inherit;transition:all .25s;border-radius:999px;
  display:inline-flex;align-items:center;gap:8px;
}
.picker .opt:hover{border-color:rgba(250,248,245,.5)}
.picker .opt.on{background:var(--gold);color:#0F0E0D;border-color:var(--gold);font-weight:500}
.picker .opt .ic{font-size:14px;opacity:.85}

/* live recommendation panel */
.reco{
  margin-top:30px;border:1px solid rgba(201,169,97,.35);background:rgba(201,169,97,.05);border-radius:6px;
  padding:22px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;
  transition:background .4s, border-color .4s;
}
.reco .seal{
  width:90px;height:90px;border-radius:50%;overflow:hidden;position:relative;flex-shrink:0;
  background:var(--reco-bg,#1B4D4D);box-shadow:0 14px 30px -14px rgba(0,0,0,.6);
  transition:background .5s;
}
.reco .seal::before{
  content:"";position:absolute;inset:0;
  background:url('assets/swirl.jpg') center/cover no-repeat;
  mix-blend-mode:screen;opacity:.85;
}
.reco .seal::after{
  content:"";position:absolute;inset:6px;border-radius:50%;border:1px solid rgba(250,248,245,.2);
}
.reco .body .rcap{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;font-weight:600;color:var(--gold);opacity:.95}
.reco .body .rname{font-weight:300;font-size:28px;letter-spacing:-.01em;margin-top:6px;line-height:1}
.reco .body .rdesc{margin-top:8px;font-size:12.5px;line-height:1.65;opacity:.75;max-width:340px}
.reco .body .notes{margin-top:10px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.6;font-weight:500}

.picker .note{
  width:100%;background:rgba(250,248,245,.04);border:1px solid rgba(250,248,245,.18);
  color:inherit;font-family:inherit;font-size:13px;line-height:1.6;
  padding:14px 16px;border-radius:6px;resize:vertical;min-height:84px;outline:none;
  transition:border-color .25s,background .25s;
}
.picker .note:focus{border-color:rgba(201,169,97,.6);background:rgba(250,248,245,.06)}
.picker .note::placeholder{color:rgba(250,248,245,.4)}
.picker .submit{
  margin-top:8px;width:100%;display:inline-flex;align-items:center;justify-content:space-between;
  padding:18px 24px;background:#C9A961;color:#1F1A12;border:1px solid #C9A961;border-radius:999px;
  font-family:inherit;font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;
  cursor:pointer;transition:all .3s;
}
.picker .submit:hover{background:#B6985A;border-color:#B6985A}
.picker .submit svg{width:18px;height:10px}
.picker .submit.sending{opacity:.6;pointer-events:none}
.picker .thanks{
  display:none;gap:16px;align-items:flex-start;
  background:rgba(27,77,77,.16);border:1px solid rgba(201,169,97,.4);
  border-radius:6px;padding:20px;margin-top:8px;
}
.picker .thanks:not([hidden]){display:flex}
.picker .thanks .tcheck{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--gold);color:#1F1A12;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;
}
.picker .thanks .tt{font-size:14px;font-weight:500;letter-spacing:.02em}
.picker .thanks .td{margin-top:4px;font-size:12.5px;line-height:1.6;opacity:.78}

/* instant-match result */
.picker .result{display:none;flex-direction:column;gap:18px}
.picker .result:not([hidden]){display:flex}
.picker .result .result-msg{
  animation:recoIn .6s cubic-bezier(.2,.7,0,1) both;
  border:1px solid rgba(201,169,97,.32);background:rgba(201,169,97,.05);border-radius:6px;
  padding:30px 28px;
}
@keyframes recoIn{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:translateY(0)}}
.picker .result .rcap{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;font-weight:600;color:var(--gold);opacity:.95}
.picker .result .rmsg-h{font-size:26px;font-weight:300;letter-spacing:-.01em;line-height:1.1;margin:12px 0 0}
.picker .result .rmsg-b{margin:14px 0 0;font-size:13.5px;line-height:1.75;opacity:.9;max-width:440px}
.picker .wa-cta{
  margin-top:2px;width:100%;display:inline-flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 24px;background:#6B2C3C;color:#FAF8F5;border:1px solid #6B2C3C;border-radius:999px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;font-family:inherit;
  text-decoration:none;cursor:pointer;transition:background .3s,border-color .3s,transform .3s;
}
.picker .wa-cta:hover{background:#54222F;border-color:#54222F;transform:translateY(-1px)}
.picker .wa-cta .lhs{display:inline-flex;align-items:center;gap:11px}
.picker .wa-cta svg.wa-ic{width:19px;height:19px;flex-shrink:0}
.picker .wa-cta svg.arr{width:18px;height:10px;opacity:.85;transition:transform .3s}
.picker .wa-cta:hover svg.arr{transform:translateX(5px)}
.picker .restart{
  align-self:flex-start;background:transparent;border:none;font-family:inherit;cursor:pointer;
  color:inherit;opacity:.55;font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;
  padding:2px 0;transition:opacity .25s;
}
.picker .restart:hover{opacity:.9}
.picker .group.note-group{margin-bottom:18px}
.picker.submitted .group,.picker.submitted h3,.picker.submitted .pl,.picker.submitted .submit{display:none}

/* ---------- SCROLL INDICATOR (minimal) ---------- */
.s-ind{
  position:fixed;left:24px;bottom:24px;z-index:90;pointer-events:none;
  display:flex;align-items:center;gap:12px;
  font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;font-weight:500;font-variant-numeric:tabular-nums;
  color:var(--obsidian);opacity:.55;transition:color .35s, opacity .35s;
}
.s-ind.dark{color:var(--cream);opacity:.55}
.s-ind .num{display:inline-block;min-width:42px}
.s-ind .track{position:relative;width:56px;height:1px;background:currentColor;opacity:.3}
.s-ind .track i{position:absolute;left:0;top:-1px;height:3px;background:currentColor;opacity:.95;width:0;transition:width .25s linear}

/* ---------- CTA STRIP ---------- */
.strip{
  background:var(--cream);padding:120px 6vw;text-align:center;position:relative;overflow:hidden;
}
.strip .swirl-bg{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:130vh;height:130vh;
  background:url('assets/swirl.jpg') center/cover no-repeat;
  filter:invert(1);mix-blend-mode:multiply;opacity:.05;animation:slowSpin 200s linear infinite;
  pointer-events:none;
}
.strip .inner{position:relative;max-width:840px;margin:0 auto}
.strip h2{font-size:clamp(44px,6vw,96px);font-weight:300;letter-spacing:-.03em;line-height:1}
.strip h2 i{font-style:italic;color:var(--teal);font-weight:300}
.strip .sub{margin-top:36px;font-size:16px;line-height:1.75;opacity:.88;max-width:600px;margin-left:auto;margin-right:auto}
.strip .ctas{margin-top:54px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{
  padding:18px 36px;font-size:11px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;
  border:1px solid currentColor;background:transparent;color:var(--obsidian);cursor:pointer;font-family:inherit;
  transition:all .3s;text-decoration:none;display:inline-flex;align-items:center;gap:14px;
}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.primary:hover{background:transparent;color:var(--teal)}
.btn:hover{background:var(--obsidian);color:var(--cream)}


/* ---------- NOTE BY FOUNDERS (moved here from Story.html — sits after the
   collection / category-detail content, before the footer) ---------- */
/* z-index:2 so it sits ABOVE the sticky/pinned hero (z-index:1) on the shop
   page -- otherwise the pinned hero paints over this section (same fix as
   .collection-view / .category-detail / footer). Light pink wash mixed from
   the brand's oxblood accent (not a bare invented pink). No section-wide
   swirl anymore -- the swirl now lives inside the letter card itself
   (.founders-card::before) instead of behind the whole section. */
.founders{background:color-mix(in srgb, var(--oxblood) 7%, var(--cream) 93%);padding:140px 6vw 150px;position:relative;z-index:2;overflow:hidden}
/* Same max-width + left-aligned flex as .shop-hero-inner, so "Note by
   Founders" lines up exactly with "The Collection" above it. */
.founders-inner{position:relative;max-width:1280px;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start}
/* Match .shop-hero's eyebrow treatment exactly (opacity/spacing) instead of
   the numbered eyebrow-num style used elsewhere. */
.founders-inner>.eyebrow{opacity:.5;display:block;margin-bottom:0}
/* align-self:center: the card centers itself in the section even though the
   eyebrow above it stays left-aligned (matching "The Collection"). */
.founders-card{position:relative;align-self:center;margin-top:28px;width:100%;max-width:820px;background:#FCFBF7;border:1px solid rgba(43,41,38,.09);box-shadow:0 40px 90px -50px rgba(43,41,38,.4),0 2px 0 rgba(43,41,38,.02);padding:clamp(56px,6.5vw,80px) clamp(32px,5vw,80px) clamp(40px,4vw,60px);text-align:left;overflow:visible}
/* Swirl moved here, onto the paper itself, in place of the section-wide one — kept very light */
.founders-card::before{content:"";position:absolute;inset:0;background:url('assets/swirl-hero.svg') center/cover no-repeat;opacity:.02;mix-blend-mode:multiply;pointer-events:none;z-index:0}
.founders-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--oxblood);opacity:.5;z-index:1}
/* Keep the letter's own text above the new paper swirl texture */
.founders-mark,.founders-text,.founders-signoff{position:relative;z-index:1}
.founders-seal{position:absolute;top:-30px;left:50%;transform:translateX(-50%) rotate(-2deg);width:76px;height:76px;border-radius:50%;background:color-mix(in srgb, var(--oxblood) 9%, #FCFBF7 91%);border:1.5px solid color-mix(in srgb, var(--oxblood) 38%, transparent);box-shadow:inset 0 2px 7px rgba(107,44,60,.16), inset 0 -1px 2px rgba(255,255,255,.5), 0 10px 20px -12px rgba(43,41,38,.3);z-index:2;display:flex;align-items:center;justify-content:center}
.founders-seal::before{content:"";position:absolute;inset:0;border-radius:50%;background:url('assets/swirl.jpg') center/cover no-repeat;mix-blend-mode:multiply;opacity:.16}
.founders-seal::after{content:"";position:absolute;inset:6px;border-radius:50%;border:1px solid color-mix(in srgb, var(--oxblood) 30%, transparent)}
.founders-seal .fn-mono{position:relative;z-index:1;width:44px;height:auto;opacity:.85;user-select:none;pointer-events:none}
.founders-mark{font-family:Georgia,'Times New Roman',serif;font-size:clamp(80px,10vw,140px);line-height:.5;height:.42em;color:var(--oxblood);opacity:.22;margin-top:4px;margin-bottom:-8px;user-select:none;pointer-events:none}
.founders-text{margin-top:0;font-size:clamp(18px,1.65vw,22px);font-weight:300;font-style:italic;line-height:1.68;letter-spacing:-.005em;color:var(--obsidian)}
.founders-text .fn{font-style:normal;font-weight:500;color:var(--oxblood);letter-spacing:.03em}
.founders-text .fn-em{font-style:normal;font-weight:400;color:var(--oxblood)}
.founders-signoff{margin-top:40px;display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:2px}
.founders-script{font-family:'Playfair Display',Georgia,serif;font-size:34px;line-height:.95;color:var(--oxblood);font-weight:500;font-style:italic;letter-spacing:.01em}
.founders-sign{font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--obsidian);opacity:.5}

/* ---------- ANIMATIONS ---------- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1.2s cubic-bezier(.2,.7,0,1), transform 1.2s cubic-bezier(.2,.7,0,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}
.reveal.d2{transition-delay:.2s}
.reveal.d3{transition-delay:.3s}
.reveal.d4{transition-delay:.4s}

/* responsive */
@media (max-width:980px){
  .intro-grid,.cure .head,.products .head,.value .head,.bespoke-grid{grid-template-columns:1fr;gap:40px}
  .cure .develops{grid-template-columns:1fr;gap:36px;margin-top:48px}
  .pillars{grid-template-columns:repeat(2,1fr);grid-template-rows:auto;max-height:none}
  .pillar{min-height:200px}
  .feel{min-height:0;padding:120px 6vw 100px}
  .weeks{grid-template-columns:repeat(3,1fr);gap:20px}
  .weeks .week{min-width:0}
  .week .disc{max-width:120px}
  .bar-grid{grid-template-columns:repeat(2,1fr)}
  .values{grid-template-columns:repeat(3,1fr)}
  .values .val{min-width:0}
  .val{grid-column:span 1}
  footer .grid{grid-template-columns:1fr;gap:48px}
  .nav nav{display:none}
  .nav-toggle{display:flex}
  .nav .wa{display:none}
}
@media (max-width:560px){
  .pillars{grid-template-columns:1fr}
  .weeks{grid-template-columns:repeat(2,1fr);column-gap:14px}
  .weeks .week{min-width:0;padding:0 2px}
  .weeks .week .disc{max-width:min(40vw,140px)}
  .bar-grid{grid-template-columns:1fr}
  .values{grid-template-columns:repeat(2,1fr);gap:48px 18px}
  .values .val{min-width:0}
  .val .medal{width:min(40vw,150px)}
  .val .body{max-width:100%}
  footer .links{grid-template-columns:1fr 1fr;gap:36px}
  footer .base{flex-direction:column;align-items:flex-start;gap:16px}
  .concierge .pop{width:calc(100vw - 48px)}
  .nav{padding:14px 16px}
  .nav .brand img{height:14px;width:64px}
  .hero .tagline{font-size:10px;letter-spacing:.28em}
  .hero .tagline::before,.hero .tagline::after{margin:0 10px}
  .mobile-menu{top:66px}
}

/* ---- About focus list ---- */
.intro-focus{list-style:none;margin-top:42px;display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;max-width:560px}
.intro-focus li{display:flex;align-items:baseline;gap:14px;padding:16px 0;border-top:1px solid rgba(43,41,38,.14);font-size:15px;letter-spacing:.005em;color:var(--obsidian)}
.intro-focus li span{font-size:10px;letter-spacing:.18em;font-weight:600;color:var(--teal);font-variant-numeric:tabular-nums;opacity:.85}

/* ---- Week hover tooltips ---- */
.week{outline:none}
.week .disc{cursor:pointer}
.week .wk-tip{
  position:absolute;left:50%;bottom:calc(100% - 4px);transform:translate(-50%,8px);
  width:210px;max-width:80vw;z-index:40;
  background:var(--cream);color:var(--obsidian);
  border:1px solid rgba(43,41,38,.12);border-radius:11px;
  box-shadow:0 26px 50px -22px rgba(43,41,38,.45);
  padding:15px 17px;text-align:left;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;
}
.week .wk-tip strong{display:block;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--teal);font-weight:600;margin-bottom:7px}
.week .wk-tip span{display:block;font-size:12px;line-height:1.6;opacity:.88}
.week .wk-tip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:7px solid transparent;border-top-color:var(--cream)}
.week:hover .wk-tip,.week:focus-within .wk-tip,.week.show .wk-tip{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.cure-hint{text-align:center;margin:4px auto 0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;opacity:.5;color:var(--obsidian)}

@media(max-width:560px){
  .policy-modal{padding:0}
  .policy-modal .pm-panel{max-height:100vh;border-radius:0;padding:64px 24px 40px}
  .intro-focus{grid-template-columns:1fr;gap:0}
}
.s-ind{display:none}


/* COLLECTION VIEW — wraps the shop-hero intro + category cards. Sits ABOVE
   the pinned (sticky) hero via z-index, so as you scroll it rises up and
   slides OVER the hero like a sheet — the hero stays put and gets covered.
   Flat + opaque, no rounded corners or shadow (just the clean slide-over). */
.collection-view{position:relative;z-index:2;background:var(--cream);min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:96px 0 0}
#collectionView[hidden]{display:none}

/* SHOP HERO */
.shop-hero{padding:0 6vw 30px;position:relative;overflow:hidden}
.shop-hero::after{content:"";position:absolute;right:-18%;top:-18%;width:72%;aspect-ratio:1;background:url('assets/swirl-hero.svg') center/cover no-repeat;filter:invert(1);mix-blend-mode:multiply;opacity:.12;pointer-events:none;border-radius:50%}
.shop-hero-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;position:relative}
.shop-hero .eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;opacity:.5;display:block;margin-bottom:20px}
.shop-hero h1,.shop-hero h2{font-size:clamp(38px,4.8vw,74px);font-weight:300;letter-spacing:-.03em;line-height:.98}
.shop-hero h1 i,.shop-hero h2 i{font-style:italic;color:var(--teal)}
.shop-hero .sub{font-size:16px;line-height:1.8;opacity:.88;align-self:end;padding-bottom:6px}

.btn-cart{padding:14px 26px;font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;cursor:pointer;font-family:inherit;transition:all .3s;display:inline-flex;align-items:center;gap:10px;border-radius:999px;background:var(--obsidian);color:var(--cream);border:1px solid var(--obsidian)}
.btn-cart:hover{background:transparent;color:var(--obsidian)}
.cart-btn-wrap{display:inline-flex}
.cart-stepper{display:inline-flex;align-items:center;border:1px solid rgba(43,41,38,.22);border-radius:999px;overflow:hidden}
.cst-btn{width:36px;height:40px;background:transparent;border:none;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:background .2s;color:var(--obsidian);font-family:inherit;line-height:1}
.cst-btn:hover:not(:disabled){background:rgba(43,41,38,.08)}
.cst-btn:disabled{opacity:.3;cursor:not-allowed}
.cst-qty{min-width:32px;text-align:center;font-size:14px;font-weight:500;color:var(--obsidian);padding:0 4px}
.btn-wa-bar{padding:14px 26px;font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;cursor:pointer;font-family:inherit;transition:all .3s;display:inline-flex;align-items:center;gap:10px;border-radius:999px;background:transparent;color:var(--oxblood);border:1px solid var(--oxblood);text-decoration:none}
.btn-wa-bar:hover{background:var(--oxblood);color:var(--cream)}
.btn-wa-bar svg{width:14px;height:14px;flex-shrink:0}


.bespoke-form-wrap{background:#0F0E0D;color:#FAF8F5;padding:100px 6vw 120px;position:relative;overflow:hidden}
.bespoke-form-wrap::before{content:"";position:absolute;top:60px;left:0;right:0;bottom:60px;background:url('assets/swirl-hero.svg') center/cover no-repeat;mix-blend-mode:screen;opacity:.22;pointer-events:none;filter:brightness(0.9)}

.bespoke-form-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:72px;align-items:start}
.bfl h3{font-size:clamp(32px,4vw,60px);font-weight:300;letter-spacing:-.025em;line-height:1.05;margin-top:22px}
.bfl h3 i{font-style:italic;color:var(--gold)}
.bfl p{margin-top:24px;font-size:14px;line-height:1.82;opacity:.85;max-width:420px}
.eyebrow-gold{font-size:11px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;color:var(--gold)}

/* PICKER */
.picker{background:rgba(250,248,245,.04);border:1px solid rgba(250,248,245,.1);padding:36px 40px;border-radius:6px}
.picker .pl{font-size:10px;letter-spacing:.32em;text-transform:uppercase;font-weight:500;opacity:.9;margin-bottom:14px;display:flex;align-items:center;gap:14px}
.picker .pl em{font-style:normal;width:24px;height:1px;background:var(--gold);opacity:.7}
.picker h3{font-size:22px;font-weight:300;letter-spacing:-.005em;margin-bottom:18px;line-height:1.3;color:#FAF8F5}
.picker .group{margin-bottom:15px}
.picker .gl{font-size:10px;letter-spacing:.32em;text-transform:uppercase;font-weight:500;opacity:.9;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.picker .gl .n{opacity:.8;font-variant-numeric:tabular-nums}
.picker .opts{display:flex;flex-wrap:wrap;gap:6px}
.picker .opt{padding:8px 14px;border:1px solid rgba(250,248,245,.18);font-size:11.5px;letter-spacing:.04em;cursor:pointer;background:transparent;color:inherit;font-family:inherit;transition:all .25s;border-radius:999px}
.picker .opt:hover{border-color:rgba(250,248,245,.5)}
.picker .opt.on{background:var(--gold);color:#0F0E0D;border-color:var(--gold);font-weight:500}
.picker .note{width:100%;background:rgba(250,248,245,.04);border:1px solid rgba(250,248,245,.18);color:inherit;font-family:inherit;font-size:13px;line-height:1.6;padding:12px 14px;border-radius:6px;resize:vertical;min-height:64px;outline:none;transition:border-color .25s}
.picker .note:focus{border-color:rgba(201,169,97,.6);background:rgba(250,248,245,.06)}
.picker .note::placeholder{color:rgba(250,248,245,.5)}
.picker .submit{margin-top:10px;width:100%;display:inline-flex;align-items:center;justify-content:space-between;padding:16px 22px;background:#C9A961;color:#1F1A12;border:1px solid #C9A961;border-radius:999px;font-family:inherit;font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:all .3s}
.picker .submit:hover{background:#B6985A;border-color:#B6985A}
.picker .submit svg{width:20px;height:10px;flex-shrink:0}
.picker .result{display:none;flex-direction:column;gap:18px}
.picker .result:not([hidden]){display:flex}
.picker .result .result-msg{animation:recoIn .6s cubic-bezier(.2,.7,0,1) both;border:1px solid rgba(201,169,97,.32);background:rgba(201,169,97,.05);border-radius:6px;padding:30px 28px}
@keyframes recoIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.picker .result .rcap{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;font-weight:600;color:var(--gold)}
.picker .result .rmsg-h{font-size:26px;font-weight:300;letter-spacing:-.01em;line-height:1.1;margin:12px 0 0}
.picker .result .rmsg-b{margin:14px 0 0;font-size:13.5px;line-height:1.75;opacity:.9;max-width:440px}
.picker .wa-cta{width:100%;display:inline-flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 24px;background:#6B2C3C;color:#FAF8F5;border:1px solid #6B2C3C;border-radius:999px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;font-family:inherit;text-decoration:none;cursor:pointer;transition:background .3s,border-color .3s;margin-top:2px}
.picker .wa-cta:hover{background:#54222F;border-color:#54222F}
.picker .wa-cta .lhs{display:inline-flex;align-items:center;gap:11px}
.picker .wa-cta svg.wa-ic{width:19px;height:19px;flex-shrink:0}
.picker .wa-cta svg.arr{width:18px;height:10px;opacity:.85}
.picker .restart{background:transparent;border:none;font-family:inherit;cursor:pointer;color:inherit;opacity:.45;font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;padding:2px 0;transition:opacity .25s}
.picker .restart:hover{opacity:.9}
.picker.submitted .group,.picker.submitted h3,.picker.submitted .pl,.picker.submitted .submit{display:none}

/* RESPONSIVE */
@media(max-width:980px){
  .shop-hero-inner,.ltd-section-header,.bespoke-form-inner{grid-template-columns:1fr;gap:36px}
  .bar-row{grid-template-columns:1fr;gap:36px;padding:60px 0;margin:0 4vw}
  /* Keep the horizontal padding on accented rows on mobile. The shorthand
     `padding:60px 0` above zeroes left/right; signature rows survive via their
     more-specific .bar-row.summer selector, but .ltd-row (same specificity as
     .bar-row) lost — leaving LE content flush against the edge. Restore it. */
  .bar-row.summer,.bar-row.saltmint,.bar-row.castille,.bar-row.shea,.bar-row.ltd-row{padding-left:28px;padding-right:28px}
  .bar-row:last-child{padding-bottom:60px}
  .br-details{padding:0}
  .bar-row::before,.bar-row.cool::before,.bar-row.tropic::before,.bar-row.noir::before,.bar-row.green::before,.bar-row.ltd-row::before{display:none}
  .ltd-grid{grid-template-columns:repeat(2,1fr)}
  footer .grid{grid-template-columns:1fr;gap:48px}
  .nav nav,.nav .wa{display:none}
  .nav-toggle{display:flex}
}
@media(max-width:560px){
  .ltd-grid{grid-template-columns:1fr}
  footer .links{grid-template-columns:1fr 1fr;gap:36px}
  footer .base{flex-direction:column;align-items:flex-start;gap:16px}
  .nav{padding:14px 16px}
  .nav .brand img{height:14px;width:64px}
  .mobile-menu{top:66px}
  .policy-modal{padding:0}
  .policy-modal .pm-panel{max-height:100vh;border-radius:0;padding:64px 24px 40px}
  .bespoke-form-wrap{padding:72px 6vw 80px}
  .picker{padding:28px 22px}
  .bs-steps{grid-template-columns:repeat(2,1fr)}
  .collection-view{min-height:auto;padding:120px 0 0}
  .category-grid{grid-template-columns:1fr;gap:36px;padding-top:28px}
  .category-card .cc-media{height:clamp(220px,42vh,380px)}
}

/* ===== MOBILE FIXES (added) ===== */
@media(max-width:980px){
  /* Hero scrolls away normally on mobile instead of staying pinned as a
     sticky "curtain". The pinned version (a) made you swipe repeatedly before
     the collection appeared, because the hero never moved, and (b) let its
     spinning swirl peek through between sections. Desktop keeps the pin. */
  .hero{position:relative;height:100svh;min-height:520px}
  /* Card descriptions can't be revealed on hover on touch devices — show them. */
  .category-card .cc-desc{opacity:.74;max-height:64px;transform:none;margin-top:11px}
  .category-card .cc-go .cc-line{width:44px}
  /* Larger finger targets (≥~44px) */
  .picker .opt{padding:12px 16px}
  .br-variants .bv-tags .bv-tag{padding:12px 16px}
  .cst-btn{width:42px;height:46px}
  .btn-cart,.btn-wa-bar{padding:15px 24px}
}