main .actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:32px}
main .actions>.cta{flex:0 0 auto;min-width:210px;min-height:64px;padding:18px 26px;font-size:15px;gap:28px}
main .actions .materials{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:490px;max-width:100%;flex:0 0 auto;margin:0}
main .actions .materials a{display:flex;align-items:center;justify-content:center;min-width:0;min-height:64px;padding:16px 14px;font-size:17px;letter-spacing:0;white-space:nowrap;border-radius:12px;background:rgba(255,255,255,.88);color:#3d5830}
#materials{position:relative;z-index:1;background:#f7f8f4}
@media(max-width:950px){main .actions .materials{width:470px}main .actions{gap:16px}}
@media(max-width:650px){main .actions{align-items:stretch;gap:14px;margin-top:28px}main .actions>.cta{min-width:210px;min-height:58px;align-self:flex-start}main .actions .materials{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}main .actions .materials a{min-height:58px;font-size:16px;padding:14px}}
/* The photo stays in normal flow at its native aspect ratio: no cover, clipping or fixed viewport height. */
.hero-frame{position:relative;isolation:isolate}
.hero-frame>.hero-picture{display:block;position:relative;width:100%;height:auto;max-width:none;border-radius:0 0 20px 20px;filter:none;opacity:1}
.hero-frame::before{content:"";position:absolute;z-index:1;top:18%;bottom:0;left:0;width:50%;background:linear-gradient(90deg,rgba(247,248,244,.79) 0%,rgba(247,248,244,.72) 43%,rgba(247,248,244,.41) 78%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 78%,transparent 100%);pointer-events:none}
.hero-frame>main{position:absolute;inset:0;z-index:2;width:100%;max-width:1640px;margin:0 auto;padding:clamp(120px,9.9vw,260px) 7% 28px 8%;background:transparent}
.hero-frame h1{max-width:620px;font-size:clamp(46px,3.65vw,62px);line-height:1.04;letter-spacing:-1.8px;text-shadow:0 1px 3px rgba(247,248,244,.6)}
.hero-frame .intro{max-width:630px;font-size:16px;line-height:1.5;margin:22px 0 20px}
.hero-frame .production{font-size:16px;line-height:1.5;margin:0 0 20px}
.hero-frame .eco{max-width:590px;font-size:14px;line-height:1.6;margin:0}
.hero-frame .intro,.hero-frame .production,.hero-frame .eco{color:#173d31!important;text-shadow:0 1px 3px rgba(247,248,244,.65)}
.hero-frame main .actions{margin-top:26px}
@media(max-width:1320px){.hero-frame::before{display:none}.hero-frame>main{position:relative;inset:auto;padding:42px 8% 46px;max-width:1100px}.hero-frame h1{font-size:clamp(37px,4.1vw,50px)}.hero-frame>.hero-picture{border-radius:0 0 16px 16px}.hero-frame .intro,.hero-frame .production,.hero-frame .eco{max-width:730px;text-shadow:none}}
@media (max-width: 650px), (max-width: 950px) and (max-height: 500px) and (pointer: coarse) {
  body > header {
    padding: 8px max(12px, 3.5vw) 5px;
    gap: 2px 8px;
  }
  body > header .brand-horizontal {
    width: clamp(98px, 33vw, 140px);
    height: 34px;
    flex: 0 0 auto;
    margin-right: auto;
  }
  body > header .horizontal-logo {
    width: 111.3%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -52.3%);
  }
  body > header .header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 11px;
    font-size: 13px;
    line-height: 1.2;
  }
  body > header select {
    min-width: 42px;
    min-height: 44px;
    font-size: 13px;
  }
  body > header .login-trigger {
    display: none;
  }
  body > header nav {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 14px;
    padding: 0;
    overflow: visible;
    font-size: 12px;
  }
  body > header nav a {
    display: flex;
    align-items: center;
    min-height: 32px;
  }
  .hero-frame > .hero-picture {
    border-radius: 0;
    -webkit-mask-image: linear-gradient(#000 45%, rgb(0 0 0 / 70%) 63%, rgb(0 0 0 / 20%) 81%, transparent);
    mask-image: linear-gradient(#000 45%, rgb(0 0 0 / 70%) 63%, rgb(0 0 0 / 20%) 81%, transparent);
  }
  .hero-frame > main {
    margin-top: calc(-1 * clamp(25px, 7vw, 40px));
    padding: 0 7% 38px;
  }
  .hero-frame h1 {
    font-size: clamp(27px, 8.15vw, 42px);
    letter-spacing: -1.2px;
  }
  .hero-frame .intro,
  .hero-frame .production {
    font-size: 15px;
  }
  .hero-frame .intro {
    margin: 18px 0;
  }
  .hero-frame .production {
    margin-bottom: 18px;
  }
}
@media (max-width: 350px) {
  body > header {
    column-gap: 6px;
  }
  body > header .brand-horizontal {
    width: 96px;
  }
  body > header .header-cta {
    padding-inline: 9px;
  }
  body > header nav {
    column-gap: 8px;
    font-size: 11px;
  }
}
/* ESG partner information and reference calculation */
.esg-lead {
  max-width: 42ch;
  margin: 20px 0;
  line-height: 1.6;
}
.esg-partner-card,
.esg-carbon {
  min-width: 0;
  padding: clamp(18px, 3vw, 36px);
  border: 1px solid rgba(65, 85, 57, .16);
  border-radius: 18px;
  background: #f7f8f4;
}
.esg-partner-card h3,
.esg-carbon h3 {
  margin: 0;
  color: #173d31;
  line-height: 1.2;
}
.esg-partner-card p {
  line-height: 1.6;
}
.esg-partner-card h3 + p {
  margin: 8px 0 0;
}
.esg-partner-card p + h3 {
  margin-top: 22px;
}
.esg-carbon {
  margin-top: clamp(24px, 4vw, 48px);
}

.esg-comparison {
  width: 100%;
  margin-top: 20px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid #d6e1d4;
  background: #fcfdf9;
  color: #203b31;
  font-size: .9rem;
  line-height: 1.45;
}
.esg-comparison th,
.esg-comparison td {
  padding: 16px clamp(10px, 1.35vw, 22px);
  text-align: left;
  vertical-align: middle;
}
.esg-comparison thead th {
  background: #e5eee2;
  color: #24483a;
}
.esg-comparison thead th:nth-child(2),
.esg-comparison thead th:nth-child(3),
.esg-comparison .esg-metric {
  text-align: center;
}
.esg-comparison tbody tr + tr > * {
  border-top: 1px solid #d6e1d4;
}
.esg-aluminium {
  --esg-metal-accent: #235747;
  --esg-metal-bg: #e0eee6;
  --esg-row-bg: #fcfdf9;
}
.esg-copper {
  --esg-metal-accent: #784429;
  --esg-metal-bg: #f3e6d9;
  --esg-row-bg: #f8f5ef;
}
.esg-comparison tbody tr {
  background: var(--esg-row-bg);
}
.esg-metal-name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
}
.esg-metal-name small {
  display: block;
  margin-top: 4px;
  color: #506457;
  font-size: .76rem;
  font-weight: 400;
}
.esg-metal-symbol,
.esg-metric strong {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--esg-metal-bg);
  color: var(--esg-metal-accent);
}
.esg-metric strong {
  border-radius: 999px;
  font-size: 1rem;
}
.esg-detail ul {
  margin: 0;
  padding-left: 1em;
}
.esg-detail li + li {
  margin-top: 5px;
}
.esg-detail li::marker,
.esg-indicators strong {
  color: var(--esg-metal-accent);
}
.esg-indicators span[lang] {
  color: #506457;
}
.esg-cell-label {
  display: none;
}

@media (max-width: 840px) {
  .esg-comparison,
  .esg-comparison tbody {
    display: block;
  }
  .esg-comparison {
    overflow: visible;
    border: 0;
    background: transparent;
  }
  .esg-comparison thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .esg-comparison tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #d6e1d4;
  }
  .esg-comparison tbody tr + tr {
    margin-top: 12px;
  }
  .esg-comparison tbody tr > * {
    padding: 0;
  }
  .esg-comparison tbody tr + tr > * {
    border: 0;
  }
  .esg-comparison tbody th,
  .esg-comparison .esg-detail {
    grid-column: 1 / -1;
  }
  .esg-comparison .esg-metric {
    text-align: left;
  }
  .esg-cell-label {
    display: block;
    margin-bottom: 5px;
    color: #42594b;
    font-size: .8rem;
    font-weight: 600;
  }
}