/* v7 — ingredients first, approved marketplace artwork and deliberate interactions. */
:root{--ink:#172e48;--muted:#657382;--line:#dce3eb;--paper:#fff;--lime:#deeee7;--lilac:#f2edf8;--blush:#fcf0f5;--ease:cubic-bezier(.2,.7,.2,1)}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.header{height:88px;background:#ffffffed;backdrop-filter:blur(16px);border-bottom:1px solid #e6eaf0}
.desktop-nav{font-size:12px;font-weight:550;gap:30px}
.preview-bar{background:#182e46}
.btn{border-radius:40px;padding:15px 25px;font-size:12px;font-weight:600;gap:25px;transition:background .25s,transform .25s}
.btn:hover{background:#355d69;transform:translateY(-2px)}
.section{padding-block:104px}
.section h2{font-weight:600;font-size:clamp(36px,4.3vw,59px);letter-spacing:-.055em;line-height:1.06}
.eyebrow{letter-spacing:.14em;font-size:10px;font-weight:600}
.experience-hero{position:relative;isolation:isolate;overflow:hidden;background:#f5f6fb}
.hero-atmosphere{position:absolute;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(115deg,#f6f9fc 10%,#f1f2fb 55%,#fcf2f7)}
.light-field{position:absolute;pointer-events:none;filter:blur(55px);opacity:.7}
.field-violet{width:55%;height:90%;right:10%;top:-5%;border-radius:60% 40% 70% 30%;background:radial-gradient(ellipse,#dad3f2,transparent 67%)}
.field-rose{width:45%;height:80%;right:-10%;top:35%;background:radial-gradient(ellipse,#f4d9e7,transparent 70%)}
.field-blue{width:40%;height:90%;left:12%;top:10%;background:radial-gradient(ellipse,#dbebf2,transparent 70%)}
.hero-grid{display:grid;grid-template-columns:.94fr 1.28fr;align-items:center;gap:25px;min-height:598px;padding-top:25px;padding-bottom:13px}
.hero-message{padding-bottom:18px;position:relative;z-index:2}
.hero-message .eyebrow{display:flex;align-items:center;gap:10px;font-size:9px;color:#526a7a}
.line-mark{width:24px;height:2px;background:#53908b;flex:none}
.hero-message h1{font-size:clamp(66px,7.2vw,104px);font-weight:620;letter-spacing:-.075em;line-height:.99;margin:28px 0 26px}
.hero-message h1>span{display:block;animation:hero-arrive .6s var(--ease) both}
.hero-message h1>span+span{color:#547778}
.hero-period{color:#8e63a1}
.hero-description{font-size:14px;line-height:1.9;color:#61707f;animation:hero-arrive .6s var(--ease) both}
.hero-actions{display:flex;align-items:center;gap:25px;margin-top:29px;animation:hero-arrive .6s var(--ease) both}
.hero-text-link{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:550;min-height:44px}
.hero-text-link span{font-size:17px}
.hero-note{display:flex;gap:14px;align-items:center;margin-top:37px}
.note-rule{height:33px;width:2px;background:#b8c9d0}
.hero-note p{font-size:10px;color:#76828d;line-height:1.8}
.hero-note strong{font-weight:500;color:#526778}
.hero-scene{position:relative;display:grid;grid-template-columns:1.05fr .95fr;align-items:end;gap:13px;padding-top:18px;mix-blend-mode:multiply}
.scene-wash{position:absolute;z-index:-1;inset:2% -5% 5%;background:radial-gradient(ellipse at 48% 40%,#ffffffa6 0,transparent 72%);pointer-events:none}
.scene-product{min-width:0;position:relative}
.scene-image{display:block;height:384px;position:relative;animation:hero-arrive .6s var(--ease) both}
.scene-image img{height:100%;width:100%;object-fit:contain;mix-blend-mode:multiply}
.scene-gas .scene-image{height:312px}
.scene-caption{display:flex;align-items:center;justify-content:space-between;gap:9px;border-top:1px solid #bfc6d566;margin:17px 7px 0;padding:17px 0 5px;min-height:68px}
.scene-caption strong{font-size:20px;letter-spacing:-.045em;font-weight:650;white-space:nowrap}
.scene-caption small{display:block;font-size:9px;color:#74808d;margin-top:5px;white-space:nowrap}
.scene-arrow{width:32px;height:32px;border-radius:50%;border:1px solid #bec9d2;display:grid;place-items:center;font-size:20px;flex:none;transition:background .2s,transform .3s}
.scene-caption:hover .scene-arrow{background:#fff;transform:translate(2px,-2px)}
.scene-product:focus-within .scene-caption strong,.scene-product:hover .scene-caption strong{color:#734c89}
.scene-gas:focus-within .scene-caption strong,.scene-gas:hover .scene-caption strong{color:#a1537c}
.hero-bottom{display:flex;align-items:center;justify-content:space-between;padding-block:16px 22px}
.scroll-cue{display:flex;align-items:center;gap:13px;font-size:8px;letter-spacing:.13em;color:#607382}
.scroll-cue>span{font-size:21px}
.formula-section{padding:87px 0 66px;background:#fff}
.formula-intro{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:42px}
.formula-intro .eyebrow{color:#587f84;margin-bottom:18px}
.formula-intro h2{font-size:clamp(38px,4.3vw,60px);letter-spacing:-.06em;line-height:1.08;font-weight:600}
.formula-intro>p{font-size:13px;color:var(--muted);line-height:1.85;padding-bottom:3px}
.content-story{display:grid;grid-template-columns:1.25fr .85fr;gap:55px;align-items:center;padding:44px;background:#f5f2fa;border-radius:16px;margin-top:24px}
.story-gas{background:#fcf2f6;grid-template-columns:.85fr 1.25fr}
.story-gas .story-picture{grid-column:1;grid-row:1}
.story-gas .story-copy{grid-column:2;grid-row:1}
.story-product{font-size:11px;letter-spacing:.09em;font-weight:650;color:#765493;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.story-product>span{font-size:10px;letter-spacing:0;font-weight:400;color:#6f7585}
.story-gas .story-product{color:#a2517b}
.story-copy h3{font-size:clamp(27px,3vw,42px);line-height:1.15;letter-spacing:-.045em;font-weight:600;margin-top:23px}
.story-lead{font-size:13px;line-height:1.9;color:#677381;max-width:510px;margin-top:19px}
.ingredient-notes{display:grid;grid-template-columns:1fr 1fr;gap:24px 27px;margin:30px 0 21px}
.ingredient-notes>div{border-top:1px solid #d9d0e4;padding-top:16px;min-width:0}
.ingredient-notes dt{font-size:17px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px;color:#695082}
.ingredient-notes dd{margin:0;font-size:12px;line-height:1.85;color:#657181}
.story-gas .ingredient-notes>div{border-color:#e6d4df}
.story-gas .ingredient-notes dt{color:#985574}
.story-link{display:inline-flex;align-items:center;gap:25px;min-height:48px;border-bottom:1px solid #bba9cf;font-size:12px;font-weight:600}
.story-gas .story-link{border-color:#d4a8bd}
.story-link>span{font-size:24px}
.story-picture{display:block;position:relative;border-radius:9px;overflow:hidden;isolation:isolate;background:#fff}
.story-picture img{width:100%;height:auto;aspect-ratio:2/3;object-fit:contain;transition:transform .5s var(--ease)}
.formula-note{font-size:10px;line-height:1.8;color:#74808e;margin-top:24px;text-align:center}
.scene-label{min-height:50px;padding-left:12px;color:#754e94;display:flex;flex-direction:column;justify-content:center;gap:5px;position:relative;z-index:1}
.scene-label strong{font-size:17px;font-weight:600;letter-spacing:-.025em;line-height:1.3}
.scene-label>span{font-size:10px;color:#7d738c}
.scene-gas .scene-label{color:#a1537c}
.scene-image img{transition:transform .5s var(--ease)}
@media(hover:hover) and (pointer:fine){
 .scene-image:hover img{transform:scale(1.055)}
 .story-picture:hover img{transform:scale(1.035)}
}
.scene-image:focus-visible img{transform:scale(1.035)}
.story-picture:focus-visible img{transform:scale(1.02)}
.collection .section-heading{margin-bottom:47px}
.collection .eyebrow,.selection .eyebrow,.faq .eyebrow{color:#587f84}
.shop-grid{gap:32px}
.shop-card{position:relative;overflow:hidden;border-radius:12px;background:#f5f3fa;border:0;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;transition:transform .4s var(--ease)}
.shop-card:nth-child(2){background:#fcf2f7}
.shop-card:hover{transform:translateY(-5px)}
.shop-image{height:343px;background:none;padding:45px 12px 24px;overflow:visible}
.shop-image img{height:270px;max-width:100%;width:100%;object-fit:contain}
.image-label{left:25px;top:22px;font-size:8px;color:#717788}
.shop-info{padding:30px 28px 30px 10px}
.shop-title{display:block;margin-bottom:14px}
.shop-title h3{font-size:25px;font-weight:600;letter-spacing:-.05em;white-space:nowrap}
.shop-title strong{display:block;font-size:21px;margin-top:13px;font-weight:500}
.shop-info>p{font-size:11px;line-height:1.85;min-height:0}
.shop-actions{display:flex;flex-direction:column;align-items:start;gap:13px;margin-top:20px}
.shop-actions>a{font-size:11px}
.shop-actions .btn{min-height:44px;font-size:11px;padding:11px 21px}
.selection{border-top:1px solid var(--line);gap:90px}
.selection-box{border-radius:12px;background:#f4f7f8;border:0;padding:33px}
.selection-row{border-color:#dce4e8}
.selection-row select{border-radius:5px;background:#fff}
.selection-copy>p:not(.eyebrow){line-height:1.8}
.selection-copy h2{max-width:520px}
.faq{border-top:1px solid var(--line)}
.footer{background:#eef3f5}
.product-copy h1{font-weight:600}
.feature-tags span{border-radius:6px}
.detail-visual{border-radius:10px}
.cart-dialog{background:#fff}
@keyframes hero-arrive{from{opacity:0}to{opacity:1}}
@media(min-width:1500px){.hero-grid{min-height:650px}.scene-image{height:410px}.scene-gas .scene-image{height:335px}}
@media(max-width:1100px){
 .hero-grid{grid-template-columns:.95fr 1.15fr;gap:10px;min-height:558px}
 .hero-message h1{font-size:76px}
 .hero-message .eyebrow{font-size:7px;gap:8px}
 .hero-description{font-size:12px}
 .hero-actions{gap:18px;flex-wrap:wrap;margin-top:24px}
 .hero-actions .btn{padding:13px 21px}
 .hero-note{margin-top:24px}
 .scene-image{height:320px}
 .scene-gas .scene-image{height:265px}
 .scene-caption{margin-inline:3px;gap:7px}
 .scene-caption strong{font-size:17px}
 .scene-caption small{font-size:7px}
 .scene-arrow{width:27px;height:27px;font-size:17px}
 .shop-grid{gap:24px}
 .shop-title h3{font-size:22px}
 .shop-info{padding-right:20px}
 .shop-image{height:330px}
 .section{padding-block:80px}
}

@media(max-width:1100px){
 .content-story{gap:32px;padding:30px;grid-template-columns:1.2fr .8fr}
 .story-gas{grid-template-columns:.8fr 1.2fr}
 .story-copy h3{font-size:30px}
 .ingredient-notes{gap:20px;margin-top:25px}
 .ingredient-notes dd{font-size:11px}
 .scene-label strong{font-size:14px}
 .scene-label>span{font-size:9px}
}
@media(max-width:900px) and (min-width:761px){

 .hero-message h1{font-size:68px}
 .hero-grid{min-height:535px}
 .hero-note{margin-top:20px}
 .hero-actions{gap:6px}
 .scene-image{height:290px}
 .scene-gas .scene-image{height:242px}
 .scene-caption{align-items:start}
 .scene-caption strong{font-size:16px}
 .scene-caption small{font-size:7px;white-space:normal}
 .scene-arrow{width:23px;height:23px;font-size:15px}
 .shop-card{grid-template-columns:1fr}
 .shop-image{height:275px}
 .shop-image img{height:230px}
 .shop-info{padding:18px 28px 30px}
 .shop-actions{flex-direction:row;justify-content:space-between;align-items:center}
}
@media(max-width:760px){
 .content-story,.story-gas{grid-template-columns:1fr;padding:27px 23px;gap:27px}
 .story-gas .story-copy,.story-gas .story-picture{grid-column:auto;grid-row:auto}
 .story-product{font-size:10px;gap:9px 15px}
 .story-copy h3{font-size:32px;margin-top:19px}
 .story-lead{font-size:12px;margin-top:15px}
 .ingredient-notes{gap:21px 19px;margin-top:24px}
 .ingredient-notes dt{font-size:16px}
 .ingredient-notes dd{font-size:11px}
 .story-picture{max-width:370px;width:100%;margin-inline:auto}
 .scene-label{min-height:45px;padding-left:5px;gap:4px}
 .scene-label strong{font-size:13px}
 .scene-label>span{font-size:8px}

 .formula-section{padding:57px 0 43px}
 .formula-intro{display:block;margin-bottom:29px}
 .formula-intro .eyebrow{font-size:9px;margin-bottom:14px}
 .formula-intro h2{font-size:42px}
 .formula-intro>p{font-size:12px;margin-top:17px;line-height:1.8}
 .formula-note{text-align:left;font-size:10px;margin-top:22px}

 .header{height:68px;background:#ffffffed}
 .section{padding-block:64px}
 .hero-grid{grid-template-columns:1fr;gap:0;padding-top:26px;padding-bottom:0;min-height:0}
 .hero-message{padding:0}
 .hero-message .eyebrow{font-size:8px}
 .hero-message h1{font-size:65px;line-height:1;margin:21px 0 17px}
 .hero-message h1>span{display:inline}
 .hero-message h1>span+span{margin-left:0}
 .hero-description{font-size:12px;line-height:1.7}
 .hero-actions{margin-top:20px;gap:22px}
 .hero-actions .btn{min-height:43px;font-size:11px}
 .hero-text-link{font-size:10px;min-height:43px}
 .hero-note{display:none}
 .hero-scene{margin-top:18px;grid-template-columns:1fr 1fr;gap:23px;max-width:500px;width:100%;margin-inline:auto;padding-top:0}
 .scene-image{height:285px}
 .scene-gas .scene-image{height:244px}
 .scene-caption{margin:8px 3px 0;padding:12px 0 0;min-height:59px}
 .scene-caption strong{font-size:20px}
 .scene-caption small{font-size:8px}
 .scene-arrow{width:28px;height:28px;font-size:18px}
 .hero-bottom{padding-block:16px 18px}
 .scroll-cue{font-size:6px;gap:8px;letter-spacing:.1em}
 .collection .section-heading{display:block;margin-bottom:28px}
 .collection .section-heading>p{margin-top:20px;font-size:12px;max-width:none}
 .collection .section-heading>p br{display:none}
 .shop-grid{gap:17px}
 .shop-card{grid-template-columns:1fr;border-radius:9px}
 .shop-image{height:275px;padding-top:37px}
 .shop-image img{height:235px}
 .shop-info{padding:17px 20px 25px}
 .shop-title h3{font-size:23px}
 .shop-title strong{font-size:20px;margin-top:10px}
 .shop-info>p{font-size:11px;min-height:63px}
 .shop-actions{gap:15px;margin-top:14px}
 .shop-actions .btn{width:100%}
 .selection{gap:30px}
 .selection-box{padding:23px}
}
@media(max-width:480px){
 .content-story{padding:25px 20px}
 .story-copy h3{font-size:29px}
 .story-product>span{font-size:9px}
 .scene-label strong{font-size:12px}
 .scene-label>span{font-size:7px}


 .hero-grid{padding-top:24px}
 .hero-message .eyebrow{font-size:7px;gap:8px}
 .line-mark{width:17px}
 .hero-message h1{font-size:53px;letter-spacing:-.072em;margin-top:19px;margin-bottom:15px;white-space:nowrap}
 .hero-description{font-size:11px;line-height:1.8}
 .hero-actions{gap:20px;margin-top:17px}
 .hero-actions .btn{font-size:10px;min-height:42px;padding:11px 18px;gap:20px}
 .hero-text-link{font-size:9px;gap:7px}
 .hero-scene{gap:16px;margin-top:19px}
 .scene-image{height:231px}
 .scene-gas .scene-image{height:194px}
 .scene-caption{min-height:56px;padding-top:12px;margin-top:8px;gap:5px}
 .scene-caption strong{font-size:17px}
 .scene-caption small{font-size:6.8px;margin-top:5px}
 .scene-arrow{width:25px;height:25px;font-size:16px}
 .hero-bottom{padding-top:12px;padding-bottom:12px}
 .scroll-cue{font-size:5.5px}
 .section h2{font-size:40px}
 .shop-grid{gap:13px}
 .shop-image{height:225px;padding:32px 9px 10px}
 .shop-image img{height:180px}
 .image-label{font-size:6px;left:15px;top:18px}
 .shop-info{padding:14px 14px 20px}
 .shop-title h3{font-size:19px}
 .shop-title strong{font-size:19px}
 .shop-info>p{font-size:10px;min-height:76px}
 .shop-actions>a{font-size:10px}
 .shop-actions .btn{font-size:10px;padding:10px 12px;min-height:42px}
}
@media(max-width:350px){
 .content-story{padding:23px 17px}
 .story-copy h3{font-size:26px}
 .ingredient-notes{gap:19px 15px}
 .ingredient-notes dt{font-size:14px}
 .ingredient-notes dd{font-size:10px}
 .story-link{font-size:10px;gap:15px}
 .scene-label strong{font-size:10px}
 .scene-label>span{font-size:6.5px}


 .hero-message h1{font-size:47px}
 .hero-actions{gap:13px}
 .hero-actions .btn{padding-inline:15px;font-size:9px;gap:16px}
 .hero-text-link{font-size:8px}
 .hero-message .eyebrow{font-size:6px}
 .scene-image{height:204px}
 .scene-gas .scene-image{height:170px}
 .scene-caption strong{font-size:15px}
 .scene-caption small{font-size:6px}
 .scene-arrow{width:22px;height:22px;font-size:14px}
 .hero-scene{gap:13px}
 .section h2{font-size:36px}
 .shop-title h3{font-size:16px}
 .shop-info{padding-inline:11px}
 .shop-info>p{font-size:9px}
 .shop-image{height:210px}
 .shop-image img{height:170px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .hero-message h1>span,.hero-description,.hero-actions,.scene-image{opacity:1!important;transform:none!important}
 .hero-scene{transform:none!important}
}