/* ===== Catalog page styles ===== */

/* 1) Catalog Hero */
.c-hero{ position:relative; padding-block: clamp(64px, 10vw, 120px); overflow: clip; }
.ch-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.ch-ribbons{
  display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 10px;
}
.ch-ribbon{
  background:#f3faf6; border:1px solid rgba(0,0,0,.06); border-radius:999px;
  padding:10px 14px; font-weight:800; box-shadow:0 8px 20px rgba(0,0,0,.06);
  transition: transform .2s, box-shadow .2s;
}
.ch-ribbon:hover{ transform: translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.10); }

.ch-photos{
  display:grid; grid-template-columns: repeat(2,1fr); gap:12px; margin-top:12px;
}
.ch-fig{ margin:0; background:#fff; border-radius:16px; padding:10px; box-shadow:0 12px 28px rgba(0,0,0,.08); }
.ch-fig img{ border-radius:10px; }
.ch-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

.ch-wave{
  position:absolute; left:0; right:0; bottom:-20px; height:70px;
  background: radial-gradient(120% 70px at 50% 0, rgba(45,106,79,.18), transparent 70%);
  filter: blur(.6px);
}
@media (max-width: 820px){
  .ch-photos{ grid-template-columns: 1fr; }
}

/* 2) Milk & Cultures — staggered shelves */
.milk-cultures{ padding-block: clamp(56px, 8vw, 96px); }
.mc-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.mc-shelves{
  display:grid; grid-template-columns: repeat(2,1fr); gap:12px;
  position:relative;
}
.mc-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  position:relative;
}
.mc-card.s1{ transform: translateY(0); }
.mc-card.s2{ transform: translateY(12px); }
.mc-card.s3{ transform: translateY(0); }
.mc-card.s4{ transform: translateY(12px); }

.mc-specs{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 0; padding:0; list-style:none; }
.mc-specs li{
  background:#f3faf6; border:1px solid rgba(0,0,0,.06); border-radius:999px; padding:6px 10px; font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}

.mc-photos{
  display:grid; grid-template-columns: repeat(2,1fr); gap:12px; margin-top:12px;
}
.mc-fig{ margin:0; background:#fff; border-radius:16px; padding:10px; box-shadow:0 12px 28px rgba(0,0,0,.08); }
.mc-fig img{ border-radius:10px; }
.mc-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 960px){
  .mc-shelves{ grid-template-columns: 1fr; }
  .mc-card.s2, .mc-card.s4{ transform:none; }
  .mc-photos{ grid-template-columns: 1fr; }
}

/* 3) Seasonal Greens Box — accordion */
.greens-box{ padding-block: clamp(56px, 8vw, 96px); }
.gb-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.gb-wrap{ display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(12px, 2.5vw, 24px); align-items:start; }
.gb-item{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:12px 14px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.gb-item > summary{ cursor:pointer; font-weight:800; list-style:none; }
.gb-item > summary::-webkit-details-marker{ display:none; }
.gb-item[open]{ border-color: rgba(45,106,79,.3); }

.gb-side{ display:grid; gap:12px; }
.gb-fig{ margin:0; background:#fff; border-radius:16px; padding:10px; box-shadow:0 12px 28px rgba(0,0,0,.08); }
.gb-fig img{ border-radius:10px; }
.gb-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 980px){
  .gb-wrap{ grid-template-columns: 1fr; }
}
/* ===== 4) Label Anatomy ===== */
.label-anatomy{ padding-block: clamp(56px, 8vw, 96px); }
.la-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.la-grid{
  display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(12px, 2.5vw, 20px);
  align-items:start;
}
.la-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.la-points{ display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:8px 0 0; list-style:none; }
.la-points li{
  background:#f3faf6; border:1px solid rgba(0,0,0,.06); border-radius:999px; padding:6px 10px; font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.la-fig{ margin:0; background:#fff; border-radius:16px; padding:10px; box-shadow:0 12px 28px rgba(0,0,0,.08); }
.la-fig img{ border-radius:10px; }
.la-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 980px){
  .la-grid{ grid-template-columns: 1fr; }
}

/* ===== 5) Cuts & Uses ===== */
.cuts-uses{ padding-block: clamp(56px, 8vw, 96px); }
.cu-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.cu-grid{
  display:grid; grid-template-columns: repeat(6, 1fr); gap:12px; align-items:start;
}
.cu-chip{
  grid-column: span 2;
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.cu-fig{
  margin:0; grid-column: span 3;
  background:#fff; border-radius:16px; padding:10px; box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.cu-fig img{ border-radius:10px; }
.cu-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 980px){
  .cu-grid{ grid-template-columns: 1fr; }
  .cu-chip, .cu-fig{ grid-column: auto; }
}

/* ===== 6) Cold Chain ===== */
.cold-chain{ padding-block: clamp(56px, 8vw, 96px); }
.cc-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.cc-track{ display:grid; gap:12px; }
.cc-steps{
  counter-reset: cc; list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(2,1fr); gap:12px;
}
.cc-step{
  position:relative; padding:14px 14px 14px 56px;
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.cc-step::before{
  counter-increment: cc; content: counter(cc);
  position:absolute; left:12px; top:12px; width:28px; height:28px; border-radius:10px;
  display:grid; place-items:center; background:#2d6a4f; color:#fff; font-weight:800;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
}

.cc-photos{
  display:grid; grid-template-columns: repeat(2,1fr); gap:12px;
}
.cc-fig{ margin:0; background:#fff; border-radius:16px; padding:10px; box-shadow:0 12px 28px rgba(0,0,0,.08); }
.cc-fig img{ border-radius:10px; }
.cc-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 900px){
  .cc-steps{ grid-template-columns: 1fr; }
  .cc-photos{ grid-template-columns: 1fr; }
}
/* ===== 7) Spice Pairings ===== */
.spice-pairings{ padding-block: clamp(56px, 8vw, 96px); }
.sp-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.sp-chips{
  display:grid; grid-template-columns: repeat(3,1fr);
  gap: clamp(12px, 2.5vw, 20px); margin-bottom: 10px;
}
.sp-chip{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  transition: transform .2s, box-shadow .2s;
}
.sp-chip:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.12); }

.sp-photos{
  display:grid; grid-template-columns: repeat(2,1fr); gap:12px;
}
.sp-fig{ margin:0; background:#fff; border-radius:16px; padding:10px; box-shadow:0 12px 28px rgba(0,0,0,.08); }
.sp-fig img{ border-radius:10px; }
.sp-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 980px){
  .sp-chips{ grid-template-columns: 1fr; }
  .sp-photos{ grid-template-columns: 1fr; }
}

/* ===== 8) Jar Returns ===== */
.jar-returns{ padding-block: clamp(56px, 8vw, 96px); }
.jr-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.jr-track{ display:grid; gap:12px; }
.jr-steps{
  counter-reset: jr; list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(2,1fr); gap:12px;
}
.jr-step{
  position:relative; padding:14px 14px 14px 56px;
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.jr-step::before{
  counter-increment: jr; content: counter(jr);
  position:absolute; left:12px; top:12px; width:28px; height:28px; border-radius:10px;
  display:grid; place-items:center; background:#2d6a4f; color:#fff; font-weight:800;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
}

.jr-photos{
  display:grid; grid-template-columns: repeat(2,1fr); gap:12px;
}
.jr-fig{ margin:0; background:#fff; border-radius:16px; padding:10px; box-shadow:0 12px 28px rgba(0,0,0,.08); }
.jr-fig img{ border-radius:10px; }
.jr-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 900px){
  .jr-steps{ grid-template-columns: 1fr; }
  .jr-photos{ grid-template-columns: 1fr; }
}

/* ===== 9) Allergen & Info ===== */
.allergen-info{ padding-block: clamp(56px, 8vw, 96px); }
.ai-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.ai-grid{
  display:grid; grid-template-columns: repeat(4,1fr);
  gap: clamp(12px, 2.5vw, 20px);
}
.ai-tile{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  transition: transform .2s, box-shadow .2s;
}
.ai-tile:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.12); }

.ai-photos{
  display:grid; grid-template-columns: repeat(2,1fr); gap:12px; margin-top:12px;
}
.ai-fig{ margin:0; background:#fff; border-radius:16px; padding:10px; box-shadow:0 12px 28px rgba(0,0,0,.08); }
.ai-fig img{ border-radius:10px; }
.ai-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 980px){
  .ai-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
  .ai-grid{ grid-template-columns: 1fr; }
  .ai-photos{ grid-template-columns: 1fr; }
}
/* ===== 10) Breakfast Tiffins ===== */
.breakfast-tiffins{ padding-block: clamp(56px, 8vw, 96px); }
.bt-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.bt-grid{
  display:grid; grid-template-columns: repeat(3,1fr);
  gap: clamp(12px, 2.5vw, 20px);
}
.bt-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.08); transition: transform .2s, box-shadow .2s;
}
.bt-card:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.12); }

.bt-photos{
  display:grid; grid-template-columns: repeat(2,1fr); gap:12px; margin-top:12px;
}
.bt-fig{ margin:0; background:#fff; border-radius:16px; padding:10px; box-shadow:0 12px 28px rgba(0,0,0,.08); }
.bt-fig img{ border-radius:10px; max-width:350px; width:100%; }
.bt-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 980px){
  .bt-grid{ grid-template-columns: 1fr; }
  .bt-photos{ grid-template-columns: 1fr; }
}

/* ===== 11) Storage Guide ===== */
.storage-guide{ padding-block: clamp(56px, 8vw, 96px); }
.sg-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.sg-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px; align-items:start;
}
.sg-tile{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.sg-tile.good{ background:#f5fbf7; }
.sg-tile.bad{ background:#fff8f6; }

.sg-photos{
  display:grid; grid-template-columns: repeat(2,1fr); gap:12px; margin-top:12px;
}
.sg-fig{ margin:0; background:#fff; border-radius:16px; padding:10px; box-shadow:0 12px 28px rgba(0,0,0,.08); }
.sg-fig img{ border-radius:10px; max-width:350px; width:100%; }
.sg-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 900px){
  .sg-grid{ grid-template-columns: 1fr; }
  .sg-photos{ grid-template-columns: 1fr; }
}

/* ===== 12) Weekly Picks ===== */
.weekly-picks{ padding-block: clamp(56px, 8vw, 96px); }
.wp-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.wp-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:12px;
}
.wp-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.08); transition: transform .2s, box-shadow .2s;
}
.wp-card:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.12); }

.wp-photos{
  display:grid; grid-template-columns: repeat(2,1fr); gap:12px; margin-top:12px;
}
.wp-fig{ margin:0; background:#fff; border-radius:16px; padding:10px; box-shadow:0 12px 28px rgba(0,0,0,.08); }
.wp-fig img{ border-radius:10px; max-width:350px; width:100%; }
.wp-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 980px){
  .wp-grid{ grid-template-columns: 1fr; }
  .wp-photos{ grid-template-columns: 1fr; }
}
/* ===== 13) Pack Materials ===== */
.pack-materials{ padding-block: clamp(56px, 8vw, 96px); }
.pm-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.pm-grid{
  display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(12px, 2.5vw, 20px);
  align-items:start;
}
.pm-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.pm-fig{ margin:0; background:#fff; border-radius:16px; padding:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.08); }
.pm-fig img{ border-radius:10px; max-width:350px; width:100%; }
.pm-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 980px){
  .pm-grid{ grid-template-columns: 1fr; }
}

/* ===== 14) Farmer Notes ===== */
.farmer-notes{ padding-block: clamp(56px, 8vw, 96px); }
.fn-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.fn-grid{
  display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(12px, 2.5vw, 24px); align-items:start;
}
.fn-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:14px; margin-bottom:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.fn-photos{ display:grid; gap:12px; }
.fn-fig{ margin:0; background:#fff; border-radius:16px; padding:10px; box-shadow:0 12px 28px rgba(0,0,0,.08); }
.fn-fig img{ border-radius:10px; max-width:350px; width:100%; }
.fn-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 980px){
  .fn-grid{ grid-template-columns: 1fr; }
}

/* ===== 15) Café Partners ===== */
.cafe-partners{ padding-block: clamp(56px, 8vw, 96px); }
.cp-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.cp-grid{ display:grid; gap:12px; }
.cp-tile{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}

.cp-photos{
  display:grid; grid-template-columns: repeat(2,1fr); gap:12px;
}
.cp-fig{ margin:0; background:#fff; border-radius:16px; padding:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.08); }
.cp-fig img{ border-radius:10px; max-width:350px; width:100%; }
.cp-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 840px){
  .cp-photos{ grid-template-columns: 1fr; }
}
/* ===== 16) Pick Your Jar ===== */
.pick-jar{ padding-block: clamp(56px, 8vw, 96px); }
.pj-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.pj-grid{
  display:grid; grid-template-columns: repeat(4,1fr);
  gap: clamp(12px, 2.5vw, 20px);
}
.pj-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.08); transition: transform .2s, box-shadow .2s;
}
.pj-card:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.12); }
.pj-price{ font-weight:800; color:#2d6a4f; margin:6px 0 8px; }
.pj-badges{ display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; list-style:none; }
.pj-badges li{
  background:#f3faf6; border:1px solid rgba(0,0,0,.06); border-radius:999px; padding:6px 10px; font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}

.pj-photos{
  display:grid; grid-template-columns: repeat(4,1fr); gap:12px; margin-top:12px;
}
.pj-fig{ margin:0; background:#fff; border-radius:16px; padding:10px; box-shadow:0 12px 28px rgba(0,0,0,.08); }
.pj-fig img{ border-radius:10px; max-width:350px; width:100%; }
.pj-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 1080px){
  .pj-grid{ grid-template-columns: 1fr 1fr; }
  .pj-photos{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
  .pj-grid, .pj-photos{ grid-template-columns: 1fr; }
}

/* ===== 17) Route & Timing ===== */
.route-timing{ padding-block: clamp(56px, 8vw, 96px); }
.rt-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.rt-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(12px, 2.5vw, 24px); align-items:start; }
.rt-steps{
  counter-reset: rt; list-style:none; margin:0; padding:0; display:grid; gap:12px;
}
.rt-step{
  position:relative; padding:14px 14px 14px 56px;
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.rt-step::before{
  counter-increment: rt; content: counter(rt);
  position:absolute; left:12px; top:12px; width:28px; height:28px; border-radius:10px;
  display:grid; place-items:center; background:#2d6a4f; color:#fff; font-weight:800;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
}

.rt-photos{
  display:grid; gap:12px;
}
.rt-fig{ margin:0; background:#fff; border-radius:16px; padding:10px; box-shadow:0 12px 28px rgba(0,0,0,.08); }
.rt-fig img{ border-radius:10px; max-width:350px; width:100%; }
.rt-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 980px){
  .rt-grid{ grid-template-columns: 1fr; }
}

/* ===== 18) Care & Reuse ===== */
.care-reuse{ padding-block: clamp(56px, 8vw, 96px); }
.cr-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.cr-grid{
  display:grid; grid-template-columns: repeat(3,1fr);
  gap: clamp(12px, 2.5vw, 20px);
}
.cr-tip{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}

.cr-photos{
  display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-top:12px;
}
.cr-fig{ margin:0; background:#fff; border-radius:16px; padding:10px; box-shadow:0 12px 28px rgba(0,0,0,.08); }
.cr-fig img{ border-radius:10px; max-width:350px; width:100%; }
.cr-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; }

@media (max-width: 980px){
  .cr-grid{ grid-template-columns: 1fr; }
  .cr-photos{ grid-template-columns: 1fr; }
}
/* ===== Sourcing Notes (long-form) ===== */
.c-notes{
  position: relative;
  padding-block: clamp(64px, 10vw, 120px);
  background: radial-gradient(120% 80% at 50% 120%, #e9f4ee 0%, #f8fcfa 70%);
  overflow: clip;
}
.cn-head .eyebrow{ letter-spacing:.14em; text-transform:uppercase; color:#2d6a4f; font-weight:800; margin:0 0 8px; }

.cn-grid{
  display:grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(14px, 2.8vw, 28px); align-items:start; margin-top:10px;
}
.cn-text{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px;
  padding: clamp(14px, 2.4vw, 18px);
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  line-height:1.65;
}
.cn-text p + p{ margin-top:10px; }

.cn-fig{
  margin:0; background:#fff; border-radius:16px; padding:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  position: sticky; top: calc(var(--hdr-h, 64px) + 14px);
}
.cn-fig img{ display:block; width:100%; height:auto; max-width:350px; border-radius:10px; }
.cn-fig figcaption{ font-size:.9rem; color:#355d48; margin-top:6px; text-align:center; }

.cn-wave{
  position:absolute; left:0; right:0; bottom:-20px; height:70px;
  background: radial-gradient(120% 70px at 50% 0, rgba(45,106,79,.16), transparent 70%);
  filter: blur(.6px);
}

@media (max-width: 980px){
  .cn-grid{ grid-template-columns: 1fr; }
  .cn-fig{ position: relative; top: 0; }
}