/* ===== About page ===== */
section{position:relative}
.abouthead{background:var(--headbg);padding:150px 24px 90px;border-radius:0 0 48px 48px;position:relative;overflow:hidden;min-height:78vh;display:flex;flex-direction:column;justify-content:flex-end}
.abouthead h1{font-size:clamp(60px,12vw,200px);font-weight:800;letter-spacing:-.065em;line-height:.84;max-width:9ch;position:relative;z-index:2}
.abouthead p{max-width:480px;font-size:19px;line-height:1.45;margin-top:26px;position:relative;z-index:2}
.hf{position:absolute;margin:0;border-radius:22px;overflow:hidden;box-shadow:0 34px 60px -24px #0007;translate:0 var(--py,0);will-change:translate}
.hf img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.15);animation:hz 1.4s var(--ease) forwards}
@keyframes hz{to{transform:scale(1)}}
.hf1{right:6%;top:15%;width:clamp(150px,20vw,300px);aspect-ratio:3/4;rotate:6deg}
.hf2{right:24%;top:32%;width:clamp(130px,16vw,240px);aspect-ratio:1;rotate:-7deg}
.hf3{right:3%;bottom:8%;width:clamp(150px,18vw,280px);aspect-ratio:4/3;rotate:-3deg}
.hd{position:absolute;width:clamp(70px,9vw,120px);z-index:1;opacity:.8}
.hd1{left:44%;top:16%}.hd2{left:62%;bottom:12%;width:80px}
@media(max-width:760px){.hf2{display:none}.abouthead{min-height:70vh}}

.statement{padding:170px 0 120px}
.statement h3{font-size:clamp(34px,6.2vw,104px);line-height:.98;letter-spacing:-.045em;font-weight:800;max-width:1300px}
.statement h3 .sw{display:inline-block;opacity:.14;transition:opacity .3s;margin-right:.22em}
.statement h3 .sw.on{opacity:1}
.statement h3 .sw.hl{font-family:'DM Serif Display',serif;font-style:italic;font-weight:400;color:var(--orange)}

.story{padding:20px 0 130px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:center}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.collage{position:relative;aspect-ratio:1;max-width:640px}
.cimg{position:absolute;margin:0;overflow:hidden;border-radius:28px;box-shadow:0 40px 60px -30px #0007}
.cimg img{width:100%;height:100%;object-fit:cover;display:block}
.c1{left:0;top:0;width:72%;height:78%;translate:0 var(--py,0)}
.c2{right:0;bottom:0;width:54%;height:52%;translate:0 var(--py,0);border:8px solid var(--cream);box-shadow:0 30px 50px -24px #0008}
.badge{position:absolute;left:52%;top:4%;z-index:3;width:clamp(110px,14vw,150px);aspect-ratio:1;border-radius:50%;background:var(--ink);color:var(--butter);display:grid;place-content:center;text-align:center;animation:spin 30s linear infinite reverse}
.badge b{font-size:clamp(34px,4.6vw,52px);letter-spacing:-.04em}
.badge span{font-size:10px}
.text h2{font-size:clamp(40px,6vw,96px);font-weight:800;letter-spacing:-.055em;line-height:.9;margin-bottom:26px}
.text p{font-size:18px;line-height:1.6;max-width:56ch;margin-bottom:16px;opacity:.9}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin-top:26px;max-width:520px}
.facts div{border-top:2px solid var(--ink);padding-top:10px}
.facts dt{opacity:.6;font-size:11px}
.facts dd{font-weight:700;font-size:17px;letter-spacing:-.02em;margin-top:2px}

/* clip reveal for photos */
.reveal,.ph{clip-path:inset(0 0 100% 0 round 28px);transition:clip-path 1.2s var(--ease)}
.reveal.shown,.ph.shown{clip-path:inset(0 round 28px)}
.reveal img,.ph img{transform:scale(1.3);transition:transform 1.4s var(--ease)}
.reveal.shown img,.ph.shown img{transform:scale(1)}
.ph:hover img{transform:scale(1.08)}

.nums{padding:20px 0 130px}
.nums .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.num{border-top:2px solid var(--ink);padding-top:18px}
.num b{display:block;font-size:clamp(60px,9vw,140px);font-weight:800;letter-spacing:-.06em;line-height:.9}

.make{padding:0 0 140px}
.mhead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:46px}
.mhead h2,.how h2,.road h2,.promise h2{font-size:clamp(46px,9vw,150px);font-weight:800;letter-spacing:-.055em;line-height:.85}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px}
.mt{background:var(--c);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .35s var(--ease)}
.mt:hover{box-shadow:0 26px 44px -26px #000a}
.mimg{aspect-ratio:4/3;background-size:cover;background-position:center;transition:transform 1s var(--ease)}
.mt:hover .mimg{transform:scale(1.06)}
.mt{overflow:hidden}
.mbody{position:relative;background:var(--c);padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.mbody .mono{opacity:.65;font-size:11px}
.mbody h4{font-size:26px;letter-spacing:-.04em;line-height:1;font-weight:800}
.mbody p{font-size:14px;line-height:1.45;opacity:.85}
.mbody .go{font-weight:800;margin-top:auto;padding-top:6px}

.how{padding:0 0 60px}
.how h2{margin-bottom:60px}
.stack .s{position:sticky;top:90px;border-radius:var(--r);padding:clamp(24px,4vw,56px);min-height:62vh;display:grid;grid-template-columns:1fr 1.2fr;gap:30px;margin-bottom:30px;box-shadow:0 -10px 40px -20px #0004}
.s1{background:var(--butter)}.s2{background:var(--blue);color:#fff}.s3{background:var(--orange);color:#fff}.s4{background:var(--ink);color:var(--butter)}
.s .big{font-size:clamp(90px,17vw,260px);font-weight:800;letter-spacing:-.07em;line-height:.8}
.s h4{font-size:clamp(28px,4vw,56px);letter-spacing:-.04em;line-height:.95;font-weight:800;margin-bottom:16px}
.s p{max-width:44ch;font-size:17px;line-height:1.45}
.s .r{display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.s .ic{width:clamp(80px,10vw,130px);align-self:flex-end}
.s.on .dd *{animation:draw 1.4s cubic-bezier(.6,0,.3,1) .2s forwards}
@media(max-width:760px){.stack .s{grid-template-columns:1fr;min-height:auto}}

.road{padding:100px 0 130px}
.road h2{margin-bottom:46px}
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(80px,10vw,150px);gap:16px}
.ph{position:relative;margin:0;overflow:hidden;border-radius:28px}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph figcaption{position:absolute;left:14px;bottom:12px;background:var(--butter);color:var(--ink);padding:6px 12px;border-radius:100px;font-size:11px}
.q1{grid-column:1/6;grid-row:1/4}.q2{grid-column:6/9;grid-row:1/3}.q3{grid-column:9/13;grid-row:1/4}.q4{grid-column:6/9;grid-row:3/5}.q5{grid-column:1/6;grid-row:4/6}
.mosaic .ph:nth-child(2){transition-delay:.15s}.mosaic .ph:nth-child(3){transition-delay:.3s}.mosaic .ph:nth-child(4){transition-delay:.45s}.mosaic .ph:nth-child(5){transition-delay:.6s}
@media(max-width:760px){.mosaic>*{grid-column:1/-1!important;grid-row:auto!important;height:240px}}

.promise{padding:0 0 130px}
.promise h2{margin-bottom:44px}
.pgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.pt{border-radius:var(--r);padding:28px;min-height:250px;display:flex;flex-direction:column;justify-content:space-between;transition:box-shadow .35s var(--ease)}
.pt:hover{box-shadow:0 26px 44px -26px #000a}
.pi{font-size:60px;line-height:1;animation:bob 3s ease-in-out infinite}
.pt h5{font-size:clamp(24px,2.6vw,38px);letter-spacing:-.04em;line-height:1;font-weight:800;margin-top:24px}
.pt p{font-size:15px;line-height:1.4;margin-top:10px;max-width:38ch}
.p1{grid-column:span 7;background:var(--butter)}.p2{grid-column:span 5;background:var(--ink);color:#fff}.p3{grid-column:span 4;background:#CFE8D8}.p4{grid-column:span 4;background:var(--orange);color:#fff}.p5{grid-column:span 4;background:#E8C79B}
@media(max-width:860px){.pgrid>*{grid-column:span 12!important}}

.cta{padding:0 0 140px}
.ctabox{background:var(--ink);color:#fff;border-radius:var(--r);padding:clamp(34px,7vw,110px) clamp(24px,5vw,80px);display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.ctabox h2{font-size:clamp(44px,8vw,130px);font-weight:800;letter-spacing:-.06em;line-height:.85}
.ctabtns{display:flex;gap:12px;flex-wrap:wrap}
.ctabtns .btn.dark{background:var(--butter);color:var(--ink)}

.abouthead .eyebrow{align-self:flex-start}

/* ===== from roll to door: scroll-driven journey ===== */
.journey{position:relative;height:520vh;margin-bottom:60px}
.jpin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:96px 24px 22px;overflow:hidden;background:linear-gradient(180deg,var(--cream) 0%,#e9f3ea 70%,#d9efdf 100%)}
.jhead{max-width:1500px;width:100%;margin:0 auto;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.jhead h2{font-size:clamp(34px,6vw,86px);font-weight:800;letter-spacing:-.055em;line-height:.9}
.jstage{position:relative;flex:1;min-height:0;width:100%;max-width:1500px;margin:0 auto;cursor:grab;touch-action:pan-y;user-select:none}
.jstage.drag{cursor:grabbing}
.jsvg{position:absolute;inset:0;width:100%;height:100%}
.jguide{fill:none;stroke:#10261b33;stroke-width:5;stroke-dasharray:2 16;stroke-linecap:round}
.jedge{fill:none;stroke:#1f5a3d;stroke-width:58;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.jpaper{fill:none;stroke:#fffdf3;stroke-width:46;stroke-linecap:round;stroke-linejoin:round}
.jsky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.jd{position:absolute;width:clamp(50px,7vw,110px);aspect-ratio:1;opacity:.55;background:no-repeat center/contain}
.jd1{left:8%;top:6%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23FF6600' stroke-width='3.2' stroke-linecap='round'%3E%3Ccircle cx='50' cy='50' r='14'/%3E%3Cpath d='M50 12v14M50 74v14M12 50h14M74 50h14M23 23l10 10M67 67l10 10M77 23L67 33M33 67L23 77'/%3E%3C/svg%3E")}
.jd2{left:46%;top:2%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%231f5a3d' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 54q11-22 22 0t22 0t22 0t22 0'/%3E%3C/svg%3E")}
.jd3{left:70%;top:60%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%231f5a3d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 10l10 26l28 2l-22 18l8 28l-24-16l-24 16l8-28l-22-18l28-2z'/%3E%3C/svg%3E")}
.jd4{left:24%;top:70%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23FF6600' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M8 60q30-40 70-14M64 30l16 16l-20 8'/%3E%3C/svg%3E")}

/* stops on the road */
.jst{position:absolute;transform:translate(-50%,-50%);border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:3}
.jico{width:clamp(46px,6.4vw,84px);aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #1f5a3d,0 14px 24px -8px #0007;display:grid;place-items:center;padding:12%;transform:scale(.7);opacity:.55;transition:transform .6s cubic-bezier(.3,1.6,.4,1),opacity .4s,background .3s}
.jico .dd *{stroke-dashoffset:1}
.jst.on .jico{transform:scale(1);opacity:1}
.jst.on .jico .dd *{animation:draw 1s cubic-bezier(.6,0,.3,1) forwards}
.jst.now .jico{background:var(--butter);transform:scale(1.18)}
.jst b{font:800 clamp(11px,1.2vw,15px) 'Bricolage Grotesque',sans-serif;background:var(--ink);color:#fff;padding:3px 10px;border-radius:100px;opacity:0;transform:translateY(-6px);transition:.4s}
.jst.on b{opacity:1;transform:none}

/* the roll */
.jroll{position:absolute;left:0;top:0;width:calc(var(--sc,.5) * 88px);height:calc(var(--sc,.5) * 88px);min-width:40px;min-height:40px;z-index:4;will-change:transform;pointer-events:none}
.jroll i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#3a2a16 0 12%,#e8c79b 13% 22%,#b98a56 23% 24%,#e8c79b 25% 36%,#b98a56 37% 38%,#f0d9b0 39% 52%,#b98a56 53% 54%,#e8c79b 55% 100%);box-shadow:0 12px 20px -6px #0009,inset 0 0 0 3px #8e6a3f,inset -8px -8px 14px #0003}

/* the house at the end of the road */
.jhouse{position:absolute;width:clamp(80px,12vw,190px);aspect-ratio:1;transform:translate(-30%,-78%);z-index:2}
.jhouse svg{width:100%;height:100%;overflow:visible}
.hb{fill:#fff;stroke:#1f5a3d;stroke-width:4}.hr{fill:#FF6600;stroke:#1f5a3d;stroke-width:4;stroke-linejoin:round}.hc{fill:#1f5a3d}.hw{fill:#d9efdf;stroke:#1f5a3d;stroke-width:3}
.hdoor{position:absolute;left:53%;top:56%;width:22%;height:44%;perspective:400px}
.hdoor i{position:absolute;inset:0;background:#1f5a3d;border-radius:8px 8px 0 0;transform-origin:left center;transition:transform 1s cubic-bezier(.3,1.3,.4,1)}
.hdoor::before{content:'';position:absolute;inset:0;background:#fff8dc;border-radius:8px 8px 0 0}
.jhouse.open .hdoor i{transform:rotateY(-105deg)}
.hpkg{position:absolute;left:44%;top:66%;width:34%;transform:translateY(20px) scale(.2);opacity:0;transition:transform .8s .5s cubic-bezier(.3,1.7,.4,1),opacity .4s .5s}
.jhouse.open .hpkg{transform:translate(20%,32%) scale(1);opacity:1}

/* caption panel */
.jcap{max-width:1500px;width:100%;margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:6px 26px;align-items:center;background:var(--ink);color:#fff;border-radius:28px;padding:18px 26px;position:relative;overflow:hidden}
.jnum{font-size:13px;opacity:.85;white-space:nowrap}.jnum b{font-size:clamp(34px,5vw,64px);letter-spacing:-.05em;color:var(--butter);font-weight:800;line-height:1;vertical-align:-.1em}
.jtxt h4{font-size:clamp(20px,2.6vw,34px);letter-spacing:-.04em;font-weight:800;line-height:1}
.jtxt p{font-size:clamp(13px,1.3vw,17px);line-height:1.4;opacity:.85;margin-top:4px;max-width:70ch}
.jtxt.sw{animation:jsw .6s var(--ease)}
@keyframes jsw{from{opacity:0;transform:translateY(16px)}}
.jbar{grid-column:1/-1;height:4px;background:#fff2;border-radius:4px;overflow:hidden}
.jbar i{display:block;height:100%;width:100%;background:var(--butter);transform-origin:left;transform:scaleX(0)}
.jhint{position:absolute;right:26px;top:16px;font-size:10px;opacity:1;transition:opacity .4s;pointer-events:none}
@media(max-width:700px){.jpin{padding-top:84px}.jcap{grid-template-columns:1fr;padding:14px 18px}.jhint{display:none}}

.jstage{flex:none!important;min-height:0;width:min(100%,calc((100vh - 340px) * 2.5))!important;aspect-ratio:1600/640;margin:auto!important}
@media(max-width:700px){.jstage{width:100%!important}}

@media(max-width:700px){.jstage{width:200vw!important;max-width:none!important;margin:auto 0!important;will-change:translate}.jpin{padding-bottom:16px}.jcap{padding-right:76px!important}}