/* ============================================================
   CUSTOMSGENIUS — SUPREMATIST SYSTEM (site-wide restyle layer)
   Load AFTER styles.min.css (or after a page's inline legacy
   :root). Part 1 remaps the legacy token names onto the
   suprematist palette so var-driven legacy CSS restyles itself;
   part 2 is the shared chrome (nav, footer, Calendly popup);
   part 3 is targeted overrides for hard-coded legacy visuals.
   Token values sampled from the live /radar and /calculator
   pages — the same block index.html carries.
   ============================================================ */

/* ---- 1. Tokens: suprematist + legacy remap ---- */
:root{
  /* suprematist tokens */
  --paper:#F6F4EF; --paper-2:#EDEAE0; --panel:#FFFFFF;
  --ink:#141414; --ink-muted:#6B6B66; --rule:#B2B0AD;
  --on-accent:#141414; --on-ink:#F6F4EF;
  --c--1:14px; --c-0:16px; --c-1:18px; --c-2:20px; --c-3:23px;
  --d-0:16px; --d-1:26px; --d-2:42px; --d-3:68px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --shell:1160px;

  /* legacy names remapped (styles.min.css + article inline :root) */
  --accent:#F04D00;
  --accent-hover:#c73a10;
  --accent-muted:#6B6B66;
  --accent-wash:#EDEAE0;
  --btn:#141414;
  --btn-hover:#141414;
  --complement:#F04D00;
  --complement-muted:#6B6B66;
  --navy:#141414;
  --navy-light:#141414;
  --navy-mid:#3d3d3a;
  --bg:#F6F4EF;
  --bg-dark:#141414;
  --text:#141414;
  --text-muted:#6B6B66;
  --text-light:#8a8a83;
  --card-bg:#FFFFFF;
  --border:#B2B0AD;
  --border-light:#D4D2C8;
  --surface-light:#EDEAE0;
  --surface-mid:#EDEAE0;
  --danger:#141414;            /* validation is monochrome in this system */
  --radius:0;
  --font-display:'Inter',-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-body:'Inter',-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:'SF Mono','Cascadia Code',Consolas,monospace;
}

/* ---- Simulated materials stand down ---- */
*,*::before,*::after{
  box-shadow:none !important;
  text-shadow:none !important;
  border-radius:0 !important;
}
body{ background:var(--paper); color:var(--ink); font-family:var(--font-body); }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* ---- 2. Shared chrome: header/nav ---- */
.site{ border-bottom:1px solid var(--rule); background:var(--paper); }
.site .shell{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s5);
  min-height:64px; padding-top:var(--s3); padding-bottom:var(--s3);
}
.shell{ max-width:var(--shell); margin:0 auto; padding-left:var(--s5); padding-right:var(--s5); }
@media (min-width:900px){ .shell{ padding-left:var(--s7); padding-right:var(--s7); } }
.brand{ display:flex; align-items:center; gap:var(--s3); text-decoration:none; margin-right:auto; color:var(--ink); }
.brand svg{ width:40px; height:24px; }
.brand span{ font-size:var(--d-0); font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.nav{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s5); list-style:none; margin:0; padding:0; }
.nav a{
  font-size:var(--c--1); font-weight:500; color:var(--ink-muted); text-decoration:none;
  min-height:44px; display:inline-flex; align-items:center;
}
.nav a:hover{ color:var(--ink); }
.nav .drop{ position:relative; }
.nav .drop-menu{
  position:absolute; top:100%; left:calc(var(--s4) * -1); z-index:10;
  min-width:200px; padding:var(--s2) 0;
  background:var(--panel); border:2px solid var(--ink);
  display:none; flex-direction:column;
}
.nav .drop:hover .drop-menu, .nav .drop:focus-within .drop-menu{ display:flex; }
.nav .drop-menu a{ padding:0 var(--s4); min-height:40px; width:100%; }
.nav .drop-menu--right{ left:auto; right:calc(var(--s3) * -1); min-width:140px; }
.nav .lang > a{ gap:var(--s2); font-size:12px; font-weight:600; letter-spacing:.1em; color:var(--ink); }
.nav .lang .drop-menu a{ gap:var(--s2); font-size:12px; letter-spacing:.1em; }
.flag{ width:20px; height:14px; display:block; }
.nav .demo{
  border:2px solid var(--ink); color:var(--ink); font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; font-size:12px;
  padding:0 var(--s4); min-height:38px; background:transparent;
}
.nav .signin{ color:var(--ink); font-weight:600; }
.skip{ position:absolute; left:-9999px; top:0; z-index:20; background:var(--ink); color:var(--on-ink); padding:var(--s3) var(--s5); font-size:var(--c--1); }
.skip:focus{ left:0; }

/* ---- Shared chrome: footer ---- */
footer.foot{ background:var(--ink); color:var(--on-ink); padding:var(--s8) 0 var(--s6); margin-top:var(--s9); }
footer.foot :focus-visible{ outline-color:var(--on-ink); }
.foot-grid{ display:grid; gap:var(--s7); }
@media (min-width:720px){ .foot-grid{ grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--s6); } }
.foot-brand{ display:flex; align-items:center; gap:var(--s3); }
.foot-brand span{ font-size:var(--d-0); font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.foot-tag{ font-size:var(--c--1); color:rgba(246,244,239,.66); margin-top:var(--s3); }
footer.foot h2{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(246,244,239,.55); margin:0 0 var(--s4); }
footer.foot ul{ list-style:none; display:grid; gap:var(--s2); margin:0; padding:0; }
footer.foot a{ font-size:var(--c--1); color:rgba(246,244,239,.82); text-decoration:none; }
footer.foot a:hover{ color:var(--on-ink); }
footer.foot address{ font-style:normal; font-size:var(--c--1); color:rgba(246,244,239,.82); line-height:1.7; white-space:nowrap; }
.foot-legal{ margin-top:var(--s8); padding-top:var(--s5); border-top:1px solid rgba(246,244,239,.18); font-size:var(--c--1); color:rgba(246,244,239,.55); }

/* ---- Shared chrome: Calendly popup (new pages use .cal-*, legacy pages .calendly-*) ---- */
.cal-overlay, .calendly-overlay{
  position:fixed; inset:0; z-index:3000; display:none; align-items:center; justify-content:center;
  background:rgba(20,20,20,.45); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.cal-overlay.open, .calendly-overlay.active{ display:flex; }
.cal-modal, .calendly-modal{
  position:relative; width:min(960px,94vw); height:min(760px,88vh);
  background:var(--panel); border:2px solid var(--ink); max-width:none;
}
.cal-close, .calendly-modal-close{
  position:absolute; top:0; right:0; width:44px; height:44px; z-index:1;
  background:var(--ink); color:var(--on-ink); border:0; font-size:var(--c-2); line-height:1; cursor:pointer;
}
.cal-modal iframe, .calendly-modal iframe{ width:100%; height:100%; border:0; display:block; }

/* ---- 3. Targeted legacy overrides (hard-coded visuals vars can't reach) ---- */
.site-nav{ position:static; background:var(--paper); border-bottom:1px solid var(--rule); backdrop-filter:none; -webkit-backdrop-filter:none; }
[class*="hero"], [class*="banner"], [class*="gradient"]{ background-image:none; }
.sec-mark{ width:40px; height:2px; background:var(--ink); margin-bottom:var(--s5); }
.microlabel{ font-size:var(--c--1); font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-muted); }
.panel-plate{ position:relative; border:2px solid var(--ink); background:var(--panel); padding:var(--s6); }
.riding-tab{
  position:absolute; top:-11px; left:var(--s5); z-index:2;
  background:var(--accent); color:var(--on-accent);
  font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  padding:3px var(--s3);
}

/* About page: headshots as square documentary plates, monochrome iconography */
.team-card-photo{ filter:grayscale(1); background:var(--paper-2); border:1px solid var(--ink) !important; transition:none; }
.team-card:hover .team-card-photo{ border-color:var(--ink); transform:none; }
.team-card-name .linkedin-icon svg{ fill:var(--ink); }
.team-section-label{ color:var(--ink-muted); letter-spacing:.2em; }

/* Legal stand-down (privacy/terms/DPA-adjacent pages add class="legal" on body) */
body.legal{ background:var(--paper-2); }
body.legal *{ color:var(--ink); }
body.legal a{ text-decoration:underline; }

/* Mobile nav: burger collapses the bar; open state is a full-page menu. */
.nav-burger{ display:none; }
@media (max-width:899px){
  .nav-burger{
    display:flex; flex-direction:column; justify-content:center; gap:6px;
    width:44px; height:44px; padding:10px;
    background:transparent; border:0; cursor:pointer; position:relative; z-index:31;
  }
  .nav-burger span{ display:block; height:2px; width:100%; background:#141414; transition:transform .16s linear, opacity .16s linear; }
  .site nav{ display:none; }
  html.nav-open{ overflow:hidden; }
  html.nav-open .site nav{
    display:block; position:fixed; inset:0; z-index:30;
    background:#F6F4EF; overflow:auto; padding:96px 24px 48px;
  }
  html.nav-open .nav-burger{ position:fixed; top:10px; right:24px; }
  html.nav-open .nav-burger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  html.nav-open .nav-burger span:nth-child(2){ opacity:0; }
  html.nav-open .nav-burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
  html.nav-open .site .nav{ display:flex; flex-direction:column; align-items:stretch; gap:0; max-width:520px; margin:0 auto; }
  html.nav-open .site .nav > li{ border-bottom:1px solid #B2B0AD; }
  html.nav-open .site .nav > li:last-child{ border-bottom:0; }
  html.nav-open .site .nav a{ font-size:20px; font-weight:600; color:#141414; min-height:56px; }
  html.nav-open .site .nav .drop-menu{ display:flex; position:static; border:0; background:transparent; padding:0 0 12px; min-width:0; }
  html.nav-open .site .nav .drop-menu a{ font-size:16px; font-weight:500; color:#6B6B66; min-height:44px; padding:0 0 0 20px; }
  html.nav-open .site .nav .demo{ justify-content:center; margin:16px 0; min-height:54px; font-size:16px; }
  html.nav-open .site .nav .lang{ padding:12px 0; }
  html.nav-open .site .nav .lang .drop-menu{ flex-direction:row; gap:24px; padding:8px 0 0 20px; }
  html.nav-open .site .nav li.m-hide{ display:none; }
  html.nav-open .site .nav .lang .drop-menu{ display:none; }
  html.nav-open .site .nav .lang.lang-open .drop-menu{ display:flex; }
}