/* Footer: a black card. Discovery-call CTA up top, four doorway cards, a meta strip,
   then a full-width ASCII wordmark rendered with the loader's ramp, red palette and noise-scramble.
   Under 640px the wordmark becomes a 9 and a spade. Everything is scoped to .nos-foot. */
.nos-foot{position:relative;overflow:hidden;border-radius:20px;color:var(--ink);max-width:1440px;margin:0 auto;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 52%,var(--glow) 100%);
  padding:0 clamp(18px,3vw,40px);border:1px solid var(--hair)}
.nos-foot .top{padding-block:clamp(56px,8.5vw,124px) clamp(64px,9vw,132px)}
.nos-foot a:focus-visible,.nos-foot button:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.nos-foot .pitch{margin-left:22.5%}
.nos-foot .pitch h2{margin:0 0 26px;color:var(--ink);font-family:var(--f-display);font-weight:400;
  font-size:clamp(22px,2vw,30px);line-height:1.2;letter-spacing:.002em;text-wrap:balance}

/* CTA: label box + arrow tile; on hover red wipes in, the label scrambles, the arrow lifts.
   The red is a background layer so the rounded corners hold in every browser. */
.nos-foot .cta{display:inline-flex;align-items:stretch;gap:2px;color:#000}
.nos-foot .cta .box,.nos-foot .cta .tile{display:inline-flex;align-items:center;justify-content:center;height:34px;border-radius:7px;
  background:linear-gradient(var(--red),var(--red)) 0 0/0% 100% no-repeat,var(--dim-solid);
  transition:background-size .38s var(--ease),color .25s ease}
.nos-foot .cta .box{padding:0 18px;font-family:var(--f-mono);font-size:13px;letter-spacing:.01em;white-space:pre}
.nos-foot .cta .tile{width:34px;font-family:var(--f-mono);font-size:14px;transition-delay:.06s}
.nos-foot .cta:hover .box,.nos-foot .cta:hover .tile,.nos-foot .cta:focus-visible .box,.nos-foot .cta:focus-visible .tile{background-size:100% 100%;color:var(--ink)}
.nos-foot .cta .arr{display:inline-block;transition:transform .38s var(--ease)}
.nos-foot .cta:hover .arr,.nos-foot .cta:focus-visible .arr{transform:translate(2px,-2px)}

/* cards: four doorways between the CTA and the bottom strip */
.nos-foot .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  margin:0 calc(-1 * clamp(18px,3vw,40px) + 14px) 28px}
.nos-foot .card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  aspect-ratio:1.9/1;min-height:150px;padding:clamp(16px,1.6vw,22px);border-radius:8px;overflow:hidden;isolation:isolate;
  transition:filter .25s ease}
.nos-foot .card canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.nos-foot .card b{font-family:var(--f-display);font-weight:400;font-size:clamp(17px,1.35vw,21px);line-height:1.15}
.nos-foot .card span{display:inline-flex;align-items:center;gap:6px;font-size:12px}
.nos-foot .card .arr{display:inline-block;font-style:normal;transition:transform .3s var(--ease)}
.nos-foot .card:hover .arr,.nos-foot .card:focus-visible .arr{transform:translate(2px,-2px)}
.nos-foot .card:hover{filter:brightness(1.12)}
.nos-foot .c-noise{background:#0f0f0e;color:var(--ink);border:1px solid var(--faint)}
.nos-foot .c-back{background:#120403;color:var(--ink)}
.nos-foot .c-red{background:var(--red-fill);color:var(--ink)}
.nos-foot .c-paper{background:#e4e4e2;color:#000}
.nos-foot .c-paper:hover{filter:brightness(1.04)}
.nos-foot.mid .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.nos-foot.narrow .cards{grid-template-columns:minmax(0,1fr);gap:8px;margin-inline:0}
.nos-foot.narrow .card{aspect-ratio:auto;min-height:132px}

.nos-foot .meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;
  padding-top:16px;border-top:1px solid var(--faint);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.nos-foot .meta nav,.nos-foot .meta .legal{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.nos-foot .meta .legal{gap:8px 24px}
.nos-foot .meta a{transition:color .18s ease}
.nos-foot .meta a:hover{color:var(--ink)}

.nos-foot .mark{position:relative;margin:clamp(14px,2vw,26px) calc(-1 * clamp(18px,3vw,40px)) 0;touch-action:pan-y}
.nos-foot .mark canvas{display:block;width:100%;cursor:crosshair}

/* narrow footer (driven by the footer's own width) */
.nos-foot.mid .pitch{margin-left:12%}
.nos-foot.narrow .pitch{margin-left:0}
.nos-foot.narrow .top{padding-block:64px 72px}
.nos-foot.narrow .pitch h2{font-size:24px;margin-bottom:22px}
.nos-foot.narrow .meta{flex-direction:column;align-items:stretch;gap:0;padding-top:4px}
.nos-foot.narrow .meta nav{gap:0 24px}
.nos-foot.narrow .meta a{display:inline-flex;align-items:center;min-height:44px}
.nos-foot.narrow .soc{border-bottom:1px solid var(--faint)}
.nos-foot.narrow .legal{flex-direction:column;align-items:flex-start;gap:0}
.nos-foot.narrow .copy{padding-block:6px 4px}

@media (prefers-reduced-motion:reduce){
  .nos-foot .cta .box,.nos-foot .cta .tile,.nos-foot .cta .arr{transition:none}
}