.soap-hero{position:relative;min-height:85svh;display:flex;align-items:center;background:#243b2d;color:var(--cream);isolation:isolate}.soap-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 52%;z-index:-2}.soap-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#14291ce8,#14291c88 48%,#14291c05);z-index:-1}.soap-intro{padding:90px 7%;max-width:850px}.soap-intro h1{font-size:clamp(48px,6vw,90px)}.soap-intro em{color:#d8dfbd}.soap-intro>p:not(.eyebrow){max-width:360px;line-height:1.9;font-size:15px;margin:30px 0}.soap-caption{position:absolute;bottom:25px;right:5%;font-size:9px;letter-spacing:2px}.collection{padding-top:90px}.collection-heading{padding:0 7% 50px}.collection-heading>p:not(.eyebrow){max-width:470px;line-height:1.9;color:var(--muted);font-size:14px;margin:25px 0 0}.scents{display:grid;grid-template-columns:1fr 1fr}.scent{min-width:0;background:#fff;border:1px solid #243b2d0c}.scent button{display:block;width:100%;padding:0;border:0;background:#fff;cursor:zoom-in}.scent img{display:block;width:100%;height:auto;aspect-ratio:4/1;object-fit:contain}.scent>div{padding:22px 8% 35px;position:relative;background:var(--cream)}.scent .eyebrow{font-size:8px;letter-spacing:1.8px}.scent h3{font:400 clamp(25px,2.6vw,38px) 'Playfair Display',Georgia,serif;margin:12px 70px 0 0}.weight{font-size:11px;letter-spacing:1px}.scent .weight{position:absolute;right:8%;bottom:40px;color:var(--muted)}.soap-composition{display:grid;grid-template-columns:1fr 1fr;background:#e9e5d8}.soap-composition>div{padding:90px 14%;align-self:center}.soap-composition>img{display:block;width:100%;height:100%;max-height:740px;object-fit:cover}.composition-text{font-size:15px;line-height:2;color:#596453;margin:30px 0}.soap-process{padding-top:85px}.process-grid{display:grid;grid-template-columns:repeat(3,1fr)}.process-grid button{padding:0;border:0;position:relative;cursor:zoom-in;background:var(--green);min-width:0}.process-grid img{display:block;width:100%;height:42vw;max-height:600px;object-fit:cover}.process-grid span{position:absolute;bottom:0;left:0;right:0;padding:50px 7% 24px;color:white;background:linear-gradient(transparent,#0009);font-size:12px;text-align:left}@media(max-width:800px){.soap-hero{min-height:750px;min-height:90svh}.soap-intro{padding:65px 7%}.soap-caption{display:none}.collection{padding-top:60px}.collection-heading{padding-bottom:35px}.scents{grid-template-columns:1fr}.scent>div{padding:20px 7% 30px}.scent .weight{bottom:34px}.soap-composition{grid-template-columns:1fr}.soap-composition>div{padding:60px 7%}.soap-composition>img{height:110vw;max-height:600px}.process-grid{grid-template-columns:1fr 1fr}.process-grid img{height:75vw}.process-grid span{font-size:10px}.soap-process{padding-top:60px}}

.mel-banner{width:100%;background:#193121}.mel-banner img{display:block;width:100%;height:auto}.composition-highlight{margin:28px 0;padding:22px 0;border-top:1px solid #9da58b;border-bottom:1px solid #9da58b}.composition-highlight>strong{font-family:Georgia,serif;font-size:30px;font-weight:400}.composition-highlight p{font-size:14px;line-height:1.8;color:#596453;margin:12px 0 0}
/* Blend the banner into the existing hero without cropping either image. */
.mel-banner{position:relative;z-index:1;pointer-events:none;background:transparent;margin-bottom:calc(-1 * clamp(55px,9vw,160px))}.mel-banner img{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 76%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 76%,transparent 100%)}.mel-banner+.soap-hero .soap-intro{padding-top:calc(90px + clamp(55px,9vw,160px))}@media(max-width:800px){.mel-banner+.soap-hero .soap-intro{padding-top:calc(65px + clamp(55px,9vw,160px))}}
/* Match the start of the fade exactly to the image overlap to avoid a seam. */
.mel-banner{--blend:clamp(65px,14vw,240px);margin-bottom:calc(-1 * var(--blend))}.mel-banner img{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - var(--blend)),rgba(0,0,0,.97) calc(100% - var(--blend)*.88),rgba(0,0,0,.84) calc(100% - var(--blend)*.67),rgba(0,0,0,.5) calc(100% - var(--blend)*.42),rgba(0,0,0,.16) calc(100% - var(--blend)*.2),transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - var(--blend)),rgba(0,0,0,.97) calc(100% - var(--blend)*.88),rgba(0,0,0,.84) calc(100% - var(--blend)*.67),rgba(0,0,0,.5) calc(100% - var(--blend)*.42),rgba(0,0,0,.16) calc(100% - var(--blend)*.2),transparent 100%)}.mel-banner+.soap-hero .soap-intro{padding-top:calc(90px + clamp(65px,14vw,240px))}@media(max-width:800px){.mel-banner+.soap-hero .soap-intro{padding-top:calc(65px + clamp(65px,14vw,240px))}}
.soap-faq{padding:75px 7%;max-width:1100px;margin:auto}.soap-faq h2{margin-bottom:35px}.soap-faq details{border-bottom:1px solid #243b2d30;padding:0}.soap-faq summary{padding:22px 0;cursor:pointer;font-size:16px;min-height:48px;line-height:1.5}.soap-faq details p{font-size:15px;line-height:1.9;color:#596453;max-width:760px;margin:0 0 24px}.scent .weight{position:static;display:block;margin-top:14px}.scent h3{margin-right:0}@media(max-width:480px){.soap-intro h1{font-size:clamp(36px,10vw,48px)}.soap-composition h2{font-size:36px}.process-grid{grid-template-columns:1fr}.process-grid img{height:110vw;max-height:550px}.process-grid span{font-size:13px}.soap-faq{padding:55px 7%}.soap-faq h2{font-size:36px}}
.soap-warning summary{font-weight:600}.soap-warning{border-top:1px solid #243b2d30;margin-top:12px}