* =========================================================
   Capital Aerospace — Premium v4.1 (system-ui, unified)
   - Works with BOTH header/menu variants:
     • Old:  header--transparent  + #menuBtn / #offcanvas / .backdrop
     • New:  .site-header.transparent + .menu-toggle / .offcanvas (no id)
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  --gold:#d6b24f; --copper:#b3753a;
  --ink:#0b0e12;  --slate:#12161e; --steel:#1a212d;
  --text:#e7ecf7; --muted:#9cadc6; --border:#1f2937;
  --card:#0e121a; --radius:12px;  --shadow:0 10px 28px rgba(0,0,0,.28);
  --container:min(1100px,92vw);
  --hamburger-color:#fff;
  --hamburger-border:#fff;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
html,body{
  margin:0; padding:0;
  font:400 16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  color:var(--text); background:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
p{margin:.5rem 0 1rem}
h1,h2,h3{line-height:1.2;margin:0 0 .6rem}
h1{font-size:clamp(2rem,5vw,3rem)}
h2{font-size:clamp(1.6rem,4vw,2.2rem)}
h3{font-size:1.15rem}
.container{width:var(--container);margin-inline:auto}
.section{padding:clamp(2rem,5vw,5rem) 0}
.center{text-align:center}
.prose{max-width:70ch}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:#fff;color:#000;padding:.5rem 1rem;border-radius:.5rem;z-index:9999}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- Header (transparent, fixed) ---------- */

/* Per-page hamburger colors (adjust values as you like) */
body.home      { --hamburger-color:#ffffff; --hamburger-border:#ffffff; }
body.mission   { --hamburger-color:#000000; --hamburger-border:#000000; }
body.team      { --hamburger-color:#000000; --hamburger-border:#000000; }
body.careers   { --hamburger-color:#000000; --hamburger-border:#000000; }
body.contact   { --hamburger-color:#fff; --hamburger-border:#fff; }

/* Old pages */
.site-header.header--transparent{
  position:fixed; inset:0 0 auto 0; z-index:100; background:transparent; border:0;
}
/* New index */
.site-header.transparent{
  position:fixed; inset:0 0 auto 0; z-index:100; background:transparent; border:0;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: center;  /* centers the logo */
  padding: 1.5rem 0;
  position: relative;       /* so we can still position menu button later */
}

.site-header .brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* hard-centers logo in container */
}

.menu-toggle, .hamburger {
  position: absolute;
  right: 0;
}
.logo_img{height:48px;width:auto}

/* Hamburger buttons (support both class names) */
.hamburger,
.menu-toggle{
  background: transparent;
  border: 2px solid var(--hamburger-border);
  color: var(--hamburger-color);
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;

  padding: .4rem .6rem;
  margin-right: 1rem;
  border-radius: 8px;       /* rounded square */
}

/* ---------- Off-canvas (right slide-out) ---------- */
/* Works for #offcanvas (old) and .offcanvas (new) */
#offcanvas,
.offcanvas {
  position: fixed;
  top: 80px;                 /* push it down below header */
  right: 20px;               /* small gap from right edge */
  width: 260px;              /* fixed width */
  height: auto;              /* shrink to fit content */
  max-height: 80vh;          /* don’t grow too tall */
  background: rgba(14,19,24,.98);
  color: #fff;
  border: 1px solid #222a35;
  border-radius: 12px;       /* rounded corners for floating look */
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  transform: translateY(-20px); /* start slightly above */
  opacity: 0;
  pointer-events: none;
  transition: all .3s ease;
  padding: 1rem;
  z-index: 1000;
}

/* When opened */
#offcanvas[open],
.offcanvas.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
#offcanvas[open],
.offcanvas.open{ transform:translateX(0) }

.panel-nav a,
.offcanvas a{ display:block;color:#fff;text-decoration:none;padding:.75rem 0 }
.panel-nav a:hover,
.offcanvas a:hover{ text-decoration:underline }

.panel-close,
.close-menu{
  position:absolute; top:.5rem; right:.75rem; background:transparent; border:0; color:#fff;
  font-size:2rem; cursor:pointer;
}

/* Backdrop element (old pages include a .backdrop; new index gets one via JS) */
.backdrop{
  position:fixed; inset:0; z-index:900; background:rgba(0,0,0,.45);
  opacity:0; transition:opacity .3s ease;
}
.backdrop[open],
.backdrop.open{ opacity:1 }

/* ---------- Intro (video + centered logo) ---------- */
.intro,
.full-viewport{ position:relative; height:100svh; isolation:isolate }
.intro-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(.85) saturate(1.05);
}
.intro-logo,
.intro-overlay{ position:absolute; inset:0; display:grid; place-items:center }
.intro-logo img,
.intro-logo .intro-logo__img,
.intro-overlay .intro-logo__img{ width:min(15vw,180px) }

/* Intro logo fade using transition (more reliable than animation) */
.intro-logo {
  opacity: 1;
  transition: opacity 1.5s ease; /* smooth fade */
}

/* Optional skip intro button */
.skip-intro{
  position:absolute; right:1rem; bottom:1rem;
  background:#151b24; color:#fff; border:1px solid #243042;
  padding:.5rem .8rem; border-radius:999px; cursor:pointer;
}
.skip-intro:hover{ background:#1b2433 }

/* ---------- Home sections (image + text) ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,2rem);align-items:center}
@media (max-width:900px){ .grid-2{grid-template-columns:1fr} }
.scroll-section{ position:relative; padding:clamp(2rem,6vw,5rem) 0; }
.scroll-section .scroll-img{
  width:100%; height:auto; border-radius:12px; box-shadow:var(--shadow); border:1px solid #20283a;
}
.scroll-section .scroll-content{ margin-top:1rem }

/* ---------- Cards / Utilities ---------- */
.card{
  background:linear-gradient(180deg,#121722,#0e121a);
  border:1px solid var(--steel); border-radius:var(--radius);
  padding:1.1rem; box-shadow:var(--shadow);
}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.1rem;
  border-radius:999px;font-weight:600;border:1px solid #2b3342;color:var(--text);
  background:transparent;cursor:pointer;text-decoration:none;
  transition:transform .15s ease,filter .2s ease,background .2s ease;
}
.btn:hover{transform:translateY(-1px);background:#141a24}
.btn[disabled]{opacity:.55;cursor:not-allowed}
/* --- Specific button hover colors --- */
.staff:hover {
  background: #0ff; /* neon blue */
  color: #000;
  box-shadow: 0 0 12px #0ff, 0 0 24px #0ff;
  transform: scale(1.05);
}

.customer:hover {
  background: #0f0; /* neon green */
  color: #000;
  box-shadow: 0 0 12px #0f0, 0 0 24px #0f0;
  transform: scale(1.05);
}

.learn:hover {
  background: #fff; /* bright white */
  color: #000;
  box-shadow: 0 0 12px #fff, 0 0 24px #fff;
  transform: scale(1.05);
}

/* Optional: better keyboard UX */
.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(214,178,79,.2);
}
/* ---------- Page hero ---------- */
.page-hero.compact{ padding:2.2rem 0 1rem }
.page-hero.compact p{ color:var(--muted) }

/* ---------- Map (square) ---------- */
.map-square{ position:relative; width:100%; aspect-ratio:1 / 1; border-radius:12px; overflow:hidden; border:1px solid var(--border) }
.map-square iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* ---------- Footer (3 columns) ---------- */
.site-footer{ border-top:1px solid var(--border); margin-top:3rem; background:#0a0e14 }
.footer-grid{
  display:grid; gap:2rem; align-items:start;
  grid-template-columns:1fr 1fr 1fr; padding:2rem 0;
}
.footer-grid .center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;   /* centers horizontally */
  justify-content: center;
}
.footer-nav{ display:grid; gap:.5rem; justify-items:start }
.tagline{ margin:.5rem 0 1rem; font-weight:600 }
@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr; text-align:center }
  .footer-nav{ justify-items:center }
}

/* ---------- Reveal utility ---------- */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
/* Force footer text white */
.site-footer,
.site-footer p,
.site-footer a {
  color: #fff
}
/* Push footer nav to the right column */
.footer-grid > div:last-child {
  text-align: right;
  justify-self: end;
}
/* Footer right-aligned nav */
.footer-company {
  justify-self: end;   /* push block to far right in the grid */
  text-align: right;
}

.footer-company .footer-nav {
  justify-items: end;  /* align links inside to the right edge */
}

@media (max-width: 900px) {
  .footer-company {
    justify-self: center;
    text-align: center;
  }
  .footer-company .footer-nav {
    justify-items: center;
  }
}
/* Ensure header is above the intro overlay/video */
.site-header.header--transparent,
.site-header.transparent {
  z-index: 200; /* higher than overlay/video */
}

/* The intro overlay (logo) should NOT block clicks */
.intro-overlay {
  pointer-events: none;
}

/* Keep centered logo & hamburger layered correctly */
.site-header .brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 205;  /* under the button, over video */
}

.hamburger,
.menu-toggle {
  position: absolute;
  right: 0;
  z-index: 210;  /* top-most so it receives clicks */
}
/* Ensure header button is clickable and above overlays */
.site-header.header--transparent,
.site-header.transparent { z-index: 300; position: fixed; inset: 0 0 auto 0; }

.hamburger { position: absolute; right: 0; z-index: 320; }

/* Intro overlay logo should not block clicks */
.intro-overlay { pointer-events: none; }

* --- CSS-only intro logo fade (auto, no JS needed) --- */

/* Make sure overlay doesn’t block clicks */
.intro-overlay, .intro-overlay * { pointer-events: none; }

/* Initial state */
.intro-logo {
  opacity: 1;
}

/* Animate only when user hasn’t requested reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .intro-logo {
    animation: capitalLogoFade 1.5s ease 2s forwards; /* 2s delay, 1.5s fade */
  }
}

@keyframes capitalLogoFade {
  to { opacity: 0; visibility: hidden; }
}
/* ===== Intro overlay + logo positioning ===== */
.intro-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;      /* video is visible behind */
  pointer-events: none;
  opacity: 1;
  transition: opacity 2000ms ease-in-out;
}

.intro-overlay .intro-logo{
  width: 20vmin;                /* ~20% of viewport min dimension */
  max-width: 220px;             /* cap size on large screens */
  height: auto;
  display: block;
}

/* When JS triggers the fade-out */
.intro-overlay.fade-out{ opacity: 0; }

/* Hide header logo until intro completes */
.site-header .logo_img{
  opacity: 0;
  transition: opacity 800ms ease-in-out;
}

/* After intro is done, show header logo */
body.intro-done .site-header .logo_img{ opacity: 1; }

/* Reduced motion: skip fancy fades */
@media (prefers-reduced-motion: reduce){
  .intro-overlay{ transition: none; opacity: 0; }
  .site-header .logo_img{ opacity: 1; transition: none; }
}
/* --- Intro overlay: force full-screen centering & sizing --- */
.full-viewport { min-height: 100vh !important; }

/* Keep video below overlay */
.intro-video { position: relative !important; z-index: 0 !important; }

/* Force overlay to true viewport-fixed & centered */
.intro-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transition: opacity 2000ms ease-in-out !important;
}

/* Control logo size reliably */
.intro-overlay .intro-logo{
  width: min(100vmin, 1.1rem) !important; /* ~20–22% of viewport, capped */
  height: auto !important;
  display: block !important;
}

/* If any previous rules tried to absolutely position the logo, neutralize them */
.intro-overlay img { position: static !important; }

/* When fading out */
.intro-overlay.fade-out{ opacity: 0 !important; }
/* Off-canvas panel: center items */
.offcanvas{
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertical centering */
  align-items: center;       /* horizontal centering */
  text-align: center;        /* text centered */
}

/* Make nav links larger and more prominent */
.offcanvas .panel-nav a{
  font-size: 1.5rem;          /* increase font size */
  font-weight: 600;           /* bolder text */
  margin: 12px 0;             /* spacing between items */
  color: #fff;                /* ensure readable on dark panel */
  text-decoration: none;
}

.offcanvas .panel-nav a:hover{
  color: #d6b24f;             /* gold hover highlight */
}
/* --- Kill bottom gap before footer --- */

/* Remove extra space on the last scroll section / section */
.scroll-section:last-of-type,
.section:last-of-type {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Tighten footer join (optional: keep a small seam) */
.site-footer {
  margin-top: 1.5rem; /* was 3rem; lower if you want zero gap */
}

/* If an inner .container is adding space, neutralize only on the last block */
.scroll-section:last-of-type .container,
.section:last-of-type .container {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* --- Mobile header fix: swap logo, prevent AOG overlap, no overflow --- */
@media (max-width: 560px){
  .header-inner{ padding: 0.9rem 0; }

  /* Mobile-only logo: replace the URL below with your mobile logo file */
  .site-header .brand .logo_img{
    content: url('assets/images/logo-mobile.jpg'); /* <-- replace with your mobile logo path */
    height: 34px; width: auto; max-width: 100%;
    .site-header .logo { text-align: center; width: 100%; }
  }

  /* Nudge centered brand slightly right and ensure it can't collide with AOG + hamburger */
  .site-header .brand{
    left: 54%;
    max-width: calc(100% - 220px);
  }

  /* Compact controls without causing overflow */
  .hamburger, .menu-toggle{
    font-size: 1.6rem;
    padding: .2rem .4rem;
    margin-right: .4rem;
    border-width: 1.5px;
  }

  /* Keep AOG compact and single-line */
  :is(.aog, .aog-btn, .btn.aog){
    font-size: .9rem;
    padding: .35rem .6rem;
    white-space: nowrap;
    margin-right: .4rem;
  }
}

@media (max-width: 360px){
  .site-header .brand .logo_img{ height: 32px; }
  .site-header .brand{ left: 65%; max-width: calc(100% - 240px); }
  :is(.aog, .aog-btn, .btn.aog){ font-size:.85rem; padding:.3rem .5rem; }
}
/* =========================================
   Careers page — FORCE wider container/bubble
   ========================================= */

/* 1) Bump the site container width for this page */
:root { --container-max: 1600px; }

body.careers .container {
  max-width: var(--container-max, 1600px) !important;
}

/* 2) Ensure the Apply section uses the full width */
body.careers .section.container.apply-wrap {
  max-width: var(--container-max, 1600px) !important;
  width: 100% !important;
}

/* 3) Make the message bubble fill the container */
body.careers .apply-wrap .bubble {
  display: block;
  width: 100% !important;
  max-width: none !important;   /* remove any fixed bubble cap */
  box-sizing: border-box;
  min-height: 600px;            /* keep it tall as requested */
  padding-left: clamp(16px, 3vw, 48px);
  padding-right: clamp(16px, 3vw, 48px);
}

/* Optional: add a comfortable max on very large monitors
   (remove if you truly want edge-to-edge inside the container) */
@media (min-width: 1920px) {
  body.careers .apply-wrap .bubble {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
}