.susi-page {
  --susi-ink: #f3f5ed;
  --susi-night: #07110e;
  --susi-paper: #ecece5;
  --susi-acid: #c9ef78;
  --susi-progress: 0;
  position: relative;
  overflow: visible;
  color: var(--susi-ink);
  background: var(--susi-night);
  font-family: Arial, Helvetica, sans-serif;
}

.susi-page *, .susi-page *::before, .susi-page *::after { box-sizing: border-box; }
.susi-page a { color: inherit; }
.susi-skip { position: fixed; z-index: 9999; top: .75rem; left: 1rem; padding: .75rem 1rem; color: #102016 !important; background: var(--susi-acid); transform: translateY(-180%); transition: transform .2s ease; }
.susi-skip:focus { transform: none; }

.susi-scroll-world { position: relative; height: 500vh; min-height: 3000px; }
.susi-stage { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; background: var(--susi-night); }
.susi-stage.is-pinned { position: fixed; top: 0; right: 0; bottom: auto; left: 0; }
.susi-stage.is-after { position: absolute; top: auto; right: 0; bottom: 0; left: 0; }
.susi-visual, .susi-image, .susi-vignette, .susi-light, .susi-atmosphere { position: absolute; inset: 0; width: 100%; height: 100%; }
.susi-visual { z-index: -2; overflow: hidden; }
.susi-image { background: url("/assets/images/sustainability/material-ecosystem-master.webp?v=1") 50% 50% / cover no-repeat; will-change: transform, filter; }
.susi-image--base { transform: scale(calc(1.03 + var(--susi-progress) * .16)) translate3d(calc(var(--susi-progress) * -3.3%), calc(var(--susi-progress) * 1.8%), 0); filter: saturate(calc(.88 + var(--susi-progress) * .08)) brightness(calc(.72 + var(--susi-progress) * .03)); }
.susi-image--subject { clip-path: polygon(38% 26%, 69% 5%, 100% 0, 100% 100%, 26% 100%, 33% 67%); transform: scale(calc(1.045 + var(--susi-progress) * .23)) translate3d(calc(var(--susi-progress) * -4.8%), calc(var(--susi-progress) * 2.4%), 0); filter: saturate(.97) contrast(1.03) brightness(.92); }
.susi-vignette { background: linear-gradient(90deg, rgba(1,9,6,.82) 0%, rgba(1,9,6,.46) 34%, transparent 65%), linear-gradient(0deg, rgba(1,8,5,.62) 0%, transparent 31%), radial-gradient(circle at 72% 42%, transparent 0 24%, rgba(0,4,2,.22) 72%); }
.susi-light { opacity: calc(.18 + var(--susi-progress) * .12); background: radial-gradient(circle at 91% 4%, rgba(229,247,204,.42), transparent 28%); mix-blend-mode: screen; }
.susi-atmosphere { opacity: .43; }

.susi-index { position: absolute; z-index: 4; right: clamp(1.3rem,3.2vw,3.8rem); bottom: 2.25rem; display: flex; align-items: center; gap: .7rem; color: rgba(255,255,255,.58); font-size: .65rem; letter-spacing: .1em; }
.susi-index-line { display: block; width: 4.2rem; height: 1px; background: rgba(255,255,255,.22); }
.susi-index-line i { display: block; width: calc((var(--susi-progress) * 100%) + 15%); max-width: 100%; height: 100%; background: var(--susi-acid); }

.susi-chapter { position: absolute; z-index: 3; inset: 0; display: flex; align-items: center; padding: 8rem clamp(1.25rem,7vw,8rem) 4rem; pointer-events: none; opacity: 0; transform: translateY(2rem); transition: opacity .42s ease, transform .6s cubic-bezier(.2,.75,.2,1); }
.susi-chapter.is-active { opacity: 1; transform: none; }
.susi-chapter.is-active .susi-chapter-copy, .susi-chapter.is-active .susi-hotspot { pointer-events: auto; }
.susi-chapter-copy { width: min(50rem,58vw); }
.susi-chapter-copy--compact { width: min(43rem,49vw); }
.susi-chapter-copy--right { width: min(39rem,44vw); margin-right: 1vw; margin-left: auto; }
.susi-eyebrow { margin: 0 0 1.35rem; color: var(--susi-acid); font-size: .67rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.susi-chapter h1, .susi-chapter h2, .susi-proof h2, .susi-pathways h2, .susi-closing h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.045em; }
.susi-chapter h1, .susi-chapter h2, .susi-closing h2 { color: var(--susi-ink); }
.susi-proof h2, .susi-pathways h2 { color: #132019; }
.susi-chapter h1 { font-size: clamp(3.5rem,7.1vw,8.1rem); line-height: .91; }
.susi-chapter h1 em { color: var(--susi-acid); font-weight: 400; }
.susi-chapter h2 { font-size: clamp(2.7rem,5vw,5.9rem); line-height: .96; }
.susi-chapter .susi-lede, .susi-chapter-copy > p:not(.susi-eyebrow) { max-width: 39rem; margin: 1.8rem 0 0; color: rgba(255,255,255,.78); font-size: clamp(1rem,1.35vw,1.25rem); line-height: 1.65; }
.susi-chapter-copy--right > p:not(.susi-eyebrow) { max-width: 35rem; }
.susi-text-link { display: inline-flex; gap: .65rem; margin-top: 2rem; padding-bottom: .45rem; border-bottom: 1px solid rgba(255,255,255,.48); font-size: .78rem; letter-spacing: .05em; text-decoration: none; }
.susi-text-link:hover, .susi-text-link:focus-visible { color: var(--susi-acid); border-bottom-color: var(--susi-acid); }
.susi-scroll-cue { position: absolute; left: clamp(1.25rem,7vw,8rem); bottom: 2rem; display: flex; align-items: center; gap: .75rem; color: rgba(255,255,255,.56); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; }
.susi-scroll-cue i { display: block; width: 2.8rem; height: 1px; overflow: hidden; background: rgba(255,255,255,.28); }
.susi-scroll-cue i::after { content: ""; display: block; width: 55%; height: 1px; background: var(--susi-acid); animation: susi-cue 1.8s ease-in-out infinite; }
@keyframes susi-cue { 0% { transform: translateX(-110%); } 70%,100% { transform: translateX(200%); } }

.susi-hotspot { position: absolute; display: flex; align-items: center; gap: .7rem; padding: .45rem .8rem .45rem .45rem; color: #f4f5ed; border: 1px solid rgba(255,255,255,.27); border-radius: 2rem; background: rgba(7,17,14,.48); box-shadow: 0 1rem 3rem rgba(0,0,0,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: inherit; font-size: .68rem; letter-spacing: .04em; cursor: pointer; }
.susi-hotspot:hover, .susi-hotspot:focus-visible { border-color: var(--susi-acid); outline: none; }
.susi-hotspot-dot { display: block; width: 1.45rem; height: 1.45rem; border: 1px solid var(--susi-acid); border-radius: 50%; box-shadow: inset 0 0 0 .4rem rgba(201,239,120,.08); }
.susi-hotspot-dot::after { content: ""; display: block; width: .28rem; height: .28rem; margin: .52rem; border-radius: 50%; background: var(--susi-acid); box-shadow: 0 0 0 .35rem rgba(201,239,120,.12); }
.susi-hotspot--paper { top: 31%; right: 22%; }
.susi-hotspot--waste { top: 43%; right: auto; left: 32%; }
.susi-hotspot--carbon { top: 25%; right: 19%; }

.susi-popover { position: absolute; z-index: 10; right: clamp(1.25rem,6vw,7rem); bottom: 5rem; width: min(27rem,calc(100vw - 2.5rem)); padding: 1.5rem 3.2rem 1.65rem 1.5rem; border: 1px solid rgba(255,255,255,.2); background: rgba(8,20,16,.88); box-shadow: 0 2rem 5rem rgba(0,0,0,.25); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; transform: translateY(1rem); visibility: hidden; pointer-events: none; transition: .3s ease; }
.susi-popover.is-open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.susi-popover-close { position: absolute; top: .75rem; right: .8rem; width: 2rem; height: 2rem; padding: 0; color: white; border: 0; background: none; font-size: 1.5rem; cursor: pointer; }
.susi-popover-kicker { margin: 0 0 .65rem; color: var(--susi-acid); font-size: .61rem; letter-spacing: .14em; text-transform: uppercase; }
.susi-popover-title { margin: 0; color: white; font-family: Georgia, serif; font-size: 1.8rem; font-weight: 400; }
.susi-popover-body { margin: .8rem 0 0; color: rgba(255,255,255,.72); font-size: .87rem; line-height: 1.65; }

.susi-proof { padding: clamp(5.5rem,10vw,10rem) clamp(1.25rem,7vw,8rem); color: #132019; background: var(--susi-paper); }
.susi-proof-intro { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(18rem,.65fr); column-gap: 8vw; align-items: end; }
.susi-eyebrow--dark { grid-column: 1 / -1; color: #315c41; }
.susi-proof h2, .susi-pathways h2 { font-size: clamp(3.3rem,6.3vw,7.2rem); line-height: .93; }
.susi-proof-intro > p:last-child { margin: 0 0 .5rem; color: #4e5b53; font-size: 1.05rem; line-height: 1.65; }
.susi-proof-rows { margin-top: clamp(5rem,9vw,9rem); border-top: 1px solid #aab0aa; }
.susi-proof-row { display: grid; grid-template-columns: 4rem 1fr 2.2fr auto; gap: 2rem; align-items: center; padding: 2.2rem 0; border-bottom: 1px solid #b9bdb8; }
.susi-proof-number { color: #68756c; font-size: .67rem; }
.susi-proof-row h3 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.8rem,2.7vw,3rem); font-weight: 400; }
.susi-proof-row p { max-width: 40rem; margin: 0; color: #4e5b53; line-height: 1.55; }
.susi-proof-tag { padding: .5rem .75rem; border: 1px solid #9ca59e; border-radius: 2rem; color: #536258; font-size: .61rem; letter-spacing: .1em; text-transform: uppercase; }

.susi-pathways { padding: clamp(5.5rem,10vw,10rem) clamp(1.25rem,7vw,8rem); color: #132019; background: #dfe6dc; }
.susi-pathways-head { max-width: 70rem; }
.susi-pathway-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin-top: clamp(4rem,7vw,7rem); background: #99a39b; border: 1px solid #99a39b; }
.susi-pathway-card { min-height: 28rem; display: flex; flex-direction: column; padding: clamp(1.5rem,3vw,3rem); color: #132019 !important; background: #edf0e9; text-decoration: none; transition: color .35s ease, background .35s ease; }
.susi-pathway-card > span { color: #667269; font-size: .67rem; letter-spacing: .12em; }
.susi-pathway-card h3 { margin: auto 0 1rem; font-family: Georgia, serif; font-size: clamp(2.2rem,3.4vw,4rem); font-weight: 400; letter-spacing: -.04em; }
.susi-pathway-card p { min-height: 7rem; margin: 0; color: #536058; line-height: 1.65; }
.susi-pathway-card b { margin-top: 2rem; font-size: .72rem; letter-spacing: .06em; }
.susi-pathway-card:hover, .susi-pathway-card:focus-visible { color: #f4f5ed !important; background: #17392a; outline: none; }
.susi-pathway-card:hover p, .susi-pathway-card:focus-visible p, .susi-pathway-card:hover > span, .susi-pathway-card:focus-visible > span { color: rgba(255,255,255,.7); }

.susi-closing { position: relative; min-height: 92vh; display: grid; place-items: center; overflow: hidden; padding: 7rem 1.25rem; text-align: center; }
.susi-closing-visual { position: absolute; inset: 0; background: linear-gradient(rgba(3,12,8,.54),rgba(3,12,8,.88)), url("/assets/images/sustainability/material-ecosystem-master.webp?v=1") 74% 58% / 145% auto no-repeat; filter: blur(1px); transform: scale(1.03); }
.susi-closing-copy { position: relative; width: min(60rem,92vw); }
.susi-closing h2 { font-size: clamp(3.2rem,6.2vw,7rem); line-height: .95; }
.susi-closing-copy > p:not(.susi-eyebrow) { width: min(42rem,90%); margin: 1.7rem auto 0; color: rgba(255,255,255,.72); font-size: 1.05rem; line-height: 1.65; }
.susi-cta { display: inline-flex !important; align-items: center; gap: 1.2rem; width: auto !important; min-width: 0 !important; margin-top: 2.2rem; padding: 1rem 1.35rem !important; color: #102016 !important; border: 0 !important; border-radius: 2rem !important; background: var(--susi-acid) !important; box-shadow: none !important; font-family: Arial,Helvetica,sans-serif !important; font-size: .78rem !important; font-weight: 700 !important; line-height: 1 !important; text-transform: none !important; cursor: pointer; }
.susi-cta i { font-style: normal; }

@media (max-width: 800px) {
  .susi-scroll-world { height: 460vh; }
  .susi-image { background-position: 67% 50%; }
  .susi-image--base { transform: scale(calc(1.07 + var(--susi-progress) * .13)) translate3d(calc(var(--susi-progress) * -2%),0,0); }
  .susi-image--subject { clip-path: polygon(20% 15%,100% 0,100% 100%,4% 100%); transform: scale(calc(1.09 + var(--susi-progress) * .16)) translate3d(calc(var(--susi-progress) * -2.8%),0,0); }
  .susi-vignette { background: linear-gradient(0deg,rgba(1,9,6,.9) 0%,rgba(1,9,6,.42) 60%,rgba(1,9,6,.3) 100%); }
  .susi-chapter { align-items: flex-end; padding: 7rem 1.25rem 5.5rem; }
  .susi-chapter-copy, .susi-chapter-copy--compact, .susi-chapter-copy--right { width: 100%; margin: 0; }
  .susi-chapter h1 { font-size: clamp(3.25rem,14.7vw,5rem); }
  .susi-chapter h2 { font-size: clamp(2.55rem,11vw,4.1rem); }
  .susi-chapter .susi-lede, .susi-chapter-copy > p:not(.susi-eyebrow) { max-width: 34rem; margin-top: 1.3rem; font-size: .92rem; line-height: 1.52; }
  .susi-text-link { margin-top: 1.35rem; }
  .susi-scroll-cue { display: none; }
  .susi-index { right: 1.15rem; bottom: 1.35rem; }
  .susi-hotspot, .susi-hotspot--paper, .susi-hotspot--waste, .susi-hotspot--carbon { top: 22%; right: 1rem; left: auto; }
  .susi-popover { right: 1rem; bottom: 4.5rem; left: 1rem; width: auto; }
  .susi-proof, .susi-pathways { padding: 5.5rem 1.25rem; }
  .susi-proof-intro { display: block; }
  .susi-proof h2, .susi-pathways h2 { font-size: clamp(3rem,14vw,5.2rem); }
  .susi-proof-intro > p:last-child { margin-top: 1.6rem; }
  .susi-proof-rows { margin-top: 4rem; }
  .susi-proof-row { grid-template-columns: 2.5rem 1fr auto; gap: .7rem 1rem; }
  .susi-proof-row p { grid-column: 2 / -1; font-size: .9rem; }
  .susi-pathway-grid { display: block; border: 0; background: none; }
  .susi-pathway-card { min-height: 22rem; border-bottom: 1px solid #9ca59e; }
  .susi-pathway-card p { min-height: 0; }
  .susi-closing { min-height: 86vh; }
  .susi-closing-visual { background-size: auto 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .susi-page *, .susi-page *::before, .susi-page *::after { animation: none !important; transition-duration: .001ms !important; }
  .susi-image--base, .susi-image--subject { transform: scale(1.04); }
  .susi-atmosphere { display: none; }
}