/* ==========================================================================
   Cocoa Powder — warm beige #E8D5B7 · soft cream #F8F3EA · dark cocoa #4B2E25
   Soft display face, bean/pod geometry, ruled panels. Deliberately unlike the green page.
   ========================================================================== */
body.page-cocoa{--ring:var(--cocoa);background:var(--cream);color:var(--cocoa)}
html[lang="en"] body.page-cocoa{--dw:500}
body.page-cocoa h1,body.page-cocoa h2,body.page-cocoa h3{font-variation-settings:"SOFT" 100}
.cc-lead{max-width:52ch;font-size:clamp(1.02rem,1rem + .2vw,1.14rem);line-height:1.8;color:rgba(75,46,37,.86)}

/* Hero */
.cc-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;min-height:100vh;min-height:min(100svh,900px);background:var(--cream);
  padding-top:calc(var(--header-h) + 40px);padding-bottom:clamp(40px,7vw,96px)}
.cc-hero__art{position:absolute;z-index:-1;inset-inline-end:-7vw;top:calc(var(--header-h) - 10px);width:min(64vw,780px);aspect-ratio:1}
.cc-hero__art .art{width:100%;height:100%}
.cc-hero__art .bean ellipse,.cc-hero__art .bean .seam{transform-box:fill-box;transform-origin:center;animation:beanIn 1.5s var(--ease) both;animation-delay:calc(var(--enter-delay,0s) + .2s)}
.cc-hero__art .bean--2 ellipse,.cc-hero__art .bean--2 .seam{animation-delay:calc(var(--enter-delay,0s) + .38s)}
.cc-hero__art .bean--3 ellipse,.cc-hero__art .bean--3 .seam{animation-delay:calc(var(--enter-delay,0s) + .56s)}
@keyframes beanIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.cc-hero__art .bean ellipse{stroke:none}
.cc-hero__art .bean--1 ellipse{fill:var(--cocoa)}
.cc-hero__art .bean--2 ellipse{fill:var(--beige)}
.cc-hero__art .bean--3 ellipse{fill:var(--cocoa-2)}
.cc-hero__art .seam{fill:none;stroke:var(--cream);stroke-width:3;stroke-linecap:round}
.cc-hero__art .bean--2 .seam{stroke:var(--cocoa)}
.cc-hero__copy{position:relative;max-width:min(100%,680px)}
.cc-hero__origin{display:inline-flex;gap:8px;align-items:center;margin-bottom:clamp(14px,2vw,24px);padding:.45em 1.1em;border:1px solid rgba(75,46,37,.4);border-radius:999px;font-size:.86rem;font-weight:600;background:rgba(248,243,234,.7)}
.cc-hero__title{font-size:clamp(3.6rem,.8rem + 12.6vw,12.5rem);line-height:.88;letter-spacing:-.045em}
.cc-hero__title .ln{display:block}
html[lang="zh"] .cc-hero__title,html[lang="ar"] .cc-hero__title{font-size:clamp(3rem,1rem + 9vw,8rem);line-height:1.1}
.cc-hero .cc-lead{margin-top:clamp(20px,3vw,34px)}
.cc-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,36px)}
.cc-hero__note{margin-top:12px;font-size:.84rem;color:rgba(75,46,37,.7)}

/* Types */
.cc-types{background:var(--beige);padding-block:clamp(72px,10vw,150px)}
.cc-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,72px);align-items:end;margin-bottom:clamp(36px,5vw,68px)}
.cc-head h2{font-size:clamp(2.2rem,1rem + 4.4vw,4.8rem);line-height:1;letter-spacing:-.035em}
.cc-head p{max-width:42ch;font-size:1.05rem;color:rgba(75,46,37,.84)}
.cc-types__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,24px)}
.cc-type{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:56px;min-height:clamp(340px,36vw,480px);padding:clamp(26px,3.6vw,56px);transition:transform .7s var(--ease)}
.cc-type--natural{background:var(--cream);color:var(--cocoa);border-start-end-radius:clamp(90px,14vw,220px)}
.cc-type--alk{background:var(--cocoa);color:var(--cream);--ring:var(--cream);border-start-start-radius:clamp(90px,14vw,220px)}
.cc-type__ring{position:absolute;z-index:-1;inset-inline-end:-12%;bottom:-20%;width:64%;aspect-ratio:1;border-radius:50%;transition:transform 1.2s var(--ease)}
.cc-type--natural .cc-type__ring{border:1.5px solid rgba(75,46,37,.24);box-shadow:0 0 0 clamp(14px,2vw,28px) rgba(232,213,183,.5),0 0 0 clamp(15px,2.1vw,29px) rgba(75,46,37,.12)}
.cc-type--alk .cc-type__ring{background:var(--cocoa-2);box-shadow:0 0 0 clamp(14px,2vw,28px) rgba(97,60,48,.45)}
@media (hover:hover){.cc-type:hover{transform:translateY(-6px)}.cc-type:hover .cc-type__ring{transform:scale(1.06)}}
.cc-type__name{font-size:clamp(1.9rem,1rem + 2.9vw,3.4rem);line-height:1.04;letter-spacing:-.025em}
.cc-type__local{display:block;margin-top:8px;font:500 1rem/1.4 var(--sans);opacity:.76}
.cc-type__desc{max-width:40ch;margin-top:18px;font-size:1.04rem;line-height:1.75;opacity:.92}
.cc-type__tag{align-self:flex-start;padding:.5em 1.1em;border:1px solid currentColor;border-radius:999px;font-size:.84rem;font-weight:600}

/* Fat range */
.cc-fat{background:var(--cream);padding-block:clamp(72px,10vw,150px)}
.fat{margin-top:clamp(12px,2vw,28px)}
.fat__labels{list-style:none;display:flex;gap:16px}
.fat__labels li{flex:1 1 0;font:var(--dw) clamp(2.2rem,1rem + 5.6vw,6.6rem)/1 var(--display);letter-spacing:-.035em}
.fat__labels li:first-child{text-align:start}
.fat__labels li:last-child{text-align:end}
.fat__labels li:not(:first-child):not(:last-child){text-align:center}
.fat__rail{position:relative;height:22px;margin-top:clamp(22px,3.4vw,44px)}
.fat__rail::before{content:"";position:absolute;inset-inline:0;top:50%;height:2px;margin-top:-1px;background:rgba(75,46,37,.28)}
.fat__dots{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center}
.fat__dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--cocoa);background:var(--cream)}
.fat__bead{position:absolute;top:50%;inset-inline-start:0;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--cocoa);opacity:0}
.fat.is-in .fat__bead{animation:sweep 2.6s var(--ease-io) .5s both}
@keyframes sweep{0%{inset-inline-start:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{inset-inline-start:calc(100% - 22px);opacity:0}}
.cc-fat__note{margin-top:clamp(28px,4vw,48px);max-width:60ch;font-size:1rem;color:rgba(75,46,37,.8)}

/* Colour categories */
.cc-colors{background:var(--cocoa-3);color:var(--cream);--ring:var(--cream);padding-top:clamp(72px,10vw,150px)}
.cc-colors .cc-head p{color:rgba(248,243,234,.78)}
.tones{list-style:none;display:flex;min-height:clamp(300px,42vw,500px);margin-top:clamp(20px,3vw,40px)}
.tone{position:relative;flex:1 1 0;display:flex;align-items:flex-end;padding:clamp(16px,2vw,30px);background:var(--tone);color:#F8F3EA;transition:flex-grow .9s var(--ease)}
.tone + .tone{border-inline-start:1px solid rgba(248,243,234,.1)}
.tone__name{font:var(--dw) clamp(1.15rem,.8rem + 1.3vw,2.1rem)/1.1 var(--display);letter-spacing:-.015em}
@media (hover:hover){.tones:hover .tone{flex-grow:.85}.tones .tone:hover{flex-grow:2.6}}
.cc-colors__note{padding-block:16px 22px;font-size:.84rem;color:rgba(248,243,234,.62)}

/* Certifications */
.cc-certs{background:var(--beige);padding-block:clamp(72px,10vw,140px)}
.cc-certs .certs{margin-top:clamp(8px,2vw,24px)}
.cc-certs .cert-plate__mark{border-color:rgba(75,46,37,.2)}
.cc-certs .cert-plate__word{color:var(--cocoa)}
.cc-certs .cert-plate__mark--word::before{border-color:rgba(75,46,37,.4)}
@media (hover:hover){.cc-certs .cert-plate:hover .cert-plate__mark{border-color:var(--cocoa)}}

/* E-catalog */
.cc-catalog{background:var(--cream);padding-block:clamp(56px,8vw,120px)}
.cc-catalog__panel{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:end;padding:clamp(32px,6vw,88px);background:var(--cocoa);color:var(--cream);--ring:var(--cream);border-start-end-radius:clamp(100px,18vw,280px)}
.cc-catalog__art{position:absolute;z-index:-1;inset-inline-end:-6%;top:-24%;width:min(60%,520px);aspect-ratio:1}
.cc-catalog__art .art{width:100%;height:100%}
.cc-catalog .bean ellipse{fill:rgba(232,213,183,.07);stroke:rgba(232,213,183,.45);stroke-width:1.2}
.cc-catalog .bean--2 ellipse{fill:rgba(232,213,183,.14)}
.cc-catalog .seam{fill:none;stroke:rgba(232,213,183,.5);stroke-width:1.5;stroke-linecap:round}
.cc-catalog h2{font-size:clamp(2.4rem,1rem + 5vw,5.4rem);line-height:.98;letter-spacing:-.035em}
.cc-catalog p{max-width:44ch;margin-top:16px;color:rgba(248,243,234,.84)}
.cc-catalog__act{display:grid;gap:12px;justify-items:start}
.cc-catalog__note{font-size:.84rem;color:rgba(248,243,234,.7)}

@media (max-width:1024px){
  .cc-head,.cc-catalog__panel{grid-template-columns:1fr}
  .cc-hero__art{width:min(92vw,560px);inset-inline-end:-18vw;opacity:.9}
  .cc-hero{align-items:flex-end}
}
@media (max-width:760px){
  .cc-types__grid{grid-template-columns:1fr}
  .cc-type{min-height:300px}
  .tones{flex-direction:column;min-height:0}
  .tone{flex:none;min-height:84px;align-items:center}
  .tone + .tone{border-inline-start:0;border-top:1px solid rgba(248,243,234,.1)}
  .fat__labels{flex-direction:column;gap:6px}
  .fat__labels li,.fat__labels li:first-child,.fat__labels li:last-child{text-align:start}
  .fat__rail{margin-top:18px}
  .cc-hero__actions .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.cc-hero__art .bean ellipse,.cc-hero__art .bean .seam{animation:none}.fat__bead{display:none}}