/*
 * B&W THEME OVERRIDE
 * Remaps the retro green-on-dark theme to black-on-white.
 * Loaded AFTER styles.css to win specificity wars via !important parity.
 */

/* ── GLOBAL: prevent horizontal scroll on all pages loading this sheet ── */
html {
  overflow-x: clip !important;
  max-width: 100vw;
}
body {
  overflow-x: hidden !important;
  max-width: 100%;
}

/* ── CSS VARIABLE REDEFINITIONS ── */
/* Colour variables applied globally — kills green on all pages loading this sheet */
:root {
  --retro-green:       #000000;
  --retro-green-dim:   #444444;
  --primary-color:     #000000;
  --primary-dark:      #333333;
  --primary-light:     #555555;
  --retro-glow:        none;
}
/* Layout/background variables — bw-theme only */
.bw-theme {
  --retro-bg:          #ffffff;
  --retro-glow:        none;
  --retro-grid:        rgba(0,0,0,0.06);
  --retro-grid-size:   40px;
}

/* ── BASE (bw-theme only) ── */
body.bw-theme {
  background-color: #EFEFEF !important;
  color: #111111 !important;
}

/* ── Hide scrolling grid + scanlines on ALL pages (body::before = grid, body::after = scanlines) ── */
body::before,
body::after {
  display: none !important;
}

/* ── HOMEPAGE FONT OVERRIDE: Figtree replaces all fonts ── */
body:not(.no-grid) *:not(.retro-cursor) {
  font-family: 'Figtree', 'Inter', sans-serif !important;
  letter-spacing: normal !important;
}
body:not(.no-grid) h1,
body:not(.no-grid) .hero-headline,
body:not(.no-grid) .hero-headline span { font-weight: 900 !important; }
body:not(.no-grid) h2 { font-weight: 800 !important; }
body:not(.no-grid) h3 { font-weight: 700 !important; }
body:not(.no-grid) h4,
body:not(.no-grid) h5,
body:not(.no-grid) h6 { font-weight: 700 !important; }
body:not(.no-grid) nav a,
body:not(.no-grid) .nav-link,
body:not(.no-grid) .nav-links a,
body:not(.no-grid) .navbar.scrolled .nav-links a,
body:not(.no-grid) .navbar.scrolled .nav-links a:hover {
  font-family: 'Figtree', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: normal !important;
}
body:not(.no-grid) .btn,
body:not(.no-grid) button,
body:not(.no-grid) .cta-btn,
body:not(.no-grid) .hero-cta,
body:not(.no-grid) .contact-btn { font-weight: 700 !important; font-size: 15px !important; }
body:not(.no-grid) p,
body:not(.no-grid) li,
body:not(.no-grid) span,
body:not(.no-grid) label,
body:not(.no-grid) a { font-weight: 400; }

/* ── SUB-PAGE FONT OVERRIDE: Inter replaces retro fonts on all .no-grid pages ── */
body.no-grid *:not(.retro-cursor) {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  letter-spacing: normal !important;
}
body.no-grid h1 { font-weight: 900 !important; }
body.no-grid h2 { font-weight: 800 !important; }
body.no-grid h3 { font-weight: 700 !important; }
body.no-grid h4,
body.no-grid h5,
body.no-grid h6 { font-weight: 600 !important; }
body.no-grid nav a,
body.no-grid .nav-links a {
  font-weight: 700 !important;
  font-size: 15px !important;
}
body.no-grid p,
body.no-grid li { font-weight: 400 !important; }

/* ── SCROLLING GRID — override keyframe so only background-position moves ── */
/* Redefining retro-grid-scroll here wins because this file loads after styles.css */
@keyframes retro-grid-scroll {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 40px, 0 40px; }
}

body::before {
  background-image:
    linear-gradient(rgba(0,0,0,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.07) 1px, transparent 1px) !important;
  background-size: 40px 40px, 40px 40px !important;
  animation: retro-grid-scroll 4s linear infinite !important;
  background-color: transparent !important;
}

/* ── HEADINGS ── */
h1, h2, h3, h4, h5, h6 {
  color: #000000 !important;
  text-shadow: none !important;
}

/* ── EXCEPTIONS: white text on dark cards ── */
.quote-card-title {
  color: #ffffff !important;
}
.quote-card-sub {
  color: rgba(255,255,255,0.7) !important;
}

/* ── RESULTS STRIP: light background so dark text is visible ── */
.results-strip {
  background: #ffffff !important;
}
.results-strip .result-item {
  border-right-color: rgba(0,0,0,0.1) !important;
}
.results-strip .result-num {
  color: #111111 !important;
}
.results-strip .result-label {
  color: #555555 !important;
}

/* ── BOTTOM CTA: light background so dark text is visible ── */
.bottom-cta {
  background: #f5f5f5 !important;
}
.bottom-cta h2 {
  color: #111111 !important;
}
.bottom-cta h2 span {
  color: var(--orange) !important;
}
.bottom-cta p {
  color: #555555 !important;
}

/* ── LINKS ── */
a { color: #000000 !important; }
a:hover { text-shadow: none !important; color: #444444 !important; }

/* ── NAVIGATION ── */
header, .header, .site-header, .navbar {
  background: #ffffff !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  z-index: 10001 !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
}

/* ── SCROLLED STATE — inset pill ── */
.navbar.scrolled {
  top: 12px !important;
  left: 18% !important;
  right: 18% !important;
  background: #ffffff !important;
  border: none !important;
  border-radius: 100px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nav-links a,
.navbar.scrolled .nav-links a,
.navbar .nav-links a {
  color: #111111 !important;
}
.nav-links a:hover {
  color: #444444 !important;
  text-shadow: none !important;
}
.logo, .nav-logo, .brand-name, .site-logo {
  color: #111111 !important;
  text-shadow: none !important;
}
.logo .logo-icon, nav .logo-icon, .navbar .logo-icon {
  filter: brightness(0) !important;
}
/* Logo text — black on white header */
.logo-main,
.logo-tld,
a.logo .logo-main,
a.logo .logo-tld,
.navbar .logo-main,
.navbar .logo-tld,
nav .logo-main,
nav .logo-tld {
  color: #111111 !important;
  text-shadow: none !important;
}
/* Nav CTA button — black bg, white text on white header */
.nav-cta,
.nav-links .nav-cta,
.nav-links .nav-cta.active,
.navbar .nav-links a.nav-cta,
.navbar .nav-links a.nav-cta.active {
  background: #111111 !important;
  color: #ffffff !important;
  border: 1px solid #111111 !important;
  box-shadow: none !important;
  border-radius: 100px !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  padding-left: 28px !important;
  padding-right: 20px !important;
}
.nav-cta:hover,
.nav-links .nav-cta:hover,
.navbar .nav-links a.nav-cta:hover {
  background: #333333 !important;
  border-color: #333333 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
/* Instagram icon in nav — black on white header */
.nav-social a {
  color: #111111 !important;
}
.nav-social a:hover {
  color: #444444 !important;
}
.menu-toggle, .hamburger-btn {
  color: #000000 !important;
}
.hamburger span {
  background: #000000 !important;
}
.mobile-nav, .mobile-menu {
  background: rgba(255,255,255,0.99) !important;
  border: 1px solid #cccccc !important;
}

/* ── HERO ── */
.hero-headline, .hero-title, .hero-subheadline, .hero-sub-mobile {
  color: #111111 !important;
  text-shadow: none !important;
}
.hero-headline {
  line-height: 0.9 !important;
}
.hero-rotating-text {
  height: auto !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
}
@media (min-width: 769px) {
  .hero-headline {
    font-size: 130px !important;
  }
  .hero-content {
    max-width: 1450px !important;
  }
}
.hero-name-highlight { color: #000000 !important; text-shadow: none !important; }

/* rotating text cursor */
.retro-cursor {
  background: #000000 !important;
  color: #000000 !important;
}

/* hero rotating text */
#heroRotatingText, .hero-rotating-wrap {
  color: #000000 !important;
  text-shadow: none !important;
}

/* ── HERO SECTION — sits above body::after scanlines so form stays clean ── */
.hero {
  background: #EFEFEF !important;
  position: relative !important;
  z-index: 9999 !important;
}

/* ══════════════════════════════════════════
   HERO TWO-COLUMN LAYOUT (desktop)
   ══════════════════════════════════════════ */
@media (min-width: 769px) {
  /* Hero fills the full viewport so carousel lands at the bottom of the screen */
  .hero {
    overflow: visible !important;
    position: relative !important;
    min-height: 100vh !important;
    box-sizing: border-box !important;
  }
  /* Pin the hero container to the left edge, form to the right edge */
  .hero-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 24px !important;
    padding-top: 80px !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .hero-email-cta { display: none !important; }
  /* Background video box — left column, desktop only */
  .hero-bg-video-wrap {
    position: absolute !important;
    top: 90px;
    left: 28px;
    width: clamp(400px, 63%, 63vw);
    bottom: 220px;
    border-radius: 14px;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    background: #ffffff;
  }
  .hero-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.55;
  }
  /* Horizontal scanlines over the video only — no grid */
  .hero-bg-video-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 3px,
      rgba(0, 0, 0, 0.10) 3px,
      rgba(0, 0, 0, 0.10) 4px
    );
  }
  /* Keep hero content above the video */
  .hero-container {
    position: relative !important;
    z-index: 2 !important;
  }
  /* Carousel pinned to exact bottom of hero */
  .hero-carousel-bottom {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2 !important;
  }
  /* Reserve space so the section below clears the carousel */
  .hero {
    padding-bottom: 100px !important;
  }
  /* Trusted by label — always black */
  .carousel-heading {
    color: #000000 !important;
  }
  .hero-two-col {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
    width: 100%;
  }
  .hero-two-col .hero-content {
    flex: 1;
    min-width: 0;
    text-align: left !important;
    max-width: none !important;
  }
  .hero-two-col .hero-headline {
    font-size: clamp(42px, 5.2vw, 82px) !important;
    line-height: 1.05 !important;
  }
  .hero-two-col .hero-rotating-text {
    height: auto !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
  }
  .hero-two-col .hero-subheadline {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hero-two-col .hero-email-cta {
    text-align: left !important;
    margin-top: 28px !important;
  }
  .hero-form-col {
    flex: 0 0 400px;
    max-width: 400px;
    margin-top: -260px !important;
  }
}
@media (max-width: 768px) {
  .hero-two-col { display: block; }
  .hero-form-col { display: none !important; }

  /* ── Mobile hero: full screen height so carousel lands at the bottom ── */
  .hero {
    padding-top: 82px !important;
    padding-bottom: 90px !important;
    position: relative !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
  }

  /* ── Video: fills hero behind text, stops above carousel area ── */
  .hero-bg-video-wrap {
    position: absolute !important;
    top: 76px !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 150px !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    order: unset !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #000 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    flex-shrink: unset !important;
  }
  /* Light filter + horizontal scanlines (no grid) */
  .hero-bg-video-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background-color: rgba(255,255,255,0.28);
    background-image: repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 3px,
      rgba(80,80,80,0.10) 3px,
      rgba(80,80,80,0.10) 4px
    );
  }
  .hero-bg-video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0.85 !important;
  }

  /* ── Hero headline: fluid, no overflow on mobile ── */
  .hero-headline {
    font-size: clamp(28px, 9vw, 78px) !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  /* ── Text stays above video ── */
  .hero-container {
    order: unset !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* ── Brand carousel at bottom of hero, clears the video ── */
  .hero-carousel-bottom {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 3 !important;
    order: unset !important;
    margin-top: 0 !important;
  }
  /* "Trusted by" label black on mobile */
  .hero-carousel-bottom .carousel-heading {
    color: #000000 !important;
  }
}

/* ══════════════════════════════════════════
   HERO LEAD FORM
   ══════════════════════════════════════════ */
.hero-lead-form {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  background: #f7f7f7;
  border: 2px solid #e0e0e0;
  box-shadow: 0 8px 40px rgba(0,0,0,0.13);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  z-index: 10000;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  height: 660px;
}
.hero-lead-form.hlf-expanded {
  border-color: #111111 !important;
  box-shadow: 0 16px 64px rgba(0,0,0,0.22) !important;
}
.hlf-progress {
  height: 4px;
  background: #f0f0f0;
}
.hlf-progress-bar {
  height: 4px;
  background: #111111;
  width: 33%;
  transition: width 0.35s ease;
}
.hlf-step { display: none; flex-direction: column; }
.hlf-step.hlf-active { display: flex; flex-direction: column; flex: 1; min-height: 0; background: #f7f7f7; }
.hlf-top {
  padding: 12px 16px 10px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}
.hlf-eyebrow {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 9px !important;
  font-weight: 400;
  letter-spacing: 1px;
  color: #111111 !important;
  text-transform: uppercase !important;
  margin-bottom: 6px;
  text-shadow: none !important;
  line-height: 1.6 !important;
}
.hlf-title {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #111111 !important;
  margin: 0 0 4px !important;
  line-height: 1.6 !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}
.hlf-subnote {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
  color: #888;
  margin-top: 2px;
  line-height: 1.6 !important;
  text-transform: uppercase !important;
}
.hlf-field-label {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
  font-weight: 400;
  color: #111;
  padding-top: 8px;
  text-transform: uppercase !important;
  line-height: 1.8 !important;
}
.hlf-req { display: none !important; }
.hlf-optional {
  font-family: Inter, sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  color: #999 !important;
  text-transform: lowercase !important;
  letter-spacing: 0 !important;
  margin-left: 4px;
}
.hlf-list {
  flex: 1;
  min-height: 0;
  overflow-y: hidden;
  background: #f7f7f7;
  padding: 4px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hlf-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 8px;
  border-radius: 4px;
  cursor: pointer;
  border-bottom: 1px solid #ececec;
  transition: background 0.12s;
  user-select: none;
  flex: 1;
}
.hlf-option:last-child { border-bottom: none; }
.hlf-option:hover { background: #eee; }
.hlf-option.hlf-selected {
  background: #111111 !important;
  border-color: #111111 !important;
}
.hlf-option.hlf-selected .hlf-opt-name,
.hlf-option.hlf-selected .hlf-opt-sub { color: #ffffff !important; }
.hlf-option.hlf-selected .hlf-opt-icon svg { stroke: #111111 !important; }
.hlf-option input[type="radio"],
.hlf-option input[type="checkbox"] { display: none; }
.hlf-opt-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ebebeb;
  border-radius: 4px;
}
.hlf-opt-text { display: flex; flex-direction: column; gap: 1px; }
.hlf-opt-name {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 12px !important;
  font-weight: 400;
  color: #111;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  line-height: 1.8 !important;
}
.hlf-opt-sub {
  font-family: Inter, -apple-system, sans-serif !important;
  font-size: 11px !important;
  color: #888;
  text-shadow: none !important;
  text-transform: none !important;
  line-height: 1.4 !important;
}
.hlf-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid #f0f0f0;
  background: #fff;
}
.hlf-back-btn {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 10px !important;
  font-weight: 400;
  color: #666;
  text-transform: uppercase !important;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
  transition: color 0.15s;
  text-shadow: none !important;
}
.hlf-back-btn:hover { color: #111; }
.hlf-next-btn,
.hlf-submit-btn {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 14px !important;
  font-weight: 400;
  color: #aaa;
  background: #f0f0f0;
  border: none;
  border-radius: 20px;
  padding: 14px 18px;
  cursor: not-allowed;
  transition: background 0.2s, color 0.2s;
  flex: 1;
  text-align: center;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}
.hlf-next-btn.hlf-enabled {
  background: #111111;
  color: #ffffff;
  cursor: pointer;
}
.hlf-next-btn.hlf-enabled:hover { background: #333; }
.hlf-submit-btn.hlf-enabled {
  background: #16a34a;
  color: #ffffff;
  cursor: pointer;
}
.hlf-submit-btn.hlf-enabled:hover { background: #15803d; }
.hlf-contact-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 14px;
  background: #f7f7f7;
  align-content: start;
}
.hlf-field { display: flex; flex-direction: column; gap: 4px; }
.hlf-field.hlf-full { grid-column: 1 / -1; }
.hlf-field label {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
  font-weight: 400;
  color: #111 !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  line-height: 1.8 !important;
}
.hlf-field input,
.hlf-field textarea {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 9px !important;
  color: #111 !important;
  background: #ffffff !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  padding: 9px 9px !important;
  outline: none;
  resize: none;
  width: 100%;
  box-sizing: border-box;
  text-shadow: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  text-transform: uppercase !important;
}
#hlfName, #hlfEmail, #hlfPhone, #hlfCity, #hlfMessage,
#clfName, #clfEmail, #clfPhone, #clfCity, #clfMessage {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.hlf-opt-icon img {
  filter: grayscale(1) brightness(0) !important;
}
.hlf-field textarea {
  line-height: 2 !important;
}
.hlf-field input:focus,
.hlf-field textarea:focus { border-color: #111111 !important; }
.hlf-field input::placeholder,
.hlf-field textarea::placeholder { color: #bbb !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 13px !important; text-transform: none !important; letter-spacing: 0 !important; }

/* ── CONTACT PREFERENCE ── */
.hlf-contact-pref {
  padding: 12px 14px 4px;
  background: #f7f7f7;
  border-top: 1px solid #ebebeb;
}
.hlf-cp-label {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
  font-weight: 400;
  color: #111 !important;
  margin-bottom: 8px;
  text-transform: uppercase !important;
  line-height: 1.8 !important;
}
.hlf-cp-row {
  display: flex;
  gap: 6px;
}
.hlf-cp-opt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 16px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px;
  font-weight: 600;
  color: #111 !important;
  text-align: center;
  position: relative;
  transition: background 0.12s;
  user-select: none;
}
.hlf-cp-opt svg {
  width: 26px !important;
  height: 26px !important;
}
.hlf-cp-opt input { display: none; }
.hlf-cp-opt:hover { background: #eee; }
.hlf-cp-opt.hlf-cp-selected {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
}
.hlf-cp-opt.hlf-cp-selected svg { stroke: #fff !important; }
.hlf-cp-tag {
  font-size: 9px;
  font-weight: 700;
  color: #E8590C;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1;
}
.hlf-cp-opt.hlf-cp-selected .hlf-cp-tag { color: #ffb38a !important; }
.hlf-cp-sub {
  display: none;
  gap: 6px;
  margin-top: 8px;
}
.hlf-cp-sub.hlf-cp-sub-visible { display: flex; }
.hlf-cp-sub-opt {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px;
  font-weight: 600;
  color: #111 !important;
  transition: background 0.12s;
  user-select: none;
}
.hlf-cp-sub-opt input { display: none; }
.hlf-cp-sub-opt:hover { background: #eee; }
.hlf-cp-sub-opt.hlf-cp-selected {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
}
.hlf-cp-sub-opt.hlf-cp-selected svg { stroke: #fff !important; fill: #fff !important; }

.hlf-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  min-height: 220px;
}
.hlf-success-check {
  width: 52px;
  height: 52px;
  background: #111111;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
}
.hlf-success-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 20px;
  font-weight: 800;
  color: #111 !important;
  margin: 0 0 8px;
  text-shadow: none !important;
}
.hlf-success-msg {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  text-shadow: none !important;
}

/* ── HERO EMAIL BUTTON ── */
.hero-email-btn {
  display: inline-flex !important;
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}
@media (max-width: 768px) {
  .hero-email-cta {
    margin-top: 60px !important;
  }
}
.hero-email-btn:hover {
  background: #333333 !important;
  box-shadow: none !important;
}

/* ── SERVICE TILES ── */
.service-tile {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 28px 24px !important;
  text-decoration: none !important;
  background: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
  color: #000000 !important;
  position: relative !important;
  z-index: 9999 !important;
  transition: background 0.18s, box-shadow 0.18s !important;
}
.service-tile:hover {
  background: #E8590C !important;
  border: none !important;
  box-shadow: none !important;
}
.service-tile-logo-bw {
  filter: none !important;
  transition: filter 0.2s ease !important;
}
.service-tile:hover .service-tile-logo-bw {
  filter: invert(1) !important;
}
.service-tile-name, .service-tile-arrow {
  color: #000000 !important;
}
.service-tile:hover .service-tile-name,
.service-tile:hover .service-tile-arrow {
  color: #ffffff !important;
}
.service-tile:hover .service-tile-desc {
  color: #ffffff !important;
}
.service-tile:hover .service-tile-cta {
  background: transparent !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}
.service-tile-cta {
  position: relative !important;
  z-index: 1 !important;
}
.service-tile-cta:hover,
.service-tile:hover .service-tile-cta:hover {
  background: transparent !important;
  color: #111111 !important;
  border-color: #111111 !important;
}
/* Logos go white on hover — invert coloured logos */
.service-tile:hover .service-tile-logo {
  filter: brightness(0) invert(1) !important;
}
/* Web Design tile: use swapped image directly — no filter */
a[href="/custom-website-design"]:hover .service-tile-logo {
  filter: none !important;
}
.service-tile-more {
  border: none !important;
  background: #ffffff !important;
  animation: none !important;
}
.service-tile-more .service-tile-name { color: #111111 !important; }
.service-tile-more .service-tile-desc { color: #555555 !important; }
.service-tile-more .service-tile-cta {
  color: #111111 !important;
  border-color: #111111 !important;
}
.service-tile-more:hover {
  background: #ffffff !important;
  border: none !important;
  animation: none !important;
}
.service-tile-more:hover .service-tile-name { color: #111111 !important; text-shadow: none !important; }
.service-tile-more:hover .service-tile-desc { color: #555555 !important; }
.service-tile-more:hover .service-tile-cta {
  color: #111111 !important;
  border-color: #111111 !important;
  background: transparent !important;
}
.services-tiles-section {
  padding: 20px 0 !important;
  border-top: 1px solid rgba(0,0,0,0.1) !important;
  border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}
.services-tiles-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  max-width: 960px !important;
  margin: 0 auto !important;
}
.service-tile-inner {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.service-tile-logo {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}
.service-tile-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #111111 !important;
  line-height: 1.25 !important;
}
.service-tile-arrow {
  font-size: 18px !important;
  opacity: 0.4 !important;
  transition: opacity 0.18s, transform 0.18s !important;
  color: #111111 !important;
  flex-shrink: 0 !important;
}
.service-tile:hover .service-tile-arrow {
  opacity: 1 !important;
  transform: translateX(4px) !important;
}
@media (max-width: 768px) {
  .services-tiles-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 400px) {
  .services-tiles-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── BUTTONS ── */
.btn {
  border-radius: 0 !important;
  clip-path: none !important;
}
.btn-primary, .btn.btn-primary {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  clip-path: none !important;
}
.btn-primary:hover {
  background: #333333 !important;
  box-shadow: none !important;
}
.btn-outline {
  background: transparent !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: none !important;
}
.btn-outline:hover {
  background: rgba(0,0,0,0.06) !important;
  box-shadow: none !important;
}

/* ── SERVICES TABS ── */
.services-tab-btn {
  color: #555555 !important;
  border: 1px solid #aaaaaa !important;
  background: transparent !important;
}
.services-tab-btn.active {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}
.services-tab-btn:hover:not(.active) {
  background: rgba(0,0,0,0.06) !important;
  color: #000000 !important;
  border-color: #555555 !important;
}
.services-tab-nav {
  background: transparent !important;
  border: none !important;
}
.tab-features li::before {
  color: #000000 !important;
}

/* ── TAB MOCKUP VISUALS ── */
.tab-visual-mockup {
  background: #f8f8f8 !important;
  border: 1px solid #cccccc !important;
  box-shadow: none !important;
}
.tab-mockup-bar {
  background: #eeeeee !important;
  border-bottom: 1px solid #cccccc !important;
}
.tab-mockup-url-bar {
  background: transparent !important;
  color: #555555 !important;
  border: none !important;
}
.tab-mockup-body, .mockup-app {
  background: #f8f8f8 !important;
  color: #111111 !important;
}
.dot.red   { background: #ff5f57 !important; }
.dot.yellow{ background: #febc2e !important; }
.dot.green { background: #28c840 !important; }

/* ── GOOGLE MAP MOCK ── */
.mock-gmap-result, .mock-gmap-pin, .mock-gmap-addr {
  color: #333333 !important;
}
.mock-gmap-result.top { border-left: 3px solid #000000 !important; }

/* ── GOOGLE ADS MOCK ── */
.mock-gads-active { color: #000000 !important; }

/* ── CARDS / PANELS ── */
.card, .feature-card, .service-card, .info-card, .result-card,
.step-card, .industry-card, .pricing-tier, .pricing-card {
  background: #ffffff !important;
  border: 1px solid #cccccc !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
}
.pricing-tier.featured, .pricing-card.featured {
  border: 2px solid #000000 !important;
  box-shadow: none !important;
}

/* ── SECTION BACKGROUNDS — all sections grey, cards/tiles white on top ── */
section, .section, .services-tabs, .trusted-by-section,
.contact-section, .faq-section, .how-it-works-section,
.cta-section, .steps-section, .results-section, .industries-section,
.pricing-section, .about-section, .stats-section,
.meet-team-section, .portfolio-section, .seo-geo-section {
  background: #EFEFEF !important;
  background-color: #EFEFEF !important;
}

/* Stats strip stays dark — white text must stay legible */
.stats-strip {
  background: #111111 !important;
  background-color: #111111 !important;
  border-radius: 16px !important;
  margin: 26px !important;
}
.footer-why-num {
  color: #ffffff !important;
}
.footer-why-text {
  color: rgba(255,255,255,0.65) !important;
}
.footer-why-label {
  color: rgba(255,255,255,0.45) !important;
}

/* Search engines section — same grey as all sections */
/* Remove dark left/right edge gradients from ALL sections that use them */
.seo-geo-section::after,
.services-tabs::after,
.ai-stats::after,
.custom-software::after,
.social-media-section::after,
.voicement-section::after,
.faq::after,
.contact::after {
  background: none !important;
  display: none !important;
}
.seo-geo-section .section-heading-lg,
.seo-geo-section .page-heading {
  color: #000000 !important;
}
.seo-geo-section .section-subtitle-lg,
.seo-geo-section .section-subtitle {
  color: #444444 !important;
}
.seo-geo-section .section-label {
  color: #666666 !important;
}
.seo-card {
  background: #ffffff !important;
  border: 1px solid #dddddd !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Default: invisible — body::after scanlines paint over section naturally */
.seo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.04) 2px,
    rgba(0, 0, 0, 0.04) 4px
  );
  background-size: 100% 4px;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}
/* No scanlines on any card, hovered or not */
.seo-geo-section.seo-cards-active .seo-card::after,
.seo-geo-section.seo-cards-active .seo-card:hover::after {
  opacity: 0;
  animation: none;
}
/* Lift section above body::after (z-index 9998) during any card hover */
.seo-geo-section.seo-cards-active {
  position: relative !important;
  z-index: 9999 !important;
}
@keyframes seo-tv-static {
  0%   { background-position: 0 0px;  }
  11%  { background-position: 0 13px; }
  22%  { background-position: 0 4px;  }
  33%  { background-position: 0 19px; }
  44%  { background-position: 0 7px;  }
  55%  { background-position: 0 23px; }
  66%  { background-position: 0 2px;  }
  77%  { background-position: 0 16px; }
  88%  { background-position: 0 9px;  }
  100% { background-position: 0 28px; }
}
.seo-card:hover {
  border-color: #000000 !important;
  box-shadow: none !important;
  transform: none !important;
}
.seo-card h3 {
  color: #000000 !important;
}
.seo-card-label {
  color: #555555 !important;
}
.seo-card > p:last-of-type {
  color: #555555 !important;
}
.seo-card-metrics {
  border-top-color: rgba(0,0,0,0.1) !important;
}
.seo-metric-val {
  color: #000000 !important;
}
.seo-metric-lbl {
  color: #555555 !important;
}
/* AIO logos — original SVG is dark, make it black on white bg */
.aio-logo-white {
  filter: brightness(0) !important;
}
/* Canvas reveal: transition setup */
.seo-card h3,
.seo-card .seo-card-label,
.seo-card p,
.seo-card .seo-metric-val,
.seo-card .seo-metric-lbl {
  transition: color 0.3s ease;
}

/* Client logos carousel — invert all to black for clean B&W look */
.logo-carousel-item img {
  filter: brightness(0) !important;
}

/* Web Design tile — black image default, white image on hover (via JS src swap) */
.service-tile-logo-swap {
  filter: none !important;
  transition: none !important;
}
a[href="/custom-website-design"] .service-tile-logo-swap {
  filter: none !important;
  transition: none !important;
}
a[href="/custom-website-design"]:hover .service-tile-logo-swap {
  filter: none !important;
  transition: none !important;
}
.service-tile-computer-svg {
  color: #111111;
  transition: color 0.15s ease;
  flex-shrink: 0;
}
a[href="/custom-website-design"]:hover .service-tile-computer-svg {
  color: #ffffff !important;
}

/* ── SECTION LABELS ── */
.services-tabs-label, .section-label, .eyebrow, .overline {
  color: #555555 !important;
}
.section-subtitle-lg {
  color: #000000 !important;
}

/* ── FAQ ── */
.faq-container {
  background: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.faq-item {
  background: #ffffff !important;
  border-bottom: 1px solid #e0e0e0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}
.faq-question { color: #000000 !important; }
.faq-question span { color: #000000 !important; }
.faq-answer { color: #333333 !important; }
.faq-answer p { color: #333333 !important; }
.faq-toggle { color: #000000 !important; }
.faq-icon { color: #000000 !important; border-color: #cccccc !important; }

/* ── FORMS ── */
input, textarea, select {
  background: #ffffff !important;
  border: 1px solid #aaaaaa !important;
  color: #111111 !important;
  box-shadow: none !important;
}
input::placeholder, textarea::placeholder {
  color: #999999 !important;
}
input:focus, textarea:focus, select:focus {
  border-color: #000000 !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.1) !important;
}
.form-group input,
.form-group textarea,
.form-group select {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #aaaaaa !important;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #999999 !important;
}

/* ── ABOVE SCANLINES — these elements sit above body::after (z-index:9998) ── */
/* Images */
img {
  position: relative !important;
  z-index: 9999 !important;
}
/* Service tiles section */
.services-tiles-section {
  position: relative !important;
  z-index: 9999 !important;
}
/* Contact / lead forms */
.contact-section,
.contact-form-wrap {
  position: relative !important;
  z-index: 9999 !important;
}
/* Footer */
footer, .site-footer, .footer {
  position: relative !important;
  z-index: 9999 !important;
}
/* Header already at z-index: 10001 via styles.css */

/* ── FOOTER ── */
footer, .site-footer, .footer {
  background: #111111 !important;
  border-top: 1px solid #333333 !important;
}
footer *, .site-footer *, .footer * {
  color: rgba(255,255,255,0.85) !important;
}
.footer-heading,
.footer-links-col h3,
.footer-links-col h4 {
  color: #ffffff !important;
}
.footer-description,
.footer-about-text,
.footer-cta-text,
.footer-trust-item,
.footer-contact-line,
.footer-links-col ul li a,
.footer-bottom p,
.footer-bottom-links a,
.footer-social-link,
.footer-tagline,
.footer-nap,
.footer-why-label,
.footer-why-text {
  color: rgba(255,255,255,0.6) !important;
}
.footer-links-col ul li a:hover,
.footer-bottom-links a:hover {
  color: #ffffff !important;
}
.footer-top {
  border-bottom-color: rgba(255,255,255,0.12) !important;
}
.footer-brand-name, .logo-main { color: #ffffff !important; }
.logo-tld { color: rgba(255,255,255,0.5) !important; }
.footer-social-link svg { stroke: rgba(255,255,255,0.6); }
.footer-social-link:hover svg { stroke: #ffffff; }

/* ── TRUSTED-BY LOGOS ── */
.trusted-by-section, .logo-carousel-wrap {
  border-top: 1px solid rgba(0,0,0,0.1) !important;
  border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}

/* ── STATS / COUNTERS ── */
.stat-number, .counter, .big-number {
  color: #000000 !important;
  text-shadow: none !important;
}

/* ── MEET TEAM (Arkie) ── */
.meet-team-section {
  background: #EFEFEF !important;
  border-top: none !important;
  border-bottom: none !important;
}
.bw-theme .meet-team-pricing-btn {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  border-radius: 8px !important;
}
.bw-theme .meet-team-pricing-btn:hover {
  background: #333333 !important;
  border-color: #333333 !important;
}

/* ── PROCESS / HOW IT WORKS ── */
.process-check-icon { color: #000000 !important; }
.process-step-label { color: #555555 !important; }

/* ── TRUSTED-BY / PRICING BANNER (bw-theme only) ── */
.bw-theme .tp-banner {
  background: #ffffff !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
  overflow: hidden !important;
}
.bw-theme .tp-banner::before {
  background: linear-gradient(120deg, #000000 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.06) 60%, #000000 100%) !important;
  border-radius: 16px !important;
}
.bw-theme .tp-glow {
  background: none !important;
  display: none !important;
}
.bw-theme .tp-eyebrow {
  color: #000000 !important;
}
.bw-theme .tp-eyebrow::before {
  background: #000000 !important;
}
.bw-theme .tp-banner-left h2 { color: #111111 !important; }
.bw-theme .tp-banner-left .tp-highlight { color: #000000 !important; -webkit-text-fill-color: #000000 !important; }
.bw-theme .tp-check-item { color: #111111 !important; }
.bw-theme .tp-check-icon { color: #000000 !important; }
.bw-theme .tp-check-label { color: #111111 !important; }
.bw-theme .tp-banner .tp-banner-sub { color: #555555 !important; }
.bw-theme .tp-banner-right .meet-team-pricing-btn {
  background: #000000 !important;
  color: #ffffff !important;
}

/* ── PORTFOLIO ── */
/* Portfolio tiles sit above the scanlines — no grey lines over the cards */
.portfolio-section {
  background: #EFEFEF !important;
  position: relative !important;
  z-index: 9999 !important;
  border-top: none !important;
}
.portfolio-card,
.portfolio-browser,
.portfolio-screenshot {
  position: relative !important;
  z-index: 9999 !important;
}
.portfolio-card {
  background: #ffffff !important;
  border: 1px solid #dddddd !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
  overflow: hidden !important;
}
.portfolio-card:hover {
  border-color: #000000 !important;
  transform: translateY(-3px);
}
.portfolio-browser {
  background: #f0f0f0 !important;
  border-bottom: 1px solid #cccccc !important;
}
.portfolio-browser-bar {
  background: #f0f0f0 !important;
  border-bottom: 1px solid #dddddd !important;
}
.portfolio-dots span {
  background: #666666 !important;
  opacity: 1 !important;
}
.portfolio-url {
  color: #444444 !important;
}
.portfolio-screenshot {
  background: #e8e8e8 !important;
}
.portfolio-card-info {
  background: #ffffff !important;
}
.portfolio-card-name {
  color: #000000 !important;
}
.portfolio-card-type {
  color: #444444 !important;
}
.portfolio-card-url {
  color: #555555 !important;
}
.portfolio-card-label { color: #555555 !important; }
.portfolio-open-btn {
  color: #000000 !important;
  border: none !important;
  background: transparent !important;
}
.portfolio-open-btn:hover {
  color: #333333 !important;
}

/* ── CONTACT SECTION ── */
.contact-section { background: #EFEFEF !important; }
.contact {
  background: #EFEFEF !important;
}
.contact-main-heading,
.contact .section-heading-lg,
.contact .section-subtitle-lg,
.contact .section-label {
  color: #000000 !important;
}
.form-group label {
  color: #ffffff !important;
}
.form-group label .required {
  color: #ff6b6b !important;
}
.char-counter {
  color: #aaaaaa !important;
}
/* Form card sits above the scanlines — no grey lines on the form */
.contact-content {
  position: relative !important;
  z-index: 9999 !important;
}
.contact-form-wrap {
  background: #ffffff !important;
  border: 1px solid #cccccc !important;
  position: relative !important;
  z-index: 9999 !important;
}
.contact-form {
  position: relative !important;
  z-index: 9999 !important;
}
.contact-form button {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
}
.contact-form button:hover {
  background: #333333 !important;
  color: #ffffff !important;
}

/* ── SCROLLBAR ── */
/* ── ARKIE PHOTO — above scanlines ── */
.meet-team-photo {
  border-radius: 12px !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 9999 !important;
  border: none !important;
}
.meet-team-photo-border {
  display: none !important;
}

::-webkit-scrollbar-track { background: #f0f0f0 !important; }
::-webkit-scrollbar-thumb {
  background: #aaaaaa !important;
  border-radius: 0 !important;
}
::-webkit-scrollbar-thumb:hover { background: #555555 !important; }

/* ── SELECTION ── */
::selection {
  background: #000000 !important;
  color: #ffffff !important;
}

/* ── BADGES ── */
.badge, .tag, .chip, .label-pill {
  background: rgba(0,0,0,0.06) !important;
  color: #000000 !important;
  border: 1px solid #aaaaaa !important;
}

/* ── BACK BUTTON ── */
.back-btn, .back-link, .breadcrumb a {
  color: #000000 !important;
  border-color: #000000 !important;
}

/* ── HERO EMAIL FORM ── */
.hero-email-form, .hero-email-input-wrap {
  background: #ffffff !important;
  border-color: #999999 !important;
}
.hero-email-input { color: #111111 !important; }

/* ── SECTION BORDERS ── */
.section-divider { border-color: #dddddd !important; }

/* ── GLOWING TEXT — remove all glows ── */
* {
  text-shadow: none !important;
}
/* Re-allow font-family overrides to remain */

/* ── LOGO IN FOOTER (keep logo visible on dark bg) ── */
.footer-logo .logo-icon { filter: brightness(0) invert(1) !important; }

/* ══════════════════════════════════════════════════════
   CATCH-ALL: every remaining hardcoded #45C87A green
   override to black on light backgrounds.
   ══════════════════════════════════════════════════════ */
.hero-email-success,
.tab-social-stat,
.mock-stat-value,
.mock-wf-label,
.mock-wf-node.trigger,
.wf-label,
.wf-stat-num,
.workflow-node.wf-trigger,
.workflow-arrow,
.metric-num,
.seo-stat-value,
.seo-card-label,
.seo-metric-val,
.voicement-url,
.voicement-stat-number,
.voicement-phone-timer,
.voicement-transcript-label,
.transcript-tag.ai-tag,
.transform-accent,
.transform-eyebrow,
.type-heading,
.process-num,
.service-areas-label,
.social-result-static,
.social-platform-card:hover,
.tab-features li::before,
.clients-eyebrow,
.client-category,
.ga-hub-label,
.ga-hub-why-title,
.pricing-section-label,
.pricing-card-popular,
.industry-no-match a,
.city-seo-faq-q,
.state-card-count,
.stats-sources-popover li strong,
.svc-tag,
.svc-seo-val,
.update-log::before,
.platform-badge.active-badge {
  color: #000000 !important;
  border-color: #cccccc !important;
}

/* Footer stats — dark background so these must stay white */
.footer-why-num,
.footer-why-label,
.footer-why-text {
  color: #ffffff !important;
}

/* Hover states that flash green border → black border */
.hero-email-form:focus-within,
.client-card:hover,
.ga-city-card:hover,
.industry-card:hover,
.industry-pill:hover,
.industry-search-box:focus-within,
.mock-platform-icon:hover,
.seo-card:hover,
.state-card:hover,
.tab-social-card:hover,
.startup-form select:focus,
.pricing-demo-btn:hover,
.pricing-back-btn:hover {
  border-color: #000000 !important;
  color: #000000 !important;
}

/* Tab features list — both the marker and the text */
.tab-features li,
.tab-features li::before { color: #000000 !important; }

/* Active nav link & tab buttons — green → black */
.nav-links a.active { color: #000000 !important; }
.services-tab-btn:hover { color: #000000 !important; border-color: #aaaaaa !important; }

/* Pricing & state cards */
.state-card-btn,
.pricing-other-notice a { color: #000000 !important; }

/* USA/geo highlight sections */
.usa-pride-section .transform-accent,
.usa-pride-section .transform-eyebrow { color: #000000 !important; }

/* ══════════════════════════════════════════════════════════════
   NUCLEAR RGBA OVERRIDE
   Kills every hardcoded rgba(69,200,122,…) that bypasses
   the --retro-green CSS variable already set to #000000.
   ══════════════════════════════════════════════════════════════ */

/* — Text colours on LIGHT backgrounds → black — */
.faq-answer,
.hero-subheadline, .hero-sub-desktop, .hero-sub-mobile,
.services-tab-btn,
.tab-panel-text p,
.tab-features li,
.step p, .step-desc, .process-step p,
.step h3, .step-title, .process-step h3, .step-label,
.process-card p,
.process-checklist li,
.tp-check-item,
.seo-card > p:last-of-type,
.seo-metric-lbl,
.meet-team-bio,
.meet-team-points li,
.meet-team-points li::before,
.retro-cursor { color: #000000 !important; }

/* — Text colours on DARK backgrounds (footer) → white — */
.footer-description,
.footer-about-text,
.footer-cta-text,
.footer-trust-item,
.footer-contact-line,
.footer-links-col ul li a,
.footer-bottom p,
.footer-bottom-links a,
.footer-social-link,
.footer-tagline,
.footer-nap,
.footer-why-label,
.footer-why-text,
.footer-links-col ul li a:hover,
.footer-bottom-links a:hover,
.footer-contact-line:hover { color: rgba(255,255,255,0.75) !important; }

/* — Placeholder text → grey — */
.form-group input::placeholder,
.form-group textarea::placeholder { color: #999999 !important; }

/* — Borders with rgba green → neutral — */
.navbar, .navbar.scrolled { border-bottom-color: #dddddd !important; }
.footer-top { border-bottom-color: #333333 !important; }
.footer-about { border-top-color: #333333 !important; }
.trusted-by-section, .logo-carousel-wrap { border-color: #dddddd !important; }
.portfolio-browser-bar { border-bottom-color: #dddddd !important; }
.white-bg, .light-bg, .alt-section { border-color: #dddddd !important; }
.form-group input,
.form-group textarea,
.form-group select { border-color: #aaaaaa !important; }

/* — Box-shadows with rgba green → none — */
.btn-primary:hover,
.btn-outline:hover,
.tab-visual-mockup,
.pricing-tier.featured, .pricing-card.featured,
input:focus, textarea:focus, select:focus,
.form-group input:focus, .form-group textarea:focus,
.hero-email-form:focus-within,
.hero-email-btn:hover,
.nav-links .nav-cta:hover,
.nav-cta:hover { box-shadow: none !important; }

/* — Backgrounds with rgba green → transparent / light — */
.btn-outline:hover { background: rgba(0,0,0,0.04) !important; }
.services-tab-btn:hover:not(.active) { background: rgba(0,0,0,0.05) !important; }
.nav-links .nav-cta:hover, .nav-cta:hover { background: #ffffff !important; }

/* ── LEFT/RIGHT EDGE GRADIENTS — remove all ── */
.transform-section::after {
  background: none !important;
  display: none !important;
}
.logo-carousel {
  mask-image: none !important;
  -webkit-mask-image: none !important;
}
.logo-carousel-wrap::before,
.logo-carousel-wrap::after,
.trusted-by-section::before,
.trusted-by-section::after {
  background: none !important;
  display: none !important;
}

/* ── PROCESS CARDS ── */
.how-it-works { background: #EFEFEF !important; }
.process-card {
  background: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.process-card:nth-child(1) { border-radius: 0 28px 28px 0 !important; }
.process-card:nth-child(2) { border-radius: 28px !important; }
.process-card:nth-child(3) { border-radius: 28px 0 0 28px !important; }
.process-card:hover { background: #ffffff !important; }
.process-num { color: #000000 !important; }
.process-card h3 { color: #000000 !important; }
.process-card p { color: #444444 !important; }
.process-card.reveal-active .process-num { color: #ffffff !important; }
.process-card.reveal-active h3 { color: #ffffff !important; }
.process-card.reveal-active p { color: rgba(255,255,255,0.85) !important; }
.process-card.reveal-active .process-checklist li { color: rgba(255,255,255,0.75) !important; }
.process-card.reveal-active .process-checklist { border-top-color: rgba(255,255,255,0.2) !important; }
.process-checklist { border-top-color: rgba(0,0,0,0.1) !important; }
.process-checklist li { color: #555555 !important; }
.process-checklist li::before { background: #000000 !important; }

/* ── SEQUENTIAL WORD FLASH — SEO → Google Ads → website builds ── */
/* Total cycle: 14s  |  each word flashes 3× then waits its turn   */
/* Flash ON = white text on black bg (inverted) like a screen pulse */

.flash-word {
  display: inline;
  padding: 0 1px;
  transition: none;
}

/* SEO: flashes at 0-10%, silent 11-100% */
@keyframes flash-seo {
  0%,  2%,  4%,  6%,  8%, 10%, 100% { filter: none; }
  1%,  3%,  5%  { filter: invert(1); }
}

/* Google Ads: silent 0-24%, flashes 25-35%, silent 36-100% */
@keyframes flash-gads {
  0%, 24%, 27%, 29%, 31%, 33%, 35%, 100% { filter: none; }
  25%, 28%, 30%, 32%, 34% { filter: invert(1); }
}

/* Website builds: silent 0-49%, flashes 50-60%, silent 61-100% */
@keyframes flash-web {
  0%, 49%, 52%, 54%, 56%, 58%, 60%, 100% { filter: none; }
  50%, 53%, 55%, 57%, 59% { filter: invert(1); }
}

/* ══════════════════════════════════════════
   SERVICE PAGES — B&W THEME OVERRIDES
   (SEO, Google Maps, Custom Web Design)
   ══════════════════════════════════════════ */

/* Hero title — black, no green glow */
.hero-title {
  color: #111111 !important;
  text-shadow: none !important;
}
/* Accent span inside h1 (e.g. "SEO", "Google Maps") — soft grey highlight */
.hero-title span {
  color: #555555 !important;
}
/* Hero subtitle paragraph */
.hero-subtitle {
  color: #333333 !important;
}
/* Section label (eyebrow text + dot) */
.section-label {
  color: #111111 !important;
}
.section-label-dot {
  background: #111111 !important;
}
/* Benefits section heading */
.section-heading h2 {
  color: #111111 !important;
  text-shadow: none !important;
}
.section-heading p {
  color: #444444 !important;
}
/* Benefit cards */
.benefit-card {
  background: #f9f9f9 !important;
  border: 1px solid #cccccc !important;
  box-shadow: none !important;
}
.benefit-card:hover {
  background: #f0f0f0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}
.benefit-card h3 {
  color: #111111 !important;
  text-shadow: none !important;
}
.benefit-card p {
  color: #444444 !important;
}
/* Hide emoji icons */
.benefit-icon {
  display: none !important;
}
/* Description section */
.description-section h2 {
  color: #111111 !important;
  text-shadow: none !important;
}
.description-section p {
  color: #333333 !important;
}
.description-section p strong {
  color: #111111 !important;
}
/* Back link — B&W */
.back-link {
  color: #111111 !important;
  border-color: #111111 !important;
}
.back-link:hover {
  background: #111111 !important;
  color: #ffffff !important;
}
/* Service page button — already handled globally but reinforce */
.hero-section .btn-primary {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
}
.hero-section .btn-primary:hover {
  background: #ffffff !important;
  color: #111111 !important;
}

.flash-seo  { animation: flash-seo  14s step-end infinite; }
.flash-gads { animation: flash-gads 14s step-end infinite; }
.flash-web  { animation: flash-web  14s step-end infinite; }

/* ══════════════════════════════════════════
   GLOBAL GREEN PURGE
   Kills all hardcoded rgba(69,200,122,…) and
   var(--retro-green) that slip past the :root override.
   Covers service pages + more-services.html
   ══════════════════════════════════════════ */

/* Remove all green text-shadows on headings */
h1, h2, h3, h4, h5, h6,
.hero-title, .section-heading h2, .description-section h2,
.core-heading, .cta-box h2 {
  text-shadow: none !important;
}

/* ── more-services: service cards ── */
.service-card {
  background: #f9f9f9 !important;
  border-color: #cccccc !important;
  box-shadow: none !important;
}
.service-card:hover {
  background: #f0f0f0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}
.service-card h3 {
  color: #111111 !important;
  text-shadow: none !important;
}
.service-card p {
  color: #444444 !important;
}
.service-card-link {
  color: #111111 !important;
  border-bottom-color: #555555 !important;
}
.service-card-link:hover {
  color: #000000 !important;
  border-bottom-color: #000000 !important;
}

/* ── more-services: core services grid ── */
.core-heading {
  color: #111111 !important;
  text-shadow: none !important;
}
.core-grid {
  border-color: #cccccc !important;
}
.core-item {
  border-right-color: #dddddd !important;
  border-bottom-color: #dddddd !important;
}
.core-item:hover {
  background: #f5f5f5 !important;
}
.core-item h4 {
  color: #111111 !important;
}
.core-item p {
  color: #444444 !important;
}

/* ── more-services: CTA box ── */
.cta-box {
  background: #f9f9f9 !important;
  border-color: #cccccc !important;
}
.cta-box h2 {
  color: #111111 !important;
}
.cta-box p {
  color: #444444 !important;
}

/* ── Footer: kill remaining green borders ── */
.footer-grid {
  border-bottom-color: #333333 !important;
}

/* ── Inline-style body background on standalone pages ── */
body {
  background-color: #ffffff !important;
  color: #111111 !important;
}

/* ══════════════════════════════════════════════════════
   PRICING PAGES — COMPREHENSIVE MONOCHROME FIX
   ══════════════════════════════════════════════════════ */

/* Hero section — was dark */
.pricing-hero,
.pricing-hero-search {
  background: #EFEFEF !important;
  background-color: #EFEFEF !important;
}
.pricing-hero .section-heading-lg,
.pricing-hero h1 {
  color: #111111 !important;
}
.pricing-hero .section-subtitle-lg,
.pricing-hero p {
  color: #444444 !important;
}

/* Inline green text — attribute selector beats inline style when paired with !important */
[style*="color:#45C87A"],
[style*="color: #45C87A"],
[style*="color:#45c87a"] {
  color: #111111 !important;
}
[style*="background:#45C87A"],
[style*="background: #45C87A"],
[style*="background:#45c87a"] {
  background: #111111 !important;
  color: #ffffff !important;
}

/* Back button */
.pricing-back-btn {
  background: #ffffff !important;
  border: 1px solid #cccccc !important;
  color: #111111 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.pricing-back-btn:hover {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
}
.pricing-back-btn svg { stroke: currentColor !important; }

/* Industry explainer accordion */
.industry-explainer {
  background: #f7f7f7 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.industry-explainer-toggle {
  background: transparent !important;
  color: #111111 !important;
}
.industry-explainer-toggle h2 {
  color: #111111 !important;
}
.industry-explainer-toggle svg {
  stroke: #111111 !important;
}
.industry-explainer-content p {
  color: #444444 !important;
}

/* Pricing cards — text was white (designed for dark bg) */
.pricing-card {
  background: #ffffff !important;
  border: 1px solid #cccccc !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
}
.pricing-card-popular {
  border: 2px solid #E8590C !important;
  box-shadow: none !important;
}
.pricing-popular-badge {
  background: #E8590C !important;
  color: #ffffff !important;
  border-color: #E8590C !important;
  border-radius: 0 !important;
}
.pricing-card-header h3 {
  color: #111111 !important;
}
.pricing-card-desc {
  color: #555555 !important;
}
.pricing-card-price {
  color: #111111 !important;
}
.pricing-currency,
.pricing-starting {
  color: #777777 !important;
}
.pricing-feature-group h4 {
  color: #777777 !important;
  border-bottom-color: #e0e0e0 !important;
}
.pricing-feature-group ul li {
  color: #333333 !important;
}
.pricing-feature-group ul li::before {
  color: #111111 !important;
  background: #111111 !important;
}

/* Demo buttons — orange */
.pricing-demo-btn {
  background: #E8590C !important;
  border: 1px solid #E8590C !important;
  color: #ffffff !important;
  border-radius: 0 !important;
}
.pricing-demo-btn:hover {
  background: #c04a09 !important;
  border-color: #c04a09 !important;
  color: #ffffff !important;
}
.pricing-demo-btn svg { stroke: currentColor !important; }

/* CTA section below cards */
.pricing-cta-section,
.pricing-cta {
  background: #f7f7f7 !important;
  border: 1px solid #e0e0e0 !important;
}
.pricing-cta h2, .pricing-cta-section h2 { color: #111111 !important; }
.pricing-cta p, .pricing-cta-section p { color: #444444 !important; }

/* Pricing hub page (pricing.html) */
.pricing-hero-search input {
  background: #ffffff !important;
  border-color: #cccccc !important;
  color: #111111 !important;
}
.pricing-hero-search input::placeholder { color: #999999 !important; }
.pricing-search-btn {
  background: #111111 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}

/* ── Industry search box — light theme override ── */
.industry-search-box {
  background: #ffffff !important;
  border: 1.5px solid #cccccc !important;
  border-radius: 60px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
}
.industry-search-box:focus-within {
  border-color: #E8590C !important;
  box-shadow: 0 0 0 4px rgba(232,89,12,0.12) !important;
  background: #ffffff !important;
}
.industry-search-icon {
  color: #888888 !important;
}
.industry-search-input {
  color: #111111 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
}
.industry-search-input::placeholder {
  color: #aaaaaa !important;
}
.industry-search-clear {
  color: #888888 !important;
}

.industry-grid-item,
.industry-pill {
  background: #ffffff !important;
  border: 1px solid #cccccc !important;
  color: #111111 !important;
  border-radius: 8px !important;
}
.industry-grid-item:hover,
.industry-pill:hover {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
}
.industry-grid-item span,
.industry-grid-item svg { color: #111111 !important; stroke: currentColor !important; }

/* Legal pages (privacy, terms) inline style override */
.legal-page h2 { color: #111111 !important; }
.legal-page a { color: #111111 !important; text-decoration: underline !important; }

/* Section label on pricing pages */
.pricing-section-label { color: #777777 !important; }

/* pricing-other notice box */
.pricing-other-notice {
  background: #f7f7f7 !important;
  border: 1px solid #e0e0e0 !important;
  color: #333333 !important;
  border-radius: 0 !important;
}
.pricing-other-notice strong { color: #111111 !important; }

/* ── Setup fee line on new pricing cards ── */
.pricing-setup-fee {
  color: #E8590C !important;
  font-size: 12px !important;
  font-family: 'Inter', sans-serif !important;
  margin: 4px 0 0 !important;
  font-weight: 600;
}

/* ── Flat feature list with orange checkmarks ── */
.pricing-features-flat ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.pricing-features-flat ul li {
  padding: 5px 0 5px 22px !important;
  position: relative !important;
  color: #333333 !important;
  font-size: 13px !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1.4 !important;
}
.pricing-features-flat ul li::before {
  content: '✓' !important;
  position: absolute !important;
  left: 0 !important;
  top: 5px !important;
  color: #E8590C !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

/* ── Get Started CTA button on pricing cards ── */
.pricing-card-cta {
  display: block !important;
  width: 100% !important;
  padding: 13px 16px !important;
  margin-top: 20px !important;
  background: #111111 !important;
  color: #ffffff !important;
  text-align: center !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border: 2px solid #111111 !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  letter-spacing: 0 !important;
}
.pricing-card-cta:hover {
  background: #E8590C !important;
  border-color: #E8590C !important;
  color: #ffffff !important;
}

/* ── Website Quote Form ── */
.website-quote-wrap {
  max-width: 700px;
  margin: 0 auto;
  background: #ffffff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 40px;
  box-sizing: border-box;
}
.website-quote-form {
  width: 100%;
}
.wqf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.wqf-full {
  grid-column: 1 / -1;
}
.wqf-field label {
  display: block;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #111111 !important;
  margin-bottom: 7px;
  letter-spacing: 0;
  text-transform: none;
}
.wqf-field input,
.wqf-field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #cccccc;
  background: #ffffff;
  color: #111111 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  border-radius: 0;
  box-sizing: border-box;
  outline: none;
}
.wqf-field input:focus,
.wqf-field textarea:focus {
  border-color: #111111 !important;
}
.wqf-field textarea {
  resize: vertical;
  min-height: 100px;
}
.wqf-actions {
  margin-top: 8px;
}
.wqf-submit {
  background: #E8590C !important;
  color: #ffffff !important;
  border: none !important;
  padding: 14px 32px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer;
  border-radius: 6px !important;
  letter-spacing: 0;
}
.wqf-submit:hover {
  background: #c04a09 !important;
}
.wqf-success {
  display: none;
  color: #111111 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center;
  padding: 20px;
  border: 2px solid #111111;
  border-radius: 8px !important;
  margin-top: 16px;
  line-height: 1.6;
}
.wqf-error {
  display: none;
  color: #cc0000 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  text-align: center;
  padding: 12px;
  border: 1px solid #cc0000;
  margin-top: 12px;
}
@media (max-width: 600px) {
  .wqf-row { grid-template-columns: 1fr !important; }
  .website-quote-wrap { padding: 24px 20px; }
}

/* ── Heading: industry name span must match h1 font-size ── */
.pricing-hero h1 span,
.pricing-hero .section-heading-lg span {
  font-size: inherit !important;
  font-family: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

/* ── Service selector nav tabs ── */
.pricing-service-nav {
  border-bottom: 1px solid #dddddd;
  background: #ffffff;
  position: sticky;
  top: 60px;
  z-index: 100;
}
.pricing-service-nav .container {
  display: flex;
  gap: 0;
  padding: 0 24px;
}
.pricing-service-tab {
  display: inline-block;
  padding: 14px 28px;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #555555 !important;
  text-decoration: none !important;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  text-shadow: none !important;
}
.pricing-service-tab:hover {
  color: #111111 !important;
  border-bottom-color: #111111;
  background: transparent !important;
}
.pricing-service-tab.active,
.pricing-service-tab:target {
  color: #E8590C !important;
  border-bottom-color: #E8590C;
}

/* ── Pricing service section titles (SEO, Ads) ── */
/* Override JS-applied opacity:0 on cards in SEO/Ads sections */
.pricing-service-section .pricing-card {
  opacity: 1 !important;
  transform: none !important;
  transition: box-shadow 0.2s, border-color 0.2s !important;
}
.pricing-service-section {
  border-top: 1px solid #dddddd;
  padding-top: 60px;
}
.pricing-section-label-wrap {
  text-align: center;
  margin-bottom: 40px;
}
.pricing-section-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(20px, 2.5vw, 28px) !important;
  color: #111111 !important;
  margin-bottom: 14px !important;
  text-shadow: none !important;
}
.pricing-section-desc {
  color: #555555 !important;
  font-size: 15px !important;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
  font-family: 'Inter', sans-serif !important;
}

/* ── SEO CARD CANVAS REVEAL — globe SVG strokes → white on hover ── */
.seo-card.seo-reveal-active .geo-icon-row svg * {
  stroke: #ffffff;
}

/* ── SEO CARD CANVAS REVEAL — text to white (must be last to beat nuclear overrides) ── */
.seo-card.seo-reveal-active,
.seo-card.seo-reveal-active:hover { color: #ffffff !important; }
.seo-card.seo-reveal-active h3 { color: #ffffff !important; }
.seo-card.seo-reveal-active .seo-card-label { color: rgba(255,255,255,0.75) !important; }
.seo-card.seo-reveal-active p,
.seo-card.seo-reveal-active > p,
.seo-card.seo-reveal-active > p:last-of-type { color: rgba(255,255,255,0.85) !important; }
.seo-card.seo-reveal-active .seo-metric-val { color: #ffffff !important; }
.seo-card.seo-reveal-active .seo-metric-lbl { color: rgba(255,255,255,0.7) !important; }
.seo-card.seo-reveal-active .seo-card-metrics { border-top-color: rgba(255,255,255,0.2) !important; }
.seo-card.seo-reveal-active .aio-logo-white { filter: brightness(0) invert(1) !important; }


/* ── BW: Global Presence teaser ── */
.global-presence-section {
  background: #f0f0f0 !important;
}
.global-presence-section::before {
  background: none !important;
}
.global-loc-chip {
  background: #fff !important;
  border-color: #ddd !important;
  color: #333 !important;
}
.global-loc-chip:hover {
  background: rgba(232,89,12,0.07) !important;
  border-color: rgba(232,89,12,0.4) !important;
  color: #111 !important;
}

/* ── BW: suppress gradient animation in the pricing banner ── */
.bw-theme .tp-grad-container { display: none !important; }
.bw-theme .tp-glow           { display: block !important; }

/* ── NAV DROPDOWN — black toggle text, white panel, black text ── */
.dropdown-toggle {
  color: #111111 !important;
}
.dropdown-toggle::after {
  color: #111111 !important;
}
.dropdown-menu {
  background: #ffffff !important;
  border: 1px solid #e8e8e8 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
  backdrop-filter: none !important;
}
.dropdown-menu a,
.dropdown-menu a:visited {
  color: #111111 !important;
}
.dropdown-menu a:hover {
  background: rgba(0,0,0,0.05) !important;
  color: #111111 !important;
}
.dropdown-category-group:not(:first-child) {
  border-top-color: rgba(0,0,0,0.08) !important;
}

/* ── MOBILE: Hero CTA button — white, centred, black text, no effects ── */
@media (max-width: 768px) {
  .hero-email-cta {
    text-align: center !important;
    width: 100% !important;
  }
  .hero-email-btn,
  .hero-email-btn:hover,
  .hero-email-btn:active,
  .hero-email-btn:focus {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: transparent !important;
    border-radius: 100px !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    display: inline-flex !important;
  }
  .hero-email-btn svg {
    stroke: #111111 !important;
  }
}

/* ── MOBILE: Process cards — uniform rounded corners, no border, no shadow ── */
@media (max-width: 768px) {
  .process-card,
  .process-card:nth-child(1),
  .process-card:nth-child(2),
  .process-card:nth-child(3) {
    border-radius: 20px !important;
    border: none !important;
    box-shadow: none !important;
  }
}

/* ── MOBILE NAV PANEL — white background, black text, flat CTA ── */
@media (max-width: 768px) {
  .nav-links {
    background: #ffffff !important;
    border-left: 1px solid #e8e8e8 !important;
    box-shadow: none !important;
  }
  .nav-links li {
    border-bottom: 1px solid #eeeeee !important;
  }
  .nav-links a,
  .nav-links a:hover,
  .nav-links a:active {
    color: #111111 !important;
    background: transparent !important;
  }
  /* Let's Get Started — same plain link, no button styling */
  .nav-links .nav-cta,
  .nav-links .nav-cta:hover,
  .nav-links .nav-cta:active {
    background: transparent !important;
    color: #111111 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
    font-weight: 400 !important;
  }
  /* Dropdown toggle text */
  .dropdown-toggle {
    color: #111111 !important;
  }
}

/* ── MOBILE: default navbar full width ── */
@media (max-width: 768px) {
  header, .header, .site-header, .navbar:not(.scrolled) {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    border-radius: 0 !important;
  }
  /* Scrolled state on mobile — small inset pill */
  .navbar.scrolled {
    left: 5% !important;
    right: 5% !important;
    top: 10px !important;
    border-radius: 100px !important;
  }
}