/*
Theme Name: EcoPacks
Description: Sustainable packaging storefront theme. Single-page homepage with hero, product grid, process, features, partners, FAQ, testimonials and callback form.
Version: 1.0
Text Domain: ecopacks
*/
:root{--green:#1d4a3b;--green2:#2c6b55;--sand:#f3ecd9;--sand2:#e9dfc4;--ink:#1c2420;--mute:#5d665f;--white:#fff;--r:10px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.6}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em}
h2{font-size:clamp(1.6rem,3vw,2.3rem);text-align:center}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.sec{padding:72px 0}.sec.sand{background:var(--sand)}
.lead{max-width:640px;margin:0 auto 40px;text-align:center;color:var(--mute)}
.btn{display:inline-block;background:var(--green);color:#fff;padding:11px 22px;border-radius:6px;font-weight:600;font-size:.9rem;border:0;cursor:pointer}
.btn:hover{background:var(--green2)}.btn.light{background:#fff;color:var(--green)}.btn.ghost{background:transparent;color:var(--green);border:1.5px solid var(--green)}
:focus-visible{outline:3px solid var(--green2);outline-offset:2px}
.ph{background:linear-gradient(135deg,var(--sand2),#cfd8c6);aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;display:grid;place-items:center;color:var(--green);font-weight:600}
.ph img{width:100%;height:100%;object-fit:cover}
/* header */
.top{background:var(--sand);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--sand2)}
.top .wrap{display:flex;align-items:center;gap:28px;height:68px}
.logo{font-weight:800;font-size:1.5rem;color:var(--green);margin-right:auto}
.nav{display:flex;gap:24px;font-size:.92rem;font-weight:500}.nav a:hover{color:var(--green2)}
.burger{display:none;background:none;border:0;font-size:1.6rem;color:var(--green)}
/* hero */
.hero{background:var(--sand);padding:56px 0 0}
.hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2rem,4.5vw,3.3rem);color:var(--green)}
.hero p{color:var(--mute);max-width:520px}
.search{display:flex;gap:12px;align-items:center;margin:22px 0}
.search input{padding:10px 14px;border:1px solid #cdc4a8;border-radius:6px;background:#fff;min-width:200px}
.stats{display:flex;gap:44px;margin-top:20px}.stats b{display:block;font-size:2rem;color:var(--green)}.stats span{font-size:.85rem;color:var(--mute)}
/* grids */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card h3{font-size:1.05rem;margin:14px 0 4px}.card p{margin:0;font-size:.9rem;color:var(--mute)}
.card .ph{aspect-ratio:4/4.4}.card{text-align:center}
/* big idea mosaic */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;gap:14px}
.mosaic .ph{aspect-ratio:auto;height:100%}.mosaic .a{grid-column:span 2;grid-row:span 2}.mosaic .b{grid-row:span 2}
/* steps */
.how{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.step{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid #e6e1d0}
.step i{flex:none;width:46px;height:46px;border-radius:50%;background:var(--sand);display:grid;place-items:center;font-style:normal;font-weight:700;color:var(--green)}
.step h3{font-size:1rem;margin:0}.step p{margin:2px 0 0;font-size:.88rem;color:var(--mute)}
/* features */
.feat{background:#fff;border:1px solid #e6e1d0;border-radius:var(--r);padding:28px;text-align:center}
.feat h3{color:var(--green)}.feat p{color:var(--mute);font-size:.9rem;margin:0}
.dark{background:var(--green);color:#fff;border-radius:16px;padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.dark h2{text-align:left;color:#fff}.dark p{color:#d6e4dc}
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.why div{border:1px solid #e6e1d0;border-radius:var(--r);padding:20px}.why h3{font-size:1rem;margin-bottom:4px}.why p{margin:0;font-size:.85rem;color:var(--mute)}
.partners{display:flex;flex-wrap:wrap;gap:20px 44px;justify-content:center;align-items:center;font-weight:800;font-size:1.3rem;color:#444;margin-bottom:28px}
/* faq */
.faq{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center}
details{border:1px solid #d9d3bd;border-radius:8px;padding:14px 18px;margin-bottom:12px;background:#fff}
summary{cursor:pointer;font-weight:600;font-size:.95rem}details p{margin:10px 0 0;color:var(--mute);font-size:.9rem}
.cta{background:var(--green);border-radius:16px;padding:44px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;color:#fff}
.cta h2{text-align:left;color:#fff}.cta p{color:#d6e4dc}
.quote{background:#fff;border:1px solid #e6e1d0;border-radius:var(--r);padding:22px;font-size:.9rem}.quote b{display:block;margin-bottom:6px}
form.cb{max-width:720px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
form.cb input,form.cb textarea{width:100%;padding:12px;border:1px solid #cdc4a8;border-radius:6px;font:inherit}
form.cb textarea{grid-column:1/-1;min-height:120px}form.cb .btn{grid-column:1/-1;justify-self:center}
/* footer */
.foot{background:var(--green);color:#d6e4dc;padding:56px 0 20px}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot h4{color:#fff;margin:0 0 12px}.foot a{display:block;margin-bottom:6px;font-size:.9rem}
.foot .logo{color:#fff}.copy{text-align:center;font-size:.8rem;margin-top:36px;padding-top:18px;border-top:1px solid #ffffff22}
@media(max-width:860px){.hero .wrap,.how,.faq,.dark,.cta,.foot .wrap{grid-template-columns:1fr}.g3{grid-template-columns:1fr 1fr}.why{grid-template-columns:1fr 1fr}
.nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--sand);flex-direction:column;padding:16px 20px}.nav.open{display:flex}.burger{display:block}
.mosaic{grid-template-columns:1fr 1fr}.mosaic .a{grid-column:span 2}form.cb{grid-template-columns:1fr}.top .btn{display:none}}
@media(max-width:520px){.g3{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.nav .menu{display:flex;gap:24px;list-style:none;margin:0;padding:0}.nav .menu a{font-weight:500}
.page-main{padding:40px 0}
@media(max-width:860px){.nav .menu{flex-direction:column;gap:12px}}

/* hero vertical sliding columns */
.hero-art{display:grid;grid-template-columns:1fr 1fr;gap:14px;height:520px;overflow:hidden;align-self:stretch;margin-top:-56px;
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
.hero-art .col{overflow:hidden}
.hero-art .track{display:flex;flex-direction:column;animation:slide-up 28s linear infinite}
.hero-art .col.down .track{animation-name:slide-down;animation-duration:32s}
.hero-art .tile{margin-bottom:14px}
.hero-art .tile .ph{aspect-ratio:3/4}
.hero-art:hover .track{animation-play-state:paused}
@keyframes slide-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes slide-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@media(max-width:860px){.hero-art{height:380px;margin-top:0}}
@media(prefers-reduced-motion:reduce){.hero-art .track{animation:none}}