:root { --milk:#f0efe8; --ink:#111; --blue:#1f42ff; --lime:#c8ff16; --line:rgba(17,17,17,.22); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--milk); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
button,input { font:inherit; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; }

.topbar { height:76px; padding:0 2vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; background:rgba(240,239,232,.92); backdrop-filter:blur(14px); }
.brand,.footer-brand { font-size:clamp(1.6rem,2.2vw,2.4rem); font-weight:900; letter-spacing:-.09em; }
.brand span,.footer-brand span { color:var(--blue); }
.nav { display:flex; gap:2.2rem; font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.nav a,.footer-links a { position:relative; }
.nav a::after,.footer-links a::after { content:""; position:absolute; left:0; right:100%; bottom:-5px; height:1px; background:currentColor; transition:right .25s; }
.nav a:hover::after,.footer-links a:hover::after { right:0; }
.header-actions { display:flex; align-items:center; gap:1rem; }
.cart { border:0; background:transparent; text-transform:uppercase; font-size:.72rem; font-weight:700; cursor:pointer; }
.cart span { display:inline-grid; place-items:center; background:var(--blue); color:#fff; border-radius:50%; width:28px; height:28px; margin-left:8px; }
.menu-button { display:none; width:42px; height:42px; border:1px solid var(--ink); background:transparent; border-radius:50%; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.menu-button span { width:16px; height:1px; background:var(--ink); }

.hero { min-height:790px; height:calc(100svh - 76px); position:relative; overflow:hidden; display:grid; grid-template-columns:48% 52%; border-bottom:1px solid var(--line); }
.hero-copy { padding:7vh 2vw 3rem; position:relative; z-index:2; }
.eyebrow,.section-number { font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.hero h1 { font-size:clamp(6.4rem,10vw,11.5rem); line-height:.72; letter-spacing:-.085em; text-transform:uppercase; margin:12vh 0 2.5rem; font-weight:900; }
h1 i,h2 i { font-family:Georgia,serif; font-weight:400; text-transform:none; letter-spacing:-.07em; }
.hero-intro { width:min(430px,90%); font-size:1rem; line-height:1.55; margin:0 0 2rem; }
.pill-button { display:inline-flex; align-items:center; justify-content:space-between; min-width:250px; padding:1.05rem 1.2rem; border-radius:100px; background:var(--lime); text-transform:uppercase; font-size:.73rem; font-weight:800; }
.pill-button span { font-size:1.1rem; }
.hero-visual { position:relative; overflow:hidden; background:#dcdce6; }
.hero-visual img { height:100%; object-fit:cover; }
.formula-label { position:absolute; width:78px; height:78px; border:1px solid rgba(255,255,255,.65); border-radius:50%; display:grid; place-items:center; text-align:center; color:white; font-size:.65rem; line-height:1.25; text-transform:uppercase; backdrop-filter:blur(4px); }
.formula-label-one { left:7%; top:21%; }.formula-label-two { right:8%; bottom:12%; }
.hero-index { position:absolute; bottom:1rem; left:2vw; font-size:.65rem; font-weight:800; letter-spacing:.12em; }
.ticker { overflow:hidden; background:var(--blue); color:#fff; padding:.85rem 0; font-size:.7rem; font-weight:800; letter-spacing:.15em; white-space:nowrap; }
.ticker div { width:max-content; animation:ticker 22s linear infinite; }
@keyframes ticker { to { transform:translateX(-50%); } }

.manifesto { min-height:640px; display:grid; grid-template-columns:1fr 3fr 1fr; padding:3rem 2vw; border-bottom:1px solid var(--line); align-items:center; }
.manifesto-copy p { color:var(--blue); font-size:1rem; margin:0 0 2rem; }
.manifesto h2,.shop h2,.finder h2,.editorial h2,.newsletter h2 { font-size:clamp(4rem,7vw,8rem); line-height:.87; letter-spacing:-.075em; margin:0; font-weight:900; }
.science-chip { align-self:end; background:var(--lime); aspect-ratio:1; padding:1rem; display:flex; flex-direction:column; justify-content:space-between; }
.science-chip span { font-size:5rem; font-weight:900; letter-spacing:-.08em; }.science-chip p { font-size:.72rem; line-height:1.35; text-transform:uppercase; }

.shop { padding:8rem 2vw 2vw; }
.shop-heading { display:grid; grid-template-columns:2fr 1fr; align-items:end; margin-bottom:5rem; }
.shop-heading .section-number { margin-bottom:2rem; }.shop-heading>p { max-width:320px; line-height:1.55; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1vw; }
.product-card { min-height:580px; padding:1rem; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.product-card.blue { background:var(--blue); color:#fff; }.product-card.ivory { background:#dddcd2; }.product-card.lime { background:var(--lime); }
.product-meta { display:flex; justify-content:space-between; font-size:.62rem; letter-spacing:.12em; font-weight:700; }
.bottle { margin:auto; width:38%; height:280px; background:rgba(255,255,255,.65); border-radius:48% 48% 16px 16px; box-shadow:inset -18px -12px 30px rgba(0,0,0,.12),0 30px 70px rgba(0,0,0,.13); position:relative; display:grid; place-items:center; color:var(--ink); }
.bottle::before { content:""; position:absolute; width:55%; height:38px; top:-34px; background:#191919; border-radius:6px 6px 0 0; }
.lime .bottle { height:180px; width:50%; border-radius:22px; background:rgba(22,22,22,.9); color:white; }.lime .bottle::before { display:none; }.ivory .bottle { background:#faf9f2; }
.bottle span { font-size:.7rem; font-weight:900; letter-spacing:-.05em; }
.product-bottom { display:flex; justify-content:space-between; gap:1rem; align-items:end; border-top:1px solid currentColor; padding-top:1rem; }
.product-bottom h3 { font-size:1.4rem; margin:0 0 .35rem; letter-spacing:-.04em; }.product-bottom p { margin:0; font-size:.72rem; opacity:.7; }
.product-bottom button { border:0; background:transparent; cursor:pointer; font-size:.78rem; white-space:nowrap; }.product-bottom button span { font-size:1rem; margin-left:.5rem; }

.finder { background:var(--blue); color:#fff; padding:3rem 2vw; display:grid; grid-template-columns:3fr 1.1fr; column-gap:4vw; }
.finder-top { grid-column:1/-1; display:flex; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:2rem; }.finder-top p { margin:0; font-size:.8rem; line-height:1.4; text-transform:uppercase; }.light { color:var(--lime); }
.finder-grid { padding:6rem 0; display:grid; grid-template-columns:1.3fr 1fr; gap:5vw; }.finder h2 i { color:var(--lime); }
.concerns { align-self:end; }.concerns button { width:100%; background:transparent; color:#fff; border:0; border-bottom:1px solid rgba(255,255,255,.35); padding:1.2rem 0; display:grid; grid-template-columns:45px 1fr 30px; text-align:left; font-size:1.05rem; cursor:pointer; transition:color .2s,padding .2s; }.concerns button span { font-size:.65rem; opacity:.6; }.concerns button b { font-weight:400; }.concerns button.active { color:var(--lime); padding-left:.8rem; }
.result-card { background:var(--lime); color:var(--ink); align-self:end; padding:1.3rem; min-height:250px; display:flex; flex-direction:column; }.result-card>span { text-transform:uppercase; font-size:.62rem; letter-spacing:.12em; }.result-card h3 { margin:auto 0 0; font-size:2.5rem; letter-spacing:-.05em; }.result-card p { font-size:.78rem; max-width:230px; line-height:1.4; }.result-card a { margin-top:1rem; border-top:1px solid var(--ink); padding-top:1rem; font-size:.72rem; text-transform:uppercase; font-weight:700; }

.editorial { display:grid; grid-template-columns:1fr 1fr; min-height:900px; border-bottom:1px solid var(--line); }.editorial-image { position:relative; min-height:900px; background:var(--blue); overflow:hidden; }.editorial-image img { height:100%; object-fit:cover; }.editorial-image span { position:absolute; left:1.2rem; bottom:1.2rem; color:var(--lime); font-size:.65rem; letter-spacing:.14em; font-weight:800; }
.editorial-copy { padding:3rem 2vw; display:flex; flex-direction:column; }.editorial-copy h2 { margin-top:auto; }.editorial-copy>p { max-width:430px; line-height:1.6; margin:2rem 0; }.text-link { display:flex; justify-content:space-between; border-top:1px solid var(--ink); padding-top:1rem; width:min(430px,100%); font-size:.75rem; font-weight:800; text-transform:uppercase; }.texture-image { margin:5rem 0 0 auto; width:42%; aspect-ratio:1; object-fit:cover; }

.proof { background:var(--lime); padding:2rem 2vw 3rem; }.proof-title { display:flex; justify-content:space-between; border-bottom:2px solid var(--ink); padding-bottom:1rem; text-transform:uppercase; font-size:.72rem; letter-spacing:.12em; font-weight:800; }.proof-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3vw; padding:5rem 0; }.proof-grid div { border-right:1px solid rgba(17,17,17,.25); }.proof-grid div:last-child { border:0; }.proof-grid strong { font-size:clamp(5rem,9vw,10rem); line-height:1; letter-spacing:-.09em; }.proof-grid p { font-size:.8rem; text-transform:uppercase; line-height:1.4; max-width:230px; }.proof-note { font-size:.63rem; max-width:600px; }
.newsletter { padding:8rem 2vw; display:grid; grid-template-columns:1.4fr 1fr; align-items:end; gap:4vw; }.newsletter>div>span { display:block; color:var(--blue); font-size:.68rem; font-weight:800; letter-spacing:.15em; margin-bottom:2rem; }.newsletter h2 { font-size:clamp(3.5rem,6vw,7rem); }.newsletter form label { display:block; font-size:.65rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1rem; }.newsletter form>div { display:flex; border-bottom:2px solid var(--ink); }.newsletter input { flex:1; background:transparent; border:0; padding:1rem 0; outline:0; font-size:.9rem; }.newsletter button { border:0; background:transparent; font-weight:800; text-transform:uppercase; font-size:.75rem; cursor:pointer; }.success { color:var(--blue); font-size:1.4rem; font-weight:800; }
footer { background:var(--ink); color:#fff; padding:4rem 2vw 1.5rem; }.footer-brand { font-size:clamp(6rem,15vw,17rem); line-height:.8; display:block; border-bottom:1px solid rgba(255,255,255,.25); padding-bottom:3rem; }.footer-links { display:flex; gap:3rem; margin:3rem 0; text-transform:uppercase; font-size:.7rem; letter-spacing:.1em; }.footer-meta { display:flex; justify-content:space-between; color:rgba(255,255,255,.55); font-size:.6rem; text-transform:uppercase; letter-spacing:.09em; }

@media (max-width:900px) {
  .topbar { height:64px; padding:0 18px; }.nav { display:none; position:absolute; top:64px; left:0; right:0; padding:2rem; background:var(--lime); flex-direction:column; font-size:1.3rem; }.nav.open { display:flex; }.menu-button { display:flex; }.cart { font-size:0; }.cart span { font-size:.72rem; margin:0; }
  .hero { min-height:760px; height:auto; grid-template-columns:1fr; grid-template-rows:auto 420px; }.hero-copy { padding:2.5rem 18px 2rem; }.hero h1 { font-size:clamp(5rem,24vw,8rem); margin:4rem 0 2rem; }.hero-intro { font-size:.9rem; }.hero-visual { grid-row:2; }.hero-index { display:none; }
  .manifesto { min-height:620px; padding:2rem 18px; grid-template-columns:1fr; align-content:space-between; }.manifesto h2 { font-size:clamp(3.3rem,15vw,6rem); }.science-chip { width:170px; justify-self:end; }
  .shop { padding:6rem 18px 18px; }.shop-heading { grid-template-columns:1fr; gap:2rem; margin-bottom:3rem; }.shop h2 { font-size:clamp(4rem,17vw,6rem); }.product-grid { grid-template-columns:1fr; gap:12px; }.product-card { min-height:530px; }.bottle { height:250px; }
  .finder { padding:2rem 18px; grid-template-columns:1fr; }.finder-top p { display:none; }.finder-grid { padding:4rem 0 2rem; grid-template-columns:1fr; }.finder h2 { font-size:clamp(3.5rem,16vw,6rem); }.result-card { margin-bottom:1rem; }
  .editorial { grid-template-columns:1fr; }.editorial-image { min-height:620px; }.editorial-copy { min-height:700px; padding:2rem 18px; }.editorial h2 { font-size:clamp(4rem,17vw,6rem); }.texture-image { width:48%; }
  .proof { padding:2rem 18px; }.proof-title span:nth-child(2) { display:none; }.proof-grid { grid-template-columns:1fr; padding:3rem 0; }.proof-grid div { border-right:0; border-bottom:1px solid rgba(17,17,17,.3); padding:2rem 0; }.proof-grid strong { font-size:7rem; }
  .newsletter { padding:6rem 18px; grid-template-columns:1fr; gap:5rem; }.newsletter h2 { font-size:clamp(3.6rem,15vw,6rem); }
  footer { padding:3rem 18px 1.5rem; }.footer-brand { font-size:22vw; }.footer-links { display:grid; grid-template-columns:1fr 1fr; }.footer-meta { flex-direction:column; gap:.8rem; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.ticker div { animation:none; } }