/* ─────────────────────────────────────────────────────────────────
   CRO Block 4 — Hero Industry (final override)
   Loaded last via base.html.twig 1..17 loop. Token-bound rebuild
   that overrides legacy cro-hero-industry.css cosmetic rules.
   Scheme: cream (lightest variant) so industry photo and pills lift.
   ───────────────────────────────────────────────────────────── */

/* ── Section shell ───────────────────────────────────────────── */
.section.cro-hero-industry,
.section.block-cro-block-4,
.section.industry-hero-compact,
.section.hero-isolated {
  background: var(--ds-cream) !important;
  color: var(--ds-ink) !important;
  padding: var(--ds-section-py-lg) 0 !important;
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) {
  .section.cro-hero-industry,
  .section.block-cro-block-4 {
    padding: var(--ds-section-py-sm) 0 !important;
  }
}

/* Override inline solid bg + overlay so we keep the cream scheme. */
.cro-hero-industry .hero-bg-solid,
.cro-hero-industry .hero-overlay {
  display: none !important;
}

/* Watermark seal — soft, low-z decorative */
.cro-hero-industry .trust-seal-watermark {
  position: absolute;
  top: 50%;
  right: var(--ds-space-5);
  transform: translateY(-50%);
  width: 280px !important;
  height: 280px !important;
  color: var(--ds-cta);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 991px) {
  .cro-hero-industry .trust-seal-watermark { display: none; }
}

/* ── Container ───────────────────────────────────────────────── */
/* The .row contains decorative siblings (hero-color-config, hero-bg-solid,
   hero-overlay, trust-seal-watermark) plus 2 col-lg-6 columns. Use flex
   on mobile and grid + grid-column overrides on desktop. */
.cro-hero-industry .container > .row {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-6);
  align-items: stretch;
  position: relative;
}
.cro-hero-industry .container > .row > .hero-color-config { display: none !important; }
.cro-hero-industry .container > .row > .hero-bg-solid,
.cro-hero-industry .container > .row > .hero-overlay {
  display: none !important;
}
@media (min-width: 992px) {
  .cro-hero-industry .container > .row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--ds-space-7);
    align-items: start;
  }
  .cro-hero-industry .container > .row > svg.trust-seal-watermark {
    grid-column: 2 / 3;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: end;
    pointer-events: none;
  }
}
.cro-hero-industry .col-lg-6 {
  width: 100%; max-width: 100%; flex: none; padding: 0;
}

/* ── Industry pills ──────────────────────────────────────────── */
.cro-hero-industry .industry-pills-isolated {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  margin-bottom: var(--ds-space-4);
}
.cro-hero-industry .industry-pill-isolated {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  background: #fff;
  color: var(--ds-ink-soft);
  border: 1px solid var(--ds-rule);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--ds-duration) var(--ds-ease-out);
}
.cro-hero-industry .industry-pill-isolated:hover {
  border-color: var(--ds-cta);
  color: var(--ds-cta);
  transform: translateY(-1px);
}
.cro-hero-industry .industry-pill-isolated.active {
  background: var(--ds-cta);
  color: #fff;
  border-color: var(--ds-cta);
  box-shadow: var(--ds-shadow-cta);
}

/* ── Headline + subheadline ──────────────────────────────────── */
.cro-hero-industry .hero-headline-isolated {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-xl);
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--ds-ink) !important;
  margin: 0 0 var(--ds-space-4);
  text-transform: uppercase;
}
.cro-hero-industry .hero-subheadline-isolated {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-lg);
  color: var(--ds-ink-soft) !important;
  line-height: 1.55;
  margin: 0 0 var(--ds-space-5);
  border-left: 3px solid var(--ds-cta);
  padding: 0.2rem 0 0.2rem var(--ds-space-4);
}

/* ── Stat widget (collapsed) ─────────────────────────────────── */
.cro-hero-industry .stat-display-widget-isolated {
  background: #fff !important;
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: var(--ds-shadow-md);
  padding: var(--ds-space-4) !important;
  margin-bottom: var(--ds-space-5);
  position: relative;
  z-index: 1;
}
.cro-hero-industry .stat-widget-collapsed {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ds-space-4);
  align-items: center;
}
@media (min-width: 768px) {
  .cro-hero-industry .stat-widget-collapsed {
    grid-template-columns: auto 1fr auto;
  }
}
.cro-hero-industry .stat-col-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3);
  background: color-mix(in srgb, var(--ds-cta) 8%, white);
  border-radius: var(--ds-radius);
  min-width: 88px;
}
.cro-hero-industry .stat-icon-isolated {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--ds-cta);
}
.cro-hero-industry .stat-icon-isolated svg,
.cro-hero-industry .stat-icon-isolated img {
  width: 28px !important;
  height: 28px !important;
}
.cro-hero-industry .stat-number-isolated {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-md);
  letter-spacing: 0.005em;
  color: var(--ds-cta);
  line-height: 1;
}
.cro-hero-industry .stat-col-info { display: flex; flex-direction: column; gap: 0.2rem; }
.cro-hero-industry .stat-label-isolated {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  font-weight: 700;
  color: var(--ds-ink);
}
.cro-hero-industry .stat-details-isolated {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  color: var(--ds-ink-soft);
}
.cro-hero-industry .stat-click-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  margin-top: 0.4rem;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-cta);
  cursor: pointer;
}
.cro-hero-industry .hint-icon { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; }

.cro-hero-industry .stat-col-preview {
  display: none;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-3);
  background: var(--ds-paper);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  color: var(--ds-ink-soft);
  cursor: pointer;
}
@media (min-width: 768px) {
  .cro-hero-industry .stat-col-preview { display: flex; }
}
.cro-hero-industry .preview-content { line-height: 1.4; }
.cro-hero-industry .preview-text strong { color: var(--ds-ink); }
.cro-hero-industry .preview-hint-icon {
  color: var(--ds-cta);
  font-size: 0.85em;
}

.cro-hero-industry .stat-trust-badges {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  margin-top: var(--ds-space-3);
  padding-top: var(--ds-space-3);
  border-top: 1px solid var(--ds-rule);
}
.cro-hero-industry .stat-trust-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--ds-trust) 12%, white);
  color: var(--ds-trust-dk);
  border-radius: 999px;
}

/* Stat widget expanded */
.cro-hero-industry .stat-widget-expanded {
  display: none;
  margin-top: var(--ds-space-3);
  padding-top: var(--ds-space-3);
  border-top: 1px solid var(--ds-rule);
}
.cro-hero-industry .stat-display-widget-isolated.expanded .stat-widget-expanded { display: block; }
.cro-hero-industry .expanded-header {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-3);
}
.cro-hero-industry .expanded-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ds-cta) 12%, white);
  color: var(--ds-cta);
  flex-shrink: 0;
}
.cro-hero-industry .expanded-icon svg,
.cro-hero-industry .expanded-icon img {
  width: 20px !important;
  height: 20px !important;
}
.cro-hero-industry .expanded-title { flex: 1; }
.cro-hero-industry .expanded-title h4 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-sm);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
}
.cro-hero-industry .expanded-title p {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  color: var(--ds-ink-soft);
  margin: 0.2rem 0 0;
}
.cro-hero-industry .expanded-close-hint {
  cursor: pointer;
  color: var(--ds-ink-mute);
  font-size: 1rem;
}
.cro-hero-industry .stat-divider-isolated {
  height: 1px;
  background: var(--ds-rule);
  margin: var(--ds-space-3) 0;
}
.cro-hero-industry .stat-breakdown-isolated {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  line-height: 1.55;
  color: var(--ds-ink-soft);
}
.cro-hero-industry .stat-breakdown-isolated strong { color: var(--ds-ink); }
.cro-hero-industry .breakdown-section { margin-bottom: var(--ds-space-3); }
.cro-hero-industry .breakdown-trust {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  margin-top: var(--ds-space-3);
  padding-top: var(--ds-space-3);
  border-top: 1px solid var(--ds-rule);
}
.cro-hero-industry .trust-seal-mini {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-trust-dk);
}
.cro-hero-industry .stat-trust-badges-expanded {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
}

/* ── CTA buttons ─────────────────────────────────────────────── */
.cro-hero-industry .hero-ctas-isolated {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-4);
}
.cro-hero-industry .hero-cta-isolated {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.85rem 1.4rem;
  font-family: var(--ds-font-body);
  font-weight: 700;
  border-radius: var(--ds-radius);
  text-decoration: none !important;
  transition: background var(--ds-duration) var(--ds-ease-out),
              transform var(--ds-duration-fast) var(--ds-ease-out);
}
.cro-hero-industry .hero-cta-isolated.primary,
.cro-hero-industry .hero-cta-isolated.cta-primary,
.cro-hero-industry .hero-cta-isolated:not(.secondary):not(.cta-secondary) {
  background: var(--ds-cta);
  color: #fff;
  box-shadow: var(--ds-shadow-cta);
}
.cro-hero-industry .hero-cta-isolated.primary:hover,
.cro-hero-industry .hero-cta-isolated:not(.secondary):not(.cta-secondary):hover {
  background: var(--ds-cta-dk);
  transform: translateY(-1px);
}
.cro-hero-industry .hero-cta-isolated.secondary,
.cro-hero-industry .hero-cta-isolated.cta-secondary {
  background: #fff;
  color: var(--ds-ink);
  border: 1px solid var(--ds-rule);
  box-shadow: var(--ds-shadow-sm);
}
.cro-hero-industry .hero-cta-isolated.secondary:hover {
  border-color: var(--ds-cta);
  color: var(--ds-cta);
}
.cro-hero-industry .cta-text-isolated {
  font-size: var(--ds-fs-body-lg);
  font-weight: 700;
  line-height: 1.2;
}
.cro-hero-industry .cta-subtitle-isolated {
  font-size: var(--ds-fs-body-sm);
  font-weight: 400;
  opacity: 0.9;
  line-height: 1.2;
}

/* ── Risk reversal row ───────────────────────────────────────── */
.cro-hero-industry .risk-reversal-isolated {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-4);
}
.cro-hero-industry .risk-reversal-isolated span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  color: var(--ds-trust-dk);
  font-weight: 600;
}
.cro-hero-industry .risk-reversal-isolated span::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ds-trust);
}

/* ── Right column ────────────────────────────────────────────── */
.cro-hero-industry .trust-pills-isolated {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  margin-bottom: var(--ds-space-4);
}
.cro-hero-industry .trust-pill-isolated {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  background: #fff;
  color: var(--ds-ink);
  border: 1px solid var(--ds-rule);
  border-radius: 999px;
  box-shadow: var(--ds-shadow-sm);
}

/* Micro testimonial */
.cro-hero-industry .micro-testimonial-isolated {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  padding: var(--ds-space-4);
  margin-bottom: var(--ds-space-4);
  background: #fff;
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-sm);
}
.cro-hero-industry .testimonial-avatar-isolated {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--ds-cta);
  color: #fff;
  border-radius: 999px;
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-body-lg);
  letter-spacing: 0.005em;
}
.cro-hero-industry .testimonial-content-isolated {
  flex: 1;
  font-family: var(--ds-font-serif);
  font-style: italic;
  font-size: var(--ds-fs-body);
  color: var(--ds-ink-soft);
  line-height: 1.55;
  min-height: 1.5em;
}

/* Review widget */
.cro-hero-industry .review-widget-isolated {
  padding: var(--ds-space-4);
  margin-bottom: var(--ds-space-4);
  background: #fff;
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-sm);
}
.cro-hero-industry .review-stars-isolated {
  font-size: var(--ds-fs-body-lg);
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
}
.cro-hero-industry .review-text-isolated {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  color: var(--ds-ink);
  line-height: 1.5;
  font-weight: 600;
  margin-bottom: var(--ds-space-2);
}
.cro-hero-industry .review-verified-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--ds-trust) 12%, white);
  color: var(--ds-trust-dk);
  border-radius: 999px;
}

/* Urgency note */
.cro-hero-industry .urgency-note-isolated {
  padding: var(--ds-space-3) var(--ds-space-4);
  margin-bottom: var(--ds-space-4);
  background: color-mix(in srgb, var(--ds-cta) 8%, white);
  border-left: 3px solid var(--ds-cta);
  border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  color: var(--ds-ink);
  line-height: 1.5;
}
.cro-hero-industry .urgency-note-isolated p { margin: 0; }
.cro-hero-industry .urgency-note-isolated strong { color: var(--ds-cta-dk); }

/* Cert row */
.cro-hero-industry .cert-row-isolated {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  margin-bottom: var(--ds-space-4);
}
.cro-hero-industry .cert-badge-isolated {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 0.45rem 0.85rem;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  background: #fff;
  color: var(--ds-ink);
  border: 1px solid var(--ds-rule);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none !important;
  transition: all var(--ds-duration) var(--ds-ease-out);
}
.cro-hero-industry .cert-badge-isolated:hover {
  border-color: var(--ds-cta);
  color: var(--ds-cta);
  transform: translateY(-1px);
}
.cro-hero-industry .cert-icon-isolated,
.cro-hero-industry .cert-icon-isolated svg,
.cro-hero-industry .cert-icon-isolated img {
  width: 16px !important;
  height: 16px !important;
}

/* Cert detail panel */
.cro-hero-industry .cert-details-isolated {
  display: none;
  padding: var(--ds-space-4);
  background: var(--ds-ink);
  color: #fff;
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-md);
  position: relative;
}
.cro-hero-industry .cert-details-isolated.active { display: block; }
.cro-hero-industry .cert-detail-content-isolated h4 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-sm);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 var(--ds-space-2);
}
.cro-hero-industry .cert-detail-content-isolated p {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  color: rgba(255,247,227,.82);
  line-height: 1.55;
  margin: 0 0 var(--ds-space-3);
}
.cro-hero-industry .cert-benefits {
  padding: var(--ds-space-2) var(--ds-space-3);
  background: rgba(255,255,255,.06);
  border-radius: var(--ds-radius-sm);
  margin-bottom: var(--ds-space-3);
}
.cro-hero-industry .cert-detail-cta {
  display: flex;
  gap: var(--ds-space-2);
  align-items: center;
}
.cro-hero-industry .cert-cta-button {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1rem;
  background: var(--ds-cta);
  color: #fff;
  border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 700;
  text-decoration: none !important;
  transition: background var(--ds-duration) var(--ds-ease-out);
}
.cro-hero-industry .cert-cta-button:hover { background: var(--ds-cta-dk); }
.cro-hero-industry .cert-close-button {
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
}

/* Universal icon hard-cap */
.cro-hero-industry svg, .cro-hero-industry img { max-width: 100%; }

/* Mobile tightening */
@media (max-width: 575px) {
  .cro-hero-industry .hero-headline-isolated { font-size: clamp(2rem, 9vw, 2.6rem); }
  .cro-hero-industry .stat-display-widget-isolated { padding: var(--ds-space-3) !important; }
  .cro-hero-industry .stat-col-icon { min-width: 72px; padding: var(--ds-space-2); }
  .cro-hero-industry .hero-ctas-isolated .hero-cta-isolated { width: 100%; justify-content: center; align-items: center; }
}