:root {
  color-scheme: light;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow-x: clip; /* the airbus overlay header runs a touch wide on desktop; clip avoids a page-wide horizontal scrollbar without breaking the fixed header */
}

body {
  background: #fff;
}

.captured-route {
  min-height: 100vh;
}

.site-logo__text {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: currentColor;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: uppercase;
}

.jackson-logo-kicker {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.awx-page-header .site-logo {
  text-decoration: none;
}

.awx-page-header .jackson-brand-lockup {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jackson-contact-pill {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  white-space: nowrap;
}

.jackson-contact-pill a {
  color: inherit;
  text-decoration: none;
}

.awx-hero__media img,
.awx-card__picture img,
.awx-announcement img,
.jackson-local-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.awx-hero__media .jackson-local-image {
  min-height: 100vh;
}

.awx-card__picture .jackson-local-image,
.awx-announcement .jackson-local-image {
  aspect-ratio: 16 / 10;
}

.awx-section__content.jackson-grid,
.jackson-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 32px);
}

.jackson-grid.jackson-grid--wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.jackson-grid .awx-card {
  height: 100%;
}

/* Cards MUST fill their grid cell. The base .awx-card is width:260px and
   .awx-card--overlay (+ its __link) are hardcoded width:320px, which overflowed the
   ~188px repeat(3,minmax(0,1fr)) columns and made every card overlap the next. */
.jackson-grid .awx-card,
.jackson-grid .awx-card--overlay,
.jackson-grid .awx-card--overlay .awx-card__link {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.jackson-copy-stack {
  display: grid;
  gap: 1.15rem;
}

.jackson-copy-stack p {
  margin: 0;
}

.jackson-service-body {
  max-width: 980px;
}

.jackson-index-copy {
  max-width: 820px;
}

.jackson-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.jackson-detail-layout .awx-media {
  position: sticky;
  top: 96px;
}

.jackson-contact-lines {
  display: grid;
  gap: 12px;
}

.jackson-contact-lines a {
  color: inherit;
}

.jackson-footer-note {
  max-width: 100%;
}

/* FOOTER LAYOUT FIX: .awx-page-footer-inner was a non-wrapping flex row, so the contact
   note + map overflowed the viewport and were cut off on the right. Wrap + full-width-stack
   the top-level footer sections, lay the footer link groups out as responsive columns, and
   constrain the map so nothing exceeds the page width. */
.awx-page-footer-inner {
  flex-wrap: wrap !important;
  gap: clamp(28px, 4vw, 56px) !important;
  align-items: start !important;
}
.awx-page-footer-inner > * {
  flex: 1 1 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.awx-menu-footer .awx-menu-list--level0 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 18px 32px !important;
}
.jackson-footer-note,
.jackson-footer-map,
.jackson-footer-map iframe {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.jackson-footer-map iframe { border: 0; min-height: 300px; display: block; }

.jackson-hidden-source-media,
iframe[src*="airbus"],
video source[src*="airbus"],
img[src*="airbus"],
source[srcset*="airbus"] {
  display: none !important;
}

.awx-menu-list__item.is-open > .awx-menu-list__wrapper,
.awx-menu-list-state:checked ~ .awx-menu-list__wrapper {
  display: block;
}

.awx-card__link,
.awx-card__link:hover,
.awx-card__link:focus {
  text-decoration: none;
}

.jackson-form {
  display: grid;
  gap: 18px;
  max-width: 720px;
}

.jackson-form label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.jackson-form input,
.jackson-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid currentColor;
  border-radius: 0;
  padding: 14px 16px;
  font: inherit;
}

.jackson-form textarea {
  min-height: 140px;
}

@media (max-width: 960px) {
  .awx-section__content.jackson-grid,
  .jackson-grid,
  .jackson-grid.jackson-grid--wide,
  .jackson-detail-layout {
    grid-template-columns: 1fr;
  }

  .jackson-detail-layout .awx-media {
    position: relative;
    top: auto;
  }

  .jackson-contact-pill {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

/* Jackson hero: cap airbus's 112px title so our roofing headlines fit the hero band without clipping */
.awx-hero__title { font-size: clamp(2.2rem, 4.4vw, 4rem) !important; line-height: 1.08 !important; overflow-wrap: break-word; }

/* ===== airbus "Menu" header: logo + a single Menu button that opens the full drawer nav ===== */
header.awx-page-header { display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 84px; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100vw !important; margin: 0 !important; transform: none !important; box-sizing: border-box !important; }
.ynhlv-menu-btn { position: static !important; display: inline-flex !important; align-items: center; gap: 9px; margin-left: auto !important; inset: auto !important; transform: none !important; padding: 12px 6px 12px 16px; color: #071a3d; font: 700 14px/1 'Inter', sans-serif; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; background: none; cursor: pointer; }
.ynhlv-menu-btn:hover { color: #3860be; }
.ynhlv-menu-btn .ynhlv-menu-bars { display: block; width: 26px; height: 2px; background: currentColor; box-shadow: 0 -8px 0 currentColor, 0 8px 0 currentColor; flex: 0 0 auto; }
/* drawer: dark site-navy panel + readable white links (all sizes) + a visible close (×) */
.awx-menu-drawer, .awx-menu-dialog-drawer, .awx-menu-drawer .awx-menu-list__wrapper { background: #071a3d !important; }
.awx-menu-drawer { box-shadow: 0 0 40px rgba(0,0,0,.4); }
.awx-menu-drawer a, .awx-menu-drawer label, .awx-menu-drawer span, .awx-menu-drawer .awx-menu-link { color: #fff !important; }
.awx-menu-drawer .awx-menu-list--level0 > .awx-menu-list__item > a, .awx-menu-drawer .awx-menu-list__link--level0 { font-weight: 700; }
.awx-menu-drawer .awx-menu-drawer-toggler__button { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: #fff; }
.awx-menu-drawer .awx-menu-drawer-toggler__button::before { content: "\00d7"; font: 400 34px/1 'Inter', sans-serif; color: #fff; }

@media (min-width: 1024px) {
  .awx-hero__body { position: absolute !important; top: 19% !important; left: 64px !important; right: auto !important; bottom: auto !important; max-width: 58% !important; margin: 0 !important; z-index: 2; }
  .awx-hero .awx-node-push { position: absolute; z-index: 3; right: 48px; bottom: 7%; left: auto; top: auto; max-width: 400px; margin: 0; }
}

@media (max-width: 1023px) {
  .ynhlv-menu-btn .ynhlv-menu-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* icon-only on mobile */
  /* hero: stack title above the promo card (no overlap) */
  .awx-hero__body { position: relative !important; top: auto !important; left: auto !important; right: auto !important; max-width: 100% !important; margin: 0 !important; padding: 96px 20px 8px !important; z-index: 2; }
  .awx-hero .awx-node-push { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; margin: 4px 16px 28px !important; max-width: none !important; }
  .awx-hero__title { font-size: 2.1rem !important; }
}

/* =====================================================================
   MOBILE OPTIMIZATION + HAMBURGER HARDENING (Pass B)
   ===================================================================== */

/* --- No horizontal overflow at 375px: media never wider than its column --- */
html, body { max-width: 100%; }
img, svg, video, iframe, canvas, audio, embed, object { max-width: 100%; }
img, video { height: auto; }
.awx-section, .awx-section__content, .captured-route { max-width: 100%; }
/* let wide tables / code scroll inside their own box instead of pushing the page */
table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
pre { max-width: 100%; overflow-x: auto; }
/* embedded maps stay inside the viewport */
iframe[src*="google.com/maps"], iframe[src*="maps."] { width: 100%; max-width: 100%; }

/* --- Form: Timeline <select> matches the themed text inputs; comfortable tap height --- */
.jackson-form select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid currentColor;
  border-radius: 0;
  padding: 14px 16px;
  font: inherit;
  background: #fff;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23071a3d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  min-height: 48px;
}
.jackson-form input,
.jackson-form textarea { min-height: 48px; }
.jackson-form textarea { min-height: 140px; }

/* --- Hamburger drawer: click-to-close scrim overlay + body scroll-lock --- */
.jackson-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 96; /* below the drawer (98), above page content */
  background: rgba(7, 26, 61, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms ease-in-out, visibility 240ms ease-in-out;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.jackson-menu-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
html.jackson-drawer-open,
html.jackson-drawer-open body { overflow: hidden; }
.awx-menu-drawer { z-index: 98; max-width: 100%; }
/* the close (×) sits clearly top-right and is an easy tap target */
.awx-menu-drawer .awx-menu-drawer-toggler__button { min-width: 48px; min-height: 48px; }

/* --- Tap targets: nav links + menu button comfortably tappable --- */
.ynhlv-menu-btn { min-height: 44px; }
.awx-menu-drawer .awx-menu-list__link { min-height: 44px; display: flex; align-items: center; }

/* =====================================================================
   @media (max-width: 768px) — phone layout
   ===================================================================== */
@media (max-width: 768px) {
  /* multi-column decks stack to a single column with sensible gaps */
  .awx-section__content.jackson-grid,
  .jackson-grid,
  .jackson-grid.jackson-grid--wide,
  .jackson-detail-layout {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  /* trim section padding so content isn't lost to whitespace on a phone */
  .awx-section { padding-left: 16px !important; padding-right: 16px !important; }
  .awx-section__content { padding-left: 0 !important; padding-right: 0 !important; }
  .captured-route { padding-left: 0; padding-right: 0; }

  /* readable body copy + room from the screen edge */
  body { font-size: 16px; line-height: 1.6; }
  .jackson-copy-stack p, .jackson-service-body p, .jackson-index-copy p { font-size: 16px; }

  /* hero headline scales down with the viewport */
  .awx-hero__title { font-size: clamp(1.9rem, 8vw, 2.4rem) !important; }

  /* the lead form goes full width and stacks; button is easy to tap */
  .jackson-form { max-width: 100%; gap: 16px; }
  .jackson-form .awx-button,
  .jackson-form button[type="submit"] { width: 100%; min-height: 50px; }

  /* footer columns stack */
  .awx-footer__content, .awx-footer .awx-grid { grid-template-columns: 1fr !important; }
}

/* very small phones (<=375px): keep everything inside the viewport */
@media (max-width: 400px) {
  .awx-hero__title { font-size: 1.8rem !important; }
  .awx-section { padding-left: 14px !important; padding-right: 14px !important; }
}

/* brand-logo sizing (added with brand logo + favicons) */
/* header background is light/white on every page type (home + interior) -> use BLACK logo */
.awx-page-header .site-logo { display: inline-flex; align-items: center; }
.brand-logo { height: 32px; width: auto; max-width: 300px; display: block; }
.site-logo .brand-logo--light { display: none; }
.site-logo .brand-logo--dark { display: block; }
@media (max-width: 600px) { .brand-logo { height: 26px; } }