.nx-cards{
  --nx-h:108px;                       /* the collapsed height, held by the slot */
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin-top:22px;position:relative;z-index:3}
.nx-slot{position:relative;height:var(--nx-h)}

.nx-card{
  position:absolute;left:0;right:0;top:0;min-height:var(--nx-h);
  display:block;overflow:hidden;border-radius:16px;
  padding:16px 18px 16px;
  /* the glass: enough blur to separate it from the field, little enough tint
     that the mesh still reads through it */
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.17);
  backdrop-filter:blur(15px) saturate(125%);
  -webkit-backdrop-filter:blur(15px) saturate(125%);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset,
             0 18px 40px -26px rgba(0,0,0,.6);
  transition:background .35s var(--ease),border-color .35s var(--ease),
             box-shadow .35s var(--ease)}
.nx-card:hover,.nx-card:focus-visible{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.30);
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,
             0 26px 54px -26px rgba(0,0,0,.72);
  outline:none}

/* ---- the card's own field ------------------------------------------------
   White rather than the navy picture. Laying the mesh inside the cards gave
   them a field of their own but it was the same blue as the ground behind
   them, so they read as holes in the hero rather than as panels on it. This is
   a mesh built out of white instead: two soft radials and a diagonal, all at
   single-digit alpha, so the panel lifts off the background without becoming a
   surface in its own right. Each card takes the radials from different corners
   so the three do not repeat one crop side by side. */
.nx-fill{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  transition:opacity .35s var(--ease);opacity:1;
  background:
    radial-gradient(115% 95% at var(--nx-a,14% 16%),
      rgba(255,255,255,.15) 0%, rgba(255,255,255,.04) 46%, rgba(255,255,255,0) 72%),
    radial-gradient(105% 85% at var(--nx-b,86% 88%),
      rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 50%, rgba(255,255,255,0) 76%),
    linear-gradient(138deg,
      rgba(255,255,255,.07) 0%, rgba(255,255,255,.015) 52%, rgba(255,255,255,.05) 100%)}
.nx-slot:nth-child(1) .nx-fill{--nx-a:12% 14%; --nx-b:88% 86%}
.nx-slot:nth-child(2) .nx-fill{--nx-a:80% 10%; --nx-b:18% 92%}
.nx-slot:nth-child(3) .nx-fill{--nx-a:50% 100%; --nx-b:96% 12%}
.nx-card:hover .nx-fill,.nx-card:focus-visible .nx-fill{opacity:1.4}

/* ---- the glint ----------------------------------------------------------
   The first pass was a wide, hard-edged white band wiping across at a constant
   speed, four times in sixteen seconds. That is a loading skeleton, not glass.
   Three things were wrong with it and all three are fixed here.

   It was a wipe, not a catch of light. The band now travels in about two
   seconds of a ten second cycle, eased so it accelerates off the corner and
   decelerates into the far one, and then the card sits still for eight. Light
   catching an edge is an event; a band sliding back and forth is a progress bar.

   It had hard edges and no bloom. The highlight is now narrow, built on a five
   stop gradient with a soft shoulder either side, and blurred, so it reads as a
   specular smear rather than a rectangle of white.

   Nothing lit up. A real sheet of glass catches light on its rim before its
   face, so a second pass runs the same diagonal as a mask over a bright border
   and the edge lights up as the glint reaches it. That detail is most of what
   sells the material.

   One diagonal now, bottom left to top right, on a ten second clock. The angle
   is 70deg rather than 45: the card is 304 by 108, so its own corner-to-corner
   run sits about 20 degrees above the horizontal and the band is cut square to
   that rather than to an arbitrary diagonal. */
.nx-glint,.nx-rim{position:absolute;pointer-events:none;border-radius:inherit}
.nx-glint{inset:-55%;z-index:1;opacity:0;
  background:linear-gradient(70deg,
    transparent 41%,
    rgba(255,255,255,.045) 46%,
    rgba(255,255,255,.20) 50%,
    rgba(255,255,255,.045) 54%,
    transparent 59%);
  filter:blur(7px);
  transform:translate3d(-44%,44%,0);
  will-change:transform,opacity;
  animation:nx-glint 10s linear infinite var(--nx-d,0s)}
.nx-rim{inset:0;z-index:2;opacity:0;
  border:1px solid rgba(255,255,255,.9);
  -webkit-mask-image:linear-gradient(70deg,transparent 42%,#000 50%,transparent 58%);
          mask-image:linear-gradient(70deg,transparent 42%,#000 50%,transparent 58%);
  -webkit-mask-size:300% 300%;  mask-size:300% 300%;
  -webkit-mask-position:0% 100%; mask-position:0% 100%;
  will-change:mask-position,opacity;
  animation:nx-rim 10s linear infinite var(--nx-d,0s)}

@keyframes nx-glint{
  0%{opacity:0;transform:translate3d(-44%,44%,0);
     animation-timing-function:cubic-bezier(.36,0,.16,1)}
  2.5%{opacity:1}
  18%{opacity:1}
  21%{opacity:0;transform:translate3d(44%,-44%,0)}
  100%{opacity:0;transform:translate3d(44%,-44%,0)}
}
@keyframes nx-rim{
  0%{opacity:0;-webkit-mask-position:0% 100%;mask-position:0% 100%;
     animation-timing-function:cubic-bezier(.36,0,.16,1)}
  3%{opacity:.85}
  17%{opacity:.85}
  21%{opacity:0;-webkit-mask-position:100% 0%;mask-position:100% 0%}
  100%{opacity:0;-webkit-mask-position:100% 0%;mask-position:100% 0%}
}
/* half a second apart, so the row catches the light in sequence rather than
   flashing as one block */
.nx-slot:nth-child(2) .nx-glint,.nx-slot:nth-child(2) .nx-rim{--nx-d:.5s}
.nx-slot:nth-child(3) .nx-glint,.nx-slot:nth-child(3) .nx-rim{--nx-d:1s}

/* ---- the copy ---------------------------------------------------------- */
.nx-in{position:relative;z-index:3;display:block}
.nx-k{display:block;font-family:var(--ui);font-size:15.5px;font-weight:500;
  letter-spacing:-.012em;color:#fff;padding-right:34px}
.nx-e{display:block;margin-top:7px;font-size:13.5px;font-weight:300;line-height:1.45;
  color:rgba(255,255,255,.76)}
.nx-rm{display:inline-block;margin-top:6px;background:var(--ember-ramp);-webkit-background-clip:text;background-clip:text;
  color:transparent;font-weight:500;white-space:nowrap}
.nx-more{display:block;max-height:0;opacity:0;overflow:hidden;
  font-size:13px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.62);
  transition:max-height .42s var(--ease),opacity .3s var(--ease),margin-top .42s var(--ease)}
.nx-card:hover .nx-more,.nx-card:focus-visible .nx-more{
  max-height:190px;opacity:1;margin-top:9px}

/* ---- the arrow ----------------------------------------------------------
   Masked rather than drawn, because a gradient cannot be a stroke colour in
   CSS but it can be the background of a masked box. The white sits on top as
   a layer that fades out, which also buys a transition that swapping a
   background-image would not have given. */
.nx-arrow{position:absolute;top:1px;right:0;width:19px;height:19px;
  background:var(--ember-ramp);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2017%2017%207%22%2F%3E%3Cpath%20d%3D%22M8.6%207H17v8.4%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2017%2017%207%22%2F%3E%3Cpath%20d%3D%22M8.6%207H17v8.4%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  transition:transform .35s var(--ease)}
.nx-arrow::after{content:"";position:absolute;inset:0;background:#fff;
  transition:opacity .35s var(--ease)}
.nx-card:hover .nx-arrow::after,.nx-card:focus-visible .nx-arrow::after{opacity:0}
.nx-card:hover .nx-arrow,.nx-card:focus-visible .nx-arrow{transform:translate(2px,-2px)}

@media(max-width:900px){
  .nx-cards{grid-template-columns:1fr;gap:10px;margin-top:32px}
  /* in one column there is nothing beside a card to hold the row open, so the
     slot lets go and the cards sit in normal flow */
  .nx-slot{height:auto}
  .nx-card{position:relative;min-height:0}
}
@media(hover:none){
  /* nothing to hover with, so the second line is simply there */
  .nx-more{max-height:none;opacity:1;margin-top:9px}
}
@media(prefers-reduced-motion:reduce){
  .nx-glint,.nx-rim{display:none}
  .nx-card,.nx-more,.nx-arrow,.nx-arrow::after{transition:none}
}