@charset "UTF-8";
/* ==========================================================================
   Swif7Edge design system
   Direction: "Attack Path" — every major visual on the site is a real,
   labeled node-and-edge graph of the thing being sold. Derived from the
   circuit traces in the Swif7Edge shield logo.

   Palette is sampled directly from the official logo PNG:
     #151616 shield ground · #483366 banner violet · #979D9D chrome
     #9E3C3B banner outline red · #06406E circuit-trace blue · #465053 gunmetal
   ========================================================================== */

:root{
  /* --- ground & plate --- */
  --void:#0a1420;           /* blue-black ground: reads as blue, not black */
  --plate:#131f2c;          /* logo shield interior, shifted cool to match */
  --plate-2:#1b2937;
  --plate-3:#263646;

  /* --- structure --- */
  --trace:#31414f;          /* hairlines, from logo gunmetal darkened */
  --trace-soft:#20303d;
  --trace-lit:#4a5e71;

  /* --- type --- */
  --white:#f3f5f5;
  --chrome:#c3cacb;         /* lifted from logo #979D9D for AA on dark */
  --chrome-dim:#c6cccc;     /* holds AA against the brightest measured ground (5.0:1) */

  /* --- brand chroma --- */
  --violet:#523a76;         /* logo banner #483366, lifted — FIELD ONLY */
  --violet-mid:#6b4f9c;
  --violet-lift:#b49cea;    /* interactive violet, AA on --void */
  --blue:#0e5b9b;           /* logo trace #06406E, lifted — FIELD ONLY */
  --blue-lift:#8ecbf8;      /* links, AA on --void */
  --red:#9E3C3B;            /* exact logo outline — FIELD ONLY */
  --red-lift:#ef8178;       /* threat + incident semantics ONLY */
  --ok:#5ccb96;
  --brass:#c9ad66;
  --brass-lift:#e6d196;   /* brass as text: clears 4.5:1 on the hero wash */

  --on-violet:#0b0710;

  /* --- metrics --- */
  --measure:66ch;
  --gutter:clamp(20px,4.6vw,56px);
  --col:1280px;
  --rail:72px;

  --r:3px;
  --r-lg:5px;

  --t-fast:150ms;
  --t:280ms;
  --t-slow:620ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

/* ==========================================================================
   Animated circuit field
   Orthogonal PCB-style traces with signal pulses travelling along them,
   taken from the blue circuit traces on the Swif7Edge shield. Sits behind
   all content, never above it, and is fully disabled under reduced motion.
   ========================================================================== */
/* The trace field is a static image: painted once, then handed to the
   compositor as a background. The pulse canvas carries no CSS mask, because
   masking a full-viewport animated layer costs a software mask every frame.
   Attenuation is baked into the drawing instead. */
#cyberfield{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:-1;pointer-events:none;
  background-repeat:no-repeat;background-size:100% 100%;
}
#cyberpulse{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:-1;pointer-events:none;
}
/* a fixed scrim so long-form copy never sits on the brightest part of the field */
#cyberscrim{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 76% 60% at 50% 45%, color-mix(in srgb,var(--void) 82%,transparent), transparent 78%);
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* The page ground is a layered field on <html>; <body> is transparent so the
   animated circuit canvas (z-index:-1) paints between them. */
html{
  background-color:var(--void);
  background-image:
    radial-gradient(ellipse 120% 80% at 18% -10%, color-mix(in srgb,var(--violet) 28%,transparent), transparent 62%),
    radial-gradient(ellipse 90% 70% at 92% 8%, color-mix(in srgb,var(--blue) 31%,transparent), transparent 60%),
    radial-gradient(ellipse 110% 60% at 50% 108%, color-mix(in srgb,var(--blue) 21%,transparent), transparent 64%);
  background-attachment:fixed;
}
body{
  margin:0;background:transparent;color:var(--white);
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.62;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-synthesis-weight:none;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--violet-mid);color:var(--white)}

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--violet-lift);outline-offset:3px;border-radius:2px;
}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{
  position:absolute;left:14px;top:-64px;z-index:400;
  background:var(--violet-lift);color:var(--on-violet);
  padding:11px 18px;font-weight:700;text-decoration:none;border-radius:var(--r);
  transition:top var(--t-fast) var(--ease);
}
.skip:focus{top:14px}

/* ==========================================================================
   Type scale
   Saira (display, variable width+weight) · Public Sans (body, the USWDS
   face — deliberate: this firm sells to federal buyers) · JetBrains Mono
   (real data only: codes, counts, node labels, timings)
   ========================================================================== */
.display,h1,h2,h3,h4{
  font-family:Saira,"Arial Narrow",sans-serif;
  font-weight:650;letter-spacing:-.02em;line-height:1.04;margin:0;
}
h1{font-size:clamp(2.3rem,5.4vw,4rem)}
h2{font-size:clamp(1.8rem,3.9vw,2.9rem);margin-bottom:.5rem}
h3{font-size:clamp(1.18rem,2.1vw,1.5rem);line-height:1.14;margin-bottom:.4rem}
h4{font-size:1.02rem;line-height:1.22;margin-bottom:.35rem}
/* a heading immediately followed by body copy needs air */
:where(h1,h2,h3,h4) + :where(p,ul,ol,.table-scroll,.note){margin-top:.2rem}
p{margin:0 0 1.1em;max-width:var(--measure)}
.lede{font-size:clamp(1.03rem,1.45vw,1.19rem);color:var(--chrome);line-height:1.58;max-width:58ch}
.data,.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
small,.small{font-size:.86rem}

.hed-fit{display:block;width:fit-content;white-space:nowrap;font-stretch:100%}
.hed-block{max-width:100%;overflow:hidden}

/* ==========================================================================
   Layout frame
   ========================================================================== */
.wrap{max-width:var(--col);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:880px;margin-inline:auto;padding-inline:var(--gutter)}

.railed{position:relative}
@media (min-width:1100px){
  .railed{padding-left:var(--rail)}
  .railed::before{content:"";position:absolute;left:24px;top:0;bottom:0;width:1px;background:var(--trace-soft)}
}

#progress{
  position:fixed;left:0;top:0;height:2px;width:100%;z-index:300;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--violet-mid),var(--violet-lift));
}

section{position:relative}
section[id]{scroll-margin-top:96px}
.sec{padding-block:clamp(60px,7.5vw,112px)}
.sec + .sec{border-top:1px solid var(--trace-soft)}
.sec-plate{background:color-mix(in srgb,var(--plate) 88%,transparent)}
.sec-head{margin-bottom:clamp(30px,3.8vw,52px);max-width:62ch}
.sec-head p{color:var(--chrome)}
.sec-head h2{margin-bottom:.55rem}

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.topbar{
  background:var(--plate);border-bottom:1px solid var(--trace-soft);
  font-size:.8rem;color:var(--chrome-dim);
}
.topbar-in{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;padding-block:7px}
.topbar a{text-decoration:none;color:var(--chrome)}
.topbar a:hover{color:var(--white)}
.topbar .breach{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  color:var(--red-lift);font-weight:600;
}
.topbar .breach::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--red-lift);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--red-lift) 60%,transparent);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--red-lift) 55%,transparent)}
  70%{box-shadow:0 0 0 9px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

.nav{
  position:sticky;top:0;z-index:200;
  background:color-mix(in srgb,var(--void) 88%,transparent);
  backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid transparent;
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease);
}
.nav[data-stuck="true"]{border-bottom-color:var(--trace);background:color-mix(in srgb,var(--void) 96%,transparent)}
.nav-in{
  max-width:var(--col);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;gap:20px;height:86px;
  transition:height var(--t) var(--ease);
}
.nav[data-stuck="true"] .nav-in{height:68px}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand img{height:58px;width:auto;transition:height var(--t) var(--ease)}
.nav[data-stuck="true"] .brand img{height:46px}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-txt b{font-family:Saira,sans-serif;font-weight:700;font-size:1.2rem;letter-spacing:-.015em}
.brand-txt span{font-size:.64rem;color:var(--chrome-dim);letter-spacing:.07em;margin-top:3px;white-space:nowrap}
/* 'PROACTIVE CYBERSECURITY · STRATEGY · AI' is wider than the 390px header
   allows, so the lockup subtitle tightens below 460px. */
@media (max-width:460px){
  .brand-txt span{font-size:.55rem;letter-spacing:.03em}
}
@media (max-width:360px){
  .brand-txt span{display:none}
}

.nav-links{display:flex;align-items:center;gap:1px;margin-left:auto;list-style:none;padding:0;margin-block:0}
.nav-links > li > a,.nav-top{
  display:flex;align-items:center;gap:6px;padding:9px 12px;
  text-decoration:none;font-size:.9rem;font-weight:500;color:var(--chrome);
  border-radius:var(--r);position:relative;background:none;border:0;
  font-family:inherit;cursor:pointer;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.nav-links > li > a:hover,.nav-top:hover{color:var(--white);background:var(--plate-2)}
.nav-links a[aria-current="page"]{color:var(--white)}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;background:var(--violet-lift)}
.nav-top .caret{width:9px;height:9px;transition:transform var(--t) var(--ease)}
.has-mega:hover .caret,.has-mega:focus-within .caret{transform:rotate(180deg)}

.mega{
  position:absolute;top:100%;left:0;right:0;
  background:var(--plate);border-block:1px solid var(--trace);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t);
  box-shadow:0 30px 60px -30px #000;
}
.has-mega:hover > .mega,.has-mega:focus-within > .mega{opacity:1;visibility:visible;transform:none}
.mega-in{
  max-width:var(--col);margin-inline:auto;padding:30px var(--gutter) 34px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 34px;
}
.mega h3{
  font-family:"Public Sans",sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:.1em;color:var(--chrome-dim);margin:0 0 12px;
  padding-bottom:9px;border-bottom:1px solid var(--trace);
}
.mega ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.mega ul a{
  display:block;padding:7px 9px;margin-left:-9px;border-radius:var(--r);
  text-decoration:none;font-size:.88rem;color:var(--chrome);
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.mega ul a:hover{color:var(--white);background:var(--plate-2)}
.mega ul a em{display:block;font-style:normal;font-size:.76rem;color:var(--chrome-dim);margin-top:2px}

.nav-links a.nav-cta{
  margin-left:8px;white-space:nowrap;background:var(--violet-lift);
  color:var(--on-violet)!important;padding:10px 17px;border-radius:var(--r);
  text-decoration:none;font-weight:700;font-size:.88rem;
  transition:filter var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.nav-links a.nav-cta:hover{filter:brightness(1.1);transform:translateY(-1px);background:var(--violet-lift)}

.burger{
  display:none;margin-left:auto;background:none;border:1px solid var(--trace);
  color:var(--white);width:46px;height:40px;border-radius:var(--r);cursor:pointer;
  align-items:center;justify-content:center;
}
.burger span,.burger span::before,.burger span::after{
  content:"";display:block;width:19px;height:1.5px;background:currentColor;
  transition:transform var(--t) var(--ease),opacity var(--t) var(--ease);
}
.burger span::before{transform:translateY(-6px)}
.burger span::after{transform:translateY(4.5px)}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-1.5px) rotate(-45deg)}

@media (max-width:760px){
  .topbar-ids{display:none}
}

@media (max-width:1140px){
  .burger{display:flex}
  /* Anchored to the nav itself, not to the viewport: a top bar sits above it.
     Padding is zeroed when closed because max-height does not constrain it. */
  .nav-links{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--void);border-bottom:1px solid transparent;
    padding:0 var(--gutter);margin:0;
    max-height:0;overflow:hidden;
    transition:max-height var(--t-slow) var(--ease),padding var(--t-slow) var(--ease);
  }
  .nav-links[data-open="true"]{
    max-height:calc(100vh - 100%);overflow-y:auto;
    padding:10px var(--gutter) 28px;border-bottom-color:var(--trace);
  }
  .nav-links > li > a,.nav-top{padding:13px 0;font-size:1rem;width:100%;border-bottom:1px solid var(--trace-soft);border-radius:0}
  .nav-links a[aria-current="page"]::after{left:0;right:auto;width:20px;bottom:7px}
  .mega{position:static;opacity:1;visibility:visible;transform:none;border:0;background:none;box-shadow:none}
  .mega-in{grid-template-columns:minmax(0,1fr);padding:4px 0 10px;gap:18px}
  .mega h3{margin-top:8px}
  .nav-cta{display:block;margin:18px 0 0;text-align:center}
  .topbar-in{font-size:.74rem}
  .topbar .breach{margin-left:0}
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:var(--r);text-decoration:none;
  font-weight:700;font-size:.97rem;border:1px solid transparent;cursor:pointer;
  font-family:inherit;line-height:1.2;text-align:center;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),filter var(--t-fast) var(--ease);
}
.btn-primary{background:var(--violet-lift);color:var(--on-violet)}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-2px)}
.btn-ghost{border-color:var(--trace-lit);color:var(--white)}
.btn-ghost:hover{border-color:var(--chrome-dim);background:var(--plate-2);transform:translateY(-2px)}
.btn-alert{background:var(--red-lift);color:#1a0603}
.btn-alert:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn-sm{padding:10px 18px;font-size:.88rem}
.btn-link{
  background:none;border:0;padding:0;color:var(--blue-lift);font-weight:600;
  text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--blue-lift) 38%,transparent);
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
  font-family:inherit;cursor:pointer;
}
.btn-link:hover{color:#8ecbf8;border-bottom-color:currentColor}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ==========================================================================
   Eyebrow / status line
   ========================================================================== */
.statusline{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  font-size:.78rem;font-weight:600;letter-spacing:.05em;color:var(--chrome-dim);
  margin-bottom:24px;
}
.statusline .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 16%,transparent)}
.statusline .bar{height:1px;flex:1;min-width:24px;background:var(--trace)}

/* ==========================================================================
   The attack-path graph — the site's signature visual system
   ========================================================================== */
figure.graph{
  margin:0;
  position:relative;border:1px solid var(--trace);border-radius:var(--r-lg);
  background:
    radial-gradient(ellipse 70% 100% at 18% 0%,color-mix(in srgb,var(--violet) 22%,transparent),transparent 62%),
    var(--plate);
  overflow:hidden;
}
.graph-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:13px 18px;border-bottom:1px solid var(--trace);
  background:color-mix(in srgb,var(--void) 46%,transparent);
}
.graph-head .graph-title{font-family:"Public Sans",sans-serif;font-size:.84rem;font-weight:700;letter-spacing:.02em;margin:0;color:var(--white)}
.graph-head .tag{font-size:.7rem;color:var(--chrome-dim);font-family:"JetBrains Mono",monospace}
.graph-stage{position:relative;width:100%;aspect-ratio:16/9;min-height:300px}
@media (max-width:900px){.graph-stage{aspect-ratio:3/4;min-height:460px}}
.graph svg{position:absolute;inset:0;width:100%;height:100%}

.g-edge{fill:none;stroke:var(--trace-lit);stroke-width:2}
.g-edge.lit{stroke:var(--violet-lift);stroke-width:2}
.g-edge.threat{stroke:var(--red-lift);stroke-width:2.4}
.g-flow{fill:none;stroke:var(--red-lift);stroke-width:3.2;stroke-linecap:round;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--red-lift) 55%,transparent))}
.g-node rect{fill:var(--plate-2);stroke:var(--trace-lit);stroke-width:1.6;transition:fill var(--t) var(--ease),stroke var(--t) var(--ease)}
.g-node text{fill:var(--chrome);font-family:"JetBrains Mono",monospace;font-size:17px;letter-spacing:.02em}
.g-node .g-sub{fill:var(--chrome-dim);font-size:13px}
.g-node{cursor:pointer}
.g-node:hover rect,.g-node:focus-visible rect,.g-node[data-active="true"] rect{fill:var(--plate-3);stroke:var(--violet-lift)}
.g-node:hover text,.g-node[data-active="true"] text{fill:var(--white)}
.g-node[data-breached="true"] rect{stroke:var(--red-lift);fill:color-mix(in srgb,var(--red) 22%,var(--plate-2))}
.g-node:focus{outline:none}
.g-node:focus-visible rect{stroke:var(--violet-lift);stroke-width:2.4}
.g-pip{fill:var(--red-lift)}
.g-edge-label{
  fill:var(--chrome-dim);font-family:"JetBrains Mono",monospace;font-size:13px;
  stroke:var(--plate);stroke-width:4px;paint-order:stroke fill;
  stroke-linejoin:round;letter-spacing:.03em;
}

.graph-readout{
  border-top:1px solid var(--trace);padding:15px 18px;min-height:98px;
  background:color-mix(in srgb,var(--void) 36%,transparent);
}
.graph-readout .ro-k{font-family:"JetBrains Mono",monospace;font-size:.7rem;color:var(--violet-lift);margin:0 0 5px;letter-spacing:.04em}
.graph-readout .ro-t{font-family:Saira,sans-serif;font-weight:650;font-size:1.06rem;margin:0 0 5px;line-height:1.2}
.graph-readout .ro-d{font-size:.87rem;color:var(--chrome);margin:0;max-width:62ch}
.graph-hint{font-size:.76rem;color:var(--chrome-dim);margin:10px 0 0}

/* Below 760px a six-node graph cannot be read, so the same model is rendered
   as a stacked chain instead. Same data, same labels, no loss of information. */
.g-list{display:none;list-style:none;margin:0;padding:0}
.g-list li{position:relative;padding:16px 18px 18px 46px;border-top:1px solid var(--trace-soft)}
.g-list li:first-child{border-top:0}
.g-list li::before{
  content:"";position:absolute;left:22px;top:24px;width:9px;height:9px;
  background:var(--trace-lit);transform:rotate(45deg);
}
.g-list li[data-breached="true"]::before{background:var(--red-lift)}
.g-list li::after{
  content:"";position:absolute;left:26px;top:36px;bottom:-4px;width:1px;background:var(--trace);
}
.g-list li:last-child::after{display:none}
.g-list .gl-k{font-family:"JetBrains Mono",monospace;font-size:.72rem;color:var(--violet-lift);margin:0 0 3px;letter-spacing:.04em}
.g-list .gl-s{font-family:"JetBrains Mono",monospace;font-size:.7rem;color:var(--chrome-dim);margin:0 0 7px}
.g-list .gl-t{font-family:Saira,sans-serif;font-weight:650;font-size:1.02rem;line-height:1.18;margin:0 0 5px}
.g-list .gl-d{font-size:.87rem;color:var(--chrome);margin:0}

@media (max-width:700px){
  .graph-stage,.graph-readout{display:none}
  .g-list{display:block}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--trace-soft)}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-bg .mesh{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--trace-soft) 1px,transparent 1px),linear-gradient(90deg,var(--trace-soft) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 85% 75% at 25% 8%,#000 8%,transparent 70%);
  opacity:.6;
}
.hero-bg .wash{
  position:absolute;width:min(820px,95vw);aspect-ratio:1;border-radius:50%;
  right:-16%;top:-32%;filter:blur(26px);
  background:radial-gradient(circle,color-mix(in srgb,var(--violet) 34%,transparent),transparent 64%);
}
.hero-bg .wash-2{
  position:absolute;width:min(560px,80vw);aspect-ratio:1;border-radius:50%;
  left:-14%;bottom:-36%;filter:blur(30px);
  background:radial-gradient(circle,color-mix(in srgb,var(--blue) 40%,transparent),transparent 66%);
}
.hero-in{position:relative;padding-block:clamp(48px,7vw,92px) clamp(46px,6vw,80px)}
.hero-grid{display:grid;gap:clamp(30px,4vw,52px)}
.hero-grid>*{min-width:0} /* keep nowrap headline lines from widening the column; the fitter then scales them */
.hero-copy{max-width:min(100%,880px)}

.hero h1{margin-bottom:22px;font-size:clamp(2.4rem,6vw,4.6rem)}
.hero .lede{margin-bottom:28px}

/* page hero (interior pages) */
.phero{position:relative;overflow:hidden;border-bottom:1px solid var(--trace-soft);background:var(--plate)}
.phero .hero-bg .mesh{mask-image:radial-gradient(ellipse 70% 100% at 20% 0%,#000 5%,transparent 72%)}
.phero-in{position:relative;padding-block:clamp(40px,5.5vw,72px) clamp(34px,4.4vw,56px)}
.phero h1{margin-bottom:18px}
.phero .lede{margin-bottom:26px}

/* Split hero: copy left, brand crest right. The crest is the one bold element
   here, so it gets no frame, glow or card behind it. Below 860px the columns
   stack and the copy stays first in the reading order. */
.phero-split{display:grid;grid-template-columns:minmax(0,1fr) clamp(160px,22%,290px);
  gap:clamp(24px,4vw,56px);align-items:center}
.phero-split .phero-body{min-width:0}
.phero-split .phero-body > :last-child{margin-bottom:0}
.phero-aside{min-width:0;justify-self:end}
.crest{display:block;width:100%;height:auto;max-width:290px;margin-inline:auto}

/* Certification marks are reproduced intact on their own light plate: the SWaM
   badge is drawn for white and must not be recoloured to suit a dark footer. */
/* Certification marks sit on a light plate because each is drawn for a white
   ground, and are set to a common height: SWaM is a wide rectangle and the
   veteran marks are circular, so equal widths would size them absurdly. */
/* Qualified with .foot to clear `.foot ul{display:grid}`, the same way
   .foot ul.social does. */
.foot ul.cert-row{list-style:none;margin:10px 0 8px;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cert-row li{margin:0;min-width:0}
.cert-row img{display:block;height:54px;width:auto;max-width:100%;
  background:#fff;padding:5px;border-radius:4px;box-sizing:content-box}

/* The company tagline. It sits with the brand, so it takes the display face
   rather than body copy, and the brass rule ties it to the credential strip
   that carries the same colour. */
.tagline{font-family:Saira,"Arial Narrow",sans-serif;font-weight:650;
  letter-spacing:-.01em;font-size:clamp(1.05rem,1.9vw,1.42rem);
  color:var(--brass-lift);margin:-8px 0 20px;padding-left:13px;
  border-left:2px solid var(--brass)}

/* The three differentiators. Not a sequence, so no numbering; hairline rules
   rather than cards, matching .rulelist elsewhere on the site. */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
  gap:clamp(22px,3vw,40px)}
.pillars > div{border-top:2px solid var(--blue);padding-top:16px}
.pillars h3{margin-bottom:.5rem}
.pillars p{font-size:.95rem;color:var(--chrome);margin:0}
@media (max-width:860px){
  .phero-split{grid-template-columns:minmax(0,1fr);gap:clamp(18px,3.4vw,28px)}
  .phero-aside{justify-self:center}
  .crest{max-width:min(190px,46vw)}
}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.8rem;color:var(--chrome-dim);margin-bottom:20px}
.crumbs a{text-decoration:none;color:var(--chrome)}
.crumbs a:hover{color:var(--violet-lift)}
.crumbs .sep{opacity:.5}

/* ==========================================================================
   Credential strip
   ========================================================================== */
.creds{background:var(--plate);border-bottom:1px solid var(--trace-soft)}
.creds-in{display:flex;flex-wrap:wrap;gap:14px clamp(18px,3.4vw,44px);padding-block:18px;align-items:center}
.creds dl{display:flex;gap:9px;align-items:baseline;margin:0;min-width:0}
.creds dt{font-size:.72rem;color:var(--chrome-dim);letter-spacing:.04em}
.creds dd{margin:0;font-family:"JetBrains Mono",monospace;font-size:.88rem;color:var(--brass);font-weight:500}
.creds .desig{font-size:.84rem;color:var(--chrome);border-left:2px solid var(--brass);padding-left:13px;min-width:0;margin:0}
.creds .desig-alt{font-size:.8rem;color:var(--chrome-dim);margin:0;min-width:0}

/* ==========================================================================
   Service lifecycle index (Assess / Harden / Monitor / Respond)
   ========================================================================== */
.lifecycle{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--trace-soft);border:1px solid var(--trace-soft);border-radius:var(--r-lg);overflow:hidden}
@media (max-width:860px){.lifecycle{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.lifecycle{grid-template-columns:minmax(0,1fr)}}
.phase{background:var(--void);padding:24px 22px 22px;position:relative;transition:background var(--t) var(--ease)}
.phase::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--violet-lift);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t) var(--ease)}
.phase:hover{background:var(--plate)}
.phase:hover::before{transform:scaleX(1)}
.phase .step{font-family:"JetBrains Mono",monospace;font-size:.7rem;color:var(--violet-lift);margin:0 0 9px;letter-spacing:.06em}
.phase h3{font-size:1.2rem;margin-bottom:.45rem}
.phase p{font-size:.88rem;color:var(--chrome);margin:0 0 14px}
.phase ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.phase li a{font-size:.86rem;color:var(--chrome);text-decoration:none;display:flex;gap:9px;align-items:baseline;transition:color var(--t-fast) var(--ease)}
.phase li a::before{content:"";width:4px;height:4px;flex:0 0 auto;background:var(--trace-lit);transform:rotate(45deg);transition:background var(--t-fast) var(--ease)}
.phase li a:hover{color:var(--violet-lift)}
.phase li a:hover::before{background:var(--violet-lift)}

/* ==========================================================================
   Cards / panels (used sparingly, never as the default container)
   ========================================================================== */
.panel{border:1px solid var(--trace);border-radius:var(--r-lg);background:var(--plate);padding:clamp(22px,3vw,30px)}
.panel-lift{border-left:3px solid var(--violet-lift)}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:14px}
.tile{
  border:1px solid var(--trace);border-radius:var(--r-lg);background:var(--plate);
  padding:24px 22px;display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease),background var(--t) var(--ease);
}
.tile::after{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--violet-lift);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t) var(--ease)}
.tile:hover,.tile:focus-within{border-color:color-mix(in srgb,var(--violet-lift) 42%,var(--trace));transform:translateY(-3px);background:var(--plate-2)}
.tile:hover::after,.tile:focus-within::after{transform:scaleX(1)}
.tile[data-featured="true"]{border-color:color-mix(in srgb,var(--violet-lift) 52%,var(--trace))}
.tile .kicker{font-family:"JetBrains Mono",monospace;font-size:.7rem;color:var(--chrome-dim);margin:0 0 11px;display:flex;justify-content:space-between;gap:10px}
.tile .kicker .flag{color:var(--violet-lift);font-weight:600}
.tile h3{margin-bottom:.45rem}
.tile p{font-size:.9rem;color:var(--chrome);margin:0 0 16px}
.tile ul{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:8px}
.tile li{font-size:.88rem;color:var(--chrome);display:flex;gap:10px;align-items:flex-start}
.tile li::before{content:"";width:5px;height:5px;margin-top:.62em;flex:0 0 auto;background:var(--trace-lit);transform:rotate(45deg)}
.tile[data-featured="true"] li::before{background:var(--violet-lift)}
.tile .btn,.tile .btn-link{margin-top:auto;align-self:flex-start}
.tile .btn{width:100%}

/* ==========================================================================
   Deliverables / point lists
   ========================================================================== */
.points{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:10px}
.points li{position:relative;padding-left:17px;color:var(--chrome);font-size:.95rem}
.points li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--blue-lift);transform:rotate(45deg)}
.points.violet li::before{background:var(--violet-lift)}

.cols-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(22px,3.4vw,48px)}
.cols-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:clamp(20px,2.8vw,36px)}

.rulelist{display:grid;gap:0}
.rulelist > div{border-top:1px solid var(--trace);padding:20px 0}
.rulelist > div:last-child{border-bottom:1px solid var(--trace)}
.rulelist h3{font-size:1.1rem;margin-bottom:.4rem}
.rulelist p{font-size:.92rem;color:var(--chrome);margin:0}

/* ==========================================================================
   Patriot Values — the acronym is the content, so the letters are the layout
   ========================================================================== */
.patriot{display:grid;gap:0;margin:0;padding:0;list-style:none}
.patriot > li{
  display:grid;grid-template-columns:clamp(46px,5.4vw,78px) minmax(0,1fr);
  gap:clamp(14px,2.2vw,28px);align-items:start;
  border-top:1px solid var(--trace);padding:clamp(18px,2.3vw,26px) 0;
}
.patriot > li:last-child{border-bottom:1px solid var(--trace)}
.patriot .ltr{
  font-family:"Saira",sans-serif;font-weight:700;
  font-size:clamp(2.3rem,4.8vw,3.4rem);line-height:.8;
  font-variation-settings:"wdth" 76;
  color:var(--violet-lift);
}
.patriot h3{font-size:1.12rem;margin:0 0 .35rem}
.patriot p{font-size:.94rem;color:var(--chrome);margin:0;max-width:64ch}

/* ==========================================================================
   Numbered process (only where content really is a sequence)
   ========================================================================== */
.process{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:0}
.process li{
  counter-increment:s;display:grid;grid-template-columns:54px 1fr;gap:20px;
  padding:22px 0;border-top:1px solid var(--trace);align-items:start;
}
.process li:last-child{border-bottom:1px solid var(--trace)}
.process li::before{
  content:counter(s,decimal-leading-zero);
  font-family:"JetBrains Mono",monospace;font-size:.82rem;color:var(--violet-lift);
  padding-top:2px;grid-column:1;grid-row:1;
}
/* Without this every child after the first auto-places back into the 54px
   counter column and the copy renders one word per line. */
.process li > *{grid-column:2}
.process h3{font-size:1.06rem;margin-bottom:.35rem}
.process p{font-size:.91rem;color:var(--chrome);margin:0}

/* ==========================================================================
   Metrics
   ========================================================================== */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(162px,1fr));gap:1px;background:var(--trace-soft);border:1px solid var(--trace-soft);border-radius:var(--r-lg);overflow:hidden}
.metric{background:var(--void);padding:24px 20px;border-top:2px solid transparent;transition:border-color var(--t) var(--ease),background var(--t) var(--ease)}
.metric:hover{border-top-color:var(--violet-lift);background:var(--plate)}
.metric .v{font-family:Saira,sans-serif;font-size:clamp(1.8rem,4vw,2.5rem);font-weight:700;line-height:1;letter-spacing:-.03em;display:block;color:var(--white)}
.metric .k{font-size:.83rem;color:var(--chrome);margin-top:9px;display:block}
.metric .src{font-size:.7rem;color:var(--chrome-dim);margin-top:6px;display:block}

/* ==========================================================================
   Accordion (service detail, FAQ)
   ========================================================================== */
.acc{list-style:none;margin:0;padding:0;border-top:1px solid var(--trace)}
.acc > li{border-bottom:1px solid var(--trace)}
.acc h3{margin:0;font-weight:inherit;font-family:inherit;font-size:inherit;letter-spacing:normal}
.acc-btn{
  width:100%;display:grid;grid-template-columns:1fr 20px;gap:18px;align-items:center;
  background:none;border:0;color:var(--white);font-family:inherit;cursor:pointer;text-align:left;
  padding:20px 4px;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.acc-btn:hover{background:color-mix(in srgb,var(--plate) 60%,transparent)}
.acc-btn .q{font-family:Saira,sans-serif;font-weight:620;font-size:clamp(1.02rem,1.8vw,1.22rem);letter-spacing:-.012em;line-height:1.2}
.acc-btn .chev{width:18px;height:18px;color:var(--chrome-dim);transition:transform var(--t) var(--ease),color var(--t) var(--ease)}
.acc-btn[aria-expanded="true"] .chev{transform:rotate(180deg);color:var(--violet-lift)}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 400ms var(--ease)}
.acc-body[data-open="true"]{grid-template-rows:1fr}
.acc-inner{overflow:hidden;min-height:0}
.acc-body[data-open="true"] .acc-inner{padding:0 4px 26px}
.acc-inner > *:last-child{margin-bottom:0}

/* ==========================================================================
   Tables
   ========================================================================== */
.table-scroll{overflow-x:auto;border:1px solid var(--trace);border-radius:var(--r-lg);background:var(--plate)}
table.data-table{width:100%;border-collapse:collapse;min-width:560px;font-size:.91rem}
@media (max-width:560px){
  table.data-table{min-width:0}
  .data-table th,.data-table td{padding:11px 13px;font-size:.87rem}
}
.data-table th,.data-table td{text-align:left;padding:13px 17px;vertical-align:top;border-bottom:1px solid var(--trace-soft)}
.data-table thead th{font-size:.76rem;font-weight:700;letter-spacing:.05em;color:var(--chrome-dim);background:var(--plate);border-bottom-color:var(--trace)}
.data-table tbody tr{transition:background var(--t-fast) var(--ease)}
.data-table tbody tr:hover{background:var(--plate-2)}
.data-table tbody th{color:var(--violet-lift);font-weight:500;white-space:nowrap;font-family:"JetBrains Mono",monospace}
.data-table td{color:var(--chrome)}
.data-table td strong{color:var(--white);font-weight:600}
.data-table tbody tr[hidden]{display:none}
/* Services menu: anchor chips under the hero, code column width */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.jump a{font-size:.82rem;padding:7px 12px;border:1px solid var(--trace);border-radius:999px;color:var(--chrome);text-decoration:none;white-space:nowrap;transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.jump a:hover,.jump a:focus-visible{border-color:var(--violet-lift);color:var(--white)}
@media (max-width:720px){.jump{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}}
.menu-table tbody th{width:5.5rem}
.codes span{white-space:nowrap}

/* ==========================================================================
   Services menu page: service-line accents, cards, explainer, packages
   Every component takes its colour from --accent, set inline from the
   brand palette, so each service line reads the same everywhere it appears.
   ========================================================================== */
.ico{width:22px;height:22px;flex:none}
.ico-sm{width:16px;height:16px}
.grad{background:linear-gradient(90deg,var(--blue-lift),var(--violet-lift) 55%,var(--red-lift));-webkit-background-clip:text;background-clip:text;color:transparent}
.jump a[style]{border-color:color-mix(in srgb,var(--accent) 45%,var(--trace))}
.jump a[style]:hover{border-color:var(--accent);color:var(--accent)}

.menu-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--trace);border:1px solid var(--trace);border-radius:var(--r-lg);overflow:hidden;align-self:center}
.menu-stats > div{background:color-mix(in srgb,var(--plate) 88%,transparent);padding:22px 22px 20px;border-top:3px solid var(--accent)}
.menu-stats .n{display:block;font-family:Saira,sans-serif;font-weight:700;font-size:clamp(2.2rem,4vw,3.1rem);line-height:1;color:var(--accent)}
.menu-stats .n small{font-size:.42em;margin-left:4px;letter-spacing:.02em}
.menu-stats .k{display:block;margin-top:8px;font-size:.84rem;color:var(--chrome);line-height:1.35}

.fpf{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fpf > div{border-left:3px solid var(--accent);padding:4px 0 4px 20px}
.fpf-n{display:block;font-family:Saira,sans-serif;font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--accent);line-height:1;margin-bottom:10px}
.fpf p{color:var(--chrome);margin:0;font-size:.95rem}

.line-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.line-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:24px 22px 18px;background:var(--plate);border:1px solid var(--trace);border-top:3px solid var(--accent);border-radius:var(--r-lg);text-decoration:none;color:var(--white);overflow:hidden;transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),background var(--t) var(--ease)}
.line-card::after{content:"";position:absolute;inset:auto -40px -60px auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%);pointer-events:none}
.line-card:hover,.line-card:focus-visible{transform:translateY(-3px);border-color:var(--accent);background:var(--plate-2)}
.line-ico{color:var(--accent)}
.line-ico .ico{width:30px;height:30px}
.line-count{position:absolute;top:16px;right:20px;font-family:Saira,sans-serif;font-weight:700;font-size:2.4rem;line-height:1;color:color-mix(in srgb,var(--accent) 40%,transparent)}
.line-card h3{font-size:1.12rem;margin:4px 0 0}
.line-card p{color:var(--chrome);font-size:.9rem;margin:0;flex:1}
.line-foot{display:flex;justify-content:space-between;gap:10px;margin-top:10px;padding-top:12px;border-top:1px solid var(--trace-soft);font-size:.76rem;color:var(--accent);letter-spacing:.03em}

.spectrum{position:relative}
.spec-bar{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--blue-lift),var(--violet-lift),var(--red-lift));margin-bottom:26px}
.spec-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.spec-cols > div{position:relative;padding:20px 20px 18px;background:var(--plate);border:1px solid var(--trace);border-radius:var(--r-lg)}
.spec-cols > div::before{content:"";position:absolute;top:-33px;left:20px;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--void),0 0 18px var(--accent)}
.spec-k{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.spec-cols h3{font-size:1.2rem;margin-bottom:8px}
.spec-cols p{color:var(--chrome);font-size:.92rem}
.spec-cols a{font-family:"JetBrains Mono",monospace;font-size:.8rem;color:var(--accent)}

.goal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.goal{display:flex;flex-direction:column;gap:8px;padding:18px 18px 16px;background:var(--plate);border:1px solid var(--trace);border-left:3px solid var(--accent);border-radius:var(--r-lg);text-decoration:none;color:var(--white);transition:transform var(--t) var(--ease),background var(--t) var(--ease)}
.goal:hover,.goal:focus-visible{transform:translateY(-3px);background:var(--plate-2)}
.goal-if{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--chrome-dim)}
.goal-q{font-family:Saira,sans-serif;font-weight:620;font-size:1.04rem;line-height:1.25;flex:1}
.goal-start{display:flex;gap:7px;align-items:flex-start;font-size:.88rem;color:var(--accent)}
.goal-start .ico{margin-top:2px}
.goal-codes{display:flex;flex-wrap:wrap;gap:5px}
.goal-codes span{font-family:"JetBrains Mono",monospace;font-size:.72rem;padding:2px 7px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--trace));border-radius:3px;color:var(--chrome)}

.menu-intro{padding-bottom:0}
.line-sec .sec-head{border-left:3px solid var(--accent);padding-left:18px}
.line-tag{display:flex;align-items:center;gap:9px;color:var(--accent);font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:10px}
.line-sec .menu-table tbody th{color:var(--accent)}
.line-sec .table-scroll{border-top:2px solid color-mix(in srgb,var(--accent) 60%,var(--trace))}

.pkg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.pkg{display:flex;flex-direction:column;padding:20px 18px;background:var(--plate);border:1px solid var(--trace);border-top:3px solid var(--accent);border-radius:var(--r-lg)}
.pkg-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;font-size:.78rem;color:var(--chrome-dim)}
.pkg-style{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:3px;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.pkg h3{font-size:1.3rem;margin-bottom:12px}
.pkg ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px;flex:1}
.pkg li{display:flex;gap:8px;font-size:.88rem;color:var(--chrome);line-height:1.35}
.pkg li .ico{color:var(--accent);margin-top:1px}
.pkg-best{margin:0;padding-top:12px;border-top:1px solid var(--trace-soft);font-size:.84rem;color:var(--white)}
.pkg-best span{display:block;font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--chrome-dim);margin-bottom:3px}

.addon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.addon{padding:18px;border:1px dashed var(--trace-lit);border-radius:var(--r-lg)}
.addon .mono{font-size:.76rem;color:var(--brass-lift)}
.addon h3{font-size:1.04rem;margin:6px 0}
.addon p{margin:0;font-size:.88rem;color:var(--chrome)}

.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;counter-reset:none}
.timeline li{position:relative;padding:18px 16px;background:var(--plate);border:1px solid var(--trace);border-radius:var(--r-lg)}
.timeline li:not(:last-child)::after{content:"";position:absolute;top:34px;right:-15px;width:16px;height:2px;background:var(--violet-lift)}
.t-n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;margin-bottom:10px;font-family:"JetBrains Mono",monospace;font-size:.8rem;color:var(--on-violet);background:linear-gradient(135deg,var(--violet-lift),var(--blue-lift))}
.timeline h3{font-size:1rem;margin-bottom:6px}
.timeline p{margin:0;font-size:.86rem;color:var(--chrome)}

.panel{padding:22px 22px 18px;background:var(--plate);border:1px solid var(--trace);border-top:3px solid var(--accent);border-radius:var(--r-lg)}
.panel h3{margin-bottom:14px}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.checks li{display:flex;gap:10px;font-size:.92rem;color:var(--chrome);line-height:1.45}
.checks .ico{color:var(--accent);margin-top:3px}

@media (max-width:1100px){
  .pkg-grid{grid-template-columns:repeat(3,1fr)}
  .goal-grid{grid-template-columns:repeat(2,1fr)}
  .timeline{grid-template-columns:repeat(3,1fr)}
  .timeline li::after{display:none}
}
@media (max-width:800px){
  .line-grid,.addon-grid,.pkg-grid{grid-template-columns:1fr 1fr}
  .fpf,.spec-cols{grid-template-columns:1fr}
  .spec-bar{display:none}
  .spec-cols > div::before{display:none}
  .spec-cols > div{border-left:3px solid var(--accent)}
}
@media (max-width:560px){
  .line-grid,.addon-grid,.pkg-grid,.goal-grid,.timeline{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .line-card,.goal{transition:none}
  .line-card:hover,.goal:hover{transform:none}
}
@media (max-width:640px){
  .menu-table thead{display:none}
  .menu-table,.menu-table tbody,.menu-table tr,.menu-table tbody th,.menu-table td{display:block;width:auto}
  .menu-table tr{padding:15px 16px;border-bottom:1px solid var(--trace-soft)}
  .menu-table tbody th,.menu-table td{padding:0;border:0}
  .menu-table tbody th{font-size:.8rem;margin-bottom:3px}
  .menu-table td + td{margin-top:8px}
  .menu-table td[data-label]::before{content:attr(data-label);display:block;font-family:inherit;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--chrome-dim);margin-bottom:2px}
}
[id]{scroll-margin-top:96px}


/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee{overflow:hidden;border-block:1px solid var(--trace-soft);background:var(--plate);padding:15px 0;position:relative}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:58px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--plate),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--plate),transparent)}
.marquee-track{display:flex;gap:32px;width:max-content;animation:slide 44s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:"JetBrains Mono",monospace;font-size:.82rem;color:var(--chrome);white-space:nowrap;display:flex;align-items:center;gap:12px}
.marquee-track span::after{content:"";width:5px;height:5px;background:var(--trace-lit);transform:rotate(45deg)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ==========================================================================
   Callouts
   ========================================================================== */
.note{border:1px solid var(--trace);border-left:3px solid var(--blue-lift);border-radius:var(--r);background:var(--plate);padding:18px 20px;margin-block:1.4rem}
.note.warn{border-left-color:var(--brass)}
.note.alert{border-left-color:var(--red-lift)}
.note p:last-child{margin-bottom:0}
.note .nh{font-family:Saira,sans-serif;font-weight:650;font-size:1rem;margin:0 0 .4rem;display:block}

.cta-band{
  display:flex;flex-wrap:wrap;gap:clamp(22px,3.6vw,52px);justify-content:space-between;align-items:center;
  border:1px solid var(--trace);border-left:3px solid var(--violet-lift);border-radius:var(--r-lg);
  background:
    radial-gradient(ellipse 60% 140% at 100% 50%,color-mix(in srgb,var(--violet) 26%,transparent),transparent 70%),
    var(--plate);
  padding:clamp(26px,3.6vw,44px);
}
.cta-band h2{max-width:17ch;margin-bottom:.5rem}
.cta-band p{color:var(--chrome);max-width:46ch;margin-bottom:0}

/* ==========================================================================
   Forms
   ========================================================================== */
form{display:grid;gap:17px}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
@media (max-width:620px){.row{grid-template-columns:minmax(0,1fr)}}
.field{display:grid;gap:7px}
.field label{font-size:.83rem;color:var(--chrome);font-weight:600}
.field label .req{color:var(--violet-lift)}
.field .help{font-size:.78rem;color:var(--chrome-dim);margin:0}
.field input,.field textarea,.field select{
  width:100%;background:var(--plate);color:var(--white);
  border:1px solid var(--trace);border-radius:var(--r);
  padding:12px 14px;font:inherit;font-size:.96rem;
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--chrome-dim)}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--chrome-dim)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--violet-lift);background:var(--plate-2)}
.field textarea{resize:vertical;min-height:130px}
.field .err{font-size:.78rem;color:var(--red-lift);min-height:1em}
.field[data-invalid="true"] input,.field[data-invalid="true"] textarea,.field[data-invalid="true"] select{border-color:var(--red-lift)}
.checks{display:grid;gap:10px}
.check{display:grid;grid-template-columns:18px 1fr;gap:11px;align-items:start;font-size:.9rem;color:var(--chrome)}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--violet-lift)}
.form-note{font-size:.79rem;color:var(--chrome-dim);margin:0}
.form-status{border:1px solid var(--ok);border-left-width:3px;background:color-mix(in srgb,var(--ok) 9%,transparent);padding:15px 17px;border-radius:var(--r);font-size:.92rem}
.form-status[hidden]{display:none}

/* ==========================================================================
   Reveal
   ========================================================================== */
.rise{opacity:0;transform:translateY(16px);transition:opacity 560ms var(--ease-out),transform 560ms var(--ease-out)}
.rise.in{opacity:1;transform:none}

/* ==========================================================================
   Footer — mirrors the live site footer exactly, nothing removed
   ========================================================================== */
/* Footer runs in the body face at a tight rhythm: it is reference material a
   buyer scans, not prose, so line-height is pulled well below the body 1.62. */
.foot{background:var(--plate);border-top:1px solid var(--trace);padding-top:clamp(32px,3.6vw,48px);line-height:1.4}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.55fr) repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
@media (max-width:980px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.foot-grid{grid-template-columns:minmax(0,1fr)}}
.foot h2{font-family:"Public Sans",sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--chrome-dim);margin:0 0 9px;padding-bottom:6px;border-bottom:1px solid var(--trace)}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:5px}
.foot a{font-size:.875rem;color:var(--chrome);text-decoration:none;transition:color var(--t-fast) var(--ease)}
.foot a:hover{color:var(--violet-lift)}
.foot .brand{margin-bottom:12px}
.foot-blurb{font-size:.86rem;color:var(--chrome);max-width:38ch;margin:0}
.foot dl{margin:10px 0 0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:.84rem}
.foot dt{color:var(--chrome-dim)}
.foot dd{margin:0;color:var(--chrome)}
.foot .naics{font-size:.84rem;color:var(--chrome);line-height:1.5;margin:0}
.foot .desig-note{font-size:.84rem;color:var(--chrome);margin:9px 0 0}
.foot .foot-note{font-size:.82rem;color:var(--chrome-dim);margin:9px 0 0;max-width:30ch}
.foot-bar{
  margin-top:clamp(22px,2.6vw,34px);border-top:1px solid var(--trace);padding-block:14px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  font-size:.82rem;color:var(--chrome-dim);
}
.foot-bar p{margin:0;max-width:none}
.foot-bar a{color:var(--chrome-dim)}
.foot ul.social{display:flex;gap:9px;list-style:none;padding:0;margin:0}
.social a{width:37px;height:37px;display:grid;place-items:center;border:1px solid var(--trace);border-radius:var(--r);color:var(--chrome);transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.social a:hover{border-color:var(--violet-lift);color:var(--violet-lift);transform:translateY(-2px)}
.social svg{width:16px;height:16px;fill:currentColor}

/* ==========================================================================
   Utility
   ========================================================================== */
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.mt-2{margin-top:clamp(20px,2.6vw,32px)}
.mt-3{margin-top:clamp(28px,3.6vw,46px)}
.center-col{max-width:720px;margin-inline:auto;text-align:left}
.prose h2{margin-top:2.2rem;margin-bottom:.7rem}
.prose h3{margin-top:1.7rem;margin-bottom:.5rem}
.prose ul,.prose ol{color:var(--chrome);max-width:var(--measure);padding-left:1.15rem}
.prose li{margin-bottom:.5rem}
.prose a{color:var(--blue-lift)}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rise{opacity:1;transform:none}
  .marquee-track{animation:none}
  #progress{display:none}
  .topbar .breach::before{animation:none}
}

@media print{
  .nav,.topbar,#progress,.marquee,.graph-stage{display:none}
  body{background:#fff;color:#000}
}

/* ==========================================================================
   AI vulnerability heatmap
   Matrix = where a weakness becomes exploitable. Path strip = how one exploit
   moves. Relevance, scenario state and control result each get their own
   visual channel; sharing one is how this kind of graphic starts lying.

   Level is never colour-only. The dot inside each cell is sized by level, so
   the ordering survives greyscale, colour-vision deficiency and e-ink. Deep
   red is inherently dark, so the fills cannot be strictly monotonic in
   luminance while keeping the specified hues; the dot carries the ordering
   that the fill cannot.
   ========================================================================== */
.vulnmap{
  --vm-critical:#c0303f; --vm-high:#cf5f4e; --vm-medium:#b07f28;
  --vm-low:#2a7d74;      --vm-out:#223141;
  --vm-event:#f08a5d;    /* scenario state, deliberately NOT a relevance hue */
  margin:0;border:1px solid var(--trace-soft);border-radius:var(--r-lg);
  background:var(--plate);overflow:hidden
}
.vulnmap .graph-head{border-bottom:1px solid var(--trace-soft)}
.vm-stage{padding:clamp(14px,2vw,20px)}

.vm-scroll{overflow-x:auto;overscroll-behavior-x:contain;
  background:
    linear-gradient(to right,var(--plate) 30%,transparent),
    linear-gradient(to left,var(--plate) 30%,transparent) 100% 0,
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.45),transparent),
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.45),transparent) 100% 0;
  background-repeat:no-repeat;background-size:40px 100%,40px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll}
.vm-grid{--vm-cols:6;min-width:max-content}
.vm-row{display:grid;grid-template-columns:186px repeat(var(--vm-cols),minmax(84px,1fr));
  gap:3px;margin-bottom:3px;align-items:stretch}

.vm-corner,.vm-colhead{font-family:"JetBrains Mono",monospace;font-size:.64rem;
  letter-spacing:.05em;color:var(--chrome-dim);text-transform:uppercase;
  padding:0 6px 9px;align-self:end;line-height:1.25}
.vm-corner{position:sticky;left:0;background:var(--plate);z-index:3}
.vm-colhead{text-align:center}

.vm-rowhead{position:sticky;left:0;z-index:2;background:var(--plate);
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:7px 12px 7px 0;border-right:1px solid var(--trace-soft)}
.vm-name{font-size:.8rem;color:var(--chrome);line-height:1.2}

.vm-cellwrap{display:flex;min-width:0}
.vm-cell{
  position:relative;flex:1;min-height:42px;border:0;padding:0;cursor:pointer;
  border-radius:3px;background:var(--vm-out);
  opacity:0;transform:translateY(5px);
  transition:opacity .34s ease,transform .34s ease,background-color .2s ease,box-shadow .2s ease
}
.vm-cell.is-in{opacity:1;transform:none}
/* Flat fallback first: an engine without color-mix drops the whole
   declaration, and here the mixed colour IS the content. */
.vm-cell[data-level=critical]{background:#b22f3d;
  background:color-mix(in srgb,var(--vm-critical) 92%,var(--plate))}
.vm-cell[data-level=high]{background:#974c44;
  background:color-mix(in srgb,var(--vm-high) 70%,var(--plate))}
.vm-cell[data-level=medium]{background:#65512a;
  background:color-mix(in srgb,var(--vm-medium) 52%,var(--plate))}
.vm-cell[data-level=low]{background:#1e4a4d;
  background:color-mix(in srgb,var(--vm-low) 46%,var(--plate))}

/* The redundant, non-colour encoding of level. */
.vm-dot{position:absolute;inset:0;margin:auto;border-radius:50%;
  background:rgba(255,255,255,.92);
  transition:transform .2s ease,background-color .2s ease}
.vm-cell[data-level=critical] .vm-dot{width:10px;height:10px}
.vm-cell[data-level=high]     .vm-dot{width:7px;height:7px}
.vm-cell[data-level=medium]   .vm-dot{width:5px;height:5px;background:rgba(255,255,255,.78)}
.vm-cell[data-level=low]      .vm-dot{width:3px;height:3px;background:rgba(255,255,255,.62)}
.vm-cell:hover .vm-dot,.vm-cell:focus-visible .vm-dot{background:#fff;transform:scale(1.35)}

.vm-cell.is-row,.vm-cell.is-col{box-shadow:inset 0 0 0 1px var(--trace-lit)}
.vm-cell.is-hot{box-shadow:inset 0 0 0 2px var(--blue-lift);z-index:1}
.vm-cell:focus-visible{outline:2px solid var(--blue-lift);outline-offset:2px}

/* Scenario state: outline and the event colour, never a fill change, so it
   cannot be mistaken for a relevance reading. */
.vm-cell.is-dim{opacity:.52}
.vm-cell.is-held{box-shadow:inset 0 0 0 2px var(--chrome)}
.vm-cell.is-active{box-shadow:inset 0 0 0 2px #fff;animation:vm-ping 1.1s ease-out infinite}
.vm-cell.is-hit{box-shadow:inset 0 0 0 2px var(--vm-event),0 0 14px -2px var(--vm-event)}
@keyframes vm-ping{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* ---------------------------------------------------------------- legend */
.vm-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));
  gap:8px 18px;margin-top:14px;padding-top:12px;border-top:1px solid var(--trace-soft)}
.vm-legend-lab{grid-column:1/-1;font-family:"JetBrains Mono",monospace;font-size:.6rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--chrome-dim)}
.vm-key{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;align-items:baseline;
  font-size:.76rem;color:var(--chrome)}
.vm-key b{font-weight:600;color:#fff}
.vm-key-blurb{grid-column:2;font-size:.72rem;color:var(--chrome-dim);line-height:1.35}
.vm-sw{width:11px;height:11px;border-radius:2px;background:var(--vm-out);align-self:center}
.vm-sw[data-level=critical]{background:#b22f3d}
.vm-sw[data-level=high]{background:#974c44}
.vm-sw[data-level=medium]{background:#65512a}
.vm-sw[data-level=low]{background:#1e4a4d}
.vm-scalenote{font-size:.74rem;color:var(--chrome-dim);margin:10px 0 0;line-height:1.5}

/* ------------------------------------------------------------ path strip */
.vm-path{margin-top:16px;padding:14px;border:1px solid var(--trace-soft);
  border-radius:var(--r-md,8px);background:var(--plate-2)}
.vm-path-head{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin-bottom:14px}
.vm-path-title{font-family:"JetBrains Mono",monospace;font-size:.62rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--blue-lift)}
.vm-path-note{font-size:.8rem;color:var(--chrome-dim)}

.vm-track{position:relative;display:flex;justify-content:space-between;gap:4px;
  padding:6px 0 2px;min-height:58px}
.vm-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  flex:1;min-width:0;z-index:2}
.vm-node-dot{width:11px;height:11px;border-radius:50%;background:var(--plate-3);
  border:1px solid var(--trace);
  transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease}
.vm-node-label{font-family:"JetBrains Mono",monospace;font-size:.56rem;letter-spacing:.04em;
  color:var(--chrome-dim);text-align:center;line-height:1.2}
.vm-node.is-done .vm-node-dot{background:var(--trace-lit);border-color:var(--trace-lit)}
.vm-node.is-live .vm-node-dot{background:var(--blue-lift);border-color:var(--blue-lift);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--blue-lift) 18%,transparent)}
/* Green means a control stopped the action. A control that let it through is
   amber, never green: painting it green rewards the failure case. */
.vm-node.is-held .vm-node-dot{background:var(--ok);border-color:var(--ok);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--ok) 20%,transparent)}
.vm-node.is-passed .vm-node-dot{background:var(--brass);border-color:var(--brass);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--brass) 22%,transparent)}
.vm-node.is-live .vm-node-label{color:#fff}

.vm-line{position:absolute;top:11px;height:1px;background:var(--trace-lit);
  transition:width .5s ease,left .5s ease;z-index:1}
.vm-line.is-boundary{background:none;
  background-image:repeating-linear-gradient(to right,var(--brass) 0 5px,transparent 5px 10px)}
.vm-signal{position:absolute;top:7px;left:0;width:9px;height:9px;margin-left:-4px;
  border-radius:50%;opacity:0;z-index:3;
  transition:left 1.15s cubic-bezier(.42,0,.3,1),opacity .25s ease}
.vm-signal.is-on{opacity:1}
.vm-signal.is-bad{background:var(--vm-event);box-shadow:0 0 11px 1px var(--vm-event)}
.vm-signal.is-ok{background:var(--ok);box-shadow:0 0 11px 1px var(--ok)}
.vm-signal.is-warn{background:var(--brass);box-shadow:0 0 11px 1px var(--brass)}
.vm-signal.is-still{animation:vm-still 1.1s ease-out infinite}
@keyframes vm-still{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}

.vm-annot{font-size:.84rem;color:var(--chrome);margin:12px 0 0;min-height:2.5em;line-height:1.45}
.vm-verdict{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.07em;
  margin:9px 0 0;min-height:1.1em;color:transparent}
.vm-verdict.is-bad{color:var(--vm-event)}
.vm-verdict.is-ok{color:var(--ok)}
.vm-verdict.is-partial{color:var(--brass)}
.vm-dimnote{font-size:.72rem;color:var(--chrome-dim);margin:9px 0 0;line-height:1.45}

/* -------------------------------------------------------------- controls */
.vm-controls{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.vm-sbtn,.vm-toggle{font:inherit;font-size:.76rem;cursor:pointer;
  padding:7px 12px;border-radius:999px;border:1px solid var(--trace);
  background:transparent;color:var(--chrome);
  transition:border-color .18s ease,color .18s ease,background-color .18s ease}
.vm-sbtn:hover,.vm-toggle:hover{border-color:var(--trace-lit);color:#fff}
.vm-sbtn.is-on{border-color:var(--blue-lift);color:var(--blue-lift);
  background:color-mix(in srgb,var(--blue-lift) 10%,transparent)}
.vm-toggle{margin-left:auto;border-style:dashed}
.vm-sbtn:focus-visible,.vm-toggle:focus-visible,.vm-close:focus-visible{
  outline:2px solid var(--blue-lift);outline-offset:2px}

/* ---------------------------------------------------------- detail panel */
.vm-detail{margin-top:14px;padding:16px;border:1px solid var(--trace);
  border-radius:var(--r-md,8px);background:var(--plate-2)}
.vm-detail:focus{outline:2px solid var(--blue-lift);outline-offset:2px}
.vm-d-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 11px}
.vm-d-top h3{font-size:1.12rem}
.vm-d-rel{font-family:"JetBrains Mono",monospace;font-size:.6rem;letter-spacing:.07em;
  text-transform:uppercase;padding:3px 8px;border-radius:3px;color:var(--chrome);
  border-left:3px solid var(--vm-out);background:var(--plate-3)}
.vm-d-rel[data-level=critical]{border-left-color:var(--vm-critical)}
.vm-d-rel[data-level=high]{border-left-color:var(--vm-high)}
.vm-d-rel[data-level=medium]{border-left-color:var(--vm-medium)}
.vm-d-rel[data-level=low]{border-left-color:var(--vm-low)}
.vm-d-surface{font-size:.78rem;color:var(--chrome-dim);margin:9px 0 0}
.vm-d-sub{font-size:.78rem;color:var(--chrome-dim);margin:2px 0 0}
.vm-d-why{font-size:.92rem;color:#fff;margin:9px 0 0}
.vm-detail h4{margin-top:15px;font-size:.84rem;color:var(--blue-lift)}
.vm-detail p{font-size:.88rem;color:var(--chrome);margin:.25rem 0 0}
.vm-close{font:inherit;font-size:.76rem;cursor:pointer;margin-top:16px;
  padding:7px 14px;border-radius:999px;border:1px solid var(--trace);
  background:transparent;color:var(--chrome)}

.vm-disclaimer{font-size:.76rem;color:var(--chrome-dim);margin:14px 0 0;line-height:1.5}
.vm-fallback{font-size:.88rem;color:var(--chrome);margin:0}

@media (max-width:620px){
  .vm-row{grid-template-columns:132px repeat(var(--vm-cols),minmax(64px,1fr))}
  .vm-name{font-size:.72rem}
  .vm-toggle{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  .vm-cell,.vm-signal,.vm-line,.vm-node-dot{transition:none}
  .vm-cell.is-active,.vm-signal.is-still{animation:none}
  .vm-cell{opacity:1;transform:none}
}