/* ─── Fonts ─────────────────────────────────────────────── */
@import url('fonts/fonts.css');

/* ─── Design tokens ─────────────────────────────────────── */
:root {
  --blue:   #002a56;
  --orange: #f15e22;
  --white:  #ffffff;
  --text:   #595959;
  --radius: 8px;

  /* Fluid type scale (360→1240 px) */
  --s-2: clamp(0.608rem, 0.529rem + 0.350vw, 0.800rem);
  --s-1: clamp(0.729rem, 0.618rem + 0.492vw, 1.000rem);
  --s0:  clamp(0.875rem, 0.722rem + 0.682vw, 1.250rem);
  --s1:  clamp(1.050rem, 0.840rem + 0.932vw, 1.563rem);
  --s2:  clamp(1.260rem, 0.976rem + 1.260vw, 1.953rem);
  --s3:  clamp(1.512rem, 1.132rem + 1.690vw, 2.441rem);
  --s4:  clamp(1.814rem, 1.308rem + 2.250vw, 3.052rem);
  --s5:  clamp(2.177rem, 1.507rem + 2.977vw, 3.815rem);

  /* Fluid spacing scale */
  --sp-xs: clamp(4px,  0.26vw,  5px);
  --sp-s:  clamp(8px,  0.52vw, 10px);
  --sp-m:  clamp(16px, 1.04vw, 20px);
  --sp-l:  clamp(32px, 2.08vw, 40px);
  --sp-xl: clamp(48px, 3.13vw, 60px);
}

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 100%; }
body {
  font-family: 'Inter', sans-serif;
  font-size: var(--s0);
  line-height: 1.6;
  color: var(--text);
}
img { display: block; max-width: 100%; border-radius: var(--radius); }
.logo-link img, .footer-logo img { border-radius: 0; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ─── Typography ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  color: var(--blue);
  font-weight: 500;
  line-height: 1.2;
}
h1 { font-size: var(--s5); font-weight: 400; }
h2 { font-size: var(--s4); }
h3 { font-size: var(--s3); }
h4 { font-size: var(--s2); }

/* ─── Layout helpers ─────────────────────────────────────── */
.section {
  margin: 1% auto;
  width: 98%;
  max-width: 2500px;
  border-radius: var(--radius);
}
.section::before { border-radius: var(--radius); }

.container {
  max-width: 1640px;
  margin-inline: auto;
  padding: var(--sp-xl);
}

@media (max-width: 767px)  { .container { padding-inline: var(--sp-l); } }
@media (max-width: 478px)  { .container { padding-inline: var(--sp-m); } }

.grid-3-1 { display: grid; grid-template-columns: 3fr 1fr; gap: var(--sp-l); align-items: start; }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-l); align-items: start; }
.grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-l); align-items: start; }
.grid-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-l); align-items: start; }
.grid-3   { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-l); align-items: start; }

@media (max-width: 767px) {
  .grid-3-1, .grid-2-1, .grid-1-2 { grid-template-columns: 1fr; }
}
@media (max-width: 767px)  { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 478px)  { .grid-3 { grid-template-columns: 1fr; } }

/* ─── Badge (section label) ──────────────────────────────── */
.badge {
  display: inline-block;
  align-self: flex-start;
  font-family: 'Genos', sans-serif;
  font-size: var(--s0);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--blue);
  background: rgba(0, 42, 86, 0.05);
  border-radius: 40px;
  padding: var(--sp-s) var(--sp-m);
}

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  border-radius: 5000px;
  font-family: 'Genos', sans-serif;
  font-size: var(--s1);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.7;
  padding: 0.6em 1em;
  transition: all 200ms linear;
  cursor: pointer;
  border: none;
}

/* Small pill button (no icon) — used in header */
.btn-sm {
  padding: 0.4em 0.8em;
}

/* Orange button — icon circle on right */
.btn-orange {
  background: var(--orange);
  color: var(--white);
  padding: 0.2em 0.2em 0.2em 1em;
}
.btn-orange.btn-sm {
  padding: 0.4em 0.8em;
}
.btn-orange .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 50%;
  aspect-ratio: 1;
  color: white;
  background: transparent;
  transition: all 200ms linear;
}
.btn-orange:hover .btn-icon {
  background: white;
  color: var(--orange);
  transform: rotateZ(45deg);
}

/* Blue button */
.btn-blue {
  background: var(--blue);
  color: var(--white);
  padding: 0.2em 0.2em 0.2em 1em;
}
.btn-blue .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 50%;
  aspect-ratio: 1;
  color: white;
  background: var(--blue);
  transition: all 200ms linear;
}
.btn-blue:hover .btn-icon {
  background: white;
  color: var(--blue);
  transform: rotateZ(45deg);
}

/* ─── Glass card ─────────────────────────────────────────── */
.glass {
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
  padding: var(--sp-l) var(--sp-m);
}

/* ─── Header ─────────────────────────────────────────────── */
#site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  transition: background 200ms, box-shadow 200ms, transform 400ms;
}
#site-header.header-hidden {
  transform: translateY(-100%);
}
#site-header.scrolled {
  background: var(--white);
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
}
.header-inner {
  display: grid;
  grid-template-columns: 250px auto;
  align-items: center;
  padding-block: 0;
}
@media (max-width: 767px) { .header-inner { grid-template-columns: 100px auto; } }

.logo-link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-block: var(--sp-m);
}
.logo-desktop { display: block; width: 100%; }
.logo-mobile  { display: none;  width: 100%; }
@media (max-width: 767px) {
  .logo-desktop { display: none; }
  .logo-mobile  { display: block; }
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-m);
  flex-wrap: nowrap;
}
@media (max-width: 991px) {
  .header-right { flex-direction: row-reverse; justify-content: flex-start; }
}

/* Desktop nav */
.desktop-nav ul { display: flex; gap: 2em; }
.desktop-nav a {
  font-family: 'Genos', sans-serif;
  font-size: var(--s1);
  font-weight: 600;
  color: var(--blue);
  text-transform: uppercase;
}
.desktop-nav a:hover { color: var(--orange); }
@media (max-width: 991px) { .desktop-nav { display: none; } }

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--blue);
  transition: all 200ms;
}
@media (max-width: 991px) { .menu-toggle { display: flex; } }

/* Mobile overlay nav */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--blue);
  z-index: 99;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-l);
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  font-family: 'Genos', sans-serif;
  font-size: var(--s3);
  font-weight: 600;
  color: var(--white);
  text-transform: uppercase;
}
.menu-toggle.open span { background: var(--white); }
.menu-toggle.open { position: relative; z-index: 100; }
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── Hero ───────────────────────────────────────────────── */
#hero {
  min-height: min(89svh, 870px);
  background-image: url('images/hero.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  margin-top: 1px;
}
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(33,33,33,0.23), rgba(33,33,33,0.23));
  border-radius: var(--radius);
  pointer-events: none;
}
.hero-container {
  position: relative;
  height: min(89svh, 870px);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--sp-xl);
}
.hero-card {
  width: 100%;
  max-width: 820px;
  color: var(--white);
}
.hero-card h1 { color: var(--white); }
.hero-card p  { color: #f5f5f5; margin-top: var(--sp-s); }
.hero-buttons { display: flex; gap: var(--sp-m); flex-wrap: wrap; margin-top: var(--sp-m); }

/* ─── About ──────────────────────────────────────────────── */
#about .text-col { display: flex; flex-direction: column; gap: var(--sp-l); }
#about .inner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-l); align-items: start; }
#about .inner-grid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; }
@media (max-width: 767px) { #about .inner-grid { grid-template-columns: 1fr; } }
#about .tall-img { width: 100%; object-fit: cover; aspect-ratio: 3/4; }
@media (max-width: 767px) { #about .tall-img-col { display: none; } }

/* ─── Approvals ──────────────────────────────────────────── */
#support-approvals table { width: 100%; border-collapse: collapse; margin-block: var(--sp-m); font-size: var(--s-1); }
#support-approvals td { padding: var(--sp-xs) var(--sp-s); vertical-align: top; }
#support-approvals td:first-child { color: var(--blue); white-space: nowrap; padding-right: var(--sp-m); }
#support-approvals .cert-images { display: flex; flex-direction: column; gap: var(--sp-s); }
#support-approvals .cert-images img { width: 100%; box-shadow: 0 4px 20px rgba(0,0,0,0.18); }

/* ─── Services ───────────────────────────────────────────── */
#services {
  background-image: url('images/services-bg.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
#services::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(33,33,33,0.5), rgba(33,33,33,0.2));
  border-radius: var(--radius);
  pointer-events: none;
}
#services .container { position: relative; }
#services .badge { background: rgba(255,255,255,0.5); }
#services h2 { color: var(--white); width: min(100%, 1200px); }
#services .cards-row { padding-top: 0; }

.service-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-m);
  transition: background 200ms;
}
.service-card:hover { background: rgba(0,0,0,0.5); }
.service-card-icon { width: 75px; height: auto; color: var(--white); fill: var(--white); }
.service-card h3 { color: var(--white); font-size: var(--s1); margin-top: var(--sp-m); }
.service-card p  { color: var(--white); font-size: var(--s-1); }

/* ─── Aircraft capabilities ──────────────────────────────── */
#ac-support .aircraft-lists { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-l); padding-top: 0; }
#ac-support .aircraft-lists ul { padding-top: var(--sp-s); list-style: disc; padding-left: 1.25em; }
#ac-support .aircraft-lists li { padding-block: 2px; }
#ac-support .brand-logo { max-width: 140px; display: block; margin-bottom: 0; }
#ac-support .brand-logo.embraer { max-width: 120px; }
#ac-support .aircraft-col-img { width: 100%; object-fit: cover; aspect-ratio: 3/4; }
@media (max-width: 767px) { #ac-support .aircraft-lists { grid-template-columns: 1fr; } }

/* ─── Line maintenance ───────────────────────────────────── */
#line-maintenance .photo { width: 100%; object-fit: cover; aspect-ratio: 3/4; }
#line-maintenance .text-col { display: flex; flex-direction: column; gap: var(--sp-m); align-items: flex-start; }
#line-maintenance p + p { margin-top: var(--sp-m); }
@media (max-width: 767px) { #line-maintenance .photo-col { order: 2; } }

/* ─── AOG support ────────────────────────────────────────── */
#aog-support .photo { width: 100%; object-fit: cover; aspect-ratio: 4/3; }
#aog-support .text-col { display: flex; flex-direction: column; gap: var(--sp-m); align-items: flex-start; }

/* ─── Footer / Contact ───────────────────────────────────── */
#contact {
  background: var(--blue);
  margin-top: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}
#contact .container { padding-block: var(--sp-xl); }
.footer-logo { filter: brightness(0) invert(1); max-width: 150px; }
.footer-company {
  font-family: 'Genos', sans-serif;
  font-size: var(--s2);
  line-height: 1;
  font-weight: 500;
  color: var(--white);
  margin-top: var(--sp-m);
}
.footer-meta { color: var(--white); margin-top: var(--sp-m); }
.footer-meta p { font-size: var(--s0); margin-top: var(--sp-xs); }
.footer-meta a { color: var(--white); text-decoration: underline; }
.footer-ico { font-size: var(--s-2) !important; margin-top: var(--sp-s) !important; opacity: 0.75; }

.social-links { display: flex; gap: var(--sp-m); margin-top: var(--sp-m); }
.social-links a { color: var(--white); opacity: 0.75; transition: opacity 200ms; }
.social-links a:hover { opacity: 1; }
.social-links svg { width: 24px; height: 24px; }

.footer-col { color: var(--white); }
.footer-col h4 { color: var(--white); font-size: var(--s1); margin-bottom: var(--sp-m); }
.footer-col p  { font-size: var(--s0); margin-top: var(--sp-s); }
.footer-col a  { color: var(--white); }
.footer-col a[href^="mailto"],
.footer-col a[href^="tel"]   { text-decoration: underline; }
.footer-note   { font-size: var(--s-2); color: var(--white); opacity: 0.7; }

.footer-person { display: flex; align-items: center; gap: var(--sp-m); margin-top: var(--sp-m); }
.footer-portrait { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.25); }
.footer-person p { margin-top: 2px; }

@media (max-width: 767px) {
  #contact .grid-3 { grid-template-columns: 1fr 1fr; }
  #contact .footer-brand-col { grid-column: span 2; }
}