/* Self-hosted webfonts — latin subset only.
   Previously loaded from fonts.googleapis.com + fonts.gstatic.com: two extra DNS+TLS
   handshakes plus a render-blocking stylesheet round-trip (587ms on a throttled phone),
   and every visitor's IP disclosed to a third party.

   IBM Plex Sans and JetBrains Mono are variable fonts — Google returns the same file for
   every weight, so one file each covers the whole range. Chakra Petch is static, hence
   two files. Chakra Petch 500 was declared in the old URL but used nowhere; dropped.

   To regenerate, see README "Fonts". */

@font-face{
  font-family:'Chakra Petch';
  font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/chakrapetch-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Chakra Petch';
  font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/chakrapetch-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal; font-weight:100 700; font-display:swap;
  src:url('fonts/ibmplexsans-var.woff2') format('woff2-variations'),
      url('fonts/ibmplexsans-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal; font-weight:400 800; font-display:swap;
  src:url('fonts/jetbrainsmono-var.woff2') format('woff2-variations'),
      url('fonts/jetbrainsmono-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============================================================
   Cyber Sec — Enterprise Cybersecurity
   Palette: "Sentinel Blue" — professional, serious, enterprise-grade
   Fonts: Chakra Petch + JetBrains Mono + IBM Plex Sans
   ============================================================ */
:root{
  --ink:#000000;          /* page background — fully black */
  --ink-2:#020508;
  --surface:rgba(2,10,24,0.72);      /* cards — translucent wireframe */
  --surface-2:rgba(5,18,40,0.82);    /* elevated */
  --line:rgba(20,90,220,0.45);
  --line-soft:rgba(20,90,220,0.13);
  --text:#c0d6f0;
  --muted:#5a84b8;        /* 5.3:1 on --ink — passes AA for body text */
  --faint:#7396c4;        /* was #3a5f8a (2.9:1) — failed AA on the small mono labels
                             it is used for: hero stats, footer meta, article bylines */
  --acc:#1e80ff;          /* sentinel blue */
  --acc-deep:#0d4bb3;
  --acc-2:#00aadd;        /* cyan, sparing */
  --acc-glow:rgba(30,128,255,0.22);
  --warn:#ff3b55;         /* warn */
  --radius:14px;
  --maxw:1180px;
  --shadow:0 24px 60px -28px rgba(0,0,0,.9);
  --font-display:'Chakra Petch',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --font-body:'IBM Plex Sans',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--font-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--acc);color:#fff}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}

/* ---- atmosphere layers ---- */
.bg-grid{
  position:fixed;inset:0;z-index:-12;pointer-events:none;
  background:
    radial-gradient(1100px 600px at 78% -8%, var(--acc-glow), transparent 60%),
    radial-gradient(900px 700px at 5% 18%, rgba(0,170,221,.05), transparent 55%),
    linear-gradient(var(--ink),var(--ink));
}
.bg-grid::before{
  content:"";position:absolute;inset:0;opacity:.35;
  background-image:
    linear-gradient(rgba(20,100,220,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,100,220,.06) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 35%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000 35%,transparent 78%);
}
.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.025;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- dynamic background canvas (wave + wireframe + grid sweep) ---- */
#bg-canvas{
  position:fixed;inset:0;z-index:-6;pointer-events:none;
  opacity:1;
}
/* main.js never draws to it on touch devices (see `lite`), so keep it out of the
   compositor entirely rather than leaving an empty full-screen layer behind. */
@media (pointer:coarse) and (max-width:1023px){
  #bg-canvas{display:none}
}

/* ---- scanline overlay ---- */
.scanlines{
  position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.07;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.18) 2px,rgba(0,0,0,.18) 4px);
}

/* ---- glitch text animation ---- */
@keyframes glitch1 {
  0%,100% { clip-path: inset(0 0 85% 0); transform: translate(0); }
  5%  { clip-path: inset(20% 0 60% 0); transform: translate(-3px, 1px); }
  10% { clip-path: inset(50% 0 30% 0); transform: translate(3px, -1px); }
  15% { clip-path: inset(80% 0 5% 0); transform: translate(-2px, 0); }
  20% { clip-path: inset(0 0 85% 0); transform: translate(0); }
}
@keyframes glitch2 {
  0%,100% { clip-path: inset(85% 0 0 0); transform: translate(0); }
  7%  { clip-path: inset(30% 0 40% 0); transform: translate(2px, -1px); }
  12% { clip-path: inset(70% 0 10% 0); transform: translate(-4px, 1px); }
  17% { clip-path: inset(10% 0 70% 0); transform: translate(1px, 0); }
  22% { clip-path: inset(85% 0 0 0); transform: translate(0); }
}
.glitch{
  position:relative;display:inline-block;
}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;
  /* data-text carries real newlines to mirror the <br> in the visible heading.
     Without pre-line those collapse to spaces and the ghost layers render as one
     long unwrapped line, offset from the text they are supposed to sit behind. */
  white-space:pre-line;
}
.glitch::before{
  color:var(--acc-2);
  animation:glitch1 3.5s infinite linear alternate-reverse;
  z-index:-1;
}
.glitch::after{
  color:var(--acc);
  animation:glitch2 3.1s infinite linear alternate-reverse;
  z-index:-2;
}

/* ---- neon card glow ---- */
.card{
  box-shadow:0 0 0 0 var(--acc-glow);
  transition:transform .25s ease,border-color .25s,background .25s,box-shadow .35s ease-out;
}
.card:hover{
  box-shadow:0 0 30px -5px var(--acc-glow), 0 0 60px -15px var(--acc-glow);
}

/* ---- cyber button upgrade ---- */
.btn-primary{
  box-shadow:0 0 0 0 var(--acc-glow);
  transition:transform .18s ease,box-shadow .35s ease,background .2s,color .2s;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 0 28px 0 var(--acc-glow), 0 0 60px -10px var(--acc-glow);
}

/* ---- neon divider ---- */
.neon-divider{
  height:1px;background:linear-gradient(90deg,transparent,var(--acc),var(--acc-2),transparent);
  margin:clamp(2rem,4vw,3rem) 0;opacity:.6;
}

/* ---- data stream tech lines ---- */
.tech-lines{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;
}
.tech-lines::before{
  content:"";position:absolute;top:0;left:10%;width:1px;height:100%;
  background:linear-gradient(180deg,transparent,var(--acc-glow),transparent);
  opacity:.4;animation:techLine1 8s infinite linear;
}
.tech-lines::after{
  content:"";position:absolute;top:0;right:15%;width:1px;height:100%;
  background:linear-gradient(180deg,transparent,var(--acc-glow),transparent);
  opacity:.3;animation:techLine1 11s infinite linear reverse;
}
@keyframes techLine1{
  0%{transform:translateY(-100%)}
  100%{transform:translateY(100%)}
}

.skip-link{position:absolute;left:-999px;top:0;background:var(--acc-deep);color:#fff;padding:.6rem 1rem;z-index:200;border-radius:0 0 8px 0;font-family:var(--font-mono)}
.skip-link:focus{left:0}

/* ---- typography ---- */
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.05;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(2.6rem,7vw,5rem);text-transform:none}
h2{font-size:clamp(1.9rem,3.7vw,3rem)}
h3{font-size:1.18rem;letter-spacing:0}
.hl{color:var(--acc);text-shadow:0 0 20px var(--acc-glow),0 0 40px var(--acc-glow),0 0 80px rgba(26,128,255,.12)}
.kicker{font-family:var(--font-mono);font-weight:500;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);text-shadow:0 0 10px var(--acc-glow);margin:0 0 .9rem}
.page-sub{color:var(--muted);font-size:clamp(1.05rem,1.6vw,1.22rem);max-width:52ch;margin:1.4rem 0 0}

/* ---- buttons ---- */
.btn{
  --b:var(--acc);
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-mono);font-weight:500;font-size:.94rem;letter-spacing:.02em;
  padding:.82rem 1.4rem;border-radius:10px;cursor:pointer;border:1px solid transparent;
  transition:transform .18s ease,box-shadow .25s ease,background .2s,color .2s,border-color .2s;
}
.btn span{transition:transform .2s ease}
.btn:hover span{transform:translateX(3px)}
.btn-primary{background:var(--acc-deep);color:#fff;box-shadow:0 0 0 0 var(--acc-glow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px var(--acc-glow)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-2px)}
.btn-block{width:100%;justify-content:center}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:100;backdrop-filter:blur(14px);
  background:rgba(0,0,0,.82);border-bottom:1px solid var(--line-soft);transition:border-color .3s,background .3s}
.site-header.scrolled{border-bottom-color:var(--line);background:rgba(0,0,0,.92);box-shadow:0 1px 20px rgba(20,100,220,.08)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:.65rem;color:var(--text)}
.brand-mark{color:var(--acc);display:grid;place-items:center;filter:drop-shadow(0 0 8px var(--acc-glow));transition:transform .4s}
.brand:hover .brand-mark{transform:none}
#globe-canvas{display:block;filter:drop-shadow(0 0 6px var(--acc-glow))}
.brand-text{font-family:var(--font-display);font-weight:700;font-size:1.02rem;letter-spacing:.02em;display:flex;flex-direction:column;line-height:1}
.brand-text i{font-family:var(--font-mono);font-style:normal;font-weight:400;font-size:.6rem;letter-spacing:.12em;color:var(--faint);margin-top:3px;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:1.7rem}
.nav a{font-family:var(--font-mono);font-size:.86rem;color:var(--muted);position:relative;transition:color .2s}
.nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--acc);transition:width .25s}
.nav a:not(.nav-cta):hover{color:var(--text)}
.nav a:not(.nav-cta):hover::after{width:100%}
.nav a[aria-current="page"]{color:var(--text)}
.nav a[aria-current="page"]::after{width:100%}
.nav-cta{color:var(--acc);border:1px solid var(--line);padding:.5rem .9rem;border-radius:8px}
.nav-cta:hover{background:var(--acc-deep);color:#fff}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:2px;background:var(--text);transition:.3s}
.mobile-nav{display:none;flex-direction:column;padding:.5rem clamp(20px,5vw,40px) 1.2rem;border-bottom:1px solid var(--line-soft);background:rgba(0,0,0,.85);backdrop-filter:blur(10px)}
.mobile-nav a{font-family:var(--font-mono);padding:.7rem 0;color:var(--muted);border-bottom:1px solid var(--line-soft)}
.mobile-nav a:last-child{color:var(--acc);border:0}
.mobile-nav a[aria-current="page"]{color:var(--text)}

/* ---- breadcrumb ---- */
.breadcrumb{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;font-family:var(--font-mono);font-size:.78rem;color:var(--faint)}
.breadcrumb a{color:var(--muted);transition:color .2s}
.breadcrumb a:hover{color:var(--acc)}
.breadcrumb li:not(:last-child)::after{content:"/";margin-left:.4rem;color:var(--faint)}
.breadcrumb li:last-child{color:var(--text)}

/* ---- sub-nav / filter tabs ---- */
.sub-nav{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 clamp(2rem,4vw,3rem)}
.sub-nav button,.sub-nav a{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;
  padding:.55rem 1rem;border-radius:8px;border:1px solid var(--line-soft);
  background:var(--surface);color:var(--muted);cursor:pointer;
  transition:border-color .2s,color .2s,background .2s
}
.sub-nav button:hover,.sub-nav a:hover{border-color:var(--acc);color:var(--text)}
.sub-nav .active,.sub-nav [aria-current="true"]{border-color:var(--acc);color:var(--acc);background:var(--acc-glow)}

/* ---- hero ---- */
.hero{padding:clamp(3rem,8vw,6.5rem) 0 clamp(2.5rem,5vw,4rem)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.eyebrow{font-family:var(--font-mono);font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:.6rem;margin:0 0 1.4rem;letter-spacing:.04em}
.blip{width:9px;height:9px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 var(--acc-glow);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--acc-glow)}70%{box-shadow:0 0 0 10px rgba(43,127,255,0)}100%{box-shadow:0 0 0 0 rgba(43,127,255,0)}}
.lede{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--muted);max-width:36ch;margin:1.4rem 0 0}
.lede strong{color:var(--text)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin:2rem 0 0}
.hero-stats{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:2.6rem 0 0;padding:1.5rem 0 0;border-top:1px solid var(--line-soft)}
.hero-stats b{font-family:var(--font-display);font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--acc);display:block}
.hero-stats span{font-family:var(--font-mono);font-size:.68rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}

/* terminal card */
.hero-term{background:rgba(0,0,0,.55);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 0 40px -10px var(--acc-glow);overflow:hidden;position:relative;backdrop-filter:blur(8px)}
.hero-term::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(20,100,220,.025) 0 1px,transparent 1px 3px);mix-blend-mode:overlay;opacity:.6}
.term-bar{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);background:rgba(0,0,0,.55)}
.term-bar span{width:11px;height:11px;border-radius:50%;background:#1a3a5c}
.term-bar span:first-child{background:#ff3b55}.term-bar span:nth-child(2){background:#ffaa00}.term-bar span:nth-child(3){background:var(--acc);box-shadow:0 0 8px var(--acc-glow)}
.term-bar i{margin-left:auto;font-family:var(--font-mono);font-style:normal;font-size:.72rem;color:var(--acc)}
.term-body{margin:0;padding:1.2rem 1.3rem 1.5rem;font-family:var(--font-mono);font-size:.84rem;line-height:1.85;color:#b0d4f8;white-space:pre-wrap;word-break:break-word}
.c-dim{color:var(--faint)}.c-acc{color:var(--acc);text-shadow:0 0 8px var(--acc-glow)}.c-ok{color:var(--acc-2);text-shadow:0 0 6px rgba(0,170,221,.3)}
.cursor{color:var(--acc);text-shadow:0 0 10px var(--acc-glow);animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---- trust bar ---- */
.trust{border-block:1px solid var(--line-soft);background:rgba(0,0,0,.6);box-shadow:0 0 40px var(--acc-glow) inset;backdrop-filter:blur(6px)}
.trust-inner{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-block:1.5rem}
.trust-label{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.trust ul{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;margin:0;padding:0}
.trust li{font-family:var(--font-mono);font-size:.88rem;color:var(--muted);position:relative;padding-left:1rem}
.trust li::before{content:"▸";position:absolute;left:0;color:var(--acc-deep)}

/* ---- sections ---- */
.section{padding:clamp(4rem,9vw,7.5rem) 0;position:relative}
.section-alt{background:linear-gradient(180deg,transparent,rgba(20,100,220,.03),transparent);border-block:1px solid var(--line-soft);padding:clamp(4rem,9vw,7.5rem) 0}
.section-head{max-width:62ch;margin:0 0 clamp(2rem,4vw,3.2rem)}
.section-sub{color:var(--muted);font-size:1.05rem;margin:1rem 0 0}
.section-sub a{color:var(--acc);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.section-sub a:hover{text-decoration-color:var(--acc)}

/* card base */
.card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);position:relative;transition:transform .25s ease,border-color .25s,background .25s,box-shadow .25s ease-out .05s;backdrop-filter:blur(4px)}
.card:hover{border-color:var(--acc);transform:translateY(-4px);box-shadow:0 4px 30px -8px var(--acc-glow)}

/* ---- services ---- */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.svc{padding:2rem 1.8rem 1.8rem}
.svc .svc-num{font-family:var(--font-mono);font-size:.78rem;color:var(--faint);letter-spacing:.1em}
.svc h3{margin:.7rem 0 .6rem;font-size:1.4rem}
.svc p{color:var(--muted);margin:0}
.svc-list{list-style:none;margin:1.2rem 0 0;padding:1rem 0 0;border-top:1px solid var(--line-soft);display:grid;gap:.45rem}
.svc-list.cols{grid-template-columns:1fr 1fr;gap:.45rem 1.5rem}
.svc-list li{font-family:var(--font-mono);font-size:.82rem;color:var(--muted);padding-left:1.3rem;position:relative}
.svc-list li::before{content:"+";position:absolute;left:0;color:var(--acc);font-weight:700}
.span-2{grid-column:1/-1}
.svc:hover{border-color:var(--line);transform:translateY(-6px);box-shadow:0 20px 50px -20px var(--acc-glow)}

/* featured / flagship service (full-width) */
.svc-feature{
  grid-column:1/-1;display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(1.6rem,4vw,3rem);align-items:center;
  padding:clamp(1.9rem,3vw,2.6rem) clamp(1.8rem,3vw,2.4rem);
  background:linear-gradient(135deg,rgba(20,100,220,.08),rgba(0,0,0,.7) 60%);
  border-color:var(--line)
}
.svc-feature .svc-num{position:absolute;top:1.4rem;right:1.5rem;font-size:.78rem}
.svc-feature h3{font-size:clamp(1.5rem,2.4vw,1.95rem);margin:.6rem 0 .8rem}
.svc-feature p{color:var(--muted);margin:0 0 1rem}
.svc-feature p:last-child{margin-bottom:0}
.svc-feature p strong{color:var(--text)}
.svc-badge{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-mono);
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);
  border:1px solid var(--line);border-radius:7px;padding:.32rem .62rem}
.svc-badge .blip{width:7px;height:7px}
.svc-feature-list{grid-template-columns:1fr;margin-top:0;padding-top:0;border-top:0;align-content:start}

.svc-feature-flagship{background:linear-gradient(135deg,rgba(20,120,240,.1),rgba(0,0,0,.7) 55%);border-color:var(--acc);box-shadow:0 0 0 1px rgba(30,128,255,.18),var(--shadow)}
.svc-feature-flagship .svc-badge{background:rgba(43,127,255,.08)}
.svc-feature+.svc-feature{margin-top:1.2rem}

@media (max-width:880px){
  .svc-feature{grid-template-columns:1fr;gap:1.4rem}
  .svc-feature-list{padding-top:1.2rem;border-top:1px solid var(--line-soft)}
}
.svc-feature-flagship:hover{box-shadow:0 0 0 2px var(--acc-glow),var(--shadow)}

/* targeting reticle corners */
.reticle{position:absolute;inset:10px;pointer-events:none;opacity:0;transition:opacity .3s}
.reticle::before,.reticle::after{content:"";position:absolute;width:14px;height:14px;border:1.5px solid var(--acc)}
.reticle::before{top:0;left:0;border-right:0;border-bottom:0}
.reticle::after{bottom:0;right:0;border-left:0;border-top:0}
.svc:hover .reticle,.repo:hover .reticle{opacity:.8}

/* ---- repos ---- */
.repo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.repo{display:flex;flex-direction:column;padding:1.4rem 1.4rem 1.3rem}
.repo-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.repo-ico{font-size:1.3rem;color:var(--acc);line-height:1}
.lang{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.04em;padding:.22rem .5rem;border-radius:5px;border:1px solid var(--line-soft);color:var(--muted)}
.lang-rust{color:#ff9f6b;border-color:rgba(255,159,107,.3)}
.lang-py{color:#7fd0ff;border-color:rgba(127,208,255,.3)}
.lang-go{color:#6fe3d2;border-color:rgba(111,227,210,.3)}
.lang-c{color:#c9b3ff;border-color:rgba(201,179,255,.3)}
.lang-blue{color:var(--acc-2);border-color:rgba(6,182,212,.28)}
.repo h3{font-family:var(--font-mono);font-size:1.02rem;font-weight:700;color:var(--text)}
.repo p{color:var(--muted);font-size:.92rem;margin:.5rem 0 1rem;flex:1}
.repo-link{font-family:var(--font-mono);font-size:.74rem;color:var(--faint);transition:color .2s}
.repo:hover .repo-link{color:var(--acc)}
.tools-foot{margin-top:2rem;text-align:center}
.repo-link{word-break:break-word}

/* ---- FAQ (mirrors the FAQPage JSON-LD on the home page — keep the two in step) ---- */
.faq-list{display:grid;gap:.8rem;max-width:80ch}
.faq{padding:0}
.faq summary{
  list-style:none;cursor:pointer;padding:1.15rem 3rem 1.15rem 1.4rem;position:relative;
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--text);
  transition:color .2s
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:1.4rem;top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:1.2rem;color:var(--acc);transition:transform .25s
}
.faq[open] summary::after{content:"−"}
.faq summary:hover{color:var(--acc)}
.faq summary:focus-visible{outline:2px solid var(--acc);outline-offset:-2px;border-radius:var(--radius)}
.faq p{color:var(--muted);margin:0;padding:0 1.4rem 1.3rem;font-size:.98rem;line-height:1.7}
.faq p a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.faq:hover{transform:none}

/* ---- steps ---- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin:0;padding:0;counter-reset:s}
.steps li{position:relative;padding:1.6rem 1.4rem;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--surface)}
.step-n{font-family:var(--font-mono);font-size:.8rem;color:var(--acc);letter-spacing:.1em}
.steps h3{margin:.6rem 0 .4rem;font-size:1.12rem}
.steps p{color:var(--muted);font-size:.92rem;margin:0}

/* ---- credentials ---- */
.cred-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.cred{padding:1.4rem 1.3rem}
.cred-tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--acc-deep)}
.cred h3{margin:.5rem 0 .35rem;font-size:1.18rem}
.cred h3 small{font-family:var(--font-mono);font-size:.6em;color:var(--faint)}
.cred p{color:var(--muted);font-size:.86rem;margin:0}

/* ---- about ---- */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.about-photo{position:relative;border-radius:var(--radius);overflow:hidden;isolation:isolate}
.about-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25) contrast(1.04) brightness(.95);transition:filter .5s}
.about-photo:hover img{filter:grayscale(0) contrast(1.05)}
.about-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,12,14,.55));pointer-events:none}
.photo-frame{position:absolute;inset:12px;border:1px solid var(--line);border-radius:8px;pointer-events:none;z-index:2}
.photo-tag{position:absolute;left:18px;bottom:16px;z-index:3;font-family:var(--font-mono);font-size:.72rem;color:var(--acc);background:rgba(8,12,14,.6);padding:.25rem .55rem;border:1px solid var(--line);border-radius:5px}
.about-copy p{color:var(--muted)}
.about-copy strong{color:var(--text)}
.about-ethos{border-left:2px solid var(--acc);padding-left:1rem;color:var(--text)!important;font-family:var(--font-mono);font-size:.95rem;margin-top:1.5rem}
.about-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.8rem;padding-top:1.5rem;border-top:1px solid var(--line-soft)}
.about-meta b{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:.3rem}
.about-meta span{font-size:.9rem;color:var(--text)}

/* ---- contact ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,3.5rem);align-items:start}
.contact-mail{display:flex;align-items:center;gap:1rem;margin:1.8rem 0;padding:1.1rem 1.3rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);transition:border-color .25s,transform .25s}
.contact-mail:hover{border-color:var(--acc);transform:translateY(-2px)}
.contact-mail-ico{font-size:1.4rem;color:var(--acc);transition:transform .25s ease}
.contact-mail:hover .contact-mail-ico{transform:scale(1.15)}
.contact-mail b{display:block;font-family:var(--font-mono);font-size:1rem;color:var(--text)}
.contact-mail small{color:var(--faint);font-size:.78rem}
.contact-links{list-style:none;display:grid;gap:.55rem;margin:0 0 1.4rem;padding:0}
.contact-links a{font-family:var(--font-mono);font-size:.9rem;color:var(--muted);transition:color .2s}
.contact-links a b{color:var(--acc);margin-right:.4rem}
.contact-links a:hover{color:var(--text)}
.contact-note{font-family:var(--font-mono);font-size:.76rem;color:var(--faint);border-top:1px solid var(--line-soft);padding-top:1rem}

.contact-form{padding:1.6rem}
.field{margin-bottom:1.1rem}
.field label{display:block;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem}
.field input,.field select,.field textarea{
  width:100%;background:rgba(0,0,0,.5);border:1px solid var(--line-soft);border-radius:9px;
  color:var(--text);font-family:var(--font-body);font-size:.96rem;padding:.7rem .85rem;transition:border-color .2s,box-shadow .2s}
.field textarea{resize:vertical;font-family:var(--font-mono);font-size:.88rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-glow)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232b7fff' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.form-status{font-family:var(--font-mono);font-size:.82rem;margin:.9rem 0 0;min-height:1.2em;color:var(--acc)}

/* ---- footer ---- */
.site-footer{border-top:1px solid var(--line-soft);background:rgba(0,0,0,.7);backdrop-filter:blur(8px);padding:clamp(2.4rem,5vw,3.4rem) 0}
.footer-inner{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem;align-items:start}
.footer-brand p{color:var(--faint);font-size:.88rem;margin:.7rem 0 0;max-width:34ch}
.footer-nav{display:flex;flex-direction:column;gap:.55rem}
.footer-nav a{font-family:var(--font-mono);font-size:.86rem;color:var(--muted);transition:color .2s}
.footer-nav a:hover{color:var(--acc)}
.footer-meta{display:flex;flex-direction:column;gap:.55rem;font-family:var(--font-mono);font-size:.82rem}
.footer-meta a{color:var(--acc)}
.footer-meta span{color:var(--faint)}

/* ---- to-top ---- */
.to-top{position:fixed;right:22px;bottom:22px;z-index:90;width:46px;height:46px;display:grid;place-items:center;border-radius:10px;background:rgba(0,0,0,.7);border:1px solid var(--line);color:var(--acc);font-size:1.1rem;opacity:0;transform:translateY(12px);pointer-events:none;transition:.3s;backdrop-filter:blur(6px)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--acc-deep);color:#fff}

/* ---- reveal animation ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  /* .glitch was left running: two infinite clip-path animations on the h1, which is
     exactly the kind of flashing/jittering motion the preference asks us to stop
     (WCAG 2.2.2). Hide the ghost layers outright rather than freezing them mid-clip. */
  .glitch::before,.glitch::after{display:none}
  .blip,.cursor,.hero-term::after{animation:none}
  /* Static overlays that read as visual noise for motion-sensitive visitors. */
  .grain,.scanlines{display:none}
  /* Hover lifts and slides are motion too. */
  .card,.card:hover,.svc:hover,.btn,.btn:hover,.btn-primary:hover,.btn-ghost:hover,.to-top{
    transition:none;transform:none
  }
  .btn:hover span{transform:none}
}

/* ============================================================
   Facts page — "Current Cyber Struggle"
   ============================================================ */
.facts-hero{padding-top:clamp(2.6rem,6vw,4.5rem);padding-bottom:clamp(1rem,3vw,2rem)}
.facts-hero h1{margin-top:.6rem}
.facts-lede{max-width:64ch;font-size:clamp(1.05rem,1.5vw,1.2rem)}
.facts-lede em{color:var(--acc);font-style:normal}

.struggle-head{font-family:var(--font-mono);font-weight:700;font-size:.92rem;letter-spacing:.22em;text-transform:uppercase;color:var(--acc);
  display:flex;align-items:center;gap:1rem;margin:0 0 2rem}
.struggle-head::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

.struggle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.struggle{padding:1.8rem 1.7rem}
.struggle-tag{display:inline-block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--warn);border:1px solid rgba(255,59,85,.3);border-radius:6px;padding:.25rem .55rem;margin-bottom:1rem}
.struggle h3{font-size:1.32rem;margin:0 0 .7rem;line-height:1.15}
.struggle p{color:var(--muted);margin:0;font-size:.96rem}
.struggle p strong{color:var(--text)}
.struggle:hover{border-color:rgba(255,59,85,.35)}
.struggle .reticle::before,.struggle .reticle::after{border-color:var(--warn)}

/* share / submit */
.share-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,3.5rem);align-items:start}
.share-help{margin-top:1.8rem;padding:1.5rem 1.5rem 1.7rem;border-color:var(--line)}
.share-help h3{font-size:1.14rem;margin:0 0 .5rem}
.share-help p{color:var(--muted);margin:0 0 1.2rem}
.share-help strong{color:var(--acc)}
.opt{font-family:var(--font-body);text-transform:none;letter-spacing:0;color:var(--faint);font-size:.8em}

/* ============================================================
   Page Hero — universal inner-page header
   ============================================================ */
.page-hero{padding:clamp(2.6rem,7vw,5rem) 0 clamp(1.5rem,4vw,2.5rem)}
.page-hero h1{font-size:clamp(2.4rem,6vw,4.5rem);margin-top:.4rem}
.page-hero .page-sub{font-family:var(--font-mono);font-size:clamp(.95rem,1.3vw,1.08rem);color:var(--muted);max-width:58ch;margin:1rem 0 0;line-height:1.6}
.page-hero .page-sub strong{color:var(--text)}
.page-hero .kicker{margin-bottom:.6rem}

/* ---- stat bar (hero-stats variant for page headers) ---- */
.stat-bar{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.4rem;margin:2rem 0 0;padding:1.5rem 0 0;border-top:1px solid var(--line-soft)}
.stat-bar b{font-family:var(--font-display);font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--acc);display:block}
.stat-bar span{font-family:var(--font-mono);font-size:.68rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin-top:.15rem;display:block}

/* ============================================================
   Content Section — standard prose block for inner pages
   ============================================================ */
.content-section{padding:clamp(3.6rem,8vw,7rem) 0}
.content-section h2{font-size:clamp(1.7rem,3vw,2.4rem);margin:0 0 1.2rem}
.content-section h3{font-size:1.22rem;margin:1.8rem 0 .6rem;font-family:var(--font-display);font-weight:600;color:var(--text)}
.content-section p{color:var(--muted);font-size:1.04rem;line-height:1.75;margin:0 0 1rem;max-width:62ch}
.content-section ul{color:var(--muted);padding-left:1.5rem;margin:0 0 1.4rem;max-width:62ch;font-size:1.04rem;line-height:1.75}
.content-section ul li{margin-bottom:.4rem}
.content-section ul li::marker{color:var(--acc)}
.content-section strong{color:var(--text)}
.content-section a{color:var(--acc);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.content-section a:hover{text-decoration-color:var(--acc)}
.content-section img{border-radius:var(--radius);border:1px solid var(--line-soft)}
.content-section blockquote{border-left:2px solid var(--acc);padding-left:1.2rem;color:var(--text);font-family:var(--font-mono);font-size:.95rem;margin:1.5rem 0}

/* ============================================================
   Industry Grid — sectors served (3-col)
   ============================================================ */
.industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.industry-card{transition:transform .25s ease,border-color .25s,background .25s,box-shadow .25s ease-out .05s;padding:1.8rem 1.7rem;border-color:var(--line)}
.industry-card .ind-icon{font-size:2rem;color:var(--acc);margin-bottom:.8rem;display:block;line-height:1}
.industry-card h3{font-size:1.22rem;margin:0 0 .55rem;color:var(--text)}
.industry-card p{color:var(--muted);margin:0;font-size:.94rem;line-height:1.6}
.industry-card:hover{border-top-color:var(--acc);transform:translateY(-4px);box-shadow:0 16px 40px -16px rgba(0,0,0,.3)}

/* ============================================================
   Solution Grid — capabilities / solution cards (2-col)
   ============================================================ */
.solution-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.solution-grid .featured{grid-column:1/-1}
.solution-card{padding:clamp(1.6rem,3vw,2.2rem) clamp(1.5rem,3vw,2rem);position:relative}
.solution-card h3{font-size:1.32rem;margin:.5rem 0 .7rem;color:var(--text)}
.solution-card p{color:var(--muted);margin:0;font-size:.96rem;line-height:1.65}
.solution-card .sol-icon{font-size:1.5rem;color:var(--acc);display:block;line-height:1}
.solution-card.featured{
  background:linear-gradient(135deg,rgba(20,100,220,.08),rgba(0,0,0,.6) 55%);
  border-color:var(--line)
}
.solution-card.featured h3{font-size:clamp(1.4rem,2.2vw,1.8rem)}
.solution-card .reticle::before,.solution-card .reticle::after{border-color:var(--acc)}
.solution-card:hover .reticle{opacity:.7}

/* ============================================================
   Team Grid — leadership / bios (like cred-grid but for people)
   ============================================================ */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.1rem}
.team-card{padding:1.6rem 1.4rem;text-align:center}
.team-card .team-avatar{width:72px;height:72px;border-radius:50%;background:var(--surface-2);border:2px solid var(--line);margin:0 auto 1rem;display:grid;place-items:center;overflow:hidden;transition:transform .3s ease}
.team-card .team-avatar img{width:100%;height:100%;object-fit:cover}
.team-card .team-initials{background:rgba(43,127,255,.12);color:var(--acc);font-family:var(--font-display);font-size:1.4rem;font-weight:700;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 1rem}
.team-card h3{font-size:1.1rem;margin:0 0 .2rem;color:var(--text)}
.team-card .team-role{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin-bottom:.7rem;display:block}
.team-card p{color:var(--muted);font-size:.88rem;margin:0 0 .6rem;line-height:1.55}
.team-card p:last-child{margin-bottom:0}
.team-card:hover{border-color:var(--acc-glow)}
.team-card:hover .team-avatar{transform:scale(1.05)}
.team-card:hover h3{color:var(--acc)}

/* ============================================================
   Values Grid — company values (3-col)
   ============================================================ */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.value-card{padding:1.8rem 1.6rem}
.value-card .val-icon{font-size:1.8rem;color:var(--acc);margin-bottom:.7rem;display:block;line-height:1}
.value-card h3{font-size:1.15rem;margin:0 0 .5rem;color:var(--text)}
.value-card p{color:var(--muted);margin:0;font-size:.93rem;line-height:1.6}
.value-card:hover{border-left-color:var(--acc)}

/* ============================================================
   Resource Grid — blog / resources (3-col card layout)
   ============================================================ */
.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.resource-card{display:flex;flex-direction:column;padding:1.5rem 1.5rem 1.4rem}
.resource-card .res-meta{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem;flex-wrap:wrap}
.resource-card .res-date{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.resource-card .res-cat{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--acc);border:1px solid var(--line);border-radius:5px;padding:.2rem .5rem}
.resource-card h3{font-size:1.12rem;margin:0 0 .5rem;color:var(--text);flex:0}
.resource-card p{color:var(--muted);font-size:.9rem;margin:0 0 1rem;flex:1;line-height:1.6}
.resource-card .res-link{font-family:var(--font-mono);font-size:.76rem;color:var(--faint);transition:color .2s;margin-top:auto}
.resource-card:hover{background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(20,100,220,.05))}
.resource-card:hover .res-link{color:var(--acc)}

.res-featured{padding:clamp(1.9rem,3vw,2.4rem) clamp(1.6rem,3vw,2rem);background:linear-gradient(135deg,rgba(20,100,220,.06),rgba(0,0,0,.6) 60%);border-color:var(--line)}
.res-featured h3{font-size:1.25rem}
.res-featured:hover{border-color:rgba(43,127,255,.38)}
.res-featured .res-link{font-weight:500;font-size:.8rem}

.newsletter-wrap{max-width:600px;margin-inline:auto;text-align:center}
.newsletter-form{display:flex;gap:.7rem;max-width:480px;margin:1.6rem auto 0}
.newsletter-form input{flex:1;background:rgba(0,0,0,.5);border:1px solid var(--line-soft);border-radius:9px;color:var(--text);font-family:var(--font-body);font-size:.96rem;padding:.75rem .9rem;transition:border-color .2s,box-shadow .2s}
.newsletter-form input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(43,127,255,.15)}
.newsletter-form .btn{white-space:nowrap}

/* ============================================================
   Page CTA — bottom-of-page call to action
   ============================================================ */
.page-cta{padding:clamp(3rem,7vw,5rem) 0 clamp(3.6rem,8vw,6rem);text-align:center}
.page-cta h2{font-size:clamp(1.9rem,3.5vw,2.8rem);margin:0 0 1rem}
.page-cta p{color:var(--muted);max-width:52ch;margin:0 auto 1.8rem;font-size:1.04rem}
.page-cta .btn{margin:.3rem}

/* ---- responsive ---- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .about-grid,.contact-grid,.share-grid{grid-template-columns:1fr}
  .repo-grid,.cred-grid,.steps,.struggle-grid{grid-template-columns:repeat(2,1fr)}
  .hero-term{order:2}
  .industry-grid,.values-grid{grid-template-columns:repeat(2,1fr)}
  .resource-grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .solution-grid{grid-template-columns:1fr}
}
/* Nav swaps to the hamburger at 900px, not 680px. Seven primary links plus the brand
   need ~730px; between 681 and 880px the desktop nav overflowed the header and was
   clipped by `overflow-x:hidden` on <body>, silently hiding the last link or two.
   Keep this breakpoint in step with the matchMedia query in assets/main.js. */
@media (max-width:900px){
  .nav{display:none}
  .nav-toggle{display:flex}
  .site-header.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-header.open .nav-toggle span:nth-child(2){opacity:0}
  .site-header.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mobile-nav[data-open="true"]{display:flex}
}
@media (max-width:680px){
  body{font-size:16px}
  .svc-grid,.struggle-grid{grid-template-columns:1fr}
  .repo-grid,.cred-grid,.steps,.hero-stats,.svc-list.cols,.about-meta{grid-template-columns:1fr 1fr}
  .footer-inner{grid-template-columns:1fr;gap:1.6rem}
  .hero-stats{gap:.6rem 1rem}
  .industry-grid,.values-grid,.resource-grid,.team-grid{grid-template-columns:1fr}
  .stat-bar{grid-template-columns:1fr 1fr;gap:1rem}
  .sub-nav{gap:.45rem}
  .sub-nav button,.sub-nav a{font-size:.74rem;padding:.5rem .8rem}
}
@media (max-width:680px) {
  .hero-term { max-height: 260px; overflow-y: auto; }
  .term-body { font-size: .72rem; padding: .9rem 1rem 1.1rem; }
}
@media (max-width:420px){
  .hero-stats,.about-meta{grid-template-columns:1fr}
  .industry-grid,.values-grid,.resource-grid,.team-grid{grid-template-columns:1fr}
  .stat-bar{grid-template-columns:1fr}
  .solution-grid{grid-template-columns:1fr}
}

/* ============================================================
   Contact page — office cards
   ============================================================ */
.office-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin:1.5rem 0}
.office-card{padding:1.2rem 1.2rem 1rem}
.office-card h3{font-size:1rem;margin:0 0 .35rem;color:var(--text)}
.office-card p{font-family:var(--font-mono);font-size:.82rem;color:var(--muted);margin:0;line-height:1.55}

/* ============================================================
   Contact form — checkbox
   ============================================================ */
.field-check{margin-top:1.2rem}
.check-label{display:flex;align-items:flex-start;gap:.7rem;font-family:var(--font-mono);font-size:.76rem;color:var(--muted);letter-spacing:0;text-transform:none;cursor:pointer}
.check-label input[type="checkbox"]{
  width:auto;margin-top:.15rem;accent-color:var(--acc);cursor:pointer;
  flex-shrink:0
}
.check-label span{line-height:1.55}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
fieldset{border:1px solid var(--line-soft);border-radius:var(--radius);padding:1.2rem 1.4rem 1.4rem;margin:0 0 .2rem}
legend{font-family:var(--font-display);font-size:.88rem;font-weight:600;color:var(--text);padding:0 .5rem;text-transform:uppercase;letter-spacing:.06em}
@media (max-width:600px){.field-row{grid-template-columns:1fr}}

/* ============================================================
   Emergency CTA — incident response
   ============================================================ */
.emergency-cta{
  text-align:center;padding:clamp(2rem,4vw,3.2rem) clamp(1.4rem,4vw,2.5rem);
  border:1px solid rgba(255,59,85,.28);border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(255,59,85,.05),rgba(0,0,0,.7) 55%);
  max-width:720px;margin:0 auto
}
.emergency-badge{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--warn);border:1px solid rgba(255,59,85,.32);border-radius:6px;
  padding:.32rem .62rem;margin-bottom:1.2rem
}
.emergency-cta h2{font-size:clamp(1.5rem,2.8vw,2.2rem);margin:0 0 .8rem;color:var(--text)}
.emergency-cta p{color:var(--muted);font-size:1rem;max-width:52ch;margin:0 auto 1.3rem}
.emergency-phone{
  display:inline-block;font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.4rem);
  font-weight:700;color:var(--warn);letter-spacing:.02em;
  transition:color .2s,text-shadow .2s
}
.emergency-phone:hover{color:#fbbf24;text-shadow:0 0 28px rgba(255,59,85,.35)}
.emergency-sub{font-family:var(--font-mono);font-size:.78rem;color:var(--faint);margin:.5rem 0 0}

@media (max-width:680px){
  .office-grid{grid-template-columns:1fr}
}

@media (max-width:480px){.newsletter-form{flex-direction:column}.newsletter-form .btn{justify-content:center}}

a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 4px;
}


/* ============================================================
   Legal pages — privacy, terms, disclosure, PAIA
   ============================================================ */
.legal{padding-top:clamp(1.5rem,4vw,2.5rem)}
.legal h2{font-size:clamp(1.35rem,2.2vw,1.75rem);margin:2.6rem 0 .9rem;padding-top:1.4rem;border-top:1px solid var(--line-soft)}
.legal h2:first-of-type{border-top:0;padding-top:0}
.legal h3{font-size:1.06rem;margin:1.6rem 0 .5rem}
.legal p,.legal li{max-width:74ch}
.legal ol{color:var(--muted);padding-left:1.5rem;margin:0 0 1.4rem;max-width:74ch;font-size:1.04rem;line-height:1.75}
.legal ol li{margin-bottom:.5rem}
.legal ol li::marker{color:var(--acc);font-family:var(--font-mono);font-size:.9em}
.legal em{color:var(--text);font-style:italic}
.legal code{font-family:var(--font-mono);font-size:.88em;color:var(--acc-2);
  background:var(--ink-2);border:1px solid var(--line-soft);border-radius:4px;padding:.1em .38em}
.legal-updated{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin:1.2rem 0 0}

/* placeholder that must be completed before these pages are linked publicly */
.legal-todo{display:inline-block;font-family:var(--font-mono);font-size:.74rem;font-weight:700;
  letter-spacing:.06em;color:#ffcf4a;background:rgba(255,207,74,.09);
  border:1px dashed rgba(255,207,74,.55);border-radius:5px;padding:.16em .5em}

.legal-entity,.legal-callout{border:1px solid var(--line);border-left-width:3px;border-radius:12px;
  padding:1.3rem 1.5rem;margin:1.8rem 0;background:linear-gradient(135deg,rgba(43,127,255,.07),rgba(0,0,0,.4))}
.legal-callout-warn{border-color:rgba(255,59,85,.4);
  background:linear-gradient(135deg,rgba(255,59,85,.06),rgba(0,0,0,.4))}
.legal-entity h3,.legal-callout h3{font-size:1rem;margin:0 0 .8rem;color:var(--acc)}
.legal-callout-warn h3{color:var(--warn)}
.legal-entity dl,.legal-callout dl{display:grid;grid-template-columns:minmax(140px,auto) 1fr;
  gap:.45rem 1.2rem;margin:0;font-size:.93rem}
.legal-entity dt,.legal-callout dt{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);padding-top:.15rem}
.legal-entity dd,.legal-callout dd{margin:0;color:var(--text)}
.legal-entity a,.legal-callout a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.legal-callout p{color:var(--muted);margin:0 0 .6rem}
.legal-callout p:last-child{margin-bottom:0}
.legal-sub{display:block;font-size:.79rem;color:var(--muted);line-height:1.5;margin-top:.25rem}
.legal-note{font-size:.87rem;color:var(--muted);margin:1rem 0 0;line-height:1.6}

.legal-table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.92rem;display:block;overflow-x:auto}
.legal-table th,.legal-table td{text-align:left;vertical-align:top;padding:.7rem .9rem;
  border-bottom:1px solid var(--line-soft)}
.legal-table th{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--acc);white-space:nowrap}
.legal-table td{color:var(--muted)}
.legal-table td:first-child{color:var(--text)}
.legal-table a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){
  .legal-entity dl,.legal-callout dl{grid-template-columns:1fr;gap:.15rem}
  .legal-entity dt,.legal-callout dt{padding-top:.6rem}
}

/* article footer nav — the back link previously had no rule and inherited nothing legible */
.article-foot{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;margin-top:2rem}
.article-back{font-family:var(--font-mono);font-size:.9rem;color:var(--acc);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.article-back:hover{color:var(--text)}