/* Home page fixes (page review 2026-10-15).
   The page's own styles sit in an inline <style> inside <body>, which comes AFTER this file,
   so every rule here is prefixed with .cn-section (or more) to out-rank them. */

/* ---- Clients logo grid: complete box on every width ----
   The original drew the grid's top/left edge but dropped the right/bottom edge (and, on phones,
   left a gap under the U.S. Army cell). 12 logos fill 4, 3 and 2 columns exactly, so every cell
   gets a right and bottom line and the grid keeps its top and left line. */
.cn-section .cn-clients-grid .cn-client:nth-child(n) {
  border-right: 1px solid #e4e9f0;
  border-bottom: 1px solid #e4e9f0;
}

/* ---- Clients logo grid: every logo big in its box (Bennett 2026-11-06: "make sure that the logos are big and fit the box").
   The files are cropped to the mark (tools/make_client_logos.py), and each one now fills the box: wide wordmarks up to
   82% of the width, round badges up to 70% of the height, whichever it reaches first. */
.cn-section .cn-clients-grid .cn-client { padding: 22px; }
.cn-section .cn-clients-grid .cn-client img { width: 100%; height: 100%; max-width: 82%; max-height: 70%; object-fit: contain; }

/* ---- Hero slideshow ---- */
/* The "Learn More" underline ran the full width of the slide (1160px on desktop); hug the text. */
.cn-section .cn-slide-content .cn-slide-cta { align-self: flex-start; }

/* Design rule 7 (frosted glass): solid navy arrow buttons instead of a backdrop blur. */
.cn-section .cn-hero .cn-slide-arrow {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(10, 40, 90, 0.6);
}
.cn-section .cn-hero .cn-slide-arrow:hover { background: rgba(10, 40, 90, 0.85); }

/* The dots are 2px tall: give each an invisible 44px-tall tap area (clicks land on the dot). */
.cn-section .cn-slide-dots .cn-dot { position: relative; }
.cn-section .cn-slide-dots .cn-dot::before {
  content: "";
  position: absolute;
  left: -7px; right: -7px; top: -21px; bottom: -21px;
}

/* Keyboard focus that shows on the navy hero and on the white cards. */
.cn-section .cn-slide-arrow:focus-visible,
.cn-section .cn-slide-link:focus-visible,
.cn-section .cn-cta-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}
.cn-section .cn-slide-link:focus-visible { outline-offset: -6px; }
.cn-section .cn-service:focus-visible {
  outline: 2px solid #0A285A;
  outline-offset: 3px;
}

/* Reduced-motion visitors only got slide 1 (the others are display:none), so pressing an arrow
   blanked the hero. Let the arrows show the other slides, without the fade. */
@media (prefers-reduced-motion: reduce) {
  .cn-section .cn-hero.cn-manual .cn-slide:nth-child(n) { display: block; transition: none; }
  .cn-section .cn-hero.cn-manual .cn-slide-bg { transition: none; transform: none; }
}

/* iPad landscape / small laptops (901-1400px): the left arrow sat on top of the slide title
   ("Public Safety." ran under it at 1180px). Keep the text clear of both arrows. */
@media (min-width: 901px) {
  .cn-section .cn-hero .cn-slide-content {
    padding-left: max(60px, min(120px, calc(120px - (100vw - 1280px) / 2)));
    padding-right: max(60px, min(120px, calc(120px - (100vw - 1280px) / 2)));
  }
}

/* Design rule 8 (oversized headlines): hero title 108px -> 88px on wide screens
   (the page already drops it to 84px at 1100px and below). */
@media (min-width: 1101px) {
  .cn-section .cn-hero .cn-slide-title { font-size: 88px; letter-spacing: -3px; }
}

/* Phones and iPad portrait: the arrows sat mid-screen on top of the eyebrow/title text.
   Move them to the bottom corners, level with the dots, and lift the text to clear them. */
@media (max-width: 900px) {
  .cn-section .cn-hero .cn-slide-arrow,
  .cn-section .cn-hero .cn-slide-arrow:hover {
    top: auto;
    bottom: 17px;
    transform: none;
  }
  .cn-section .cn-hero .cn-slide-content { padding-bottom: 104px; }
}

/* Phones: the seven dots ran edge to edge (9px from each side); make them shorter so they fit
   between the arrows. Same timing as the page's own dot animation. */
@keyframes hi-dot-fade-sm {
  0%    { background: rgba(255,255,255,0.3); width: 18px; }
  2.5%  { background: #ffffff; width: 36px; }
  12%   { background: #ffffff; width: 36px; }
  14.5% { background: rgba(255,255,255,0.3); width: 18px; }
  100%  { background: rgba(255,255,255,0.3); width: 18px; }
}
@media (max-width: 560px) {
  .cn-section .cn-hero .cn-slide-dots { gap: 8px; }
  .cn-section .cn-hero .cn-slide-dots .cn-dot { width: 18px; }
  .cn-section .cn-hero .cn-slide-dots .cn-dot::before { left: -4px; right: -4px; }
  .cn-section .cn-hero:not(.cn-manual) .cn-slide-dots .cn-dot { animation-name: hi-dot-fade-sm; }
  .cn-section .cn-hero.cn-manual .cn-slide-dots .cn-dot { width: 18px; }
  .cn-section .cn-hero.cn-manual .cn-slide-dots .cn-dot.cn-active { width: 36px; }
}

/* ---- Headings: no one-word last lines ("counts." alone on phones, etc.) ---- */
.cn-section h1, .cn-section h2, .cn-section h3 { text-wrap: balance; }

/* ---- Phones: the sections below the hero had a 44px side gutter (20px section padding plus
   24px container padding) while the hero uses 24px; cards and logos were squeezed. ---- */
@media (max-width: 560px) {
  .cn-section .cn-section-pad,
  .cn-section .cn-section-pad-sm,
  .cn-section .cn-section-pad-tight { padding-left: 0; padding-right: 0; }
  /* the navy "Our Team & Story" band has no inner container, so it keeps its own 20px */
  .cn-section .cn-about.cn-section-pad { padding-left: 20px; padding-right: 20px; }
}

/* ---- Services cards ---- */
/* The white "02 / Programs" tags were unreadable on light skies (Government, Charter, Utility):
   a light navy shade behind the top of each photo, like the one the cards already have at the bottom. */
.cn-section .cn-service-image-wrap::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(10,40,90,0.55) 0%, rgba(10,40,90,0) 100%);
  z-index: 1;
  pointer-events: none;
}
/* Design rule 14 (shadows): hover lifts the card with a navy hairline instead of an 80px shadow. */
.cn-section .cn-services-grid .cn-service:hover {
  box-shadow: none;
  border-color: rgba(10, 40, 90, 0.35);
}

/* ---- FAA certifications ---- */
/* Design rule 14 (shadows): the same hairline hover as the service cards. */
.cn-section .cn-faa-grid .cn-faa-cert:hover {
  box-shadow: none;
  border-color: rgba(10, 40, 90, 0.35);
}
/* Two columns on phones/iPad left Part 145 alone on the last row: let it span the row. */
@media (max-width: 900px) {
  .cn-section .cn-faa-grid .cn-faa-cert:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Phones: the card labels were 12-13px. */
@media (max-width: 560px) {
  .cn-section .cn-faa-grid .cn-faa-cert { padding-left: 14px; padding-right: 14px; }
  .cn-section .cn-faa-cert .cn-faa-label { font-size: 14px; }
  .cn-section .cn-faa-cert .cn-faa-sub { font-size: 13px; }
}

/* ---- "When every second counts." photo ---- */
/* iPad portrait: the 520px photo strip cut off the helicopter's rotor and most of the boat.
   A slightly taller strip framed a little higher shows both. */
@media (min-width: 561px) and (max-width: 900px) {
  .cn-section .cn-showcase .cn-showcase-image-col { min-height: 640px; }
  .cn-section .cn-showcase .cn-showcase-image { background-position: center 35%; }
}

/* ---- Stats ("1981 / 100% / Nationwide") ---- */
/* Design rule 8 (oversized headlines): stat numbers 140px -> 112px on wide screens. */
@media (min-width: 1101px) {
  .cn-section .cn-stats .cn-stat-num { font-size: 112px; letter-spacing: -4px; }
  /* keep the "Nationwide" label level with the other two labels (inline padding-top was 30px) */
  .cn-section .cn-stats .cn-stat:nth-child(3) .cn-stat-num { padding-top: 17px !important; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  /* 100px numbers here: 6px keeps the "Nationwide" label level (the inline 30px dropped it 24px) */
  .cn-section .cn-stats .cn-stat:nth-child(3) .cn-stat-num { padding-top: 6px !important; }
}
@media (max-width: 900px) {
  /* Stacked stats: the inline 30px top padding (meant to line "Nationwide" up with the big
     numbers side by side) only added a gap. minmax(0,1fr) stops a wide word widening the grid. */
  .cn-section .cn-stats { grid-template-columns: minmax(0, 1fr); }
  .cn-section .cn-stats .cn-stat:nth-child(3) .cn-stat-num { padding-top: 0 !important; }
}
@media (max-width: 560px) {
  /* "Nationwide" (inline 84px) ran off the right edge of phones and pushed 1981 / 100% off-centre. */
  .cn-section .cn-stats .cn-stat:nth-child(3) .cn-stat-num { font-size: 56px !important; letter-spacing: -1px !important; }
  /* The tagline wrapped with the bullet dangling at the end of line 1: break at the bullet instead. */
  .cn-section .cn-about-tagline .dot { display: block; height: 0; margin: 0; overflow: hidden; }
}

/* ---- Clients ---- */
/* Phones: 40px padding in each cell made the logos tiny. */
@media (max-width: 560px) {
  .cn-section .cn-clients-grid .cn-client { padding: 18px; }
}

/* Hidden hero slides were still in the keyboard Tab order (focus landed on invisible links after the menu).
   Each slide is now visibility:hidden whenever it isn't the one showing, in step with the fade. */
@keyframes hx-slide-vis { 0% { visibility: hidden; } 0.01%, 14.5% { visibility: visible; } 14.51%, 100% { visibility: hidden; } }
@media (prefers-reduced-motion: no-preference) {
  .cn-section .cn-hero:not(.cn-manual) .cn-slide { visibility: hidden; animation-name: cn-slide-fade, hx-slide-vis; animation-duration: 35s; animation-iteration-count: infinite; }
  .cn-section .cn-hero.cn-manual .cn-slide { transition: opacity .9s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s .9s; }
  .cn-section .cn-hero.cn-manual .cn-slide.cn-active { transition: opacity .9s cubic-bezier(0.4, 0, 0.2, 1); }
}
.cn-section .cn-hero.cn-manual .cn-slide:not(.cn-active) { visibility: hidden; }

/* phones: the FAA card descriptions are sentences, so 14px; the smallest labels no smaller than 11-12px */
@media (max-width: 767px) {
  .cn-section .cn-faa-cert .cn-faa-sub { font-size: 14px; }
  .cn-section .cn-client .cn-client-name { font-size: 11px; }
  .cn-section .cn-about-inner .cn-about-tagline { font-size: 12px; }
}

/* ==== Section headings: one size per screen width (font pass, 2026-10-16) ====
   Bennett said "sure" to evening these out. The section headings below the hero ran from 44 to 84px on desktop
   ("What we do." 72, "We do things differently." / "Above it all." / "Hundreds of years..." / "Let our experts..."
   84, "When every second counts." 76, "Certified..." 60, "Trusted..." 56, "Nationwide coverage." 44), with the
   same spread on iPads. Design rule 8 (oversized headlines): one size per width, close to the other pages'
   38-46px section headings. The hero slide titles and the service-card titles are left as they are. */
body .cn-section h2:not(.cn-slide-title) { font-size: 48px; line-height: 1.1; letter-spacing: -1px; }
@media (max-width: 1100px) { body .cn-section h2:not(.cn-slide-title) { font-size: 44px; } }
@media (max-width: 900px)  { body .cn-section h2:not(.cn-slide-title) { font-size: 40px; } }
@media (max-width: 560px)  { body .cn-section h2:not(.cn-slide-title) { font-size: 32px; } }

/* ==== Map stats as real text (map section only; polish 2026-10-16) ====
   "70+ Aircraft / 30+ Operating Bases / Own | Operate | Support / One Network" were letters cut into the
   picture's navy box, about 9px tall on phones. The map is now a copy with that box left empty
   (/images/nationwide-coverage-map.png) and the same words sit in it as real text (classic/fixes/home.json).
   The box covers parts of eight states (two completely), so the map can't be shown without it.
   Wide screens: the text box sits exactly over the picture's box and scales with the map.
   Phones: the text stays 14px, so the box grows around the same centre. */
.cn-section .cn-map .hi-map-figure {
  position: relative;
  container-type: inline-size;
}
.cn-section .cn-map .hi-map-figure img { width: 100%; }
.cn-section .cn-map .hi-map-stats {
  position: absolute;
  left: 33.36%;                       /* centre of the picture's box and its thin shadow (596, 290 of 1788 x 1094) */
  top: 26.46%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: max-content;
  min-width: 38.2%;                   /* the picture's box is 37.8% x 27.7% of the map: cover it with a little to spare */
  min-height: 28.3%;
  margin: 0;
  padding: 0.5em 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #001645;                /* the box's own navy */
  border-radius: 4px;
  color: #ffffff;
  font-weight: 700;
  font-size: calc(min(1200px, 100vw - 40px) * 0.026);   /* fallback where cqw isn't supported */
  font-size: 2.6cqw;
  line-height: 1.32;
  letter-spacing: 0;
  text-align: center;
}
.cn-section .cn-map .hi-map-stats > span { display: block; white-space: nowrap; }
@media (max-width: 600px) {
  /* anchored near the left edge (not centred) so it never runs off small phones; still covers the picture's box */
  .cn-section .cn-map .hi-map-stats {
    left: 3%;
    transform: translateY(-50%);
    min-width: 50%;
    font-size: 14px;
    padding: 8px 12px;
    line-height: 1.3;
  }
}

/* ==== Font pass (2026-10-16), continued: phone eyebrows ====
   Phones: Montserrat (the site's label font since the font pass) is wider than the system font these labels had,
   so "Ready to Talk" and "Electronic News Gathering" broke onto two lines. Slightly tighter letter spacing, and
   the "Ready to Talk" side lines 40px like the hero's. */
@media (max-width: 560px) {
  body .cn-section .cn-slide-eyebrow { letter-spacing: 3px; }
  body .cn-section .cn-cta-eyebrow { letter-spacing: 3px; padding-left: 54px; padding-right: 54px; }
  body .cn-section .cn-cta-eyebrow::before, body .cn-section .cn-cta-eyebrow::after { width: 40px; }
}
/* iPad landscape / small laptops: "Founded in the Midwest" under 1981 broke onto two lines in Montserrat. */
@media (min-width: 901px) and (max-width: 1300px) {
  body .cn-section .cn-stats .cn-stat-label { letter-spacing: 3px; }
}

/* ---- Clients logo grid: 13 logos (2026-11-12, Kansas City Police added). 13 doesn't fill 4, 3 or 2 columns, so the grid
   is a centred wrap instead: full rows as before, and the last logo sits in the middle of its row. Each cell draws its
   own lines (shadows, so neighbouring lines overlap into one instead of doubling). ---- */
.cn-section .cn-clients-grid { display: flex !important; flex-wrap: wrap; justify-content: center; border: 0 !important; }
.cn-section .cn-clients-grid .cn-client:nth-child(n) { flex: 0 0 25%; box-sizing: border-box; border: 0 !important;
  box-shadow: 1px 0 0 0 #e4e9f0, 0 1px 0 0 #e4e9f0, 1px 1px 0 0 #e4e9f0, inset 1px 0 0 0 #e4e9f0, inset 0 1px 0 0 #e4e9f0; }
@media (max-width: 1100px) { .cn-section .cn-clients-grid .cn-client:nth-child(n) { flex-basis: 33.3333%; } }
@media (max-width: 560px) { .cn-section .cn-clients-grid .cn-client:nth-child(n) { flex-basis: 50%; } }

/* ---------- Flow pass (2026-11-12): Why Us + Our Mission side by side, on the light band the mission used ---------- */
.cn-section .cn-pair { background: #f6f8fb; }
.cn-section .cn-pair-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.cn-section .cn-pair-col { border-top: 2px solid #0A285A; padding-top: 28px; text-align: left; }
.cn-section .cn-pair-col .cn-eyebrow-wrap { margin: 0 0 12px; justify-content: flex-start; }
.cn-section .cn-pair-col .cn-title { text-align: left; margin-bottom: 18px; }
.cn-section .cn-pair-col p { margin: 0; font-size: 17px; line-height: 1.75; color: #475569; text-align: left; }
@media (max-width: 899px) { .cn-section .cn-pair-inner { grid-template-columns: 1fr; gap: 48px; } }
/* (flow pass) the pair sits on navy: the news section above it is already on the light band */
.cn-section .cn-pair { background: #0A285A; }
.cn-section .cn-pair-col { border-top-color: #c9d9f0; }
.cn-section .cn-pair-col .cn-eyebrow { color: #c9d9f0; }
.cn-section .cn-pair-col .cn-eyebrow::before, .cn-section .cn-pair-col .cn-eyebrow::after { background: #c9d9f0; }
.cn-section .cn-pair-col .cn-title, .cn-section .cn-pair-col .cn-title strong { color: #ffffff !important; }
.cn-section .cn-pair-col p { color: #dbe5f3; }
.cn-section .cn-pair-col p strong { color: #ffffff; }