/* ═══════════════════════════════════════════════════════════════
   NIYUTSA TECHNOLOGIES — DESIGN SYSTEM v2
   Extends existing tokens. All components documented with states.
   Injection order: after 3f5opphsusqho.css (takes precedence)
   ═══════════════════════════════════════════════════════════════ */

/* ── EXTENDED TOKENS ──────────────────────────────────────────── */
:root {
  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radius scale — one consistent system */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Border widths */
  --border-width: 1px;
  --border-width-md: 1.5px;
  --border-width-lg: 2px;

  /* Motion tokens — Phase 1 audit: existing 0.6-0.8s too slow */
  --duration-instant: 80ms;
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 350ms;
  --duration-enter: 480ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* Typography additions */
  --font-serif: 'Instrument Serif', Georgia, serif;

  /* Section spacing */
  --section-padding: clamp(4rem, 8vw, 7rem);
  --section-padding-sm: clamp(2.5rem, 5vw, 4rem);

  /* Container */
  --container-max: 1280px;
  --container-narrow: 860px;
  --container-wide: 1400px;

  /* Status colors */
  --success: #00c896;
  --success-bg: #e6faf5;
  --warning-bg: #fffbeb;
}

/* ── SKIP TO CONTENT ─────────────────────────────────────────── */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  background: var(--primary);
  color: white;
  padding: var(--space-3) var(--space-6);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease-out);
}
.skip-to-content:focus {
  top: 0;
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ── NAVBAR ──────────────────────────────────────────────────── */
.n-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(250, 251, 252, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--duration-base) var(--ease-in-out),
              background var(--duration-base) var(--ease-in-out);
}
.n-header.scrolled {
  box-shadow: 0 2px 16px rgba(10, 110, 189, 0.08);
}
.n-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}
.n-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.n-logo img {
  height: 34px;
  width: auto;
  background: none;
}
.n-nav {
  display: flex;
  align-items: center;
  gap: 0;
}
.n-nav-item {
  position: relative;
}
.n-nav-link,
.n-nav-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-in-out),
              background var(--duration-fast) var(--ease-in-out);
  white-space: nowrap;
}
.n-nav-link:hover,
.n-nav-btn:hover {
  color: var(--primary);
  background: var(--primary-light);
}
.n-nav-link:focus-visible,
.n-nav-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.n-nav-chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-fast) var(--ease-in-out);
  stroke: currentColor;
  flex-shrink: 0;
}
.n-nav-btn[aria-expanded="true"] .n-nav-chevron {
  transform: rotate(180deg);
}
.n-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.n-rating-pill {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
  white-space: nowrap;
}
/* Dropdown panels */
.n-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(10, 110, 189, 0.14),
              0 4px 16px rgba(0,0,0,0.08);
  padding: var(--space-3);
  min-width: 220px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.n-dropdown.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.n-dropdown-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.6rem 0.875rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.n-dropdown-link:hover {
  background: var(--primary-light);
  color: var(--primary);
}
.n-dropdown-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
/* Hamburger */
.n-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--duration-fast);
}
.n-hamburger:hover { background: var(--primary-light); }
.n-hamburger:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── MOBILE NAVIGATION DRAWER ───────────────────────────────── */
.n-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
}
.n-mobile-nav.open { pointer-events: auto; }
.n-mobile-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 12, 20, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-in-out);
}
.n-mobile-nav.open .n-mobile-overlay { opacity: 1; }
.n-mobile-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(360px, 100vw);
  height: 100%;
  background: var(--surface);
  padding: var(--space-6);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
  box-shadow: -8px 0 40px rgba(0,0,0,0.12);
}
.n-mobile-nav.open .n-mobile-panel {
  transform: translateX(0);
}
.n-mobile-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8);
}
.n-mobile-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--duration-fast);
}
.n-mobile-close:hover { background: var(--primary-light); }
.n-mobile-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.n-mobile-link {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.n-mobile-link:hover {
  background: var(--primary-light);
  color: var(--primary);
}
.n-mobile-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--space-5) var(--space-3) var(--space-2);
}
.n-mobile-cta {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── HERO SECTION ────────────────────────────────────────────── */
.n-hero {
  background: var(--gradient-hero);
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.n-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.n-hero-content {
  position: relative;
  z-index: 1;
}
.n-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 200, 150, 0.15);
  border: 1px solid rgba(0, 200, 150, 0.3);
  border-radius: var(--radius-full);
  padding: 0.4rem 1rem;
  margin-bottom: 1.5rem;
  color: #00C896;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.n-hero-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00C896;
  animation: pulse-glow 2.5s infinite;
  flex-shrink: 0;
}
.n-hero-title {
  color: white;
  margin: 0 0 1.5rem;
  line-height: 1.05;
}
.n-hero-subtitle {
  color: rgba(255,255,255,0.75);
  line-height: 1.8;
  margin-bottom: 2rem;
  max-width: 520px;
}
.n-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.n-hero-trust {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.n-hero-trust-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255,255,255,0.65);
  font-size: 0.8125rem;
  font-weight: 500;
}
.n-hero-trust-item svg { flex-shrink: 0; }
.n-hero-image {
  position: relative;
  z-index: 1;
}
.n-hero-img-wrap {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.12);
  aspect-ratio: 4/3;
  position: relative;
}
.n-hero-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: none; /* override shimmer on hero */
}
/* Floating stat cards on hero image */
.n-hero-stat-card {
  position: absolute;
  background: rgba(255,255,255,0.96);
  border-radius: var(--radius-lg);
  padding: 0.875rem 1.25rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  white-space: nowrap;
}
.n-hero-stat-card .stat-value {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  letter-spacing: -0.025em;
}
.n-hero-stat-card .stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.3;
}

/* ── SECTION HEADING COMPONENT ──────────────────────────────── */
.n-section-heading {
  max-width: 680px;
}
.n-section-heading.centered {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.n-section-heading .eyebrow { display: inline-flex; }
.n-section-heading h2 { margin: 0 0 1rem; }
.n-section-heading p {
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin: 0;
}

/* ── TRUST / CERTIFICATION BADGE STRIP ──────────────────────── */
.n-trust-strip {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.n-trust-strip-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  padding: 1.25rem 0;
}
.n-trust-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 0.4375rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
  box-shadow: 0 1px 4px rgba(10, 110, 189, 0.06);
  white-space: nowrap;
  transition: border-color var(--duration-fast),
              box-shadow var(--duration-fast);
}
.n-trust-badge:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(10, 110, 189, 0.12);
}
.n-trust-badge svg { flex-shrink: 0; }

/* ── STAT BLOCK (numbers section) ───────────────────────────── */
.n-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
}
.n-stat {
  text-align: center;
  padding: 1.75rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-spring),
              box-shadow var(--duration-base),
              border-color var(--duration-base);
}
.n-stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}
.n-stat-value {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.5rem;
}
.n-stat-label {
  font-size: 0.875rem;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.4;
}

/* ── SERVICE CARD ────────────────────────────────────────────── */
.n-service-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-base) var(--ease-spring),
              box-shadow var(--duration-base),
              border-color var(--duration-base);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.n-service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-hero);
  opacity: 0;
  transition: opacity var(--duration-base);
  border-radius: inherit;
  pointer-events: none;
}
.n-service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary);
}
.n-service-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.n-service-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  transition: transform var(--duration-base) var(--ease-spring),
              background var(--duration-base);
  flex-shrink: 0;
}
.n-service-card:hover .n-service-icon {
  transform: scale(1.08) rotate(-3deg);
  background: var(--primary);
}
.n-service-card:hover .n-service-icon svg {
  stroke: white;
}
.n-service-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--foreground);
  margin: 0;
  line-height: 1.3;
}
.n-service-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}
.n-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.n-service-link {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  transition: gap var(--duration-fast);
}
.n-service-card:hover .n-service-link { gap: 0.625rem; }

/* ── SPECIALTY CARD ─────────────────────────────────────────── */
.n-specialty-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 500;
  transition: background var(--duration-fast),
              border-color var(--duration-fast),
              color var(--duration-fast),
              transform var(--duration-base) var(--ease-spring);
  box-shadow: var(--shadow-sm);
}
.n-specialty-card:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateX(4px);
}
.n-specialty-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── PROCESS STEP ────────────────────────────────────────────── */
.n-process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  position: relative;
}
.n-process-step {
  padding: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-spring),
              box-shadow var(--duration-base),
              border-color var(--duration-base);
}
.n-process-step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}
.n-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 12px rgba(10, 110, 189, 0.3);
  flex-shrink: 0;
}
.n-step-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--foreground);
  margin: 0 0 0.5rem;
}
.n-step-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}
/* Connector line between steps */
.n-process-step::after {
  content: '';
  position: absolute;
  top: 44px; /* align with step number center */
  right: -0.75rem;
  width: 1.5rem;
  height: 1px;
  background: var(--border);
}
.n-process-step:last-child::after { display: none; }

/* ── TESTIMONIAL CARD ────────────────────────────────────────── */
.n-testimonial {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-spring),
              box-shadow var(--duration-base),
              border-color var(--duration-base);
}
.n-testimonial:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(10, 110, 189, 0.2);
}
.n-testimonial-quote-mark {
  position: absolute;
  top: 1.25rem;
  left: 1.75rem;
  font-family: Georgia, serif;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--primary);
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
}
.n-testimonial-stars {
  display: flex;
  gap: 0.25rem;
}
.n-testimonial-stars svg { color: #F59E0B; }
.n-testimonial-text {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--foreground);
  margin: 0;
  font-style: italic;
  padding-top: 1.5rem; /* clear the quote mark */
}
.n-testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  margin-top: auto;
}
.n-testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
}
.n-testimonial-name {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--foreground);
  margin: 0 0 0.1rem;
}
.n-testimonial-role {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0;
}
.n-testimonial-badge {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-dark);
  background: var(--accent-light);
  border: 1px solid rgba(0,200,150,0.25);
  border-radius: var(--radius-full);
  padding: 0.25rem 0.625rem;
  white-space: nowrap;
}

/* ── FAQ ACCORDION ───────────────────────────────────────────── */
.n-faq {
  max-width: 800px;
}
.n-faq-item {
  border-bottom: 1px solid var(--border);
}
.n-faq-trigger {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  padding: 1.375rem 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: color var(--duration-fast);
}
.n-faq-trigger:hover { color: var(--primary); }
.n-faq-trigger:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.n-faq-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  transition: background var(--duration-fast),
              border-color var(--duration-fast),
              transform var(--duration-fast) var(--ease-spring);
}
.n-faq-trigger:hover .n-faq-icon,
.n-faq-trigger[aria-expanded="true"] .n-faq-icon {
  background: var(--primary);
  border-color: var(--primary);
}
.n-faq-trigger[aria-expanded="true"] .n-faq-icon {
  transform: rotate(45deg);
}
.n-faq-icon svg {
  width: 12px;
  height: 12px;
  stroke: var(--muted);
  transition: stroke var(--duration-fast);
}
.n-faq-trigger:hover .n-faq-icon svg,
.n-faq-trigger[aria-expanded="true"] .n-faq-icon svg {
  stroke: white;
}
.n-faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-slow) var(--ease-out);
}
.n-faq-body.open {
  grid-template-rows: 1fr;
}
.n-faq-body-inner {
  overflow: hidden;
}
.n-faq-answer {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.75;
  padding-bottom: 1.375rem;
  margin: 0;
}

/* ── CONSULTATION CTA SECTION ───────────────────────────────── */
.n-cta-section {
  background: var(--gradient-hero);
  border-radius: var(--radius-2xl);
  padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.n-cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.n-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #00C896;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.n-cta-title {
  color: white;
  margin: 0 auto 1.25rem;
  max-width: 640px;
}
.n-cta-desc {
  color: rgba(255,255,255,0.7);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin: 0 auto 2.5rem;
  max-width: 560px;
}
.n-cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.n-cta-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.n-cta-trust-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: rgba(255,255,255,0.6);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* ── CONTACT FORM ────────────────────────────────────────────── */
.n-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.n-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.n-form-field.full { grid-column: 1 / -1; }
.n-field-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
}
.n-field-label .required {
  color: var(--error);
  margin-left: 0.25rem;
}
.n-field-input {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.8125rem 1rem;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--foreground);
  outline: none;
  width: 100%;
  transition: border-color var(--duration-fast),
              box-shadow var(--duration-fast);
  -webkit-appearance: none;
}
.n-field-input::placeholder { color: var(--muted); }
.n-field-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(10, 110, 189, 0.12);
}
.n-field-input.error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.n-field-input.success {
  border-color: var(--success);
  box-shadow: 0 0 0 3px rgba(0, 200, 150, 0.1);
}
.n-field-error {
  font-size: 0.8125rem;
  color: var(--error);
  font-weight: 500;
  display: none;
}
.n-field-input.error + .n-field-error { display: block; }
textarea.n-field-input { resize: vertical; min-height: 120px; }
select.n-field-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2364748b' d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 16px;
  padding-right: 2.5rem;
  cursor: pointer;
}
.n-form-submit {
  margin-top: 0.5rem;
}
.n-form-success {
  display: none;
  text-align: center;
  padding: 2.5rem;
  border-radius: var(--radius-lg);
  background: var(--accent-light);
  border: 1px solid rgba(0, 200, 150, 0.25);
}
.n-form-success.show { display: block; }
.n-form-success-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

/* ── FOOTER ──────────────────────────────────────────────────── */
.n-footer {
  background: #060E1A;
  color: rgba(255,255,255,0.75);
  content-visibility: auto;
  contain-intrinsic-size: 1200px;
}
.n-footer-cta {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.n-footer-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.n-footer-cta-text h2 {
  color: white;
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
}
.n-footer-cta-text p {
  color: rgba(255,255,255,0.55);
  margin: 0;
  font-size: 0.9375rem;
}
.n-footer-cta-actions {
  display: flex;
  gap: 0.875rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.n-footer-main {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
}
.n-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
}
.n-footer-brand p {
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.5);
  margin: 1rem 0 1.5rem;
  max-width: 300px;
}
.n-footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.75rem;
  text-decoration: none;
}
.n-footer-contact-item:hover { color: white; }
.n-footer-contact-item svg { flex-shrink: 0; margin-top: 2px; }
.n-footer-col-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 1.25rem;
}
.n-footer-link {
  display: block;
  color: rgba(255,255,255,0.52);
  font-size: 0.8rem;
  text-decoration: none;
  line-height: 2;
  transition: color var(--duration-fast);
}
.n-footer-link:hover { color: white; }
.n-footer-link:focus-visible {
  outline: 1px solid var(--primary);
  border-radius: 2px;
}
.n-footer-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
.n-footer-stat {
  text-align: center;
  padding: 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
}
.n-footer-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: #00C896;
  letter-spacing: -0.025em;
  display: block;
}
.n-footer-stat-label {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  font-weight: 500;
  margin-top: 0.25rem;
}
.n-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.n-footer-bottom-text {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
}
.n-footer-legal {
  display: flex;
  gap: 1.5rem;
}
.n-footer-legal a {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  transition: color var(--duration-fast);
}
.n-footer-legal a:hover { color: rgba(255,255,255,0.7); }

/* ── PRIMARY / SECONDARY CTA BUTTON REFINEMENTS ─────────────── */
/* These BUILD ON existing .btn-primary/.btn-accent — don't replace */
.btn-primary,
.btn-accent,
.btn-outline,
.btn-ghost-white {
  border-radius: var(--radius-md);
  letter-spacing: 0.01em;
}
/* Loading state for form submit buttons */
.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.8;
}
.btn-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
@keyframes btn-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* ── IMPROVED MOTION SYSTEM ──────────────────────────────────── */
/* Replace the overly broad .section>.container animation */
.n-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-enter) var(--ease-out),
              transform var(--duration-enter) var(--ease-out);
}
.n-animate.visible {
  opacity: 1;
  transform: none;
}
.n-animate-delay-1 { transition-delay: 80ms; }
.n-animate-delay-2 { transition-delay: 160ms; }
.n-animate-delay-3 { transition-delay: 240ms; }
.n-animate-delay-4 { transition-delay: 320ms; }
.n-animate-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity var(--duration-enter) var(--ease-out),
              transform var(--duration-enter) var(--ease-out);
}
.n-animate-left.visible { opacity: 1; transform: none; }
.n-animate-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity var(--duration-enter) var(--ease-out),
              transform var(--duration-enter) var(--ease-out);
}
.n-animate-right.visible { opacity: 1; transform: none; }

/* ── RESPONSIVE OVERRIDES ────────────────────────────────────── */
@media (max-width: 1024px) {
  .n-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
  .n-footer-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .n-hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    
  }
  
  .n-hero-actions { justify-content: center; }
  .n-hero-trust { justify-content: center; }
  .n-hero-subtitle { margin-left: auto; margin-right: auto; }
  .n-hero-badge { justify-content: center; }
  .n-nav { display: none; }
  .n-hamburger { display: flex; }
  .n-rating-pill { display: none; }
  .n-process-step::after { display: none; }
}
@media (max-width: 768px) {
  .n-form-grid { grid-template-columns: 1fr; }
  .n-form-field.full { grid-column: 1; }
  .n-footer-cta-inner { flex-direction: column; text-align: center; }
  .n-footer-cta-actions { justify-content: center; }
  .n-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .n-footer-stats { grid-template-columns: repeat(2, 1fr); }
  .n-footer-bottom { flex-direction: column; text-align: center; }
  .n-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .n-hero-stat-card { display: none; } /* avoid overflow on small screens */
}
@media (max-width: 480px) {
  .n-footer-stats { grid-template-columns: 1fr 1fr; }
  .n-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .n-cta-actions { flex-direction: column; align-items: center; }
  .n-hero-actions { flex-direction: column; align-items: center; }
}

/* ── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .n-animate,
  .n-animate-left,
  .n-animate-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .n-mobile-panel,
  .n-mobile-overlay,
  .n-dropdown,
  .n-faq-body {
    transition: none;
  }
  .n-hero-pulse { animation: none; }
}

/* ── UTILITY ADDITIONS ───────────────────────────────────────── */
.n-text-white { color: white; }
.n-text-white-75 { color: rgba(255,255,255,0.75); }
.n-text-white-55 { color: rgba(255,255,255,0.55); }
.hidden-mobile { display: initial; }
.show-mobile { display: none; }
@media (max-width: 900px) {
  .hidden-mobile { display: none !important; }
  .show-mobile { display: flex !important; }
}



/* ═══════════════════════════════════════════════════════════════
   NIYUTSA MOTION SYSTEM
   Every animation here has a stated UX purpose.
   Principles: opacity+transform only · no layout props ·
   no infinite unless functional · prefers-reduced-motion respected
   ═══════════════════════════════════════════════════════════════ */

/* ── 0. MOTION TOKENS ──────────────────────────────────────────
   Single source of truth for all timing.
   --dur-*  : durations by use-case
   --ease-* : curves by character
   ─────────────────────────────────────────────────────────────── */
:root {
  /* Micro-interactions: button press, icon flip, checkbox tick */
  --dur-micro:  100ms;
  /* Fast UI feedback: hover state, focus ring, badge colour */
  --dur-fast:   150ms;
  /* Component transitions: dropdown open/close, tab switch */
  --dur-base:   220ms;
  /* Panel/drawer motion: mobile menu slide, modal open */
  --dur-panel:  320ms;
  /* Content reveal: scroll-triggered elements entering viewport */
  --dur-reveal: 460ms;
  /* Stagger unit: added per-item in a sequence */
  --dur-stagger: 60ms;

  /* Curves */
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1.0); /* standard decelerate */
  --ease-in:     cubic-bezier(0.4, 0.0, 1.0, 1.0); /* standard accelerate */
  --ease-inout:  cubic-bezier(0.4, 0.0, 0.2, 1.0); /* standard in-out    */
  --ease-spring: cubic-bezier(0.34, 1.20, 0.64, 1.0); /* slight overshoot */
  --ease-exit:   cubic-bezier(0.4, 0.0, 0.6, 1.0);  /* snappy exit       */
}


/* ── 1. NAVBAR ─────────────────────────────────────────────────
   UX purpose: communicate page scroll depth; shadow = depth cue.
   Only shadow+background change — no layout, no size, no position.
   ─────────────────────────────────────────────────────────────── */
/* n-header transition extends base rule */
.n-header {
  will-change: box-shadow;
}
.n-header.scrolled {
  box-shadow: 0 1px 0 var(--border), 0 4px 24px rgba(10,110,189,0.08);
}

/* Nav link hover underline — communicates interactivity */
.n-nav-link,
.n-nav-btn {
  transition:
    color       var(--dur-fast) var(--ease-out),
    background  var(--dur-fast) var(--ease-out);
}
/* Underline grows from centre — avoids the jarring left-to-right sweep */
.n-nav-link { position: relative; }
.n-nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%; right: 50%;
  height: 2px;
  background: var(--primary);
  border-radius: 1px;
  transition:
    left  var(--dur-base) var(--ease-spring),
    right var(--dur-base) var(--ease-spring);
}
.n-nav-link:hover::after,
.n-nav-link.active::after { left: 8px; right: 8px; }

/* Chevron rotation — confirms dropdown state change */
.n-nav-chevron {
  transition: transform var(--dur-fast) var(--ease-out);
}
.n-nav-btn[aria-expanded="true"] .n-nav-chevron {
  transform: rotate(180deg);
}


/* ── 2. HERO ENTRANCE SEQUENCE ─────────────────────────────────
   UX purpose: establish reading order (badge → headline → body →
   CTA → proof) so the eye is guided through the value proposition.
   CSS animation (not JS) = runs before JS parses, no flash.
   ─────────────────────────────────────────────────────────────── */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroInRight {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: none; }
}

/* Only run sequence on the actual hero section, not every page */
.n-hero .n-hero-badge     { animation: heroIn var(--dur-reveal) var(--ease-out) 80ms  both; }
.n-hero .n-hero-title     { animation: heroIn var(--dur-reveal) var(--ease-out) 160ms both; }
.n-hero .n-hero-subtitle  { animation: heroIn var(--dur-reveal) var(--ease-out) 240ms both; }
.n-hero .n-hero-actions   { animation: heroIn var(--dur-reveal) var(--ease-out) 320ms both; }
.n-hero .n-hero-trust     { animation: heroIn var(--dur-reveal) var(--ease-out) 400ms both; }
.n-hero .n-hero-image     { animation: heroInRight var(--dur-reveal) var(--ease-out) 120ms both; }

/* Stat cards: tiny pop after hero image has settled */
.n-hero-stat-card {
  animation: heroIn calc(var(--dur-reveal) - 40ms) var(--ease-spring) 500ms both;
}
/* Second card offset */
.n-hero-stat-card + .n-hero-stat-card {
  animation-delay: 560ms;
}

/* Pulsing online indicator — functional: signals active/live status */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,200,150,0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(0,200,150,0); }
}
.n-hero-pulse {
  animation: pulse 2s ease-in-out infinite;
  /* Finite enough in appearance: slow cycle, low opacity.
     UX: "we're actively helping providers" — like an active indicator */
}


/* ── 3. SCROLL REVEAL SYSTEM ───────────────────────────────────
   UX purpose: guide attention sequentially as content enters view;
   prevents overwhelming the reader with a full-page wall of text.
   JS adds .visible via IntersectionObserver. CSS drives the motion.
   ─────────────────────────────────────────────────────────────── */
.n-animate {
  opacity: 0;
  transform: translateY(16px);   /* subtle — not theatrical */
  transition:
    opacity   var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  will-change: opacity, transform;
}
.n-animate.visible {
  opacity: 1;
  transform: none;
}

/* Directional variants — used for paired content (text left, image right) */
.n-animate-left {
  opacity: 0;
  transform: translateX(-20px);
  transition:
    opacity   var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  will-change: opacity, transform;
}
.n-animate-left.visible  { opacity: 1; transform: none; }

.n-animate-right {
  opacity: 0;
  transform: translateX(20px);
  transition:
    opacity   var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  will-change: opacity, transform;
}
.n-animate-right.visible { opacity: 1; transform: none; }


/* ── 4. STAGGERED CARD REVEALS ─────────────────────────────────
   UX purpose: make a grid of cards feel like they arrive as a set,
   not a simultaneous wall. Stagger reads left-to-right naturally.
   Applied via .n-stagger-N classes added in JS per card index.
   ─────────────────────────────────────────────────────────────── */
.n-stagger-1  { transition-delay: calc(var(--dur-stagger) * 1); }
.n-stagger-2  { transition-delay: calc(var(--dur-stagger) * 2); }
.n-stagger-3  { transition-delay: calc(var(--dur-stagger) * 3); }
.n-stagger-4  { transition-delay: calc(var(--dur-stagger) * 4); }
.n-stagger-5  { transition-delay: calc(var(--dur-stagger) * 5); }
.n-stagger-6  { transition-delay: calc(var(--dur-stagger) * 6); }
/* Cap at 6 — beyond that stagger becomes wait, not rhythm */


/* ── 5. CARD HOVER INTERACTIONS ────────────────────────────────
   UX purpose: confirm the card is interactive before clicking.
   Small lift + shadow depth change = clear affordance.
   No scale — avoids text reflow on composited layer.
   ─────────────────────────────────────────────────────────────── */
.n-service-card,
.n-specialty-card,
.n-process-step,
.n-testimonial,
.n-stat {
  transition:
    transform     var(--dur-base) var(--ease-spring),
    box-shadow    var(--dur-base) var(--ease-out),
    border-color  var(--dur-base) var(--ease-out);
  will-change: transform;
}
.n-service-card:hover,
.n-process-step:hover,
.n-testimonial:hover,
.n-stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}
.n-specialty-card:hover {
  transform: translateX(4px);  /* horizontal = navigating to section */
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

/* Service icon spin on card hover — reinforces the card is the target */
.n-service-icon {
  transition:
    transform   var(--dur-base) var(--ease-spring),
    background  var(--dur-fast) var(--ease-out);
}
.n-service-card:hover .n-service-icon {
  transform: scale(1.08) rotate(-4deg);
  background: var(--primary);
}
.n-service-card:hover .n-service-icon svg { stroke: white; }

/* Arrow on service card link — advances right on hover */
.n-service-link { transition: gap var(--dur-fast) var(--ease-out); }
.n-service-card:hover .n-service-link { gap: 0.625rem; }

/* Trust badge lift */
.n-trust-badge {
  transition:
    transform    var(--dur-base) var(--ease-spring),
    box-shadow   var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.n-trust-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(10,110,189,0.12);
  border-color: var(--primary);
}


/* ── 6. BUTTON MICRO-INTERACTIONS ──────────────────────────────
   UX purpose: immediate tactile feedback confirming the click.
   Lift on hover (ready), press on active (fired), return on release.
   No scale — avoids text reflow. No bouncing spring on active.
   ─────────────────────────────────────────────────────────────── */
.btn-primary,
.btn-accent,
.btn-outline,
.btn-ghost-white {
  transition:
    transform    var(--dur-fast) var(--ease-out),
    box-shadow   var(--dur-fast) var(--ease-out),
    background   var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
  will-change: transform;
  border-radius: var(--radius-md);
}
.btn-primary:hover,
.btn-accent:hover { transform: translateY(-2px); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.btn-ghost-white:hover { background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.65); }

/* Active press — synchronous, no transition delay */
.btn-primary:active,
.btn-accent:active,
.btn-outline:active,
.btn-ghost-white:active {
  transform: translateY(0);
  transition-duration: var(--dur-micro);
}

/* Loading spinner on submit buttons */
@keyframes btnSpinner {
  to { transform: rotate(360deg); }
}
.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.75;
}
.btn-loading::after {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: btnSpinner 0.6s linear infinite;
}


/* ── 7. FAQ ACCORDION ──────────────────────────────────────────
   UX purpose: expand answer without the user losing their place.
   CSS grid-rows trick: 0fr → 1fr animates height without
   animating `height` directly (which would cause layout thrash).
   Icon rotates 45° (+ → ×) communicating close action.
   ─────────────────────────────────────────────────────────────── */
.n-faq-trigger {
  transition: color var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.n-faq-trigger:hover { color: var(--primary); }

/* Icon: background fills on active, rotates on open */
.n-faq-icon {
  flex-shrink: 0;
  transition:
    background  var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform   var(--dur-base) var(--ease-spring);
}
.n-faq-trigger[aria-expanded="true"] .n-faq-icon {
  background: var(--primary);
  border-color: var(--primary);
  transform: rotate(45deg);
}
.n-faq-trigger:hover .n-faq-icon {
  background: var(--primary-light);
  border-color: var(--primary);
}
.n-faq-icon svg {
  transition: stroke var(--dur-fast) var(--ease-out);
}
.n-faq-trigger[aria-expanded="true"] .n-faq-icon svg,
.n-faq-trigger:hover .n-faq-icon svg { stroke: var(--primary); }
.n-faq-trigger[aria-expanded="true"] .n-faq-icon svg { stroke: white; }

/* Height animation via grid-rows — no layout thrash */
.n-faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-panel) var(--ease-out);
}
.n-faq-body.open {
  grid-template-rows: 1fr;
}
.n-faq-body-inner { overflow: hidden; }

/* Fade the answer in as height expands */
.n-faq-answer {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out) 80ms; /* slight lead */
}
.n-faq-body.open .n-faq-answer { opacity: 1; }


/* ── 8. MOBILE MENU ────────────────────────────────────────────
   UX purpose: clear spatial model (panel slides in from right)
   with darkened overlay to focus attention. Overlay fades,
   panel translates — both GPU composited.
   ─────────────────────────────────────────────────────────────── */
.n-mobile-overlay {
  opacity: 0;
  transition: opacity var(--dur-panel) var(--ease-out);
}
.n-mobile-nav.open .n-mobile-overlay { opacity: 1; }

.n-mobile-panel {
  transform: translateX(100%);
  transition: transform var(--dur-panel) var(--ease-out);
}
.n-mobile-nav.open .n-mobile-panel {
  transform: none;
}

/* Links stagger into view — creates sequence, not simultaneous wall */
@keyframes mobileLink {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}
.n-mobile-nav.open .n-mobile-link {
  animation: mobileLink var(--dur-base) var(--ease-out) both;
}
/* Stagger each link individually — capped at 6 */
.n-mobile-nav.open .n-mobile-link:nth-child(1)  { animation-delay: calc(var(--dur-panel) * 0.4); }
.n-mobile-nav.open .n-mobile-link:nth-child(2)  { animation-delay: calc(var(--dur-panel) * 0.4 + var(--dur-stagger)); }
.n-mobile-nav.open .n-mobile-link:nth-child(3)  { animation-delay: calc(var(--dur-panel) * 0.4 + var(--dur-stagger) * 2); }
.n-mobile-nav.open .n-mobile-link:nth-child(4)  { animation-delay: calc(var(--dur-panel) * 0.4 + var(--dur-stagger) * 3); }
.n-mobile-nav.open .n-mobile-link:nth-child(5)  { animation-delay: calc(var(--dur-panel) * 0.4 + var(--dur-stagger) * 4); }
.n-mobile-nav.open .n-mobile-link:nth-child(n+6) { animation-delay: calc(var(--dur-panel) * 0.4 + var(--dur-stagger) * 5); }

/* Hamburger icon morphs to X via CSS — no extra JS */
.n-hamburger { transition: background var(--dur-fast) var(--ease-out); }
.n-hamburger:hover { background: var(--primary-light); }
.n-hamburger:active { background: var(--primary-light); transform: scale(0.95); }
.n-hamburger { transition: background var(--dur-fast), transform var(--dur-micro); }


/* ── 9. STATISTICS COUNTER ─────────────────────────────────────
   UX purpose: animate numbers as they enter viewport — draws the
   eye to key proof points (99.4%, 500+, 50 states).
   CSS sets initial state; JS IntersectionObserver triggers count.
   The pop effect (slight scale) lands the final number.
   ─────────────────────────────────────────────────────────────── */
@keyframes counterPop {
  0%   { opacity: 0; transform: scale(0.88); }
  60%  { transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}
/* Counter elements start invisible; JS adds .counted class */
[data-count] {
  display: inline-block;  /* needed for transform */
}
[data-count].counted {
  animation: counterPop 0.5s var(--ease-spring) both;
}

/* n-stat card: number scales slightly on hover to reinforce importance */
.n-stat-value {
  transition: transform var(--dur-fast) var(--ease-spring);
  display: inline-block;
}
.n-stat:hover .n-stat-value { transform: scale(1.04); }


/* ── 10. DROPDOWN (NAV) TRANSITION ────────────────────────────
   UX purpose: animate open to avoid a sudden pop that distracts;
   animate close to confirm dismiss. Scale from top + opacity.
   ─────────────────────────────────────────────────────────────── */
@keyframes dropIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1);    }
}
.n-dropdown {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px) scale(0.97);
  transition:
    opacity   var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
.n-dropdown.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  /* Use animation for open (not transition) so it re-fires on every open */
  animation: dropIn var(--dur-base) var(--ease-out) both;
}
.n-dropdown-link {
  transition:
    background var(--dur-fast) var(--ease-out),
    color      var(--dur-fast) var(--ease-out);
}


/* ── 11. FORM VALIDATION FEEDBACK ──────────────────────────────
   UX purpose: clear, immediate signal about field validity.
   Error = red border + gentle shake (draws attention without alarm).
   Success = green border + no shake (positive confirmation).
   Focus = blue glow (current focus point).
   ─────────────────────────────────────────────────────────────── */
.n-field-input {
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow   var(--dur-fast) var(--ease-out);
}
.n-field-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(10,110,189,0.12);
  outline: none;
}
.n-field-input.error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(239,68,68,0.1);
}
.n-field-input.success {
  border-color: var(--success, #00c896);
  box-shadow: 0 0 0 3px rgba(0,200,150,0.1);
}

/* Error shake — brief, not looping. Only on .shaking class added by JS */
@keyframes fieldShake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-5px); }
  40%  { transform: translateX(5px); }
  60%  { transform: translateX(-3px); }
  80%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}
.n-field-input.shaking {
  animation: fieldShake 320ms var(--ease-inout) both;
}

/* Error message slides down */
.n-field-error {
  font-size: 0.8125rem;
  color: var(--error);
  font-weight: 500;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height var(--dur-base) var(--ease-out),
    opacity    var(--dur-fast) var(--ease-out);
}
.n-field-input.error ~ .n-field-error {
  max-height: 2rem;
  opacity: 1;
}

/* Form success reveal */
@keyframes successIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.n-form-success.show {
  animation: successIn var(--dur-reveal) var(--ease-spring) both;
}


/* ── 12. CTA SECTION INTERACTION ───────────────────────────────
   UX purpose: the consultation CTA is the primary conversion point.
   Subtle background shift on hover makes the whole section feel
   responsive without distracting from the CTA buttons.
   ─────────────────────────────────────────────────────────────── */
.n-cta-section {
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.n-cta-section:hover {
  box-shadow: 0 32px 80px rgba(10,110,189,0.25);
}


/* ── GLOBAL: Disable the old Framer / revealUp that conflicts ──
   The compiled Next.js chunk runs Framer Motion whileInView at
   0.6-0.7s. Our CSS system runs at --dur-reveal (460ms).
   Neutralise the section-level CSS animation that fires on load. */
.section > .container { animation: none !important; }


/* ── RESPONSIVE: Reduce motion distance on mobile ──────────────
   Smaller screens = less viewport travel = smaller offsets needed */
@media (max-width: 768px) {
  .n-animate          { transform: translateY(10px); }
  .n-animate-left     { transform: translateX(-12px); }
  .n-animate-right    { transform: translateX(12px); }
  .n-hero .n-hero-badge,
  .n-hero .n-hero-title,
  .n-hero .n-hero-subtitle,
  .n-hero .n-hero-actions,
  .n-hero .n-hero-trust,
  .n-hero .n-hero-image {
    animation-duration: calc(var(--dur-reveal) * 0.8);
  }
}

/* ── prefers-reduced-motion ────────────────────────────────────
   Hard stop on ALL motion. Transitions become instant (0.01ms).
   Animations are stopped entirely.
   ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Transitions: instant, not removed, so state changes still apply */
  *,
  *::before,
  *::after {
    transition-duration:        0.01ms !important;
    transition-delay:           0ms    !important;
    animation-duration:         0.01ms !important;
    animation-delay:            0ms    !important;
    animation-iteration-count:  1      !important;
  }
  /* Scroll reveal: show immediately */
  .n-animate,
  .n-animate-left,
  .n-animate-right {
    opacity: 1;
    transform: none;
  }
  /* Hero: show immediately */
  .n-hero .n-hero-badge,
  .n-hero .n-hero-title,
  .n-hero .n-hero-subtitle,
  .n-hero .n-hero-actions,
  .n-hero .n-hero-trust,
  .n-hero .n-hero-image,
  .n-hero-stat-card {
    opacity: 1;
    animation: none;
  }
  /* Remove pulsing live indicator */
  .n-hero-pulse { animation: none; }
  /* Counters: show final value immediately */
  [data-count].counted { animation: none; }
}

/* ── Utility ──────────────────────────────────────────────────── */
/* Prevent layout shift during Framer Motion's initial opacity:0 phase.
   The 1800ms failsafe already handles this via setTimeout,
   but this ensures visible=true content never flashes invisible. */
.n-hero .n-hero-content,
.n-hero .n-hero-image {
  /* Let CSS animation handle visibility — override Framer inline styles */
  opacity: 1 !important;
  transform: none !important;
}
/* BUT the hero badge/title/etc. need their initial state for the animation */
/* We use a specificity trick: animate FROM, so they start visible in HTML,
   the animation sets from:opacity 0 via @keyframes fill:both */

/* Mobile layout: hero stacks, CTA stacks */
@media (max-width: 900px) {
  .n-hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    
  }
  
  .n-hero-actions,
  .n-hero-trust { justify-content: center; }
}
@media (max-width: 640px) {
  .n-hero-actions,
  .n-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .n-hero-actions .btn-accent,
  .n-hero-actions .btn-ghost-white,
  .n-cta-actions .btn-accent,
  .n-cta-actions .btn-ghost-white {
    width: 100%;
    justify-content: center;
  }
  /* FAQ two-col collapses */
  .faq-layout { grid-template-columns: 1fr !important; gap: 2rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR + HEADER GEOMETRY (deterministic heights)
   Fixes: bar text wrapping → variable height → white gap above nav
   ═══════════════════════════════════════════════════════════════ */
:root{
  --annbar-h: 36px;
  --header-h: 68px;
}
@media (max-width: 768px){
  :root{ --annbar-h: 34px; --header-h: 60px; }
}

.n-annbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 101;
  height: var(--annbar-h);
  background: var(--gradient-hero);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;        /* never wrap → height stays fixed */
  overflow: hidden;
}
.n-annbar-text{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.n-annbar-cta{
  color: #00C896;
  text-decoration: none;
  font-weight: 700;
  flex-shrink: 0;
}
.n-annbar-cta:hover{ text-decoration: underline; }
.n-annbar svg{ flex-shrink: 0; }

/* Mobile: drop the long descriptor, keep the phone CTA */
@media (max-width: 640px){
  .n-annbar-text{ display: none; }
  .n-annbar{ font-size: 0.78rem; }
}

/* Header sits directly beneath the bar, fixed height */
.n-header{ top: var(--annbar-h); }
.n-header-inner{ height: var(--header-h); }

/* Body offset = bar + header. Pure CSS → correct on first paint. */
body{ padding-top: calc(var(--annbar-h) + var(--header-h)); }

/* Hero must fill the viewport MINUS the fixed chrome, not 100vh */
.n-hero{
  min-height: calc(100vh - var(--annbar-h) - var(--header-h));
}
@media (max-width: 900px){
  .n-hero{ min-height: auto; padding-block: clamp(2.5rem,7vw,4.5rem); }
}


/* ═══════════════════════════════════════════════════════════════
   HEADER + HERO LAYOUT — SINGLE AUTHORITATIVE BLOCK
   This is the last word on header and hero geometry. Nothing after
   this should redefine these properties.

   Desktop  : two equal-height columns, content-driven section height
   ≤1024px  : single column, copy first, image after
   ═══════════════════════════════════════════════════════════════ */

/* ---- Header band ------------------------------------------------ */
.n-header{
  position: fixed;
  top: var(--annbar-h);
  left: 0; right: 0;
  z-index: 200;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 0;
  box-shadow: 0 1px 0 var(--border);
}
.n-header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.n-header-inner > .n-logo{ flex: 0 0 auto; }
.n-header-inner > .n-nav{ flex: 1 1 auto; justify-content: center; }
.n-header-inner > .n-header-actions{ flex: 0 0 auto; }

/* Announcement bar shares the container gutters */
.n-annbar{ padding-inline: clamp(1rem, 4vw, 2.5rem); }

/* ---- Hero section ----------------------------------------------- */
.n-hero{
  display: block;
  min-height: 0;
  padding-block: clamp(2.75rem, 5.5vw, 4.75rem);
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden;
}
.n-hero > .container{
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
  z-index: 1;
}
.n-hero-grid{
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: clamp(2rem, 4.5vw, 3.75rem);
  align-items: stretch;
}
.n-hero-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 40rem;
  position: relative;
  z-index: 1;
}
.n-hero-badge{ margin-bottom: 1.125rem; }
.n-hero-title{ margin: 0 0 1.125rem; line-height: 1.08; letter-spacing: -0.02em; }
.n-hero-subtitle{ margin: 0 0 1.75rem; max-width: 34rem; }
.n-hero-actions{ margin-bottom: 1.75rem; gap: 0.875rem; flex-wrap: wrap; }

.n-hero-trust{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0.625rem 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.14);
  max-width: 34rem;
}
.n-hero-trust-item{
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; font-weight: 600;
  color: rgba(255,255,255,0.88); min-width: 0;
}
.n-hero-trust-item svg{ flex-shrink: 0; }

.n-hero-image{ position: relative; z-index: 1; isolation: isolate; }
.n-hero-img-wrap{
  position: relative;
  height: 100%;
  min-height: clamp(24rem, 40vw, 34rem);
  aspect-ratio: auto;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.10);
}
.n-hero-img-wrap img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}
.n-hero-stat-card{
  position: absolute;
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.75rem 1rem;
  box-shadow: 0 16px 40px rgba(0,0,0,0.20);
  max-width: min(15rem, 72%);
  z-index: 2;
}

/* ---- ≤1024px: one column, copy first ---------------------------- */
@media (max-width: 1024px){
  .n-hero{ padding-block: clamp(2.25rem, 6vw, 3.5rem); }
  .n-hero-grid{
    grid-template-columns: 1fr;
    gap: 2.25rem;
    align-items: start;
    text-align: left;
  }
  .n-hero-content{ display: block; max-width: none; order: 0; }
  .n-hero-image{ order: 1; max-width: 34rem; margin-inline: auto; width: 100%; }
  .n-hero-img-wrap{ height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .n-hero-actions{ justify-content: flex-start; }
  .n-hero-badge{ justify-content: flex-start; }
  .n-hero-subtitle{ margin-inline: 0; }
}

/* ---- ≤720px: stack actions, inline the stat cards --------------- */
@media (max-width: 720px){
  .n-hero-trust{ grid-template-columns: 1fr; max-width: none; }
  .n-hero-actions{ flex-direction: column; align-items: stretch; }
  .n-hero-actions > *{ width: 100%; justify-content: center; }
  .n-hero-image{ display: flex; flex-direction: column; gap: 0.625rem; }
  .n-hero-stat-card{
    position: static;
    inset: auto;
    max-width: none;
    width: 100%;
    box-shadow: 0 6px 18px rgba(0,0,0,0.14);
  }
  .n-hero-title{ font-size: clamp(1.9rem, 8vw, 2.5rem); }
}

/* ═══════════════════════════════════════════════════════════════
   MODERN THEME LAYER — refined surfaces, rhythm and typography
   Applied sitewide. Loaded last so it settles the visual system.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --surface-raised:#ffffff;
  --surface-sunken:#f6f8fb;
  --ink-1:#0d1117;
  --ink-2:#41505f;
  --ink-3:#6b7a89;
  --line:#e6ecf2;
  --brand:#0a6ebd;
  --brand-ink:#064e8c;
  --accent:#00a67d;
  --ring:0 0 0 3px rgba(10,110,189,.14);
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px;
  --shadow-1:0 1px 2px rgba(13,17,23,.05);
  --shadow-2:0 4px 14px rgba(13,17,23,.07);
  --shadow-3:0 18px 46px rgba(13,17,23,.11);
  --sp-section:clamp(3.25rem,6.5vw,5.75rem);
}

/* ---- Consistent vertical rhythm between every band -------------- */
main > section,
main > div > section{ padding-block: var(--sp-section); }
main > section:first-child{ padding-block-start: 0; }

/* Alternate surfaces so bands read as distinct without heavy borders.
   NOTE: the :not() guards are load-bearing — an earlier version used a
   separate `background: initial` override, whose higher specificity beat
   `.n-hero` and made the hero transparent (white text on white). Excluding
   the bands here means there is nothing to override. */
main > section:nth-of-type(even):not(.n-hero):not(.n-trust-strip):not(.n-explore):not(.n-cta-band){
  background: var(--surface-sunken);
}

/* ---- Typography ------------------------------------------------- */
.display-xl{ letter-spacing:-.025em; line-height:1.05; }
.display-md{
  font-size:clamp(1.65rem,3.1vw,2.4rem);
  letter-spacing:-.02em; line-height:1.16; color:var(--ink-1);
  margin:0 0 .85rem;
}
.eyebrow{
  display:inline-block; font-size:.7rem; font-weight:800;
  letter-spacing:.11em; text-transform:uppercase; color:var(--brand);
  margin-bottom:.6rem;
}
.body-lg{ color:var(--ink-2); line-height:1.72; }
section > .container > p{ color:var(--ink-2); }

/* Section heading blocks get a consistent measure */
.n-section-heading, .section > .container > .eyebrow + .display-md{ max-width:46rem; }
.section > .container > p:first-of-type{ max-width:44rem; }

/* ---- Cards ------------------------------------------------------ */
.n-service-card,.n-testimonial,.n-stat,.n-process-step,.card{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
}
.n-service-card:hover,.n-testimonial:hover,.n-stat:hover,.n-process-step:hover{
  box-shadow:var(--shadow-3);
  border-color:rgba(10,110,189,.32);
}
.n-service-icon{
  width:46px;height:46px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(10,110,189,.11),rgba(0,166,125,.11));
}

/* ---- Buttons ---------------------------------------------------- */
.btn-primary,.btn-accent,.btn-outline,.btn-ghost-white{
  border-radius:var(--r-sm); font-weight:700; letter-spacing:.005em;
}
.btn-primary{ background:var(--brand); }
.btn-primary:hover{ background:var(--brand-ink); box-shadow:var(--shadow-2); }
.btn-accent:hover{ box-shadow:0 10px 26px rgba(0,166,125,.30); }
:where(a,button,input,select,textarea):focus-visible{
  outline:none; box-shadow:var(--ring); border-radius:var(--r-sm);
}

/* ---- Trust strip ------------------------------------------------ */
.n-trust-strip{
  background:var(--surface-raised);
  border-block:1px solid var(--line);
  padding-block:1.1rem;
}

/* ---- Stats ------------------------------------------------------ */
.n-stats-grid{ gap:1rem; }
.n-stat{ padding:1.6rem 1.25rem; text-align:center; }
.num-xl{ font-size:clamp(1.9rem,3.4vw,2.6rem); font-weight:800; letter-spacing:-.02em; }

/* ---- FAQ -------------------------------------------------------- */
.n-faq-item{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  margin-bottom:.6rem;
}
.n-faq-trigger{ padding:1.05rem 1.25rem; font-weight:650; color:var(--ink-1); }
.n-faq-answer{ color:var(--ink-2); padding:0 1.25rem 1.15rem; }

/* ---- CTA band --------------------------------------------------- */
.n-cta-section{
  border-radius:var(--r-xl);
  padding:clamp(2.25rem,4.5vw,3.5rem);
  box-shadow:var(--shadow-3);
}

/* ---- Explore / internal-link band ------------------------------- */
.n-explore{ background:var(--surface-raised) !important; border-top:1px solid var(--line); }

/* ---- Mobile polish ---------------------------------------------- */
@media (max-width:720px){
  :root{ --sp-section:clamp(2.5rem,8vw,3.25rem); }
  .n-cta-section{ padding:1.75rem 1.25rem; border-radius:var(--r-lg); }
  .n-stat{ padding:1.25rem 1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   DARK-SURFACE CONTRAST GUARD
   The theme layer sets body copy to --ink-2 (#41505f). That is
   correct on light bands but unreadable on the dark hero and CTA
   band. Scope light text to every dark surface so no future theme
   token can reintroduce white-on-white or dark-on-dark.
   ═══════════════════════════════════════════════════════════════ */
.n-hero,
.n-cta-section,
.n-annbar{
  color: #ffffff;
}
.n-hero :is(h1,h2,h3,h4),
.n-cta-section :is(h1,h2,h3,h4){
  color: #ffffff;
}
.n-hero :is(p,li,span):not(.n-hero-stat-card *):not(.n-hero-badge),
.n-cta-section :is(p,li,span){
  color: rgba(255,255,255,0.88);
}
.n-hero .body-lg,
.n-hero .n-hero-subtitle,
.n-cta-section .body-lg{
  color: rgba(255,255,255,0.88);
}
.n-hero .eyebrow,
.n-cta-section .eyebrow{
  color: #4fd1a5;
}
.n-hero .n-hero-badge{
  color: #7ff0cb;
}
.n-hero a:not(.btn-accent):not(.btn-primary):not(.btn-ghost-white),
.n-cta-section a:not(.btn-accent):not(.btn-primary):not(.btn-ghost-white){
  color: #7ff0cb;
}
/* Stat cards sit on light surfaces inside the dark hero — keep dark ink */
.n-hero .n-hero-stat-card,
.n-hero .n-hero-stat-card :is(p,span,div){
  color: var(--ink-1);
}
.n-hero .n-hero-stat-card .n-stat-value{ color: var(--brand); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE IMAGES
   <picture> wraps every content <img>. display:contents removes the
   wrapper from layout so all existing selectors that target the img
   as a direct child (e.g. .n-hero-img-wrap img) keep working.
   ═══════════════════════════════════════════════════════════════ */
picture{ display: contents; }
/* Fallback for engines without display:contents */
@supports not (display: contents){
  picture{ display: block; width: 100%; height: 100%; }
}
img{ max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   HERO — ONE-FRAME FIT + CORRECT IMAGE FRAMING          (final)
   Problem 1: hero measured ~800px tall on a 1440x900 laptop
              (104 chrome + 152 padding + 544px image row) so the
              headline required scrolling.
   Problem 2: a 4016x6016 portrait source cover-cropped into a
              landscape-ish box showed only ~55% of the frame,
              which reads as "zoomed in".
   Fix: narrower, portrait image column (less crop, shorter row),
        tighter type and padding, and the section sized to exactly
        one viewport frame with its content optically centred.
   ═══════════════════════════════════════════════════════════════ */
.n-hero{
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--annbar-h) - var(--header-h));
  min-height: calc(100svh - var(--annbar-h) - var(--header-h)); /* mobile URL bar */
  padding-block: clamp(1.25rem, 2.6vw, 2.5rem);
}
.n-hero > .container{ width: 100%; }

/* Copy gets the room; image column is narrower so it crops less */
.n-hero-grid{
  grid-template-columns: 1.24fr 0.76fr;
  gap: clamp(1.75rem, 3.6vw, 3rem);
  align-items: center;
}

/* ---- Tighter vertical rhythm so everything clears the fold ----- */
.n-hero-title{
  font-size: clamp(1.9rem, 3.3vw, 3.05rem);
  line-height: 1.08;
  margin: 0 0 .85rem;
}
.n-hero-badge{ margin-bottom: .85rem; }
.n-hero-subtitle{
  font-size: clamp(.98rem, 1.15vw, 1.0625rem);
  line-height: 1.62;
  margin: 0 0 1.25rem;
  max-width: 36rem;
}
.n-hero-actions{ margin-bottom: 1.15rem; gap: .75rem; }
.n-hero-trust{
  padding-top: .9rem;
  gap: .45rem 1.15rem;
  font-size: .78rem;
}
.n-hero-trust-item{ font-size: .78rem; }

/* ---- Image: portrait box, so far less of the frame is cropped -- */
.n-hero-img-wrap{
  height: auto;
  min-height: 0;
  aspect-ratio: 5 / 6;
  max-height: calc(100svh - var(--annbar-h) - var(--header-h) - 5rem);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.n-hero-img-wrap img{
  object-fit: cover;
  object-position: center 28%;   /* keeps the face comfortably framed */
}

/* Floating stat cards kept inside the narrower column */
.n-hero-stat-card{
  max-width: min(13.5rem, 88%);
  padding: .6rem .8rem;
  font-size: .8125rem;
}

/* ---- Tablet / mobile: natural height, copy first --------------- */
@media (max-width: 1024px){
  .n-hero{
    min-height: 0;
    display: block;
    padding-block: clamp(1.75rem, 5vw, 2.75rem);
  }
  .n-hero-grid{ grid-template-columns: 1fr; align-items: start; }
  .n-hero-img-wrap{
    aspect-ratio: 16 / 10;
    max-height: none;
  }
  .n-hero-img-wrap img{ object-position: center 30%; }
  .n-hero-title{ font-size: clamp(1.85rem, 6.4vw, 2.5rem); }
}

/* ---- Short viewports (1366x768 class laptops, ~660px visible) ---
   Compress the hero further so the headline, CTA and trust row all
   clear the fold without scrolling. Only applies where height is
   genuinely constrained, so tall displays keep the roomier scale. */
@media (min-width: 1025px) and (max-height: 820px){
  .n-hero{ padding-block: clamp(.75rem, 1.6vw, 1.25rem); }
  .n-hero-title{ font-size: clamp(1.75rem, 2.75vw, 2.4rem); margin-bottom: .7rem; }
  .n-hero-badge{ margin-bottom: .7rem; }
  .n-hero-subtitle{ font-size: 1rem; line-height: 1.55; margin-bottom: 1rem; }
  .n-hero-actions{ margin-bottom: .9rem; }
  .n-hero-trust{ padding-top: .75rem; gap: .35rem 1rem; }
  /* wider ratio => SHORTER image, which is what reclaims height here */
  .n-hero-img-wrap{
    aspect-ratio: 1 / 1;
    max-height: calc(100svh - var(--annbar-h) - var(--header-h) - 3rem);
  }
}
/* Very short viewports — drop the trust grid to a single dense row */
@media (min-width: 1025px) and (max-height: 700px){
  .n-hero-title{ font-size: clamp(1.6rem, 2.4vw, 2.05rem); }
  .n-hero-subtitle{ font-size: .95rem; margin-bottom: .85rem; }
  .n-hero-trust{ grid-template-columns: repeat(4, minmax(0,1fr)); font-size: .72rem; }
  .n-hero-trust-item{ font-size: .72rem; }
  .n-hero-img-wrap{ aspect-ratio: 6 / 5; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO HEADLINE — three-line typographic set
   The <br class="n-hero-br"> breaks give a deterministic
   24 / 20 / 7 character stair on desktop. Size is tuned so the
   longest line (24ch) sits comfortably inside the copy column
   without becoming oversized. Below 1024px the hard breaks are
   suppressed and the browser balances the wrap instead.
   ═══════════════════════════════════════════════════════════════ */
.n-hero-title{
  font-size: clamp(1.95rem, 2.8vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.021em;
  margin: 0 0 1rem;
  /* No ch-based cap on desktop: the longest line is 24ch and a 22ch
     cap forced an unwanted 4th line. The explicit <br> breaks define
     the structure; .n-hero-content (40rem) bounds the measure. */
  max-width: none;
}
.n-hero-br{ display: inline; }

/* Short laptops — scale the three lines down, keep the structure */
@media (min-width: 1025px) and (max-height: 820px){
  .n-hero-title{ font-size: clamp(1.55rem, 2.25vw, 2.05rem); margin-bottom: .8rem; }
}
@media (min-width: 1025px) and (max-height: 700px){
  .n-hero-title{ font-size: clamp(1.45rem, 2vw, 1.85rem); margin-bottom: .65rem; }
}

/* Tablet & mobile — drop the hard breaks, let the text balance */
@media (max-width: 1024px){
  .n-hero-br{ display: none; }
  .n-hero-title{
    font-size: clamp(1.8rem, 5.6vw, 2.45rem);
    max-width: 18ch;
    text-wrap: balance;
  }
}
@media (max-width: 560px){
  .n-hero-title{ font-size: clamp(1.65rem, 7.4vw, 2.1rem); max-width: 15ch; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO — PREMIUM REFINEMENT                              (final)
   Previously the two stat cards used negative offsets
   (left:-1.5rem / right:-1.5rem) so they hung outside the image:
   on the left they intruded into the column gutter, on the right
   they crowded the container edge. They are now frosted-glass
   chips anchored inside the frame, which reads as deliberate and
   cannot collide or overflow at any width.
   ═══════════════════════════════════════════════════════════════ */

/* ---- Depth: soft accent bloom behind the image ----------------- */
.n-hero-image{ position: relative; }
.n-hero-image::before{
  content:"";
  position:absolute;
  inset:-12% -8% -8% -12%;
  background:
    radial-gradient(60% 55% at 78% 18%, rgba(0,200,150,.20), transparent 70%),
    radial-gradient(55% 50% at 20% 85%, rgba(125,211,252,.16), transparent 72%);
  filter: blur(28px);
  z-index:0;
  pointer-events:none;
}

/* ---- Image frame: layered elevation + inner ring --------------- */
.n-hero-img-wrap{
  position: relative;
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 2px 6px rgba(3,43,82,.20),
    0 18px 40px rgba(3,43,82,.28),
    0 40px 90px rgba(3,43,82,.22);
  border: 1px solid rgba(255,255,255,.14);
}
.n-hero-img-wrap::after{           /* crisp inner hairline */
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset;
  pointer-events:none;
  z-index:3;
}
/* Scrim: grounds the frame and makes the overlaid chip legible */
.n-hero-img-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(3,43,82,.55) 0%, rgba(3,43,82,.12) 32%, transparent 58%),
    linear-gradient(135deg, rgba(10,110,189,.14) 0%, transparent 55%);
  z-index:2;
  pointer-events:none;
}

/* ---- Stat chips: frosted glass, anchored INSIDE the frame ------ */
.n-hero-stat-card{
  position:absolute;
  z-index:4;
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.55rem .75rem;
  border-radius:12px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow: 0 8px 22px rgba(3,43,82,.22);
  max-width: min(12.5rem, calc(100% - 1.5rem));
}
.n-hero-stat--bl{ left:.75rem;  bottom:.75rem; }
.n-hero-stat--tr{ right:.75rem; top:.75rem;    }

/* Specificity note: the dark-surface contrast guard uses
   `.n-hero .n-hero-stat-card :is(p,span,div)` (0,3,0). These chip
   rules must match or exceed that, hence the leading `.n-hero`. */
.n-hero .n-hero-stat-card .stat-value{
  font-size:1.02rem; font-weight:800; line-height:1.1;
  letter-spacing:-.01em; color:var(--brand);
}
.n-hero .n-hero-stat-card .stat-label{
  font-size:.66rem; font-weight:700; line-height:1.25;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);
  margin-top:1px;
}
.n-hero-stat-card > div:first-child{ width:30px; height:30px; border-radius:9px; }
.n-hero-stat-card svg{ width:15px; height:15px; }

/* ---- Copy column: tighter optical rhythm ---------------------- */
.n-hero-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .8rem;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.17);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:.75rem; font-weight:700;
  letter-spacing:.02em;
}
.n-hero-subtitle{ color:rgba(255,255,255,.86); }

/* Trust row: hairline separators instead of a heavy top border */
.n-hero-trust{
  border-top:1px solid rgba(255,255,255,.13);
  padding-top:1rem;
  gap:.55rem 1.5rem;
}
.n-hero-trust-item{
  color:rgba(255,255,255,.9);
  font-weight:600;
  letter-spacing:.005em;
}
.n-hero-trust-item svg{ opacity:.95; }

/* ---- Tablet / mobile ------------------------------------------ */
@media (max-width:1024px){
  .n-hero-image::before{ inset:-6%; filter:blur(22px); }
  .n-hero-img-wrap{ border-radius:16px; }
  .n-hero-stat-card{ max-width:min(11rem, calc(100% - 1.25rem)); }
  .n-hero-stat--bl{ left:.6rem; bottom:.6rem; }
  .n-hero-stat--tr{ right:.6rem; top:.6rem; }
}
/* Very narrow: one chip only, so the photo is never obscured */
@media (max-width:520px){
  .n-hero-stat--tr{ display:none; }
  .n-hero-stat--bl{ left:.5rem; bottom:.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO HEADLINE — SCALE INTO THE AVAILABLE MEASURE
   The grid gives the copy column ~714px, but .n-hero-content was
   capped at 40rem (640px), leaving ~74px unused and holding the
   headline smaller than it needed to be. Cap raised to 44rem and
   the type scaled into it, keeping ~10% width headroom against
   worst-case glyph metrics so the 24ch line can never wrap.
   ═══════════════════════════════════════════════════════════════ */
.n-hero-content{ max-width: 44rem; }

.n-hero-title{
  font-size: clamp(2.05rem, 3.1vw, 2.85rem);   /* up to 45.6px */
  line-height: 1.08;
  letter-spacing: -0.023em;
  margin: 0 0 1.1rem;
}

/* Supporting copy stays on a comfortable reading measure so the
   headline remains the clear focal point. */
.n-hero-subtitle{ max-width: 38rem; }
.n-hero-trust{ max-width: 40rem; }

/* Short laptops keep the compact scale — height is the constraint
   there, not width, so these deliberately do not grow. */
@media (min-width: 1025px) and (max-height: 820px){
  .n-hero-title{ font-size: clamp(1.6rem, 2.35vw, 2.15rem); margin-bottom: .8rem; }
}
@media (min-width: 1025px) and (max-height: 700px){
  .n-hero-title{ font-size: clamp(1.5rem, 2.1vw, 1.95rem); margin-bottom: .65rem; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO — GENEROUS SCALE                                   (final)
   The one-viewport constraint is lifted. The hero is now sized for
   presence and correct proportion rather than squeezed to fit a
   fold: larger headline, roomier padding, a taller image frame.
   A max-height guard still prevents it from becoming absurd on
   very tall displays.
   ═══════════════════════════════════════════════════════════════ */
.n-hero{
  min-height: 0;
  padding-block: clamp(3rem, 6.5vw, 6rem);
  align-items: center;
}

/* Slightly more weight to the copy column, still balanced */
.n-hero-grid{
  /* 1.3fr gives the copy column ~746px at 1440, which is what the
     larger headline needs; a wider gap here would narrow it again. */
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(2rem, 3.8vw, 3.25rem);
  align-items: center;
}

.n-hero-content{ max-width: 48rem; }

/* Headline: full presence. 24ch longest line inside a 46rem
   measure leaves ~12% headroom at the 3.4rem cap. */
.n-hero-title{
  font-size: clamp(2.3rem, 3.6vw, 3rem);     /* up to 48px */
  line-height: 1.06;
  letter-spacing: -0.026em;
  margin: 0 0 1.35rem;
}
.n-hero-badge{ margin-bottom: 1.35rem; font-size: .78rem; padding: .45rem .9rem; }
.n-hero-subtitle{
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.68;
  margin: 0 0 2rem;
  max-width: 40rem;
}
.n-hero-actions{ margin-bottom: 2rem; gap: .875rem; }
.n-hero-trust{
  padding-top: 1.35rem;
  gap: .7rem 2rem;
  max-width: 42rem;
  font-size: .82rem;
}
.n-hero-trust-item{ font-size: .82rem; }

/* Image frame: taller and more substantial, capped so it never
   dominates on large displays */
.n-hero-img-wrap{
  aspect-ratio: 4 / 5;
  max-height: 40rem;
  border-radius: 24px;
}
.n-hero-stat-card{
  padding: .65rem .85rem;
  max-width: min(13.5rem, calc(100% - 1.75rem));
}
.n-hero-stat--bl{ left: 1rem;  bottom: 1rem; }
.n-hero-stat--tr{ right: 1rem; top: 1rem;    }

/* Short laptops: ease back so the fold still shows the CTA, but no
   longer force the whole section into one frame. */
@media (min-width: 1025px) and (max-height: 820px){
  .n-hero{ padding-block: clamp(2rem, 4vw, 3rem); }
  .n-hero-title{ font-size: clamp(2rem, 3.1vw, 2.7rem); margin-bottom: 1rem; }
  .n-hero-subtitle{ margin-bottom: 1.4rem; }
  .n-hero-actions{ margin-bottom: 1.4rem; }
  .n-hero-img-wrap{ aspect-ratio: 1 / 1; max-height: 30rem; }
}

@media (max-width: 1024px){
  .n-hero{ padding-block: clamp(2.25rem, 6vw, 3.5rem); }
  .n-hero-grid{ grid-template-columns: 1fr; gap: 2.5rem; }
  .n-hero-content{ max-width: none; }
  .n-hero-title{ font-size: clamp(2rem, 6vw, 2.8rem); }
  .n-hero-img-wrap{ aspect-ratio: 16 / 10; max-height: none; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO UNIFORMITY                                        (final)
   Every inner page renders its hero with inline
   padding-top:120px / padding-bottom:5rem and a 1fr 1fr grid.
   The homepage had drifted to CSS-clamped padding, a 1.3fr 0.7fr
   grid, and a larger display-xl heading. These rules bring the
   homepage onto the shared pattern so all 174 heroes match.
   ═══════════════════════════════════════════════════════════════ */

/* Let the inline 120px / 5rem padding win, as on every other page */
.n-hero{
  padding-block: revert;
  min-height: 0;
  display: block;
}
.n-hero > .container{
  padding-top: 0;
  padding-bottom: 0;
}

/* Match the site-standard two-column split and gap */
.n-hero-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* Adopt the site-standard .display-lg scale verbatim so the homepage
   H1 renders at exactly the same size as every other hero.
   (.display-lg = clamp(2.25rem, 4.5vw, 4rem) / 1.08 / -.025em) */
.n-hero-title{
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 800;
  margin: 0 0 1.25rem;
}
.n-hero-content{ max-width: none; display: block; }
.n-hero-subtitle{
  font-size: 1.0625rem;
  line-height: 1.8;
  margin: 0 0 2rem;
  max-width: 36rem;
}
.n-hero-actions{ margin-bottom: 2rem; }
.n-hero-trust{ max-width: 36rem; }

/* Image frame matches the inner-page hero card proportion */
.n-hero-image{ max-width: none; }
.n-hero-img-wrap{
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 0;
  max-height: none;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
}
.n-hero-img-wrap img{ object-position: center 26%; }

/* Tablet / mobile — same collapse behaviour as inner pages */
@media (max-width: 1024px){
  .n-hero{ padding-top: 104px !important; padding-bottom: 3rem !important; }
  .n-hero-grid{ grid-template-columns: 1fr; gap: 2.5rem; }
  .n-hero-image{ max-width: 34rem; margin-inline: auto; width: 100%; }
  .n-hero-img-wrap{ aspect-ratio: 16 / 10; }
  .n-hero-title{ font-size: clamp(2rem, 6vw, 2.75rem); }
}