/* styles.css */

:root {
  --dark-navy: #062A3F;
  --mid-blue: #094863;
  --mid-green: #259C7F;
  --dark-brown: #2D2823;
  --light-mid-brown: #ECE9E2;
  --mustard: #FDD501;
  --baseline: 8px;
  --max-width: 1400px;

  --h1-font-size: 4rem;
  --h1-font-size-media: 3rem;  
  --h1-font-weight: 800;
  --h1-line-height: 1.2;
  --h1-line-height-media: 1.2;

  
  --h2-font-size: 3rem;
  --h2-font-size-media: 2rem;  
  --h2-font-weight: 600;
  --h2-line-height: 1.2;
  --h2-line-height-media: 1.2;
  
  --h3-font-size: 1.5rem;
  --h3-font-size-media: 1.2rem;  
  --h3-font-weight: 400;
  --h3-line-height: 1.2;
  --h3-line-height-media: 1.2;

  --p-font-size: 1rem;
  --p-line-height: 2;
  --p-font-weight: 200;
  --p-font-weight-bold: 800;
  
  --ul-font-size: 1.5rem;
  --ul-line-height: 2;
  --ul-font-weight: 800;

}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  color: var(--dark-brown);
  line-height: 1.5;
}



h1 {
    font-size: var(--h1-font-size);
    font-weight: var(--h1-font-weight);
    line-height: var(--h1-line-height);
    color: var(--dark-navy);
}

h2 {
    font-size: var(--h2-font-size);
    font-weight: var(--h2-font-weight);
    line-height: var(--h2-line-height);
    color: var(--dark-navy);
}
h3 {
    font-size: var(--h3-font-size);
    font-weight: var(--h3-font-weight);
    line-height: var(--h3-line-height);
    color: var(--dark-navy);
    text-align: left;
    margin: 1rem;
}
p {
    font-size: var(--p-font-size);
    font-weight: var(--p-font-weight);
    line-height: var(--p-line-height);
    color: var(--dark-navy);
    text-align: left;
    margin: 1rem;
}
ul {
    color: var(--mid-green);
    font-size: var(--ul-font-size);
    font-weight: var(--ul-font-weight);
    line-height: var(--ul-line-height);
}


.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: calc(var(--baseline) * 4);
  padding: 0 calc(var(--baseline) * 8);
  max-width: var(--max-width);
  margin: auto;
}

.col-12 { grid-column: span 12; }
.col-9 { grid-column: span 9; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }

.center { text-align: center; }

/* Header */
.sticky {
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  z-index: 1000;
  transition: all 0.3s ease;
}

.header.scrolled {
  padding-top: calc(var(--baseline) * 2);
  padding-bottom: calc(var(--baseline) * 2);
}

.header {
  padding: calc(var(--baseline) * 2) 0;
  margin-left: 8rem;
  margin-right: 8rem;
}
a {
  text-decoration: none;
  color: var(--dark-navy);
}
a:hover  {
      color: var(--mustard) !important;
}
a:visited {
      color: var(--dark-navy);
}


.nav { text-align: right;margin-top: 1rem; }
.nav a {
  margin-left: calc(var(--baseline) * 3);
  margin-top: calc(var(--baseline) * 2);
  font-size: 1.2rem;
  font-weight: 400;
}

.footer a,
.footer a:visited {
    margin-left: calc(var(--baseline) * 2);
    color: var(--light-mid-brown) !important;
}
.footer a:hover{
      color: var(--mustard) !important;
}

/*.nav a:hover  {
      color: var(--mustard) !important;
}*/

/* Sections */
.hero { padding: calc(var(--baseline) * 16) 0 calc(var(--baseline) * 12); }
.heroPanel {
    background-image: url("/assets/images/helipad_banner.jpg");
    background-color: var(--mustard);
    background-position-y: -550px;
    background-position-x: -250px;
}

.hero p { font-weight: var(-p-bold-font-weight); margin-right: 30%; }


/*.hero h1 { font-size: var(--h2-font-size); font-weight: 800; line-height: 0.5; }
.hero h2 { font-size: 1.2rem; font-weight: 600; line-height: 1.5;margin-right: 30%; }
.process-intro h2 { font-size: var(--h2-font-size); font-weight: 600; line-height: 1.2; }
.integration h2 { font-size: var(--h2-font-size); font-weight: 600; line-height: 1.2; }
.integration p {font-size: 1rem;  line-height: 2;  font-weight: 600;}
.integration ul {font-size: 1.5rem;  line-height: 2;  font-weight: 800; color: var(--mid-green);}
.cta h2 { font-size: 48px; font-weight: 600; line-height: 0.5; color: var(--light-mid-brown);}
.cta h3 { font-size: 24px; font-weight: 400; line-height: 1.5; color: var(--light-mid-brown);}
.compliance h1 { font-size: var(--h2-font-size); font-weight: 600; line-height: 0.5; }
.compliance h2 { font-size: 1rem; font-weight: 400; line-height: 2;}

.features h1 { font-size: var(--h2-font-size); font-weight: 600; line-height: 1.3; margin-bottom: 5rem; text-align: center; }
.features h3 { font-size: 1.2rem; font-weight: 600; line-height: 1.5; text-align: left; margin-left:1rem;}
.features p {margin:1rem;font-size: 0.9rem;  line-height: 1.5;min-height: 5rem;}
.process h1 { font-size: 1.5rem; font-weight: 800; line-height: 0.5; }
.process h2 { font-size: 1.2rem; font-weight: 400; line-height: 2; margin:1.2rem;}

.contact h1 { font-size: var(--h2-font-size); font-weight: 800; line-height: 0.5; }
.contact p { font-size: 1rem; font-weight: 600; line-height: 2; }*/

.footer p {font-weight: 200; font-size: 0.9rem;}


.features { padding: calc(var(--baseline) * 15) 0; }
.process-intro { padding: calc(var(--baseline) * 4) 0; }
.process { padding: calc(var(--baseline) * 10) 0; }
.tagline { padding: calc(var(--baseline) * 16) 0; }
.integration { padding: calc(var(--baseline) * 15) 0; }
.cta { padding: calc(var(--baseline) * 16) 0; }
.contact { padding: calc(var(--baseline) * 15) 0; }
.footer { padding: calc(var(--baseline) * 12) 0; font-size: 13px; }

.featuresPanel{
    background-color: var(--light-mid-brown);
    padding-left: 7rem;
    padding-right: 7rem;
}
.feature {
    text-align: center;
    margin-bottom: 5rem;
}
.featureColumn {
    min-height: 8rem;
}
.footerPanel {
    background-color: var(--dark-navy);
}
.footer p {
    color: var(--light-mid-brown);
}
.processPanel {
    background-color: var(--mustard);
    text-align: center;
    padding-left: 10rem;
    padding-right: 10rem;
}

.process h3 {
    text-align: center;
}
.ctaPanel {
    background-image: url("/assets/images/footer_bar_small.jpg");
    background-color: var(--light-mid-brown);
    background-size: cover;
}

.cta h2,
.cta h3 {
    color: var(--light-mid-brown);
    text-align: center;
}
.compliancePanel {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

/* Button */
.btn-primary {
  margin-top: calc(var(--baseline) * 3);
  margin-bottom: calc(var(--baseline) * 3);
  padding: calc(var(--baseline) * 2) calc(var(--baseline) * 4);
  background: var(--mustard);
  color: var(--dark-navy);
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  border-radius:5px;
}

.btn-primary:hover { background: var(--mid-blue); color:var(--mustard);}

/* Inputs */
input, textarea {
  width: 100%;
  margin-bottom: calc(var(--baseline) * 2);
  padding: calc(var(--baseline) * 2);
}

.form-status { font-size: 13px; }

/* Placeholders */
.recaptcha-placeholder { height: 80px; background: rgba(0,0,0,0.05); margin-bottom: calc(var(--baseline) * 2); }


/* Images */
.image-placeholder { height: 24rem; width: 24rem; border-radius: 15px; background: rgba(0,0,0,0.05); background-size: cover !important; background-repeat: no-repeat; margin: auto !important;}
.logoImg {height: 3rem;}

/* Animations */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }

.stagger:nth-child(1) { transition-delay: 0.1s; }
.stagger:nth-child(2) { transition-delay: 0.2s; }
.stagger:nth-child(3) { transition-delay: 0.3s; }
.stagger:nth-child(4) { transition-delay: 0.4s; }

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger { transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* Responsive */
@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; display:contents;}
  .col-6, .col-4, .col-3 { grid-column: span 1; }
  .col-12 {}
  .hero{padding: calc(var(--baseline) * 2) 0 calc(var(--baseline) * 12);}

h1 {
    font-size: var(--h1-font-size-media);
    line-height: var(--h1-line-height-media);
}

h2 {
    font-size: var(--h2-font-size-media);
    line-height: var(--h2-line-height-media);
}
h3 {
    font-size: var(--h3-font-size-media);
    line-height: var(--h3-line-height-media);
}
p {
    font-size: var(--p-font-size-media);
    line-height: var(--p-line-height-media);
}

  .features h1 {display: none;}
  
  .heroPanel, 
  .compliancePanel,
  .featuresPanel,
  .processPanel,
  .processIntroPanel,
  .integrationPanel,
  .ctaPanel,
  .contactPanel,
  .footerPanel {
    overflow: hidden;
  }
  
  .image-placeholder {
      height: 20rem;
      width: 20rem;
  }
  
  .heroPanel, 
  .compliancePanel,
  .featuresPanel,
  .processPanel,
  .processIntroPanel,
  .integrationPanel,
  .ctaPanel,
  .contactPanel,
  .footerPanel {
    padding: 1rem;
  }
  .header {
    margin: 1rem;
    display: flex;
  }
  .navPanel {
      
  }
  
  .nav a {
      font-size: 0.8rem;
  }
  .logo {max-width: 50%;}
  
  .logoImg {height: 2rem;}
  
}