* { box-sizing:border-box; }
  html, body { margin:0; padding:0; }
  body { background:#070608; color:#F3F0ED; font-family:'Space Grotesk',sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  ::selection { background:#DC1F26; color:#fff; }
  /* Hide the native cursor ONLY when the JS custom cursor is active (html.bp-cc).
     If JS fails to run, the normal cursor stays visible. */
  html.bp-cc, html.bp-cc body { cursor:none; }
  @media (pointer:fine){ html.bp-cc a, html.bp-cc button, html.bp-cc .bp-cursorable { cursor:none; } }
  html { scrollbar-color:#DC1F26 #0b090d; scrollbar-width:thin; }
  ::-webkit-scrollbar { width:11px; height:11px; }
  ::-webkit-scrollbar-track { background:#0b090d; }
  ::-webkit-scrollbar-thumb { background:linear-gradient(#FF2D38,#7a1016); border-radius:10px; border:2px solid #0b090d; }
  ::-webkit-scrollbar-thumb:hover { background:#FF2D38; }
  @keyframes bpBlink { 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
  @keyframes bpMarqCss { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
  @keyframes bpCue { 0%{ transform:translateY(0); opacity:.9;} 70%{ transform:translateY(12px); opacity:0;} 100%{ opacity:0;} }
  .bp-grain::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:9990; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  .bp-flip { position:relative; display:inline-block; vertical-align:bottom; }
  .bp-flip .bp-fc { position:relative; display:inline-block; overflow:hidden; line-height:1; vertical-align:bottom; will-change:transform; transition:transform .42s cubic-bezier(.6,0,.2,1); }
  .bp-flip .bp-fc > span { display:block; }
  .bp-flip .bp-fc .bp-fc-b { position:absolute; left:0; top:100%; }

/* ---- standalone hover / focus states (ported from DC pseudo-attrs) ---- */
.bp-cta:hover { background:rgba(220,31,38,.18) !important; }
.bp-ghost:hover { border-color:rgba(255,255,255,.55) !important; }
.bp-in:focus { border-bottom-color:#DC1F26 !important; }
.bp-btn-fill:hover { background:#FF2D38 !important; }
.bp-card-hover { transition:border-color .35s ease, transform .35s ease, background .35s ease; }
.bp-card-hover:hover { border-color:rgba(220,31,38,.45) !important; transform:translateY(-4px); }

/* ---- "who we are" belief rows (right column) ---- */
.bp-belief { transition:background .35s ease; }
.bp-belief::before { content:""; position:absolute; left:0; top:-1px; bottom:-1px; width:0; background:#DC1F26; transition:width .35s cubic-bezier(.4,0,.2,1); }
.bp-belief:hover { background:rgba(220,31,38,.06); }
.bp-belief:hover::before { width:2px; }
.bp-belief-num, .bp-belief-txt { transition:color .35s ease, transform .35s ease; }
.bp-belief:hover .bp-belief-num { color:#FF2D38; transform:translateY(-1px); }
.bp-belief:hover .bp-belief-txt { transform:translateX(8px); }
.bp-belief-arrow { opacity:0; transform:translateX(-10px); transition:opacity .35s ease, transform .35s ease; }
.bp-belief:hover .bp-belief-arrow { opacity:1; transform:translateX(0); }
/* word-rise mask for the "We think like attackers…" line (animated on scroll) */
.bp-rw { display:inline-block; overflow:hidden; vertical-align:top; }
.bp-rw-i { display:inline-block; will-change:transform; }

/* Loader: keep the terminal panel ABOVE the curtain so the hacker-terminal is
   actually visible while it plays. The curtain only sweeps up at the very end. */
.bp-loader-inner { z-index:2; }
.bp-curtain { z-index:1; }
/* The terminal loader is for the home page only. Hide it before first paint on
   every other page (services/work/about/contact) so there's no flash. */
body:not([data-page="home"]) .bp-loader { display:none !important; }

/* ---- glitch / scanline page transition ---- */
.bp-glitch { position:fixed; inset:0; z-index:10050; opacity:0; pointer-events:none; overflow:hidden; transition:opacity .12s linear; }
.bp-glitch.bp-on { opacity:1; pointer-events:auto; }
.bp-glitch-base { position:absolute; inset:0; background:#070608; }
.bp-glitch-scan { position:absolute; inset:0; opacity:.55; background:repeating-linear-gradient(rgba(255,255,255,.07) 0 1px, transparent 1px 3px); mix-blend-mode:overlay; }
.bp-glitch.bp-on .bp-glitch-scan { animation:bpScanRoll .16s steps(3,end) infinite; }
.bp-glitch-mark { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(30px,8vw,86px); letter-spacing:-.04em; color:#F3F0ED; }
.bp-glitch.bp-on .bp-glitch-mark { animation:bpGlitchShake .22s steps(2,end) infinite; }
.bp-glitch-mark span { position:relative; display:inline-block; }
.bp-glitch-mark span::before, .bp-glitch-mark span::after { content:attr(data-t); position:absolute; top:0; left:0; width:100%; }
.bp-glitch.bp-on .bp-glitch-mark span::before { color:#DC1F26; transform:translateX(2px); animation:bpGlitchR .3s steps(2,end) infinite; }
.bp-glitch.bp-on .bp-glitch-mark span::after { color:#00e6ff; transform:translateX(-2px); animation:bpGlitchC .3s steps(2,end) infinite; }
@keyframes bpScanRoll { to { background-position:0 6px; } }
@keyframes bpGlitchShake { 0%{transform:translate(0,0)} 20%{transform:translate(-3px,1px)} 40%{transform:translate(3px,-2px)} 60%{transform:translate(-2px,2px)} 80%{transform:translate(2px,-1px)} }
@keyframes bpGlitchR { 0%{clip-path:inset(8% 0 62% 0); transform:translate(-4px,0)} 50%{clip-path:inset(48% 0 24% 0); transform:translate(5px,0)} 100%{clip-path:inset(78% 0 6% 0); transform:translate(-3px,0)} }
@keyframes bpGlitchC { 0%{clip-path:inset(72% 0 8% 0); transform:translate(4px,0)} 50%{clip-path:inset(22% 0 54% 0); transform:translate(-5px,0)} 100%{clip-path:inset(4% 0 80% 0); transform:translate(3px,0)} }

/* ---- automated quotation / instant estimate ---- */
.bp-qopt { font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:500; color:#cfcacc; background:transparent; border:1px solid rgba(255,255,255,.16); border-radius:100px; padding:11px 18px; cursor:pointer; transition:border-color .3s ease, background .3s ease, color .3s ease; }
.bp-qopt:hover { border-color:rgba(220,31,38,.55); color:#F3F0ED; }
.bp-qopt.bp-qopt-on { background:#DC1F26; border-color:#DC1F26; color:#fff; }
.bp-qadds { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.bp-qadd { display:flex; align-items:center; gap:11px; width:100%; text-align:left; font-family:'Space Grotesk',sans-serif; font-size:14px; color:#cfcacc; background:transparent; border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:13px 15px; cursor:pointer; transition:border-color .3s ease, color .3s ease; }
.bp-qadd:hover { border-color:rgba(220,31,38,.55); }
.bp-qadd.bp-qopt-on { border-color:#DC1F26; color:#F3F0ED; }
.bp-qcheck { width:18px; height:18px; border-radius:6px; border:1px solid rgba(255,255,255,.28); display:inline-flex; align-items:center; justify-content:center; font-size:11px; line-height:1; color:transparent; transition:background .25s ease, border-color .25s ease, color .25s ease; flex:0 0 auto; }
.bp-qadd.bp-qopt-on .bp-qcheck { background:#DC1F26; border-color:#DC1F26; color:#fff; }
@media (max-width:560px){ .bp-qadds { grid-template-columns:1fr; } }

/* ====================================================================
   Shared chrome — injected once by script.js (_injectChrome).
   Kept here (not inline) so all pages share one source of truth.
   ==================================================================== */
.bp-progress { position:fixed; top:0; left:0; height:2px; width:0%; background:#DC1F26; z-index:9999; box-shadow:0 0 12px rgba(220,31,38,.8); }
.bp-backlight { position:fixed; inset:0; pointer-events:none; z-index:44; mix-blend-mode:screen; overflow:hidden; }
.bp-backlight-blob { position:absolute; top:0; left:0; width:780px; height:780px; margin:-390px 0 0 -390px; border-radius:50%; background:radial-gradient(circle, rgba(220,31,38,.20) 0%, rgba(220,31,38,.08) 36%, transparent 66%); filter:blur(28px); transform:translate(-300px,-300px); will-change:transform; }

/* Custom cursor: the ring follows the mouse smoothly; the red dot is the
   precise pointer and is offset so it sits just OUTSIDE the ring (top-left). */
.bp-cur-ring { position:fixed; top:0; left:0; width:40px; height:40px; border:1.5px solid rgba(243,240,237,.55); border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:9997; mix-blend-mode:difference; transition:width .28s ease, height .28s ease, background .28s ease, opacity .2s ease, border-color .28s ease; }
.bp-cur-dot { position:fixed; top:0; left:0; width:7px; height:7px; background:#DC1F26; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:9999; box-shadow:0 0 10px rgba(220,31,38,.9); transition:opacity .2s ease; }
.bp-cur-label { position:fixed; top:0; left:0; padding:7px 14px; background:#DC1F26; color:#fff; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; border-radius:100px; transform:translate(-50%,-50%) scale(0); transform-origin:center; pointer-events:none; z-index:9998; white-space:nowrap; transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.bp-preview { position:fixed; top:0; left:0; width:240px; height:160px; border-radius:8px; overflow:hidden; pointer-events:none; z-index:60; opacity:0; transform:translate(-50%,-50%) scale(.82); transition:opacity .35s ease, transform .35s ease; background:#141117; border:1px solid rgba(255,255,255,.12); }

/* ---- nav + active state ---- */
.bp-navlinks { display:flex; align-items:center; gap:8px; font-family:'Space Grotesk',sans-serif; font-size:14px; }
.bp-nav a.bp-active { color:#fff !important; }
.bp-nav .bp-navlinks a.bp-active::after { content:""; position:absolute; left:16px; right:16px; bottom:1px; height:1.5px; background:#DC1F26; border-radius:2px; }

/* ---- mobile menu ---- */
.bp-burger { display:none; width:44px; height:44px; align-items:center; justify-content:center; flex-direction:column; gap:6px; background:transparent; border:1px solid rgba(255,255,255,.16); border-radius:10px; padding:0; }
.bp-burger span { display:block; width:18px; height:1.5px; background:#F3F0ED; transition:transform .3s ease, opacity .3s ease; }
body.bp-menu-open .bp-burger span:nth-child(1) { transform:translateY(4px) rotate(45deg); }
body.bp-menu-open .bp-burger span:nth-child(2) { transform:translateY(-4px) rotate(-45deg); }
.bp-mobilemenu { position:fixed; inset:0; z-index:48; background:#08070a; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; opacity:0; pointer-events:none; transform:translateY(-12px); transition:opacity .4s ease, transform .4s ease; }
body.bp-menu-open .bp-mobilemenu { opacity:1; pointer-events:auto; transform:translateY(0); }
.bp-mobilemenu a { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(30px,9vw,46px); color:#F3F0ED; text-decoration:none; letter-spacing:-.02em; padding:6px 0; transition:color .25s ease; }
.bp-mobilemenu a:hover { color:#DC1F26; }
@media (max-width:860px){
  .bp-navlinks { display:none; }
  .bp-burger { display:flex; }
  .bp-nav { padding:16px 22px !important; }
}

/* ---- inner-page content helpers ---- */
.bp-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:70px; }
.bp-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.bp-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.bp-workgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:30px; }
@media (max-width:860px){
  .bp-grid-2 { grid-template-columns:1fr; gap:44px; }
  .bp-grid-3, .bp-grid-4 { grid-template-columns:1fr 1fr; }
  .bp-workgrid { grid-template-columns:1fr; gap:24px; }
  .bp-svc-row { grid-template-columns:1fr !important; }
}
@media (max-width:560px){
  .bp-grid-3, .bp-grid-4 { grid-template-columns:1fr; }
  section { padding-left:22px !important; padding-right:22px !important; }
}
