/* Sustainability (2026-09-30, v2). Deliberately NOT the Vision template:
   light-led (warm white), illustrated rather than photographic, and three
   interactions of its own — a forest that grows as you scroll with a live
   counter, a horizontal "life of a FLOW" journey, and a dotted world map of
   the real Ecologi projects with hover cards. */
.page-sus2{--ink:#0b0b0b;--paper:#f7f4ee;}
.page-sus2 section{margin:0;}
.s-eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 22px;font-family:"Montserrat",sans-serif;font-weight:600;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--copper);}
.s-eyebrow::before{content:"";width:40px;height:1px;background:var(--copper);}
.s-h2{margin:0;font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(42px,4.6vw,76px);line-height:1;letter-spacing:-.015em;}
.s-btn{display:inline-block;font-family:"Montserrat",sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:17px 32px;background:transparent;color:#fff;border:1px solid var(--copper);text-decoration:none;transition:background .3s;}
.s-btn:hover{background:var(--copper);}
.s-link{display:inline-block;font-family:"Montserrat",sans-serif;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#fff;border-bottom:1px solid var(--copper);padding-bottom:5px;text-decoration:none;}
.s-link:hover{color:var(--copper);}

/* 1 · growing forest */
.sg{position:relative;height:190vh;background:var(--paper);color:var(--ink);padding:0;}
.sg-pin{position:sticky;top:0;height:100vh;height:100svh;min-height:640px;overflow:hidden;}
.sg-copy{position:absolute;left:max(40px,calc((100% - 1240px)/2));top:15vh;z-index:2;display:flex;flex-direction:column;}
.sg-title{margin:0;font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif;font-weight:400;font-size:clamp(58px,7.4vw,128px);line-height:.92;letter-spacing:-.02em;}
.sg-title em{color:var(--copper);}
.sg-count{margin:36px 0 0;display:flex;align-items:center;gap:20px;}
.sg-num{font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif;font-style:italic;font-size:clamp(56px,5vw,84px);line-height:1;min-width:2.1em;font-variant-numeric:tabular-nums lining-nums;}
.sg-lab{font-family:"Montserrat",sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;line-height:1.7;color:#333;padding-left:20px;border-left:1px solid var(--copper);}
.sg-lab small{font-family:"Liberation Serif",Georgia,serif;font-style:italic;font-size:15px;letter-spacing:0;text-transform:none;font-weight:400;color:#777;}
.sg-forest{position:absolute;left:0;right:0;bottom:0;width:100%;height:44%;}
.sg-ground{stroke:var(--ink);stroke-width:1.2;}
.sg-grass{fill:none;stroke:var(--ink);stroke-width:1;stroke-linecap:round;}
.sg-hill{stroke-width:1;stroke-linejoin:round;}
.sg-hill.h2{fill:#f1ece2;stroke:#d8d0c1;}
.sg-hill.h1{fill:#efe9de;stroke:#cbc2b1;}
.sg-sun{transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.sg-sun circle{fill:#f3e3cf;stroke:var(--copper);stroke-width:1.3;}
.sg-sun path{fill:none;stroke:var(--copper);stroke-width:.8;opacity:.55;}
.sg-birds path{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-linecap:round;opacity:0;transform:translateX(-24px);transition:opacity 1.2s ease .2s,transform 2.4s cubic-bezier(.2,.7,.2,1) .2s;}
.sg.is-done .sg-birds path{opacity:.75;transform:none;}
.sg-tree{transform-box:fill-box;transform-origin:50% 100%;transform:scale(.001);opacity:0;transition:transform 1.3s cubic-bezier(.34,1.28,.5,1),opacity .5s ease;}
.sg-tree.on{transform:scale(1);opacity:1;}
.sg-sil{fill:var(--paper);stroke-linejoin:round;stroke-linecap:round;}
.sg-det{fill:none;stroke-linecap:round;stroke-linejoin:round;}
.sg-tree.L0 .sg-sil{fill:#f2ede4;stroke:#bdb4a4;stroke-width:1;}
.sg-tree.L0 .sg-det{stroke:#cfc7b8;stroke-width:.7;}
.sg-tree.L1 .sg-sil{fill:#f5f1e9;stroke:#7d766a;stroke-width:1.1;}
.sg-tree.L1 .sg-det{stroke:#a39b8d;stroke-width:.8;}
.sg-tree.L2 .sg-sil{stroke:var(--ink);stroke-width:1.35;}
.sg-tree.L2 .sg-det{stroke:#55504a;stroke-width:.9;}
.sg-tree.cu .sg-sil{stroke:var(--copper);}
.sg-tree.cu .sg-det{stroke:#c49a6c;}
.sg-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);margin:0;font-family:"Montserrat",sans-serif;font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#777;transition:opacity .6s;}
.sg.is-going .sg-cue{opacity:0;}

/* 2 · journey */
.sj{position:relative;height:400vh;background:#000;color:#fff;padding:0;}
.sj-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;}
.sj-head{position:absolute;top:110px;left:max(40px,calc((100% - 1240px)/2));right:max(40px,calc((100% - 1240px)/2));display:flex;justify-content:space-between;align-items:center;}
.sj-head .s-eyebrow{margin:0;}
.sj-progress{margin:0;font-family:"Montserrat",sans-serif;font-size:12px;font-weight:600;letter-spacing:.24em;color:rgba(255,255,255,.4);}
.sj-cur{color:#fff;}
.sj-track{display:flex;gap:4vw;padding:0 max(40px,calc((100% - 1240px)/2));margin-top:60px;will-change:transform;}
.sj-card{flex:0 0 min(62vw,860px);display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center;opacity:.35;transition:opacity .6s ease;}
.sj-card.is-cur{opacity:1;}
.sj-img{aspect-ratio:4/5;overflow:hidden;background:#111;}
.sj-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:transform 1.4s cubic-bezier(.2,.7,.1,1);}
.sj-card:nth-child(3) .sj-img img{filter:none;}
.sj-cut{background:radial-gradient(ellipse 70% 55% at 50% 50%,#3a332c 0%,#141210 72%);display:flex;align-items:center;justify-content:center;}
.sj-cut img{object-fit:contain;padding:10%;filter:brightness(1.15) contrast(1.05) drop-shadow(0 30px 40px rgba(0,0,0,.6));}
.sj-card.is-cur .sj-img img{transform:scale(1.04);}
.sj-word{display:flex;align-items:center;justify-content:center;border:1px solid rgba(153,102,50,.45);background:radial-gradient(ellipse at 50% 40%,rgba(153,102,50,.14),rgba(0,0,0,0) 70%);}
.sj-word span{font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif;font-size:clamp(40px,4vw,68px);line-height:1;text-align:center;}
.sj-word em{color:var(--copper);}
.sj-tree svg{width:60%;fill:none;stroke:var(--copper);stroke-width:1.4;stroke-linecap:round;}
.sj-n{display:block;font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif;font-style:italic;font-size:64px;line-height:1;color:var(--copper);}
.sj-text h2{margin:18px 0 18px;font-family:"Montserrat",sans-serif;font-size:14px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;}
.sj-text p{margin:0;font-family:"Montserrat",sans-serif;font-size:clamp(15.5px,1.15vw,18px);line-height:1.75;color:rgba(255,255,255,.74);max-width:380px;}
.sj-bar{position:absolute;left:max(40px,calc((100% - 1240px)/2));right:max(40px,calc((100% - 1240px)/2));bottom:60px;height:1px;background:rgba(255,255,255,.15);}
.sj-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--copper);width:calc(var(--sj,0) * 100%);}

/* 3 · map */
.sm{background:#fff;color:var(--ink);padding:120px 40px 110px;}
.sm-head,.sm-wrap,.sm-stats,.sm-rate{max-width:1240px;margin-left:auto;margin-right:auto;}
.sm-hint{margin:18px 0 0;font-family:"Liberation Serif",Georgia,serif;font-style:italic;font-size:17px;color:#888;}
.sm-wrap{position:relative;margin-top:50px;}
.sm-map{width:100%;height:auto;display:block;overflow:visible;}
.sm-dots circle{fill:#d8d2c8;}
.sm-pin{cursor:pointer;outline:none;}
.sm-dot{fill:var(--copper);transition:transform .4s;transform-box:fill-box;transform-origin:center;}
.sm-ring{fill:none;stroke:var(--copper);stroke-width:1.2;opacity:.6;transform-box:fill-box;transform-origin:center;animation:smPulse 2.6s ease-out infinite;}
.sm-hit{fill:transparent;}
.sm-home .sm-dot{fill:var(--ink);} .sm-home .sm-ring{stroke:var(--ink);}
.sm-pin.is-on .sm-dot,.sm-pin:hover .sm-dot,.sm-pin:focus .sm-dot{transform:scale(1.5);}
@keyframes smPulse{0%{transform:scale(.4);opacity:.9;}100%{transform:scale(1.7);opacity:0;}}
.sm-cards{position:absolute;right:0;bottom:4%;width:min(340px,40%);min-height:150px;}
.sm-card{position:absolute;inset:auto 0 0 0;padding:26px 28px;background:var(--ink);color:#fff;opacity:0;transform:translateY(10px);transition:opacity .45s,transform .5s cubic-bezier(.2,.7,.1,1);pointer-events:none;}
.sm-card.is-on{opacity:1;transform:none;}
.sm-country{margin:0 0 10px;font-family:"Montserrat",sans-serif;font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--copper);}
.sm-proj{margin:0 0 12px;font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif;font-style:italic;font-size:26px;line-height:1.15;}
.sm-imp{margin:0;font-family:"Montserrat",sans-serif;font-size:13px;color:rgba(255,255,255,.7);}
.sm-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:70px;border-top:1px solid #e6e1da;}
.sm-stats > div{padding:34px 0 0;}
.sm-stats > div + div{padding-left:40px;border-left:1px solid #e6e1da;}
.sm-fig{margin:0;font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif;font-style:italic;font-size:clamp(64px,7vw,120px);line-height:.9;font-variant-numeric:tabular-nums lining-nums;}
.sm-fig small{font-size:.45em;}
.sm-lab{margin:12px 0 0;font-family:"Montserrat",sans-serif;font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--copper);}
.sm-rate{margin-top:44px;font-family:"Liberation Serif",Georgia,serif;font-style:italic;font-size:18px;line-height:1.6;color:#666;max-width:640px;margin-left:max(0px,calc((100% - 1240px)/2));}

/* 4 · close */
.sc{background:#000;color:#fff;text-align:center;padding:140px 40px 150px;}
.sc .s-eyebrow{justify-content:center;} .sc .s-eyebrow::after{content:"";width:40px;height:1px;background:var(--copper);}
.sc-big{margin:0 auto;max-width:1100px;font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif;font-weight:400;font-size:clamp(48px,6.4vw,112px);line-height:.98;letter-spacing:-.02em;}
.sc-big em{color:var(--copper);}
.sc-text{margin:34px auto 0;max-width:560px;font-family:"Montserrat",sans-serif;font-size:clamp(15.5px,1.15vw,18px);line-height:1.75;color:rgba(255,255,255,.72);}
.sc-cta{margin-top:46px;display:flex;justify-content:center;align-items:center;gap:36px;flex-wrap:wrap;}

@media (prefers-reduced-motion:no-preference){
  [data-reveal] .sm-head > *,[data-reveal] .sm-stats > div,[data-reveal] .sc-big,[data-reveal] .sc-text,[data-reveal] .sc-cta{opacity:0;transform:translateY(16px);transition:opacity 1.3s ease,transform 1.5s cubic-bezier(.2,.7,.1,1);}
  [data-reveal].is-in .sm-head > *,[data-reveal].is-in .sm-stats > div,[data-reveal].is-in .sc-big,[data-reveal].is-in .sc-text,[data-reveal].is-in .sc-cta{opacity:1;transform:none;}
  .sm.is-in .sm-stats > div:nth-child(2){transition-delay:.15s;} .sm.is-in .sm-stats > div:nth-child(3){transition-delay:.3s;}
}
@media (prefers-reduced-motion:reduce){/* .sg-tree override removed 2026-10-07: the forest now grows with scroll for everyone */.sg-birds path{opacity:.75;transform:none;}.sm-ring{animation:none;}}

@media (max-width:900px){
  .sg{height:160vh;}
  .sg-copy{left:22px;right:22px;top:110px;}
  .sg-forest{height:44%;}
  .sg-num{min-width:1.75em;}
  .sg-lab{font-size:10px;letter-spacing:.18em;padding-left:16px;}
  .sg-count{gap:14px;}
  .sj{height:auto;}
  .sj-pin{position:relative;height:auto;padding:100px 0 80px;}
  .sj-head{position:relative;top:auto;left:auto;right:auto;padding:0 22px;}
  .sj-track{flex-direction:column;gap:64px;padding:0 22px;transform:none !important;}
  .sj-card{flex:none;grid-template-columns:1fr;gap:26px;opacity:1;}
  .sj-img{aspect-ratio:4/3;}
  .sj-bar{display:none;}
  .sm{padding:80px 22px;}
  .sm-cards{position:relative;width:100%;margin-top:18px;}
  .sm-card{position:absolute;}
  .sm-stats{grid-template-columns:1fr;} .sm-stats > div + div{padding-left:0;border-left:0;border-top:1px solid #e6e1da;margin-top:28px;}
  .sc{padding:90px 22px 100px;}
}

/* the amp in 02 grows a touch under the cursor */
@media (hover:hover) and (pointer:fine){
  .sj-cut img{transition:transform .9s cubic-bezier(.2,.7,.1,1);}
  .sj-cut:hover img{transform:scale(1.1) !important;}
}