:root{
  --cyan:#3bb8e8;
  --blue:#0a468c;
  --navy:#171d34;
  --navy2:#1a2240;
  --muted:#d3d3d3;
  --max:1440px;
  --content:1220px;
}
*{box-sizing:border-box}
html{background:#000;scroll-behavior:smooth}
body{
  margin:0;
  background:#000;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.55;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap,.bar{width:min(var(--content),calc(100% - 2rem));margin:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:#fff;color:#000;padding:.6rem;z-index:50}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

.site-header{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(0,0,0,.75);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:none;
}
.bar{
  min-height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}
.logo img{width:250px;max-height:60px;object-fit:contain}
nav ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:.5rem 1.2rem;
  list-style:none;
  margin:0;
  padding:0;
}
nav a{
  text-decoration:none;
  font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
  font-size:17px;
  font-weight:700;
  letter-spacing:.6px;
}
nav a:hover,nav a:focus{color:var(--cyan)}

/* Production Elementor homepage background:
   fixed USA-at-night image with 125% -> 100% -> 125% zoom over 90s. */
.hero{
  min-height:calc(100vh - 86px);
  height:auto;
  display:grid;
  place-items:center;
  overflow:hidden;
  text-align:center;
  background-image:url("/assets/images/usa_night_2-1.png");
  background-position:top center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:125% auto;
  animation:background-zoom 90s linear infinite alternate;
}
.hero-in{
  width:min(var(--max),calc(100% - 2rem));
  min-height:calc(100vh - 86px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0 0 2.5rem;
}
.hero-logo{
  width:35%;
  max-width:620px;
  height:331px;
  object-fit:contain;
  margin:50px auto 0;
  filter:drop-shadow(0 0 12px rgba(0,0,0,.55));
}
.hero-lines{
  position:relative;
  width:100%;
  min-height:105px;
  margin:15px 0 0;
}
.animated-text{
  position:absolute;
  left:0;
  right:0;
  width:60%;
  min-width:60%;
  margin:0 auto;
  padding:0;
  opacity:0;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  font-size:32px;
  line-height:1.25;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  filter:drop-shadow(3px 3px 1px #000);
}
.animated-text:nth-child(1){animation:fade-in-and-fade-out 30s 0s infinite ease-in}
.animated-text:nth-child(2){animation:fade-in-and-fade-out 30s 10s infinite linear}
.animated-text:nth-child(3){animation:fade-in-and-fade-out 30s 20s infinite linear}

.glow-yellow{
  opacity:0;
  animation:glow-yellow 28s 1s infinite linear;
}
.glow-red{
  opacity:0;
  animation:glow-red 28s 11s infinite linear;
}
.hero-button{
  margin-top:50px;
}
.btn{
  display:inline-block;
  padding:18px 40px;
  color:#fff;
  background:linear-gradient(158deg,var(--cyan) -10%,var(--blue) 100%);
  border:0;
  text-decoration:none;
  font-size:16px;
  font-weight:600;
  letter-spacing:2px;
}
.btn:hover,.btn:focus{
  background:var(--cyan);
  color:#fff;
}

/* Shared source-derived heading treatment. */
.section{position:relative;padding:5rem 0}
.section-kicker{
  margin:0 0 1rem;
  color:var(--cyan);
  font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
  font-size:25px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:2px;
  -webkit-text-stroke:1px var(--cyan);
  text-shadow:1px 2px 20px rgba(255,255,0,.45);
}
.centered{text-align:center}
.centered-text{text-align:center}
.reveal{animation:fade-in-up .85s ease both}

.about{background:var(--navy)}
.about-grid{
  display:grid;
  grid-template-columns:50% 50%;
  gap:0;
  align-items:stretch;
  width:min(var(--max),100%);
}
.about-grid>div:first-child{
  min-height:660px;
  display:grid;
  place-items:center;
  background:
    url("/assets/images/shape-2.png") center/contain no-repeat,
    #6ec1e4;
  overflow:hidden;
}
.about-grid>div:last-child{
  padding:4.5rem clamp(2rem,5vw,5rem);
  background:rgba(0,0,0,.68);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.about-img{
  width:min(570px,92%);
  margin:auto;
  border-radius:50%;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.4));
}
.about-title{
  margin:.2rem 0 1rem;
  color:#fff;
  font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
  font-size:48px;
  line-height:59px;
  font-weight:600;
  letter-spacing:1px;
}
.about-title span{color:#00ccff}
.about p{color:var(--muted)}
.twocol{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-top:1.6rem;
}
.twocol article{padding:0 .4rem;background:transparent;border:0}
.twocol h3{
  margin:0 0 .15rem;
  color:#fff;
  font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
  font-size:24px;
  letter-spacing:.6px;
}
.twocol p{font-size:16px;line-height:27px;letter-spacing:.6px}

/* Production service section uses #1A2240, four visible cards and a snow particle effect.
   The original particles were JavaScript; this is a CSS-only visual equivalent. */
.services{
  min-height:100vh;
  overflow:hidden;
  background:#1a2240;
}
.services::before,
.services::after{
  content:"";
  position:absolute;
  inset:-20% 0 0;
  pointer-events:none;
  opacity:.45;
  background-image:
    radial-gradient(circle,#fff 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(255,255,255,.7) 0 1px,transparent 1.5px);
  background-size:54px 54px,83px 83px;
  background-position:0 0,24px 18px;
  animation:snow-fall 24s linear infinite;
}
.services::after{
  opacity:.2;
  background-size:101px 101px,137px 137px;
  animation-duration:38s;
  animation-direction:reverse;
}
.services .wrap{position:relative;z-index:1;padding-top:1.5rem}
.intro{
  max-width:1180px;
  margin:-.25rem auto 2rem;
  color:var(--muted);
  font-size:18px;
  line-height:30px;
  letter-spacing:.6px;
}
.cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:19px;
  margin-top:2rem;
}
.card{
  min-height:405px;
  padding:12px;
  text-align:center;
  background:#171d34;
  border:1px solid rgba(255,255,255,.16);
  border-radius:3px;
}
.card img{
  width:140px;
  height:140px;
  object-fit:contain;
  margin:0 auto 15px;
}
.card h3{
  min-height:3.2em;
  margin:.4rem 0 .75rem;
  color:#fff;
  font-size:20px;
  line-height:1.25;
}
.card p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.55;
}

/* Production partner section is a one-row logo carousel.
   Static HTML/CSS displays the same logos in a single row without JS. */
.partners{
  min-height:100vh;
  display:grid;
  align-items:center;
  background:#0a468c;
}
.partners-title{
  margin:-14px 0 1.2rem;
  color:#fff;
  text-align:center;
  font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
  font-size:48px;
  line-height:59px;
  font-weight:700;
  letter-spacing:1px;
}
.partner-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
  margin-top:2rem;
}
.partner{
  height:196px;
  padding:1rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  text-decoration:none;
  background:transparent;
  border:1px solid rgba(59,184,232,.39);
}
.partner img{
  width:min(100%,300px);
  max-height:115px;
  object-fit:contain;
}
.partner span{font-size:14px;font-weight:700}

/* Contact structure follows the Elementor source: graphic first, form left, contact details right. */
.contact{
  min-height:100vh;
  background:
    linear-gradient(rgba(10,70,140,.97),rgba(10,70,140,.97)),
    url("/assets/images/testimonials-bg-1.jpg") center/cover no-repeat;
}
.contact-banner{
  width:98%;
  max-width:1100px;
  margin:0 auto 2rem;
  padding:0 clamp(0px,8vw,200px);
}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:stretch;
}
.contact-form-panel{
  padding:2rem;
  background:#000;
}
.contact-info{
  padding:2rem 3rem;
}
.contact-info h2{
  margin:10px 0 .75rem;
  color:#44c7f4;
  font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
  font-size:24px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1px;
}
.social{margin:.3rem 0 1.2rem}
.social a{
  display:inline-block;
  margin-right:.55rem;
  padding:.45rem .7rem;
  border:1px solid rgba(255,255,255,.41);
  border-radius:50px;
  text-decoration:none;
  font-size:14px;
}
.social a:hover,.social a:focus{
  border-color:#44c7f4;
  background:#44c7f4;
}
.contact-list{list-style:none;padding:0;margin:1.1rem 0}
.contact-list li{
  margin:.8rem 0;
  color:#d3d3d3;
  font-size:17px;
  letter-spacing:.6px;
}
form{display:grid;gap:10px}
label{color:#fff;font-weight:600}
input,textarea{
  width:100%;
  padding:.8rem;
  color:#fff;
  background:#000;
  border:4px solid #fff;
  border-radius:10px;
  font:inherit;
}
textarea{min-height:180px;resize:vertical}
button{
  justify-self:start;
  padding:.8rem 1.2rem;
  color:#fff;
  background:#3bb8e8;
  border:0;
  font:700 20px/1 Arial,Helvetica,sans-serif;
}
.note{color:var(--muted);font-size:.85rem}
footer{
  padding:1.2rem 0;
  background:#06182b;
  color:var(--muted);
  text-align:center;
}

@keyframes background-zoom{
  0%{background-size:125% auto}
  50%{background-size:100% auto}
  100%{background-size:125% auto}
}
@keyframes fade-in-and-fade-out{
  0%{opacity:0}
  15%{opacity:1}
  31%{opacity:1}
  33%{opacity:0}
  100%{opacity:0}
}
@keyframes glow-yellow{
  0%{opacity:0}
  25%{
    opacity:1;
    color:#ffff00;
    text-shadow:
      0 0 5px #ffff00,
      0 0 10px #ffff00,
      0 0 20px #ffff00,
      0 0 40px #00ffff,
      0 0 80px #00ffff,
      0 0 90px #00ffff,
      0 0 100px #0000ff,
      0 0 150px #0000ff;
  }
  75%,100%{opacity:1;color:#ffff00}
}
@keyframes glow-red{
  0%{opacity:0}
  25%{
    opacity:1;
    color:#ff0000;
    text-shadow:
      0 0 5px #ffff00,
      0 0 10px #ffff00,
      0 0 20px #ffff00,
      0 0 40px #00ffff,
      0 0 80px #00ffff,
      0 0 90px #00ffff,
      0 0 100px #0000ff,
      0 0 150px #0000ff;
  }
  75%,100%{opacity:1;color:#ff0000}
}
@keyframes fade-in-up{
  from{opacity:0;transform:translate3d(0,30px,0)}
  to{opacity:1;transform:none}
}
@keyframes snow-fall{
  from{transform:translateY(-8%)}
  to{transform:translateY(18%)}
}


@supports (animation-timeline:view()){
  .reveal{
    animation-name:fade-in-up;
    animation-duration:1ms;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:view();
    animation-range:entry 0% cover 28%;
  }
}

/* Respect users who request reduced motion while keeping the same static appearance. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero,.animated-text,.glow-yellow,.glow-red,.reveal,.services::before,.services::after{
    animation:none!important;
  }
  .animated-text{position:static;opacity:1;margin:.4rem auto}
  .hero-lines{min-height:auto}
  .glow-yellow{opacity:1;color:#ffff00}
  .glow-red{opacity:1;color:#ff0000}
}

@media(max-width:1100px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .partner-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .about-title{font-size:40px;line-height:1.2}
}
@media(max-width:900px){
  .bar{align-items:flex-start;flex-direction:column;padding:1rem 0}
  nav ul{justify-content:flex-start}
  .hero{min-height:650px;background-attachment:scroll}
  .hero-in{min-height:650px}
  .hero-logo{width:50%;height:250px;margin-top:20px}
  .animated-text{width:88%;min-width:88%}
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .about-grid>div:first-child{min-height:480px}
  .partners{min-height:auto}
}
@media(max-width:600px){
  nav ul{display:block}
  nav li{margin:.5rem 0}
  .hero{min-height:420px;background-size:auto 100%;animation:none}
  .hero-in{min-height:420px;padding-bottom:1rem}
  .hero-logo{width:59%;height:190px;margin-top:16px}
  .hero-lines{min-height:78px}
  .animated-text{width:94%;min-width:94%;font-size:22px}
  .hero-button{margin-top:26px}
  .section{padding:4rem 0}
  .section-kicker{font-size:18px}
  .about-title{font-size:32px;line-height:1.25}
  .cards,.partner-grid,.twocol{grid-template-columns:1fr}
  .contact-info,.contact-form-panel{padding:1.4rem}
}