:root{--ink:#26372f;--cream:#f7f3eb;--peach:#e9b79e;--clay:#b76548;--sage:#acba9d;--rose:#e1a6a4;--gold:#c9974f;--line:rgba(38,55,47,.18)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);font-family:"DM Sans",sans-serif;color:var(--ink);font-size:15px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.001ms !important;animation-duration:.001ms !important}}

.announcement{background:var(--ink);color:#fff;text-align:center;padding:10px 20px;font-size:11px;letter-spacing:.06em}
.announcement span{margin:0 11px;color:#f1c2a9}

.site-header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 5.5%;border-bottom:1px solid var(--line);position:relative;z-index:20;background:var(--cream)}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:700;font-size:21px;letter-spacing:.1em;text-decoration:none;line-height:.75}
.brand small{display:block;font-size:6px;letter-spacing:.13em;margin-top:6px;font-weight:500}
.brand-mark{width:30px;height:37px;border:1px solid var(--ink);display:grid;place-items:center;font-family:"Playfair Display";font-size:23px;letter-spacing:0;flex-shrink:0}
.nav-links{display:flex;gap:28px;margin-left:60px}
.nav-links a,footer a{color:var(--ink);text-decoration:none;font-size:13px}
.nav-links a:hover{color:var(--clay)}

.header-actions{display:flex;align-items:center;gap:18px}
.button-small{padding:11px 18px;font-size:11px;gap:14px;text-decoration:none}
.menu-toggle{display:none;font-size:22px;border:0;background:transparent;color:var(--ink);cursor:pointer}

.hero{min-height:630px;display:grid;grid-template-columns:1.03fr .97fr;overflow:hidden}
.hero-copy{padding:110px 12% 60px 16%;background:#efc9af}
.eyebrow{text-transform:uppercase;font-size:10px;letter-spacing:.19em;font-weight:700;margin:0 0 18px}
.hero h1,h2{font-family:"Playfair Display",serif;line-height:.98;font-weight:500;margin:0;letter-spacing:-.045em}
.hero h1{font-size:clamp(46px,5vw,79px)}
em{font-weight:500}
.intro{line-height:1.65;max-width:420px;margin:26px 0;color:#3d4d44}
.hero-ctas{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;gap:25px;border:0;padding:15px 20px;text-decoration:none;font-size:12px;font-weight:700;cursor:pointer}
.button span{font-size:20px;line-height:10px}
.button-dark{background:var(--ink);color:#fff}
.button-dark:hover{background:#1a2721}
.button-light{background:#fff;color:var(--ink)}
.text-link{color:var(--ink);font-size:12px;font-weight:700;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:7px;background:none;cursor:pointer;font-family:inherit}
.text-link span{font-size:18px;margin-left:12px}

.hero-stats{display:flex;gap:34px;margin:44px 0 0;padding-top:26px;border-top:1px solid rgba(38,55,47,.22)}
.hero-stats div{margin:0}
.hero-stats dt{font:26px "Playfair Display";margin:0;color:var(--clay)}
.hero-stats dd{margin:4px 0 0;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#4d5a50}

.hero-art{background:#d7d5bd;position:relative;overflow:hidden;min-height:520px}
.arch{position:absolute;width:410px;height:510px;border:1px solid rgba(38,55,47,.34);border-bottom:0;border-radius:210px 210px 0 0;bottom:0;left:50%;transform:translateX(-50%)}
.sun{position:absolute;width:165px;height:165px;background:#efb37c;border-radius:50%;top:57px;right:21%}
.serum-bottle{position:absolute;background:#d17a59;width:116px;height:230px;bottom:96px;left:25%;border-radius:6px 6px 13px 13px;box-shadow:8px 9px 0 rgba(62,75,52,.13);padding-top:77px;text-align:center;color:#fcf6e9;font:19px "Playfair Display"}
.serum-bottle:before{content:"";position:absolute;width:51px;height:75px;top:-73px;left:32px;background:#f1e4ce;border-radius:4px 4px 0 0;border:1px solid rgba(0,0,0,.08)}
.serum-bottle:after{content:"";position:absolute;width:11px;height:35px;top:-101px;left:52px;background:#23362d}
.hero-art small,.product-image small{display:block;font:7px "DM Sans";letter-spacing:.12em;line-height:1.5;margin-top:7px}
.cream-jar{position:absolute;width:155px;height:100px;background:#f3e8d7;bottom:95px;left:52%;border-radius:4px 4px 30px 30px;text-align:center;padding-top:39px;font:20px "Playfair Display";box-shadow:8px 9px 0 rgba(62,75,52,.12)}
.cream-jar:before{content:"";position:absolute;background:#f7f3eb;width:165px;height:23px;left:-5px;top:-20px;border-radius:3px}
.cream-jar small{color:#506054}
.leaf{position:absolute;border:1px solid var(--ink);border-radius:100% 0 100% 0;opacity:.75}
.leaf-one{height:138px;width:70px;right:7%;bottom:52px;transform:rotate(-35deg)}
.leaf-two{height:92px;width:50px;right:12%;bottom:13px;transform:rotate(-76deg)}
.art-caption{position:absolute;bottom:14px;left:25px;text-transform:uppercase;font-size:9px;letter-spacing:.16em;background:rgba(247,243,235,.85);padding:6px 10px;border-radius:2px}

.values{display:grid;grid-template-columns:repeat(3,1fr);margin:0 6%;padding:44px 0;border-bottom:1px solid var(--line);gap:30px}
.values strong{font-size:13px;display:block}
.values strong:before{content:"✦";color:var(--clay);margin-right:9px;font-size:11px}
.values p{margin:8px 0 0;color:#667269;font-size:12px;line-height:1.6}

.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:44px}
.section-heading h2,.story h2,.ritual h2,.newsletter h2,.reviews h2,.faq h2,.milestones h2{font-size:clamp(34px,4vw,58px)}

.sourcing{padding:100px 6% 120px}
.sourcing-copy{max-width:280px;margin:0;color:#5a6a5f;font-size:13px;line-height:1.6;text-align:right}
.routes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.routes li{background:var(--cream);padding:30px 24px;display:flex;flex-direction:column;gap:14px}
.route-flag{width:38px;height:26px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:700;letter-spacing:.06em;border-radius:2px}
.routes strong{font-size:14px}
.routes p{margin:6px 0 0;font-size:12px;color:#6b7871;line-height:1.5}

.collection{padding:20px 6% 90px}
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.filter-chip{border:1px solid var(--ink);background:transparent;color:var(--ink);padding:9px 18px;font:600 12px "DM Sans";border-radius:100px;cursor:pointer;transition:.15s}
.filter-chip:hover{background:rgba(38,55,47,.06)}
.filter-chip.is-active{background:var(--ink);color:#fff}

.products{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.product-card[hidden]{display:none}
.product-image{height:390px;display:grid;place-items:center;position:relative}
.peach{background:#edc6b1}
.sage{background:#c7cfbb}
.pink{background:#e6c1bf}
.cream{background:#e9e2cd}
.origin-badge{position:absolute;top:16px;left:16px;background:var(--ink);color:#fff;font-size:10px;font-weight:700;letter-spacing:.05em;padding:5px 9px;border-radius:2px;z-index:1}
.dropper{height:235px;width:108px;background:#eab8a0;border-radius:5px 5px 13px 13px;text-align:center;padding-top:74px;font:18px "Playfair Display";color:#765345;box-shadow:9px 10px 0 rgba(71,75,58,.12)}
.dropper:before{content:"";position:absolute;height:76px;width:42px;top:45px;margin-left:32px;background:#e8ddc8;border-radius:5px 5px 0 0}
.dropper:after{content:"";position:absolute;height:27px;width:8px;top:20px;margin-left:-25px;background:#526157}
.dropper-tall{height:255px;padding-top:82px}
.cream-tone{background:#f1e7d3;color:#6b5a3c}
.tube{height:249px;width:112px;clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);background:#f4f0e8;text-align:center;padding-top:78px;font:18px "Playfair Display";color:#536252;box-shadow:8px 10px 0 rgba(71,75,58,.12)}
.tube-tall{height:268px;padding-top:88px}
.compact{height:160px;width:160px;border-radius:50%;background:#d17e78;border:9px solid #edc8c2;outline:1px solid #9d5855;text-align:center;padding-top:52px;font:20px "Playfair Display";color:#fff}
.compact-alt{background:#c99a4f;border-color:#e6d3ae;outline-color:#a87a2f}
.product-info{display:flex;justify-content:space-between;align-items:flex-start;padding:16px 2px}
.product-info h3{font-size:14px;margin:0 0 5px}
.product-info p{margin:0;font-size:11px;color:#768077}
.tag{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--clay);border:1px solid var(--clay);border-radius:100px;padding:4px 10px;white-space:nowrap}
.portfolio-footnote{text-align:center;margin:50px 0 0;font-size:13px;color:#5a6a5f}
.portfolio-footnote .text-link{margin-left:6px}

.story{background:#e2dac9;display:grid;grid-template-columns:1fr 1fr;min-height:560px}
.story-image{background:#83917d;position:relative;overflow:hidden}
.portrait{width:310px;height:410px;background:#d9a681;position:absolute;bottom:0;left:50%;transform:translateX(-50%);border-radius:160px 160px 0 0;box-shadow:inset 44px 0 #b86e54}
.portrait:before{content:"";position:absolute;width:192px;height:192px;border-radius:50%;background:#783f31;left:55px;top:60px}
.portrait:after{content:"";position:absolute;width:230px;height:185px;background:#f1d0b1;border-radius:50% 50% 0 0;left:40px;bottom:0}
.portrait span{position:absolute;z-index:1;color:#f7efe3;left:-34px;top:104px;font:29px/1 "Playfair Display";letter-spacing:.08em}
.story-copy{padding:100px 15%}
.story-copy>p:not(.eyebrow){max-width:420px;line-height:1.75;margin:24px 0;color:#4c5a50;font-size:14px}

.milestones{padding:120px 6%}
.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.timeline li{border-top:2px solid var(--ink);padding-top:20px}
.timeline span{font:20px "Playfair Display";color:var(--clay);display:block;margin-bottom:12px}
.timeline h3{margin:0 0 8px;font-size:14px}
.timeline p{margin:0;font-size:12px;color:#68736a;line-height:1.6}

.reviews{padding:0 6% 120px}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.review-grid blockquote{margin:0;background:#efe9dc;padding:32px 28px;border-radius:4px}
.review-grid p{margin:0 0 20px;font-size:14px;line-height:1.6;font-style:italic}
.review-grid cite{font-style:normal;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--clay);font-weight:700}

.faq{padding:0 6% 120px}
.faq-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.faq-list details{background:var(--cream);padding:22px 26px}
.faq-list summary{cursor:pointer;font-weight:700;font-size:14px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:"+";font-size:20px;color:var(--clay);margin-left:20px}
.faq-list details[open] summary:after{content:"–"}
.faq-list p{margin:14px 0 0;color:#5a6a5f;font-size:13px;line-height:1.65;max-width:640px}

.ritual{display:grid;grid-template-columns:1fr 1.2fr;padding:120px 10%;gap:80px}
.ritual ol{padding:0;margin:0;list-style:none}
.ritual li{display:flex;gap:26px;padding:0 0 24px;margin-bottom:23px;border-bottom:1px solid var(--line)}
.ritual li span{font:22px "Playfair Display";color:var(--clay)}
.ritual h3{margin:0 0 8px;font-size:15px}
.ritual li p{margin:0;color:#68736a;font-size:13px;line-height:1.55}

.newsletter{background:var(--clay);color:#fff;text-align:center;padding:100px 20px}
.newsletter h2{font-size:clamp(40px,5vw,64px)}
.newsletter>p:not(.eyebrow):not(#form-message){font-size:13px;margin:24px 0}
.newsletter form{display:flex;flex-direction:column;gap:12px;max-width:470px;margin:28px auto 0;text-align:left}
.newsletter input,.newsletter textarea{border:0;padding:15px 18px;font:13px "DM Sans";width:100%;font-family:inherit;resize:vertical}
.newsletter .button{justify-content:center;margin-top:6px}
.newsletter #form-message{min-height:15px;margin:11px 0 0;font-size:12px}
.newsletter #form-message.is-error{color:#ffd9d0}

footer{display:flex;justify-content:space-between;align-items:center;padding:32px 5.5%;font-size:11px}
footer p{margin:0;color:#748077}
footer div{display:flex;gap:20px}

.toast{position:fixed;right:22px;bottom:22px;background:var(--ink);color:#fff;padding:14px 18px;font-size:13px;transform:translateY(100px);opacity:0;transition:.25s;z-index:60}
.toast.show{transform:translateY(0);opacity:1}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

@media(max-width:900px){
  .routes{grid-template-columns:repeat(2,1fr)}
  .review-grid{grid-template-columns:1fr}
  .timeline{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:780px){
  .site-header{height:70px;padding:0 5%}
  .nav-links{display:none;position:absolute;top:70px;left:0;right:0;margin:0;padding:20px 5%;background:var(--cream);border-bottom:1px solid var(--line);flex-direction:column;gap:17px}
  .nav-links.open{display:flex}
  .menu-toggle{display:block}
  .hero{grid-template-columns:1fr}
  .hero-copy{padding:60px 8% 50px}
  .hero-stats{gap:22px;flex-wrap:wrap}
  .hero-art{min-height:400px}
  .values{grid-template-columns:1fr;padding:32px 0;gap:22px}
  .sourcing{padding:60px 6% 70px}
  .section-heading{align-items:start;gap:20px;flex-direction:column}
  .sourcing-copy{text-align:left;max-width:none}
  .routes{grid-template-columns:1fr}
  .collection{padding:20px 6% 60px}
  .products{grid-template-columns:1fr}
  .product-image{height:360px}
  .story{grid-template-columns:1fr}
  .story-image{min-height:380px}
  .story-copy{padding:60px 8%}
  .milestones{padding:70px 6%}
  .timeline{grid-template-columns:1fr;gap:30px}
  .reviews{padding:0 6% 70px}
  .faq{padding:0 6% 70px}
  .ritual{grid-template-columns:1fr;padding:75px 10%;gap:38px}
  .newsletter{padding:75px 7%}
  footer{flex-wrap:wrap;gap:23px}
  footer p{order:3;width:100%}
  .brand{font-size:18px}
}