:root{--cream:#F7F2E8;--green:#173F35;--leaf:#2F6B4F;--brown:#A9672B;--gold:#C7A157;--lime:#8DBB45;--ink:#1D2521;--line:rgba(23,63,53,.15)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Poppins,Arial,sans-serif;line-height:1.55}.wrap{width:min(1240px,calc(100% - 48px));margin:auto}.section{padding:110px 0}.skip{position:fixed;top:-60px;left:12px;background:var(--green);color:#fff;padding:10px;z-index:999}.skip:focus{top:12px}a{text-decoration:none;color:inherit}.topbar{height:80px;position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:28px;padding:0 max(24px,calc((100vw - 1240px)/2));background:rgba(247,242,232,.9);backdrop-filter:blur(16px);border-bottom:1px solid rgba(23,63,53,.08)}.brand{display:flex;align-items:center;gap:10px;margin-right:auto}.mark{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--green)}.mark svg{width:32px}.brand b{display:block;color:var(--green);font-size:21px;letter-spacing:-1px}.brand small{display:block;font-size:8px;letter-spacing:6px;color:var(--brown);font-weight:700;margin-top:3px}.topbar nav{display:flex;gap:22px;font-size:13px;font-weight:600}.navcta{background:var(--green);color:#fff;border-radius:11px;padding:12px 16px;font-size:13px;font-weight:700}.hero{min-height:760px;padding-top:80px;position:relative;overflow:hidden}.beach-bg,.sustain-bg{position:absolute;inset:0;background:url('assets/beach.png') center/cover no-repeat}.hero-fade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,242,232,.98),rgba(247,242,232,.9) 42%,rgba(247,242,232,.18) 75%)}.hero-grid{min-height:680px;display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative;z-index:2}.eyebrow{font-size:12px;letter-spacing:2.4px;font-weight:800;color:var(--brown);margin-bottom:18px}.eyebrow.light{color:#efd69e}h1,h2{font-weight:900;letter-spacing:-3px;line-height:.98;margin:0}h1{font-size:clamp(58px,6vw,94px)}h2{font-size:clamp(46px,5vw,78px)}em{font-style:normal;color:var(--leaf)}.green em{color:#d9b870}.lead{font-size:20px;max-width:620px;margin:26px 0 10px}.actions{display:flex;gap:12px;margin-top:28px}.btn{padding:14px 18px;border-radius:11px;font-size:13px;font-weight:700}.darkbtn{background:var(--green);color:#fff}.lightbtn{background:rgba(255,255,255,.7);border:1px solid var(--green)}.hero-art{height:560px;position:relative}.hero-art img{position:absolute;width:760px;right:-120px;bottom:-70px;filter:drop-shadow(0 25px 35px rgba(0,0,0,.25))}.pill{position:absolute;top:100px;right:0;z-index:3;background:rgba(247,242,232,.9);padding:10px 13px;border-radius:999px;font-size:10px;font-weight:800;color:var(--green)}.hero-art small{position:absolute;right:0;bottom:75px;background:var(--brown);color:#fff;padding:9px 12px;border-radius:999px;font-weight:800;letter-spacing:1px}.hero-strip{position:absolute;left:0;right:0;bottom:0;z-index:5;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(247,242,232,.96);border-top:1px solid var(--line)}.hero-strip div{padding:22px 26px;border-right:1px solid var(--line);display:flex;gap:12px}.hero-strip b{color:var(--green);font-size:12px}.hero-strip span{font-size:11px}.two{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.waste-visual{height:580px;background:var(--leaf);border-radius:38px;position:relative;overflow:hidden}.waste-visual img{position:absolute;width:720px;left:-80px;bottom:-100px}.ghost{position:absolute;top:30px;left:34px;color:rgba(255,255,255,.18);font-size:76px;line-height:.84;font-weight:900;letter-spacing:-5px;z-index:2}.copy p{color:#5c665f}.strong{font-weight:800;color:var(--green)!important}.chips{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.chips span{padding:9px 11px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:11px;font-weight:700}.chips i{font-style:normal;color:var(--brown)}.green{background:var(--green);color:#fff}.head{max-width:780px}.head p{color:rgba(255,255,255,.72)}.section:not(.green) .head p{color:#5f6962}.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:16px;margin-top:55px}.flow>div{border-top:1px solid rgba(255,255,255,.2);padding:22px}.flow strong,.flow span{display:block}.flow strong{font-size:19px;margin:24px 0 4px}.flow span{font-size:11px;color:rgba(255,255,255,.6)}.flow b,.flow i{color:var(--gold)}.flow i{display:grid;place-items:center;font-style:normal}.proof{margin-top:40px;border:1px solid rgba(255,255,255,.15);padding:22px;display:grid;grid-template-columns:230px 1fr;gap:25px}.proof span{font-size:12px;color:rgba(255,255,255,.7)}.split{display:grid;grid-template-columns:1fr 420px;gap:50px;align-items:end;max-width:none}.product-row{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;border-top:1px solid var(--line);padding:42px 0}.product-row img{max-height:380px;max-width:100%;margin:auto;filter:drop-shadow(0 22px 30px rgba(0,0,0,.13))}.product-row h3{font-size:42px;line-height:1;margin:15px 0;font-weight:900;letter-spacing:-2px}.product-row p{color:#5e675f}.tag{display:inline-block;border:1px solid var(--line);padding:7px 10px;border-radius:999px;font-size:10px;font-weight:800;color:var(--brown)}.note{display:grid;grid-template-columns:300px 1fr;gap:20px;background:#e9e1d2;border-left:5px solid var(--brown);padding:20px 24px}.note span{font-size:12px}.machines{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:50px}.machines article{position:relative;border:1px solid rgba(255,255,255,.13);padding:18px;background:rgba(255,255,255,.035)}.machines article>b{position:absolute;right:14px;top:13px;color:var(--gold)}.machines img{height:205px;width:100%;object-fit:contain}.machines p{font-size:11px;color:rgba(255,255,255,.6)}.process-line{text-align:center;margin-top:32px;font-size:11px;font-weight:800;letter-spacing:1px}.process-line i{font-style:normal;color:var(--gold);padding:0 7px}.tiny{text-align:center;font-size:10px;color:rgba(255,255,255,.5)}.scale p{color:#5f6962}.buyers{border-top:1px solid var(--line)}.buyers div{display:grid;grid-template-columns:50px 1fr;gap:8px;padding:24px 0;border-bottom:1px solid var(--line)}.buyers b{color:var(--gold)}.buyers strong{color:var(--green)}.buyers span{grid-column:2;font-size:11px;color:#69736b}.sustain{min-height:760px;position:relative;color:#fff}.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,48,40,.94),rgba(11,48,40,.82) 52%,rgba(11,48,40,.2))}.sustain-inner{min-height:760px;display:flex;align-items:center;position:relative;z-index:2}.sustain-inner>div{max-width:680px}.sustain-inner p{color:rgba(255,255,255,.8)}.sustain-points{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}.sustain-points span{border:1px solid rgba(255,255,255,.17);padding:16px;font-size:11px}.sustain-points b{color:#f3d18c;margin-right:5px}.business{display:grid;grid-template-columns:1fr 1fr;gap:24px}.statement{background:#fff;border-top:6px solid var(--brown);padding:34px}.statement h2{font-size:clamp(36px,4vw,58px);margin-top:15px}.darkbox{background:var(--green);color:#fff;border-top-color:var(--lime)}.business-copy{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}.business-copy p{font-size:18px;font-weight:600}.pale{background:#ece4d5}.metrics{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}.metrics span{padding:18px 10px;border-bottom:1px solid var(--line);font-size:11px;font-weight:600}.metrics b{color:var(--gold);margin-right:8px}blockquote{margin:40px 0 0;color:var(--brown);font-size:23px;font-weight:800;line-height:1.1}.impact{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:50px}.impact article{background:#fff;padding:26px;border-top:5px solid var(--green);min-height:230px}.impact article>b{color:var(--gold)}.impact h3{font-size:24px;margin-top:40px}.impact p{font-size:12px;color:#657068}.future{text-align:center;color:#646d66;font-size:11px}.partnergrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.partnergrid article{min-height:300px;border:1px solid rgba(255,255,255,.14);padding:26px;display:flex;flex-direction:column}.partnergrid article>b{color:var(--gold)}.partnergrid h3{font-size:27px;margin:50px 0 10px}.partnergrid p{font-size:11px;color:rgba(255,255,255,.62);margin-bottom:auto}.partnergrid a{font-size:12px;font-weight:800;color:#f0d18e}.footer{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;padding:42px 0}footer{background:#102f29;color:#fff}.footer strong{font-size:21px}.footer small{display:block;color:#dfbd79;letter-spacing:5px}.footer p,.footer span,.footer a{font-size:10px;color:rgba(255,255,255,.62)}.footer>div:nth-child(2){display:flex;flex-direction:column}.footer>div:nth-child(3){display:flex;gap:14px;justify-content:flex-end}.reveal{opacity:0;transform:translateY(24px);transition:.7s ease}.reveal.on{opacity:1;transform:none}@media(max-width:1000px){.topbar nav{display:none}.hero-grid,.two{grid-template-columns:1fr}.hero-art{height:360px}.hero-strip{position:relative;grid-template-columns:1fr 1fr}.flow{grid-template-columns:1fr 1fr}.flow i{display:none}.machines{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr}.business-copy{grid-template-columns:1fr}}@media(max-width:700px){.topbar{padding:0 16px;height:72px}.navcta{display:none}.wrap{width:calc(100% - 28px)}.section{padding:75px 0}.hero{padding-top:72px}.hero h1,h2{letter-spacing:-2.2px}.hero h1{font-size:56px}.hero-grid{min-height:760px}.hero-art img{width:620px;right:-190px}.hero-strip{grid-template-columns:1fr}.waste-visual{height:430px}.ghost{font-size:56px}.flow,.machines,.sustain-points,.impact,.partnergrid,.metrics,.business{grid-template-columns:1fr}.proof,.note{grid-template-columns:1fr}.product-row,.product-row.rev{grid-template-columns:1fr}.product-row.rev img{order:2}.business-copy{grid-column:auto}.footer{grid-template-columns:1fr}.footer>div:nth-child(3){justify-content:flex-start}.sustain,.sustain-inner{min-height:720px}.shade{background:rgba(11,48,40,.82)}}@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* COCOLOOP business-site refinement — 2026-09 */
.section{padding:92px 0}
.hero{min-height:840px;padding-top:80px;padding-bottom:78px}
.hero-grid{min-height:680px;grid-template-columns:minmax(570px,1.04fr) minmax(460px,.96fr);gap:14px}
.hero-copy{max-width:655px;padding:58px 0 54px}
.hero h1{font-size:clamp(58px,5vw,80px);line-height:.96;letter-spacing:-3.6px}
.hero .lead{font-size:19px;max-width:610px}
.hero-art{height:610px;min-width:0}
.hero-art img{width:min(720px,49vw);max-width:none;height:auto;right:-44px;bottom:5px;object-fit:contain}
.pill{top:126px;right:24px}
.hero-art small{right:12px;bottom:88px}
.hero-strip>div{padding:18px 26px}
h2{font-size:clamp(44px,4.45vw,70px);letter-spacing:-2.6px}
.waste-visual{height:540px}
.head{max-width:830px}
.product-row{padding:34px 0;min-height:350px}
.product-row img{max-height:330px}
.product-row h3{font-size:38px}
.note{margin-top:10px}

.materials-expansion{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
.material-option{min-height:410px;display:grid;grid-template-columns:1.05fr .95fr;overflow:hidden;background:#fff;border:1px solid var(--line)}
.material-option .option-copy{padding:34px;display:flex;flex-direction:column;justify-content:center}
.material-option h3{font-size:34px;line-height:1.05;letter-spacing:-1.7px;margin:18px 0 12px}
.material-option p{font-size:13px;color:#5e675f}
.option-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.option-meta span{font-size:9px;font-weight:700;color:var(--green);padding:7px 9px;border:1px solid var(--line);border-radius:999px}
.option-visual{min-height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;position:relative;overflow:hidden}
.option-visual strong{font-size:52px;line-height:.88;letter-spacing:-3px;position:relative;z-index:2}
.option-visual small{font-size:9px;letter-spacing:1.5px;font-weight:800;margin-top:10px;position:relative;z-index:2}
.coir-visual{background:
  linear-gradient(180deg,rgba(166,103,43,.06),rgba(166,103,43,.42)),
  url('assets/husks.png') 55% 55%/180% auto no-repeat;
  color:#fff}
.charcoal-option{background:#efe9dc}
.charcoal-visual{background:
  radial-gradient(circle at 28% 32%,#424943 0 12%,transparent 13%),
  radial-gradient(circle at 62% 24%,#252b28 0 16%,transparent 17%),
  radial-gradient(circle at 72% 64%,#4b514d 0 14%,transparent 15%),
  radial-gradient(circle at 34% 72%,#1d2521 0 18%,transparent 19%),
  linear-gradient(145deg,#303733,#101613);
  color:#f7f2e8}
.future-tag{color:#4d554f;border-color:rgba(29,37,33,.25)}
.product-cta{margin-top:20px;background:var(--green);color:#fff;padding:28px 30px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.product-cta>div{display:flex;flex-direction:column;max-width:720px}
.product-cta strong{font-size:18px}
.product-cta span{font-size:12px;color:rgba(255,255,255,.7);margin-top:3px}
.product-cta .btn{background:#f7f2e8;color:var(--green);white-space:nowrap}

.machines article{border-width:0 0 1px;background:transparent;padding:18px 12px}
.machines article>b{right:12px}
.scale{gap:90px}
.about-business{background:#f1eadc}
.business-web{display:grid;grid-template-columns:.95fr 1.05fr;gap:90px;align-items:start}
.business-intro h2{font-size:clamp(44px,4.2vw,66px)}
.business-detail{padding-top:35px}
.business-detail>p{font-size:15px;color:#5c665f;margin:0 0 18px}
.business-path{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:30px}
.business-path span{background:#fff;padding:9px 11px;border-radius:999px;border:1px solid var(--line);font-size:10px;font-weight:700;color:var(--green)}
.business-path i{font-style:normal;color:var(--brown)}
blockquote{font-size:21px}
.impact article{min-height:215px}
.partnergrid article{min-height:270px}

@media(max-width:1100px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(420px,.85fr)}
  .hero h1{font-size:clamp(56px,6vw,72px)}
  .hero-art img{width:650px;right:-120px}
  .materials-expansion{grid-template-columns:1fr}
  .material-option{min-height:350px}
  .business-web{grid-template-columns:1fr;gap:24px}
  .business-detail{padding-top:0;max-width:780px}
}
@media(max-width:1000px){
  .hero{padding-bottom:0}
  .hero-grid{grid-template-columns:1fr;min-height:auto}
  .hero-copy{padding:70px 0 20px;max-width:700px}
  .hero-art{height:430px}
  .hero-art img{width:680px;right:-80px;bottom:-15px}
  .hero-strip{position:relative}
}
@media(max-width:700px){
  .section{padding:70px 0}
  .hero{min-height:auto}
  .hero-copy{padding:54px 0 10px}
  .hero h1{font-size:clamp(50px,14vw,62px);line-height:.96}
  .hero-art{height:320px}
  .hero-art img{width:560px;right:-195px;bottom:-10px}
  .pill{top:12px;right:auto;left:0;font-size:9px}
  .hero-art small{right:0;bottom:24px;font-size:8px}
  .material-option{grid-template-columns:1fr;min-height:auto}
  .option-visual{min-height:250px}
  .product-cta{align-items:flex-start;flex-direction:column}
  .business-web{gap:12px}
}