/* ==========================================================================
   Spices & Agriculture — emerald #174D36 · white #FFFFFF · gold #C9A45C
   Layered surfaces, botanical geometry (lens/leaf forms), specimen-label panels.
   ========================================================================== */
body.page-spices{--ring:var(--em);--dome:clamp(44px,6vw,92px);--em-line:rgba(23,77,54,.18);background:#fff;color:var(--em)}

/* Hero: emerald field, tonal layers, gold geometry */
.sp-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--em);color:#fff;--ring:#fff;
  padding-top:calc(var(--header-h) + clamp(48px,9vw,128px));padding-bottom:calc(var(--dome) + clamp(72px,10vw,150px))}
.sp-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(70% 90% at 88% 8%,var(--em-2),transparent 70%),radial-gradient(50% 60% at 0% 100%,var(--em-3),transparent 75%)}
.sp-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,transparent 50%,rgba(16,58,40,.5))}
.sp-hero__geo{position:absolute;z-index:-1;inset-inline-end:-14vw;top:50%;width:min(80vw,860px);aspect-ratio:1;color:rgba(201,164,92,.5);transform:translateY(-46%);animation:geoIn 2.4s var(--ease) both;animation-delay:calc(var(--enter-delay,0s) + .25s)}
.sp-hero__geo .art{width:100%;height:100%}
@keyframes geoIn{from{opacity:0;transform:translateY(-46%) rotate(-24deg) scale(.9)}to{opacity:1;transform:translateY(-46%)}}
.sp-hero__inner{position:relative;display:grid;gap:clamp(26px,4vw,52px)}
.sp-hero__title{max-width:12ch;font-size:clamp(3rem,1rem + 7.8vw,8.8rem);line-height:.95;letter-spacing:-.035em;color:#fff}
html[lang="zh"] .sp-hero__title,html[lang="ar"] .sp-hero__title{max-width:none;font-size:clamp(2.6rem,1rem + 6vw,6.6rem);line-height:1.15}
.sp-hero__lead{max-width:50ch;font-size:clamp(1.05rem,1rem + .4vw,1.3rem);line-height:1.7;color:rgba(255,255,255,.84)}
.sp-hero__actions{display:flex;flex-wrap:wrap;gap:12px}

/* Body rises over the hero with a domed edge and a fine gold line */
.sp-body{position:relative;margin-top:calc(-1 * var(--dome));padding-top:var(--dome);background:#fff;border-radius:50% 50% 0 0 / var(--dome) var(--dome) 0 0}
.sp-body::before{content:"";position:absolute;inset:0 0 auto 0;height:calc(var(--dome) + 1px);border-radius:inherit;border-top:1px solid rgba(201,164,92,.85);pointer-events:none}
.sp-layout{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr);gap:clamp(28px,5vw,88px);padding-bottom:clamp(56px,8vw,112px)}

/* Sticky range index */
.sp-index{position:sticky;top:calc(var(--header-h) + 36px);align-self:start;padding-top:clamp(28px,4vw,56px)}
.sp-index__title{margin-bottom:12px;font-size:.82rem;font-weight:600;color:rgba(23,77,54,.66)}
.sp-index ul{list-style:none;border-inline-start:1px solid var(--em-line)}
.sp-index a{position:relative;display:block;padding-block:8px;padding-inline-start:18px;font-size:.92rem;color:rgba(23,77,54,.7);text-decoration:none;transition:color .3s,padding-inline-start .45s var(--ease)}
.sp-index a::before{content:"";position:absolute;inset-inline-start:-1px;top:0;bottom:0;width:2px;background:var(--gold);transform:scaleY(0);transition:transform .45s var(--ease)}
.sp-index a:hover{color:var(--em)}
.sp-index a.is-active{padding-inline-start:26px;font-weight:600;color:var(--em)}
.sp-index a.is-active::before{transform:scaleY(1)}

/* Product chapters */
.sp-item{position:relative;overflow:hidden;padding-block:clamp(40px,6vw,88px);border-top:1px solid var(--em-line)}
.sp-item:first-child{border-top:0}
.sp-item__ghost{position:absolute;z-index:0;inset-inline-start:-.03em;top:clamp(10px,2.4vw,32px);font:var(--dw) clamp(3.4rem,9vw,8rem)/.85 var(--display);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(23,77,54,.16);white-space:nowrap;pointer-events:none;user-select:none}
.sp-item__head,.sp-item__grid{position:relative;z-index:1}
.sp-item__head{padding-top:clamp(24px,4vw,56px)}
.sp-item__origin{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;font-size:.95rem;font-weight:600;color:var(--em)}
.sp-item__origin::before{content:"";width:11px;height:11px;border-radius:0 100% 0 100%;background:var(--gold);transform:rotate(-8deg)}
.sp-item__name{font-size:clamp(2.4rem,1rem + 4.6vw,5.4rem);line-height:1;letter-spacing:-.03em;color:var(--em)}
.sp-item__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(26px,5vw,72px);align-items:start;margin-top:clamp(22px,3vw,40px)}
.sp-item:nth-child(even) .specimen{order:-1}
.sp-item__desc{max-width:56ch;font-size:clamp(1.02rem,1rem + .2vw,1.14rem);line-height:1.8;color:rgba(23,77,54,.86)}
.sp-item__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.sp-item .btn--wa{--b-bg:transparent;--b-bd:rgba(23,77,54,.4);--b-fg:var(--em);--b-fill:var(--em);--b-fg-h:#fff}

/* Specimen label: a double-ruled information panel */
.specimen{position:relative;padding:clamp(24px,2.8vw,38px);background:#fff;border:1px solid var(--em);outline:1px solid rgba(201,164,92,.85);outline-offset:-9px;box-shadow:14px 14px 0 -2px rgba(23,77,54,.06)}
.specimen__title{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid rgba(201,164,92,.7);font:var(--dw) 1.25rem/1.2 var(--display);color:var(--em)}
.specimen__list{margin:0}
.specimen__list > div{display:grid;grid-template-columns:minmax(92px,.42fr) minmax(0,1fr);gap:14px;padding:12px 0;border-top:1px dotted rgba(23,77,54,.3)}
.specimen__list > div:first-child{border-top:0}
.specimen__list dt{font-size:.82rem;font-weight:600;color:rgba(23,77,54,.64)}
.specimen__list dd{margin:0;font-size:.98rem;line-height:1.5;color:var(--em)}
.specimen__list a{font-weight:600;text-decoration:none;border-bottom:1px solid var(--gold)}
.specimen__list a:hover{background:rgba(201,164,92,.18)}

/* Specifications note */
.sp-spec{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,64px);align-items:start;margin-top:clamp(24px,4vw,56px);padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--em)}
.sp-spec h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem);color:var(--em)}
.sp-spec p{max-width:60ch;color:rgba(23,77,54,.84);font-size:1.04rem}

/* Bridge to the cocoa world */
.sp-bridge{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px;align-items:end;margin-top:clamp(40px,6vw,88px);padding:clamp(30px,5vw,72px);background:var(--cocoa);color:var(--cream);--ring:var(--cream);border-start-end-radius:clamp(80px,14vw,220px)}
.sp-bridge__art{position:absolute;z-index:-1;inset-inline-end:-8%;top:-18%;width:min(70%,520px);aspect-ratio:1}
.sp-bridge__art .art{width:100%;height:100%}
.sp-bridge .bean ellipse{fill:rgba(232,213,183,.08);stroke:rgba(232,213,183,.5);stroke-width:1.2}
.sp-bridge .bean--2 ellipse{fill:rgba(232,213,183,.16)}
.sp-bridge .seam{fill:none;stroke:rgba(232,213,183,.55);stroke-width:1.5;stroke-linecap:round}
.sp-bridge h2{font-size:clamp(1.8rem,1.2rem + 2.4vw,3.2rem);line-height:1.05;color:var(--cream)}
.sp-bridge p{margin-top:12px;max-width:46ch;color:rgba(248,243,234,.84)}
.sp-bridge__cta{justify-self:start}

/* Supplier band */
.sp-supplier{background:var(--em);color:#fff;--ring:#fff;padding-block:clamp(64px,8vw,112px);border-top:1px solid rgba(201,164,92,.7)}
.sp-supplier__inner{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:end}
.sp-supplier h2{font-size:clamp(1.9rem,1.2rem + 2.8vw,3.6rem);line-height:1.04}
.sp-supplier p{max-width:52ch;margin-top:14px;color:rgba(255,255,255,.82)}
.sp-supplier__act{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start}

@media (max-width:1024px){
  .sp-layout{grid-template-columns:1fr}
  .sp-index{position:static;padding-top:clamp(24px,4vw,40px)}
  .sp-index ul{display:flex;flex-wrap:wrap;gap:8px;border:0}
  .sp-index a,.sp-index a.is-active{padding:7px 14px;border:1px solid var(--em-line);border-radius:999px;font-size:.88rem}
  .sp-index a::before{display:none}
  .sp-index a.is-active{background:var(--em);border-color:var(--em);color:#fff}
  .sp-item__grid,.sp-spec,.sp-bridge,.sp-supplier__inner{grid-template-columns:1fr}
  .sp-item:nth-child(even) .specimen{order:0}
  .sp-hero__geo{inset-inline-end:-30vw;opacity:.8}
}
@media (max-width:560px){
  .specimen__list > div{grid-template-columns:1fr;gap:2px}
  .sp-item__actions .btn,.sp-hero__actions .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.sp-hero__geo{animation:none;opacity:1}}