/* ============================================================
   Air 8 Industries — styles.css
   ------------------------------------------------------------
   HOW THIS FILE IS ORGANISED (read in this order):
   1. Variables      - our colours, fonts and spacing in ONE place
   2. Base / resets  - sensible defaults for the whole page
   3. Layout helpers - .container, .grid-2, .cards
   4. Components      - header, hero, cards, form, footer...
   5. Responsive      - phone adjustments at the very bottom

   TIP: change a colour once in :root and it updates everywhere.
   ============================================================ */

/* 1. VARIABLES ------------------------------------------------ */
:root {
  /* Brand palette (kept close to your navy + amber identity) */
  --navy:      #12305f;   /* primary corporate blue        */
  --navy-deep: #0d2140;   /* darker sections               */
  --ink:       #0f1b2d;   /* main text                     */
  --amber:     #f2a93b;   /* the single accent colour      */
  --steel:     #5b6b82;   /* secondary / muted text        */
  --line:      #e2e8f0;   /* hairline borders              */
  --bg:        #f6f8fb;   /* airy off-white page background */
  --surface:   #ffffff;   /* cards                         */

  /* Fonts */
  --font-display: "Space Grotesk", system-ui, sans-serif; /* headlines */
  --font-body:    "Inter", system-ui, sans-serif;         /* paragraphs */
  --font-mono:    "Space Mono", monospace;                /* small labels */

  /* Spacing + shape */
  --radius: 14px;
  --max-width: 1120px;
  --section-y: 6rem;      /* vertical padding inside sections */
}

/* 2. BASE / RESETS ------------------------------------------- */
* { box-sizing: border-box; }          /* padding never overflows widths */

html {
  scroll-behavior: smooth;
  font-size: 17px;           /* was 16px — makes all rem-based text easier to read */
  scroll-padding-top: 88px;  /* so "#about" jumps land below the sticky header */
  scrollbar-gutter: stable;  /* reserve scrollbar space -> modal no longer shifts the page */
  overflow-x: clip;          /* stops accidental left/right scrolling on mobile */
}      /* nav links glide instead of jump */

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Visually-hidden text (for screen readers only) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0;
}

/* Keyboard users must always see where focus is */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

/* 3. LAYOUT HELPERS ------------------------------------------ */
/* .container centres content and gives it side padding */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section { padding: var(--section-y) 0; }
.section--tint { background: #eef2f8; }
.section--dark { background: var(--navy-deep); }

/* Two-column grid that stacks on mobile (see responsive section) */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

/* Card grids */
.cards { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(2, 1fr); }
.cards--triple { grid-template-columns: repeat(3, 1fr); }

/* Shared small "eyebrow" label above headings — echoes your catalog codes */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 0.9rem;
}
.eyebrow--light { color: var(--amber); }
.eyebrow--center {
  text-align: center;
}

.section__title {
  font-size: clamp(1.7rem, 4vw, 2.6rem);  /* grows with screen width */
  font-weight: 700;
  color: var(--navy);
  max-width: 20ch;
}
.section__title--center { margin: 0 auto; text-align: center; max-width: 24ch; }
.section__title--light { color: #fff; }

.prose { color: var(--steel); font-size: 1.05rem; margin-top: 1.1rem; max-width: 46ch; }
.prose strong { color: var(--ink); }

/* Buttons ---------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn--primary { background: orange ; color: #fff; }
.btn--primary:hover { background: var(--navy-deep); transform: translateY(-2px); }
.btn--ghost { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn--ghost:hover { background: var(--navy); color: #fff; }

/* 4. COMPONENTS ---------------------------------------------- */

/* HEADER */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 248, 251, 0.85);
  backdrop-filter: blur(10px);          /* frosted glass under the bar */
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.brand__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--navy);
  letter-spacing: 0.02em;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--steel);
  letter-spacing: 0.02em;
}

.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a { font-size: 0.95rem; color: var(--ink); font-weight: 500; }
.nav a:hover { color: var(--navy); }
.nav__cta {
  background: var(--amber); color: var(--ink) !important;
  padding: 0.5rem 1.1rem; border-radius: 999px; font-weight: 600;
}
.nav__cta:hover { filter: brightness(0.95); }

/* "Products" hover dropdown — jump straight to a brand's filtered catalog. */
.nav__item { position: relative; }
.nav__item > a::after {
  content: "▾"; display: inline-block; margin-left: 0.3em;
  font-size: 0.7em; color: var(--steel);
}
.nav__dropdown {
  display: none;
  flex-direction: column;
  /* Flush against the link (no margin-top gap) — a gap here is a dead
     zone the mouse crosses with nothing under it, which drops :hover
     and closes the menu before you can reach it. padding-top gives the
     same visual breathing room without breaking the hover chain. */
  position: absolute; top: 100%; left: 0;
  min-width: 170px; padding: 0.65rem 0.4rem 0.4rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 28px rgba(15, 27, 45, 0.14);
  z-index: 20;
}
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown {
  display: flex;
}
.nav__dropdown a {
  padding: 0.55rem 0.7rem; border-radius: 7px; white-space: nowrap;
}
.nav__dropdown a:hover { background: var(--bg); color: var(--navy); }

/* Hamburger button — hidden on desktop, shown on mobile (or a narrow
   desktop window, which is still mouse-driven, so it needs a hover cue
   like every other interactive control on the site). */
.nav-toggle {
  display: none;
  flex-direction: column; gap: 5px;
  background: none; border: 0; border-radius: 8px; cursor: pointer; padding: 8px;
  transition: background 0.15s ease, transform 0.1s ease;
}
.nav-toggle:hover { background: rgba(18, 48, 95, 0.08); }
.nav-toggle:active { transform: scale(0.92); }
.nav-toggle__bar { width: 24px; height: 2px; background: var(--navy); border-radius: 2px; transition: background 0.15s ease; }
.nav-toggle:hover .nav-toggle__bar { background: var(--amber); }

/* HERO
   Background photo goes at public/images/hero.jpg (drop in a wide,
   roughly 1920x1080+ landscape shot — it'll auto-scale/crop via
   background-size:cover). Until that file exists this ::before is
   simply invisible, so the hero looks unchanged. The ::after is the
   black overlay: low opacity so the photo stays visible underneath
   while keeping the white/amber text readable on top of it. */
/* .hero { position: relative; overflow: hidden; padding: 6rem 0 5rem; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: url("images/hero.jpg");
  background-size: cover; background-position: center;
} */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: rgba(0, 0, 0, 0.4);
}
.hero__inner { position: relative; z-index: 2; }
.hero__title {
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 700; color: #fff;
  margin-bottom: 1.4rem;
}
.hero__lead { font-size: 1.15rem; color: #e7ecf5; max-width: 48ch; margin-bottom: 2rem; }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero .btn--ghost { border-color: #fff; color: #fff; }
.hero .btn--ghost:hover { background: #fff; color: var(--navy); }

/* PARTNERS */
.partners { 
  border-top: 1px solid var(--line); 
  border-bottom: 1px solid var(--line); 
  background: var(--surface); 
}

/* Label sits ABOVE the logo row (not inline beside it). Inline, the
   "Authorized distributor of" label ate ~190px of the 1120px container,
   which left too little room for three brand blocks — they were being
   force-shrunk into one row and their nowrap text overflowed onto the
   next brand's logo. Stacking the label on top hands the full width to
   the three partners so they fit in one clean row. */
.partners__inner {
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

.partners__label {
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--steel);
  text-align: center;
}

.partners__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  /* wrap (not nowrap) so a too-narrow window wraps a brand to the next
     line cleanly instead of overlapping the neighbour. */
  flex-wrap: wrap;
  gap: 1.25rem 2.25rem; /* row-gap  column-gap */
}

/* Each brand is a compact lockup: logo on the left, spanning two rows,
   with the name stacked over its origin line on the right. This halves
   each brand's width vs. the old logo-name-origin single row, which is
   what lets all three sit side by side without shrinking/overlap. */
.partner {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 1rem;
  align-items: center;
}

.partner__logo {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: block;
  max-width: 116px;
  max-height: 68px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.partner__name {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--navy);
  white-space: nowrap;
  line-height: 1.15;
}

.partner__origin {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.78rem;
  color: var(--steel);
  white-space: nowrap;
}


/* GENERIC CARD (capabilities) */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2rem;
}
.card__index { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.15em; color: var(--amber); margin-bottom: 1rem; }
.card__title { font-size: 1.4rem; color: var(--navy); margin-bottom: 0.6rem; }
.card__body { color: var(--steel); }

/* PRODUCT CARD */
.product {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.75rem;
  border-top: 3px solid var(--amber);           /* amber accent edge */
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.product:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 27, 45, 0.10); }
.product__brand { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel); }
.product__title { font-size: 1.2rem; color: var(--navy); margin: 0.5rem 0 0.6rem; }
.product__body { color: var(--steel); font-size: 0.95rem; }

/* VALUES (dark section) */
.values { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.values li { color: #c8d3e4; border-left: 2px solid var(--amber); padding-left: 1.1rem; }
/* First span = the value's label (bold heading); any following span is the
   description text, which should keep the muted body style, not the heading. */
.values li span:first-child { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: #fff; margin-bottom: 0.25rem; }

/* CONTACT */
.grid-2--contact { gap: 3.5rem; }
.contact-details { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.1rem; }
.contact-details li { display: grid; gap: 0.15rem; }
/* First span = the amber field label; a following span (address/phone value)
   stays normal body text rather than inheriting the tiny uppercase label style. */
.contact-details span:first-child { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
.contact-details a { color: var(--navy); }
/* Phone holds several numbers — render them one per line (the content
   value carries the line breaks) instead of one cluttered middot-run. */
.contact-details__stack { white-space: pre-line; }

/* FORM */
.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; }
.field { margin-bottom: 1.1rem; display: grid; gap: 0.4rem; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.field__optional { font-weight: 400; color: var(--steel); }
.field input, .field textarea, .field select {
  font-family: var(--font-body); font-size: 1rem;
  padding: 0.7rem 0.85rem; border: 1.5px solid var(--line);
  border-radius: 8px; background: #fbfcfe; color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--navy); outline: none;
  box-shadow: 0 0 0 3px rgba(18, 48, 95, 0.12);
}
/* Custom-styled select: strip the OS default arrow and paint our own
   chevron so it looks identical across Chrome/Safari/Firefox/Windows. */
.field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  cursor: pointer; padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2312305f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
}
.field select:hover { border-color: var(--navy); }
.field select::-ms-expand { display: none; }
.form__status { margin-top: 1rem; font-size: 0.92rem; min-height: 1.2em; }
.form__status.is-ok { color: #197a4b; }
.form__status.is-error { color: #c23b3b; }

/* FOOTER */
.footer { background: var(--ink); color: #aeb9c9; padding: 3.5rem 0 0; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.4fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
.brand__mark--footer { color: #fff; }
.footer__tag { font-size: 0.9rem; margin-top: 0.4rem; max-width: 28ch; }
.footer__heading {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #7c8aa0; margin-bottom: 0.9rem;
}
.footer__col { display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.9rem; }
.footer__col a:hover { color: #fff; }
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.25rem; padding-bottom: 1.5rem;
  font-size: 0.8rem; color: #7c8aa0;
}

/* STATS BAND — trust-at-a-glance strip under the partner logos */
.stats { background: var(--navy); color: #fff; }
.stats__inner {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2rem; padding-top: 2.4rem; padding-bottom: 2.4rem;
}
.stat { text-align: center; }
.stat__value {
  display: block; font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; color: var(--amber);
  line-height: 1.1;
}
.stat__label { display: block; margin-top: 0.35rem; font-size: 0.9rem; color: #c8d3e4; }

/* Section intro line under a title (services etc.) */
.section__lead { color: var(--steel); max-width: 60ch; margin-top: 0.9rem; }

/* SERVICE CARDS — a card with one clear action at the bottom.
   margin-top:auto pins every CTA to the card's baseline, so the three
   links sit level even when the bodies are different lengths. */
.card--service { display: flex; flex-direction: column; }
.card--service .card__body { margin-bottom: 1.4rem; }
.card__cta { margin-top: auto; font-weight: 600; color: var(--navy); }
.card__cta::after { content: " →"; }
.card__cta:hover { color: var(--amber); }

/* PROCESS — the 3-step "how it works" ladder */
.process {
  list-style: none; padding: 0; margin: 2.75rem 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.process__step {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2rem; position: relative;
}
.process__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--navy); color: var(--amber);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  margin-bottom: 1.1rem;
}
.process__title { font-size: 1.15rem; color: var(--navy); margin-bottom: 0.5rem; }
.process__body { color: var(--steel); font-size: 0.95rem; }
.process__more { text-align: center; margin-top: 2.5rem; }

/* FAQ — native <details> accordion */
.container--narrow { max-width: 760px; }
.faq { margin-top: 2.5rem; display: grid; gap: 0.85rem; }
.faq__item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 0;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq__item:hover { border-color: rgba(18, 48, 95, 0.35); }
.faq__item[open] { border-color: var(--navy); box-shadow: 0 10px 24px rgba(15, 27, 45, 0.08); }
.faq__q {
  cursor: pointer; list-style: none;
  padding: 1.1rem 3.6rem 1.1rem 1.4rem;
  font-weight: 600; color: var(--ink); position: relative;
  transition: color 0.15s ease, background 0.15s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--navy); background: var(--bg); }
/* Icon lives in its own circular badge (not a bare glyph) so the
   open/close state reads clearly and matches the site's navy/amber
   accent language used elsewhere (process steps, stat numbers). The
   badge itself is the summary's ::after; the +/- bars are a nested
   .faq__icon span so each bar can animate independently (a symmetric
   cross can't turn into a minus sign just by rotating). */
.faq__q::after {
  content: ""; position: absolute; right: 1.1rem; top: 50%;
  transform: translateY(-50%); width: 1.7rem; height: 1.7rem;
  border-radius: 50%; background: var(--bg); border: 1px solid var(--line);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.faq__icon { position: absolute; right: 1.1rem; top: 50%; width: 1.7rem; height: 1.7rem; transform: translateY(-50%); z-index: 1; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--steel);
  transition: transform 0.2s ease, background-color 0.15s ease;
}
.faq__icon::before { width: 0.7rem; height: 1.5px; transform: translate(-50%, -50%); }
.faq__icon::after { width: 1.5px; height: 0.7rem; transform: translate(-50%, -50%); }
.faq__item[open] .faq__q::after { background: var(--navy); border-color: var(--navy); }
.faq__item[open] .faq__icon::before,
.faq__item[open] .faq__icon::after { background: var(--amber); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq__a {
  padding: 0 1.4rem 1.25rem; color: var(--steel); line-height: 1.65;
  animation: faqReveal 0.22s ease;
}
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .faq__a { animation: none; }
}

/* Scroll-reveal starting state (JS removes this once element is visible) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* 5. RESPONSIVE (phones/tablets) ----------------------------- */
@media (max-width: 820px) {
  .grid-2 { grid-template-columns: 1fr; gap: 2rem; }
  .cards--2 { grid-template-columns: 1fr; }
  .cards--3 { grid-template-columns: 1fr; }
  .cards--triple { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; }
  .stats__inner { gap: 1rem; padding-top: 1.8rem; padding-bottom: 1.8rem; }
  /* Fixed size (not the desktop clamp) so a word-y stat like "PH-wide"
     stays on one line beside the numeric ones */
  .stat__value { font-size: 1.35rem; white-space: nowrap; }
  .stat__label { font-size: 0.78rem; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }

  /* Shrink the distributor strip so Elta Fans / Abie Tiger / Starduct
     still fit in one row on narrow screens instead of wrapping. */
  .partners__inner { gap: 1rem; }
  .partners__label { display: none; } /* redundant once the section is this tight */
  .partners__logos { gap: 0.75rem; }
  .partner { gap: 0.5rem; }
  .partner__logo { max-width: 64px; max-height: 48px; }
  .partner__name { font-size: 0.85rem; }
  .partner__origin { display: none; } /* keep the row to brand name + logo only */

  /* Show hamburger, hide the desktop menu until toggled open */
  .nav-toggle { display: flex; }
  .nav {
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 0.5rem 1.5rem 1.25rem;
    display: none;                 /* hidden by default on mobile */
  }
  .nav.is-open { display: flex; } /* JS adds .is-open when tapped */
  .nav a { padding: 0.75rem 0; width: 100%; }
  .nav__item { width: 100%; }

  /* No hover on touch — show the brand links inline under "Products"
     instead of hiding them behind a hover state that can't be reached. */
  .nav__dropdown {
    display: flex; position: static; margin-top: 0;
    border: none; box-shadow: none; padding: 0 0 0.4rem 1rem;
  }
  .nav__dropdown a { padding: 0.5rem 0; color: var(--steel); }
  /* .nav a's padding above wins over .nav__cta's own padding (same
     specificity, .nav a declared later) unless we out-specify it here —
     that was stripping the pill's side padding and letting the label
     touch the capsule border. */
  .nav a.nav__cta {
    width: 100%; text-align: center;
    padding: 0.85rem 1.1rem; margin-top: 0.6rem;
  }
}

/* Phone widths: squeezing 3 brands into one row (even stacked icon-over-
   name) reads as cramped — a plain vertical list is clearer on a small
   screen, one brand per line, logo beside the name. */
@media (max-width: 480px) {
  .partners__inner { padding: 1.25rem 1rem; flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .partners__label { display: block; text-align: center; } /* re-shown as a heading above the list */
  .partners__logos { flex-direction: column; align-items: stretch; flex-wrap: wrap; gap: 0; width: 100%; }

  .partner {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.85rem;
    align-items: center;
    width: 100%;
    padding: 0.75rem 0;
  }
  .partner:not(:last-child) { border-bottom: 1px solid var(--line); }
  .partner__logo { grid-column: 1; grid-row: 1 / span 2; order: 0; max-width: 44px; max-height: 40px; }
  .partner__name { grid-column: 2; grid-row: 1; font-size: 1rem; }
  .partner__origin { display: block; grid-column: 2; grid-row: 2; }
}

/* Respect users who prefer no motion (accessibility) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition: none !important; }
}

/* ============================================================
   6. PRODUCTS CATALOG PAGE (products.html)
   ============================================================ */

/* "View full catalog" button under the homepage teaser */
.products__more { margin-top: 2.5rem; }

/* Wider content column for the catalog page only — the plain 1120px
   .container left a lot of dead margin on wide screens either side of
   the grid. This reuses that space instead of just decorating it. */
.container--wide { max-width: 1360px; }

/* Catalog page intro */
.catalog-hero { padding: 4rem 0 2rem; }
.catalog-hero__title {
  font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; color: var(--navy);
  margin-bottom: 1rem;
}
.catalog-hero__lead { color: var(--steel); font-size: 1.1rem; max-width: 52ch; }

/* Filter + search bar */
.catalog-controls {
  position: sticky; top: 72px; z-index: 40;   /* stays under the header while scrolling */
  background: rgba(246, 248, 251, 0.9); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
/* The grid of product cards. Four-up on wide screens (rather than
   stretching 3 cards across the wider container) keeps each card a
   sensible size instead of ballooning, while still using the space
   that used to just be empty side margin. */
.catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
@media (min-width: 1200px) {
  .catalog-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}

.catalog-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem;
  border-top: 3px solid var(--amber);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.catalog-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 27, 45, 0.10); }
.catalog-card__top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.catalog-card__brand { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel); }
.catalog-card__code { font-family: var(--font-mono); font-size: 0.68rem; color: var(--amber); background: #fff7ea; padding: 0.15rem 0.5rem; border-radius: 6px; }
.catalog-card__name { font-size: 1.1rem; color: var(--navy); line-height: 1.25; margin-bottom: 0.5rem; }
.catalog-card__blurb { color: var(--steel); font-size: 0.92rem; flex-grow: 1; margin-bottom: 1.1rem; }
.catalog-card__pdf {
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--navy);
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.catalog-card__pdf:hover { color: var(--amber); }
.catalog-card__soon { font-size: 0.85rem; color: var(--steel); font-style: italic; }

.empty { grid-column: 1 / -1; text-align: center; color: var(--steel); padding: 3rem 0; }

/* Pagination (25 products per page) */
.pagination { display: flex; align-items: center; justify-content: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 2.25rem; }
.pagination__btn {
  font: inherit; font-size: 0.9rem; cursor: pointer;
  min-width: 2.4rem; height: 2.4rem; padding: 0 0.6rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink);
}
.pagination__btn:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); }
.pagination__btn.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.pagination__btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Catalog page responsive */
@media (max-width: 900px) { .catalog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .catalog-grid { grid-template-columns: 1fr; } }

/* Ambient drift lines in the products section's side margins (the empty
   space either side of the 1120px container on wide screens). Kept out
   of the grid's own stacking context (z-index:0 under .container) so
   they never sit above cards or intercept clicks. */
.catalog-section { position: relative; overflow: hidden; }
.catalog-section > .container { position: relative; z-index: 1; }
.catalog-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.catalog-ambient span {
  position: absolute; top: -10%; bottom: -10%; width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(242, 169, 59, 0.3), transparent);
  animation: catalogDrift 10s ease-in-out infinite;
}
.catalog-ambient span:nth-child(1) { left: 3%; animation-delay: 0s; }
.catalog-ambient span:nth-child(2) { right: 3%; animation-delay: 3s; }
@keyframes catalogDrift {
  0%, 100% { transform: translateY(-4%); opacity: 0.4; }
  50% { transform: translateY(4%); opacity: 1; }
}
@media (max-width: 900px) { .catalog-ambient { display: none; } }

/* ============================================================
   7. IMAGE TILE (shared by cards + modal)
   ============================================================ */
.media {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #dfe7f2, #eef2f8);
  display: flex; align-items: center; justify-content: center;
}
.media__fallback {
  font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.18em;
  color: rgba(18, 48, 95, 0.35); font-size: 1.1rem;
}
.media__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }

/* The popup shows one product at full size — contain it instead of
   cropping (cards use "cover" for a tidy thumbnail; large or
   odd-aspect photos need "contain" here so nothing gets cut off or
   looks blown up past the frame). */
.modal__media .media__img { object-fit: contain; }

/* ============================================================
   8. CLICKABLE PRODUCT CARDS (override the earlier .catalog-card)
   ============================================================ */
.catalog-card {
  /* reset default <button> looks, then style like a card */
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--amber); border-radius: var(--radius);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.catalog-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 27, 45, 0.10); }
.catalog-card:hover .media__img { transform: scale(1.06); }
.media--card { width: 100%; aspect-ratio: 4 / 3; }
.catalog-card__meta { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.9rem 1rem 1.1rem; }
.catalog-card__view {
  margin-top: 0.5rem; font-family: var(--font-display); font-weight: 600;
  font-size: 0.85rem; color: var(--navy);
}
.catalog-card:hover .catalog-card__view { color: var(--amber); }

/* ============================================================
   9. PRODUCT POPUP (modal)
   ============================================================ */
/* Freeze the page behind the popup WITHOUT losing scroll position:
   plain `overflow: hidden` lets some browsers snap the background to
   the top (or elsewhere) while the modal is open. Pinning body to
   `position: fixed` at its current (negative) offset keeps the
   background pixel-locked, then JS restores scrollTop on close. */
body.modal-open {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
}

.modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.modal[hidden] { display: none; }             /* the "hidden" attribute truly hides it */
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 27, 45, 0.55); backdrop-filter: blur(3px);
}
.modal__panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 880px; max-height: 90vh; overflow: auto;
  background: var(--surface); border-radius: var(--radius);
  display: grid; grid-template-columns: 1fr 1fr;
  box-shadow: 0 30px 80px rgba(15, 27, 45, 0.35);
}
.modal__media { min-height: 360px; }
.modal__body { padding: 2.25rem 2.25rem 2.5rem; }
.modal__close {
  position: absolute; top: 0.85rem; right: 0.85rem; z-index: 2;
  width: 38px; height: 38px; border-radius: 999px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 1.4rem; line-height: 1; color: var(--ink);
}
.modal__close:hover { background: #f1f4f9; }
.modal__top { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; }
.modal__brand { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel); }
.modal__code { font-family: var(--font-mono); font-size: 0.72rem; color: var(--amber); }
.modal__name { font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--navy); margin-bottom: 0.85rem; }
.modal__desc { color: var(--steel); line-height: 1.6; }

.modal__specs { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.4rem; }
.spec { background: #eef2f8; border-radius: 10px; padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.15rem; min-width: 92px; }
.spec strong { font-family: var(--font-display); color: var(--ink); font-size: 1rem; }
.spec em { font-style: normal; color: var(--steel); font-size: 0.78rem; }

.modal__actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.9rem; flex-wrap: wrap; }
.modal__form { margin-top: 1.6rem; border-top: 1px solid var(--line); padding-top: 1.4rem; }

/* Modal responsive: stack image above details on small screens */
@media (max-width: 720px) {
  .modal__panel { grid-template-columns: 1fr; }
  .modal__media { min-height: 220px; }
  .modal__body { padding: 1.5rem 1.5rem 1.75rem; }
  .modal__actions { justify-content: stretch; }
  .modal__actions .btn { flex: 1; text-align: center; }
}

/* ============================================================
   10. FIXES + POLISH (Jul update)
   ============================================================ */
body { overflow-x: clip; }   /* belt-and-braces with the html rule above */

/* --- Logo in the header, with the company name always beside it --- */
.brand__logo { height: 60px; width: auto; display: block; }
.brand__wordmark { display: inline-flex; align-items: baseline; gap: 0.6rem; }

/* On narrow phones, keep just "AIR8" next to the logo so it doesn't
   crowd the hamburger button. */
@media (max-width: 480px) {
  .brand__name { display: none; }
}

/* --- Bigger, easier-to-read text --- */
.eyebrow { font-size: 0.92rem; letter-spacing: 0.14em; }
.prose { font-size: 1.15rem; }
.hero__lead { font-size: 1.28rem; }
.catalog-hero__lead { font-size: 1.2rem; }
.nav a { font-size: 1.02rem; }
.section__title { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.catalog-card__name { font-size: 1.15rem; }

/* --- Active nav link (which section / page you're on) --- */
.nav a { position: relative; }
.nav a.is-active:not(.nav__cta) { color: var(--navy); font-weight: 600; }
.nav a.is-active:not(.nav__cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px;
  height: 2px; background: var(--amber); border-radius: 2px;
}

/* --- Compact catalog toolbar (replaces the overflowing chips) ---
   Tightened padding/gaps/font-sizes so the whole bar takes less room,
   now that picking a Brand also trims the Category list down (see
   products.js categoriesForBrand) instead of always listing every
   category from every brand at once. */
.catalog-toolbar { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1.5rem; flex-wrap: wrap; }
.toolbar__search {
  flex: 1 1 220px; min-width: 0;
  font: inherit; font-size: 0.92rem; padding: 0.5rem 0.9rem;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.toolbar__search:hover { border-color: var(--navy); box-shadow: 0 4px 14px rgba(15, 27, 45, 0.08); transform: translateY(-1px); }
.toolbar__search:focus { border-color: var(--navy); outline: none; }
.toolbar__group { display: flex; align-items: flex-end; gap: 0.7rem; flex-wrap: wrap; }
.select-field { display: flex; flex-direction: column; gap: 0.15rem; }
.select-field > span {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--steel);
}
.select-field select {
  font: inherit; font-size: 0.85rem; padding: 0.38rem 0.6rem;
  border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.select-field select:hover { border-color: var(--navy); box-shadow: 0 4px 14px rgba(15, 27, 45, 0.08); transform: translateY(-1px); }
.select-field select:focus { border-color: var(--navy); outline: none; }
.catalog-count { font-family: var(--font-mono); font-size: 0.76rem; color: var(--steel); white-space: nowrap; align-self: flex-end; padding-bottom: 0.4rem; }

/* --- Smooth page transitions ---
   No `transform` here on purpose: an animated `transform` on <body> makes
   Chromium treat <body> as the containing block for ALL of its `position:
   fixed` descendants (the product modal included), so the modal ends up
   centered on the whole scrollable page instead of the viewport. Opacity
   gives the same fade without that side effect. */
@keyframes pageEnter { from { opacity: 0; } to { opacity: 1; } }
body { animation: pageEnter 0.45s ease both; }
body.is-leaving { opacity: 0; transition: opacity 0.18s ease; }

/* --- Toolbar on small screens: 2-column grid instead of stacking each
   filter full-width. The old version put Search + Brand + Category +
   Sort + count on five separate full-height rows in a `position: sticky`
   bar — on a phone that ate close to half the viewport. Brand/Category
   pair up on one row and Sort/count pair up on the next. --- */
@media (max-width: 720px) {
  .catalog-toolbar { padding: 0.8rem 1.25rem; }
  .toolbar__group {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 0.75rem;
  }
  .select-field { flex: none; }
  .select-field select { width: 100%; }
  .catalog-count { text-align: right; }
}

/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  body.is-leaving { transition: none; }
  .catalog-ambient span { animation: none; opacity: 0.3; }
}


.hero { position: relative; overflow: hidden; --accent: #3ce0ff; background: #0071CE; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hero__inner { position: relative; z-index: 3; }
.hero__title .line { display: block; }
.hero__title .word { display: inline-flex; margin-right: .28em; }
.letter { display: inline-block; will-change: transform, filter, opacity; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: .6rem; color: #fff;; }
.eyebrow__dot {
  display: inline-block; flex: none;
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 14px #fff; animation: a8pulse 2.4s ease-in-out infinite;
}
.hero__tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 2rem;
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: #fff;
}
/* rgba(233, 240, 250, .6) */
.hero__tags .dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: .7; display: inline-block; flex: none; }
@keyframes a8pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }