.hero{
  min-height:720px;
  height:92svh;
  background:
    radial-gradient(circle at 78% 36%,rgba(216,165,43,.16),transparent 25%),
    radial-gradient(circle at 83% 58%,rgba(35,118,88,.38),transparent 31%),
    linear-gradient(125deg,#041d17 0%,#063c2e 58%,#082b22 100%);
  overflow:hidden;
}
.hero:before{content:"";position:absolute;width:min(48vw,680px);aspect-ratio:1;right:-8vw;top:13%;border:1px solid rgba(216,165,43,.28);border-radius:50%;box-shadow:inset 0 0 0 70px rgba(255,255,255,.015),inset 0 0 0 145px rgba(216,165,43,.025)}
.hero-overlay{background:linear-gradient(0deg,rgba(3,25,19,.58),transparent 34%)}
.framework-overview{background:#f4eddf}
.overview-heading{display:grid;grid-template-columns:1.2fr .8fr;gap:9vw;align-items:end}
.overview-heading h2{margin-bottom:0}
.overview-heading>div:last-child{color:#506058;font-size:1.05rem}
.overview-heading .graphic-button{margin-top:12px}
.overview-graphic{margin:65px 0 0}
.overview-graphic>button{display:block;width:100%;padding:clamp(14px,2.5vw,34px);border:1px solid rgba(7,59,45,.18);background:#fff;cursor:zoom-in;box-shadow:0 24px 65px rgba(20,44,35,.12)}
.overview-graphic img{display:block;width:100%;height:auto;object-fit:contain;filter:none}
.overview-graphic figcaption{display:flex;gap:12px 24px;flex-wrap:wrap;padding:20px 0 0;color:#5c675f;font-size:.82rem}
.overview-graphic figcaption span{text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:#946d12}
@media(max-width:900px){.hero{height:auto;min-height:760px}.hero:before{width:80vw;right:-36vw;top:22%}.overview-heading{grid-template-columns:1fr}.overview-heading>div:last-child{margin-top:22px}}
@media(max-width:560px){.hero:before{display:none}.overview-graphic{margin-top:38px}.overview-graphic>button{padding:8px}}