.story-progress {position: fixed; top: 0; left: 0; z-index: 200; width: 0; height: 3px; background: #9b4f31;}
.story-page {overflow: hidden; background: linear-gradient(180deg, rgba(18, 103, 70, 0.045), transparent 36rem), var(--paper); color: var(--ink);}
.story-hero {min-height: calc(70vh - var(--global-nav-height, 64px)); min-height: calc(70svh - var(--global-nav-height, 64px)); display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.78fr); gap: clamp(34px, 5.2vw, 76px); align-items: center; padding-block: clamp(52px, 6vw, 84px) clamp(38px, 5vw, 64px); border-bottom: 1px solid var(--line, #d9e1da);}
.story-eyebrow,
.story-label,
.story-mono {font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: var(--type-label-track-tight, 0.046em);}
.story-eyebrow,
.story-label {color: var(--green);}
.story-hero h1,
.story-section h2,
.story-close h2 {margin: 0; font-family: var(--serif); font-weight: 400; text-wrap: balance;}
.story-hero h1 {max-width: 860px; margin-top: 18px; font-size: var(--type-display); line-height: var(--type-display-leading);}
.story-deck {max-width: 720px; margin: 24px 0 0; color: var(--nav-muted); font-size: var(--type-body-large); line-height: 1.64; text-wrap: pretty;}
.story-deck-emphasis {display: block; margin-top: 12px; color: var(--ink); font-weight: 600;}
.story-chips {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; max-width: 850px; margin-top: 38px; border: 1px solid var(--line, #d9e1da); background: var(--line, #d9e1da);}
.story-chip {min-height: 118px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; background: rgba(255, 255, 255, 0.62);}
.story-chip strong {display: block; max-width: 100%; font-family: var(--serif); font-size: clamp(2rem, 3vw, 3.25rem); font-weight: 400; line-height: 1;}
.story-chip span {max-width: 19ch; color: var(--nav-muted);}
.story-evidence-tag {display: block; margin-bottom: 8px; color: var(--green); font-family: var(--mono); font-size: 0.68rem; font-weight: 600; line-height: 1.35; letter-spacing: var(--type-label-track-tight, 0.046em); text-transform: uppercase;}
.story-section.dark .story-evidence-tag {color: #9ecbb3;}
.story-visual {margin: 0; box-shadow: 0 18px 44px rgba(10, 28, 15, 0.13);}
.story-visual img,
.story-photo img,
.story-asset img {width: 100%; height: auto; border-radius: 8px; background: #e9eee8;}
.story-visual img {aspect-ratio: 1 / 1.12; object-fit: cover; box-shadow: 0 28px 70px rgba(10, 28, 15, 0.18);}
.story-section {border-bottom: 1px solid var(--line, #d9e1da); padding-block: clamp(62px, 7.4vw, 104px);}
.story-page > .story-section:last-of-type {padding-bottom: clamp(26px, 3.2vw, 44px);}
.story-section.dark {background: var(--green-deep); color: white;}
.story-section.dark .story-label {color: #9ecbb3;}
.story-section.dark .story-standfirst,
.story-section.dark p,
.story-section.dark td {color: rgba(255, 255, 255, 0.72);}
.story-thesis {padding: clamp(32px, 4.4vw, 58px); border: 1px solid #29382f; border-radius: 8px; background: var(--green-deep); color: white;}
.story-thesis blockquote {max-width: 900px; margin: 18px 0 0; font-family: var(--serif); font-size: clamp(2rem, 3.8vw, 4.35rem); font-weight: 400;}
.story-thesis strong {color: #b6d4c1; font-weight: 400;}
.story-head {display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.58fr); gap: clamp(34px, 5vw, 76px); align-items: end; margin-bottom: clamp(34px, 5vw, 72px);}
.story-section h2,
.story-close h2 {max-width: 860px; margin-top: 14px; font-size: var(--type-section); line-height: var(--type-section-leading);}
.story-standfirst {margin: 0; color: var(--nav-muted); font-size: var(--type-body-large); line-height: 1.66; text-wrap: pretty;}
.story-decision-grid,
.story-proof-metrics {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line, #d9e1da); border-radius: 8px; overflow: hidden; background: var(--line, #d9e1da); gap: 1px;}
.story-decision,
.story-proof-metrics div {min-height: 210px; padding: 22px; background: rgba(255, 255, 255, 0.72);}
.story-decision h3,
.story-phase h3,
.story-cluster-copy h3,
.story-market-copy h3 {margin: 0; font-family: var(--serif); font-size: clamp(1.45rem, 2vw, 2rem); font-weight: 400; line-height: 1.16;}
.story-decision p,
.story-phase li,
.story-detail p,
.story-detail li,
.story-cluster-copy p,
.story-market-copy p {color: var(--nav-muted); line-height: 1.66; text-wrap: pretty;}
.story-decision span {display: block; margin-top: 28px; color: var(--green);}
.story-cluster-proof {display: grid; grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr); border: 1px solid var(--line, #d9e1da); border-radius: 8px; overflow: hidden; background: var(--line, #d9e1da);}
.story-cluster-number,
.story-cluster-copy {min-height: 360px; padding: clamp(28px, 4vw, 54px); background: rgba(255, 255, 255, 0.72);}
.story-cluster-number {display: flex; flex-direction: column; justify-content: space-between; background: var(--green-deep); color: white;}
.story-cluster-number strong {display: block; font-family: var(--serif); font-size: clamp(5.6rem, 12vw, 12rem); font-weight: 400; line-height: 0.88;}
.story-cluster-number span,
.story-cluster-number p {display: block; max-width: 24ch; color: rgba(255, 255, 255, 0.7);}
.story-cluster-copy h3 {font-size: clamp(2rem, 3.8vw, 4rem);}
.story-record-list {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 38px); margin: clamp(24px, 3.4vw, 42px) 0 0;}
.story-record-list div {padding: 16px 0 14px; border-top: 1px solid var(--line, #d9e1da);}
.story-record-list dt {font-family: var(--serif); font-size: 1.18rem;}
.story-record-list dd {margin: 7px 0 0; color: var(--nav-muted); font-size: 0.92rem; line-height: 1.5; text-wrap: pretty;}
.story-decision-grid {counter-reset: story-decision;}
.story-decision {counter-increment: story-decision;}
.story-decision::before {content: "0" counter(story-decision); display: block; margin-bottom: 28px; color: var(--green); font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em;}
.story-decision:first-child {background: var(--green-deep); color: white;}
.story-decision:first-child::before {color: #b6d4c1;}
.story-decision:first-child p {color: rgba(255,255,255,0.72);}
.story-timeline {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; overflow: hidden; background: var(--line, #d9e1da); gap: 1px; border-color: var(--line, #d9e1da);}
.story-split {display: grid; grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr); gap: clamp(38px, 6vw, 96px); align-items: stretch;}
.story-photo {margin: 0;}
.story-photo img {aspect-ratio: 1 / 1; object-fit: cover; object-position: center top;}
.story-note h2 {margin-top: 14px;}
.story-note p {max-width: 760px; color: var(--nav-muted); font-size: 1.05rem; line-height: 1.72;}
.story-gates {margin-top: 34px; border-top: 1px solid var(--line, #d9e1da);}
.story-gate {display: grid; grid-template-columns: 1fr; gap: 8px; border-bottom: 1px solid var(--line, #d9e1da); padding: 20px 0;}
.story-gate h3 {margin: 0; font-family: var(--serif); font-size: 1.45rem; font-weight: 400;}
.story-gate p {margin: 8px 0 0;}
.story-assets {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(38px, 5vw, 74px);}
.story-asset {margin: 0;}
.story-asset img {aspect-ratio: 1 / 0.9; object-fit: cover; object-position: center top;}
.story-asset figcaption,
.story-photo figcaption {margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(18, 42, 28, 0.16); color: var(--nav-muted); font-size: 0.82rem; line-height: 1.48;}
.story-market {display: grid; grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.08fr); border: 1px solid var(--line, #d9e1da); border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, 0.72);}
.story-market-media {min-height: 100%; margin: 0;}
.story-market-media img {width: 100%; height: 100%; min-height: 430px; object-fit: cover;}
.story-market-copy {padding: clamp(30px, 4.5vw, 64px);}
.story-market-copy h3 {margin-top: 18px; font-size: clamp(2.1rem, 4vw, 4.5rem);}
.story-market-copy blockquote {margin: 34px 0 0; padding: 24px; border-left: 4px solid var(--green); background: rgba(18, 103, 70, 0.07); color: var(--ink); font-family: var(--serif); font-size: clamp(1.45rem, 2.2vw, 2.2rem); line-height: 1.22;}
.story-proof-metrics {grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px;}
.story-proof-metrics div {min-height: 190px;}
.story-proof-metrics strong {display: block; font-family: var(--serif); font-size: clamp(2.2rem, 3.6vw, 4rem); font-weight: 400;}
.story-proof-metrics span {display: block; margin-top: 18px; color: var(--nav-muted); line-height: 1.55;}
.story-timeline {counter-reset: story-phase;}
.story-phase {counter-increment: story-phase; min-height: 250px; padding: 24px; background: rgba(255, 255, 255, 0.72);}
.story-phase::before {content: "0" counter(story-phase); display: block; margin-bottom: 28px; color: var(--green); font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em;}
.story-phase ul {margin: 18px 0 0; padding-left: 18px;}
.story-detail {border: 1px solid var(--line, #d9e1da); border-radius: 8px; background: rgba(255, 255, 255, 0.64); margin-top: 14px; overflow: hidden;}
.story-detail summary {cursor: pointer; padding: 20px 24px; font-family: var(--serif); font-size: 1.35rem;}
.story-detail div {border-top: 1px solid var(--line, #d9e1da); padding: 0 24px 22px;}
.story-detail p,
.story-detail ol,
.story-detail ul {max-width: 760px;}
.story-detail li {max-width: 720px;}
.story-close {position: relative; overflow: hidden; min-height: clamp(240px, 22vw, 340px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(22px, 4vw, 34px); align-items: center; width: min(100%, 1320px); margin-inline: auto; padding: clamp(28px, 4vw, 54px); border: 1px solid var(--close-line, rgba(255, 255, 255, 0.14)); border-radius: 10px 10px 0 0; background: linear-gradient( 135deg, var(--close-panel, #102c1f) 0%, var(--close-panel-2, #153827) 62%, #091910 100% ); color: var(--close-ink, #f4f7ef); box-shadow: none;}
.story-close::before {content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 90deg, var(--close-accent, #b7df62), transparent 24%, transparent 76%, var(--close-warm, #d5b56b) ), repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 96px ); background-size: 100% 3px, auto; background-repeat: no-repeat, repeat; opacity: 0.72;}
.story-close > * {position: relative; z-index: 1;}
.story-close .story-label {color: rgba(209, 232, 168, 0.78);}
.story-close p {max-width: 780px; color: rgba(255, 255, 255, 0.7);}
.story-close h2 {max-width: 13ch; color: var(--close-ink, #f4f7ef);}
.story-close .button-light {border-color: var(--close-accent, #b7df62); background: var(--close-accent, #b7df62); color: #102014; box-shadow: 0 12px 28px rgba(183, 223, 98, 0.18);}
.story-page > .story-section:has(.story-close) {position: relative; isolation: isolate; overflow: visible; margin-bottom: 0; padding-block: clamp(40px, 5vw, 68px) 0; background: linear-gradient( 180deg, rgba(246, 247, 241, 0) 0, rgba(246, 247, 241, 0) 45%, var(--close-bg, #0b2016) 45%, var(--close-bg, #0b2016) 100% );}
.story-page > .story-section:has(.story-close) > .container {width: 100%; max-width: none; box-sizing: border-box; overflow: visible; padding-inline: var(--gutter, clamp(20px, 5vw, 72px));}
.story-page:has(> .story-section:has(.story-close):last-child)
  + footer.site-footer {margin-top: 0;}
@media (max-width: 1080px) {.story-hero,
  .story-head,
  .story-split,
  .story-cluster-proof,
  .story-market { grid-template-columns: 1fr;} .story-decision-grid,
  .story-proof-metrics { grid-template-columns: repeat(2, minmax(0, 1fr));} .story-assets,
  .story-timeline { grid-template-columns: repeat(2, minmax(0, 1fr));} }
@media (max-width: 760px) {.story-hero { min-width:0; width:100%; min-height: 0; grid-template-columns:minmax(0,1fr); padding-block: 64px 56px;} .story-hero>* {min-width:0;} .story-hero h1 { width:100%; max-width:100%; font-size: clamp(2.65rem, 10vw, 3.45rem);} .story-decision-grid,
  .story-cluster-proof,
  .story-market,
  .story-close { grid-template-columns: 1fr;} .story-cluster-number,
  .story-cluster-copy { min-height: 0;} .story-market-media img { min-height: 300px;} .story-subnav { top: var(--subnav-offset, 60px);} .story-section h2,
  .story-close h2 { font-size: clamp(2rem, 8.4vw, 2.75rem);} .story-thesis { padding: 28px;} .story-thesis blockquote { font-size: clamp(1.9rem, 8.8vw, 2.7rem);} .story-close .button { width: 100%;} .story-chips,
  .story-proof-metrics { width:100%; min-width:0; max-width:100%; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc(100% - 30px); gap: 10px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: none;} .story-chips::-webkit-scrollbar,
  .story-proof-metrics::-webkit-scrollbar { display: none;} .story-chip,
  .story-proof-metrics > div { scroll-snap-align: start;} .story-proof-metrics > div { min-height: 150px;} }
@media (max-width: 760px) {
  body.page-scaling-biogas-bangladesh .story-section {padding-block: 58px;}
  body.page-scaling-biogas-bangladesh .story-head {gap: 20px; margin-bottom: 40px;}
  body.page-scaling-biogas-bangladesh .story-visual img {aspect-ratio: 4 / 3; object-position: center;}
  body.page-scaling-biogas-bangladesh .story-cluster-number {display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: end; padding: 22px;}
  body.page-scaling-biogas-bangladesh .story-cluster-number > div {display: flex; gap: 14px; align-items: end;}
  body.page-scaling-biogas-bangladesh .story-cluster-number strong {font-size: 4.6rem;}
  body.page-scaling-biogas-bangladesh .story-cluster-number p {margin: 0;}
  body.page-scaling-biogas-bangladesh .story-cluster-copy {padding: 26px 22px;}
  body.page-scaling-biogas-bangladesh .story-record-list {grid-template-columns: 1fr; margin-top: 22px;}
  body.page-scaling-biogas-bangladesh .story-record-list div {padding-block: 12px;}
  body.page-scaling-biogas-bangladesh .story-decision-grid {display: block; border-inline: 0; border-radius: 0; background: transparent;}
  body.page-scaling-biogas-bangladesh .story-decision {min-height: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; padding: 21px 0; border-bottom: 1px solid var(--line, #d9e1da); background: transparent; color: var(--ink);}
  body.page-scaling-biogas-bangladesh .story-decision::before {grid-row: 1 / span 2; margin: 4px 0 0; color: var(--green);}
  body.page-scaling-biogas-bangladesh .story-decision h3,
  body.page-scaling-biogas-bangladesh .story-decision p {grid-column: 2; margin-top: 0;}
  body.page-scaling-biogas-bangladesh .story-decision p,
  body.page-scaling-biogas-bangladesh .story-decision:first-child p {margin-bottom: 0; color: var(--nav-muted);}
  body.page-scaling-biogas-bangladesh .story-assets {display: grid; grid-template-columns: 1fr; gap: 24px;}
  body.page-scaling-biogas-bangladesh .story-asset img {aspect-ratio: 4 / 3;}
  body.page-scaling-biogas-bangladesh .story-timeline {display: block; border-inline: 0; border-radius: 0; background: transparent;}
  body.page-scaling-biogas-bangladesh .story-phase {min-height: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; padding: 21px 0; border-bottom: 1px solid var(--line, #d9e1da); background: transparent;}
  body.page-scaling-biogas-bangladesh .story-phase::before {grid-row: 1 / span 2; margin: 4px 0 0;}
  body.page-scaling-biogas-bangladesh .story-phase h3,
  body.page-scaling-biogas-bangladesh .story-phase ul {grid-column: 2;}
  body.page-scaling-biogas-bangladesh .story-phase ul {margin: 10px 0 0;}
}

/* Scaling Biogas: one field photograph carries the visual pause between use and market evidence. */
body.page-scaling-biogas-bangladesh .story-field-break {
  margin: clamp(46px, 6.5vw, 92px) 0 0;
}
body.page-scaling-biogas-bangladesh .story-field-break img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 10%;
  border-radius: 8px;
  background: #e9eee8;
}
body.page-scaling-biogas-bangladesh .story-field-break figcaption {
  display: grid;
  grid-template-columns: minmax(150px, .32fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(18, 42, 28, 0.16);
  color: var(--nav-muted);
  font-size: 0.82rem;
  line-height: 1.48;
}
body.page-scaling-biogas-bangladesh .story-field-break figcaption strong,
body.page-scaling-biogas-bangladesh .story-field-break figcaption span {
  display: block;
}
body.page-scaling-biogas-bangladesh .story-assets {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(30px, 4vw, 56px);
}
@media (max-width: 760px) {
  body.page-scaling-biogas-bangladesh .story-field-break {
    margin-top: 38px;
  }
  body.page-scaling-biogas-bangladesh .story-field-break img {
    aspect-ratio: 4 / 3;
    object-position: center 12%;
  }
  body.page-scaling-biogas-bangladesh .story-field-break figcaption {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  body.page-scaling-biogas-bangladesh .story-assets {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {.story-progress { display: none;} }
html,
body {overflow-x: clip;}
.story-hero h1,
.story-deck,
.story-section h2,
.story-close h2,
.story-thesis blockquote,
.story-cluster-number strong {overflow-wrap: normal; text-wrap: balance;}
@media (max-width: 760px) {.story-deck { font-size: 1.08rem; line-height: 1.5;} }
.story-close .button,
.story-page .button {min-height: 46px; border-radius: 999px; padding: 0 20px; font-family: var(--sans); font-size: 0.86rem; font-weight: 600; line-height: 1.12;}
@media (max-width: 760px) {.story-page > .story-section:has(.story-close) { padding-block: clamp(34px, 9vw, 48px) 0; background: linear-gradient( 180deg, rgba(246, 247, 241, 0) 0, rgba(246, 247, 241, 0) 38%, var(--close-bg, #0b2016) 38%, var(--close-bg, #0b2016) 100% );} .story-page > .story-section:has(.story-close) > .container { padding-inline: var(--gutter, 20px);} .story-close { min-height: 0; grid-template-columns: 1fr; border-radius: 14px 14px 0 0; padding: 28px 20px;} .story-close .button,
  .story-page .button { min-height: 44px; padding-inline: 16px;} }

.cd-mobile-contents {display:none;}
@media (max-width:720px) {
  .cd-mobile-contents {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    margin-block:24px;
    border-block:1px solid var(--line);
  }
  .cd-mobile-contents > * {padding:13px 8px; color:inherit; text-decoration:none; border-bottom:1px solid var(--line);}
  .cd-mobile-contents > span {grid-column:1/-1; color:var(--forest); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;}
}