@import url('content.css');

.section-dark .feature-four h3{color:var(--ink)}

.materials-heading{text-align:center;max-width:900px;margin:0 auto 40px}
.materials-heading .lead{margin:20px 0 0}
.materials-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-bottom:28px}
.materials-tabs[hidden],.materials-panel[hidden]{display:none}
.materials-tabs button{padding:14px 24px;border:0;border-bottom:2px solid var(--line);background:transparent;color:var(--ink);font-size:16px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s}
.materials-tabs button[aria-selected="true"]{border-color:var(--moss);background:var(--lime)}
.materials-tabs button:hover{border-color:var(--moss)}
.materials-tabs button:focus-visible,.materials-panel:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.materials-panel{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;background:#e9ebe5;padding:36px;border-radius:16px;color:var(--ink)}
.materials-panel+.materials-panel{margin-top:28px}
.materials-processes.is-enhanced .materials-panel{margin-top:0}
.materials-image{min-width:0;overflow:hidden;border-radius:10px}
.materials-image img{display:block;width:100%;height:auto;aspect-ratio:1034/800;object-fit:contain}
.materials-copy{min-width:0}
.materials-copy h3{font:600 clamp(30px,3vw,44px)/1.1 var(--serif);margin:0 0 22px;color:var(--ink)}
.materials-copy p{font-size:16px;line-height:1.65;color:#435049;margin:0}
.materials-details{list-style:none;padding:0;margin:22px 0 28px}
.materials-details li{position:relative;padding:16px 0 16px 32px;border-bottom:1px solid #bac1b2}
.materials-details li:before{content:'✓';position:absolute;left:0;top:20px;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--forest);color:var(--lime);font-size:13px}
.materials-details h4{font:600 19px/1.3 var(--sans);margin:0 0 10px;color:var(--ink)}
.materials-actions{display:flex;flex-wrap:wrap;gap:12px}
.materials-actions .btn{font-size:14px;text-align:center}
@media(max-width:850px){
  .materials-panel{grid-template-columns:1fr;gap:28px;padding:24px}
  .materials-tabs{gap:8px}
  .materials-tabs button{padding:12px 16px;font-size:14px}
  .materials-heading{margin-bottom:28px}
}
@media(max-width:480px){
  .materials-panel{padding:18px}
  .materials-actions{flex-direction:column}
  .materials-actions .btn{justify-content:center}
}