/* Native scrolling, with bounded movement only on artwork. */
[data-parallax]{transform:translate3d(0,var(--parallax-y,0px),0);will-change:transform}
.art-frame{overflow:hidden;isolation:isolate;background:#f6ecdc}
.art-frame img{display:block;width:100%;height:100%;object-fit:cover;scale:1.13}
.heritage-art{width:100%;max-width:400px;aspect-ratio:1;margin:28px 0 -40px}
.heritage-number{position:relative;z-index:1;font-size:clamp(5rem,9vw,9rem)}
.heritage-identity .group-logo{width:135px;margin-bottom:20px}
.today{overflow:hidden;isolation:isolate;background:#faf3e8}
.vision-art{position:absolute;inset:-55px 0;z-index:-1;background:url('assets/section-2-cocoa.png') right 55px/100% auto no-repeat}
.journey-art{width:100%;height:clamp(230px,32vw,440px);margin:38px 0 48px}
.journey h2{margin-bottom:0}
.manufacturing-art{margin-top:40px;height:320px;border-radius:2px}
.product-art{aspect-ratio:1;margin:20px 0 28px}
.product-grid h3{margin-top:20px}
.product-grid article{min-width:0}
.quality-art{height:240px;margin-top:32px}
.contact{position:relative;overflow:hidden;isolation:isolate}
.contact-art{position:absolute;inset:-50px 0;z-index:-2;background:url('assets/hero-cocoa.png') right center/cover no-repeat;opacity:.2}
.contact:before{content:'';position:absolute;inset:0;background:#ead8bbba;z-index:-1}
@media(max-width:700px){.heritage-art{max-width:none;aspect-ratio:1.3;margin-bottom:-32px}.heritage-identity{width:100%}.vision-art{background-position:75% 330px;background-size:auto 380px}.journey-art{height:230px}.manufacturing-art{height:260px}.product-art{max-height:400px}.quality-art{height:220px}.hero-art{inset:-20px 0}.contact-art{background-position:70% center}}
@media(prefers-reduced-motion:reduce){[data-parallax]{transform:none!important;will-change:auto}}
/* Alternating silhouettes create deliberate transitions between chapters. */
main{overflow:hidden}
.section{position:relative}
.story{z-index:2;margin-top:-44px;padding-top:140px;padding-bottom:140px;clip-path:polygon(0 44px,64% 0,100% 28px,100% 100%,0 100%)}
.heritage-art{border-radius:48% 48% 8px 8px}
.today{z-index:3;margin-top:-42px;padding-top:135px;padding-bottom:125px;clip-path:polygon(0 0,38% 34px,100% 0,100% 100%,0 calc(100% - 35px))}
.journey{padding-top:115px;padding-bottom:135px}
.journey-art{clip-path:polygon(0 9%,100% 0,100% 89%,0 100%)}
.manufacturing{margin-top:-40px;padding-top:145px;padding-bottom:150px;clip-path:polygon(0 36px,100% 0,100% calc(100% - 46px),0 100%)}
.manufacturing-art{border-radius:2px 100px 2px 2px}
.products{padding-top:90px;padding-bottom:125px}
.product-art{border-radius:48% 48% 6px 6px}
.product-grid article:nth-child(2) .product-art{border-radius:6px 6px 48% 48%}
.product-grid article:nth-child(3) .product-art{border-radius:100px 6px 100px 6px}
.quality{background:#f0e6d6;border:0;padding-top:105px;padding-bottom:125px;border-radius:100px 0 0 0}
.quality-art{border-radius:0 80px 0 0}
.contact{margin-top:-40px;padding-top:120px;clip-path:polygon(0 0,100% 40px,100% 100%,0 100%)}
@media(max-width:700px){.story{margin-top:-22px;padding-top:90px;padding-bottom:100px;clip-path:polygon(0 22px,64% 0,100% 14px,100% 100%,0 100%)}.today{margin-top:-24px;padding-top:90px;padding-bottom:85px;clip-path:polygon(0 0,38% 18px,100% 0,100% 100%,0 calc(100% - 20px))}.journey{padding-top:70px;padding-bottom:95px}.manufacturing{padding-top:100px;padding-bottom:110px}.products{padding-top:65px;padding-bottom:80px}.quality{padding-top:80px;padding-bottom:95px;border-radius:55px 0 0 0}.contact{padding-top:100px}.manufacturing-art{border-top-right-radius:65px}}
/* The timeline stays in place; only its milestone information changes. */
main{overflow:clip}
.journey{padding:95px 7%;overflow:visible}
.journey-stage{display:grid;grid-template-columns:1.1fr 1fr;gap:8%;align-items:center}
.journey-visual{min-width:0}
.journey-visual h2{font-size:clamp(2.7rem,4vw,4.4rem)}
.journey-art{height:300px;margin:28px 0 18px}
.timeline-caption{font-size:14px;color:var(--muted)}
.year-navigation{display:flex;justify-content:space-between;gap:8px;margin-bottom:16px}
.year-navigation button{font:500 15px/1.4 var(--sans);border:0;background:transparent;color:var(--muted);padding:12px 5px;cursor:pointer}
.year-navigation button[aria-current]{color:var(--cocoa);border-bottom:2px solid var(--amber)}
.year-navigation button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.timeline-progress{height:2px;background:var(--line)}
.timeline-progress span{display:block;height:100%;width:var(--journey-progress,0%);background:var(--amber)}
.journey .timeline{display:block;margin:26px 0 0}
.journey .timeline li{padding:24px 0;display:block}
.journey .timeline strong{font-size:4.8rem;line-height:1.15}
.journey .timeline h3{font-size:2.2rem;margin:18px 0}
.journey .timeline p{font-size:17px;line-height:1.7}
.timeline-scroll-hint{display:none;font-size:13px;letter-spacing:.05em;color:var(--muted)}
.timeline-enhanced.journey{height:340vh;padding:0 7%}
.timeline-enhanced .journey-stage{position:sticky;top:0;height:100vh;padding:65px 0}
.timeline-enhanced .timeline{position:relative;min-height:320px}
.timeline-enhanced .timeline li{position:absolute;inset:0;border:0;opacity:0;visibility:hidden;transform:translateY(22px);transition:opacity .45s,transform .45s,visibility .45s}
.timeline-enhanced .timeline li.is-current{opacity:1;visibility:visible;transform:translateY(0)}
.timeline-enhanced .timeline-scroll-hint{display:block}
@media(max-width:900px){.journey-stage{grid-template-columns:1fr;gap:36px}.journey{padding:70px 6%}.journey-art{height:250px}.journey .timeline strong{font-size:3.4rem}.journey .timeline li{padding:30px 0}.journey .timeline h3{font-size:1.8rem}}

.art-frame img[data-parallax]{height:calc(100% + 100px);margin-top:-50px;scale:1.03}


.product-grid{gap:32px}.product-grid article,.product-grid article+article{padding:32px 0 20px;border-left:0}@media(max-width:700px){.product-grid{gap:0}}

/* Scroll-linked cocoa pod and bean scenes, synchronized with each year. */
.timeline-gallery{position:relative;height:350px;clip-path:none;border-radius:48% 48% 12px 12px;transition:border-radius .7s ease;background:#ead8bb}
.timeline-gallery[data-scene="1"]{border-radius:90px 12px 90px 12px}
.timeline-gallery[data-scene="2"]{border-radius:12px 48% 12px 48%}
.timeline-gallery[data-scene="3"]{border-radius:48% 12px 48% 12px}
.timeline-gallery[data-scene="4"]{border-radius:48% 48% 12px 12px}
.timeline-gallery .timeline-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:82% center;opacity:0;scale:1.13;transform:translateY(14px);transition:opacity .65s ease,transform .8s ease,scale 1s ease}
.timeline-gallery .timeline-scene.is-current{opacity:1;transform:translateY(0);scale:1.02}
.timeline-gallery .timeline-scene[data-scene="1"]{object-position:30% center}
.timeline-gallery .timeline-scene[data-scene="3"]{object-position:75% center}
.timeline-gallery .timeline-scene[data-scene="4"]{object-position:100% center}
.milestone-art{height:220px;overflow:hidden;border-radius:55px 8px 55px 8px;margin-bottom:25px}
.milestone-art img{width:100%;height:100%;object-fit:cover;object-position:80% center}
.timeline-enhanced .milestone-art{display:none}
.journey:not(.timeline-enhanced) .timeline-gallery{display:none}
@media(prefers-reduced-motion:reduce){.timeline-gallery,.timeline-gallery .timeline-scene{transition:none;transform:none;scale:1}}
/* A dark, full-section cocoa silhouette changes with the active milestone. */
.journey{background:#1b110d;color:#f9efdf;isolation:isolate;margin-top:-36px;padding-top:120px;padding-bottom:120px}
.journey-stage{position:relative;isolation:isolate}
.journey-visual{position:relative;z-index:1}
.journey-visual h2{position:relative;z-index:2;max-width:470px;text-shadow:0 2px 22px #0009}
.timeline-enhanced .journey-visual{align-self:start;padding-top:42px;position:static}
.timeline-enhanced .journey-details{position:relative;z-index:2;align-self:center;padding:30px 0 30px 28px}
.timeline-enhanced .timeline-gallery{position:absolute;inset:0 -8.14%;height:auto;width:auto;margin:0;border-radius:0;z-index:-2;background:#1b110d;overflow:hidden}
.timeline-enhanced .timeline-gallery:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#1b110d22 0%,#1b110d55 43%,#1b110de8 64%,#1b110df5 100%),linear-gradient(0deg,#1b110d 0%,transparent 20%,transparent 78%,#1b110d99 100%);z-index:2}
.timeline-enhanced .timeline-gallery .timeline-scene{object-fit:cover;object-position:28% center;opacity:0;scale:1.08;transform:translateY(15px);filter:brightness(.85);transition:opacity .85s ease,transform 1.1s ease,scale 1.2s ease}
.timeline-enhanced .timeline-gallery .timeline-scene.is-current{opacity:1;scale:1;transform:translateY(0)}
.timeline-enhanced .timeline-caption{position:absolute;left:0;bottom:75px;max-width:330px;color:#dbc5a8;z-index:2}
.journey .year-navigation button{color:#c9b8a5}
.journey .year-navigation button:hover,.journey .year-navigation button[aria-current]{color:#fff2d8;border-color:#dcaa65}
.journey .timeline-progress{background:#80634766}
.journey .timeline-progress span{background:#dcaa65}
.journey .timeline strong{color:#dfb67a}
.journey .timeline p,.journey .timeline-scroll-hint,.journey .timeline-caption{color:#ddcfbf}
.journey .timeline li{border-color:#74573e}
.journey .timeline h3{color:#fff3e1}
.journey .milestone-art{background:#1b110d;border-radius:4px}
.journey .milestone-art img{object-position:center}
@media(max-width:900px){.journey-stage{gap:30px}.journey{padding-top:90px;padding-bottom:90px}.journey .milestone-art{height:300px}.journey .timeline-caption{margin-top:24px}}
@media(prefers-reduced-motion:reduce){.timeline-enhanced .timeline-gallery .timeline-scene{transition:none;transform:none;scale:1}}

.timeline-enhanced .timeline-gallery .timeline-scene{width:76%;object-fit:contain;object-position:left center;mask-image:linear-gradient(90deg,black 60%,transparent 100%)}.timeline-enhanced .timeline-gallery:after{background:linear-gradient(90deg,#1b110d10 0%,#1b110d20 36%,#1b110dcc 61%,#1b110df5 100%),linear-gradient(0deg,#1b110d 0%,transparent 18%,transparent 72%,#1b110d99 100%)}


/* Timeline title follows the reading column above the years. */
.journey-details>h2{font-size:clamp(2.3rem,3.3vw,3.6rem);margin:0 0 30px;max-width:470px;color:#fff3e1;text-shadow:0 2px 22px #0009}
@media(max-width:900px){.journey-details>h2{margin-bottom:28px}.journey-visual:has(.timeline-gallery){display:none}}