:root{
  --bg:#000;
  --bg-alt:#000;

  --text:#f7f9ff;
  --muted:#9aa0b2;

  --accent:#ff6b00;          /* PRIMARY ORANGE */
  --accent-soft:rgba(255,107,0,.25);
  --accent-glow:rgba(255,107,0,.45);

  --radius:16px;
}


/* =========================
   RESET + BASE
   ========================= */
*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html, body{ height:100%; }

body{
  font-family:"Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;

  background:#000;
}

/* =========================
   PERMANENT HEADER
   ========================= */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:3000;
  padding-top:6px;
  padding-bottom:6px;
}

.header-inner{
  max-width:1200px;
  margin:0 auto;
  padding:12px 10%;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.header-actions{
  display:flex;
  gap:10px;
}



/* =========================
   CONTENT BACKDROP
   ========================= */
.content-backdrop{
  position:relative;
  background:
    linear-gradient(
      rgba(0,0,0,.9),
      rgba(0,0,0,.96)
    ),
    url("assets/megamenbgimage.jpg") center top / cover no-repeat;
}

/* Optional: subtle parallax feel */
@media (min-width: 900px){
  .content-backdrop{
    background-attachment: fixed;
  }
}
@media (max-width: 700px){
  .content-backdrop{
    background-attachment: scroll;
  }
}


img{ max-width:100%; display:block; }

/* Accessibility helpers (used by cleaned HTML) */
.skip-link{
  position:absolute;
  left:-999px;
  top:12px;
  padding:.7rem 1rem;
  background:rgba(10,15,24,.92);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  z-index:5000;
  text-decoration:none;
  color:var(--text);
}
.skip-link:focus{ left:12px; }

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* =========================
   HERO
   ========================= */
.hero{
  position:relative;
  min-height:62vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 10%;
  overflow:hidden;

  background:#000;
}


.hero-content{
  position:relative;
  z-index:2;
  max-width:820px;
  margin:0 auto;
  text-align:center;
  padding-top:24px;
  padding-bottom:18px;
}

.hero-logo{ margin-bottom:16px; }

.hero-logo img{
  width: clamp(280px, 42vw, 960px);
  height: auto;
  margin: 0 auto;
}


.hero-tagline{
  color:var(--muted);
  margin:10px 0 18px;
  font-size:1rem;
}

.hero-actions{
  display:inline-flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

/* =========================
   HEADER TEXT CTAs
   ========================= */
.header-cta-group{
  display:flex;
  align-items:center;
  gap:18px;
  white-space:nowrap;
}

/* Smooth hide/show */
.header-extra{
  display:flex;
  align-items:center;
  gap:18px;
  transition: opacity .2s ease, transform .2s ease, max-width .25s ease;
  opacity:1;
  transform: translateY(0);
  max-width: 520px;
  overflow:hidden;
}

/* When scrolled: hide everything except Request a Quote */
.site-header.is-scrolled .header-extra{
  opacity:0;
  transform: translateY(-4px);
  max-width: 0;
  pointer-events:none;
}

/* Make sure Request a Quote stays clickable */
.header-quote{
  flex:0 0 auto;
}

.header-tagline{
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.72rem;
  color:rgba(247,249,255,.65);
}

/* Text-only orange button */
.btn-link{
  background:none;
  border:none;
  padding:0;
  margin:0;

  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.78rem;

  color:#ff6b00;
  cursor:pointer;
  text-decoration:none;

  transition: color .2s ease, transform .2s ease;
}

.btn-link:hover{
  color:#ff8a2a;
  transform:translateY(-1px);
}


/* =========================
   STATS BANNER
   ========================= */
.stats-banner{
  padding:2.2rem 10%;
  background:linear-gradient(
    135deg,
    rgba(255,107,0,.55),
    rgba(255,138,42,.45)
  );
}

.stats-wrap{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}

.stat{
  flex:1;
  text-align:center;
  padding:0;          /* no boxes */
  background:none;    /* remove squares */
}

.stat-num{
  font-weight:900;
  letter-spacing:-.03em;
  font-size:clamp(2.2rem, 5vw, 4rem);
  line-height:1;
  color:#000;         /* BLACK TEXT */
}

.stat-label{
  margin-top:.4rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.78rem;
  color:rgba(0,0,0,.85);  /* softer black */
}

@media (max-width: 820px){
  .stats-banner{ padding:1.6rem 8%; }
  .stats-wrap{
    flex-direction:column;
    gap:1.4rem;
  }
}

/* =========================
   BRAND BAR (full screen width)
   ========================= */
.brandbar{
  width: 100vw;
  margin-left: calc(50% - 50vw);  /* break out of centered layout */
  overflow: hidden;
  padding: 10px 0 14px;
}

/* Make the moving strip span the viewport */
.brandbar-track{
  display: flex;          /* not inline-flex */
  width: max-content;     /* expands to fit pills */
  gap: 14px;
  padding: 10px 22px;    
  white-space: nowrap;
  animation: brandScroll 22s linear infinite;
  will-change: transform;
}
 /* nice edge breathing room */
.brand-logo-pill{
  padding:8px 14px;
 
  border:none;
  color:rgba(247,249,255,.92);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.72rem;
  opacity:.5;
}

@keyframes brandScroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

/* =========================
   SECTIONS
   ========================= */
.section{
  padding:4.5rem 10%;
  max-width:1200px;
  margin:0 auto;
}

.section-header{
  text-align:center;
  margin-bottom:2.6rem;
}

.section-header h2{
  font-size:1.9rem;
  margin-bottom:.5rem;
  letter-spacing:.02em;
}

.section-header p{
  color:var(--muted);
  max-width:720px;
  margin:0 auto;
}

.gallery .section-head{
  text-align:center;
}

/* Poster grid uses your existing services-grid columns */
.services-posters .service-poster{
  grid-column: span 6;
  border-radius: 18px;
  min-height: 260px;
  background-color: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;

  /* Background poster behavior */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Default (desktop): looks cinematic, may crop a little */
.services-posters .service-poster{
  background-size: cover;
  background-position: center;
  
  aspect-ratio: 16 / 9;   /* change if your poster is more like 3/2 or 4/3 */
  min-height: auto;       /* let aspect-ratio control it */
}

/* ✅ After 980px (tablet/phone): show full poster, no cropping */
@media (max-width: 980px){
  .services-posters .service-poster{
    background-size: contain;      /* no crop */
    background-position: center;
    background-color: rgba(0,0,0,.35); /* helps “letterbox” edges */
    min-height: 220px;             /* a bit smaller */
  }
}

/* ✅ Even smaller phones: shrink more */
@media (max-width: 520px){
  .services-posters .service-poster{
    min-height: 180px;
    border-radius: 14px;
  }
}


@media (max-width: 980px){
  .services-posters .service-poster{ grid-column: span 12; }
}

/* Map your PNG posters */
.poster-net  { background-image: url("../assets/1.png"); }
.poster-pos  { background-image: url("../assets/2.png"); }
.poster-cctv { background-image: url("../assets/3.png"); }
.poster-msp  { background-image: url("../assets/4.png"); }
.poster-tel  { background-image: url("../assets/5.png"); }
.poster-pm   { background-image: url("../assets/6.png"); }


/* =========================
   SERVICES GRID
   ========================= */
.services-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:22px;
}

.service-tile{
  grid-column:span 6;
  border-radius:18px;
  padding:18px 18px 16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  
  overflow:hidden;
}

.service-media{
  width:100%;
  height:140px;
  border-radius:14px;
  overflow:hidden;
  margin-bottom:14px;
  background:rgba(255,255,255,.04);
  
  display:block;
}

.service-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.95;
}

.service-top{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:10px;
}

.service-icon{
  width:54px;
  height:54px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;

  font-weight:800;
  letter-spacing:.12em;
  font-size:.75rem;
  text-transform:uppercase;

  /* NEW LOOK */
  background: rgba(129,131,154,.06);     /* bullet gray */
  border: 1px solid rgba(255,255,255,.10);
  color: #ff8a1f;                         /* orange text */
}

.service-icon img{
  width:100%;
  height:100%;
  object-fit:cover; /* better for icons */
  opacity:.95;
  padding:10px;       /* gives breathing room */
}


.service-title h3{
  margin:0;
  font-size:1.05rem;
}

.service-sub{
  display:block;
  margin-top:2px;
  font-size:.82rem;
  color:var(--muted);
}

.service-points{
  list-style:none;
  margin:10px 0 12px;
  display:grid;
  gap:7px;
}

.service-points li{
  color:var(--muted);
  font-size:.92rem;
  padding-left:14px;
  position:relative;
}

.service-points li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:6px;
  height:6px;
  border-radius:999px;
  background: var(--accent);
  opacity:.9;
}

.service-foot{
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}

.service-tag{
  display:inline-block;
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(247,249,255,.80);
  opacity:.85;
}

/* =========================
   CAPABILITIES SCROLLER
   ========================= */
.capabilities{
  width:100%;
  padding: 0 0 clamp(26px, 3.5vw, 44px);
}

.capabilities .section-head{
  width: min(1200px, 92vw);
  margin: 0 auto 14px;
}

.cap-marquee{
  position:relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow:hidden;
  padding: 10px 0;
}

/* Soft fade edges like your gallery fades */
.cap-marquee::before,
.cap-marquee::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 64px;
  pointer-events:none;
  z-index:2;
}

.cap-marquee::before{
  left:0;
  background: linear-gradient(90deg, rgba(2,4,10,.95), rgba(2,4,10,0));
}
.cap-marquee::after{
  right:0;
  background: linear-gradient(270deg, rgba(2,4,10,.95), rgba(2,4,10,0));
}

.cap-track{
  display:flex;
  gap: 16px;
  padding: 10px 22px;
  width: max-content;
  animation: capScroll 26s linear infinite;
  will-change: transform;
}

.cap-card:hover .cap-icon{
  filter: drop-shadow(0 0 6px var(--accent-glow));
}

@keyframes capScroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); } /* because we duplicated the set */
}

.cap-card{
  flex: 0 0 auto;
  width: 210px;
  height: 140px;
  
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 14px;
}

.cap-icon{
  width:44px;
  height:44px;
  object-fit:contain;
  display:block;
}


.cap-card h3{
  margin:10px 0 0;
  font-weight:800;
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(247,249,255,.92);
}




@media (max-width: 560px){
  .cap-card{ width: 175px; height: 128px; }
}

/* End tile only visible when expanded */
.gallery-body.is-collapsed .gallery-end-tile{
  display:none;
}

/* End tile styling */
.gallery-end-tile{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18px;
  border-radius:14px;
  background: rgba(255,255,255,.04); /* bullet gray */
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 25px rgba(0,0,0,.22);
  min-height: 220px; /* match your tile height */
}

.gallery-end-tile .end-title{
  margin:0 0 8px;
  font-size:1rem;
  font-weight:900;
  letter-spacing:.04em;
}

.gallery-end-tile .end-sub{
  margin:0 0 14px;
  color:rgba(247,249,255,.70);
  font-size:.9rem;
}

.gallery-end-tile .end-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}


/* =========================
   COLLAPSIBLE GALLERY
   ========================= */
.gallery-head-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.gallery-toggle{ white-space:nowrap; }

/* Animate real height */
.gallery-body{
  overflow:hidden;
  height:auto;
  opacity:1;
  transition: height .45s ease, opacity .25s ease;
  will-change: height;
}

.gallery-body.is-collapsed{
  opacity:1; /* keep visible since 1 row still shows */
}

/* =========================
   GALLERY GRID
========================= */

.gallery {
  width: 100%;
  padding: clamp(28px, 4vw, 56px) 0;
}

.gallery .section-head {
  width: min(1200px, 92vw);
  margin: 0 auto 18px;
}

.gallery-grid {
  width: 100vw;               /* full window width */
  margin-left: calc(50% - 50vw); /* break out of centered container */
  padding: 0 clamp(14px, 2vw, 28px) clamp(14px, 2vw, 28px);

  display: grid;
  gap: clamp(10px, 1.4vw, 18px);

  /* Responsive columns */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.gallery-tile {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  box-shadow: 0 10px 25px rgba(0,0,0,0.22);
  transform: translateZ(0);
}

.gallery-tile img {
  width: 100%;
  height: 220px;           /* consistent tile height */
  object-fit: cover;
  display: block;
  transition: transform 250ms ease;
}

.gallery-tile:hover img {
  transform: scale(1.03);
}

/* Smaller viewports: smaller tiles + more dense grid */
@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }
  .gallery-tile img {
    height: 190px;
  }
}

@media (max-width: 520px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gallery-tile img {
    height: 150px;
  }
}


/* Fade edges */
.h-gallery::before,
.h-gallery::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:34px;
  pointer-events:none;
  z-index:2;
}

.h-gallery::before{
  left:0;
  background:linear-gradient(90deg, rgba(2,4,10,.95), rgba(2,4,10,0));
}

.h-gallery::after{
  right:0;
  background:linear-gradient(270deg, rgba(2,4,10,.95), rgba(2,4,10,0));
}

/* =========================
   CONTACT FLAGS
   ========================= */
.inquiry-flags{
  width: 126px;
  height: 48px;
  margin: 0 auto 16px;

  background-image: url("../assets/flags-ca-us.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

  opacity: .9;
}

@media (max-width: 520px){
  .inquiry-flags{
    width: 72px;
    height: 36px;
  }
}

.inquiry-flags{
  filter: drop-shadow(0 0 6px rgba(255,107,0,.25));
}


/* =========================
   CONTACT PANEL – SIDE BY SIDE
   ========================= */
.contact-panel-full{
  width:100%;
  padding:5rem 10%;
  background: rgba(255,255,255,.04);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.contact-inner{
  max-width:1200px;
  margin:0 auto;
}

.contact-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 32px;
  align-items:center;
}

/* Left content */
.contact-message h2{
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  line-height:1.15;
  margin-bottom:12px;
}

.contact-message .accent{
  color:#ff6b00;
}

.contact-lead{
  max-width:60ch;
  color: rgba(247,249,255,.72);
  margin-bottom:18px;
  font-size:1rem;
}

.contact-bullets{
  list-style:none;
  display:grid;
  gap:10px;
  padding:0;
  margin:0;
}

.contact-bullets li{
  position:relative;
  padding-left:22px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.78rem;
  color: rgba(247,249,255,.82);
}

.contact-bullets li::before{
  content:"";
  position:absolute;
  left:0;
  top:.45em;
  width:10px;
  height:10px;
  border-radius:999px;
  background:#ff6b00;
  box-shadow:0 0 0 2px rgba(255,107,0,.18);
}

/* Right card */
.contact-inquiry{
  padding:28px;
  text-align:center;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  box-shadow:0 18px 45px rgba(0,0,0,.45);
}

.inquiry-kicker{
  margin:0 0 8px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.72rem;
  color: rgba(247,249,255,.7);
}

.inquiry-email{
  margin:0 0 8px;
  font-weight:900;
  font-size:1.3rem;
}

.inquiry-email a{
  color:#ff6b00;
  text-decoration:none;
}

.inquiry-email a:hover{
  text-decoration:underline;
}

.hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
}


.inquiry-sub{
  margin:0 0 18px;
  font-size:.85rem;
  color: rgba(247,249,255,.62);
}

.inquiry-cta{
  width:100%;
}

/* Mobile */
@media (max-width: 820px){
  .contact-panel-full{
    padding:4rem 7%;
  }

  .contact-grid{
    grid-template-columns:1fr;
    gap:24px;
  }
}

/* =========================
   FOOTER
   ========================= */
.site-footer{
  text-align:center;
  padding:2rem 10%;
  font-size:.85rem;
  color:var(--muted);
}

/* =========================
   MODAL
   ========================= */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.62);
  z-index:999;
  padding:18px;
}

.modal.open{ display:flex; }

.modal-card{
  width:min(560px, 92vw);
  background: rgba(0,0,0,.90);     /* bullet gray */
  border: 1px solid rgba(255,255,255,.12);
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.65);
  padding:22px;
  position:relative;
  backdrop-filter: blur(8px);
}


.modal-close{
  position:absolute;
  right:12px;
  top:12px;
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  transition: background .2s ease, box-shadow .2s ease;
}

.modal-close:hover{
  background: rgba(255,255,255,.10);
  box-shadow:0 0 0 1px rgba(255,107,0,.35);
}

.modal-sub{
  color:var(--muted);
  margin-bottom:14px;
}

.modal-form{
  display:grid;
  gap:10px;
}

.modal-form label{
  display:grid;
  gap:6px;
  font-size:.9rem;
  color:rgba(247,249,255,.75);
}


.modal-form input,
.modal-form textarea{
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);     /* darker bullet gray */
  color:var(--text);
  padding:12px 14px;
  outline:none;
  transition:border .2s ease, box-shadow .2s ease;
}
.modal-form input::placeholder,
.modal-form textarea::placeholder{
  color:rgba(247,249,255,.45);
}

.modal-form input:focus,
.modal-form textarea:focus{
  border-color:#ff6b00;
  box-shadow:0 0 0 1px rgba(255,107,0,.35);
}

.row-check{
  display:flex !important;
  align-items:center;
  gap:10px;
  color:rgba(247,249,255,.7);
}

.row-check input[type="checkbox"]{
  accent-color:#ff6b00;
}

.btn-primary.full{ width:100%; }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 980px){
  .service-tile{ grid-column:span 12; }
  .contact-split{ grid-template-columns:1fr; }
  .contact-photo{ min-height:240px; }
}

@media (max-width: 720px){
  .hero{ padding:0 7%; }
  .section{ padding:4rem 7%; }
}

@media (max-width: 520px){
  .service-icon{
    width:48px;
    height:48px;
    border-radius:14px;
  }
  .service-media{ height:120px; }
}