/* ============================================================
   AURUM PEARL — redesign layer (film + photography integration)
   Loads after aurum.css. Keeps the veins background untouched.
   ============================================================ */

video{ display:block; }
.filmvid{ width:100%; height:100%; object-fit:cover; mix-blend-mode:screen; }

/* ---------------- HERO (film centerpiece) ---------------- */
.hero{ min-height:100svh; display:grid; place-items:center; text-align:center; padding:5vh 0 10vh; }
.hero__inner{ display:flex; flex-direction:column; align-items:center; }
.hero__mark{ width:clamp(58px,7vw,92px); height:auto; opacity:.92;
  filter:drop-shadow(0 0 26px rgba(216,180,106,.32)); }
.hero__eyebrow{ margin:1.1rem 0 .2rem; }
.hero__film{ position:relative; height:min(35vh,330px); aspect-ratio:3/4; display:grid; place-items:center; margin:.2rem 0; }
.hero__film .filmvid{ position:relative; z-index:1; }
.hero__filmglow{ position:absolute; inset:-26%; z-index:0;
  background:radial-gradient(circle at 50% 47%, rgba(216,180,106,.24), transparent 62%); filter:blur(10px); }
.hero__word{ font-family:var(--font-display); font-weight:400;
  font-size:clamp(40px,8.6vw,108px); letter-spacing:.05em; line-height:.9; margin-top:-.7rem; }
.hero__sub{ margin-top:.9rem; font-size:clamp(16px,1.7vw,21px); }
.hero .hero__tags{ margin-top:1.7rem; }
.hero .scrollcue{ bottom:2.4vh; }

/* ---------------- THE REVEAL — film section ---------------- */
.film-sec{ padding:16vh 0 14vh; text-align:center; }
.film-sec__head{ margin:0 auto; }
.film-stage{ position:relative; height:min(62vh,600px); aspect-ratio:3/4; margin:6vh auto 5vh;
  display:grid; place-items:center; }
.film-stage .filmvid{ position:relative; z-index:1; }
.film-stage__glow{ position:absolute; inset:-16%; z-index:0;
  background:radial-gradient(circle, rgba(216,180,106,.2), transparent 62%); filter:blur(14px); }
.chips{ display:flex; gap:clamp(.6rem,1.4vw,1.2rem); justify-content:center; align-items:center; flex-wrap:wrap;
  font-family:var(--font-label); text-transform:uppercase; letter-spacing:.24em; font-size:11px; color:var(--ink-faint); }
.chips i{ width:clamp(14px,2.4vw,30px); height:1px; background:var(--gold-line); display:inline-block; }
.chips b{ color:var(--gold-solid); font-weight:400; }
.film-sec__cap{ margin:2.6rem auto 0; }

/* ---------------- THE RITUAL — Essence (video split) ---------------- */
.ritual{ display:grid; grid-template-columns:1fr 1fr; min-height:100svh; align-items:center; gap:2vw; }
.ritual__media{ position:relative; height:100svh; display:grid; place-items:center; overflow:hidden; }
.ritual__media .filmvid{ position:relative; z-index:1; height:84%; width:auto; aspect-ratio:3/4; }
.ritual__glow{ position:absolute; inset:0; z-index:0;
  background:radial-gradient(circle at 50% 44%, rgba(216,180,106,.16), transparent 60%); }
.ritual__copy{ padding:10vh clamp(22px,5vw,72px); }
.ritual__copy .steps3{ display:flex; gap:2.4rem; margin-top:2.6rem; }
.ritual__copy .steps3 .k{ font-family:var(--font-display); font-size:30px; }
.ritual__copy .steps3 .l{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.2em; font-size:10.5px; color:var(--ink-dim); margin-top:.3rem; }

/* ---------------- THE KEEPSAKE — box film ---------------- */
.keepsake{ padding:16vh 0 14vh; text-align:center; }
.boxfilm{ position:relative; height:min(64vh,620px); aspect-ratio:3/4; margin:6vh auto 5vh; display:grid; place-items:center; }
.boxfilm .filmvid{ position:relative; z-index:1; }
.boxfilm__glow{ position:absolute; inset:-14%; z-index:0;
  background:radial-gradient(circle, rgba(216,180,106,.18), transparent 64%); filter:blur(14px); }

/* numbered serial reused from .serial / .incl in aurum.css */

/* ---------------- flavour feature: optional video media ---------------- */
.feat__media video.filmvid{ width:min(40vw,470px); aspect-ratio:1/1; height:auto; }

/* ============================================================
   CINEMA — full-bleed film sections (Netflix-style)
   ============================================================ */
/* sticky pinning: the section is a tall scroll track; the .cinema__sticky
   inner holds the viewport-filling film + copy. Native sticky = no JS
   repositioning, no pin-spacers, no refresh jumps. */
.filmscroll{ position:relative; height:230vh; }
.filmscroll--hero{ height:195vh; }
.cinema__sticky.cinema__sticky{ position:sticky; top:0; height:100svh; }
@media (max-width:760px){
  .filmscroll{ height:175vh; }
  .filmscroll--hero{ height:160vh; }
}
.cinema{ position:relative; min-height:100svh; display:grid; overflow:hidden; isolation:isolate;
  transform:translateZ(0); backface-visibility:hidden; }
.cinema__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transform:translateZ(0); backface-visibility:hidden; will-change:transform; }
/* keepsake emblem clip is shot very dark — lift it so the gold reads */
.keepsake .cinema__bg{ filter:brightness(1.5) contrast(1.04) saturate(1.08); }
.cinema__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.cinema__content{ position:relative; z-index:2; width:100%; }
.cinema--bottom{ align-items:end; }
.cinema--top{ align-items:start; }
.cinema__scrim--bottom{ background:linear-gradient(0deg, rgba(8,7,10,.92) 0%, rgba(8,7,10,.55) 16%, rgba(8,7,10,.12) 38%, rgba(8,7,10,0) 60%, rgba(8,7,10,.18) 100%); }
/* keepsake clip is dark — use a gentler bottom scrim so the film shows through */
.keepsake .cinema__scrim--bottom{ background:linear-gradient(0deg, rgba(8,7,10,.8) 0%, rgba(8,7,10,.4) 18%, rgba(8,7,10,.06) 42%, rgba(8,7,10,0) 64%, rgba(8,7,10,.12) 100%); }
.cinema__vign{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(135% 100% at 50% 46%, transparent 62%, rgba(8,7,10,.42) 100%); }

/* ---- localized readability backing: a feathered spotlight behind copy ---- */
.hero__content, .keepsake__content, .reveal__content, .reveal__bottom{ position:relative; }
.hero__content::before, .keepsake__content::before, .reveal__content::before, .reveal__bottom::before{
  content:""; position:absolute; z-index:0; left:50%; top:50%;
  width:130%; height:182%; transform:translate(-50%,-50%);
  background:radial-gradient(54% 54% at 50% 50%, rgba(6,5,8,.86), rgba(6,5,8,.52) 50%, rgba(6,5,8,0) 78%);
  filter:blur(36px); pointer-events:none;
}
.hero__content > *, .keepsake__content > *, .reveal__content > *, .reveal__bottom > *{ position:relative; z-index:1; }
.cinema__content, .reveal__bottom{ text-shadow:0 2px 26px rgba(6,5,8,.78); }
.cinema .display, .hero__word{ text-shadow:0 6px 48px rgba(6,5,8,.9), 0 1px 14px rgba(6,5,8,.85); }
.cinema .lede, .cinema .eyebrow, .chips, .serial, .incl{ text-shadow:0 2px 22px rgba(6,5,8,.92); }
/* hero cluster sits over the brightest part of the film — give it the strongest backing */
.hero__content::before{ width:152%; height:220%;
  background:radial-gradient(54% 52% at 50% 56%, rgba(6,5,8,.92), rgba(6,5,8,.66) 44%, rgba(6,5,8,0) 80%);
  filter:blur(44px); }

/* HERO cinema */
.hero.cinema{ text-align:center; }
.hero__content{ display:flex; flex-direction:column; align-items:center; padding:0 6vw 12vh; }
.hero__mark{ width:clamp(56px,6.5vw,88px); height:auto; opacity:.95; filter:drop-shadow(0 0 26px rgba(216,180,106,.4)); }
.hero__eyebrow{ margin:1rem 0 .3rem; }
.hero__word{ font-family:var(--font-display); font-weight:400; font-size:clamp(46px,11vw,140px); letter-spacing:.05em; line-height:.9; }
.hero__sub{ margin-top:1rem; font-size:clamp(16px,1.8vw,22px); }
.hero .hero__tags{ margin-top:1.9rem; }
.hero .scrollcue{ bottom:2.4vh; }

/* REVEAL cinema (title top) */
.reveal__content{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:13vh 6vw 0; }
.reveal__content .display{ font-size:clamp(44px,9vw,116px); margin:.3rem 0 0; }
.reveal__bottom{ position:absolute; z-index:2; left:0; right:0; bottom:6vh; display:flex; flex-direction:column; align-items:center; gap:1.6rem; padding:0 6vw; }

/* KEEPSAKE cinema (title bottom) */
.keepsake.cinema{ text-align:center; }
.keepsake__content{ display:flex; flex-direction:column; align-items:center; padding:0 6vw 11vh; }
.keepsake__content .display{ font-size:clamp(40px,8vw,104px); }

@media (max-width:900px){
  .hero__content{ padding-bottom:13vh; }
  .reveal__bottom{ position:static; margin-top:5vh; }
  .film-sec.cinema, .reveal__content{ min-height:auto; }
}

/* ============================================================
   INGREDIENT CONSTELLATION
   ============================================================ */
.ingredients-x{ padding:14vh 0 12vh; }
.ingx__head{ text-align:center; margin:0 auto 2vh; }
.ingx__stage{ position:relative; width:100%; max-width:1320px; margin:5vh auto 0;
  aspect-ratio:16/9; overflow:hidden; }
.ingx__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 45%, #000 60%, transparent 100%);
          mask-image:radial-gradient(120% 120% at 50% 45%, #000 60%, transparent 100%); }
.ingx__lines{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; overflow:visible; }
.ingx__line{ stroke:var(--gold-line); stroke-width:1px; vector-effect:non-scaling-stroke;
  stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.1s var(--ease), stroke .4s; }
.ingx__stage.lit .ingx__line{ stroke-dashoffset:0; }
.ingx__line.on{ stroke:var(--gold-solid); stroke-width:1.6px; }
.ingx__dot{ fill:var(--gold-solid); opacity:0; transition:opacity .5s; }
.ingx__stage.lit .ingx__dot{ opacity:.7; }
.ingx__nodes{ position:absolute; inset:0; z-index:3; }
.ingx__node{ position:absolute; transform:translate(-50%,-50%); background:none; border:0; cursor:pointer;
  display:flex; align-items:center; gap:.7rem; padding:0; opacity:0; transition:opacity .6s var(--ease); }
.ingx__stage.lit .ingx__node{ opacity:1; }
.ingx__node.right{ flex-direction:row-reverse; }
.ingx__ring{ width:54px; height:54px; flex:0 0 auto; border-radius:50%;
  border:1px solid var(--gold-line); display:grid; place-items:center; color:var(--gold-solid);
  background:rgba(8,7,10,.55); backdrop-filter:blur(4px); transition:.35s var(--ease); }
.ingx__ring svg{ width:24px; height:24px; }
.ingx__node:hover .ingx__ring, .ingx__node.on .ingx__ring{ border-color:var(--gold-solid);
  box-shadow:0 0 0 5px rgba(216,180,106,.1), 0 0 26px rgba(216,180,106,.35); transform:scale(1.08); }
.ingx__lab{ display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.ingx__node.right .ingx__lab{ text-align:right; }
.ingx__lab i{ font-family:var(--font-label); font-style:normal; text-transform:uppercase;
  letter-spacing:.2em; font-size:9.5px; color:var(--ink-faint); }
.ingx__lab b{ font-family:var(--font-display); font-weight:400; font-size:clamp(15px,1.5vw,20px);
  letter-spacing:.03em; text-transform:uppercase; color:var(--ink); }
.ingx__pop{ position:absolute; top:120%; left:50%; transform:translateX(-50%) translateY(6px);
  width:230px; background:rgba(14,12,15,.92); border:1px solid var(--gold-line); padding:14px 16px;
  opacity:0; visibility:hidden; transition:.35s var(--ease); z-index:5; pointer-events:none; backdrop-filter:blur(8px); }
.ingx__node.right .ingx__pop{ left:auto; right:50%; transform:translateX(50%) translateY(6px); }
.ingx__node.on .ingx__pop{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.ingx__node.right.on .ingx__pop{ transform:translateX(50%) translateY(0); }
.ingx__pop b{ display:block; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em;
  color:var(--gold-solid); font-size:15px; margin-bottom:.3rem; }
.ingx__pop span{ font-family:var(--font-serif); font-size:15px; color:var(--ink-dim); line-height:1.45; }
.ingx__list{ display:none; }

/* ============================================================
   FLAVOUR SELECTOR
   ============================================================ */
.collection-x{ --c:#e3c277; padding:14vh 0 14vh; }
.colx{ max-width:1240px; margin:6vh auto 0; padding:0 clamp(22px,5vw,60px); }
.colx__tabs{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:6vh; }
.colx__tab{ background:rgba(255,255,255,.02); border:1px solid var(--gold-line-soft); color:var(--ink-dim);
  font-family:var(--font-label); text-transform:uppercase; letter-spacing:.18em; font-size:11.5px;
  padding:11px 20px; cursor:pointer; transition:.3s var(--ease); position:relative; }
.colx__tab:hover{ color:var(--ink); border-color:var(--gold-line); }
.colx__tab.on{ color:#1a1407; background:var(--c); border-color:transparent; }
.colx__stage{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,80px); align-items:center; min-height:60vh; }
.colx__media{ position:relative; aspect-ratio:1; display:grid; place-items:center; }
.colx__glow{ position:absolute; inset:6%; border-radius:50%; background:radial-gradient(circle, color-mix(in oklab, var(--c) 55%, transparent), transparent 64%); filter:blur(34px); transition:background .6s; }
.colx__media img{ position:absolute; width:92%; height:92%; object-fit:contain; opacity:0; transform:scale(.96) rotate(-2deg);
  transition:opacity .7s var(--ease), transform .9s var(--ease); filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.colx__media img.on{ opacity:1; transform:scale(1) rotate(0); }
.colx__info{ opacity:0; transform:translateY(18px); transition:opacity .5s var(--ease), transform .6s var(--ease); }
.colx__info.in{ opacity:1; transform:none; }
.colx__no{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.26em; font-size:12px; color:var(--c); }
.colx__name{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(40px,5.6vw,86px);
  letter-spacing:.02em; line-height:.95; margin:.3rem 0 .2rem; color:var(--ink); }
.colx__name .tm{ color:var(--c); font-size:.3em; }
.colx__tag{ font-family:var(--font-serif); font-style:italic; font-size:clamp(19px,2.2vw,30px); color:var(--ink); }
.colx__ing{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.18em; font-size:12px; color:var(--c); margin:1.6rem 0 1.2rem; }
.colx__ben{ list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.colx__ben li{ font-family:var(--font-serif); font-size:clamp(16px,1.5vw,20px); color:var(--ink-dim); display:flex; gap:.8rem; align-items:center; }
.colx__ben li::before{ content:""; width:6px; height:6px; transform:rotate(45deg); background:var(--c); flex:0 0 auto; }

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .ritual{ grid-template-columns:1fr; }
  .ritual__media{ height:60svh; order:-1; }
  .ritual__media .filmvid{ height:auto; width:min(64vw,300px); }
  .hero__film{ height:min(36vh,330px); }
  .film-stage{ height:min(54vh,460px); }
  .boxfilm{ height:min(56vh,520px); }
  .colx__stage{ grid-template-columns:1fr; text-align:center; gap:2vh; }
  .colx__media{ max-width:78vw; margin:0 auto; }
  .colx__ben li{ justify-content:center; }
  /* constellation -> elegant list on mobile */
  .ingx__stage{ display:none; }
  .ingx__list{ display:flex; flex-direction:column; gap:0; max-width:560px; margin:4vh auto 0; padding:0 22px; }
  .ingx__li{ display:flex; gap:1.1rem; align-items:flex-start; padding:20px 0; border-top:1px solid var(--gold-line-soft); list-style:none; }
  .ingx__li:last-child{ border-bottom:1px solid var(--gold-line-soft); }
  .ingx__liic{ width:42px; height:42px; flex:0 0 auto; border:1px solid var(--gold-line); border-radius:50%; display:grid; place-items:center; color:var(--gold-solid); }
  .ingx__liic svg{ width:20px; height:20px; }
  .ingx__li b{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:19px; color:var(--ink); display:block; }
  .ingx__li i{ font-family:var(--font-label); font-style:normal; text-transform:uppercase; letter-spacing:.18em; font-size:9.5px; color:var(--ink-faint); display:block; margin:.2rem 0 .5rem; }
  .ingx__li p{ font-family:var(--font-serif); font-size:16px; color:var(--ink-dim); }
}

/* ============================================================
   COLLECTION — premium upgrades (3D tilt, halos, blur-crossfade)
   ============================================================ */
.colx__stage{ perspective:1300px; }
.colx__media{ transform-style:preserve-3d; transition:transform .5s var(--ease); }
.colx__media::before, .colx__media::after{ content:""; position:absolute; left:50%; top:50%; border-radius:50%; pointer-events:none; }
.colx__media::before{ width:72%; aspect-ratio:1; transform:translate(-50%,-50%); border:1px solid color-mix(in oklab,var(--c) 45%, transparent); opacity:.35; animation:colSpin 28s linear infinite; }
.colx__media::after{ width:92%; aspect-ratio:1; transform:translate(-50%,-50%); border:1px dashed color-mix(in oklab,var(--c) 28%, transparent); opacity:.2; animation:colSpin 46s linear infinite reverse; }
@keyframes colSpin{ to{ transform:translate(-50%,-50%) rotate(360deg);} }
.colx__glow{ animation:colGlow 5.5s ease-in-out infinite alternate; }
@keyframes colGlow{ from{ opacity:.65; transform:scale(1);} to{ opacity:1; transform:scale(1.07);} }
.colx__media img{ transition:opacity .85s var(--ease), transform 1s var(--ease), filter .85s var(--ease);
  transform:scale(.88) rotate(-3deg); filter:drop-shadow(0 34px 64px rgba(0,0,0,.6)) blur(12px); }
.colx__media img.on{ opacity:1; transform:scale(1) rotate(0); filter:drop-shadow(0 36px 66px rgba(0,0,0,.62)) blur(0); }
.colx__tab{ overflow:hidden; }
.colx__tab::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--c);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.colx__tab:hover::after{ transform:scaleX(1); }
.colx__tab.on::after{ transform:scaleX(0); }

/* ============================================================
   AROMA PEARL CARD — product line
   ============================================================ */
.aromacards{ padding:15vh 0 14vh; }
.aromacards__head{ text-align:center; max-width:760px; margin:0 auto; padding:0 22px; }
.aromacards__hero{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(28px,5vw,72px); align-items:center;
  max-width:1240px; margin:7vh auto 0; padding:0 clamp(22px,5vw,60px); }
.aromacards__hero .pic{ position:relative; border-radius:8px; overflow:hidden; box-shadow:0 50px 90px -34px rgba(0,0,0,.8);
  transform:perspective(1400px) rotateY(-4deg); transition:transform .7s var(--ease); }
.aromacards__hero .pic:hover{ transform:perspective(1400px) rotateY(0deg); }
.aromacards__hero .pic img{ width:100%; display:block; }
.aromacards__copy .steps3{ display:flex; gap:2.2rem; margin-top:2rem; }
.aromacards__copy .steps3 .k{ font-family:var(--font-display); font-size:28px; }
.aromacards__copy .steps3 .l{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.2em; font-size:10px; color:var(--ink-dim); margin-top:.3rem; }
.acard-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,22px);
  max-width:1180px; margin:8vh auto 0; padding:0 clamp(22px,5vw,60px); }
.acard{ position:relative; border-radius:9px; overflow:hidden; cursor:pointer;
  box-shadow:0 20px 44px -24px rgba(0,0,0,.85); transition:transform .55s var(--ease), box-shadow .55s var(--ease);
  border:1px solid rgba(255,255,255,.05); }
.acard img{ width:100%; display:block; }
.acard::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--ac, var(--gold-solid)); transform:scaleX(0); transform-origin:center; transition:transform .5s var(--ease); }
.acard:hover{ transform:translateY(-12px); box-shadow:0 44px 80px -30px rgba(0,0,0,.95); }
.acard:hover::after{ transform:scaleX(1); }
@media (max-width:900px){
  .aromacards__hero{ grid-template-columns:1fr; }
  .acard-row{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .acard-row{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
   THE BOUTIQUE — final packaging showcase (interactive)
   ============================================================ */
.boutique{ --c:#e0789a; padding:15vh 0 13vh; position:relative; }
.boutique__head{ text-align:center; max-width:760px; margin:0 auto; padding:0 22px; }
.bq{ max-width:1280px; margin:7vh auto 0; padding:0 clamp(22px,5vw,60px); }
.bq__stage{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,5vw,76px); align-items:center; min-height:64vh; }

/* media */
.bq__media{ position:relative; aspect-ratio:4/5; border-radius:14px; overflow:hidden;
  border:1px solid var(--gold-line-soft); box-shadow:0 50px 110px -40px rgba(0,0,0,.9);
  isolation:isolate; }
.bq__media::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  box-shadow:inset 0 0 90px 10px rgba(8,7,10,.55); border-radius:14px; }
.bq__glow{ position:absolute; inset:-2px; z-index:0;
  background:radial-gradient(circle at 50% 42%, color-mix(in oklab,var(--c) 30%, transparent), transparent 66%);
  opacity:.9; transition:background .7s var(--ease); }
.bq__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  opacity:0; transform:scale(1.06); transition:opacity .9s var(--ease), transform 1.3s var(--ease); }
.bq__media img.on{ opacity:1; transform:scale(1); }
.bq__badge{ position:absolute; z-index:4; top:18px; left:18px; display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-label); text-transform:uppercase; letter-spacing:.22em; font-size:10px; color:var(--ink);
  background:rgba(8,7,10,.5); backdrop-filter:blur(6px); border:1px solid var(--gold-line-soft); padding:7px 12px; border-radius:40px; }
.bq__badge i{ width:8px; height:8px; border-radius:50%; background:var(--c); }

/* info */
.bq__info{ position:relative; }
.bq__no{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.28em; font-size:12px; color:var(--c); }
.bq__name{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(44px,6vw,92px);
  letter-spacing:.02em; line-height:.92; margin:.3rem 0 .15rem; color:var(--ink); }
.bq__name .tm{ color:var(--c); font-size:.28em; }
.bq__tag{ font-family:var(--font-serif); font-style:italic; font-size:clamp(20px,2.3vw,31px); color:var(--ink); }
.bq__desc{ font-family:var(--font-serif); font-size:clamp(16px,1.55vw,20px); color:var(--ink-dim); font-weight:300;
  max-width:42ch; margin:1.3rem 0 1.7rem; line-height:1.55; }
.bq__includes{ display:flex; gap:14px; margin:1.4rem 0 1.6rem; }
.bq__inc{ display:flex; align-items:center; gap:.8rem; border:1px solid var(--gold-line-soft);
  border-radius:10px; padding:9px 14px 9px 9px; background:rgba(255,255,255,.02); flex:1; min-width:0; }
.bq__inc img{ width:46px; height:46px; flex:0 0 auto; border-radius:7px; object-fit:cover; background:#000; }
.bq__inc .t{ min-width:0; }
.bq__inc .t i{ font-family:var(--font-label); font-style:normal; text-transform:uppercase; letter-spacing:.16em; font-size:9px; color:var(--ink-faint); display:block; }
.bq__inc .t b{ font-family:var(--font-serif); font-weight:400; font-size:15px; color:var(--ink); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bq__scent{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.18em; font-size:11.5px; color:var(--c); }
.bq__scent b{ color:var(--ink-faint); font-weight:400; margin-right:.5rem; letter-spacing:.2em; }
.bq__anim{ opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease), transform .6s var(--ease); }
.bq__anim.in{ opacity:1; transform:none; }

/* shelf selector */
.bq__shelf{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(10px,1.4vw,20px); margin-top:6vh; }
.bq__pick{ position:relative; background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  border:1px solid var(--gold-line-soft); border-radius:12px; padding:14px 10px 12px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:.6rem; transition:.4s var(--ease); overflow:hidden; }
.bq__pick::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--pc); transform:scaleX(0); transition:transform .45s var(--ease); }
.bq__pick:hover{ transform:translateY(-5px); border-color:var(--gold-line); }
.bq__pick.on{ border-color:color-mix(in oklab,var(--pc) 60%, var(--gold-line)); background:linear-gradient(180deg,color-mix(in oklab,var(--pc) 12%, transparent),transparent); }
.bq__pick.on::after{ transform:scaleX(1); }
.bq__pick img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; background:#000; }
.bq__pick span{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.2em; font-size:11px; color:var(--ink-dim); transition:color .3s; }
.bq__pick.on span{ color:var(--ink); }

@media (max-width:900px){
  .bq__stage{ grid-template-columns:1fr; gap:3vh; }
  .bq__media{ max-width:520px; margin:0 auto; width:100%; }
  .bq__info{ text-align:center; }
  .bq__desc{ margin-left:auto; margin-right:auto; }
  .bq__includes{ justify-content:center; }
  .bq__shelf{ grid-template-columns:repeat(5,1fr); gap:8px; }
  .bq__pick{ padding:8px 5px 9px; }
  .bq__pick span{ font-size:9px; letter-spacing:.12em; }
}
@media (max-width:560px){
  .bq__includes{ flex-direction:column; }
}

/* ============================================================
   THE ANATOMY — layered pearl diagram (interactive)
   ============================================================ */
.anatomy{ padding:15vh 0 14vh; }
.anatomy__head{ text-align:center; max-width:760px; margin:0 auto; padding:0 22px; }
.anatomy__stage{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,90px);
  align-items:center; max-width:1240px; margin:7vh auto 0; padding:0 clamp(22px,5vw,60px); }

.anatomy__pearl{ position:relative; aspect-ratio:1; display:grid; place-items:center; }
.anatomy__glow{ position:absolute; inset:8%; border-radius:50%;
  background:radial-gradient(circle, rgba(216,180,106,.34), transparent 64%); filter:blur(26px);
  animation:anGlow 6s ease-in-out infinite alternate; }
@keyframes anGlow{ from{opacity:.7;transform:scale(1)} to{opacity:1;transform:scale(1.06)} }
.anatomy__pearl > img{ position:relative; z-index:1; width:84%; height:84%; object-fit:contain;
  border-radius:50%; filter:drop-shadow(0 40px 80px rgba(0,0,0,.7)); }
.anatomy__rings{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; overflow:visible; }
.anatomy__rings .ar{ fill:none; stroke:rgba(216,180,106,.0); stroke-width:.7;
  vector-effect:non-scaling-stroke; transition:stroke .45s, filter .45s; }
.anatomy__rings .ar.lit{ stroke:var(--gold-solid); filter:drop-shadow(0 0 6px rgba(216,180,106,.7)); }
.anatomy__cue{ position:absolute; bottom:-2%; left:50%; transform:translateX(-50%); z-index:3;
  font-family:var(--font-label); text-transform:uppercase; letter-spacing:.24em; font-size:10px; color:var(--ink-faint); }

.anatomy__layers{ display:flex; flex-direction:column; gap:14px; }
.an-layer{ position:relative; display:flex; align-items:flex-start; gap:1.2rem; cursor:default;
  border:1px solid var(--gold-line-soft); border-radius:14px; padding:22px 24px;
  background:linear-gradient(180deg, rgba(255,255,255,.022), transparent);
  transition:border-color .45s var(--ease), background .45s, transform .45s var(--ease); }
.an-layer:hover, .an-layer.on{ border-color:var(--gold-line); transform:translateX(6px);
  background:linear-gradient(180deg, rgba(216,180,106,.08), transparent); }
.an-layer__no{ font-family:var(--font-display); font-size:clamp(26px,3vw,40px); line-height:1;
  color:transparent; background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; flex:0 0 auto; min-width:1.6em; }
.an-layer__b h3{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(20px,2vw,28px); color:var(--ink); margin-bottom:.2rem; }
.an-layer__b .role{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.2em; font-size:10px; color:var(--gold-solid); }
.an-layer__b p{ font-family:var(--font-serif); font-weight:300; font-size:clamp(15px,1.45vw,19px);
  color:var(--ink-dim); line-height:1.5; margin-top:.5rem; max-width:42ch; }

@media (max-width:900px){
  .anatomy__stage{ grid-template-columns:1fr; gap:4vh; }
  .anatomy__pearl{ max-width:420px; margin:0 auto; width:100%; }
  .an-layer:hover, .an-layer.on{ transform:none; }
}

/* ============================================================
   NAVIGATION — luxury fixed bar + mobile overlay
   ============================================================ */
.nav{ position:fixed; top:0; left:0; right:0; z-index:60;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s; 
  border-bottom:1px solid transparent; }
.nav::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:1; transition:opacity .5s;
  background:linear-gradient(180deg, rgba(8,7,10,.55), transparent); }
.nav.scrolled{ background:rgba(10,8,11,.72); backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:var(--gold-line-soft); }
.nav.scrolled::before{ opacity:0; }
.nav.hide{ transform:translateY(-100%); transition:transform .45s var(--ease), background .5s, border-color .5s; }
.nav__inner{ max-width:1320px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding:clamp(12px,1.6vw,18px) clamp(20px,4vw,54px); }
.nav__brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:0 0 auto; }
.nav__brand img{ width:30px; height:30px; object-fit:contain; filter:drop-shadow(0 0 12px rgba(216,180,106,.4)); }
.nav__name{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.2em;
  font-size:clamp(14px,1.4vw,17px); color:var(--ink); white-space:nowrap; }
.nav__links{ display:flex; align-items:center; gap:clamp(1.1rem,2.4vw,2.6rem); }
.nav__links a{ position:relative; text-decoration:none; font-family:var(--font-label);
  text-transform:uppercase; letter-spacing:.2em; font-size:12px; color:var(--ink-dim);
  padding:6px 0; transition:color .3s; white-space:nowrap; }
.nav__links a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; margin:0 auto;
  width:0; background:var(--gold-grad); transition:width .4s var(--ease); }
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after,.nav__links a.active::after{ width:100%; }
.nav__links a.active{ color:var(--gold-solid); }
.nav__right{ display:flex; align-items:center; gap:1rem; flex:0 0 auto; }
.nav__cta{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.22em; font-size:11.5px;
  color:#1a1407; background:var(--gold-grad); padding:11px 22px; border-radius:40px; text-decoration:none;
  transition:transform .35s var(--ease), filter .35s; white-space:nowrap; }
.nav__cta:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.nav__burger span{ width:24px; height:1.5px; background:var(--ink); display:block; transition:.4s var(--ease); transform-origin:center; }

/* mobile overlay menu */
.navmenu{ position:fixed; inset:0; z-index:59; background:rgba(8,7,10,.97); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:0 8vw; opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s; }
.navmenu.open{ opacity:1; visibility:visible; }
.navmenu__links{ display:flex; flex-direction:column; gap:clamp(.5rem,1.6vh,1.1rem); }
.navmenu__links a{ display:flex; align-items:baseline; gap:1.2rem; text-decoration:none;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(30px,7vw,52px); color:var(--ink); line-height:1.04;
  opacity:0; transform:translateY(18px); transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s; }
.navmenu.open .navmenu__links a{ opacity:1; transform:none; }
.navmenu__links a i{ font-family:var(--font-label); font-style:normal; font-size:12px; letter-spacing:.2em; color:var(--gold-solid); }
.navmenu__links a:hover{ color:var(--gold-solid); }
.navmenu__cta{ color:var(--gold-solid) !important; margin-top:1rem; }
.navmenu__foot{ position:absolute; bottom:6vh; left:8vw; font-family:var(--font-label); letter-spacing:.3em;
  text-transform:uppercase; font-size:10px; color:var(--ink-faint); }
/* stagger */
.navmenu.open .navmenu__links a:nth-child(1){ transition-delay:.08s; }
.navmenu.open .navmenu__links a:nth-child(2){ transition-delay:.13s; }
.navmenu.open .navmenu__links a:nth-child(3){ transition-delay:.18s; }
.navmenu.open .navmenu__links a:nth-child(4){ transition-delay:.23s; }
.navmenu.open .navmenu__links a:nth-child(5){ transition-delay:.28s; }
.navmenu.open .navmenu__links a:nth-child(6){ transition-delay:.33s; }
.navmenu.open .navmenu__links a:nth-child(7){ transition-delay:.38s; }

body.menu-open .nav__burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2){ opacity:0; }
body.menu-open .nav__burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:880px){
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
}

/* ============================================================
   TREASURES — expanding-panel ingredient gallery
   ============================================================ */
.treasures{ display:flex; gap:10px; max-width:1340px; margin:7vh auto 0;
  padding:0 clamp(20px,4vw,54px); height:min(74vh,680px); }
.tr{ position:relative; flex:1; min-width:0; border-radius:14px; overflow:hidden; cursor:pointer;
  border:1px solid var(--gold-line-soft); background:#0c0a0d;
  transition:flex-grow .7s var(--ease), box-shadow .6s var(--ease), border-color .6s; }
.tr.on{ flex-grow:5.4; border-color:var(--gold-line); box-shadow:0 40px 90px -40px rgba(0,0,0,.9); }
.tr__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(.62) saturate(.92); transition:filter .7s var(--ease), transform 8s ease-out; transform:scale(1.04); }
.tr.on .tr__img{ filter:brightness(.92) saturate(1.05); transform:scale(1.12); }
.tr__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(8,7,10,.92) 2%, rgba(8,7,10,.3) 40%, rgba(8,7,10,.55) 100%); opacity:.9; transition:opacity .6s; }
.tr.on .tr__scrim{ opacity:1; background:linear-gradient(0deg, rgba(8,7,10,.9) 0%, rgba(8,7,10,.15) 48%, rgba(8,7,10,.25) 100%); }

/* collapsed rail label (vertical) */
.tr__rail{ position:absolute; z-index:2; left:0; right:0; bottom:0; top:0;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:20px 6px; transition:opacity .4s; }
.tr.on .tr__rail{ opacity:0; pointer-events:none; }
.tr__no{ font-family:var(--font-label); letter-spacing:.2em; font-size:12px; color:var(--gold-solid); }
.tr__vname{ writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.18em;
  font-size:clamp(15px,1.5vw,20px); color:var(--ink); white-space:nowrap; }
.tr__dot{ width:7px; height:7px; transform:rotate(45deg); background:var(--gold-grad); }

/* expanded content */
.tr__open{ position:absolute; z-index:3; left:0; right:0; bottom:0; padding:clamp(24px,3vw,42px);
  display:flex; flex-direction:column; align-items:flex-start; gap:.5rem;
  opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease) .12s, transform .7s var(--ease) .12s; }
.tr.on .tr__open{ opacity:1; transform:none; }
.tr__open .role{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.24em; font-size:11px; color:var(--gold-solid); }
.tr__open h3{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(28px,3.4vw,54px); line-height:1; color:var(--ink); margin:.1rem 0; }
.tr__open .origin{ font-family:var(--font-serif); font-style:italic; font-size:clamp(15px,1.4vw,19px); color:var(--gold-solid); margin-bottom:.4rem; }
.tr__open p{ font-family:var(--font-serif); font-weight:300; font-size:clamp(15px,1.4vw,19px);
  color:var(--ink-dim); max-width:42ch; line-height:1.5; }
.tr__open .no-lg{ position:absolute; right:clamp(20px,2.4vw,38px); top:clamp(18px,2.4vw,34px);
  font-family:var(--font-display); font-size:clamp(30px,3.4vw,56px); color:rgba(255,255,255,.16); }

/* mobile stacked version */
.treasures-m{ display:none; }
@media (max-width:880px){
  .treasures{ display:none; }
  .treasures-m{ display:grid; grid-template-columns:1fr; gap:14px; max-width:560px; margin:5vh auto 0; padding:0 22px; }
  .trm{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/5; border:1px solid var(--gold-line-soft); }
  .trm img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.8); }
  .trm__scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,7,10,.92), rgba(8,7,10,.1) 55%); }
  .trm__c{ position:absolute; left:0; right:0; bottom:0; padding:24px; }
  .trm__c .role{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.22em; font-size:10px; color:var(--gold-solid); }
  .trm__c h3{ font-family:var(--font-display); text-transform:uppercase; font-size:30px; color:var(--ink); margin:.2rem 0; }
  .trm__c .origin{ font-family:var(--font-serif); font-style:italic; color:var(--gold-solid); font-size:16px; margin-bottom:.4rem; }
  .trm__c p{ font-family:var(--font-serif); font-weight:300; color:var(--ink-dim); font-size:16px; }
}