.grid{display:grid; grid-template-columns:1.08fr .92fr; gap:64px; align-items:start; margin-top:44px}
@media (max-width:880px){.grid{grid-template-columns:1fr}}
.story p{max-width:58ch; color:#aab4ee; margin:0 0 16px; font-size:16.5px}
.story p b{color:#fff; font-weight:600}
.story h2{font-size:24px; font-weight:600; color:#fff; letter-spacing:-.02em; margin:34px 0 12px}

/* the logo, presented beside its own story */
.logoside{position:sticky; top:100px}
.logocase{border:1px solid #2a3499; border-radius:18px; background:#01055e;
  position:relative; overflow:hidden; padding:52px 30px 44px; text-align:center;
  transition:transform .2s ease, box-shadow .2s ease}
.logocase:hover{transform:translateY(-4px); box-shadow:0 34px 80px -30px rgba(33,123,255,.3)}
.logocase svg.grain{position:absolute; top:0; right:0; width:70%; height:100%; opacity:.45;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 55%);
  mask-image:linear-gradient(90deg,transparent,#000 55%)}
.logocase img.big{width:150px; height:150px; position:relative;
  transition:transform .25s ease}
.logocase:hover img.big{transform:translateY(-4px)}
.logocase .cap{position:relative; margin-top:20px; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:#8b93cd; font-weight:600}
.meaning{display:flex; flex-direction:column; gap:12px; margin-top:14px}
.mrow{border:1px solid #2a3499; border-radius:12px; padding:16px 20px; background:#080d5c;
  text-align:left; transition:transform .18s ease, border-color .18s ease}
.mrow:hover{transform:translateX(4px); border-color:#217bff}
.mrow .t{font-size:15px; font-weight:600; color:#fff}
.mrow .t em{font-style:normal; color:#2fd4fb}
.mrow p{font-size:13.5px; color:#8b93cd; margin:5px 0 0}
.cta-row{margin-top:50px}
.cta-row a{background:#217bff; color:#fff; text-decoration:none; font-weight:600;
  padding:15px 34px; border-radius:100px; display:inline-block;
  transition:transform .15s ease, filter .15s ease}
.cta-row a:hover{transform:translateY(-2px); filter:brightness(1.08)}