.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}
}

/* ---- footer, matched to the homepage --------------------------------------
   Five columns of links where this page had four. The homepage puts Industries
   on its own row by forcing it back to column 1, which is the only rule the
   inherited footer stylesheet does not already carry. */
.at-foot-cols .ft-wide{grid-column:1}
@media(max-width:900px){.at-foot-cols .ft-wide{grid-column:auto}}

/* ---- nav dropdowns --------------------------------------------------------
   Every .mn-mega, .mn-cols, .mn-col and .mn-promo rule is inherited from
   homepage style block 1 and is NOT restated here. Three things are needed on
   top: the panel is opened by class rather than by React state, the panel must
   stay readable while the bar is still transparent over the navy hero, and the
   chevron has to turn. */
.mn-in{position:relative}
.mn-item{position:static}
.mn-item.open .mn-chev{transform:rotate(180deg)}

/* Over the hero every nav item has to be white. The inherited rule only whitens
   .mn-item > a, which was fine when all five items were links. Four of them are
   buttons now, so they kept their dark ink and only Compliance stayed visible. */
.mn--over .mn-item > button{color:#fff}
.mn--over .mn-item > button:hover,
.mn--over .mn-item.open > button{color:#e8944b;background:transparent}
.mn--over .mn-chev{color:#fff}
.mn--over .mn-item > button:hover .mn-chev,
.mn--over .mn-item.open > button .mn-chev{color:#e8944b}

/* Over the hero the bar is transparent and its text is white. The panel below
   it is a white surface, so its own contents must stay dark rather than
   inheriting the bar's over-hero colours. */
.mn--over .mn-mega .mn-t{color:#121212}
.mn--over .mn-mega small{color:rgba(18,18,18,.58)}
.mn--over .mn-mega h5{color:rgba(18,18,18,.58)}
.mn--over .mn-mega a:hover .mn-t{color:#c8102e}
.mn--over .mn-mega .mn-promo .t,
.mn--over .mn-mega .mn-promo>a{color:#fff}

/* the bar has to sit above the hero panel while a menu is open */
.mn{z-index:300}

/* ---- case study cards -----------------------------------------------------
   Two up on the same collapsed slot the homepage uses. No max-width: they take
   the full content column, because capping them left a band of empty navy to
   their right that read as a hole rather than as space. */
.nx-cards--2{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:44px}
@media(max-width:760px){.nx-cards--2{grid-template-columns:1fr}}

/* ---- the audience block, four numbered cards ------------------------------
   Two up, two down. Collapsed each shows only its numeral and who it is for.
   Hovering one opens it downward, and because a card is absolutely positioned
   inside a fixed height slot it would otherwise open straight through its
   neighbour. So the card directly beneath steps aside while the hover lasts.
   That pairing is the homepage hero's own rule, lifted with the row indices
   changed from a three column grid to a two column one. */
.nx-cards--who{--nx-h:126px;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;margin-top:46px}

/* THE PAIRING RULE. A card is absolutely positioned inside a fixed height slot,
   so opening one on the top row drives it straight through the card beneath.
   The card below has to step aside while the hover lasts. This applies to every
   two column grid on the page, the audience block and both case study grids,
   because they all stack two rows. It was previously on the audience block
   alone, which is why the case studies overlapped. */
.nx-cards--who .nx-slot,.nx-cards--2 .nx-slot{
  z-index:1;transition:opacity .3s var(--ease)}
.nx-cards--who .nx-slot:hover,.nx-cards--who .nx-slot:focus-within,
.nx-cards--2 .nx-slot:hover,.nx-cards--2 .nx-slot:focus-within{z-index:6}
.nx-cards--who:has(.nx-slot:nth-child(1) .nx-card:hover) .nx-slot:nth-child(3),
.nx-cards--who:has(.nx-slot:nth-child(2) .nx-card:hover) .nx-slot:nth-child(4),
.nx-cards--2:has(.nx-slot:nth-child(1) .nx-card:hover) .nx-slot:nth-child(3),
.nx-cards--2:has(.nx-slot:nth-child(2) .nx-card:hover) .nx-slot:nth-child(4){
  opacity:0;pointer-events:none}

/* the numeral. Upright, so background-clip:text has no italic shear to fight */
.nx-num{display:block;font-family:var(--display);font-size:40px;font-weight:500;
  letter-spacing:-.03em;line-height:1;margin-bottom:10px;font-style:normal;
  background:var(--ember-ramp,linear-gradient(100deg,#c8102e,#e0563b 55%,#e8944b));
  -webkit-background-clip:text;background-clip:text;color:transparent}

@media(max-width:760px){
  /* one column: there is no card beneath to step aside, so nothing hides */
  .nx-cards--who,.nx-cards--2{grid-template-columns:1fr;--nx-h:auto}
  .nx-cards--who .nx-slot,.nx-cards--2 .nx-slot{height:auto}
  .nx-cards--who .nx-card,.nx-cards--2 .nx-card{position:relative}
  .nx-cards--who:has(.nx-card:hover) .nx-slot,
  .nx-cards--2:has(.nx-card:hover) .nx-slot{opacity:1;pointer-events:auto}
}