@font-face{font-family:"Newsreader";src:url(fonts/Newsreader.woff2) format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/HankenGrotesk.woff2) format("woff2");font-weight:400 600;font-display:swap}
:root{--ink:#16110f;--ink2:#231a17;--paper:#f4ede2;--paper2:#ebe0cf;--rose:#a3253d;--rose2:#d8576c;--leaf:#3f5b3a;--txt:#2a211d;--mute:#6d5f56;--cream:#efe6da}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font:400 17.5px/1.62 "Hanken Grotesk",system-ui,sans-serif;color:var(--txt);background:var(--paper);overflow-x:clip}
h1,h2,h3{font-family:"Newsreader",Georgia,serif;font-weight:450;letter-spacing:-.015em;line-height:1.08;text-wrap:balance}
h2{font-size:clamp(34px,8.6vw,60px);margin-bottom:28px}
h3{font-size:25px;margin-bottom:8px}
a{color:inherit}
img{display:block;max-width:100%}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:8px}
.bar{position:fixed;inset:0 0 auto;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:12px 18px;color:var(--cream);transition:background .4s,color .4s}
.bar.solid{background:rgba(244,237,226,.92);color:var(--txt);backdrop-filter:saturate(1.2) blur(6px)}
.mark{display:flex;gap:10px;align-items:center;text-decoration:none;font:500 19px/1 "Newsreader",serif;letter-spacing:-.01em}
.mark img{border-radius:50%;width:34px;height:34px;object-fit:cover;box-shadow:0 0 0 1.5px currentColor}
.lang{display:flex;border:1px solid currentColor;border-radius:99px;background:none;color:inherit;font:500 14px/1 "Hanken Grotesk";cursor:pointer;overflow:hidden}
.lang span{padding:8px 11px;opacity:.55;transition:.3s}
html[lang=en] .lang [data-l=en],html[lang=ms] .lang [data-l=bm]{background:currentColor;opacity:1}
html[lang=en] .lang [data-l=en]{color:inherit}
.lang span{position:relative}
html[lang=en] .lang [data-l=en],html[lang=ms] .lang [data-l=bm]{background:var(--rose);color:#fff}
/* hero */
.hero{position:relative;min-height:100svh;background:var(--ink);color:var(--cream);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero-img{position:absolute;inset:0;z-index:-1}
.hero-img img{width:100%;height:118%;object-fit:cover;object-position:50% 30%;opacity:.78;transform:translate3d(0,var(--py,0),0) scale(1.06);will-change:transform}
.hero-img:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,17,15,.55) 0%,rgba(22,17,15,0) 30%,rgba(22,17,15,.35) 55%,rgba(22,17,15,.96) 88%)}
.hero-copy{padding:0 22px 44px;max-width:640px}
.where{font-size:15px;opacity:.85;margin-bottom:14px}
.hero h1{font-size:clamp(42px,11.6vw,84px);max-width:13ch;margin-bottom:18px}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .w>span{display:inline-block;transform:translateY(105%) rotate(4deg);transform-origin:0 100%;transition:transform .8s cubic-bezier(.2,.8,.1,1);transition-delay:calc(var(--i)*40ms)}
.ready .split .w>span{transform:none}
.lede{max-width:34ch;opacity:.9;margin-bottom:26px}
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--rose);color:#fff;text-decoration:none;font-weight:600;font-size:17px;padding:16px 24px;border-radius:99px;box-shadow:0 10px 30px -10px rgba(163,37,61,.8);transition:transform .25s,box-shadow .25s;position:relative;overflow:hidden}
.cta:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);animation:sheen 4.5s 2s infinite}
.cta:active{transform:scale(.97)}
@keyframes sheen{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

.ill{position:absolute;left:12px;bottom:10px;font-size:12px;opacity:.55;color:var(--cream)}
.petals i{position:absolute;top:-20px;width:14px;height:18px;border-radius:70% 0 70% 0;background:radial-gradient(circle at 30% 30%,#e9798b,#a3253d);opacity:.0;animation:fall linear infinite;will-change:transform}
.petals i:nth-child(1){left:12%;animation-duration:11s;animation-delay:1.2s}
.petals i:nth-child(2){left:38%;animation-duration:14s;animation-delay:3s;transform:scale(.7)}
.petals i:nth-child(3){left:66%;animation-duration:12s;animation-delay:.4s}
.petals i:nth-child(4){left:84%;animation-duration:16s;animation-delay:5s}
.petals i:nth-child(5){left:24%;animation-duration:13s;animation-delay:7s}
.petals i:nth-child(6){left:55%;animation-duration:15s;animation-delay:9s}
@keyframes fall{0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}10%{opacity:.9}100%{opacity:0;transform:translate3d(60px,105svh,0) rotate(540deg)}}
/* build stage */
.build{position:relative;height:460vh;background:linear-gradient(180deg,var(--ink) 0,#1d1513 40%,#241a16 100%);color:var(--cream)}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.stage-copy{padding:78px 22px 0;position:relative;z-index:5}
.stage h2{font-size:clamp(32px,8vw,56px);margin-bottom:12px}
.steps{list-style:none;position:relative;height:3.4em}
.steps li{position:absolute;inset:0;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.1,1);font-size:18px;max-width:30ch}
.steps li.on{opacity:1;transform:none}
.bouquet{position:relative;--cone:0;height:min(62svh,600px);aspect-ratio:300/560;justify-self:center;align-self:end;margin-bottom:4svh;--wrap:0;--rib:0;--tilt:0}
.bouquet>svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto}
.ribbon{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--rib))}
.stems{position:absolute;inset:0;z-index:2}
.stem{position:absolute;left:50%;bottom:22%;width:66%;transform-origin:50% 95%;will-change:transform}
.stem img{width:100%;height:auto}
.sparks i{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px rgba(255,240,220,.8);opacity:0;z-index:4}
.done .sparks i{animation:spark 1.6s ease-out forwards}
.sparks i:nth-child(1){left:30%;top:22%}.sparks i:nth-child(2){left:62%;top:14%;animation-delay:.15s}.sparks i:nth-child(3){left:46%;top:30%;animation-delay:.3s}.sparks i:nth-child(4){left:72%;top:34%;animation-delay:.45s}.sparks i:nth-child(5){left:22%;top:38%;animation-delay:.6s}
@keyframes spark{0%{opacity:0;transform:scale(.2)}30%{opacity:1;transform:scale(1.3)}100%{opacity:0;transform:scale(.4) translateY(-20px)}}
.meter{position:absolute;left:22px;right:22px;bottom:14px;height:2px;background:rgba(239,230,218,.15);z-index:6}
.meter span{display:block;height:100%;background:var(--rose2);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.ill-stage{bottom:24px}
/* words */
.words,.ways,.order{padding:96px 22px;max-width:760px;margin:0 auto}
.quotes{list-style:none;display:grid;gap:18px}
.q{background:#fff8ef;border-radius:22px;padding:24px 22px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 18px 40px -28px rgba(80,40,30,.45);opacity:0;transform:translateY(40px) rotate(var(--r,0deg));transition:opacity .8s,transform 1s cubic-bezier(.2,.8,.1,1)}
.q:nth-child(odd){--r:-1.2deg}.q:nth-child(even){--r:1.4deg;margin-left:8%}
.q.in{opacity:1;transform:rotate(calc(var(--r)*.5))}

cite{font-style:normal;font-size:15px;color:var(--mute)}
.ways{border-top:1px solid rgba(0,0,0,.08)}
.cards{display:grid;gap:16px}
.card{padding:26px 22px;border-radius:22px;background:var(--paper2);position:relative;overflow:hidden;opacity:0;transform:translateY(30px);transition:opacity .8s,transform 1s cubic-bezier(.2,.8,.1,1)}
.card.in{opacity:1;transform:none}
.card:before{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(216,87,108,.35),transparent 70%)}

.order{padding-bottom:140px}
.facts{display:grid;gap:0;margin-bottom:34px}
.facts div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid rgba(0,0,0,.09)}
dt{color:var(--mute);font-size:15px;padding-top:2px}
.cta.big{width:100%;justify-content:center;padding:19px 24px}
.foot{background:var(--ink);color:rgba(239,230,218,.7);padding:34px 22px 100px;font-size:15px}
.fab{position:fixed;right:16px;bottom:18px;z-index:40;width:58px;height:58px;border-radius:50%;background:#1f9d55;color:#fff;display:grid;place-items:center;box-shadow:0 12px 26px -8px rgba(0,0,0,.5);transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.fab.show{transform:scale(1)}
@media (min-width:900px){
 .hero-copy{padding:0 6vw 9vh;max-width:760px}.hero h1{font-size:clamp(48px,5.4vw,72px);max-width:14ch}
 .stage{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
 .stage-copy{align-self:center;padding:0 0 0 6vw}
 .bouquet{height:min(78vh,640px);align-self:center;margin:6vh 0 0}
 .cards{grid-template-columns:1fr 1fr}
 .quotes{grid-template-columns:1fr 1fr}.q:nth-child(even){margin:40px 0 0}
}
@media (prefers-reduced-motion:reduce){
 *,*:before,*:after{animation:none!important;transition:none!important}
 .split .w>span,.q,.card{transform:none!important;opacity:1!important}
 .petals{display:none}
 .build{height:auto}.stage{position:relative;height:auto;min-height:100svh}
 .bouquet{--wrap:1!important;--rib:1!important;--cone:1!important}
 .steps{height:auto}.steps li{position:static;opacity:1;transform:none;margin-bottom:6px}
 .hero-img img{transform:none}
 .fab{transform:none}
}

/* v0.1.1 paper wrap */
.wb,.wf,.rib{position:absolute;left:0;right:0;bottom:0;height:60.7%;pointer-events:none}
.wb{z-index:1;transform:translateY(calc((1 - var(--cone))*30%)) scale(calc(.9 + var(--cone)*.1));opacity:var(--cone);transform-origin:50% 100%}
.wb i,.wf i{position:absolute;inset:0;background:url(img/kraft.webp) center/cover}
.tis{background:url(img/tissue.webp) center/160% !important;clip-path:polygon(0 4%,8% 9%,14% 1%,24% 7%,33% -2%,42% 5%,52% -4%,61% 4%,70% -2%,79% 6%,88% 0,95% 8%,100% 3%,58% 97%,42% 97%);transform:translateY(-6%) scale(1.06);filter:brightness(.92)}
.kb{clip-path:polygon(4% 13%,50% 2%,96% 13%,57% 98%,43% 98%);box-shadow:inset 0 0 0 999px rgba(40,22,10,.38)}
.wf{z-index:3;filter:drop-shadow(0 16px 20px rgba(0,0,0,.5))}
.pl.a{clip-path:polygon(0 33%,22% 38%,50% 41%,57% 100%,43% 100%);background-position:30% 40%!important;transform:translateX(calc((1 - var(--wrap))*-115%)) rotate(calc((1 - var(--wrap))*-28deg));transform-origin:50% 100%}
.pl.b{clip-path:polygon(100% 33%,78% 40%,50% 44%,43% 100%,57% 100%);background-position:70% 60%!important;transform:translateX(calc((1 - var(--wrap))*115%)) rotate(calc((1 - var(--wrap))*28deg));transform-origin:50% 100%}
.pl.c{clip-path:polygon(28% 52%,50% 47%,72% 52%,55% 100%,45% 100%);background-position:50% 20%!important;opacity:var(--wrap);transform:translateY(calc((1 - var(--wrap))*25%))}
.pl.a:after,.pl.b:after,.pl.c:after{content:"";position:absolute;inset:0}
.pl.a:after{background:linear-gradient(100deg,rgba(255,240,215,.28),rgba(0,0,0,0) 45%,rgba(30,15,5,.35))}
.pl.b:after{background:linear-gradient(260deg,rgba(255,240,215,.12),rgba(0,0,0,0) 40%,rgba(30,15,5,.45))}
.pl.c:after{background:linear-gradient(180deg,rgba(255,240,215,.25),rgba(30,15,5,.3))}
.rib{z-index:4;height:60.7%}

.mark .handle{display:block;margin-top:3px;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:12px;opacity:.7;letter-spacing:0;line-height:1.1}.mark{align-items:center}.foot-name{margin:0 0 8px}.foot-name a{color:inherit}