.toplink:hover{
   color: #fff;
   background-color: rgba(228, 235, 239, 0.119);
   text-decoration: underline;
   backdrop-filter: blur(3px);
}
.webbanner {
   position: relative;
   background-image: 
   linear-gradient(to bottom, #101011ed 10%, #15161b06 50%),
   linear-gradient(to top, #10101178 4%, #15161b08 20%);
   background-size: cover;
   background-position: center;
   height: 97vh;
   overflow: hidden;
}


.navbar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   width: auto;
   height: 74px;

   display: flex;
   justify-content: flex-end;
   align-items: center;
   padding: 0 2vw;

   z-index: 1300;
   background-color: transparent;
   transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}

/* State when the user scrolls past hero threshold */
.navbar.scrolled {
   background-color: rgba(19, 19, 20, 0.922); /* Matches --darkest-bg with opacity */
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-bottom: 1px solid rgba(203, 203, 203, 0.1);
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.trenchanttitle{
   display: flex;
   align-items: center;
   justify-content: left;
   position: absolute;


   margin: 0 auto;


   left: 1vw;
   gap: 20px;
}
.trenchantlogo{
   height:30px;
   margin-left: 10px;
   width: auto;
}
.toplink{   
   font-size: 15px;
   padding: 30px;
   height: 20px;


   text-decoration: none;
   justify-content: center;
   align-content: center;


   color: var(--text1);
   background-color: none;


transition: color 0.3s ease, background-color 0.3s ease; 
}



.webbanner::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 100%;
  
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
  


   mask-image: linear-gradient(to bottom, #000000 5%, #00000000 20%);
   -webkit-mask-image: linear-gradient(to bottom, #000 5%, #00000000 20%);
  
   pointer-events: none;
   z-index: 1;
}
.webbanner > * {
   position: relative;
   z-index: 2;
}

.lead-in{
   position: absolute;
   justify-content: center;
   border: 2px solid #bfc8cb1d;

   color: var(--text1);
   font-size: 18px;
   align-items: center;
   display: flex;
   gap: 6px;
   padding: 8px 40px;
   transition: ease-in-out 0.4s;

   border-radius: 999px;
   
   left:14vw;
   right: 14vw;
   bottom: 40px;
    background-color: #0e1e2e48;

   text-decoration: none;
   backdrop-filter: blur(4px);
      box-shadow: 1px 20px 20px 6px #19222f2f;

 opacity: 0; /* Keep hidden until GSAP animates it in */
   will-change: opacity, transform;
}
.lead-in:hover{
   color: #ffffff;
   background-color: #cddfe638;
   bottom: 0px;
   cursor: pointer;
   bottom: 34px;
   backdrop-filter: blur(9px);
   border: 2px solid #c5cfd144;
   box-shadow: 1px 20px 20px 6px #19222f47;
}


.vidbg{
   width: 100vw;
   position: absolute;
     z-index: -1;
     pointer-events: none;
     user-select: none;
}




.slide-bg-1 {
   background-image: linear-gradient(#133e83e9, #774d1754), url('HI.jpg');
   background-size: cover;
   background-position: center;
   border-top: 70px solid #13141b;
}
.slide-bg-2 {
   background-image: linear-gradient(#123771de, #67421e57), url('h2.jpg');
   background-size: cover;
   background-position: center;
}

.slide-bg-3 {
   background-image: linear-gradient(#0d3677de, #744d175f), url('HI3.jpg');
   background-size: cover;
   background-position: center;
}
.slide {
   display: flex;
   align-items: center;
   box-sizing: border-box;
   position: relative;
      text-align: center;
}



.TRACKRECORD-SEC{
   padding: 3% 0vw 1% 0vw;
   background-color:#13141b;
}
.TRACKRECORD-SEC .text-block-centered {
   width: 74%;
   margin: 0 auto;
   border-radius: 6px;
}
.BULLET-LIST{
   display: flex;
   gap: 24px;
   margin-bottom: 20px;
}
.TRACKRECORD-SEC svg{
   flex-shrink: 0;
   color: var(--accent-gold);
}
.TRACKRECORD-SEC .text-block-centered{
   background: none;
}
.TRACKRECORD-SEC .BULLET-LIST p{
   background-color: #212834db;
   border: 1px solid #3a414996;
   color: #c3cee2;
   padding: 30px 20px;
   border-radius: 10px;
   font-size: 18px;      
   line-height: 36px;
   display: flex;
   align-items: flex-start;
   text-align: left;
   gap: 12px;
   transition: all 0.4s;
}
.TRACKRECORD-SEC .BULLET-LIST p:hover{
   background-color: #252d3aeb;
}
.TRACKRECORD-SEC .BULLET-LIST p:hover svg{
   color: var(--gold-highlight);
}
.TRACKRECORD-SEC .text-block-centered p svg{
    margin-top: 4px;
    width: 30px;
    height: auto;
}
.TRACKRECORD-SEC .text-block-centered h1{
   font-size: 50px;
   margin: 10px 0;
   display: flex;
   align-items: center;
   text-align: left;

   font-size: 50px;;
   font-weight: 700;
   color: #edece2;
   gap: 14px;
}



.OURMISSION-SEC{
   padding: 6% 11% 1% 11%;
   background-color: var(--dark-bg);
}

.OURMISSION-SEC .slide-text-only {
   justify-content: left;
   width: 100vw;
   margin: 0 auto;
}

.OURMISSION-SEC .text-block-centered h1 {
   font-size: 50px;;
   font-weight: 700;
   color: #edece2;
   margin: -14px 0;
   gap: 14px;
   display: flex;
   align-items: center;
   text-align: center;
   justify-content: center;
}
.OURMISSION-SEC svg{
   display: none;
}

.OURMISSION-SEC .text-block-centered p {
   font-size: 38px;
   line-height: 60px;
   font-weight: 600;

   padding: 0 6%;
   color: #c9d3df;
   text-align: center;
}


.OURMISSION-SEC .text-block-centered {
   text-align: left;
   margin: 0 auto;
   border-radius: 6px;
   padding: 20px;
}



.slide-content {
   width: 47%;
   padding: 1% 7%;

   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: left;
   text-align: left;
   backdrop-filter: blur(5px);
   background: #1b202bc4;

   transition: all 1.3s;
}
.slide-content:hover{
   padding: 4% 7%;

   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: left;
   color: #ffffff;
   background: #181d2597;
}
.slide-content:hover a{
   background-color: #9ec0dd27;

}



.align-left {
   justify-content: flex-start;
}
.align-right {
   justify-content: flex-end;
}





.slide-content a {
   border-bottom: 6px solid var(--accent-gold);
   padding: 5px 14px;

   background-color: #86afd613;

   font-size: 40px;
   color: var(--text1);
   margin-bottom: 20px;
   margin-top: 30px;

   font-weight: 700;
   text-decoration: none;
   position: relative;
   display: inline-block;
   width: fit-content;
   
   align-items: center;
   display: flex;
   gap: 10px;
}
.slide-content a:hover{
   color: #ffffff;
   background-color: #86b0d65a;
   transition: ease-in-out 0.4s;
   border-color: var(--gold-highlight);
   backdrop-filter: blur(1px);
}



.inline-underline {
   border-bottom: 3px solid var(--accent-gold);
   display: inline;
}
.inline-underline2{
   border-bottom: 4px solid var(--flag-red);
   display: inline;
}
span{
   font-family: "Noto Sans Mono", monospace;;
   color: #ffffff;
   font-weight: 300;
}

.slide-desc {
   font-size: 19px;
   line-height: 1.8;
   margin-bottom: 30px;
   color: #c0c3c5;
}


.slide-sub {
   font-size: 1.1rem;
   color: #a2a4a8;
   z-index: -1;
}




.blueprint-section {
  position: relative;
  display: none;
  width: 100%;
  margin: 0 auto;
  height: 70vh; /* Full viewport height for testing */
  background-color: #d1ccbe; /* Warm graph paper base tone */
  background-image: url('graphpapa.jpg');
  background-size: cover;
  overflow: visible;
}

/* Background sketches (Static / Normal scroll) */
.grey-sketches {
  position: absolute;
  inset: 0;
  z-index: 4000;
}

.sketch-left {
  position: absolute;
  top: 14%;
  right: 6%;
  width: 210px;
  box-shadow: 10px 20px 40px #0000004b;
  display: none;
}

.sketch-bottom {
  position: absolute;
  bottom: -2%;
  left: 20%;
  width: 400px;
  z-index: 2000;
  box-shadow: 00px 10px 60px #0e0e0e62;
  display: none;
}

/* Typography (Middle Layer) */
.section-title {
  position: absolute;
  left: 7%;
  z-index: 2; /* Sits behind missile 3 */
  font-family: 'Google Sans Flex';
  font-size:50px;
  border-radius:14px;
  padding: 26px 54px;
  font-weight: 700;
  color: var(--flag-white);
  line-height: 1.1;
}


/* Foreground Missiles (Top Layer) */
.missile-layer {
  position: absolute;
  inset: 0;
  z-index: 9000; /* Rendered over text */
  pointer-events: none; /* Allows scrolling/clicking through transparent PNG padding */
}

.fg-missile {
  position: absolute;
  /* Green tint adjustment if your assets aren't already colored */
  filter: drop-shadow(0px 10px 30px #00000032);
}

/* Absolute positioning to match your graphic placement */
.missile-1 {
  top: 40%;
  left: 20%;
  width: 340px;
  overflow: visible;
  transform: rotate(280deg);
  display: none;

}

.missile-2 {
  bottom: 10%;
  left: 23%;
  width: 500px;
  transform: rotate(280deg)

}

.missile-3 {
  top: 2%;
  right: 12%;
  width: 500px;
  transform: rotate(280deg)

}








.field-section {
  position: relative;
  width:100%;
  height: 90vh; /* Pinned viewport height */
  overflow: hidden;
  z-index: 10;
}

.field-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.truck-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Heading Placement */
.field-title {
  position: absolute;
  bottom: 7%;
  margin: 0;
  left: 1%;
  z-index: 2;
  font-family: 'Google Sans Flex';
  font-size:100px;
  font-weight: 700;
  color: var(--flag-white);

  border-radius:6px;
  padding: 26px 54px;
  line-height: 1.1;

  will-change: transform, opacity;
}
.field-lead{
  position: absolute;
  top: 10%;
  margin: 0;
  left: 1%;
  z-index: 2;
  font-family: 'Google Sans Flex';
  font-size: 60px;
  font-weight: 700;
  color: var(--flag-white);

  border-radius:6px;
  padding: 26px 54px;
  line-height: 1.1;
}

/* Muzzle Flash Container */
.muzzle-flash {
  position: absolute;
  /* Align to the launch point on the truck */
  top: 74%;
  right: 0%;
  z-index: 2; /* Sits behind missile, in front of background */
  width: 480px;
  pointer-events: none;

  /* Force scaling from the launch point base */
  transform-origin: bottom right;
  
  /* GPU acceleration */
  will-change: transform, opacity;
  transform: translateZ(0);
}

.flash-img {
  width: 100%;
  height: auto;
  display: block;
  /* Optional: gives it a fiery bloom */
}
/* Launching Missile Cutout Assembly */
.launch-assembly {
  position: absolute;
  bottom: 16%;
  right: -5%;
  z-index: 3;
  width: 340px;
  pointer-events: none;
  z-index: 999;
  transform: translate(15%);

  /* --- Performance Optimizations --- */
  will-change: transform; /* Pre-allocates GPU resources for smooth transforms */
  transform: translateZ(0); /* Forces GPU compositing layer */
  backface-visibility: hidden;
  filter: drop-shadow(0px 200px 90px  #fff9ee);

  transform: rotate(-37deg); 
  transform-origin: bottom center;

}

.launch-missile-img {
  width: 100%;
  height: auto;
  /* Rotate slightly to match the launch angle of the truck launcher */
  transform-origin: bottom center;
}