/* ==========================================================================
   NETWORK AERO — DESIGN SYSTEM
   --------------------------------------------------------------------------
   An enterprise aviation design system. Tailwind (CDN) handles layout
   utilities; this file owns the things utilities express badly: the type
   scale, the container, component patterns, interaction states and motion.

   Contents
     1.  Tokens
     2.  Base & accessibility
     3.  Layout: container + section rhythm
     4.  Typography scale
     5.  Buttons
     6.  Links & navigation
     7.  Header
     8.  Mobile drawer
     9.  Components: rail, cards, timeline, trust, certificate
     10. Forms
     11. Motion & scroll reveal
     12. Utilities, print, reduced motion
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* Brand — sampled from the official Network Aero logo */
  --na-navy-950: #081420;
  --na-navy-900: #0c1d2e;
  --na-navy-850: #0f2334;
  --na-navy-800: #12283c;
  --na-navy-700: #1b3a54;

  --na-gold-300: #ebd9a4;
  --na-gold-400: #d8b76f;
  --na-gold-500: #c9a55c;
  --na-gold-600: #a8842f;
  --na-gold-700: #7a5e22;

  --na-ink: #16212c;
  --na-steel: #41505e;
  --na-steel-light: #64748b;
  --na-mist: #f5f7f9;
  --na-line: #dce3e9;

  /* Hairlines on dark surfaces */
  --na-rule-dark: rgba(201, 165, 92, 0.28);
  --na-rule-light: rgba(220, 227, 233, 1);
  --na-onDark-body: #c3ccd6;

  /* Layout — content settles at ~1280px inside a 1360px box */
  --na-container: 1360px;
  --na-gutter: 1.25rem;

  /* Motion: fast and professional, never decorative */
  --na-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --na-fast: 160ms;
  --na-base: 240ms;
  --na-slow: 340ms;
}

@media (min-width: 768px) {
  :root { --na-gutter: 2.5rem; }
}
@media (min-width: 1280px) {
  :root { --na-gutter: 2.5rem; }
}

/* ==========================================================================
   2. BASE & ACCESSIBILITY
   ========================================================================== */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.875rem 1.5rem;
  background: var(--na-gold-500);
  color: var(--na-navy-950);
  font-weight: 700;
  border-radius: 0 0 4px 4px;
}
.skip-link:focus { left: 0; }

/* Focus: always visible, tuned per surface */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--na-gold-500);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-light a:focus-visible,
.on-light button:focus-visible { outline-color: var(--na-gold-700); }

::selection {
  background: var(--na-gold-500);
  color: var(--na-navy-950);
}

/* ==========================================================================
   3. LAYOUT — container and section rhythm
   --------------------------------------------------------------------------
   One container, used everywhere, so alignment never drifts. Section rhythm
   is deliberately varied by role: hero, standard, tight and feature sections
   breathe differently instead of repeating one padding value down the page.
   ========================================================================== */
.container-na {
  width: 100%;
  max-width: var(--na-container);
  margin-inline: auto;
  padding-inline: var(--na-gutter);
}

/* Narrower measure for reading-heavy blocks inside a wide container */
.measure      { max-width: 68ch; }
.measure-tight{ max-width: 54ch; }

/* Section rhythm: role-based, not one-size */
.section        { padding-block: 4.5rem; }
.section-tight  { padding-block: 3.5rem; }
.section-feature{ padding-block: 5rem; }

@media (min-width: 768px) {
  .section        { padding-block: 6rem; }
  .section-tight  { padding-block: 4rem; }
  .section-feature{ padding-block: 7rem; }
}
@media (min-width: 1280px) {
  .section        { padding-block: 7rem; }
  .section-tight  { padding-block: 5rem; }
  .section-feature{ padding-block: 7.5rem; }
}

/* ==========================================================================
   4. TYPOGRAPHY
   --------------------------------------------------------------------------
   Body copy sits at 17px so long technical paragraphs stay comfortable, and
   supporting copy never drops below 15px. Headings use tight tracking for an
   engineered, editorial feel.
   ========================================================================== */
.t-display {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.625rem, 1.55rem + 4vw, 4.25rem); /* 42px -> 68px */
  line-height: 1.05;
  letter-spacing: -0.028em;
}

.t-h2 {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 1.45rem + 2.1vw, 2.875rem); /* 32px -> 46px */
  line-height: 1.12;
  letter-spacing: -0.022em;
}

.t-h3 {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.375rem, 1.2rem + 0.65vw, 1.5rem); /* 22px -> 24px */
  line-height: 1.24;
  letter-spacing: -0.014em;
}

.t-h4 {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem; /* 20px */
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* Hero supporting paragraph */
.t-lede {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem); /* 18px -> 21px */
  line-height: 1.62;
}

/* Standard body copy */
.t-body {
  font-size: clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem); /* 17px -> 18px */
  line-height: 1.72;
}

/* Supporting copy inside cards and rails */
.t-copy {
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 16px -> 17px */
  line-height: 1.68;
}

/* Smallest permitted supporting text */
.t-small {
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Technical label. Used sparingly — never above every section. */
.t-label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Data value in trust strips */
.t-value {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.t-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* ==========================================================================
   5. BUTTONS
   --------------------------------------------------------------------------
   Three ranks: primary (gold), secondary (outline), quiet (text + arrow).
   All meet 44px touch height and shift 1px on press for tactile feedback.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3.25rem;
  padding: 0.875rem 2rem;
  border-radius: 3px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.005em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color var(--na-base) var(--na-ease),
              border-color var(--na-base) var(--na-ease),
              color var(--na-base) var(--na-ease),
              transform var(--na-fast) var(--na-ease),
              box-shadow var(--na-base) var(--na-ease);
}

.btn:active { transform: translateY(1px); }

/* Very narrow screens: long labels (email addresses) wrap instead of
   forcing the page wider than the viewport. */
@media (max-width: 400px) {
  .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    padding-inline: 1.375rem;
  }
}

.btn svg { transition: transform var(--na-base) var(--na-ease); }
.btn:hover svg:last-child { transform: translateX(3px); }

/* Primary */
.btn-primary {
  background: var(--na-gold-500);
  color: var(--na-navy-950);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset;
}
.btn-primary:hover {
  background: var(--na-gold-400);
  box-shadow: 0 6px 20px -8px rgba(201, 165, 92, 0.55),
              0 1px 0 rgba(255, 255, 255, 0.3) inset;
}

/* Secondary on dark */
.btn-secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
}
.btn-secondary:hover {
  border-color: var(--na-gold-500);
  color: var(--na-gold-300);
  background: rgba(201, 165, 92, 0.07);
}

/* Secondary on light */
.btn-outline {
  background: #fff;
  color: var(--na-navy-950);
  border-color: var(--na-line);
}
.btn-outline:hover {
  border-color: var(--na-gold-500);
  background: #fff;
  box-shadow: 0 6px 20px -12px rgba(8, 20, 32, 0.4);
}

/* Solid navy */
.btn-navy {
  background: var(--na-navy-950);
  color: #fff;
}
.btn-navy:hover { background: var(--na-navy-800); }

/* Quiet text action with travelling arrow */
.btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--na-navy-950);
  padding-block: 0.5rem;
  transition: color var(--na-base) var(--na-ease);
}
.btn-quiet svg { transition: transform var(--na-base) var(--na-ease); }
.btn-quiet:hover { color: var(--na-gold-700); }
.btn-quiet:hover svg { transform: translateX(4px); }

/* ==========================================================================
   6. LINKS & NAVIGATION
   ========================================================================== */

/* Desktop nav: line sweeps in from the left, locks on for the active page */
.nav-link {
  position: relative;
  padding-block: 0.5rem;
  transition: color var(--na-fast) var(--na-ease);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--na-gold-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--na-base) var(--na-ease);
}
.nav-link:hover::after,
.nav-link[aria-current='page']::after { transform: scaleX(1); }

/* Footer / inline links */
.link-quiet {
  transition: color var(--na-fast) var(--na-ease);
}
.link-quiet:hover { color: var(--na-gold-400); }

.link-underline {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(201, 165, 92, 0.5);
  transition: text-decoration-color var(--na-fast) var(--na-ease),
              color var(--na-fast) var(--na-ease);
}
.link-underline:hover {
  color: var(--na-gold-700);
  text-decoration-color: var(--na-gold-600);
}

/* ==========================================================================
   7. HEADER
   ========================================================================== */
.site-header {
  transition: background-color var(--na-base) var(--na-ease),
              box-shadow var(--na-base) var(--na-ease),
              border-color var(--na-base) var(--na-ease);
}

.site-header[data-transparent='true'] {
  background-color: transparent;
  border-bottom-color: transparent;
}

.site-header.is-solid,
.site-header[data-transparent='false'] {
  background-color: rgba(8, 20, 32, 0.97);
  border-bottom: 1px solid rgba(201, 165, 92, 0.16);
}

@supports (backdrop-filter: blur(10px)) {
  .site-header.is-solid,
  .site-header[data-transparent='false'] {
    background-color: rgba(8, 20, 32, 0.86);
    backdrop-filter: blur(10px) saturate(140%);
  }
}

/* Desktop services dropdown */
.nav-dropdown {
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--na-fast) var(--na-ease),
              transform var(--na-fast) var(--na-ease),
              visibility var(--na-fast);
}
.nav-item-services:hover .nav-dropdown,
.nav-item-services:focus-within .nav-dropdown,
.nav-dropdown.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.dropdown-item {
  position: relative;
  transition: background-color var(--na-fast) var(--na-ease),
              color var(--na-fast) var(--na-ease),
              padding-left var(--na-base) var(--na-ease);
}
.dropdown-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--na-gold-500);
  transform: scaleY(0);
  transition: transform var(--na-fast) var(--na-ease);
}
.dropdown-item:hover::before,
.dropdown-item[aria-current='page']::before { transform: scaleY(1); }
.dropdown-item:hover { padding-left: 1.625rem; }

/* ==========================================================================
   8. MOBILE DRAWER
   ========================================================================== */
.mobile-drawer {
  transform: translateX(100%);
  transition: transform var(--na-slow) var(--na-ease);
}
.mobile-drawer.is-open { transform: translateX(0); }

.drawer-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--na-slow) var(--na-ease);
}
.drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

body.drawer-locked { overflow: hidden; }

/* Mobile nav items: comfortable targets, never cramped text */
.drawer-link {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  font-size: 1.125rem;
  font-weight: 600;
  transition: color var(--na-fast) var(--na-ease);
}
.drawer-link:hover { color: var(--na-gold-400); }

/* ==========================================================================
   9. COMPONENTS
   ========================================================================== */

/* --- Hairline rules -------------------------------------------------- */
.rule-gold {
  height: 1px;
  background: linear-gradient(90deg, var(--na-gold-500), rgba(201, 165, 92, 0));
}
.rule-soft { height: 1px; background: var(--na-rule-light); }

/* --- Blueprint grid: engineered, kept very faint ---------------------- */
.blueprint-grid {
  background-image:
    linear-gradient(rgba(201, 165, 92, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 165, 92, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* --- Capability rail: dividers, not boxes ----------------------------- */
.rail-item {
  position: relative;
  transition: background-color var(--na-base) var(--na-ease);
}
.rail-item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--na-gold-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--na-base) var(--na-ease);
}
.rail-item:hover::after { transform: scaleX(1); }
.rail-item:hover { background-color: rgba(245, 247, 249, 0.7); }
.rail-item .rail-icon { transition: color var(--na-base) var(--na-ease); }
.rail-item:hover .rail-icon { color: var(--na-gold-600); }

/* --- Feature / service panels ----------------------------------------- */
.panel {
  position: relative;
  background: #fff;
  border: 1px solid var(--na-line);
  transition: border-color var(--na-base) var(--na-ease),
              box-shadow var(--na-base) var(--na-ease),
              transform var(--na-base) var(--na-ease);
}
.panel:hover {
  border-color: rgba(201, 165, 92, 0.62);
  box-shadow: 0 18px 44px -26px rgba(8, 20, 32, 0.42);
}

/* Image inside a panel: slow, restrained scale */
.panel-media {
  overflow: hidden;
  background: var(--na-navy-900);
}
.panel-media img {
  transition: transform 600ms var(--na-ease);
  will-change: transform;
}
.panel:hover .panel-media img { transform: scale(1.035); }

/* Side-by-side panels: let the copy set the panel height and have the image
   fill the column, so a portrait photo cannot stretch the panel and leave a
   void beside the text. */
@media (min-width: 640px) {
  .panel-media-fill {
    position: relative;
    align-self: stretch;
    min-height: 19rem;
  }
  .panel-media-fill img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.panel .panel-arrow { transition: transform var(--na-base) var(--na-ease); }
.panel:hover .panel-arrow { transform: translateX(4px); }

/* Corner tick: a small engineered detail on feature panels */
.corner-tick::before,
.corner-tick::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--na-gold-500);
  opacity: 0.75;
  pointer-events: none;
}
.corner-tick::before {
  top: -1px; left: -1px;
  border-top: 2px solid; border-left: 2px solid;
}
.corner-tick::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid; border-right: 2px solid;
}

/* --- Trust rail: framed band of labelled facts under the hero ---------- */
.trust-rail {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(12, 29, 46, 0.6);
  padding: 1.75rem 1.5rem;
}
@media (min-width: 640px) {
  .trust-rail { padding: 2rem 2.25rem; }
}

/* --- Trust strip: label over value, separated by hairlines ------------ */
.trust-item {
  position: relative;
  padding-block: 0.25rem;
}
@media (min-width: 640px) {
  .trust-item + .trust-item { padding-left: 2.5rem; }
  .trust-item + .trust-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.125rem;
    bottom: 0.125rem;
    width: 1px;
    background: rgba(255, 255, 255, 0.16);
  }
}

/* --- Timeline: horizontal on desktop, vertical on mobile -------------- */
.timeline {
  position: relative;
  display: grid;
  gap: 0;
}

/* Mobile: vertical spine with numbered nodes */
.timeline-step {
  position: relative;
  padding-left: 4.5rem;
  padding-bottom: 2.75rem;
}
.timeline-step:last-child { padding-bottom: 0; }

/* the spine */
.timeline-step::before {
  content: '';
  position: absolute;
  left: 1.56rem;
  top: 3.5rem;
  bottom: -0.25rem;
  width: 2px;
  background: linear-gradient(180deg, var(--na-gold-500), rgba(201, 165, 92, 0.18));
}
.timeline-step:last-child::before { display: none; }

/* the node */
.timeline-node {
  position: absolute;
  left: 0;
  top: 0;
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(201, 165, 92, 0.55);
  background: var(--na-navy-950);
  color: var(--na-gold-400);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 1rem;
  font-weight: 500;
}
.timeline-step.on-light .timeline-node {
  background: #fff;
  color: var(--na-gold-700);
}

/* Desktop: switch the spine to a horizontal connecting line */
@media (min-width: 1024px) {
  .timeline {
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
  }
  .timeline-3 { grid-template-columns: repeat(3, 1fr); }
  .timeline-4 { grid-template-columns: repeat(4, 1fr); }

  /* Stays vertical at every width. Use when the timeline sits inside a
     narrow column, where a horizontal run would crush each step. */
  .timeline-stacked { grid-template-columns: 1fr; gap: 0; }
  .timeline-stacked .timeline-step {
    padding-left: 4.5rem;
    padding-top: 0;
    padding-bottom: 2.75rem;
  }
  .timeline-stacked .timeline-step:last-child { padding-bottom: 0; }
  .timeline-stacked .timeline-step::before {
    left: 1.56rem;
    right: auto;
    top: 3.5rem;
    bottom: -0.25rem;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--na-gold-500), rgba(201, 165, 92, 0.18));
  }
  .timeline-step {
    padding-left: 0;
    padding-bottom: 0;
    padding-top: 4.75rem;
  }
  .timeline-step::before {
    left: 1.625rem;
    right: -2rem;
    top: 1.56rem;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--na-gold-500), rgba(201, 165, 92, 0.22));
  }
  .timeline-step:last-child::before { display: none; }
  .timeline-node { top: 0; }
}

/* --- Benefit groups: technical separators, not an icon grid ----------- */
.benefit-group {
  position: relative;
  padding-top: 1.75rem;
}
.benefit-group::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--na-gold-500);
}

/* --- Certificate ------------------------------------------------------ */
.cert-frame {
  position: relative;
  display: block;
  width: 100%;
  background: #fff;
  border: 1px solid var(--na-line);
  transition: border-color var(--na-base) var(--na-ease),
              box-shadow var(--na-base) var(--na-ease);
}
.cert-frame:hover {
  border-color: var(--na-gold-500);
  box-shadow: 0 24px 60px -30px rgba(8, 20, 32, 0.5);
}
.cert-frame img { display: block; width: 100%; height: auto; }

.cert-modal[hidden] { display: none; }
.cert-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(8, 20, 32, 0.92);
}
.cert-modal img {
  max-height: min(86vh, 1200px);
  width: auto;
  max-width: 100%;
  border-radius: 3px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.65);
}

/* --- ISO badge -------------------------------------------------------- */
.iso-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1.125rem;
  border: 1px solid rgba(201, 165, 92, 0.5);
  border-radius: 3px;
  background: rgba(201, 165, 92, 0.08);
}

/* --- Back to top ------------------------------------------------------ */
.back-to-top {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--na-base) var(--na-ease),
              transform var(--na-base) var(--na-ease),
              background-color var(--na-fast) var(--na-ease);
}
.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* --- Footer ----------------------------------------------------------- */
.footer-heading {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

.footer-link {
  display: inline-block;
  font-size: 1rem;
  padding-block: 0.4375rem;
  color: var(--na-onDark-body);
  transition: color var(--na-fast) var(--na-ease),
              transform var(--na-fast) var(--na-ease);
}
.footer-link:hover {
  color: var(--na-gold-400);
  transform: translateX(2px);
}

/* Collapsible footer groups on mobile only */
.footer-group > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
}
.footer-group > summary::-webkit-details-marker { display: none; }
.footer-group > summary .chev {
  transition: transform var(--na-base) var(--na-ease);
}
.footer-group[open] > summary .chev { transform: rotate(180deg); }

@media (min-width: 768px) {
  /* Desktop: always expanded, no disclosure affordance */
  .footer-group > summary {
    cursor: default;
    pointer-events: none;
    min-height: 0;
    margin-bottom: 0.5rem;
  }
  .footer-group > summary .chev { display: none; }
}

/* ==========================================================================
   10. FORMS
   ========================================================================== */
.field-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--na-ink);
  margin-bottom: 0.5rem;
}

.field-input {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  background: #fff;
  border: 1px solid var(--na-line);
  border-radius: 3px;
  color: var(--na-ink);
  transition: border-color var(--na-fast) var(--na-ease),
              box-shadow var(--na-fast) var(--na-ease);
}
.field-input::placeholder { color: #7c8b99; }
.field-input:focus {
  border-color: var(--na-gold-500);
  box-shadow: 0 0 0 3px rgba(201, 165, 92, 0.24);
  outline: none;
}

.field-hint {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--na-steel);
}

.form-field.has-error .field-input { border-color: #b3372f; }
.form-field .field-error {
  display: none;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #a32d25;
  font-weight: 500;
}
.form-field.has-error .field-error { display: block; }

/* --------------------------------------------------------------------------
   Multi-step RFQ
   --------------------------------------------------------------------------
   The step indicator deliberately reuses the timeline language used elsewhere
   on the site (numbered nodes on a connecting rule) so the form reads as part
   of the same system rather than a bolted-on widget.
   -------------------------------------------------------------------------- */
.rfq-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

/* Node above label at every width: the connecting rule then runs cleanly
   between nodes instead of striking through the label text. */
.rfq-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  padding-right: 0.75rem;
}

/* connecting rule, drawn from the edge of this node to the next one */
.rfq-step::before {
  content: '';
  position: absolute;
  left: 2.875rem;
  right: 0.375rem;
  top: 1.1875rem;
  height: 2px;
  background: var(--na-line);
}
.rfq-step:last-child::before { display: none; }
.rfq-step.is-done::before { background: var(--na-gold-500); }

.rfq-step-node {
  position: relative;
  z-index: 1;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--na-line);
  background: #fff;
  color: var(--na-steel);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color var(--na-base) var(--na-ease),
              border-color var(--na-base) var(--na-ease),
              color var(--na-base) var(--na-ease);
}

.rfq-step-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--na-steel);
  line-height: 1.3;
  transition: color var(--na-base) var(--na-ease);
}

/* Current step */
.rfq-step.is-current .rfq-step-node {
  background: var(--na-navy-950);
  border-color: var(--na-navy-950);
  color: var(--na-gold-400);
}
.rfq-step.is-current .rfq-step-label { color: var(--na-ink); }

/* Completed steps */
.rfq-step.is-done .rfq-step-node {
  background: var(--na-gold-500);
  border-color: var(--na-gold-500);
  color: var(--na-navy-950);
}
.rfq-step.is-done .rfq-step-label { color: var(--na-ink); }

@media (min-width: 640px) {
  .rfq-step-label { font-size: 0.875rem; }
}

/* Step panels.
   The markup ships with every step visible so the form still works with
   JavaScript off. When JS is present we hide the later steps immediately,
   before the stepper initialises, so they never flash into view. */
.rfq-panel { border: 0; padding: 0; margin: 0; min-width: 0; }
.rfq-panel[hidden] { display: none; }

.js .rfq-panel[data-step]:not([data-step='1']) { display: none; }
.js #rfq-form.rfq-ready .rfq-panel[data-step]:not([hidden]) { display: block; }

/* Step indicator is meaningless until the stepper is running */
.rfq-steps { display: none; }
.js .rfq-steps { display: grid; }

.rfq-panel-title {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.014em;
  color: var(--na-ink);
}
.rfq-panel-title:focus { outline: none; }
.rfq-panel-title:focus-visible {
  outline: 2px solid var(--na-gold-500);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .js .rfq-panel:not([hidden]) {
    animation: rfq-panel-in 260ms var(--na-ease) both;
  }
  @keyframes rfq-panel-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Step controls */
.rfq-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--na-line);
}
.rfq-actions [hidden] { display: none; }

@media (min-width: 640px) {
  .rfq-actions { flex-direction: row; align-items: center; }
}

/* Pre-send review list */
.rfq-review {
  border: 1px solid rgba(201, 165, 92, 0.45);
  background: rgba(201, 165, 92, 0.06);
  padding: 1.25rem;
}
.rfq-review[hidden] { display: none; }
.rfq-review dt {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--na-steel);
}
.rfq-review dd {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--na-ink);
  margin: 0.125rem 0 0;
  overflow-wrap: anywhere;
}

/* Honeypot: removed visually, still reachable by bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(8, 20, 32, 0.28);
  border-top-color: var(--na-navy-950);
  border-radius: 999px;
}
@media (prefers-reduced-motion: no-preference) {
  .spinner { animation: na-spin 0.7s linear infinite; }
}
@keyframes na-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   11. MOTION — scroll reveal
   --------------------------------------------------------------------------
   Progressive enhancement only: content is fully visible without JS, and
   entirely static under prefers-reduced-motion.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 500ms var(--na-ease), transform 500ms var(--na-ease);
  }
  .js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .js .reveal-stagger > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 440ms var(--na-ease), transform 440ms var(--na-ease);
    transition-delay: calc(var(--stagger-index, 0) * 60ms);
  }
  .js .reveal-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
  }

  /* Animated route line: slow, subtle, purposeful */
  .flight-path {
    stroke-dasharray: 6 10;
    animation: na-dash 30s linear infinite;
  }
  @keyframes na-dash { to { stroke-dashoffset: -320; } }
}

/* ==========================================================================
   12. UTILITIES / PRINT / REDUCED MOTION
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Kill every animation and transition when the user asks for calm */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .utility-bar, .back-to-top, footer, .drawer-backdrop,
  .mobile-drawer { display: none !important; }
  body { color: #000; background: #fff; }
}