/* Package 11 · 28 Sep 2026 · loaded after site.css on every page built from the site shell.
   1. "What we do" dropdown   2. mobile menu service list   3. /services/ "Services in detail"
   4. exit popup (design A, the data strategy call) */

/* ── 1. "What we do" menu ────────────────────────────────
   (solid panel: the header pill already has a backdrop blur, and a blur nested inside it does not work)
   28 Sep, after Robert's review of draft 11b: the item is a button that opens the menu (hover on a
   desktop pointer, click or Enter anywhere); the overview page is the first card inside it. */
#hd .nav{position:relative}
.navlinks .w3dd{position:static;display:flex;align-items:center}
.navlinks .w3trig{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14.5px;line-height:inherit;color:var(--dim);
  padding:9px 14px;border:0;border-radius:999px;background:transparent;cursor:pointer;transition:color .25s,background .25s,box-shadow .25s}
.navlinks .w3trig svg{width:10px;height:10px;opacity:.75;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.navlinks .w3trig:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.navlinks .w3trig.cur{position:relative;overflow:hidden;color:var(--ink);background:rgba(160,107,255,.16);box-shadow:0 0 0 1px rgba(160,107,255,.3) inset}
.navlinks .w3dd.open .w3trig,.navlinks .w3dd.hov .w3trig{color:var(--ink);background:rgba(255,255,255,.08)}
.navlinks .w3dd.open .w3trig svg,.navlinks .w3dd.hov .w3trig svg{transform:rotate(180deg)}
.navlinks .w3trig:focus-visible{outline:2px solid var(--violet);outline-offset:2px}

.navlinks .w3drop{position:absolute;top:calc(100% + 12px);left:50%;width:min(1000px,calc(100vw - 32px));box-sizing:border-box;padding:8px;z-index:70;
  border-radius:26px;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,10px) scale(.985);transform-origin:50% 0;
  transition:opacity .22s ease,transform .38s cubic-bezier(.16,1,.3,1),visibility 0s linear .38s;
  background:radial-gradient(90% 60% at 20% 0%,rgba(61,21,95,.55),transparent 70%),linear-gradient(180deg,#1a0f31,#0b0618);
  border:1px solid rgba(160,107,255,.20);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 50px 120px -30px rgba(0,0,0,.9),0 24px 60px -30px rgba(61,21,95,.8)}
.navlinks .w3drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.navlinks .w3dd.open .w3drop,.navlinks .w3dd.hov .w3drop{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) scale(1);transition-delay:0s,0s,0s}

.navlinks .w3dpanel{display:grid;grid-template-columns:236px minmax(0,1fr);gap:8px}
.navlinks .w3dfeat{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-height:236px;
  padding:22px;border-radius:20px;text-decoration:none;color:var(--ink);
  background:radial-gradient(120% 90% at 100% 0%,rgba(160,107,255,.42),transparent 58%),linear-gradient(160deg,#2c1553,#140a2a 70%);
  box-shadow:0 0 0 1px rgba(160,107,255,.28) inset;transition:box-shadow .3s,transform .3s cubic-bezier(.2,.8,.2,1)}
.navlinks .w3dfeat:hover{box-shadow:0 0 0 1px rgba(201,168,255,.55) inset,0 18px 40px -18px rgba(160,107,255,.55);transform:translateY(-1px);background:radial-gradient(120% 90% at 100% 0%,rgba(160,107,255,.5),transparent 58%),linear-gradient(160deg,#2c1553,#140a2a 70%)}
.navlinks .w3dfeat::before,.navlinks .w3dfeat::after{display:none}
.navlinks .w3dring{position:absolute;top:-58px;right:-62px;width:200px;height:200px;pointer-events:none;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.navlinks .w3dfeat:hover .w3dring{transform:rotate(24deg)}
.navlinks .w3dfk{font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#c9a8ff}
.navlinks .w3dfeat b{font:600 22px/1.1 var(--disp);letter-spacing:-.02em;color:#fff}
.navlinks .w3dfl{font-size:13px;line-height:1.45;color:#d6ccec}
.navlinks .w3dgo{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font:500 13px var(--body);color:#fff}
.navlinks .w3dgo svg{width:15px;height:15px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.navlinks .w3dfeat:hover .w3dgo svg{transform:translateX(4px)}
.navlinks .w3drop a.w3dfeat.cur{background:radial-gradient(120% 90% at 100% 0%,rgba(160,107,255,.42),transparent 58%),linear-gradient(160deg,#2c1553,#140a2a 70%);
  box-shadow:0 0 0 1px rgba(201,168,255,.55) inset}
.navlinks .w3drop a.w3dfeat.cur:hover{background:radial-gradient(120% 90% at 100% 0%,rgba(160,107,255,.5),transparent 58%),linear-gradient(160deg,#2c1553,#140a2a 70%)}
.navlinks .w3dfeat.cur .w3dfk::after{content:" · you are here";color:#fff;letter-spacing:.08em}

.navlinks .w3dcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 4px;padding:4px 4px 2px}
.navlinks .w3dh{font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#8f84aa;padding:12px 10px 8px}
.navlinks .w3drop a.w3di{position:relative;display:flex;align-items:flex-start;gap:12px;padding:10px;border-radius:14px;text-decoration:none;
  color:var(--ink);background:transparent;overflow:visible;transition:background .2s}
.navlinks .w3drop a::before,.navlinks .w3drop a::after,.navlinks .w3drop a.cur::before{display:none}
.navlinks .w3dico{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#b996ff;
  background:linear-gradient(180deg,rgba(160,107,255,.16),rgba(160,107,255,.06));box-shadow:0 0 0 1px rgba(160,107,255,.22) inset;
  transition:color .2s,background .2s,box-shadow .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.navlinks .w3dico svg{width:18px;height:18px}
.navlinks .w3dit{display:flex;flex-direction:column;gap:2px;min-width:0;padding-top:1px}
.navlinks .w3dit b{font:500 14px/1.3 var(--body);color:var(--ink)}
.navlinks .w3dit span{font-size:12.5px;line-height:1.35;color:#8f84aa;transition:color .2s}
.navlinks .w3drop a.w3di:hover,.navlinks .w3drop a.w3di:focus-visible{background:rgba(255,255,255,.045)}
.navlinks .w3drop a.w3di:hover .w3dico,.navlinks .w3drop a.w3di:focus-visible .w3dico{color:#fff;background:linear-gradient(180deg,rgba(160,107,255,.36),rgba(160,107,255,.16));box-shadow:0 0 0 1px rgba(201,168,255,.45) inset;transform:translateY(-1px)}
.navlinks .w3drop a.w3di:hover .w3dit span{color:#c4bbd9}
.navlinks .w3drop a.w3di.cur{background:rgba(160,107,255,.12)}
.navlinks .w3drop a.w3di.cur .w3dico{color:#0a0514;background:linear-gradient(135deg,#c9a8ff,#a06bff);box-shadow:none}
.navlinks .w3drop a:focus-visible{outline:2px solid var(--violet);outline-offset:-2px}

.navlinks .w3dfoot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:8px;padding:12px 12px 12px 18px;border-radius:16px;background:rgba(255,255,255,.028)}
.navlinks .w3dfoot>span{font-size:13px;color:var(--dim)}
.navlinks .w3drop a.w3dbook{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font:500 13px var(--body);color:#fff;
  background:rgba(160,107,255,.18);box-shadow:0 0 0 1px rgba(160,107,255,.35) inset;transition:background .2s}
.navlinks .w3drop a.w3dbook:hover{background:rgba(160,107,255,.3)}
.navlinks .w3dbook svg{width:14px;height:14px;transition:transform .25s}
.navlinks .w3dbook:hover svg{transform:translateX(3px)}

.navlinks .w3dd.open .w3dcol,.navlinks .w3dd.hov .w3dcol,.navlinks .w3dd.open .w3dfeat,.navlinks .w3dd.hov .w3dfeat{animation:w3din .45s cubic-bezier(.16,1,.3,1) both}
.navlinks .w3dcol:nth-child(1){animation-delay:.04s}.navlinks .w3dcol:nth-child(2){animation-delay:.08s}.navlinks .w3dcol:nth-child(3){animation-delay:.12s}
@keyframes w3din{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:1060px){.navlinks .w3dpanel{grid-template-columns:1fr}.navlinks .w3dfeat{min-height:0;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:6px 14px}.navlinks .w3dgo{margin-top:0;margin-left:auto}}
@media (prefers-reduced-motion:reduce){.navlinks .w3drop,.navlinks .w3dico,.navlinks .w3trig svg,.navlinks .w3dring,.navlinks .w3dfeat{transition:none!important}.navlinks .w3dcol,.navlinks .w3dfeat{animation:none!important}}

/* ── 2. mobile menu: "What we do" folds open (11f) ─────── */
.mobmenu .mobtog{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;margin:0;
  font-family:var(--disp);font-weight:600;letter-spacing:-.015em;font-size:clamp(26px,8vw,40px);line-height:1.55;padding:14px 0;
  color:var(--ink);background:none;border:0;border-bottom:1px solid var(--line);text-align:left;cursor:pointer;
  opacity:0;transform:translateY(14px);transition:opacity .4s var(--ease),transform .4s var(--ease),color .2s;transition-delay:.11s}
body.menu .mobmenu .mobtog{opacity:1;transform:none}
.mobmenu .mobtog.cur{color:var(--violet)}
@media(max-height:720px){.mobmenu .mobtog{font-size:clamp(22px,6.4vw,30px);padding:11px 0}}
/* before a cookie choice the banner sits over the bottom of the menu: let the list scroll clear of it */
body:has(#ckbanner:not([hidden])) .mobmenu{padding-bottom:calc(200px + env(safe-area-inset-bottom,0px))}
.mobmenu .mobtog i{width:10px;height:10px;margin-right:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-3px) rotate(45deg);transition:transform .3s cubic-bezier(.2,.8,.2,1);opacity:.7}
.mobmenu .mobtog[aria-expanded="true"] i{transform:translateY(3px) rotate(-135deg)}
.mobmenu .mobtog:focus-visible{outline:2px solid var(--violet);outline-offset:4px;border-radius:6px}
.mobmenu .mobsub{display:flex;flex-direction:column;padding:6px 0 14px;border-bottom:1px solid var(--line);animation:mobIn .3s cubic-bezier(.16,1,.3,1)}
.mobmenu .mobsub[hidden]{display:none}
.mobmenu .mobsub a{font-family:var(--body);font-size:16.5px;font-weight:400;letter-spacing:0;line-height:1.3;padding:10px 0 10px 16px;
  color:var(--dim);border:0;opacity:1;transform:none;transition:color .2s}
.mobmenu .mobsub a:hover,.mobmenu .mobsub a.cur{color:var(--ink)}
.mobmenu .mobsub a.cur{box-shadow:inset 2px 0 0 var(--violet)}
.mobmenu .mobsub a.mobov{color:var(--violet);font-weight:500}
@keyframes mobIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ── footer: four columns now that Services joins brand, Site and Contact ── */
.frow{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
@media (max-width:820px){.frow{grid-template-columns:1fr 1fr}.frow>.fbrand{grid-column:1/-1}}

/* ── 3. /services/ grid ──────────────────────────────────── */
.svcdetail .w3eb{font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--violet);display:flex;align-items:center;gap:10px}
.svcdetail .w3eb::before{content:"";width:18px;height:1px;background:currentColor;opacity:.8}
.svcdetail h2{margin-top:12px}
.svcdgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.svcd{position:relative;display:flex;flex-direction:column;gap:4px;text-decoration:none;border:1px solid var(--line);border-radius:16px;
  padding:18px 40px 18px 18px;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);transition:border-color .25s,transform .25s}
.svcd:hover{border-color:rgba(160,107,255,.45);transform:translateY(-2px)}
.svcd .w3rk{font:500 10px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:#8f84aa}
.svcd b{color:var(--ink);font:500 16px var(--disp)}
.svcd>span:last-of-type{font-size:13.5px;color:var(--dim)}
.svcd i{position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:1.5px solid var(--violet);border-top:1.5px solid var(--violet);transform:translateY(-50%) rotate(45deg);transition:right .25s}
.svcd:hover i{right:14px}
@media (max-width:1000px){.svcdgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.svcdgrid{grid-template-columns:1fr}}

/* ── 4. exit popup ───────────────────────────────────────── */
.xp{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;overflow:hidden}
.xp-scrim{position:absolute;inset:0;background:rgba(7,3,15,.42);backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);animation:xpFade .3s ease-out both}
.xp-dlg{position:relative;width:min(620px,100%);overflow:hidden;overflow:clip;overscroll-behavior:contain;box-sizing:border-box;padding:40px 48px 26px;
  border-radius:28px;color:var(--ink);font-family:var(--body);
  background:
    radial-gradient(120% 80% at 100% 0%,rgba(160,107,255,.20),transparent 55%),
    radial-gradient(90% 70% at 0% 100%,rgba(61,21,95,.55),transparent 60%),
    linear-gradient(180deg,#140b27,#0c0619);
  border:1px solid rgba(160,107,255,.30);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 60px 160px -20px rgba(0,0,0,.85),0 0 0 10px rgba(160,107,255,.045),0 30px 80px -30px rgba(160,107,255,.45);
  animation:xpIn .5s cubic-bezier(.16,1,.3,1) both;isolation:isolate}
.xp-dlg:focus{outline:none}
/* the ring and grid live in their own clipped layer, so the panel itself has nothing to scroll */
.xp-deco{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none}
.xp-grid{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(160,107,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(160,107,255,.07) 1px,transparent 1px);
  background-size:32px 32px;-webkit-mask-image:radial-gradient(80% 70% at 85% 10%,#000,transparent 70%);mask-image:radial-gradient(80% 70% at 85% 10%,#000,transparent 70%)}
.xp-ring{position:absolute;top:-190px;right:-170px;width:400px;height:400px;z-index:-1;pointer-events:none}
.xp-ring .arc{stroke-dasharray:420;stroke-dashoffset:420;animation:xpArc 1.4s .25s cubic-bezier(.65,0,.35,1) forwards}
.xp-ring .dot{opacity:0;animation:xpFade .4s 1.45s ease-out forwards}
.xp-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-right:52px}
.xp-top img{height:22px;width:auto;display:block}
.xp-eb{display:inline-flex;align-items:center;gap:10px;font:500 11.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--violet)}
.xp-eb::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--violet);box-shadow:0 0 10px var(--violet);animation:xpPulse 2.4s ease-in-out infinite}
.xp-x{position:absolute;top:18px;right:18px;width:44px;height:44px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.04);
  color:#cfc6e4;display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.xp-x:hover{background:rgba(255,255,255,.10);border-color:rgba(160,107,255,.4);transform:rotate(90deg)}
.xp-x:focus-visible,.xp-no:focus-visible,.xp-cta:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.xp h2{margin:30px 0 0;font-family:var(--disp);font-weight:600;font-size:clamp(34px,4.4vw,48px);line-height:1.02;letter-spacing:-.035em}
.xp h2 span{display:block;color:#fff}
.xp h2 .v{background:linear-gradient(92deg,#c9a8ff,#a06bff 60%,#8b52f5);-webkit-background-clip:text;background-clip:text;color:transparent}
.xp-line{margin:18px 0 0;max-width:480px;font-size:17px;line-height:1.62;color:#cbc2de}
.xp-glen{display:flex;align-items:center;gap:14px;margin-top:24px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.xp-glen .ctapic{flex:none;width:46px;height:46px}
.xp-glen b{display:block;font:500 15px var(--disp);color:var(--ink)}
.xp-glen em{display:block;font-style:normal;font:11.5px var(--mono);letter-spacing:.04em;color:#8f84aa;margin-top:2px}
.xp-glen .q{margin-left:auto;font-size:14px;color:#d9d0ee;text-align:right;max-width:190px;line-height:1.4}
.xp-checks{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0}
.xp-checks li{display:inline-flex;align-items:center;gap:8px;font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#e2d9f5;
  padding:8px 12px;border-radius:999px;border:1px solid rgba(160,107,255,.28);background:rgba(160,107,255,.07)}
.xp-checks svg{width:13px;height:13px;flex:none}
.xp-cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;height:60px;margin-top:24px;border-radius:999px;
  background:linear-gradient(135deg,#b48aff,#a06bff 45%,#7c3fe0);color:#0a0514;font:600 17px var(--disp);letter-spacing:-.005em;text-decoration:none;
  box-shadow:0 14px 36px -8px rgba(160,107,255,.55),0 1px 0 rgba(255,255,255,.35) inset;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.xp-cta::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:xpShine 3.6s 1.2s ease-in-out infinite}
.xp-cta:hover{transform:translateY(-2px);box-shadow:0 20px 44px -10px rgba(160,107,255,.7),0 1px 0 rgba(255,255,255,.35) inset}
.xp-cta svg{width:18px;height:18px;transition:transform .2s}
.xp-cta:hover svg{transform:translateX(3px)}
.xp-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.xp-no{height:44px;padding:0 4px;border:0;background:none;color:#a79cc0;font:15px var(--body);cursor:pointer}
.xp-no:hover{color:var(--ink)}
.xp-esc{font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8a7fa6}
.xp-esc kbd{font:inherit;border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:2px 6px;margin-right:6px;color:#cfc6e4}
.xp.out .xp-scrim{animation:xpFadeOut .2s ease-in both}
.xp.out .xp-dlg{animation:xpOut .2s ease-in both}
@keyframes xpFade{from{opacity:0}to{opacity:1}}
@keyframes xpFadeOut{from{opacity:1}to{opacity:0}}
@keyframes xpIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes xpOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes xpArc{to{stroke-dashoffset:0}}
@keyframes xpPulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes xpShine{0%{left:-40%}35%,100%{left:130%}}
@media (prefers-reduced-motion:reduce){.xp-scrim,.xp-dlg,.xp.out .xp-scrim,.xp.out .xp-dlg{animation:none}.xp-ring .arc{animation:none;stroke-dashoffset:0}.xp-ring .dot{animation:none;opacity:1}.xp-eb::before,.xp-cta::after{animation:none}.xp-cta,.xp-x{transition:none}}
/* never scrolls: the ring is clipped by the panel, and short windows get a tighter layout instead */
@media (max-height:760px){.xp-dlg{padding:30px 40px 20px}.xp h2{margin-top:20px;font-size:clamp(30px,4vw,40px)}.xp-line{margin-top:12px;font-size:16px}.xp-glen{margin-top:16px;padding:10px 14px}.xp-checks{margin-top:14px}.xp-cta{margin-top:16px;height:54px}}
@media (max-height:640px){.xp-glen,.xp-esc{display:none}.xp h2{font-size:30px}.xp-dlg{padding:24px 32px 14px}}

/* ── 5. 404 page (11h) ───────────────────────────────────── */
.nf .nfhero{position:relative;overflow-x:clip;padding:calc(var(--hdh,92px) + clamp(40px,8vh,96px)) 0 clamp(40px,7vh,80px)}
.nf .nfwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,72px);align-items:center}
.nf h1{font-size:clamp(36px,5vw,64px);line-height:1.02;letter-spacing:-.03em;margin-top:16px;text-wrap:balance}
.nf .lede{color:var(--dim);font-size:clamp(16px,1.4vw,19px);line-height:1.6;max-width:46ch;margin-top:20px}
.nf .nfacts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.nf .nfhome{font:500 15px var(--body);color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(160,107,255,.5);padding-bottom:2px}
.nf .nfhome:hover{border-bottom-color:var(--violet)}
.nf .nfvis{margin:0;padding:22px 20px 14px;border-radius:24px;border:1px solid rgba(160,107,255,.2);
  background:radial-gradient(120% 90% at 50% 0%,rgba(160,107,255,.12),transparent 60%),linear-gradient(180deg,rgba(22,12,42,.85),rgba(11,6,22,.85));
  box-shadow:0 40px 90px -40px rgba(160,107,255,.35)}
.nf .nfsvg{display:block;width:100%;height:auto}
.nf .nfnum{font-family:var(--disp);font-weight:600;font-size:76px;letter-spacing:-.04em;fill:rgba(201,168,255,.14);stroke:rgba(201,168,255,.55);stroke-width:1}
.nf .nfq{font:600 15px var(--body);fill:#ff9ab8}
.nf .nfcap{font:500 18px var(--mono);letter-spacing:.12em;fill:#8f84aa}
.nf .nfmore{padding:clamp(10px,3vh,30px) 0 clamp(60px,10vh,110px)}
.nf .nfmore .w3eb{font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--violet);display:flex;align-items:center;gap:10px}
.nf .nfmore .w3eb::before{content:"";width:18px;height:1px;background:currentColor;opacity:.8}
.nf .nfgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.nf .nfcard{position:relative;display:flex;flex-direction:column;gap:4px;text-decoration:none;border:1px solid var(--line);border-radius:16px;
  padding:18px 40px 18px 18px;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);transition:border-color .25s,transform .25s}
.nf .nfcard:hover{border-color:rgba(160,107,255,.45);transform:translateY(-2px)}
.nf .nfcard b{color:var(--ink);font:500 16px var(--disp)}
.nf .nfcard span{font-size:13.5px;color:var(--dim)}
.nf .nfcard i{position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:1.5px solid var(--violet);border-top:1.5px solid var(--violet);transform:translateY(-50%) rotate(45deg);transition:right .25s}
.nf .nfcard:hover i{right:14px}
@media (max-width:900px){.nf .nfwrap{grid-template-columns:1fr}.nf .nfgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.nf .nfgrid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.nf .nfcard{transition:none}.nf .nfsvg .pt{display:none}}
/* hero content above the purple glow, as Package 9 does with .phero .wrap (review, 28 Sep night) */
.w3hero>.wrap,.nf .nfwrap{position:relative;z-index:1}