/* ZA Growth brand mark - THE SINGLE SOURCE. Linked by every page that shows the
   logo: the homepage, the 11 letter.css pages, and the 4 tool pages.
   It used to be copied into two stylesheets and one of them was missing --e, which
   silently killed the animation on 11 of 12 pages. Do not copy this block again.
   Every token carries a fallback so the mark survives on any of the three palettes
   in this site (--orange / --brass) and with no token file at all.
   Polish gate: 97/100 SHIP, 2026-08-18.

   KNOWN LIMITATION, RECORDED ON PURPOSE - DO NOT "FIX" THIS:
   Cmd+F cannot find "Growth" in the wordmark. The drawn o is an inline-block, which
   is atomic to find-in-page, so the word reads as three runs. Rebuilding the mark on
   the real glyph WOULD fix find-in-page and would break the logo during every
   font-swap (fonts.css uses font-display:swap), because the ring is sized to
   Bricolage's counter and Helvetica's is different. The CSS ring is font-proof;
   the real glyph is not. Copy/paste, screen readers, <title> and all structured
   data carry "ZA Growth" correctly, which is what F4 actually required.
   ============================================================ */
/* ============================================================
   ZA Growth brand mark - "The Hidden Agent", THE BLINK
   Geometry keyed to Bricolage Grotesque, master 96pt ExtraBold (UPM 1000):
   x-height .528em, round overshoot .014em  =>  bowl .556em, stem .116em,
   counter .324em, sidebearing .042em. The o sits .014em BELOW the baseline,
   which is the glyph's own overshoot, not a hand-tuned nudge.
   The eyes are revealed in TIME where they cannot be drawn with clearance:
   once on load, and held open on hover or keyboard focus. Devices with no
   hover get them drawn permanently - see the (hover:none) block below.
   Opacity only: at 1.55px a scale change is smaller than a device pixel.
   ============================================================ */
.brand{
  --bowl:.556em;
  --stem:max(1.9px,.116em);
  --counter:calc(var(--bowl) - 2*var(--stem));
  --sb:.042em;
  --eye-d:.086em;
  --eye-gap:.058em;
  --eye-top:.090em;
  --eye-side:calc((var(--counter) - 2*var(--eye-d) - var(--eye-gap))/2);
  --brand-e:var(--e,cubic-bezier(.22,1,.36,1));
  font-family:var(--disp,'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif);font-weight:800;font-size:20px;letter-spacing:-.028em;line-height:1;
  font-optical-sizing:auto;
  color:#fff;text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:baseline;gap:.2em;
}
.brand .g{color:var(--orange,var(--brass,#f2560d))}
.brand .o{
  display:inline-block;position:relative;box-sizing:border-box;
  width:var(--bowl);height:var(--bowl);
  border:var(--stem) solid currentColor;border-radius:50%;
  vertical-align:baseline;transform:translateY(.014em);
  margin:0 var(--sb);
  overflow:hidden;   /* keeps the baseline at the bottom margin edge once
                        the letter below is in flow, and clips the glyph */
}
/* the real letter, kept in the DOM so the page text still reads "ZA Growth"
   for copy/paste, find-in-page and anything reading the rendered text */
.brand .o i{color:transparent;font:inherit;font-style:normal}
.brand .o b{
  position:absolute;top:var(--eye-top);
  width:var(--eye-d);height:var(--eye-d);
  border-radius:50%;background:currentColor;
  opacity:0;
  transition:opacity .18s var(--brand-e);
  animation:zaBlink 2.2s var(--brand-e) .7s 1;
}
.brand .o b:first-of-type{left:var(--eye-side)}
.brand .o b:last-of-type{right:var(--eye-side)}
/* !important outranks a RUNNING animation without cancelling it, so the load
   blink is never destroyed and therefore never replays on mouse-out */
.brand:hover .o b,.brand:focus-visible .o b{opacity:1!important}
/* the wordmark is orange on a graphite bar, so an orange ring would read as
   part of the logo rather than as a focus state */
.brand:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:3px}
@keyframes zaBlink{
  0%{opacity:0}
  18%{opacity:1}
  62%{opacity:1}
  82%{opacity:0}
  100%{opacity:0}
}
/* No hover to reveal with, so the eyes are simply drawn. */
@media(hover:none){.brand .o b{opacity:1;animation:none}}
@media(prefers-reduced-motion:reduce){.brand .o b{opacity:1;animation:none}}
@media(max-width:620px){.brand{font-size:18px}}