/* ==========================================================================
   Order of Battle — Born Between 2 Generals, LLC
   Motion at the LURE STANDARD: a full-bleed looping video behind the type,
   graded into the palette, veiled so the type keeps its ground.

   The grade direction follows the COLOUR OF THE TYPE, not the footage. The
   hero type here is white, so the footage grades DOWN — but only far enough
   that the ridge still reads. Erasing the footage is the failure this whole
   file exists to avoid.
   ========================================================================== */
:root{
  --navy:#0a3161; --red:#b31942; --ink:#0f172a; --mute:#5b6779;
  --line:#dfe4ec; --paper:#ffffff; --wash:#f4f6fa;
  --ok:#166534; --warn:#9a3412; --gold:#b8892b;
  --wrap:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Archivo",system-ui,sans-serif;letter-spacing:-.02em;margin:0}
a{color:var(--navy)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600}

/* ---- site nav ---------------------------------------------------------- */
.sitenav{position:sticky;top:0;z-index:40;background:var(--navy);color:#fff}
.sitenav .wrap{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px}
.sitenav .mark{font-family:"Archivo";font-weight:900;font-size:14px;letter-spacing:-.01em;
  margin-right:auto;display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none}
.sitenav .mark svg{width:22px;height:22px;flex:none}
.sitenav a.n{color:#c9d6ea;text-decoration:none;font-size:12.5px;font-weight:600;
  padding:6px 10px;border-radius:4px}
.sitenav a.n:hover{background:rgba(255,255,255,.12);color:#fff}
.sitenav a.n[aria-current=page]{background:var(--red);color:#fff}
.sitenav a.n:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ---- THE HERO ---------------------------------------------------------- */
.chero{position:relative;min-height:78vh;display:grid;align-items:end;overflow:hidden;
  background:#06182f;isolation:isolate}
.chero.band{min-height:42vh}
.chero .cbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:saturate(.62) contrast(1.10) brightness(.80)}
.chero .cstill{animation:none;transform:scale(1.1)}          /* finished state, never moving */
.chero video.cbg{animation:heroDrift 44s ease-in-out infinite alternate}
.chero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(6,24,47,.22) 0%, rgba(6,24,47,.44) 50%, rgba(6,24,47,.86) 100%)}
.chero .chartmotif{position:absolute;inset:0;z-index:2;opacity:.16;pointer-events:none;
  animation:motifDrift 34s ease-in-out infinite alternate}
.chero .cinner{position:relative;z-index:3;padding:0 20px 46px;
  max-width:var(--wrap);margin-inline:auto;width:100%}
.chero.band .cinner{padding-bottom:28px}
@keyframes heroDrift{from{transform:scale(1.05)}to{transform:scale(1.15)}}
@keyframes motifDrift{from{transform:translate3d(-2.5%,0,0)}to{transform:translate3d(2.5%,0,0)}}

.chero .eyebrow{color:#ffd7df}
.chero h1{font-size:clamp(34px,6.4vw,74px);font-weight:900;line-height:.95;color:#fff;
  margin:10px 0 8px;text-shadow:0 2px 26px rgba(0,0,0,.55)}
.chero h1 em{font-style:normal;color:#f4c04f}
.chero .sub{color:#e4ecf7;max-width:60ch;font-size:clamp(15px,1.6vw,18px);
  text-shadow:0 1px 14px rgba(0,0,0,.6)}
.chero .conf{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#b9c8de;margin-top:14px}
.herobtns{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.hbtn{font-size:13.5px;font-weight:700;text-decoration:none;padding:11px 17px;border-radius:4px;
  border:1px solid #fff;background:#fff;color:var(--navy);display:inline-block}
.hbtn.ghost{background:rgba(255,255,255,.08);color:#fff;backdrop-filter:blur(3px)}
.hbtn:hover{filter:brightness(1.06)}
.hbtn:focus-visible{outline:3px solid #f4c04f;outline-offset:3px}

/* scroll cue */
.cue{position:absolute;left:50%;bottom:12px;z-index:3;transform:translateX(-50%);
  color:#cbd8ea;font-size:19px;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* ---- reveal ------------------------------------------------------------
   The hidden-before-reveal state is applied ONLY when JS is definitely
   present (html.oob-js is set by an inline script in <head> before paint).
   With scripting off nothing ever hides. Failure mode is "no animation",
   never "no content".                                                      */
html.oob-js .rise{opacity:0;transform:translateY(16px)}
html.oob-js .rise.is-in{opacity:1;transform:none;
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}

/* ---- page furniture ---------------------------------------------------- */
main.page{padding:46px 0 10px}
.lede{font-size:18px;max-width:66ch;color:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:26px 0}
.card{border:1px solid var(--line);border-radius:7px;padding:18px;background:var(--paper);
  text-decoration:none;color:inherit;display:block;position:relative;overflow:hidden}
.card:hover{border-color:var(--navy);box-shadow:0 10px 30px -18px rgba(10,49,97,.6)}
.card .k{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);font-weight:600}
.card h3{font-size:20px;font-weight:900;color:var(--navy);margin:6px 0 6px}
.card p{margin:0;color:var(--mute);font-size:13.5px}
.rollup{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  border:1px solid var(--line);border-radius:7px;background:var(--wash);overflow:hidden;margin:8px 0 6px}
.stat{padding:15px 18px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat .k{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute)}
.stat .v{font-family:"Archivo";font-weight:900;font-size:27px;line-height:1.1;color:var(--navy);margin-top:2px}
.stat .v small{font-size:12px;font-weight:700;color:var(--mute)}
.note{font-size:12.5px;color:var(--mute)}
hr.rule{border:0;border-top:1px solid var(--line);margin:34px 0}
footer.site{border-top:3px solid var(--navy);margin-top:44px;padding:22px 0 64px;
  color:var(--mute);font-size:12px}

/* ---- reduced motion ----------------------------------------------------
   Resolves to the FINISHED state — never a frozen mid-frame, never nothing.
   CSS cancels the drift; only JS can stop the decode, so motion.js does that
   half and leaves the still showing.                                       */
@media(prefers-reduced-motion:reduce){
  .chero video.cbg,.chero .chartmotif,.cue{animation:none!important}
  .chero video.cbg{transform:scale(1.1)}
  html.oob-js .rise{opacity:1;transform:none;transition:none}
}
@media(max-width:720px){
  .chero{min-height:66vh}
  .stat{border-right:0;border-bottom:1px solid var(--line)}
  .sitenav .wrap{gap:2px}
  .sitenav a.n{padding:5px 7px;font-size:12px}
}

/* ---- the room ---------------------------------------------------------- */
.agentpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin:24px 0 6px}
.agentpick button{text-align:left;cursor:pointer;border:1px solid var(--line);border-radius:7px;
  background:var(--paper);padding:15px 16px;font:inherit;color:inherit;transition:border-color .18s ease}
.agentpick button:hover{border-color:var(--navy)}
.agentpick button[aria-pressed=true]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.agentpick .an{font-family:"Archivo";font-weight:900;font-size:17px;color:var(--navy)}
.agentpick .ad{font-size:12.5px;color:var(--mute);margin-top:4px}
.agentpick button:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.ground{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;color:var(--mute);
  background:var(--wash);border:1px solid var(--line);border-radius:5px;padding:9px 12px;margin:14px 0}
.chat{border:1px solid var(--line);border-radius:7px;background:var(--paper);overflow:hidden}
.log{padding:16px;display:flex;flex-direction:column;gap:14px;min-height:180px;max-height:60vh;overflow-y:auto}
.msg{max-width:74ch}
.msg .who{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.msg.you{margin-left:auto;text-align:right}
.msg.you .b{background:var(--navy);color:#fff;border-radius:8px 8px 2px 8px;padding:10px 13px;display:inline-block;text-align:left}
.msg.bot .b{background:var(--wash);border:1px solid var(--line);border-radius:8px 8px 8px 2px;padding:11px 14px}
.msg .b p{margin:0 0 9px} .msg .b p:last-child{margin:0}
.ask{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);background:var(--wash)}
.ask input{flex:1;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink)}
.ask button{font:inherit;font-weight:700;font-size:13px;cursor:pointer;border:1px solid var(--navy);
  background:var(--navy);color:#fff;padding:10px 18px;border-radius:5px}
.ask button[disabled]{opacity:.5;cursor:default}
.ask input:focus-visible,.ask button:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.seeds{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 0}
.seeds button{font:inherit;font-size:12px;cursor:pointer;border:1px solid var(--line);background:#fff;
  color:var(--navy);padding:6px 11px;border-radius:14px}
.seeds button:hover{border-color:var(--navy)}
.thinking{color:var(--mute);font-style:italic}

/* ---- prose ------------------------------------------------------------- */
.prose{max-width:74ch}
.prose h2{font-size:24px;font-weight:900;color:var(--navy);margin:34px 0 10px}
.prose h3{font-size:17px;font-weight:700;color:var(--ink);margin:24px 0 6px}
.prose p{margin:0 0 13px}
.prose ul{margin:0 0 14px;padding-left:20px}
.prose li{margin-bottom:6px}
.prose strong{color:var(--navy)}
.prose blockquote{margin:0 0 14px;padding:10px 16px;border-left:3px solid var(--red);background:var(--wash);color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--line);margin:28px 0}
.prose code{font-family:"IBM Plex Mono",monospace;font-size:.9em;background:var(--wash);padding:1px 5px;border-radius:3px}
/* A wide table scrolls inside its own box. The page body must never scroll
   sideways — on a phone Chrome widens the whole layout viewport to fit an
   unscrollable table, which moves every other element off the grid too. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 16px;
  border:1px solid var(--line);border-radius:6px}
.prose table{border-collapse:collapse;width:100%;min-width:560px;margin:0;font-size:13.5px}
.prose .tablewrap table th:first-child,.prose .tablewrap table td:first-child{position:sticky;left:0;background:var(--paper)}
.prose .tablewrap table th:first-child{background:var(--wash)}
.prose th,.prose td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
.prose th{background:var(--wash);font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}

/* ---- video ------------------------------------------------------------- */
.player{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#06182f;margin:22px 0 10px}
.player video{display:block;width:100%;height:auto}
.chapters{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:16px 0}
.chapters button{text-align:left;font:inherit;cursor:pointer;border:1px solid var(--line);border-radius:6px;
  background:#fff;padding:11px 13px;color:inherit}
.chapters button:hover{border-color:var(--navy)}
.chapters .t{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--red);font-weight:600}
.chapters .h{font-weight:700;color:var(--navy);margin-top:3px;font-size:14px}