:root { --ink:#253a34; --cream:#f8f5ee; --peach:#f0b69d; --aqua:#98dcd4; --line:rgba(37,58,52,.18); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--cream); color:var(--ink); font-family:"DM Sans",sans-serif; } a { color:inherit; text-decoration:none; }
.nav { height:86px; display:flex; align-items:center; justify-content:space-between; padding:0 4.2vw; position:absolute; width:100%; z-index:4; font-size:12px; letter-spacing:.04em; }
.brand { display:inline-flex; align-items:center; line-height:0; }
.brand img { display:block; width:82px; height:auto; }
footer .brand img { width:104px; }
.nav-links { display:flex; gap:29px; margin-left:125px; }.nav-links a { opacity:.72; transition:opacity .2s; }.nav-links a:hover { opacity:1; }.bag span { display:inline-grid; place-items:center; margin-left:7px; width:18px; height:18px; background:var(--ink); color:var(--cream); border-radius:50%; font-size:10px; }
.hero { min-height:740px; height:100svh; max-height:930px; position:relative; overflow:hidden; display:grid; grid-template-columns: 38% 1fr; align-items:center; padding:105px 8.5vw 54px; background:linear-gradient(110deg,#f5b89d 0%,#f4c4a9 32%,#dfd9c5 64%,#9ed9d2 100%); }
.hero:after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 84% 7%,rgba(255,255,255,.62),transparent 23%),linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,0)); }.hero-copy { z-index:2; max-width:420px; align-self:center; }.eyebrow { margin:0 0 18px; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.09em; line-height:1.4; }.hero h1,.manifesto h2,.product h2 { font-family:"Instrument Serif",serif; font-weight:400; letter-spacing:-.055em; line-height:.86; margin:0; }.hero h1 { font-size:clamp(65px,8vw,122px); }.hero h1 em,.manifesto h2 em { font-style:italic; }.intro { max-width:300px; line-height:1.55; font-size:14px; margin:30px 0 30px; }.button { display:inline-flex; gap:30px; align-items:center; justify-content:space-between; min-width:205px; padding:13px 15px 13px 18px; border:1px solid var(--ink); background:transparent; color:var(--ink); font:500 11px "DM Sans",sans-serif; letter-spacing:.04em; cursor:pointer; transition:.25s ease; }.button:hover { background:var(--ink); color:var(--cream); }
.hero:after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 84% 7%,rgba(255,255,255,.62),transparent 23%),linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,0)); }.hero-copy { z-index:2; max-width:420px; align-self:center; }.eyebrow { margin:0 0 18px; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.09em; line-height:1.4; }.hero h1,.manifesto h2,.product h2 { font-family:"Instrument Serif",serif; font-weight:400; letter-spacing:-.055em; line-height:.86; margin:0; }.hero h1 { font-size:clamp(65px,8vw,122px); }.hero h1 em,.manifesto h2 em { font-style:italic; }.intro { max-width:300px; line-height:1.55; font-size:14px; margin:30px 0 30px; }.button { display:inline-flex; gap:30px; align-items:center; justify-content:space-between; min-width:205px; padding:13px 15px 13px 18px; border:1px solid var(--ink); background:transparent; color:var(--ink); font:500 11px "DM Sans",sans-serif; letter-spacing:.04em; cursor:pointer; transition:.25s ease; }.button:hover { background:var(--ink); color:var(--cream); }.hero-product { position:absolute; z-index:2; width:clamp(200px,20vw,310px); left:calc(37.5% - clamp(100px,10vw,155px)); bottom:clamp(4px,3vw,42px); mix-blend-mode:multiply; opacity:.9; filter:drop-shadow(0 14px 18px rgba(77,60,47,.1)); pointer-events:none; }.hero-product-sage { width:clamp(200px,20vw,310px); left:auto; right:1.5vw; bottom:clamp(4px,3vw,42px); opacity:.94; }
.reveal-wrap { --x:50%; --y:50%; position:relative; z-index:1; width:min(50vw,660px); aspect-ratio:1; justify-self:center; border-radius:50% 50% 46% 46%; overflow:hidden; box-shadow:0 28px 60px rgba(37,58,52,.14); cursor:none; outline:none; }.image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; user-select:none; pointer-events:none; }.after-layer { position:absolute; inset:0; overflow:hidden; clip-path:circle(13.75% at var(--x) var(--y)); transition:clip-path .05s linear; }.lens-particles { position:absolute; inset:0; z-index:3; overflow:hidden; pointer-events:none; }.flake { position:absolute; width:var(--size); height:calc(var(--size) * .68); left:var(--left); top:var(--top); border-radius:48% 52% 46% 54%; background:linear-gradient(135deg,rgba(255,247,232,.9),rgba(205,157,129,.58)); box-shadow:0 1px 2px rgba(103,67,47,.13); transform:rotate(var(--turn)); opacity:0; animation:flake-fall var(--duration) cubic-bezier(.2,.65,.5,1) forwards; }.reveal-line { position:absolute; z-index:4; left:var(--x); top:var(--y); width:45px; height:45px; border-radius:50%; border:1px solid rgba(255,255,255,.95); background:rgba(255,255,255,.14); backdrop-filter:blur(2px); transform:translate(-50%,-50%); pointer-events:none; }.handle { position:absolute; inset:0; display:grid; place-items:center; color:white; font-size:14px; text-shadow:0 1px 6px rgba(0,0,0,.25); }.image-label { position:absolute; bottom:20px; z-index:5; font:10px "DM Mono",monospace; letter-spacing:.1em; color:white; text-shadow:0 1px 8px rgba(0,0,0,.28); }.label-before { left:21px; }.label-after { right:21px; }.drag-hint { position:absolute; z-index:6; top:24px; left:50%; transform:translateX(-50%); color:white; display:flex; align-items:center; gap:8px; padding:8px 11px; background:rgba(37,58,52,.32); backdrop-filter:blur(5px); border-radius:20px; font-size:10px; letter-spacing:.03em; transition:opacity .3s; pointer-events:none; }.drag-hint b { font-size:13px; font-weight:400; } @keyframes flake-fall { 0% { opacity:0; transform:translate(0,0) rotate(var(--turn)); } 12% { opacity:.85; } 100% { opacity:0; transform:translate(var(--drift),var(--fall)) rotate(calc(var(--turn) + 140deg)); } }
.hero-note { position:absolute; z-index:2; right:4.2vw; top:124px; writing-mode:vertical-rl; font:10px "DM Mono",monospace; letter-spacing:.1em; display:flex; gap:16px; align-items:center; }.hero-note p { margin:0; }.hero-note span { opacity:.6; }.scroll-mark { position:absolute; left:4.2vw; bottom:31px; z-index:2; font:9px "DM Mono",monospace; letter-spacing:.11em; display:flex; align-items:center; gap:11px; }.scroll-mark span { display:block; height:38px; width:1px; background:var(--ink); }
.manifesto { min-height:550px; background:var(--ink); color:var(--cream); padding:116px 13vw; display:grid; grid-template-columns:1fr 1.05fr; gap:4vw; align-content:center; }.manifesto .eyebrow { grid-column:1/-1; margin-bottom:8px; color:var(--aqua); }.manifesto h2 { font-size:clamp(54px,6vw,91px); }.manifesto > p:last-child { max-width:300px; font-size:16px; line-height:1.6; align-self:end; margin:0 0 6px; }
.product { min-height:760px; display:grid; grid-template-columns:1.08fr .92fr; background:#dceae1; }.product-visual { position:relative; overflow:hidden; min-height:600px; display:grid; place-items:center; }.product-visual img { mix-blend-mode:multiply; width:120%; max-width:850px; position:relative; z-index:1; }.wash { position:absolute; border-radius:50%; background:rgba(255,255,255,.48); filter:blur(1px); }.wash-one { width:290px; height:215px; left:12%; top:24%; }.wash-two { width:220px; height:140px; right:12%; bottom:18%; }.product-number { position:absolute; font:150px "Instrument Serif",serif; color:rgba(37,58,52,.1); right:4%; bottom:-76px; margin:0; }.product-copy { padding:100px 11% 70px 5%; align-self:center; }.product h2 { font-size:clamp(65px,6.5vw,100px); margin-bottom:28px; }.product-description { max-width:420px; font-size:15px; line-height:1.65; }.facts { margin:31px 0; border-top:1px solid var(--line); max-width:410px; }.facts div { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding:11px 0; font-size:11px; }.facts span { opacity:.65; }.facts b { font-weight:500; }.add-button { background:var(--ink); color:var(--cream); border-color:var(--ink); min-width:220px; }.add-button:hover { background:transparent; color:var(--ink); }.mini-note { font:9px "DM Mono",monospace; letter-spacing:.05em; opacity:.6; margin-top:17px; } footer { display:flex; justify-content:space-between; align-items:center; padding:34px 4.2vw; background:var(--cream); font:10px "DM Mono",monospace; letter-spacing:.06em; } footer p { margin:0; opacity:.65; }
.product { min-height:760px; display:grid; grid-template-columns:1.08fr .92fr; background:#dceae1; }.product-visual { position:relative; overflow:hidden; min-height:600px; display:grid; place-items:center; }.product-visual img { mix-blend-mode:multiply; width:120%; max-width:850px; position:relative; z-index:1; }.wash { position:absolute; border-radius:50%; background:rgba(255,255,255,.48); filter:blur(1px); }.wash-one { width:290px; height:215px; left:12%; top:24%; }.wash-two { width:220px; height:140px; right:12%; bottom:18%; }.product-number { position:absolute; font:150px "Instrument Serif",serif; color:rgba(37,58,52,.1); right:4%; bottom:-76px; margin:0; }.product-copy { padding:76px 11% 64px 5%; align-self:center; }.product h2 { font-size:clamp(65px,6.5vw,100px); margin-bottom:28px; }.product-description { max-width:420px; font-size:15px; line-height:1.65; }.facts { margin:27px 0 18px; border-top:1px solid var(--line); max-width:410px; }.facts div { display:flex; justify-content:space-between; gap:18px; border-bottom:1px solid var(--line); padding:11px 0; font-size:11px; }.facts span { opacity:.65; }.facts b { font-weight:500; text-align:right; }.ritual-steps { max-width:410px; margin:0 0 24px; }.ritual-title { display:block; margin-bottom:8px; font:9px "DM Mono",monospace; letter-spacing:.08em; opacity:.6; }.ritual-steps p { margin:0; font-size:11px; line-height:1.5; }.ritual-steps b { color:#4d8b84; font:500 9px "DM Mono",monospace; }.add-button { background:var(--ink); color:var(--cream); border-color:var(--ink); min-width:220px; }.add-button:hover { background:transparent; color:var(--ink); }.mini-note { font:9px "DM Mono",monospace; letter-spacing:.05em; opacity:.6; margin-top:15px; }.ingredient-details { max-width:410px; margin-top:21px; border-top:1px solid var(--line); font-size:10px; line-height:1.55; }.ingredient-details summary { display:flex; justify-content:space-between; padding:11px 0; cursor:pointer; font:500 10px "DM Sans",sans-serif; letter-spacing:.02em; }.ingredient-details summary::-webkit-details-marker { display:none; }.ingredient-details p { margin:0 0 10px; opacity:.74; }.ingredient-details .safety-note { color:#58706b; } footer { display:flex; justify-content:space-between; align-items:center; padding:34px 4.2vw; background:var(--cream); font:10px "DM Mono",monospace; letter-spacing:.06em; } footer p { margin:0; opacity:.65; }
.product { min-height:760px; display:grid; grid-template-columns:1.08fr .92fr; background:#dceae1; }.product-visual { position:relative; overflow:hidden; min-height:600px; display:grid; place-items:center; }.product-visual img { mix-blend-mode:multiply; width:120%; max-width:850px; position:relative; z-index:1; }.wash { position:absolute; border-radius:50%; background:rgba(255,255,255,.48); filter:blur(1px); }.wash-one { width:290px; height:215px; left:12%; top:24%; }.wash-two { width:220px; height:140px; right:12%; bottom:18%; }.product-number { position:absolute; font:150px "Instrument Serif",serif; color:rgba(37,58,52,.1); right:4%; bottom:-76px; margin:0; }.product-copy { padding:76px 11% 64px 5%; align-self:center; }.product h2 { font-size:clamp(65px,6.5vw,100px); margin-bottom:28px; }.product-description { max-width:420px; font-size:15px; line-height:1.65; }.facts { margin:27px 0 18px; border-top:1px solid var(--line); max-width:410px; }.facts div { display:flex; justify-content:space-between; gap:18px; border-bottom:1px solid var(--line); padding:11px 0; font-size:11px; }.facts span { opacity:.65; }.facts b { font-weight:500; text-align:right; }.ritual-steps { max-width:410px; margin:0 0 24px; }.ritual-title { display:block; margin-bottom:8px; font:9px "DM Mono",monospace; letter-spacing:.08em; opacity:.6; }.ritual-steps p { margin:0; font-size:11px; line-height:1.5; }.ritual-steps b { color:#4d8b84; font:500 9px "DM Mono",monospace; }.add-button { background:var(--ink); color:var(--cream); border-color:var(--ink); min-width:220px; }.add-button:hover { background:transparent; color:var(--ink); }.mini-note { font:9px "DM Mono",monospace; letter-spacing:.05em; opacity:.6; margin-top:15px; }.ingredient-details { max-width:410px; margin-top:21px; border-top:1px solid var(--line); font-size:10px; line-height:1.55; }.ingredient-details summary { display:flex; justify-content:space-between; padding:11px 0; cursor:pointer; font:500 10px "DM Sans",sans-serif; letter-spacing:.02em; }.ingredient-details summary::-webkit-details-marker { display:none; }.ingredient-details p { margin:0 0 10px; opacity:.74; }.ingredient-details .safety-note { color:#58706b; }.specs { display:grid; grid-template-columns:.82fr 1.18fr; gap:9vw; padding:122px 12vw; background:#f7f2e8; }.specs-intro { max-width:350px; }.specs h2 { margin:0 0 29px; font:clamp(57px,6vw,90px)/.86 "Instrument Serif",serif; font-weight:400; letter-spacing:-.05em; }.specs h2 em { font-style:italic; }.specs-intro > p:last-child { font-size:14px; line-height:1.65; }.specs-groups { border-top:1px solid var(--line); }.spec-group { border-bottom:1px solid var(--line); }.spec-group summary { display:flex; justify-content:space-between; padding:18px 0; cursor:pointer; font:500 13px "DM Sans",sans-serif; }.spec-group summary::-webkit-details-marker { display:none; }.spec-group summary span { font-size:18px; font-weight:400; }.spec-group[open] summary span { transform:rotate(45deg); }.spec-group dl { margin:0 0 17px; }.spec-group dl div { display:grid; grid-template-columns:30% 1fr; gap:20px; padding:10px 0; border-top:1px solid rgba(37,58,52,.1); font-size:11px; line-height:1.48; }.spec-group dt { opacity:.6; }.spec-group dd { margin:0; font-weight:500; } footer { display:flex; justify-content:space-between; align-items:center; padding:34px 4.2vw; background:var(--cream); font:10px "DM Mono",monospace; letter-spacing:.06em; } footer p { margin:0; opacity:.65; }
@media (max-width:800px) { .nav { height:68px; padding:0 22px; }.nav-links { display:none; }.hero { min-height:760px; height:auto; padding:105px 22px 65px; display:flex; flex-direction:column; align-items:stretch; }.hero-copy { max-width:100%; }.hero h1 { font-size:76px; }.intro { margin:20px 0 22px; }.reveal-wrap { width:min(88vw,520px); margin:48px auto 0; }.hero-product { width:150px; left:18px; bottom:24px; }.hero-product-sage { width:150px; left:auto; right:4px; bottom:24px; }.hero-note { top:112px; right:22px; }.scroll-mark { display:none; }.manifesto { min-height:500px; padding:78px 24px; display:block; }.manifesto h2 { font-size:62px; margin:28px 0 35px; }.product { display:block; }.product-visual { min-height:490px; }.product-visual img { width:130%; }.product-copy { padding:68px 24px; }.product h2 { font-size:76px; }.specs { display:block; padding:80px 24px; }.specs-intro { max-width:none; margin-bottom:48px; }.specs h2 { font-size:64px; }.spec-group dl div { grid-template-columns:34% 1fr; gap:12px; } footer { padding:27px 22px; } footer p:nth-child(2) { display:none; } }