/* ==================================
   GROWPATH AVIATION BUSINESS CONSULTING
   ================================== */

:root {

  --black: #090b08;

  --charcoal: #121510;

  --marine-green: #1d271b;

  --olive: #2d3928;

  --field-green: #3b4933;

  --scarlet: #8d2119;

  --scarlet-light: #aa3025;

  --brass: #a88b54;

  --khaki: #c8bc96;

  --sand: #ddd3b9;

  --cream: #f1ecdf;

  --paper: #e4dcc9;

  --white: #ffffff;

  --text-dark: #181b16;

  --text-gray: #54594f;

  --border-dark: rgba(255, 255, 255, 0.13);

  --border-light: #b6ad98;

  --shadow: 0 18px 45px rgba(0, 0, 0, 0.25);

  --heading-font:
    "Oswald",
    "Arial Narrow",
    Impact,
    sans-serif;

  --body-font:
    "Roboto Condensed",
    Arial,
    sans-serif;

}



/* ==================================
   RESET
   ================================== */

* {

  box-sizing: border-box;

}


html {

  scroll-behavior: smooth;

}


body {

  margin: 0;

  background: var(--cream);

  color: var(--text-dark);

  font-family: var(--body-font);

  line-height: 1.55;

}


img,
video {

  display: block;

  width: 100%;

}


a {

  color: inherit;

  text-decoration: none;

}


button,
input,
select,
textarea {

  font: inherit;

}


::selection {

  background: var(--scarlet);

  color: white;

}



/* ==================================
   GENERAL
   ================================== */

.container {

  width: min(1160px, calc(100% - 40px));

  margin: 0 auto;

}


.section {

  padding: 85px 0;

}


.eyebrow {

  margin: 0 0 12px;

  color: var(--khaki);

  font-family: var(--heading-font);

  font-size: 0.76rem;

  font-weight: 700;

  letter-spacing: 0.18em;

  text-transform: uppercase;

}


.eyebrow.red {

  color: var(--scarlet);

}


h1,
h2,
h3 {

  font-family: var(--heading-font);

  text-transform: uppercase;

  letter-spacing: 0.015em;

}


h2 {

  margin: 0;

  font-size: clamp(2rem, 3.2vw, 3.2rem);

  line-height: 1.04;

}


.button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 46px;

  padding: 0 18px;

  border: 1px solid transparent;

  font-family: var(--heading-font);

  font-size: 0.83rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  cursor: pointer;

  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;

}


.button:hover {

  transform: translateY(-2px);

}


.primary-button {

  background: var(--scarlet);

  border-color: var(--scarlet);

  color: white;

}


.primary-button:hover {

  background: var(--scarlet-light);

  border-color: var(--scarlet-light);

}


.secondary-button {

  background: rgba(0, 0, 0, 0.25);

  border-color: rgba(255, 255, 255, 0.5);

  color: white;

}


.secondary-button:hover {

  border-color: var(--khaki);

}



/* ==================================
   HEADER
   ================================== */

.site-header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 100;

  transition:
    background 180ms ease,
    box-shadow 180ms ease;

}


.site-header.scrolled {

  background: rgba(9, 11, 8, 0.96);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);

  border-bottom: 1px solid var(--border-dark);

}


.header-inner {

  min-height: 70px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;

}


.brand {

  display: flex;

  align-items: center;

  gap: 10px;

  color: white;

}


.brand-mark {

  width: 38px;

  height: 38px;

  display: grid;

  place-items: center;

  background: var(--scarlet);

  border: 1px solid rgba(255, 255, 255, 0.45);

  font-family: var(--heading-font);

  font-size: 1.25rem;

  font-weight: 700;

}


.brand-text {

  display: grid;

  line-height: 1;

}


.brand-text strong {

  font-family: var(--heading-font);

  font-size: 1.05rem;

  letter-spacing: 0.1em;

}


.brand-text small {

  margin-top: 5px;

  color: var(--khaki);

  font-size: 0.58rem;

  letter-spacing: 0.14em;

}


.site-nav {

  display: flex;

  align-items: center;

  gap: 24px;

  color: var(--cream);

  font-family: var(--heading-font);

  font-size: 0.78rem;

  font-weight: 600;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}


.site-nav a {

  opacity: 0.86;

}


.site-nav a:hover {

  opacity: 1;

  color: var(--khaki);

}


.nav-button {

  padding: 9px 14px;

  border: 1px solid var(--khaki);

}


.nav-toggle {

  display: none;

  border: 0;

  background: transparent;

  padding: 6px;

}


.nav-toggle span {

  display: block;

  width: 24px;

  height: 2px;

  margin: 5px 0;

  background: white;

}



/* ==================================
   HERO
   ================================== */

.hero {

  position: relative;

  min-height: 720px;

  display: flex;

  align-items: center;

  overflow: hidden;

  background: var(--black);

  color: white;

}


.hero-video {

  position: absolute;

  inset: 0;

  height: 100%;

  object-fit: cover;

  filter:
    saturate(0.55)
    contrast(1.1)
    brightness(0.66);

}


.hero-overlay {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(
      90deg,
      rgba(7, 9, 6, 0.96) 0%,
      rgba(7, 9, 6, 0.83) 42%,
      rgba(7, 9, 6, 0.43) 75%,
      rgba(7, 9, 6, 0.5) 100%
    ),

    linear-gradient(
      0deg,
      rgba(7, 9, 6, 0.86),
      transparent 45%
    );

}


.hero-grid {

  position: absolute;

  inset: 0;

  opacity: 0.1;

  background-image:

    linear-gradient(
      rgba(255, 255, 255, 0.15) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.15) 1px,
      transparent 1px
    );

  background-size: 90px 90px;

}


.hero-content {

  position: relative;

  z-index: 5;

  padding-top: 90px;

}


.hero-content > * {

  max-width: 770px;

}


.hero h1 {

  margin: 0;

  max-width: 800px;

  font-size: clamp(2.7rem, 5vw, 4.6rem);

  line-height: 0.99;

  font-weight: 700;

}


.hero h1 span {

  display: block;

  margin-top: 8px;

  color: var(--sand);

}


.hero-lead {

  margin: 22px 0 0;

  max-width: 680px;

  color: #e1e3dc;

  font-size: clamp(1rem, 1.4vw, 1.15rem);

}


.hero-focus {

  margin: 14px 0 0;

  color: var(--khaki);

  font-family: var(--heading-font);

  font-size: 0.82rem;

  font-weight: 600;

  letter-spacing: 0.05em;

  text-transform: uppercase;

}


.hero-buttons {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 28px;

}


.hero-trust {

  display: flex;

  flex-wrap: wrap;

  gap: 10px 20px;

  margin-top: 34px;

  padding-top: 17px;

  border-top: 1px solid var(--border-dark);

  color: var(--sand);

  font-size: 0.76rem;

  font-weight: 700;

  letter-spacing: 0.05em;

  text-transform: uppercase;

}


.hero-trust span::before {

  content: "■";

  margin-right: 7px;

  color: var(--scarlet-light);

  font-size: 0.58rem;

}



/* ==================================
   CORE VALUES
   ================================== */

.values {

  background: var(--charcoal);

  border-top: 3px solid var(--scarlet);

  color: white;

}


.values-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

}


.values-grid div {

  min-height: 105px;

  display: grid;

  align-content: center;

  gap: 5px;

  padding: 22px 27px;

  border-right: 1px solid var(--border-dark);

}


.values-grid div:last-child {

  border-right: 0;

}


.values-grid strong {

  color: var(--khaki);

  font-family: var(--heading-font);

  font-size: 1.05rem;

  letter-spacing: 0.14em;

}


.values-grid span {

  color: #c7cbc1;

  font-size: 0.86rem;

}



/* ==================================
   PROBLEMS
   ================================== */

.problems-section {

  background: var(--cream);

}


.intro-grid {

  display: grid;

  grid-template-columns: 1fr 0.78fr;

  gap: 70px;

  align-items: end;

  margin-bottom: 45px;

}


.intro-grid p {

  color: var(--text-gray);

  font-size: 1rem;

}


.problem-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  border-top: 1px solid var(--border-light);

  border-left: 1px solid var(--border-light);

}


.problem-card {

  position: relative;

  min-height: 270px;

  padding: 25px 23px;

  background: rgba(255, 255, 255, 0.15);

  border-right: 1px solid var(--border-light);

  border-bottom: 1px solid var(--border-light);

  transition:
    transform 170ms ease,
    background 170ms ease,
    box-shadow 170ms ease;

}


.problem-card:hover {

  transform: translateY(-3px);

  background: #f7f1e3;

  box-shadow: var(--shadow);

  z-index: 4;

}


.number {

  color: var(--scarlet);

  font-family: var(--heading-font);

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.15em;

}


.problem-card h3 {

  margin: 38px 0 10px;

  font-size: 1.15rem;

  line-height: 1.1;

}


.problem-card p {

  margin: 0;

  color: var(--text-gray);

  font-size: 0.9rem;

}



/* ==================================
   JOEL RIVERA SECTION
   ================================== */

.mission-image {

  position: relative;

  min-height: 620px;

  display: flex;

  align-items: flex-end;

  overflow: hidden;

  color: white;

}


.mission-image > img {

  position: absolute;

  inset: 0;

  height: 100%;

  object-fit: cover;

  object-position: center;

  filter:
    saturate(0.74)
    contrast(1.08);

}


.mission-overlay {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(
      0deg,
      rgba(8, 11, 7, 0.95) 0%,
      rgba(8, 11, 7, 0.59) 45%,
      rgba(8, 11, 7, 0.08) 78%
    );

}


.mission-text {

  position: relative;

  z-index: 5;

  padding-bottom: 58px;

}


.mission-text h2 {

  max-width: 760px;

  color: white;

}


.mission-text p:last-child {

  max-width: 720px;

  margin: 16px 0 0;

  color: #d9ddd2;

  font-size: 1rem;

}



/* ==================================
   TRUST
   ================================== */

.trust-section {

  background: #d7cfbb;

}


.trust-grid {

  display: grid;

  grid-template-columns: 0.8fr 1.2fr;

  gap: 65px;

  align-items: start;

}


.trust-image {

  position: sticky;

  top: 100px;

  box-shadow: var(--shadow);

}


.trust-image img {

  aspect-ratio: 4 / 5;

  object-fit: cover;

  filter:
    saturate(0.8)
    contrast(1.05);

}


.image-label {

  position: absolute;

  left: 0;

  bottom: 0;

  padding: 10px 13px;

  background: var(--scarlet);

  color: white;

  font-family: var(--heading-font);

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.13em;

}


.trust-lead {

  margin: 18px 0 28px;

  color: #4a4e46;

  font-size: 1rem;

}


.trust-items {

  border-top: 1px solid #aaa18c;

}


.trust-item {

  display: grid;

  grid-template-columns: 42px 1fr;

  gap: 17px;

  padding: 21px 0;

  border-bottom: 1px solid #aaa18c;

}


.trust-item > span {

  width: 34px;

  height: 34px;

  display: grid;

  place-items: center;

  border: 1px solid var(--scarlet);

  color: var(--scarlet);

  font-family: var(--heading-font);

  font-size: 0.68rem;

  font-weight: 700;

}


.trust-item h3 {

  margin: 0 0 5px;

  font-size: 1rem;

}


.trust-item p {

  margin: 0;

  color: #555a50;

  font-size: 0.91rem;

}



/* ==================================
   REGULATORY
   ================================== */

.regulatory {

  padding: 65px 0;

  background: var(--marine-green);

  border-top: 4px solid var(--scarlet);

  color: white;

}


.regulatory-grid {

  display: grid;

  grid-template-columns: 0.9fr 1.1fr;

  gap: 65px;

  align-items: center;

}


.regulatory h2 {

  color: var(--cream);

  font-size: clamp(2rem, 3vw, 2.9rem);

}


.regulatory-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 9px;

}


.regulatory-tags span {

  padding: 10px 12px;

  border: 1px solid rgba(255, 255, 255, 0.25);

  background: rgba(255, 255, 255, 0.04);

  color: var(--sand);

  font-family: var(--heading-font);

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.07em;

}



/* ==================================
   PROCESS
   ================================== */

.process-section {

  background: var(--cream);

}


.section-heading.center {

  max-width: 680px;

  margin: 0 auto 45px;

  text-align: center;

}


.process-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 16px;

}


.process-card {

  min-height: 235px;

  padding: 27px 23px;

  background: var(--charcoal);

  border-top: 4px solid var(--scarlet);

  color: white;

}


.process-card > span {

  color: var(--khaki);

  font-family: var(--heading-font);

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.13em;

}


.process-card h3 {

  margin: 42px 0 10px;

  font-size: 1.25rem;

}


.process-card p {

  margin: 0;

  color: #bdc2b7;

  font-size: 0.88rem;

}



/* ==================================
   INDUSTRY
   ================================== */

.industry {

  padding: 38px 0;

  background: #10130f;

  border-top: 1px solid var(--border-dark);

  color: white;

}


.industry p {

  margin: 0 0 17px;

  color: var(--khaki);

  font-family: var(--heading-font);

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.17em;

}


.industry-names {

  display: flex;

  flex-wrap: wrap;

  gap: 13px 25px;

}


.industry-names span {

  color: #d9ddd2;

  font-family: var(--heading-font);

  font-size: clamp(1rem, 1.6vw, 1.3rem);

  font-weight: 700;

}


.industry small {

  display: block;

  margin-top: 17px;

  color: #858b7e;

  font-size: 0.69rem;

}



/* ==================================
   CONTACT
   ================================== */

.contact-section {

  background: #c9c0aa;

}


.contact-grid {

  display: grid;

  grid-template-columns: 0.9fr 1.1fr;

  gap: 70px;

  align-items: start;

}


.contact-copy > p:not(.eyebrow) {

  max-width: 520px;

  color: #484c44;

  font-size: 1rem;

}


.contact-image {

  margin-top: 28px;

  box-shadow: var(--shadow);

}


.contact-image img {

  aspect-ratio: 16 / 9;

  object-fit: cover;

  filter: saturate(0.65);

}


.brief-form {

  padding: 28px;

  background: var(--cream);

  border-top: 5px solid var(--scarlet);

  box-shadow: var(--shadow);

}


.brief-form label {

  display: grid;

  gap: 7px;

  margin-bottom: 16px;

  color: var(--text-dark);

  font-family: var(--heading-font);

  font-size: 0.74rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}


.brief-form input,
.brief-form select,
.brief-form textarea {

  width: 100%;

  padding: 11px 12px;

  border: 1px solid #b4aa95;

  border-radius: 0;

  background: rgba(255, 255, 255, 0.48);

  color: var(--text-dark);

  outline: none;

  font-family: var(--body-font);

  font-size: 0.95rem;

}


.brief-form input:focus,
.brief-form select:focus,
.brief-form textarea:focus {

  border-color: var(--scarlet);

  box-shadow:
    0 0 0 2px rgba(141, 33, 25, 0.12);

}


.full-button {

  width: 100%;

}


.form-status {

  min-height: 22px;

  margin-bottom: 0;

  color: var(--scarlet);

  font-weight: 700;

}



/* ==================================
   FOOTER
   ================================== */

.footer {

  padding: 34px 0;

  background: var(--black);

  border-top: 1px solid var(--border-dark);

  color: #aab0a4;

}


.footer-grid {

  display: grid;

  grid-template-columns: 0.6fr 1.7fr auto;

  gap: 32px;

  align-items: start;

}


.footer strong {

  color: var(--cream);

  font-family: var(--heading-font);

  font-size: 1.05rem;

  letter-spacing: 0.1em;

}


.footer p {

  margin: 6px 0 0;

}


.disclaimer {

  font-size: 0.73rem;

}


.footer a {

  color: var(--khaki);

  font-family: var(--heading-font);

  font-size: 0.74rem;

  font-weight: 700;

}



/* ==================================
   ANIMATION
   ================================== */

.reveal {

  opacity: 1
  
  ;

  transform: translateY(16px);

  transition:
    opacity 550ms ease,
    transform 550ms ease;

}


.reveal.visible {

  opacity: 1;

  transform: translateY(0);

}



/* ==================================
   TABLET
   ================================== */

@media (max-width: 980px) {

  .problem-grid {

    grid-template-columns: repeat(2, 1fr);

  }


  .trust-grid,
  .contact-grid {

    grid-template-columns: 1fr;

    gap: 42px;

  }


  .trust-image {

    position: relative;

    top: auto;

    max-width: 620px;

  }


  .trust-image img {

    aspect-ratio: 16 / 10;

  }


  .process-grid {

    grid-template-columns: repeat(2, 1fr);

  }


  .regulatory-grid {

    grid-template-columns: 1fr;

    gap: 32px;

  }


  .footer-grid {

    grid-template-columns: 1fr;

  }

}



/* ==================================
   MOBILE
   ================================== */

@media (max-width: 760px) {

  .container {

    width: min(100% - 28px, 1160px);

  }


  .section {

    padding: 65px 0;

  }


  .site-header {

    background: rgba(9, 11, 8, 0.94);

  }


  .header-inner {

    min-height: 64px;

  }


  .nav-toggle {

    display: block;

  }


  .site-nav {

    position: absolute;

    top: 64px;

    left: 0;

    right: 0;

    display: grid;

    gap: 0;

    background: rgba(9, 11, 8, 0.99);

    border-top: 1px solid var(--border-dark);

    transform: scaleY(0);

    transform-origin: top;

    opacity: 0;

    pointer-events: none;

    transition:
      transform 180ms ease,
      opacity 180ms ease;

  }


  .site-nav.open {

    transform: scaleY(1);

    opacity: 1;

    pointer-events: auto;

  }


  .site-nav a {

    padding: 15px 20px;

    border-bottom: 1px solid var(--border-dark);

  }


  .nav-button {

    border-left: 0;

    border-right: 0;

  }


  .hero {

    min-height: 700px;

    align-items: flex-end;

  }


  .hero-content {

    padding: 120px 0 45px;

  }


  .hero h1 {

    font-size: clamp(2.45rem, 12vw, 3.7rem);

  }


  .hero-overlay {

    background:

      linear-gradient(
        0deg,
        rgba(7, 9, 6, 0.98),
        rgba(7, 9, 6, 0.74) 70%,
        rgba(7, 9, 6, 0.46)
      );

  }


  .values-grid {

    grid-template-columns: 1fr;

  }


  .values-grid div {

    min-height: 88px;

    border-right: 0;

    border-bottom: 1px solid var(--border-dark);

  }


  .intro-grid {

    grid-template-columns: 1fr;

    gap: 20px;

  }


  .problem-grid {

    grid-template-columns: 1fr;

  }


  .problem-card {

    min-height: auto;

  }


  .problem-card h3 {

    margin-top: 30px;

  }


  .mission-image {

    min-height: 570px;

  }


  .mission-image > img {

    object-position: 58% center;

  }


  .mission-text {

    padding-bottom: 40px;

  }


  .process-grid {

    grid-template-columns: 1fr;

  }


  .process-card {

    min-height: 200px;

  }


  .process-card h3 {

    margin-top: 30px;

  }


  .brief-form {

    padding: 21px;

  }

}



/* ==================================
   SMALL MOBILE
   ================================== */

@media (max-width: 430px) {

  .brand-text small {

    display: none;

  }


  .hero-trust {

    display: grid;

    gap: 8px;

  }


  .hero-buttons {

    display: grid;

  }


  .hero-buttons .button {

    width: 100%;

  }

}



/* ==================================
   ACCESSIBILITY
   ================================== */

@media (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior: auto;

  }


  * {

    transition: none !important;

  }


  .reveal {

    opacity: 1;

    transform: none;

  }

}