/* =========================================================
   LUMÉ — Design tokens
   Palette: ivory / blush / pearl-gold / ink / sage
========================================================= */
:root{
  --ivory: #FAF5EE;
  --ivory-deep: #F3EAE0;
  --blush: #F0D9CD;
  --blush-soft: #F7E7DF;
  --gold: #C69A5C;
  --gold-dark: #A87D42;
  --ink: #2A2420;
  --ink-soft: #6b6259;
  --sage: #7C8A6C;
  --white: #FFFFFF;

  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Jost', sans-serif;

  --container: 1240px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-body);
  background: var(--ivory);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-weight: 400;
}
img{display:block; max-width:100%; height:auto;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{font-family: var(--font-display); font-weight:500; line-height:1.05; letter-spacing:-0.01em;}
em{font-style:italic; color: var(--gold-dark);}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
ul{list-style:none;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- utility ---------- */
.eyebrow{
  font-size:12px; letter-spacing:.22em; font-weight:600; color:var(--gold-dark);
  text-transform:uppercase; margin-bottom:14px; display:inline-block;
}
.section-head{
  max-width: var(--container); margin:0 auto; padding: 0 32px 48px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.section-head--center{ text-align:center; justify-content:center; flex-direction:column; align-items:center;}
.section-head h2{ font-size: clamp(28px, 4vw, 44px); }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:15px 30px; border-radius:100px; font-size:14px; letter-spacing:.03em;
  transition: transform .35s var(--ease), background .35s, color .35s, box-shadow .35s;
}
.btn--dark{ background:var(--ink); color:var(--ivory); }
.btn--dark:hover{ background:var(--gold-dark); transform:translateY(-2px); box-shadow:0 10px 24px rgba(168,125,66,.35);}
.btn--ghost{ color:var(--ink); border:1px solid rgba(42,36,32,.25); }
.btn--ghost span{ transition: transform .3s var(--ease); display:inline-block;}
.btn--ghost:hover{ border-color: var(--ink); }
.btn--ghost:hover span{ transform:translateX(4px); }
.btn--small{ padding:9px 18px; font-size:12px; background:var(--ink); color:var(--ivory); border-radius:100px;}
.btn--small:hover{ background:var(--gold-dark); }

.link-underline{
  position:relative; font-size:14px; letter-spacing:.03em; padding-bottom:4px; font-weight:500;
}
.link-underline::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--ink);
  transform:scaleX(1); transform-origin:left;
}
.link-underline span{ transition:transform .3s var(--ease); display:inline-block; }
.link-underline:hover span{ transform:translateX(4px); }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* =========================================================
   Loading veil
========================================================= */
.veil{
  position:fixed; inset:0; background:var(--ivory); z-index:9999;
  display:flex; align-items:center; justify-content:center;
  transition: opacity .7s var(--ease), visibility .7s var(--ease);
}
.veil span{
  font-family:var(--font-display); font-style:italic; font-size:15vw; color:var(--ink);
  opacity:.12; letter-spacing:.02em;
}
.veil.hide{ opacity:0; visibility:hidden; }

/* =========================================================
   Top marquee bar
========================================================= */
.topbar{
  background:var(--ink); color:var(--ivory); overflow:hidden; height:34px;
  display:flex; align-items:center; font-size:11px; letter-spacing:.14em;
}
.topbar__track{ display:flex; white-space:nowrap; animation: marquee 28s linear infinite; }
.topbar__track span{ padding-right:0; }
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* =========================================================
   Nav
========================================================= */
.nav{
  position:sticky; top:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 40px; background: rgba(250,245,238,.75); backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(42,36,32,.08);
  transition: padding .35s var(--ease);
}
.nav.scrolled{ padding:12px 40px; }
.nav__logo{ font-family:var(--font-display); font-size:24px; letter-spacing:.04em; font-weight:600; }
.nav__logo span{ color:var(--gold-dark); font-style:italic; }
.nav__links{ display:flex; gap:34px; font-size:14px; }
.nav__links a{ position:relative; padding:4px 0; }
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold-dark);
  transition:width .3s var(--ease);
}
.nav__links a:hover::after{ width:100%; }
.nav__cta{
  font-size:13px; padding:11px 22px; border:1px solid var(--ink); border-radius:100px;
  transition: background .3s, color .3s;
}
.nav__cta:hover{ background:var(--ink); color:var(--ivory); }
.nav__burger{ display:none; flex-direction:column; gap:5px; width:26px; }
.nav__burger span{ height:1.5px; background:var(--ink); width:100%; transition:.3s; }

.mobile-menu{
  position:fixed; inset:0 0 auto 0; top:0; background:var(--ivory); z-index:600;
  height:0; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:28px; transition:height .5s var(--ease);
  font-family:var(--font-display); font-size:28px;
}
.mobile-menu.open{ height:100vh; }
.mobile-menu__cta{
  font-family:var(--font-body); font-size:14px; border:1px solid var(--ink); padding:12px 26px; border-radius:100px; margin-top:10px;
}

/* =========================================================
   Side dot nav
========================================================= */
.dotnav{
  position:fixed; right:28px; top:50%; transform:translateY(-50%); z-index:400;
  display:flex; flex-direction:column; gap:16px;
}
.dotnav button{ display:flex; align-items:center; gap:10px; justify-content:flex-end; }
.dotnav i{
  width:8px; height:8px; border-radius:50%; background:rgba(42,36,32,.25);
  transition: background .3s, transform .3s; display:block;
}
.dotnav em{
  font-style:normal; font-size:11px; letter-spacing:.05em; opacity:0; transform:translateX(6px);
  transition: opacity .3s, transform .3s; white-space:nowrap; background:var(--ink); color:var(--ivory);
  padding:4px 10px; border-radius:6px;
}
.dotnav button:hover em{ opacity:1; transform:translateX(0); }
.dotnav button.active i{ background:var(--gold-dark); transform:scale(1.4); }

@media (max-width: 900px){ .dotnav{ display:none; } }

/* =========================================================
   HERO — split layout, signature glow
========================================================= */
.hero{
  max-width:var(--container); margin:0 auto; padding: 70px 40px 60px;
  display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:center;
  min-height:88vh;
}
.hero__text h1{ font-size: clamp(40px, 5.4vw, 74px); margin-bottom:22px; }
.hero__desc{ max-width:440px; color:var(--ink-soft); font-size:16px; line-height:1.7; margin-bottom:34px;}
.hero__actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px; }
.hero__stats{ display:flex; gap:36px; border-top:1px solid rgba(42,36,32,.12); padding-top:26px; }
.hero__stats div{ display:flex; flex-direction:column; gap:4px; }
.hero__stats strong{ font-family:var(--font-display); font-size:26px; }
.hero__stats span{ font-size:12px; color:var(--ink-soft); }

.hero__visual{ position:relative; display:flex; align-items:center; justify-content:center; }
.hero__frame{
  position:relative; width:100%; aspect-ratio: 4/5; border-radius: var(--radius-lg);
  overflow:hidden; box-shadow: 0 40px 80px -30px rgba(42,36,32,.35);
  z-index:2;
}
.hero__frame img{ width:100%; height:100%; object-fit:cover; }

.glow{
  position:absolute; border-radius:50%; filter:blur(60px); z-index:1; opacity:.55;
  animation: drift 14s ease-in-out infinite alternate;
}
.glow--1{ width:340px; height:340px; background:radial-gradient(circle, var(--gold) 0%, transparent 70%); top:-60px; right:-60px; }
.glow--2{ width:300px; height:300px; background:radial-gradient(circle, var(--sage) 0%, transparent 70%); bottom:-60px; left:-40px; animation-delay:3s;}
.glow--3{ width:420px; height:420px; background:radial-gradient(circle, var(--gold) 0%, transparent 70%); top:-120px; left:50%; transform:translateX(-50%); opacity:.4;}
@keyframes drift{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(20px,-24px) scale(1.12); }
}

.floatcard{
  position:absolute; z-index:3; background:rgba(255,255,255,.75); backdrop-filter:blur(12px);
  border-radius:16px; padding:14px 18px; box-shadow:0 20px 40px -20px rgba(42,36,32,.25);
  display:flex; align-items:center; gap:12px; font-size:12px; max-width:230px;
  animation: floaty 6s ease-in-out infinite;
}
.floatcard strong{ font-family:var(--font-display); font-size:20px; display:block; }
.floatcard small{ color:var(--ink-soft); }
.floatcard--top{ top:8%; left:-8%; }
.floatcard--bottom{ bottom:10%; right:-6%; animation-delay:1.5s; }
.floatcard__dot{ width:9px; height:9px; border-radius:50%; background:var(--sage); flex-shrink:0; }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }

@media (max-width: 980px){
  .hero{ grid-template-columns:1fr; padding-top:40px; min-height:auto; }
  .floatcard--top{ left:0; top:-6%; }
  .floatcard--bottom{ right:0; bottom:-4%; }
}

/* =========================================================
   PHILOSOPHY — diagonal clipped section
========================================================= */
.philosophy{ position:relative; padding:120px 0 100px; background:var(--ivory-deep); overflow:hidden;}
.philosophy__clip{
  position:absolute; top:0; left:0; width:100%; height:80px; background:var(--ivory);
  clip-path: polygon(0 0, 100% 0, 100% 30%, 0 100%);
}
.philosophy__inner{
  max-width:var(--container); margin:0 auto; padding:0 40px;
  display:grid; grid-template-columns: .8fr 1.2fr; gap:70px; align-items:center;
}
.philosophy__img{ border-radius: var(--radius-lg); overflow:hidden; box-shadow:0 30px 60px -30px rgba(42,36,32,.3); }
.philosophy__img img{ aspect-ratio:4/5; object-fit:cover; }
.philosophy__content h2{ font-size:clamp(28px,3.6vw,42px); margin-bottom:22px; }
.philosophy__content p{ color:var(--ink-soft); line-height:1.8; margin-bottom:26px; max-width:540px; }
.philosophy__list{ margin-bottom:30px; display:flex; flex-direction:column; gap:14px; }
.philosophy__list li{ display:flex; gap:14px; align-items:baseline; font-size:15px; }
.philosophy__list span{ font-family:var(--font-display); color:var(--gold-dark); font-size:15px; font-weight:600;}

@media (max-width:900px){
  .philosophy__inner{ grid-template-columns:1fr; gap:36px; }
}

/* =========================================================
   INGREDIENTS carousel
========================================================= */
.ingredients{ padding:110px 0 100px; }
.carousel-controls{ display:flex; gap:10px; }
.carousel-controls button{
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(42,36,32,.2);
  transition: background .3s, color .3s, border-color .3s;
}
.carousel-controls button:hover{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }

.ing-track{
  display:flex; gap:22px; overflow-x:auto; padding: 6px 40px 30px; scroll-snap-type:x mandatory;
  max-width:var(--container); margin:0 auto;
  scrollbar-width: none;
}
.ing-track::-webkit-scrollbar{ display:none; }
.ing-card{
  flex:0 0 280px; scroll-snap-align:start; border-radius:var(--radius-md); overflow:hidden;
  background:var(--white); box-shadow:0 20px 40px -28px rgba(42,36,32,.25);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.ing-card:hover{ transform:translateY(-8px); box-shadow:0 30px 50px -24px rgba(42,36,32,.3); }
.ing-card img{ height:200px; object-fit:cover; width:100%; }
.ing-card__body{ padding:20px 22px 26px; }
.ing-card__tag{
  font-size:11px; letter-spacing:.08em; color:var(--sage); text-transform:uppercase; font-weight:600;
}
.ing-card h3{ font-size:22px; margin:8px 0 8px; }
.ing-card p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }

/* =========================================================
   PRODUCTS bento
========================================================= */
.products{ padding:100px 0 110px; background:var(--ivory-deep); }
.bento{
  max-width:var(--container); margin:0 auto; padding:0 40px;
  display:grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; gap:26px;
}
.bento__item--large{ grid-row: 1 / 3; }
.bento__item{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--white);
  box-shadow:0 24px 50px -32px rgba(42,36,32,.3);
}
.bento__item img{ width:100%; height:56%; object-fit:cover; }
.bento__item--large img{ height:60%; }
.bento__info{ padding:24px 26px 28px; }
.bento__info h3{ font-size:24px; margin:8px 0 10px; }
.bento__info p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin-bottom:18px; max-width:340px; }
.bento__row{ display:flex; align-items:center; justify-content:space-between; }
.bento__row strong{ font-family:var(--font-display); font-size:20px; }

@media (max-width:900px){
  .bento{ grid-template-columns:1fr; }
  .bento__item--large{ grid-row:auto; }
}

/* =========================================================
   ROUTINE steps (legitimate numbered sequence)
========================================================= */
.routine{ padding:110px 0; }
.routine__grid{
  max-width:var(--container); margin:0 auto; padding:0 40px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
}
.routine__step{
  padding:38px 30px; border-radius:var(--radius-md); background:var(--blush-soft);
  position:relative; transition: transform .4s var(--ease);
}
.routine__step:hover{ transform:translateY(-6px); }
.routine__num{ font-family:var(--font-display); font-size:44px; color:var(--gold-dark); opacity:.6; }
.routine__step h3{ font-size:24px; margin:14px 0 12px; }
.routine__step p{ font-size:14px; color:var(--ink-soft); line-height:1.7; }

@media (max-width:900px){ .routine__grid{ grid-template-columns:1fr; } }

/* =========================================================
   TESTIMONIALS marquee
========================================================= */
.journal{ padding:100px 0 110px; background:var(--ivory-deep); overflow:hidden; }
.marquee{ overflow:hidden; margin-bottom:18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track{ display:flex; gap:22px; width:max-content; animation: scrollx 42s linear infinite; }
.marquee--row2 .marquee__track{ animation-direction: reverse; animation-duration:48s; }
.marquee:hover .marquee__track{ animation-play-state: paused; }
@keyframes scrollx{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.quote{
  flex:0 0 340px; background:var(--white); border-radius:var(--radius-md); padding:26px 28px;
  box-shadow:0 18px 36px -28px rgba(42,36,32,.25);
}
.quote p{ font-size:15px; line-height:1.7; margin-bottom:16px; font-style:italic; font-family:var(--font-display); }
.quote span{ font-size:12px; color:var(--ink-soft); letter-spacing:.03em; }

/* =========================================================
   NEWSLETTER
========================================================= */
.newsletter{
  position:relative; text-align:center; padding:130px 40px; overflow:hidden;
}
.newsletter h2{ font-size:clamp(32px,5vw,54px); margin-bottom:36px; position:relative; z-index:2;}
.newsletter .eyebrow{ position:relative; z-index:2; }
.newsletter__form{
  position:relative; z-index:2; display:flex; justify-content:center; gap:12px; flex-wrap:wrap;
  max-width:460px; margin:0 auto;
}
.newsletter__form input{
  flex:1; min-width:220px; padding:16px 22px; border-radius:100px; border:1px solid rgba(42,36,32,.25);
  background:rgba(255,255,255,.6); font-family:inherit; font-size:14px;
}
.newsletter__form input:focus{ outline:2px solid var(--gold-dark); outline-offset:2px; }
.newsletter__form button{
  padding:16px 30px; background:var(--ink); color:var(--ivory); border-radius:100px; font-size:14px;
  transition: background .3s;
}
.newsletter__form button:hover{ background:var(--gold-dark); }
.newsletter__msg{ margin-top:16px; font-size:13px; color:var(--sage); position:relative; z-index:2; min-height:18px; }

/* =========================================================
   FOOTER
========================================================= */
.footer{ background:var(--ink); color:var(--ivory); padding:80px 40px 30px; }
.footer__top{
  max-width:var(--container); margin:0 auto; display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(250,245,238,.15);
}
.footer__brand p{ margin-top:14px; font-size:13.5px; color:rgba(250,245,238,.6); max-width:260px; line-height:1.7;}
.footer__brand .nav__logo{ color:var(--ivory); }
.footer__col h4{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(250,245,238,.5); margin-bottom:18px; font-weight:500;}
.footer__col a{ display:block; font-size:14px; margin-bottom:12px; color:rgba(250,245,238,.85); transition:color .3s; }
.footer__col a:hover{ color:var(--gold); }
.footer__bottom{
  max-width:var(--container); margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding-top:26px; font-size:12px; color:rgba(250,245,238,.5);
}
@media (max-width:900px){ .footer__top{ grid-template-columns:1fr 1fr; } }

/* =========================================================
   Back to top
========================================================= */
.backtotop{
  position:fixed; bottom:26px; right:26px; width:46px; height:46px; border-radius:50%;
  background:var(--ink); color:var(--ivory); display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform:translateY(10px); transition:.4s var(--ease); z-index:400;
}
.backtotop.show{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* =========================================================
   Responsive nav
========================================================= */
@media (max-width: 900px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .nav{ padding:16px 24px; }
  .hero, .ingredients, .products, .routine, .philosophy, .journal{ padding-left:0; padding-right:0; }
  .section-head, .ing-track, .bento, .routine__grid, .philosophy__inner{ padding-left:24px; padding-right:24px; }
}