/* Nepal landing: dark green campaign look. Montserrat is self-hosted (see styles.css for the other fonts). */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 900;font-display:swap;src:url(assets/fonts/montserrat-latin.woff2) format("woff2")}
:root{
  --np-bg:#F4F8F2; --np-bg2:#F4F8F2; --np-card:#fff; --np-card-on:#EAF8EE; --np-line:#D5E4D8;
  --np-green:#3DD368; --np-green-h:#5EE184; --np-text:#33505A; --np-muted:#5F7580; --np-white:#fff; --np-ink:#182D3A; --np-forest:#0E3729; --np-paper:#E2F4E8; --np-red:#E0342B;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.np{margin:0;background:var(--np-bg);color:var(--np-text);font-family:Montserrat,Inter,system-ui,sans-serif;min-height:100vh;min-height:100dvh}
.np a{color:var(--np-green)}
.np a:hover{color:var(--np-green-h)}
.np :focus-visible{outline:2px solid var(--np-green);outline-offset:3px}
.np button{font-family:inherit}
.np [id]{scroll-margin-top:72px}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px}
.eyebrow-np{font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--np-muted);text-transform:uppercase}
.np h1,.np h2{margin:0;color:var(--np-white)}
.np h2{font-size:clamp(32px,4vw,52px);line-height:1.05;font-weight:800;letter-spacing:-.02em}
.np h2 em,.np h1 em{font-style:normal;color:var(--np-green)}
.np p{margin:0}

/* buttons */
.np .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:6px;background:var(--np-green);color:var(--np-bg);font:700 13px/1 Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:0;margin:0;box-shadow:none;cursor:pointer;transition:background-color .22s ease}
.np .btn:hover{background:var(--np-green-h);color:var(--np-bg)}
.np .btn:active{transform:none;box-shadow:none}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:6px;border:1px solid var(--np-line);color:var(--np-white)!important;font:600 13px/1 Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:border-color .22s ease}
.btn-ghost:hover{border-color:var(--np-green)}
.np .chip{display:inline-block;align-self:auto;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--np-line);background:transparent;color:var(--np-text);font:600 12px/1 Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:border-color .22s ease,color .22s ease}
.np .chip:hover{border-color:var(--np-green);color:var(--np-white)}
.np .chip.is-on{border-color:var(--np-green);color:var(--np-bg);background:var(--np-green)}

/* nav */
.np-nav{position:sticky;top:0;z-index:10;background:rgba(10,28,19,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--np-line)}
.np-nav .wrap{padding-top:14px;padding-bottom:14px;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
.np-brand{font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--np-white)!important;text-decoration:none}
.np-nav nav{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;font-size:11px;font-weight:600;letter-spacing:.14em}
.np-nav nav a{color:var(--np-text);text-decoration:none}
.np-nav nav a:hover{color:var(--np-green)}
.np-nav nav a.btn{min-height:40px;padding:0 18px;font-size:11px;color:var(--np-bg)}
.np-nav nav a.btn:hover{color:var(--np-bg)}

/* photo sections */
.bg-photo{background-color:var(--np-bg);background-size:cover;background-position:center;background-repeat:no-repeat}
.bg-hero{background-image:linear-gradient(0deg,rgba(10,28,19,.95) 0%,rgba(10,28,19,0) 40%),linear-gradient(90deg,rgba(10,28,19,.92) 0%,rgba(10,28,19,.65) 50%,rgba(10,28,19,.2) 100%),url(assets/nepal/hero.webp)}
.bg-ctx{background-image:linear-gradient(90deg,rgba(10,28,19,.94) 0%,rgba(10,28,19,.78) 55%,rgba(10,28,19,.55) 100%),url(assets/nepal/context.webp)}
.bg-coffee{background-position:center right;background-image:linear-gradient(90deg,rgba(10,28,19,.95) 0%,rgba(10,28,19,.8) 40%,rgba(10,28,19,.15) 100%),url(assets/nepal/coffee.webp)}
@media (max-width:760px){
  .bg-hero{background-image:linear-gradient(rgba(10,28,19,.8),rgba(10,28,19,.92)),url(assets/nepal/hero.webp)}
  .bg-ctx{background-image:linear-gradient(rgba(10,28,19,.88),rgba(10,28,19,.94)),url(assets/nepal/context.webp)}
  .bg-coffee{background-image:linear-gradient(rgba(10,28,19,.82),rgba(10,28,19,.94)),url(assets/nepal/coffee.webp)}
}

/* hero */
.hero{min-height:88vh;display:flex;align-items:center}
.hero .wrap{padding-top:120px;padding-bottom:120px;display:flex;flex-wrap:wrap;gap:56px;align-items:flex-end;justify-content:space-between}
.hero-l{flex:1 1 460px;max-width:640px;min-width:0;display:flex;flex-direction:column;gap:28px}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pill{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--np-green);border:1px solid var(--np-line);border-radius:999px;padding:6px 12px}
.np h1{font-size:clamp(44px,6vw,80px);line-height:1.02;font-weight:900;letter-spacing:-.03em}
.hero-p{max-width:46ch;font-size:17px;line-height:1.6}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.facts{display:flex;flex-wrap:wrap;gap:40px;padding-top:12px}
.facts b{display:block;font-size:40px;font-weight:800;line-height:1;color:var(--np-white)}
.facts b.g{color:var(--np-green)}
.facts span{display:block;font-size:12px;margin-top:8px;color:var(--np-muted)}
.hero-r{flex:0 1 400px;min-width:0}
.cd{background:rgba(10,28,19,.75);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--np-line);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.cd-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cd-u{text-align:center;background:var(--np-card);border:1px solid var(--np-line);border-radius:10px;padding:12px 4px}
.cd-u b{display:block;font-size:30px;font-weight:800;color:var(--np-white);line-height:1;font-variant-numeric:tabular-nums}
.cd-u span{display:block;font-size:10px;letter-spacing:.14em;color:var(--np-muted);margin-top:6px}

/* species */
.sec-specie{background:var(--np-bg2);padding:112px 0}
.sec-specie .wrap{display:flex;flex-direction:column;gap:40px}
.sec-head{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:flex-end;justify-content:space-between}
.sec-head>div:first-child{display:flex;flex-direction:column;gap:16px;max-width:640px}
.sec-head p{font-size:15px;line-height:1.55;max-width:48ch}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.sp-body{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
.sp-grid{flex:999 1 600px;min-width:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.sp-card{position:relative;display:flex;flex-direction:column;background:var(--np-card);border:1px solid var(--np-line);border-radius:14px;padding:0;overflow:hidden;cursor:pointer;text-align:left;color:inherit;font:inherit;transition:border-color .22s ease,background-color .22s ease}
.sp-card:hover{border-color:var(--np-green)}
.sp-card.is-on{border-color:var(--np-green);background:var(--np-card-on)}
.sp-img{position:relative;display:flex;align-items:flex-end;justify-content:center;aspect-ratio:4/3;background:var(--np-paper);padding-top:16px}
.sp-img img{display:block;height:88%;width:auto;object-fit:contain}
.sp-disc{position:absolute;top:12px;left:12px;background:var(--np-green);color:var(--np-bg);font-size:12px;font-weight:800;padding:5px 9px;border-radius:6px}
.sp-info{display:flex;flex-direction:column;gap:8px;padding:18px 18px 20px}
.sp-role{font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--np-green);text-transform:uppercase}
.sp-name{font-size:18px;font-weight:800;color:var(--np-white)}
.sp-price{display:flex;gap:10px;align-items:baseline}
.sp-price b{font-size:18px;font-weight:700;color:var(--np-white)}
.sp-price s{font-size:13px;color:var(--np-muted)}
.sp-side{flex:1 1 340px;min-width:0;position:sticky;top:88px;background:var(--np-card);border:1px solid var(--np-line);border-radius:14px;overflow:hidden}
.sp-side-img{aspect-ratio:16/10;background:var(--np-paper);display:flex;align-items:flex-end;justify-content:center;padding-top:20px;border-bottom:1px solid var(--np-line)}
.sp-side-img img{display:block;height:90%;width:auto;object-fit:contain}
.sp-side-b{padding:24px;display:flex;flex-direction:column;gap:18px}
.sp-side-t{display:flex;flex-direction:column;gap:8px}
.sp-side-t .k{font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--np-green);text-transform:uppercase}
.sp-side-t .n{font-size:28px;font-weight:800;color:var(--np-white);line-height:1.1}
.sp-side-t p{font-size:14px;line-height:1.55}
.qty-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;border-top:1px solid var(--np-line);border-bottom:1px solid var(--np-line);font-size:13px}
.qty-ctl{display:flex;align-items:center;gap:10px}
.step-b{width:44px;height:44px;border-radius:6px;border:1px solid var(--np-line);background:var(--np-bg);color:var(--np-white);font:700 20px/1 Montserrat,sans-serif;cursor:pointer;padding:0}
.step-b:hover{border-color:var(--np-green)}
.qty-n{min-width:32px;text-align:center;font-size:20px;font-weight:800;color:var(--np-white)}
.tot{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.tot>div{display:flex;flex-direction:column;gap:6px}
.tot>div:last-child{text-align:right}
.tot small{font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--np-muted)}
.tot .big{font-size:34px;font-weight:800;color:var(--np-white);line-height:1}
.tot .save{font-size:18px;font-weight:800;color:var(--np-green)}
.sp-side .btn{width:100%}
.sp-more{font-size:12px;text-align:center}

/* context */
.sec-ctx{padding:128px 0}
.sec-ctx .wrap{display:flex;flex-wrap:wrap;gap:56px}
.ctx-l{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:20px}
.ctx-l>p{font-size:15px;line-height:1.55;max-width:44ch}
.accs{display:flex;flex-direction:column;margin-top:12px;border-bottom:1px solid var(--np-line)}
.acc{width:100%;display:flex;gap:24px;align-items:baseline;padding:24px 0;background:transparent;border:0;border-top:1px solid var(--np-line);color:var(--np-white);font:inherit;text-align:left;cursor:pointer}
.acc:hover .acc-t{color:var(--np-green)}
.acc-n{font-size:12px;font-weight:700;color:var(--np-muted);letter-spacing:.1em}
.acc-t{flex:1;font-size:19px;font-weight:800;transition:color .22s ease}
.acc-s{font-size:22px;color:var(--np-green)}
.acc-b{padding:0 0 24px 52px;font-size:15px;line-height:1.6;max-width:52ch}
.ctx-r{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:14px;justify-content:center}
.tag-np{border:1px solid var(--np-line);border-radius:10px;background:rgba(16,38,25,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:22px;transition:border-color .22s ease}
.tag-np:hover{border-color:var(--np-green)}
.tag-np .k{font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--np-green)}
.tag-np .t{font-size:18px;font-weight:800;color:var(--np-white);margin-top:8px}
.tag-np .d{font-size:14px;line-height:1.55;margin-top:6px;color:var(--np-muted)}

/* coffee */
.sec-coffee{padding:160px 0}
.sec-coffee .wrap{display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.coffee-in{flex:0 1 620px;min-width:0;display:flex;flex-direction:column;gap:20px}
.coffee-in>p{font-size:15px;line-height:1.6;max-width:46ch}
.coffee-box{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:20px;border:1px solid var(--np-line);border-radius:10px;background:rgba(16,38,25,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.coffee-box>div{flex:1 1 160px}
.coffee-box .k{font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--np-green)}
.coffee-box .p{display:flex;gap:10px;align-items:baseline;margin-top:6px}
.coffee-box .p b{font-size:26px;font-weight:800;color:var(--np-white)}
.coffee-box .p s{font-size:14px;color:var(--np-muted)}

/* final cta + footer */
.sec-plant{padding:128px 0}
.sec-plant .wrap{display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.sec-plant h2{font-size:clamp(36px,5.5vw,72px);line-height:1.02;font-weight:900;letter-spacing:-.03em;max-width:16ch}
.sec-plant p{font-size:17px;line-height:1.6;max-width:46ch}
.cd-inline{font-size:13px;font-weight:600;color:var(--np-muted);font-variant-numeric:tabular-nums}
.np-ftr{border-top:1px solid var(--np-line)}
.np-ftr .wrap{padding-top:32px;padding-bottom:32px;display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;font-size:12px;color:var(--np-muted)}
.np-ftr b{font-weight:800;letter-spacing:.18em;color:var(--np-white)}

@media (max-width:760px){
  .sec-specie,.sec-ctx,.sec-plant{padding:72px 0}
  .sec-coffee{padding:96px 0}
  .hero .wrap{padding-top:72px;padding-bottom:72px}
  .sp-side{position:static}
  .facts{gap:28px}
  .acc-b{padding-left:0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.np *{transition:none!important}}

/* ---- lighter look (Campagna Nepal): photo sections with soft overlays, pale green and white elsewhere ---- */
.np .btn,.np .btn:hover{color:var(--np-ink)}
.np .btn{border-radius:999px;font-weight:800}
.btn-ghost{border-radius:999px;border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.12)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.25)}
.np .chip{border-radius:999px;color:var(--np-ink);background:#fff}
.np .chip:hover{color:var(--np-ink)}
.np .chip.is-on{color:var(--np-ink)}
.np a{color:#1E9E48}
.np a:hover{color:var(--np-forest)}
.np h2{color:var(--np-ink);font-weight:900;letter-spacing:-.025em}
.np h2 em,.np h1 em{color:#1E9E48}
.eyebrow-np{color:var(--np-muted)}

.np-nav{background:rgba(255,255,255,.88);border-bottom:1px solid var(--np-line)}
.np-brand{color:var(--np-forest)!important}
.np-nav nav a{color:var(--np-ink)}
.np-nav nav a:hover{color:#1E9E48}
.np-nav nav a.btn,.np-nav nav a.btn:hover{color:var(--np-ink)}

/* photo sections: white copy over a lighter, warmer overlay */
.bg-hero{background-image:linear-gradient(0deg,rgba(14,55,41,.55) 0%,rgba(14,55,41,0) 45%),linear-gradient(90deg,rgba(14,55,41,.68) 0%,rgba(14,55,41,.4) 55%,rgba(14,55,41,.05) 100%),url(assets/nepal/hero.webp)}
.bg-ctx{background-image:linear-gradient(90deg,rgba(14,55,41,.72) 0%,rgba(14,55,41,.5) 55%,rgba(14,55,41,.25) 100%),url(assets/nepal/context.webp)}
.bg-coffee{background-image:linear-gradient(90deg,rgba(14,55,41,.7) 0%,rgba(14,55,41,.45) 45%,rgba(14,55,41,0) 100%),url(assets/nepal/coffee.webp)}
@media (max-width:760px){
  .bg-hero{background-image:linear-gradient(rgba(14,55,41,.5),rgba(14,55,41,.7)),url(assets/nepal/hero.webp)}
  .bg-ctx{background-image:linear-gradient(rgba(14,55,41,.62),rgba(14,55,41,.75)),url(assets/nepal/context.webp)}
  .bg-coffee{background-image:linear-gradient(rgba(14,55,41,.58),rgba(14,55,41,.75)),url(assets/nepal/coffee.webp)}
}
.hero .eyebrow-np,.sec-ctx .eyebrow-np,.sec-coffee .eyebrow-np{color:#E2F8E8}
.hero h1,.sec-ctx h2,.sec-coffee h2{color:#fff}
.hero h1 em,.sec-ctx h2 em,.sec-coffee h2 em{color:var(--np-green)}
.hero-p,.ctx-l>p,.coffee-in>p{color:#fff}
.pill{color:var(--np-ink);background:var(--np-green);border-color:var(--np-green)}
.facts b{color:#fff}.facts b.g{color:var(--np-green)}
.facts span{color:#E2F8E8}
.cd{background:rgba(255,255,255,.92);border:0;border-radius:20px}
.cd-u{background:var(--np-paper);border:0}
.cd-u b{color:var(--np-ink)}
.cd .eyebrow-np{color:var(--np-forest)}

/* species */
.sec-specie{background:var(--np-bg)}
.sec-head p{color:var(--np-text)}
.sp-card{border-radius:20px;box-shadow:0 1px 0 rgba(24,45,58,.04)}
.sp-card.is-on{border-color:var(--np-green);box-shadow:0 0 0 2px var(--np-green)}
.sp-name{color:var(--np-ink)}
.sp-role{color:#1E9E48}
.sp-price b{color:var(--np-ink)}
.sp-disc{background:#fff;color:var(--np-red);box-shadow:0 1px 4px rgba(24,45,58,.18)}
.sp-side{border-radius:20px;background:#fff}
.sp-side-t .k{color:#1E9E48}
.sp-side-t .n,.qty-n,.tot .big{color:var(--np-ink)}
.step-b{background:#fff;color:var(--np-ink);border-radius:999px}
.tot .save{color:#1E9E48}
.sp-more{color:var(--np-forest)}

/* context */
.acc,.acc-n{color:#fff}.acc-n{opacity:.8}
.acc,.accs{border-color:rgba(255,255,255,.35)}
.acc:hover .acc-t{color:var(--np-green)}
.acc-s{color:var(--np-green)}
.acc-b{color:#fff}
.tag-np{background:rgba(255,255,255,.92);border:0;border-radius:20px}
.tag-np .k{color:#1E9E48}
.tag-np .t{color:var(--np-ink)}
.tag-np .d{color:var(--np-text)}

/* coffee */
.coffee-box{background:rgba(255,255,255,.94);border:0;border-radius:20px}
.coffee-box .k{color:#1E9E48}
.coffee-box .p b{color:var(--np-ink)}
.coffee-box .p s{color:var(--np-muted)}

/* final cta + footer */
.sec-plant{background:#E2F8E8}
.sec-plant h2{color:var(--np-ink)}
.sec-plant p{color:var(--np-text)}
.cd-inline{color:var(--np-forest)}
.np-ftr{background:#fff;border-top:1px solid var(--np-line)}
.np-ftr b{color:var(--np-forest)}
.np-ftr span{color:var(--np-muted)}
.np-ftr a{color:var(--np-forest)}

/* ---- smaller, steadier cards: the picture box has a fixed shape, so every tree sits the same way ---- */
.sp-img{aspect-ratio:1/1;padding:0;overflow:hidden}
.sp-img img{position:absolute;left:50%;bottom:0;height:92%;width:auto;transform:translateX(-50%);transform-origin:50% 100%;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.sp-card:hover .sp-img img{animation:sway 1.6s ease-in-out infinite}
.sp-info{padding:12px 14px 14px;gap:5px}
.sp-name{font-size:15px}
.sp-price b{font-size:15px}
.sp-price s{font-size:12px}
.sp-role{font-size:9px}
.sp-disc{top:8px;left:8px;font-size:11px;padding:4px 7px}
.sp-card{transform:perspective(700px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .18s ease-out,border-color .22s ease,box-shadow .22s ease,background-color .22s ease}
.sp-card:hover{box-shadow:0 14px 28px rgba(24,45,58,.14)}
.sp-side-img{position:relative;overflow:hidden;aspect-ratio:16/9}
.sp-side-img img{position:absolute;left:50%;bottom:0;height:92%;width:auto;transform:translateX(-50%)}
.sp-side-img img.pop{animation:popin .55s cubic-bezier(.3,1.5,.5,1) both}
@keyframes sway{0%,100%{transform:translateX(-50%) rotate(-1.6deg)}50%{transform:translateX(-50%) rotate(1.6deg)}}
@keyframes popin{0%{transform:translateX(-50%) scale(.6) translateY(20px);opacity:0}100%{transform:translateX(-50%) scale(1);opacity:1}}

/* ---- movement ---- */
.progress{position:fixed;left:0;top:0;right:0;height:3px;background:var(--np-green);transform:scaleX(0);transform-origin:0 50%;z-index:20}
.js [data-rv]{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js [data-rv].in{opacity:1;transform:none}
.js .ctx-r [data-rv]:nth-child(2){transition-delay:.12s}.js .ctx-r [data-rv]:nth-child(3){transition-delay:.24s}
.sp-grid.enter .sp-card{animation:cardin .5s ease both;animation-delay:calc(var(--i,0)*45ms)}
@keyframes cardin{from{opacity:0;transform:translateY(16px)}to{opacity:1}}
.hero-l>*{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.hero-l>*:nth-child(2){animation-delay:.1s}.hero-l>*:nth-child(3){animation-delay:.2s}.hero-l>*:nth-child(4){animation-delay:.3s}.hero-l>*:nth-child(5){animation-delay:.4s}
.hero-r{animation:rise .9s .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.np .btn{transition:background-color .22s ease,transform .2s ease,box-shadow .2s ease}
.np .btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(24,45,58,.22)}
.hero .btn{animation:pulse 2.6s 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(61,211,104,.55)}60%{box-shadow:0 0 0 14px rgba(61,211,104,0)}}
.cd-u b.flip{animation:flip .35s ease}
@keyframes flip{0%{transform:translateY(-6px);opacity:.2}100%{transform:none;opacity:1}}
.qty-n.bump{animation:bump .3s ease}
@keyframes bump{40%{transform:scale(1.35)}}
.slide{animation:slidein .4s ease both}
@keyframes slidein{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.acc-w{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.acc-w.open{grid-template-rows:1fr}
.acc-w>div{overflow:hidden}
.acc-b{padding-top:0}
.acc-s{display:inline-block;transition:transform .3s ease}
.acc-s.open{transform:rotate(45deg)}
.tag-np{transition:border-color .22s ease,transform .25s ease,box-shadow .25s ease}
.tag-np:hover{transform:translateX(8px);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.marquee{overflow:hidden;background:var(--np-forest);padding:16px 0;white-space:nowrap}
.marquee-t{display:inline-flex;align-items:center;gap:28px;animation:marq 38s linear infinite;padding-left:28px}
.marquee-t span{font-size:13px;font-weight:800;letter-spacing:.22em;color:#E2F8E8}
.marquee-t i{width:8px;height:8px;border-radius:50%;background:var(--np-green);flex:none}
.marquee:hover .marquee-t{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
@media (max-width:760px){.sp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tag-np:hover{transform:none}}
@media (prefers-reduced-motion:reduce){
  .js [data-rv]{opacity:1;transform:none}
  .sp-grid.enter .sp-card,.hero-l>*,.hero-r,.hero .btn,.marquee-t,.sp-card:hover .sp-img img{animation:none!important}
}

/* ---- header design: same sticky behaviour, now a floating rounded bar ---- */
.np-nav{background:transparent;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:12px 16px;pointer-events:none}
.np-nav .wrap{pointer-events:auto;max-width:1160px;padding:8px 10px 8px 22px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:999px;box-shadow:0 8px 30px rgba(24,45,58,.14);gap:8px 24px}
.np-brand{display:inline-flex;align-items:center;gap:10px}
.np-brand::before{content:"";width:12px;height:12px;border-radius:50% 50% 50% 0;background:var(--np-green);transform:rotate(-45deg);flex:none}
.np-nav nav{gap:4px}
.np-nav nav a:not(.btn){padding:10px 16px;border-radius:999px;transition:background-color .2s ease,color .2s ease}
.np-nav nav a:not(.btn):hover{background:var(--np-paper);color:var(--np-forest)}
.np-nav nav a.btn{margin-left:6px;min-height:44px}
@media (max-width:760px){.np-nav{padding:8px}.np-nav .wrap{border-radius:26px;padding:10px 12px 10px 16px;justify-content:space-between}.np-nav nav{flex-wrap:wrap}.np-nav nav a:not(.btn){padding:8px 10px}}

/* square bar and the real logo */
.np-nav .wrap{border-radius:4px;padding:6px 10px 6px 14px}
.np-nav nav a:not(.btn),.np-nav nav a.btn{border-radius:4px}
.np-brand::before{content:none}
.np-brand img{display:block;height:44px;width:auto}
.np-brand span{font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--np-forest);padding-left:12px;border-left:1px solid var(--np-line)}
@media (max-width:760px){.np-nav .wrap{border-radius:4px}.np-brand img{height:38px}}

/* header: not pinned, no bar. It sits on the hero photo and blends in with it */
.np-nav{position:absolute;left:0;right:0;top:0;z-index:5;padding:0;background:transparent;pointer-events:auto}
.np-nav .wrap{max-width:1200px;padding:22px 24px;background:transparent;box-shadow:none;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.np-brand img{height:52px}
.np-brand span{color:#fff;border-left-color:rgba(255,255,255,.5)}
.np-nav nav a:not(.btn){color:#fff;text-shadow:0 1px 8px rgba(14,55,41,.5)}
.np-nav nav a:not(.btn):hover{background:rgba(255,255,255,.16);color:#fff}
@media (max-width:760px){.np-nav .wrap{padding:14px 16px}.np-brand img{height:40px}.hero .wrap{padding-top:150px}}

/* visible break between the people photo and the coffee photo */
.divider{height:28px;background:var(--np-paper)}


/* coffee: text on the left, product card on the right */
.sec-coffee .wrap{justify-content:space-between;gap:48px}
.coffee-card{flex:0 1 460px;min-width:0;background:#fff;border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:22px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.cc-top{display:flex;align-items:center;gap:24px}
.cc-top img{flex:0 0 110px;width:110px;height:auto;display:block;animation:sway2 4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes sway2{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.cc-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.cc-info h3{margin:0;font-size:26px;font-weight:800;color:var(--np-ink)}
.cc-where{font-size:14px;font-weight:600;color:var(--np-text)}
.cc-price{display:flex;align-items:baseline;gap:10px;margin-top:10px}
.cc-disc{font-size:18px;font-weight:600;color:var(--np-red)}
.cc-price b{font-size:32px;font-weight:600;color:var(--np-ink)}
.cc-list{font-size:13px;color:var(--np-text)}
.np a.cc-btn{display:flex;align-items:center;justify-content:center;min-height:56px;border:2px solid var(--np-green);border-radius:14px;color:var(--np-ink);font-weight:800;font-size:16px;text-decoration:none;transition:background-color .2s ease,transform .2s ease}
.np a.cc-btn:hover{background:var(--np-green);color:var(--np-ink);transform:translateY(-2px)}
@media (max-width:760px){.coffee-card{flex-basis:100%}.cc-top img{flex-basis:84px;width:84px}.cc-price b{font-size:28px}}
@media (prefers-reduced-motion:reduce){.cc-top img{animation:none}}

/* hotspot on the photo: pulsing ring + label, jumps to the species listing */
.hero{position:relative}
.hotspot{position:absolute;right:16%;top:46%;z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none;color:#fff!important;transition:transform .25s ease}
.hotspot:hover{transform:scale(1.06)}
.hs-ring{position:relative;display:block;width:46px;height:46px;border:3px solid #fff;border-radius:50%;box-shadow:0 2px 12px rgba(0,0,0,.35)}
.hs-ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:#fff}
.hs-ring::after{content:"";position:absolute;inset:-3px;border:3px solid #fff;border-radius:50%;animation:hsping 2.2s ease-out infinite}
@keyframes hsping{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.2);opacity:0}}
.hs-label{font-size:14px;font-weight:800;letter-spacing:.02em;text-align:center;text-shadow:0 1px 10px rgba(0,0,0,.7);white-space:nowrap}
@media (max-width:1100px){.hotspot{right:8%;top:auto;bottom:90px}}
@media (max-width:760px){.hotspot{right:50%;transform:translateX(50%);bottom:28px}.hotspot:hover{transform:translateX(50%) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.hs-ring::after{animation:none}}

/* ---- like promo.treedom.net/nepal: condensed uppercase titles, Roboto copy, darker photo hero, logo only on top ---- */
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/anton-latin.woff2) format("woff2")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/roboto-latin.woff2) format("woff2")}
.hero h1,.sec-ctx h2,.sec-coffee h2,.sec-plant h2{font-family:Anton,Impact,"Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.02}
.hero h1{font-size:clamp(48px,5.6vw,76px);color:#fff}
.sec-ctx h2,.sec-coffee h2{font-size:clamp(40px,4.6vw,64px);color:#fff}
.sec-plant h2{font-size:clamp(44px,5.4vw,76px);max-width:14ch}
.hero-p,.ctx-l>p,.coffee-in>p{font-family:Roboto,Montserrat,sans-serif}
.hero-p strong{font-weight:700}

.np-nav .wrap{justify-content:flex-start}
.np-brand img{height:56px}
.hero{min-height:100vh;min-height:100svh}
.bg-hero{background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.28) 55%,rgba(0,0,0,.08) 100%),url(assets/nepal/hero.webp)}
@media (max-width:760px){.bg-hero{background-image:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.6)),url(assets/nepal/hero.webp)}}
.hero .wrap{align-items:center;padding-top:130px;padding-bottom:110px}
.hero-l{gap:20px;max-width:560px}
.hero-flag{display:flex;align-items:center;gap:10px}
.hero-flag img{width:28px;height:28px;border-radius:50%;object-fit:cover;background:#fff}
.hero-flag span{font-family:Anton,Impact,sans-serif;font-size:22px;letter-spacing:.04em;color:#fff}
.hero-p{max-width:none;font-size:17px;line-height:1.55;color:#fff}
.hero-note{margin-top:8px;padding:26px 30px;border-radius:20px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font:400 17px/1.5 Roboto,Montserrat,sans-serif}
.hero-note strong{font-weight:700}
@media (max-width:760px){.hero .wrap{padding-top:110px;padding-bottom:130px}.hero-note{padding:20px 22px}}

/* ---- languages and the longer campaign copy ---- */
.np-nav .wrap{justify-content:space-between}
.langs{display:flex;gap:4px}
.lang{min-width:44px;min-height:44px;padding:0 10px;background:transparent;border:1px solid rgba(255,255,255,.55);border-radius:4px;color:#fff;font:700 12px/1 Montserrat,sans-serif;letter-spacing:.12em;cursor:pointer;text-shadow:0 1px 8px rgba(0,0,0,.4);transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.lang:hover{background:rgba(255,255,255,.2)}
.lang.on{background:var(--np-green);border-color:var(--np-green);color:var(--np-ink);text-shadow:none}
.lang:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hero-l{max-width:640px}
.hero-p{font-size:16px}
.hero-note{font-size:19px}
.sec-head>div:first-child{max-width:720px;gap:14px}
.sec-head p{max-width:62ch;font-size:15px;line-height:1.6}
.sec-head .sp-date{color:var(--np-ink);margin-top:4px}
.ctx-sub{margin:16px 0 0;font:800 13px/1 Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--np-green)}
.ctx-l>p{max-width:56ch}
.tag-np .k{font-size:12px;letter-spacing:.14em;font-weight:800}
.tag-np .d{margin-top:10px;color:var(--np-ink);font-size:15px}
.ctx-r{gap:14px}
.bg-ctx{background-image:linear-gradient(90deg,rgba(14,55,41,.82) 0%,rgba(14,55,41,.62) 55%,rgba(14,55,41,.3) 100%),url(assets/nepal/context.webp)}
@media (max-width:760px){.bg-ctx{background-image:linear-gradient(rgba(14,55,41,.72),rgba(14,55,41,.82)),url(assets/nepal/context.webp)}}

/* ---- cards: names and prices line up across a row, whatever the label wraps to ---- */
.sp-card{height:100%}
.sp-info{flex:1;display:flex}
.sp-role{min-height:2.6em;display:flex;align-items:flex-start}
.sp-name{min-height:2.4em;display:flex;align-items:flex-start}
.sp-price{margin-top:auto}

/* ---- footer drawing: ridge, terraces and trees running into a dark green footer ---- */
.sec-plant{padding-bottom:40px}
.ftr-art{display:block;line-height:0;background:var(--np-paper)}
.ftr-art svg{display:block;width:100%;height:clamp(110px,15vw,220px)}
.ftr-trees use{transform-box:fill-box;transform-origin:50% 100%;animation:treesway 5s ease-in-out infinite}
.ftr-trees use:nth-child(2n){animation-delay:-2s}
@keyframes treesway{0%,100%{rotate:-1.5deg}50%{rotate:1.5deg}}
.np-ftr{background:var(--np-forest);border-top:0}
.np-ftr b{color:#fff}
.np-ftr span{color:#CFEFD9}
.np-ftr a{color:var(--np-green)}
@media (prefers-reduced-motion:reduce){.ftr-trees use{animation:none}}

/* ---- photos melt into each other: each section overlaps the previous one and its photo fades in/out ---- */
.bg-ctx,.bg-coffee{position:relative;isolation:isolate;background-image:none!important;margin-top:-170px;padding-top:calc(128px + 170px)}
.bg-coffee{padding-top:calc(160px + 170px);background-position:center right}
.bg-ctx::before,.bg-coffee::before{content:"";position:absolute;inset:0;z-index:-1;background-size:cover;background-position:inherit;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(transparent 0,#000 240px,#000 calc(100% - 240px),transparent 100%);mask-image:linear-gradient(transparent 0,#000 240px,#000 calc(100% - 240px),transparent 100%)}
.bg-ctx::before{background-image:linear-gradient(90deg,rgba(14,55,41,.82) 0%,rgba(14,55,41,.62) 55%,rgba(14,55,41,.3) 100%),url(assets/nepal/context.webp)}
.bg-coffee::before{background-image:linear-gradient(90deg,rgba(14,55,41,.7) 0%,rgba(14,55,41,.45) 45%,rgba(14,55,41,0) 100%),url(assets/nepal/coffee.webp)}
.bg-ctx>.wrap,.bg-coffee>.wrap{position:relative;z-index:1}
.sec-specie{position:relative;z-index:0}
.sec-plant{margin-top:-170px;padding-top:calc(128px + 170px);position:relative;background:linear-gradient(rgba(226,248,232,0) 0,#E2F8E8 240px)}
@media (max-width:760px){
  .bg-ctx{margin-top:-110px;padding-top:calc(72px + 110px)}
  .bg-coffee{margin-top:-110px;padding-top:calc(96px + 110px)}
  .sec-plant{margin-top:-110px;padding-top:calc(72px + 110px)}
  .bg-ctx::before{background-image:linear-gradient(rgba(14,55,41,.72),rgba(14,55,41,.82)),url(assets/nepal/context.webp)}
  .bg-coffee::before{background-image:linear-gradient(rgba(14,55,41,.58),rgba(14,55,41,.75)),url(assets/nepal/coffee.webp)}
}

/* ---- only the two photos blend; listing and closing keep a clean edge ---- */
.bg-ctx{margin-top:0;padding-top:128px}
.bg-ctx::before{-webkit-mask-image:linear-gradient(#000 0,#000 calc(100% - 240px),transparent 100%);mask-image:linear-gradient(#000 0,#000 calc(100% - 240px),transparent 100%)}
.bg-coffee::before{-webkit-mask-image:linear-gradient(transparent 0,#000 240px,#000 100%);mask-image:linear-gradient(transparent 0,#000 240px,#000 100%)}
.sec-plant{margin-top:0;padding-top:128px;background:#E2F8E8}
@media (max-width:760px){.bg-ctx{padding-top:72px}.sec-plant{margin-top:0;padding-top:72px}}

/* lighter tint on the two photos, shorter and softer blend */
.bg-ctx::before{background-image:linear-gradient(90deg,rgba(14,55,41,.6) 0%,rgba(14,55,41,.42) 55%,rgba(14,55,41,.15) 100%),url(assets/nepal/context.webp);-webkit-mask-image:linear-gradient(#000 0,#000 calc(100% - 160px),transparent 100%);mask-image:linear-gradient(#000 0,#000 calc(100% - 160px),transparent 100%)}
.bg-coffee::before{background-image:linear-gradient(90deg,rgba(14,55,41,.5) 0%,rgba(14,55,41,.28) 45%,rgba(14,55,41,0) 100%),url(assets/nepal/coffee.webp);-webkit-mask-image:linear-gradient(transparent 0,#000 160px,#000 100%);mask-image:linear-gradient(transparent 0,#000 160px,#000 100%)}
@media (max-width:760px){
  .bg-ctx::before{background-image:linear-gradient(rgba(14,55,41,.5),rgba(14,55,41,.62)),url(assets/nepal/context.webp)}
  .bg-coffee::before{background-image:linear-gradient(rgba(14,55,41,.4),rgba(14,55,41,.55)),url(assets/nepal/coffee.webp)}
}

/* true cross-fade: the people photo stays solid underneath while the coffee photo fades in over it */
.bg-ctx::before{-webkit-mask-image:none;mask-image:none}
.bg-ctx{padding-bottom:calc(128px + 170px)}
@media (max-width:760px){.bg-ctx{padding-bottom:calc(72px + 110px)}}

/* fade through black, only between the people photo and the coffee photo */
.bg-ctx,.bg-coffee{margin-top:0}
.bg-ctx{padding-top:128px;padding-bottom:128px}
.bg-coffee{padding-top:160px}
.bg-ctx::before{background-image:linear-gradient(0deg,#000 0,rgba(0,0,0,0) 220px),linear-gradient(90deg,rgba(14,55,41,.6) 0%,rgba(14,55,41,.42) 55%,rgba(14,55,41,.15) 100%),url(assets/nepal/context.webp);-webkit-mask-image:none;mask-image:none}
.bg-coffee::before{background-image:linear-gradient(#000 0,rgba(0,0,0,0) 220px),linear-gradient(90deg,rgba(14,55,41,.5) 0%,rgba(14,55,41,.28) 45%,rgba(14,55,41,0) 100%),url(assets/nepal/coffee.webp);-webkit-mask-image:none;mask-image:none}
@media (max-width:760px){
  .bg-ctx{padding-top:72px;padding-bottom:72px}.bg-coffee{padding-top:96px}
  .bg-ctx::before{background-image:linear-gradient(0deg,#000 0,rgba(0,0,0,0) 150px),linear-gradient(rgba(14,55,41,.5),rgba(14,55,41,.62)),url(assets/nepal/context.webp)}
  .bg-coffee::before{background-image:linear-gradient(#000 0,rgba(0,0,0,0) 150px),linear-gradient(rgba(14,55,41,.4),rgba(14,55,41,.55)),url(assets/nepal/coffee.webp)}
}

/* softer black blend between the two photos */
.bg-ctx::before{background-image:linear-gradient(0deg,rgba(0,0,0,.7) 0,rgba(0,0,0,0) 150px),linear-gradient(90deg,rgba(14,55,41,.6) 0%,rgba(14,55,41,.42) 55%,rgba(14,55,41,.15) 100%),url(assets/nepal/context.webp)}
.bg-coffee::before{background-image:linear-gradient(rgba(0,0,0,.7) 0,rgba(0,0,0,0) 150px),linear-gradient(90deg,rgba(14,55,41,.5) 0%,rgba(14,55,41,.28) 45%,rgba(14,55,41,0) 100%),url(assets/nepal/coffee.webp)}
@media (max-width:760px){
  .bg-ctx::before{background-image:linear-gradient(0deg,rgba(0,0,0,.7) 0,rgba(0,0,0,0) 100px),linear-gradient(rgba(14,55,41,.5),rgba(14,55,41,.62)),url(assets/nepal/context.webp)}
  .bg-coffee::before{background-image:linear-gradient(rgba(0,0,0,.7) 0,rgba(0,0,0,0) 100px),linear-gradient(rgba(14,55,41,.4),rgba(14,55,41,.55)),url(assets/nepal/coffee.webp)}
}

/* ---- feedback round: same title font everywhere, white logo, hero banner as a button, calmer line breaks ---- */
.sec-head h2{font-family:Anton,Impact,"Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.02;font-size:clamp(40px,4.6vw,64px);color:var(--np-ink)}
.np-brand img{filter:brightness(0) invert(1)}
.hero-p,.hero-note,.ctx-l>p,.coffee-in>p,.sec-plant p{text-wrap:pretty}
.hero-p{max-width:60ch}
a.hero-note{display:block;width:fit-content;max-width:100%;text-decoration:none;border:2px solid #fff;background:rgba(255,255,255,.12);transition:background-color .22s ease,border-color .22s ease,color .22s ease,transform .2s ease}
a.hero-note:hover,a.hero-note:focus-visible{background:var(--np-green);border-color:var(--np-green);color:var(--np-ink);transform:translateY(-2px)}
a.hero-note:focus-visible{outline:2px solid #fff;outline-offset:3px}
a.hero-note,a.hero-note strong{color:#fff}
a.hero-note:hover,a.hero-note:hover strong,a.hero-note:focus-visible,a.hero-note:focus-visible strong{color:var(--np-ink)}
.sec-plant h2{max-width:none}
.sel-co2{margin:14px 0 0;display:grid;gap:8px;font:400 14px/1.4 Roboto,Montserrat,sans-serif;color:var(--np-text)}
.sel-co2 div{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sel-co2 dt{font-weight:700;color:var(--np-ink)}
.sel-co2 dt::after{content:":"}
.sel-co2 dd{margin:0;display:inline-flex;align-items:center;gap:6px}
.sel-co2 img{border-radius:50%}
[data-gtm_track_custom]{} [data-gtm_track_custom] *{pointer-events:none}
@media (min-width:1000px){.sp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* hero banner: always green, no hover change */
a.hero-note,a.hero-note:hover,a.hero-note:focus-visible{background:var(--np-green);border-color:var(--np-green);color:var(--np-ink);transform:none;-webkit-backdrop-filter:none;backdrop-filter:none}
a.hero-note strong,a.hero-note:hover strong,a.hero-note:focus-visible strong{color:var(--np-ink)}

/* mobile pass: legible text on photos, one-row scrollable filters, 44px tap targets */
@media (max-width:760px){
  .bg-ctx::before{background-image:linear-gradient(rgba(10,32,24,.7),rgba(10,32,24,.8)),url(assets/nepal/context.webp)}
  .bg-coffee::before{background-image:linear-gradient(rgba(10,32,24,.6),rgba(10,32,24,.72)),url(assets/nepal/coffee.webp)}
  .filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;margin-inline:-16px;padding:2px 16px 8px;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filters .chip{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
  .sp-more,.np-ftr a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 8px}
}

/* desktop: listing and zoomed-in card share the same top and bottom edge */
@media (min-width:1000px){
  .sp-body:not(.few){align-items:stretch}
  .sp-body:not(.few) .sp-side{position:static}
  .sp-body:not(.few) .sp-grid{grid-auto-rows:1fr}
}