/* =================================================================
   MAXSAPIENT V2 — engineering-grade, premium
   Brand system: crimson (#D8263E) as punctuation, navy (#091A2B) as
   the structural workhorse. Crimson is used sparingly; navy carries
   the load. Derived from the max.sapient wordmark.
   ================================================================= */

:root {
  /* Surfaces — paper white, warm subtle */
  --bg:           #FFFFFF;
  --bg-tint:      #FAFAFB;
  --bg-soft:      #F4F5F7;
  --bg-section:   #F7F8FA;

  /* Ink — navy-based, pulled from the brand navy */
  --ink:          #091A2B;
  --ink-2:        #16293B;
  --ink-3:        #37485A;
  --slate-600:    #51606E;
  --slate-500:    #6B7886;
  --slate-400:    #9AA5B1;
  --slate-300:    #C7CDD5;

  /* Navy — secondary accent + dark surfaces (the workhorse) */
  --navy:          #091A2B;
  --navy-2:        #061320;
  --navy-3:        #12293D;
  --navy-soft:     rgba(9,26,43,0.05);
  --navy-soft-2:   rgba(9,26,43,0.09);

  /* Lines — very thin and subtle */
  --line:          rgba(9,26,43,0.08);
  --line-2:        rgba(9,26,43,0.12);
  --line-strong:   rgba(9,26,43,0.18);
  --line-dark:     rgba(255,255,255,0.10);

  /* Accent — brand crimson. Punctuation only: dots, emphasis, key CTAs, active states. */
  --accent:        #D8263E;
  --accent-2:      #B81B30;
  --accent-on-dark:#FF5C6E;
  --accent-soft:   rgba(216,38,62,0.07);
  --accent-soft-2: rgba(216,38,62,0.14);

  /* Signals — kept distinct from brand crimson */
  --live:          #0E9E68;
  --warn:          #E0922A;
  --alert:         #D8263E;

  /* Fonts — Newsreader (editorial serif display) + Hanken Grotesk (humanist grotesque workhorse).
     Monospace retired: it read as a dev-tool default. Micro-labels now use the grotesque with
     restrained tracking; figures use tabular lining numerals. */
  --font-sans:    "Hanken Grotesk", ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-display: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --font-label:   "Hanken Grotesk", ui-sans-serif, -apple-system, system-ui, sans-serif;
  /* Body copy font — Manrope for paragraphs, descriptions, captions, footer text, and all long-form content. */
  --font-body:    "Manrope", ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  /* Real monospace retained ONLY for in-product operational data (flight boards, timetables,
     codes) where tabular alignment is genuine craft. Spline Sans Mono is warmer / less default
     than the JetBrains-Geist Mono look. Never used for brand or marketing chrome. */
  --font-mono:    "Spline Sans Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;

  /* Radii — Linear uses rounded but tasteful */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;

  /* Shadow — soft and elevated */
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 1px rgba(15,23,42,0.04);
  --shadow-md: 0 8px 24px -8px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.04);
  --shadow-lg: 0 30px 60px -30px rgba(15,23,42,0.20), 0 4px 12px rgba(15,23,42,0.06);
  --shadow-photo: 0 50px 90px -40px rgba(15,23,42,0.35);

  /* Layout */
  --container: 1240px;
  --container-narrow: 980px;

  /* Spacing scale — 4px base, used for rhythm */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 120px;

  /* Section rhythm */
  --sec-pad: 120px;
  --sec-pad-tight: 80px;
}

/* ============================ RESET ============================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; font-family: var(--font-sans); cursor: pointer; }
::selection { background: var(--accent); color: #fff; }

/* ============================ TYPE ============================ */
.mono { font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; }
.label {
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 600;
}
.label-accent { color: var(--accent); }
.label-on-dark { color: rgba(255,255,255,0.7); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-label);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
}
.eyebrow::before {
  display: none !important;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.h-hero {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.h-display {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.2vw, 70px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  font-weight: 500;
}
.h-1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.016em;
  font-weight: 500;
}
.h-2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  font-weight: 500;
}
.h-3 {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.008em;
  font-weight: 600;
}
.h-4 { font-family: var(--font-sans); font-size: 16px; line-height: 1.35; font-weight: 600; letter-spacing: -0.005em; }

.lede {
  font-size: clamp(18px, 1.4vw, 21px);
  line-height: 1.55;
  color: var(--slate-600);
  max-width: 56ch;
  font-weight: 400;
  text-wrap: pretty;
}

p { line-height: 1.6; color: var(--slate-600); text-wrap: pretty; }
em { font-style: italic; font-weight: 400; color: var(--accent); }
strong { font-weight: 600; color: var(--ink); }

/* Underline gradient accent for headings (optional class) */
.grad-text {
  background: linear-gradient(96deg, var(--ink) 30%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================ LAYOUT ============================ */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}
.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 28px;
}
.section {
  padding: 120px 0;
  position: relative;
}
.section-tight { padding: 80px 0; }
.section-tighter { padding: 56px 0; }
.section-soft { background: var(--bg-section); }
.section-dark {
  background: linear-gradient(180deg, #0B1F33 0%, #061320 100%);
  color: #fff;
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark .lede { color: rgba(255,255,255,0.7); }
.section-dark p { color: rgba(255,255,255,0.65); }
.section-dark .eyebrow { color: rgba(255,255,255,0.72); }
.section-dark .eyebrow::before { background: var(--accent-on-dark); box-shadow: 0 0 0 4px rgba(255,92,110,0.18); }
.section-dark .label { color: rgba(255,255,255,0.5); }
.section-dark strong { color: #fff; }

.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 64px;
  max-width: 720px;
}
.section-head .eyebrow { margin-bottom: 6px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; align-items: center; }

/* ============================ BUTTONS ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn .arr { transition: transform .2s ease; display: inline-block; }
.btn:hover .arr { transform: translateX(3px); }

.btn-primary {
  background: var(--ink);
  color: #fff;
}
.btn-primary:hover { background: #1F2937; }

.btn-accent {
  background: var(--accent);
  color: #fff;
}
.btn-accent:hover { background: var(--accent-2); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--ink); background: var(--bg-tint); }

.btn-on-dark {
  background: #fff;
  color: var(--ink);
}
.btn-on-dark:hover { background: rgba(255,255,255,0.92); }

.btn-ghost-dark {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.20);
}
.btn-ghost-dark:hover { border-color: rgba(255,255,255,0.50); background: rgba(255,255,255,0.05); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.link-arrow .arr { transition: transform .2s ease; color: var(--accent); }
.link-arrow:hover .arr { transform: translateX(3px); }

/* ============================ NAV / CHROME ============================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.nav-logo { height: 50px; width: auto; display: block; }
.footer-logo { height: 50px; width: auto; display: block; }
.nav-mark {
  width: 22px; height: 22px;
  background: var(--ink);
  border-radius: 6px;
  position: relative;
  display: inline-block;
}
.nav-mark::before, .nav-mark::after {
  content: "";
  position: absolute;
  background: #fff;
}
.nav-mark::before { left: 4px; top: 4px; width: 5px; height: 14px; }
.nav-mark::after { left: 12px; top: 4px; width: 6px; height: 9px; }

.nav-links {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
}
.nav-link {
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--ink-3);
  font-weight: 500;
  border-radius: 999px;
  letter-spacing: -0.01em;
  transition: color .15s ease, background .15s ease;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-link:hover { color: var(--ink); background: var(--bg-tint); }
.nav-link.has-menu::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.6;
}
.nav-link[aria-current="page"] { color: var(--ink); }
.nav-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: 2px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Hamburger toggle — hidden on desktop */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle-bars { position: relative; width: 20px; height: 14px; display: block; }
.nav-toggle-bars span {
  position: absolute; left: 0; right: 0;
  height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform .26s ease, opacity .2s ease, top .26s ease;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 6px; }
.nav-toggle-bars span:nth-child(3) { top: 12px; }
body.menu-open .nav-toggle-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
body.menu-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle-bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* ===================== MOBILE MENU — WHITE THEME ===================== */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: rgba(4,10,18,0);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, background .3s ease;
  display: none;
}
.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
  background: rgba(4,10,18,0.28);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.mobile-menu-inner {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(400px, 90vw);
  background: #fff;
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 40px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  padding: 26px 30px 34px;
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateX(100%);
  transition: transform .42s cubic-bezier(0.16, 1, 0.3, 1);
  isolation: isolate;
}
.mobile-menu.open .mobile-menu-inner { transform: translateX(0); }

/* decorative elements removed in white theme */
.mm-grid { display: none; }
.mm-edge { display: none; }

/* top bar */
.mm-top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  padding-top: 26px;
  margin-top: -26px;
  padding-bottom: 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.mm-top-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--slate-500);
  text-transform: uppercase;
}
.mm-close {
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 11px;
  position: relative;
  cursor: pointer;
  flex: none;
  transition: border-color .2s ease, background .2s ease;
}
.mm-close:hover { border-color: var(--accent); background: rgba(216,38,62,0.06); }
.mm-close span {
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 1.6px;
  background: var(--ink);
  border-radius: 2px;
}
.mm-close span:first-child { transform: translate(-50%,-50%) rotate(45deg); }
.mm-close span:last-child { transform: translate(-50%,-50%) rotate(-45deg); }

/* nav list */
.mm-list { display: flex; flex-direction: column; }
.mm-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 27px;
  letter-spacing: -0.02em;
  color: var(--ink);
  position: relative;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .5s ease, transform .5s cubic-bezier(0.16,1,0.3,1), color .2s ease;
}
.mm-idx {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--slate-400);
  transform: translateY(-3px);
}
.mm-arrow {
  font-size: 17px;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .2s ease, transform .2s ease;
}
.mm-link:hover .mm-arrow,
.mm-link[aria-current="page"] .mm-arrow { opacity: 1; transform: translateX(0); }
.mm-link:hover { color: var(--accent); }
.mm-link:hover .mm-idx { color: var(--accent); }
.mm-link[aria-current="page"] { color: var(--accent); }
.mm-link[aria-current="page"] .mm-idx { color: var(--accent); }

/* staggered reveal when open */
.mobile-menu.open .mm-link { opacity: 1; transform: translateX(0); }
.mobile-menu.open .mm-list .mm-link:nth-child(1) { transition-delay: .12s; }
.mobile-menu.open .mm-group { transition-delay: .19s; }
.mobile-menu.open .mm-list > .mm-link:nth-child(3) { transition-delay: .26s; }
.mobile-menu.open .mm-list > .mm-link:nth-child(4) { transition-delay: .33s; }

/* accordion groups */
.mm-group { display: flex; flex-direction: column; }

/* Row wrapper: link + chevron toggle side-by-side */
.mm-group-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.mm-group-head {
  flex: 1;
  border-bottom: 0;
  padding-bottom: 8px;
}

/* Separate chevron button — toggles sub-menu without blocking navigation */
.mm-group-chevron {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 16px 6px 16px 12px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
/* rotate arrow to act as chevron */
.mm-group-chevron .mm-arrow {
  opacity: 1 !important;
  transform: rotate(90deg) !important;
  transition: transform .3s ease !important;
  color: var(--slate-400) !important;
  font-size: 14px !important;
}
.mm-group.open .mm-group-chevron .mm-arrow {
  transform: rotate(-90deg) !important;
  color: var(--accent) !important;
}
/* sub-menu collapsed by default; expands on .open */
.mm-sub {
  display: grid;
  gap: 1px;
  overflow: hidden;
  max-height: 0;
  padding: 0 0 0 2px;
  transition: max-height .35s cubic-bezier(0.16,1,0.3,1), padding .25s ease;
  border-bottom: none;
}
.mm-group.open > .mm-sub {
  max-height: 320px;
  padding: 6px 0 16px 2px;
  border-bottom: 1px solid var(--line);
}

.mm-sub a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--slate-600);
  padding: 9px 0;
  transition: color .18s ease, transform .18s ease;
}
.mm-sub a:hover { color: var(--ink); transform: translateX(3px); }
.mm-sub-ico {
  width: 32px; height: 32px;
  flex: none;
  border-radius: 8px;
  background: rgba(216,38,62,0.07);
  border: 1px solid rgba(216,38,62,0.18);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.mm-cta {
  margin-top: 28px;
  justify-content: center;
  padding: 16px 20px;
  font-size: 15.5px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease .4s, transform .5s ease .4s;
}
.mobile-menu.open .mm-cta { opacity: 1; transform: translateY(0); }

.mm-foot {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mm-foot a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--slate-500);
}
.mm-foot a:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .mm-link, .mm-cta { transition: opacity .2s ease !important; transform: none !important; }
}
.megamenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 720px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: 30px 22px 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  /* 200ms delay on close prevents accidental dismissal during cursor travel */
  transition: opacity .18s ease 200ms, transform .18s ease 200ms;
  z-index: 100;
}
.nav-item { position: relative; }
.nav-item:hover .megamenu,
.nav-item:focus-within .megamenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  /* No delay on open — appears immediately */
  transition: opacity .18s ease, transform .18s ease;
}
.mm-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  align-items: start;
  color: var(--ink);
  transition: background .15s ease;
}
.mm-item:hover { background: var(--bg-soft); }
.mm-ico {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.mm-t { display: block; font-family: var(--font-sans); font-size: 14.5px; font-weight: 500; color: var(--ink); }
.mm-d { display: block; font-family: var(--font-sans); font-size: 12.5px; color: var(--slate-500); margin-top: 4px; line-height: 1.4; }


/* ============================ FOOTER ============================ */
.footer {
  border-top: 1px solid var(--line);
  background: var(--bg-tint);
  padding: 80px 0 32px;
  margin-top: 80px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line);
}
.footer-brand-col { display: grid; gap: 16px; align-content: start; }
.footer-tagline { font-size: 14.5px; color: var(--slate-600); max-width: 30ch; line-height: 1.5; }
.footer-col h5 {
  font-family: var(--font-label);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin: 0 0 16px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-col a { font-family: var(--font-sans); font-size: 14px; color: var(--ink-3); transition: color .15s ease; }
.footer-col a:hover { color: var(--accent); }

.footer-legal {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--slate-500);
}
.footer-legal-links { display: flex; gap: 18px; }
.footer-legal-links a:hover { color: var(--ink); }

@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-menu { display: block; }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  body.menu-open { overflow: hidden; }
  .nav-logo { height: 44px; }
  .footer-logo { height: 44px; }
}

/* ============================ HERO PHOTOGRAPHIC ============================ */
.hero-photo {
  position: relative;
  min-height: clamp(620px, 88vh, 880px);
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: end;
  isolation: isolate;
}
.hero-photo-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -2;
}
.hero-photo-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,19,32,0.20) 0%, rgba(6,19,32,0.30) 40%, rgba(6,19,32,0.80) 88%, rgba(6,19,32,0.95) 100%),
    linear-gradient(90deg, rgba(6,19,32,0.55) 0%, rgba(6,19,32,0.15) 60%, rgba(6,19,32,0.0) 100%);
}
.hero-photo-grain {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.06;
  background-image:
    radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1.4px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}
.hero-photo-inner {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 80px 28px 64px;
  z-index: 1;
}
.hero-photo .eyebrow {
  color: rgba(255,255,255,0.72);
  margin-bottom: 22px;
}
.hero-photo .eyebrow::before { background: var(--accent-on-dark); box-shadow: 0 0 0 4px rgba(255,92,110,0.20); }
.hero-photo h1 { color: #fff; max-width: 18ch; }
.hero-photo .hero-sub {
  margin-top: 24px;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  max-width: 52ch;
}
.hero-photo .hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 36px; }

/* corner meta lines on hero */
.hero-meta {
  position: absolute;
  z-index: 2;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.hero-meta.top-right { top: 24px; right: 28px; text-align: right; }
.hero-meta.bot-right { bottom: 64px; right: 28px; display: grid; gap: 4px; text-align: right; }
.hero-meta b { color: #fff; font-weight: 500; }

/* Trust strip below hero */
.trust-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 26px 0;
}
.trust-strip-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 56px;
  justify-content: space-between;
  align-items: center;
}
.trust-lbl {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 500;
}
.trust-items {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: center;
}
.trust-items span {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.trust-items span::before {
  display: none !important;
}

/* ============================ CARDS ============================ */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card:hover { border-color: var(--line-strong); }
.card-pad { padding: 28px; }

/* Industry feature card (large with photo) */
.feature-card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  color: inherit;
}
.feature-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.fc-photo {
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  position: relative;
  border-bottom: 1px solid var(--line);
}
.fc-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(6,19,32,0.30) 100%);
}
.fc-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(6,19,32,0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.20);
}
.fc-body { padding: 32px 32px 36px; }
.fc-eyebrow {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-600);
  font-weight: 500;
  margin-bottom: 14px;
  display: block;
}
.fc-title { margin-bottom: 12px; font-weight: 600; color: var(--ink); }
.fc-desc {
  font-size: 15px;
  color: var(--slate-600);
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 52ch;
}
.fc-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.fc-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-600);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 500;
}

/* Stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 56px;
}
.stat { display: grid; gap: 6px; }
.stat-v {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.5vw, 58px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
}
.stat-v small { font-size: 0.5em; color: var(--slate-400); margin-left: 2px; font-weight: 400; }
.stat-l {
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 600;
  margin-top: 6px;
}
.stat-d { font-size: 14px; color: var(--slate-600); line-height: 1.5; }

@media (max-width: 800px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* ============================ PRODUCT SHOWCASE ============================ */
.showcase {
  background: var(--bg-section);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 0.95fr 1.4fr;
  align-items: stretch;
}
.showcase-info {
  padding: 56px 48px;
  display: grid;
  align-content: center;
  gap: 14px;
}
.showcase-info .eyebrow { margin-bottom: 6px; }
.showcase-info p { font-size: 15.5px; line-height: 1.6; color: var(--slate-600); margin: 6px 0 0; max-width: 44ch; }
.showcase-feats { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.showcase-feats li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 14.5px;
  color: var(--ink-2);
}
.showcase-feats .check {
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  font-size: 10px;
  margin-top: 2px;
}
.showcase-feats .check::before {
  content: "";
  width: 4px; height: 8px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg) translate(-1px, -1px);
}
.showcase-feats strong { font-weight: 500; color: var(--ink); }

.showcase-visual {
  background: linear-gradient(135deg, #0E2538 0%, #061320 100%);
  padding: 48px 48px 0;
  display: flex;
  align-items: end;
  position: relative;
  overflow: hidden;
}
.showcase-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(216,38,62,0.18), transparent 50%);
  pointer-events: none;
}
.showcase-mock {
  position: relative;
  width: 100%;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  border-bottom: none;
  box-shadow: 0 -20px 60px -20px rgba(0,0,0,0.50);
  transform: translateY(8px);
}

@media (max-width: 980px) {
  .showcase { grid-template-columns: 1fr; }
  .showcase-info { padding: 40px 32px; }
  .showcase-visual { padding: 32px 32px 0; }
}

/* ============================ PILLAR CARDS ============================ */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pillar {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 36px 32px 32px;
  transition: border-color .2s ease, transform .2s ease;
}
.pillar:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.pillar-no {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 18px;
}
.pillar h3 { margin-bottom: 10px; }
.pillar p { font-size: 14.5px; line-height: 1.6; color: var(--slate-600); margin: 0; }
@media (max-width: 900px) { .pillar-grid { grid-template-columns: 1fr; } }

/* ============================ CTA SECTION ============================ */
.cta-wrap {
  padding: 60px 0 80px;
}
.cta-banner {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  color: #fff;
  min-height: 360px;
  display: flex;
  align-items: center;
  isolation: isolate;
}
.cta-banner-bg {
  position: absolute; inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
}
.cta-banner-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(6,19,32,0.85) 0%, rgba(6,19,32,0.55) 65%, rgba(6,19,32,0.30) 100%);
}
.cta-banner-inner {
  padding: 64px 56px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
  width: 100%;
}
.cta-banner h2 { color: #fff; max-width: 18ch; }
.cta-banner p { color: rgba(255,255,255,0.7); margin: 14px 0 0; max-width: 38ch; }
.cta-banner-actions { display: flex; flex-direction: column; gap: 10px; align-items: end; }
@media (max-width: 800px) {
  .cta-banner-inner { grid-template-columns: 1fr; padding: 40px 28px; }
  .cta-banner-actions { align-items: start; flex-direction: row; flex-wrap: wrap; }
}

/* ============================ AVIATION-SPECIFIC ============================ */
.tabs-light {
  display: flex;
  gap: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px;
  margin-bottom: 32px;
  width: fit-content;
}
.tabs-light button {
  border: 0;
  background: transparent;
  padding: 9px 18px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--slate-600);
  letter-spacing: -0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .15s ease, color .15s ease;
}
.tabs-light button:hover { color: var(--ink); }
.tabs-light button.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.tabs-light .tb-no {
  font-family: var(--font-label);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--slate-400);
}
.tabs-light button.active .tb-no { color: var(--accent); }

.product-pane { display: none; }
.product-pane.active { display: block; animation: paneIn .25s ease both; }
@keyframes paneIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.product-block {
  display: grid;
  grid-template-columns: 0.85fr 1.25fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 1000px) { .product-block { grid-template-columns: 1fr; } }
.product-info p { font-size: 15.5px; line-height: 1.6; color: var(--slate-600); margin: 0 0 16px; max-width: 52ch; }
.product-info .lede { margin-bottom: 24px; }

.cap-list {
  list-style: none;
  padding: 0; margin: 28px 0 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.cap-list li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  font-size: 14.5px;
}
.cap-list .cap-k {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.115em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 500;
}
.cap-list .cap-v { color: var(--ink-2); }

/* Mock device frame — common */
.mock-device {
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}
.mock-bar {
  height: 38px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 14px;
  gap: 12px;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--slate-500);
}
.mw-dots { display: flex; gap: 6px; }
.mw-dots i {
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--line-strong);
}
.mw-dots i:nth-child(1) { background: #FF6058; }
.mw-dots i:nth-child(2) { background: #FFBE2F; }
.mw-dots i:nth-child(3) { background: #28C940; }
.mw-title { text-align: center; color: var(--ink-2); font-weight: 500; }
.mw-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--live);
}
.live-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--live);
  box-shadow: 0 0 0 3px rgba(8,160,92,0.18);
  display: inline-block;
}

/* Floating mock caption */
.mock-caption {
  margin-top: 14px;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.115em;
  text-transform: uppercase;
  color: var(--slate-500);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* ============================ PHOTO BLOCK (full-bleed photo with caption) ============================ */
.photo-bleed {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  aspect-ratio: 21/9;
  background: #061320;
}
.photo-bleed-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.photo-bleed-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(6,19,32,0.65) 0%, rgba(6,19,32,0.15) 60%);
}
.photo-bleed-content {
  position: absolute;
  inset: 0;
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  color: #fff;
  z-index: 1;
}
.photo-bleed-eyebrow {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 12px;
}
.photo-bleed-content h2 { color: #fff; max-width: 18ch; }
.photo-bleed-content p { color: rgba(255,255,255,0.75); max-width: 50ch; margin: 14px 0 0; }
@media (max-width: 800px) {
  .photo-bleed { aspect-ratio: 4/5; }
  .photo-bleed-content { padding: 28px; }
}

/* ============================ SUB-PAGE HERO ============================ */
.subhero {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-tint) 100%);
  padding: 56px 0 80px;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.subhero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: end;
}
.subhero h1 { margin-top: 16px; max-width: 18ch; }
.subhero-side .lede { margin-top: 24px; }
.subhero-side .hero-ctas { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.subhero-photo {
  margin-top: 56px;
  border-radius: var(--r-2xl);
  overflow: hidden;
  aspect-ratio: 21/9;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-photo);
  position: relative;
}
.subhero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(6,19,32,0.35), transparent 50%);
}
.subhero-photo-cap {
  position: absolute;
  bottom: 28px; left: 32px; right: 32px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
}
.crumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--slate-500);
}
.crumb a { color: var(--slate-600); }
.crumb a:hover { color: var(--accent); }
.crumb .sep { color: var(--slate-400); }

@media (max-width: 900px) { .subhero-grid { grid-template-columns: 1fr; gap: 24px; } }

/* ============================ UTIL ============================ */
.section + .section { padding-top: 100px; }
.text-center { text-align: center; }
.muted { color: var(--slate-500); }

/* ============================ REVEAL / SCROLL-IN ============================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* tiny live signal */
.signal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.115em;
  text-transform: uppercase;
  color: var(--live);
}

/* ============================ MOBILE POLISH ============================ */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }

  .container, .container-narrow { padding: 0 20px; }
  .nav-inner { padding: 12px 20px; }
  .nav-logo { height: 38px; }
  .footer-logo { height: 40px; }

  /* Calmer vertical rhythm on phones */
  .section { padding: 72px 0; }
  .section-tight { padding: 56px 0; }
  .section-tighter { padding: 44px 0; }
  .section + .section { padding-top: 60px; }
  .section-head { margin-bottom: 40px; }

  /* Footer stacks fully */
  .footer { padding: 56px 0 28px; margin-top: 56px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-bottom: 40px; }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-legal { flex-direction: column; gap: 14px; }

  /* Buttons go full-width in stacked CTA rows for easy tapping */
  .hero-ctas, .cta-banner-actions { width: 100%; }
  .hero-ctas .btn, .cta-banner-actions .btn { flex: 1 1 auto; justify-content: center; }

  /* Stat blocks: 2-up reads better than cramped 1-up */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
}

@media (max-width: 460px) {
  .container, .container-narrow { padding: 0 16px; }
  .nav-inner { padding: 12px 16px; }
  .nav-logo { height: 36px; }
  .footer-logo { height: 36px; }
  .stats-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .mobile-menu-inner { padding: 22px 22px 30px; }
  .mm-link { font-size: 24px; }
}

/* ===== Dense product-mock hardening on small screens ===== */
@media (max-width: 760px) {
  /* Let the intricate dashboard pan horizontally instead of crushing */
  .showcase-visual { padding: 28px 0 0 22px; }
  .showcase-mock {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .showcase-mock::-webkit-scrollbar { display: none; }
  .ams-mock { min-width: 480px; }
  .ams-kpi { grid-template-columns: repeat(2, 1fr) !important; }
}