/*
 * NextJS Components Builder – Frontend Styles
 * Pixelgenaue Übertragung der Service Prinzip Next.js-Komponenten.
 * Tailwind-Klassen → native CSS mit BEM-Struktur unter dem `njcb-` Präfix.
 *
 * Struktur:
 *  1. Design Tokens (CSS Custom Properties)
 *  2. Google Fonts Import
 *  3. Base Reset
 *  4. Layout Utilities
 *  5. Typography Utilities
 *  6. Button Variants
 *  7. Shared Patterns (Divided Grid, Overline, Red Accent, Animations)
 *  8. Header
 *  9. Footer
 * 10. Hero
 * 11. Trust Section
 * 12. Services Section
 * 13. Why Us Section
 * 14. Process Section
 * 15. News Section
 * 16. Testimonials Section
 * 17. FAQ / Accordion
 * 18. CTA Section
 * 19. Contact Form
 * 20. Service Hero
 * 21. Service Process
 * 22. Animation Keyframes
 */

/* ─────────────────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --njcb-brand:        #C41230;
  --njcb-brand-dark:   #9B0D24;
  --njcb-brand-light:  #FCE8EC;
  --njcb-ink:          #1A1A1A;
  --njcb-ink-soft:     #252525;
  --njcb-gray-50:      #FAFAFA;
  --njcb-gray-75:      #F9F9F9;
  --njcb-gray-100:     #F4F4F4;
  --njcb-gray-150:     #EBEBEB;
  --njcb-gray-200:     #E5E5E5;
  --njcb-gray-250:     #CCCCCC;
  --njcb-text-2:       #444444;
  --njcb-text-3:       #555555;
  --njcb-text-4:       #666666;
  --njcb-text-5:       #777777;
  --njcb-text-6:       #888888;
  --njcb-text-7:       #999999;
  --njcb-text-8:       #AAAAAA;
  --njcb-font:         'Inter', system-ui, -apple-system, sans-serif;
  --njcb-max-width:    1280px;
  --njcb-header-h:     64px;
  --njcb-section-py:   6rem; /* 96px ≈ py-24 */
  --njcb-transition:   150ms ease;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. GOOGLE FONTS – loaded via wp_enqueue_style( 'njcb-inter' ) in PHP.
   ───────────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────────
   3. BASE RESET (scoped – only within plugin blocks)
   ───────────────────────────────────────────────────────────────────────────── */
.njcb-header,
.njcb-footer,
.njcb-hero,
.njcb-trust,
.njcb-services,
.njcb-why-us,
.njcb-process,
.njcb-news,
.njcb-testimonials,
.njcb-faq,
.njcb-cta,
.njcb-contact-form-wrap,
.njcb-service-hero,
.njcb-service-process {
  font-family: var(--njcb-font);
  font-feature-settings: "rlig" 1, "calt" 1;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.njcb-header *,
.njcb-footer *,
.njcb-hero *,
.njcb-trust *,
.njcb-services *,
.njcb-why-us *,
.njcb-process *,
.njcb-news *,
.njcb-testimonials *,
.njcb-faq *,
.njcb-cta *,
.njcb-contact-form-wrap *,
.njcb-service-hero *,
.njcb-service-process * {
  box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. LAYOUT UTILITIES
   ───────────────────────────────────────────────────────────────────────────── */
.njcb-container {
  max-width: var(--njcb-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
.njcb-container--narrow {
  max-width: 896px; /* max-w-4xl */
}
@media (min-width: 640px) {
  .njcb-container,
  .njcb-container--narrow { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .njcb-container,
  .njcb-container--narrow { padding-left: 2rem; padding-right: 2rem; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. TYPOGRAPHY UTILITIES
   ───────────────────────────────────────────────────────────────────────────── */
.njcb-overline {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--njcb-text-8);
  margin-bottom: 1rem;
  display: block;
}
.njcb-section-title {
  font-size: clamp(2rem, 4vw, 3.125rem); /* 32–50px */
  font-weight: 800;
  color: var(--njcb-ink);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
}
.njcb-text-brand   { color: var(--njcb-brand); }
.njcb-text-muted   { color: var(--njcb-text-8); }

/* Red accent line above headings (matches .red-accent-line::before) */
.njcb-red-accent {
  padding-top: 0;
}
.njcb-red-accent::before {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background-color: var(--njcb-brand);
  margin-bottom: 1.25rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. BUTTON VARIANTS
   ───────────────────────────────────────────────────────────────────────────── */
.njcb-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-family: var(--njcb-font);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background-color var(--njcb-transition), color var(--njcb-transition), border-color var(--njcb-transition);
  white-space: nowrap;
  border-radius: 0; /* Sharp corners – matches Next.js design */
}
.njcb-btn svg { flex-shrink: 0; }

/* Brand solid */
.njcb-btn--brand {
  background-color: var(--njcb-brand);
  color: #fff;
}
.njcb-btn--brand:hover,
.njcb-btn--brand:focus-visible {
  background-color: var(--njcb-brand-dark);
  color: #fff;
  text-decoration: none;
}

/* Outline ink (hero primary CTA) */
.njcb-btn--outline-ink {
  border: 1px solid var(--njcb-ink);
  color: var(--njcb-ink);
  background: transparent;
}
.njcb-btn--outline-ink:hover {
  background-color: var(--njcb-ink);
  color: #fff;
  text-decoration: none;
}

/* Outline muted (hero secondary CTA) */
.njcb-btn--outline-muted {
  border: 1px solid var(--njcb-gray-250);
  color: var(--njcb-text-3);
  background: transparent;
}
.njcb-btn--outline-muted:hover {
  border-color: var(--njcb-ink);
  color: var(--njcb-ink);
  text-decoration: none;
}

/* Full width */
.njcb-btn--full {
  width: 100%;
  justify-content: center;
}

/* CTA section buttons */
.njcb-btn--cta-primary {
  padding: 1rem 1.75rem;
  font-weight: 700;
  font-size: 0.875rem;
  background-color: #fff;
  color: var(--njcb-brand);
}
.njcb-btn--cta-primary:hover { background-color: var(--njcb-gray-100); color: var(--njcb-brand); text-decoration: none; }

.njcb-btn--cta-phone {
  padding: 1rem 1.75rem;
  font-weight: 700;
  font-size: 0.875rem;
  border: 2px solid rgba(255,255,255,0.3);
  color: #fff;
  background: transparent;
}
.njcb-btn--cta-phone:hover { border-color: #fff; color: #fff; text-decoration: none; }

/* Submit button */
.njcb-btn--submit {
  padding: 1rem 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  font-size: 0.875rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. SHARED PATTERNS
   ───────────────────────────────────────────────────────────────────────────── */

/* Divided grid – gap-px bg-[#E5E5E5] pattern */
.njcb-divided-grid {
  display: grid;
  gap: 1px;
  background-color: var(--njcb-gray-200);
  border: 1px solid var(--njcb-gray-200);
}
.njcb-divided-grid > * { background-color: #fff; }

.njcb-divided-grid--2  { grid-template-columns: repeat(2, 1fr); }
.njcb-divided-grid--3  { grid-template-columns: 1fr; }
.njcb-divided-grid--4  { grid-template-columns: repeat(2, 1fr); }
.njcb-divided-grid--5  { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .njcb-divided-grid--3  { grid-template-columns: repeat(2, 1fr); }
  .njcb-divided-grid--5  { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .njcb-divided-grid--3  { grid-template-columns: repeat(3, 1fr); }
  .njcb-divided-grid--4  { grid-template-columns: repeat(4, 1fr); }
  .njcb-divided-grid--5  { grid-template-columns: repeat(5, 1fr); }
}

/* Small brand link */
.njcb-link-brand-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--njcb-brand);
  text-decoration: none;
}
.njcb-link-brand-sm:hover { color: var(--njcb-brand-dark); }

/* ─────────────────────────────────────────────────────────────────────────────
   8. HEADER
   ───────────────────────────────────────────────────────────────────────────── */
.njcb-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9000;
  background-color: #fff;
  border-bottom: 1px solid var(--njcb-gray-200);
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

/* WordPress admin bar pushes fixed elements down */
.admin-bar .njcb-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .njcb-header { top: 46px; }
}

/* Elementor widget container resets – prevent inherited padding from breaking the fixed header */
.elementor-widget-njcb-header .elementor-widget-container,
.elementor-widget-njcb-footer .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1;
}
/* Section / container that wraps the header widget needs zero height in normal flow */
.elementor-widget-njcb-header {
  width: 100%;
}

/* ── Body-Offset für den fixierten Header ──────────────────────────────────
   Primär-Fix: JS (initHeaderOffset) injiziert einen <style>-Tag mit !important.
   CSS-Fallback: :has()-Selector für den Fall dass JS noch nicht geladen ist.
   ─────────────────────────────────────────────────────────────────────────── */

/* Widget-Wrapper nimmt Platz im normalen Dokumentfluss ein (CSS-Fallback) */
.elementor-widget-njcb-header {
  min-height: 64px;
}
@media (min-width: 1024px) {
  .elementor-widget-njcb-header {
    min-height: 72px;
  }
}

/* :has()-Fallback für den Body (funktioniert in allen modernen Browsern) */
@supports selector(:has(*)) {
  body:has(#njcb-header) {
    padding-top: 64px;
  }
  @media (min-width: 1024px) {
    body:has(#njcb-header) {
      padding-top: 72px;
    }
  }
  html:has(#njcb-header) {
    scroll-padding-top: 80px;
  }
}
/* Override Elementor's default link/text colors inside the header */
.elementor-widget-njcb-header a,
.elementor-widget-njcb-header button {
  color: inherit;
  font-family: var(--njcb-font);
}
.njcb-header[data-scrolled="true"] {
  background-color: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

.njcb-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--njcb-header-h);
  gap: 1rem;
}
@media (min-width: 1024px) {
  .njcb-header__inner { height: 72px; }
}

.njcb-header__logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.njcb-header__logo-img { height: 56px; width: auto; display: block; }
.njcb-header__logo-text { font-size: 1.25rem; font-weight: 800; color: var(--njcb-ink); }

/* Desktop Nav */
.njcb-header__nav {
  display: none;
  align-items: center;
  gap: 0.25rem;
}
@media (min-width: 1024px) { .njcb-header__nav { display: flex; } }

.njcb-header__link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--njcb-text-3);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--njcb-font);
  transition: color var(--njcb-transition);
  border-radius: 0;
}
.njcb-header__link:hover,
.njcb-header__link.current-menu-item { color: var(--njcb-ink); }
.njcb-header__link[aria-current="page"] { color: var(--njcb-brand); }

/* Desktop CTA */
.njcb-header__cta-wrap { display: none; }
@media (min-width: 1024px) { .njcb-header__cta-wrap { display: block; } }
.njcb-header__cta-wrap .njcb-btn { padding: 0.625rem 1.25rem; }

/* Mobile toggle */
.njcb-header__mobile-toggle {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--njcb-ink);
  font-family: var(--njcb-font);
}
@media (min-width: 1024px) { .njcb-header__mobile-toggle { display: none; } }

.njcb-header__icon-close { display: none; }
.njcb-header__mobile-toggle[aria-expanded="true"] .njcb-header__icon-open  { display: none; }
.njcb-header__mobile-toggle[aria-expanded="true"] .njcb-header__icon-close { display: block; }

/* ── Dropdown ── */
.njcb-dropdown { position: relative; }
.njcb-dropdown__chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.njcb-dropdown__trigger[aria-expanded="true"] .njcb-dropdown__chevron { transform: rotate(180deg); }

.njcb-dropdown__panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 0.5rem;
  width: 540px;
  z-index: 100;
  display: none;
}
.njcb-dropdown.is-open .njcb-dropdown__panel { display: block; }

.njcb-dropdown__panel > * { pointer-events: auto; }
.njcb-dropdown__accent {
  height: 2px;
  background-color: var(--njcb-brand);
}
.njcb-dropdown__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background-color: var(--njcb-gray-150);
  border-left: 1px solid var(--njcb-gray-200);
  border-right: 1px solid var(--njcb-gray-200);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}
.njcb-dropdown__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.25rem;
  background-color: #fff;
  text-decoration: none;
  transition: background-color var(--njcb-transition);
}
.njcb-dropdown__item:hover { background-color: var(--njcb-gray-75); }
.njcb-dropdown__item-icon {
  width: 32px;
  height: 32px;
  border: 1px solid var(--njcb-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--njcb-text-8);
  transition: background-color var(--njcb-transition), border-color var(--njcb-transition), color var(--njcb-transition);
}
.njcb-dropdown__item:hover .njcb-dropdown__item-icon {
  background-color: var(--njcb-brand);
  border-color: var(--njcb-brand);
  color: #fff;
}
.njcb-dropdown__item-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--njcb-ink);
  margin: 0 0 0.125rem;
  line-height: 1.3;
  transition: color var(--njcb-transition);
}
.njcb-dropdown__item:hover .njcb-dropdown__item-label { color: var(--njcb-brand); }
.njcb-dropdown__item-desc {
  font-size: 0.75rem;
  color: var(--njcb-text-7);
  margin: 0;
  line-height: 1.5;
}
.njcb-dropdown__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--njcb-gray-200);
  border-top: none;
  background-color: var(--njcb-gray-50);
  text-decoration: none;
  transition: background-color var(--njcb-transition);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}
.njcb-dropdown__footer:hover { background-color: var(--njcb-gray-100); }
.njcb-dropdown__footer span {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--njcb-text-6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color var(--njcb-transition);
}
.njcb-dropdown__footer:hover span { color: var(--njcb-ink); }
.njcb-dropdown__footer svg { color: var(--njcb-brand); transition: transform var(--njcb-transition); }
.njcb-dropdown__footer:hover svg { transform: translateX(2px); }

/* ── Mobile Nav ── */
.njcb-mobile-nav {
  display: none;
  background-color: #fff;
  border-top: 1px solid var(--njcb-gray-200);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07);
}
@media (min-width: 1024px) { .njcb-mobile-nav { display: none !important; } }
.njcb-mobile-nav.is-open { display: block; }

.njcb-mobile-nav .njcb-container { padding-top: 0.5rem; padding-bottom: 0.5rem; display: flex; flex-direction: column; }
.njcb-mobile-nav__group { border-bottom: 1px solid var(--njcb-gray-100); }
.njcb-mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.875rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--njcb-text-3);
  text-decoration: none;
  background: none;
  border: none;
  border-bottom: 1px solid var(--njcb-gray-100);
  cursor: pointer;
  font-family: var(--njcb-font);
  text-align: left;
  transition: color var(--njcb-transition);
}
.njcb-mobile-nav__link:last-of-type { border-bottom: none; }
.njcb-mobile-nav__link:hover { color: var(--njcb-ink); }
.njcb-mobile-nav__chevron { transition: transform 0.2s ease; }
.njcb-mobile-nav__accordion-trigger[aria-expanded="true"] .njcb-mobile-nav__chevron { transform: rotate(180deg); }

.njcb-mobile-nav__accordion-content { display: none; padding-bottom: 0.5rem; }
.njcb-mobile-nav__accordion-content.is-open { display: block; }

.njcb-mobile-nav__sub-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.75rem;
  margin-left: 0.75rem;
  font-size: 0.875rem;
  color: var(--njcb-text-4);
  text-decoration: none;
  border-left: 2px solid var(--njcb-gray-100);
  transition: color var(--njcb-transition), border-color var(--njcb-transition);
}
.njcb-mobile-nav__sub-link:hover { color: var(--njcb-ink); border-left-color: var(--njcb-brand); }
.njcb-mobile-nav__sub-icon { color: var(--njcb-brand); flex-shrink: 0; }

.njcb-mobile-nav__sub-all {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  margin-left: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--njcb-brand);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.njcb-mobile-nav__cta { padding: 0.75rem 0; margin-top: 0.25rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   9. FOOTER
   ───────────────────────────────────────────────────────────────────────────── */
.njcb-footer {
  background-color: var(--njcb-gray-100);
  border-top: 1px solid var(--njcb-gray-200);
}
.njcb-footer__accent {
  height: 2px;
  background-color: var(--njcb-brand);
}
.njcb-footer__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding: 4rem 0;
}
@media (min-width: 768px) {
  .njcb-footer__main { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .njcb-footer__main { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 2.5rem; }
}

.njcb-footer__logo-link { display: inline-flex; margin-bottom: 1.5rem; }
.njcb-footer__logo      { height: 56px; width: auto; }
.njcb-footer__logo-text { font-size: 1.25rem; font-weight: 800; color: var(--njcb-ink); text-decoration: none; }
.njcb-footer__tagline   { font-size: 0.875rem; color: var(--njcb-text-4); line-height: 1.6; margin: 0 0 1.5rem; }

.njcb-footer__contact { display: flex; flex-direction: column; gap: 0.75rem; }
.njcb-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--njcb-text-4);
  text-decoration: none;
  transition: color var(--njcb-transition);
}
.njcb-footer__contact-item svg { color: var(--njcb-brand); flex-shrink: 0; margin-top: 2px; }
.njcb-footer__contact-item:hover { color: var(--njcb-ink); }

.njcb-footer__col-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--njcb-ink);
  margin: 0 0 1.25rem;
}
.njcb-footer__col-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.njcb-footer__col-link {
  font-size: 0.875rem;
  color: var(--njcb-text-4);
  text-decoration: none;
  transition: color var(--njcb-transition);
}
.njcb-footer__col-link:hover { color: var(--njcb-brand); }

.njcb-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--njcb-gray-200);
}
@media (min-width: 640px) {
  .njcb-footer__bottom { flex-direction: row; justify-content: space-between; }
}
.njcb-footer__copyright { font-size: 0.75rem; color: var(--njcb-text-7); margin: 0; }
.njcb-footer__social-link {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--njcb-text-7);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: color var(--njcb-transition);
}
.njcb-footer__social-link:hover { color: var(--njcb-brand); }

/* ─────────────────────────────────────────────────────────────────────────────
   10. HERO
   ───────────────────────────────────────────────────────────────────────────── */
.njcb-hero {
  display: flex;
  flex-direction: column;
  height: 100svh; /* use svh for mobile browser toolbar compensation */
  min-height: 600px;
  overflow: hidden;
}
@media (max-height: 700px) { .njcb-hero { min-height: 0; height: auto; } }

/* Top white section – flex: 5, matching Next.js pt-20 pb-8 */
.njcb-hero__top {
  flex: 5;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* matches justify-between */
  padding-top: 5rem;   /* pt-20 = 80px, covers fixed header + gap */
  padding-bottom: 2rem; /* pb-8 */
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  position: relative;
  border-bottom: 1px solid var(--njcb-gray-200);
}
@media (min-width: 640px)  { .njcb-hero__top { padding-left: 2.5rem; padding-right: 2.5rem; } }
@media (min-width: 1024px) { .njcb-hero__top { padding-left: 4rem; padding-right: 4rem; } }

.njcb-hero__top-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: var(--njcb-brand);
}

.njcb-hero__top-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: flex-end;
}
@media (min-width: 1024px) {
  .njcb-hero__top-inner { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

.njcb-hero__headline {
  font-size: clamp(3rem, 8vw, 5.5rem); /* text-5xl → xl:text-[5.5rem] */
  font-weight: 700; /* font-bold, NOT font-extrabold */
  color: var(--njcb-ink);
  letter-spacing: -0.025em; /* tracking-tight */
  line-height: 0.92;
  margin: 0;
}

.njcb-hero__aside {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 1024px) { .njcb-hero__aside { padding-bottom: 0.25rem; } }

.njcb-hero__subline {
  font-size: 0.9375rem;
  color: var(--njcb-text-3);
  line-height: 1.65;
  max-width: 24rem;
  margin: 0;
}
@media (min-width: 640px) { .njcb-hero__subline { font-size: 1rem; } }

.njcb-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Bottom image section – flex: 6 */
.njcb-hero__bottom {
  flex: 6;
  position: relative;
  overflow: hidden;
  background-color: #2A2A2A;
  min-height: 200px;
}
.njcb-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.njcb-hero__bottom-accent {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgba(196,18,48,0.4);
}
.njcb-hero__infobar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.4);
}
@media (min-width: 640px) { .njcb-hero__infobar { padding-left: 2.5rem; padding-right: 2.5rem; } }
@media (min-width: 1024px) { .njcb-hero__infobar { padding-left: 4rem; padding-right: 4rem; } }

.njcb-hero__infobar-item {
  font-size: 11px;
  color: rgba(255,255,255,0.8);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.njcb-hero__infobar-center { display: none; }
@media (min-width: 640px) { .njcb-hero__infobar-center { display: block; } }

.njcb-hero__scroll-hint {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. TRUST SECTION
   ───────────────────────────────────────────────────────────────────────────── */
.njcb-trust {
  background-color: #fff;
  padding: 5rem 0;
  border-bottom: 1px solid var(--njcb-gray-200);
}
.njcb-trust__stats { margin-bottom: 3.5rem; }

.njcb-trust__stat {
  padding: 2rem;
  transition: background-color var(--njcb-transition);
  cursor: default;
}
.njcb-trust__stat:hover { background-color: var(--njcb-gray-100) !important; }
.njcb-trust__stat-bar  { width: 24px; height: 2px; background-color: var(--njcb-brand); margin-bottom: 1rem; }
.njcb-trust__stat-value { font-size: 2.25rem; font-weight: 800; color: var(--njcb-ink); letter-spacing: -0.04em; margin: 0; line-height: 1.1; }
.njcb-trust__stat-label { font-size: 0.875rem; font-weight: 600; color: var(--njcb-ink); margin: 0.25rem 0 0; }
.njcb-trust__stat-desc  { font-size: 0.75rem; color: var(--njcb-text-6); margin: 0.125rem 0 0; }

.njcb-trust__certs { text-align: center; }
.njcb-trust__certs-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.njcb-trust__cert-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--njcb-gray-200);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--njcb-text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────────
   12. SERVICES SECTION
   ───────────────────────────────────────────────────────────────────────────── */
.njcb-services {
  padding: var(--njcb-section-py) 0;
  background-color: var(--njcb-gray-100);
}
.njcb-services__header { margin-bottom: 4rem; }
.njcb-services__header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.njcb-services__all-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--njcb-text-3);
  text-decoration: none;
  border-bottom: 1px solid var(--njcb-gray-200);
  padding-bottom: 2px;
  flex-shrink: 0;
  transition: color var(--njcb-transition), border-color var(--njcb-transition);
}
.njcb-services__all-link:hover { color: var(--njcb-ink); border-bottom-color: var(--njcb-ink); }

/* Service Card */
.njcb-service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.75rem;
  text-decoration: none;
  background-color: #fff;
  border-top: 2px solid transparent;
  transition: background-color var(--njcb-transition), border-top-color var(--njcb-transition);
}
.njcb-service-card:hover {
  background-color: var(--njcb-gray-75) !important;
  border-top-color: var(--njcb-brand);
}
.njcb-service-card__icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--njcb-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: var(--njcb-ink);
  flex-shrink: 0;
  transition: background-color var(--njcb-transition), border-color var(--njcb-transition), color var(--njcb-transition);
}
.njcb-service-card:hover .njcb-service-card__icon {
  background-color: var(--njcb-brand);
  border-color: var(--njcb-brand);
  color: #fff;
}
.njcb-service-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--njcb-ink);
  margin: 0 0 0.75rem;
}
.njcb-service-card__desc {
  font-size: 0.875rem;
  color: var(--njcb-text-5);
  line-height: 1.6;
  flex: 1;
  margin: 0;
}
.njcb-service-card__cta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--njcb-text-8);
  transition: color var(--njcb-transition);
}
.njcb-service-card:hover .njcb-service-card__cta { color: var(--njcb-brand); }

/* ─────────────────────────────────────────────────────────────────────────────
   13. WHY US SECTION
   ───────────────────────────────────────────────────────────────────────────── */
.njcb-why-us {
  padding: var(--njcb-section-py) 0;
  background-color: #fff;
  border-top: 1px solid var(--njcb-gray-200);
  border-bottom: 1px solid var(--njcb-gray-200);
}
.njcb-why-us__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .njcb-why-us__grid { grid-template-columns: 1fr 1fr; gap: 6rem; }
}

.njcb-why-us__body {
  font-size: 1rem;
  color: var(--njcb-text-4);
  line-height: 1.7;
  margin: 0 0 2rem;
}
.njcb-why-us__quote {
  border-left: 2px solid var(--njcb-brand);
  padding-left: 1.25rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.njcb-why-us__quote-text {
  font-size: 0.875rem;
  color: var(--njcb-text-3);
  font-style: italic;
  line-height: 1.7;
  margin: 0 0 0.75rem;
}
.njcb-why-us__quote-author {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--njcb-ink);
  margin: 0;
}
.njcb-why-us__quote-author span {
  font-weight: 400;
  color: var(--njcb-text-6);
}

/* USP cards */
.njcb-usp-card {
  padding: 1.25rem;
  background-color: #fff;
  transition: background-color var(--njcb-transition);
}
.njcb-usp-card:hover { background-color: var(--njcb-gray-75) !important; }
.njcb-usp-card__icon {
  width: 32px;
  height: 32px;
  border: 1px solid var(--njcb-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--njcb-ink);
  transition: all var(--njcb-transition);
}
.njcb-usp-card:hover .njcb-usp-card__icon {
  border-color: var(--njcb-brand);
  background-color: var(--njcb-brand);
  color: #fff;
}
.njcb-usp-card__title { font-size: 0.875rem; font-weight: 700; color: var(--njcb-ink); margin: 0 0 0.375rem; }
.njcb-usp-card__desc  { font-size: 0.75rem; color: var(--njcb-text-6); line-height: 1.6; margin: 0; }

/* ─────────────────────────────────────────────────────────────────────────────
   14. PROCESS SECTION
   ───────────────────────────────────────────────────────────────────────────── */
.njcb-process {
  padding: var(--njcb-section-py) 0;
  background-color: var(--njcb-gray-100);
  overflow: hidden;
  border-top: 1px solid var(--njcb-gray-200);
  border-bottom: 1px solid var(--njcb-gray-200);
}
.njcb-process__header { margin-bottom: 4rem; }
.njcb-process__lead {
  font-size: 0.9375rem;
  color: var(--njcb-text-5);
  margin: 1rem 0 0;
  max-width: 36rem;
  line-height: 1.65;
}

.njcb-process-step {
  padding: 1.5rem;
  background-color: #fff;
  border-top: 2px solid transparent;
  transition: background-color var(--njcb-transition), border-top-color var(--njcb-transition);
}
.njcb-process-step:hover { background-color: var(--njcb-gray-75) !important; border-top-color: var(--njcb-brand); }
.njcb-process-step__header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
}
.njcb-process-step__icon {
  width: 32px;
  height: 32px;
  border: 1px solid var(--njcb-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--njcb-text-6);
  transition: all var(--njcb-transition);
}
.njcb-process-step:hover .njcb-process-step__icon {
  background-color: var(--njcb-brand);
  border-color: var(--njcb-brand);
  color: #fff;
}
.njcb-process-step__num  { font-size: 0.75rem; font-weight: 700; color: var(--njcb-text-8); }
.njcb-process-step__title { font-size: 1rem; font-weight: 700; color: var(--njcb-ink); margin: 0 0 0.5rem; }
.njcb-process-step__desc  { font-size: 0.75rem; color: var(--njcb-text-5); line-height: 1.6; margin: 0 0 1rem; }
.njcb-process-step__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--njcb-text-6);
  border: 1px solid var(--njcb-gray-200);
  padding: 0.25rem 0.625rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   15. NEWS SECTION
   ───────────────────────────────────────────────────────────────────────────── */
.njcb-news {
  padding: var(--njcb-section-py) 0;
  background-color: #fff;
  border-top: 1px solid var(--njcb-gray-200);
}
.njcb-news__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 3rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.njcb-news__all-link {
  display: none;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--njcb-text-8);
  text-decoration: none;
  transition: color var(--njcb-transition);
}
@media (min-width: 640px) { .njcb-news__all-link { display: flex; } }
.njcb-news__all-link:hover { color: var(--njcb-brand); }
.njcb-news__mobile-all { display: flex; margin-top: 2rem; }
@media (min-width: 640px) { .njcb-news__mobile-all { display: none; } }

/* News Card */
.njcb-news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  background-color: #fff;
  border-top: 2px solid transparent;
  transition: background-color var(--njcb-transition), border-top-color var(--njcb-transition);
}
.njcb-news-card:hover { background-color: var(--njcb-gray-75) !important; border-top-color: var(--njcb-brand); }
.njcb-news-card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-color: var(--njcb-gray-100);
}
.njcb-news-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.njcb-news-card:hover .njcb-news-card__img { transform: scale(1.05); }
.njcb-news-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 900;
  color: var(--njcb-gray-200);
}
.njcb-news-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}
.njcb-news-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.njcb-news-card__cat  { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--njcb-brand); }
.njcb-news-card__dot  { color: var(--njcb-gray-200); }
.njcb-news-card__date { font-size: 11px; color: var(--njcb-text-8); }
.njcb-news-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--njcb-ink);
  margin: 0 0 0.75rem;
  line-height: 1.35;
  flex: 1;
  transition: color var(--njcb-transition);
}
.njcb-news-card:hover .njcb-news-card__title { color: var(--njcb-brand); }
.njcb-news-card__excerpt {
  font-size: 0.875rem;
  color: var(--njcb-text-4);
  line-height: 1.6;
  margin: 0 0 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.njcb-news-card__cta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--njcb-text-8);
  margin-top: auto;
  transition: color var(--njcb-transition);
}
.njcb-news-card:hover .njcb-news-card__cta { color: var(--njcb-brand); }

/* ─────────────────────────────────────────────────────────────────────────────
   16. TESTIMONIALS SECTION
   ───────────────────────────────────────────────────────────────────────────── */
.njcb-testimonials {
  padding: var(--njcb-section-py) 0;
  background-color: #fff;
  border-top: 1px solid var(--njcb-gray-200);
}
.njcb-testimonials__header { margin-bottom: 4rem; }
.njcb-testimonials__grid   { margin-bottom: 2.5rem; }

.njcb-testimonial {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem;
  background-color: #fff;
}
.njcb-testimonial__stars {
  display: flex;
  gap: 2px;
  margin-bottom: 1.5rem;
}
.njcb-testimonial__quote {
  font-size: 0.875rem;
  color: var(--njcb-text-3);
  line-height: 1.7;
  flex: 1;
  margin: 0 0 1.75rem;
}
.njcb-testimonial__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--njcb-gray-100);
}
.njcb-testimonial__avatar {
  width: 36px;
  height: 36px;
  background-color: var(--njcb-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}
.njcb-testimonial__name { font-size: 0.875rem; font-weight: 700; color: var(--njcb-ink); margin: 0; }
.njcb-testimonial__role { font-size: 0.75rem; color: var(--njcb-text-6); margin: 0; }

.njcb-testimonials__overall {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.njcb-testimonials__overall-stars { display: flex; gap: 2px; }
.njcb-testimonials__score { font-size: 0.875rem; font-weight: 700; color: var(--njcb-ink); }
.njcb-testimonials__count { font-size: 0.875rem; color: var(--njcb-text-8); }

/* ─────────────────────────────────────────────────────────────────────────────
   17. FAQ / ACCORDION
   ───────────────────────────────────────────────────────────────────────────── */
.njcb-faq {
  padding: var(--njcb-section-py) 0;
  background-color: var(--njcb-gray-100);
  border-top: 1px solid var(--njcb-gray-200);
}
.njcb-faq__header { margin-bottom: 3.5rem; }
.njcb-faq__lead {
  font-size: 0.9375rem;
  color: var(--njcb-text-5);
  margin: 1rem 0 0;
  line-height: 1.65;
}

.njcb-accordion {
  border: 1px solid var(--njcb-gray-200);
  background-color: #fff;
}
.njcb-accordion__item {
  border-bottom: 1px solid var(--njcb-gray-200);
  border-left: 2px solid transparent;
  transition: border-left-color var(--njcb-transition);
  padding: 0 1.5rem;
}
.njcb-accordion__item:last-child { border-bottom: none; }
.njcb-accordion__item.is-open { border-left-color: var(--njcb-brand); }

.njcb-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.25rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--njcb-ink);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--njcb-font);
  gap: 1rem;
  transition: color var(--njcb-transition);
}
.njcb-accordion__trigger:hover { color: var(--njcb-brand); }
.njcb-accordion__trigger[aria-expanded="true"] { color: var(--njcb-brand); }

.njcb-accordion__icon {
  flex-shrink: 0;
  color: var(--njcb-text-6);
  transition: transform 0.25s ease;
}
.njcb-accordion__trigger[aria-expanded="true"] .njcb-accordion__icon { transform: rotate(180deg); }

.njcb-accordion__panel {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
}
.njcb-accordion__panel.is-open,
.njcb-accordion__panel:not([hidden]) {
  max-height: 600px;
  opacity: 1;
}
.njcb-accordion__panel[hidden] {
  display: none;
}
.njcb-accordion__content {
  font-size: 0.875rem;
  color: var(--njcb-text-4);
  line-height: 1.7;
  padding-bottom: 1.25rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   18. CTA SECTION
   ───────────────────────────────────────────────────────────────────────────── */
.njcb-cta { background-color: var(--njcb-brand); }
.njcb-cta .njcb-container { padding-top: 5rem; padding-bottom: 5rem; }
.njcb-cta__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .njcb-cta__inner { grid-template-columns: 1fr 1fr; }
}
.njcb-cta__tagline {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.6);
  margin: 0 0 1rem;
}
.njcb-cta__headline {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 0.5rem;
}
.njcb-cta__subtext {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
  margin: 1rem 0 0;
  line-height: 1.65;
}
.njcb-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
@media (min-width: 1024px) {
  .njcb-cta__actions { justify-content: flex-end; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   19. CONTACT FORM
   ───────────────────────────────────────────────────────────────────────────── */
.njcb-contact-form { display: flex; flex-direction: column; gap: 1rem; }
.njcb-contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .njcb-contact-form__row { grid-template-columns: 1fr 1fr; }
}
.njcb-contact-form__field { display: flex; flex-direction: column; gap: 0.5rem; }

.njcb-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--njcb-text-3);
}
.njcb-required { color: var(--njcb-brand); }
.njcb-optional { font-weight: 400; text-transform: none; color: var(--njcb-gray-250); letter-spacing: 0; }

.njcb-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--njcb-gray-200);
  background-color: #fff;
  color: var(--njcb-ink);
  font-size: 0.875rem;
  font-family: var(--njcb-font);
  border-radius: 0;
  outline: none;
  transition: border-color var(--njcb-transition), box-shadow var(--njcb-transition);
  appearance: none;
  -webkit-appearance: none;
}
.njcb-input::placeholder { color: #BBBBBB; }
.njcb-input:focus {
  border-color: var(--njcb-brand);
  box-shadow: 0 0 0 3px rgba(196,18,48,0.1);
}
.njcb-input.has-error { border-color: #f87171; }
.njcb-input--textarea { resize: vertical; min-height: 120px; }
.njcb-input--select   { cursor: pointer; }

.njcb-field-error {
  font-size: 0.75rem;
  color: var(--njcb-brand);
  min-height: 1.25rem;
  display: block;
}

/* Custom Checkbox */
.njcb-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}
.njcb-checkbox__input { position: absolute; opacity: 0; width: 0; height: 0; }
.njcb-checkbox__box {
  width: 16px;
  height: 16px;
  border: 2px solid var(--njcb-gray-250);
  background: #fff;
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--njcb-transition), border-color var(--njcb-transition);
}
.njcb-checkbox__input:checked + .njcb-checkbox__box {
  background-color: var(--njcb-brand);
  border-color: var(--njcb-brand);
}
.njcb-checkbox__box.has-error { border-color: var(--njcb-brand); }
.njcb-checkbox__label { font-size: 0.75rem; color: var(--njcb-text-5); line-height: 1.6; }
.njcb-checkbox__label a { color: var(--njcb-brand); text-decoration: underline; }

.njcb-contact-form__server-error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  font-size: 0.875rem;
}
.njcb-contact-form__server-error[hidden] { display: none; }

/* Success state */
.njcb-contact-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1rem;
  text-align: center;
}
.njcb-contact-success[hidden] { display: none; }
.njcb-contact-success__icon {
  width: 56px;
  height: 56px;
  background-color: var(--njcb-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.njcb-contact-success__title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--njcb-ink);
  margin: 0 0 0.75rem;
}
.njcb-contact-success__message {
  font-size: 0.875rem;
  color: var(--njcb-text-5);
  max-width: 24rem;
  line-height: 1.6;
  margin: 0;
}

/* Loading spinner */
.njcb-spin { animation: njcb-spin 0.8s linear infinite; }

/* ─────────────────────────────────────────────────────────────────────────────
   20. SERVICE HERO
   ───────────────────────────────────────────────────────────────────────────── */
.njcb-service-hero {
  padding-top: calc(var(--njcb-header-h) + 4rem);
  padding-bottom: 5rem;
  background-color: var(--njcb-gray-100);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--njcb-gray-200);
}
.njcb-service-hero__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: var(--njcb-brand);
}
.njcb-service-hero__grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.njcb-service-hero__container { position: relative; z-index: 1; }

.njcb-service-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--njcb-text-6);
  text-decoration: none;
  margin-bottom: 2.5rem;
  transition: color var(--njcb-transition);
}
.njcb-service-hero__back:hover { color: var(--njcb-ink); }

.njcb-service-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .njcb-service-hero__grid { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}
.njcb-service-hero__icon {
  width: 48px;
  height: 48px;
  background-color: var(--njcb-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.75rem;
}
.njcb-service-hero__title {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 900;
  color: var(--njcb-ink);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0 0 1.25rem;
}
.njcb-service-hero__desc {
  font-size: 1.125rem;
  color: var(--njcb-text-4);
  line-height: 1.65;
  margin: 0 0 2rem;
}

.njcb-service-hero__feature-box {
  border: 1px solid var(--njcb-gray-200);
  background-color: #fff;
  overflow: hidden;
}
.njcb-service-hero__feature-box-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--njcb-gray-200);
  background-color: var(--njcb-gray-50);
}
.njcb-service-hero__feature-list {
  list-style: none;
  padding: 1.5rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.njcb-service-hero__feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--njcb-text-3);
}
.njcb-service-hero__feature-item svg { flex-shrink: 0; margin-top: 1px; }

/* ─────────────────────────────────────────────────────────────────────────────
   21. SERVICE PROCESS
   ───────────────────────────────────────────────────────────────────────────── */
.njcb-service-process {
  padding: 5rem 0;
  background-color: var(--njcb-gray-100);
  border-top: 1px solid var(--njcb-gray-200);
}
.njcb-service-process__header { margin-bottom: 3.5rem; }
.njcb-service-process__list {
  max-width: 768px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--njcb-gray-200);
}
.njcb-service-process__step {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
  background-color: #fff;
  border-left: 2px solid transparent;
  transition: background-color var(--njcb-transition), border-left-color var(--njcb-transition);
}
.njcb-service-process__step:hover { background-color: var(--njcb-gray-75); border-left-color: var(--njcb-brand); }
.njcb-service-process__num {
  width: 36px;
  height: 36px;
  background-color: var(--njcb-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--njcb-text-4);
  flex-shrink: 0;
  transition: background-color var(--njcb-transition), color var(--njcb-transition);
}
.njcb-service-process__step:hover .njcb-service-process__num {
  background-color: var(--njcb-brand);
  color: #fff;
}
.njcb-service-process__title { font-size: 1rem; font-weight: 700; color: var(--njcb-ink); margin: 0 0 0.375rem; }
.njcb-service-process__desc  { font-size: 0.875rem; color: var(--njcb-text-5); line-height: 1.6; margin: 0; }

/* ─────────────────────────────────────────────────────────────────────────────
   22. ANIMATION KEYFRAMES & CLASSES
   ───────────────────────────────────────────────────────────────────────────── */
@keyframes njcb-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes njcb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes njcb-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes njcb-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(4px); }
}
.njcb-bounce { animation: njcb-bounce 1.2s ease-in-out infinite; }

/* Initial hidden state – set by JS */
.njcb-animate-fade-up,
.njcb-animate-fade,
.njcb-stagger-item {
  opacity: 0;
}
.njcb-animate-delay-1 { transition-delay: 0.15s; }

/* Revealed classes added by IntersectionObserver */
.njcb-animate-fade-up.is-visible {
  animation: njcb-fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.njcb-animate-fade.is-visible {
  animation: njcb-fade-in 0.6s ease forwards;
  animation-delay: 0.5s;
}
.njcb-stagger-group.is-visible .njcb-stagger-item {
  animation: njcb-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.njcb-stagger-group.is-visible .njcb-stagger-item:nth-child(1) { animation-delay: 0.05s; }
.njcb-stagger-group.is-visible .njcb-stagger-item:nth-child(2) { animation-delay: 0.12s; }
.njcb-stagger-group.is-visible .njcb-stagger-item:nth-child(3) { animation-delay: 0.19s; }
.njcb-stagger-group.is-visible .njcb-stagger-item:nth-child(4) { animation-delay: 0.26s; }
.njcb-stagger-group.is-visible .njcb-stagger-item:nth-child(5) { animation-delay: 0.33s; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .njcb-animate-fade-up,
  .njcb-animate-fade,
  .njcb-stagger-item {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
  .njcb-bounce { animation: none; }
  .njcb-spin   { animation: none; }
}

/* Hero special: not observer-based (fires immediately) */
.njcb-hero .njcb-animate-fade-up {
  animation: njcb-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.njcb-hero .njcb-animate-fade-up.njcb-animate-delay-1 {
  animation-delay: 0.15s;
}
.njcb-hero .njcb-animate-fade {
  animation: njcb-fade-in 0.6s ease forwards;
  animation-delay: 0.5s;
}

/* ─────────────────────────────────────────────────────────────────────────────
   23. ELEMENTOR INTEGRATION
   ───────────────────────────────────────────────────────────────────────────── */

/*
 * When the njcb-header widget is the FIRST element on a Theme Builder header template,
 * the Elementor section around it takes up space in the flow (the header itself is
 * position:fixed so has no height). We collapse that section so there is no gap.
 */
.elementor-location-header .elementor-section:has(.elementor-widget-njcb-header),
.elementor-location-header .e-con:has(.elementor-widget-njcb-header) {
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/*
 * Elementor Theme Builder injects a spacer div below the header location equal to
 * the header height. We make sure our CSS variable is used for that calculation.
 */
.elementor-section-wrap > .elementor-section:first-child,
.e-full-width-layout .elementor-section:first-child {
  /* nothing needed – Elementor handles the spacer automatically */
}

/* Prevent Elementor's default link color from bleeding into header links */
.elementor-widget-njcb-header .njcb-header a,
.elementor-widget-njcb-header .njcb-header button {
  font-family: var(--njcb-font) !important;
  text-decoration: none !important;
}

/* Force Elementor not to add padding inside the header widget cell */
.elementor-widget-njcb-header > .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   24. WORDPRESS ADMIN BAR FIX
   ───────────────────────────────────────────────────────────────────────────── */

/*
 * WordPress adds a fixed admin bar (32px desktop / 46px mobile) at the top of the page
 * for logged-in users. Without this fix the njcb-header sits BEHIND the admin bar.
 * WordPress sets `html { margin-top: 32px }` but that doesn't affect position:fixed.
 * We shift our fixed header down so it sits directly below the admin bar.
 */
.admin-bar .njcb-header {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  .admin-bar .njcb-header {
    top: 46px !important;
  }
}
/* Mobile nav is a child of .njcb-header and moves with it automatically */