section.logo-hero{padding:clamp(1rem, 2vw, 2.5rem) 0 var(--sp-section-sm);background:var(--clr-mint-50);box-shadow:0 1px var(--line);position:relative;overflow:clip}section.logo-hero div.stage{width:100%;aspect-ratio:var(--cols) / var(--rows);grid-template-columns:repeat(var(--cols), 1fr);grid-template-rows:repeat(var(--rows), 1fr);display:grid;position:relative}section.logo-hero span.cell{opacity:0}section.logo-hero span.cell.shape{background:var(--clr-black-900);margin:-.5px}section.logo-hero span.px{left:calc(var(--x) / var(--cols) * 100%);top:calc(var(--y) / var(--rows) * 100%);aspect-ratio:1;background:var(--clr-black-900);width:clamp(.75rem,.6vw + .5rem,1.25rem);position:absolute;translate:-50% -50%}section.logo-hero div.hub{width:calc(100% / var(--cols) * var(--hub-w));height:calc(100% / var(--rows) * var(--hub-h));color:var(--clr-black-900);z-index:2;place-items:center;display:grid;position:absolute;top:50%;left:50%;translate:-50% -50%}section.logo-hero div.hub svg.logo-full{width:min(78%,36rem);height:auto;transition:color .4s var(--ease)}@media not (min-width:58.75rem){section.logo-hero div.hub svg.logo-full{width:min(90%,30rem)}}@media (hover:hover){section.logo-hero div.hub:hover svg{color:var(--clr-celadon-400)}}section.logo-hero div.copy{padding:clamp(2rem, 3vw + .5rem, 3.5rem) var(--m) 0;justify-content:center;display:flex}section.logo-hero div.copy div.block-text{width:calc(var(--col) * 10 + var(--g) * 9)}section.logo-hero div.copy div.block-text p:not(.text-label){max-width:min(calc(var(--col) * 7 + var(--g) * 6), 30rem);text-wrap:pretty;margin-inline:auto}@media not (min-width:58.75rem){section.logo-hero div.copy div.block-text{width:100%}}