/* ==========================================================================
   BLOCK 4 — INSIGHTS INDEX, page specific only
   --------------------------------------------------------------------------
   Nothing in here is shared with the service or industry pages. Those run
   their content inside .sv-zone at a 764px measure because they are documents.
   An index is a browsing surface, so this page returns to the 1240px .at-wrap
   grid the homepage uses. Blocks 1, 2 and 3 are untouched, which is why the
   nav, the hero mesh, the footer, the lead form and Nexy all still behave.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. NAV — the homepage bar, on the internal page's transparency mechanism
   The mega panel, drawer, promo and flag styling all already exist in block 1
   (it is the homepage bundle). Two things do not, because the internal build
   dropped the homepage's html.nav-over mechanism in favour of .mn--over:
   the white ground a panel needs to hang off, and the drawer's own ground.
   -------------------------------------------------------------------------- */
/* A sheet of white hanging off a transparent bar reads as a floating slab, so
   the bar takes its ground back the moment a panel opens, and gives it up
   again on close. Handled by removing .mn--over in script, but the mark has to
   stop being inverted at the same instant or it disappears into the white. */
/* Opaque, not .88. A translucent bar over the navy hero lets the mesh through
   and the sheet reads as tinted rather than white; over white content the two
   are indistinguishable, so opaque is right in both places. */
.mn.mn--over.is-open{background:#fff;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom-color:rgba(0,0,0,.13)}
.mn.mn--over.is-open .mn-mark{filter:none}
.mn.mn--over.is-open .mn-item > a,
.mn.mn--over.is-open .mn-item > button{color:#10141c}
.mn.mn--over.is-open .mn-sub{color:rgba(0,0,0,.55);border-left-color:rgba(0,0,0,.2)}
/* the chevron and the label move together */
.mn--over .mn-item > button{color:#fff}
.mn--over .mn-item > button:hover,.mn--over .mn-item.open > button{color:#e8944b;background:transparent}
/* the drawer is a full sheet under the bar, so it never inherits transparency */
.mn-drawer{background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
.mn-drawer a{color:#10141c}
.mn-drawer a:hover{color:#e8944b}
.mn-drawer h5{color:rgba(0,0,0,.5)}
.mn-drawer[hidden]{display:none}
@media(min-width:1121px){ .mn-drawer{display:none} }

/* --------------------------------------------------------------------------
   2. NEXY — corner pill only
   The hero panel does not run on this page. The component still boots, because
   it needs the .nxd-host seat to exist, but the seat and the panel are both
   taken out of the layout and only the dock survives. The pill and the float
   window are the E-5 versions already: the CSS in block 3 is byte for byte the
   same component, so nothing is restyled here, only revealed earlier.
   -------------------------------------------------------------------------- */
.nxd-host,.nxdP{display:none !important}
/* the dock normally waits for the hero panel to fly into it. With no panel to
   fly, it is simply present from the first paint. .is-tucked is (0,2,0) and
   still wins, so opening the float still hides it. */
.nxd-pill{opacity:1;transform:none;pointer-events:auto}

/* --------------------------------------------------------------------------
   2b. THE ORB — lifted from homepage variant E-5, trimmed to the dock
   E-5 does not just restyle the pill, it replaces the photograph in it with
   the sphere. This is that layer, with the hero panel's half of it left
   behind: only .nxs-av (the pill and the float header) and .nxd-fstage (the
   float's voice seat) are ever built on this page.

   No shader, no GL context, no render loop. An oversized gradient plane
   drifts under a circular crop; the grain sits above it and does not move.
   That separation is the whole effect — the shimmer comes from colour
   sliding beneath a fixed mask, never from a highlight travelling across
   the face.
   -------------------------------------------------------------------------- */
.nxs-orb{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  /* ONE CLOCK. The liquid and the rim shimmer are both derived from --ldur,
     so the two can never drift apart, including in the live state where
     --lsp scales both together. */
  --lb:20px;--lsp:1;--ldur:2.14s;background:#2b6f74;
  filter:drop-shadow(0 26px 54px rgba(10,60,70,.5))
         drop-shadow(0 0 70px rgba(90,190,210,.20));
  transition:filter .5s ease}
.nxd-float.fmode-voice .nxs-orb{--lsp:.42;
  filter:drop-shadow(0 26px 54px rgba(10,60,70,.6))
         drop-shadow(0 0 92px rgba(120,215,230,.38))}

.nxs-liquid{position:absolute;inset:-30%;
  background:
    radial-gradient(circle at 25% 30%, #a9e2ff 0 12%, transparent 36%),
    radial-gradient(circle at 75% 28%, #e5feff 0 10%, transparent 34%),
    radial-gradient(circle at 68% 76%, #234931 0 16%, transparent 43%),
    radial-gradient(circle at 20% 74%, #a2bf7a 0 11%, transparent 38%),
    conic-gradient(from 25deg,#348289,#66bbe2,#d9f0e2,#2f6b4a,#348289);
  filter:blur(var(--lb)) saturate(1.56);
  animation:nxs-liquid calc(var(--ldur) * var(--lsp)) ease-in-out infinite alternate;
  will-change:transform}
@keyframes nxs-liquid{
  0%   {transform:translate3d(-11%,-9%,0) rotate(-13deg) scale(1.06)}
  50%  {transform:translate3d(12%,8%,0)   rotate(15deg)  scale(1.15)}
  100% {transform:translate3d(-5%,14%,0)  rotate(28deg)  scale(1.09)}
}
/* One plane on a loop retraces itself exactly every cycle and you read the
   repeat within twenty seconds. A second plane fixes it only if the two
   durations share no common multiple: at 1.618x the phase never recurs. */
.nxs-liquid2{position:absolute;inset:-34%;opacity:.55;
  background:
    radial-gradient(circle at 62% 18%, #d9f0e2 0 14%, transparent 40%),
    radial-gradient(circle at 18% 58%, #66bbe2 0 13%, transparent 38%),
    radial-gradient(circle at 80% 70%, #2f6b4a 0 15%, transparent 42%),
    conic-gradient(from 200deg, #2f6b4a, #348289, #a9e2ff, #348289, #2f6b4a);
  filter:blur(var(--lb)) saturate(1.44);
  animation:nxs-liquid2 calc(var(--ldur) * 1.618 * var(--lsp)) ease-in-out infinite alternate;
  will-change:transform}
@keyframes nxs-liquid2{
  0%   {transform:translate3d(11%,12%,0)   rotate(17deg)  scale(1.11)}
  50%  {transform:translate3d(-14%,-10%,0) rotate(-13deg) scale(1.05)}
  100% {transform:translate3d(8%,-14%,0)   rotate(-27deg) scale(1.13)}
}
/* Weight into the lower right and a turn at the circumference, so it reads
   as a sphere rather than a disc. */
.nxs-shade{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 30% 24%,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 54%),
    radial-gradient(circle at 76% 84%,rgba(6,32,34,.55) 0%,rgba(6,32,34,0) 58%),
    radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 68%,rgba(5,26,30,.5) 100%)}
/* a glass read held still: a broad luminous cap, a cool bounce off the lower
   rim, and an inner shadow closing the edge. Nothing sweeps. */
.nxs-gloss{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(ellipse 88% 44% at 46% -16%,
      rgba(255,255,255,.18) 0%,rgba(255,255,255,.08) 26%,
      rgba(255,255,255,.02) 54%,rgba(255,255,255,0) 76%),
    radial-gradient(ellipse 40% 26% at 33% 12%,
      rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 66% 46% at 70% 92%,
      rgba(200,245,255,.16) 0%,rgba(200,245,255,0) 62%);
  box-shadow:inset 0 0 34px rgba(4,22,26,.42),
             inset 0 -18px 34px rgba(4,22,26,.34),
             inset 0 0 0 1px rgba(255,255,255,.18),
             inset 0 0 22px rgba(255,255,255,.05)}
/* the shimmer travels ACROSS the face, not around the circumference: two
   broad soft bands on different clocks, masked away at the rim */
.nxs-sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none;overflow:hidden;
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 38%,rgba(0,0,0,.5) 72%,transparent 96%);
  mask:radial-gradient(circle at 50% 50%,#000 38%,rgba(0,0,0,.5) 72%,transparent 96%)}
.nxs-sheen i{position:absolute;inset:-70%;display:block;filter:blur(var(--sb,16px))}
.nxs-sheen i:nth-child(1){
  background:linear-gradient(112deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.19) 50%,rgba(255,255,255,0) 70%);
  animation:nxs-sw1 calc(var(--ldur) * 2 * var(--lsp)) ease-in-out infinite alternate}
.nxs-sheen i:nth-child(2){
  background:linear-gradient(64deg,rgba(190,240,255,0) 32%,rgba(190,240,255,.13) 50%,rgba(190,240,255,0) 68%);
  animation:nxs-sw2 calc(var(--ldur) * 3 * var(--lsp)) ease-in-out infinite alternate}
@keyframes nxs-sw1{0%{transform:translate3d(-46%,-22%,0)}100%{transform:translate3d(46%,22%,0)}}
@keyframes nxs-sw2{0%{transform:translate3d(42%,-18%,0)}100%{transform:translate3d(-42%,18%,0)}}
/* an overlay-blended noise tile inside a second overlay-blended wrapper, so
   the blend lands twice and the grain bites instead of hazing */
.nxs-grainwrap{position:absolute;inset:0;border-radius:50%;pointer-events:none;mix-blend-mode:overlay}
.nxs-grain{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  mix-blend-mode:overlay;opacity:.375;background-size:150px 150px;background-repeat:repeat;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='2.2' intercept='-0.3'/></feComponentTransfer></filter><rect width='150' height='150' filter='url(%23n)'/></svg>")}

/* the avatar: the same sphere at 46px in the pill and 34px in the float
   header. The blur has to track the size or the pools resolve into four
   discs at avatar scale. */
.nxs-av{position:relative;display:block;border-radius:50%;overflow:hidden;background:#2b6f74}
.nxs-av .nxs-orb{filter:none;--lb:4px}
.nxs-av .nxs-sheen i{--sb:3px}
.nxs-av .nxs-gloss{box-shadow:inset 0 0 7px rgba(4,22,26,.40),inset 0 -3px 6px rgba(4,22,26,.26)}
.nxs-av .nxs-grain{background-size:56px 56px;opacity:.375}
.nxd-pill .nxs-av{width:46px;height:46px;border:2px solid #101c34}
.nxd-fhead .nxs-av{width:34px;height:34px;border:1px solid rgba(255,255,255,.3)}
/* the float's voice seat carries the full sphere */
.nxd-fstage .nxs-orb{--lb:14px}
.nxd-fstage .nxs-sheen i{--sb:11px}
.nxd-fstage .nxs-gloss{box-shadow:inset 0 0 22px rgba(4,22,26,.40),inset 0 -9px 19px rgba(4,22,26,.26)}
.nxd-fstage img{display:none}

/* the hero was 566px tall because it was carrying Nexy. It is carrying copy
   now, so it measures itself from the copy. */
.at-hero{min-height:0;padding:150px 0 112px}
@media(min-width:1120px){
  .at-hero .at-wrap{min-height:0}
  .at-hero .at-hero-in{max-width:800px}
}
@media(min-width:1120px) and (max-height:830px){ .at-hero .at-wrap{min-height:0} }

/* --------------------------------------------------------------------------
   3. THE NAVY SECTION
   .sv-sub--band only breaks out of the internal page's column, so it is no use
   here. This is the same recipe applied to a whole section: the #152647 base,
   the shared mesh photograph, and the hero's directional scrim rather than the
   footer's flat one, because this band carries headlines rather than lists.
   Full bleed by construction — a section is already edge to edge, and .at-wrap
   is the only thing holding the copy to the 1240px grid.
   -------------------------------------------------------------------------- */
.ins-navy{position:relative;overflow:hidden;isolation:isolate;
  background:#152647;border-top:0;padding:112px 0}
.ins-navy::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--nx-mesh);background-size:cover;background-position:50% 50%}
.ins-navy::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(70% 60% at 24% 46%,
      rgba(4,10,20,.46) 0%, rgba(4,10,20,.26) 56%, rgba(4,10,20,.04) 88%),
    linear-gradient(90deg,
      rgba(4,10,20,.44) 0%, rgba(4,10,20,.24) 50%, rgba(4,10,20,.10) 100%)}
.ins-navy > .at-wrap{position:relative;z-index:2}
.ins-navy .at-kicker{color:#fff;opacity:.92}
.ins-navy .at-kicker::before{background:linear-gradient(90deg,#c8102e 0%,#e8944b 100%);
  background-color:transparent;height:2px;opacity:1}
.ins-navy .at-h2{color:#fff}
.ins-navy .at-lede{color:#fff;opacity:.84}

/* --------------------------------------------------------------------------
   4. COVERS
   No stock photography and no illustration of an abstraction. Each cover is
   the brand mesh cropped to a different corner with one data mark drawn over
   it, so a page of covers reads as crops of one field rather than a page of
   unrelated pictures. The mark is the artefact the card is allowed to show.
   -------------------------------------------------------------------------- */
.ins-cover{position:relative;overflow:hidden;border-radius:12px;background:#152647;
  aspect-ratio:16/9;display:block;isolation:isolate}
.ins-cover::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--nx-mesh);background-size:190% auto;
  background-position:var(--cx,50%) var(--cy,50%)}
.ins-cover::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(140deg,rgba(4,10,20,.52) 0%,rgba(4,10,20,.20) 52%,rgba(4,10,20,.46) 100%)}
/* twelve crops, cycled, picked so no two neighbours in a row share a sweep */
.cp1{--cx:8%;--cy:14%}   .cp2{--cx:62%;--cy:22%}  .cp3{--cx:31%;--cy:78%}
.cp4{--cx:88%;--cy:52%}  .cp5{--cx:16%;--cy:60%}  .cp6{--cx:74%;--cy:88%}
.cp7{--cx:46%;--cy:8%}   .cp8{--cx:96%;--cy:34%}  .cp9{--cx:2%;--cy:92%}
.cp10{--cx:56%;--cy:64%} .cp11{--cx:24%;--cy:36%} .cp12{--cx:80%;--cy:6%}

.ins-mk{position:absolute;z-index:2;left:26px;right:26px;bottom:22px;top:auto;
  height:44%;width:auto;color:rgba(255,255,255,.72);pointer-events:none}
.ins-cover--lead .ins-mk{left:38px;right:38px;bottom:32px;height:42%}
/* the mono stamp in the corner of every cover, the only text on the picture */
.ins-stamp{position:absolute;z-index:3;top:14px;left:16px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.78)}
.ins-cover--lead .ins-stamp{top:22px;left:24px;font-size:10px}
/* the article's own header photograph, under the gradient so the stamp stays
   legible; the abstract mark yields when a photo is present */
.ins-cover img.ph{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover}
.ins-cover.has-ph .ins-mk{display:none}
/* one ember mark on the page's single lead cover, nowhere else, so the accent
   is not spent nine times over in one grid */
.ins-cover--lead .ins-mk .em{stroke:#e8944b;opacity:1}

/* --------------------------------------------------------------------------
   3. ARTICLE CARD
   Hairline, 12px corner, the uniform -5px lift. Same object at three sizes:
   lead (in the featured split), rail (stacked beside it) and grid.
   -------------------------------------------------------------------------- */
.ins-card{display:flex;flex-direction:column;background:var(--void);
  border:1px solid var(--line);border-radius:12px;padding:14px 14px 20px;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),
             transform .35s var(--ease)}
.ins-card:hover{border-color:rgba(0,0,0,.26);transform:translateY(-5px);
  box-shadow:0 20px 44px -28px rgba(0,0,0,.42)}
.ins-card .ins-body{padding:18px 8px 0;display:flex;flex-direction:column;flex:1}
.ins-card h3{font-family:var(--display);font-size:19px;font-weight:500;
  letter-spacing:-.02em;line-height:1.26;margin-bottom:10px}
.ins-card h3 a{color:inherit;text-decoration:none}
.ins-card:hover h3{color:#e8944b}
.ins-card p{font-size:14px;font-weight:300;line-height:1.62;color:rgba(0,0,0,.68);
  max-width:44ch}
.ins-card .ins-byline{margin-top:auto;padding-top:18px}

/* the mono meta line — date, cluster, read length. Data, so mono is right. */
.ins-meta{display:flex;align-items:center;gap:10px;margin-bottom:11px;
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(0,0,0,.46)}
.ins-meta .cl{color:var(--warm)}
.ins-meta i{font-style:normal;color:rgba(0,0,0,.24)}

/* byline: a monogram, a name in Geist, a role. Initials are a mark, not
   reading text, which is the one place sub-10px is allowed. */
.ins-byline{display:flex;align-items:center;gap:11px}
.ins-byline .av{width:28px;height:28px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:#152647;color:#fff;font-family:var(--mono);font-size:9px;
  letter-spacing:.06em}
.ins-byline b{display:block;font-family:var(--ui);font-size:13px;font-weight:400;
  letter-spacing:-.008em;color:var(--txt)}
.ins-byline span{display:block;font-family:var(--ui);font-size:11.5px;font-weight:300;
  color:rgba(0,0,0,.52);margin-top:1px}

/* --------------------------------------------------------------------------
   4. FEATURED SPLIT
   One lead story against two stacked. 1.32fr because the lead carries a 16:9
   cover and the rail carries 2:1 thumbnails; equal columns left the lead's
   headline on four lines and the rail's on one.
   -------------------------------------------------------------------------- */
.ins-lead{display:grid;grid-template-columns:1.32fr .68fr;gap:24px;align-items:stretch}
.ins-lead .ins-card--lead{padding:16px 16px 26px}
.ins-card--lead h3{font-size:clamp(24px,2.4vw,33px);letter-spacing:-.03em;
  line-height:1.12;margin:0 0 14px;max-width:19ch}
.ins-card--lead p{font-size:15.5px;line-height:1.7;max-width:56ch}
.ins-card--lead .ins-body{padding:24px 10px 0}
.ins-rail{display:grid;grid-template-rows:1fr 1fr;gap:24px;min-width:0}
.ins-card--rail{padding:12px 12px 18px}
.ins-card--rail .ins-cover{aspect-ratio:2/1}
.ins-card--rail .ins-body{padding:16px 6px 0}
.ins-card--rail h3{font-size:17px;line-height:1.28}
.ins-card--rail p{font-size:13.5px;line-height:1.58}

/* --------------------------------------------------------------------------
   5. THE GRID + FILTER
   -------------------------------------------------------------------------- */
.ins-filter{display:flex;flex-wrap:wrap;gap:9px;margin:-32px 0 40px}
.ins-fbtn{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:9px 15px;border:1px solid var(--line-2);border-radius:var(--r);
  background:transparent;color:rgba(0,0,0,.62);cursor:pointer;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.ins-fbtn:hover{border-color:var(--txt);color:var(--txt)}
.ins-fbtn[aria-pressed="true"]{background:var(--txt);border-color:var(--txt);color:var(--void)}
.ins-fbtn .ct{opacity:.5;margin-left:7px}

.ins-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}

/* --------------------------------------------------------------------------
   6. THE LIBRARY CONTROL
   Centred, because it is an invitation rather than a next step: the archive
   opens on this page and the reader never leaves it. The circle carries a
   slow bob so the affordance reads as "there is more below" without a label
   having to say it twice.
   -------------------------------------------------------------------------- */
.ins-open{display:flex;justify-content:center;margin-top:60px}
.ins-open[hidden]{display:none}
.ins-reveal{display:inline-flex;flex-direction:column;align-items:center;gap:16px;
  background:transparent;border:0;cursor:pointer;padding:6px 18px}
.ins-reveal b{font-family:var(--ui);font-size:17px;font-weight:500;letter-spacing:-.014em;
  color:var(--txt);transition:color .3s var(--ease)}
.ins-reveal .ct{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(0,0,0,.46);margin-top:-8px}
.ins-reveal .ar{width:40px;height:40px;border-radius:50%;flex:none;
  border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;
  color:var(--txt);animation:ins-bob 2.8s var(--ease) infinite;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.ins-reveal .ar svg{width:13px;height:13px}
.ins-reveal:hover b{color:#e8944b}
.ins-reveal:hover .ar{border-color:#e8944b;color:#e8944b}
@keyframes ins-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* --------------------------------------------------------------------------
   7. THE PAGER
   Appears once the library is open. Twenty is the page, because a reader can
   scan twenty cards without losing the top of the grid, and forty cannot be
   scanned at all.
   -------------------------------------------------------------------------- */
.ins-pager{display:none;flex-direction:column;align-items:center;gap:18px;
  margin-top:56px;padding-top:34px;border-top:1px solid var(--line)}
.ins-pager.on{display:flex}
.ins-pages{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center}
.ins-pg{min-width:40px;height:40px;padding:0 13px;border:1px solid var(--line);
  border-radius:var(--r);background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.10em;color:rgba(0,0,0,.62);
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}
.ins-pg:hover{border-color:var(--txt);color:var(--txt)}
.ins-pg[aria-current="page"]{background:var(--txt);border-color:var(--txt);color:var(--void)}
.ins-pg[disabled]{opacity:.32;pointer-events:none}
.ins-pg svg{width:12px;height:12px}
.ins-pager .ct{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(0,0,0,.46)}

/* --------------------------------------------------------------------------
   8. TOPIC CARDS
   Separated cards rather than a hairline grid: the same conversion the case
   study cards make on the homepage — transparent container, no gridlines, and
   each cell carries its own border and 12px corner.
   -------------------------------------------------------------------------- */
.ins-cells{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  background:none;border:0}
.ins-cell{background:var(--void);border:1px solid var(--line);border-radius:12px;
  padding:28px 26px 30px;text-decoration:none;display:block;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),
             transform .35s var(--ease)}
.ins-cell:hover{border-color:rgba(0,0,0,.26);transform:translateY(-5px);
  box-shadow:0 20px 44px -28px rgba(0,0,0,.42)}
.ins-cell:hover h3{color:#e8944b}
.ins-cell .n{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--warm);margin-bottom:16px}
.ins-cell h3{font-family:var(--display);font-size:18px;font-weight:500;
  letter-spacing:-.02em;margin-bottom:8px;color:var(--txt);
  transition:color .3s var(--ease)}
.ins-cell p{font-size:13.5px;font-weight:300;line-height:1.6;color:rgba(0,0,0,.6)}

/* on the navy band the same card becomes glass, the recipe the homepage uses
   for .nx-card and the internal pages use inside a band: 16px radius,
   translucent white, an inset top highlight and a deep drop shadow */
.ins-navy .ins-cell{border-radius:16px;
  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:inset 0 1px 0 rgba(255,255,255,.10), 0 18px 40px -26px rgba(0,0,0,.6)}
.ins-navy .ins-cell:hover{background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.30);transform:translateY(-6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 26px 54px -26px rgba(0,0,0,.72)}
.ins-navy .ins-cell h3{color:#fff}
.ins-navy .ins-cell p{color:#fff;opacity:.78}
.ins-navy .ins-cell .n{color:#e8944b}
.ins-navy .ins-cell:hover h3{color:#e8944b}

/* --------------------------------------------------------------------------
   9. REVEALS
   -------------------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-s > *{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv-s.in > *{opacity:1;transform:none}
.rv-s.in > *:nth-child(2){transition-delay:.10s}
.rv-s.in > *:nth-child(3){transition-delay:.20s}
.rv-s.in > *:nth-child(4){transition-delay:.30s}
.rv-s.in > *:nth-child(5){transition-delay:.40s}
.rv-s.in > *:nth-child(6){transition-delay:.50s}
/* past the sixth the stagger stops accumulating, or card twenty would wait
   two seconds for its turn */
.rv-s.in > *:nth-child(n+7){transition-delay:.55s}

/* --------------------------------------------------------------------------
   10. BREAKPOINTS — the existing set, nothing new
   -------------------------------------------------------------------------- */
@media(max-width:1000px){
  .ins-lead{grid-template-columns:1fr}
  .ins-rail{grid-template-rows:auto;grid-template-columns:1fr 1fr}
  .ins-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ins-cells{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .ins-grid{grid-template-columns:1fr}
  .ins-rail{grid-template-columns:1fr}
  .ins-cells{grid-template-columns:1fr}
  .ins-filter{margin-top:-20px}
  .ins-open{margin-top:44px}
}
@media(prefers-reduced-motion:reduce){
  .ins-card:hover,.ins-cell:hover{transform:none}
  .rv,.rv-s > *{opacity:1;transform:none}
  .ins-reveal .ar{animation:none}
}