/* ===== Bloom Skip Bins · Green waste ("Garden Almanac") ===== */
.gw{
  --forest:#1F3B26; --forest-2:#2C5236; --forest-ink:#142A1B; --moss:#5E7B4F; --sage:#DDE5D2; --sage-2:#C9D6BC;
  --yellow:#F5C400; --yellow-ink:#7A6100;
  --cream:#FAF6EC; --paper:#FFFDF7; --cream-2:#F1EBDC;
  --char:#2B2B2B; --stone:#57544B;
  --line:rgba(31,59,38,.16); --line-dark:rgba(250,246,236,.18);
  --f-head:"Poppins",system-ui,sans-serif;
  --f-body:"Inter",system-ui,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:8px;
  display:block; padding-top:100px; background:var(--cream); color:var(--char);
  font:400 1rem/1.65 var(--f-body); overflow-x:clip; -webkit-font-smoothing:antialiased;
}
.gw *,.gw *::before,.gw *::after{box-sizing:border-box}
.gw img{display:block; max-width:100%; height:auto}
.gw h1,.gw h2,.gw h3{font-family:var(--f-head); margin:0; text-wrap:balance}
:where(.gw) p{margin:0}
:where(.gw) a{color:inherit}
.gw :focus-visible{outline:3px solid var(--forest); outline-offset:3px; border-radius:4px}
.gw .is-dark :focus-visible{outline-color:var(--yellow)}
.gw section{scroll-margin-top:110px}
.gw-wrap{width:min(100% - 32px, 1280px); margin-inline:auto}
.gw-label{display:inline-flex; align-items:center; gap:10px; font:600 .75rem/1.2 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--moss)}
.gw-label svg{width:16px; height:16px}
.is-dark .gw-label{color:var(--yellow)}
.gw-h2{font-size:clamp(1.85rem,4.4vw,3.25rem); font-weight:800; line-height:1.06; letter-spacing:-.02em; color:var(--forest)}
.is-dark .gw-h2{color:var(--cream)}
.gw-lede{font-size:1.0625rem; color:var(--stone); max-width:58ch}
.is-dark .gw-lede{color:rgba(250,246,236,.82)}

.gw-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 24px; border-radius:999px; font:700 1rem/1 var(--f-body); text-decoration:none; border:2px solid transparent; transition:transform .2s ease; white-space:nowrap}
.gw-btn svg{width:18px; height:18px; flex:none}
.gw-btn:hover{transform:translateY(-2px)}
.gw-btn--yellow{background:var(--yellow); color:var(--char)}
.gw-btn--forest{background:var(--forest); color:var(--cream)}
.gw-btn--line{border-color:var(--forest); color:var(--forest)}
.gw-btn--ghost{border-color:rgba(250,246,236,.6); color:var(--cream)}
.gw-actions{display:flex; flex-wrap:wrap; gap:12px}

/* Leaf vein divider (signature motif) */
.gw-vein{display:block; width:100%; height:28px; color:var(--sage-2)}

/* ===== 1. Hero ===== */
.gw-hero{padding:24px 0 72px}
.gw-crumbs ol{list-style:none; margin:0 0 22px; padding:0; display:flex; gap:8px; font:500 .8125rem/1.4 var(--f-mono); color:var(--stone)}
.gw-crumbs li+li::before{content:"›"; margin-right:8px}
.gw-crumbs a{text-decoration:none; border-bottom:1px solid var(--line)}
.gw-crumbs [aria-current]{color:var(--forest); font-weight:700}
.gw-hero__grid{display:grid; gap:36px}
.gw-h1{margin-top:16px !important; font-size:clamp(2.5rem,7.6vw,5.4rem); font-weight:800; line-height:.98; letter-spacing:-.035em; color:var(--forest)}
.gw-h1 span{display:block; color:var(--moss)}
.gw-hero__intro{margin-top:22px; font-size:1.125rem; color:var(--stone); max-width:50ch}
.gw-hero .gw-actions{margin-top:28px}
.gw-tags{list-style:none; margin:30px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.gw-tags li{font:600 .8125rem/1 var(--f-body); padding:10px 14px; border-radius:999px; background:var(--sage); color:var(--forest)}
.gw-hero__media{position:relative; margin:0}
.gw-hero__main{border-radius:200px 200px var(--r) var(--r); overflow:hidden; background:var(--sage)}
.gw-hero__main img{width:100%; aspect-ratio:4/5; object-fit:cover}
.gw-hero__detail{position:absolute; left:-12px; bottom:-28px; width:44%; margin:0; padding:10px 10px 12px; background:var(--paper); border-radius:4px; box-shadow:0 22px 44px -20px rgba(20,42,27,.45); transform:rotate(-3deg)}
.gw-hero__detail img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:2px}
.gw-hero__detail figcaption{margin-top:8px; font:600 .68rem/1.3 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--moss)}
@media (min-width:1024px){
  .gw-hero{padding:32px 0 120px}
  .gw-hero__grid{grid-template-columns:6fr 5fr; gap:72px; align-items:center}
  .gw-hero__detail{left:-64px; bottom:48px; width:40%}
}

/* ===== 2. Herbarium: what counts ===== */
.gw-herb{padding:88px 0; background:var(--paper); border-block:1px solid var(--line)}
.gw-herb__head{display:grid; gap:18px; margin-bottom:44px}
.gw-herb__head .gw-h2{margin-top:14px}
.gw-sheets{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.gw-sheet{position:relative; background:var(--cream); border:1px solid var(--line); border-radius:4px; padding:12px 12px 14px; display:flex; flex-direction:column; gap:12px}
.gw-sheet__img{position:relative; margin:0}
.gw-sheet__img img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px; filter:saturate(.95)}
.gw-sheet__img::before,.gw-sheet__img::after{content:""; position:absolute; z-index:1; width:46px; height:16px; background:rgba(245,196,0,.42); top:-6px}
.gw-sheet__img::before{left:10px; transform:rotate(-8deg)}
.gw-sheet__img::after{right:10px; transform:rotate(7deg)}
.gw-sheet__no{font:600 .68rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--moss)}
.gw-sheet h3{font-size:1.125rem; font-weight:700; color:var(--forest); line-height:1.2; margin-top:4px}
.gw-sheet p{font-size:.875rem; color:var(--stone); line-height:1.5}
.gw-verdict{align-self:flex-start; margin-top:auto; display:inline-flex; align-items:center; gap:6px; font:700 .75rem/1 var(--f-body); padding:7px 10px; border-radius:999px; background:var(--forest); color:var(--cream)}
.gw-verdict svg{width:13px; height:13px}
.gw-rules{margin-top:20px; display:grid; gap:14px}
.gw-rule{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; align-items:start; padding:22px; border-radius:var(--r)}
.gw-rule__icon{grid-row:span 2; width:44px; height:44px; border-radius:50%; display:grid; place-items:center}
.gw-rule__icon svg{width:20px; height:20px}
.gw-rule h3{font-size:1.0625rem; font-weight:700}
.gw-rule p{font-size:.9375rem}
.gw-rule--ask{background:#FCF0BF}
.gw-rule--ask .gw-rule__icon{background:var(--yellow); color:var(--char)}
.gw-rule--out{background:var(--forest-ink); color:var(--cream)}
.gw-rule--out .gw-rule__icon{background:rgba(250,246,236,.12); color:var(--cream)}
.gw-rule--out p{color:rgba(250,246,236,.85)}
.gw-rule--out a{color:var(--yellow); font-weight:700}
@media (min-width:720px){ .gw-sheets{grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px} .gw-rules{grid-template-columns:1fr 1fr} }
@media (min-width:1100px){
  .gw-herb{padding:128px 0}
  .gw-herb__head{grid-template-columns:7fr 5fr; align-items:end}
  .gw-sheets{grid-template-columns:repeat(5,minmax(0,1fr))}
  .gw-sheet:nth-child(even){transform:translateY(28px)}
  .gw-rules{margin-top:60px}
}

/* ===== 3. Before / after ===== */
.gw-compare-sec{padding:96px 0}
.gw-compare-sec .gw-h2{margin:14px 0 16px; max-width:20ch}
.gw-compare{margin:40px 0 0; display:grid; gap:12px}
.gw-compare__pane{position:relative; margin:0; border-radius:var(--r); overflow:hidden; background:var(--sage)}
.gw-compare__pane img{width:100%; aspect-ratio:16/10; object-fit:cover}
.gw-chip{position:absolute; top:16px; z-index:3; font:700 .75rem/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; padding:9px 12px; border-radius:999px; background:var(--paper); color:var(--forest)}
.gw-chip--before{left:16px}
.gw-chip--after{right:16px; background:var(--yellow); color:var(--char)}
.gw-compare__cap{font:500 .8125rem/1.5 var(--f-mono); color:var(--stone); margin-top:14px}
.gw-compare__range,.gw-compare__handle{display:none}
@media (min-width:720px){ .gw-compare{grid-template-columns:1fr 1fr} }
/* Live slider (JS adds .is-live) */
.gw-compare.is-live{display:block; position:relative; border-radius:var(--r); overflow:hidden; touch-action:pan-y}
.gw-compare.is-live .gw-compare__pane{border-radius:0}
.gw-compare.is-live .gw-compare__pane--after{position:absolute; inset:0; clip-path:inset(0 0 0 var(--p,50%))}
.gw-compare.is-live .gw-compare__pane--after img{height:100%}
.gw-compare.is-live .gw-compare__handle{display:block; position:absolute; top:0; bottom:0; left:var(--p,50%); width:0; z-index:4; pointer-events:none}
.gw-compare__handle::before{content:""; position:absolute; top:0; bottom:0; left:-1.5px; width:3px; background:var(--paper)}
.gw-compare__knob{position:absolute; top:50%; left:0; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; background:var(--yellow); color:var(--char); display:grid; place-items:center; box-shadow:0 10px 30px -8px rgba(0,0,0,.45)}
.gw-compare__knob svg{width:26px; height:26px}
.gw-compare.is-live .gw-compare__range{display:block; position:absolute; inset:0; z-index:5; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize}
.gw-compare__range:focus-visible ~ .gw-compare__handle .gw-compare__knob{outline:3px solid var(--forest); outline-offset:4px}
@media (min-width:1024px){ .gw-compare-sec{padding:136px 0} .gw-compare-sec__head{display:grid; grid-template-columns:7fr 5fr; gap:40px; align-items:end} }

/* ===== 4. Sizes: growth rings ===== */
.gw-sizes{background:var(--forest); color:var(--cream); padding:96px 0; position:relative; overflow:hidden}
.gw-sizes__grid{display:grid; gap:48px}
.gw-sizes .gw-h2{margin:14px 0 18px}
.gw-rings{position:relative; width:min(100%,440px); aspect-ratio:1; margin-inline:auto}
.gw-ring{position:absolute; left:50%; top:50%; width:var(--d); aspect-ratio:1; margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius:50%; border:1.5px solid rgba(221,229,210,.35)}
.gw-ring::before{content:""; position:absolute; inset:-1.5px; border-radius:50%; border:3px solid var(--yellow); background:rgba(245,196,0,.08); opacity:0; transition:opacity .35s ease}
.gw-ring.is-active::before{opacity:1}
.gw-ring span{position:absolute; left:50%; top:0; transform:translate(-50%,-50%); font:700 .7rem/1 var(--f-mono); letter-spacing:.06em; padding:4px 7px; border-radius:999px; background:var(--forest); color:var(--sage); border:1px solid rgba(221,229,210,.3)}
.gw-ring.is-active span{background:var(--yellow); color:var(--char); border-color:var(--yellow)}
.gw-rings__core{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:30%; text-align:center; font:700 .75rem/1.35 var(--f-head); color:var(--sage)}
.gw-jobs{list-style:none; margin:0; padding:0}
.gw-job{display:grid; grid-template-columns:1fr auto; gap:6px 18px; padding:22px 0; border-top:1px solid var(--line-dark); transition:opacity .3s ease}
.gw-job:last-child{border-bottom:1px solid var(--line-dark)}
.gw-job h3{font-size:1.1875rem; font-weight:700}
.gw-job p{grid-column:1/-1; color:rgba(250,246,236,.8); font-size:.9375rem}
.gw-job__size{font:800 1.125rem/1.2 var(--f-head); color:var(--yellow); text-align:right}
.gw-job__size small{display:block; font:500 .7rem/1.3 var(--f-mono); letter-spacing:.04em; color:rgba(250,246,236,.7)}
.gw-job a{grid-column:1/-1; justify-self:start; display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.9375rem; text-decoration:none; color:var(--cream); border-bottom:2px solid var(--yellow); padding:8px 0 3px}
.gw-job a svg{width:15px; height:15px}
.gw-jobs.has-active .gw-job:not(.is-active){opacity:.55}
.gw-sizes__note{margin-top:24px; font-size:.9375rem; color:rgba(250,246,236,.8)}
.gw-sizes__note a{color:var(--yellow); font-weight:700}
@media (min-width:1024px){
  .gw-sizes{padding:136px 0}
  .gw-sizes__grid{grid-template-columns:5fr 7fr; gap:80px; align-items:center}
  .gw-rings{position:sticky; top:130px}
}

/* ===== 5. Where it goes ===== */
.gw-cycle{padding:96px 0}
.gw-cycle__grid{display:grid; gap:44px}
.gw-cycle__fig{margin:0; position:relative}
.gw-cycle__fig img{width:100%; aspect-ratio:5/4; object-fit:cover; border-radius:var(--r) var(--r) 160px var(--r)}
.gw-cycle .gw-h2{margin:14px 0 18px}
.gw-cycle__body p+p{margin-top:14px}
.gw-cycle__body p{color:var(--stone)}
.gw-loop{list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; counter-reset:c}
.gw-loop li{counter-increment:c; position:relative; padding:20px 18px; border-radius:var(--r); background:var(--sage); color:var(--forest)}
.gw-loop li::before{content:counter(c); display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--forest); color:var(--cream); font:700 .8125rem/1 var(--f-mono); margin-bottom:12px}
.gw-loop li:last-child{background:var(--forest); color:var(--cream)}
.gw-loop li:last-child::before{background:var(--yellow); color:var(--char)}
.gw-loop b{display:block; font:700 1rem/1.25 var(--f-head)}
.gw-loop span{display:block; font-size:.8125rem; margin-top:4px; opacity:.85}
.gw-loop__back{margin-top:16px; display:flex; align-items:center; gap:10px; font:600 .75rem/1.3 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--moss)}
.gw-loop__back svg{width:18px; height:18px}
@media (min-width:1024px){
  .gw-cycle{padding:136px 0}
  .gw-cycle__grid{grid-template-columns:6fr 6fr; gap:80px; align-items:center}
  .gw-loop{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ===== 6. Almanac ===== */
.gw-almanac{padding:96px 0; background:var(--cream-2)}
.gw-almanac__head{display:grid; gap:18px; margin-bottom:40px}
.gw-almanac .gw-h2{margin-top:14px}
.gw-seasons{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.gw-season{position:relative; display:grid; grid-template-columns:auto 1fr; gap:4px 16px; padding:24px; border-radius:var(--r); background:var(--paper); border:1px solid var(--line)}
.gw-season__glyph{grid-row:span 3; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--sage); color:var(--forest)}
.gw-season__glyph svg{width:24px; height:24px}
.gw-season__months{font:600 .7rem/1.2 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--moss)}
.gw-season h3{font-size:1.25rem; font-weight:800; color:var(--forest)}
.gw-season p{color:var(--stone); font-size:.9375rem}
.gw-season--peak .gw-season__glyph{background:var(--forest); color:var(--yellow)}
.gw-peak{display:inline-block; margin-left:8px; vertical-align:middle; font:700 .62rem/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; padding:5px 7px; border-radius:999px; background:var(--sage); color:var(--forest)}
.gw-now{display:none; position:absolute; top:-11px; right:18px; font:700 .68rem/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; padding:6px 10px; border-radius:999px; background:var(--yellow); color:var(--char)}
.gw-season.is-now{border:2px solid var(--forest)}
.gw-season.is-now .gw-now{display:block}
.gw-almanac__photo{margin:40px 0 0; border-radius:var(--r); overflow:hidden}
.gw-almanac__photo img{width:100%; aspect-ratio:16/9; object-fit:cover}
@media (min-width:760px){ .gw-seasons{grid-template-columns:1fr 1fr} }
@media (min-width:1100px){
  .gw-almanac{padding:136px 0}
  .gw-almanac__head{grid-template-columns:7fr 5fr; align-items:end}
  .gw-almanac__body{display:grid; grid-template-columns:7fr 5fr; gap:28px; align-items:stretch}
  .gw-almanac__photo{margin:0}
  .gw-almanac__photo img{height:100%; aspect-ratio:auto}
  .gw-seasons{grid-template-columns:1fr 1fr}
}

/* ===== 7. Links band ===== */
.gw-links{padding:72px 0}
.gw-links__grid{display:grid; gap:14px}
.gw-link-card{display:grid; gap:10px; padding:28px; border-radius:var(--r); text-decoration:none; border:1px solid var(--line); background:var(--paper); transition:transform .25s ease}
.gw-link-card:hover{transform:translateY(-3px)}
.gw-link-card h3{font-size:1.25rem; font-weight:700; color:var(--forest)}
.gw-link-card p{color:var(--stone); font-size:.9375rem}
.gw-link-card b{display:inline-flex; gap:8px; align-items:center; font-weight:700; color:var(--forest); border-bottom:2px solid var(--yellow); justify-self:start; padding-bottom:2px}
.gw-link-card b svg{width:15px; height:15px}
.gw-areas{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.gw-areas a{display:inline-block; padding:10px 14px; border-radius:999px; background:var(--sage); color:var(--forest); font:600 .875rem/1 var(--f-body); text-decoration:none}
.gw-areas a:hover{background:var(--sage-2)}
@media (min-width:900px){ .gw-links__grid{grid-template-columns:1fr 1.4fr} }

/* ===== 8. FAQ plant tags ===== */
.gw-faq{padding:96px 0 104px}
.gw-faq__head{text-align:center; max-width:720px; margin:0 auto 48px}
.gw-faq__head .gw-h2{margin-top:14px}
.gw-tagsq{list-style:none; margin:0; padding:0; display:grid; gap:28px}
.gw-tagq{position:relative; padding:44px 26px 28px; background:var(--paper); border:1px solid var(--line); border-radius:60px 60px var(--r) var(--r); box-shadow:0 18px 36px -28px rgba(20,42,27,.4)}
.gw-tagq::before{content:""; position:absolute; top:18px; left:50%; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:var(--cream-2); box-shadow:inset 0 0 0 2px var(--sage-2)}
.gw-tagq::after{content:""; position:absolute; left:50%; bottom:-22px; width:8px; height:22px; margin-left:-4px; background:var(--sage-2); border-radius:0 0 3px 3px}
.gw-tagq h3{font-size:1.1875rem; font-weight:700; color:var(--forest); line-height:1.3; margin-top:8px}
.gw-tagq p{margin-top:10px; color:var(--stone); font-size:.9375rem}
@media (min-width:860px){ .gw-faq{padding:136px 0 144px} .gw-tagsq{grid-template-columns:1fr 1fr; gap:40px 28px} .gw-tagq:nth-child(odd){transform:rotate(-.8deg)} .gw-tagq:nth-child(even){transform:rotate(.8deg) translateY(24px)} }

/* ===== 9. Close ===== */
.gw-close{position:relative; isolation:isolate; padding:120px 0; color:var(--cream); overflow:hidden}
.gw-close__bg{position:absolute; inset:0; z-index:-2; margin:0}
.gw-close__bg img{width:100%; height:100%; object-fit:cover}
.gw-close::before{content:""; position:absolute; inset:0; z-index:-1; background:rgba(20,42,27,.82)}
.gw-close__inner{max-width:760px}
.gw-close .gw-h2{margin:14px 0 18px; font-size:clamp(2.1rem,5.6vw,4rem)}
.gw-close p{color:rgba(250,246,236,.86); font-size:1.0625rem; max-width:54ch}
.gw-close .gw-actions{margin-top:30px}

/* Reveal (JS only) */
.gw.js .gw-reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.gw.js .gw-reveal.is-in{opacity:1; transform:none}
@media (min-width:1100px){ .gw.js .gw-sheet.gw-reveal.is-in:nth-child(even){transform:translateY(28px)} }
@media (prefers-reduced-motion:reduce){
  .gw *,.gw *::before,.gw *::after{animation:none !important; transition:none !important}
  .gw.js .gw-reveal{opacity:1; transform:none}
  .gw-btn:hover,.gw-link-card:hover{transform:none}
}

/* Season photo: cover the column beside the season cards; the cards set the height, not the photo */
@media (min-width: 1100px) {
  .gw .gw-almanac__photo { position: relative; min-height: 320px; }
  .gw .gw-almanac__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}