/* LumiraHair premium editorial overlay — reversible v1 */
:root {
  --lh-ink: #181714;
  --lh-ivory: #f6f2ea;
  --lh-paper: #fffdf9;
  --lh-bronze: #9a7652;
  --lh-line: rgba(24, 23, 20, .15);
  --lh-display: "Cormorant Garamond", Georgia, serif;
  --lh-body: "Avenir Next", "Helvetica Neue", sans-serif;
}

html { background: var(--lh-paper); }
body { color: var(--lh-ink); background: var(--lh-paper); font-family: var(--lh-body); }

/* Content must remain readable if JS or IntersectionObserver fails. */
.animate-in { opacity: 1; transform: none; }
.animate-in.visible { animation: lh-reveal .55s cubic-bezier(.2,.7,.2,1) both; }
.hero__content { opacity: 1; transform: none; animation: none; max-width: 660px; }

.announcement-bar { background: var(--lh-ink); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.announcement-bar img { display: none; }
.site-header { background: rgba(255,253,249,.94); backdrop-filter: blur(16px); border-bottom: 1px solid var(--lh-line); }
.site-header__inner { min-height: 86px; }
.site-header__logo-icon { border-radius: 0; background: transparent; border: 1px solid var(--lh-bronze); }
.site-header__logo-text, .hero__title, .section__title { font-family: var(--lh-display); }
.main-navigation a { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

.hero { min-height: 78vh; padding: clamp(90px, 11vw, 160px) 0 100px; background: var(--lh-ivory); }
.hero__slide-bg { filter: saturate(.62) contrast(.93); }
.hero__slide::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(246,242,234,.96) 0%,rgba(246,242,234,.76) 42%,rgba(246,242,234,.08) 76%); z-index:1; }
.hero__label { border: 0; border-radius: 0; padding: 0 0 10px; background: transparent; backdrop-filter: none; color: var(--lh-bronze); letter-spacing: .18em; }
.hero__title { font-size: clamp(3.4rem, 6.4vw, 7rem); font-weight: 500; line-height: .9; letter-spacing: -.035em; }
.hero__title-accent { color: var(--lh-ink); font-style: italic; font-weight: 400; }
.hero__desc { max-width: 520px; color: rgba(24,23,20,.72); font-size: 1.05rem; line-height: 1.75; }
.btn { border-radius: 0; min-height: 50px; padding: 14px 26px; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; box-shadow: none; }
.btn--primary { background: var(--lh-ink); color: white; }
.btn--outline { border-color: var(--lh-ink); color: var(--lh-ink); }
.hero__stats { border-color: var(--lh-line); }
.hero__stat-number { color: var(--lh-ink); font-family: var(--lh-display); font-weight: 500; }

.section { padding-block: clamp(76px, 9vw, 132px); }
.section__header { max-width: 780px; margin-bottom: 56px; }
.section__title { font-size: clamp(2.5rem, 4.6vw, 4.8rem); font-weight: 500; line-height: 1; }
.product-card, .feature-card, .testimonial-card { border-radius: 0; border-color: var(--lh-line); box-shadow: none; background: var(--lh-paper); }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(24,23,20,.08); }
.product-card__image { aspect-ratio: 4 / 5; }
.product-card__badge { border-radius: 0; background: var(--lh-ink); letter-spacing: .12em; }
.product-card__title { font-family: var(--lh-display); font-size: 1.35rem; font-weight: 500; }
.site-footer__identity { margin-top: 20px; font-style: normal; font-size: 12px; line-height: 1.8; color: rgba(255,255,255,.7); }
.site-footer__identity a { color: inherit; text-decoration: none; }
.site-footer__identity a:hover { color: white; }

@keyframes lh-reveal { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .animate-in { opacity:1 !important; transform:none !important; } }
@media (max-width: 768px) {
  .announcement-bar__sep, .announcement-bar__item:nth-child(n+2) { display:none; }
  .site-header__inner { min-height: 70px; }
  .hero { min-height: 680px; padding: 88px 0 64px; }
  .hero__slide::before { background: linear-gradient(180deg,rgba(246,242,234,.88),rgba(246,242,234,.64) 65%,rgba(246,242,234,.84)); }
  .hero__content { width: 100%; min-width: 0; }
  .hero__title { max-width: 100%; font-size: 2.5rem; line-height: .94; overflow-wrap: anywhere; }
  .hero__desc { max-width: 100%; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { width: 100%; max-width: 100%; justify-content: center; }
  .hero__stats { display:none; }
}