:root{--coffee:#241914;--porcelain:#F2E9DD;--pink:#FF3898;--citron:#E9FA49;--plum:#541F2A}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--porcelain);color:var(--coffee);font-family:Outfit,sans-serif;overflow-x:hidden}img{display:block;width:100%}a{color:inherit}.nav{position:fixed;z-index:20;top:0;left:0;right:0;height:78px;padding:0 4vw;display:flex;align-items:center;gap:36px;color:var(--porcelain);transition:.35s}.nav.is-scrolled{height:66px;background:rgba(36,25,20,.92);backdrop-filter:blur(16px)}.logo{width:145px;margin-right:auto}.nav nav{display:flex;gap:26px}.nav nav a,.pill{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}.pill{background:var(--pink);color:var(--coffee);padding:12px 17px;border-radius:30px}.hero{height:100svh;min-height:680px;position:relative;background:var(--coffee);overflow:hidden}.hero-bg{height:100%;object-fit:cover;object-position:center;transform:scale(1.015)}.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,13,8,.72),rgba(28,13,8,.08) 65%),linear-gradient(0deg,rgba(28,13,8,.35),transparent 50%)}.hero-copy{position:absolute;left:7vw;bottom:10vh;color:var(--porcelain);max-width:680px}.kicker{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}.hero h1,.intro h2,.lacquer h2,.campaign h2,.circle h2{font-family:Fraunces,serif;font-weight:400;line-height:.88;margin:.2em 0}.hero h1{font-size:clamp(66px,9vw,138px)}.hero-copy>p:not(.kicker){font-size:16px;line-height:1.5}.line-link{display:inline-block;margin-top:24px;font-size:11px;font-weight:700;letter-spacing:.16em;text-decoration:none;border-bottom:1px solid;padding-bottom:6px}.intro{padding:120px 7vw;display:grid;grid-template-columns:.55fr 1fr .9fr;gap:5vw;align-items:end}.intro h2,.lacquer h2,.campaign h2,.circle h2{font-size:clamp(60px,7vw,110px)}.copy{font-size:19px;line-height:1.5}.lacquer{min-height:800px;background:var(--coffee);color:var(--porcelain);display:grid;grid-template-columns:46% 54%}.lacquer-copy{padding:110px 7vw;align-self:center}.lacquer-copy>p:not(.kicker,.note){font-size:18px;line-height:1.5;max-width:520px}.pink{color:var(--pink)}.chips{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0}.chips span{border:1px solid rgba(242,233,221,.45);border-radius:40px;padding:8px 12px;font-size:9px;font-weight:700;letter-spacing:.13em}.note{font-size:10px;line-height:1.5;opacity:.55;max-width:560px}.product-visual{overflow:hidden;background:var(--plum)}.product-visual img{height:100%;object-fit:cover}.campaign{background:var(--coffee);color:var(--porcelain);padding-top:115px}.campaign-head{padding:0 7vw 65px}.gallery{height:780px;display:grid;grid-template-columns:1.15fr .85fr .85fr;grid-template-rows:1fr 1fr;gap:2px}.gallery figure{margin:0;overflow:hidden;background:var(--plum)}.gallery img{height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}.gallery figure:hover img{transform:scale(1.04)}.g1{grid-row:1/3}.g2{grid-column:2/4}.ticker{background:var(--citron);overflow:hidden;padding:16px 0;font-size:11px;font-weight:700;letter-spacing:.18em;white-space:nowrap}.ticker div{width:max-content;animation:move 22s linear infinite}@keyframes move{to{transform:translateX(-50%)}}.circle{min-height:720px;background:var(--coffee);color:var(--porcelain);display:grid;grid-template-columns:48% 52%}.circle-img{overflow:hidden}.circle-img img{height:100%;object-fit:cover}.circle-copy{padding:100px 8vw;align-self:center}.circle-copy>p:not(.kicker,.note){font-size:18px;line-height:1.5}.circle form{display:flex;border-bottom:1px solid rgba(242,233,221,.6);margin-top:34px}.circle input{flex:1;background:none;border:0;outline:0;color:var(--porcelain);padding:16px 0;font:inherit;font-size:11px}.circle button{border:0;background:var(--pink);padding:10px 20px;border-radius:30px;font-weight:700;cursor:pointer}#thanks{color:var(--citron);font-size:12px;letter-spacing:.15em}footer{background:var(--pink);padding:36px 5vw;display:flex;align-items:center;gap:30px;font-size:9px;font-weight:700;letter-spacing:.15em}footer img{width:145px}footer span:last-child{margin-left:auto}.reveal{opacity:0;transform:translateY(34px);transition:.8s cubic-bezier(.2,.8,.2,1)}.reveal.show{opacity:1;transform:none}.media-reveal{clip-path:inset(0 0 100% 0);transition:clip-path 1s cubic-bezier(.2,.8,.2,1)}.media-reveal.show{clip-path:inset(0)}@media(max-width:850px){.nav{padding:0 5vw}.nav nav{display:none}.logo{width:125px}.intro{grid-template-columns:1fr;padding:85px 7vw}.lacquer,.circle{grid-template-columns:1fr}.lacquer-copy,.circle-copy{padding:85px 7vw}.product-visual{min-height:600px}.gallery{height:auto;grid-template-columns:1fr 1fr;grid-template-rows:380px 300px 300px}.g1{grid-row:auto;grid-column:1/3}.g2{grid-column:1/3}.circle-img{height:60svh}footer{flex-wrap:wrap}footer span:last-child{margin-left:0;width:100%}}@media(max-width:520px){.hero-copy{left:7vw;right:7vw}.hero h1{font-size:62px}.intro h2,.lacquer h2,.campaign h2,.circle h2{font-size:55px}.gallery{grid-template-columns:1fr;grid-template-rows:repeat(4,320px)}.g1,.g2,.g3,.g4{grid-column:1;grid-row:auto}.product-visual{min-height:500px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal,.media-reveal,.gallery img{transition:none}.ticker div{animation:none}}
/* UX V4 — sensory interaction */
.pill{min-height:48px;display:inline-flex;align-items:center;justify-content:center;transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s,box-shadow .3s}.pill:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,56,152,.2)}
.line-link{min-height:48px;display:inline-flex;align-items:center}
.nav nav a{position:relative}.nav nav a:after{content:"";position:absolute;left:0;right:100%;bottom:10px;height:1px;background:var(--pink);transition:right .35s cubic-bezier(.2,.8,.2,1)}.nav nav a:hover:after{right:0}
@media(max-width:850px){.nav nav{display:flex;gap:14px}.nav nav a{display:none}.nav nav a[href*="preorder"],.nav nav a[href*="company"]{display:none}.nav .pill{margin-left:auto}.logo{margin-right:auto}}

.ux-ready body{animation:pageIn .45s cubic-bezier(.2,.8,.2,1) both}.ux-ready body.page-leaving{opacity:0;transform:translateY(5px);transition:opacity .22s,transform .22s}@keyframes pageIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ux-ready body{animation:none}}

/* FINAL UX SPEC */
html{scroll-behavior:smooth}#lacquer,#circle{scroll-margin-top:90px}
.nav{transition:background .25s,box-shadow .25s}.nav.is-scrolled{background:#241914!important;box-shadow:0 4px 24px rgba(0,0,0,.12)}
.menu-toggle,.menu-close{display:none}
.benefit-bento{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:28px 0}
.benefit-bento>div{border:1px solid rgba(36,25,20,.18);border-radius:18px;padding:20px;min-height:145px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .35s,background .35s}
.benefit-bento>div:hover{transform:translateY(-4px);background:rgba(255,255,255,.3)}
.benefit-icon{font-family:Fraunces,serif;font-size:28px;margin-bottom:auto}.benefit-bento strong{font-size:11px;letter-spacing:.11em}.benefit-bento small{font-size:11px;opacity:.6;margin-top:7px;line-height:1.3}
.community-reassurance{font-size:14px!important;line-height:1.55;max-width:660px}.community-reassurance a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
.circle-submit{border:0;cursor:pointer;min-height:48px;padding:0 24px;border-radius:999px}
.mobile-menu{display:none}
@media(max-width:1023px){
 .desktop-nav,.desktop-circle{display:none!important}.menu-toggle{display:flex;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:7px;border:0;background:transparent;cursor:pointer;margin-left:auto;position:relative;z-index:1102}
 .menu-toggle span{display:block;width:24px;height:1px;background:var(--porcelain)}
 .mobile-menu{display:flex;position:fixed;inset:0;background:var(--coffee);z-index:1101;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,visibility .35s;align-items:center;padding:9vw}
 .mobile-menu.open{opacity:1;visibility:visible;pointer-events:auto}.mobile-menu nav{display:flex;flex-direction:column;gap:32px;width:100%}
 .mobile-menu nav a{font-family:Fraunces,serif;color:var(--porcelain);font-size:clamp(28px,8vw,52px);text-decoration:none;line-height:1.05}
 .mobile-main-cta{color:var(--pink)!important}.menu-close{display:flex;position:absolute;right:20px;top:18px;width:44px;height:44px;border:0;background:transparent;color:var(--porcelain);font-size:36px;align-items:center;justify-content:center;cursor:pointer}
 .benefit-bento{grid-template-columns:1fr 1fr}
 #circle .join,.circle-submit{width:100%;justify-content:center}
}
@media(max-width:520px){.benefit-bento{grid-template-columns:1fr 1fr}.benefit-bento>div{min-height:130px;padding:16px}}

/* V5.4 — MENU FIX ONLY */
.nav,
.nav.is-scrolled{
  background:#241914 !important;
  color:#F2E9DD !important;
  opacity:1 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.nav .desktop-nav a,
.nav .logo,
.nav .menu-toggle{
  color:#F2E9DD !important;
}
.nav .desktop-nav a{opacity:1!important}
.nav .desktop-nav a:after{background:#FF3898!important}
.nav .primary-cta{
  background:#FF3898!important;
  color:#241914!important;
}
.nav .logo img{opacity:1!important}
.menu-toggle span{background:#F2E9DD!important}

/* Full-screen mobile menu must sit ABOVE the sticky header */
.mobile-menu{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  z-index:99999!important;
  background:#241914!important;
  color:#F2E9DD!important;
  padding:96px 8vw 50px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(-8px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s ease!important;
}
.mobile-menu.open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateY(0)!important;
}
.mobile-menu nav{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:32px!important;
  width:100%!important;
  min-height:70vh!important;
}
.mobile-menu nav a{
  display:block!important;
  color:#F2E9DD!important;
  opacity:1!important;
  visibility:visible!important;
  font-family:Fraunces,serif!important;
  font-size:clamp(32px,8vw,58px)!important;
  line-height:1!important;
  text-decoration:none!important;
}
.mobile-menu nav .mobile-main-cta{color:#FF3898!important}
.menu-close{
  display:flex!important;
  position:absolute!important;
  top:18px!important;
  right:18px!important;
  width:44px!important;
  height:44px!important;
  z-index:100001!important;
  color:#F2E9DD!important;
  align-items:center!important;
  justify-content:center!important;
}
@media(min-width:1024px){
  .mobile-menu{display:none!important}
}