:root{
  --white:#FDFCFA; --ivory:#F6F3EE; --hair:#E4E0D9; --noir:#1C1C1A;
  --graphite:#6B6A66; --sage:#4F6150; --petal:#F5E9E4;
  --serif:"Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:"Jost", "Helvetica Neue", Arial, sans-serif;
  --max:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
body{background:var(--white);color:var(--noir);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:1px solid var(--sage);outline-offset:4px}

/* Header */
.hdr{position:sticky;top:0;z-index:20;background:rgba(253,252,250,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;transition:border-color .4s;padding-top:env(safe-area-inset-top,0px)}
.hdr.scrolled{border-bottom-color:var(--hair)}
.hdr-in{max-width:var(--max);margin:0 auto;height:76px;padding:0 32px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.nav{display:flex;gap:36px}
.nav.r{justify-content:flex-end}
.nav a,.label{font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.nav a{padding:8px 0;border-bottom:1px solid transparent;transition:border-color .3s}
.nav a:hover,.nav a.on{border-bottom-color:var(--noir)}
.wordmark{font:500 25px/1 var(--serif);letter-spacing:.32em;text-transform:uppercase;padding-left:.32em}
.menu-btn{display:none;width:28px;height:28px;position:relative}
.menu-btn span{position:absolute;left:3px;right:3px;height:1px;background:var(--noir);transition:transform .3s,top .3s}
.menu-btn span:first-child{top:10px}.menu-btn span:last-child{top:17px}
.menu-open .menu-btn span:first-child{top:14px;transform:rotate(45deg)}
.menu-open .menu-btn span:last-child{top:14px;transform:rotate(-45deg)}
.drawer{display:none}

/* Type */
.display{font:400 clamp(40px,6vw,68px)/1.08 var(--serif);letter-spacing:-.01em}
.h1{font:400 clamp(34px,4.4vw,50px)/1.12 var(--serif)}
.h2{font:400 clamp(28px,3.2vw,36px)/1.2 var(--serif)}
.h3{font:400 21px/1.3 var(--serif)}
.lede{font-size:18px;color:var(--graphite);max-width:34em}
.small{font-size:14px;color:var(--graphite)}
.center{text-align:center}.center .lede{margin-left:auto;margin-right:auto}

.discover{display:inline-block;font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  padding-bottom:6px;background:linear-gradient(var(--noir),var(--noir)) left bottom/100% 1px no-repeat;transition:background-size .5s}
.discover:hover{background-size:0 1px;background-position:right bottom}
.btn{display:block;width:100%;text-align:center;padding:19px 24px;border:1px solid var(--noir);
  font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;transition:background .3s,color .3s}
.btn.fill,.btn:hover{background:var(--noir);color:var(--white)}
.btn.fill:hover{background:var(--sage);border-color:var(--sage)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.section{padding:140px 0}
.reveal{opacity:0;transform:translateY(12px);transition:opacity .7s ease-out,transform .7s ease-out}
.reveal.in{opacity:1;transform:none}

/* Split hero */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100svh - 76px)}
.door{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  text-align:center;padding:48px 32px 72px;overflow:hidden}
.door.kids{background:var(--petal)}
.door.adults{background:var(--ivory)}
.door .shot{flex:1;display:flex;align-items:center;justify-content:center;width:100%;min-height:0}
.door img{max-height:52vh;width:auto;mix-blend-mode:multiply;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.door:hover img{transform:scale(1.03)}
.door .copy{margin-top:28px}
.door .copy p{margin:12px auto 26px;color:var(--graphite);max-width:22em}
.door .line{display:block;margin-bottom:14px;color:var(--graphite)}
.hero-in .door{animation:rise 1.4s cubic-bezier(.2,.7,.2,1) both}
.hero-in .door.adults{animation-delay:.18s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Statement */
.statement{max-width:780px;margin:0 auto;text-align:center}
.statement .display{margin-bottom:28px}

/* Product grid */
.row-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:48px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:56px 28px}
.grid.three{grid-template-columns:repeat(3,1fr)}
.card .tile{aspect-ratio:4/5;background:var(--ivory);display:flex;align-items:center;justify-content:center;padding:12%;overflow:hidden}
.card.kids .tile{background:var(--petal)}
.card .tile img{mix-blend-mode:multiply;max-height:100%;width:auto;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.card:hover .tile img{transform:scale(1.03)}
.card .meta{padding-top:20px;text-align:center}
.card .meta p{font-size:14px;color:var(--graphite);margin-top:6px}
.card .price{display:block;margin-top:10px;font-size:14px;color:var(--noir)}

/* Botanicals */
.botanicals{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hair)}
.bot{padding:40px 32px 44px;border-bottom:1px solid var(--hair)}
.bot:not(:nth-child(3n)){border-right:1px solid var(--hair)}
.bot .h3{margin-bottom:8px}
.bot p{font-size:15px;color:var(--graphite)}

/* Founder */
.founder{background:var(--ivory)}
.founder .statement p{color:var(--graphite);font-size:18px}
.founder .sig{margin-top:32px;font:italic 400 24px/1 var(--serif);color:var(--sage)}

/* Family */
.family{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:64px}
.family .tile{background:var(--ivory);aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:10%}
.family .tile img{mix-blend-mode:multiply;max-height:100%;width:auto}
.family .copy p{margin:18px 0 30px;color:var(--graphite);max-width:28em}

/* Collection page */
.col-hero{text-align:center;padding:120px 32px 96px}
.col-hero.kids{background:var(--petal)}
.col-hero.adults{background:var(--ivory)}
.col-hero .lede{margin-top:20px}
.subhead{margin:120px 0 48px;text-align:center}

/* Product page */
.pdp{display:grid;grid-template-columns:1.15fr 1fr;gap:72px;padding:64px 0 120px;align-items:start}
.gallery .main{aspect-ratio:1;background:var(--ivory);display:flex;align-items:center;justify-content:center;overflow:hidden}
.gallery.kids .main{background:var(--petal)}
.gallery .main img{mix-blend-mode:multiply;max-height:100%;width:auto;object-fit:contain}
.thumbs{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}
.thumbs button{width:76px;height:76px;background:var(--ivory);border:1px solid transparent;padding:4px;transition:border-color .3s}
.thumbs button.on{border-color:var(--noir)}
.thumbs img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.info{position:sticky;top:110px}
.info .label{color:var(--graphite)}
.info .h1{margin:16px 0 18px}
.info .desc{color:var(--graphite);max-width:30em}
.info .price{font:400 24px/1 var(--serif);margin:28px 0 6px}
.buy{background:var(--ivory);padding:32px;margin:28px 0 40px}
.buy .note{margin-top:16px;text-align:center;font-size:13px;color:var(--graphite)}
.bwp-slot:empty{display:none}
.facts{border-top:1px solid var(--hair)}
.facts details{border-bottom:1px solid var(--hair)}
.facts summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;
  font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.facts summary::-webkit-details-marker{display:none}
.facts summary::after{content:"+";font:300 18px/12px var(--sans)}
.facts details[open] summary::after{content:"−"}
.facts .body{padding:0 0 24px;color:var(--graphite);font-size:15px}
.facts ul{list-style:none}
.facts li{padding:6px 0}
.facts li b{font-weight:500;color:var(--noir)}
.crumb{padding-top:36px;font-size:13px;color:var(--graphite)}
.crumb a:hover{color:var(--noir)}

/* Text pages */
.prose{max-width:640px;margin:0 auto;padding:40px 0 140px}
.prose p{margin-bottom:22px;color:#3b3a37}
.prose .h2{margin:56px 0 18px}

/* Footer */
footer{border-top:1px solid var(--hair);padding:96px 0 48px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
.foot .h3{margin-bottom:12px}
.foot p{font-size:14px;color:var(--graphite);max-width:26em}
.signup{display:flex;margin-top:22px;border-bottom:1px solid var(--noir);max-width:360px}
.signup input{flex:1;border:0;background:none;font:400 15px var(--sans);padding:12px 0;color:var(--noir)}
.signup input:focus{outline:none}
.signup button{font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.foot h4{font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-bottom:20px}
.foot li{list-style:none;padding:5px 0;font-size:14px;color:var(--graphite)}
.foot li a:hover{color:var(--noir)}
.legal{margin-top:80px;display:flex;justify-content:space-between;gap:24px;font-size:12px;color:var(--graphite)}

@media (max-width:960px){
  .grid{grid-template-columns:repeat(2,1fr);gap:44px 16px}
  .grid.three{grid-template-columns:repeat(2,1fr)}
  .pdp{grid-template-columns:1fr;gap:40px}
  .info{position:static}
  .family{grid-template-columns:1fr;gap:40px}
  .foot{grid-template-columns:1fr 1fr}
  .botanicals{grid-template-columns:1fr 1fr}
  .bot:not(:nth-child(3n)){border-right:0}
  .bot:nth-child(odd){border-right:1px solid var(--hair)}
}
@media (max-width:760px){
  body{font-size:16px}
  .hdr-in{height:64px;padding:0 20px}
  .nav{display:none}
  .menu-btn{display:block}
  .wordmark{font-size:20px}
  .drawer{display:block;max-height:0;overflow:hidden;transition:max-height .5s;background:var(--white)}
  .menu-open .drawer{max-height:360px;border-bottom:1px solid var(--hair)}
  .drawer a{display:block;padding:18px 20px;border-top:1px solid var(--hair);font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
  .split{grid-template-columns:1fr;min-height:0}
  .door{min-height:78svh;padding:32px 20px 56px}
  .door img{max-height:40svh}
  .wrap{padding:0 20px}
  .section{padding:80px 0}
  .col-hero{padding:80px 20px 64px}
  .subhead{margin:80px 0 36px}
  .row-head{flex-direction:column;align-items:center;text-align:center;gap:14px}
  .botanicals{grid-template-columns:1fr}
  .bot,.bot:nth-child(odd){border-right:0;padding:32px 4px}
  .foot{grid-template-columns:1fr}
  .legal{flex-direction:column}
  .buy{padding:24px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ---- additions for the multi-page site ---- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--noir);color:var(--white);padding:10px 16px;font-size:14px}
.skip:focus{left:16px}
.pt0{padding-top:0}
.pt-sm{padding-top:20px}
.pt-col{padding-top:96px}
.pb{padding-bottom:140px}
.mb{margin-bottom:56px}
.mt{margin-top:44px}
.gap{display:inline-block;width:40px}
.ul{text-decoration:underline;text-underline-offset:3px}
.statement .lede{margin:0 auto}
.col-hero .lede{margin:20px auto 0}
.center .lede{margin-top:14px}
.center-head{justify-content:center}
.founder .statement p{margin-top:20px}
.founder .sig{margin-top:28px}
.card .h3{font-size:21px}
.quote{margin:48px 0;padding:8px 0 8px 28px;border-left:1px solid var(--sage);font:italic 400 26px/1.4 var(--serif);color:var(--noir)}
.quote cite{display:block;margin-top:14px;font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--graphite)}
.prose .facts{margin-top:8px}
.bwp-on .amz-fallback{display:none}
img.missing{opacity:0}
@media (max-width:760px){
  .pt-col{padding-top:64px}
  .pb{padding-bottom:80px}
  .quote{font-size:22px}
}

/* ---- ingredients library ---- */
.ing-hero{text-align:center;padding:140px 32px 100px;background:var(--ivory)}
.ing-hero .display{margin:22px 0 0;font-size:clamp(46px,7vw,84px)}
.ing-hero .lede{margin:24px auto 0}
.ing-hero .label,.ingc-group .label{color:var(--sage)}
.ingx{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding-top:110px;padding-bottom:40px;max-width:980px}
.ingx .label{display:block;padding-bottom:18px;margin-bottom:8px;border-bottom:1px solid var(--hair)}
.ingx ol{list-style:none;columns:2;column-gap:40px}
.ingx li{break-inside:avoid;padding:9px 0}
.ingx a{font:400 20px/1.3 var(--serif);background:linear-gradient(var(--noir),var(--noir)) left bottom/0 1px no-repeat;transition:background-size .5s}
.ingx a:hover{background-size:100% 1px}
.ingc-wrap{padding-bottom:40px}
.ingc-group{text-align:center;padding:150px 0 30px}
.ingc-group .h1{margin-top:16px}
.ingc{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center;padding:110px 0;scroll-margin-top:90px}
.ingc + .ingc{border-top:1px solid var(--hair)}
.ingc.alt .ingc-photo{order:2}
.ingc.alt .ingc-text{justify-self:end}
.ingc-photo{position:relative;aspect-ratio:1;max-width:560px;width:100%;background:var(--ivory);overflow:hidden;margin:0}
.ingc.alt .ingc-photo{justify-self:end}
.ingc-photo img{position:absolute;inset:9%;width:82%;height:82%;object-fit:contain;mix-blend-mode:multiply;transition:transform 1.6s cubic-bezier(.2,.7,.2,1),opacity .6s}
.ingc:hover .ingc-photo img{transform:scale(1.03)}
.ingc-photo img.missing{opacity:0}
.ingc-photo:has(img) .ingc-mark{display:none}
.ingc-mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 160px/1 var(--serif);color:var(--sage);opacity:.35}
.ingc-text{max-width:440px}
.ingc-num{font:400 18px/1 var(--serif);color:var(--graphite);letter-spacing:.1em}
.ingc-name{font:400 clamp(40px,4.6vw,60px)/1.05 var(--serif);margin:22px 0 10px}
.ingc-latin{font:italic 400 21px/1.3 var(--serif);color:var(--graphite)}
.ingc-rule{display:block;width:48px;height:1px;background:var(--sage);margin:32px 0 22px}
.ingc-tag{font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--sage)}
.ingc-desc{margin-top:18px;font-size:17px;line-height:1.75;color:#3b3a37}
.ingc-back{display:inline-block;margin-top:30px;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);border-bottom:1px solid var(--hair);padding-bottom:5px}
.ingc-back:hover{color:var(--noir);border-color:var(--noir)}
@media (max-width:860px){
  .ing-hero{padding:96px 20px 72px}
  .ingx{grid-template-columns:1fr;gap:48px;padding-top:72px}
  .ingc{grid-template-columns:1fr;gap:36px;padding:72px 0}
  .ingc.alt .ingc-photo{order:0;justify-self:start}
  .ingc.alt .ingc-text{justify-self:start}
  .ingc-group{padding:100px 0 10px}
  .ingc-mark{font-size:120px}
}
@media (max-width:480px){.ingx ol{columns:1}}