.hero-scroll{position:relative;min-height:100svh;background:#d8d7ca}.hero-sticky{position:relative;height:100svh;min-height:680px;overflow:hidden;background:linear-gradient(180deg,#bdced3 0%,#dce0d8 42%,#63785d 100%);isolation:isolate}.hero-scene,.hero-layer,.hero-layer img{position:absolute;inset:0;width:100%;height:100%}.hero-scene{overflow:hidden}.hero-layer{will-change:transform}.hero-layer img{object-fit:cover;object-position:center center;max-width:none;will-change:transform}.layer-sky{z-index:1;background:radial-gradient(circle at 17% 19%,#f7e4b8,transparent 30%),linear-gradient(180deg,#9db9ca 0%,#dbe2dc 48%,#67785d 100%)}.layer-sky img{clip-path:polygon(0 0,100% 0,100% 30%,90% 27%,82% 22%,72% 25%,62% 31%,52% 33%,42% 35%,28% 36%,14% 31%,0 28%)}.layer-far{z-index:2}.layer-far img{clip-path:polygon(0 25%,8% 28%,19% 34%,31% 33%,40% 37%,53% 34%,64% 33%,78% 27%,91% 25%,100% 27%,100% 51%,88% 49%,77% 44%,63% 49%,52% 52%,40% 50%,26% 52%,13% 48%,0 50%)}.layer-cotopaxi{z-index:3}.layer-cotopaxi img{clip-path:polygon(48% 30%,52% 25%,57% 19%,62% 11%,67% 7%,72% 10%,79% 18%,86% 24%,94% 27%,100% 28%,100% 47%,94% 46%,88% 42%,80% 40%,74% 37%,68% 36%,61% 39%,55% 41%,49% 40%,44% 37%)}.layer-valley{z-index:4}.layer-valley img{clip-path:polygon(0 39%,12% 42%,24% 45%,36% 48%,48% 45%,60% 41%,72% 38%,84% 39%,100% 37%,100% 79%,88% 76%,77% 73%,66% 78%,54% 73%,44% 70%,31% 69%,18% 72%,0 67%)}.layer-foreground{z-index:5}.layer-foreground img{clip-path:polygon(0 40%,12% 45%,25% 49%,38% 57%,51% 66%,64% 64%,78% 57%,90% 54%,100% 55%,100% 100%,0 100%)}.layer-foliage{z-index:6;inset:0 auto auto 0;width:27vw;height:34vh;min-width:260px;min-height:220px}.layer-foliage img{object-fit:contain;object-position:left top;filter:drop-shadow(0 14px 20px rgba(24,54,32,.18));transform:translate(-18%,-14%) rotate(22deg)}.hero-vignette{position:absolute;inset:0;z-index:7;pointer-events:none;background:linear-gradient(180deg,rgba(15,35,23,.15),transparent 26%,transparent 58%,rgba(12,31,20,.5));mix-blend-mode:multiply}.brand-statement{position:absolute;z-index:10;left:50%;top:52%;transform:translate(-50%,-50%);width:min(900px,90%);color:#fff;text-align:center;text-shadow:0 3px 28px rgba(22,44,29,.42);will-change:opacity,transform}.brand-statement .small-script{display:block;font-family:var(--display);font-size:clamp(1.5rem,3vw,3rem);font-style:italic;color:#f4df99}.brand-statement strong{display:block;font-family:var(--display);font-size:clamp(5rem,12vw,12rem);font-weight:500;line-height:.84;letter-spacing:-.055em}.scroll-begin{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:34px;font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}.scroll-begin::after{content:'';width:42px;height:1px;background:currentColor}.hero-copy{position:absolute;z-index:11;left:max(40px,5.5vw);bottom:max(34px,4.2vh);width:min(660px,52vw);color:#fff;opacity:0;visibility:hidden;transform:translateY(18px);will-change:opacity,transform}.hero-copy h1{margin:0 0 13px;font-family:var(--display);font-size:clamp(3rem,5.5vw,6.4rem);font-weight:500;letter-spacing:-.05em;line-height:.88;text-shadow:0 3px 30px rgba(9,31,18,.46)}.hero-copy>p{width:min(540px,100%);margin:0 0 20px;font-size:1rem;text-shadow:0 2px 18px rgba(9,31,18,.72)}.hero-actions{display:flex;gap:10px;flex-wrap:wrap}.trust-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px;width:min(730px,80vw)}.trust-stat{border-top:1px solid rgba(255,255,255,.55);padding-top:10px;text-shadow:0 2px 14px rgba(10,30,18,.65)}.trust-stat strong{display:block;font-family:var(--display);font-size:1.35rem}.trust-stat span{display:block;font-size:.61rem;line-height:1.2;letter-spacing:.08em;text-transform:uppercase}.altitude-ledger{position:absolute;z-index:12;right:28px;top:50%;display:flex;align-items:center;gap:10px;color:#fff;font-size:.61rem;letter-spacing:.14em;text-transform:uppercase;writing-mode:vertical-rl;transform:translateY(-50%)}.altitude-ledger::before{content:'';width:1px;height:90px;background:rgba(255,255,255,.6)}
.collections{background:linear-gradient(180deg,#edf0e7 0%,var(--cream) 18%)}.bowl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.bowl-card{position:relative;min-height:390px;border-radius:24px;overflow:hidden;background:var(--paper);border:1px solid var(--border)}.bowl-card img{width:100%;height:270px;object-fit:cover;transition:transform .55s var(--ease)}.bowl-card:hover img{transform:scale(1.04) translateY(-4px)}.bowl-copy{padding:20px 22px}.bowl-copy h3{font-family:var(--display);font-size:1.55rem;margin:0 0 4px;color:var(--forest)}.bowl-copy p{margin:0;color:#66685f;font-size:.86rem}.concern-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}.chip{min-height:48px;display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;padding:10px 18px;background:#fff;color:var(--forest);font-size:.78rem;font-weight:650}.chip:hover{background:var(--forest);color:#fff}.why{background:var(--cream)}.pillar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.pillar{min-height:210px;padding:26px 18px;border:1px solid var(--border);border-radius:18px;background:#fff;text-align:center}.pillar img{width:70px;height:70px;object-fit:contain;margin:0 auto 20px}.pillar h3{font-family:var(--display);font-size:1.15rem;margin:0;color:var(--forest)}.philosophy{padding-block:clamp(100px,13vw,190px);background:var(--paper)}.philosophy-statement{max-width:1050px;margin:0 auto 75px;text-align:center}.philosophy-statement h2{margin:0;font-family:var(--display);font-size:clamp(3.2rem,7vw,7.5rem);font-weight:400;letter-spacing:-.05em;line-height:.96;color:var(--forest)}.principles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.principle{padding:22px;border-top:1px solid var(--forest)}.principle span{font-size:.68rem;color:var(--gold);letter-spacing:.14em}.principle h3{font-family:var(--display);font-size:1.5rem;margin:8px 0}.herb-plates{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:55px}.herb-plate{aspect-ratio:1;border-radius:50%;overflow:hidden;background:#e8e1cd;border:1px solid var(--border)}.herb-plate img{width:100%;height:100%;object-fit:cover}.products{background:var(--cream)}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.product-card{display:flex;flex-direction:column;overflow:hidden;border-radius:20px;background:#fff;border:1px solid var(--border);transition:transform .35s var(--ease),box-shadow .35s}.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.product-media{position:relative;aspect-ratio:1.02;background:#e8e4d8;overflow:hidden}.product-media img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}.product-card:hover .product-media img{transform:scale(1.035)}.product-tag{position:absolute;left:12px;top:12px;border-radius:999px;background:rgba(250,249,246,.92);padding:7px 11px;font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.product-copy{padding:18px;display:grid;grid-template-columns:1fr auto;gap:6px 12px}.product-copy h3{font-family:var(--display);font-size:1.45rem;margin:0;color:var(--forest)}.product-copy p{grid-column:1/-1;margin:0;color:#5d5f57;font-size:.84rem}.product-copy strong{font-size:.92rem;color:var(--forest)}.product-copy .card-link{grid-column:1/-1;justify-self:start;min-height:44px;display:inline-flex;align-items:center;margin-top:8px;border:1px solid var(--forest);border-radius:999px;padding:0 20px;background:#fff;color:var(--forest);font-size:.68rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;transition:background .22s,color .22s}.product-card:hover .card-link,.product-copy .card-link:hover{background:var(--forest);color:#fff}.concern-grid{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--border);border-left:1px solid var(--border)}.concern-tile{min-height:150px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(255,255,255,.5);transition:background .25s,color .25s}.concern-tile:hover{background:var(--forest);color:#fff}.concern-tile small{color:var(--gold);letter-spacing:.14em}.concern-tile strong{font-family:var(--display);font-size:1.25rem;line-height:1.1}.retreat-band{width:min(1460px,calc(100% - 28px));min-height:760px;margin:40px auto;border-radius:32px;overflow:hidden;position:relative;color:#fff;display:flex;align-items:end}.retreat-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.retreat-band::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,37,24,.86),rgba(15,37,24,.12) 70%),linear-gradient(0deg,rgba(15,37,24,.5),transparent 55%)}.retreat-copy{position:relative;z-index:2;width:min(720px,90%);padding:clamp(36px,7vw,94px)}.retreat-copy h2{font-family:var(--display);font-size:clamp(3.4rem,7vw,7rem);font-weight:400;line-height:.9;letter-spacing:-.04em;margin:0 0 20px}.play-btn{width:68px;height:68px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.18);color:#fff;display:grid;place-items:center;cursor:pointer;margin-top:28px;backdrop-filter:blur(10px)}.play-btn svg{width:25px;height:25px;fill:currentColor}.stories{background:var(--cream)}.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.video-card{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;border:0;padding:0;text-align:left;cursor:pointer;background:var(--forest);color:#fff}.video-card img{width:100%;height:100%;object-fit:cover;filter:brightness(.82)}.video-card::after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(12,33,20,.82))}.video-card-copy{position:absolute;z-index:2;left:20px;right:20px;bottom:20px}.video-card-copy small{display:block;margin-bottom:7px;color:#f1d77d;letter-spacing:.12em;text-transform:uppercase}.video-card-copy strong{font-family:var(--display);font-size:1.55rem;line-height:1.1}.video-play{position:absolute;z-index:3;top:18px;right:18px;width:50px;height:50px;border:1px solid rgba(255,255,255,.6);border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);backdrop-filter:blur(8px)}.newsletter-section{padding:100px 0;background:var(--paper)}.newsletter-card{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end}.newsletter-card h2{font-family:var(--display);font-size:clamp(3rem,6vw,6rem);font-weight:400;line-height:.93;margin:0;color:var(--forest)}.newsletter{display:flex;gap:10px}.newsletter input{background:#fff}.newsletter .btn{flex:none}
@media(max-width:1000px){.bowl-grid,.product-grid{grid-template-columns:repeat(2,1fr)}.pillar-grid{grid-template-columns:repeat(3,1fr)}.principles,.herb-plates{grid-template-columns:repeat(2,1fr)}.concern-grid{grid-template-columns:repeat(3,1fr)}.trust-bar{grid-template-columns:repeat(2,1fr);width:min(560px,85vw)}.hero-copy{width:70vw}.story-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.hero-sticky{min-height:760px}.hero-layer{transform:none!important}.hero-vignette{background:linear-gradient(180deg,rgba(14,34,22,.08),rgba(14,34,22,.1) 36%,rgba(12,31,20,.78) 84%)}.brand-statement{display:none}.hero-copy{left:22px;right:22px;bottom:24px;width:auto;opacity:1!important;visibility:visible!important;transform:none!important}.hero-copy h1{font-size:clamp(3rem,14vw,4.6rem)}.hero-copy>p{font-size:.88rem;line-height:1.42}.hero-actions .btn{min-height:46px;padding:0 16px;font-size:.67rem}.trust-bar{width:100%;gap:7px;margin-top:16px}.trust-stat strong{font-size:1.05rem}.trust-stat span{font-size:.52rem}.altitude-ledger{right:7px;top:43%;font-size:.5rem}.layer-foliage{width:44vw;height:22vh}.bowl-grid,.product-grid,.story-grid{grid-template-columns:1fr}.pillar-grid{grid-template-columns:repeat(2,1fr)}.pillar{min-height:170px}.principles,.herb-plates{grid-template-columns:1fr 1fr}.concern-grid{grid-template-columns:repeat(2,1fr)}.concern-tile{min-height:128px;padding:16px}.retreat-band{min-height:680px}.retreat-copy{padding:34px 26px}.newsletter-card{grid-template-columns:1fr;gap:28px}.newsletter{flex-direction:column}.newsletter .btn{width:100%}}
.layer-sky img{clip-path:polygon(0 0,62% 0,62% 28%,54% 32%,44% 35%,30% 36%,14% 31%,0 28%)}.layer-foliage{width:18vw;height:26vh;min-width:160px;min-height:150px}@media(max-width:720px){.layer-foliage{width:30vw;height:18vh}}
.layer-cotopaxi img{clip-path:polygon(50% 33%,56% 30%,62% 26%,68% 19%,73% 12%,76% 7%,80% 9%,84% 13%,90% 18%,100% 22%,100% 47%,94% 46%,88% 42%,80% 40%,74% 37%,68% 36%,61% 39%,55% 41%,49% 40%,44% 37%)}
/* Transparent source layers replace the former polygon masks. */
.hero-layer img{clip-path:none!important;object-position:center bottom}.layer-sky{background:radial-gradient(circle at 18% 28%,rgba(250,225,170,.95),transparent 28%),linear-gradient(180deg,#9fb9c8 0%,#d8e0dc 55%,#93a493 100%)}.layer-far,.layer-cotopaxi,.layer-valley,.layer-foreground,.layer-foliage{inset:0;width:100%;height:100%;min-width:0;min-height:0}.layer-cotopaxi img{transform:translateX(12%) scale(.96);transform-origin:center bottom;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 66%,rgba(0,0,0,.82) 76%,transparent 96%);mask-image:linear-gradient(to bottom,#000 0%,#000 66%,rgba(0,0,0,.82) 76%,transparent 96%)}.layer-foliage img{object-fit:cover;object-position:center bottom;transform:none;filter:none}.hero-final-scene{position:absolute;inset:0;z-index:7;width:100%;height:100%;object-fit:cover;object-position:center center;opacity:0;visibility:hidden;will-change:opacity,transform}.hero-vignette{z-index:8;mix-blend-mode:normal}
.video-stories{position:relative;background:#173525;color:#fff;overflow:hidden}.video-stories::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#12301e 0%,#1c4029 52%,#14331f 100%)}.video-stories .shell{position:relative;z-index:1}.video-stories .section-head{position:relative}.video-stories .section-head p{color:#cad6cd}.video-stories .eyebrow,.retreat-copy .eyebrow{color:#f0d77c}.video-stories .video-card{border:1px solid rgba(255,255,255,.18)}.preview-badge{position:absolute;z-index:3;left:16px;top:16px;padding:7px 10px;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:rgba(17,47,30,.62);backdrop-filter:blur(8px);font-size:.56rem;font-weight:750;letter-spacing:.11em;text-transform:uppercase}.preview-note{position:relative;margin:22px 0 0;color:#b9c8bd;font-size:.75rem;letter-spacing:.04em}
.retreat-band{align-items:stretch}.retreat-film-grid{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:minmax(360px,.8fr) minmax(440px,1.2fr);gap:clamp(30px,5vw,72px);align-items:center;padding:clamp(36px,6vw,84px)}.retreat-copy{width:auto;padding:0}.retreat-copy h2{font-size:clamp(3.2rem,6.1vw,6.5rem)}.retreat-film{position:relative;aspect-ratio:16/9;border:1px solid rgba(255,255,255,.42);border-radius:24px;overflow:hidden;background:rgba(10,28,18,.58);box-shadow:0 28px 70px rgba(4,20,12,.35)}.retreat-film span{position:absolute;z-index:2;left:18px;top:18px;padding:8px 12px;border:1px solid rgba(255,255,255,.38);border-radius:999px;background:rgba(20,50,32,.58);backdrop-filter:blur(10px);font-size:.66rem;font-weight:750;letter-spacing:.13em;text-transform:uppercase}.retreat-film iframe{width:100%;height:100%;border:0}
.image-stories{position:relative;background:linear-gradient(180deg,#f7f4eb 0%,#f3f0e9 100%);overflow:hidden}.image-stories .shell{position:relative}.image-story-grid{display:grid;grid-template-columns:1.15fr .85fr .85fr;gap:16px}.image-story{position:relative;min-height:480px;border-radius:24px;overflow:hidden;background:var(--forest);color:#fff}.image-story:first-child{grid-row:span 2;min-height:700px}.image-story img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.88);transition:transform .7s var(--ease)}.image-story:hover img{transform:scale(1.035)}.image-story::after{content:'';position:absolute;inset:25% 0 0;background:linear-gradient(transparent,rgba(12,34,21,.9))}.image-story-copy{position:absolute;z-index:2;left:clamp(22px,3vw,42px);right:clamp(22px,3vw,42px);bottom:clamp(22px,3vw,42px)}.image-story blockquote{margin:0 0 18px;font-family:var(--display);font-size:clamp(1.45rem,2.5vw,2.65rem);line-height:1.08}.image-story cite{font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#f0d77c}
.drag-sprite{position:absolute;z-index:30;width:var(--sprite-size,110px);aspect-ratio:1;border:0;padding:0;background:transparent;cursor:grab;touch-action:none;user-select:none;transform:translate3d(var(--drag-x,0),var(--drag-y,0),0) rotate(var(--sprite-rotate,0deg));filter:drop-shadow(0 12px 15px rgba(24,52,33,.18));transition:filter .2s,scale .2s}.drag-sprite img{width:100%;height:100%;object-fit:contain;pointer-events:none}.drag-sprite:hover,.drag-sprite:focus-visible{filter:drop-shadow(0 18px 22px rgba(24,52,33,.3));scale:1.06}.drag-sprite.is-dragging{cursor:grabbing;scale:1.08;transition:none}.drag-sprite:focus-visible{outline:2px solid var(--gold);outline-offset:5px;border-radius:50%}
.layer-foliage img{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 100%)}
@media(max-width:1000px){.retreat-film-grid{grid-template-columns:1fr}.image-story-grid{grid-template-columns:1fr 1fr}.image-story:first-child{grid-row:auto;grid-column:1/-1;min-height:620px}.drag-sprite{width:88px}}
@media(max-width:720px){.hero-final-scene{opacity:1!important;visibility:visible!important}.layer-far,.layer-cotopaxi,.layer-valley,.layer-foreground{display:none}.layer-foliage{display:block;opacity:.55}.retreat-film-grid{padding:34px 24px}.retreat-film{border-radius:18px}.image-story-grid{grid-template-columns:1fr}.image-story:first-child{grid-column:auto;min-height:540px}.image-story{min-height:440px}.drag-sprite{width:68px;opacity:.9}}
@media(max-width:720px){html,body{overflow-x:clip}}
.hero-static-range{position:absolute;inset:0;z-index:2;opacity:.24;will-change:opacity,transform}.hero-static-range img{width:100%;height:100%;object-fit:cover;object-position:center bottom;filter:saturate(.7) brightness(.78);-webkit-mask-image:linear-gradient(to bottom,transparent 15%,#000 56%,#000 100%);mask-image:linear-gradient(to bottom,transparent 15%,#000 56%,#000 100%)}
.drag-sprite img{animation:ambient-sprite var(--ambient-duration,6.4s) var(--ambient-delay,0s) ease-in-out infinite alternate;transform-origin:center}.drag-sprite.is-dragging img{animation-play-state:paused}@keyframes ambient-sprite{0%{transform:translate3d(-3px,4px,0) rotate(-2.5deg)}50%{transform:translate3d(4px,-6px,0) rotate(2deg)}100%{transform:translate3d(-1px,-2px,0) rotate(4deg)}}
@media(max-width:720px){.hero-static-range{display:none}}
.shop-accent{filter:saturate(.8)}
/* Final living-interface pass: art stays in the margins, copy stays off faces. */
.section{overflow:hidden}.section>.shell{position:relative;z-index:2}.drag-sprite{transform:translate3d(calc(var(--drag-x,0px) + var(--pointer-x,0px)),calc(var(--drag-y,0px) + var(--pointer-y,0px)),0) rotate(var(--sprite-rotate,0deg));will-change:transform}.drag-sprite.sprite-behind{z-index:-1}.drag-sprite.sprite-edge{z-index:8}.drag-sprite.is-dragging{z-index:40}.brand-statement strong{font-weight:400;letter-spacing:-.07em;text-wrap:balance;transform:translate3d(var(--scene-x,0),var(--scene-y,0),0);transition:transform .32s var(--ease)}.brand-statement .small-script{letter-spacing:.015em;transform:translate3d(var(--scene-x-back,0),var(--scene-y-back,0),0);transition:transform .38s var(--ease)}.hero-copy h1{font-weight:400;letter-spacing:-.06em;text-wrap:balance;transform:translate3d(var(--scene-x-back,0),var(--scene-y-back,0),0);transition:transform .36s var(--ease)}.section-head h2,.shop-hero h1,.page-hero h1,.pdp-hero h1{transform:translate3d(var(--react-x,0),var(--react-y,0),0);transition:transform .38s var(--ease)}
.image-story{display:grid;grid-template-rows:minmax(310px,1fr) auto;min-height:540px;background:#173525}.image-story:first-child{min-height:760px}.image-story img{position:relative;inset:auto;grid-row:1;width:100%;height:100%;min-height:340px;object-fit:cover;object-position:center 22%;filter:saturate(.9) brightness(.88)}.image-story:first-child img{min-height:500px}.image-story::after{display:none}.image-story-copy{position:relative;z-index:2;left:auto;right:auto;bottom:auto;min-height:190px;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(135deg,#173525,#102a1b)}.image-story blockquote{max-width:22ch;margin:0 0 22px;font-size:clamp(1.35rem,2.15vw,2.25rem)}.image-story cite{align-self:flex-start}.image-story:hover img{transform:scale(1.025)}
@media(max-width:1000px){.image-story:first-child{min-height:690px}.image-story:first-child img{min-height:430px}}
@media(max-width:720px){.brand-statement strong,.brand-statement .small-script,.hero-copy h1,.section-head h2,.shop-hero h1,.page-hero h1,.pdp-hero h1{transform:none!important}.drag-sprite.sprite-behind{opacity:.64}.image-story,.image-story:first-child{min-height:0}.image-story img,.image-story:first-child img{min-height:390px}.image-story-copy{min-height:0}.image-story blockquote{font-size:1.7rem}}
/* A second editorial ribbon bridges the cinematic hero into the product journey. */
.origin-ribbon{position:relative;z-index:12;width:100%;height:48px;overflow:hidden;border-block:1px solid rgba(31,58,42,.18);background:#d8ba56;color:#173624}
.origin-ribbon-track{width:max-content;height:100%;display:flex;align-items:center;gap:24px;padding-inline:24px;font-size:.63rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;animation:origin-marquee 29s linear infinite}
.origin-ribbon-track i{font-style:normal;color:#fff9df}
@keyframes origin-marquee{to{transform:translateX(-50%)}}
@media(max-width:720px){.origin-ribbon{height:40px}.origin-ribbon-track{gap:17px;padding-inline:17px;font-size:.52rem}}
@media(prefers-reduced-motion:reduce){.origin-ribbon-track{animation:none}}
/* Equal duplicate groups prevent the ribbon from ever exposing empty track. */
.origin-ribbon-track{gap:0;padding:0}
.origin-ribbon-group{display:flex;flex:none;align-items:center;justify-content:space-around;gap:24px;min-width:100vw;height:100%;padding-inline:24px}
@media(max-width:720px){.origin-ribbon-track{gap:0;padding:0}.origin-ribbon-group{gap:17px;padding-inline:17px}}
.philosophy-coda{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);min-height:560px;margin-top:clamp(48px,7vw,90px);overflow:hidden;border:1px solid var(--border);border-radius:30px;background:#173525;color:#fff;box-shadow:0 28px 80px rgba(31,58,42,.12)}
.philosophy-coda-media{position:relative;min-height:460px;overflow:hidden}
.philosophy-coda-media::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 62%,#173525)}
.philosophy-coda-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.02);transition:transform .9s var(--ease)}
.philosophy-coda:hover .philosophy-coda-media img{transform:scale(1.025)}
.philosophy-coda-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(34px,5vw,70px)}
.philosophy-coda-copy .eyebrow{color:#efd477}
.philosophy-coda-copy h3{margin:8px 0 18px;font-family:var(--display);font-size:clamp(3.2rem,5.3vw,6rem);font-weight:400;line-height:.88;letter-spacing:-.05em}
.philosophy-coda-copy>p:not(.eyebrow){max-width:46ch;color:#d7e0da}
.philosophy-coda-copy dl{display:grid;gap:0;margin:28px 0 0}
.philosophy-coda-copy dl div{display:grid;grid-template-columns:80px 1fr;gap:16px;padding:13px 0;border-top:1px solid rgba(255,255,255,.18)}
.philosophy-coda-copy dt{color:#efd477;font-size:.65rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.philosophy-coda-copy dd{margin:0;color:#edf2ee;font-size:.82rem}
@media(max-width:850px){.philosophy-coda{grid-template-columns:1fr}.philosophy-coda-media{min-height:330px}.philosophy-coda-media::after{background:linear-gradient(180deg,transparent 58%,#173525)}}
/* Editorial polish pass: hand-drawn accent underline + handwritten pick note. */
.collections .section-head h2 .accent{display:inline-block;padding-bottom:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 28 3, 62 11, 117 5' fill='none' stroke='%23C9A942' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom/100% 10px}
.hand-note{position:absolute;z-index:3;right:14px;bottom:12px;padding:7px 13px;border-radius:999px;background:rgba(250,249,246,.94);box-shadow:0 8px 20px rgba(31,58,42,.14);color:#7a5f16;font-family:Caveat,'Playfair Display',cursive;font-size:1.12rem;line-height:1;transform:rotate(-3deg)}
/* v26: concern section flanking sprites (varied sizes) */
.concern-section{position:relative;overflow:hidden}
.concern-sprites{position:absolute;top:0;bottom:0;width:150px;pointer-events:none;display:flex;flex-direction:column;justify-content:space-around;align-items:center;opacity:.5;z-index:1}
.concern-sprites-left{left:-28px}
.concern-sprites-right{right:-28px}
.concern-sprites img{display:block;height:auto}
.concern-sprites-left img:nth-child(1){transform:rotate(-8deg) translateX(-12px)}
.concern-sprites-left img:nth-child(3){transform:rotate(6deg)}
.concern-sprites-right img:nth-child(1){transform:rotate(10deg) translateX(14px)}
.concern-sprites-right img:nth-child(3){transform:rotate(-6deg)}
@media(max-width:900px){.concern-sprites{display:none}}
/* v26: concern tiles interactive with herb imagery */
.concern-tile{position:relative;overflow:hidden;transition:background .35s ease,color .35s ease}
.concern-ico{position:absolute;right:14px;bottom:12px;width:52px;height:52px;border-radius:50%;overflow:hidden;opacity:0;transform:translateY(8px) scale(.85);transition:opacity .35s ease,transform .35s ease;background:rgba(255,255,255,.6)}
.concern-ico img{width:100%;height:100%;object-fit:contain;padding:6px;box-sizing:border-box}
.concern-tile:hover,.concern-tile:focus-visible{background:var(--forest, #1c3a24);color:#f7f3ea}
.concern-tile:hover strong,.concern-tile:focus-visible strong{color:#f7f3ea}
.concern-tile:hover .concern-ico,.concern-tile:focus-visible .concern-ico{opacity:1;transform:translateY(0) scale(1)}
/* v26: newsletter email icon */
.email-wrap{position:relative;display:flex;flex:1}
.email-wrap .email-ico{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#7a856f;pointer-events:none}
.email-wrap input{padding-left:48px !important;width:100%}
/* v34: mobile premium pass */
@media(max-width:720px){
.principles{grid-template-columns:1fr;gap:0}
.principle{padding:20px 2px}
.principle h3{font-size:1.4rem}
.pillar{min-height:150px;padding:20px 12px}
.pillar img{width:54px;height:54px;margin-bottom:12px}
.pillar h3{font-size:.98rem}
.section-head{margin-bottom:36px}
.bowl-card{min-height:0}
.bowl-card img{height:230px}
.newsletter-section{padding:76px 0}
}
@media(hover:none),(pointer:coarse){
.concern-tile{padding-right:82px}
}
/* v35: client mockup body rebuild. Warm whites, subtle transitions, centered editorial heads. */
.section-head.centered{grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px;align-items:center}
.section-head.centered p{max-width:56ch}
.gold-italic,.philosophy .amp{font-style:italic;color:var(--gold)}
.btn-outline{border-color:var(--forest);background:transparent;color:var(--forest)}
.btn-outline:hover{background:var(--forest);color:#fff}
.stats-bar{background:#fff;border-block:1px solid var(--border)}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);padding:34px 0}
.stat{padding:6px 26px;text-align:center;border-left:1px solid var(--border)}
.stat:first-child{border-left:0}
.stat strong{display:block;font-family:var(--display);font-weight:500;font-size:clamp(1.7rem,2.4vw,2.4rem);color:var(--forest);line-height:1.1}
.stat>span{display:block;margin-top:6px;color:#6b6d63;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase}
.collections{background:var(--cream)}
.collection-row{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2vw,28px)}
.collection-item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 6px 16px;border-radius:20px;transition:transform .4s var(--ease),background .3s}
.collection-item:hover{transform:translateY(-6px);background:rgba(255,255,255,.75)}
.bowl-stack{position:relative;width:min(100%,190px);aspect-ratio:1;margin-bottom:18px}
.bowl-stack .cup{position:absolute;left:50%;top:-6%;transform:translateX(-14%);width:56%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:1px solid var(--border);box-shadow:0 10px 24px rgba(31,58,42,.14)}
.bowl-stack .bowl{position:absolute;left:0;bottom:0;width:88%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:1px solid var(--border);box-shadow:0 18px 36px rgba(31,58,42,.16);transition:transform .5s var(--ease)}
.collection-item:hover .bowl{transform:scale(1.045)}
.bowl-stack img{width:100%;height:100%;object-fit:cover}
.collection-label{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--forest)}
.collection-cat{margin-top:4px;font-family:var(--display);font-style:italic;font-size:1.02rem;color:#7d8071}
.collection-arrow{margin-top:10px;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;color:var(--forest);font-size:.85rem;transition:background .25s,color .25s}
.collection-item:hover .collection-arrow{background:var(--forest);color:#fff}
.philosophy{background:var(--paper);padding-block:clamp(90px,11vw,160px)}
.philosophy .philosophy-statement{margin:0 auto;max-width:940px}
.philosophy .philosophy-statement h2{font-size:clamp(2.7rem,5.4vw,5.4rem)}
.philo-lede{max-width:58ch;margin:26px auto 34px;color:#5d5f57}
.philo-accent{position:absolute;top:0;bottom:0;width:170px;pointer-events:none;display:flex;flex-direction:column;justify-content:space-around;align-items:center;opacity:.55;z-index:1}
.philo-accent-left{left:-34px}
.philo-accent-right{right:-34px}
.philo-accent img{display:block;height:auto}
.philo-accent-left img:nth-child(1){transform:rotate(-9deg) translateX(-16px)}
.philo-accent-left img:nth-child(3){transform:rotate(7deg)}
.philo-accent-right img:nth-child(1){transform:rotate(9deg) translateX(16px)}
.philo-accent-right img:nth-child(3){transform:rotate(-7deg) translateX(10px)}
.why{background:var(--cream);padding-block:clamp(58px,7vw,96px)}
.pillar-grid{grid-template-columns:repeat(4,1fr);gap:16px}
.pillar{min-height:0;border:0;background:transparent;padding:14px 18px}
.pillar img{width:64px;height:64px;margin-bottom:16px}
.pillar p{margin:8px auto 0;max-width:26ch;color:#6b6d63;font-size:.82rem;line-height:1.5}
.products{background:var(--cream)}
.best-grid{grid-template-columns:repeat(5,1fr);gap:14px}
.best-copy{grid-template-columns:1fr;padding:14px 16px 18px}
.best-copy h3{font-size:1.18rem}
.best-buy{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.best-buy strong{font-size:.95rem;color:var(--forest)}
.best-buy .card-link{margin-top:0;min-height:44px;padding:0 22px}
.concern-section{background:#fff}
.concern-row-wrap{position:relative}
.concern-row{display:flex;gap:clamp(12px,1.6vw,26px);overflow-x:auto;scroll-snap-type:x proximity;padding:8px 54px 16px 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.concern-row::-webkit-scrollbar{display:none}
.concern-circle{flex:0 0 auto;width:clamp(96px,8.4vw,120px);scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.concern-bowl{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:1px solid var(--border);box-shadow:0 12px 26px rgba(31,58,42,.12);transition:transform .4s var(--ease),box-shadow .4s}
.concern-circle:hover .concern-bowl{transform:translateY(-4px) scale(1.05);box-shadow:0 18px 34px rgba(31,58,42,.2)}
.concern-bowl img{width:100%;height:100%;object-fit:cover}
.concern-circle strong{font-size:.68rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--forest);line-height:1.3}
.concern-scroll{position:absolute;right:-6px;top:34%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid var(--border);background:rgba(255,255,255,.94);color:var(--forest);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 22px rgba(31,58,42,.14);transition:background .25s,color .25s}
.concern-scroll:hover{background:var(--forest);color:#fff}
.concern-scroll svg{width:20px;height:20px}
.concern-section .concern-chips{justify-content:center}
.video-stories{background:var(--cream);color:inherit}
.video-stories::before{content:none}
.video-stories .section-head p{color:#5d5f57}
.video-stories .section-head h2{color:var(--forest)}
.stars{margin:2px 0 4px;color:var(--gold);font-size:1.25rem;letter-spacing:.35em;text-indent:.35em}
.video-stories .story-grid{grid-template-columns:repeat(2,1fr);gap:18px}
.video-stories .video-card{aspect-ratio:16/9;border:1px solid var(--border);border-radius:22px}
.video-stories .video-card img{filter:brightness(.9) saturate(.95)}
.video-stories .video-card::after{inset:55% 0 0;background:linear-gradient(transparent,rgba(12,33,20,.55))}
.video-stories .video-play{top:50%;left:50%;right:auto;transform:translate(-50%,-50%);width:62px;height:62px;transition:transform .3s var(--ease),background .3s}
.video-stories .video-card:hover .video-play{transform:translate(-50%,-50%) scale(1.08);background:rgba(255,255,255,.32)}
.video-stories .video-card-copy{left:16px;right:auto;bottom:16px;display:inline-flex;align-items:center;padding:9px 15px;border-radius:999px;background:rgba(250,249,246,.94);color:var(--forest);box-shadow:0 8px 20px rgba(31,58,42,.16)}
.video-stories .video-card-copy strong{font-family:var(--body);font-size:.74rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;line-height:1}
.video-stories .preview-note{color:#8a8c80;text-align:center}
.image-stories{background:linear-gradient(180deg,var(--cream) 0%,#f5f2ea 100%)}
.principles-section{background:var(--paper)}
.principles-section .herb-plates{margin-top:44px}
@media(max-width:1000px){
.stats-row{grid-template-columns:repeat(2,1fr);row-gap:20px}
.stat:nth-child(3){border-left:0}
.collection-row{grid-template-columns:repeat(3,1fr)}
.best-grid{grid-template-columns:repeat(3,1fr)}
.philo-accent{width:120px}
.pillar-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
.stats-row{padding:24px 0}
.stat{padding:4px 12px}
.stat>span{font-size:.58rem}
.collection-row{grid-template-columns:repeat(2,1fr);gap:14px}
.collection-item:last-child{grid-column:1/-1;max-width:260px;margin:0 auto}
.best-grid{grid-template-columns:1fr 1fr;gap:10px}
.best-copy h3{font-size:1rem}
.best-buy .card-link{padding:0 14px;font-size:.6rem}
.philo-accent{display:none}
.video-stories .story-grid{grid-template-columns:1fr}
.concern-circle{width:92px}
.concern-scroll{display:none}
.concern-row{padding-right:8px}
.pillar-grid{grid-template-columns:1fr 1fr}
}
/* v36: premium craft layer. Grain, gold dividers, layered shadows, staggered reveals, contact shadows, richer motion. */
.section,.newsletter-section,.stats-bar{position:relative}
.newsletter-section{overflow:hidden}
.collections::before,.philosophy::before,.why::before,.products::before,.concern-section::before,.image-stories::before,.principles-section::before,.newsletter-section::before,.video-stories::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,");background-size:160px 160px;mix-blend-mode:multiply}
.section>.shell,.newsletter-section>.shell{position:relative;z-index:2}
.section-head.centered::before{content:'\2726';display:block;width:230px;margin-bottom:4px;color:var(--gold);font-size:.82rem;line-height:1;text-align:center;background:linear-gradient(var(--gold),var(--gold)) left center/92px 1px no-repeat,linear-gradient(var(--gold),var(--gold)) right center/92px 1px no-repeat;opacity:.9}
.section-head.centered h2{font-size:clamp(2.9rem,5.6vw,5.6rem);letter-spacing:-.05em}
.eyebrow{letter-spacing:.22em}
.section-head h2 .accent,.section-head h2 .gold-italic,.newsletter-card h2 .gold-italic,.retreat-copy h2 .gold-italic{font-style:italic;color:var(--gold);font-weight:400}
.stat{position:relative;border-left:0}
.stat+.stat::before{content:'\2726';position:absolute;left:0;top:50%;transform:translate(-50%,-50%);color:var(--gold);font-size:.7rem;opacity:.85}
.stat strong{font-size:clamp(1.9rem,2.8vw,2.9rem)}
.stats-bar{background:linear-gradient(180deg,#fff,#fdfcf8)}
.mid-ribbon{background:linear-gradient(90deg,#16351f,#1e462b 50%,#16351f);border-block:1px solid rgba(217,182,74,.4)}
.mid-ribbon i{color:var(--gold)}
.bowl-stack{isolation:isolate}
.bowl-stack::after{content:'';position:absolute;left:4%;bottom:-11px;width:80%;height:20px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(31,58,42,.3),transparent 68%);filter:blur(3px);z-index:-1}
.product-card{border:1px solid rgba(31,58,42,.15);border-radius:22px;box-shadow:0 1px 2px rgba(31,58,42,.05),0 10px 26px rgba(31,58,42,.07)}
.product-card:hover{box-shadow:0 2px 4px rgba(31,58,42,.06),0 20px 44px rgba(31,58,42,.15),0 36px 84px rgba(31,58,42,.1)}
.product-media img{border-radius:0}
.herb-plate{box-shadow:0 14px 34px rgba(31,58,42,.12);transition:transform .5s var(--ease),box-shadow .5s}
.herb-plate:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(31,58,42,.2)}
.herb-plate img{transition:transform .6s var(--ease)}
.herb-plate:hover img{transform:scale(1.05)}
.philo-accent img,.herb-plate img{will-change:translate}
.btn:hover{letter-spacing:.135em}
.card-link{transition:background .3s ease,color .3s ease,letter-spacing .3s ease,border-color .3s}
.product-card:hover .card-link,.card-link:hover{letter-spacing:.125em}
.retreat-band{box-shadow:0 30px 80px rgba(31,58,42,.18)}
.retreat-film{transition:transform .5s var(--ease),box-shadow .5s}
.retreat-band:hover .retreat-film{transform:translateY(-4px)}
.newsletter-card{border:1px solid var(--border);border-radius:28px;background:#fff;box-shadow:0 1px 2px rgba(31,58,42,.05),0 18px 44px rgba(31,58,42,.08);padding:clamp(30px,4vw,56px)}
.image-story{border:1px solid rgba(31,58,42,.16);box-shadow:0 1px 2px rgba(31,58,42,.05),0 16px 38px rgba(31,58,42,.1)}
.image-story:hover{box-shadow:0 24px 58px rgba(31,58,42,.17)}
.collection-item:hover{box-shadow:0 18px 42px rgba(31,58,42,.1)}
/* video testimonials: section 3, warm cream band, larger 4:5 portrait cards */
.video-stories{background:linear-gradient(180deg,#f4efe1 0%,var(--cream) 100%)}
.video-stories .story-grid{grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px)}
.video-stories .video-card{aspect-ratio:4/5;border-radius:24px;border:1px solid rgba(31,58,42,.16);box-shadow:0 1px 2px rgba(31,58,42,.06),0 14px 34px rgba(31,58,42,.1);transition:transform .45s var(--ease),box-shadow .45s}
.video-stories .video-card:hover{transform:translateY(-6px);box-shadow:0 22px 54px rgba(31,58,42,.18)}
.video-stories .video-card img{transition:transform .6s var(--ease)}
.video-stories .video-card:hover .video-play{transform:translate(-50%,-50%) scale(1.08);background:rgba(255,255,255,.32)}
.video-stories .video-card:hover img{transform:scale(1.04)}
.video-stories .video-card::after{inset:50% 0 0;background:linear-gradient(transparent,rgba(12,33,20,.62))}
/* staggered grid reveals */
.collection-row .reveal:nth-child(2),.best-grid .reveal:nth-child(2),.video-stories .story-grid .reveal:nth-child(2),.image-story-grid .reveal:nth-child(2),.pillar-grid .reveal:nth-child(2),.principles .reveal:nth-child(2),.herb-plates .reveal:nth-child(2){transition-delay:.08s}
.collection-row .reveal:nth-child(3),.best-grid .reveal:nth-child(3),.video-stories .story-grid .reveal:nth-child(3),.image-story-grid .reveal:nth-child(3),.pillar-grid .reveal:nth-child(3),.principles .reveal:nth-child(3),.herb-plates .reveal:nth-child(3){transition-delay:.16s}
.collection-row .reveal:nth-child(4),.best-grid .reveal:nth-child(4),.video-stories .story-grid .reveal:nth-child(4),.image-story-grid .reveal:nth-child(4),.pillar-grid .reveal:nth-child(4),.principles .reveal:nth-child(4),.herb-plates .reveal:nth-child(4){transition-delay:.24s}
.collection-row .reveal:nth-child(5),.best-grid .reveal:nth-child(5){transition-delay:.32s}
@media(max-width:1100px){.video-stories .story-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){
.video-stories .story-grid{grid-template-columns:1fr}
.section-head.centered::before{width:180px;background-size:66px 1px,66px 1px}
.stat+.stat::before{content:none}
.stat:nth-child(2n)::before{content:'\2726';position:absolute;left:0;top:50%;transform:translate(-50%,-50%);color:var(--gold);font-size:.62rem}
.newsletter-card{padding:26px 20px}
.drag-sprite{width:60px}
}
/* v49: philosophy premium segment */
.philo-meaning{margin:18px auto 0;text-align:center;font-family:var(--display);font-size:clamp(1.05rem,1.5vw,1.3rem);color:#b08d2f;letter-spacing:.04em}
.philo-meaning em{font-style:italic}
.philo-credo{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);max-width:980px;margin:54px auto 0;padding-top:38px;border-top:1px solid rgba(176,141,47,.35)}
.credo-step{text-align:left}
.credo-step span{font-family:var(--display);font-size:.95rem;color:#b08d2f;letter-spacing:.14em}
.credo-step strong{display:block;margin:8px 0 6px;font-family:var(--display);font-weight:500;font-size:clamp(1.15rem,1.7vw,1.4rem);color:#173325}
.credo-step p{font-size:.95rem;line-height:1.55;color:#4c5b50;margin:0}
@media(max-width:720px){.philo-credo{grid-template-columns:1fr;gap:26px}}
/* v50: NOKT-scale type + philosophy harvest + closing band */
.section-head h2{font-size:clamp(2.9rem,5.4vw,4.9rem);line-height:1.03;letter-spacing:-.035em}
.concern-sub{margin-top:10px;font-size:1.05rem;color:#5c6b60}
.philo-harvest{max-width:1180px;margin:56px auto 0;position:relative;z-index:2}
.philo-harvest img{width:100%;height:clamp(260px,30vw,430px);object-fit:cover;border-radius:26px;box-shadow:0 30px 60px rgba(23,51,37,.22);display:block}
.philo-harvest figcaption{margin-top:12px;text-align:center;font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#8a7a4a}
.closing-band{position:relative;min-height:560px;display:grid;align-items:center;overflow:hidden}
.closing-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.closing-band::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(9,26,17,.82) 0%,rgba(9,26,17,.55) 46%,rgba(9,26,17,.12) 100%)}
.closing-inner{position:relative;z-index:2;max-width:640px;margin-left:clamp(24px,9vw,140px);padding:90px 24px;color:#fdf9ef}
.closing-inner .eyebrow{color:#e9c96a}
.closing-inner h2{font-family:var(--display);font-weight:400;font-size:clamp(3rem,5.6vw,5rem);line-height:1.02;letter-spacing:-.035em;margin:14px 0 18px}
.closing-inner p{font-size:1.12rem;line-height:1.65;color:rgba(253,249,239,.92);max-width:520px}
.closing-inner .hero-actions{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}
.closing-inner small{display:block;margin-top:22px;font-size:.68rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:rgba(253,249,239,.65)}
@media(max-width:720px){.closing-band{min-height:500px}.closing-inner{margin-left:0;padding:70px 22px}}
/* v56: NOKT mobile patterns */
@media(max-width:720px){
.story-grid,.image-story-grid,.best-grid,.collection-row{display:flex!important;grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.story-grid::-webkit-scrollbar,.image-story-grid::-webkit-scrollbar,.best-grid::-webkit-scrollbar,.collection-row::-webkit-scrollbar{display:none}
.story-grid>*,.image-story-grid>*{flex:0 0 78vw;scroll-snap-align:center}
.best-grid>*{flex:0 0 64vw;scroll-snap-align:center}
.collection-row>*{flex:0 0 46vw;scroll-snap-align:center}
.image-story,.image-story:first-child{grid-column:auto;grid-row:auto;min-height:0}
.section-head p{font-size:.95rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.section-head h2{font-size:clamp(2.2rem,9.5vw,3rem)}
.section{padding-block:56px}
}
/* v57: image stories are 9:16 portraits */
.image-story img{aspect-ratio:9/16;height:auto;object-fit:cover}
.image-story,.image-story:first-child{min-height:0}
/* v58: Raisa round - compact even review cards, no giant band */
.image-story-grid{grid-template-columns:repeat(3,1fr);align-items:stretch}
.image-story,.image-story:first-child{grid-row:auto;grid-column:auto;min-height:0}
.image-story img{aspect-ratio:3/4;height:auto;max-height:44vh;object-fit:cover}
.image-story blockquote{font-size:clamp(1.05rem,1.4vw,1.35rem);line-height:1.4}
.image-story-copy{padding:18px 20px}
/* v103: honest horizontal ritual gallery, no fabricated customer proof. */
.image-stories .shell{width:min(1380px,calc(100% - 32px));max-width:none}
.image-stories .section-head{width:min(1180px,100%);margin-inline:auto}
.image-story-grid{display:flex;gap:clamp(14px,1.6vw,22px);overflow-x:auto;padding:8px max(0px,calc((100% - 1180px)/2)) 24px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:rgba(31,58,42,.28) transparent}
.image-story-grid::after{content:"";flex:0 0 3vw}
.image-story{flex:0 0 clamp(300px,31vw,430px);scroll-snap-align:start;aspect-ratio:4/5;border-radius:26px;box-shadow:0 22px 54px rgba(31,58,42,.12)}
.image-story:nth-child(even){margin-top:54px}
.image-story img{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;filter:brightness(.72) saturate(.86)}
.image-story-copy{position:absolute;z-index:2;left:clamp(22px,3vw,38px);right:clamp(22px,3vw,38px);bottom:clamp(22px,3vw,38px);min-height:0;padding:0;background:none}
.image-story blockquote{font-size:clamp(1.35rem,2vw,2rem);line-height:1.12}
.image-story cite{color:#f2d678}
.ritual-rail-tools{display:flex;align-items:center;justify-content:space-between;width:min(1180px,100%);margin:6px auto 18px}
.ritual-rail-tools>p{display:flex;align-items:center;gap:12px;margin:0;color:var(--forest);font-size:.68rem;font-weight:750;letter-spacing:.16em}
.ritual-rail-tools>p i{display:block;width:78px;height:1px;background:rgba(31,58,42,.22)}
.ritual-rail-tools>div{display:flex;gap:8px}
.ritual-rail-tools button{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid rgba(31,58,42,.2);border-radius:50%;background:rgba(255,255,255,.74);color:var(--forest);cursor:pointer;transition:background .22s,color .22s,transform .22s}
.ritual-rail-tools button:hover,.ritual-rail-tools button:focus-visible{background:var(--forest);color:#fff;transform:translateY(-2px)}
.ritual-rail-tools button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ritual-rail-tools svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.image-story::before{position:absolute;z-index:2;top:22px;left:24px;padding:8px 11px;border:1px solid rgba(255,255,255,.32);border-radius:999px;background:rgba(14,34,21,.36);backdrop-filter:blur(10px);color:#fff;font-size:.6rem;font-weight:750;letter-spacing:.16em;content:attr(data-ritual-index)}
@media(max-width:720px){
.image-stories .shell{width:100%}
.image-stories .section-head{padding-inline:20px}
.ritual-rail-tools{padding-inline:20px}
.image-story-grid{padding-inline:20px}
.image-story-grid>*{flex:0 0 82vw}
.image-story:nth-child(even){margin-top:0}
}
/* v58: Raisa round - dark closing arc, philosophy florals + icon row, tonal ramp */
.closing-band::after{background:linear-gradient(180deg,rgba(9,26,17,.55) 0%,rgba(9,26,17,.35) 45%,rgba(9,26,17,.62) 100%)}
.closing-inner{margin-left:auto;margin-right:auto;text-align:center;max-width:720px}
.closing-inner p,.closing-inner .hero-actions{margin-left:auto;margin-right:auto;justify-content:center}
.closing-flora{position:absolute;bottom:-4%;z-index:1;pointer-events:none;filter:drop-shadow(0 12px 30px rgba(0,0,0,.4))}
.closing-flora-left{left:-2%;width:clamp(180px,20vw,360px)}
.closing-flora-right{right:-2%;width:clamp(200px,22vw,400px)}
.philo-accent{top:50%;transform:translateY(-50%)}
.principles-section{background:linear-gradient(180deg,#faf6ec 0%,#eef0e4 55%,#dfe5d3 100%)}
.newsletter-section{background:linear-gradient(180deg,#16351f,#0d2518);color:#f2ead6}
.newsletter-section .newsletter-card{background:rgba(250,246,236,.06);border:1px solid rgba(217,182,74,.3);backdrop-filter:blur(8px)}
.newsletter-section h2,.newsletter-section .eyebrow{color:#f2ead6}
@media(max-width:720px){.closing-flora{width:34vw}.philo-accent{display:none}}
/* v59: restrained interim florals */
.closing-flora-left{left:1%;bottom:-2%;width:clamp(120px,13vw,220px)}
.closing-flora-right{right:1%;bottom:-3%;width:clamp(140px,15vw,260px);transform:scaleX(-1)}
/* v60: florals must escape the bg cover rule */
.closing-band img.closing-flora{position:absolute;inset:auto;height:auto;object-fit:contain}
.closing-band img.closing-flora-left{left:1%;bottom:-2%;width:clamp(120px,13vw,220px)}
.closing-band img.closing-flora-right{right:1%;left:auto;bottom:-3%;width:clamp(140px,15vw,260px);transform:scaleX(-1)}
/* v61: solo generated bowls (cup baked in) */
.bowl-stack.solo .cup{display:none}
.bowl-stack.solo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
/* v62: sprite stacks per Raisa */
.bowl-stack.duo{position:relative;display:block}
.bowl-stack.duo .cup-behind{position:absolute;right:-6%;top:-16%;width:56%;height:auto;z-index:0;filter:drop-shadow(0 10px 16px rgba(23,51,37,.16))}
.bowl-stack.duo .bowl-front{position:relative;z-index:1;width:100%;height:auto;filter:drop-shadow(0 14px 20px rgba(23,51,37,.2))}
.concern-circle .concern-bowl{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important}
.concern-circle .concern-bowl img{border-radius:0!important;object-fit:contain!important;filter:drop-shadow(0 12px 18px rgba(23,51,37,.18))}
.footer-foliage .ff-left{left:-30px;bottom:-10px;width:clamp(200px,20vw,340px)}
.footer-foliage .ff-right{right:-26px;bottom:-8px;width:clamp(180px,18vw,320px);left:auto}
.footer-foliage .ff-orchid{left:4%;top:12%;width:clamp(90px,8vw,150px);opacity:.85}
.footer-foliage .ff-fireflies{width:clamp(60px,6vw,100px);opacity:.8;animation:ff-drift 7s ease-in-out infinite alternate}
.footer-foliage .ff-f1{right:12%;top:16%}
.footer-foliage .ff-f2{left:22%;bottom:18%;animation-delay:-3.4s}
.footer-foliage .ff-mist{left:10%;right:10%;bottom:0;width:80%;opacity:.5}
.footer-foliage img{position:absolute}
@keyframes ff-drift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(10px,-14px,0)}}
@media(max-width:720px){.footer-foliage .ff-orchid,.footer-foliage .ff-f2{display:none}}
/* v72: Raisa - two huge moving flower sprites framing Philosophy */
.philosophy{position:relative;overflow:hidden}
.philo-accent{width:auto!important;opacity:1!important;top:0;bottom:0;display:grid;place-items:center;z-index:1}
.philo-accent-left{left:0}
.philo-accent-right{right:0}
.philo-bloom{width:clamp(240px,30vw,560px);height:auto;display:block;filter:drop-shadow(0 26px 46px rgba(31,58,42,.18));transform-origin:50% 90%;will-change:transform}
.philo-accent-left .philo-bloom{animation:bloom-sway-l 11s ease-in-out infinite alternate;margin-left:clamp(-150px,-9vw,-40px)}
.philo-accent-right .philo-bloom{animation:bloom-sway-r 13s ease-in-out infinite alternate;margin-right:clamp(-150px,-9vw,-40px)}
@keyframes bloom-sway-l{0%{transform:rotate(-2.4deg) translate3d(0,0,0) scale(1)}100%{transform:rotate(2.2deg) translate3d(10px,-18px,0) scale(1.035)}}
@keyframes bloom-sway-r{0%{transform:rotate(2.2deg) translate3d(0,0,0) scale(1.02)}100%{transform:rotate(-2.6deg) translate3d(-12px,-14px,0) scale(1)}}
@media(prefers-reduced-motion:reduce){.philo-bloom{animation:none}}
@media(max-width:900px){.philo-bloom{width:clamp(150px,24vw,260px);opacity:.85}}
/* v72: collections - no shadow under the bowl/cup sprites */
.bowl-stack.duo .cup-behind,.bowl-stack.duo .bowl-front{filter:none!important}
/* v72: footer - drop the dark foliage/flowers, keep it light */
.footer-foliage .ff-left,.footer-foliage .ff-right,.footer-foliage .ff-orchid{display:none}
.footer-hummingbird{image-rendering:-webkit-optimize-contrast;filter:drop-shadow(0 6px 10px rgba(10,30,18,.25))}
/* v72: more motion - things pop up */
.reveal{opacity:0;transform:translate3d(0,34px,0) scale(.985);transition:opacity .85s cubic-bezier(.22,.9,.28,1),transform .85s cubic-bezier(.22,.9,.28,1)}
.reveal.visible{opacity:1;transform:none}
.collection-item,.product-card,.concern-circle,.credo-step,.pillar,.image-story,.video-card{transition:transform .55s cubic-bezier(.22,.9,.28,1),box-shadow .45s ease}
.collections .collection-item,.products .product-card,.concern-row .concern-circle,.philo-credo .credo-step,.pillar-grid .pillar{opacity:0;transform:translate3d(0,30px,0)}
.collections.visible .collection-item,.products.visible .product-card,.concern-row.visible .concern-circle,.philo-credo.visible .credo-step,.pillar-grid.visible .pillar{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.22,.9,.28,1),transform .7s cubic-bezier(.22,.9,.28,1)}
.collections.visible .collection-item:nth-child(n){transition-delay:calc((var(--i,0)) * 90ms)}
.products.visible .product-card{transition-delay:calc((var(--i,0)) * 80ms)}
.concern-row.visible .concern-circle{transition-delay:calc((var(--i,0)) * 60ms)}
.philo-credo.visible .credo-step{transition-delay:calc((var(--i,0)) * 120ms)}
.pillar-grid.visible .pillar{transition-delay:calc((var(--i,0)) * 100ms)}
@media(prefers-reduced-motion:reduce){.reveal,.collection-item,.product-card,.concern-circle,.credo-step,.pillar{opacity:1!important;transform:none!important;transition:none!important}}
/* v74: Raisa - footer strictly dark, text sits directly on the scene (no card) */
.site-footer{background:#060d09!important}
.site-footer::after{background:linear-gradient(180deg,rgba(6,13,9,.30),rgba(6,13,9,.62))!important}
.footer-bg{filter:brightness(.98) saturate(1.02)!important;opacity:1!important}
.footer-card{background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;color:#f2ede1!important;padding:clamp(24px,4vw,52px) 0!important}
.footer-card h3{color:#d9c07a!important;letter-spacing:.2em}
.footer-card a,.footer-card p,.footer-card small,.footer-card li a{color:#ece6d8!important}
.footer-card a:hover{color:#f0d269!important}
.footer-card .brand strong,.footer-card .brand small{color:#f2ede1!important}
.footer-card .brand small{color:#c9bfa6!important}
.site-footer,.site-footer *{text-shadow:0 2px 14px rgba(3,10,6,.75)}
.site-footer hr,.footer-card hr{border-color:rgba(236,230,216,.22)!important}
.footer-card .footer-col ul li a{opacity:.94}
/* v78: Philosophy blooms centred, flush to edges, interactive */
.philo-accent{transform:none!important;top:0!important;bottom:0!important;width:clamp(160px,16vw,270px)!important;display:grid!important;place-items:center!important;overflow:visible!important;z-index:3!important;pointer-events:none}
.philo-accent-left{left:0!important;right:auto!important}
.philo-accent-right{right:0!important;left:auto!important}
.philo-bloom{width:100%!important;max-width:none!important;height:auto!important;margin:0!important;pointer-events:auto!important;cursor:grab;transition:transform .45s cubic-bezier(.22,.9,.28,1),filter .45s ease}
.philo-bloom:hover{filter:drop-shadow(0 30px 52px rgba(31,58,42,.32)) brightness(1.05);transform:scale(1.05) rotate(-1.5deg)}
@media(max-width:720px){.philo-accent{display:grid!important;width:clamp(96px,26vw,150px)!important;opacity:.7}}
/* v78: no shadow under any bowl */
.bowl-stack::after{content:none!important}
.bowl-stack.duo .cup-behind,.bowl-stack.duo .bowl-front,.concern-circle .concern-bowl img{filter:none!important}
/* v78: footer leaf sprites */
.site-footer{padding-bottom:clamp(130px,13vw,200px)}
.footer-leaves{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.footer-leaves .fl{position:absolute;bottom:-70px;width:clamp(150px,20vw,320px);height:auto;filter:brightness(.55) saturate(.65) contrast(1.05) drop-shadow(0 18px 30px rgba(0,0,0,.6));transform-origin:bottom center}
.footer-leaves .fl-l{left:clamp(-64px,-4vw,-30px);transform:rotate(-6deg)}
.footer-leaves .fl-r{right:clamp(-64px,-4vw,-30px);transform:scaleX(-1) rotate(-6deg)}
@media(max-width:720px){.footer-leaves .fl{width:clamp(110px,34vw,170px);bottom:-54px}}
/* v80: philosophy bouquets 2x, bleeding off the side and cut by the bottom */
.philosophy{overflow:hidden}
.philo-accent{width:clamp(300px,30vw,520px)!important;align-items:end!important;top:auto!important;bottom:-14%!important;height:auto!important}
.philo-bloom{width:100%!important}
.philo-accent-left{left:0!important}
.philo-accent-left .philo-bloom{margin-left:clamp(-140px,-9vw,-60px)!important}
.philo-accent-right{right:0!important}
.philo-accent-right .philo-bloom{margin-right:clamp(-140px,-9vw,-60px)!important}
@media(max-width:900px){.philo-accent{width:clamp(150px,26vw,240px)!important;bottom:-8%!important;opacity:.8}}
/* v80: sprites never sit over text */
.drag-sprite{opacity:.92}
.section>.shell,.philosophy>.shell{position:relative;z-index:4}
/* v80: kill the white gap under the footer */
html{background:#faf6ec}
body,body.journey-preview{background:#faf6ec!important}
.site-footer{position:relative}
.site-footer::before{content:'';position:absolute;left:0;right:0;bottom:-100vh;height:100vh;background:#060d09;z-index:0}
.site-footer{margin-bottom:0}
body>*:last-child{margin-bottom:0}
.philo-sub{max-width:640px;margin:14px auto 0;text-align:center;font-size:1.02rem;line-height:1.65;color:#5c6b60;position:relative;z-index:4}
/* v81: no nuisance-tiny sprites on phone either */
@media(max-width:1000px){.drag-sprite{width:clamp(120px,17vw,190px)}}
@media(max-width:720px){.drag-sprite{width:clamp(105px,26vw,150px);opacity:.8}}
/* v82: bouquets bleed off the bottom cleanly instead of being cut mid-flower */
.philo-accent{bottom:-26%!important}
@media(max-width:900px){.philo-accent{bottom:-16%!important}}
/* v87: bouquets tilted 30deg, stems cut off by the SIDE edges, vertically centred */
.philosophy{overflow:hidden}
.philo-accent{top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;height:auto!important;width:clamp(280px,29vw,480px)!important;align-items:center!important;overflow:visible!important}
.philo-accent-left{left:0!important;right:auto!important}
.philo-accent-right{right:0!important;left:auto!important}
/* stems swing out through the left / right edge */
.philo-accent-left .philo-bloom{margin-left:clamp(-190px,-13vw,-90px)!important;transform-origin:50% 22%}
.philo-accent-right .philo-bloom{margin-right:clamp(-190px,-13vw,-90px)!important;transform-origin:50% 22%}
/* 30deg base tilt baked into the sway so the animation cannot override it */
@keyframes bloom-sway-l{0%{transform:rotate(28deg) translate3d(0,0,0) scale(1)}100%{transform:rotate(32deg) translate3d(8px,-12px,0) scale(1.03)}}
@keyframes bloom-sway-r{0%{transform:rotate(-28deg) translate3d(0,0,0) scale(1.02)}100%{transform:rotate(-32deg) translate3d(-8px,-12px,0) scale(1)}}
@media(prefers-reduced-motion:reduce){.philo-accent-left .philo-bloom{transform:rotate(30deg)}.philo-accent-right .philo-bloom{transform:rotate(-30deg)}}
@media(max-width:900px){.philo-accent{width:clamp(170px,30vw,250px)!important}
.philo-accent-left .philo-bloom{margin-left:clamp(-110px,-16vw,-60px)!important}
.philo-accent-right .philo-bloom{margin-right:clamp(-110px,-16vw,-60px)!important}}
/* v89: bouquets back UPRIGHT, side by side, 1.5x bigger so they cover both flanks */
.philo-accent{width:clamp(420px,43vw,720px)!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;align-items:center!important}
.philo-accent-left .philo-bloom{margin-left:clamp(-210px,-14vw,-100px)!important;transform-origin:50% 50%}
.philo-accent-right .philo-bloom{margin-right:clamp(-210px,-14vw,-100px)!important;transform-origin:50% 50%}
/* upright: gentle sway only, no 30deg tilt */
@keyframes bloom-sway-l{0%{transform:rotate(-2deg) translate3d(0,0,0) scale(1)}100%{transform:rotate(2deg) translate3d(8px,-14px,0) scale(1.03)}}
@keyframes bloom-sway-r{0%{transform:rotate(2deg) translate3d(0,0,0) scale(1.02)}100%{transform:rotate(-2deg) translate3d(-8px,-14px,0) scale(1)}}
@media(prefers-reduced-motion:reduce){.philo-accent-left .philo-bloom,.philo-accent-right .philo-bloom{transform:none}}
@media(max-width:900px){.philo-accent{width:clamp(200px,34vw,300px)!important}
.philo-accent-left .philo-bloom{margin-left:clamp(-120px,-17vw,-70px)!important}
.philo-accent-right .philo-bloom{margin-right:clamp(-120px,-17vw,-70px)!important}}
/* v89: bowl AND the cup behind it lift together on hover */
.collection-item .bowl-stack.duo .bowl-front,.collection-item .bowl-stack.duo .cup-behind{transition:transform .5s cubic-bezier(.22,.9,.28,1)}
.collection-item:hover .bowl-stack.duo .bowl-front,.collection-item:focus-visible .bowl-stack.duo .bowl-front{transform:translateY(-10px) scale(1.05)}
.collection-item:hover .bowl-stack.duo .cup-behind,.collection-item:focus-visible .bowl-stack.duo .cup-behind{transform:translateY(-18px) scale(1.04)}
.collection-item:hover .collection-label{color:#173325}
.collection-item:hover .collection-arrow{background:var(--forest);color:#fff;border-color:var(--forest)}
/* v90: size the bloom itself (grid place-items was shrink-wrapping it) */
.philo-accent{justify-items:stretch!important}
.philo-bloom{width:clamp(420px,43vw,720px)!important;max-width:none!important;height:auto!important}
@media(max-width:900px){.philo-bloom{width:clamp(200px,34vw,300px)!important}}
/* v91: big bouquets pushed out to the flanks, clear of the text column */
.philo-accent-left .philo-bloom{margin-left:clamp(-520px,-35vw,-300px)!important}
.philo-accent-right .philo-bloom{margin-right:clamp(-520px,-35vw,-300px)!important}
@media(max-width:900px){.philo-accent-left .philo-bloom{margin-left:clamp(-150px,-22vw,-90px)!important}
.philo-accent-right .philo-bloom{margin-right:clamp(-150px,-22vw,-90px)!important}}
/* v92: shift the whole accent column out (margins do not move a stretched grid item) */
.philo-accent-left{left:clamp(-330px,-17vw,-180px)!important}
.philo-accent-right{right:clamp(-330px,-17vw,-180px)!important}
.philo-bloom{opacity:.96}
/* soft cream halo so the copy always reads over the big blooms */
.philosophy>.shell{position:relative;z-index:4}
.philosophy>.shell::before{content:"";position:absolute;inset:-4% -6%;z-index:-1;pointer-events:none;background:radial-gradient(70% 62% at 50% 46%,rgba(246,242,234,.94) 0%,rgba(246,242,234,.80) 52%,rgba(246,242,234,0) 100%)}
@media(max-width:900px){.philo-accent-left{left:-70px!important}.philo-accent-right{right:-70px!important}}
/* v93: blooms prominent on both flanks, scrim tightened to the copy only */
.philo-accent-left{left:clamp(-190px,-10vw,-110px)!important}
.philo-accent-right{right:clamp(-190px,-10vw,-110px)!important}
.philo-bloom{opacity:1}
.philosophy>.shell::before{inset:2% 12%;background:radial-gradient(58% 50% at 50% 46%,rgba(246,242,234,.88) 0%,rgba(246,242,234,.62) 58%,rgba(246,242,234,0) 100%)}
@media(max-width:900px){.philo-accent-left{left:-60px!important}.philo-accent-right{right:-60px!important}}
/* v94: bouquets back to a tasteful accent scale, seated cleanly on both flanks */
.philo-accent{width:clamp(210px,22vw,340px)!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important}
.philo-bloom{width:clamp(210px,22vw,340px)!important;max-width:none!important;height:auto!important;opacity:.97}
.philo-accent-left{left:clamp(-70px,-4vw,-30px)!important}
.philo-accent-right{right:clamp(-70px,-4vw,-30px)!important}
.philo-accent-left .philo-bloom{margin-left:0!important}
.philo-accent-right .philo-bloom{margin-right:0!important}
/* scrim no longer needed at this scale */
.philosophy>.shell::before{display:none}
@media(max-width:900px){.philo-accent,.philo-bloom{width:clamp(120px,20vw,180px)!important}
.philo-accent-left{left:-34px!important}.philo-accent-right{right:-34px!important}}
/* v97: Raisa asked for the four herb icons in the philosophy statement to go.
They carried 26px of top margin above the Learn button, so restore that
breathing room on the button itself rather than leaving the gap collapsed. */
.philosophy-statement .btn-outline{margin-top:18px}
/* ===== v100 Raisa revert: tighter spacing, editorial botanicals, homepage video ===== */
/* Her #1 complaint: padding too large -> tighten so sections feel connected */
.section{padding-block:clamp(40px,6vw,74px)}
.philosophy{padding-block:clamp(56px,7vw,104px)!important}
.collections,.concern-section,.products,.video-stories,.image-stories,.principles-section{padding-block:clamp(40px,6vw,74px)}
/* Editorial botanicals: framing, NON-interactive, gentle sway only. Sit behind
content (isolated host) so typography stays the focus. */
.eco-botanical{position:absolute;width:var(--eco-size,220px);z-index:-1;pointer-events:none;user-select:none;will-change:transform;animation:ecoSway var(--eco-dur,12s) ease-in-out var(--eco-delay,0s) infinite alternate}
.eco-botanical img{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 22px rgba(24,52,33,.12))}
@keyframes ecoSway{0%{transform:translate(0,0) rotate(-1deg)}100%{transform:translate(0,-7px) rotate(1deg)}}
.eco-left-frame{top:50%!important;transform:translateY(-50%);animation-name:ecoSwayLeft}
@keyframes ecoSwayLeft{0%{transform:translateY(-50%) translateX(0) rotate(-1deg)}100%{transform:translateY(-50%) translateX(0) rotate(1.4deg)}}
/* Heliconia descend into Shop by Concern: start lifted, ease down when in view */
.eco-descend{transform:translateY(-42px);opacity:0;transition:transform 1.4s cubic-bezier(.22,.61,.36,1),opacity .9s ease}
.eco-descend.eco-in{transform:translateY(0);opacity:1}
@media(prefers-reduced-motion:reduce){.eco-botanical{animation:none}.eco-descend{transition:none;transform:none;opacity:1}}
@media(max-width:640px){.eco-botanical{--eco-size:clamp(96px,26vw,150px)!important;opacity:.9}}
/* v103 Homepage film: edge-to-edge and full viewport, per Raisa's reference. */
.home-video-section{position:relative;isolation:isolate;display:grid;min-height:100vh;min-height:100svh;overflow:hidden;background:#0d1a0c;color:#fff}
.home-video-section::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(7,24,14,.14) 0%,rgba(7,24,14,.08) 38%,rgba(7,24,14,.7) 100%),linear-gradient(0deg,rgba(7,24,14,.42),transparent 52%)}
.hv-window{position:absolute;inset:0;z-index:-2;width:100%;height:100%;overflow:hidden;background:#0d1a0c}
.hv-window .home-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hv-shell{width:100%;max-width:none;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,760px);align-items:center;padding:clamp(100px,14vh,170px) clamp(24px,6vw,104px) clamp(64px,9vh,110px)}
.hv-head{grid-column:2;max-width:760px;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,2vw,22px);text-align:left;text-shadow:0 2px 24px rgba(4,18,10,.35)}
.hv-head .eyebrow{color:#f1d77d}
.hv-head h2{font-family:var(--display,'Fraunces',serif);font-weight:400;font-size:clamp(3.4rem,7vw,7rem);line-height:.92;letter-spacing:-.045em;color:#fff;margin:0}
.hv-head h2 .accent{font-style:italic;color:#f1d77d}
.hv-sub{font-size:clamp(1.04rem,1.45vw,1.24rem);line-height:1.65;color:rgba(255,255,255,.92);max-width:660px;margin:0}
.hv-cta{min-width:min(100%,340px);min-height:54px;margin-top:4px;padding:16px 26px;background:rgba(250,249,246,.96);color:var(--forest,#1F3A2A);border-color:rgba(250,249,246,.96);font-size:.78rem;letter-spacing:.1em;box-shadow:0 12px 32px rgba(4,18,10,.22)}
.hv-cta:hover{background:#fff;color:var(--forest,#1F3A2A);border-color:#fff}
@media(max-width:760px){
.home-video-section::after{background:linear-gradient(0deg,rgba(7,24,14,.82) 0%,rgba(7,24,14,.22) 67%,rgba(7,24,14,.08) 100%)}
.hv-window .home-video{object-position:center}
.hv-shell{grid-template-columns:1fr;align-items:end;padding:clamp(88px,13vh,120px) 22px clamp(42px,7vh,70px)}
.hv-head{grid-column:1;max-width:620px}
.hv-head h2{font-size:clamp(3rem,15vw,5rem)}
.hv-sub{font-size:1rem;line-height:1.58}
}
/* ============ v107: Raisa 27-Jul homepage round ============ */
/* 3/4/6: tighten the seams between sections so the page reads continuous */
.collections{padding-block-end:clamp(16px,2.2vw,34px)}
.video-stories{padding-block-start:clamp(28px,3.4vw,52px)}
.philosophy{padding-block:clamp(64px,7vw,104px) clamp(28px,3.4vw,52px)}
.products{padding-block-end:clamp(14px,2vw,30px)}
.concern-section{padding-block-start:clamp(22px,2.8vw,42px)}
/* 2: the Collections orchid frames the content and breathes like the Philosophy blooms */
@keyframes ecoSwayLeft{0%{transform:translateY(-50%) translateX(0) rotate(-2.2deg)}100%{transform:translateY(-51%) translateX(9px) rotate(2.4deg)}}
.eco-left-frame{opacity:.96}
/* 7: heliconia descend is soft, staggered, and clearly perceptible */
.eco-descend{transform:translateY(-68px);opacity:0;transition:transform 2s cubic-bezier(.23,.68,.28,1) var(--eco-di,0s),opacity 1.15s ease var(--eco-di,0s)}
.eco-descend.eco-in{transform:translateY(0);opacity:1}
/* 8: on desktop the concern row wraps into two tidy centered rows;
no cropped bowls, no floating scroll button. Mobile keeps the swipe row. */
@media(min-width:1000px){
.concern-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));justify-items:center;row-gap:36px;column-gap:clamp(12px,1.6vw,26px);overflow:visible;padding:8px 4px 8px;scroll-snap-type:none}
.concern-scroll{display:none}
}
/* 5: retreat band text block centered over the image, film beneath it */
.retreat-film-grid{grid-template-columns:1fr;justify-items:center;text-align:center;gap:clamp(26px,3.2vw,42px)}
.retreat-copy{display:flex;flex-direction:column;align-items:center;max-width:760px}
.retreat-copy .btn{align-self:center}
.retreat-film{width:min(820px,100%)}
.retreat-band::after{background:linear-gradient(0deg,rgba(15,37,24,.72),rgba(15,37,24,.28) 55%,rgba(15,37,24,.34))}
/* 10: botanical illustration plates rise and fade in with a stagger */
.principles-section .herb-plate.reveal{opacity:0;transform:translate3d(0,52px,0) scale(.96);transition:opacity 1s cubic-bezier(.22,.9,.28,1),transform 1s cubic-bezier(.22,.9,.28,1)}
.principles-section .herb-plate.reveal.visible{opacity:1;transform:none}
.principles-section .herb-plates .herb-plate:nth-child(2){transition-delay:.14s}
.principles-section .herb-plates .herb-plate:nth-child(3){transition-delay:.28s}
.principles-section .herb-plates .herb-plate:nth-child(4){transition-delay:.42s}
/* 11: footer botanicals from the hero family rise gently into the composition */
.footer-leaves .ff-rise{opacity:0;transform:translate3d(0,90px,0);transition:transform 2.1s cubic-bezier(.22,.68,.28,1),opacity 1.3s ease}
.footer-alive .ff-rise{opacity:1;transform:translate3d(0,0,0)}
.footer-leaves .ff-monstera{left:clamp(-90px,-6vw,-40px);bottom:-46px;width:clamp(230px,24vw,430px);filter:brightness(.5) saturate(.72) drop-shadow(0 18px 30px rgba(0,0,0,.6));transition-delay:.12s,.12s}
.footer-leaves .ff-orchid-left{left:clamp(120px,13vw,300px);bottom:-18px;width:clamp(120px,12vw,215px);filter:brightness(.62) saturate(.8) drop-shadow(0 14px 26px rgba(0,0,0,.55));transition-delay:.4s,.4s}
.footer-leaves .ff-orchid-right{left:auto;right:clamp(-60px,-3vw,-24px);bottom:-34px;width:clamp(200px,19vw,360px);filter:brightness(.55) saturate(.75) drop-shadow(0 16px 28px rgba(0,0,0,.58));transition-delay:.26s,.26s}
@media(max-width:720px){.footer-leaves .ff-orchid-left{display:none}.footer-leaves .ff-monstera{width:clamp(150px,38vw,220px)}.footer-leaves .ff-orchid-right{width:clamp(130px,34vw,190px)}}
@media(prefers-reduced-motion:reduce){.footer-leaves .ff-rise{opacity:1;transform:none;transition:none}.eco-descend{opacity:1;transform:none;transition:none}}
/* v108: Raisa's own Feel-Your-Best mock centers the text + CTA over the film */
.hv-shell{grid-template-columns:1fr;justify-items:center}
.hv-head{grid-column:1;align-items:center;text-align:center;max-width:820px}
.hv-head .hv-sub{text-align:center}
.home-video-section::after{background:linear-gradient(0deg,rgba(7,24,14,.55) 0%,rgba(7,24,14,.32) 45%,rgba(7,24,14,.38) 100%)}
/* v109: Raisa items 28 Jul (2nd batch) */
/* retreat band: the gold italic line must never tuck under the line above it */
.retreat-copy h2{line-height:1.04}
.retreat-copy h2 .gold-italic{position:relative;z-index:1;display:inline-block;padding-top:.04em}
/* footer botanicals: ferns join the rise, cutouts keep a gentle post-rise sway */
.footer-leaves .fl-l,.footer-leaves .fl-r{opacity:0;transform:translate3d(0,70px,0) rotate(-6deg);transition:transform 2.2s cubic-bezier(.22,.68,.28,1) .05s,opacity 1.4s ease .05s}
.footer-leaves .fl-r{transform:translate3d(0,70px,0) scaleX(-1) rotate(-6deg)}
.footer-alive .fl-l{opacity:1;transform:translate3d(0,0,0) rotate(-6deg)}
.footer-alive .fl-r{opacity:1;transform:translate3d(0,0,0) scaleX(-1) rotate(-6deg)}
.footer-alive .ff-monstera{animation:ff-breathe 12s ease-in-out 2.4s infinite alternate}
.footer-alive .ff-orchid-right{animation:ff-breathe 14s ease-in-out 3s infinite alternate}
@keyframes ff-breathe{0%{transform:translate3d(0,0,0) rotate(0)}100%{transform:translate3d(4px,-8px,0) rotate(.8deg)}}
@media(prefers-reduced-motion:reduce){.footer-leaves .fl-l,.footer-leaves .fl-r{opacity:1;transform:none;transition:none}.footer-alive .ff-monstera,.footer-alive .ff-orchid-right{animation:none}}
/* v109b: descend and sway fought over the same transform (animation beats
transition), so the descend never visibly played. Descend lives on the
wrapper span; the breeze sway moves to the img inside. */
.eco-botanical{animation:none}
.eco-botanical img{animation:ecoImgSway var(--eco-dur,12s) ease-in-out var(--eco-delay,0s) infinite alternate;transform-origin:50% 8%}
@keyframes ecoImgSway{0%{transform:translate(0,0) rotate(-1.8deg)}100%{transform:translate(7px,-7px) rotate(2deg)}}
.eco-left-frame{animation:none;transform:translateY(-50%)}
.eco-left-frame img{animation-name:ecoImgSway}
@media(prefers-reduced-motion:reduce){.eco-botanical img{animation:none}}
/* v111: retreat statement must read on bright foliage: darker scrim band behind
the copy, luminous gold, and a real text shadow. */
.retreat-band::after{background:linear-gradient(0deg,rgba(13,33,21,.78),rgba(13,33,21,.42) 52%,rgba(13,33,21,.5))}
.retreat-copy h2{text-shadow:0 3px 34px rgba(4,18,10,.85),0 1px 6px rgba(4,18,10,.6)}
.retreat-copy h2 .gold-italic{color:#f2da8a}
.retreat-copy>p{text-shadow:0 2px 18px rgba(4,18,10,.7)}
/* v111: heliconia are scroll-linked now (JS drives transform); kill the one-shot transition */
.eco-descend{transition:opacity .6s ease;opacity:0;transform:translateY(-70px)}
.eco-descend.eco-live{opacity:1}
/* v112: Raisa - collections orchid is a STATIC frame, larger, no sway */
.eco-left-frame img{animation:none!important}
.eco-left-frame{--eco-size:clamp(300px,27vw,520px)!important}
/* ===== v113 mobile polish (Shreyas phone QA 28 Jul): ornaments never sit under text ===== */
/* Tablet band 721-900: measured at 768/795, even slim slivers of the bouquets
still cross the first/last credo column, so they rest below 900px entirely.
(Later in the cascade than the v78 display:grid!important, so this wins.) */
@media(max-width:900px){
.philo-accent{display:none!important}
}
@media(max-width:720px){
/* 1. Collections orchid: the v112 300px frame swallowed the headline on phones.
Small left-edge accent beside the bowl row, below the heading block, mostly
clipped by the viewport edge so it can never sit under copy. */
.collections .eco-left-frame{--eco-size:clamp(96px,18vw,124px)!important;width:var(--eco-size)!important;top:auto!important;bottom:7%!important;transform:none!important;left:calc(var(--eco-size)*-0.45)!important;opacity:.9}
/* 1b + 5. Philosophy flank bouquets overlapped the numbered credo list on phones.
The pre-v78 design already hid them under 720px; restore that (this rule is
later in the cascade than the v78 display:grid!important, so it wins). */
.philo-accent{display:none!important}
/* 2. Shop-by-concern heliconia: slim top-corner slivers. Extra head clearance
plus a capped scroll-follow travel in app.js keeps them out of the
heading/subcopy bounding boxes at every scroll position. */
.concern-section{padding-block-start:clamp(56px,9vw,72px)}
.concern-section span.eco-descend{--eco-size:72px!important;width:72px!important;top:-44px!important}
.concern-section span.eco-descend:nth-of-type(1){left:-26px!important;right:auto!important}
.concern-section span.eco-descend:nth-of-type(2){left:auto!important;right:-26px!important}
}
@media(max-width:480px){
/* Smallest phones: the orchid cannot sit cleanly beside a swipeable labelled row */
.collections .eco-left-frame{display:none!important}
}
/* v114: Raisa 28-Jul checklist item 1 - the Collections orchid breathes again
(supersedes the v112 static freeze; same soft register as the Philosophy blooms) */
.eco-left-frame img{animation:ecoImgSway 14s ease-in-out .6s infinite alternate!important;transform-origin:50% 12%}
@media (prefers-reduced-motion:reduce){.eco-left-frame img{animation:none!important}}
/* ============ v115: Raisa no-dead-space sweep + footer foliage sway (29 Jul) ============ */
.section{padding-block:clamp(30px,4vw,54px)}
/* !important needed: line ~568 pins the old 104px rhythm with !important */
.philosophy{padding-block:clamp(44px,5vw,72px) clamp(22px,2.6vw,40px)!important}
@media(max-width:720px){.section{padding-block:40px}}
/* footer corner frames: gentle perpetual sway */
.footer-leaves .fl-l{animation:ffGentleL 15s ease-in-out 1s infinite alternate}
.footer-leaves .fl-r{animation:ffGentleR 17s ease-in-out 2s infinite alternate}
@keyframes ffGentleL{0%{transform:translate3d(0,0,0) rotate(-6deg)}100%{transform:translate3d(5px,-7px,0) rotate(-4.6deg)}}
@keyframes ffGentleR{0%{transform:translate3d(0,0,0) rotate(0)}100%{transform:translate3d(-5px,-8px,0) rotate(1.2deg)}}
.footer-alive .fl-l{animation:ffGentleL 15s ease-in-out 1s infinite alternate}
.footer-alive .fl-r{animation:ffGentleR 17s ease-in-out 2s infinite alternate}
@media(prefers-reduced-motion:reduce){.footer-leaves .fl-l,.footer-leaves .fl-r,.footer-alive .fl-l,.footer-alive .fl-r{animation:none}}
/* ============ v118: client call round (30 Jul) ============ */
/* 1: Ecuador Retreats reverts to the original concise two-column band:
copy left, film right, compact height. The v107 centered/stacked layout
made the section a full extra screen of scrolling on desktop. */
.retreat-band{min-height:0}
.retreat-film-grid{grid-template-columns:minmax(340px,.88fr) minmax(420px,1.12fr);justify-items:stretch;align-items:center;text-align:left;gap:clamp(28px,4vw,64px);padding:clamp(30px,4.5vw,64px)}
.retreat-copy{display:block;max-width:none;width:auto}
.retreat-copy h2{font-size:clamp(2.7rem,4.8vw,4.8rem);margin-bottom:16px}
.retreat-copy>p{max-width:52ch;margin-bottom:22px}
.retreat-copy .btn{align-self:auto}
.retreat-film{width:100%}
.retreat-band::after{background:linear-gradient(90deg,rgba(13,33,21,.86),rgba(13,33,21,.3) 62%,rgba(13,33,21,.44)),linear-gradient(0deg,rgba(13,33,21,.3),transparent 55%)}
@media(max-width:1000px){.retreat-film-grid{grid-template-columns:1fr;text-align:left}}
@media(max-width:720px){.retreat-band{min-height:0;margin:24px auto}.retreat-film-grid{padding:30px 22px;gap:22px}}
/* 7b: UGC cards that found a real file behave as inline players. */
.video-stories .video-card.ugc-live video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.video-stories .video-card.ugc-live{cursor:pointer}
.video-stories .video-card.ugc-live.is-playing .video-play{opacity:0;pointer-events:none}
.video-stories .video-card.ugc-live .video-play{transition:opacity .3s ease,transform .3s var(--ease),background .3s}
.video-stories .video-card.ugc-live.is-playing::after{opacity:0}
.video-stories .video-card.ugc-live::after{transition:opacity .3s ease}
/* 6: credo strip numerals become small circular real-photo chips. */
.credo-step .credo-chip{display:inline-flex;align-items:center;gap:12px}
.credo-chip img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid var(--border);box-shadow:0 10px 22px rgba(31,58,42,.16)}
.credo-chip em{font-style:normal;font-family:var(--display);font-size:.92rem;color:#b08d2f;letter-spacing:.14em}
.credo-step .credo-chip+strong{margin-top:12px}
@media(max-width:720px){.credo-chip img{width:56px;height:56px}}
/* 4: NOKT-register verified reviews band (follows the retreat section). */
.kx-reviews{background:linear-gradient(180deg,var(--cream) 0%,#f4f0e5 100%)}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px);align-items:stretch}
.review-card{display:flex;flex-direction:column;overflow:hidden;border-radius:24px;background:#fff;border:1px solid rgba(31,58,42,.15);box-shadow:0 1px 2px rgba(31,58,42,.05),0 14px 34px rgba(31,58,42,.08);transition:transform .45s var(--ease),box-shadow .45s}
.review-card:hover{transform:translateY(-6px);box-shadow:0 2px 4px rgba(31,58,42,.06),0 24px 54px rgba(31,58,42,.15)}
.review-photo{aspect-ratio:4/3;overflow:hidden;background:#e8e4d8}
.review-photo img{width:100%;height:100%;object-fit:cover;object-position:center 24%;transition:transform .6s var(--ease)}
.review-card:hover .review-photo img{transform:scale(1.04)}
.review-body{display:flex;flex-direction:column;flex:1;gap:10px;padding:clamp(18px,2vw,26px)}
.review-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.review-meta strong{font-size:.95rem;color:var(--forest);font-weight:800}
.review-verified{display:inline-flex;align-items:center;gap:5px;color:#2e6b43;font-size:.66rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.review-verified svg{width:15px;height:15px;color:#2e6b43}
.review-meta time{margin-left:auto;color:#63665b;font-size:.72rem}
.leaf-stars{display:flex;gap:3px}
.leaf-stars i{width:16px;height:16px;background:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 3.5C12 3.5 5.7 8.6 4.4 16.9c-.2 1.5.8 3 2.6 3 8.6 0 12.9-6.2 13.7-15.2.05-.66-.2-1.2-.2-1.2z'/%3E%3Cpath d='M6.5 17.5c2.5-4.5 6-8 10-10.5' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 3.5C12 3.5 5.7 8.6 4.4 16.9c-.2 1.5.8 3 2.6 3 8.6 0 12.9-6.2 13.7-15.2.05-.66-.2-1.2-.2-1.2z'/%3E%3Cpath d='M6.5 17.5c2.5-4.5 6-8 10-10.5' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.review-body blockquote{margin:0;font-family:var(--display);font-size:clamp(1.12rem,1.45vw,1.3rem);line-height:1.38;color:#22372a}
.review-product{margin-top:auto;padding-top:12px;align-self:flex-start;color:var(--forest);font-size:.68rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;transition:color .22s}
.review-product:hover{color:#856e21}
.review-more{margin:26px 0 0;text-align:center}
.review-more a{display:inline-flex;align-items:center;min-height:48px;padding:0 26px;border:1px solid var(--forest);border-radius:999px;color:var(--forest);font-size:.7rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;transition:background .25s,color .25s}
.review-more a:hover{background:var(--forest);color:#fff}
.review-grid .reveal:nth-child(2){transition-delay:.08s}
.review-grid .reveal:nth-child(3){transition-delay:.16s}
@media(max-width:1000px){.review-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){
.review-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.review-grid::-webkit-scrollbar{display:none}
.review-grid>*{flex:0 0 80vw;scroll-snap-align:center}
}
/* 5: NOKT-style closing CTA band; the page ends here, then the footer. */
.home-cta{position:relative;overflow:hidden;background:linear-gradient(160deg,#16351f 0%,#0d2518 70%);color:#fdf9ef;padding-block:clamp(64px,8.5vw,120px)}
.home-cta::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 90% at 50% 0%,rgba(217,182,74,.14),transparent 62%)}
.home-cta-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;max-width:820px}
.home-cta .eyebrow{color:#e9c96a;margin:0}
.home-cta h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(2.9rem,5.8vw,5.6rem);line-height:1;letter-spacing:-.04em;color:#fdf9ef;text-wrap:balance}
.home-cta .cta-accent{font-style:italic;color:#f2da8a}
.home-cta-inner>p:not(.eyebrow){margin:0;max-width:56ch;font-size:clamp(1rem,1.3vw,1.16rem);line-height:1.6;color:rgba(253,249,239,.92)}
.home-cta-btn{margin-top:10px;min-height:56px;padding:0 40px;background:#fdf9ef;border-color:#fdf9ef;color:var(--forest);font-size:.8rem;box-shadow:0 16px 40px rgba(3,12,7,.35)}
.home-cta-btn:hover{background:#fff;border-color:#fff;color:var(--forest)}
@media(max-width:720px){.home-cta{padding-block:56px}.home-cta-btn{width:100%;max-width:360px}}
/* 8: Collections orchid sits flush to the left edge, vertically centred on its
visible bloom (the cutout carries a transparent top band), and is height-bound
so it can never be clipped mid-flower by the section. Desktop only; the v113
mobile treatment below 720px stays in charge there. */
@media(min-width:721px){
.collections .eco-left-frame{left:0!important;right:auto!important;top:50%!important;bottom:auto!important;transform:translateY(-53%)!important;width:auto!important;height:min(86%,720px)}
.collections .eco-left-frame img{height:100%;width:auto}
}
/* 9: shorter footer (homepage dark treatment keeps less trailing air) */
.site-footer{padding-bottom:clamp(84px,9vw,128px)}
/* ============ v119: post-review fixes (30 Jul, Shreyas + Brian) ============ */
/* Brian: hero carries only the brand at the summit and the final statement.
Brand title smaller, reads "Kawsaypac Herbs". */
.journey-brand strong{font-size:clamp(3.6rem,8vw,7.2rem)!important;letter-spacing:-.05em}
/* Brian: final-scene buttons in yellow, the green got lost against the jungle. */
.journey-final .btn-primary{background:#E9C95E;border-color:#E9C95E;color:#22301f}
.journey-final .btn-primary:hover{background:#f2d879;border-color:#f2d879;color:#1c2a1a}
.journey-final .btn-secondary{border-color:#E9C95E;color:#f4e2a1;background:rgba(34,48,31,.28)}
.journey-final .btn-secondary:hover{background:#E9C95E;border-color:#E9C95E;color:#22301f}
.journey-final .journey-final-plain{color:#fff}
.journey-final .journey-final-plain span{color:#fff;font-style:normal}
/* Collections orchid: a touch bigger and layered ABOVE the bowl cards again. */
@media(min-width:721px){
.collections .eco-left-frame{height:min(96%,830px);z-index:6!important}
}
.collections{position:relative}
/* ============ v120: 31 Jul round (Shreyas voice notes) ============ */
/* 1 · Collections orchid: full-height frame. Tip nearly touches the section top,
stem nearly touches the bottom, and it layers ABOVE the bowl cards. */
@media(min-width:721px){
.collections .eco-left-frame{height:97%!important;max-height:none!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;z-index:9!important}
.collections .eco-left-frame img{height:100%;width:auto}
.collections .shell{position:relative;z-index:1}
}
/* 2 · Kawsaypac Difference: NOKT-style split. Copy left, real product packets
floating on the right with their backgrounds removed. */
.home-cta-split{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:center}
.home-cta-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px;text-align:left}
.home-cta-copy .eyebrow{color:#e9c96a;margin:0}
.home-cta-copy h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(2.9rem,5vw,5.2rem);line-height:1;letter-spacing:-.04em;color:#fdf9ef;text-wrap:balance}
.home-cta-copy p{margin:0;max-width:46ch;font-size:clamp(1rem,1.3vw,1.16rem);line-height:1.6;color:rgba(253,249,239,.92)}
/* v124: the section IS the photograph. The studio sweep from Shreyas's own
packshots is extended across the full band (polynomial-fit backdrop + real
grain lifted from his frame), the three pouches sit on it with contact
shadows, and the copy lives inside the same frame. No flat colour block. */
/* v126: the CTA runs on the SAME jungle photograph as the footer
(assets/img/gen6/footer-dark-river.webp). The CTA takes the top of the frame,
the footer takes the middle/bottom, so the two sections read as one
continuous world instead of a flat colour block butting into a photo. */
.home-cta{background:#0f2a1a;color:#fdf9ef;padding:0;overflow:hidden}
.home-cta::before{display:none}
.home-cta-scene{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%;
filter:brightness(.92) saturate(1.08)}
/* readability floor: dark wash under the copy (the photo carries pale orchids
on the left edge) + a soft fade into the footer so there is no seam */
.home-cta::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(100deg,rgba(9,26,16,.90) 0%,rgba(9,26,16,.80) 26%,rgba(9,26,16,.42) 44%,rgba(9,26,16,.10) 60%),
linear-gradient(180deg,rgba(9,26,16,.28) 0%,rgba(9,26,16,0) 22%,rgba(9,26,16,0) 84%,rgba(15,39,25,.42) 100%)}
.home-cta-split{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.52fr) minmax(0,.48fr);align-items:center;
min-height:clamp(520px,42vw,720px);padding-block:clamp(56px,6vw,88px)}
.home-cta-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px;text-align:left}
.home-cta-copy .eyebrow{margin:0;color:#e9c96a}
.home-cta-copy h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(2.7rem,4.6vw,4.9rem);line-height:1;letter-spacing:-.04em;color:#fdf9ef;text-wrap:balance}
.home-cta .cta-accent{font-style:italic;color:#f2da8a}
.home-cta-copy p{margin:0;max-width:44ch;font-size:clamp(1rem,1.25vw,1.14rem);line-height:1.6;color:rgba(253,249,239,.93)}
.home-cta-btn{margin-top:10px;min-height:56px;padding:0 40px;background:#fdf9ef;border-color:#fdf9ef;color:var(--forest);font-size:.8rem;box-shadow:0 16px 40px rgba(3,12,7,.45)}
.home-cta-btn:hover{background:#fff;border-color:#fff;color:var(--forest)}
/* the packets sit in the jungle, lifted off it by their own shadow */
.home-cta-products{position:relative;min-height:clamp(330px,29vw,470px)}
.cta-pouch{position:absolute;filter:drop-shadow(0 30px 46px rgba(2,10,5,.72));will-change:transform}
.cta-pouch-1{width:clamp(210px,17vw,300px);left:26%;top:11%;z-index:3;transform:rotate(-3deg);animation:ctaFloatA 9s ease-in-out infinite alternate}
.cta-pouch-2{width:clamp(175px,14.5vw,255px);left:-2%;top:0;z-index:2;transform:rotate(-9deg);animation:ctaFloatB 11s ease-in-out 1.1s infinite alternate}
.cta-pouch-3{width:clamp(180px,15vw,262px);right:0;top:5%;z-index:1;transform:rotate(8deg);opacity:.97;animation:ctaFloatC 10s ease-in-out .5s infinite alternate}
@keyframes ctaFloatA{from{transform:rotate(-3deg) translateY(0)}to{transform:rotate(-2deg) translateY(-14px)}}
@keyframes ctaFloatB{from{transform:rotate(-9deg) translateY(0)}to{transform:rotate(-7.5deg) translateY(-18px)}}
@keyframes ctaFloatC{from{transform:rotate(8deg) translateY(0)}to{transform:rotate(6.5deg) translateY(-11px)}}
@media (prefers-reduced-motion:reduce){.cta-pouch{animation:none!important}}
@media(max-width:900px){
.home-cta::after{background:linear-gradient(180deg,rgba(9,26,16,.90) 0%,rgba(9,26,16,.82) 30%,rgba(9,26,16,.42) 50%,rgba(9,26,16,.12) 70%),
linear-gradient(180deg,rgba(9,26,16,0) 86%,rgba(15,39,25,.42) 100%)}
/* height comes from content, so the packets can never be clipped by the
section edge (they are ~1.65x as tall as they are wide) */
.home-cta-split{grid-template-columns:1fr;align-items:start;min-height:0;padding-block:clamp(44px,9vw,64px) clamp(38px,9vw,58px);gap:clamp(18px,5vw,34px)}
.home-cta-copy{align-items:center;text-align:center}
.home-cta-copy p{max-width:34ch}
.home-cta-btn{width:100%;max-width:340px}
.home-cta-products{min-height:312px;width:min(520px,100%);margin-inline:auto}
.cta-pouch-1{width:clamp(140px,40vw,180px);left:28%;top:14%}
.cta-pouch-2{width:clamp(120px,34vw,155px);left:-4%;top:0}
.cta-pouch-3{width:clamp(120px,34vw,155px);right:-4%;top:6%}
}
/* 3 · Short human reviews: the one-liners breathe bigger, plus a micro strip. */
.review-body blockquote{font-size:clamp(1.3rem,1.8vw,1.7rem);line-height:1.3}
.review-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.5vw,20px);margin-top:clamp(18px,2.4vw,30px)}
.review-mini{display:flex;flex-direction:column;gap:10px;padding:clamp(18px,2vw,26px);border-radius:20px;background:#fff;border:1px solid rgba(31,58,42,.14);box-shadow:0 1px 2px rgba(31,58,42,.05),0 10px 26px rgba(31,58,42,.07);transition:transform .4s var(--ease),box-shadow .4s}
.review-mini:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(31,58,42,.06),0 18px 42px rgba(31,58,42,.13)}
.review-mini blockquote{margin:0;font-family:var(--display);font-size:clamp(1.02rem,1.25vw,1.2rem);line-height:1.35;color:#22372a;flex:1}
.review-mini-meta{display:flex;align-items:baseline;gap:8px}
.review-mini-meta strong{font-size:.85rem;font-weight:800;color:var(--forest)}
.review-mini-meta em{font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--olive)}
@media(max-width:1000px){.review-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){
.review-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.review-strip::-webkit-scrollbar{display:none}
.review-strip>*{flex:0 0 64vw;scroll-snap-align:center}
}
/* ============ v128: texture layer (Shreyas's generated pack, 1 Aug) ============ */
/* Doctrine from the Aevy audit: paper substrate under flat colour, halftone
where tone needs to breathe, line-art watermarks in dead space, atmosphere
over dark photos. One texture per section, watermark opacity, multiply on
light, screen on dark. Nothing sits over copy above ~6% strength. */
/* 1 · Paper substrates: the cream sections stop being flat colour fills.
The tiles are near-cream so multiply blending yields only the fibre. */
.collections{background:url("assets/img/tex/paper-card.webp?v=128") repeat 0 0/620px,linear-gradient(180deg,#edf0e7 0%,var(--cream) 18%);background-blend-mode:multiply}
.products,.video-stories{background:url("assets/img/tex/paper-card.webp?v=128") repeat 0 0/620px,var(--cream);background-blend-mode:multiply}
.kx-reviews{background:url("assets/img/tex/paper-card.webp?v=128") repeat 0 0/620px,linear-gradient(180deg,var(--cream) 0%,#f4f0e5 100%);background-blend-mode:multiply}
.philosophy{background:linear-gradient(180deg,#f2efe6 0%,var(--paper) 30%,var(--paper) 70%,#eef0e6 100%)}
/* 2 · Most Loved: Ben Day dot gradient breathing in from the top-right corner,
masked so it decays before it reaches the product cards. */
.products{position:relative}
.products::after{content:'';position:absolute;right:0;top:0;width:min(52vw,760px);height:min(30vw,430px);z-index:0;pointer-events:none;
background:url("assets/img/tex/benday.webp?v=128") right top/cover no-repeat;mix-blend-mode:multiply;opacity:.38;
-webkit-mask-image:radial-gradient(120% 120% at 100% 0%,#000 30%,transparent 72%);mask-image:radial-gradient(120% 120% at 100% 0%,#000 30%,transparent 72%)}
.products .shell{position:relative;z-index:1}
/* 3 · Shop by Concern: Andean contour lines as a faint cartographic ground,
the terrain the herbs actually come from. */
.concern-section::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
background:url("assets/img/tex/topo.webp?v=128") center 30%/min(120vw,1500px) no-repeat;opacity:.05;mix-blend-mode:multiply}
.concern-section .shell{position:relative;z-index:1}
/* 4 · Philosophy: the root network surfaces along the bottom edge, under the
harvest figure. "Returned to the source", literally. */
.philosophy::after{content:'';position:absolute;left:0;right:0;bottom:-2%;height:min(30vw,420px);z-index:0;pointer-events:none;
background:url("assets/img/tex/roots.webp?v=128") center bottom/cover no-repeat;opacity:.07;mix-blend-mode:multiply}
.philosophy .shell{position:relative;z-index:1}
/* 5 · Reviews: a soft gold riso wash behind the section head only, masked out
before the cards begin. */
.kx-reviews{position:relative}
.kx-reviews::after{content:'';position:absolute;left:0;right:0;top:0;height:min(24vw,340px);z-index:0;pointer-events:none;
background:url("assets/img/tex/riso-gold.webp?v=128") repeat 0 0/560px;mix-blend-mode:multiply;opacity:.16;
-webkit-mask-image:linear-gradient(180deg,#000 20%,transparent 92%);mask-image:linear-gradient(180deg,#000 20%,transparent 92%)}
.kx-reviews .shell{position:relative;z-index:1}
/* 6 · Difference CTA + footer: cloud-forest mist drifting over the shared
jungle photograph. Screen blend, so it only ever lightens. */
.home-cta::before{content:'';display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
background:url("assets/img/tex/mist.webp?v=128") center/cover no-repeat;mix-blend-mode:screen;opacity:.55}
.site-footer::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
background:url("assets/img/tex/mist.webp?v=128") center 30%/cover no-repeat;mix-blend-mode:screen;opacity:.4}
@media(max-width:720px){
.products::after{width:74vw;height:44vw;opacity:.3}
.concern-section::after{background-size:180vw}
}
/* v128b: with fibre under them, the grey-green subheads needed darker ink to
hold the contrast floor with margin. One shared style, one fix. */
.section-head p,.concern-sub,.philo-lede{color:#494c42}
.hv-sub{color:rgba(255,255,255,.94)!important}
.bowl-copy p,.product-copy p{color:#53564c}
/* ============ v129: content-page textures + gradient theme (1 Aug) ============ */
/* Philosophy page gets the softened inclusion paper across its ivory base
(body-scoped so it outranks the page's inline style block). Retreats is
untouched by request. */
body .kx-philo{background:linear-gradient(180deg,#f2efe6 0%,var(--kx-ivory,#FAF9F6) 30%,var(--kx-ivory,#FAF9F6) 70%,#eef0e6 100%)}
/* Homepage philosophy section: same softened tile, scaled calmer. */
.philosophy{background:linear-gradient(180deg,#f2efe6 0%,var(--paper) 30%,var(--paper) 70%,#eef0e6 100%)}
/* --- gradient theme: html.theme-gradient (toggled via ?theme=gradient, persisted) ---
Soft radial mesh in the brand palette laid UNDER the paper fibre, so the
gradient version keeps the texture doctrine. Retreats has none of these
classes, so it stays untouched in both themes. */
.theme-gradient .collections,.theme-gradient .journey-preview .collections{background:
radial-gradient(64% 84% at 10% 6%,rgba(201,169,66,.13),transparent 58%),
radial-gradient(72% 92% at 92% 16%,rgba(31,58,42,.10),transparent 56%),
url("assets/img/tex/paper-card.webp?v=128") repeat 0 0/620px,var(--cream);background-blend-mode:normal,normal,multiply,normal}
.theme-gradient .products,.theme-gradient .video-stories{background:
radial-gradient(70% 90% at 88% 8%,rgba(149,142,89,.13),transparent 58%),
radial-gradient(60% 80% at 6% 90%,rgba(201,169,66,.10),transparent 55%),
url("assets/img/tex/paper-card.webp?v=128") repeat 0 0/620px,var(--cream);background-blend-mode:normal,normal,multiply,normal}
.theme-gradient .kx-reviews{background:
radial-gradient(66% 88% at 12% 12%,rgba(201,169,66,.12),transparent 56%),
radial-gradient(70% 90% at 90% 88%,rgba(31,58,42,.09),transparent 58%),
url("assets/img/tex/paper-card.webp?v=128") repeat 0 0/620px,linear-gradient(180deg,var(--cream) 0%,#f4f0e5 100%);background-blend-mode:normal,normal,multiply,normal}
.theme-gradient .philosophy{background:
radial-gradient(72% 92% at 50% 0%,rgba(149,142,89,.13),transparent 60%),
radial-gradient(58% 78% at 92% 90%,rgba(201,169,66,.11),transparent 55%),
var(--paper)}
.theme-gradient .concern-section{background:
radial-gradient(64% 86% at 8% 10%,rgba(31,58,42,.08),transparent 55%),
radial-gradient(66% 88% at 94% 86%,rgba(201,169,66,.12),transparent 58%),#fff}
.theme-gradient body .kx-philo,.theme-gradient .kx-philo{background:
radial-gradient(70% 90% at 50% 0%,rgba(149,142,89,.12),transparent 58%),
radial-gradient(60% 80% at 90% 92%,rgba(201,169,66,.11),transparent 56%),
var(--kx-ivory,#FAF9F6)}
/* ============ v130: CTA-footer continuity + distinct Philosophy wash (1 Aug) ============ */
/* The CTA and footer each painted their OWN copy of the jungle photograph, so
the two dark bands met with repeating orchids and a visible restart. On
desktop both sections now paint the SAME viewport-fixed plate: whatever part
of the photo sits behind each section is, by construction, one continuous
image across the boundary. (Mobile keeps the scrolling ![]()
copies:
fixed-attachment is unreliable on iOS.) */
@media(min-width:901px){
.home-cta .home-cta-scene{display:none}
.site-footer .footer-bg{display:none}
/* !important beats the legacy body/footer background !importants (427/476) */
.site-footer{background:url("assets/img/gen6/footer-dark-river.webp?v=74") center/cover fixed,#12351f!important}
/* the CTA's bottom fade-to-footer is no longer needed: there is no seam */
.home-cta::after{background:linear-gradient(100deg,rgba(9,26,16,.90) 0%,rgba(9,26,16,.80) 26%,rgba(9,26,16,.42) 44%,rgba(9,26,16,.10) 60%)}
}
/* 4th section (Philosophy): in the gradient variant it gets its OWN wash, a
vertical dawn-gold, distinct from the radial mesh the other sections use. */
.theme-gradient .philosophy{background:
linear-gradient(180deg,rgba(201,169,66,.14) 0%,rgba(201,169,66,.05) 26%,rgba(243,240,233,0) 55%,rgba(149,142,89,.08) 100%),
var(--paper)}
/* ============ v132: CTA solid-gradient band + cursor pouches + fixes (1 Aug) ============ */
/* Difference CTA: premium deep-forest gradient (Shreyas's call), no photo.
Gold breath top-right, warm base, riso-like depth via the mist layer. */
.home-cta .home-cta-scene{display:none!important}
.home-cta{background:
radial-gradient(72% 88% at 80% 22%,rgba(44,74,55,.9),transparent 62%),
radial-gradient(52% 64% at 10% 88%,rgba(201,169,66,.12),transparent 55%),
linear-gradient(160deg,#16351f 0%,#0d2518 72%)!important}
.home-cta::before{opacity:.32}
.home-cta::after{background:linear-gradient(180deg,rgba(9,26,16,0) 0%,rgba(9,26,16,0) 78%,rgba(9,26,16,.30) 100%)}
/* pouches react to the cursor (JS drives --px/--py per-pouch; CSS just eases) */
@media (hover:hover) and (pointer:fine){
.cta-pouch{transition:transform .18s ease-out;will-change:transform}
.home-cta.pouch-live .cta-pouch{transform:translate(var(--px,0px),var(--py,0px)) rotate(var(--pr,0deg)) scale(var(--ps,1))}
}
/* Philosophy in gradient mode: the dawn-gold band read as not fitting; reduce
to a barely-there warm crown at the top, texture carries the rest. */
.theme-gradient .philosophy{background:
radial-gradient(90% 34% at 50% 0%,rgba(201,169,66,.09),transparent 70%),
var(--paper)}
/* ===== NOKT-style rolling 9:16 testimonial rail (1 Aug) ===== */
.video-stories .story-grid{display:block}
.story-rail{overflow:hidden;position:relative;margin-top:8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.story-rail-track{display:flex;gap:18px;width:max-content;animation:storyRoll 46s linear infinite;will-change:transform}
.story-rail:hover .story-rail-track,.story-rail:focus-within .story-rail-track{animation-play-state:paused}
@keyframes storyRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.story-rail-track{animation:none}}
.story-916{position:relative;flex:0 0 auto;width:clamp(200px,22vw,262px);aspect-ratio:9/16;border:0;padding:0;border-radius:20px;overflow:hidden;cursor:pointer;background:#10221a;box-shadow:0 14px 34px rgba(31,58,42,.22);transition:transform .35s ease,box-shadow .35s ease}
.story-916{font:inherit;color:inherit;text-align:left}
.loox-home{margin:0 auto 32px;max-width:1180px}
.loox-swipe-cue{display:none}
.loox-ready [data-loox-fallback]{display:none}
.story-916:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(31,58,42,.32)}
.story-916 img{width:100%;height:100%;object-fit:cover;display:block}
.story-916 .video-play{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;background:rgba(250,249,246,.92);color:#1F3A2A;display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.28);transition:transform .3s ease}
.story-916:hover .video-play{transform:scale(1.08)}
.story-916-copy{position:absolute;left:0;right:0;bottom:0;padding:38px 14px 14px;background:linear-gradient(180deg,transparent,rgba(9,20,14,.78));color:#FAF9F6;text-align:left;font-size:.86rem;letter-spacing:.01em}
.story-916.ugc-live video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.story-916.ugc-live.is-playing .video-play{opacity:0;pointer-events:none}
.story-916.ugc-live .video-play{transition:opacity .3s ease,transform .3s ease}
/* ===== Fullscreen NOKT lightbox: dark stage + left thumb rail ===== */
.vlb[hidden]{display:none}
.vlb{position:fixed;inset:0;z-index:30000;background:rgba(7,13,10,.94);display:grid;grid-template-columns:96px 1fr;align-items:center;opacity:0;transition:opacity .28s ease}
.vlb.open{opacity:1}
.vlb-stage{display:grid;place-items:center;height:100%;padding:4vh 4vw}
.vlb-stage video,.vlb-stage img{height:min(88vh,100%);max-height:88vh;max-width:min(92vw,calc(88vh * 9 / 16 + 40px));aspect-ratio:9/16;object-fit:contain;border-radius:18px;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.vlb-rail{display:flex;flex-direction:column;gap:10px;padding:14px 0 14px 16px;max-height:82vh;overflow-y:auto;scrollbar-width:none}
.vlb-rail::-webkit-scrollbar{display:none}
.vlb-thumb{flex:0 0 auto;width:64px;aspect-ratio:9/16;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0;background:#111;cursor:pointer;opacity:.55;transition:opacity .2s ease,border-color .2s ease}
.vlb-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.vlb-thumb.is-active,.vlb-thumb:hover{opacity:1;border-color:#f0d77c}
.vlb-close{position:absolute;top:18px;right:18px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:rgba(250,249,246,.14);color:#FAF9F6;display:grid;place-items:center;cursor:pointer;transition:background .2s ease}
.vlb-close:hover{background:rgba(250,249,246,.3)}
@media (max-width:720px){
.vlb{grid-template-columns:1fr;grid-template-rows:1fr 92px}
.vlb-stage{order:1;padding:3vh 4vw}
.vlb-stage video,.vlb-stage img{max-height:74vh}
.vlb-rail{order:2;flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden;padding:10px 14px;max-width:100vw}
.vlb-thumb{width:48px}
}
/* ===== PDP customer gallery strip + Testimonial Gallery page ===== */
.pp-ugc-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.pp-ugc-strip button,.ugc-wall button{border:0;padding:0;border-radius:16px;overflow:hidden;cursor:pointer;background:#efece4;aspect-ratio:4/5;box-shadow:0 10px 24px rgba(31,58,42,.14);transition:transform .3s ease,box-shadow .3s ease}
.pp-ugc-strip button:hover,.ugc-wall button:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(31,58,42,.24)}
.pp-ugc-strip img,.ugc-wall img{width:100%;height:100%;object-fit:cover;display:block}
.pp-ugc-more{display:flex;justify-content:center;margin-top:26px}
@media (max-width:860px){.pp-ugc-strip{grid-template-columns:repeat(2,1fr)}}
.ugc-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:30px}
.gallery-hero{padding:120px 0 20px;text-align:center}
.gallery-hero .eyebrow{color:#8a6d1d}
.pp-ugc .pp-band-head{text-align:center;margin-bottom:14px}
.pp-ugc .pp-band-head h2{margin:6px 0 0}
/* ===== Reviews wall photo cards + gallery review cells (1 Aug round 2) ===== */
.pp-wall-has-photo{display:flex;flex-direction:column;gap:10px}
.pp-wall-shot{border:0;padding:0;margin:0 0 4px;border-radius:14px;overflow:hidden;cursor:pointer;background:#efece4;width:100%;aspect-ratio:4/3;box-shadow:0 8px 20px rgba(31,58,42,.12);transition:transform .3s ease}
.pp-wall-shot:hover{transform:translateY(-3px)}
.pp-wall-shot img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block}
.ugc-wall{align-items:start}
.ugc-cell{margin:0;background:#fff;border:1px solid rgba(31,58,42,.1);border-radius:18px;overflow:hidden;box-shadow:0 10px 26px rgba(31,58,42,.09)}
.ugc-cell>button{width:100%;aspect-ratio:4/5;border:0;padding:0;cursor:pointer;background:#efece4;display:block}
.ugc-cell>button img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.ugc-cell:hover>button img{transform:scale(1.03)}
.ugc-cell figcaption{padding:14px 16px 16px}
.ugc-stars{color:#c9a942;font-size:.8rem;letter-spacing:2px}
.ugc-cell blockquote{margin:8px 0 10px;font-size:.86rem;line-height:1.5;color:#3d4a3f;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ugc-cell strong{display:block;font-size:.8rem;letter-spacing:.04em;color:#1F3A2A}
.ugc-cell small{color:#8a6d1d;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.ugc-wall{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
/* ===== 1 Aug mobile pass 2 ===== */
@media (max-width:720px){
/* kx pages (story/philosophy/tea-prep/body/recipes): kill the empty upper band */
body .kx-hero{min-height:auto!important;padding:96px 0 48px!important}
/* video rail: edge-to-edge and centered, no right dead gap.
index's inline css flexes .story-grid, which shrinks the rail as a flex
item; force block + full-bleed so the rail owns the whole viewport. */
.video-stories .story-grid{display:block!important}
.video-stories .story-rail{width:100vw!important;max-width:100vw!important;min-width:100vw;flex:0 0 100vw;margin-left:calc(50% - 50vw)!important}
.story-916{width:min(46vw,220px)}
}
/* ===== Mobile page navigation: floating Sections pill + bottom sheet ===== */
@media (max-width:760px){
.page-side-nav{display:none!important}
main.has-page-side-nav{padding-left:0!important}
body .kx-hero{min-height:auto!important;padding:64px 0 40px!important}
}
.psn-fab{position:fixed;left:16px;bottom:18px;z-index:940;display:none;align-items:center;gap:8px;border:0;border-radius:999px;padding:12px 18px;background:#1F3A2A;color:#FAF9F6;font-size:.8rem;font-weight:700;letter-spacing:.06em;box-shadow:0 12px 30px rgba(9,26,16,.35);cursor:pointer}
.psn-fab svg{width:16px;height:16px}
@media (max-width:760px){.psn-fab{display:inline-flex}}
body.pp-body .psn-fab{bottom:96px}
.psn-sheet{position:fixed;inset:0;z-index:930;background:rgba(9,20,14,.45);opacity:0;pointer-events:none;transition:opacity .25s ease;display:flex;align-items:flex-end}
.psn-sheet.open{opacity:1;pointer-events:auto}
.psn-sheet-card{width:100%;background:#FAF9F6;border-radius:22px 22px 0 0;padding:20px 20px calc(24px + env(safe-area-inset-bottom));transform:translateY(24px);transition:transform .28s ease;max-height:70vh;overflow-y:auto}
.psn-sheet.open .psn-sheet-card{transform:none}
.psn-sheet-title{margin:0 0 10px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#8a6d1d}
.psn-sheet-links{display:grid;gap:4px}
.psn-sheet-links a{display:block;padding:13px 12px;border-radius:12px;color:#1F3A2A;font-size:1rem;border:1px solid rgba(31,58,42,.1);background:#fff}
.psn-sheet-links a:active{background:#eef0e6}
/* v142: Raisa and Brian mobile navigation corrections (6 Aug). */
.concern-rail-nav{display:grid;grid-template-columns:auto 44px minmax(120px,230px) 44px;align-items:center;justify-content:center;gap:12px;margin:18px auto 0}
.concern-swipe-cue{display:inline-flex;align-items:center;gap:8px;margin:0 10px 0 0;color:#5c6b60;font-size:.72rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.concern-swipe-cue svg{width:20px;height:20px;color:var(--gold)}
.concern-nav-btn{width:44px;height:44px;border:1px solid rgba(31,58,42,.22);border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--forest);cursor:pointer;transition:background .2s,color .2s,opacity .2s}
.concern-nav-btn:hover:not(:disabled),.concern-nav-btn:focus-visible{background:var(--forest);color:#fff}
.concern-nav-btn:disabled{opacity:.32;cursor:default}
.concern-nav-btn svg{width:19px;height:19px}
.concern-progress{display:flex;align-items:center;justify-content:center;gap:7px;min-height:12px}
.concern-progress span{display:block;width:28px;height:3px;border-radius:99px;background:rgba(31,58,42,.18);transition:width .25s,background .25s}
.concern-progress span.is-active{width:46px;background:var(--forest)}
.concern-directory-cta{width:max-content;margin:20px auto 0;padding-inline:30px}
.vlb{grid-template-areas:"rail stage" "rail controls";grid-template-rows:minmax(0,1fr) auto}
.vlb-rail{grid-area:rail}
.vlb-stage{grid-area:stage;min-height:0}
.vlb-controls{grid-area:controls;z-index:3;display:flex;align-items:center;justify-content:center;gap:14px;padding:0 18px max(16px,env(safe-area-inset-bottom))}
.vlb-direction{width:48px;height:48px;border-radius:50%;border:1px solid rgba(250,249,246,.32);display:grid;place-items:center;background:rgba(250,249,246,.12);color:#FAF9F6;cursor:pointer;backdrop-filter:blur(12px);transition:background .2s,border-color .2s,transform .2s}
.vlb-direction:hover,.vlb-direction:focus-visible{background:rgba(250,249,246,.26);border-color:#f0d77c}
.vlb-direction:active{transform:scale(.95)}
.vlb-direction svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vlb-position{min-width:74px;margin:0;color:#FAF9F6;text-align:center;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:720px){
.concern-row{padding:8px 24vw 14px 2px;scroll-snap-type:x mandatory}
.concern-circle{width:30vw;min-width:108px;scroll-snap-align:start}
.concern-rail-nav{grid-template-columns:44px minmax(110px,1fr) 44px;width:100%;gap:10px;margin-top:14px}
.concern-swipe-cue{grid-column:1/-1;justify-self:center;margin:0 0 2px}
.concern-progress{overflow:hidden}
.concern-progress span{width:18px}
.concern-progress span.is-active{width:34px}
.concern-directory-cta{width:100%;min-height:52px;margin-top:16px}
.philo-credo{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(78vw,1fr);gap:14px;max-width:none;width:calc(100vw - 22px);margin-left:calc(50% - 50vw + 11px);margin-right:0;padding:28px 11px 14px 0;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;text-align:left}
.philo-credo::-webkit-scrollbar{display:none}
.credo-step{scroll-snap-align:start;min-height:210px;padding:22px;border:1px solid rgba(31,58,42,.13);border-radius:20px;background:rgba(255,255,255,.66)}
.credo-chip{display:flex;align-items:center;gap:12px}
.vlb{grid-template-areas:"stage" "controls" "rail";grid-template-rows:minmax(0,1fr) 66px 82px}
.vlb-stage{padding:58px 14px 8px}
.vlb-stage video,.vlb-stage img{max-height:calc(100vh - 230px);max-width:calc(100vw - 28px)}
.vlb-controls{padding:4px 14px 8px}
.vlb-direction{width:48px;height:48px;background:rgba(250,249,246,.18)}
.vlb-rail{padding:8px 14px calc(8px + env(safe-area-inset-bottom))}
.vlb-thumb{width:44px}
}
/* v143: one reinforced mobile rail language across Collections, Most Loved,
Shop by Concern, and the Shop filter strip. */
.home-guided-rail{min-width:0}
.home-rail-controls,.home-rail-cta{display:none}
@media(max-width:720px){
.home-rail-controls{display:grid}
.home-rail-cta{display:flex}
.home-guided-rail .collection-row,.home-guided-rail .best-grid{padding-right:24vw;padding-bottom:4px}
.home-guided-rail .concern-rail-nav,.concern-row-wrap>.concern-rail-nav{margin-top:4px;row-gap:2px}
.home-guided-rail .concern-directory-cta,.concern-row-wrap>.concern-directory-cta{margin-top:8px}
.concern-row-wrap>.concern-row{padding-bottom:4px}
.loox-swipe-cue{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto 14px;color:#6d674f;font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.loox-swipe-cue svg{width:24px;height:24px;flex:0 0 24px;color:#c9a942;animation:looxSwipePrompt 1.8s ease-in-out infinite}
}
@keyframes looxSwipePrompt{0%,100%{transform:translateX(-2px);opacity:.7}50%{transform:translateX(4px);opacity:1}}
@media(min-width:721px) and (max-width:900px){
.loox-swipe-cue{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto 14px;color:#6d674f;font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.loox-swipe-cue svg{width:24px;height:24px;flex:0 0 24px;color:#c9a942;animation:looxSwipePrompt 1.8s ease-in-out infinite}
}
@media(prefers-reduced-motion:reduce){.loox-swipe-cue svg{animation:none}}