:root{
  --bg:#0a0a0a; --panel:#121212; --muted:#a3a3a3;
  --text:#f5f5f5; --text-2:#d4d4d4; --line:#262626;
  --brand:#fbbf24; --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:16px; --radius-lg:20px; --container:72rem;
  --recon-clr:#e61313; --tactical-clr:#FFFFFF; --patriot-clr:#0D05F5; 
  --additional-clr:#79117d; --price-clr:#439a09;
  --blackops-fill: #000; --blackops-stroke: #fff; --blackops-stroke-w: 1px;  /* make 3px for a thicker outline */
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--container);margin-inline:auto;padding:0 1rem}
.section{padding:4rem 0}

                          /* Header */
/* --- Hamburger base --- */
.hamburger {
  -webkit-tap-highlight-color: transparent;
  background: transparent;
  border: 1px solid var(--line, #262626);
  border-radius: 12px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text, #f5f5f5); cursor: pointer;
}

/* Icon lines */
.hamburger-box { position: relative; width: 20px; height: 14px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .2s ease;
}
.hamburger-inner { top: 50%; transform: translateY(-50%); }
.hamburger-inner::before { top: -6px; }
.hamburger-inner::after  { top:  6px; }

/* Animate to “X” when open */
.hamburger[aria-expanded="true"] .hamburger-inner { transform: rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger-inner::before { transform: translateY(6px) rotate(90deg); }
.hamburger[aria-expanded="true"] .hamburger-inner::after  { transform: translateY(-6px) rotate(90deg); opacity: 0; }

/* Mobile menu panel */
@media (max-width: 767.98px){
  .hamburger { display: inline-flex; }
  .menu{
    position: absolute; top: 80px; left: 0; right: 0;
    display: none; flex-direction: column; gap: .75rem;
    background: rgba(10,10,10,.97);
    border-bottom: 1px solid var(--line, #262626);
    padding: .75rem 1rem; z-index: 50;
  }
  .menu.is-open { display: flex; }
  .menu a{ padding: .5rem 0; }
  body.no-scroll { overflow: hidden; }
}

/* Desktop keeps your old layout */
@media (min-width: 768px){
  .hamburger { display: none; }
  .menu { display: flex; gap: 1.25rem; position: static; padding: 0; background: transparent; border: 0; }
}

.header{position:sticky;top:0;z-index:40;background:rgba(10,10,10,.7);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px}
.brand{display:flex;align-items:center;gap:.75rem}
.brand-logo{height:56px;width:auto;border-radius:8px}
.brand-title{font-weight:800;letter-spacing:.2px}
.brand-sub{font-size:.72rem;color:var(--muted)}
.menu{display:none;gap:1.25rem;font-size:.95rem}
.btn-pill{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(251,191,36,.35);background:rgba(251,191,36,.08);color:#fcd34d;padding:.5rem 1rem;border-radius:999px}

                        /* Hero */
.hero.hero {display: flex;align-items: center;justify-content:space-between;gap: 2rem;padding: 2rem 1rem;max-width: 1100px;margin: 0 auto;flex-wrap: wrap;}
.hero-content {flex: 1;min-width: 280px;}
.hero-image {flex: 1;max-width: 350px;min-width: 220px;width: 100%;border-radius: 12px;box-shadow: 0 4px 18px rgba(0,0,0,0.08);object-fit: cover;}
.hero-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;padding:5rem 0}
.hero h1{font-weight:900;line-height:1.1;font-size:clamp(2.25rem,4vw+1rem,3.75rem)}
.hero p{color:var(--text-2);font-size:1.1rem;margin:1rem 0 1.25rem}
.cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.9rem 1.15rem;border-radius:12px;font-weight:700;border:1px solid var(--line);cursor:pointer}
.btn-primary{background:var(--brand);color:#111;border-color:transparent}
.btn-outline{background:transparent;color:var(--text);border-color:#3f3f3f}
.badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;color:var(--muted);font-size:.9rem}
.trust-badges img {filter: drop-shadow(0 2px 8px rgba(0,0,0,0.08));background: #fff;border-radius: 8px;padding: 6px 12px;}
/* HERO — badge row spacing + pill styling */
/* HERO badges — lock chip + label alignment and spacing */
.hero .badges{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .75rem;
  list-style:none;
  padding:0;
  margin:.75rem 0 0;
}

/* Make each badge a single inline row and center vertically */
.hero .badges > li{
  display:inline-flex !important;  /* force this layout */
  align-items:center;               /* centers chip vs. text line */
  gap:.55rem;                       /* consistent space between chip and text */
  padding:0; border:0; background:transparent;
  line-height:1.2;                  /* stable line height for label */
}

/* The chip itself — perfectly centered inside its border */
.hero .badges .chip{
  --s:1.30rem;                      /* exact chip size; tweak if needed */
  width:var(--s);
  height:var(--s);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #3f3f3f;
  border-radius:.45rem;             /* slight rounding (use 50% for circle) */
  background:#171717;
  color:var(--text-2,#d4d4d4);
  font:700 .72rem/1 ui-monospace,Menlo,Consolas,monospace;
  margin:0;                         /* kill any inherited offsets */
  transform:none;                   /* kill previous nudges */
}

/* If you still see a tiny optical shift, use ONE of these micro-nudges: */
/* .hero .badges .chip{ transform: translateY(-0.5px); }  */  /* nudge up 0.5px */
/* .hero .badges .chip{ transform: translateY( 0.5px); }  */  /* nudge down 0.5px */


/* Fallback for older browsers w/o gap support */
@supports not (gap: 1rem){
  .hero .badges > li{ margin:0 .75rem .5rem 0; }
}
/* Older browsers that don’t support flex gap */
@supports not (gap: 1rem){
  .hero .badges > li{ margin: 0 .75rem .5rem 0; }
}

.chip{display:inline-block;padding:.2rem .5rem;border-radius:8px;background:#171717;border:1px solid #3f3f3f;font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--text-2);font-size:.75rem}
/* ==== Framed hero image (circle/oval) ==== */

/* Base: framed container draws the ring; image inherits the shape */
.hero-figure.framed{
  --ring1: #fbbf24;      /* brand yellow */
  --ring2: #fde68a;      /* lighter yellow for a soft gradient */
  --pad: 8px;            /* ring thickness */
  display: inline-block;
  padding: var(--pad);
  background: radial-gradient(circle at 30% 30%, var(--ring2), var(--ring1) 65%);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  overflow: hidden;      /* clip the image to the frame shape */
  border: 1px solid #3f3f3f; /* subtle outer edge */
}

/* Image fills the framed container and inherits the curve */
.hero .hero-figure .hero-photo{ 
  border:6px solid var(--brand,#fbbf24); 
  border-radius:999px 
}


/* Choose ONE shape by class on the container */

/* Circle: perfect round avatar */
.hero-figure.framed.circle{
  width: min(45vw, 420px);
  aspect-ratio: 1 / 1;
  border-radius: 999px;   /* circle */
}

/* Oval: elegant portrait oval (tweak ratio or radii to taste) */
.hero-figure.framed.oval{
  width: min(45vw, 420px);
  aspect-ratio: 4 / 5;           /* portrait shape */
  border-radius: 50% / 42%;      /* oval curve */
}

/* Responsive visibility — show on tablet+; still allow on mobile if desired */
.hero-figure{ display:none; }
@media (min-width:768px){
  .hero-figure{ display:block; align-self:center; }
}

/* Right-side hero image */
.hero-figure{display:none}
/* Circle crop + gold ring */
.hero-photo{
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;        /* keep it square */
  object-fit: cover;          /* crop instead of squish */
  object-position: center;
  border-radius: 999px;       /* circle */
  border: 6px solid var(--brand, #fbbf24);
  outline: 3px solid rgba(255,255,255,.18);
  outline-offset: 3px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  background: #111;           /* nice placeholder while loading */
}
/* Optional: show on mobile too (uncomment if you want it visible on phones) */
@media (max-width:767.98px){
  .hero-figure{ display:block; margin-top:1.25rem; }
}

@media(min-width:768px){
  .hero-grid{grid-template-columns:1.1fr .9fr;align-items:center}
  .hero-figure{display:block;align-self:center}
}

                      /* Trust */
.trust{border-bottom:1px solid var(--line)}
.trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;padding:1rem 0}
.trust-card{border:1px solid var(--line);background:#111; padding:12px 14px;border-radius:14px}
.trust-card .t{font-weight:600}
.trust-card .d{color:var(--muted);margin-top:2px;font-size:.92rem}

                    /* Section header */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}
.section h2{font-size:1.75rem}
.section .cta-text{font-size:.9rem;color:#fcd34d}

                    /* Cards / grids */
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{border:1px solid var(--line);background:rgba(23,23,23,.7);border-radius:var(--radius);padding:1.25rem}
.title{font-weight:700}

                    /* Services */
.list{margin:.5rem 0 0;padding-left:1.1rem;color:var(--text-2)}
.list li{margin:.25rem 0}

                                /* Pricing */
/* Title colors */
#pricing [data-tier="recon"] .price-top h3    { color: var(--recon-clr); }
#pricing [data-tier="tactical"] .price-top h3 { color: var(--tactical-clr); }
#pricing [data-tier="patriot"] .price-top h3  { color: var(--patriot-clr); } 
#pricing [data-tier="additional"] .price-top h3  { color: var(--additional-clr); }
#pricing [data-tier] .price h3  { color: var(--price-clr); }

/* (optional) match other accents on each card */
#pricing [data-tier="recon"]    { border-color: color-mix(in srgb, var(--recon-clr) 40%, transparent); }
#pricing [data-tier="tactical"] { border-color: color-mix(in srgb, var(--tactical-clr) 40%, transparent); }
#pricing [data-tier="patriot"]  { border-color: color-mix(in srgb, var(--patriot-clr) 40%, transparent); }
#pricing [data-tier="additional"]  { border-color: color-mix(in srgb, var(--additional-clr) 40%, transparent); }
#pricing [data-tier] .price     { color: var(--price-clr); } /* keep price neutral, or color it too if you like */

/* Center the Additional Services card beneath the tier grid */
#pricing .grid > .addl-card{
  grid-column: 1 / -1;               /* span the full grid width */
  justify-self: center;               /* center the card itself */
  width: min(100%, 36rem);            /* nice readable max width */
  margin-top: .5rem;                  /* a touch of extra spacing */
  text-align: center;                   /* keep content left-aligned inside */
}

/* Black Ops: black lettering with white outline */
#pricing [data-tier="blackops"] .price-top h3{
  color: var(--blackops-fill);
  -webkit-text-stroke: var(--blackops-stroke-w) var(--blackops-stroke);
  text-stroke: var(--blackops-stroke-w) var(--blackops-stroke); /* newer browsers */

  /* Fallback outline (works in all browsers) */
  text-shadow:
    1px 0   var(--blackops-stroke),
   -1px 0   var(--blackops-stroke),
    0   1px var(--blackops-stroke),
    0  -1px var(--blackops-stroke),
    1px  1px var(--blackops-stroke),
    1px -1px var(--blackops-stroke),
   -1px  1px var(--blackops-stroke),
   -1px -1px var(--blackops-stroke);
}

/* If a .featured style overrides the color, add this for extra weight */
#pricing .card.featured[data-tier="blackops"] .price-top h3{
  color: var(--blackops-fill) !important;
}

.price-card{display:flex;flex-direction:column;gap:.75rem}
.price-top{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;text-align:center;margin-bottom:.5rem}
.price-top h3{margin:0;font-size:1.5rem;front-weight:800}
.price{font-weight:900;font-size:1.75rem;margin:0}
.featured{border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.06);box-shadow:0 0 0 1px rgba(251,191,36,.2)}
.dot{display:inline-block;width:6px;height:6px;border-radius:999px;background:#fcd34d;margin-top:.45rem}
/* Base: use your dot’s gold */
.checkmark-fancy {
  display: inline-block;
  line-height: 1;
  color: #fcd34d;       /* gold */
  vertical-align: middle;
}

/* Size via font-size (change as needed) */
.checkmark-fancy { font-size: 14px; } /* default */
.checkmark-fancy.sm { font-size: 10px; }  /* near your 6px dot scale */
.checkmark-fancy.md { font-size: 14px; }
.checkmark-fancy.lg { font-size: 18px; }

/* Stroke quality */
.check-svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Weight presets — pick one */
.checkmark-fancy.thin    .check-svg { stroke-width: 1.75; } /* airy */
.checkmark-fancy.regular .check-svg { stroke-width: 2.25; } /* balanced */
.checkmark-fancy.bold    .check-svg { stroke-width: 3; }    /* strong */


.plus {
  display: inline-block;
  position: relative;
  width: 8px;
  height: 8px;
  margin-top: .35rem;
}
.plus::before,
.plus::after {
  content: "";
  position: absolute;
  background: #facc15; /* gold */
}
.plus::before {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}
.plus::after {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.price-feats-top{display:grid;gap:.5rem}
.price-feats{display:grid;gap:.5rem}
.subtext{color:var(--muted);font-size:.85rem;margin-top:.5rem}

/* Process */
/* PROCESS: grid layout */
#process .steps{
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;               /* mobile */
}
@media (min-width: 640px){
  #process .steps{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1024px){
  #process .steps{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* Remove default list numbers so only your gold badge shows */
#process ol, #process .steps { list-style: none; padding-left: 0; margin: 0; }
#process li::marker { content: ''; }

/* Card + badge polish (if you use .step and .num) */
#process .step{
  position: relative;
  border: 1px solid var(--line, #262626);
  background: rgba(23,23,23,.7);
  border-radius: 16px;
  padding: 1.25rem;
  height: 100%;                             /* equal height feel */
}
#process .step .num{
  position: absolute;
  left: 1rem;
  top: -0.75rem;
  background: var(--brand, #fbbf24);
  color: #111;
  font-weight: 800;
  border-radius: 999px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* About */
.about{display:grid;gap:1.25rem}
.about-bullets{display:grid;gap:.75rem}
.pill{border:1px solid var(--line);background:rgba(23,23,23,.7);border-radius:12px;padding:.65rem .8rem;color:var(--text-2);font-size:.95rem}

/* FAQs */
.faq{display:grid;gap:1rem}

/* Contact */
.contact{display:grid;gap:1.25rem}
.field{display:block;font-size:.95rem}
.label{color:var(--text-2);margin-bottom:.35rem}
.input{width:100%;border:1px solid #3f3f3f;background:rgba(17,17,17,.7);color:var(--text);border-radius:12px;padding:.65rem .8rem;outline:none}
.input:focus{border-color:rgba(251,191,36,.6)}
.textarea{min-height:130px;resize:vertical}

#pricing 
.grid{grid-template-columns:1fr}@media(min-width:640px){#pricing .grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){#pricing .grid{grid-template-columns:repeat(4,1fr)}}
.contact{display:grid;gap:1.25rem}
.field{display:block;font-size:.95rem}
.label{color:var(--text-2);margin-bottom:.35rem}
.input{width:100%;border:1px solid #3f3f3f;background:rgba(17,17,17,.7);color:var(--text);border-radius:12px;padding:.65rem .8rem;outline:none}
.input:focus{border-color:rgba(251,191,36,.6)}
.textarea{min-height:130px;resize:vertical}
.footer{border-top:1px solid var(--line);margin-top:3rem}
.footer-grid{display:grid;gap:1rem;padding:2rem 0;color:var(--muted);font-size:.95rem}