/* ============================================================
   BLINDSPOT DESIGN SYSTEM — tokens.css
   The single source of design truth, transcribed verbatim from the
   production stylesheet (seeblindspot.com · blindspot.css :root{}).
   Import this, then build from the variables — never hard-code a hex.

       <link rel="stylesheet" href="tokens.css">

   Two naming layers, identical values:
   • Canonical (unprefixed) — matches the live site markup 1:1.
   • --bs-* aliases — namespaced mirror for embedding in other systems.
   Generated 2026-06-14. Supersedes the archive-28 token set.
   ============================================================ */

/* ---------- @font-face — the four brand faces, nothing else ---------- */
@font-face{font-family:'Anton';src:url('fonts/Anton-Regular.woff2') format('woff2'),url('fonts/Anton-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('fonts/InstrumentSerif-Regular.woff2') format('woff2'),url('fonts/InstrumentSerif-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('fonts/InstrumentSerif-Italic.woff2') format('woff2'),url('fonts/InstrumentSerif-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/Archivo.woff2') format('woff2'),url('fonts/Archivo.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/Archivo-Italic.woff2') format('woff2'),url('fonts/Archivo-Italic.ttf') format('truetype');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-Regular.woff2') format('woff2'),url('fonts/IBMPlexMono-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-Medium.woff2') format('woff2'),url('fonts/IBMPlexMono-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}

/* ---------- Anton is a single-weight (400) display face: never faux-bold ----------
   Browsers default headings to bold (700). Anton ships only a 400 file, so the browser SYNTHESIZES
   the bold, thickening the strokes and visually closing the letter-spacing (it reads tighter and
   harder to read). The production site (blindspot.css) renders every Anton headline at
   font-weight:400, so the design system, which only catalogues the live site, mirrors that here.
   Any heading that intentionally uses a heavier Archivo weight sets it on its own, more specific
   selector and still wins. */
h1,h2,h3,h4,h5,h6{font-weight:400}

:root{
  /* ===== Colour — ink, paper, one accent. Transcribed from source. ===== */
  --ink:#020A0A;            /* primary text + dark surfaces. NOT pure black. */
  --ink-2:#0F1616;          /* hover/secondary dark surface */
  --paper:#FFFFFF;          /* primary light surface */
  --mist:#F7F1F0;           /* warm off-white — soft sections, hover fills */

  --red:#E25C5C;            /* THE accent. Links, focus, primary-hover, kickers on light. */
  --red-deep:#B23434;       /* pressed/deep accent, accent text on red-soft fields */
  --red-soft:#FBE9E9;       /* pale accent field — rules, callouts, chart segment */
  --coral:#F68D8D;          /* the accent's voice on dark (ink) surfaces */

  /* heat scale — sequential ramp for footfall/intensity maps (FILLS only, never text).
     Quiet → peak; --heat-0 is mist, climbing to a deep red. See location_intelligence + data_viz. */
  --heat-0:var(--mist);     /* quiet / no data */
  --heat-1:#FBE9E9;
  --heat-2:#F8CFCB;
  --heat-3:#F6ADA6;
  --heat-4:#EE7E74;
  --heat-5:#D14A41;         /* peak flow */

  --line:rgba(2,10,10,.12);        /* default hairline divider on light */
  --line-strong:rgba(2,10,10,.85); /* structural 1.5px borders (cards, grids) */
  --muted:rgba(2,10,10,.58);       /* secondary text on light */

  --w-line:rgba(255,255,255,.14);  /* hairline divider on dark */
  --w-muted:rgba(255,255,255,.64); /* secondary text on dark */

  /* ===== Layout + motion ===== */
  --max:1280px;                       /* content max-width */
  --ease:cubic-bezier(.22,.8,.2,1);   /* the house easing — every transition uses it */

  /* ===== --bs-* aliases (identical values) ===== */
  --bs-ink:var(--ink); --bs-ink-2:var(--ink-2); --bs-paper:var(--paper); --bs-mist:var(--mist);
  --bs-red:var(--red); --bs-red-deep:var(--red-deep); --bs-red-soft:var(--red-soft); --bs-coral:var(--coral);
  --bs-line:var(--line); --bs-line-strong:var(--line-strong); --bs-muted:var(--muted);
  --bs-w-line:var(--w-line); --bs-w-muted:var(--w-muted);
  --bs-max:var(--max); --bs-ease:var(--ease);

  /* ===== Radius — not in source :root{} (values are inline); codified here from observed usage ===== */
  --bs-radius-pill:999px;   /* buttons, chips, status pills, inputs */
  --bs-radius-card:18px;    /* perf cards, case cards, leads, jobs */
  --bs-radius-panel:20px;   /* bordered grids, compare table, media-plan, no-cards */
  --bs-radius-feature:28px; /* dark feature blocks (Blinky, final CTA, mission, offices) */
  --bs-radius-field:13px;   /* intake form fields */
  --bs-radius-screen:5px;   /* the LED screen inside a billboard frame */

  /* ===== Elevation — observed shadow recipes ===== */
  --bs-shadow-card:0 26px 50px -22px rgba(178,52,52,.28);      /* case-card hover (accent cast) */
  --bs-shadow-panel:0 36px 70px -34px rgba(2,10,10,.30);       /* media-plan / floating panel */
  --bs-shadow-billboard:0 40px 80px -28px rgba(2,10,10,.5),0 0 110px rgba(246,141,141,.20); /* the billboard frame + coral glow */

  /* ===== Type scale — fluid clamps, observed from source ===== */
  --bs-fs-hero:clamp(52px,7vw,104px);   /* fA hero h1 */
  --bs-fs-display:clamp(38px,5vw,72px); /* section h2 */
  --bs-fs-statement:clamp(30px,4.6vw,64px);
  --bs-fs-stat:clamp(42px,3.8vw,58px);  /* perf-card value */
  --bs-fs-body:16.5px;
  --bs-fs-lede:clamp(17px,1.4vw,20px);
  --bs-fs-label:12px;                   /* mono eyebrow */

  /* ===== Spacing — an 8px rhythm the system imposes (the live site spaced ad-hoc) ===== */
  --s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px; --s-5:40px; --s-6:64px; --s-7:96px;
  --bs-space-1:var(--s-1); --bs-space-2:var(--s-2); --bs-space-3:var(--s-3);
  --bs-space-4:var(--s-4); --bs-space-5:var(--s-5); --bs-space-6:var(--s-6); --bs-space-7:var(--s-7);
  --gutter:28px;            /* desktop page gutter; 24 tablet, 20 mobile (see --gutter-* below) */
  --gutter-tablet:24px; --gutter-mobile:20px;

  /* ===== Breakpoints — codified from the live site's load-bearing widths.
     (Custom props can't be read inside @media; these are the canonical values
     for JS, docs, and tooling — author media queries with the literals.) ===== */
  --bp-sm:560px;   /* mobile → small: single column, reduced type */
  --bp-md:880px;   /* small → medium: 2-up grids appear */
  --bp-lg:980px;   /* the main desktop collapse — most layouts switch here */
  --bp-max:1280px; /* content container cap (= --max) */

  /* ===== Motion — one easing + a duration scale + the signature timings ===== */
  --dur-fast:.18s;   /* hovers, taps, small state flips */
  --dur-base:.35s;   /* the default — buttons, fills, panels */
  --dur-slow:.6s;    /* large reveals, hero transitions */
  --dur-blink:3.4s;  /* the logo dot's blink cycle (seizure-safe, ≪3 flashes/sec) */
  --reveal-y:34px;   /* scroll-reveal rise distance */

  /* ===== Layering — z-index scale (codified from observed usage; keeps stacking sane) ===== */
  --z-base:0; --z-raised:10; --z-sticky:100; --z-nav:200; --z-overlay:900; --z-modal:1000; --z-toast:1100;

  /* ===== Icon sizes — the stroke-icon set renders at these only ===== */
  --icon-sm:16px; --icon-md:20px; --icon-lg:24px;   /* 24 = the WCAG 2.5.8 target floor */

  /* ===== Status aliases — red stays the brand ACCENT, never "error". Status is its own quiet set. ===== */
  --status-ok:#7CD9A8;       /* available / success — the green availability badge on the map */
  --status-ok-soft:#E6F6EE;  /* its soft fill */
  --status-warn:#E8B04B;     /* caution — amber, used sparingly, never red */
  --status-warn-soft:#FBF1DC;
  --status-info:var(--ink);  /* neutral info uses ink, not a new hue */

  /* ============================================================
     SEMANTIC TIER — role tokens that resolve per ground.
     Components should reference THESE, not the primitives, so a
     ground (light/dark) or a future palette change Just Works.
     Defaults below = LIGHT ground. Dark overrides live in
     `.dark, [data-ground="dark"]` further down.
     ============================================================ */
  --surface:var(--paper);          /* page / card background */
  --surface-2:var(--mist);         /* raised / hover / soft section */
  --surface-inverse:var(--ink);    /* the opposite ground (for inverted blocks) */
  --on-surface:var(--ink);         /* primary text/icons (AAA 19.99) */
  --on-surface-muted:var(--muted); /* secondary text (AA 4.96) */
  --accent:var(--red);             /* DISPLAY/fill accent — large type, fills, the dot */
  --accent-text:var(--red-deep);   /* TEXT-SAFE accent — links, small labels (AA 6.12) */
  --accent-soft:var(--red-soft);   /* pale accent field */
  --border:var(--line);            /* hairline divider */
  --border-strong:var(--line-strong); /* structural border */
  --field-bg:var(--paper);         /* input background */
  --focus-ring:var(--red);         /* focus outline colour */
}

/* ===== Semantic tier — DARK ground overrides (ink surfaces) ===== */
.dark, [data-ground="dark"]{
  --surface:var(--ink);
  --surface-2:var(--ink-2);
  --surface-inverse:var(--paper);
  --on-surface:#fff;
  --on-surface-muted:var(--w-muted);
  --accent:var(--coral);           /* coral is BOTH display and text-safe on ink (AAA 8.68) */
  --accent-text:var(--coral);
  --accent-soft:rgba(246,141,141,.16);
  --border:var(--w-line);
  --border-strong:rgba(255,255,255,.55);
  --field-bg:var(--ink-2);
  --focus-ring:var(--coral);
}

/* ============================================================
   SEMANTIC TYPE PRESETS — the four faces in their fixed roles.
   These mirror the .display / .serif-acc / .mono utilities on the
   live site. Body is Archivo at 1.55 line-height, ink, never black.
   ============================================================ */
.bs-display{font-family:'Anton',system-ui,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.94}
.bs-serif-acc{font-family:'Instrument Serif',serif;font-style:italic;text-transform:none;letter-spacing:0;line-height:inherit;color:var(--red)}
.dark .bs-serif-acc{color:var(--coral)}
.bs-mono{font-family:'IBM Plex Mono',monospace;letter-spacing:.06em}
.bs-body{font-family:'Archivo',system-ui,sans-serif;font-weight:400;line-height:1.55;color:var(--ink);-webkit-font-smoothing:antialiased}

/* The eyebrow / kicker — mono, uppercase, leading red dash (coral on dark) */
.bs-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:12px}
.bs-eyebrow::before{content:"";width:26px;height:1.5px;background:var(--red)}
.dark .bs-eyebrow{color:var(--w-muted)}
.dark .bs-eyebrow::before{background:var(--coral)}

::selection{background:var(--coral);color:var(--ink)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- Logo lockup — the blinking dot, verbatim from the live site ---------- */
/* Nav lockup: a leading dot + Anton BLINDSPOT. Dot is --red on light, --coral on dark. */
.bs-logo{font-family:'Anton',sans-serif;font-size:21px;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.bs-logo i{width:10px;height:10px;border-radius:50%;background:var(--red);display:inline-block;animation:blink 3.4s infinite}
.dark .bs-logo{color:#fff}
.dark .bs-logo i{background:var(--coral)}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}

/* The cut display lockup (foot-mega): giant Anton BLINDSPOT. with accent period, intentional bleed. */
.bs-foot-mega{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(64px,13vw,196px);line-height:.84;letter-spacing:.01em;text-align:center;color:var(--ink);user-select:none;white-space:nowrap;transform:translateY(.12em)}
.bs-foot-mega span{color:var(--red)}
.dark .bs-foot-mega{color:#fff}
.dark .bs-foot-mega span{color:var(--coral)}
@media(prefers-reduced-motion:reduce){.bs-logo i{animation:none}}

/* ============================================================
   COMPONENT · sticky site navigation (.bs-nav)
   Injected into every page <body>; styles shared here so pages stay lean.
   ============================================================ */
.bs-nav{position:sticky;top:0;z-index:9000;display:flex;align-items:center;gap:14px;padding:9px 20px;background:rgba(2,10,10,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.10);font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(255,255,255,.7)}
.bs-nav__home{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.02em;font-size:15px;line-height:1}
.bs-nav__dot{width:8px;height:8px;border-radius:50%;background:var(--coral);display:inline-block;animation:bsblink 3.4s infinite}
@keyframes bsblink{0%,92%,100%{opacity:1}96%{opacity:.12}}
.bs-nav__crumb{color:var(--coral);letter-spacing:.08em;text-transform:uppercase;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40vw}
.bs-nav__crumb::before{content:"/ ";color:rgba(255,255,255,.35)}
.bs-nav__crumb:empty{display:none}
.bs-nav__spacer{flex:1}
.bs-nav__btn{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:rgba(255,255,255,.85);cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;text-decoration:none;transition:background .25s,color .25s,border-color .25s}
.bs-nav__btn:hover{background:#fff;color:var(--ink);border-color:#fff}
.bs-nav__btn:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.bs-nav__btn svg{width:14px;height:14px}
@media(max-width:560px){.bs-nav__crumb{display:none}.bs-nav__home{font-size:13px}.bs-nav__btn{padding:7px 11px}}
@media print{.bs-nav{display:none}}

/* ============================================================================
   WEBSITE-PARITY COMPONENTS  (added 2026-06-16)
   Mirrors the consolidated fixes shipped in seeblindspot.com/blindspot.css.
   See location_system.html (BB-60) for full component docs + implementation.
   ============================================================================ */
/* Canonical display headline (Anton) — letter-spacing .005em, line-height .94 (never tighter). */
/* Section two-col header: TOP-align so the headline never drops below a taller intro. */
.sec-duo{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start;margin-bottom:8px}
@media(max-width:760px){.sec-duo{grid-template-columns:1fr;gap:18px}}
/* Equal-size "flow" row: the Paper coverage map + the footfall-rhythm panel, same height. */
.flow-even{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.flow-even .heat-panel,.flow-even .rhythm{display:flex;flex-direction:column}
.flow-even .heat-panel .heat-legend{margin-top:auto}
.flow-even .rhythm .rh-axis{margin-top:auto}
@media(max-width:760px){.flow-even{grid-template-columns:1fr}}
/* Footfall-heatmap tooltip (3 traffic-flow stats per colour tier, tier-level only). */
#bhmTip{position:fixed;z-index:9999;pointer-events:none;background:var(--ink,#020A0A);color:#fff;border-radius:12px;padding:11px 14px;max-width:250px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;line-height:1.5;box-shadow:0 18px 40px -18px rgba(2,10,10,.6);opacity:0;transform:translateY(4px);transition:opacity .14s ease,transform .14s ease}
#bhmTip.on{opacity:1;transform:translateY(0)}
#bhmTip b{display:block;font-family:'Archivo',sans-serif;font-size:13px;letter-spacing:0;text-transform:none;margin-bottom:7px}
#bhmTip .r{display:flex;gap:12px;justify-content:space-between;margin-top:3px}
#bhmTip .r i{color:var(--coral,#F68D8D);font-style:normal;text-transform:uppercase;letter-spacing:.08em}
#bhmTip .r s{text-decoration:none;text-align:right}
/* Operator-photo placeholder tile — shows when an image is missing/pending (graceful via onerror). */
.pf-frame.ph{aspect-ratio:16/10;background:linear-gradient(135deg,#F4EEED 0%,#FBE9E9 100%);display:flex;align-items:center;justify-content:center}
.pf-frame.ph::after{content:"image pending sign-off";font-family:'IBM Plex Mono',monospace;font-size:11px;color:#C39B97;letter-spacing:.06em}
.pfig.wide .pf-frame.ph{aspect-ratio:24/9}
/* Vertical rhythm: base section padding reduced 130px -> 80px on bespoke pages; location sections
   override inline and are balanced by the rhythm normalizer (no gap >~100px). */