/* ==========================================================================
   EliteBlocc — Sustainability
   File: assets/css/pages/eb-sustainability.css
   Version: 4.0 — Full v4 rebuild. Evidence-led brand values page.
              Emerald-primary. Material cross-section. EPD deep-dive.
              Three light sections among dark. Motion intensity 1.5.

   LOAD POSITION: After global chain:
   eb-fonts → tokens → base → typography → buttons → motion → header →
   footer → utilities → wide-layout → emerald-system → [components]

   SCOPE: All rules under [data-eb-sus4] or prefixed .eb-sus4-
   NO :root tokens, NO reset, NO font/body/button globals — global files only.

   DESIGN IDENTITY
   - Gold is Technical Hub's signature. Sustainability = EMERALD primary.
   - Three light sections (material story #f4f8f5, EPD cards #eef6ef, scheme).
   - Dark sections have ambient emerald radial glows + stronger emerald borders.
   - Motion: calm fades 700ms, SVG layer-sequence reveal, no parallax bounce.

   SECTIONS
   00. Page token shortcuts
   01. Keyframes (page-specific)
   02. Scroll progress bar
   03. Reveal state classes
   04. Hero
   05. EPD badge panel (hero right)
   06. Stat band
   07. Marquee
   08. Section header utilities
   09. Material story (light section)
   10. Lifecycle performance (dark section)
   11. EPD deep-dive (light section)
   12. Scheme contribution (dark section)
   13. Further credentials (dark section)
   14. Sustainability resources (dark section)
   15. Final CTA (dark section)
   16. Disclaimer
   17. Focus-visible states
   18. Reduced-motion overrides
   ========================================================================== */

/* ── 00. Page token shortcuts ─────────────────────────────────────────── */
[data-eb-sus4] {
  --sus-ep:   cubic-bezier(0.22,1,0.36,1);
  --sus-es:   cubic-bezier(0.4,0,0.2,1);
  --sus-eb:   cubic-bezier(0.34,1.56,0.64,1);
  --sus-fast: 150ms;
  --sus-base: 300ms;
  --sus-slow: 700ms;
  --sus-lt:   #f4f8f5;   /* material story light background */
  --sus-lt2:  #eef6ef;   /* EPD section light background */
}

/* ── 01. Keyframes ─────────────────────────────────────────────────────── */
@keyframes eb-sus-draw-line    { from{stroke-dashoffset:var(--dl)} to{stroke-dashoffset:0} }
@keyframes eb-sus-rebar-pop    { 0%{opacity:0;transform:scale(0)} 70%{transform:scale(1.15)} 100%{opacity:1;transform:scale(1)} }
@keyframes eb-sus-reg-blur     { from{opacity:0;filter:blur(6px);letter-spacing:.18em} to{opacity:1;filter:blur(0);letter-spacing:.06em} }
@keyframes eb-sus-sb-count     { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes eb-sus-breathe      { 0%,100%{opacity:.55} 50%{opacity:.9} }
@keyframes eb-sus-ticker       { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes eb-sus-pls          { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.38;transform:scale(1.42)} }
@keyframes eb-sus-shimmer      { 0%{left:-100%} 100%{left:200%} }
@keyframes eb-sus-cta-glow     { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.3)} 50%{box-shadow:0 0 22px 4px rgba(16,185,129,.15)} }
@keyframes eb-sus-rv-up        { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes eb-sus-rv-right     { from{opacity:0;transform:translateX(28px) scale(.97)} to{opacity:1;transform:translateX(0) scale(1)} }
@keyframes eb-sus-layer-in-l   { from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)} }
@keyframes eb-sus-layer-in-r   { from{clip-path:inset(0 0 0 100%)} to{clip-path:inset(0 0 0 0)} }
@keyframes eb-sus-layer-in-c   { from{opacity:0;transform:scaleX(.7)} to{opacity:1;transform:scaleX(1)} }

/* ── 02. Scroll progress bar ──────────────────────────────────────────── */
.eb-sus4-progress {
  position: fixed; top: 0; left: 0; height: 2px;
  background: linear-gradient(90deg, var(--eb-color-emerald-deep,#064e3b), var(--eb-color-emerald-light,#10b981), rgba(16,185,129,.6));
  width: 0%; z-index: 9999;
  transition: width 60ms linear;
  pointer-events: none;
}

/* ── 03. Reveal state classes ─────────────────────────────────────────── */
/* Hero entrance */
.eb-sus4-h-rv   { opacity: 0 }
.eb-sus4-h-rv.on  { animation: eb-sus-rv-up  .85s var(--sus-ep) both }
.eb-sus4-h-rv-r { opacity: 0 }
.eb-sus4-h-rv-r.on { animation: eb-sus-rv-right .95s var(--sus-ep) .12s both }

/* Generic scroll reveal */
.eb-sus4-rv { opacity: 0; transform: translateY(18px) }
.eb-sus4-rv.on {
  opacity: 1; transform: translateY(0);
  transition: opacity var(--sus-slow) var(--sus-ep), transform var(--sus-slow) var(--sus-ep);
}
.eb-sus4-rv.on.d1 { transition-delay: .08s }
.eb-sus4-rv.on.d2 { transition-delay: .16s }
.eb-sus4-rv.on.d3 { transition-delay: .24s }
.eb-sus4-rv.on.d4 { transition-delay: .32s }

/* Stat band stagger */
.eb-sus4-sb-i { opacity: 0; transform: translateY(8px) }
.eb-sus4-sb-i.on { animation: eb-sus-sb-count .55s var(--sus-ep) both }

/* EPD registration number reveal */
.eb-sus4-reg { opacity: 0 }
.eb-sus4-reg.on { animation: eb-sus-reg-blur .6s var(--sus-ep) both }

/* Cross-section SVG layer reveals */
.eb-sus4-xs-layer { opacity: 0 }
.eb-sus4-xs-layer.wc-l.on { animation: eb-sus-layer-in-l .7s var(--sus-ep) both }
.eb-sus4-xs-layer.eps.on  { animation: eb-sus-layer-in-c .8s var(--sus-ep) .18s both }
.eb-sus4-xs-layer.rc.on   { animation: eb-sus-layer-in-c .8s var(--sus-ep) .36s both }
.eb-sus4-xs-layer.wc-r.on { animation: eb-sus-layer-in-r .7s var(--sus-ep) .52s both }

/* Dimension line draw animation */
.eb-sus4-xs-dim { stroke-dasharray: var(--dl,300); stroke-dashoffset: var(--dl,300); opacity: 0 }
.eb-sus4-xs-dim.on { animation: eb-sus-draw-line .6s var(--sus-ep) var(--dd,0s) both; opacity: 1 }

/* Rebar pop animation */
.eb-sus4-xs-rebar { opacity: 0; transform-box: fill-box; transform-origin: center }
.eb-sus4-xs-rebar.on { animation: eb-sus-rebar-pop .4s var(--sus-eb) var(--rd,.8s) both }

/* ── 04. Hero ──────────────────────────────────────────────────────────── */
.eb-sus4-hero { position: relative; overflow: hidden; border-bottom: .5px solid rgba(16,185,129,.1) }

.eb-sus4-hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 110% 60% at 48% 0%, rgba(6,78,59,.55) 0%, transparent 55%);
  animation: eb-sus-breathe 7s ease-in-out infinite;
}
.eb-sus4-hero__veins {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(16,185,129,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,185,129,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at 60% 30%, black 10%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse at 60% 30%, black 10%, transparent 65%);
}
.eb-sus4-hero__inner {
  display: grid;
  grid-template-columns: 1fr min(440px,42vw);
  gap: 3rem;
  max-width: var(--eb-container-max, 1400px);
  margin: 0 auto;
  padding: 3rem var(--eb-container-gutter, clamp(20px,4vw,56px)) 0;
  align-items: center;
  position: relative; z-index: 1;
}

/* Breadcrumb */
.eb-sus4-bc {
  font-size: 11px; font-weight: var(--eb-weight-light,300);
  color: rgba(255,255,255,.28); display: flex; align-items: center;
  gap: 5px; margin-bottom: 1rem;
}
.eb-sus4-bc a { color: rgba(255,255,255,.42); transition: color var(--sus-fast) var(--sus-es) }
.eb-sus4-bc a:hover { color: var(--eb-color-emerald-light,#10b981) }

/* Eyebrow — Söhne 300, .32em, EMERALD (sustainability page primary) */
.eb-sus4-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--eb-font-body);
  font-size: clamp(11px,1.2vw,12px);
  font-weight: var(--eb-weight-light,300);
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--eb-color-emerald-light,#10b981);
  margin-bottom: .875rem;
}
.eb-sus4-eyebrow__bar {
  width: 16px; height: 1.5px;
  background: linear-gradient(90deg, var(--eb-color-emerald-light,#10b981), rgba(16,185,129,.4));
  flex-shrink: 0;
}

/* H1 — DrukWide, hero + final CTA only */
.eb-sus4-h1 {
  font-family: var(--eb-font-display,'DrukWide',Impact,sans-serif);
  font-weight: var(--eb-weight-extrabold,800);
  font-size: clamp(28px,3.5vw,50px);
  line-height: 1.02; letter-spacing: -.01em;
  text-transform: uppercase; color: #fff; margin-bottom: .875rem;
}
.eb-sus4-h1 em {
  font-style: normal;
  color: var(--eb-color-emerald-light,#10b981);
  text-shadow: 0 0 40px rgba(16,185,129,.28);
}

.eb-sus4-lead {
  font-size: clamp(14px,1.4vw,16px); font-weight: var(--eb-weight-light,300);
  color: rgba(220,235,225,.72); line-height: 1.72; max-width: 500px; margin-bottom: 2rem;
}
.eb-sus4-hero__ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 2.5rem }

/* CTA emerald primary — override global gold for sustainability context */
.eb-sus4-hero__ctas .eb-btn--primary {
  background: var(--eb-color-emerald-light,#10b981) !important;
  color: #011e0d !important;
  animation: eb-sus-cta-glow 3.2s ease-in-out infinite;
  position: relative; overflow: hidden;
}
.eb-sus4-hero__ctas .eb-btn--primary::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 38%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  animation: eb-sus-shimmer 3.5s ease-in-out 1.2s infinite;
}
.eb-sus4-hero__ctas .eb-btn--primary:hover { opacity: .9; box-shadow: 0 0 28px rgba(16,185,129,.35) !important }

/* ── 05. EPD Badge Panel ──────────────────────────────────────────────── */
.eb-sus4-epd-panel {
  background: rgba(6,78,59,.07);
  border: .5px solid rgba(16,185,129,.22);
  border-radius: var(--eb-radius-lg,12px);
  overflow: hidden; position: relative;
}
.eb-sus4-epd-panel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(16,185,129,.42), transparent);
  pointer-events: none;
}
.eb-sus4-epd-panel__hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: .5px solid rgba(255,255,255,.06);
}
.eb-sus4-epd-panel__hdr-left {
  display: flex; align-items: center; gap: 7px;
  font-size: 9.5px; font-weight: var(--eb-weight-bold,700);
  letter-spacing: .18em; text-transform: uppercase; color: rgba(16,185,129,.55);
}
.eb-sus4-epd-panel__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--eb-color-emerald-light,#10b981);
  animation: eb-sus-pls 2.2s ease-in-out infinite; flex-shrink: 0;
}
.eb-sus4-epd-panel__sub { font-size: 10px; font-weight: var(--eb-weight-light,300); color: rgba(255,255,255,.28) }

/* EPD panel rows */
.eb-sus4-epd-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-bottom: .5px solid rgba(255,255,255,.05);
  text-decoration: none; transition: background var(--sus-fast) var(--sus-es);
}
.eb-sus4-epd-item:last-of-type { border-bottom: none }
.eb-sus4-epd-item:hover { background: rgba(16,185,129,.06) }
.eb-sus4-epd-item:hover .eb-sus4-epd-item__arrow { opacity: .75; transform: translateX(0); color: var(--eb-color-emerald-light,#10b981) }

.eb-sus4-epd-icon {
  width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
  border: .5px solid rgba(16,185,129,.28); background: rgba(16,185,129,.1);
  color: var(--eb-color-emerald-light,#10b981);
}
.eb-sus4-epd-icon svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none }
.eb-sus4-epd-item__col { flex: 1; min-width: 0 }
.eb-sus4-epd-item__title { font-size: 12.5px; font-weight: var(--eb-weight-medium,500); color: rgba(255,255,255,.82); display: block; margin-bottom: 2px }
.eb-sus4-epd-item__reg {
  font-size: 10px; font-weight: var(--eb-weight-light,300); color: rgba(16,185,129,.55);
  display: block; letter-spacing: .04em; margin-bottom: 2px; font-family: var(--eb-font-mono);
}
.eb-sus4-epd-item__scope { font-size: 11px; font-weight: var(--eb-weight-light,300); color: rgba(255,255,255,.38) }
.eb-sus4-epd-item__badge {
  font-size: 9px; font-weight: var(--eb-weight-bold,700); padding: 2px 8px; border-radius: 20px;
  background: rgba(16,185,129,.1); color: rgba(16,185,129,.7);
  border: .5px solid rgba(16,185,129,.2); white-space: nowrap; flex-shrink: 0;
  align-self: flex-start; margin-top: 3px;
}
.eb-sus4-epd-item__arrow {
  font-size: 11px; color: rgba(16,185,129,.4); opacity: 0;
  transform: translateX(-6px); flex-shrink: 0; margin-left: auto;
  transition: opacity var(--sus-fast), transform var(--sus-fast), color var(--sus-fast);
}
.eb-sus4-epd-panel__footer {
  padding: 10px 16px; background: rgba(0,0,0,.15);
  display: flex; align-items: center; justify-content: space-between;
}
.eb-sus4-epd-panel__envdec { font-size: 10px; font-weight: var(--eb-weight-light,300); color: rgba(255,255,255,.32) }
.eb-sus4-epd-panel__envdec strong { color: rgba(16,185,129,.55); font-weight: var(--eb-weight-medium,500) }

/* ── 06. Stat band ─────────────────────────────────────────────────────── */
.eb-sus4-stat-band {
  display: flex; border-top: .5px solid rgba(16,185,129,.1);
  max-width: var(--eb-container-max,1400px); margin: 0 auto;
  padding: 0 var(--eb-container-gutter,clamp(20px,4vw,56px));
  position: relative; z-index: 1;
}
.eb-sus4-sb-i {
  flex: 1; padding: .875rem 0; text-align: center;
  border-right: .5px solid rgba(255,255,255,.05);
  transition: background var(--sus-fast) var(--sus-es);
}
.eb-sus4-sb-i:last-child { border-right: none }
.eb-sus4-sb-i:hover { background: rgba(16,185,129,.02) }
.eb-sus4-sb-i__n { display: block; font-size: 14.5px; font-weight: var(--eb-weight-bold,700); color: rgba(255,255,255,.6) }
.eb-sus4-sb-i__n em { font-style: normal; color: var(--eb-color-emerald-light,#10b981) }
.eb-sus4-sb-i__l { display: block; font-size: 10px; font-weight: var(--eb-weight-light,300); color: rgba(255,255,255,.26); margin-top: 2px; letter-spacing: .04em }

/* ── 07. Marquee ───────────────────────────────────────────────────────── */
.eb-sus4-marquee {
  overflow: hidden; padding: .5rem 0;
  background: rgba(1,14,8,.75);
  border-top: .5px solid rgba(16,185,129,.1);
  border-bottom: .5px solid rgba(16,185,129,.1);
}
.eb-sus4-marquee__track {
  display: flex; animation: eb-sus-ticker 40s linear infinite; white-space: nowrap;
}
.eb-sus4-marquee__track:hover { animation-play-state: paused }
.eb-sus4-mi {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 1.75rem;
  font-size: 10px; font-weight: var(--eb-weight-light,300);
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.32);
}
.eb-sus4-mi__dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--eb-color-emerald-light,#10b981);
  flex-shrink: 0; box-shadow: 0 0 6px rgba(16,185,129,.5);
}

/* ── 08. Section header utilities ─────────────────────────────────────── */
.eb-sus4-sec-ey {
  font-size: 9.5px; font-weight: var(--eb-weight-bold,700);
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(16,185,129,.72);
  margin-bottom: .5rem; display: flex; align-items: center; gap: 6px;
}
.eb-sus4-sec-ey::before {
  content: ''; width: 14px; height: 2px;
  background: linear-gradient(90deg, var(--eb-color-emerald-light,#10b981), rgba(16,185,129,.5));
  flex-shrink: 0; border-radius: 1px;
}
/* Light-section overrides */
.eb-sus4-sec-ey--lt { color: rgba(4,120,87,.7) }
.eb-sus4-sec-ey--lt::before { background: var(--eb-color-emerald-dark,#047857) }

.eb-sus4-sec-h {
  font-size: clamp(20px,2.6vw,28px); font-weight: var(--eb-weight-bold,700);
  color: #fff; margin-bottom: .625rem;
  text-shadow: 0 0 48px rgba(16,185,129,.15);
}
.eb-sus4-sec-h--lt { color: #0a1a0e; text-shadow: none }
.eb-sus4-sec-h em { font-style: normal; color: var(--eb-color-emerald-light,#10b981) }
.eb-sus4-sec-h--lt em { color: var(--eb-color-emerald-dark,#047857) }

.eb-sus4-sec-lead { font-size: 14px; font-weight: var(--eb-weight-light,300); color: rgba(220,235,225,.72); line-height: 1.7; max-width: 600px; margin-bottom: 1.75rem }
.eb-sus4-sec-lead--lt { color: rgba(6,40,20,.65) }
.eb-sus4-inner { max-width: var(--eb-container-max,1400px); margin: 0 auto; padding: 0 var(--eb-container-gutter,clamp(20px,4vw,56px)) }

/* ── 09. Material story (light section) ───────────────────────────────── */
.eb-sus4-material { background: var(--sus-lt); padding: 4rem 0 3.5rem; overflow: hidden }
.eb-sus4-material__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
  max-width: var(--eb-container-max,1400px); margin: 0 auto;
  padding: 0 var(--eb-container-gutter,clamp(20px,4vw,56px));
  align-items: center;
}
/* U-value proof bar */
.eb-sus4-u-proof {
  display: flex; align-items: center; gap: 12px; margin-top: 1.5rem;
  padding: 14px 18px; background: rgba(16,185,129,.06);
  border: .5px solid rgba(16,185,129,.2); border-radius: 8px;
}
.eb-sus4-u-proof__badge {
  width: 40px; height: 40px; border-radius: 9px;
  background: rgba(16,185,129,.12); border: .5px solid rgba(16,185,129,.25);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--eb-color-emerald-dark,#047857);
  font-size: 13px; font-weight: var(--eb-weight-bold,700);
}
.eb-sus4-u-proof__val { font-size: 14px; font-weight: var(--eb-weight-bold,700); color: var(--eb-color-emerald-dark,#047857) }
.eb-sus4-u-proof__note { font-size: 11px; font-weight: var(--eb-weight-light,300); color: rgba(6,40,20,.5) }

/* Cross-section SVG */
.eb-sus4-xs-wrap { position: relative }
.eb-sus4-xs-svg { width: 100%; max-width: 460px; display: block }
.eb-sus4-xs-callout { font-family: var(--eb-font-mono); font-size: 11px; fill: rgba(6,40,20,.45) }

/* Material column cards */
.eb-sus4-mat-cols {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 12px;
  margin-top: 2rem; max-width: var(--eb-container-max,1400px);
  margin-left: auto; margin-right: auto;
  padding: 0 var(--eb-container-gutter,clamp(20px,4vw,56px));
}
.eb-sus4-mat-col {
  background: #fff; border: .5px solid rgba(16,185,129,.15); border-radius: var(--eb-radius-md,8px);
  padding: 18px 20px; position: relative; overflow: hidden;
  transition: border-color 250ms, box-shadow 250ms, transform 300ms var(--sus-ep);
}
.eb-sus4-mat-col:hover { border-color: rgba(16,185,129,.35); box-shadow: 0 12px 32px rgba(16,185,129,.1); transform: translateY(-5px) }
.eb-sus4-mat-col::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2.5px;
  transform: scaleX(0); transform-origin: left; transition: transform 280ms var(--sus-ep);
}
.eb-sus4-mat-col:hover::before { transform: scaleX(1) }
.eb-sus4-mat-col--wc::before { background: linear-gradient(90deg,transparent,rgba(124,82,48,.7),rgba(180,124,50,.5)) }
.eb-sus4-mat-col--eps::before { background: linear-gradient(90deg,transparent,var(--eb-color-emerald-light,#10b981),rgba(16,185,129,.5)) }
.eb-sus4-mat-col--rc::before  { background: linear-gradient(90deg,transparent,#3b82f6,rgba(59,130,246,.5)) }
.eb-sus4-mat-col__icon-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px }
.eb-sus4-mat-col__icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: .5px solid;
}
.eb-sus4-mat-col__icon svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none }
.eb-sus4-mat-col--wc .eb-sus4-mat-col__icon { background: rgba(124,82,48,.1); border-color: rgba(124,82,48,.25); color: #7c5230 }
.eb-sus4-mat-col--eps .eb-sus4-mat-col__icon { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.25); color: var(--eb-color-emerald-dark,#047857) }
.eb-sus4-mat-col--rc .eb-sus4-mat-col__icon  { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.25); color: #1d4ed8 }
.eb-sus4-mat-col__title { font-size: 13px; font-weight: var(--eb-weight-bold,700); color: #0a1a0e }
.eb-sus4-mat-col__cert  { font-size: 10px; font-weight: var(--eb-weight-light,300); color: rgba(6,40,20,.38); margin-top: 1px; font-family: var(--eb-font-mono) }
.eb-sus4-mat-col__body  { font-size: 12.5px; font-weight: var(--eb-weight-light,300); color: rgba(6,40,20,.62); line-height: 1.65; margin-bottom: 10px }
.eb-sus4-mat-col__fact  { font-size: 11px; font-weight: var(--eb-weight-light,300); color: rgba(6,40,20,.45); display: flex; align-items: flex-start; gap: 6px; line-height: 1.45 }
.eb-sus4-mat-col__fact::before { content: '›'; flex-shrink: 0; color: rgba(16,185,129,.5); font-weight: var(--eb-weight-bold,700); margin-top: 1px }

/* ── 10. Lifecycle performance (dark section) ────────────────────────── */
.eb-sus4-perf {
  background:
    rgba(1,12,8,.7)
    radial-gradient(ellipse 80% 60% at 8% 50%,  rgba(16,185,129,.1) 0%,transparent 55%),
    radial-gradient(ellipse 50% 40% at 92% 20%,rgba(16,185,129,.07) 0%,transparent 50%);
  padding: 3.5rem 0;
  border-top: 1px solid rgba(16,185,129,.22);
}
.eb-sus4-perf-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-top: 1.75rem }
.eb-sus4-perf-card {
  background: rgba(255,255,255,.03);
  border: .5px solid rgba(16,185,129,.28);
  border-radius: var(--eb-radius-lg,12px);
  padding: 24px; position: relative; overflow: hidden;
  transition: background 250ms, border-color 250ms, transform 300ms var(--sus-ep), box-shadow 300ms var(--sus-ep);
}
/* Left emerald accent bar */
.eb-sus4-perf-card::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg,var(--eb-color-emerald-light,#10b981),rgba(16,185,129,.25));
  border-radius: var(--eb-radius-lg,12px) 0 0 var(--eb-radius-lg,12px);
  opacity: .4; transition: opacity 250ms;
}
.eb-sus4-perf-card:hover::after { opacity: 1 }
.eb-sus4-perf-card:hover {
  background: rgba(16,185,129,.08);
  border-color: rgba(16,185,129,.45);
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(0,0,0,.3), 0 0 0 .5px rgba(16,185,129,.25);
}
.eb-sus4-perf-card__icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: rgba(16,185,129,.16); border: .5px solid rgba(16,185,129,.35);
  display: flex; align-items: center; justify-content: center;
  color: var(--eb-color-emerald-light,#10b981); margin-bottom: 14px;
  transition: background 250ms, border-color 250ms, box-shadow 250ms;
}
.eb-sus4-perf-card:hover .eb-sus4-perf-card__icon {
  background: rgba(16,185,129,.22); border-color: rgba(16,185,129,.45);
  box-shadow: 0 0 0 5px rgba(16,185,129,.1);
}
.eb-sus4-perf-card__icon svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none }
.eb-sus4-perf-card__kicker { font-size: 9.5px; font-weight: var(--eb-weight-bold,700); letter-spacing: .18em; text-transform: uppercase; color: rgba(16,185,129,.75); margin-bottom: 4px; display: flex; align-items: center; gap: 8px }
.eb-sus4-perf-card__num { font-size: 8px; font-weight: var(--eb-weight-light,300); opacity: .45; letter-spacing: .04em; margin-left: auto }
.eb-sus4-perf-card__title { font-size: 15px; font-weight: var(--eb-weight-bold,700); color: #fff; margin-bottom: 7px }
.eb-sus4-perf-card__body  { font-size: 13px; font-weight: var(--eb-weight-light,300); color: rgba(220,235,225,.72); line-height: 1.65; margin-bottom: 10px }
.eb-sus4-perf-card__note  { font-size: 11px; font-weight: var(--eb-weight-light,300); color: rgba(255,255,255,.35); display: flex; align-items: flex-start; gap: 5px; line-height: 1.45; border-top: .5px solid rgba(16,185,129,.18); padding-top: 10px; margin-top: auto }
.eb-sus4-perf-card__note::before { content: '↗'; flex-shrink: 0; color: rgba(16,185,129,.4); font-size: 10px; margin-top: 2px }

/* ── 11. EPD deep-dive (light section) ───────────────────────────────── */
.eb-sus4-epd { background: var(--sus-lt2); padding: 4rem 0 3.5rem; border-top: .5px solid rgba(16,185,129,.12) }
.eb-sus4-epd-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 1.5rem }
.eb-sus4-epd-card {
  background: #fff; border: .5px solid rgba(16,185,129,.2);
  border-radius: var(--eb-radius-lg,12px); padding: 22px;
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  transition: border-color 250ms, box-shadow 250ms, transform 300ms var(--sus-ep);
}
.eb-sus4-epd-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,transparent,var(--eb-color-emerald-dark,#047857),transparent);
  transform: scaleX(0); transform-origin: center; transition: transform 320ms var(--sus-ep);
}
.eb-sus4-epd-card:hover { border-color: rgba(16,185,129,.4); box-shadow: 0 8px 28px rgba(16,185,129,.08); transform: translateY(-4px) }
.eb-sus4-epd-card:hover::before { transform: scaleX(1) }
.eb-sus4-epd-card__env {
  display: inline-flex; align-items: center; gap: 6px; font-size: 10px;
  font-weight: var(--eb-weight-bold,700); letter-spacing: .08em; text-transform: uppercase;
  color: rgba(4,120,87,.7); background: rgba(16,185,129,.08); border: .5px solid rgba(16,185,129,.2);
  border-radius: 6px; padding: 3px 10px; margin-bottom: 14px;
}
.eb-sus4-epd-card__num  { font-family: var(--eb-font-mono); font-size: 13px; font-weight: var(--eb-weight-bold,700); color: var(--eb-color-emerald-dark,#047857); display: block; margin-bottom: 3px; letter-spacing: .06em }
.eb-sus4-epd-card__title { font-size: 15px; font-weight: var(--eb-weight-bold,700); color: #0a1a0e; margin-bottom: 5px }
.eb-sus4-epd-card__scope { font-size: 12.5px; font-weight: var(--eb-weight-light,300); color: rgba(6,40,20,.6); line-height: 1.6; margin-bottom: 14px; flex: 1 }
.eb-sus4-epd-card__applies { font-size: 11px; font-weight: var(--eb-weight-light,300); color: rgba(6,40,20,.45); margin-bottom: 12px }
.eb-sus4-epd-card__applies strong { color: rgba(4,120,87,.75); font-weight: var(--eb-weight-semibold,600) }
.eb-sus4-epd-card__schemes { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px }
.eb-sus4-epd-pill { font-size: 10px; font-weight: var(--eb-weight-medium,500); padding: 3px 9px; border-radius: 5px; background: rgba(16,185,129,.07); color: rgba(4,120,87,.75); border: .5px solid rgba(16,185,129,.2) }
.eb-sus4-epd-card__dl { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: var(--eb-weight-semibold,600); color: var(--eb-color-emerald-dark,#047857); margin-top: auto; text-decoration: none; transition: gap var(--sus-fast) }
.eb-sus4-epd-card__dl svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none }
.eb-sus4-epd-card:hover .eb-sus4-epd-card__dl { gap: 9px }
.eb-sus4-epd-note { margin-top: 1.5rem; padding: 12px 18px; background: rgba(16,185,129,.06); border: .5px solid rgba(16,185,129,.18); border-radius: var(--eb-radius-md,8px); font-size: 12px; font-weight: var(--eb-weight-light,300); color: rgba(6,40,20,.58); line-height: 1.65 }
.eb-sus4-epd-note strong { color: rgba(4,120,87,.75); font-weight: var(--eb-weight-medium,500) }

/* ── 12. Scheme contribution (dark section) ──────────────────────────── */
.eb-sus4-scheme {
  background:
    rgba(1,10,7,.75)
    radial-gradient(ellipse 70% 55% at 50% 80%,rgba(16,185,129,.09) 0%,transparent 55%);
  padding: 3.5rem 0;
  border-top: 1px solid rgba(16,185,129,.18);
}
.eb-sus4-scheme-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 1.5rem }
.eb-sus4-scheme-card {
  background: rgba(255,255,255,.04);
  border: .5px solid rgba(16,185,129,.22);
  border-radius: var(--eb-radius-lg,12px); padding: 22px;
  position: relative; overflow: hidden;
  transition: background 250ms, border-color 250ms, transform 300ms var(--sus-ep);
}
.eb-sus4-scheme-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,transparent,rgba(16,185,129,.5),transparent);
  transform: scaleX(0); transform-origin: center; transition: transform 320ms var(--sus-ep);
}
.eb-sus4-scheme-card:hover { background: rgba(16,185,129,.06); border-color: rgba(16,185,129,.4); transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,.25) }
.eb-sus4-scheme-card:hover::before { transform: scaleX(1) }
.eb-sus4-scheme-card__kicker { font-size: 9px; font-weight: var(--eb-weight-bold,700); letter-spacing: .18em; text-transform: uppercase; display: block; margin-bottom: 10px }
.eb-sus4-scheme-card--leed .eb-sus4-scheme-card__kicker   { color: rgba(16,185,129,.85) }
.eb-sus4-scheme-card--breeam .eb-sus4-scheme-card__kicker { color: rgba(6,182,212,.55) }
.eb-sus4-scheme-card--itaca .eb-sus4-scheme-card__kicker  { color: rgba(245,158,11,.55) }
.eb-sus4-scheme-card__name   { font-size: 18px; font-weight: var(--eb-weight-bold,700); color: #fff; margin-bottom: 6px; text-shadow: 0 0 24px rgba(16,185,129,.15) }
.eb-sus4-scheme-card__body   { font-size: 12.5px; font-weight: var(--eb-weight-light,300); color: rgba(220,235,225,.72); line-height: 1.6; margin-bottom: 12px }
.eb-sus4-scheme-card__source { font-size: 11px; font-weight: var(--eb-weight-light,300); color: rgba(255,255,255,.28); display: flex; align-items: flex-start; gap: 5px; line-height: 1.45; border-top: .5px solid rgba(255,255,255,.06); padding-top: 10px }
.eb-sus4-scheme-card__source::before { content: '↗'; flex-shrink: 0; color: rgba(16,185,129,.35); font-size: 10px; margin-top: 2px }
/* LEED body em highlight */
.eb-sus4-epd-em { color: rgba(16,185,129,.75); font-weight: var(--eb-weight-medium,500) }
/* Assessor note */
.eb-sus4-assessor-note { margin-top: 1.25rem; padding: 12px 16px; padding-left: 1rem; border-left: 3px solid rgba(16,185,129,.4); background: rgba(245,158,11,.04); border-top: .5px solid rgba(245,158,11,.15); border-right: .5px solid rgba(245,158,11,.15); border-bottom: .5px solid rgba(245,158,11,.15); border-radius: 0 var(--eb-radius-md,8px) var(--eb-radius-md,8px) 0; font-size: 11.5px; font-weight: var(--eb-weight-light,300); color: rgba(255,255,255,.38); line-height: 1.6 }
.eb-sus4-assessor-note strong { color: rgba(245,158,11,.55); font-weight: var(--eb-weight-medium,500) }

/* ── 13. Further credentials (dark section) ───────────────────────────── */
.eb-sus4-cred {
  background:
    rgba(2,14,9,.85)
    radial-gradient(ellipse 90% 50% at 50% 0%,rgba(16,185,129,.08) 0%,transparent 55%);
  padding: 3rem 0;
  border-top: 1px solid rgba(16,185,129,.2);
}
.eb-sus4-cred-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 1.5rem }
.eb-sus4-cred-item {
  background: rgba(255,255,255,.03);
  border: .5px solid rgba(16,185,129,.2);
  border-radius: var(--eb-radius-md,8px); padding: 20px;
  transition: background 150ms, border-color 200ms, transform 280ms var(--sus-ep);
}
.eb-sus4-cred-item:hover { background: rgba(16,185,129,.06); border-color: rgba(16,185,129,.38); transform: translateY(-3px) }
.eb-sus4-cred-item__kicker { font-size: 9px; font-weight: var(--eb-weight-bold,700); letter-spacing: .18em; text-transform: uppercase; color: rgba(16,185,129,.75); display: block; margin-bottom: 8px }
.eb-sus4-cred-item__name   { font-size: 13.5px; font-weight: var(--eb-weight-bold,700); color: rgba(255,255,255,.82); margin-bottom: 5px }
.eb-sus4-cred-item__detail { font-size: 11.5px; font-weight: var(--eb-weight-light,300); color: rgba(255,255,255,.38); line-height: 1.55; margin-bottom: 8px }
.eb-sus4-cred-item__ref    { font-family: var(--eb-font-mono); font-size: 10.5px; color: rgba(16,185,129,.62); letter-spacing: .04em }

/* ── 14. Sustainability resources (dark section) ──────────────────────── */
.eb-sus4-res {
  background:
    rgba(1,12,8,.6)
    radial-gradient(ellipse 80% 50% at 15% 50%,rgba(16,185,129,.1) 0%,transparent 55%);
  padding: 3.5rem 0;
  border-top: 1px solid rgba(16,185,129,.22);
}
.eb-sus4-res-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 1.5rem }
.eb-sus4-res-card {
  background: rgba(255,255,255,.04);
  border: .5px solid rgba(16,185,129,.2);
  border-radius: var(--eb-radius-md,8px); padding: 18px;
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  transition: background 150ms, border-color 150ms, transform 280ms var(--sus-ep);
}
.eb-sus4-res-card:hover { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.42); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(16,185,129,.08) }
.eb-sus4-res-card:hover .eb-sus4-res-card__dl { color: var(--eb-color-emerald-light,#10b981) }
.eb-sus4-res-card__icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(16,185,129,.16); border: .5px solid rgba(16,185,129,.35);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--eb-color-emerald-light,#10b981);
}
.eb-sus4-res-card__icon svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none }
.eb-sus4-res-card__col { flex: 1; min-width: 0 }
.eb-sus4-res-card__type { font-size: 9.5px; font-weight: var(--eb-weight-bold,700); letter-spacing: .12em; text-transform: uppercase; color: rgba(16,185,129,.72); display: block; margin-bottom: 2px }
.eb-sus4-res-card__name { font-size: 12.5px; font-weight: var(--eb-weight-semibold,600); color: rgba(255,255,255,.88); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.eb-sus4-res-card__dl   { font-size: 11px; font-weight: var(--eb-weight-light,300); color: rgba(255,255,255,.3); display: block; margin-top: 3px; transition: color var(--sus-fast) }

/* ── 15. Final CTA (dark section) ─────────────────────────────────────── */
.eb-sus4-final {
  background: rgba(1,10,6,.75); padding: 4rem 0; text-align: center;
  position: relative; overflow: hidden;
  border-top: 1px solid rgba(16,185,129,.25);
}
.eb-sus4-final__wash {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 900px; height: 600px; pointer-events: none;
  background: radial-gradient(ellipse,rgba(16,185,129,.22) 0%,rgba(6,78,59,.1) 40%,transparent 65%);
  animation: eb-sus-breathe 5s ease-in-out infinite;
}
.eb-sus4-final__inner { max-width: 620px; margin: 0 auto; padding: 0 var(--eb-container-gutter,clamp(20px,4vw,56px)); position: relative; z-index: 1 }
.eb-sus4-final__ey { font-size: 10px; font-weight: var(--eb-weight-light,300); letter-spacing: .32em; text-transform: uppercase; color: rgba(16,185,129,.65); margin-bottom: .875rem }
.eb-sus4-final__h {
  font-family: var(--eb-font-display,'DrukWide',Impact,sans-serif);
  font-weight: var(--eb-weight-extrabold,800); font-size: clamp(22px,3vw,36px);
  text-transform: uppercase; color: #fff; margin-bottom: .75rem; line-height: 1.04;
}
.eb-sus4-final__h em { font-style: normal; color: var(--eb-color-emerald-light,#10b981); text-shadow: 0 0 50px rgba(16,185,129,.55) }
.eb-sus4-final__lead { font-size: 14px; font-weight: var(--eb-weight-light,300); color: rgba(220,235,225,.72); line-height: 1.72; margin-bottom: 2rem }
.eb-sus4-final__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap }
.eb-sus4-final__btns .eb-btn--primary {
  background: var(--eb-color-emerald-light,#10b981) !important;
  color: #011e0d !important;
}

/* ── 16. Disclaimer ────────────────────────────────────────────────────── */
.eb-sus4-disc { background: rgba(1,8,5,.85); padding: 1.375rem 0; border-top: .5px solid rgba(255,255,255,.05) }
.eb-sus4-disc p { max-width: var(--eb-container-max,1400px); margin: 0 auto; padding: 0 var(--eb-container-gutter,clamp(20px,4vw,56px)); font-size: 10.5px; font-weight: var(--eb-weight-light,300); color: rgba(255,255,255,.18); line-height: 1.65 }

/* ── 17. Focus-visible states ─────────────────────────────────────────── */
.eb-sus4-epd-card:focus-visible, .eb-sus4-perf-card:focus-visible,
.eb-sus4-scheme-card:focus-visible, .eb-sus4-mat-col:focus-visible,
.eb-sus4-cred-item:focus-visible, .eb-sus4-res-card:focus-visible {
  outline: 2px solid rgba(16,185,129,.55); outline-offset: 2px;
}

/* ── 18. Reduced-motion overrides ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .eb-sus4-hero__glow, .eb-sus4-final__wash { animation: none }
  .eb-sus4-rv, .eb-sus4-h-rv, .eb-sus4-h-rv-r { opacity: 1 !important; transform: none !important; animation: none !important }
  .eb-sus4-sb-i { opacity: 1 !important; transform: none !important; animation: none !important }
  .eb-sus4-xs-layer { opacity: 1 !important; clip-path: none !important; animation: none !important }
  .eb-sus4-xs-dim { opacity: 1 !important; stroke-dashoffset: 0 !important; animation: none !important }
  .eb-sus4-xs-rebar { opacity: 1 !important; transform: none !important; animation: none !important }
  .eb-sus4-reg { opacity: 1 !important; filter: none !important; animation: none !important }
  .eb-sus4-epd-panel__dot { animation: none }
  .eb-sus4-hero__ctas .eb-btn--primary { animation: none }
  .eb-sus4-hero__ctas .eb-btn--primary::after { animation: none }
  .eb-sus4-marquee__track { animation: none }
  .eb-sus4-progress { display: none }
}

/* ==========================================================================
   RESPONSIVE — Sustainability
   ========================================================================== */

.eb-sus4-epd-item,.eb-sus4-epd-card,.eb-sus4-scheme-card{
  touch-action: manipulation;
}

@media (max-width: 1023px) {
  /* Hero: stack */
  .eb-sus4-hero__inner {
    grid-template-columns: 1fr;
  }
  .eb-sus4-epd-panel {
    max-width: 600px;
  }
  /* Stat band wrap */
  .eb-sus4-stat-band {
    flex-wrap: wrap;
  }
  .eb-sus4-sb-i {
    min-width: 33.33%;
    border-right: none;
    border-bottom: .5px solid rgba(255,255,255,.05);
  }
  /* Material section */
  .eb-sus4-material__inner {
    grid-template-columns: 1fr;
  }
  /* EPD, scheme, cred: 2-col */
  .eb-sus4-epd-cards,
  .eb-sus4-scheme-grid,
  .eb-sus4-cred-grid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width: 767px) {
  .eb-sus4-hero {
    overflow-x: clip;
  }
  .eb-sus4-hero__ctas {
    flex-direction: column;
    align-items: flex-start;
  }
  /* Mat cols: single col */
  .eb-sus4-mat-cols {
    grid-template-columns: 1fr;
  }
  /* Perf grid: single col */
  .eb-sus4-perf-grid {
    grid-template-columns: 1fr;
  }
  /* EPD cards: single col */
  .eb-sus4-epd-cards {
    grid-template-columns: 1fr;
  }
  /* Scheme, cred: single col */
  .eb-sus4-scheme-grid,
  .eb-sus4-cred-grid {
    grid-template-columns: 1fr;
  }
  /* Resource grid: 2-col */
  .eb-sus4-res-grid {
    grid-template-columns: repeat(2,1fr);
  }
  /* Stat band: 2-col */
  .eb-sus4-sb-i {
    min-width: 50%;
  }
  /* Final CTA */
  .eb-sus4-final__btns {
    flex-direction: column;
    align-items: center;
  }
  /* EPD panel rows */
  .eb-sus4-epd-item {
    flex-wrap: wrap;
  }
}

@media (max-width: 479px) {
  .eb-sus4-res-grid {
    grid-template-columns: 1fr;
  }
  .eb-sus4-h1 {
    font-size: clamp(26px,8vw,36px);
  }
}

/* ── UX polish additions ─────────────────────────────────────────────── */
.eb-sus4-perf-card, .eb-sus4-epd-card, .eb-sus4-scheme-card,
.eb-sus4-mat-col, .eb-sus4-cred-item, .eb-sus4-res-card {
  cursor: pointer;
}
.eb-sus4-epd-card, .eb-sus4-scheme-card, .eb-sus4-cred-item {
  scroll-margin-top: 80px;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CENTRING FIX — v4.1 patch
   Scheme contribution section header block needs centring.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Centre the scheme section header and intro */
.eb-sus4-scheme .eb-sus4-inner {
  text-align: center;
}
.eb-sus4-scheme .eb-sus4-inner > .eb-sus4-rv {
  margin-left: auto;
  margin-right: auto;
}
/* Reset text-align inside individual scheme cards so body copy stays left */
.eb-sus4-scheme-grid,
.eb-sus4-scheme-card {
  text-align: left;
}
/* Also centre the assessor note container */
.eb-sus4-assessor-note-wrap {
  text-align: left;
}

/* Centre credentials section header similarly */
.eb-sus4-cred .eb-sus4-inner {
  text-align: center;
}
.eb-sus4-cred .eb-sus4-inner > .eb-sus4-rv {
  margin-left: auto;
  margin-right: auto;
}
.eb-sus4-cred-grid,
.eb-sus4-cred-item {
  text-align: left;
}

/* END eb-sustainability.css v4.1 — centring patch */