/* ═══════════════════════════════════════════════════════════════════════
   SP2 HERO — Global Fixes v2 (2026-06-18)
   Scope: all pages with .sp2-hero-form-card
   NID 2331 specific overrides in paragraph--o8-sp2-hero--104192.html.twig
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Bullet list reset (no double markers) ──────────────────────────── */
.sp2-hero__bullets,
.sp2-hero__bullets li {
  list-style: none !important;
}
.sp2-hero__bullets li::before {
  content: none !important;
  display: none !important;
}

/* ── Hero background overlay: lighter (shows imagery, emotional resonance) ── */
/* Matches /services/seo ~42% opacity. Was ~65% which blacked out imagery. */
.sp2-hero__bg-overlay {
  opacity: 0.42 !important;
}

/* ── Dark backdrop card on left column ─────────────────────────────── */
.sp2-hero__content {
  background: rgba(10,22,40,0.68);
  border-radius: 16px;
  padding: 40px 44px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 2px 12px rgba(0,0,0,0.30);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ── CTA buttons: side-by-side (horizontal), not stacked ───────────── */
.sp2-hero__cta-wrap {
  display: flex;
  flex-direction: row !important;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Ghost CTA button style ─────────────────────────────────────────── */
.sp2-hero__cta-ghost {
  display: inline-block;
  padding: 14px 28px;
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 8px;
  color: #fff !important;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none !important;
  letter-spacing: 0.01em;
  transition: border-color 0.2s, background 0.2s;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}
.sp2-hero__cta-ghost:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.12);
  color: #fff !important;
}

/* ── Mobile: single-col layout + hide form card ────────────────────── */
@media (max-width: 1024px) {
  .sp2-hero__inner { grid-template-columns: 1fr; }
  .sp2-hero-form-card { display: none !important; }
}

/* ── Mobile star/trust badges: compact flex row ────────────────────── */
.sp2-trust-badges {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}
.sp2-trust-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  font-size: 12px !important;
  padding: 4px 10px !important;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .sp2-trust-badge { font-size: 11px !important; padding: 3px 8px !important; }
}

/* ── Scroll-down arrow ─────────────────────────────────────────────── */
.sp2-hero {
  position: relative;
}
.sp2-scroll-arrow {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  color: rgba(255,255,255,0.65);
  font-size: 2.5rem;
  z-index: 10;
  animation: sp2ArrowBounce 1.8s ease-in-out infinite;
  transition: color 0.2s;
  line-height: 1;
  user-select: none;
}
.sp2-scroll-arrow:hover { color: rgba(255,255,255,1); }
@keyframes sp2ArrowBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(9px); }
}

/* ═══════════════════════════════════════════════════════════════════════
   TWO-STEP FORM — v2 (2026-06-18)
   Step 1: first_name + last_name + email + fake "Talk With an Advisor" btn
           → fires partial lead FETCH on click, transitions to step 2
   Step 2: phone + company_name + message + real Drupal submit
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Form layout: name fields side-by-side ──────────────────────────── */
.sp2-hero-form-card form.webform-submission-form {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0.65rem;
}
.sp2-hero-form-card .form-item-first-name,
.sp2-hero-form-card .form-item-last-name {
  flex: 0 0 calc(50% - 0.325rem) !important;
}
.sp2-hero-form-card .form-item-email,
.sp2-hero-form-card .form-item-phone,
.sp2-hero-form-card .form-item-company-website,
.sp2-hero-form-card .form-item-message,
.sp2-hero-form-card .form-actions,
.sp2-hero-form-card .sp2-step1-btn-wrap {
  flex: 0 0 100% !important;
  width: 100% !important;
}

/* ── Hide step-2 fields + Drupal submit button by default ───────────── */
.sp2-hero-form-card .form-item-phone,
.sp2-hero-form-card .form-item-company-website,
.sp2-hero-form-card .form-item-message,
.sp2-hero-form-card .form-actions {
  display: none !important;
}

/* ── Transition: when step-2 is active ─────────────────────────────── */
.sp2-hero-form-card.sp2-step2-active .form-item-first-name,
.sp2-hero-form-card.sp2-step2-active .form-item-last-name,
.sp2-hero-form-card.sp2-step2-active .form-item-email,
.sp2-hero-form-card.sp2-step2-active .sp2-step1-btn-wrap {
  display: none !important;
}
.sp2-hero-form-card.sp2-step2-active .form-item-phone,
.sp2-hero-form-card.sp2-step2-active .form-item-company-website,
.sp2-hero-form-card.sp2-step2-active .form-item-message,
.sp2-hero-form-card.sp2-step2-active .form-actions {
  display: block !important;
}

/* ── Step 2 header ──────────────────────────────────────────────────── */
.sp2-step2-heading {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.5rem 0;
  flex: 0 0 100%;
}

/* ── Fake step-1 button ─────────────────────────────────────────────── */
.sp2-step1-btn {
  display: block;
  width: 100%;
  padding: 0.8rem 1.25rem;
  background: #A4BF34;
  color: #fff !important;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s, opacity 0.2s;
  letter-spacing: 0.01em;
}
.sp2-step1-btn:hover { background: #8fab2a; }
.sp2-step1-btn:disabled {
  opacity: 0.75;
  cursor: default;
}

/* ── Drupal submit button override (step 2) ─────────────────────────── */
.sp2-hero-form-card .form-actions input[type="submit"],
.sp2-hero-form-card .form-actions button[type="submit"] {
  display: block !important;
  width: 100% !important;
  padding: 0.8rem 1.25rem !important;
  background: #00BCF1 !important;
  color: #0A1628 !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}
.sp2-hero-form-card .form-actions input[type="submit"]:hover,
.sp2-hero-form-card .form-actions button[type="submit"]:hover {
  background: #00a8d8 !important;
}

/* ── Webform confirmation / success state ───────────────────────────── */
/* Drupal renders .webform-confirmation inside the form card (white bg)  */
.sp2-hero-form-card .webform-confirmation,
.sp2-hero-form-card .webform-submission-confirmation {
  color: #1a2e4a !important;
  text-align: center;
  padding: 1.5rem 1rem;
  font-size: 0.95rem;
}
.sp2-hero-form-card .webform-confirmation h2,
.sp2-hero-form-card .webform-confirmation p {
  color: #1a2e4a !important;
}

/* ── Step-2 fade-in animation ───────────────────────────────────────── */
@keyframes sp2Step2Fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sp2-hero-form-card.sp2-step2-active .form-item-phone,
.sp2-hero-form-card.sp2-step2-active .form-item-company-website,
.sp2-hero-form-card.sp2-step2-active .form-item-message,
.sp2-hero-form-card.sp2-step2-active .form-actions,
.sp2-hero-form-card.sp2-step2-active .sp2-step2-heading {
  animation: sp2Step2Fade 0.35s ease both;
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION BACKGROUNDS — Blue gradient replaces purple (B2B trust signal)
   ═══════════════════════════════════════════════════════════════════════ */

/* Testimonials section */
/* ── Testimonials section: blue gradient (B2B trust > purple creative) ── */
/* Source: purple #90499B set in sp2-paragraphs.css; override here with O8 blue */
.sp2-testimonials {
  background: linear-gradient(135deg, #0A1628 0%, #0e3d6b 55%, #007DB9 100%) !important;
}
/* Blockquote section (if purple-tinted) */
.paragraph--type--sp2-blockquote {
  background: linear-gradient(145deg, #091526 0%, #0e264f 100%) !important;
}


/* form-field-seo-match 2026-06-18 */
.sp2-hero-form-card input[type="text"],
.sp2-hero-form-card input[type="email"],
.sp2-hero-form-card input[type="tel"],
.sp2-hero-form-card textarea,
.sp2-hero-form-card select {
  border-radius: 8px !important;
  background: rgb(248, 250, 252) !important;
  border: 1px solid rgb(226, 232, 240) !important;
  color: rgb(15, 23, 42) !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.95rem !important;
  box-sizing: border-box !important;
}
.sp2-hero-form-card .sp2-hero-form-card-disclaimer {
  color: rgb(71, 85, 105) !important;
  font-size: 0.78rem !important;
  text-align: center !important;
  margin-top: 0.5rem !important;
}